automagik-forge 0.1.11 → 0.1.13

package/frontend/src/components/GitHubLoginDialog.tsx

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

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

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