chart/bible-local/architecture/ui-information-architecture.md

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