Switches from LineChart to AreaChart for main metrics graph, adds animated gradients and glow effects, and updates legend styling. Tooltip UI is improved with clearer layout, colored dots, and value formatting. Chart colors now use explicit hex values for better SVG compatibility, and LESS styles are updated for improved appearance and interactivity.
- Register ConnectionEdge as custom edge type
- Track selectedEdge state
- onEdgeClick handler
- Delete key/Backspace handler for edge deletion
- Pass onDelete to edge data for delete button
- Store connection metadata (sourceType, targetType)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Extends smoothstep edge with labels
- Shows connection type label (Routes to, Uses DB, etc.)
- Color-coded by connection type
- Selected state with glow effect
- Delete button on selection
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Import connection validation utility
- Add isValidConnection callback using rules
- Add onConnectStart/onConnectEnd for error tracking
- Show connection error toast when invalid
- Auto-clear error after 3 seconds
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Sliding panel from right with open/close animation
- Panel header with type-specific border color
- Panel body with form styling
- Port list styles for Docker config
- btn-icon and btn-danger-ghost for remove buttons
- Fixed @shadow-2xl -> @shadow-lg
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Import all config panel components
- Track selectedNode state
- onNodeClick opens appropriate panel
- onPaneClick closes panel
- handleNodeDataChange updates node data in real-time
- renderConfigPanel switches by node type
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Name input
- Service type selector (Redis, Memcached, RabbitMQ, Queue)
- Auto-update port when type changes
- Status selector
- Description textarea
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Domain name input with hint
- SSL status selector (none/valid/expired)
- Conditional SSL expiry date picker
- DNS status selector (pending/propagated)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Name input
- Type selector (MySQL, PostgreSQL, MongoDB, Redis)
- Auto-update port when type changes
- Host and port inputs in row layout
- Read-only size display
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Name and image inputs
- Status selector (running/stopped/error)
- Dynamic port mappings list with add/remove
- Memory limit input
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Sliding panel with header, body, and optional footer
- Header with icon, title, and close button
- Escape key handler to close panel
- CSS class-based open/closed state for animations
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Generic service node for future extensibility
- Service type configs for Redis, Memcached, RabbitMQ, Queue
- Configurable icon and color per service type
- Input and output handles for flexible connections
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Domain node with prominent domain name display
- SSL status badge (valid/expired/none) with icons
- DNS status indicator
- SSL expiry date display
- Output handle only (domains connect TO apps)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Database node with name and type badge
- Type colors for MySQL, PostgreSQL, MongoDB, Redis
- Connection info (host:port) display
- Size/storage preview
- Input handle only (databases receive connections)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
7 tasks planned:
- DockerAppNode with status, ports, memory display
- DatabaseNode with type badges and connection info
- DomainNode with SSL/DNS status
- ServiceNode for future extensibility
- Register nodes in WorkflowBuilder
- Enhanced palette with categories
- Node-specific styles
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add floating toolbar with buttons to add:
- Docker App nodes
- Database nodes
- Domain nodes
Implement addNode function that:
- Creates node with unique ID
- Positions node in center of viewport
- Sets appropriate type and label
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add custom node component:
- BaseNode with icon, label, status display
- Connection handles (source/target)
- Color-coded by node type (docker, database, domain)
- Register node type in WorkflowBuilder
- Configure animated smoothstep edges
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add /workflow route in App.jsx
- Add "Workflow Builder" link in sidebar under Infrastructure
- Use flow/network icon (connected circles)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add initial WorkflowBuilder page with:
- ReactFlow provider and canvas setup
- useNodesState and useEdgesState for state management
- onConnect handler for edge creation
- Basic page header and structure
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Fix build error by replacing @font-family-mono with @font-mono to
match the variable defined in _variables.less.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add environment configuration section in SettingsTab component with:
- Current environment type display and dropdown for standalone apps
- Disabled state with badge for linked apps (environment locked)
- Warning section for linked apps with unlink button
- Settings row styling for consistent layout
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Juan Denis