automagik-forge 0.1.11 → 0.1.13

package/frontend/src/components/ProvidePatDialog.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from './ui/dialog';
+import { Input } from './ui/input';
+import { Button } from './ui/button';
+import { useConfig } from './config-provider';
+import { Alert, AlertDescription } from './ui/alert';
+
+export function ProvidePatDialog({
+  open,
+  onOpenChange,
+  errorMessage,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  errorMessage?: string;
+}) {
+  const { config, updateAndSaveConfig } = useConfig();
+  const [pat, setPat] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSave = async () => {
+    if (!config) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await updateAndSaveConfig({
+        github: {
+          ...config.github,
+          pat,
+        },
+      });
+      onOpenChange(false);
+    } catch (err) {
+      setError('Failed to save Personal Access Token');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Provide GitHub Personal Access Token</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-2">
+          <p>
+            {errorMessage ||
+              'Your GitHub OAuth token does not have sufficient permissions to open a PR in this repository.'}
+            <br />
+            <br />
+            Please provide a Personal Access Token with <b>repo</b> permissions.
+          </p>
+          <Input
+            placeholder="ghp_xxxxxxxxxxxxxxxxxxxx"
+            value={pat}
+            onChange={(e) => setPat(e.target.value)}
+            autoFocus
+          />
+          <p className="text-sm text-muted-foreground">
+            <a
+              href="https://github.com/settings/tokens"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:underline"
+            >
+              Create a token here
+            </a>
+          </p>
+          {error && (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+        </div>
+        <DialogFooter>
+          <Button onClick={handleSave} disabled={saving || !pat || !config}>
+            {saving ? 'Saving...' : 'Save'}
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={saving}
+          >
+            Cancel
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/src/components/TaskTemplateManager.tsx

@@ -0,0 +1,336 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Plus, Edit2, Trash2, Loader2 } from 'lucide-react';
+import { templatesApi } from '@/lib/api';
+import type {
+  TaskTemplate,
+  CreateTaskTemplate,
+  UpdateTaskTemplate,
+} from 'shared/types';
+
+interface TaskTemplateManagerProps {
+  projectId?: string;
+  isGlobal?: boolean;
+}
+
+export function TaskTemplateManager({
+  projectId,
+  isGlobal = false,
+}: TaskTemplateManagerProps) {
+  const [templates, setTemplates] = useState<TaskTemplate[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [editingTemplate, setEditingTemplate] = useState<TaskTemplate | null>(
+    null
+  );
+  const [formData, setFormData] = useState({
+    template_name: '',
+    title: '',
+    description: '',
+  });
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchTemplates = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = isGlobal
+        ? await templatesApi.listGlobal()
+        : projectId
+          ? await templatesApi.listByProject(projectId)
+          : [];
+
+      // Filter to show only templates for this specific scope
+      const filtered = data.filter((template) =>
+        isGlobal
+          ? template.project_id === null
+          : template.project_id === projectId
+      );
+
+      setTemplates(filtered);
+    } catch (err) {
+      console.error('Failed to fetch templates:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [isGlobal, projectId]);
+
+  useEffect(() => {
+    fetchTemplates();
+  }, [fetchTemplates]);
+
+  const handleOpenDialog = useCallback((template?: TaskTemplate) => {
+    if (template) {
+      setEditingTemplate(template);
+      setFormData({
+        template_name: template.template_name,
+        title: template.title,
+        description: template.description || '',
+      });
+    } else {
+      setEditingTemplate(null);
+      setFormData({
+        template_name: '',
+        title: '',
+        description: '',
+      });
+    }
+    setError(null);
+    setIsDialogOpen(true);
+  }, []);
+
+  const handleCloseDialog = useCallback(() => {
+    setIsDialogOpen(false);
+    setEditingTemplate(null);
+    setFormData({
+      template_name: '',
+      title: '',
+      description: '',
+    });
+    setError(null);
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (!formData.template_name.trim() || !formData.title.trim()) {
+      setError('Template name and title are required');
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+
+    try {
+      if (editingTemplate) {
+        const updateData: UpdateTaskTemplate = {
+          template_name: formData.template_name,
+          title: formData.title,
+          description: formData.description || null,
+        };
+        await templatesApi.update(editingTemplate.id, updateData);
+      } else {
+        const createData: CreateTaskTemplate = {
+          project_id: isGlobal ? null : projectId || null,
+          template_name: formData.template_name,
+          title: formData.title,
+          description: formData.description || null,
+        };
+        await templatesApi.create(createData);
+      }
+      await fetchTemplates();
+      handleCloseDialog();
+    } catch (err: any) {
+      setError(err.message || 'Failed to save template');
+    } finally {
+      setSaving(false);
+    }
+  }, [
+    formData,
+    editingTemplate,
+    isGlobal,
+    projectId,
+    fetchTemplates,
+    handleCloseDialog,
+  ]);
+
+  // Handle keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Command/Ctrl + Enter to save template
+      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+        if (isDialogOpen && !saving) {
+          event.preventDefault();
+          handleSave();
+        }
+      }
+    };
+
+    if (isDialogOpen) {
+      document.addEventListener('keydown', handleKeyDown, true); // Use capture phase for priority
+      return () => document.removeEventListener('keydown', handleKeyDown, true);
+    }
+  }, [isDialogOpen, saving, handleSave]);
+
+  const handleDelete = useCallback(
+    async (template: TaskTemplate) => {
+      if (
+        !confirm(
+          `Are you sure you want to delete the template "${template.template_name}"?`
+        )
+      ) {
+        return;
+      }
+
+      try {
+        await templatesApi.delete(template.id);
+        await fetchTemplates();
+      } catch (err) {
+        console.error('Failed to delete template:', err);
+      }
+    },
+    [fetchTemplates]
+  );
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-8 w-8 animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h3 className="text-lg font-semibold">
+          {isGlobal ? 'Global Task Templates' : 'Project Task Templates'}
+        </h3>
+        <Button onClick={() => handleOpenDialog()} size="sm">
+          <Plus className="h-4 w-4 mr-2" />
+          Add Template
+        </Button>
+      </div>
+
+      {templates.length === 0 ? (
+        <div className="text-center py-8 text-muted-foreground">
+          No templates yet. Create your first template to get started.
+        </div>
+      ) : (
+        <div className="border rounded-lg overflow-hidden">
+          <div className="max-h-[400px] overflow-auto">
+            <table className="w-full">
+              <thead className="border-b bg-muted/50 sticky top-0">
+                <tr>
+                  <th className="text-left p-2 text-sm font-medium">
+                    Template Name
+                  </th>
+                  <th className="text-left p-2 text-sm font-medium">Title</th>
+                  <th className="text-left p-2 text-sm font-medium">
+                    Description
+                  </th>
+                  <th className="text-right p-2 text-sm font-medium">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {templates.map((template) => (
+                  <tr
+                    key={template.id}
+                    className="border-b hover:bg-muted/30 transition-colors"
+                  >
+                    <td className="p-2 text-sm font-medium">
+                      {template.template_name}
+                    </td>
+                    <td className="p-2 text-sm">{template.title}</td>
+                    <td className="p-2 text-sm">
+                      <div
+                        className="max-w-[200px] truncate"
+                        title={template.description || ''}
+                      >
+                        {template.description || (
+                          <span className="text-muted-foreground">-</span>
+                        )}
+                      </div>
+                    </td>
+                    <td className="p-2">
+                      <div className="flex justify-end gap-1">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-7 w-7"
+                          onClick={() => handleOpenDialog(template)}
+                          title="Edit template"
+                        >
+                          <Edit2 className="h-3 w-3" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-7 w-7"
+                          onClick={() => handleDelete(template)}
+                          title="Delete template"
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>
+              {editingTemplate ? 'Edit Template' : 'Create Template'}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div>
+              <Label htmlFor="template-name">Template Name</Label>
+              <Input
+                id="template-name"
+                value={formData.template_name}
+                onChange={(e) =>
+                  setFormData({ ...formData, template_name: e.target.value })
+                }
+                placeholder="e.g., Bug Fix, Feature Request"
+              />
+            </div>
+            <div>
+              <Label htmlFor="template-title">Default Title</Label>
+              <Input
+                id="template-title"
+                value={formData.title}
+                onChange={(e) =>
+                  setFormData({ ...formData, title: e.target.value })
+                }
+                placeholder="e.g., Fix bug in..."
+              />
+            </div>
+            <div>
+              <Label htmlFor="template-description">Default Description</Label>
+              <Textarea
+                id="template-description"
+                value={formData.description}
+                onChange={(e) =>
+                  setFormData({ ...formData, description: e.target.value })
+                }
+                placeholder="Enter a default description for tasks created with this template"
+                rows={4}
+              />
+            </div>
+            {error && <div className="text-sm text-red-600">{error}</div>}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={handleCloseDialog}
+              disabled={saving}
+            >
+              Cancel
+            </Button>
+            <Button onClick={handleSave} disabled={saving}>
+              {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {editingTemplate ? 'Update' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/frontend/src/components/config-provider.tsx

@@ -0,0 +1,119 @@
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import type { Config } from 'shared/types';
+import { configApi, githubAuthApi } from '../lib/api';
+
+interface ConfigContextType {
+  config: Config | null;
+  updateConfig: (updates: Partial<Config>) => void;
+  updateAndSaveConfig: (updates: Partial<Config>) => void;
+  saveConfig: () => Promise<boolean>;
+  loading: boolean;
+  githubTokenInvalid: boolean;
+}
+
+const ConfigContext = createContext<ConfigContextType | undefined>(undefined);
+
+interface ConfigProviderProps {
+  children: ReactNode;
+}
+
+export function ConfigProvider({ children }: ConfigProviderProps) {
+  const [config, setConfig] = useState<Config | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [githubTokenInvalid, setGithubTokenInvalid] = useState(false);
+
+  useEffect(() => {
+    const loadConfig = async () => {
+      try {
+        const config = await configApi.getConfig();
+        setConfig(config);
+      } catch (err) {
+        console.error('Error loading config:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadConfig();
+  }, []);
+
+  // Check GitHub token validity after config loads
+  useEffect(() => {
+    if (loading) return;
+    const checkToken = async () => {
+      const valid = await githubAuthApi.checkGithubToken();
+      if (valid === undefined) {
+        // Network/server error: do not update githubTokenInvalid
+        return;
+      }
+      setGithubTokenInvalid(!valid);
+    };
+    checkToken();
+  }, [loading]);
+
+  const updateConfig = useCallback((updates: Partial<Config>) => {
+    setConfig((prev) => (prev ? { ...prev, ...updates } : null));
+  }, []);
+
+  const saveConfig = useCallback(async (): Promise<boolean> => {
+    if (!config) return false;
+    try {
+      await configApi.saveConfig(config);
+      return true;
+    } catch (err) {
+      console.error('Error saving config:', err);
+      return false;
+    }
+  }, [config]);
+
+  const updateAndSaveConfig = useCallback(
+    async (updates: Partial<Config>) => {
+      setLoading(true);
+      const newConfig: Config | null = config
+        ? { ...config, ...updates }
+        : null;
+      try {
+        if (!newConfig) return false;
+        const saved = await configApi.saveConfig(newConfig);
+        setConfig(saved);
+        return true;
+      } catch (err) {
+        console.error('Error saving config:', err);
+        return false;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [config]
+  );
+
+  return (
+    <ConfigContext.Provider
+      value={{
+        config,
+        updateConfig,
+        saveConfig,
+        loading,
+        updateAndSaveConfig,
+        githubTokenInvalid,
+      }}
+    >
+      {children}
+    </ConfigContext.Provider>
+  );
+}
+
+export function useConfig() {
+  const context = useContext(ConfigContext);
+  if (context === undefined) {
+    throw new Error('useConfig must be used within a ConfigProvider');
+  }
+  return context;
+}