Delete frontend

frontend/.gitignore

@@ -1,35 +0,0 @@
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-.env
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
-

frontend/next.config.js

@@ -1,31 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  output: 'standalone',
-  reactStrictMode: true,
-  // Only set NEXT_PUBLIC_API_URL if explicitly provided
-  // In Docker Space, we want it undefined so frontend uses relative URLs (proxied by Next.js)
-  ...(process.env.NEXT_PUBLIC_API_URL && {
-    env: {
-      NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
-    },
-  }),
-  async rewrites() {
-    // In Docker Space, proxy /api/* requests to backend on port 8000
-    // This allows frontend (7860) to communicate with backend (8000) internally
-    const API_HOST = process.env.BACKEND_HOST || 'http://localhost:8000';
-    console.log(`[Next.js] Setting up API proxy: /api/* -> ${API_HOST}/api/*`);
-    return [
-      {
-        source: '/api/:path*',
-        destination: `${API_HOST}/api/:path*`,
-      },
-      {
-        source: '/ws/:path*',
-        destination: `${API_HOST}/ws/:path*`,
-      },
-    ];
-  },
-}
-
-module.exports = nextConfig
-

frontend/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "anycoder-frontend",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start -p 7860",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@monaco-editor/react": "^4.6.0",
-    "axios": "^1.7.2",
-    "next": "^16.0.10",
-    "prismjs": "^1.29.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-markdown": "^9.0.1",
-    "remark-gfm": "^4.0.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20",
-    "@types/prismjs": "^1.26.4",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^9.39.2",
-    "eslint-config-next": "^16.0.10",
-    "postcss": "^8.4.39",
-    "tailwindcss": "^3.4.4",
-    "typescript": "^5"
-  }
-}

frontend/postcss.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
-

frontend/public/.gitkeep

@@ -1,2 +0,0 @@
-# This file ensures the public directory is tracked by git
-

frontend/src/app/globals.css

@@ -1,192 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  height: 100%;
-  overflow: hidden;
-}
-
-body {
-  color: #e5e5e7;
-  background: #1d1d1f;
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  letter-spacing: -0.01em;
-}
-
-/* Apple-style scrollbar */
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 10px;
-  border: 3px solid #1d1d1f;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-::-webkit-scrollbar-corner {
-  background: #1d1d1f;
-}
-
-/* Markdown styling in chat - VS Code style */
-.prose {
-  max-width: none;
-  color: #cccccc;
-}
-
-.prose code {
-  background-color: #2d2d30;
-  color: #d4d4d4;
-  padding: 0.2em 0.4em;
-  border-radius: 3px;
-  font-size: 0.875em;
-  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace;
-}
-
-.prose pre {
-  background-color: #1e1e1e;
-  padding: 1em;
-  border-radius: 4px;
-  overflow-x: auto;
-  border: 1px solid #3e3e42;
-}
-
-.prose pre code {
-  background-color: transparent;
-  padding: 0;
-}
-
-.prose p {
-  margin: 0.5em 0;
-}
-
-.prose a {
-  color: #3794ff;
-  text-decoration: none;
-}
-
-.prose a:hover {
-  text-decoration: underline;
-}
-
-/* Selection color - Apple style */
-::selection {
-  background-color: rgba(0, 122, 255, 0.3);
-  color: #ffffff;
-}
-
-::-moz-selection {
-  background-color: rgba(0, 122, 255, 0.3);
-  color: #ffffff;
-}
-
-/* Apple-style focus rings */
-button:focus-visible,
-input:focus-visible,
-select:focus-visible {
-  outline: 2px solid rgba(0, 122, 255, 0.6);
-  outline-offset: 2px;
-}
-
-/* Smooth transitions */
-* {
-  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
-}
-
-/* Animation utilities */
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.animate-in {
-  animation: fade-in 0.3s ease-in-out;
-}
-
-/* Resize handle styles */
-.resize-handle {
-  position: relative;
-  width: 4px;
-  cursor: col-resize;
-  user-select: none;
-  background: transparent;
-  transition: background-color 0.2s ease, width 0.15s ease;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Clickable area (extends beyond visible width) */
-.resize-handle::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  left: -4px;
-  right: -4px;
-}
-
-/* Visual indicator (three dots) */
-.resize-handle::after {
-  content: '⋮';
-  position: relative;
-  z-index: 1;
-  font-size: 16px;
-  color: rgba(134, 134, 139, 0.4);
-  transition: color 0.2s ease;
-  pointer-events: none;
-  line-height: 1;
-}
-
-.resize-handle:hover {
-  background: rgba(0, 123, 255, 0.2);
-}
-
-.resize-handle:hover::after {
-  color: rgba(0, 123, 255, 0.8);
-}
-
-.resize-handle:active,
-.resize-handle.resizing {
-  background: rgba(0, 123, 255, 0.4);
-  width: 4px;
-}
-
-.resize-handle:active::after,
-.resize-handle.resizing::after {
-  color: rgba(0, 123, 255, 1);
-}
-
-/* Prevent text selection during resize */
-body.resizing {
-  user-select: none !important;
-  cursor: col-resize !important;
-}
-
-body.resizing * {
-  cursor: col-resize !important;
-}
-

frontend/src/app/layout.tsx

@@ -1,23 +0,0 @@
-import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import './globals.css';
-
-const inter = Inter({ subsets: ['latin'] });
-
-export const metadata: Metadata = {
-  title: 'AnyCoder - AI Code Generator',
-  description: 'Generate code with AI - supports HTML, Gradio, React, Streamlit, and more',
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
-}
-

frontend/src/app/page.tsx

@@ -1,1106 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import { flushSync } from 'react-dom';
-import Header from '@/components/Header';
-import LandingPage from '@/components/LandingPage';
-import ChatInterface from '@/components/ChatInterface';
-import CodeEditor from '@/components/CodeEditor';
-import ControlPanel from '@/components/ControlPanel';
-import { apiClient } from '@/lib/api';
-import { isAuthenticated as checkIsAuthenticated, getStoredToken } from '@/lib/auth';
-import type { Message, Language, CodeGenerationRequest, Model } from '@/types';
-
-export default function Home() {
-  // Initialize messages as empty array (will load from localStorage in useEffect)
-  const [messages, setMessages] = useState<Message[]>([]);
-
-  const [generatedCode, setGeneratedCode] = useState('');
-  const [selectedLanguage, setSelectedLanguage] = useState<Language>('html');
-  const [selectedModel, setSelectedModel] = useState('moonshotai/Kimi-K2.6');
-  const [models, setModels] = useState<Model[]>([]);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [currentRepoId, setCurrentRepoId] = useState<string | null>(null);  // Track imported/deployed space
-  const [username, setUsername] = useState<string | null>(null);  // Track current user
-  const [pendingPR, setPendingPR] = useState<{ repoId: string; language: Language } | null>(null);  // Track pending PR after redesign
-  const pendingPRRef = useRef<{ repoId: string; language: Language } | null>(null);  // Ref for immediate access
-
-  // Landing page state - show landing page if no messages exist
-  const [showLandingPage, setShowLandingPage] = useState(true);
-
-  // Mobile view state: 'chat', 'editor', or 'settings' - start on chat for mobile
-  const [mobileView, setMobileView] = useState<'chat' | 'editor' | 'settings'>('chat');
-
-  // Resizable sidebar widths (in pixels)
-  const [chatSidebarWidth, setChatSidebarWidth] = useState(320);
-  const [settingsSidebarWidth, setSettingsSidebarWidth] = useState(288);
-  const [isResizingChat, setIsResizingChat] = useState(false);
-  const [isResizingSettings, setIsResizingSettings] = useState(false);
-  const [isDesktop, setIsDesktop] = useState(false);
-
-  // Debug: Log currentRepoId changes
-  useEffect(() => {
-    console.log('[App] 🔵 currentRepoId changed to:', currentRepoId);
-  }, [currentRepoId]);
-
-  // Clear cache on app startup to ensure fresh data and load models
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      console.log('[Cache] Clearing models and languages cache on app startup');
-      localStorage.removeItem('anycoder_models');
-      localStorage.removeItem('anycoder_languages');
-
-      // Load models for checking image support
-      loadModels();
-    }
-  }, []); // Run once on mount
-
-  const loadModels = async () => {
-    try {
-      const modelsList = await apiClient.getModels();
-      console.log('[Models] Loaded models:', modelsList);
-      setModels(modelsList);
-    } catch (error) {
-      console.error('Failed to load models:', error);
-    }
-  };
-
-  // Check if current model supports images
-  // Show immediately for GLM-4.6V even before models load
-  const currentModelSupportsImages =
-    selectedModel === 'zai-org/GLM-4.6V:zai-org' ||
-    models.find(m => m.id === selectedModel)?.supports_images ||
-    false;
-
-  // Debug log for image support
-  useEffect(() => {
-    console.log('[Image Support] Selected model:', selectedModel);
-    console.log('[Image Support] Models loaded:', models.length);
-    console.log('[Image Support] Supports images:', currentModelSupportsImages);
-  }, [selectedModel, models, currentModelSupportsImages]);
-
-  // Load messages from localStorage on mount (client-side only to avoid hydration issues)
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const saved = localStorage.getItem('anycoder_messages');
-      if (saved) {
-        try {
-          const parsed = JSON.parse(saved);
-          console.log('[localStorage] Loaded messages from localStorage:', parsed.length, 'messages');
-          setMessages(parsed);
-          // If there are existing messages, show the full UI
-          if (parsed.length > 0) {
-            setShowLandingPage(false);
-          }
-        } catch (e) {
-          console.error('[localStorage] Failed to parse saved messages:', e);
-        }
-      }
-
-      // Load sidebar widths from localStorage
-      const savedChatWidth = localStorage.getItem('anycoder_chat_sidebar_width');
-      const savedSettingsWidth = localStorage.getItem('anycoder_settings_sidebar_width');
-      if (savedChatWidth) {
-        setChatSidebarWidth(parseInt(savedChatWidth, 10));
-      }
-      if (savedSettingsWidth) {
-        setSettingsSidebarWidth(parseInt(savedSettingsWidth, 10));
-      }
-
-      // Check if desktop on mount
-      const checkDesktop = () => {
-        setIsDesktop(window.innerWidth >= 768);
-      };
-      checkDesktop();
-
-      // Listen for window resize to update desktop status
-      window.addEventListener('resize', checkDesktop);
-      return () => window.removeEventListener('resize', checkDesktop);
-    }
-  }, []); // Empty deps = run once on mount
-
-  // Save messages to localStorage whenever they change (CRITICAL FOR PERSISTENCE!)
-  useEffect(() => {
-    if (typeof window !== 'undefined' && messages.length > 0) {
-      localStorage.setItem('anycoder_messages', JSON.stringify(messages));
-      console.log('[localStorage] Saved', messages.length, 'messages to localStorage');
-    }
-  }, [messages]);
-
-  // Track if we've attempted to fetch username to avoid repeated failures
-  const usernameFetchAttemptedRef = useRef(false);
-  // Track if backend appears to be unavailable (to avoid repeated failed requests)
-  const backendUnavailableRef = useRef(false);
-
-  // Check auth on mount and handle OAuth callback
-  useEffect(() => {
-    checkAuth();
-
-    // Check for OAuth callback in URL (handles ?session=token)
-    // initializeOAuth already handles this, but we call checkAuth to sync state
-    const urlParams = new URLSearchParams(window.location.search);
-    if (urlParams.get('session')) {
-      // OAuth callback - reset both flags and check auth after a brief delay
-      usernameFetchAttemptedRef.current = false;
-      backendUnavailableRef.current = false; // Reset backend status on OAuth callback
-      setTimeout(() => checkAuth(), 200);
-    }
-  }, []); // Only run once on mount
-
-  // Listen for storage changes (e.g., logout from another tab)
-  // Note: storage events only fire in OTHER tabs, not the current one
-  useEffect(() => {
-    const handleStorageChange = (e: StorageEvent) => {
-      if (e.key === 'hf_oauth_token' || e.key === 'hf_user_info') {
-        // Only reset username fetch if we have a token (might be logging in)
-        if (e.newValue) {
-          usernameFetchAttemptedRef.current = false;
-          backendUnavailableRef.current = false; // Reset backend status on login
-        }
-        checkAuth();
-      }
-    };
-
-    window.addEventListener('storage', handleStorageChange);
-    return () => window.removeEventListener('storage', handleStorageChange);
-  }, []);
-
-  // Listen for authentication expiration events
-  useEffect(() => {
-    const handleAuthExpired = (e: CustomEvent) => {
-      console.log('[Auth] Session expired:', e.detail?.message);
-      // Clear authentication state
-      setIsAuthenticated(false);
-      setUsername(null);
-      apiClient.setToken(null);
-
-      // Show alert to user
-      if (typeof window !== 'undefined') {
-        alert(e.detail?.message || 'Your session has expired. Please sign in again.');
-      }
-    };
-
-    window.addEventListener('auth-expired', handleAuthExpired as EventListener);
-    return () => window.removeEventListener('auth-expired', handleAuthExpired as EventListener);
-  }, []);
-
-  // Listen for window focus (user returns to tab after OAuth redirect)
-  // Only check if backend was available before or if we're authenticated with token
-  useEffect(() => {
-    const handleFocus = () => {
-      // Only reset and check if we're authenticated (might have logged in elsewhere)
-      // Don't reset if backend is known to be unavailable and we're not authenticated
-      const authenticated = checkIsAuthenticated();
-      if (authenticated) {
-        usernameFetchAttemptedRef.current = false;
-        backendUnavailableRef.current = false; // Reset backend status - might be back up
-      }
-      checkAuth();
-    };
-
-    window.addEventListener('focus', handleFocus);
-    return () => window.removeEventListener('focus', handleFocus);
-  }, []);
-
-  const checkAuth = async () => {
-    const authenticated = checkIsAuthenticated();
-    setIsAuthenticated(authenticated);
-
-    // Make sure API client has the token or clears it
-    if (authenticated) {
-      const token = getStoredToken();
-      if (token) {
-        apiClient.setToken(token);
-
-        // Get username from auth status (only if we don't have it yet and backend is available)
-        // Skip if backend is known to be unavailable to avoid repeated failed requests
-        if (!username && !usernameFetchAttemptedRef.current && !backendUnavailableRef.current) {
-          usernameFetchAttemptedRef.current = true;
-          try {
-            const authStatus = await apiClient.getAuthStatus();
-            if (authStatus.username) {
-              setUsername(authStatus.username);
-              backendUnavailableRef.current = false; // Backend is working
-            }
-          } catch (error: any) {
-            // Check if this is a connection error
-            const isConnectionError =
-              error.code === 'ECONNABORTED' ||
-              error.code === 'ECONNRESET' ||
-              error.code === 'ECONNREFUSED' ||
-              error.message?.includes('socket hang up') ||
-              error.message?.includes('timeout') ||
-              error.message?.includes('Network Error') ||
-              error.response?.status === 503 ||
-              error.response?.status === 502;
-
-            if (isConnectionError) {
-              // Mark backend as unavailable to avoid repeated requests
-              backendUnavailableRef.current = true;
-              // Don't reset attempt flag - keep it true so we don't retry until explicitly reset
-              // This prevents repeated failed requests when backend is down
-            } else {
-              // Non-connection error - log it and reset attempt flag
-              console.error('Failed to get username:', error);
-              usernameFetchAttemptedRef.current = false;
-            }
-          }
-        }
-      } else {
-        // Token missing but authenticated flag is true - clear state
-        setIsAuthenticated(false);
-        if (username) {
-          setUsername(null);
-        }
-        usernameFetchAttemptedRef.current = false;
-        backendUnavailableRef.current = false;
-      }
-    } else {
-      // Not authenticated - clear username and reset flags
-      apiClient.setToken(null);
-      if (username) {
-        setUsername(null);
-      }
-      usernameFetchAttemptedRef.current = false;
-      // Keep backendUnavailableRef as is - it's useful information even when not authenticated
-    }
-  };
-
-  const handleSendMessage = async (message: string, imageUrl?: string, overrideLanguage?: Language, overrideModel?: string, overrideRepoId?: string, shouldCreatePR?: boolean) => {
-    if (!isAuthenticated) {
-      alert('Please sign in with HuggingFace first! Click the "Sign in with Hugging Face" button in the header.');
-      return;
-    }
-
-    // Hide landing page and show full UI when first message is sent
-    if (showLandingPage) {
-      setShowLandingPage(false);
-    }
-
-    // Use override values if provided, otherwise use state
-    const language = overrideLanguage || selectedLanguage;
-    const model = overrideModel || selectedModel;
-
-    // Update state if override values provided
-    if (overrideLanguage) {
-      setSelectedLanguage(overrideLanguage);
-    }
-    if (overrideModel) {
-      setSelectedModel(overrideModel);
-    }
-
-    // If there's existing code, include it in the message context for modifications
-    let enhancedMessage = message;
-    const hasRealCode = generatedCode &&
-      generatedCode.length > 50 &&
-      !generatedCode.includes('Your generated code will appear here');
-
-    if (hasRealCode) {
-      enhancedMessage = `I have existing code in the editor. Please modify it based on my request.\n\nCurrent code:\n\`\`\`${language}\n${generatedCode}\n\`\`\`\n\nMy request: ${message}`;
-    }
-
-    // Add user message (show original message to user, but send enhanced to API)
-    console.log('[handleSendMessage] Received imageUrl:', imageUrl ? 'Yes' : 'No');
-    console.log('[handleSendMessage] Image URL length:', imageUrl?.length || 0);
-
-    const userMessage: Message = {
-      role: 'user',
-      content: message,
-      timestamp: new Date().toISOString(),
-      image_url: imageUrl,
-    };
-    setMessages((prev) => [...prev, userMessage]);
-    setIsGenerating(true);
-
-    // Clear previous code to show streaming from start
-    setGeneratedCode('');
-
-    // Prepare request with enhanced query that includes current code
-    // Use overrideRepoId if provided (from import/duplicate), otherwise use currentRepoId from state
-    const effectiveRepoId = overrideRepoId || currentRepoId || undefined;
-
-    console.log('[SendMessage] ========== GENERATION REQUEST ==========');
-    console.log('[SendMessage] overrideRepoId:', overrideRepoId);
-    console.log('[SendMessage] currentRepoId:', currentRepoId);
-    console.log('[SendMessage] effectiveRepoId (will use):', effectiveRepoId);
-    console.log('[SendMessage] ==========================================');
-
-    console.log('[Request] Building request with imageUrl:', imageUrl ? 'Yes' : 'No');
-    console.log('[Request] Image URL:', imageUrl?.substring(0, 50) + '...');
-
-    const request: CodeGenerationRequest = {
-      query: enhancedMessage,
-      language: language,
-      model_id: model,
-      provider: 'auto',
-      history: messages.map((m) => [m.role, m.content]),
-      agent_mode: false,
-      existing_repo_id: effectiveRepoId,  // Pass duplicated/imported space ID for auto-deploy
-      skip_auto_deploy: !!shouldCreatePR, // Skip auto-deploy if creating PR
-      image_url: imageUrl,  // For vision models like GLM-4.6V
-    };
-
-    const assistantMessage: Message = {
-      role: 'assistant',
-      content: '⏳ Generating code...',
-      timestamp: new Date().toISOString(),
-    };
-
-    // Add placeholder for assistant message
-    setMessages((prev) => [...prev, assistantMessage]);
-
-    // Stream the response
-    try {
-      apiClient.generateCodeStream(
-        request,
-        // onChunk - Update code editor in real-time with immediate flush
-        (chunk: string) => {
-          console.log('[Stream] Received chunk:', chunk.substring(0, 50), '... (length:', chunk.length, ')');
-          // Use flushSync to force immediate DOM update without React batching
-          flushSync(() => {
-            setGeneratedCode((prevCode) => {
-              const newCode = prevCode + chunk;
-              console.log('[Stream] Total code length:', newCode.length);
-              return newCode;
-            });
-          });
-        },
-        // onComplete
-        (code: string, reasoning?: string) => {
-          setGeneratedCode(code);
-          setIsGenerating(false);
-
-          // Update final message - include reasoning if available
-          setMessages((prev) => {
-            const newMessages = [...prev];
-            const content = reasoning
-              ? `✅ Code generated successfully!\n\n**Reasoning:**\n${reasoning}\n\nCheck the editor →`
-              : '✅ Code generated successfully! Check the editor →';
-
-            newMessages[newMessages.length - 1] = {
-              ...assistantMessage,
-              content: content,
-            };
-            return newMessages;
-          });
-
-          // Check if we need to create a PR (redesign with PR option)
-          console.log('[PR] onComplete - Checking pendingPR ref:', pendingPRRef.current);
-          console.log('[PR] onComplete - Checking pendingPR state:', pendingPR);
-          const prInfo = pendingPRRef.current;
-          if (prInfo) {
-            console.log('[PR] Creating pull request for:', prInfo.repoId);
-            createPullRequestAfterGeneration(prInfo.repoId, code, prInfo.language);
-            setPendingPR(null); // Clear state
-            pendingPRRef.current = null; // Clear ref
-          } else {
-            console.log('[PR] No pending PR - skipping PR creation');
-          }
-        },
-        // onError
-        (error: string) => {
-          setIsGenerating(false);
-          setMessages((prev) => {
-            const newMessages = [...prev];
-            newMessages[newMessages.length - 1] = {
-              ...assistantMessage,
-              content: `❌ Error: ${error}`,
-            };
-            return newMessages;
-          });
-        },
-        // onDeploying
-        (message: string) => {
-          console.log('[Deploy] Deployment started:', message);
-          // Update message to show deployment in progress
-          setMessages((prev) => {
-            const newMessages = [...prev];
-            newMessages[newMessages.length - 1] = {
-              ...assistantMessage,
-              content: `✅ Code generated successfully!\n\n${message}`,
-            };
-            return newMessages;
-          });
-        },
-        // onDeployed
-        (message: string, spaceUrl: string) => {
-          console.log('[Deploy] Deployment successful:', spaceUrl);
-
-          // Extract repo_id from space URL
-          const match = spaceUrl.match(/huggingface\.co\/spaces\/([^\/\s\)]+\/[^\/\s\)]+)/);
-          if (match) {
-            setCurrentRepoId(match[1]);
-          }
-
-          // Update message with deployment success - use backend message format for history tracking
-          setMessages((prev) => {
-            const newMessages = [...prev];
-            newMessages[newMessages.length - 1] = {
-              ...assistantMessage,
-              content: `✅ Code generated successfully!\n\n${message}`,
-            };
-            return newMessages;
-          });
-
-          // Open the space URL in a new tab
-          window.open(spaceUrl, '_blank');
-        },
-        // onDeployError
-        (message: string) => {
-          console.log('[Deploy] Deployment error:', message);
-          // Update message to show deployment failed (but code generation succeeded)
-          setMessages((prev) => {
-            const newMessages = [...prev];
-            newMessages[newMessages.length - 1] = {
-              ...assistantMessage,
-              content: `✅ Code generated successfully!\n\n${message}\n\nYou can still use the "Publish" button to deploy manually.`,
-            };
-            return newMessages;
-          });
-        }
-      );
-    } catch (error) {
-      setIsGenerating(false);
-      setMessages((prev) => {
-        const newMessages = [...prev];
-        newMessages[newMessages.length - 1] = {
-          ...assistantMessage,
-          content: `❌ Error: ${error instanceof Error ? error.message : 'Unknown error'}`,
-        };
-        return newMessages;
-      });
-    }
-  };
-
-  const createPullRequestAfterGeneration = async (repoId: string, code: string, language: Language) => {
-    try {
-      console.log('[PR] Creating PR on:', repoId);
-
-      // Update message to show PR creation in progress
-      setMessages((prev) => {
-        const newMessages = [...prev];
-        newMessages[newMessages.length - 1] = {
-          ...newMessages[newMessages.length - 1],
-          content: '✅ Code generated successfully!\n\n🔄 Creating Pull Request...',
-        };
-        return newMessages;
-      });
-
-      const prResult = await apiClient.createPullRequest(
-        repoId,
-        code,
-        language,
-        '🎨 Redesign from AnyCoder',
-        undefined
-      );
-
-      if (prResult.success && prResult.pr_url) {
-        console.log('[PR] Pull Request created:', prResult.pr_url);
-
-        // Update message with PR link
-        setMessages((prev) => {
-          const newMessages = [...prev];
-          newMessages[newMessages.length - 1] = {
-            ...newMessages[newMessages.length - 1],
-            content: `✅ Code generated successfully!\n\n✅ Pull Request created! [View PR](${prResult.pr_url})`,
-          };
-          return newMessages;
-        });
-
-        // Open PR in new tab
-        window.open(prResult.pr_url, '_blank');
-      } else {
-        throw new Error(prResult.message || 'Failed to create Pull Request');
-      }
-    } catch (error: any) {
-      console.error('[PR] Failed to create Pull Request:', error);
-
-      // Update message with error
-      setMessages((prev) => {
-        const newMessages = [...prev];
-        newMessages[newMessages.length - 1] = {
-          ...newMessages[newMessages.length - 1],
-          content: `✅ Code generated successfully!\n\n❌ Failed to create Pull Request: ${error.message || 'Unknown error'}`,
-        };
-        return newMessages;
-      });
-    }
-  };
-
-  const handleDeploy = async () => {
-    console.log('[Deploy] 🎬 handleDeploy called');
-    console.log('[Deploy] generatedCode exists?', !!generatedCode);
-    console.log('[Deploy] generatedCode length:', generatedCode?.length);
-    console.log('[Deploy] generatedCode preview:', generatedCode?.substring(0, 200));
-
-    if (!generatedCode) {
-      alert('No code to publish! Generate some code first.');
-      return;
-    }
-
-    // Get current username (fetch if not loaded)
-    let currentUsername = username;
-    if (!currentUsername) {
-      console.log('[Deploy] Username not in state, fetching from auth...');
-      try {
-        const authStatus = await apiClient.getAuthStatus();
-        if (authStatus.username) {
-          currentUsername = authStatus.username;
-          setUsername(authStatus.username);
-          console.log('[Deploy] Fetched username:', currentUsername);
-        }
-      } catch (e) {
-        console.error('[Deploy] Could not get username:', e);
-        // Don't fail - let backend handle auth
-      }
-    }
-
-    // SAME LOGIC AS GRADIO VERSION: Parse message history to find existing space
-    let existingSpace: string | null = null;
-
-    // Look for previous deployment or imported space in history
-    console.log('[Deploy] ========== DEBUG START ==========');
-    console.log('[Deploy] Total messages in history:', messages.length);
-    console.log('[Deploy] Current username:', currentUsername);
-    console.log('[Deploy] Auth status:', isAuthenticated ? 'authenticated' : 'not authenticated');
-    console.log('[Deploy] Messages:', JSON.stringify(messages, null, 2));
-
-    if (messages.length > 0 && currentUsername) {
-      console.log('[Deploy] Scanning message history FORWARD (oldest first) - MATCHING GRADIO LOGIC...');
-      console.log('[Deploy] Total messages to scan:', messages.length);
-
-      // EXACT GRADIO LOGIC: Scan forward (oldest first) and stop at first match
-      // Gradio: for user_msg, assistant_msg in history:
-      for (let i = 0; i < messages.length; i++) {
-        const msg = messages[i];
-        console.log(`[Deploy] Checking message ${i}:`, {
-          role: msg.role,
-          contentPreview: msg.content.substring(0, 100)
-        });
-
-        // Check assistant messages for deployment confirmations
-        if (msg.role === 'assistant') {
-          // Check for "✅ Deployed!" message
-          if (msg.content.includes('✅ Deployed!')) {
-            const match = msg.content.match(/huggingface\.co\/spaces\/([^\/\s\)]+\/[^\/\s\)]+)/);
-            if (match) {
-              existingSpace = match[1];
-              console.log('[Deploy] ✅ Found "✅ Deployed!" - existing_space:', existingSpace);
-              break;
-            }
-          }
-          // Check for "✅ Updated!" message
-          else if (msg.content.includes('✅ Updated!')) {
-            const match = msg.content.match(/huggingface\.co\/spaces\/([^\/\s\)]+\/[^\/\s\)]+)/);
-            if (match) {
-              existingSpace = match[1];
-              console.log('[Deploy] ✅ Found "✅ Updated!" - existing_space:', existingSpace);
-              break;
-            }
-          }
-        }
-        // Check user messages for imports
-        else if (msg.role === 'user' && msg.content.startsWith('Imported Space from')) {
-          console.log('[Deploy] 🎯 Found "Imported Space from" message');
-          const match = msg.content.match(/huggingface\.co\/spaces\/([^\/\s\)]+\/[^\/\s\)]+)/);
-          if (match) {
-            const importedSpace = match[1];
-            console.log('[Deploy] Extracted imported space:', importedSpace);
-            console.log('[Deploy] Checking ownership - user:', currentUsername, 'space:', importedSpace);
-
-            // Only use if user owns it (EXACT GRADIO LOGIC)
-            if (importedSpace.startsWith(`${currentUsername}/`)) {
-              existingSpace = importedSpace;
-              console.log('[Deploy] ✅✅✅ USER OWNS - Will update:', existingSpace);
-              break;
-            } else {
-              console.log('[Deploy] ⚠️ User does NOT own - will create new space');
-              // existing_space remains None (create new deployment)
-            }
-          }
-        }
-      }
-
-      console.log('[Deploy] Final existingSpace value:', existingSpace);
-    } else {
-      console.log('[Deploy] Skipping scan - no messages or no username');
-      console.log('[Deploy] Messages length:', messages.length);
-      console.log('[Deploy] Username:', currentUsername);
-    }
-    console.log('[Deploy] ========== DEBUG END ==========');
-
-    // TEMPORARY DEBUG: Show what will be sent
-    console.log('[Deploy] 🚀 ABOUT TO DEPLOY:');
-    console.log('[Deploy] - Language:', selectedLanguage);
-    console.log('[Deploy] - existing_repo_id:', existingSpace || 'None (new deployment)');
-    console.log('[Deploy] - Username:', currentUsername);
-
-    // Auto-generate space name (never prompt user)
-    let spaceName = undefined;  // undefined = backend will auto-generate
-
-    try {
-      console.log('[Deploy] ========== DEPLOY START (Gradio-style history parsing) ==========');
-      console.log('[Deploy] Username:', currentUsername);
-      console.log('[Deploy] Existing space from history:', existingSpace);
-      console.log('[Deploy] Will create new space?', !existingSpace);
-      console.log('[Deploy] Messages count:', messages.length);
-      console.log('[Deploy] Messages (first 3):', messages.slice(0, 3).map(m => ({ role: m.role, content: m.content.substring(0, 100) })));
-
-      // CRITICAL DEBUG: Check what we're actually sending
-      const historyToSend = messages.map(msg => ({ role: msg.role, content: msg.content }));
-      console.log('[Deploy] History to send (length):', historyToSend.length);
-      console.log('[Deploy] History to send (first 2):', historyToSend.slice(0, 2));
-      console.log('[Deploy] =================================================================');
-
-      // Build deploy request, omitting undefined fields
-      const deployRequest: any = {
-        code: generatedCode,
-        language: selectedLanguage,
-        history: historyToSend  // Use the variable we just logged
-      };
-
-      // Only include optional fields if they have values
-      if (spaceName) {
-        deployRequest.space_name = spaceName;
-      }
-      if (existingSpace) {
-        deployRequest.existing_repo_id = existingSpace;
-        deployRequest.commit_message = 'Update via AnyCoder';
-      }
-
-      console.log('[Deploy] 🚀 Sending to backend:', {
-        existing_repo_id: deployRequest.existing_repo_id,
-        space_name: deployRequest.space_name,
-        language: deployRequest.language,
-        has_code: !!deployRequest.code,
-        code_length: deployRequest.code?.length,
-        history_length: deployRequest.history?.length
-      });
-      console.log('[Deploy] Full request object:', JSON.stringify(deployRequest, null, 2).substring(0, 500));
-
-      const response = await apiClient.deploy(deployRequest);
-      console.log('[Deploy] ✅ Response received:', response);
-
-      if (response.success) {
-        // Update current repo ID if we got one back
-        if (response.repo_id) {
-          console.log('[Deploy] Setting currentRepoId to:', response.repo_id);
-          setCurrentRepoId(response.repo_id);
-        } else if (response.space_url) {
-          // Extract repo_id from space_url as fallback
-          const match = response.space_url.match(/huggingface\.co\/spaces\/([^\/\s\)]+\/[^\/\s\)]+)/);
-          if (match) {
-            console.log('[Deploy] Extracted repo_id from URL:', match[1]);
-            setCurrentRepoId(match[1]);
-          }
-        }
-
-        // Add deployment message to chat (EXACT format backend expects)
-        const deployMessage: Message = {
-          role: 'assistant',
-          content: existingSpace
-            ? `✅ Updated! View your space at: ${response.space_url}`
-            : `✅ Deployed! View your space at: ${response.space_url}`,
-          timestamp: new Date().toISOString(),
-        };
-        setMessages((prev) => [...prev, deployMessage]);
-
-        // Open the space URL in a new tab
-        window.open(response.space_url, '_blank');
-
-        // Show success message
-        const isDev = response.dev_mode;
-        const message = isDev
-          ? '🚀 Opening HuggingFace Spaces creation page...\nPlease complete the space setup in the new tab.'
-          : existingSpace
-            ? `✅ Updated successfully!\n\nOpening: ${response.space_url}`
-            : `✅ Published successfully!\n\nOpening: ${response.space_url}`;
-        alert(message);
-      } else {
-        alert(`Deployment failed: ${response.message}`);
-      }
-    } catch (error: any) {
-      console.error('[Deploy] Full error object:', error);
-      console.error('[Deploy] Error response:', error.response);
-      console.error('[Deploy] Error data:', error.response?.data);
-
-      const errorMessage = error.response?.data?.detail
-        || error.response?.data?.message
-        || error.message
-        || 'Unknown error';
-
-      alert(`Deployment error: ${errorMessage}\n\nCheck console for details.`);
-    }
-  };
-
-  const handleClear = () => {
-    if (confirm('Start a new chat? This will clear all messages and code.')) {
-      setMessages([]);
-      setGeneratedCode('');
-      setShowLandingPage(true);
-      // Clear localStorage to remove import history
-      if (typeof window !== 'undefined') {
-        localStorage.removeItem('anycoder_messages');
-        console.log('[localStorage] Cleared messages from localStorage');
-      }
-    }
-  };
-
-  const handleImport = (code: string, language: Language, importUrl?: string) => {
-    console.log('[Import] ========== IMPORT START ==========');
-    console.log('[Import] Language:', language);
-    console.log('[Import] Import URL:', importUrl);
-    console.log('[Import] Current username:', username);
-    console.log('[Import] Current repo before import:', currentRepoId);
-
-    // Hide landing page when importing
-    if (showLandingPage) {
-      setShowLandingPage(false);
-    }
-
-    setGeneratedCode(code);
-    setSelectedLanguage(language);
-
-    // Extract repo_id from import URL if provided
-    if (importUrl) {
-      const spaceMatch = importUrl.match(/huggingface\.co\/spaces\/([^\/\s\)]+\/[^\/\s\)]+)/);
-      console.log('[Import] Regex match result:', spaceMatch);
-
-      if (spaceMatch) {
-        const importedRepoId = spaceMatch[1];
-        const importedUsername = importedRepoId.split('/')[0];
-
-        console.log('[Import] ========================================');
-        console.log('[Import] Extracted repo_id:', importedRepoId);
-        console.log('[Import] Imported username:', importedUsername);
-        console.log('[Import] Logged-in username:', username);
-        console.log('[Import] Ownership check:', importedUsername === username);
-        console.log('[Import] ========================================');
-
-        // Only set as current repo if user owns it
-        if (username && importedRepoId.startsWith(`${username}/`)) {
-          console.log('[Import] ✅✅✅ BEFORE setCurrentRepoId - currentRepoId was:', currentRepoId);
-          setCurrentRepoId(importedRepoId);
-          console.log('[Import] ✅✅✅ CALLED setCurrentRepoId with:', importedRepoId);
-          console.log('[Import] ✅✅✅ Note: State update is async, currentRepoId will update later');
-        } else {
-          // User doesn't own the imported space, clear current repo
-          setCurrentRepoId(null);
-          if (!username) {
-            console.log('[Import] ⚠️⚠️⚠️ USERNAME IS NULL - Cannot set repo ownership!');
-          } else {
-            console.log('[Import] ⚠️ User does not own imported space:', importedRepoId, '(username:', username, ')');
-          }
-        }
-      } else {
-        console.log('[Import] ⚠️ Could not extract repo_id from URL:', importUrl);
-      }
-    } else {
-      console.log('[Import] No import URL provided');
-    }
-
-    console.log('[Import] ========== IMPORT END ==========');
-
-    // Add messages that include the imported code so LLM can see it
-    const userMessage: Message = {
-      role: 'user',
-      content: importUrl
-        ? `Imported Space from ${importUrl}`
-        : `I imported a ${language} project. Here's the code that was imported.`,
-      timestamp: new Date().toISOString(),
-    };
-
-    const assistantMessage: Message = {
-      role: 'assistant',
-      content: `✅ I've loaded your ${language} project. The code is now in the editor. You can ask me to:\n\n• Modify existing features\n• Add new functionality\n• Fix bugs or improve code\n• Explain how it works\n• Publish it to HuggingFace Spaces\n\nWhat would you like me to help you with?`,
-      timestamp: new Date().toISOString(),
-    };
-
-    setMessages((prev) => [...prev, userMessage, assistantMessage]);
-
-    // Switch to editor view on mobile
-    setMobileView('editor');
-  };
-
-  // Handle landing page prompt submission
-  const handleLandingPageStart = async (prompt: string, language: Language, modelId: string, imageUrl?: string, repoId?: string, shouldCreatePR?: boolean) => {
-    console.log('[LandingPageStart] Received imageUrl:', imageUrl ? 'Yes' : 'No');
-    console.log('[LandingPageStart] Image URL length:', imageUrl?.length || 0);
-
-    // Hide landing page immediately for smooth transition
-    setShowLandingPage(false);
-
-    // If shouldCreatePR is true, set pending PR state and ref
-    if (shouldCreatePR && repoId) {
-      console.log('[PR] Setting pending PR for:', repoId);
-      const prInfo = { repoId, language };
-      setPendingPR(prInfo);
-      pendingPRRef.current = prInfo;  // Set ref immediately for synchronous access
-    }
-
-    // Send the message with the selected language, model, and image
-    // Don't pass repoId to handleSendMessage when creating PR (we want to generate code first, then create PR)
-    await handleSendMessage(prompt, imageUrl, language, modelId, shouldCreatePR ? undefined : repoId, shouldCreatePR);
-  };
-
-  // Resize handlers for chat sidebar (desktop only)
-  const startResizingChat = () => {
-    if (isDesktop) {
-      setIsResizingChat(true);
-    }
-  };
-
-  const startResizingSettings = () => {
-    if (isDesktop) {
-      setIsResizingSettings(true);
-    }
-  };
-
-  // Handle mouse move for resizing (desktop only)
-  useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!isDesktop) return; // Skip on mobile
-
-      if (isResizingChat) {
-        const newWidth = Math.min(Math.max(e.clientX, 250), 600); // Min 250px, max 600px
-        setChatSidebarWidth(newWidth);
-      }
-      if (isResizingSettings) {
-        const newWidth = Math.min(Math.max(window.innerWidth - e.clientX, 220), 500); // Min 220px, max 500px
-        setSettingsSidebarWidth(newWidth);
-      }
-    };
-
-    const handleMouseUp = () => {
-      if (isResizingChat) {
-        setIsResizingChat(false);
-        // Save to localStorage
-        localStorage.setItem('anycoder_chat_sidebar_width', chatSidebarWidth.toString());
-        document.body.classList.remove('resizing');
-      }
-      if (isResizingSettings) {
-        setIsResizingSettings(false);
-        // Save to localStorage
-        localStorage.setItem('anycoder_settings_sidebar_width', settingsSidebarWidth.toString());
-        document.body.classList.remove('resizing');
-      }
-    };
-
-    if (isResizingChat || isResizingSettings) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-      // Add resizing class to body for cursor and selection styles
-      document.body.classList.add('resizing');
-    }
-
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-      document.body.classList.remove('resizing');
-    };
-  }, [isResizingChat, isResizingSettings, chatSidebarWidth, settingsSidebarWidth, isDesktop]);
-
-  // Show landing page if no messages and showLandingPage is true
-  if (showLandingPage && messages.length === 0) {
-    return (
-      <div className="min-h-screen animate-in fade-in duration-300">
-        <LandingPage
-          onStart={handleLandingPageStart}
-          onImport={handleImport}
-          isAuthenticated={isAuthenticated}
-          initialLanguage={selectedLanguage}
-          initialModel={selectedModel}
-          onAuthChange={checkAuth}
-          setPendingPR={setPendingPR}
-          pendingPRRef={pendingPRRef}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-screen flex flex-col bg-[#000000] animate-in fade-in duration-300">
-      <Header />
-
-      {/* Apple-style layout - Responsive */}
-      <main className="flex-1 flex overflow-hidden relative">
-        {/* Left Sidebar - Chat Panel (Hidden on mobile, shown when mobileView='chat') */}
-        <div
-          className={`
-            ${mobileView === 'chat' ? 'flex' : 'hidden'} md:flex
-            w-full
-            bg-[#000000] border-r border-[#424245]/30 
-            flex-col
-            absolute md:relative inset-0 md:inset-auto z-10 md:z-auto
-            md:flex-shrink-0
-          `}
-          style={isDesktop ? { width: `${chatSidebarWidth}px` } : undefined}
-        >
-          {/* Panel Header */}
-          <div className="flex items-center px-4 py-3 bg-[#000000] border-b border-[#424245]/30">
-            <span className="text-sm font-medium text-[#f5f5f7]">Chat</span>
-          </div>
-
-          {/* Chat Panel */}
-          <div className="flex-1 overflow-hidden">
-            <ChatInterface
-              messages={messages}
-              onSendMessage={handleSendMessage}
-              isGenerating={isGenerating}
-              isAuthenticated={isAuthenticated}
-              supportsImages={currentModelSupportsImages}
-            />
-          </div>
-        </div>
-
-        {/* Resize Handle for Chat Sidebar (Desktop only) */}
-        <div
-          className={`hidden md:block resize-handle ${isResizingChat ? 'resizing' : ''}`}
-          onMouseDown={startResizingChat}
-          title="Drag to resize chat panel"
-        />
-
-        {/* Center - Editor Group (Always visible on mobile when mobileView='editor', always visible on desktop) */}
-        <div className={`
-          ${mobileView === 'editor' ? 'flex' : 'hidden'} md:flex
-          flex-1 flex-col bg-[#000000]
-          absolute md:relative inset-0 md:inset-auto z-10 md:z-auto
-          md:min-w-0 overflow-hidden
-          w-full
-        `}>
-          {/* Tab Bar */}
-          <div className="flex items-center px-4 h-10 bg-[#1d1d1f] border-b border-[#424245]/30">
-            <div className="flex items-center space-x-2">
-              <div className="px-3 py-1 bg-[#2d2d2f] text-sm text-[#f5f5f7] rounded-t-lg font-normal border-t border-x border-[#424245]/50">
-                {selectedLanguage === 'html' ? 'app.html' :
-                  selectedLanguage === 'gradio' || selectedLanguage === 'streamlit' ? 'app.py' :
-                    selectedLanguage === 'transformers.js' ? 'app.js' :
-                      selectedLanguage === 'comfyui' ? 'app.json' :
-                        selectedLanguage === 'react' ? 'app.jsx' :
-                          `${selectedLanguage}.txt`}
-              </div>
-            </div>
-            <div className="ml-auto flex items-center space-x-3 text-xs text-[#86868b]">
-              {isGenerating && (
-                <span className="flex items-center space-x-1.5">
-                  <div className="w-1.5 h-1.5 bg-white rounded-full animate-pulse"></div>
-                  <span>Generating...</span>
-                </span>
-              )}
-              <span className="font-medium">{selectedLanguage.toUpperCase()}</span>
-            </div>
-          </div>
-
-          {/* Editor */}
-          <div className="flex-1">
-            <CodeEditor
-              code={generatedCode || '// Your generated code will appear here...\n// Select a model and start chatting to generate code'}
-              language={selectedLanguage}
-              onChange={setGeneratedCode}
-              readOnly={isGenerating}
-            />
-          </div>
-        </div>
-
-        {/* Resize Handle for Settings Sidebar (Desktop only) */}
-        <div
-          className={`hidden md:block resize-handle ${isResizingSettings ? 'resizing' : ''}`}
-          onMouseDown={startResizingSettings}
-          title="Drag to resize settings panel"
-        />
-
-        {/* Right Sidebar - Configuration Panel (Hidden on mobile, shown when mobileView='settings') */}
-        <div
-          className={`
-            ${mobileView === 'settings' ? 'flex' : 'hidden'} md:flex
-            w-full
-            bg-[#000000] border-l border-[#424245]/30 
-            overflow-y-auto
-            absolute md:relative inset-0 md:inset-auto z-10 md:z-auto
-            flex-col
-            md:flex-shrink-0
-          `}
-          style={isDesktop ? { width: `${settingsSidebarWidth}px` } : undefined}
-        >
-          <ControlPanel
-            selectedLanguage={selectedLanguage}
-            selectedModel={selectedModel}
-            onLanguageChange={setSelectedLanguage}
-            onModelChange={setSelectedModel}
-            onClear={handleClear}
-            isGenerating={isGenerating}
-          />
-        </div>
-      </main>
-
-      {/* Mobile Bottom Navigation (visible only on mobile) */}
-      <nav className="md:hidden bg-[#000000]/95 backdrop-blur-xl border-t border-[#424245]/20 flex items-center justify-around h-14 px-2 safe-area-bottom">
-        <button
-          onClick={() => setMobileView('chat')}
-          className={`flex flex-col items-center justify-center flex-1 py-1.5 transition-all ${mobileView === 'chat'
-            ? 'text-white'
-            : 'text-[#86868b]'
-            }`}
-        >
-          <svg className="w-5 h-5 mb-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-          </svg>
-          <span className="text-[10px]">Chat</span>
-        </button>
-
-        <button
-          onClick={() => setMobileView('editor')}
-          className={`flex flex-col items-center justify-center flex-1 py-1.5 transition-all ${mobileView === 'editor'
-            ? 'text-white'
-            : 'text-[#86868b]'
-            }`}
-        >
-          <svg className="w-5 h-5 mb-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-          </svg>
-          <span className="text-[10px]">Code</span>
-        </button>
-
-        <button
-          onClick={() => setMobileView('settings')}
-          className={`flex flex-col items-center justify-center flex-1 py-1.5 transition-all ${mobileView === 'settings'
-            ? 'text-white'
-            : 'text-[#86868b]'
-            }`}
-        >
-          <svg className="w-5 h-5 mb-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-          </svg>
-          <span className="text-[10px]">Settings</span>
-        </button>
-      </nav>
-
-      {/* Status Bar - Apple style (hidden on mobile) */}
-      <footer className="hidden md:flex h-6 bg-[#000000] border-t border-[#424245]/20 text-[#86868b] text-[11px] items-center px-4 justify-between">
-        <div className="flex items-center space-x-4">
-          <span>AnyCoder</span>
-          <span className="flex items-center gap-1.5">
-            {isAuthenticated ? (
-              <>
-                <span className="w-1.5 h-1.5 bg-[#30d158] rounded-full"></span>
-                <span>Connected</span>
-              </>
-            ) : (
-              <>
-                <span className="w-1.5 h-1.5 bg-[#ff9f0a] rounded-full"></span>
-                <span>Not authenticated</span>
-              </>
-            )}
-          </span>
-        </div>
-        <div className="flex items-center space-x-4">
-          <span>{messages.length} messages</span>
-        </div>
-      </footer>
-    </div>
-  );
-}
-
-

frontend/src/components/ChatInterface.tsx

@@ -1,212 +0,0 @@
-'use client';
-
-import { useState, useRef, useEffect } from 'react';
-import type { Message } from '@/types';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import Image from 'next/image';
-
-interface ChatInterfaceProps {
-  messages: Message[];
-  onSendMessage: (message: string, imageUrl?: string) => void;
-  isGenerating: boolean;
-  isAuthenticated?: boolean;
-  supportsImages?: boolean;
-}
-
-export default function ChatInterface({ messages, onSendMessage, isGenerating, isAuthenticated = false, supportsImages = false }: ChatInterfaceProps) {
-  const [input, setInput] = useState('');
-  const [uploadedImageUrl, setUploadedImageUrl] = useState<string | null>(null);
-  const [uploadedImageFile, setUploadedImageFile] = useState<File | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (input.trim() && !isGenerating) {
-      onSendMessage(input, uploadedImageUrl || undefined);
-      setInput('');
-      setUploadedImageUrl(null);
-      setUploadedImageFile(null);
-    }
-  };
-
-  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      // Create a data URL for the image
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        const imageUrl = event.target?.result as string;
-        setUploadedImageUrl(imageUrl);
-        setUploadedImageFile(file);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const removeImage = () => {
-    setUploadedImageUrl(null);
-    setUploadedImageFile(null);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  };
-
-  return (
-    <div className="flex flex-col h-full bg-[#000000]">
-      {/* Messages */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-3">
-        {messages.length === 0 ? (
-          <div className="text-center text-[#86868b] mt-12">
-            {isAuthenticated ? (
-              <>
-                <p className="text-lg font-medium text-[#f5f5f7]">Start a conversation</p>
-                <p className="text-sm mt-2 text-[#86868b]">Describe what you want to build</p>
-              </>
-            ) : (
-              <>
-                <p className="text-lg font-medium text-[#f5f5f7]">Sign in to get started</p>
-                <p className="text-sm mt-2 text-[#86868b]">Use Dev Login or sign in with Hugging Face</p>
-              </>
-            )}
-          </div>
-        ) : (
-          messages.map((message, index) => (
-            <div
-              key={index}
-              className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
-            >
-              <div
-                className={`max-w-[85%] rounded-2xl px-4 py-3 ${
-                  message.role === 'user'
-                    ? 'bg-white text-black'
-                    : 'bg-[#2d2d2f] text-[#f5f5f7]'
-                }`}
-              >
-                {message.image_url && message.role === 'user' && (
-                  <div className="mb-2">
-                    <Image 
-                      src={message.image_url} 
-                      alt="Uploaded image" 
-                      width={200} 
-                      height={200} 
-                      className="rounded-lg object-cover max-w-full h-auto"
-                      unoptimized
-                    />
-                  </div>
-                )}
-                <div className="text-sm leading-relaxed">
-                  {message.role === 'assistant' ? (
-                    <ReactMarkdown 
-                      remarkPlugins={[remarkGfm]}
-                      className="prose prose-invert prose-sm max-w-none [&>p]:my-0 [&>ul]:my-1 [&>ol]:my-1"
-                      components={{
-                        a: ({ node, ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />
-                      }}
-                    >
-                      {message.content}
-                    </ReactMarkdown>
-                  ) : (
-                    <p className="whitespace-pre-wrap break-words">{message.content}</p>
-                  )}
-                </div>
-                {message.timestamp && (
-                  <div className="text-[10px] opacity-40 mt-2 text-right">
-                    {new Date(message.timestamp).toLocaleTimeString()}
-                  </div>
-                )}
-              </div>
-            </div>
-          ))
-        )}
-        <div ref={messagesEndRef} />
-      </div>
-
-      {/* Input */}
-      <div className="border-t border-[#424245]/30 p-3 bg-[#000000]">
-        {/* Image Preview */}
-        {uploadedImageUrl && (
-          <div className="mb-2 relative inline-block">
-            <Image 
-              src={uploadedImageUrl} 
-              alt="Upload preview" 
-              width={120} 
-              height={120} 
-              className="rounded-lg object-cover"
-              unoptimized
-            />
-            <button
-              type="button"
-              onClick={removeImage}
-              className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full hover:bg-red-600 transition-all flex items-center justify-center text-xs font-bold"
-            >
-              ×
-            </button>
-          </div>
-        )}
-        
-        <form onSubmit={handleSubmit} className="flex items-center gap-2">
-          <input
-            type="text"
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            placeholder={isAuthenticated ? "Message AnyCoder..." : "Sign in first..."}
-            disabled={isGenerating || !isAuthenticated}
-            className="flex-1 px-4 py-2.5 bg-[#2d2d2f] text-[#f5f5f7] text-sm border border-[#424245]/50 rounded-full focus:outline-none focus:border-[#424245] disabled:opacity-40 disabled:cursor-not-allowed placeholder-[#86868b]"
-          />
-          
-          {/* Image Upload Button (only show if model supports images) */}
-          {supportsImages && (
-            <>
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept="image/*"
-                onChange={handleImageUpload}
-                className="hidden"
-                disabled={isGenerating || !isAuthenticated}
-              />
-              <button
-                type="button"
-                onClick={() => fileInputRef.current?.click()}
-                disabled={isGenerating || !isAuthenticated}
-                className="p-2.5 bg-[#2d2d2f] text-[#f5f5f7] rounded-full hover:bg-[#424245] disabled:opacity-40 disabled:cursor-not-allowed transition-all active:scale-95 flex-shrink-0"
-                title="Upload image"
-              >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
-                </svg>
-              </button>
-            </>
-          )}
-          
-          <button
-            type="submit"
-            disabled={isGenerating || !input.trim() || !isAuthenticated}
-            className="p-2.5 bg-white text-black rounded-full hover:bg-[#f5f5f7] disabled:bg-[#2d2d2f] disabled:text-[#86868b] disabled:cursor-not-allowed transition-all active:scale-95 flex-shrink-0"
-          >
-            {isGenerating ? (
-              <svg className="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-              </svg>
-            ) : (
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14M12 5l7 7-7 7" />
-              </svg>
-            )}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}
-

frontend/src/components/CodeEditor.tsx

@@ -1,101 +0,0 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-import Editor from '@monaco-editor/react';
-
-interface CodeEditorProps {
-  code: string;
-  language: string;
-  onChange?: (value: string) => void;
-  readOnly?: boolean;
-}
-
-export default function CodeEditor({ code, language, onChange, readOnly = false }: CodeEditorProps) {
-  const editorRef = useRef<any>(null);
-  const lastFormattedCodeRef = useRef<string>('');
-  const formatTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  // Map our language names to Monaco language IDs
-  const getMonacoLanguage = (lang: string): string => {
-    const languageMap: Record<string, string> = {
-      'html': 'html',
-      'gradio': 'python',
-      'streamlit': 'python',
-      'transformers.js': 'html', // Contains HTML, CSS, and JavaScript - HTML is primary
-      'react': 'javascriptreact', // JSX syntax highlighting
-      'comfyui': 'json',
-    };
-    return languageMap[lang] || 'plaintext';
-  };
-
-  const handleEditorDidMount = (editor: any) => {
-    editorRef.current = editor;
-  };
-
-  // Format code intelligently - only when generation appears complete
-  useEffect(() => {
-    if (editorRef.current && code && code.length > 100) {
-      // Clear existing timeout
-      if (formatTimeoutRef.current) {
-        clearTimeout(formatTimeoutRef.current);
-      }
-      
-      // Only format if code hasn't been formatted yet or if it's different
-      if (code !== lastFormattedCodeRef.current) {
-        // Wait 1 second after code stops changing before formatting
-        formatTimeoutRef.current = setTimeout(() => {
-          if (editorRef.current) {
-            editorRef.current.getAction('editor.action.formatDocument')?.run();
-            lastFormattedCodeRef.current = code;
-          }
-        }, 1000);
-      }
-    }
-    
-    return () => {
-      if (formatTimeoutRef.current) {
-        clearTimeout(formatTimeoutRef.current);
-      }
-    };
-  }, [code]);
-
-  return (
-    <div className="h-full overflow-hidden bg-[#1e1e1e]">
-      <Editor
-        height="100%"
-        language={getMonacoLanguage(language)}
-        value={code}
-        onChange={(value) => onChange && onChange(value || '')}
-        theme="vs-dark"
-        options={{
-          readOnly,
-          minimap: { enabled: true },
-          fontSize: 14,
-          fontFamily: "'SF Mono', 'JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', monospace",
-          wordWrap: 'off',
-          lineNumbers: 'on',
-          lineNumbersMinChars: 3,
-          glyphMargin: false,
-          folding: true,
-          lineDecorationsWidth: 10,
-          scrollBeyondLastLine: false,
-          automaticLayout: true,
-          tabSize: 2,
-          insertSpaces: true,
-          padding: { top: 16, bottom: 16 },
-          lineHeight: 22,
-          letterSpacing: 0.5,
-          renderLineHighlight: 'line',
-          formatOnPaste: true,
-          formatOnType: false,
-          scrollbar: {
-            verticalScrollbarSize: 10,
-            horizontalScrollbarSize: 10,
-          },
-        }}
-        onMount={handleEditorDidMount}
-      />
-    </div>
-  );
-}
-

frontend/src/components/ControlPanel.tsx

@@ -1,244 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import { apiClient } from '@/lib/api';
-import type { Model, Language } from '@/types';
-
-interface ControlPanelProps {
-  selectedLanguage: Language;
-  selectedModel: string;
-  onLanguageChange: (language: Language) => void;
-  onModelChange: (modelId: string) => void;
-  onClear: () => void;
-  isGenerating: boolean;
-}
-
-export default function ControlPanel({
-  selectedLanguage,
-  selectedModel,
-  onLanguageChange,
-  onModelChange,
-  onClear,
-  isGenerating,
-}: ControlPanelProps) {
-  const [models, setModels] = useState<Model[]>([]);
-  const [languages, setLanguages] = useState<Language[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  // Dropdown states
-  const [showLanguageDropdown, setShowLanguageDropdown] = useState(false);
-  const [showModelDropdown, setShowModelDropdown] = useState(false);
-  const languageDropdownRef = useRef<HTMLDivElement>(null);
-  const modelDropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    loadData();
-  }, []);
-
-  // Close dropdowns when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (languageDropdownRef.current && !languageDropdownRef.current.contains(event.target as Node)) {
-        setShowLanguageDropdown(false);
-      }
-      if (modelDropdownRef.current && !modelDropdownRef.current.contains(event.target as Node)) {
-        setShowModelDropdown(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  const loadData = async () => {
-    setIsLoading(true);
-    await Promise.all([loadModels(), loadLanguages()]);
-    setIsLoading(false);
-  };
-
-  const loadModels = async () => {
-    try {
-      console.log('Loading models...');
-      const modelsList = await apiClient.getModels();
-      console.log('Models loaded:', modelsList);
-      setModels(modelsList);
-    } catch (error) {
-      console.error('Failed to load models:', error);
-    }
-  };
-
-  const loadLanguages = async () => {
-    try {
-      console.log('Loading languages...');
-      const { languages: languagesList } = await apiClient.getLanguages();
-      console.log('Languages loaded:', languagesList);
-      setLanguages(languagesList);
-    } catch (error) {
-      console.error('Failed to load languages:', error);
-    }
-  };
-
-  const formatLanguageName = (lang: Language) => {
-    if (lang === 'html') return 'HTML';
-    if (lang === 'transformers.js') return 'Transformers.js';
-    if (lang === 'comfyui') return 'ComfyUI';
-    if (lang === 'daggr') return 'Daggr';
-    return lang.charAt(0).toUpperCase() + lang.slice(1);
-  };
-
-  const formatModelName = (name: string, id: string) => {
-    if (id === 'moonshotai/Kimi-K2.6') return 'Kimi-K2.6 ✨';
-    if (id === 'google/gemma-4-31B-it') return 'Gemma-4-31B 🤖';
-    if (id === 'zai-org/GLM-5.1') return 'GLM-5.1 🚀';
-    if (id === 'Qwen/Qwen3.5-397B-A17B') return 'Qwen3.5-397B-A17B 🤖';
-    return name;
-  };
-
-  return (
-    <div className="bg-[#000000] h-full flex flex-col">
-      {/* Panel Header */}
-      <div className="flex items-center px-4 py-3 border-b border-[#424245]/30">
-        <h3 className="text-sm font-medium text-[#f5f5f7]">Settings</h3>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 p-4 space-y-5 overflow-y-auto">
-
-        {/* Language Selection */}
-        <div className="relative" ref={languageDropdownRef}>
-          <label className="block text-xs font-medium text-[#f5f5f7] mb-2">
-            Language
-          </label>
-          <button
-            type="button"
-            onClick={() => {
-              setShowLanguageDropdown(!showLanguageDropdown);
-              setShowModelDropdown(false);
-            }}
-            disabled={isGenerating || isLoading}
-            className="w-full px-3 py-2 bg-[#1d1d1f] text-[#f5f5f7] text-sm border border-[#424245]/50 rounded-lg focus:outline-none focus:border-[#424245] disabled:opacity-40 flex items-center justify-between hover:bg-[#2d2d2f] transition-colors"
-          >
-            <span>{isLoading ? 'Loading...' : formatLanguageName(selectedLanguage)}</span>
-            <svg
-              className={`w-3.5 h-3.5 text-[#86868b] transition-transform ${showLanguageDropdown ? 'rotate-180' : ''}`}
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              strokeWidth={2.5}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-            </svg>
-          </button>
-
-          {/* Language Dropdown Tray */}
-          {showLanguageDropdown && !isLoading && languages.length > 0 && (
-            <div className="absolute z-50 w-full mt-1 bg-[#1d1d1f] border border-[#424245] rounded-lg shadow-xl overflow-hidden">
-              <div className="max-h-64 overflow-y-auto py-1">
-                {languages.map((lang) => (
-                  <button
-                    key={lang}
-                    type="button"
-                    onClick={() => {
-                      onLanguageChange(lang);
-                      setShowLanguageDropdown(false);
-                    }}
-                    className={`w-full px-3 py-2 text-left text-sm text-[#f5f5f7] hover:bg-[#2d2d2f] transition-colors ${selectedLanguage === lang ? 'bg-[#2d2d2f]' : ''
-                      }`}
-                  >
-                    {formatLanguageName(lang)}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Model Selection */}
-        <div className="relative" ref={modelDropdownRef}>
-          <label className="block text-xs font-medium text-[#f5f5f7] mb-2">
-            AI Model
-          </label>
-          <button
-            type="button"
-            onClick={() => {
-              setShowModelDropdown(!showModelDropdown);
-              setShowLanguageDropdown(false);
-            }}
-            disabled={isGenerating}
-            className="w-full px-3 py-2 bg-[#1d1d1f] text-[#f5f5f7] text-sm border border-[#424245]/50 rounded-lg focus:outline-none focus:border-[#424245] disabled:opacity-40 flex items-center justify-between hover:bg-[#2d2d2f] transition-colors"
-          >
-            {isLoading
-              ? 'Loading...'
-              : formatModelName(models.find(m => m.id === selectedModel)?.name || '', selectedModel) || selectedModel || 'Select model'
-            }
-            <svg
-              className={`w-3.5 h-3.5 text-[#86868b] flex-shrink-0 ml-2 transition-transform ${showModelDropdown ? 'rotate-180' : ''}`}
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              strokeWidth={2.5}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-            </svg>
-          </button>
-
-          {/* Model Dropdown Tray */}
-          {showModelDropdown && models.length > 0 && (
-            <div className="absolute z-50 w-full mt-1 bg-[#1d1d1f] border border-[#424245] rounded-lg shadow-xl overflow-hidden">
-              <div className="max-h-96 overflow-y-auto py-1">
-                {models.map((model) => (
-                  <button
-                    key={model.id}
-                    type="button"
-                    onClick={() => {
-                      onModelChange(model.id);
-                      setShowModelDropdown(false);
-                    }}
-                    className={`w-full px-3 py-2 text-left transition-colors ${selectedModel === model.id
-                      ? 'bg-[#2d2d2f]'
-                      : 'hover:bg-[#2d2d2f]'
-                      }`}
-                  >
-                    <div className="flex items-center justify-between gap-2">
-                      <span className="text-sm text-[#f5f5f7]">{formatModelName(model.name, model.id)}</span>
-                      {['moonshotai/Kimi-K2.6', 'google/gemma-4-31B-it', 'zai-org/GLM-5.1', 'Qwen/Qwen3.5-397B-A17B', 'MiniMaxAI/MiniMax-M2.5'].includes(model.id) && (
-                        <span className="px-1.5 py-0.5 bg-gradient-to-r from-purple-500 to-pink-500 text-white text-[9px] font-bold rounded uppercase flex-shrink-0">
-                          NEW
-                        </span>
-                      )}
-                    </div>
-                    {model.description && (
-                      <div className="text-[10px] text-[#86868b] mt-0.5 leading-relaxed">
-                        {model.description}
-                      </div>
-                    )}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Model Description */}
-          {!isLoading && models.find(m => m.id === selectedModel) && (
-            <p className="text-[10px] text-[#86868b] mt-2 leading-relaxed">
-              {models.find(m => m.id === selectedModel)?.description}
-            </p>
-          )}
-        </div>
-
-        {/* Action Buttons */}
-        <div className="flex flex-col space-y-2">
-          <button
-            onClick={onClear}
-            disabled={isGenerating}
-            className="w-full px-3 py-2.5 bg-[#1d1d1f] text-[#f5f5f7] text-sm rounded-full hover:bg-[#2d2d2f] disabled:opacity-30 disabled:cursor-not-allowed transition-all font-medium border border-[#424245]/50 flex items-center justify-center active:scale-95"
-          >
-            New Chat
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/src/components/Header.tsx

@@ -1,173 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { 
-  initializeOAuth, 
-  loginWithHuggingFace, 
-  loginDevMode,
-  logout, 
-  getStoredUserInfo, 
-  isAuthenticated,
-  isDevelopmentMode 
-} from '@/lib/auth';
-import { apiClient } from '@/lib/api';
-import type { OAuthUserInfo } from '@/lib/auth';
-
-export default function Header() {
-  const [userInfo, setUserInfo] = useState<OAuthUserInfo | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [showDevLogin, setShowDevLogin] = useState(false);
-  const [devUsername, setDevUsername] = useState('');
-  const isDevMode = isDevelopmentMode();
-
-  useEffect(() => {
-    handleOAuthInit();
-  }, []);
-
-  const handleOAuthInit = async () => {
-    setIsLoading(true);
-    try {
-      const oauthResult = await initializeOAuth();
-      
-      if (oauthResult) {
-        setUserInfo(oauthResult.userInfo);
-        // Set token in API client
-        apiClient.setToken(oauthResult.accessToken);
-      } else {
-        // Check if we have stored user info
-        const storedUserInfo = getStoredUserInfo();
-        if (storedUserInfo) {
-          setUserInfo(storedUserInfo);
-        }
-      }
-    } catch (error) {
-      console.error('OAuth initialization error:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleLogin = async () => {
-    try {
-      await loginWithHuggingFace();
-    } catch (error) {
-      console.error('Login failed:', error);
-      alert('Failed to start login process. Please try again.');
-    }
-  };
-
-  const handleLogout = () => {
-    logout();
-    apiClient.logout();
-    setUserInfo(null);
-    // Reload page to clear state
-    window.location.reload();
-  };
-
-  const handleDevLogin = () => {
-    if (!devUsername.trim()) {
-      alert('Please enter a username');
-      return;
-    }
-    
-    try {
-      const result = loginDevMode(devUsername);
-      setUserInfo(result.userInfo);
-      apiClient.setToken(result.accessToken);
-      setShowDevLogin(false);
-      setDevUsername('');
-    } catch (error) {
-      console.error('Dev login failed:', error);
-      alert('Failed to login in dev mode');
-    }
-  };
-
-  return (
-    <header className="bg-[#000000]/80 backdrop-blur-xl text-white border-b border-[#424245]/30">
-      <div className="flex items-center justify-between px-3 md:px-6 h-12 md:h-14">
-          <div className="flex items-center space-x-2 md:space-x-3">
-            <h1 className="text-sm md:text-base font-medium text-[#f5f5f7]">AnyCoder</h1>
-          </div>
-          
-          <div className="flex items-center space-x-3">
-            {isLoading ? (
-              <span className="text-xs text-[#86868b]">Loading...</span>
-            ) : userInfo ? (
-              <div className="flex items-center space-x-2 md:space-x-3">
-                {userInfo.avatarUrl && (
-                  <img 
-                    src={userInfo.avatarUrl} 
-                    alt={userInfo.name}
-                    className="w-6 h-6 md:w-7 md:h-7 rounded-full"
-                  />
-                )}
-                <span className="hidden sm:inline text-xs md:text-sm text-[#f5f5f7] font-medium truncate max-w-[100px] md:max-w-none">
-                  {userInfo.preferredUsername || userInfo.name}
-                </span>
-                <button
-                  onClick={handleLogout}
-                  className="px-3 md:px-3 py-1.5 md:py-1.5 text-[#f5f5f7] text-sm hover:text-white transition-colors"
-                >
-                  Logout
-                </button>
-              </div>
-            ) : (
-              <div className="flex items-center space-x-2 md:space-x-3">
-                {/* Dev Mode Login (only on localhost) */}
-                {isDevMode && (
-                  <>
-                    {showDevLogin ? (
-                      <div className="flex items-center space-x-2">
-                        <input
-                          type="text"
-                          value={devUsername}
-                          onChange={(e) => setDevUsername(e.target.value)}
-                          onKeyPress={(e) => e.key === 'Enter' && handleDevLogin()}
-                          placeholder="username"
-                          className="px-3 py-1.5 rounded-lg text-sm bg-[#1d1d1f] text-[#f5f5f7] border border-[#424245] focus:outline-none focus:border-white/50 w-32 font-medium"
-                          autoFocus
-                        />
-                        <button
-                          onClick={handleDevLogin}
-                          className="px-3 py-1.5 bg-white text-black rounded-lg text-sm hover:bg-[#f5f5f7] font-medium"
-                        >
-                          OK
-                        </button>
-                        <button
-                          onClick={() => {
-                            setShowDevLogin(false);
-                            setDevUsername('');
-                          }}
-                          className="text-[#86868b] hover:text-[#f5f5f7] text-sm"
-                        >
-                          ✕
-                        </button>
-                      </div>
-                    ) : (
-                    <button
-                      onClick={() => setShowDevLogin(true)}
-                      className="px-3 py-1.5 text-sm text-[#f5f5f7] hover:text-white transition-colors"
-                      title="Dev Mode"
-                    >
-                      Dev
-                    </button>
-                    )}
-                    <span className="text-[#86868b] text-sm">or</span>
-                  </>
-                )}
-                
-                {/* OAuth Login */}
-                <button
-                  onClick={handleLogin}
-                  className="px-3 md:px-4 py-1.5 md:py-2 bg-white text-black rounded-full text-sm hover:bg-[#f5f5f7] transition-all font-medium"
-                >
-                  Sign in
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-    </header>
-  );
-}
-

frontend/src/components/LandingPage.tsx

@@ -1,1200 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import Image from 'next/image';
-import { apiClient } from '@/lib/api';
-import {
-  initializeOAuth,
-  loginWithHuggingFace,
-  loginDevMode,
-  logout,
-  getStoredUserInfo,
-  isAuthenticated as checkIsAuthenticated,
-  isDevelopmentMode
-} from '@/lib/auth';
-import type { Model, Language } from '@/types';
-import type { OAuthUserInfo } from '@/lib/auth';
-
-interface LandingPageProps {
-  onStart: (prompt: string, language: Language, modelId: string, imageUrl?: string, repoId?: string, shouldCreatePR?: boolean) => void;
-  onImport?: (code: string, language: Language, importUrl?: string) => void;
-  isAuthenticated: boolean;
-  initialLanguage?: Language;
-  initialModel?: string;
-  onAuthChange?: () => void;
-  setPendingPR?: (pr: { repoId: string; language: Language } | null) => void;
-  pendingPRRef?: React.MutableRefObject<{ repoId: string; language: Language } | null>;
-}
-
-export default function LandingPage({
-  onStart,
-  onImport,
-  isAuthenticated,
-  initialLanguage = 'html',
-  initialModel = 'moonshotai/Kimi-K2.6',
-  onAuthChange,
-  setPendingPR,
-  pendingPRRef
-}: LandingPageProps) {
-  const [prompt, setPrompt] = useState('');
-  const [selectedLanguage, setSelectedLanguage] = useState<Language>(initialLanguage);
-  const [selectedModel, setSelectedModel] = useState<string>(initialModel);
-  const [models, setModels] = useState<Model[]>([]);
-  const [languages, setLanguages] = useState<Language[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  // Auth states
-  const [userInfo, setUserInfo] = useState<OAuthUserInfo | null>(null);
-  const [isAuthLoading, setIsAuthLoading] = useState(true);
-  const [showDevLogin, setShowDevLogin] = useState(false);
-  const [devUsername, setDevUsername] = useState('');
-  const isDevMode = isDevelopmentMode();
-
-  // Dropdown states
-  const [showLanguageDropdown, setShowLanguageDropdown] = useState(false);
-  const [showModelDropdown, setShowModelDropdown] = useState(false);
-  const [showImportDialog, setShowImportDialog] = useState(false);
-  const [showRedesignDialog, setShowRedesignDialog] = useState(false);
-  const languageDropdownRef = useRef<HTMLDivElement>(null);
-  const modelDropdownRef = useRef<HTMLDivElement>(null);
-  const importDialogRef = useRef<HTMLDivElement>(null);
-  const redesignDialogRef = useRef<HTMLDivElement>(null);
-
-  // Trending apps state
-  const [trendingApps, setTrendingApps] = useState<any[]>([]);
-
-  // Import project state
-  const [importUrl, setImportUrl] = useState('');
-  const [isImporting, setIsImporting] = useState(false);
-  const [importError, setImportError] = useState('');
-  const [importAction, setImportAction] = useState<'duplicate' | 'update' | 'pr'>('duplicate'); // Default to duplicate
-  const [isSpaceOwner, setIsSpaceOwner] = useState(false); // Track if user owns the space
-
-  // Redesign project state
-  const [redesignUrl, setRedesignUrl] = useState('');
-  const [isRedesigning, setIsRedesigning] = useState(false);
-  const [redesignError, setRedesignError] = useState('');
-  const [createPR, setCreatePR] = useState(false); // Default to normal redesign (not PR)
-
-  // Image upload state
-  const [uploadedImageUrl, setUploadedImageUrl] = useState<string | null>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  // Debug effect for dropdown state
-  useEffect(() => {
-    console.log('showModelDropdown state changed to:', showModelDropdown);
-  }, [showModelDropdown]);
-
-  // Debug effect for models state
-  useEffect(() => {
-    console.log('models state changed, length:', models.length, 'models:', models);
-  }, [models]);
-
-  useEffect(() => {
-    console.log('Component mounted, initial load starting...');
-    loadData();
-    handleOAuthInit();
-    loadTrendingApps();
-    // Check auth status periodically to catch OAuth redirects
-    const interval = setInterval(() => {
-      const authenticated = checkIsAuthenticated();
-      if (authenticated && !userInfo) {
-        handleOAuthInit();
-      }
-    }, 1000);
-    return () => clearInterval(interval);
-  }, []);
-
-  const handleOAuthInit = async () => {
-    setIsAuthLoading(true);
-    try {
-      const oauthResult = await initializeOAuth();
-
-      if (oauthResult) {
-        setUserInfo(oauthResult.userInfo);
-        apiClient.setToken(oauthResult.accessToken);
-        if (onAuthChange) onAuthChange();
-      } else {
-        const storedUserInfo = getStoredUserInfo();
-        if (storedUserInfo) {
-          setUserInfo(storedUserInfo);
-        }
-      }
-    } catch (error) {
-      console.error('OAuth initialization error:', error);
-    } finally {
-      setIsAuthLoading(false);
-    }
-  };
-
-  const handleLogin = async () => {
-    try {
-      await loginWithHuggingFace();
-    } catch (error) {
-      console.error('Login failed:', error);
-      alert('Failed to start login process. Please try again.');
-    }
-  };
-
-  const handleLogout = () => {
-    logout();
-    apiClient.logout();
-    setUserInfo(null);
-    if (onAuthChange) onAuthChange();
-    window.location.reload();
-  };
-
-  const handleDevLogin = () => {
-    if (!devUsername.trim()) {
-      alert('Please enter a username');
-      return;
-    }
-
-    try {
-      const result = loginDevMode(devUsername);
-      setUserInfo(result.userInfo);
-      apiClient.setToken(result.accessToken);
-      setShowDevLogin(false);
-      setDevUsername('');
-      if (onAuthChange) onAuthChange();
-    } catch (error) {
-      console.error('Dev login failed:', error);
-      alert('Failed to login in dev mode');
-    }
-  };
-
-  // Close dropdowns when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (languageDropdownRef.current && !languageDropdownRef.current.contains(event.target as Node)) {
-        setShowLanguageDropdown(false);
-      }
-      if (modelDropdownRef.current && !modelDropdownRef.current.contains(event.target as Node)) {
-        setShowModelDropdown(false);
-      }
-      if (importDialogRef.current && !importDialogRef.current.contains(event.target as Node)) {
-        setShowImportDialog(false);
-      }
-      if (redesignDialogRef.current && !redesignDialogRef.current.contains(event.target as Node)) {
-        setShowRedesignDialog(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  const loadData = async () => {
-    console.log('loadData called');
-    setIsLoading(true);
-    await Promise.all([loadModels(), loadLanguages()]);
-    setIsLoading(false);
-    console.log('loadData completed');
-  };
-
-  const loadModels = async () => {
-    try {
-      console.log('Loading models...');
-      const modelsList = await apiClient.getModels();
-      console.log('Models loaded successfully:', modelsList);
-      console.log('Number of models:', modelsList.length);
-      setModels(modelsList);
-      console.log('Models state updated');
-    } catch (error) {
-      console.error('Failed to load models:', error);
-      setModels([]); // Set empty array on error
-    }
-  };
-
-  const loadLanguages = async () => {
-    try {
-      const { languages: languagesList } = await apiClient.getLanguages();
-      setLanguages(languagesList);
-    } catch (error) {
-      console.error('Failed to load languages:', error);
-    }
-  };
-
-  // Check if current model supports images
-  // Show immediately for GLM-4.6V even before models load
-  const currentModelSupportsImages =
-    selectedModel === 'zai-org/GLM-4.6V:zai-org' ||
-    models.find(m => m.id === selectedModel)?.supports_images ||
-    false;
-
-  // Debug logging
-  useEffect(() => {
-    console.log('[LandingPage] Selected model:', selectedModel);
-    console.log('[LandingPage] Models loaded:', models.length);
-    console.log('[LandingPage] Supports images:', currentModelSupportsImages);
-  }, [selectedModel, models, currentModelSupportsImages]);
-
-  const loadTrendingApps = async () => {
-    try {
-      const apps = await apiClient.getTrendingAnycoderApps();
-      setTrendingApps(apps);
-    } catch (error) {
-      console.error('Failed to load trending apps:', error);
-    }
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (prompt.trim() && isAuthenticated) {
-      console.log('[LandingPage Submit] Sending with image:', uploadedImageUrl ? 'Yes' : 'No');
-      console.log('[LandingPage Submit] Image URL length:', uploadedImageUrl?.length || 0);
-      onStart(prompt.trim(), selectedLanguage, selectedModel, uploadedImageUrl || undefined);
-      // Clear prompt and image after sending
-      setPrompt('');
-      setUploadedImageUrl(null);
-    } else if (!isAuthenticated) {
-      alert('Please sign in with HuggingFace first!');
-    }
-  };
-
-  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        const imageUrl = event.target?.result as string;
-        setUploadedImageUrl(imageUrl);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const removeImage = () => {
-    setUploadedImageUrl(null);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  };
-
-  const formatLanguageName = (lang: Language) => {
-    if (lang === 'html') return 'HTML';
-    if (lang === 'transformers.js') return 'Transformers.js';
-    if (lang === 'comfyui') return 'ComfyUI';
-    if (lang === 'daggr') return 'Daggr';
-    return lang.charAt(0).toUpperCase() + lang.slice(1);
-  };
-
-  const formatModelName = (name: string, id: string) => {
-    if (id === 'moonshotai/Kimi-K2.6') return 'Kimi-K2.6 ✨';
-    if (id === 'google/gemma-4-31B-it') return 'Gemma-4-31B 🤖';
-    if (id === 'zai-org/GLM-5.1') return 'GLM-5.1 🚀';
-    if (id === 'Qwen/Qwen3.5-397B-A17B') return 'Qwen3.5-397B-A17B 🤖';
-    return name;
-  };
-
-  // Check if user owns the imported space
-  const checkSpaceOwnership = (url: string) => {
-    if (!url || !userInfo?.preferred_username) {
-      setIsSpaceOwner(false);
-      return;
-    }
-
-    const spaceMatch = url.match(/huggingface\.co\/spaces\/([^\/\s\)]+)\/[^\/\s\)]+/);
-    if (spaceMatch) {
-      const spaceOwner = spaceMatch[1];
-      const isOwner = spaceOwner === userInfo.preferred_username;
-      setIsSpaceOwner(isOwner);
-      console.log('[Import] Space owner:', spaceOwner, '| Current user:', userInfo.preferred_username, '| Is owner:', isOwner);
-
-      // Auto-select update mode if owner, otherwise duplicate
-      if (isOwner) {
-        setImportAction('update');
-      } else {
-        setImportAction('duplicate');
-      }
-    } else {
-      setIsSpaceOwner(false);
-    }
-  };
-
-  const handleImportProject = async () => {
-    if (!importUrl.trim()) {
-      setImportError('Please enter a valid URL');
-      return;
-    }
-
-    if (!isAuthenticated) {
-      alert('Please sign in with HuggingFace first!');
-      return;
-    }
-
-    setIsImporting(true);
-    setImportError('');
-
-    try {
-      console.log('[Import] ========== STARTING IMPORT ==========');
-      console.log('[Import] Import URL:', importUrl);
-      console.log('[Import] Action:', importAction);
-
-      // Extract space ID from URL
-      const spaceMatch = importUrl.match(/huggingface\.co\/spaces\/([^\/\s\)]+\/[^\/\s\)]+)/);
-      console.log('[Import] Space regex match result:', spaceMatch);
-
-      if (spaceMatch) {
-        const fromSpaceId = spaceMatch[1];
-        console.log('[Import] ✅ Detected HF Space:', fromSpaceId);
-
-        // Import the code first (always needed to load in editor)
-        const importResult = await apiClient.importProject(importUrl);
-
-        if (importResult.status !== 'success') {
-          setImportError(importResult.message || 'Failed to import project');
-          setIsImporting(false);
-          return;
-        }
-
-        // Handle different import actions
-        if (importAction === 'update' && isSpaceOwner) {
-          // Option 1: Update existing space directly (for owners)
-          console.log('[Import] Owner update - loading code for direct update to:', fromSpaceId);
-
-          if (onImport && importResult.code) {
-            // Pass the original space URL so future deployments update it
-            onImport(importResult.code, importResult.language || 'html', importUrl);
-
-            alert(`✅ Code loaded!\n\nYou can now make changes and deploy them directly to: ${importUrl}\n\nThe code has been loaded in the editor.`);
-          }
-
-          setShowImportDialog(false);
-          setImportUrl('');
-
-        } else if (importAction === 'pr') {
-          // Option 2: Create Pull Request
-          console.log('[Import] PR mode - loading code to create PR to:', fromSpaceId);
-
-          if (onImport && importResult.code) {
-            // Load code in editor with the original space for PR tracking
-            onImport(importResult.code, importResult.language || 'html', importUrl);
-
-            // Set pending PR state so any future code generation creates a PR
-            if (setPendingPR && pendingPRRef) {
-              const prInfo = { repoId: fromSpaceId, language: (importResult.language || 'html') as Language };
-              setPendingPR(prInfo);
-              pendingPRRef.current = prInfo;
-              console.log('[Import PR] Set pending PR:', prInfo);
-            }
-
-            // Show success message
-            alert(`✅ Code loaded in PR mode!\n\nYou can now:\n• Make manual edits in the editor\n• Generate new features with AI\n\nWhen you deploy, a Pull Request will be created to: ${fromSpaceId}`);
-          }
-
-          setShowImportDialog(false);
-          setImportUrl('');
-
-        } else {
-          // Option 3: Duplicate space (default)
-          console.log('[Import] Duplicate mode - will duplicate:', fromSpaceId);
-
-          const duplicateResult = await apiClient.duplicateSpace(fromSpaceId);
-          console.log('[Import] Duplicate API response:', duplicateResult);
-
-          if (duplicateResult.success) {
-            console.log('[Import] ========== DUPLICATE SUCCESS ==========');
-            console.log('[Import] Duplicated space URL:', duplicateResult.space_url);
-            console.log('[Import] Duplicated space ID:', duplicateResult.space_id);
-            console.log('[Import] ==========================================');
-
-            if (onImport && importResult.code) {
-              console.log('[Import] Calling onImport with duplicated space URL:', duplicateResult.space_url);
-              // Pass the duplicated space URL so it's tracked for future deployments
-              onImport(importResult.code, importResult.language || 'html', duplicateResult.space_url);
-
-              // Show success message with link to duplicated space
-              alert(`✅ Space duplicated successfully!\n\nYour space: ${duplicateResult.space_url}\n\nThe code has been loaded in the editor. Any changes you deploy will update this duplicated space.`);
-            }
-
-            setShowImportDialog(false);
-            setImportUrl('');
-          } else {
-            setImportError(duplicateResult.message || 'Failed to duplicate space');
-          }
-        }
-      } else {
-        // Not a Space URL - fall back to regular import
-        console.log('[Import] ❌ Not a HF Space URL - using regular import');
-        const result = await apiClient.importProject(importUrl);
-
-        if (result.status === 'success') {
-          if (onImport && result.code) {
-            onImport(result.code, result.language || 'html', importUrl);
-          } else {
-            const importMessage = `Imported from ${importUrl}`;
-            onStart(importMessage, result.language || 'html', selectedModel, undefined);
-          }
-
-          setShowImportDialog(false);
-          setImportUrl('');
-        } else {
-          setImportError(result.message || 'Failed to import project');
-        }
-      }
-    } catch (error: any) {
-      console.error('Import error:', error);
-      setImportError(error.response?.data?.message || error.message || 'Failed to import project');
-    } finally {
-      setIsImporting(false);
-    }
-  };
-
-  const handleRedesignProject = async () => {
-    if (!redesignUrl.trim()) {
-      setRedesignError('Please enter a valid URL');
-      return;
-    }
-
-    if (!isAuthenticated) {
-      alert('Please sign in with HuggingFace first!');
-      return;
-    }
-
-    setIsRedesigning(true);
-    setRedesignError('');
-
-    try {
-      // Extract space ID from URL
-      const spaceMatch = redesignUrl.match(/huggingface\.co\/spaces\/([^\/\s\)]+\/[^\/\s\)]+)/);
-      const repoId = spaceMatch ? spaceMatch[1] : null;
-
-      if (!repoId) {
-        setRedesignError('Please enter a valid HuggingFace Space URL');
-        setIsRedesigning(false);
-        return;
-      }
-
-      // Import the code first
-      const result = await apiClient.importProject(redesignUrl);
-
-      if (result.status !== 'success') {
-        setRedesignError(result.message || 'Failed to import project for redesign');
-        setIsRedesigning(false);
-        return;
-      }
-
-      if (!createPR) {
-        // Option 1: Redesign WITHOUT PR - Duplicate space first, then generate redesign
-        console.log('[Redesign] Duplicating space first:', repoId);
-
-        try {
-          const duplicateResult = await apiClient.duplicateSpace(repoId);
-          console.log('[Redesign] Duplicate result:', duplicateResult);
-
-          if (!duplicateResult.success) {
-            setRedesignError(duplicateResult.message || 'Failed to duplicate space');
-            setIsRedesigning(false);
-            return;
-          }
-
-          // Load code and trigger redesign
-          if (onImport && onStart) {
-            // Pass duplicated space URL
-            onImport(result.code, result.language || 'html', duplicateResult.space_url);
-
-            // Extract duplicated space ID to pass to generation
-            const dupSpaceMatch = duplicateResult.space_url?.match(/huggingface\.co\/spaces\/([^\/\s\)]+\/[^\/\s\)]+)/);
-            const duplicatedRepoId = dupSpaceMatch ? dupSpaceMatch[1] : undefined;
-
-            console.log('[Redesign] Duplicated space ID:', duplicatedRepoId);
-
-            setTimeout(() => {
-              const isGradio = (result.language || 'html') === 'gradio';
-              const redesignPrompt = `I have existing code in the editor from a duplicated space. Please redesign it to make it look better with minimal components needed, mobile friendly, and modern design.
-
-Current code:
-\`\`\`${result.language || 'html'}
-${result.code}
-\`\`\`
-
-Please redesign this with:
-- Minimal, clean components
-- Mobile-first responsive design
-- Modern UI/UX best practices
-- Better visual hierarchy and spacing
-
-${isGradio ? '\n\nIMPORTANT: Only output app.py with the redesigned UI (themes, layout, styling). Do NOT modify or output any other .py files (utils.py, models.py, etc.). Do NOT include requirements.txt or README.md.' : ''}`;
-
-              if (onStart) {
-                // Pass duplicated space ID so auto-deploy updates it
-                console.log('[Redesign] Calling onStart with duplicated repo ID:', duplicatedRepoId);
-                console.log('[Redesign] Using moonshotai/Kimi-K2.6 for redesign');
-                onStart(redesignPrompt, result.language || 'html', 'moonshotai/Kimi-K2.6', undefined, duplicatedRepoId);
-              }
-            }, 100);
-
-            // Show success message
-            alert(`✅ Space duplicated!\n\nYour space: ${duplicateResult.space_url}\n\nGenerating redesign now...`);
-          }
-
-          setShowRedesignDialog(false);
-          setRedesignUrl('');
-
-        } catch (dupError: any) {
-          console.error('[Redesign] Duplication error:', dupError);
-          setRedesignError(dupError.response?.data?.message || dupError.message || 'Failed to duplicate space');
-          setIsRedesigning(false);
-          return;
-        }
-
-      } else {
-        // Option 2: Redesign WITH PR - Import code and generate, then create PR
-        if (onImport && onStart) {
-          onImport(result.code, result.language || 'html', redesignUrl);
-
-          setTimeout(() => {
-            const isGradio = (result.language || 'html') === 'gradio';
-            const redesignPrompt = `I have existing code in the editor that I imported from ${redesignUrl}. Please redesign it to make it look better with minimal components needed, mobile friendly, and modern design.
-
-Current code:
-\`\`\`${result.language || 'html'}
-${result.code}
-\`\`\`
-
-Please redesign this with:
-- Minimal, clean components
-- Mobile-first responsive design
-- Modern UI/UX best practices
-- Better visual hierarchy and spacing
-
-${isGradio ? '\n\nIMPORTANT: Only output app.py with the redesigned UI (themes, layout, styling). Do NOT modify or output any other .py files (utils.py, models.py, etc.). Do NOT include requirements.txt or README.md.' : ''}
-
-Note: After generating the redesign, I will create a Pull Request on the original space.`;
-
-            if (onStart) {
-              console.log('[Redesign] Will create PR - not passing repo ID');
-              console.log('[Redesign] Using moonshotai/Kimi-K2.6 for redesign');
-              onStart(redesignPrompt, result.language || 'html', 'moonshotai/Kimi-K2.6', undefined, repoId, true); // Pass true for shouldCreatePR
-            }
-
-            console.log('[Redesign] Will create PR after code generation completes');
-          }, 100);
-
-          setShowRedesignDialog(false);
-          setRedesignUrl('');
-        } else {
-          setRedesignError('Missing required callbacks. Please try again.');
-        }
-      }
-    } catch (error: any) {
-      console.error('Redesign error:', error);
-      setRedesignError(error.response?.data?.message || error.message || 'Failed to process redesign request');
-    } finally {
-      setIsRedesigning(false);
-    }
-  };
-
-  return (
-    <div className="h-screen flex flex-col bg-[#000000] overflow-hidden">
-      {/* Header - Apple style */}
-      <header className="flex items-center justify-between px-6 py-3 backdrop-blur-xl bg-[#000000]/80 border-b border-[#424245]/30 flex-shrink-0">
-        <a
-          href="https://huggingface.co/spaces/akhaliq/anycoder"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-sm font-medium text-[#f5f5f7] hover:text-white transition-colors"
-        >
-          AnyCoder
-        </a>
-
-        {/* Auth Section */}
-        <div className="flex items-center space-x-3">
-          {isAuthLoading ? (
-            <span className="text-xs text-[#86868b]">Loading...</span>
-          ) : userInfo ? (
-            <div className="flex items-center space-x-3">
-              {userInfo.avatarUrl && (
-                <img
-                  src={userInfo.avatarUrl}
-                  alt={userInfo.name}
-                  className="w-7 h-7 rounded-full"
-                />
-              )}
-              <span className="hidden sm:inline text-sm text-[#f5f5f7] truncate max-w-[120px] font-medium">
-                {userInfo.preferredUsername || userInfo.name}
-              </span>
-              <button
-                onClick={handleLogout}
-                className="px-3 py-1.5 text-sm text-[#f5f5f7] hover:text-white transition-colors"
-              >
-                Logout
-              </button>
-            </div>
-          ) : (
-            <div className="flex items-center space-x-3">
-              {/* Dev Mode Login (only on localhost) */}
-              {isDevMode && (
-                <>
-                  {showDevLogin ? (
-                    <div className="flex items-center space-x-2">
-                      <input
-                        type="text"
-                        value={devUsername}
-                        onChange={(e) => setDevUsername(e.target.value)}
-                        onKeyPress={(e) => e.key === 'Enter' && handleDevLogin()}
-                        placeholder="username"
-                        className="px-3 py-1.5 rounded-lg text-sm bg-[#1d1d1f] text-[#f5f5f7] border border-[#424245] focus:outline-none focus:border-white/50 w-32 font-medium"
-                        autoFocus
-                      />
-                      <button
-                        onClick={handleDevLogin}
-                        className="px-3 py-1.5 bg-white text-black rounded-lg text-sm hover:bg-[#f5f5f7] font-medium"
-                      >
-                        OK
-                      </button>
-                      <button
-                        onClick={() => {
-                          setShowDevLogin(false);
-                          setDevUsername('');
-                        }}
-                        className="text-[#86868b] hover:text-[#f5f5f7] text-sm"
-                      >
-                        ✕
-                      </button>
-                    </div>
-                  ) : (
-                    <button
-                      onClick={() => setShowDevLogin(true)}
-                      className="px-3 py-1.5 text-sm text-[#f5f5f7] hover:text-white transition-colors"
-                      title="Dev Mode"
-                    >
-                      Dev
-                    </button>
-                  )}
-                  <span className="text-[#86868b] text-sm">or</span>
-                </>
-              )}
-
-              {/* OAuth Login */}
-              <button
-                onClick={handleLogin}
-                className="px-4 py-2 bg-white text-black rounded-full text-sm hover:bg-[#f5f5f7] transition-all font-medium"
-              >
-                Sign in
-              </button>
-            </div>
-          )}
-        </div>
-      </header>
-
-      {/* Main Content - Apple-style centered layout */}
-      <main className="flex-1 overflow-y-auto px-4 py-6">
-        <div className="w-full max-w-3xl mx-auto flex flex-col items-center justify-center min-h-full">
-          {/* Apple-style Headline */}
-          <div className="text-center mb-8">
-            <h2 className="text-4xl md:text-5xl font-semibold text-white mb-2 tracking-tight leading-tight">
-              Build with AnyCoder
-            </h2>
-            <p className="text-base md:text-lg text-[#86868b] font-normal">
-              Create apps with AI
-            </p>
-          </div>
-
-          {/* Simple prompt form */}
-          <form onSubmit={handleSubmit} className="relative w-full mb-8">
-            <div className="relative bg-[#2d2d30] rounded-2xl border border-[#424245] shadow-2xl">
-              {/* Image Preview */}
-              {uploadedImageUrl && (
-                <div className="px-4 pt-3">
-                  <div className="relative inline-block">
-                    <Image
-                      src={uploadedImageUrl}
-                      alt="Upload preview"
-                      width={120}
-                      height={120}
-                      className="rounded-lg object-cover"
-                      unoptimized
-                    />
-                    <button
-                      type="button"
-                      onClick={removeImage}
-                      className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full hover:bg-red-600 transition-all flex items-center justify-center text-xs font-bold"
-                    >
-                      ×
-                    </button>
-                  </div>
-                </div>
-              )}
-
-              {/* Textarea */}
-              <textarea
-                value={prompt}
-                onChange={(e) => setPrompt(e.target.value)}
-                placeholder="Message AnyCoder"
-                className="w-full px-4 py-3 text-sm text-[#f5f5f7] bg-transparent placeholder:text-[#86868b] resize-none focus:outline-none min-h-[48px] font-normal"
-                rows={1}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
-                    handleSubmit(e);
-                  }
-                }}
-              />
-
-              {/* Bottom controls - Apple style */}
-              <div className="flex items-center justify-between px-3 pb-3 gap-2">
-                {/* Compact dropdowns on the left */}
-                <div className="flex items-center gap-2">
-                  {/* Language Dropdown */}
-                  <div className="relative" ref={languageDropdownRef}>
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        console.log('Language button clicked, toggling dropdown');
-                        setShowLanguageDropdown(!showLanguageDropdown);
-                        setShowModelDropdown(false);
-                      }}
-                      disabled={isLoading}
-                      className="px-3 py-1.5 bg-[#1d1d1f] text-[#f5f5f7] text-xs border border-[#424245] rounded-full hover:bg-[#2d2d2f] transition-all disabled:opacity-50 flex items-center gap-1.5 font-medium"
-                    >
-                      <span>{isLoading ? '...' : formatLanguageName(selectedLanguage)}</span>
-                      <svg
-                        className={`w-3 h-3 text-[#86868b] transition-transform ${showLanguageDropdown ? 'rotate-180' : ''}`}
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        strokeWidth={2.5}
-                      >
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-                      </svg>
-                    </button>
-
-                    {/* Language Dropdown Menu */}
-                    {showLanguageDropdown && !isLoading && languages.length > 0 && (
-                      <div
-                        className="absolute bottom-full left-0 mb-2 w-48 bg-[#1d1d1f] border border-[#424245] rounded-xl shadow-2xl overflow-hidden backdrop-blur-xl"
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <div className="max-h-64 overflow-y-auto py-1">
-                          {languages.map((lang) => (
-                            <button
-                              key={lang}
-                              type="button"
-                              onClick={() => {
-                                setSelectedLanguage(lang);
-                                setShowLanguageDropdown(false);
-                              }}
-                              className={`w-full px-4 py-2.5 text-left text-xs text-[#f5f5f7] hover:bg-[#2d2d2f] transition-colors font-medium ${selectedLanguage === lang ? 'bg-[#2d2d2f]' : ''
-                                }`}
-                            >
-                              {formatLanguageName(lang)}
-                            </button>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Model Dropdown */}
-                  <div className="relative" ref={modelDropdownRef}>
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        console.log('Model button clicked! Models length:', models.length, 'Show:', showModelDropdown);
-                        setShowModelDropdown(!showModelDropdown);
-                        setShowLanguageDropdown(false);
-                        setShowImportDialog(false);
-                      }}
-                      className="px-3 py-1.5 bg-[#1d1d1f] text-[#f5f5f7] text-xs border border-[#424245] rounded-full hover:bg-[#2d2d2f] transition-all flex items-center gap-1.5 max-w-[200px] font-medium"
-                    >
-                      <span className="truncate">
-                        {isLoading
-                          ? '...'
-                          : formatModelName(models.find(m => m.id === selectedModel)?.name || '', selectedModel) || selectedModel || 'Model'
-                        }
-                      </span>
-                      <svg
-                        className={`w-3 h-3 text-[#86868b] flex-shrink-0 transition-transform ${showModelDropdown ? 'rotate-180' : ''}`}
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        strokeWidth={2.5}
-                      >
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-                      </svg>
-                    </button>
-
-                    {/* Model Dropdown Menu */}
-                    {showModelDropdown && models.length > 0 && (
-                      <div
-                        className="absolute top-full left-0 mt-2 w-56 bg-[#1d1d1f] border border-[#424245] rounded-xl shadow-2xl overflow-hidden backdrop-blur-xl z-50"
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <div className="max-h-96 overflow-y-auto py-1">
-                          {models.map((model) => (
-                            <button
-                              key={model.id}
-                              type="button"
-                              onClick={() => {
-                                setSelectedModel(model.id);
-                                setShowModelDropdown(false);
-                              }}
-                              className={`w-full px-4 py-2 text-left transition-colors ${selectedModel === model.id
-                                ? 'bg-[#2d2d2f]'
-                                : 'hover:bg-[#2d2d2f]'
-                                }`}
-                            >
-                              <div className="flex items-center justify-between gap-2">
-                                <span className="text-xs font-medium text-[#f5f5f7]">{formatModelName(model.name, model.id)}</span>
-                                {['moonshotai/Kimi-K2.6', 'google/gemma-4-31B-it', 'zai-org/GLM-5.1', 'Qwen/Qwen3.5-397B-A17B', 'MiniMaxAI/MiniMax-M2.5'].includes(model.id) && (
-                                  <span className="px-1.5 py-0.5 bg-gradient-to-r from-purple-500 to-pink-500 text-white text-[9px] font-bold rounded uppercase">
-                                    NEW
-                                  </span>
-                                )}
-                              </div>
-                            </button>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Import Project Button */}
-                  <div className="relative" ref={importDialogRef}>
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setShowImportDialog(!showImportDialog);
-                        setShowLanguageDropdown(false);
-                        setShowModelDropdown(false);
-                        setShowRedesignDialog(false);
-                        setImportError('');
-                      }}
-                      className="px-3 py-1.5 bg-[#1d1d1f] text-[#f5f5f7] text-xs border border-[#424245] rounded-full hover:bg-[#2d2d2f] transition-all flex items-center gap-1.5 font-medium"
-                    >
-                      <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-                      </svg>
-                      <span>Import</span>
-                    </button>
-
-                    {/* Import Dialog */}
-                    {showImportDialog && (
-                      <div
-                        className="absolute top-full left-0 mt-2 w-80 bg-[#1d1d1f] border border-[#424245] rounded-xl shadow-2xl overflow-hidden backdrop-blur-xl z-50"
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <div className="p-4">
-                          <h3 className="text-sm font-medium text-[#f5f5f7] mb-3">Import Project</h3>
-                          <input
-                            type="text"
-                            value={importUrl}
-                            onChange={(e) => {
-                              setImportUrl(e.target.value);
-                              checkSpaceOwnership(e.target.value);
-                            }}
-                            onKeyPress={(e) => e.key === 'Enter' && handleImportProject()}
-                            placeholder="https://huggingface.co/spaces/..."
-                            className="w-full px-3 py-2 rounded-lg text-xs bg-[#2d2d30] text-[#f5f5f7] border border-[#424245] focus:outline-none focus:border-white/50 font-normal mb-3"
-                            disabled={isImporting}
-                          />
-
-                          {/* Import Action Options */}
-                          {importUrl.includes('huggingface.co/spaces/') && (
-                            <div className="mb-3 space-y-2">
-                              <p className="text-[10px] font-medium text-[#86868b] mb-2">Import Mode:</p>
-
-                              {/* Update Space (only for owners) */}
-                              {isSpaceOwner && (
-                                <label className="flex items-start gap-2 cursor-pointer group">
-                                  <input
-                                    type="radio"
-                                    checked={importAction === 'update'}
-                                    onChange={() => setImportAction('update')}
-                                    className="mt-0.5 w-3.5 h-3.5 rounded-full border-[#424245] bg-[#2d2d30] checked:bg-white checked:border-white"
-                                    disabled={isImporting}
-                                  />
-                                  <div>
-                                    <span className="text-[11px] text-[#f5f5f7] font-medium">Update your space directly</span>
-                                    <p className="text-[10px] text-[#86868b] mt-0.5">
-                                      ✅ You own this space - changes will update it
-                                    </p>
-                                  </div>
-                                </label>
-                              )}
-
-                              {/* Duplicate Space */}
-                              <label className="flex items-start gap-2 cursor-pointer group">
-                                <input
-                                  type="radio"
-                                  checked={importAction === 'duplicate'}
-                                  onChange={() => setImportAction('duplicate')}
-                                  className="mt-0.5 w-3.5 h-3.5 rounded-full border-[#424245] bg-[#2d2d30] checked:bg-white checked:border-white"
-                                  disabled={isImporting}
-                                />
-                                <div>
-                                  <span className="text-[11px] text-[#f5f5f7] font-medium">Duplicate to your account</span>
-                                  <p className="text-[10px] text-[#86868b] mt-0.5">
-                                    Create a copy you can freely modify
-                                  </p>
-                                </div>
-                              </label>
-
-                              {/* Create PR */}
-                              <label className="flex items-start gap-2 cursor-pointer group">
-                                <input
-                                  type="radio"
-                                  checked={importAction === 'pr'}
-                                  onChange={() => setImportAction('pr')}
-                                  className="mt-0.5 w-3.5 h-3.5 rounded-full border-[#424245] bg-[#2d2d30] checked:bg-white checked:border-white"
-                                  disabled={isImporting}
-                                />
-                                <div>
-                                  <span className="text-[11px] text-[#f5f5f7] font-medium">Create Pull Request</span>
-                                  <p className="text-[10px] text-[#86868b] mt-0.5">
-                                    Propose changes to the original space
-                                  </p>
-                                </div>
-                              </label>
-
-                              {importAction === 'pr' && (
-                                <p className="text-[10px] text-[#86868b] ml-6 mt-1">
-                                  ⚠️ Requires space owner to enable PRs
-                                </p>
-                              )}
-                            </div>
-                          )}
-
-                          {importError && (
-                            <p className="text-xs text-red-400 mb-2">{importError}</p>
-                          )}
-
-                          <div className="flex gap-2">
-                            <button
-                              onClick={handleImportProject}
-                              disabled={isImporting || !importUrl.trim()}
-                              className="flex-1 px-3 py-2 bg-white text-black rounded-lg text-xs hover:bg-[#f5f5f7] disabled:opacity-50 disabled:cursor-not-allowed font-medium"
-                            >
-                              {isImporting ? 'Importing...' : 'Import'}
-                            </button>
-                            <button
-                              onClick={() => {
-                                setShowImportDialog(false);
-                                setImportUrl('');
-                                setImportError('');
-                                setIsSpaceOwner(false);
-                                setImportAction('duplicate');
-                              }}
-                              className="px-3 py-2 bg-[#2d2d30] text-[#f5f5f7] rounded-lg text-xs hover:bg-[#3d3d3f] font-medium"
-                            >
-                              Cancel
-                            </button>
-                          </div>
-                          <p className="text-[10px] text-[#86868b] mt-3">
-                            Import from HuggingFace Spaces, Models, or GitHub
-                          </p>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Redesign Project Button */}
-                  <div className="relative" ref={redesignDialogRef}>
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setShowRedesignDialog(!showRedesignDialog);
-                        setShowLanguageDropdown(false);
-                        setShowModelDropdown(false);
-                        setShowImportDialog(false);
-                        setRedesignError('');
-                      }}
-                      className="relative px-3 py-1.5 bg-[#1d1d1f] text-[#f5f5f7] text-xs border border-[#424245] rounded-full hover:bg-[#2d2d2f] transition-all flex items-center gap-1.5 font-medium overflow-visible"
-                    >
-                      <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                      </svg>
-                      <span>Redesign</span>
-                    </button>
-
-                    {/* Redesign Dialog */}
-                    {showRedesignDialog && (
-                      <div
-                        className="absolute top-full left-0 mt-2 w-80 bg-[#1d1d1f] border border-[#424245] rounded-xl shadow-2xl overflow-hidden backdrop-blur-xl z-50"
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <div className="p-4">
-                          <h3 className="text-sm font-medium text-[#f5f5f7] mb-3">Redesign Project</h3>
-                          <input
-                            type="text"
-                            value={redesignUrl}
-                            onChange={(e) => setRedesignUrl(e.target.value)}
-                            onKeyPress={(e) => e.key === 'Enter' && handleRedesignProject()}
-                            placeholder="https://huggingface.co/spaces/..."
-                            className="w-full px-3 py-2 rounded-lg text-xs bg-[#2d2d30] text-[#f5f5f7] border border-[#424245] focus:outline-none focus:border-white/50 font-normal mb-3"
-                            disabled={isRedesigning}
-                          />
-
-                          {/* PR Option */}
-                          <label className="flex items-center gap-2 mb-1 cursor-pointer">
-                            <input
-                              type="checkbox"
-                              checked={createPR}
-                              onChange={(e) => setCreatePR(e.target.checked)}
-                              disabled={isRedesigning}
-                              className="w-4 h-4 rounded bg-[#2d2d30] border-[#424245] text-white focus:ring-white focus:ring-offset-0"
-                            />
-                            <span className="text-xs text-[#f5f5f7]">
-                              Create Pull Request on original space
-                            </span>
-                          </label>
-
-                          {createPR && (
-                            <p className="text-[10px] text-[#86868b] mb-2 ml-6">
-                              ⚠️ Note: PR creation requires space owner to enable PRs. If disabled, uncheck this to duplicate the space instead.
-                            </p>
-                          )}
-
-                          {redesignError && (
-                            <p className="text-xs text-red-400 mb-2">{redesignError}</p>
-                          )}
-                          <div className="flex gap-2">
-                            <button
-                              onClick={handleRedesignProject}
-                              disabled={isRedesigning || !redesignUrl.trim()}
-                              className="flex-1 px-3 py-2 bg-white text-black rounded-lg text-xs hover:bg-[#f5f5f7] disabled:opacity-50 disabled:cursor-not-allowed font-medium"
-                            >
-                              {isRedesigning ? 'Redesigning...' : 'Redesign'}
-                            </button>
-                            <button
-                              onClick={() => {
-                                setShowRedesignDialog(false);
-                                setRedesignUrl('');
-                                setRedesignError('');
-                              }}
-                              className="px-3 py-2 bg-[#2d2d30] text-[#f5f5f7] rounded-lg text-xs hover:bg-[#3d3d3f] font-medium"
-                            >
-                              Cancel
-                            </button>
-                          </div>
-                          <p className="text-[10px] text-[#86868b] mt-3">
-                            {createPR
-                              ? 'Creates a Pull Request on the original space with your redesign'
-                              : 'Import and automatically redesign with modern, mobile-friendly design'}
-                          </p>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-
-                {/* Right side - Image upload + Send button group */}
-                <div className="flex items-center gap-2">
-                  {/* Image Upload Button (only if model supports images) */}
-                  {currentModelSupportsImages && (
-                    <>
-                      <input
-                        ref={fileInputRef}
-                        type="file"
-                        accept="image/*"
-                        onChange={handleImageUpload}
-                        className="hidden"
-                        disabled={!isAuthenticated}
-                      />
-                      <button
-                        type="button"
-                        onClick={() => fileInputRef.current?.click()}
-                        disabled={!isAuthenticated}
-                        className="p-2 bg-[#1d1d1f] text-[#f5f5f7] rounded-full hover:bg-[#424245] disabled:opacity-30 disabled:cursor-not-allowed transition-all active:scale-95"
-                        title="Upload image"
-                      >
-                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
-                          <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
-                        </svg>
-                      </button>
-                    </>
-                  )}
-
-                  {/* Send button - Apple style */}
-                  <button
-                    type="submit"
-                    disabled={!prompt.trim() || !isAuthenticated}
-                    className="p-2 bg-white text-[#1d1d1f] rounded-full hover:bg-[#f5f5f7] disabled:opacity-30 disabled:cursor-not-allowed transition-all active:scale-95 shadow-lg"
-                    title="Send"
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14M12 5l7 7-7 7" />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            </div>
-
-            {!isAuthenticated && (
-              <div className="mt-4 text-center">
-                <p className="text-xs text-[#86868b]">
-                  Sign in to get started
-                </p>
-              </div>
-            )}
-          </form>
-
-          {/* Trending Apps Section */}
-          {trendingApps.length > 0 && (
-            <div className="mt-8 w-full">
-              <h3 className="text-xl font-semibold text-white mb-4 text-center">
-                Top Trending Apps Built with AnyCoder
-              </h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-                {trendingApps.map((app) => (
-                  <a
-                    key={app.id}
-                    href={`https://huggingface.co/spaces/${app.id}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="group bg-[#1d1d1f] border border-[#424245] rounded-xl p-4 hover:border-white/30 transition-all hover:shadow-xl hover:scale-[1.02]">
-                    <div className="flex items-start justify-between mb-2">
-                      <div className="flex-1 min-w-0">
-                        <h4 className="text-xs font-medium text-[#f5f5f7] truncate group-hover:text-white transition-colors">
-                          {app.id.split('/')[1]}
-                        </h4>
-                        <p className="text-[10px] text-[#86868b] mt-0.5">
-                          by {app.id.split('/')[0]}
-                        </p>
-                      </div>
-                      <div className="flex items-center gap-1.5 flex-shrink-0 ml-2">
-                        <div className="flex items-center gap-0.5">
-                          <svg className="w-3 h-3 text-[#86868b]" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                          </svg>
-                          <span className="text-[10px] text-[#86868b] font-medium">{app.likes}</span>
-                        </div>
-                        <div className="flex items-center gap-0.5">
-                          <svg className="w-3 h-3 text-[#86868b]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
-                          </svg>
-                          <span className="text-[10px] text-[#86868b] font-medium">{app.trendingScore}</span>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="flex flex-wrap gap-1">
-                      <span className="px-1.5 py-0.5 bg-[#2d2d30] text-[#86868b] text-[9px] rounded-full font-medium">
-                        {app.sdk}
-                      </span>
-                      {app.tags?.slice(0, 2).map((tag: string) =>
-                        tag !== 'anycoder' && tag !== app.sdk && tag !== 'region:us' && (
-                          <span key={tag} className="px-1.5 py-0.5 bg-[#2d2d30] text-[#86868b] text-[9px] rounded-full font-medium">
-                            {tag}
-                          </span>
-                        )
-                      )}
-                    </div>
-                  </a>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      </main>
-    </div>
-  );
-}
-

frontend/src/lib/api.ts

@@ -1,541 +0,0 @@
-// API client for AnyCoder backend
-
-import axios, { AxiosInstance } from 'axios';
-import type {
-  Model,
-  AuthStatus,
-  CodeGenerationRequest,
-  DeploymentRequest,
-  DeploymentResponse,
-  Language,
-} from '@/types';
-
-// Use relative URLs in production (Next.js rewrites will proxy to backend)
-// In local dev, use localhost:8000 for direct backend access
-const getApiUrl = () => {
-  // If explicitly set via env var, use it (for development)
-  if (process.env.NEXT_PUBLIC_API_URL) {
-    console.log('[API Client] Using explicit API URL:', process.env.NEXT_PUBLIC_API_URL);
-    return process.env.NEXT_PUBLIC_API_URL;
-  }
-
-  // For server-side rendering, always use relative URLs
-  if (typeof window === 'undefined') {
-    console.log('[API Client] SSR mode: using relative URLs');
-    return '';
-  }
-
-  // On localhost (dev mode), use direct backend URL  
-  const hostname = window.location.hostname;
-  if (hostname === 'localhost' || hostname === '127.0.0.1') {
-    console.log('[API Client] Localhost dev mode: using http://localhost:8000');
-    return 'http://localhost:8000';
-  }
-
-  // In production (HF Space), use relative URLs (Next.js proxies to backend)
-  console.log('[API Client] Production mode: using relative URLs (proxied by Next.js)');
-  return '';
-};
-
-const API_URL = getApiUrl();
-
-class ApiClient {
-  private client: AxiosInstance;
-  private token: string | null = null;
-
-  constructor() {
-    this.client = axios.create({
-      baseURL: API_URL,
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      timeout: 10000, // 10 second timeout to prevent hanging connections
-    });
-
-    // Add auth token to requests if available
-    this.client.interceptors.request.use((config) => {
-      // ALWAYS use OAuth token primarily, session token is for backend tracking only
-      if (this.token) {
-        config.headers.Authorization = `Bearer ${this.token}`;
-      }
-      return config;
-    });
-
-    // Add response interceptor to handle authentication errors
-    this.client.interceptors.response.use(
-      (response) => response,
-      (error) => {
-        // Handle 401 errors (expired/invalid authentication)
-        // ONLY log out on specific auth errors, not all 401s
-        if (error.response && error.response.status === 401) {
-          const errorData = error.response.data;
-          const errorMessage = errorData?.detail || errorData?.message || '';
-
-          // Only log out if it's an authentication/session issue
-          // Don't log out for permission errors on specific resources
-          const shouldLogout =
-            errorMessage.includes('Authentication required') ||
-            errorMessage.includes('Invalid token') ||
-            errorMessage.includes('Token expired') ||
-            errorMessage.includes('Session expired') ||
-            error.config?.url?.includes('/auth/');
-
-          if (shouldLogout && typeof window !== 'undefined') {
-            // Clear ALL authentication data including session token
-            localStorage.removeItem('hf_oauth_token');
-            localStorage.removeItem('hf_session_token');
-            localStorage.removeItem('hf_user_info');
-            this.token = null;
-
-            // Dispatch custom event to notify UI components
-            window.dispatchEvent(new CustomEvent('auth-expired', {
-              detail: { message: 'Your session has expired. Please sign in again.' }
-            }));
-          }
-        }
-        return Promise.reject(error);
-      }
-    );
-
-    // Load token from localStorage on client side
-    if (typeof window !== 'undefined') {
-      this.token = localStorage.getItem('hf_oauth_token');
-    }
-  }
-
-  setToken(token: string | null) {
-    this.token = token;
-    // Note: OAuth token is stored by auth.ts, not here
-    // We just keep it in memory for API calls
-  }
-
-  getToken(): string | null {
-    return this.token;
-  }
-
-  // Cache helpers
-  private getCachedData<T>(key: string, maxAgeMs: number): T | null {
-    if (typeof window === 'undefined') return null;
-
-    try {
-      const cached = localStorage.getItem(key);
-      if (!cached) return null;
-
-      const { data, timestamp } = JSON.parse(cached);
-      const age = Date.now() - timestamp;
-
-      if (age > maxAgeMs) {
-        localStorage.removeItem(key);
-        return null;
-      }
-
-      return data;
-    } catch (error) {
-      console.error(`Failed to get cached data for ${key}:`, error);
-      return null;
-    }
-  }
-
-  private setCachedData<T>(key: string, data: T): void {
-    if (typeof window === 'undefined') return;
-
-    try {
-      localStorage.setItem(key, JSON.stringify({
-        data,
-        timestamp: Date.now()
-      }));
-    } catch (error) {
-      console.error(`Failed to cache data for ${key}:`, error);
-    }
-  }
-
-  async getModels(): Promise<Model[]> {
-    // Check cache first (24 hour TTL - cache once per day)
-    const cached = this.getCachedData<Model[]>('anycoder_models', 24 * 60 * 60 * 1000);
-    if (cached) {
-      console.log('Using cached models:', cached.length, 'models');
-      return cached;
-    }
-
-    try {
-      console.log('Fetching models from API...');
-      const response = await this.client.get<Model[]>('/api/models');
-      const models = response.data;
-
-      // Cache the successful response
-      if (models && models.length > 0) {
-        this.setCachedData('anycoder_models', models);
-        console.log('Cached', models.length, 'models (valid for 24 hours)');
-      }
-
-      return models;
-    } catch (error: any) {
-      // Handle connection errors gracefully
-      const isConnectionError =
-        error.code === 'ECONNABORTED' ||
-        error.code === 'ECONNRESET' ||
-        error.code === 'ECONNREFUSED' ||
-        error.message?.includes('socket hang up') ||
-        error.message?.includes('timeout') ||
-        error.message?.includes('Network Error') ||
-        error.response?.status === 503 ||
-        error.response?.status === 502;
-
-      if (isConnectionError) {
-        // Try to return stale cache if available
-        const staleCache = this.getCachedData<Model[]>('anycoder_models', Infinity);
-        if (staleCache && staleCache.length > 0) {
-          console.warn('Backend not available, using stale cached models');
-          return staleCache;
-        }
-
-        console.warn('Backend not available, cannot load models');
-        return [];
-      }
-      // Re-throw other errors
-      throw error;
-    }
-  }
-
-  async getLanguages(): Promise<{ languages: Language[] }> {
-    // Check cache first (24 hour TTL - cache once per day)
-    const cached = this.getCachedData<Language[]>('anycoder_languages', 24 * 60 * 60 * 1000);
-    if (cached) {
-      console.log('Using cached languages:', cached.length, 'languages');
-      return { languages: cached };
-    }
-
-    try {
-      console.log('Fetching languages from API...');
-      const response = await this.client.get<{ languages: Language[] }>('/api/languages');
-      const languages = response.data.languages;
-
-      // Cache the successful response
-      if (languages && languages.length > 0) {
-        this.setCachedData('anycoder_languages', languages);
-        console.log('Cached', languages.length, 'languages (valid for 24 hours)');
-      }
-
-      return response.data;
-    } catch (error: any) {
-      // Handle connection errors gracefully
-      const isConnectionError =
-        error.code === 'ECONNABORTED' ||
-        error.code === 'ECONNRESET' ||
-        error.code === 'ECONNREFUSED' ||
-        error.message?.includes('socket hang up') ||
-        error.message?.includes('timeout') ||
-        error.message?.includes('Network Error') ||
-        error.response?.status === 503 ||
-        error.response?.status === 502;
-
-      if (isConnectionError) {
-        // Try to return stale cache if available
-        const staleCache = this.getCachedData<Language[]>('anycoder_languages', Infinity);
-        if (staleCache && staleCache.length > 0) {
-          console.warn('Backend not available, using stale cached languages');
-          return { languages: staleCache };
-        }
-
-        // Fall back to default languages
-        console.warn('Backend not available, using default languages');
-        return { languages: ['html', 'gradio', 'transformers.js', 'streamlit', 'comfyui', 'react'] };
-      }
-      // Re-throw other errors
-      throw error;
-    }
-  }
-
-  async getAuthStatus(): Promise<AuthStatus> {
-    try {
-      const response = await this.client.get<AuthStatus>('/api/auth/status');
-      return response.data;
-    } catch (error: any) {
-      // Silently handle connection errors - don't spam console
-      if (error.code === 'ECONNABORTED' || error.code === 'ECONNRESET' || error.message?.includes('socket hang up')) {
-        // Connection error - backend may not be ready
-        return {
-          authenticated: false,
-          username: undefined,
-          message: 'Connection error',
-        };
-      }
-      // For other errors, return not authenticated
-      return {
-        authenticated: false,
-        username: undefined,
-        message: 'Not authenticated',
-      };
-    }
-  }
-
-  // Stream-based code generation using Fetch API with streaming (supports POST)
-  generateCodeStream(
-    request: CodeGenerationRequest,
-    onChunk: (content: string) => void,
-    onComplete: (code: string, reasoning?: string) => void,
-    onError: (error: string) => void,
-    onDeploying?: (message: string) => void,
-    onDeployed?: (message: string, spaceUrl: string) => void,
-    onDeployError?: (message: string) => void
-  ): () => void {
-    // Build the URL correctly whether we have a base URL or not
-    const baseUrl = API_URL || window.location.origin;
-    const url = new URL('/api/generate', baseUrl);
-
-    let abortController = new AbortController();
-    let accumulatedCode = '';
-    let buffer = ''; // Buffer for incomplete SSE lines
-
-    // Use fetch with POST to support large payloads
-    fetch(url.toString(), {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        ...(this.token ? { 'Authorization': `Bearer ${this.token}` } : {}),
-      },
-      body: JSON.stringify(request),
-      signal: abortController.signal,
-    })
-      .then(async (response) => {
-        // Handle rate limit errors before parsing response
-        if (response.status === 429) {
-          onError('⏱️ Rate limit exceeded. Free tier allows up to 20 requests per minute. Please wait a moment and try again.');
-          return;
-        }
-
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        if (!response.body) {
-          throw new Error('Response body is null');
-        }
-
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-
-        while (true) {
-          const { done, value } = await reader.read();
-
-          if (done) {
-            console.log('[Stream] Stream ended, total code length:', accumulatedCode.length);
-            if (accumulatedCode) {
-              onComplete(accumulatedCode);
-            }
-            break;
-          }
-
-          // Decode chunk and add to buffer
-          buffer += decoder.decode(value, { stream: true });
-
-          // Process complete SSE messages (ending with \n\n)
-          const messages = buffer.split('\n\n');
-
-          // Keep the last incomplete message in the buffer
-          buffer = messages.pop() || '';
-
-          // Process each complete message
-          for (const message of messages) {
-            if (!message.trim()) continue;
-
-            // Parse SSE format: "data: {...}"
-            const lines = message.split('\n');
-            for (const line of lines) {
-              if (line.startsWith('data: ')) {
-                try {
-                  const jsonStr = line.substring(6);
-                  const data = JSON.parse(jsonStr);
-                  console.log('[Stream] Received event:', data.type, data.content?.substring(0, 50));
-
-                  if (data.type === 'chunk' && data.content) {
-                    accumulatedCode += data.content;
-                    onChunk(data.content);
-                  } else if (data.type === 'complete') {
-                    console.log('[Stream] Generation complete, total code length:', data.code?.length || accumulatedCode.length);
-                    // Use the complete code from the message if available, otherwise use accumulated
-                    const finalCode = data.code || accumulatedCode;
-                    onComplete(finalCode, data.reasoning);
-                    // Don't return yet - might have deployment events coming
-                  } else if (data.type === 'deploying') {
-                    console.log('[Stream] Deployment started:', data.message);
-                    if (onDeploying) {
-                      onDeploying(data.message || 'Deploying...');
-                    }
-                  } else if (data.type === 'deployed') {
-                    console.log('[Stream] Deployment successful:', data.space_url);
-                    if (onDeployed) {
-                      onDeployed(data.message || 'Deployed!', data.space_url);
-                    }
-                  } else if (data.type === 'deploy_error') {
-                    console.log('[Stream] Deployment error:', data.message);
-                    if (onDeployError) {
-                      onDeployError(data.message || 'Deployment failed');
-                    }
-                  } else if (data.type === 'error') {
-                    console.error('[Stream] Error:', data.message);
-                    onError(data.message || 'Unknown error occurred');
-                    return; // Exit the processing loop
-                  }
-                } catch (error) {
-                  console.error('Error parsing SSE data:', error, 'Line:', line);
-                }
-              }
-            }
-          }
-        }
-      })
-      .catch((error) => {
-        if (error.name === 'AbortError') {
-          console.log('[Stream] Request aborted');
-          return;
-        }
-        console.error('[Stream] Fetch error:', error);
-        onError(error.message || 'Connection error occurred');
-      });
-
-    // Return cleanup function
-    return () => {
-      abortController.abort();
-    };
-  }
-
-  // Alternative: WebSocket-based generation
-  generateCodeWebSocket(
-    request: CodeGenerationRequest,
-    onChunk: (content: string) => void,
-    onComplete: (code: string) => void,
-    onError: (error: string) => void
-  ): WebSocket {
-    // Build WebSocket URL correctly for both dev and production
-    const baseUrl = API_URL || window.location.origin;
-    const wsUrl = baseUrl.replace('http', 'ws') + '/ws/generate';
-    const ws = new WebSocket(wsUrl);
-
-    ws.onopen = () => {
-      ws.send(JSON.stringify(request));
-    };
-
-    ws.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data);
-
-        if (data.type === 'chunk' && data.content) {
-          onChunk(data.content);
-        } else if (data.type === 'complete' && data.code) {
-          onComplete(data.code);
-          ws.close();
-        } else if (data.type === 'error') {
-          onError(data.message || 'Unknown error occurred');
-          ws.close();
-        }
-      } catch (error) {
-        console.error('Error parsing WebSocket data:', error);
-      }
-    };
-
-    ws.onerror = (error) => {
-      console.error('WebSocket error:', error);
-      onError('Connection error occurred');
-    };
-
-    return ws;
-  }
-
-  async deploy(request: DeploymentRequest): Promise<DeploymentResponse> {
-    console.log('[API Client] Deploy request:', {
-      endpoint: '/api/deploy',
-      method: 'POST',
-      baseURL: API_URL,
-      hasToken: !!this.token,
-      language: request.language,
-      code_length: request.code?.length,
-      space_name: request.space_name,
-      existing_repo_id: request.existing_repo_id,
-    });
-
-    try {
-      const response = await this.client.post<DeploymentResponse>('/api/deploy', request);
-      console.log('[API Client] Deploy response:', response.status, response.data);
-      return response.data;
-    } catch (error: any) {
-      console.error('[API Client] Deploy error:', {
-        status: error.response?.status,
-        statusText: error.response?.statusText,
-        data: error.response?.data,
-        message: error.message,
-      });
-      throw error;
-    }
-  }
-
-  async importProject(url: string, preferLocal: boolean = false): Promise<any> {
-    const response = await this.client.post('/api/import', { url, prefer_local: preferLocal });
-    return response.data;
-  }
-
-  async importSpace(username: string, spaceName: string): Promise<any> {
-    const response = await this.client.get(`/api/import/space/${username}/${spaceName}`);
-    return response.data;
-  }
-
-  async importModel(modelId: string, preferLocal: boolean = false): Promise<any> {
-    const response = await this.client.get(`/api/import/model/${modelId}`, {
-      params: { prefer_local: preferLocal }
-    });
-    return response.data;
-  }
-
-  async importGithub(owner: string, repo: string): Promise<any> {
-    const response = await this.client.get(`/api/import/github/${owner}/${repo}`);
-    return response.data;
-  }
-
-  async createPullRequest(repoId: string, code: string, language: string, prTitle?: string, prDescription?: string): Promise<any> {
-    const response = await this.client.post('/api/create-pr', {
-      repo_id: repoId,
-      code,
-      language,
-      pr_title: prTitle,
-      pr_description: prDescription
-    });
-    return response.data;
-  }
-
-  async duplicateSpace(fromSpaceId: string, toSpaceName?: string, isPrivate: boolean = false): Promise<any> {
-    const response = await this.client.post('/api/duplicate-space', {
-      from_space_id: fromSpaceId,
-      to_space_name: toSpaceName,
-      private: isPrivate
-    });
-    return response.data;
-  }
-
-  logout() {
-    this.token = null;
-  }
-
-  async getTrendingAnycoderApps(): Promise<any[]> {
-    try {
-      // Fetch from HuggingFace API directly
-      const response = await axios.get('https://huggingface.co/api/spaces', {
-        timeout: 5000,
-      });
-
-      // Filter for apps with 'anycoder' tag and sort by trendingScore
-      const anycoderApps = response.data
-        .filter((space: any) => space.tags && space.tags.includes('anycoder'))
-        .sort((a: any, b: any) => (b.trendingScore || 0) - (a.trendingScore || 0))
-        .slice(0, 6);
-
-      return anycoderApps;
-    } catch (error) {
-      console.error('Failed to fetch trending anycoder apps:', error);
-      return [];
-    }
-  }
-}
-
-// Export singleton instance
-export const apiClient = new ApiClient();
-

frontend/src/lib/auth.ts

@@ -1,287 +0,0 @@
-// HuggingFace OAuth authentication utilities (Server-side flow for Docker Spaces)
-
-const STORAGE_KEY = 'hf_oauth_token';
-const SESSION_KEY = 'hf_session_token';  // NEW: Store session UUID
-const USER_INFO_KEY = 'hf_user_info';
-const DEV_MODE_KEY = 'hf_dev_mode';
-const API_BASE = '/api';
-
-// Check if we're in development mode (localhost)
-const isDevelopment = typeof window !== 'undefined' && 
-  (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
-
-export interface OAuthUserInfo {
-  id?: string;
-  sub?: string;
-  name: string;
-  preferred_username?: string;
-  preferredUsername?: string;
-  picture?: string;
-  avatarUrl?: string;
-}
-
-export interface OAuthResult {
-  accessToken: string;
-  accessTokenExpiresAt: Date;
-  userInfo: OAuthUserInfo;
-}
-
-/**
- * Initialize OAuth and check if user is logged in
- * Returns OAuth result if user is already logged in
- */
-export async function initializeOAuth(): Promise<OAuthResult | null> {
-  try {
-    // In development mode, check for dev mode login first
-    if (isDevelopment && isDevModeEnabled()) {
-      const storedToken = getStoredToken();
-      const storedUserInfo = getStoredUserInfo();
-      
-      if (storedToken && storedUserInfo) {
-        return {
-          accessToken: storedToken,
-          accessTokenExpiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000),
-          userInfo: storedUserInfo,
-        };
-      }
-      return null;
-    }
-    
-    // Check if we're handling an OAuth callback (session parameter in URL)
-    const urlParams = new URLSearchParams(window.location.search);
-    const sessionToken = urlParams.get('session');
-    
-    if (sessionToken) {
-      // Fetch session data from backend
-      try {
-        const response = await fetch(`${API_BASE}/auth/session?session=${sessionToken}`);
-        if (response.ok) {
-          const data = await response.json();
-          
-          // Normalize user info
-          const userInfo: OAuthUserInfo = {
-            id: data.user_info.sub || data.user_info.id,
-            name: data.user_info.name,
-            preferredUsername: data.user_info.preferred_username || data.user_info.preferredUsername,
-            avatarUrl: data.user_info.picture || data.user_info.avatarUrl,
-          };
-          
-          const oauthResult: OAuthResult = {
-            accessToken: data.access_token,
-            accessTokenExpiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000),
-            userInfo,
-          };
-          
-          // Store the OAuth result AND session token
-          storeOAuthData(oauthResult);
-          storeSessionToken(sessionToken);  // NEW: Store session UUID
-          
-          // Clean up URL
-          window.history.replaceState({}, document.title, window.location.pathname);
-          
-          return oauthResult;
-        }
-      } catch (error) {
-        console.error('Failed to fetch session:', error);
-      }
-    }
-    
-    // Check if we have stored credentials
-    const storedToken = getStoredToken();
-    const storedUserInfo = getStoredUserInfo();
-    
-    if (storedToken && storedUserInfo) {
-      return {
-        accessToken: storedToken,
-        accessTokenExpiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000),
-        userInfo: storedUserInfo,
-      };
-    }
-    
-    return null;
-  } catch (error) {
-    console.error('OAuth initialization error:', error);
-    return null;
-  }
-}
-
-/**
- * Redirect to HuggingFace OAuth login page (via backend)
- */
-export async function loginWithHuggingFace(): Promise<void> {
-  try {
-    // Call backend to get OAuth URL
-    const response = await fetch(`${API_BASE}/auth/login`);
-    if (!response.ok) {
-      throw new Error('Failed to get login URL');
-    }
-    
-    const data = await response.json();
-    // Redirect to the OAuth authorization URL
-    window.location.href = data.login_url;
-  } catch (error) {
-    console.error('Failed to initiate OAuth login:', error);
-    throw new Error('Failed to start login process');
-  }
-}
-
-/**
- * Logout and clear stored credentials
- */
-export function logout(): void {
-  if (typeof window !== 'undefined') {
-    localStorage.removeItem(STORAGE_KEY);
-    localStorage.removeItem(SESSION_KEY);  // NEW: Clear session token
-    localStorage.removeItem(USER_INFO_KEY);
-    localStorage.removeItem(DEV_MODE_KEY);
-  }
-}
-
-/**
- * Store OAuth data in localStorage
- */
-function storeOAuthData(result: OAuthResult): void {
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(STORAGE_KEY, result.accessToken);
-    localStorage.setItem(USER_INFO_KEY, JSON.stringify(result.userInfo));
-  }
-}
-
-/**
- * Store session token in localStorage
- */
-function storeSessionToken(sessionToken: string): void {
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(SESSION_KEY, sessionToken);
-  }
-}
-
-/**
- * Get stored session token
- */
-export function getStoredSessionToken(): string | null {
-  if (typeof window !== 'undefined') {
-    return localStorage.getItem(SESSION_KEY);
-  }
-  return null;
-}
-
-/**
- * Get stored access token
- */
-export function getStoredToken(): string | null {
-  if (typeof window !== 'undefined') {
-    return localStorage.getItem(STORAGE_KEY);
-  }
-  return null;
-}
-
-/**
- * Get stored user info
- */
-export function getStoredUserInfo(): OAuthUserInfo | null {
-  if (typeof window !== 'undefined') {
-    const userInfoStr = localStorage.getItem(USER_INFO_KEY);
-    if (userInfoStr) {
-      try {
-        return JSON.parse(userInfoStr);
-      } catch {
-        return null;
-      }
-    }
-  }
-  return null;
-}
-
-/**
- * Check if user is authenticated
- */
-export function isAuthenticated(): boolean {
-  return getStoredToken() !== null;
-}
-
-/**
- * Validate authentication with backend
- * Returns true if authenticated, false if session expired
- */
-export async function validateAuthentication(): Promise<boolean> {
-  const token = getStoredToken();
-  if (!token) {
-    return false;
-  }
-
-  // Skip validation for dev mode tokens
-  if (isDevelopment && token.startsWith('dev_token_')) {
-    return true;
-  }
-
-  try {
-    const response = await fetch(`${API_BASE}/auth/status`, {
-      headers: {
-        'Authorization': `Bearer ${token}`,
-      },
-    });
-
-    if (response.status === 401) {
-      // Session expired, clean up
-      logout();
-      return false;
-    }
-
-    if (!response.ok) {
-      return false;
-    }
-
-    const data = await response.json();
-    return data.authenticated === true;
-  } catch (error) {
-    console.error('Failed to validate authentication:', error);
-    return false;
-  }
-}
-
-/**
- * Development mode login (mock authentication)
- */
-export function loginDevMode(username: string): OAuthResult {
-  const mockToken = `dev_token_${username}_${Date.now()}`;
-  const mockUserInfo: OAuthUserInfo = {
-    id: `dev_${Date.now()}`,
-    name: username,
-    preferredUsername: username.toLowerCase().replace(/\s+/g, '_'),
-    avatarUrl: `https://ui-avatars.com/api/?name=${encodeURIComponent(username)}&background=random&size=128`,
-  };
-  
-  const result: OAuthResult = {
-    accessToken: mockToken,
-    accessTokenExpiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000),
-    userInfo: mockUserInfo,
-  };
-  
-  // Store the mock data
-  storeOAuthData(result);
-  // Mark as dev mode
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(DEV_MODE_KEY, 'true');
-  }
-  
-  return result;
-}
-
-/**
- * Check if dev mode is enabled
- */
-export function isDevModeEnabled(): boolean {
-  if (typeof window !== 'undefined') {
-    return localStorage.getItem(DEV_MODE_KEY) === 'true';
-  }
-  return false;
-}
-
-/**
- * Check if we're in development environment
- */
-export function isDevelopmentMode(): boolean {
-  return isDevelopment;
-}
-

frontend/src/types/index.ts

@@ -1,69 +0,0 @@
-// Type definitions for AnyCoder frontend
-
-export interface Model {
-  name: string;
-  id: string;
-  description: string;
-  supports_images?: boolean;
-}
-
-export interface Message {
-  role: 'user' | 'assistant' | 'system';
-  content: string;
-  timestamp?: string;
-  image_url?: string;  // For vision models
-}
-
-export interface CodeGenerationRequest {
-  query: string;
-  language: string;
-  model_id: string;
-  provider: string;
-  history: string[][];
-  agent_mode: boolean;
-  existing_repo_id?: string;  // For auto-deploy to update existing space
-  skip_auto_deploy?: boolean;  // Skip auto-deploy (for PR creation)
-  image_url?: string;  // For vision models like GLM-4.6V
-}
-
-export interface CodeGenerationResponse {
-  code: string;
-  history: string[][];
-  status: string;
-}
-
-export interface StreamChunk {
-  type: 'chunk' | 'complete' | 'error' | 'status';
-  content?: string;
-  code?: string;
-  message?: string;
-  progress?: number;
-  timestamp?: string;
-}
-
-export interface AuthStatus {
-  authenticated: boolean;
-  username?: string;
-  message: string;
-}
-
-export interface DeploymentRequest {
-  code: string;
-  space_name?: string;
-  language: string;
-  requirements?: string;
-  existing_repo_id?: string;  // For updating existing spaces
-  commit_message?: string;
-  history?: Array<{ role: string; content: string }>;  // Chat history for tracking
-}
-
-export interface DeploymentResponse {
-  success: boolean;
-  space_url?: string;
-  message: string;
-  dev_mode?: boolean;
-  repo_id?: string;
-}
-
-export type Language = 'html' | 'gradio' | 'transformers.js' | 'streamlit' | 'comfyui' | 'react' | 'daggr';
-

frontend/tailwind.config.js

@@ -1,29 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        primary: {
-          50: '#eff6ff',
-          100: '#dbeafe',
-          200: '#bfdbfe',
-          300: '#93c5fd',
-          400: '#60a5fa',
-          500: '#3b82f6',
-          600: '#2563eb',
-          700: '#1d4ed8',
-          800: '#1e40af',
-          900: '#1e3a8a',
-        },
-      },
-    },
-  },
-  plugins: [],
-  darkMode: 'class',
-}
-

frontend/tsconfig.json

@@ -1,41 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    },
-    "target": "ES2017"
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}