mirror of
https://github.com/meshtastic/web.git
synced 2026-07-31 06:56:28 -04:00
Surfaces what the connection handshake is doing in real time. Per DDD,
the predicate + counters live in the SDK; the web overlay is a thin
consumer of the signal.
SDK
- New `MeshClient.progress: ReadonlySignal<ConnectionProgress>` with the
state machine `idle → configuring → configured`. Counters
(config / modules / channels / nodes + boolean myInfo / metadata)
tally inbound packets each `configure()` cycle.
- `configure()` resets to `configuring` with empty counters.
`onConfigComplete` flips to `configured`.
- `ConnectionProgress` + `ConnectionProgressCounters` exported from the
package surface.
- 6 new tests in `MeshClient.progress.test.ts`.
sdk-react
- `useConnectionProgress()` hook reads the active client's signal,
returns `{ phase: "idle" }` when there is no active client so the
caller can render unconditionally.
apps/web
- `ConnectingOverlay` redesigned as a terminal-style streaming log:
- macOS-window-style header (red/yellow/green dots) with a live
`phase` indicator pulse.
- Monospace event lines with `→` (active) / `✓` (done) / `•` (info)
glyphs and a relative-seconds timestamp column.
- Auto-scrolls to the latest entry; blinking caret on the trailing
active line.
- Lines derive from `device.connectionPhase` transitions and per-
counter bumps on `MeshClient.progress`. Resets on each fresh
connect cycle.
- Mounted at the top of the device tree (outside the device-conditional
branch) so it shows during a first-time connect from the Connections
screen as well as reconnects from inside the app.
- i18n strings under `connections.overlay.log.*`.
@meshtastic/sdk-react
React hooks and provider for @meshtastic/sdk.
Install
pnpm add @meshtastic/sdk @meshtastic/sdk-react @meshtastic/transport-web-serial
Quickstart
import { MeshClient } from "@meshtastic/sdk";
import { MeshProvider, useDevice, useChat } from "@meshtastic/sdk-react";
import { TransportWebSerial } from "@meshtastic/transport-web-serial";
import { ChannelNumber } from "@meshtastic/sdk";
const transport = await TransportWebSerial.create({ baudRate: 115200 });
const client = new MeshClient({ transport });
await client.connect();
function App() {
return (
<MeshProvider client={client}>
<Status />
</MeshProvider>
);
}
function Status() {
const { status, myNodeNum } = useDevice();
const { messages, send } = useChat(ChannelNumber.Primary);
return <div>{status} / {myNodeNum} / {messages.length} msgs</div>;
}
All hooks are read-only against a single MeshClient instance supplied through context. Commands are returned as stable functions.
License
GPL-3.0-only.