automagik-forge 0.1.11 → 0.1.13

package/frontend/src/hooks/useNormalizedConversation.ts

@@ -0,0 +1,440 @@
+import {
+  TaskAttemptDataContext,
+  TaskDetailsContext,
+} from '@/components/context/taskDetailsContext';
+import { fetchEventSource } from '@microsoft/fetch-event-source';
+import { applyPatch } from 'fast-json-patch';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  ExecutionProcess,
+  NormalizedConversation,
+  NormalizedEntry,
+} from 'shared/types';
+
+const useNormalizedConversation = ({
+  executionProcess,
+  onConversationUpdate,
+  onDisplayEntriesChange,
+  visibleEntriesNum,
+}: {
+  executionProcess?: ExecutionProcess;
+  onConversationUpdate?: () => void;
+  onDisplayEntriesChange?: (num: number) => void;
+  visibleEntriesNum?: number;
+}) => {
+  const { projectId } = useContext(TaskDetailsContext);
+  const { attemptData } = useContext(TaskAttemptDataContext);
+
+  // Development-only logging helper
+  const debugLog = useCallback((message: string, ...args: any[]) => {
+    if (import.meta.env.DEV) {
+      console.log(message, ...args);
+    }
+  }, []);
+
+  const [conversation, setConversation] =
+    useState<NormalizedConversation | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Track fetched processes to prevent redundant database calls
+  const fetchedProcesses = useRef(new Set<string>());
+
+  // SSE Connection Manager - production-ready with reconnection and resilience
+  const sseManagerRef = useRef<{
+    abortController: AbortController | null;
+    isActive: boolean;
+    highestBatchId: number;
+    reconnectAttempts: number;
+    reconnectTimeout: number | null;
+    processId: string;
+    processStatus: string;
+    patchFailureCount: number;
+    onopenCalled: boolean;
+  }>({
+    abortController: null,
+    isActive: false,
+    highestBatchId: 0,
+    reconnectAttempts: 0,
+    reconnectTimeout: null,
+    processId: executionProcess?.id || '',
+    processStatus: executionProcess?.status || '',
+    patchFailureCount: 0,
+    onopenCalled: false,
+  });
+
+  // SSE Connection Manager with Production-Ready Resilience using fetch-event-source
+  const createSSEConnection = useCallback(
+    (processId: string, projectId: string): AbortController => {
+      const manager = sseManagerRef.current;
+      // Build URL with resume cursor if we have processed batches
+      const baseUrl = `/api/projects/${projectId}/execution-processes/${processId}/normalized-logs/stream`;
+      const url =
+        manager.highestBatchId > 0
+          ? `${baseUrl}?since_batch_id=${manager.highestBatchId}`
+          : baseUrl;
+      debugLog(
+        `🚀 SSE: Creating connection for process ${processId} (cursor: ${manager.highestBatchId})`
+      );
+
+      const abortController = new AbortController();
+
+      fetchEventSource(url, {
+        signal: abortController.signal,
+        onopen: async (response) => {
+          const manager = sseManagerRef.current;
+          if (manager.onopenCalled) {
+            // This is a "phantom" reconnect, so abort and re-create
+            debugLog(
+              '⚠️ SSE: onopen called again for same connection, forcing reconnect'
+            );
+            abortController.abort();
+            manager.abortController = null;
+            manager.isActive = false;
+            manager.onopenCalled = false;
+            // Re-establish with latest cursor
+            scheduleReconnect(processId, projectId);
+            return;
+          }
+          manager.onopenCalled = true;
+          if (response.ok) {
+            debugLog(`✅ SSE: Connected to ${processId}`);
+            manager.isActive = true;
+            manager.reconnectAttempts = 0; // Reset on successful connection
+            manager.patchFailureCount = 0; // Reset patch failure count
+
+            if (manager.reconnectTimeout) {
+              clearTimeout(manager.reconnectTimeout);
+              manager.reconnectTimeout = null;
+            }
+          } else {
+            throw new Error(`SSE connection failed: ${response.status}`);
+          }
+        },
+        onmessage: (event) => {
+          if (event.event === 'patch') {
+            try {
+              const batchData = JSON.parse(event.data);
+              const { batch_id, patches } = batchData;
+
+              // Skip duplicates - use manager's batch tracking
+              if (batch_id && batch_id <= manager.highestBatchId) {
+                debugLog(
+                  `⏭️ SSE: Skipping duplicate batch_id=${batch_id} (current=${manager.highestBatchId})`
+                );
+                return;
+              }
+
+              // Update cursor BEFORE processing
+              if (batch_id) {
+                manager.highestBatchId = batch_id;
+                debugLog(`📍 SSE: Processing batch_id=${batch_id}`);
+              }
+
+              setConversation((prev) => {
+                // Create empty conversation if none exists
+                const baseConversation = prev || {
+                  entries: [],
+                  session_id: null,
+                  executor_type: 'unknown',
+                  prompt: null,
+                  summary: null,
+                };
+
+                try {
+                  const updated = applyPatch(
+                    JSON.parse(JSON.stringify(baseConversation)),
+                    patches
+                  ).newDocument as NormalizedConversation;
+
+                  updated.entries = updated.entries.filter(Boolean);
+
+                  debugLog(
+                    `🔧 SSE: Applied batch_id=${batch_id}, entries: ${updated.entries.length}`
+                  );
+
+                  // Reset patch failure count on successful application
+                  manager.patchFailureCount = 0;
+
+                  // Clear loading state on first successful patch
+                  if (!prev) {
+                    setLoading(false);
+                    setError(null);
+                  }
+
+                  if (onConversationUpdate) {
+                    setTimeout(onConversationUpdate, 0);
+                  }
+
+                  return updated;
+                } catch (patchError) {
+                  console.warn('❌ SSE: Patch failed:', patchError);
+                  // Reset cursor on failure for potential retry
+                  if (batch_id && batch_id > 0) {
+                    manager.highestBatchId = batch_id - 1;
+                  }
+                  // Track patch failures for monitoring
+                  manager.patchFailureCount++;
+                  debugLog(
+                    `⚠️ SSE: Patch failure #${manager.patchFailureCount} for batch_id=${batch_id}`
+                  );
+                  return prev || baseConversation;
+                }
+              });
+            } catch (e) {
+              console.warn('❌ SSE: Parse failed:', e);
+            }
+          }
+        },
+        onerror: (err) => {
+          console.warn(`🔌 SSE: Connection error for ${processId}:`, err);
+          manager.isActive = false;
+
+          // Only attempt reconnection if process is still running
+          if (manager.processStatus === 'running') {
+            scheduleReconnect(processId, projectId);
+          }
+        },
+        onclose: () => {
+          debugLog(`🔌 SSE: Connection closed for ${processId}`);
+          manager.isActive = false;
+        },
+      }).catch((error) => {
+        if (error.name !== 'AbortError') {
+          console.warn(`❌ SSE: Fetch error for ${processId}:`, error);
+          manager.isActive = false;
+
+          // Only attempt reconnection if process is still running
+          if (manager.processStatus === 'running') {
+            scheduleReconnect(processId, projectId);
+          }
+        }
+      });
+
+      return abortController;
+    },
+    [onConversationUpdate, debugLog]
+  );
+
+  const scheduleReconnect = useCallback(
+    (processId: string, projectId: string) => {
+      const manager = sseManagerRef.current;
+
+      // Clear any existing reconnection timeout
+      if (manager.reconnectTimeout) {
+        clearTimeout(manager.reconnectTimeout);
+      }
+
+      // Exponential backoff: 1s, 2s, 4s, 8s, max 30s
+      const delay = Math.min(
+        1000 * Math.pow(2, manager.reconnectAttempts),
+        30000
+      );
+      manager.reconnectAttempts++;
+
+      debugLog(
+        `🔄 SSE: Scheduling reconnect attempt ${manager.reconnectAttempts} in ${delay}ms`
+      );
+
+      manager.reconnectTimeout = window.setTimeout(() => {
+        if (manager.processStatus === 'running') {
+          debugLog(`🔄 SSE: Attempting reconnect for ${processId}`);
+          establishSSEConnection(processId, projectId);
+        }
+      }, delay);
+    },
+    [debugLog]
+  );
+
+  const establishSSEConnection = useCallback(
+    (processId: string, projectId: string) => {
+      const manager = sseManagerRef.current;
+
+      // Close existing connection if any
+      if (manager.abortController) {
+        manager.abortController.abort();
+        manager.abortController = null;
+        manager.isActive = false;
+      }
+
+      const abortController = createSSEConnection(processId, projectId);
+      manager.abortController = abortController;
+
+      return abortController;
+    },
+    [createSSEConnection]
+  );
+
+  // Helper functions for SSE manager
+  const setProcessId = (id: string) => {
+    sseManagerRef.current.processId = id;
+  };
+  const setProcessStatus = (status: string) => {
+    sseManagerRef.current.processStatus = status;
+  };
+
+  // Consolidated cleanup function to avoid duplication
+  const cleanupSSEConnection = useCallback(() => {
+    const manager = sseManagerRef.current;
+
+    if (manager.abortController) {
+      manager.abortController.abort();
+      manager.abortController = null;
+      manager.isActive = false;
+    }
+
+    if (manager.reconnectTimeout) {
+      clearTimeout(manager.reconnectTimeout);
+      manager.reconnectTimeout = null;
+    }
+    manager.onopenCalled = false;
+  }, []);
+
+  // Process-based data fetching - fetch once from appropriate source
+  useEffect(() => {
+    if (!executionProcess?.id || !executionProcess?.status) {
+      return;
+    }
+    const processId = executionProcess.id;
+    const processStatus = executionProcess.status;
+
+    debugLog(`🎯 Data: Process ${processId} is ${processStatus}`);
+
+    // Reset conversation state when switching processes
+    const manager = sseManagerRef.current;
+    if (manager.processId !== processId) {
+      setConversation(null);
+      setLoading(true);
+      setError(null);
+
+      // Clear fetch tracking for old processes (keep memory bounded)
+      if (fetchedProcesses.current.size > 10) {
+        fetchedProcesses.current.clear();
+      }
+    }
+
+    if (processStatus === 'running') {
+      // Running processes: SSE will handle data (including initial state)
+      debugLog(`🚀 Data: Using SSE for running process ${processId}`);
+      // SSE connection will be established by the SSE management effect
+    } else {
+      // Completed processes: Single database fetch
+      debugLog(`📋 Data: Using database for completed process ${processId}`);
+      const logs = attemptData.allLogs.find(
+        (entry) => entry.id === executionProcess.id
+      )?.normalized_conversation;
+      if (logs) {
+        setConversation((prev) => {
+          // Only update if content actually changed - use lightweight comparison
+          if (
+            !prev ||
+            prev.entries.length !== logs.entries.length ||
+            prev.prompt !== logs.prompt
+          ) {
+            // Notify parent component of conversation update
+            if (onConversationUpdate) {
+              // Use setTimeout to ensure state update happens first
+              setTimeout(onConversationUpdate, 0);
+            }
+            return logs;
+          }
+          return prev;
+        });
+      }
+      setLoading(false);
+    }
+  }, [
+    executionProcess?.id,
+    executionProcess?.status,
+    attemptData.allLogs,
+    debugLog,
+    onConversationUpdate,
+  ]);
+
+  // SSE connection management for running processes only
+  useEffect(() => {
+    if (!executionProcess?.id || !executionProcess?.status) {
+      return;
+    }
+    const processId = executionProcess.id;
+    const processStatus = executionProcess.status;
+    const manager = sseManagerRef.current;
+
+    // Update manager state
+    setProcessId(processId);
+    setProcessStatus(processStatus);
+
+    // Only establish SSE for running processes
+    if (processStatus !== 'running') {
+      debugLog(
+        `🚫 SSE: Process ${processStatus}, cleaning up any existing connection`
+      );
+      cleanupSSEConnection();
+      return;
+    }
+
+    // Check if connection already exists for same process ID
+    if (manager.abortController && manager.processId === processId) {
+      debugLog(`⚠️  SSE: Connection already exists for ${processId}, reusing`);
+      return;
+    }
+
+    // Process changed - close existing and reset state
+    if (manager.abortController && manager.processId !== processId) {
+      debugLog(`🔄 SSE: Switching from ${manager.processId} to ${processId}`);
+      cleanupSSEConnection();
+      manager.highestBatchId = 0; // Reset cursor for new process
+      manager.reconnectAttempts = 0;
+      manager.patchFailureCount = 0; // Reset failure count for new process
+    }
+
+    // Update manager state
+    manager.processId = processId;
+    manager.processStatus = processStatus;
+
+    // Establish new connection
+    establishSSEConnection(processId, projectId);
+
+    return () => {
+      debugLog(`🔌 SSE: Cleanup connection for ${processId}`);
+
+      // Close connection if it belongs to this effect
+      if (manager.abortController && manager.processId === processId) {
+        cleanupSSEConnection();
+      }
+    };
+  }, [executionProcess?.id, executionProcess?.status]);
+
+  // Memoize display entries to avoid unnecessary re-renders
+  const displayEntries = useMemo(() => {
+    if (!conversation?.entries) return [];
+
+    // Filter out any null entries that may have been created by duplicate patch application
+    const displayEntries = conversation.entries.filter(
+      (entry): entry is NormalizedEntry =>
+        Boolean(entry && (entry as NormalizedEntry).entry_type)
+    );
+    onDisplayEntriesChange?.(displayEntries.length);
+    if (visibleEntriesNum && displayEntries.length > visibleEntriesNum) {
+      return displayEntries.slice(-visibleEntriesNum);
+    }
+
+    return displayEntries;
+  }, [conversation?.entries, onDisplayEntriesChange, visibleEntriesNum]);
+
+  return {
+    displayEntries,
+    conversation,
+    loading,
+    error,
+  };
+};
+
+export default useNormalizedConversation;

package/frontend/src/index.css

@@ -0,0 +1,225 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96%;
+    --accent-foreground: 222.2 84% 4.9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+
+    /* Status colors */
+    --success: 142.1 76.2% 36.3%;
+    --success-foreground: 138.5 76.5% 96.7%;
+    --warning: 32.2 95% 44.1%;
+    --warning-foreground: 26 83.3% 14.1%;
+    --info: 217.2 91.2% 59.8%;
+    --info-foreground: 222.2 84% 4.9%;
+    --neutral: 210 40% 96%;
+    --neutral-foreground: 222.2 84% 4.9%;
+
+    /* Status indicator colors */
+    --status-init: 210 40% 96%;
+    --status-init-foreground: 222.2 84% 4.9%;
+    --status-running: 217.2 91.2% 59.8%;
+    --status-running-foreground: 222.2 84% 4.9%;
+    --status-complete: 142.1 76.2% 36.3%;
+    --status-complete-foreground: 138.5 76.5% 96.7%;
+    --status-failed: 0 84.2% 60.2%;
+    --status-failed-foreground: 210 40% 98%;
+    --status-paused: 32.2 95% 44.1%;
+    --status-paused-foreground: 26 83.3% 14.1%;
+
+    /* Console/terminal colors */
+    --console-background: 222.2 84% 4.9%;
+    --console-foreground: 210 40% 98%;
+    --console-success: 138.5 76.5% 47.7%;
+    --console-error: 0 84.2% 60.2%;
+  }
+
+  .purple {
+    --background: 266 100% 6%;
+    --foreground: 266 20% 95%;
+    --card: 266 100% 6%;
+    --card-foreground: 266 20% 95%;
+    --popover: 266 100% 6%;
+    --popover-foreground: 266 20% 95%;
+    --primary: 266 80% 75%;
+    --primary-foreground: 266 100% 6%;
+    --secondary: 266 20% 15%;
+    --secondary-foreground: 266 20% 95%;
+    --muted: 266 20% 15%;
+    --muted-foreground: 266 15% 65%;
+    --accent: 266 20% 15%;
+    --accent-foreground: 266 20% 95%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 266 20% 95%;
+    --border: 266 20% 15%;
+    --input: 266 20% 15%;
+    --ring: 266 80% 75%;
+  }
+
+  .green {
+    --background: 120 100% 6%;
+    --foreground: 120 20% 95%;
+    --card: 120 100% 6%;
+    --card-foreground: 120 20% 95%;
+    --popover: 120 100% 6%;
+    --popover-foreground: 120 20% 95%;
+    --primary: 120 80% 75%;
+    --primary-foreground: 120 100% 6%;
+    --secondary: 120 20% 15%;
+    --secondary-foreground: 120 20% 95%;
+    --muted: 120 20% 15%;
+    --muted-foreground: 120 15% 65%;
+    --accent: 120 20% 15%;
+    --accent-foreground: 120 20% 95%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 120 20% 95%;
+    --border: 120 20% 15%;
+    --input: 120 20% 15%;
+    --ring: 120 80% 75%;
+  }
+
+  .blue {
+    --background: 210 100% 6%;
+    --foreground: 210 20% 95%;
+    --card: 210 100% 6%;
+    --card-foreground: 210 20% 95%;
+    --popover: 210 100% 6%;
+    --popover-foreground: 210 20% 95%;
+    --primary: 210 80% 75%;
+    --primary-foreground: 210 100% 6%;
+    --secondary: 210 20% 15%;
+    --secondary-foreground: 210 20% 95%;
+    --muted: 210 20% 15%;
+    --muted-foreground: 210 15% 65%;
+    --accent: 210 20% 15%;
+    --accent-foreground: 210 20% 95%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 95%;
+    --border: 210 20% 15%;
+    --input: 210 20% 15%;
+    --ring: 210 80% 75%;
+  }
+
+  .orange {
+    --background: 30 100% 6%;
+    --foreground: 30 20% 95%;
+    --card: 30 100% 6%;
+    --card-foreground: 30 20% 95%;
+    --popover: 30 100% 6%;
+    --popover-foreground: 30 20% 95%;
+    --primary: 30 80% 75%;
+    --primary-foreground: 30 100% 6%;
+    --secondary: 30 20% 15%;
+    --secondary-foreground: 30 20% 95%;
+    --muted: 30 20% 15%;
+    --muted-foreground: 30 15% 65%;
+    --accent: 30 20% 15%;
+    --accent-foreground: 30 20% 95%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 30 20% 95%;
+    --border: 30 20% 15%;
+    --input: 30 20% 15%;
+    --ring: 30 80% 75%;
+  }
+
+  .red {
+    --background: 0 100% 6%;
+    --foreground: 0 20% 95%;
+    --card: 0 100% 6%;
+    --card-foreground: 0 20% 95%;
+    --popover: 0 100% 6%;
+    --popover-foreground: 0 20% 95%;
+    --primary: 0 80% 75%;
+    --primary-foreground: 0 100% 6%;
+    --secondary: 0 20% 15%;
+    --secondary-foreground: 0 20% 95%;
+    --muted: 0 20% 15%;
+    --muted-foreground: 0 15% 65%;
+    --accent: 0 20% 15%;
+    --accent-foreground: 0 20% 95%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 20% 95%;
+    --border: 0 20% 15%;
+    --input: 0 20% 15%;
+    --ring: 0 80% 75%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+
+    /* Status colors */
+    --success: 138.5 76.5% 47.7%;
+    --success-foreground: 138.5 76.5% 96.7%;
+    --warning: 32.2 95% 44.1%;
+    --warning-foreground: 26 83.3% 14.1%;
+    --info: 217.2 91.2% 59.8%;
+    --info-foreground: 222.2 84% 4.9%;
+    --neutral: 217.2 32.6% 17.5%;
+    --neutral-foreground: 210 40% 98%;
+
+    /* Status indicator colors */
+    --status-init: 217.2 32.6% 17.5%;
+    --status-init-foreground: 210 40% 98%;
+    --status-running: 217.2 91.2% 59.8%;
+    --status-running-foreground: 222.2 84% 4.9%;
+    --status-complete: 138.5 76.5% 47.7%;
+    --status-complete-foreground: 138.5 76.5% 96.7%;
+    --status-failed: 0 62.8% 30.6%;
+    --status-failed-foreground: 210 40% 98%;
+    --status-paused: 32.2 95% 44.1%;
+    --status-paused-foreground: 26 83.3% 14.1%;
+
+    /* Console/terminal colors */
+    --console-background: 0 0% 0%;
+    --console-foreground: 138.5 76.5% 47.7%;
+    --console-success: 138.5 76.5% 47.7%;
+    --console-error: 0 84.2% 60.2%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}