Web UI
The crew-facing app in packages/bosun/ui/web, served by bosund on the vessel and used at the helm, the nav station and in the bunk.
On this page
The web UI is a React app built into the bosund binary and served from the vessel. The crew uses it on a tablet at the helm, a laptop at the nav station and a phone in the bunk, often with no internet connection. It takes more from the system than any other surface: every token, all four themes, the severity and integrity rules, and every pattern.
What it takes from the system
| System element | Where it lives in the web UI |
|---|---|
| Tokens and the four themes | src/tokens.css, components/instruments/themes.css; src/theme.ts stamps the theme |
| Typefaces | IBM Plex Sans and IBM Plex Mono, bundled with the app |
| Icons | src/icons/openbridge/ for maritime concepts, Lucide for generic UI |
| Severity | src/severity.ts: board level to color, shape, label and flash |
| Data integrity | The Reading component and src/instrumentIntegrity.ts |
| Patterns | Sidebar, alarm row, status pill, readout strip |
| Verification | src/styles.contract.test.ts and the Playwright suite in visual/ |
In every theme
The web UI offers all four themes for the light conditions aboard. Theme and brilliance are presentation preferences. The application restores saved preferences at startup; automatic light/dark selection follows the system preference. A Night presentation must be an explicit crew choice, not a consequence of opening a report.
Adoption: IBM Plex fonts are bundled in the app. Consumer token aliases, instrument styles and application data adapters live under packages/bosun/ui/web/src/; individual screens determine their kit adoption.
Chrome quiet, data loud
Connecting a component to the vessel
The application owns subscriptions, timestamps, validation and persistence. Pass the kit a value with its unit, reference and integrity state; a visually plausible dial cannot establish whether its sensor is connected. Keep a user's draft separate from incoming shared records, and show a completed save only after confirmation. An alert acknowledgment follows the authoritative alert state, not the click alone.
Verify a screen with lost data, delayed responses, long translated labels, touch and keyboard input. Exercise Night and Bright at the intended viewing distance. A report preview can reuse the presentation, but it must identify recorded or illustrative data and cannot offer controls that appear to operate the vessel.