@ryanfw/prompt-orchestration-pipeline 0.5.0 → 0.7.0

package/src/ui/client/hooks/useJobDetailWithUpdates.js

@@ -1,45 +1,10 @@
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { useTransition } from "react";
 import { adaptJobDetail } from "../adapters/job-adapter.js";
 
 // Export debounce constant for tests
 export const REFRESH_DEBOUNCE_MS = 200;
 
-// Instrumentation helper for useJobDetailWithUpdates
-const createHookLogger = (jobId) => {
-  const prefix = `[useJobDetailWithUpdates:${jobId || "unknown"}]`;
-  return {
-    log: (message, data = null) => {
-      console.log(`${prefix} ${message}`, data ? data : "");
-    },
-    warn: (message, data = null) => {
-      console.warn(`${prefix} ${message}`, data ? data : "");
-    },
-    error: (message, data = null) => {
-      console.error(`${prefix} ${message}`, data ? data : "");
-    },
-    group: (label) => console.group(`${prefix} ${label}`),
-    groupEnd: () => console.groupEnd(),
-    table: (data, title) => {
-      console.log(`${prefix} ${title}:`);
-      console.table(data);
-    },
-    sse: (eventType, eventData) => {
-      console.log(
-        `%c${prefix} SSE Event: ${eventType}`,
-        "color: #0066cc; font-weight: bold;",
-        eventData
-      );
-    },
-    state: (stateName, value) => {
-      console.log(
-        `%c${prefix} State Change: ${stateName}`,
-        "color: #006600; font-weight: bold;",
-        value
-      );
-    },
-  };
-};
-
 /**
  * fetchJobDetail - Extracted fetch logic for job details
  *
@@ -173,12 +138,13 @@ function matchesJobTasksStatusPath(path, jobId) {
  * @returns {Object} { data, loading, error, connectionStatus }
  */
 export function useJobDetailWithUpdates(jobId) {
-  const logger = useMemo(() => createHookLogger(jobId), [jobId]);
-
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [connectionStatus, setConnectionStatus] = useState("disconnected");
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isPending, startTransition] = useTransition();
+  const [isHydrated, setIsHydrated] = useState(false);
 
   const esRef = useRef(null);
   const reconnectTimer = useRef(null);
@@ -187,80 +153,46 @@ export function useJobDetailWithUpdates(jobId) {
   const mountedRef = useRef(true);
   const refetchTimerRef = useRef(null);
 
-  // Log hook initialization and state changes
-  useEffect(() => {
-    logger.group("Hook Initialization");
-    logger.log("Job ID:", jobId);
-    logger.log("Initial state:", { data, loading, error, connectionStatus });
-    logger.groupEnd();
-  }, [jobId, logger]);
-
-  useEffect(() => {
-    logger.state("data", data);
-  }, [data, logger]);
-
-  useEffect(() => {
-    logger.state("loading", loading);
-  }, [loading, logger]);
-
-  useEffect(() => {
-    logger.state("error", error);
-  }, [error, logger]);
-
-  useEffect(() => {
-    logger.state("connectionStatus", connectionStatus);
-  }, [connectionStatus, logger]);
-
   // Debounced refetch helper (called directly from handlers)
   const scheduleDebouncedRefetch = useCallback(
     (context = {}) => {
-      logger.group("Debounced Refetch Request");
-      logger.log("Request context:", context);
-      logger.log("Scheduling debounced refetch");
       if (refetchTimerRef.current) {
-        logger.log("Clearing existing refetch timer");
         clearTimeout(refetchTimerRef.current);
       }
       refetchTimerRef.current = setTimeout(async () => {
         if (!mountedRef.current || !hydratedRef.current) {
-          logger.warn(
-            "Refetch aborted - component not mounted or not hydrated",
-            { mounted: mountedRef.current, hydrated: hydratedRef.current }
-          );
-          logger.groupEnd();
           return;
         }
-        logger.log("Executing debounced refetch");
-        logger.log("Refetch jobId:", jobId);
         const abortController = new AbortController();
         try {
+          startTransition(() => {
+            setIsRefreshing(true);
+          });
+
           const jobData = await fetchJobDetail(jobId, {
             signal: abortController.signal,
           });
-          logger.log("Refetch response received");
-          logger.log("Refetch job data preview:", {
-            status: jobData?.status,
-            hasTasks: !!jobData?.tasks,
-            taskKeys: jobData?.tasks ? Object.keys(jobData.tasks) : [],
-            hasTasksStatus: !!jobData?.tasksStatus,
-          });
+
           if (mountedRef.current) {
-            logger.log("Refetch successful, updating data");
-            setData(jobData);
-            setError(null);
-          } else {
-            logger.warn("Refetch completed but component is unmounted");
+            startTransition(() => {
+              setData(jobData);
+              setError(null);
+              setIsRefreshing(false);
+            });
           }
         } catch (err) {
-          logger.error("Failed to refetch job detail:", err);
-          if (mountedRef.current) setError(err.message);
+          if (mountedRef.current) {
+            startTransition(() => {
+              setError(err.message);
+              setIsRefreshing(false);
+            });
+          }
         } finally {
           refetchTimerRef.current = null;
-          logger.groupEnd();
         }
       }, REFRESH_DEBOUNCE_MS);
     },
-    [jobId, logger]
+    [jobId]
   );
 
   // Reset state when jobId changes
@@ -269,6 +201,7 @@ export function useJobDetailWithUpdates(jobId) {
     setLoading(true);
     setError(null);
     setConnectionStatus("disconnected");
+    setIsHydrated(false);
     hydratedRef.current = false;
     eventQueue.current = [];
     if (refetchTimerRef.current) {
@@ -282,109 +215,98 @@ export function useJobDetailWithUpdates(jobId) {
     if (!jobId || !mountedRef.current) return;
 
     const doFetch = async () => {
-      logger.group("Initial Data Fetch");
       try {
-        setLoading(true);
+        // Only set loading to true if we haven't hydrated yet
+        if (!hydratedRef.current) {
+          setLoading(true);
+        }
         setError(null);
-        logger.log("Starting initial job data fetch");
 
         const jobData = await fetchJobDetail(jobId);
-        logger.log("Initial fetch successful", jobData);
 
         // Apply any queued events to the fresh data (purely), and detect if a refetch is needed
         let finalData = jobData;
         let queuedNeedsRefetch = false;
         if (eventQueue.current.length > 0) {
-          logger.log(`Processing ${eventQueue.current.length} queued events`);
           for (const ev of eventQueue.current) {
-            logger.log("Processing queued event:", ev);
             if (ev.type === "state:change") {
               const d = (ev.payload && (ev.payload.data || ev.payload)) || {};
               if (
                 typeof d.path === "string" &&
                 matchesJobTasksStatusPath(d.path, jobId)
               ) {
-                logger.log(
-                  "Queued state:change matches tasks-status path, scheduling refetch"
-                );
                 queuedNeedsRefetch = true;
                 continue; // don't apply to data
               }
             }
             finalData = applyJobEvent(finalData, ev, jobId);
-            logger.log("Applied queued event, result:", finalData);
           }
           eventQueue.current = [];
         }
 
         if (mountedRef.current) {
-          logger.log("Updating state with final data");
-          setData(finalData);
-          setError(null);
-          hydratedRef.current = true;
-          logger.log("Component hydrated");
+          startTransition(() => {
+            setData(finalData);
+            setError(null);
+            const wasHydrated = hydratedRef.current;
+            hydratedRef.current = true;
+
+            // Update state only when transitioning to hydrated
+            if (!wasHydrated) {
+              setIsHydrated(true);
+              setLoading(false);
+            }
+          });
 
           // Now that we're hydrated, if any queued path-only change was seen, schedule a refetch
           if (queuedNeedsRefetch) {
-            logger.log("Scheduling refetch for queued path changes");
             scheduleDebouncedRefetch();
           }
         }
       } catch (err) {
-        logger.error("Failed to fetch job detail:", err);
         if (mountedRef.current) {
-          setError(err.message);
-          setData(null);
+          startTransition(() => {
+            setError(err.message);
+            setData(null);
+            if (!hydratedRef.current) {
+              setLoading(false);
+            }
+          });
         }
       } finally {
-        if (mountedRef.current) {
+        if (mountedRef.current && !hydratedRef.current) {
           setLoading(false);
         }
-        logger.groupEnd();
       }
     };
 
     doFetch();
-  }, [jobId, scheduleDebouncedRefetch, logger]);
+  }, [jobId, scheduleDebouncedRefetch]);
 
   // Set up SSE connection
   useEffect(() => {
     if (!jobId) {
-      logger.log("SSE setup skipped - no jobId available", {
-        hasJobId: !!jobId,
-        hasExistingEs: !!esRef.current,
-        isMounted: mountedRef.current,
-      });
       return undefined;
     }
     if (esRef.current) {
-      logger.log("Closing existing EventSource before reinitializing");
       try {
         esRef.current.close();
-      } catch (err) {
-        logger.warn("Error closing existing EventSource during reinit", err);
-      }
+      } catch (err) {}
       esRef.current = null;
     }
 
-    logger.group("SSE Connection Setup");
-    logger.log("Setting up SSE connection for job:", jobId);
-
     // Helper to attach listeners to a given EventSource instance
     const attachListeners = (es) => {
       const onOpen = () => {
-        logger.log("SSE connection opened");
         if (mountedRef.current) {
           setConnectionStatus("connected");
         }
       };
 
       const onError = () => {
-        logger.warn("SSE connection error");
         // Derive state from readyState when possible
         try {
           const rs = esRef.current?.readyState;
-          logger.log("SSE readyState:", rs);
           if (rs === 0) {
             if (mountedRef.current) setConnectionStatus("disconnected");
           } else if (rs === 1) {
@@ -395,7 +317,6 @@ export function useJobDetailWithUpdates(jobId) {
             if (mountedRef.current) setConnectionStatus("disconnected");
           }
         } catch (err) {
-          logger.error("Error getting readyState:", err);
           if (mountedRef.current) setConnectionStatus("disconnected");
         }
 
@@ -405,7 +326,6 @@ export function useJobDetailWithUpdates(jobId) {
           esRef.current.readyState === 2 &&
           mountedRef.current
         ) {
-          logger.log("Scheduling SSE reconnection");
           if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
           reconnectTimer.current = setTimeout(() => {
             if (!mountedRef.current) return;
@@ -420,7 +340,6 @@ export function useJobDetailWithUpdates(jobId) {
               const eventsUrl = jobId
                 ? `/api/events?jobId=${encodeURIComponent(jobId)}`
                 : "/api/events";
-              logger.log("Creating new EventSource for reconnection");
               const newEs = new EventSource(eventsUrl);
               newEs.addEventListener("open", onOpen);
               newEs.addEventListener("job:updated", onJobUpdated);
@@ -432,7 +351,7 @@ export function useJobDetailWithUpdates(jobId) {
 
               esRef.current = newEs;
             } catch (err) {
-              logger.error("Failed to reconnect SSE:", err);
+              console.error("Failed to reconnect SSE:", err);
             }
           }, 2000);
         }
@@ -443,18 +362,12 @@ export function useJobDetailWithUpdates(jobId) {
           const payload = evt && evt.data ? JSON.parse(evt.data) : null;
           const eventObj = { type, payload };
 
-          logger.sse(type, payload);
-
           // Filter events by jobId - only process events for our job when jobId is present
           if (payload && payload.jobId && payload.jobId !== jobId) {
-            logger.log(
-              `Ignoring event for different job: ${payload.jobId} (current: ${jobId})`
-            );
             return; // Ignore events for other jobs
           }
 
           if (!hydratedRef.current) {
-            logger.log(`Queueing event until hydration: ${type}`);
             // Queue events until hydration completes
             eventQueue.current = (eventQueue.current || []).concat(eventObj);
             return;
@@ -463,55 +376,33 @@ export function useJobDetailWithUpdates(jobId) {
           // Path-matching state:change → schedule debounced refetch
           if (type === "state:change") {
             const d = (payload && (payload.data || payload)) || {};
-            logger.log("Processing state:change event:", d);
             if (
               typeof d.path === "string" &&
               matchesJobTasksStatusPath(d.path, jobId)
             ) {
-              logger.log(
-                `state:change matches tasks-status path: ${d.path}, scheduling refetch`
-              );
               scheduleDebouncedRefetch({
                 reason: "state:change",
                 path: d.path,
               });
               return; // no direct setData
-            } else {
-              logger.log(
-                `state:change does not match tasks-status path: ${d.path}`
-              );
             }
           }
 
           // Apply event using pure reducer (includes direct state:change with id)
-          setData((prev) => {
-            logger.group("Applying SSE event to state");
-            logger.log("Previous state snapshot:", {
-              hasTasks: !!prev?.tasks,
-              taskKeys: prev?.tasks ? Object.keys(prev.tasks) : [],
-              status: prev?.status,
-            });
-            logger.log("Incoming event payload:", payload);
-            const next = applyJobEvent(prev, eventObj, jobId);
-            try {
-              if (JSON.stringify(prev) === JSON.stringify(next)) {
-                logger.log("Event application resulted in no state change");
-                logger.groupEnd();
-                return prev;
+          startTransition(() => {
+            setData((prev) => {
+              const next = applyJobEvent(prev, eventObj, jobId);
+              try {
+                if (JSON.stringify(prev) === JSON.stringify(next)) {
+                  return prev;
+                }
+              } catch (e) {
+                console.error("Error comparing states:", e);
               }
-            } catch (e) {
-              logger.error("Error comparing states:", e);
-            }
-            logger.log("Event applied, state updated", {
-              hasTasks: !!next?.tasks,
-              taskKeys: next?.tasks ? Object.keys(next.tasks) : [],
-              status: next?.status,
+              return next;
             });
-            logger.groupEnd();
-            return next;
           });
         } catch (err) {
-          logger.error("Failed to handle SSE event:", err);
           // Non-fatal: keep queue intact and continue
           // eslint-disable-next-line no-console
           console.error("Failed to handle SSE event:", err);
@@ -525,7 +416,6 @@ export function useJobDetailWithUpdates(jobId) {
         handleIncomingEvent("status:changed", evt);
       const onStateChange = (evt) => handleIncomingEvent("state:change", evt);
 
-      logger.log("Attaching SSE event listeners");
       es.addEventListener("open", onOpen);
       es.addEventListener("job:updated", onJobUpdated);
       es.addEventListener("job:created", onJobCreated);
@@ -536,15 +426,12 @@ export function useJobDetailWithUpdates(jobId) {
 
       // Set connection status from readyState when possible
       if (es.readyState === 1 && mountedRef.current) {
-        logger.log("SSE already open, setting connected");
         setConnectionStatus("connected");
       } else if (es.readyState === 0 && mountedRef.current) {
-        logger.log("SSE connecting, setting disconnected");
         setConnectionStatus("disconnected");
       }
 
       return () => {
-        logger.log("Cleaning up SSE connection");
         try {
           es.removeEventListener("open", onOpen);
           es.removeEventListener("job:updated", onJobUpdated);
@@ -554,9 +441,8 @@ export function useJobDetailWithUpdates(jobId) {
           es.removeEventListener("state:change", onStateChange);
           es.removeEventListener("error", onError);
           es.close();
-          logger.log("SSE connection closed");
         } catch (err) {
-          logger.error("Error during SSE cleanup:", err);
+          console.error("Error during SSE cleanup:", err);
         }
         if (reconnectTimer.current) {
           clearTimeout(reconnectTimer.current);
@@ -571,22 +457,19 @@ export function useJobDetailWithUpdates(jobId) {
       const eventsUrl = jobId
         ? `/api/events?jobId=${encodeURIComponent(jobId)}`
         : "/api/events";
-      logger.log(`Creating EventSource with URL: ${eventsUrl}`);
       const es = new EventSource(eventsUrl);
       esRef.current = es;
 
       const cleanup = attachListeners(es);
-      logger.groupEnd(); // End SSE Connection Setup group
       return cleanup;
     } catch (err) {
-      logger.error("Failed to create SSE connection:", err);
+      console.error("Failed to create SSE connection:", err);
       if (mountedRef.current) {
         setConnectionStatus("error");
       }
-      logger.groupEnd(); // End SSE Connection Setup group
       return undefined;
     }
-  }, [jobId, scheduleDebouncedRefetch, logger]);
+  }, [jobId, scheduleDebouncedRefetch]);
 
   // Mount/unmount lifecycle: ensure mountedRef is true on mount (StrictMode-safe)
   useEffect(() => {
@@ -615,5 +498,8 @@ export function useJobDetailWithUpdates(jobId) {
     loading,
     error,
     connectionStatus,
+    isRefreshing,
+    isTransitioning: isPending,
+    isHydrated,
   };
 }

package/src/ui/client/index.css

@@ -2,6 +2,20 @@
 @import "@radix-ui/themes/styles.css" layer(radix);
 @import "tailwindcss";
 
+.radix-themes {
+  --heading-font-family: "Source Sans 3", sans-serif;
+  --body-font-family: "Source Sans 3", sans-serif;
+  --cursor-button: pointer;
+  --cursor-checkbox: pointer;
+  --cursor-disabled: default;
+  --cursor-link: pointer;
+  --cursor-menu-item: pointer;
+  --cursor-radio: pointer;
+  --cursor-slider-thumb: grab;
+  --cursor-slider-thumb-active: grabbing;
+  --cursor-switch: pointer;
+}
+
 /* Reset and base styles */
 @layer base {
   * {
@@ -22,6 +36,7 @@ body {
   font-family: "Inter", sans-serif;
   line-height: 1.6;
   min-height: 100vh;
+  background-color: #dff2fe;
 }
 
 .container {

package/src/ui/client/index.html

@@ -6,10 +6,11 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
       rel="stylesheet"
     />
     <title>Prompt Pipeline Dashboard</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   </head>
   <body>
     <div id="root"></div>

package/src/ui/client/main.jsx

@@ -16,23 +16,28 @@ import ReactDOM from "react-dom/client";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import PromptPipelineDashboard from "@/pages/PromptPipelineDashboard.jsx";
 import PipelineDetail from "@/pages/PipelineDetail.jsx";
+import Code from "@/pages/Code.jsx";
 import { Theme } from "@radix-ui/themes";
+import { ToastProvider } from "@/components/ui/toast.jsx";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <Theme
-      accentColor="iris"
-      grayColor="gray"
-      panelBackground="solid"
-      scaling="100%"
-      radius="full"
-    >
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<PromptPipelineDashboard />} />
-          <Route path="/pipeline/:jobId" element={<PipelineDetail />} />
-        </Routes>
-      </BrowserRouter>
-    </Theme>
+    <ToastProvider>
+      <Theme
+        accentColor="iris"
+        grayColor="gray"
+        panelBackground="solid"
+        scaling="100%"
+        radius="full"
+      >
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<PromptPipelineDashboard />} />
+            <Route path="/pipeline/:jobId" element={<PipelineDetail />} />
+            <Route path="/code" element={<Code />} />
+          </Routes>
+        </BrowserRouter>
+      </Theme>
+    </ToastProvider>
   </React.StrictMode>
 );