Settings card: WorkClaw structure (P2)

Match the captured card (rec-1): rounded-xl mx-6 ring-1 bg-neutral-900 with
not-last:border-b rows (was divide-y bg-surface-warm); row label is the
prominent text (flex-1 text-sm font-medium) and the value is muted text-xs
(previously reversed). Body uses gap-5 with hero px-6 / card+access mx-6
(was a uniform p-3). Verified by rendering the panel against the capture.

86 unit + 6 panel E2E green.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

frontend/src/components/computer/apps/SettingsApp.tsx

@@ -149,33 +149,39 @@ 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 gap-5 pb-3">
       <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">
-          <span className="text-muted-foreground">Managed by</span>
-          <span>{settings.data?.managed_by_name ?? "…"}</span>
+      <div className="mx-6 overflow-hidden rounded-xl bg-neutral-900 ring-1 ring-neutral-800/70">
+        <div className="flex w-full items-center gap-3 border-neutral-800/70 px-3 py-2.5 not-last:border-b">
+          <span className="flex-1 truncate text-sm font-medium">Managed by</span>
+          <span className="shrink-0 text-xs text-muted-foreground">
+            {settings.data?.managed_by_name ?? "…"}
+          </span>
         </div>
         <button
           type="button"
           onClick={() => setScreen("edit")}
-          className="flex w-full items-center justify-between px-3 py-2.5 transition-colors hover:bg-neutral-800/40"
+          className="flex w-full items-center gap-3 border-neutral-800/70 px-3 py-2.5 text-left transition-colors not-last:border-b hover:bg-neutral-800/40"
         >
-          Edit profile
-          <ChevronRight aria-hidden size={14} className="text-muted-foreground" />
+          <span className="flex-1 truncate text-sm font-medium">Edit profile</span>
+          <ChevronRight
+            aria-hidden
+            size={16}
+            className="shrink-0 text-muted-foreground"
+          />
         </button>
       </div>
-      <p className="pt-1 text-[11px] font-medium uppercase tracking-wider text-subtle-foreground">
+      <p className="px-6 text-[11px] font-medium uppercase tracking-wider text-subtle-foreground">
         Who else has access
       </p>
       <div
         role="radiogroup"
         aria-label="Other Claws"
-        className="rounded-xl bg-surface-warm p-2 text-xs"
+        className="mx-6 rounded-xl bg-neutral-900 p-2 text-xs ring-1 ring-neutral-800/70"
       >
         <p className="px-1 pb-1 text-muted-foreground">Other Claws</p>
         {(["any", "specific"] as const).map((mode) => (