automagik-forge 0.1.13 → 0.1.14

package/frontend/src/components/GitHubLoginDialog.tsx

@@ -1,314 +0,0 @@
-import { useEffect, useState } from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from './ui/dialog';
-import { Button } from './ui/button';
-import { useConfig } from './config-provider';
-import { Check, Clipboard, Github } from 'lucide-react';
-import { Loader } from './ui/loader';
-import { githubAuthApi } from '../lib/api';
-import { DeviceStartResponse } from 'shared/types.ts';
-import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
-
-export function GitHubLoginDialog({
-  open,
-  onOpenChange,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}) {
-  const { config, loading, githubTokenInvalid } = useConfig();
-  const [fetching, setFetching] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [deviceState, setDeviceState] = useState<null | DeviceStartResponse>(
-    null
-  );
-  const [polling, setPolling] = useState(false);
-  const [copied, setCopied] = useState(false);
-
-  const isAuthenticated =
-    !!(config?.github?.username && config?.github?.token) &&
-    !githubTokenInvalid;
-
-  const handleLogin = async () => {
-    setFetching(true);
-    setError(null);
-    setDeviceState(null);
-    try {
-      const data = await githubAuthApi.start();
-      setDeviceState(data);
-      setPolling(true);
-    } catch (e: any) {
-      console.error(e);
-      setError(e?.message || 'Network error');
-    } finally {
-      setFetching(false);
-    }
-  };
-
-  // Poll for completion
-  useEffect(() => {
-    let timer: number;
-    if (polling && deviceState) {
-      const poll = async () => {
-        try {
-          await githubAuthApi.poll(deviceState.device_code);
-          setPolling(false);
-          setDeviceState(null);
-          setError(null);
-          onOpenChange(false);
-        } catch (e: any) {
-          if (e?.message === 'authorization_pending') {
-            timer = setTimeout(poll, (deviceState.interval || 5) * 1000);
-          } else if (e?.message === 'slow_down') {
-            timer = setTimeout(poll, (deviceState.interval + 5) * 1000);
-          } else if (e?.message === 'expired_token') {
-            setPolling(false);
-            setError('Device code expired. Please try again.');
-            setDeviceState(null);
-          } else {
-            setPolling(false);
-            setError(e?.message || 'Login failed.');
-            setDeviceState(null);
-          }
-        }
-      };
-      timer = setTimeout(poll, deviceState.interval * 1000);
-    }
-    return () => {
-      if (timer) clearTimeout(timer);
-    };
-  }, [polling, deviceState]);
-
-  // Automatically copy code to clipboard when deviceState is set
-  useEffect(() => {
-    if (deviceState?.user_code) {
-      copyToClipboard(deviceState.user_code);
-    }
-  }, [deviceState?.user_code]);
-
-  const copyToClipboard = async (text: string) => {
-    try {
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        await navigator.clipboard.writeText(text);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-      } else {
-        // Fallback for environments where clipboard API is not available
-        const textArea = document.createElement('textarea');
-        textArea.value = text;
-        textArea.style.position = 'fixed';
-        textArea.style.left = '-999999px';
-        textArea.style.top = '-999999px';
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-        try {
-          document.execCommand('copy');
-          setCopied(true);
-          setTimeout(() => setCopied(false), 2000);
-        } catch (err) {
-          console.warn('Copy to clipboard failed:', err);
-        }
-        document.body.removeChild(textArea);
-      }
-    } catch (err) {
-      console.warn('Copy to clipboard failed:', err);
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <div className="flex items-center gap-3">
-            <Github className="h-6 w-6 text-primary" />
-            <DialogTitle>Sign in with GitHub</DialogTitle>
-          </div>
-          <DialogDescription className="text-left pt-1">
-            Connect your GitHub account to create and manage pull requests
-            directly from Automagik Forge.
-          </DialogDescription>
-        </DialogHeader>
-        {loading ? (
-          <Loader message="Loading…" size={32} className="py-8" />
-        ) : isAuthenticated ? (
-          <div className="space-y-4 py-3">
-            <Card>
-              <CardContent className="text-center py-8">
-                <div className="flex items-center justify-center gap-3 mb-4">
-                  <Check className="h-8 w-8 text-green-500" />
-                  <Github className="h-8 w-8 text-gray-600" />
-                </div>
-                <div className="text-lg font-medium text-gray-900 mb-1">
-                  Successfully connected!
-                </div>
-                <div className="text-sm text-muted-foreground">
-                  You are signed in as <b>{config?.github?.username ?? ''}</b>
-                </div>
-              </CardContent>
-            </Card>
-            <DialogFooter>
-              <Button onClick={() => onOpenChange(false)} className="w-full">
-                Close
-              </Button>
-            </DialogFooter>
-          </div>
-        ) : deviceState ? (
-          <div className="space-y-4 py-3">
-            <Card>
-              <CardHeader className="pb-3">
-                <CardTitle className="text-base">
-                  Complete GitHub Authorization
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4 pt-0">
-                <div className="flex items-start gap-3">
-                  <span className="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-sm font-semibold">
-                    1
-                  </span>
-                  <div>
-                    <p className="text-sm font-medium text-gray-900 mb-1">
-                      Go to GitHub Device Authorization
-                    </p>
-                    <a
-                      href={deviceState.verification_uri}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-blue-600 hover:text-blue-800 text-sm underline"
-                    >
-                      {deviceState.verification_uri}
-                    </a>
-                  </div>
-                </div>
-
-                <div className="flex items-start gap-3">
-                  <span className="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-sm font-semibold">
-                    2
-                  </span>
-                  <div className="flex-1">
-                    <p className="text-sm font-medium text-gray-900 mb-3">
-                      Enter this code:
-                    </p>
-                    <div className="flex items-center gap-3">
-                      <span className="text-xl font-mono font-bold tracking-[0.2em] bg-gray-50 border rounded-lg px-4 py-2 text-gray-900">
-                        {deviceState.user_code}
-                      </span>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => copyToClipboard(deviceState.user_code)}
-                        disabled={copied}
-                      >
-                        {copied ? (
-                          <>
-                            <Check className="w-4 h-4 mr-1" />
-                            Copied
-                          </>
-                        ) : (
-                          <>
-                            <Clipboard className="w-4 h-4 mr-1" />
-                            Copy
-                          </>
-                        )}
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 p-2 rounded-lg">
-              <Github className="h-3 w-3 flex-shrink-0" />
-              <span>
-                {copied
-                  ? 'Code copied to clipboard! Complete the authorization on GitHub.'
-                  : 'Waiting for you to authorize this application on GitHub...'}
-              </span>
-            </div>
-
-            {error && (
-              <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
-                <div className="text-red-600 text-sm">{error}</div>
-              </div>
-            )}
-
-            <DialogFooter>
-              <Button variant="outline" onClick={() => onOpenChange(false)}>
-                Skip
-              </Button>
-            </DialogFooter>
-          </div>
-        ) : (
-          <div className="space-y-4 py-3">
-            <Card>
-              <CardHeader className="pb-3">
-                <CardTitle className="text-base">
-                  Why do you need GitHub access?
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-3 pt-0">
-                <div className="flex items-start gap-3">
-                  <Check className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
-                  <div>
-                    <p className="text-sm font-medium">Create pull requests</p>
-                    <p className="text-xs text-muted-foreground">
-                      Generate PRs directly from your task attempts
-                    </p>
-                  </div>
-                </div>
-                <div className="flex items-start gap-3">
-                  <Check className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
-                  <div>
-                    <p className="text-sm font-medium">Manage repositories</p>
-                    <p className="text-xs text-muted-foreground">
-                      Access your repos to push changes and create branches
-                    </p>
-                  </div>
-                </div>
-                <div className="flex items-start gap-3">
-                  <Check className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
-                  <div>
-                    <p className="text-sm font-medium">Streamline workflow</p>
-                    <p className="text-xs text-muted-foreground">
-                      Skip manual PR creation and focus on coding
-                    </p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {error && (
-              <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
-                <div className="text-red-600 text-sm">{error}</div>
-              </div>
-            )}
-
-            <DialogFooter className="gap-3 flex-col sm:flex-row">
-              <Button
-                variant="outline"
-                onClick={() => onOpenChange(false)}
-                className="flex-1"
-              >
-                Skip
-              </Button>
-              <Button
-                onClick={handleLogin}
-                disabled={fetching}
-                className="flex-1"
-              >
-                <Github className="h-4 w-4 mr-2" />
-                {fetching ? 'Starting…' : 'Sign in with GitHub'}
-              </Button>
-            </DialogFooter>
-          </div>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-}

package/frontend/src/components/OnboardingDialog.tsx

@@ -1,185 +0,0 @@
-import { useState } from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Sparkles, Code } from 'lucide-react';
-import type { EditorType, ExecutorConfig } from 'shared/types';
-import {
-  EXECUTOR_TYPES,
-  EDITOR_TYPES,
-  EXECUTOR_LABELS,
-  EDITOR_LABELS,
-} from 'shared/types';
-
-interface OnboardingDialogProps {
-  open: boolean;
-  onComplete: (config: {
-    executor: ExecutorConfig;
-    editor: { editor_type: EditorType; custom_command: string | null };
-  }) => void;
-}
-
-export function OnboardingDialog({ open, onComplete }: OnboardingDialogProps) {
-  const [executor, setExecutor] = useState<ExecutorConfig>({ type: 'claude' });
-  const [editorType, setEditorType] = useState<EditorType>('vscode');
-  const [customCommand, setCustomCommand] = useState<string>('');
-
-  const handleComplete = () => {
-    onComplete({
-      executor,
-      editor: {
-        editor_type: editorType,
-        custom_command: editorType === 'custom' ? customCommand || null : null,
-      },
-    });
-  };
-
-  const isValid =
-    editorType !== 'custom' ||
-    (editorType === 'custom' && customCommand.trim() !== '');
-
-  return (
-    <Dialog open={open} onOpenChange={() => {}}>
-      <DialogContent className="sm:max-w-[600px]">
-        <DialogHeader>
-          <div className="flex items-center gap-3">
-            <Sparkles className="h-6 w-6 text-primary" />
-            <DialogTitle>Welcome to Automagik Forge</DialogTitle>
-          </div>
-          <DialogDescription className="text-left pt-2">
-            Let's set up your coding preferences. You can always change these
-            later in Settings.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-6 py-4">
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Sparkles className="h-4 w-4" />
-                Choose Your Coding Agent
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="executor">Default Executor</Label>
-                <Select
-                  value={executor.type}
-                  onValueChange={(value) => setExecutor({ type: value as any })}
-                >
-                  <SelectTrigger id="executor">
-                    <SelectValue placeholder="Select your preferred coding agent" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {EXECUTOR_TYPES.map((type) => (
-                      <SelectItem key={type} value={type}>
-                        {EXECUTOR_LABELS[type]}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <p className="text-sm text-muted-foreground">
-                  {executor.type === 'claude' && 'Claude Code from Anthropic'}
-                  {executor.type === 'amp' && 'From Sourcegraph'}
-                  {executor.type === 'gemini' && 'Google Gemini from Bloop'}
-                  {executor.type === 'opencode-ai' && (
-                    <span>
-                      OpenCode AI terminal assistant{' '}
-                      <a 
-                        href="https://github.com/opencode-ai/opencode" 
-                        target="_blank" 
-                        rel="noopener noreferrer"
-                        className="underline hover:text-blue-600"
-                      >
-                        (GitHub)
-                      </a>
-                    </span>
-                  )}
-                  {executor.type === 'claude-code-router' &&
-                    'Claude Code Router'}
-                  {executor.type === 'echo' &&
-                    'This is just for debugging automagik-forge itself'}
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Code className="h-4 w-4" />
-                Choose Your Code Editor
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="editor">Preferred Editor</Label>
-                <Select
-                  value={editorType}
-                  onValueChange={(value: EditorType) => setEditorType(value)}
-                >
-                  <SelectTrigger id="editor">
-                    <SelectValue placeholder="Select your preferred editor" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {EDITOR_TYPES.map((type) => (
-                      <SelectItem key={type} value={type}>
-                        {EDITOR_LABELS[type]}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <p className="text-sm text-muted-foreground">
-                  This editor will be used to open task attempts and project
-                  files.
-                </p>
-              </div>
-
-              {editorType === 'custom' && (
-                <div className="space-y-2">
-                  <Label htmlFor="custom-command">Custom Command</Label>
-                  <Input
-                    id="custom-command"
-                    placeholder="e.g., code, subl, vim"
-                    value={customCommand}
-                    onChange={(e) => setCustomCommand(e.target.value)}
-                  />
-                  <p className="text-sm text-muted-foreground">
-                    Enter the command to run your custom editor. Use spaces for
-                    arguments (e.g., "code --wait").
-                  </p>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        </div>
-
-        <DialogFooter>
-          <Button
-            onClick={handleComplete}
-            disabled={!isValid}
-            className="w-full"
-          >
-            Continue
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/frontend/src/components/PrivacyOptInDialog.tsx

@@ -1,130 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { Shield, CheckCircle, XCircle, Settings } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { useConfig } from '@/components/config-provider';
-
-interface PrivacyOptInDialogProps {
-  open: boolean;
-  onComplete: (telemetryEnabled: boolean) => void;
-}
-
-export function PrivacyOptInDialog({
-  open,
-  onComplete,
-}: PrivacyOptInDialogProps) {
-  const { config } = useConfig();
-
-  // Check if user is authenticated with GitHub
-  const isGitHubAuthenticated =
-    config?.github?.username && config?.github?.token;
-
-  const handleOptIn = () => {
-    onComplete(true);
-  };
-
-  const handleOptOut = () => {
-    onComplete(false);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={() => {}}>
-      <DialogContent className="sm:max-w-[700px]">
-        <DialogHeader>
-          <div className="flex items-center gap-3">
-            <Shield className="h-6 w-6 text-primary" />
-            <DialogTitle>Feedback Opt-In</DialogTitle>
-          </div>
-          <DialogDescription className="text-left pt-1">
-            Help us improve Automagik Forge by sharing usage data and allowing us to
-            contact you if needed.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-3 py-3">
-          <Card>
-            <CardHeader className="pb-3">
-              <CardTitle className="text-base">
-                What data do we collect?
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-2 pt-0">
-              {isGitHubAuthenticated && (
-                <div className="flex items-start gap-2">
-                  <CheckCircle className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
-                  <div className="min-w-0">
-                    <p className="text-sm font-medium">
-                      GitHub profile information
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      Username and email address to send you only very important
-                      updates about the project. We promise not to abuse this
-                    </p>
-                  </div>
-                </div>
-              )}
-              <div className="flex items-start gap-2">
-                <CheckCircle className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
-                <div className="min-w-0">
-                  <p className="text-sm font-medium">
-                    High-level usage metrics
-                  </p>
-                  <p className="text-xs text-muted-foreground">
-                    Number of tasks created, projects managed, feature usage
-                  </p>
-                </div>
-              </div>
-              <div className="flex items-start gap-2">
-                <CheckCircle className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
-                <div className="min-w-0">
-                  <p className="text-sm font-medium">
-                    Performance and error data
-                  </p>
-                  <p className="text-xs text-muted-foreground">
-                    Application crashes, response times, technical issues
-                  </p>
-                </div>
-              </div>
-              <div className="flex items-start gap-2">
-                <XCircle className="h-4 w-4 text-red-500 mt-0.5 flex-shrink-0" />
-                <div className="min-w-0">
-                  <p className="text-sm font-medium">We do NOT collect</p>
-                  <p className="text-xs text-muted-foreground">
-                    Task contents, code snippets, project names, or other
-                    personal data
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 p-2 rounded-lg">
-            <Settings className="h-3 w-3 flex-shrink-0" />
-            <span>
-              This helps us prioritize improvements. You can change this
-              preference anytime in Settings.
-            </span>
-          </div>
-        </div>
-
-        <DialogFooter className="gap-3 flex-col sm:flex-row pt-2">
-          <Button variant="outline" onClick={handleOptOut} className="flex-1">
-            <XCircle className="h-4 w-4 mr-2" />
-            No thanks
-          </Button>
-          <Button onClick={handleOptIn} className="flex-1">
-            <CheckCircle className="h-4 w-4 mr-2" />
-            Yes, help improve Automagik Forge
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}