Spaces:

Bluestrikeai
/

Full-stack-webapp-builder

Sleeping

File size: 42,534 Bytes

45c8e24

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>NEXUS Builder — AI Full-Stack App Maker</title>
<link rel="icon" 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>">
<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">

<style>
/* ═══════════════ RESET & BASE ═══════════════ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
pre,code,.mono{font-family:'JetBrains Mono','Fira Code',monospace}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ═══════════════ SCROLLBAR ═══════════════ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ═══════════════ THEME VARS ═══════════════ */
:root{
  --bg:#0A0A0F;--surface:#111118;--border:#1E1E2E;
  --accent:#6C63FF;--accent2:#00D9FF;
  --text:#F0F0FF;--muted:#8888AA;
  --success:#22D3A8;--error:#FF4D6D;--warn:#FFB547;
  --glass:rgba(17,17,24,.75);
}
[data-theme="light"]{
  --bg:#F8F8FC;--surface:#FFFFFF;--border:#E0E0EF;
  --accent:#5B53E8;--accent2:#0099CC;
  --text:#0A0A1A;--muted:#666688;
  --success:#16A085;--error:#E74C6F;--warn:#E6A030;
  --glass:rgba(255,255,255,.8);
}

body{background:var(--bg);color:var(--text)}

/* ═══════════════ LAYOUT ═══════════════ */
#app{display:flex;flex-direction:column;height:100vh;width:100vw}

/* ── HEADER ── */
.hdr{display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;height:48px;border-bottom:1px solid var(--border);
  background:var(--glass);backdrop-filter:blur(12px);z-index:50;flex-shrink:0}
.hdr-logo{display:flex;align-items:center;gap:8px}
.hdr-logo svg{width:22px;height:22px;color:var(--accent)}
.hdr-logo span{font-size:18px;font-weight:700;letter-spacing:-.5px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hdr-badge{font-size:10px;padding:2px 8px;border-radius:20px;font-weight:600;
  background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.hdr-agents{display:flex;align-items:center;gap:14px}
.hdr-agent{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-idle{background:#555}.dot-active{background:var(--accent2);animation:pulse 1.4s infinite}
.dot-done{background:var(--success)}.dot-error{background:var(--error)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
.hdr-right{display:flex;align-items:center;gap:8px}
.hdr-sid{font-size:10px;padding:3px 8px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted)}
.btn-icon{background:none;border:none;cursor:pointer;padding:6px;border-radius:8px;
  color:var(--muted);transition:.2s}
.btn-icon:hover{color:var(--text);background:var(--surface)}

/* ── MAIN ── */
.main{display:flex;flex:1;overflow:hidden}

/* ── LEFT PANEL ── */
.left{width:420px;min-width:320px;display:flex;flex-direction:column;
  border-right:1px solid var(--border);background:var(--bg);flex-shrink:0}
.tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 0;font-size:11px;font-weight:500;cursor:pointer;border:none;
  background:none;color:var(--muted);position:relative;transition:.2s}
.tab.on{color:var(--accent);background:var(--surface)}
.tab.on::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--accent)}
.tab-badge{margin-left:3px;width:16px;height:16px;font-size:9px;display:flex;
  align-items:center;justify-content:center;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}
.panel{flex:1;overflow:hidden;display:none;flex-direction:column}
.panel.on{display:flex}

/* ── CHAT ── */
.chat-msgs{flex:1;overflow-y:auto;padding:14px}
.msg{margin-bottom:12px;display:flex;animation:fadeIn .3s}
.msg-user{justify-content:flex-end}
.msg-ai{justify-content:flex-start}
.msg-bubble{max-width:85%;padding:10px 14px;border-radius:16px;font-size:13px;
  line-height:1.55;white-space:pre-wrap;word-break:break-word}
.msg-user .msg-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.msg-ai .msg-bubble{background:var(--surface);border:1px solid var(--border);
  border-bottom-left-radius:4px}
.chat-loading{display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  font-size:12px;color:var(--muted);width:fit-content;animation:fadeIn .3s}
.typing{display:inline-block;width:2px;height:14px;background:var(--accent);
  margin-left:3px;animation:blink 1s infinite;vertical-align:text-bottom}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

.welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;text-align:center;padding:20px}
.welcome h2{font-size:19px;font-weight:700;margin:10px 0 6px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.welcome p{font-size:12px;color:var(--muted);max-width:380px;margin-bottom:18px;line-height:1.5}
.type-btn{width:100%;text-align:left;padding:7px 12px;border-radius:8px;border:none;
  cursor:pointer;font-size:11px;transition:.2s;background:transparent;color:var(--muted)}
.type-btn:hover,.type-btn.on{background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent)}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:100%;
  margin-bottom:14px;padding:6px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface)}
.example{width:100%;text-align:left;padding:10px 12px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);color:var(--muted);
  font-size:11px;cursor:pointer;transition:.2s;margin-bottom:6px;line-height:1.4}
.example:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  transform:translateY(-1px)}
.examples-label{font-size:10px;font-weight:600;color:var(--muted);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}

.chat-input{padding:10px;border-top:1px solid var(--border);flex-shrink:0;display:flex;gap:8px;align-items:flex-end}
.chat-input textarea{flex:1;resize:none;border-radius:12px;padding:10px 14px;
  font-size:13px;border:1px solid var(--border);background:var(--surface);
  color:var(--text);outline:none;font-family:inherit;line-height:1.5;min-height:44px;max-height:120px}
.chat-input textarea:focus{border-color:var(--accent)}
.btn-send{width:42px;height:42px;border-radius:12px;border:none;cursor:pointer;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:.2s;flex-shrink:0}
.btn-send:hover{transform:scale(1.05)}.btn-send:disabled{opacity:.35;transform:none}
.btn-send svg{width:18px;height:18px}

/* ── AGENT FEED ── */
.feed{flex:1;overflow-y:auto;padding:10px}
.feed-item{display:flex;gap:8px;padding:8px 10px;border-radius:10px;margin-bottom:6px;
  font-size:11px;border:1px solid var(--border);background:var(--surface);animation:fadeIn .3s}
.feed-icon{font-size:15px;flex-shrink:0;margin-top:1px}
.feed-body{flex:1;min-width:0}
.feed-head{display:flex;justify-content:space-between;margin-bottom:3px}
.feed-agent{font-weight:600;text-transform:capitalize}
.feed-time{font-size:9px;color:var(--muted)}
.feed-text{color:var(--muted);word-break:break-word}
.feed-text pre{white-space:pre-wrap;max-height:80px;overflow-y:auto;
  font-size:10px;line-height:1.5;margin-top:2px}
.feed-file{display:flex;align-items:center;gap:5px;color:var(--success)}
.feed-done{display:flex;align-items:center;gap:5px}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;color:var(--muted);font-size:13px;text-align:center;padding:20px;opacity:.6}
.empty-state svg{width:40px;height:40px;margin-bottom:10px;opacity:.4}

/* ── FILE TREE ── */
.tree{flex:1;overflow-y:auto;padding:6px 0}
.tree-header{padding:4px 12px;font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--muted)}
.tree-dir-name,.tree-file{display:flex;align-items:center;gap:6px;padding:3px 8px;
  cursor:pointer;font-size:11px;border-radius:4px;transition:.15s;user-select:none}
.tree-dir-name{font-weight:500;color:var(--text)}
.tree-dir-name:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.tree-file{color:var(--muted)}
.tree-file:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text)}
.tree-file.sel{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.tree-children{overflow:hidden}
.tree-icon{flex-shrink:0;font-size:13px}

/* ── RIGHT PANEL ── */
.right{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.sys-tabs{display:flex;gap:2px;padding:4px 8px;border-bottom:1px solid var(--border);
  overflow-x:auto;flex-shrink:0}
.sys-tab{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:8px;
  font-size:11px;font-weight:500;border:none;cursor:pointer;background:none;
  color:var(--muted);white-space:nowrap;transition:.2s}
.sys-tab.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.toolbar{display:flex;justify-content:space-between;align-items:center;
  padding:6px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.toolbar-group{display:flex;align-items:center;gap:3px}
.tb{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;
  font-size:11px;font-weight:500;border:none;cursor:pointer;background:none;
  color:var(--muted);transition:.2s}
.tb.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.tb-sm{padding:5px;border-radius:6px}
.btn-export{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:7px;
  font-size:11px;font-weight:500;border:none;cursor:pointer;background:var(--accent);
  color:#fff;transition:.2s}
.btn-export:hover{transform:scale(1.05)}

.preview-area{flex:1;overflow:hidden;display:flex;align-items:center;
  justify-content:center;padding:16px;background:#0D0D12}
[data-theme="light"] .preview-area{background:#f0f0f5}
.preview-frame{border:1px solid var(--border);border-radius:10px;overflow:hidden;
  height:100%;transition:width .3s;background:#fff}
.preview-frame iframe{width:100%;height:100%;border:none}
.preview-empty{text-align:center;color:var(--muted)}
.preview-empty .big{font-size:48px;margin-bottom:12px;opacity:.2}
.preview-empty h3{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px}
.preview-empty p{font-size:12px;line-height:1.5}

/* ── CODE VIEW ── */
.code-view{width:100%;height:100%;display:flex;flex-direction:column;border-radius:10px;
  overflow:hidden;border:1px solid var(--border)}
.code-head{display:flex;justify-content:space-between;align-items:center;
  padding:6px 14px;background:var(--bg);border-bottom:1px solid var(--border)}
.code-name{font-size:11px;color:var(--muted)}
.code-meta{display:flex;align-items:center;gap:8px}
.code-lines{font-size:9px;color:var(--muted)}
.code-body{flex:1;overflow:auto;display:flex;background:#0D0D14;font-size:12px;line-height:1.65}
[data-theme="light"] .code-body{background:#fafafe}
.code-gutter{flex-shrink:0;text-align:right;padding:10px 12px 10px 14px;
  color:#333355;user-select:none}
[data-theme="light"] .code-gutter{color:#bbbbcc}
.code-content{flex:1;padding:10px 14px 10px 0;overflow-x:auto;white-space:pre;tab-size:2}

/* ── STATUS BAR ── */
.status{display:flex;justify-content:space-between;align-items:center;
  padding:0 14px;height:26px;border-top:1px solid var(--border);
  background:var(--surface);font-size:10px;color:var(--muted);flex-shrink:0}
.status-left,.status-right{display:flex;align-items:center;gap:12px}
.status-dot{width:6px;height:6px;border-radius:50%;margin-right:4px;display:inline-block}
.progress-dots{display:flex;align-items:center;gap:3px}
.pdot{width:5px;height:5px;border-radius:50%;background:var(--border)}
.pdot.on{background:var(--accent)}.pdot.past{background:var(--success)}
.pline{width:12px;height:1px;background:var(--border)}

/* ═══════════════ ANIMATIONS ═══════════════ */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin .8s linear infinite}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:768px){
  .left{width:100%;border-right:none;border-bottom:1px solid var(--border)}
  .main{flex-direction:column}
  .hdr-agents{display:none}
}
</style>
</head>

<body>
<div id="app">

<!-- ═══════════ HEADER ═══════════ -->
<header class="hdr">
  <div class="hdr-logo">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
    <span class="mono">NEXUS</span>
    <span class="hdr-badge">BUILDER</span>
  </div>
  <div class="hdr-agents" id="hdrAgents"></div>
  <div class="hdr-right">
    <span class="hdr-sid" id="hdrSid" style="display:none"></span>
    <button class="btn-icon" onclick="toggleTheme()" title="Toggle theme" id="themeBtn">🌙</button>
  </div>
</header>

<!-- ═══════════ MAIN ═══════════ -->
<div class="main">

  <!-- LEFT PANEL -->
  <div class="left">
    <div class="tabs">
      <button class="tab on" data-tab="chat" onclick="switchTab('chat')">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
        Chat
      </button>
      <button class="tab" data-tab="agents" onclick="switchTab('agents')">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
        Agents <span class="tab-badge" id="agentBadge" style="display:none">0</span>
      </button>
      <button class="tab" data-tab="files" onclick="switchTab('files')">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
        Files <span class="tab-badge" id="fileBadge" style="display:none">0</span>
      </button>
    </div>

    <!-- Chat Panel -->
    <div class="panel on" id="panelChat">
      <div class="chat-msgs" id="chatMsgs"></div>
      <div class="chat-input">
        <textarea id="chatInput" rows="2" placeholder="Describe the app you want to build…"
          onkeydown="handleChatKey(event)"></textarea>
        <button class="btn-send" id="btnSend" onclick="handleSend()">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
        </button>
      </div>
    </div>

    <!-- Agent Feed Panel -->
    <div class="panel" id="panelAgents">
      <div class="feed" id="agentFeed"></div>
    </div>

    <!-- File Tree Panel -->
    <div class="panel" id="panelFiles">
      <div class="tree" id="fileTree"></div>
    </div>
  </div>

  <!-- RIGHT PANEL -->
  <div class="right">
    <div class="sys-tabs" id="sysTabs"></div>
    <div class="toolbar">
      <div class="toolbar-group">
        <button class="tb on" id="tbPreview" onclick="setView('preview')">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          Preview
        </button>
        <button class="tb" id="tbCode" onclick="setView('code')">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
          Code
        </button>
      </div>
      <div class="toolbar-group">
        <button class="tb tb-sm" id="vpDesk" onclick="setVP('100%')" title="Desktop" style="color:var(--accent)">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
        </button>
        <button class="tb tb-sm" id="vpTab" onclick="setVP('768px')" title="Tablet">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
        </button>
        <button class="tb tb-sm" id="vpMob" onclick="setVP('375px')" title="Mobile">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
        </button>
        <button class="tb tb-sm" onclick="refreshPreview()" title="Refresh">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
        </button>
        <button class="btn-export" id="btnExport" onclick="doExport()" style="display:none">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          Export ZIP
        </button>
      </div>
    </div>
    <div class="preview-area" id="previewArea"></div>
  </div>

</div><!-- /main -->

<!-- ═══════════ STATUS BAR ═══════════ -->
<footer class="status">
  <div class="status-left">
    <span id="statusLabel"><span class="status-dot" style="background:var(--muted)"></span> Ready</span>
    <div class="progress-dots" id="progressDots" style="display:none"></div>
  </div>
  <div class="status-right">
    <span id="statusFiles" style="display:none">📁 0 files</span>
    <span id="statusErrors" style="display:none;color:var(--error)">⚠ 0 errors</span>
    <span>⚡ HuggingFace CPU</span>
  </div>
</footer>

</div><!-- /app -->

<script>
/* ═══════════════════════════════════════════════════════════
   NEXUS BUILDER — FRONTEND (Vanilla JS)
   ═══════════════════════════════════════════════════════════ */

// ─── STATE ───────────────────────────────────────────────
const S = {
  sid: null,
  status: 'idle',
  theme: localStorage.getItem('nexus-theme') || 'dark',
  messages: [],
  agentFeed: [],
  agents: {
    research:     { name: 'GLM 4.5 Air',     status: 'idle', icon: '🌐', color: '#00D9FF' },
    orchestrator: { name: 'Trinity Large',    status: 'idle', icon: '🧠', color: '#6C63FF' },
    frontend:     { name: 'Qwen3 Coder',      status: 'idle', icon: '🎨', color: '#22D3A8' },
    backend:      { name: 'MiniMax M2.5',     status: 'idle', icon: '🔐', color: '#FFB547' },
  },
  files: {},
  fileTree: [],
  selectedFile: null,
  activeTab: 'chat',
  viewMode: 'preview',
  previewSystem: 'preview',
  vpWidth: '100%',
  errors: [],
  appType: 'saas',
  evtSource: null,
};

const APP_TYPES = [
  { id:'saas',       label:'SaaS Platform',  e:'💼' },
  { id:'ecommerce',  label:'E-Commerce',     e:'🛒' },
  { id:'marketplace',label:'Marketplace',    e:'🏪' },
  { id:'social',     label:'Social Network', e:'👥' },
  { id:'education',  label:'EdTech / LMS',   e:'📚' },
  { id:'health',     label:'HealthTech',     e:'🏥' },
  { id:'finance',    label:'FinTech',        e:'💰' },
  { id:'custom',     label:'Custom',         e:'⚡' },
];
const EXAMPLES = [
  "Build a project management SaaS like Linear with team workspaces, sprint boards, and issue tracking",
  "Create an online course marketplace where instructors sell video courses with progress tracking",
  "Build a subscription fitness app with workout plans, progress photos, and meal tracking",
];
const SYSTEMS = [
  { id:'preview',             label:'Overview',   e:'📋' },
  { id:'client_portal',       label:'Portal',     e:'🏠' },
  { id:'public_landing',      label:'Landing',    e:'🌐' },
  { id:'marketing_cms',       label:'Marketing',  e:'📣' },
  { id:'analytics_dashboard', label:'Analytics',  e:'📊' },
  { id:'admin_panel',         label:'Admin',      e:'🛡️' },
];

// ─── THEME ───────────────────────────────────────────────
function applyTheme() {
  document.documentElement.setAttribute('data-theme', S.theme);
  const btn = document.getElementById('themeBtn');
  btn.textContent = S.theme === 'dark' ? '☀️' : '🌙';
}
function toggleTheme() {
  S.theme = S.theme === 'dark' ? 'light' : 'dark';
  localStorage.setItem('nexus-theme', S.theme);
  applyTheme();
}

// ─── TABS ────────────────────────────────────────────────
function switchTab(id) {
  S.activeTab = id;
  document.querySelectorAll('.tab').forEach(t => t.classList.toggle('on', t.dataset.tab === id));
  document.querySelectorAll('.panel').forEach(p => p.classList.toggle('on', p.id === 'panel' + id.charAt(0).toUpperCase() + id.slice(1)));
  if (id === 'chat') renderChat();
  if (id === 'agents') renderFeed();
  if (id === 'files') renderTree();
}

// ─── API ─────────────────────────────────────────────────
async function apiGenerate(prompt, appType) {
  const r = await fetch('/api/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt, app_type: appType }),
  });
  if (!r.ok) throw new Error(await r.text());
  return r.json();
}
async function apiFiles(sid) {
  const r = await fetch('/api/files/' + sid);
  if (!r.ok) throw new Error('Failed');
  return r.json();
}
async function apiFix(sid, err, path) {
  const r = await fetch('/api/fix/' + sid, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ error_message: err, file_path: path }),
  });
  return r.json();
}
async function doExport() {
  if (!S.sid) return;
  const r = await fetch('/api/export/' + S.sid);
  const b = await r.blob();
  const u = URL.createObjectURL(b);
  const a = document.createElement('a');
  a.href = u; a.download = 'nexus-' + S.sid + '.zip';
  document.body.appendChild(a); a.click(); document.body.removeChild(a);
  URL.revokeObjectURL(u);
}

// ─── SSE ─────────────────────────────────────────────────
function connectSSE(sid) {
  if (S.evtSource) S.evtSource.close();
  const es = new EventSource('/api/stream/' + sid);
  S.evtSource = es;

  ['agent_start','token','file_created','agent_done','error','done'].forEach(evt => {
    es.addEventListener(evt, (e) => handleSSE(evt, JSON.parse(e.data)));
  });
  es.onerror = () => {
    if (es.readyState === EventSource.CLOSED) {
      updateStatus('error');
    }
  };
}
function handleSSE(type, d) {
  switch (type) {
    case 'agent_start':
      if (S.agents[d.agent]) S.agents[d.agent].status = 'active';
      addFeedItem(d.agent, d.content, 'start');
      updateAgents(); updateStatus(d.content || 'Working…');
      break;
    case 'token':
      addFeedToken(d.agent, d.content);
      break;
    case 'file_created':
      addFeedItem(d.agent, d.content, 'file', d.file_path);
      if (d.file_path) {
        S.fileTree = [...new Set([...S.fileTree, d.file_path])].sort();
        updateFileBadge();
      }
      break;
    case 'agent_done':
      if (S.agents[d.agent]) S.agents[d.agent].status = 'done';
      addFeedItem(d.agent, d.content, 'done');
      updateAgents();
      break;
    case 'error':
      S.errors.push(d.content);
      if (S.agents[d.agent]) S.agents[d.agent].status = 'error';
      addFeedItem(d.agent, d.content, 'error');
      updateAgents(); updateStatusBar();
      break;
    case 'done':
      updateStatus(d.status === 'completed' ? 'completed' : 'error');
      if (d.session_id) {
        apiFiles(d.session_id).then(r => {
          S.files = r.files || {};
          S.fileTree = Object.keys(S.files).sort();
          renderTree(); updateFileBadge();
          document.getElementById('btnExport').style.display = 'flex';
          refreshPreview();
        });
      }
      if (S.evtSource) { S.evtSource.close(); S.evtSource = null; }
      break;
  }
  if (S.activeTab === 'agents') renderFeed();
}

// ─── FEED HELPERS ────────────────────────────────────────
function addFeedItem(agent, content, type, filePath) {
  S.agentFeed.push({ agent, content, type, filePath, time: new Date().toLocaleTimeString() });
  updateAgentBadge();
}
function addFeedToken(agent, token) {
  const last = S.agentFeed[S.agentFeed.length - 1];
  if (last && last.agent === agent && last.type === 'stream') {
    last.content += token;
  } else {
    S.agentFeed.push({ agent, content: token, type: 'stream', time: new Date().toLocaleTimeString() });
  }
  updateAgentBadge();
  if (S.activeTab === 'agents') renderFeed();
}

// ─── CHAT ────────────────────────────────────────────────
function renderChat() {
  const c = document.getElementById('chatMsgs');
  if (S.messages.length === 0) {
    const typeGrid = APP_TYPES.map(t =>
      `<button class="type-btn ${S.appType===t.id?'on':''}" onclick="setAppType('${t.id}')">${t.e} ${t.label}</button>`
    ).join('');
    const exList = EXAMPLES.map((ex,i) =>
      `<button class="example" onclick="useExample(${i})">✨ ${ex}</button>`
    ).join('');
    c.innerHTML = `<div class="welcome">
      <div style="font-size:42px;margin-bottom:4px">🚀</div>
      <h2>Welcome to Nexus Builder</h2>
      <p>Describe your app idea and 4 AI agents will build it — complete with auth, payments, analytics, and admin panel.</p>
      <div class="type-grid">${typeGrid}</div>
      <div class="examples-label">Try an example:</div>
      ${exList}
    </div>`;
    return;
  }
  let html = S.messages.map(m =>
    `<div class="msg msg-${m.role==='user'?'user':'ai'}"><div class="msg-bubble">${esc(m.content)}</div></div>`
  ).join('');
  if (isActive()) {
    html += `<div class="chat-loading">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" class="spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
      Agents working…<span class="typing"></span>
    </div>`;
  }
  c.innerHTML = html;
  c.scrollTop = c.scrollHeight;
}
function setAppType(id) {
  S.appType = id;
  renderChat();
}
function useExample(i) {
  document.getElementById('chatInput').value = EXAMPLES[i];
  document.getElementById('chatInput').focus();
}
function handleChatKey(e) {
  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); }
}
async function handleSend() {
  const input = document.getElementById('chatInput');
  const text = input.value.trim();
  if (!text || isActive()) return;
  input.value = '';

  // Reset
  S.agents = Object.fromEntries(Object.entries(S.agents).map(([k,v])=>[k,{...v,status:'idle'}]));
  S.agentFeed = []; S.files = {}; S.fileTree = []; S.errors = [];
  S.selectedFile = null;
  updateAgents(); updateAgentBadge(); updateFileBadge();

  S.messages.push({ role: 'user', content: text });
  renderChat();

  try {
    const res = await apiGenerate(text, S.appType);
    S.sid = res.session_id;
    document.getElementById('hdrSid').textContent = S.sid;
    document.getElementById('hdrSid').style.display = '';
    updateStatus('connected');
    S.messages.push({ role: 'assistant', content: `🚀 Generation started! Session: ${S.sid}\n\nCoordinating 4 AI agents to build your application…` });
    renderChat();
    connectSSE(S.sid);
  } catch (err) {
    updateStatus('error');
    S.errors.push(err.message);
    S.messages.push({ role: 'assistant', content: `❌ Error: ${err.message}` });
    renderChat();
  }
}

// ─── AGENT FEED RENDER ──────────────────────────────────
function renderFeed() {
  const el = document.getElementById('agentFeed');
  if (S.agentFeed.length === 0) {
    el.innerHTML = `<div class="empty-state">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
      Agent activity will appear here
    </div>`;
    return;
  }
  const items = S.agentFeed.slice(-80).map(item => {
    const ag = S.agents[item.agent] || { icon:'⚙️', color:'#888' };
    let body = '';
    if (item.type === 'file') body = `<div class="feed-file">📄 ${esc(item.content)}</div>`;
    else if (item.type === 'done') body = `<div class="feed-done">✅ ${esc(item.content)}</div>`;
    else if (item.type === 'error') body = `<div style="color:var(--error)">❌ ${esc(item.content)}</div>`;
    else if (item.type === 'stream') body = `<pre>${esc(item.content.slice(-250))}<span class="typing"></span></pre>`;
    else body = esc(item.content);
    return `<div class="feed-item">
      <span class="feed-icon">${ag.icon}</span>
      <div class="feed-body">
        <div class="feed-head">
          <span class="feed-agent" style="color:${ag.color}">${item.agent}</span>
          <span class="feed-time">${item.time}</span>
        </div>
        <div class="feed-text">${body}</div>
      </div>
    </div>`;
  });
  el.innerHTML = items.join('');
  el.scrollTop = el.scrollHeight;
}

// ─── FILE TREE RENDER ───────────────────────────────────
function renderTree() {
  const el = document.getElementById('fileTree');
  if (S.fileTree.length === 0) {
    el.innerHTML = `<div class="empty-state">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
      Generated files will appear here
    </div>`;
    return;
  }
  const tree = buildTree(S.fileTree);
  el.innerHTML = `<div class="tree-header">Project Files (${S.fileTree.length})</div>` + renderNode(tree, 0);
  el.querySelectorAll('.tree-file').forEach(f => {
    f.addEventListener('click', () => selectFile(f.dataset.path));
  });
}
function buildTree(paths) {
  const root = {};
  paths.forEach(p => {
    const parts = p.split('/');
    let node = root;
    parts.forEach((part, i) => {
      if (i === parts.length - 1) node[part] = { _path: p };
      else { if (!node[part] || node[part]._path) node[part] = {}; node = node[part]; }
    });
  });
  return root;
}
function renderNode(node, depth) {
  const entries = Object.entries(node).sort(([a,av],[b,bv]) => {
    const af = !!av._path, bf = !!bv._path;
    if (af !== bf) return af ? 1 : -1;
    return a.localeCompare(b);
  });
  return entries.map(([name, val]) => {
    if (val._path) {
      const ext = name.split('.').pop() || '';
      const icon = fileIcon(ext);
      const sel = S.selectedFile === val._path ? ' sel' : '';
      return `<div class="tree-file${sel}" data-path="${val._path}" style="padding-left:${depth*16+12}px">
        <span class="tree-icon">${icon}</span>${esc(name)}
      </div>`;
    }
    const open = depth < 2;
    return `<div>
      <div class="tree-dir-name" style="padding-left:${depth*16+12}px" onclick="this.parentElement.classList.toggle('collapsed')">
        <span class="tree-icon">${open?'📂':'📁'}</span>${esc(name)}
      </div>
      <div class="tree-children">${renderNode(val, depth+1)}</div>
    </div>`;
  }).join('');
}
function fileIcon(ext) {
  const m = { jsx:'⚛️', tsx:'⚛️', js:'📜', ts:'📘', py:'🐍', css:'🎨',
    html:'🌐', json:'📋', sql:'🗄️', md:'📝', yml:'⚙️', yaml:'⚙️', txt:'📄' };
  return m[ext] || '📄';
}
function selectFile(path) {
  S.selectedFile = path;
  setView('code');
  renderTree();
  renderCodeView();
}

// ─── CODE VIEW ──────────────────────────────────────────
function renderCodeView() {
  const area = document.getElementById('previewArea');
  const file = S.selectedFile;
  const content = file ? (S.files[file] || '') : '';
  if (!content) {
    area.innerHTML = `<div class="preview-empty"><div class="big">📝</div>
      <h3>Code View</h3><p>Select a file from the tree to view its code</p></div>`;
    return;
  }
  const lines = content.split('\n');
  const ext = (file.split('.').pop() || '').toLowerCase();
  const gutter = lines.map((_, i) => i + 1).join('\n');
  const highlighted = highlight(content, ext);
  area.innerHTML = `<div class="code-view">
    <div class="code-head">
      <span class="code-name mono">${esc(file)}</span>
      <div class="code-meta">
        <span class="code-lines">${lines.length} lines</span>
        <button class="btn-icon" onclick="copyCode()" title="Copy">📋</button>
      </div>
    </div>
    <div class="code-body">
      <pre class="code-gutter mono">${gutter}</pre>
      <pre class="code-content mono">${highlighted}</pre>
    </div>
  </div>`;
}
function copyCode() {
  if (S.selectedFile && S.files[S.selectedFile]) {
    navigator.clipboard.writeText(S.files[S.selectedFile]);
  }
}

// ─── SYNTAX HIGHLIGHTING ────────────────────────────────
function highlight(code, ext) {
  let h = esc(code);
  // strings
  h = h.replace(/(["'`])(?:(?=(\\?))\2[\s\S])*?\1/g, '<span style="color:#22D3A8">$&</span>');
  // comments
  h = h.replace(/(\/\/.*$|#(?!.*{).*$)/gm, '<span style="color:#555577">$&</span>');
  h = h.replace(/(\/\*[\s\S]*?\*\/|--\s.*$)/gm, '<span style="color:#555577">$&</span>');
  // keywords (JS/Python/SQL combined)
  h = h.replace(/\b(const|let|var|function|return|if|else|for|while|class|import|export|from|default|async|await|try|catch|throw|new|this|def|elif|except|raise|with|yield|lambda|True|False|None|SELECT|FROM|WHERE|INSERT|INTO|VALUES|UPDATE|SET|DELETE|CREATE|TABLE|ALTER|DROP|INDEX|JOIN|LEFT|RIGHT|INNER|ON|AND|OR|NOT|NULL|PRIMARY|KEY|FOREIGN|REFERENCES|UNIQUE|DEFAULT|ENABLE|ROW|LEVEL|SECURITY|POLICY|USING|GRANT|BEGIN|COMMIT|TRIGGER|FUNCTION)\b/g,
    '<span style="color:#6C63FF;font-weight:600">$&</span>');
  // numbers
  h = h.replace(/\b(\d+\.?\d*)\b/g, '<span style="color:#FFB547">$&</span>');
  return h;
}

// ─── PREVIEW ────────────────────────────────────────────
function renderPreview() {
  const area = document.getElementById('previewArea');
  if (S.viewMode === 'code') { renderCodeView(); return; }
  if (!S.sid) {
    area.innerHTML = `<div class="preview-empty"><div class="big">🖥️</div>
      <h3>Live Preview</h3><p>Your generated app will be previewed here.<br>Start by describing your app in the chat.</p></div>`;
    return;
  }
  const url = S.previewSystem === 'preview'
    ? '/api/preview/' + S.sid
    : '/api/preview/' + S.sid + '/' + S.previewSystem;
  area.innerHTML = `<div class="preview-frame" style="width:${S.vpWidth}">
    <iframe src="${url}" id="previewIframe"></iframe>
  </div>`;
}
function refreshPreview() { renderPreview(); }
function setVP(w) {
  S.vpWidth = w;
  document.querySelectorAll('#vpDesk,#vpTab,#vpMob').forEach(b => b.style.color = 'var(--muted)');
  if (w === '100%') document.getElementById('vpDesk').style.color = 'var(--accent)';
  else if (w === '768px') document.getElementById('vpTab').style.color = 'var(--accent)';
  else document.getElementById('vpMob').style.color = 'var(--accent)';
  const f = document.querySelector('.preview-frame');
  if (f) f.style.width = w;
}
function setView(mode) {
  S.viewMode = mode;
  document.getElementById('tbPreview').classList.toggle('on', mode === 'preview');
  document.getElementById('tbCode').classList.toggle('on', mode === 'code');
  if (mode === 'preview') renderPreview(); else renderCodeView();
}

// ─── SYSTEM TABS ────────────────────────────────────────
function renderSysTabs() {
  document.getElementById('sysTabs').innerHTML = SYSTEMS.map(s =>
    `<button class="sys-tab ${S.previewSystem===s.id?'on':''}" onclick="setSys('${s.id}')">${s.e} ${s.label}</button>`
  ).join('');
}
function setSys(id) {
  S.previewSystem = id;
  renderSysTabs();
  if (S.viewMode === 'preview') renderPreview();
}

// ─── HEADER AGENTS ──────────────────────────────────────
function updateAgents() {
  const el = document.getElementById('hdrAgents');
  el.innerHTML = Object.entries(S.agents).map(([k,a]) => {
    const dc = a.status === 'active' ? 'dot-active' : a.status === 'done' ? 'dot-done' : a.status === 'error' ? 'dot-error' : 'dot-idle';
    return `<div class="hdr-agent">${a.icon}<div class="dot ${dc}"></div>${k.charAt(0).toUpperCase()+k.slice(1,4)}</div>`;
  }).join('');
}

// ─── STATUS ─────────────────────────────────────────────
const STATUS_MAP = {
  idle:        { label:'Ready',         color:'var(--muted)' },
  starting:    { label:'Starting…',     color:'var(--warn)' },
  connected:   { label:'Connected',     color:'var(--success)' },
  researching: { label:'🔍 Researching…',color:'var(--accent2)' },
  orchestrating:{label:'🧠 Blueprinting…',color:'var(--accent)' },
  building:    { label:'🚀 Building…',  color:'var(--accent)' },
  merging:     { label:'📦 Merging…',   color:'var(--accent2)' },
  fixing:      { label:'🔧 Fixing…',    color:'var(--warn)' },
  completed:   { label:'✅ Complete',    color:'var(--success)' },
  error:       { label:'❌ Error',       color:'var(--error)' },
};
function updateStatus(s) {
  S.status = s;
  const info = STATUS_MAP[s] || { label: s, color: 'var(--muted)' };
  const dotColor = isActive() ? 'var(--success)' : s==='error' ? 'var(--error)' : 'var(--muted)';
  document.getElementById('statusLabel').innerHTML =
    `<span class="status-dot" style="background:${dotColor}"></span> <span style="color:${info.color};font-weight:500">${info.label}</span>`;
  updateStatusBar();
  const inp = document.getElementById('chatInput');
  const btn = document.getElementById('btnSend');
  inp.disabled = isActive();
  btn.disabled = isActive();
}
function updateStatusBar() {
  const fc = S.fileTree.length;
  const ec = S.errors.length;
  const fe = document.getElementById('statusFiles');
  const ee = document.getElementById('statusErrors');
  if (fc > 0) { fe.style.display = ''; fe.textContent = `📁 ${fc} files`; }
  else fe.style.display = 'none';
  if (ec > 0) { ee.style.display = ''; ee.textContent = `⚠ ${ec} errors`; }
  else ee.style.display = 'none';
}
function isActive() {
  return !['idle','completed','error'].includes(S.status);
}

// ─── BADGES ─────────────────────────────────────────────
function updateAgentBadge() {
  const b = document.getElementById('agentBadge');
  const n = S.agentFeed.length;
  if (n > 0) { b.style.display = ''; b.textContent = n > 99 ? '99+' : n; }
  else b.style.display = 'none';
}
function updateFileBadge() {
  const b = document.getElementById('fileBadge');
  const n = S.fileTree.length;
  if (n > 0) { b.style.display = ''; b.textContent = n; }
  else b.style.display = 'none';
}

// ─── ESCAPE HTML ────────────────────────────────────────
function esc(s) {
  if (!s) return '';
  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

// ─── KEEPALIVE ──────────────────────────────────────────
setInterval(() => { fetch('/api/health').catch(()=>{}); }, 30000);

// ─── INIT ───────────────────────────────────────────────
applyTheme();
updateAgents();
renderChat();
renderSysTabs();
renderPreview();

// collapsed tree dirs
document.addEventListener('click', (e) => {
  // Handle collapsed class toggle (delegated)
});
</script>
</body>
</html>