feat(dashboard): Thread version, always-on nav tabs, pairing autofocus#675
Merged
Merged
Conversation
- Show Thread protocol version in node Thread Network panel, sourced from NetworkCommissioning ThreadVersion attribute (cluster 0x31, attr 0x0A). Maps Thread Version TLV 1..5 to 1.0..1.4; unmapped values render as "Thread unknown (N)" so raw value stays visible. - Remove the @media (max-width: 768px) gate that hid Thread/WiFi navigation tabs on small viewports; tabs are now always visible. - Auto-focus the pairing-code field when the commission-node dialog opens. For WiFi/Thread, the credentials-step field is focused first when credentials are not yet set, then the pairing-code field once it appears. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves the dashboard network UX by surfacing the Thread protocol version (from Matter’s NetworkCommissioning cluster), keeping network navigation tabs visible on small viewports, and auto-focusing the appropriate commissioning input fields when the commission dialog opens.
Changes:
- Add ThreadVersion (0/49/10) parsing + formatting and display it in Thread node details.
- Remove the small-screen CSS rule that hid the network navigation tabs.
- Add autofocus behavior to commissioning dialog flows (existing, WiFi, Thread) to focus credentials first (when unset) and pairing/share code when available.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/dashboard/src/pages/network/network-utils.ts | Adds ThreadVersion attribute accessor and formatter with forward-compatible “unknown (N)” fallback. |
| packages/dashboard/src/pages/network/network-details.ts | Renders “Thread version” row in the Thread Network panel when available. |
| packages/dashboard/src/pages/components/header.ts | Removes the 768px media rule that hid nav tabs to keep them visible on small screens. |
| packages/dashboard/src/components/dialogs/commission-node-dialog/commission-node-wifi.ts | Adds updated()-driven autofocus logic for SSID vs pairing code depending on credential state. |
| packages/dashboard/src/components/dialogs/commission-node-dialog/commission-node-thread.ts | Adds updated()-driven autofocus logic for dataset vs pairing code depending on credential state. |
| packages/dashboard/src/components/dialogs/commission-node-dialog/commission-node-existing.ts | Auto-focuses the Share code field on first render. |
| CHANGELOG.md | Documents the dashboard enhancements and autofocus fix under “WORK IN PROGRESS”. |
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
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
ThreadVersionattribute (0x31/0x0A). Maps Thread Version TLV1..5to1.0..1.4; unmapped values render asThread unknown (N).@media (max-width: 768px) { .nav-tabs { display: none } }gate so tabs remain visible on small viewports.🤖 Generated with Claude Code