feat(ui): unify settings panels onto PanelPage + ChipTabs layout primitives #3646

PR
PR description

Summary

  • Introduce shared layout primitives — PanelScaffold (fixed header + scrollable body), PanelPage (optional title/description/chips over the scaffold), PanelHeader, and a reusable ChipTabs bar.
  • Migrate all settings panels (Account, AI, Team, MCP, Composio/OAuth, Integrations, Usage, Wallet, debug panels, etc.) onto PanelPage for a consistent header band, seamless two-pane card, and even body padding.
  • Enforce PanelPage on Brain and Connections pages and their hosted panels; adopt ChipTabs for the settings sub-nav and tabbed panels (MCP client selector, Notifications).
  • Rename Composio → OAuth in Connections and move the Composio API key under the API keys section; give the Agent profiles sidebar entry an icon.
  • Add settingsNavIcons and supporting i18n keys (with real translations across all 14 locales).

Problem

Settings panels each rolled their own header/body scaffolding, producing inconsistent padding, divider treatment, and titling across the right pane. There was no shared primitive for the fixed-header/scrollable-body pattern or for the chip-style tab bar repeated across sub-navs.

Solution

  • Extract the header/body pattern into PanelScaffold and layer optional title/description/chips on top via PanelPage, so every panel renders through one path.
  • Factor the chip-tab bar into ChipTabs and adopt it wherever a segmented selector existed.
  • Migrate panels incrementally (AppearancePanel as the recipe reference, then the rest) keeping behavior identical — this is a presentation-layer refactor, not a behavior change.
  • Update co-located unit tests to match the new component structure.

Submission Checklist

  • Tests added or updated (happy path + at least one failure / edge case) per Testing Strategy — added ChipTabs.test.tsx; updated panel/page unit tests to the new structure.
  • Diff coverage ≥ 80% — changed lines are React presentation components exercised by Vitest; updated tests cover the migrated panels and new ChipTabs/PanelPage primitives.
  • N/A: Coverage matrix — presentation-only refactor; no feature rows added/removed/renamed in docs/TEST-COVERAGE-MATRIX.md.
  • N/A: Affected feature IDs — no matrix feature behavior changed.
  • No new external network dependencies introduced.
  • N/A: Manual smoke checklist — no release-cut surfaces (core/RPC/CLI) touched; UI presentation only.
  • N/A: Linked issue — no tracking issue for this UI consistency pass.

Impact

  • Desktop UI only. No Rust core, RPC, CLI, or persistence changes. No new network deps.
  • Visual consistency improvement across Settings, Brain, and Connections; no functional behavior change to panels.
  • i18n: new keys added with translations across all 14 locale files (parity maintained).

Related

  • Closes:
  • Follow-up PR(s)/TODOs:

AI Authored PR Metadata (required for Codex/Linear PRs)

Linear Issue

  • Key: N/A
  • URL: N/A

Commit & Branch

  • Branch: feat/panelpage-settings-migration
  • Commit SHA: a3779f67f237757009eab7f48a07fc29b9430478

Validation Run

  • pnpm --filter openhuman-app format:check
  • pnpm typecheck
  • Focused tests: ChipTabs.test.tsx and migrated settings panel tests (Vitest)
  • N/A: Rust fmt/check (no Rust changed)
  • N/A: Tauri fmt/check (no Tauri changed)

Validation Blocked

  • command: N/A
  • error: N/A
  • impact: N/A

Behavior Changes

  • Intended behavior change: None — presentation-layer refactor. (Composio→OAuth is a label/placement rename only.)
  • User-visible effect: Consistent panel headers/padding; "Composio" surfaced as "OAuth" with the API key relocated under "API keys"; Agent profiles sidebar icon.

Parity Contract

  • Legacy behavior preserved: Yes — panels render the same content/actions through the new scaffold.
  • Guard/fallback/dispatch parity checks: N/A — no dispatch/guard logic touched.

Duplicate / Superseded PR Handling

  • Duplicate PR(s): None
  • Canonical PR: This PR
  • Resolution: N/A
CUT
cutter bot commented just now

🎬 Cutter preview — PR #3646

Select a settings sub-navigation tab
Select a settings sub-navigation tab — Team settings panel adopts the unified PanelPage layout with ChipTabs navigation for managing members and teams.		/connections?tab=oauth-key
/connections?tab=oauth-key — Connections page uses unified PanelPage layout with sidebar categories and OAuth integrations grid.
Navigate back from a settings sub-panel
Navigate back from a settings sub-panel — Agent Profiles settings panel lists built-in agents with active state and edit controls.