Fix: Stable deployment without binary mascot (Phase 9)

frontend/src/App.tsx

@@ -46,6 +46,7 @@ const App: React.FC = () => {
   const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null);
   const [initialTaskId, setInitialTaskId] = useState<string | null>(null);
   const [projectDetailReturnTab, setProjectDetailReturnTab] = useState<AppTab>('dashboard');
+  const [initialProjectData, setInitialProjectData] = useState<any>(null);
   const [uiMode, setUiMode] = useState<UiMode>(() => getUiMode());
   const [isSidebarOpen, setIsSidebarOpen] = useState(() => typeof window === 'undefined' || window.innerWidth >= 900);
   const [showSplash, setShowSplash] = useState(true);
@@ -231,7 +232,10 @@ const App: React.FC = () => {
         <section className="animate-fade-in app-content">
           {activeTab === 'dashboard' && (
             <Dashboard
-              onNewProject={() => navigateTo('new-project')}
+              onNewProject={(data?: any) => {
+                setInitialProjectData(data || null);
+                navigateTo('new-project');
+              }}
               onOpenProject={(projectId) => openProjectDetail(projectId)}
             />
           )}
@@ -261,7 +265,7 @@ const App: React.FC = () => {
           {activeTab === 'monitoring' && uiMode === 'expert' && <MonitoringView />}
           {activeTab === 'teams' && uiMode === 'expert' && <TeamsView />}
           {activeTab === 'audit' && uiMode === 'expert' && <AuditView />}
-          {activeTab === 'new-project' && <NewProject uiMode={uiMode} onCreated={() => navigateTo('dashboard')} />}
+          {activeTab === 'new-project' && <NewProject uiMode={uiMode} initialData={initialProjectData} onCreated={() => { setInitialProjectData(null); navigateTo('dashboard'); }} />}
           {activeTab === 'settings' && <SettingsView uiMode={uiMode} onUiModeChange={updateUiMode} />}
         </section>
 

frontend/src/components/Dashboard.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FolderOpen, Play, RefreshCw, Search, SlidersHorizontal, Trash2, X } from 'lucide-react';
+import { getApiUrl } from '../services/runtimeConfig';
 import { motion } from 'framer-motion';
 import { supabase } from '../services/supabase';
 import { useAuth } from '../context/useAuth';
@@ -34,6 +35,9 @@ const Dashboard: React.FC<DashboardProps> = ({ onNewProject, onOpenProject }) =>
   const [statusFilter, setStatusFilter] = useState('all');
   const [progressFilter, setProgressFilter] = useState('all');
   const [sortBy, setSortBy] = useState('newest');
+  const [aiPrompt, setAiPrompt] = useState('');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [magicFiles, setMagicFiles] = useState<File[]>([]);
 
   const loadDashboard = useCallback(async () => {
     if (!user) return;
@@ -88,6 +92,38 @@ const Dashboard: React.FC<DashboardProps> = ({ onNewProject, onOpenProject }) =>
     }
   };
 
+  const handleMagicGenerate = async () => {
+    if (!aiPrompt.trim()) return;
+    setIsGenerating(true);
+    
+    try {
+      const formData = new FormData();
+      formData.append('prompt', aiPrompt);
+      magicFiles.forEach(file => {
+        formData.append('files', file);
+      });
+
+      const apiUrl = getApiUrl();
+
+      const response = await fetch(`${apiUrl}/generator/generate-project`, {
+        method: 'POST',
+        body: formData
+      });
+
+      if (!response.ok) throw new Error('AI Generation failed');
+      
+      const data = await response.json();
+      onNewProject(data); // Open NewProject wizard with pre-filled data
+      setAiPrompt('');
+      setMagicFiles([]);
+    } catch (err: any) {
+      console.error('Magic Generate Error:', err);
+      setError(`AI Error: ${err.message}`);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
   const taskCounts = useMemo(() => {
     return tasks.reduce<Record<string, { done: number; total: number }>>((acc, task) => {
       if (!acc[task.project_id]) acc[task.project_id] = { done: 0, total: 0 };
@@ -145,23 +181,106 @@ const Dashboard: React.FC<DashboardProps> = ({ onNewProject, onOpenProject }) =>
 
   return (
     <>
-      <div className="page-heading dashboard-heading">
+      <div className="page-heading dashboard-heading" style={{ marginBottom: 'var(--space-md)' }}>
         <div>
           <h2>Project Dashboard</h2>
           <p style={{ color: 'var(--text-dim)' }}>Monitor and manage your autonomous AI agent workflows.</p>
         </div>
         <div className="button-row">
           <button className="btn btn-glass" onClick={loadDashboard} disabled={loading}>
-            <RefreshCw size={18} />
+            <RefreshCw size={18} className={loading ? 'spin' : ''} />
             {loading ? 'Refreshing...' : 'Refresh'}
           </button>
-          <button className="btn btn-primary" onClick={onNewProject}>
+          <button className="btn btn-primary" onClick={() => onNewProject()}>
             <FolderOpen size={18} />
             New Project
           </button>
         </div>
       </div>
 
+      {/* AI Magic Bar (Aubix) */}
+      <section className="glass-panel magic-box" style={{ 
+        marginBottom: 'var(--space-xl)', 
+        padding: '12px 20px', 
+        border: '1px solid var(--accent)',
+        boxShadow: '0 0 30px rgba(110, 89, 255, 0.15)',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--space-lg)',
+        background: 'rgba(110, 89, 255, 0.05)'
+      }}>
+        <div style={{ 
+          width: '64px', 
+          height: '64px', 
+          background: 'var(--accent)', 
+          borderRadius: '16px', 
+          display: 'flex', 
+          alignItems: 'center', 
+          justifyContent: 'center',
+          boxShadow: '0 0 20px rgba(110, 89, 255, 0.3)'
+        }}>
+          <Bot size={32} color="white" />
+        </div>
+        <div style={{ flex: 1 }}>
+          <div style={{ display: 'flex', gap: 'var(--space-sm)', position: 'relative' }}>
+             <input 
+               type="text" 
+               placeholder="Ask Aubix to build a project... (e.g. 'Audit the Aubm codebase using MD files')"
+               value={aiPrompt}
+               onChange={(e) => setAiPrompt(e.target.value)}
+               onKeyDown={(e) => e.key === 'Enter' && handleMagicGenerate()}
+               style={{
+                 width: '100%',
+                 padding: '12px 20px',
+                 paddingRight: '140px',
+                 background: 'rgba(0,0,0,0.2)',
+                 border: '1px solid var(--border)',
+                 borderRadius: 'var(--radius-md)',
+                 color: 'white',
+                 fontSize: '1rem',
+                 outline: 'none'
+               }}
+             />
+             <div style={{ position: 'absolute', right: '6px', top: '50%', transform: 'translateY(-50%)', display: 'flex', gap: '6px' }}>
+               <button 
+                 className="btn btn-sm btn-glass" 
+                 title="Reference Files"
+                 onClick={() => {
+                   const input = document.createElement('input');
+                   input.type = 'file';
+                   input.multiple = true;
+                   input.onchange = (e) => setMagicFiles(Array.from((e.target as HTMLInputElement).files || []));
+                   input.click();
+                 }}
+                 style={{ padding: '8px' }}
+               >
+                 <Search size={16} style={{ transform: 'rotate(45deg)' }} />
+                 {magicFiles.length > 0 && <span className="count-badge" style={{ position: 'absolute', top: '-5px', right: '-5px', background: 'var(--accent)', fontSize: '0.6rem', padding: '2px 4px', borderRadius: '50%' }}>{magicFiles.length}</span>}
+               </button>
+               <button 
+                 className="btn btn-sm btn-primary"
+                 onClick={handleMagicGenerate}
+                 disabled={isGenerating || !aiPrompt.trim()}
+                 style={{ minWidth: '80px' }}
+               >
+                 {isGenerating ? <RefreshCw className="spin" size={16} /> : <Play size={16} />}
+                 {isGenerating ? '...' : 'Generate'}
+               </button>
+             </div>
+          </div>
+          {magicFiles.length > 0 && (
+            <div style={{ display: 'flex', gap: '8px', marginTop: '8px', flexWrap: 'wrap' }}>
+              {magicFiles.map((f, i) => (
+                <span key={i} style={{ fontSize: '0.7rem', background: 'rgba(255,255,255,0.1)', padding: '2px 8px', borderRadius: '4px', display: 'flex', alignItems: 'center', gap: '6px', border: '1px solid rgba(255,255,255,0.1)' }}>
+                  {f.name}
+                  <X size={10} style={{ cursor: 'pointer', opacity: 0.5 }} onClick={() => setMagicFiles(prev => prev.filter((_, idx) => idx !== i))} />
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+
       {error && <div className="inline-status">{error}</div>}
 
       {projects.length > 0 && (

frontend/src/components/NewProject.tsx

@@ -4,6 +4,7 @@ import { motion } from 'framer-motion';
 import { supabase } from '../services/supabase';
 import { useAuth } from '../context/useAuth';
 import type { UiMode } from '../services/uiMode';
+import { getApiUrl } from '../services/runtimeConfig';
 
 type ProjectSource =
   | {
@@ -115,7 +116,7 @@ const expertAccessStep = {
   description: 'Decide whether this project is personal or belongs to a team workspace.'
 };
 
-const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMode, onCreated }) => {
+const NewProject: React.FC<{ uiMode: UiMode; initialData?: any; onCreated?: () => void }> = ({ uiMode, initialData, onCreated }) => {
   const { user } = useAuth();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [name, setName] = useState('');

frontend/src/components/SplashScreen.tsx

@@ -31,19 +31,21 @@ const SplashScreen: React.FC = () => {
           damping: 20,
           delay: 0.2
         }}
-        style={{
-          width: '120px',
-          height: '120px',
-          borderRadius: '30px',
-          background: 'linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          marginBottom: 'var(--space-xl)',
-          boxShadow: '0 20px 40px rgba(110, 89, 255, 0.3)',
-        }}
-      >
-        <Bot size={60} color="white" />
+        <motion.div
+          animate={{ y: [0, -10, 0] }}
+          transition={{ repeat: Infinity, duration: 3, ease: "easeInOut" }}
+          style={{
+            background: 'linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%)',
+            padding: '40px',
+            borderRadius: '40px',
+            boxShadow: '0 20px 40px rgba(110, 89, 255, 0.4)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          <Bot size={100} color="white" />
+        </motion.div>
       </motion.div>
 
       <motion.h1