@agent-relay/dashboard 2.0.92 → 2.0.93

package/src/providers/RelayConfigProvider.test.tsx

@@ -0,0 +1,299 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import React from 'react';
+import { act, cleanup, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+type MockRelayProviderProps = {
+  apiKey: string;
+  agentToken: string;
+  wsToken?: string;
+  baseUrl?: string;
+  channels?: string[];
+  children?: React.ReactNode;
+};
+
+const relayProviderCalls: MockRelayProviderProps[] = [];
+
+vi.mock('@relaycast/react', () => ({
+  RelayProvider: ({ children, ...props }: MockRelayProviderProps) => {
+    relayProviderCalls.push(props);
+    return <>{children}</>;
+  },
+}));
+
+import { RelayConfigProvider } from './RelayConfigProvider';
+
+interface RelayConfigPayload {
+  success: boolean;
+  baseUrl: string;
+  apiKey: string;
+  agentToken: string;
+  agentName: string;
+  channels: string[];
+  wsToken?: string;
+}
+
+interface QueuedFetchResponse {
+  url: string;
+  status?: number;
+  payload?: unknown;
+}
+
+function makeConfig(agentToken: string, overrides: Partial<RelayConfigPayload> = {}): RelayConfigPayload {
+  return {
+    success: true,
+    baseUrl: 'https://api.relaycast.dev',
+    apiKey: 'rk_test',
+    agentToken,
+    agentName: 'relay-dashboard',
+    channels: ['general'],
+    ...overrides,
+  };
+}
+
+async function flushPromises(): Promise<void> {
+  await act(async () => {
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+}
+
+class MockBroadcastChannel {
+  static channels = new Map<string, Set<MockBroadcastChannel>>();
+
+  name: string;
+  onmessage: ((event: MessageEvent) => void) | null = null;
+
+  constructor(name: string) {
+    this.name = name;
+    const peers = MockBroadcastChannel.channels.get(name) ?? new Set<MockBroadcastChannel>();
+    peers.add(this);
+    MockBroadcastChannel.channels.set(name, peers);
+  }
+
+  postMessage(data: unknown): void {
+    const peers = MockBroadcastChannel.channels.get(this.name);
+    if (!peers) return;
+
+    for (const peer of peers) {
+      if (peer === this) continue;
+      peer.onmessage?.({ data } as MessageEvent);
+    }
+  }
+
+  close(): void {
+    const peers = MockBroadcastChannel.channels.get(this.name);
+    peers?.delete(this);
+    if (peers && peers.size === 0) {
+      MockBroadcastChannel.channels.delete(this.name);
+    }
+  }
+}
+
+describe('RelayConfigProvider', () => {
+  beforeEach(() => {
+    relayProviderCalls.length = 0;
+    MockBroadcastChannel.channels.clear();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+  });
+
+  it('passes the stable wsToken to RelayProvider', async () => {
+    const fetchMock = vi.fn(async (input: RequestInfo | URL) => ({
+      status: 200,
+      ok: true,
+      json: async () => {
+        expect(String(input)).toBe('/api/relay-config');
+        return makeConfig('agt_old', { wsToken: 'rk_ws' });
+      },
+    }));
+
+    vi.stubGlobal('fetch', fetchMock);
+
+    render(
+      <RelayConfigProvider>
+        <div>dashboard</div>
+      </RelayConfigProvider>,
+    );
+
+    await flushPromises();
+
+    expect(relayProviderCalls.at(-1)).toMatchObject({
+      apiKey: 'rk_test',
+      agentToken: 'agt_old',
+      wsToken: 'rk_ws',
+    });
+  });
+
+  it('refreshes a stale agent token on Relaycast 401 and retries once with the new token', async () => {
+    const queuedResponses: QueuedFetchResponse[] = [
+      {
+        url: '/api/relay-config',
+        payload: makeConfig('agt_old', { wsToken: 'rk_test' }),
+      },
+      {
+        url: 'https://api.relaycast.dev/v1/channels',
+        status: 401,
+        payload: { ok: false, error: { code: 'unauthorized', message: 'stale token' } },
+      },
+      {
+        url: '/api/relay-config?refresh=true',
+        payload: makeConfig('agt_new', { wsToken: 'rk_test' }),
+      },
+      {
+        url: 'https://api.relaycast.dev/v1/channels',
+        payload: { ok: true, data: [] },
+      },
+    ];
+
+    const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+      const next = queuedResponses.shift();
+      if (!next) {
+        throw new Error(`Unexpected fetch: ${String(input)}`);
+      }
+
+      expect(String(input)).toBe(next.url);
+      if (next.url === 'https://api.relaycast.dev/v1/channels') {
+        const headers = new Headers(init?.headers);
+        const authHeader = headers.get('Authorization');
+        if (next.status === 401) {
+          expect(authHeader).toBe('Bearer agt_old');
+        } else {
+          expect(authHeader).toBe('Bearer agt_new');
+        }
+      }
+
+      const status = next.status ?? 200;
+      return {
+        status,
+        ok: status >= 200 && status < 300,
+        json: async () => next.payload,
+      };
+    });
+
+    vi.stubGlobal('fetch', fetchMock);
+
+    render(
+      <RelayConfigProvider>
+        <div>dashboard</div>
+      </RelayConfigProvider>,
+    );
+
+    await flushPromises();
+
+    let response: Response;
+    await act(async () => {
+      response = await globalThis.fetch('https://api.relaycast.dev/v1/channels', {
+        headers: {
+          Authorization: 'Bearer agt_old',
+        },
+      });
+      await Promise.resolve();
+    });
+    await flushPromises();
+
+    expect(response!.status).toBe(200);
+    expect(relayProviderCalls.at(-1)).toMatchObject({
+      agentToken: 'agt_new',
+      wsToken: 'rk_test',
+    });
+    expect(fetchMock.mock.calls.map(([url]) => String(url))).toEqual([
+      '/api/relay-config',
+      'https://api.relaycast.dev/v1/channels',
+      '/api/relay-config?refresh=true',
+      'https://api.relaycast.dev/v1/channels',
+    ]);
+  });
+
+  it('retries with the current broadcasted token before forcing another refresh', async () => {
+    const queuedResponses: QueuedFetchResponse[] = [
+      {
+        url: '/api/relay-config',
+        payload: makeConfig('agt_old', { wsToken: 'rk_test' }),
+      },
+      {
+        url: 'https://api.relaycast.dev/v1/channels',
+        status: 401,
+        payload: { ok: false, error: { code: 'unauthorized', message: 'stale token' } },
+      },
+      {
+        url: 'https://api.relaycast.dev/v1/channels',
+        payload: { ok: true, data: [] },
+      },
+    ];
+
+    const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+      const next = queuedResponses.shift();
+      if (!next) {
+        throw new Error(`Unexpected fetch: ${String(input)}`);
+      }
+
+      expect(String(input)).toBe(next.url);
+      if (next.url === 'https://api.relaycast.dev/v1/channels') {
+        const headers = new Headers(init?.headers);
+        const authHeader = headers.get('Authorization');
+        if (next.status === 401) {
+          expect(authHeader).toBe('Bearer agt_old');
+        } else {
+          expect(authHeader).toBe('Bearer agt_new');
+        }
+      }
+
+      const status = next.status ?? 200;
+      return {
+        status,
+        ok: status >= 200 && status < 300,
+        json: async () => next.payload,
+      };
+    });
+
+    vi.stubGlobal('fetch', fetchMock);
+    vi.stubGlobal('BroadcastChannel', MockBroadcastChannel);
+
+    render(
+      <RelayConfigProvider>
+        <div>dashboard</div>
+      </RelayConfigProvider>,
+    );
+
+    await flushPromises();
+
+    const peer = new MockBroadcastChannel('relay-dashboard:relay-config');
+    await act(async () => {
+      peer.postMessage({
+        type: 'relay-config-refreshed',
+        config: makeConfig('agt_new', { wsToken: 'rk_test' }),
+      });
+      await Promise.resolve();
+    });
+
+    let response: Response;
+    await act(async () => {
+      response = await globalThis.fetch('https://api.relaycast.dev/v1/channels', {
+        headers: {
+          Authorization: 'Bearer agt_old',
+        },
+      });
+      await Promise.resolve();
+    });
+    await flushPromises();
+
+    expect(response!.status).toBe(200);
+    expect(relayProviderCalls.at(-1)).toMatchObject({
+      agentToken: 'agt_new',
+      wsToken: 'rk_test',
+    });
+    expect(fetchMock.mock.calls.map(([url]) => String(url))).toEqual([
+      '/api/relay-config',
+      'https://api.relaycast.dev/v1/channels',
+      'https://api.relaycast.dev/v1/channels',
+    ]);
+    peer.close();
+  });
+});

package/src/providers/RelayConfigProvider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { RelayProvider } from '@relaycast/react';
 
 interface RelayConfigResponse {
@@ -10,6 +10,8 @@ interface RelayConfigResponse {
   agentToken?: string;
   agentName?: string | null;
   channels?: string[];
+  /** Workspace API key for WebSocket auth (stable across agent token rotation). */
+  wsToken?: string;
 }
 
 export interface RelayConfigProviderProps {
@@ -34,37 +36,214 @@ export function useRelayConfigStatus(): RelayConfigStatus {
 
 /** Default channels the dashboard agent should subscribe to via WebSocket */
 const DEFAULT_CHANNELS = ['general'];
+const RELAY_CONFIG_CHANNEL = 'relay-dashboard:relay-config';
+
+interface RelayConfigBroadcastMessage {
+  type: 'relay-config-refreshed';
+  config: RelayConfigResponse;
+}
+
+async function fetchRelayConfig(refresh = false): Promise<RelayConfigResponse | null> {
+  const url = refresh ? '/api/relay-config?refresh=true' : '/api/relay-config';
+  const response = await fetch(url, { credentials: 'include' });
+  if (!response.ok) return null;
+  const payload = await response.json() as RelayConfigResponse;
+  if (!hasUsableRelayConfig(payload)) return null;
+  return payload;
+}
+
+function hasUsableRelayConfig(payload: RelayConfigResponse | null | undefined): payload is RelayConfigResponse {
+  return Boolean(payload?.success && payload.baseUrl && payload.apiKey && payload.agentToken);
+}
+
+function sameRelayConfig(current: RelayConfigResponse | null, next: RelayConfigResponse): boolean {
+  if (!current) return false;
+
+  const currentChannels = current.channels ?? [];
+  const nextChannels = next.channels ?? [];
+  if (currentChannels.length !== nextChannels.length) return false;
+  if (currentChannels.some((channel, index) => channel !== nextChannels[index])) return false;
+
+  return current.baseUrl === next.baseUrl
+    && current.apiKey === next.apiKey
+    && current.agentToken === next.agentToken
+    && current.wsToken === next.wsToken
+    && current.agentName === next.agentName;
+}
+
+function isRelaycastUrl(url: string, baseUrl: string): boolean {
+  return url.startsWith(`${baseUrl.replace(/\/+$/, '')}/`);
+}
+
+function extractRequestUrl(input: RequestInfo | URL): string {
+  if (typeof input === 'string') return input;
+  if (input instanceof URL) return input.toString();
+  return input.url;
+}
+
+function buildHeaders(input: RequestInfo | URL, init?: RequestInit): Headers {
+  const headers = new Headers(input instanceof Request ? input.headers : undefined);
+  if (init?.headers) {
+    new Headers(init.headers).forEach((value, key) => {
+      headers.set(key, value);
+    });
+  }
+  return headers;
+}
+
+function getBearerToken(headers: Headers): string | null {
+  const authorization = headers.get('Authorization');
+  if (!authorization?.startsWith('Bearer ')) return null;
+  return authorization.slice(7);
+}
+
+function withBearerToken(init: RequestInit | undefined, token: string): RequestInit {
+  const headers = new Headers(init?.headers);
+  headers.set('Authorization', `Bearer ${token}`);
+  return {
+    ...init,
+    headers,
+  };
+}
 
 export function RelayConfigProvider({ children }: RelayConfigProviderProps) {
   const [config, setConfig] = useState<RelayConfigResponse | null>(null);
   const [loaded, setLoaded] = useState(false);
+  const broadcastChannelRef = useRef<BroadcastChannel | null>(null);
+  const configRef = useRef<RelayConfigResponse | null>(null);
+  const refreshPromiseRef = useRef<Promise<RelayConfigResponse | null> | null>(null);
+
+  const applyRelayConfig = useCallback((nextConfig: RelayConfigResponse, options?: { broadcast?: boolean }) => {
+    if (!hasUsableRelayConfig(nextConfig)) return;
+
+    configRef.current = nextConfig;
+    setConfig((current) => (sameRelayConfig(current, nextConfig) ? current : nextConfig));
+    setLoaded(true);
+
+    if (options?.broadcast) {
+      try {
+        const message: RelayConfigBroadcastMessage = {
+          type: 'relay-config-refreshed',
+          config: nextConfig,
+        };
+        broadcastChannelRef.current?.postMessage(message);
+      } catch {
+        // BroadcastChannel is best-effort only.
+      }
+    }
+  }, []);
+
+  const refreshAgentToken = useCallback(async (): Promise<RelayConfigResponse | null> => {
+    if (refreshPromiseRef.current) return refreshPromiseRef.current;
+
+    const promise = fetchRelayConfig(true)
+      .then((payload) => {
+        if (payload) {
+          applyRelayConfig(payload, { broadcast: true });
+        }
+        return payload;
+      })
+      .catch(() => null)
+      .finally(() => {
+        if (refreshPromiseRef.current === promise) {
+          refreshPromiseRef.current = null;
+        }
+      });
+
+    refreshPromiseRef.current = promise;
+    return promise;
+  }, [applyRelayConfig]);
+
+  useEffect(() => {
+    if (typeof BroadcastChannel !== 'function') return;
+
+    const channel = new BroadcastChannel(RELAY_CONFIG_CHANNEL);
+    broadcastChannelRef.current = channel;
+    channel.onmessage = (event: MessageEvent<RelayConfigBroadcastMessage>) => {
+      if (event.data?.type !== 'relay-config-refreshed') return;
+      applyRelayConfig(event.data.config);
+    };
+
+    return () => {
+      if (broadcastChannelRef.current === channel) {
+        broadcastChannelRef.current = null;
+      }
+      channel.close();
+    };
+  }, [applyRelayConfig]);
 
   useEffect(() => {
     let cancelled = false;
 
-    void fetch('/api/relay-config', { credentials: 'include' })
-      .then(async (response) => {
-        if (!response.ok) return null;
-        return response.json() as Promise<RelayConfigResponse>;
-      })
+    void fetchRelayConfig()
       .then((payload) => {
-        if (cancelled || !payload?.success) return;
-        if (!payload.baseUrl || !payload.apiKey || !payload.agentToken) return;
-        setConfig(payload);
-      })
-      .catch(() => {
-        // No relay-config is a valid local fallback.
+        if (cancelled) return;
+        if (payload) applyRelayConfig(payload);
       })
+      .catch(() => {})
       .finally(() => {
-        if (!cancelled) {
-          setLoaded(true);
-        }
+        if (!cancelled) setLoaded(true);
       });
 
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [applyRelayConfig]);
+
+  useEffect(() => {
+    configRef.current = config;
+  }, [config]);
+
+  useEffect(() => {
+    if (typeof globalThis.fetch !== 'function') return;
+
+    const originalFetch = globalThis.fetch.bind(globalThis);
+    const interceptedFetch: typeof globalThis.fetch = async (input, init) => {
+      const response = await originalFetch(input, init);
+      if (response.status !== 401 && response.status !== 403) {
+        return response;
+      }
+
+      const currentConfig = configRef.current;
+      if (!hasUsableRelayConfig(currentConfig)) {
+        return response;
+      }
+
+      const url = extractRequestUrl(input);
+      if (!isRelaycastUrl(url, currentConfig.baseUrl!)) {
+        return response;
+      }
+
+      const headers = buildHeaders(input, init);
+      const requestToken = getBearerToken(headers);
+      if (!requestToken || requestToken === currentConfig.apiKey) {
+        return response;
+      }
+
+      const retryWithToken = async (token: string): Promise<Response> => {
+        return originalFetch(url, withBearerToken(init, token));
+      };
+
+      if (requestToken !== currentConfig.agentToken) {
+        return retryWithToken(currentConfig.agentToken!);
+      }
+
+      const refreshed = await refreshAgentToken();
+      if (!hasUsableRelayConfig(refreshed) || refreshed.agentToken === requestToken) {
+        return response;
+      }
+
+      return retryWithToken(refreshed.agentToken!);
+    };
+
+    globalThis.fetch = interceptedFetch;
+
+    return () => {
+      if (globalThis.fetch === interceptedFetch) {
+        globalThis.fetch = originalFetch;
+      }
+    };
+  }, [refreshAgentToken]);
 
   const configured = Boolean(config?.baseUrl && config.apiKey && config.agentToken);
   const providerConfig = useMemo(() => {
@@ -73,6 +252,7 @@ export function RelayConfigProvider({ children }: RelayConfigProviderProps) {
         baseUrl: config!.baseUrl!,
         apiKey: config!.apiKey!,
         agentToken: config!.agentToken!,
+        wsToken: config!.wsToken ?? config!.apiKey!,
       };
     }
 
@@ -80,6 +260,7 @@ export function RelayConfigProvider({ children }: RelayConfigProviderProps) {
       baseUrl: typeof window !== 'undefined' ? window.location.origin : 'http://127.0.0.1',
       apiKey: '__relay_disabled__',
       agentToken: '__relay_disabled__',
+      wsToken: '__relay_disabled__',
     };
   }, [configured, config]);
 
@@ -99,6 +280,7 @@ export function RelayConfigProvider({ children }: RelayConfigProviderProps) {
         baseUrl={providerConfig.baseUrl}
         apiKey={providerConfig.apiKey}
         agentToken={providerConfig.agentToken}
+        wsToken={providerConfig.wsToken}
         channels={channels}
       >
         {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}