automagik-forge 0.1.13 → 0.1.14

package/frontend/src/components/tasks/TaskDetails/LogsTab/NormalizedConversationViewer.tsx

@@ -1,92 +0,0 @@
-import { Hammer } from 'lucide-react';
-import { Loader } from '@/components/ui/loader.tsx';
-import MarkdownRenderer from '@/components/ui/markdown-renderer.tsx';
-import type { ExecutionProcess, WorktreeDiff } from 'shared/types.ts';
-import DisplayConversationEntry from '@/components/tasks/TaskDetails/DisplayConversationEntry.tsx';
-import useNormalizedConversation from '@/hooks/useNormalizedConversation';
-
-interface NormalizedConversationViewerProps {
-  executionProcess: ExecutionProcess;
-  onConversationUpdate?: () => void;
-  onDisplayEntriesChange?: (num: number) => void;
-  visibleEntriesNum?: number;
-  diff?: WorktreeDiff | null;
-  isBackgroundRefreshing?: boolean;
-  diffDeletable?: boolean;
-}
-
-export function NormalizedConversationViewer({
-  executionProcess,
-  diffDeletable,
-  onConversationUpdate,
-  visibleEntriesNum,
-  onDisplayEntriesChange,
-}: NormalizedConversationViewerProps) {
-  const { loading, error, conversation, displayEntries } =
-    useNormalizedConversation({
-      executionProcess,
-      onConversationUpdate,
-      onDisplayEntriesChange,
-      visibleEntriesNum,
-    });
-
-  if (loading) {
-    return (
-      <Loader message="Loading conversation..." size={24} className="py-4" />
-    );
-  }
-
-  if (error) {
-    return <div className="text-xs text-red-600 text-center">{error}</div>;
-  }
-
-  if (!conversation || conversation.entries.length === 0) {
-    // If the execution process is still running, show loading instead of "no data"
-    if (executionProcess.status === 'running') {
-      return (
-        <div className="text-xs text-muted-foreground italic text-center">
-          Waiting for logs...
-        </div>
-      );
-    }
-
-    return (
-      <div className="text-xs text-muted-foreground italic text-center">
-        No conversation data available
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      {/* Display prompt if available */}
-      {conversation.prompt && (
-        <div className="flex items-start gap-3">
-          <div className="flex-shrink-0 mt-1">
-            <Hammer className="h-4 w-4 text-blue-600" />
-          </div>
-          <div className="flex-1 min-w-0">
-            <div className="text-sm whitespace-pre-wrap text-foreground">
-              <MarkdownRenderer
-                content={conversation.prompt}
-                className="whitespace-pre-wrap break-words"
-              />
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Display conversation entries */}
-      <div className="space-y-2">
-        {displayEntries.map((entry, index) => (
-          <DisplayConversationEntry
-            key={entry.timestamp || index}
-            entry={entry}
-            index={index}
-            diffDeletable={diffDeletable}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}

package/frontend/src/components/tasks/TaskDetails/LogsTab/Prompt.tsx

@@ -1,22 +0,0 @@
-import MarkdownRenderer from '@/components/ui/markdown-renderer';
-import { Hammer } from 'lucide-react';
-
-const Prompt = ({ prompt }: { prompt: string }) => {
-  return (
-    <div className="flex items-start gap-3">
-      <div className="flex-shrink-0 mt-1">
-        <Hammer className="h-4 w-4 text-blue-600" />
-      </div>
-      <div className="flex-1 min-w-0">
-        <div className="text-sm whitespace-pre-wrap text-foreground">
-          <MarkdownRenderer
-            content={prompt}
-            className="whitespace-pre-wrap break-words"
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Prompt;

package/frontend/src/components/tasks/TaskDetails/LogsTab/SetupScriptRunning.tsx

@@ -1,49 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { ExecutionProcess } from 'shared/types.ts';
-
-type Props = {
-  setupProcessId: string | null;
-  runningProcessDetails: Record<string, ExecutionProcess>;
-};
-
-function SetupScriptRunning({ setupProcessId, runningProcessDetails }: Props) {
-  const setupScrollRef = useRef<HTMLDivElement>(null);
-
-  // Auto-scroll setup script logs to bottom
-  useEffect(() => {
-    if (setupScrollRef.current) {
-      setupScrollRef.current.scrollTop = setupScrollRef.current.scrollHeight;
-    }
-  }, [runningProcessDetails]);
-
-  const setupProcess = useMemo(
-    () =>
-      setupProcessId
-        ? runningProcessDetails[setupProcessId]
-        : Object.values(runningProcessDetails).find(
-            (process) => process.process_type === 'setupscript'
-          ),
-    [setupProcessId, runningProcessDetails]
-  );
-
-  return (
-    <div ref={setupScrollRef} className="h-full overflow-y-auto">
-      <div className="mb-4">
-        <p className="text-lg font-semibold mb-2">Setup Script Running</p>
-        <p className="text-muted-foreground mb-4">
-          Preparing the environment for the coding agent...
-        </p>
-      </div>
-
-      {setupProcess && (
-        <div className="font-mono text-sm whitespace-pre-wrap text-muted-foreground">
-          {[setupProcess.stdout || '', setupProcess.stderr || '']
-            .filter(Boolean)
-            .join('\n') || 'Waiting for setup script output...'}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default SetupScriptRunning;

package/frontend/src/components/tasks/TaskDetails/LogsTab.tsx

@@ -1,186 +0,0 @@
-import { useContext } from 'react';
-import { MessageSquare } from 'lucide-react';
-import { NormalizedConversationViewer } from '@/components/tasks/TaskDetails/LogsTab/NormalizedConversationViewer.tsx';
-import {
-  TaskAttemptDataContext,
-  TaskAttemptLoadingContext,
-  TaskExecutionStateContext,
-  TaskSelectedAttemptContext,
-} from '@/components/context/taskDetailsContext.ts';
-import Conversation from '@/components/tasks/TaskDetails/LogsTab/Conversation.tsx';
-import { Loader } from '@/components/ui/loader';
-import SetupScriptRunning from '@/components/tasks/TaskDetails/LogsTab/SetupScriptRunning.tsx';
-
-function LogsTab() {
-  const { loading } = useContext(TaskAttemptLoadingContext);
-  const { executionState } = useContext(TaskExecutionStateContext);
-  const { selectedAttempt } = useContext(TaskSelectedAttemptContext);
-  const { attemptData } = useContext(TaskAttemptDataContext);
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <Loader message="Loading..." size={32} />
-      </div>
-    );
-  }
-
-  // If no attempt is selected, show message
-  if (!selectedAttempt) {
-    return (
-      <div className="text-center py-8 text-muted-foreground">
-        <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
-        <p className="text-lg font-medium mb-2">No attempt selected</p>
-        <p className="text-sm">Select an attempt to view its logs</p>
-      </div>
-    );
-  }
-
-  // If no execution state, execution hasn't started yet
-  if (!executionState) {
-    return (
-      <div className="text-center py-8 text-muted-foreground">
-        <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
-        <p className="text-lg font-medium mb-2">
-          Task execution not started yet
-        </p>
-        <p className="text-sm">
-          Logs will appear here once the task execution begins
-        </p>
-      </div>
-    );
-  }
-
-  const isSetupRunning = executionState.execution_state === 'SetupRunning';
-  const isSetupComplete = executionState.execution_state === 'SetupComplete';
-  const isSetupFailed = executionState.execution_state === 'SetupFailed';
-  const isSetupStopped = executionState.execution_state === 'SetupStopped';
-  const isCodingAgentRunning =
-    executionState.execution_state === 'CodingAgentRunning';
-  const isCodingAgentComplete =
-    executionState.execution_state === 'CodingAgentComplete';
-  const isCodingAgentFailed =
-    executionState.execution_state === 'CodingAgentFailed';
-  const isCodingAgentStopped =
-    executionState.execution_state === 'CodingAgentStopped';
-  const isComplete = executionState.execution_state === 'Complete';
-  const hasChanges = executionState.has_changes;
-
-  // When setup script is running, show setup execution stdio
-  if (isSetupRunning) {
-    return (
-      <SetupScriptRunning
-        setupProcessId={executionState.setup_process_id}
-        runningProcessDetails={attemptData.runningProcessDetails}
-      />
-    );
-  }
-
-  // When setup failed or was stopped
-  if (isSetupFailed || isSetupStopped) {
-    let setupProcess = executionState.setup_process_id
-      ? attemptData.runningProcessDetails[executionState.setup_process_id]
-      : Object.values(attemptData.runningProcessDetails).find(
-          (process) => process.process_type === 'setupscript'
-        );
-
-    // If not found in runningProcessDetails, try to find in processes array
-    if (!setupProcess) {
-      const setupSummary = attemptData.processes.find(
-        (process) => process.process_type === 'setupscript'
-      );
-
-      if (setupSummary) {
-        setupProcess = Object.values(attemptData.runningProcessDetails).find(
-          (process) => process.id === setupSummary.id
-        );
-
-        if (!setupProcess) {
-          setupProcess = {
-            ...setupSummary,
-            stdout: null,
-            stderr: null,
-          } as any;
-        }
-      }
-    }
-
-    return (
-      <div className="h-full overflow-y-auto">
-        <div className="mb-4">
-          <p
-            className={`text-lg font-semibold mb-2 ${isSetupFailed ? 'text-destructive' : ''}`}
-          >
-            {isSetupFailed ? 'Setup Script Failed' : 'Setup Script Stopped'}
-          </p>
-          {isSetupFailed && (
-            <p className="text-muted-foreground mb-4">
-              The setup script encountered an error. Error details below:
-            </p>
-          )}
-        </div>
-
-        {setupProcess && (
-          <NormalizedConversationViewer executionProcess={setupProcess} />
-        )}
-      </div>
-    );
-  }
-
-  // When coding agent is in any state (running, complete, failed, stopped)
-  if (
-    isCodingAgentRunning ||
-    isCodingAgentComplete ||
-    isCodingAgentFailed ||
-    isCodingAgentStopped ||
-    hasChanges
-  ) {
-    return <Conversation />;
-  }
-
-  // When setup is complete but coding agent hasn't started, show waiting state
-  if (
-    isSetupComplete &&
-    !isCodingAgentRunning &&
-    !isCodingAgentComplete &&
-    !isCodingAgentFailed &&
-    !isCodingAgentStopped &&
-    !hasChanges
-  ) {
-    return (
-      <div className="text-center py-8 text-muted-foreground">
-        <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
-        <p className="text-lg font-semibold mb-2">Setup Complete</p>
-        <p>Waiting for coding agent to start...</p>
-      </div>
-    );
-  }
-
-  // When task is complete, show completion message
-  if (isComplete) {
-    return (
-      <div className="text-center py-8 text-green-600">
-        <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
-        <p className="text-lg font-semibold mb-2">Task Complete</p>
-        <p className="text-muted-foreground">
-          The task has been completed successfully.
-        </p>
-      </div>
-    );
-  }
-
-  // When coding agent is running or complete, show conversation
-  if (isCodingAgentRunning || isCodingAgentComplete || hasChanges) {
-    return <Conversation />;
-  }
-
-  // Default case - unexpected state
-  return (
-    <div className="text-center py-8 text-muted-foreground">
-      <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
-      <p>Unknown execution state</p>
-    </div>
-  );
-}
-
-export default LogsTab;

package/frontend/src/components/tasks/TaskDetails/ProcessesTab.tsx

@@ -1,288 +0,0 @@
-import { useContext, useState } from 'react';
-import {
-  Play,
-  Square,
-  AlertCircle,
-  CheckCircle,
-  Clock,
-  Cog,
-  ArrowLeft,
-} from 'lucide-react';
-import { TaskAttemptDataContext } from '@/components/context/taskDetailsContext.ts';
-import { executionProcessesApi } from '@/lib/api.ts';
-import type {
-  ExecutionProcessStatus,
-  ExecutionProcessSummary,
-} from 'shared/types.ts';
-
-function ProcessesTab() {
-  const { attemptData, setAttemptData } = useContext(TaskAttemptDataContext);
-  const [selectedProcessId, setSelectedProcessId] = useState<string | null>(
-    null
-  );
-  const [loadingProcessId, setLoadingProcessId] = useState<string | null>(null);
-
-  const getStatusIcon = (status: ExecutionProcessStatus) => {
-    switch (status) {
-      case 'running':
-        return <Play className="h-4 w-4 text-blue-500" />;
-      case 'completed':
-        return <CheckCircle className="h-4 w-4 text-green-500" />;
-      case 'failed':
-        return <AlertCircle className="h-4 w-4 text-red-500" />;
-      case 'killed':
-        return <Square className="h-4 w-4 text-gray-500" />;
-      default:
-        return <Clock className="h-4 w-4 text-gray-400" />;
-    }
-  };
-
-  const getStatusColor = (status: ExecutionProcessStatus) => {
-    switch (status) {
-      case 'running':
-        return 'bg-blue-50 border-blue-200 text-blue-800';
-      case 'completed':
-        return 'bg-green-50 border-green-200 text-green-800';
-      case 'failed':
-        return 'bg-red-50 border-red-200 text-red-800';
-      case 'killed':
-        return 'bg-gray-50 border-gray-200 text-gray-800';
-      default:
-        return 'bg-gray-50 border-gray-200 text-gray-800';
-    }
-  };
-
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleString();
-  };
-
-  const fetchProcessDetails = async (processId: string) => {
-    try {
-      setLoadingProcessId(processId);
-      const result = await executionProcessesApi.getDetails(processId);
-
-      if (result !== undefined) {
-        setAttemptData((prev) => ({
-          ...prev,
-          runningProcessDetails: {
-            ...prev.runningProcessDetails,
-            [processId]: result,
-          },
-        }));
-      }
-    } catch (err) {
-      console.error('Failed to fetch process details:', err);
-    } finally {
-      setLoadingProcessId(null);
-    }
-  };
-
-  const handleProcessClick = async (process: ExecutionProcessSummary) => {
-    setSelectedProcessId(process.id);
-
-    // If we don't have details for this process, fetch them
-    if (!attemptData.runningProcessDetails[process.id]) {
-      await fetchProcessDetails(process.id);
-    }
-  };
-
-  const selectedProcess = selectedProcessId
-    ? attemptData.runningProcessDetails[selectedProcessId]
-    : null;
-
-  if (!attemptData.processes || attemptData.processes.length === 0) {
-    return (
-      <div className="flex-1 flex items-center justify-center text-muted-foreground">
-        <div className="text-center">
-          <Cog className="h-12 w-12 mx-auto mb-4 opacity-50" />
-          <p>No execution processes found for this attempt.</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex-1 flex flex-col min-h-0">
-      {!selectedProcessId ? (
-        <div className="flex-1 overflow-auto px-4 pb-20">
-          <div className="space-y-3">
-            {attemptData.processes.map((process) => (
-              <div
-                key={process.id}
-                className={`border rounded-lg p-4 hover:bg-muted/30 cursor-pointer transition-colors ${
-                  loadingProcessId === process.id
-                    ? 'opacity-50 cursor-wait'
-                    : ''
-                }`}
-                onClick={() => handleProcessClick(process)}
-              >
-                <div className="flex items-start justify-between">
-                  <div className="flex items-center space-x-3">
-                    {getStatusIcon(process.status)}
-                    <div>
-                      <h3 className="font-medium text-sm">
-                        {process.process_type}
-                        {process.executor_type && (
-                          <span className="text-muted-foreground">
-                            {' '}
-                            ({process.executor_type})
-                          </span>
-                        )}
-                      </h3>
-                      <p className="text-sm text-muted-foreground mt-1">
-                        {process.command}
-                      </p>
-                      {process.args && (
-                        <p className="text-xs text-muted-foreground mt-1">
-                          Args: {process.args}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                  <div className="text-right">
-                    <span
-                      className={`inline-block px-2 py-1 text-xs font-medium border rounded-full ${getStatusColor(
-                        process.status
-                      )}`}
-                    >
-                      {process.status}
-                    </span>
-                    {process.exit_code !== null && (
-                      <p className="text-xs text-muted-foreground mt-1">
-                        Exit: {process.exit_code.toString()}
-                      </p>
-                    )}
-                  </div>
-                </div>
-                <div className="mt-3 text-xs text-muted-foreground">
-                  <div className="flex justify-between">
-                    <span>Started: {formatDate(process.started_at)}</span>
-                    {process.completed_at && (
-                      <span>Completed: {formatDate(process.completed_at)}</span>
-                    )}
-                  </div>
-                  <div className="mt-1">
-                    Working directory: {process.working_directory}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      ) : (
-        <div className="flex-1 flex flex-col min-h-0">
-          <div className="flex items-center justify-between p-4 border-b flex-shrink-0">
-            <h2 className="text-lg font-semibold">Process Details</h2>
-            <button
-              onClick={() => setSelectedProcessId(null)}
-              className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded-md border border-border transition-colors"
-            >
-              <ArrowLeft className="h-4 w-4" />
-              Back to list
-            </button>
-          </div>
-          <div className="flex-1 overflow-y-auto p-4 pb-20">
-            {selectedProcess ? (
-              <div className="space-y-4">
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <h3 className="font-medium text-sm mb-2">Process Info</h3>
-                    <div className="space-y-1 text-sm">
-                      <p>
-                        <span className="font-medium">Type:</span>{' '}
-                        {selectedProcess.process_type}
-                      </p>
-                      <p>
-                        <span className="font-medium">Status:</span>{' '}
-                        {selectedProcess.status}
-                      </p>
-                      {selectedProcess.executor_type && (
-                        <p>
-                          <span className="font-medium">Executor:</span>{' '}
-                          {selectedProcess.executor_type}
-                        </p>
-                      )}
-                      <p>
-                        <span className="font-medium">Exit Code:</span>{' '}
-                        {selectedProcess.exit_code?.toString() ?? 'N/A'}
-                      </p>
-                    </div>
-                  </div>
-                  <div>
-                    <h3 className="font-medium text-sm mb-2">Timing</h3>
-                    <div className="space-y-1 text-sm">
-                      <p>
-                        <span className="font-medium">Started:</span>{' '}
-                        {formatDate(selectedProcess.started_at)}
-                      </p>
-                      {selectedProcess.completed_at && (
-                        <p>
-                          <span className="font-medium">Completed:</span>{' '}
-                          {formatDate(selectedProcess.completed_at)}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                </div>
-
-                <div>
-                  <h3 className="font-medium text-sm mb-2">Command</h3>
-                  <div className="bg-muted/50 p-3 rounded-md font-mono text-sm">
-                    {selectedProcess.command}
-                    {selectedProcess.args && (
-                      <div className="mt-1 text-muted-foreground">
-                        Args: {selectedProcess.args}
-                      </div>
-                    )}
-                  </div>
-                </div>
-
-                <div>
-                  <h3 className="font-medium text-sm mb-2">
-                    Working Directory
-                  </h3>
-                  <div className="bg-muted/50 p-3 rounded-md font-mono text-sm">
-                    {selectedProcess.working_directory}
-                  </div>
-                </div>
-
-                {selectedProcess.stdout && (
-                  <div>
-                    <h3 className="font-medium text-sm mb-2">Stdout</h3>
-                    <div className="bg-black text-green-400 p-3 rounded-md font-mono text-sm h-64 overflow-auto">
-                      <pre className="whitespace-pre-wrap">
-                        {selectedProcess.stdout}
-                      </pre>
-                    </div>
-                  </div>
-                )}
-
-                {selectedProcess.stderr && (
-                  <div>
-                    <h3 className="font-medium text-sm mb-2">Stderr</h3>
-                    <div className="bg-black text-red-400 p-3 rounded-md font-mono text-sm h-64 overflow-auto">
-                      <pre className="whitespace-pre-wrap">
-                        {selectedProcess.stderr}
-                      </pre>
-                    </div>
-                  </div>
-                )}
-              </div>
-            ) : loadingProcessId === selectedProcessId ? (
-              <div className="text-center text-muted-foreground">
-                <p>Loading process details...</p>
-              </div>
-            ) : (
-              <div className="text-center text-muted-foreground">
-                <p>Failed to load process details. Please try again.</p>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default ProcessesTab;