Deploy AutoForge to Hugging Face Space

backend/api/auth.py

@@ -45,6 +45,26 @@ async def login(
     return TokenResponse(access_token=token)
 
 
+@router.post("/guest", response_model=TokenResponse)
+async def guest_login(
+    repo: WorkflowRepository = Depends(get_repository),
+) -> TokenResponse:
+    import uuid
+    guest_id = str(uuid.uuid4())
+    guest_email = f"guest-{guest_id}@autoforge.local"
+    guest_username = f"Guest_{guest_id[:8]}"
+    
+    # Auto-create the guest user with a random password
+    user = await repo.create_user(
+        email=guest_email,
+        username=guest_username,
+        password_hash=hash_password(guest_id),
+    )
+    
+    token = create_access_token(str(user.id))
+    return TokenResponse(access_token=token)
+
+
 @router.get("/me", response_model=UserResponse)
 async def me(current_user: User = Depends(get_current_user)) -> User:
     return current_user

frontend/src/App.tsx

@@ -1,17 +1,14 @@
 import { Navigate, Route, Routes } from "react-router-dom";
 import { AuthProvider, useAuth } from "./context/AuthContext";
 import Layout from "./components/Layout";
-import LoginPage from "./pages/LoginPage";
-import SignupPage from "./pages/SignupPage";
 import DashboardPage from "./pages/DashboardPage";
-import NewWorkflowPage from "./pages/NewWorkflowPage";
 import WorkflowPage from "./pages/WorkflowPage";
 import SettingsPage from "./pages/SettingsPage";
 
-function PrivateRoute({ children }: { children: React.ReactNode }) {
+function AuthWrapper({ children }: { children: React.ReactNode }) {
   const { user, loading } = useAuth();
-  if (loading) return <p>Loading…</p>;
-  if (!user) return <Navigate to="/login" replace />;
+  if (loading) return <div className="loading-fullscreen"><div className="spinner spinner-lg"></div><p>Initializing...</p></div>;
+  if (!user) return <p>Failed to initialize guest session.</p>;
   return <>{children}</>;
 }
 
@@ -19,19 +16,16 @@ export default function App() {
   return (
     <AuthProvider>
       <Routes>
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/signup" element={<SignupPage />} />
         <Route
           path="/"
           element={
-            <PrivateRoute>
+            <AuthWrapper>
               <Layout />
-            </PrivateRoute>
+            </AuthWrapper>
           }
         >
           <Route index element={<Navigate to="/dashboard" replace />} />
           <Route path="dashboard" element={<DashboardPage />} />
-          <Route path="workflows/new" element={<NewWorkflowPage />} />
           <Route path="workflows/:id" element={<WorkflowPage />} />
           <Route path="settings" element={<SettingsPage />} />
         </Route>

frontend/src/api/client.ts

@@ -55,6 +55,10 @@ export const api = {
       method: "POST",
       body: JSON.stringify({ email, password }),
     }),
+  guestLogin: () =>
+    request<{ access_token: string }>("/auth/guest", {
+      method: "POST",
+    }),
   me: () => request<User>("/auth/me"),
   listProviders: () =>
     request<{ providers: ProviderInfo[] }>("/settings/providers"),

frontend/src/components/WorkflowTimeline.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import type { WorkflowEvent } from "../types";
 
 const EVENT_ICONS: Record<string, string> = {
@@ -26,19 +27,69 @@ const EVENT_ICONS: Record<string, string> = {
 };
 
 export default function WorkflowTimeline({ events }: { events: WorkflowEvent[] }) {
+  const [isOpen, setIsOpen] = useState(true);
+  
+  const isComplete = events.some(e => e.event_type === "WORKFLOW_COMPLETED" || e.event_type === "WORKFLOW_FAILED");
+
+  useEffect(() => {
+    if (isComplete) setIsOpen(false);
+  }, [isComplete]);
+
   return (
-    <ul className="timeline">
-      {events.map((event) => (
-        <li key={event.id}>
-          <span className="icon">{EVENT_ICONS[event.event_type] || "•"}</span>
-          <div>
-            <strong>{event.event_type.replace(/_/g, " ")}</strong>
-            <div>{event.message}</div>
-            <div className="time">{new Date(event.timestamp).toLocaleString()}</div>
-          </div>
-        </li>
-      ))}
-      {events.length === 0 && <li>No events yet. Start the workflow to see live updates.</li>}
-    </ul>
+    <details 
+      open={isOpen}
+      onToggle={(e) => setIsOpen(e.currentTarget.open)}
+      style={{
+        background: "var(--bg-elevated)",
+        borderRadius: "var(--radius-md)",
+        border: "1px solid var(--border-subtle)",
+        marginBottom: "2rem",
+        overflow: "hidden"
+      }}
+    >
+      <summary style={{
+        padding: "1rem 1.5rem",
+        cursor: "pointer",
+        fontWeight: 600,
+        display: "flex",
+        alignItems: "center",
+        gap: "0.5rem",
+        listStyle: "none",
+        borderBottom: isOpen ? "1px solid var(--border-subtle)" : "none",
+        userSelect: "none"
+      }}>
+        <span style={{ transition: "transform 0.2s", transform: isOpen ? "rotate(90deg)" : "rotate(0deg)" }}>▶</span>
+        {isComplete ? "Agent finished thinking" : "Agent is thinking..."}
+      </summary>
+      
+      <div style={{ padding: "1.5rem", maxHeight: "400px", overflowY: "auto" }}>
+        <ul className="timeline">
+          {events.map((event) => (
+            <li key={event.id} style={{ marginBottom: "1rem", display: "flex", gap: "1rem", alignItems: "flex-start" }}>
+              <span className="icon" style={{ 
+                background: "var(--bg-surface)", 
+                width: "32px", height: "32px", 
+                display: "flex", alignItems: "center", justifyContent: "center", 
+                borderRadius: "50%",
+                border: "1px solid var(--border-subtle)",
+                flexShrink: 0
+              }}>
+                {EVENT_ICONS[event.event_type] || "•"}
+              </span>
+              <div>
+                <strong style={{ display: "block", color: "var(--text-primary)", fontSize: "0.9rem" }}>
+                  {event.event_type.replace(/_/g, " ")}
+                </strong>
+                <div style={{ color: "var(--text-secondary)", fontSize: "0.85rem", marginTop: "0.2rem" }}>{event.message}</div>
+                <div className="time" style={{ color: "var(--text-muted)", fontSize: "0.75rem", marginTop: "0.2rem" }}>
+                  {new Date(event.timestamp).toLocaleTimeString()}
+                </div>
+              </div>
+            </li>
+          ))}
+          {events.length === 0 && <li>Initializing workflow engine...</li>}
+        </ul>
+      </div>
+    </details>
   );
 }

frontend/src/context/AuthContext.tsx

@@ -5,9 +5,6 @@ import type { User } from "../types";
 interface AuthContextValue {
   user: User | null;
   loading: boolean;
-  login: (email: string, password: string) => Promise<void>;
-  signup: (email: string, username: string, password: string) => Promise<void>;
-  logout: () => void;
 }
 
 const AuthContext = createContext<AuthContextValue | null>(null);
@@ -17,34 +14,25 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    if (!getToken()) {
-      setLoading(false);
-      return;
-    }
-    api.me()
-      .then(setUser)
-      .catch(() => setToken(null))
-      .finally(() => setLoading(false));
+    const initializeAuth = async () => {
+      try {
+        if (!getToken()) {
+          const { access_token } = await api.guestLogin();
+          setToken(access_token);
+        }
+        setUser(await api.me());
+      } catch (err) {
+        console.error("Failed to authenticate guest", err);
+        setToken(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+    initializeAuth();
   }, []);
 
-  const login = async (email: string, password: string) => {
-    const { access_token } = await api.login(email, password);
-    setToken(access_token);
-    setUser(await api.me());
-  };
-
-  const signup = async (email: string, username: string, password: string) => {
-    await api.signup(email, username, password);
-    await login(email, password);
-  };
-
-  const logout = () => {
-    setToken(null);
-    setUser(null);
-  };
-
   return (
-    <AuthContext.Provider value={{ user, loading, login, signup, logout }}>
+    <AuthContext.Provider value={{ user, loading }}>
       {children}
     </AuthContext.Provider>
   );

frontend/src/index.css

@@ -3,34 +3,34 @@
    ============================================================ */
 
 :root {
-  /* Color palette */
-  --bg-base: #0b0e14;
-  --bg-surface: #111827;
-  --bg-elevated: #1a2235;
-  --bg-sidebar: #0d1117;
-  --bg-input: #0f1723;
-
-  --border-subtle: #1e2d42;
-  --border-default: #253347;
-  --border-strong: #3b5270;
-
-  --text-primary: #e2eaf5;
-  --text-secondary: #8aa0bd;
-  --text-muted: #56718e;
-  --text-inverse: #0b0e14;
-
-  --accent-primary: #3b82f6;
-  --accent-primary-hover: #2563eb;
-  --accent-primary-glow: rgba(59, 130, 246, 0.18);
-
-  --accent-success: #10b981;
-  --accent-success-bg: rgba(16, 185, 129, 0.12);
-  --accent-warning: #f59e0b;
-  --accent-warning-bg: rgba(245, 158, 11, 0.12);
-  --accent-danger: #ef4444;
-  --accent-danger-bg: rgba(239, 68, 68, 0.12);
-  --accent-info: #6366f1;
-  --accent-info-bg: rgba(99, 102, 241, 0.12);
+  /* Color palette - Light Theme */
+  --bg-base: #f9fafb;
+  --bg-surface: #ffffff;
+  --bg-elevated: #f3f4f6;
+  --bg-sidebar: #ffffff;
+  --bg-input: #ffffff;
+
+  --border-subtle: #e5e7eb;
+  --border-default: #d1d5db;
+  --border-strong: #9ca3af;
+
+  --text-primary: #111827;
+  --text-secondary: #374151;
+  --text-muted: #6b7280;
+  --text-inverse: #ffffff;
+
+  --accent-primary: #000000;
+  --accent-primary-hover: #374151;
+  --accent-primary-glow: rgba(0, 0, 0, 0.08);
+
+  --accent-success: #059669;
+  --accent-success-bg: rgba(5, 150, 105, 0.12);
+  --accent-warning: #d97706;
+  --accent-warning-bg: rgba(217, 119, 6, 0.12);
+  --accent-danger: #dc2626;
+  --accent-danger-bg: rgba(220, 38, 38, 0.12);
+  --accent-info: #4f46e5;
+  --accent-info-bg: rgba(79, 70, 229, 0.12);
 
   --sidebar-width: 248px;
   --radius-sm: 6px;
@@ -38,10 +38,10 @@
   --radius-lg: 14px;
   --radius-xl: 20px;
 
-  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
-  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
-  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
-  --shadow-glow: 0 0 24px var(--accent-primary-glow);
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
+  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
+  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
+  --shadow-glow: 0 0 24px rgba(0,0,0,0.06);
 
   --transition-fast: 120ms ease;
   --transition-base: 200ms ease;

frontend/src/pages/DashboardPage.tsx

@@ -1,45 +1,59 @@
-import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { api } from "../api/client";
-import type { Workflow } from "../types";
 
 export default function DashboardPage() {
-  const [workflows, setWorkflows] = useState<Workflow[]>([]);
+  const [prompt, setPrompt] = useState("");
+  const [apiKey, setApiKey] = useState("");
   const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
 
-  useEffect(() => {
-    api.listWorkflows()
-      .then((data) => setWorkflows(data.workflows))
-      .catch((err) => setError(err.message));
-  }, []);
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!prompt.trim()) return setError("Prompt cannot be empty");
+    if (!apiKey.trim()) return setError("API Key is required");
+
+    setLoading(true);
+    setError("");
+
+    try {
+      const { workflow_id } = await api.createWorkflow(prompt.trim(), "gemini", apiKey.trim());
+      await api.startWorkflow(workflow_id);
+      navigate(`/workflows/${workflow_id}`);
+    } catch (err: any) {
+      setError(err.message || "Failed to start workflow");
+      setLoading(false);
+    }
+  };
 
   return (
-    <div>
-      <h2>Workflow History</h2>
-      {error && <p className="error">{error}</p>}
-      <div className="card">
-        <table className="table">
-          <thead>
-            <tr>
-              <th>ID</th>
-              <th>Prompt</th>
-              <th>Status</th>
-              <th>Created</th>
-            </tr>
-          </thead>
-          <tbody>
-            {workflows.map((wf) => (
-              <tr key={wf.workflow_id}>
-                <td><Link to={`/workflows/${wf.workflow_id}`}>{wf.workflow_id}</Link></td>
-                <td>{wf.user_prompt.slice(0, 60)}{wf.user_prompt.length > 60 ? "…" : ""}</td>
-                <td><span className={`status ${wf.status}`}>{wf.status}</span></td>
-                <td>{new Date(wf.created_at).toLocaleString()}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        {workflows.length === 0 && <p>No workflows yet. <Link to="/workflows/new">Create one</Link></p>}
-      </div>
+    <div style={{ maxWidth: "800px", margin: "4rem auto", textAlign: "center" }}>
+      <h1 style={{ fontSize: "2rem", marginBottom: "1rem", fontWeight: 600 }}>What would you like to build?</h1>
+      <p style={{ color: "var(--text-secondary)", marginBottom: "3rem" }}>AutoForge AI will autonomously plan, write, and test your application.</p>
+      
+      {error && <div className="alert alert-error">{error}</div>}
+
+      <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+        <input 
+          type="password" 
+          placeholder="Enter your Gemini API Key..." 
+          value={apiKey} 
+          onChange={(e) => setApiKey(e.target.value)} 
+          style={{ padding: "1rem", fontSize: "1rem", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)" }}
+        />
+        
+        <textarea 
+          placeholder="E.g. Create a simple Python FastAPI server that serves a React to-do app..." 
+          value={prompt} 
+          onChange={(e) => setPrompt(e.target.value)} 
+          style={{ minHeight: "150px", padding: "1rem", fontSize: "1.1rem", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-md)" }}
+        />
+        
+        <button type="submit" className="primary" disabled={loading} style={{ alignSelf: "flex-end", padding: "0.8rem 2rem", fontSize: "1.1rem" }}>
+          {loading ? "Starting..." : "Generate Code"}
+        </button>
+      </form>
     </div>
   );
 }

frontend/src/pages/LoginPage.tsx

@@ -1,41 +0,0 @@
-import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { useAuth } from "../context/AuthContext";
-
-export default function LoginPage() {
-  const { login } = useAuth();
-  const navigate = useNavigate();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-
-  const submit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-    try {
-      await login(email, password);
-      navigate("/dashboard");
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Login failed");
-    }
-  };
-
-  return (
-    <div className="auth-page">
-      <div className="card auth-card">
-        <h2>Login to AutoForge</h2>
-        {error && <p className="error">{error}</p>}
-        <form onSubmit={submit}>
-          <label>Email</label>
-          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
-          <label>Password</label>
-          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
-          <button className="primary" type="submit">Login</button>
-        </form>
-        <p style={{ marginTop: "1rem" }}>
-          No account? <Link to="/signup">Sign up</Link>
-        </p>
-      </div>
-    </div>
-  );
-}

frontend/src/pages/NewWorkflowPage.tsx

@@ -1,100 +0,0 @@
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { api } from "../api/client";
-import type { ProviderInfo } from "../types";
-
-export default function NewWorkflowPage() {
-  const navigate = useNavigate();
-  const [providers, setProviders] = useState<ProviderInfo[]>([]);
-  const [provider, setProvider] = useState("openai");
-  const [model, setModel] = useState("");
-  const [apiKey, setApiKey] = useState("");
-  const [prompt, setPrompt] = useState("");
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    api.listProviders().then((data) => {
-      setProviders(data.providers);
-      if (data.providers.length) {
-        setProvider(data.providers[0].id);
-        setModel(data.providers[0].models[0] || "");
-      }
-    });
-  }, []);
-
-  const selectedProvider = providers.find((p) => p.id === provider);
-
-  const submit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
-    try {
-      const wf = await api.createWorkflow({
-        user_prompt: prompt,
-        llm_provider: provider,
-        llm_model: model,
-        api_key: apiKey || undefined,
-      });
-      await api.startWorkflow(wf.workflow_id, apiKey || undefined);
-      navigate(`/workflows/${wf.workflow_id}`);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to create workflow");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div>
-      <h2>New Workflow</h2>
-      <div className="card">
-        {error && <p className="error">{error}</p>}
-        <form onSubmit={submit}>
-          <label>Prompt</label>
-          <textarea
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            placeholder="Build a FastAPI calculator with add and subtract endpoints..."
-            required
-          />
-
-          <div className="grid-2">
-            <div>
-              <label>LLM Provider</label>
-              <select value={provider} onChange={(e) => {
-                setProvider(e.target.value);
-                const p = providers.find((x) => x.id === e.target.value);
-                setModel(p?.models[0] || "");
-              }}>
-                {providers.map((p) => (
-                  <option key={p.id} value={p.id}>{p.name}</option>
-                ))}
-              </select>
-            </div>
-            <div>
-              <label>Model</label>
-              <select value={model} onChange={(e) => setModel(e.target.value)} required>
-                {(selectedProvider?.models || []).map((m) => (
-                  <option key={m} value={m}>{m}</option>
-                ))}
-              </select>
-            </div>
-          </div>
-
-          <label>API Key (optional if saved in settings)</label>
-          <input
-            type="password"
-            value={apiKey}
-            onChange={(e) => setApiKey(e.target.value)}
-            placeholder="sk-..."
-          />
-
-          <button className="primary" type="submit" disabled={loading}>
-            {loading ? "Starting…" : "Start Workflow"}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}

frontend/src/pages/SignupPage.tsx

@@ -1,44 +0,0 @@
-import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { useAuth } from "../context/AuthContext";
-
-export default function SignupPage() {
-  const { signup } = useAuth();
-  const navigate = useNavigate();
-  const [email, setEmail] = useState("");
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-
-  const submit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-    try {
-      await signup(email, username, password);
-      navigate("/dashboard");
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Signup failed");
-    }
-  };
-
-  return (
-    <div className="auth-page">
-      <div className="card auth-card">
-        <h2>Create Account</h2>
-        {error && <p className="error">{error}</p>}
-        <form onSubmit={submit}>
-          <label>Email</label>
-          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
-          <label>Username</label>
-          <input value={username} onChange={(e) => setUsername(e.target.value)} required />
-          <label>Password</label>
-          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required minLength={8} />
-          <button className="primary" type="submit">Sign Up</button>
-        </form>
-        <p style={{ marginTop: "1rem" }}>
-          Have an account? <Link to="/login">Login</Link>
-        </p>
-      </div>
-    </div>
-  );
-}