automagik-forge 0.1.13 → 0.1.14

package/frontend/src/hooks/useNormalizedConversation.ts

@@ -1,440 +0,0 @@
-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

@@ -1,225 +0,0 @@
-@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;
-  }
-}