Spaces:

Bluestrikeai
/

Full-stack-webapp-builder

Sleeping

App Files Files Community

Bluestrikeai commited on 25 days ago

Commit

eb7f853

verified ·

1 Parent(s): 23678fc

Delete fronend

Browse files

Files changed (21) hide show

fronend/index.html +0 -14
fronend/package.json +0 -25
fronend/postcss.config.js +0 -6
fronend/src/App.jsx +0 -221
fronend/src/components/AgentFeed.jsx +0 -92
fronend/src/components/ChatInterface.jsx +0 -195
fronend/src/components/CodeView.jsx +0 -128
fronend/src/components/ControlPanel.jsx +0 -84
fronend/src/components/FileTree.jsx +0 -141
fronend/src/components/Header.jsx +0 -80
fronend/src/components/LivePreview.jsx +0 -159
fronend/src/components/StatusBar.jsx +0 -104
fronend/src/components/SystemTabs.jsx +0 -37
fronend/src/components/ThemeProvider.jsx +0 -31
fronend/src/hooks/useSSE.js +0 -61
fronend/src/hooks/useTheme.js +0 -2
fronend/src/index.css +0 -126
fronend/src/main.jsx +0 -13
fronend/src/utils/api.js +0 -80
fronend/tailwind.config.js +0 -48
fronend/vite.config.js +0 -15

fronend/index.html DELETED Viewed

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>NEXUS Builder — AI Full-Stack App Maker</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>

fronend/package.json DELETED Viewed

@@ -1,25 +0,0 @@
-{
-  "name": "nexus-builder-ui",
-  "private": true,
-  "version": "1.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "lucide-react": "^0.469.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.17",
-    "vite": "^6.0.5"
-  }
-}

fronend/postcss.config.js DELETED Viewed

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

fronend/src/App.jsx DELETED Viewed

@@ -1,221 +0,0 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react'
-import Header from './components/Header'
-import ControlPanel from './components/ControlPanel'
-import LivePreview from './components/LivePreview'
-import StatusBar from './components/StatusBar'
-import { useSSE } from './hooks/useSSE'
-import { generateProject, getProjectStatus, getProjectFiles, exportProject, fixBug } from './utils/api'
-const INITIAL_AGENTS = {
-  research: { name: 'GLM 4.5 Air', status: 'idle', icon: '🌐' },
-  orchestrator: { name: 'Trinity Large', status: 'idle', icon: '🧠' },
-  frontend: { name: 'Qwen3 Coder', status: 'idle', icon: '🎨' },
-  backend: { name: 'MiniMax M2.5', status: 'idle', icon: '🔐' },
-}
-export default function App() {
-  const [sessionId, setSessionId] = useState(null)
-  const [status, setStatus] = useState('idle')
-  const [agents, setAgents] = useState(INITIAL_AGENTS)
-  const [messages, setMessages] = useState([])
-  const [agentFeed, setAgentFeed] = useState([])
-  const [files, setFiles] = useState({})
-  const [fileTree, setFileTree] = useState([])
-  const [selectedFile, setSelectedFile] = useState(null)
-  const [previewSystem, setPreviewSystem] = useState('preview')
-  const [viewMode, setViewMode] = useState('preview') // preview | code
-  const [errors, setErrors] = useState([])
-  // Handle SSE events from the pipeline
-  const handleSSEEvent = useCallback((event) => {
-    const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data
-    switch (event.type || data.event_type) {
-      case 'agent_start':
-        setAgents(prev => ({
-          ...prev,
-          [data.agent]: { ...prev[data.agent], status: 'active' }
-        }))
-        setAgentFeed(prev => [...prev, {
-          agent: data.agent,
-          content: data.content,
-          time: new Date().toLocaleTimeString(),
-          type: 'start'
-        }])
-        setStatus(data.content || 'Working...')
-        break
-      case 'token':
-        setAgentFeed(prev => {
-          const last = prev[prev.length - 1]
-          if (last && last.agent === data.agent && last.type === 'stream') {
-            return [...prev.slice(0, -1), { ...last, content: last.content + data.content }]
-          }
-          return [...prev, {
-            agent: data.agent,
-            content: data.content,
-            time: new Date().toLocaleTimeString(),
-            type: 'stream'
-          }]
-        })
-        break
-      case 'file_created':
-        setAgentFeed(prev => [...prev, {
-          agent: data.agent,
-          content: data.content,
-          time: new Date().toLocaleTimeString(),
-          type: 'file',
-          filePath: data.file_path
-        }])
-        if (data.file_path) {
-          setFileTree(prev => {
-            const newTree = [...new Set([...prev, data.file_path])]
-            return newTree.sort()
-          })
-        }
-        break
-      case 'agent_done':
-        setAgents(prev => ({
-          ...prev,
-          [data.agent]: { ...prev[data.agent], status: 'done' }
-        }))
-        setAgentFeed(prev => [...prev, {
-          agent: data.agent,
-          content: data.content,
-          time: new Date().toLocaleTimeString(),
-          type: 'done'
-        }])
-        break
-      case 'error':
-        setErrors(prev => [...prev, data.content])
-        setAgents(prev => ({
-          ...prev,
-          [data.agent]: { ...prev[data.agent], status: 'error' }
-        }))
-        break
-      case 'done':
-        setStatus(data.status === 'completed' ? 'completed' : 'error')
-        // Fetch final files
-        if (data.session_id) {
-          getProjectFiles(data.session_id).then(res => {
-            if (res.files) {
-              setFiles(res.files)
-              setFileTree(Object.keys(res.files).sort())
-            }
-          })
-        }
-        break
-      default:
-        break
-    }
-  }, [])
-  const { connect, disconnect } = useSSE(handleSSEEvent)
-  // Start generation
-  const handleGenerate = useCallback(async (prompt, appType) => {
-    // Reset state
-    setAgents(INITIAL_AGENTS)
-    setAgentFeed([])
-    setFiles({})
-    setFileTree([])
-    setErrors([])
-    setSelectedFile(null)
-    setStatus('starting')
-    setMessages(prev => [...prev, { role: 'user', content: prompt }])
-    try {
-      const res = await generateProject(prompt, appType)
-      setSessionId(res.session_id)
-      setStatus('connected')
-      // Connect to SSE stream
-      connect(res.session_id)
-      setMessages(prev => [...prev, {
-        role: 'assistant',
-        content: `🚀 Project generation started! Session: ${res.session_id}\n\nI'm coordinating 4 AI agents to build your application...`
-      }])
-    } catch (err) {
-      setStatus('error')
-      setErrors(prev => [...prev, err.message])
-      setMessages(prev => [...prev, {
-        role: 'assistant',
-        content: `❌ Error starting generation: ${err.message}`
-      }])
-    }
-  }, [connect])
-  // Export
-  const handleExport = useCallback(async () => {
-    if (!sessionId) return
-    try {
-      await exportProject(sessionId)
-    } catch (err) {
-      setErrors(prev => [...prev, `Export failed: ${err.message}`])
-    }
-  }, [sessionId])
-  // Fix bug
-  const handleFix = useCallback(async (errorMessage, filePath) => {
-    if (!sessionId) return
-    try {
-      await fixBug(sessionId, errorMessage, filePath)
-      connect(sessionId) // Reconnect SSE for fix updates
-    } catch (err) {
-      setErrors(prev => [...prev, `Fix failed: ${err.message}`])
-    }
-  }, [sessionId, connect])
-  return (
-    <div className="h-screen w-screen flex flex-col overflow-hidden" style={{ background: 'var(--bg)' }}>
-      <Header
-        agents={agents}
-        sessionId={sessionId}
-        status={status}
-      />
-      <div className="flex flex-1 overflow-hidden">
-        {/* Left Panel — Control Center */}
-        <ControlPanel
-          messages={messages}
-          agentFeed={agentFeed}
-          fileTree={fileTree}
-          files={files}
-          selectedFile={selectedFile}
-          onSelectFile={setSelectedFile}
-          onGenerate={handleGenerate}
-          onFix={handleFix}
-          status={status}
-        />
-        {/* Right Panel — Preview */}
-        <LivePreview
-          sessionId={sessionId}
-          files={files}
-          selectedFile={selectedFile}
-          previewSystem={previewSystem}
-          onChangeSystem={setPreviewSystem}
-          viewMode={viewMode}
-          onChangeViewMode={setViewMode}
-          onExport={handleExport}
-          status={status}
-        />
-      </div>
-      <StatusBar
-        status={status}
-        sessionId={sessionId}
-        agents={agents}
-        errorCount={errors.length}
-        fileCount={fileTree.length}
-      />
-    </div>
-  )
-}

fronend/src/components/AgentFeed.jsx DELETED Viewed

@@ -1,92 +0,0 @@
-import React, { useRef, useEffect } from 'react'
-import { Bot, FileCode2, CheckCircle2, AlertCircle, Zap } from 'lucide-react'
-const AGENT_COLORS = {
-  research: '#00D9FF',
-  orchestrator: '#6C63FF',
-  frontend: '#22D3A8',
-  backend: '#FFB547',
-  system: '#8888AA',
-}
-const AGENT_ICONS = {
-  research: '🌐',
-  orchestrator: '🧠',
-  frontend: '🎨',
-  backend: '🔐',
-  system: '⚙️',
-}
-export default function AgentFeed({ feed }) {
-  const feedEndRef = useRef(null)
-  useEffect(() => {
-    feedEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [feed])
-  if (feed.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center h-full text-center px-6">
-        <Bot className="w-12 h-12 mb-3" style={{ color: 'var(--text-secondary)', opacity: 0.4 }} />
-        <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-          Agent activity will appear here once you start generating.
-        </p>
-      </div>
-    )
-  }
-  return (
-    <div className="h-full overflow-y-auto p-3 space-y-2">
-      {feed.map((item, i) => (
-        <div
-          key={i}
-          className="flex items-start gap-2.5 p-2.5 rounded-lg animate-fade-in text-xs"
-          style={{
-            background: item.type === 'done' ? `${AGENT_COLORS[item.agent]}11` : 'var(--surface)',
-            border: `1px solid ${item.type === 'done' ? AGENT_COLORS[item.agent] + '33' : 'var(--border)'}`,
-          }}
-        >
-          {/* Agent icon */}
-          <span className="text-base flex-shrink-0 mt-0.5">
-            {AGENT_ICONS[item.agent] || '⚙️'}
-          </span>
-          <div className="flex-1 min-w-0">
-            {/* Agent name + time */}
-            <div className="flex items-center justify-between mb-1">
-              <span className="font-semibold capitalize" style={{ color: AGENT_COLORS[item.agent] }}>
-                {item.agent}
-              </span>
-              <span className="text-[10px]" style={{ color: 'var(--text-secondary)' }}>
-                {item.time}
-              </span>
-            </div>
-            {/* Content */}
-            <div style={{ color: 'var(--text-secondary)' }}>
-              {item.type === 'file' ? (
-                <div className="flex items-center gap-1.5">
-                  <FileCode2 className="w-3 h-3" style={{ color: 'var(--success)' }} />
-                  <span className="font-mono text-[11px]">{item.content}</span>
-                </div>
-              ) : item.type === 'done' ? (
-                <div className="flex items-center gap-1.5">
-                  <CheckCircle2 className="w-3 h-3" style={{ color: AGENT_COLORS[item.agent] }} />
-                  <span>{item.content}</span>
-                </div>
-              ) : item.type === 'stream' ? (
-                <pre className="whitespace-pre-wrap font-mono text-[11px] max-h-24 overflow-y-auto leading-relaxed">
-                  {item.content.slice(-300)}
-                  <span className="typing-cursor" />
-                </pre>
-              ) : (
-                <span>{item.content}</span>
-              )}
-            </div>
-          </div>
-        </div>
-      ))}
-      <div ref={feedEndRef} />
-    </div>
-  )
-}

fronend/src/components/ChatInterface.jsx DELETED Viewed

@@ -1,195 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react'
-import { Send, Sparkles, Loader2 } from 'lucide-react'
-const APP_TYPES = [
-  { id: 'saas', label: 'SaaS Platform', emoji: '💼' },
-  { id: 'ecommerce', label: 'E-Commerce', emoji: '🛒' },
-  { id: 'marketplace', label: 'Marketplace', emoji: '🏪' },
-  { id: 'social', label: 'Social Network', emoji: '👥' },
-  { id: 'education', label: 'EdTech / LMS', emoji: '📚' },
-  { id: 'health', label: 'HealthTech', emoji: '🏥' },
-  { id: 'finance', label: 'FinTech', emoji: '💰' },
-  { id: 'custom', label: 'Custom', emoji: '⚡' },
-]
-const EXAMPLE_PROMPTS = [
-  "Build a project management SaaS like Linear with team workspaces, sprint boards, and issue tracking",
-  "Create an online course marketplace where instructors can sell video courses with progress tracking",
-  "Build a subscription-based fitness app with workout plans, progress photos, and meal tracking",
-]
-export default function ChatInterface({ messages, onGenerate, onFix, status }) {
-  const [input, setInput] = useState('')
-  const [appType, setAppType] = useState('saas')
-  const [showTypes, setShowTypes] = useState(false)
-  const chatEndRef = useRef(null)
-  const inputRef = useRef(null)
-  const isGenerating = !['idle', 'completed', 'error'].includes(status)
-  useEffect(() => {
-    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [messages])
-  const handleSubmit = (e) => {
-    e.preventDefault()
-    if (!input.trim() || isGenerating) return
-    onGenerate(input.trim(), appType)
-    setInput('')
-  }
-  const handleExampleClick = (prompt) => {
-    setInput(prompt)
-    inputRef.current?.focus()
-  }
-  return (
-    <div className="flex flex-col h-full">
-      {/* Messages area */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-4">
-        {messages.length === 0 ? (
-          /* Welcome screen */
-          <div className="flex flex-col items-center justify-center h-full text-center px-4">
-            <div className="text-5xl mb-4">🚀</div>
-            <h2 className="text-xl font-bold gradient-text mb-2">
-              Welcome to Nexus Builder
-            </h2>
-            <p className="text-sm mb-6" style={{ color: 'var(--text-secondary)' }}>
-              Describe your app idea and 4 AI agents will build it for you —
-              complete with auth, payments, analytics, and admin panel.
-            </p>
-            {/* App type selector */}
-            <div className="w-full mb-4">
-              <button
-                onClick={() => setShowTypes(!showTypes)}
-                className="w-full text-left text-xs font-medium px-3 py-2 rounded-lg border transition-all"
-                style={{
-                  borderColor: 'var(--border)',
-                  background: 'var(--surface)',
-                  color: 'var(--text-secondary)',
-                }}
-              >
-                App Type: {APP_TYPES.find(t => t.id === appType)?.emoji}{' '}
-                {APP_TYPES.find(t => t.id === appType)?.label}
-              </button>
-              {showTypes && (
-                <div className="mt-1 grid grid-cols-2 gap-1 p-2 rounded-lg border animate-fade-in"
-                  style={{ background: 'var(--surface)', borderColor: 'var(--border)' }}>
-                  {APP_TYPES.map(type => (
-                    <button
-                      key={type.id}
-                      onClick={() => { setAppType(type.id); setShowTypes(false) }}
-                      className="text-left text-xs px-2.5 py-2 rounded-md transition-all hover:scale-[1.02]"
-                      style={{
-                        background: appType === type.id ? 'var(--accent)22' : 'transparent',
-                        color: appType === type.id ? 'var(--accent)' : 'var(--text-secondary)',
-                      }}
-                    >
-                      {type.emoji} {type.label}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-            {/* Example prompts */}
-            <div className="w-full space-y-2">
-              <p className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
-                Try an example:
-              </p>
-              {EXAMPLE_PROMPTS.map((prompt, i) => (
-                <button
-                  key={i}
-                  onClick={() => handleExampleClick(prompt)}
-                  className="w-full text-left text-xs p-3 rounded-lg border transition-all hover:scale-[1.01]"
-                  style={{
-                    borderColor: 'var(--border)',
-                    background: 'var(--surface)',
-                    color: 'var(--text-secondary)',
-                  }}
-                >
-                  <Sparkles className="w-3 h-3 inline mr-1.5" style={{ color: 'var(--accent)' }} />
-                  {prompt}
-                </button>
-              ))}
-            </div>
-          </div>
-        ) : (
-          /* Chat messages */
-          messages.map((msg, i) => (
-            <div
-              key={i}
-              className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-slide-up`}
-            >
-              <div
-                className="max-w-[85%] rounded-2xl px-4 py-3 text-sm leading-relaxed"
-                style={{
-                  background: msg.role === 'user' ? 'var(--accent)' : 'var(--surface)',
-                  color: msg.role === 'user' ? 'white' : 'var(--text-primary)',
-                  border: msg.role === 'user' ? 'none' : '1px solid var(--border)',
-                }}
-              >
-                <pre className="whitespace-pre-wrap font-sans">{msg.content}</pre>
-              </div>
-            </div>
-          ))
-        )}
-        {isGenerating && (
-          <div className="flex justify-start animate-slide-up">
-            <div className="rounded-2xl px-4 py-3 text-sm flex items-center gap-2"
-              style={{ background: 'var(--surface)', border: '1px solid var(--border)' }}>
-              <Loader2 className="w-4 h-4 animate-spin" style={{ color: 'var(--accent)' }} />
-              <span style={{ color: 'var(--text-secondary)' }}>Agents are working...</span>
-              <span className="typing-cursor" />
-            </div>
-          </div>
-        )}
-        <div ref={chatEndRef} />
-      </div>
-      {/* Input area */}
-      <form onSubmit={handleSubmit} className="p-3 border-t" style={{ borderColor: 'var(--border)' }}>
-        <div className="flex items-end gap-2">
-          <div className="flex-1 relative">
-            <textarea
-              ref={inputRef}
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                  e.preventDefault()
-                  handleSubmit(e)
-                }
-              }}
-              placeholder="Describe the app you want to build..."
-              rows={2}
-              className="w-full resize-none rounded-xl px-4 py-3 text-sm outline-none transition-all"
-              style={{
-                background: 'var(--surface)',
-                color: 'var(--text-primary)',
-                border: '1px solid var(--border)',
-              }}
-              disabled={isGenerating}
-            />
-          </div>
-          <button
-            type="submit"
-            disabled={!input.trim() || isGenerating}
-            className="p-3 rounded-xl transition-all hover:scale-105 disabled:opacity-40 disabled:hover:scale-100"
-            style={{
-              background: 'var(--accent)',
-              color: 'white',
-            }}
-          >
-            {isGenerating
-              ? <Loader2 className="w-5 h-5 animate-spin" />
-              : <Send className="w-5 h-5" />}
-          </button>
-        </div>
-      </form>
-    </div>
-  )
-}

fronend/src/components/CodeView.jsx DELETED Viewed

@@ -1,128 +0,0 @@
-import React, { useMemo } from 'react'
-import { Copy, Check } from 'lucide-react'
-// Basic syntax highlighting without external deps
-function highlightCode(code, ext) {
-  if (!code) return ''
-  // Simple keyword-based highlighting
-  const keywords = {
-    js: /\b(const|let|var|function|return|if|else|for|while|class|import|export|from|default|async|await|try|catch|throw|new|this|typeof|instanceof|switch|case|break|continue)\b/g,
-    py: /\b(def|class|import|from|return|if|elif|else|for|while|try|except|raise|with|as|yield|async|await|lambda|pass|break|continue|and|or|not|in|is|True|False|None)\b/g,
-    sql: /\b(SELECT|FROM|WHERE|INSERT|INTO|VALUES|UPDATE|SET|DELETE|CREATE|TABLE|ALTER|DROP|INDEX|JOIN|LEFT|RIGHT|INNER|OUTER|ON|AND|OR|NOT|NULL|PRIMARY|KEY|FOREIGN|REFERENCES|CASCADE|UNIQUE|DEFAULT|CHECK|CONSTRAINT|GRANT|REVOKE|BEGIN|COMMIT|ROLLBACK|TRIGGER|FUNCTION|PROCEDURE|VIEW|ENABLE|ROW|LEVEL|SECURITY|POLICY|USING|WITH)\b/gi,
-  }
-  const lang = ['jsx', 'tsx', 'js', 'ts'].includes(ext) ? 'js'
-    : ['py'].includes(ext) ? 'py'
-    : ['sql'].includes(ext) ? 'sql'
-    : 'js'
-  let highlighted = code
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-  // Strings
-  highlighted = highlighted.replace(
-    /(["'`])(?:(?=(\\?))\2[\s\S])*?\1/g,
-    '<span style="color:#22D3A8">$&</span>'
-  )
-  // Comments
-  highlighted = highlighted.replace(
-    /(\/\/.*$|#.*$)/gm,
-    '<span style="color:#555577">$&</span>'
-  )
-  highlighted = highlighted.replace(
-    /(\/\*[\s\S]*?\*\/|--.*$)/gm,
-    '<span style="color:#555577">$&</span>'
-  )
-  // Keywords
-  if (keywords[lang]) {
-    highlighted = highlighted.replace(
-      keywords[lang],
-      '<span style="color:#6C63FF;font-weight:600">$&</span>'
-    )
-  }
-  // Numbers
-  highlighted = highlighted.replace(
-    /\b(\d+\.?\d*)\b/g,
-    '<span style="color:#FFB547">$&</span>'
-  )
-  return highlighted
-}
-export default function CodeView({ content, fileName }) {
-  const [copied, setCopied] = React.useState(false)
-  const ext = fileName?.split('.').pop()?.toLowerCase() || ''
-  const highlighted = useMemo(
-    () => highlightCode(content || '', ext),
-    [content, ext]
-  )
-  const lineCount = (content || '').split('\n').length
-  const handleCopy = async () => {
-    if (!content) return
-    await navigator.clipboard.writeText(content)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
-  if (!content) {
-    return (
-      <div className="w-full h-full flex items-center justify-center">
-        <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-          Select a file from the tree to view its code
-        </p>
-      </div>
-    )
-  }
-  return (
-    <div className="w-full h-full flex flex-col rounded-lg overflow-hidden border"
-      style={{ borderColor: 'var(--border)' }}>
-      {/* File header */}
-      <div className="flex items-center justify-between px-4 py-2 border-b"
-        style={{ background: 'var(--bg)', borderColor: 'var(--border)' }}>
-        <span className="text-xs font-mono" style={{ color: 'var(--text-secondary)' }}>
-          {fileName}
-        </span>
-        <div className="flex items-center gap-2">
-          <span className="text-[10px]" style={{ color: 'var(--text-secondary)' }}>
-            {lineCount} lines
-          </span>
-          <button
-            onClick={handleCopy}
-            className="p-1 rounded transition-all hover:scale-110"
-            style={{ color: copied ? 'var(--success)' : 'var(--text-secondary)' }}
-            title="Copy code"
-          >
-            {copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
-          </button>
-        </div>
-      </div>
-      {/* Code content */}
-      <div className="flex-1 overflow-auto" style={{ background: '#0D0D14' }}>
-        <div className="flex">
-          {/* Line numbers */}
-          <div className="flex-shrink-0 text-right pr-4 pl-4 py-3 select-none"
-            style={{ color: '#333355', fontSize: '12px', lineHeight: '1.6' }}>
-            {Array.from({ length: lineCount }, (_, i) => (
-              <div key={i}>{i + 1}</div>
-            ))}
-          </div>
-          {/* Code */}
-          <pre className="flex-1 py-3 pr-4 overflow-x-auto"
-            style={{ fontSize: '12px', lineHeight: '1.6' }}>
-            <code dangerouslySetInnerHTML={{ __html: highlighted }} />
-          </pre>
-        </div>
-      </div>
-    </div>
-  )
-}

fronend/src/components/ControlPanel.jsx DELETED Viewed

@@ -1,84 +0,0 @@
-import React, { useState } from 'react'
-import ChatInterface from './ChatInterface'
-import AgentFeed from './AgentFeed'
-import FileTree from './FileTree'
-import { MessageSquare, Activity, FolderTree } from 'lucide-react'
-const TABS = [
-  { id: 'chat', label: 'Chat', icon: MessageSquare },
-  { id: 'agents', label: 'Agents', icon: Activity },
-  { id: 'files', label: 'Files', icon: FolderTree },
-]
-export default function ControlPanel({
-  messages, agentFeed, fileTree, files, selectedFile,
-  onSelectFile, onGenerate, onFix, status
-}) {
-  const [activeTab, setActiveTab] = useState('chat')
-  return (
-    <div className="w-full md:w-[420px] lg:w-[480px] flex flex-col border-r"
-      style={{ borderColor: 'var(--border)', background: 'var(--bg)' }}>
-      {/* Tab bar */}
-      <div className="flex border-b" style={{ borderColor: 'var(--border)' }}>
-        {TABS.map(tab => {
-          const Icon = tab.icon
-          const isActive = activeTab === tab.id
-          return (
-            <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
-              className="flex-1 flex items-center justify-center gap-2 py-2.5 text-xs font-medium transition-all relative"
-              style={{
-                color: isActive ? 'var(--accent)' : 'var(--text-secondary)',
-                background: isActive ? 'var(--surface)' : 'transparent',
-              }}
-            >
-              <Icon className="w-3.5 h-3.5" />
-              {tab.label}
-              {tab.id === 'agents' && agentFeed.length > 0 && (
-                <span className="ml-1 w-4 h-4 text-[10px] flex items-center justify-center rounded-full"
-                  style={{ background: 'var(--accent)33', color: 'var(--accent)' }}>
-                  {agentFeed.length}
-                </span>
-              )}
-              {tab.id === 'files' && fileTree.length > 0 && (
-                <span className="ml-1 w-4 h-4 text-[10px] flex items-center justify-center rounded-full"
-                  style={{ background: 'var(--success)33', color: 'var(--success)' }}>
-                  {fileTree.length}
-                </span>
-              )}
-              {isActive && (
-                <div className="absolute bottom-0 left-0 right-0 h-0.5"
-                  style={{ background: 'var(--accent)' }} />
-              )}
-            </button>
-          )
-        })}
-      </div>
-      {/* Tab content */}
-      <div className="flex-1 overflow-hidden">
-        {activeTab === 'chat' && (
-          <ChatInterface
-            messages={messages}
-            onGenerate={onGenerate}
-            onFix={onFix}
-            status={status}
-          />
-        )}
-        {activeTab === 'agents' && (
-          <AgentFeed feed={agentFeed} />
-        )}
-        {activeTab === 'files' && (
-          <FileTree
-            tree={fileTree}
-            files={files}
-            selectedFile={selectedFile}
-            onSelect={onSelectFile}
-          />
-        )}
-      </div>
-    </div>
-  )
-}

fronend/src/components/FileTree.jsx DELETED Viewed

@@ -1,141 +0,0 @@
-import React, { useMemo } from 'react'
-import {
-  Folder, FolderOpen, FileCode2, FileJson, FileType2,
-  Database, FileText, Settings
-} from 'lucide-react'
-const FILE_ICONS = {
-  jsx: { icon: FileCode2, color: '#61DAFB' },
-  tsx: { icon: FileCode2, color: '#3178C6' },
-  js: { icon: FileCode2, color: '#F7DF1E' },
-  ts: { icon: FileCode2, color: '#3178C6' },
-  py: { icon: FileCode2, color: '#3776AB' },
-  css: { icon: FileType2, color: '#1572B6' },
-  html: { icon: FileCode2, color: '#E34F26' },
-  json: { icon: FileJson, color: '#A8B9CC' },
-  sql: { icon: Database, color: '#336791' },
-  md: { icon: FileText, color: '#083FA1' },
-  yml: { icon: Settings, color: '#CB171E' },
-  yaml: { icon: Settings, color: '#CB171E' },
-  env: { icon: Settings, color: '#ECD53F' },
-  txt: { icon: FileText, color: '#8888AA' },
-}
-function buildTree(paths) {
-  const root = {}
-  for (const path of paths) {
-    const parts = path.split('/')
-    let current = root
-    for (let i = 0; i < parts.length; i++) {
-      const part = parts[i]
-      if (i === parts.length - 1) {
-        current[part] = path // leaf = full path
-      } else {
-        if (!current[part] || typeof current[part] === 'string') {
-          current[part] = {}
-        }
-        current = current[part]
-      }
-    }
-  }
-  return root
-}
-function TreeNode({ name, node, selectedFile, onSelect, depth = 0 }) {
-  const [open, setOpen] = React.useState(depth < 2)
-  const isFile = typeof node === 'string'
-  const isSelected = isFile && node === selectedFile
-  const ext = isFile ? name.split('.').pop()?.toLowerCase() : ''
-  const fileConfig = FILE_ICONS[ext] || { icon: FileText, color: 'var(--text-secondary)' }
-  const Icon = isFile ? fileConfig.icon : (open ? FolderOpen : Folder)
-  const iconColor = isFile ? fileConfig.color : 'var(--accent)'
-  if (isFile) {
-    return (
-      <button
-        onClick={() => onSelect(node)}
-        className="w-full flex items-center gap-2 py-1 px-2 rounded text-xs transition-all hover:scale-[1.01] text-left"
-        style={{
-          paddingLeft: `${depth * 16 + 8}px`,
-          background: isSelected ? 'var(--accent)15' : 'transparent',
-          color: isSelected ? 'var(--accent)' : 'var(--text-secondary)',
-        }}
-      >
-        <Icon className="w-3.5 h-3.5 flex-shrink-0" style={{ color: iconColor }} />
-        <span className="truncate font-mono">{name}</span>
-      </button>
-    )
-  }
-  const entries = Object.entries(node).sort(([a, av], [b, bv]) => {
-    const aIsFile = typeof av === 'string'
-    const bIsFile = typeof bv === 'string'
-    if (aIsFile !== bIsFile) return aIsFile ? 1 : -1
-    return a.localeCompare(b)
-  })
-  return (
-    <div>
-      <button
-        onClick={() => setOpen(!open)}
-        className="w-full flex items-center gap-2 py-1 px-2 rounded text-xs font-medium transition-all text-left"
-        style={{
-          paddingLeft: `${depth * 16 + 8}px`,
-          color: 'var(--text-primary)',
-        }}
-      >
-        <Icon className="w-3.5 h-3.5 flex-shrink-0" style={{ color: iconColor }} />
-        <span className="truncate">{name}</span>
-      </button>
-      {open && entries.map(([childName, childNode]) => (
-        <TreeNode
-          key={childName}
-          name={childName}
-          node={childNode}
-          selectedFile={selectedFile}
-          onSelect={onSelect}
-          depth={depth + 1}
-        />
-      ))}
-    </div>
-  )
-}
-export default function FileTree({ tree, files, selectedFile, onSelect }) {
-  const treeStructure = useMemo(() => buildTree(tree), [tree])
-  if (tree.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center h-full text-center px-6">
-        <Folder className="w-12 h-12 mb-3" style={{ color: 'var(--text-secondary)', opacity: 0.4 }} />
-        <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-          Generated files will appear here.
-        </p>
-      </div>
-    )
-  }
-  return (
-    <div className="h-full overflow-y-auto py-2">
-      <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider"
-        style={{ color: 'var(--text-secondary)' }}>
-        Project Files ({tree.length})
-      </div>
-      {Object.entries(treeStructure).sort(([a, av], [b, bv]) => {
-        const aIsFile = typeof av === 'string'
-        const bIsFile = typeof bv === 'string'
-        if (aIsFile !== bIsFile) return aIsFile ? 1 : -1
-        return a.localeCompare(b)
-      }).map(([name, node]) => (
-        <TreeNode
-          key={name}
-          name={name}
-          node={node}
-          selectedFile={selectedFile}
-          onSelect={onSelect}
-        />
-      ))}
-    </div>
-  )
-}

fronend/src/components/Header.jsx DELETED Viewed

@@ -1,80 +0,0 @@
-import React from 'react'
-import { useTheme } from './ThemeProvider'
-import { Sun, Moon, Settings, Zap } from 'lucide-react'
-const AGENT_LABELS = {
-  research: { icon: '🌐', label: 'Research' },
-  orchestrator: { icon: '🧠', label: 'Orchestrator' },
-  frontend: { icon: '🎨', label: 'Frontend' },
-  backend: { icon: '🔐', label: 'Backend' },
-}
-const STATUS_COLORS = {
-  idle: 'bg-gray-500',
-  active: 'bg-cyan-400 agent-active',
-  done: 'bg-emerald-400',
-  error: 'bg-red-400',
-}
-export default function Header({ agents, sessionId, status }) {
-  const { theme, toggleTheme } = useTheme()
-  return (
-    <header className="glass flex items-center justify-between px-4 py-2.5 border-b z-50"
-      style={{ borderColor: 'var(--border)' }}>
-      {/* Logo */}
-      <div className="flex items-center gap-3">
-        <div className="flex items-center gap-2">
-          <div className="relative">
-            <Zap className="w-6 h-6" style={{ color: 'var(--accent)' }} />
-            <div className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-emerald-400 agent-active" />
-          </div>
-          <span className="text-xl font-bold tracking-tight font-mono gradient-text">
-            NEXUS
-          </span>
-        </div>
-        <span className="text-xs px-2 py-0.5 rounded-full font-medium"
-          style={{ background: 'var(--accent)22', color: 'var(--accent)' }}>
-          BUILDER
-        </span>
-      </div>
-      {/* Agent Status Indicators */}
-      <div className="hidden md:flex items-center gap-4">
-        {Object.entries(agents).map(([key, agent]) => (
-          <div key={key} className="flex items-center gap-2 text-xs" title={`${agent.name}: ${agent.status}`}>
-            <span>{AGENT_LABELS[key]?.icon}</span>
-            <div className={`w-2 h-2 rounded-full ${STATUS_COLORS[agent.status] || STATUS_COLORS.idle}`} />
-            <span style={{ color: 'var(--text-secondary)' }}>
-              {AGENT_LABELS[key]?.label}
-            </span>
-          </div>
-        ))}
-      </div>
-      {/* Right controls */}
-      <div className="flex items-center gap-3">
-        {sessionId && (
-          <span className="text-xs font-mono px-2 py-1 rounded"
-            style={{ background: 'var(--surface)', color: 'var(--text-secondary)', border: '1px solid var(--border)' }}>
-            {sessionId}
-          </span>
-        )}
-        <button
-          onClick={toggleTheme}
-          className="p-2 rounded-lg transition-all hover:scale-110"
-          style={{ color: 'var(--text-secondary)' }}
-          title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
-        >
-          {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-        </button>
-        <button className="p-2 rounded-lg transition-all"
-          style={{ color: 'var(--text-secondary)' }}>
-          <Settings className="w-4 h-4" />
-        </button>
-      </div>
-    </header>
-  )
-}

fronend/src/components/LivePreview.jsx DELETED Viewed

@@ -1,159 +0,0 @@
-import React, { useState } from 'react'
-import SystemTabs from './SystemTabs'
-import CodeView from './CodeView'
-import {
-  Eye, Code2, Download, Monitor, Tablet, Smartphone,
-  ExternalLink, RefreshCw, Maximize2
-} from 'lucide-react'
-const VIEWPORT_SIZES = {
-  desktop: { width: '100%', label: 'Desktop', icon: Monitor },
-  tablet: { width: '768px', label: 'Tablet', icon: Tablet },
-  mobile: { width: '375px', label: 'Mobile', icon: Smartphone },
-}
-export default function LivePreview({
-  sessionId, files, selectedFile, previewSystem, onChangeSystem,
-  viewMode, onChangeViewMode, onExport, status
-}) {
-  const [viewport, setViewport] = useState('desktop')
-  const [iframeKey, setIframeKey] = useState(0)
-  const previewUrl = sessionId
-    ? (previewSystem === 'preview'
-      ? `/api/preview/${sessionId}`
-      : `/api/preview/${sessionId}/${previewSystem}`)
-    : null
-  const selectedFileContent = selectedFile && files[selectedFile]
-    ? files[selectedFile]
-    : null
-  const showCode = viewMode === 'code' || selectedFileContent
-  return (
-    <div className="flex-1 flex flex-col overflow-hidden" style={{ background: 'var(--bg)' }}>
-      {/* System tabs */}
-      <SystemTabs active={previewSystem} onChange={onChangeSystem} />
-      {/* Toolbar */}
-      <div className="flex items-center justify-between px-3 py-2 border-b"
-        style={{ borderColor: 'var(--border)' }}>
-        <div className="flex items-center gap-1">
-          {/* View mode toggle */}
-          <button
-            onClick={() => onChangeViewMode('preview')}
-            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all"
-            style={{
-              background: viewMode === 'preview' ? 'var(--accent)15' : 'transparent',
-              color: viewMode === 'preview' ? 'var(--accent)' : 'var(--text-secondary)',
-            }}
-          >
-            <Eye className="w-3.5 h-3.5" />
-            Preview
-          </button>
-          <button
-            onClick={() => onChangeViewMode('code')}
-            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all"
-            style={{
-              background: viewMode === 'code' ? 'var(--accent)15' : 'transparent',
-              color: viewMode === 'code' ? 'var(--accent)' : 'var(--text-secondary)',
-            }}
-          >
-            <Code2 className="w-3.5 h-3.5" />
-            Code
-          </button>
-        </div>
-        <div className="flex items-center gap-1">
-          {/* Viewport toggle */}
-          {viewMode === 'preview' && Object.entries(VIEWPORT_SIZES).map(([key, val]) => {
-            const Icon = val.icon
-            return (
-              <button
-                key={key}
-                onClick={() => setViewport(key)}
-                className="p-1.5 rounded-md transition-all"
-                style={{
-                  color: viewport === key ? 'var(--accent)' : 'var(--text-secondary)',
-                  background: viewport === key ? 'var(--accent)11' : 'transparent',
-                }}
-                title={val.label}
-              >
-                <Icon className="w-3.5 h-3.5" />
-              </button>
-            )
-          })}
-          {/* Refresh */}
-          <button
-            onClick={() => setIframeKey(k => k + 1)}
-            className="p-1.5 rounded-md transition-all"
-            style={{ color: 'var(--text-secondary)' }}
-            title="Refresh preview"
-          >
-            <RefreshCw className="w-3.5 h-3.5" />
-          </button>
-          {/* Export */}
-          {sessionId && (
-            <button
-              onClick={onExport}
-              className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all hover:scale-105"
-              style={{ background: 'var(--accent)', color: 'white' }}
-            >
-              <Download className="w-3.5 h-3.5" />
-              Export ZIP
-            </button>
-          )}
-        </div>
-      </div>
-      {/* Preview area */}
-      <div className="flex-1 overflow-hidden flex items-center justify-center p-4"
-        style={{ background: viewMode === 'code' ? 'var(--surface)' : '#0D0D12' }}>
-        {showCode ? (
-          <CodeView
-            content={selectedFileContent || _getFirstFile(files)}
-            fileName={selectedFile || Object.keys(files)[0] || ''}
-          />
-        ) : previewUrl ? (
-          <div
-            className="h-full rounded-lg overflow-hidden border transition-all duration-300"
-            style={{
-              width: VIEWPORT_SIZES[viewport].width,
-              maxWidth: '100%',
-              borderColor: 'var(--border)',
-            }}
-          >
-            <iframe
-              key={iframeKey}
-              src={previewUrl}
-              className="w-full h-full border-0"
-              style={{ background: 'white', borderRadius: '8px' }}
-              title="App Preview"
-              sandbox="allow-scripts allow-same-origin"
-            />
-          </div>
-        ) : (
-          /* Empty state */
-          <div className="text-center">
-            <div className="text-6xl mb-4 opacity-20">🖥️</div>
-            <h3 className="text-lg font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
-              Live Preview
-            </h3>
-            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
-              Your generated app will be previewed here in real-time.
-              <br />Start by describing your app idea in the chat.
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-function _getFirstFile(files) {
-  const keys = Object.keys(files)
-  return keys.length > 0 ? files[keys[0]] : ''
-}

fronend/src/components/StatusBar.jsx DELETED Viewed

@@ -1,104 +0,0 @@
-import React from 'react'
-import { Wifi, WifiOff, AlertTriangle, Files, Cpu } from 'lucide-react'
-const STATUS_LABELS = {
-  idle: { label: 'Ready', color: 'var(--text-secondary)' },
-  starting: { label: 'Starting...', color: 'var(--warning)' },
-  connected: { label: 'Connected', color: 'var(--success)' },
-  researching: { label: '🔍 Researching...', color: 'var(--accent-2)' },
-  orchestrating: { label: '🧠 Creating Blueprint...', color: 'var(--accent)' },
-  building: { label: '🚀 Building...', color: 'var(--accent)' },
-  building_frontend: { label: '🎨 Building Frontend...', color: 'var(--success)' },
-  building_backend: { label: '🔐 Building Backend...', color: 'var(--warning)' },
-  merging: { label: '📦 Merging...', color: 'var(--accent-2)' },
-  fixing: { label: '🔧 Fixing...', color: 'var(--warning)' },
-  completed: { label: '✅ Complete', color: 'var(--success)' },
-  error: { label: '❌ Error', color: 'var(--error)' },
-}
-export default function StatusBar({ status, sessionId, agents, errorCount, fileCount }) {
-  const statusConfig = STATUS_LABELS[status] || STATUS_LABELS.idle
-  const isActive = !['idle', 'completed', 'error'].includes(status)
-  return (
-    <footer
-      className="flex items-center justify-between px-4 py-1.5 text-[11px] border-t"
-      style={{
-        borderColor: 'var(--border)',
-        background: 'var(--surface)',
-        color: 'var(--text-secondary)',
-      }}
-    >
-      {/* Left: status */}
-      <div className="flex items-center gap-3">
-        <div className="flex items-center gap-1.5">
-          {isActive ? (
-            <Wifi className="w-3 h-3" style={{ color: 'var(--success)' }} />
-          ) : (
-            <WifiOff className="w-3 h-3" />
-          )}
-          <span style={{ color: statusConfig.color, fontWeight: 500 }}>
-            {statusConfig.label}
-          </span>
-        </div>
-        {/* Build progress */}
-        {isActive && (
-          <div className="hidden sm:flex items-center gap-1">
-            {['researching', 'orchestrating', 'building', 'merging'].map((step, i) => {
-              const stepStatuses = {
-                researching: ['researching'],
-                orchestrating: ['orchestrating'],
-                building: ['building', 'building_frontend', 'building_backend'],
-                merging: ['merging', 'completed'],
-              }
-              const isCurrentOrPast = stepStatuses[step]?.includes(status) ||
-                ['researching', 'orchestrating', 'building', 'merging'].indexOf(step) <
-                ['researching', 'orchestrating', 'building', 'merging'].findIndex(s =>
-                  stepStatuses[s]?.includes(status)
-                )
-              return (
-                <React.Fragment key={step}>
-                  <div
-                    className="w-1.5 h-1.5 rounded-full"
-                    style={{
-                      background: stepStatuses[step]?.includes(status)
-                        ? 'var(--accent)'
-                        : isCurrentOrPast ? 'var(--success)' : 'var(--border)',
-                    }}
-                  />
-                  {i < 3 && (
-                    <div className="w-4 h-px" style={{ background: 'var(--border)' }} />
-                  )}
-                </React.Fragment>
-              )
-            })}
-          </div>
-        )}
-      </div>
-      {/* Right: metrics */}
-      <div className="flex items-center gap-4">
-        {fileCount > 0 && (
-          <div className="flex items-center gap-1">
-            <Files className="w-3 h-3" />
-            <span>{fileCount} files</span>
-          </div>
-        )}
-        {errorCount > 0 && (
-          <div className="flex items-center gap-1" style={{ color: 'var(--error)' }}>
-            <AlertTriangle className="w-3 h-3" />
-            <span>{errorCount} errors</span>
-          </div>
-        )}
-        <div className="flex items-center gap-1">
-          <Cpu className="w-3 h-3" />
-          <span>HuggingFace CPU</span>
-        </div>
-        {sessionId && (
-          <span className="font-mono">{sessionId}</span>
-        )}
-      </div>
-    </footer>
-  )
-}

fronend/src/components/SystemTabs.jsx DELETED Viewed

@@ -1,37 +0,0 @@
-import React from 'react'
-import { Layout, Globe, Megaphone, BarChart3, Shield } from 'lucide-react'
-const SYSTEMS = [
-  { id: 'preview', label: 'Overview', icon: Layout },
-  { id: 'client_portal', label: 'Portal', icon: Layout },
-  { id: 'public_landing', label: 'Landing', icon: Globe },
-  { id: 'marketing_cms', label: 'Marketing', icon: Megaphone },
-  { id: 'analytics_dashboard', label: 'Analytics', icon: BarChart3 },
-  { id: 'admin_panel', label: 'Admin', icon: Shield },
-]
-export default function SystemTabs({ active, onChange }) {
-  return (
-    <div className="flex items-center gap-0.5 overflow-x-auto px-2 py-1.5 border-b"
-      style={{ borderColor: 'var(--border)' }}>
-      {SYSTEMS.map(sys => {
-        const Icon = sys.icon
-        const isActive = active === sys.id
-        return (
-          <button
-            key={sys.id}
-            onClick={() => onChange(sys.id)}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap transition-all"
-            style={{
-              background: isActive ? 'var(--accent)15' : 'transparent',
-              color: isActive ? 'var(--accent)' : 'var(--text-secondary)',
-            }}
-          >
-            <Icon className="w-3.5 h-3.5" />
-            {sys.label}
-          </button>
-        )
-      })}
-    </div>
-  )
-}

fronend/src/components/ThemeProvider.jsx DELETED Viewed

@@ -1,31 +0,0 @@
-import React, { createContext, useContext, useState, useEffect } from 'react'
-const ThemeContext = createContext()
-export function ThemeProvider({ children }) {
-  const [theme, setTheme] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem('nexus-theme') || 'dark'
-    }
-    return 'dark'
-  })
-  useEffect(() => {
-    document.documentElement.setAttribute('data-theme', theme)
-    localStorage.setItem('nexus-theme', theme)
-  }, [theme])
-  const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark')
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  )
-}
-export function useTheme() {
-  const ctx = useContext(ThemeContext)
-  if (!ctx) throw new Error('useTheme must be used within ThemeProvider')
-  return ctx
-}

fronend/src/hooks/useSSE.js DELETED Viewed

@@ -1,61 +0,0 @@
-import { useRef, useCallback } from 'react'
-export function useSSE(onEvent) {
-  const eventSourceRef = useRef(null)
-  const connect = useCallback((sessionId) => {
-    // Close existing connection
-    if (eventSourceRef.current) {
-      eventSourceRef.current.close()
-    }
-    const url = `/api/stream/${sessionId}`
-    const eventSource = new EventSource(url)
-    eventSourceRef.current = eventSource
-    const eventTypes = [
-      'agent_start', 'token', 'code_block', 'agent_done',
-      'error', 'file_created', 'done'
-    ]
-    eventTypes.forEach(type => {
-      eventSource.addEventListener(type, (event) => {
-        onEvent({ type, data: event.data })
-      })
-    })
-    // Also handle generic messages
-    eventSource.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data)
-        onEvent({ type: data.event_type || 'message', data: event.data })
-      } catch {
-        // ignore parse errors
-      }
-    }
-    eventSource.onerror = (err) => {
-      console.error('SSE error:', err)
-      // Don't auto-reconnect on error to avoid infinite loops
-      if (eventSource.readyState === EventSource.CLOSED) {
-        onEvent({
-          type: 'error',
-          data: JSON.stringify({
-            event_type: 'error',
-            agent: 'system',
-            content: 'Connection lost. Check the status and try again.'
-          })
-        })
-      }
-    }
-  }, [onEvent])
-  const disconnect = useCallback(() => {
-    if (eventSourceRef.current) {
-      eventSourceRef.current.close()
-      eventSourceRef.current = null
-    }
-  }, [])
-  return { connect, disconnect }
-}

fronend/src/hooks/useTheme.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- // Re-exported from ThemeProvider for convenience
2	- export { useTheme } from '../components/ThemeProvider'

fronend/src/index.css DELETED Viewed

@@ -1,126 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-:root {
-  --bg: #0A0A0F;
-  --surface: #111118;
-  --border: #1E1E2E;
-  --accent: #6C63FF;
-  --accent-2: #00D9FF;
-  --text-primary: #F0F0FF;
-  --text-secondary: #8888AA;
-  --success: #22D3A8;
-  --error: #FF4D6D;
-  --warning: #FFB547;
-}
-[data-theme="light"] {
-  --bg: #F8F8FC;
-  --surface: #FFFFFF;
-  --border: #E0E0EF;
-  --accent: #5B53E8;
-  --accent-2: #0099CC;
-  --text-primary: #0A0A1A;
-  --text-secondary: #666688;
-  --success: #16A085;
-  --error: #E74C6F;
-  --warning: #E6A030;
-}
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-html, body, #root {
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-body {
-  font-family: 'Inter', system-ui, sans-serif;
-  background-color: var(--bg);
-  color: var(--text-primary);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: var(--text-secondary);
-}
-/* Code blocks */
-pre, code {
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-}
-/* Selection */
-::selection {
-  background: var(--accent);
-  color: white;
-}
-/* Focus styles */
-*:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-/* Glassmorphism utility */
-.glass {
-  background: rgba(17, 17, 24, 0.7);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--border);
-}
-[data-theme="light"] .glass {
-  background: rgba(255, 255, 255, 0.75);
-}
-/* Agent status dots */
-@keyframes agentPulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.5; transform: scale(1.3); }
-}
-.agent-active {
-  animation: agentPulse 1.5s ease-in-out infinite;
-}
-/* Gradient text */
-.gradient-text {
-  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-/* Typing indicator */
-@keyframes blink {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0; }
-}
-.typing-cursor {
-  display: inline-block;
-  width: 2px;
-  height: 1.1em;
-  background: var(--accent);
-  margin-left: 2px;
-  animation: blink 1s infinite;
-  vertical-align: text-bottom;
-}

fronend/src/main.jsx DELETED Viewed

@@ -1,13 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import { ThemeProvider } from './components/ThemeProvider'
-import './index.css'
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <ThemeProvider>
-      <App />
-    </ThemeProvider>
-  </React.StrictMode>,
-)

fronend/src/utils/api.js DELETED Viewed

@@ -1,80 +0,0 @@
-const BASE = ''  // Same origin
-export async function generateProject(prompt, appType = 'saas', systems = null) {
-  const res = await fetch(`${BASE}/api/generate`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ prompt, app_type: appType, systems }),
-  })
-  if (!res.ok) {
-    const err = await res.text()
-    throw new Error(`Generation failed: ${err}`)
-  }
-  return res.json()
-}
-export async function getProjectStatus(sessionId) {
-  const res = await fetch(`${BASE}/api/status/${sessionId}`)
-  if (!res.ok) throw new Error('Failed to get status')
-  return res.json()
-}
-export async function getProjectFiles(sessionId) {
-  const res = await fetch(`${BASE}/api/files/${sessionId}`)
-  if (!res.ok) throw new Error('Failed to get files')
-  return res.json()
-}
-export async function getFileContent(sessionId, path) {
-  const res = await fetch(`${BASE}/api/file/${sessionId}/${path}`)
-  if (!res.ok) throw new Error('Failed to get file')
-  return res.json()
-}
-export async function exportProject(sessionId) {
-  const res = await fetch(`${BASE}/api/export/${sessionId}`)
-  if (!res.ok) throw new Error('Export failed')
-  const blob = await res.blob()
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = `nexus-project-${sessionId}.zip`
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
-  URL.revokeObjectURL(url)
-}
-export async function fixBug(sessionId, errorMessage, filePath = null) {
-  const res = await fetch(`${BASE}/api/fix/${sessionId}`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ error_message: errorMessage, file_path: filePath }),
-  })
-  if (!res.ok) throw new Error('Fix request failed')
-  return res.json()
-}
-// Keepalive ping to prevent HuggingFace sleep
-let keepaliveInterval = null
-export function startKeepalive() {
-  if (keepaliveInterval) return
-  keepaliveInterval = setInterval(async () => {
-    try {
-      await fetch(`${BASE}/api/health`)
-    } catch {
-      // ignore
-    }
-  }, 30000) // every 30 seconds
-}
-export function stopKeepalive() {
-  if (keepaliveInterval) {
-    clearInterval(keepaliveInterval)
-    keepaliveInterval = null
-  }
-}
-// Start keepalive on load
-startKeepalive()

fronend/tailwind.config.js DELETED Viewed

@@ -1,48 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        nexus: {
-          bg: 'var(--bg)',
-          surface: 'var(--surface)',
-          border: 'var(--border)',
-          accent: 'var(--accent)',
-          'accent-2': 'var(--accent-2)',
-          'text-primary': 'var(--text-primary)',
-          'text-secondary': 'var(--text-secondary)',
-          success: 'var(--success)',
-          error: 'var(--error)',
-          warning: 'var(--warning)',
-        },
-      },
-      fontFamily: {
-        sans: ['Inter', 'system-ui', 'sans-serif'],
-        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
-      },
-      animation: {
-        'pulse-slow': 'pulse 3s ease-in-out infinite',
-        'fade-in': 'fadeIn 0.5s ease forwards',
-        'slide-up': 'slideUp 0.4s ease forwards',
-        'glow': 'glow 2s ease-in-out infinite alternate',
-      },
-      keyframes: {
-        fadeIn: {
-          '0%': { opacity: '0', transform: 'translateY(8px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' },
-        },
-        slideUp: {
-          '0%': { opacity: '0', transform: 'translateY(20px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' },
-        },
-        glow: {
-          '0%': { boxShadow: '0 0 5px var(--accent)33' },
-          '100%': { boxShadow: '0 0 20px var(--accent)55' },
-        },
-      },
-    },
-  },
-  plugins: [],
-}

fronend/vite.config.js DELETED Viewed

@@ -1,15 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    outDir: 'dist',
-    sourcemap: false,
-  },
-  server: {
-    proxy: {
-      '/api': 'http://localhost:7860',
-    },
-  },
-})