Customer 360 surface
Operator-facing account view that stitches subscriber profile, circuit state, payment health, and open tickets into one dense canvas with a provenance strip for every asserted field.
supportprovenance
System / Layout
Shell grammar & layouts
Page chrome, dashboard shells, list/detail patterns, settings frames, and map workspaces — the structural scaffolding operators work inside.
Shell grammarOperational archetypesKeyboard-first
App shells
App shells
App shell
The flagship Infara shell: persistent dark topbar with inline workspace tabs, collapsible grouped sidebar, and a scrollable main canvas. Use this as the outer chrome for any operator product and pass the current workspace + nav groups as props.
InfaraOps Consoleregion · us-east-1
ops · overview
Canvas renders here
Parent layers drive routing and data; the shell stays presentational. Toggle the collapse button in the topbar or click a sidebar item to see the active treatment.
Keyboard · ⌘B
Dashboard shell
The default Infara command-center chrome: dark gradient sidebar, primary top bar, and a content canvas sized to the operator. Use this shell for NOC, monitoring, and dense dashboards.
Workspace · Aurora
Operations overview
Throughput
28,412
+12.4%
p99 latency
480 ms
−9.2%
Open tickets
147
+3
Sidebar shell
Primitive sidebar + top bar combination for workspaces that own their own canvas. Collapse-ready, brand-aware, and keyboard-navigable.
Workspace / Aurora
Traffic review
Ops Lead
Use this shell when the workspace owns the top bar and you don't need the full bleed of the dashboard shell. The sidebar stays cohesive across every Infara product.
Keyboard · ⌘B
Analytics workspace
Consolidated Infara adoption of upstream dashboard-01 without the upstream sample data. KPI row + chart slot + table slot. Slot in the existing data-table when you wire real rows.
Operations overview
Weekly read of fleet health, latency, ticket pressure, and subscriber growth for the Aurora workspace.
30-day uptime
99.24%
+0.4 pp
Above target
Target: 99.0%. 14 sites at-risk rolled back into healthy.
Live metric
p99 latency
480 ms
−9.2%
Improving
Core uplinks stable; edge optics re-tuned Tuesday.
Live metric
Open tickets
147
+3
Within budget
Queue headroom allows a freeze-free release window.
Live metric
Net new subs
1,284
+4.5%
Quarter trend
Northeast region drove 62% of the week-over-week gain.
Live metric
Daily traffic
Sessions and exports for the past week.
Release gate
Pre-release QA passes before the freeze window.
Build · greenA11y · passSmoke · pending
Slot the Infara DataTable component here for the real row-level drill-down. The workspace stays presentational so the parent owns pagination, sorting, and selection state.
Settings shell
Settings frame for in-app configuration. Sidebar nav stays narrow; content stays readable. Use this for profile, integrations, data retention, and admin panes.
Workspace settings
Manage account, integrations, and operational policy for the Aurora workspace.
The profile pane renders here. Settings content should follow compact density, with clear labels, helper text, and explicit action hierarchy.
Workspaces
Workspaces
Queue workspace
Full-bleed queue shell for support-floor, STS, and escalation surfaces. Filter rail, main queue, optional detail pane, and keyboard-shortcut status bar. Parent owns rows, filter state, and row actions.
Support floor · NOC escalations
Open tickets
5 openAcknowledge, assign, and escalate open incidents. Selection drives the detail pane.
1 selected
J / KNavigateAAcknowledgeEEscalate/Focus search
5 rows · sorted by newest
NOC wall
Dark-native multi-pane monitor grid tuned for projector and dual-monitor use. Dense alarm column, live chart stack, and regional topology with a sticky status ticker. Always-on surface; prefers clarity at distance over density.
Region · us-east-1
Aurora NOC — overnight
LiveLive charts
Uplink throughput · 24h
p99 latency · 24h
Wizard shell
Multi-step workflow chrome. Stepper rail with tone-coded indicators, canvas body, sticky footer with back/continue, and a destructive-confirm submit on the review step. Pair with multi-step-form for field-level orchestration.
Workflow · compliance audit
Launch compliance job
Configure scope, selected checks, guardrails, and review before the job runs against live sites.
Step · checks
Checks
The wizard shell owns navigation, stepper state, and the destructive-confirm gate on the review step. Form fields belong in the canvas body — pair with multi-step-form for validation and orchestration.
Placeholder panel for step body.
Registry blockKeyboard · Tab/Shift-Tab
Inspector split
Three-pane shell for map-heavy and geo-topology surfaces. List + canvas + resizable inspector with left/right docking and dismissal. Presentational — parent owns pane contents.
Sites · 4
TX-HUDSONOAKS-EA-1
Uplink degraded
OK-NORMAN-POP-1
Healthy
AR-FAYETTEVILLE-WEST-3
Healthy
TX-FORTWORTH-CORE-2
Healthy
Canvas · map or topology
Parent renders MapLibre, diagrams, or topology here.
Conversation shell
AI-assisted workspace with run-history rail, conversation stream, sticky composer, provenance rail, and human-override approval gate. Extends the chat-message block; parent owns submission, streaming, and consequential orchestration.
Assistant · incident triage
Hudson Oaks uplink triage
Draft, review, and approve operator-facing summaries before they post to the incident thread.
claude-opus-4-7Context · 18k tokens
user
Draft a ticket triage summary for the Hudson Oaks uplink incident — skip the play-by-play, keep the blast radius and recommended next step.
assistant
Summary — Hudson Oaks EA-1 uplink has been degraded since 14:29Z. Peer router tx-core-2 unresponsive; 184 subscribers affected across 3 hot sites. Recommended next step: route to uplink queue if the threshold stays degraded for another 3 minutes and acknowledge ALR-0412.
Human gate · pendingAssistant drafted a summary. Approve to post to the incident thread.
Layout patterns
Layout patterns
List plus detail
Two-pane operator workspace. Left pane keeps the queue; right pane owns the detail. Resizable so operators tune to their task.
Open alarms
4ALR-0412
CriticalUplink degraded
TX-HUDSONOAKS-EA-1
ALR-0411
HighPower event
OK-NORMAN-POP-1
ALR-0410
WarningSFP fault
AR-FAYETTEVILLE-WEST-3
ALR-0409
InfoOptics threshold
TX-FORTWORTH-CORE-2
Detail · ALR-0412
Uplink degraded — TX-HUDSONOAKS-EA-1
Upstream optics below threshold for the last 7 minutes. Peer router last responded at 14:29Z; site has not reported power loss. Route alarm to uplink queue if the threshold stays degraded for another 3 minutes.
last-rx-signal: -22.4 dBm (warn at -20.0)peer-router: tx-core-2 (not responding)impacted-subs: 184 (3 hot sites)
Page chrome
Page chrome
Preview shell anatomy
The shared preview shell is itself an operational chrome pattern. Every route composes the same five rungs so operators and agents can scan quickly.
Infara
Design system
v2.0 · registry
System / Layout
Shell grammar
The eyebrow points; the title locks the frame; the description gives the operator the why.
- 01
Brand header
Anchors the product surface. Infara mark, product name, environment chip, and theme toggle live here. Keep it dark-native.
- 02
Workspace switcher
Top-of-shell tabs for cross-surface navigation. Currently pinned to Components, Blocks, Layout, Specs, and Docs.
- 03
Eyebrow + title + description
Every route opens with these three rungs. The eyebrow is the wayfinding; the title is the frame; the description tells the operator what the surface is for.
- 04
Grouped sidebar
Sections collapse by group so the same shell adapts from 6 to 30 sections without breaking the scan. Active state is section-accurate.
- 05
Section anchor
Every section ships with an id, eyebrow, title, and subtitle so scroll-spy and deep-links stay honest.
Section anatomy
Every preview section ships with the same five-part structure. Keep these rungs consistent so the DOM stays readable to scroll-spy, screen readers, and agents.
- 01
Eyebrow
Uppercase display type, ≤ 0.38em tracking. Positions the section inside a larger sequence (e.g. Foundations / 02).
- 02
Title
Sentence-case <h2>. Short. Describes the outcome, not the file.
- 03
Subtitle
One sentence max. Enough context for an operator to know if the section applies to their current task.
- 04
Accent bar
Thin gradient rule that anchors the eyebrow/title pair without stealing attention from the content below.
- 05
Panel surface
rounded-md, 1px border, card background, shadow-card at rest. Preview wrappers stay neutral so demo content doesn't fight the chrome.
Example · section
Section eyebrow
Section title
Subtitle carries just enough context for the operator.
Panel surface · registry components render inside here.
Scroll-spy anchora11y labeled
Planned next
Planned next
Planned next
Layout patterns the registry does not ship yet. Listed here so consumer agents don't invent local forks while waiting for the shared surface.
Outage command room
Incident-scoped chrome combining the NOC wall, conversation shell, and queue workspace into a single blast-radius-first control surface with role-gated actions and a visible timeline.
incidentrole-gated
Policy diff review
Side-by-side change review for compliance/automation policies with blast-radius summary, approval chain, and a dry-run preview before promote.
approvaldiff
Map + timeline split
Inspector-split variant with a synchronized timeline scrubber under the canvas so operators can step incident state across geo without losing the inspector pane.
maptimeline