machinaos 0.0.76 → 0.0.78

package/client/src/components/ui/action-button.tsx

@@ -17,25 +17,32 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
+import { Sounds } from '@/lib/sound';
 
 export const actionButtonVariants = cva(
   // Base: 32px tall pill with icon-text gap, semibold, focus ring, smooth hover.
-  'inline-flex h-8 items-center gap-1.5 rounded-md border px-3.5 text-[13px] font-semibold transition-all outline-none select-none disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-ring/40',
+  // `action-btn` + `btn` co-classes are the design-handoff structural
+  // hooks for per-theme decorations (gold-foil on Renaissance, neon
+  // outline on Cyber, hard 4px shadow on Atomic) and the global hover
+  // sound delegate. Disabled state uses shadcn-idiomatic
+  // `disabled:opacity-50` so we don't do per-token opacity arithmetic
+  // at the call site.
+  'action-btn btn inline-flex h-8 items-center gap-1.5 rounded-md border px-3.5 text-[13px] font-semibold transition-all outline-none select-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-ring/40',
   {
     variants: {
       intent: {
         run:
-          'border-action-run-border bg-action-run-soft text-action-run hover:bg-action-run/25 disabled:border-primary/40 disabled:bg-primary/10 disabled:text-primary',
+          'border-action-run-border bg-action-run-soft text-action-run hover:bg-action-run-hover',
         stop:
-          'border-action-stop-border bg-action-stop-soft text-action-stop hover:bg-action-stop/25 disabled:border-primary/40 disabled:bg-primary/10 disabled:text-primary',
+          'border-action-stop-border bg-action-stop-soft text-action-stop hover:bg-action-stop-hover',
         save:
-          'border-action-save-border bg-action-save-soft text-action-save hover:bg-action-save/25 disabled:border-primary/40 disabled:bg-primary/10 disabled:text-primary',
+          'border-action-save-border bg-action-save-soft text-action-save hover:bg-action-save-hover',
         config:
-          'border-action-config-border bg-action-config-soft text-action-config hover:bg-action-config/25 disabled:border-primary/40 disabled:bg-primary/10 disabled:text-primary',
+          'border-action-config-border bg-action-config-soft text-action-config hover:bg-action-config-hover',
         secret:
-          'border-action-secret-border bg-action-secret-soft text-action-secret hover:bg-action-secret/25 disabled:border-primary/40 disabled:bg-primary/10 disabled:text-primary',
+          'border-action-secret-border bg-action-secret-soft text-action-secret hover:bg-action-secret-hover',
         tools:
-          'border-action-tools-border bg-action-tools-soft text-action-tools hover:bg-action-tools/25 disabled:border-primary/40 disabled:bg-primary/10 disabled:text-primary',
+          'border-action-tools-border bg-action-tools-soft text-action-tools hover:bg-action-tools-hover',
       },
     },
     defaultVariants: { intent: 'save' },
@@ -49,13 +56,31 @@ export interface ActionButtonProps
     VariantProps<typeof actionButtonVariants> {}
 
 export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
-  ({ className, intent, ...props }, ref) => (
-    <button
-      ref={ref}
-      type={props.type ?? 'button'}
-      className={cn(actionButtonVariants({ intent }), className)}
-      {...props}
-    />
-  ),
+  ({ className, intent, onClick, ...props }, ref) => {
+    // Fire the per-theme `click` sound BEFORE the user-supplied
+    // handler so the audio cue doesn't depend on the action
+    // succeeding (e.g., even a disabled-late workflow run still
+    // gives feedback). Sounds.play() is a no-op when the engine is
+    // disabled or the active pack is `none`, so this costs nothing
+    // in the default state.
+    const handleClick = onClick
+      ? (event: React.MouseEvent<HTMLButtonElement>) => {
+          Sounds.play('click');
+          onClick(event);
+        }
+      : (_event: React.MouseEvent<HTMLButtonElement>) => {
+          Sounds.play('click');
+        };
+
+    return (
+      <button
+        ref={ref}
+        type={props.type ?? 'button'}
+        className={cn(actionButtonVariants({ intent }), className)}
+        onClick={handleClick}
+        {...props}
+      />
+    );
+  },
 );
 ActionButton.displayName = 'ActionButton';

package/client/src/components/ui/button.tsx

@@ -3,9 +3,16 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
 import { cn } from "@/lib/utils"
+import { Sounds } from "@/lib/sound"
 
+// `btn` co-class is the design-handoff structural hook — every shadcn
+// Button gets it so per-theme CSS rules (`.btn`, `.btn-primary`, etc.)
+// activate (gold-foil on Renaissance, neon outline on Cyber, riveted
+// brass on Steampunk, boomerang shadow on Atomic, etc.). It also
+// powers the global hover-sound delegate which selects on `.btn, .row,
+// .action-btn, .menu-pop-item, .wf-card, .comp, .cmdk-item`.
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "btn group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -46,6 +53,7 @@ function Button({
   variant = "default",
   size = "default",
   asChild = false,
+  onClick,
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
@@ -53,12 +61,27 @@ function Button({
   }) {
   const Comp = asChild ? Slot.Root : "button"
 
+  // Fire the per-theme `click` sound BEFORE the user-supplied handler
+  // so audio feedback is instant — mirrors the ActionButton pattern.
+  // No-op when the engine is disabled or the active pack is `none`.
+  // Disabled buttons never reach here (the `disabled` prop filters
+  // pointer events at the DOM level).
+  const handleClick = onClick
+    ? (event: React.MouseEvent<HTMLButtonElement>) => {
+        Sounds.play('click');
+        onClick(event);
+      }
+    : (_event: React.MouseEvent<HTMLButtonElement>) => {
+        Sounds.play('click');
+      };
+
   return (
     <Comp
       data-slot="button"
       data-variant={variant}
       data-size={size}
       className={cn(buttonVariants({ variant, size, className }))}
+      onClick={handleClick}
       {...props}
     />
   )

package/client/src/components/ui/dropdown-menu.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
+import { Sounds } from "@/lib/sound"
 import { CheckIcon, ChevronRightIcon } from "lucide-react"
 
 function DropdownMenu({
@@ -43,7 +44,11 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         align={align}
-        className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className )}
+        // `menu-pop` co-class is the design-handoff structural hook
+        // for per-theme dropdown decorations (parchment + gilded
+        // border on Renaissance, neon outline + > prefix on Cyber,
+        // etc.).
+        className={cn("menu-pop z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
@@ -62,18 +67,35 @@ function DropdownMenuItem({
   className,
   inset,
   variant = "default",
+  onSelect,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
   inset?: boolean
   variant?: "default" | "destructive"
 }) {
+  // Fire the per-theme `click` sound when the item is selected (Radix
+  // calls onSelect for both pointer + keyboard activation, which
+  // matches the upstream's `.menu-pop-item` click trigger).
+  const handleSelect = onSelect
+    ? (event: Event) => {
+        Sounds.play('click');
+        onSelect(event);
+      }
+    : (_event: Event) => {
+        Sounds.play('click');
+      };
+
   return (
     <DropdownMenuPrimitive.Item
       data-slot="dropdown-menu-item"
       data-inset={inset}
       data-variant={variant}
+      onSelect={handleSelect}
+      // `menu-pop-item` co-class powers per-theme item decorations
+      // (Renaissance ink-spread hover + ✦ marker; Cyber `> ` prefix +
+      // neon glow; etc.) and the W18 hover-sound delegate.
       className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        "menu-pop-item group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}

package/client/src/components/ui/input.tsx

@@ -1,14 +1,31 @@
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
+import { Sounds } from "@/lib/sound"
+
+function Input({ className, type, onChange, ...props }: React.ComponentProps<"input">) {
+  // Fire the per-theme `type` sound on every keystroke. The engine
+  // throttles `type` internally (W19 30 ms last-fire window) so rapid
+  // typing into a long input doesn't queue dozens of OscillatorNodes.
+  // No-op when sound is disabled.
+  const handleChange = onChange
+    ? (event: React.ChangeEvent<HTMLInputElement>) => {
+        Sounds.play('type');
+        onChange(event);
+      }
+    : undefined;
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
     <input
       type={type}
       data-slot="input"
+      onChange={handleChange}
+      // `input` co-class is the design-handoff structural hook —
+      // per-theme CSS attaches ruled-line backgrounds (Renaissance),
+      // terminal prompt prefix (Cyber), washi underline (Edo), etc.
+      // Also targeted by the W18 `type` sound delegate.
       className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "input h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

package/client/src/components/ui/select.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import { Select as SelectPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
+import { Sounds } from "@/lib/sound"
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
 
 function Select({
@@ -106,8 +107,21 @@ function SelectLabel({
 function SelectItem({
   className,
   children,
+  onClick,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  // Radix Select doesn't surface an `onSelect` per-item; clicks +
+  // keyboard activation both surface as DOM clicks on the Item, so we
+  // wrap onClick. Falls through to the original handler if any.
+  const handleClick = onClick
+    ? (event: React.MouseEvent<HTMLDivElement>) => {
+        Sounds.play('click');
+        onClick(event);
+      }
+    : (_event: React.MouseEvent<HTMLDivElement>) => {
+        Sounds.play('click');
+      };
+
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
@@ -115,6 +129,7 @@ function SelectItem({
         "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
+      onClick={handleClick}
       {...props}
     >
       <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">

package/client/src/components/ui/textarea.tsx

@@ -1,13 +1,26 @@
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
+import { Sounds } from "@/lib/sound"
+
+function Textarea({ className, onChange, ...props }: React.ComponentProps<"textarea">) {
+  // Fire the per-theme `type` sound on every keystroke (throttled by
+  // the W19 last-fire window inside the engine).
+  const handleChange = onChange
+    ? (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        Sounds.play('type');
+        onChange(event);
+      }
+    : undefined;
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
     <textarea
       data-slot="textarea"
+      onChange={handleChange}
+      // `input` co-class shares per-theme decorations + W18 type delegate
+      // with the Input primitive.
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "input flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

package/client/src/contexts/AuthContext.tsx

@@ -1,15 +1,27 @@
 /**
  * Authentication Context for user session management.
  *
- * Provides:
- * - Login/logout/register functions
- * - Current user state
- * - Authentication status
- * - Auth mode (single-owner vs multi-user)
+ * The auth-status check runs through TanStack Query (`useQuery`) so
+ * exponential backoff with full jitter, AbortController-based unmount
+ * cleanup, Strict-Mode safety, and 401/403 fast-fail are all delegated
+ * to the library — see https://tanstack.com/query/v5/docs/framework/react/guides/query-retries.
+ *
+ * The context's public surface (user, isAuthenticated, isLoading,
+ * authMode, canRegister, error, login, register, logout, checkAuth) is
+ * unchanged so consumer code does not move.
+ *
+ * Login / register / logout mutate the auth state by invalidating the
+ * `['auth', 'status']` query rather than calling a private setter — the
+ * single source of truth stays the query cache, which TanStack Query
+ * dedupes by reference equality, eliminating the spurious
+ * `isAuthenticated` flips that closed the WS prematurely under React
+ * Strict Mode.
  */
 
-import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import React, { createContext, useContext, useCallback, useMemo } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { API_CONFIG } from '../config/api';
+import { AUTH_RETRY } from '../lib/connectionConfig';
 
 export interface User {
   id: number;
@@ -43,159 +55,185 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 const getApiBase = () => `${API_CONFIG.PYTHON_BASE_URL}/api/auth`;
 
-export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [user, setUser] = useState<User | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [authMode, setAuthMode] = useState<'single' | 'multi'>('single');
-  const [canRegister, setCanRegister] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+const ANONYMOUS_USER: User = {
+  id: 0,
+  email: 'anonymous',
+  display_name: 'Anonymous',
+  is_owner: true,
+};
 
-  const checkAuth = useCallback(async (retryCount = 0): Promise<void> => {
-    const maxRetries = 5;
-    const baseDelay = 1000; // 1 second
+// `['auth', 'status']` is the canonical key for the bootstrap query.
+// Login / register / logout invalidate it via `queryClient.invalidateQueries`.
+export const AUTH_STATUS_QUERY_KEY = ['auth', 'status'] as const;
 
-    try {
-      const response = await fetch(`${getApiBase()}/status`, {
-        credentials: 'include'
-      });
-      const data: AuthStatus = await response.json();
-
-      // Runtime auth check: if backend says auth is disabled, set anonymous user
-      if (data.auth_enabled === false) {
-        setUser({ id: 0, email: 'anonymous', display_name: 'Anonymous', is_owner: true });
-        setIsLoading(false);
-        setError(null);
-        return;
-      }
+/**
+ * Full-jitter exponential backoff. Constants live in
+ * `lib/connectionConfig.ts` (`AUTH_RETRY`) so a future tuning pass is a
+ * single-file edit. See that module for the rationale and the reference
+ * link to the AWS Architecture Blog.
+ */
+const authRetryDelay = (attemptIndex: number): number =>
+  Math.random() * Math.min(AUTH_RETRY.CAP_MS, AUTH_RETRY.BASE_MS * 2 ** attemptIndex);
 
-      setAuthMode(data.auth_mode);
-      setCanRegister(data.can_register);
+/**
+ * Retry on network failures + 5xx; never retry on auth errors (401/403)
+ * because those are valid responses meaning "auth disabled / not logged
+ * in", not "backend unavailable". Cap at `AUTH_RETRY.MAX_ATTEMPTS`.
+ */
+const authShouldRetry = (failureCount: number, error: unknown): boolean => {
+  if (failureCount >= AUTH_RETRY.MAX_ATTEMPTS) return false;
+  const msg = error instanceof Error ? error.message : String(error);
+  if (msg.includes('HTTP 401') || msg.includes('HTTP 403')) return false;
+  return true;
+};
 
-      if (data.authenticated && data.user) {
-        setUser(data.user);
-      } else {
-        setUser(null);
-      }
-      setError(null);
-      setIsLoading(false);
-    } catch (err) {
-      console.error(`Failed to check auth status (attempt ${retryCount + 1}/${maxRetries + 1}):`, err);
-
-      // Retry with exponential backoff if server not ready
-      if (retryCount < maxRetries) {
-        const delay = baseDelay * Math.pow(2, retryCount);
-        console.log(`Retrying in ${delay}ms...`);
-        setTimeout(() => checkAuth(retryCount + 1), delay);
-      } else {
-        setUser(null);
-        setError('Failed to connect to server');
-        setIsLoading(false);
-      }
-    }
-  }, []);
+const fetchAuthStatus = async ({ signal }: { signal: AbortSignal }): Promise<AuthStatus> => {
+  const response = await fetch(`${getApiBase()}/status`, {
+    credentials: 'include',
+    signal,
+  });
+  if (!response.ok) {
+    // Wrap status in the error message so `authShouldRetry` can detect
+    // 401/403 without parsing the original Response.
+    throw new Error(`auth.status: HTTP ${response.status}`);
+  }
+  return response.json() as Promise<AuthStatus>;
+};
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const queryClient = useQueryClient();
 
-  // Check auth status on mount
-  useEffect(() => {
-    checkAuth();
-  }, [checkAuth]);
+  // Bootstrap auth-status query. The `signal` plumbed through `queryFn`
+  // is automatically aborted when the component unmounts (Strict Mode
+  // double-mount lifecycle handled by TanStack Query, see
+  // https://tanstack.com/query/v5/docs/react/guides/cancellation).
+  const authQuery = useQuery({
+    queryKey: AUTH_STATUS_QUERY_KEY,
+    queryFn: fetchAuthStatus,
+    retry: authShouldRetry,
+    retryDelay: authRetryDelay,
+    // Boot-once: never refetch on focus / mount / network reconnect.
+    // Logout / login explicitly invalidate.
+    staleTime: Infinity,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  });
 
-  const login = useCallback(async (email: string, password: string): Promise<boolean> => {
-    setError(null);
-    setIsLoading(true);
+  const data = authQuery.data;
+  const user: User | null = useMemo(() => {
+    if (!data) return null;
+    if (data.auth_enabled === false) return ANONYMOUS_USER;
+    return data.authenticated ? data.user : null;
+  }, [data]);
+
+  const authMode: 'single' | 'multi' = data?.auth_mode ?? 'single';
+  const canRegister = data?.can_register ?? false;
+  const isAuthenticated = user !== null;
+  const isLoading = authQuery.isPending;
+  const error = authQuery.isError ? 'Failed to connect to server' : null;
+
+  const invalidateAuth = useCallback(
+    () => queryClient.invalidateQueries({ queryKey: AUTH_STATUS_QUERY_KEY }),
+    [queryClient],
+  );
 
+  const login = useCallback(async (email: string, password: string): Promise<boolean> => {
     try {
       const response = await fetch(`${getApiBase()}/login`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         credentials: 'include',
-        body: JSON.stringify({ email, password })
+        body: JSON.stringify({ email, password }),
       });
+      const body = await response.json();
 
-      const data = await response.json();
-
-      if (!response.ok) {
-        setError(data.detail || 'Login failed');
-        setIsLoading(false);
+      if (!response.ok || !body.success || !body.user) {
+        // Surface the server's error via the query cache so `error` flips
+        // through the same path as a normal `isError` would.
+        queryClient.setQueryData<AuthStatus | null>(AUTH_STATUS_QUERY_KEY, null);
         return false;
       }
 
-      if (data.success && data.user) {
-        setUser(data.user);
-        setIsLoading(false);
-        return true;
-      }
-
-      setError('Login failed');
-      setIsLoading(false);
-      return false;
+      // Optimistically write the new user into the cache so the UI
+      // updates this render; then invalidate so the next refetch
+      // picks up server-derived fields (auth_mode, can_register).
+      queryClient.setQueryData<AuthStatus>(AUTH_STATUS_QUERY_KEY, {
+        auth_enabled: true,
+        auth_mode: authMode,
+        authenticated: true,
+        user: body.user,
+        can_register: false,
+      });
+      await invalidateAuth();
+      return true;
     } catch (err) {
       console.error('Login error:', err);
-      setError('Failed to connect to server');
-      setIsLoading(false);
       return false;
     }
-  }, []);
+  }, [queryClient, invalidateAuth, authMode]);
 
   const register = useCallback(async (
     email: string,
     password: string,
-    displayName: string
+    displayName: string,
   ): Promise<boolean> => {
-    setError(null);
-    setIsLoading(true);
-
     try {
       const response = await fetch(`${getApiBase()}/register`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         credentials: 'include',
-        body: JSON.stringify({ email, password, display_name: displayName })
+        body: JSON.stringify({ email, password, display_name: displayName }),
       });
+      const body = await response.json();
 
-      const data = await response.json();
-
-      if (!response.ok) {
-        setError(data.detail || 'Registration failed');
-        setIsLoading(false);
+      if (!response.ok || !body.success || !body.user) {
         return false;
       }
 
-      if (data.success && data.user) {
-        setUser(data.user);
-        setCanRegister(false); // After successful registration in single-owner mode
-        setIsLoading(false);
-        return true;
-      }
-
-      setError('Registration failed');
-      setIsLoading(false);
-      return false;
+      queryClient.setQueryData<AuthStatus>(AUTH_STATUS_QUERY_KEY, {
+        auth_enabled: true,
+        auth_mode: authMode,
+        authenticated: true,
+        user: body.user,
+        can_register: false,
+      });
+      await invalidateAuth();
+      return true;
     } catch (err) {
       console.error('Register error:', err);
-      setError('Failed to connect to server');
-      setIsLoading(false);
       return false;
     }
-  }, []);
+  }, [queryClient, invalidateAuth, authMode]);
 
   const logout = useCallback(async () => {
     try {
       await fetch(`${getApiBase()}/logout`, {
         method: 'POST',
-        credentials: 'include'
+        credentials: 'include',
       });
     } catch (err) {
       console.error('Logout error:', err);
     } finally {
-      setUser(null);
-      // Re-check auth status to update canRegister
-      await checkAuth();
+      // Force `authenticated: false` immediately so consumers (esp. the
+      // WebSocket logout effect) react this render; then refetch so
+      // `can_register` and `auth_mode` come back fresh.
+      queryClient.setQueryData<AuthStatus>(AUTH_STATUS_QUERY_KEY, (prev) => ({
+        ...(prev ?? { auth_enabled: true, auth_mode: 'single' as const, can_register: false }),
+        authenticated: false,
+        user: null,
+      }));
+      await invalidateAuth();
     }
-  }, [checkAuth]);
+  }, [queryClient, invalidateAuth]);
+
+  const checkAuth = useCallback(async () => {
+    await authQuery.refetch();
+  }, [authQuery]);
 
-  const value: AuthContextType = {
+  const value: AuthContextType = useMemo(() => ({
     user,
-    isAuthenticated: user !== null,
+    isAuthenticated,
     isLoading,
     authMode,
     canRegister,
@@ -203,8 +241,9 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     login,
     register,
     logout,
-    checkAuth
-  };
+    checkAuth,
+  }), [user, isAuthenticated, isLoading, authMode, canRegister, error,
+       login, register, logout, checkAuth]);
 
   return (
     <AuthContext.Provider value={value}>