Skip to content

Grid editor#15

Merged
GhostTypes merged 41 commits intomainfrom
grid-editor
Nov 2, 2025
Merged

Grid editor#15
GhostTypes merged 41 commits intomainfrom
grid-editor

Conversation

@GhostTypes
Copy link
Copy Markdown
Member

@GhostTypes GhostTypes commented Nov 2, 2025

New Features

Grid Editor & Customizable Layouts

  • GridStack Layout System: Implemented fully customizable dashboard with draggable/resizable panels in both Electron app and WebUI (f616dcd, eb137fe, 2221d9a)
  • Component Pinning System: Added ability to pin dashboard components to topbar shortcuts and open in standalone dialogs with synchronized real-time updates
    (13dc8cf)
  • Mobile-Responsive WebUI: Automatic layout switching at 768px breakpoint with optimized single-column layout for mobile devices (b07c3d5)
  • Layout Persistence: Per-printer layout saving using serial numbers in localStorage with layout history and version management (f616dcd)
  • Component Palette: Interactive dialog for managing component visibility and pinning with visual status indicators (68666ea, b08e7cd)
  • Edit Mode Controls: Toggle dashboard editing with visual indicators and keyboard shortcuts (2221d9a)

Auto-Update System

  • GitHub Integration: Comprehensive auto-update using electron-updater with stable and alpha release channels (1f28d5d)
  • Update Dialog: Real-time progress tracking, release notes display with HTML sanitization, and manual update controls (764d087, 1f28d5d)
  • Platform Support: Auto-download on Windows/macOS with manual extraction workflow (b93bd13)
  • Settings Integration: Channel selection, check-on-launch preferences, and manual update checking (1f28d5d)

User Interface Enhancements

  • Lucide Icon System: Migrated from emoji/text icons to professional SVG icon library throughout entire application (683796c, 3b86865, 38c4448, 07b41fd, b08e7cd)
  • Hamburger Menu: Consolidated topbar with collapsible dropdown menu replacing individual action buttons (1b4316d)
  • Keyboard Shortcuts: Added shortcuts for Connect (Ctrl/Cmd+K), Settings (Ctrl/Cmd+,), Status (Ctrl/Cmd+I), IFS (Ctrl/Cmd+M), and Configure Shortcuts (Ctrl/Cmd+P)
    with visual indicators (b9f7e71)
  • Tabbed Settings Dialog: Reorganized settings into Camera, Notifications, Network, Appearance, Advanced, and Printer Settings tabs with localStorage persistence
    (5fda8d4)
  • Tabbed Status Dialog: Comprehensive status display with Overview, Printer, WebUI, Camera, and System tabs including keyboard navigation (d2d2499)
  • Rounded Window System: Standardized dialog creation with OS-native and CSS-based rounding options (5fda8d4)

WebUI Features

  • AD5X Material Station Matching: Material-to-slot mapping interface for multi-color jobs with visual feedback and validation (77bdba4)
  • Passwordless Mode: Optional toggle to disable Web UI password requirement for trusted networks (581bc6e)
  • GridStack Integration: Modern dark theme matching Electron app with customizable dashboard panels (f616dcd)
  • Settings Modal: Component visibility controls and edit mode toggle (f616dcd)
  • Demo Mode Support: Testing without printer connection using DEMO_SERIAL fallback (f616dcd)

Development & Infrastructure

  • GitHub Packages Migration: Replaced local dependencies with @ghosttypes/ff-api and @parallel-7/slicer-meta from GitHub Package Registry (6731486, 1d764c0)
  • Changelog Generator: Added /changelog slash command for professional changelog generation from git history (dc41efe, 77bdba4)

🔨 Improvements

UI/UX Refinements

  • Compact Grid Layout: Space-efficient component design with consistent panel headers, reduced padding, and improved information density (947a90a)
  • Component Sizing: Increased default heights for bottom-row components from 80px to 160px to prevent squished appearance (68666ea)
  • Visual Polish: Modern gradient scrollbars, glass-morphic effects with backdrop blur, smooth transitions, and state-based color glows (2221d9a)
  • Typography Enhancement: Improved hierarchy and readability across all components (2221d9a)
  • Shortcut Labels: Platform-aware display (Cmd on Mac, Ctrl on Windows) with proper ARIA attributes (b9f7e71)

Component Enhancements

  • Log Panel Controller: Unified rendering logic shared across GridStack widgets, component dialogs, and standalone log window (df82527)
  • Log Panel Flexibility: Removed fixed height constraints, using flexbox to fill available space (8710553)
  • Job Components: Updated job-info and job-stats with Lucide icon system for consistent styling (1488405)
  • LED Control Logic: Auto-enable for 5M/AD5X models (TCP), 5M Pro uses HTTP API, with clear logging indicating API path (ae8176d)

Layout Management

  • Grid Validation: Robust sanitization with type coercion and constraint enforcement to handle invalid configuration (9ee555a)
  • Layout History: JSON validation in LayoutPersistence.ts to prevent runtime errors from malformed data (8570f7b)
  • Grid Scaling: Proper margin/gap settings (margin: 8, gap: 12px, cellHeight: 80) matching Electron app (f616dcd)
  • Component Registry: Updated with semantic icon names and proper default/minimum sizes (2221d9a, 68666ea)

WebUI Improvements

  • Mobile Layout Manager: Static single-column layout with viewport detection using matchMedia API (b07c3d5)
  • Button Event Delegation: Replaced individual listeners with event delegation on grid container for dynamic components (1d7ea08)
  • Camera Stream Management: Proper cleanup on layout transitions and initialization after grid setup (b07c3d5, 1d7ea08)
  • Icon Hydration Utilities: toPascalCase and hydrateLucideIcons for dynamic icon rendering (683796c)
  • Release Notes Rendering: HTML sanitization with allowlist of safe tags and improved formatting (764d087)

Code Quality

  • Type Safety: Enhanced preload validation across component-dialog, shortcut-config, and palette (8570f7b)
  • Error Handling: Improved validation functions for IPC response payloads (8570f7b)
  • Console Noise Reduction: Converted repetitive warnings to debug logs for optional elements (8710553)
  • Documentation: Updated CLAUDE.md and AGENTS.md with lessons about dialog preloads and GridStack patterns (8710553, 26a15d5)

🐛 Bug Fixes

Critical Fixes

  • RTSP Streaming: Fixed initialization when WebUI disabled and undefined settings persistence (2103d28)
    • Initialize RtspStreamService unconditionally in both standard and headless modes
    • Settings now properly default to 30 FPS and quality 3
  • macOS Auto-Update: Resolved "ZIP file not provided" error by adding ZIP build target (b93bd13)
  • Headless Mode Config Path: Fixed macOS/Linux reading wrong directory for per-printer settings (9d3691b)
    • Created bootstrap.ts to set app name before module imports
  • CORS Middleware: Removed restrictive middleware blocking non-RFC 1918 IP ranges (5b129a5)

Component Fixes

  • Lucide Icon Rendering: Fixed palette dialog icons by adding CommonJS exports shim and updating CSP (b08e7cd)
  • Pinned Dialog Lifecycle: Restored polling payload usage and enhanced cleanup logging (8570f7b)
  • GridStack Initialization: Ensured component manager completes after widget loading to fix polling (dc41efe)
  • WebUI Camera Stream: Restored streaming after GridStack refactor by moving initialization to proper lifecycle point (1d7ea08)
  • Grid Component Squishing: Prevented collapse with min-height safeguards and proper default sizes (68666ea)

Layout & Rendering

  • Camera Preview Rotation: Fixed GPU artifact accumulation in rotation handling (1f28d5d)
  • Grid Widget IDs: Renamed to 'grid-{id}-content' to prevent CSS collisions with dialog chrome (df82527)
  • Model Preview Selector: Fixed to target nested .panel-content within grid components (1d7ea08)
  • Palette Window Sizing: Enlarged to 350×700px for better UX (68666ea)

Connection & Settings

  • Per-Printer Settings: Preserved on reconnect in ConnectionFlowManager (6731486)
  • Headless Context: Only forward active context polling data to WebUI (6731486)
  • Auto-Activate Headless: Ensure headless connections activate context for WebUI compatibility (6731486)

📚 Documentation

  • Specification Archive: Moved 11 completed feature specs to ai_specs/archive/ for better organization (26a15d5)
  • AI Specs Directory: Added CAMERA_PRIORITY_SPEC.md, LED-CONTROL-SPEC.md, webui-push-notifications.md (ae8176d, 683796c, 26a15d5)
  • Project Documentation: Updated CLAUDE.md and AGENTS.md with ai_specs/ folder guidance (26a15d5, 8710553)
  • User Guide Link: Added link to user guide in documentation (381b081)
  • Hamburger Menu Spec: Archived comprehensive specification after implementation (1b4316d)
  • Changelog Command: Enhanced with comprehensive commit analysis requirements (77bdba4)

🔧 Maintenance

Build System

  • Webpack Configuration: Extended with component-dialog and shortcut-config-dialog entry points (13dc8cf)
  • Asset Pipeline: Configured copy-webui-assets.js to include lucide.min.js and GridStack libraries (3b86865, f616dcd)
  • TypeScript Config: Updated WebUI to ES2020/ESNext for module support (f616dcd)
  • CI Improvements:
    • Switched from npm install to npm ci for faster builds (9d3691b)
    • Added platform-specific build commands (9d3691b)
    • Disabled source maps and declaration files in production (9d3691b)
    • Configured .npmrc for GitHub Packages authentication (1d764c0)

Dependency Management

  • Package Migration: Updated to @ghosttypes/ff-api and @parallel-7/slicer-meta from GitHub Packages (6731486)
  • Import Updates: Updated all imports throughout codebase to use scoped package names (6731486)
  • Lucide Package: Added lucide v0.552.0 to dependencies (3b86865)
  • GridStack: Integrated gridstack library for layout management (f616dcd)

Code Organization

  • Shared Utilities: Created src/ui/shared/lucide.ts and src/utils/icons.ts for icon management (3b86865)
  • Log Panel Refactor: Introduced reusable LogPanelController eliminating code duplication (df82527)
  • Window Factories: Added ComponentDialogWindowFactory and ShortcutConfigWindowFactory (13dc8cf)
  • IPC Handlers: New component-dialog-handlers and shortcut-config-handlers (13dc8cf)
  • Manager Classes: ShortcutConfigManager for persisting user preferences (13dc8cf)

Cleanup

  • Removed Update Dismissal: Eliminated DismissedUpdateVersion config option to ensure users see updates (764d087)
  • CSS Cleanup: Removed obsolete .close-button styles and fixed icon pseudo-elements (38c4448, 683796c)
  • Legacy Removal: Removed #log-panel-container from main layout (df82527)
  • Unused Code: Removed activeComponent tracking and duplicate initialization logic (8570f7b)
  • CORS Removal: Eliminated createCorsMiddleware() and related functionality (5b129a5)

🎨 UI/Styling

Theme & Design System

  • CSS Variables: Enhanced color palette, shadows, and transitions (2221d9a)
  • Modern Gradients: Applied to scrollbars, panels, headers, and backgrounds (2221d9a)
  • Glass Morphism: Backdrop blur effects throughout interface (2221d9a)
  • Dark Theme: Unified dark theme across Electron app and WebUI (f616dcd)
  • Component Styling: Consistent design language across 10+ components (2221d9a)

Component Visuals

  • Panel Headers: Gradient backgrounds with subtle shadows (947a90a)
  • Button Designs: Modern hover/active states with consistent spacing (2221d9a)
  • Card Refinements: Subtle gradients and shadows for depth (2221d9a)
  • Window Controls: Lucide icons sized to match Windows 10/11 native appearance (07b41fd)
  • Dialog Close Buttons: Consistent 18px Lucide 'x' icons across all 16 dialog windows (38c4448)

Layout & Spacing

  • Compact Design: Reduced padding (10px/8px), gaps (6-8px), and font sizes (10-15px) for information density (947a90a)
  • Grid Spacing: Professional spacing and alignment across all screen sizes (2221d9a)
  • Responsive Breakpoints: Adaptive layouts for mobile and desktop (b07c3d5)
  • Flex Wrapping: Overflow handling to prevent content squishing (9ee555a)

Icons & Graphics

  • Icon System: Complete migration to Lucide with consistent sizing (stroke-width: 2) (683796c)
  • ARIA Attributes: Proper accessibility labels on all icon elements (683796c)
  • Dynamic Rendering: Component-specific icons with proper hydration (b08e7cd)
  • Status Indicators: Pin, check, lock/unlock icons with semantic meaning (683796c, 1488405)

⚙️ Technical Details

Architecture Changes

  • Multi-Window System: Component dialogs share renderer bundle, CSS, and IPC surface with main window (13dc8cf)
  • Real-Time Synchronization: polling-update events synchronized across all windows (13dc8cf)
  • Dual Layout System: GridStack for desktop, static for mobile with viewport-aware switching (b07c3d5)
  • Event Delegation Pattern: Grid container handles dynamic component events (1d7ea08)

IPC Enhancements

  • Shortcut Configuration: IPC handlers for shortcut config and component dialog lifecycle (13dc8cf)
  • Log Service Integration: Preloaded message history with synchronized new entries and multi-window clear (13dc8cf)
  • Status Updates: Fixed push notification listener to properly receive updates (d2d2499)
  • Channel Whitelisting: Added 'log-dialog-request-logs' for history hydration (df82527)

Performance

  • Viewport Detection: Efficient breakpoint monitoring using matchMedia API (b07c3d5)
  • Layout Persistence: localStorage-based with JSON validation (f616dcd, 8570f7b)
  • Stream Cleanup: Proper resource management on layout transitions (b07c3d5)
  • Grid Optimization: Proper scaling and constraint enforcement (f616dcd, 9ee555a)

Complete design system overhaul with unified modern aesthetic:

Core Improvements:
- Enhanced CSS variables with new color palette, shadows, and transitions
- Modern gradient scrollbar with smooth interactions
- Glass-morphic effects with backdrop blur throughout

Component Styling:
- Unified design language across all 10+ components
- Enhanced typography with improved hierarchy and readability
- Modern button designs with consistent hover/active states
- Refined cards with subtle gradients and shadows
- Dynamic sizing optimized for grid flexibility

Visual Polish:
- Smooth transitions and micro-interactions
- State-based color glows for better visual feedback
- Improved contrast and accessibility
- Professional spacing and alignment
- Adaptive layouts for all screen sizes

All components now work seamlessly with the grid editor,
looking professional at any configuration or resolution.
Refine grid editor components with space-efficient layout and consistent panel headers

Changes applied to all grid editor components:
- Add structured panel header/content layout with consistent styling
- Reduce padding, gaps, and font sizes for more compact display
- Standardize panel headers with gradient backgrounds and subtle shadows
- Improve text alignment (labels left, values right) for better readability
- Reduce minimum heights and dimensions throughout for denser information display
- Add overflow handling to support scrolling in constrained spaces

Components updated:
- additional-info: Added panel header, reduced row heights from 50px to 36px
- controls-grid: Added panel header, reduced button padding and gaps
- filtration-controls: Added panel header, compact layout with smaller buttons
- printer-status: Added panel header, reduced spacing and font sizes
- temperature-controls: Replaced custom header with standard panel header, reduced card sizes

All components now follow consistent design patterns with:
- Panel headers: 10px padding, 13px font, gradient background
- Panel content: 10px/8px padding, 6px gaps, scrollable overflow
- Reduced font sizes: labels 10-11px, values 14-15px (previously 12-20px)
- Compact spacing: 6-8px gaps (previously 10-14px)

This creates a more information-dense interface while maintaining readability and professional appearance.
- Fix polling not starting and UI not updating by ensuring component
  manager completes initialization after GridStack widget loading
- Add /changelog slash command for generating professional changelogs
  from git commit history with conventional commit categorization
Add a comprehensive shortcut button system that allows users to pin any
GridStack component to the topbar and open it in a standalone Electron
dialog window.

Core Features:
- Pin configuration UI with dropdown selectors for 3 shortcut slots
- Standalone component dialogs that share renderer bundle, CSS, and IPC
  surface with main window
- Real-time polling-update events synchronized across all windows
- Component-specific integrations (camera controls, filtration buttons,
  controls grid commands) fully functional in dialogs
- LogService integration with preloaded message history, synchronized
  new entries, and multi-window clear support

Technical Implementation:
- New webpack entries for component-dialog and shortcut-config-dialog
- IPC handlers for shortcut configuration and component dialog lifecycle
- ShortcutConfigManager for persisting user preferences
- Automatic grid layout filtering to exclude pinned components
- Dynamic palette updates to reflect both in-use and pinned components
- Dark theme styling applied to all dialog windows

Files Added:
- src/ui/component-dialog/* - Standalone component dialog system
- src/ui/shortcut-config-dialog/* - Pin configuration interface
- src/ui/shortcuts/* - Shortcut configuration management
- src/ipc/handlers/{component-dialog,shortcut-config}-handlers.ts
- src/windows/factories/{ComponentDialog,ShortcutConfig}WindowFactory.ts
- ai_specs/CUSTOM_SHORTCUT_BUTTONS_*.md - Feature specification docs

Modified Components:
- Log panel enhanced with loadInitialEntries() for history preload
- Palette handlers updated to track pinned component status
- Renderer updated with shortcut button initialization and grid reload
- Webpack config extended with new dialog entry points
Component dialog improvements:
- Removed unused activeComponent tracking in component-dialog.ts
- Restored direct polling payload usage with isPollingData guard
- Enhanced cleanup logging to show component ID on window unload
- Fixed preload to use type-only import for global augmentations

Renderer refactoring:
- Restored original createComponentForGrid behavior with BaseComponent return type
- Removed duplicate component initialization logic (initializeComponents)
- Components now created/registered exclusively through GridStack setup
- Removed redundant log panel reference wiring from GridStack onChange

Preload type safety across dialogs:
- Added comprehensive type guards in component-dialog-preload.ts
- Enhanced shortcut-config-dialog-preload.ts with validation functions
- Improved palette-preload.ts with ComponentDefinition array validation
- All preloads now properly validate IPC response payloads

Layout persistence improvements:
- Added parseHistory method with JSON validation in LayoutPersistence.ts
- Validates history entries before use to prevent runtime errors
- Enhanced error logging for malformed history data

Documentation:
- Updated changelog.md for clarity on breaking change detection
- Removed unused WINDOW_SIZES import from ShortcutConfigWindowFactory
- Remove fixed 150px height from log-panel component CSS
- Use flexbox layout to fill available space in both grid and dialogs
- Make log-dialog container flexible to properly fill window space
- Reduce console noise by converting repetitive warnings to debug logs
  for optional/missing UI elements and edit mode state changes
- Document recent lessons about component dialog preloads and GridStack
  initialization patterns in CLAUDE.md and AGENTS.md
Replace local file dependencies with GitHub Package Registry for ff-api
and slicer-meta packages. This streamlines the build process and simplifies
dependency management across development and CI environments.

Changes:
- Update package.json to use @ghosttypes/ff-api and @parallel-7/slicer-meta
- Update all imports from 'ff-api' to '@ghosttypes/ff-api'
- Update all imports from 'slicer-meta' to '@parallel-7/slicer-meta'
- Simplify GitHub Actions workflow (remove manual dependency cloning)
- Add .npmrc to .gitignore for security
- Fix ConnectionFlowManager to preserve per-printer settings on reconnect
- Fix HeadlessManager to only forward active context polling data to WebUI
- Ensure headless connections activate their context for WebUI compatibility
The GitHub Actions workflow was setting GITHUB_TOKEN as an environment
variable but wasn't creating the .npmrc file that npm needs to authenticate
with GitHub Packages. This caused 401 errors when trying to install
@ghosttypes/ff-api and @parallel-7/slicer-meta packages.

Now properly creates .npmrc with package registry configuration and
authentication token before running npm install.
Fixed critical bug where headless mode on macOS and Linux was reading
per-printer settings from the wrong directory, causing custom camera
and LED configurations to appear as "not configured" even though they
worked in normal UI mode.

Root cause: Module import order caused ConfigManager and
PrinterDetailsManager singletons to capture app.getPath('userData')
before app.setName('FlashForgeUI') was called, resulting in different
paths for headless vs normal mode.

Solution: Created bootstrap.ts to set app name before any module imports,
ensuring all singletons use the correct userData path across all platforms
and execution modes.

Also includes CI improvements:
- Switch from npm install to npm ci in GitHub Actions for faster builds
- Add platform-specific CI build commands
- Disable source maps and declaration files in production builds
Unify LED control routing across Main UI and WebUI:
- Auto-enable LED control for 5M and AD5X models (TCP API)
- 5M Pro uses HTTP API for builtin LEDs
- Generic Legacy requires manual Custom LEDs setting
- Add clear logging indicating which API path is used
- Fix LED button legacy support flags in controls grid

Move AI specification documents to ai_specs/ directory for better
organization and cleaner root directory structure.
Introduced a reusable LogPanelController in src/ui/shared/log-panel/ that provides consistent log rendering across GridStack widgets, the component dialog, and the standalone log dialog. This eliminates code duplication and ensures identical behavior in all contexts.

Key changes:
- Created LogPanelController with shared rendering logic and event handling
- Refactored LogPanelComponent to delegate to the controller
- Updated log dialog renderer to use the controller
- Whitelisted 'log-dialog-request-logs' IPC channel for history hydration
- Renamed GridStack widget content IDs to 'grid-{id}-content' to prevent CSS collisions
- Restored legacy #log-panel-container hiding in main layout
- Scoped GridStack absolute positioning to prevent interference with dialog chrome
- Moved parseLogEntry utility to shared module for reuse

The log panel now displays consistently whether rendered in the dashboard grid, pinned in the component dialog, or opened as a standalone window.
Increased default height for bottom-row grid components from 1 to 2 grid units
(80px → 160px) to provide adequate space for headers, padding, and content.
This fixes an issue where new users would see severely collapsed components
with barely any visible content.

Changes:
- ComponentRegistry: Updated defaultSize and minSize for printer-status,
  temperature-controls, filtration-controls, and additional-info components
  to h:2 (previously h:1)
- defaults.ts: Increased minRow from 9 to 10, updated affected widget
  configs to use h:2 and minH:2
- gridstack.css: Added min-height: 160px CSS safeguard to prevent collapse
- palette.css: Enlarged component palette window to 350×700px for better UX
- WindowTypes.ts: Updated COMPONENT_PALETTE dimensions to match
Removed restrictive CORS middleware that was blocking WebUI login
for users on networks using non-RFC 1918 IP ranges (e.g., 192.166.x.x).
The middleware was rejecting requests with 403 Forbidden before login
could complete.

Changes:
- Removed createCorsMiddleware() from auth-middleware.ts
- Removed CORS middleware usage from WebUIManager.setupMiddleware()
- Updated fileoverview documentation to remove CORS references

Security remains intact:
- Password authentication still required
- JWT token validation on all protected routes
- Login rate limiting (5 attempts per 15 minutes)
- WebSocket authentication enforced

Also includes new Spoolman integration specification document.
Completely refactored the FlashForge WebUI to implement a customizable dashboard layout system using GridStack, matching the modern dark theme of the Electron app.

Key Changes:
- Implemented GridStack.js for draggable/resizable dashboard panels
- Per-printer layout persistence using serial numbers in localStorage
- Demo mode support for testing without printer connection (DEMO_SERIAL fallback)
- Modern dark theme with CSS custom properties matching Electron app
- Separate Filtration & TVOC component split from temperature controls
- Settings modal for component visibility and edit mode toggle
- Proper grid scaling matching Electron app (margin: 8, gap: 12px, cellHeight: 80)

New Files:
- WebUIComponentRegistry.ts: Component definitions and templates
- WebUIGridManager.ts: GridStack wrapper for layout management
- WebUILayoutPersistence.ts: localStorage persistence layer
- types.ts: TypeScript type definitions for grid system
- gridstack-extra.min.css: Custom GridStack styling
- WEBUI_REFACTOR_SPEC.md: Complete refactor specification

Modified Files:
- app.ts: Grid initialization, settings UI, per-printer layout switching
- index.html: Restructured for GridStack container and settings modal
- webui.css: Modern theme with CSS variables, full-width grid layout
- tsconfig.json: Updated to ES2020/ESNext for module support
- copy-webui-assets.js: Added GridStack library to build process

All existing functionality preserved - LED controls, temperature management, job progress, camera streaming, and multi-printer support remain fully functional.
- Add robust layout sanitization with type coercion and constraint enforcement
- Ensure all dimension values are valid integers with min/max validation
- Update default component layout (v2) with better panel sizes and positioning
- Increase grid minRow to 11 to accommodate taller panels
- Add flex wrapping and overflow handling to prevent content squishing
- Move WEBUI_REFACTOR_SPEC.md to ai_specs/ directory for better organization

These changes ensure the GridStack layout remains stable even with invalid
or out-of-bounds configuration values, while providing a more balanced
default layout for the WebUI.
Add comprehensive auto-update capabilities using electron-updater with
support for stable and alpha release channels. Includes:

- AutoUpdateService for managing update lifecycle and state
- Update dialog UI with progress tracking and install controls
- Settings panel integration with channel selection and preferences
- GitHub publish configuration for automatic update distribution
- Release workflow updates to publish update manifests
- Platform-specific auto-download support detection
- Fix camera preview GPU rotation artifact accumulation

The system supports check-on-launch, auto-download (Windows/macOS),
manual update checks, and per-version dismissal. Update dialogs provide
real-time progress and release notes display.
…tack refactor

The GridStack layout migration broke camera streaming and button click handlers
because components are now dynamically created within grid items, breaking the
original event listener setup that expected direct DOM element access.

Changes:
- Move camera stream initialization to loadLayoutForCurrentPrinter() to ensure
  it runs after grid/layout setup completes
- Add camera stream check in loadPrinterFeatures() with grid initialization guard
- Replace individual button listeners with event delegation on grid container
- Fix model preview selector to target nested .panel-content within component
- Remove premature camera loading from updateFeatureVisibility()

This fixes buttons not responding to clicks and camera streams failing to load
when switching between printers or reloading layouts.
…hing

Implement comprehensive mobile support for WebUI with automatic layout
switching at 768px breakpoint:

- Add WebUIMobileLayoutManager for static single-column mobile layout
- Implement viewport detection with matchMedia API for efficient breakpoint monitoring
- Create dual layout system: GridStack for desktop, static for mobile
- Add proper camera stream cleanup on layout transitions
- Update button event listeners to work with both layout containers
- Hide settings button and edit mode controls on mobile (not applicable)
- Maintain layout persistence: desktop custom layouts preserved when switching

Mobile component order optimized for vertical scrolling:
Camera → Job Progress → Controls → Printer State → Temperature Control
→ Model Preview → Job Details → Filtration/TVOC
Reorganize project specifications by moving completed feature specs to
ai_specs/archive/ and updating documentation to clarify the distinction
between active and completed work.

- Archive 11 completed feature specifications
- Add new CAMERA_PRIORITY_SPEC.md for active development
- Update CLAUDE.md and AGENTS.md with ai_specs/ folder guidance
- Fix update dialog sizing to make release notes visible
Removes the "dismiss update" functionality to ensure users always see important updates, and significantly enhances the update dialog's release notes display with HTML sanitization and proper formatting.

Changes:
- Remove DismissedUpdateVersion config option and all dismiss functionality
- Remove "Remind Me Later" button from update dialog
- Add HTML sanitization for release notes with allowlist of safe tags
- Improve release notes formatting (convert plain text to HTML with paragraphs)
- Fix update channel switching to properly set autoUpdater.channel
- Remove releaseType from electron-builder config (use default)
Fix critical bugs preventing RTSP camera streaming when WebUI is disabled
and resolve undefined RTSP settings being persisted to disk.

Changes:
- Initialize RtspStreamService unconditionally in both standard and headless modes
  (src/index.ts) to ensure ffmpeg detection happens regardless of WebUI state
- Remove duplicate RTSP initialization from WebUIManager (now happens globally)
- Fix settings-renderer to read HTML default values (30 FPS, quality 3) instead
  of early return when per-printer settings don't exist
- Add safety defaults in printer-settings-handlers before persisting to disk

Root Causes Fixed:
1. RtspStreamService was conditionally initialized only when WebUI enabled,
   causing "ffmpeg not available" errors despite ffmpeg being installed
2. Settings UI logic prevented HTML defaults from being captured, resulting
   in undefined values being saved and passed to streaming service

Impact:
- RTSP cameras now work in all modes (WebUI enabled, disabled, headless)
- Settings properly default to 30 FPS and quality 3
- No more undefined values persisted to printer_details.json

Related to issue #13
Adds ZIP build target for macOS to resolve electron-updater error.
The auto-update system downloads the ZIP file which users then
manually extract and install.

Changes:
- Add ZIP target to electron-builder config for macOS builds
- Update dialog button text from "Open Installer" to "Show in Finder"
- Update platform notice to reference ZIP extraction process
- Clarify success/error messages for downloaded file handling
Implement material-to-slot mapping interface for AD5X multi-color jobs in the WebUI, enabling users to assign specific material station slots to each tool before starting a print.

This enhancement brings AD5X job starting capabilities to the WebUI that were previously only available in the desktop application. When starting a multi-color job, users are now presented with a modal dialog to map each tool's material requirement to available material station slots, with visual feedback for material/color matching.

Key changes:
- New material matching modal UI with tool-to-slot assignment interface
- Material station status API endpoint for real-time slot availability
- Extended job metadata to include AD5X tool data and requirements
- Visual indicators for multi-color jobs in file browser
- Material mapping validation with duplicate detection
- Color/material matching warnings to help users avoid mistakes

Related to #14

Also includes improvements to changelog generation command with comprehensive commit analysis requirements.
…ndows

This refactoring improves the user experience by reorganizing the settings dialog into a clean tabbed interface (Camera, Notifications, Network, Appearance, Advanced, and Printer Settings tabs) instead of a cluttered single-page layout. The tabs are keyboard-accessible, support localStorage persistence, and dynamically show/hide per-printer settings based on connection state.

Additionally, this commit standardizes the dialog/window creation system across the entire codebase to ensure proper window rounding behavior:
- OS-native rounded corners (Windows 11, macOS)
- Optional internal CSS-based rounding mode (user-configurable setting)
- Consistent dialog-container--full class usage across all dialog templates
- Unified WindowConfig interface for all window factories
Replace individual topbar buttons (Connect, Settings, Status, IFS) with a
collapsible hamburger menu dropdown for a cleaner header layout. The "Configure
Shortcuts" button also moves into the menu behind a divider.

Key changes:
- Add hamburger menu button with smooth dropdown animations
- Migrate all main action buttons into menu items with icons
- Implement menu state management with click-outside and ESC key handlers
- Update layout to left-align title and improve spacing
- Move IFS button logic to menu item visibility control

The new menu provides better visual hierarchy while maintaining all existing
functionality through accessible keyboard and mouse interactions.
Replace custom inline SVG icons with Lucide icon library for better maintainability and consistency.

Changes:
- Add lucide package (v0.552.0) and configure build pipeline
- Create shared icon utilities in src/utils/icons.ts and src/ui/shared/lucide.ts
- Update main UI (hamburger menu, menu items) to use Lucide icons
- Migrate all dialog windows to Lucide:
  * Auto-connect choice dialog
  * Connect choice dialog
  * Printer connected warning dialog
  * Shortcut configuration dialog
- Update CSS for modern icon sizing and styling
- Add window.lucideHelpers global for dialog initialization
- Configure copy-webui-assets.js to include lucide.min.js

Benefits:
- Consistent icon system across entire application
- Easier to add/modify icons without custom SVG markup
- Better maintainability with standardized icon components
- Cleaner HTML with data-lucide attributes
Add WebUIPasswordRequired configuration flag to allow passwordless Web UI access on trusted networks.

Configuration changes:
- Add WebUIPasswordRequired flag to AppConfig (defaults to true for security)
- Update settings dialog with "Require Web UI Password" toggle
- Disable password input field when authentication is not required
- Add informational warning about security implications

Backend changes:
- AuthManager: Skip token validation when authentication disabled
- WebSocketManager: Allow connections without tokens in passwordless mode
- Auth middleware: Bypass authentication checks when not required
- WebUIManager: Handle login endpoint in passwordless mode

Frontend changes:
- Fetch /api/auth/status on initialization to determine auth requirements
- Skip login screen when authentication is disabled
- Omit Authorization headers when not required
- Handle logout flow appropriately for both modes
Replace text-based window control symbols (—, □, ×) with Lucide SVG icons
for minimize, maximize, and close buttons on Windows/Linux platforms.

Changes:
- Use Lucide 'minus', 'square', and 'x' icons for window controls
- Size icons to 16px to match Windows native appearance
- Remove button margins for seamless edge-to-edge hover backgrounds
- Add proper aria-labels for accessibility
- Apply CSS overrides with !important to control Lucide's default sizing

Icon sizing tuned to match Windows 10/11 window controls with proper
stroke-width (1.5) for clean, crisp appearance on all displays.

macOS traffic lights remain unaffected as they use separate CSS classes.
Redesigns the status dialog with a comprehensive tabbed interface that organizes
printer, WebUI, camera, and system information into logical sections. Adds an
Overview tab that provides a quick at-a-glance summary of all status indicators.

Key improvements:
- Tabbed navigation with Overview, Printer, WebUI, Camera, and System tabs
- Tab state persistence using localStorage
- Full keyboard navigation support (arrow keys, Home, End)
- Fixed IPC push notification listener to properly receive status updates
- Refactored renderer into class-based architecture for better organization
- Improved responsive layout with grid-based summary cards
- Enhanced accessibility with ARIA attributes and focus management
- Aligned visual styling with existing rounded dialog templates
Finalize the migration of all remaining dialog close buttons from the text-based '×'
character to the Lucide 'x' icon. This brings consistency with the recent Lucide icon
adoption across the entire application.

Changes include:
- Add Lucide library scripts and initialization to all dialog HTML files
- Replace text-based '×' close buttons with <i data-lucide="x"> icon elements
- Update initializeLucideIconsFromGlobal() calls to include 'x' icon
- Refine .dialog-close button styling for consistent icon sizing (18px)
- Clean up obsolete .close-button styles in job-picker.css
- Reorganize script loading order in printer-connected-warning.html

All 16 dialog windows now use consistent Lucide icons:
- Component dialog
- IFS dialog
- Input dialog
- Job picker
- Job uploader
- Log dialog
- Material info dialog
- Material matching dialog
- Printer connected warning
- Printer selection
- Send commands
- Settings
- Shortcut config dialog
- Single color confirmation dialog
- Status dialog
Implement keyboard shortcuts for main menu actions with visual shortcut indicators displayed in the dropdown menu. Adds a MenuShortcutManager class to handle keyboard events with proper platform detection (Cmd on Mac, Ctrl on Windows).

Features:
- Connect: Ctrl+K / Cmd+K
- Settings: Ctrl+, / Cmd+,
- Status: Ctrl+I / Cmd+I
- IFS: Ctrl+M / Cmd+M (when available)
- Configure Shortcuts: Ctrl+P / Cmd+P

Changes:
- Add MenuShortcutManager class with keyboard event handling
- Prevent shortcuts from firing when user is typing in input fields
- Update menu item layout to display shortcut labels on the right
- Add proper ARIA keyshortcuts attributes for accessibility
- Dynamically update shortcut labels based on platform (Mac/Windows)
- Integrate with existing menu visibility logic (IFS menu item)
This commit completes the comprehensive migration from emoji and text-based icons to Lucide SVG icons throughout the entire application. This modernization improves visual consistency, accessibility, and provides better sizing control across all UI components.

**Main Application:**
- Migrated loading overlay success (✓) and error (✕) icons to lucide check-circle and x-circle
- Updated component registry with semantic icon names (camera, gamepad-2, box, printer, thermometer, wind, info, scroll-text)
- Converted edit mode indicator to use lucide pencil icon
- Removed legacy CSS icon pseudo-elements from shortcut buttons

**Dialogs:**
- Component dialog: Migrated header icon to dynamic Lucide rendering with proper hydration
- Material info dialog: Converted Material Station indicator to lucide factory icon
- Material matching dialog: Replaced text × with lucide x icon for remove buttons
- Settings dialog: Updated macOS warning icon to lucide alert-triangle
- Shortcut config: Migrated all component icons to Lucide with proper rendering

**Components:**
- Palette: Updated component icons, pinned (pin), and in-grid (check) status badges
- Log panel: Converted title icon to lucide scroll-text
- Edit mode controller: Replaced emoji pencil with Lucide icon

**WebUI:**
- Implemented Lucide icon hydration utilities (toPascalCase, hydrateLucideIcons)
- Migrated edit mode lock/unlock toggle to dynamic lucide lock/unlock icons
- Updated settings icon initialization

**Logger:**
- Replaced emoji checkmark (✓) and cross (✗) with text prefixes [OK] and [FAIL] for better terminal compatibility

**Additional:**
- Added new WebUI push notifications specification document
- Updated Claude settings to allow chrome.com WebFetch for development

All Lucide icons now use consistent sizing (stroke-width: 2) and proper ARIA attributes for accessibility.
…mponents

- Consolidate WebUI push notifications spec from 1686 to 223 lines
  - Focus on localhost-only implementation with clear architectural summary
  - Define core components: WebPushSubscriptionManager, WebPushService, and service worker
  - Simplify requirements for client ID tracking and subscription persistence
  - Document VAPID key management and rate limiting approach

- Update job-info and job-stats components with Lucide icon system
  - Replace emoji/text indicators with consistent SVG icons
  - Improve visual styling and layout for better readability

- Extend lucide.ts with additional icons for job tracking UI
- Improve shortcut-config-dialog keyboard navigation consistency
Fixed two critical issues preventing Lucide icons from rendering in the
palette dialog:

1. Added CommonJS exports shim to allow lucide.js to load in browser
   context (matching pattern used in component-dialog.html)

2. Updated Content Security Policy to allow inline scripts by adding
   'unsafe-inline' to script-src directive

Changes:
- palette.html: Added lucide.min.js, exports shim, and lucide.js scripts
- palette.html: Updated CSP from "script-src 'self'" to include 'unsafe-inline'
- palette.ts: Removed direct import of initializeLucideIconsFromGlobal
- palette.ts: Added LucideHelperWindow type to access window.lucideHelpers
- palette.ts: Updated all icon hydration calls to use window.lucideHelpers
- palette.ts: Added global icon initialization on DOMContentLoaded

This resolves the issue where component icons and status badge icons
(pin, check) were displaying as empty blue squares instead of SVG icons.
@GhostTypes GhostTypes self-assigned this Nov 2, 2025
@GhostTypes GhostTypes merged commit 6da78a9 into main Nov 2, 2025
@GhostTypes GhostTypes deleted the grid-editor branch November 9, 2025 03:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant