# Planning Guide
AeThex Studio is a browser-based Roblox Lua script editor with integrated AI assistance for rapid prototyping and learning.
**Experience Qualities**:
1. **Professional** - Should feel like a legitimate development tool with clean typography and purposeful spacing
2. **Intelligent** - AI assistance should feel seamlessly integrated, not bolted on
3. **Empowering** - Users should feel confident writing and understanding Lua code
**Complexity Level**: Light Application (multiple features with basic state)
This is a focused code editor with AI chat, script templates, and syntax validation - not a full-featured IDE with file systems, debugging, or deployment pipelines.
## Essential Features
### Monaco Code Editor
- **Functionality**: Full-featured Lua code editor with syntax highlighting, autocomplete, and line numbers
- **Purpose**: Provide a professional coding environment for Roblox scripting
- **Trigger**: Loads on app start with default template
- **Progression**: User opens app → sees editor with starter code → begins typing → receives syntax highlighting and autocomplete
- **Success criteria**: Code is editable, syntax-highlighted, and changes persist between sessions
### AI Chat Assistant
- **Functionality**: Conversational AI panel that helps explain code, debug issues, and suggest improvements
- **Purpose**: Lower the learning curve for new Roblox developers
- **Trigger**: User clicks chat button or types a question in the AI panel
- **Progression**: User asks question → AI analyzes current code → provides contextual answer with code examples
- **Success criteria**: AI responses are relevant, helpful, and include code snippets when appropriate
### Script Templates
- **Functionality**: Pre-built Roblox script templates (basic part manipulation, player join events, GUI interactions, etc.)
- **Purpose**: Jump-start development and teach common patterns
- **Trigger**: User clicks "Templates" button
- **Progression**: User browses templates → clicks template → code loads into editor → user modifies for their needs
- **Success criteria**: Templates load instantly and represent common Roblox use cases
### Code Validation
- **Functionality**: Real-time syntax checking and error highlighting
- **Purpose**: Catch errors before testing in Roblox Studio
- **Trigger**: Automatic as user types
- **Progression**: User types invalid Lua → error highlights appear → user hovers for details → fixes error
- **Success criteria**: Common Lua syntax errors are caught and clearly displayed
### Export/Copy Code
- **Functionality**: One-click copy of current code to clipboard
- **Purpose**: Easy transfer to Roblox Studio
- **Trigger**: User clicks copy button
- **Progression**: User finishes editing → clicks copy → receives confirmation → pastes into Roblox Studio
- **Success criteria**: Code copies to clipboard with proper formatting
## Edge Case Handling
- **Empty Editor**: Show helpful placeholder text with getting started tips
- **AI Errors**: Display user-friendly error messages if AI service is unavailable
- **Large Scripts**: Monaco handles large files, but warn if script exceeds 5000 lines (unusual for Roblox scripts)
- **Invalid Lua**: Show errors inline without blocking the user from continuing to type
- **Lost Work**: Auto-save code every 30 seconds to prevent data loss
## Design Direction
The design should evoke a sense of technical sophistication meets creative playfulness - this is a tool for building games, not enterprise software. Think dark themes with neon accents, geometric patterns, and smooth transitions that feel modern and game-inspired.
## Color Selection
A dark, code-focused theme with vibrant accent colors inspired by Roblox's playful brand and gaming aesthetics.
- **Primary Color**: oklch(0.45 0.20 265) - Deep electric blue that represents technical precision and digital creativity
- **Secondary Colors**:
- Background: oklch(0.15 0.02 265) - Near-black with subtle blue tint
- Surface: oklch(0.20 0.03 265) - Slightly elevated dark panels
- **Accent Color**: oklch(0.75 0.20 150) - Vibrant cyan-green for CTAs, highlights, and active states
- **Foreground/Background Pairings**:
- Primary (Deep Blue): White text (oklch(0.98 0 0)) - Ratio 7.2:1 ✓
- Accent (Cyan-Green): Dark text (oklch(0.15 0.02 265)) - Ratio 8.1:1 ✓
- Background (Near-Black): Light text (oklch(0.85 0.03 265)) - Ratio 12.3:1 ✓
- Surface (Dark Panel): Light text (oklch(0.85 0.03 265)) - Ratio 10.5:1 ✓
## Font Selection
Typography should feel technical yet approachable - monospace for code, clean sans-serif for UI.
- **Typographic Hierarchy**:
- H1 (App Title): Space Grotesk Bold/32px/tight tracking (-0.02em)
- H2 (Section Headers): Space Grotesk Semibold/20px/normal tracking
- Body (UI Text): Inter Medium/14px/relaxed line-height (1.6)
- Code (Editor): JetBrains Mono Regular/14px/monospace
- Small (Hints): Inter Regular/12px/muted color
## Animations
Animations should feel snappy and technical - quick state transitions with subtle easing that reinforces the digital tool aesthetic. Use framer-motion for panel slides and modal appearances, but keep transitions under 200ms to avoid feeling sluggish. Add micro-interactions on buttons (scale on press) and smooth scrolling in the chat panel.
## Component Selection
- **Components**:
- `Button` (primary actions like "Run", "Copy", "Ask AI") with custom variants for destructive and accent states
- `Card` for template previews and code snippets
- `Separator` for dividing editor from chat panel
- `ScrollArea` for chat messages and template list
- `Tabs` for switching between templates and settings
- `Dialog` for first-time user onboarding
- `Badge` for Lua syntax error indicators
- `Tooltip` for icon button explanations
- Custom Monaco Editor wrapper component
- Custom AI chat component with message bubbles
- **Customizations**:
- Monaco editor needs dark theme configuration
- Chat bubbles with distinct styling for user vs AI messages
- Template cards with code preview using syntax-highlighted pre blocks
- Resizable panels using react-resizable-panels
- **States**:
- Buttons: Default (solid accent), Hover (brightened +10% lightness), Active (scale 0.97), Disabled (50% opacity)
- Editor: Default (dark background), Focused (subtle glow border)
- Chat input: Default (muted border), Focused (accent border with glow)
- **Icon Selection**:
- Code (editor): `