This commit introduces a complete visual overhaul of the AutoGLM Dashboard
with a distinctive "Industrial Cyber Console" aesthetic that transforms
the interface into a futuristic control center.
Design Concept:
- Industrial control panels + Cyberpunk + Retro CRT terminal aesthetics
- Dark background with neon status indicators (green/amber/red)
- Monospace code fonts + Sci-fi display typography
- Grid lines, scanlines, glowing borders, tech effects
- CRT effects, blinking cursors, data flow animations
New Files:
- dashboard/static/css/cyber-core.css - Core theme variables, global effects,
and utility classes (364 lines)
Updated Files:
- dashboard/static/css/dashboard.css - Main dashboard styles (577 lines)
• Animated header with blinking prompt cursor
• Device cards with neon glow on hover
• Task items with status indicators and data flow effects
• Custom button styles with light sweep animation
• Toast notifications with colored left borders
- dashboard/static/css/video-learning.css - Video learning page styles (649 lines)
• Config section with tech-inspired form inputs
• Custom checkbox with neon glow effect
• Progress bars with shimmer animation
• Session cards with holographic border effects
• Video placeholders with "NO_SIGNAL" indicator
- dashboard/static/css/sessions.css - Sessions list page styles (589 lines)
• Session cards with status indicator dots
• Progress bars with striped overlays
• Filter buttons with active state glow
• Empty state with pulsing circle animation
• Action buttons with type-specific colors
Key Visual Elements:
- Font: Orbitron (display) + JetBrains Mono (code)
- Colors: Neon green (#00ff9f), Amber (#ffb800), Red (#ff4757)
- Backgrounds: Deep navy (#0a0e27) with grid overlay
- Effects: CRT scanlines, data flow, pulse animations, glow shadows
- Decorations: Corner accents, status indicators, tech borders
Technical Details:
- CSS custom properties for consistent theming
- @import for core styles across all pages
- Pseudo-elements for decorative effects (::before, ::after)
- Keyframe animations: scanline, pulse, shimmer, blink, dataFlow
- Backdrop filters for glass effects
- Box-shadow for neon glow effects
Co-Authored-By: Claude <noreply@anthropic.com>
Features:
- Web Dashboard: FastAPI-based dashboard with Vue.js frontend
- Multi-device support (ADB, HDC, iOS)
- Real-time WebSocket updates for task progress
- Device management with status tracking
- Task queue with execution controls (start/stop/re-execute)
- Detailed task information display (thinking, actions, completion messages)
- Screenshot viewing per device
- LAN deployment support with configurable CORS
- Callback Hooks: Interrupt and modify task execution
- step_callback: Called after each step with StepResult
- before_action_callback: Called before executing action
- Support for task interruption and dynamic task switching
- Example scripts demonstrating callback usage
- Configuration: Environment-based configuration
- .env file support for all settings
- .env.example template with documentation
- Model API configuration (base URL, model name, API key)
- Dashboard configuration (host, port, CORS, device type)
- Phone agent configuration (delays, max steps, language)
Technical improvements:
- Fixed forward reference issue with StepResult
- Added package exports for callback types and configs
- Enhanced dependencies with FastAPI, WebSocket support
- Thread-safe task execution with device locking
- Async WebSocket broadcasting from sync thread pool
Co-Authored-By: Claude <noreply@anthropic.com>
