automagik-forge 0.1.13 → 0.1.14

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

@@ -1,400 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { Globe2 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { FileSearchTextarea } from '@/components/ui/file-search-textarea';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { useConfig } from '@/components/config-provider';
-import { templatesApi } from '@/lib/api';
-import type { TaskStatus, ExecutorConfig, TaskTemplate } from 'shared/types';
-
-interface Task {
-  id: string;
-  project_id: string;
-  title: string;
-  description: string | null;
-  status: TaskStatus;
-  created_at: string;
-  updated_at: string;
-}
-
-interface TaskFormDialogProps {
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-  task?: Task | null; // Optional for create mode
-  projectId?: string; // For file search functionality
-  initialTemplate?: TaskTemplate | null; // For pre-filling from template
-  onCreateTask?: (title: string, description: string) => Promise<void>;
-  onCreateAndStartTask?: (
-    title: string,
-    description: string,
-    executor?: ExecutorConfig
-  ) => Promise<void>;
-  onUpdateTask?: (
-    title: string,
-    description: string,
-    status: TaskStatus
-  ) => Promise<void>;
-}
-
-export function TaskFormDialog({
-  isOpen,
-  onOpenChange,
-  task,
-  projectId,
-  initialTemplate,
-  onCreateTask,
-  onCreateAndStartTask,
-  onUpdateTask,
-}: TaskFormDialogProps) {
-  const [title, setTitle] = useState('');
-  const [description, setDescription] = useState('');
-  const [status, setStatus] = useState<TaskStatus>('todo');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isSubmittingAndStart, setIsSubmittingAndStart] = useState(false);
-  const [templates, setTemplates] = useState<TaskTemplate[]>([]);
-  const [selectedTemplate, setSelectedTemplate] = useState<string>('');
-
-  const { config } = useConfig();
-  const isEditMode = Boolean(task);
-
-  useEffect(() => {
-    if (task) {
-      // Edit mode - populate with existing task data
-      setTitle(task.title);
-      setDescription(task.description || '');
-      setStatus(task.status);
-    } else if (initialTemplate) {
-      // Create mode with template - pre-fill from template
-      setTitle(initialTemplate.title);
-      setDescription(initialTemplate.description || '');
-      setStatus('todo');
-      setSelectedTemplate('');
-    } else {
-      // Create mode - reset to defaults
-      setTitle('');
-      setDescription('');
-      setStatus('todo');
-      setSelectedTemplate('');
-    }
-  }, [task, initialTemplate, isOpen]);
-
-  // Fetch templates when dialog opens in create mode
-  useEffect(() => {
-    if (isOpen && !isEditMode && projectId) {
-      // Fetch both project and global templates
-      Promise.all([
-        templatesApi.listByProject(projectId),
-        templatesApi.listGlobal(),
-      ])
-        .then(([projectTemplates, globalTemplates]) => {
-          // Combine templates with project templates first
-          setTemplates([...projectTemplates, ...globalTemplates]);
-        })
-        .catch(console.error);
-    }
-  }, [isOpen, isEditMode, projectId]);
-
-  // Handle template selection
-  const handleTemplateChange = (templateId: string) => {
-    setSelectedTemplate(templateId);
-    if (templateId === 'none') {
-      // Clear the form when "No template" is selected
-      setTitle('');
-      setDescription('');
-    } else if (templateId) {
-      const template = templates.find((t) => t.id === templateId);
-      if (template) {
-        setTitle(template.title);
-        setDescription(template.description || '');
-      }
-    }
-  };
-
-  const handleSubmit = async () => {
-    if (!title.trim()) return;
-
-    setIsSubmitting(true);
-    try {
-      if (isEditMode && onUpdateTask) {
-        await onUpdateTask(title, description, status);
-      } else if (!isEditMode && onCreateTask) {
-        await onCreateTask(title, description);
-      }
-
-      // Reset form on successful creation
-      if (!isEditMode) {
-        setTitle('');
-        setDescription('');
-        setStatus('todo');
-      }
-
-      onOpenChange(false);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleCreateAndStart = useCallback(async () => {
-    if (!title.trim()) return;
-
-    setIsSubmittingAndStart(true);
-    try {
-      if (!isEditMode && onCreateAndStartTask) {
-        await onCreateAndStartTask(title, description, config?.executor);
-      }
-
-      // Reset form on successful creation
-      setTitle('');
-      setDescription('');
-      setStatus('todo');
-
-      onOpenChange(false);
-    } finally {
-      setIsSubmittingAndStart(false);
-    }
-  }, [
-    title,
-    description,
-    config?.executor,
-    isEditMode,
-    onCreateAndStartTask,
-    onOpenChange,
-  ]);
-
-  const handleCancel = useCallback(() => {
-    // Reset form state when canceling
-    if (task) {
-      setTitle(task.title);
-      setDescription(task.description || '');
-      setStatus(task.status);
-    } else {
-      setTitle('');
-      setDescription('');
-      setStatus('todo');
-      setSelectedTemplate('');
-    }
-    onOpenChange(false);
-  }, [task, onOpenChange]);
-
-  // Handle keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      // ESC to close dialog (prevent it from reaching TaskDetailsPanel)
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        event.stopPropagation();
-        handleCancel();
-        return;
-      }
-
-      // Command/Ctrl + Enter to Create & Start (create mode) or Save (edit mode)
-      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
-        if (
-          !isEditMode &&
-          onCreateAndStartTask &&
-          title.trim() &&
-          !isSubmitting &&
-          !isSubmittingAndStart
-        ) {
-          event.preventDefault();
-          handleCreateAndStart();
-        } else if (
-          isEditMode &&
-          title.trim() &&
-          !isSubmitting &&
-          !isSubmittingAndStart
-        ) {
-          event.preventDefault();
-          handleSubmit();
-        }
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleKeyDown, true); // Use capture phase to get priority
-      return () => document.removeEventListener('keydown', handleKeyDown, true);
-    }
-  }, [
-    isOpen,
-    isEditMode,
-    onCreateAndStartTask,
-    title,
-    isSubmitting,
-    isSubmittingAndStart,
-    handleCreateAndStart,
-    handleCancel,
-  ]);
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[550px]">
-        <DialogHeader>
-          <DialogTitle>
-            {isEditMode ? 'Edit Task' : 'Create New Task'}
-          </DialogTitle>
-        </DialogHeader>
-        <div className="space-y-4">
-          <div>
-            <Label htmlFor="task-title" className="text-sm font-medium">
-              Title
-            </Label>
-            <Input
-              id="task-title"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              placeholder="What needs to be done?"
-              className="mt-1.5"
-              disabled={isSubmitting || isSubmittingAndStart}
-              autoFocus
-            />
-          </div>
-
-          <div>
-            <Label htmlFor="task-description" className="text-sm font-medium">
-              Description
-            </Label>
-            <FileSearchTextarea
-              value={description}
-              onChange={setDescription}
-              rows={3}
-              maxRows={8}
-              placeholder="Add more details (optional). Type @ to search files."
-              className="mt-1.5"
-              disabled={isSubmitting || isSubmittingAndStart}
-              projectId={projectId}
-            />
-          </div>
-
-          {!isEditMode && templates.length > 0 && (
-            <div className="pt-2">
-              <details className="group">
-                <summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground transition-colors list-none flex items-center gap-2">
-                  <svg
-                    className="h-3 w-3 transition-transform group-open:rotate-90"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                  Use a template
-                </summary>
-                <div className="mt-3 space-y-2">
-                  <p className="text-xs text-muted-foreground">
-                    Templates help you quickly create tasks with predefined
-                    content.
-                  </p>
-                  <Select
-                    value={selectedTemplate}
-                    onValueChange={handleTemplateChange}
-                  >
-                    <SelectTrigger id="task-template" className="w-full">
-                      <SelectValue placeholder="Choose a template to prefill this form" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="none">No template</SelectItem>
-                      {templates.map((template) => (
-                        <SelectItem key={template.id} value={template.id}>
-                          <div className="flex items-center gap-2">
-                            {template.project_id === null && (
-                              <Globe2 className="h-3 w-3 text-muted-foreground" />
-                            )}
-                            <span>{template.template_name}</span>
-                          </div>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </details>
-            </div>
-          )}
-
-          {isEditMode && (
-            <div className="pt-2">
-              <Label htmlFor="task-status" className="text-sm font-medium">
-                Status
-              </Label>
-              <Select
-                value={status}
-                onValueChange={(value) => setStatus(value as TaskStatus)}
-                disabled={isSubmitting || isSubmittingAndStart}
-              >
-                <SelectTrigger className="mt-1.5">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="todo">To Do</SelectItem>
-                  <SelectItem value="inprogress">In Progress</SelectItem>
-                  <SelectItem value="inreview">In Review</SelectItem>
-                  <SelectItem value="done">Done</SelectItem>
-                  <SelectItem value="cancelled">Cancelled</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          )}
-
-          <div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2 pt-2">
-            <Button
-              variant="outline"
-              onClick={handleCancel}
-              disabled={isSubmitting || isSubmittingAndStart}
-            >
-              Cancel
-            </Button>
-            {isEditMode ? (
-              <Button
-                onClick={handleSubmit}
-                disabled={isSubmitting || !title.trim()}
-              >
-                {isSubmitting ? 'Updating...' : 'Update Task'}
-              </Button>
-            ) : (
-              <>
-                <Button
-                  variant="secondary"
-                  onClick={handleSubmit}
-                  disabled={
-                    isSubmitting || isSubmittingAndStart || !title.trim()
-                  }
-                >
-                  {isSubmitting ? 'Creating...' : 'Create Task'}
-                </Button>
-                {onCreateAndStartTask && (
-                  <Button
-                    onClick={handleCreateAndStart}
-                    disabled={
-                      isSubmitting || isSubmittingAndStart || !title.trim()
-                    }
-                    className="font-medium"
-                  >
-                    {isSubmittingAndStart
-                      ? 'Creating & Starting...'
-                      : 'Create & Start'}
-                  </Button>
-                )}
-              </>
-            )}
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

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

@@ -1,180 +0,0 @@
-import { memo, useEffect, useMemo, useState } from 'react';
-import {
-  type DragEndEvent,
-  KanbanBoard,
-  KanbanCards,
-  KanbanHeader,
-  KanbanProvider,
-} from '@/components/ui/shadcn-io/kanban';
-import { TaskCard } from './TaskCard';
-import type { TaskStatus, TaskWithAttemptStatus } from 'shared/types';
-import { useNavigate, useParams } from 'react-router-dom';
-import {
-  useKeyboardShortcuts,
-  useKanbanKeyboardNavigation,
-} from '@/lib/keyboard-shortcuts.ts';
-
-type Task = TaskWithAttemptStatus;
-
-interface TaskKanbanBoardProps {
-  tasks: Task[];
-  searchQuery?: string;
-  onDragEnd: (event: DragEndEvent) => void;
-  onEditTask: (task: Task) => void;
-  onDeleteTask: (taskId: string) => void;
-  onViewTaskDetails: (task: Task) => void;
-  isPanelOpen: boolean;
-}
-
-const allTaskStatuses: TaskStatus[] = [
-  'todo',
-  'inprogress',
-  'inreview',
-  'done',
-  'cancelled',
-];
-
-const statusLabels: Record<TaskStatus, string> = {
-  todo: 'To Do',
-  inprogress: 'In Progress',
-  inreview: 'In Review',
-  done: 'Done',
-  cancelled: 'Cancelled',
-};
-
-const statusBoardColors: Record<TaskStatus, string> = {
-  todo: 'hsl(var(--neutral))',
-  inprogress: 'hsl(var(--info))',
-  inreview: 'hsl(var(--warning))',
-  done: 'hsl(var(--success))',
-  cancelled: 'hsl(var(--destructive))',
-};
-
-function TaskKanbanBoard({
-  tasks,
-  searchQuery = '',
-  onDragEnd,
-  onEditTask,
-  onDeleteTask,
-  onViewTaskDetails,
-  isPanelOpen,
-}: TaskKanbanBoardProps) {
-  const { projectId, taskId } = useParams<{
-    projectId: string;
-    taskId?: string;
-  }>();
-  const navigate = useNavigate();
-
-  useKeyboardShortcuts({
-    navigate,
-    currentPath: `/projects/${projectId}/tasks${taskId ? `/${taskId}` : ''}`,
-  });
-
-  const [focusedTaskId, setFocusedTaskId] = useState<string | null>(
-    taskId || null
-  );
-  const [focusedStatus, setFocusedStatus] = useState<TaskStatus | null>(null);
-
-  // Memoize filtered tasks
-  const filteredTasks = useMemo(() => {
-    if (!searchQuery.trim()) {
-      return tasks;
-    }
-    const query = searchQuery.toLowerCase();
-    return tasks.filter(
-      (task) =>
-        task.title.toLowerCase().includes(query) ||
-        (task.description && task.description.toLowerCase().includes(query))
-    );
-  }, [tasks, searchQuery]);
-
-  // Memoize grouped tasks
-  const groupedTasks = useMemo(() => {
-    const groups: Record<TaskStatus, Task[]> = {} as Record<TaskStatus, Task[]>;
-    allTaskStatuses.forEach((status) => {
-      groups[status] = [];
-    });
-    filteredTasks.forEach((task) => {
-      const normalizedStatus = task.status.toLowerCase() as TaskStatus;
-      if (groups[normalizedStatus]) {
-        groups[normalizedStatus].push(task);
-      } else {
-        groups['todo'].push(task);
-      }
-    });
-    return groups;
-  }, [filteredTasks]);
-
-  // Sync focus state with taskId param
-  useEffect(() => {
-    if (taskId) {
-      const found = filteredTasks.find((t) => t.id === taskId);
-      if (found) {
-        setFocusedTaskId(taskId);
-        setFocusedStatus((found.status.toLowerCase() as TaskStatus) || null);
-      }
-    }
-  }, [taskId, filteredTasks]);
-
-  // If no taskId in params, keep last focused, or focus first available
-  useEffect(() => {
-    if (!taskId && !focusedTaskId) {
-      for (const status of allTaskStatuses) {
-        if (groupedTasks[status] && groupedTasks[status].length > 0) {
-          setFocusedTaskId(groupedTasks[status][0].id);
-          setFocusedStatus(status);
-          break;
-        }
-      }
-    }
-  }, [taskId, focusedTaskId, groupedTasks]);
-
-  // Keyboard navigation handler
-  useKanbanKeyboardNavigation({
-    focusedTaskId,
-    setFocusedTaskId: (id) => {
-      setFocusedTaskId(id as string | null);
-      if (isPanelOpen) {
-        const task = filteredTasks.find((t: any) => t.id === id);
-        if (task) {
-          onViewTaskDetails(task);
-        }
-      }
-    },
-    focusedStatus,
-    setFocusedStatus: (status) => setFocusedStatus(status as TaskStatus | null),
-    groupedTasks,
-    filteredTasks,
-    allTaskStatuses,
-  });
-
-  return (
-    <KanbanProvider onDragEnd={onDragEnd}>
-      {Object.entries(groupedTasks).map(([status, statusTasks]) => (
-        <KanbanBoard key={status} id={status as TaskStatus}>
-          <KanbanHeader
-            name={statusLabels[status as TaskStatus]}
-            color={statusBoardColors[status as TaskStatus]}
-          />
-          <KanbanCards>
-            {statusTasks.map((task, index) => (
-              <TaskCard
-                key={task.id}
-                task={task}
-                index={index}
-                status={status}
-                onEdit={onEditTask}
-                onDelete={onDeleteTask}
-                onViewDetails={onViewTaskDetails}
-                isFocused={focusedTaskId === task.id}
-                tabIndex={focusedTaskId === task.id ? 0 : -1}
-              />
-            ))}
-          </KanbanCards>
-        </KanbanBoard>
-      ))}
-    </KanbanProvider>
-  );
-}
-
-export default memo(TaskKanbanBoard);