feat: custom env & claude login

.gitignore

@@ -177,4 +177,5 @@ storybook-static/
 coverage/
 .DS_Store
 *.pem
-tasks_backup.json
+tasks_backup.json
+.credentials.json

async-code-web/app/settings/page.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Github, CheckCircle, ArrowLeft, Settings, Key, Shield, Info } from "lucide-react";
+import { Github, CheckCircle, ArrowLeft, Settings, Key, Shield, Info, Code } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
+import { CodeAgentSettings } from "@/components/code-agent-settings";
 
 import Link from "next/link";
 
@@ -106,7 +107,7 @@ export default function SettingsPage() {
                             </div>
                             <div>
                                 <h1 className="text-xl font-semibold text-slate-900">Settings</h1>
-                                <p className="text-sm text-slate-500">Configure your GitHub authentication</p>
+                                <p className="text-sm text-slate-500">Configure GitHub authentication and code agent environments</p>
                             </div>
                         </div>
                     </div>
@@ -236,6 +237,9 @@ export default function SettingsPage() {
                         </CardContent>
                     </Card>
 
+                    {/* Code Agent Settings */}
+                    <CodeAgentSettings />
+
                     {/* Token Creation Instructions */}
                     <Card className="bg-blue-50 border-blue-200">
                         <CardHeader>

async-code-web/components/code-agent-settings.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import CodeMirror from "@uiw/react-codemirror";
+import { javascript } from "@codemirror/lang-javascript";
+import { githubLight } from "@uiw/codemirror-theme-github";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { AlertCircle, Save } from "lucide-react";
+import { toast } from "sonner";
+import { SupabaseService } from "@/lib/supabase-service";
+import { useUserProfile } from "@/hooks/useUserProfile";
+
+interface CodeAgentConfig {
+    claudeCode?: Record<string, string>;
+    codexCLI?: Record<string, string>;
+}
+
+const DEFAULT_CLAUDE_ENV = {
+    ANTHROPIC_API_KEY: "",
+    // Add other Claude-specific env vars here if needed
+};
+
+const DEFAULT_CODEX_ENV = {
+    OPENAI_API_KEY: "",
+    DISABLE_SANDBOX: "yes",
+    CONTINUE_ON_BROWSER: "no",
+    // Add other Codex-specific env vars here if needed
+};
+
+export function CodeAgentSettings() {
+    const { profile, refreshProfile } = useUserProfile();
+    const [claudeEnv, setClaudeEnv] = useState("");
+    const [codexEnv, setCodexEnv] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [errors, setErrors] = useState<{ claude?: string; codex?: string }>({});
+
+    // Load settings from profile on mount
+    useEffect(() => {
+        if (profile?.preferences) {
+            const prefs = profile.preferences as CodeAgentConfig;
+            setClaudeEnv(JSON.stringify(prefs.claudeCode || DEFAULT_CLAUDE_ENV, null, 2));
+            setCodexEnv(JSON.stringify(prefs.codexCLI || DEFAULT_CODEX_ENV, null, 2));
+        } else {
+            setClaudeEnv(JSON.stringify(DEFAULT_CLAUDE_ENV, null, 2));
+            setCodexEnv(JSON.stringify(DEFAULT_CODEX_ENV, null, 2));
+        }
+    }, [profile]);
+
+    const validateJSON = (value: string, agent: "claude" | "codex") => {
+        try {
+            JSON.parse(value);
+            setErrors(prev => ({ ...prev, [agent]: undefined }));
+            return true;
+        } catch (e) {
+            setErrors(prev => ({ ...prev, [agent]: "Invalid JSON format" }));
+            return false;
+        }
+    };
+
+    const handleSave = async () => {
+        // Validate both JSONs
+        const isClaudeValid = validateJSON(claudeEnv, "claude");
+        const isCodexValid = validateJSON(codexEnv, "codex");
+
+        if (!isClaudeValid || !isCodexValid) {
+            toast.error("Please fix JSON errors before saving");
+            return;
+        }
+
+        setIsLoading(true);
+        try {
+            const claudeConfig = JSON.parse(claudeEnv);
+            const codexConfig = JSON.parse(codexEnv);
+
+            const preferences: CodeAgentConfig = {
+                claudeCode: claudeConfig,
+                codexCLI: codexConfig,
+            };
+
+            // Merge with existing preferences if any
+            const existingPrefs = (profile?.preferences || {}) as Record<string, any>;
+            const mergedPrefs = {
+                ...existingPrefs,
+                ...preferences,
+            };
+
+            await SupabaseService.updateUserProfile({ preferences: mergedPrefs });
+            await refreshProfile();
+            toast.success("Code agent settings saved successfully");
+        } catch (error) {
+            console.error("Failed to save settings:", error);
+            toast.error("Failed to save settings");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="space-y-6">
+            <Card>
+                <CardHeader>
+                    <CardTitle>Code Agent Settings</CardTitle>
+                    <CardDescription>
+                        Configure environment variables for each code agent. These settings will be used when creating containers.
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                    <Alert>
+                        <AlertCircle className="h-4 w-4" />
+                        <AlertDescription>
+                            <strong>Important:</strong> Store sensitive API keys here instead of hardcoding them. Personal settings will override default environment variables.
+                        </AlertDescription>
+                    </Alert>
+
+                    {/* Claude Code Settings */}
+                    <div className="space-y-2">
+                        <Label htmlFor="claude-env">Claude Code Environment Variables</Label>
+                        <div className="border rounded-lg overflow-hidden">
+                            <CodeMirror
+                                id="claude-env"
+                                value={claudeEnv}
+                                height="200px"
+                                extensions={[javascript({ jsx: false })]}
+                                theme={githubLight}
+                                onChange={(value) => {
+                                    setClaudeEnv(value);
+                                    validateJSON(value, "claude");
+                                }}
+                                placeholder={JSON.stringify(DEFAULT_CLAUDE_ENV, null, 2)}
+                            />
+                        </div>
+                        {errors.claude && (
+                            <p className="text-sm text-red-500 mt-1">{errors.claude}</p>
+                        )}
+                        <p className="text-sm text-muted-foreground">
+                            Configure environment variables for Claude Code CLI (@anthropic-ai/claude-code)
+                        </p>
+                    </div>
+
+                    {/* Codex CLI Settings */}
+                    <div className="space-y-2">
+                        <Label htmlFor="codex-env">Codex CLI Environment Variables</Label>
+                        <div className="border rounded-lg overflow-hidden">
+                            <CodeMirror
+                                id="codex-env"
+                                value={codexEnv}
+                                height="200px"
+                                extensions={[javascript({ jsx: false })]}
+                                theme={githubLight}
+                                onChange={(value) => {
+                                    setCodexEnv(value);
+                                    validateJSON(value, "codex");
+                                }}
+                                placeholder={JSON.stringify(DEFAULT_CODEX_ENV, null, 2)}
+                            />
+                        </div>
+                        {errors.codex && (
+                            <p className="text-sm text-red-500 mt-1">{errors.codex}</p>
+                        )}
+                        <p className="text-sm text-muted-foreground">
+                            Configure environment variables for Codex CLI (@openai/codex)
+                        </p>
+                    </div>
+
+                    <Button
+                        onClick={handleSave}
+                        disabled={isLoading || !!errors.claude || !!errors.codex}
+                        className="w-full"
+                    >
+                        <Save className="w-4 h-4 mr-2" />
+                        {isLoading ? "Saving..." : "Save Settings"}
+                    </Button>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

async-code-web/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

async-code-web/hooks/useUserProfile.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { SupabaseService } from "@/lib/supabase-service";
+import { User } from "@/types";
+
+export function useUserProfile() {
+    const [profile, setProfile] = useState<User | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    const fetchProfile = useCallback(async () => {
+        try {
+            setIsLoading(true);
+            const data = await SupabaseService.getUserProfile();
+            setProfile(data);
+            setError(null);
+        } catch (err) {
+            setError(err as Error);
+            console.error("Failed to fetch user profile:", err);
+        } finally {
+            setIsLoading(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        fetchProfile();
+    }, [fetchProfile]);
+
+    const refreshProfile = useCallback(async () => {
+        await fetchProfile();
+    }, [fetchProfile]);
+
+    return {
+        profile,
+        isLoading,
+        error,
+        refreshProfile,
+    };
+}

server/database.py

@@ -216,4 +216,14 @@ def migrate_legacy_task(legacy_task: Dict, user_id: str) -> Optional[Dict]:
             return result.data[0] if result.data else None
         except Exception as e:
             logger.error(f"Error migrating legacy task: {e}")
-            raise
+            raise
+
+    @staticmethod
+    def get_user_by_id(user_id: str) -> Optional[Dict]:
+        """Get user by ID"""
+        try:
+            result = supabase.table('users').select('*').eq('id', user_id).single().execute()
+            return result.data
+        except Exception as e:
+            logger.error(f"Error getting user: {e}")
+            return None