feat(webui): complete Phase 4 - frontend implementation

Copy all WebUI frontend files from FlashForgeUI-Electron reference:

Static Files (4):
- index.html - Main HTML structure with login and main UI
- webui.css - 31KB stylesheet with dark theme and GridStack customizations
- gridstack-extra.min.css - Additional GridStack styles
- tsconfig.json - Frontend TypeScript configuration

Core Modules (2):
- AppState.ts - Central state management for context, serial, connection state
- Transport.ts - HTTP/WebSocket client with auto-reconnection

Feature Modules (7):
- authentication.ts - Login, token storage, remember-me, auto-login
- camera.ts - MJPEG/RTSP stream initialization with JSMpeg
- context-switching.ts - Multi-printer context switching and UI updates
- job-control.ts - Pause/resume/cancel, file selection, job start
- layout-theme.ts - GridStack editor, theme application, settings modal
- material-matching.ts - AD5X material station slot mapping
- spoolman.ts - Spoolman integration, spool selection, search

UI Modules (3):
- dialogs.ts - Modal management, toast notifications, temperature dialog
- header.ts - Edit mode toggle, settings button, connection indicator
- panels.ts - Update all 9 dashboard component panels from polling data

Grid Modules (5):
- WebUIGridManager.ts - GridStack wrapper for layout management
- WebUILayoutPersistence.ts - Save/load layouts to localStorage
- WebUIComponentRegistry.ts - Define all 9 dashboard components
- WebUIMobileLayoutManager.ts - Mobile responsive layout (768px breakpoint)
- types.ts - Grid type definitions

Shared Modules (3):
- dom.ts - DOM query and event listener helpers
- formatting.ts - Format numbers, time, file sizes
- icons.ts - Lucide icon hydration and initialization

Build Configuration:
- scripts/copy-webui-assets.js - Copy HTML/CSS and vendor libraries to dist
- src/types/jsmpeg.d.ts - Type definitions for JSMpeg video player

Build successfully compiles all 24 TypeScript files to JavaScript and copies
4 vendor libraries (GridStack, Lucide, JSMpeg, CSS) to dist/webui/static.

Type check: 0 errors
Lint: 9 warnings (from reference code)
Phase 4 Frontend: Complete

Author: claude

scripts/copy-webui-assets.js

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+
+/**
+ * Copy WebUI static assets from source to build output directory.
+ * 
+ * This script copies HTML, CSS, and other static files from src/webui/static/
+ * to dist/webui/static/ as part of the webui build process.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Configuration
+const srcDir = 'src/webui/static';
+const destDir = 'dist/webui/static';
+const filesToCopy = ['index.html', 'webui.css', 'gridstack-extra.min.css'];
+
+// Vendor library to copy from node_modules
+const vendorLibraries = [
+  {
+    src: 'node_modules/@cycjimmy/jsmpeg-player/dist/jsmpeg-player.umd.min.js',
+    dest: 'jsmpeg.min.js'
+  },
+  {
+    src: 'node_modules/gridstack/dist/gridstack-all.js',
+    dest: 'gridstack-all.js'
+  },
+  {
+    src: 'node_modules/gridstack/dist/gridstack.min.css',
+    dest: 'gridstack.min.css'
+  },
+  {
+    src: 'node_modules/lucide/dist/umd/lucide.min.js',
+    dest: 'lucide.min.js'
+  }
+];
+
+const GREEN = '\u001B[32m';
+const YELLOW = '\u001B[33m';
+const RED = '\u001B[31m';
+const RESET = '\u001B[0m';
+const GREEN_DOT = `${GREEN}•${RESET}`;
+const YELLOW_DOT = `${YELLOW}•${RESET}`;
+const RED_CROSS = `${RED}✖${RESET}`;
+
+function logInfo(message) {
+  console.log(`  ${GREEN_DOT} ${message}`);
+}
+
+function logWarn(message) {
+  console.warn(`  ${YELLOW_DOT} ${message}`);
+}
+
+function logError(message) {
+  console.error(`  ${RED_CROSS} ${message}`);
+}
+
+// Main function
+function copyWebUIAssets() {
+  try {
+    // Ensure destination directory exists
+    fs.mkdirSync(destDir, { recursive: true });
+    logInfo(`created directory ${destDir}`);
+    
+    // Copy each file
+    let copiedCount = 0;
+    for (const fileName of filesToCopy) {
+      const srcPath = path.join(srcDir, fileName);
+      const destPath = path.join(destDir, fileName);
+      
+      // Check if source file exists
+      if (!fs.existsSync(srcPath)) {
+        logWarn(`source file missing ${srcPath}`);
+        continue;
+      }
+      
+      // Copy the file
+      fs.copyFileSync(srcPath, destPath);
+      logInfo(`copied ${fileName}`);
+      copiedCount++;
+    }
+    
+    logInfo(`webui asset copy complete ${copiedCount}/${filesToCopy.length}`);
+
+    // Copy vendor libraries
+    let vendorCount = 0;
+    for (const vendor of vendorLibraries) {
+      const srcPath = vendor.src;
+      const destPath = path.join(destDir, vendor.dest);
+
+      // Check if source file exists
+      if (!fs.existsSync(srcPath)) {
+        logWarn(`vendor library missing ${srcPath}`);
+        continue;
+      }
+
+      // Copy the vendor library
+      fs.copyFileSync(srcPath, destPath);
+      logInfo(`copied vendor library ${vendor.dest}`);
+      vendorCount++;
+    }
+
+    logInfo(`vendor library copy complete ${vendorCount}/${vendorLibraries.length}`);
+
+  } catch (error) {
+    logError(`error copying WebUI assets: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+// Run the script
+if (require.main === module) {
+  copyWebUIAssets();
+}
+
+module.exports = { copyWebUIAssets };

src/types/jsmpeg.d.ts

@@ -0,0 +1,107 @@
+/**
+ * @fileoverview Type definitions for @cycjimmy/jsmpeg-player
+ *
+ * Since the @cycjimmy/jsmpeg-player library doesn't provide official TypeScript
+ * type definitions, this file provides type safety for the JSMpeg player used
+ * for RTSP stream rendering via WebSocket.
+ *
+ * Based on JSMpeg.js library documentation and actual usage in the application.
+ *
+ * Also provides global type declarations for JSMpeg vendored locally in WebUI.
+ */
+
+/**
+ * Options for configuring the JSMpeg player
+ */
+export interface JSMpegPlayerOptions {
+    /** Canvas element to render video to */
+    canvas?: HTMLCanvasElement;
+    /** Whether to start playing automatically */
+    autoplay?: boolean;
+    /** Whether to enable audio playback */
+    audio?: boolean;
+    /** Whether to loop playback */
+    loop?: boolean;
+    /** Whether to show controls */
+    controls?: boolean;
+    /** Callback when stream is established */
+    onSourceEstablished?: () => void;
+    /** Callback when stream completes */
+    onSourceCompleted?: () => void;
+    /** Callback on play event */
+    onPlay?: () => void;
+    /** Callback on pause event */
+    onPause?: () => void;
+    /** Callback on stalled event */
+    onStalled?: () => void;
+    /** Callback on video decode */
+    onVideoDecode?: (decoder: unknown, time: number) => void;
+    /** Callback on audio decode */
+    onAudioDecode?: (decoder: unknown, time: number) => void;
+  }
+
+/**
+ * JSMpeg Player instance for MPEG1 video playback
+ */
+export interface JSMpegPlayerInstance {
+    /** Play the video stream */
+    play(): void;
+    /** Pause the video stream */
+    pause(): void;
+    /** Stop the video stream */
+    stop(): void;
+    /** Destroy the player and clean up resources */
+    destroy(): void;
+    /** Get the canvas element being used for rendering */
+    readonly canvas: HTMLCanvasElement | null;
+    /** Whether the player is currently playing */
+    readonly isPlaying: boolean;
+  }
+
+/**
+ * JSMpeg namespace containing Player constructor
+ */
+export interface JSMpegStatic {
+    /**
+     * Create a new JSMpeg player instance
+     * @param url - WebSocket URL for MPEG1 stream
+     * @param options - Player configuration options
+     */
+    Player: new (url: string, options?: JSMpegPlayerOptions) => JSMpegPlayerInstance;
+  }
+
+declare module '@cycjimmy/jsmpeg-player' {
+  /**
+   * Default export is the JSMpeg static object
+   */
+  const JSMpeg: JSMpegStatic;
+  export default JSMpeg;
+}
+
+/**
+ * Global declaration for JSMpeg when vendored locally (e.g., in WebUI)
+ */
+declare global {
+  const JSMpeg: {
+    Player: new (url: string, options?: {
+      canvas?: HTMLCanvasElement;
+      autoplay?: boolean;
+      audio?: boolean;
+      loop?: boolean;
+      controls?: boolean;
+      onSourceEstablished?: () => void;
+      onSourceCompleted?: () => void;
+      onPlay?: () => void;
+      onPause?: () => void;
+      onStalled?: () => void;
+    }) => {
+      play(): void;
+      pause(): void;
+      stop(): void;
+      destroy(): void;
+    };
+  };
+}
+
+export {};
+