automagik-forge 0.1.11 → 0.1.13

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

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

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

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

@@ -0,0 +1,126 @@
+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>
+      )}
+    </>
+  );
+}