- 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>
- WebGL shader: theme-aware blending (tint toward accent on light, additive
glow on dark) with u_light uniform for proper light-theme visibility
- Cards: translucent backgrounds only on entity cards when bg-anim is active,
keeping modals/pickers/tab bars/header fully opaque
- Running card border and tab indicator: boosted contrast for light theme
- Header: backdrop-filter via pseudo-element to avoid breaking fixed tab-bar
- Color picker: move popover to document.body on mobile as centered bottom-sheet
- Add card: use --card-bg background and bolder + icon for visibility
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
overflow-x: hidden on body creates a scroll container that breaks
position: sticky. overflow-x: clip prevents horizontal overflow
without affecting the sticky context.
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>
Wrap edge canvases in container divs with position:relative + overflow:hidden,
and absolutely-position the canvases inside. This prevents canvas intrinsic
pixel dimensions from overriding CSS grid cell sizing.
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>
Animation section only has one field, so flatten it to a simple
form group with label instead of a details/summary wrapper.
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>
Uses the existing --border-angle animation to sweep a faint accent
gradient across the card background in sync with the rotating border.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Load Orbitron from Google Fonts for the h1 title and version badge.
Add animated gradient shimmer sweep and accent-colored text outline.
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>
Remove overflow:hidden from .card and .template-card that was clipping
the color picker popover. Combine noise field + particle glow into a
single GPU shader pass (40 drifting particles as uniforms).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
GPU-accelerated flowing noise field with accent-colored highlights.
Three layered noise octaves at different scales produce organic motion.
Renders at half resolution for minimal GPU load, zero color banding.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Canvas-based particle system with 60 glowing dots drifting upward,
tinted with the accent color. Eliminates the gradient banding issue
from the previous CSS blur approach. Renders at native resolution
with radial gradients for perfectly smooth glow.
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>
- Subtle radial glare follows cursor over card/template-card elements
using a single document-level mousemove listener (event delegation)
- Ambient background blob colors now derive from the selected accent
color with hue-shifted variants
- Glare intensity kept very subtle (3.5% dark / 12% light theme)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three blurred color blobs (green, blue, purple) slowly drift behind
the UI for atmosphere. Toggled via cloud icon in header, persisted
in localStorage, off by default. Works with both dark and light themes.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Targets with screen capture sources show 5 action buttons which
overflowed the card width. Scoped smaller padding to .card-actions
.btn-icon where target cards render.
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>
Remove completed/deferred items from TODO.md and add instruction
to use TODO.md as the primary task tracker instead of TodoWrite.
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>
Refactor OS notification listener into platform backends:
- Windows: winsdk toast polling (unchanged behavior)
- Linux: dbus-next monitoring of org.freedesktop.Notifications
Add [notifications] optional dependency group in pyproject.toml.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Show full-screen overlay with spinner when server is unreachable,
with periodic health checks that auto-hide on reconnect.
Add Gitea Actions workflow for auto-deploy on release tags.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Polls Windows notifications via winsdk UserNotificationListener API
and fires matching notification CSS streams with os_listener=True.
Includes history API endpoint for tracking captured notifications.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
WLEDProvider.create_client() was not filtering out the zone_mode kwarg
before passing to WLEDClient, causing a 409 error on target start.
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 header outside .container so it spans full viewport width
with its own padding, eliminating layout shift on scroll.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Target cards use responsive grid based on 500px min-width,
automatically adapting column count to screen width.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Perf charts: 3 equal columns filling full width, single column on mobile
- Chart height increased from 60px to 100px
- Fix Chart.js canvas not shrinking with min-width: 0 and overflow: hidden
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>
POST /api/v1/system/auto-backup/trigger creates a backup on demand
and returns the created file info (filename, size, timestamp).
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>
The tree-layout used align-items: flex-start for the desktop sidebar,
but when switching to column direction at <900px this prevented children
from stretching to full width. Add align-items: stretch in the media
query and lower grid minmax values so cards use 2+ columns.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove the separate tags form-group (label, hint toggle, hint text)
from all 14 editor modals and place the tags container directly
below the name input for a cleaner, more compact layout.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Fixed button in bottom-right corner appears after scrolling 300px,
fades in with slide-up animation, smooth-scrolls to page top on click.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
