Key Components¶
App shell¶
| Component | Path | Role |
|---|---|---|
AppSidebar |
src/lib/components/layout/AppSidebar.svelte |
72 px icon sidebar and the user menu (org switcher, account, team, language, theme, about, logout) |
SecondaryPanel |
src/lib/components/layout/SecondaryPanel.svelte |
Filters on /edge; grouped, foldable device navigation on device pages. Fold state is a per-user preference. See Layout. |
Breadcrumb |
src/lib/components/layout/Breadcrumb.svelte |
Sticky breadcrumb, device pages only |
NoOrganization |
src/lib/components/layout/NoOrganization.svelte |
Full-page screen for a signed-in user with no grant |
ConnectionBanner |
src/lib/components/ui/ConnectionBanner.svelte |
Connection lost/restored banner, driven by the connection store |
AboutModal |
src/lib/components/layout/AboutModal.svelte |
App version, API version, environment badge |
LanguageModal |
src/lib/components/layout/LanguageModal.svelte |
Locale picker: English, French, Spanish, German, Canadian French |
Device layout¶
src/routes/edge/[deviceId]/+layout.svelte wraps every device page:
- subscribes to the device's viewer WebSocket on mount
(
subscribeToGatewayEvents) and unsubscribes on destroy; - the pending-changes bar (Apply / Discard) while the draft differs from the applied config;
- the confirmation bar with the countdown to automatic rollback after an apply, or a "queued" notice when the device is offline.
Gateway components¶
src/lib/components/gateway/
| Component | Role |
|---|---|
PortDiagram |
The device's physical ports, with link state from carrier (carrier wins over admin status) |
PortMismatchBanner |
The config's ports differ from the ports the device reports |
AgentUpdateCard |
Agent version and update control; while an update runs, polls GetAgentUpdateStatus and shows the phase timeline (checking → downloading → verifying → installing → restarting → confirmed / failed) |
ConsoleTerminal |
xterm.js root console over an operator WebSocket (?role=operator&ticket= from IssueShellTicket), exchanging shell_* frames |
ShellSessionHistory |
Console audit trail (ListShellSessions) |
MetricSparkline |
CPU, memory, temperature series from metrics-history |
BlockTrend |
Blocked traffic over time (GetBlockTrend) |
ProfileDocs |
A service profile's own documentation, kept with the profile definition |
IntegrationsCard, IntegrationPicker, ProfileSuggestions |
Installed service profiles and suggestions |
PublishedServices, PublishedCreate, PublishedServiceConfig, PublishedSummary |
Published services and their access codes |
RelayCard, RelayPath |
The gateway's relay, and the browser → relay → LAN host path hop by hop |
CellularCard |
4G modem and link state |
LanHealthBanner, LanTroubleChip |
What stands between a LAN client and the internet |
OrphanedRefsNotice |
Config entries naming an interface the device does not have |
GovernanceTabs, NetworkTabs |
Tab bars for the Governance and network pages |
Policies page¶
src/routes/edge/[deviceId]/policies/+page.svelte holds firewall and NAT: the
rules table, the rule form with a live pf-syntax preview, and the pf.conf
viewer. policies/components/FirewallRulesTable.svelte groups rules into
sections — system, quick presets, one per profile instance, then custom — and
in simple mode summarises the profile sections instead of listing their rules.
firewall/ and nat/ only redirect here; do not add to them.
UI primitives¶
src/lib/components/ui/ — Modal (backdrop and Escape close; open,
onclose, children, maxWidth), Alert (info, warning, success),
Button, DataTable, FormInput, FormSelect, FormGroup, ToggleSwitch,
RadioGroup, ChipInput, AutocompleteInput, StatusBadge, StatCard,
InfoCard, Skeleton, CodeViewer, LogViewer, Toaster, ThemeToggle,
and others.