Layout:
Top navbar: AeThex logo (left), project name (center), user menu with avatar (right)
Left sidebar (250px): File tree navigator with folders/files, "New File" and "New Folder" buttons
Center: Code editor area (use Monaco Editor component if available, or textarea with syntax highlighting)
Right sidebar (300px, collapsible): AI Assistant chat panel with message history
Bottom panel (200px, collapsible): Console output and terminal
Features:
File tree supports create/rename/delete operations
Tabs for multiple open files
Syntax highlighting for Lua, JavaScript, TypeScript
Dark theme with purple/cyan accent colors (futuristic gaming aesthetic)
Split panes are resizable
Auto-save indicator in navbar
Use TypeScript and proper state management. Make it feel like VS Code but purpose-built for game development.
Create a unified game development workspace that shows the same game running on three platforms simultaneously:
Left panel: Roblox viewport (embed mockup)
Center panel: Web browser viewport with game canvas
Right panel: Mobile device mockup with game
Include:
Shared state indicator showing synced variables (player position, score, inventory)
Platform-specific code tabs that show Lua (Roblox), JavaScript (Web), and React Native (Mobile)
"Deploy to Platform" buttons for each
Sync status indicator (green = synced, yellow = syncing, red = conflict)
Console output panel at bottom showing platform-specific logs
Use a dark IDE-like theme. Make it feel like a professional developer tool.
Add a "New Project" modal to the AeThex Studio IDE:
Modal triggered by "New Project" button in navbar:
Step 1: Choose template (card grid layout)
Roblox Game Starter
Cross-Platform Multiplayer
Transmedia Story Project
Blank Project Each card shows icon, title, description, and "Popular" badge where applicable
Step 2: Project configuration form
Project name input
Platform checkboxes (Roblox, Web, Mobile)
Enable Nexus Engine toggle (with tooltip explaining state sync)
Enable Passport Auth toggle (with tooltip explaining unified identity)
Step 3: Review summary and "Create Project" button
After creation, populate file tree with template structure and open main file in editor.
Use a stepper UI component to show progress. Modern, clean design.
Build the AI Assistant chat panel for the right sidebar:
UI Components:
Header: "AeThex AI Assistant" with model selector dropdown (Claude Sonnet, GPT-4o)
Chat message history (scrollable, auto-scroll to bottom)
Messages alternate left (user) and right (AI) with avatars
Code blocks in messages with syntax highlighting and copy button
Input textarea at bottom with "Send" button
Token usage indicator (shows X / 500K tokens used this month)
Quick Actions (buttons above input):
"Explain selected code"
"Add comments"
"Convert to cross-platform"
"Generate tests"
Message Types:
User messages: blue background
AI messages: dark gray background with purple border
System messages: small, centered, gray text (e.g., "Code inserted into editor")
Features:
When AI generates code, show "Insert into editor" button
Track conversation context (include current file, project structure)
Show typing indicator when AI is responding
Make the UX smooth and polished.
Create a preview panel modal that opens when user clicks "Preview" in navbar:
Layout (fullscreen modal with dark backdrop):
Close button (top right)
Tab navigation: "Roblox" | "Web" | "Mobile" | "All Platforms"
"All Platforms" tab shows three columns:
Left: Roblox viewport (iframe placeholder with Roblox logo)
Center: Web browser viewport (iframe with game canvas)
Right: Mobile device mockup (iPhone frame with game view)
Shared State Indicator (floating panel at bottom):
Shows synced variables in real-time table: Variable | Roblox | Web | Mobile | Status playerX | 120 | 120 | 120 | ✓ Synced health | 100 | 98 | 100 | ⚠ Syncing
Color coded: Green (synced), Yellow (syncing), Red (conflict)
Controls:
"Refresh All" button
Individual "Deploy to [Platform]" buttons
Latency simulator slider (0-500ms)
Use glassmorphism UI style with blur effects. This should look futuristic and impressive.
Add user authentication and workspace management:
Login page:
AeThex logo and tagline
"Sign in with AeThex Passport" button (purple gradient)
"Sign in with Google" button
"Sign in with GitHub" button
Illustration of cross-platform game development
Dashboard (after login, before opening project):
Header: "My Workspaces" with "New Workspace" button
Grid of workspace cards showing:
Project name
Last modified timestamp
Platform badges (Roblox, Web, Mobile icons)
Thumbnail/preview image
Three-dot menu (Rename, Delete, Share)
Empty state if no workspaces: "Create your first game" CTA with template previews
Each workspace card is clickable and opens the IDE with that project loaded.
Use modern card design with hover effects. Show loading skeletons while fetching data.
