vibepulse 0.2.0 → 0.2.1

package/.next/standalone/src/hooks/useHostSources.ts

@@ -0,0 +1,299 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { getHostFilter, saveHostFilter } from '@/lib/hostSourcesStorage';
+import type { BuiltInHostSource, HostFilterValue, RemoteHostConfig } from '@/types';
+import type { PublicNodeRecord } from '@/lib/nodeRegistry';
+
+export type HostSource = BuiltInHostSource | (RemoteHostConfig & { hostKind: 'remote' });
+
+interface UseHostSourcesOptions {
+  runtimeRole?: 'hub' | 'node' | 'unknown';
+}
+
+interface UseHostSourcesResult {
+  sources: HostSource[];
+  enabledSources: HostSource[];
+  remoteHosts: RemoteHostConfig[];
+  activeFilter: HostFilterValue;
+  activeSource: HostSource | null;
+  filteredHostIds: Set<string> | null;
+  setActiveFilter: (filter: HostFilterValue) => void;
+  addRemoteHost: (host: RemoteHostConfig & { token?: string }) => Promise<void>;
+  editRemoteHost: (hostId: string, nextHost: RemoteHostConfig & { token?: string }) => Promise<void>;
+  deleteRemoteHost: (hostId: string) => Promise<void>;
+  toggleRemoteHost: (hostId: string, enabled?: boolean) => Promise<void>;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+const LOCAL_SOURCE: BuiltInHostSource = {
+  hostId: 'local',
+  hostLabel: 'Local',
+  hostKind: 'local',
+};
+
+const HOST_SOURCES_CHANGED_EVENT = 'vibepulse:host-sources-changed';
+
+function toHostSource(host: RemoteHostConfig): HostSource {
+  return {
+    ...host,
+    hostKind: 'remote',
+  };
+}
+
+function normalizeFilter(filter: HostFilterValue, remoteHosts: RemoteHostConfig[]): HostFilterValue {
+  if (filter === 'all' || filter === 'local') {
+    return filter;
+  }
+
+  const matchingHost = remoteHosts.find((host) => host.hostId === filter);
+  if (!matchingHost || !matchingHost.enabled) {
+    return 'all';
+  }
+
+  return matchingHost.hostId;
+}
+
+function broadcastHostSourcesChange(): void {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.dispatchEvent(new Event(HOST_SOURCES_CHANGED_EVENT));
+}
+
+function persistFilter(filter: HostFilterValue): void {
+  saveHostFilter(filter);
+  broadcastHostSourcesChange();
+}
+
+async function fetchNodes(): Promise<RemoteHostConfig[]> {
+  const response = await fetch('/api/nodes');
+  if (!response.ok) {
+    throw new Error('Failed to fetch nodes');
+  }
+  const data = await response.json();
+  return (data.nodes || []).map((node: PublicNodeRecord) => ({
+    hostId: node.nodeId,
+    hostLabel: node.nodeLabel,
+    baseUrl: node.baseUrl,
+    enabled: node.enabled,
+    tokenConfigured: node.tokenConfigured,
+  }));
+}
+
+export function useHostSources(options: UseHostSourcesOptions = {}): UseHostSourcesResult {
+  const runtimeRole = options.runtimeRole ?? 'hub';
+  const runtimeRoleResolved = runtimeRole !== 'unknown';
+  const localOnlyRuntime = runtimeRole !== 'hub';
+  const queryClient = useQueryClient();
+  const [activeFilterState, setActiveFilterState] = useState<HostFilterValue>(() => getHostFilter());
+
+  const { data: remoteHosts = [], isLoading, error } = useQuery<RemoteHostConfig[], Error>({
+    queryKey: ['nodes'],
+    queryFn: fetchNodes,
+    enabled: !localOnlyRuntime,
+  });
+
+  const activeFilter = useMemo<HostFilterValue>(
+    () => normalizeFilter(activeFilterState, remoteHosts),
+    [activeFilterState, remoteHosts]
+  );
+
+  const canPersistNormalizedFilter = runtimeRoleResolved && (localOnlyRuntime || (!isLoading && !error));
+
+  useEffect(() => {
+    const syncPersistedState = () => {
+      setActiveFilterState(getHostFilter());
+    };
+
+    window.addEventListener(HOST_SOURCES_CHANGED_EVENT, syncPersistedState);
+    window.addEventListener('storage', syncPersistedState);
+
+    return () => {
+      window.removeEventListener(HOST_SOURCES_CHANGED_EVENT, syncPersistedState);
+      window.removeEventListener('storage', syncPersistedState);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (activeFilter === activeFilterState) {
+      return;
+    }
+
+    if (!canPersistNormalizedFilter) {
+      return;
+    }
+
+    persistFilter(activeFilter);
+  }, [activeFilter, activeFilterState, canPersistNormalizedFilter]);
+
+  const setActiveFilter = useCallback(
+    (filter: HostFilterValue) => {
+      const normalizedFilter = normalizeFilter(filter, remoteHosts);
+      setActiveFilterState(normalizedFilter);
+      persistFilter(normalizedFilter);
+    },
+    [remoteHosts]
+  );
+
+  const addMutation = useMutation({
+    mutationFn: async (host: RemoteHostConfig & { token?: string }) => {
+      const response = await fetch('/api/nodes', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          nodeLabel: host.hostLabel,
+          baseUrl: host.baseUrl,
+          token: host.token || '',
+          enabled: host.enabled,
+        }),
+      });
+      if (!response.ok) {
+          const err = await response.json();
+          throw new Error(err.error || 'Failed to add node');
+      }
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['nodes'] });
+    },
+  });
+
+  const editMutation = useMutation({
+    mutationFn: async ({ hostId, nextHost }: { hostId: string; nextHost: RemoteHostConfig & { token?: string } }) => {
+      const payload: {
+        nodeId: string;
+        nodeLabel: string;
+        baseUrl: string;
+        enabled: boolean;
+        token?: string;
+      } = {
+        nodeId: hostId,
+        nodeLabel: nextHost.hostLabel,
+        baseUrl: nextHost.baseUrl,
+        enabled: nextHost.enabled,
+      };
+      if (nextHost.token !== undefined) {
+          payload.token = nextHost.token;
+      }
+
+      const response = await fetch(`/api/nodes`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      if (!response.ok) {
+          const err = await response.json();
+          throw new Error(err.error || 'Failed to edit node');
+      }
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['nodes'] });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (hostId: string) => {
+      const response = await fetch(`/api/nodes`, {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nodeId: hostId }),
+      });
+      if (!response.ok) {
+          throw new Error('Failed to delete node');
+      }
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['nodes'] });
+    },
+  });
+
+  const toggleMutation = useMutation({
+    mutationFn: async ({ hostId, enabled }: { hostId: string; enabled: boolean }) => {
+      const response = await fetch(`/api/nodes`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nodeId: hostId, enabled }),
+      });
+      if (!response.ok) {
+          throw new Error('Failed to toggle node');
+      }
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['nodes'] });
+    },
+  });
+
+  const addRemoteHost = useCallback(async (host: RemoteHostConfig & { token?: string }) => {
+      await addMutation.mutateAsync(host);
+  }, [addMutation]);
+
+  const editRemoteHost = useCallback(async (hostId: string, nextHost: RemoteHostConfig & { token?: string }) => {
+      await editMutation.mutateAsync({ hostId, nextHost });
+  }, [editMutation]);
+
+  const deleteRemoteHost = useCallback(async (hostId: string) => {
+      await deleteMutation.mutateAsync(hostId);
+  }, [deleteMutation]);
+
+  const toggleRemoteHost = useCallback(async (hostId: string, enabled?: boolean) => {
+      const host = remoteHosts.find(h => h.hostId === hostId);
+      if (host) {
+          await toggleMutation.mutateAsync({ hostId, enabled: enabled ?? !host.enabled });
+      }
+  }, [toggleMutation, remoteHosts]);
+
+  const sources = useMemo<HostSource[]>(() => {
+    if (localOnlyRuntime) {
+      return [LOCAL_SOURCE];
+    }
+
+    return [LOCAL_SOURCE, ...remoteHosts.map(toHostSource)];
+  }, [localOnlyRuntime, remoteHosts]);
+
+  const enabledSources = useMemo<HostSource[]>(() => {
+    if (localOnlyRuntime) {
+      return [LOCAL_SOURCE];
+    }
+
+    return [LOCAL_SOURCE, ...remoteHosts.filter((host) => host.enabled).map(toHostSource)];
+  }, [localOnlyRuntime, remoteHosts]);
+
+  const activeSource = useMemo<HostSource | null>(() => {
+    if (activeFilter === 'all') {
+      return null;
+    }
+
+    return sources.find((source) => source.hostId === activeFilter) ?? null;
+  }, [activeFilter, sources]);
+
+  const filteredHostIds = useMemo<Set<string> | null>(() => {
+    if (activeFilter === 'all') {
+      return null;
+    }
+
+    return new Set([activeFilter]);
+  }, [activeFilter]);
+
+  return {
+    sources,
+    enabledSources,
+    remoteHosts,
+    activeFilter,
+    activeSource,
+    filteredHostIds,
+    setActiveFilter,
+    addRemoteHost,
+    editRemoteHost,
+    deleteRemoteHost,
+    toggleRemoteHost,
+    isLoading,
+    error,
+  };
+}

package/.next/standalone/src/hooks/useOpencodeSync.test.ts

@@ -0,0 +1,387 @@
+import * as TestingLibraryReact from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, createElement, type ReactElement } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { BuiltInHostSource, OpencodeEvent, OpencodeSession, RemoteHostConfig } from '@/types';
+import { getSseStatusSnapshot, useOpencodeSync } from './useOpencodeSync';
+
+vi.mock('@/lib/notificationSound', () => ({
+    playAlertSound: vi.fn(),
+    playAttentionSound: vi.fn(),
+}));
+
+const WAITING_STORAGE_KEY = 'vibepulse:waiting-sessions:v2';
+
+type RenderResult = {
+    unmount: () => void;
+};
+
+type RenderFn = (ui: ReactElement) => RenderResult;
+
+type SessionsQueryData = {
+    sessions: OpencodeSession[];
+};
+
+type RemoteSseEvent = {
+    source: {
+        hostId: string;
+        hostLabel: string;
+        hostKind: 'remote';
+        hostBaseUrl?: string;
+    };
+    event: OpencodeEvent | { payload: OpencodeEvent; directory: string };
+};
+
+const LOCAL_SOURCE: BuiltInHostSource = {
+    hostId: 'local',
+    hostLabel: 'Local',
+    hostKind: 'local',
+};
+
+const REMOTE_SOURCE: RemoteHostConfig & { hostKind: 'remote' } = {
+    hostId: 'remote-1',
+    hostLabel: 'Remote 1',
+    hostKind: 'remote',
+    baseUrl: 'https://remote.example.com',
+    enabled: true,
+};
+
+class MockEventSource {
+    static instances: MockEventSource[] = [];
+
+    onopen: ((event: Event) => void) | null = null;
+    onmessage: ((event: MessageEvent<string>) => void) | null = null;
+    onerror: ((event: Event) => void) | null = null;
+    readonly url: string;
+    closed = false;
+
+    constructor(url: string) {
+        this.url = url;
+        MockEventSource.instances.push(this);
+    }
+
+    close() {
+        this.closed = true;
+    }
+
+    emitMessage(payload: OpencodeEvent | RemoteSseEvent) {
+        this.onmessage?.(new MessageEvent('message', { data: JSON.stringify(payload) }));
+    }
+
+    static reset() {
+        MockEventSource.instances = [];
+    }
+}
+
+function getRender(): RenderFn {
+    return (TestingLibraryReact as unknown as { render: RenderFn }).render;
+}
+
+function createQueryClient() {
+    return new QueryClient({
+        defaultOptions: {
+            queries: {
+                retry: false,
+            },
+        },
+    });
+}
+
+function SyncProbe() {
+    useOpencodeSync();
+    return null;
+}
+
+function createSession(overrides: Partial<OpencodeSession> & Pick<OpencodeSession, 'id'>): OpencodeSession {
+    const created = 1000;
+    return {
+        id: overrides.id,
+        slug: overrides.slug ?? overrides.id,
+        title: overrides.title ?? overrides.id,
+        directory: overrides.directory ?? '/tmp/project',
+        projectName: overrides.projectName ?? 'Project',
+        branch: overrides.branch,
+        parentID: overrides.parentID,
+        time: overrides.time ?? { created, updated: created },
+        messageCount: overrides.messageCount ?? 0,
+        hasTodos: overrides.hasTodos,
+        hasTranscript: overrides.hasTranscript,
+        realTimeStatus: overrides.realTimeStatus ?? 'idle',
+        waitingForUser: overrides.waitingForUser ?? false,
+        debugReason: overrides.debugReason,
+        children: overrides.children,
+        hostId: overrides.hostId,
+        hostLabel: overrides.hostLabel,
+        hostKind: overrides.hostKind,
+        hostBaseUrl: overrides.hostBaseUrl,
+        rawSessionId: overrides.rawSessionId,
+        sourceSessionKey: overrides.sourceSessionKey ?? overrides.id,
+        readOnly: overrides.readOnly,
+    };
+}
+
+function renderUseOpencodeSync(initialData: SessionsQueryData) {
+    const queryClient = createQueryClient();
+    const queryKey = ['sessions', [LOCAL_SOURCE, REMOTE_SOURCE]];
+    queryClient.setQueryData(queryKey, initialData);
+
+    const render = getRender();
+    const result = render(
+        createElement(
+            QueryClientProvider,
+            { client: queryClient },
+            createElement(SyncProbe)
+        )
+    );
+
+    const eventSource = MockEventSource.instances[0];
+    if (!eventSource) {
+        throw new Error('EventSource was not created');
+    }
+
+    return {
+        eventSource,
+        queryClient,
+        queryKey,
+        unmount: result.unmount,
+    };
+}
+
+describe('useOpencodeSync', () => {
+    let mockLocalStorage: Record<string, string>;
+
+    beforeEach(() => {
+        mockLocalStorage = {};
+        MockEventSource.reset();
+        vi.useFakeTimers();
+        vi.stubGlobal('EventSource', MockEventSource as unknown as typeof EventSource);
+        vi.stubGlobal('localStorage', {
+            getItem: (key: string) => mockLocalStorage[key] || null,
+            setItem: (key: string, value: string) => {
+                mockLocalStorage[key] = value;
+            },
+            removeItem: (key: string) => {
+                delete mockLocalStorage[key];
+            },
+            clear: () => {
+                Object.keys(mockLocalStorage).forEach((key) => delete mockLocalStorage[key]);
+            },
+        });
+        (getSseStatusSnapshot() as Map<string, unknown>).clear();
+    });
+
+    afterEach(() => {
+        vi.clearAllTimers();
+        vi.useRealTimers();
+        vi.unstubAllGlobals();
+        MockEventSource.reset();
+        (getSseStatusSnapshot() as Map<string, unknown>).clear();
+    });
+
+    it('applies local SSE status updates only to the local composite session key', () => {
+        const localSession = createSession({
+            id: 'local:abc',
+            rawSessionId: 'abc',
+            hostId: 'local',
+            hostLabel: 'Local',
+            hostKind: 'local',
+        });
+        const remoteSession = createSession({
+            id: 'remote-1:abc',
+            rawSessionId: 'abc',
+            hostId: 'remote-1',
+            hostLabel: 'Remote 1',
+            hostKind: 'remote',
+            hostBaseUrl: 'https://remote.example.com',
+            readOnly: false,
+        });
+
+        const { eventSource, queryClient, queryKey, unmount } = renderUseOpencodeSync({
+            sessions: [localSession, remoteSession],
+        });
+
+        act(() => {
+            eventSource.emitMessage({
+                type: 'session.status',
+                properties: {
+                    sessionID: 'abc',
+                    status: { type: 'busy' },
+                },
+                timestamp: Date.now(),
+            });
+        });
+
+        const data = queryClient.getQueryData<SessionsQueryData>(queryKey);
+        const nextLocalSession = data?.sessions.find((session) => session.id === 'local:abc');
+        const nextRemoteSession = data?.sessions.find((session) => session.id === 'remote-1:abc');
+
+        expect(nextLocalSession?.realTimeStatus).toBe('busy');
+        expect(nextRemoteSession?.realTimeStatus).toBe('idle');
+        expect(getSseStatusSnapshot().get('local:abc')?.status).toBe('busy');
+        expect(getSseStatusSnapshot().has('remote-1:abc')).toBe(false);
+
+        unmount();
+    });
+
+    it('persists waiting state under the v2 storage key using only local composite keys', () => {
+        const localSession = createSession({
+            id: 'local:abc',
+            rawSessionId: 'abc',
+            hostId: 'local',
+            hostLabel: 'Local',
+            hostKind: 'local',
+        });
+        const remoteSession = createSession({
+            id: 'remote-1:abc',
+            rawSessionId: 'abc',
+            hostId: 'remote-1',
+            hostLabel: 'Remote 1',
+            hostKind: 'remote',
+            readOnly: false,
+        });
+
+        const { eventSource, queryClient, queryKey, unmount } = renderUseOpencodeSync({
+            sessions: [localSession, remoteSession],
+        });
+
+        act(() => {
+            eventSource.emitMessage({
+                type: 'question.asked',
+                properties: {
+                    sessionID: 'abc',
+                },
+                timestamp: Date.now(),
+            });
+        });
+
+        const persistedWaiting = JSON.parse(mockLocalStorage[WAITING_STORAGE_KEY] || '{}') as Record<string, boolean>;
+        const data = queryClient.getQueryData<SessionsQueryData>(queryKey);
+        const nextLocalSession = data?.sessions.find((session) => session.id === 'local:abc');
+        const nextRemoteSession = data?.sessions.find((session) => session.id === 'remote-1:abc');
+
+        expect(persistedWaiting).toEqual({ 'local:abc': true });
+        expect(mockLocalStorage['vibepulse:waiting-sessions']).toBeUndefined();
+        expect(nextLocalSession?.waitingForUser).toBe(true);
+        expect(nextRemoteSession?.waitingForUser).toBe(false);
+
+        unmount();
+    });
+
+    it('applies remote SSE status updates using the remote host namespace', () => {
+        const localSession = createSession({
+            id: 'local:abc',
+            rawSessionId: 'abc',
+            hostId: 'local',
+            hostLabel: 'Local',
+            hostKind: 'local',
+        });
+        const remoteSession = createSession({
+            id: 'remote-1:abc',
+            rawSessionId: 'abc',
+            hostId: 'remote-1',
+            hostLabel: 'Remote 1',
+            hostKind: 'remote',
+            readOnly: false,
+        });
+
+        const { eventSource, queryClient, queryKey, unmount } = renderUseOpencodeSync({
+            sessions: [localSession, remoteSession],
+        });
+
+        act(() => {
+            eventSource.emitMessage({
+                source: {
+                    hostId: 'remote-1',
+                    hostLabel: 'Remote 1',
+                    hostKind: 'remote',
+                    hostBaseUrl: 'https://remote.example.com',
+                },
+                event: {
+                    payload: {
+                        type: 'session.status',
+                        properties: {
+                            sessionID: 'local:abc',
+                            status: { type: 'busy' },
+                        },
+                        timestamp: Date.now(),
+                    },
+                    directory: '/tmp/remote-project',
+                },
+            });
+        });
+
+        const data = queryClient.getQueryData<SessionsQueryData>(queryKey);
+        const nextLocalSession = data?.sessions.find((session) => session.id === 'local:abc');
+        const nextRemoteSession = data?.sessions.find((session) => session.id === 'remote-1:abc');
+
+        expect(nextLocalSession?.realTimeStatus).toBe('idle');
+        expect(nextRemoteSession?.realTimeStatus).toBe('busy');
+        expect(nextRemoteSession?.readOnly).toBe(false);
+        expect(nextRemoteSession?.hostBaseUrl).toBe('https://remote.example.com');
+        expect(getSseStatusSnapshot().get('remote-1:abc')?.status).toBe('busy');
+        expect(getSseStatusSnapshot().has('local:abc')).toBe(false);
+
+        unmount();
+    });
+
+    it('keeps remote waiting state out of local persistence keys', () => {
+        const localSession = createSession({
+            id: 'local:abc',
+            rawSessionId: 'abc',
+            hostId: 'local',
+            hostLabel: 'Local',
+            hostKind: 'local',
+        });
+        const remoteSession = createSession({
+            id: 'remote-1:abc',
+            rawSessionId: 'abc',
+            hostId: 'remote-1',
+            hostLabel: 'Remote 1',
+            hostKind: 'remote',
+            readOnly: false,
+        });
+
+        const { eventSource, queryClient, queryKey, unmount } = renderUseOpencodeSync({
+            sessions: [localSession, remoteSession],
+        });
+
+        act(() => {
+            eventSource.emitMessage({
+                source: {
+                    hostId: 'remote-1',
+                    hostLabel: 'Remote 1',
+                    hostKind: 'remote',
+                },
+                event: {
+                    type: 'question.asked',
+                    properties: {
+                        sessionID: 'local:abc',
+                    },
+                    timestamp: Date.now(),
+                },
+            });
+        });
+
+        const persistedWaiting = JSON.parse(mockLocalStorage[WAITING_STORAGE_KEY] || '{}') as Record<string, boolean>;
+        const data = queryClient.getQueryData<SessionsQueryData>(queryKey);
+        const nextLocalSession = data?.sessions.find((session) => session.id === 'local:abc');
+        const nextRemoteSession = data?.sessions.find((session) => session.id === 'remote-1:abc');
+
+        expect(persistedWaiting).toEqual({});
+        expect(nextLocalSession?.waitingForUser).toBe(false);
+        expect(nextRemoteSession?.waitingForUser).toBe(true);
+
+        act(() => {
+            vi.advanceTimersByTime(1600);
+        });
+
+        const persistedAfterDelay = JSON.parse(mockLocalStorage[WAITING_STORAGE_KEY] || '{}') as Record<string, boolean>;
+        const delayedData = queryClient.getQueryData<SessionsQueryData>(queryKey);
+        const delayedRemoteSession = delayedData?.sessions.find((session) => session.id === 'remote-1:abc');
+
+        expect(persistedAfterDelay).toEqual({});
+        expect(delayedRemoteSession?.waitingForUser).toBe(true);
+
+        unmount();
+    });
+});