Material-UI icons were not provided as globals by Headlamp, causing
'undefined is not an object (evaluating Ct.createSvgIcon)' errors.
Headlamp provides @iconify/react as a global, so all icon imports have
been replaced with Iconify equivalents:
- ErrorOutline → mdi:alert-circle-outline
- ContentCopy → mdi:content-copy
- Visibility → mdi:eye
- VisibilityOff → mdi:eye-off
- CheckCircle → mdi:check-circle
- Error → mdi:alert-circle
- Warning → mdi:alert
- Add → mdi:plus
- Delete → mdi:delete
Changes:
- Replaced all @mui/icons-material imports with @iconify/react Icon component
- Updated 4 component files (ErrorBoundary, DecryptDialog, EncryptDialog, ControllerStatus)
- Bumped version to 0.2.3
- Bundle size reduced: 358.18 kB (98.04 kB gzipped)
- Checksum: SHA256:03787323abc9430a63433838253b2dd8296d237000acdfe4ce2507678b63125f
This should fix the plugin loading issue and make the sidebar entry appear.
Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
Created comprehensive skeleton components providing visual feedback during
data loading. This improves perceived performance and provides a better
user experience with consistent loading states across all views.
Changes:
- NEW: src/components/LoadingSkeletons.tsx (+105 lines)
- SealedSecretListSkeleton - 5 placeholder rows
- SealedSecretDetailSkeleton - title + sections + actions
- SealingKeysListSkeleton - 2 certificate placeholders
- CertificateInfoSkeleton - metadata lines
- ControllerHealthSkeleton - chip + info layout
- All use wave animation and realistic layouts
- UPDATED: SealedSecretList.tsx
- Use loading state from useList() hook
- Show skeleton during data fetch
- Smooth transition to real data
- UPDATED: SealedSecretDetail.tsx
- Replace Headlamp Loader with custom skeleton
- Better layout matching
- No layout shift
- UPDATED: SealingKeysView.tsx
- Add loading state detection
- Show skeleton for certificates
- Professional loading UX
- UPDATED: ControllerStatus.tsx
- Replace CircularProgress with skeleton
- Match chip + info layout
- Consistent with other components
Benefits:
- Improved perceived performance
- Reduced layout shift (skeletons match real components)
- Consistent loading experience (wave animation)
- Better user feedback during data loading
Build: 356.44 kB (98.01 kB gzipped) - +1.52 kB (+0.4%)
Time: 4.78s
Progress: 11/14 phases complete (79%)
Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
Add comprehensive controller health monitoring functionality with
real-time visual indicators and auto-refresh capabilities.
Features:
- Health check API with 5-second timeout
- Latency tracking and version detection
- ControllerStatus component with color-coded indicators
- Auto-refresh with configurable intervals
- Integration with SettingsPage and SealingKeysView
Technical details:
- AbortController for proper timeout handling
- Never-fail API (always returns status)
- Three states: Healthy (green), Unhealthy (yellow), Unreachable (red)
- Detailed tooltips with error messages
- Response time display in milliseconds
- Version information from X-Controller-Version header
Files:
- src/lib/controller.ts: Add checkControllerHealth() (+58 lines)
- src/components/ControllerStatus.tsx: NEW component (+117 lines)
- src/components/SettingsPage.tsx: Add status display
- src/components/SealingKeysView.tsx: Add status to header
- PHASE_2.2_COMPLETE.md: Implementation documentation
Bundle size: 346.65 kB (95.49 kB gzipped), +2.7 kB (+0.8%)
Build time: 3.94s (improved!)
Zero TypeScript/lint errors
Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
Chris Farhood