automagik-forge 0.1.11 → 0.1.13

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

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

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

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

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

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