store.ts

/**
 * Store Module
 *
 * Manages project state using a simple pub/sub pattern.
 * Designed to work with React's useSyncExternalStore.
 *
 * Batches rapid state updates (e.g., from session streaming changes)
 * to prevent excessive React re-renders. Updates are batched until the next animation
 * frame, coalescing all changes that happen before the browser paints.
 */

import type { ProjectState, ProjectStore, StateListener } from './types';

/**
 * Creates an initial project state.
 * Messages and streaming are now per-session — the project store only
 * holds project-wide state and the sessions array.
 */
export function createInitialState(
  deploymentId: string | null,
  modelId: string | null,
  gitRepoFullName: string | null
): ProjectState {
  return {
    isStreaming: false,
    isInterrupting: false,
    previewUrl: null,
    previewStatus: 'idle',
    deploymentId,
    model: modelId ?? 'anthropic/claude-sonnet-4',
    currentIframeUrl: null,
    gitRepoFullName,
    sessions: [],
    pendingNewSession: false,
  };
}

/**
 * Creates a project store for managing state.
 *
 * Implements frame-based batched notifications: multiple setState calls are batched
 * until the next animation frame, then a single notification is fired. This works
 * for both:
 * - Multiple calls in the same event loop tick (synchronous)
 * - Multiple calls across event loop ticks (e.g., rapid session state changes)
 *
 * The batching window ends when the browser is ready to paint, ensuring all updates
 * that arrive before a frame are combined into a single React re-render.
 *
 * In test/SSR environments without requestAnimationFrame, falls back to setTimeout(0).
 */
export function createProjectStore(initialState: ProjectState): ProjectStore {
  let state = initialState;
  const listeners = new Set<StateListener>();
  let notificationPending = false;

  // Use requestAnimationFrame in browser, setTimeout in tests/SSR
  const hasRAF = typeof requestAnimationFrame === 'function';

  function scheduleNotification(): void {
    if (notificationPending) {
      return;
    }
    notificationPending = true;

    const notify = () => {
      notificationPending = false;
      listeners.forEach(listener => listener());
    };

    if (hasRAF) {
      requestAnimationFrame(notify);
    } else {
      setTimeout(notify, 0);
    }
  }

  function getState(): ProjectState {
    return state;
  }

  function setState(partial: Partial<ProjectState>): void {
    state = { ...state, ...partial };
    scheduleNotification();
  }

  function subscribe(listener: StateListener): () => void {
    listeners.add(listener);
    return () => {
      listeners.delete(listener);
    };
  }

  return {
    getState,
    setState,
    subscribe,
  };
}