UI & UX Building Blocks

1️⃣ Section Purpose

This section documents the reusable UI building blocks and UX-supporting modules that are shared across domains.

In this repo, “UI” is not only components—it’s also:

shared hooks that standardize context access and UI behavior
the help system (topic registry + help trigger button)
the health-check hook used for status surfaces

2️⃣ Scope & Boundaries

Included: - Shared UI components under frontend/src/components/ui/* - Shared hooks under frontend/src/hooks/* - Help topic registry (frontend/src/help/topics.ts) - Help UI trigger (frontend/src/features/help/*) - Health polling hook (frontend/src/features/health/*)

Excluded: - Theme tokens and component defaults (see Theming) - Routing/page orchestration (see Routing and Domains)

3️⃣ High-Level Diagram

graph LR Domains[Domain pages] --> UI[Shared UI components] Domains --> Hooks[Shared hooks] Domains --> Help[Help trigger + topics] Domains --> Health[Health polling] Hooks --> Ctx[Context providers] Help --> I18N[Translations (help namespace)]

4️⃣ Section Map (Links to nested docs)

Shared UI components - Small reusable building blocks like StatCard
Hooks & context access pattern - createContextHook() and the standardized useAuth/useSettings/useHelp
Help system (topics + trigger button) - Registry-driven help topics and how to open them
Health check hook - Lightweight polling of /api/health and runtime validation

⬅️ Back to Frontend Architecture Index

UI & UX Building Blocks

1️⃣ Section Purpose

2️⃣ Scope & Boundaries

3️⃣ High-Level Diagram

4️⃣ Section Map (Links to nested docs)

Contents

Related ADRs