@switchbot/homebridge-switchbot 5.0.0-beta.109 → 5.0.0-beta.110

package/todo/COMPLETED.md

@@ -0,0 +1,189 @@
+# Completed TODOs
+
+This file tracks all completed features and improvements for the SwitchBot Homebridge Plugin.
+
+---
+
+## Code Refactoring & Architecture
+
+### Server-Side Refactoring ✅ COMPLETED
+
+- [x] **Split `server.ts` into modular structure**
+  - [x] Created `src/homebridge-ui/endpoints/discovery.ts` - Discovery endpoint
+  - [x] Created `src/homebridge-ui/endpoints/config.ts` - Config management endpoint
+  - [x] Created `src/homebridge-ui/endpoints/devices.ts` - Device CRUD operations
+  - [x] Created `src/homebridge-ui/endpoints/credentials.ts` - Credentials endpoint
+  - [x] Created `src/homebridge-ui/utils/config-parser.ts` - Config parsing helpers
+  - [x] Created `src/homebridge-ui/utils/logger.ts` - Logging utility
+  - [x] Updated `src/homebridge-ui/server.ts` - Main entry point (imports and registers endpoints)
+
+  **Status:** Server endpoints are fully modularized and organized by concern.
+
+---
+
+## Bug Fixes
+
+### Invalid Device Type Validation ✅ COMPLETED
+
+- [x] **Fix invalid device type in config schema validation**
+  - [x] **Issue:** Config validation rejects devices with invalid `configDeviceType` values (e.g., "Lock Vision Pro" is not in valid enum)
+  - [x] **Error:** "Value is not accepted. Valid values: ..." error shown in Homebridge UI
+  - [x] **Root Cause:** Device types in existing configs may not match current DEVICE_TYPES enum (legacy names, typos, or renamed devices)
+  - [x] **Affected Devices:** Any device with `configDeviceType` not matching DEVICE_TYPES enum
+  - [x] **Solution:** Implemented device type validation migration and auto-correction
+
+  **Implementation:**
+  - Added `normalizeDeviceType()` — Validates and maps invalid types to valid equivalents
+  - Added `isValidDeviceType()` — Checks if device type is in DEVICE_TYPES enum
+  - Added `getValidDeviceTypes()` — Returns set of all valid device types
+  - Created `src/homebridge-ui/utils/device-migration.ts` — Migration utilities for batch validation
+  - Updated `src/homebridge-ui/endpoints/config.ts` — Device loading now validates types and warns about invalid ones
+  - Added migration mapping: `"Lock Vision Pro"` → `"Keypad Vision Pro"` (and others)
+  - Config endpoint returns `validationWarnings` with invalid device types and suggestions
+
+  **Status:** Device type validation is now automatic. Invalid types are detected and suggestions provided to users. Auto-correction mappings handle legacy/typo device names.
+
+---
+
+### Client-Side Refactoring
+
+#### Phase 1: Quick Wins
+
+##### Extract DEVICE_TYPES constant ✅ COMPLETED
+
+- [x] Created `src/device-types.ts` as single source of truth
+- [x] Updated `src/homebridge-ui/public/js/constants.ts` to import from shared source
+- [x] Added `DEVICE_TYPE_NORMALIZATION_MAP` for plugin type lookups
+- [x] Updated `src/deviceFactory.ts` to use normalized type mappings
+- [x] Created `scripts/sync-device-types.mjs` to auto-sync config.schema.json
+- [x] Integrated sync into build process (runs before tsc)
+
+**Status:** Device types now single-sourced with auto-sync. Config schema, UI dropdown, and plugin type handling all stay aligned automatically.
+
+##### Extract CSS styles ✅ COMPLETED
+
+![Modal Theme Mockup](mockups/modal-switchbot-theme.svg)
+
+- [x] Created `src/homebridge-ui/public/css/styles.css`
+- [x] Moved all inline styles from `src/homebridge-ui/public/index.html` (2.3kb)
+- [x] Updated HTML to `<link rel="stylesheet" href="css/styles.css">`
+- [x] Verified build copies CSS to dist/
+- [x] Tested in browser to confirm styles still work
+- [x] Added SwitchBot red color variables and theme
+- [x] Enhanced modal styling with red accent borders
+- [x] Improved button styling with hover animations
+
+**Status:** CSS now externalized and properly linked. Build copies files correctly to dist/. Modal uses SwitchBot red theme with Homebridge-like appearance.
+
+#### Phase 2: JavaScript Modularization ✅ COMPLETED
+
+- [x] Created `src/homebridge-ui/public/js/api.ts` - API client functions
+- [x] Created `src/homebridge-ui/public/js/discovery.ts` - Discovery UI rendering
+- [x] Created `src/homebridge-ui/public/js/modals.ts` - Modal management
+- [x] Created `src/homebridge-ui/public/js/credentials.ts` - Credentials UI
+- [x] Created `src/homebridge-ui/public/js/toast.ts` & `modal.ts` - UI helpers
+- [x] Created `src/homebridge-ui/public/js/app.ts` - Main app init
+- [x] Updated `src/homebridge-ui/public/index.html` to use bundled app.js
+
+**Status:** UI is modularized in TypeScript. Build bundles into app.js (47.0kb). Direct TypeScript imports provide type safety.
+
+---
+
+## Discovery System Enhancements
+
+### Signal Strength Visualization ✅ COMPLETED
+
+![Signal Strength Mockup](mockups/signal-strength-visualization.svg)
+
+- [x] Implement RSSI color-coding system:
+  - [x] Green: > -60 dBm (excellent)
+  - [x] Yellow: -60 to -75 dBm (good)
+  - [x] Orange: -75 to -85 dBm (fair)
+  - [x] Red: < -85 dBm (poor/unreliable)
+- [x] Add signal strength bars visual indicator (4-bar system)
+- [x] Add tooltip explaining signal quality
+
+**Implementation:**
+- Added `getRssiSignalQuality()` — Determines RSSI level, color, description, and bar count
+- Added `renderSignalBars()` — Visual 4-bar indicator (filled based on signal strength)
+- Added `renderSignalQualityBadge()` — Color-coded badge showing quality level (Excellent/Good/Fair/Poor)
+- Updated `renderDiscoveredDevices()` — Displays bars and badges next to device names for BLE/wireless devices
+- Tooltips show detailed signal info on hover
+
+**Status:** Signal visualization now displays for all discovered devices with RSSI data. Color-coded bars and badges provide instant visual feedback about connection quality.
+
+### Filtering & Sorting ✅ COMPLETED
+
+![Filtering & Sorting Mockup](mockups/filtering-sorting.svg)
+
+- [x] Add filter buttons: "All | BLE Only | API Only | Both | IR Devices"
+- [x] Add sort dropdown: "Signal Strength | Name | Type | Connection"
+- [x] Add search box to filter by name/ID/type (real-time filtering)
+- [x] Persist filter/sort preferences in localStorage
+
+**Implementation:**
+- Added `filterDevices()` — Filters by connection type (BLE/API/Both/IR) and search query (matches name/id/type/model)
+- Added `sortDevices()` — Sorts by name (alphabetical), signal strength (RSSI descending), device type, or connection type
+- Added `getDiscoveryPreferences()` & `setDiscoveryPreferences()` — Persist user preferences in localStorage
+- Updated `discovery.ts` — Creates filter buttons, sort dropdown, and search input dynamically
+- All filtering/sorting is client-side (instant, no API calls)
+- Search is debounced (300ms) for smooth typing
+- Filter buttons highlight active selection
+- Status shows "Showing X of Y device(s)" when filtered
+
+**Status:** Full filtering and sorting implemented with localStorage persistence. Discovery page now shows:
+- Filter bar with 5 buttons (All/BLE/API/Both/IR)
+- Sort dropdown with 4 options (Name/Signal Strength/Type/Connection)
+- Real-time search box
+- All preferences saved and restored on next discovery
+
+---
+
+## Bug Fixes & Technical Debt
+
+### Fix lint & lint:fix scripts ✅ COMPLETED
+
+- [x] Update ESLint configuration to include `src/homebridge-ui/**/*.ts` files
+- [x] Add HTML linting for `src/homebridge-ui/**/*.html` files
+- [x] Installed `eslint-plugin-html` for inline JavaScript in HTML
+- [x] Update `npm run lint` script to lint both plugin and UI code
+- [x] Update `npm run lint:fix` script to auto-fix both plugin and UI code
+- [x] Fixed existing ESLint errors (regex patterns, multi-statement lines)
+- [x] Lint now passes successfully
+- [x] Test that `npm run lint` runs successfully without errors
+
+**Changes Made:**
+- Installed `eslint-plugin-html` package
+- Updated `eslint.config.js` to import and configure HTML plugin
+- Added `html: true` to formatters in ESLint config
+- Updated package.json scripts: `lint` and `lint:fix` now include `src/homebridge-ui/**/*.html`
+- Moved regex patterns to module scope in `server.ts` and `genericDevice.ts`
+- Split multi-statement lines to comply with `style/max-statements-per-line` rule
+- All lint errors fixed - `npm run lint` passes with 0 errors
+
+### Fix TypeScript compilation errors in discovery endpoint ✅ COMPLETED
+
+- [x] Fixed: Changed `discover({ duration: 5000 })` to `discover({ timeout: 5000 })`
+- [x] Fixed: Changed `switchbot.getDevices()` to use `switchbot.getAPIClient()?.getDevices()`
+- [x] Reviewed node-switchbot v4.0.0-beta.3 API documentation and type definitions
+- [x] Updated discovery implementation to use correct API types (APIDevice, APIInfraredRemote)
+- [x] Fixed property names: `deviceId`, `deviceName`, `deviceType`, `remoteType`
+- [x] Removed references to non-existent properties (`id`, `name`, `type`, `model`, `deviceModel`)
+
+**Changes Made:**
+- Updated BLE discovery to use `timeout` parameter instead of `duration`
+- Changed OpenAPI access to use `switchbot.getAPIClient()?.getDevices()`
+- Simplified response parsing: `apiData.deviceList` and `apiData.infraredRemoteList` (no `body` wrapper)
+- Fixed all property accesses to match APIDevice and APIInfraredRemote interfaces
+- Build now succeeds with 0 TypeScript errors
+- All 39 tests still pass
+
+---
+
+## Notes
+
+- All completed features have been tested and verified working
+- Bundle size increased from 35.8kb → 47.0kb with new features
+- Zero TypeScript compilation errors
+- All lint checks passing
+- UI mockups available in `todo/mockups/` directory

package/todo/README.md

@@ -0,0 +1,59 @@
+# TODO Documentation
+
+This directory contains all task tracking and planning documentation for the SwitchBot Homebridge Plugin.
+
+## Structure
+
+```
+todo/
+├── README.md           # This file
+├── TODO.md            # Active tasks and upcoming features
+├── COMPLETED.md       # Completed features and improvements
+└── mockups/           # UI design mockups
+    ├── signal-strength-visualization.svg
+    ├── filtering-sorting.svg
+    └── modal-switchbot-theme.svg
+```
+
+## Files
+
+### [TODO.md](TODO.md)
+Active tasks and features planned for future releases. Organized by priority:
+- **Must Do (Next Release)** - Critical features blocking next release
+- **Should Do (Soon)** - Important features for near-term releases
+- **Nice to Have (Future)** - Enhancement ideas for future consideration
+
+### [COMPLETED.md](COMPLETED.md)
+Archive of completed features and bug fixes. Each completed item includes:
+- Implementation details
+- Date completed
+- Links to related code/files
+- UI mockups (if applicable)
+
+### [mockups/](mockups/)
+SVG mockups showing UI designs for completed and planned features:
+- **signal-strength-visualization.svg** - RSSI bars and quality badges for BLE devices
+- **filtering-sorting.svg** - Discovery page filters, sort options, and search
+- **modal-switchbot-theme.svg** - Edit device modal with SwitchBot red theme
+
+## Workflow
+
+1. **Planning** - New features start as unchecked items in TODO.md
+2. **Development** - Mark items as in-progress while working
+3. **Completion** - When complete, move entire section to COMPLETED.md with implementation details
+4. **UI Features** - Create SVG mockup before or after implementation for documentation
+
+## Priority Levels
+
+- **Priority: Critical** - Bugs affecting functionality or compatibility
+- **Priority: High** - Features needed for next release
+- **Priority: Medium** - Quality of life improvements
+- **Priority: Low** - Nice-to-have enhancements
+
+## Notes
+
+- Always update COMPLETED.md when marking features as done
+- Include implementation details and learnings
+- Create mockups for all UI features
+- Keep TODO.md focused on active/upcoming work
+- Archive helps track project progress over time

package/todo/TODO.md

@@ -0,0 +1,205 @@
+# SwitchBot Plugin TODO List
+
+## Active Tasks
+
+### Bug Fixes (Priority: Critical)
+
+#### Matter Window Covering Conformance Issue
+
+- [ ] **Fix Matter window covering Drapery enum validation error**
+  - [ ] **Issue:** Matter accessory registration fails for Curtain devices
+  - [ ] **Error:** `Conformance "LF & !TL": Matter does not allow enum value Drapery (ID 4) here`
+  - [ ] **Root Cause:** windowCovering.state.type is set to "Drapery" but Matter spec requires "LF & !TL" conformance (Lift Fail without Tilt)
+  - [ ] **Solution:** Need to validate/correct window covering type mappings for Matter compatibility
+  - [ ] **Affected Devices:** Curtain-type devices (e.g., "Master Bathroom Left Curtain")
+  - [ ] **Steps to Fix:**
+    - [ ] Check Matter window covering specification for valid type combinations
+    - [ ] Update device type mapping to use compliant enum values
+    - [ ] Validate conformance rules for Lift/Tilt combinations
+    - [ ] Test with Curtain, Curtain3, and Roller Shade devices
+
+---
+
+## Discovery System Enhancements
+
+### Quick Wins (Priority: High)
+
+#### 1. One-Click Device Import
+
+- [ ] Add "Add to Config" button next to each discovered device
+- [ ] Implement auto-populate device configuration modal with discovered values
+- [ ] Pre-fill MAC address for BLE devices to enable direct connection
+- [ ] Add confirmation toast message on successful import
+
+#### 2. Duplicate Detection
+
+- [ ] Check if discovered device ID already exists in config
+- [ ] Show badge: "✓ Already Added" (green) or "➕ New Device" (blue)
+- [ ] Disable/hide "Add" button for already-added devices
+- [ ] Add "View in Config" link for existing devices
+
+#### 3. Better Loading States
+
+- [ ] Show progress indicator: "Scanning BLE... (5s)" → "Fetching OpenAPI..." → "Complete"
+- [ ] Add progress bar or spinner for each discovery phase
+- [ ] Display partial results as they arrive (streaming)
+- [ ] Show elapsed time for each phase
+- [ ] Add "Cancel" button to abort long scans
+
+### Medium Effort (Priority: Medium)
+
+#### 4. Device Grouping
+
+- [ ] Implement grouping by Hub (show which devices are on which hub)
+- [ ] Implement grouping by Connection Type
+- [ ] Add expandable/collapsible group headers
+- [ ] Show device count per group
+- [ ] Remember expanded/collapsed state
+
+#### 5. Connection Recommendations
+
+- [ ] Add badge: "⚡ Recommended: BLE" for devices with strong signal (> -70 dBm)
+- [ ] Add badge: "☁️ Recommended: API" for hub-dependent devices
+- [ ] Show tooltip explaining why recommendation is made
+- [ ] Consider device type (some work better with BLE vs API)
+
+#### 6. Configurable BLE Scan
+
+- [ ] Add settings panel with scan duration options (3s/5s/10s/15s)
+- [ ] Add option to disable BLE scanning if no Bluetooth adapter
+- [ ] Add option to adjust BLE timeout
+- [ ] Remember user preferences in localStorage
+- [ ] Show system Bluetooth availability status
+
+#### 7. Discovery History/Cache
+
+- [ ] Cache last discovery results for 5 minutes
+- [ ] Show "Last scanned: X minutes ago" with timestamp
+- [ ] Add "Refresh" button to re-scan
+- [ ] Show cached results immediately on page load
+- [ ] Auto-refresh option with configurable interval
+
+#### 8. Detailed Device Info Panel
+
+- [ ] Add click-to-expand device details panel
+- [ ] Show extended information:
+  - [ ] Battery level (if available)
+  - [ ] Firmware version
+  - [ ] Cloud service enabled/disabled status
+  - [ ] Last seen timestamp
+  - [ ] Full MAC address
+  - [ ] Device capabilities/features
+- [ ] Add "Copy ID" and "Copy MAC" buttons
+
+### Advanced Features (Priority: Low)
+
+#### 9. Real-Time BLE Scanning
+
+- [ ] Show devices as they're discovered (streaming results)
+- [ ] Add animated "pulsing" indicator for active BLE scan
+- [ ] Update RSSI values in real-time during scan
+- [ ] Show "X devices found..." counter during scan
+
+#### 10. Connection Testing
+
+- [ ] Add "Test Connection" button per device
+- [ ] Attempt to connect and read basic device status
+- [ ] Show success/failure indicator with details
+- [ ] Display connection latency
+- [ ] Show which connection method succeeded (BLE/API)
+
+#### 11. Batch Import
+
+- [ ] Add checkboxes to select multiple devices
+- [ ] Add "Add Selected to Config" button
+- [ ] Implement bulk configuration with smart defaults
+- [ ] Show progress for batch operations
+- [ ] Allow batch enable/disable of devices
+
+#### 12. Device Health Dashboard
+
+- [ ] Show battery warnings (< 20%) with yellow/red indicators
+- [ ] Show firmware update available indicators
+- [ ] Show offline/unreachable warnings
+- [ ] Add "Needs Attention" section at top
+- [ ] Implement battery level trending (if historical data available)
+
+#### 13. Export/Import Discovery
+
+- [ ] Add "Export Results" button (JSON format)
+- [ ] Add "Import Results" for comparison or troubleshooting
+- [ ] Share with support for debugging
+- [ ] Compare current vs previous discovery (show differences)
+- [ ] Generate discovery report (formatted summary)
+
+---
+
+## Bug Fixes & Technical Debt
+
+### Testing & Quality Assurance
+
+- [ ] **Test discovery with real hardware**
+  - [ ] Test BLE discovery with nearby devices
+  - [ ] Test OpenAPI discovery with cloud-registered devices
+  - [ ] Test with mixed BLE+API devices
+  - [ ] Test connection type badge display
+  - [ ] Verify deduplication works correctly
+
+- [ ] **Add error handling improvements**
+  - [ ] Better error messages for users
+  - [ ] Retry logic with exponential backoff
+  - [ ] Graceful degradation when BLE unavailable
+  - [ ] Network timeout handling
+
+---
+
+## Documentation
+
+- [ ] **Update README with discovery features**
+  - [ ] Document BLE vs OpenAPI discovery
+  - [ ] Add screenshots of new UI features
+  - [ ] Explain connection type badges
+  - [ ] Add troubleshooting guide for discovery issues
+
+- [ ] **Create developer documentation**
+  - [ ] Document new modular structure
+  - [ ] API documentation for endpoints
+  - [ ] Contributing guidelines for UI changes
+
+---
+
+## Priority Summary
+
+### Must Do (Next Release)
+
+1. Fix Matter window covering conformance issue (CRITICAL)
+2. One-Click Device Import
+3. Duplicate Detection
+4. Better Loading States
+
+### Should Do (Soon)
+
+1. Connection Recommendations
+2. Device Grouping
+3. Test discovery with real hardware
+4. Update README with new features
+
+### Nice to Have (Future)
+
+1. Configurable BLE Scan
+2. Discovery History/Cache
+3. Connection Testing
+4. Batch Import
+5. Device Health Dashboard
+
+---
+
+## Notes
+
+- See [COMPLETED.md](COMPLETED.md) for all completed features
+- UI mockups available in [mockups/](mockups/) directory
+- Consider user feedback on most-wanted features
+- Test all changes with real SwitchBot devices
+- Maintain backwards compatibility with existing configs
+- Keep UI responsive and fast (< 500ms interactions)
+- Follow Homebridge UI/UX conventions

package/todo/mockups/filtering-sorting.svg

@@ -0,0 +1,112 @@
+<svg width="700" height="500" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="700" height="500" fill="#f5f5f5"/>
+  
+  <!-- Title -->
+  <text x="20" y="30" font-family="system-ui, -apple-system, Arial" font-size="18" font-weight="600" fill="#1a1a1a">
+    Discovery Results - Filtering &amp; Sorting
+  </text>
+  
+  <!-- Main Container -->
+  <rect x="20" y="50" width="660" height="430" rx="8" fill="#fff" stroke="#ddd" stroke-width="1"/>
+  
+  <!-- Filter Buttons -->
+  <g transform="translate(40, 75)">
+    <text x="0" y="0" font-family="system-ui" font-size="12" font-weight="600" fill="#666">Filter by Connection:</text>
+    
+    <!-- All Button (Active) -->
+    <rect x="0" y="10" width="60" height="32" rx="6" fill="#ef4444"/>
+    <text x="30" y="31" font-family="system-ui" font-size="13" font-weight="500" fill="#fff" text-anchor="middle">All</text>
+    
+    <!-- BLE Button -->
+    <rect x="70" y="10" width="80" height="32" rx="6" fill="#e5e7eb" stroke="#ddd" stroke-width="1"/>
+    <text x="110" y="31" font-family="system-ui" font-size="13" font-weight="500" fill="#4b5563" text-anchor="middle">BLE Only</text>
+    
+    <!-- API Button -->
+    <rect x="160" y="10" width="80" height="32" rx="6" fill="#e5e7eb" stroke="#ddd" stroke-width="1"/>
+    <text x="200" y="31" font-family="system-ui" font-size="13" font-weight="500" fill="#4b5563" text-anchor="middle">API Only</text>
+    
+    <!-- Both Button -->
+    <rect x="250" y="10" width="60" height="32" rx="6" fill="#e5e7eb" stroke="#ddd" stroke-width="1"/>
+    <text x="280" y="31" font-family="system-ui" font-size="13" font-weight="500" fill="#4b5563" text-anchor="middle">Both</text>
+    
+    <!-- IR Button -->
+    <rect x="320" y="10" width="100" height="32" rx="6" fill="#e5e7eb" stroke="#ddd" stroke-width="1"/>
+    <text x="370" y="31" font-family="system-ui" font-size="13" font-weight="500" fill="#4b5563" text-anchor="middle">IR Devices</text>
+  </g>
+  
+  <!-- Sort Dropdown and Search -->
+  <g transform="translate(40, 145)">
+    <text x="0" y="0" font-family="system-ui" font-size="12" font-weight="600" fill="#666">Sort by:</text>
+    
+    <!-- Sort Dropdown -->
+    <rect x="0" y="10" width="180" height="32" rx="6" fill="#fff" stroke="#d1d5db" stroke-width="1"/>
+    <text x="10" y="31" font-family="system-ui" font-size="13" fill="#1a1a1a">Signal Strength ▼</text>
+    
+    <!-- Search Box -->
+    <text x="210" y="0" font-family="system-ui" font-size="12" font-weight="600" fill="#666">Search:</text>
+    <rect x="210" y="10" width="410" height="32" rx="6" fill="#fff" stroke="#d1d5db" stroke-width="1"/>
+    <text x="220" y="31" font-family="system-ui" font-size="13" fill="#9ca3af">🔍 Search by name, ID, or type...</text>
+  </g>
+  
+  <!-- Status Line -->
+  <text x="40" y="210" font-family="system-ui" font-size="12" fill="#666">
+    Showing 12 of 12 device(s)
+  </text>
+  
+  <!-- Device List -->
+  <g transform="translate(40, 230)">
+    <!-- Device 1 -->
+    <rect x="0" y="0" width="620" height="50" rx="4" fill="#f9f9f9" stroke="#e0e0e0" stroke-width="1"/>
+    <text x="15" y="22" font-family="system-ui" font-size="14" font-weight="500" fill="#1a1a1a">Kitchen Hub</text>
+    <text x="15" y="38" font-family="monospace" font-size="11" fill="#666">B0E9FEC3F112 | Hub 2</text>
+    
+    <!-- Signal bars - 4 bars -->
+    <g transform="translate(500, 12)">
+      <rect x="0" y="12" width="6" height="3" rx="1" fill="#10b981"/>
+      <rect x="9" y="8" width="6" height="7" rx="1" fill="#10b981"/>
+      <rect x="18" y="4" width="6" height="11" rx="1" fill="#10b981"/>
+      <rect x="27" y="0" width="6" height="15" rx="1" fill="#10b981"/>
+    </g>
+    
+    <!-- Connection badge -->
+    <rect x="550" y="13" width="50" height="18" rx="4" fill="#fef3c7"/>
+    <text x="575" y="26" font-family="system-ui" font-size="10" font-weight="500" fill="#d97706" text-anchor="middle">Both</text>
+    
+    <!-- Device 2 -->
+    <rect x="0" y="60" width="620" height="50" rx="4" fill="#f9f9f9" stroke="#e0e0e0" stroke-width="1"/>
+    <text x="15" y="82" font-family="system-ui" font-size="14" font-weight="500" fill="#1a1a1a">Front Door Bot</text>
+    <text x="15" y="98" font-family="monospace" font-size="11" fill="#666">84F703B32E12 | Bot</text>
+    
+    <!-- Signal bars - 3 bars -->
+    <g transform="translate(500, 72)">
+      <rect x="0" y="12" width="6" height="3" rx="1" fill="#eab308"/>
+      <rect x="9" y="8" width="6" height="7" rx="1" fill="#eab308"/>
+      <rect x="18" y="4" width="6" height="11" rx="1" fill="#eab308"/>
+      <rect x="27" y="0" width="6" height="15" rx="1" fill="#e5e7eb"/>
+    </g>
+    
+    <!-- Connection badge -->
+    <rect x="550" y="73" width="50" height="18" rx="4" fill="#dbeafe"/>
+    <text x="575" y="86" font-family="system-ui" font-size="10" font-weight="500" fill="#3b82f6" text-anchor="middle">BLE</text>
+    
+    <!-- Device 3 -->
+    <rect x="0" y="120" width="620" height="50" rx="4" fill="#f9f9f9" stroke="#e0e0e0" stroke-width="1"/>
+    <text x="15" y="142" font-family="system-ui" font-size="14" font-weight="500" fill="#1a1a1a">Living Room TV</text>
+    <text x="15" y="158" font-family="monospace" font-size="11" fill="#666">IR-A1B2C3D4 | TV (IR)</text>
+    
+    <!-- No signal bars for IR -->
+    
+    <!-- Connection badge -->
+    <rect x="550" y="133" width="50" height="18" rx="4" fill="#fce7f3"/>
+    <text x="575" y="146" font-family="system-ui" font-size="10" font-weight="500" fill="#ec4899" text-anchor="middle">IR</text>
+  </g>
+  
+  <!-- Feature Labels -->
+  <g transform="translate(40, 450)">
+    <text x="0" y="0" font-family="system-ui" font-size="10" font-weight="600" fill="#9ca3af">Features:</text>
+    <text x="0" y="15" font-family="system-ui" font-size="9" fill="#9ca3af">✓ Real-time search with 300ms debounce</text>
+    <text x="200" y="15" font-family="system-ui" font-size="9" fill="#9ca3af">✓ Client-side filtering (instant)</text>
+    <text x="400" y="15" font-family="system-ui" font-size="9" fill="#9ca3af">✓ localStorage persistence</text>
+  </g>
+</svg>

package/todo/mockups/modal-switchbot-theme.svg

@@ -0,0 +1,66 @@
+<svg width="600" height="500" xmlns="http://www.w3.org/2000/svg">
+  <!-- Backdrop Overlay -->
+  <rect width="600" height="500" fill="rgba(0,0,0,0.7)"/>
+  
+  <!-- Modal Container -->
+  <g transform="translate(60, 80)">
+    <!-- Modal Background with Red Top Border -->
+    <rect x="0" y="4" width="480" height="370" rx="12" fill="#fff"/>
+    <rect x="0" y="0" width="480" height="4" rx="2" fill="#ef4444"/>
+    
+    <!-- Box Shadow Effect -->
+    <rect x="2" y="6" width="476" height="368" rx="12" fill="none" stroke="rgba(0,0,0,0.1)" stroke-width="2"/>
+    
+    <!-- Modal Header -->
+    <text x="24" y="50" font-family="system-ui, -apple-system, Arial" font-size="20" font-weight="600" fill="#ef4444">
+      Edit Device
+    </text>
+    
+    <!-- Content Area -->
+    <g transform="translate(24, 80)">
+      <!-- Device Name Field -->
+      <text x="0" y="0" font-family="system-ui" font-size="13" font-weight="500" fill="#374151">Device Name</text>
+      <rect x="0" y="8" width="432" height="40" rx="6" fill="#fff" stroke="#d1d5db" stroke-width="1"/>
+      <text x="10" y="33" font-family="system-ui" font-size="14" fill="#1a1a1a">Girl's Bedroom Hub</text>
+      
+      <!-- API Device Type Field (Read-only) -->
+      <text x="0" y="70" font-family="system-ui" font-size="13" font-weight="500" fill="#374151">Device Type (API - Read Only)</text>
+      <rect x="0" y="78" width="432" height="40" rx="6" fill="#f9fafb" stroke="#d1d5db" stroke-width="1"/>
+      <text x="10" y="103" font-family="system-ui" font-size="14" fill="#6b7280">Hub 2</text>
+      
+      <!-- Config Device Type Dropdown -->
+      <text x="0" y="140" font-family="system-ui" font-size="13" font-weight="500" fill="#374151">Config Device Type (Override)</text>
+      <rect x="0" y="148" width="432" height="40" rx="6" fill="#fff" stroke="#d1d5db" stroke-width="1"/>
+      <text x="10" y="173" font-family="system-ui" font-size="14" fill="#1a1a1a">Hub 2 ▼</text>
+      
+      <!-- Divider Line -->
+      <line x1="0" y1="220" x2="432" y2="220" stroke="rgba(0,0,0,0.1)" stroke-width="1"/>
+      
+      <!-- Button Group -->
+      <g transform="translate(0, 240)">
+        <!-- Cancel Button -->
+        <rect x="0" y="0" width="100" height="40" rx="6" fill="#6b7280"/>
+        <text x="50" y="25" font-family="system-ui" font-size="14" font-weight="500" fill="#fff" text-anchor="middle">Cancel</text>
+        
+        <!-- Save Button with Hover Effect -->
+        <g transform="translate(332, 0)">
+          <!-- Button Shadow -->
+          <rect x="0" y="2" width="100" height="40" rx="6" fill="rgba(239,68,68,0.2)"/>
+          <!-- Button -->
+          <rect x="0" y="0" width="100" height="40" rx="6" fill="#ef4444"/>
+          <text x="50" y="25" font-family="system-ui" font-size="14" font-weight="500" fill="#fff" text-anchor="middle">Save</text>
+        </g>
+      </g>
+    </g>
+  </g>
+  
+  <!-- Design Notes -->
+  <g transform="translate(20, 470)">
+    <text x="0" y="0" font-family="system-ui" font-size="10" font-weight="600" fill="#9ca3af">Design Elements:</text>
+    <text x="100" y="0" font-family="system-ui" font-size="9" fill="#9ca3af">● 4px SwitchBot Red top accent</text>
+    <text x="270" y="0" font-family="system-ui" font-size="9" fill="#9ca3af">● 12px border-radius</text>
+    <text x="380" y="0" font-family="system-ui" font-size="9" fill="#9ca3af">● Smooth shadows</text>
+    <text x="100" y="15" font-family="system-ui" font-size="9" fill="#9ca3af">● Red title and primary button</text>
+    <text x="270" y="15" font-family="system-ui" font-size="9" fill="#9ca3af">● Gray secondary button</text>
+  </g>
+</svg>