@datarecce/ui 0.1.30 → 0.1.31

package/recce-source/js/src/lib/formatSelect.ts

@@ -0,0 +1,50 @@
+import { mergeKeys } from "./mergeKeys";
+
+export function formatSelectColumns(
+  baseColumns: string[],
+  currentColumns: string[],
+): string[] {
+  const mergedColumns = mergeKeys(baseColumns, currentColumns);
+
+  // both side have no schema
+  if (mergedColumns.length === 0) {
+    return [];
+  }
+
+  // if either side has schema (added and removed model, no catalog.json)
+  if (baseColumns.length === 0 || currentColumns.length === 0) {
+    return mergedColumns.map((col, idx) => {
+      const last = idx === mergedColumns.length - 1;
+      if (last) {
+        return col;
+      }
+      return col + ",";
+    });
+  }
+
+  let lastActualColumn = "";
+  mergedColumns.forEach((col) => {
+    if (baseColumns.includes(col) && currentColumns.includes(col)) {
+      lastActualColumn = col;
+    }
+  });
+
+  const selectColumns = mergedColumns.map((col, idx) => {
+    let formatCol;
+
+    if (!baseColumns.includes(col)) {
+      formatCol = `--- ${col} (Added)`;
+    } else if (!currentColumns.includes(col)) {
+      formatCol = `--- ${col} (Removed)`;
+    } else {
+      formatCol = col;
+    }
+
+    if (col === lastActualColumn || idx === mergedColumns.length - 1) {
+      return formatCol;
+    }
+    return formatCol + ",";
+  });
+
+  return selectColumns;
+}

package/recce-source/js/src/lib/hooks/ApiConfigContext.tsx

@@ -0,0 +1,181 @@
+import axios, { AxiosInstance } from "axios";
+import React, { createContext, useContext, useMemo } from "react";
+import { PUBLIC_API_URL } from "@/lib/const";
+
+/**
+ * API Configuration Context
+ *
+ * Provides configurable API endpoint prefix and authentication token
+ * for use with recce-cloud or other custom API backends.
+ *
+ * Default behavior (OSS):
+ * - apiPrefix: "" (uses /api/* paths directly)
+ * - authToken: undefined (no auth header)
+ *
+ * Cloud usage example:
+ * - apiPrefix: "/api/v2/sessions/abc123" (replaces /api with this prefix)
+ * - authToken: "eyJ..." (adds Authorization: Bearer header)
+ */
+
+export interface ApiConfig {
+  /**
+   * API endpoint prefix to replace `/api` in all requests.
+   * For OSS: "" (empty string, uses default /api/* paths)
+   * For Cloud: "/api/v2/sessions/<session_id>" (replaces /api with this)
+   */
+  apiPrefix: string;
+
+  /**
+   * Optional authentication token for API requests.
+   * When provided, adds "Authorization: Bearer <token>" header.
+   */
+  authToken?: string;
+
+  /**
+   * Optional base URL override.
+   * When provided, overrides the PUBLIC_API_URL for this context.
+   */
+  baseUrl?: string;
+}
+
+interface ApiConfigContextType extends ApiConfig {
+  /**
+   * Pre-configured axios instance with interceptors for
+   * API prefix replacement and auth token injection.
+   */
+  apiClient: AxiosInstance;
+}
+
+const defaultConfig: ApiConfig = {
+  apiPrefix: "",
+  authToken: undefined,
+  baseUrl: undefined,
+};
+
+const ApiConfigContext = createContext<ApiConfigContextType | null>(null);
+
+interface ApiConfigProviderProps extends Partial<ApiConfig> {
+  children: React.ReactNode;
+}
+
+/**
+ * Creates an axios instance configured with the given API config.
+ *
+ * The instance has interceptors that:
+ * 1. Replace /api prefix with the configured apiPrefix (if provided)
+ * 2. Add Authorization header with Bearer token (if authToken provided)
+ */
+function createApiClient(config: ApiConfig): AxiosInstance {
+  const { apiPrefix, authToken, baseUrl } = config;
+
+  const client = axios.create({
+    baseURL: baseUrl ?? PUBLIC_API_URL,
+  });
+
+  // Request interceptor to modify URL and add auth header
+  client.interceptors.request.use(
+    (requestConfig) => {
+      try {
+        // Replace /api prefix with configured apiPrefix (only if apiPrefix is non-empty)
+        if (apiPrefix && requestConfig.url) {
+          // Handle exact "/api" and "/api/*" URLs explicitly
+          if (requestConfig.url === "/api") {
+            requestConfig.url = apiPrefix;
+          } else if (requestConfig.url.startsWith("/api/")) {
+            // "/api".length === 4; keep everything after that
+            requestConfig.url = apiPrefix + requestConfig.url.slice(4);
+          }
+        }
+
+        // Add auth header if token is provided
+        if (authToken) {
+          requestConfig.headers.Authorization = `Bearer ${authToken}`;
+        }
+
+        return requestConfig;
+      } catch (error) {
+        // If anything goes wrong in the interceptor, fall back to the original config
+        // to avoid breaking all API requests.
+        console.warn(
+          "API request interceptor error, proceeding with unmodified request:",
+          error,
+        );
+        return requestConfig;
+      }
+    },
+    (error) => {
+      // Preserve default axios behavior for request errors
+      return Promise.reject(error);
+    },
+  );
+
+  return client;
+}
+
+export function ApiConfigProvider({
+  children,
+  apiPrefix = defaultConfig.apiPrefix,
+  authToken = defaultConfig.authToken,
+  baseUrl = defaultConfig.baseUrl,
+}: ApiConfigProviderProps) {
+  const config: ApiConfig = useMemo(
+    () => ({ apiPrefix, authToken, baseUrl }),
+    [apiPrefix, authToken, baseUrl],
+  );
+
+  const apiClient = useMemo(() => createApiClient(config), [config]);
+
+  const contextValue: ApiConfigContextType = useMemo(
+    () => ({
+      ...config,
+      apiClient,
+    }),
+    [config, apiClient],
+  );
+
+  return (
+    <ApiConfigContext.Provider value={contextValue}>
+      {children}
+    </ApiConfigContext.Provider>
+  );
+}
+
+// Default config used when ApiConfigProvider is not present (OSS mode)
+const defaultApiConfigContext: ApiConfigContextType = {
+  apiPrefix: "",
+  authToken: undefined,
+  baseUrl: undefined,
+  apiClient: axios.create({ baseURL: PUBLIC_API_URL }),
+};
+
+/**
+ * Hook to access the API configuration and configured axios client.
+ *
+ * When used outside ApiConfigProvider, returns default config with
+ * standard axiosClient (for OSS backward compatibility).
+ *
+ * @returns ApiConfigContextType with apiPrefix, authToken, and apiClient
+ */
+export function useApiConfig(): ApiConfigContextType {
+  const context = useContext(ApiConfigContext);
+  // Return default config if outside provider (OSS mode)
+  return context ?? defaultApiConfigContext;
+}
+
+/**
+ * Hook to get the configured axios client.
+ * Convenience wrapper around useApiConfig().apiClient
+ *
+ * @returns AxiosInstance configured with API prefix and auth token
+ */
+export function useApiClient(): AxiosInstance {
+  return useApiConfig().apiClient;
+}
+
+/**
+ * Safe version of useApiConfig that returns null if outside provider.
+ * Useful for components that need to detect if ApiConfigProvider is present.
+ */
+export function useApiConfigSafe(): ApiConfigContextType | null {
+  return useContext(ApiConfigContext);
+}

package/recce-source/js/src/lib/hooks/IdleTimeoutContext.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import {
+  getLastKeepAliveTime,
+  setKeepAliveCallback,
+} from "@/lib/api/keepAlive";
+import { useIdleDetection } from "./useIdleDetection";
+import { useRecceInstanceInfo } from "./useRecceInstanceInfo";
+
+/**
+ * Context for sharing idle timeout state across components
+ *
+ * IMPORTANT: The countdown is based on the last SUCCESSFUL keep-alive API call,
+ * NOT on user activity. This ensures the countdown accurately reflects the
+ * server's idle timeout state.
+ */
+interface IdleTimeoutContextType {
+  /** Remaining seconds until timeout (null if idle timeout not enabled) */
+  remainingSeconds: number | null;
+  /** Idle timeout value from server in seconds (null if not configured) */
+  idleTimeout: number | null;
+  /** Whether idle timeout is enabled */
+  isEnabled: boolean;
+  /** Mark as disconnected - stops countdown and keep-alive */
+  setDisconnected: () => void;
+  /** Reset connection state - restarts countdown and keep-alive after successful reconnect */
+  resetConnection: () => void;
+  /** Whether the connection is disconnected */
+  isDisconnected: boolean;
+}
+
+const IdleTimeoutContext = createContext<IdleTimeoutContextType | undefined>(
+  undefined,
+);
+
+/**
+ * Provider for idle timeout state
+ *
+ * The countdown is based on lastServerSyncTime (when keep-alive API was last
+ * successfully sent), not on user activity. This provides accurate server state.
+ */
+export function IdleTimeoutProvider({ children }: { children: ReactNode }) {
+  const { data: instanceInfo } = useRecceInstanceInfo();
+  // Track the last time we successfully synced with server (keep-alive sent)
+  const lastServerSyncRef = useRef<number>(Date.now());
+  const [remainingSeconds, setRemainingSeconds] = useState<number | null>(null);
+  const [isDisconnected, setIsDisconnected] = useState(false);
+
+  const idleTimeout = instanceInfo?.idle_timeout ?? null;
+  const isEnabled = idleTimeout !== null && idleTimeout > 0;
+
+  // Register callback to receive keep-alive success notifications
+  // Use ref to track enabled state to avoid race condition in callback
+  const isEnabledRef = useRef(isEnabled);
+  useEffect(() => {
+    isEnabledRef.current = isEnabled;
+  }, [isEnabled]);
+
+  useEffect(() => {
+    if (!isEnabled) {
+      setKeepAliveCallback(null);
+      return;
+    }
+
+    setKeepAliveCallback((timestamp: number) => {
+      // Check current enabled state to avoid updating after disabled
+      if (isEnabledRef.current) {
+        lastServerSyncRef.current = timestamp;
+      }
+    });
+
+    // Initialize with current keep-alive time if available
+    const currentTime = getLastKeepAliveTime();
+    if (currentTime > 0) {
+      lastServerSyncRef.current = currentTime;
+    }
+
+    return () => {
+      setKeepAliveCallback(null);
+    };
+  }, [isEnabled]);
+
+  const setDisconnected = useCallback(() => {
+    setIsDisconnected(true);
+  }, []);
+
+  const resetConnection = useCallback(() => {
+    // Reset disconnected state
+    setIsDisconnected(false);
+    // Reset server sync time to now (server just restarted, timer reset)
+    lastServerSyncRef.current = Date.now();
+  }, []);
+
+  // Update remaining seconds every second based on server sync time
+  useEffect(() => {
+    if (!isEnabled || idleTimeout === null) {
+      setRemainingSeconds(null);
+      return;
+    }
+
+    // Stop updating countdown if disconnected
+    if (isDisconnected) {
+      return;
+    }
+
+    const updateCountdown = () => {
+      const now = Date.now();
+      const elapsedSeconds = (now - lastServerSyncRef.current) / 1000;
+      const remaining = Math.max(0, idleTimeout - elapsedSeconds);
+      setRemainingSeconds(remaining);
+    };
+
+    // Initial update
+    updateCountdown();
+
+    // Set up interval for updates
+    const intervalId = setInterval(updateCountdown, 1000);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [isEnabled, idleTimeout, isDisconnected]);
+
+  return (
+    <IdleTimeoutContext.Provider
+      value={{
+        remainingSeconds,
+        idleTimeout,
+        isEnabled,
+        setDisconnected,
+        resetConnection,
+        isDisconnected,
+      }}
+    >
+      <IdleDetector />
+      {children}
+    </IdleTimeoutContext.Provider>
+  );
+}
+
+/**
+ * Internal component that activates idle detection
+ * Placed inside provider so it has access to context
+ */
+function IdleDetector() {
+  useIdleDetection();
+  return null;
+}
+
+/**
+ * Hook to access idle timeout context
+ * @throws Error if used outside IdleTimeoutProvider
+ */
+export function useIdleTimeout() {
+  const context = useContext(IdleTimeoutContext);
+  if (!context) {
+    throw new Error("useIdleTimeout must be used within IdleTimeoutProvider");
+  }
+  return context;
+}
+
+/**
+ * Hook to access idle timeout context, returns null if outside provider
+ * Used internally by useIdleDetection to avoid circular dependency
+ */
+export function useIdleTimeoutSafe(): IdleTimeoutContextType | null {
+  return useContext(IdleTimeoutContext) ?? null;
+}