refactor(ui): establish semantic typography and refresh Mini Apps

[kev1n77]

Summary

• Establish formal semantic typography roles for page headings, section headings, card headings, body text, supporting text, metadata, and control labels.
• Apply the typography roles across the design tokens, shared component library, design lab, Web UI, mobile web, and installer.
• Add typography governance checks to prevent raw or retired typography values from returning.
• Refresh the Mini Apps gallery with shared controls, compact catalog cards, dedicated built-in app artwork, and responsive content-area layouts.
• Fix the narrow-window layout where the page title and description could collapse into single-character columns.

Fixes: N/A

Type and Areas

Type:

UI/UX, refactor, regression fix, test

Areas:

Design tokens, shared UI components, design lab, Web UI, mobile web, installer, Mini Apps

Motivation / Impact

The frontend previously lacked consistently enforced semantic typography roles, causing visually equivalent text to use different tokens and making hierarchy difficult to maintain across product surfaces.

This change formalizes those roles and applies them comprehensively, giving page titles, section titles, card titles, body content, supporting copy, metadata, and control labels stable semantic meaning.

For Mini Apps, users receive a denser and more consistent gallery, recognizable built-in app artwork, and a responsive layout that remains usable when the window is narrowed, the navigation panel is open, or display scaling reduces the available content width.

Verification

• pnpm --dir src/web-ui run test:run src/app/scenes/miniapps/components/MiniAppCard.presentation.test.ts
  • Passed: 1 test file, 8 tests.
• pnpm run check:web
  • Passed typography audit, Appearance contract audit, theme color governance, theme visual contract, and Web UI type checking.
• pnpm run build:web
  • Production build completed successfully.
  • Monaco asset and WebKit compatibility verification passed.
• git diff --check
  • Passed with no whitespace errors.

Reviewer Notes

• The typography migration is intentionally cross-cutting and covers all React frontend surfaces rather than only Mini Apps.
• Mini App artwork is stored locally as optimized transparent PNG assets; the five assets total approximately 0.4 MB.
• Unknown and third-party Mini Apps retain the existing generic icon fallback.
• The responsive Mini Apps breakpoint is based on the gallery content width instead of the full viewport width, so it also handles side panels and display scaling.
• No persistence, protocol, backend, or migration behavior changed.
• Remote workspace, remote control, Peer Device Mode, and Detached Dispatch were not separately exercised because this PR changes shared frontend presentation only.

Checklist

• This PR is focused and does not include secrets, temporary prompts, generated scratch files, or unrelated artifacts.
• Relevant verification is recorded above, or skipped checks are explained.
• User-facing strings, docs, and locales are updated where applicable.