Panel app-header system + Settings hero (P1, capture-verified)

The panel app header now matches WorkClaw's measured pattern (dark captures
agent-settings / files-explorer / edit-profile):

- App TOP screen: the header lives on the app surface (sticky), showing the
  app name (text-lg font-semibold) + a size-7 rounded-full close-X → home,
  at px-5 pt-4 pb-3 — replacing the old px-8 pt-6 chevron+small-title. The
  home screen keeps its dot + "{agent}'s Computer" header.
- Sub-screens (AppShell SubViewHeader): back-chevron PILL + text-lg
  font-semibold title at px-5 pt-4 pb-3 (was text-xs px-3 pt-3 pb-2).
- Settings hero: 96px squircle avatar + text-xl name + text-sm role (matches
  the capture; reviewer's 126px was wrong). New Avatar `settings` size.

p3-panel E2E updated (home nav is now the "Close" button). typecheck/lint/
86 unit/31 E2E/6 visual all green; no visual baseline change.

Known follow-up (P2): Settings/Files sub-screens still stack the top header +
the back-header (pre-existing) — to be unified per-app.

Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
Omar Sobh
2026-06-12 21:32:02 -05:00
co-authored by Claude Opus 4.8
parent db3dcff932
commit b61073ce05
5 changed files with 45 additions and 33 deletions
@@ -150,10 +150,10 @@ export default function SettingsApp({ agent }: { agent: Agent }) {
const agentsMode = settings.data?.access_policy.agents.mode ?? "any";
return (
<div className="flex flex-col gap-3 p-3">
<div className="flex flex-col items-center gap-1 py-2">
<Avatar name={live.name} accent={live.accent} size="lg" shape="squircle" />
<p className="text-sm font-medium">{live.name}</p>
<p className="text-xs text-muted-foreground">{live.job_title}</p>
<div className="flex flex-col items-center px-6 pt-7 pb-5">
<Avatar name={live.name} accent={live.accent} size="settings" shape="squircle" />
<h1 className="mt-3 text-xl font-semibold tracking-tight">{live.name}</h1>
<p className="mt-0.5 text-sm text-muted-foreground">{live.job_title}</p>
</div>
<div className="divide-y divide-divider-subtle overflow-hidden rounded-xl bg-surface-warm text-xs">
<div className="flex justify-between px-3 py-2.5">