automagik-forge 0.1.13 → 0.1.14

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

@@ -1,392 +0,0 @@
-import { useContext, useMemo, useState } from 'react';
-import { DiffCard } from './DiffCard';
-import MarkdownRenderer from '@/components/ui/markdown-renderer.tsx';
-import {
-  AlertCircle,
-  Bot,
-  Brain,
-  CheckSquare,
-  ChevronRight,
-  ChevronUp,
-  Edit,
-  Eye,
-  Globe,
-  Plus,
-  Search,
-  Settings,
-  Terminal,
-  User,
-} from 'lucide-react';
-import {
-  NormalizedEntry,
-  type NormalizedEntryType,
-  type WorktreeDiff,
-} from 'shared/types.ts';
-import { TaskDiffContext } from '@/components/context/taskDetailsContext.ts';
-
-type Props = {
-  entry: NormalizedEntry;
-  index: number;
-  diffDeletable?: boolean;
-};
-
-const getEntryIcon = (entryType: NormalizedEntryType) => {
-  if (entryType.type === 'user_message') {
-    return <User className="h-4 w-4 text-blue-600" />;
-  }
-  if (entryType.type === 'assistant_message') {
-    return <Bot className="h-4 w-4 text-green-600" />;
-  }
-  if (entryType.type === 'system_message') {
-    return <Settings className="h-4 w-4 text-gray-600" />;
-  }
-  if (entryType.type === 'thinking') {
-    return <Brain className="h-4 w-4 text-purple-600" />;
-  }
-  if (entryType.type === 'error_message') {
-    return <AlertCircle className="h-4 w-4 text-red-600" />;
-  }
-  if (entryType.type === 'tool_use') {
-    const { action_type, tool_name } = entryType;
-
-    // Special handling for TODO tools
-    if (
-      tool_name &&
-      (tool_name.toLowerCase() === 'todowrite' ||
-        tool_name.toLowerCase() === 'todoread' ||
-        tool_name.toLowerCase() === 'todo_write' ||
-        tool_name.toLowerCase() === 'todo_read')
-    ) {
-      return <CheckSquare className="h-4 w-4 text-purple-600" />;
-    }
-
-    if (action_type.action === 'file_read') {
-      return <Eye className="h-4 w-4 text-orange-600" />;
-    }
-    if (action_type.action === 'file_write') {
-      return <Edit className="h-4 w-4 text-red-600" />;
-    }
-    if (action_type.action === 'command_run') {
-      return <Terminal className="h-4 w-4 text-yellow-600" />;
-    }
-    if (action_type.action === 'search') {
-      return <Search className="h-4 w-4 text-indigo-600" />;
-    }
-    if (action_type.action === 'web_fetch') {
-      return <Globe className="h-4 w-4 text-cyan-600" />;
-    }
-    if (action_type.action === 'task_create') {
-      return <Plus className="h-4 w-4 text-teal-600" />;
-    }
-    if (action_type.action === 'plan_presentation') {
-      return <CheckSquare className="h-4 w-4 text-blue-600" />;
-    }
-    return <Settings className="h-4 w-4 text-gray-600" />;
-  }
-  return <Settings className="h-4 w-4 text-gray-400" />;
-};
-
-const getContentClassName = (entryType: NormalizedEntryType) => {
-  const baseClasses = 'text-sm whitespace-pre-wrap break-words';
-
-  if (
-    entryType.type === 'tool_use' &&
-    entryType.action_type.action === 'command_run'
-  ) {
-    return `${baseClasses} font-mono`;
-  }
-
-  if (entryType.type === 'error_message') {
-    return `${baseClasses} text-red-600 font-mono bg-red-50 dark:bg-red-950/20 px-2 py-1 rounded`;
-  }
-
-  // Special styling for TODO lists
-  if (
-    entryType.type === 'tool_use' &&
-    entryType.tool_name &&
-    (entryType.tool_name.toLowerCase() === 'todowrite' ||
-      entryType.tool_name.toLowerCase() === 'todoread' ||
-      entryType.tool_name.toLowerCase() === 'todo_write' ||
-      entryType.tool_name.toLowerCase() === 'todo_read')
-  ) {
-    return `${baseClasses} font-mono text-purple-700 dark:text-purple-300 bg-purple-50 dark:bg-purple-950/20 px-2 py-1 rounded`;
-  }
-
-  // Special styling for plan presentations
-  if (
-    entryType.type === 'tool_use' &&
-    entryType.action_type.action === 'plan_presentation'
-  ) {
-    return `${baseClasses} text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/20 px-3 py-2 rounded-md border-l-4 border-blue-400`;
-  }
-
-  return baseClasses;
-};
-
-// Parse file path from content (handles various formats)
-const parseFilePathFromContent = (content: string): string | null => {
-  // Try to extract path from backticks: `path/to/file.ext`
-  const backtickMatch = content.match(/`([^`]+)`/);
-  if (backtickMatch) {
-    return backtickMatch[1];
-  }
-
-  // Try to extract from common patterns like "Edit file: path" or "Write file: path"
-  const actionMatch = content.match(
-    /(?:Edit|Write|Create)\s+file:\s*([^\s\n]+)/i
-  );
-  if (actionMatch) {
-    return actionMatch[1];
-  }
-
-  return null;
-};
-
-// Helper function to determine if a tool call modifies files
-const isFileModificationToolCall = (
-  entryType: NormalizedEntryType
-): boolean => {
-  if (entryType.type !== 'tool_use') {
-    return false;
-  }
-
-  // Check for direct file write action
-  if (entryType.action_type.action === 'file_write') {
-    return true;
-  }
-
-  // Check for "other" actions that are file modification tools
-  if (entryType.action_type.action === 'other') {
-    const fileModificationTools = [
-      'edit',
-      'write',
-      'create_file',
-      'multiedit',
-      'edit_file',
-    ];
-    return fileModificationTools.includes(
-      entryType.tool_name?.toLowerCase() || ''
-    );
-  }
-
-  return false;
-};
-
-// Extract file path from tool call
-const extractFilePathFromToolCall = (entry: NormalizedEntry): string | null => {
-  if (entry.entry_type.type !== 'tool_use') {
-    return null;
-  }
-
-  const { action_type, tool_name } = entry.entry_type;
-
-  // Direct path extraction from action_type
-  if (action_type.action === 'file_write') {
-    return action_type.path || null;
-  }
-
-  // For "other" actions, check if it's a known file modification tool
-  if (action_type.action === 'other') {
-    const fileModificationTools = [
-      'edit',
-      'write',
-      'create_file',
-      'multiedit',
-      'edit_file',
-    ];
-
-    if (fileModificationTools.includes(tool_name.toLowerCase())) {
-      // Parse file path from content field
-      return parseFilePathFromContent(entry.content);
-    }
-  }
-
-  return null;
-};
-
-// Create filtered diff showing only specific files
-const createIncrementalDiff = (
-  fullDiff: WorktreeDiff | null,
-  targetFilePaths: string[]
-): WorktreeDiff | null => {
-  if (!fullDiff || targetFilePaths.length === 0) {
-    return null;
-  }
-
-  // Filter files to only include the target file paths
-  const filteredFiles = fullDiff.files.filter((file) =>
-    targetFilePaths.some(
-      (targetPath) =>
-        file.path === targetPath ||
-        file.path.endsWith('/' + targetPath) ||
-        targetPath.endsWith('/' + file.path)
-    )
-  );
-
-  if (filteredFiles.length === 0) {
-    return null;
-  }
-
-  return {
-    ...fullDiff,
-    files: filteredFiles,
-  };
-};
-
-// Helper function to determine if content should be rendered as markdown
-const shouldRenderMarkdown = (entryType: NormalizedEntryType) => {
-  // Render markdown for assistant messages, plan presentations, and tool outputs that contain backticks
-  return (
-    entryType.type === 'assistant_message' ||
-    (entryType.type === 'tool_use' &&
-      entryType.action_type.action === 'plan_presentation') ||
-    (entryType.type === 'tool_use' &&
-      entryType.tool_name &&
-      (entryType.tool_name.toLowerCase() === 'todowrite' ||
-        entryType.tool_name.toLowerCase() === 'todoread' ||
-        entryType.tool_name.toLowerCase() === 'todo_write' ||
-        entryType.tool_name.toLowerCase() === 'todo_read' ||
-        entryType.tool_name.toLowerCase() === 'glob' ||
-        entryType.tool_name.toLowerCase() === 'ls' ||
-        entryType.tool_name.toLowerCase() === 'list_directory' ||
-        entryType.tool_name.toLowerCase() === 'read' ||
-        entryType.tool_name.toLowerCase() === 'read_file' ||
-        entryType.tool_name.toLowerCase() === 'write' ||
-        entryType.tool_name.toLowerCase() === 'create_file' ||
-        entryType.tool_name.toLowerCase() === 'edit' ||
-        entryType.tool_name.toLowerCase() === 'edit_file' ||
-        entryType.tool_name.toLowerCase() === 'multiedit' ||
-        entryType.tool_name.toLowerCase() === 'bash' ||
-        entryType.tool_name.toLowerCase() === 'run_command' ||
-        entryType.tool_name.toLowerCase() === 'grep' ||
-        entryType.tool_name.toLowerCase() === 'search' ||
-        entryType.tool_name.toLowerCase() === 'webfetch' ||
-        entryType.tool_name.toLowerCase() === 'web_fetch' ||
-        entryType.tool_name.toLowerCase() === 'task'))
-  );
-};
-
-function DisplayConversationEntry({ entry, index, diffDeletable }: Props) {
-  const { diff } = useContext(TaskDiffContext);
-  const [expandedErrors, setExpandedErrors] = useState<Set<number>>(new Set());
-
-  const toggleErrorExpansion = (index: number) => {
-    setExpandedErrors((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(index)) {
-        newSet.delete(index);
-      } else {
-        newSet.add(index);
-      }
-      return newSet;
-    });
-  };
-
-  const isErrorMessage = entry.entry_type.type === 'error_message';
-  const isExpanded = expandedErrors.has(index);
-  const hasMultipleLines = isErrorMessage && entry.content.includes('\n');
-  const isFileModification = useMemo(
-    () => isFileModificationToolCall(entry.entry_type),
-    [entry.entry_type]
-  );
-
-  // Extract file path from this specific tool call
-  const modifiedFilePath = useMemo(
-    () => (isFileModification ? extractFilePathFromToolCall(entry) : null),
-    [isFileModification, entry]
-  );
-
-  // Create incremental diff showing only the files modified by this specific tool call
-  const incrementalDiff = useMemo(
-    () =>
-      modifiedFilePath && diff
-        ? createIncrementalDiff(diff, [modifiedFilePath])
-        : null,
-    [modifiedFilePath, diff]
-  );
-
-  // Show incremental diff for this specific file modification
-  const shouldShowDiff =
-    isFileModification && incrementalDiff && incrementalDiff.files.length > 0;
-
-  return (
-    <div key={index}>
-      <div className="flex items-start gap-3">
-        <div className="flex-shrink-0 mt-1">
-          {isErrorMessage && hasMultipleLines ? (
-            <button
-              onClick={() => toggleErrorExpansion(index)}
-              className="transition-colors hover:opacity-70"
-            >
-              {getEntryIcon(entry.entry_type)}
-            </button>
-          ) : (
-            getEntryIcon(entry.entry_type)
-          )}
-        </div>
-        <div className="flex-1 min-w-0">
-          {isErrorMessage && hasMultipleLines ? (
-            <div className={isExpanded ? 'space-y-2' : ''}>
-              <div className={getContentClassName(entry.entry_type)}>
-                {isExpanded ? (
-                  shouldRenderMarkdown(entry.entry_type) ? (
-                    <MarkdownRenderer
-                      content={entry.content}
-                      className="whitespace-pre-wrap break-words"
-                    />
-                  ) : (
-                    entry.content
-                  )
-                ) : (
-                  <>
-                    {entry.content.split('\n')[0]}
-                    <button
-                      onClick={() => toggleErrorExpansion(index)}
-                      className="ml-2 inline-flex items-center gap-1 text-xs text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
-                    >
-                      <ChevronRight className="h-3 w-3" />
-                      Show more
-                    </button>
-                  </>
-                )}
-              </div>
-              {isExpanded && (
-                <button
-                  onClick={() => toggleErrorExpansion(index)}
-                  className="flex items-center gap-1 text-xs text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
-                >
-                  <ChevronUp className="h-3 w-3" />
-                  Show less
-                </button>
-              )}
-            </div>
-          ) : (
-            <div className={getContentClassName(entry.entry_type)}>
-              {shouldRenderMarkdown(entry.entry_type) ? (
-                <MarkdownRenderer
-                  content={entry.content}
-                  className="whitespace-pre-wrap break-words"
-                />
-              ) : (
-                entry.content
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Render incremental diff card inline after file modification entries */}
-      {shouldShowDiff && incrementalDiff && (
-        <div className="mt-4 mb-2">
-          <DiffCard
-            diff={incrementalDiff}
-            deletable={diffDeletable}
-            compact={true}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default DisplayConversationEntry;

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

@@ -1,256 +0,0 @@
-import { NormalizedConversationViewer } from '@/components/tasks/TaskDetails/LogsTab/NormalizedConversationViewer.tsx';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { TaskAttemptDataContext } from '@/components/context/taskDetailsContext.ts';
-import { Loader } from '@/components/ui/loader.tsx';
-import { Button } from '@/components/ui/button';
-import Prompt from './Prompt';
-import ConversationEntry from './ConversationEntry';
-import { ConversationEntryDisplayType } from '@/lib/types';
-
-function Conversation() {
-  const { attemptData } = useContext(TaskAttemptDataContext);
-  const [shouldAutoScrollLogs, setShouldAutoScrollLogs] = useState(true);
-  const [conversationUpdateTrigger, setConversationUpdateTrigger] = useState(0);
-  const [visibleCount, setVisibleCount] = useState(100);
-  const [visibleRunningEntriesCount, setVisibleRunningEntriesCount] =
-    useState(0);
-
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-
-  // Callback to trigger auto-scroll when conversation updates
-  const handleConversationUpdate = useCallback(() => {
-    setConversationUpdateTrigger((prev) => prev + 1);
-  }, []);
-
-  useEffect(() => {
-    if (shouldAutoScrollLogs && scrollContainerRef.current) {
-      scrollContainerRef.current.scrollTop =
-        scrollContainerRef.current.scrollHeight;
-    }
-  }, [attemptData.allLogs, conversationUpdateTrigger, shouldAutoScrollLogs]);
-
-  const handleLogsScroll = useCallback(() => {
-    if (scrollContainerRef.current) {
-      const { scrollTop, scrollHeight, clientHeight } =
-        scrollContainerRef.current;
-      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 5;
-
-      if (isAtBottom && !shouldAutoScrollLogs) {
-        setShouldAutoScrollLogs(true);
-      } else if (!isAtBottom && shouldAutoScrollLogs) {
-        setShouldAutoScrollLogs(false);
-      }
-    }
-  }, [shouldAutoScrollLogs]);
-
-  // Find main and follow-up processes from allLogs
-  const mainCodingAgentLog = useMemo(
-    () =>
-      attemptData.allLogs.find(
-        (log) =>
-          log.process_type.toLowerCase() === 'codingagent' &&
-          log.command === 'executor'
-      ),
-    [attemptData.allLogs]
-  );
-  const followUpLogs = useMemo(
-    () =>
-      attemptData.allLogs.filter(
-        (log) =>
-          log.process_type.toLowerCase() === 'codingagent' &&
-          log.command === 'followup_executor'
-      ),
-    [attemptData.allLogs]
-  );
-
-  // Combine all logs in order (main first, then follow-ups)
-  const allProcessLogs = useMemo(
-    () =>
-      [mainCodingAgentLog, ...followUpLogs].filter(Boolean) as Array<
-        NonNullable<typeof mainCodingAgentLog>
-      >,
-    [mainCodingAgentLog, followUpLogs]
-  );
-
-  // Flatten all entries, keeping process info for each entry
-  const allEntries = useMemo(() => {
-    const entries: Array<ConversationEntryDisplayType> = [];
-    allProcessLogs.forEach((log, processIndex) => {
-      if (!log) return;
-      if (log.status === 'running') return; // Skip static entries for running processes
-      const processId = String(log.id); // Ensure string
-      const processPrompt = log.normalized_conversation.prompt || undefined; // Ensure undefined, not null
-      const entriesArr = log.normalized_conversation.entries || [];
-      entriesArr.forEach((entry, entryIndex) => {
-        entries.push({
-          entry,
-          processId,
-          processPrompt,
-          processStatus: log.status,
-          processIsRunning: false, // Only completed processes here
-          process: log,
-          isFirstInProcess: entryIndex === 0,
-          processIndex,
-          entryIndex,
-        });
-      });
-    });
-    // Sort by timestamp (entries without timestamp go last)
-    entries.sort((a, b) => {
-      if (a.entry.timestamp && b.entry.timestamp) {
-        return a.entry.timestamp.localeCompare(b.entry.timestamp);
-      }
-      if (a.entry.timestamp) return -1;
-      if (b.entry.timestamp) return 1;
-      return 0;
-    });
-    return entries;
-  }, [allProcessLogs]);
-
-  // Identify running processes (main + follow-ups)
-  const runningProcessLogs = useMemo(
-    () => allProcessLogs.filter((log) => log.status === 'running'),
-    [allProcessLogs]
-  );
-
-  // Paginate: show only the last visibleCount entries
-  const visibleEntries = useMemo(
-    () => allEntries.slice(-(visibleCount - visibleRunningEntriesCount)),
-    [allEntries, visibleCount, visibleRunningEntriesCount]
-  );
-
-  const renderedVisibleEntries = useMemo(
-    () =>
-      visibleEntries.map((entry, index) => (
-        <ConversationEntry
-          key={entry.entry.timestamp || index}
-          idx={index}
-          item={entry}
-          handleConversationUpdate={handleConversationUpdate}
-          visibleEntriesLength={visibleEntries.length}
-          runningProcessDetails={attemptData.runningProcessDetails}
-        />
-      )),
-    [
-      visibleEntries,
-      handleConversationUpdate,
-      attemptData.runningProcessDetails,
-    ]
-  );
-
-  const renderedRunningProcessLogs = useMemo(() => {
-    return runningProcessLogs.map((log, i) => {
-      const runningProcess = attemptData.runningProcessDetails[String(log.id)];
-      if (!runningProcess) return null;
-      // Show prompt only if this is the first entry in the process (i.e., no completed entries for this process)
-      const showPrompt =
-        log.normalized_conversation.prompt &&
-        !allEntries.some((e) => e.processId === String(log.id));
-      return (
-        <div key={String(log.id)} className={i > 0 ? 'mt-8' : ''}>
-          {showPrompt && (
-            <Prompt prompt={log.normalized_conversation.prompt || ''} />
-          )}
-          <NormalizedConversationViewer
-            executionProcess={runningProcess}
-            onConversationUpdate={handleConversationUpdate}
-            diffDeletable
-            visibleEntriesNum={visibleCount}
-            onDisplayEntriesChange={setVisibleRunningEntriesCount}
-          />
-        </div>
-      );
-    });
-  }, [
-    runningProcessLogs,
-    attemptData.runningProcessDetails,
-    handleConversationUpdate,
-    allEntries,
-    visibleCount,
-  ]);
-
-  // Check if we should show the status banner - only if the most recent process failed/stopped
-  const getMostRecentProcess = () => {
-    if (followUpLogs.length > 0) {
-      // Sort by creation time or use last in array as most recent
-      return followUpLogs[followUpLogs.length - 1];
-    }
-    return mainCodingAgentLog;
-  };
-
-  const mostRecentProcess = getMostRecentProcess();
-  const showStatusBanner =
-    mostRecentProcess &&
-    (mostRecentProcess.status === 'failed' ||
-      mostRecentProcess.status === 'killed');
-
-  return (
-    <div
-      ref={scrollContainerRef}
-      onScroll={handleLogsScroll}
-      className="h-full overflow-y-auto"
-    >
-      {visibleCount - visibleRunningEntriesCount < allEntries.length && (
-        <div className="flex justify-center mb-4">
-          <Button
-            variant="outline"
-            className="w-full"
-            onClick={() => setVisibleCount((c) => c + 100)}
-          >
-            Load previous logs
-          </Button>
-        </div>
-      )}
-      {visibleEntries.length > 0 && (
-        <div className="space-y-2">{renderedVisibleEntries}</div>
-      )}
-      {/* Render live viewers for running processes (after paginated list) */}
-      {renderedRunningProcessLogs}
-      {/* If nothing to show at all, show loader */}
-      {visibleEntries.length === 0 && runningProcessLogs.length === 0 && (
-        <Loader
-          message={
-            <>
-              Coding Agent Starting
-              <br />
-              Initializing conversation...
-            </>
-          }
-          size={48}
-          className="py-8"
-        />
-      )}
-
-      {/* Status banner for failed/stopped states - shown at bottom */}
-      {showStatusBanner && mostRecentProcess && (
-        <div className="mt-4 p-4 rounded-lg border">
-          <p
-            className={`text-lg font-semibold mb-2 ${
-              mostRecentProcess.status === 'failed'
-                ? 'text-destructive'
-                : 'text-orange-600'
-            }`}
-          >
-            {mostRecentProcess.status === 'failed'
-              ? 'Coding Agent Failed'
-              : 'Coding Agent Stopped'}
-          </p>
-          <p className="text-muted-foreground">
-            {mostRecentProcess.status === 'failed'
-              ? 'The coding agent encountered an error.'
-              : 'The coding agent was stopped.'}
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default Conversation;

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

@@ -1,56 +0,0 @@
-import { ConversationEntryDisplayType } from '@/lib/types';
-import DisplayConversationEntry from '../DisplayConversationEntry';
-import { NormalizedConversationViewer } from './NormalizedConversationViewer';
-import Prompt from './Prompt';
-import { Loader } from '@/components/ui/loader.tsx';
-import { ExecutionProcess } from 'shared/types';
-
-type Props = {
-  item: ConversationEntryDisplayType;
-  idx: number;
-  handleConversationUpdate: () => void;
-  visibleEntriesLength: number;
-  runningProcessDetails: Record<string, ExecutionProcess>;
-};
-
-const ConversationEntry = ({
-  item,
-  idx,
-  handleConversationUpdate,
-  visibleEntriesLength,
-  runningProcessDetails,
-}: Props) => {
-  const showPrompt = item.isFirstInProcess && item.processPrompt;
-  // For running processes, render the live viewer below the static entries
-  if (item.processIsRunning && idx === visibleEntriesLength - 1) {
-    // Only render the live viewer for the last entry of a running process
-    const runningProcess = runningProcessDetails[item.processId];
-    if (runningProcess) {
-      return (
-        <div key={item.entry.timestamp || idx}>
-          {showPrompt && <Prompt prompt={item.processPrompt || ''} />}
-          <NormalizedConversationViewer
-            executionProcess={runningProcess}
-            onConversationUpdate={handleConversationUpdate}
-            diffDeletable
-          />
-        </div>
-      );
-    }
-    // Fallback: show loading if not found
-    return <Loader message="Loading live logs..." size={24} className="py-4" />;
-  } else {
-    return (
-      <div key={item.entry.timestamp || idx}>
-        {showPrompt && <Prompt prompt={item.processPrompt || ''} />}
-        <DisplayConversationEntry
-          entry={item.entry}
-          index={idx}
-          diffDeletable
-        />
-      </div>
-    );
-  }
-};
-
-export default ConversationEntry;