machinaos 0.0.76 → 0.0.78

package/client/src/contexts/__tests__/AuthContext.test.tsx

@@ -0,0 +1,221 @@
+/**
+ * Tests for the TanStack-Query-backed AuthContext.
+ *
+ * Locks in the contracts that drive perceived launch time + the
+ * disconnect-reconnect bug-fix:
+ *
+ *   1. Anonymous-mode happy path: backend reports `auth_enabled: false`
+ *      → user is auto-set to the anonymous owner without further work.
+ *   2. Retry-then-recover: 503 fails N times then 200 succeeds → user
+ *      is set, no LoginPage flash.
+ *   3. 401 fast-fail: backend returns 401 → query reports error
+ *      immediately, NO retry budget burned (would otherwise wait 10s).
+ *   4. Logout invalidates the cache: after logout the cached data shows
+ *      `authenticated: false` so the WebSocketContext logout effect
+ *      fires deterministically.
+ *
+ * Backoff is verified at the unit level (the AUTH_RETRY constant is
+ * used by `lib/connectionConfig.ts`); the E2E backoff curve is covered
+ * by the manual flake-test plan in docs-internal/release_build_pipeline.md.
+ */
+
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, waitFor, act } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AuthProvider, useAuth, AUTH_STATUS_QUERY_KEY } from '../AuthContext';
+
+// Mock the API config so the fetch URL is predictable in test logs.
+vi.mock('../../config/api', () => ({
+  API_CONFIG: { PYTHON_BASE_URL: 'http://test' },
+}));
+
+// Each test gets a fresh QueryClient with retries disabled by default;
+// individual tests opt back into retries to exercise the retry path.
+function makeQueryClient(opts?: { retry?: number }): QueryClient {
+  return new QueryClient({
+    defaultOptions: {
+      queries: { retry: opts?.retry ?? 0, retryDelay: 0 },
+      mutations: { retry: 0 },
+    },
+  });
+}
+
+function Wrapper({
+  children,
+  client,
+}: {
+  children: React.ReactNode;
+  client: QueryClient;
+}) {
+  return (
+    <QueryClientProvider client={client}>
+      <AuthProvider>{children}</AuthProvider>
+    </QueryClientProvider>
+  );
+}
+
+// Captures the `useAuth()` value across renders so tests can assert on
+// state transitions without remembering to await effects manually.
+function makeProbe() {
+  const states: ReturnType<typeof useAuth>[] = [];
+  function Probe() {
+    states.push(useAuth());
+    return null;
+  }
+  return { states, Probe };
+}
+
+beforeEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('AuthContext (TanStack Query)', () => {
+  it('sets the anonymous user when backend reports auth_enabled: false', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      new Response(
+        JSON.stringify({
+          auth_enabled: false,
+          auth_mode: 'single',
+          authenticated: false,
+          user: null,
+          can_register: false,
+        }),
+        { status: 200, headers: { 'Content-Type': 'application/json' } },
+      ),
+    );
+
+    const client = makeQueryClient();
+    const { states, Probe } = makeProbe();
+    render(
+      <Wrapper client={client}>
+        <Probe />
+      </Wrapper>,
+    );
+
+    await waitFor(() => {
+      const last = states[states.length - 1];
+      expect(last.isLoading).toBe(false);
+      expect(last.isAuthenticated).toBe(true);
+      expect(last.user?.email).toBe('anonymous');
+    });
+  });
+
+  it('retries on 503 and surfaces the user on the 200', async () => {
+    let attempt = 0;
+    vi.spyOn(globalThis, 'fetch').mockImplementation(async () => {
+      attempt += 1;
+      if (attempt < 3) {
+        return new Response('upstream not ready', { status: 503 });
+      }
+      return new Response(
+        JSON.stringify({
+          auth_enabled: true,
+          auth_mode: 'single',
+          authenticated: true,
+          user: { id: 1, email: 'a@b', display_name: 'A', is_owner: true },
+          can_register: false,
+        }),
+        { status: 200, headers: { 'Content-Type': 'application/json' } },
+      );
+    });
+
+    // Allow up to 3 retries here so the third attempt resolves the 200.
+    const client = makeQueryClient({ retry: 3 });
+    const { states, Probe } = makeProbe();
+    render(
+      <Wrapper client={client}>
+        <Probe />
+      </Wrapper>,
+    );
+
+    await waitFor(() => {
+      const last = states[states.length - 1];
+      expect(last.isAuthenticated).toBe(true);
+      expect(last.user?.email).toBe('a@b');
+    });
+    expect(attempt).toBeGreaterThanOrEqual(3);
+  });
+
+  it('does not retry a 401 — surfaces "not authenticated" immediately', async () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      new Response(JSON.stringify({ detail: 'unauthorized' }), { status: 401 }),
+    );
+
+    // Even with a generous retry budget the AuthContext's `retry`
+    // predicate refuses 401/403 — `fetchSpy` should be called exactly
+    // ONCE.
+    const client = makeQueryClient({ retry: 5 });
+    const { states, Probe } = makeProbe();
+    render(
+      <Wrapper client={client}>
+        <Probe />
+      </Wrapper>,
+    );
+
+    await waitFor(() => {
+      const last = states[states.length - 1];
+      expect(last.isLoading).toBe(false);
+      expect(last.isAuthenticated).toBe(false);
+      expect(last.error).not.toBeNull();
+    });
+    expect(fetchSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('logout invalidates the auth-status cache and flips authenticated → false', async () => {
+    // Initial auth-enabled, logged-in user.
+    vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
+      const url = typeof input === 'string' ? input : (input as Request).url;
+      if (url.endsWith('/logout')) {
+        return new Response('', { status: 200 });
+      }
+      // /status — return a logged-in user the first call, an
+      // unauthenticated response on every subsequent call (after logout
+      // invalidates the cache and refetches).
+      return new Response(
+        JSON.stringify({
+          auth_enabled: true,
+          auth_mode: 'single',
+          authenticated: false,
+          user: null,
+          can_register: false,
+        }),
+        { status: 200, headers: { 'Content-Type': 'application/json' } },
+      );
+    });
+
+    const client = makeQueryClient();
+    // Seed the cache with an authenticated user so we can observe the
+    // transition triggered by `logout()`. This mirrors the real flow:
+    // on first mount the query resolves authenticated, then later
+    // logout flips it.
+    client.setQueryData([...AUTH_STATUS_QUERY_KEY], {
+      auth_enabled: true,
+      auth_mode: 'single',
+      authenticated: true,
+      user: { id: 1, email: 'a@b', display_name: 'A', is_owner: true },
+      can_register: false,
+    });
+
+    const { states, Probe } = makeProbe();
+    render(
+      <Wrapper client={client}>
+        <Probe />
+      </Wrapper>,
+    );
+
+    await waitFor(() => {
+      expect(states[states.length - 1].isAuthenticated).toBe(true);
+    });
+
+    await act(async () => {
+      await states[states.length - 1].logout();
+    });
+
+    await waitFor(() => {
+      const last = states[states.length - 1];
+      expect(last.isAuthenticated).toBe(false);
+      expect(last.user).toBeNull();
+    });
+  });
+});

package/client/src/hooks/__tests__/useDragVariable.test.ts

@@ -18,8 +18,14 @@ const storeState: { currentWorkflow: any } = {
   currentWorkflow: null,
 };
 
+// `useAppStore` is consumed via the documented Zustand slice-selector
+// pattern: `useAppStore((s) => s.currentWorkflow)`. The mock has to
+// thread the selector through so it returns the right slice — calling
+// `useAppStore()` without a selector inside the hook would have given us
+// the whole store object and `currentWorkflow.nodes` would be undefined.
 vi.mock('../../store/useAppStore', () => ({
-  useAppStore: () => storeState,
+  useAppStore: <T,>(selector?: (state: typeof storeState) => T): T | typeof storeState =>
+    selector ? selector(storeState) : storeState,
 }));
 
 // nodeDefinitions/ was deleted in commit fc10fd3 — the hook now

package/client/src/hooks/__tests__/useWorkflowOpsListener.test.ts

@@ -0,0 +1,142 @@
+/**
+ * Tests for useWorkflowOpsListener.
+ *
+ * Locks the runtime broadcast contract:
+ *   - subscribes to `workflow_ops_apply` via the WS context
+ *     addEventListener API
+ *   - applies events scoped to the current workflow via applyOperations
+ *   - other-workflow events trigger a sonner toast (no canvas mutation)
+ *   - unsubscribes on unmount
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import type { Node, Edge } from 'reactflow';
+
+import { useWorkflowOpsListener } from '../useWorkflowOpsListener';
+
+// --- mocks (must come before importing modules that read them) ----------
+
+const wsMock = {
+  addEventListener: vi.fn<(type: string, handler: (data: any) => void) => () => void>(),
+  saveNodeParameters: vi.fn().mockResolvedValue(true),
+};
+
+const storeMock = {
+  currentWorkflowId: 'wf-current',
+  loadWorkflow: vi.fn(),
+};
+
+vi.mock('../../contexts/WebSocketContext', () => ({
+  useWebSocket: () => wsMock,
+}));
+
+vi.mock('../../store/useAppStore', () => ({
+  useAppStore: (selector: any) => selector({
+    currentWorkflow: { id: storeMock.currentWorkflowId },
+    loadWorkflow: storeMock.loadWorkflow,
+  }),
+}));
+
+const applyOpsMock = vi.fn().mockResolvedValue({ applied: 0, errors: [], refMap: {} });
+vi.mock('../../lib/workflowOps', () => ({
+  applyOperations: (...args: any[]) => applyOpsMock(...args),
+}));
+
+const toastMessageMock = vi.fn();
+vi.mock('sonner', () => ({
+  toast: { message: (...args: any[]) => toastMessageMock(...args) },
+}));
+
+// --- test scaffolding ---------------------------------------------------
+
+function _ctx(overrides: Partial<{ nodes: Node[]; edges: Edge[] }> = {}) {
+  return {
+    nodes: overrides.nodes ?? [],
+    edges: overrides.edges ?? [],
+    setNodes: vi.fn(),
+    setEdges: vi.fn(),
+  };
+}
+
+let registeredHandler: ((data: any) => void) | null = null;
+let unsubscribeMock = vi.fn();
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  registeredHandler = null;
+  unsubscribeMock = vi.fn();
+  wsMock.addEventListener.mockImplementation((type, handler) => {
+    if (type === 'workflow_ops_apply') registeredHandler = handler;
+    return unsubscribeMock;
+  });
+  storeMock.currentWorkflowId = 'wf-current';
+});
+
+// ---------------------------------------------------------------------------
+
+describe('useWorkflowOpsListener', () => {
+  it('subscribes to workflow_ops_apply on mount', () => {
+    renderHook(() => useWorkflowOpsListener(_ctx()));
+    expect(wsMock.addEventListener).toHaveBeenCalledWith(
+      'workflow_ops_apply',
+      expect.any(Function),
+    );
+  });
+
+  it('unsubscribes on unmount', () => {
+    const { unmount } = renderHook(() => useWorkflowOpsListener(_ctx()));
+    expect(unsubscribeMock).not.toHaveBeenCalled();
+    unmount();
+    expect(unsubscribeMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies operations scoped to the current workflow', async () => {
+    renderHook(() => useWorkflowOpsListener(_ctx()));
+    expect(registeredHandler).not.toBeNull();
+
+    const ops = [{ type: 'add_node', client_ref: 'n', node_type: 'x', parameters: {} }];
+    await act(async () => {
+      registeredHandler!({
+        workflow_id: 'wf-current',
+        caller_node_id: 'agent-1',
+        operations: ops,
+      });
+    });
+
+    expect(applyOpsMock).toHaveBeenCalledTimes(1);
+    expect(applyOpsMock.mock.calls[0][0]).toEqual(ops);
+    expect(toastMessageMock).not.toHaveBeenCalled();
+  });
+
+  it('toasts (not applies) when event targets a different workflow', () => {
+    renderHook(() => useWorkflowOpsListener(_ctx()));
+    expect(registeredHandler).not.toBeNull();
+
+    act(() => {
+      registeredHandler!({
+        workflow_id: 'wf-other',
+        caller_node_id: 'agent-1',
+        operations: [{ type: 'add_node', client_ref: 'n', node_type: 'x', parameters: {} }],
+      });
+    });
+
+    expect(applyOpsMock).not.toHaveBeenCalled();
+    expect(toastMessageMock).toHaveBeenCalledTimes(1);
+    const [title, opts] = toastMessageMock.mock.calls[0];
+    expect(title).toMatch(/workflow created/i);
+    expect(opts.action.label).toBe('Switch');
+    // Switch handler triggers loadWorkflow with the foreign id.
+    opts.action.onClick();
+    expect(storeMock.loadWorkflow).toHaveBeenCalledWith('wf-other');
+  });
+
+  it('ignores empty-ops events that target the current workflow', async () => {
+    renderHook(() => useWorkflowOpsListener(_ctx()));
+    await act(async () => {
+      registeredHandler!({ workflow_id: 'wf-current', operations: [] });
+    });
+    expect(applyOpsMock).not.toHaveBeenCalled();
+    expect(toastMessageMock).not.toHaveBeenCalled();
+  });
+});

package/client/src/hooks/useAppTheme.ts

@@ -1,17 +1,219 @@
+/**
+ * useAppTheme — canvas + map theme accessor.
+ *
+ * Returns a flat colour pack with the same shape the canvas + map +
+ * grandfathered-modal call sites expect (`theme.colors.X`,
+ * `theme.isDarkMode`). Under light/dark this is identity-pass; under
+ * Renaissance / Greek / Edo / Steampunk / Atomic / Cyber / Wasteland
+ * / Rot / Plague / Surveillance the base pack (light or dark, picked
+ * by `DARK_FAMILY`) gets a small overlay of theme-specific accents
+ * (primary, edges, action colours) so canvas selection rings, edge
+ * strokes, and action button colours match the theme's identity.
+ *
+ * This is the production realisation of MIGRATION_PLAYBOOK Wave 1 —
+ * the upstream playbook proposes a full per-theme NodePack record;
+ * the overlay form here is the same idea expressed without forking
+ * the existing 50-key Colors shape, so the existing 14+ call sites
+ * keep compiling and the visual delta lives in one place.
+ *
+ * Adding a new theme override: drop an entry in `THEME_OVERRIDES`
+ * with whichever subset of `Colors` keys you want to override. Empty
+ * overrides are a no-op (theme falls back to pure light/dark).
+ */
+
 import { useMemo } from 'react';
-import { useTheme } from '../contexts/ThemeContext';
+import { useTheme, type ThemeName } from '../contexts/ThemeContext';
 import { theme as baseTheme, lightColors, darkColors } from '../styles/theme';
 
+type Colors = typeof lightColors;
+/** Loose form for override entries — `lightColors` is `as const`, which
+ *  narrows each value to a literal hex string. Themes need to substitute
+ *  arbitrary hex / rgba strings, so the override map widens to `string`. */
+type ColorOverride = Partial<Record<keyof Colors, string>>;
+
+/** Themes whose canvas + chrome read as dark backgrounds. Mirrors the
+ *  DARK_FAMILY in ThemeContext so the two stay in lockstep. */
+const DARK_BASE_THEMES: ReadonlySet<ThemeName> = new Set([
+  'dark', 'cyber', 'wasteland', 'rot', 'surveillance', 'steampunk',
+]);
+
+/** Theme-specific overlays. Each entry is a partial Colors object —
+ *  whatever keys appear here override the chosen base pack. Missing
+ *  keys fall through to lightColors / darkColors. Hex values come
+ *  from the matching client/src/themes/<theme>.css token block. */
+const THEME_OVERRIDES: Partial<Record<ThemeName, ColorOverride>> = {
+  renaissance: {
+    primary: '#b8893c',          // gold accent
+    focus: '#d4a030',
+    focusRing: 'rgba(212, 160, 48, 0.35)',
+    actionRun: '#4a6818',         // olive (success)
+    actionDeploy: '#b8893c',      // gold
+    actionStop: '#8a1410',        // crimson
+    actionSave: '#d4a030',        // gold leaf
+    edgeDefault: '#5a3a14',       // ink brown
+    edgeSelected: '#d4a030',      // gold
+    edgeCompleted: '#4a6818',
+    edgeError: '#8a1410',
+    edgeMemoryActive: '#b8893c',
+    edgeToolActive: '#c08020',
+  },
+
+  greek: {
+    primary: '#284b82',           // lapis
+    focus: '#284b82',
+    focusRing: 'rgba(40, 75, 130, 0.3)',
+    actionRun: '#6a7a32',         // olive
+    actionDeploy: '#284b82',      // lapis
+    actionStop: '#7a1a18',        // oxblood
+    actionSave: '#c8a040',        // gold
+    edgeDefault: '#4a3818',       // dark stone
+    edgeSelected: '#284b82',
+    edgeCompleted: '#6a7a32',
+    edgeError: '#7a1a18',
+    edgeMemoryActive: '#284b82',
+    edgeToolActive: '#c8a040',
+  },
+
+  edo: {
+    primary: '#b41e1e',           // vermillion
+    focus: '#b41e1e',
+    focusRing: 'rgba(180, 30, 30, 0.3)',
+    actionRun: '#4a6a3a',         // bamboo
+    actionDeploy: '#b41e1e',
+    actionStop: '#b41e1e',
+    actionSave: '#1a1410',        // sumi
+    edgeDefault: '#1a1410',
+    edgeSelected: '#b41e1e',
+    edgeCompleted: '#4a6a3a',
+    edgeError: '#b41e1e',
+    edgeMemoryActive: '#b41e1e',
+    edgeToolActive: '#c89832',
+  },
+
+  steampunk: {
+    primary: '#d8a848',           // brass
+    focus: '#d8a848',
+    focusRing: 'rgba(216, 168, 72, 0.4)',
+    actionRun: '#6a8a3a',
+    actionDeploy: '#d8a848',
+    actionStop: '#8a3a1a',         // rust
+    actionSave: '#b8602a',         // copper
+    edgeDefault: '#b88838',
+    edgeSelected: '#d8a848',
+    edgeCompleted: '#6a8a3a',
+    edgeError: '#8a3a1a',
+    edgeMemoryActive: '#b8602a',
+    edgeToolActive: '#d8a848',
+  },
+
+  atomic: {
+    primary: '#e85a26',           // atomic orange
+    focus: '#e85a26',
+    focusRing: 'rgba(232, 90, 38, 0.4)',
+    actionRun: '#5a8a5a',
+    actionDeploy: '#e85a26',
+    actionStop: '#e85a26',
+    actionSave: '#3a9aa0',         // turquoise
+    edgeDefault: '#2a3a4a',        // slate
+    edgeSelected: '#e85a26',
+    edgeCompleted: '#5a8a5a',
+    edgeError: '#e85a26',
+    edgeMemoryActive: '#3a9aa0',
+    edgeToolActive: '#d8a838',     // mustard
+  },
+
+  cyber: {
+    primary: '#f51eb6',            // neon magenta
+    focus: '#1dd9e5',              // neon cyan
+    focusRing: 'rgba(245, 30, 182, 0.5)',
+    actionRun: '#26d97a',          // neon green
+    actionDeploy: '#f51eb6',
+    actionStop: '#ff2050',
+    actionSave: '#1dd9e5',
+    edgeDefault: '#f51eb6',
+    edgeSelected: '#1dd9e5',
+    edgeCompleted: '#26d97a',
+    edgeError: '#ff2050',
+    edgeMemoryActive: '#f51eb6',
+    edgeToolActive: '#ffd028',     // neon yellow
+  },
+
+  wasteland: {
+    primary: '#e88a28',            // ochre
+    focus: '#e88a28',
+    focusRing: 'rgba(232, 138, 40, 0.45)',
+    actionRun: '#8a9028',
+    actionDeploy: '#e88a28',
+    actionStop: '#b8281a',         // rust red
+    actionSave: '#c8d038',         // radioactive
+    edgeDefault: '#8a3a18',
+    edgeSelected: '#e88a28',
+    edgeCompleted: '#8a9028',
+    edgeError: '#b8281a',
+    edgeMemoryActive: '#e88a28',
+    edgeToolActive: '#c8d038',
+  },
+
+  rot: {
+    primary: '#78c878',            // moss bloom
+    focus: '#78c878',
+    focusRing: 'rgba(120, 200, 120, 0.4)',
+    actionRun: '#78c878',
+    actionDeploy: '#e8a838',       // candleflame
+    actionStop: '#a83838',
+    actionSave: '#e8a838',
+    edgeDefault: '#4a6a4a',
+    edgeSelected: '#78c878',
+    edgeCompleted: '#78c878',
+    edgeError: '#a83838',
+    edgeMemoryActive: '#e8a838',
+    edgeToolActive: '#5898b8',
+  },
+
+  plague: {
+    primary: '#783c28',            // dried blood
+    focus: '#783c28',
+    focusRing: 'rgba(120, 60, 40, 0.4)',
+    actionRun: '#5a7028',
+    actionDeploy: '#783c28',
+    actionStop: '#783c28',
+    actionSave: '#98a838',          // bile
+    edgeDefault: '#2a1c14',
+    edgeSelected: '#783c28',
+    edgeCompleted: '#5a7028',
+    edgeError: '#783c28',
+    edgeMemoryActive: '#98a838',
+    edgeToolActive: '#4a5868',
+  },
+
+  surveillance: {
+    primary: '#e82626',             // REC red
+    focus: '#e82626',
+    focusRing: 'rgba(232, 38, 38, 0.45)',
+    actionRun: '#6acc6a',           // phosphor green
+    actionDeploy: '#e82626',
+    actionStop: '#e82626',
+    actionSave: '#6acc6a',
+    edgeDefault: '#5a5e62',
+    edgeSelected: '#e82626',
+    edgeCompleted: '#6acc6a',
+    edgeError: '#e82626',
+    edgeMemoryActive: '#e82626',
+    edgeToolActive: '#5a8cc8',
+  },
+};
+
 export const useAppTheme = () => {
-  const { isDarkMode } = useTheme();
+  const { theme } = useTheme();
+  const isDarkMode = DARK_BASE_THEMES.has(theme);
 
-  const dynamicTheme = useMemo(() => {
+  return useMemo(() => {
+    const base = isDarkMode ? darkColors : lightColors;
+    const overrides = THEME_OVERRIDES[theme] ?? {};
     return {
       ...baseTheme,
-      colors: isDarkMode ? darkColors : lightColors,
+      colors: { ...base, ...overrides } as Colors,
       isDarkMode,
     };
-  }, [isDarkMode]);
-
-  return dynamicTheme;
+  }, [theme, isDarkMode]);
 };

package/client/src/hooks/useAutoSkillEdges.ts

@@ -27,10 +27,15 @@ import type { Node, Edge, Connection } from 'reactflow';
 import { useWebSocket } from '../contexts/WebSocketContext';
 import { useUserSettingsQuery } from './useUserSettingsQuery';
 import { applyOperations, type WorkflowOperation } from '../lib/workflowOps';
+import { getCachedNodeSpec } from '../lib/nodeSpec';
 
-const MASTER_SKILL_TYPE = 'masterSkill';
 const SKILL_HANDLE = 'input-skill';
 
+const isMasterSkillNode = (nodeType: string | undefined): boolean => {
+  if (!nodeType) return false;
+  return (getCachedNodeSpec(nodeType)?.uiHints as any)?.isMasterSkillEditor === true;
+};
+
 interface UseAutoSkillEdgesProps {
   baseOnConnect: (params: Edge | Connection) => void;
   baseOnEdgesDelete: (deleted: Edge[]) => void;
@@ -73,7 +78,7 @@ export function useAutoSkillEdges({
         e => e.target === targetId && e.targetHandle === SKILL_HANDLE,
       );
       const masterSkillNode = skillEdge && nodes.find(
-        n => n.id === skillEdge.source && n.type === MASTER_SKILL_TYPE,
+        n => n.id === skillEdge.source && isMasterSkillNode(n.type),
       );
       const masterSkillId = masterSkillNode?.id ?? null;
       // node.data only stores the label (see CLAUDE.md "Node Data