Holistic UX/UI design pass across the web app

[ApocDev]

A cohesive design/polish sweep across the whole web app — distinct from the scoped UI feature tickets (#16, #9, #8, #6, #4), which each add or change one surface. This is the holistic pass that makes the whole thing feel coherent and intentional rather than assembled page-by-page.

Scope

Visual consistency

• Consistent spacing, typography scale, and color usage across all pages.
• Iconography: consistent icon set, sizing, and alignment (toolbars, tables, buttons).
• Component styling: buttons, inputs, drawers, dialogs, tables, badges all share one visual language.

Interaction states

• Empty states (no blocks, no tasks, no factory data, no search results) — informative, not blank.
• Loading / skeleton states for async data (solver runs, dump load, live bridge state).
• Error states and hover/focus affordances; transitions where they aid comprehension.

Information density / layout

• Table layouts (machines, summary matrix), panel sizing, whitespace, scannability.
• Honor the readable-text-size floor (text-sm; text-xs only for true fine print).

Navigation & flow

• Sidebar, routing, and how users move between block / factory / browse / whatif / coherence / turd / assistant / tasks.
• Breadcrumbs / context cues so users always know where they are.

Notes

• Cross-cutting; touches most of app/src/routes and components. Likely best done incrementally per surface against a shared design spec rather than one giant PR.
• Always display localized (display) names, never internal names (existing convention).
• Coordinate with the scoped UI tickets so we don't redo their work.