automagik-forge 0.1.11 → 0.1.13

package/frontend/src/components/tasks/Toolbar/CreateAttempt.tsx

@@ -0,0 +1,259 @@
+import { Dispatch, SetStateAction, useCallback, useContext } from 'react';
+import { Button } from '@/components/ui/button.tsx';
+import { ArrowDown, Play, Settings2, X } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.tsx';
+import type { GitBranch, TaskAttempt } from 'shared/types.ts';
+import { attemptsApi } from '@/lib/api.ts';
+import {
+  TaskAttemptDataContext,
+  TaskDetailsContext,
+} from '@/components/context/taskDetailsContext.ts';
+import { useConfig } from '@/components/config-provider.tsx';
+import BranchSelector from '@/components/tasks/BranchSelector.tsx';
+import { useKeyboardShortcuts } from '@/lib/keyboard-shortcuts.ts';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog.tsx';
+import { useState } from 'react';
+
+type Props = {
+  branches: GitBranch[];
+  taskAttempts: TaskAttempt[];
+  createAttemptExecutor: string;
+  createAttemptBranch: string | null;
+  selectedExecutor: string;
+  selectedBranch: string | null;
+  fetchTaskAttempts: () => void;
+  setIsInCreateAttemptMode: Dispatch<SetStateAction<boolean>>;
+  setCreateAttemptBranch: Dispatch<SetStateAction<string | null>>;
+  setCreateAttemptExecutor: Dispatch<SetStateAction<string>>;
+  availableExecutors: {
+    id: string;
+    name: string;
+  }[];
+};
+
+function CreateAttempt({
+  branches,
+  taskAttempts,
+  createAttemptExecutor,
+  createAttemptBranch,
+  selectedExecutor,
+  selectedBranch,
+  fetchTaskAttempts,
+  setIsInCreateAttemptMode,
+  setCreateAttemptBranch,
+  setCreateAttemptExecutor,
+  availableExecutors,
+}: Props) {
+  const { task, projectId } = useContext(TaskDetailsContext);
+  const { isAttemptRunning } = useContext(TaskAttemptDataContext);
+  const { config } = useConfig();
+
+  const [showCreateAttemptConfirmation, setShowCreateAttemptConfirmation] =
+    useState(false);
+  const [pendingExecutor, setPendingExecutor] = useState<string | undefined>(
+    undefined
+  );
+  const [pendingBaseBranch, setPendingBaseBranch] = useState<
+    string | undefined
+  >(undefined);
+
+  // Create attempt logic
+  const actuallyCreateAttempt = useCallback(
+    async (executor?: string, baseBranch?: string) => {
+      try {
+        await attemptsApi.create(projectId!, task.id, {
+          executor: executor || selectedExecutor,
+          base_branch: baseBranch || selectedBranch,
+        });
+        fetchTaskAttempts();
+      } catch (error) {
+        // Optionally handle error
+      }
+    },
+    [projectId, task.id, selectedExecutor, selectedBranch, fetchTaskAttempts]
+  );
+
+  // Handler for Enter key or Start button
+  const onCreateNewAttempt = useCallback(
+    (executor?: string, baseBranch?: string, isKeyTriggered?: boolean) => {
+      if (task.status === 'todo' && isKeyTriggered) {
+        setPendingExecutor(executor);
+        setPendingBaseBranch(baseBranch);
+        setShowCreateAttemptConfirmation(true);
+      } else {
+        actuallyCreateAttempt(executor, baseBranch);
+        setShowCreateAttemptConfirmation(false);
+        setIsInCreateAttemptMode(false);
+      }
+    },
+    [task.status, actuallyCreateAttempt, setIsInCreateAttemptMode]
+  );
+
+  // Keyboard shortcuts
+  useKeyboardShortcuts({
+    onEnter: () => {
+      if (showCreateAttemptConfirmation) {
+        handleConfirmCreateAttempt();
+      } else {
+        onCreateNewAttempt(
+          createAttemptExecutor,
+          createAttemptBranch || undefined,
+          true
+        );
+      }
+    },
+    hasOpenDialog: showCreateAttemptConfirmation,
+    closeDialog: () => setShowCreateAttemptConfirmation(false),
+  });
+
+  const handleExitCreateAttemptMode = () => {
+    setIsInCreateAttemptMode(false);
+  };
+
+  const handleCreateAttempt = () => {
+    onCreateNewAttempt(createAttemptExecutor, createAttemptBranch || undefined);
+  };
+
+  const handleConfirmCreateAttempt = () => {
+    actuallyCreateAttempt(pendingExecutor, pendingBaseBranch);
+    setShowCreateAttemptConfirmation(false);
+    setIsInCreateAttemptMode(false);
+  };
+
+  return (
+    <div className="p-4 bg-muted/20 rounded-lg border">
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h3 className="text-base font-semibold">Create Attempt</h3>
+          {taskAttempts.length > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleExitCreateAttemptMode}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+        <div className="flex items-center w-4/5">
+          <label className="text-xs font-medium text-muted-foreground">
+            Each time you start an attempt, a new session is initiated with your
+            selected coding agent, and a git worktree and corresponding task
+            branch are created.
+          </label>
+        </div>
+
+        <div className="grid grid-cols-3 gap-3 items-end">
+          {/* Step 1: Choose Base Branch */}
+          <div className="space-y-1">
+            <div className="flex items-center gap-1.5">
+              <label className="text-xs font-medium text-muted-foreground">
+                Base branch
+              </label>
+            </div>
+            <BranchSelector
+              branches={branches}
+              selectedBranch={createAttemptBranch}
+              onBranchSelect={setCreateAttemptBranch}
+              placeholder="current"
+            />
+          </div>
+
+          {/* Step 2: Choose Coding Agent */}
+          <div className="space-y-1">
+            <div className="flex items-center gap-1.5">
+              <label className="text-xs font-medium text-muted-foreground">
+                Coding agent
+              </label>
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-full justify-between text-xs"
+                >
+                  <div className="flex items-center gap-1.5">
+                    <Settings2 className="h-3 w-3" />
+                    <span className="truncate">
+                      {availableExecutors.find(
+                        (e) => e.id === createAttemptExecutor
+                      )?.name || 'Select agent'}
+                    </span>
+                  </div>
+                  <ArrowDown className="h-3 w-3" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-full">
+                {availableExecutors.map((executor) => (
+                  <DropdownMenuItem
+                    key={executor.id}
+                    onClick={() => setCreateAttemptExecutor(executor.id)}
+                    className={
+                      createAttemptExecutor === executor.id ? 'bg-accent' : ''
+                    }
+                  >
+                    {executor.name}
+                    {config?.executor.type === executor.id && ' (Default)'}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+
+          {/* Step 3: Start Attempt */}
+          <div className="space-y-1">
+            <Button
+              onClick={handleCreateAttempt}
+              disabled={!createAttemptExecutor || isAttemptRunning}
+              size="sm"
+              className="w-full text-xs gap-2"
+            >
+              <Play className="h-3 w-3 mr-1.5" />
+              Start
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Confirmation Dialog */}
+      <Dialog
+        open={showCreateAttemptConfirmation}
+        onOpenChange={setShowCreateAttemptConfirmation}
+      >
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Start New Attempt?</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to start a new attempt for this task? This
+              will create a new session and branch.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowCreateAttemptConfirmation(false)}
+            >
+              Cancel
+            </Button>
+            <Button onClick={handleConfirmCreateAttempt}>Start</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+export default CreateAttempt;

package/frontend/src/components/tasks/Toolbar/CreatePRDialog.tsx

@@ -0,0 +1,243 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Label } from '@radix-ui/react-label';
+import { Textarea } from '@/components/ui/textarea.tsx';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@radix-ui/react-select';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import {
+  TaskDetailsContext,
+  TaskSelectedAttemptContext,
+} from '@/components/context/taskDetailsContext.ts';
+import { ApiError, attemptsApi } from '@/lib/api.ts';
+import { ProvidePatDialog } from '@/components/ProvidePatDialog';
+import { GitHubLoginDialog } from '@/components/GitHubLoginDialog';
+import { GitBranch } from 'shared/types.ts';
+
+type Props = {
+  showCreatePRDialog: boolean;
+  setShowCreatePRDialog: (show: boolean) => void;
+  creatingPR: boolean;
+  setCreatingPR: (creating: boolean) => void;
+  setError: (error: string | null) => void;
+  branches: GitBranch[];
+};
+
+function CreatePrDialog({
+  showCreatePRDialog,
+  setCreatingPR,
+  setShowCreatePRDialog,
+  creatingPR,
+  setError,
+  branches,
+}: Props) {
+  const { projectId, task } = useContext(TaskDetailsContext);
+  const { selectedAttempt } = useContext(TaskSelectedAttemptContext);
+  const [prTitle, setPrTitle] = useState('');
+  const [prBody, setPrBody] = useState('');
+  const [prBaseBranch, setPrBaseBranch] = useState(
+    selectedAttempt?.base_branch || 'main'
+  );
+  const [showPatDialog, setShowPatDialog] = useState(false);
+  const [patDialogError, setPatDialogError] = useState<string | null>(null);
+  const [showGitHubLoginDialog, setShowGitHubLoginDialog] = useState(false);
+
+  useEffect(() => {
+    if (showCreatePRDialog) {
+      setPrTitle(`${task.title} (automagik-forge)`);
+      setPrBody(task.description || '');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showCreatePRDialog]);
+
+  // Update PR base branch when selected attempt changes
+  useEffect(() => {
+    if (selectedAttempt?.base_branch) {
+      setPrBaseBranch(selectedAttempt.base_branch);
+    }
+  }, [selectedAttempt?.base_branch]);
+
+  const handleConfirmCreatePR = useCallback(async () => {
+    if (!projectId || !selectedAttempt?.id || !selectedAttempt?.task_id) return;
+
+    setCreatingPR(true);
+
+    try {
+      const prUrl = await attemptsApi.createPR(
+        projectId!,
+        selectedAttempt.task_id,
+        selectedAttempt.id,
+        {
+          title: prTitle,
+          body: prBody || null,
+          base_branch: prBaseBranch || null,
+        }
+      );
+      // Open the PR URL in a new tab
+      window.open(prUrl, '_blank');
+      setShowCreatePRDialog(false);
+      // Reset form
+      setPrTitle('');
+      setPrBody('');
+      setPrBaseBranch(selectedAttempt?.base_branch || 'main');
+    } catch (err) {
+      const error = err as ApiError;
+      if (
+        error.message ===
+        'GitHub authentication not configured. Please sign in with GitHub.'
+      ) {
+        setShowCreatePRDialog(false);
+        setShowGitHubLoginDialog(true);
+      } else if (error.message === 'insufficient_github_permissions') {
+        setShowCreatePRDialog(false);
+        setPatDialogError(null);
+        setShowPatDialog(true);
+      } else if (error.message === 'github_repo_not_found_or_no_access') {
+        setShowCreatePRDialog(false);
+        setPatDialogError(
+          'Your token does not have access to this repository, or the repository does not exist. Please check the repository URL and/or provide a Personal Access Token with access.'
+        );
+        setShowPatDialog(true);
+      } else if (error.status === 403) {
+        setShowCreatePRDialog(false);
+        setPatDialogError(null);
+        setShowPatDialog(true);
+      } else if (error.status === 404) {
+        setShowCreatePRDialog(false);
+        setPatDialogError(
+          'Your token does not have access to this repository, or the repository does not exist. Please check the repository URL and/or provide a Personal Access Token with access.'
+        );
+        setShowPatDialog(true);
+      } else {
+        setError(error.message || 'Failed to create GitHub PR');
+      }
+    } finally {
+      setCreatingPR(false);
+    }
+  }, [
+    projectId,
+    selectedAttempt,
+    prBaseBranch,
+    prBody,
+    prTitle,
+    setCreatingPR,
+    setError,
+    setShowCreatePRDialog,
+    setPatDialogError,
+    setShowPatDialog,
+    setShowGitHubLoginDialog,
+  ]);
+
+  const handleCancelCreatePR = useCallback(() => {
+    setShowCreatePRDialog(false);
+    // Reset form to empty state
+    setPrTitle('');
+    setPrBody('');
+    setPrBaseBranch('main');
+  }, [setShowCreatePRDialog]);
+
+  return (
+    <>
+      <Dialog
+        open={showCreatePRDialog}
+        onOpenChange={() => handleCancelCreatePR()}
+      >
+        <DialogContent className="sm:max-w-[525px]">
+          <DialogHeader>
+            <DialogTitle>Create GitHub Pull Request</DialogTitle>
+            <DialogDescription>
+              Create a pull request for this task attempt on GitHub.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="pr-title">Title</Label>
+              <Input
+                id="pr-title"
+                value={prTitle}
+                onChange={(e) => setPrTitle(e.target.value)}
+                placeholder="Enter PR title"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="pr-body">Description (optional)</Label>
+              <Textarea
+                id="pr-body"
+                value={prBody}
+                onChange={(e) => setPrBody(e.target.value)}
+                placeholder="Enter PR description"
+                rows={4}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="pr-base">Base Branch</Label>
+              <Select value={prBaseBranch} onValueChange={setPrBaseBranch}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select base branch" />
+                </SelectTrigger>
+                <SelectContent>
+                  {branches
+                    .filter((branch) => !branch.is_remote) // Only show local branches
+                    .map((branch) => (
+                      <SelectItem key={branch.name} value={branch.name}>
+                        {branch.name}
+                        {branch.is_current && ' (current)'}
+                      </SelectItem>
+                    ))}
+                  {/* Add common branches as fallback if not in the list */}
+                  {!branches.some((b) => b.name === 'main' && !b.is_remote) && (
+                    <SelectItem value="main">main</SelectItem>
+                  )}
+                  {!branches.some(
+                    (b) => b.name === 'master' && !b.is_remote
+                  ) && <SelectItem value="master">master</SelectItem>}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={handleCancelCreatePR}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleConfirmCreatePR}
+              disabled={creatingPR || !prTitle.trim()}
+              className="bg-blue-600 hover:bg-blue-700"
+            >
+              {creatingPR ? 'Creating...' : 'Create PR'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ProvidePatDialog
+        open={showPatDialog}
+        onOpenChange={(open) => {
+          setShowPatDialog(open);
+          if (!open) setPatDialogError(null);
+        }}
+        errorMessage={patDialogError || undefined}
+      />
+
+      <GitHubLoginDialog
+        open={showGitHubLoginDialog}
+        onOpenChange={setShowGitHubLoginDialog}
+      />
+    </>
+  );
+}
+
+export default CreatePrDialog;