automagik-forge 0.1.11 → 0.1.13

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

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

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

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

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

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