- Remove csColorStrips CardSection from targets.js, add to streams.js
- Add color_strip sub-tab with tree nav entry between Picture and Audio
- Update navigateToCard refs in target cards and command palette
- Update tutorial steps: remove led-css from targets, add color_strip to sources
- Add i18n keys for streams.group.color_strip and tour.src.color_strip
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add esbuild bundling: JS (IIFE, minified, sourcemapped) and CSS into
single dist/ files, replacing 15+ individual CSS links and CDN scripts
- Bundle Chart.js and ELK.js from npm instead of CDN (fully offline)
- Serve DM Sans and Orbitron fonts locally from static/fonts/
- Fix dashboard automation card stretching full width (max-width: 500px)
- Fix time_of_day condition not localized in automation cards
- Add Chrome browser tools context file for MCP testing workflow
- Update frontend context with bundling docs and Chrome tools reference
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add entity type toggle pills and running/stopped filter to graph filter bar
- DataCache: return cached data if fresh, skip redundant fetches on page load
- Entity events: use force-fetch instead of invalidate+fetch to avoid stale gap
- Add no-cache middleware for static JS/CSS/JSON to prevent stale browser cache
- Reduces API calls on page load from ~70 to ~30
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace inline type selectors with pre-modal type picker grid for devices,
color strip sources, and value sources
- Add filterable search to icon grid when items > 9 (no auto-focus on touch)
- Show disabled (grayed-out) filtered items instead of hiding them
- Responsive grid columns (2-5 cols based on viewport width)
- Add "Select a port..." placeholder to serial port dropdown
- Update en/ru/zh locales with new keys
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Unify minimap/toolbar/legend drag+dock into shared _makeDraggable() helper
- Persist legend visibility and position, add active state to toggle buttons
- Show custom colors only on graph cards (entity defaults remain in legend)
- Replace emoji overlay buttons with SVG path icons
- Fix stale is_running blocking target start (auto-clear if task is done)
- Resolve device/target IDs to names in conflict error messages
- Hot-switch LED device on running target via async stop-swap-start cycle
- Compact automation dashboard cards and fix time_of_day localization
- Inline CSS source pill on target cards to save vertical space
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
New device providers: ESP-NOW, Philips Hue, USB HID, SPI Direct,
Razer Chroma SDK, and SteelSeries GameSense — each with client,
provider, full backend registration, schemas, routes, and frontend
support including discovery, form fields, and i18n.
Add IconSelect grids for SPI LED chipset selector and GameSense
peripheral type selector with new Lucide icons (cpu, keyboard,
mouse, headphones).
Replace emoji graph overlay buttons (eye, bell) with proper SVG
path icons for consistent cross-platform rendering.
Fix connection overlay causing horizontal scroll by adding
overflow: hidden.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Skip persisting minimap/toolbar anchor data while in fullscreen so
dragging during fullscreen doesn't overwrite normal-mode offsets.
ResizeObserver now just clamps during fullscreen instead of
re-applying normal-mode anchors to the fullscreen-sized container.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add name/kind/subtype filter bar with keyboard shortcut (F key)
- Filtered-out nodes get dimmed styling, nearly invisible on minimap
- Add anchor-based positioning for minimap and toolbar (remembers
which corner element is closest to, maintains offset on resize)
- Fix minimap not movable after reload (_applyMinimapAnchor undefined)
- Fix ResizeObserver to use anchor system for both minimap and toolbar
- Add graph-editor.md context file and update frontend.md with graph sync notes
- Add filter i18n keys for en/ru/zh locales
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Interpolate both view center and zoom level together using rAF
instead of CSS transitions, so the target node smoothly slides
to screen center while zooming in simultaneously.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Move bg-anim canvas into graph container during fullscreen so dynamic background is visible
- Watch for new entity creation from graph add menu and auto-navigate to it after reload
- Position color picker at click coordinates instead of 0,0
- Replace test/preview play triangle with eye icon to distinguish from start/stop
- Always use port-aware bezier curves for edges instead of ELK routing
- Add fullscreen and add-entity buttons to toolbar with keyboard shortcuts (F11, +)
- Add confirmation dialog for relayout when manual positions exist
- Remove node body stroke, keep only color bar; add per-node color picker
- Clamp toolbar position on load to prevent off-screen drift
- Add graph tab to getting-started tutorial
- Add WASD/arrow spatial navigation, ESC reset, keyboard shortcuts
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add visible typed ports on graph nodes (colored dots for each edge type)
- Route edges to specific port positions instead of node center
- Drag from output port to compatible input port to create/change connections
- Right-click edge context menu with Disconnect option
- Delete key detaches selected edge
- Mark nested edges (composite layers, zones) as non-editable with dotted style
- Add resolve_ref helper for empty-string sentinel to clear reference fields
- Apply resolve_ref across all storage stores for consistent detach support
- Add connection mapping module (graph-connections.js) with API field resolution
- Add i18n keys for connection operations (en/ru/zh)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Full-stack implementation of DMX output for stage lighting and LED controllers:
- DMXClient with Art-Net and sACN packet builders, multi-universe splitting
- DMXDeviceProvider with manual_led_count capability and URL parsing
- Device store, API schemas, routes wired with dmx_protocol/start_universe/start_channel
- Frontend: add/settings modals with DMX fields, IconSelect protocol picker
- Fix add device modal dirty check on type change (re-snapshot after switch)
- i18n keys for DMX in en/ru/zh locales
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Running graph nodes show entity icon in --primary-color instead of --text-muted
- Fix AddDeviceModal always showing dirty: serialize zones array with JSON.stringify
for proper strict equality comparison (matching DeviceSettingsModal pattern)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Output targets and sync clocks get start/stop (▶/■) with optimistic UI update
- Test/preview button for templates, sources, and KC targets
- Notification test button (🔔) for notification color strip sources
- Fetch batch states to show correct running status for output targets
- Sync clocks show running state from API (is_running)
- Surgical DOM patching (patchNodeRunning) preserves hover state on toggle
- Success button hover style (green) for start action
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Shift+drag on empty space draws selection rectangle to select multiple nodes
- Multi-node drag: dragging a selected node moves all selected nodes together
- Click edge to highlight it and its connected nodes
- Delete key removes single selected node, Ctrl+A selects all
- Edges now have pointer cursor for click affordance
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Drag nodes to reposition with dead-zone, edge re-routing, and minimap sync
- Animated flow dots trace upstream chains to running nodes
- Manual positions persist across re-renders, cleared on relayout
- Fix canvas event listener leak on re-render by calling destroy()
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
SVG-based node graph with ELK.js autolayout showing all 13 entity types
and their relationships. Features include:
- Pan/zoom canvas with bounds clamping and dead-zone click detection
- Interactive minimap with viewport rectangle, click-to-pan, drag-to-move,
and dual resize handles (bottom-left/bottom-right)
- Movable toolbar with drag handle and inline zoom percentage indicator
- Entity-type SVG icons from Lucide icon set with subtype-specific overrides
- Command palette search (/) with keyboard navigation and fly-to
- Node selection with upstream/downstream chain highlighting
- Double-click to zoom-to-card, edit/delete overlay on hover
- Legend panel, orphan node detection, running state indicators
- Full i18n support with languageChanged re-render
- Catmull-Rom-to-cubic bezier edge routing for smooth curves
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace flex-wrap with overflow ellipsis on .card-title and .template-name
- Reduce card title font size from 1.2rem/18px to 1.05rem
- Add title attribute (hover tooltip) on all card types for full name
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add FPS control (1-60, default 20) to test preview modal next to LED count
- Server accepts fps query param, controls frame send interval
- Single Apply icon button (✓) applies both LED count and FPS
- FPS control stays visible for picture sources (LED count hidden)
- Fix composite sub-stream consumer ID collision: use unique instance ID
to prevent old WebSocket release from killing new connection's streams
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Bump capture preview resolution from 480×360 to 960×540 (HD)
- Increase preview FPS from 2 to ~12 FPS (AUX_INTERVAL 0.5→0.08)
- Add accent-color border on screen rect only (not LED edges) via ::after
- Use dynamic aspect-ratio from decoded JPEG frames instead of fixed height
- Widen modal to 900px for picture sources
- Move frontend conventions from CLAUDE.md to contexts/frontend.md
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Stream live JPEG frames from picture sources into the test preview rectangle
- Add composite layer brightness display via value source streaming
- Fix missing id on css-test-rect-screen element that prevented frame display
- Preload images before swapping to eliminate flicker on frame updates
- Increase preview resolution to 480x360 and add subtle outline
- Prevent auto-focus on name field in modals on touch devices (desktopFocus)
- Fix performance chart padding, color picker clipping, and subtitle offset
- Add calibration-style ticks and source name/LED count to rectangle preview
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Composite sources show per-layer strip canvases with composite result on top
- Server sends composite wire format with per-layer RGB data
- LED count is configurable via input field, persisted in localStorage
- Notification sources show a bell fire button on the strip preview
- Composite with notification layers shows per-layer fire buttons
- Fixed stale WS frame bug with generation counter and unique consumer IDs
- Modal width is now fixed at 700px to prevent layout jumps
- Target card composite layers now use same-height canvases
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
New WebSocket endpoint streams real-time RGB frames from any CSS source.
Generic sources show a horizontal LED strip canvas. Picture sources show
a rectangle with per-edge canvases matching the calibration layout.
Server computes exact output indices per edge (offset + reverse + CW/CCW)
so the frontend renders edges in correct visual orientation.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace plain dropdowns with visual icon grids:
- Animation type (static/gradient CSS sources): icons for each effect
- WLED target protocol: DDP vs HTTP with descriptions
Add i18n keys for protocol options in all 3 locales.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Large SVG icon on the right side of the viewport reflects the active tab,
crossfades on tab switch. Also removes overflow:hidden from cards to fix
color picker clipping.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Animated conic gradient spins around the card edge using CSS Houdini
@property for smooth angle interpolation. Skips the left edge when
a custom card color stripe is assigned (data-has-color attribute).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
When a target uses a composite CSS source, the LED preview now shows
individual layer strips below the blended composite result. Backend
stores per-layer color snapshots and sends an extended binary wire
format; frontend renders separate canvases with hover labels.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adds a refresh icon button on each device card that triggers an immediate
health check via POST /devices/{id}/ping, showing online status with
latency or offline result as a toast notification.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add optional brightness_source_id per composite layer using ValueStreamManager
- Use EntitySelect for composite layer source and brightness dropdowns
- Use IconSelect for composite blend mode and notification filter mode
- Add i18n keys for blend mode and filter mode descriptions (en/ru/zh)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Bell icon button on notification source cards triggers POST /notify
- Shows success/warning/error toast based on response
- Fix header shifting when sticky by moving it outside .container
- i18n keys added for en, ru, zh
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Move tab bar into header (centered between title and toolbar)
- Make entire header sticky with border-bottom separator
- Remove container max-width for full-width layout
- Add scroll-spy: tree sidebar tracks visible section on scroll
- Remember scroll position per tab when switching
- Remove sticky section headers, use scroll-margin-top instead
- Update sticky offsets to use --sticky-top CSS variable
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Hide tooltip/ring with visibility:hidden until first step is positioned
- Hide tooltip between steps when scrolling to prevent stale position flash
- Replace scrollend event (poor browser support, 500ms fallback) with
requestAnimationFrame polling that resolves in ~50ms when scroll settles
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add TreeNav component that groups related entity types into a
collapsible hierarchy for Targets and Sources tabs. Targets tree
shows section-level leaves (Devices, Color Strips, LED Targets,
KC Targets, Pattern Templates) with scroll-to-section on click.
Sources tree groups into Picture, Audio, and Utility categories.
Also fixes missing csAudioTemplates in stream section expand/collapse.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
New value source that outputs brightness (0-1) based on the daylight
color LUT, computing BT.601 luminance from the simulated sky color.
Supports real-time wall-clock mode or configurable simulation speed.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Broadcast entity_changed and device_health_changed events via the event
bus so the frontend can auto-refresh cards without polling. Adds
exponential backoff on WS reconnect.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Full-stack implementation of two new color strip source types:
- Daylight: simulates day/night color cycle with real-time or speed-based mode, latitude support
- Candlelight: multi-candle fire simulation with Gaussian falloff, layered-sine flicker, warm color shift
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Auto-restart: ProcessorManager detects fatal task crashes via done
callback and restarts with exponential backoff (2s-30s, max 5 attempts
in 5 min window). Manual stop disables auto-restart. Restart state
exposed in target state API and via WebSocket events.
- Remove "Running"/"Paused" badge label from sync clock dashboard cards
(pause/play button already conveys state).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add `tags: List[str]` field to all 13 entity types (devices, output targets,
CSS sources, picture sources, audio sources, value sources, sync clocks,
automations, scene presets, capture/audio/PP/pattern templates)
- Update all stores, schemas, and route handlers for tag CRUD
- Add GET /api/v1/tags endpoint aggregating unique tags across all stores
- Create TagInput component with chip display, autocomplete dropdown,
keyboard navigation, and API-backed suggestions
- Display tag chips on all entity cards (searchable via existing text filter)
- Add tag input to all 14 editor modals with dirty check support
- Add CSS styles and i18n keys (en/ru/zh) for tag UI
- Also includes code review fixes: thread safety, perf, store dedup
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Portal IconSelect popups to document.body with position:fixed to prevent
clipping by modal overflow-y:auto
- Replace custom scene selectors in automation editor with EntitySelect
command-palette pickers (main scene + fallback scene)
- Add IconSelect grid for automation deactivation mode (none/revert/fallback)
- Add IconSelect grid for automation condition type and match type
- Replace mapped zone source dropdowns with EntitySelect pickers
- Replace scene target selector with EntityPalette.pick() pattern
- Remove effect palette preview bar from CSS editor
- Remove sensitivity badge from audio color strip source cards
- Clean up unused scene-selector CSS and scene-target-add-row CSS
- Add locale keys for all new UI elements across en/ru/zh
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace <details> with grid-template-rows animated expand for template config sections
- Always show edge boundary tick labels in both simple and advanced calibration
- Make tick labels, monitor names, and tick marks zoom-independent in advanced calibration
- Place new monitors next to existing ones and fit view on add
- Fix layout jump on line selection: toggle class in-place instead of DOM rebuild
- Use transparent border-left on all line items to prevent content shift
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rename all Python modules, classes, API endpoints, config keys, frontend
fetch URLs, and Home Assistant integration URLs from picture-targets to
output-targets. Store loads both new and legacy JSON keys for backward
compatibility with existing data files.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Automation editor:
- IconSelect grid for condition logic (OR/AND) with descriptions
KC target editor:
- IconSelect for color mode (average/median/dominant) with SVG previews
- EntitySelect palette for picture source, pattern template, brightness source
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Autorestore fixes:
- Snapshot WLED state before connect() mutates it (lor, AudioReactive)
- Gate restore on auto_shutdown setting (was unconditional)
- Remove misleading auto_restore capability from serial provider
- Default auto_shutdown to false for all new devices
Protocol badge fixes:
- Show correct protocol per device type (OpenRGB SDK, MQTT, WebSocket)
- Was showing "Serial" for all non-WLED devices
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Auto-generates name from type + key config (waveform, audio mode, picture source)
for new value sources. Skips when editing or after manual name input.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Filter type picker: IconSelect with 3-column grid, auto-add on select, removed redundant + button
- Audio mode picker: IconSelect with SVG visualizations for RMS/Peak/Beat
- Capture engine grid: added per-engine icons and localized descriptions
- Fixed scroll flash during icon grid open animation (settled class after transitionend)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace plain filter type dropdown with icon grid showing each filter
with its icon and description. Selecting a filter immediately adds it
to the template (no separate "+" click needed).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
FPS chart stays always visible; timing, frames, keepalive, errors, and
uptime are collapsed behind an animated toggle. Error warning icon
appears next to target name when errors_count > 0. Uses CSS grid
0fr→1fr transition for smooth expand/collapse animation.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
