automagik-forge 0.1.13 → 0.1.14

package/frontend/src/components/projects/project-list.tsx

@@ -1,200 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import {
-  useKanbanKeyboardNavigation,
-  useKeyboardShortcuts,
-} from '@/lib/keyboard-shortcuts';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Project } from 'shared/types';
-import { ProjectForm } from './project-form';
-import { projectsApi } from '@/lib/api';
-import { AlertCircle, Loader2, Plus } from 'lucide-react';
-import ProjectCard from '@/components/projects/ProjectCard.tsx';
-
-export function ProjectList() {
-  const navigate = useNavigate();
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [showForm, setShowForm] = useState(false);
-  const [editingProject, setEditingProject] = useState<Project | null>(null);
-  const [error, setError] = useState('');
-  const [focusedProjectId, setFocusedProjectId] = useState<string | null>(null);
-  const [focusedColumn, setFocusedColumn] = useState<string | null>(null);
-
-  const fetchProjects = async () => {
-    setLoading(true);
-    setError('');
-
-    try {
-      const result = await projectsApi.getAll();
-      setProjects(result);
-    } catch (error) {
-      console.error('Failed to fetch projects:', error);
-      setError('Failed to fetch projects');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleFormSuccess = () => {
-    setShowForm(false);
-    setEditingProject(null);
-    fetchProjects();
-  };
-
-  // Group projects by grid columns (3 columns for lg, 2 for md, 1 for sm)
-  const getGridColumns = () => {
-    const screenWidth = window.innerWidth;
-    if (screenWidth >= 1024) return 3; // lg
-    if (screenWidth >= 768) return 2; // md
-    return 1; // sm
-  };
-
-  const groupProjectsByColumns = (projects: Project[], columns: number) => {
-    const grouped: Record<string, Project[]> = {};
-    for (let i = 0; i < columns; i++) {
-      grouped[`column-${i}`] = [];
-    }
-
-    projects.forEach((project, index) => {
-      const columnIndex = index % columns;
-      grouped[`column-${columnIndex}`].push(project);
-    });
-
-    return grouped;
-  };
-
-  const columns = getGridColumns();
-  const groupedProjects = groupProjectsByColumns(projects, columns);
-  const allColumnKeys = Object.keys(groupedProjects);
-
-  // Set initial focus when projects are loaded
-  useEffect(() => {
-    if (projects.length > 0 && !focusedProjectId) {
-      setFocusedProjectId(projects[0].id);
-      setFocusedColumn('column-0');
-    }
-  }, [projects, focusedProjectId]);
-
-  const handleViewProjectDetails = (project: Project) => {
-    navigate(`/projects/${project.id}/tasks`);
-  };
-
-  // Setup keyboard navigation
-  useKanbanKeyboardNavigation({
-    focusedTaskId: focusedProjectId,
-    setFocusedTaskId: setFocusedProjectId,
-    focusedStatus: focusedColumn,
-    setFocusedStatus: setFocusedColumn,
-    groupedTasks: groupedProjects,
-    filteredTasks: projects,
-    allTaskStatuses: allColumnKeys,
-    onViewTaskDetails: handleViewProjectDetails,
-    preserveIndexOnColumnSwitch: true,
-  });
-
-  useKeyboardShortcuts({
-    ignoreEscape: true,
-    onC: () => setShowForm(true),
-    navigate,
-    currentPath: '/projects',
-  });
-
-  // Handle window resize to update column layout
-  useEffect(() => {
-    const handleResize = () => {
-      // Reset focus when layout changes
-      if (focusedProjectId && projects.length > 0) {
-        const newColumns = getGridColumns();
-
-        // Find which column the focused project should be in
-        const focusedProject = projects.find((p) => p.id === focusedProjectId);
-        if (focusedProject) {
-          const projectIndex = projects.indexOf(focusedProject);
-          const newColumnIndex = projectIndex % newColumns;
-          setFocusedColumn(`column-${newColumnIndex}`);
-        }
-      }
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [focusedProjectId, projects]);
-
-  useEffect(() => {
-    fetchProjects();
-  }, []);
-
-  return (
-    <div className="space-y-6 p-8">
-      <div className="flex justify-between items-center">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">Projects</h1>
-          <p className="text-muted-foreground">
-            Manage your projects and track their progress
-          </p>
-        </div>
-        <Button onClick={() => setShowForm(true)}>
-          <Plus className="mr-2 h-4 w-4" />
-          Create Project
-        </Button>
-      </div>
-
-      {error && (
-        <Alert variant="destructive">
-          <AlertCircle className="h-4 w-4" />
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
-
-      {loading ? (
-        <div className="flex items-center justify-center py-12">
-          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-          Loading projects...
-        </div>
-      ) : projects.length === 0 ? (
-        <Card>
-          <CardContent className="py-12 text-center">
-            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-muted">
-              <Plus className="h-6 w-6" />
-            </div>
-            <h3 className="mt-4 text-lg font-semibold">No projects yet</h3>
-            <p className="mt-2 text-sm text-muted-foreground">
-              Get started by creating your first project.
-            </p>
-            <Button className="mt-4" onClick={() => setShowForm(true)}>
-              <Plus className="mr-2 h-4 w-4" />
-              Create your first project
-            </Button>
-          </CardContent>
-        </Card>
-      ) : (
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-          {projects.map((project) => (
-            <ProjectCard
-              key={project.id}
-              project={project}
-              isFocused={focusedProjectId === project.id}
-              setError={setError}
-              setEditingProject={setEditingProject}
-              setShowForm={setShowForm}
-              fetchProjects={fetchProjects}
-            />
-          ))}
-        </div>
-      )}
-
-      <ProjectForm
-        open={showForm}
-        onClose={() => {
-          setShowForm(false);
-          setEditingProject(null);
-        }}
-        onSuccess={handleFormSuccess}
-        project={editingProject}
-      />
-    </div>
-  );
-}

package/frontend/src/components/projects/projects-page.tsx

@@ -1,20 +0,0 @@
-import { useState } from 'react';
-import { ProjectList } from './project-list';
-import { ProjectDetail } from './project-detail';
-
-export function ProjectsPage() {
-  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
-    null
-  );
-
-  if (selectedProjectId) {
-    return (
-      <ProjectDetail
-        projectId={selectedProjectId}
-        onBack={() => setSelectedProjectId(null)}
-      />
-    );
-  }
-
-  return <ProjectList />;
-}

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

@@ -1,169 +0,0 @@
-import { useState, useMemo, useRef } from 'react';
-import { Button } from '@/components/ui/button.tsx';
-import { ArrowDown, GitBranch as GitBranchIcon, Search } from 'lucide-react';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.tsx';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip.tsx';
-import { Input } from '@/components/ui/input.tsx';
-import type { GitBranch } from 'shared/types.ts';
-
-type Props = {
-  branches: GitBranch[];
-  selectedBranch: string | null;
-  onBranchSelect: (branch: string) => void;
-  placeholder?: string;
-  className?: string;
-  excludeCurrentBranch?: boolean;
-};
-
-function BranchSelector({
-  branches,
-  selectedBranch,
-  onBranchSelect,
-  placeholder = 'Select a branch',
-  className = '',
-  excludeCurrentBranch = false,
-}: Props) {
-  const [branchSearchTerm, setBranchSearchTerm] = useState('');
-  const searchInputRef = useRef<HTMLInputElement>(null);
-
-  // Filter branches based on search term and options
-  const filteredBranches = useMemo(() => {
-    let filtered = branches;
-
-    // Don't filter out current branch, we'll handle it in the UI
-    if (branchSearchTerm.trim()) {
-      filtered = filtered.filter((branch) =>
-        branch.name.toLowerCase().includes(branchSearchTerm.toLowerCase())
-      );
-    }
-
-    return filtered;
-  }, [branches, branchSearchTerm]);
-
-  const displayName = useMemo(() => {
-    if (!selectedBranch) return placeholder;
-
-    // For remote branches, show just the branch name without the remote prefix
-    if (selectedBranch.includes('/')) {
-      const parts = selectedBranch.split('/');
-      return parts[parts.length - 1];
-    }
-    return selectedBranch;
-  }, [selectedBranch, placeholder]);
-
-  const handleBranchSelect = (branchName: string) => {
-    onBranchSelect(branchName);
-    setBranchSearchTerm('');
-  };
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className={`w-full justify-between text-xs ${className}`}
-        >
-          <div className="flex items-center gap-1.5">
-            <GitBranchIcon className="h-3 w-3" />
-            <span className="truncate">{displayName}</span>
-          </div>
-          <ArrowDown className="h-3 w-3" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-80">
-        <div className="p-2">
-          <div className="relative">
-            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              ref={searchInputRef}
-              placeholder="Search branches..."
-              value={branchSearchTerm}
-              onChange={(e) => setBranchSearchTerm(e.target.value)}
-              className="pl-8"
-              onKeyDown={(e) => {
-                // Prevent the dropdown from closing when typing
-                e.stopPropagation();
-              }}
-              autoFocus
-            />
-          </div>
-        </div>
-        <DropdownMenuSeparator />
-        <div className="max-h-64 overflow-y-auto">
-          {filteredBranches.length === 0 ? (
-            <div className="p-2 text-sm text-muted-foreground text-center">
-              No branches found
-            </div>
-          ) : (
-            filteredBranches.map((branch) => {
-              const isCurrentAndExcluded =
-                excludeCurrentBranch && branch.is_current;
-
-              const menuItem = (
-                <DropdownMenuItem
-                  key={branch.name}
-                  onClick={() => {
-                    if (!isCurrentAndExcluded) {
-                      handleBranchSelect(branch.name);
-                    }
-                  }}
-                  disabled={isCurrentAndExcluded}
-                  className={`${selectedBranch === branch.name ? 'bg-accent' : ''} ${
-                    isCurrentAndExcluded ? 'opacity-50 cursor-not-allowed' : ''
-                  }`}
-                >
-                  <div className="flex items-center justify-between w-full">
-                    <span className={branch.is_current ? 'font-medium' : ''}>
-                      {branch.name}
-                    </span>
-                    <div className="flex gap-1">
-                      {branch.is_current && (
-                        <span className="text-xs bg-green-100 text-green-800 px-1 rounded">
-                          current
-                        </span>
-                      )}
-                      {branch.is_remote && (
-                        <span className="text-xs bg-blue-100 text-blue-800 px-1 rounded">
-                          remote
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </DropdownMenuItem>
-              );
-
-              if (isCurrentAndExcluded) {
-                return (
-                  <TooltipProvider key={branch.name}>
-                    <Tooltip>
-                      <TooltipTrigger asChild>{menuItem}</TooltipTrigger>
-                      <TooltipContent>
-                        <p>Cannot rebase a branch onto itself</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                );
-              }
-
-              return menuItem;
-            })
-          )}
-        </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-export default BranchSelector;

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

@@ -1,94 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog.tsx';
-import { Button } from '@/components/ui/button.tsx';
-import { attemptsApi } from '@/lib/api.ts';
-import { useContext } from 'react';
-import {
-  TaskDeletingFilesContext,
-  TaskDetailsContext,
-  TaskDiffContext,
-  TaskSelectedAttemptContext,
-} from '@/components/context/taskDetailsContext.ts';
-
-function DeleteFileConfirmationDialog() {
-  const { task, projectId } = useContext(TaskDetailsContext);
-  const { selectedAttempt } = useContext(TaskSelectedAttemptContext);
-  const { setDeletingFiles, fileToDelete, deletingFiles, setFileToDelete } =
-    useContext(TaskDeletingFilesContext);
-  const { fetchDiff, setDiffError } = useContext(TaskDiffContext);
-
-  const handleConfirmDelete = async () => {
-    if (!fileToDelete || !projectId || !task?.id || !selectedAttempt?.id)
-      return;
-
-    setDeletingFiles((prev) => new Set(prev).add(fileToDelete));
-
-    try {
-      await attemptsApi.deleteFile(
-        projectId!,
-        selectedAttempt.task_id,
-        selectedAttempt.id,
-        fileToDelete
-      );
-      await fetchDiff();
-    } catch (error: unknown) {
-      // @ts-expect-error it is type ApiError
-      setDiffError(error.message || 'Failed to delete file');
-    } finally {
-      setDeletingFiles((prev) => {
-        const newSet = new Set(prev);
-        newSet.delete(fileToDelete);
-        return newSet;
-      });
-      setFileToDelete(null);
-    }
-  };
-
-  const handleCancelDelete = () => {
-    setFileToDelete(null);
-  };
-
-  return (
-    <Dialog open={!!fileToDelete} onOpenChange={() => handleCancelDelete()}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete File</DialogTitle>
-          <DialogDescription>
-            Are you sure you want to delete the file{' '}
-            <span className="font-mono font-medium">"{fileToDelete}"</span>?
-          </DialogDescription>
-        </DialogHeader>
-        <div className="py-4">
-          <div className="bg-red-50 border border-red-200 rounded-md p-3">
-            <p className="text-sm text-red-800">
-              <strong>Warning:</strong> This action will permanently remove the
-              entire file from the worktree. This cannot be undone.
-            </p>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={handleCancelDelete}>
-            Cancel
-          </Button>
-          <Button
-            variant="destructive"
-            onClick={handleConfirmDelete}
-            disabled={deletingFiles.has(fileToDelete || '')}
-          >
-            {deletingFiles.has(fileToDelete || '')
-              ? 'Deleting...'
-              : 'Delete File'}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default DeleteFileConfirmationDialog;

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

@@ -1,119 +0,0 @@
-import { useContext, useState } from 'react';
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import type { EditorType } from 'shared/types';
-import { TaskDetailsContext } from '@/components/context/taskDetailsContext.ts';
-
-interface EditorSelectionDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-const editorOptions: {
-  value: EditorType;
-  label: string;
-  description: string;
-}[] = [
-  {
-    value: 'vscode',
-    label: 'Visual Studio Code',
-    description: "Microsoft's popular code editor",
-  },
-  {
-    value: 'cursor',
-    label: 'Cursor',
-    description: 'AI-powered code editor',
-  },
-  {
-    value: 'windsurf',
-    label: 'Windsurf',
-    description: 'Modern code editor',
-  },
-  {
-    value: 'intellij',
-    label: 'IntelliJ IDEA',
-    description: 'JetBrains IDE',
-  },
-  {
-    value: 'zed',
-    label: 'Zed',
-    description: 'High-performance code editor',
-  },
-  {
-    value: 'custom',
-    label: 'Custom Editor',
-    description: 'Use your configured custom editor',
-  },
-];
-
-export function EditorSelectionDialog({
-  isOpen,
-  onClose,
-}: EditorSelectionDialogProps) {
-  const { handleOpenInEditor } = useContext(TaskDetailsContext);
-  const [selectedEditor, setSelectedEditor] = useState<EditorType>('vscode');
-
-  const handleConfirm = () => {
-    handleOpenInEditor(selectedEditor);
-    onClose();
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Choose Editor</DialogTitle>
-          <DialogDescription>
-            The default editor failed to open. Please select an alternative
-            editor to open the task worktree.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <div className="space-y-2">
-            <label className="text-sm font-medium">Editor</label>
-            <Select
-              value={selectedEditor}
-              onValueChange={(value) => setSelectedEditor(value as EditorType)}
-            >
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {editorOptions.map((option) => (
-                  <SelectItem key={option.value} value={option.value}>
-                    <div className="flex flex-col">
-                      <span className="font-medium">{option.label}</span>
-                      <span className="text-xs text-muted-foreground">
-                        {option.description}
-                      </span>
-                    </div>
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button onClick={handleConfirm}>Open Editor</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}