Replace Bulma with custom design system and redesign dashboard#262
Merged
NodeJSmith merged 13 commits intomainfrom Feb 17, 2026
Merged
Replace Bulma with custom design system and redesign dashboard#262NodeJSmith merged 13 commits intomainfrom
NodeJSmith merged 13 commits intomainfrom
Conversation
Remove Bulma CSS dependency and build a self-contained design system using ht-prefixed classes, CSS custom properties, and intentional typography (Space Grotesk headings, JetBrains Mono for data). Extract all color and spacing tokens into tokens.css with data-theme selector support for future theming.
…acebacks Overhaul the web UI for information density and usability: - Dashboard: replace separate health/bus/scheduler panels with an app chip grid, activity timeline, and expanded log panel - App detail: merge app_detail and app_instance_detail into a single flat page with collapsible metadata, instance switcher dropdown, and inline error tracebacks - Alert banner: global strip showing HA disconnect and failed apps with expandable traceback per app - Bus listeners: clickable rows expand to show predicate, rate-limiting (debounce/throttle), once flag, and priority - Scheduler jobs: show trigger detail (cron expression or interval) - Scheduler history: expandable traceback on errored executions - Sidebar: persist open/closed state in localStorage, suppress flicker on page load - Remove Entity Browser page, related partials, JS, and routes - Surface error_traceback through the full stack (ExecutionResult → SchedulerService → DataSyncService → web models → templates) - Update e2e and integration tests for new layout and removed pages
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #262 +/- ##
==========================================
- Coverage 78.60% 78.55% -0.06%
==========================================
Files 128 128
Lines 8896 8912 +16
Branches 916 920 +4
==========================================
+ Hits 6993 7001 +8
- Misses 1537 1544 +7
- Partials 366 367 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR replaces Bulma-based styling with a custom ht- prefixed design system (tokens + components), redesigns core UI pages (dashboard + app detail), and removes the Entity Browser surface area while expanding backend/UI data to support richer diagnostics (tracebacks, trigger details, listener config).
Changes:
- Introduce design tokens (
tokens.css) and expandstyle.cssinto a theme-agnostic component system; update templates to useht-classes and new layouts. - Redesign dashboard (app chip grid + activity timeline) and unify app detail rendering into a single flat instance detail template with switcher + inline tracebacks.
- Add global alert banner (HA disconnect + failed apps), remove Entity Browser endpoints/tests, and extend API/models/state serialization for new UI fields.
Reviewed changes
Copilot reviewed 64 out of 65 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| uv.lock | Adds pytest-repeat to the locked test dependency set. |
| pyproject.toml | Adds pytest-repeat to the test extras. |
| CHANGELOG.md | Documents UI redesign, design system introduction, and Entity Browser removal. |
| .pre-commit-config.yaml | Changes djlint hook behavior (now --reformat and stage defaults). |
| .interface-design/system.md | Adds design system documentation/spec. |
| src/hassette/web/static/css/tokens.css | Introduces CSS custom property tokens and theming entry point. |
| src/hassette/web/static/css/style.css | Implements the new design system components/utilities and responsive layout. |
| src/hassette/web/static/js/ws-handler.js | Adds _ready state to suppress the disconnect banner on initial load. |
| src/hassette/web/static/js/live-updates.js | Updates active nav selector to .ht-nav-list. |
| src/hassette/web/ui/context.py | Adds alert_context() to drive failed-app alert banner content. |
| src/hassette/web/ui/router.py | Updates page contexts to include alert banner data; removes entities page; unifies app detail routing to instance detail. |
| src/hassette/web/ui/partials.py | Removes legacy dashboard/entity partials; adds app-grid/timeline + failed-app alert partial. |
| src/hassette/web/templates/base.html | Drops Bulma; adds tokens.css + new layout structure + alert banner include; persists sidebar state. |
| src/hassette/web/templates/components/nav.html | Updates sidebar markup/classes and removes Entities nav entry. |
| src/hassette/web/templates/components/status_bar.html | Updates WS indicator markup for new design system. |
| src/hassette/web/templates/components/alert_banner.html | Adds global alert strip (WS disconnect + failed apps partial). |
| src/hassette/web/templates/pages/dashboard.html | Rebuilds dashboard layout (app grid + logs + activity timeline). |
| src/hassette/web/templates/pages/apps.html | Updates apps page to new tabs/table styling and layout. |
| src/hassette/web/templates/pages/bus.html | Updates bus page layout and embeds bus listener table partial directly. |
| src/hassette/web/templates/pages/scheduler.html | Updates scheduler page layout/styling to design system components. |
| src/hassette/web/templates/pages/logs.html | Updates logs page layout/styling to design system components. |
| src/hassette/web/templates/pages/error.html | Updates error page styling to design system components. |
| src/hassette/web/templates/pages/app_instance_detail.html | Converts app detail to flat instance-detail page with metadata collapse, switcher, and traceback rendering. |
| src/hassette/web/templates/pages/app_detail.html | Removes the legacy manifest overview app detail page template. |
| src/hassette/web/templates/pages/entities.html | Removes Entity Browser page template. |
| src/hassette/web/templates/partials/dashboard_app_grid.html | Adds dashboard app chip grid partial. |
| src/hassette/web/templates/partials/dashboard_timeline.html | Adds dashboard activity timeline partial. |
| src/hassette/web/templates/partials/alert_failed_apps.html | Adds expandable failed-app alert content with tracebacks. |
| src/hassette/web/templates/partials/bus_listeners.html | Redesigns bus listeners rendering with expandable detail rows. |
| src/hassette/web/templates/partials/scheduler_jobs.html | Adds trigger detail rendering and updates styling. |
| src/hassette/web/templates/partials/scheduler_history.html | Adds expandable traceback display for failed executions and updates styling. |
| src/hassette/web/templates/partials/log_entries.html | Updates styling to design system badges/text utilities. |
| src/hassette/web/templates/partials/manifest_list.html | Updates empty-state styling. |
| src/hassette/web/templates/partials/manifest_row.html | Updates manifest row styling and instance-count badge. |
| src/hassette/web/templates/partials/instance_row.html | Updates instance row styling. |
| src/hassette/web/templates/partials/app_list.html | Updates empty-state styling. |
| src/hassette/web/templates/partials/app_row.html | Updates empty-state and error styling. |
| src/hassette/web/templates/partials/app_detail_listeners.html | Updates styling to design system table + text utilities. |
| src/hassette/web/templates/partials/app_detail_jobs.html | Updates styling to design system badges/tables. |
| src/hassette/web/templates/partials/health_badge.html | Removes legacy health badge partial. |
| src/hassette/web/templates/partials/event_feed.html | Removes legacy event feed partial. |
| src/hassette/web/templates/partials/entity_list.html | Removes legacy entity list partial. |
| src/hassette/web/templates/partials/dashboard_scheduler.html | Removes legacy scheduler summary partial. |
| src/hassette/web/templates/partials/bus_metrics.html | Removes legacy bus metrics partial. |
| src/hassette/web/templates/partials/apps_summary.html | Removes legacy apps summary partial. |
| src/hassette/web/templates/macros/ui.html | Updates shared macros (badges/buttons/log table) to design system classes. |
| src/hassette/web/models.py | Adds traceback + trigger detail + listener config fields to API models. |
| src/hassette/utils/execution.py | Captures and stores traceback for tracked execution errors. |
| src/hassette/scheduler/classes.py | Adds error_traceback to execution record structure. |
| src/hassette/core/scheduler_service.py | Plumbs execution traceback into scheduler history records. |
| src/hassette/core/data_sync_service.py | Serializes job trigger details; includes app/instance tracebacks in manifest snapshots. |
| src/hassette/core/bus_service.py | Captures listener configuration fields into listener metrics objects. |
| src/hassette/bus/metrics.py | Adds new listener-configuration fields to metrics and serialization. |
| src/hassette/core/app_registry.py | Captures exception tracebacks into manifest/instance snapshot info. |
| src/hassette/test_utils/web_helpers.py | Extends test helpers to build manifests/listeners/jobs with new fields. |
| tests/integration/test_web_ui.py | Updates integration expectations for new UI content and adds log filtering tests. |
| tests/e2e/conftest.py | Seeds richer fixtures (tracebacks, trigger details, listener config, app-key log registration). |
| tests/e2e/test_dashboard.py | Updates dashboard E2E tests for new panels and app chip grid. |
| tests/e2e/test_apps.py | Updates badge selectors and adds E2E coverage for app-specific log filtering. |
| tests/e2e/test_navigation.py | Updates selectors/content expectations for new sidebar and pages. |
| tests/e2e/test_websocket.py | Updates “page structure” expectation on dashboard. |
| tests/e2e/test_entities.py | Removes Entity Browser E2E tests. |
| src/hassette/web/CLAUDE.md | Updates repo UI documentation to match new template structure and removed Entities page. |
| src/hassette/web/static/js/entity-browser.js | Removes Entity Browser Alpine component JS. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
… partial tests Replace undefined token references (--ht-yellow-*, --ht-red-*, --ht-surface-1/2) with proper design tokens (--ht-warning-*, --ht-danger-*, --ht-surface-inset/code). Remove !important from detail panel row by using direct child combinator. Extract inline styles into utility classes (ht-card--full-height, ht-p-hero). Add 9 integration tests covering bus-listeners and alert-failed-apps partials. Update design system documentation with new surface and alert tint tokens.
- Fix badge border-radius and pulse animation timing in design docs - Add missing ht-btn--ghost and ht-btn--xs CSS modifiers - Add static fallback text and aria-expanded to all toggle buttons - Move alert_context import to module scope in partials.py
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 64 out of 65 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Fix instance index desync in app_detail_page by deriving instance_index from the actual instance object instead of hardcoding 0. Add text color to .ht-detail-panel for proper contrast on dark background. Strengthen weak test assertions and add regression test for non-zero instance index.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 65 out of 66 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Collapsible panels, detail rows, and traceback elements using x-show were briefly visible before Alpine.js initialized. Adding x-cloak ensures they stay hidden until Alpine takes control.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ht-prefixed design system built on CSS custom properties (tokens.css), enabling theming via[data-theme]selectors and eliminating the external CDN dependency