Goal: create a prompt from the text below that takes the features and functionality from text use it as inspiration to build a prompt that user will give to ai to create this project do not limit the ai to anything specific allow it to be creative.

Build a online 50/50 cli on left side on the other the right preview that can preview all code coming from the ai needs to work on preview if ai is prompted it’s code will automatically appear on the preview it will use cli agents, Codex, Claude, Gemini, qwen cli, opencode cli, all these cli’s I want to create a web app that integrates them on the left user can select which Cli and connect to it on the right it’ll be a live preview for code each side 50/50 it’ll be split up, the live preview needs to be powerful able to render everything, use any resources needed for it, we also need it so it can allow user auth login, it will create a developer sandbox for each session this is where it’ll run the cli and preview, we need a fully functional terminal, for admin access we need a way to upload the cli files, add a clone repo button where user can call in existing codebase for the ai to work on, make the only login admin-admin have it prefilled out also as we’re still building it should be like https://www.vibecodeapp.com/ use react only build frontend

You need to include the actual GitHub links for the cli ai’s all of them and also on the right add a download zip button the ai will also need a full powerful cli, also include anything that better connects the ai to files, cli and user also and those websites as reference like vibecode link

Include this cli, also ensure that it knows its building a 50/50 terminal on left and very advanced preview on right can preview any code it updates real time, user can switch between the cli they want the ai can auto fix if the preview doesn’t load the ai can add create, write and read the current files or if new session, at the top we will add on the preview side their should be a deploy button button export to GitHub, download as zip, consider it like a 2 pane 50:50 but 2 pane / 4 different pages/views on the right side where preview is add a button that switches it to a file view with file explorer where user can view files and code and manual edit, on the left pane add a button that switches terminal tool for changing things like fonts, colors, preferences for project, like shadecn etc their should be a element selector button where user can select things in preview and this works congruent with the font, colors can be changed also if element is selected it will automatically show just the element name but if it stays selected it will prompt the ai with the code it should be not visible to user but they prompt and then it also send the code to element selected to ai, on the left pane add a GitHub import button where it will import codebase and ai can read and edit it, consider ux and simple things to better connect the ai with the files, and user, add versioning system where user is able to go back to old versions of code, include all of the in prompt for ai do not limit it to and specific thing look at it as a prompt to ai and let it build this project also include the qwen cli https://github.com/QwenLM/qwen-code

These links are the acutal Ai Cli files that will be connected and used through terminal this are the links once they only need to be downloaded once after that they can update through them in cli admin backend auth for the acutal using the ai will have to be done through starting the ai cli it will and may need to take them to another page or give token it takes care of that part using our we want to build a prompt for ai that is more open for say don’t limit it to anything specific also use this prompt as even more inspiration and our current project “Build a ai tool all the mentioned ai integrations will be their cli versions # 🚀 Enhanced AI Code IDE
A next-generation web-based Integrated Development Environment with AI CLI integration, modern dark UI, and comprehensive admin features - inspired by VibeCodeApp but built for the modern web.
🌟 Project Overview
• Name: Enhanced AI Code IDE
• Goal: Provide a professional 50/50 split interface with terminal + live preview/admin panel
• Design: Modern dark theme with glassmorphism effects and smooth animations
• Target: Professional developers, AI enthusiasts, and code education platforms
🔗 Live Application
• URL: https://3000-izf37dqexeouh832nmdhf-02b9cc79.sandbox.novita.ai
• Admin Login: Click "Admin Access" button (instant login)
• User Login: Click "Developer Access" button (instant login)
✨ Key Features
🎨 Modern UI/UX
• Glassmorphism Design: Translucent panels with backdrop blur effects
• Dark Theme: Sleek dark color scheme with blue/purple accents
• Smooth Animations: Micro-interactions and page transitions
• Responsive Layout: Works on desktop, tablet, and mobile devices
• Accessibility: Full keyboard navigation and screen reader support
🔐 Enhanced Authentication
• One-Click Login: Instant admin/user access buttons
• Session Management: Secure JWT-like token system
• Role-Based UI: Different interfaces for admin vs regular users
• Auto-Login: Remembers sessions across page reloads
💻 Dual Interface System
👥 User Interface (Developer Access)
• Left Panel: AI-powered terminal with xterm.js
• Right Panel: Live code preview with iframe sandbox
• AI Integration: 5 AI providers (Claude, Codex, Gemini, Qwen, OpenCode)
• Real-time Preview: Code changes appear instantly
👑 Admin Interface (Admin Access)
• Left Panel: Enhanced terminal with AI capabilities
• Right Panel: Comprehensive admin panel with:
• File Explorer: Visual file tree with download buttons
• Admin Terminal: Unrestricted system access terminal
• GitHub Integration: Real repository cloning
• File Management: Upload, organize, and download files
🤖 Advanced AI Integration
• Multi-Provider Support: Claude, Codex, Gemini, Qwen, OpenCode CLIs
• Smart Code Generation: Context-aware code creation
• Template Library: Pre-built templates for:
• Modern dashboards with Chart.js
• Login/authentication forms
• API integration demos
• Interactive mini-games
• Animated showcases
• Real-time data visualizations
📁 File Management System
• Virtual File System: Database-backed file storage
• Drag & Drop Upload: Intuitive file upload interface
• ZIP Download: Complete project download as compressed archive
• File Explorer: Visual tree structure with file operations
• GitHub Cloning: Real repository import from GitHub URLs
🔧 Admin Terminal Features
• Unrestricted Access: Full system command execution
• Package Management: npm, pip, apt package installation
• File Operations: ls, cd, pwd, mkdir, rm commands
• Real-time Output: Color-coded command responses
• Command History: Persistent command line history
🎯 Enhanced AI Code Examples
Try these advanced AI prompts in the terminal:
1. "create a modern dashboard" → Generates analytics dashboard with Chart.js
2. "build a login form" → Creates glassmorphism login interface
3. "make an interactive game" → Builds HTML5 Snake game
4. "add API integrations" → Creates multi-API demo with weather, quotes, crypto
5. "create animations" → Generates CSS animation showcase
6. "build a data visualization" → Creates interactive charts and graphs
🔌 API Endpoints
Authentication
• POST /api/auth/login - One-click login with type parameter
• Body: {"type": "admin"} or {"type": "user"}
• Returns: {sessionId, user: {id, username, isAdmin}}
AI Integration
• POST /api/ai/chat - Enhanced AI prompt processing
• Headers: Authorization: Bearer <token>
• Body: {projectId, provider, prompt}
• Returns: {response} with generated code
GitHub Integration
• POST /api/repos/clone - Real GitHub repository cloning
• Headers: Authorization: Bearer <token>
• Body: {url} (GitHub repository URL)
• Returns: {success, files, message}
File Operations
• POST /api/files/upload - Multi-file upload with FormData
• GET /api/projects/:id/download - Project data for ZIP creation
Admin Terminal
• POST /api/admin/terminal - Execute system commands (admin only)
• Headers: Authorization: Bearer <token>
• Body: {command}
• Returns: {output, exitCode}
🛠 Technical Architecture
Backend (Hono + Cloudflare Workers)
• Framework: Hono.js for lightweight, fast APIs
• Database: Cloudflare D1 (SQLite) for data persistence
• Authentication: Session-based with secure token management
• File Storage: Virtual file system in database JSON fields
• GitHub API: Direct integration for repository cloning
Frontend (Modern Vanilla JS)
• Terminal: xterm.js with custom themes and features
• UI Framework: Tailwind CSS with custom design system
• Animations: CSS animations with reduced motion support
• File Operations: JSZip for client-side archive creation
• Responsive: Mobile-first responsive design
Database Schema
-- Enhanced user system with admin roles
users: id, username, password_hash, email, is_admin, created_at
-- Secure session management
sessions: id, user_id, data, created_at, expires_at
-- Project file storage with virtual filesystem
projects: id, user_id, name, description, files (JSON), settings (JSON)
-- AI interaction logging for analytics
ai_interactions: id, project_id, provider, prompt, response, created_at
-- Admin file uploads and CLI management
cli_uploads: id, name, description, file_data, file_type, uploaded_by
🎨 UI/UX Features
Design System
• Colors: Custom dark palette with blue/purple gradients
• Typography: System fonts with monospace for code
• Spacing: Consistent 8px grid system
• Borders: Rounded corners with glassmorphism borders
• Shadows: Multi-layer shadow system for depth
Animations
• Page Transitions: Smooth fade/slide animations
• Button Effects: Hover states with scale transforms
• Loading States: Elegant spinners and progress indicators
• Micro-interactions: Subtle feedback for all user actions
Accessibility
• Keyboard Naviga

README.md

@@ -1,10 +1,13 @@
 ---
-title: Ai Cli Fusion Ide
-emoji: 📉
-colorFrom: blue
-colorTo: pink
+title: AI CLI Fusion IDE 🚀✨
+colorFrom: purple
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/ai-terminal.js

@@ -0,0 +1,76 @@
+class AITerminal extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          height: 100%;
+          background: #1e1e2e;
+          border-radius: 8px;
+          overflow: hidden;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .terminal-container {
+          height: 100%;
+          padding: 1rem;
+          display: flex;
+          flex-direction: column;
+        }
+        .cli-selector {
+          display: flex;
+          gap: 0.5rem;
+          margin-bottom: 1rem;
+        }
+        select {
+          flex: 1;
+          background: #2a2a3a;
+          color: #f8f8f2;
+          border: 1px solid #44475a;
+          border-radius: 4px;
+          padding: 0.5rem;
+        }
+        .terminal {
+          flex: 1;
+          background: #1e1e2e;
+          border-radius: 4px;
+          overflow: hidden;
+        }
+        .xterm {
+          padding: 1rem;
+          height: 100%;
+        }
+      </style>
+      <div class="terminal-container">
+        <div class="cli-selector">
+          <select id="ai-selector">
+            <option value="gemini">Gemini CLI</option>
+            <option value="codex">Codex CLI</option>
+            <option value="claude">Claude CLI</option>
+            <option value="qwen">Qwen CLI</option>
+            <option value="opencode">OpenCode CLI</option>
+          </select>
+        </div>
+        <div class="terminal" id="terminal"></div>
+      </div>
+    `;
+
+    // Initialize terminal
+    this.initTerminal();
+  }
+
+  initTerminal() {
+    const terminal = new Terminal({
+      cursorBlink: true,
+      theme: {
+        background: '#1e1e2e',
+        foreground: '#f8f8f2',
+        cursor: '#f8f8f2',
+        selection: '#44475a'
+      }
+    });
+    terminal.open(this.shadowRoot.getElementById('terminal'));
+    terminal.write('AI CLI Fusion IDE - Select an AI from the dropdown above\r\n');
+  }
+}
+customElements.define('ai-terminal', AITerminal);

components/auth-panel.js

@@ -0,0 +1,53 @@
+class AuthPanel extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          background: rgba(40, 42, 54, 0.8);
+          backdrop-filter: blur(10px);
+          border-radius: 8px;
+          padding: 2rem;
+          max-width: 400px;
+          margin: 2rem auto;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        h2 {
+          color: #f8f8f2;
+          margin-top: 0;
+        }
+        .auth-buttons {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+        button {
+          background: #6272a4;
+          color: #f8f8f2;
+          border: none;
+          border-radius: 4px;
+          padding: 1rem;
+          cursor: pointer;
+          transition: background 0.2s;
+          font-size: 1rem;
+        }
+        button:hover {
+          background: #7f8fb1;
+        }
+        .admin-btn {
+          background: #ff5555;
+        }
+        .admin-btn:hover {
+          background: #ff6e6e;
+        }
+      </style>
+      <h2>AI CLI Fusion IDE</h2>
+      <div class="auth-buttons">
+        <button id="user-login">Developer Access</button>
+        <button id="admin-login" class="admin-btn">Admin Access</button>
+      </div>
+    `;
+  }
+}
+customElements.define('auth-panel', AuthPanel);

components/code-preview.js

@@ -0,0 +1,62 @@
+class CodePreview extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          height: 100%;
+          background: #1e1e2e;
+          border-radius: 8px;
+          overflow: hidden;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .preview-container {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+        }
+        .preview-toolbar {
+          display: flex;
+          gap: 0.5rem;
+          padding: 1rem;
+          background: #2a2a3a;
+          border-bottom: 1px solid #44475a;
+        }
+        button {
+          background: #6272a4;
+          color: #f8f8f2;
+          border: none;
+          border-radius: 4px;
+          padding: 0.5rem 1rem;
+          cursor: pointer;
+          transition: background 0.2s;
+        }
+        button:hover {
+          background: #7f8fb1;
+        }
+        .preview-content {
+          flex: 1;
+          display: flex;
+        }
+        iframe {
+          flex: 1;
+          border: none;
+          background: white;
+        }
+      </style>
+      <div class="preview-container">
+        <div class="preview-toolbar">
+          <button id="deploy-btn">Deploy</button>
+          <button id="export-github">Export to GitHub</button>
+          <button id="download-zip">Download ZIP</button>
+          <button id="file-explorer">File Explorer</button>
+        </div>
+        <div class="preview-content">
+          <iframe id="preview-frame" sandbox="allow-scripts allow-same-origin"></iframe>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define('code-preview', CodePreview);

index.html

@@ -1,19 +1,28 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI CLI Fusion IDE</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css">
+</head>
+<body>
+    <auth-panel></auth-panel>
+    
+    <div class="main-container hidden">
+        <div class="split-container">
+            <ai-terminal></ai-terminal>
+            <code-preview></code-preview>
+        </div>
+    </div>
+
+    <script src="components/auth-panel.js"></script>
+    <script src="components/ai-terminal.js"></script>
+    <script src="components/code-preview.js"></script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
 </html>

script.js

@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const authPanel = document.querySelector('auth-panel');
+  const mainContainer = document.querySelector('.main-container');
+  
+  // Handle login buttons
+  authPanel.shadowRoot.getElementById('user-login').addEventListener('click', () => {
+    authPanel.classList.add('hidden');
+    mainContainer.classList.remove('hidden');
+    mainContainer.classList.add('fade-in');
+    // Set user session
+  });
+  
+  authPanel.shadowRoot.getElementById('admin-login').addEventListener('click', () => {
+    authPanel.classList.add('hidden');
+    mainContainer.classList.remove('hidden');
+    mainContainer.classList.add('fade-in');
+    // Set admin session and enable admin features
+  });
+
+  // Initialize terminal and preview communication
+  const terminal = document.querySelector('ai-terminal');
+  const preview = document.querySelector('code-preview');
+  
+  // TODO: Implement terminal-preview communication
+  // TODO: Add AI CLI integration logic
+  // TODO: Implement file management and GitHub integration
+});

style.css

@@ -1,28 +1,57 @@
+:root {
+  --bg-color: #282a36;
+  --panel-bg: #1e1e2e;
+  --text-color: #f8f8f2;
+  --accent-color: #6272a4;
+  --danger-color: #ff5555;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  height: 100vh;
+  overflow: hidden;
+}
+
+.hidden {
+  display: none !important;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.main-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.split-container {
+  display: flex;
+  height: calc(100vh - 1rem);
+  gap: 1rem;
+  padding: 1rem;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.split-container > * {
+  flex: 1;
+  min-width: 0;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Glassmorphism effect */
+.glass {
+  background: rgba(40, 42, 54, 0.8);
+  backdrop-filter: blur(10px);
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.fade-in {
+  animation: fadeIn 0.3s ease-out;
+}