The dashboard and the interface

Learn the fixed shell and the pages you can reach

The React interface in Stable 2.0.55 is made of a top app bar, the main content, a footer and a language switcher in the bottom right. At desktop width the navigation icons are shown directly; on a narrower screen the same items move into a drawer on the right. Click the logo or Dashboard to return to the root route /. The top bar also holds the Status Indicator, the light/dark toggle and the entry point for System Logs.

An unknown route lands on Not Found. "Reachable" only means that Stable 2.0.55 registers the page; it does not mean every feature on that page has the same maturity. The Plugins and Standalone Devices routes are in Stable, for example, but the features behind them still have to be labeled experimental-in-Stable.

Onboarding when there is no bridge yet

The dashboard starts by calling the detailed health API. If there is no bridge yet, the page does not show the customizable widgets. It shows a welcome card instead, with three ways to create one: Bridge Wizard, Setup by Area and Manual Setup, plus an external Documentation link. These three paths are not maturity levels; they are different setup workflows.

Once you have created at least one bridge, the dashboard switches to the widget layout. When at least one fabric appears, a first-success message is shown; after you dismiss it the browser remembers hamh-first-success-dismissed in local storage. That is only a message in the interface, not a commissioning check and not a guarantee of controller compatibility.

1. Read the status at the top first

   Expand the indicator and check the version, uptime, HA connection and WebSocket. With no bridge yet, No Bridges is the expected state.

2. Choose a workflow

   For a first bridge, Bridge Wizard is usually the one to press. Choose Setup by Area only when your HA areas are fully planned, and Manual Setup only when you need the fine-grained schema.

3. Go back to the dashboard after creating

   Confirm that the welcome card has been replaced by Stats, Bridges and Quick Navigation, and that the bridge count matches what you just created.

4. Verify with status only; do not rush into commissioning

   Confirm that HA is Online, that the bridge is running and that the device count is plausible before you move on to commissioning. Do not expose any pairing data while you are still touring the interface.

Show, reorder and reset the three widgets

Once a bridge exists, a Customize Dashboard button appears to the right of the dashboard title. The dialog always manages three widgets: Status Overview, Bridges and Quick Navigation. The eye button toggles visibility, the up and down buttons swap the order, Reset restores the default order and shows everything, and Done closes the dialog.

The setting is kept in the current browser under the local storage key hamh-dashboard-widgets. It is not backend bridge configuration, and it does not travel with a Matter Hub backup or sync to every browser. On load the code ignores unknown widgets and adds newly known widgets back into the order; corrupted local storage falls back to the default.

1. Open Customize Dashboard

   Go back to the dashboard root page and press the customize icon to the right of the title. If the icon is not there, first confirm that at least one bridge exists.

2. Hide the blocks you do not need

   Press the eye to the left of a widget. An operations screen, for instance, can keep only Status Overview and Bridges. Hiding a widget does not stop the health refresh or a bridge.

3. Set the reading order

   Use Move up and Move down on the right to bring the block you read most often to the front; the first item cannot move up and the last cannot move down.

4. Test Reset

   If the layout is not what you expected, press Reset to restore stats → bridges → quickNav with everything visible, then press Done. This changes nothing in the backend.

Stats, the status indicator and two refresh cadences

The four cards in Status Overview come from api/health/detailed: the total number of bridges (with a running/failed summary), the device count summed across all bridges, the summed fabric count, and the HA connection and uptime. Once you are on the dashboard it refreshes every 15 seconds; the Status Indicator at the top calls api/health separately and refreshes every 30 seconds. The two can therefore disagree for a short while, which is not on its own a reason to conclude that data is corrupted.

The status icon is error when health is error or unhealthy, or when any bridge is stopped or failed. It can only be warning when health is still healthy but the WebSocket has dropped, or in the healthy fallback where there is no bridge or not every bridge is running; success means every bridge is running and the connections are healthy. With no bridge it shows the matching state instead of pretending that "everything is running".

Bridge mini cards, ordering and bulk actions

The top of the Bridges widget holds Bridge Wizard, Create Bridge and Area Setup, along with Start All, Stop All and Restart All. While a bulk action runs the buttons are disabled, and the code also uses a guard against double clicks; health is fetched again as soon as it finishes. These buttons are real backend actions, not just a change to what the dashboard shows.

The mini cards are ordered by priority, smallest first, with a missing value treated as 100; the #1 and #2 on screen are the current display order. Each card shows an icon, the name, running/stopped/failed, the device count and a non-zero fabric count, and it shows a warning count when there are failed entities. Click a card to open the bridge details.

The nine Quick Navigation shortcuts

Quick Navigation does not replace the full top navigation. It turns the nine destinations you use most in day-to-day operations into cards: Bridges, Area Setup, Devices, Network Map, Health, Startup Order, Lock Credentials, Filter Reference and Settings. Standalone Devices and Plugins are still reachable from the top navigation, but they are not in this set of quick cards.

If you hide the Quick Navigation widget, the top navigation still works; on a phone, open the drawer on the right first. A different interface width does not mean a feature has been removed.

Language choices and light/dark

The fixed Language button in the bottom right opens the language list; Stable 2.0.55 ships with English, Deutsch, Français, Español, Italiano, Magyar, Simplified Chinese, Traditional Chinese, Japanese, ไทย, Svenska, Türkçe, Русский and Português (Brasil). Selecting Traditional Chinese maps to zh-TW. Switching affects the interface translation only; it does not change the HA language, a bridge identity or a display name in a controller.

The moon/sun icon at the top switches between dark and light. On the desktop layout the icon is shown directly; on the mobile layout the drawer shows "Dark Mode" or "Light Mode". The theme is a browser UI preference; it does not change a bridge, a device or the contents of a log.

1. Switch language

   Press the Language button in the bottom right and pick your language from the list. If some strings are still untranslated, the translation for that pinned version may not cover them yet; that is not evidence that the backend version is wrong. Note: the Chinese edition of this guide walks through Traditional Chinese here; the steps are the same for any entry in the list.

2. Choose a theme

   On the desktop layout press the theme icon at the top; on the mobile layout open the menu on the right and pick Dark or Light Mode. Check the contrast and the readability.

3. Tell browser preferences apart from backend data

   When you check from a different browser, the language, the widgets or the theme may differ. Do not read that difference as a lost backup.

4. Redact sensitive content when you report a translation issue

   Give only the pinned version, where the string appears and the wording you expect; do not attach full System Logs, live URLs or commissioning screens.

The System Logs dialog: filter, search, refresh and clear

The Bug Report icon at the top opens the System Logs dialog. By default error, warn and info are selected and it asks api/logs for at most 500 entries; you can select several of error/warn/info/debug, type a search string, and refresh by hand. With Auto on it refreshes every 5 seconds; the Auto/Manual chip switches between the two.

Each entry shows a timestamp, a level, a message and optional context. Delete sends a DELETE to the log API and empties the current log. That has real consequences, so do not press it before you have preserved the evidence of the fault. Close only closes the dialog; it clears nothing.

Version mismatch and WebSocket connection lost

When the frontend and backend versions differ, AppLayout shows a yellow Version mismatch banner with a Reload button. That usually means the browser is still holding old frontend assets; press Reload first to get the latest UI. Do not rebuild a bridge or change storage because of it. If it is still there after a reload, then check the proxy cache, Ingress and the actual backend version.

When the global WebSocket is not connected, a red "Connection lost, data may be outdated. Reconnecting…" is shown. The WebSocket picks ws/wss from the protocol of the current page, builds api/ws from the document base, and retries about 3 seconds after a drop. The data on screen may be out of date while that lasts, so pause bulk actions and configuration changes.

Common dashboard pitfalls

1. The Customize button has disappeared

   It only shows when hasBridges is true. If the welcome card is still there, first confirm that the bridge was really created: cross-check it on the Bridges page or against the health API status, not against local storage.

2. The widget order differs on every machine

   The setting lives in each browser's local storage, not in the backend. When you need them to match, set it on every managed browser, or press Reset to go back to the default; do not restore Matter Hub storage.

3. The stats did not update right after an action

   The dashboard refreshes every 15 seconds and the status at the top every 30 seconds. Wait, then verify with Refresh or Health. A bulk action fetches once by itself when it finishes, but the data can still be out of date while the WebSocket is disconnected.

4. Connection lost never goes away

   Check whether the reverse proxy or Ingress forwards api/ws correctly, whether HTTPS uses WSS, and whether the base path matches. Do not just restart bridges over and over, because the warning is about the WebSocket layer between frontend and backend.

5. Version mismatch is still there after a reload

   Cross-check the browser cache, the proxy cache and the actual backend version. Do a no-cache reload or clear the static asset cache properly; do not clear persistent data.

6. System Logs does not show an older event

   Check the level, the search and the 500-entry limit, and check whether anyone pressed Delete. Once it is cleared, closing the dialog will not bring it back, so before you troubleshoot, save the necessary redacted data as your operations policy requires.

FAQ

Pinned-version official and source-code references

• v2.0.55 reachable routes
• v2.0.55 dashboard, onboarding, cards and bulk actions
• v2.0.55 widget customization dialog
• v2.0.55 widget definitions and local storage
• v2.0.55 version mismatch and WebSocket banners
• v2.0.55 shell, theme and the System Logs entry point
• v2.0.55 System Logs dialog
• v2.0.55 language switcher