core/bible/architecture/ui-information-architecture.md

UI Information Architecture

Asset Page

Required section order:

1. Current Components
2. Previous Components (directly below Current Components)
3. Movement & Events (timeline cards)

Previous Components lists components that were previously installed on the asset and are currently removed.

Asset card editing contract:

• Card has Edit toggle.
• In edit mode:
  • Read-only card fields switch to editable inputs.
  • Edit button changes to Save.
  • Cancel button appears next to Save.
• Save persists changes through PUT /registry/assets/{id}.
• Cancel reverts unsaved form values and returns to read-only mode.

Component Page

Required content:

• Component card including current firmware
• Installation history table with:
  • Asset
  • Installed At
  • Removed At
• Timeline is rendered as grouped cards (not raw event rows), same interaction model as asset page.

Timeline UX (Asset + Component Pages)

Timeline rendering rules:

• Timeline UI renders cards grouped by day, not a flat list of raw timeline_events.
• Multiple events of the same visual action in one day are visually deduplicated by action + context.
• Correlated mass operations (correlation_id) are shown as a single bulk card with affected counts.
• Asset timeline has an additional fallback collapse rule for movement cards:
  • Installation / Removal events without correlation_id are collapsed by source_type + visual_action + 1-hour bucket.
  • correlation_id grouping takes precedence over the 1-hour fallback.
• Every card shows source label (Ingest, CSV import, Manual edit, System) derived from history event source_type.
• Every card is clickable and opens a single drilldown modal:
  • left pane: concrete events in the card
  • right pane: details of selected event
  • no nested modal

Scope-specific timeline card content:

• On asset page, card summary must not repeat the current asset label in each row/card.
• On component page, card summary must not repeat the current component label/serial/model in each row/card.
• Instead, show the opposite side of the relation (asset on component page, component on asset page), plus slot/device when available.
• Collapsed Installation / Removal cards render a two-column summary:
  • left: Models as chips (32x MODEL_A, 8x MODEL_B)
  • right: Slots as chips with aggregation (AOC#[1..4])
  • component serials are not shown in collapsed movement cards
  • raw event counts are not shown in collapsed movement cards

Timeline filters:

• Filters are server-side (history timeline API) and include:
  • date range
  • action
  • source
  • device
  • slot
  • Part number / Model (v1 maps to model)
  • serial
• On component page, filters that are invariant for the current component scope (component serial / part number) are hidden.
• On asset page, filters that are invariant for the current asset scope are hidden.

Timeline drilldown modal:

• Card drilldown uses the same timezone (tz) as the visible timeline grouping.
• Collapsed Installation / Removal modal header/meta is human-readable (Installed N components / Removed N components) and avoids raw N events wording.

Component card editing contract:

• Card has Edit toggle with the same mode behavior as asset card (Edit -> Save, show Cancel).
• Save persists changes through PUT /registry/components/{id}.
• Cancel reverts unsaved form values.

List Pages

Creation flows:

• Assets list page provides New Asset action that opens modal form and creates entity via POST /assets.
• Components list page provides New Component action that opens modal form and creates entity via POST /components.

Shared list behavior:

• Every table-based list in UI pages must provide pagination in one shared visual style:
  • Summary: Showing X–Y of N
  • Navigation: Prev, page links with ellipsis when needed, Next
  • Query contract: page number is controlled through URL query (page for list pages, section-specific keys for multi-list pages such as dashboard).
• Every table header must provide per-column text filtering:
  • A filter input is rendered under each column header.
  • Input suggestions are populated from current values visible in that table (current page/slice).
  • Filtering is case-insensitive and applies as substring match.

Assets list specifics:

• All Assets table filtering is server-side and applies to the full dataset before pagination.
• All Assets supports global bulk selection:
  • Header Select checkbox can select all assets across all pagination pages.
• Selected IDs persist across page navigation and are stored in browser local storage.

Global Search

• UI top bar provides a global search form available on all pages.
• Global search page (/ui/search) searches across:
  • Assets
  • Components
  • Failure events
• Results are split by entity type and paginated independently per section.

Supporting Repositories Required By UI

• timeline.EventRepository.ListLatestBySubjectsAndEventTypes(...)
• registry.InstallationRepository.ListPreviousComponentsByAsset(...)
• registry.InstallationRepository.ListInstallationHistoryByComponent(...)