From b74f645541bef260a7db2c7bd246b4d8a0e9ac0e Mon Sep 17 00:00:00 2001
From: Cyrus Gray <144336577+graycyrus@users.noreply.github.com>
Date: Fri, 26 Jun 2026 17:57:00 +0530
Subject: [PATCH] style(settings): normalize spacing and controls to shared
 design system (#4162)

---
 .../components/settings/panels/AIPanel.tsx    |   8 +-
 .../components/settings/panels/AboutPanel.tsx |   8 +-
 .../settings/panels/AccountPanel.tsx          |  23 ++-
 .../settings/panels/AgentBoxPanel.tsx         |  94 +++++----
 .../settings/panels/AgentChatPanel.tsx        |  55 +++---
 .../settings/panels/AnalysisViewsPanel.tsx    |   4 +-
 .../settings/panels/EmbeddingsPanel.tsx       |   2 +-
 .../settings/panels/MascotPanel.tsx           |  10 +-
 .../settings/panels/McpServerPanel.tsx        |   2 +-
 .../settings/panels/MemoryDataPanel.tsx       |  10 +-
 .../settings/panels/MemoryDebugPanel.tsx      |   2 +-
 .../settings/panels/MigrationPanel.tsx        |   4 +-
 .../panels/NotificationRoutingPanel.tsx       |  14 +-
 .../settings/panels/PermissionsPanel.tsx      |   9 +-
 .../panels/ProfileEditorPage.test.tsx         |   5 +
 .../settings/panels/ProfileEditorPage.tsx     |  26 ++-
 .../settings/panels/ProfilesPanel.tsx         |   2 +-
 .../settings/panels/RecoveryPhrasePanel.tsx   |   4 +-
 .../panels/ScreenAwarenessDebugPanel.tsx      |  32 +--
 .../panels/ScreenIntelligencePanel.tsx        |  57 +++---
 .../settings/panels/SearchPanel.tsx           |   2 +-
 .../settings/panels/SystemDiagnostics.tsx     |   2 +-
 .../panels/ToolPolicyDiagnosticsPanel.tsx     |  14 +-
 .../components/settings/panels/UsagePanel.tsx |   2 +-
 .../components/settings/panels/VoicePanel.tsx |   2 +-
 .../panels/__tests__/AccountPanel.test.tsx    |  61 ++++++
 .../panels/__tests__/MemoryDataPanel.test.tsx |  11 ++
 .../NotificationRoutingPanel.test.tsx         |  57 ++++++
 .../ScreenIntelligencePanel.test.tsx          |  18 +-
 .../PermissionsSection.tsx                    | 183 +++++++++---------
 .../__tests__/PermissionsSection.test.tsx     | 130 +++++++++++++
 31 files changed, 563 insertions(+), 290 deletions(-)
 create mode 100644 app/src/components/settings/panels/__tests__/AccountPanel.test.tsx
 create mode 100644 app/src/components/settings/panels/__tests__/NotificationRoutingPanel.test.tsx
 create mode 100644 app/src/components/settings/panels/screen-intelligence/__tests__/PermissionsSection.test.tsx

diff --git a/app/src/components/settings/panels/AIPanel.tsx b/app/src/components/settings/panels/AIPanel.tsx
index 5b0e6b346..f8579206a 100644
--- a/app/src/components/settings/panels/AIPanel.tsx
+++ b/app/src/components/settings/panels/AIPanel.tsx
@@ -3142,12 +3142,12 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
       contentClassName=""
       description={embedded ? undefined : t('pages.settings.ai.llmDesc')}
       leading={embedded ? undefined : <SettingsBackButton onBack={navigateBack} />}>
-      <div className={embedded ? 'space-y-6' : 'space-y-6 p-4'}>
+      <div className={embedded ? 'space-y-5' : 'space-y-5 p-4'}>
         {/* ═══════════════════════════════════════════════════════════════
             AUTH — provider authentication (cloud providers + local Ollama
             setup). Everything the user needs to wire a model up.
             ═══════════════════════════════════════════════════════════════ */}
-        <div className="space-y-4">
+        <div className="space-y-5">
           <div className="border-b border-line pb-2">
             <h2 className="text-base font-semibold text-content">
               {t('settings.ai.llmProviders')}
@@ -3174,7 +3174,7 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
               <SettingsStatusLine saving={false} error={error} savedNote={null} savingLabel="" />
             )}
 
-            <div className="flex flex-wrap gap-2">
+            <div className="flex flex-wrap gap-1.5">
               <ProviderToggleChip
                 key="openhuman"
                 slug="openhuman"
@@ -3372,7 +3372,7 @@ const AIPanel = ({ embedded = false }: AIPanelProps = {}) => {
             Own = one provider/model for everything. Custom = fine-grained
             per-workload routing.
             ═══════════════════════════════════════════════════════════════ */}
-        <div className="space-y-4">
+        <div className="space-y-5">
           <div className="border-b border-line pb-2">
             <h2 className="text-base font-semibold text-content">{t('settings.ai.routing')}</h2>
             <p className="text-xs text-content-muted mt-0.5">{t('settings.ai.routingDesc')}</p>
diff --git a/app/src/components/settings/panels/AboutPanel.tsx b/app/src/components/settings/panels/AboutPanel.tsx
index 556a7519c..4b57dbde1 100644
--- a/app/src/components/settings/panels/AboutPanel.tsx
+++ b/app/src/components/settings/panels/AboutPanel.tsx
@@ -69,7 +69,7 @@ const AboutPanel = () => {
     <SettingsPanel description={t('settings.aboutDesc')}>
       {/* Version */}
       <SettingsSection>
-        <div className="px-4 py-4">
+        <div className="px-4 py-3">
           <div className="text-xs text-content-muted">{t('settings.about.version')}</div>
           <div className="mt-1 text-lg font-semibold text-content">v{APP_VERSION}</div>
           {info?.available && info.available_version && (
@@ -97,7 +97,7 @@ const AboutPanel = () => {
           }
         />
         {lastCheckedAt && (
-          <div className="px-4 pb-3 text-[11px] text-content-faint">
+          <div className="px-4 py-3 text-[11px] text-content-faint">
             {t('settings.about.lastChecked')} {formatRelative(lastCheckedAt, t)}
           </div>
         )}
@@ -127,7 +127,7 @@ const AboutPanel = () => {
             </span>
           }
         />
-        <div className="px-4 pb-3">
+        <div className="px-4 py-3">
           <p className="text-[11px] text-content-muted leading-relaxed">
             {coreMode.kind === 'cloud'
               ? t('settings.about.connectionHelperCloud')
@@ -138,7 +138,7 @@ const AboutPanel = () => {
 
       {/* Releases */}
       <SettingsSection>
-        <div className="px-4 py-4 space-y-2">
+        <div className="px-4 py-3 space-y-2">
           <div className="text-sm font-medium text-content">{t('settings.about.releases')}</div>
           <p className="text-xs text-content-muted leading-relaxed">
             {t('settings.about.releasesDesc')}
diff --git a/app/src/components/settings/panels/AccountPanel.tsx b/app/src/components/settings/panels/AccountPanel.tsx
index 8949afccc..ecd747039 100644
--- a/app/src/components/settings/panels/AccountPanel.tsx
+++ b/app/src/components/settings/panels/AccountPanel.tsx
@@ -1,5 +1,6 @@
 import { useT } from '../../../lib/i18n/I18nContext';
 import { useCoreState } from '../../../providers/CoreStateProvider';
+import { SettingsSection } from '../controls';
 import SettingsPanel from '../layout/SettingsPanel';
 import LogoutAndClearActions from '../LogoutAndClearActions';
 
@@ -22,20 +23,22 @@ const AccountPanel = () => {
       testId="account-panel"
       description={t('pages.settings.accountSection.description')}>
       {(name || username) && (
-        <div className="flex items-center gap-3 rounded-2xl border border-line px-4 py-3">
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-500/15 text-sm font-semibold text-primary-700 dark:text-primary-300">
-            {(name ?? username ?? '?').replace('@', '').slice(0, 1).toUpperCase()}
+        <SettingsSection>
+          <div className="flex items-center gap-3 px-4 py-3">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-500/15 text-sm font-semibold text-primary-700 dark:text-primary-300">
+              {(name ?? username ?? '?').replace('@', '').slice(0, 1).toUpperCase()}
+            </div>
+            <div className="min-w-0">
+              {name && <div className="truncate text-sm font-medium text-content">{name}</div>}
+              {username && <div className="truncate text-xs text-content-muted">{username}</div>}
+            </div>
           </div>
-          <div className="min-w-0">
-            {name && <div className="truncate text-sm font-medium text-content">{name}</div>}
-            {username && <div className="truncate text-xs text-content-muted">{username}</div>}
-          </div>
-        </div>
+        </SettingsSection>
       )}
 
-      <div className="rounded-2xl overflow-hidden border border-line">
+      <SettingsSection>
         <LogoutAndClearActions />
-      </div>
+      </SettingsSection>
     </SettingsPanel>
   );
 };
diff --git a/app/src/components/settings/panels/AgentBoxPanel.tsx b/app/src/components/settings/panels/AgentBoxPanel.tsx
index ce52fa6bf..bdfe52dda 100644
--- a/app/src/components/settings/panels/AgentBoxPanel.tsx
+++ b/app/src/components/settings/panels/AgentBoxPanel.tsx
@@ -9,7 +9,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useT } from '../../../lib/i18n/I18nContext';
 import { callCoreRpc } from '../../../services/coreRpcClient';
-import { SettingsStatusLine } from '../controls';
+import Button from '../../ui/Button';
+import { SettingsRow, SettingsSection, SettingsStatusLine } from '../controls';
 import SettingsPanel from '../layout/SettingsPanel';
 
 interface AgentBoxProviderInfo {
@@ -29,9 +30,6 @@ type PanelState =
   | { kind: 'ready'; status: AgentBoxStatus }
   | { kind: 'error'; message: string };
 
-const ROW =
-  'px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20';
-
 const AgentBoxPanel = () => {
   const { t } = useT();
 
@@ -81,59 +79,57 @@ const AgentBoxPanel = () => {
     const modeLabel = s.mode_enabled ? t('common.enabled') : t('common.disabled');
 
     return (
-      <div className="px-4 pt-3 pb-6 flex flex-col gap-3">
+      <div className="px-4 pt-3 pb-6 space-y-3">
         <div className="text-xs text-sage-700 dark:text-sage-300">
           {t('settings.agentbox.intro')}
         </div>
 
-        <div className={ROW}>
-          <div className="flex items-center justify-between gap-3">
-            <span className="text-sm font-semibold text-sage-900 dark:text-sage-200">
-              {t('settings.agentbox.modeLabel')}
-            </span>
-            <span
-              className={`text-xs font-mono px-2 py-0.5 rounded-full ${
-                s.mode_enabled
-                  ? 'bg-sage-100 text-sage-800 dark:bg-sage-500/20 dark:text-sage-200'
-                  : 'bg-surface-subtle text-content-secondary dark:bg-neutral-700/40'
-              }`}>
-              {modeLabel}
-            </span>
-          </div>
-        </div>
+        <SettingsSection>
+          <SettingsRow
+            label={t('settings.agentbox.modeLabel')}
+            control={
+              <span
+                className={`text-xs font-mono px-2 py-0.5 rounded-full ${
+                  s.mode_enabled
+                    ? 'bg-sage-100 text-sage-800 dark:bg-sage-500/20 dark:text-sage-200'
+                    : 'bg-surface-subtle text-content-secondary dark:bg-neutral-700/40'
+                }`}>
+                {modeLabel}
+              </span>
+            }
+          />
+        </SettingsSection>
 
-        <div className={ROW}>
-          <div className="text-sm font-semibold text-sage-900 dark:text-sage-200 mb-2">
-            {t('settings.agentbox.providerHeading')}
+        <SettingsSection title={t('settings.agentbox.providerHeading')}>
+          <div className="px-4 py-3">
+            {s.provider_configured && s.provider ? (
+              <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
+                <dt className="text-sage-700 dark:text-sage-300">{t('settings.agentbox.slug')}</dt>
+                <dd className="font-mono text-sage-900 dark:text-sage-200 break-all">
+                  {s.provider.slug}
+                </dd>
+                <dt className="text-sage-700 dark:text-sage-300">
+                  {t('settings.agentbox.baseUrl')}
+                </dt>
+                <dd className="font-mono text-sage-900 dark:text-sage-200 break-all">
+                  {s.provider.base_url}
+                </dd>
+                <dt className="text-sage-700 dark:text-sage-300">{t('settings.agentbox.model')}</dt>
+                <dd className="font-mono text-sage-900 dark:text-sage-200 break-all">
+                  {s.provider.model}
+                </dd>
+              </dl>
+            ) : (
+              <div className="text-xs text-sage-700 dark:text-sage-300">
+                {t('settings.agentbox.notConfigured')}
+              </div>
+            )}
           </div>
-          {s.provider_configured && s.provider ? (
-            <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
-              <dt className="text-sage-700 dark:text-sage-300">{t('settings.agentbox.slug')}</dt>
-              <dd className="font-mono text-sage-900 dark:text-sage-200 break-all">
-                {s.provider.slug}
-              </dd>
-              <dt className="text-sage-700 dark:text-sage-300">{t('settings.agentbox.baseUrl')}</dt>
-              <dd className="font-mono text-sage-900 dark:text-sage-200 break-all">
-                {s.provider.base_url}
-              </dd>
-              <dt className="text-sage-700 dark:text-sage-300">{t('settings.agentbox.model')}</dt>
-              <dd className="font-mono text-sage-900 dark:text-sage-200 break-all">
-                {s.provider.model}
-              </dd>
-            </dl>
-          ) : (
-            <div className="text-xs text-sage-700 dark:text-sage-300">
-              {t('settings.agentbox.notConfigured')}
-            </div>
-          )}
-        </div>
+        </SettingsSection>
 
-        <button
-          type="button"
-          onClick={() => void load()}
-          className="self-start text-xs font-medium px-3 py-1.5 rounded-md border border-sage-300 dark:border-sage-500/40 text-sage-800 dark:text-sage-200 hover:bg-sage-50 dark:hover:bg-sage-500/10">
+        <Button type="button" variant="secondary" size="xs" onClick={() => void load()}>
           {t('common.refresh')}
-        </button>
+        </Button>
       </div>
     );
   }, [state, t, load]);
diff --git a/app/src/components/settings/panels/AgentChatPanel.tsx b/app/src/components/settings/panels/AgentChatPanel.tsx
index 8bf42a3a0..df18cd9cf 100644
--- a/app/src/components/settings/panels/AgentChatPanel.tsx
+++ b/app/src/components/settings/panels/AgentChatPanel.tsx
@@ -5,6 +5,7 @@ import { openhumanAgentChat } from '../../../utils/tauriCommands';
 import Button from '../../ui/Button';
 import {
   SettingsEmptyState,
+  SettingsRow,
   SettingsSection,
   SettingsStatusLine,
   SettingsTextArea,
@@ -82,31 +83,35 @@ const AgentChatPanel = () => {
   return (
     <SettingsPanel description={t('settings.developerMenu.agentChat.desc')}>
       <SettingsSection title={t('chat.overrides')} description={t('chat.agentChatDesc')}>
-        <div className="px-4 py-3 grid gap-3 md:grid-cols-2">
-          <div className="space-y-1">
-            <label htmlFor="agent-chat-model" className="text-xs text-content-muted">
-              {t('chat.model')}
-            </label>
-            <SettingsTextField
-              id="agent-chat-model"
-              placeholder={t('chat.modelPlaceholder')}
-              value={modelOverride}
-              onChange={event => setModelOverride(event.target.value)}
-              aria-label={t('chat.model')}
-            />
-          </div>
-          <div className="space-y-1">
-            <label htmlFor="agent-chat-temperature" className="text-xs text-content-muted">
-              {t('chat.temperature')}
-            </label>
-            <SettingsTextField
-              id="agent-chat-temperature"
-              placeholder="0.7"
-              value={temperature}
-              onChange={event => setTemperature(event.target.value)}
-              aria-label={t('chat.temperature')}
-            />
-          </div>
+        <div className="grid md:grid-cols-2">
+          <SettingsRow
+            stacked
+            htmlFor="agent-chat-model"
+            label={t('chat.model')}
+            control={
+              <SettingsTextField
+                id="agent-chat-model"
+                placeholder={t('chat.modelPlaceholder')}
+                value={modelOverride}
+                onChange={event => setModelOverride(event.target.value)}
+                aria-label={t('chat.model')}
+              />
+            }
+          />
+          <SettingsRow
+            stacked
+            htmlFor="agent-chat-temperature"
+            label={t('chat.temperature')}
+            control={
+              <SettingsTextField
+                id="agent-chat-temperature"
+                placeholder="0.7"
+                value={temperature}
+                onChange={event => setTemperature(event.target.value)}
+                aria-label={t('chat.temperature')}
+              />
+            }
+          />
         </div>
       </SettingsSection>
 
diff --git a/app/src/components/settings/panels/AnalysisViewsPanel.tsx b/app/src/components/settings/panels/AnalysisViewsPanel.tsx
index 7b3293812..929172456 100644
--- a/app/src/components/settings/panels/AnalysisViewsPanel.tsx
+++ b/app/src/components/settings/panels/AnalysisViewsPanel.tsx
@@ -54,12 +54,12 @@ const AnalysisViewsPanel = () => {
       contentClassName=""
       description={t('settings.analysisViews.menuDesc')}
       leading={<SettingsBackButton onBack={navigateBack} />}>
-      <div className="p-4 space-y-4">
+      <div className="p-4 space-y-5">
         <ChipTabs<AnalysisView>
           items={views.map(view => ({ id: view.id, label: view.label }))}
           value={activeView}
           onChange={setActiveView}
-          className="flex flex-wrap gap-2 pb-1"
+          className="flex flex-wrap gap-1.5 pb-1"
         />
 
         {activeView === 'diagram' && <DiagramViewerTab />}
diff --git a/app/src/components/settings/panels/EmbeddingsPanel.tsx b/app/src/components/settings/panels/EmbeddingsPanel.tsx
index 152bbcfd3..8485ffb5b 100644
--- a/app/src/components/settings/panels/EmbeddingsPanel.tsx
+++ b/app/src/components/settings/panels/EmbeddingsPanel.tsx
@@ -394,7 +394,7 @@ const EmbeddingsPanel = ({ embedded = false }: EmbeddingsPanelProps = {}) => {
       contentClassName=""
       description={embedded ? undefined : t('pages.settings.ai.embeddingsDesc')}
       leading={embedded ? undefined : <SettingsBackButton onBack={navigateBack} />}>
-      <div className={embedded ? 'space-y-4' : 'p-4 space-y-4'}>
+      <div className={embedded ? 'space-y-5' : 'p-4 space-y-5'}>
         <p className="text-xs text-content-muted leading-relaxed">
           {t('settings.embeddings.description')}
         </p>
diff --git a/app/src/components/settings/panels/MascotPanel.tsx b/app/src/components/settings/panels/MascotPanel.tsx
index dafa43d04..1d59b91b0 100644
--- a/app/src/components/settings/panels/MascotPanel.tsx
+++ b/app/src/components/settings/panels/MascotPanel.tsx
@@ -41,7 +41,7 @@ import {
   SUPPORTED_MASCOT_COLORS,
 } from '../../../store/mascotSlice';
 import Button from '../../ui/Button';
-import { SettingsTextField } from '../controls';
+import { SettingsSelect, SettingsTextField } from '../controls';
 import SettingsPanel from '../layout/SettingsPanel';
 import {
   defaultVoiceIdForLocale,
@@ -479,20 +479,20 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
             <span className="text-xs font-medium text-content-muted dark:text-content-secondary">
               {t('settings.mascot.voice.presetHeading')}
             </span>
-            <select
+            <SettingsSelect
               aria-label={t('settings.mascot.voice.presetHeading')}
               data-testid="mascot-voice-select"
               disabled={presetPickerDisabled}
               value={isCustomVoice ? '__custom__' : effectiveVoiceId}
               onChange={e => onPresetChange(e.target.value)}
-              className="w-full rounded-md border border-line bg-surface px-3 py-2 text-sm text-content focus:outline-none focus:ring-1 focus:ring-primary-400 disabled:cursor-not-allowed">
+              className="w-full">
               {visiblePresets.map(v => (
                 <option key={v.id} value={v.id}>
                   {v.label}
                 </option>
               ))}
               <option value="__custom__">{t('settings.mascot.voice.customOption')}</option>
-            </select>
+            </SettingsSelect>
           </label>
 
           {isCustomVoice && (
@@ -734,7 +734,7 @@ const MascotPanel = ({ embedded = false }: MascotPanelProps) => {
 
   // Embedded inside the tabbed Personality & Face page: the parent owns the
   // header, so render just the padded body.
-  if (embedded) return <div className="p-4 space-y-4">{body}</div>;
+  if (embedded) return <div className="p-4 space-y-5">{body}</div>;
 
   return <SettingsPanel>{body}</SettingsPanel>;
 };
diff --git a/app/src/components/settings/panels/McpServerPanel.tsx b/app/src/components/settings/panels/McpServerPanel.tsx
index da9b93adf..a8c4f5a12 100644
--- a/app/src/components/settings/panels/McpServerPanel.tsx
+++ b/app/src/components/settings/panels/McpServerPanel.tsx
@@ -177,7 +177,7 @@ const McpServerPanel = ({ embedded = false }: McpServerPanelProps = {}) => {
           title={t('settings.mcpServer.toolsSectionTitle')}
           description={t('settings.mcpServer.toolsSectionDesc')}>
           {MCP_TOOLS.map(tool => (
-            <div key={tool.name} className="flex items-start gap-3 px-4 py-2.5 bg-surface">
+            <div key={tool.name} className="flex items-start gap-3 px-4 py-3 bg-surface">
               <span className="font-mono text-xs text-primary-700 dark:text-primary-400 mt-0.5 shrink-0">
                 {tool.name}
               </span>
diff --git a/app/src/components/settings/panels/MemoryDataPanel.tsx b/app/src/components/settings/panels/MemoryDataPanel.tsx
index 90acee146..f506e1203 100644
--- a/app/src/components/settings/panels/MemoryDataPanel.tsx
+++ b/app/src/components/settings/panels/MemoryDataPanel.tsx
@@ -8,6 +8,7 @@ import { VaultHealthChecklist } from '../../intelligence/VaultHealthChecklist';
 import PanelPage from '../../layout/PanelPage';
 import MemoryWindowControl from '../components/MemoryWindowControl';
 import SettingsBackButton from '../components/SettingsBackButton';
+import { SettingsSection } from '../controls';
 import { useSettingsNavigation } from '../hooks/useSettingsNavigation';
 
 interface MemoryDataPanelProps {
@@ -54,10 +55,9 @@ const MemoryDataPanel = ({ embedded = false }: MemoryDataPanelProps = {}) => {
       contentClassName=""
       description={embedded ? undefined : t('devOptions.memoryInspectionDesc')}
       leading={embedded ? undefined : <SettingsBackButton onBack={navigateBack} />}>
-      <div className={embedded ? 'space-y-4' : 'p-4 space-y-4'}>
-        <section className="rounded-xl border border-line bg-surface p-4 space-y-3">
-          <h3 className="text-sm font-semibold text-content">{t('memoryData.howItWorks')}</h3>
-          <dl className="space-y-2.5">
+      <div className={embedded ? 'space-y-5' : 'p-4 space-y-5'}>
+        <SettingsSection title={t('memoryData.howItWorks')}>
+          <dl className="space-y-2.5 px-4 py-3">
             <div>
               <dt className="text-xs font-semibold text-content">
                 {t('memoryData.workspaceVault')}
@@ -83,7 +83,7 @@ const MemoryDataPanel = ({ embedded = false }: MemoryDataPanelProps = {}) => {
               </dd>
             </div>
           </dl>
-        </section>
+        </SettingsSection>
         <VaultHealthChecklist onToast={addToast} title={t('vaultHealth.setupTitle')} />
         <MemoryWindowControl onError={handleWindowError} onSaved={handleWindowSaved} />
         <MemoryWorkspace onToast={addToast} />
diff --git a/app/src/components/settings/panels/MemoryDebugPanel.tsx b/app/src/components/settings/panels/MemoryDebugPanel.tsx
index 1f7bc33e1..14f43f99a 100644
--- a/app/src/components/settings/panels/MemoryDebugPanel.tsx
+++ b/app/src/components/settings/panels/MemoryDebugPanel.tsx
@@ -203,7 +203,7 @@ const MemoryDebugPanel = () => {
       testId="memory-debug-panel"
       description={t('devOptions.debugPanelsDesc')}
       leading={<SettingsBackButton onBack={navigateBack} />}>
-      <div className="p-4 space-y-4">
+      <div className="p-4 space-y-5">
         {/* Documents */}
         <SettingsSection title={t('memory.documents')}>
           <div className="px-4 py-3 space-y-3">
diff --git a/app/src/components/settings/panels/MigrationPanel.tsx b/app/src/components/settings/panels/MigrationPanel.tsx
index 675e61634..eba9eb717 100644
--- a/app/src/components/settings/panels/MigrationPanel.tsx
+++ b/app/src/components/settings/panels/MigrationPanel.tsx
@@ -137,7 +137,7 @@ const MigrationPanel = ({ embedded = false }: MigrationPanelProps = {}) => {
       <p className="text-sm text-content-secondary">{t('migration.description')}</p>
 
       <SettingsSection>
-        <div className="p-4 space-y-4" data-testid="migration-form">
+        <div className="p-4 space-y-5" data-testid="migration-form">
           <div className="space-y-1">
             <label className="block text-xs font-medium text-content-secondary">
               {t('migration.vendorLabel')}
@@ -270,7 +270,7 @@ const MigrationPanel = ({ embedded = false }: MigrationPanelProps = {}) => {
   if (embedded) {
     return (
       <PanelPage className="z-10" contentClassName="">
-        <div className="space-y-6 p-6">{body}</div>
+        <div className="space-y-5 p-6">{body}</div>
       </PanelPage>
     );
   }
diff --git a/app/src/components/settings/panels/NotificationRoutingPanel.tsx b/app/src/components/settings/panels/NotificationRoutingPanel.tsx
index 0dc5342cd..f481e70e3 100644
--- a/app/src/components/settings/panels/NotificationRoutingPanel.tsx
+++ b/app/src/components/settings/panels/NotificationRoutingPanel.tsx
@@ -233,14 +233,16 @@ const NotificationRoutingPanel = ({ embedded = false }: NotificationRoutingPanel
                 />
                 <span>{s.importance_threshold.toFixed(2)}</span>
               </label>
-              <label className="text-xs text-content-secondary flex items-center gap-2">
+              <label
+                htmlFor={`notification-orchestrator-${provider}`}
+                className="text-xs text-content-secondary flex items-center gap-2">
                 {t('notifications.routing.routeToOrchestrator')}
-                <input
-                  type="checkbox"
+                <SettingsCheckbox
+                  id={`notification-orchestrator-${provider}`}
                   checked={s.route_to_orchestrator}
                   disabled={controlsDisabled}
-                  onChange={e => {
-                    void updateSetting(provider, { route_to_orchestrator: e.target.checked });
+                  onCheckedChange={next => {
+                    void updateSetting(provider, { route_to_orchestrator: next });
                   }}
                 />
               </label>
@@ -258,7 +260,7 @@ const NotificationRoutingPanel = ({ embedded = false }: NotificationRoutingPanel
 
   // Embedded inside the tabbed Notifications page: the parent owns the header,
   // so render just the padded body.
-  if (embedded) return <div className="p-4 space-y-4">{body}</div>;
+  if (embedded) return <div className="p-4 space-y-5">{body}</div>;
 
   return <SettingsPanel>{body}</SettingsPanel>;
 };
diff --git a/app/src/components/settings/panels/PermissionsPanel.tsx b/app/src/components/settings/panels/PermissionsPanel.tsx
index 04ff60fe8..691f8baec 100644
--- a/app/src/components/settings/panels/PermissionsPanel.tsx
+++ b/app/src/components/settings/panels/PermissionsPanel.tsx
@@ -188,7 +188,7 @@ const PermissionsPanel = () => {
 
   return (
     <SettingsPanel>
-      <div className="space-y-6">
+      <div className="space-y-5">
         {!isTauri() && (
           <p className="text-sm text-coral-600 dark:text-coral-300">
             {t('settings.agentAccess.desktopOnly')}
@@ -209,12 +209,13 @@ const PermissionsPanel = () => {
               </p>
               <div className="grid gap-2">
                 {presets.map(p => (
-                  <button
+                  <Button
                     key={p.id}
                     type="button"
+                    variant="tertiary"
                     onClick={() => selectTier(p.id)}
                     data-testid={`permissions-preset-${p.id}`}
-                    className={`text-left rounded-lg border p-3 transition ${
+                    className={`!inline-block h-auto w-full !justify-start text-left rounded-lg border p-3 transition ${
                       level === p.id
                         ? 'border-primary-500 bg-primary-50 dark:bg-primary-500/10'
                         : 'border-line hover:border-primary-300 dark:hover:border-primary-500'
@@ -235,7 +236,7 @@ const PermissionsPanel = () => {
                       )}
                     </div>
                     <p className="mt-1 text-xs text-content-muted">{p.description}</p>
-                  </button>
+                  </Button>
                 ))}
                 {level === 'full' && (
                   <p className="rounded border border-coral/40 bg-coral/5 dark:bg-coral/10 p-2 text-xs text-coral-600 dark:text-coral-300">
diff --git a/app/src/components/settings/panels/ProfileEditorPage.test.tsx b/app/src/components/settings/panels/ProfileEditorPage.test.tsx
index e43b897e7..c50b1ba20 100644
--- a/app/src/components/settings/panels/ProfileEditorPage.test.tsx
+++ b/app/src/components/settings/panels/ProfileEditorPage.test.tsx
@@ -125,6 +125,11 @@ describe('ProfileEditorPage', () => {
     fireEvent.change(chipInput, { target: { value: 'deep-research' } });
     fireEvent.keyDown(chipInput, { key: 'Enter' });
     expect(screen.getByText('deep-research')).toBeInTheDocument();
+
+    // Switching back to All clears the restriction (exercises the All button's
+    // onChange(null) handler).
+    fireEvent.click(screen.getAllByText('All')[0]);
+    expect(screen.queryByPlaceholderText('Type an id, press Enter')).not.toBeInTheDocument();
   });
 
   it('toggles the recall-agent-conversations switch into the saved payload', async () => {
diff --git a/app/src/components/settings/panels/ProfileEditorPage.tsx b/app/src/components/settings/panels/ProfileEditorPage.tsx
index 50a6e3761..200c85772 100644
--- a/app/src/components/settings/panels/ProfileEditorPage.tsx
+++ b/app/src/components/settings/panels/ProfileEditorPage.tsx
@@ -186,7 +186,7 @@ const ProfileEditorPage = () => {
           </div>
         </div>
       ) : (
-        <div className="space-y-4">
+        <div className="space-y-5">
           {/* Identity */}
           <SettingsSection>
             <SettingsRow
@@ -438,23 +438,21 @@ function AllowlistField({
       stacked
       control={
         <div className="space-y-2">
-          <div className="inline-flex overflow-hidden rounded-md border border-line text-xs dark:border-line-strong">
-            <button
+          <div className="inline-flex gap-1.5">
+            <Button
               type="button"
-              onClick={() => onChange(null)}
-              className={`px-3 py-1 font-medium transition-colors ${
-                !restricted ? 'bg-ocean-500 text-white' : 'bg-surface text-content-secondary'
-              }`}>
+              variant={!restricted ? 'primary' : 'secondary'}
+              size="xs"
+              onClick={() => onChange(null)}>
               {t('settings.profiles.editor.all')}
-            </button>
-            <button
+            </Button>
+            <Button
               type="button"
-              onClick={() => onChange(value ?? [])}
-              className={`px-3 py-1 font-medium transition-colors ${
-                restricted ? 'bg-ocean-500 text-white' : 'bg-surface text-content-secondary'
-              }`}>
+              variant={restricted ? 'primary' : 'secondary'}
+              size="xs"
+              onClick={() => onChange(value ?? [])}>
               {t('settings.profiles.editor.selected')}
-            </button>
+            </Button>
           </div>
 
           {restricted && (
diff --git a/app/src/components/settings/panels/ProfilesPanel.tsx b/app/src/components/settings/panels/ProfilesPanel.tsx
index 30de1b770..4c3e28156 100644
--- a/app/src/components/settings/panels/ProfilesPanel.tsx
+++ b/app/src/components/settings/panels/ProfilesPanel.tsx
@@ -103,7 +103,7 @@ const ProfilesPanel = () => {
                 return (
                   <li
                     key={profile.id}
-                    className="flex items-center justify-between gap-3 py-3 first:pt-1 last:pb-1">
+                    className="flex items-center justify-between gap-3 px-4 py-3">
                     <div className="min-w-0">
                       <div className="flex items-center gap-2">
                         <span className="truncate text-sm font-semibold text-content">
diff --git a/app/src/components/settings/panels/RecoveryPhrasePanel.tsx b/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
index c331d3775..4c9963c30 100644
--- a/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
+++ b/app/src/components/settings/panels/RecoveryPhrasePanel.tsx
@@ -374,7 +374,7 @@ const RecoveryPhrasePanel = () => {
   );
 
   const renderViewMode = () => (
-    <div className="space-y-4">
+    <div className="space-y-5">
       {statusError ? (
         <div
           role="alert"
@@ -645,7 +645,7 @@ const RecoveryPhrasePanel = () => {
   );
 
   const renderReplaceConfirm = () => (
-    <div className="space-y-4">
+    <div className="space-y-5">
       {/* Danger warning */}
       <div className="flex items-start gap-2.5 p-4 rounded-xl bg-coral-50 dark:bg-coral-500/10 border border-coral-200 dark:border-coral-500/30">
         <svg
diff --git a/app/src/components/settings/panels/ScreenAwarenessDebugPanel.tsx b/app/src/components/settings/panels/ScreenAwarenessDebugPanel.tsx
index 067cd9744..6ef89bf82 100644
--- a/app/src/components/settings/panels/ScreenAwarenessDebugPanel.tsx
+++ b/app/src/components/settings/panels/ScreenAwarenessDebugPanel.tsx
@@ -5,10 +5,10 @@ import { useScreenIntelligenceState } from '../../../features/screen-intelligenc
 import { useT } from '../../../lib/i18n/I18nContext';
 import { isTauri, openhumanUpdateScreenIntelligenceSettings } from '../../../utils/tauriCommands';
 import Button from '../../ui/Button';
-import Input from '../../ui/Input';
 import {
   SettingsCheckbox,
   SettingsEmptyState,
+  SettingsNumberField,
   SettingsRow,
   SettingsSection,
   SettingsStatusLine,
@@ -120,20 +120,22 @@ const ScreenAwarenessDebugPanel = () => {
         {/* Advanced policy settings */}
         <SettingsSection title={t('screenAwareness.debug.policyTitle')}>
           <div className="px-4 py-3 space-y-3">
-            <label className="flex items-center justify-between rounded-xl border border-line bg-surface-muted px-3 py-2">
-              <span className="text-sm text-content">{t('screenAwareness.debug.baselineFps')}</span>
-              <Input
-                type="number"
-                inputSize="sm"
-                min={0.2}
-                max={30}
-                step={0.1}
-                value={baselineFps}
-                onChange={event => setBaselineFps(event.target.value)}
-                className="w-24"
-                aria-label={t('screenAwareness.debug.baselineFps')}
-              />
-            </label>
+            <SettingsRow
+              htmlFor="screen-baseline-fps"
+              label={t('screenAwareness.debug.baselineFps')}
+              control={
+                <SettingsNumberField
+                  id="screen-baseline-fps"
+                  min={0.2}
+                  max={30}
+                  step={0.1}
+                  value={baselineFps}
+                  onChange={setBaselineFps}
+                  onCommit={() => {}}
+                  aria-label={t('screenAwareness.debug.baselineFps')}
+                />
+              }
+            />
 
             <SettingsRow
               htmlFor="screen-use-vision-model"
diff --git a/app/src/components/settings/panels/ScreenIntelligencePanel.tsx b/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
index 6de445eaf..558c05ffe 100644
--- a/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
+++ b/app/src/components/settings/panels/ScreenIntelligencePanel.tsx
@@ -4,7 +4,13 @@ import { useScreenIntelligenceState } from '../../../features/screen-intelligenc
 import { useT } from '../../../lib/i18n/I18nContext';
 import { isTauri, openhumanUpdateScreenIntelligenceSettings } from '../../../utils/tauriCommands';
 import Button from '../../ui/Button';
-import { SettingsRow, SettingsSection, SettingsSelect, SettingsStatusLine } from '../controls';
+import {
+  SettingsRow,
+  SettingsSection,
+  SettingsSelect,
+  SettingsStatusLine,
+  SettingsSwitch,
+} from '../controls';
 import SettingsPanel from '../layout/SettingsPanel';
 import PermissionsSection from './screen-intelligence/PermissionsSection';
 
@@ -131,14 +137,18 @@ const ScreenIntelligencePanel = () => {
         {/* Screen awareness config */}
         <SettingsSection title={t('settings.features.screenAwareness')}>
           {/* Enabled toggle */}
-          <label className="flex items-center justify-between px-4 py-3">
-            <span className="text-sm text-content-secondary">{t('common.enabled')}</span>
-            <input
-              type="checkbox"
-              checked={enabled}
-              onChange={event => setEnabled(event.target.checked)}
-            />
-          </label>
+          <SettingsRow
+            htmlFor="screen-intelligence-enabled"
+            label={t('common.enabled')}
+            control={
+              <SettingsSwitch
+                id="screen-intelligence-enabled"
+                checked={enabled}
+                onCheckedChange={setEnabled}
+                aria-label={t('common.enabled')}
+              />
+            }
+          />
 
           {/* Policy mode */}
           <SettingsRow
@@ -167,21 +177,20 @@ const ScreenIntelligencePanel = () => {
           />
 
           {/* Screen monitoring toggle */}
-          <label className="flex items-center justify-between px-4 py-3">
-            <span className="text-sm text-content-secondary">
-              {t('settings.screenAwareness.screenMonitoring')}
-            </span>
-            <input
-              type="checkbox"
-              checked={screenMonitoring}
-              onChange={event =>
-                setFeatureOverrides(current => ({
-                  ...current,
-                  screen_monitoring: event.target.checked,
-                }))
-              }
-            />
-          </label>
+          <SettingsRow
+            htmlFor="screen-intelligence-monitoring"
+            label={t('settings.screenAwareness.screenMonitoring')}
+            control={
+              <SettingsSwitch
+                id="screen-intelligence-monitoring"
+                checked={screenMonitoring}
+                onCheckedChange={next =>
+                  setFeatureOverrides(current => ({ ...current, screen_monitoring: next }))
+                }
+                aria-label={t('settings.screenAwareness.screenMonitoring')}
+              />
+            }
+          />
 
           {/* Save */}
           <div className="px-4 py-3 space-y-2">
diff --git a/app/src/components/settings/panels/SearchPanel.tsx b/app/src/components/settings/panels/SearchPanel.tsx
index 20701d744..0b3b7ddde 100644
--- a/app/src/components/settings/panels/SearchPanel.tsx
+++ b/app/src/components/settings/panels/SearchPanel.tsx
@@ -231,7 +231,7 @@ const SearchPanel = ({ embedded = false }: { embedded?: boolean }) => {
       contentClassName=""
       description={embedded ? undefined : t('settings.search.menuDesc')}
       leading={embedded ? undefined : <SettingsBackButton onBack={navigateBack} />}>
-      <div className={embedded ? 'space-y-4' : 'p-4 space-y-4'}>
+      <div className={embedded ? 'space-y-5' : 'p-4 space-y-5'}>
         <p className="text-xs text-content-muted leading-relaxed">
           {t('settings.search.description')}
         </p>
diff --git a/app/src/components/settings/panels/SystemDiagnostics.tsx b/app/src/components/settings/panels/SystemDiagnostics.tsx
index d66c20616..b3b5d6a2c 100644
--- a/app/src/components/settings/panels/SystemDiagnostics.tsx
+++ b/app/src/components/settings/panels/SystemDiagnostics.tsx
@@ -165,7 +165,7 @@ const SystemDiagnostics = () => {
       <h3 className="px-1 pb-2 text-sm font-medium text-content">
         {t('devOptions.titleDiagnostics')}
       </h3>
-      <div className="flex flex-col gap-3">
+      <div className="space-y-3">
         <LogsFolderRow />
         {showSentryTest && <SentryTestRow />}
         <RestartTourRow />
diff --git a/app/src/components/settings/panels/ToolPolicyDiagnosticsPanel.tsx b/app/src/components/settings/panels/ToolPolicyDiagnosticsPanel.tsx
index baa639299..bfcf1540a 100644
--- a/app/src/components/settings/panels/ToolPolicyDiagnosticsPanel.tsx
+++ b/app/src/components/settings/panels/ToolPolicyDiagnosticsPanel.tsx
@@ -96,8 +96,8 @@ const ToolPolicyDiagnosticsPanel = () => {
       d.mcp_write_audit.recent_rows === null ? '—' : String(d.mcp_write_audit.recent_rows);
 
     return (
-      <div className="px-4 pt-3 pb-6 flex flex-col gap-3">
-        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-sage-50 dark:bg-sage-500/10">
+      <div className="px-4 pt-3 pb-6 space-y-3">
+        <div className="px-4 py-3 rounded-xl border border-sage-300 dark:border-sage-500/40 bg-sage-50 dark:bg-sage-500/10">
           <div className="text-sm font-semibold text-sage-900 dark:text-sage-200">
             {t('devOptions.toolPolicyDiagnostics.posture.title')}
           </div>
@@ -133,7 +133,7 @@ const ToolPolicyDiagnosticsPanel = () => {
           </dl>
         </div>
 
-        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
+        <div className="px-4 py-3 rounded-xl border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
           <div className="text-sm font-semibold text-sage-900 dark:text-sage-200">
             {t('devOptions.toolPolicyDiagnostics.inventory.title')}
           </div>
@@ -165,7 +165,7 @@ const ToolPolicyDiagnosticsPanel = () => {
           </dl>
         </div>
 
-        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
+        <div className="px-4 py-3 rounded-xl border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
           <div className="text-sm font-semibold text-sage-900 dark:text-sage-200">
             {t('devOptions.toolPolicyDiagnostics.mcpAllowlists.title')}
           </div>
@@ -195,7 +195,7 @@ const ToolPolicyDiagnosticsPanel = () => {
           )}
         </div>
 
-        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
+        <div className="px-4 py-3 rounded-xl border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
           <div className="text-sm font-semibold text-sage-900 dark:text-sage-200">
             {t('devOptions.toolPolicyDiagnostics.mcpWriteAudit.title')}
           </div>
@@ -211,7 +211,7 @@ const ToolPolicyDiagnosticsPanel = () => {
           )}
         </div>
 
-        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
+        <div className="px-4 py-3 rounded-xl border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
           <div className="text-sm font-semibold text-sage-900 dark:text-sage-200">
             {t('devOptions.toolPolicyDiagnostics.recentBlocked.title')}
           </div>
@@ -242,7 +242,7 @@ const ToolPolicyDiagnosticsPanel = () => {
           )}
         </div>
 
-        <div className="px-4 py-3 rounded-lg border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
+        <div className="px-4 py-3 rounded-xl border border-sage-300 dark:border-sage-500/40 bg-surface dark:bg-sage-900/20">
           <div className="text-sm font-semibold text-sage-900 dark:text-sage-200">
             {t('devOptions.toolPolicyDiagnostics.redactedSurfaces.title')}
           </div>
diff --git a/app/src/components/settings/panels/UsagePanel.tsx b/app/src/components/settings/panels/UsagePanel.tsx
index 8ed1b4241..43254b0f1 100644
--- a/app/src/components/settings/panels/UsagePanel.tsx
+++ b/app/src/components/settings/panels/UsagePanel.tsx
@@ -81,7 +81,7 @@ const BackgroundActivityTab = () => {
   }, []);
 
   return (
-    <div className="p-4 space-y-3" data-testid="usage-background-tab">
+    <div className="p-4 space-y-5" data-testid="usage-background-tab">
       <SettingsStatusLine saving={false} error={loadError} savingLabel="" />
       {snapshot ? (
         <BackgroundLoopControls
diff --git a/app/src/components/settings/panels/VoicePanel.tsx b/app/src/components/settings/panels/VoicePanel.tsx
index 34c44160f..5c1510c80 100644
--- a/app/src/components/settings/panels/VoicePanel.tsx
+++ b/app/src/components/settings/panels/VoicePanel.tsx
@@ -559,7 +559,7 @@ const VoicePanel = ({ embedded = false }: VoicePanelProps = {}) => {
       contentClassName=""
       description={embedded ? undefined : t('pages.settings.ai.voiceDesc')}
       leading={embedded ? undefined : <SettingsBackButton onBack={navigateBack} />}>
-      <div className={embedded ? 'space-y-4' : 'p-4 space-y-4'}>
+      <div className={embedded ? 'space-y-5' : 'p-4 space-y-5'}>
         {/* Always-on listening moved to Settings → Features → Desktop Agent. */}
 
         {/* ─── Section 1: Voice Provider Chips ─────────────────────────── */}
diff --git a/app/src/components/settings/panels/__tests__/AccountPanel.test.tsx b/app/src/components/settings/panels/__tests__/AccountPanel.test.tsx
new file mode 100644
index 000000000..aecc9d122
--- /dev/null
+++ b/app/src/components/settings/panels/__tests__/AccountPanel.test.tsx
@@ -0,0 +1,61 @@
+/**
+ * Tests for the Settings → Account landing panel.
+ *
+ * Verifies that the signed-in summary header renders the user's display name,
+ * username and avatar initial when a current user is present, and that the
+ * summary block is omitted entirely when there is no name/username.
+ */
+import { screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { renderWithProviders } from '../../../../test/test-utils';
+import AccountPanel from '../AccountPanel';
+
+const mockUseCoreState = vi.fn();
+
+vi.mock('../../../../providers/CoreStateProvider', () => ({
+  useCoreState: () => mockUseCoreState(),
+}));
+
+// Isolate the panel from the destructive logout/clear actions (which pull in
+// session + clear-data plumbing we don't exercise here).
+vi.mock('../../LogoutAndClearActions', () => ({
+  default: () => <div data-testid="logout-and-clear-actions" />,
+}));
+
+describe('AccountPanel', () => {
+  it('renders the signed-in summary with name, username and avatar initial', () => {
+    mockUseCoreState.mockReturnValue({
+      snapshot: { currentUser: { firstName: 'Test', lastName: 'Human', username: 'testhuman' } },
+    });
+
+    renderWithProviders(<AccountPanel />);
+
+    expect(screen.getByText('Test Human')).toBeInTheDocument();
+    expect(screen.getByText('@testhuman')).toBeInTheDocument();
+    // Avatar initial derives from the display name (line ~29).
+    expect(screen.getByText('T')).toBeInTheDocument();
+    expect(screen.getByTestId('logout-and-clear-actions')).toBeInTheDocument();
+  });
+
+  it('falls back to the username initial when only a username is present', () => {
+    mockUseCoreState.mockReturnValue({ snapshot: { currentUser: { username: 'solohuman' } } });
+
+    renderWithProviders(<AccountPanel />);
+
+    expect(screen.getByText('@solohuman')).toBeInTheDocument();
+    // No display name, so the initial comes from the username (the leading '@'
+    // is stripped before slicing).
+    expect(screen.getByText('S')).toBeInTheDocument();
+  });
+
+  it('omits the summary block when there is no current user', () => {
+    mockUseCoreState.mockReturnValue({ snapshot: { currentUser: null } });
+
+    renderWithProviders(<AccountPanel />);
+
+    // The summary is gone but the logout/clear actions section still renders.
+    expect(screen.getByTestId('logout-and-clear-actions')).toBeInTheDocument();
+    expect(screen.queryByText('@solohuman')).not.toBeInTheDocument();
+  });
+});
diff --git a/app/src/components/settings/panels/__tests__/MemoryDataPanel.test.tsx b/app/src/components/settings/panels/__tests__/MemoryDataPanel.test.tsx
index cd801e5e0..650df5076 100644
--- a/app/src/components/settings/panels/__tests__/MemoryDataPanel.test.tsx
+++ b/app/src/components/settings/panels/__tests__/MemoryDataPanel.test.tsx
@@ -92,6 +92,17 @@ describe('MemoryDataPanel', () => {
     });
   });
 
+  it('renders in embedded mode (embedded padding branch)', async () => {
+    resolveConfigWith('balanced');
+    renderWithProviders(<MemoryDataPanel embedded />);
+
+    // Body sections still render when embedded (exercises the embedded layout
+    // branch of the root container).
+    await waitFor(() => {
+      expect(screen.getByTestId('memory-sources')).toBeInTheDocument();
+    });
+  });
+
   it.skip('keeps all preset buttons accessible when sync connections returns an error', async () => {
     resolveConfigWith('balanced');
 
diff --git a/app/src/components/settings/panels/__tests__/NotificationRoutingPanel.test.tsx b/app/src/components/settings/panels/__tests__/NotificationRoutingPanel.test.tsx
new file mode 100644
index 000000000..21c8a67d5
--- /dev/null
+++ b/app/src/components/settings/panels/__tests__/NotificationRoutingPanel.test.tsx
@@ -0,0 +1,57 @@
+/**
+ * Tests for the Settings → Notification routing panel.
+ *
+ * Verifies the per-provider controls become interactive once settings load,
+ * and that toggling the "route to orchestrator" checkbox persists the change
+ * via setNotificationSettings.
+ */
+import { fireEvent, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { renderWithProviders } from '../../../../test/test-utils';
+import NotificationRoutingPanel from '../NotificationRoutingPanel';
+
+const hoisted = vi.hoisted(() => ({
+  fetchNotificationStats: vi.fn(),
+  getNotificationSettings: vi.fn(),
+  setNotificationSettings: vi.fn(),
+}));
+
+vi.mock('../../../../services/notificationService', () => ({
+  fetchNotificationStats: hoisted.fetchNotificationStats,
+  getNotificationSettings: hoisted.getNotificationSettings,
+  setNotificationSettings: hoisted.setNotificationSettings,
+}));
+
+const providerSettings = { enabled: true, importance_threshold: 0.4, route_to_orchestrator: true };
+
+describe('NotificationRoutingPanel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    hoisted.fetchNotificationStats.mockResolvedValue(null);
+    hoisted.getNotificationSettings.mockResolvedValue(providerSettings);
+    hoisted.setNotificationSettings.mockResolvedValue(undefined);
+  });
+
+  it('persists a route-to-orchestrator toggle once provider settings load', async () => {
+    renderWithProviders(<NotificationRoutingPanel embedded />);
+
+    // The gmail orchestrator checkbox becomes enabled after settings load.
+    const orchestratorToggle = await waitFor(() => {
+      const el = document.getElementById('notification-orchestrator-gmail') as HTMLInputElement;
+      expect(el).not.toBeNull();
+      expect(el).not.toBeDisabled();
+      return el;
+    });
+
+    // It starts checked (route_to_orchestrator: true); toggle it off.
+    expect(orchestratorToggle.checked).toBe(true);
+    fireEvent.click(orchestratorToggle);
+
+    await waitFor(() =>
+      expect(hoisted.setNotificationSettings).toHaveBeenCalledWith(
+        expect.objectContaining({ provider: 'gmail', route_to_orchestrator: false })
+      )
+    );
+  });
+});
diff --git a/app/src/components/settings/panels/__tests__/ScreenIntelligencePanel.test.tsx b/app/src/components/settings/panels/__tests__/ScreenIntelligencePanel.test.tsx
index bf6903763..f74b3d70c 100644
--- a/app/src/components/settings/panels/__tests__/ScreenIntelligencePanel.test.tsx
+++ b/app/src/components/settings/panels/__tests__/ScreenIntelligencePanel.test.tsx
@@ -128,13 +128,10 @@ describe('ScreenIntelligencePanel', () => {
       expect(screen.getAllByText('Screen Awareness').length).toBeGreaterThan(0);
     });
 
-    const enabledLabel = screen.getByText('Enabled').closest('label');
-    const enabledCheckbox = enabledLabel?.querySelector(
-      'input[type="checkbox"]'
-    ) as HTMLInputElement;
-    expect(enabledCheckbox.checked).toBe(false);
+    const enabledSwitch = screen.getByRole('switch', { name: 'Enabled' });
+    expect(enabledSwitch).toHaveAttribute('aria-checked', 'false');
 
-    fireEvent.click(enabledCheckbox);
+    fireEvent.click(enabledSwitch);
     fireEvent.click(screen.getByRole('button', { name: 'Save Settings' }));
 
     expect(await screen.findByRole('button', { name: 'Saving…' })).toBeInTheDocument();
@@ -311,14 +308,13 @@ describe('ScreenIntelligencePanel', () => {
 
     await waitFor(() => expect(screen.getAllByText(/screen awareness/i).length).toBeGreaterThan(0));
 
-    const monitoringLabel = screen.getByText('Screen Monitoring').closest('label');
-    const checkbox = monitoringLabel?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    const monitoringSwitch = screen.getByRole('switch', { name: 'Screen Monitoring' });
 
     // Initially reflects status value (true in baseState.features)
-    expect(checkbox.checked).toBe(true);
+    expect(monitoringSwitch).toHaveAttribute('aria-checked', 'true');
 
-    fireEvent.click(checkbox);
-    expect(checkbox.checked).toBe(false);
+    fireEvent.click(monitoringSwitch);
+    expect(monitoringSwitch).toHaveAttribute('aria-checked', 'false');
   });
 
   // ─── Session status display ───────────────────────────────────────────────
diff --git a/app/src/components/settings/panels/screen-intelligence/PermissionsSection.tsx b/app/src/components/settings/panels/screen-intelligence/PermissionsSection.tsx
index aa88ba773..fad4f6e38 100644
--- a/app/src/components/settings/panels/screen-intelligence/PermissionsSection.tsx
+++ b/app/src/components/settings/panels/screen-intelligence/PermissionsSection.tsx
@@ -1,28 +1,15 @@
 import { useT } from '../../../../lib/i18n/I18nContext';
 import type { AccessibilityPermissionKind } from '../../../../utils/tauriCommands';
+import Button from '../../../ui/Button';
+import {
+  SettingsBadge,
+  type SettingsBadgeVariant,
+  SettingsRow,
+  SettingsSection,
+} from '../../controls';
 
-interface PermissionsBadgeProps {
-  label: string;
-  value: string;
-}
-
-const PermissionBadge = ({ label, value }: PermissionsBadgeProps) => {
-  const colorClass =
-    value === 'granted'
-      ? 'bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-300 border-green-200 dark:border-green-500/30'
-      : value === 'denied'
-        ? 'bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-300 border-red-200 dark:border-red-500/30'
-        : 'bg-surface-subtle text-content-secondary border-line';
-
-  return (
-    <div className="flex items-center justify-between rounded-xl border border-line bg-surface p-3">
-      <span className="text-sm text-content-secondary">{label}</span>
-      <span className={`rounded-md border px-2 py-1 text-xs uppercase tracking-wide ${colorClass}`}>
-        {value}
-      </span>
-    </div>
-  );
-};
+const badgeVariant = (value: string): SettingsBadgeVariant =>
+  value === 'granted' ? 'success' : value === 'denied' ? 'danger' : 'neutral';
 
 interface PermissionsSectionProps {
   screenRecording: string;
@@ -55,92 +42,102 @@ const PermissionsSection = ({
 }: PermissionsSectionProps) => {
   const { t } = useT();
   return (
-    <section className="space-y-3">
-      <h3 className="text-sm font-semibold text-content">
-        {t('settings.screenIntel.permissions.title')}
-      </h3>
-      <PermissionBadge
+    <SettingsSection title={t('settings.screenIntel.permissions.title')}>
+      <SettingsRow
         label={t('settings.screenIntel.permissions.screenRecording')}
-        value={screenRecording}
+        control={
+          <SettingsBadge variant={badgeVariant(screenRecording)}>{screenRecording}</SettingsBadge>
+        }
       />
-      <PermissionBadge
+      <SettingsRow
         label={t('settings.screenIntel.permissions.accessibility')}
-        value={accessibility}
+        control={
+          <SettingsBadge variant={badgeVariant(accessibility)}>{accessibility}</SettingsBadge>
+        }
       />
-      <PermissionBadge
+      <SettingsRow
         label={t('settings.screenIntel.permissions.inputMonitoring')}
-        value={inputMonitoring}
+        control={
+          <SettingsBadge variant={badgeVariant(inputMonitoring)}>{inputMonitoring}</SettingsBadge>
+        }
       />
 
       {anyPermissionDenied && (
-        <div className="rounded-xl border border-amber-300 dark:border-amber-500/40 bg-amber-50 dark:bg-amber-500/10 p-3 text-sm text-amber-700 dark:text-amber-300 space-y-1">
-          <p>{t('settings.screenIntel.permissions.grantHint')}</p>
-          {permissionCheckProcessPath ? (
-            <p className="opacity-75 text-xs">
-              {t('settings.screenIntel.permissions.macosAppliesPrivacy')}{' '}
-              <span className="font-mono break-all text-content-secondary">
-                {permissionCheckProcessPath}
-              </span>
-            </p>
-          ) : null}
+        <div className="px-4 py-3">
+          <div className="space-y-1 rounded-xl border border-amber-300 dark:border-amber-500/40 bg-amber-50 dark:bg-amber-500/10 p-3 text-sm text-amber-700 dark:text-amber-300">
+            <p>{t('settings.screenIntel.permissions.grantHint')}</p>
+            {permissionCheckProcessPath ? (
+              <p className="text-xs opacity-75">
+                {t('settings.screenIntel.permissions.macosAppliesPrivacy')}{' '}
+                <span className="break-all font-mono text-content-secondary">
+                  {permissionCheckProcessPath}
+                </span>
+              </p>
+            ) : null}
+          </div>
         </div>
       )}
 
       {lastRestartSummary ? (
-        <div className="rounded-xl border border-green-300 dark:border-green-500/40 bg-green-50 dark:bg-green-500/10 p-3 text-sm text-green-700 dark:text-green-300">
-          {lastRestartSummary}
+        <div className="px-4 py-3">
+          <div className="rounded-xl border border-green-300 dark:border-green-500/40 bg-green-50 dark:bg-green-500/10 p-3 text-sm text-green-700 dark:text-green-300">
+            {lastRestartSummary}
+          </div>
         </div>
       ) : null}
 
-      <button
-        type="button"
-        onClick={() => void requestPermission('screen_recording')}
-        disabled={isRequestingPermissions || isRestartingCore}
-        className="mt-1 rounded-lg border border-primary-400 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-700 dark:text-primary-300 disabled:opacity-50">
-        {isRequestingPermissions
-          ? t('settings.screenIntel.permissions.requesting')
-          : t('settings.screenIntel.permissions.requestScreenRecording')}
-      </button>
-      <button
-        type="button"
-        onClick={() => void requestPermission('accessibility')}
-        disabled={isRequestingPermissions || isRestartingCore}
-        className="rounded-lg border border-primary-400 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-700 dark:text-primary-300 disabled:opacity-50">
-        {isRequestingPermissions
-          ? t('settings.screenIntel.permissions.requesting')
-          : t('settings.screenIntel.permissions.requestAccessibility')}
-      </button>
-      <button
-        type="button"
-        onClick={() => void requestPermission('input_monitoring')}
-        disabled={isRequestingPermissions || isRestartingCore}
-        className="rounded-lg border border-primary-400 bg-primary-50 dark:bg-primary-500/10 px-3 py-2 text-sm text-primary-700 dark:text-primary-300 disabled:opacity-50">
-        {isRequestingPermissions
-          ? t('settings.screenIntel.permissions.requesting')
-          : t('settings.screenIntel.permissions.openInputMonitoring')}
-      </button>
-      {anyPermissionDenied ? (
-        <button
-          type="button"
-          onClick={() => void refreshPermissionsWithRestart()}
-          disabled={isRestartingCore || isLoading}
-          className="rounded-lg border border-amber-400 bg-amber-50 dark:bg-amber-500/10 px-3 py-2 text-sm text-amber-700 dark:text-amber-300 disabled:opacity-50">
-          {isRestartingCore
-            ? t('settings.screenIntel.permissions.restartingCore')
-            : t('settings.screenIntel.permissions.restartRefresh')}
-        </button>
-      ) : (
-        <button
-          type="button"
-          onClick={() => void refreshStatus()}
-          disabled={isLoading || isRestartingCore}
-          className="rounded-lg border border-line bg-surface-muted px-3 py-2 text-sm text-content-secondary disabled:opacity-50">
-          {isLoading
-            ? t('settings.screenIntel.permissions.refreshing')
-            : t('settings.screenIntel.permissions.refreshStatus')}
-        </button>
-      )}
-    </section>
+      <div className="flex flex-wrap gap-2 px-4 py-3">
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => void requestPermission('screen_recording')}
+          disabled={isRequestingPermissions || isRestartingCore}>
+          {isRequestingPermissions
+            ? t('settings.screenIntel.permissions.requesting')
+            : t('settings.screenIntel.permissions.requestScreenRecording')}
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => void requestPermission('accessibility')}
+          disabled={isRequestingPermissions || isRestartingCore}>
+          {isRequestingPermissions
+            ? t('settings.screenIntel.permissions.requesting')
+            : t('settings.screenIntel.permissions.requestAccessibility')}
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={() => void requestPermission('input_monitoring')}
+          disabled={isRequestingPermissions || isRestartingCore}>
+          {isRequestingPermissions
+            ? t('settings.screenIntel.permissions.requesting')
+            : t('settings.screenIntel.permissions.openInputMonitoring')}
+        </Button>
+        {anyPermissionDenied ? (
+          <Button
+            variant="secondary"
+            tone="danger"
+            size="sm"
+            onClick={() => void refreshPermissionsWithRestart()}
+            disabled={isRestartingCore || isLoading}>
+            {isRestartingCore
+              ? t('settings.screenIntel.permissions.restartingCore')
+              : t('settings.screenIntel.permissions.restartRefresh')}
+          </Button>
+        ) : (
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => void refreshStatus()}
+            disabled={isLoading || isRestartingCore}>
+            {isLoading
+              ? t('settings.screenIntel.permissions.refreshing')
+              : t('settings.screenIntel.permissions.refreshStatus')}
+          </Button>
+        )}
+      </div>
+    </SettingsSection>
   );
 };
 
diff --git a/app/src/components/settings/panels/screen-intelligence/__tests__/PermissionsSection.test.tsx b/app/src/components/settings/panels/screen-intelligence/__tests__/PermissionsSection.test.tsx
new file mode 100644
index 000000000..6906e2c39
--- /dev/null
+++ b/app/src/components/settings/panels/screen-intelligence/__tests__/PermissionsSection.test.tsx
@@ -0,0 +1,130 @@
+/**
+ * Tests for the Screen Awareness → Permissions section.
+ *
+ * PermissionsSection is a pure, props-driven presentational component (no
+ * hooks/RPC of its own beyond i18n). These tests exercise both the
+ * "permission denied" branch (denied alert + macOS process-path hint +
+ * Restart & Refresh button) and the "all granted" branch (plain Refresh
+ * Status button), plus the per-permission request buttons and the
+ * granted/denied/unknown badge variants.
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import PermissionsSection from '../PermissionsSection';
+
+type Props = React.ComponentProps<typeof PermissionsSection>;
+
+const baseProps = (): Props => ({
+  screenRecording: 'granted',
+  accessibility: 'denied',
+  inputMonitoring: 'unknown',
+  anyPermissionDenied: true,
+  lastRestartSummary: null,
+  permissionCheckProcessPath: null,
+  isRequestingPermissions: false,
+  isRestartingCore: false,
+  isLoading: false,
+  requestPermission: vi.fn().mockResolvedValue(null),
+  refreshPermissionsWithRestart: vi.fn().mockResolvedValue(null),
+  refreshStatus: vi.fn().mockResolvedValue(null),
+});
+
+describe('PermissionsSection', () => {
+  it('renders denied alert with process path, restart summary, and request buttons', () => {
+    const props = {
+      ...baseProps(),
+      anyPermissionDenied: true,
+      permissionCheckProcessPath: '/tmp/openhuman-core',
+      lastRestartSummary: 'Core restarted: PID 4000 -> PID 4242.',
+    };
+    render(<PermissionsSection {...props} />);
+
+    // Mixed badge variants render (granted/denied/unknown).
+    expect(screen.getByText('granted')).toBeInTheDocument();
+    expect(screen.getByText('denied')).toBeInTheDocument();
+    expect(screen.getByText('unknown')).toBeInTheDocument();
+
+    // Denied-alert block surfaces the macOS process path (line ~69).
+    expect(screen.getByText('/tmp/openhuman-core')).toBeInTheDocument();
+
+    // Last restart summary is shown.
+    expect(screen.getByText('Core restarted: PID 4000 -> PID 4242.')).toBeInTheDocument();
+
+    // The three per-permission request buttons render.
+    expect(screen.getByRole('button', { name: 'Request Screen Recording' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Request Accessibility' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Open Input Monitoring' })).toBeInTheDocument();
+  });
+
+  it('invokes the request handlers and the restart-with-refresh handler when denied', () => {
+    const props = { ...baseProps(), anyPermissionDenied: true };
+    render(<PermissionsSection {...props} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Request Screen Recording' }));
+    expect(props.requestPermission).toHaveBeenCalledWith('screen_recording');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Request Accessibility' }));
+    expect(props.requestPermission).toHaveBeenCalledWith('accessibility');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open Input Monitoring' }));
+    expect(props.requestPermission).toHaveBeenCalledWith('input_monitoring');
+
+    // When permissions are denied, the danger Restart & Refresh button shows.
+    const restartBtn = screen.getByRole('button', { name: 'Restarting core…' });
+    fireEvent.click(restartBtn);
+    expect(props.refreshPermissionsWithRestart).toHaveBeenCalledTimes(1);
+    expect(props.refreshStatus).not.toHaveBeenCalled();
+  });
+
+  it('shows the plain Refresh Status button when nothing is denied', () => {
+    const props = {
+      ...baseProps(),
+      screenRecording: 'granted',
+      accessibility: 'granted',
+      inputMonitoring: 'granted',
+      anyPermissionDenied: false,
+      permissionCheckProcessPath: null,
+    };
+    render(<PermissionsSection {...props} />);
+
+    // The denied-alert process path is absent when nothing is denied.
+    expect(screen.queryByText('/tmp/openhuman-core')).not.toBeInTheDocument();
+
+    // The restart-with-refresh button is replaced by the plain refresh button.
+    expect(screen.queryByRole('button', { name: 'Restarting core…' })).not.toBeInTheDocument();
+
+    const refreshBtn = screen.getByRole('button', { name: 'Refreshing…' });
+    fireEvent.click(refreshBtn);
+    expect(props.refreshStatus).toHaveBeenCalledTimes(1);
+    expect(props.refreshPermissionsWithRestart).not.toHaveBeenCalled();
+  });
+
+  it('reflects in-flight labels while requesting permissions', () => {
+    const props = { ...baseProps(), isRequestingPermissions: true };
+    render(<PermissionsSection {...props} />);
+
+    // All three request buttons collapse to the "Requesting…" label.
+    expect(screen.getAllByRole('button', { name: 'Requesting…' })).toHaveLength(3);
+  });
+
+  it('shows the restarting-core label and disables the restart button while restarting', () => {
+    // Exercises the `isRestartingCore ? …` branch of the denied restart button.
+    const props = { ...baseProps(), anyPermissionDenied: true, isRestartingCore: true };
+    render(<PermissionsSection {...props} />);
+
+    const restartBtn = screen.getByRole('button', { name: 'Restarting core…' });
+    expect(restartBtn).toBeDisabled();
+    // While restarting, the request buttons are also disabled.
+    expect(screen.getByRole('button', { name: 'Request Screen Recording' })).toBeDisabled();
+  });
+
+  it('shows the refreshing label and disables the refresh button while loading', () => {
+    // Exercises the `isLoading ? …` branch of the not-denied refresh button.
+    const props = { ...baseProps(), anyPermissionDenied: false, isLoading: true };
+    render(<PermissionsSection {...props} />);
+
+    const refreshBtn = screen.getByRole('button', { name: 'Refreshing…' });
+    expect(refreshBtn).toBeDisabled();
+  });
+});