# UI Information Architecture

## Page Structure

The page should contain:

1. header
2. snapshot metadata strip
3. compact section navigation
4. ordered content sections

## Header

Show only essential context:

- product name
- target host if present
- collected time if present
- source type and protocol if present

## Section Order

Preferred order:

1. `board`
2. `firmware`
3. `cpus`
4. `memory`
5. `storage`
6. `pcie_devices`
7. `power_supplies`
8. `sensors`
9. unknown sections

## Section Presentation

- singleton object sections render as key-value table
- array sections render as compact data tables
- sensors render as separate subtables for `fans`, `power`, `temperatures`, and `other`

## Visual Rules

- status badges:
  - green for `OK`
  - yellow/amber for `Warning`
  - red for `Critical`
  - gray for `Unknown`
  - light gray for `Empty`
- do not color arbitrary non-status fields
- keep tables dense and scan-friendly

## Complexity Limits

- no multi-tab application shell
- no dashboard analytics
- no wizard-like workflow
- no collector controls

## Accessibility

- tables must remain readable on desktop and mobile
- section navigation must work without JavaScript
- color must not be the only status indicator; always show text