automagik-forge 0.1.13 → 0.1.14

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

@@ -1,216 +0,0 @@
-import { useContext, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import {
-  TaskDetailsContext,
-  TaskRelatedTasksContext,
-} from '@/components/context/taskDetailsContext.ts';
-import { attemptsApi, tasksApi } from '@/lib/api.ts';
-import type { Task, TaskAttempt } from 'shared/types.ts';
-import {
-  AlertCircle,
-  CheckCircle,
-  Clock,
-  XCircle,
-  ArrowUp,
-  ArrowDown,
-} from 'lucide-react';
-
-function RelatedTasksTab() {
-  const { task, projectId } = useContext(TaskDetailsContext);
-  const { relatedTasks, relatedTasksLoading, relatedTasksError } = useContext(
-    TaskRelatedTasksContext
-  );
-  const navigate = useNavigate();
-
-  // State for parent task details
-  const [parentTaskDetails, setParentTaskDetails] = useState<{
-    task: Task;
-    attempt: TaskAttempt;
-  } | null>(null);
-  const [parentTaskLoading, setParentTaskLoading] = useState(false);
-
-  const handleTaskClick = (relatedTask: any) => {
-    navigate(`/projects/${projectId}/tasks/${relatedTask.id}`);
-  };
-
-  const hasParent = task?.parent_task_attempt;
-  const children = relatedTasks || [];
-
-  // Fetch parent task details when component mounts
-  useEffect(() => {
-    const fetchParentTaskDetails = async () => {
-      if (!task?.parent_task_attempt) {
-        setParentTaskDetails(null);
-        return;
-      }
-
-      setParentTaskLoading(true);
-      try {
-        const attemptData = await attemptsApi.getDetails(
-          task.parent_task_attempt
-        );
-        const parentTask = await tasksApi.getById(
-          projectId,
-          attemptData.task_id
-        );
-        setParentTaskDetails({
-          task: parentTask,
-          attempt: attemptData,
-        });
-      } catch (error) {
-        console.error('Error fetching parent task details:', error);
-        setParentTaskDetails(null);
-      } finally {
-        setParentTaskLoading(false);
-      }
-    };
-
-    fetchParentTaskDetails();
-  }, [task?.parent_task_attempt, projectId]);
-
-  const handleParentClick = async () => {
-    if (task?.parent_task_attempt) {
-      try {
-        const attemptData = await attemptsApi.getDetails(
-          task.parent_task_attempt
-        );
-        navigate(
-          `/projects/${projectId}/tasks/${attemptData.task_id}?attempt=${task.parent_task_attempt}`
-        );
-      } catch (error) {
-        console.error('Error navigating to parent task:', error);
-      }
-    }
-  };
-
-  const getStatusIcon = (status: string) => {
-    switch (status) {
-      case 'done':
-        return <CheckCircle className="h-4 w-4 text-green-500" />;
-      case 'inprogress':
-        return <Clock className="h-4 w-4 text-blue-500" />;
-      case 'cancelled':
-        return <XCircle className="h-4 w-4 text-red-500" />;
-      case 'inreview':
-        return <AlertCircle className="h-4 w-4 text-yellow-500" />;
-      default:
-        return <Clock className="h-4 w-4 text-gray-500" />;
-    }
-  };
-
-  if (relatedTasksLoading) {
-    return (
-      <div className="flex items-center justify-center p-8">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-      </div>
-    );
-  }
-
-  if (relatedTasksError) {
-    return (
-      <div className="flex items-center justify-center p-8">
-        <div className="text-center">
-          <AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
-          <p className="text-red-600">{relatedTasksError}</p>
-        </div>
-      </div>
-    );
-  }
-
-  const totalRelatedTasks = (hasParent ? 1 : 0) + children.length;
-
-  if (totalRelatedTasks === 0) {
-    return (
-      <div className="flex items-center justify-center p-8">
-        <div className="text-center">
-          <div className="text-muted-foreground">
-            <p>No related tasks found.</p>
-            <p className="text-sm mt-2">
-              This task doesn't have any parent task or subtasks.
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6 p-4">
-      {/* Parent Task */}
-      {hasParent && (
-        <div>
-          <h3 className="text-sm font-medium text-muted-foreground mb-2 flex items-center gap-2">
-            <ArrowUp className="h-4 w-4" />
-            Parent Task
-          </h3>
-          <button
-            onClick={handleParentClick}
-            className="w-full bg-card border border-border rounded-lg p-4 hover:bg-accent/50 transition-colors cursor-pointer text-left"
-          >
-            {parentTaskLoading ? (
-              <div className="flex items-center gap-4">
-                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
-                <div className="text-muted-foreground">
-                  Loading parent task...
-                </div>
-              </div>
-            ) : parentTaskDetails ? (
-              <div className="flex items-center gap-4">
-                <div className="flex-1">
-                  <div className="font-medium text-foreground">
-                    {parentTaskDetails.task.title}
-                  </div>
-                  <div className="text-sm text-muted-foreground">
-                    {new Date(
-                      parentTaskDetails.attempt.created_at
-                    ).toLocaleDateString()}{' '}
-                    {new Date(
-                      parentTaskDetails.attempt.created_at
-                    ).toLocaleTimeString([], {
-                      hour: '2-digit',
-                      minute: '2-digit',
-                    })}
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <div className="flex items-center gap-4">
-                <div className="text-muted-foreground">
-                  Parent task (failed to load details)
-                </div>
-              </div>
-            )}
-          </button>
-        </div>
-      )}
-
-      {/* Child Tasks */}
-      {children.length > 0 && (
-        <div>
-          <h3 className="text-sm font-medium text-muted-foreground mb-2 flex items-center gap-2">
-            <ArrowDown className="h-4 w-4" />
-            Child Tasks ({children.length})
-          </h3>
-          <div className="space-y-3">
-            {children.map((childTask) => (
-              <button
-                key={childTask.id}
-                onClick={() => handleTaskClick(childTask)}
-                className="w-full bg-card border border-border rounded-lg p-4 hover:bg-accent/50 transition-colors cursor-pointer text-left"
-              >
-                <div className="flex items-center gap-4">
-                  {getStatusIcon(childTask.status)}
-                  <span className="font-medium text-foreground">
-                    {childTask.title}
-                  </span>
-                </div>
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default RelatedTasksTab;

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

@@ -1,93 +0,0 @@
-import { GitCompare, MessageSquare, Network, Cog } from 'lucide-react';
-import { useContext } from 'react';
-import {
-  TaskAttemptDataContext,
-  TaskDiffContext,
-  TaskRelatedTasksContext,
-} from '@/components/context/taskDetailsContext.ts';
-
-type Props = {
-  activeTab: 'logs' | 'diffs' | 'related' | 'processes';
-  setActiveTab: (tab: 'logs' | 'diffs' | 'related' | 'processes') => void;
-};
-
-function TabNavigation({ activeTab, setActiveTab }: Props) {
-  const { diff } = useContext(TaskDiffContext);
-  const { totalRelatedCount } = useContext(TaskRelatedTasksContext);
-  const { attemptData } = useContext(TaskAttemptDataContext);
-  return (
-    <div className="border-b bg-muted/30">
-      <div className="flex px-4">
-        <button
-          onClick={() => {
-            setActiveTab('logs');
-          }}
-          className={`flex items-center px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
-            activeTab === 'logs'
-              ? 'border-primary text-primary bg-background'
-              : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50'
-          }`}
-        >
-          <MessageSquare className="h-4 w-4 mr-2" />
-          Logs
-        </button>
-        <button
-          onClick={() => {
-            setActiveTab('diffs');
-          }}
-          className={`flex items-center px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
-            activeTab === 'diffs'
-              ? 'border-primary text-primary bg-background'
-              : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50'
-          }`}
-        >
-          <GitCompare className="h-4 w-4 mr-2" />
-          Diffs
-          {diff && diff.files.length > 0 && (
-            <span className="ml-2 px-1.5 py-0.5 text-xs bg-primary/10 text-primary rounded-full">
-              {diff.files.length}
-            </span>
-          )}
-        </button>
-        <button
-          onClick={() => {
-            setActiveTab('related');
-          }}
-          className={`flex items-center px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
-            activeTab === 'related'
-              ? 'border-primary text-primary bg-background'
-              : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50'
-          }`}
-        >
-          <Network className="h-4 w-4 mr-2" />
-          Related Tasks
-          {totalRelatedCount > 0 && (
-            <span className="ml-2 px-1.5 py-0.5 text-xs bg-primary/10 text-primary rounded-full">
-              {totalRelatedCount}
-            </span>
-          )}
-        </button>
-        <button
-          onClick={() => {
-            setActiveTab('processes');
-          }}
-          className={`flex items-center px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
-            activeTab === 'processes'
-              ? 'border-primary text-primary bg-background'
-              : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50'
-          }`}
-        >
-          <Cog className="h-4 w-4 mr-2" />
-          Processes
-          {attemptData.processes && attemptData.processes.length > 0 && (
-            <span className="ml-2 px-1.5 py-0.5 text-xs bg-primary/10 text-primary rounded-full">
-              {attemptData.processes.length}
-            </span>
-          )}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default TabNavigation;

package/frontend/src/components/tasks/TaskDetailsHeader.tsx

@@ -1,169 +0,0 @@
-import { memo, useContext, useState } from 'react';
-import { ChevronDown, ChevronUp, Edit, Trash2, X } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Chip } from '@/components/ui/chip';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import type { TaskStatus, TaskWithAttemptStatus } from 'shared/types';
-import { TaskDetailsContext } from '@/components/context/taskDetailsContext.ts';
-
-interface TaskDetailsHeaderProps {
-  onClose: () => void;
-  onEditTask?: (task: TaskWithAttemptStatus) => void;
-  onDeleteTask?: (taskId: string) => void;
-}
-
-const statusLabels: Record<TaskStatus, string> = {
-  todo: 'To Do',
-  inprogress: 'In Progress',
-  inreview: 'In Review',
-  done: 'Done',
-  cancelled: 'Cancelled',
-};
-
-const getTaskStatusDotColor = (status: TaskStatus): string => {
-  switch (status) {
-    case 'todo':
-      return 'bg-gray-400';
-    case 'inprogress':
-      return 'bg-blue-500';
-    case 'inreview':
-      return 'bg-yellow-500';
-    case 'done':
-      return 'bg-green-500';
-    case 'cancelled':
-      return 'bg-red-500';
-    default:
-      return 'bg-gray-400';
-  }
-};
-
-function TaskDetailsHeader({
-  onClose,
-  onEditTask,
-  onDeleteTask,
-}: TaskDetailsHeaderProps) {
-  const { task } = useContext(TaskDetailsContext);
-  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
-
-  return (
-    <div>
-      {/* Title and Task Actions */}
-      <div className="p-4 pb-2">
-        <div className="flex items-start justify-between">
-          <div className="flex-1 min-w-0">
-            <h2 className="text-lg font-bold mb-1 line-clamp-2">
-              {task.title}
-            </h2>
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
-              <Chip dotColor={getTaskStatusDotColor(task.status)}>
-                {statusLabels[task.status]}
-              </Chip>
-            </div>
-          </div>
-          <div className="flex items-center gap-1">
-            {onEditTask && (
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => onEditTask(task)}
-                    >
-                      <Edit className="h-4 w-4" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>Edit task</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            )}
-            {onDeleteTask && (
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => onDeleteTask(task.id)}
-                    >
-                      <Trash2 className="h-4 w-4 text-red-500" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>Delete task</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            )}
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" onClick={onClose}>
-                    <X className="h-4 w-4" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>Close panel</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          </div>
-        </div>
-
-        {/* Description */}
-        <div className="mt-2">
-          <div className="p-2 bg-muted/20 rounded border-l-2 border-muted max-h-48 overflow-y-auto">
-            {task.description ? (
-              <div>
-                <p
-                  className={`text-xs whitespace-pre-wrap text-muted-foreground ${
-                    !isDescriptionExpanded && task.description.length > 150
-                      ? 'line-clamp-3'
-                      : ''
-                  }`}
-                >
-                  {task.description}
-                </p>
-                {task.description.length > 150 && (
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() =>
-                      setIsDescriptionExpanded(!isDescriptionExpanded)
-                    }
-                    className="mt-1 p-0 h-auto text-xs text-muted-foreground hover:text-foreground"
-                  >
-                    {isDescriptionExpanded ? (
-                      <>
-                        <ChevronUp className="h-3 w-3 mr-1" />
-                        Show less
-                      </>
-                    ) : (
-                      <>
-                        <ChevronDown className="h-3 w-3 mr-1" />
-                        Show more
-                      </>
-                    )}
-                  </Button>
-                )}
-              </div>
-            ) : (
-              <p className="text-xs text-muted-foreground italic">
-                No description provided
-              </p>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default memo(TaskDetailsHeader);

package/frontend/src/components/tasks/TaskDetailsPanel.tsx

@@ -1,126 +0,0 @@
-import { useEffect, useState } from 'react';
-import TaskDetailsHeader from './TaskDetailsHeader';
-import { TaskFollowUpSection } from './TaskFollowUpSection';
-import { EditorSelectionDialog } from './EditorSelectionDialog';
-import {
-  getBackdropClasses,
-  getTaskPanelClasses,
-} from '@/lib/responsive-config';
-import type { TaskWithAttemptStatus } from 'shared/types';
-import DiffTab from '@/components/tasks/TaskDetails/DiffTab.tsx';
-import LogsTab from '@/components/tasks/TaskDetails/LogsTab.tsx';
-import RelatedTasksTab from '@/components/tasks/TaskDetails/RelatedTasksTab.tsx';
-import ProcessesTab from '@/components/tasks/TaskDetails/ProcessesTab.tsx';
-import DeleteFileConfirmationDialog from '@/components/tasks/DeleteFileConfirmationDialog.tsx';
-import TabNavigation from '@/components/tasks/TaskDetails/TabNavigation.tsx';
-import CollapsibleToolbar from '@/components/tasks/TaskDetails/CollapsibleToolbar.tsx';
-import TaskDetailsProvider from '../context/TaskDetailsContextProvider.tsx';
-
-interface TaskDetailsPanelProps {
-  task: TaskWithAttemptStatus | null;
-  projectHasDevScript?: boolean;
-  projectId: string;
-  onClose: () => void;
-  onEditTask?: (task: TaskWithAttemptStatus) => void;
-  onDeleteTask?: (taskId: string) => void;
-  isDialogOpen?: boolean;
-}
-
-export function TaskDetailsPanel({
-  task,
-  projectHasDevScript,
-  projectId,
-  onClose,
-  onEditTask,
-  onDeleteTask,
-  isDialogOpen = false,
-}: TaskDetailsPanelProps) {
-  const [showEditorDialog, setShowEditorDialog] = useState(false);
-
-  // Tab and collapsible state
-  const [activeTab, setActiveTab] = useState<
-    'logs' | 'diffs' | 'related' | 'processes'
-  >('logs');
-
-  // Reset to logs tab when task changes
-  useEffect(() => {
-    if (task?.id) {
-      setActiveTab('logs');
-    }
-  }, [task?.id]);
-
-  // Handle ESC key locally to prevent global navigation
-  useEffect(() => {
-    if (isDialogOpen) return;
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        event.stopPropagation();
-        onClose();
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown, true);
-    return () => document.removeEventListener('keydown', handleKeyDown, true);
-  }, [onClose, isDialogOpen]);
-
-  return (
-    <>
-      {!task ? null : (
-        <TaskDetailsProvider
-          key={task.id}
-          task={task}
-          projectId={projectId}
-          setShowEditorDialog={setShowEditorDialog}
-          projectHasDevScript={projectHasDevScript}
-        >
-          {/* Backdrop - only on smaller screens (overlay mode) */}
-          <div className={getBackdropClasses()} onClick={onClose} />
-
-          {/* Panel */}
-          <div className={getTaskPanelClasses()}>
-            <div className="flex flex-col h-full">
-              <TaskDetailsHeader
-                onClose={onClose}
-                onEditTask={onEditTask}
-                onDeleteTask={onDeleteTask}
-              />
-
-              <CollapsibleToolbar />
-
-              <TabNavigation
-                activeTab={activeTab}
-                setActiveTab={setActiveTab}
-              />
-
-              {/* Tab Content */}
-              <div
-                className={`flex-1 flex flex-col min-h-0 ${activeTab === 'logs' ? 'p-4' : 'pt-4'}`}
-              >
-                {activeTab === 'diffs' ? (
-                  <DiffTab />
-                ) : activeTab === 'related' ? (
-                  <RelatedTasksTab />
-                ) : activeTab === 'processes' ? (
-                  <ProcessesTab />
-                ) : (
-                  <LogsTab />
-                )}
-              </div>
-
-              <TaskFollowUpSection />
-            </div>
-          </div>
-
-          <EditorSelectionDialog
-            isOpen={showEditorDialog}
-            onClose={() => setShowEditorDialog(false)}
-          />
-
-          <DeleteFileConfirmationDialog />
-        </TaskDetailsProvider>
-      )}
-    </>
-  );
-}