automagik-forge 0.1.11 → 0.1.13

package/frontend/src/components/projects/project-form-fields.tsx

@@ -0,0 +1,238 @@
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { AlertCircle, Folder } from 'lucide-react';
+
+interface ProjectFormFieldsProps {
+  isEditing: boolean;
+  repoMode: 'existing' | 'new';
+  setRepoMode: (mode: 'existing' | 'new') => void;
+  gitRepoPath: string;
+  handleGitRepoPathChange: (path: string) => void;
+  setShowFolderPicker: (show: boolean) => void;
+  parentPath: string;
+  setParentPath: (path: string) => void;
+  folderName: string;
+  setFolderName: (name: string) => void;
+  setName: (name: string) => void;
+  name: string;
+  setupScript: string;
+  setSetupScript: (script: string) => void;
+  devScript: string;
+  setDevScript: (script: string) => void;
+  cleanupScript: string;
+  setCleanupScript: (script: string) => void;
+  error: string;
+}
+
+export function ProjectFormFields({
+  isEditing,
+  repoMode,
+  setRepoMode,
+  gitRepoPath,
+  handleGitRepoPathChange,
+  setShowFolderPicker,
+  parentPath,
+  setParentPath,
+  folderName,
+  setFolderName,
+  setName,
+  name,
+  setupScript,
+  setSetupScript,
+  devScript,
+  setDevScript,
+  cleanupScript,
+  setCleanupScript,
+  error,
+}: ProjectFormFieldsProps) {
+  return (
+    <>
+      {!isEditing && (
+        <div className="space-y-3">
+          <Label>Repository Type</Label>
+          <div className="flex space-x-4">
+            <label className="flex items-center space-x-2 cursor-pointer">
+              <input
+                type="radio"
+                name="repoMode"
+                value="existing"
+                checked={repoMode === 'existing'}
+                onChange={(e) =>
+                  setRepoMode(e.target.value as 'existing' | 'new')
+                }
+                className="text-primary"
+              />
+              <span className="text-sm">Use existing repository</span>
+            </label>
+            <label className="flex items-center space-x-2 cursor-pointer">
+              <input
+                type="radio"
+                name="repoMode"
+                value="new"
+                checked={repoMode === 'new'}
+                onChange={(e) =>
+                  setRepoMode(e.target.value as 'existing' | 'new')
+                }
+                className="text-primary"
+              />
+              <span className="text-sm">Create new repository</span>
+            </label>
+          </div>
+        </div>
+      )}
+
+      {repoMode === 'existing' || isEditing ? (
+        <div className="space-y-2">
+          <Label htmlFor="git-repo-path">Git Repository Path</Label>
+          <div className="flex space-x-2">
+            <Input
+              id="git-repo-path"
+              type="text"
+              value={gitRepoPath}
+              onChange={(e) => handleGitRepoPathChange(e.target.value)}
+              placeholder="/path/to/your/existing/repo"
+              required
+              className="flex-1"
+            />
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setShowFolderPicker(true)}
+            >
+              <Folder className="h-4 w-4" />
+            </Button>
+          </div>
+          {!isEditing && (
+            <p className="text-sm text-muted-foreground">
+              Select a folder that already contains a git repository
+            </p>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="parent-path">Parent Directory</Label>
+            <div className="flex space-x-2">
+              <Input
+                id="parent-path"
+                type="text"
+                value={parentPath}
+                onChange={(e) => setParentPath(e.target.value)}
+                placeholder="/path/to/parent/directory"
+                required
+                className="flex-1"
+              />
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setShowFolderPicker(true)}
+              >
+                <Folder className="h-4 w-4" />
+              </Button>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Choose where to create the new repository
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="folder-name">Repository Folder Name</Label>
+            <Input
+              id="folder-name"
+              type="text"
+              value={folderName}
+              onChange={(e) => {
+                setFolderName(e.target.value);
+                if (e.target.value) {
+                  setName(
+                    e.target.value
+                      .replace(/[-_]/g, ' ')
+                      .replace(/\b\w/g, (l) => l.toUpperCase())
+                  );
+                }
+              }}
+              placeholder="my-awesome-project"
+              required
+              className="flex-1"
+            />
+            <p className="text-sm text-muted-foreground">
+              The project name will be auto-populated from this folder name
+            </p>
+          </div>
+        </div>
+      )}
+
+      <div className="space-y-2">
+        <Label htmlFor="name">Project Name</Label>
+        <Input
+          id="name"
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Enter project name"
+          required
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="setup-script">Setup Script (Optional)</Label>
+        <textarea
+          id="setup-script"
+          value={setupScript}
+          onChange={(e) => setSetupScript(e.target.value)}
+          placeholder="#!/bin/bash&#10;npm install&#10;# Add any setup commands here..."
+          rows={4}
+          className="w-full px-3 py-2 border border-input bg-background text-foreground rounded-md resize-vertical focus:outline-none focus:ring-2 focus:ring-ring"
+        />
+        <p className="text-sm text-muted-foreground">
+          This script will run after creating the worktree and before the
+          executor starts. Use it for setup tasks like installing dependencies
+          or preparing the environment.
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="dev-script">Dev Server Script (Optional)</Label>
+        <textarea
+          id="dev-script"
+          value={devScript}
+          onChange={(e) => setDevScript(e.target.value)}
+          placeholder="#!/bin/bash&#10;npm run dev&#10;# Add dev server start command here..."
+          rows={4}
+          className="w-full px-3 py-2 border border-input bg-background text-foreground rounded-md resize-vertical focus:outline-none focus:ring-2 focus:ring-ring"
+        />
+        <p className="text-sm text-muted-foreground">
+          This script can be run from task attempts to start a development
+          server. Use it to quickly start your project's dev server for testing
+          changes.
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="cleanup-script">Cleanup Script (Optional)</Label>
+        <textarea
+          id="cleanup-script"
+          value={cleanupScript}
+          onChange={(e) => setCleanupScript(e.target.value)}
+          placeholder="#!/bin/bash&#10;# Add cleanup commands here...&#10;# This runs after coding agent execution"
+          rows={4}
+          className="w-full px-3 py-2 border border-input bg-background text-foreground rounded-md resize-vertical focus:outline-none focus:ring-2 focus:ring-ring"
+        />
+        <p className="text-sm text-muted-foreground">
+          This script will run after coding agent execution is complete. Use it
+          for quality assurance tasks like running linters, formatters, tests,
+          or other validation steps.
+        </p>
+      </div>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,301 @@
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { FolderPicker } from '@/components/ui/folder-picker';
+import { TaskTemplateManager } from '@/components/TaskTemplateManager';
+import { ProjectFormFields } from './project-form-fields';
+import { CreateProject, Project, UpdateProject } from 'shared/types';
+import { projectsApi } from '@/lib/api';
+
+interface ProjectFormProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  project?: Project | null;
+}
+
+export function ProjectForm({
+  open,
+  onClose,
+  onSuccess,
+  project,
+}: ProjectFormProps) {
+  const [name, setName] = useState(project?.name || '');
+  const [gitRepoPath, setGitRepoPath] = useState(project?.git_repo_path || '');
+  const [setupScript, setSetupScript] = useState(project?.setup_script ?? '');
+  const [devScript, setDevScript] = useState(project?.dev_script ?? '');
+  const [cleanupScript, setCleanupScript] = useState(
+    project?.cleanup_script ?? ''
+  );
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [showFolderPicker, setShowFolderPicker] = useState(false);
+  const [repoMode, setRepoMode] = useState<'existing' | 'new'>('existing');
+  const [parentPath, setParentPath] = useState('');
+  const [folderName, setFolderName] = useState('');
+
+  const isEditing = !!project;
+
+  // Update form fields when project prop changes
+  useEffect(() => {
+    if (project) {
+      setName(project.name || '');
+      setGitRepoPath(project.git_repo_path || '');
+      setSetupScript(project.setup_script ?? '');
+      setDevScript(project.dev_script ?? '');
+      setCleanupScript(project.cleanup_script ?? '');
+    } else {
+      setName('');
+      setGitRepoPath('');
+      setSetupScript('');
+      setDevScript('');
+      setCleanupScript('');
+    }
+  }, [project]);
+
+  // Auto-populate project name from directory name
+  const handleGitRepoPathChange = (path: string) => {
+    setGitRepoPath(path);
+
+    // Only auto-populate name for new projects
+    if (!isEditing && path) {
+      // Extract the last part of the path (directory name)
+      const dirName = path.split('/').filter(Boolean).pop() || '';
+      if (dirName) {
+        // Clean up the directory name for a better project name
+        const cleanName = dirName
+          .replace(/[-_]/g, ' ') // Replace hyphens and underscores with spaces
+          .replace(/\b\w/g, (l) => l.toUpperCase()); // Capitalize first letter of each word
+        setName(cleanName);
+      }
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      let finalGitRepoPath = gitRepoPath;
+
+      // For new repo mode, construct the full path
+      if (!isEditing && repoMode === 'new') {
+        finalGitRepoPath = `${parentPath}/${folderName}`.replace(/\/+/g, '/');
+      }
+
+      if (isEditing) {
+        const updateData: UpdateProject = {
+          name,
+          git_repo_path: finalGitRepoPath,
+          setup_script: setupScript.trim() || null,
+          dev_script: devScript.trim() || null,
+          cleanup_script: cleanupScript.trim() || null,
+        };
+
+        try {
+          await projectsApi.update(project.id, updateData);
+        } catch (error) {
+          setError('Failed to update project');
+          return;
+        }
+      } else {
+        const createData: CreateProject = {
+          name,
+          git_repo_path: finalGitRepoPath,
+          use_existing_repo: repoMode === 'existing',
+          setup_script: setupScript.trim() || null,
+          dev_script: devScript.trim() || null,
+          cleanup_script: cleanupScript.trim() || null,
+        };
+
+        try {
+          await projectsApi.create(createData);
+        } catch (error) {
+          setError('Failed to create project');
+          return;
+        }
+      }
+
+      onSuccess();
+      setName('');
+      setGitRepoPath('');
+      setSetupScript('');
+      setCleanupScript('');
+      setParentPath('');
+      setFolderName('');
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'An error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    if (project) {
+      setName(project.name || '');
+      setGitRepoPath(project.git_repo_path || '');
+      setSetupScript(project.setup_script ?? '');
+      setDevScript(project.dev_script ?? '');
+    } else {
+      setName('');
+      setGitRepoPath('');
+      setSetupScript('');
+      setDevScript('');
+    }
+    setParentPath('');
+    setFolderName('');
+    setError('');
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        className={isEditing ? 'sm:max-w-[600px]' : 'sm:max-w-[425px]'}
+      >
+        <DialogHeader>
+          <DialogTitle>
+            {isEditing ? 'Edit Project' : 'Create New Project'}
+          </DialogTitle>
+          <DialogDescription>
+            {isEditing
+              ? "Make changes to your project here. Click save when you're done."
+              : 'Choose whether to use an existing git repository or create a new one.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        {isEditing ? (
+          <Tabs defaultValue="general" className="w-full -mt-2">
+            <TabsList className="grid w-full grid-cols-2 mb-4">
+              <TabsTrigger value="general">General</TabsTrigger>
+              <TabsTrigger value="templates">Task Templates</TabsTrigger>
+            </TabsList>
+            <TabsContent value="general" className="space-y-4">
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <ProjectFormFields
+                  isEditing={isEditing}
+                  repoMode={repoMode}
+                  setRepoMode={setRepoMode}
+                  gitRepoPath={gitRepoPath}
+                  handleGitRepoPathChange={handleGitRepoPathChange}
+                  setShowFolderPicker={setShowFolderPicker}
+                  parentPath={parentPath}
+                  setParentPath={setParentPath}
+                  folderName={folderName}
+                  setFolderName={setFolderName}
+                  setName={setName}
+                  name={name}
+                  setupScript={setupScript}
+                  setSetupScript={setSetupScript}
+                  devScript={devScript}
+                  setDevScript={setDevScript}
+                  cleanupScript={cleanupScript}
+                  setCleanupScript={setCleanupScript}
+                  error={error}
+                />
+                <DialogFooter>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleClose}
+                    disabled={loading}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    type="submit"
+                    disabled={loading || !name.trim() || !gitRepoPath.trim()}
+                  >
+                    {loading ? 'Saving...' : 'Save Changes'}
+                  </Button>
+                </DialogFooter>
+              </form>
+            </TabsContent>
+            <TabsContent value="templates" className="mt-0 pt-0">
+              <TaskTemplateManager projectId={project?.id} />
+            </TabsContent>
+          </Tabs>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <ProjectFormFields
+              isEditing={isEditing}
+              repoMode={repoMode}
+              setRepoMode={setRepoMode}
+              gitRepoPath={gitRepoPath}
+              handleGitRepoPathChange={handleGitRepoPathChange}
+              setShowFolderPicker={setShowFolderPicker}
+              parentPath={parentPath}
+              setParentPath={setParentPath}
+              folderName={folderName}
+              setFolderName={setFolderName}
+              setName={setName}
+              name={name}
+              setupScript={setupScript}
+              setSetupScript={setSetupScript}
+              devScript={devScript}
+              setDevScript={setDevScript}
+              cleanupScript={cleanupScript}
+              setCleanupScript={setCleanupScript}
+              error={error}
+            />
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleClose}
+                disabled={loading}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={
+                  loading ||
+                  !name.trim() ||
+                  (repoMode === 'existing'
+                    ? !gitRepoPath.trim()
+                    : !parentPath.trim() || !folderName.trim())
+                }
+              >
+                {loading ? 'Creating...' : 'Create Project'}
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+      </DialogContent>
+
+      <FolderPicker
+        open={showFolderPicker}
+        onClose={() => setShowFolderPicker(false)}
+        onSelect={(path) => {
+          if (repoMode === 'existing' || isEditing) {
+            handleGitRepoPathChange(path);
+          } else {
+            setParentPath(path);
+          }
+          setShowFolderPicker(false);
+        }}
+        value={repoMode === 'existing' || isEditing ? gitRepoPath : parentPath}
+        title={
+          repoMode === 'existing' || isEditing
+            ? 'Select Git Repository'
+            : 'Select Parent Directory'
+        }
+        description={
+          repoMode === 'existing' || isEditing
+            ? 'Choose an existing git repository'
+            : 'Choose where to create the new repository'
+        }
+      />
+    </Dialog>
+  );
+}