feat(web): add MQTT-connected dashboard SPA#21
Open
ysfscream wants to merge 4 commits into
Open
Conversation
React + TypeScript single-page dashboard for Skitter. Connects to the broker over MQTT v5 WebSocket and renders: - agent / app registry with live online/offline status - orchestration runs with workflow graph + execution trace - runtime progress stepper for create/run/request flows - multi-turn chat console with device binding - i18n (en/zh), light/dark theme, MQTT connection settings Built with Vite, Tailwind, shadcn/ui and React Flow.
There was a problem hiding this comment.
Pull request overview
Adds a self-contained React + TypeScript dashboard SPA under web/ that connects directly to an A2A-over-MQTT broker (WebSocket) to discover Agent Cards, send SendMessage requests, and render workflow/runtime traces with i18n + theming.
Changes:
- Introduces a new Vite + React + Tailwind SPA with shadcn-style UI primitives and dashboard shell/panels.
- Implements MQTT v5 request/reply + discovery/event subscriptions and a chat-driven workflow/runtime trace model.
- Adds i18n resources (EN/中文), theme persistence, and localStorage-backed settings/bindings.
Reviewed changes
Copilot reviewed 44 out of 49 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| web/vite.config.ts | Vite config (base path, plugins, dev server port + proxies). |
| web/tsconfig.node.json | TS config for Vite config compilation. |
| web/tsconfig.json | TS project references for app + node configs. |
| web/tsconfig.app.json | TS config for the React app bundle. |
| web/src/main.tsx | React entrypoint wiring CSS + i18n + App. |
| web/src/App.tsx | Mounts the dashboard shell and toaster. |
| web/src/index.css | Tailwind + global theme variables and component styling. |
| web/src/lib/utils.ts | Utility cn() helper for Tailwind class merging. |
| web/src/dashboard/types.ts | Shared dashboard data types (agents, chat, workflow trace/progress). |
| web/src/dashboard/i18n.ts | i18next initialization and EN/中文 resources. |
| web/src/dashboard/a2a.ts | A2A-over-MQTT topic helpers + JSON-RPC request builder + config persistence. |
| web/src/dashboard/agent-utils.ts | Agent display-name helper. |
| web/src/dashboard/workflow-model.ts | Derives workflow definitions/tasks and merges planned vs actual trace steps. |
| web/src/dashboard/device-binding.ts | Parses binding requests/device lists and fetches devices via /api. |
| web/src/dashboard/use-skitter-dashboard.ts | Main controller hook: MQTT connect, subscriptions, chat send, state management. |
| web/src/dashboard/components/dashboard-shell.tsx | Overall layout: header + sidebar + split panels. |
| web/src/dashboard/components/dashboard-sidebar.tsx | Left navigation between workflows vs scenes views. |
| web/src/dashboard/components/app-header.tsx | Header with connection badge, settings, and preferences menu. |
| web/src/dashboard/components/connection-badge.tsx | Connection state badge component. |
| web/src/dashboard/components/settings-dialog.tsx | MQTT/org/unit credential settings dialog. |
| web/src/dashboard/components/orchestration-panel.tsx | Chat composer + run output + workflow preview panel wiring. |
| web/src/dashboard/components/run-output.tsx | Scrollable output column for trace/progress + chat bubbles. |
| web/src/dashboard/components/chat-bubble.tsx | Markdown-rendered chat bubbles with streaming state. |
| web/src/dashboard/components/workflow-preview.tsx | Right-side panel toggling trace vs runtime progress. |
| web/src/dashboard/components/workflow-trace.tsx | Trace rendering for workflows and task-agent scenes. |
| web/src/dashboard/components/runtime-progress.tsx | Stepper UI for request/create/run runtime progress phases. |
| web/src/dashboard/components/workflow-graph-viewer.tsx | React Flow graph visualization of workflow tasks/edges. |
| web/src/dashboard/components/registry-panel.tsx | Left registry (apps/scenes + device agents, device selection, create/delete). |
| web/src/dashboard/components/agent-glyph.tsx | Icon selection logic for different agent types. |
| web/src/components/ui/button.tsx | UI primitive: Button. |
| web/src/components/ui/badge.tsx | UI primitive: Badge variants. |
| web/src/components/ui/dialog.tsx | UI primitive: Dialog wrapper around Radix dialog. |
| web/src/components/ui/dropdown-menu.tsx | UI primitive: Dropdown menu implementation. |
| web/src/components/ui/input.tsx | UI primitive: Input. |
| web/src/components/ui/textarea.tsx | UI primitive: Textarea. |
| web/src/components/ui/select.tsx | UI primitive: Select wrapper around Radix select. |
| web/src/components/ui/scroll-area.tsx | UI primitive: ScrollArea wrapper around Radix scroll area. |
| web/src/components/ui/sonner.tsx | UI primitive: Sonner Toaster wrapper. |
| web/index.html | SPA HTML template with early theme hydration script. |
| web/package.json | Web app dependencies and scripts. |
| web/eslint.config.js | ESLint flat config for TS/React hooks/refresh. |
| web/components.json | shadcn/ui generator config + aliases. |
| web/README.md | Web dashboard usage and local dev instructions. |
| web/.gitignore | Web workspace ignore rules. |
| web/public/icons.svg | SVG sprite icons for UI/links. |
| web/public/favicon.svg | Dashboard favicon asset. |
| web/public/emqx.svg | Sidebar logo asset. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ded IP
- use the unique clientId as the requester agent_id segment in the reply
topic ($a2a/v1/reply/{org}/{unit}/{agent_id}/{suffix}); no slash in agent_id
- set MQTT Client ID to the spec format {org}/{unit}/{agent_id}
- filter incoming replies on the dashboard's own agent_id (not a fixed
"dashboard" literal) and add clientId to the handler deps
- default Vite dev-proxy targets to localhost, overridable via env vars,
instead of a hard-coded public IP
…ault - root README: brief "Web Dashboard" intro + how to run (pnpm install && dev) - web/README: replace the hard-coded public-IP broker default with the same-origin / localhost dev-proxy behavior and document the proxy env vars
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
Adds a standalone React + TypeScript single-page dashboard for Skitter under
web/. It connects directly to the broker over MQTT v5 (WebSocket) and visualizes the A2A coordinator's activity, with no server-side component.Features
Stack
Vite, Tailwind, shadcn/ui, React Flow, react-i18next, MQTT.js.
Notes
web/; this PR contains no backend changes.pnpm installthenpnpm devto run locally;pnpm buildfor a production bundle.pnpm lintandtsc -bboth pass; the production build succeeds.