Improve Markover review UI

[lastobelus]

Summary

Claude’s incremental UI experiment is rebuilt on the canonical app-structure vocabulary landed in #199 and rebased onto current main.

The inherited UI changes include:

• refine the app header, navigation, and three-pane ground hierarchy
• use SF Pro typography and a consistent weight scale
• clean up pane seams, focus bars, resizing handles, and responsive widths
• move review navigation into the left pane
• connect the selected document-tree row to the right pane
• use the combined Markover lockup and expose a resizable theme-token inspector
• remember window size and position

Naming and theme-token foundation

#199 owns the canonical names: App shell, App header, Pane layout, Left pane, Center pane, and Right pane. This PR uses those names throughout its DOM, TypeScript, CSS, settings, tests, and structural semantic tokens.

The floating development palette is consistently named the theme-token inspector so it does not collide with Markover’s Ember/Ocean/Olive palette setting. It:

• groups the canonical app-structure tokens together
• reports live computed custom-property values, including appearance-specific overrides
• styles itself through --theme-token-inspector-* component roles
• keeps the App header override scoped to --app-header-background

The architecture documentation now records this PR’s current structural color mappings.

Validation

• npm run ci:local
  • build, lint, typecheck, and third-party notices
  • 864 tests
  • packaged Electron smoke test
• focused theme-token inspector tests
• exhaustive retired-name scan
• independent naming/theme diff review

Status

Draft while human UI QA continues.

🤖 Original incremental UI work generated with Claude Code; branch split, rebase, naming alignment, and token audit completed with Codex.

[lastobelus]

Work intent

phase: review
summary: "PR #195 is rebased onto current main; the floating theme-token inspector is naming-clean, semantically scoped, fully validated, and ready to open for human QA."
touch-points:
  - docs/developer/app-structure.md
  - src/index.html
  - src/renderer.ts
  - src/styles.css
  - test/brand.test.ts
  - tmp/pr-195-dev-checklist.md
done-when:
  - "PR #195 is rebased onto the current origin/main without losing inherited UI behavior."
  - "The floating inspector displays canonical App shell, App header, Left pane, Center pane, and Right pane structural tokens."
  - "Structural semantic tokens use the documented prefixes and the inspector's own styling uses theme-token-inspector component roles."
  - "Displayed token values refresh from live computed custom properties across palette and appearance changes."
  - "Focused tests and npm run ci:local pass."
  - "The PR-specific development review opens successfully for human QA."
excludes:
  - "Naming the next content/component layer outside the floating inspector."
  - "New palette color consolidation or visual redesign."
  - "Merging PR #195."
blocked-by:
  - "A user-confirmed QA window is required before launching or focusing the development app."
may-block: []
branch: "t3code/improve-markover-ui"