@inf-minds/jobs-ui 0.0.1

package/dist/hooks/index.js

@@ -0,0 +1,6 @@
+// ABOUTME: Hooks module exports
+// ABOUTME: Re-exports all React hooks for job management
+export { useJobStream } from './use-job-stream.js';
+export { useJob } from './use-job.js';
+export { useJobList } from './use-job-list.js';
+export { useConnection } from './use-connection.js';

package/dist/hooks/use-connection.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Options for useConnection hook.
+ */
+export interface UseConnectionOptions {
+    /** WebSocket URL to connect to */
+    url: string;
+    /** Interval in milliseconds between reconnection attempts */
+    reconnectInterval?: number;
+    /** Callback when a message is received */
+    onMessage?: (data: unknown) => void;
+}
+/**
+ * Result of useConnection hook.
+ */
+export interface UseConnectionResult {
+    /** Whether the WebSocket is connected */
+    connected: boolean;
+    /** Error message if connection failed */
+    error: string | null;
+    /** Send data through the WebSocket */
+    send: (data: unknown) => void;
+}
+/**
+ * Hook for managing WebSocket connections with auto-reconnect.
+ *
+ * @example
+ * ```tsx
+ * const { connected, error, send } = useConnection({
+ *   url: 'ws://localhost:8080',
+ *   onMessage: (data) => console.log('Received:', data),
+ * });
+ * ```
+ */
+export declare function useConnection({ url, reconnectInterval, onMessage, }: UseConnectionOptions): UseConnectionResult;

package/dist/hooks/use-connection.js

@@ -0,0 +1,66 @@
+// ABOUTME: WebSocket connection hook with auto-reconnect
+// ABOUTME: Manages connection state, message handling, and reconnection logic
+import { useState, useEffect, useCallback, useRef } from 'react';
+/**
+ * Hook for managing WebSocket connections with auto-reconnect.
+ *
+ * @example
+ * ```tsx
+ * const { connected, error, send } = useConnection({
+ *   url: 'ws://localhost:8080',
+ *   onMessage: (data) => console.log('Received:', data),
+ * });
+ * ```
+ */
+export function useConnection({ url, reconnectInterval = 3000, onMessage, }) {
+    const [connected, setConnected] = useState(false);
+    const [error, setError] = useState(null);
+    const wsRef = useRef(null);
+    const reconnectRef = useRef(null);
+    const connect = useCallback(() => {
+        // Don't create multiple connections
+        if (wsRef.current?.readyState === WebSocket.OPEN)
+            return;
+        const ws = new WebSocket(url);
+        ws.onopen = () => {
+            setConnected(true);
+            setError(null);
+        };
+        ws.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                onMessage?.(data);
+            }
+            catch (err) {
+                console.error('[WS] Parse error:', err);
+            }
+        };
+        ws.onclose = () => {
+            setConnected(false);
+            wsRef.current = null;
+            // Schedule reconnect
+            reconnectRef.current = setTimeout(connect, reconnectInterval);
+        };
+        ws.onerror = () => {
+            setError('Connection failed');
+        };
+        wsRef.current = ws;
+    }, [url, reconnectInterval, onMessage]);
+    useEffect(() => {
+        connect();
+        return () => {
+            // Clear any pending reconnect
+            if (reconnectRef.current) {
+                clearTimeout(reconnectRef.current);
+            }
+            // Close the WebSocket
+            wsRef.current?.close();
+        };
+    }, [connect]);
+    const send = useCallback((data) => {
+        if (wsRef.current?.readyState === WebSocket.OPEN) {
+            wsRef.current.send(JSON.stringify(data));
+        }
+    }, []);
+    return { connected, error, send };
+}

package/dist/hooks/use-job-list.d.ts

@@ -0,0 +1,70 @@
+import type { JobData } from './use-job.js';
+/**
+ * Options for listing jobs.
+ */
+export interface ListJobsOptions {
+    /** Account ID (usually required) */
+    accountId?: string;
+    /** Filter by job type */
+    type?: string;
+    /** Filter by status */
+    status?: string;
+    /** Page size */
+    limit?: number;
+    /** Offset for pagination */
+    offset?: number;
+}
+/**
+ * Result of listing jobs.
+ */
+export interface ListJobsResult<T extends JobData = JobData> {
+    /** Jobs matching the query */
+    jobs: T[];
+    /** Total count for pagination */
+    total?: number;
+}
+/**
+ * Function to fetch jobs.
+ */
+export type FetchJobsFn<T extends JobData = JobData> = (options: ListJobsOptions) => Promise<ListJobsResult<T>>;
+/**
+ * Result of useJobList hook.
+ */
+export interface UseJobListResult<T extends JobData = JobData> {
+    /** List of jobs */
+    jobs: T[];
+    /** Total count */
+    total: number;
+    /** Loading state */
+    isLoading: boolean;
+    /** Error if fetch failed */
+    error?: Error;
+    /** Refetch the list */
+    refetch: () => void;
+}
+/**
+ * React hook for fetching a list of jobs.
+ *
+ * @example
+ * ```tsx
+ * function JobList({ accountId }: { accountId: string }) {
+ *   const { jobs, total, isLoading, refetch } = useJobList(
+ *     (opts) => api.listJobs(opts),
+ *     { accountId, limit: 10 }
+ *   );
+ *
+ *   if (isLoading) return <Spinner />;
+ *
+ *   return (
+ *     <div>
+ *       <p>Showing {jobs.length} of {total} jobs</p>
+ *       {jobs.map(job => (
+ *         <JobRow key={job.id} job={job} />
+ *       ))}
+ *       <button onClick={refetch}>Refresh</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useJobList<T extends JobData = JobData>(fetchJobs: FetchJobsFn<T>, options: ListJobsOptions): UseJobListResult<T>;

package/dist/hooks/use-job-list.js

@@ -0,0 +1,64 @@
+// ABOUTME: useJobList React hook for fetching a list of jobs
+// ABOUTME: Provides pagination support and refetch capability
+import { useState, useEffect, useCallback } from 'react';
+/**
+ * React hook for fetching a list of jobs.
+ *
+ * @example
+ * ```tsx
+ * function JobList({ accountId }: { accountId: string }) {
+ *   const { jobs, total, isLoading, refetch } = useJobList(
+ *     (opts) => api.listJobs(opts),
+ *     { accountId, limit: 10 }
+ *   );
+ *
+ *   if (isLoading) return <Spinner />;
+ *
+ *   return (
+ *     <div>
+ *       <p>Showing {jobs.length} of {total} jobs</p>
+ *       {jobs.map(job => (
+ *         <JobRow key={job.id} job={job} />
+ *       ))}
+ *       <button onClick={refetch}>Refresh</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useJobList(fetchJobs, options) {
+    const [jobs, setJobs] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState();
+    // Stringify options for dependency comparison
+    const optionsKey = JSON.stringify(options);
+    const fetch = useCallback(async () => {
+        setIsLoading(true);
+        setError(undefined);
+        try {
+            const result = await fetchJobs(options);
+            setJobs(result.jobs);
+            setTotal(result.total ?? result.jobs.length);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error(String(err)));
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [fetchJobs, optionsKey]);
+    useEffect(() => {
+        fetch();
+    }, [fetch]);
+    const refetch = useCallback(() => {
+        fetch();
+    }, [fetch]);
+    return {
+        jobs,
+        total,
+        isLoading,
+        error,
+        refetch,
+    };
+}

package/dist/hooks/use-job-stream.d.ts

@@ -0,0 +1,58 @@
+import type { StreamClient } from '@inf-minds/relay-client';
+import type { JobStreamStatus, ExtractedProgress } from '../store/types.js';
+/**
+ * Options for useJobStream hook.
+ */
+export interface UseJobStreamOptions {
+    /** Starting offset (default: '-1') */
+    offset?: string;
+    /** Auto-start streaming (default: true) */
+    autoStart?: boolean;
+    /** Extract progress from custom events */
+    extractProgress?: (event: unknown) => ExtractedProgress | null;
+}
+/**
+ * Result of useJobStream hook.
+ */
+export interface UseJobStreamResult<TEvent> {
+    /** Accumulated events */
+    events: TEvent[];
+    /** Current status */
+    status: JobStreamStatus;
+    /** Progress (0.0 - 1.0) */
+    progress: number;
+    /** Progress message */
+    progressMessage?: string;
+    /** True when at stream tail */
+    upToDate: boolean;
+    /** True when stream closed */
+    closed: boolean;
+    /** Error if any */
+    error?: Error;
+    /** Manually start streaming */
+    start: () => void;
+    /** Stop streaming */
+    stop: () => void;
+}
+/**
+ * React hook for streaming job events.
+ *
+ * @example
+ * ```tsx
+ * function JobViewer({ jobId }: { jobId: string }) {
+ *   const { events, progress, status, closed } = useJobStream<MyEvent>(
+ *     client,
+ *     jobId
+ *   );
+ *
+ *   return (
+ *     <div>
+ *       <ProgressBar value={progress} />
+ *       {events.map(e => <EventItem key={e.id} event={e} />)}
+ *       {closed && <div>Job complete!</div>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useJobStream<TEvent = unknown>(client: StreamClient, streamId: string, options?: UseJobStreamOptions): UseJobStreamResult<TEvent>;

package/dist/hooks/use-job-stream.js

@@ -0,0 +1,73 @@
+// ABOUTME: useJobStream React hook for streaming job events
+// ABOUTME: Provides events, progress, and status with automatic cleanup
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createJobStreamStore } from '../store/job-stream-store.js';
+/**
+ * React hook for streaming job events.
+ *
+ * @example
+ * ```tsx
+ * function JobViewer({ jobId }: { jobId: string }) {
+ *   const { events, progress, status, closed } = useJobStream<MyEvent>(
+ *     client,
+ *     jobId
+ *   );
+ *
+ *   return (
+ *     <div>
+ *       <ProgressBar value={progress} />
+ *       {events.map(e => <EventItem key={e.id} event={e} />)}
+ *       {closed && <div>Job complete!</div>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useJobStream(client, streamId, options = {}) {
+    const { offset, autoStart = true, extractProgress } = options;
+    // Create store ref to maintain instance across renders
+    const storeRef = useRef(null);
+    // Initialize store
+    if (!storeRef.current) {
+        storeRef.current = createJobStreamStore({
+            client,
+            extractProgress,
+        });
+    }
+    const store = storeRef.current;
+    // State from store
+    const [state, setState] = useState(store.getState());
+    // Subscribe to store changes
+    useEffect(() => {
+        const unsubscribe = store.subscribe(setState);
+        return unsubscribe;
+    }, [store]);
+    // Auto-start effect
+    useEffect(() => {
+        if (autoStart && streamId) {
+            store.actions.start(streamId, offset);
+        }
+        return () => {
+            store.actions.stop();
+        };
+    }, [store, streamId, offset, autoStart]);
+    // Manual start
+    const start = useCallback(() => {
+        store.actions.start(streamId, offset);
+    }, [store, streamId, offset]);
+    // Stop
+    const stop = useCallback(() => {
+        store.actions.stop();
+    }, [store]);
+    return {
+        events: state.events,
+        status: state.status,
+        progress: state.progress,
+        progressMessage: state.progressMessage,
+        upToDate: state.upToDate,
+        closed: state.closed,
+        error: state.error,
+        start,
+        stop,
+    };
+}

package/dist/hooks/use-job.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Generic job type (minimal interface for UI purposes).
+ */
+export interface JobData {
+    id: string;
+    type: string;
+    status: string;
+    progress?: number | null;
+    error?: string | null;
+    createdAt: Date;
+    updatedAt: Date;
+    [key: string]: unknown;
+}
+/**
+ * Function to fetch a job by ID.
+ */
+export type FetchJobFn<T extends JobData = JobData> = (jobId: string) => Promise<T | null>;
+/**
+ * Result of useJob hook.
+ */
+export interface UseJobResult<T extends JobData = JobData> {
+    /** The job data */
+    job: T | null;
+    /** Loading state */
+    isLoading: boolean;
+    /** Error if fetch failed */
+    error?: Error;
+    /** Refetch the job */
+    refetch: () => void;
+}
+/**
+ * React hook for fetching a single job.
+ *
+ * @example
+ * ```tsx
+ * function JobDetails({ jobId }: { jobId: string }) {
+ *   const { job, isLoading, error, refetch } = useJob(
+ *     (id) => api.getJob(id),
+ *     jobId
+ *   );
+ *
+ *   if (isLoading) return <Spinner />;
+ *   if (error) return <Error message={error.message} />;
+ *   if (!job) return <NotFound />;
+ *
+ *   return (
+ *     <div>
+ *       <h1>{job.type}</h1>
+ *       <p>Status: {job.status}</p>
+ *       <button onClick={refetch}>Refresh</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useJob<T extends JobData = JobData>(fetchJob: FetchJobFn<T>, jobId: string): UseJobResult<T>;

package/dist/hooks/use-job.js

@@ -0,0 +1,64 @@
+// ABOUTME: useJob React hook for fetching a single job
+// ABOUTME: Provides loading states and refetch capability
+import { useState, useEffect, useCallback } from 'react';
+/**
+ * React hook for fetching a single job.
+ *
+ * @example
+ * ```tsx
+ * function JobDetails({ jobId }: { jobId: string }) {
+ *   const { job, isLoading, error, refetch } = useJob(
+ *     (id) => api.getJob(id),
+ *     jobId
+ *   );
+ *
+ *   if (isLoading) return <Spinner />;
+ *   if (error) return <Error message={error.message} />;
+ *   if (!job) return <NotFound />;
+ *
+ *   return (
+ *     <div>
+ *       <h1>{job.type}</h1>
+ *       <p>Status: {job.status}</p>
+ *       <button onClick={refetch}>Refresh</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useJob(fetchJob, jobId) {
+    const [job, setJob] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState();
+    const fetch = useCallback(async () => {
+        if (!jobId) {
+            setJob(null);
+            setIsLoading(false);
+            return;
+        }
+        setIsLoading(true);
+        setError(undefined);
+        try {
+            const result = await fetchJob(jobId);
+            setJob(result);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error(String(err)));
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [fetchJob, jobId]);
+    useEffect(() => {
+        fetch();
+    }, [fetch]);
+    const refetch = useCallback(() => {
+        fetch();
+    }, [fetch]);
+    return {
+        job,
+        isLoading,
+        error,
+        refetch,
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { createJobStreamStore, type JobStreamStore, type JobStreamState, type JobStreamStatus, type JobStreamActions, type JobStreamListener, type CreateJobStreamStoreOptions, type ExtractedProgress, type Unsubscribe, } from './store/index.js';
+export { useJobStream, type UseJobStreamOptions, type UseJobStreamResult, useJob, type UseJobResult, type FetchJobFn, type JobData, useJobList, type UseJobListResult, type FetchJobsFn, type ListJobsOptions, type ListJobsResult, useConnection, type UseConnectionOptions, type UseConnectionResult, } from './hooks/index.js';
+export { JobProgress, type JobProgressProps, JobEventLog, type JobEventLogProps, JobStatusBadge, type JobStatusBadgeProps, type JobStatus, JobCard, type JobCardProps, JobList, type JobListProps, JobFilters, type JobFiltersProps, ConnectionStatus, type ConnectionStatusProps, CreateJobForm, type CreateJobFormProps, Dashboard, type DashboardProps, type DashboardSectionProps, } from './components/index.js';
+export { type JobData as RendererJobData, type JobTypeRenderer, type JobRendererRegistry, } from './types/index.js';

package/dist/index.js

@@ -0,0 +1,8 @@
+// ABOUTME: jobs-ui package entry point
+// ABOUTME: Exports headless store, React hooks, and optional components
+// Store exports (headless - works without React)
+export { createJobStreamStore, } from './store/index.js';
+// React hooks
+export { useJobStream, useJob, useJobList, useConnection, } from './hooks/index.js';
+// React components (optional, tree-shakeable)
+export { JobProgress, JobEventLog, JobStatusBadge, JobCard, JobList, JobFilters, ConnectionStatus, CreateJobForm, Dashboard, } from './components/index.js';

package/dist/store/index.d.ts

@@ -0,0 +1,2 @@
+export { createJobStreamStore } from './job-stream-store.js';
+export type { JobStreamStore, JobStreamState, JobStreamStatus, JobStreamActions, JobStreamListener, CreateJobStreamStoreOptions, ExtractedProgress, Unsubscribe, } from './types.js';

package/dist/store/index.js

@@ -0,0 +1,3 @@
+// ABOUTME: Store module exports
+// ABOUTME: Re-exports JobStreamStore and related types
+export { createJobStreamStore } from './job-stream-store.js';

package/dist/store/job-stream-store.d.ts

@@ -0,0 +1,23 @@
+import type { JobStreamStore, CreateJobStreamStoreOptions } from './types.js';
+/**
+ * Creates a headless store for job stream state.
+ *
+ * @example
+ * ```typescript
+ * const store = createJobStreamStore({ client });
+ *
+ * // Subscribe to state changes
+ * const unsubscribe = store.subscribe((state) => {
+ *   console.log('Events:', state.events.length);
+ *   console.log('Progress:', state.progress);
+ * });
+ *
+ * // Start streaming
+ * store.actions.start('job-123');
+ *
+ * // Later: stop and cleanup
+ * store.actions.stop();
+ * unsubscribe();
+ * ```
+ */
+export declare function createJobStreamStore<TEvent = unknown>(options: CreateJobStreamStoreOptions): JobStreamStore<TEvent>;