diff --git a/app/desktop/src/components/SettingsPage.tsx b/app/desktop/src/components/SettingsPage.tsx
index f74302170..8e6e66ee3 100644
--- a/app/desktop/src/components/SettingsPage.tsx
+++ b/app/desktop/src/components/SettingsPage.tsx
@@ -1,338 +1,120 @@
-import { type ReactNode, useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import {
-  Archive,
-  ArrowLeft,
-  Bot,
-  Check,
-  ChevronRight,
-  ClipboardList,
-  Code2,
-  Computer,
-  Cpu,
-  Eye,
-  FolderGit2,
-  GitBranch,
-  Globe2,
-  HardDrive,
-  Keyboard,
-  Link2,
-  LockKeyhole,
-  LogIn,
-  LogOut,
-  MessageSquareText,
-  Monitor,
-  Palette,
-  Plug,
-  RefreshCw,
-  Route,
-  Search,
-  Server,
-  ShieldCheck,
-  SlidersHorizontal,
-  TerminalSquare,
-  UserCircle,
-  Wrench,
-  XCircle,
+  Archive, ArrowLeft, Bot, ClipboardList, Code2, Computer, Cpu, Eye,
+  FolderGit2, GitBranch, Globe2, HardDrive, Keyboard, Link2, LockKeyhole, LogIn,
+  LogOut, MessageSquareText, Monitor, Palette, Plug, Route, Server,
+  ShieldCheck, SlidersHorizontal, TerminalSquare, UserCircle, Wrench,
 } from 'lucide-react';
 import { useTheme } from '@/contexts/ThemeContext';
 import { useHubStore } from '@/stores/hubStore';
-import { APP_VERSION, HUB_URL } from '@/config';
+import { createHubClient } from '@/api/hubClient';
 import { useAgentList } from '@/api/agentQueries';
-import { useHubExecutionTargets, usePingHubExecutionTarget } from '@/api/executionTargetQueries';
 import { useCancelRun, useRuns } from '@/api/runQueries';
 import { useHealth } from '@/hooks/useHealth';
 import { useAuth } from '@/hooks/useAuth';
-import { useTaskBridgeStore, type AgentTask } from '@/stores/taskBridgeStore';
+import { useDeviceRegistration } from '@/hooks/useDeviceRegistration';
+import { useTaskBridgeStore } from '@/stores/taskBridgeStore';
 import { preferredProfileAlias } from '@/utils/agentProfile';
+import { useModelSettingsStore } from '@/stores/modelSettingsStore';
+import type { ContactInfo, FriendRequestInfo, HubNotification, Session } from '@/api/hubClient';
+
+import GeneralSection from './settings/sections/GeneralSection';
+import AppearanceSection from './settings/sections/AppearanceSection';
+import ConfigurationSection from './settings/sections/ConfigurationSection';
+import PersonalizationSection from './settings/sections/PersonalizationSection';
+import PermissionsSection from './settings/sections/PermissionsSection';
+import AgentProfilesSection from './settings/sections/AgentProfilesSection';
+import ExecutionTargetsSection from './settings/sections/ExecutionTargetsSection';
+import TasksSection from './settings/sections/TasksSection';
+import OnlineImSection from './settings/sections/OnlineImSection';
+import GroupChatSection from './settings/sections/GroupChatSection';
+import AgentSchedulingSection from './settings/sections/AgentSchedulingSection';
+import AgentMarketSection from './settings/sections/AgentMarketSection';
+import KeyboardSection from './settings/sections/KeyboardSection';
+import McpSection from './settings/sections/McpSection';
+import SkillsSection from './settings/sections/SkillsSection';
+import HooksSection from './settings/sections/HooksSection';
+import ModelsSection from './settings/sections/ModelsSection';
+import ModelMappingSection from './settings/sections/ModelMappingSection';
+import CcSwitchSection from './settings/sections/CcSwitchSection';
+import ConnectionsSection from './settings/sections/ConnectionsSection';
+import RemoteControlSection from './settings/sections/RemoteControlSection';
+import GitSection from './settings/sections/GitSection';
+import EnvironmentSection from './settings/sections/EnvironmentSection';
+import WorktreeSection from './settings/sections/WorktreeSection';
+import BrowserSection from './settings/sections/BrowserSection';
+import ComputerUseSection from './settings/sections/ComputerUseSection';
+import PlatformsSection from './settings/sections/PlatformsSection';
+import AccountSection from './settings/sections/AccountSection';
+import SecurityAuditSection from './settings/sections/SecurityAuditSection';
+import ArchivedSection from './settings/sections/ArchivedSection';
 import {
-  useModelSettingsStore,
-  type ProviderHealth,
-  type ReasoningEffortPreference,
-  type ResolvedRunModelSettings,
-} from '@/stores/modelSettingsStore';
-import type { AgentInfo, RunInfo, RunnerHealthItem } from '@shared/types';
-import type { ExecutionTarget, ExecutionTargetHealthState, ExecutionTargetType } from '@/api/hubClient';
+  useStoredBooleanState, useStoredValueState,
+  readBrowserStorage, isActiveRun, getRecentRuns, statusLabelFromQuery,
+  statusLabelFromDevice, shortId, formatTimestamp,
+} from './settings/utils';
 import styles from './SettingsPage.module.css';
 
 export type SectionId =
-  | 'general'
-  | 'appearance'
-  | 'configuration'
-  | 'personalization'
-  | 'permissions'
-  | 'agentProfiles'
-  | 'executionTargets'
-  | 'tasks'
-  | 'onlineIm'
-  | 'groupChat'
-  | 'agentScheduling'
-  | 'agentMarket'
-  | 'keyboard'
-  | 'mcp'
-  | 'skills'
-  | 'hooks'
-  | 'models'
-  | 'modelMapping'
-  | 'ccSwitch'
-  | 'connections'
-  | 'remoteControl'
-  | 'git'
-  | 'environment'
-  | 'worktree'
-  | 'browser'
-  | 'computerUse'
-  | 'platforms'
-  | 'account'
-  | 'securityAudit'
-  | 'archived';
+  | 'general' | 'appearance' | 'configuration' | 'personalization' | 'permissions'
+  | 'agentProfiles' | 'executionTargets' | 'tasks' | 'onlineIm' | 'groupChat'
+  | 'agentScheduling' | 'agentMarket' | 'keyboard' | 'mcp' | 'skills' | 'hooks'
+  | 'models' | 'modelMapping' | 'ccSwitch' | 'connections' | 'remoteControl'
+  | 'git' | 'environment' | 'worktree' | 'browser' | 'computerUse' | 'platforms'
+  | 'account' | 'securityAudit' | 'archived';
 
 type SelectValue = 'balanced' | 'detailed' | 'manual' | 'auto' | 'ask' | 'never';
-type SettingsSelectValue = SelectValue | ReasoningEffortPreference | ProviderHealth | string;
 
-interface Props {
-  onBack: () => void;
-  onOpenAuth: () => void;
-  initialSection?: SectionId;
+interface HubIMSnapshot {
+  contacts: ContactInfo[];
+  sessions: Session[];
+  friendRequests: FriendRequestInfo[];
+  notifications: HubNotification[];
 }
 
 interface NavItem {
   id: SectionId;
   label: string;
-  icon: ReactNode;
+  icon: React.ReactNode;
   group: 'workspace' | 'automation' | 'system';
 }
 
-interface ShortcutRow {
-  keys: string[];
-  action: string;
-}
-
-interface ProjectSkill {
-  id: string;
-  title: string;
-  descriptionKey: string;
-  status: 'ready' | 'review';
-  hasScripts: boolean;
-  hasReferences: boolean;
-}
-
-const STORAGE_PREFIX = 'agenthub-settings.';
 const DEVICE_ID_KEY = 'agenthub_device_id';
 
-const MODEL_OPTIONS = [
-  ['auto', 'Auto'],
-  ['claude-opus-4-7', 'claude-opus-4-7'],
-  ['claude-sonnet-4-6', 'claude-sonnet-4-6'],
-  ['claude-haiku-4-5', 'claude-haiku-4-5'],
-  ['gpt-5.5', 'gpt-5.5'],
-  ['glm-5.1', 'glm-5.1'],
-] as const;
-
-const PROVIDER_OPTIONS = [
-  ['tokendance-gateway', 'TokenDance Gateway'],
-  ['anthropic', 'Anthropic'],
-  ['openai', 'OpenAI'],
-  ['cc-switch-local', 'cc-switch local'],
-] as const;
-
-const REASONING_OPTIONS = [
-  ['low', 'Low'],
-  ['medium', 'Medium'],
-  ['high', 'High'],
-  ['max', 'Max'],
-] as const;
-
-const PROVIDER_HEALTH_OPTIONS = [
-  ['ready', 'Ready'],
-  ['degraded', 'Degraded'],
-  ['disabled', 'Disabled'],
-] as const;
-
-const PROJECT_SKILLS: ProjectSkill[] = [
-  {
-    id: 'adapter-dev',
-    title: 'adapter-dev',
-    descriptionKey: 'settings.skill.adapterDevDesc',
-    status: 'ready',
-    hasScripts: false,
-    hasReferences: false,
-  },
-  {
-    id: 'dev-loop',
-    title: 'dev-loop',
-    descriptionKey: 'settings.skill.devLoopDesc',
-    status: 'ready',
-    hasScripts: false,
-    hasReferences: true,
-  },
-  {
-    id: 'env-sandbox',
-    title: 'env-sandbox',
-    descriptionKey: 'settings.skill.envSandboxDesc',
-    status: 'ready',
-    hasScripts: false,
-    hasReferences: false,
-  },
-  {
-    id: 'integration-test',
-    title: 'integration-test',
-    descriptionKey: 'settings.skill.integrationTestDesc',
-    status: 'ready',
-    hasScripts: false,
-    hasReferences: false,
-  },
-  {
-    id: 'pre-push',
-    title: 'pre-push',
-    descriptionKey: 'settings.skill.prePushDesc',
-    status: 'review',
-    hasScripts: false,
-    hasReferences: false,
-  },
-  {
-    id: 'test-coverage',
-    title: 'test-coverage',
-    descriptionKey: 'settings.skill.testCoverageDesc',
-    status: 'ready',
-    hasScripts: false,
-    hasReferences: false,
-  },
-  {
-    id: 'ui-screenshot',
-    title: 'ui-screenshot',
-    descriptionKey: 'settings.skill.uiScreenshotDesc',
-    status: 'ready',
-    hasScripts: true,
-    hasReferences: false,
-  },
-];
-
-function readStoredBoolean(key: string, fallback: boolean) {
-  try {
-    const stored = localStorage.getItem(`${STORAGE_PREFIX}${key}`);
-    if (stored === 'true') return true;
-    if (stored === 'false') return false;
-  } catch {
-    /* localStorage unavailable */
-  }
-  return fallback;
-}
-
-function readStoredValue<T extends string>(key: string, fallback: T) {
-  try {
-    const stored = localStorage.getItem(`${STORAGE_PREFIX}${key}`);
-    if (stored) return stored as T;
-  } catch {
-    /* localStorage unavailable */
-  }
-  return fallback;
-}
-
-function writeStoredValue(key: string, value: string | boolean) {
-  try {
-    localStorage.setItem(`${STORAGE_PREFIX}${key}`, String(value));
-  } catch {
-    /* localStorage unavailable */
-  }
-}
-
-function readBrowserStorage(storage: 'local' | 'session', key: string) {
-  try {
-    const target = storage === 'local' ? localStorage : sessionStorage;
-    return target.getItem(key);
-  } catch {
-    return null;
-  }
-}
-
-function isHubTargetConnected(target: ExecutionTarget) {
-  return target.is_online || target.health_state === 'healthy';
-}
-
-function filterTargetsByType(targets: ExecutionTarget[], types: ExecutionTargetType[]) {
-  const typeSet = new Set<ExecutionTargetType>(types);
-  return targets.filter((target) => typeSet.has(target.target_type));
-}
-
-function countTargetsByHealth(targets: ExecutionTarget[], health: ExecutionTargetHealthState) {
-  return targets.filter((target) => (target.health_state ?? 'unknown') === health).length;
-}
-
-function getTargetGroupHealth(targets: ExecutionTarget[]): ExecutionTargetHealthState {
-  if (targets.some((target) => target.health_state === 'healthy' || target.is_online)) return 'healthy';
-  if (targets.some((target) => target.health_state === 'degraded')) return 'degraded';
-  if (targets.some((target) => target.health_state === 'offline')) return 'offline';
-  return 'unknown';
-}
-
-function formatTargetEndpoint(target: ExecutionTarget) {
-  if (target.host && target.port) return `${target.host}:${target.port}`;
-  if (target.host) return target.host;
-  if (target.workspace_root) return target.workspace_root;
-  if (target.device_id) return shortId(target.device_id);
-  return '';
+interface Props {
+  onBack: () => void;
+  onOpenAuth: () => void;
+  initialSection?: SectionId;
 }
 
 export default function SettingsPage({ onBack, onOpenAuth, initialSection = 'general' }: Props) {
   const { t } = useTranslation();
-  const { themeMode, setThemeMode } = useTheme();
+  const { themeMode, setThemeMode: rawSetThemeMode } = useTheme();
+  const setThemeMode = (mode: string) => rawSetThemeMode(mode as 'dark' | 'light' | 'system');
   const hubAuth = useAuth();
-  const hubInventoryEnabled = hubAuth.isAuthenticated && Boolean(hubAuth.token);
-  const hubTargetsQuery = useHubExecutionTargets({
-    enabled: hubInventoryEnabled,
-    getToken: () => hubAuth.token,
-  });
-  const pingHubTargetMutation = usePingHubExecutionTarget({
-    getToken: () => hubAuth.token,
-  });
   const { online: edgeOnline, health } = useHealth();
   const { data: agentData } = useAgentList(edgeOnline);
-  const {
-    data: runData,
-    isError: runsError,
-    isFetching: runsFetching,
-    isLoading: runsLoading,
-    refetch: refetchRuns,
-  } = useRuns();
+  const { data: runData, isError: runsError, isFetching: runsFetching, isLoading: runsLoading, refetch: refetchRuns } = useRuns();
   const cancelRunMutation = useCancelRun();
   const bridgedTasks = useTaskBridgeStore((s) => s.tasks);
   const hubAuthenticated = useHubStore((s) => s.authenticated);
   const username = useHubStore((s) => s.username);
   const [active, setActive] = useState<SectionId>(initialSection);
-  const [navSearch, setNavSearch] = useState('');
-  const navSearchRef = useRef<HTMLInputElement>(null);
-
-  // Keyboard shortcut: `/` focuses the search input
-  const handleSettingsKeyDown = useCallback((e: KeyboardEvent) => {
-    const target = e.target as HTMLElement;
-    if (target.closest('input, textarea, select, [contenteditable]')) return;
-    if (e.key === '/') {
-      e.preventDefault();
-      navSearchRef.current?.focus();
-    }
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener('keydown', handleSettingsKeyDown);
-    return () => window.removeEventListener('keydown', handleSettingsKeyDown);
-  }, [handleSettingsKeyDown]);
-
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [compactMode, setCompactMode] = useStoredBooleanState('compactMode', false);
   const [autoReview, setAutoReview] = useStoredBooleanState('autoReview', true);
   const [fullAccess, setFullAccess] = useStoredBooleanState('fullAccess', false);
   const [enableMcp, setEnableMcp] = useStoredBooleanState('enableMcp', true);
-  const [skillSync, setSkillSync] = useStoredBooleanState('skillSync', true);
   const [taskSync, setTaskSync] = useStoredBooleanState('taskSync', true);
   const [groupChatEnabled, setGroupChatEnabled] = useStoredBooleanState('groupChat', true);
   const [agentSchedulingEnabled, setAgentSchedulingEnabled] = useStoredBooleanState('agentScheduling', true);
   const [enableHooks, setEnableHooks] = useStoredBooleanState('enableHooks', false);
-  const [remoteControlEnabled, setRemoteControlEnabled] = useStoredBooleanState('remoteControl', false);
   const [autoDetectGit, setAutoDetectGit] = useStoredBooleanState('autoDetectGit', true);
   const [worktreeIsolation, setWorktreeIsolation] = useStoredBooleanState('worktreeIsolation', true);
   const [browserPreview, setBrowserPreview] = useStoredBooleanState('browserPreview', true);
   const [computerConfirm, setComputerConfirm] = useStoredBooleanState('computerConfirm', true);
-  const [platformSync, setPlatformSync] = useStoredBooleanState('platformSync', true);
   const [auditTrail, setAuditTrail] = useStoredBooleanState('auditTrail', true);
   const [detailLevel, setDetailLevel] = useStoredValueState<SelectValue>('detailLevel', 'detailed');
   const [approvalMode, setApprovalMode] = useStoredValueState<SelectValue>('approvalMode', 'ask');
@@ -354,25 +136,37 @@ export default function SettingsPage({ onBack, onOpenAuth, initialSection = 'gen
   const setCcSwitchBridge = useModelSettingsStore((s) => s.setCcSwitchBridgeEnabled);
   const updateCcSwitchProvider = useModelSettingsStore((s) => s.updateProvider);
   const resolveRunRequestOptions = useModelSettingsStore((s) => s.resolveRunRequestOptions);
+  const hubSessionActive = hubAuthenticated || hubAuth.isAuthenticated;
+  const settingsHubClient = useMemo(() => createHubClient({ getToken: () => hubAuth.token ?? null }), [hubAuth.token]);
+  const deviceRegistration = useDeviceRegistration(hubSessionActive ? settingsHubClient : null);
+  const shouldLoadAgentMarket = hubSessionActive && active === 'agentMarket';
+  const shouldLoadIMSnapshot = hubSessionActive && (active === 'onlineIm' || active === 'groupChat');
+  const customAgentsQuery = useQuery({
+    queryKey: ['hub-settings', 'custom-agents', hubAuth.token],
+    queryFn: () => settingsHubClient.listCustomAgents() as Promise<Record<string, unknown>[]>,
+    enabled: shouldLoadAgentMarket,
+    retry: false,
+  });
+  const hubIMSnapshotQuery = useQuery<HubIMSnapshot>({
+    queryKey: ['hub-settings', 'im-snapshot', hubAuth.token],
+    queryFn: async () => {
+      const [contacts, sessions, friendRequests, notifications] = await Promise.all([
+        settingsHubClient.listContacts(), settingsHubClient.listSessions(),
+        settingsHubClient.listFriendRequests(), settingsHubClient.listNotifications({ limit: 20 }),
+      ]);
+      return { contacts, sessions, friendRequests, notifications };
+    },
+    enabled: shouldLoadIMSnapshot,
+    retry: false,
+  });
   const agents = agentData?.items ?? [];
   const localAgentProfiles = useMemo(
     () => agents.map((agent) => ({
-      agent,
-      alias: preferredProfileAlias(agent),
-      route: resolveRunRequestOptions({ model: preferredProfileAlias(agent) }),
+      agent, alias: preferredProfileAlias(agent) ?? '',
+      route: resolveRunRequestOptions({ model: preferredProfileAlias(agent) ?? undefined }),
     })),
-    [
-      agents,
-      defaultModel,
-      defaultProvider,
-      modelAliases,
-      modelMappingEnabled,
-      modelReasoningEffort,
-      providerFallbackEnabled,
-      resolveRunRequestOptions,
-    ],
+    [agents, resolveRunRequestOptions],
   );
-  const availableRuntimes = agents.filter((agent) => agent.status === 'available').length;
   const runnerHealth = health?.checks?.runners;
   const runnerItems = runnerHealth?.items ?? [];
   const availableRunners = runnerHealth?.available ?? runnerItems.filter((item) => item.status === 'online').length;
@@ -380,163 +174,123 @@ export default function SettingsPage({ onBack, onOpenAuth, initialSection = 'gen
   const runnerSummary = edgeOnline
     ? t('settings.runnerSummary', { available: availableRunners, total: totalRunners })
     : t('settings.edgeOffline');
-  const hubTargets = hubTargetsQuery.data?.items ?? [];
-  const hubOnlineTargets = hubTargets.filter(isHubTargetConnected).length;
-  const hubHealthyTargets = countTargetsByHealth(hubTargets, 'healthy');
-  const hubDegradedTargets = countTargetsByHealth(hubTargets, 'degraded');
-  const hubOfflineTargets = countTargetsByHealth(hubTargets, 'offline');
-  const hubUnknownTargets = countTargetsByHealth(hubTargets, 'unknown');
-  const hubRelayTargets = filterTargetsByType(hubTargets, ['hub_relay']);
-  const remoteHubTargets = filterTargetsByType(hubTargets, ['remote_ssh', 'tailscale']);
-  const cloudHubTargets = filterTargetsByType(hubTargets, ['cloud_edge']);
-  const hubTargetErrorMessage = hubTargetsQuery.error instanceof Error
-    ? hubTargetsQuery.error.message
-    : t('settings.targetHubErrorDesc');
-  const hubTargetInventoryDetail = !hubInventoryEnabled
-    ? t('settings.targetHubSignedOutDesc')
-    : hubTargetsQuery.isLoading
-      ? t('settings.targetHubLoading')
-      : hubTargetsQuery.isError
-        ? t('settings.targetHubError')
-        : hubTargets.length > 0
-          ? t('settings.targetCountSummary', { online: hubOnlineTargets, total: hubTargets.length })
-          : t('settings.targetHubEmpty');
-  const targetHealthBreakdown = t('settings.targetHealthBreakdown', {
-    healthy: hubHealthyTargets,
-    degraded: hubDegradedTargets,
-    offline: hubOfflineTargets,
-    unknown: hubUnknownTargets,
-  });
-  const getHubTargetGroupStatus = (targets: ExecutionTarget[]) => {
-    if (!hubInventoryEnabled) return t('settings.targetHubSignInRequired');
-    if (hubTargetsQuery.isLoading) return t('settings.targetHubLoading');
-    if (hubTargetsQuery.isError) return t('settings.targetHubError');
-    if (targets.length === 0) return t('settings.targetHubEmpty');
-    return t(`settings.targetHealth.${getTargetGroupHealth(targets)}`);
-  };
-  const getHubTargetGroupMetric = (targets: ExecutionTarget[]) => {
-    if (!hubInventoryEnabled) return t('settings.targetHubSignInRequired');
-    if (hubTargetsQuery.isLoading) return t('settings.targetHubLoading');
-    if (hubTargetsQuery.isError) return t('settings.targetHubError');
-    return t('settings.targetCountSummary', {
-      online: targets.filter(isHubTargetConnected).length,
-      total: targets.length,
-    });
-  };
   const runs = runData?.items ?? [];
   const activeRuns = runs.filter(isActiveRun).length;
   const latestRun = getRecentRuns(runs, 1)[0];
-  const recentRuns = getRecentRuns(runs, 5);
-  const activeHubTasks = bridgedTasks.filter(isActiveBridgeTask).length;
-  const recentBridgeTasks = getRecentTasks(bridgedTasks, 5);
-  const schedulerActiveItems = activeRuns + activeHubTasks;
-  const schedulerTotalItems = runs.length + bridgedTasks.length;
-  const schedulerTargetReadyCount = [
-    edgeOnline,
-    hubOnlineTargets > 0,
-    remoteControlEnabled,
-    false,
-  ].filter(Boolean).length;
-  const schedulerLocalMetric = totalRunners > 0 ? runnerSummary : edgeOnline ? t('settings.edgeOnline') : t('settings.edgeOffline');
-  const marketPublishReady = agents.filter((agent) => agent.status === 'available').length;
-  const marketCapabilityCount = countAgentCapabilities(agents);
-  const skillScriptCount = PROJECT_SKILLS.filter((skill) => skill.hasScripts).length;
-  const skillReferenceCount = PROJECT_SKILLS.filter((skill) => skill.hasReferences).length;
-  const skillReadyCount = PROJECT_SKILLS.filter((skill) => skill.status === 'ready').length;
-  const mcpCapableAgents = agents.filter((agent) => agent.capabilities.mcpIntegration).length;
-  const mcpPermissionHookAgents = agents.filter((agent) => agent.capabilities.permissionHooks).length;
-  const mcpSubAgentAgents = agents.filter((agent) => agent.capabilities.subAgentSpawn).length;
-  const hubSessionActive = hubAuthenticated || hubAuth.isAuthenticated;
   const accountName = hubAuth.user?.username ?? username ?? t('settings.signedIn');
-  const tokenSource = hubAuth.tokenSource;
-  const tokenSourceLabel =
-    tokenSource === 'tokendance'
-      ? 'TokenDance ID'
-      : tokenSource === 'hub'
-        ? t('settings.hubLocalLogin')
-        : t('settings.notConfigured');
-  const deviceId = readBrowserStorage('local', DEVICE_ID_KEY);
-  const tokenDanceOidcStatus = tokenSource === 'tokendance' ? t('settings.statusReady') : t('settings.statusInProgress');
-  const handleSignOut = () => {
-    void hubAuth.logout();
-  };
-  const handleRefreshRuns = () => {
-    void refetchRuns();
-  };
-  const handleCancelRun = (runId: string) => {
-    void cancelRunMutation.mutateAsync(runId);
-  };
-  const schedulerPolicyReadyCount = [
-    modelMappingEnabled,
-    ccSwitchBridge,
-    autoReview,
-    remoteControlEnabled,
-  ].filter(Boolean).length;
-
-  const navItems = useMemo<NavItem[]>(
-    () => [
-      { id: 'general', label: t('settings.general'), icon: <SlidersHorizontal size={17} />, group: 'workspace' },
-      { id: 'appearance', label: t('settings.appearance'), icon: <Palette size={17} />, group: 'workspace' },
-      { id: 'configuration', label: t('settings.configuration'), icon: <Wrench size={17} />, group: 'workspace' },
-      { id: 'personalization', label: t('settings.personalization'), icon: <UserCircle size={17} />, group: 'workspace' },
-      { id: 'permissions', label: t('settings.permissions'), icon: <ShieldCheck size={17} />, group: 'workspace' },
-      { id: 'agentProfiles', label: t('settings.agentProfiles'), icon: <Bot size={17} />, group: 'workspace' },
-      { id: 'executionTargets', label: t('settings.executionTargets'), icon: <Server size={17} />, group: 'workspace' },
-      { id: 'tasks', label: t('settings.tasks'), icon: <ClipboardList size={17} />, group: 'workspace' },
-      { id: 'onlineIm', label: t('settings.onlineIm'), icon: <Globe2 size={17} />, group: 'workspace' },
-      { id: 'groupChat', label: t('settings.groupChat'), icon: <MessageSquareText size={17} />, group: 'workspace' },
-      { id: 'agentScheduling', label: t('settings.agentScheduling'), icon: <Route size={17} />, group: 'workspace' },
-      { id: 'agentMarket', label: t('settings.agentMarket'), icon: <Bot size={17} />, group: 'workspace' },
-      { id: 'keyboard', label: t('settings.keyboard'), icon: <Keyboard size={17} />, group: 'workspace' },
-      { id: 'mcp', label: t('settings.mcp'), icon: <Plug size={17} />, group: 'automation' },
-      { id: 'skills', label: t('settings.skills'), icon: <Code2 size={17} />, group: 'automation' },
-      { id: 'hooks', label: t('settings.hooks'), icon: <TerminalSquare size={17} />, group: 'automation' },
-      { id: 'models', label: t('settings.models'), icon: <SlidersHorizontal size={17} />, group: 'automation' },
-      { id: 'modelMapping', label: t('settings.modelMapping'), icon: <Link2 size={17} />, group: 'automation' },
-      { id: 'ccSwitch', label: t('settings.ccSwitch'), icon: <Plug size={17} />, group: 'automation' },
-      { id: 'connections', label: t('settings.connections'), icon: <Globe2 size={17} />, group: 'automation' },
-      { id: 'remoteControl', label: t('settings.remoteControl'), icon: <Computer size={17} />, group: 'automation' },
-      { id: 'git', label: t('settings.git'), icon: <GitBranch size={17} />, group: 'automation' },
-      { id: 'environment', label: t('settings.environment'), icon: <HardDrive size={17} />, group: 'system' },
-      { id: 'worktree', label: t('settings.worktree'), icon: <FolderGit2 size={17} />, group: 'system' },
-      { id: 'browser', label: t('settings.browser'), icon: <Eye size={17} />, group: 'system' },
-      { id: 'computerUse', label: t('settings.computerUse'), icon: <Computer size={17} />, group: 'system' },
-      { id: 'platforms', label: t('settings.platforms'), icon: <Monitor size={17} />, group: 'system' },
-      { id: 'account', label: t('settings.account'), icon: <LockKeyhole size={17} />, group: 'system' },
-      { id: 'securityAudit', label: t('settings.securityAudit'), icon: <ShieldCheck size={17} />, group: 'system' },
-      { id: 'archived', label: t('settings.archived'), icon: <Archive size={17} />, group: 'system' },
-    ],
-    [t],
-  );
-
-  const filteredNavItems = useMemo(() => {
-    if (!navSearch.trim()) return navItems;
-    const query = navSearch.toLowerCase();
-    return navItems.filter((item) => item.label.toLowerCase().includes(query));
-  }, [navItems, navSearch]);
-
-  const groupedNavItems = useMemo(() => {
-    const groups = ['workspace', 'automation', 'system'] as const;
-    return groups.map((group) => ({
-      group,
-      items: filteredNavItems.filter((item) => item.group === group),
-    }));
-  }, [filteredNavItems]);
+  const tokenSource = hubAuth.tokenSource ?? 'none';
+  const tokenSourceLabel = tokenSource === 'tokendance' ? 'TokenDance ID' : tokenSource === 'hub' ? t('settings.hubLocalLogin') : t('settings.notConfigured');
+  const imSnapshot = hubIMSnapshotQuery.data;
+  const imSnapshotStatus = statusLabelFromQuery({
+    signedIn: hubSessionActive, isLoading: hubIMSnapshotQuery.isLoading,
+    isFetching: hubIMSnapshotQuery.isFetching, isError: hubIMSnapshotQuery.isError,
+    isSuccess: hubIMSnapshotQuery.isSuccess, t,
+  });
+  const desktopDeviceStatus = statusLabelFromDevice({
+    signedIn: hubSessionActive, status: deviceRegistration.status,
+    registeredLabel: 'registered', idleLabel: 'deviceStatus', t,
+  });
+  const deviceId = deviceRegistration.deviceId ?? readBrowserStorage('local', DEVICE_ID_KEY);
+  const handleSignOut = () => { void hubAuth.logout(); };
+
+  const navItems = useMemo<NavItem[]>(() => [
+    { id: 'general', label: t('settings.general'), icon: <SlidersHorizontal size={17} />, group: 'workspace' },
+    { id: 'appearance', label: t('settings.appearance'), icon: <Palette size={17} />, group: 'workspace' },
+    { id: 'configuration', label: t('settings.configuration'), icon: <Wrench size={17} />, group: 'workspace' },
+    { id: 'personalization', label: t('settings.personalization'), icon: <UserCircle size={17} />, group: 'workspace' },
+    { id: 'permissions', label: t('settings.permissions'), icon: <ShieldCheck size={17} />, group: 'workspace' },
+    { id: 'agentProfiles', label: t('settings.agentProfiles'), icon: <Bot size={17} />, group: 'workspace' },
+    { id: 'executionTargets', label: t('settings.executionTargets'), icon: <Server size={17} />, group: 'workspace' },
+    { id: 'tasks', label: t('settings.tasks'), icon: <ClipboardList size={17} />, group: 'workspace' },
+    { id: 'onlineIm', label: t('settings.onlineIm'), icon: <Globe2 size={17} />, group: 'workspace' },
+    { id: 'groupChat', label: t('settings.groupChat'), icon: <MessageSquareText size={17} />, group: 'workspace' },
+    { id: 'agentScheduling', label: t('settings.agentScheduling'), icon: <Route size={17} />, group: 'workspace' },
+    { id: 'agentMarket', label: t('settings.agentMarket'), icon: <Bot size={17} />, group: 'workspace' },
+    { id: 'keyboard', label: t('settings.keyboard'), icon: <Keyboard size={17} />, group: 'workspace' },
+    { id: 'mcp', label: t('settings.mcp'), icon: <Plug size={17} />, group: 'automation' },
+    { id: 'skills', label: t('settings.skills'), icon: <Code2 size={17} />, group: 'automation' },
+    { id: 'hooks', label: t('settings.hooks'), icon: <TerminalSquare size={17} />, group: 'automation' },
+    { id: 'models', label: t('settings.models'), icon: <SlidersHorizontal size={17} />, group: 'automation' },
+    { id: 'modelMapping', label: t('settings.modelMapping'), icon: <Link2 size={17} />, group: 'automation' },
+    { id: 'ccSwitch', label: t('settings.ccSwitch'), icon: <Plug size={17} />, group: 'automation' },
+    { id: 'connections', label: t('settings.connections'), icon: <Globe2 size={17} />, group: 'automation' },
+    { id: 'remoteControl', label: t('settings.remoteControl'), icon: <Computer size={17} />, group: 'automation' },
+    { id: 'git', label: t('settings.git'), icon: <GitBranch size={17} />, group: 'automation' },
+    { id: 'environment', label: t('settings.environment'), icon: <HardDrive size={17} />, group: 'system' },
+    { id: 'worktree', label: t('settings.worktree'), icon: <FolderGit2 size={17} />, group: 'system' },
+    { id: 'browser', label: t('settings.browser'), icon: <Eye size={17} />, group: 'system' },
+    { id: 'computerUse', label: t('settings.computerUse'), icon: <Computer size={17} />, group: 'system' },
+    { id: 'platforms', label: t('settings.platforms'), icon: <Monitor size={17} />, group: 'system' },
+    { id: 'account', label: t('settings.account'), icon: <LockKeyhole size={17} />, group: 'system' },
+    { id: 'securityAudit', label: t('settings.securityAudit'), icon: <ShieldCheck size={17} />, group: 'system' },
+    { id: 'archived', label: t('settings.archived'), icon: <Archive size={17} />, group: 'system' },
+  ], [t]);
 
   const activeLabel = navItems.find((item) => item.id === active)?.label ?? t('settings.title');
-  const shortcuts: ShortcutRow[] = [
-    { keys: ['Enter'], action: t('shortcut.send') },
-    { keys: ['Shift', 'Enter'], action: t('shortcut.newline') },
-    { keys: ['Ctrl', 'K'], action: t('shortcut.search') },
-    { keys: ['⌘/Ctrl', 'B'], action: t('shortcut.toggleSidebar') },
-    { keys: ['⌘/Ctrl', 'J'], action: t('shortcut.toggleRunPanel') },
-    { keys: ['Esc'], action: t('shortcut.close') },
-    { keys: ['?'], action: t('shortcut.help') },
-  ];
 
-  const setBooleanSetting = (key: string, setter: (value: boolean) => void) => (value: boolean) => {
-    setter(value);
-    writeStoredValue(key, value);
+  const renderSection = (active: SectionId) => {
+    switch (active) {
+      case 'general':
+        return <GeneralSection detailLevel={detailLevel} setDetailLevel={setDetailLevel} compactMode={compactMode} setCompactMode={setCompactMode} />;
+      case 'appearance':
+        return <AppearanceSection themeMode={themeMode} setThemeMode={setThemeMode} compactMode={compactMode} setCompactMode={setCompactMode} />;
+      case 'configuration':
+        return <ConfigurationSection approvalMode={approvalMode} setApprovalMode={setApprovalMode} />;
+      case 'personalization':
+        return <PersonalizationSection username={username} />;
+      case 'permissions':
+        return <PermissionsSection autoReview={autoReview} setAutoReview={setAutoReview} fullAccess={fullAccess} setFullAccess={setFullAccess} />;
+      case 'agentProfiles':
+        return <AgentProfilesSection agents={agents} edgeOnline={edgeOnline} runnerSummary={runnerSummary} runnerItems={runnerItems} localAgentProfiles={localAgentProfiles} />;
+      case 'executionTargets':
+        return <ExecutionTargetsSection edgeOnline={edgeOnline} health={health} hubSessionActive={hubSessionActive} runnerSummary={runnerSummary} runnerItems={runnerItems} availableRunners={availableRunners} desktopDeviceStatus={desktopDeviceStatus} deviceId={deviceId} />;
+      case 'tasks':
+        return <TasksSection runs={runs} activeRuns={activeRuns} runsLoading={runsLoading} runsFetching={runsFetching} runsError={runsError} refetchRuns={refetchRuns} cancelRunMutation={cancelRunMutation} bridgedTasks={bridgedTasks} hubSessionActive={hubSessionActive} taskSync={taskSync} setTaskSync={setTaskSync} onOpenAuth={onOpenAuth} latestRun={latestRun} />;
+      case 'onlineIm':
+        return <OnlineImSection hubSessionActive={hubSessionActive} imSessions={imSnapshot?.sessions ?? []} imContacts={imSnapshot?.contacts ?? []} imFriendRequests={imSnapshot?.friendRequests ?? []} imNotifications={imSnapshot?.notifications ?? []} isLoading={hubIMSnapshotQuery.isLoading} isFetching={hubIMSnapshotQuery.isFetching} isError={hubIMSnapshotQuery.isError} isSuccess={hubIMSnapshotQuery.isSuccess} refetch={() => void hubIMSnapshotQuery.refetch()} deviceRegistrationStatus={deviceRegistration.status} onOpenAuth={onOpenAuth} />;
+      case 'groupChat':
+        return <GroupChatSection hubSessionActive={hubSessionActive} isLoading={hubIMSnapshotQuery.isLoading} isError={hubIMSnapshotQuery.isError} imSessions={imSnapshot?.sessions ?? []} imContactsCount={(imSnapshot?.contacts ?? []).length} imSnapshotStatus={imSnapshotStatus} agents={agents} edgeOnline={edgeOnline} groupChatEnabled={groupChatEnabled} setGroupChatEnabled={setGroupChatEnabled} onOpenAuth={onOpenAuth} />;
+      case 'agentScheduling':
+        return <AgentSchedulingSection runs={runs} activeRuns={activeRuns} runsLoading={runsLoading} bridgedTasks={bridgedTasks} agents={agents} edgeOnline={edgeOnline} hubSessionActive={hubSessionActive} totalRunners={totalRunners} runnerSummary={runnerSummary} modelMappingEnabled={modelMappingEnabled} ccSwitchBridge={ccSwitchBridge} autoReview={autoReview} agentSchedulingEnabled={agentSchedulingEnabled} setAgentSchedulingEnabled={setAgentSchedulingEnabled} />;
+      case 'agentMarket':
+        return <AgentMarketSection hubSessionActive={hubSessionActive} agents={agents} edgeOnline={edgeOnline} customAgents={(customAgentsQuery.data as Record<string, unknown>[]) ?? []} isLoading={customAgentsQuery.isLoading} isFetching={customAgentsQuery.isFetching} isError={customAgentsQuery.isError} isSuccess={customAgentsQuery.isSuccess} refetch={() => void customAgentsQuery.refetch()} onOpenAuth={onOpenAuth} />;
+      case 'keyboard':
+        return <KeyboardSection />;
+      case 'mcp':
+        return <McpSection agents={agents} edgeOnline={edgeOnline} hubSessionActive={hubSessionActive} enableMcp={enableMcp} setEnableMcp={setEnableMcp} />;
+      case 'skills':
+        return <SkillsSection hubSessionActive={hubSessionActive} />;
+      case 'hooks':
+        return <HooksSection enableHooks={enableHooks} setEnableHooks={setEnableHooks} />;
+      case 'models':
+        return <ModelsSection defaultModel={defaultModel} defaultProvider={defaultProvider} modelReasoningEffort={modelReasoningEffort} providerFallbackEnabled={providerFallbackEnabled} setDefaultModel={setDefaultModel} setDefaultProvider={setDefaultProvider} setModelReasoningEffort={setModelReasoningEffort} setProviderFallbackEnabled={setProviderFallbackEnabled} />;
+      case 'modelMapping':
+        return <ModelMappingSection modelMappingEnabled={modelMappingEnabled} setModelMappingEnabled={setModelMappingEnabled} modelAliases={modelAliases} toggleModelAlias={toggleModelAlias} updateModelAlias={updateModelAlias} />;
+      case 'ccSwitch':
+        return <CcSwitchSection ccSwitchBridge={ccSwitchBridge} setCcSwitchBridge={setCcSwitchBridge} ccSwitchProviders={ccSwitchProviders} updateCcSwitchProvider={updateCcSwitchProvider} />;
+      case 'connections':
+        return <ConnectionsSection edgeOnline={edgeOnline} hubSessionActive={hubSessionActive} runnerSummary={runnerSummary} />;
+      case 'remoteControl':
+        return <RemoteControlSection hubSessionActive={hubSessionActive} />;
+      case 'git':
+        return <GitSection autoDetectGit={autoDetectGit} setAutoDetectGit={setAutoDetectGit} />;
+      case 'environment':
+        return <EnvironmentSection />;
+      case 'worktree':
+        return <WorktreeSection worktreeIsolation={worktreeIsolation} setWorktreeIsolation={setWorktreeIsolation} />;
+      case 'browser':
+        return <BrowserSection browserPreview={browserPreview} setBrowserPreview={setBrowserPreview} />;
+      case 'computerUse':
+        return <ComputerUseSection computerConfirm={computerConfirm} setComputerConfirm={setComputerConfirm} />;
+      case 'platforms':
+        return <PlatformsSection hubSessionActive={hubSessionActive} />;
+      case 'account':
+        return <AccountSection hubSessionActive={hubSessionActive} accountName={accountName} tokenSource={tokenSource} tokenSourceLabel={tokenSourceLabel} desktopDeviceStatus={desktopDeviceStatus} deviceId={deviceId} deviceRegistration={deviceRegistration} onOpenAuth={onOpenAuth} onSignOut={handleSignOut} />;
+      case 'securityAudit':
+        return <SecurityAuditSection auditTrail={auditTrail} setAuditTrail={setAuditTrail} />;
+      case 'archived':
+        return <ArchivedSection />;
+    }
   };
 
   return (
@@ -546,1853 +300,39 @@ export default function SettingsPage({ onBack, onOpenAuth, initialSection = 'gen
           <ArrowLeft size={18} />
           <span>{t('settings.back')}</span>
         </button>
-
-        <div className={styles.sidebarSearch}>
-          <Search size={14} />
-          <input
-            ref={navSearchRef}
-            type="text"
-            placeholder={t('settings.searchPlaceholder')}
-            value={navSearch}
-            onChange={(e) => setNavSearch(e.target.value)}
-          />
-        </div>
-
         <nav className={styles.nav} aria-label={t('settings.title')}>
-          {groupedNavItems.map(({ group, items }) => (
+          {(['workspace', 'automation', 'system'] as const).map((group) => (
             <div key={group} className={styles.navGroup}>
-              {items.length > 0 && <div className={styles.navGroupLabel}>{t(`settings.group.${group}`)}</div>}
-              {items.map((item) => (
-                  <button
-                    key={item.id}
-                    className={`${styles.navItem} ${active === item.id ? styles.navItemActive : ''}`}
-                    onClick={() => setActive(item.id)}
-                  >
-                    {item.icon}
-                    <span>{item.label}</span>
-                  </button>
-                ))}
+              <div className={styles.navGroupLabel}>{t(`settings.group.${group}`)}</div>
+              {navItems.filter((item) => item.group === group).map((item) => (
+                <button key={item.id} className={`${styles.navItem} ${active === item.id ? styles.navItemActive : ''}`} onClick={() => setActive(item.id)}>
+                  {item.icon}<span>{item.label}</span>
+                </button>
+              ))}
             </div>
           ))}
         </nav>
-
         <div className={styles.sidebarAccount}>
           <button className={styles.sidebarAccountBtn} onClick={() => setActive('account')}>
             <UserCircle size={18} />
             <span>{hubSessionActive ? accountName : t('settings.notSignedIn')}</span>
           </button>
           {hubSessionActive ? (
-            <button className={styles.sidebarActionBtn} onClick={handleSignOut}>
-              <LogOut size={17} />
-              <span>{t('settings.signOut')}</span>
-            </button>
+            <button className={styles.sidebarActionBtn} onClick={handleSignOut}><LogOut size={17} /><span>{t('settings.signOut')}</span></button>
           ) : (
-            <button className={styles.sidebarActionBtn} onClick={onOpenAuth}>
-              <LogIn size={17} />
-              <span>{t('settings.signIn')}</span>
-            </button>
+            <button className={styles.sidebarActionBtn} onClick={onOpenAuth}><LogIn size={17} /><span>{t('settings.signIn')}</span></button>
           )}
         </div>
       </aside>
-
       <main className={styles.main}>
         <div className={styles.content}>
           <div className={styles.header}>
             <span>{t('settings.title')}</span>
             <h1>{activeLabel}</h1>
           </div>
-
-          {active === 'general' && (
-            <>
-              <Panel title={t('settings.workMode')} description={t('settings.workModeDesc')}>
-                <div className={styles.modeGrid}>
-                  <ModeCard
-                    active={detailLevel === 'detailed'}
-                    icon={<Monitor size={20} />}
-                    title={t('settings.modeCoding')}
-                    description={t('settings.modeCodingDesc')}
-                    onClick={() => {
-                      setDetailLevel('detailed');
-                      writeStoredValue('detailLevel', 'detailed');
-                    }}
-                  />
-                  <ModeCard
-                    active={detailLevel === 'balanced'}
-                    icon={<Eye size={20} />}
-                    title={t('settings.modeDaily')}
-                    description={t('settings.modeDailyDesc')}
-                    onClick={() => {
-                      setDetailLevel('balanced');
-                      writeStoredValue('detailLevel', 'balanced');
-                    }}
-                  />
-                </div>
-              </Panel>
-
-              <Panel title={t('settings.general')}>
-                <SettingRow
-                  title={t('settings.compactMode')}
-                  description={t('settings.compactModeDesc')}
-                  control={
-                    <Switch checked={compactMode} onChange={setBooleanSetting('compactMode', setCompactMode)} />
-                  }
-                />
-                <SettingRow
-                  title={t('settings.detailLevel')}
-                  description={t('settings.detailLevelDesc')}
-                  control={
-                    <SelectControl
-                      value={detailLevel}
-                      onChange={(value) => {
-                        setDetailLevel(value as SelectValue);
-                        writeStoredValue('detailLevel', value);
-                      }}
-                      options={[
-                        ['detailed', t('settings.detailLevel.detailed')],
-                        ['balanced', t('settings.detailLevel.balanced')],
-                      ]}
-                    />
-                  }
-                />
-              </Panel>
-            </>
-          )}
-
-          {active === 'appearance' && (
-            <>
-              <Panel title={t('settings.theme')} description={t('settings.themeDesc')}>
-                <div className={styles.segmented}>
-                  {(['dark', 'light', 'system'] as const).map((mode) => (
-                    <button
-                      key={mode}
-                      className={themeMode === mode ? styles.segmentActive : ''}
-                      onClick={() => setThemeMode(mode)}
-                    >
-                      {t(`settings.theme.${mode}`)}
-                    </button>
-                  ))}
-                </div>
-              </Panel>
-              <Panel title={t('settings.density')}>
-                <SettingRow
-                  title={t('settings.compactMode')}
-                  description={t('settings.compactModeDesc')}
-                  control={
-                    <Switch checked={compactMode} onChange={setBooleanSetting('compactMode', setCompactMode)} />
-                  }
-                />
-              </Panel>
-            </>
-          )}
-
-          {active === 'configuration' && (
-            <Panel title={t('settings.configuration')} description={t('settings.configurationDesc')}>
-              <SettingRow title={t('settings.defaultAgent')} description="Claude Code / Codex / OpenCode" value="Auto" />
-              <SettingRow
-                title={t('settings.routing')}
-                description={t('settings.routingDesc')}
-                value={t('settings.routingAuto')}
-              />
-              <SettingRow
-                title={t('settings.approvalMode')}
-                description={t('settings.approvalModeDesc')}
-                control={
-                  <SelectControl
-                    value={approvalMode}
-                    onChange={(value) => {
-                      setApprovalMode(value as SelectValue);
-                      writeStoredValue('approvalMode', value);
-                    }}
-                    options={[
-                      ['ask', t('settings.approvalMode.ask')],
-                      ['auto', t('settings.approvalMode.auto')],
-                      ['manual', t('settings.approvalMode.manual')],
-                    ]}
-                  />
-                }
-              />
-            </Panel>
-          )}
-
-          {active === 'personalization' && (
-            <Panel title={t('settings.personalization')} description={t('settings.personalizationDesc')}>
-              <SettingRow title={t('settings.displayName')} description={username ?? 'AgentHub User'} value="Local" />
-              <SettingRow title={t('settings.instructions')} description={t('settings.instructionsDesc')} action />
-              <Callout title={t('settings.personalizationNote')} body={t('settings.personalizationNoteDesc')} />
-            </Panel>
-          )}
-
-          {active === 'permissions' && (
-            <Panel title={t('settings.permissions')} description={t('settings.permissionsDesc')}>
-              <SettingRow
-                title={t('settings.autoReview')}
-                description={t('settings.autoReviewDesc')}
-                control={<Switch checked={autoReview} onChange={setBooleanSetting('autoReview', setAutoReview)} />}
-              />
-              <SettingRow
-                title={t('settings.fullAccess')}
-                description={t('settings.fullAccessDesc')}
-                control={<Switch checked={fullAccess} onChange={setBooleanSetting('fullAccess', setFullAccess)} />}
-              />
-              <SettingRow title={t('settings.permissionLedger')} description={t('settings.permissionLedgerDesc')} value={t('settings.statusPlanned')} />
-            </Panel>
-          )}
-
-          {active === 'agentProfiles' && (
-            <Panel title={t('settings.agentProfiles')} description={t('settings.agentProfilesDesc')}>
-              <div className={styles.summaryGrid}>
-                <SummaryCard
-                  icon={<Bot size={18} />}
-                  label={t('settings.profileAvailable')}
-                  value={`${availableRuntimes}/${agents.length}`}
-                  detail={edgeOnline ? t('settings.runtimeInventoryDesc') : t('settings.edgeOffline')}
-                />
-                <SummaryCard
-                  icon={<Cpu size={18} />}
-                  label={t('settings.profileRuntimeCoverage')}
-                  value={runnerSummary}
-                  detail={t('settings.profileRuntimeCoverageDesc')}
-                />
-              </div>
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.runtimeInventory')}</strong>
-                  <span>{t('settings.runtimeInventoryDesc')}</span>
-                </div>
-                {agents.length > 0 ? (
-                  <div className={styles.profileGrid}>
-                    {agents.map((agent) => <RuntimeInventoryCard key={agent.id} agent={agent} />)}
-                  </div>
-                ) : (
-                  <EmptyBlock title={t('settings.noRuntimes')} description={t('settings.noRuntimesDesc')} />
-                )}
-              </div>
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.profileComposition')}</strong>
-                  <span>{t('settings.profileCompositionDesc')}</span>
-                </div>
-                {localAgentProfiles.length > 0 ? (
-                  <div className={styles.profileGrid}>
-                    {localAgentProfiles.map((profile) => (
-                      <LocalAgentProfileCard
-                        key={`profile-${profile.agent.id}`}
-                        agent={profile.agent}
-                        alias={profile.alias}
-                        route={profile.route}
-                        edgeOnline={edgeOnline}
-                      />
-                    ))}
-                  </div>
-                ) : (
-                  <EmptyBlock title={t('settings.noProfiles')} description={t('settings.noProfilesDesc')} />
-                )}
-                <div className={styles.capabilityGrid}>
-                  <CapabilityCard
-                    title={t('settings.profileRuntime')}
-                    description={t('settings.profileRuntimeDesc')}
-                    status={agents.length > 0 ? t('settings.statusReady') : t('settings.notConfigured')}
-                  />
-                  <CapabilityCard
-                    title={t('settings.profileModel')}
-                    description={t('settings.profileModelDesc')}
-                    status={t('settings.statusInProgress')}
-                  />
-                  <CapabilityCard
-                    title={t('settings.profileConfig')}
-                    description={t('settings.profileConfigDesc')}
-                    status={t('settings.statusInProgress')}
-                  />
-                  <CapabilityCard
-                    title={t('settings.executionTargets')}
-                    description={t('settings.profileExecutionTargetDesc')}
-                    status={edgeOnline ? t('settings.statusReady') : t('settings.notConfigured')}
-                  />
-                </div>
-              </div>
-              <SettingRow title={t('settings.profileConfigSource')} description={t('settings.profileConfigSourceDesc')} value="AGENTS.md / memory / skills" />
-              <SettingRow title={t('settings.profilePublish')} description={t('settings.profilePublishDesc')} value={t('settings.statusPlanned')} />
-            </Panel>
-          )}
-
-          {active === 'executionTargets' && (
-            <Panel title={t('settings.executionTargets')} description={t('settings.executionTargetsDesc')}>
-              <div className={styles.summaryGrid}>
-                <SummaryCard
-                  icon={<Monitor size={18} />}
-                  label={t('settings.targetLocalInventory')}
-                  value={`${availableRunners}/${totalRunners}`}
-                  detail={edgeOnline ? runnerSummary : t('settings.edgeOffline')}
-                />
-                <SummaryCard
-                  icon={<Globe2 size={18} />}
-                  label={t('settings.targetHubInventory')}
-                  value={hubTargetsQuery.isLoading ? t('settings.loading') : `${hubOnlineTargets}/${hubTargets.length}`}
-                  detail={hubTargetInventoryDetail}
-                />
-                <SummaryCard
-                  icon={<ShieldCheck size={18} />}
-                  label={t('settings.targetHubHealth')}
-                  value={hubTargets.length > 0 ? `${hubHealthyTargets}/${hubTargets.length}` : t('settings.noData')}
-                  detail={targetHealthBreakdown}
-                />
-              </div>
-              <div className={styles.targetGrid}>
-                <ExecutionTargetCard
-                  icon={<Monitor size={18} />}
-                  title={t('settings.targetLocalEdge')}
-                  description={t('settings.targetLocalEdgeDesc')}
-                  status={edgeOnline ? health?.status ?? 'ok' : t('settings.offline')}
-                  metric={runnerSummary}
-                  connected={edgeOnline && availableRunners > 0}
-                />
-                <ExecutionTargetCard
-                  icon={<Globe2 size={18} />}
-                  title={t('settings.targetHubRelay')}
-                  description={t('settings.targetHubRelayDesc')}
-                  status={getHubTargetGroupStatus(hubRelayTargets)}
-                  metric={getHubTargetGroupMetric(hubRelayTargets)}
-                  connected={hubRelayTargets.some(isHubTargetConnected)}
-                />
-                <ExecutionTargetCard
-                  icon={<Server size={18} />}
-                  title={t('settings.targetSsh')}
-                  description={t('settings.targetSshDesc')}
-                  status={getHubTargetGroupStatus(remoteHubTargets)}
-                  metric={getHubTargetGroupMetric(remoteHubTargets)}
-                  connected={remoteHubTargets.some(isHubTargetConnected)}
-                />
-                <ExecutionTargetCard
-                  icon={<Computer size={18} />}
-                  title={t('settings.targetCloudEdge')}
-                  description={t('settings.targetCloudEdgeDesc')}
-                  status={getHubTargetGroupStatus(cloudHubTargets)}
-                  metric={getHubTargetGroupMetric(cloudHubTargets)}
-                  connected={cloudHubTargets.some(isHubTargetConnected)}
-                />
-              </div>
-              {runnerItems.length > 0 ? (
-                <div className={styles.runnerList}>
-                  {runnerItems.map((runner) => <RunnerRow key={runner.id} runner={runner} />)}
-                </div>
-              ) : (
-                <Callout title={t('settings.runnerInventory')} body={t('settings.runnerInventoryDesc')} />
-              )}
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.targetHubInventory')}</strong>
-                  <span>{t('settings.targetHubInventoryDesc')}</span>
-                </div>
-                {!hubInventoryEnabled ? (
-                  <EmptyBlock
-                    title={t('settings.targetHubSignInRequired')}
-                    description={t('settings.targetHubSignedOutDesc')}
-                  />
-                ) : hubTargetsQuery.isLoading ? (
-                  <EmptyBlock title={t('settings.targetHubLoading')} description={t('settings.targetHubLoadingDesc')} />
-                ) : hubTargetsQuery.isError ? (
-                  <EmptyBlock title={t('settings.targetHubError')} description={hubTargetErrorMessage} />
-                ) : hubTargets.length > 0 ? (
-                  <div className={styles.runnerList}>
-                    {hubTargets.map((target) => (
-                      <HubExecutionTargetRow
-                        key={target.id}
-                        target={target}
-                        pinging={pingHubTargetMutation.isPending && pingHubTargetMutation.variables === target.id}
-                        onPing={(targetId) => pingHubTargetMutation.mutate(targetId)}
-                      />
-                    ))}
-                  </div>
-                ) : (
-                  <EmptyBlock title={t('settings.targetHubEmpty')} description={t('settings.targetHubEmptyDesc')} />
-                )}
-              </div>
-            </Panel>
-          )}
-
-          {active === 'tasks' && (
-            <Panel title={t('settings.tasks')} description={t('settings.tasksDesc')}>
-              <div className={styles.summaryGrid}>
-                <SummaryCard
-                  icon={<Route size={18} />}
-                  label={t('settings.taskLocalRuns')}
-                  value={`${activeRuns}/${runs.length}`}
-                  detail={runsLoading ? t('settings.loading') : t('settings.taskLocalRunsDesc')}
-                />
-                <SummaryCard
-                  icon={<ClipboardList size={18} />}
-                  label={t('settings.taskHubBridge')}
-                  value={`${activeHubTasks}/${bridgedTasks.length}`}
-                  detail={hubAuthenticated ? t('settings.taskHubBridgeDesc') : t('settings.taskHubBridgeSignedOut')}
-                />
-                <SummaryCard
-                  icon={<Monitor size={18} />}
-                  label={t('settings.taskLastRun')}
-                  value={latestRun ? t(`run.status.${latestRun.status}`, { defaultValue: latestRun.status }) : t('settings.noData')}
-                  detail={latestRun ? formatTimestamp(latestRun.finishedAt ?? latestRun.startedAt ?? latestRun.createdAt) : t('settings.taskLastRunDesc')}
-                />
-                <SummaryCard
-                  icon={<ShieldCheck size={18} />}
-                  label={t('settings.taskApprovalQueue')}
-                  value={t('settings.statusPlanned')}
-                  detail={t('settings.taskApprovalQueueDesc')}
-                />
-              </div>
-              <SettingRow
-                title={t('settings.taskSync')}
-                description={t('settings.taskSyncDesc')}
-                control={<Switch checked={taskSync} onChange={setBooleanSetting('taskSync', setTaskSync)} />}
-              />
-              <SettingRow
-                title={t('settings.taskInbox')}
-                description={t('settings.taskInboxDesc')}
-                value={runsError ? t('settings.edgeOffline') : t('settings.statusInProgress')}
-              />
-              <SettingRow title={t('settings.taskRunBinding')} description={t('settings.taskRunBindingDesc')} value={t('settings.statusInProgress')} />
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <div className={styles.taskSectionTitleRow}>
-                    <div>
-                      <strong>{t('settings.taskRecentRuns')}</strong>
-                      <span>{runsFetching ? t('settings.taskRefreshingRuns') : t('settings.taskRecentRunsDesc')}</span>
-                    </div>
-                    <div className={styles.taskSectionActions}>
-                      <span className={`${styles.statusPill} ${runsError ? '' : styles.statusPillOn}`}>
-                        {runsError ? t('settings.edgeOffline') : t('settings.taskRunLive')}
-                      </span>
-                      <button
-                        type="button"
-                        className={styles.secondaryBtn}
-                        onClick={handleRefreshRuns}
-                        disabled={runsFetching}
-                      >
-                        <RefreshCw size={15} />
-                        {runsFetching ? t('settings.taskRefreshingRuns') : t('settings.taskRefreshRuns')}
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                {recentRuns.length > 0 ? (
-                  <div className={styles.taskList}>
-                    {recentRuns.map((run) => (
-                      <TaskRunRow
-                        key={run.runId}
-                        run={run}
-                        onCancel={isActiveRun(run) ? handleCancelRun : undefined}
-                        cancelling={cancelRunMutation.isPending && cancelRunMutation.variables === run.runId}
-                      />
-                    ))}
-                  </div>
-                ) : (
-                  <EmptyBlock title={t('settings.taskNoRuns')} description={t('settings.taskNoRunsDesc')} />
-                )}
-              </div>
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.taskBridgeQueue')}</strong>
-                  <span>{t('settings.taskBridgeQueueDesc')}</span>
-                </div>
-                {recentBridgeTasks.length > 0 ? (
-                  <div className={styles.taskList}>
-                    {recentBridgeTasks.map((task) => (
-                      <HubTaskRow key={task.taskId} task={task} />
-                    ))}
-                  </div>
-                ) : (
-                  <EmptyBlock title={t('settings.taskNoHubTasks')} description={t('settings.taskNoHubTasksDesc')} />
-                )}
-              </div>
-            </Panel>
-          )}
-
-          {active === 'onlineIm' && (
-            <Panel title={t('settings.onlineIm')} description={t('settings.onlineImDesc')}>
-              <div className={styles.capabilityGrid}>
-                <CapabilityCard
-                  title={t('settings.onlineImSessions')}
-                  description={t('settings.onlineImSessionsDesc')}
-                  status={t('settings.statusReady')}
-                />
-                <CapabilityCard
-                  title={t('settings.onlineImPresence')}
-                  description={t('settings.onlineImPresenceDesc')}
-                  status={t('settings.statusPlanned')}
-                />
-                <CapabilityCard
-                  title={t('settings.onlineImNotifications')}
-                  description={t('settings.onlineImNotificationsDesc')}
-                  status={t('settings.statusPlanned')}
-                />
-              </div>
-            </Panel>
-          )}
-
-          {active === 'groupChat' && (
-            <Panel title={t('settings.groupChat')} description={t('settings.groupChatDesc')}>
-              <SettingRow
-                title={t('settings.enableGroupChat')}
-                description={t('settings.enableGroupChatDesc')}
-                control={<Switch checked={groupChatEnabled} onChange={setBooleanSetting('groupChat', setGroupChatEnabled)} />}
-              />
-              <SettingRow title={t('settings.groupChatAgents')} description={t('settings.groupChatAgentsDesc')} value={t('settings.statusReady')} />
-              <SettingRow title={t('settings.groupChatRooms')} description={t('settings.groupChatRoomsDesc')} value={t('settings.statusPlanned')} />
-              <SettingRow title={t('settings.groupChatModeration')} description={t('settings.groupChatModerationDesc')} value={t('settings.statusPlanned')} />
-            </Panel>
-          )}
-
-          {active === 'agentScheduling' && (
-            <Panel title={t('settings.agentScheduling')} description={t('settings.agentSchedulingDesc')}>
-              <div className={styles.summaryGrid}>
-                <SummaryCard
-                  icon={<ClipboardList size={18} />}
-                  label={t('settings.schedulerQueueLive')}
-                  value={`${schedulerActiveItems}/${schedulerTotalItems}`}
-                  detail={runsLoading ? t('settings.loading') : t('settings.schedulerQueueLiveDesc')}
-                />
-                <SummaryCard
-                  icon={<Bot size={18} />}
-                  label={t('settings.schedulerProfiles')}
-                  value={`${availableRuntimes}/${agents.length}`}
-                  detail={edgeOnline ? t('settings.schedulerProfilesDesc') : t('settings.edgeOffline')}
-                />
-                <SummaryCard
-                  icon={<Server size={18} />}
-                  label={t('settings.schedulerTargets')}
-                  value={`${schedulerTargetReadyCount}/4`}
-                  detail={t('settings.schedulerTargetsDesc')}
-                />
-                <SummaryCard
-                  icon={<ShieldCheck size={18} />}
-                  label={t('settings.schedulerPolicyReady')}
-                  value={`${schedulerPolicyReadyCount}/4`}
-                  detail={t('settings.schedulerPolicyReadyDesc')}
-                />
-              </div>
-              <SettingRow
-                title={t('settings.enableAgentScheduling')}
-                description={t('settings.enableAgentSchedulingDesc')}
-                control={<Switch checked={agentSchedulingEnabled} onChange={setBooleanSetting('agentScheduling', setAgentSchedulingEnabled)} />}
-              />
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.schedulerLiveQueue')}</strong>
-                  <span>{t('settings.schedulerLiveQueueDesc')}</span>
-                </div>
-                {recentRuns.length > 0 || recentBridgeTasks.length > 0 ? (
-                  <div className={styles.taskList}>
-                    {recentRuns.slice(0, 3).map((run) => (
-                      <TaskRunRow key={`scheduler-${run.runId}`} run={run} />
-                    ))}
-                    {recentBridgeTasks.slice(0, 3).map((task) => (
-                      <HubTaskRow key={`scheduler-${task.taskId}`} task={task} />
-                    ))}
-                  </div>
-                ) : (
-                  <EmptyBlock title={t('settings.schedulerNoQueue')} description={t('settings.schedulerNoQueueDesc')} />
-                )}
-              </div>
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.schedulerTargets')}</strong>
-                  <span>{t('settings.schedulerTargetsDesc')}</span>
-                </div>
-                <div className={styles.targetGrid}>
-                  <ExecutionTargetCard
-                    icon={<Monitor size={18} />}
-                    title={t('settings.schedulerRouteLocal')}
-                    description={t('settings.schedulerRouteLocalDesc')}
-                    status={edgeOnline ? t('settings.enabled') : t('settings.offline')}
-                    metric={schedulerLocalMetric}
-                    connected={edgeOnline}
-                  />
-                  <ExecutionTargetCard
-                    icon={<Globe2 size={18} />}
-                    title={t('settings.schedulerRouteHub')}
-                    description={t('settings.schedulerRouteHubDesc')}
-                    status={hubAuthenticated ? t('settings.enabled') : t('settings.notConfigured')}
-                    metric={hubAuthenticated ? t('settings.targetHubSignedIn') : t('settings.targetHubSignInRequired')}
-                    connected={hubAuthenticated}
-                  />
-                  <ExecutionTargetCard
-                    icon={<Computer size={18} />}
-                    title={t('settings.schedulerRouteRemote')}
-                    description={t('settings.schedulerRouteRemoteDesc')}
-                    status={remoteControlEnabled ? t('settings.statusInProgress') : t('settings.statusPlanned')}
-                    metric="SSH / Tailscale"
-                    connected={remoteControlEnabled}
-                  />
-                  <ExecutionTargetCard
-                    icon={<Server size={18} />}
-                    title={t('settings.schedulerRouteCloud')}
-                    description={t('settings.schedulerRouteCloudDesc')}
-                    status={t('settings.statusPlanned')}
-                    metric="Cloud Edge"
-                  />
-                </div>
-              </div>
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.schedulerPolicy')}</strong>
-                  <span>{t('settings.schedulerPolicyDesc')}</span>
-                </div>
-                <div className={styles.capabilityGrid}>
-                  <CapabilityCard
-                    title={t('settings.schedulerPolicyModelMapping')}
-                    description={t('settings.schedulerPolicyModelMappingDesc')}
-                    status={modelMappingEnabled ? t('settings.enabled') : t('settings.notConfigured')}
-                  />
-                  <CapabilityCard
-                    title={t('settings.schedulerPolicyCcSwitch')}
-                    description={t('settings.schedulerPolicyCcSwitchDesc')}
-                    status={ccSwitchBridge ? t('settings.enabled') : t('settings.statusPlanned')}
-                  />
-                  <CapabilityCard
-                    title={t('settings.schedulerPolicyRemote')}
-                    description={t('settings.schedulerPolicyRemoteDesc')}
-                    status={remoteControlEnabled ? t('settings.enabled') : t('settings.statusPlanned')}
-                  />
-                  <CapabilityCard
-                    title={t('settings.schedulerPolicyApproval')}
-                    description={t('settings.schedulerPolicyApprovalDesc')}
-                    status={autoReview ? t('settings.enabled') : t('settings.approvalMode.manual')}
-                  />
-                </div>
-              </div>
-              <Callout title={t('settings.schedulerGuard')} body={t('settings.schedulerGuardDesc')} />
-            </Panel>
-          )}
-
-          {active === 'agentMarket' && (
-            <Panel title={t('settings.agentMarket')} description={t('settings.agentMarketDesc')}>
-              <div className={styles.summaryGrid}>
-                <SummaryCard
-                  icon={<Bot size={18} />}
-                  label={t('settings.marketLocalProfiles')}
-                  value={`${agents.length}`}
-                  detail={edgeOnline ? t('settings.marketLocalProfilesDesc') : t('settings.edgeOffline')}
-                />
-                <SummaryCard
-                  icon={<ShieldCheck size={18} />}
-                  label={t('settings.marketPublishReady')}
-                  value={`${marketPublishReady}/${agents.length}`}
-                  detail={t('settings.marketPublishReadyDesc')}
-                />
-                <SummaryCard
-                  icon={<Code2 size={18} />}
-                  label={t('settings.marketCapabilities')}
-                  value={`${marketCapabilityCount}`}
-                  detail={t('settings.marketCapabilitiesDesc')}
-                />
-                <SummaryCard
-                  icon={<Globe2 size={18} />}
-                  label={t('settings.marketHubSync')}
-                  value={hubAuthenticated ? t('settings.enabled') : t('settings.notConfigured')}
-                  detail={hubAuthenticated ? t('settings.marketHubSyncDesc') : t('settings.marketHubSyncSignedOut')}
-                />
-              </div>
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.marketInstalledProfiles')}</strong>
-                  <span>{t('settings.marketInstalledProfilesDesc')}</span>
-                </div>
-                {agents.length > 0 ? (
-                  <div className={styles.profileGrid}>
-                    {agents.map((agent) => (
-                      <AgentMarketCard key={`market-${agent.id}`} agent={agent} />
-                    ))}
-                  </div>
-                ) : (
-                  <EmptyBlock title={t('settings.marketNoProfiles')} description={t('settings.marketNoProfilesDesc')} />
-                )}
-              </div>
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.marketReleaseReadiness')}</strong>
-                  <span>{t('settings.marketReleaseReadinessDesc')}</span>
-                </div>
-                <div className={styles.capabilityGrid}>
-                  <CapabilityCard
-                    title={t('settings.agentTemplates')}
-                    description={t('settings.agentTemplatesDesc')}
-                    status={agents.length > 0 ? t('settings.statusInProgress') : t('settings.statusPlanned')}
-                  />
-                  <CapabilityCard
-                    title={t('settings.agentCapabilityTags')}
-                    description={t('settings.agentCapabilityTagsDesc')}
-                    status={marketCapabilityCount > 0 ? t('settings.statusReady') : t('settings.statusPlanned')}
-                  />
-                  <CapabilityCard
-                    title={t('settings.agentReviewFlow')}
-                    description={t('settings.agentReviewFlowDesc')}
-                    status={autoReview ? t('settings.statusInProgress') : t('settings.statusPlanned')}
-                  />
-                  <CapabilityCard
-                    title={t('settings.marketTokenDancePublish')}
-                    description={t('settings.marketTokenDancePublishDesc')}
-                    status={hubAuthenticated ? t('settings.statusInProgress') : t('settings.notConfigured')}
-                  />
-                </div>
-              </div>
-              <Callout title={t('settings.marketGuard')} body={t('settings.marketGuardDesc')} />
-            </Panel>
-          )}
-
-          {active === 'keyboard' && (
-            <Panel title={t('settings.keyboard')} description={t('settings.keyboardDesc')}>
-              <div className={styles.shortcutTable}>
-                {shortcuts.map((shortcut) => (
-                  <div key={`${shortcut.keys.join('+')}-${shortcut.action}`} className={styles.shortcutRow}>
-                    <span>{shortcut.action}</span>
-                    <div>
-                      {shortcut.keys.map((key) => (
-                        <kbd key={key}>{key}</kbd>
-                      ))}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </Panel>
-          )}
-
-          {active === 'mcp' && (
-            <Panel title={t('settings.mcp')} description={t('settings.mcpDesc')}>
-              <div className={styles.summaryGrid}>
-                <SummaryCard
-                  icon={<Plug size={18} />}
-                  label={t('settings.mcpRuntimeSupport')}
-                  value={`${mcpCapableAgents}/${agents.length}`}
-                  detail={edgeOnline ? t('settings.mcpRuntimeSupportDesc') : t('settings.edgeOffline')}
-                />
-                <SummaryCard
-                  icon={<ShieldCheck size={18} />}
-                  label={t('settings.mcpPermissionHooks')}
-                  value={`${mcpPermissionHookAgents}`}
-                  detail={t('settings.mcpPermissionHooksDesc')}
-                />
-                <SummaryCard
-                  icon={<Bot size={18} />}
-                  label={t('settings.mcpSubAgentSpawn')}
-                  value={`${mcpSubAgentAgents}`}
-                  detail={t('settings.mcpSubAgentSpawnDesc')}
-                />
-                <SummaryCard
-                  icon={<Globe2 size={18} />}
-                  label={t('settings.mcpHubSync')}
-                  value={hubAuthenticated && enableMcp ? t('settings.enabled') : t('settings.notConfigured')}
-                  detail={hubAuthenticated ? t('settings.mcpHubSyncDesc') : t('settings.mcpHubSyncSignedOut')}
-                />
-              </div>
-              <SettingRow
-                title={t('settings.enableMcp')}
-                description={t('settings.enableMcpDesc')}
-                control={<Switch checked={enableMcp} onChange={setBooleanSetting('enableMcp', setEnableMcp)} />}
-              />
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.mcpRuntimeMatrix')}</strong>
-                  <span>{t('settings.mcpRuntimeMatrixDesc')}</span>
-                </div>
-                {agents.length > 0 ? (
-                  <div className={styles.profileGrid}>
-                    {agents.map((agent) => (
-                      <McpRuntimeCard key={`mcp-${agent.id}`} agent={agent} />
-                    ))}
-                  </div>
-                ) : (
-                  <EmptyBlock title={t('settings.mcpNoRuntimes')} description={t('settings.mcpNoRuntimesDesc')} />
-                )}
-              </div>
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.mcpTemplates')}</strong>
-                  <span>{t('settings.mcpTemplatesDesc')}</span>
-                </div>
-                <div className={styles.capabilityGrid}>
-                  <CapabilityCard
-                    title="Filesystem"
-                    description={t('settings.mcpFilesystem')}
-                    status={t('settings.mcpTemplate')}
-                  />
-                  <CapabilityCard
-                    title="GitHub"
-                    description={t('settings.mcpGitHub')}
-                    status={t('settings.notConfigured')}
-                  />
-                  <CapabilityCard
-                    title={t('settings.mcpTokenDanceHub')}
-                    description={t('settings.mcpTokenDanceHubDesc')}
-                    status={hubAuthenticated ? t('settings.statusInProgress') : t('settings.notConfigured')}
-                  />
-                  <CapabilityCard
-                    title={t('settings.mcpRemoteServer')}
-                    description={t('settings.mcpRemoteServerDesc')}
-                    status={t('settings.statusPlanned')}
-                  />
-                </div>
-              </div>
-              <Callout title={t('settings.mcpGuard')} body={t('settings.mcpGuardDesc')} />
-            </Panel>
-          )}
-
-          {active === 'skills' && (
-            <Panel title={t('settings.skills')} description={t('settings.skillsDesc')}>
-              <div className={styles.summaryGrid}>
-                <SummaryCard
-                  icon={<Code2 size={18} />}
-                  label={t('settings.skillProjectRegistry')}
-                  value={`${PROJECT_SKILLS.length}`}
-                  detail={t('settings.skillProjectRegistryDesc')}
-                />
-                <SummaryCard
-                  icon={<ShieldCheck size={18} />}
-                  label={t('settings.skillReviewReady')}
-                  value={`${skillReadyCount}/${PROJECT_SKILLS.length}`}
-                  detail={t('settings.skillReviewReadyDesc')}
-                />
-                <SummaryCard
-                  icon={<TerminalSquare size={18} />}
-                  label={t('settings.skillScripts')}
-                  value={`${skillScriptCount}`}
-                  detail={t('settings.skillScriptsDesc')}
-                />
-                <SummaryCard
-                  icon={<Globe2 size={18} />}
-                  label={t('settings.skillHubSync')}
-                  value={hubAuthenticated && skillSync ? t('settings.enabled') : t('settings.notConfigured')}
-                  detail={hubAuthenticated ? t('settings.skillHubSyncDesc') : t('settings.skillHubSyncSignedOut')}
-                />
-              </div>
-              <SettingRow
-                title={t('settings.skillSync')}
-                description={t('settings.skillSyncDesc')}
-                control={<Switch checked={skillSync} onChange={setBooleanSetting('skillSync', setSkillSync)} />}
-              />
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.skillInstalled')}</strong>
-                  <span>{t('settings.skillInstalledDesc')}</span>
-                </div>
-                <div className={styles.profileGrid}>
-                  {PROJECT_SKILLS.map((skill) => (
-                    <ProjectSkillCard key={skill.id} skill={skill} />
-                  ))}
-                </div>
-              </div>
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.skillGovernance')}</strong>
-                  <span>{t('settings.skillGovernanceDesc')}</span>
-                </div>
-                <div className={styles.capabilityGrid}>
-                  <CapabilityCard
-                    title={t('settings.skillLocalRegistry')}
-                    description={t('settings.skillLocalRegistryDesc')}
-                    status=".agents/skills"
-                  />
-                  <CapabilityCard
-                    title={t('settings.skillReview')}
-                    description={t('settings.skillReviewDesc')}
-                    status={`${skillReadyCount}/${PROJECT_SKILLS.length}`}
-                  />
-                  <CapabilityCard
-                    title={t('settings.skillScriptAudit')}
-                    description={t('settings.skillScriptAuditDesc')}
-                    status={`${skillScriptCount}`}
-                  />
-                  <CapabilityCard
-                    title={t('settings.skillReferences')}
-                    description={t('settings.skillReferencesDesc')}
-                    status={`${skillReferenceCount}`}
-                  />
-                </div>
-              </div>
-              <Callout title={t('settings.skillGuard')} body={t('settings.skillGuardDesc')} />
-            </Panel>
-          )}
-
-          {active === 'hooks' && (
-            <Panel title={t('settings.hooks')} description={t('settings.hooksDesc')}>
-              <SettingRow
-                title={t('settings.enableHooks')}
-                description={t('settings.enableHooksDesc')}
-                control={<Switch checked={enableHooks} onChange={setBooleanSetting('enableHooks', setEnableHooks)} />}
-              />
-              <SettingRow title="pre-run" description={t('settings.hookPreRun')} value={t('settings.notConfigured')} />
-              <SettingRow title="post-run" description={t('settings.hookPostRun')} value={t('settings.notConfigured')} />
-            </Panel>
-          )}
-
-          {active === 'models' && (
-            <Panel title={t('settings.models')} description={t('settings.modelsDesc')}>
-              <SettingRow
-                title={t('settings.modelDefault')}
-                description={t('settings.modelDefaultDesc')}
-                control={
-                  <SelectControl
-                    value={defaultModel}
-                    options={MODEL_OPTIONS.map(([value, label]) => [value, label])}
-                    onChange={setDefaultModel}
-                  />
-                }
-              />
-              <SettingRow
-                title={t('settings.modelDefaultProvider')}
-                description={t('settings.modelDefaultProviderDesc')}
-                control={
-                  <SelectControl
-                    value={defaultProvider}
-                    options={PROVIDER_OPTIONS.map(([value, label]) => [value, label])}
-                    onChange={setDefaultProvider}
-                  />
-                }
-              />
-              <SettingRow
-                title={t('settings.modelReasoning')}
-                description={t('settings.modelReasoningDesc')}
-                control={
-                  <SelectControl
-                    value={modelReasoningEffort}
-                    options={REASONING_OPTIONS.map(([value, label]) => [value, label])}
-                    onChange={(value) => setModelReasoningEffort(value as ReasoningEffortPreference)}
-                  />
-                }
-              />
-              <SettingRow
-                title={t('settings.modelProviderFallback')}
-                description={t('settings.modelProviderFallbackDesc')}
-                control={<Switch checked={providerFallbackEnabled} onChange={setProviderFallbackEnabled} />}
-              />
-              <Callout title={t('settings.modelLocalGuard')} body={t('settings.modelLocalGuardDesc')} />
-            </Panel>
-          )}
-
-          {active === 'modelMapping' && (
-            <Panel title={t('settings.modelMapping')} description={t('settings.modelMappingDesc')}>
-              <SettingRow
-                title={t('settings.enableModelMapping')}
-                description={t('settings.enableModelMappingDesc')}
-                control={<Switch checked={modelMappingEnabled} onChange={setModelMappingEnabled} />}
-              />
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.modelAlias')}</strong>
-                  <span>{t('settings.modelAliasDesc')}</span>
-                </div>
-                <div className={styles.modelAliasList}>
-                  {modelAliases.map((item) => (
-                    <AliasMappingRow
-                      key={item.alias}
-                      alias={item.alias}
-                      model={item.model}
-                      provider={item.provider}
-                      reasoningEffort={item.reasoningEffort}
-                      enabled={item.enabled}
-                      onToggle={() => toggleModelAlias(item.alias)}
-                      onModelChange={(model) => updateModelAlias(item.alias, { model })}
-                      onProviderChange={(provider) => updateModelAlias(item.alias, { provider })}
-                      onReasoningChange={(reasoningEffort) => updateModelAlias(item.alias, { reasoningEffort })}
-                    />
-                  ))}
-                </div>
-              </div>
-              <Callout title={t('settings.modelPolicy')} body={t('settings.modelPolicyDesc')} />
-            </Panel>
-          )}
-
-          {active === 'ccSwitch' && (
-            <Panel title={t('settings.ccSwitch')} description={t('settings.ccSwitchDesc')}>
-              <SettingRow
-                title={t('settings.ccSwitchBridge')}
-                description={t('settings.ccSwitchBridgeDesc')}
-                control={<Switch checked={ccSwitchBridge} onChange={setCcSwitchBridge} />}
-              />
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.ccSwitchProviders')}</strong>
-                  <span>{t('settings.ccSwitchProvidersDesc')}</span>
-                </div>
-                <div className={styles.providerList}>
-                  {ccSwitchProviders.map((provider) => (
-                    <ProviderHealthRow
-                      key={provider.id}
-                      id={provider.id}
-                      name={provider.name}
-                      health={provider.health}
-                      modelCount={provider.modelCount}
-                      notes={provider.notes}
-                      onHealthChange={(health) => updateCcSwitchProvider(provider.id, { health })}
-                      onNotesChange={(notes) => updateCcSwitchProvider(provider.id, { notes })}
-                    />
-                  ))}
-                </div>
-              </div>
-              <Callout title={t('settings.ccSwitchHealth')} body={t('settings.ccSwitchHealthDesc')} />
-            </Panel>
-          )}
-
-          {active === 'connections' && (
-            <Panel title={t('settings.connections')} description={t('settings.connectionsDesc')}>
-              <ConnectionRow
-                name="Hub"
-                description={hubAuthenticated ? t('status.hubConnected') : t('status.hubDisconnected')}
-                connected={hubAuthenticated}
-              />
-              <ConnectionRow name="Edge" description={`${t('settings.edgeLocal')} · ${runnerSummary}`} connected={edgeOnline} />
-              <ConnectionRow name="WebSocket" description={t('status.wsConnected')} connected={edgeOnline} />
-            </Panel>
-          )}
-
-          {active === 'remoteControl' && (
-            <Panel title={t('settings.remoteControl')} description={t('settings.remoteControlDesc')}>
-              <SettingRow
-                title={t('settings.remoteControlEnable')}
-                description={t('settings.remoteControlEnableDesc')}
-                control={<Switch checked={remoteControlEnabled} onChange={setBooleanSetting('remoteControl', setRemoteControlEnabled)} />}
-              />
-              <SettingRow title={t('settings.remoteControlApproval')} description={t('settings.remoteControlApprovalDesc')} value={t('settings.approvalMode.ask')} />
-              <SettingRow title={t('settings.remoteControlDevices')} description={t('settings.remoteControlDevicesDesc')} value={t('settings.statusPlanned')} />
-            </Panel>
-          )}
-
-          {active === 'git' && (
-            <Panel title={t('settings.git')} description={t('settings.gitDesc')}>
-              <SettingRow
-                title={t('settings.autoDetectGit')}
-                description={t('settings.autoDetectGitDesc')}
-                control={
-                  <Switch checked={autoDetectGit} onChange={setBooleanSetting('autoDetectGit', setAutoDetectGit)} />
-                }
-              />
-              <SettingRow title={t('settings.branchPolicy')} description="feat/* -> dev/delicious233 -> master" />
-              <SettingRow title={t('settings.commitStyle')} description="type(scope): summary" />
-            </Panel>
-          )}
-
-          {active === 'environment' && (
-            <Panel title={t('settings.environment')} description={t('settings.environmentDesc')}>
-              <SettingRow title="Shell" description="PowerShell 7" value="pwsh" />
-              <SettingRow title="Node" description={t('settings.environmentNodeDesc')} value="pnpm" />
-              <SettingRow title="Tauri" description={t('settings.environmentTauriDesc')} value={t('settings.enabled')} />
-            </Panel>
-          )}
-
-          {active === 'worktree' && (
-            <Panel title={t('settings.worktree')} description={t('settings.worktreeDesc')}>
-              <SettingRow title={t('settings.defaultWorkspace')} description="D:\\Code\\TokenDance" />
-              <SettingRow
-                title={t('settings.worktreeIsolation')}
-                description={t('settings.worktreeIsolationDesc')}
-                control={
-                  <Switch
-                    checked={worktreeIsolation}
-                    onChange={setBooleanSetting('worktreeIsolation', setWorktreeIsolation)}
-                  />
-                }
-              />
-              <SettingRow title={t('settings.worktreePolicy')} description=".worktrees/<feature>" />
-            </Panel>
-          )}
-
-          {active === 'browser' && (
-            <Panel title={t('settings.browser')} description={t('settings.browserDesc')}>
-              <SettingRow
-                title={t('settings.browserPreview')}
-                description={t('settings.browserPreviewDesc')}
-                control={
-                  <Switch checked={browserPreview} onChange={setBooleanSetting('browserPreview', setBrowserPreview)} />
-                }
-              />
-              <SettingRow title={t('settings.browserEngine')} description="Chromium / Playwright" value="Auto" />
-            </Panel>
-          )}
-
-          {active === 'computerUse' && (
-            <Panel title={t('settings.computerUse')} description={t('settings.computerUseDesc')}>
-              <SettingRow
-                title={t('settings.computerConfirm')}
-                description={t('settings.computerConfirmDesc')}
-                control={
-                  <Switch
-                    checked={computerConfirm}
-                    onChange={setBooleanSetting('computerConfirm', setComputerConfirm)}
-                  />
-                }
-              />
-              <Callout title={t('settings.computerUseGuard')} body={t('settings.computerUseGuardDesc')} />
-            </Panel>
-          )}
-
-          {active === 'platforms' && (
-            <Panel title={t('settings.platforms')} description={t('settings.platformsDesc')}>
-              <SettingRow
-                title={t('settings.platformSync')}
-                description={t('settings.platformSyncDesc')}
-                control={<Switch checked={platformSync} onChange={setBooleanSetting('platformSync', setPlatformSync)} />}
-              />
-              <div className={styles.capabilityGrid}>
-                <CapabilityCard title="macOS" description={t('settings.platformMacosDesc')} status={t('settings.statusReady')} />
-                <CapabilityCard title="Windows" description={t('settings.platformWindowsDesc')} status={t('settings.statusReady')} />
-                <CapabilityCard title="Android" description={t('settings.platformAndroidDesc')} status={t('settings.statusPlanned')} />
-                <CapabilityCard title="Web" description={t('settings.platformWebDesc')} status={t('settings.statusPlanned')} />
-              </div>
-            </Panel>
-          )}
-
-          {active === 'account' && (
-            <Panel title={t('settings.account')} description={t('settings.accountDesc')}>
-              <div className={styles.accountCard}>
-                <UserCircle size={34} />
-                <div className={styles.accountInfo}>
-                  <strong>{hubSessionActive ? accountName : t('settings.notSignedIn')}</strong>
-                  <span>{hubSessionActive ? t('settings.accountConnected') : t('settings.accountDisconnected')}</span>
-                </div>
-                {hubSessionActive ? (
-                  <button className={styles.secondaryBtn} onClick={handleSignOut}>
-                    <LogOut size={16} />
-                    {t('settings.signOut')}
-                  </button>
-                ) : (
-                  <button className={styles.primaryBtn} onClick={onOpenAuth}>
-                    <LogIn size={16} />
-                    {t('settings.signIn')}
-                  </button>
-                )}
-              </div>
-              <div className={styles.summaryGrid}>
-                <SummaryCard
-                  icon={<LockKeyhole size={18} />}
-                  label={t('settings.hubSession')}
-                  value={hubSessionActive ? t('settings.enabled') : t('settings.notConfigured')}
-                  detail={hubSessionActive ? t('settings.hubSessionDesc') : t('settings.hubSessionSignedOutDesc')}
-                />
-                <SummaryCard
-                  icon={<Globe2 size={18} />}
-                  label="TokenDance ID"
-                  value={tokenSource === 'tokendance' ? t('settings.enabled') : t('settings.statusInProgress')}
-                  detail={tokenSource === 'tokendance' ? t('settings.tokenDanceSessionDesc') : t('settings.tokenDanceOidcPendingDesc')}
-                />
-                <SummaryCard
-                  icon={<Monitor size={18} />}
-                  label={t('settings.desktopDevice')}
-                  value={deviceId ? shortId(deviceId) : t('settings.notConfigured')}
-                  detail={deviceId ? t('settings.desktopDeviceDesc') : t('settings.desktopDeviceMissingDesc')}
-                />
-                <SummaryCard
-                  icon={<Route size={18} />}
-                  label={t('settings.syncScope')}
-                  value={hubSessionActive ? 'Hub' : t('settings.notConfigured')}
-                  detail={t('settings.syncScopeDesc')}
-                />
-              </div>
-              <div className={styles.taskSection}>
-                <div className={styles.taskSectionHeader}>
-                  <strong>{t('settings.identityBoundary')}</strong>
-                  <span>{t('settings.identityBoundaryDesc')}</span>
-                </div>
-                <div className={styles.capabilityGrid}>
-                  <CapabilityCard
-                    title={t('settings.hubSession')}
-                    description={t('settings.hubSessionCapabilityDesc')}
-                    status={hubSessionActive ? t('settings.statusReady') : t('settings.notConfigured')}
-                  />
-                  <CapabilityCard
-                    title="TokenDance ID OIDC"
-                    description={t('settings.tokenDanceOidcDesc')}
-                    status={tokenDanceOidcStatus}
-                  />
-                  <CapabilityCard
-                    title={t('settings.authTokenSource')}
-                    description={t('settings.authTokenSourceDesc')}
-                    status={tokenSourceLabel}
-                  />
-                  <CapabilityCard
-                    title={t('settings.deviceProof')}
-                    description={t('settings.deviceProofDesc')}
-                    status={deviceId ? t('settings.statusInProgress') : t('settings.notConfigured')}
-                  />
-                </div>
-              </div>
-              <SettingRow title={t('settings.hubEndpoint')} description={HUB_URL} value={hubSessionActive ? t('settings.enabled') : t('settings.notConfigured')} />
-              <SettingRow title={t('settings.appVersion')} description={APP_VERSION} value={t('settings.statusReady')} />
-              <Callout title={t('settings.accountGuard')} body={t('settings.accountGuardDesc')} />
-            </Panel>
-          )}
-
-          {active === 'securityAudit' && (
-            <Panel title={t('settings.securityAudit')} description={t('settings.securityAuditDesc')}>
-              <SettingRow
-                title={t('settings.auditTrail')}
-                description={t('settings.auditTrailDesc')}
-                control={<Switch checked={auditTrail} onChange={setBooleanSetting('auditTrail', setAuditTrail)} />}
-              />
-              <SettingRow title={t('settings.permissionLedger')} description={t('settings.permissionLedgerDesc')} value={t('settings.statusPlanned')} />
-              <SettingRow title={t('settings.secretScan')} description={t('settings.secretScanDesc')} value={t('settings.statusPlanned')} />
-              <Callout title={t('settings.securityGuard')} body={t('settings.securityGuardDesc')} />
-            </Panel>
-          )}
-
-          {active === 'archived' && (
-            <Panel title={t('settings.archived')} description={t('settings.archivedDesc')}>
-              <EmptyBlock title={t('settings.noArchived')} description={t('settings.noArchivedDesc')} />
-            </Panel>
-          )}
+          {renderSection(active)}
         </div>
       </main>
     </div>
   );
 }
-
-function useStoredBooleanState(key: string, fallback: boolean) {
-  return useState(() => readStoredBoolean(key, fallback));
-}
-
-function useStoredValueState<T extends string>(key: string, fallback: T) {
-  return useState<T>(() => readStoredValue(key, fallback));
-}
-
-function isActiveRun(run: RunInfo) {
-  return ['queued', 'started', 'running', 'cancelling'].includes(run.status);
-}
-
-function isActiveBridgeTask(task: AgentTask) {
-  return task.status === 'queued' || task.status === 'running';
-}
-
-function getRecentRuns(runs: RunInfo[], limit: number) {
-  return [...runs]
-    .sort((a, b) => timestampOf(b.finishedAt ?? b.startedAt ?? b.createdAt) - timestampOf(a.finishedAt ?? a.startedAt ?? a.createdAt))
-    .slice(0, limit);
-}
-
-function getRecentTasks(tasks: AgentTask[], limit: number) {
-  return [...tasks].sort((a, b) => timestampOf(b.createdAt) - timestampOf(a.createdAt)).slice(0, limit);
-}
-
-function countAgentCapabilities(agents: AgentInfo[]) {
-  const names = new Set<string>();
-  for (const agent of agents) {
-    for (const [name, enabled] of Object.entries(agent.capabilities)) {
-      if (enabled) names.add(name);
-    }
-  }
-  return names.size;
-}
-
-function timestampOf(value?: string) {
-  if (!value) return 0;
-  const parsed = Date.parse(value);
-  return Number.isNaN(parsed) ? 0 : parsed;
-}
-
-function formatTimestamp(value?: string) {
-  if (!value) return '--';
-  const parsed = new Date(value);
-  if (Number.isNaN(parsed.getTime())) return value;
-  return parsed.toLocaleString(undefined, {
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-}
-
-function shortId(value?: string) {
-  if (!value) return '--';
-  return value.length > 14 ? `${value.slice(0, 8)}...${value.slice(-4)}` : value;
-}
-
-function Panel({ title, description, children }: { title: string; description?: string; children: ReactNode }) {
-  return (
-    <section className={styles.panel}>
-      <div className={styles.panelHeader}>
-        <h2>{title}</h2>
-        {description ? <p>{description}</p> : null}
-      </div>
-      <div className={styles.panelBody}>{children}</div>
-    </section>
-  );
-}
-
-function TaskRunRow({
-  run,
-  onCancel,
-  cancelling = false,
-}: {
-  run: RunInfo;
-  onCancel?: (runId: string) => void;
-  cancelling?: boolean;
-}) {
-  const { t } = useTranslation();
-  const timestamp = run.finishedAt ?? run.startedAt ?? run.createdAt;
-  return (
-    <div className={styles.taskRow}>
-      <div className={styles.connectionIcon}>
-        <Route size={17} />
-      </div>
-      <div className={styles.settingCopy}>
-        <strong>{shortId(run.runId)}</strong>
-        <span>{run.projectId} / {run.threadId}</span>
-        <div className={styles.taskMeta}>
-          <span>{formatTimestamp(timestamp)}</span>
-        </div>
-      </div>
-      <span className={`${styles.statusPill} ${isActiveRun(run) ? styles.statusPillOn : ''}`}>
-        {t(`run.status.${run.status}`, { defaultValue: run.status })}
-      </span>
-      {onCancel ? (
-        <button
-          type="button"
-          className={`${styles.secondaryBtn} ${styles.taskRowAction}`}
-          onClick={() => onCancel(run.runId)}
-          disabled={cancelling}
-          aria-label={t('settings.taskCancelRun')}
-          title={t('settings.taskCancelRun')}
-        >
-          <XCircle size={15} />
-          {cancelling ? t('settings.taskCancellingRun') : t('settings.taskCancelRun')}
-        </button>
-      ) : null}
-    </div>
-  );
-}
-
-function HubTaskRow({ task }: { task: AgentTask }) {
-  const { t } = useTranslation();
-  return (
-    <div className={styles.taskRow}>
-      <div className={styles.connectionIcon}>
-        <ClipboardList size={17} />
-      </div>
-      <div className={styles.settingCopy}>
-        <strong>{shortId(task.taskId)}</strong>
-        <span>{task.prompt}</span>
-        <div className={styles.taskMeta}>
-          <span>{task.agentId}</span>
-          <span>{task.runId ? shortId(task.runId) : t('settings.taskUnbound')}</span>
-        </div>
-      </div>
-      <span className={`${styles.statusPill} ${isActiveBridgeTask(task) ? styles.statusPillOn : ''}`}>
-        {t(`settings.taskStatus.${task.status}`, { defaultValue: task.status })}
-      </span>
-    </div>
-  );
-}
-
-function ModeCard({
-  active,
-  icon,
-  title,
-  description,
-  onClick,
-}: {
-  active: boolean;
-  icon: ReactNode;
-  title: string;
-  description: string;
-  onClick: () => void;
-}) {
-  return (
-    <button className={`${styles.modeCard} ${active ? styles.modeCardActive : ''}`} onClick={onClick}>
-      {icon}
-      <span>
-        <strong>{title}</strong>
-        <small>{description}</small>
-      </span>
-      {active ? <Check size={16} className={styles.modeCheck} /> : null}
-    </button>
-  );
-}
-
-function CapabilityCard({ title, description, status }: { title: string; description: string; status: string }) {
-  return (
-    <div className={styles.capabilityCard}>
-      <strong>{title}</strong>
-      <span>{description}</span>
-      <em>{status}</em>
-    </div>
-  );
-}
-
-function SummaryCard({ icon, label, value, detail }: { icon: ReactNode; label: string; value: string; detail: string }) {
-  return (
-    <div className={styles.summaryCard}>
-      <div className={styles.summaryIcon}>{icon}</div>
-      <div>
-        <span>{label}</span>
-        <strong>{value}</strong>
-        <small>{detail}</small>
-      </div>
-    </div>
-  );
-}
-
-function AliasMappingRow({
-  alias,
-  model,
-  provider,
-  reasoningEffort,
-  enabled,
-  onToggle,
-  onModelChange,
-  onProviderChange,
-  onReasoningChange,
-}: {
-  alias: string;
-  model: string;
-  provider: string;
-  reasoningEffort: ReasoningEffortPreference;
-  enabled: boolean;
-  onToggle: () => void;
-  onModelChange: (model: string) => void;
-  onProviderChange: (provider: string) => void;
-  onReasoningChange: (reasoningEffort: ReasoningEffortPreference) => void;
-}) {
-  const { t } = useTranslation();
-  return (
-    <div className={styles.modelAliasRow}>
-      <div className={styles.modelAliasHead}>
-        <div>
-          <strong>{alias}</strong>
-          <span>{t('settings.modelAliasRoute', { model, provider })}</span>
-        </div>
-        <Switch checked={enabled} onChange={onToggle} />
-      </div>
-      <div className={styles.modelAliasControls}>
-        <label>
-          <span>{t('settings.modelAliasModel')}</span>
-          <SelectControl
-            value={model}
-            options={MODEL_OPTIONS.filter(([value]) => value !== 'auto').map(([value, label]) => [value, label])}
-            onChange={onModelChange}
-          />
-        </label>
-        <label>
-          <span>{t('settings.modelAliasProvider')}</span>
-          <SelectControl
-            value={provider}
-            options={PROVIDER_OPTIONS.map(([value, label]) => [value, label])}
-            onChange={onProviderChange}
-          />
-        </label>
-        <label>
-          <span>{t('settings.modelAliasReasoning')}</span>
-          <SelectControl
-            value={reasoningEffort}
-            options={REASONING_OPTIONS.map(([value, label]) => [value, label])}
-            onChange={(value) => onReasoningChange(value as ReasoningEffortPreference)}
-          />
-        </label>
-      </div>
-    </div>
-  );
-}
-
-function ProviderHealthRow({
-  id,
-  name,
-  health,
-  modelCount,
-  notes,
-  onHealthChange,
-  onNotesChange,
-}: {
-  id: string;
-  name: string;
-  health: ProviderHealth;
-  modelCount: number;
-  notes: string;
-  onHealthChange: (health: ProviderHealth) => void;
-  onNotesChange: (notes: string) => void;
-}) {
-  const { t } = useTranslation();
-  return (
-    <div className={styles.providerRow}>
-      <div className={styles.providerMain}>
-        <div className={styles.connectionIcon}>
-          <Plug size={17} />
-        </div>
-        <div className={styles.settingCopy}>
-          <strong>{name}</strong>
-          <span>{id}</span>
-          <div className={styles.taskMeta}>
-            <span>{t('settings.ccSwitchModelCount', { count: modelCount })}</span>
-          </div>
-        </div>
-        <span className={`${styles.statusPill} ${health === 'ready' ? styles.statusPillOn : ''}`}>
-          {t(`settings.providerHealth.${health}`)}
-        </span>
-      </div>
-      <div className={styles.providerControls}>
-        <label>
-          <span>{t('settings.ccSwitchHealth')}</span>
-          <SelectControl
-            value={health}
-            options={PROVIDER_HEALTH_OPTIONS.map(([value, label]) => [value, label])}
-            onChange={(value) => onHealthChange(value as ProviderHealth)}
-          />
-        </label>
-        <label>
-          <span>{t('settings.ccSwitchNotes')}</span>
-          <textarea
-            className={styles.textInput}
-            value={notes}
-            onChange={(event) => onNotesChange(event.target.value)}
-          />
-        </label>
-      </div>
-    </div>
-  );
-}
-
-function RuntimeInventoryCard({ agent }: { agent: AgentInfo }) {
-  const { t } = useTranslation();
-  return (
-    <div className={styles.profileCard}>
-      <div className={styles.profileHeader}>
-        <div className={styles.profileIcon}>
-          <Bot size={17} />
-        </div>
-        <div>
-          <strong>{agent.name}</strong>
-          <span>{agent.description || t('settings.runtimeDefaultDesc')}</span>
-        </div>
-        <em className={`${styles.profileStatus} ${styles[`profileStatus_${agent.status}`]}`}>
-          {t(`agent.status.${agent.status}`)}
-        </em>
-      </div>
-      <div className={styles.profileMeta}>
-        <span>{t('settings.runtimeAdapter')}: {agent.id}</span>
-        <span>{t('settings.profileRuntime')}: {t('settings.statusReady')}</span>
-        <span>{t('settings.profileModel')}: {t('settings.statusPlanned')}</span>
-        <span>{t('settings.profileConfig')}: {t('settings.statusPlanned')}</span>
-      </div>
-    </div>
-  );
-}
-
-function LocalAgentProfileCard({
-  agent,
-  alias,
-  route,
-  edgeOnline,
-}: {
-  agent: AgentInfo;
-  alias?: string;
-  route: ResolvedRunModelSettings;
-  edgeOnline: boolean;
-}) {
-  const { t } = useTranslation();
-  const profileReady = edgeOnline && agent.status === 'available';
-  return (
-    <div className={styles.profileCard}>
-      <div className={styles.profileHeader}>
-        <div className={styles.profileIcon}>
-          <Bot size={17} />
-        </div>
-        <div>
-          <strong>{t('settings.localProfileName', { runtime: agent.name })}</strong>
-          <span>{t('settings.localProfileDesc')}</span>
-        </div>
-        <em className={`${styles.profileStatus} ${profileReady ? styles.profileStatus_available : styles.profileStatus_configuring}`}>
-          {profileReady ? t('settings.enabled') : t('settings.notConfigured')}
-        </em>
-      </div>
-      <div className={styles.profileMeta}>
-        <span>{t('settings.profileRuntime')}: {agent.id}</span>
-        <span>{t('settings.profileModel')}: {route.model ?? t('prompt.routeAuto')}</span>
-        <span>{t('settings.modelAliasProvider')}: {route.provider ?? t('prompt.routeAuto')}</span>
-        <span>{t('settings.modelAliasReasoning')}: {route.reasoningEffort ?? t('prompt.routeAuto')}</span>
-        {alias ? <span>{t('settings.profileAlias')}: {alias}</span> : null}
-        <span>{t('settings.executionTargets')}: {t('settings.targetLocalEdge')}</span>
-        <span>{t('settings.profileConfigSource')}: AGENTS.md / memory / skills</span>
-      </div>
-    </div>
-  );
-}
-
-function AgentMarketCard({ agent }: { agent: AgentInfo }) {
-  const { t } = useTranslation();
-  const capabilityNames = Object.entries(agent.capabilities)
-    .filter(([, enabled]) => enabled)
-    .map(([name]) => t(`settings.capability.${name}`, { defaultValue: name }));
-
-  return (
-    <div className={styles.profileCard}>
-      <div className={styles.profileHeader}>
-        <div className={styles.profileIcon}>
-          <Bot size={17} />
-        </div>
-        <div>
-          <strong>{agent.name}</strong>
-          <span>{agent.description || t('settings.marketProfileDefaultDesc')}</span>
-        </div>
-        <em className={`${styles.profileStatus} ${styles[`profileStatus_${agent.status}`]}`}>
-          {t(`agent.status.${agent.status}`)}
-        </em>
-      </div>
-      <div className={styles.profileMeta}>
-        <span>{t('settings.profileRuntime')}: {agent.id}</span>
-        <span>{t('settings.marketInstallSource')}: Local Edge</span>
-        <span>{t('settings.marketPublishStatus')}: {agent.status === 'available' ? t('settings.statusInProgress') : t('settings.statusPlanned')}</span>
-      </div>
-      <div className={styles.profileMeta}>
-        {capabilityNames.length > 0 ? (
-          capabilityNames.map((name) => <span key={name}>{name}</span>)
-        ) : (
-          <span>{t('settings.marketNoCapabilityTags')}</span>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function ProjectSkillCard({ skill }: { skill: ProjectSkill }) {
-  const { t } = useTranslation();
-  return (
-    <div className={styles.profileCard}>
-      <div className={styles.profileHeader}>
-        <div className={styles.profileIcon}>
-          <Code2 size={17} />
-        </div>
-        <div>
-          <strong>{skill.title}</strong>
-          <span>{t(skill.descriptionKey)}</span>
-        </div>
-        <em className={`${styles.profileStatus} ${skill.status === 'ready' ? styles.profileStatus_available : styles.profileStatus_configuring}`}>
-          {skill.status === 'ready' ? t('settings.statusReady') : t('settings.statusInProgress')}
-        </em>
-      </div>
-      <div className={styles.profileMeta}>
-        <span>{t('settings.skillLocalRegistry')}: .agents/skills/{skill.id}</span>
-        <span>{t('settings.skillScripts')}: {skill.hasScripts ? t('settings.enabled') : t('settings.notConfigured')}</span>
-        <span>{t('settings.skillReferences')}: {skill.hasReferences ? t('settings.enabled') : t('settings.notConfigured')}</span>
-      </div>
-    </div>
-  );
-}
-
-function McpRuntimeCard({ agent }: { agent: AgentInfo }) {
-  const { t } = useTranslation();
-  const { mcpIntegration, permissionHooks, subAgentSpawn } = agent.capabilities;
-  return (
-    <div className={styles.profileCard}>
-      <div className={styles.profileHeader}>
-        <div className={styles.profileIcon}>
-          <Plug size={17} />
-        </div>
-        <div>
-          <strong>{agent.name}</strong>
-          <span>{agent.description || t('settings.mcpRuntimeDefaultDesc')}</span>
-        </div>
-        <em className={`${styles.profileStatus} ${mcpIntegration ? styles.profileStatus_available : styles.profileStatus_configuring}`}>
-          {mcpIntegration ? t('settings.statusReady') : t('settings.notConfigured')}
-        </em>
-      </div>
-      <div className={styles.profileMeta}>
-        <span>{t('settings.profileRuntime')}: {agent.id}</span>
-        <span>{t('settings.mcpIntegration')}: {mcpIntegration ? t('settings.enabled') : t('settings.notConfigured')}</span>
-        <span>{t('settings.mcpPermissionHooks')}: {permissionHooks ? t('settings.enabled') : t('settings.notConfigured')}</span>
-        <span>{t('settings.mcpSubAgentSpawn')}: {subAgentSpawn ? t('settings.enabled') : t('settings.notConfigured')}</span>
-      </div>
-    </div>
-  );
-}
-
-function ExecutionTargetCard({
-  icon,
-  title,
-  description,
-  status,
-  metric,
-  connected = false,
-}: {
-  icon: ReactNode;
-  title: string;
-  description: string;
-  status: string;
-  metric: string;
-  connected?: boolean;
-}) {
-  return (
-    <div className={styles.targetCard}>
-      <div className={styles.targetTop}>
-        <div className={styles.targetIcon}>{icon}</div>
-        <span className={`${styles.statusPill} ${connected ? styles.statusPillOn : ''}`}>{status}</span>
-      </div>
-      <strong>{title}</strong>
-      <span>{description}</span>
-      <em>{metric}</em>
-    </div>
-  );
-}
-
-function RunnerRow({ runner }: { runner: RunnerHealthItem }) {
-  return (
-    <div className={styles.runnerRow}>
-      <div className={styles.connectionIcon}>
-        <Cpu size={17} />
-      </div>
-      <div className={styles.settingCopy}>
-        <strong>{runner.name}</strong>
-        <span>{runner.capabilities?.join(' / ') || runner.id}</span>
-      </div>
-      <span className={`${styles.statusPill} ${runner.status === 'online' ? styles.statusPillOn : ''}`}>
-        {runner.status}
-      </span>
-    </div>
-  );
-}
-
-function HubExecutionTargetRow({
-  target,
-  pinging,
-  onPing,
-}: {
-  target: ExecutionTarget;
-  pinging: boolean;
-  onPing: (targetId: string) => void;
-}) {
-  const { t } = useTranslation();
-  const health = target.health_state ?? 'unknown';
-  const endpoint = formatTargetEndpoint(target);
-
-  return (
-    <div className={styles.runnerRow}>
-      <div className={styles.connectionIcon}>
-        {target.target_type === 'cloud_edge' ? (
-          <Computer size={17} />
-        ) : target.target_type === 'hub_relay' ? (
-          <Globe2 size={17} />
-        ) : (
-          <Server size={17} />
-        )}
-      </div>
-      <div className={styles.settingCopy}>
-        <strong>{target.name}</strong>
-        <span>{t(`settings.targetType.${target.target_type}`, { defaultValue: target.target_type })}</span>
-        <div className={styles.taskMeta}>
-          {target.trust_level ? (
-            <span>{t(`settings.targetTrust.${target.trust_level}`, { defaultValue: target.trust_level })}</span>
-          ) : null}
-          {endpoint ? <span>{endpoint}</span> : null}
-          <span>
-            {target.last_seen_at
-              ? t('settings.targetLastSeen', { time: formatTimestamp(target.last_seen_at) })
-              : t('settings.targetNeverSeen')}
-          </span>
-        </div>
-      </div>
-      <span className={`${styles.statusPill} ${isHubTargetConnected(target) ? styles.statusPillOn : ''}`}>
-        {t(`settings.targetHealth.${health}`, { defaultValue: health })}
-      </span>
-      <button
-        type="button"
-        className={`${styles.secondaryBtn} ${styles.taskRowAction}`}
-        onClick={() => onPing(target.id)}
-        disabled={pinging}
-        aria-label={t('settings.targetPing')}
-        title={t('settings.targetPing')}
-      >
-        <RefreshCw size={15} />
-        {pinging ? t('settings.targetPinging') : t('settings.targetPing')}
-      </button>
-    </div>
-  );
-}
-
-function SettingRow({
-  title,
-  description,
-  value,
-  control,
-  action,
-}: {
-  title: string;
-  description: string;
-  value?: string;
-  control?: ReactNode;
-  action?: boolean;
-}) {
-  return (
-    <div className={styles.settingRow}>
-      <div className={styles.settingCopy}>
-        <strong>{title}</strong>
-        <span>{description}</span>
-      </div>
-      {control ?? (value ? <span className={styles.settingValue}>{value}</span> : null)}
-      {action ? <ChevronRight size={17} className={styles.rowChevron} /> : null}
-    </div>
-  );
-}
-
-function ConnectionRow({ name, description, connected }: { name: string; description: string; connected: boolean }) {
-  return (
-    <div className={styles.connectionRow}>
-      <div className={styles.connectionIcon}>
-        <Link2 size={17} />
-      </div>
-      <div className={styles.settingCopy}>
-        <strong>{name}</strong>
-        <span>{description}</span>
-      </div>
-      <span className={`${styles.statusPill} ${connected ? styles.statusPillOn : ''}`}>
-        {connected ? 'Online' : 'Offline'}
-      </span>
-    </div>
-  );
-}
-
-function Switch({ checked, onChange }: { checked: boolean; onChange: (checked: boolean) => void }) {
-  return (
-    <button
-      className={`${styles.switch} ${checked ? styles.switchOn : ''}`}
-      role="switch"
-      aria-checked={checked}
-      onClick={() => onChange(!checked)}
-    >
-      <span />
-    </button>
-  );
-}
-
-function SelectControl({
-  value,
-  options,
-  onChange,
-}: {
-  value: SettingsSelectValue;
-  options: Array<[SettingsSelectValue, string]>;
-  onChange: (value: string) => void;
-}) {
-  return (
-    <select className={styles.select} value={value} onChange={(event) => onChange(event.target.value)}>
-      {options.map(([optionValue, label]) => (
-        <option key={optionValue} value={optionValue}>
-          {label}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-function Callout({ title, body }: { title: string; body: string }) {
-  return (
-    <div className={styles.callout}>
-      <ShieldCheck size={18} />
-      <div>
-        <strong>{title}</strong>
-        <span>{body}</span>
-      </div>
-    </div>
-  );
-}
-
-function EmptyBlock({ title, description }: { title: string; description: string }) {
-  return (
-    <div className={styles.emptyBlock}>
-      <Archive size={24} />
-      <strong>{title}</strong>
-      <span>{description}</span>
-    </div>
-  );
-}
diff --git a/app/desktop/src/components/settings/cards/AgentMarketCard.tsx b/app/desktop/src/components/settings/cards/AgentMarketCard.tsx
new file mode 100644
index 000000000..a138e7877
--- /dev/null
+++ b/app/desktop/src/components/settings/cards/AgentMarketCard.tsx
@@ -0,0 +1,39 @@
+import { useTranslation } from 'react-i18next';
+import { Bot } from 'lucide-react';
+import type { CustomAgentMarketItem } from '../sections/AgentMarketSection';
+import { formatTimestamp } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+export default function AgentMarketCard({ agent }: { agent: CustomAgentMarketItem }) {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.profileCard}>
+      <div className={styles.profileHeader}>
+        <div className={styles.profileIcon}>
+          <Bot size={17} />
+        </div>
+        <div>
+          <strong>{agent.name}</strong>
+          <span>{agent.systemPrompt || t('settings.marketProfileDefaultDesc')}</span>
+        </div>
+        <em className={`${styles.profileStatus} ${styles.profileStatus_available}`}>
+          {t('settings.statusReady')}
+        </em>
+      </div>
+      <div className={styles.profileMeta}>
+        <span>{t('settings.marketCustomAgentId')}: {agent.id}</span>
+        <span>{t('settings.marketAgentType')}: {agent.agentType}</span>
+        <span>{t('settings.marketInstallSource')}: {agent.source}</span>
+        <span>{t('settings.marketPublishStatus')}: {t('settings.statusReady')}</span>
+        {agent.updatedAt ? <span>{t('settings.marketUpdatedAt')}: {formatTimestamp(agent.updatedAt)}</span> : null}
+      </div>
+      <div className={styles.profileMeta}>
+        {agent.capabilities.length > 0 ? (
+          agent.capabilities.map((name) => <span key={name}>{name}</span>)
+        ) : (
+          <span>{t('settings.marketNoCapabilityTags')}</span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/cards/AliasMappingRow.tsx b/app/desktop/src/components/settings/cards/AliasMappingRow.tsx
new file mode 100644
index 000000000..54993ad92
--- /dev/null
+++ b/app/desktop/src/components/settings/cards/AliasMappingRow.tsx
@@ -0,0 +1,91 @@
+import { useTranslation } from 'react-i18next';
+import Switch from '../primitives/Switch';
+import SelectControl from '../primitives/SelectControl';
+import type { ReasoningEffortPreference } from '@/stores/modelSettingsStore';
+import styles from '../../SettingsPage.module.css';
+
+const MODEL_OPTIONS = [
+  ['auto', 'Auto'],
+  ['claude-opus-4-7', 'claude-opus-4-7'],
+  ['claude-sonnet-4-6', 'claude-sonnet-4-6'],
+  ['claude-haiku-4-5', 'claude-haiku-4-5'],
+  ['gpt-5.5', 'gpt-5.5'],
+  ['glm-5.1', 'glm-5.1'],
+] as const;
+
+const PROVIDER_OPTIONS = [
+  ['tokendance-relay', 'TokenDance Relay'],
+  ['anthropic', 'Anthropic'],
+  ['openai', 'OpenAI'],
+  ['cc-switch-local', 'cc-switch local'],
+] as const;
+
+const REASONING_OPTIONS = [
+  ['low', 'Low'],
+  ['medium', 'Medium'],
+  ['high', 'High'],
+  ['max', 'Max'],
+] as const;
+
+interface AliasMappingRowProps {
+  alias: string;
+  model: string;
+  provider: string;
+  reasoningEffort: ReasoningEffortPreference;
+  enabled: boolean;
+  onToggle: () => void;
+  onModelChange: (model: string) => void;
+  onProviderChange: (provider: string) => void;
+  onReasoningChange: (reasoningEffort: ReasoningEffortPreference) => void;
+}
+
+export default function AliasMappingRow({
+  alias,
+  model,
+  provider,
+  reasoningEffort,
+  enabled,
+  onToggle,
+  onModelChange,
+  onProviderChange,
+  onReasoningChange,
+}: AliasMappingRowProps) {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.modelAliasRow}>
+      <div className={styles.modelAliasHead}>
+        <div>
+          <strong>{alias}</strong>
+          <span>{t('settings.modelAliasRoute', { model, provider })}</span>
+        </div>
+        <Switch checked={enabled} onChange={onToggle} />
+      </div>
+      <div className={styles.modelAliasControls}>
+        <label>
+          <span>{t('settings.modelAliasModel')}</span>
+          <SelectControl
+            value={model}
+            options={MODEL_OPTIONS.filter(([value]) => value !== 'auto').map(([value, label]) => [value, label])}
+            onChange={onModelChange}
+          />
+        </label>
+        <label>
+          <span>{t('settings.modelAliasProvider')}</span>
+          <SelectControl
+            value={provider}
+            options={PROVIDER_OPTIONS.map(([value, label]) => [value, label])}
+            onChange={onProviderChange}
+          />
+        </label>
+        <label>
+          <span>{t('settings.modelAliasReasoning')}</span>
+          <SelectControl
+            value={reasoningEffort}
+            options={REASONING_OPTIONS.map(([value, label]) => [value, label])}
+            onChange={(value) => onReasoningChange(value as ReasoningEffortPreference)}
+          />
+        </label>
+      </div>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/cards/HubFriendRequestRow.tsx b/app/desktop/src/components/settings/cards/HubFriendRequestRow.tsx
new file mode 100644
index 000000000..bdc36199e
--- /dev/null
+++ b/app/desktop/src/components/settings/cards/HubFriendRequestRow.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+import { UserCircle } from 'lucide-react';
+import type { FriendRequestInfo } from '@/api/hubClient';
+import { formatTimestamp } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+export default function HubFriendRequestRow({ request }: { request: FriendRequestInfo }) {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.taskRow}>
+      <div className={styles.connectionIcon}>
+        <UserCircle size={17} />
+      </div>
+      <div className={styles.settingCopy}>
+        <strong>{request.nickname || request.username || request.user_id}</strong>
+        <span>{request.message || t('settings.onlineImFriendRequestNoMessage')}</span>
+        <div className={styles.taskMeta}>
+          <span>{t('settings.onlineImFriendRequests')}</span>
+          <span>{request.user_id}</span>
+          <span>{formatTimestamp(request.created_at)}</span>
+        </div>
+      </div>
+      <span className={styles.statusPill}>{t('settings.readOnly')}</span>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/cards/HubNotificationRow.tsx b/app/desktop/src/components/settings/cards/HubNotificationRow.tsx
new file mode 100644
index 000000000..77766e7f2
--- /dev/null
+++ b/app/desktop/src/components/settings/cards/HubNotificationRow.tsx
@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next';
+import { Globe2 } from 'lucide-react';
+import type { HubNotification } from '@/api/hubClient';
+import { formatTimestamp, parseNotificationPayload } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+export default function HubNotificationRow({ notification }: { notification: HubNotification }) {
+  const { t } = useTranslation();
+  const payload = parseNotificationPayload(notification.payload);
+  const title = payload.title || payload.subject || notification.type || notification.id;
+  const body =
+    payload.content ||
+    payload.message ||
+    payload.text ||
+    payload.body ||
+    t('settings.onlineImNotificationNoBody');
+  return (
+    <div className={styles.taskRow}>
+      <div className={styles.connectionIcon}>
+        <Globe2 size={17} />
+      </div>
+      <div className={styles.settingCopy}>
+        <strong>{title}</strong>
+        <span>{body}</span>
+        <div className={styles.taskMeta}>
+          <span>{notification.read ? t('settings.onlineImNotificationRead') : t('settings.onlineImNotificationUnread')}</span>
+          <span>{notification.type || t('settings.onlineImNotifications')}</span>
+          <span>{formatTimestamp(notification.created_at)}</span>
+        </div>
+      </div>
+      <span className={styles.statusPill}>{t('settings.readOnly')}</span>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/cards/HubSessionRow.tsx b/app/desktop/src/components/settings/cards/HubSessionRow.tsx
new file mode 100644
index 000000000..2eca350b3
--- /dev/null
+++ b/app/desktop/src/components/settings/cards/HubSessionRow.tsx
@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next';
+import { MessageSquareText } from 'lucide-react';
+import type { Session } from '@/api/hubClient';
+import { shortId, formatTimestamp } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+function sessionIdOfSettings(session: Session) {
+  return session.session_id ?? session.id ?? 'session';
+}
+
+export default function HubSessionRow({ session }: { session: Session }) {
+  const { t } = useTranslation();
+  const sessionId = sessionIdOfSettings(session);
+  const timestamp = session.last_message_at ?? session.updated_at ?? session.created_at;
+  return (
+    <div className={styles.taskRow}>
+      <div className={styles.connectionIcon}>
+        <MessageSquareText size={17} />
+      </div>
+      <div className={styles.settingCopy}>
+        <strong>{session.name || shortId(sessionId)}</strong>
+        <span>{sessionId}</span>
+        <div className={styles.taskMeta}>
+          <span>{session.type}</span>
+          <span>{t('settings.memberCount', { count: session.member_count ?? session.members?.length ?? 0 })}</span>
+          <span>{formatTimestamp(timestamp)}</span>
+        </div>
+      </div>
+      <span className={`${styles.statusPill} ${styles.statusPillOn}`}>
+        {t('settings.enabled')}
+      </span>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/cards/HubTaskRow.tsx b/app/desktop/src/components/settings/cards/HubTaskRow.tsx
new file mode 100644
index 000000000..0005b9433
--- /dev/null
+++ b/app/desktop/src/components/settings/cards/HubTaskRow.tsx
@@ -0,0 +1,27 @@
+import { useTranslation } from 'react-i18next';
+import { ClipboardList } from 'lucide-react';
+import type { AgentTask } from '@/stores/taskBridgeStore';
+import { isActiveBridgeTask, shortId } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+export default function HubTaskRow({ task }: { task: AgentTask }) {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.taskRow}>
+      <div className={styles.connectionIcon}>
+        <ClipboardList size={17} />
+      </div>
+      <div className={styles.settingCopy}>
+        <strong>{shortId(task.taskId)}</strong>
+        <span>{task.prompt}</span>
+        <div className={styles.taskMeta}>
+          <span>{task.agentId}</span>
+          <span>{task.runId ? shortId(task.runId) : t('settings.taskUnbound')}</span>
+        </div>
+      </div>
+      <span className={`${styles.statusPill} ${isActiveBridgeTask(task) ? styles.statusPillOn : ''}`}>
+        {t(`settings.taskStatus.${task.status}`, { defaultValue: task.status })}
+      </span>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/cards/LocalAgentProfileCard.tsx b/app/desktop/src/components/settings/cards/LocalAgentProfileCard.tsx
new file mode 100644
index 000000000..b07b74e5e
--- /dev/null
+++ b/app/desktop/src/components/settings/cards/LocalAgentProfileCard.tsx
@@ -0,0 +1,42 @@
+import { useTranslation } from 'react-i18next';
+import { Bot } from 'lucide-react';
+import type { AgentInfo } from '@shared/types';
+import type { ResolvedRunModelSettings } from '@/stores/modelSettingsStore';
+import styles from '../../SettingsPage.module.css';
+
+interface LocalAgentProfileCardProps {
+  agent: AgentInfo;
+  alias?: string;
+  route: ResolvedRunModelSettings;
+  edgeOnline: boolean;
+}
+
+export default function LocalAgentProfileCard({ agent, alias, route, edgeOnline }: LocalAgentProfileCardProps) {
+  const { t } = useTranslation();
+  const profileReady = edgeOnline && agent.status === 'available';
+  return (
+    <div className={styles.profileCard}>
+      <div className={styles.profileHeader}>
+        <div className={styles.profileIcon}>
+          <Bot size={17} />
+        </div>
+        <div>
+          <strong>{t('settings.localProfileName', { runtime: agent.name })}</strong>
+          <span>{t('settings.localProfileDesc')}</span>
+        </div>
+        <em className={`${styles.profileStatus} ${profileReady ? styles.profileStatus_available : styles.profileStatus_configuring}`}>
+          {profileReady ? t('settings.enabled') : t('settings.notConfigured')}
+        </em>
+      </div>
+      <div className={styles.profileMeta}>
+        <span>{t('settings.profileRuntime')}: {agent.id}</span>
+        <span>{t('settings.profileModel')}: {route.model ?? t('prompt.routeAuto')}</span>
+        <span>{t('settings.modelAliasProvider')}: {route.provider ?? t('prompt.routeAuto')}</span>
+        <span>{t('settings.modelAliasReasoning')}: {route.reasoningEffort ?? t('prompt.routeAuto')}</span>
+        {alias ? <span>{t('settings.profileAlias')}: {alias}</span> : null}
+        <span>{t('settings.executionTargets')}: {t('settings.targetLocalEdge')}</span>
+        <span>{t('settings.profileConfigSource')}: AGENTS.md / memory / skills</span>
+      </div>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/cards/McpRuntimeCard.tsx b/app/desktop/src/components/settings/cards/McpRuntimeCard.tsx
new file mode 100644
index 000000000..f74bba9c3
--- /dev/null
+++ b/app/desktop/src/components/settings/cards/McpRuntimeCard.tsx
@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next';
+import { Plug } from 'lucide-react';
+import type { AgentInfo } from '@shared/types';
+import styles from '../../SettingsPage.module.css';
+
+export default function McpRuntimeCard({ agent }: { agent: AgentInfo }) {
+  const { t } = useTranslation();
+  const { mcpIntegration, permissionHooks, subAgentSpawn } = agent.capabilities;
+  return (
+    <div className={styles.profileCard}>
+      <div className={styles.profileHeader}>
+        <div className={styles.profileIcon}>
+          <Plug size={17} />
+        </div>
+        <div>
+          <strong>{agent.name}</strong>
+          <span>{agent.description || t('settings.mcpRuntimeDefaultDesc')}</span>
+        </div>
+        <em className={`${styles.profileStatus} ${mcpIntegration ? styles.profileStatus_available : styles.profileStatus_configuring}`}>
+          {mcpIntegration ? t('settings.statusReady') : t('settings.notConfigured')}
+        </em>
+      </div>
+      <div className={styles.profileMeta}>
+        <span>{t('settings.profileRuntime')}: {agent.id}</span>
+        <span>{t('settings.mcpIntegration')}: {mcpIntegration ? t('settings.enabled') : t('settings.notConfigured')}</span>
+        <span>{t('settings.mcpPermissionHooks')}: {permissionHooks ? t('settings.enabled') : t('settings.notConfigured')}</span>
+        <span>{t('settings.mcpSubAgentSpawn')}: {subAgentSpawn ? t('settings.enabled') : t('settings.notConfigured')}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/cards/ProjectSkillCard.tsx b/app/desktop/src/components/settings/cards/ProjectSkillCard.tsx
new file mode 100644
index 000000000..0975ddf8c
--- /dev/null
+++ b/app/desktop/src/components/settings/cards/ProjectSkillCard.tsx
@@ -0,0 +1,29 @@
+import { useTranslation } from 'react-i18next';
+import { Code2 } from 'lucide-react';
+import type { ProjectSkill } from '../sections/SkillsSection';
+import styles from '../../SettingsPage.module.css';
+
+export default function ProjectSkillCard({ skill }: { skill: ProjectSkill }) {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.profileCard}>
+      <div className={styles.profileHeader}>
+        <div className={styles.profileIcon}>
+          <Code2 size={17} />
+        </div>
+        <div>
+          <strong>{skill.title}</strong>
+          <span>{t(skill.descriptionKey)}</span>
+        </div>
+        <em className={`${styles.profileStatus} ${skill.status === 'ready' ? styles.profileStatus_available : styles.profileStatus_configuring}`}>
+          {skill.status === 'ready' ? t('settings.statusReady') : t('settings.statusInProgress')}
+        </em>
+      </div>
+      <div className={styles.profileMeta}>
+        <span>{t('settings.skillLocalRegistry')}: .agents/skills/{skill.id}</span>
+        <span>{t('settings.skillScripts')}: {skill.hasScripts ? t('settings.enabled') : t('settings.notConfigured')}</span>
+        <span>{t('settings.skillReferences')}: {skill.hasReferences ? t('settings.enabled') : t('settings.notConfigured')}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/cards/ProviderHealthRow.tsx b/app/desktop/src/components/settings/cards/ProviderHealthRow.tsx
new file mode 100644
index 000000000..a0ec395d2
--- /dev/null
+++ b/app/desktop/src/components/settings/cards/ProviderHealthRow.tsx
@@ -0,0 +1,70 @@
+import { useTranslation } from 'react-i18next';
+import { Plug } from 'lucide-react';
+import type { ProviderHealth } from '@/stores/modelSettingsStore';
+import SelectControl from '../primitives/SelectControl';
+import styles from '../../SettingsPage.module.css';
+
+const PROVIDER_HEALTH_OPTIONS = [
+  ['ready', 'Ready'],
+  ['degraded', 'Degraded'],
+  ['disabled', 'Disabled'],
+] as const;
+
+interface ProviderHealthRowProps {
+  id: string;
+  name: string;
+  health: ProviderHealth;
+  modelCount: number;
+  notes: string;
+  onHealthChange: (health: ProviderHealth) => void;
+  onNotesChange: (notes: string) => void;
+}
+
+export default function ProviderHealthRow({
+  id,
+  name,
+  health,
+  modelCount,
+  notes,
+  onHealthChange,
+  onNotesChange,
+}: ProviderHealthRowProps) {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.providerRow}>
+      <div className={styles.providerMain}>
+        <div className={styles.connectionIcon}>
+          <Plug size={17} />
+        </div>
+        <div className={styles.settingCopy}>
+          <strong>{name}</strong>
+          <span>{id}</span>
+          <div className={styles.taskMeta}>
+            <span>{t('settings.ccSwitchModelCount', { count: modelCount })}</span>
+          </div>
+        </div>
+        <span className={`${styles.statusPill} ${health === 'ready' ? styles.statusPillOn : ''}`}>
+          {t(`settings.providerHealth.${health}`)}
+        </span>
+      </div>
+      <div className={styles.providerControls}>
+        <label>
+          <span>{t('settings.ccSwitchHealth')}</span>
+          <SelectControl
+            value={health}
+            options={PROVIDER_HEALTH_OPTIONS.map(([value, label]) => [value, label])}
+            onChange={(value) => onHealthChange(value as ProviderHealth)}
+          />
+        </label>
+        <label>
+          <span>{t('settings.ccSwitchNotes')}</span>
+          <textarea
+            className={styles.textInput}
+            value={notes}
+            onChange={(event) => onNotesChange(event.target.value)}
+          />
+        </label>
+      </div>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/cards/RunnerRow.tsx b/app/desktop/src/components/settings/cards/RunnerRow.tsx
new file mode 100644
index 000000000..9716c7909
--- /dev/null
+++ b/app/desktop/src/components/settings/cards/RunnerRow.tsx
@@ -0,0 +1,20 @@
+import { Cpu } from 'lucide-react';
+import type { RunnerHealthItem } from '@shared/types';
+import styles from '../../SettingsPage.module.css';
+
+export default function RunnerRow({ runner }: { runner: RunnerHealthItem }) {
+  return (
+    <div className={styles.runnerRow}>
+      <div className={styles.connectionIcon}>
+        <Cpu size={17} />
+      </div>
+      <div className={styles.settingCopy}>
+        <strong>{runner.name}</strong>
+        <span>{runner.capabilities?.join(' / ') || runner.id}</span>
+      </div>
+      <span className={`${styles.statusPill} ${runner.status === 'online' ? styles.statusPillOn : ''}`}>
+        {runner.status}
+      </span>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/cards/RuntimeInventoryCard.tsx b/app/desktop/src/components/settings/cards/RuntimeInventoryCard.tsx
new file mode 100644
index 000000000..fb2ff052d
--- /dev/null
+++ b/app/desktop/src/components/settings/cards/RuntimeInventoryCard.tsx
@@ -0,0 +1,30 @@
+import { useTranslation } from 'react-i18next';
+import { Bot } from 'lucide-react';
+import type { AgentInfo } from '@shared/types';
+import styles from '../../SettingsPage.module.css';
+
+export default function RuntimeInventoryCard({ agent }: { agent: AgentInfo }) {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.profileCard}>
+      <div className={styles.profileHeader}>
+        <div className={styles.profileIcon}>
+          <Bot size={17} />
+        </div>
+        <div>
+          <strong>{agent.name}</strong>
+          <span>{agent.description || t('settings.runtimeDefaultDesc')}</span>
+        </div>
+        <em className={`${styles.profileStatus} ${styles[`profileStatus_${agent.status}`]}`}>
+          {t(`agent.status.${agent.status}`)}
+        </em>
+      </div>
+      <div className={styles.profileMeta}>
+        <span>{t('settings.runtimeAdapter')}: {agent.id}</span>
+        <span>{t('settings.profileRuntime')}: {t('settings.statusReady')}</span>
+        <span>{t('settings.profileModel')}: {t('settings.statusPlanned')}</span>
+        <span>{t('settings.profileConfig')}: {t('settings.statusPlanned')}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/cards/TaskRunRow.tsx b/app/desktop/src/components/settings/cards/TaskRunRow.tsx
new file mode 100644
index 000000000..fcad3c54a
--- /dev/null
+++ b/app/desktop/src/components/settings/cards/TaskRunRow.tsx
@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next';
+import { Route, XCircle } from 'lucide-react';
+import type { RunInfo } from '@shared/types';
+import { isActiveRun, shortId, formatTimestamp } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+interface TaskRunRowProps {
+  run: RunInfo;
+  onCancel?: (runId: string) => void;
+  cancelling?: boolean;
+}
+
+export default function TaskRunRow({ run, onCancel, cancelling = false }: TaskRunRowProps) {
+  const { t } = useTranslation();
+  const timestamp = run.finishedAt ?? run.startedAt ?? run.createdAt;
+  return (
+    <div className={styles.taskRow}>
+      <div className={styles.connectionIcon}>
+        <Route size={17} />
+      </div>
+      <div className={styles.settingCopy}>
+        <strong>{shortId(run.runId)}</strong>
+        <span>{run.projectId} / {run.threadId}</span>
+        <div className={styles.taskMeta}>
+          <span>{formatTimestamp(timestamp)}</span>
+        </div>
+      </div>
+      <span className={`${styles.statusPill} ${isActiveRun(run) ? styles.statusPillOn : ''}`}>
+        {t(`run.status.${run.status}`, { defaultValue: run.status })}
+      </span>
+      {onCancel ? (
+        <button
+          type="button"
+          className={`${styles.secondaryBtn} ${styles.taskRowAction}`}
+          onClick={() => onCancel(run.runId)}
+          disabled={cancelling}
+          aria-label={t('settings.taskCancelRun')}
+          title={t('settings.taskCancelRun')}
+        >
+          <XCircle size={15} />
+        </button>
+      ) : null}
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/primitives/AuthGapBlock.tsx b/app/desktop/src/components/settings/primitives/AuthGapBlock.tsx
new file mode 100644
index 000000000..ec680ce89
--- /dev/null
+++ b/app/desktop/src/components/settings/primitives/AuthGapBlock.tsx
@@ -0,0 +1,24 @@
+import { LogIn } from 'lucide-react';
+import styles from '../../SettingsPage.module.css';
+
+interface AuthGapBlockProps {
+  title: string;
+  description: string;
+  actionLabel: string;
+  onAction: () => void;
+}
+
+export default function AuthGapBlock({ title, description, actionLabel, onAction }: AuthGapBlockProps) {
+  return (
+    <div className={styles.authGapBlock}>
+      <div className={styles.settingCopy}>
+        <strong>{title}</strong>
+        <span>{description}</span>
+      </div>
+      <button type="button" className={styles.primaryBtn} onClick={onAction}>
+        <LogIn size={16} />
+        {actionLabel}
+      </button>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/primitives/Callout.tsx b/app/desktop/src/components/settings/primitives/Callout.tsx
new file mode 100644
index 000000000..27c2946fd
--- /dev/null
+++ b/app/desktop/src/components/settings/primitives/Callout.tsx
@@ -0,0 +1,19 @@
+import { ShieldCheck } from 'lucide-react';
+import styles from '../../SettingsPage.module.css';
+
+interface CalloutProps {
+  title: string;
+  body: string;
+}
+
+export default function Callout({ title, body }: CalloutProps) {
+  return (
+    <div className={styles.callout}>
+      <ShieldCheck size={18} />
+      <div>
+        <strong>{title}</strong>
+        <span>{body}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/primitives/CapabilityCard.tsx b/app/desktop/src/components/settings/primitives/CapabilityCard.tsx
new file mode 100644
index 000000000..f7c0ff21b
--- /dev/null
+++ b/app/desktop/src/components/settings/primitives/CapabilityCard.tsx
@@ -0,0 +1,17 @@
+import styles from '../../SettingsPage.module.css';
+
+interface CapabilityCardProps {
+  title: string;
+  description: string;
+  status: string;
+}
+
+export default function CapabilityCard({ title, description, status }: CapabilityCardProps) {
+  return (
+    <div className={styles.capabilityCard}>
+      <strong>{title}</strong>
+      <span>{description}</span>
+      <em>{status}</em>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/primitives/ConnectionRow.tsx b/app/desktop/src/components/settings/primitives/ConnectionRow.tsx
new file mode 100644
index 000000000..f8a823c76
--- /dev/null
+++ b/app/desktop/src/components/settings/primitives/ConnectionRow.tsx
@@ -0,0 +1,27 @@
+import { Link2 } from 'lucide-react';
+import styles from '../../SettingsPage.module.css';
+
+interface ConnectionRowProps {
+  name: string;
+  description: string;
+  connected: boolean;
+  onlineLabel: string;
+  offlineLabel: string;
+}
+
+export default function ConnectionRow({ name, description, connected, onlineLabel, offlineLabel }: ConnectionRowProps) {
+  return (
+    <div className={styles.connectionRow}>
+      <div className={styles.connectionIcon}>
+        <Link2 size={17} />
+      </div>
+      <div className={styles.settingCopy}>
+        <strong>{name}</strong>
+        <span>{description}</span>
+      </div>
+      <span className={`${styles.statusPill} ${connected ? styles.statusPillOn : ''}`}>
+        {connected ? onlineLabel : offlineLabel}
+      </span>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/primitives/EmptyBlock.tsx b/app/desktop/src/components/settings/primitives/EmptyBlock.tsx
new file mode 100644
index 000000000..05b79f256
--- /dev/null
+++ b/app/desktop/src/components/settings/primitives/EmptyBlock.tsx
@@ -0,0 +1,17 @@
+import { Archive } from 'lucide-react';
+import styles from '../../SettingsPage.module.css';
+
+interface EmptyBlockProps {
+  title: string;
+  description: string;
+}
+
+export default function EmptyBlock({ title, description }: EmptyBlockProps) {
+  return (
+    <div className={styles.emptyBlock}>
+      <Archive size={24} />
+      <strong>{title}</strong>
+      <span>{description}</span>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/primitives/ExecutionTargetCard.tsx b/app/desktop/src/components/settings/primitives/ExecutionTargetCard.tsx
new file mode 100644
index 000000000..d4f4e0d74
--- /dev/null
+++ b/app/desktop/src/components/settings/primitives/ExecutionTargetCard.tsx
@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+import styles from '../../SettingsPage.module.css';
+
+interface ExecutionTargetCardProps {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  status: string;
+  metric: string;
+  connected?: boolean;
+}
+
+export default function ExecutionTargetCard({
+  icon,
+  title,
+  description,
+  status,
+  metric,
+  connected = false,
+}: ExecutionTargetCardProps) {
+  return (
+    <div className={styles.targetCard}>
+      <div className={styles.targetTop}>
+        <div className={styles.targetIcon}>{icon}</div>
+        <span className={`${styles.statusPill} ${connected ? styles.statusPillOn : ''}`}>{status}</span>
+      </div>
+      <strong>{title}</strong>
+      <span>{description}</span>
+      <em>{metric}</em>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/primitives/ModeCard.tsx b/app/desktop/src/components/settings/primitives/ModeCard.tsx
new file mode 100644
index 000000000..21c2dddf8
--- /dev/null
+++ b/app/desktop/src/components/settings/primitives/ModeCard.tsx
@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import { Check } from 'lucide-react';
+import styles from '../../SettingsPage.module.css';
+
+interface ModeCardProps {
+  active: boolean;
+  icon: ReactNode;
+  title: string;
+  description: string;
+  onClick: () => void;
+}
+
+export default function ModeCard({ active, icon, title, description, onClick }: ModeCardProps) {
+  return (
+    <button className={`${styles.modeCard} ${active ? styles.modeCardActive : ''}`} onClick={onClick}>
+      {icon}
+      <span>
+        <strong>{title}</strong>
+        <small>{description}</small>
+      </span>
+      {active ? <Check size={16} className={styles.modeCheck} /> : null}
+    </button>
+  );
+}
diff --git a/app/desktop/src/components/settings/primitives/Panel.tsx b/app/desktop/src/components/settings/primitives/Panel.tsx
new file mode 100644
index 000000000..ac03098dc
--- /dev/null
+++ b/app/desktop/src/components/settings/primitives/Panel.tsx
@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import styles from '../../SettingsPage.module.css';
+
+interface PanelProps {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}
+
+export default function Panel({ title, description, children }: PanelProps) {
+  return (
+    <section className={styles.panel}>
+      <div className={styles.panelHeader}>
+        <h2>{title}</h2>
+        {description ? <p>{description}</p> : null}
+      </div>
+      <div className={styles.panelBody}>{children}</div>
+    </section>
+  );
+}
diff --git a/app/desktop/src/components/settings/primitives/SelectControl.tsx b/app/desktop/src/components/settings/primitives/SelectControl.tsx
new file mode 100644
index 000000000..403f5f49e
--- /dev/null
+++ b/app/desktop/src/components/settings/primitives/SelectControl.tsx
@@ -0,0 +1,21 @@
+import styles from '../../SettingsPage.module.css';
+
+type SelectValue = string;
+
+interface SelectControlProps {
+  value: SelectValue;
+  options: Array<[SelectValue, string]>;
+  onChange: (value: string) => void;
+}
+
+export default function SelectControl({ value, options, onChange }: SelectControlProps) {
+  return (
+    <select className={styles.select} value={value} onChange={(event) => onChange(event.target.value)}>
+      {options.map(([optionValue, label]) => (
+        <option key={optionValue} value={optionValue}>
+          {label}
+        </option>
+      ))}
+    </select>
+  );
+}
diff --git a/app/desktop/src/components/settings/primitives/SettingRow.tsx b/app/desktop/src/components/settings/primitives/SettingRow.tsx
new file mode 100644
index 000000000..3b8afd4c9
--- /dev/null
+++ b/app/desktop/src/components/settings/primitives/SettingRow.tsx
@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import { ChevronRight } from 'lucide-react';
+import styles from '../../SettingsPage.module.css';
+
+interface SettingRowProps {
+  title: string;
+  description: string;
+  value?: string;
+  control?: ReactNode;
+  action?: boolean;
+}
+
+export default function SettingRow({ title, description, value, control, action }: SettingRowProps) {
+  return (
+    <div className={styles.settingRow}>
+      <div className={styles.settingCopy}>
+        <strong>{title}</strong>
+        <span>{description}</span>
+      </div>
+      {control ?? (value ? <span className={styles.settingValue}>{value}</span> : null)}
+      {action ? <ChevronRight size={17} className={styles.rowChevron} /> : null}
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/primitives/SummaryCard.tsx b/app/desktop/src/components/settings/primitives/SummaryCard.tsx
new file mode 100644
index 000000000..e3f601dde
--- /dev/null
+++ b/app/desktop/src/components/settings/primitives/SummaryCard.tsx
@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import styles from '../../SettingsPage.module.css';
+
+interface SummaryCardProps {
+  icon: ReactNode;
+  label: string;
+  value: string;
+  detail: string;
+}
+
+export default function SummaryCard({ icon, label, value, detail }: SummaryCardProps) {
+  return (
+    <div className={styles.summaryCard}>
+      <div className={styles.summaryIcon}>{icon}</div>
+      <div>
+        <span>{label}</span>
+        <strong>{value}</strong>
+        <small>{detail}</small>
+      </div>
+    </div>
+  );
+}
diff --git a/app/desktop/src/components/settings/primitives/Switch.tsx b/app/desktop/src/components/settings/primitives/Switch.tsx
new file mode 100644
index 000000000..77f5b9b87
--- /dev/null
+++ b/app/desktop/src/components/settings/primitives/Switch.tsx
@@ -0,0 +1,21 @@
+import styles from '../../SettingsPage.module.css';
+
+interface SwitchProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export default function Switch({ checked, onChange, disabled = false }: SwitchProps) {
+  return (
+    <button
+      className={`${styles.switch} ${checked ? styles.switchOn : ''}`}
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+    >
+      <span />
+    </button>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/AccountSection.tsx b/app/desktop/src/components/settings/sections/AccountSection.tsx
new file mode 100644
index 000000000..8a979876e
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/AccountSection.tsx
@@ -0,0 +1,69 @@
+import { useTranslation } from 'react-i18next';
+import { UserCircle, LockKeyhole, Globe2, Monitor, Route, LogOut, LogIn } from 'lucide-react';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import SummaryCard from '../primitives/SummaryCard';
+import CapabilityCard from '../primitives/CapabilityCard';
+import Callout from '../primitives/Callout';
+import { APP_VERSION, HUB_URL } from '@/config';
+import { readBrowserStorage, shortId } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+const DEVICE_ID_KEY = 'agenthub_device_id';
+const TD_CODE_VERIFIER_KEY = 'td_code_verifier';
+const TD_STATE_KEY = 'td_state';
+
+interface AccountSectionProps {
+  hubSessionActive: boolean;
+  accountName: string;
+  tokenSource: string;
+  tokenSourceLabel: string;
+  desktopDeviceStatus: string;
+  deviceId: string | null;
+  deviceRegistration: { status: 'idle' | 'registering' | 'registered' | 'error'; error: string | null };
+  onOpenAuth: () => void;
+  onSignOut: () => void;
+}
+
+export default function AccountSection({
+  hubSessionActive, accountName, tokenSource, tokenSourceLabel,
+  desktopDeviceStatus, deviceId, deviceRegistration, onOpenAuth, onSignOut,
+}: AccountSectionProps) {
+  const { t } = useTranslation();
+  const pkceStateReady = Boolean(readBrowserStorage('session', TD_CODE_VERIFIER_KEY)) && Boolean(readBrowserStorage('session', TD_STATE_KEY));
+
+  return (
+    <Panel title={t('settings.account')} description={t('settings.accountDesc')}>
+      <div className={styles.accountCard}>
+        <UserCircle size={34} />
+        <div className={styles.accountInfo}>
+          <strong>{hubSessionActive ? accountName : t('settings.notSignedIn')}</strong>
+          <span>{hubSessionActive ? t('settings.accountConnected') : t('settings.accountDisconnected')}</span>
+        </div>
+        {hubSessionActive ? (
+          <button className={styles.secondaryBtn} onClick={onSignOut}><LogOut size={16} />{t('settings.signOut')}</button>
+        ) : (
+          <button className={styles.primaryBtn} onClick={onOpenAuth}><LogIn size={16} />{t('settings.signIn')}</button>
+        )}
+      </div>
+      <div className={styles.summaryGrid}>
+        <SummaryCard icon={<LockKeyhole size={18} />} label={t('settings.hubSession')} value={hubSessionActive ? t('settings.enabled') : t('settings.notConfigured')} detail={hubSessionActive ? t('settings.hubSessionDesc') : t('settings.hubSessionSignedOutDesc')} />
+        <SummaryCard icon={<Globe2 size={18} />} label="TokenDance ID" value={tokenSource === 'tokendance' ? t('settings.enabled') : t('settings.statusInProgress')} detail={tokenSource === 'tokendance' ? t('settings.tokenDanceSessionDesc') : t('settings.tokenDanceOidcPendingDesc')} />
+        <SummaryCard icon={<Monitor size={18} />} label={t('settings.desktopDevice')} value={desktopDeviceStatus} detail={deviceRegistration.status === 'error' ? deviceRegistration.error ?? t('settings.desktopDeviceRegisterFailed') : deviceId ? shortId(deviceId) : t('settings.desktopDeviceMissingDesc')} />
+        <SummaryCard icon={<Route size={18} />} label={t('settings.syncScope')} value={deviceRegistration.status === 'registered' ? t('settings.enabled') : t('settings.signedOut')} detail={t('settings.syncScopeDesc')} />
+      </div>
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}><strong>{t('settings.identityBoundary')}</strong><span>{t('settings.identityBoundaryDesc')}</span></div>
+        <div className={styles.capabilityGrid}>
+          <CapabilityCard title={t('settings.hubSession')} description={t('settings.hubSessionCapabilityDesc')} status={hubSessionActive ? t('settings.statusReady') : t('settings.notConfigured')} />
+          <CapabilityCard title="TokenDance ID OIDC" description={t('settings.tokenDanceOidcDesc')} status={pkceStateReady ? t('settings.statusInProgress') : t('settings.statusPlanned')} />
+          <CapabilityCard title={t('settings.authTokenSource')} description={t('settings.authTokenSourceDesc')} status={tokenSourceLabel} />
+          <CapabilityCard title={t('settings.deviceProof')} description={t('settings.deviceProofDesc')} status={t(`settings.deviceStatus.${deviceRegistration.status}`)} />
+        </div>
+      </div>
+      <SettingRow title={t('settings.hubEndpoint')} description={HUB_URL} value={hubSessionActive ? t('settings.enabled') : t('settings.notConfigured')} />
+      <SettingRow title={t('settings.appVersion')} description={APP_VERSION} value={t('settings.statusReady')} />
+      <Callout title={t('settings.accountGuard')} body={t('settings.accountGuardDesc')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/AgentMarketSection.tsx b/app/desktop/src/components/settings/sections/AgentMarketSection.tsx
new file mode 100644
index 000000000..1ece1462f
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/AgentMarketSection.tsx
@@ -0,0 +1,112 @@
+import { useTranslation } from 'react-i18next';
+import { Bot, ShieldCheck, Code2, Globe2, RefreshCw } from 'lucide-react';
+import type { AgentInfo } from '@shared/types';
+import Panel from '../primitives/Panel';
+import SummaryCard from '../primitives/SummaryCard';
+import CapabilityCard from '../primitives/CapabilityCard';
+import EmptyBlock from '../primitives/EmptyBlock';
+import AuthGapBlock from '../primitives/AuthGapBlock';
+import Callout from '../primitives/Callout';
+import AgentMarketCard from '../cards/AgentMarketCard';
+import { countAgentCapabilities, statusLabelFromQuery, readUnknownString, readUnknownArray } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+export interface CustomAgentMarketItem {
+  id: string;
+  name: string;
+  agentType: string;
+  systemPrompt: string;
+  capabilities: string[];
+  source: string;
+  updatedAt?: string;
+}
+
+function normalizeCustomAgent(raw: Record<string, unknown>): CustomAgentMarketItem {
+  const id = readUnknownString(raw.id) ?? readUnknownString(raw.agent_id) ?? readUnknownString(raw.custom_agent_id) ?? 'custom-agent';
+  const capabilityTags = readUnknownArray(raw.capability_tags);
+  return {
+    id,
+    name: readUnknownString(raw.name) ?? id,
+    agentType: readUnknownString(raw.agent_type) ?? readUnknownString(raw.type) ?? 'custom',
+    systemPrompt: readUnknownString(raw.system_prompt) ?? readUnknownString(raw.description) ?? '',
+    capabilities: capabilityTags.length > 0 ? capabilityTags : readUnknownArray(raw.capabilities),
+    source: '/web/custom-agents',
+    updatedAt: readUnknownString(raw.updated_at) ?? readUnknownString(raw.created_at),
+  };
+}
+
+interface AgentMarketSectionProps {
+  hubSessionActive: boolean;
+  agents: AgentInfo[];
+  edgeOnline: boolean;
+  customAgents: Record<string, unknown>[];
+  isLoading: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  isSuccess: boolean;
+  refetch: () => void;
+  onOpenAuth: () => void;
+}
+
+export default function AgentMarketSection({
+  hubSessionActive, agents, edgeOnline, customAgents: rawAgents,
+  isLoading, isFetching, isError, isSuccess, refetch, onOpenAuth,
+}: AgentMarketSectionProps) {
+  const { t } = useTranslation();
+  const customAgents = rawAgents.map(normalizeCustomAgent);
+  const marketPublishReady = customAgents.length;
+  const marketCapabilityCount = countAgentCapabilities(agents as unknown as { capabilities: Record<string, boolean | undefined> }[]);
+
+  const marketSnapshotStatus = statusLabelFromQuery({
+    signedIn: hubSessionActive, isLoading, isFetching, isError, isSuccess, t,
+  });
+
+  return (
+    <Panel title={t('settings.agentMarket')} description={t('settings.agentMarketDesc')}>
+      {!hubSessionActive ? (
+        <AuthGapBlock title={t('settings.hubSignInRequired')} description={t('settings.marketSignedOutDesc')} actionLabel={t('settings.signIn')} onAction={onOpenAuth} />
+      ) : isError ? (
+        <EmptyBlock title={t('settings.hubUnavailable')} description={t('settings.marketHubErrorDesc')} />
+      ) : null}
+      <div className={styles.summaryGrid}>
+        <SummaryCard icon={<Bot size={18} />} label={t('settings.marketLocalProfiles')} value={`${agents.length}`} detail={edgeOnline ? t('settings.marketLocalProfilesDesc') : t('settings.edgeOffline')} />
+        <SummaryCard icon={<ShieldCheck size={18} />} label={t('settings.marketPublishReady')} value={isLoading ? t('settings.loading') : `${marketPublishReady}`} detail={t('settings.marketPublishReadyDesc')} />
+        <SummaryCard icon={<Code2 size={18} />} label={t('settings.marketCapabilities')} value={`${marketCapabilityCount}`} detail={t('settings.marketCapabilitiesDesc')} />
+        <SummaryCard icon={<Globe2 size={18} />} label={t('settings.marketHubSync')} value={marketSnapshotStatus} detail={hubSessionActive ? t('settings.marketHubSyncDesc') : t('settings.marketHubSyncSignedOut')} />
+      </div>
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}>
+          <div className={styles.taskSectionTitleRow}>
+            <div>
+              <strong>{t('settings.marketInstalledProfiles')}</strong>
+              <span>{t('settings.marketInstalledProfilesDesc')}</span>
+            </div>
+            <div className={styles.taskSectionActions}>
+              <button type="button" className={styles.secondaryBtn} onClick={() => void refetch()} disabled={!hubSessionActive || isFetching}>
+                <RefreshCw size={15} />
+                {isFetching ? t('settings.marketRefreshing') : t('settings.marketRefresh')}
+              </button>
+            </div>
+          </div>
+        </div>
+        {isLoading ? (
+          <EmptyBlock title={t('settings.loading')} description={t('settings.marketLoadingDesc')} />
+        ) : customAgents.length > 0 ? (
+          <div className={styles.profileGrid}>{customAgents.map((agent) => <AgentMarketCard key={`market-${agent.id}`} agent={agent} />)}</div>
+        ) : (
+          <EmptyBlock title={t('settings.marketNoProfiles')} description={hubSessionActive ? t('settings.marketNoProfilesDesc') : t('settings.marketSignedOutDesc')} />
+        )}
+      </div>
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}><strong>{t('settings.marketReleaseReadiness')}</strong><span>{t('settings.marketReleaseReadinessDesc')}</span></div>
+        <div className={styles.capabilityGrid}>
+          <CapabilityCard title={t('settings.agentTemplates')} description={t('settings.agentTemplatesDesc')} status={customAgents.length > 0 ? t('settings.statusReady') : t('settings.notConfigured')} />
+          <CapabilityCard title={t('settings.agentCapabilityTags')} description={t('settings.agentCapabilityTagsDesc')} status={marketCapabilityCount > 0 ? t('settings.statusReady') : t('settings.statusPlanned')} />
+          <CapabilityCard title={t('settings.agentReviewFlow')} description={t('settings.agentReviewFlowDesc')} status={t('settings.status.interfaceGap')} />
+          <CapabilityCard title={t('settings.marketTokenDancePublish')} description={t('settings.marketTokenDancePublishDesc')} status={hubSessionActive ? t('settings.status.interfaceGap') : t('settings.status.loginLocked')} />
+        </div>
+      </div>
+      <Callout title={t('settings.marketGuard')} body={t('settings.marketGuardDesc')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/AgentProfilesSection.tsx b/app/desktop/src/components/settings/sections/AgentProfilesSection.tsx
new file mode 100644
index 000000000..99daf90a5
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/AgentProfilesSection.tsx
@@ -0,0 +1,100 @@
+import { useTranslation } from 'react-i18next';
+import { Bot, Cpu } from 'lucide-react';
+import type { AgentInfo, RunnerHealthItem } from '@shared/types';
+import type { ResolvedRunModelSettings } from '@/stores/modelSettingsStore';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import SummaryCard from '../primitives/SummaryCard';
+import CapabilityCard from '../primitives/CapabilityCard';
+import EmptyBlock from '../primitives/EmptyBlock';
+import RuntimeInventoryCard from '../cards/RuntimeInventoryCard';
+import LocalAgentProfileCard from '../cards/LocalAgentProfileCard';
+
+interface AgentProfilesSectionProps {
+  agents: AgentInfo[];
+  edgeOnline: boolean;
+  runnerSummary: string;
+  runnerItems: RunnerHealthItem[];
+  localAgentProfiles: Array<{ agent: AgentInfo; alias: string; route: ResolvedRunModelSettings }>;
+}
+
+export default function AgentProfilesSection({ agents, edgeOnline, runnerSummary, runnerItems, localAgentProfiles }: AgentProfilesSectionProps) {
+  const { t } = useTranslation();
+  const availableRuntimes = agents.filter((agent) => agent.status === 'available').length;
+  return (
+    <Panel title={t('settings.agentProfiles')} description={t('settings.agentProfilesDesc')}>
+      <div className="summaryGrid">
+        <SummaryCard
+          icon={<Bot size={18} />}
+          label={t('settings.profileAvailable')}
+          value={`${availableRuntimes}/${agents.length}`}
+          detail={edgeOnline ? t('settings.runtimeInventoryDesc') : t('settings.edgeOffline')}
+        />
+        <SummaryCard
+          icon={<Cpu size={18} />}
+          label={t('settings.profileRuntimeCoverage')}
+          value={runnerSummary}
+          detail={t('settings.profileRuntimeCoverageDesc')}
+        />
+      </div>
+      <div className="taskSection">
+        <div className="taskSectionHeader">
+          <strong>{t('settings.runtimeInventory')}</strong>
+          <span>{t('settings.runtimeInventoryDesc')}</span>
+        </div>
+        {agents.length > 0 ? (
+          <div className="profileGrid">
+            {agents.map((agent) => <RuntimeInventoryCard key={agent.id} agent={agent} />)}
+          </div>
+        ) : (
+          <EmptyBlock title={t('settings.noRuntimes')} description={t('settings.noRuntimesDesc')} />
+        )}
+      </div>
+      <div className="taskSection">
+        <div className="taskSectionHeader">
+          <strong>{t('settings.profileComposition')}</strong>
+          <span>{t('settings.profileCompositionDesc')}</span>
+        </div>
+        {localAgentProfiles.length > 0 ? (
+          <div className="profileGrid">
+            {localAgentProfiles.map((profile) => (
+              <LocalAgentProfileCard
+                key={`profile-${profile.agent.id}`}
+                agent={profile.agent}
+                alias={profile.alias}
+                route={profile.route}
+                edgeOnline={edgeOnline}
+              />
+            ))}
+          </div>
+        ) : (
+          <EmptyBlock title={t('settings.noProfiles')} description={t('settings.noProfilesDesc')} />
+        )}
+        <div className="capabilityGrid">
+          <CapabilityCard
+            title={t('settings.profileRuntime')}
+            description={t('settings.profileRuntimeDesc')}
+            status={agents.length > 0 ? t('settings.statusReady') : t('settings.notConfigured')}
+          />
+          <CapabilityCard
+            title={t('settings.profileModel')}
+            description={t('settings.profileModelDesc')}
+            status={t('settings.statusInProgress')}
+          />
+          <CapabilityCard
+            title={t('settings.profileConfig')}
+            description={t('settings.profileConfigDesc')}
+            status={t('settings.statusInProgress')}
+          />
+          <CapabilityCard
+            title={t('settings.executionTargets')}
+            description={t('settings.profileExecutionTargetDesc')}
+            status={edgeOnline ? t('settings.statusReady') : t('settings.notConfigured')}
+          />
+        </div>
+      </div>
+      <SettingRow title={t('settings.profileConfigSource')} description={t('settings.profileConfigSourceDesc')} value="AGENTS.md / memory / skills" />
+      <SettingRow title={t('settings.profilePublish')} description={t('settings.profilePublishDesc')} value={t('settings.statusPlanned')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/AgentSchedulingSection.tsx b/app/desktop/src/components/settings/sections/AgentSchedulingSection.tsx
new file mode 100644
index 000000000..d3f49b6a7
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/AgentSchedulingSection.tsx
@@ -0,0 +1,92 @@
+import { useTranslation } from 'react-i18next';
+import { ClipboardList, Bot, Server, ShieldCheck, Monitor, Globe2, Computer } from 'lucide-react';
+import type { RunInfo } from '@shared/types';
+import type { AgentTask } from '@/stores/taskBridgeStore';
+import type { AgentInfo } from '@shared/types';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import SummaryCard from '../primitives/SummaryCard';
+import CapabilityCard from '../primitives/CapabilityCard';
+import EmptyBlock from '../primitives/EmptyBlock';
+import Callout from '../primitives/Callout';
+import Switch from '../primitives/Switch';
+import ExecutionTargetCard from '../primitives/ExecutionTargetCard';
+import TaskRunRow from '../cards/TaskRunRow';
+import HubTaskRow from '../cards/HubTaskRow';
+import { getRecentRuns, getRecentTasks, writeStoredValue } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+interface AgentSchedulingSectionProps {
+  runs: RunInfo[];
+  activeRuns: number;
+  runsLoading: boolean;
+  bridgedTasks: AgentTask[];
+  agents: AgentInfo[];
+  edgeOnline: boolean;
+  hubSessionActive: boolean;
+  totalRunners: number;
+  runnerSummary: string;
+  modelMappingEnabled: boolean;
+  ccSwitchBridge: boolean;
+  autoReview: boolean;
+  agentSchedulingEnabled: boolean;
+  setAgentSchedulingEnabled: (value: boolean) => void;
+}
+
+export default function AgentSchedulingSection({
+  runs, activeRuns, runsLoading, bridgedTasks, agents, edgeOnline, hubSessionActive,
+  totalRunners, runnerSummary, modelMappingEnabled, ccSwitchBridge, autoReview,
+  agentSchedulingEnabled, setAgentSchedulingEnabled,
+}: AgentSchedulingSectionProps) {
+  const { t } = useTranslation();
+  const activeHubTasks = bridgedTasks.filter((t) => t.status === 'queued' || t.status === 'running').length;
+  const availableRuntimes = agents.filter((a) => a.status === 'available').length;
+  const remoteControlReady = false;
+  const schedulerActiveItems = activeRuns + activeHubTasks;
+  const schedulerTotalItems = runs.length + bridgedTasks.length;
+  const schedulerTargetReadyCount = [edgeOnline, hubSessionActive, remoteControlReady, false].filter(Boolean).length;
+  const schedulerPolicyReadyCount = [modelMappingEnabled, ccSwitchBridge, autoReview, remoteControlReady].filter(Boolean).length;
+  const schedulerLocalMetric = totalRunners > 0 ? runnerSummary : edgeOnline ? t('settings.edgeOnline') : t('settings.edgeOffline');
+  const recentRuns = getRecentRuns(runs, 3);
+  const recentBridgeTasks = getRecentTasks(bridgedTasks, 3);
+
+  return (
+    <Panel title={t('settings.agentScheduling')} description={t('settings.agentSchedulingDesc')}>
+      <div className={styles.summaryGrid}>
+        <SummaryCard icon={<ClipboardList size={18} />} label={t('settings.schedulerQueueLive')} value={`${schedulerActiveItems}/${schedulerTotalItems}`} detail={runsLoading ? t('settings.loading') : t('settings.schedulerQueueLiveDesc')} />
+        <SummaryCard icon={<Bot size={18} />} label={t('settings.schedulerProfiles')} value={`${availableRuntimes}/${agents.length}`} detail={edgeOnline ? t('settings.schedulerProfilesDesc') : t('settings.edgeOffline')} />
+        <SummaryCard icon={<Server size={18} />} label={t('settings.schedulerTargets')} value={`${schedulerTargetReadyCount}/4`} detail={t('settings.schedulerTargetsDesc')} />
+        <SummaryCard icon={<ShieldCheck size={18} />} label={t('settings.schedulerPolicyReady')} value={`${schedulerPolicyReadyCount}/4`} detail={t('settings.schedulerPolicyReadyDesc')} />
+      </div>
+      <SettingRow title={t('settings.enableAgentScheduling')} description={t('settings.enableAgentSchedulingDesc')} control={<Switch checked={agentSchedulingEnabled} onChange={(v) => { setAgentSchedulingEnabled(v); writeStoredValue('agentScheduling', v); }} />} />
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}><strong>{t('settings.schedulerLiveQueue')}</strong><span>{t('settings.schedulerLiveQueueDesc')}</span></div>
+        {recentRuns.length > 0 || recentBridgeTasks.length > 0 ? (
+          <div className={styles.taskList}>
+            {recentRuns.map((run) => <TaskRunRow key={`scheduler-${run.runId}`} run={run} />)}
+            {recentBridgeTasks.map((task) => <HubTaskRow key={`scheduler-${task.taskId}`} task={task} />)}
+          </div>
+        ) : <EmptyBlock title={t('settings.schedulerNoQueue')} description={t('settings.schedulerNoQueueDesc')} />}
+      </div>
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}><strong>{t('settings.schedulerTargets')}</strong><span>{t('settings.schedulerTargetsDesc')}</span></div>
+        <div className={styles.targetGrid}>
+          <ExecutionTargetCard icon={<Monitor size={18} />} title={t('settings.schedulerRouteLocal')} description={t('settings.schedulerRouteLocalDesc')} status={edgeOnline ? t('settings.enabled') : t('settings.offline')} metric={schedulerLocalMetric} connected={edgeOnline} />
+          <ExecutionTargetCard icon={<Globe2 size={18} />} title={t('settings.schedulerRouteHub')} description={t('settings.schedulerRouteHubDesc')} status={hubSessionActive ? t('settings.enabled') : t('settings.notConfigured')} metric={hubSessionActive ? t('settings.targetHubSignedIn') : t('settings.targetHubSignInRequired')} connected={hubSessionActive} />
+          <ExecutionTargetCard icon={<Computer size={18} />} title={t('settings.schedulerRouteRemote')} description={t('settings.schedulerRouteRemoteDesc')} status={hubSessionActive ? t('settings.status.interfaceGap') : t('settings.status.loginLocked')} metric="SSH / Tailscale" connected={remoteControlReady} />
+          <ExecutionTargetCard icon={<Server size={18} />} title={t('settings.schedulerRouteCloud')} description={t('settings.schedulerRouteCloudDesc')} status={t('settings.statusPlanned')} metric="Cloud Edge" />
+        </div>
+      </div>
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}><strong>{t('settings.schedulerPolicy')}</strong><span>{t('settings.schedulerPolicyDesc')}</span></div>
+        <div className={styles.capabilityGrid}>
+          <CapabilityCard title={t('settings.schedulerPolicyModelMapping')} description={t('settings.schedulerPolicyModelMappingDesc')} status={modelMappingEnabled ? t('settings.enabled') : t('settings.notConfigured')} />
+          <CapabilityCard title={t('settings.schedulerPolicyCcSwitch')} description={t('settings.schedulerPolicyCcSwitchDesc')} status={ccSwitchBridge ? t('settings.enabled') : t('settings.statusPlanned')} />
+          <CapabilityCard title={t('settings.schedulerPolicyRemote')} description={t('settings.schedulerPolicyRemoteDesc')} status={hubSessionActive ? t('settings.status.interfaceGap') : t('settings.status.loginLocked')} />
+          <CapabilityCard title={t('settings.schedulerPolicyApproval')} description={t('settings.schedulerPolicyApprovalDesc')} status={autoReview ? t('settings.enabled') : t('settings.approvalMode.manual')} />
+        </div>
+      </div>
+      <Callout title={t('settings.schedulerGuard')} body={t('settings.schedulerGuardDesc')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/AppearanceSection.tsx b/app/desktop/src/components/settings/sections/AppearanceSection.tsx
new file mode 100644
index 000000000..2666f00a2
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/AppearanceSection.tsx
@@ -0,0 +1,41 @@
+import { useTranslation } from 'react-i18next';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import Switch from '../primitives/Switch';
+import { writeStoredValue } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+interface AppearanceSectionProps {
+  themeMode: string;
+  setThemeMode: (mode: string) => void;
+  compactMode: boolean;
+  setCompactMode: (value: boolean) => void;
+}
+
+export default function AppearanceSection({ themeMode, setThemeMode, compactMode, setCompactMode }: AppearanceSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Panel title={t('settings.theme')} description={t('settings.themeDesc')}>
+        <div className={styles.segmented}>
+          {(['dark', 'light', 'system'] as const).map((mode) => (
+            <button
+              key={mode}
+              className={themeMode === mode ? styles.segmentActive : ''}
+              onClick={() => setThemeMode(mode)}
+            >
+              {t(`settings.theme.${mode}`)}
+            </button>
+          ))}
+        </div>
+      </Panel>
+      <Panel title={t('settings.density')}>
+        <SettingRow
+          title={t('settings.compactMode')}
+          description={t('settings.compactModeDesc')}
+          control={<Switch checked={compactMode} onChange={(v) => { setCompactMode(v); writeStoredValue('compactMode', v); }} />}
+        />
+      </Panel>
+    </>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/ArchivedSection.tsx b/app/desktop/src/components/settings/sections/ArchivedSection.tsx
new file mode 100644
index 000000000..5daf677d4
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/ArchivedSection.tsx
@@ -0,0 +1,12 @@
+import { useTranslation } from 'react-i18next';
+import Panel from '../primitives/Panel';
+import EmptyBlock from '../primitives/EmptyBlock';
+
+export default function ArchivedSection() {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.archived')} description={t('settings.archivedDesc')}>
+      <EmptyBlock title={t('settings.noArchived')} description={t('settings.noArchivedDesc')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/BrowserSection.tsx b/app/desktop/src/components/settings/sections/BrowserSection.tsx
new file mode 100644
index 000000000..685600208
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/BrowserSection.tsx
@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import Switch from '../primitives/Switch';
+import { writeStoredValue } from '../utils';
+
+interface BrowserSectionProps {
+  browserPreview: boolean;
+  setBrowserPreview: (value: boolean) => void;
+}
+
+export default function BrowserSection({ browserPreview, setBrowserPreview }: BrowserSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.browser')} description={t('settings.browserDesc')}>
+      <SettingRow
+        title={t('settings.browserPreview')}
+        description={t('settings.browserPreviewDesc')}
+        control={<Switch checked={browserPreview} onChange={(v) => { setBrowserPreview(v); writeStoredValue('browserPreview', v); }} />}
+      />
+      <SettingRow title={t('settings.browserEngine')} description="Chromium / Playwright" value="Auto" />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/CcSwitchSection.tsx b/app/desktop/src/components/settings/sections/CcSwitchSection.tsx
new file mode 100644
index 000000000..66ff557d9
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/CcSwitchSection.tsx
@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next';
+import type { CcSwitchProvider } from '@/stores/modelSettingsStore';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import Switch from '../primitives/Switch';
+import Callout from '../primitives/Callout';
+import ProviderHealthRow from '../cards/ProviderHealthRow';
+import styles from '../../SettingsPage.module.css';
+
+interface CcSwitchSectionProps {
+  ccSwitchBridge: boolean;
+  setCcSwitchBridge: (value: boolean) => void;
+  ccSwitchProviders: CcSwitchProvider[];
+  updateCcSwitchProvider: (id: string, updates: Partial<Omit<CcSwitchProvider, 'id'>>) => void;
+}
+
+export default function CcSwitchSection({ ccSwitchBridge, setCcSwitchBridge, ccSwitchProviders, updateCcSwitchProvider }: CcSwitchSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.ccSwitch')} description={t('settings.ccSwitchDesc')}>
+      <SettingRow title={t('settings.ccSwitchSource')} description={t('settings.ccSwitchSourceDesc')} value={t('settings.status.localSource')} />
+      <SettingRow title={t('settings.ccSwitchBridge')} description={t('settings.ccSwitchBridgeDesc')} control={<Switch checked={ccSwitchBridge} onChange={setCcSwitchBridge} />} />
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}><strong>{t('settings.ccSwitchProviders')}</strong><span>{t('settings.ccSwitchProvidersDesc')}</span></div>
+        <div className={styles.providerList}>
+          {ccSwitchProviders.map((provider) => (
+            <ProviderHealthRow key={provider.id} id={provider.id} name={provider.name} health={provider.health}
+              modelCount={provider.modelCount} notes={provider.notes}
+              onHealthChange={(health) => updateCcSwitchProvider(provider.id, { health })}
+              onNotesChange={(notes) => updateCcSwitchProvider(provider.id, { notes })}
+            />
+          ))}
+        </div>
+      </div>
+      <Callout title={t('settings.ccSwitchHealth')} body={t('settings.ccSwitchHealthDesc')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/ComputerUseSection.tsx b/app/desktop/src/components/settings/sections/ComputerUseSection.tsx
new file mode 100644
index 000000000..32b0bff28
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/ComputerUseSection.tsx
@@ -0,0 +1,25 @@
+import { useTranslation } from 'react-i18next';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import Switch from '../primitives/Switch';
+import Callout from '../primitives/Callout';
+import { writeStoredValue } from '../utils';
+
+interface ComputerUseSectionProps {
+  computerConfirm: boolean;
+  setComputerConfirm: (value: boolean) => void;
+}
+
+export default function ComputerUseSection({ computerConfirm, setComputerConfirm }: ComputerUseSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.computerUse')} description={t('settings.computerUseDesc')}>
+      <SettingRow
+        title={t('settings.computerConfirm')}
+        description={t('settings.computerConfirmDesc')}
+        control={<Switch checked={computerConfirm} onChange={(v) => { setComputerConfirm(v); writeStoredValue('computerConfirm', v); }} />}
+      />
+      <Callout title={t('settings.computerUseGuard')} body={t('settings.computerUseGuardDesc')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/ConfigurationSection.tsx b/app/desktop/src/components/settings/sections/ConfigurationSection.tsx
new file mode 100644
index 000000000..5f7453e66
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/ConfigurationSection.tsx
@@ -0,0 +1,41 @@
+import { useTranslation } from 'react-i18next';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import SelectControl from '../primitives/SelectControl';
+import { writeStoredValue } from '../utils';
+
+type SelectValue = 'balanced' | 'detailed' | 'manual' | 'auto' | 'ask' | 'never';
+
+interface ConfigurationSectionProps {
+  approvalMode: SelectValue;
+  setApprovalMode: (value: SelectValue) => void;
+}
+
+export default function ConfigurationSection({ approvalMode, setApprovalMode }: ConfigurationSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.configuration')} description={t('settings.configurationDesc')}>
+      <SettingRow title={t('settings.defaultAgent')} description="Claude Code / Codex / OpenCode" value="Auto" />
+      <SettingRow
+        title={t('settings.routing')}
+        description={t('settings.routingDesc')}
+        value={t('settings.routingAuto')}
+      />
+      <SettingRow
+        title={t('settings.approvalMode')}
+        description={t('settings.approvalModeDesc')}
+        control={
+          <SelectControl
+            value={approvalMode}
+            onChange={(value) => { setApprovalMode(value as SelectValue); writeStoredValue('approvalMode', value); }}
+            options={[
+              ['ask', t('settings.approvalMode.ask')],
+              ['auto', t('settings.approvalMode.auto')],
+              ['manual', t('settings.approvalMode.manual')],
+            ]}
+          />
+        }
+      />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/ConnectionsSection.tsx b/app/desktop/src/components/settings/sections/ConnectionsSection.tsx
new file mode 100644
index 000000000..88e4e4099
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/ConnectionsSection.tsx
@@ -0,0 +1,39 @@
+import { useTranslation } from 'react-i18next';
+import { Globe2 } from 'lucide-react';
+import Panel from '../primitives/Panel';
+import ConnectionRow from '../primitives/ConnectionRow';
+
+interface ConnectionsSectionProps {
+  edgeOnline: boolean;
+  hubSessionActive: boolean;
+  runnerSummary: string;
+}
+
+export default function ConnectionsSection({ edgeOnline, hubSessionActive, runnerSummary }: ConnectionsSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.connections')} description={t('settings.connectionsDesc')}>
+      <ConnectionRow
+        name="Hub"
+        description={hubSessionActive ? t('status.hubConnected') : t('status.hubDisconnected')}
+        connected={hubSessionActive}
+        onlineLabel={t('settings.online')}
+        offlineLabel={t('settings.offline')}
+      />
+      <ConnectionRow
+        name="Edge"
+        description={`${t('settings.edgeLocal')} · ${runnerSummary}`}
+        connected={edgeOnline}
+        onlineLabel={t('settings.online')}
+        offlineLabel={t('settings.offline')}
+      />
+      <ConnectionRow
+        name="WebSocket"
+        description={t('status.wsConnected')}
+        connected={edgeOnline}
+        onlineLabel={t('settings.online')}
+        offlineLabel={t('settings.offline')}
+      />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/EnvironmentSection.tsx b/app/desktop/src/components/settings/sections/EnvironmentSection.tsx
new file mode 100644
index 000000000..0a93ee68b
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/EnvironmentSection.tsx
@@ -0,0 +1,14 @@
+import { useTranslation } from 'react-i18next';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+
+export default function EnvironmentSection() {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.environment')} description={t('settings.environmentDesc')}>
+      <SettingRow title="Shell" description="PowerShell 7" value="pwsh" />
+      <SettingRow title="Node" description={t('settings.environmentNodeDesc')} value="pnpm" />
+      <SettingRow title="Tauri" description={t('settings.environmentTauriDesc')} value={t('settings.enabled')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/ExecutionTargetsSection.tsx b/app/desktop/src/components/settings/sections/ExecutionTargetsSection.tsx
new file mode 100644
index 000000000..6a548656e
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/ExecutionTargetsSection.tsx
@@ -0,0 +1,78 @@
+import { useTranslation } from 'react-i18next';
+import { Monitor, Globe2, Server, Computer, Cpu } from 'lucide-react';
+import type { RunnerHealthItem } from '@shared/types';
+import Panel from '../primitives/Panel';
+import ExecutionTargetCard from '../primitives/ExecutionTargetCard';
+import Callout from '../primitives/Callout';
+import RunnerRow from '../cards/RunnerRow';
+import { shortId } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+interface ExecutionTargetsSectionProps {
+  edgeOnline: boolean;
+  health: { status?: string; checks?: { runners?: { items?: RunnerHealthItem[] } } } | null | undefined;
+  hubSessionActive: boolean;
+  runnerSummary: string;
+  runnerItems: RunnerHealthItem[];
+  availableRunners: number;
+  desktopDeviceStatus: string;
+  deviceId: string | null;
+}
+
+export default function ExecutionTargetsSection({
+  edgeOnline, health, hubSessionActive, runnerSummary, runnerItems,
+  availableRunners, desktopDeviceStatus, deviceId,
+}: ExecutionTargetsSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.executionTargets')} description={t('settings.executionTargetsDesc')}>
+      <div className={styles.targetGrid}>
+        <ExecutionTargetCard
+          icon={<Monitor size={18} />}
+          title={t('settings.targetLocalEdge')}
+          description={t('settings.targetLocalEdgeDesc')}
+          status={edgeOnline ? health?.status ?? 'ok' : t('settings.offline')}
+          metric={runnerSummary}
+          connected={edgeOnline && availableRunners > 0}
+        />
+        <ExecutionTargetCard
+          icon={<Globe2 size={18} />}
+          title={t('settings.targetHubRelay')}
+          description={t('settings.targetHubRelayDesc')}
+          status={hubSessionActive ? t('settings.enabled') : t('settings.notConfigured')}
+          metric={hubSessionActive ? t('settings.targetHubSignedIn') : t('settings.targetHubSignInRequired')}
+          connected={hubSessionActive}
+        />
+        <ExecutionTargetCard
+          icon={<Monitor size={18} />}
+          title={t('settings.desktopDevice')}
+          description={t('settings.desktopDeviceDesc')}
+          status={desktopDeviceStatus}
+          metric={deviceId ? shortId(deviceId) : t('settings.desktopDeviceMissingDesc')}
+          connected={false}
+        />
+        <ExecutionTargetCard
+          icon={<Server size={18} />}
+          title={t('settings.targetSsh')}
+          description={t('settings.targetSshDesc')}
+          status={t('settings.statusPlanned')}
+          metric="SSH / Tailscale"
+        />
+        <ExecutionTargetCard
+          icon={<Computer size={18} />}
+          title={t('settings.targetCloudEdge')}
+          description={t('settings.targetCloudEdgeDesc')}
+          status={t('settings.statusPlanned')}
+          metric="Cloud Edge"
+        />
+      </div>
+      {runnerItems.length > 0 ? (
+        <div className={styles.runnerList}>
+          {runnerItems.map((runner) => <RunnerRow key={runner.id} runner={runner} />)}
+        </div>
+      ) : (
+        <Callout title={t('settings.runnerInventory')} body={t('settings.runnerInventoryDesc')} />
+      )}
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/GeneralSection.tsx b/app/desktop/src/components/settings/sections/GeneralSection.tsx
new file mode 100644
index 000000000..a1d542ede
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/GeneralSection.tsx
@@ -0,0 +1,65 @@
+import { useTranslation } from 'react-i18next';
+import { Monitor, Eye } from 'lucide-react';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import ModeCard from '../primitives/ModeCard';
+import Switch from '../primitives/Switch';
+import SelectControl from '../primitives/SelectControl';
+import { writeStoredValue } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+type SelectValue = 'balanced' | 'detailed' | 'manual' | 'auto' | 'ask' | 'never';
+
+interface GeneralSectionProps {
+  detailLevel: SelectValue;
+  setDetailLevel: (value: SelectValue) => void;
+  compactMode: boolean;
+  setCompactMode: (value: boolean) => void;
+}
+
+export default function GeneralSection({ detailLevel, setDetailLevel, compactMode, setCompactMode }: GeneralSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Panel title={t('settings.workMode')} description={t('settings.workModeDesc')}>
+        <div className={styles.modeGrid}>
+          <ModeCard
+            active={detailLevel === 'detailed'}
+            icon={<Monitor size={20} />}
+            title={t('settings.modeCoding')}
+            description={t('settings.modeCodingDesc')}
+            onClick={() => { setDetailLevel('detailed'); writeStoredValue('detailLevel', 'detailed'); }}
+          />
+          <ModeCard
+            active={detailLevel === 'balanced'}
+            icon={<Eye size={20} />}
+            title={t('settings.modeDaily')}
+            description={t('settings.modeDailyDesc')}
+            onClick={() => { setDetailLevel('balanced'); writeStoredValue('detailLevel', 'balanced'); }}
+          />
+        </div>
+      </Panel>
+      <Panel title={t('settings.general')}>
+        <SettingRow
+          title={t('settings.compactMode')}
+          description={t('settings.compactModeDesc')}
+          control={<Switch checked={compactMode} onChange={(v) => { setCompactMode(v); writeStoredValue('compactMode', v); }} />}
+        />
+        <SettingRow
+          title={t('settings.detailLevel')}
+          description={t('settings.detailLevelDesc')}
+          control={
+            <SelectControl
+              value={detailLevel}
+              onChange={(value) => { setDetailLevel(value as SelectValue); writeStoredValue('detailLevel', value); }}
+              options={[
+                ['detailed', t('settings.detailLevel.detailed')],
+                ['balanced', t('settings.detailLevel.balanced')],
+              ]}
+            />
+          }
+        />
+      </Panel>
+    </>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/GitSection.tsx b/app/desktop/src/components/settings/sections/GitSection.tsx
new file mode 100644
index 000000000..605b5e47b
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/GitSection.tsx
@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+import { GitBranch } from 'lucide-react';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import Switch from '../primitives/Switch';
+import { writeStoredValue } from '../utils';
+
+interface GitSectionProps {
+  autoDetectGit: boolean;
+  setAutoDetectGit: (value: boolean) => void;
+}
+
+export default function GitSection({ autoDetectGit, setAutoDetectGit }: GitSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.git')} description={t('settings.gitDesc')}>
+      <SettingRow
+        title={t('settings.autoDetectGit')}
+        description={t('settings.autoDetectGitDesc')}
+        control={<Switch checked={autoDetectGit} onChange={(v) => { setAutoDetectGit(v); writeStoredValue('autoDetectGit', v); }} />}
+      />
+      <SettingRow title={t('settings.branchPolicy')} description="feat/* -> dev/delicious233 -> master" />
+      <SettingRow title={t('settings.commitStyle')} description="type(scope): summary" />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/GroupChatSection.tsx b/app/desktop/src/components/settings/sections/GroupChatSection.tsx
new file mode 100644
index 000000000..b9ecfed78
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/GroupChatSection.tsx
@@ -0,0 +1,67 @@
+import { useTranslation } from 'react-i18next';
+import { MessageSquareText, UserCircle, Bot, Globe2 } from 'lucide-react';
+import type { AgentInfo } from '@shared/types';
+import type { Session } from '@/api/hubClient';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import SummaryCard from '../primitives/SummaryCard';
+import EmptyBlock from '../primitives/EmptyBlock';
+import AuthGapBlock from '../primitives/AuthGapBlock';
+import Switch from '../primitives/Switch';
+import HubSessionRow from '../cards/HubSessionRow';
+import { writeStoredValue } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+function sessionIdOf(session: Session) { return session.session_id ?? session.id ?? 'session'; }
+
+interface GroupChatSectionProps {
+  hubSessionActive: boolean;
+  isLoading: boolean;
+  isError: boolean;
+  imSessions: Session[];
+  imContactsCount: number;
+  imSnapshotStatus: string;
+  agents: AgentInfo[];
+  edgeOnline: boolean;
+  groupChatEnabled: boolean;
+  setGroupChatEnabled: (value: boolean) => void;
+  onOpenAuth: () => void;
+}
+
+export default function GroupChatSection({
+  hubSessionActive, isLoading, isError, imSessions, imContactsCount, imSnapshotStatus,
+  agents, edgeOnline, groupChatEnabled, setGroupChatEnabled, onOpenAuth,
+}: GroupChatSectionProps) {
+  const { t } = useTranslation();
+  const imGroupSessions = imSessions.filter((s) => s.type === 'group');
+  const imPrivateSessions = imSessions.filter((s) => s.type !== 'group');
+
+  return (
+    <Panel title={t('settings.groupChat')} description={t('settings.groupChatDesc')}>
+      {!hubSessionActive ? (
+        <AuthGapBlock title={t('settings.hubSignInRequired')} description={t('settings.onlineImSignedOutDesc')} actionLabel={t('settings.signIn')} onAction={onOpenAuth} />
+      ) : isError ? (
+        <EmptyBlock title={t('settings.hubUnavailable')} description={t('settings.onlineImHubErrorDesc')} />
+      ) : null}
+      <div className={styles.summaryGrid}>
+        <SummaryCard icon={<MessageSquareText size={18} />} label={t('settings.groupChatRooms')} value={isLoading ? t('settings.loading') : `${imGroupSessions.length}`} detail={t('settings.groupChatRoomsDesc')} />
+        <SummaryCard icon={<UserCircle size={18} />} label={t('settings.onlineImContacts')} value={isLoading ? t('settings.loading') : `${imContactsCount}`} detail={t('settings.onlineImContactsDesc')} />
+        <SummaryCard icon={<Bot size={18} />} label={t('settings.groupChatAgents')} value={`${agents.length}`} detail={edgeOnline ? t('settings.groupChatAgentsDesc') : t('settings.edgeOffline')} />
+        <SummaryCard icon={<Globe2 size={18} />} label={t('settings.onlineImSessions')} value={isLoading ? t('settings.loading') : `${imPrivateSessions.length}/${imSessions.length}`} detail={t('settings.groupChatSessionMixDesc')} />
+      </div>
+      <SettingRow title={t('settings.enableGroupChat')} description={t('settings.enableGroupChatDesc')} control={<Switch checked={hubSessionActive && groupChatEnabled} onChange={(v) => { setGroupChatEnabled(v); writeStoredValue('groupChat', v); }} disabled={!hubSessionActive} />} />
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}>
+          <strong>{t('settings.groupChatHubRooms')}</strong>
+          <span>{t('settings.groupChatHubRoomsDesc')}</span>
+        </div>
+        {hubSessionActive && !isError && imGroupSessions.length > 0 ? (
+          <div className={styles.taskList}>{imGroupSessions.slice(0, 5).map((session) => <HubSessionRow key={`group-${sessionIdOf(session)}`} session={session} />)}</div>
+        ) : hubSessionActive && !isError ? (
+          <EmptyBlock title={t('settings.groupChatNoRooms')} description={t('settings.groupChatNoRoomsDesc')} />
+        ) : null}
+      </div>
+      <SettingRow title={t('settings.groupChatModeration')} description={t('settings.groupChatModerationDesc')} value={imSnapshotStatus} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/HooksSection.tsx b/app/desktop/src/components/settings/sections/HooksSection.tsx
new file mode 100644
index 000000000..a3c7c1a5e
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/HooksSection.tsx
@@ -0,0 +1,27 @@
+import { useTranslation } from 'react-i18next';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import Switch from '../primitives/Switch';
+import Callout from '../primitives/Callout';
+import { writeStoredValue } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+interface HooksSectionProps {
+  enableHooks: boolean;
+  setEnableHooks: (value: boolean) => void;
+}
+
+export default function HooksSection({ enableHooks, setEnableHooks }: HooksSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.hooks')} description={t('settings.hooksDesc')}>
+      <SettingRow
+        title={t('settings.enableHooks')}
+        description={t('settings.enableHooksDesc')}
+        control={<Switch checked={enableHooks} onChange={(v) => { setEnableHooks(v); writeStoredValue('enableHooks', v); }} />}
+      />
+      <SettingRow title="pre-run" description={t('settings.hookPreRun')} value={t('settings.notConfigured')} />
+      <SettingRow title="post-run" description={t('settings.hookPostRun')} value={t('settings.notConfigured')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/KeyboardSection.tsx b/app/desktop/src/components/settings/sections/KeyboardSection.tsx
new file mode 100644
index 000000000..a4010dd27
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/KeyboardSection.tsx
@@ -0,0 +1,32 @@
+import { useTranslation } from 'react-i18next';
+import { Keyboard } from 'lucide-react';
+import Panel from '../primitives/Panel';
+import styles from '../../SettingsPage.module.css';
+
+const shortcuts = [
+  { keys: ['Enter'], actionKey: 'shortcut.send' },
+  { keys: ['Shift', 'Enter'], actionKey: 'shortcut.newline' },
+  { keys: ['Ctrl', 'K'], actionKey: 'shortcut.search' },
+  { keys: ['⌘/Ctrl', 'B'], actionKey: 'shortcut.toggleSidebar' },
+  { keys: ['⌘/Ctrl', 'J'], actionKey: 'shortcut.toggleRunPanel' },
+  { keys: ['Esc'], actionKey: 'shortcut.close' },
+  { keys: ['?'], actionKey: 'shortcut.help' },
+];
+
+export default function KeyboardSection() {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.keyboard')} description={t('settings.keyboardDesc')}>
+      <div className={styles.shortcutTable}>
+        {shortcuts.map((shortcut) => (
+          <div key={`${shortcut.keys.join('+')}-${shortcut.actionKey}`} className={styles.shortcutRow}>
+            <span>{t(shortcut.actionKey)}</span>
+            <div>
+              {shortcut.keys.map((key) => <kbd key={key}>{key}</kbd>)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/McpSection.tsx b/app/desktop/src/components/settings/sections/McpSection.tsx
new file mode 100644
index 000000000..4568a35bb
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/McpSection.tsx
@@ -0,0 +1,56 @@
+import { useTranslation } from 'react-i18next';
+import { Plug, ShieldCheck, Bot, Globe2 } from 'lucide-react';
+import type { AgentInfo } from '@shared/types';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import SummaryCard from '../primitives/SummaryCard';
+import CapabilityCard from '../primitives/CapabilityCard';
+import EmptyBlock from '../primitives/EmptyBlock';
+import Callout from '../primitives/Callout';
+import Switch from '../primitives/Switch';
+import McpRuntimeCard from '../cards/McpRuntimeCard';
+import { writeStoredValue } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+interface McpSectionProps {
+  agents: AgentInfo[];
+  edgeOnline: boolean;
+  hubSessionActive: boolean;
+  enableMcp: boolean;
+  setEnableMcp: (value: boolean) => void;
+}
+
+export default function McpSection({ agents, edgeOnline, hubSessionActive, enableMcp, setEnableMcp }: McpSectionProps) {
+  const { t } = useTranslation();
+  const mcpCapableAgents = agents.filter((a) => a.capabilities.mcpIntegration).length;
+  const mcpPermissionHookAgents = agents.filter((a) => a.capabilities.permissionHooks).length;
+  const mcpSubAgentAgents = agents.filter((a) => a.capabilities.subAgentSpawn).length;
+
+  return (
+    <Panel title={t('settings.mcp')} description={t('settings.mcpDesc')}>
+      <div className={styles.summaryGrid}>
+        <SummaryCard icon={<Plug size={18} />} label={t('settings.mcpRuntimeSupport')} value={`${mcpCapableAgents}/${agents.length}`} detail={edgeOnline ? t('settings.mcpRuntimeSupportDesc') : t('settings.edgeOffline')} />
+        <SummaryCard icon={<ShieldCheck size={18} />} label={t('settings.mcpPermissionHooks')} value={`${mcpPermissionHookAgents}`} detail={t('settings.mcpPermissionHooksDesc')} />
+        <SummaryCard icon={<Bot size={18} />} label={t('settings.mcpSubAgentSpawn')} value={`${mcpSubAgentAgents}`} detail={t('settings.mcpSubAgentSpawnDesc')} />
+        <SummaryCard icon={<Globe2 size={18} />} label={t('settings.mcpHubSync')} value={hubSessionActive ? t('settings.status.interfaceGap') : t('settings.status.loginLocked')} detail={hubSessionActive ? t('settings.mcpHubSyncNoInterface') : t('settings.mcpHubSyncSignedOut')} />
+      </div>
+      <SettingRow title={t('settings.enableMcp')} description={t('settings.enableMcpDesc')} control={<Switch checked={enableMcp && edgeOnline} onChange={(v) => { setEnableMcp(v); writeStoredValue('enableMcp', v); }} disabled={!edgeOnline} />} />
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}><strong>{t('settings.mcpRuntimeMatrix')}</strong><span>{t('settings.mcpRuntimeMatrixDesc')}</span></div>
+        {agents.length > 0 ? (
+          <div className={styles.profileGrid}>{agents.map((agent) => <McpRuntimeCard key={`mcp-${agent.id}`} agent={agent} />)}</div>
+        ) : <EmptyBlock title={t('settings.mcpNoRuntimes')} description={t('settings.mcpNoRuntimesDesc')} />}
+      </div>
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}><strong>{t('settings.mcpTemplates')}</strong><span>{t('settings.mcpTemplatesDesc')}</span></div>
+        <div className={styles.capabilityGrid}>
+          <CapabilityCard title="Filesystem" description={t('settings.mcpFilesystem')} status={t('settings.mcpTemplate')} />
+          <CapabilityCard title="GitHub" description={t('settings.mcpGitHub')} status={t('settings.notConfigured')} />
+          <CapabilityCard title={t('settings.mcpTokenDanceHub')} description={t('settings.mcpTokenDanceHubDesc')} status={hubSessionActive ? t('settings.status.interfaceGap') : t('settings.status.loginLocked')} />
+          <CapabilityCard title={t('settings.mcpRemoteServer')} description={t('settings.mcpRemoteServerDesc')} status={t('settings.status.interfaceGap')} />
+        </div>
+      </div>
+      <Callout title={t('settings.mcpGuard')} body={t('settings.mcpGuardDesc')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/ModelMappingSection.tsx b/app/desktop/src/components/settings/sections/ModelMappingSection.tsx
new file mode 100644
index 000000000..cf16d8bde
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/ModelMappingSection.tsx
@@ -0,0 +1,44 @@
+import { useTranslation } from 'react-i18next';
+import type { ModelAliasMapping } from '@/stores/modelSettingsStore';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import Switch from '../primitives/Switch';
+import Callout from '../primitives/Callout';
+import AliasMappingRow from '../cards/AliasMappingRow';
+import styles from '../../SettingsPage.module.css';
+
+interface ModelMappingSectionProps {
+  modelMappingEnabled: boolean;
+  setModelMappingEnabled: (value: boolean) => void;
+  modelAliases: ModelAliasMapping[];
+  toggleModelAlias: (alias: string) => void;
+  updateModelAlias: (alias: string, updates: Partial<Omit<ModelAliasMapping, 'alias'>>) => void;
+}
+
+export default function ModelMappingSection({
+  modelMappingEnabled, setModelMappingEnabled, modelAliases,
+  toggleModelAlias, updateModelAlias,
+}: ModelMappingSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.modelMapping')} description={t('settings.modelMappingDesc')}>
+      <SettingRow title={t('settings.modelMappingSource')} description={t('settings.modelMappingSourceDesc')} value={t('settings.status.localSource')} />
+      <SettingRow title={t('settings.enableModelMapping')} description={t('settings.enableModelMappingDesc')} control={<Switch checked={modelMappingEnabled} onChange={setModelMappingEnabled} />} />
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}><strong>{t('settings.modelAlias')}</strong><span>{t('settings.modelAliasDesc')}</span></div>
+        <div className={styles.modelAliasList}>
+          {modelAliases.map((item) => (
+            <AliasMappingRow key={item.alias} alias={item.alias} model={item.model} provider={item.provider}
+              reasoningEffort={item.reasoningEffort} enabled={item.enabled}
+              onToggle={() => toggleModelAlias(item.alias)}
+              onModelChange={(model) => updateModelAlias(item.alias, { model })}
+              onProviderChange={(provider) => updateModelAlias(item.alias, { provider })}
+              onReasoningChange={(reasoningEffort) => updateModelAlias(item.alias, { reasoningEffort })}
+            />
+          ))}
+        </div>
+      </div>
+      <Callout title={t('settings.modelPolicy')} body={t('settings.modelPolicyDesc')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/ModelsSection.tsx b/app/desktop/src/components/settings/sections/ModelsSection.tsx
new file mode 100644
index 000000000..b2b1a4b9d
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/ModelsSection.tsx
@@ -0,0 +1,48 @@
+import { useTranslation } from 'react-i18next';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import Switch from '../primitives/Switch';
+import Callout from '../primitives/Callout';
+import SelectControl from '../primitives/SelectControl';
+import type { ReasoningEffortPreference } from '@/stores/modelSettingsStore';
+
+const MODEL_OPTIONS = [
+  ['auto', 'Auto'], ['claude-opus-4-7', 'claude-opus-4-7'], ['claude-sonnet-4-6', 'claude-sonnet-4-6'],
+  ['claude-haiku-4-5', 'claude-haiku-4-5'], ['gpt-5.5', 'gpt-5.5'], ['glm-5.1', 'glm-5.1'],
+] as const;
+
+const PROVIDER_OPTIONS = [
+  ['tokendance-relay', 'TokenDance Relay'], ['anthropic', 'Anthropic'], ['openai', 'OpenAI'], ['cc-switch-local', 'cc-switch local'],
+] as const;
+
+const REASONING_OPTIONS = [
+  ['low', 'Low'], ['medium', 'Medium'], ['high', 'High'], ['max', 'Max'],
+] as const;
+
+interface ModelsSectionProps {
+  defaultModel: string;
+  defaultProvider: string;
+  modelReasoningEffort: ReasoningEffortPreference;
+  providerFallbackEnabled: boolean;
+  setDefaultModel: (value: string) => void;
+  setDefaultProvider: (value: string) => void;
+  setModelReasoningEffort: (value: ReasoningEffortPreference) => void;
+  setProviderFallbackEnabled: (value: boolean) => void;
+}
+
+export default function ModelsSection({
+  defaultModel, defaultProvider, modelReasoningEffort, providerFallbackEnabled,
+  setDefaultModel, setDefaultProvider, setModelReasoningEffort, setProviderFallbackEnabled,
+}: ModelsSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.models')} description={t('settings.modelsDesc')}>
+      <SettingRow title={t('settings.modelConfigSource')} description={t('settings.modelConfigSourceDesc')} value={t('settings.status.localSource')} />
+      <SettingRow title={t('settings.modelDefault')} description={t('settings.modelDefaultDesc')} control={<SelectControl value={defaultModel} options={MODEL_OPTIONS.map(([v, l]) => [v, l])} onChange={setDefaultModel} />} />
+      <SettingRow title={t('settings.modelDefaultProvider')} description={t('settings.modelDefaultProviderDesc')} control={<SelectControl value={defaultProvider} options={PROVIDER_OPTIONS.map(([v, l]) => [v, l])} onChange={setDefaultProvider} />} />
+      <SettingRow title={t('settings.modelReasoning')} description={t('settings.modelReasoningDesc')} control={<SelectControl value={modelReasoningEffort} options={REASONING_OPTIONS.map(([v, l]) => [v, l])} onChange={(value) => setModelReasoningEffort(value as ReasoningEffortPreference)} />} />
+      <SettingRow title={t('settings.modelProviderFallback')} description={t('settings.modelProviderFallbackDesc')} control={<Switch checked={providerFallbackEnabled} onChange={setProviderFallbackEnabled} />} />
+      <Callout title={t('settings.modelLocalGuard')} body={t('settings.modelLocalGuardDesc')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/OnlineImSection.tsx b/app/desktop/src/components/settings/sections/OnlineImSection.tsx
new file mode 100644
index 000000000..680772467
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/OnlineImSection.tsx
@@ -0,0 +1,99 @@
+import { useTranslation } from 'react-i18next';
+import { MessageSquareText, UserCircle, ShieldCheck, Globe2, RefreshCw } from 'lucide-react';
+import type { ContactInfo, FriendRequestInfo, HubNotification, Session } from '@/api/hubClient';
+import Panel from '../primitives/Panel';
+import SummaryCard from '../primitives/SummaryCard';
+import EmptyBlock from '../primitives/EmptyBlock';
+import AuthGapBlock from '../primitives/AuthGapBlock';
+import CapabilityCard from '../primitives/CapabilityCard';
+import HubSessionRow from '../cards/HubSessionRow';
+import HubFriendRequestRow from '../cards/HubFriendRequestRow';
+import HubNotificationRow from '../cards/HubNotificationRow';
+import { statusLabelFromQuery } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+interface OnlineImSectionProps {
+  hubSessionActive: boolean;
+  imSessions: Session[];
+  imContacts: ContactInfo[];
+  imFriendRequests: FriendRequestInfo[];
+  imNotifications: HubNotification[];
+  isLoading: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  isSuccess: boolean;
+  refetch: () => void;
+  deviceRegistrationStatus: 'idle' | 'registering' | 'registered' | 'error';
+  onOpenAuth: () => void;
+}
+
+export default function OnlineImSection({
+  hubSessionActive, imSessions, imContacts, imFriendRequests, imNotifications,
+  isLoading, isFetching, isError, isSuccess, refetch, deviceRegistrationStatus, onOpenAuth,
+}: OnlineImSectionProps) {
+  const { t } = useTranslation();
+
+  const imSnapshotStatus = statusLabelFromQuery({
+    signedIn: hubSessionActive, isLoading, isFetching, isError, isSuccess, t,
+  });
+
+  return (
+    <Panel title={t('settings.onlineIm')} description={t('settings.onlineImDesc')}>
+      {!hubSessionActive ? (
+        <AuthGapBlock title={t('settings.hubSignInRequired')} description={t('settings.onlineImSignedOutDesc')} actionLabel={t('settings.signIn')} onAction={onOpenAuth} />
+      ) : isError ? (
+        <EmptyBlock title={t('settings.hubUnavailable')} description={t('settings.onlineImHubErrorDesc')} />
+      ) : null}
+      <div className={styles.summaryGrid}>
+        <SummaryCard icon={<MessageSquareText size={18} />} label={t('settings.onlineImSessions')} value={isLoading ? t('settings.loading') : `${imSessions.length}`} detail={hubSessionActive ? t('settings.onlineImSessionsDesc') : t('settings.onlineImSignedOutDesc')} />
+        <SummaryCard icon={<UserCircle size={18} />} label={t('settings.onlineImContacts')} value={isLoading ? t('settings.loading') : `${imContacts.length}`} detail={t('settings.onlineImContactsDesc')} />
+        <SummaryCard icon={<ShieldCheck size={18} />} label={t('settings.onlineImFriendRequests')} value={isLoading ? t('settings.loading') : `${imFriendRequests.length}`} detail={t('settings.onlineImFriendRequestsDesc')} />
+        <SummaryCard icon={<Globe2 size={18} />} label={t('settings.onlineImNotifications')} value={isLoading ? t('settings.loading') : `${imNotifications.length}`} detail={t('settings.onlineImNotificationsDesc')} />
+      </div>
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}>
+          <div className={styles.taskSectionTitleRow}>
+            <div>
+              <strong>{t('settings.onlineImSnapshot')}</strong>
+              <span>{t('settings.onlineImSnapshotDesc')}</span>
+            </div>
+            {hubSessionActive ? (
+              <div className={styles.taskSectionActions}>
+                <span className={`${styles.statusPill} ${isSuccess ? styles.statusPillOn : ''}`}>{imSnapshotStatus}</span>
+                <button type="button" className={styles.secondaryBtn} onClick={() => void refetch()} disabled={isFetching}>
+                  <RefreshCw size={15} />
+                  {isFetching ? t('settings.taskRefreshingRuns') : t('settings.taskRefreshRuns')}
+                </button>
+              </div>
+            ) : null}
+          </div>
+        </div>
+        {hubSessionActive && !isError && imSessions.length > 0 ? (
+          <div className={styles.taskList}>{imSessions.slice(0, 5).map((session) => <HubSessionRow key={session.session_id ?? session.id ?? 'session'} session={session} />)}</div>
+        ) : hubSessionActive && !isError ? (
+          <EmptyBlock title={t('settings.onlineImNoSessions')} description={t('settings.onlineImNoSessionsDesc')} />
+        ) : null}
+      </div>
+      {hubSessionActive && !isError ? (
+        <div className={styles.taskSection}>
+          <div className={styles.taskSectionHeader}>
+            <strong>{t('settings.onlineImReadonlySummary')}</strong>
+            <span>{t('settings.onlineImReadonlySummaryDesc')}</span>
+          </div>
+          {imFriendRequests.length > 0 || imNotifications.length > 0 ? (
+            <div className={styles.taskList}>
+              {imFriendRequests.slice(0, 3).map((request) => <HubFriendRequestRow key={request.request_id} request={request} />)}
+              {imNotifications.slice(0, 3).map((notification) => <HubNotificationRow key={notification.id} notification={notification} />)}
+            </div>
+          ) : (
+            <EmptyBlock title={t('settings.onlineImNoReadonlyItems')} description={t('settings.onlineImNoReadonlyItemsDesc')} />
+          )}
+        </div>
+      ) : null}
+      <div className={styles.capabilityGrid}>
+        <CapabilityCard title={t('settings.onlineImPresence')} description={t('settings.onlineImPresenceDesc')} status={deviceRegistrationStatus === 'error' ? t('settings.status.error') : hubSessionActive ? t('settings.status.interfaceGap') : t('settings.status.loginLocked')} />
+        <CapabilityCard title={t('settings.onlineImNotificationActions')} description={t('settings.onlineImNotificationActionsDesc')} status={imSnapshotStatus} />
+      </div>
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/PermissionsSection.tsx b/app/desktop/src/components/settings/sections/PermissionsSection.tsx
new file mode 100644
index 000000000..236dc4466
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/PermissionsSection.tsx
@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import Switch from '../primitives/Switch';
+import { writeStoredValue } from '../utils';
+
+interface PermissionsSectionProps {
+  autoReview: boolean;
+  setAutoReview: (value: boolean) => void;
+  fullAccess: boolean;
+  setFullAccess: (value: boolean) => void;
+}
+
+export default function PermissionsSection({ autoReview, setAutoReview, fullAccess, setFullAccess }: PermissionsSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.permissions')} description={t('settings.permissionsDesc')}>
+      <SettingRow
+        title={t('settings.autoReview')}
+        description={t('settings.autoReviewDesc')}
+        control={<Switch checked={autoReview} onChange={(v) => { setAutoReview(v); writeStoredValue('autoReview', v); }} />}
+      />
+      <SettingRow
+        title={t('settings.fullAccess')}
+        description={t('settings.fullAccessDesc')}
+        control={<Switch checked={fullAccess} onChange={(v) => { setFullAccess(v); writeStoredValue('fullAccess', v); }} />}
+      />
+      <SettingRow title={t('settings.permissionLedger')} description={t('settings.permissionLedgerDesc')} value={t('settings.statusPlanned')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/PersonalizationSection.tsx b/app/desktop/src/components/settings/sections/PersonalizationSection.tsx
new file mode 100644
index 000000000..69f85680f
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/PersonalizationSection.tsx
@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import Callout from '../primitives/Callout';
+
+interface PersonalizationSectionProps {
+  username: string | null;
+}
+
+export default function PersonalizationSection({ username }: PersonalizationSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.personalization')} description={t('settings.personalizationDesc')}>
+      <SettingRow title={t('settings.displayName')} description={username ?? 'AgentHub User'} value="Local" />
+      <SettingRow title={t('settings.instructions')} description={t('settings.instructionsDesc')} action />
+      <Callout title={t('settings.personalizationNote')} body={t('settings.personalizationNoteDesc')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/PlatformsSection.tsx b/app/desktop/src/components/settings/sections/PlatformsSection.tsx
new file mode 100644
index 000000000..e26f96e3b
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/PlatformsSection.tsx
@@ -0,0 +1,41 @@
+import { useTranslation } from 'react-i18next';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import CapabilityCard from '../primitives/CapabilityCard';
+import styles from '../../SettingsPage.module.css';
+
+interface PlatformsSectionProps {
+  hubSessionActive: boolean;
+}
+
+export default function PlatformsSection({ hubSessionActive }: PlatformsSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.platforms')} description={t('settings.platformsDesc')}>
+      <SettingRow
+        title={t('settings.platformSync')}
+        description={t('settings.platformSyncDesc')}
+        control={<SwitchPlaceholder />}
+      />
+      <SettingRow
+        title={t('settings.platformSyncSource')}
+        description={t('settings.platformSyncSourceDesc')}
+        value={hubSessionActive ? t('settings.status.interfaceGap') : t('settings.status.loginLocked')}
+      />
+      <div className={styles.capabilityGrid}>
+        <CapabilityCard title="macOS" description={t('settings.platformMacosDesc')} status={t('settings.status.localSource')} />
+        <CapabilityCard title="Windows" description={t('settings.platformWindowsDesc')} status={t('settings.status.localSource')} />
+        <CapabilityCard title="Android" description={t('settings.platformAndroidDesc')} status={hubSessionActive ? t('settings.status.interfaceGap') : t('settings.status.loginLocked')} />
+        <CapabilityCard title="Web" description={t('settings.platformWebDesc')} status={hubSessionActive ? t('settings.status.interfaceGap') : t('settings.status.loginLocked')} />
+      </div>
+    </Panel>
+  );
+}
+
+function SwitchPlaceholder() {
+  return (
+    <button className={`${styles.switch}`} role="switch" aria-checked={false} disabled>
+      <span />
+    </button>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/RemoteControlSection.tsx b/app/desktop/src/components/settings/sections/RemoteControlSection.tsx
new file mode 100644
index 000000000..753485e42
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/RemoteControlSection.tsx
@@ -0,0 +1,27 @@
+import { useTranslation } from 'react-i18next';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import styles from '../../SettingsPage.module.css';
+
+interface RemoteControlSectionProps {
+  hubSessionActive: boolean;
+}
+
+export default function RemoteControlSection({ hubSessionActive }: RemoteControlSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.remoteControl')} description={t('settings.remoteControlDesc')}>
+      <SettingRow
+        title={t('settings.remoteControlEnable')}
+        description={t('settings.remoteControlEnableDesc')}
+        control={<button className={`${styles.switch}`} role="switch" aria-checked={false} disabled><span /></button>}
+      />
+      <SettingRow title={t('settings.remoteControlApproval')} description={t('settings.remoteControlApprovalDesc')} value={t('settings.approvalMode.ask')} />
+      <SettingRow
+        title={t('settings.remoteControlDevices')}
+        description={t('settings.remoteControlDevicesDesc')}
+        value={hubSessionActive ? t('settings.status.interfaceGap') : t('settings.status.loginLocked')}
+      />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/SecurityAuditSection.tsx b/app/desktop/src/components/settings/sections/SecurityAuditSection.tsx
new file mode 100644
index 000000000..de4257d21
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/SecurityAuditSection.tsx
@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import Switch from '../primitives/Switch';
+import Callout from '../primitives/Callout';
+import { writeStoredValue } from '../utils';
+
+interface SecurityAuditSectionProps {
+  auditTrail: boolean;
+  setAuditTrail: (value: boolean) => void;
+}
+
+export default function SecurityAuditSection({ auditTrail, setAuditTrail }: SecurityAuditSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.securityAudit')} description={t('settings.securityAuditDesc')}>
+      <SettingRow title={t('settings.auditTrail')} description={t('settings.auditTrailDesc')} control={<Switch checked={auditTrail} onChange={(v) => { setAuditTrail(v); writeStoredValue('auditTrail', v); }} />} />
+      <SettingRow title={t('settings.auditTrailSource')} description={t('settings.auditTrailSourceDesc')} value={auditTrail ? t('settings.status.localSource') : t('settings.notConfigured')} />
+      <SettingRow title={t('settings.permissionLedger')} description={t('settings.permissionLedgerDesc')} value={t('settings.status.interfaceGap')} />
+      <SettingRow title={t('settings.secretScan')} description={t('settings.secretScanDesc')} value={t('settings.status.interfaceGap')} />
+      <Callout title={t('settings.securityGuard')} body={t('settings.securityGuardDesc')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/SkillsSection.tsx b/app/desktop/src/components/settings/sections/SkillsSection.tsx
new file mode 100644
index 000000000..e96990cc3
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/SkillsSection.tsx
@@ -0,0 +1,66 @@
+import { useTranslation } from 'react-i18next';
+import { Code2, ShieldCheck, TerminalSquare, Globe2 } from 'lucide-react';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import SummaryCard from '../primitives/SummaryCard';
+import CapabilityCard from '../primitives/CapabilityCard';
+import Callout from '../primitives/Callout';
+import Switch from '../primitives/Switch';
+import ProjectSkillCard from '../cards/ProjectSkillCard';
+import styles from '../../SettingsPage.module.css';
+
+export interface ProjectSkill {
+  id: string;
+  title: string;
+  descriptionKey: string;
+  status: 'ready' | 'review';
+  hasScripts: boolean;
+  hasReferences: boolean;
+}
+
+const PROJECT_SKILLS: ProjectSkill[] = [
+  { id: 'adapter-dev', title: 'adapter-dev', descriptionKey: 'settings.skill.adapterDevDesc', status: 'ready', hasScripts: false, hasReferences: false },
+  { id: 'dev-loop', title: 'dev-loop', descriptionKey: 'settings.skill.devLoopDesc', status: 'ready', hasScripts: false, hasReferences: true },
+  { id: 'env-sandbox', title: 'env-sandbox', descriptionKey: 'settings.skill.envSandboxDesc', status: 'ready', hasScripts: false, hasReferences: false },
+  { id: 'integration-test', title: 'integration-test', descriptionKey: 'settings.skill.integrationTestDesc', status: 'ready', hasScripts: false, hasReferences: false },
+  { id: 'pre-push', title: 'pre-push', descriptionKey: 'settings.skill.prePushDesc', status: 'review', hasScripts: false, hasReferences: false },
+  { id: 'test-coverage', title: 'test-coverage', descriptionKey: 'settings.skill.testCoverageDesc', status: 'ready', hasScripts: false, hasReferences: false },
+  { id: 'ui-screenshot', title: 'ui-screenshot', descriptionKey: 'settings.skill.uiScreenshotDesc', status: 'ready', hasScripts: true, hasReferences: false },
+];
+
+interface SkillsSectionProps {
+  hubSessionActive: boolean;
+}
+
+export default function SkillsSection({ hubSessionActive }: SkillsSectionProps) {
+  const { t } = useTranslation();
+  const skillScriptCount = PROJECT_SKILLS.filter((s) => s.hasScripts).length;
+  const skillReferenceCount = PROJECT_SKILLS.filter((s) => s.hasReferences).length;
+  const skillReadyCount = PROJECT_SKILLS.filter((s) => s.status === 'ready').length;
+
+  return (
+    <Panel title={t('settings.skills')} description={t('settings.skillsDesc')}>
+      <div className={styles.summaryGrid}>
+        <SummaryCard icon={<Code2 size={18} />} label={t('settings.skillProjectRegistry')} value={`${PROJECT_SKILLS.length}`} detail={t('settings.skillProjectRegistryDesc')} />
+        <SummaryCard icon={<ShieldCheck size={18} />} label={t('settings.skillReviewReady')} value={`${skillReadyCount}/${PROJECT_SKILLS.length}`} detail={t('settings.skillReviewReadyDesc')} />
+        <SummaryCard icon={<TerminalSquare size={18} />} label={t('settings.skillScripts')} value={`${skillScriptCount}`} detail={t('settings.skillScriptsDesc')} />
+        <SummaryCard icon={<Globe2 size={18} />} label={t('settings.skillHubSync')} value={hubSessionActive ? t('settings.status.interfaceGap') : t('settings.status.loginLocked')} detail={hubSessionActive ? t('settings.skillHubSyncNoInterface') : t('settings.skillHubSyncSignedOut')} />
+      </div>
+      <SettingRow title={t('settings.skillSync')} description={t('settings.skillSyncDesc')} control={<Switch checked={false} onChange={() => {}} disabled />} />
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}><strong>{t('settings.skillInstalled')}</strong><span>{t('settings.skillInstalledDesc')}</span></div>
+        <div className={styles.profileGrid}>{PROJECT_SKILLS.map((skill) => <ProjectSkillCard key={skill.id} skill={skill} />)}</div>
+      </div>
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}><strong>{t('settings.skillGovernance')}</strong><span>{t('settings.skillGovernanceDesc')}</span></div>
+        <div className={styles.capabilityGrid}>
+          <CapabilityCard title={t('settings.skillLocalRegistry')} description={t('settings.skillLocalRegistryDesc')} status=".agents/skills" />
+          <CapabilityCard title={t('settings.skillReview')} description={t('settings.skillReviewDesc')} status={`${skillReadyCount}/${PROJECT_SKILLS.length}`} />
+          <CapabilityCard title={t('settings.skillScriptAudit')} description={t('settings.skillScriptAuditDesc')} status={`${skillScriptCount}`} />
+          <CapabilityCard title={t('settings.skillReferences')} description={t('settings.skillReferencesDesc')} status={`${skillReferenceCount}`} />
+        </div>
+      </div>
+      <Callout title={t('settings.skillGuard')} body={t('settings.skillGuardDesc')} />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/TasksSection.tsx b/app/desktop/src/components/settings/sections/TasksSection.tsx
new file mode 100644
index 000000000..c595caf77
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/TasksSection.tsx
@@ -0,0 +1,154 @@
+import { useTranslation } from 'react-i18next';
+import { Route, ClipboardList, Monitor, ShieldCheck, RefreshCw } from 'lucide-react';
+import type { RunInfo } from '@shared/types';
+import type { AgentTask } from '@/stores/taskBridgeStore';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import SummaryCard from '../primitives/SummaryCard';
+import EmptyBlock from '../primitives/EmptyBlock';
+import AuthGapBlock from '../primitives/AuthGapBlock';
+import Switch from '../primitives/Switch';
+import TaskRunRow from '../cards/TaskRunRow';
+import HubTaskRow from '../cards/HubTaskRow';
+import { isActiveRun, getRecentRuns, getRecentTasks, formatTimestamp, writeStoredValue } from '../utils';
+import styles from '../../SettingsPage.module.css';
+
+interface TasksSectionProps {
+  runs: RunInfo[];
+  activeRuns: number;
+  runsLoading: boolean;
+  runsFetching: boolean;
+  runsError: boolean;
+  refetchRuns: () => void;
+  cancelRunMutation: { mutateAsync: (runId: string) => void; isPending: boolean; variables: string | undefined };
+  bridgedTasks: AgentTask[];
+  hubSessionActive: boolean;
+  taskSync: boolean;
+  setTaskSync: (value: boolean) => void;
+  onOpenAuth: () => void;
+  latestRun: RunInfo | undefined;
+}
+
+export default function TasksSection({
+  runs, activeRuns, runsLoading, runsFetching, runsError, refetchRuns,
+  cancelRunMutation, bridgedTasks, hubSessionActive, taskSync, setTaskSync,
+  onOpenAuth, latestRun,
+}: TasksSectionProps) {
+  const { t } = useTranslation();
+  const activeHubTasks = bridgedTasks.filter((t) => t.status === 'queued' || t.status === 'running').length;
+  const recentRuns = getRecentRuns(runs, 5);
+  const recentBridgeTasks = getRecentTasks(bridgedTasks, 5);
+
+  return (
+    <Panel title={t('settings.tasks')} description={t('settings.tasksDesc')}>
+      <div className={styles.summaryGrid}>
+        <SummaryCard
+          icon={<Route size={18} />}
+          label={t('settings.taskLocalRuns')}
+          value={`${activeRuns}/${runs.length}`}
+          detail={runsLoading ? t('settings.loading') : t('settings.taskLocalRunsDesc')}
+        />
+        <SummaryCard
+          icon={<ClipboardList size={18} />}
+          label={t('settings.taskHubBridge')}
+          value={`${activeHubTasks}/${bridgedTasks.length}`}
+          detail={hubSessionActive ? t('settings.taskHubBridgeDesc') : t('settings.taskHubBridgeSignedOut')}
+        />
+        <SummaryCard
+          icon={<Monitor size={18} />}
+          label={t('settings.taskLastRun')}
+          value={latestRun ? t(`run.status.${latestRun.status}`, { defaultValue: latestRun.status }) : t('settings.noData')}
+          detail={latestRun ? formatTimestamp(latestRun.finishedAt ?? latestRun.startedAt ?? latestRun.createdAt) : t('settings.taskLastRunDesc')}
+        />
+        <SummaryCard
+          icon={<ShieldCheck size={18} />}
+          label={t('settings.taskHubSnapshot')}
+          value={hubSessionActive ? t('settings.status.interfaceGap') : t('settings.status.loginLocked')}
+          detail={hubSessionActive ? t('settings.taskHubSnapshotUnavailable') : t('settings.taskHubBridgeSignedOut')}
+        />
+      </div>
+      <SettingRow
+        title={t('settings.taskSync')}
+        description={t('settings.taskSyncDesc')}
+        control={<Switch checked={hubSessionActive && taskSync} onChange={(v) => { setTaskSync(v); writeStoredValue('taskSync', v); }} disabled={!hubSessionActive} />}
+      />
+      <SettingRow
+        title={t('settings.taskInbox')}
+        description={t('settings.taskInboxDesc')}
+        value={runsError ? t('settings.edgeOffline') : t('settings.statusInProgress')}
+      />
+      <SettingRow title={t('settings.taskRunBinding')} description={t('settings.taskRunBindingDesc')} value={t('settings.statusInProgress')} />
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}>
+          <div className={styles.taskSectionTitleRow}>
+            <div>
+              <strong>{t('settings.taskHubSnapshot')}</strong>
+              <span>{t('settings.taskHubSnapshotDesc')}</span>
+            </div>
+            <div className={styles.taskSectionActions}>
+              <span className={styles.statusPill}>
+                {hubSessionActive ? t('settings.status.interfaceGap') : t('settings.status.loginLocked')}
+              </span>
+            </div>
+          </div>
+        </div>
+        {!hubSessionActive ? (
+          <AuthGapBlock
+            title={t('settings.hubSignInRequired')}
+            description={t('settings.taskHubBridgeSignedOut')}
+            actionLabel={t('settings.signIn')}
+            onAction={onOpenAuth}
+          />
+        ) : (
+          <EmptyBlock title={t('settings.status.interfaceGap')} description={t('settings.taskHubSnapshotUnavailable')} />
+        )}
+      </div>
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}>
+          <div className={styles.taskSectionTitleRow}>
+            <div>
+              <strong>{t('settings.taskRecentRuns')}</strong>
+              <span>{runsFetching ? t('settings.taskRefreshingRuns') : t('settings.taskRecentRunsDesc')}</span>
+            </div>
+            <div className={styles.taskSectionActions}>
+              <span className={`${styles.statusPill} ${runsError ? '' : styles.statusPillOn}`}>
+                {runsError ? t('settings.edgeOffline') : t('settings.taskRunLive')}
+              </span>
+              <button type="button" className={styles.secondaryBtn} onClick={refetchRuns} disabled={runsFetching}>
+                <RefreshCw size={15} />
+                {runsFetching ? t('settings.taskRefreshingRuns') : t('settings.taskRefreshRuns')}
+              </button>
+            </div>
+          </div>
+        </div>
+        {recentRuns.length > 0 ? (
+          <div className={styles.taskList}>
+            {recentRuns.map((run) => (
+              <TaskRunRow
+                key={run.runId}
+                run={run}
+                onCancel={isActiveRun(run) ? (runId) => { void cancelRunMutation.mutateAsync(runId); } : undefined}
+                cancelling={cancelRunMutation.isPending && cancelRunMutation.variables === run.runId}
+              />
+            ))}
+          </div>
+        ) : (
+          <EmptyBlock title={t('settings.taskNoRuns')} description={t('settings.taskNoRunsDesc')} />
+        )}
+      </div>
+      <div className={styles.taskSection}>
+        <div className={styles.taskSectionHeader}>
+          <strong>{t('settings.taskBridgeQueue')}</strong>
+          <span>{t('settings.taskBridgeQueueDesc')}</span>
+        </div>
+        {recentBridgeTasks.length > 0 ? (
+          <div className={styles.taskList}>
+            {recentBridgeTasks.map((task) => <HubTaskRow key={task.taskId} task={task} />)}
+          </div>
+        ) : (
+          <EmptyBlock title={t('settings.taskNoHubTasks')} description={t('settings.taskNoHubTasksDesc')} />
+        )}
+      </div>
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/sections/WorktreeSection.tsx b/app/desktop/src/components/settings/sections/WorktreeSection.tsx
new file mode 100644
index 000000000..ba16eb90d
--- /dev/null
+++ b/app/desktop/src/components/settings/sections/WorktreeSection.tsx
@@ -0,0 +1,25 @@
+import { useTranslation } from 'react-i18next';
+import Panel from '../primitives/Panel';
+import SettingRow from '../primitives/SettingRow';
+import Switch from '../primitives/Switch';
+import { writeStoredValue } from '../utils';
+
+interface WorktreeSectionProps {
+  worktreeIsolation: boolean;
+  setWorktreeIsolation: (value: boolean) => void;
+}
+
+export default function WorktreeSection({ worktreeIsolation, setWorktreeIsolation }: WorktreeSectionProps) {
+  const { t } = useTranslation();
+  return (
+    <Panel title={t('settings.worktree')} description={t('settings.worktreeDesc')}>
+      <SettingRow title={t('settings.defaultWorkspace')} description="D:\\Code\\TokenDance" />
+      <SettingRow
+        title={t('settings.worktreeIsolation')}
+        description={t('settings.worktreeIsolationDesc')}
+        control={<Switch checked={worktreeIsolation} onChange={(v) => { setWorktreeIsolation(v); writeStoredValue('worktreeIsolation', v); }} />}
+      />
+      <SettingRow title={t('settings.worktreePolicy')} description=".worktrees/<feature>" />
+    </Panel>
+  );
+}
diff --git a/app/desktop/src/components/settings/utils.ts b/app/desktop/src/components/settings/utils.ts
new file mode 100644
index 000000000..c68b40592
--- /dev/null
+++ b/app/desktop/src/components/settings/utils.ts
@@ -0,0 +1,175 @@
+import { useState } from 'react';
+import type { RunInfo } from '@shared/types';
+import type { AgentTask } from '@/stores/taskBridgeStore';
+
+export const STORAGE_PREFIX = 'agenthub-settings.';
+export const DEVICE_ID_KEY = 'agenthub_device_id';
+export const TD_CODE_VERIFIER_KEY = 'td_code_verifier';
+export const TD_STATE_KEY = 'td_state';
+
+export function readStoredBoolean(key: string, fallback: boolean) {
+  try {
+    const stored = localStorage.getItem(`${STORAGE_PREFIX}${key}`);
+    if (stored === 'true') return true;
+    if (stored === 'false') return false;
+  } catch { /* localStorage unavailable */ }
+  return fallback;
+}
+
+export function readStoredValue<T extends string>(key: string, fallback: T) {
+  try {
+    const stored = localStorage.getItem(`${STORAGE_PREFIX}${key}`);
+    if (stored) return stored as T;
+  } catch { /* localStorage unavailable */ }
+  return fallback;
+}
+
+export function writeStoredValue(key: string, value: string | boolean) {
+  try {
+    localStorage.setItem(`${STORAGE_PREFIX}${key}`, String(value));
+  } catch { /* localStorage unavailable */ }
+}
+
+export function readBrowserStorage(storage: 'local' | 'session', key: string) {
+  try {
+    const target = storage === 'local' ? localStorage : sessionStorage;
+    return target.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+export function useStoredBooleanState(key: string, fallback: boolean) {
+  return useState(() => readStoredBoolean(key, fallback));
+}
+
+export function useStoredValueState<T extends string>(key: string, fallback: T) {
+  return useState<T>(() => readStoredValue(key, fallback));
+}
+
+export function isActiveRun(run: RunInfo) {
+  return ['queued', 'started', 'running', 'cancelling'].includes(run.status);
+}
+
+export function isActiveBridgeTask(task: AgentTask) {
+  return task.status === 'queued' || task.status === 'running';
+}
+
+export function getRecentRuns(runs: RunInfo[], limit: number) {
+  return [...runs]
+    .sort((a, b) => timestampOf(b.finishedAt ?? b.startedAt ?? b.createdAt) - timestampOf(a.finishedAt ?? a.startedAt ?? a.createdAt))
+    .slice(0, limit);
+}
+
+export function getRecentTasks(tasks: AgentTask[], limit: number) {
+  return [...tasks].sort((a, b) => timestampOf(b.createdAt) - timestampOf(a.createdAt)).slice(0, limit);
+}
+
+export function countAgentCapabilities(agents: { capabilities: Record<string, boolean | undefined> }[]) {
+  const names = new Set<string>();
+  for (const agent of agents) {
+    for (const [name, enabled] of Object.entries(agent.capabilities)) {
+      if (enabled) names.add(name);
+    }
+  }
+  return names.size;
+}
+
+export function timestampOf(value?: string) {
+  if (!value) return 0;
+  const parsed = Date.parse(value);
+  return Number.isNaN(parsed) ? 0 : parsed;
+}
+
+export function formatTimestamp(value?: string) {
+  if (!value) return '--';
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return value;
+  return parsed.toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+export function shortId(value?: string) {
+  if (!value) return '--';
+  return value.length > 14 ? `${value.slice(0, 8)}...${value.slice(-4)}` : value;
+}
+
+export function readUnknownString(value: unknown): string | undefined {
+  return typeof value === 'string' && value.length > 0 ? value : undefined;
+}
+
+export function readUnknownArray(value: unknown): string[] {
+  if (Array.isArray(value)) {
+    return value.filter((item): item is string => typeof item === 'string' && item.length > 0);
+  }
+  if (typeof value === 'string') {
+    try {
+      const parsed = JSON.parse(value) as unknown;
+      return readUnknownArray(parsed);
+    } catch {
+      return value ? [value] : [];
+    }
+  }
+  return [];
+}
+
+export function parseNotificationPayload(payload: string): Record<string, string> {
+  try {
+    const parsed = JSON.parse(payload) as unknown;
+    if (!parsed || typeof parsed !== 'object') return {};
+    return Object.fromEntries(
+      Object.entries(parsed as Record<string, unknown>).flatMap(([key, value]) =>
+        typeof value === 'string' ? [[key, value]] : [],
+      ),
+    );
+  } catch {
+    return {};
+  }
+}
+
+export function statusLabelFromQuery({
+  signedIn,
+  isLoading,
+  isFetching,
+  isError,
+  isSuccess,
+  t,
+}: {
+  signedIn: boolean;
+  isLoading: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  isSuccess: boolean;
+  t: (key: string) => string;
+}) {
+  if (!signedIn) return t('settings.status.loginLocked');
+  if (isError) return t('settings.status.error');
+  if (isLoading || isFetching || !isSuccess) return t('settings.loading');
+  return t('settings.status.snapshot');
+}
+
+export function statusLabelFromDevice({
+  signedIn,
+  status,
+  registeredLabel = 'snapshot',
+  idleLabel = 'localSource',
+  t,
+}: {
+  signedIn: boolean;
+  status: 'idle' | 'registering' | 'registered' | 'error';
+  registeredLabel?: 'snapshot' | 'registered';
+  idleLabel?: 'localSource' | 'deviceStatus';
+  t: (key: string) => string;
+}) {
+  if (!signedIn) return t('settings.status.loginLocked');
+  if (status === 'error') return t('settings.status.error');
+  if (status === 'registered') {
+    return registeredLabel === 'registered' ? t('settings.deviceStatus.registered') : t('settings.status.snapshot');
+  }
+  if (status === 'registering') return t('settings.deviceStatus.registering');
+  return idleLabel === 'deviceStatus' ? t('settings.deviceStatus.idle') : t('settings.status.localSource');
+}
diff --git a/app/shared/src/hubClient.test.ts b/app/shared/src/hubClient.test.ts
new file mode 100644
index 000000000..5dca539ec
--- /dev/null
+++ b/app/shared/src/hubClient.test.ts
@@ -0,0 +1,330 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { HUB_EVENTS } from './hubEvents';
+import { AppError } from './errors';
+import {
+  createHubClient,
+  HubError,
+  parseHubError,
+  unwrapHubResponse,
+  type HubAgentDoneFrame,
+  type HubAgentFailedFrame,
+  type HubAgentStreamFrame,
+  type HubCustomAgentRequest,
+  type HubDeviceKickedFrame,
+  type HubDeviceOnlineFrame,
+  type HubFriendAcceptedFrame,
+  type HubFriendRequestFrame,
+  type HubNotificationNewFrame,
+  type HubSession,
+} from './hubClient';
+
+const fetchMock = vi.fn<typeof fetch>();
+
+function jsonResponse(body: unknown, init?: ResponseInit): Response {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { 'Content-Type': 'application/json' },
+    ...init,
+  });
+}
+
+describe('hubClient helpers', () => {
+  beforeEach(() => {
+    fetchMock.mockReset();
+    vi.stubGlobal('fetch', fetchMock);
+  });
+
+  it('unwraps Hub response envelopes and keeps raw bodies compatible', () => {
+    expect(unwrapHubResponse<{ id: string }>({ code: 'OK', data: { id: '1' } })).toEqual({
+      id: '1',
+    });
+    expect(unwrapHubResponse<{ id: string }>({ id: 'raw' })).toEqual({ id: 'raw' });
+
+    const sessionWithSessionId: HubSession = { session_id: 's1', type: 'private' };
+    const sessionWithLegacyId: HubSession = { id: 's2', type: 'group' };
+    expect(sessionWithSessionId.session_id).toBe('s1');
+    expect(sessionWithLegacyId.id).toBe('s2');
+  });
+
+  it('turns Hub envelope errors into AppError', async () => {
+    expect(() =>
+      unwrapHubResponse({ code: 'SESSION_NOT_MEMBER', message: 'not a member' }, 403),
+    ).toThrow(AppError);
+
+    const error = await parseHubError(
+      jsonResponse({ code: 'AGENT_TASK_NOT_FOUND', message: 'missing task' }, { status: 404 }),
+    );
+
+    expect(error).toMatchObject({
+      code: 'AGENT_TASK_NOT_FOUND',
+      message: 'missing task',
+      status: 404,
+    });
+
+    expect(() =>
+      unwrapHubResponse({ code: 'HUB_ENVELOPE_ERROR', message: 'bad envelope' }, 200),
+    ).toThrow(AppError);
+  });
+
+  it('requests IM contact/session/message endpoints with the Hub envelope', async () => {
+    fetchMock
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK', data: [{ user_id: 'u1', username: 'x', nickname: 'X', online: true, type: 'user' }] }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK', data: [{ session_id: 's1', type: 'private', unread_count: 0 }, { id: 's2', type: 'group', unread_count: 1 }] }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK', data: [{ id: 'm1', session_id: 's1', seq_id: 1, sender_type: 'user', sender_id: 'u1', content_type: 'text', content: '{"text":"hi"}' }] }));
+
+    const client = createHubClient({
+      baseUrl: 'http://hub.local/',
+      getToken: () => 'token-1',
+    });
+
+    await expect(client.listContacts()).resolves.toHaveLength(1);
+    await expect(client.listSessions()).resolves.toEqual([
+      { session_id: 's1', type: 'private', unread_count: 0 },
+      { id: 's2', type: 'group', unread_count: 1 },
+    ]);
+    await expect(client.getMessages('s1', { limit: 20 })).resolves.toHaveLength(1);
+
+    const [url, init] = fetchMock.mock.calls[0] ?? [];
+    expect(url).toBe('http://hub.local/client/contacts');
+    expect((init?.headers as Headers).get('Authorization')).toBe('Bearer token-1');
+  });
+
+  it('requests custom agent, device, and task callback paths', async () => {
+    fetchMock
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK', data: [{ id: 'a1', owner_user_id: 'u1', name: 'Agent', agent_type: 'codex', system_prompt: 'go', created_at: 'now', updated_at: 'now' }] }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK', data: { id: 'dev1', user_id: 'u1', device_type: 'desktop', capabilities: '["run"]' } }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK' }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK' }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK' }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK' }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK', data: { id: 't1', agent_instance_id: 'ai1', triggered_by_user_id: 'u1', trigger_message_id: 'm1', status: 'queued', created_at: 'now', expire_at: 'later' } }));
+
+    const client = createHubClient({ baseUrl: 'http://hub.local' });
+    const customAgent: HubCustomAgentRequest = {
+      name: 'Agent',
+      agent_type: 'codex',
+      system_prompt: 'go',
+    };
+
+    await expect(client.listCustomAgents()).resolves.toHaveLength(1);
+    await expect(client.registerDevice({ device_id: 'dev1', capabilities: ['run'] })).resolves.toMatchObject({ id: 'dev1' });
+    await expect(client.ackTask('task-1', 'run-1')).resolves.toBeUndefined();
+    await expect(client.streamTask('task-1', 'delta', 'run-1')).resolves.toBeUndefined();
+    await expect(client.doneTask('task-1', 'final', 'run-1')).resolves.toBeUndefined();
+    await expect(client.failTask('task-1', 'boom', 'run-1')).resolves.toBeUndefined();
+    await expect(client.triggerAgentTask('m1')).resolves.toMatchObject({ id: 't1' });
+
+    expect(fetchMock.mock.calls[0]?.[0]).toBe('http://hub.local/web/custom-agents');
+    expect(fetchMock.mock.calls[1]?.[0]).toBe('http://hub.local/edge/devices:register');
+    expect(fetchMock.mock.calls[2]?.[0]).toBe('http://hub.local/edge/agent-tasks/task-1/ack');
+    expect(fetchMock.mock.calls[3]?.[0]).toBe('http://hub.local/edge/agent-tasks/task-1/stream');
+    expect(fetchMock.mock.calls[4]?.[0]).toBe('http://hub.local/edge/agent-tasks/task-1/done');
+    expect(fetchMock.mock.calls[5]?.[0]).toBe('http://hub.local/edge/agent-tasks/task-1/fail');
+    expect(fetchMock.mock.calls[6]?.[0]).toBe('http://hub.local/web/agent-tasks');
+    expect(JSON.parse(String(fetchMock.mock.calls[1]?.[1]?.body))).toEqual({
+      device_id: 'dev1',
+      device_name: 'dev1',
+      device_type: 'desktop',
+      capabilities: { run: true },
+    });
+    expect(JSON.parse(String(fetchMock.mock.calls[2]?.[1]?.body))).toEqual({ run_id: 'run-1' });
+    expect(JSON.parse(String(fetchMock.mock.calls[3]?.[1]?.body))).toEqual({
+      content: 'delta',
+      run_id: 'run-1',
+    });
+    expect(JSON.parse(String(fetchMock.mock.calls[4]?.[1]?.body))).toEqual({
+      final_content: 'final',
+      run_id: 'run-1',
+    });
+    expect(JSON.parse(String(fetchMock.mock.calls[5]?.[1]?.body))).toEqual({
+      error: 'boom',
+      run_id: 'run-1',
+    });
+    expect(JSON.parse(String(fetchMock.mock.calls[6]?.[1]?.body))).toEqual({
+      trigger_message_id: 'm1',
+    });
+    expect(customAgent.agent_type).toBe('codex');
+  });
+
+  it('requests notification endpoints', async () => {
+    fetchMock
+      .mockResolvedValueOnce(jsonResponse({
+        code: 'OK',
+        data: [{
+          id: 'n1',
+          user_id: 'u1',
+          type: 'mention',
+          payload: '{"title":"Mention"}',
+          read: false,
+          created_at: '2026-05-25T01:06:00Z',
+        }],
+      }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK' }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK' }));
+
+    const client = createHubClient({ baseUrl: 'http://hub.local' });
+
+    await expect(client.listNotifications({ unread_only: true, limit: 10 })).resolves.toEqual([
+      {
+        id: 'n1',
+        user_id: 'u1',
+        type: 'mention',
+        payload: '{"title":"Mention"}',
+        read: false,
+        created_at: '2026-05-25T01:06:00Z',
+      },
+    ]);
+    await expect(client.markNotificationRead('n1')).resolves.toBeUndefined();
+    await expect(client.readAllNotifications()).resolves.toBeUndefined();
+
+    expect(fetchMock.mock.calls[0]?.[0]).toBe(
+      'http://hub.local/client/notifications?unread_only=true&limit=10',
+    );
+    expect(fetchMock.mock.calls[1]?.[0]).toBe(
+      'http://hub.local/client/notifications/n1:read',
+    );
+    expect(fetchMock.mock.calls[2]?.[0]).toBe(
+      'http://hub.local/client/notifications:read-all',
+    );
+  });
+
+  it('falls back to dev/trump legacy Hub paths when master routes are absent', async () => {
+    fetchMock
+      .mockResolvedValueOnce(jsonResponse({ code: 'NOT_FOUND', message: 'missing' }, { status: 404 }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK' }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'NOT_FOUND', message: 'missing' }, { status: 404 }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK' }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'NOT_FOUND', message: 'missing' }, { status: 404 }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK', data: { id: 'dev1', user_id: 'u1', device_type: 'desktop' } }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'NOT_FOUND', message: 'missing' }, { status: 404 }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK' }));
+
+    const client = createHubClient({ baseUrl: 'http://hub.local' });
+
+    await expect(client.markNotificationRead('n1')).resolves.toBeUndefined();
+    await expect(client.readAllNotifications()).resolves.toBeUndefined();
+    await expect(client.registerDevice({ device_id: 'dev1' })).resolves.toMatchObject({ id: 'dev1' });
+    await expect(client.cancelAgentTask('task-1')).resolves.toBeUndefined();
+
+    expect(fetchMock.mock.calls.map(([url]) => url)).toEqual([
+      'http://hub.local/client/notifications/n1:read',
+      'http://hub.local/client/notifications/n1/read',
+      'http://hub.local/client/notifications:read-all',
+      'http://hub.local/client/notifications/read-all',
+      'http://hub.local/edge/devices:register',
+      'http://hub.local/edge/devices/register',
+      'http://hub.local/web/agent-tasks/task-1:cancel',
+      'http://hub.local/web/agent-tasks/task-1/cancel',
+    ]);
+  });
+
+  it('exposes master web management and OIDC contract endpoints without wiring the callback flow', async () => {
+    fetchMock
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK', data: { state: 's1', authorization_url: 'https://id.local/auth' } }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK', data: { items: [{ id: 'target-1', name: 'Local Edge', type: 'local_edge' }], page: { hasMore: false } } }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK', data: { items: [{ id: 'audit-1', action: 'target.ping' }], page: { hasMore: false } } }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK', data: { id: 'relay-1', target_id: 'target-1', status: 'queued' } }))
+      .mockResolvedValueOnce(jsonResponse({ code: 'OK' }));
+
+    const client = createHubClient({ baseUrl: 'http://hub.local' });
+
+    await expect(client.oidcAuthorize({ code_challenge: 'challenge' })).resolves.toEqual({
+      state: 's1',
+      authorization_url: 'https://id.local/auth',
+    });
+    await expect(client.listExecutionTargets()).resolves.toMatchObject({
+      items: [{ id: 'target-1' }],
+    });
+    await expect(client.listAuditEvents({ pageSize: 5 })).resolves.toMatchObject({
+      items: [{ id: 'audit-1' }],
+    });
+    await expect(client.createRelayCommand({ target_id: 'target-1', payload: { op: 'ping' } })).resolves.toMatchObject({ id: 'relay-1' });
+    await expect(client.ackRelayCommand('relay-1')).resolves.toBeUndefined();
+
+    expect(fetchMock.mock.calls.map(([url]) => url)).toEqual([
+      'http://hub.local/client/auth/oidc/authorize',
+      'http://hub.local/web/execution-targets',
+      'http://hub.local/web/audit-events?pageSize=5',
+      'http://hub.local/web/relay/commands',
+      'http://hub.local/web/relay/commands/relay-1:ack',
+    ]);
+  });
+
+  it('types Hub WS frames used by notifications, social, device, and task bridge events', () => {
+    const deviceOnline: HubDeviceOnlineFrame = {
+      type: HUB_EVENTS.DEVICE_ONLINE,
+      payload: {
+        user_id: 'u1',
+        device_type: 'desktop',
+        device_id: '018f86aa-2f93-7cc0-9c39-000000000001',
+      },
+    };
+    const deviceKicked: HubDeviceKickedFrame = {
+      type: HUB_EVENTS.DEVICE_KICKED,
+      payload: { device_id: '018f86aa-2f93-7cc0-9c39-000000000001', reason: 'replaced' },
+    };
+    const agentStream: HubAgentStreamFrame = {
+      type: HUB_EVENTS.AGENT_STREAM,
+      payload: { task_id: 'task-1', content: 'delta', run_id: 'run-1' },
+    };
+    const agentDone: HubAgentDoneFrame = {
+      type: HUB_EVENTS.AGENT_DONE,
+      payload: { task_id: 'task-1', final_content: 'final', edge_run_id: 'run-1' },
+    };
+    const agentFailed: HubAgentFailedFrame = {
+      type: HUB_EVENTS.AGENT_FAILED,
+      payload: { task_id: 'task-2', error_message: 'boom', run_id: 'run-2' },
+    };
+    const notification: HubNotificationNewFrame = {
+      type: HUB_EVENTS.NOTIFICATION_NEW,
+      payload: {
+        id: '018f86aa-2f93-7cc0-9c39-000000000002',
+        user_id: '018f86aa-2f93-7cc0-9c39-000000000003',
+        type: 'friend_request',
+        payload: '{"request_id":"fr1"}',
+        read: false,
+        created_at: '2026-05-25T01:06:00Z',
+      },
+    };
+    const friendRequest: HubFriendRequestFrame = {
+      type: HUB_EVENTS.FRIEND_REQUEST,
+      payload: { request_id: 'fr1', user_id: 'u2', nickname: 'Friend' },
+    };
+    const friendAccepted: HubFriendAcceptedFrame = {
+      type: HUB_EVENTS.FRIEND_ACCEPTED,
+      payload: { user_id: 'u2', friend_id: 'u1' },
+    };
+
+    expect([
+      deviceOnline.type,
+      deviceKicked.type,
+      agentStream.type,
+      agentDone.type,
+      agentFailed.type,
+      notification.type,
+      friendRequest.type,
+      friendAccepted.type,
+    ]).toEqual([
+      'device.online',
+      'device.kicked',
+      'agent.stream',
+      'agent.done',
+      'agent.failed',
+      'notification.new',
+      'friend.request',
+      'friend.accepted',
+    ]);
+    expect(agentStream.payload?.run_id).toBe('run-1');
+    expect(notification.payload?.read).toBe(false);
+  });
+
+  it('keeps the legacy HubError shape for Desktop compatibility', () => {
+    const error = new HubError(401, 'Unauthorized', 'auth_failed');
+
+    expect(error).toBeInstanceOf(Error);
+    expect(error.name).toBe('HubError');
+    expect(error.status).toBe(401);
+    expect(error.code).toBe('auth_failed');
+    expect(error.message).toBe('Unauthorized');
+  });
+});
diff --git a/app/shared/src/hubClient.ts b/app/shared/src/hubClient.ts
new file mode 100644
index 000000000..d402f64e6
--- /dev/null
+++ b/app/shared/src/hubClient.ts
@@ -0,0 +1,1156 @@
+import { AppError, isErrorResponse } from './errors';
+import { HUB_EVENTS, type HubEventType } from './hubEvents';
+
+export interface HubResponseEnvelope<T = unknown> {
+  code: string;
+  message?: string;
+  data?: T;
+}
+
+export interface HubClientOptions {
+  baseUrl?: string;
+  getToken?: () => string | null | undefined;
+  fetch?: typeof fetch;
+}
+
+export interface HubRegisterRequest {
+  username: string;
+  password: string;
+  nickname: string;
+}
+
+export interface HubLoginRequest {
+  username: string;
+  password: string;
+  device_type: string;
+  device_id: string;
+}
+
+export interface HubAuthResponse {
+  access_token: string;
+  refresh_token: string;
+  expires_in: number;
+}
+
+export interface HubUserProfile {
+  id: string;
+  username: string;
+  nickname: string;
+  avatar_url?: string;
+  created_at?: string;
+}
+
+export interface HubUpdateProfileRequest {
+  nickname?: string;
+  avatar_url?: string;
+}
+
+export interface HubChangePasswordRequest {
+  old_password: string;
+  new_password: string;
+}
+
+export interface HubOidcAuthorizeRequest {
+  code_challenge: string;
+  code_challenge_method?: 'S256' | 'plain';
+  device_type?: string;
+  device_id?: string;
+}
+
+export interface HubOidcAuthorizeResponse {
+  state: string;
+  authorization_url: string;
+}
+
+export interface HubOidcCallbackRequest {
+  code: string;
+  state: string;
+  code_verifier: string;
+  device_type?: string;
+  device_id?: string;
+}
+
+export interface HubOidcCallbackResponse extends HubAuthResponse {
+  user?: HubUserProfile;
+}
+
+export type HubContactType = 'user' | 'agent' | string;
+export type HubRelationship =
+  | 'stranger'
+  | 'friend'
+  | 'pending_sent'
+  | 'pending_received'
+  | 'blocked'
+  | string;
+
+export interface HubSearchResult {
+  user_id: string;
+  username: string;
+  nickname: string;
+  avatar_url?: string;
+  relationship: HubRelationship;
+}
+
+export interface HubFriendRequest {
+  request_id: string;
+  user_id: string;
+  username: string;
+  nickname: string;
+  avatar_url?: string;
+  message: string;
+  created_at: string;
+}
+
+export interface HubContactInfo {
+  user_id: string;
+  username: string;
+  nickname: string;
+  avatar_url?: string;
+  remark?: string;
+  online: boolean;
+  type: HubContactType;
+}
+
+export type HubSessionType = 'private' | 'group' | string;
+export type HubSessionRole = 'owner' | 'admin' | 'member' | string;
+
+export interface HubSession {
+  session_id?: string;
+  id?: string;
+  type: HubSessionType;
+  name?: string;
+  avatar_url?: string;
+  announcement?: string;
+  owner_user_id?: string;
+  pinned?: boolean;
+  archived?: boolean;
+  muted?: boolean;
+  last_message_at?: string;
+  unread_count?: number;
+  member_count?: number;
+  role?: HubSessionRole;
+  created_at?: string;
+  updated_at?: string;
+  members?: HubSessionMember[];
+  last_message?: HubMessage;
+}
+
+export interface HubSessionMember {
+  id?: string;
+  session_id: string;
+  member_type: 'user' | 'agent' | string;
+  member_id: string;
+  role: HubSessionRole;
+  left_at?: string;
+}
+
+export interface HubCreatePrivateSessionRequest {
+  target_user_id: string;
+}
+
+export interface HubCreateGroupSessionRequest {
+  name: string;
+  member_ids: string[];
+}
+
+export interface HubCreateSessionResponse {
+  session_id: string;
+  type: HubSessionType;
+  created: boolean;
+}
+
+export interface HubUpdateSessionInfoRequest {
+  name?: string;
+  avatar_url?: string;
+  announcement?: string;
+}
+
+export interface HubUpdateSessionSettingsRequest {
+  pinned?: boolean;
+  archived?: boolean;
+  muted?: boolean;
+}
+
+export type HubSenderType = 'user' | 'agent' | string;
+export type HubContentType =
+  | 'text'
+  | 'code'
+  | 'diff'
+  | 'image'
+  | 'file'
+  | 'link_card'
+  | 'deploy_card'
+  | string;
+
+export interface HubSendMessageRequest {
+  client_msg_id: string;
+  content_type: HubContentType;
+  content: string;
+  reply_to_message_id?: string;
+}
+
+export interface HubSendMessageResponse {
+  message_id: string;
+  seq_id: number;
+  created_at: string;
+}
+
+export interface HubReplyToInfo {
+  id: string;
+  sender_id: string;
+  content_type: HubContentType;
+  content: string;
+  recalled: boolean;
+  created_at: string;
+}
+
+export interface HubMessage {
+  id: string;
+  session_id: string;
+  seq_id: number;
+  client_msg_id?: string;
+  sender_type: HubSenderType;
+  sender_id: string;
+  content_type: HubContentType;
+  content: string;
+  reply_to_message_id?: string;
+  reply_to?: HubReplyToInfo;
+  recalled?: boolean;
+  created_at?: string;
+}
+
+export interface HubRegisterDeviceRequest {
+  device_id: string;
+  device_type?: string;
+  device_name?: string;
+  app_version?: string;
+  capabilities?: string[] | Record<string, unknown>;
+}
+
+export interface HubDevice {
+  id: string;
+  user_id: string;
+  device_type: string;
+  app_version?: string;
+  capabilities?: string | string[] | Record<string, unknown>;
+  last_active_at?: string;
+  created_at?: string;
+}
+
+export interface HubAddAgentToSessionRequest {
+  agent_type: string;
+  custom_agent_id?: string;
+  display_name: string;
+}
+
+export interface HubCustomAgentRequest {
+  name: string;
+  avatar_url?: string;
+  agent_type: string;
+  system_prompt: string;
+  capability_tags?: string;
+  tool_whitelist?: string;
+  model_params?: string;
+}
+
+export interface HubCustomAgent extends Record<string, unknown> {
+  id: string;
+  owner_user_id: string;
+  name: string;
+  avatar_url?: string;
+  agent_type: string;
+  system_prompt: string;
+  capability_tags?: string;
+  tool_whitelist?: string;
+  model_params?: string;
+  deleted_at?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export type HubAgentTaskStatus =
+  | 'queued'
+  | 'dispatched'
+  | 'running'
+  | 'done'
+  | 'failed'
+  | 'timeout'
+  | 'cancelled'
+  | string;
+
+export interface HubAgentTask {
+  id: string;
+  agent_instance_id: string;
+  triggered_by_user_id: string;
+  trigger_message_id: string;
+  status: HubAgentTaskStatus;
+  edge_run_id?: string;
+  edge_device_id?: string;
+  error_message?: string;
+  created_at: string;
+  dispatched_at?: string;
+  finished_at?: string;
+  expire_at: string;
+}
+
+export interface HubTriggerAgentTaskRequest {
+  trigger_message_id: string;
+}
+
+export interface HubTaskRunRequest {
+  run_id?: string;
+  edge_run_id?: string;
+}
+
+export type HubTaskAckRequest = HubTaskRunRequest;
+
+export interface HubTaskStreamRequest extends HubTaskRunRequest {
+  content: string;
+}
+
+export interface HubTaskDoneRequest extends HubTaskRunRequest {
+  final_content?: string;
+}
+
+export interface HubTaskFailRequest extends HubTaskRunRequest {
+  error: string;
+}
+
+export interface HubNotification {
+  id: string;
+  user_id: string;
+  type: string;
+  payload: string;
+  read: boolean;
+  created_at: string;
+  [key: string]: unknown;
+}
+
+export interface HubPageInfo {
+  nextCursor?: string;
+  hasMore: boolean;
+}
+
+export interface HubListResponse<T> {
+  items: T[];
+  page: HubPageInfo;
+}
+
+export type HubExecutionTargetType =
+  | 'local_edge'
+  | 'remote_edge'
+  | 'cloud_edge'
+  | 'hub_relay'
+  | string;
+
+export interface HubExecutionTarget {
+  id: string;
+  name: string;
+  type: HubExecutionTargetType;
+  status?: string;
+  config?: Record<string, unknown>;
+  created_at?: string;
+  updated_at?: string;
+  [key: string]: unknown;
+}
+
+export interface HubExecutionTargetRequest {
+  name: string;
+  type: HubExecutionTargetType;
+  config?: Record<string, unknown>;
+}
+
+export interface HubAuditEvent {
+  id: string;
+  actor_user_id?: string;
+  action: string;
+  resource_type?: string;
+  resource_id?: string;
+  metadata?: Record<string, unknown>;
+  created_at?: string;
+  [key: string]: unknown;
+}
+
+export interface HubRelayCommandRequest {
+  target_id: string;
+  payload: Record<string, unknown>;
+}
+
+export interface HubRelayCommand {
+  id: string;
+  target_id?: string;
+  status?: string;
+  payload?: Record<string, unknown>;
+  result?: Record<string, unknown>;
+  created_at?: string;
+  updated_at?: string;
+  [key: string]: unknown;
+}
+
+export interface HubDevicePresencePayload {
+  user_id: string;
+  device_type: string;
+  device_id: string;
+}
+
+export interface HubDeviceKickedPayload {
+  device_id?: string;
+  device_type?: string;
+  session_id?: string;
+  reason?: string;
+  [key: string]: unknown;
+}
+
+export interface HubAgentDispatchPayload {
+  task_id: string;
+  agent_instance_id: string;
+  agent_type: string;
+  custom_agent_id?: string;
+  session_id: string;
+  trigger_message_id: string;
+  trigger_user_id: string;
+  display_name: string;
+  system_prompt?: string;
+  model_params?: string;
+  tool_whitelist?: string;
+}
+
+export interface HubAgentStreamPayload extends HubTaskStreamRequest {
+  task_id: string;
+}
+
+export interface HubAgentDonePayload extends HubTaskDoneRequest {
+  task_id: string;
+  status?: HubAgentTaskStatus;
+}
+
+export interface HubAgentFailedPayload {
+  task_id: string;
+  error?: string;
+  error_message?: string;
+  run_id?: string;
+  edge_run_id?: string;
+}
+
+export interface HubAgentCancelPayload {
+  task_id: string;
+}
+
+export interface HubFriendEventPayload {
+  request_id?: string;
+  user_id?: string;
+  friend_id?: string;
+  username?: string;
+  nickname?: string;
+  avatar_url?: string;
+  message?: string;
+  created_at?: string;
+  [key: string]: unknown;
+}
+
+export interface HubFrame<TPayload = unknown, TType extends string = string> {
+  type: TType;
+  seq_id?: number;
+  payload?: TPayload;
+}
+
+export type HubAuthFrame = HubFrame<
+  { access_token: string },
+  typeof HUB_EVENTS.AUTH
+>;
+export type HubAuthOkFrame = HubFrame<unknown, typeof HUB_EVENTS.AUTH_OK>;
+export type HubAuthFailFrame = HubFrame<
+  { code?: string; message?: string },
+  typeof HUB_EVENTS.AUTH_FAIL
+>;
+export type HubMessageNewFrame = HubFrame<
+  HubMessage,
+  typeof HUB_EVENTS.MESSAGE_NEW
+>;
+export type HubMessageRecallFrame = HubFrame<
+  { message_id?: string; id?: string; session_id?: string },
+  typeof HUB_EVENTS.MESSAGE_RECALL
+>;
+export type HubMessageReadFrame = HubFrame<
+  { session_id: string; user_id: string; last_read_seq: number },
+  typeof HUB_EVENTS.MESSAGE_READ
+>;
+export type HubSessionCreatedFrame = HubFrame<
+  HubSession | { session_id: string },
+  typeof HUB_EVENTS.SESSION_CREATED
+>;
+export type HubSessionInfoUpdatedFrame = HubFrame<
+  Partial<HubSession> & { session_id: string },
+  typeof HUB_EVENTS.SESSION_INFO_UPDATED
+>;
+export type HubSessionDissolvedFrame = HubFrame<
+  { session_id: string },
+  typeof HUB_EVENTS.SESSION_DISSOLVED
+>;
+export type HubAgentDispatchFrame = HubFrame<
+  HubAgentDispatchPayload,
+  typeof HUB_EVENTS.AGENT_DISPATCH
+>;
+export type HubAgentStreamFrame = HubFrame<
+  HubAgentStreamPayload,
+  typeof HUB_EVENTS.AGENT_STREAM
+>;
+export type HubAgentDoneFrame = HubFrame<
+  HubAgentDonePayload,
+  typeof HUB_EVENTS.AGENT_DONE
+>;
+export type HubAgentFailedFrame = HubFrame<
+  HubAgentFailedPayload,
+  typeof HUB_EVENTS.AGENT_FAILED
+>;
+export type HubAgentCancelFrame = HubFrame<
+  HubAgentCancelPayload,
+  typeof HUB_EVENTS.AGENT_CANCEL
+>;
+export type HubDeviceOnlineFrame = HubFrame<
+  HubDevicePresencePayload,
+  typeof HUB_EVENTS.DEVICE_ONLINE
+>;
+export type HubDeviceOfflineFrame = HubFrame<
+  HubDevicePresencePayload,
+  typeof HUB_EVENTS.DEVICE_OFFLINE
+>;
+export type HubDeviceKickedFrame = HubFrame<
+  HubDeviceKickedPayload,
+  typeof HUB_EVENTS.DEVICE_KICKED
+>;
+export type HubNotificationNewFrame = HubFrame<
+  HubNotification,
+  typeof HUB_EVENTS.NOTIFICATION_NEW
+>;
+export type HubFriendRequestFrame = HubFrame<
+  HubFriendEventPayload,
+  typeof HUB_EVENTS.FRIEND_REQUEST
+>;
+export type HubFriendAcceptedFrame = HubFrame<
+  HubFriendEventPayload,
+  typeof HUB_EVENTS.FRIEND_ACCEPTED
+>;
+
+export type HubKnownFrame =
+  | HubAuthFrame
+  | HubAuthOkFrame
+  | HubAuthFailFrame
+  | HubMessageNewFrame
+  | HubMessageRecallFrame
+  | HubMessageReadFrame
+  | HubSessionCreatedFrame
+  | HubSessionInfoUpdatedFrame
+  | HubSessionDissolvedFrame
+  | HubAgentDispatchFrame
+  | HubAgentStreamFrame
+  | HubAgentDoneFrame
+  | HubAgentFailedFrame
+  | HubAgentCancelFrame
+  | HubDeviceOnlineFrame
+  | HubDeviceOfflineFrame
+  | HubDeviceKickedFrame
+  | HubNotificationNewFrame
+  | HubFriendRequestFrame
+  | HubFriendAcceptedFrame
+  | HubFrame<unknown, HubEventType>;
+
+export class HubError extends AppError {
+  constructor(status: number, message: string, code = 'hub_error') {
+    super({ error: { code, message } }, status);
+    this.name = 'HubError';
+  }
+}
+
+export function isHubResponseEnvelope(
+  body: unknown,
+): body is HubResponseEnvelope {
+  return isRecord(body) && typeof body.code === 'string';
+}
+
+export function unwrapHubResponse<T>(body: unknown, status = 200): T {
+  if (!isHubResponseEnvelope(body)) {
+    return body as T;
+  }
+
+  if (body.code !== 'OK') {
+    throw new AppError(
+      {
+        error: {
+          code: body.code,
+          message: body.message || 'Hub request failed',
+        },
+      },
+      status,
+      body,
+    );
+  }
+
+  return body.data as T;
+}
+
+export async function parseHubError(response: Response): Promise<AppError> {
+  const body = await readJson(response);
+  if (isErrorResponse(body)) {
+    return new AppError(body, response.status, body);
+  }
+  if (isHubResponseEnvelope(body)) {
+    return new AppError(
+      {
+        error: {
+          code: body.code || 'HUB_ERROR',
+          message:
+            body.message ||
+            response.statusText ||
+            `HTTP ${response.status}`,
+        },
+      },
+      response.status,
+      body,
+    );
+  }
+  if (isRecord(body) && typeof body.message === 'string') {
+    return new AppError(
+      {
+        error: {
+          code: text(body.code) ?? 'HUB_ERROR',
+          message: body.message,
+        },
+      },
+      response.status,
+      body,
+    );
+  }
+
+  return new AppError(
+    {
+      error: {
+        code: response.status >= 500 ? 'INTERNAL_ERROR' : 'BAD_REQUEST',
+        message: response.statusText || `HTTP ${response.status}`,
+      },
+    },
+    response.status,
+    body,
+  );
+}
+
+export function createHubClient(opts: HubClientOptions = {}) {
+  const baseUrl = (opts.baseUrl ?? '').replace(/\/+$/, '');
+  const fetchImpl = opts.fetch;
+
+  async function request<T>(
+    path: string,
+    options: RequestInit = {},
+  ): Promise<T> {
+    const token = opts.getToken?.();
+    const headers = new Headers(options.headers);
+    if (!headers.has('Content-Type')) {
+      headers.set('Content-Type', 'application/json');
+    }
+    if (token && !headers.has('Authorization')) {
+      headers.set('Authorization', `Bearer ${token}`);
+    }
+
+    const response = await (fetchImpl ?? globalThis.fetch)(`${baseUrl}${path}`, {
+      ...options,
+      headers,
+    });
+
+    if (!response.ok) {
+      throw await parseHubError(response);
+    }
+    if (response.status === 204) {
+      return undefined as T;
+    }
+
+    return unwrapHubResponse<T>(await readJson(response), response.status);
+  }
+
+  async function requestWithFallback<T>(
+    paths: readonly string[],
+    options: RequestInit = {},
+  ): Promise<T> {
+    let fallbackError: unknown;
+
+    for (let index = 0; index < paths.length; index += 1) {
+      const path = paths[index]!;
+      try {
+        return await request<T>(path, options);
+      } catch (error) {
+        if (index < paths.length - 1 && isRouteFallbackError(error)) {
+          fallbackError = error;
+          continue;
+        }
+        throw error;
+      }
+    }
+
+    throw fallbackError;
+  }
+
+  return {
+    request,
+
+    register: (body: HubRegisterRequest) =>
+      request<{ user_id: string }>('/client/auth/register', {
+        method: 'POST',
+        body: JSON.stringify(body),
+      }),
+    login: (body: HubLoginRequest) =>
+      request<HubAuthResponse>('/client/auth/login', {
+        method: 'POST',
+        body: JSON.stringify(body),
+      }),
+    refresh: (refreshToken: string) =>
+      request<HubAuthResponse>('/client/auth/refresh', {
+        method: 'POST',
+        body: JSON.stringify({ refresh_token: refreshToken }),
+      }),
+    logout: () => request<void>('/client/auth/logout', { method: 'POST' }),
+    me: () => request<HubUserProfile>('/client/auth/me'),
+    updateProfile: (body: HubUpdateProfileRequest) =>
+      request<HubUserProfile>('/client/auth/profile', {
+        method: 'PUT',
+        body: JSON.stringify(body),
+      }),
+    changePassword: async (body: HubChangePasswordRequest) => {
+      const payload = JSON.stringify(body);
+      try {
+        return await request<void>('/client/auth/change-password', {
+          method: 'POST',
+          body: payload,
+        });
+      } catch (error) {
+        if (isRouteFallbackError(error)) {
+          return request<void>('/client/auth/password', {
+            method: 'PUT',
+            body: payload,
+          });
+        }
+        throw error;
+      }
+    },
+    oidcAuthorize: (body: HubOidcAuthorizeRequest) =>
+      request<HubOidcAuthorizeResponse>('/client/auth/oidc/authorize', {
+        method: 'POST',
+        body: JSON.stringify({
+          code_challenge_method: 'S256',
+          ...body,
+        }),
+      }),
+    oidcCallback: (body: HubOidcCallbackRequest) =>
+      request<HubOidcCallbackResponse>('/client/auth/oidc/callback', {
+        method: 'POST',
+        body: JSON.stringify(body),
+      }),
+
+    searchUser: (targetUserId: string) =>
+      request<HubSearchResult>(
+        `/client/contacts/search?id=${encodeURIComponent(targetUserId)}`,
+      ),
+    listContacts: () => request<HubContactInfo[]>('/client/contacts'),
+    sendFriendRequest: (friendId: string, message?: string) =>
+      request<void>('/client/contacts/friend-requests', {
+        method: 'POST',
+        body: JSON.stringify({ friend_id: friendId, message }),
+      }),
+    listFriendRequests: () =>
+      request<HubFriendRequest[]>('/client/contacts/friend-requests'),
+    acceptFriendRequest: (requestId: string) =>
+      request<void>(
+        `/client/contacts/friend-requests/${encodeURIComponent(requestId)}/accept`,
+        { method: 'POST' },
+      ),
+    rejectFriendRequest: (requestId: string) =>
+      request<void>(
+        `/client/contacts/friend-requests/${encodeURIComponent(requestId)}/reject`,
+        { method: 'POST' },
+      ),
+    removeContact: (friendUserId: string) =>
+      request<void>(`/client/contacts/${encodeURIComponent(friendUserId)}`, {
+        method: 'DELETE',
+      }),
+    blockContact: (targetUserId: string) =>
+      request<void>(
+        `/client/contacts/${encodeURIComponent(targetUserId)}/block`,
+        { method: 'POST' },
+      ),
+    unblockContact: (targetUserId: string) =>
+      request<void>(
+        `/client/contacts/${encodeURIComponent(targetUserId)}/unblock`,
+        { method: 'POST' },
+      ),
+    updateContactRemark: (friendUserId: string, remark: string) =>
+      request<void>(
+        `/client/contacts/${encodeURIComponent(friendUserId)}/remark`,
+        {
+          method: 'PUT',
+          body: JSON.stringify({ remark }),
+        },
+      ),
+
+    listSessions: () => request<HubSession[]>('/client/sessions'),
+    searchSessions: (q: string) =>
+      request<HubSession[]>(
+        `/client/sessions/search?q=${encodeURIComponent(q)}`,
+      ),
+    createPrivateSession: (body: HubCreatePrivateSessionRequest) =>
+      request<HubSession>('/client/sessions/private', {
+        method: 'POST',
+        body: JSON.stringify(body),
+      }),
+    createGroupSession: (body: HubCreateGroupSessionRequest) =>
+      request<HubSession>('/client/sessions/group', {
+        method: 'POST',
+        body: JSON.stringify(body),
+      }),
+    addSessionMembers: (sessionId: string, memberIds: string[]) =>
+      request<void>(`/client/sessions/${encodeURIComponent(sessionId)}/members`, {
+        method: 'POST',
+        body: JSON.stringify({ member_ids: memberIds }),
+      }),
+    removeSessionMember: (sessionId: string, userId: string) =>
+      request<void>(
+        `/client/sessions/${encodeURIComponent(sessionId)}/members/${encodeURIComponent(userId)}`,
+        { method: 'DELETE' },
+      ),
+    leaveSession: (sessionId: string) =>
+      request<void>(`/client/sessions/${encodeURIComponent(sessionId)}/leave`, {
+        method: 'POST',
+      }),
+    transferSessionOwnership: (sessionId: string, newOwnerId: string) =>
+      request<void>(
+        `/client/sessions/${encodeURIComponent(sessionId)}/transfer-owner`,
+        {
+          method: 'POST',
+          body: JSON.stringify({ new_owner_id: newOwnerId }),
+        },
+      ),
+    dissolveSession: (sessionId: string) =>
+      request<void>(
+        `/client/sessions/${encodeURIComponent(sessionId)}/dissolve`,
+        { method: 'POST' },
+      ),
+    updateSessionInfo: (
+      sessionId: string,
+      body: HubUpdateSessionInfoRequest,
+    ) =>
+      request<void>(`/client/sessions/${encodeURIComponent(sessionId)}/info`, {
+        method: 'PUT',
+        body: JSON.stringify(body),
+      }),
+    updateSessionSettings: (
+      sessionId: string,
+      body: HubUpdateSessionSettingsRequest,
+    ) =>
+      request<void>(
+        `/client/sessions/${encodeURIComponent(sessionId)}/settings`,
+        {
+          method: 'PUT',
+          body: JSON.stringify(body),
+        },
+      ),
+    deleteSession: (sessionId: string) =>
+      request<void>(`/client/sessions/${encodeURIComponent(sessionId)}`, {
+        method: 'DELETE',
+      }),
+
+    sendMessage: (sessionId: string, body: HubSendMessageRequest) =>
+      request<HubSendMessageResponse>(
+        `/client/sessions/${encodeURIComponent(sessionId)}/messages`,
+        { method: 'POST', body: JSON.stringify(body) },
+      ),
+    getMessages: (
+      sessionId: string,
+      params?: { before_seq?: number; limit?: number },
+    ) =>
+      request<HubMessage[]>(
+        `/client/sessions/${encodeURIComponent(sessionId)}/messages${qs(params ?? {})}`,
+      ),
+    syncMessages: (
+      sessionId: string,
+      params?: { after_seq?: number; limit?: number },
+    ) =>
+      request<HubMessage[]>(
+        `/client/sessions/${encodeURIComponent(sessionId)}/messages/sync${qs(params ?? {})}`,
+      ),
+    markRead: (sessionId: string, lastReadSeq: number) =>
+      request<void>(`/client/sessions/${encodeURIComponent(sessionId)}/read`, {
+        method: 'POST',
+        body: JSON.stringify({ last_read_seq: lastReadSeq }),
+      }),
+    recallMessage: (messageId: string) =>
+      request<void>(`/client/messages/${encodeURIComponent(messageId)}/recall`, {
+        method: 'POST',
+      }),
+    pinMessage: (messageId: string, sessionId: string) =>
+      request<void>(`/client/messages/${encodeURIComponent(messageId)}/pin`, {
+        method: 'POST',
+        body: JSON.stringify({ session_id: sessionId }),
+      }),
+    unpinMessage: (messageId: string, sessionId: string) =>
+      request<void>(`/client/messages/${encodeURIComponent(messageId)}/pin`, {
+        method: 'DELETE',
+        body: JSON.stringify({ session_id: sessionId }),
+      }),
+    forwardMessage: (messageId: string, targetSessionIds: string[]) =>
+      request<void>(
+        `/client/messages/${encodeURIComponent(messageId)}/forward`,
+        {
+          method: 'POST',
+          body: JSON.stringify({ target_session_ids: targetSessionIds }),
+        },
+      ),
+    listPinnedMessages: (sessionId: string) =>
+      request<HubMessage[]>(
+        `/client/sessions/${encodeURIComponent(sessionId)}/pins`,
+      ),
+    searchMessages: (params: {
+      q: string;
+      session_id?: string;
+      content_type?: string;
+      from?: string;
+      to?: string;
+    }) => request<HubMessage[]>(`/client/messages/search${qs(params)}`),
+    searchSessionMessages: (
+      sessionId: string,
+      params: { q: string; content_type?: string; from?: string; to?: string },
+    ) =>
+      request<HubMessage[]>(
+        `/client/sessions/${encodeURIComponent(sessionId)}/messages/search${qs(params)}`,
+      ),
+
+    listNotifications: (params?: {
+      unread_only?: boolean;
+      limit?: number;
+      offset?: number;
+    }) =>
+      request<HubNotification[]>(
+        `/client/notifications${qs(params ?? {})}`,
+      ),
+    markNotificationRead: (id: string) =>
+      requestWithFallback<void>(
+        [
+          `/client/notifications/${encodeURIComponent(id)}:read`,
+          `/client/notifications/${encodeURIComponent(id)}/read`,
+        ],
+        { method: 'POST' },
+      ),
+    readAllNotifications: () =>
+      requestWithFallback<void>(
+        ['/client/notifications:read-all', '/client/notifications/read-all'],
+        { method: 'POST' },
+      ),
+
+    registerDevice: (body: HubRegisterDeviceRequest) =>
+      requestWithFallback<HubDevice>(['/edge/devices:register', '/edge/devices/register'], {
+        method: 'POST',
+        body: JSON.stringify(normalizeRegisterDeviceRequest(body)),
+      }),
+    ackTask: (taskId: string, runId?: string) =>
+      request<void>(`/edge/agent-tasks/${encodeURIComponent(taskId)}/ack`, {
+        method: 'POST',
+        body: runId ? JSON.stringify({ run_id: runId }) : undefined,
+      }),
+    streamTask: (taskId: string, content: string, runId?: string) =>
+      request<void>(`/edge/agent-tasks/${encodeURIComponent(taskId)}/stream`, {
+        method: 'POST',
+        body: JSON.stringify({ content, ...(runId ? { run_id: runId } : {}) }),
+      }),
+    doneTask: (taskId: string, finalContent?: string, runId?: string) =>
+      request<void>(`/edge/agent-tasks/${encodeURIComponent(taskId)}/done`, {
+        method: 'POST',
+        body: JSON.stringify({
+          final_content: finalContent ?? '',
+          ...(runId ? { run_id: runId } : {}),
+        }),
+      }),
+    failTask: (taskId: string, error: string, runId?: string) =>
+      request<void>(`/edge/agent-tasks/${encodeURIComponent(taskId)}/fail`, {
+        method: 'POST',
+        body: JSON.stringify({ error, ...(runId ? { run_id: runId } : {}) }),
+      }),
+
+    addAgentToSession: (
+      sessionId: string,
+      body: HubAddAgentToSessionRequest,
+    ) =>
+      request<void>(
+        `/client/sessions/${encodeURIComponent(sessionId)}/agents`,
+        {
+          method: 'POST',
+          body: JSON.stringify(body),
+        },
+      ),
+    triggerAgentTask: (triggerMessageId: string) =>
+      request<HubAgentTask>('/web/agent-tasks', {
+        method: 'POST',
+        body: JSON.stringify({ trigger_message_id: triggerMessageId }),
+      }),
+    cancelAgentTask: (taskId: string) =>
+      requestWithFallback<void>(
+        [
+          `/web/agent-tasks/${encodeURIComponent(taskId)}:cancel`,
+          `/web/agent-tasks/${encodeURIComponent(taskId)}/cancel`,
+        ],
+        { method: 'POST' },
+      ),
+
+    listExecutionTargets: () =>
+      request<HubListResponse<HubExecutionTarget>>('/web/execution-targets'),
+    createExecutionTarget: (body: HubExecutionTargetRequest) =>
+      request<HubExecutionTarget>('/web/execution-targets', {
+        method: 'POST',
+        body: JSON.stringify(body),
+      }),
+    getExecutionTarget: (id: string) =>
+      request<HubExecutionTarget>(
+        `/web/execution-targets/${encodeURIComponent(id)}`,
+      ),
+    updateExecutionTarget: (
+      id: string,
+      body: Partial<HubExecutionTargetRequest>,
+    ) =>
+      request<HubExecutionTarget>(
+        `/web/execution-targets/${encodeURIComponent(id)}`,
+        {
+          method: 'PATCH',
+          body: JSON.stringify(body),
+        },
+      ),
+    deleteExecutionTarget: (id: string) =>
+      request<void>(`/web/execution-targets/${encodeURIComponent(id)}`, {
+        method: 'DELETE',
+      }),
+    pingExecutionTarget: (id: string) =>
+      request<HubExecutionTarget>(
+        `/web/execution-targets/${encodeURIComponent(id)}:ping`,
+        { method: 'POST' },
+      ),
+    listAuditEvents: (params?: { pageSize?: number; pageCursor?: string }) =>
+      request<HubListResponse<HubAuditEvent>>(
+        `/web/audit-events${qs(params ?? {})}`,
+      ),
+    createRelayCommand: (body: HubRelayCommandRequest) =>
+      request<HubRelayCommand>('/web/relay/commands', {
+        method: 'POST',
+        body: JSON.stringify(body),
+      }),
+    getRelayCommand: (id: string) =>
+      request<HubRelayCommand>(`/web/relay/commands/${encodeURIComponent(id)}`),
+    ackRelayCommand: (id: string) =>
+      request<void>(`/web/relay/commands/${encodeURIComponent(id)}:ack`, {
+        method: 'POST',
+      }),
+
+    listCustomAgents: () =>
+      request<HubCustomAgent[]>('/web/custom-agents'),
+    createCustomAgent: (body: HubCustomAgentRequest) =>
+      request<HubCustomAgent>('/web/custom-agents', {
+        method: 'POST',
+        body: JSON.stringify(body),
+      }),
+    updateCustomAgent: (id: string, body: HubCustomAgentRequest) =>
+      request<void>(`/web/custom-agents/${encodeURIComponent(id)}`, {
+        method: 'PUT',
+        body: JSON.stringify(body),
+      }),
+    deleteCustomAgent: (id: string) =>
+      request<void>(`/web/custom-agents/${encodeURIComponent(id)}`, {
+        method: 'DELETE',
+      }),
+  };
+}
+
+export type HubClient = ReturnType<typeof createHubClient>;
+
+export type RegisterRequest = HubRegisterRequest;
+export type LoginRequest = HubLoginRequest;
+export type AuthResponse = HubAuthResponse;
+export type UserProfile = HubUserProfile;
+export type UpdateProfileRequest = HubUpdateProfileRequest;
+export type ChangePasswordRequest = HubChangePasswordRequest;
+export type SearchResult = HubSearchResult;
+export type FriendRequestInfo = HubFriendRequest;
+export type ContactInfo = HubContactInfo;
+export interface Contact {
+  id: string;
+  user_id: string;
+  friend_id: string;
+  status: string;
+  remark?: string;
+  friend?: UserProfile;
+  created_at?: string;
+}
+export type Session = HubSession;
+export type SessionMember = HubSessionMember;
+export type CreatePrivateSessionRequest = HubCreatePrivateSessionRequest;
+export type CreateGroupSessionRequest = HubCreateGroupSessionRequest;
+export type SendMessageRequest = HubSendMessageRequest;
+export type SendMessageResponse = HubSendMessageResponse;
+export type ReplyToInfo = HubReplyToInfo;
+export type MessageResponse = HubMessage;
+export type RegisterDeviceRequest = HubRegisterDeviceRequest;
+export type Device = HubDevice;
+export type AddAgentToSessionRequest = HubAddAgentToSessionRequest;
+export type CustomAgentRequest = HubCustomAgentRequest;
+
+function isRouteFallbackError(error: unknown): boolean {
+  return error instanceof AppError && (error.status === 404 || error.status === 405);
+}
+
+function normalizeRegisterDeviceRequest(
+  body: HubRegisterDeviceRequest,
+): HubRegisterDeviceRequest & {
+  device_name: string;
+  device_type: string;
+  capabilities?: Record<string, unknown>;
+} {
+  const normalized = {
+    ...body,
+    device_name: body.device_name ?? body.device_id,
+    device_type: body.device_type ?? 'desktop',
+  };
+
+  if (Array.isArray(body.capabilities)) {
+    return {
+      ...normalized,
+      capabilities: Object.fromEntries(body.capabilities.map((capability) => [capability, true])),
+    };
+  }
+
+  return normalized as HubRegisterDeviceRequest & {
+    device_name: string;
+    device_type: string;
+    capabilities?: Record<string, unknown>;
+  };
+}
+
+async function readJson(response: Response): Promise<unknown> {
+  try {
+    return await response.json();
+  } catch {
+    return undefined;
+  }
+}
+
+function qs(
+  params: Record<string, string | number | boolean | undefined | null>,
+): string {
+  const search = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value !== undefined && value !== null) {
+      search.set(key, String(value));
+    }
+  }
+  const value = search.toString();
+  return value ? `?${value}` : '';
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function text(value: unknown): string | undefined {
+  return typeof value === 'string' ? value : undefined;
+}
diff --git a/app/shared/src/index.ts b/app/shared/src/index.ts
index 36a673c25..79e495e86 100644
--- a/app/shared/src/index.ts
+++ b/app/shared/src/index.ts
@@ -146,3 +146,30 @@ export {
   playRunLifecycle,
   playMessageStream,
 } from './mock';
+
+// Workbench state management (shared across Desktop and Web)
+export {
+  workbenchReducer,
+  type WorkbenchState,
+  type WorkbenchAction,
+  type WorkbenchSnapshot,
+} from './workbenchState';
+
+// Workbench data mode classifier
+export {
+  getWorkbenchDataMode,
+  getWorkbenchCatalogState,
+  getWorkbenchSectionSource,
+  type WorkbenchDataMode,
+  type WorkbenchCatalogState,
+} from './workbenchDataMode';
+
+// Hub REST client (shared across Desktop and Web)
+export {
+  createHubClient,
+  type HubClient,
+  type HubEnvelope,
+  type HubSession,
+  type HubMessage,
+  type HubContactInfo,
+} from './hubClient';
diff --git a/app/shared/src/surfaceMetadata.test.ts b/app/shared/src/surfaceMetadata.test.ts
new file mode 100644
index 000000000..41c77b500
--- /dev/null
+++ b/app/shared/src/surfaceMetadata.test.ts
@@ -0,0 +1,116 @@
+import { describe, expect, it } from 'vitest';
+import {
+  SURFACE_METADATA,
+  SURFACE_STATUS_METADATA,
+  getSurfaceByDesktopSectionId,
+  getSurfaceByWebRoute,
+  getSurfaceMetadata,
+  getSurfaceStatusMetadata,
+  getSurfacesByCategory,
+  type SurfaceStatus,
+} from './surfaceMetadata';
+
+describe('surfaceMetadata', () => {
+  it('defines the exact shared surface status vocabulary with translation keys', () => {
+    const expectedStatuses: SurfaceStatus[] = [
+      'realSnapshot',
+      'localSource',
+      'loginLocked',
+      'interfaceGap',
+      'error',
+      'demoFallback',
+      'catalogFallback',
+    ];
+
+    expect(SURFACE_STATUS_METADATA.map((status) => status.id)).toEqual(expectedStatuses);
+
+    for (const status of SURFACE_STATUS_METADATA) {
+      expect(status.labelKey).toMatch(/^surface\.status\.[^.]+\.label$/);
+      expect(status.descriptionKey).toMatch(/^surface\.status\.[^.]+\.description$/);
+      expect('label' in status).toBe(false);
+      expect('description' in status).toBe(false);
+    }
+  });
+
+  it('keeps surface ids, desktop sections, and web route patterns unique', () => {
+    const ids = SURFACE_METADATA.map((surface) => surface.id);
+    const desktopSectionIds = SURFACE_METADATA.flatMap((surface) =>
+      surface.desktopSectionId === undefined ? [] : [surface.desktopSectionId],
+    );
+    const webRoutePatterns = SURFACE_METADATA.flatMap((surface) =>
+      surface.webRoutePattern === undefined ? [] : [surface.webRoutePattern],
+    );
+
+    expect(new Set(ids).size).toBe(ids.length);
+    expect(new Set(desktopSectionIds).size).toBe(desktopSectionIds.length);
+    expect(new Set(webRoutePatterns).size).toBe(webRoutePatterns.length);
+  });
+
+  it('maps every surface to known status, category, platform, and translation keys', () => {
+    const statuses = new Set(SURFACE_STATUS_METADATA.map((status) => status.id));
+    const categories = new Set([
+      'command-center',
+      'workspace',
+      'automation',
+      'system',
+      'communication',
+      'catalog',
+      'preview',
+    ]);
+
+    for (const surface of SURFACE_METADATA) {
+      expect(statuses.has(surface.defaultStatus)).toBe(true);
+      expect(categories.has(surface.category)).toBe(true);
+      expect(['desktop', 'web']).toContain(surface.platform);
+      expect(surface.labelKey.length).toBeGreaterThan(0);
+      expect(surface.descriptionKey.length).toBeGreaterThan(0);
+      expect('label' in surface).toBe(false);
+      expect('name' in surface).toBe(false);
+      expect('i18nKey' in surface).toBe(false);
+      expect('webRoute' in surface).toBe(false);
+    }
+  });
+
+  it('looks up desktop settings sections', () => {
+    expect(getSurfaceByDesktopSectionId('tasks')).toMatchObject({
+      id: 'desktop.settings.tasks',
+      defaultStatus: 'realSnapshot',
+    });
+    expect(getSurfaceByDesktopSectionId('remoteControl')).toMatchObject({
+      id: 'desktop.settings.remoteControl',
+      defaultStatus: 'interfaceGap',
+    });
+  });
+
+  it('matches web root and parameterized group/project routes', () => {
+    expect(getSurfaceByWebRoute('/')).toMatchObject({
+      id: 'web.workbench',
+      defaultStatus: 'error',
+    });
+    expect(getSurfaceByWebRoute('/group/abc')).toMatchObject({
+      id: 'web.groupWorkspace',
+      defaultStatus: 'demoFallback',
+    });
+    expect(getSurfaceByWebRoute('/project/foo')).toMatchObject({
+      id: 'web.projectPreview',
+      defaultStatus: 'demoFallback',
+    });
+  });
+
+  it('looks up categories and known statuses', () => {
+    expect(getSurfaceMetadata('desktop.settings.agentMarket')).toMatchObject({
+      category: 'catalog',
+      defaultStatus: 'loginLocked',
+    });
+    expect(getSurfaceStatusMetadata('interfaceGap')).toMatchObject({
+      labelKey: 'surface.status.interfaceGap.label',
+      descriptionKey: 'surface.status.interfaceGap.description',
+    });
+    expect(getSurfacesByCategory('communication').map((surface) => surface.id)).toEqual([
+      'desktop.settings.onlineIm',
+      'desktop.settings.groupChat',
+      'web.privateChats',
+      'web.groupWorkspace',
+    ]);
+  });
+});
diff --git a/app/shared/src/surfaceMetadata.ts b/app/shared/src/surfaceMetadata.ts
new file mode 100644
index 000000000..ad435c840
--- /dev/null
+++ b/app/shared/src/surfaceMetadata.ts
@@ -0,0 +1,362 @@
+export type SurfacePlatform = 'desktop' | 'web';
+
+export type SurfaceCategory =
+  | 'command-center'
+  | 'workspace'
+  | 'automation'
+  | 'system'
+  | 'communication'
+  | 'catalog'
+  | 'preview';
+
+export type SurfaceStatus =
+  | 'realSnapshot'
+  | 'localSource'
+  | 'loginLocked'
+  | 'interfaceGap'
+  | 'error'
+  | 'demoFallback'
+  | 'catalogFallback';
+
+export interface SurfaceStatusMetadata {
+  id: SurfaceStatus;
+  labelKey: string;
+  descriptionKey: string;
+}
+
+export interface SurfaceMetadata {
+  id: string;
+  platform: SurfacePlatform;
+  category: SurfaceCategory;
+  labelKey: string;
+  descriptionKey: string;
+  desktopSectionId?: string;
+  webRoutePattern?: string;
+  defaultStatus: SurfaceStatus;
+}
+
+export const SURFACE_STATUS_METADATA = [
+  {
+    id: 'realSnapshot',
+    labelKey: 'surface.status.realSnapshot.label',
+    descriptionKey: 'surface.status.realSnapshot.description',
+  },
+  {
+    id: 'localSource',
+    labelKey: 'surface.status.localSource.label',
+    descriptionKey: 'surface.status.localSource.description',
+  },
+  {
+    id: 'loginLocked',
+    labelKey: 'surface.status.loginLocked.label',
+    descriptionKey: 'surface.status.loginLocked.description',
+  },
+  {
+    id: 'interfaceGap',
+    labelKey: 'surface.status.interfaceGap.label',
+    descriptionKey: 'surface.status.interfaceGap.description',
+  },
+  {
+    id: 'error',
+    labelKey: 'surface.status.error.label',
+    descriptionKey: 'surface.status.error.description',
+  },
+  {
+    id: 'demoFallback',
+    labelKey: 'surface.status.demoFallback.label',
+    descriptionKey: 'surface.status.demoFallback.description',
+  },
+  {
+    id: 'catalogFallback',
+    labelKey: 'surface.status.catalogFallback.label',
+    descriptionKey: 'surface.status.catalogFallback.description',
+  },
+] as const satisfies readonly SurfaceStatusMetadata[];
+
+export const SURFACE_METADATA = [
+  {
+    id: 'desktop.commandCenter',
+    platform: 'desktop',
+    category: 'command-center',
+    labelKey: 'surface.desktop.commandCenter.label',
+    descriptionKey: 'surface.desktop.commandCenter.description',
+    defaultStatus: 'realSnapshot',
+  },
+  {
+    id: 'desktop.settings.general',
+    platform: 'desktop',
+    category: 'workspace',
+    labelKey: 'settings.general',
+    descriptionKey: 'settings.general.description',
+    desktopSectionId: 'general',
+    defaultStatus: 'localSource',
+  },
+  {
+    id: 'desktop.settings.appearance',
+    platform: 'desktop',
+    category: 'workspace',
+    labelKey: 'settings.appearance',
+    descriptionKey: 'settings.appearance.description',
+    desktopSectionId: 'appearance',
+    defaultStatus: 'localSource',
+  },
+  {
+    id: 'desktop.settings.permissions',
+    platform: 'desktop',
+    category: 'workspace',
+    labelKey: 'settings.permissions',
+    descriptionKey: 'settings.permissions.description',
+    desktopSectionId: 'permissions',
+    defaultStatus: 'interfaceGap',
+  },
+  {
+    id: 'desktop.settings.agentProfiles',
+    platform: 'desktop',
+    category: 'workspace',
+    labelKey: 'settings.agentProfiles',
+    descriptionKey: 'settings.agentProfiles.description',
+    desktopSectionId: 'agentProfiles',
+    defaultStatus: 'realSnapshot',
+  },
+  {
+    id: 'desktop.settings.executionTargets',
+    platform: 'desktop',
+    category: 'workspace',
+    labelKey: 'settings.executionTargets',
+    descriptionKey: 'settings.executionTargets.description',
+    desktopSectionId: 'executionTargets',
+    defaultStatus: 'realSnapshot',
+  },
+  {
+    id: 'desktop.settings.tasks',
+    platform: 'desktop',
+    category: 'workspace',
+    labelKey: 'settings.tasks',
+    descriptionKey: 'settings.tasks.description',
+    desktopSectionId: 'tasks',
+    defaultStatus: 'realSnapshot',
+  },
+  {
+    id: 'desktop.settings.onlineIm',
+    platform: 'desktop',
+    category: 'communication',
+    labelKey: 'settings.onlineIm',
+    descriptionKey: 'settings.onlineIm.description',
+    desktopSectionId: 'onlineIm',
+    defaultStatus: 'loginLocked',
+  },
+  {
+    id: 'desktop.settings.groupChat',
+    platform: 'desktop',
+    category: 'communication',
+    labelKey: 'settings.groupChat',
+    descriptionKey: 'settings.groupChat.description',
+    desktopSectionId: 'groupChat',
+    defaultStatus: 'loginLocked',
+  },
+  {
+    id: 'desktop.settings.agentScheduling',
+    platform: 'desktop',
+    category: 'automation',
+    labelKey: 'settings.agentScheduling',
+    descriptionKey: 'settings.agentScheduling.description',
+    desktopSectionId: 'agentScheduling',
+    defaultStatus: 'realSnapshot',
+  },
+  {
+    id: 'desktop.settings.agentMarket',
+    platform: 'desktop',
+    category: 'catalog',
+    labelKey: 'settings.agentMarket',
+    descriptionKey: 'settings.agentMarket.description',
+    desktopSectionId: 'agentMarket',
+    defaultStatus: 'loginLocked',
+  },
+  {
+    id: 'desktop.settings.mcp',
+    platform: 'desktop',
+    category: 'automation',
+    labelKey: 'settings.mcp',
+    descriptionKey: 'settings.mcp.description',
+    desktopSectionId: 'mcp',
+    defaultStatus: 'interfaceGap',
+  },
+  {
+    id: 'desktop.settings.skills',
+    platform: 'desktop',
+    category: 'automation',
+    labelKey: 'settings.skills',
+    descriptionKey: 'settings.skills.description',
+    desktopSectionId: 'skills',
+    defaultStatus: 'catalogFallback',
+  },
+  {
+    id: 'desktop.settings.models',
+    platform: 'desktop',
+    category: 'automation',
+    labelKey: 'settings.models',
+    descriptionKey: 'settings.models.description',
+    desktopSectionId: 'models',
+    defaultStatus: 'localSource',
+  },
+  {
+    id: 'desktop.settings.modelMapping',
+    platform: 'desktop',
+    category: 'automation',
+    labelKey: 'settings.modelMapping',
+    descriptionKey: 'settings.modelMapping.description',
+    desktopSectionId: 'modelMapping',
+    defaultStatus: 'localSource',
+  },
+  {
+    id: 'desktop.settings.ccSwitch',
+    platform: 'desktop',
+    category: 'automation',
+    labelKey: 'settings.ccSwitch',
+    descriptionKey: 'settings.ccSwitch.description',
+    desktopSectionId: 'ccSwitch',
+    defaultStatus: 'localSource',
+  },
+  {
+    id: 'desktop.settings.connections',
+    platform: 'desktop',
+    category: 'automation',
+    labelKey: 'settings.connections',
+    descriptionKey: 'settings.connections.description',
+    desktopSectionId: 'connections',
+    defaultStatus: 'realSnapshot',
+  },
+  {
+    id: 'desktop.settings.remoteControl',
+    platform: 'desktop',
+    category: 'automation',
+    labelKey: 'settings.remoteControl',
+    descriptionKey: 'settings.remoteControl.description',
+    desktopSectionId: 'remoteControl',
+    defaultStatus: 'interfaceGap',
+  },
+  {
+    id: 'desktop.settings.platforms',
+    platform: 'desktop',
+    category: 'system',
+    labelKey: 'settings.platforms',
+    descriptionKey: 'settings.platforms.description',
+    desktopSectionId: 'platforms',
+    defaultStatus: 'interfaceGap',
+  },
+  {
+    id: 'desktop.settings.account',
+    platform: 'desktop',
+    category: 'system',
+    labelKey: 'settings.account',
+    descriptionKey: 'settings.account.description',
+    desktopSectionId: 'account',
+    defaultStatus: 'loginLocked',
+  },
+  {
+    id: 'desktop.settings.securityAudit',
+    platform: 'desktop',
+    category: 'system',
+    labelKey: 'settings.securityAudit',
+    descriptionKey: 'settings.securityAudit.description',
+    desktopSectionId: 'securityAudit',
+    defaultStatus: 'interfaceGap',
+  },
+  {
+    id: 'web.workbench',
+    platform: 'web',
+    category: 'preview',
+    labelKey: 'nav.workbench',
+    descriptionKey: 'surface.web.workbench.description',
+    webRoutePattern: '/',
+    defaultStatus: 'error',
+  },
+  {
+    id: 'web.agentSquare',
+    platform: 'web',
+    category: 'catalog',
+    labelKey: 'nav.agentSquare',
+    descriptionKey: 'surface.web.agentSquare.description',
+    webRoutePattern: '/agent-square',
+    defaultStatus: 'catalogFallback',
+  },
+  {
+    id: 'web.privateChats',
+    platform: 'web',
+    category: 'communication',
+    labelKey: 'nav.privateChats',
+    descriptionKey: 'surface.web.privateChats.description',
+    webRoutePattern: '/chats',
+    defaultStatus: 'loginLocked',
+  },
+  {
+    id: 'web.groupWorkspace',
+    platform: 'web',
+    category: 'communication',
+    labelKey: 'nav.groupWorkspace',
+    descriptionKey: 'surface.web.groupWorkspace.description',
+    webRoutePattern: '/group/:id',
+    defaultStatus: 'demoFallback',
+  },
+  {
+    id: 'web.projectPreview',
+    platform: 'web',
+    category: 'preview',
+    labelKey: 'nav.projectPreview',
+    descriptionKey: 'surface.web.projectPreview.description',
+    webRoutePattern: '/project/:id',
+    defaultStatus: 'demoFallback',
+  },
+] as const satisfies readonly SurfaceMetadata[];
+
+export type SurfaceId = (typeof SURFACE_METADATA)[number]['id'];
+
+export const surfaceStatusById = Object.fromEntries(
+  SURFACE_STATUS_METADATA.map((status) => [status.id, status]),
+) as Record<SurfaceStatus, SurfaceStatusMetadata>;
+
+export const surfaceMetadataById = Object.fromEntries(
+  SURFACE_METADATA.map((surface) => [surface.id, surface]),
+) as Record<SurfaceId, SurfaceMetadata>;
+
+export function getSurfaceStatusMetadata(status: SurfaceStatus): SurfaceStatusMetadata {
+  return surfaceStatusById[status];
+}
+
+export function getSurfaceMetadata(id: SurfaceId): SurfaceMetadata {
+  return surfaceMetadataById[id];
+}
+
+export function getSurfacesByCategory(category: SurfaceCategory): SurfaceMetadata[] {
+  return SURFACE_METADATA.filter((surface) => surface.category === category);
+}
+
+export function getSurfaceByDesktopSectionId(sectionId: string): SurfaceMetadata | undefined {
+  return SURFACE_METADATA.find(
+    (surface) => 'desktopSectionId' in surface && surface.desktopSectionId === sectionId,
+  );
+}
+
+export function getSurfaceByWebRoute(route: string): SurfaceMetadata | undefined {
+  return SURFACE_METADATA.find(
+    (surface) =>
+      surface.platform === 'web' &&
+      'webRoutePattern' in surface &&
+      matchesRoutePattern(route, surface.webRoutePattern),
+  );
+}
+
+function matchesRoutePattern(route: string, pattern: string): boolean {
+  const routeParts = trimSlashes(route).split('/').filter(Boolean);
+  const patternParts = trimSlashes(pattern).split('/').filter(Boolean);
+
+  if (routeParts.length !== patternParts.length) {
+    return false;
+  }
+
+  return patternParts.every((part, index) => part.startsWith(':') || part === routeParts[index]);
+}
+
+function trimSlashes(value: string): string {
+  return value.replace(/^\/+|\/+$/g, '');
+}
diff --git a/app/shared/src/workbenchDataMode.test.ts b/app/shared/src/workbenchDataMode.test.ts
new file mode 100644
index 000000000..2538ae784
--- /dev/null
+++ b/app/shared/src/workbenchDataMode.test.ts
@@ -0,0 +1,130 @@
+import { describe, expect, it } from 'vitest';
+import {
+  getWorkbenchCatalogState,
+  getWorkbenchDataMode,
+  getWorkbenchSectionSource,
+  type WorkbenchDataMode,
+} from './workbenchDataMode';
+import type { WorkbenchState } from './workbenchState';
+
+function state(
+  overrides: Partial<WorkbenchState> = {},
+): WorkbenchState {
+  return {
+    projects: [],
+    threads: [],
+    runners: [],
+    runs: [],
+    threadItems: [],
+    approvals: [],
+    artifacts: [],
+    previews: [],
+    runLogs: {},
+    connection: { status: 'idle' },
+    lastSeq: 0,
+    ...overrides,
+  };
+}
+
+describe('workbenchDataMode', () => {
+  it.each<Array<[string, WorkbenchState, WorkbenchDataMode]>>([
+    ['loading while Edge snapshot is pending', state({ connection: { status: 'loading' } }), 'loading'],
+    [
+      'live when connected with snapshot data',
+      state({
+        connection: { status: 'connected' },
+        projects: [{ id: 'project-1', name: 'AgentHub', createdAt: '2026-05-24T10:00:00.000Z' }],
+      }),
+      'live',
+    ],
+    [
+      'offline snapshot when disconnected with reducer data',
+      state({
+        connection: { status: 'disconnected', error: 'socket closed' },
+        runs: [
+          {
+            runId: 'run-1',
+            projectId: 'project-1',
+            threadId: 'thread-1',
+            status: 'running',
+            createdAt: '2026-05-24T10:00:00.000Z',
+          },
+        ],
+      }),
+      'offline-snapshot',
+    ],
+    [
+      'mock fallback when Edge failed before snapshot data loaded',
+      state({ connection: { status: 'error', error: 'network down' } }),
+      'mock',
+    ],
+    ['unavailable before a load begins', state(), 'unavailable'],
+  ])('%s', (_label, input, expected) => {
+    expect(getWorkbenchDataMode(input)).toBe(expected);
+  });
+
+  it('keeps mock fallback visually distinct from live catalog data', () => {
+    const catalogState = getWorkbenchCatalogState(
+      state({ connection: { status: 'error', error: 'network down' } }),
+    );
+
+    expect(catalogState).toMatchObject({
+      mode: 'mock',
+      label: 'Mock fallback',
+      tone: 'amber',
+      hasLiveCatalog: false,
+    });
+    expect(catalogState.message).toContain('Showing mock demo data.');
+  });
+
+  it('marks offline snapshots as reusable catalog data without calling them live', () => {
+    const catalogState = getWorkbenchCatalogState(
+      state({
+        connection: { status: 'error', error: 'network down' },
+        runners: [{ id: 'runner-1', name: 'Local Runner', status: 'online' }],
+      }),
+    );
+
+    expect(catalogState).toMatchObject({
+      mode: 'offline-snapshot',
+      label: 'Offline snapshot',
+      tone: 'purple',
+      hasLiveCatalog: true,
+    });
+  });
+
+  it.each([
+    [
+      'loading section without snapshot data',
+      { mode: 'loading', hasSectionSnapshot: false },
+      { label: 'Loading snapshot', tone: 'cyan' },
+    ],
+    [
+      'unavailable section without snapshot data',
+      { mode: 'unavailable', hasSectionSnapshot: false },
+      { label: 'Snapshot unavailable', tone: 'neutral' },
+    ],
+    [
+      'mock section without snapshot data',
+      { mode: 'mock', hasSectionSnapshot: false },
+      { label: 'Mock fallback', tone: 'amber' },
+    ],
+    [
+      'offline section with snapshot data',
+      { mode: 'offline-snapshot', hasSectionSnapshot: true },
+      { label: 'Offline snapshot', tone: 'purple' },
+    ],
+    [
+      'available snapshot mode with section data',
+      { mode: 'live', hasSectionSnapshot: true },
+      { label: 'Edge snapshot', tone: 'green' },
+    ],
+    [
+      'local dry-run layered over the base section source',
+      { mode: 'mock', hasSectionSnapshot: false, hasLocalDryRun: true },
+      { label: 'Local dry-run / Mock fallback', tone: 'cyan' },
+    ],
+  ] as const)('%s', (_label, input, expected) => {
+    expect(getWorkbenchSectionSource(input)).toEqual(expected);
+  });
+});
diff --git a/app/shared/src/workbenchDataMode.ts b/app/shared/src/workbenchDataMode.ts
new file mode 100644
index 000000000..cd7707fdf
--- /dev/null
+++ b/app/shared/src/workbenchDataMode.ts
@@ -0,0 +1,154 @@
+import type { WorkbenchState } from './workbenchState';
+
+export type WorkbenchDataMode =
+  | 'loading'
+  | 'live'
+  | 'offline-snapshot'
+  | 'mock'
+  | 'unavailable';
+
+export type WorkbenchCatalogTone =
+  | 'green'
+  | 'cyan'
+  | 'purple'
+  | 'amber'
+  | 'neutral';
+
+export interface WorkbenchCatalogState {
+  mode: WorkbenchDataMode;
+  label: string;
+  tone: WorkbenchCatalogTone;
+  message: string;
+  hasLiveCatalog: boolean;
+}
+
+export interface WorkbenchSectionSource {
+  label: string;
+  tone: WorkbenchCatalogTone;
+}
+
+export interface WorkbenchSectionSourceInput {
+  mode: WorkbenchDataMode;
+  hasSectionSnapshot: boolean;
+  hasLocalDryRun?: boolean;
+}
+
+export const workbenchDataModeLabels: Record<WorkbenchDataMode, string> = {
+  loading: 'Loading catalog',
+  live: 'Live',
+  'offline-snapshot': 'Offline snapshot',
+  mock: 'Mock fallback',
+  unavailable: 'Snapshot unavailable',
+};
+
+export const workbenchDataModeTones: Record<WorkbenchDataMode, WorkbenchCatalogTone> = {
+  loading: 'cyan',
+  live: 'green',
+  'offline-snapshot': 'purple',
+  mock: 'amber',
+  unavailable: 'neutral',
+};
+
+export function getWorkbenchDataMode(state: WorkbenchState): WorkbenchDataMode {
+  const hasSnapshot = hasWorkbenchSnapshotData(state);
+
+  if (state.connection.status === 'loading') return 'loading';
+  if (state.connection.status === 'connected' && hasSnapshot) return 'live';
+  if (
+    (state.connection.status === 'disconnected' ||
+      state.connection.status === 'error') &&
+    hasSnapshot
+  ) {
+    return 'offline-snapshot';
+  }
+  if (
+    state.connection.status === 'error' ||
+    state.connection.status === 'disconnected'
+  ) {
+    return 'mock';
+  }
+  return 'unavailable';
+}
+
+export function getWorkbenchCatalogState(
+  state: WorkbenchState,
+): WorkbenchCatalogState {
+  const mode = getWorkbenchDataMode(state);
+
+  return {
+    mode,
+    label: workbenchDataModeLabels[mode],
+    tone: workbenchDataModeTones[mode],
+    message: workbenchDataModeMessage(mode, state.connection.error),
+    hasLiveCatalog: mode === 'live' || mode === 'offline-snapshot',
+  };
+}
+
+export function getWorkbenchSectionSource({
+  mode,
+  hasSectionSnapshot,
+  hasLocalDryRun = false,
+}: WorkbenchSectionSourceInput): WorkbenchSectionSource {
+  const baseSource = getWorkbenchSnapshotSectionSource(mode, hasSectionSnapshot);
+
+  if (!hasLocalDryRun) {
+    return baseSource;
+  }
+
+  return { label: `Local dry-run / ${baseSource.label}`, tone: 'cyan' };
+}
+
+function hasWorkbenchSnapshotData(state: WorkbenchState): boolean {
+  return (
+    state.projects.length > 0 ||
+    state.threads.length > 0 ||
+    state.runners.length > 0 ||
+    state.runs.length > 0 ||
+    state.artifacts.length > 0 ||
+    state.approvals.length > 0 ||
+    state.previews.length > 0
+  );
+}
+
+function getWorkbenchSnapshotSectionSource(
+  mode: WorkbenchDataMode,
+  hasSectionSnapshot: boolean,
+): WorkbenchSectionSource {
+  if (hasSectionSnapshot) {
+    if (mode === 'offline-snapshot') {
+      return { label: 'Offline snapshot', tone: 'purple' };
+    }
+
+    return { label: 'Edge snapshot', tone: 'green' };
+  }
+
+  if (mode === 'loading') {
+    return { label: 'Loading snapshot', tone: 'cyan' };
+  }
+
+  if (mode === 'mock') {
+    return { label: 'Mock fallback', tone: 'amber' };
+  }
+
+  return { label: 'Snapshot unavailable', tone: 'neutral' };
+}
+
+function workbenchDataModeMessage(
+  mode: WorkbenchDataMode,
+  error?: string,
+): string {
+  switch (mode) {
+    case 'live':
+      return 'Edge catalog is loaded from the live snapshot.';
+    case 'offline-snapshot':
+      return 'Edge is offline; preserving the last loaded reducer snapshot.';
+    case 'mock':
+      return `Edge catalog unavailable: ${error ?? 'no snapshot loaded'}. Showing mock demo data.`;
+    case 'loading':
+      return 'Loading Edge catalog snapshot...';
+    case 'unavailable':
+      return 'No Edge snapshot is available yet.';
+    default:
+      return 'No Edge snapshot is available yet.';
+  }
+}
diff --git a/app/shared/src/workbenchState.test.ts b/app/shared/src/workbenchState.test.ts
new file mode 100644
index 000000000..7e8b507a5
--- /dev/null
+++ b/app/shared/src/workbenchState.test.ts
@@ -0,0 +1,393 @@
+import { describe, expect, it } from 'vitest';
+import {
+  createWorkbenchState,
+  initialWorkbenchState,
+  workbenchReducer,
+  type WorkbenchState,
+} from './workbenchState';
+import type { AnyEvent } from './events';
+import type { Approval, Artifact, Preview, Project, Run, Thread, ThreadItem } from './types';
+
+const sentAt = '2026-05-24T10:00:00.000Z';
+
+function event(
+  seq: number,
+  type: string,
+  payload: Record<string, unknown>,
+): AnyEvent {
+  return {
+    version: 'v1',
+    id: `evt-${seq}`,
+    seq,
+    type,
+    scope: {
+      projectId: payload.projectId,
+      threadId: payload.threadId,
+      runId: payload.runId,
+    },
+    sentAt,
+    payload,
+  } as AnyEvent;
+}
+
+function reduceEvents(events: AnyEvent[], state = initialWorkbenchState) {
+  return events.reduce<WorkbenchState>(
+    (next, item) => workbenchReducer(next, { type: 'event.received', event: item }),
+    state,
+  );
+}
+
+describe('workbenchReducer', () => {
+  it('loads an empty snapshot', () => {
+    const state = createWorkbenchState();
+
+    expect(state.projects).toEqual([]);
+    expect(state.threads).toEqual([]);
+    expect(state.runs).toEqual([]);
+    expect(state.threadItems).toEqual([]);
+    expect(state.approvals).toEqual([]);
+    expect(state.artifacts).toEqual([]);
+    expect(state.previews).toEqual([]);
+    expect(state.connection.status).toBe('connected');
+  });
+
+  it('loads a normal REST snapshot', () => {
+    const project: Project = {
+      id: 'proj-1',
+      name: 'AgentHub',
+      createdAt: sentAt,
+    };
+    const thread: Thread = {
+      id: 'thread-1',
+      projectId: project.id,
+      title: 'Wire Edge',
+      status: 'active',
+      createdAt: sentAt,
+    };
+    const run: Run = {
+      runId: 'run-1',
+      projectId: project.id,
+      threadId: thread.id,
+      status: 'running',
+      createdAt: sentAt,
+    };
+    const item: ThreadItem = {
+      id: 'item-1',
+      threadId: thread.id,
+      kind: 'message',
+      role: 'agent',
+      content: 'hello',
+      createdAt: sentAt,
+    };
+    const approval: Approval = {
+      id: 'approval-1',
+      runId: run.runId,
+      threadId: thread.id,
+      kind: 'command',
+      summary: 'Run command',
+      status: 'pending',
+      createdAt: sentAt,
+    };
+    const artifact: Artifact = {
+      id: 'artifact-1',
+      runId: run.runId,
+      threadId: thread.id,
+      kind: 'file',
+      path: 'app/web/src/App.tsx',
+      sizeBytes: 42,
+      createdAt: sentAt,
+    };
+    const preview: Preview = {
+      id: 'preview-1',
+      runId: run.runId,
+      threadId: thread.id,
+      url: 'http://127.0.0.1:4173',
+      status: 'ready',
+      createdAt: sentAt,
+    };
+
+    const state = createWorkbenchState({
+      projects: { items: [project], page: { hasMore: false } },
+      threads: [thread],
+      runs: { items: [run], page: { hasMore: false } },
+      threadItems: [item],
+      approvals: [approval],
+      artifacts: [artifact],
+      previews: [preview],
+      runLogs: [{ runId: run.runId, stdout: 'ok', stderr: '' }],
+    });
+
+    expect(state.projects).toEqual([project]);
+    expect(state.threads).toEqual([thread]);
+    expect(state.runs).toEqual([run]);
+    expect(state.threadItems).toEqual([item]);
+    expect(state.approvals).toEqual([approval]);
+    expect(state.artifacts).toEqual([artifact]);
+    expect(state.previews).toEqual([preview]);
+    expect(state.runLogs[run.runId]?.stdout).toBe('ok');
+  });
+
+  it('handles missing snapshot fields as empty collections', () => {
+    const state = createWorkbenchState({
+      projects: null,
+      runs: undefined,
+    });
+
+    expect(state.projects).toEqual([]);
+    expect(state.runs).toEqual([]);
+    expect(state.connection.error).toBeUndefined();
+  });
+
+  it('composes run lifecycle, approval, artifact, and preview events', () => {
+    const state = reduceEvents([
+      event(1, 'run.queued', {
+        runId: 'run-1',
+        projectId: 'proj-1',
+        threadId: 'thread-1',
+      }),
+      event(2, 'run.started', {
+        runId: 'run-1',
+        startedAt: '2026-05-24T10:01:00.000Z',
+      }),
+      event(3, 'run.output.batch', {
+        runId: 'run-1',
+        stream: 'stdout',
+        chunks: [
+          { offset: 0, text: 'hello ' },
+          { offset: 6, text: 'world' },
+        ],
+      }),
+      event(4, 'approval.requested', {
+        approvalId: 'approval-1',
+        runId: 'run-1',
+        threadId: 'thread-1',
+        kind: 'command',
+        summary: 'Allow command?',
+      }),
+      event(5, 'approval.decided', {
+        approvalId: 'approval-1',
+        runId: 'run-1',
+        decision: 'approved',
+      }),
+      event(6, 'artifact.created', {
+        artifactId: 'artifact-1',
+        runId: 'run-1',
+        threadId: 'thread-1',
+        kind: 'file',
+        path: 'app/web/src/pages/workbench/WorkbenchPage.tsx',
+        sizeBytes: 1024,
+      }),
+      event(7, 'preview.ready', {
+        previewId: 'preview-1',
+        runId: 'run-1',
+        url: 'http://127.0.0.1:4173',
+      }),
+      event(8, 'run.finished', {
+        runId: 'run-1',
+        finishedAt: '2026-05-24T10:02:00.000Z',
+      }),
+    ]);
+
+    expect(state.lastSeq).toBe(8);
+    expect(state.runs[0]).toMatchObject({
+      runId: 'run-1',
+      status: 'finished',
+      projectId: 'proj-1',
+      threadId: 'thread-1',
+    });
+    expect(state.runLogs['run-1']?.stdout).toBe('hello world');
+    expect(state.approvals[0]).toMatchObject({
+      id: 'approval-1',
+      status: 'approved',
+    });
+    expect(state.artifacts[0]?.path).toBe(
+      'app/web/src/pages/workbench/WorkbenchPage.tsx',
+    );
+    expect(state.previews[0]).toMatchObject({
+      id: 'preview-1',
+      status: 'ready',
+      url: 'http://127.0.0.1:4173',
+    });
+  });
+
+  it('handles cancelled runs and truncated batched stderr output', () => {
+    const state = reduceEvents([
+      event(1, 'run.queued', {
+        runId: 'run-1',
+        projectId: 'proj-1',
+        threadId: 'thread-1',
+      }),
+      event(2, 'run.output.batch', {
+        runId: 'run-1',
+        stream: 'stderr',
+        chunks: [{ offset: 0, text: 'partial error' }],
+        truncated: true,
+        bytesWritten: 4194304,
+        message: 'run output truncated after 4194304 bytes',
+      }),
+      event(3, 'run.cancelled', {
+        runId: 'run-1',
+        finishedAt: '2026-05-24T10:02:00.000Z',
+      }),
+    ]);
+
+    expect(state.runs[0]).toMatchObject({
+      runId: 'run-1',
+      status: 'cancelled',
+      finishedAt: '2026-05-24T10:02:00.000Z',
+    });
+    expect(state.runLogs['run-1']?.stdout).toBe('');
+    expect(state.runLogs['run-1']?.stderr).toContain('partial error');
+    expect(state.runLogs['run-1']?.stderr).toContain('output truncated');
+  });
+
+  it('keeps event state when a stale snapshot arrives after events', () => {
+    const eventState = reduceEvents([
+      event(1, 'message.created', {
+        messageId: 'message-1',
+        threadId: 'thread-1',
+        role: 'agent',
+        content: 'new event message',
+      }),
+      event(2, 'run.queued', {
+        runId: 'run-1',
+        projectId: 'proj-1',
+        threadId: 'thread-1',
+      }),
+      event(3, 'run.started', {
+        runId: 'run-1',
+        startedAt: '2026-05-24T10:01:00.000Z',
+      }),
+      event(4, 'run.output', {
+        runId: 'run-1',
+        stream: 'stdout',
+        text: 'new log',
+      }),
+      event(5, 'approval.requested', {
+        approvalId: 'approval-1',
+        runId: 'run-1',
+        threadId: 'thread-1',
+        kind: 'command',
+        summary: 'Allow command?',
+      }),
+      event(6, 'approval.decided', {
+        approvalId: 'approval-1',
+        runId: 'run-1',
+        decision: 'approved',
+      }),
+      event(7, 'run.finished', {
+        runId: 'run-1',
+        finishedAt: '2026-05-24T10:02:00.000Z',
+      }),
+    ]);
+
+    const staleRun: Run = {
+      runId: 'run-1',
+      projectId: 'proj-1',
+      threadId: 'thread-1',
+      status: 'queued',
+      createdAt: '2026-05-24T09:59:00.000Z',
+    };
+    const staleMessage: ThreadItem = {
+      id: 'message-1',
+      threadId: 'thread-1',
+      kind: 'message',
+      role: 'agent',
+      content: 'old snapshot message',
+      createdAt: '2026-05-24T09:59:00.000Z',
+    };
+    const staleApproval: Approval = {
+      id: 'approval-1',
+      runId: 'run-1',
+      threadId: 'thread-1',
+      kind: 'command',
+      summary: 'Allow command?',
+      status: 'pending',
+      createdAt: '2026-05-24T09:59:00.000Z',
+    };
+
+    const state = workbenchReducer(eventState, {
+      type: 'snapshot.loaded',
+      snapshot: {
+        projects: [{ id: 'proj-1', name: 'AgentHub', createdAt: sentAt }],
+        threads: [
+          {
+            id: 'thread-1',
+            projectId: 'proj-1',
+            title: 'Validation',
+            status: 'active',
+            createdAt: sentAt,
+          },
+        ],
+        runs: [staleRun],
+        threadItems: [staleMessage],
+        approvals: [staleApproval],
+        runLogs: [{ runId: 'run-1', stdout: 'old log', stderr: '' }],
+      },
+    });
+
+    expect(state.connection.status).toBe('connected');
+    expect(state.lastSeq).toBe(7);
+    expect(state.projects).toEqual([
+      { id: 'proj-1', name: 'AgentHub', createdAt: sentAt },
+    ]);
+    expect(state.threads).toHaveLength(1);
+    expect(state.runs).toHaveLength(1);
+    expect(state.runs[0]).toMatchObject({
+      runId: 'run-1',
+      status: 'finished',
+      finishedAt: '2026-05-24T10:02:00.000Z',
+    });
+    expect(state.threadItems).toHaveLength(1);
+    expect(state.threadItems[0]?.content).toBe('new event message');
+    expect(state.approvals).toHaveLength(1);
+    expect(state.approvals[0]).toMatchObject({
+      id: 'approval-1',
+      status: 'approved',
+    });
+    expect(state.runLogs['run-1']?.stdout).toBe('new log');
+  });
+
+  it('ignores duplicate, old, and unknown events without corrupting state', () => {
+    const queued = event(10, 'run.queued', {
+      runId: 'run-1',
+      projectId: 'proj-1',
+      threadId: 'thread-1',
+    });
+    const started = event(11, 'run.started', { runId: 'run-1' });
+    const duplicate = event(11, 'run.finished', { runId: 'run-1' });
+    const old = event(9, 'approval.requested', {
+      approvalId: 'approval-old',
+      runId: 'run-1',
+      threadId: 'thread-1',
+      kind: 'command',
+      summary: 'old',
+    });
+    const unknown = event(12, 'run.teleported', {
+      runId: 'run-1',
+      status: 'banana',
+    });
+
+    const state = reduceEvents([queued, started, duplicate, old, unknown]);
+
+    expect(state.lastSeq).toBe(12);
+    expect(state.runs).toHaveLength(1);
+    expect(state.runs[0]?.status).toBe('running');
+    expect(state.approvals).toEqual([]);
+  });
+
+  it('keeps snapshot data when disconnected and exposes the error', () => {
+    const snapshot = createWorkbenchState({
+      projects: [{ id: 'proj-1', name: 'AgentHub', createdAt: sentAt }],
+    });
+
+    const state = workbenchReducer(snapshot, {
+      type: 'connection.disconnected',
+      error: 'Edge WebSocket closed',
+    });
+
+    expect(state.projects).toHaveLength(1);
+    expect(state.connection.status).toBe('disconnected');
+    expect(state.connection.error).toBe('Edge WebSocket closed');
+  });
+});
diff --git a/app/shared/src/workbenchState.ts b/app/shared/src/workbenchState.ts
new file mode 100644
index 000000000..b41c5d0c0
--- /dev/null
+++ b/app/shared/src/workbenchState.ts
@@ -0,0 +1,635 @@
+import type { AnyEvent, EventEnvelope } from './events';
+import type {
+  Approval,
+  Artifact,
+  ListResponse,
+  Preview,
+  Project,
+  Run,
+  RunLogs,
+  Runner,
+  Thread,
+  ThreadItem,
+} from './types';
+
+export type WorkbenchConnectionStatus =
+  | 'idle'
+  | 'loading'
+  | 'connected'
+  | 'disconnected'
+  | 'error';
+
+export interface WorkbenchSnapshot {
+  projects?: ListResponse<Project> | Project[] | null;
+  threads?: ListResponse<Thread> | Thread[] | null;
+  runners?: ListResponse<Runner> | Runner[] | null;
+  runs?: ListResponse<Run> | Run[] | null;
+  threadItems?: ListResponse<ThreadItem> | ThreadItem[] | null;
+  approvals?: ListResponse<Approval> | Approval[] | null;
+  artifacts?: ListResponse<Artifact> | Artifact[] | null;
+  previews?: ListResponse<Preview> | Preview[] | null;
+  runLogs?: RunLogs[] | null;
+}
+
+export interface WorkbenchState {
+  projects: Project[];
+  threads: Thread[];
+  runners: Runner[];
+  runs: Run[];
+  threadItems: ThreadItem[];
+  approvals: Approval[];
+  artifacts: Artifact[];
+  previews: Preview[];
+  runLogs: Record<string, RunLogs>;
+  connection: {
+    status: WorkbenchConnectionStatus;
+    error?: string;
+  };
+  lastSeq: number;
+}
+
+export type WorkbenchAction =
+  | { type: 'snapshot.loaded'; snapshot?: WorkbenchSnapshot | null }
+  | { type: 'threadItems.loaded'; threadItems?: ListResponse<ThreadItem> | ThreadItem[] | null }
+  | { type: 'connection.loading' }
+  | { type: 'connection.connected' }
+  | { type: 'connection.disconnected'; error?: string }
+  | { type: 'connection.error'; error: string }
+  | { type: 'event.received'; event: AnyEvent };
+
+const EPOCH = '1970-01-01T00:00:00.000Z';
+
+export const initialWorkbenchState: WorkbenchState = {
+  projects: [],
+  threads: [],
+  runners: [],
+  runs: [],
+  threadItems: [],
+  approvals: [],
+  artifacts: [],
+  previews: [],
+  runLogs: {},
+  connection: { status: 'idle' },
+  lastSeq: 0,
+};
+
+export function createWorkbenchState(
+  snapshot?: WorkbenchSnapshot | null,
+): WorkbenchState {
+  return workbenchReducer(initialWorkbenchState, {
+    type: 'snapshot.loaded',
+    snapshot,
+  });
+}
+
+export function workbenchReducer(
+  state: WorkbenchState,
+  action: WorkbenchAction,
+): WorkbenchState {
+  switch (action.type) {
+    case 'snapshot.loaded': {
+      const snapshot = normalizeSnapshot(action.snapshot);
+      if (isEmptyWorkbenchData(state)) {
+        return {
+          ...state,
+          ...snapshot,
+          connection: { status: 'connected' },
+        };
+      }
+
+      return {
+        ...state,
+        projects: mergeByKey(snapshot.projects, state.projects, (project) => project.id),
+        threads: mergeByKey(snapshot.threads, state.threads, (thread) => thread.id),
+        runners: mergeByKey(snapshot.runners, state.runners, (runner) => runner.id),
+        runs: mergeByKey(snapshot.runs, state.runs, (run) => run.runId),
+        threadItems: mergeByKey(snapshot.threadItems, state.threadItems, (item) => item.id),
+        approvals: mergeByKey(snapshot.approvals, state.approvals, (approval) => approval.id),
+        artifacts: mergeByKey(snapshot.artifacts, state.artifacts, (artifact) => artifact.id),
+        previews: mergeByKey(snapshot.previews, state.previews, (preview) => preview.id),
+        runLogs: { ...snapshot.runLogs, ...state.runLogs },
+        connection: { status: 'connected' },
+      };
+    }
+    case 'threadItems.loaded':
+      return {
+        ...state,
+        threadItems: compact(list(action.threadItems)),
+      };
+    case 'connection.loading':
+      return {
+        ...state,
+        connection: { status: 'loading' },
+      };
+    case 'connection.connected':
+      return {
+        ...state,
+        connection: { status: 'connected' },
+      };
+    case 'connection.disconnected':
+      return {
+        ...state,
+        connection: { status: 'disconnected', error: action.error },
+      };
+    case 'connection.error':
+      return {
+        ...state,
+        connection: { status: 'error', error: action.error },
+      };
+    case 'event.received':
+      return applyEvent(state, action.event);
+    default:
+      return state;
+  }
+}
+
+function applyEvent(state: WorkbenchState, event: AnyEvent): WorkbenchState {
+  const envelope = event as EventEnvelope;
+
+  if (envelope.seq && envelope.seq <= state.lastSeq) {
+    return state;
+  }
+
+  const nextSeq = envelope.seq || state.lastSeq;
+  const payload = event.payload ?? {};
+  const sentAt = envelope.sentAt || new Date().toISOString();
+
+  switch (event.type) {
+    case 'project.created':
+    case 'project.updated': {
+      const projectId = text(payload.projectId) ?? text(envelope.scope?.projectId);
+      if (!projectId) return withSeq(state, nextSeq);
+
+      return {
+        ...state,
+        lastSeq: nextSeq,
+        projects: upsertBy(state.projects, projectId, (current) => ({
+          id: projectId,
+          name: text(payload.name) ?? current?.name ?? projectId,
+          description: text(payload.description) ?? current?.description,
+          createdAt: text(payload.createdAt) ?? current?.createdAt ?? sentAt,
+          updatedAt: text(payload.updatedAt) ?? sentAt,
+        })),
+      };
+    }
+    case 'thread.created':
+    case 'thread.updated': {
+      const threadId = text(payload.threadId) ?? text(envelope.scope?.threadId);
+      if (!threadId) return withSeq(state, nextSeq);
+
+      return {
+        ...state,
+        lastSeq: nextSeq,
+        threads: upsertBy(state.threads, threadId, (current) => ({
+          id: threadId,
+          projectId:
+            text(payload.projectId) ??
+            text(envelope.scope?.projectId) ??
+            current?.projectId ??
+            '',
+          conversationId:
+            text(payload.conversationId) ?? current?.conversationId,
+          title: text(payload.title) ?? current?.title,
+          status: threadStatus(payload.status) ?? current?.status ?? 'active',
+          createdAt: text(payload.createdAt) ?? current?.createdAt ?? sentAt,
+          updatedAt: text(payload.updatedAt) ?? sentAt,
+        })),
+      };
+    }
+    case 'message.created': {
+      const item = threadItemFromMessage(payload, sentAt);
+      if (!item) return withSeq(state, nextSeq);
+
+      return {
+        ...state,
+        lastSeq: nextSeq,
+        threadItems: upsertBy(state.threadItems, item.id, () => item),
+      };
+    }
+    case 'message.delta': {
+      const itemId = text(payload.messageId);
+      const threadId = text(payload.threadId);
+      const delta = text(payload.delta) ?? '';
+      if (!itemId || !threadId) return withSeq(state, nextSeq);
+
+      return {
+        ...state,
+        lastSeq: nextSeq,
+        threadItems: upsertBy(state.threadItems, itemId, (current) => ({
+          id: itemId,
+          threadId,
+          kind: 'message',
+          role: current?.role ?? 'agent',
+          content: `${current?.content ?? ''}${delta}`,
+          createdAt: current?.createdAt ?? sentAt,
+        })),
+      };
+    }
+    case 'item.created':
+    case 'item.updated': {
+      const itemId = text(payload.itemId);
+      const threadId = text(payload.threadId) ?? text(envelope.scope?.threadId);
+      if (!itemId || !threadId) return withSeq(state, nextSeq);
+
+      return {
+        ...state,
+        lastSeq: nextSeq,
+        threadItems: upsertBy(state.threadItems, itemId, (current) => ({
+          id: itemId,
+          threadId,
+          kind: threadItemKind(payload.kind) ?? current?.kind ?? 'message',
+          role: role(payload.role) ?? current?.role ?? 'agent',
+          content: text(payload.content) ?? current?.content ?? '',
+          createdAt: text(payload.createdAt) ?? current?.createdAt ?? sentAt,
+        })),
+      };
+    }
+    case 'runner.online':
+    case 'runner.offline': {
+      const runnerId = text(payload.runnerId);
+      if (!runnerId) return withSeq(state, nextSeq);
+
+      return {
+        ...state,
+        lastSeq: nextSeq,
+        runners: upsertBy(state.runners, runnerId, (current) => ({
+          id: runnerId,
+          name: text(payload.name) ?? current?.name ?? runnerId,
+          status: event.type === 'runner.online' ? 'online' : 'offline',
+          capabilities: text(payload.capabilities) ?? current?.capabilities,
+        })),
+      };
+    }
+    case 'run.queued':
+    case 'run.started':
+    case 'run.status.changed':
+    case 'run.finished':
+    case 'run.failed':
+    case 'run.cancelled': {
+      const runId = text(payload.runId) ?? text(envelope.scope?.runId);
+      if (!runId) return withSeq(state, nextSeq);
+
+      return {
+        ...state,
+        lastSeq: nextSeq,
+        runs: upsertBy(state.runs, runId, (current) => ({
+          runId,
+          projectId:
+            text(payload.projectId) ??
+            text(envelope.scope?.projectId) ??
+            current?.projectId ??
+            '',
+          threadId:
+            text(payload.threadId) ??
+            text(envelope.scope?.threadId) ??
+            current?.threadId ??
+            '',
+          status: runStatus(event.type, payload.status) ?? current?.status ?? 'queued',
+          createdAt: text(payload.createdAt) ?? current?.createdAt ?? sentAt,
+          startedAt: text(payload.startedAt) ?? current?.startedAt,
+          finishedAt: text(payload.finishedAt) ?? current?.finishedAt,
+        })),
+      };
+    }
+    case 'run.output':
+    case 'run.output.batch': {
+      const runId = text(payload.runId) ?? text(envelope.scope?.runId);
+      if (!runId) return withSeq(state, nextSeq);
+
+      const current = state.runLogs[runId] ?? {
+        runId,
+        stdout: '',
+        stderr: '',
+      };
+      const chunks =
+        event.type === 'run.output.batch'
+          ? chunkTexts(payload.chunks, text(payload.stream))
+          : [{ stream: text(payload.stream), text: text(payload.text) ?? '' }];
+      const notice = truncationNotice(payload);
+      if (notice) {
+        chunks.push({ stream: text(payload.stream), text: notice });
+      }
+      const nextLog = chunks.reduce<RunLogs>((acc, chunk) => {
+        if (chunk.stream === 'stderr') {
+          return { ...acc, stderr: `${acc.stderr}${chunk.text}` };
+        }
+        return { ...acc, stdout: `${acc.stdout}${chunk.text}` };
+      }, current);
+
+      return {
+        ...state,
+        lastSeq: nextSeq,
+        runLogs: { ...state.runLogs, [runId]: nextLog },
+      };
+    }
+    case 'approval.requested': {
+      const approvalId = text(payload.approvalId);
+      const runId = text(payload.runId) ?? text(envelope.scope?.runId);
+      const threadId = text(payload.threadId) ?? text(envelope.scope?.threadId);
+      if (!approvalId || !runId || !threadId) return withSeq(state, nextSeq);
+
+      return {
+        ...state,
+        lastSeq: nextSeq,
+        runs: setRunStatus(state.runs, runId, 'waiting_approval'),
+        approvals: upsertBy(state.approvals, approvalId, (current) => ({
+          id: approvalId,
+          runId,
+          threadId,
+          kind: approvalKind(payload.kind) ?? current?.kind ?? 'command',
+          summary: text(payload.summary) ?? current?.summary ?? 'Approval required',
+          status: 'pending',
+          createdAt: text(payload.createdAt) ?? current?.createdAt ?? sentAt,
+          decidedAt: current?.decidedAt,
+        })),
+      };
+    }
+    case 'approval.decided': {
+      const approvalId = text(payload.approvalId);
+      if (!approvalId) return withSeq(state, nextSeq);
+
+      return {
+        ...state,
+        lastSeq: nextSeq,
+        approvals: state.approvals.map((approval) =>
+          approval.id === approvalId
+            ? {
+                ...approval,
+                status: decision(payload.decision) ?? approval.status,
+                decidedAt: text(payload.decidedAt) ?? sentAt,
+              }
+            : approval,
+        ),
+      };
+    }
+    case 'artifact.created': {
+      const artifactId = text(payload.artifactId);
+      const runId = text(payload.runId) ?? text(envelope.scope?.runId);
+      const threadId = text(payload.threadId) ?? text(envelope.scope?.threadId);
+      if (!artifactId || !runId || !threadId) return withSeq(state, nextSeq);
+
+      return {
+        ...state,
+        lastSeq: nextSeq,
+        artifacts: upsertBy(state.artifacts, artifactId, (current) => ({
+          id: artifactId,
+          runId,
+          threadId,
+          kind: text(payload.kind) ?? current?.kind ?? 'file',
+          path: text(payload.path) ?? current?.path ?? artifactId,
+          sizeBytes: number(payload.sizeBytes) ?? current?.sizeBytes ?? 0,
+          createdAt: text(payload.createdAt) ?? current?.createdAt ?? sentAt,
+        })),
+      };
+    }
+    case 'preview.ready': {
+      const previewId = text(payload.previewId);
+      const runId = text(payload.runId) ?? text(envelope.scope?.runId);
+      if (!previewId || !runId) return withSeq(state, nextSeq);
+      const run = state.runs.find((candidate) => candidate.runId === runId);
+
+      return {
+        ...state,
+        lastSeq: nextSeq,
+        previews: upsertBy(state.previews, previewId, (current) => ({
+          id: previewId,
+          runId,
+          threadId: text(payload.threadId) ?? current?.threadId ?? run?.threadId ?? '',
+          url: text(payload.url) ?? current?.url,
+          status: 'ready',
+          createdAt: text(payload.createdAt) ?? current?.createdAt ?? sentAt,
+        })),
+      };
+    }
+    case 'error':
+      return {
+        ...state,
+        lastSeq: nextSeq,
+        connection: {
+          status: 'error',
+          error: text(payload.message) ?? text(payload.code) ?? 'Unknown Edge error',
+        },
+      };
+    default:
+      return withSeq(state, nextSeq);
+  }
+}
+
+function withSeq(state: WorkbenchState, seq: number): WorkbenchState {
+  return seq === state.lastSeq ? state : { ...state, lastSeq: seq };
+}
+
+function list<T>(value: ListResponse<T> | T[] | null | undefined): T[] {
+  if (!value) return [];
+  return Array.isArray(value) ? value : value.items ?? [];
+}
+
+function compact<T>(items: T[]): T[] {
+  return items.filter(Boolean);
+}
+
+function normalizeSnapshot(
+  snapshot: WorkbenchSnapshot | null | undefined,
+): Pick<
+  WorkbenchState,
+  | 'projects'
+  | 'threads'
+  | 'runners'
+  | 'runs'
+  | 'threadItems'
+  | 'approvals'
+  | 'artifacts'
+  | 'previews'
+  | 'runLogs'
+> {
+  return {
+    projects: compact(list(snapshot?.projects)),
+    threads: compact(list(snapshot?.threads)),
+    runners: compact(list(snapshot?.runners)),
+    runs: compact(list(snapshot?.runs)),
+    threadItems: compact(list(snapshot?.threadItems)),
+    approvals: compact(list(snapshot?.approvals)),
+    artifacts: compact(list(snapshot?.artifacts)),
+    previews: compact(list(snapshot?.previews)),
+    runLogs: keyRunLogs(snapshot?.runLogs),
+  };
+}
+
+function isEmptyWorkbenchData(state: WorkbenchState): boolean {
+  return (
+    state.lastSeq === 0 &&
+    state.projects.length === 0 &&
+    state.threads.length === 0 &&
+    state.runners.length === 0 &&
+    state.runs.length === 0 &&
+    state.threadItems.length === 0 &&
+    state.approvals.length === 0 &&
+    state.artifacts.length === 0 &&
+    state.previews.length === 0 &&
+    Object.keys(state.runLogs).length === 0
+  );
+}
+
+function mergeByKey<T>(
+  snapshotItems: T[],
+  currentItems: T[],
+  keyOf: (item: T) => string | undefined,
+): T[] {
+  const currentKeys = new Set(currentItems.map(keyOf).filter(Boolean));
+  return [
+    ...snapshotItems.filter((item) => {
+      const key = keyOf(item);
+      return key && !currentKeys.has(key);
+    }),
+    ...currentItems,
+  ];
+}
+
+function upsertBy<T extends { id?: string; runId?: string }>(
+  items: T[],
+  id: string,
+  build: (current?: T) => T,
+): T[] {
+  const index = items.findIndex((item) => item.id === id || item.runId === id);
+  if (index === -1) {
+    return [...items, build()];
+  }
+
+  const next = [...items];
+  next[index] = build(items[index]);
+  return next;
+}
+
+function keyRunLogs(logs: RunLogs[] | null | undefined): Record<string, RunLogs> {
+  return (logs ?? []).reduce<Record<string, RunLogs>>((acc, log) => {
+    if (log?.runId) {
+      acc[log.runId] = log;
+    }
+    return acc;
+  }, {});
+}
+
+function threadItemFromMessage(
+  payload: Record<string, unknown>,
+  createdAt: string,
+): ThreadItem | null {
+  const id = text(payload.messageId);
+  const threadId = text(payload.threadId);
+  const itemRole = role(payload.role);
+  if (!id || !threadId || !itemRole) return null;
+
+  return {
+    id,
+    threadId,
+    kind: 'message',
+    role: itemRole,
+    content: text(payload.content) ?? '',
+    createdAt: text(payload.createdAt) ?? createdAt,
+  };
+}
+
+function setRunStatus(runs: Run[], runId: string, status: Run['status']): Run[] {
+  return upsertBy(runs, runId, (current) => ({
+    runId,
+    projectId: current?.projectId ?? '',
+    threadId: current?.threadId ?? '',
+    status,
+    createdAt: current?.createdAt ?? EPOCH,
+    startedAt: current?.startedAt,
+    finishedAt: current?.finishedAt,
+  }));
+}
+
+function chunkTexts(
+  value: unknown,
+  fallbackStream?: string,
+): Array<{ stream?: string; text: string }> {
+  if (!Array.isArray(value)) return [];
+  return value.map((chunk) => {
+    if (chunk && typeof chunk === 'object') {
+      const record = chunk as Record<string, unknown>;
+      return {
+        stream: text(record.stream) ?? fallbackStream,
+        text: text(record.text) ?? '',
+      };
+    }
+    return { stream: fallbackStream, text: '' };
+  });
+}
+
+function truncationNotice(payload: Record<string, unknown>): string | undefined {
+  if (payload.truncated !== true) return undefined;
+  const bytesWritten = number(payload.bytesWritten);
+  const bytesBefore = number(payload.bytesBefore);
+  const maxBytes = number(payload.maxBytes);
+  const suffix =
+    bytesWritten !== undefined
+      ? ` after ${bytesWritten} bytes`
+      : bytesBefore !== undefined
+        ? ` after ${bytesBefore} bytes`
+        : maxBytes !== undefined
+          ? ` at ${maxBytes} bytes`
+          : '';
+  const message = text(payload.message);
+  return `\n[output truncated${suffix}${message ? `: ${message}` : ''}]\n`;
+}
+
+function text(value: unknown): string | undefined {
+  return typeof value === 'string' ? value : undefined;
+}
+
+function number(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+
+function role(value: unknown): ThreadItem['role'] | undefined {
+  return value === 'user' || value === 'agent' ? value : undefined;
+}
+
+function threadStatus(value: unknown): Thread['status'] | undefined {
+  return value === 'active' || value === 'archived' ? value : undefined;
+}
+
+function threadItemKind(value: unknown): ThreadItem['kind'] | undefined {
+  return value === 'message' ||
+    value === 'code' ||
+    value === 'file' ||
+    value === 'diff' ||
+    value === 'approval'
+    ? value
+    : undefined;
+}
+
+function runStatus(
+  eventType: string,
+  value: unknown,
+): Run['status'] | undefined {
+  if (
+    value === 'queued' ||
+    value === 'starting' ||
+    value === 'running' ||
+    value === 'waiting_approval' ||
+    value === 'finished' ||
+    value === 'failed' ||
+    value === 'cancelled'
+  ) {
+    return value;
+  }
+
+  if (eventType === 'run.queued') return 'queued';
+  if (eventType === 'run.started') return 'running';
+  if (eventType === 'run.finished') return 'finished';
+  if (eventType === 'run.failed') return 'failed';
+  if (eventType === 'run.cancelled') return 'cancelled';
+  return undefined;
+}
+
+function approvalKind(value: unknown): Approval['kind'] | undefined {
+  return value === 'file_write' || value === 'command' || value === 'publish'
+    ? value
+    : undefined;
+}
+
+function decision(value: unknown): Approval['status'] | undefined {
+  return value === 'approved' || value === 'rejected' ? value : undefined;
+}