diff --git a/locales/en.json b/locales/en.json
index fedea89b..99092a1a 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -53,7 +53,7 @@
     "menuMigrate": "Migrate to Standalone…",
     "menuRestoreSnapshot": "Restore Snapshot…",
     "menuRevealInFolder": "Open Folder",
-    "menuDelete": "Delete…"
+    "menuDelete": "Uninstall…"
   },
 
   "titleBar": {
@@ -69,15 +69,18 @@
 
   "comfyUISettings": {
     "title": "Settings",
-    "tabConfig": "Config",
-    "tabStatus": "Status",
+    "tabConfig": "Startup Args",
+    "tabStatus": "About",
     "tabUpdate": "Update",
     "tabSnapshots": "Snapshots",
+    "tabStorage": "Storage",
     "relaunch": "Relaunch",
     "more": "More",
     "diskUsage": "Disk Usage",
     "envVarsCount": "{n} defined",
-    "emptyInstallLess": "Open a ComfyUI install to view its settings."
+    "emptyInstallLess": "Open a ComfyUI install to view its settings.",
+    "storageGlobalNote": "Changes here apply to all of your ComfyUI instances.",
+    "storageRestartNote": "Restart the application (or close and reopen) for these changes to take effect."
   },
 
   "comfyLifecycle": {
@@ -390,7 +393,13 @@
     "about": "About",
     "version": "Version",
     "platform": "Platform",
-    "language": "Language"
+    "language": "Language",
+    "preferences": "Preferences",
+    "privacy": "Privacy",
+    "community": "Community",
+    "storageTab": "Storage",
+    "sharedDirectories": "Shared Directories",
+    "updatesTab": "Updates"
   },
 
   "zoom": {
@@ -421,7 +430,12 @@
     "panelAvailableTitle": "Update {version} available",
     "panelReadyTitle": "Update {version} ready to install",
     "panelDownloadingTitle": "Downloading update {version}…",
-    "downloading": "Downloading…"
+    "downloading": "Downloading…",
+    "readyBadge": "Ready to restart",
+    "installedLabel": "Installed {version}",
+    "lastCheckedLabel": "Last checked {time}",
+    "latestLabel": "Latest {version}",
+    "systemManagedNote": "Updates for this install are delivered through your system package manager."
   },
 
   "modal": {
@@ -454,12 +468,19 @@
     "telemetryHint": "Telemetry helps us improve the launcher. We never collect workflow contents, prompts, generated media, or personal information.",
     "acceptTos": "Accept and continue",
     "consentTosTitle": "Accept the terms",
-    "consentTosHintPrefix": "By continuing you agree to the",
+    "consentTosHintPrefix": "I agree to the",
     "consentTosHintSep": "and",
     "consentTosHintSuffix": ".",
     "consentTelemetryTitle": "Help improve Comfy",
-    "consentTelemetryHint": "Send usage data to help us fix bugs and prioritize features.",
+    "consentTelemetryHint": "Help improve Comfy by sharing anonymous usage data.",
     "consentGetStarted": "Get Started",
+    "startContinue": "Continue",
+    "startContinueBusy": "Preparing your install…",
+    "expressInstallLabel": "Express Install",
+    "expressInstallHint": "Use recommended settings — skip optional setup steps.",
+    "expressInstallLine": "Express Install with recommended settings",
+    "expressGpuHintPrefix": "Detected: ",
+    "expressGpuHintSuffix": " - if that's not your hardware, uncheck Express",
     "termsModalTitle": "ComfyUI Desktop Terms",
     "eulaModalTitle": "End-User License Agreement",
     "tosModalTitle": "Terms of Service",
@@ -523,11 +544,11 @@
     "copyInstallationConfirm": "Copy",
     "copyingInstallation": "Copying Install",
     "copyingFiles": "Copying files…",
-    "delete": "Delete Install",
-    "deleteConfirmTitle": "Delete Install",
-    "deleteConfirmMessage": "This will permanently delete the install and all its files. This cannot be undone.",
-    "untrack": "Untrack",
-    "untrackConfirmTitle": "Untrack Install",
+    "delete": "Uninstall",
+    "deleteConfirmTitle": "Uninstall",
+    "deleteConfirmMessage": "This will permanently uninstall ComfyUI and delete all its files. This cannot be undone.",
+    "untrack": "Forget",
+    "untrackConfirmTitle": "Forget Install",
     "untrackConfirmMessage": "This will remove the install from the app. The files will not be deleted."
   },
 
@@ -802,11 +823,22 @@
     "added": "Added",
     "removed": "Removed",
     "changed": "Changed",
-    "timeJustNow": "just now",
+    "timeJustNow": "Just now",
     "timeMinutesAgo": "{count}m ago",
     "timeHoursAgo": "{count}h ago",
     "timeDaysAgo": "{count}d ago",
     "deleteConfirm": "Delete this snapshot?",
+    "deleteConfirmNamed": "Delete snapshot \"{name}\"?",
+    "deleteConfirmMessage": "This snapshot file will be permanently removed. Your installation and other snapshots stay as-is. This can't be undone.",
+    "delete": "Delete",
+    "saveErrorTitle": "Couldn't save snapshot",
+    "deleteErrorTitle": "Couldn't delete snapshot",
+    "restoreConfirmTitle": "Restore this snapshot?",
+    "restoreConfirmMessage": "Your current install state will be replaced with the contents of this snapshot. Make sure ComfyUI isn't running before you continue.",
+    "importConfirmTitle": "Import these snapshots?",
+    "importConfirmMessage": "These snapshots will be added to this installation. The newest one will replace your current state.",
+    "importConfirmLabel": "Import",
+    "importErrorTitle": "Couldn't import snapshots",
     "copiedAs": "Copied as",
     "copyUpdatedAs": "Copy & Updated as",
     "releaseUpdatedAs": "Release Updated as",
@@ -871,10 +903,10 @@
     "waiting": "Waiting for ComfyUI to be ready…",
     "waitingTime": "Waiting for ComfyUI to be ready… ({secs}s)",
     "portBusyUsing": "Port {old} is busy — using port {new} instead…",
-    "instanceRunningTitle": "Instance Already Running",
-    "instanceRunningMessage": "\"{name}\" is currently running. Running multiple local installs simultaneously may use significant system resources.",
-    "instanceRunningProceed": "Launch Alongside",
-    "instanceRunningReplace": "Close Running & Launch",
+    "instanceRunningTitle": "An instance is already running",
+    "instanceRunningMessage": "\"{name}\" is running. What would you like to do?",
+    "instanceRunningProceed": "Launch Anyway",
+    "instanceRunningReplace": "Close & Launch New",
     "modelFolderRelaunchTitle": "Restarting ComfyUI",
     "modelFolderRelaunchDesc": "New model folders were detected from custom nodes. Restarting so ComfyUI can use them right away.",
     "steps": {
@@ -933,6 +965,7 @@
     "startupArgs": "Command-line arguments passed to ComfyUI when it starts, such as --port or --lowvram.",
     "browserPartition": "Controls whether this install shares browser cache (cookies, local storage) with other installs or keeps its own separate cache.",
     "sharedDirs": "Directories shared across all installations for inputs and outputs.",
+    "sharedModels": "Folders shared across all installations so models aren't downloaded twice. Newly downloaded models go to the primary folder. The system default folder is always kept and can't be removed, and the primary folder can't be removed while it's in use — pick a different primary first.",
     "modelsPrimary": "The primary directory is where ComfyUI saves newly downloaded models by default.",
     "modelsDefault": "The system default directory. This path is created automatically and cannot be removed.",
     "useSharedPaths": "When enabled, this install can access models, inputs, and outputs from the shared directories. Disable to use only this install's own local paths.",
@@ -952,6 +985,7 @@
     "name": "Name",
     "value": "Value",
     "add": "Add Variable",
+    "remove": "Remove variable",
     "namePlaceholder": "VARIABLE_NAME",
     "valuePlaceholder": "value",
     "securityWarning": "Environment variable values are stored unencrypted on disk. Do not add API keys, tokens, passwords, or other secrets."
diff --git a/locales/zh.json b/locales/zh.json
index 97f0d7a3..e86b7583 100644
--- a/locales/zh.json
+++ b/locales/zh.json
@@ -273,7 +273,13 @@
     "about": "关于",
     "version": "版本",
     "platform": "平台",
-    "language": "语言"
+    "language": "语言",
+    "preferences": "偏好设置",
+    "privacy": "隐私",
+    "community": "社区",
+    "storageTab": "存储",
+    "sharedDirectories": "共享目录",
+    "updatesTab": "更新"
   },
 
   "update": {
@@ -291,7 +297,19 @@
     "availableTitle": "桌面端更新可用",
     "availableMessage": "有可用的桌面端更新（{version}）。是否立即下载？下载完成后将提示您重启。",
     "download": "下载",
-    "errorTitle": "桌面端更新错误"
+    "later": "稍后",
+    "errorTitle": "桌面端更新错误",
+    "sectionTitle": "桌面端更新",
+    "panelIdleTitle": "ComfyUI Desktop 已是最新版本",
+    "panelAvailableTitle": "更新 {version} 可用",
+    "panelReadyTitle": "更新 {version} 可安装",
+    "panelDownloadingTitle": "正在下载更新 {version}…",
+    "downloading": "下载中…",
+    "readyBadge": "准备重启",
+    "installedLabel": "已安装 {version}",
+    "lastCheckedLabel": "最后检查于 {time}",
+    "latestLabel": "最新 {version}",
+    "systemManagedNote": "此安装的更新通过您的系统包管理器提供。"
   },
 
   "modal": {
@@ -324,12 +342,19 @@
     "telemetryHint": "遥测数据帮助我们改进启动器。我们绝不收集工作流内容、提示词、生成的媒体或个人信息。",
     "acceptTos": "接受并继续",
     "consentTosTitle": "接受条款",
-    "consentTosHintPrefix": "继续即表示您同意",
+    "consentTosHintPrefix": "我同意",
     "consentTosHintSep": "和",
     "consentTosHintSuffix": "。",
     "consentTelemetryTitle": "帮助改进 Comfy",
-    "consentTelemetryHint": "发送使用数据，帮助我们修复缺陷并确定功能优先级。",
+    "consentTelemetryHint": "分享匿名使用数据，帮助改进 Comfy。",
     "consentGetStarted": "开始使用",
+    "startContinue": "继续",
+    "startContinueBusy": "正在准备安装…",
+    "expressInstallLabel": "快捷安装",
+    "expressInstallHint": "使用推荐设置——跳过可选的安装步骤。",
+    "expressInstallLine": "快捷安装——使用推荐设置",
+    "expressGpuHintPrefix": "已检测到：",
+    "expressGpuHintSuffix": "- 如果不是你的硬件，请取消勾选快捷安装",
     "termsModalTitle": "ComfyUI Desktop 条款",
     "eulaModalTitle": "最终用户许可协议",
     "tosModalTitle": "服务条款",
diff --git a/src/main/host/detach.ts b/src/main/host/detach.ts
index f7fef88c..7dd79543 100644
--- a/src/main/host/detach.ts
+++ b/src/main/host/detach.ts
@@ -186,7 +186,7 @@ export async function confirmAndCloseAllHostWindows(
   parentWindow: BrowserWindow | null,
 ): Promise<void> {
   const entries = Array.from(comfyWindows.values()).filter((e) => !e.window.isDestroyed())
-  if (entries.length <= 1) {
+  if (entries.length < 1) {
     closeAllHostWindows()
     return
   }
@@ -219,13 +219,16 @@ export async function confirmAndCloseAllHostWindows(
     closeAllHostWindows()
     return
   }
+  const isSingle = entries.length === 1
   const confirmed = await openSystemModalAsync({
     parent: overlayParentEntry.window,
     spec: {
-      title: 'Close All Windows',
-      message: `Close ${entries.length} open windows?`,
+      title: 'Exit All Windows',
+      message: isSingle
+        ? 'Exit the open window?'
+        : `Exit ${entries.length} open windows?`,
       details,
-      confirmLabel: 'Close All',
+      confirmLabel: isSingle ? 'Exit' : 'Exit All',
       cancelLabel: 'Cancel',
       confirmStyle: 'danger',
       theme: overlayParentEntry.lastTheme,
@@ -242,6 +245,54 @@ export async function confirmAndCloseAllHostWindows(
   }
 }
 
+/**
+ * Confirm + close a single host window. Mirrors
+ * `confirmAndCloseAllHostWindows` for the install-host menu's
+ * `Exit Window` entry — same `openSystemModalAsync` primitive, same
+ * pre-cleared close path so the per-window close handler doesn't
+ * double-prompt after the user already confirmed.
+ */
+export async function confirmAndCloseHostWindow(parentWindow: BrowserWindow): Promise<void> {
+  if (parentWindow.isDestroyed()) return
+  const entry = Array.from(comfyWindows.values()).find((e) => e.window === parentWindow)
+  if (!entry) {
+    parentWindow.close()
+    return
+  }
+  const details: SystemModalDetailGroup[] = []
+  if (ipc.hasActiveOperations()) {
+    try {
+      const items = await ipc.getActiveDetails()
+      const sessions = items.filter((i) => i.type === 'session').map((i) => i.name)
+      const operations = items.filter((i) => i.type === 'operation').map((i) => i.name)
+      const downloads = items.filter((i) => i.type === 'download').map((i) => i.name)
+      if (sessions.length > 0) details.push({ label: 'Running ComfyUI', items: sessions })
+      if (operations.length > 0) details.push({ label: 'In-progress operations', items: operations })
+      if (downloads.length > 0) details.push({ label: 'Active downloads', items: downloads })
+    } catch {
+      // Active-detail collection failure shouldn't block the prompt.
+    }
+  }
+  const confirmed = await openSystemModalAsync({
+    parent: entry.window,
+    spec: {
+      title: 'Exit Window',
+      message: 'Exit this window?',
+      details: details.length > 0 ? details : undefined,
+      confirmLabel: 'Exit',
+      cancelLabel: 'Cancel',
+      confirmStyle: 'danger',
+      theme: entry.lastTheme,
+    },
+  })
+  if (confirmed) {
+    // Skip the panel-renderer consult on the close handler — the user
+    // already confirmed via this prompt.
+    preClearedClose.add(entry.window)
+    entry.window.close()
+  }
+}
+
 /**
  * Flip an install-backed host window in place to install-less
  * (chooser) mode. The symmetric undo to `attachInstall()`. Bound
diff --git a/src/main/index.ts b/src/main/index.ts
index 9c5a9f2d..78f4920b 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -75,6 +75,7 @@ import { applyAttachHostPreview, clearAttachHostPreview } from './host/attachHos
 import {
   _detachInstallImpl,
   confirmAndCloseAllHostWindows,
+  confirmAndCloseHostWindow,
   consultPanelRendererClose,
   detachOrphanedInstallHosts,
   preClearedClose,
@@ -1103,6 +1104,7 @@ if (app.isPackaged && !app.requestSingleInstanceLock()) {
       openChooserHostWindow,
       returnToDashboard,
       confirmAndCloseAllHostWindows,
+      confirmAndCloseHostWindow,
       setActivePanel,
       triggerOpenFeedback,
       sendToPanelDeferred,
@@ -1164,6 +1166,23 @@ if (app.isPackaged && !app.requestSingleInstanceLock()) {
         }
         try {
           await updateInstallation(installationId, { [fieldId]: value })
+          // Channel switch must kick a check-update; otherwise the new
+          // channel's available-update tag never appears until the user
+          // manually clicks "Check for updates".
+          if (fieldId === 'updateChannel') {
+            const next = await getInstallation(installationId)
+            if (next) {
+              const abort = new AbortController()
+              source.handleAction('check-update', next, undefined, {
+                update: (data) => updateInstallation(installationId, data).then(() => { }),
+                sendProgress: () => { },
+                sendOutput: () => { },
+                signal: abort.signal,
+              }).catch((err) => {
+                console.error(`Picker: check-update after channel switch failed for ${installationId}:`, err)
+              })
+            }
+          }
           return { ok: true }
         } catch (err) {
           return { ok: false, message: err instanceof Error ? err.message : 'Update failed.' }
@@ -1197,45 +1216,6 @@ if (app.isPackaged && !app.requestSingleInstanceLock()) {
           return { ok: false, message: err instanceof Error ? err.message : 'Action failed.' }
         }
       },
-      getChannelPickerFieldForInstall: async (installationId) => {
-        if (!installationId) return null
-        const inst = await getInstallation(installationId)
-        if (!inst) return null
-        const source = sourceMap[inst.sourceId]
-        if (!source) return null
-        const sections = source.getDetailSections(inst) as Array<{ tab?: string; fields?: Array<Record<string, unknown>> }>
-        for (const sec of sections) {
-          if (sec.tab && sec.tab !== 'update') continue
-          const f = sec.fields?.find((ff) => ff.editType === 'channel-cards')
-          if (f) return f
-        }
-        return null
-      },
-      runChannelPickerAction: async (installationId, actionId, actionData) => {
-        // Same dispatch as `pickerRunAction`. The IPC handler enforces
-        // the action allowlist (copy-update / release-update /
-        // switch-channel / update); this binding is a generic
-        // source-action runner.
-        try {
-          const inst = await getInstallation(installationId)
-          if (!inst) return { ok: false, message: 'Installation not found.' }
-          const source = sourceMap[inst.sourceId]
-          if (!source) return { ok: false, message: 'Unknown source.' }
-          const abort = new AbortController()
-          const result = await source.handleAction(actionId, inst, actionData, {
-            update: (data) => updateInstallation(installationId, data).then(() => { }),
-            sendProgress: () => { },
-            sendOutput: () => { },
-            signal: abort.signal,
-          })
-          return {
-            ok: result.ok !== false,
-            message: typeof result.message === 'string' ? result.message : undefined,
-          }
-        } catch (err) {
-          return { ok: false, message: err instanceof Error ? err.message : 'Action failed.' }
-        }
-      },
       pickInstallFromPicker,
       restartInstallFromPicker: async (installationId, parentEntryId) => {
         // Restart: same install, same window. The session is stopped
diff --git a/src/main/lib/channel-cards.ts b/src/main/lib/channel-cards.ts
index 4eeefd1b..be4c837c 100644
--- a/src/main/lib/channel-cards.ts
+++ b/src/main/lib/channel-cards.ts
@@ -15,10 +15,7 @@ export interface ChannelCardData {
   latestVersion: string
   /** Localized human string for display (e.g. "11/24/2025, 4:32 PM"). */
   lastChecked: string
-  /** Raw ms-since-epoch timestamp the release cache was populated. Used
-   *  renderer-side to gate auto-refresh of stale channel data when the
-   *  Update tab opens. `undefined` ⇒ no cache entry yet → treat as stale. */
-  checkedAt?: number
+  lastCheckedAt?: number
   updateAvailable: boolean
   actions?: Record<string, unknown>[]
 }
@@ -53,7 +50,7 @@ export function buildChannelCards(
         installedVersion: cv ? formatComfyVersion(cv, 'detail') : (info.installedTag || 'unknown'),
         latestVersion: latestCv ? formatComfyVersion(latestCv, 'detail') : (info.releaseName || info.latestTag || '—'),
         lastChecked: info.checkedAt ? new Date(info.checkedAt).toLocaleString() : '—',
-        checkedAt: info.checkedAt,
+        lastCheckedAt: info.checkedAt ?? undefined,
         updateAvailable: releaseCache.isUpdateAvailable(installation, def.value, info),
       } : undefined,
     }
diff --git a/src/main/lib/ipc/registerInstallationHandlers.ts b/src/main/lib/ipc/registerInstallationHandlers.ts
index 78f1dc91..06728699 100644
--- a/src/main/lib/ipc/registerInstallationHandlers.ts
+++ b/src/main/lib/ipc/registerInstallationHandlers.ts
@@ -66,8 +66,8 @@ export function enrichInstallationsForRenderer(
     const statusTag = inst.status === 'partial-delete'
       ? { label: i18n.t('errors.deleteInterrupted'), style: 'danger' }
       : inst.status === 'failed'
-      ? { label: i18n.t('errors.installFailed'), style: 'danger' }
-      : (source.getStatusTag ? source.getStatusTag(inst) : undefined)
+        ? { label: i18n.t('errors.installFailed'), style: 'danger' }
+        : (source.getStatusTag ? source.getStatusTag(inst) : undefined)
     const cv = inst.comfyVersion as ComfyVersion | undefined
     const rawVersion = cv ? formatComfyVersion(cv, 'short') : (inst.version as string | undefined)
     const version = rawVersion === inst.sourceId ? undefined : rawVersion
@@ -91,7 +91,7 @@ export function registerInstallationHandlers(): void {
     const { visible, enriched } = enrichInstallationsForRenderer(allInstalls)
 
     // Resolve versions from git state in the background.
-    _resolveAndBroadcastVersions(visible).catch(() => {})
+    _resolveAndBroadcastVersions(visible).catch(() => { })
 
     // Pre-warm the shared ComfyUI release cache so the dashboard /
     // title-bar update pills reflect upstream state without requiring
@@ -221,7 +221,7 @@ export function registerInstallationHandlers(): void {
         await source.install(inst, { sendProgress, download, cache, extract, signal: abort.signal })
         if (source.postInstall) {
           const update = (data: Record<string, unknown>): Promise<void> =>
-            installations.update(installationId, data).then(() => {})
+            installations.update(installationId, data).then(() => { })
           await source.postInstall(inst, { sendProgress, update, signal: abort.signal })
         }
 
@@ -230,10 +230,10 @@ export function registerInstallationHandlers(): void {
         const pendingFile = freshInst?.pendingSnapshotRestore as string | undefined
         if (freshInst && pendingFile && fs.existsSync(pendingFile)) {
           const sendOutput = (text: string): void => {
-            try { if (!sender.isDestroyed()) sender.send('comfy-output', { installationId, text }) } catch {}
+            try { if (!sender.isDestroyed()) sender.send('comfy-output', { installationId, text }) } catch { }
           }
           const update = (data: Record<string, unknown>): Promise<void> =>
-            installations.update(installationId, data).then(() => {})
+            installations.update(installationId, data).then(() => { })
           await restoreSnapshotIntoInstallation(
             freshInst, pendingFile, true,
             { sendProgress, sendOutput, signal: abort.signal },
@@ -250,14 +250,14 @@ export function registerInstallationHandlers(): void {
             try {
               fs.rmSync(inst.installPath, { recursive: true, force: true })
               cleaned = true
-            } catch {}
+            } catch { }
           }
           if (cleaned) {
             await installations.remove(installationId)
             return { ok: true, navigate: 'list' }
           }
           const markerPath = path.join(inst.installPath, MARKER_FILE)
-          try { fs.writeFileSync(markerPath, installationId) } catch {}
+          try { fs.writeFileSync(markerPath, installationId) } catch { }
           await installations.update(installationId, { status: 'partial-delete' })
           const deleteAbort = new AbortController()
           _operationAborts.set(installationId, deleteAbort)
@@ -272,10 +272,10 @@ export function registerInstallationHandlers(): void {
             _operationAborts.delete(installationId)
             if (deleteAbort.signal.aborted) {
               if (isEffectivelyEmptyInstallDir(inst.installPath)) {
-                try { fs.rmSync(inst.installPath, { recursive: true, force: true }) } catch {}
+                try { fs.rmSync(inst.installPath, { recursive: true, force: true }) } catch { }
                 await installations.remove(installationId)
               } else {
-                try { fs.writeFileSync(markerPath, installationId) } catch {}
+                try { fs.writeFileSync(markerPath, installationId) } catch { }
                 await installations.update(installationId, { status: 'partial-delete' })
               }
             }
diff --git a/src/main/lib/ipc/sessionActions/delete.ts b/src/main/lib/ipc/sessionActions/delete.ts
index d17ffd3e..e1eaa903 100644
--- a/src/main/lib/ipc/sessionActions/delete.ts
+++ b/src/main/lib/ipc/sessionActions/delete.ts
@@ -21,10 +21,10 @@ export async function handleDelete({ event, installationId, inst }: ActionContex
   let markerContent: string | null
   try { markerContent = fs.readFileSync(markerPath, 'utf-8').trim() } catch { markerContent = null }
   if (!markerContent) {
-    return { ok: false, message: 'Safety check failed: this directory was not created by ComfyUI Desktop 2.0. Use Untrack to remove it from the list, then delete the files manually.' }
+    return { ok: false, message: 'Safety check failed: this directory was not created by ComfyUI Desktop 2.0. Use Forget to remove it from the list, then delete the files manually.' }
   }
   if (markerContent !== inst.id && markerContent !== 'tracked') {
-    return { ok: false, message: 'Safety check failed: the marker file does not match this installation. Use Untrack instead.' }
+    return { ok: false, message: 'Safety check failed: the marker file does not match this installation. Use Forget instead.' }
   }
   const sender = event.sender
   const sendProgress = makeSendProgress(sender, installationId)
diff --git a/src/main/popups/titlePopup.test.ts b/src/main/popups/titlePopup.test.ts
index 97228169..67c57e2a 100644
--- a/src/main/popups/titlePopup.test.ts
+++ b/src/main/popups/titlePopup.test.ts
@@ -23,6 +23,7 @@ vi.mock('electron', () => ({
 // without subscribing to anything.
 import {
   buildInstancePickerSnapshot,
+  resolvePickerSelectedInstallId,
   buildTitlePopupMenuItems,
   computePopupHeight,
   GLOBAL_SETTINGS_ALLOWED_ACTIONS,
@@ -123,33 +124,57 @@ describe('buildTitlePopupMenuItems', () => {
     expect(ids).not.toContain('new-install')
     expect(ids).not.toContain('track')
     expect(ids).not.toContain('load-snapshot')
-    expect(ids).toContain('return-to-dashboard')
   })
 
-  it('always includes New Window, Settings, Send Feedback, and Close All Windows', () => {
-    for (const installationId of [null, 'inst-1']) {
-      const ids = buildTitlePopupMenuItems(makeEntry({ installationId }))
-        .map((i) => i.id ?? null)
-      expect(ids).toContain('new-window')
-      expect(ids).toContain('settings')
-      expect(ids).toContain('feedback')
-      expect(ids).toContain('close-all-windows')
-    }
+  it('chooser host includes New Window, Settings, Send Feedback, and Close All Windows', () => {
+    const ids = buildTitlePopupMenuItems(makeEntry({ installationId: null }))
+      .map((i) => i.id ?? null)
+    expect(ids).toContain('new-window')
+    expect(ids).toContain('settings')
+    expect(ids).toContain('feedback')
+    expect(ids).toContain('close-all-windows')
   })
 
-it('exposes Reset Zoom only when comfy zoom is non-zero, with the percent in the label', () => {
-    const noZoom = buildTitlePopupMenuItems(makeEntry({ zoomLevel: 0 }))
+  // Install-host menu was deliberately trimmed (spec item 1): no
+  // Desktop Settings, no Return to Dashboard (replaced by the Home
+  // icon in the picker, spec item 10), no Reset Zoom (Ctrl/Cmd+0
+  // shortcut still works). The remaining four are New Window, Send
+  // Beta Feedback, Exit Window, Exit All Windows.
+  it('install-host menu is trimmed to four essentials in the canonical order', () => {
+    const items = buildTitlePopupMenuItems(makeEntry({ installationId: 'inst-1' }))
+    const ids = items.map((i) => i.id ?? null).filter((id) => id !== null)
+    expect(ids).toEqual(['new-window', 'feedback', 'exit-window', 'close-all-windows'])
+    const closeAll = items.find((i) => i.id === 'close-all-windows')
+    expect(closeAll?.label).toBe('Exit All Windows')
+    const exitWindow = items.find((i) => i.id === 'exit-window')
+    expect(exitWindow?.label).toBe('Exit Window')
+  })
+
+  it('install-host menu has neither Reset Zoom nor Return to Dashboard', () => {
+    const items = buildTitlePopupMenuItems(
+      makeEntry({ installationId: 'inst-1', zoomLevel: 2 }),
+    )
+    const ids = items.map((i) => i.id ?? null)
+    expect(ids).not.toContain('reset-zoom')
+    expect(ids).not.toContain('return-to-dashboard')
+    expect(ids).not.toContain('settings')
+  })
+
+  it('exposes Reset Zoom on chooser host only when comfy zoom is non-zero, with the percent in the label', () => {
+    const noZoom = buildTitlePopupMenuItems(makeEntry({ installationId: null, zoomLevel: 0 }))
     expect(noZoom.find((i) => i.id === 'reset-zoom')).toBeUndefined()
 
     // 1.2^2 ≈ 1.44 → 144 %
-    const zoomed = buildTitlePopupMenuItems(makeEntry({ zoomLevel: 2 }))
+    const zoomed = buildTitlePopupMenuItems(makeEntry({ installationId: null, zoomLevel: 2 }))
     const resetZoom = zoomed.find((i) => i.id === 'reset-zoom')
     expect(resetZoom).toBeDefined()
     expect(resetZoom?.label).toBe('Reset Zoom (144%)')
   })
 
-  it('omits Reset Zoom when the comfy webContents has been destroyed', () => {
-    const items = buildTitlePopupMenuItems(makeEntry({ comfyDestroyed: true, zoomLevel: 2 }))
+  it('omits Reset Zoom from the chooser host menu when the comfy webContents has been destroyed', () => {
+    const items = buildTitlePopupMenuItems(
+      makeEntry({ installationId: null, comfyDestroyed: true, zoomLevel: 2 }),
+    )
     expect(items.find((i) => i.id === 'reset-zoom')).toBeUndefined()
   })
 
@@ -160,15 +185,6 @@ it('exposes Reset Zoom only when comfy zoom is non-zero, with the percent in the
     expect(ids[ids.length - 1]).toBe('close-all-windows')
   })
 
-  it('places Return to Dashboard before Close All Windows on an install-backed host', () => {
-    const items = buildTitlePopupMenuItems(makeEntry({ installationId: 'inst-1' }))
-    const ids = items.map((i) => i.id ?? null)
-    const returnIdx = ids.indexOf('return-to-dashboard')
-    const closeAllIdx = ids.indexOf('close-all-windows')
-    expect(returnIdx).toBeGreaterThanOrEqual(0)
-    expect(closeAllIdx).toBeGreaterThan(returnIdx)
-  })
-
   it('separators bracket the optional install-creation block on chooser', () => {
     const items = buildTitlePopupMenuItems(makeEntry({ installationId: null }))
     const newWindowIdx = items.findIndex((i) => i.id === 'new-window')
@@ -178,6 +194,37 @@ it('exposes Reset Zoom only when comfy zoom is non-zero, with the percent in the
   })
 })
 
+describe('resolvePickerSelectedInstallId', () => {
+  function makeInstall(overrides: Partial<InstancePickerInstall>): InstancePickerInstall {
+    return {
+      id: 'x',
+      name: 'X',
+      sourceLabel: 'Standalone',
+      sourceCategory: 'local',
+      ...overrides,
+    } as InstancePickerInstall
+  }
+
+  it('prefers an explicit selection over the host install', () => {
+    const installs = [makeInstall({ id: 'a' }), makeInstall({ id: 'b' })]
+    expect(resolvePickerSelectedInstallId('b', 'a', installs)).toBe('b')
+  })
+
+  it('falls back to the host install when no explicit selection', () => {
+    const installs = [makeInstall({ id: 'a' }), makeInstall({ id: 'b' })]
+    expect(resolvePickerSelectedInstallId(null, 'b', installs)).toBe('b')
+  })
+
+  it('defaults to the first install on an install-less host', () => {
+    const installs = [makeInstall({ id: 'a' }), makeInstall({ id: 'b' })]
+    expect(resolvePickerSelectedInstallId(null, null, installs)).toBe('a')
+  })
+
+  it('returns null when there are no installs to select', () => {
+    expect(resolvePickerSelectedInstallId(null, null, [])).toBeNull()
+  })
+})
+
 describe('buildInstancePickerSnapshot', () => {
   function makeInstall(overrides: Partial<InstancePickerInstall>): InstancePickerInstall {
     return {
@@ -189,6 +236,12 @@ describe('buildInstancePickerSnapshot', () => {
     } as InstancePickerInstall
   }
 
+  const EMPTY_STORAGE = {
+    sharedDirectoriesFields: [],
+    modelsDirs: [],
+    modelsSystemDefault: '',
+  }
+
   it('forwards the install array verbatim under `installs`', () => {
     const installs = [
       makeInstall({ id: 'a', name: 'A' }),
@@ -198,6 +251,7 @@ describe('buildInstancePickerSnapshot', () => {
       installs,
       hostInstallationId: null,
       runningInstallationIds: [],
+      storage: EMPTY_STORAGE,
     })
     expect(snap.installs).toEqual(installs)
   })
@@ -207,6 +261,7 @@ describe('buildInstancePickerSnapshot', () => {
       installs: [makeInstall({ id: 'a' })],
       hostInstallationId: 'a',
       runningInstallationIds: [],
+      storage: EMPTY_STORAGE,
     })
     expect(snap.activeInstallationId).toBe('a')
   })
@@ -216,6 +271,7 @@ describe('buildInstancePickerSnapshot', () => {
       installs: [],
       hostInstallationId: null,
       runningInstallationIds: [],
+      storage: EMPTY_STORAGE,
     })
     expect(snap.activeInstallationId).toBeNull()
   })
@@ -225,6 +281,7 @@ describe('buildInstancePickerSnapshot', () => {
       installs: [],
       hostInstallationId: null,
       runningInstallationIds: ['b', 'a', 'c'],
+      storage: EMPTY_STORAGE,
     })
     expect(snap.runningInstallationIds).toEqual(['b', 'a', 'c'])
   })
@@ -234,6 +291,7 @@ describe('buildInstancePickerSnapshot', () => {
       installs: [makeInstall({ id: 'a' })],
       hostInstallationId: null,
       runningInstallationIds: [],
+      storage: EMPTY_STORAGE,
     })
     expect(snap.runningInstallationIds).toEqual([])
   })
diff --git a/src/main/popups/titlePopup.ts b/src/main/popups/titlePopup.ts
index 7db4f3d6..82fa7247 100644
--- a/src/main/popups/titlePopup.ts
+++ b/src/main/popups/titlePopup.ts
@@ -27,7 +27,6 @@ import {
   comfyWindows,
   findEntryByTitleBarSender,
   isChooserHost,
-  isInstallHost,
 } from '../host/registry'
 import type { ComfyPanelKey, ComfyWindowEntry } from '../host/registry'
 import {
@@ -95,6 +94,18 @@ export interface InstancePickerInstall {
  *  picker's right pane (changes whenever the user clicks a different
  *  row — picker tells main via `set-picker-selected-install` IPC and
  *  main re-broadcasts a fresh snapshot). */
+/** Storage-tab slice piggy-backed on the picker snapshot. Same shape
+ *  as the storage fields in `GlobalSettingsSnapshot` — main builds it
+ *  off the same `buildMediaSections` / `buildModelsPayload` plumbing.
+ *  Used by `StoragePane.vue` to render shared-model dirs and the
+ *  Shared Directories fields without subscribing to the
+ *  global-settings broadcast (which doesn't target picker popups). */
+export interface PickerStorageSlice {
+  sharedDirectoriesFields: Record<string, unknown>[]
+  modelsDirs: GlobalSettingsModelsDir[]
+  modelsSystemDefault: string
+}
+
 export interface InstancePickerSnapshot {
   installs: InstancePickerInstall[]
   activeInstallationId: string | null
@@ -102,19 +113,15 @@ export interface InstancePickerSnapshot {
   selectedInstallationId: string | null
   selectedSettings: Record<string, unknown>[] | null
   selectedSnapshots: Record<string, unknown> | null
-  /** Compact = default identity-card right pane; expanded = full
-   *  per-install settings UI (`ComfyUISettingsContent`) in the right
-   *  pane. Driven by `comfy-titlepopup:set-picker-mode` IPC; main
-   *  animates the popup bounds when this flips. */
-  mode: 'compact' | 'expanded'
-  /** When `mode === 'expanded'`, the tab the settings UI opens on
-   *  ('config' | 'status' | 'update' | 'snapshots'). Ignored in
-   *  compact mode. */
+  /** Tab the settings UI opens on ('config' | 'status' | 'update' |
+   *  'snapshots' | 'storage'). Null = let the picker view choose its
+   *  default. */
   initialTab: string | null
-  /** When `mode === 'expanded'`, an action id to fire automatically
-   *  after the settings UI mounts (e.g. `'update-comfyui'` for the
-   *  kebab Update entry). Cleared after consumption. */
+  /** Action id to fire automatically after the settings UI mounts
+   *  (e.g. `'update-comfyui'` for the kebab Update entry). Cleared
+   *  after consumption. */
   autoAction: string | null
+  storage: PickerStorageSlice
 }
 
 /** Single Models-directory row pushed to the global-settings popup.
@@ -134,7 +141,9 @@ export interface GlobalSettingsModelsDir {
  *  `Record<string, unknown>` to keep the preload boundary type-safe
  *  without dragging renderer types into main. */
 export interface GlobalSettingsSnapshot {
-  overviewFields: Record<string, unknown>[]
+  generalFields: Record<string, unknown>[]
+  telemetryFields: Record<string, unknown>[]
+  desktopUpdateFields: Record<string, unknown>[]
   cacheFields: Record<string, unknown>[]
   advancedFields: Record<string, unknown>[]
   sharedDirectoriesFields: Record<string, unknown>[]
@@ -149,15 +158,12 @@ export interface GlobalSettingsSnapshot {
     platform: NodeJS.Platform
     lastCheckedAt: number | null
   }
-  channelPickerField: Record<string, unknown> | null
-  activeInstallationId: string | null
-  hasActiveInstall: boolean
   githubUrl: string
   githubStars: number | null
   i18n: {
     overview: string
     updates: string
-    cache: string
+    storage: string
     models: string
     advanced: string
     sharedDirectories: string
@@ -171,9 +177,24 @@ interface BuildInstancePickerSnapshotArgs {
   selectedInstallationId?: string | null
   selectedSettings?: Record<string, unknown>[] | null
   selectedSnapshots?: Record<string, unknown> | null
-  mode?: 'compact' | 'expanded'
   initialTab?: string | null
   autoAction?: string | null
+  storage: PickerStorageSlice
+}
+
+/**
+ * Resolves which install the picker should show in its detail pane.
+ * Install-less hosts (dashboard) have no active install; default to the
+ * first row so the pane is not empty on open.
+ */
+export function resolvePickerSelectedInstallId(
+  explicitSelection: string | null | undefined,
+  hostInstallationId: string | null | undefined,
+  installs: InstancePickerInstall[],
+): string | null {
+  const resolved = explicitSelection ?? hostInstallationId ?? null
+  if (resolved) return resolved
+  return installs[0]?.id ?? null
 }
 
 /**
@@ -191,9 +212,32 @@ export function buildInstancePickerSnapshot(
     selectedInstallationId: args.selectedInstallationId ?? null,
     selectedSettings: args.selectedSettings ?? null,
     selectedSnapshots: args.selectedSnapshots ?? null,
-    mode: args.mode ?? 'compact',
     initialTab: args.initialTab ?? null,
     autoAction: args.autoAction ?? null,
+    storage: args.storage,
+  }
+}
+
+/** Build the storage-tab slice piggy-backed on the picker snapshot.
+ *  Same `buildMediaSections` / `buildModelsPayload` plumbing the
+ *  global-settings snapshot uses — kept in one place so both
+ *  surfaces stay in lockstep. */
+function buildPickerStorageSlice(): PickerStorageSlice {
+  const mediaSections = buildMediaSections()
+  const modelsPayload = buildModelsPayload()
+  const sharedDirectoriesFields =
+    (mediaSections[0]?.fields ?? []).map(toDetailField) as unknown as Record<string, unknown>[]
+  const modelsDirsRaw =
+    (modelsPayload.sections[0]?.fields[0]?.value as string[] | undefined) ?? []
+  const modelsDefault = modelsPayload.systemDefault
+  return {
+    sharedDirectoriesFields,
+    modelsDirs: modelsDirsRaw.map((p, i) => ({
+      path: p,
+      isPrimary: i === 0,
+      isDefault: p === modelsDefault,
+    })),
+    modelsSystemDefault: modelsDefault,
   }
 }
 
@@ -270,21 +314,12 @@ interface TitlePopupEntry {
    *  scope `selectedSettings` + `selectedSnapshots` in subsequent
    *  snapshot pushes. Defaults to the host's active install on open. */
   pickerSelectedInstallationId: string | null
-  /** Picker's right-pane mode. `'compact'` = identity card + Open/Manage
-   *  CTAs (the original popup size). `'expanded'` = the full per-install
-   *  settings UI mounts in the right pane and main animates the popup
-   *  bounds to ~95dvw × 95dvh. Driven by `comfy-titlepopup:set-picker-mode`
-   *  IPC; main rebroadcasts a snapshot with the new value so the picker
-   *  view re-renders the right pane. */
-  pickerMode: 'compact' | 'expanded'
-  /** When `pickerMode === 'expanded'`, the tab id the settings UI opens
-   *  on. Forwarded into the snapshot for the picker view to consume on
-   *  first render. */
+  /** Tab id the settings UI opens on. Forwarded into the snapshot for
+   *  the picker view to consume on first render. */
   pickerInitialTab: string | null
-  /** When `pickerMode === 'expanded'`, an action id the settings UI
-   *  fires automatically after mounting (kebab Update / Migrate /
-   *  Restore-Snapshot / Delete entry points). Cleared after the picker
-   *  view consumes it. */
+  /** Action id the settings UI fires automatically after mounting
+   *  (kebab Update / Migrate / Restore-Snapshot / Delete entry
+   *  points). Cleared after the picker view consumes it. */
   pickerAutoAction: string | null
   /** JSON of the most recent `installs-changed` snapshot sent to this
    *  popup. Used by `broadcastInstancePickerSnapshotToTitlePopups` to
@@ -297,14 +332,6 @@ interface TitlePopupEntry {
   /** JSON of the most recent `global-settings-changed` snapshot pushed
    *  to this popup. Same dedup role as `lastPickerBroadcastJson`. */
   lastGlobalSettingsBroadcastJson: string | null
-  /** Most recent natural-content height the picker renderer reported
-   *  via `comfy-titlepopup:request-size`. The compact-mode bounds
-   *  computation reads this so the popup tracks the renderer's
-   *  measured height even after a host-window resize — without it the
-   *  resize listener would have to ask the renderer again, racing the
-   *  observer. `null` until the first `request-size` lands; only
-   *  populated for the instance-picker kind. */
-  lastReportedNaturalHeight: number | null
   /** Wall-clock time of the most recent `showTitlePopupNow()` for this
    *  entry. The backdrop's `mousedown` listener can fire during the
    *  same tick as the trigger click (the backdrop covers the body, and
@@ -558,44 +585,52 @@ export function buildTitlePopupMenuItems(entry: ComfyWindowEntry): TitlePopupMen
       },
       { id: 'load-snapshot', label: 'Load Snapshot', labelKey: 'fileMenu.loadSnapshot' },
       { kind: 'separator' },
+      {
+        id: 'settings',
+        label: 'Desktop Settings',
+        labelKey: 'fileMenu.globalSettings',
+      },
+      // Send Feedback (#493). The renderer-side handler resolves the
+      // support URL and emits the `desktop2.feedback.opened`
+      // telemetry action with `source: 'menu'`.
+      { id: 'feedback', label: 'Send Beta Feedback', labelKey: 'fileMenu.sendFeedback' },
+    )
+    // Reset Zoom — discoverable recovery path for users who zoom the
+    // comfyView too far to read. Only on the chooser host (the dummy
+    // comfyView there can still be zoomed via Ctrl/Cmd+scroll); the
+    // install host trims it out per the simplified menu spec.
+    if (!entry.comfyView.webContents.isDestroyed()) {
+      const level = entry.comfyView.webContents.getZoomLevel()
+      if (level !== 0) {
+        const percent = Math.round(Math.pow(1.2, level) * 100)
+        items.push({ id: 'reset-zoom', label: `Reset Zoom (${percent}%)` })
+      }
+    }
+    items.push(
+      { kind: 'separator' },
+      {
+        id: 'close-all-windows',
+        label: 'Exit All Windows',
+        labelKey: 'fileMenu.exitAllWindows',
+      },
     )
+    return items
   }
+  // Install-host menu: trimmed to the four essentials. Desktop Settings,
+  // Return to Dashboard, and Reset Zoom are intentionally absent —
+  // Settings lives in the picker's Startup Args tab, the dashboard
+  // escape is the Home icon in the picker chips row, and Reset Zoom
+  // remains reachable via Ctrl/Cmd + 0.
   items.push(
-    {
-      id: 'settings',
-      label: 'Desktop Settings',
-      labelKey: 'fileMenu.globalSettings',
-    },
-    // Send Feedback (#493). The renderer-side handler resolves the
-    // support URL and emits the `desktop2.feedback.opened`
-    // telemetry action with `source: 'menu'`.
     { id: 'feedback', label: 'Send Beta Feedback', labelKey: 'fileMenu.sendFeedback' },
     { kind: 'separator' },
+    { id: 'exit-window', label: 'Exit Window', labelKey: 'fileMenu.exitWindow' },
+    {
+      id: 'close-all-windows',
+      label: 'Exit All Windows',
+      labelKey: 'fileMenu.exitAllWindows',
+    },
   )
-  if (isInstallHost(entry)) {
-    items.push({
-      id: 'return-to-dashboard',
-      label: 'Return to Dashboard',
-      labelKey: 'fileMenu.returnToDashboard',
-    })
-  }
-  // Reset Zoom — discoverable recovery path for users who zoom the Comfy
-  // view too far to read. Only surfaced when zoom is actually non-default,
-  // and the label includes the current percent so the menu also doubles
-  // as a status indicator. The Ctrl/Cmd + 0 shortcut wired in `onLaunch`
-  // does the same thing for users who know it.
-  if (!entry.comfyView.webContents.isDestroyed()) {
-    const level = entry.comfyView.webContents.getZoomLevel()
-    if (level !== 0) {
-      const percent = Math.round(Math.pow(1.2, level) * 100)
-      items.push({ id: 'reset-zoom', label: `Reset Zoom (${percent}%)` })
-    }
-  }
-  items.push({
-    id: 'close-all-windows',
-    label: 'Close All Windows',
-    labelKey: 'fileMenu.closeAllWindows',
-  })
   return items
 }
 
@@ -636,7 +671,14 @@ async function broadcastInstancePickerSnapshotToTitlePopups(
     if (!entry.view.isOpen && entry.view.pendingShowTimer === null) continue
     if (entry.view.popup.webContents.isDestroyed()) continue
     const parentEntry = comfyWindows.get(entry.parentEntryId)
-    const selectedId = entry.pickerSelectedInstallationId ?? parentEntry?.installationId ?? null
+    const selectedId = resolvePickerSelectedInstallId(
+      entry.pickerSelectedInstallationId,
+      parentEntry?.installationId,
+      installs,
+    )
+    if (!entry.pickerSelectedInstallationId && selectedId) {
+      entry.pickerSelectedInstallationId = selectedId
+    }
     const details = selectedId
       ? await bindings.getPickerDetailsForInstall(selectedId).catch(() => ({
         settings: null,
@@ -650,9 +692,9 @@ async function broadcastInstancePickerSnapshotToTitlePopups(
       selectedInstallationId: selectedId,
       selectedSettings: details.settings,
       selectedSnapshots: details.snapshots,
-      mode: entry.pickerMode,
       initialTab: entry.pickerInitialTab,
       autoAction: entry.pickerAutoAction,
+      storage: buildPickerStorageSlice(),
     })
     // Dedupe: every snapshot broadcast triggers a `pickerSnapshot`
     // prop change in the renderer, which schedules a measure-and-
@@ -775,13 +817,11 @@ function ensureTitlePopup(parent: BrowserWindow): TitlePopupEntry {
     lastConfigJson: null,
     lastSyncedConfigJson: null,
     pickerSelectedInstallationId: null,
-    pickerMode: 'compact',
     pickerInitialTab: null,
     pickerAutoAction: null,
     openedAt: 0,
     lastPickerBroadcastJson: null,
     lastGlobalSettingsBroadcastJson: null,
-    lastReportedNaturalHeight: null,
   }
   titlePopupsByParent.set(view.parentWindowId, entry)
   titlePopupsByWebContents.set(view.popupWebContentsId, entry)
@@ -899,63 +939,31 @@ const DOWNLOADS_POPUP_WIDTH = 405
 const DOWNLOADS_POPUP_MAX_HEIGHT_PX = 396
 const DOWNLOADS_POPUP_MAX_HEIGHT_RATIO = 0.6
 
-/** Instance-picker popup geometry. The picker has two modes (compact
- *  list of rows + expanded settings UI) and historically had a stack of
- *  per-mode pixel constants — wide, min height, max height, ratio —
- *  layered to keep the popup inside the host window. That worked but
- *  meant a different math path for every site that needed bounds
- *  (open, mode-flip morph, parent-resize refit, request-size handler).
- *  The four sites drifted from each other (the morph forgot the title-
- *  bar inset; the resize handler used a different ratio than the open
- *  path) and the popup would visibly slip past the title chrome.
- *
- *  Replaced with a single `computePickerBounds()` function and three
- *  inset constants. The function is the only place that decides where
- *  the picker sits inside the host window — every call site (open,
- *  morph target, parent-resize refit, request-size clamp) reads from it
- *  so they can't drift.
+/** Instance-picker popup geometry. Single `computePickerBounds()`
+ *  function is the only place that decides where the picker sits inside
+ *  the host window — every call site (open, parent-resize refit,
+ *  request-size clamp) reads from it so they can't drift.
  *
  *  - `PICKER_SIDE_GUTTER` / `PICKER_BOTTOM_GUTTER`: breathing room
  *    between the popup card and the host window's right + bottom
- *    edges. Top edge is handled by `TITLEBAR_HEIGHT`.
- *  - `PICKER_COMPACT_MAX_WIDTH`: the natural cap on the compact
- *    single-column list. On wide monitors the row list would otherwise
- *    stretch to absurd line lengths; capping at 720px keeps it
- *    legible. Expanded mode ignores this and fills the available
- *    inner width. */
+ *    edges. Top edge is handled by `TITLEBAR_HEIGHT`. */
 const PICKER_SIDE_GUTTER = 24
 const PICKER_BOTTOM_GUTTER = 24
 /** Extra breathing room between the title bar and the popup card.
  *  `TITLEBAR_HEIGHT` is the title-bar's measured height; without this
  *  gutter the popup kisses the chrome and reads as glued-on. */
 const PICKER_TOP_GUTTER = 8
-const PICKER_COMPACT_MAX_WIDTH = 720
-/** Expanded mode width ceiling. The settings UI inside the right pane
- *  is form-shaped — inputs at full width just look stretched, not
- *  more useful. Cap at 960px so on big screens the box sits centred
- *  with side gutters and the form fields read at a comfortable line
- *  length. */
+/** Width ceiling. The settings UI inside the right pane is form-shaped
+ *  — inputs at full width just look stretched, not more useful. Cap at
+ *  960px so on big screens the box sits centred with side gutters and
+ *  the form fields read at a comfortable line length. */
 const PICKER_EXPANDED_MAX_WIDTH = 960
-/** Hard ceiling for the compact tray on tall windows. Previously
- *  paired with a 60% × window ratio cap, but on a *short* host
- *  window the ratio choked the tray even when `naturalHeight` fit
- *  comfortably in the available `innerHeight` (e.g. a 700px-tall
- *  window: 60% = 420px, clipping a 500px natural-height tray for no
- *  good reason). The hard 560px cap alone holds the anti-takeover
- *  intent on tall windows, and `innerHeight` already caps growth on
- *  short ones.
- *  much vertical real-estate for two installs. Cap so the tray reads
- *  as a tray. */
-const PICKER_COMPACT_MAX_HEIGHT = 560
-/** Expanded mode height ceiling as a fraction of the host window's
- *  content height. Mirrors the compact-mode ratio reasoning — the
- *  per-install settings UI is form-shaped, so filling a 4K window
- *  top-to-bottom just leaves the form fields adrift in negative
- *  space. */
+/** Height ceiling as a fraction of host window content height. The
+ *  per-install settings UI is form-shaped, so filling a 4K window top-
+ *  to-bottom just leaves the form fields adrift in negative space. */
 const PICKER_EXPANDED_MAX_HEIGHT_RATIO = 0.85
-/** Hard ceiling for expanded mode on tall windows. 720px fits the
- *  settings UI's longest tab (Snapshots) without internal scroll on
- *  typical install counts. */
+/** Hard ceiling on tall windows. 720px fits the settings UI's longest
+ *  tab (Snapshots) without internal scroll on typical install counts. */
 const PICKER_EXPANDED_MAX_HEIGHT = 720
 
 interface PickerBounds {
@@ -968,70 +976,37 @@ interface PickerBounds {
 /**
  * Single source of truth for picker popup bounds.
  *
- * Every site that needs to place the picker (open, mode-flip morph,
- * parent-resize refit, renderer-driven natural-height request) calls
+ * Every site that places the picker (open, parent-resize refit) calls
  * this — so the popup can't end up at one set of bounds at open and a
  * different set after a resize.
  *
- * Geometry:
- *  - Top edge always sits at `TITLEBAR_HEIGHT` so the popup never
- *    paints over the host's title chrome.
- *  - Side gutters keep the card from kissing the host window's edges.
- *  - Compact mode caps at `PICKER_COMPACT_MAX_WIDTH` so the row list
- *    doesn't stretch into illegible line lengths on wide monitors; the
- *    renderer's natural-height request decides compact height (passed
- *    in as `naturalHeight`).
- *  - Expanded mode fills the full inner area (max width minus gutters,
- *    height from title bar to bottom gutter). `naturalHeight` is
- *    ignored — the per-install settings UI fills whatever it gets.
+ * Geometry: top edge at `TITLEBAR_HEIGHT` so the popup never paints
+ * over the host's title chrome; side gutters keep the card from kissing
+ * the host window's edges; width clamped to `PICKER_EXPANDED_MAX_WIDTH`
+ * so form fields read at a comfortable line length on wide monitors;
+ * height clamped to a host-content ratio + hard pixel ceiling so the
+ * settings UI doesn't drift in negative space on a 4K window.
  *
- * The popup is horizontally centred on the host window's content. In
- * compact mode (where height < innerHeight) the popup is vertically
- * pinned to the top inset so it reads as a "tray under the title bar";
- * expanded mode fills top-to-bottom so vertical centring doesn't
- * apply.
+ * Horizontally centred on the host window's content. On tall windows
+ * the card drops by a third of the available slack so it sits slightly
+ * above centre — title bar still anchors it visually, but it doesn't
+ * kiss the bottom gutter on a 1440px-tall window.
  */
-function computePickerBounds(
-  parent: BrowserWindow,
-  mode: 'compact' | 'expanded',
-  naturalHeight?: number | null,
-): PickerBounds {
+function computePickerBounds(parent: BrowserWindow): PickerBounds {
   const content = parent.getContentBounds()
   const innerTop = TITLEBAR_HEIGHT + PICKER_TOP_GUTTER
   const innerHeight = Math.max(0, content.height - innerTop - PICKER_BOTTOM_GUTTER)
   const innerWidth = Math.max(0, content.width - 2 * PICKER_SIDE_GUTTER)
 
-  let width: number
-  let height: number
-  if (mode === 'expanded') {
-    width = Math.min(PICKER_EXPANDED_MAX_WIDTH, innerWidth)
-    height = Math.min(
-      innerHeight,
-      Math.round(content.height * PICKER_EXPANDED_MAX_HEIGHT_RATIO),
-      PICKER_EXPANDED_MAX_HEIGHT,
-    )
-  } else {
-    width = Math.min(PICKER_COMPACT_MAX_WIDTH, innerWidth)
-    // `innerHeight` caps growth against the host window (anti-overflow);
-    // the hard 560px cap holds the anti-takeover intent on tall windows.
-    // No window-ratio cap — that previously choked the tray on *short*
-    // windows where the natural height would otherwise have fit fine.
-    const compactCeiling = Math.min(innerHeight, PICKER_COMPACT_MAX_HEIGHT)
-    const requested = typeof naturalHeight === 'number' && naturalHeight > 0
-      ? Math.ceil(naturalHeight)
-      : compactCeiling
-    height = Math.max(1, Math.min(requested, compactCeiling))
-  }
+  const width = Math.min(PICKER_EXPANDED_MAX_WIDTH, innerWidth)
+  const height = Math.min(
+    innerHeight,
+    Math.round(content.height * PICKER_EXPANDED_MAX_HEIGHT_RATIO),
+    PICKER_EXPANDED_MAX_HEIGHT,
+  )
   const x = Math.max(PICKER_SIDE_GUTTER, Math.round((content.width - width) / 2))
-  // Compact: pin to top inset so the tray reads as anchored to the
-  // title bar. Expanded: drop down by a third of the slack so on a
-  // tall window the card sits slightly above centre — title bar still
-  // anchors it visually, but it doesn't kiss the bottom gutter on a
-  // 1440px-tall window.
   const slack = Math.max(0, innerHeight - height)
-  const y = mode === 'expanded' && slack > 0
-    ? innerTop + Math.round(slack / 3)
-    : innerTop
+  const y = slack > 0 ? innerTop + Math.round(slack / 3) : innerTop
   return { x, y, width, height }
 }
 
@@ -1105,16 +1080,12 @@ function refitPopupForParent(entry: TitlePopupEntry): void {
   const cur = entry.view.popup.getBounds()
   const parent = entry.view.parentWindow
 
-  // Instance picker has its own geometry function (compact + expanded
-  // modes both clamped to the inner area below the title bar). Route
-  // through it so a parent resize lands on the same bounds the open /
-  // mode-flip paths would compute — single source of truth.
+  // Instance picker has its own geometry function (clamped to the inner
+  // area below the title bar). Route through it so a parent resize lands
+  // on the same bounds the open path would compute — single source of
+  // truth.
   if (entry.kind === 'instance-picker') {
-    const target = computePickerBounds(
-      parent,
-      entry.pickerMode,
-      entry.lastReportedNaturalHeight,
-    )
+    const target = computePickerBounds(parent)
     if (
       target.x === cur.x
       && target.y === cur.y
@@ -1234,15 +1205,10 @@ function openTitlePopup(opts: OpenTitlePopupOpts): void {
     x = clampPopupX(rawX, width, opts.parent)
   } else if (opts.kind === 'instance-picker') {
     // instance-picker geometry is delegated to `computePickerBounds`
-    // — single source of truth shared with the mode-flip morph, the
-    // parent-resize refit, and the renderer's natural-height request
-    // handler so all four paths produce consistent bounds. The initial
-    // open passes `null` for naturalHeight; the renderer measures once
-    // it mounts and pushes the real height via
-    // `comfy-titlepopup:request-size`, which stores it on the entry
-    // and re-applies bounds. Geometry function also owns the title-bar
-    // inset, so the popup never paints over the title chrome.
-    const bounds = computePickerBounds(opts.parent, entry.pickerMode, null)
+    // — single source of truth shared with the parent-resize refit so
+    // both paths produce consistent bounds. Geometry function owns the
+    // title-bar inset, so the popup never paints over the title chrome.
+    const bounds = computePickerBounds(opts.parent)
     width = bounds.width
     height = bounds.height
     x = bounds.x
@@ -1254,7 +1220,7 @@ function openTitlePopup(opts: OpenTitlePopupOpts): void {
     // below the title bar. Anchor coords are title-bar-local so `y=0`
     // sits at the title-bar top; the centred-y formula recentres
     // inside the `contentHeight - TITLEBAR_HEIGHT` band beneath it.
-    ;({ width, height } = computeGlobalSettingsBounds(opts.parent))
+    ; ({ width, height } = computeGlobalSettingsBounds(opts.parent))
     const { width: contentWidth, height: contentHeight } = opts.parent.getContentBounds()
     x = Math.max(0, Math.round((contentWidth - width) / 2))
     y = Math.max(
@@ -1340,6 +1306,11 @@ export interface TitlePopupHostBindings {
   /** Confirm + close all host windows. The parent window is the popup's
    *  host so the confirm dialog can be parented to it. */
   confirmAndCloseAllHostWindows: (parentWindow: BrowserWindow | null) => Promise<void> | void
+  /** Confirm + close a single host window. Same primitive the
+   *  bulk-close uses, scoped to one window. Powers the install-host
+   *  menu's `Exit Window` entry so the user gets a prompt instead of
+   *  the silent-close the native OS button gives. */
+  confirmAndCloseHostWindow: (parentWindow: BrowserWindow) => Promise<void> | void
   /** Switch the host's body to the named panel (settings, new-install, ...). */
   setActivePanel: (windowKey: number, panel: ComfyPanelKey) => void
   /** Forward a Send Feedback request to the host's panel renderer. */
@@ -1410,30 +1381,13 @@ export interface TitlePopupHostBindings {
     actionId: string,
     actionData?: Record<string, unknown>,
   ) => Promise<{ ok: boolean; message?: string }>
-  /** Resolve the `channel-cards` field from the active install's
-   *  Update tab. Returns `null` for chooser hosts (no install) or for
-   *  sources that emit no channel-picker payload (e.g. cloud installs).
-   *  Drives the Update Channel select inside the global-settings popup. */
-  getChannelPickerFieldForInstall: (
-    installationId: string | null,
-  ) => Promise<Record<string, unknown> | null>
-  /** Dispatch an arbitrary install action — used by the global-settings
-   *  popup's Update accordion for `'copy-update' | 'release-update' |
-   *  'switch-channel' | 'update'`. The IPC handler enforces the
-   *  allowlist before calling this. Mirrors `pickerRunAction` but
-   *  doesn't constrain the action surface itself. */
-  runChannelPickerAction: (
-    installationId: string,
-    actionId: string,
-    actionData?: Record<string, unknown>,
-  ) => Promise<{ ok: boolean; message?: string }>
 }
 
 /** Open the Global Settings popup for a specific host window. Shared
  *  by the hamburger menu's `id === 'settings'` handler and the panel
  *  renderer's `comfy-titlepopup:open-global-settings` IPC — both end up
- *  doing the same thing: build a snapshot for the host's active
- *  install (null on chooser hosts) and open the centred popup.
+ *  doing the same thing: build a desktop-only snapshot and open the
+ *  centred popup.
  *
  *  `parentEntry` is the host window's `ComfyWindowEntry`. Bail if the
  *  window is destroyed.
@@ -1445,15 +1399,12 @@ export interface TitlePopupHostBindings {
 function openGlobalSettingsForHost(
   parentEntry: ComfyWindowEntry,
   parentEntryId: number,
-  bindings: TitlePopupHostBindings,
+  _bindings: TitlePopupHostBindings,
   titleBarSender: Electron.WebContents,
 ): void {
   if (parentEntry.window.isDestroyed()) return
   void (async () => {
-    const snapshot = await buildGlobalSettingsSnapshot(
-      bindings,
-      parentEntry.installationId,
-    )
+    const snapshot = await buildGlobalSettingsSnapshot()
     if (parentEntry.window.isDestroyed()) return
     openTitlePopup({
       parent: parentEntry.window,
@@ -1494,22 +1445,20 @@ function openInstancePickerForHost(
   titleBarSender: Electron.WebContents,
   anchor: { x: number; y: number },
   selectedInstallationId?: string | null,
-  initialMode?: 'compact' | 'expanded',
   initialTab?: string | null,
   autoAction?: string | null,
 ): void {
   if (parentEntry.window.isDestroyed()) return
   const installs: InstancePickerInstall[] = cachedInstallsForPicker.slice()
   const runningInstallationIds = bindings.getRunningInstallationIds()
-  const initialSelectedId = selectedInstallationId ?? parentEntry.installationId
+  const initialSelectedId = resolvePickerSelectedInstallId(
+    selectedInstallationId,
+    parentEntry.installationId,
+    installs,
+  )
   const popupEntry = titlePopupsByParent.get(parentEntry.window.id)
   if (popupEntry) {
     popupEntry.pickerSelectedInstallationId = initialSelectedId
-    // Seed the mode + auto-action on the entry so the next snapshot
-    // broadcast picks them up. The chooser-card kebab path passes
-    // `'expanded'` + a specific tab; the title-bar pill path leaves
-    // these unset and the popup opens compact.
-    popupEntry.pickerMode = initialMode ?? 'compact'
     popupEntry.pickerInitialTab = initialTab ?? null
     popupEntry.pickerAutoAction = autoAction ?? null
   }
@@ -1520,9 +1469,9 @@ function openInstancePickerForHost(
     selectedInstallationId: initialSelectedId,
     selectedSettings: null,
     selectedSnapshots: null,
-    mode: initialMode ?? 'compact',
     initialTab: initialTab ?? null,
     autoAction: autoAction ?? null,
+    storage: buildPickerStorageSlice(),
   })
   openTitlePopup({
     parent: parentEntry.window,
@@ -1577,6 +1526,14 @@ function activateTitlePopupMenuItem(
     // parented to it so it stays valid through the in-place body
     // swap (no popup teardown).
     void bindings.returnToDashboard(entry.parentEntryId)
+  } else if (id === 'exit-window') {
+    // Single-window close with a confirm — mirrors the bulk-close
+    // primitive so the user sees what they're about to abandon
+    // (running ComfyUI, in-progress installs, downloads) instead of
+    // the silent close the OS button gives.
+    if (parentEntry && !parentEntry.window.isDestroyed()) {
+      void bindings.confirmAndCloseHostWindow(parentEntry.window)
+    }
   } else if (id === 'close-all-windows') {
     // For two or more open windows we confirm via a native dialog
     // that lists the open windows + any active operations that
@@ -1744,28 +1701,27 @@ function findSettingsFields(
   return src.map(toDetailField)
 }
 
-async function buildGlobalSettingsSnapshot(
-  bindings: TitlePopupHostBindings,
-  hostInstallationId: string | null,
-): Promise<GlobalSettingsSnapshot> {
+async function buildGlobalSettingsSnapshot(): Promise<GlobalSettingsSnapshot> {
   const settingsSections = buildSettingsSections()
   const mediaSections = buildMediaSections()
   const modelsPayload = buildModelsPayload()
-  const general = findSettingsFields(settingsSections, 'settings.general', 0)
-  const telemetry = findSettingsFields(settingsSections, 'settings.telemetry', 1)
+  const generalRaw = findSettingsFields(settingsSections, 'settings.general', 0)
+  const desktopUpdateFields = generalRaw.filter((f) => f.id === 'autoInstallUpdates')
+  const generalFields = generalRaw.filter((f) => f.id !== 'autoInstallUpdates')
+  const telemetryFields = findSettingsFields(settingsSections, 'settings.telemetry', 1)
   const cache = findSettingsFields(settingsSections, 'settings.cache', 2)
   const advanced = findSettingsFields(settingsSections, 'settings.advanced', 3)
   const shared = (mediaSections[0]?.fields ?? []).map(toDetailField)
   const modelsDirsRaw = (modelsPayload.sections[0]?.fields[0]?.value as string[] | undefined) ?? []
   const modelsDefault = modelsPayload.systemDefault
-  const channelPickerField =
-    hostInstallationId ? await bindings.getChannelPickerFieldForInstall(hostInstallationId).catch(() => null) : null
   const appUpdateState = updater.getCurrentUpdateState() as unknown as Record<string, unknown>
   const isDownloading = (appUpdateState['kind'] === 'downloading')
   if (!isDownloading) lastAppUpdateProgress = null
   const githubStars = await getGithubStarCount('comfy-org/ComfyUI').catch(() => null)
   return {
-    overviewFields: [...general, ...telemetry],
+    generalFields,
+    telemetryFields,
+    desktopUpdateFields,
     cacheFields: cache,
     advancedFields: advanced,
     sharedDirectoriesFields: shared,
@@ -1787,32 +1743,21 @@ async function buildGlobalSettingsSnapshot(
       platform: process.platform,
       lastCheckedAt: globalSettingsLastCheckedAt,
     },
-    channelPickerField,
-    activeInstallationId: hostInstallationId,
-    hasActiveInstall: !!hostInstallationId,
     githubUrl: GLOBAL_SETTINGS_GITHUB_URL,
     githubStars,
-    // Section titles. Section count is intentionally trimmed from six
-    // (Overview / Updates / Cache / Models / Advanced / Shared Dirs)
-    // to four — Cache + Models + Shared Dirs collapse into one
-    // "Storage" bucket per UX feedback, and Overview becomes
-    // "General" so its tone matches its contents (preferences, not
-    // a catch-all). Labels render English directly to avoid the
-    // raw-key flash that `i18n.t()` returns when no catalog entry
-    // exists.
     i18n: {
-      overview: 'General',
-      updates: 'Updates',
-      cache: 'Storage',
-      models: 'Models',
-      advanced: 'Advanced',
-      sharedDirectories: 'Shared Directories',
+      overview: i18n.t('settings.general'),
+      updates: i18n.t('settings.updatesTab'),
+      storage: i18n.t('settings.storageTab'),
+      models: i18n.t('settings.models'),
+      advanced: i18n.t('settings.advanced'),
+      sharedDirectories: i18n.t('settings.sharedDirectories'),
     },
   }
 }
 
 async function broadcastGlobalSettingsSnapshotToTitlePopups(
-  bindings: TitlePopupHostBindings,
+  _bindings: TitlePopupHostBindings,
 ): Promise<void> {
   const hasOpen = Array.from(titlePopupsByParent.values()).some(
     (e) => e.kind === 'global-settings'
@@ -1823,9 +1768,7 @@ async function broadcastGlobalSettingsSnapshotToTitlePopups(
     if (entry.kind !== 'global-settings') continue
     if (!entry.view.isOpen && entry.view.pendingShowTimer === null) continue
     if (entry.view.popup.webContents.isDestroyed()) continue
-    const parentEntry = comfyWindows.get(entry.parentEntryId)
-    const hostInstallationId = parentEntry?.installationId ?? null
-    const snapshot = await buildGlobalSettingsSnapshot(bindings, hostInstallationId)
+    const snapshot = await buildGlobalSettingsSnapshot()
     const snapshotJson = JSON.stringify(snapshot)
     if (entry.lastGlobalSettingsBroadcastJson === snapshotJson) continue
     entry.lastGlobalSettingsBroadcastJson = snapshotJson
@@ -1928,40 +1871,16 @@ export function registerTitlePopupIpc(bindings: TitlePopupHostBindings): void {
     (event, payload: { height?: unknown }) => {
       const entry = titlePopupsByWebContents.get(event.sender.id)
       if (!entry) return
-      // Menu popups are sized deterministically by `computePopupHeight`
-      // — ignore renderer requests to avoid fighting the source of truth.
-      if (entry.kind !== 'downloads' && entry.kind !== 'instance-picker') return
+      // Menu / instance-picker / global-settings popups are sized
+      // deterministically from host bounds — only the downloads tray
+      // adapts to renderer-reported natural height. Ignore everything
+      // else to avoid fighting the source of truth.
+      if (entry.kind !== 'downloads') return
       const requested = payload?.height
       if (typeof requested !== 'number' || !Number.isFinite(requested)) return
       const parent = comfyWindows.get(entry.parentEntryId)?.window
       if (!parent || parent.isDestroyed()) return
 
-      // Instance picker routes through `computePickerBounds` — same
-      // function used at open, on parent resize, and on mode flip.
-      // We also stash the reported height on the entry so a subsequent
-      // parent resize can re-derive bounds without needing the renderer
-      // to re-measure. Skipped in expanded mode (the settings UI fills
-      // available height; we don't want a measured natural height to
-      // override the full-fit layout).
-      if (entry.kind === 'instance-picker') {
-        entry.lastReportedNaturalHeight = Math.ceil(requested)
-        if (entry.pickerMode === 'expanded') return
-        const target = computePickerBounds(parent, 'compact', entry.lastReportedNaturalHeight)
-        const cur = entry.view.popup.getBounds()
-        if (
-          target.x === cur.x
-          && target.y === cur.y
-          && target.width === cur.width
-          && target.height === cur.height
-        ) return
-        entry.view.popup.setBounds(target)
-        return
-      }
-
-      // Only `'downloads'` reaches this point — `'instance-picker'`
-      // returns above and `'global-settings'` is filtered out at the top
-      // of the handler (it sizes itself from host bounds, no renderer
-      // measurement).
       const contentHeight = parent.getContentBounds().height
       const ceiling = Math.min(
         DOWNLOADS_POPUP_MAX_HEIGHT_PX,
@@ -2212,8 +2131,6 @@ export function registerTitlePopupIpc(bindings: TitlePopupHostBindings): void {
       const requestedId = payload?.installationId
       const selectedInstallationId =
         typeof requestedId === 'string' && requestedId.length > 0 ? requestedId : null
-      const mode: 'compact' | 'expanded' =
-        payload?.mode === 'expanded' ? 'expanded' : 'compact'
       const initialTab =
         typeof payload?.initialTab === 'string' ? payload.initialTab : null
       const autoAction =
@@ -2225,7 +2142,6 @@ export function registerTitlePopupIpc(bindings: TitlePopupHostBindings): void {
         parentEntry.titleBarView.webContents,
         { x: 0, y: TITLEBAR_HEIGHT },
         selectedInstallationId,
-        mode,
         initialTab,
         autoAction,
       )
@@ -2250,119 +2166,6 @@ export function registerTitlePopupIpc(bindings: TitlePopupHostBindings): void {
     },
   )
 
-  // Picker → flip between compact and expanded modes. Main animates the
-  // popup bounds (compact card → 95dvw × 95dvh centred), then
-  // rebroadcasts a snapshot so the picker view re-renders the right
-  // pane (identity card → full per-install settings UI).
-  //
-  // Animation: 240ms cubic-bezier(0.32, 0.72, 0, 1) tween via repeated
-  // `popup.setBounds()` at ~60fps. Same curve the global-settings
-  // popup uses for its resize. Reduced-motion users get a snap (the
-  // renderer-side `prefers-reduced-motion` query co-handles the inner
-  // chrome cross-fade).
-  ipcMain.on(
-    'comfy-titlepopup:set-picker-mode',
-    async (
-      event,
-      payload: { mode?: unknown; initialTab?: unknown; autoAction?: unknown },
-    ) => {
-      const popupEntry = titlePopupsByWebContents.get(event.sender.id)
-      if (!popupEntry || popupEntry.kind !== 'instance-picker') return
-      if (popupEntry.view.popup.webContents.isDestroyed()) return
-      const mode: 'compact' | 'expanded' =
-        payload?.mode === 'expanded' ? 'expanded' : 'compact'
-      const initialTab =
-        typeof payload?.initialTab === 'string' ? payload.initialTab : null
-      const autoAction =
-        typeof payload?.autoAction === 'string' ? payload.autoAction : null
-      if (popupEntry.pickerMode === mode) {
-        // No-op flip — still refresh the seeded tab/auto-action so a
-        // second Manage click against the same install can target a
-        // different tab without closing first.
-        popupEntry.pickerInitialTab = initialTab
-        popupEntry.pickerAutoAction = autoAction
-        return
-      }
-      popupEntry.pickerMode = mode
-      popupEntry.pickerInitialTab = initialTab
-      popupEntry.pickerAutoAction = autoAction
-
-      // Target bounds come from the same `computePickerBounds`
-      // function the open / parent-resize / natural-height paths use.
-      // Single source of truth — the morph end-state always matches
-      // what a freshly-opened or freshly-resized picker would land on.
-      const parent = popupEntry.view.parentWindow
-      if (parent.isDestroyed()) return
-      const fromBounds = popupEntry.view.popup.getBounds()
-      const toBounds = computePickerBounds(
-        parent,
-        mode,
-        popupEntry.lastReportedNaturalHeight,
-      )
-      const toX = toBounds.x
-      const toY = toBounds.y
-      const toWidth = toBounds.width
-      const toHeight = toBounds.height
-
-      const fromX = fromBounds.x
-      const fromY = fromBounds.y
-      const fromW = fromBounds.width
-      const fromH = fromBounds.height
-
-      // 200ms reads as "decisive" — closer to Linear / Raycast snap feel.
-      // 240ms drifted into "soft" territory; the renderer-side 160ms
-      // cross-fade finishes just before the shell does so contents land
-      // settled, not mid-tween.
-      const DURATION_MS = 200
-      const FRAME_MS = 16
-      // cubic-bezier(0.32, 0.72, 0, 1) — approximated via the standard
-      // easeOutCubic curve. The full bezier eval is ~10 lines of code
-      // for a barely-visible refinement; easeOutCubic is the canonical
-      // shorthand and is what existing global-settings resize uses.
-      const easeOutCubic = (t: number): number => 1 - Math.pow(1 - t, 3)
-
-      const start = Date.now()
-      const lerp = (a: number, b: number, t: number): number => a + (b - a) * t
-
-      // Per-frame dedupe: every 16ms `setBounds` call hits an IPC
-      // boundary + a native paint, even when the eased value rounds to
-      // the same integer on all four axes (common on short tweens or
-      // small deltas). Skip those no-op frames.
-      let prevX = fromX
-      let prevY = fromY
-      let prevW = fromW
-      let prevH = fromH
-
-      const tick = (): void => {
-        if (popupEntry.view.popup.webContents.isDestroyed()) return
-        if (popupEntry.view.parentWindow.isDestroyed()) return
-        const elapsed = Date.now() - start
-        const t = Math.min(1, elapsed / DURATION_MS)
-        const e = easeOutCubic(t)
-        const nextX = Math.round(lerp(fromX, toX, e))
-        const nextY = Math.round(lerp(fromY, toY, e))
-        const nextW = Math.round(lerp(fromW, toWidth, e))
-        const nextH = Math.round(lerp(fromH, toHeight, e))
-        if (nextX !== prevX || nextY !== prevY || nextW !== prevW || nextH !== prevH) {
-          popupEntry.view.popup.setBounds({
-            x: nextX,
-            y: nextY,
-            width: nextW,
-            height: nextH,
-          })
-          prevX = nextX
-          prevY = nextY
-          prevW = nextW
-          prevH = nextH
-        }
-        if (t < 1) setTimeout(tick, FRAME_MS)
-      }
-      tick()
-
-      await broadcastInstancePickerSnapshotToTitlePopups(bindings)
-    },
-  )
-
   // Picker → field update. Routes to the existing handler the drawer
   // uses; main rebroadcasts a fresh snapshot on success so the popup
   // sees the latest value without polling. Errors surface via the
@@ -2585,7 +2388,10 @@ export function registerTitlePopupIpc(bindings: TitlePopupHostBindings): void {
     'comfy-titlepopup:global-settings-update-field',
     (event, payload: { fieldId?: unknown; value?: unknown }) => {
       const popupEntry = titlePopupsByWebContents.get(event.sender.id)
-      if (!popupEntry || popupEntry.kind !== 'global-settings') {
+      if (
+        !popupEntry
+        || (popupEntry.kind !== 'global-settings' && popupEntry.kind !== 'instance-picker')
+      ) {
         return { ok: false, message: 'Global Settings popup not active.' }
       }
       const fieldId = payload?.fieldId
@@ -2606,7 +2412,10 @@ export function registerTitlePopupIpc(bindings: TitlePopupHostBindings): void {
     'comfy-titlepopup:global-settings-set-models-dirs',
     (event, payload: { dirs?: unknown }) => {
       const popupEntry = titlePopupsByWebContents.get(event.sender.id)
-      if (!popupEntry || popupEntry.kind !== 'global-settings') {
+      if (
+        !popupEntry
+        || (popupEntry.kind !== 'global-settings' && popupEntry.kind !== 'instance-picker')
+      ) {
         return { ok: false }
       }
       const dirs = payload?.dirs
@@ -2625,7 +2434,12 @@ export function registerTitlePopupIpc(bindings: TitlePopupHostBindings): void {
     'comfy-titlepopup:global-settings-browse-folder',
     async (event, payload: { defaultPath?: unknown } | undefined) => {
       const popupEntry = titlePopupsByWebContents.get(event.sender.id)
-      if (!popupEntry || popupEntry.kind !== 'global-settings') return null
+      if (
+        !popupEntry
+        || (popupEntry.kind !== 'global-settings' && popupEntry.kind !== 'instance-picker')
+      ) {
+        return null
+      }
       const parentEntry = comfyWindows.get(popupEntry.parentEntryId)
       if (!parentEntry || parentEntry.window.isDestroyed()) return null
       const defaultPath = typeof payload?.defaultPath === 'string' && payload.defaultPath.length > 0
@@ -2645,7 +2459,12 @@ export function registerTitlePopupIpc(bindings: TitlePopupHostBindings): void {
     'comfy-titlepopup:global-settings-open-path',
     (event, payload: { path?: unknown }) => {
       const popupEntry = titlePopupsByWebContents.get(event.sender.id)
-      if (!popupEntry || popupEntry.kind !== 'global-settings') return
+      if (
+        !popupEntry
+        || (popupEntry.kind !== 'global-settings' && popupEntry.kind !== 'instance-picker')
+      ) {
+        return
+      }
       const targetPath = payload?.path
       if (typeof targetPath !== 'string' || targetPath.length === 0) return
       void openPathHelper(targetPath)
@@ -2704,34 +2523,6 @@ export function registerTitlePopupIpc(bindings: TitlePopupHostBindings): void {
     },
   )
 
-  // Install-scoped action (Update Channel cards emit these). Allowlist
-  // enforced here so the popup can't fire arbitrary install actions.
-  ipcMain.handle(
-    'comfy-titlepopup:global-settings-run-install-action',
-    async (event, payload: { installationId?: unknown; actionId?: unknown; actionData?: unknown }) => {
-      const popupEntry = titlePopupsByWebContents.get(event.sender.id)
-      if (!popupEntry || popupEntry.kind !== 'global-settings') {
-        return { ok: false, message: 'Global Settings popup not active.' }
-      }
-      const installationId = payload?.installationId
-      const actionId = payload?.actionId
-      if (typeof installationId !== 'string' || typeof actionId !== 'string') {
-        return { ok: false, message: 'Invalid payload.' }
-      }
-      if (!GLOBAL_SETTINGS_ALLOWED_ACTIONS.has(actionId)) {
-        return { ok: false, message: `Action '${actionId}' is not available.` }
-      }
-      const actionData = (payload.actionData && typeof payload.actionData === 'object')
-        ? payload.actionData as Record<string, unknown>
-        : undefined
-      const result = await bindings.runChannelPickerAction(installationId, actionId, actionData)
-      if (result.ok) {
-        await broadcastGlobalSettingsSnapshotToTitlePopups(bindings)
-      }
-      return result
-    },
-  )
-
   // Newly-opened windows pick up live transitions automatically; initial
   // state for a fresh popup is pushed in `openTitlePopup`.
   downloadEvents.on('tray-state-changed', broadcastDownloadsToTitlePopups)
@@ -2746,8 +2537,11 @@ export function registerTitlePopupIpc(bindings: TitlePopupHostBindings): void {
   })
   // Settings writes (applySettingSet) emit 'changed' — rebroadcast so
   // the popup sees Language / Theme / Cache / Models / etc. flip live.
+  // The picker piggy-backs `modelsDirs` + `sharedDirectoriesFields` on
+  // its own snapshot, so it gets re-broadcast on the same event.
   globalSettingsEvents.on('changed', () => {
     void broadcastGlobalSettingsSnapshotToTitlePopups(bindings)
+    void broadcastInstancePickerSnapshotToTitlePopups(bindings)
   })
   // Updater state transitions repaint the Updates accordion.
   updater.onUpdateStateChanged(() => {
diff --git a/src/main/sources/common/launchSettingsFields.ts b/src/main/sources/common/launchSettingsFields.ts
index 6d2998b8..150fe02f 100644
--- a/src/main/sources/common/launchSettingsFields.ts
+++ b/src/main/sources/common/launchSettingsFields.ts
@@ -6,10 +6,22 @@ export interface LaunchSettingsOptions {
   defaultLaunchMode?: string
   defaultBrowserPartition?: string
   defaultPortConflict?: string
-  includeUseSharedPaths?: boolean
   extraFields?: Record<string, unknown>[]
 }
 
+/** Per-install `useSharedPaths` toggle. Rendered in the picker's
+ *  Storage tab next to the global model-directory UI. Emitted by
+ *  sources that participate in shared-model storage (desktop /
+ *  portable); git-source installs omit this section entirely. */
+export function buildSharedPathsField(installation: InstallationRecord): Record<string, unknown> {
+  return {
+    id: 'useSharedPaths', label: t('common.useSharedPaths'),
+    value: (installation.useSharedPaths as boolean | undefined) !== false,
+    editable: true, editType: 'boolean', tooltip: t('tooltips.useSharedPaths'),
+    requiresRestart: true,
+  }
+}
+
 export function buildLaunchSettingsFields(
   installation: InstallationRecord,
   options: LaunchSettingsOptions
@@ -19,46 +31,39 @@ export function buildLaunchSettingsFields(
     defaultLaunchMode = 'window',
     defaultBrowserPartition = 'shared',
     defaultPortConflict = 'ask',
-    includeUseSharedPaths = true,
     extraFields = [],
   } = options
 
   const fields: Record<string, unknown>[] = []
 
-  if (includeUseSharedPaths) {
-    fields.push({
-      id: 'useSharedPaths', label: t('common.useSharedPaths'),
-      value: (installation.useSharedPaths as boolean | undefined) !== false,
-      editable: true, editType: 'boolean', tooltip: t('tooltips.useSharedPaths'),
-    })
-  }
-
   fields.push(
     ...extraFields,
     { id: 'launchArgs', label: t('common.startupArgs'),
       value: (installation.launchArgs as string | undefined) ?? defaultLaunchArgs,
-      editable: true, editType: 'args-builder', tooltip: t('tooltips.startupArgs') },
+      editable: true, editType: 'args-builder', tooltip: t('tooltips.startupArgs'),
+      requiresRestart: true },
     { id: 'launchMode', label: t('common.launchMode'),
       value: (installation.launchMode as string | undefined) || defaultLaunchMode,
       editable: true, editType: 'select', options: [
         { value: 'window', label: t('common.launchModeWindow') },
         { value: 'console', label: t('common.launchModeConsole') },
-      ] },
+      ], requiresRestart: true },
     { id: 'browserPartition', label: t('common.browserPartition'),
       value: (installation.browserPartition as string | undefined) || defaultBrowserPartition,
       editable: true, editType: 'select', options: [
         { value: 'shared', label: t('common.partitionShared') },
         { value: 'unique', label: t('common.partitionUnique') },
-      ], tooltip: t('tooltips.browserPartition') },
+      ], tooltip: t('tooltips.browserPartition'), requiresRestart: true },
     { id: 'portConflict', label: t('common.portConflict'),
       value: (installation.portConflict as string | undefined) || defaultPortConflict,
       editable: true, editType: 'select', options: [
         { value: 'ask', label: t('common.portConflictAsk') },
         { value: 'auto', label: t('common.portConflictAuto') },
-      ] },
+      ], requiresRestart: true },
     { id: 'envVars', label: t('common.envVars'),
       value: (installation.envVars as Record<string, string> | undefined) ?? {},
-      editable: true, editType: 'env-vars', tooltip: t('tooltips.envVars') },
+      editable: true, editType: 'env-vars', tooltip: t('tooltips.envVars'),
+      requiresRestart: true },
   )
 
   return fields
diff --git a/src/main/sources/git.ts b/src/main/sources/git.ts
index ec392403..91280a2d 100644
--- a/src/main/sources/git.ts
+++ b/src/main/sources/git.ts
@@ -187,7 +187,6 @@ export const gitSource: SourcePlugin = {
         title: t('common.launchSettings'),
         fields: buildLaunchSettingsFields(installation, {
           defaultLaunchArgs: DEFAULT_LAUNCH_ARGS,
-          includeUseSharedPaths: false,
           extraFields: [
             { id: 'venvPath', label: t('git.venv'), value: venvPath || '', editable: true, editType: 'path' },
           ],
diff --git a/src/main/sources/portable.ts b/src/main/sources/portable.ts
index 11799b33..166f1922 100644
--- a/src/main/sources/portable.ts
+++ b/src/main/sources/portable.ts
@@ -11,7 +11,7 @@ import { t } from '../lib/i18n'
 import { fetchLatestRelease, truncateNotes } from '../lib/comfyui-releases'
 import { buildChannelCards, buildChannelLabelMap } from '../lib/channel-cards'
 import type { ChannelDef } from '../lib/channel-cards'
-import { buildLaunchSettingsFields } from './common/launchSettingsFields'
+import { buildLaunchSettingsFields, buildSharedPathsField } from './common/launchSettingsFields'
 import type { InstallationRecord } from '../installations'
 import type {
   SourcePlugin,
@@ -207,6 +207,10 @@ export const portable: SourcePlugin = {
         title: t('common.launchSettings'),
         fields: buildLaunchSettingsFields(installation, { defaultLaunchArgs: DEFAULT_LAUNCH_ARGS, defaultBrowserPartition: 'unique' }),
       },
+      {
+        tab: 'storage',
+        fields: [buildSharedPathsField(installation)],
+      },
       {
         title: 'Actions',
         pinBottom: true,
@@ -214,8 +218,8 @@ export const portable: SourcePlugin = {
           launchAction(installed, !installed ? t('errors.installNotReady') : undefined),
           openFolderAction(installation.installPath),
           migrateToStandaloneAction(installed),
-          deleteAction(installation),
           untrackAction(),
+          deleteAction(installation),
         ],
       },
     )
diff --git a/src/main/sources/standalone/updateSections.ts b/src/main/sources/standalone/updateSections.ts
index d1796acb..0ee7fffa 100644
--- a/src/main/sources/standalone/updateSections.ts
+++ b/src/main/sources/standalone/updateSections.ts
@@ -8,7 +8,7 @@ import type { ComfyVersion } from '../../lib/version'
 import { truncateNotes } from '../../lib/comfyui-releases'
 import { deleteAction, untrackAction, launchAction, openFolderAction } from '../../lib/actions'
 import { t } from '../../lib/i18n'
-import { buildLaunchSettingsFields } from '../common/launchSettingsFields'
+import { buildLaunchSettingsFields, buildSharedPathsField } from '../common/launchSettingsFields'
 import { getVariantLabel, DEFAULT_LAUNCH_ARGS } from './envPaths'
 import type { InstallationRecord } from '../../installations'
 import type { StatusTag } from '../../types/sources'
@@ -182,6 +182,10 @@ export function getDetailSections(installation: InstallationRecord): Record<stri
       title: t('common.launchSettings'),
       fields: buildLaunchSettingsFields(installation, { defaultLaunchArgs: DEFAULT_LAUNCH_ARGS }),
     },
+    {
+      tab: 'storage',
+      fields: [buildSharedPathsField(installation)],
+    },
     {
       title: 'Actions',
       pinBottom: true,
@@ -198,8 +202,8 @@ export function getDetailSections(installation: InstallationRecord): Record<stri
             field: 'name',
           } },
         openFolderAction(installation.installPath),
-        deleteAction(installation),
         untrackAction(),
+        deleteAction(installation),
       ],
     },
   )
diff --git a/src/preload/api.ts b/src/preload/api.ts
index a0dfd7ad..df12cd30 100644
--- a/src/preload/api.ts
+++ b/src/preload/api.ts
@@ -93,7 +93,6 @@ export function buildElectronApi(): ElectronApi {
     openInstancePicker: (opts) =>
       ipcRenderer.send('comfy-window:open-instance-picker-for-install', {
         installationId: opts?.installationId ?? null,
-        mode: opts?.mode ?? 'compact',
         initialTab: opts?.initialTab ?? null,
         autoAction: opts?.autoAction ?? null,
       }),
diff --git a/src/preload/comfyTitlePopupPreload.ts b/src/preload/comfyTitlePopupPreload.ts
index f91c0806..97ed97f0 100644
--- a/src/preload/comfyTitlePopupPreload.ts
+++ b/src/preload/comfyTitlePopupPreload.ts
@@ -69,17 +69,11 @@ export interface PopupInstancePickerSnapshot {
    *  `get-snapshots` returns. `null` when no selection or no install
    *  path. */
   selectedSnapshots: Record<string, unknown> | null
-  /** Compact = default identity-card right pane. Expanded = full
-   *  per-install settings UI in the right pane + 95dvw×95dvh popup
-   *  bounds. Flipped by `setPickerMode` IPC. */
-  mode: 'compact' | 'expanded'
-  /** When `mode === 'expanded'`, the tab the settings UI opens on
-   *  ('config' | 'status' | 'update' | 'snapshots'). `null` in
-   *  compact mode. */
+  /** Tab the settings UI opens on ('config' | 'status' | 'update' |
+   *  'snapshots'). `null` lets the picker view choose its default. */
   initialTab: string | null
-  /** When `mode === 'expanded'`, an action id to fire automatically
-   *  after the settings UI mounts (kebab Update / Migrate / etc.).
-   *  `null` once consumed. */
+  /** Action id to fire automatically after the settings UI mounts
+   *  (kebab Update / Migrate / etc.). `null` once consumed. */
   autoAction: string | null
 }
 
@@ -91,12 +85,13 @@ export interface PopupGlobalSettingsModelsDir {
   isDefault: boolean
 }
 
-/** Snapshot pushed to the global-settings popup. Field arrays + the
- *  `channelPickerField` are loose-typed (renderer casts to `DetailField`
- *  on receipt) because the preload tsconfig slice can't see the
- *  renderer's view types. */
+/** Snapshot pushed to the global-settings popup. Field arrays are
+ *  loose-typed (renderer casts to `DetailField` on receipt) because
+ *  the preload tsconfig slice can't see the renderer's view types. */
 export interface PopupGlobalSettingsSnapshot {
-  overviewFields: Record<string, unknown>[]
+  generalFields: Record<string, unknown>[]
+  telemetryFields: Record<string, unknown>[]
+  desktopUpdateFields: Record<string, unknown>[]
   cacheFields: Record<string, unknown>[]
   advancedFields: Record<string, unknown>[]
   sharedDirectoriesFields: Record<string, unknown>[]
@@ -111,14 +106,12 @@ export interface PopupGlobalSettingsSnapshot {
     platform: NodeJS.Platform
     lastCheckedAt: number | null
   }
-  channelPickerField: Record<string, unknown> | null
-  activeInstallationId: string | null
-  hasActiveInstall: boolean
   githubUrl: string
+  githubStars: number | null
   i18n: {
     overview: string
     updates: string
-    cache: string
+    storage: string
     models: string
     advanced: string
     sharedDirectories: string
@@ -324,14 +317,6 @@ export interface ComfyTitlePopupBridge {
   /** Renderer mirrors `localStorage.lastCheckedAt` back to main so the
    *  next snapshot rebroadcast shows the freshest timestamp. */
   globalSettingsSetLastCheckedAt(value: number): void
-  /** ChannelPicker `@action` route. The IPC handler enforces the
-   *  allowlist (`copy-update | release-update | switch-channel |
-   *  update`); the popup just forwards whatever the picker emits. */
-  globalSettingsRunInstallAction(
-    installationId: string,
-    actionId: string,
-    actionData?: Record<string, unknown>,
-  ): Promise<{ ok: boolean; message?: string }>
 
   // ----- Per-install (ComfyUI) settings bridge -----
   //
@@ -425,20 +410,10 @@ export interface ComfyTitlePopupBridge {
    *  `diskSpace.*`, etc.). The popup merges this payload on top of its
    *  static catalog once the expanded mode opens. */
   pickerSettingsGetLocaleMessages(): Promise<Record<string, unknown>>
-  /** Flip the picker between its compact and expanded states. Main
-   *  animates the popup bounds (compact ~720×natural → expanded
-   *  ~95dvw×95dvh) and rebroadcasts a snapshot with `mode` set so the
-   *  picker view re-renders the right pane (compact identity card vs.
-   *  expanded `ComfyUISettingsContent`). */
-  setPickerMode(
-    mode: 'compact' | 'expanded',
-    opts?: { initialTab?: string; autoAction?: string | null },
-  ): void
   /** Forward a `show-progress` request from the picker's settings UI to
    *  the parent host's panel renderer. The panel rebuilds the apiCall
    *  closure from `actionId`/`actionData` and routes through its existing
-   *  ProgressModal pipeline. Picker collapses to compact so the modal is
-   *  not occluded. */
+   *  ProgressModal pipeline. */
   pickerForwardShowProgress(payload: {
     installationId: string
     actionId: string
@@ -477,7 +452,9 @@ function isPopupConfig(value: unknown): value is TitlePopupConfig {
 function isGlobalSettingsSnapshot(value: unknown): value is PopupGlobalSettingsSnapshot {
   if (!value || typeof value !== 'object') return false
   const v = value as Record<string, unknown>
-  if (!Array.isArray(v['overviewFields'])) return false
+  if (!Array.isArray(v['generalFields'])) return false
+  if (!Array.isArray(v['telemetryFields'])) return false
+  if (!Array.isArray(v['desktopUpdateFields'])) return false
   if (!Array.isArray(v['cacheFields'])) return false
   if (!Array.isArray(v['advancedFields'])) return false
   if (!Array.isArray(v['sharedDirectoriesFields'])) return false
@@ -526,10 +503,6 @@ function isInstancePickerSnapshot(value: unknown): value is PopupInstancePickerS
     && v.selectedSnapshots !== null
     && typeof v.selectedSnapshots !== 'object'
   ) return false
-  // Mode fields are also optional on the wire — old main builds that
-  // don't yet emit them still validate. Default to compact in the
-  // consumer when missing.
-  if (v.mode !== undefined && v.mode !== 'compact' && v.mode !== 'expanded') return false
   if (
     v.initialTab !== undefined
     && v.initialTab !== null
@@ -665,12 +638,6 @@ const bridge: ComfyTitlePopupBridge = {
   globalSettingsSetLastCheckedAt: (value) => {
     ipcRenderer.send('comfy-titlepopup:global-settings-set-last-checked', { value })
   },
-  globalSettingsRunInstallAction: (installationId, actionId, actionData) =>
-    ipcRenderer.invoke('comfy-titlepopup:global-settings-run-install-action', {
-      installationId,
-      actionId,
-      actionData,
-    }),
   // Per-install settings (picker expanded Manage). Each handler is a 1:1
   // pass-through to the main-side IPC. Channels namespaced `comfy-titlepopup:*`
   // so they don't collide with the panel's `window.api` IPCs.
@@ -718,13 +685,6 @@ const bridge: ComfyTitlePopupBridge = {
     ipcRenderer.send(CH.relaunchApp)
   },
   pickerSettingsGetLocaleMessages: () => ipcRenderer.invoke(CH.getLocaleMessages),
-  setPickerMode: (mode, opts) => {
-    ipcRenderer.send('comfy-titlepopup:set-picker-mode', {
-      mode,
-      initialTab: opts?.initialTab,
-      autoAction: opts?.autoAction ?? null,
-    })
-  },
   pickerForwardShowProgress: (payload) => {
     ipcRenderer.send('comfy-titlepopup:forward-show-progress', payload)
   },
diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index 491f4ff5..a49a21d1 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -46,7 +46,8 @@
   --color-surface: #262729;
   --color-border: #494a50;
   --color-border-hover: #3c3d42;
-  --color-danger: #b33a3a;
+  --color-danger: #e05858;
+  --color-danger-hover: #ef6b6b;
   --color-terminal-bg: #111112;
 
   /* Comfy brand neutral ramp — single canonical scale. Yellow at 50,
@@ -85,7 +86,8 @@
   --titlebar-icon: var(--color-text-muted);
   --border: #494a50;
   --border-hover: #3c3d42;
-  --danger: #b33a3a;
+  --danger: #e05858;
+  --danger-hover: #ef6b6b;
   --warning: #fd9903;
   --success: #00cd72;
   --info: #58a6ff;
@@ -150,6 +152,12 @@
     0 20px 24px -4px rgba(10, 13, 18, 0.4), 0 8px 8px -4px rgba(10, 13, 18, 0.25),
     0 3px 3px -1.5px rgba(10, 13, 18, 0.2);
 
+  /* Tooltip primitive */
+  --tooltip-bg: #211927;
+  --tooltip-border: #38303d;
+  --tooltip-fg: #ffffff;
+  --z-tooltip: 10001;
+
   /* Takeover fluid type + spacing — Utopia clamp, anchored 1024px → 1920px. */
   --takeover-fs-caption: clamp(0.75rem, 0.6071rem + 0.2232vw, 0.875rem); /* 12→14px */
   --takeover-fs-body: clamp(0.875rem, 0.7321rem + 0.2232vw, 1rem); /* 14→16px */
@@ -179,6 +187,7 @@
   --border: #b4b4b4;
   --border-hover: #d9d9d9;
   --danger: #f75951;
+  --danger-hover: #ff7a73;
   --warning: #fcbf64;
   --success: #00cd72;
   --info: #2563eb;
@@ -229,6 +238,12 @@
   --modal-surface-bg: #27202d;
   --modal-surface-border: var(--chooser-surface-border);
 
+  /* Tooltip primitive — mirror of dark-theme block until light parity. */
+  --tooltip-bg: #211927;
+  --tooltip-border: #38303d;
+  --tooltip-fg: #ffffff;
+  --z-tooltip: 10001;
+
   /* Takeover fluid type + spacing — mirror of dark-theme block. */
   --takeover-fs-caption: clamp(0.75rem, 0.6071rem + 0.2232vw, 0.875rem);
   --takeover-fs-body: clamp(0.875rem, 0.7321rem + 0.2232vw, 1rem);
@@ -727,8 +742,8 @@ button.brand-ghost:hover:not([disabled]) {
 .brand-checkbox input[type='checkbox'] {
   appearance: none;
   flex: 0 0 auto;
-  width: 18px;
-  height: 18px;
+  width: 14px;
+  height: 14px;
   margin: 4px 0 0 0;
   border: 1px solid var(--brand-surface-border-hover);
   border-radius: 4px;
diff --git a/src/renderer/src/comfyTitleBar/TitleBarApp.vue b/src/renderer/src/comfyTitleBar/TitleBarApp.vue
index 5fefaa4f..658399f6 100644
--- a/src/renderer/src/comfyTitleBar/TitleBarApp.vue
+++ b/src/renderer/src/comfyTitleBar/TitleBarApp.vue
@@ -8,7 +8,7 @@ import {
   Loader2,
   Menu as MenuIcon,
   MessageSquarePlus,
-  RefreshCw,
+  RefreshCw
 } from 'lucide-vue-next'
 import { useTitleBarTooltip } from './useTitleBarTooltip'
 import { useTitleBarMenus } from './useTitleBarMenus'
@@ -23,12 +23,7 @@ const { t } = useI18n()
 // file isn't visible to tsconfig.web (only its .d.ts would be). Kept in
 // sync with the literal union in src/preload/comfyTitleBarPreload.ts and
 // the ComfyPanelKey export in src/main/index.ts.
-type ComfyPanelKey =
-  | 'comfy'
-  | 'new-install'
-  | 'track'
-  | 'load-snapshot'
-  | 'quick-install'
+type ComfyPanelKey = 'comfy' | 'new-install' | 'track' | 'load-snapshot' | 'quick-install'
 
 /** Position passed to main so the native menu pops below the anchor button.
  *  Coordinates are in title-bar-local pixels — main translates to window
@@ -436,10 +431,7 @@ onUnmounted(() => {
           <ChevronDown :size="12" class="title-install-caret" aria-hidden="true" />
         </div>
       </button>
-      <div
-        v-else
-        class="title-install-pill"
-      >
+      <div v-else class="title-install-pill">
         <div class="title-install-slot title-install-slot--leading">
           <ComfyCLogo class="title-install-brand-mark" :size="16" />
         </div>
@@ -465,7 +457,7 @@ onUnmounted(() => {
            ComfyCLogo icon = ComfyUI core; CloudDownload icon = Desktop
            app. Same chrome (brand-yellow tint), different icons. -->
       <button
-        v-if="showInstallUpdatePill"
+        v-if="!isChromeLocked && showInstallUpdatePill"
         type="button"
         class="title-update-pill is-install-update"
         v-bind="tooltipAttrs(installUpdatePillLabel)"
@@ -475,7 +467,7 @@ onUnmounted(() => {
         <span class="title-update-pill-label">{{ installUpdatePillLabel }}</span>
       </button>
       <button
-        v-if="showAppUpdatePill"
+        v-if="!isChromeLocked && showAppUpdatePill"
         type="button"
         class="title-update-pill is-app-update"
         :class="{
@@ -524,16 +516,15 @@ onUnmounted(() => {
         @click="handleDownloadsTray"
       >
         <ArrowDownToLine :size="16" />
-        <span
-          v-if="downloadsActiveCount > 0"
-          class="title-downloads-badge"
-          aria-hidden="true"
-        >{{ downloadsActiveCount }}</span>
+        <span v-if="downloadsActiveCount > 0" class="title-downloads-badge" aria-hidden="true">{{
+          downloadsActiveCount
+        }}</span>
         <span
           v-else-if="unseenFinishedCount > 0"
           class="title-downloads-badge is-unseen"
           aria-hidden="true"
-        >{{ unseenFinishedCount }}</span>
+          >{{ unseenFinishedCount }}</span
+        >
       </button>
     </div>
   </header>
@@ -679,8 +670,7 @@ onUnmounted(() => {
   height: 28px;
   padding: 5px 8px;
   border-radius: 999px;
-  background: var(--brand-surface-bg);
-  border: 1px solid var(--neutral-100);
+  background: var(--chooser-surface-bg);
   color: var(--neutral-100);
   font: inherit;
   font-size: 12px;
diff --git a/src/renderer/src/comfyTitlePopup/GlobalSettingsView.test.ts b/src/renderer/src/comfyTitlePopup/GlobalSettingsView.test.ts
new file mode 100644
index 00000000..df974403
--- /dev/null
+++ b/src/renderer/src/comfyTitlePopup/GlobalSettingsView.test.ts
@@ -0,0 +1,155 @@
+import { describe, expect, it, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import { nextTick } from 'vue'
+
+import { en } from '../lib/i18nMessages.ts'
+import GlobalSettingsView from './GlobalSettingsView.vue'
+
+interface BridgeState {
+  updateFieldCalls: Array<{ id: string; value: unknown }>
+  setModelsDirsCalls: string[][]
+  openPathCalls: string[]
+  openExternalCalls: string[]
+  browseFolderReturn: string | null
+  checkForUpdateCalls: number
+  downloadUpdateCalls: number
+  installUpdateCalls: number
+  closeCalls: number
+}
+
+function installMockBridge(): BridgeState {
+  const state: BridgeState = {
+    updateFieldCalls: [],
+    setModelsDirsCalls: [],
+    openPathCalls: [],
+    openExternalCalls: [],
+    browseFolderReturn: null,
+    checkForUpdateCalls: 0,
+    downloadUpdateCalls: 0,
+    installUpdateCalls: 0,
+    closeCalls: 0,
+  }
+  const bridge = {
+    close: () => { state.closeCalls += 1 },
+    globalSettingsUpdateField: async (id: string, value: unknown) => {
+      state.updateFieldCalls.push({ id, value })
+      return { ok: true }
+    },
+    globalSettingsBrowseFolder: async () => state.browseFolderReturn,
+    globalSettingsOpenPath: (path: string) => { state.openPathCalls.push(path) },
+    globalSettingsOpenExternal: (url: string) => { state.openExternalCalls.push(url) },
+    globalSettingsSetModelsDirs: async (dirs: string[]) => {
+      state.setModelsDirsCalls.push([...dirs])
+      return { ok: true }
+    },
+    globalSettingsCheckForUpdate: async () => {
+      state.checkForUpdateCalls += 1
+      return { available: false }
+    },
+    globalSettingsDownloadUpdate: async () => { state.downloadUpdateCalls += 1 },
+    globalSettingsInstallUpdate: () => { state.installUpdateCalls += 1 },
+    globalSettingsSetLastCheckedAt: () => {},
+  }
+  ;(window as unknown as { __comfyTitlePopup: typeof bridge }).__comfyTitlePopup = bridge
+  return state
+}
+
+function makeI18n() {
+  return createI18n({ legacy: false, locale: 'en', messages: { en } })
+}
+
+function makeSnapshot(overrides: Partial<Record<string, unknown>> = {}) {
+  const base = {
+    generalFields: [
+      { id: 'language', label: 'Language', value: 'en', editable: true, editType: 'select', options: [{ value: 'en', label: 'English' }, { value: 'zh', label: '中文' }] },
+    ],
+    telemetryFields: [
+      { id: 'telemetryEnabled', label: 'Send anonymous telemetry', value: true, editable: true, editType: 'boolean' },
+    ],
+    desktopUpdateFields: [
+      { id: 'autoInstallUpdates', label: 'Auto install updates', value: true, editable: true, editType: 'boolean' },
+    ],
+    cacheFields: [],
+    advancedFields: [],
+    sharedDirectoriesFields: [],
+    modelsDirs: [
+      { path: '/home/u/ComfyUI/models', isPrimary: true, isDefault: true },
+      { path: '/mnt/extra/models', isPrimary: false, isDefault: false },
+    ],
+    modelsSystemDefault: '/home/u/ComfyUI/models',
+    appUpdate: {
+      state: { kind: null, version: null, autoUpdate: true },
+      progress: null,
+      isDownloading: false,
+      capabilities: { systemManaged: false, canSelfUpdate: true },
+      installedVersion: '1.2.3',
+      platform: 'darwin',
+      lastCheckedAt: null,
+    },
+    githubUrl: 'https://github.com/comfyanonymous/ComfyUI',
+    githubStars: 12345,
+    i18n: {
+      overview: 'General',
+      updates: 'Updates',
+      storage: 'Storage',
+      models: 'Models',
+      advanced: 'Advanced',
+      sharedDirectories: 'Shared directories',
+    },
+  }
+  return { ...base, ...overrides }
+}
+
+function mountView(snapshot = makeSnapshot()) {
+  return mount(GlobalSettingsView, {
+    props: { snapshot: snapshot as never },
+    global: { plugins: [makeI18n()] },
+    attachTo: document.body,
+  })
+}
+
+describe('GlobalSettingsView', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('renders the three tabs and the general tab is active by default', () => {
+    installMockBridge()
+    const wrapper = mountView()
+    const tabLabels = wrapper.findAll('.gs-tab').map((t) => t.text())
+    expect(tabLabels).toEqual(['General', 'Updates', 'Advanced'])
+  })
+
+  it('GitHub link card click routes through the bridge', async () => {
+    const bridge = installMockBridge()
+    const wrapper = mountView()
+    const link = wrapper.findComponent({ name: 'GitHubLinkCard' })
+    expect(link.exists()).toBe(true)
+    await link.trigger('click')
+    expect(bridge.openExternalCalls).toEqual(['https://github.com/comfyanonymous/ComfyUI'])
+  })
+
+  // Storage-tab coverage migrated to StoragePane.test.ts when the
+  // Storage tab moved from this popup into the Instance Picker.
+
+  it('close button routes to bridge.close', async () => {
+    const bridge = installMockBridge()
+    const wrapper = mountView()
+    await wrapper.find('.gs-close').trigger('click')
+    expect(bridge.closeCalls).toBe(1)
+  })
+
+  it('Updates tab routes Check for updates click through the bridge', async () => {
+    const bridge = installMockBridge()
+    const wrapper = mountView()
+    await wrapper.findAll('.gs-tab').find((t) => t.text() === 'Updates')!.trigger('click')
+    await nextTick()
+    const buttons = wrapper.findAll('button')
+    const checkBtn = buttons.find((b) => /check/i.test(b.text()))
+    expect(checkBtn, 'expected a "Check" CTA on idle state').toBeDefined()
+    await checkBtn!.trigger('click')
+    await flushPromises()
+    expect(bridge.checkForUpdateCalls).toBeGreaterThanOrEqual(1)
+  })
+})
diff --git a/src/renderer/src/comfyTitlePopup/GlobalSettingsView.vue b/src/renderer/src/comfyTitlePopup/GlobalSettingsView.vue
index ee363db0..87c55184 100644
--- a/src/renderer/src/comfyTitlePopup/GlobalSettingsView.vue
+++ b/src/renderer/src/comfyTitlePopup/GlobalSettingsView.vue
@@ -1,21 +1,13 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, type Component } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import {
-  Github,
-  HardDrive,
-  Plus,
-  RefreshCcw,
-  Settings2,
-  SlidersHorizontal,
-  Star,
-  X
-} from 'lucide-vue-next'
+import { RefreshCcw, Settings2, SlidersHorizontal, X } from 'lucide-vue-next'
 import UpdatesSection from './globalSettings/UpdatesSection.vue'
+import GlobalSettingsMicroSection from './globalSettings/GlobalSettingsMicroSection.vue'
+import GitHubLinkCard from './globalSettings/GitHubLinkCard.vue'
 import SettingsSectionList from '../views/comfyUISettings/SettingsSectionList.vue'
-import DirCard from '../components/DirCard.vue'
+import { withMinDuration } from '../lib/uiTiming'
 import type {
-  ActionDef,
   AppUpdateDownloadProgress,
   AppUpdateState,
   DetailField,
@@ -23,16 +15,11 @@ import type {
 } from '../types/ipc'
 
 /**
- * Global Settings popup view — two-pane tabbed card.
+ * Global Settings popup view — two-pane tabbed card (desktop-only).
  *
  * Receives a `snapshot` prop built main-side by `buildGlobalSettingsSnapshot`
  * in `src/main/popups/titlePopup.ts` and dispatches mutations through
- * `window.__comfyTitlePopup`. The popup renderer does NOT have
- * `window.api` — every mutation is a bridge method.
- *
- * The popup itself is sized once main-side from host content bounds
- * (fluid clamp on width + height); the right pane scrolls when its
- * content overflows so switching tabs never resizes the popup.
+ * `window.__comfyTitlePopup`.
  */
 
 interface ModelsDir {
@@ -42,9 +29,14 @@ interface ModelsDir {
 }
 
 interface Snapshot {
-  overviewFields: Record<string, unknown>[]
+  generalFields: Record<string, unknown>[]
+  telemetryFields: Record<string, unknown>[]
+  desktopUpdateFields: Record<string, unknown>[]
   cacheFields: Record<string, unknown>[]
   advancedFields: Record<string, unknown>[]
+  // TODO(brand-cleanup): Storage tab moved to instance-picker (see
+  // StoragePane.vue). Main still emits these for back-compat; remove
+  // once the snapshot builder in titlePopup.ts drops them.
   sharedDirectoriesFields: Record<string, unknown>[]
   modelsDirs: ModelsDir[]
   modelsSystemDefault: string
@@ -57,15 +49,14 @@ interface Snapshot {
     platform: string
     lastCheckedAt: number | null
   }
-  channelPickerField: Record<string, unknown> | null
-  activeInstallationId: string | null
-  hasActiveInstall: boolean
   githubUrl: string
   githubStars: number | null
   i18n: {
     overview: string
     updates: string
-    cache: string
+    // TODO(brand-cleanup): consumed by StoragePane via useI18n now;
+    // keep here until main-side snapshot stops emitting them.
+    storage: string
     models: string
     advanced: string
     sharedDirectories: string
@@ -86,11 +77,6 @@ interface GlobalSettingsBridge {
   globalSettingsDownloadUpdate(): Promise<void>
   globalSettingsInstallUpdate(): void
   globalSettingsSetLastCheckedAt(value: number): void
-  globalSettingsRunInstallAction(
-    installationId: string,
-    actionId: string,
-    actionData?: Record<string, unknown>
-  ): Promise<{ ok: boolean; message?: string }>
 }
 
 const props = defineProps<{ snapshot: Snapshot }>()
@@ -99,53 +85,36 @@ const bridge = (window as unknown as { __comfyTitlePopup?: GlobalSettingsBridge
 
 const LAST_CHECKED_KEY = 'globalSettings.lastCheckedAt'
 
-type TabId = 'general' | 'updates' | 'cache' | 'storage' | 'advanced'
+type TabId = 'general' | 'updates' | 'advanced'
 const activeTab = ref<TabId>('general')
 
-const tabs = computed<{ id: TabId; label: string; icon: Component }[]>(() => [
-  { id: 'general', label: props.snapshot.i18n.overview, icon: Settings2 },
-  { id: 'updates', label: props.snapshot.i18n.updates, icon: RefreshCcw },
-  { id: 'cache', label: props.snapshot.i18n.cache, icon: HardDrive },
-  { id: 'storage', label: props.snapshot.i18n.models, icon: HardDrive },
-  { id: 'advanced', label: props.snapshot.i18n.advanced, icon: SlidersHorizontal }
+const tabs = computed(() => [
+  { id: 'general' as const, label: props.snapshot.i18n.overview, icon: Settings2 },
+  { id: 'updates' as const, label: props.snapshot.i18n.updates, icon: RefreshCcw },
+  { id: 'advanced' as const, label: props.snapshot.i18n.advanced, icon: SlidersHorizontal }
 ])
 
-const overviewSections = computed<DetailSection[]>(() => [
-  {
-    fields: props.snapshot.overviewFields as unknown as DetailField[]
-  }
+const generalSections = computed<DetailSection[]>(() => [
+  { fields: props.snapshot.generalFields as unknown as DetailField[] }
 ])
+const telemetrySections = computed<DetailSection[]>(() => [
+  { fields: props.snapshot.telemetryFields as unknown as DetailField[] }
+])
+const desktopUpdatePreferenceFields = computed<DetailField[]>(
+  () => props.snapshot.desktopUpdateFields as unknown as DetailField[]
+)
 const cacheSections = computed<DetailSection[]>(() => [
-  {
-    fields: props.snapshot.cacheFields as unknown as DetailField[]
-  }
+  { fields: props.snapshot.cacheFields as unknown as DetailField[] }
 ])
 const advancedSections = computed<DetailSection[]>(() => [
-  {
-    fields: props.snapshot.advancedFields as unknown as DetailField[]
-  }
-])
-const sharedDirsSections = computed<DetailSection[]>(() => [
-  {
-    fields: props.snapshot.sharedDirectoriesFields as unknown as DetailField[]
-  }
+  { fields: props.snapshot.advancedFields as unknown as DetailField[] }
 ])
-const channelPickerField = computed<DetailField | null>(
-  () => props.snapshot.channelPickerField as unknown as DetailField | null
-)
 const appUpdateState = computed<AppUpdateState>(
   () => props.snapshot.appUpdate.state as unknown as AppUpdateState
 )
 const appUpdateProgress = computed<AppUpdateDownloadProgress | null>(
   () => props.snapshot.appUpdate.progress as unknown as AppUpdateDownloadProgress | null
 )
-const platformLabel = computed(() => {
-  const p = props.snapshot.appUpdate.platform
-  if (p === 'darwin') return 'macOS'
-  if (p === 'win32') return 'Windows'
-  if (p === 'linux') return 'Linux'
-  return p
-})
 
 async function handleUpdateField(field: DetailField, value: unknown): Promise<void> {
   await bridge?.globalSettingsUpdateField(field.id, value)
@@ -156,41 +125,6 @@ function handleOpenExternal(url: string): void {
   bridge?.globalSettingsOpenExternal(url)
 }
 
-const starCountLabel = computed(() => {
-  const n = props.snapshot.githubStars
-  if (n == null) return ''
-  return new Intl.NumberFormat(undefined, {
-    notation: 'compact',
-    maximumFractionDigits: 1
-  }).format(n)
-})
-
-async function handleAddModelsDir(): Promise<void> {
-  const picked = await bridge?.globalSettingsBrowseFolder()
-  if (!picked) return
-  const dirs = props.snapshot.modelsDirs.map((d) => d.path)
-  dirs.push(picked)
-  await bridge?.globalSettingsSetModelsDirs(dirs)
-}
-
-async function handleRemoveModelsDir(index: number): Promise<void> {
-  const dirs = props.snapshot.modelsDirs.map((d) => d.path)
-  dirs.splice(index, 1)
-  await bridge?.globalSettingsSetModelsDirs(dirs)
-}
-
-async function handleMakePrimary(index: number): Promise<void> {
-  const dirs = props.snapshot.modelsDirs.map((d) => d.path)
-  const moved = dirs.splice(index, 1)[0]
-  if (typeof moved !== 'string') return
-  dirs.unshift(moved)
-  await bridge?.globalSettingsSetModelsDirs(dirs)
-}
-
-function handleOpenModelsDir(path: string): void {
-  bridge?.globalSettingsOpenPath(path)
-}
-
 async function handleUpdateNow(): Promise<void> {
   const kind = (appUpdateState.value as AppUpdateState).kind
   if (kind === 'ready') {
@@ -204,9 +138,17 @@ async function handleUpdateNow(): Promise<void> {
   await handleCheckForUpdate()
 }
 
+const isChecking = ref(false)
+
 async function handleCheckForUpdate(): Promise<void> {
+  isChecking.value = true
   try {
-    await bridge?.globalSettingsCheckForUpdate()
+    // `withMinDuration` floors the busy state so a sub-frame backend
+    // response (e.g. dev-mode no-op, up-to-date short-circuit) still
+    // flashes the "Checking…" label long enough to feel acknowledged.
+    await withMinDuration(async () => {
+      await bridge?.globalSettingsCheckForUpdate()
+    })
   } finally {
     const now = Date.now()
     try {
@@ -215,23 +157,14 @@ async function handleCheckForUpdate(): Promise<void> {
       /* noop */
     }
     bridge?.globalSettingsSetLastCheckedAt(now)
+    isChecking.value = false
   }
 }
 
-async function handleRunInstallAction(action: ActionDef): Promise<void> {
-  const id = props.snapshot.activeInstallationId
-  if (!id) return
-  await bridge?.globalSettingsRunInstallAction(
-    id,
-    action.id,
-    action.data as Record<string, unknown> | undefined
-  )
-}
-
 function handleTabKey(event: KeyboardEvent): void {
   if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
   event.preventDefault()
-  const ids = tabs.value.map((t) => t.id)
+  const ids = tabs.value.map((tab) => tab.id)
   const idx = ids.indexOf(activeTab.value)
   const next =
     event.key === 'ArrowDown' ? (idx + 1) % ids.length : (idx - 1 + ids.length) % ids.length
@@ -239,9 +172,6 @@ function handleTabKey(event: KeyboardEvent): void {
 }
 
 onMounted(() => {
-  // Last-checked back-fill: if main's snapshot has no lastCheckedAt but
-  // localStorage does, push the localStorage value to main so the next
-  // snapshot rebroadcast shows the correct timestamp.
   if (!props.snapshot.appUpdate.lastCheckedAt) {
     try {
       const raw = window.localStorage.getItem(LAST_CHECKED_KEY)
@@ -297,23 +227,21 @@ onMounted(() => {
         :aria-labelledby="`gs-tab-${activeTab}`"
       >
         <template v-if="activeTab === 'general'">
-          <SettingsSectionList :sections="overviewSections" @update-field="handleUpdateField" />
-          <div class="gs-github-row">
-            <button type="button" class="gs-github" @click="handleOpenExternal(snapshot.githubUrl)">
-              <Github :size="14" aria-hidden="true" />
-              <span>GitHub</span>
-            </button>
-            <button
-              v-if="snapshot.githubStars != null"
-              type="button"
-              class="gs-github-stars"
-              :aria-label="`${snapshot.githubStars} GitHub stars`"
-              @click="handleOpenExternal(snapshot.githubUrl)"
-            >
-              <Star :size="12" class="gs-github-stars-icon" aria-hidden="true" />
-              <span>{{ starCountLabel }}</span>
-            </button>
-          </div>
+          <GlobalSettingsMicroSection :title="t('settings.preferences', 'Preferences')">
+            <SettingsSectionList :sections="generalSections" @update-field="handleUpdateField" />
+          </GlobalSettingsMicroSection>
+
+          <GlobalSettingsMicroSection :title="t('settings.privacy', 'Privacy')">
+            <SettingsSectionList :sections="telemetrySections" @update-field="handleUpdateField" />
+          </GlobalSettingsMicroSection>
+
+          <GlobalSettingsMicroSection :title="t('settings.community', 'Community')">
+            <GitHubLinkCard
+              :url="snapshot.githubUrl"
+              :stars="snapshot.githubStars"
+              @open="handleOpenExternal"
+            />
+          </GlobalSettingsMicroSection>
         </template>
 
         <template v-else-if="activeTab === 'updates'">
@@ -321,49 +249,25 @@ onMounted(() => {
             :state="appUpdateState"
             :progress="appUpdateProgress"
             :is-downloading="snapshot.appUpdate.isDownloading"
-            :checking="false"
+            :checking="isChecking"
             :last-checked-at="snapshot.appUpdate.lastCheckedAt"
             :installed-version="snapshot.appUpdate.installedVersion"
-            :platform-label="platformLabel"
-            :channel-picker-field="channelPickerField"
+            :system-managed="snapshot.appUpdate.capabilities.systemManaged"
+            :preference-fields="desktopUpdatePreferenceFields"
             @update-now="handleUpdateNow"
             @check-for-update="handleCheckForUpdate"
-            @install-action="handleRunInstallAction"
+            @update-field="handleUpdateField"
           />
         </template>
 
-        <template v-else-if="activeTab === 'cache'">
-          <SettingsSectionList :sections="cacheSections" @update-field="handleUpdateField" />
-        </template>
-
-        <template v-else-if="activeTab === 'storage'">
-          <div class="gs-subgroup">
-            <div class="gs-subgroup-title">{{ snapshot.i18n.models }}</div>
-            <div class="gs-models">
-              <DirCard
-                v-for="(d, i) in snapshot.modelsDirs"
-                :key="d.path"
-                :path="d.path"
-                :is-primary="d.isPrimary"
-                :is-default="d.isDefault"
-                @open="handleOpenModelsDir(d.path)"
-                @remove="handleRemoveModelsDir(i)"
-                @make-primary="handleMakePrimary(i)"
-              />
-              <button type="button" class="gs-add-dir" @click="handleAddModelsDir">
-                <Plus :size="14" aria-hidden="true" />
-                <span>{{ t('models.addDir', 'Add directory') }}</span>
-              </button>
-            </div>
-          </div>
-          <div class="gs-subgroup">
-            <div class="gs-subgroup-title">{{ snapshot.i18n.sharedDirectories }}</div>
-            <SettingsSectionList :sections="sharedDirsSections" @update-field="handleUpdateField" />
-          </div>
-        </template>
-
         <template v-else>
-          <SettingsSectionList :sections="advancedSections" @update-field="handleUpdateField" />
+          <GlobalSettingsMicroSection :title="snapshot.i18n.advanced">
+            <SettingsSectionList :sections="advancedSections" @update-field="handleUpdateField" />
+          </GlobalSettingsMicroSection>
+
+          <GlobalSettingsMicroSection :title="t('settings.cache', 'Cache')">
+            <SettingsSectionList :sections="cacheSections" @update-field="handleUpdateField" />
+          </GlobalSettingsMicroSection>
         </template>
       </section>
     </div>
@@ -484,115 +388,9 @@ onMounted(() => {
   padding: 16px 20px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
-}
-
-.gs-github-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding-top: 4px;
-}
-
-.gs-github {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--neutral-100);
-  opacity: 0.67;
-  font-size: 12px;
-  cursor: pointer;
-  transition: opacity 100ms ease;
-}
-
-.gs-github:hover,
-.gs-github:focus-visible {
-  opacity: 1;
-  outline: none;
-}
-
-.gs-github-stars {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border: 1px solid color-mix(in oklab, var(--neutral-100) 14%, transparent);
-  border-radius: 999px;
-  background: color-mix(in oklab, var(--neutral-100) 4%, transparent);
-  color: var(--neutral-100);
-  opacity: 0.78;
-  font-size: 11px;
-  font-variant-numeric: tabular-nums;
-  cursor: pointer;
-  transition: opacity 100ms ease, background 100ms ease;
-}
-
-.gs-github-stars:hover,
-.gs-github-stars:focus-visible {
-  opacity: 1;
-  background: color-mix(in oklab, var(--neutral-100) 8%, transparent);
-  outline: none;
-}
-
-.gs-github-stars-icon {
-  color: var(--warning, #e3b341);
-  fill: currentColor;
-}
-
-.gs-subgroup {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.gs-subgroup + .gs-subgroup {
-  padding-top: 12px;
-  border-top: 1px solid color-mix(in oklab, var(--neutral-100) 8%, transparent);
-}
-
-.gs-subgroup-title {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: rgba(194, 191, 185, 0.75);
-}
-
-.gs-models {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.gs-add-dir {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  border: 1px dashed color-mix(in oklab, var(--neutral-100) 18%, transparent);
-  background: transparent;
-  border-radius: 8px;
-  color: var(--neutral-100);
-  cursor: pointer;
-  align-self: flex-start;
-  transition: background-color 100ms ease;
-}
-
-.gs-add-dir:hover,
-.gs-add-dir:focus-visible {
-  background: var(--brand-surface-bg-hover);
-  outline: none;
-}
-
-.global-settings :deep(.settings-v2-field) {
-  gap: 4px;
+  gap: 20px;
 }
 
-/* Density bump for the popup — slightly tighter input chrome than the
- * default `BaseInput` / `BaseSelect` so the two-pane card stays
- * compact. Label + field text colors come from the base components. */
 .global-settings :deep(.ui-input),
 .global-settings :deep(.ui-select-trigger) {
   min-height: 28px;
diff --git a/src/renderer/src/comfyTitlePopup/InstancePickerView.test.ts b/src/renderer/src/comfyTitlePopup/InstancePickerView.test.ts
index 23a5cd54..50b8429a 100644
--- a/src/renderer/src/comfyTitlePopup/InstancePickerView.test.ts
+++ b/src/renderer/src/comfyTitlePopup/InstancePickerView.test.ts
@@ -6,7 +6,6 @@ import { createPinia, setActivePinia } from 'pinia'
 import { en } from '../lib/i18nMessages.ts'
 import type { SnapshotListData } from '../types/ipc'
 
-/** Minimal list payload — main always sends this for local installs; cloud omits it. */
 const emptySnapshotListPayload: SnapshotListData = {
   snapshots: [],
   copyEvents: [],
@@ -19,26 +18,20 @@ const emptySnapshotListPayload: SnapshotListData = {
   },
 }
 
-  // `useInstallContextMenu` (used by the picker for kebab dispatch)
-  // reaches into the panel renderer's session + progress stores; both
-  // subscribe to `window.api.*` listeners at construction time, so the
-  // popup-side tests need at least the listener-registration shape
-  // exposed before the stores are instantiated.
   ; (window as unknown as { api: Record<string, unknown> }).api = {
     onErrorDetail: vi.fn(() => () => { }),
     onInstanceStarted: vi.fn(() => () => { }),
     onInstanceStopped: vi.fn(() => () => { }),
     onInstanceProgress: vi.fn(() => () => { }),
     onSessionStateChanged: vi.fn(() => () => { }),
+    getDetailSections: vi.fn().mockResolvedValue([]),
+    getDiskSpace: vi.fn().mockResolvedValue(null),
+    getInstallationSize: vi.fn().mockResolvedValue({ sizeBytes: 0 }),
   }
 
 /**
- * Component tests for the instance-picker popover view. Compact mode
- * is a single-column list of self-contained PickerRow cards; expanded
- * mode mounts ComfyUISettingsContent in a list-left + settings-right
- * split. Tests below cover the compact-mode contract — each row is
- * its own affordance with Open + Manage CTAs and the picker dispatches
- * the right bridge IPC for each click.
+ * Component tests for the instance-picker popover view. Always renders
+ * the master–detail split: list-left + settings-right.
  */
 
 interface MockInstall {
@@ -60,7 +53,6 @@ interface MockSnapshot {
   selectedInstallationId?: string | null
   selectedSettings?: unknown[] | null
   selectedSnapshots?: unknown | null
-  mode?: 'compact' | 'expanded'
 }
 
 interface BridgeState {
@@ -70,7 +62,6 @@ interface BridgeState {
   selectedInstallSets: (string | null)[]
   updateFieldCalls: { installationId: string; fieldId: string; value: unknown }[]
   runActionCalls: { installationId: string; actionId: string; actionData?: unknown }[]
-  setPickerModeCalls: { mode: 'compact' | 'expanded'; opts?: unknown }[]
 }
 
 function installMockBridge(): BridgeState {
@@ -81,7 +72,6 @@ function installMockBridge(): BridgeState {
     selectedInstallSets: [],
     updateFieldCalls: [],
     runActionCalls: [],
-    setPickerModeCalls: [],
   }
   const bridge = {
     pickInstall: (id: string) => {
@@ -109,12 +99,9 @@ function installMockBridge(): BridgeState {
         return { ok: true }
       },
     ),
-    setPickerMode: (mode: 'compact' | 'expanded', opts?: unknown) => {
-      state.setPickerModeCalls.push({ mode, opts })
-    },
     pickerSettingsGetLocaleMessages: vi.fn(async () => ({})),
   }
-  ;(window as unknown as { __comfyTitlePopup: typeof bridge }).__comfyTitlePopup = bridge
+    ; (window as unknown as { __comfyTitlePopup: typeof bridge }).__comfyTitlePopup = bridge
   return state
 }
 
@@ -131,21 +118,22 @@ function makeInstall(overrides: Partial<MockInstall>): MockInstall {
 async function mountPicker(snapshot: MockSnapshot) {
   const i18n = createI18n({ legacy: false, locale: 'en', messages: { en } })
   const pinia = createPinia()
-  // Dynamic import so the bridge mock is installed (in `beforeEach`)
-  // before the component touches `window.__comfyTitlePopup` — same
-  // convention DownloadsView's test uses.
   const { default: InstancePickerView } = await import('./InstancePickerView.vue')
-  // Fill in the new snapshot fields with safe defaults — tests that
-  // exercise expanded mode pass `mode: 'expanded'` explicitly.
   const enriched = {
     selectedInstallationId: snapshot.activeInstallationId,
     selectedSettings: null,
-    selectedSnapshots: null,
-    mode: 'compact' as const,
+    selectedSnapshots: emptySnapshotListPayload,
     ...snapshot,
   }
   return mount(InstancePickerView, {
-    props: { snapshot: enriched },
+    props: {
+      snapshot: enriched,
+      globalSettingsSnapshot: {
+        sharedDirectoriesFields: [],
+        modelsDirs: [],
+        modelsSystemDefault: '',
+      },
+    },
     global: { plugins: [i18n, pinia] },
   })
 }
@@ -159,7 +147,7 @@ describe('comfyTitlePopup/InstancePickerView', () => {
   })
 
   describe('structural shell', () => {
-    it('renders the search input, chip row, and rows pane', async () => {
+    it('renders the search input, chip row, and split panes', async () => {
       const wrapper = await mountPicker({
         installs: [],
         activeInstallationId: null,
@@ -167,16 +155,17 @@ describe('comfyTitlePopup/InstancePickerView', () => {
       })
       expect(wrapper.find('.picker-search input').exists()).toBe(true)
       expect(wrapper.findAll('.picker-chip').length).toBeGreaterThan(0)
-      expect(wrapper.find('.picker-rows').exists()).toBe(true)
+      expect(wrapper.find('.picker-list').exists()).toBe(true)
+      expect(wrapper.find('.picker-detail-wrap.is-expanded').exists()).toBe(true)
     })
 
-    it('renders the "+ New Instance" CTA at the bottom of compact mode', async () => {
+    it('renders the "+ New Instance" CTA in the left footer', async () => {
       const wrapper = await mountPicker({
         installs: [makeInstall({ id: 'a', name: 'Alpha' })],
         activeInstallationId: null,
         runningInstallationIds: [],
       })
-      const newInstall = wrapper.find('.picker-new-install-row')
+      const newInstall = wrapper.find('.picker-new-install')
       expect(newInstall.exists()).toBe(true)
     })
   })
@@ -193,7 +182,7 @@ describe('comfyTitlePopup/InstancePickerView', () => {
         runningInstallationIds: [],
       })
       const namesInOrder = wrapper
-        .findAll('.picker-row-card-name')
+        .findAll('.picker-row-name')
         .map((n) => n.text())
       expect(namesInOrder).toEqual(['New', 'Old', 'Never'])
     })
@@ -207,130 +196,125 @@ describe('comfyTitlePopup/InstancePickerView', () => {
         activeInstallationId: null,
         runningInstallationIds: ['a'],
       })
-      const cards = wrapper.findAll('.picker-row-card')
-      const alphaCard = cards.find((c) => c.text().includes('Alpha'))
-      expect(alphaCard!.classes()).toContain('is-running')
+      const rows = wrapper.findAll('.picker-row')
+      const alphaRow = rows.find((c) => c.text().includes('Alpha'))
+      expect(alphaRow!.classes()).toContain('is-running')
     })
 
-    it('renders Open + Manage CTAs on every row', async () => {
+    it('selects a row on click without launching', async () => {
       const wrapper = await mountPicker({
         installs: [
           makeInstall({ id: 'a', name: 'Alpha' }),
           makeInstall({ id: 'b', name: 'Bravo' }),
         ],
-        activeInstallationId: null,
+        activeInstallationId: 'a',
         runningInstallationIds: [],
       })
-      const opens = wrapper.findAll('.picker-row-card-open')
-      const manages = wrapper.findAll('.picker-row-card-manage')
-      expect(opens.length).toBe(2)
-      expect(manages.length).toBe(2)
+      const bravoRow = wrapper.findAll('.picker-row').find((c) => c.text().includes('Bravo'))
+      await bravoRow!.trigger('click')
+      await flushPromises()
+      expect(bridge.picks).toEqual([])
+      expect(bridge.selectedInstallSets.at(-1)).toBe('b')
     })
 
-    it('shows the source-label and version pills on each row', async () => {
+    // Spec item 2 — "Xh ago" recency is replaced by a "Current" pill on
+    // the install whose host window opened the picker (NOT just the
+    // selected row). Other rows keep their recency labels.
+    it('renders the Current pill on the active-host install and only there', async () => {
       const wrapper = await mountPicker({
         installs: [
-          makeInstall({
-            id: 'a',
-            name: 'Alpha',
-            version: 'v0.20.2+57',
-            sourceLabel: 'GitHub',
-          }),
+          makeInstall({ id: 'a', name: 'Alpha', lastLaunchedAt: Date.now() - 60_000 }),
+          makeInstall({ id: 'b', name: 'Bravo', lastLaunchedAt: Date.now() - 3_600_000 }),
         ],
-        activeInstallationId: null,
+        activeInstallationId: 'a',
         runningInstallationIds: [],
       })
-      const card = wrapper.find('.picker-row-card')
-      expect(card.text()).toContain('Alpha')
-      expect(card.text()).toContain('GitHub')
-      expect(card.text()).toContain('v0.20.2+57')
-      expect(card.text()).not.toContain('vv0.20.2+57')
+      const rows = wrapper.findAll('.picker-row')
+      const alphaRow = rows.find((c) => c.text().includes('Alpha'))!
+      const bravoRow = rows.find((c) => c.text().includes('Bravo'))!
+      expect(alphaRow.find('.picker-row-current-pill').exists()).toBe(true)
+      expect(alphaRow.find('.picker-row-recency').exists()).toBe(false)
+      expect(bravoRow.find('.picker-row-current-pill').exists()).toBe(false)
+      expect(bravoRow.find('.picker-row-recency').exists()).toBe(true)
     })
 
-    it('renders the backend version payload verbatim without re-prefixing', async () => {
+    // Spec item 6 — update-available paints the dot orange (overrides
+    // the green running dot when both apply, since update is the more
+    // actionable signal).
+    it('paints the row dot orange when update available, including when also running', async () => {
       const wrapper = await mountPicker({
         installs: [
-          makeInstall({ id: 'a', name: 'Alpha', version: 'v0.21.1' }),
+          makeInstall({
+            id: 'a',
+            name: 'Alpha',
+            statusTag: { style: 'update', label: 'Update' },
+          }),
+          makeInstall({ id: 'b', name: 'Bravo' }),
         ],
         activeInstallationId: null,
-        runningInstallationIds: [],
+        runningInstallationIds: ['a'],
       })
-      const card = wrapper.find('.picker-row-card')
-      expect(card.text()).toContain('v0.21.1')
-      expect(card.text()).not.toContain('vv0.21.1')
+      const rows = wrapper.findAll('.picker-row')
+      const alphaRow = rows.find((c) => c.text().includes('Alpha'))!
+      // Orange takes precedence: orange present, green absent on the
+      // same row even though it's also running.
+      expect(alphaRow.find('.picker-row-update-dot').exists()).toBe(true)
+      expect(alphaRow.find('.picker-row-running-dot').exists()).toBe(false)
+      const bravoRow = rows.find((c) => c.text().includes('Bravo'))!
+      expect(bravoRow.find('.picker-row-update-dot').exists()).toBe(false)
+      expect(bravoRow.find('.picker-row-running-dot').exists()).toBe(false)
     })
   })
 
-  describe('user actions', () => {
-    it('dispatches openNewInstall when the New Install row is clicked', async () => {
-      const wrapper = await mountPicker({
-        installs: [],
-        activeInstallationId: null,
-        runningInstallationIds: [],
-      })
-      const newInstallRow = wrapper.find('.picker-new-install-row')
-      await newInstallRow.trigger('click')
-      expect(bridge.newInstallCount).toBe(1)
-    })
-
-    it('dispatches pickInstall when a row\'s Open button is clicked', async () => {
-      const wrapper = await mountPicker({
+  // Spec item 10 — Home icon in the chips row dispatches the existing
+  // `return-to-dashboard` menu-item activation through the popup
+  // bridge. Only surfaces on install-hosted pickers, not on the
+  // dashboard chooser's own picker.
+  describe('home icon', () => {
+    it('renders Home only when the picker is hosted by an install', async () => {
+      const installHost = await mountPicker({
         installs: [makeInstall({ id: 'a', name: 'Alpha' })],
         activeInstallationId: 'a',
         runningInstallationIds: [],
       })
-      const openButton = wrapper.find('.picker-row-card-open')
-      expect(openButton.exists()).toBe(true)
-      await openButton.trigger('click')
-      expect(bridge.picks).toEqual(['a'])
-      expect(bridge.restarts).toEqual([])
-    })
+      expect(installHost.find('.picker-home').exists()).toBe(true)
 
-    it('switches a row\'s primary CTA to "Restart" when the install is running', async () => {
-      // Clicking Open on a running install would be a no-op visually
-      // (main just refocuses the existing window), so the per-row CTA
-      // flips to Restart and dispatches the restart flow.
-      const wrapper = await mountPicker({
+      const chooserHost = await mountPicker({
         installs: [makeInstall({ id: 'a', name: 'Alpha' })],
-        activeInstallationId: 'a',
-        runningInstallationIds: ['a'],
+        activeInstallationId: null,
+        runningInstallationIds: [],
       })
-      const openButton = wrapper.find('.picker-row-card-open')
-      expect(openButton.text()).toBe('Restart')
-      await openButton.trigger('click')
-      expect(bridge.restarts).toEqual(['a'])
-      expect(bridge.picks).toEqual([])
+      expect(chooserHost.find('.picker-home').exists()).toBe(false)
     })
 
-    it('keeps the primary CTA as "Open" for non-running rows', async () => {
+    it('routes Home clicks through bridge.activate("return-to-dashboard")', async () => {
+      const activate = vi.fn()
+      const existing = (window as unknown as { __comfyTitlePopup: Record<string, unknown> })
+        .__comfyTitlePopup
+      ;(window as unknown as { __comfyTitlePopup: Record<string, unknown> }).__comfyTitlePopup = {
+        ...existing,
+        activate,
+      }
       const wrapper = await mountPicker({
-        installs: [
-          makeInstall({ id: 'a', name: 'Alpha' }),
-          makeInstall({ id: 'b', name: 'Bravo' }),
-        ],
+        installs: [makeInstall({ id: 'a', name: 'Alpha' })],
         activeInstallationId: 'a',
-        runningInstallationIds: ['b'],
+        runningInstallationIds: [],
       })
-      // Alpha is not running — its Open button should read "Open".
-      const cards = wrapper.findAll('.picker-row-card')
-      const alphaCard = cards.find((c) => c.text().includes('Alpha'))
-      expect(alphaCard!.find('.picker-row-card-open').text()).toBe('Open')
+      await wrapper.find('.picker-home').trigger('click')
+      expect(activate).toHaveBeenCalledWith('return-to-dashboard')
     })
+  })
 
-    it('dispatches setPickerMode("expanded") with config tab when Manage is clicked', async () => {
+  describe('user actions', () => {
+    it('dispatches openNewInstall when the New Instance button is clicked', async () => {
       const wrapper = await mountPicker({
-        installs: [makeInstall({ id: 'a', name: 'Alpha' })],
-        activeInstallationId: 'a',
+        installs: [],
+        activeInstallationId: null,
         runningInstallationIds: [],
       })
-      const manageButton = wrapper.find('.picker-row-card-manage')
-      await manageButton.trigger('click')
-      await flushPromises()
-      expect(bridge.setPickerModeCalls.length).toBe(1)
-      expect(bridge.setPickerModeCalls[0]).toEqual({
-        mode: 'expanded',
-        opts: { initialTab: 'config' },
-      })
+      const newInstallRow = wrapper.find('.picker-new-install')
+      await newInstallRow.trigger('click')
+      expect(bridge.newInstallCount).toBe(1)
     })
 
     it('filters install rows by search query', async () => {
@@ -345,9 +329,9 @@ describe('comfyTitlePopup/InstancePickerView', () => {
       const input = wrapper.find('.picker-search input')
       await input.setValue('alph')
       await flushPromises()
-      const cards = wrapper.findAll('.picker-row-card')
-      expect(cards.length).toBe(1)
-      expect(cards[0]!.text()).toContain('Alpha')
+      const rows = wrapper.findAll('.picker-row')
+      expect(rows.length).toBe(1)
+      expect(rows[0]!.text()).toContain('Alpha')
     })
 
     it('switches visible rows when a non-all filter chip is activated', async () => {
@@ -363,9 +347,9 @@ describe('comfyTitlePopup/InstancePickerView', () => {
       const remoteChip = chips.find((c) => c.text() === 'Remote')
       expect(remoteChip).toBeTruthy()
       await remoteChip!.trigger('click')
-      const cards = wrapper.findAll('.picker-row-card')
-      expect(cards.length).toBe(1)
-      expect(cards[0]!.text()).toContain('RemoteThing')
+      const rows = wrapper.findAll('.picker-row')
+      expect(rows.length).toBe(1)
+      expect(rows[0]!.text()).toContain('RemoteThing')
     })
 
     it('shows the empty-state hint when no rows match', async () => {
@@ -377,34 +361,40 @@ describe('comfyTitlePopup/InstancePickerView', () => {
       const input = wrapper.find('.picker-search input')
       await input.setValue('zzzz-no-match')
       await flushPromises()
-      expect(wrapper.find('.picker-rows-empty').exists()).toBe(true)
+      expect(wrapper.find('.picker-list-empty').exists()).toBe(true)
     })
   })
 
-  describe('expanded mode', () => {
-    it('mounts the list-left + settings-right split when mode is expanded', async () => {
+  describe('settings pane', () => {
+    it('auto-selects the first install on an install-less host', async () => {
+      const wrapper = await mountPicker({
+        installs: [
+          makeInstall({ id: 'a', name: 'Alpha' }),
+          makeInstall({ id: 'b', name: 'Beta' }),
+        ],
+        activeInstallationId: null,
+        runningInstallationIds: [],
+        selectedInstallationId: null,
+      })
+      await flushPromises()
+      expect(wrapper.find('.settings-v2-content').exists()).toBe(true)
+      expect(bridge.selectedInstallSets).toContain('a')
+    })
+
+    it('mounts ComfyUISettingsContent when an install is selected', async () => {
       const wrapper = await mountPicker({
         installs: [makeInstall({ id: 'a', name: 'Alpha' })],
         activeInstallationId: 'a',
         runningInstallationIds: [],
-        mode: 'expanded',
-        selectedSnapshots: emptySnapshotListPayload,
       })
-      // Expanded mode keeps the left list (compact InstanceRow shape)
-      // and mounts ComfyUISettingsContent on the right.
-      expect(wrapper.find('.picker-list').exists()).toBe(true)
-      expect(wrapper.find('.picker-detail-wrap.is-expanded').exists()).toBe(true)
-      // Compact rows are NOT mounted in expanded mode.
-      expect(wrapper.find('.picker-rows').exists()).toBe(false)
+      expect(wrapper.find('.settings-v2-content').exists()).toBe(true)
     })
 
-    it('pulls main\'s locale catalog on first expand', async () => {
+    it('pulls main\'s locale catalog on mount', async () => {
       await mountPicker({
         installs: [makeInstall({ id: 'a', name: 'Alpha' })],
         activeInstallationId: 'a',
         runningInstallationIds: [],
-        mode: 'expanded',
-        selectedSnapshots: emptySnapshotListPayload,
       })
       await flushPromises()
       const bridgeRef = (window as unknown as {
@@ -413,4 +403,43 @@ describe('comfyTitlePopup/InstancePickerView', () => {
       expect(bridgeRef.pickerSettingsGetLocaleMessages).toHaveBeenCalled()
     })
   })
+
+  // Settings pane's primary CTA is the only launch path now — used to
+  // live on the compact row. Cover the pick-vs-restart branch directly
+  // so the regression alarm fires if the dispatch logic drifts.
+  describe('primary action dispatch', () => {
+    it('dispatches pickInstall when the selected install is not running', async () => {
+      const { default: ComfyUISettingsContent } = await import(
+        '../components/settings/ComfyUISettingsContent.vue'
+      )
+      const wrapper = await mountPicker({
+        installs: [makeInstall({ id: 'a', name: 'Alpha' })],
+        activeInstallationId: 'a',
+        runningInstallationIds: [],
+      })
+      const settings = wrapper.findComponent(ComfyUISettingsContent)
+      expect(settings.exists()).toBe(true)
+      settings.vm.$emit('primary-action', false)
+      await flushPromises()
+      expect(bridge.picks).toEqual(['a'])
+      expect(bridge.restarts).toEqual([])
+    })
+
+    it('dispatches restartInstall when the selected install is running', async () => {
+      const { default: ComfyUISettingsContent } = await import(
+        '../components/settings/ComfyUISettingsContent.vue'
+      )
+      const wrapper = await mountPicker({
+        installs: [makeInstall({ id: 'a', name: 'Alpha' })],
+        activeInstallationId: 'a',
+        runningInstallationIds: ['a'],
+      })
+      const settings = wrapper.findComponent(ComfyUISettingsContent)
+      expect(settings.exists()).toBe(true)
+      settings.vm.$emit('primary-action', true)
+      await flushPromises()
+      expect(bridge.restarts).toEqual(['a'])
+      expect(bridge.picks).toEqual([])
+    })
+  })
 })
diff --git a/src/renderer/src/comfyTitlePopup/InstancePickerView.vue b/src/renderer/src/comfyTitlePopup/InstancePickerView.vue
index d67d02fe..1fec6d00 100644
--- a/src/renderer/src/comfyTitlePopup/InstancePickerView.vue
+++ b/src/renderer/src/comfyTitlePopup/InstancePickerView.vue
@@ -1,41 +1,28 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, toRef, useTemplateRef, watch } from 'vue'
-import { useTitlePopupAutoResize } from '../composables/useTitlePopupAutoResize'
+import { computed, onMounted, ref, toRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Plus, Search } from 'lucide-vue-next'
+import { Home, Plus, Search } from 'lucide-vue-next'
 import BaseInput from '../components/ui/BaseInput.vue'
 import { FILTER_CHIPS, useInstallList } from '../composables/useInstallList'
 import { useSessionStore } from '../stores/sessionStore'
 import ComfyUISettingsContent from '../components/settings/ComfyUISettingsContent.vue'
 import InstanceRow from './instancePicker/InstanceRow.vue'
-import PickerRow from './instancePicker/PickerRow.vue'
 import { resolvePickerTab, type PickerTab } from '../lib/pickerTabs'
 import { mergePanelLocaleIntoPopup } from './pickerSettingsApiShim'
-import { useModal } from '../composables/useModal'
 import type {
   DetailSection,
   Installation,
   RunningInstance,
   ShowProgressOpts,
-  SnapshotListData,
+  SnapshotListData
 } from '../types/ipc'
 
 /**
- * Instance-picker popover view.
+ * Instance-picker popover view — persistent master–detail split.
  *
- * Renders the title-bar centre pill's dropdown. The popup webContents
- * shell (`TitlePopupApp.vue`) hands us a static snapshot per open;
- * subsequent install-registry changes arrive via the
- * `onInstancePickerSnapshot` bridge subscription so the list stays
- * fresh while the popover is open.
- *
- * Pure-prop component — no IPC handshake here, just `__comfyTitlePopup`
- * bridge calls on user actions. The popup shell owns the `set-config` →
- * `notifyRendered` handshake and the natural-height `requestSize` push.
- *
- * Search / filter / recency / cloud-split logic comes from the shared
- * `useInstallList` composable, so the picker and `ChooserView` cannot
- * diverge.
+ * Left pane: searchable instance list. Right pane: per-install settings.
+ * Row click selects an install and updates the detail pane; Open/Restart
+ * lives in the settings footer only.
  */
 
 interface PickerInstall {
@@ -50,73 +37,70 @@ interface PickerInstall {
   statusTag?: { style: string; label: string }
 }
 
+interface PickerStorageDir {
+  path: string
+  isPrimary: boolean
+  isDefault: boolean
+}
+
+/** Storage-tab slice main piggy-backs on the picker snapshot. Matches
+ *  `PickerStorageSlice` in `src/main/popups/titlePopup.ts`. */
+interface PickerStorageSlice {
+  sharedDirectoriesFields: Record<string, unknown>[]
+  modelsDirs: PickerStorageDir[]
+  modelsSystemDefault: string
+}
+
 interface PickerSnapshot {
   installs: PickerInstall[]
   activeInstallationId: string | null
   runningInstallationIds: string[]
-  /** Per-row Settings + Snapshots payload — main pushes the data for
-   *  whichever install the picker currently has selected. See
-   *  `setPickerSelectedInstall` bridge call below for the sync. */
   selectedInstallationId: string | null
   selectedSettings: DetailSection[] | null
   selectedSnapshots: SnapshotListData | null
-  /** Compact = identity-card right pane; expanded = full per-install
-   *  settings UI in the right pane and the popup bounds grow to
-   *  95dvw × 95dvh. Flipped via the `setPickerMode` bridge. */
-  mode?: 'compact' | 'expanded'
-  /** When `mode === 'expanded'`, the tab the settings UI opens on. */
   initialTab?: string | null
-  /** When `mode === 'expanded'`, an action id to fire automatically. */
   autoAction?: string | null
+  storage: PickerStorageSlice
 }
 
 const props = defineProps<{
   snapshot: PickerSnapshot
 }>()
 
-const { t, mergeLocaleMessage } = useI18n()
+const { mergeLocaleMessage } = useI18n()
 
-// Per-install settings UI depends on session-running state for the
-// synthetic Launch→Restart swap. The popup doesn't subscribe to the
-// session-lifecycle IPC fan-out (no `init()`); instead we hydrate the
-// store's `runningInstances` map directly from the picker snapshot's
-// `runningInstallationIds`. Each snapshot refresh re-syncs.
 const sessionStore = useSessionStore()
 function hydrateSessionStoreFromSnapshot(): void {
   const next = new Set(props.snapshot.runningInstallationIds)
-  // Drop ids that are no longer running.
   for (const id of Array.from(sessionStore.runningInstances.keys())) {
     if (!next.has(id)) sessionStore.runningInstances.delete(id)
   }
-  // Add ids that are newly running. We don't carry the full
-  // `RunningInstance` payload through the snapshot (the picker only
-  // surfaces ids), so seed with a minimal record — `useComfyUISettings`
-  // only reads `.has(id)` via `isRunning(id)`.
   for (const id of next) {
     if (!sessionStore.runningInstances.has(id)) {
       const placeholder: RunningInstance = {
         installationId: id,
         installationName: '',
-        mode: '',
+        mode: ''
       }
       sessionStore.runningInstances.set(id, placeholder)
     }
   }
 }
 
-// Merge main's locale catalog on first expand; compact path stays IPC-free.
 let panelLocaleMerge: Promise<void> | null = null
 function ensurePanelLocaleMerged(): Promise<void> {
   panelLocaleMerge ??= mergePanelLocaleIntoPopup(mergeLocaleMessage)
   return panelLocaleMerge
 }
 
-// Bridge surface — only the methods the picker dispatches on user
-// actions. `onInstancePickerSnapshot` subscription is owned by the
-// shell (TitlePopupApp.vue), so we don't subscribe here too — that
-// would race with the shell's incoming-snapshot handling.
 interface PickerBridge {
   platform?: string
+  /** Dispatch a menu-item id through the existing
+   *  `comfy-titlepopup:item-activated` → `activateTitlePopupMenuItem`
+   *  path. The picker's Home button reuses this with
+   *  `'return-to-dashboard'` so we don't add a parallel IPC for the
+   *  same action. */
+  activate?: (id: string) => void
   pickInstall: (installationId: string) => void
   openNewInstall: () => void
   restartInstall: (installationId: string) => void
@@ -131,23 +115,7 @@ interface PickerBridge {
     actionId: 'snapshot-save' | 'snapshot-restore' | 'snapshot-delete',
     actionData?: Record<string, unknown>
   ) => Promise<{ ok: boolean; message?: string }>
-  /** Picker → run an install-level action via the parent panel's
-   *  `useInstallContextMenu` dispatch (Open Folder / Copy / Untrack /
-   *  Delete). Main hides the popup, then forwards to the parent
-   *  panel; the panel resolves to the same code path the dashboard
-   *  kebab uses, so confirm dialogs + showProgress wiring are shared. */
   openInstallAction: (installationId: string, actionId: string) => void
-  /** Ask main to resize the popup view to the given natural height.
-   *  Same plumbing as `GlobalSettingsView` — main clamps to the picker's
-   *  ceiling band so unbounded growth is impossible. */
-  requestSize: (height: number) => void
-  /** Picker → flip between compact and expanded modes. Main animates
-   *  the popup bounds (compact → 95dvw × 95dvh centred). */
-  setPickerMode: (
-    mode: 'compact' | 'expanded',
-    opts?: { initialTab?: string; autoAction?: string | null },
-  ) => void
-  /** Picker → forward a `show-progress` request to the panel renderer. */
   pickerForwardShowProgress: (payload: {
     installationId: string
     actionId: string
@@ -161,12 +129,6 @@ interface PickerBridge {
 }
 const bridge = (window as unknown as { __comfyTitlePopup?: PickerBridge }).__comfyTitlePopup
 
-// --- shared list logic ---
-//
-// `useInstallList` takes a reactive installs ref; we re-coerce the
-// snapshot prop into the renderer-side `Installation` shape (a
-// superset of `PickerInstall` — every field the picker uses already
-// exists in `Installation`).
 const installations = computed<Installation[]>(
   () => props.snapshot.installs as unknown as Installation[]
 )
@@ -178,15 +140,9 @@ const {
   visibleInstalls,
   showCloudCard,
   showEmptyHint,
-  lastLaunchedLabel
+  lastLaunchedShortLabel
 } = useInstallList({ installations: installationsRef })
 
-// Chips come from the shared `FILTER_CHIPS` constant in
-// `useInstallList`, so ChooserView (when its hidden chip row comes
-// back) and the picker can't drift in chip order or labels.
-//
-// Hide chips with zero installs in that bucket (except "All", which
-// always shows) so the chip row stays useful instead of decorative.
 const visibleChips = computed(() => {
   return FILTER_CHIPS.filter((chip) => {
     if (chip.key === 'all') return true
@@ -200,37 +156,38 @@ const visibleChips = computed(() => {
   })
 })
 
-
-// --- selection state ---
-//
-// Pre-select the install the snapshot points at. `selectedInstallationId`
-// wins over `activeInstallationId` because it carries the explicit
-// caller intent (chooser-card kebab "Restore Snapshot" / "Update" sends
-// it), while `activeInstallationId` is just the host's currently-focused
-// install. Falling back to `activeInstallationId` covers the title-bar
-// pill click path where no specific install was requested.
 function resolveInitialSelection(snapshot: PickerSnapshot): string | null {
-  return snapshot.selectedInstallationId ?? snapshot.activeInstallationId
+  const explicit = snapshot.selectedInstallationId ?? snapshot.activeInstallationId
+  if (explicit) return explicit
+  return snapshot.installs[0]?.id ?? null
 }
 const selectedId = ref<string | null>(resolveInitialSelection(props.snapshot))
 watch(
   () => props.snapshot.selectedInstallationId,
   (next) => {
     if (next) selectedId.value = next
-  },
+  }
 )
 watch(
   () => props.snapshot.activeInstallationId,
   (next) => {
     if (!props.snapshot.selectedInstallationId) {
-      selectedId.value = next
+      selectedId.value = next ?? props.snapshot.installs[0]?.id ?? null
     }
-  },
+  }
+)
+watch(
+  () => props.snapshot.installs,
+  (installs) => {
+    if (props.snapshot.selectedInstallationId || props.snapshot.activeInstallationId) return
+    if (selectedId.value) return
+    const first = installs[0]
+    if (first) {
+      selectedId.value = first.id
+    }
+  }
 )
 
-// Fall back to the first visible install when the active one isn't in
-// the visible list (e.g. the user typed a query that filtered the
-// active row out). Empty visible list → empty detail pane.
 const selectedInstall = computed<Installation | null>(() => {
   const id = selectedId.value
   if (id) {
@@ -246,165 +203,69 @@ function isRowRunning(inst: Installation): boolean {
   return runningSet.value.has(inst.id)
 }
 
-// --- action dispatch ---
-//
-// The picker is a switcher: clicking a row UPDATES the right detail
-// pane only, it does NOT launch. The Open button (and only the Open
-// button) fires the actual `pickInstall` IPC. This matches the
-// switcher pattern in the Figma — the popup stays open while the user
-// browses installs and previews their details, then dismisses once
-// they commit to one via Open.
-function handleSelect(inst: Installation): void {
-  selectedId.value = inst.id
+function isRowCurrent(inst: Installation): boolean {
+  return !!props.snapshot.activeInstallationId && inst.id === props.snapshot.activeInstallationId
 }
 
-/** Primary CTA dispatch for a row. Branches on running state: a
- *  running install means "Open" wouldn't do anything visible (main
- *  refocuses the existing window) so the CTA reads "Restart" and
- *  dispatches the restart flow — main confirms with a native dialog,
- *  stops the session, then re-launches. Otherwise "Open" → pickInstall
- *  (focus-or-launch) and the popup dismisses. */
-function handleRowOpen(inst: Installation): void {
-  if (runningSet.value.has(inst.id)) {
-    bridge?.restartInstall(inst.id)
-  } else {
-    bridge?.pickInstall(inst.id)
-  }
+/** Update available — mirrors the `showUpdateBadge` check in
+ *  `ComfyUISettingsContent.vue` so the picker row dot and the Update
+ *  tab badge share one source of truth. */
+function isRowUpdateAvailable(inst: Installation): boolean {
+  const tagged = inst as Installation & { statusTag?: { style?: string }; status?: string }
+  return tagged.statusTag?.style === 'update' || tagged.status === 'update-available'
 }
 
-/** Per-row Manage CTA. Seeds the picker's selection to this install
- *  before flipping into expanded mode so the expanded view's left
- *  list lands on the row the user clicked.
- *
- *  Locale merge is kicked off in parallel with the mode dispatch
- *  (NOT awaited) — the previous `await ensurePanelLocaleMerged()`
- *  blocked the bounds-tween dispatch behind a main-side IPC round-
- *  trip, which is exactly the "first flip feels janky" beat. The
- *  settings UI is hidden under the 160ms cross-fade anyway, and the
- *  `snapshotMode === 'expanded'` watcher below also calls
- *  `ensurePanelLocaleMerged()` (cached after first use), so the
- *  catalog still lands before any settings text needs to render. */
-function handleRowManage(inst: Installation): void {
+function handleSelect(inst: Installation): void {
   selectedId.value = inst.id
-  void ensurePanelLocaleMerged()
-  bridge?.setPickerMode('expanded', { initialTab: 'config' })
-}
-
-function openCtaLabelFor(inst: Installation): string {
-  return runningSet.value.has(inst.id)
-    ? t('instancePicker.restart')
-    : t('instancePicker.open')
 }
 
 function handleNewInstall(): void {
   bridge?.openNewInstall()
 }
 
-// --- Mode + resize plumbing ---
-//
-// Selection sync: when the user picks a DIFFERENT install row, tell
-// main so it can update its selection bookkeeping (used by the
-// install-action dispatch + by Step 4-5's expanded-mode data flow).
-//
-// No `immediate: true` here: main's click handler already seeded
-// `pickerSelectedInstallationId` with the host's active install before
-// showing the popup. Firing this watcher on mount would cause a
-// no-op snapshot rebroadcast → mid-open-animation `setBounds` flicker.
+/** Picker hosted by an install (vs the chooser/dashboard itself).
+ *  Drives whether the Home → dashboard escape is offered — pointless
+ *  to surface on a picker already shown from the dashboard. */
+const isInstallHost = computed(() => !!props.snapshot.activeInstallationId)
+
+function handleReturnToDashboard(): void {
+  bridge?.activate?.('return-to-dashboard')
+}
+
 watch(
   () => selectedInstall.value?.id ?? null,
   (next) => {
     bridge?.setPickerSelectedInstall(next)
-  },
-)
-
-// Resize plumbing for the natural-height popup. The right-pane
-// identity card + CTA stack is the dominant height driver now that
-// the Settings / Snapshots accordions are gone, so observe the
-// detail column directly.
-const pickerRootRef = useTemplateRef<HTMLDivElement>('pickerRootRef')
-const detailRef = useTemplateRef<HTMLDivElement>('detailRef')
-
-/** Mode the popup is currently in, from the most recent snapshot. */
-const snapshotMode = computed<'compact' | 'expanded'>(
-  () => props.snapshot.mode ?? 'compact',
+  }
 )
 
-useTitlePopupAutoResize(
-  detailRef,
-  () => {
-    const root = pickerRootRef.value
-    if (!root) return NaN
-    // +2 for the `.popup` 1px top + 1px bottom border.
-    return root.offsetHeight + 2
-  },
-  bridge?.requestSize ? bridge.requestSize.bind(bridge) : undefined,
-  // Expanded mode is sized main-side from host content bounds — the
-  // renderer's offsetHeight is meaningless there (and main's
-  // `requestSize` handler already early-returns in expanded mode). Gate
-  // the observer so we don't even compute the height while the mode-flip
-  // cross-fade is running.
-  { enabled: () => snapshotMode.value !== 'expanded' },
-)
+// Install-less host (chooser/dashboard): when the picker opens with
+// no explicit user pick and no host install, `resolveInitialSelection`
+// falls back to `installs[0]`. The reactive watcher above only fires
+// on *change*, so the initial fallback never reaches main. Persist
+// once on mount so main owns the selection from the first frame.
+if (
+  selectedId.value &&
+  !props.snapshot.selectedInstallationId &&
+  !props.snapshot.activeInstallationId
+) {
+  bridge?.setPickerSelectedInstall(selectedId.value)
+}
 
-/** Initial tab to seed `ComfyUISettingsContent` with on the expanded
- *  branch's first mount. */
 const initialExpandedTab = computed<PickerTab>(() =>
-  resolvePickerTab(props.snapshot.initialTab, 'config'),
+  resolvePickerTab(props.snapshot.initialTab, 'config')
 )
 
-function handleCollapseToCompact(): void {
-  bridge?.setPickerMode('compact')
-}
-
-// Keep `sessionStore.runningInstances` in sync with the snapshot's
-// `runningInstallationIds`. Fires `immediate` so the very first render
-// of the expanded UI already has correct running state.
 watch(
   () => props.snapshot.runningInstallationIds.join(','),
   () => hydrateSessionStoreFromSnapshot(),
-  { immediate: true },
+  { immediate: true }
 )
 
-// If main opens the picker directly in expanded mode (chooser-card
-// kebab Update / Migrate / Restore / Delete in Step 6), pre-merge the
-// locale on the first snapshot that lands so the settings UI's keys
-// resolve from frame one.
-watch(
-  () => snapshotMode.value,
-  (next, prev) => {
-    if (next === 'expanded' && prev !== 'expanded') {
-      void ensurePanelLocaleMerged()
-    }
-  },
-  { immediate: true },
-)
-
-// ESC: collapse to compact when expanded, otherwise let the popup's
-// existing close-on-ESC behaviour close the popup. Capture-phase
-// listener so we win against any nested handlers inside the settings
-// UI — but defer to ModalDialog when a confirm/alert is open so ESC
-// resolves the dialog instead of tearing down the surface that owns it.
-const { state: pickerModalState } = useModal()
-function handleEsc(event: KeyboardEvent): void {
-  if (event.key !== 'Escape') return
-  if (pickerModalState.visible) return
-  if (snapshotMode.value === 'expanded') {
-    event.preventDefault()
-    event.stopPropagation()
-    handleCollapseToCompact()
-  }
-}
 onMounted(() => {
-  document.addEventListener('keydown', handleEsc, true)
-})
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleEsc, true)
+  void ensurePanelLocaleMerged()
 })
 
-// Popup has no `ProgressModal` of its own; forward the request to the
-// parent panel which mounts one. Main hides the popup so the modal is
-// unobstructed; the panel rebuilds `apiCall` from actionId/actionData
-// and runs it through its existing `handleShowProgress` pipeline.
 function handleSettingsShowProgress(opts: ShowProgressOpts): void {
   if (!opts.actionId) return
   bridge?.pickerForwardShowProgress({
@@ -415,20 +276,14 @@ function handleSettingsShowProgress(opts: ShowProgressOpts): void {
     cancellable: opts.cancellable,
     triggersInstanceStart: opts.triggersInstanceStart,
     opKind: opts.opKind,
-    isRestart: opts.actionId === 'restart',
+    isRestart: opts.actionId === 'restart'
   })
 }
+
 function handleSettingsNavigateList(): void {
-  // The selected install was deleted/untracked — flip back to compact
-  // and let the snapshot rebroadcast scrub the row from the list.
-  handleCollapseToCompact()
+  selectedId.value = null
 }
 
-/** Expanded view's footer Open/Restart button. Routes through the
- *  exact same bridge calls the compact `PickerRow` Open/Restart
- *  button uses (`handleRowOpen`) so both surfaces share one
- *  native-confirm flow. The `running` flag is passed up from
- *  `ComfyUISettingsContent` so we don't re-derive it. */
 function handleExpandedPrimaryAction(running: boolean): void {
   const inst = selectedInstall.value
   if (!inst) return
@@ -441,92 +296,54 @@ function handleExpandedPrimaryAction(running: boolean): void {
 </script>
 
 <template>
-  <div ref="pickerRootRef" class="picker">
+  <div class="picker">
     <div class="picker-search">
       <BaseInput
         v-model="searchQuery"
-        :placeholder="t('chooser.searchPlaceholder')"
-        :aria-label="t('chooser.searchPlaceholder')"
+        :placeholder="$t('chooser.searchPlaceholder')"
+        :aria-label="$t('chooser.searchPlaceholder')"
       >
         <template #leading><Search :size="20" class="picker-search-icon" /></template>
       </BaseInput>
     </div>
 
-    <div class="picker-chips" role="tablist" aria-label="Source filter">
-      <button
-        v-for="chip in visibleChips"
-        :key="chip.key"
-        type="button"
-        role="tab"
-        class="picker-chip"
-        :class="{ 'is-active': activeFilter === chip.key }"
-        :aria-selected="activeFilter === chip.key"
-        @click="activeFilter = chip.key"
+    <div class="picker-chips-row">
+      <template v-if="isInstallHost">
+        <button
+          type="button"
+          class="picker-home"
+          :aria-label="$t('fileMenu.returnToDashboard')"
+          :title="$t('fileMenu.returnToDashboard')"
+          @click="handleReturnToDashboard"
+        >
+          <Home :size="14" />
+        </button>
+        <span class="picker-chips-divider" aria-hidden="true"></span>
+      </template>
+      <div
+        class="picker-chips"
+        role="tablist"
+        :aria-label="$t('chooser.filterLabel', 'Source filter')"
       >
-        {{ t(chip.labelKey) }}
-      </button>
-    </div>
-
-    <!-- Mode flip cross-fade. `mode="out-in"` ensures the old subtree
-         is gone before the new one mounts so the ResizeObserver doesn't
-         double-measure mid-transition. The 160ms fade lands a hair
-         before the main-side 200ms bounds tween so contents settle
-         before the shell does. -->
-    <Transition name="picker-mode" mode="out-in">
-    <!-- Compact mode: single-column list of rich PickerRow cards. No
-         left/right split — each row is self-contained with its own
-         Open + Manage. Comfy Cloud renders as the same PickerRow shape
-         so the visual rhythm holds. The "+ New Instance" affordance is
-         pinned in a sticky footer so it stays visible while the list
-         scrolls. -->
-    <div v-if="snapshotMode !== 'expanded'" key="compact" ref="detailRef" class="picker-rows-wrap">
-      <TransitionGroup name="picker-row" tag="div" class="picker-rows" role="list">
-        <PickerRow
-          v-if="showCloudCard && cloudInstall"
-          :key="cloudInstall.id"
-          :installation="cloudInstall"
-          :active="selectedId === cloudInstall.id"
-          :running="isRowRunning(cloudInstall)"
-          :last-launched-label="lastLaunchedLabel(cloudInstall)"
-          :open-label="openCtaLabelFor(cloudInstall)"
-          :manage-label="t('instancePicker.manage')"
-          @open="handleRowOpen"
-          @manage="handleRowManage"
-        />
-
-        <PickerRow
-          v-for="inst in visibleInstalls"
-          :key="inst.id"
-          :installation="inst"
-          :active="selectedId === inst.id"
-          :running="isRowRunning(inst)"
-          :last-launched-label="lastLaunchedLabel(inst)"
-          :open-label="openCtaLabelFor(inst)"
-          :manage-label="t('instancePicker.manage')"
-          @open="handleRowOpen"
-          @manage="handleRowManage"
-        />
-
-        <div v-if="showEmptyHint" key="empty" class="picker-rows-empty">
-          {{ t('chooser.noMatches') }}
-        </div>
-      </TransitionGroup>
-
-      <footer class="picker-rows-footer">
-        <button type="button" class="picker-new-install-row" @click="handleNewInstall">
-          <Plus :size="16" aria-hidden="true" />
-          <span>{{ t('instancePicker.newInstance') }}</span>
+        <button
+          v-for="chip in visibleChips"
+          :key="chip.key"
+          type="button"
+          role="tab"
+          class="picker-chip"
+          :class="{ 'is-active': activeFilter === chip.key }"
+          :aria-selected="activeFilter === chip.key"
+          @click="activeFilter = chip.key"
+        >
+          {{ $t(chip.labelKey) }}
         </button>
-      </footer>
+      </div>
     </div>
 
-    <!-- Expanded mode: list-left + settings-right. Unchanged from
-         the previous design — the per-install settings UI mounts in
-         the right pane and the popup bounds grow to fill inner area. -->
-    <div v-else key="expanded" class="picker-body">
+    <div class="picker-body">
       <div class="picker-left">
         <div class="picker-list-section">
-          <div class="picker-list-section-title">{{ t('instancePicker.instances') }}</div>
+          <div class="picker-list-section-title">{{ $t('instancePicker.instances') }}</div>
 
           <div class="picker-list" role="listbox">
             <InstanceRow
@@ -535,7 +352,9 @@ function handleExpandedPrimaryAction(running: boolean): void {
               :installation="cloudInstall"
               :active="selectedId === cloudInstall.id"
               :running="isRowRunning(cloudInstall)"
-              :last-launched-label="lastLaunchedLabel(cloudInstall)"
+              :is-current="isRowCurrent(cloudInstall)"
+              :update-available="isRowUpdateAvailable(cloudInstall)"
+              :last-launched-short-label="lastLaunchedShortLabel(cloudInstall)"
               @select="handleSelect"
             />
 
@@ -545,12 +364,14 @@ function handleExpandedPrimaryAction(running: boolean): void {
               :installation="inst"
               :active="selectedId === inst.id"
               :running="isRowRunning(inst)"
-              :last-launched-label="lastLaunchedLabel(inst)"
+              :is-current="isRowCurrent(inst)"
+              :update-available="isRowUpdateAvailable(inst)"
+              :last-launched-short-label="lastLaunchedShortLabel(inst)"
               @select="handleSelect"
             />
 
             <div v-if="showEmptyHint" class="picker-list-empty">
-              {{ t('chooser.noMatches') }}
+              {{ $t('chooser.noMatches') }}
             </div>
           </div>
         </div>
@@ -558,7 +379,7 @@ function handleExpandedPrimaryAction(running: boolean): void {
         <footer class="picker-left-footer">
           <button type="button" class="picker-new-install" @click="handleNewInstall">
             <Plus :size="16" />
-            <span>{{ t('instancePicker.newInstance') }}</span>
+            <span>{{ $t('instancePicker.newInstance') }}</span>
           </button>
         </footer>
       </div>
@@ -566,30 +387,25 @@ function handleExpandedPrimaryAction(running: boolean): void {
       <div class="picker-detail-wrap is-expanded">
         <div class="picker-detail">
           <template v-if="selectedInstall">
-            <!-- Back affordance is rendered inside the settings tab
-                 strip via `showBack` so it sits at the tab baseline
-                 instead of floating over the tab nav. ESC still
-                 collapses (see handleEsc above). -->
             <ComfyUISettingsContent
               :installation="selectedInstall"
               :initial-tab="initialExpandedTab"
               :auto-action="snapshot.autoAction ?? null"
               :show-back="true"
+              :global-settings-snapshot="snapshot.storage"
               class="picker-expanded-body"
               @show-progress="handleSettingsShowProgress"
               @navigate-list="handleSettingsNavigateList"
               @request-close="handleSettingsNavigateList"
               @primary-action="handleExpandedPrimaryAction"
-              @back="handleCollapseToCompact"
             />
           </template>
           <div v-else class="picker-detail-empty">
-            {{ t('instancePicker.empty') }}
+            {{ $t('instancePicker.empty') }}
           </div>
         </div>
       </div>
     </div>
-    </Transition>
   </div>
 </template>
 
@@ -600,6 +416,7 @@ function handleExpandedPrimaryAction(running: boolean): void {
   height: 100%;
   width: 100%;
   box-sizing: border-box;
+  background: var(--modal-surface-bg);
 }
 
 .picker-search {
@@ -634,13 +451,53 @@ function handleExpandedPrimaryAction(running: boolean): void {
   color: var(--accent-label);
   margin-top: 2px;
 }
+.picker-chips-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px 10px 16px;
+  border-bottom: 1px solid var(--brand-surface-border-hover, var(--chooser-surface-border));
+}
 .picker-chips {
   display: flex;
   align-items: center;
   gap: 6px;
   flex-wrap: wrap;
-  padding: 8px 16px 10px 16px;
-  border-bottom: 1px solid var(--brand-surface-border-hover, var(--chooser-surface-border));
+  min-width: 0;
+}
+/* Home — naked icon button. The vertical divider that follows it
+ * does the visual separation work; a pill border around the icon
+ * would compete with the chip pills and read as another filter.
+ * Hover lifts the icon to full text colour without painting a
+ * background. */
+.picker-home {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--neutral-100);
+  cursor: pointer;
+  transition: color 100ms ease;
+}
+.picker-home:hover,
+.picker-home:focus-visible {
+  color: var(--text);
+  outline: none;
+}
+/* Vertical hairline between Home and the filter chips so the eye
+ * groups them as "navigation | filters". Matches the chip border
+ * token so all the dividers in the row pull from the same well. */
+.picker-chips-divider {
+  flex: 0 0 auto;
+  display: inline-block;
+  width: 1px;
+  height: 16px;
+  background: var(--brand-surface-border-hover, var(--chooser-surface-border));
 }
 .picker-chip {
   height: 22px;
@@ -684,18 +541,15 @@ function handleExpandedPrimaryAction(running: boolean): void {
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--chooser-surface-border);
-  background: var(--neutral-800);
+  background: var(--modal-surface-bg);
 }
-/* Footer band — mirrors the right pane's `.settings-v2-footer` shape
- * (full-bleed bordered band, same padding + bg) so the two footers
- * line up at the bottom of the expanded popup. */
 .picker-left-footer {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   padding: 12px 16px;
   border-top: 1px solid var(--chooser-surface-border);
-  background: var(--neutral-800);
+  background: var(--modal-surface-bg);
 }
 .picker-list-section {
   flex: 1 1 auto;
@@ -709,8 +563,10 @@ function handleExpandedPrimaryAction(running: boolean): void {
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
-  color: var(--text);
-  padding: 8px 18px 0 16px;
+  color: var(--neutral-100);
+  opacity: 0.7;
+  padding: 12px 18px 0 16px;
+  margin-bottom: 14px;
 }
 .picker-list {
   flex: 1 1 auto;
@@ -737,11 +593,6 @@ function handleExpandedPrimaryAction(running: boolean): void {
   border-radius: 8px;
   width: fit-content;
   border: none;
-  /* Pairs visually with the right-footer "More" button — both sit in
-   * the same expanded-mode footer band, so they share the same 10%
-   * white overlay (lives in `--chooser-surface-border-hover` — see
-   * note on `.settings-v2-more`) and the same muted-on-text-default
-   * resting state. */
   background: var(--chooser-surface-border-hover);
   color: var(--neutral-100);
   font-size: 12px;
@@ -759,78 +610,6 @@ function handleExpandedPrimaryAction(running: boolean): void {
   outline: none;
 }
 
-/* ---- Compact mode: single-column rows ----
- * Two-section flex column: scrollable rows list on top, sticky footer
- * with the "+ New Instance" affordance below. The outer envelope is
- * capped at 720px by `computePickerBounds`; rows fill that envelope
- * edge-to-edge (minus the wrap's 16px gutter) so they don't read as
- * undersized inside a too-wide popup. */
-.picker-rows-wrap {
-  flex: 1 1 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  padding: 12px 16px 0 16px;
-  overflow: hidden;
-}
-.picker-rows {
-  position: relative;
-  flex: 1 1 auto;
-  min-height: 0;
-  width: 100%;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  /* Hide the native scrollbar — popup is a focused glance affordance,
-   * a visible scrollbar would compete with the row chrome. */
-  scrollbar-width: none;
-}
-.picker-rows::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  display: none;
-}
-.picker-rows-empty {
-  padding: 16px;
-  font-size: 13px;
-  color: var(--neutral-100);
-  text-align: center;
-}
-.picker-rows-footer {
-  flex: 0 0 auto;
-  display: flex;
-  padding: 12px 0 16px 0;
-}
-.picker-new-install-row {
-  flex: 1 1 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-height: 36px;
-  padding: 8px 14px;
-  border-radius: 10px;
-  border: 1px dashed var(--brand-surface-border-hover, var(--chooser-surface-border));
-  background: transparent;
-  color: var(--neutral-100);
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
-  cursor: pointer;
-  transition:
-    background-color 120ms ease,
-    border-color 120ms ease,
-    color 120ms ease;
-}
-.picker-new-install-row:hover,
-.picker-new-install-row:focus-visible {
-  background: var(--brand-surface-bg-hover);
-  color: var(--text);
-  outline: none;
-}
-
-/* ---- Expanded mode: list-left + settings-right ---- */
 .picker-detail-wrap {
   min-width: 0;
   min-height: 0;
@@ -853,12 +632,6 @@ function handleExpandedPrimaryAction(running: boolean): void {
   opacity: 0.7;
 }
 
-/* ---- Expanded Manage state ---- */
-/* When the popup is in expanded mode (main has animated bounds to
- * ~95dvw × 95dvh), the right pane drops the identity-card padding so
- * `<ComfyUISettingsContent>` can fill the available area edge-to-edge.
- * `.picker-detail-wrap` already has horizontal padding for compact;
- * remove it on the expanded variant. */
 .picker-detail-wrap.is-expanded {
   padding: 0;
 }
@@ -869,64 +642,6 @@ function handleExpandedPrimaryAction(running: boolean): void {
 .picker-expanded-body {
   flex: 1 1 auto;
   min-height: 0;
-  /* Brighten dim text inside the embedded settings UI. Most labels +
-   * meta strings inside `ComfyUISettingsContent` and its children
-   * resolve via `var(--text-muted)`; overriding the token at this
-   * scope cascades the bump without touching the shared token. */
   --text-muted: var(--neutral-100);
 }
-
-/* ---- Mode-flip cross-fade ----
- * Lands a hair before the main-side 200ms bounds tween so contents
- * settle before the shell does. `mode="out-in"` on the wrapping
- * Transition ensures no overlap → no double-measurement on the
- * ResizeObserver. `will-change` is scoped to the active transition
- * phase so the browser promotes the subtree to its own GPU layer for
- * the fade (avoids per-frame repaints on a heavy `ComfyUISettings-
- * Content` subtree) and then releases the layer once the animation
- * settles — no permanent compositor pressure. */
-.picker-mode-enter-active,
-.picker-mode-leave-active {
-  transition: opacity 160ms ease;
-  will-change: opacity;
-}
-.picker-mode-enter-from,
-.picker-mode-leave-to {
-  opacity: 0;
-}
-
-/* ---- Row enter/leave + FLIP for search/filter changes ----
- * Surviving rows slide via Vue's auto-FLIP; departing rows fade-up,
- * arriving rows fade-down. Keeps the outer popup-height tween from
- * looking teleported when row counts change. */
-.picker-row-enter-active,
-.picker-row-leave-active {
-  transition: opacity 140ms ease, transform 140ms ease;
-}
-.picker-row-enter-from {
-  opacity: 0;
-  transform: translateY(-2px);
-}
-.picker-row-leave-to {
-  opacity: 0;
-  transform: translateY(-2px);
-}
-.picker-row-move {
-  transition: transform 160ms ease;
-}
-/* Leaving rows are taken out of flow so the surrounding FLIP feels
- * snappy instead of waiting for the leave animation to finish. */
-.picker-row-leave-active {
-  position: absolute;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .picker-mode-enter-active,
-  .picker-mode-leave-active,
-  .picker-row-enter-active,
-  .picker-row-leave-active,
-  .picker-row-move {
-    transition: none;
-  }
-}
 </style>
diff --git a/src/renderer/src/comfyTitlePopup/TitlePopupApp.vue b/src/renderer/src/comfyTitlePopup/TitlePopupApp.vue
index 9fc8faf9..4c6d467a 100644
--- a/src/renderer/src/comfyTitlePopup/TitlePopupApp.vue
+++ b/src/renderer/src/comfyTitlePopup/TitlePopupApp.vue
@@ -5,6 +5,7 @@ import DownloadsView from './DownloadsView.vue'
 import InstancePickerView from './InstancePickerView.vue'
 import GlobalSettingsView from './GlobalSettingsView.vue'
 import ModalDialog from '../components/ModalDialog.vue'
+import DialogHost from '../components/DialogHost.vue'
 import { useModal } from '../composables/useModal'
 import type { DetailSection, SnapshotListData } from '../types/ipc'
 
@@ -65,6 +66,20 @@ interface PickerInstall {
   statusTag?: { style: string; label: string }
 }
 
+interface PickerStorageDir {
+  path: string
+  isPrimary: boolean
+  isDefault: boolean
+}
+
+/** Storage-tab slice main piggy-backs on the picker snapshot. Same
+ *  shape as `PickerStorageSlice` in `src/main/popups/titlePopup.ts`. */
+interface PickerStorageSlice {
+  sharedDirectoriesFields: Record<string, unknown>[]
+  modelsDirs: PickerStorageDir[]
+  modelsSystemDefault: string
+}
+
 interface PickerSnapshot {
   installs: PickerInstall[]
   activeInstallationId: string | null
@@ -78,6 +93,7 @@ interface PickerSnapshot {
   selectedInstallationId: string | null
   selectedSettings: DetailSection[] | null
   selectedSnapshots: SnapshotListData | null
+  storage: PickerStorageSlice
 }
 
 interface GlobalSettingsModelsDir {
@@ -87,7 +103,9 @@ interface GlobalSettingsModelsDir {
 }
 
 interface GlobalSettingsSnapshot {
-  overviewFields: Record<string, unknown>[]
+  generalFields: Record<string, unknown>[]
+  telemetryFields: Record<string, unknown>[]
+  desktopUpdateFields: Record<string, unknown>[]
   cacheFields: Record<string, unknown>[]
   advancedFields: Record<string, unknown>[]
   sharedDirectoriesFields: Record<string, unknown>[]
@@ -102,15 +120,12 @@ interface GlobalSettingsSnapshot {
     platform: string
     lastCheckedAt: number | null
   }
-  channelPickerField: Record<string, unknown> | null
-  activeInstallationId: string | null
-  hasActiveInstall: boolean
   githubUrl: string
   githubStars: number | null
   i18n: {
     overview: string
     updates: string
-    cache: string
+    storage: string
     models: string
     advanced: string
     sharedDirectories: string
@@ -176,11 +191,14 @@ const pickerSnapshot = ref<PickerSnapshot>({
   runningInstallationIds: [],
   selectedInstallationId: null,
   selectedSettings: null,
-  selectedSnapshots: null
+  selectedSnapshots: null,
+  storage: { sharedDirectoriesFields: [], modelsDirs: [], modelsSystemDefault: '' }
 })
 /** Latest global-settings snapshot — same lifecycle as `pickerSnapshot`. */
 const globalSettingsSnapshot = ref<GlobalSettingsSnapshot>({
-  overviewFields: [],
+  generalFields: [],
+  telemetryFields: [],
+  desktopUpdateFields: [],
   cacheFields: [],
   advancedFields: [],
   sharedDirectoriesFields: [],
@@ -195,15 +213,12 @@ const globalSettingsSnapshot = ref<GlobalSettingsSnapshot>({
     platform: 'darwin',
     lastCheckedAt: null
   },
-  channelPickerField: null,
-  activeInstallationId: null,
-  hasActiveInstall: false,
   githubUrl: '',
   githubStars: null,
   i18n: {
-    overview: 'Overview',
+    overview: 'General',
     updates: 'Updates',
-    cache: 'Cache',
+    storage: 'Storage',
     models: 'Models',
     advanced: 'Advanced',
     sharedDirectories: 'Shared Directories'
@@ -440,6 +455,10 @@ onUnmounted(() => {
          its own copy; this one keeps `useModal` working inside the
          popup's separate WebContentsView. -->
     <ModalDialog />
+    <!-- Sibling host for the new `useDialogs` API (BasePrompt /
+         BaseActionSheet rendered via BaseModal). Lives alongside
+         `<ModalDialog />` until all useModal types migrate. -->
+    <DialogHost />
   </div>
 </template>
 
diff --git a/src/renderer/src/comfyTitlePopup/globalSettings/GitHubLinkCard.vue b/src/renderer/src/comfyTitlePopup/globalSettings/GitHubLinkCard.vue
new file mode 100644
index 00000000..6f286880
--- /dev/null
+++ b/src/renderer/src/comfyTitlePopup/globalSettings/GitHubLinkCard.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+// Intentionally NOT a variant of `components/ChoiceCard.vue`:
+// ChoiceCard is an onboarding takeover primitive (tagline band, large
+// type, optional radio + glow + arrow). This is a compact list-row
+// link with a trailing star badge — overlapping a `variant="link"` on
+// ChoiceCard would null out half its surface and fork typography.
+import { computed } from 'vue'
+import { ExternalLink, Github, Star } from 'lucide-vue-next'
+
+const props = withDefaults(
+  defineProps<{
+    url: string
+    stars: number | null
+    label?: string
+  }>(),
+  {
+    label: 'ComfyUI Desktop',
+  },
+)
+
+const emit = defineEmits<{
+  open: [url: string]
+}>()
+
+const starCountLabel = computed(() => {
+  if (props.stars == null) return ''
+  return new Intl.NumberFormat(undefined, {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+  }).format(props.stars)
+})
+</script>
+
+<template>
+  <button type="button" class="github-link-card" @click="emit('open', url)">
+    <span class="github-link-main">
+      <Github :size="16" aria-hidden="true" />
+      <span class="github-link-label">{{ label }}</span>
+      <ExternalLink :size="12" class="github-link-external" aria-hidden="true" />
+    </span>
+    <span v-if="stars != null" class="github-link-stars" :aria-label="`${stars} GitHub stars`">
+      <Star :size="12" class="github-link-stars-icon" aria-hidden="true" />
+      <span>{{ starCountLabel }}</span>
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.github-link-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--chooser-surface-border);
+  border-radius: 8px;
+  background: var(--brand-surface-bg);
+  color: var(--neutral-100);
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 100ms ease;
+}
+
+.github-link-card:hover,
+.github-link-card:focus-visible {
+  background: var(--brand-surface-bg-hover);
+  outline: none;
+}
+
+.github-link-main {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.github-link-label {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 19px;
+}
+
+.github-link-external {
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+.github-link-stars {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border: 1px solid color-mix(in oklab, var(--neutral-100) 14%, transparent);
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--neutral-100) 4%, transparent);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  line-height: 16px;
+}
+
+.github-link-stars-icon {
+  color: var(--warning);
+  fill: currentColor;
+}
+</style>
diff --git a/src/renderer/src/comfyTitlePopup/globalSettings/GlobalSettingsMicroSection.vue b/src/renderer/src/comfyTitlePopup/globalSettings/GlobalSettingsMicroSection.vue
new file mode 100644
index 00000000..5adb6ce3
--- /dev/null
+++ b/src/renderer/src/comfyTitlePopup/globalSettings/GlobalSettingsMicroSection.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+// Intentionally NOT a variant of `components/DetailSection.vue`:
+// DetailSection is the legacy install-scoped detail surface (channel
+// cards, items, fields, args/env editors, IPC writes) and is marked
+// `TODO(stale-old-modal)` for deletion. Coupling the new global-
+// settings UI to it would block that removal.
+import InfoTooltip from '../../components/InfoTooltip.vue'
+
+defineProps<{
+  title: string
+  tooltip?: string
+}>()
+</script>
+
+<template>
+  <section class="gs-micro-section">
+    <h3 class="gs-micro-title">
+      <span>{{ title }}</span>
+      <InfoTooltip v-if="tooltip" :text="tooltip" />
+    </h3>
+    <div class="gs-micro-body">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.gs-micro-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.gs-micro-title {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0 0 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+
+/* The title text alone is dimmed (matches the muted section-header
+ * treatment), but the optional InfoTooltip stays at full opacity so
+ * the `?` reads at the same visibility as other help icons in the
+ * panel — otherwise we'd compound the title's dim with InfoTooltip's
+ * own 0.6 baseline and the icon would nearly vanish. */
+.gs-micro-title > span {
+  opacity: 0.55;
+}
+
+.gs-micro-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>
diff --git a/src/renderer/src/comfyTitlePopup/globalSettings/ModelsDirList.vue b/src/renderer/src/comfyTitlePopup/globalSettings/ModelsDirList.vue
new file mode 100644
index 00000000..3d5a9a8f
--- /dev/null
+++ b/src/renderer/src/comfyTitlePopup/globalSettings/ModelsDirList.vue
@@ -0,0 +1,406 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Folder, FolderLock, FolderOpen, MoreHorizontal, Plus } from 'lucide-vue-next'
+import InfoTooltip from '../../components/InfoTooltip.vue'
+
+interface ModelsDir {
+  path: string
+  isPrimary: boolean
+  isDefault: boolean
+}
+
+interface Props {
+  dirs: ModelsDir[]
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  open: [path: string]
+  remove: [index: number]
+  'make-primary': [index: number]
+  add: []
+}>()
+
+const { t } = useI18n()
+const openMenuIndex = ref<number | null>(null)
+const menuToggleRefs = new Map<number, HTMLButtonElement>()
+const menuRefs = new Map<number, HTMLDivElement>()
+
+function setMenuToggleRef(index: number, el: Element | null): void {
+  if (el instanceof HTMLButtonElement) menuToggleRefs.set(index, el)
+  else menuToggleRefs.delete(index)
+}
+
+function setMenuRef(index: number, el: Element | null): void {
+  if (el instanceof HTMLDivElement) menuRefs.set(index, el)
+  else menuRefs.delete(index)
+}
+
+function hasMenuActions(dir: ModelsDir): boolean {
+  const canMakePrimary = !dir.isPrimary
+  const canRemove = !dir.isDefault && !dir.isPrimary
+  return canMakePrimary || canRemove
+}
+
+async function toggleMenu(index: number): Promise<void> {
+  const willOpen = openMenuIndex.value !== index
+  openMenuIndex.value = willOpen ? index : null
+  if (willOpen) {
+    await nextTick()
+    focusFirstMenuItem(index)
+  }
+}
+
+function closeMenu(restoreFocus = false): void {
+  const prev = openMenuIndex.value
+  openMenuIndex.value = null
+  if (restoreFocus && prev != null) menuToggleRefs.get(prev)?.focus()
+}
+
+function focusFirstMenuItem(index: number): void {
+  menuItemsFor(index)[0]?.focus()
+}
+
+function menuItemsFor(index: number): HTMLButtonElement[] {
+  const menu = menuRefs.get(index)
+  if (!menu) return []
+  return Array.from(menu.querySelectorAll<HTMLButtonElement>('button[role="menuitem"]'))
+}
+
+function handleMenuArrow(index: number, direction: 1 | -1, event: KeyboardEvent): void {
+  event.preventDefault()
+  const items = menuItemsFor(index)
+  if (items.length === 0) return
+  const current = items.indexOf(document.activeElement as HTMLButtonElement)
+  const next = (current + direction + items.length) % items.length
+  items[next]?.focus()
+}
+
+function handleOpen(path: string): void {
+  closeMenu()
+  emit('open', path)
+}
+
+function handleRemove(index: number): void {
+  closeMenu()
+  emit('remove', index)
+}
+
+/** Path of the row that was most recently promoted to primary. Drives
+ *  a brief highlight pulse on the row so the user can't miss that
+ *  their click landed — without it, the only signal is the `PRIMARY`
+ *  pill swapping rows, which is easy to overlook when the paths look
+ *  similar. Cleared by a timer; the row is keyed by `path` so the
+ *  same DOM node moves with the data and the class stays attached. */
+const justPromotedPath = ref<string | null>(null)
+const justPromotedTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+
+function handleMakePrimary(index: number): void {
+  closeMenu()
+  const promoted = props.dirs[index]?.path ?? null
+  emit('make-primary', index)
+  if (promoted) {
+    justPromotedPath.value = promoted
+    if (justPromotedTimer.value) clearTimeout(justPromotedTimer.value)
+    justPromotedTimer.value = setTimeout(() => {
+      justPromotedPath.value = null
+      justPromotedTimer.value = null
+    }, 1200)
+  }
+}
+
+onBeforeUnmount(() => {
+  if (justPromotedTimer.value) {
+    clearTimeout(justPromotedTimer.value)
+    justPromotedTimer.value = null
+  }
+})
+
+const rows = computed(() =>
+  props.dirs.map((dir, index) => ({
+    ...dir,
+    index,
+    showMenu: hasMenuActions(dir)
+  }))
+)
+</script>
+
+<template>
+  <div class="models-dir-list" @click="closeMenu()">
+    <div
+      v-for="row in rows"
+      :key="row.path"
+      class="models-dir-row"
+      :class="{ 'is-just-promoted': row.path === justPromotedPath }"
+    >
+      <component
+        :is="row.isDefault ? FolderLock : Folder"
+        :size="14"
+        class="models-dir-icon"
+        :class="{ 'is-default': row.isDefault }"
+        :aria-label="row.isDefault ? t('tooltips.modelsDefault') : undefined"
+        :title="row.isDefault ? t('tooltips.modelsDefault') : undefined"
+      />
+      <div class="models-dir-main">
+        <span class="models-dir-name" :title="row.path">{{ row.path }}</span>
+      </div>
+      <span v-if="row.isPrimary" class="models-dir-tag tag-primary">
+        {{ t('models.primary', 'Primary') }}
+        <InfoTooltip :text="t('tooltips.modelsPrimary')" />
+      </span>
+      <div class="models-dir-actions">
+        <button
+          type="button"
+          class="models-dir-action"
+          :aria-label="t('settings.open', 'Open')"
+          :title="t('settings.open', 'Open')"
+          @click.stop="handleOpen(row.path)"
+        >
+          <FolderOpen :size="14" aria-hidden="true" />
+        </button>
+        <div v-if="row.showMenu" class="models-dir-menu-wrap">
+          <button
+            :ref="(el) => setMenuToggleRef(row.index, el as Element | null)"
+            type="button"
+            class="models-dir-action"
+            :aria-label="t('models.moreActions', 'More actions')"
+            :aria-expanded="openMenuIndex === row.index"
+            aria-haspopup="menu"
+            @click.stop="toggleMenu(row.index)"
+            @keydown.esc.stop.prevent="closeMenu(true)"
+          >
+            <MoreHorizontal :size="14" aria-hidden="true" />
+          </button>
+          <div
+            v-if="openMenuIndex === row.index"
+            :ref="(el) => setMenuRef(row.index, el as Element | null)"
+            class="models-dir-menu"
+            role="menu"
+            @click.stop
+            @keydown.esc.stop.prevent="closeMenu(true)"
+            @keydown.down.stop.prevent="handleMenuArrow(row.index, 1, $event)"
+            @keydown.up.stop.prevent="handleMenuArrow(row.index, -1, $event)"
+          >
+            <button
+              v-if="!row.isPrimary"
+              type="button"
+              role="menuitem"
+              @click="handleMakePrimary(row.index)"
+            >
+              {{ t('models.makePrimary', 'Make primary') }}
+            </button>
+            <button
+              v-if="!row.isDefault && !row.isPrimary"
+              type="button"
+              role="menuitem"
+              class="danger"
+              @click="handleRemove(row.index)"
+            >
+              {{ t('models.removeDir', 'Remove') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <button type="button" class="models-dir-add" @click="emit('add')">
+      <Plus :size="14" aria-hidden="true" />
+      <span>{{ t('models.addDir', 'Add directory') }}</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.models-dir-list {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--chooser-surface-border);
+  border-radius: 8px;
+  background: var(--brand-surface-bg);
+}
+
+.models-dir-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 8px 10px;
+  border-top: 1px solid var(--border-hover);
+}
+
+.models-dir-row:first-child {
+  border-top: none;
+}
+
+/* Make-primary feedback: brief yellow pulse on the row that just
+ * moved to position 0. Keyed by `path` so the highlight rides the
+ * same DOM node when Vue reorders the list. Ramp-in is fast (~10%)
+ * to feel responsive, hold for ~20%, then ease back to transparent —
+ * standard "flash to confirm" pattern from Material list-item
+ * activation. Token-driven; `--neutral-50` is the brand yellow. */
+.models-dir-row.is-just-promoted {
+  animation: models-dir-promote 1200ms ease-out;
+}
+
+@keyframes models-dir-promote {
+  0% {
+    background: transparent;
+  }
+  10% {
+    background: color-mix(in srgb, var(--neutral-50) 22%, transparent);
+  }
+  30% {
+    background: color-mix(in srgb, var(--neutral-50) 22%, transparent);
+  }
+  100% {
+    background: transparent;
+  }
+}
+
+.models-dir-icon {
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.models-dir-icon.is-default {
+  color: color-mix(in oklab, var(--neutral-100) 60%, transparent);
+}
+
+.models-dir-main {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.models-dir-name {
+  font-size: 13px;
+  line-height: 18px;
+  color: var(--neutral-100);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.models-dir-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+  padding: 1px 6px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 14px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.models-dir-tag.tag-primary {
+  color: var(--accent);
+  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+.models-dir-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.models-dir-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition:
+    background-color 100ms ease,
+    color 100ms ease;
+}
+
+.models-dir-action:hover,
+.models-dir-action:focus-visible {
+  background: var(--brand-surface-bg-hover);
+  color: var(--neutral-100);
+  outline: none;
+}
+
+.models-dir-menu-wrap {
+  position: relative;
+}
+
+.models-dir-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 10;
+  min-width: 140px;
+  padding: 4px;
+  border: 1px solid var(--chooser-surface-border);
+  border-radius: 8px;
+  background: var(--neutral-800);
+  box-shadow: 0 8px 24px color-mix(in oklab, var(--neutral-950) 40%, transparent);
+}
+
+.models-dir-menu button {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--neutral-100);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.models-dir-menu button:hover,
+.models-dir-menu button:focus-visible {
+  background: var(--brand-surface-bg-hover);
+  outline: none;
+}
+
+.models-dir-menu button.danger {
+  color: var(--danger);
+}
+
+.models-dir-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  min-height: 36px;
+  padding: 8px 10px;
+  border: none;
+  border-top: 1px solid var(--border-hover);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 100ms ease,
+    color 100ms ease;
+}
+
+.models-dir-add:hover,
+.models-dir-add:focus-visible {
+  background: var(--brand-surface-bg-hover);
+  color: var(--neutral-100);
+  outline: none;
+}
+</style>
diff --git a/src/renderer/src/comfyTitlePopup/globalSettings/UpdatesSection.vue b/src/renderer/src/comfyTitlePopup/globalSettings/UpdatesSection.vue
index 7582aeb6..a37204d7 100644
--- a/src/renderer/src/comfyTitlePopup/globalSettings/UpdatesSection.vue
+++ b/src/renderer/src/comfyTitlePopup/globalSettings/UpdatesSection.vue
@@ -1,27 +1,20 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import ChannelPicker from '../../views/comfyUISettings/ChannelPicker.vue'
+import SettingsSectionList from '../../views/comfyUISettings/SettingsSectionList.vue'
+import { formatRelativeFromMs } from '../../lib/datetime'
 import { formatBytes, formatSpeed } from '../../lib/downloadFormatters'
 import type {
-  ActionDef,
   AppUpdateDownloadProgress,
   AppUpdateState,
   DetailField,
+  DetailSection
 } from '../../types/ipc'
 
 /**
- * Updates accordion body for the Global Settings panel.
- *
- * Bespoke renderer — the Updates section is not field-shaped. It's a
- * launcher-update status grid (Installed / Latest / Platform / Last
- * Checked / Status) plus a tri-button row (Update Now / Check For
- * Update) plus, when the host has an active install, the existing
- * `ChannelPicker.vue` (drives Update Channel + Copy & Update + Switch
- * Channel actions via main's payload-embedded `option.data.actions`).
- *
- * All state + handlers come from props — the parent (`useGlobalSettings`
- * composable) owns IPC subscriptions and the runAction dispatcher.
+ * Desktop-only Updates tab. Presents human-readable status first (like
+ * AppUpdateAction), version/build as secondary detail, and a single
+ * inset card that groups status + metadata + actions.
  */
 
 interface Props {
@@ -31,68 +24,136 @@ interface Props {
   checking: boolean
   lastCheckedAt: number | null
   installedVersion: string
-  platformLabel: string
-  /** From the active install's Update tab, when one exists. Null on
-   *  chooser hosts or cloud installs — the picker (and Copy & Update
-   *  action bundled inside it) is hidden in those cases. */
-  channelPickerField: DetailField | null
+  systemManaged?: boolean
+  preferenceFields?: DetailField[]
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  systemManaged: false,
+  preferenceFields: () => []
+})
 
 const emit = defineEmits<{
   'update-now': []
   'check-for-update': []
-  'install-action': [action: ActionDef]
+  'update-field': [field: DetailField, value: unknown]
 }>()
 
 const { t, d } = useI18n()
 
-const versionLabel = computed(() =>
-  props.state.version ? `v${props.state.version}` : t('appUpdate.fallbackVersion'),
-)
+function formatVersionLabel(raw: string | undefined | null): string {
+  if (!raw) return '—'
+  const trimmed = raw.trim()
+  if (trimmed.startsWith('v') || trimmed.startsWith('V')) return trimmed
+  return `v${trimmed}`
+}
+
+function normalizeVersion(raw: string | undefined | null): string {
+  if (!raw) return ''
+  return raw.trim().replace(/^[vV]/, '').toLowerCase()
+}
 
-const statusText = computed(() => {
-  if (props.isDownloading) {
-    return t('appUpdate.panelDownloadingTitle', { version: versionLabel.value })
+const targetVersionLabel = computed(() => {
+  if (props.state.version) return formatVersionLabel(props.state.version)
+  return t('appUpdate.fallbackVersion', 'this update')
+})
+
+const statusSentence = computed(() => {
+  if (props.isDownloading || props.state.kind === 'downloading') {
+    return t(
+      'appUpdate.panelDownloadingTitle',
+      {
+        version: targetVersionLabel.value
+      },
+      'Downloading update…'
+    )
   }
   switch (props.state.kind) {
     case 'ready':
-      return t('appUpdate.panelReadyTitle', { version: versionLabel.value })
+      return t(
+        'appUpdate.panelReadyTitle',
+        {
+          version: targetVersionLabel.value
+        },
+        'Update ready to install'
+      )
     case 'available':
-      return t('appUpdate.panelAvailableTitle', { version: versionLabel.value })
+      return t(
+        'appUpdate.panelAvailableTitle',
+        {
+          version: targetVersionLabel.value
+        },
+        'Update available'
+      )
     default:
-      return t('appUpdate.panelIdleTitle')
+      return t('appUpdate.panelIdleTitle', 'ComfyUI Desktop is up to date')
   }
 })
 
-const updateNowLabel = computed(() => {
-  if (props.checking) return t('settings.checkingForUpdates')
-  if (props.isDownloading) return t('appUpdate.downloading')
+const statusTone = computed(() => {
+  if (props.isDownloading || props.state.kind === 'downloading') return 'downloading'
+  if (props.state.kind === 'available' || props.state.kind === 'ready') return 'update'
+  return 'current'
+})
+
+const installedDetail = computed(() => {
+  if (!props.installedVersion) return null
+  return t(
+    'appUpdate.installedLabel',
+    { version: formatVersionLabel(props.installedVersion) },
+    `Installed ${formatVersionLabel(props.installedVersion)}`
+  )
+})
+
+const lastCheckedDetail = computed(() => {
+  if (!props.lastCheckedAt) return null
+  let title: string | undefined
+  try {
+    title = d(new Date(props.lastCheckedAt), 'long')
+  } catch {
+    title = new Date(props.lastCheckedAt).toLocaleString()
+  }
+  const time = formatRelativeFromMs(props.lastCheckedAt, t)
+  return {
+    text: t('appUpdate.lastCheckedLabel', { time }, `Last checked ${time}`),
+    title
+  }
+})
+
+const latestDetail = computed(() => {
+  if (!props.state.version) return null
+  const installed = normalizeVersion(props.installedVersion)
+  const latest = normalizeVersion(props.state.version)
+  if (!latest || installed === latest) return null
+  return t(
+    'appUpdate.latestLabel',
+    { version: formatVersionLabel(props.state.version) },
+    `Latest ${formatVersionLabel(props.state.version)}`
+  )
+})
+
+const preferenceSections = computed<DetailSection[]>(() =>
+  props.preferenceFields.length > 0 ? [{ fields: props.preferenceFields }] : []
+)
+
+const primaryActionLabel = computed(() => {
+  if (props.checking) return t('settings.checkingForUpdates', 'Checking…')
+  if (props.isDownloading) return t('appUpdate.downloading', 'Downloading…')
   switch (props.state.kind) {
     case 'ready':
-      return t('appUpdate.restartNow')
+      return t('appUpdate.restartNow', 'Restart & update')
     case 'available':
-      return t('appUpdate.download')
+      return t('appUpdate.download', 'Download')
     default:
-      return t('settings.checkForUpdates')
+      return t('settings.checkForUpdates', 'Check for updates')
   }
 })
 
-const updateNowDisabled = computed(() => props.checking || props.isDownloading)
-
-const latestVersionLabel = computed(() =>
-  props.state.version ? `v${props.state.version}` : '—',
+const showSecondaryCheck = computed(
+  () => props.state.kind === 'available' || props.state.kind === 'ready'
 )
 
-const lastCheckedLabel = computed(() => {
-  if (!props.lastCheckedAt) return '—'
-  try {
-    return d(new Date(props.lastCheckedAt), 'long')
-  } catch {
-    return new Date(props.lastCheckedAt).toLocaleString()
-  }
-})
+const actionsDisabled = computed(() => props.checking || props.isDownloading)
 
 const percent = computed<number | null>(() => {
   const p = props.progress?.percent
@@ -116,85 +177,70 @@ const progressDetail = computed<string | null>(() => {
 
 <template>
   <div class="updates-section">
-    <!-- Status grid (read-only rows). -->
-    <dl class="updates-status">
-      <div class="updates-status-row">
-        <dt>{{ t('channelCards.installedVersion', 'Installed Version') }}</dt>
-        <dd>{{ installedVersion ? `v${installedVersion}` : '—' }}</dd>
-      </div>
-      <div class="updates-status-row">
-        <dt>{{ t('channelCards.latestVersion', 'Latest Version') }}</dt>
-        <dd>{{ latestVersionLabel }}</dd>
-      </div>
-      <div class="updates-status-row">
-        <dt>{{ t('settings.platform', 'Platform') }}</dt>
-        <dd>{{ platformLabel }}</dd>
-      </div>
-      <div class="updates-status-row">
-        <dt>{{ t('channelCards.lastChecked', 'Last Checked') }}</dt>
-        <dd>{{ lastCheckedLabel }}</dd>
+    <div class="updates-card">
+      <div class="updates-card-body">
+        <p class="updates-status" :class="statusTone">
+          {{ statusSentence }}
+        </p>
+
+        <div v-if="installedDetail || lastCheckedDetail || latestDetail" class="updates-details">
+          <span v-if="installedDetail" class="updates-detail">{{ installedDetail }}</span>
+          <span v-if="lastCheckedDetail" class="updates-detail" :title="lastCheckedDetail.title">{{
+            lastCheckedDetail.text
+          }}</span>
+          <span v-if="latestDetail" class="updates-detail is-highlight">{{ latestDetail }}</span>
+        </div>
+
+        <p v-if="systemManaged" class="updates-note">
+          {{
+            t(
+              'appUpdate.systemManagedNote',
+              'Updates for this install are delivered through your system package manager.'
+            )
+          }}
+        </p>
+
+        <div v-if="isDownloading" class="updates-progress">
+          <div class="progress-bar-track" :class="{ indeterminate: percent === null }">
+            <div
+              v-if="percent !== null"
+              class="progress-bar-fill"
+              :style="{ width: percent + '%' }"
+            ></div>
+          </div>
+          <div class="updates-progress-detail">
+            <span v-if="percent !== null">{{ percent }}%</span>
+            <span v-if="progressDetail">{{ progressDetail }}</span>
+          </div>
+        </div>
       </div>
-      <div class="updates-status-row">
-        <dt>{{ t('channelCards.status', 'Status') }}</dt>
-        <dd>{{ statusText }}</dd>
-      </div>
-    </dl>
-
-    <!-- Install-scoped Update Channel + bundled actions (Update Now /
-         Copy & Update / Switch Channel). Hidden when the host has no
-         active install — the launcher-level Update Now / Check For
-         Update buttons below still render. -->
-    <ChannelPicker
-      v-if="channelPickerField"
-      :field="channelPickerField"
-      @action="(a) => emit('install-action', a)"
-    />
 
-    <!-- Launcher-level action buttons. Rendered only when no channel
-         picker is present (i.e. install-less host) — the picker already
-         surfaces an Update Now button bundled into its own action row,
-         so showing two would be confusing.
-         When state is `idle`, the primary's `updateNowLabel` falls back
-         to "Check for updates" — same as the secondary — so we drop the
-         secondary in that case to avoid two identical buttons. The
-         secondary only re-appears once there's a real "Update Now" /
-         "Restart" primary action and the user needs a way to manually
-         re-check. -->
-    <div v-if="!channelPickerField" class="updates-actions">
-      <button
-        type="button"
-        class="updates-action primary"
-        :disabled="updateNowDisabled"
-        @click="emit('update-now')"
-      >
-        {{ updateNowLabel }}
-      </button>
-      <button
-        v-if="state.kind !== null"
-        type="button"
-        class="updates-action"
-        :disabled="updateNowDisabled"
-        @click="emit('check-for-update')"
-      >
-        {{ t('settings.checkForUpdates') }}
-      </button>
-    </div>
-
-    <!-- Download progress bar — shown whenever a launcher download is
-         in flight regardless of which surface kicked it off. -->
-    <div v-if="isDownloading" class="updates-progress">
-      <div class="progress-bar-track" :class="{ indeterminate: percent === null }">
-        <div
-          v-if="percent !== null"
-          class="progress-bar-fill"
-          :style="{ width: percent + '%' }"
-        ></div>
-      </div>
-      <div class="updates-progress-detail">
-        <span v-if="percent !== null">{{ percent }}%</span>
-        <span v-if="progressDetail">{{ progressDetail }}</span>
+      <div class="updates-card-footer">
+        <button
+          v-if="showSecondaryCheck"
+          type="button"
+          class="updates-action"
+          :disabled="actionsDisabled"
+          @click="emit('check-for-update')"
+        >
+          {{ t('settings.checkForUpdates', 'Check for updates') }}
+        </button>
+        <button
+          type="button"
+          class="updates-action accent"
+          :disabled="actionsDisabled"
+          @click="emit('update-now')"
+        >
+          {{ primaryActionLabel }}
+        </button>
       </div>
     </div>
+
+    <SettingsSectionList
+      v-if="preferenceSections.length > 0"
+      :sections="preferenceSections"
+      @update-field="(field, value) => emit('update-field', field, value)"
+    />
   </div>
 </template>
 
@@ -205,67 +251,90 @@ const progressDetail = computed<string | null>(() => {
   gap: 12px;
 }
 
-/* Status grid — label/value pairs separated by hairline dividers.
-   Mirrors ChannelPicker's preview-card row chrome so the two read as
-   one design language. */
-.updates-status {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
+.updates-card {
   border: 1px solid var(--chooser-surface-border);
   border-radius: 8px;
-  padding: 4px 12px;
+  background: var(--brand-surface-bg);
+  overflow: hidden;
 }
 
-.updates-status-row {
+.updates-card-body {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding: 12px 0;
-  border-top: 1px solid var(--border-hover);
+  gap: 8px;
+  padding: 14px 14px 12px;
 }
 
-.updates-status-row:first-child {
-  padding-top: 8px;
-  border-top: none;
+.updates-status {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--neutral-100);
 }
 
-.updates-status-row:last-child {
-  padding-bottom: 8px;
+.updates-status.update {
+  color: var(--accent);
 }
 
-.updates-status dt {
-  margin: 0;
+.updates-status.downloading {
+  color: var(--accent-primary, #0b8ce9);
+}
+
+.updates-details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.updates-detail {
   font-size: 12px;
+  line-height: 17px;
   color: var(--text-muted);
-  line-height: 16px;
 }
 
-.updates-status dd {
+.updates-detail.is-highlight {
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.updates-note {
   margin: 0;
-  font-size: 14px;
-  line-height: 21px;
-  color: var(--neutral-100);
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--text-muted);
+  opacity: 0.85;
 }
 
-.updates-actions {
+.updates-card-footer {
   display: flex;
   flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
   gap: 8px;
+  padding: 10px 14px 12px;
+  border-top: 1px solid var(--border-hover);
 }
 
 .updates-action {
-  flex: 1 1 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  height: 32px;
   min-height: 32px;
-  padding: 8px 16px;
+  padding: 0 16px;
   border-radius: 8px;
   border: 1px solid var(--chooser-surface-border);
   background: var(--brand-surface-bg);
   color: var(--neutral-100);
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
   cursor: pointer;
-  transition: background-color 100ms ease, filter 100ms ease;
+  box-sizing: border-box;
+  transition: background-color 100ms ease;
 }
 
 .updates-action:hover:not(:disabled),
@@ -274,36 +343,32 @@ const progressDetail = computed<string | null>(() => {
   outline: none;
 }
 
-.updates-action.primary {
-  border-color: var(--accent-primary, #0b8ce9);
-  background: var(--accent-primary, #0b8ce9);
-  color: var(--text);
-}
-
-.updates-action.primary:hover:not(:disabled),
-.updates-action.primary:focus-visible:not(:disabled) {
-  filter: brightness(1.08);
-  background: var(--accent-primary, #0b8ce9);
+.updates-action.accent {
+  border-color: var(--accent);
+  color: var(--accent);
+  font-weight: 600;
 }
 
 .updates-action:disabled {
-  opacity: 0.5;
   cursor: not-allowed;
+  opacity: 0.5;
 }
 
-/* Progress bar — visual match with AppUpdateAction.vue's existing
-   rules so the download UX reads identically. */
+.updates-action.accent:disabled:hover {
+  background: var(--brand-surface-bg-hover);
+}
 .updates-progress {
   display: flex;
   flex-direction: column;
   gap: 4px;
+  padding-top: 4px;
 }
 
 .progress-bar-track {
   position: relative;
   height: 4px;
   border-radius: 9999px;
-  background: var(--brand-surface-bg);
+  background: color-mix(in oklab, var(--neutral-100) 6%, transparent);
   overflow: hidden;
 }
 
@@ -317,9 +382,9 @@ const progressDetail = computed<string | null>(() => {
 .progress-bar-track.indeterminate {
   background: linear-gradient(
     90deg,
-    var(--brand-surface-bg) 0%,
+    color-mix(in oklab, var(--neutral-100) 6%, transparent) 0%,
     var(--accent-primary, #0b8ce9) 50%,
-    var(--brand-surface-bg) 100%
+    color-mix(in oklab, var(--neutral-100) 6%, transparent) 100%
   );
   background-size: 200% 100%;
   animation: progress-indeterminate 1.4s linear infinite;
@@ -337,7 +402,7 @@ const progressDetail = computed<string | null>(() => {
 .updates-progress-detail {
   display: flex;
   justify-content: space-between;
-  font-size: 12px;
+  font-size: 11px;
   color: var(--text-muted);
 }
 </style>
diff --git a/src/renderer/src/comfyTitlePopup/instancePicker/InstanceRow.vue b/src/renderer/src/comfyTitlePopup/instancePicker/InstanceRow.vue
index 6892a317..cee9bd23 100644
--- a/src/renderer/src/comfyTitlePopup/instancePicker/InstanceRow.vue
+++ b/src/renderer/src/comfyTitlePopup/instancePicker/InstanceRow.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { installTypeMetaFor } from '../../lib/installTypeIcon'
 import { TID } from '../../../../shared/testIds'
 import type { Installation } from '../../types/ipc'
@@ -20,16 +21,25 @@ interface Props {
   /** Install is currently running in some other window — drives the
    *  small running dot on the row. */
   running?: boolean
-  /** Pre-formatted "Launched 17m ago" — hidden when the install has never
-   *  launched; the picker view owns the formatter. */
-  lastLaunchedLabel: string
+  /** This install is the one whose host window opened the picker —
+   *  drives the "Current" pill that replaces the recency label. */
+  isCurrent?: boolean
+  /** An update is available for this install — drives the orange
+   *  status dot. Orange takes precedence over the green running dot. */
+  updateAvailable?: boolean
+  /** Compact recency (`3h ago`) for single-line picker rows. */
+  lastLaunchedShortLabel: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   active: false,
   running: false,
+  isCurrent: false,
+  updateAvailable: false,
 })
 
+const { t } = useI18n()
+
 const emit = defineEmits<{
   select: [installation: Installation]
 }>()
@@ -56,16 +66,25 @@ function handleClick(): void {
     >
       <div class="picker-row-icon" :title="$t(typeMeta.labelKey)">
         <component :is="typeMeta.icon" :size="20" />
-        <span v-if="running" class="picker-row-running-dot" aria-hidden="true"></span>
+        <span
+          v-if="updateAvailable"
+          class="picker-row-update-dot"
+          aria-hidden="true"
+        ></span>
+        <span
+          v-else-if="running"
+          class="picker-row-running-dot"
+          aria-hidden="true"
+        ></span>
       </div>
       <div class="picker-row-body">
-        <div class="picker-row-name">{{ installation.name }}</div>
-        <div
-          v-if="installation.lastLaunchedAt != null"
-          class="picker-row-sub"
-        >
-          {{ lastLaunchedLabel }}
-        </div>
+        <span class="picker-row-name">{{ installation.name }}</span>
+        <span v-if="isCurrent" class="picker-row-current-pill">
+          {{ t('snapshots.current') }}
+        </span>
+        <span v-else-if="lastLaunchedShortLabel" class="picker-row-recency">
+          {{ lastLaunchedShortLabel }}
+        </span>
       </div>
     </div>
   </div>
@@ -79,7 +98,7 @@ function handleClick(): void {
 }
 .picker-row {
   display: grid;
-  grid-template-columns: 24px 1fr auto;
+  grid-template-columns: 24px minmax(0, 1fr);
   align-items: center;
   gap: 8px;
   padding: 8px 8px 8px 10px;
@@ -111,7 +130,7 @@ function handleClick(): void {
   transition: color 120ms ease;
 }
 /* Active row → icon goes full white (and gets a green status dot
- * overlaid on top-right when also running). Inactive running rows
+ * overlaid on bottom-right when also running). Inactive running rows
  * still get the green dot so the user sees "running in another
  * window" status, but the icon stays its resting neutral colour. */
 .picker-row.is-active .picker-row-icon {
@@ -120,11 +139,13 @@ function handleClick(): void {
 .picker-row-body {
   min-width: 0;
   display: flex;
-  flex-direction: column;
-  gap: 2px;
+  align-items: center;
+  gap: 8px;
   overflow: hidden;
 }
 .picker-row-name {
+  flex: 1 1 auto;
+  min-width: 0;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
@@ -136,23 +157,55 @@ function handleClick(): void {
 .picker-row.is-active .picker-row-name {
   color: var(--text);
 }
-.picker-row-sub {
+.picker-row-recency {
+  flex: 0 0 auto;
   font-size: 12px;
   line-height: 16px;
   color: var(--text-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
-/* Green running indicator pinned to the top-right of the icon. Uses
- * the existing `--success` token. */
+/* Green running indicator pinned to the bottom-right of the icon. */
 .picker-row-running-dot {
   position: absolute;
-  top: -1px;
+  bottom: -1px;
+  right: -1px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #38c149;
+  border: 2px solid #38303d;
+  box-sizing: content-box;
+}
+/* Orange update-available indicator. Same anchor + chrome as the
+ * running dot — the orange takes precedence in the template so we
+ * render exactly one dot at a time. */
+.picker-row-update-dot {
+  position: absolute;
+  bottom: -1px;
   right: -1px;
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
-  background: var(--success, #00cd72);
+  background: var(--status-update, #f59e0b);
+  border: 2px solid #38303d;
+  box-sizing: content-box;
+}
+/* "Current" pill — flags the install whose host window opened the
+ * picker. Replaces the recency label on that one row so the user can
+ * scan-find their own context at a glance. */
+.picker-row-current-pill {
+  flex: 0 0 auto;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--text-muted);
+  background: color-mix(in srgb, var(--text) 10%, transparent);
+  border-radius: 999px;
+  white-space: nowrap;
+}
+.picker-row.is-active .picker-row-current-pill {
+  color: var(--text);
+  background: color-mix(in srgb, var(--text) 14%, transparent);
 }
 </style>
diff --git a/src/renderer/src/comfyTitlePopup/instancePicker/PickerRow.vue b/src/renderer/src/comfyTitlePopup/instancePicker/PickerRow.vue
deleted file mode 100644
index b9dbc3c7..00000000
--- a/src/renderer/src/comfyTitlePopup/instancePicker/PickerRow.vue
+++ /dev/null
@@ -1,279 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { installTypeMetaFor } from '../../lib/installTypeIcon'
-import { TID } from '../../../../shared/testIds'
-import type { Installation } from '../../types/ipc'
-
-/**
- * Compact-mode row card: identity (icon + name + running pill + meta pills)
- * on the left, Open + Manage CTA stack on the right. Power actions
- * (reveal/copy/untrack/delete) live in expanded mode, not here.
- */
-
-interface Props {
-  installation: Installation
-  /** Marks this row as the host's currently-active install — paints
-   *  a 2px accent marker on the left edge so the user can spot
-   *  "where am I" without reading. */
-  active?: boolean
-  /** Install is currently running — flips the primary CTA from
-   *  "Open" → "Restart" and renders a running pill in the name row. */
-  running?: boolean
-  /** Pre-formatted "Launched 17m ago" string. Empty for never-launched
-   *  installs (the picker view owns the formatter). */
-  lastLaunchedLabel: string
-  /** Localised primary CTA label ("Open" / "Restart"). */
-  openLabel: string
-  /** Localised secondary CTA label ("Manage"). */
-  manageLabel: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  active: false,
-  running: false,
-})
-
-const emit = defineEmits<{
-  open: [installation: Installation]
-  manage: [installation: Installation]
-}>()
-
-const typeMeta = computed(() => installTypeMetaFor(props.installation.sourceCategory))
-
-/** Backend pre-formats `installation.version` via `formatComfyVersion` —
- *  the string already carries its own `v` prefix when one belongs (tag
- *  forms) and intentionally omits it for SHA-only / `unknown` fallbacks.
- *  Render verbatim; do not re-prefix. */
-const versionLabel = computed(() => props.installation.version ?? '')
-
-function handleOpen(): void {
-  emit('open', props.installation)
-}
-function handleManage(): void {
-  emit('manage', props.installation)
-}
-</script>
-
-<template>
-  <article
-    class="picker-row-card"
-    :class="{ 'is-active': active, 'is-running': running }"
-    :data-testid="TID.pickerRow(installation.id)"
-  >
-    <div class="picker-row-card-identity">
-      <span class="picker-row-card-icon-wrap">
-        <component
-          :is="typeMeta.icon"
-          :size="22"
-          class="picker-row-card-icon"
-          :title="$t(typeMeta.labelKey)"
-          aria-hidden="true"
-        />
-        <span v-if="running" class="picker-row-card-running-dot" aria-hidden="true" />
-      </span>
-      <div class="picker-row-card-text">
-        <div class="picker-row-card-name-row">
-          <h3 class="picker-row-card-name">{{ installation.name }}</h3>
-        </div>
-        <div class="picker-row-card-pills">
-          <span class="picker-row-card-pill">{{ installation.sourceLabel }}</span>
-          <span
-            v-if="versionLabel"
-            class="picker-row-card-pill picker-row-card-pill-version"
-          >
-            {{ versionLabel }}
-          </span>
-          <span v-if="lastLaunchedLabel" class="picker-row-card-pill">
-            {{ lastLaunchedLabel }}
-          </span>
-        </div>
-      </div>
-    </div>
-
-    <div class="picker-row-card-cta">
-      <button
-        type="button"
-        class="picker-row-card-open"
-        :data-testid="TID.pickerRowOpen(installation.id)"
-        @click="handleOpen"
-      >
-        {{ openLabel }}
-      </button>
-      <button
-        type="button"
-        class="picker-row-card-manage"
-        :data-testid="TID.pickerRowManage(installation.id)"
-        @click="handleManage"
-      >
-        {{ manageLabel }}
-      </button>
-    </div>
-  </article>
-</template>
-
-<style scoped>
-.picker-row-card {
-  position: relative;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 16px;
-  padding: 12px 14px;
-  border-radius: 10px;
-  border: 1px solid var(--chooser-surface-border);
-  background: var(--neutral-800);
-  transition:
-    background-color 120ms ease,
-    border-color 120ms ease;
-}
-
-.picker-row-card:hover {
-  background: var(--brand-surface-bg-hover);
-}
-
-/* Active state — no blue accent bar. Border lifts to the brighter
- * hairline so the selected card reads as "picked" without competing
- * with the running-dot status indicator. */
-.picker-row-card.is-active {
-  border-color: var(--brand-surface-border-hover, var(--chooser-surface-border));
-}
-
-.picker-row-card-identity {
-  display: grid;
-  grid-template-columns: 22px minmax(0, 1fr);
-  gap: 12px;
-  align-items: center;
-  min-width: 0;
-}
-
-.picker-row-card-icon-wrap {
-  position: relative;
-  width: 22px;
-  height: 22px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-}
-
-.picker-row-card-icon {
-  color: var(--neutral-100);
-  transition: color 120ms ease;
-}
-.picker-row-card.is-active .picker-row-card-icon {
-  color: var(--text);
-}
-
-.picker-row-card-text {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.picker-row-card-name-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.picker-row-card-name {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  color: var(--neutral-100);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Green status dot pinned to the icon's top-right when the install
- * is currently running. Replaces the previous "Running" text pill —
- * status is communicated by the dot alone. */
-.picker-row-card-running-dot {
-  position: absolute;
-  top: -1px;
-  right: -1px;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--success, #00cd72);
-}
-
-.picker-row-card-pills {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 4px;
-}
-
-.picker-row-card-pill {
-  display: inline-flex;
-  align-items: center;
-  height: 20px;
-  max-width: 18ch;
-  padding: 0 8px;
-  border-radius: 9999px;
-  background: var(--chooser-surface-border);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 16px;
-  color: var(--neutral-100);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.picker-row-card-pill-version {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-}
-
-.picker-row-card-cta {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 6px;
-  flex: 0 0 auto;
-}
-
-.picker-row-card-open,
-.picker-row-card-manage {
-  min-width: 96px;
-  min-height: 28px;
-  padding: 4px 14px;
-  border-radius: 7px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 18px;
-  cursor: pointer;
-  transition:
-    filter 100ms ease,
-    background-color 120ms ease,
-    border-color 120ms ease;
-}
-
-.picker-row-card-open {
-  border: 1px solid var(--accent-primary);
-  background: var(--accent-primary);
-  color: var(--text);
-}
-.picker-row-card-open:hover,
-.picker-row-card-open:focus-visible {
-  filter: brightness(1.08);
-  outline: none;
-}
-
-.picker-row-card-manage {
-  border: 1px solid var(--chooser-surface-border);
-  background: transparent;
-  color: var(--neutral-100);
-}
-.picker-row-card-manage:hover,
-.picker-row-card-manage:focus-visible {
-  background: var(--brand-surface-bg-hover);
-  color: var(--neutral-100);
-  outline: none;
-}
-</style>
diff --git a/src/renderer/src/comfyTitlePopup/instancePicker/PickerSnapshotsList.vue b/src/renderer/src/comfyTitlePopup/instancePicker/PickerSnapshotsList.vue
index 8711d7ef..6f7a684d 100644
--- a/src/renderer/src/comfyTitlePopup/instancePicker/PickerSnapshotsList.vue
+++ b/src/renderer/src/comfyTitlePopup/instancePicker/PickerSnapshotsList.vue
@@ -57,8 +57,8 @@ function handleRestore(snapshot: SnapshotSummary): void {
   const ok = window.confirm(
     t(
       'snapshots.restoreConfirm',
-      'Are you sure you want to restore this snapshot? Your current install state will be replaced.',
-    ),
+      'Are you sure you want to restore this snapshot? Your current install state will be replaced.'
+    )
   )
   if (!ok) return
   emit('restore', snapshot.filename)
@@ -123,7 +123,7 @@ function handleDelete(snapshot: SnapshotSummary): void {
       {{
         t(
           'snapshots.empty',
-          'No snapshots yet. Snapshots are captured automatically when ComfyUI starts.',
+          'No snapshots yet. Snapshots are captured automatically when ComfyUI starts.'
         )
       }}
     </div>
@@ -144,7 +144,7 @@ function handleDelete(snapshot: SnapshotSummary): void {
   padding: 6px 10px;
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--chooser-surface-bg);
   color: var(--neutral-100);
   font-size: 12px;
   line-height: 16px;
@@ -191,7 +191,7 @@ function handleDelete(snapshot: SnapshotSummary): void {
   padding: 5px 10px;
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--chooser-surface-bg);
   color: var(--neutral-100);
   font-size: 12px;
   line-height: 16px;
@@ -206,9 +206,12 @@ function handleDelete(snapshot: SnapshotSummary): void {
 .picker-snapshot-action.is-primary {
   color: var(--accent-primary, #60a5fa);
 }
+.picker-snapshot-action.is-danger {
+  color: var(--danger);
+}
 .picker-snapshot-action.is-danger:hover,
 .picker-snapshot-action.is-danger:focus-visible {
-  background: rgba(239, 68, 68, 0.15);
-  color: #fca5a5;
+  background: color-mix(in srgb, var(--danger) 14%, transparent);
+  color: var(--danger-hover);
 }
 </style>
diff --git a/src/renderer/src/comfyTitlePopup/main.ts b/src/renderer/src/comfyTitlePopup/main.ts
index 6b5d25c6..9f77a681 100644
--- a/src/renderer/src/comfyTitlePopup/main.ts
+++ b/src/renderer/src/comfyTitlePopup/main.ts
@@ -24,10 +24,7 @@ document.documentElement.setAttribute('data-theme', 'dark')
 // Install the picker-settings `window.api` shim BEFORE Vue mounts so
 // any module that captures `window.api` at import time (e.g. the
 // shared `useComfyUISettings` composable inside `ComfyUISettingsContent`)
-// sees the shim populated. Compact mode doesn't need this, but the
-// expanded Manage state mounts the settings UI synchronously after a
-// `setPickerMode` round-trip — having the shim ready up front avoids a
-// race between the mode flip and the first IPC call.
+// sees the shim populated.
 installPickerSettingsApiShim()
 
 // Pinia — the per-install settings UI's `useComfyUISettings` reads
diff --git a/src/renderer/src/components/BrandBackground.vue b/src/renderer/src/components/BrandBackground.vue
index bbf0d5c2..f48ebc1e 100644
--- a/src/renderer/src/components/BrandBackground.vue
+++ b/src/renderer/src/components/BrandBackground.vue
@@ -17,7 +17,7 @@ withDefaults(
   defineProps<{
     vignette?: boolean
   }>(),
-  { vignette: false },
+  { vignette: false }
 )
 </script>
 
diff --git a/src/renderer/src/components/BrandTakeoverLayout.vue b/src/renderer/src/components/BrandTakeoverLayout.vue
index 0c6c0ca2..366c1292 100644
--- a/src/renderer/src/components/BrandTakeoverLayout.vue
+++ b/src/renderer/src/components/BrandTakeoverLayout.vue
@@ -9,6 +9,9 @@
  *   - Full-viewport fixed positioning over the launcher panel.
  *   - Fade-in animation on mount.
  *   - ComfyC logo pinned top-left.
+ *   - Dialog a11y baseline: role="dialog", aria-modal, focus capture on
+ *     mount + restore on unmount. Every takeover inherits this so we
+ *     never ship one without it.
  *
  * Background visuals (outer frame, inner frame, beams, optional vignette)
  * live in `BrandBackground.vue` so non-takeover surfaces (chooser
@@ -29,6 +32,7 @@
  * deferred. Same approach the inline implementation used before this
  * was extracted.
  */
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import ComfyCLogo from './icons/ComfyCLogo.vue'
 import BrandBackground from './BrandBackground.vue'
 
@@ -38,14 +42,55 @@ withDefaults(
      *  ships dark today. Pass 'light' once light-mode parity lands. */
     theme?: 'dark' | 'light'
     vignette?: boolean
+    /** Optional accessible name for the takeover. Falls back to a
+     *  generic label so screen readers always announce something. */
+    ariaLabel?: string
   }>(),
-  { theme: 'dark', vignette: false },
+  { theme: 'dark', vignette: false, ariaLabel: undefined },
 )
+
+const rootRef = ref<HTMLElement | null>(null)
+let returnFocusTo: HTMLElement | null = null
+
+function focusFirstInteractive(): void {
+  if (!rootRef.value) return
+  const explicit = rootRef.value.querySelector<HTMLElement>('[autofocus]')
+  if (explicit) {
+    explicit.focus()
+    return
+  }
+  const focusable = rootRef.value.querySelector<HTMLElement>(
+    'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+  )
+  focusable?.focus()
+}
+
+onMounted(() => {
+  returnFocusTo = document.activeElement instanceof HTMLElement ? document.activeElement : null
+  void nextTick(focusFirstInteractive)
+})
+
+onBeforeUnmount(() => {
+  try {
+    returnFocusTo?.focus()
+  } catch {
+    /* trigger element was removed while takeover was open */
+  }
+  returnFocusTo = null
+})
 </script>
 
 <template>
   <Teleport to="body">
-    <div class="brand-takeover-root" :data-theme="theme">
+    <div
+      ref="rootRef"
+      class="brand-takeover-root"
+      :data-theme="theme"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="ariaLabel"
+      tabindex="-1"
+    >
       <BrandBackground :vignette="vignette">
         <div class="brand-logo-row">
           <ComfyCLogo class="brand-logo" />
diff --git a/src/renderer/src/components/BrandVariantList.vue b/src/renderer/src/components/BrandVariantList.vue
index fed845b5..7a77ac7f 100644
--- a/src/renderer/src/components/BrandVariantList.vue
+++ b/src/renderer/src/components/BrandVariantList.vue
@@ -18,21 +18,14 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div
-    class="brand-variant-list"
-    role="radiogroup"
-    :aria-label="ariaLabel"
-  >
+  <div class="brand-variant-list" role="radiogroup" :aria-label="ariaLabel">
     <button
       v-for="opt in options"
       :key="opt.value"
       type="button"
       role="radio"
       :aria-checked="selectedValue === opt.value"
-      :class="[
-        'brand-variant-row',
-        { 'brand-variant-row--selected': selectedValue === opt.value }
-      ]"
+      :class="['brand-variant-row', { 'brand-variant-row--selected': selectedValue === opt.value }]"
       @click="$emit('select', opt)"
     >
       <span class="brand-variant-row__icon" aria-hidden="true">
@@ -113,7 +106,7 @@ const { t } = useI18n()
   width: 40px;
   height: 40px;
   border-radius: 6px;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--chooser-surface-bg);
   overflow: hidden;
 }
 .brand-variant-row__icon img {
diff --git a/src/renderer/src/components/ChoiceCard.vue b/src/renderer/src/components/ChoiceCard.vue
index 4cc6130e..9be5e0c9 100644
--- a/src/renderer/src/components/ChoiceCard.vue
+++ b/src/renderer/src/components/ChoiceCard.vue
@@ -11,11 +11,20 @@ withDefaults(
     /** Adds a soft plum glow behind the card content. Opt-in for the
      *  Cloud option on the first-use pick step — Local stays plain. */
     glow?: boolean
+    /** Renders the card as a radio option: indicator on the left, no
+     *  trailing arrow. The card click becomes "select", not "commit" —
+     *  the parent owns the commit step via a separate Continue button. */
+    selectable?: boolean
+    /** Whether this radio card is the currently-picked option. Only
+     *  meaningful when `selectable` is true. */
+    selected?: boolean
   }>(),
   {
     tagline: '',
     disabled: false,
-    glow: false
+    glow: false,
+    selectable: false,
+    selected: false
   }
 )
 
@@ -25,19 +34,36 @@ defineEmits<{ click: [] }>()
 <template>
   <button
     type="button"
-    :class="['choice-card', { 'choice-card--glow': glow }]"
+    :class="[
+      'choice-card',
+      { 'choice-card--glow': glow, 'choice-card--selected': selectable && selected }
+    ]"
+    :role="selectable ? 'radio' : undefined"
+    :aria-checked="selectable ? selected : undefined"
+    :tabindex="selectable ? (selected ? 0 : -1) : undefined"
     :disabled="disabled"
     @click="$emit('click')"
   >
     <div v-if="tagline" class="choice-card__tagline">{{ tagline }}</div>
     <div class="choice-card__body">
+      <span v-if="selectable" class="choice-card__radio" aria-hidden="true">
+        <span v-if="selected" class="choice-card__radio-dot" />
+      </span>
       <div class="choice-card__text">
-        <div class="choice-card__label">{{ label }}</div>
+        <div class="choice-card__label">
+          <span class="choice-card__label-text">{{ label }}</span>
+          <span v-if="$slots['label-trailing']" class="choice-card__label-trailing">
+            <slot name="label-trailing" />
+          </span>
+        </div>
         <div class="choice-card__desc">
           <InlineRichText :text="description" />
+          <div v-if="$slots['desc-trailing']" class="choice-card__desc-trailing">
+            <slot name="desc-trailing" />
+          </div>
         </div>
       </div>
-      <ArrowRight :size="18" class="choice-card__arrow" aria-hidden="true" />
+      <ArrowRight v-if="!selectable" :size="18" class="choice-card__arrow" aria-hidden="true" />
     </div>
   </button>
 </template>
@@ -90,6 +116,43 @@ defineEmits<{ click: [] }>()
   opacity: 0.5;
   cursor: not-allowed;
 }
+/* Selectable variant: card acts as a radio option. Selected state
+ * lifts the border to the brand blue (--accent-primary) — yellow is
+ * reserved for the CTA so the radio doesn't compete with the
+ * Continue button for primary attention. */
+.choice-card--selected {
+  border-color: color-mix(in oklab, var(--accent-primary) 60%, transparent);
+  background: color-mix(in oklab, var(--accent-primary) 6%, var(--brand-surface-bg-hover));
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-primary) 40%, transparent) inset;
+}
+.choice-card--selected:hover:not(:disabled) {
+  border-color: color-mix(in oklab, var(--accent-primary) 75%, transparent);
+  background: color-mix(in oklab, var(--accent-primary) 9%, rgba(137, 137, 137, 0.13));
+}
+.choice-card__radio {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  border: 1.5px solid var(--brand-surface-border-hover);
+  background: rgba(0, 0, 0, 0.1);
+  transition:
+    border-color 120ms ease,
+    background 120ms ease;
+}
+.choice-card--selected .choice-card__radio {
+  border-color: var(--accent-primary);
+  background: transparent;
+}
+.choice-card__radio-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--accent-primary);
+}
 
 .choice-card__tagline {
   position: relative;
@@ -119,10 +182,16 @@ defineEmits<{ click: [] }>()
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
   min-width: 0;
 }
 .choice-card__label {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
   font-family: var(--font-sans);
   font-size: var(--takeover-fs-lead);
   font-weight: 700;
@@ -130,6 +199,17 @@ defineEmits<{ click: [] }>()
   color: var(--neutral-100);
   transition: color 120ms ease;
 }
+.choice-card__label-text {
+  flex: 0 0 auto;
+}
+.choice-card__label-trailing {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+.choice-card__desc-trailing {
+  margin-top: 6px;
+}
 .choice-card__desc {
   font-family: var(--font-sans);
   font-size: var(--takeover-fs-body);
diff --git a/src/renderer/src/components/DialogHost.vue b/src/renderer/src/components/DialogHost.vue
new file mode 100644
index 00000000..52b11bee
--- /dev/null
+++ b/src/renderer/src/components/DialogHost.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import BasePrompt from './ui/BasePrompt.vue'
+import BaseActionSheet from './ui/BaseActionSheet.vue'
+import BaseAlert from './ui/BaseAlert.vue'
+import { useDialogs } from '../composables/useDialogs'
+
+/**
+ * Singleton renderer for `useDialogs()` — mirrors the role
+ * `ModalDialog.vue` plays for `useModal()`. Mount once per renderer
+ * entry point (panel, popup) next to `<ModalDialog />`.
+ *
+ * Reads `useDialogs().state` and renders whichever primitive the
+ * current `kind` calls for. Resolution forwards back through the
+ * composable so the in-flight promise settles.
+ */
+
+const {
+  state,
+  submitPrompt,
+  selectActionSheet,
+  acknowledgeAlert,
+  confirmPrimary,
+  confirmSecondary,
+  cancel
+} = useDialogs()
+
+const showPrompt = computed(() => state.open && state.kind === 'prompt')
+const showActionSheet = computed(() => state.open && state.kind === 'actionSheet')
+const showAlert = computed(() => state.open && state.kind === 'alert')
+const showConfirm = computed(() => state.open && state.kind === 'confirm')
+</script>
+
+<template>
+  <BasePrompt
+    :open="showPrompt"
+    :title="state.prompt.title"
+    :message="state.prompt.message"
+    :placeholder="state.prompt.placeholder"
+    :default-value="state.prompt.defaultValue"
+    :confirm-label="state.prompt.confirmLabel"
+    :cancel-label="state.prompt.cancelLabel"
+    :input-label="state.prompt.inputLabel"
+    :required="state.prompt.required"
+    :message-details="state.prompt.messageDetails"
+    :size="state.prompt.size"
+    @submit="submitPrompt"
+    @cancel="cancel"
+  />
+
+  <BaseActionSheet
+    :open="showActionSheet"
+    :title="state.actionSheet.title"
+    :message="state.actionSheet.message"
+    :items="state.actionSheet.items"
+    :cancel-label="state.actionSheet.cancelLabel"
+    :size="state.actionSheet.size"
+    @select="selectActionSheet"
+    @cancel="cancel"
+  />
+
+  <!-- Alert: single OK, no Cancel. ESC / backdrop resolve via `close`
+       (treated as acknowledgement, matching browser-`alert()`
+       semantics — there's nothing to "cancel" against). -->
+  <BaseAlert
+    :open="showAlert"
+    :title="state.alert.title"
+    :message="state.alert.message"
+    :button-label="state.alert.buttonLabel"
+    :tone="state.alert.tone"
+    :message-details="state.alert.messageDetails"
+    @close="acknowledgeAlert"
+  />
+
+  <!-- Confirm: primary + optional secondary + cancel (footer button
+       and/or header ✕). `BaseAlert` renders all three; resolution
+       routes back to `confirmPrimary` / `confirmSecondary` / `cancel`
+       so the awaited promise settles with the right ConfirmResult. -->
+  <BaseAlert
+    :open="showConfirm"
+    :title="state.confirm.title"
+    :message="state.confirm.message"
+    :button-label="state.confirm.confirmLabel"
+    :tone="state.confirm.tone"
+    :show-cancel="state.confirm.showCancel"
+    :cancel-label="state.confirm.cancelLabel"
+    :secondary-label="state.confirm.secondaryLabel"
+    :secondary-tone="state.confirm.secondaryTone"
+    :show-close-icon="state.confirm.showCloseIcon"
+    :message-details="state.confirm.messageDetails"
+    @close="confirmPrimary"
+    @secondary="confirmSecondary"
+    @cancel="cancel"
+  />
+</template>
diff --git a/src/renderer/src/components/DownloadsModal.vue b/src/renderer/src/components/DownloadsModal.vue
index 5e86c413..95189e90 100644
--- a/src/renderer/src/components/DownloadsModal.vue
+++ b/src/renderer/src/components/DownloadsModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import {
   ArrowDownToLine,
@@ -63,6 +63,17 @@ const ordered = computed<ModelDownloadProgress[]>(() =>
   ),
 )
 
+const activeCount = computed(() => store.activeDownloads.length)
+const completedCount = computed(
+  () => store.finishedDownloads.filter((d) => d.status === 'completed').length,
+)
+const errorCount = computed(
+  () =>
+    store.finishedDownloads.filter(
+      (d) => d.status === 'error' || d.status === 'cancelled',
+    ).length,
+)
+
 const filtered = computed<ModelDownloadProgress[]>(() => {
   switch (filter.value) {
     case 'active':
@@ -112,12 +123,32 @@ function showInFolder(savePath: string | undefined): void {
 function dismissOne(url: string): void {
   store.dismiss(url)
 }
-const filters = computed<{ key: StatusFilter; label: string }[]>(() => [
-  { key: 'all', label: t('downloadsTab.filterAll') },
-  { key: 'active', label: t('downloadsTab.filterActive') },
-  { key: 'completed', label: t('downloadsTab.filterCompleted') },
-  { key: 'error', label: t('downloadsTab.filterErrored') },
-])
+/**
+ * Smart filter visibility: only render pills for buckets that have data,
+ * and only render the bar at all when ≥ 2 buckets are non-empty (a lone
+ * bucket *is* the list — no filtering needed).
+ */
+const visibleFilters = computed<{ key: StatusFilter; label: string }[]>(() => {
+  const present: { key: StatusFilter; label: string }[] = []
+  if (activeCount.value > 0) {
+    present.push({ key: 'active', label: t('downloadsTab.filterActive') })
+  }
+  if (completedCount.value > 0) {
+    present.push({ key: 'completed', label: t('downloadsTab.filterCompleted') })
+  }
+  if (errorCount.value > 0) {
+    present.push({ key: 'error', label: t('downloadsTab.filterErrored') })
+  }
+  if (present.length < 2) return []
+  return [{ key: 'all', label: t('downloadsTab.filterAll') }, ...present]
+})
+
+watch(visibleFilters, (next) => {
+  if (filter.value === 'all') return
+  if (!next.some((f) => f.key === filter.value)) {
+    filter.value = 'all'
+  }
+})
 
 function isTerminal(status: ModelDownloadStatus): boolean {
   return isTerminalModelDownloadStatus(status)
@@ -128,35 +159,36 @@ function isTerminal(status: ModelDownloadStatus): boolean {
   <BaseModal
     :open="props.open"
     size="lg"
+    blur-overlay
     :aria-label="t('downloadsTab.title')"
     @close="emit('close')"
   >
     <template #header>
       <div class="dlm-header">
         <h2 class="dlm-title">{{ t('downloadsTab.title') }}</h2>
-        <div class="dlm-actions">
-          <div
-            class="filter-pill-group"
-            role="tablist"
-            :aria-label="t('downloadsTab.filterAriaLabel')"
-          >
-            <button
-              v-for="f in filters"
-              :key="f.key"
-              type="button"
-              class="filter-pill dlm-filter-chip"
-              :class="{ active: filter === f.key }"
-              role="tab"
-              :aria-selected="filter === f.key"
-              @click="filter = f.key"
-            >
-              {{ f.label }}
-            </button>
-          </div>
-        </div>
       </div>
     </template>
 
+    <div
+      v-if="visibleFilters.length > 0"
+      class="dlm-filterbar filter-pill-group"
+      role="tablist"
+      :aria-label="t('downloadsTab.filterAriaLabel')"
+    >
+      <button
+        v-for="f in visibleFilters"
+        :key="f.key"
+        type="button"
+        class="filter-pill dlm-filter-chip"
+        :class="{ active: filter === f.key }"
+        role="tab"
+        :aria-selected="filter === f.key"
+        @click="filter = f.key"
+      >
+        {{ f.label }}
+      </button>
+    </div>
+
     <div v-if="filtered.length === 0" class="dlm-empty">
       <ArrowDownToLine :size="18" />
       <span>{{ t('downloadsTab.empty') }}</span>
@@ -256,9 +288,7 @@ function isTerminal(status: ModelDownloadStatus): boolean {
 .dlm-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 12px;
-  flex-wrap: wrap;
 }
 
 .dlm-title {
@@ -269,16 +299,18 @@ function isTerminal(status: ModelDownloadStatus): boolean {
   color: var(--neutral-100);
 }
 
-.dlm-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
 /* `.filter-pill` / `.filter-pill-group` are global (assets/main.css)
  * and shared with ChooserView + the Settings tab. The local
  * `.dlm-filter-chip` class is a test-selector hook only. */
+.dlm-filterbar {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  margin: -16px -24px 12px;
+  padding: 12px 24px;
+  background: var(--modal-surface-bg);
+  border-bottom: 1px solid color-mix(in oklab, var(--neutral-100) 8%, transparent);
+}
 
 .dlm-empty {
   display: flex;
@@ -437,3 +469,14 @@ function isTerminal(status: ModelDownloadStatus): boolean {
   filter: brightness(1.1);
 }
 </style>
+
+<!-- Non-scoped: while the host is in overlay-panel mode the page behind
+     the modal is the live ComfyUI canvas (PanelApp toggles
+     `body.panel-overlay-mode` with a transparent background). The
+     default BaseModal scrim (70% neutral-800) crushes that canvas
+     visually; soften it to a light tint and lean on the blur prop. -->
+<style>
+body.panel-overlay-mode .base-modal-overlay {
+  background: color-mix(in oklab, var(--neutral-900) 28%, transparent);
+}
+</style>
diff --git a/src/renderer/src/components/InfoTooltip.test.ts b/src/renderer/src/components/InfoTooltip.test.ts
index cf6cb3b5..8d358ad5 100644
--- a/src/renderer/src/components/InfoTooltip.test.ts
+++ b/src/renderer/src/components/InfoTooltip.test.ts
@@ -1,7 +1,13 @@
 import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import InfoTooltip from './InfoTooltip.vue'
 
+/**
+ * `InfoTooltip` composes the shared `Tooltip` primitive around the
+ * lucide `CircleHelp` icon. These tests pin the trigger surface +
+ * forwarding behavior — primitive-level placement / flip / arrow
+ * concerns belong in `ui/Tooltip.test.ts`.
+ */
 describe('InfoTooltip', () => {
   it('renders the icon', () => {
     const wrapper = mount(InfoTooltip, { props: { text: 'tip' } })
@@ -9,55 +15,52 @@ describe('InfoTooltip', () => {
   })
 
   it('does not show bubble initially', () => {
-    const wrapper = mount(InfoTooltip, { props: { text: 'Hello tooltip' } })
-    expect(wrapper.find('.info-tooltip-bubble').exists()).toBe(false)
-  })
-
-  it('shows bubble with correct text on mouseenter', async () => {
     const wrapper = mount(InfoTooltip, {
       props: { text: 'Hello tooltip' },
       attachTo: document.body,
     })
-    await wrapper.find('.info-tooltip-trigger').trigger('mouseenter')
-    const bubble = document.querySelector('.info-tooltip-bubble')
-    expect(bubble).not.toBeNull()
-    expect(bubble!.textContent).toBe('Hello tooltip')
+    expect(document.querySelector('.tooltip-bubble')).toBeNull()
     wrapper.unmount()
   })
 
-  it('hides bubble on mouseleave', async () => {
+  it('shows bubble with correct text on mouseenter', async () => {
     const wrapper = mount(InfoTooltip, {
-      props: { text: 'tip' },
+      props: { text: 'Hello tooltip', delayMs: 0 } as Record<string, unknown>,
       attachTo: document.body,
     })
-    await wrapper.find('.info-tooltip-trigger').trigger('mouseenter')
-    expect(document.querySelector('.info-tooltip-bubble')).not.toBeNull()
-    await wrapper.find('.info-tooltip-trigger').trigger('mouseleave')
-    expect(document.querySelector('.info-tooltip-bubble')).toBeNull()
+    await wrapper.find('.tooltip-wrap').trigger('mouseenter')
+    await flushPromises()
+    const bubble = document.querySelector('.tooltip-bubble')
+    expect(bubble).not.toBeNull()
+    expect(bubble!.textContent?.trim()).toContain('Hello tooltip')
     wrapper.unmount()
   })
 
-  it('defaults to top side positioning', async () => {
+  it('hides bubble on mouseleave', async () => {
     const wrapper = mount(InfoTooltip, {
-      props: { text: 'tip' },
+      props: { text: 'tip', delayMs: 0 } as Record<string, unknown>,
       attachTo: document.body,
     })
-    await wrapper.find('.info-tooltip-trigger').trigger('mouseenter')
-    const bubble = document.querySelector('.info-tooltip-bubble') as HTMLElement
-    expect(bubble.style.bottom).toBeTruthy()
-    expect(bubble.style.top).toBeFalsy()
+    await wrapper.find('.tooltip-wrap').trigger('mouseenter')
+    await flushPromises()
+    expect(document.querySelector('.tooltip-bubble')).not.toBeNull()
+    await wrapper.find('.tooltip-wrap').trigger('mouseleave')
+    await flushPromises()
+    expect(document.querySelector('.tooltip-bubble')).toBeNull()
     wrapper.unmount()
   })
 
-  it('uses top positioning for bottom side', async () => {
+  it('renders the bubble with a resolved `data-side` attribute', async () => {
     const wrapper = mount(InfoTooltip, {
-      props: { text: 'tip', side: 'bottom' },
+      props: { text: 'tip', side: 'bottom', delayMs: 0 } as Record<string, unknown>,
       attachTo: document.body,
     })
-    await wrapper.find('.info-tooltip-trigger').trigger('mouseenter')
-    const bubble = document.querySelector('.info-tooltip-bubble') as HTMLElement
-    expect(bubble.style.top).toBeTruthy()
-    expect(bubble.style.bottom).toBeFalsy()
+    await wrapper.find('.tooltip-wrap').trigger('mouseenter')
+    await flushPromises()
+    const bubble = document.querySelector('.tooltip-bubble')
+    // jsdom returns zero-sized rects, so the placement resolver may flip
+    // to whichever axis has more room — assert one of the valid sides.
+    expect(bubble?.getAttribute('data-side')).toMatch(/^(top|bottom|left|right)$/)
     wrapper.unmount()
   })
 })
diff --git a/src/renderer/src/components/InfoTooltip.vue b/src/renderer/src/components/InfoTooltip.vue
index ac98b064..fd022b7c 100644
--- a/src/renderer/src/components/InfoTooltip.vue
+++ b/src/renderer/src/components/InfoTooltip.vue
@@ -1,36 +1,29 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { CircleHelp } from 'lucide-vue-next'
-import { useTooltip } from '../composables/useTooltip'
+import Tooltip from './ui/Tooltip.vue'
+import type { TooltipSide } from '../composables/useTooltip'
 
+/**
+ * Inline help-icon trigger that composes the shared `Tooltip` primitive.
+ * Owns the icon + hover affordance; defers placement, teleport, arrow,
+ * and viewport collision handling to the primitive in `/ui`.
+ */
 const props = withDefaults(
   defineProps<{
     text: string
-    side?: 'top' | 'bottom'
+    side?: TooltipSide
+    delayMs?: number
   }>(),
-  { side: 'top' }
+  { side: 'top', delayMs: 100 }
 )
-
-const iconRef = ref<HTMLElement | null>(null)
-const { bubbleStyle, visible, show, hide } = useTooltip(iconRef, () => props.side)
 </script>
 
 <template>
-  <span
-    ref="iconRef"
-    class="info-tooltip-trigger"
-    @mouseenter="show"
-    @mouseleave="hide"
-  >
-    <CircleHelp :size="14" class="info-tooltip-icon" />
-    <Teleport to="body">
-      <span
-        v-if="visible"
-        class="info-tooltip-bubble"
-        :style="bubbleStyle"
-      >{{ text }}</span>
-    </Teleport>
-  </span>
+  <Tooltip :text="props.text" :side="props.side" :delay-ms="props.delayMs">
+    <span class="info-tooltip-trigger" tabindex="0" role="button" :aria-label="props.text">
+      <CircleHelp :size="14" class="info-tooltip-icon" />
+    </span>
+  </Tooltip>
 </template>
 
 <style scoped>
@@ -45,35 +38,15 @@ const { bubbleStyle, visible, show, hide } = useTooltip(iconRef, () => props.sid
 .info-tooltip-icon {
   color: var(--text-muted);
   opacity: 0.6;
-  transition: opacity 0.15s, color 0.15s;
+  transition:
+    opacity 0.15s,
+    color 0.15s;
   flex-shrink: 0;
 }
 
-.info-tooltip-trigger:hover .info-tooltip-icon {
+.info-tooltip-trigger:hover .info-tooltip-icon,
+.info-tooltip-trigger:focus-visible .info-tooltip-icon {
   opacity: 1;
   color: var(--accent);
 }
 </style>
-
-<style>
-.info-tooltip-bubble {
-  position: fixed;
-  transform: translateX(-50%);
-  width: max-content;
-  max-width: 260px;
-  padding: 6px 10px;
-  border-radius: 6px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  color: var(--text);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1.4;
-  text-transform: none;
-  letter-spacing: 0;
-  white-space: normal;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
-  z-index: 10001;
-  pointer-events: none;
-}
-</style>
diff --git a/src/renderer/src/components/SnapshotDiffView.vue b/src/renderer/src/components/SnapshotDiffView.vue
index 7a6213cf..fd0fef7a 100644
--- a/src/renderer/src/components/SnapshotDiffView.vue
+++ b/src/renderer/src/components/SnapshotDiffView.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-// TODO(stale-old-modal): delete after Settings drawer (v2,
-// ComfyUISettingsPanel) reaches functional parity and ships everywhere.
 import { useI18n } from 'vue-i18n'
 import type { SnapshotDiffResult } from '../types/ipc'
 import { formatNodeVersion } from '../lib/snapshots'
@@ -14,7 +12,6 @@ const { t } = useI18n()
 function formatVersion(v: { formattedVersion: string }): string {
   return v.formattedVersion
 }
-
 </script>
 
 <template>
@@ -35,7 +32,12 @@ function formatVersion(v: { formattedVersion: string }): string {
   </div>
 
   <!-- Node changes -->
-  <div v-if="diff.nodesAdded.length > 0 || diff.nodesRemoved.length > 0 || diff.nodesChanged.length > 0" class="diff-section">
+  <div
+    v-if="
+      diff.nodesAdded.length > 0 || diff.nodesRemoved.length > 0 || diff.nodesChanged.length > 0
+    "
+    class="diff-section"
+  >
     <div class="diff-section-title">{{ t('snapshots.customNodes') }}</div>
     <div v-for="n in diff.nodesAdded" :key="'add-' + n.id" class="diff-line diff-added">
       + {{ n.id }} {{ formatNodeVersion(n) }}
@@ -44,13 +46,20 @@ function formatVersion(v: { formattedVersion: string }): string {
       − {{ n.id }} {{ formatNodeVersion(n) }}
     </div>
     <div v-for="n in diff.nodesChanged" :key="'chg-' + n.id" class="diff-line diff-changed">
-      ~ {{ n.id }}: {{ n.from.version || (n.from.commit ? n.from.commit.slice(0, 7) : '?') }} → {{ n.to.version || (n.to.commit ? n.to.commit.slice(0, 7) : '?') }}
-      <template v-if="n.from.enabled !== n.to.enabled">, {{ n.from.enabled ? 'enabled' : 'disabled' }} → {{ n.to.enabled ? 'enabled' : 'disabled' }}</template>
+      ~ {{ n.id }}: {{ n.from.version || (n.from.commit ? n.from.commit.slice(0, 7) : '?') }} →
+      {{ n.to.version || (n.to.commit ? n.to.commit.slice(0, 7) : '?') }}
+      <template v-if="n.from.enabled !== n.to.enabled"
+        >, {{ n.from.enabled ? 'enabled' : 'disabled' }} →
+        {{ n.to.enabled ? 'enabled' : 'disabled' }}</template
+      >
     </div>
   </div>
 
   <!-- Pip changes -->
-  <div v-if="diff.pipsAdded.length > 0 || diff.pipsRemoved.length > 0 || diff.pipsChanged.length > 0" class="diff-section">
+  <div
+    v-if="diff.pipsAdded.length > 0 || diff.pipsRemoved.length > 0 || diff.pipsChanged.length > 0"
+    class="diff-section"
+  >
     <div class="diff-section-title">
       {{ t('snapshots.pipPackages') }}
       ({{ diff.pipsAdded.length + diff.pipsRemoved.length + diff.pipsChanged.length }})
@@ -76,24 +85,36 @@ function formatVersion(v: { formattedVersion: string }): string {
 }
 
 .diff-section-title {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 11px;
+  font-weight: 500;
   color: var(--text-muted);
   text-transform: uppercase;
-  letter-spacing: 0.3px;
+  letter-spacing: 0.04em;
   margin-bottom: 4px;
 }
 
 .diff-line {
-  font-size: 13px;
-  font-family: monospace;
+  font-size: 12px;
+  font-family: var(--font-mono, ui-monospace, monospace);
   padding: 1px 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   user-select: text;
+  color: var(--text);
+}
+
+/* +/−/~ prefixes already encode add/remove/change — color is just a
+ * second-order hint, so keep it muted. `changed` stays neutral on
+ * purpose: it's by far the most common line and shouldn't out-shout
+ * the actual additions/removals. */
+.diff-added {
+  color: color-mix(in oklab, var(--success) 60%, var(--text));
+}
+.diff-removed {
+  color: color-mix(in oklab, var(--danger) 60%, var(--text));
+}
+.diff-changed {
+  color: var(--text-muted);
 }
-.diff-added { color: var(--success); }
-.diff-removed { color: var(--danger); }
-.diff-changed { color: var(--warning); }
 </style>
diff --git a/src/renderer/src/components/TermsModal.test.ts b/src/renderer/src/components/TermsModal.test.ts
index bab7ec4e..e3523c97 100644
--- a/src/renderer/src/components/TermsModal.test.ts
+++ b/src/renderer/src/components/TermsModal.test.ts
@@ -70,7 +70,8 @@ describe('TermsModal', () => {
 
   it('emits `close` when the ✕ button is clicked', async () => {
     const wrapper = mountModal('eula')
-    await wrapper.find('[data-testid="terms-modal-close"]').trigger('click')
+    // ✕ now lives on the BaseModal primitive.
+    await wrapper.find('[data-testid="base-modal-close"]').trigger('click')
     expect(wrapper.emitted('close')).toHaveLength(1)
   })
 
diff --git a/src/renderer/src/components/TermsModal.vue b/src/renderer/src/components/TermsModal.vue
index 14bf4ffc..1784b7c3 100644
--- a/src/renderer/src/components/TermsModal.vue
+++ b/src/renderer/src/components/TermsModal.vue
@@ -1,24 +1,32 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
-import { X } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import BaseModal from './ui/BaseModal.vue'
 import InlineRichText from './InlineRichText.vue'
 import { LEGAL_DOCS, type LegalDocId } from '../lib/legalDocs'
 
 const props = withDefaults(
   defineProps<{
+    /** Parent-controlled visibility. Bound through to BaseModal so its
+     *  focus capture / restore lifecycle fires on the open→close edge —
+     *  hardcoding `:open="true"` here would freeze that watcher and
+     *  keyboard focus would never return to the trigger. */
+    open?: boolean
     /** Which legal document to render. The consent screen passes
      *  'eula' for the EULA-and-ToS checkbox link and 'privacy' for
      *  the analytics-consent link. Defaults to privacy so existing
      *  call sites keep working. */
     doc?: LegalDocId
   }>(),
-  { doc: 'privacy' },
+  { open: true, doc: 'privacy' },
 )
 
 const emit = defineEmits<{
   close: []
 }>()
 
+const { t } = useI18n()
+
 const policy = computed(() => LEGAL_DOCS[props.doc] ?? LEGAL_DOCS.privacy)
 /** i18n key for the modal title, picked per doc so screen readers and
  *  the visible heading both reflect what the user is actually viewing. */
@@ -34,152 +42,61 @@ const titleKey = computed(() => {
       return 'firstUse.privacyModalTitle'
   }
 })
-
-const overlayRef = ref<HTMLDivElement | null>(null)
-const closeBtnRef = ref<HTMLButtonElement | null>(null)
-const mouseDownOnOverlay = ref(false)
-/** Element that owned focus before the modal opened. Captured on mount
- *  so close (any path: ESC, ✕, overlay click) can restore focus to the
- *  original trigger. */
-let returnFocusTo: HTMLElement | null = null
-
-function onOverlayMouseDown(e: MouseEvent) {
-  mouseDownOnOverlay.value = e.target === overlayRef.value
-}
-function onOverlayClick(e: MouseEvent) {
-  if (e.target === overlayRef.value && mouseDownOnOverlay.value) emit('close')
-  mouseDownOnOverlay.value = false
-}
-function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape') emit('close')
-}
-
-onMounted(() => {
-  document.addEventListener('keydown', onKeydown)
-  returnFocusTo = document.activeElement instanceof HTMLElement ? document.activeElement : null
-  void nextTick(() => closeBtnRef.value?.focus())
-})
-onUnmounted(() => {
-  document.removeEventListener('keydown', onKeydown)
-  returnFocusTo?.focus()
-})
 </script>
 
 <template>
-  <Teleport to="body">
-    <Transition name="modal-fade" appear>
-      <div
-        ref="overlayRef"
-        class="terms-overlay"
-        role="dialog"
-        aria-modal="true"
-        :aria-label="$t(titleKey)"
-        @mousedown="onOverlayMouseDown"
-        @click="onOverlayClick"
-      >
-        <div class="terms-content modal-fade-panel">
-          <button
-            ref="closeBtnRef"
-            class="terms-close"
-            type="button"
-            :aria-label="$t('common.close')"
-            data-testid="terms-modal-close"
-            @click="emit('close')"
-          >
-            <X :size="18" />
-          </button>
-          <header class="terms-header">
-            <h2 class="terms-title">{{ $t(titleKey) }}</h2>
-            <div class="terms-meta">
-              <span
-                ><strong>{{ $t('firstUse.legalDocEffective') }}:</strong>
-                {{ policy.effectiveDate }}</span
-              >
-              <span
-                ><strong>{{ $t('firstUse.legalDocAppliesTo') }}:</strong>
-                {{ policy.appliesTo }}</span
-              >
-            </div>
-          </header>
-          <div class="terms-body" tabindex="0">
-            <template v-for="(block, i) in policy.blocks" :key="`${doc}-${i}`">
-              <h2 v-if="block.kind === 'h2'" class="terms-h2">{{ block.text }}</h2>
-              <h3 v-else-if="block.kind === 'h3'" class="terms-h3">{{ block.text }}</h3>
-              <p v-else-if="block.kind === 'p' && block.text" class="terms-p">
-                <InlineRichText :text="block.text" />
-              </p>
-              <ul v-else-if="block.kind === 'ul' && block.items" class="terms-ul">
-                <li v-for="(item, k) in block.items" :key="k">
-                  <InlineRichText :text="item" />
-                </li>
-              </ul>
-            </template>
-          </div>
-        </div>
+  <BaseModal
+    :open="open"
+    size="lg"
+    blur-overlay
+    :aria-label="t(titleKey)"
+    content-class="terms-content"
+    @close="emit('close')"
+  >
+    <template #header>
+      <h2 class="terms-title">{{ t(titleKey) }}</h2>
+      <div class="terms-meta">
+        <span
+          ><strong>{{ t('firstUse.legalDocEffective') }}:</strong>
+          {{ policy.effectiveDate }}</span
+        >
+        <span
+          ><strong>{{ t('firstUse.legalDocAppliesTo') }}:</strong>
+          {{ policy.appliesTo }}</span
+        >
       </div>
-    </Transition>
-  </Teleport>
+    </template>
+    <div class="terms-body" tabindex="0">
+      <template v-for="(block, i) in policy.blocks" :key="`${doc}-${i}`">
+        <h2 v-if="block.kind === 'h2'" class="terms-h2">{{ block.text }}</h2>
+        <h3 v-else-if="block.kind === 'h3'" class="terms-h3">{{ block.text }}</h3>
+        <p v-else-if="block.kind === 'p' && block.text" class="terms-p">
+          <InlineRichText :text="block.text" />
+        </p>
+        <ul v-else-if="block.kind === 'ul' && block.items" class="terms-ul">
+          <li v-for="(item, k) in block.items" :key="k">
+            <InlineRichText :text="item" />
+          </li>
+        </ul>
+      </template>
+    </div>
+  </BaseModal>
 </template>
 
 <style scoped>
-.terms-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 60;
-  display: grid;
-  place-items: center;
-  padding: clamp(48px, 8vh, 96px) clamp(24px, 5vw, 64px);
-}
-
-.terms-content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
+/* Pin the panel to the bespoke 720px width (between BaseModal's md/lg
+ * defaults of 640/800) and let the header's title + meta strip drive
+ * its own padding instead of BaseModal's narrower defaults. */
+:deep(.base-modal-panel.terms-content) {
   width: min(100%, 720px);
-  max-height: 100%;
-  border-radius: 14px;
-  overflow: hidden;
-  background: var(--neutral-900);
-  border: 1px solid color-mix(in oklab, var(--neutral-100) 6%, transparent);
-  box-shadow: 0 24px 64px 0 rgba(0, 0, 0, 0.35);
-}
-
-.terms-close {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  z-index: 2;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border-radius: 8px;
-  background: color-mix(in oklab, var(--text) 4%, transparent);
-  border: 1px solid transparent;
-  opacity: 0.7;
-  color: var(--neutral-100);
-  cursor: pointer;
-  transition:
-    background 120ms ease,
-    border-color 120ms ease,
-    opacity 120ms ease;
 }
-.terms-close:hover {
-  opacity: 1;
-  background: color-mix(in oklab, var(--neutral-950) 85%, transparent);
-  border-color: color-mix(in oklab, var(--neutral-100) 44%, transparent);
+:deep(.base-modal-panel.terms-content) .base-modal-header {
+  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.25rem) 1rem;
 }
-.terms-close:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+:deep(.base-modal-panel.terms-content) .base-modal-body {
+  padding: 1.25rem clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
 }
 
-.terms-header {
-  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.25rem) 1rem;
-  border-bottom: 1px solid color-mix(in oklab, var(--neutral-100) 8%, transparent);
-}
 .terms-title {
   margin: 0 0 8px 0;
   font-family: var(--font-display);
@@ -201,9 +118,6 @@ onUnmounted(() => {
 }
 
 .terms-body {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  padding: 1.25rem clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
   user-select: text;
   font-size: var(--takeover-fs-body);
   line-height: 1.6;
diff --git a/src/renderer/src/components/TooltipWrap.vue b/src/renderer/src/components/TooltipWrap.vue
index 293b3b2a..e8049acb 100644
--- a/src/renderer/src/components/TooltipWrap.vue
+++ b/src/renderer/src/components/TooltipWrap.vue
@@ -1,45 +1,31 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useTooltip } from '../composables/useTooltip'
+import Tooltip from './ui/Tooltip.vue'
+import type { TooltipAlign, TooltipSide } from '../composables/useTooltip'
 
-const props = withDefaults(
+/**
+ * Backwards-compat shim that forwards to the position-aware `Tooltip`
+ * primitive in `/ui`. Pre-existing call sites (DetailSection,
+ * InstallWizardModal, SettingsSectionList, DetailModal) keep importing
+ * `TooltipWrap` so the migration didn't have to mass-rename in the
+ * same PR as the primitive landing.
+ *
+ * TODO(tooltip-cleanup): replace `import TooltipWrap from
+ * '@/components/TooltipWrap.vue'` at call sites with `import Tooltip
+ * from '@/components/ui/Tooltip.vue'`, then delete this shim.
+ */
+
+withDefaults(
   defineProps<{
     text?: string
-    side?: 'top' | 'bottom'
+    side?: TooltipSide
+    align?: TooltipAlign
   }>(),
-  { text: undefined, side: 'top' }
-)
-
-const wrapRef = ref<HTMLElement | null>(null)
-const { bubbleStyle, visible, show, hide } = useTooltip(
-  wrapRef,
-  () => props.side,
-  () => !!props.text,
+  { text: undefined, side: 'top', align: 'center' },
 )
 </script>
 
 <template>
-  <span
-    ref="wrapRef"
-    class="tooltip-wrap"
-    @mouseenter="show"
-    @mouseleave="hide"
-    @focusin="show"
-    @focusout="hide"
-  >
+  <Tooltip :text="text" :side="side" :align="align">
     <slot />
-    <Teleport to="body">
-      <span
-        v-if="visible"
-        class="info-tooltip-bubble"
-        :style="bubbleStyle"
-      >{{ text }}</span>
-    </Teleport>
-  </span>
+  </Tooltip>
 </template>
-
-<style scoped>
-.tooltip-wrap {
-  display: inline-flex;
-}
-</style>
diff --git a/src/renderer/src/components/WhyTryCloudModal.vue b/src/renderer/src/components/WhyTryCloudModal.vue
index a16a7afa..88dd8739 100644
--- a/src/renderer/src/components/WhyTryCloudModal.vue
+++ b/src/renderer/src/components/WhyTryCloudModal.vue
@@ -118,6 +118,9 @@ onUnmounted(() => {
   display: grid;
   place-items: center;
   padding: clamp(72px, 10vh, 132px) clamp(32px, 5vw, 80px) clamp(80px, 11vh, 140px);
+  background: color-mix(in oklab, var(--neutral-800) 70%, transparent);
+  backdrop-filter: blur(8px) saturate(115%);
+  -webkit-backdrop-filter: blur(8px) saturate(115%);
 }
 
 .why-cloud-content {
diff --git a/src/renderer/src/components/settings/ComfyUISettingsContent.vue b/src/renderer/src/components/settings/ComfyUISettingsContent.vue
index 9d06242e..42366e66 100644
--- a/src/renderer/src/components/settings/ComfyUISettingsContent.vue
+++ b/src/renderer/src/components/settings/ComfyUISettingsContent.vue
@@ -1,22 +1,18 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, toRef, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ChevronUp, ArrowLeft } from 'lucide-vue-next'
+import { ChevronUp, HardDrive, SlidersHorizontal, Info, RefreshCw, History } from 'lucide-vue-next'
 import { useComfyUISettings } from '../../composables/useComfyUISettings'
 import { useSessionStore } from '../../stores/sessionStore'
 import { findActionById } from '../../lib/findAction'
 import MoreMenu from '../../views/comfyUISettings/MoreMenu.vue'
 import ArgsBuilderPage from '../../views/comfyUISettings/ArgsBuilderPage.vue'
 import SnapshotsView from '../../views/comfyUISettings/SnapshotsView.vue'
+import StatusFactPanel from '../../views/comfyUISettings/StatusFactPanel.vue'
 import SettingsSectionList from '../../views/comfyUISettings/SettingsSectionList.vue'
-import type { PickerTab } from '../../lib/pickerTabs'
-import type {
-  ActionDef,
-  DetailField,
-  DetailSection,
-  Installation,
-  ShowProgressOpts,
-} from '../../types/ipc'
+import StoragePane, { type StorageSnapshot } from '../../views/comfyUISettings/StoragePane.vue'
+import type { PickerTab, SectionTab } from '../../lib/pickerTabs'
+import type { ActionDef, DetailField, Installation, ShowProgressOpts } from '../../types/ipc'
 import { TID } from '../../../../shared/testIds'
 
 /**
@@ -32,10 +28,6 @@ export type ComfyUISettingsTab = PickerTab
 interface Props {
   installation: Installation | null
   initialTab?: ComfyUISettingsTab
-  /** Render a leading "← Back" affordance in the tab strip. Opt-in
-   *  because the drawer host owns its own back-chrome; only the
-   *  picker's expanded right pane needs an in-content back. */
-  showBack?: boolean
   /** Optional action id to fire automatically once `sections` are
    *  loaded — mirrors `DetailModal`'s `autoAction` prop. Used by the
    *  picker's expanded mode when opened via dashboard kebab
@@ -43,12 +35,22 @@ interface Props {
    *  Standalone`. Consumed exactly once per prop value transition;
    *  later section reloads or selection changes do not re-fire. */
   autoAction?: string | null
+  /** Slice of the popup's global-settings snapshot consumed by the
+   *  Storage tab. Optional so non-popup hosts (e.g. drawer chrome)
+   *  can omit it and the Storage tab silently empties out — they
+   *  don't have a way to mutate global settings anyway. */
+  globalSettingsSnapshot?: StorageSnapshot
 }
 
 const props = withDefaults(defineProps<Props>(), {
   initialTab: 'config',
   showBack: false,
   autoAction: null,
+  globalSettingsSnapshot: () => ({
+    sharedDirectoriesFields: [],
+    modelsDirs: [],
+    modelsSystemDefault: '',
+  }),
 })
 
 const emit = defineEmits<{
@@ -66,10 +68,6 @@ const emit = defineEmits<{
    *  expanded view's footer. Payload carries the running flag so the
    *  host doesn't have to re-derive it. */
   'primary-action': [running: boolean]
-  /** Leading back affordance click (only rendered when
-   *  `showBack === true`). Host decides what "back" means — for the
-   *  picker it collapses the expanded mode. */
-  back: []
 }>()
 
 const { t } = useI18n()
@@ -80,7 +78,7 @@ watch(
   () => props.initialTab,
   (next) => {
     activeTab.value = next
-  },
+  }
 )
 
 const installation = toRef(props, 'installation')
@@ -90,16 +88,19 @@ const {
   loading,
   error,
   updateField,
+  pendingRestartFieldIds,
+  fieldErrorMessages,
   runAction,
+  runningActionIds,
   sectionsForTab,
   diskUsageItem,
   pinBottomActions,
-  reload,
+  reload
 } = useComfyUISettings({
   installation,
   onShowProgress: (opts) => emit('show-progress', opts),
   onNavigateList: () => emit('navigate-list'),
-  onClose: () => emit('request-close'),
+  onClose: () => emit('request-close')
 })
 
 // `autoAction` consumption — fires the named action once per prop
@@ -124,14 +125,14 @@ watch(
   () => props.autoAction,
   (next, prev) => {
     if (next !== prev) consumedAutoAction.value = null
-  },
+  }
 )
 watch(
   [
     () => props.autoAction,
     () => props.installation?.id ?? null,
     () => loading.value,
-    () => sections.value.length,
+    () => sections.value.length
   ],
   async ([autoAction, installId, isLoading, sectionsLen]) => {
     if (!installId || !autoAction || isLoading || sectionsLen === 0) return
@@ -160,7 +161,7 @@ watch(
 
     void runAction(action)
   },
-  { immediate: true },
+  { immediate: true }
 )
 
 // Auto-refresh stale channel-cards when the Update tab opens. The
@@ -184,11 +185,7 @@ watch(
 const STALE_CHANNEL_CARD_MS = 15 * 60 * 1000
 const refreshedChannelKeys = new Set<string>()
 watch(
-  [
-    () => activeTab.value,
-    () => props.installation?.id ?? null,
-    () => sections.value.length,
-  ],
+  [() => activeTab.value, () => props.installation?.id ?? null, () => sections.value.length],
   ([tab, installId, sectionsLen]) => {
     if (tab !== 'update' || !installId || sectionsLen === 0) return
 
@@ -226,36 +223,57 @@ watch(
     // re-fire on the same install+channel).
     void runAction(checkAction)
   },
-  { immediate: true },
+  { immediate: true }
 )
 
 interface TabDef {
   key: ComfyUISettingsTab
-  /** The `DetailSection.tab` literal we filter for. The Figma's "Config"
-   *  is sourced from sections tagged `'settings'` (launch-settings
-   *  fields built by `buildLaunchSettingsFields` in main). */
-  sectionTab: 'settings' | 'status' | 'update' | 'snapshots'
+  sectionTab: SectionTab
   label: string
+  icon: typeof SlidersHorizontal
 }
 
-// Tab visibility is data-driven: a tab is shown iff main emitted at
-// least one section for it. Cloud sources don't emit `update` or
-// `snapshots` sections (see urlSource.ts), so cloud opens with only
-// Config + Status — matching the picker's right-pane visibility rule.
 const ALL_TABS: TabDef[] = [
-  { key: 'config', sectionTab: 'settings', label: t('comfyUISettings.tabConfig', 'Config') },
-  { key: 'status', sectionTab: 'status', label: t('comfyUISettings.tabStatus', 'Status') },
-  { key: 'update', sectionTab: 'update', label: t('comfyUISettings.tabUpdate', 'Update') },
+  {
+    key: 'update',
+    sectionTab: 'update',
+    label: t('comfyUISettings.tabUpdate', 'Update'),
+    icon: RefreshCw
+  },
+  {
+    key: 'config',
+    sectionTab: 'settings',
+    label: t('comfyUISettings.tabConfig', 'Startup Args'),
+    icon: SlidersHorizontal
+  },
   {
     key: 'snapshots',
     sectionTab: 'snapshots',
     label: t('comfyUISettings.tabSnapshots', 'Snapshots'),
+    icon: History
+  },
+  {
+    key: 'storage',
+    sectionTab: 'storage',
+    label: t('comfyUISettings.tabStorage', 'Storage'),
+    icon: HardDrive
   },
+  {
+    key: 'status',
+    sectionTab: 'status',
+    label: t('comfyUISettings.tabStatus', 'About'),
+    icon: Info
+  }
 ]
 const tabs = computed<TabDef[]>(() =>
-  ALL_TABS.filter((tab) => sectionsForTab(tab.sectionTab).value.length > 0),
+  ALL_TABS.filter((tab) => sectionsForTab(tab.sectionTab).value.length > 0)
 )
 
+const showUpdateBadge = computed(() => {
+  const inst = installation.value
+  return inst?.statusTag?.style === 'update' || inst?.status === 'update-available'
+})
+
 // If the currently selected tab disappeared (e.g. swapping a local
 // install for a cloud one while open), fall back to the requested
 // `initialTab` if it's now available, otherwise the first surviving
@@ -274,30 +292,13 @@ watch(tabs, (next) => {
 
 const visibleSections = computed(() => {
   const tab = tabs.value.find((tt) => tt.key === activeTab.value)?.sectionTab ?? 'settings'
-  const base = sectionsForTab(tab).value
-  // Status tab synthesizes one extra readonly row for total disk usage
-  // (driven off the same loader the rest of the tab uses). Append it
-  // through the shared section list so styling, collapse handling, and
-  // readonly chrome stay consistent with every other status row.
-  if (activeTab.value === 'status' && diskUsageItem.value) {
-    return [
-      ...base,
-      {
-        tab: 'status',
-        fields: [
-          {
-            id: '__disk-usage',
-            label: t('comfyUISettings.diskUsage', 'Disk Usage'),
-            value: diskUsageItem.value.label,
-            editable: false,
-          },
-        ],
-      } as DetailSection,
-    ]
-  }
-  return base
+  return sectionsForTab(tab).value
 })
 
+const statusSections = computed(() => sectionsForTab('status').value)
+
+const storageSections = computed(() => sectionsForTab('storage').value)
+
 const rootRef = useTemplateRef<HTMLElement>('root')
 
 function handleTabKeydown(event: KeyboardEvent, index: number): void {
@@ -375,7 +376,7 @@ watch(
   () => {
     subPage.value = null
     moreMenuOpen.value = false
-  },
+  }
 )
 
 const argsField = computed<DetailField | null>(() => {
@@ -416,12 +417,19 @@ const isInstallRunning = computed(() => {
   return inst ? sessionStore.isRunning(inst.id) : false
 })
 
-const primaryActionLabel = computed(() =>
-  isInstallRunning.value
-    ? t('instancePicker.restart', 'Restart')
-    : t('instancePicker.open', 'Open'),
+const hasPendingRestart = computed(
+  () => isInstallRunning.value && pendingRestartFieldIds.value.size > 0
 )
 
+const primaryActionLabel = computed(() => {
+  if (hasPendingRestart.value) {
+    return t('instancePicker.restartToApply', 'Restart to apply changes')
+  }
+  return isInstallRunning.value
+    ? t('instancePicker.restart', 'Restart')
+    : t('instancePicker.open', 'Open')
+})
+
 function handlePrimaryAction(): void {
   if (!installation.value) return
   emit('primary-action', isInstallRunning.value)
@@ -431,11 +439,9 @@ defineExpose({
   /** Host can force-focus the active tab — drawer uses this when it
    *  opens so initial focus lands inside the body. */
   focusActiveTab(): void {
-    const firstTab = rootRef.value?.querySelector<HTMLButtonElement>(
-      '.settings-v2-tab.is-active',
-    )
+    const firstTab = rootRef.value?.querySelector<HTMLButtonElement>('.settings-v2-tab.is-active')
     firstTab?.focus()
-  },
+  }
 })
 </script>
 
@@ -443,19 +449,11 @@ defineExpose({
   <div ref="root" class="settings-v2-content">
     <nav
       class="settings-v2-tabs"
+      :class="{ 'is-subpage-active': subPage !== null }"
       role="tablist"
       :aria-label="t('comfyUISettings.title', 'Settings')"
+      :aria-hidden="subPage !== null"
     >
-      <button
-        v-if="showBack"
-        type="button"
-        class="settings-v2-back"
-        :aria-label="t('common.back', 'Back')"
-        @click="emit('back')"
-      >
-        <ArrowLeft :size="14" aria-hidden="true" />
-        <span>{{ t('common.back', 'Back') }}</span>
-      </button>
       <button
         v-for="(tab, i) in tabs"
         :key="tab.key"
@@ -468,7 +466,13 @@ defineExpose({
         @click="selectTab(tab.key)"
         @keydown="handleTabKeydown($event, i)"
       >
-        {{ tab.label }}
+        <component :is="tab.icon" :size="14" aria-hidden="true" class="settings-v2-tab-icon" />
+        <span>{{ tab.label }}</span>
+        <span
+          v-if="tab.key === 'update' && showUpdateBadge"
+          class="settings-v2-tab-badge"
+          aria-hidden="true"
+        ></span>
       </button>
     </nav>
 
@@ -496,13 +500,8 @@ defineExpose({
         />
 
         <div v-else key="subpage-root" class="settings-v2-body-root">
-          <!-- Inner tab-swap transition. The two child components both
-               need to be wrapped in a single-root `<div>` because
-               `<Transition>` requires a single root child — and
-               `SettingsSectionList` actually renders as a `v-for`
-               fragment of `<article>` siblings, which would silently
-               disable the animation AND prevent any tab content from
-               rendering at all. -->
+          <!-- Inner tab-swap transition. Wrapped in a single-root
+               `<div>` because `<Transition>` requires one child. -->
           <Transition :name="tabTransition" mode="out-in">
             <div
               v-if="activeTab === 'snapshots' && installation"
@@ -516,16 +515,44 @@ defineExpose({
               />
             </div>
             <div
-              v-else
-              :key="`tab-${activeTab}`"
+              v-else-if="activeTab === 'status' && installation"
+              key="tab-status"
               class="settings-v2-tab-pane"
               :data-testid="TID.pickerSettingsSections"
               :data-install-id="installation?.id"
             >
+              <StatusFactPanel
+                :installation="installation"
+                :sections="statusSections"
+                :disk-usage="diskUsageItem"
+              />
+            </div>
+            <div
+              v-else-if="activeTab === 'storage'"
+              key="tab-storage"
+              class="settings-v2-tab-pane"
+            >
+              <!-- Lazy-mounted via `v-else-if` so picker opens that
+                   never visit Storage don't render the global model-
+                   dir UI. Snapshot is owned by the popup root and
+                   threaded through here as a prop. -->
+              <StoragePane
+                :installation="installation"
+                :snapshot="globalSettingsSnapshot"
+                :sections="storageSections"
+                :pending-restart-field-ids="pendingRestartFieldIds"
+                :field-error-messages="fieldErrorMessages"
+                :running-action-ids="runningActionIds"
+                @update-field="updateField"
+              />
+            </div>
+            <div v-else :key="`tab-${activeTab}`" class="settings-v2-tab-pane">
               <SettingsSectionList
                 :sections="visibleSections"
-                :readonly="activeTab === 'status'"
                 :installation-id="installation?.id"
+                :running-action-ids="runningActionIds"
+                :pending-restart-field-ids="pendingRestartFieldIds"
+                :field-error-messages="fieldErrorMessages"
                 @update-field="updateField"
                 @run-action="runAction"
                 @open-args-page="openArgsPage"
@@ -540,6 +567,7 @@ defineExpose({
       <button
         type="button"
         class="primary settings-v2-relaunch"
+        :class="{ 'is-pending-restart': hasPendingRestart }"
         :disabled="!installation"
         @click="handlePrimaryAction"
       >
@@ -589,51 +617,16 @@ defineExpose({
   border-bottom: 1px solid var(--chooser-surface-border);
 }
 
-/* Leading "← Back" affordance (picker expanded mode only — opt-in
- * via the `showBack` prop). Lives inside the tab strip so it sits at
- * the same baseline as the tabs and doesn't fight the tab nav for
- * vertical space. A short vertical rule separates it from the first
- * tab so the click target reads as distinct from the tab list. */
-.settings-v2-back {
-  -webkit-app-region: no-drag;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 10px 6px 8px;
-  margin-right: 4px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--neutral-100);
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 16px;
-  cursor: pointer;
-  transition:
-    background-color 120ms ease,
-    color 120ms ease;
-  position: relative;
-}
-
-.settings-v2-back::after {
-  content: '';
-  position: absolute;
-  right: -4px;
-  top: 6px;
-  bottom: 6px;
-  width: 1px;
-  background: var(--chooser-surface-border);
-}
-
-.settings-v2-back:hover,
-.settings-v2-back:focus-visible {
-  background: var(--brand-surface-bg-hover);
-  color: var(--text);
-  outline: none;
+.settings-v2-tabs.is-subpage-active {
+  opacity: 0.35;
+  pointer-events: none;
 }
 
 .settings-v2-tab {
   -webkit-app-region: no-drag;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   padding: 6px 12px;
   background: transparent;
   border: none;
@@ -665,6 +658,19 @@ defineExpose({
   background: var(--neutral-800);
 }
 
+.settings-v2-tab-icon {
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+
+.settings-v2-tab-badge {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--warning);
+  flex-shrink: 0;
+}
+
 .settings-v2-body {
   flex: 1;
   min-height: 0;
@@ -718,7 +724,7 @@ defineExpose({
   gap: 8px;
   padding: 12px 16px;
   border-top: 1px solid var(--chooser-surface-border);
-  background: var(--neutral-800);
+  background: var(--modal-surface-bg);
 }
 
 /* Pin both footer buttons to the same 32px height as the left
@@ -733,6 +739,22 @@ defineExpose({
   font-size: 12px;
   font-weight: 500;
   line-height: 16px;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease;
+}
+
+/* Pending-restart promotion. Brand yellow takes over the button so
+ * the resolution point lights up against the dark modal surface —
+ * no extra chrome, no ring, just a hard semantic swap. Same action
+ * (still routes through Restart), the colour just says "now is the
+ * moment". Dark text required: yellow is too light for white. */
+.settings-v2-relaunch.is-pending-restart,
+.settings-v2-relaunch.is-pending-restart:hover {
+  background: var(--neutral-50);
+  border-color: var(--neutral-50);
+  color: var(--neutral-950);
 }
 
 .settings-v2-more-wrap {
diff --git a/src/renderer/src/components/ui/BaseActionSheet.test.ts b/src/renderer/src/components/ui/BaseActionSheet.test.ts
new file mode 100644
index 00000000..eae19024
--- /dev/null
+++ b/src/renderer/src/components/ui/BaseActionSheet.test.ts
@@ -0,0 +1,106 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import BaseActionSheet, { type ActionSheetItem } from './BaseActionSheet.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: { modal: { ok: 'OK' }, common: { cancel: 'Cancel', close: 'Close' } }
+  },
+  missingWarn: false,
+  fallbackWarn: false
+})
+
+const wrappers: VueWrapper[] = []
+
+const defaultItems: ActionSheetItem[] = [
+  { value: 'proceed', label: 'Launch anyway' },
+  { value: 'replace', label: 'Replace running instance', description: 'Stops the other one first', tone: 'danger' }
+]
+
+function mountSheet(props: Record<string, unknown> = {}) {
+  const wrapper = mount(BaseActionSheet, {
+    props: {
+      open: true,
+      title: 'Instance already running',
+      message: 'Another instance is active.',
+      items: defaultItems,
+      ...props
+    },
+    global: {
+      plugins: [i18n],
+      stubs: { Teleport: { template: '<div><slot /></div>' } }
+    }
+  })
+  wrappers.push(wrapper)
+  return wrapper
+}
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()?.unmount()
+})
+
+describe('BaseActionSheet', () => {
+  it('renders title, message, and one button per item', () => {
+    const wrapper = mountSheet()
+    expect(wrapper.find('.base-action-sheet-title').text()).toBe('Instance already running')
+    expect(wrapper.find('.base-action-sheet-message').text()).toBe('Another instance is active.')
+    expect(wrapper.findAll('.base-action-sheet-item')).toHaveLength(2)
+  })
+
+  it('renders item description when present', () => {
+    const wrapper = mountSheet()
+    const descs = wrapper.findAll('.base-action-sheet-item-desc')
+    expect(descs).toHaveLength(1)
+    expect(descs[0].text()).toBe('Stops the other one first')
+  })
+
+  it('applies the danger class when item.tone === "danger"', () => {
+    const wrapper = mountSheet()
+    const items = wrapper.findAll('.base-action-sheet-item')
+    expect(items[0].classes()).not.toContain('base-action-sheet-item--danger')
+    expect(items[1].classes()).toContain('base-action-sheet-item--danger')
+  })
+
+  it('emits `select` with item.value on click', async () => {
+    const wrapper = mountSheet()
+    await wrapper.find('[data-testid="base-action-sheet-item-replace"]').trigger('click')
+    expect(wrapper.emitted('select')).toEqual([['replace']])
+  })
+
+  it('emits `update:open` false on item click so v-model:open consumers close', async () => {
+    const wrapper = mountSheet()
+    await wrapper.find('[data-testid="base-action-sheet-item-proceed"]').trigger('click')
+    expect(wrapper.emitted('update:open')).toEqual([[false]])
+  })
+
+  it('emits `cancel` when the cancel button is clicked', async () => {
+    const wrapper = mountSheet()
+    await wrapper.find('[data-testid="base-action-sheet-cancel"]').trigger('click')
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+    expect(wrapper.emitted('select')).toBeUndefined()
+  })
+
+  it('emits `update:open` false on cancel', async () => {
+    const wrapper = mountSheet()
+    await wrapper.find('[data-testid="base-action-sheet-cancel"]').trigger('click')
+    expect(wrapper.emitted('update:open')).toEqual([[false]])
+  })
+
+  it('renders nothing when open is false', () => {
+    const wrapper = mountSheet({ open: false })
+    expect(wrapper.find('.base-action-sheet-title').exists()).toBe(false)
+  })
+
+  it('uses a custom cancel label when provided', () => {
+    const wrapper = mountSheet({ cancelLabel: 'Not now' })
+    expect(wrapper.find('[data-testid="base-action-sheet-cancel"]').text()).toBe('Not now')
+  })
+
+  it('hides the message block when message is empty', () => {
+    const wrapper = mountSheet({ message: '' })
+    expect(wrapper.find('.base-action-sheet-message').exists()).toBe(false)
+  })
+})
diff --git a/src/renderer/src/components/ui/BaseActionSheet.vue b/src/renderer/src/components/ui/BaseActionSheet.vue
new file mode 100644
index 00000000..0283ddf4
--- /dev/null
+++ b/src/renderer/src/components/ui/BaseActionSheet.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { nextTick, ref, watch } from 'vue'
+import BaseModal from './BaseModal.vue'
+
+/**
+ * Action-sheet primitive — title, optional message, vertical list of
+ * action choices, Cancel in the footer. Composes `BaseModal` for the
+ * shell. Use for any "pick how to proceed" affordance previously
+ * routed through `useModal().select()` (e.g. the "Instance Already
+ * Running" Proceed / Replace dialog).
+ *
+ * Not to be confused with `BaseSelect.vue`, which is the inline
+ * combobox/dropdown used inside forms.
+ */
+
+export interface ActionSheetItem {
+  value: string
+  label: string
+  description?: string
+  /** Visual treatment for destructive choices (e.g. "Replace running
+   *  instance"). Maps to the global `.danger-solid` button style. */
+  tone?: 'default' | 'danger'
+}
+
+interface Props {
+  open: boolean
+  title: string
+  message?: string
+  items: ActionSheetItem[]
+  cancelLabel?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  dismissOnEscape?: boolean
+  dismissOnOutside?: boolean
+  testIdCancel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  message: '',
+  cancelLabel: undefined,
+  size: 'sm',
+  dismissOnEscape: true,
+  dismissOnOutside: true,
+  testIdCancel: undefined
+})
+
+const emit = defineEmits<{
+  'update:open': [open: boolean]
+  select: [value: string]
+  cancel: []
+}>()
+
+const TITLE_ID = 'base-action-sheet-title'
+
+const firstItemRef = ref<HTMLButtonElement | null>(null)
+
+function cancel(): void {
+  emit('update:open', false)
+  emit('cancel')
+}
+
+function onItemClick(value: string): void {
+  emit('update:open', false)
+  emit('select', value)
+}
+
+watch(
+  () => props.open,
+  (isOpen, wasOpen) => {
+    if (isOpen && !wasOpen) {
+      void nextTick(() => firstItemRef.value?.focus())
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <BaseModal
+    :open="open"
+    :size="size"
+    :aria-labelledby="TITLE_ID"
+    :dismiss-on-escape="dismissOnEscape"
+    :dismiss-on-outside="dismissOnOutside"
+    :show-close-button="false"
+    content-class="base-action-sheet-panel"
+    @close="cancel"
+  >
+    <template #header>
+      <h2 :id="TITLE_ID" class="base-action-sheet-title">{{ title }}</h2>
+    </template>
+
+    <div class="base-action-sheet-body">
+      <div v-if="message" class="base-action-sheet-message">{{ message }}</div>
+      <div class="base-action-sheet-list">
+        <button
+          v-for="(item, idx) in items"
+          :key="item.value"
+          :ref="(el) => { if (idx === 0) firstItemRef = el as HTMLButtonElement }"
+          type="button"
+          class="base-action-sheet-item"
+          :class="{ 'base-action-sheet-item--danger': item.tone === 'danger' }"
+          :data-testid="`base-action-sheet-item-${item.value}`"
+          @click="onItemClick(item.value)"
+        >
+          <span class="base-action-sheet-item-label">{{ item.label }}</span>
+          <span v-if="item.description" class="base-action-sheet-item-desc">
+            {{ item.description }}
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <template #footer>
+      <button
+        type="button"
+        :data-testid="testIdCancel ?? 'base-action-sheet-cancel'"
+        @click="cancel"
+      >
+        {{ cancelLabel ?? $t('common.cancel') }}
+      </button>
+    </template>
+  </BaseModal>
+</template>
+
+<style scoped>
+.base-action-sheet-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--neutral-100);
+}
+
+.base-action-sheet-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+
+.base-action-sheet-message {
+  white-space: pre-line;
+  user-select: text;
+}
+
+.base-action-sheet-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.base-action-sheet-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid color-mix(in oklab, var(--neutral-100) 10%, transparent);
+  border-radius: 8px;
+  background: color-mix(in oklab, var(--neutral-100) 4%, transparent);
+  cursor: pointer;
+  text-align: left;
+  font-size: 14px;
+  color: var(--neutral-100);
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+
+.base-action-sheet-item:hover,
+.base-action-sheet-item:focus-visible {
+  border-color: var(--accent);
+  background: color-mix(in oklab, var(--accent) 10%, transparent);
+  outline: none;
+}
+
+.base-action-sheet-item--danger {
+  border-color: color-mix(in oklab, var(--danger) 35%, transparent);
+}
+
+.base-action-sheet-item--danger:hover,
+.base-action-sheet-item--danger:focus-visible {
+  border-color: var(--danger);
+  background: color-mix(in oklab, var(--danger) 12%, transparent);
+}
+
+.base-action-sheet-item-label {
+  font-weight: 500;
+  color: var(--neutral-100);
+}
+
+.base-action-sheet-item--danger .base-action-sheet-item-label {
+  color: var(--danger);
+}
+
+.base-action-sheet-item-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+</style>
diff --git a/src/renderer/src/components/ui/BaseAlert.test.ts b/src/renderer/src/components/ui/BaseAlert.test.ts
index a49ba857..84eb1b53 100644
--- a/src/renderer/src/components/ui/BaseAlert.test.ts
+++ b/src/renderer/src/components/ui/BaseAlert.test.ts
@@ -6,7 +6,9 @@ import BaseAlert from './BaseAlert.vue'
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
-  messages: { en: { modal: { ok: 'OK' }, common: { cancel: 'Cancel' } } },
+  messages: {
+    en: { modal: { ok: 'OK' }, common: { cancel: 'Cancel', close: 'Close' } }
+  },
   missingWarn: false,
   fallbackWarn: false
 })
@@ -133,4 +135,86 @@ describe('BaseAlert', () => {
     expect(action.classes()).toContain('danger-solid')
     expect(action.classes()).not.toContain('primary')
   })
+
+  it('renders a secondary button between Cancel and Primary when secondaryLabel is set', () => {
+    const wrapper = mountAlert({
+      showCancel: true,
+      secondaryLabel: 'Close & Launch',
+      buttonLabel: 'Launch'
+    })
+    const cancel = wrapper.find('[data-testid="base-alert-cancel"]')
+    const secondary = wrapper.find('[data-testid="base-alert-secondary"]')
+    const primary = wrapper.find('[data-testid="base-alert-action"]')
+    expect(cancel.exists()).toBe(true)
+    expect(secondary.text()).toBe('Close & Launch')
+    expect(primary.text()).toBe('Launch')
+  })
+
+  it('emits `secondary` when the secondary button is clicked', async () => {
+    const wrapper = mountAlert({
+      secondaryLabel: 'Close & Launch',
+      showCancel: false
+    })
+    await wrapper.find('[data-testid="base-alert-secondary"]').trigger('click')
+    expect(wrapper.emitted('secondary')).toHaveLength(1)
+    expect(wrapper.emitted('close')).toBeUndefined()
+    expect(wrapper.emitted('cancel')).toBeUndefined()
+  })
+
+  it('applies danger tone to the secondary button when secondaryTone="danger"', () => {
+    const wrapper = mountAlert({
+      secondaryLabel: 'Close & Launch',
+      secondaryTone: 'danger',
+      showCancel: false
+    })
+    const secondary = wrapper.find('[data-testid="base-alert-secondary"]')
+    expect(secondary.classes()).toContain('danger-solid')
+  })
+
+  it('renders the header close icon when showCloseIcon is true', () => {
+    const wrapper = mountAlert({ showCloseIcon: true, showCancel: false })
+    expect(wrapper.find('[data-testid="base-alert-close-icon"]').exists()).toBe(true)
+  })
+
+  it('emits `cancel` when the header close icon is clicked', async () => {
+    const wrapper = mountAlert({ showCloseIcon: true, showCancel: false })
+    await wrapper.find('[data-testid="base-alert-close-icon"]').trigger('click')
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+  })
+
+  it('does NOT render the header close icon by default', () => {
+    const wrapper = mountAlert()
+    expect(wrapper.find('[data-testid="base-alert-close-icon"]').exists()).toBe(false)
+  })
+
+  it('emits `cancel` on ESC when showCloseIcon is true (close icon is a cancel affordance)', async () => {
+    const wrapper = mountAlert({ showCloseIcon: true, showCancel: false })
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await flushPromises()
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+    expect(wrapper.emitted('close')).toBeUndefined()
+  })
+
+  it('renders messageDetails groups in recessed sub-blocks', () => {
+    const wrapper = mountAlert({
+      messageDetails: [{ label: 'Changes when restoring', items: ['+1 custom node', '-2 pip pkgs'] }]
+    })
+    expect(wrapper.find('.base-alert-detail-label').text()).toBe('Changes when restoring')
+    const items = wrapper.findAll('.base-alert-detail-item')
+    expect(items).toHaveLength(2)
+    expect(items.at(0)?.text()).toBe('+1 custom node')
+    expect(items.at(1)?.text()).toBe('-2 pip pkgs')
+  })
+
+  it('applies the rich-variant panel modifier when messageDetails is non-empty', () => {
+    const wrapper = mountAlert({
+      messageDetails: [{ label: 'Notes', items: ['x'] }]
+    })
+    expect(wrapper.find('.base-alert-panel--rich').exists()).toBe(true)
+  })
+
+  it('keeps the panel narrow when messageDetails is empty', () => {
+    const wrapper = mountAlert()
+    expect(wrapper.find('.base-alert-panel--rich').exists()).toBe(false)
+  })
 })
diff --git a/src/renderer/src/components/ui/BaseAlert.vue b/src/renderer/src/components/ui/BaseAlert.vue
index 3a73137b..aa58f64b 100644
--- a/src/renderer/src/components/ui/BaseAlert.vue
+++ b/src/renderer/src/components/ui/BaseAlert.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { X } from 'lucide-vue-next'
 import { useModalOverlay } from '../../composables/useModalOverlay'
+import { linkify, handleModalLinkClick } from '../../lib/modalLinkify'
+import type { ModalDetailGroup } from '../../types/ipc'
 
 /**
  * Reusable alert primitive (shadcn-style). Parent controls `open`;
@@ -10,7 +13,20 @@ import { useModalOverlay } from '../../composables/useModalOverlay'
  * Alerts are intentionally compact (title + message + actions)
  * compared to `BaseModal`. Default is a single OK (browser `alert()`
  * semantics). Pass `showCancel` for Cancel + OK (`confirm()` semantics).
- * Use `BaseModal` when you need header/footer slots or a ✕ close button.
+ * Use `BaseModal` when you need header/footer slots beyond the
+ * primary/secondary/cancel triad.
+ *
+ * Supports up to **three footer actions** in a fixed order:
+ *   `[Cancel] [Secondary] [Primary]`
+ * — pass `showCancel` for Cancel, `secondaryLabel` for the middle
+ * action. When the footer already has two actions and you still need
+ * a dismiss affordance, set `showCloseIcon` so the ✕ in the header
+ * carries it (mutually exclusive with `showCancel`).
+ *
+ * Rich-variant body: pass `messageDetails` for recessed sub-blocks
+ * (release notes, change summaries) — gives confirm flows parity with
+ * the legacy `ModalDialog.vue` `confirm` renderer without a separate
+ * primitive.
  *
  * `title` is required and wires `aria-labelledby` by default. Pass
  * `aria-label` when the visible title is not a sufficient accessible name.
@@ -29,6 +45,23 @@ interface Props {
   /** Primary-action visual treatment. `danger` = destructive (red),
    *  `primary` = standard yellow CTA. Default `'primary'`. */
   tone?: 'primary' | 'danger'
+  /** Optional secondary action (e.g. "Close & Launch" sitting between
+   *  Cancel and Primary). Footer renders `[Cancel] [Secondary] [Primary]`
+   *  when both are set. Emits `@secondary`. */
+  secondaryLabel?: string
+  /** Secondary-action visual treatment. Defaults to `'default'`
+   *  (neutral). */
+  secondaryTone?: 'primary' | 'danger' | 'default'
+  /** Render a top-right ✕ in the header that emits `cancel`. Use when
+   *  the footer already holds two actions and there's no room for a
+   *  Cancel button. Mutually exclusive with `showCancel` (the ✕ is
+   *  redundant when there's a Cancel button). Default false. */
+  showCloseIcon?: boolean
+  /** Recessed sub-blocks rendered below the message (release notes,
+   *  change summaries). When present, the panel widens slightly and
+   *  enables internal scrolling — same shape `useModal.confirm` /
+   *  `useModal.prompt` accept via the `messageDetails` field. */
+  messageDetails?: ModalDetailGroup[]
   ariaLabel?: string
   ariaLabelledby?: string
   /** Dismiss when Escape is pressed. Default true. */
@@ -47,6 +80,12 @@ interface Props {
   /** Optional `data-testid` override for the cancel button.
    *  Defaults to `'base-alert-cancel'`. */
   testIdCancel?: string
+  /** Optional `data-testid` override for the secondary button.
+   *  Defaults to `'base-alert-secondary'`. */
+  testIdSecondary?: string
+  /** Optional `data-testid` override for the header ✕ icon.
+   *  Defaults to `'base-alert-close-icon'`. */
+  testIdCloseIcon?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -55,6 +94,10 @@ const props = withDefaults(defineProps<Props>(), {
   showCancel: false,
   cancelLabel: undefined,
   tone: 'primary',
+  secondaryLabel: undefined,
+  secondaryTone: 'default',
+  showCloseIcon: false,
+  messageDetails: () => [],
   ariaLabel: undefined,
   ariaLabelledby: undefined,
   dismissOnEscape: true,
@@ -62,10 +105,12 @@ const props = withDefaults(defineProps<Props>(), {
   preventScroll: true,
   testIdRoot: undefined,
   testIdAction: undefined,
-  testIdCancel: undefined
+  testIdCancel: undefined,
+  testIdSecondary: undefined,
+  testIdCloseIcon: undefined
 })
 
-const emit = defineEmits<{ close: []; cancel: [] }>()
+const emit = defineEmits<{ close: []; cancel: []; secondary: [] }>()
 
 const TITLE_ID = 'base-alert-title'
 
@@ -78,11 +123,25 @@ const dialogAriaLabelledby = computed(
   () => props.ariaLabelledby ?? (props.ariaLabel ? undefined : TITLE_ID)
 )
 
+/** ESC + backdrop dismiss. Treat as cancel whenever there is any
+ *  cancel affordance (Cancel button OR header ✕) — otherwise treat as
+ *  the primary OK (single-action alert semantics). The secondary
+ *  action never receives ESC/backdrop dismissal: it's a discrete
+ *  third choice, not a fallback. */
 function dismiss(): void {
-  if (props.showCancel) emit('cancel')
+  if (props.showCancel || props.showCloseIcon) emit('cancel')
   else emit('close')
 }
 
+const hasDetails = computed(() => props.messageDetails.length > 0)
+const linkifiedMessage = computed(() => linkify(props.message))
+/** Two-button footer (Cancel+Primary or Secondary+Primary) needs
+ *  more horizontal room than the default 400px so labels stay on one
+ *  line. Triggered by `secondaryLabel` since that's the only path to
+ *  two non-cancel actions. Plain Cancel+Primary already fits at 400px
+ *  for typical labels. */
+const hasWideActions = computed(() => !!props.secondaryLabel)
+
 const { handleOverlayMouseDown, handleOverlayClick } = useModalOverlay(
   () => props.open && props.dismissOnEscape,
   dismiss
@@ -105,6 +164,14 @@ function onActionClick(): void {
   emit('close')
 }
 
+function onSecondaryClick(): void {
+  emit('secondary')
+}
+
+function onCloseIconClick(): void {
+  emit('cancel')
+}
+
 function lockBodyScroll(): void {
   if (!props.preventScroll) return
   previousBodyOverflow = document.body.style.overflow
@@ -165,10 +232,52 @@ onBeforeUnmount(() => {
         @mousedown="onOverlayMouseDown"
         @click="onOverlayClick"
       >
-        <div class="base-alert-panel modal-fade-panel">
-          <h2 :id="TITLE_ID" class="base-alert-title">{{ title }}</h2>
-          <div v-if="message || $slots.default" class="base-alert-message">
-            <slot>{{ message }}</slot>
+        <div
+          class="base-alert-panel modal-fade-panel"
+          :class="{
+            'base-alert-panel--rich': hasDetails,
+            'base-alert-panel--wide-actions': hasWideActions
+          }"
+        >
+          <header class="base-alert-header">
+            <h2 :id="TITLE_ID" class="base-alert-title">{{ title }}</h2>
+            <button
+              v-if="showCloseIcon"
+              type="button"
+              class="base-alert-close-icon"
+              :aria-label="$t('common.close')"
+              :data-testid="testIdCloseIcon ?? 'base-alert-close-icon'"
+              @click="onCloseIconClick"
+            >
+              <X :size="16" />
+            </button>
+          </header>
+          <div v-if="message || hasDetails || $slots.default" class="base-alert-message">
+            <slot>
+              <div
+                v-if="message"
+                class="base-alert-message-text"
+                @click="handleModalLinkClick"
+                v-html="linkifiedMessage"
+              ></div>
+              <div v-if="hasDetails" class="base-alert-details">
+                <div
+                  v-for="(group, gi) in messageDetails"
+                  :key="gi"
+                  class="base-alert-detail-group"
+                >
+                  <span class="base-alert-detail-label">{{ group.label }}</span>
+                  <div class="base-alert-detail-recessed" @click="handleModalLinkClick">
+                    <div
+                      v-for="(item, ii) in group.items"
+                      :key="ii"
+                      class="base-alert-detail-item"
+                      v-html="linkify(item)"
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </slot>
           </div>
           <footer class="base-alert-footer">
             <slot name="footer">
@@ -180,6 +289,21 @@ onBeforeUnmount(() => {
               >
                 {{ cancelLabel ?? $t('common.cancel') }}
               </button>
+              <button
+                v-if="secondaryLabel"
+                type="button"
+                :class="
+                  secondaryTone === 'danger'
+                    ? 'danger-solid'
+                    : secondaryTone === 'primary'
+                      ? 'primary'
+                      : ''
+                "
+                :data-testid="testIdSecondary ?? 'base-alert-secondary'"
+                @click="onSecondaryClick"
+              >
+                {{ secondaryLabel }}
+              </button>
               <button
                 ref="actionBtnRef"
                 type="button"
@@ -219,7 +343,7 @@ onBeforeUnmount(() => {
 .base-alert-panel {
   display: flex;
   flex-direction: column;
-  width: min(400px, 100%);
+  width: min(440px, 100%);
   min-width: 320px;
   max-height: min(80vh, 560px);
   border-radius: 12px;
@@ -234,13 +358,128 @@ onBeforeUnmount(() => {
   padding: 16px 24px;
 }
 
-.base-alert-title {
+/** Rich variant: panel widens slightly + lets the body scroll so
+ *  long detail blocks (release notes / change summaries) don't push
+ *  the footer off-screen. */
+.base-alert-panel--rich {
+  width: min(480px, 100%);
+  max-height: min(80vh, 640px);
+}
+
+/** Two-button-action variant: footer holds two non-cancel actions
+ *  (e.g. "Launch Anyway" + "Close & Launch New"). Default 440px
+ *  cramps labels — widen to let buttons sit side-by-side on one line. */
+.base-alert-panel--wide-actions {
+  width: min(520px, 100%);
+}
+
+/** Rich + wide-actions takes the larger of the two. */
+.base-alert-panel--rich.base-alert-panel--wide-actions {
+  width: min(540px, 100%);
+}
+
+.base-alert-header {
+  position: relative;
   margin: 0 -24px 12px;
   padding: 0 24px 12px;
+  border-bottom: 1px solid color-mix(in oklab, var(--neutral-100) 8%, transparent);
+}
+
+.base-alert-title {
+  margin: 0;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.3;
-  border-bottom: 1px solid color-mix(in oklab, var(--neutral-100) 8%, transparent);
+  /* Leave room for the ✕ icon when it's rendered (24px button + gap). */
+  padding-right: 32px;
+}
+
+.base-alert-close-icon {
+  position: absolute;
+  top: -4px;
+  right: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 8px;
+  background: color-mix(in oklab, var(--text) 4%, transparent);
+  border: 1px solid transparent;
+  opacity: 0.7;
+  color: var(--neutral-100);
+  cursor: pointer;
+  transition:
+    background 120ms ease,
+    border-color 120ms ease,
+    opacity 120ms ease;
+}
+.base-alert-close-icon:hover {
+  opacity: 1;
+  background: color-mix(in oklab, var(--neutral-950) 85%, transparent);
+  border-color: color-mix(in oklab, var(--neutral-100) 44%, transparent);
+}
+.base-alert-close-icon:focus-visible {
+  outline: 2px solid var(--focus-ring, var(--neutral-50));
+  outline-offset: 2px;
+}
+
+.base-alert-message-text {
+  white-space: pre-line;
+}
+
+.base-alert-message-text :deep(strong) {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.base-alert-message-text :deep(.modal-link) {
+  color: var(--accent);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.base-alert-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.base-alert-detail-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.base-alert-detail-label {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+
+.base-alert-detail-recessed {
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: color-mix(in oklab, var(--neutral-100) 4%, transparent);
+  border: 1px solid color-mix(in oklab, var(--neutral-100) 8%, transparent);
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.base-alert-detail-item {
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--neutral-100);
+}
+
+.base-alert-detail-item :deep(.modal-link) {
+  color: var(--accent);
+  text-decoration: underline;
+  cursor: pointer;
 }
 
 .base-alert-message {
@@ -257,6 +496,7 @@ onBeforeUnmount(() => {
 
 .base-alert-footer {
   display: flex;
+  flex-wrap: wrap;
   justify-content: flex-end;
   gap: 8px;
   margin: 0 -24px;
@@ -264,6 +504,19 @@ onBeforeUnmount(() => {
   border-top: 1px solid color-mix(in oklab, var(--neutral-100) 8%, transparent);
 }
 
+/** Footer buttons size to content with sane min/max bounds — labels
+ *  stay on a single line and truncate with an ellipsis past the cap.
+ *  Default browser button rendering is fine; we just constrain width
+ *  and disable text wrapping so two long labels can sit side-by-side
+ *  in the wide-actions panel without stretching to 50/50. */
+.base-alert-footer > button {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 96px;
+  max-width: 240px;
+}
+
 /* Tone-scoped destructive red. The global `--danger` (#b33a3a) reads
  * muddy against the plum-warm neutral-800 panel surface; a slightly
  * warmer, more saturated tone sits cleaner on this palette without
diff --git a/src/renderer/src/components/ui/BaseMenu.vue b/src/renderer/src/components/ui/BaseMenu.vue
index 727820a9..a696ee45 100644
--- a/src/renderer/src/components/ui/BaseMenu.vue
+++ b/src/renderer/src/components/ui/BaseMenu.vue
@@ -396,6 +396,10 @@ defineExpose({ open: openPanel, close: closePanel, toggle })
 .ui-menu-item[data-danger] {
   color: var(--danger);
 }
+.ui-menu-item[data-danger][data-active] {
+  color: var(--danger-hover);
+  background: color-mix(in srgb, var(--danger) 14%, transparent);
+}
 
 .ui-menu-item[aria-disabled='true'] {
   color: var(--text-muted);
diff --git a/src/renderer/src/components/ui/BaseModal.vue b/src/renderer/src/components/ui/BaseModal.vue
index 91035b6e..9ff27b18 100644
--- a/src/renderer/src/components/ui/BaseModal.vue
+++ b/src/renderer/src/components/ui/BaseModal.vue
@@ -14,9 +14,9 @@ import { useModalOverlay } from '../../composables/useModalOverlay'
  * accessible name. We warn loudly in dev rather than throwing so a
  * mis-wired modal still renders in prod.
  *
- * Sits at z-index 60 to match `TermsModal` / `WhyTryCloudModal` (below
- * context menus, above the settings drawer). Migration of those modals
- * onto this primitive is a follow-up (TODO(modal-migration)).
+ * Sits at z-index 60 (below context menus, above the settings drawer).
+ * Overlay backdrop blur is opt-in via `blurOverlay` so unrelated modal
+ * consumers don't pay the GPU cost on every dialog.
  */
 
 type Size = 'sm' | 'md' | 'lg' | 'xl'
@@ -34,6 +34,10 @@ interface Props {
   showCloseButton?: boolean
   /** Lock body scroll while open. Default true. */
   preventScroll?: boolean
+  /** Apply a backdrop-filter blur to the overlay. Opt-in because
+   *  backdrop-filter is GPU-bound and noticeable on Electron + older
+   *  hardware — only enable on modals where the design calls for it. */
+  blurOverlay?: boolean
   /** Optional class hook on the inner panel for consumer-specific overrides. */
   contentClass?: string | string[] | Record<string, boolean>
 }
@@ -46,6 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
   dismissOnOutside: true,
   showCloseButton: true,
   preventScroll: true,
+  blurOverlay: false,
   contentClass: undefined
 })
 
@@ -146,6 +151,7 @@ const sizeClass = computed(() => `is-size-${props.size}`)
       <div
         v-if="open"
         class="base-modal-overlay"
+        :class="{ 'base-modal-overlay--blur': blurOverlay }"
         role="dialog"
         aria-modal="true"
         :aria-label="ariaLabel"
@@ -190,6 +196,10 @@ const sizeClass = computed(() => `is-size-${props.size}`)
   padding: clamp(32px, 6vh, 72px) clamp(16px, 4vw, 48px);
   background: color-mix(in oklab, var(--neutral-800) 70%, transparent);
 }
+.base-modal-overlay--blur {
+  backdrop-filter: blur(8px) saturate(115%);
+  -webkit-backdrop-filter: blur(8px) saturate(115%);
+}
 
 .base-modal-panel {
   --base-modal-width-sm: 480px;
diff --git a/src/renderer/src/components/ui/BasePrompt.test.ts b/src/renderer/src/components/ui/BasePrompt.test.ts
new file mode 100644
index 00000000..eada7451
--- /dev/null
+++ b/src/renderer/src/components/ui/BasePrompt.test.ts
@@ -0,0 +1,130 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, flushPromises, type VueWrapper } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import BasePrompt from './BasePrompt.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      modal: { ok: 'OK' },
+      common: { cancel: 'Cancel', name: 'Name', close: 'Close' }
+    }
+  },
+  missingWarn: false,
+  fallbackWarn: false
+})
+
+const wrappers: VueWrapper[] = []
+
+function mountPrompt(props: Record<string, unknown> = {}) {
+  const wrapper = mount(BasePrompt, {
+    props: {
+      open: true,
+      title: 'Name this thing',
+      message: 'Pick a label.',
+      defaultValue: 'My snapshot',
+      ...props
+    },
+    global: {
+      plugins: [i18n],
+      stubs: { Teleport: { template: '<div><slot /></div>' } }
+    }
+  })
+  wrappers.push(wrapper)
+  return wrapper
+}
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()?.unmount()
+})
+
+describe('BasePrompt', () => {
+  it('renders title, message, and input prefilled with defaultValue', async () => {
+    const wrapper = mountPrompt()
+    await flushPromises()
+    expect(wrapper.find('.base-prompt-title').text()).toBe('Name this thing')
+    expect(wrapper.find('.base-prompt-message').text()).toBe('Pick a label.')
+    expect(wrapper.find<HTMLInputElement>('.base-prompt-input').element.value).toBe('My snapshot')
+  })
+
+  it('emits `submit` with the trimmed input value when the primary action fires', async () => {
+    const wrapper = mountPrompt()
+    await flushPromises()
+    const input = wrapper.find<HTMLInputElement>('.base-prompt-input')
+    await input.setValue('  Edited name  ')
+    await wrapper.find('[data-testid="base-prompt-action"]').trigger('click')
+    expect(wrapper.emitted('submit')).toEqual([['Edited name']])
+  })
+
+  it('emits `submit` on Enter inside the input', async () => {
+    const wrapper = mountPrompt({ defaultValue: '' })
+    await flushPromises()
+    const input = wrapper.find<HTMLInputElement>('.base-prompt-input')
+    await input.setValue('typed')
+    await input.trigger('keydown.enter')
+    expect(wrapper.emitted('submit')).toEqual([['typed']])
+  })
+
+  it('shows the default error and suppresses `submit` when required and empty', async () => {
+    const wrapper = mountPrompt({ defaultValue: '', required: true })
+    await flushPromises()
+    await wrapper.find('[data-testid="base-prompt-action"]').trigger('click')
+    expect(wrapper.find('.base-prompt-error').text()).toBe('This field is required')
+    expect(wrapper.emitted('submit')).toBeUndefined()
+  })
+
+  it('uses a custom required error string when `required` is a string', async () => {
+    const wrapper = mountPrompt({ defaultValue: '', required: 'Pick a name first.' })
+    await flushPromises()
+    await wrapper.find('[data-testid="base-prompt-action"]').trigger('click')
+    expect(wrapper.find('.base-prompt-error').text()).toBe('Pick a name first.')
+  })
+
+  it('emits `cancel` when the cancel button is clicked', async () => {
+    const wrapper = mountPrompt()
+    await flushPromises()
+    await wrapper.find('[data-testid="base-prompt-cancel"]').trigger('click')
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+    expect(wrapper.emitted('submit')).toBeUndefined()
+  })
+
+  it('emits `update:open` false on submit so v-model:open consumers close', async () => {
+    const wrapper = mountPrompt()
+    await flushPromises()
+    await wrapper.find('[data-testid="base-prompt-action"]').trigger('click')
+    expect(wrapper.emitted('update:open')).toEqual([[false]])
+  })
+
+  it('emits `update:open` false on cancel', async () => {
+    const wrapper = mountPrompt()
+    await flushPromises()
+    await wrapper.find('[data-testid="base-prompt-cancel"]').trigger('click')
+    expect(wrapper.emitted('update:open')).toEqual([[false]])
+  })
+
+  it('renders messageDetails groups in recessed sub-blocks', async () => {
+    const wrapper = mountPrompt({
+      messageDetails: [{ label: 'Release notes', items: ['Line A', 'Line B'] }]
+    })
+    await flushPromises()
+    expect(wrapper.find('.base-prompt-detail-label').text()).toBe('Release notes')
+    const items = wrapper.findAll('.base-prompt-detail-item')
+    expect(items).toHaveLength(2)
+    expect(items[0].text()).toBe('Line A')
+    expect(items[1].text()).toBe('Line B')
+  })
+
+  it('renders nothing when open is false', () => {
+    const wrapper = mountPrompt({ open: false })
+    expect(wrapper.find('.base-prompt-title').exists()).toBe(false)
+  })
+
+  it('uses a custom confirmLabel + cancelLabel when provided', async () => {
+    const wrapper = mountPrompt({ confirmLabel: 'Copy and Update', cancelLabel: 'Back' })
+    await flushPromises()
+    expect(wrapper.find('[data-testid="base-prompt-action"]').text()).toBe('Copy and Update')
+    expect(wrapper.find('[data-testid="base-prompt-cancel"]').text()).toBe('Back')
+  })
+})
diff --git a/src/renderer/src/components/ui/BasePrompt.vue b/src/renderer/src/components/ui/BasePrompt.vue
new file mode 100644
index 00000000..5b6f8bc6
--- /dev/null
+++ b/src/renderer/src/components/ui/BasePrompt.vue
@@ -0,0 +1,290 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import BaseModal from './BaseModal.vue'
+import { linkify, handleModalLinkClick } from '../../lib/modalLinkify'
+import type { ModalDetailGroup } from '../../types/ipc'
+
+/**
+ * Prompt primitive — title, message, single text input, Cancel +
+ * primary action. Composes `BaseModal` for the shell (teleport,
+ * overlay, focus capture, scroll lock, ESC, a11y). Use for any
+ * "name this thing" affordance previously routed through
+ * `useModal().prompt()`.
+ *
+ * Two-way `open` via `v-model:open` so the call site doesn't have to
+ * juggle local ref + listener.
+ */
+
+interface Props {
+  open: boolean
+  title: string
+  message?: string
+  placeholder?: string
+  defaultValue?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  /** Inline-label above the text field. Defaults to i18n `common.name`. */
+  inputLabel?: string
+  /** When truthy, empty submissions show an inline error. A string
+   *  value overrides the default error copy. */
+  required?: boolean | string
+  /** Optional recessed sub-blocks rendered below the message (e.g.
+   *  release notes for the Copy and Update prompt). */
+  messageDetails?: ModalDetailGroup[]
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  dismissOnEscape?: boolean
+  dismissOnOutside?: boolean
+  testIdInput?: string
+  testIdAction?: string
+  testIdCancel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  message: '',
+  placeholder: '',
+  defaultValue: '',
+  confirmLabel: undefined,
+  cancelLabel: undefined,
+  inputLabel: undefined,
+  required: false,
+  messageDetails: () => [],
+  size: 'sm',
+  dismissOnEscape: true,
+  dismissOnOutside: true,
+  testIdInput: undefined,
+  testIdAction: undefined,
+  testIdCancel: undefined
+})
+
+const emit = defineEmits<{
+  'update:open': [open: boolean]
+  submit: [value: string]
+  cancel: []
+}>()
+
+const TITLE_ID = 'base-prompt-title'
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const inputValue = ref('')
+const error = ref('')
+
+const linkifiedMessage = computed(() => linkify(props.message))
+
+function cancel(): void {
+  emit('update:open', false)
+  emit('cancel')
+}
+
+function submit(): void {
+  const value = inputValue.value.trim()
+  if (props.required && !value) {
+    error.value = typeof props.required === 'string' ? props.required : 'This field is required'
+    return
+  }
+  emit('update:open', false)
+  emit('submit', value)
+}
+
+watch(
+  () => props.open,
+  (isOpen, wasOpen) => {
+    if (isOpen && !wasOpen) {
+      inputValue.value = props.defaultValue
+      error.value = ''
+      void nextTick(() => {
+        inputRef.value?.focus()
+        inputRef.value?.select()
+      })
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <BaseModal
+    :open="open"
+    :size="size"
+    :aria-labelledby="TITLE_ID"
+    :dismiss-on-escape="dismissOnEscape"
+    :dismiss-on-outside="dismissOnOutside"
+    :show-close-button="false"
+    content-class="base-prompt-panel"
+    @close="cancel"
+  >
+    <template #header>
+      <h2 :id="TITLE_ID" class="base-prompt-title">{{ title }}</h2>
+    </template>
+
+    <div class="base-prompt-body">
+      <div
+        v-if="message"
+        class="base-prompt-message"
+        @click="handleModalLinkClick"
+        v-html="linkifiedMessage"
+      ></div>
+
+      <div v-if="messageDetails.length" class="base-prompt-details">
+        <div
+          v-for="(group, gi) in messageDetails"
+          :key="gi"
+          class="base-prompt-detail-group"
+        >
+          <span class="base-prompt-detail-label">{{ group.label }}</span>
+          <div class="base-prompt-detail-recessed" @click="handleModalLinkClick">
+            <div
+              v-for="(item, ii) in group.items"
+              :key="ii"
+              class="base-prompt-detail-item"
+              v-html="linkify(item)"
+            ></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="base-prompt-field">
+        <label class="base-prompt-field-label">
+          {{ inputLabel ?? $t('common.name') }}
+        </label>
+        <input
+          ref="inputRef"
+          v-model="inputValue"
+          type="text"
+          class="base-prompt-input"
+          :placeholder="placeholder"
+          :data-testid="testIdInput ?? 'base-prompt-input'"
+          @keydown.enter="submit"
+        />
+        <div v-if="error" class="base-prompt-error">{{ error }}</div>
+      </div>
+    </div>
+
+    <template #footer>
+      <button
+        type="button"
+        :data-testid="testIdCancel ?? 'base-prompt-cancel'"
+        @click="cancel"
+      >
+        {{ cancelLabel ?? $t('common.cancel') }}
+      </button>
+      <button
+        type="button"
+        class="primary"
+        :data-testid="testIdAction ?? 'base-prompt-action'"
+        @click="submit"
+      >
+        {{ confirmLabel ?? $t('modal.ok') }}
+      </button>
+    </template>
+  </BaseModal>
+</template>
+
+<style scoped>
+.base-prompt-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--neutral-100);
+}
+
+.base-prompt-body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+
+.base-prompt-message {
+  white-space: pre-line;
+  user-select: text;
+}
+
+.base-prompt-message :deep(strong) {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.base-prompt-message :deep(.modal-link) {
+  color: var(--accent);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.base-prompt-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.base-prompt-detail-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.base-prompt-detail-label {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+
+.base-prompt-detail-recessed {
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: color-mix(in oklab, var(--neutral-100) 4%, transparent);
+  border: 1px solid color-mix(in oklab, var(--neutral-100) 8%, transparent);
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.base-prompt-detail-item {
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--neutral-100);
+}
+
+.base-prompt-detail-item :deep(.modal-link) {
+  color: var(--accent);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.base-prompt-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.base-prompt-field-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.base-prompt-input {
+  width: 100%;
+  padding: 8px 10px;
+  font-size: 14px;
+  border-radius: 8px;
+  border: 1px solid var(--chooser-surface-border);
+  background: color-mix(in oklab, var(--neutral-100) 4%, transparent);
+  color: var(--neutral-100);
+  transition: border-color 0.12s ease;
+}
+
+.base-prompt-input:focus-visible {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.base-prompt-error {
+  font-size: 13px;
+  color: var(--danger);
+  min-height: 12px;
+}
+</style>
diff --git a/src/renderer/src/components/ui/BaseSelect.vue b/src/renderer/src/components/ui/BaseSelect.vue
index 8c342f36..d58b29db 100644
--- a/src/renderer/src/components/ui/BaseSelect.vue
+++ b/src/renderer/src/components/ui/BaseSelect.vue
@@ -24,14 +24,12 @@ interface Props {
   options: BaseSelectOption[]
   ariaLabel?: string
   placeholder?: string
-  variant?: 'default' | 'brand'
   disabled?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   ariaLabel: undefined,
   placeholder: '',
-  variant: 'default',
   disabled: false
 })
 
@@ -217,7 +215,6 @@ onBeforeUnmount(() => {
     aria-haspopup="listbox"
     :aria-label="ariaLabel"
     :data-placeholder="!selectedOption ? '' : undefined"
-    :data-variant="variant"
     :disabled="disabled"
     @click="toggle"
     @keydown="onTriggerKeydown"
@@ -237,7 +234,6 @@ onBeforeUnmount(() => {
         tabindex="-1"
         :style="popoverStyle"
         :aria-label="ariaLabel"
-        :data-variant="variant"
         @keydown="onListboxKeydown"
       >
         <li
@@ -271,6 +267,7 @@ onBeforeUnmount(() => {
   justify-content: space-between;
   gap: 8px;
   width: 100%;
+  box-sizing: border-box;
   padding: 8px 10px;
   background: var(--neutral-800);
   border: 1px solid var(--chooser-surface-border);
@@ -280,7 +277,14 @@ onBeforeUnmount(() => {
   font-size: 14px;
   text-align: left;
   cursor: pointer;
-  transition: border-color 150ms ease;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease;
+}
+
+.ui-select-trigger:hover:not(:disabled) {
+  border-color: var(--border-hover);
+  background: color-mix(in srgb, var(--neutral-100) 4%, var(--neutral-800));
 }
 
 .ui-select-trigger:focus-visible {
@@ -318,36 +322,6 @@ onBeforeUnmount(() => {
   cursor: not-allowed;
   opacity: 0.6;
 }
-
-/* Brand-variant trigger — mirrors .brand-input exactly so it sits
- * flush in the same field stack without looking foreign. */
-.ui-select-trigger[data-variant='brand'] {
-  background: var(--brand-surface-bg);
-  border: 1px solid var(--brand-surface-border);
-  border-radius: 6px;
-  color: var(--neutral-100);
-  backdrop-filter: blur(var(--brand-surface-blur));
-  padding: 10px 14px;
-  font-size: var(--takeover-fs-body);
-  transition:
-    border-color 120ms ease,
-    background 120ms ease;
-}
-.ui-select-trigger[data-variant='brand']:hover:not(:disabled) {
-  border-color: var(--brand-surface-border-hover);
-  background: var(--brand-surface-bg-hover);
-}
-.ui-select-trigger[data-variant='brand']:focus-visible {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
-  outline: none;
-}
-.ui-select-trigger[data-variant='brand'][aria-expanded='true'] {
-  border-color: var(--brand-surface-border-hover);
-}
-.ui-select-trigger[data-variant='brand'] .ui-select-chevron {
-  color: var(--neutral-400);
-}
 </style>
 
 <style>
@@ -438,39 +412,4 @@ onBeforeUnmount(() => {
     transition-duration: 0ms;
   }
 }
-
-/* Brand-variant listbox — color-matched to the resolved visual of
- * the frosted-glass fields (trigger, GPU field, path field). */
-.ui-select-listbox[data-variant='brand'] {
-  padding: 4px;
-  background: rgba(56, 48, 64, 0.92);
-  border: 1px solid var(--brand-surface-border);
-  border-radius: 6px;
-  backdrop-filter: blur(40px);
-  -webkit-backdrop-filter: blur(40px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-}
-.ui-select-listbox[data-variant='brand'] .ui-select-option {
-  padding: 10px 14px;
-  border-radius: 4px;
-  color: var(--neutral-200);
-  transition: background 100ms ease;
-}
-.ui-select-listbox[data-variant='brand'] .ui-select-option[data-selected] {
-  color: var(--neutral-100);
-}
-.ui-select-listbox[data-variant='brand'] .ui-select-option[data-active] {
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--neutral-100);
-}
-.ui-select-listbox[data-variant='brand']
-  .ui-select-option[data-active][data-selected] {
-  background: rgba(255, 255, 255, 0.07);
-}
-.ui-select-listbox[data-variant='brand'] .ui-select-option-desc {
-  color: var(--neutral-400);
-}
-.ui-select-listbox[data-variant='brand'] .ui-select-option-check {
-  color: var(--comfy-yellow);
-}
 </style>
diff --git a/src/renderer/src/components/ui/Tooltip.test.ts b/src/renderer/src/components/ui/Tooltip.test.ts
new file mode 100644
index 00000000..e4e8d244
--- /dev/null
+++ b/src/renderer/src/components/ui/Tooltip.test.ts
@@ -0,0 +1,166 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, flushPromises, type VueWrapper } from '@vue/test-utils'
+import Tooltip from './Tooltip.vue'
+
+/**
+ * Position-aware tooltip primitive. These tests pin the contracts that
+ * call sites depend on: bubble appears after the delay, teleports to
+ * body (no overflow clipping), the `disabled` and missing-text gates
+ * suppress, and the placement resolver flips when the requested side
+ * lacks room.
+ */
+
+const wrappers: VueWrapper[] = []
+
+afterEach(() => {
+  while (wrappers.length) wrappers.pop()?.unmount()
+  vi.useRealTimers()
+})
+
+function mountTooltip(props: Record<string, unknown> = {}) {
+  const wrapper = mount(Tooltip, {
+    props: { text: 'Hello tooltip', delayMs: 0, ...props },
+    slots: { default: '<button data-testid="trigger">trigger</button>' },
+    attachTo: document.body,
+  })
+  wrappers.push(wrapper)
+  return wrapper
+}
+
+/**
+ * jsdom returns zero-sized rects by default. Stub `getBoundingClientRect`
+ * on every element so the placement resolver gets real numbers, and
+ * pin `innerWidth`/`innerHeight` so we can drive the flip behavior.
+ */
+function stubViewport(width: number, height: number) {
+  Object.defineProperty(window, 'innerWidth', { value: width, configurable: true })
+  Object.defineProperty(window, 'innerHeight', { value: height, configurable: true })
+}
+
+function stubTriggerRect(rect: Partial<DOMRect>) {
+  const original = Element.prototype.getBoundingClientRect
+  Element.prototype.getBoundingClientRect = function (this: Element) {
+    if (this.matches('[data-testid="trigger"]')) {
+      return {
+        x: 0,
+        y: 0,
+        width: 20,
+        height: 20,
+        top: 0,
+        bottom: 20,
+        left: 0,
+        right: 20,
+        toJSON: () => ({}),
+        ...rect,
+      } as DOMRect
+    }
+    if (this.matches('.tooltip-bubble')) {
+      return {
+        x: 0,
+        y: 0,
+        width: 120,
+        height: 40,
+        top: 0,
+        bottom: 40,
+        left: 0,
+        right: 120,
+        toJSON: () => ({}),
+      } as DOMRect
+    }
+    return original.call(this)
+  }
+  return () => {
+    Element.prototype.getBoundingClientRect = original
+  }
+}
+
+describe('Tooltip (ui primitive)', () => {
+  it('does not render the bubble before the trigger is hovered', () => {
+    mountTooltip()
+    expect(document.querySelector('.tooltip-bubble')).toBeNull()
+  })
+
+  it('shows the bubble on mouseenter with the trigger text', async () => {
+    const wrapper = mountTooltip()
+    await wrapper.trigger('mouseenter')
+    await flushPromises()
+    const bubble = document.querySelector('.tooltip-bubble')
+    expect(bubble).not.toBeNull()
+    expect(bubble!.textContent?.trim()).toContain('Hello tooltip')
+  })
+
+  it('hides the bubble on mouseleave', async () => {
+    const wrapper = mountTooltip()
+    await wrapper.trigger('mouseenter')
+    await flushPromises()
+    expect(document.querySelector('.tooltip-bubble')).not.toBeNull()
+    wrapper.element.dispatchEvent(new Event('mouseleave'))
+    await flushPromises()
+    expect(document.querySelector('.tooltip-bubble')).toBeNull()
+  })
+
+  it('teleports the bubble to document.body (outside any overflow:hidden parent)', async () => {
+    const wrapper = mountTooltip()
+    await wrapper.trigger('mouseenter')
+    await flushPromises()
+    const bubble = document.querySelector('.tooltip-bubble')
+    expect(bubble?.parentElement).toBe(document.body)
+  })
+
+  it('does not show the bubble when `disabled` is true', async () => {
+    const wrapper = mountTooltip({ disabled: true })
+    await wrapper.trigger('mouseenter')
+    await flushPromises()
+    expect(document.querySelector('.tooltip-bubble')).toBeNull()
+  })
+
+  it('does not show the bubble when `text` is empty', async () => {
+    const wrapper = mountTooltip({ text: '' })
+    await wrapper.trigger('mouseenter')
+    await flushPromises()
+    expect(document.querySelector('.tooltip-bubble')).toBeNull()
+  })
+
+  it('flips `side="top"` to `bottom` when the trigger sits flush against the top edge', async () => {
+    stubViewport(1024, 768)
+    const restore = stubTriggerRect({
+      top: 0,
+      bottom: 20,
+      left: 100,
+      right: 120,
+    })
+    try {
+      const wrapper = mountTooltip({ side: 'top' })
+      await wrapper.trigger('mouseenter')
+      await flushPromises()
+      const bubble = document.querySelector('.tooltip-bubble')
+      expect(bubble?.getAttribute('data-side')).toBe('bottom')
+    } finally {
+      restore()
+    }
+  })
+
+  it('clamps the bubble inside the viewport when the trigger is near the right edge', async () => {
+    stubViewport(800, 600)
+    const restore = stubTriggerRect({
+      top: 300,
+      bottom: 320,
+      left: 790,
+      right: 800,
+      width: 10,
+    })
+    try {
+      const wrapper = mountTooltip({ side: 'top' })
+      await wrapper.trigger('mouseenter')
+      await flushPromises()
+      const bubble = document.querySelector('.tooltip-bubble') as HTMLElement
+      // Bubble is 120px wide (stub), viewport is 800, edgePadding is 8 →
+      // clamp upper bound is 800 - 120 - 8 = 672. Without clamping the
+      // bubble's left would be 790 + 5 - 60 = 735.
+      const left = parseFloat(bubble.style.left)
+      expect(left).toBeLessThanOrEqual(672)
+    } finally {
+      restore()
+    }
+  })
+})
diff --git a/src/renderer/src/components/ui/Tooltip.vue b/src/renderer/src/components/ui/Tooltip.vue
new file mode 100644
index 00000000..95aa2486
--- /dev/null
+++ b/src/renderer/src/components/ui/Tooltip.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { computed, ref, useId } from 'vue'
+import { useTooltip, type TooltipAlign, type TooltipSide } from '../../composables/useTooltip'
+
+interface Props {
+  text?: string
+  side?: TooltipSide
+  align?: TooltipAlign
+  delayMs?: number
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  text: undefined,
+  side: 'top',
+  align: 'center',
+  delayMs: 100,
+  disabled: false,
+})
+
+const triggerRef = ref<HTMLElement | null>(null)
+const bubbleRef = ref<HTMLElement | null>(null)
+const bubbleId = `tooltip-${useId()}`
+
+const { visible, show, hide, bubbleStyle, resolvedSide, arrowStyle } = useTooltip(
+  triggerRef,
+  bubbleRef,
+  {
+    side: () => props.side,
+    align: () => props.align,
+    canShow: () => !props.disabled && !!props.text,
+  },
+)
+
+const describedBy = computed(() => (visible.value ? bubbleId : undefined))
+
+let openTimer: ReturnType<typeof setTimeout> | null = null
+
+function onEnter(): void {
+  if (openTimer) clearTimeout(openTimer)
+  if (props.delayMs <= 0) {
+    show()
+    return
+  }
+  openTimer = setTimeout(() => {
+    show()
+    openTimer = null
+  }, props.delayMs)
+}
+
+function onLeave(): void {
+  if (openTimer) {
+    clearTimeout(openTimer)
+    openTimer = null
+  }
+  hide()
+}
+
+function onKeydown(e: KeyboardEvent): void {
+  if (e.key === 'Escape' && visible.value) {
+    e.stopPropagation()
+    hide()
+  }
+}
+</script>
+
+<template>
+  <span
+    ref="triggerRef"
+    class="tooltip-wrap"
+    :aria-describedby="describedBy"
+    @mouseenter="onEnter"
+    @mouseleave="onLeave"
+    @focusin="onEnter"
+    @focusout="onLeave"
+    @keydown="onKeydown"
+  >
+    <slot />
+    <Teleport to="body">
+      <span
+        v-if="visible"
+        :id="bubbleId"
+        ref="bubbleRef"
+        class="tooltip-bubble"
+        :data-side="resolvedSide"
+        :style="bubbleStyle"
+        role="tooltip"
+      >
+        {{ text }}
+        <span class="tooltip-arrow" :style="arrowStyle" aria-hidden="true">
+          <span class="tooltip-arrow__fill" />
+        </span>
+      </span>
+    </Teleport>
+  </span>
+</template>
+
+<style scoped>
+.tooltip-wrap {
+  display: inline-flex;
+}
+</style>
+
+<style>
+.tooltip-bubble {
+  position: fixed;
+  z-index: var(--z-tooltip);
+  padding: 8px 16px;
+  border-radius: var(--primitive-border-radius-rounded-lg, 8px);
+  border: 1px solid var(--tooltip-border);
+  background: var(--tooltip-bg);
+  color: var(--tooltip-fg);
+  font-size: 12px;
+  line-height: 1.4;
+  font-weight: 400;
+  max-width: 260px;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+  white-space: normal;
+  text-align: left;
+}
+
+.tooltip-arrow {
+  position: absolute;
+  width: 12px;
+  height: 6px;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+.tooltip-bubble[data-side='top'] .tooltip-arrow {
+  bottom: -5px;
+}
+.tooltip-bubble[data-side='bottom'] .tooltip-arrow {
+  top: -5px;
+}
+.tooltip-bubble[data-side='left'] .tooltip-arrow,
+.tooltip-bubble[data-side='right'] .tooltip-arrow {
+  width: 6px;
+  height: 12px;
+  transform: translateY(-50%);
+}
+.tooltip-bubble[data-side='left'] .tooltip-arrow {
+  right: -5px;
+}
+.tooltip-bubble[data-side='right'] .tooltip-arrow {
+  left: -5px;
+}
+
+.tooltip-arrow::before,
+.tooltip-arrow__fill {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.tooltip-arrow::before {
+  background: var(--tooltip-border);
+  clip-path: polygon(50% 100%, 0 0, 100% 0);
+}
+.tooltip-bubble[data-side='bottom'] .tooltip-arrow::before {
+  clip-path: polygon(50% 0, 0 100%, 100% 100%);
+}
+.tooltip-bubble[data-side='left'] .tooltip-arrow::before {
+  clip-path: polygon(100% 50%, 0 0, 0 100%);
+}
+.tooltip-bubble[data-side='right'] .tooltip-arrow::before {
+  clip-path: polygon(0 50%, 100% 0, 100% 100%);
+}
+
+.tooltip-arrow__fill {
+  background: var(--tooltip-bg);
+  inset: -1px 0 0 0;
+  clip-path: polygon(50% 85%, 8% 0, 92% 0);
+}
+.tooltip-bubble[data-side='bottom'] .tooltip-arrow__fill {
+  inset: 0 0 -1px 0;
+  clip-path: polygon(50% 15%, 8% 100%, 92% 100%);
+}
+.tooltip-bubble[data-side='left'] .tooltip-arrow__fill {
+  inset: 0 0 0 -1px;
+  clip-path: polygon(85% 50%, 0 8%, 0 92%);
+}
+.tooltip-bubble[data-side='right'] .tooltip-arrow__fill {
+  inset: 0 -1px 0 0;
+  clip-path: polygon(15% 50%, 100% 8%, 100% 92%);
+}
+</style>
diff --git a/src/renderer/src/composables/useComfyUISettings.test.ts b/src/renderer/src/composables/useComfyUISettings.test.ts
index 028d9481..7367984f 100644
--- a/src/renderer/src/composables/useComfyUISettings.test.ts
+++ b/src/renderer/src/composables/useComfyUISettings.test.ts
@@ -45,7 +45,7 @@ vi.mock('../lib/telemetry', () => ({
 
 import { useComfyUISettings } from './useComfyUISettings'
 import { useSessionStore } from '../stores/sessionStore'
-import type { ActionDef, ActionResult, DetailSection, Installation, ShowProgressOpts } from '../types/ipc'
+import type { ActionDef, ActionResult, DetailField, DetailSection, Installation, ShowProgressOpts } from '../types/ipc'
 
 function makeInstall(id: string, name: string): Installation {
   return {
@@ -71,16 +71,20 @@ function makeSection(installName: string): DetailSection {
 interface MockApi {
   getDetailSections: ReturnType<typeof vi.fn>
   getDiskSpace: ReturnType<typeof vi.fn>
+  getInstallationSize: ReturnType<typeof vi.fn>
   stopComfyUI: ReturnType<typeof vi.fn>
   runAction: ReturnType<typeof vi.fn>
+  updateInstallation: ReturnType<typeof vi.fn>
 }
 
 function installMockApi(overrides: Partial<MockApi> = {}): MockApi {
   const api: MockApi = {
     getDetailSections: vi.fn().mockResolvedValue([]),
     getDiskSpace: vi.fn().mockResolvedValue(null),
+    getInstallationSize: vi.fn().mockResolvedValue({ sizeBytes: 0 }),
     stopComfyUI: vi.fn().mockResolvedValue(undefined),
     runAction: vi.fn().mockResolvedValue({ ok: true }),
+    updateInstallation: vi.fn().mockResolvedValue(undefined),
     ...overrides,
   }
   ;(window as unknown as { api: MockApi }).api = api
@@ -521,3 +525,262 @@ describe('useComfyUISettings.runAction — stop-warning augment + self-stopping
     scope.stop()
   })
 })
+
+describe('useComfyUISettings.updateField — optimistic write + restart-required tracking', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  function makeRestartField(id: string, value: unknown): DetailField {
+    return {
+      id,
+      label: id,
+      value: value as DetailField['value'],
+      editable: true,
+      editType: 'select',
+      requiresRestart: true,
+    }
+  }
+
+  function makeSectionWithField(field: DetailField): DetailSection {
+    return { tab: 'settings', title: 'Launch', fields: [field] } as DetailSection
+  }
+
+  /** Bring the composable up with a single restart-required field
+   *  already in `sections`. Tests can then call `updateField` and
+   *  assert on `sections.value`, `pendingRestartFieldIds`,
+   *  `fieldErrorMessages` without re-running the initial load every
+   *  time. */
+  async function mountWithField(
+    installId: string,
+    initialValue: unknown,
+    apiOverrides: Partial<MockApi> = {},
+  ) {
+    const initialField = makeRestartField('launchMode', initialValue)
+    const api = installMockApi({
+      getDetailSections: vi.fn().mockResolvedValue([makeSectionWithField(initialField)]),
+      ...apiOverrides,
+    })
+    const installation = ref<Installation | null>(makeInstall(installId, installId.toUpperCase()))
+    const scope = effectScope()
+    let composable!: ReturnType<typeof useComfyUISettings>
+    scope.run(() => {
+      composable = useComfyUISettings({ installation, onShowProgress: vi.fn() })
+    })
+    await nextTick()
+    await Promise.resolve()
+    await Promise.resolve()
+    return { composable, api, installation, scope }
+  }
+
+  function markRunning(id: string): void {
+    useSessionStore().runningInstances.set(id, {
+      installationId: id,
+      installationName: id.toUpperCase(),
+      mode: 'standalone',
+    })
+  }
+
+  it('writes the new value into sections optimistically before the IPC resolves', async () => {
+    // Hold the updateInstallation IPC open until we explicitly resolve.
+    // The optimistic write must land on `sections.value` synchronously
+    // (next microtask), regardless of when main responds.
+    let resolveIpc: (() => void) | null = null
+    const ipcPromise = new Promise<void>((r) => {
+      resolveIpc = r
+    })
+    const updateInstallation = vi.fn().mockReturnValue(ipcPromise)
+    const { composable, scope } = await mountWithField('a', 'window', { updateInstallation })
+
+    markRunning('a')
+    const updatePromise = composable.updateField(
+      makeRestartField('launchMode', 'window'),
+      'console',
+    )
+
+    // Microtask flush — but IPC is still pending.
+    await nextTick()
+    const field = composable.sections.value[0]!.fields![0]!
+    expect(field.value).toBe('console')
+    expect(updateInstallation).toHaveBeenCalledWith('a', { launchMode: 'console' })
+
+    resolveIpc!()
+    await updatePromise
+    scope.stop()
+  })
+
+  it('marks the field dirty when running, clears it when reverted to baseline', async () => {
+    const { composable, scope } = await mountWithField('a', 'window')
+    markRunning('a')
+
+    await composable.updateField(makeRestartField('launchMode', 'window'), 'console')
+    expect(composable.pendingRestartFieldIds.value.has('launchMode')).toBe(true)
+
+    // Revert — baseline is the original 'window', so this should drop
+    // the dirty entry.
+    await composable.updateField(makeRestartField('launchMode', 'console'), 'window')
+    expect(composable.pendingRestartFieldIds.value.has('launchMode')).toBe(false)
+    expect(composable.pendingRestartFieldIds.value.size).toBe(0)
+    scope.stop()
+  })
+
+  it('does NOT mark dirty when the install is not running', async () => {
+    const { composable, scope } = await mountWithField('a', 'window')
+    // No markRunning — stopped install picks up new values on next
+    // launch, so there is nothing pending.
+    await composable.updateField(makeRestartField('launchMode', 'window'), 'console')
+    expect(composable.pendingRestartFieldIds.value.size).toBe(0)
+    scope.stop()
+  })
+
+  it('keeps the dirty state when the picker selection swaps to another install and back', async () => {
+    // Critical regression for "switching instance and back resets the
+    // dirty set". The Map<installId, ...> shape isolates state per
+    // install so toggling the picker row preserves install A's edits.
+    const initialField = makeRestartField('launchMode', 'window')
+    const installation = ref<Installation | null>(makeInstall('a', 'A'))
+    const api = installMockApi({
+      getDetailSections: vi.fn((id: string) => {
+        if (id === 'a') return Promise.resolve([makeSectionWithField(initialField)])
+        if (id === 'b') return Promise.resolve([
+          makeSectionWithField(makeRestartField('launchMode', 'window')),
+        ])
+        return Promise.resolve([])
+      }),
+    })
+    const scope = effectScope()
+    let composable!: ReturnType<typeof useComfyUISettings>
+    scope.run(() => {
+      composable = useComfyUISettings({ installation, onShowProgress: vi.fn() })
+    })
+    await nextTick()
+    await Promise.resolve()
+    await Promise.resolve()
+
+    markRunning('a')
+    await composable.updateField(makeRestartField('launchMode', 'window'), 'console')
+    expect(composable.pendingRestartFieldIds.value.has('launchMode')).toBe(true)
+
+    // Switch picker selection to B — different install, no edits, no
+    // tag should surface for B.
+    installation.value = makeInstall('b', 'B')
+    await nextTick()
+    await Promise.resolve()
+    await Promise.resolve()
+    expect(composable.pendingRestartFieldIds.value.has('launchMode')).toBe(false)
+
+    // Switch back to A — dirty marker for A's launchMode is still there.
+    installation.value = makeInstall('a', 'A')
+    await nextTick()
+    await Promise.resolve()
+    await Promise.resolve()
+    expect(composable.pendingRestartFieldIds.value.has('launchMode')).toBe(true)
+    expect(api.getDetailSections).toHaveBeenCalled()
+    scope.stop()
+  })
+
+  it('rolls back the optimistic write and surfaces an error pill when the IPC rejects', async () => {
+    const updateInstallation = vi.fn().mockRejectedValue(new Error('boom'))
+    const { composable, scope } = await mountWithField('a', 'window', { updateInstallation })
+    markRunning('a')
+
+    await composable.updateField(makeRestartField('launchMode', 'window'), 'console')
+
+    const field = composable.sections.value[0]!.fields![0]!
+    // Rolled back to the prior value — UI doesn't lie about state.
+    expect(field.value).toBe('window')
+    // Failed writes never engage the dirty/yellow state.
+    expect(composable.pendingRestartFieldIds.value.size).toBe(0)
+    // Inline error pill surfaces the IPC message.
+    expect(composable.fieldErrorMessages.value.get('launchMode')).toBe('boom')
+    scope.stop()
+  })
+
+  it('treats a 5s+ IPC stall as a timeout and rolls back with a timeout-flavoured message', async () => {
+    // updateInstallation never settles — the 5s race against
+    // withTimeout's setTimeout should win and trigger rollback.
+    vi.useFakeTimers()
+    try {
+      const updateInstallation = vi.fn().mockReturnValue(new Promise<void>(() => {}))
+      const { composable, scope } = await mountWithField('a', 'window', { updateInstallation })
+      markRunning('a')
+
+      const updatePromise = composable.updateField(
+        makeRestartField('launchMode', 'window'),
+        'console',
+      )
+      // Advance past the 5s deadline. The race rejects via the timeout
+      // branch; the rest of updateField runs on real microtasks.
+      await vi.advanceTimersByTimeAsync(5_001)
+      await updatePromise
+
+      const timeoutField = composable.sections.value[0]!.fields![0]!
+      expect(timeoutField.value).toBe('window')
+      expect(composable.pendingRestartFieldIds.value.size).toBe(0)
+      expect(composable.fieldErrorMessages.value.get('launchMode')).toBe(
+        "Couldn't reach app — try again",
+      )
+      scope.stop()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('clears the per-install dirty + error entries when the install transitions to not-running', async () => {
+    const updateInstallation = vi.fn().mockRejectedValueOnce(new Error('boom'))
+      .mockResolvedValue(undefined)
+    const { composable, scope } = await mountWithField('a', 'window', { updateInstallation })
+    markRunning('a')
+
+    // First call fails → error pill present.
+    await composable.updateField(makeRestartField('launchMode', 'window'), 'console')
+    expect(composable.fieldErrorMessages.value.get('launchMode')).toBe('boom')
+
+    // Second call succeeds → dirty engaged.
+    await composable.updateField(makeRestartField('launchMode', 'window'), 'console')
+    expect(composable.pendingRestartFieldIds.value.has('launchMode')).toBe(true)
+
+    // Stop the install — both per-install entries should drop because
+    // the next launch will pick up the new value.
+    useSessionStore().runningInstances.delete('a')
+    await nextTick()
+    expect(composable.pendingRestartFieldIds.value.size).toBe(0)
+    expect(composable.fieldErrorMessages.value.size).toBe(0)
+    scope.stop()
+  })
+
+  it('considers envVars equal when keys and values match (revert clears dirty)', async () => {
+    const initialField: DetailField = {
+      id: 'envVars',
+      label: 'envVars',
+      value: { FOO: 'bar' } as DetailField['value'],
+      editable: true,
+      editType: 'env-vars',
+      requiresRestart: true,
+    }
+    const installation = ref<Installation | null>(makeInstall('a', 'A'))
+    installMockApi({
+      getDetailSections: vi.fn().mockResolvedValue([makeSectionWithField(initialField)]),
+    })
+    const scope = effectScope()
+    let composable!: ReturnType<typeof useComfyUISettings>
+    scope.run(() => {
+      composable = useComfyUISettings({ installation, onShowProgress: vi.fn() })
+    })
+    await nextTick()
+    await Promise.resolve()
+    await Promise.resolve()
+    markRunning('a')
+
+    await composable.updateField(initialField, { FOO: 'bar', BAZ: 'qux' })
+    expect(composable.pendingRestartFieldIds.value.has('envVars')).toBe(true)
+
+    // Revert to the baseline object — equality is by keys+values, not
+    // by reference, so a fresh `{ FOO: 'bar' }` object still matches.
+    await composable.updateField({ ...initialField, value: { FOO: 'bar', BAZ: 'qux' } } as DetailField, {
+      FOO: 'bar',
+    })
+    expect(composable.pendingRestartFieldIds.value.has('envVars')).toBe(false)
+    scope.stop()
+  })
+})
diff --git a/src/renderer/src/composables/useComfyUISettings.ts b/src/renderer/src/composables/useComfyUISettings.ts
index 91a16de8..4622b92c 100644
--- a/src/renderer/src/composables/useComfyUISettings.ts
+++ b/src/renderer/src/composables/useComfyUISettings.ts
@@ -1,6 +1,7 @@
 import { computed, ref, toValue, watch, type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useModal } from './useModal'
+import { useDialogs } from './useDialogs'
 import { useActionGuard } from './useActionGuard'
 import { useMigrateAction } from './useMigrateAction'
 import { useSessionStore } from '../stores/sessionStore'
@@ -10,7 +11,6 @@ import {
   REQUIRES_STOPPED,
   type ActionDef,
   type DetailField,
-  type DetailItem,
   type DetailSection,
   type DiskSpaceInfo,
   type FieldOption,
@@ -18,6 +18,8 @@ import {
   type ShowProgressOpts,
 } from '../types/ipc'
 import { IN_PLACE_RELAUNCH, augmentActionWithStopWarning, stopAndWaitForExit } from '../lib/stopWarning'
+import { sleepRemainder } from '../lib/uiTiming'
+import type { SectionTab } from '../lib/pickerTabs'
 
 /**
  * Backing state + IPC plumbing for the brand-redesigned Settings drawer
@@ -85,16 +87,36 @@ export interface UseComfyUISettingsApi {
    *  reload sections so the UI tracks main-side defaults / clamping. */
   updateField: (field: DetailField, value: unknown) => Promise<void>
 
+  /** Field ids edited while the install is running that carry
+   *  `requiresRestart` AND whose current value differs from the
+   *  value the running process was launched with. Drives the
+   *  per-field "Restart to apply" pill and the footer button's
+   *  yellow promotion. State is held per-install internally so
+   *  switching the picker selection doesn't drop the marker. */
+  pendingRestartFieldIds: ComputedRef<Set<string>>
+
+  /** Transient error messages for the currently-selected install,
+   *  keyed by field id. Populated when `updateField`'s IPC rejects
+   *  or times out — the field's display is rolled back and a red
+   *  inline pill surfaces the message. Auto-clears after a short
+   *  timer or on the next edit of the same field. */
+  fieldErrorMessages: ComputedRef<Map<string, string>>
+
   /** Run an action coming off a `DetailSection.actions[]` entry. */
   runAction: (action: ActionDef) => Promise<void>
 
+  /** Action ids currently in-flight on the inline path (no
+   *  `showProgress` — those route to ProgressModal instead). Drives the
+   *  per-button spinner + disabled state so clicks feel acknowledged. */
+  runningActionIds: Ref<Set<string>>
+
   /** Visible sections for a given tab (filtered by `section.tab`). */
-  sectionsForTab: (tab: 'settings' | 'status' | 'update' | 'snapshots') => ComputedRef<DetailSection[]>
+  sectionsForTab: (tab: SectionTab) => ComputedRef<DetailSection[]>
 
   /** Synthetic Status-tab row carrying the disk-usage reading. The
    *  status section payload doesn't include this — it lives on its own
    *  IPC — so the component renders it alongside the regular items. */
-  diskUsageItem: ComputedRef<DetailItem | null>
+  diskUsageItem: ComputedRef<{ label: string; value: string } | null>
 
   /** Install-level actions (`pinBottom` section from main). */
   pinBottomSection: ComputedRef<DetailSection | null>
@@ -121,14 +143,46 @@ function formatBytes(bytes: number): string {
 export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISettingsApi {
   const { t } = useI18n()
   const modal = useModal()
+  const dialogs = useDialogs()
   const actionGuard = useActionGuard()
   const { confirmMigration } = useMigrateAction()
   const sessionStore = useSessionStore()
 
   const sections = ref<DetailSection[]>([])
   const diskSpace = ref<DiskSpaceInfo | null>(null)
+  /** Install's own on-disk footprint in bytes. Fetched via
+   *  `getInstallationSize` which walks the directory tree, so it
+   *  lands after the initial render and is `null` until then. Drives
+   *  the Status tab's Disk Usage row — `total - free` would be the
+   *  whole volume's used space, which is not what users want here. */
+  const installSize = ref<number | null>(null)
   const loading = ref(false)
   const error = ref<string | null>(null)
+  // Inline-action busy state. Replaced (not mutated) on each add/delete
+  // so Vue's shallow reactivity on Set tracks the change.
+  const runningActionIds = ref<Set<string>>(new Set())
+  // Restart-required dirty tracking — per install, keyed by field id,
+  // value is the "running baseline" (the value the running process was
+  // launched with). A field is dirty iff its current value differs
+  // from this baseline; reverting to the baseline drops the entry.
+  // Keyed by install id (not the picker's current selection) so
+  // toggling the picker row doesn't lose state for the install the
+  // user actually edited.
+  const restartBaselines = ref<Map<string, Map<string, unknown>>>(new Map())
+  // Transient error messages for failed `updateInstallation` IPCs.
+  // Same per-install keying as restartBaselines so each install's
+  // surface state is independent.
+  const errorMessages = ref<Map<string, Map<string, string>>>(new Map())
+  // 4-second auto-clear timers for inline error pills, keyed by
+  // `installId:fieldId`. Cleared on re-edit or on watcher teardown.
+  const errorClearTimers = new Map<string, ReturnType<typeof setTimeout>>()
+  // Optimistic-update timeout: roll back if main hasn't responded
+  // within 5s. Settings writes are local IPC + a JSON merge — if
+  // they take this long, something is genuinely wrong.
+  const UPDATE_TIMEOUT_MS = 5000
+  // Inline error pill auto-clear window. Long enough to read, short
+  // enough not to nag.
+  const ERROR_TAG_TTL_MS = 4000
   /** Last install id `loadAll` was called with — drives the
    *  clear-before-await decision so same-install reloads (field edits,
    *  action completions) don't blank the pane, only row switches do. */
@@ -150,6 +204,7 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
     if (isInstallSwitch) {
       sections.value = []
       diskSpace.value = null
+      installSize.value = null
     }
     lastLoadedId = installationId
     loading.value = true
@@ -169,6 +224,18 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
     } finally {
       if (seq === requestSeq) loading.value = false
     }
+    // Install-footprint scan runs after the main load so it can't
+    // block the initial render. Drops in once it lands.
+    void window.api
+      .getInstallationSize(installationId)
+      .then((r) => {
+        if (seq !== requestSeq) return
+        installSize.value = typeof r?.sizeBytes === 'number' ? r.sizeBytes : null
+      })
+      .catch(() => {
+        if (seq !== requestSeq) return
+        installSize.value = null
+      })
   }
 
   async function reload(): Promise<void> {
@@ -176,6 +243,7 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
     if (!inst) {
       sections.value = []
       diskSpace.value = null
+      installSize.value = null
       lastLoadedId = null
       // Bump the sequence so any in-flight loadAll for a previous
       // install can't write into our now-cleared refs.
@@ -223,10 +291,160 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
     }
   }
 
+  /** Field-value equality for the restart-required set. Primitives
+   *  compare by `===`; `envVars` is a flat `Record<string, string>` so
+   *  a key-count + key-by-key walk is enough (no nested objects exist
+   *  in the schema today). Falls back to JSON for any other object
+   *  shape that might appear later. */
+  function restartFieldsEqual(a: unknown, b: unknown): boolean {
+    if (a === b) return true
+    if (a == null || b == null) return false
+    if (typeof a !== 'object' || typeof b !== 'object') return false
+    const ao = a as Record<string, unknown>
+    const bo = b as Record<string, unknown>
+    const aKeys = Object.keys(ao)
+    const bKeys = Object.keys(bo)
+    if (aKeys.length !== bKeys.length) return false
+    for (const k of aKeys) {
+      if (ao[k] !== bo[k]) return false
+    }
+    return true
+  }
+
+  /** Race a promise against a wall-clock deadline. Resolves with the
+   *  promise's value on success; throws an Error tagged with
+   *  `isTimeout = true` on deadline. The losing branch's eventual
+   *  settlement is ignored — callers have already rolled back. */
+  function withTimeout<T>(p: Promise<T>, ms: number): Promise<T> {
+    let timer: ReturnType<typeof setTimeout> | undefined
+    const timeout = new Promise<T>((_, reject) => {
+      timer = setTimeout(() => {
+        const err = new Error('timeout') as Error & { isTimeout?: boolean }
+        err.isTimeout = true
+        reject(err)
+      }, ms)
+    })
+    return Promise.race([p, timeout]).finally(() => {
+      if (timer) clearTimeout(timer)
+    })
+  }
+
+  /** Locate a field by id inside the current sections, mutating
+   *  helpers operate via this. Returns the field reference so callers
+   *  can write `field.value` in place — Vue's deep reactivity picks
+   *  up the nested write because `sections` is a `ref` over an array
+   *  of plain objects. */
+  function findFieldInSections(fieldId: string): DetailField | null {
+    for (const s of sections.value) {
+      const f = s.fields?.find((x) => x.id === fieldId)
+      if (f) return f as DetailField
+    }
+    return null
+  }
+
+  function setRestartDirty(installId: string, fieldId: string, baseline: unknown): void {
+    const next = new Map(restartBaselines.value)
+    const inner = new Map(next.get(installId) ?? new Map())
+    if (!inner.has(fieldId)) inner.set(fieldId, baseline)
+    next.set(installId, inner)
+    restartBaselines.value = next
+  }
+
+  function clearRestartDirty(installId: string, fieldId: string): void {
+    const inner = restartBaselines.value.get(installId)
+    if (!inner || !inner.has(fieldId)) return
+    const next = new Map(restartBaselines.value)
+    const nextInner = new Map(inner)
+    nextInner.delete(fieldId)
+    if (nextInner.size === 0) next.delete(installId)
+    else next.set(installId, nextInner)
+    restartBaselines.value = next
+  }
+
+  function setFieldError(installId: string, fieldId: string, message: string): void {
+    const next = new Map(errorMessages.value)
+    const inner = new Map(next.get(installId) ?? new Map())
+    inner.set(fieldId, message)
+    next.set(installId, inner)
+    errorMessages.value = next
+    const timerKey = `${installId}:${fieldId}`
+    const existing = errorClearTimers.get(timerKey)
+    if (existing) clearTimeout(existing)
+    errorClearTimers.set(
+      timerKey,
+      setTimeout(() => {
+        clearFieldError(installId, fieldId)
+      }, ERROR_TAG_TTL_MS),
+    )
+  }
+
+  function clearFieldError(installId: string, fieldId: string): void {
+    const timerKey = `${installId}:${fieldId}`
+    const existing = errorClearTimers.get(timerKey)
+    if (existing) {
+      clearTimeout(existing)
+      errorClearTimers.delete(timerKey)
+    }
+    const inner = errorMessages.value.get(installId)
+    if (!inner || !inner.has(fieldId)) return
+    const next = new Map(errorMessages.value)
+    const nextInner = new Map(inner)
+    nextInner.delete(fieldId)
+    if (nextInner.size === 0) next.delete(installId)
+    else next.set(installId, nextInner)
+    errorMessages.value = next
+  }
+
   async function updateField(field: DetailField, value: unknown): Promise<void> {
     const inst = toValue(opts.installation)
     if (!inst) return
-    await window.api.updateInstallation(inst.id, { [field.id]: value })
+    const installId = inst.id
+
+    // Capture the value the running process currently has — this is
+    // both the baseline for dirty-tracking and the rollback target.
+    const liveField = findFieldInSections(field.id)
+    const priorValue = liveField ? liveField.value : (field.value as unknown)
+    // Optimistic write — splice the new value into sections in place
+    // so the dropdown / toggle re-renders on the same frame as the
+    // click. `reload()` or `refreshSection()` below reconciles with
+    // any main-side normalization.
+    if (liveField) liveField.value = value as DetailField['value']
+
+    // Re-edit clears any prior error pill for this field — the user
+    // moved on, the stale message would be noise.
+    clearFieldError(installId, field.id)
+
+    try {
+      await withTimeout(
+        window.api.updateInstallation(installId, { [field.id]: value }),
+        UPDATE_TIMEOUT_MS,
+      )
+    } catch (err: unknown) {
+      // Roll back the optimistic write.
+      const live = findFieldInSections(field.id)
+      if (live) live.value = priorValue as DetailField['value']
+      // Failed writes never engage the restart-required state — main
+      // didn't accept the value, so there's nothing to apply.
+      clearRestartDirty(installId, field.id)
+      const isTimeout = (err as { isTimeout?: boolean })?.isTimeout === true
+      const message = isTimeout
+        ? t('comfyUISettings.updateFieldTimeout', "Couldn't reach app — try again")
+        : err instanceof Error
+          ? err.message
+          : String(err)
+      setFieldError(installId, field.id, message)
+      return
+    }
+    // Restart-required dirty tracking — only after the IPC succeeded.
+    // Reverting to the running baseline drops the entry.
+    if (field.requiresRestart && sessionStore.isRunning(installId)) {
+      const baseline = restartBaselines.value.get(installId)?.get(field.id) ?? priorValue
+      if (restartFieldsEqual(value, baseline)) {
+        clearRestartDirty(installId, field.id)
+      } else {
+        setRestartDirty(installId, field.id, baseline)
+      }
+    }
     emitTelemetryAction('desktop2.settings.changed', {
       setting_key: field.id,
       value_kind: field.editType || 'text',
@@ -241,7 +459,7 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
       try {
         await window.api.runAction(inst.id, field.onChangeAction)
       } catch (err: unknown) {
-        await modal.alert({
+        await dialogs.alert({
           title: t('common.error', 'Error'),
           message: err instanceof Error ? err.message : String(err),
         })
@@ -315,14 +533,14 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
         try {
           items = await window.api.getFieldOptions(fs.sourceId, fs.fieldId, selections)
         } catch (err: unknown) {
-          await modal.alert({
+          await dialogs.alert({
             title: mutableAction.label,
             message: (err as Error).message || String(err),
           })
           return
         }
         if (!items || items.length === 0) {
-          await modal.alert({
+          await dialogs.alert({
             title: mutableAction.label,
             message: fs.emptyMessage || t('common.noItems'),
           })
@@ -333,7 +551,7 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
           label: (item.recommended ? '★ ' : '') + item.label,
           description: item.description,
         }))
-        const selected = await modal.select({
+        const selected = await dialogs.actionSheet({
           title: fs.title || mutableAction.label,
           message: fs.message || '',
           items: selectItems,
@@ -365,13 +583,13 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
         items = all.map((i) => ({ value: i.id, label: i.name, description: i.sourceLabel }))
       }
       if (!items || items.length === 0) {
-        await modal.alert({
+        await dialogs.alert({
           title: mutableAction.label,
           message: mutableAction.select.emptyMessage || t('common.noItems'),
         })
         return
       }
-      const selected = await modal.select({
+      const selected = await dialogs.actionSheet({
         title: mutableAction.select.title || mutableAction.label,
         message: mutableAction.select.message || '',
         items,
@@ -384,9 +602,11 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
     }
 
     // 6. prompt chain — free-form text input (e.g. Copy Installation
-    //    new-name prompt).
+    //    new-name prompt). Routes through `useDialogs.prompt` →
+    //    `BasePrompt` (BaseModal shell) rather than the legacy
+    //    `useModal.prompt` renderer.
     if (mutableAction.prompt) {
-      const value = await modal.prompt({
+      const value = await dialogs.prompt({
         title: mutableAction.prompt.title || mutableAction.label,
         message: mutableAction.prompt.message || '',
         placeholder: mutableAction.prompt.placeholder,
@@ -517,6 +737,13 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
     // 10. Inline invoke + result navigation. Self-stop wrap mirrors the
     //     showProgress path so inline REQUIRES_STOPPED actions don't
     //     race the backend's running-check on a running install.
+    runningActionIds.value = new Set(runningActionIds.value).add(mutableAction.id)
+    // Track when the spinner went up so we can floor its lifetime in
+    // the finally. Sub-frame backend responses (rate-limit cache hits,
+    // already-up-to-date short-circuits, dev-mode no-ops) would
+    // otherwise hide the spinner inside one frame and the click would
+    // read as a no-op. See `MIN_BUSY_FEEDBACK_MS` in `lib/uiTiming.ts`.
+    const busyStartedAt = Date.now()
     try {
       emitTelemetryAction('desktop2.action.invoked', telemetryContext)
       if (wasRunning && requiresStoppedGuard) {
@@ -538,7 +765,7 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
       } else if (result.navigate === 'detail') {
         await reload()
       } else if (result.message) {
-        await modal.alert({ title: mutableAction.label, message: result.message })
+        await dialogs.alert({ title: mutableAction.label, message: result.message })
       } else {
         await reload()
       }
@@ -548,14 +775,19 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
         error_bucket: toErrorBucket(err),
         ...telemetryContext,
       })
-      await modal.alert({
+      await dialogs.alert({
         title: mutableAction.label,
         message: err instanceof Error ? err.message : String(err),
       })
+    } finally {
+      await sleepRemainder(busyStartedAt)
+      const next = new Set(runningActionIds.value)
+      next.delete(mutableAction.id)
+      runningActionIds.value = next
     }
   }
 
-  function sectionsForTab(tab: 'settings' | 'status' | 'update' | 'snapshots'): ComputedRef<DetailSection[]> {
+  function sectionsForTab(tab: SectionTab): ComputedRef<DetailSection[]> {
     // `pinBottom` sections live in the drawer footer, not the tab body —
     // mirror DetailModal.vue's split (`mainSections` vs `bottomSection`).
     return computed(() => sections.value.filter((s) => s.tab === tab && !s.pinBottom))
@@ -570,38 +802,53 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
   // (`launch`); `runAction` picks the synthetic `'restart'` id up and
   // routes through stopComfyUI → wait → launch.
   const pinBottomActions = computed<ActionDef[]>(() => {
-    const acts = pinBottomSection.value?.actions ?? []
+    const acts = (pinBottomSection.value?.actions ?? []).filter(
+      (a) => a.id !== 'launch' && a.id !== 'restart',
+    )
     const inst = toValue(opts.installation)
     if (!inst) return acts
-    if (!sessionStore.isRunning(inst.id)) return acts
-    return acts.map((a) => {
-      if (a.id !== 'launch') return a
-      return {
-        ...a,
-        id: 'restart',
-        label: t('actions.restart'),
-        style: 'accent',
-        progressTitle: t('actions.restartProgressTitle'),
-        confirm: {
-          title: t('actions.restartConfirmTitle'),
-          message: t('actions.restartConfirmMessage'),
-          confirmLabel: t('actions.restartConfirm'),
-        },
-      }
-    })
+    return acts
   })
 
-  const diskUsageItem = computed<DetailItem | null>(() => {
-    const ds = diskSpace.value
-    if (!ds) return null
-    // `get-disk-space` returns total + free for the volume — used =
-    // total − free. Same arithmetic the legacy DetailModal uses.
-    const used = Math.max(0, ds.total - ds.free)
+  const diskUsageItem = computed<{ label: string; value: string } | null>(() => {
+    // Prefer the install's own footprint (`getInstallationSize` walks
+    // the install directory). The whole-volume `total - free` calc the
+    // old version used was the disk's used space, not the install's,
+    // which made the row read as "free space" semantics on a near-full
+    // drive.
+    if (installSize.value !== null) {
+      return {
+        label: t('comfyUISettings.diskUsage', 'Disk Usage'),
+        value: formatBytes(installSize.value),
+      }
+    }
+    // While the directory scan is still in flight, fall back to a
+    // "—" placeholder so the row is present (otherwise it pops in
+    // mid-render). `diskSpace` being null also gets us here.
+    if (!diskSpace.value) return null
     return {
-      label: `${t('comfyUISettings.diskUsage', 'Disk Usage')}: ${formatBytes(used)}`,
+      label: t('comfyUISettings.diskUsage', 'Disk Usage'),
+      value: '—',
     }
   })
 
+  // Pending restart fields surfaced to the host — derived from the
+  // per-install baseline map for the currently-selected install. State
+  // for OTHER installs stays in the map untouched, so toggling the
+  // picker row never wipes the user's work-in-progress.
+  const pendingRestartFieldIds = computed<Set<string>>(() => {
+    const inst = toValue(opts.installation)
+    if (!inst) return new Set()
+    const inner = restartBaselines.value.get(inst.id)
+    return inner ? new Set(inner.keys()) : new Set()
+  })
+
+  const fieldErrorMessages = computed<Map<string, string>>(() => {
+    const inst = toValue(opts.installation)
+    if (!inst) return new Map()
+    return errorMessages.value.get(inst.id) ?? new Map()
+  })
+
   watch(
     () => toValue(opts.installation)?.id ?? null,
     () => {
@@ -610,6 +857,32 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
     { immediate: true },
   )
 
+  // Drop the per-install dirty + error entries the moment that install
+  // stops — a stopped install picks up new values on next launch, so
+  // there is nothing left to apply or surface.
+  watch(
+    () => {
+      const inst = toValue(opts.installation)
+      return inst ? sessionStore.isRunning(inst.id) : false
+    },
+    (running, wasRunning) => {
+      const inst = toValue(opts.installation)
+      if (!inst) return
+      if (wasRunning && !running) {
+        if (restartBaselines.value.has(inst.id)) {
+          const next = new Map(restartBaselines.value)
+          next.delete(inst.id)
+          restartBaselines.value = next
+        }
+        if (errorMessages.value.has(inst.id)) {
+          const next = new Map(errorMessages.value)
+          next.delete(inst.id)
+          errorMessages.value = next
+        }
+      }
+    },
+  )
+
   return {
     sections,
     diskSpace,
@@ -618,7 +891,10 @@ export function useComfyUISettings(opts: UseComfyUISettingsOpts): UseComfyUISett
     reload,
     refreshSection,
     updateField,
+    pendingRestartFieldIds,
+    fieldErrorMessages,
     runAction,
+    runningActionIds,
     sectionsForTab,
     diskUsageItem,
     pinBottomSection,
diff --git a/src/renderer/src/composables/useDeepLinkRouter.ts b/src/renderer/src/composables/useDeepLinkRouter.ts
index ff3133fa..47dc478d 100644
--- a/src/renderer/src/composables/useDeepLinkRouter.ts
+++ b/src/renderer/src/composables/useDeepLinkRouter.ts
@@ -69,12 +69,11 @@ export function useDeepLinkRouter(opts: DeepLinkRouterOpts): void {
           await opts.bootstrapReady
           const inst = installationStore.getById(id)
           if (!inst) return
-          // `comfy://install-update/<id>` opens the picker directly
-          // in expanded mode on the Update tab — same surface the
-          // chooser-card kebab Update entry routes to.
+          // `comfy://install-update/<id>` opens the picker on the
+          // Update tab — same surface the chooser-card kebab Update
+          // entry routes to.
           window.api.openInstancePicker({
             installationId: inst.id,
-            mode: 'expanded',
             initialTab: 'update',
           })
           return
@@ -91,14 +90,12 @@ export function useDeepLinkRouter(opts: DeepLinkRouterOpts): void {
             return
           }
           // Per-install deep links (`comfy://open-settings?tab=comfy`)
-          // open the picker in expanded mode on the Config tab. If we
-          // don't have an install context (chooser host, no active
-          // install), fall back to compact so the user picks an install
-          // first.
+          // open the picker on the Config tab. If we don't have an
+          // install context (chooser host, no active install), open
+          // without a tab so the user picks an install first.
           if (inst) {
             window.api.openInstancePicker({
               installationId: inst.id,
-              mode: 'expanded',
               initialTab: 'config',
             })
           } else {
diff --git a/src/renderer/src/composables/useDialogs.test.ts b/src/renderer/src/composables/useDialogs.test.ts
new file mode 100644
index 00000000..a2de2159
--- /dev/null
+++ b/src/renderer/src/composables/useDialogs.test.ts
@@ -0,0 +1,103 @@
+import { describe, expect, it, beforeEach } from 'vitest'
+import { useDialogs } from './useDialogs'
+
+/**
+ * Regression coverage for the cancel-value contract. The `cancel()`
+ * helper resolves the in-flight promise with a falsy value sized to
+ * the dialog kind:
+ *
+ *   - prompt / actionSheet → `null`
+ *   - alert → `undefined`
+ *   - confirm → `false`
+ *
+ * A regression here surfaces as "click Cancel → action fires anyway"
+ * because callers that check `=== null` fall through when the cancel
+ * value is `false` (or vice versa). The Save Snapshot flow hit this
+ * exact bug on a real user click — the prompt's cancel resolved
+ * `false`, `if (label === null)` was falsy, and `runAction` fired.
+ */
+
+describe('useDialogs cancel contract', () => {
+  beforeEach(() => {
+    // The composable backs onto a module-level singleton; the
+    // cancel call in each `it` settles whatever in-flight promise
+    // the previous test left dangling, but the helper makes a
+    // fresh open() resolve cleanly regardless.
+    const { cancel } = useDialogs()
+    cancel()
+  })
+
+  it('resolves a prompt with `null` when cancelled', async () => {
+    const { prompt, cancel } = useDialogs()
+    const pending = prompt({ title: 'T', message: 'M' })
+    cancel()
+    await expect(pending).resolves.toBeNull()
+  })
+
+  it('resolves an actionSheet with `null` when cancelled', async () => {
+    const { actionSheet, cancel } = useDialogs()
+    const pending = actionSheet({
+      title: 'T',
+      items: [{ value: 'a', label: 'A' }]
+    })
+    cancel()
+    await expect(pending).resolves.toBeNull()
+  })
+
+  it('resolves an alert with `undefined` when cancelled (ESC/backdrop)', async () => {
+    const { alert, cancel } = useDialogs()
+    const pending = alert({ title: 'T', message: 'M' })
+    cancel()
+    await expect(pending).resolves.toBeUndefined()
+  })
+
+  it('resolves a confirm with `false` when cancelled', async () => {
+    const { confirm, cancel } = useDialogs()
+    const pending = confirm({ title: 'T', message: 'M' })
+    cancel()
+    await expect(pending).resolves.toBe(false)
+  })
+
+  it('opening a new dialog while one is in-flight resolves the previous with its kind-appropriate cancel value', async () => {
+    const { prompt, confirm } = useDialogs()
+    const previous = prompt({ title: 'Prev', message: 'M' })
+    // Opening confirm should cancel the in-flight prompt — and that
+    // prompt should resolve `null` (its cancel shape), not `false`
+    // (confirm's). Without the per-kind helper this is the exact
+    // path that produced the Save Snapshot regression.
+    confirm({ title: 'New', message: 'M' })
+    await expect(previous).resolves.toBeNull()
+  })
+
+  it('confirm primary resolves with `\'primary\'`', async () => {
+    const { confirm, confirmPrimary } = useDialogs()
+    const pending = confirm({ title: 'T', message: 'M' })
+    confirmPrimary()
+    await expect(pending).resolves.toBe('primary')
+  })
+
+  it('confirm secondary resolves with `\'secondary\'`', async () => {
+    const { confirm, confirmSecondary } = useDialogs()
+    const pending = confirm({
+      title: 'T',
+      message: 'M',
+      secondaryLabel: 'Close & Launch'
+    })
+    confirmSecondary()
+    await expect(pending).resolves.toBe('secondary')
+  })
+
+  it('prompt submit resolves with the submitted value (not null)', async () => {
+    const { prompt, submitPrompt } = useDialogs()
+    const pending = prompt({ title: 'T', message: 'M' })
+    submitPrompt('  edited  ')
+    await expect(pending).resolves.toBe('  edited  ')
+  })
+
+  it('alert acknowledge resolves `undefined`', async () => {
+    const { alert, acknowledgeAlert } = useDialogs()
+    const pending = alert({ title: 'T', message: 'M' })
+    acknowledgeAlert()
+    await expect(pending).resolves.toBeUndefined()
+  })
+})
diff --git a/src/renderer/src/composables/useDialogs.ts b/src/renderer/src/composables/useDialogs.ts
new file mode 100644
index 00000000..f733ab55
--- /dev/null
+++ b/src/renderer/src/composables/useDialogs.ts
@@ -0,0 +1,323 @@
+import { reactive, readonly } from 'vue'
+import type { ModalDetailGroup } from '../types/ipc'
+import type { ActionSheetItem } from '../components/ui/BaseActionSheet.vue'
+
+/**
+ * Promise-based driver for the BaseModal-shell primitives
+ * (`BasePrompt`, `BaseActionSheet`, `BaseAlert`). Mirrors the shape
+ * of `useModal()` so action chains can `await dialogs.prompt({...})` /
+ * `await dialogs.confirm({...})` / `await dialogs.alert({...})` /
+ * `await dialogs.actionSheet({...})` without juggling local refs.
+ *
+ * Rendered by the singleton `DialogHost.vue`, mounted next to
+ * `<ModalDialog />` in `PanelApp.vue` + `TitlePopupApp.vue`.
+ *
+ * `confirm` resolves to a string union — `'primary' | 'secondary' |
+ * false` — so a single resolved value covers all three outcomes
+ * (primary, optional secondary, cancel/ESC/backdrop). Cleaner than
+ * juggling a boolean plus an extra callback when the dialog has two
+ * non-cancel actions (e.g. "Launch" + "Close & Launch").
+ *
+ * Why parallel to `useModal()` rather than replacing it: the legacy
+ * `ModalDialog.vue` host still owns `confirmWithOptions` and rich
+ * confirms with `snapshotPreview` / `variantCards` / `updateConfirm`
+ * mutation (migrate flow). Those keep working unchanged on `useModal`
+ * until they get their own primitives. `useModal` is kept as
+ * reference, untouched.
+ */
+
+export interface PromptOpts {
+  title: string
+  message?: string
+  placeholder?: string
+  defaultValue?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  inputLabel?: string
+  required?: boolean | string
+  messageDetails?: ModalDetailGroup[]
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+}
+
+export interface ActionSheetOpts {
+  title: string
+  message?: string
+  items: ActionSheetItem[]
+  cancelLabel?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+}
+
+export interface AlertOpts {
+  title: string
+  message?: string
+  buttonLabel?: string
+  /** Tone for the single OK button. Default `'primary'`. */
+  tone?: 'primary' | 'danger'
+  /** Recessed sub-blocks rendered below the message. */
+  messageDetails?: ModalDetailGroup[]
+}
+
+export interface ConfirmOpts {
+  title: string
+  message?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  /** Tone for the primary action. Default `'primary'`. */
+  tone?: 'primary' | 'danger'
+  /** Optional secondary action sitting between Cancel and Primary.
+   *  When `secondaryLabel` is set, the footer renders the secondary
+   *  button. Pair with `showCloseIcon: true` when you want the
+   *  secondary to replace Cancel in the footer (header ✕ carries
+   *  the dismiss affordance instead). */
+  secondaryLabel?: string
+  secondaryTone?: 'primary' | 'danger' | 'default'
+  /** Render Cancel in the footer. Default `true`. Set `false` when
+   *  the footer holds two non-cancel actions and `showCloseIcon`
+   *  carries the dismiss affordance. */
+  showCancel?: boolean
+  /** Render the header ✕ icon as the dismiss affordance. Use when
+   *  the footer is full of action buttons. Mutually exclusive with
+   *  `showCancel`. Default `false`. */
+  showCloseIcon?: boolean
+  /** Recessed sub-blocks (release notes, change summaries). Gives
+   *  rich confirms (e.g. Restore Snapshot) parity with the legacy
+   *  `useModal.confirm` `messageDetails` field. */
+  messageDetails?: ModalDetailGroup[]
+}
+
+export type ConfirmResult = 'primary' | 'secondary' | false
+
+export type DialogKind = 'prompt' | 'actionSheet' | 'alert' | 'confirm' | 'none'
+
+export interface PromptState {
+  title: string
+  message: string
+  placeholder: string
+  defaultValue: string
+  confirmLabel?: string
+  cancelLabel?: string
+  inputLabel?: string
+  required: boolean | string
+  messageDetails: ModalDetailGroup[]
+  size: 'sm' | 'md' | 'lg' | 'xl'
+}
+
+export interface ActionSheetState {
+  title: string
+  message: string
+  items: ActionSheetItem[]
+  cancelLabel?: string
+  size: 'sm' | 'md' | 'lg' | 'xl'
+}
+
+export interface AlertState {
+  title: string
+  message: string
+  buttonLabel?: string
+  tone: 'primary' | 'danger'
+  messageDetails: ModalDetailGroup[]
+}
+
+export interface ConfirmState {
+  title: string
+  message: string
+  confirmLabel?: string
+  cancelLabel?: string
+  tone: 'primary' | 'danger'
+  secondaryLabel?: string
+  secondaryTone: 'primary' | 'danger' | 'default'
+  showCancel: boolean
+  showCloseIcon: boolean
+  messageDetails: ModalDetailGroup[]
+}
+
+export interface DialogState {
+  kind: DialogKind
+  open: boolean
+  prompt: PromptState
+  actionSheet: ActionSheetState
+  alert: AlertState
+  confirm: ConfirmState
+  resolve: ((value: unknown) => void) | null
+}
+
+const state = reactive<DialogState>({
+  kind: 'none',
+  open: false,
+  prompt: {
+    title: '',
+    message: '',
+    placeholder: '',
+    defaultValue: '',
+    confirmLabel: undefined,
+    cancelLabel: undefined,
+    inputLabel: undefined,
+    required: false,
+    messageDetails: [],
+    size: 'sm'
+  },
+  actionSheet: {
+    title: '',
+    message: '',
+    items: [],
+    cancelLabel: undefined,
+    size: 'sm'
+  },
+  alert: {
+    title: '',
+    message: '',
+    buttonLabel: undefined,
+    tone: 'primary',
+    messageDetails: []
+  },
+  confirm: {
+    title: '',
+    message: '',
+    confirmLabel: undefined,
+    cancelLabel: undefined,
+    tone: 'primary',
+    secondaryLabel: undefined,
+    secondaryTone: 'default',
+    showCancel: true,
+    showCloseIcon: false,
+    messageDetails: []
+  },
+  resolve: null
+})
+
+function cloneDetails(d?: ModalDetailGroup[]): ModalDetailGroup[] {
+  return (d ?? []).map((g) => ({ ...g, items: [...g.items] }))
+}
+
+function settle(value: unknown): void {
+  const resolve = state.resolve
+  state.open = false
+  state.kind = 'none'
+  state.resolve = null
+  if (resolve) resolve(value)
+}
+
+/** Cancel value per dialog kind. The four `dialogs.*` methods promise
+ *  different shapes (`Promise<string | null>` for prompt/actionSheet,
+ *  `Promise<void>` for alert, `Promise<ConfirmResult>` for confirm).
+ *  A single shared `cancel()` that always resolved `false` would lie
+ *  about prompt/actionSheet's return type and cause callers checking
+ *  `=== null` to fall through. Resolve the right falsy value for the
+ *  current kind. */
+function cancelValueForKind(kind: DialogKind): unknown {
+  switch (kind) {
+    case 'prompt':
+    case 'actionSheet':
+      return null
+    case 'alert':
+      return undefined
+    case 'confirm':
+      return false satisfies ConfirmResult
+    default:
+      return null
+  }
+}
+
+export function useDialogs() {
+  function prompt(opts: PromptOpts): Promise<string | null> {
+    return new Promise((resolve) => {
+      if (state.resolve) state.resolve(cancelValueForKind(state.kind))
+      state.prompt = {
+        title: opts.title,
+        message: opts.message ?? '',
+        placeholder: opts.placeholder ?? '',
+        defaultValue: opts.defaultValue ?? '',
+        confirmLabel: opts.confirmLabel,
+        cancelLabel: opts.cancelLabel,
+        inputLabel: opts.inputLabel,
+        required: opts.required ?? false,
+        messageDetails: cloneDetails(opts.messageDetails),
+        size: opts.size ?? 'sm'
+      }
+      state.kind = 'prompt'
+      state.open = true
+      state.resolve = resolve as (value: unknown) => void
+    })
+  }
+
+  function actionSheet(opts: ActionSheetOpts): Promise<string | null> {
+    return new Promise((resolve) => {
+      if (state.resolve) state.resolve(cancelValueForKind(state.kind))
+      state.actionSheet = {
+        title: opts.title,
+        message: opts.message ?? '',
+        items: opts.items.map((i) => ({ ...i })),
+        cancelLabel: opts.cancelLabel,
+        size: opts.size ?? 'sm'
+      }
+      state.kind = 'actionSheet'
+      state.open = true
+      state.resolve = resolve as (value: unknown) => void
+    })
+  }
+
+  function alert(opts: AlertOpts): Promise<void> {
+    return new Promise((resolve) => {
+      if (state.resolve) state.resolve(cancelValueForKind(state.kind))
+      state.alert = {
+        title: opts.title,
+        message: opts.message ?? '',
+        buttonLabel: opts.buttonLabel,
+        tone: opts.tone ?? 'primary',
+        messageDetails: cloneDetails(opts.messageDetails)
+      }
+      state.kind = 'alert'
+      state.open = true
+      state.resolve = (() => resolve()) as (value: unknown) => void
+    })
+  }
+
+  function confirm(opts: ConfirmOpts): Promise<ConfirmResult> {
+    return new Promise((resolve) => {
+      if (state.resolve) state.resolve(cancelValueForKind(state.kind))
+      const hasSecondary = !!opts.secondaryLabel
+      // Default: show Cancel unless caller explicitly hides it. When
+      // caller hides Cancel and wants a dismiss path, they pass
+      // showCloseIcon: true. We don't auto-flip these — leaving it
+      // explicit catches mis-wired call sites in code review.
+      state.confirm = {
+        title: opts.title,
+        message: opts.message ?? '',
+        confirmLabel: opts.confirmLabel,
+        cancelLabel: opts.cancelLabel,
+        tone: opts.tone ?? 'primary',
+        secondaryLabel: opts.secondaryLabel,
+        secondaryTone: opts.secondaryTone ?? 'default',
+        showCancel: opts.showCancel ?? !hasSecondary,
+        showCloseIcon: opts.showCloseIcon ?? hasSecondary,
+        messageDetails: cloneDetails(opts.messageDetails)
+      }
+      state.kind = 'confirm'
+      state.open = true
+      state.resolve = resolve as (value: unknown) => void
+    })
+  }
+
+  return {
+    state: readonly(state) as DialogState,
+    prompt,
+    actionSheet,
+    alert,
+    confirm,
+    /** Host calls this when the user submits a prompt value. */
+    submitPrompt: (value: string) => settle(value),
+    /** Host calls this when the user picks an action-sheet item. */
+    selectActionSheet: (value: string) => settle(value),
+    /** Host calls this when the alert OK button fires (resolves void). */
+    acknowledgeAlert: () => settle(undefined),
+    /** Host calls this when the confirm primary action fires. */
+    confirmPrimary: () => settle('primary' satisfies ConfirmResult),
+    /** Host calls this when the confirm secondary action fires. */
+    confirmSecondary: () => settle('secondary' satisfies ConfirmResult),
+    /** Host calls this on cancel / ESC / backdrop / close icon.
+     *  Resolves the in-flight promise with the kind-appropriate
+     *  falsy value (`null` for prompt/actionSheet, `undefined` for
+     *  alert, `false` for confirm). */
+    cancel: () => settle(cancelValueForKind(state.kind))
+  }
+}
diff --git a/src/renderer/src/composables/useGlobalSettings.ts b/src/renderer/src/composables/useGlobalSettings.ts
index 88757da7..224d38be 100644
--- a/src/renderer/src/composables/useGlobalSettings.ts
+++ b/src/renderer/src/composables/useGlobalSettings.ts
@@ -1,34 +1,18 @@
-import { computed, onMounted, onUnmounted, ref, toValue, watch, type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, type ComputedRef, type Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useModal } from './useModal'
-import { useComfyUISettings } from './useComfyUISettings'
 import type {
-  ActionDef,
   AppUpdateDownloadProgress,
   AppUpdateState,
   DetailField,
-  DetailSection,
-  Installation,
   SettingsField,
   SettingsSection,
-  ShowProgressOpts,
 } from '../types/ipc'
 
 /**
- * Backing state + IPC plumbing for the brand-redesigned Global Settings
- * panel (`GlobalSettingsPanel.vue`). Extracted into a composable so the
- * component stays UI-only — same convention as `useComfyUISettings`.
- *
- * Mix of three concerns:
- *  - Truly-global settings (Language / Theme / Cache / Advanced / Shared
- *    Directories) sourced from `getSettingsSections()` + `getMediaSections()`
- *    and written via `setSetting(key, value)`.
- *  - Truly-global Models Directory list — `getModelsSections()` +
- *    `setSetting('modelsDirs', [...])`.
- *  - Launcher updater state (Installed/Latest/Status) + install-scoped
- *    Update Channel + Copy & Update actions, the latter two delegated to
- *    `useComfyUISettings` so the existing 9-stage `runAction` dispatcher
- *    (confirm chains, disk checks, progress) is reused as-is.
+ * Backing state + IPC plumbing for a future Global Settings panel host.
+ * The title-bar popup uses snapshot props instead; this composable mirrors
+ * the same desktop-only bucket shape for reuse.
  */
 
 const LAST_CHECKED_KEY = 'globalSettings.lastCheckedAt'
@@ -39,7 +23,7 @@ const SETTINGS_TYPE_TO_DETAIL_EDIT_TYPE: Record<SettingsField['type'], DetailFie
   path: 'path',
   select: 'select',
   boolean: 'boolean',
-  pathList: undefined, // unused in global settings (only Models, handled bespoke)
+  pathList: undefined,
 }
 
 function toDetailField(f: SettingsField): DetailField {
@@ -58,29 +42,17 @@ function toDetailField(f: SettingsField): DetailField {
 }
 
 export interface UseGlobalSettingsOpts {
-  /** The host window's active installation, if any. Drives install-
-   *  scoped controls (Update Channel + Copy & Update). Install-less
-   *  hosts pass `null` — those controls stay hidden. */
-  installation: MaybeRefOrGetter<Installation | null>
-  /** Fires when an install-scoped action requests a ProgressModal —
-   *  forwarded to PanelApp's overlay slot. */
-  onShowProgress: (opts: ShowProgressOpts) => void
-  /** Fires when an install-scoped action's `result.navigate === 'list'`
-   *  (delete / untrack). The host should tear the comfy window down. */
-  onNavigateList?: () => void
-  /** Fires alongside `onNavigateList` so the panel can animate dismissal
-   *  before the host completes navigation. */
   onClose?: () => void
 }
 
 export interface UseGlobalSettingsApi {
-  // --- truly-global, field-shaped (rendered via SettingsSectionList) ---
-  overviewFields: ComputedRef<DetailField[]>
+  generalFields: ComputedRef<DetailField[]>
+  telemetryFields: ComputedRef<DetailField[]>
+  desktopUpdateFields: ComputedRef<DetailField[]>
   cacheFields: ComputedRef<DetailField[]>
   advancedFields: ComputedRef<DetailField[]>
   sharedDirectoriesFields: ComputedRef<DetailField[]>
 
-  // --- truly-global, Models accordion (bespoke pathList renderer) ---
   modelsDirs: Ref<string[]>
   modelsSystemDefault: Ref<string>
   addModelsDir: () => Promise<void>
@@ -89,7 +61,6 @@ export interface UseGlobalSettingsApi {
   removeModelsDir: (index: number) => Promise<void>
   makeModelsDirPrimary: (index: number) => Promise<void>
 
-  // --- Updates section: launcher state ---
   updateState: Ref<AppUpdateState>
   updateProgress: Ref<AppUpdateDownloadProgress | null>
   isDownloading: ComputedRef<boolean>
@@ -101,34 +72,16 @@ export interface UseGlobalSettingsApi {
   handleUpdateNow: () => Promise<void>
   handleCheckForUpdate: () => Promise<void>
 
-  // --- Updates section: install-scoped (Update Channel + Copy & Update) ---
-  /** The `channel-cards` field from the active install's Update tab.
-   *  Null when the host has no install OR the source emits no
-   *  channel-picker payload (e.g. cloud installs). */
-  channelPickerField: ComputedRef<DetailField | null>
-  /** Dispatch an action coming off `ChannelPicker`'s `@action` emit
-   *  (`update`, `copy-update`, `switch-channel`). Routes through
-   *  `useComfyUISettings.runAction` so all confirm/disk/progress logic
-   *  is reused. */
-  runInstallAction: (action: ActionDef) => Promise<void>
-
-  // --- top-level state ---
   loading: Ref<boolean>
   error: Ref<string | null>
-
-  /** Truly-global setting mutation (Language / Theme / Cache etc.). */
   updateField: (field: DetailField, value: unknown) => Promise<void>
-
-  /** Refetch all data sources (settings + media + models + install
-   *  detail sections). Subscribed to `settings-changed` broadcast. */
   reload: () => Promise<void>
 }
 
-export function useGlobalSettings(opts: UseGlobalSettingsOpts): UseGlobalSettingsApi {
+export function useGlobalSettings(_opts: UseGlobalSettingsOpts = {}): UseGlobalSettingsApi {
   const { t } = useI18n()
   const modal = useModal()
 
-  // ---- global sections (settings + media + models) ----
   const settingsSections = ref<SettingsSection[]>([])
   const mediaSections = ref<SettingsSection[]>([])
   const modelsDirs = ref<string[]>([])
@@ -156,10 +109,6 @@ export function useGlobalSettings(opts: UseGlobalSettingsOpts): UseGlobalSetting
     }
   }
 
-  // Section mapping by title — main owns ordering; we look up by the
-  // localised title since main interleaves source-supplied sections
-  // mid-list. Falls back to the legacy positional order if a title
-  // lookup misses so we degrade gracefully on locale-key changes.
   function sectionByTitle(titleKey: string, fallbackIndex: number): SettingsSection | undefined {
     const localised = t(titleKey)
     const found = settingsSections.value.find((s) => s.title === localised)
@@ -167,12 +116,20 @@ export function useGlobalSettings(opts: UseGlobalSettingsOpts): UseGlobalSetting
     return settingsSections.value[fallbackIndex]
   }
 
-  const overviewFields = computed<DetailField[]>(() => {
-    const general = sectionByTitle('settings.general', 0)?.fields ?? []
-    const telemetry = sectionByTitle('settings.telemetry', 1)?.fields ?? []
-    return [...general, ...telemetry].map(toDetailField)
+  const generalFields = computed<DetailField[]>(() => {
+    const fields = sectionByTitle('settings.general', 0)?.fields ?? []
+    return fields.filter((f) => f.id !== 'autoInstallUpdates').map(toDetailField)
+  })
+
+  const desktopUpdateFields = computed<DetailField[]>(() => {
+    const fields = sectionByTitle('settings.general', 0)?.fields ?? []
+    return fields.filter((f) => f.id === 'autoInstallUpdates').map(toDetailField)
   })
 
+  const telemetryFields = computed<DetailField[]>(() =>
+    (sectionByTitle('settings.telemetry', 1)?.fields ?? []).map(toDetailField),
+  )
+
   const cacheFields = computed<DetailField[]>(() =>
     (sectionByTitle('settings.cache', 2)?.fields ?? []).map(toDetailField),
   )
@@ -187,32 +144,29 @@ export function useGlobalSettings(opts: UseGlobalSettingsOpts): UseGlobalSetting
 
   async function updateField(field: DetailField, value: unknown): Promise<void> {
     await window.api.setSetting(field.id, value)
-    // Main broadcasts `settings-changed` after every write, so the
-    // subscription below will trigger a reload automatically. We don't
-    // await reload() here — let the broadcast drive it.
   }
 
-  // ---- Models handlers (lifted 1:1 from DirectoriesView.vue) ----
   async function persistModelsDirs(): Promise<void> {
     await window.api.setSetting('modelsDirs', [...modelsDirs.value])
   }
 
   async function addModelsDir(): Promise<void> {
-    const dir = await window.api.browseFolder()
-    if (!dir) return
-    modelsDirs.value.push(dir)
+    const picked = await window.api.browseFolder()
+    if (!picked) return
+    modelsDirs.value.push(picked)
     await persistModelsDirs()
   }
 
   async function browseModelsDir(index: number): Promise<void> {
-    const dir = await window.api.browseFolder(modelsDirs.value[index])
-    if (!dir) return
-    modelsDirs.value[index] = dir
+    const current = modelsDirs.value[index]
+    const picked = await window.api.browseFolder(current)
+    if (!picked) return
+    modelsDirs.value[index] = picked
     await persistModelsDirs()
   }
 
   function openModelsDir(path: string): void {
-    window.api.openPath(path)
+    void window.api.openPath(path)
   }
 
   async function removeModelsDir(index: number): Promise<void> {
@@ -221,39 +175,25 @@ export function useGlobalSettings(opts: UseGlobalSettingsOpts): UseGlobalSetting
   }
 
   async function makeModelsDirPrimary(index: number): Promise<void> {
-    const path = modelsDirs.value[index]
-    if (!path) return
-    modelsDirs.value.splice(index, 1)
-    modelsDirs.value.unshift(path)
+    const moved = modelsDirs.value.splice(index, 1)[0]
+    if (typeof moved !== 'string') return
+    modelsDirs.value.unshift(moved)
     await persistModelsDirs()
   }
 
-  // ---- Launcher updater state ----
   const updateState = ref<AppUpdateState>({ kind: null, version: null, autoUpdate: true })
   const updateProgress = ref<AppUpdateDownloadProgress | null>(null)
-  const checking = ref(false)
   const downloadStarting = ref(false)
-  const installedVersion = ref<string>('')
+  const checking = ref(false)
+  const lastCheckedAt = ref<number | null>(null)
+  const installedVersion = ref('')
   const systemManaged = ref(false)
-  const lastCheckedAt = ref<number | null>(loadLastCheckedAt())
-
-  function loadLastCheckedAt(): number | null {
-    try {
-      const raw = window.localStorage.getItem(LAST_CHECKED_KEY)
-      if (!raw) return null
-      const n = Number(raw)
-      return Number.isFinite(n) ? n : null
-    } catch {
-      return null
-    }
-  }
 
   function persistLastCheckedAt(value: number): void {
     try {
       window.localStorage.setItem(LAST_CHECKED_KEY, String(value))
     } catch {
-      // localStorage unavailable — silently drop, the timestamp is a
-      // nice-to-have, not load-bearing.
+      /* noop */
     }
   }
 
@@ -261,11 +201,6 @@ export function useGlobalSettings(opts: UseGlobalSettingsOpts): UseGlobalSetting
     () => downloadStarting.value || updateState.value.kind === 'downloading',
   )
 
-  // `process` doesn't exist in the renderer; pull platform from preload
-  // (synchronously published by `api.ts` as `window.api.platform`).
-  // `arch` isn't exposed renderer-side — legacy "About" built the full
-  // string main-side. Just show platform for now; main-side enrichment
-  // can land if/when the user wants arch back.
   const platformLabel = computed(() => {
     const p = window.api.platform
     if (p === 'darwin') return 'macOS'
@@ -275,9 +210,6 @@ export function useGlobalSettings(opts: UseGlobalSettingsOpts): UseGlobalSetting
   })
 
   function onUpdateStateChanged(next: AppUpdateState): void {
-    // Mirrors AppUpdateAction.vue: once the cached state moves out of
-    // available/downloading, clear local in-flight flag + progress so the
-    // CTA re-reads fresh.
     if (next.kind !== 'available' && next.kind !== 'downloading') {
       downloadStarting.value = false
       updateProgress.value = null
@@ -311,7 +243,6 @@ export function useGlobalSettings(opts: UseGlobalSettingsOpts): UseGlobalSetting
       }
       return
     }
-    // null state → treat Update Now as Check For Update.
     await handleCheckForUpdate()
   }
 
@@ -337,43 +268,13 @@ export function useGlobalSettings(opts: UseGlobalSettingsOpts): UseGlobalSetting
     }
   }
 
-  // ---- Install-scoped slice (Update Channel + Copy & Update) ----
-  // Delegate to useComfyUISettings so the runAction 9-stage dispatcher
-  // (confirm chains / disk checks / progress modal) is reused as-is.
-  const comfy = useComfyUISettings({
-    installation: opts.installation,
-    onShowProgress: opts.onShowProgress,
-    onNavigateList: opts.onNavigateList,
-    onClose: opts.onClose,
-  })
-
-  const channelPickerField = computed<DetailField | null>(() => {
-    const updateSections: DetailSection[] = comfy.sectionsForTab('update').value
-    for (const sec of updateSections) {
-      const f = sec.fields?.find((ff) => ff.editType === 'channel-cards')
-      if (f) return f
-    }
-    return null
-  })
-
-  async function runInstallAction(action: ActionDef): Promise<void> {
-    await comfy.runAction(action)
-  }
-
-  // ---- Subscriptions + lifecycle ----
   let unsubSettings: (() => void) | null = null
   let unsubUpdateState: (() => void) | null = null
   let unsubProgress: (() => void) | null = null
   let unsubFailed: (() => void) | null = null
 
   async function reload(): Promise<void> {
-    await Promise.all([
-      loadGlobal(),
-      // The install-scoped slice reloads on installation watcher inside
-      // useComfyUISettings; we trigger an explicit reload too so a
-      // settings-changed broadcast (e.g. channel switch) re-fetches.
-      comfy.reload(),
-    ])
+    await loadGlobal()
   }
 
   onMounted(async () => {
@@ -391,7 +292,7 @@ export function useGlobalSettings(opts: UseGlobalSettingsOpts): UseGlobalSetting
     try {
       updateState.value = await window.api.getAppUpdateState()
     } catch {
-      // leave default null state
+      /* leave default null state */
     }
 
     await loadGlobal()
@@ -411,19 +312,10 @@ export function useGlobalSettings(opts: UseGlobalSettingsOpts): UseGlobalSetting
     unsubFailed?.()
   })
 
-  // When the active installation changes (rare, but happens on chooser
-  // → install-backed swap), the channel-picker field needs to refetch.
-  // useComfyUISettings already watches `installation` internally and
-  // reloads, so we only need to re-derive — no extra work here.
-  watch(
-    () => toValue(opts.installation)?.id ?? null,
-    () => {
-      // intentionally empty — comfy composable handles refetch
-    },
-  )
-
   return {
-    overviewFields,
+    generalFields,
+    telemetryFields,
+    desktopUpdateFields,
     cacheFields,
     advancedFields,
     sharedDirectoriesFields,
@@ -447,9 +339,6 @@ export function useGlobalSettings(opts: UseGlobalSettingsOpts): UseGlobalSetting
     handleUpdateNow,
     handleCheckForUpdate,
 
-    channelPickerField,
-    runInstallAction,
-
     loading,
     error,
     updateField,
diff --git a/src/renderer/src/composables/useInstallContextMenu.ts b/src/renderer/src/composables/useInstallContextMenu.ts
index d7936653..1ef6ab81 100644
--- a/src/renderer/src/composables/useInstallContextMenu.ts
+++ b/src/renderer/src/composables/useInstallContextMenu.ts
@@ -173,21 +173,20 @@ export function useInstallContextMenu(opts: {
       })
     }
 
-    // Untrack Installation — drops the install from the app's registry
-    // without touching disk. Available for any local-like installed
-    // install (matches the existing `untrackAction()` source-side gating).
+    // Destructive bucket — Untrack + Delete share one separator group
+    // because both remove the install from the picker. Untrack drops
+    // the registry entry only; Delete also wipes disk. Keeping them
+    // adjacent under a single divider scans as "remove this install,
+    // pick how" instead of two unrelated leaf items.
     if (isInstalled(inst) && isLocalLikeInstall(inst)) {
       items.push({
         id: 'untrack',
         label: t('actions.untrack'),
+        separator: items.length > 0,
       })
-    }
-
-    if (isInstalled(inst) && isLocalLikeInstall(inst)) {
       items.push({
         id: 'delete',
         label: t('chooser.menuDelete'),
-        separator: items.length > 0,
         disabled: stoppedActionGated,
       })
     }
diff --git a/src/renderer/src/composables/useInstallList.test.ts b/src/renderer/src/composables/useInstallList.test.ts
index ce34e588..1e234fa1 100644
--- a/src/renderer/src/composables/useInstallList.test.ts
+++ b/src/renderer/src/composables/useInstallList.test.ts
@@ -267,7 +267,7 @@ describe('useInstallList', () => {
       const list = withI18nScope(i18n, () => useInstallList({ installations }))
 
       const inst = makeInstall({ id: 'a', lastLaunchedAt: Date.now() - 30_000 })
-      expect(list.lastLaunchedLabel(inst)).toBe('Launched just now')
+      expect(list.lastLaunchedLabel(inst)).toBe('Launched Just now')
     })
 
     it('formats sub-hour timestamps as "Nm ago"', () => {
@@ -301,6 +301,26 @@ describe('useInstallList', () => {
     })
   })
 
+  describe('lastLaunchedShortLabel', () => {
+    it('returns an empty string when lastLaunchedAt is undefined', () => {
+      const installations = ref<Installation[]>([])
+      const list = withI18nScope(i18n, () => useInstallList({ installations }))
+
+      const inst = makeInstall({ id: 'a' })
+      expect(list.lastLaunchedShortLabel(inst)).toBe('')
+    })
+
+    it('returns only the relative time without the Launched prefix', () => {
+      vi.useFakeTimers()
+      vi.setSystemTime(new Date('2026-05-18T12:00:00Z'))
+      const installations = ref<Installation[]>([])
+      const list = withI18nScope(i18n, () => useInstallList({ installations }))
+
+      const inst = makeInstall({ id: 'a', lastLaunchedAt: Date.now() - 3 * 3_600_000 })
+      expect(list.lastLaunchedShortLabel(inst)).toBe('3h ago')
+    })
+  })
+
   describe('reactivity', () => {
     it('updates visibleInstalls when the input installations ref changes', () => {
       const installations = ref<Installation[]>([
diff --git a/src/renderer/src/composables/useInstallList.ts b/src/renderer/src/composables/useInstallList.ts
index 75fc2dad..0f4182dc 100644
--- a/src/renderer/src/composables/useInstallList.ts
+++ b/src/renderer/src/composables/useInstallList.ts
@@ -57,6 +57,8 @@ export interface UseInstallListApi {
   showEmptyHint: ComputedRef<boolean>
   matchesQuery: (name: string) => boolean
   lastLaunchedLabel: (inst: Installation) => string
+  /** Compact recency for tight picker rows — `3h ago`, not `Launched 3h ago`. */
+  lastLaunchedShortLabel: (inst: Installation) => string
 }
 
 /**
@@ -165,7 +167,7 @@ export function useInstallList(opts: UseInstallListOpts): UseInstallListApi {
   function timeAgo(timestamp: number): string {
     const diff = now.value - timestamp
     const minutes = Math.floor(diff / 60_000)
-    if (minutes < 1) return 'just now'
+    if (minutes < 1) return 'Just now'
     if (minutes < 60) return `${minutes}m ago`
     const hours = Math.floor(minutes / 60)
     if (hours < 24) return `${hours}h ago`
@@ -179,6 +181,12 @@ export function useInstallList(opts: UseInstallListOpts): UseInstallListApi {
       : t('dashboard.neverLaunched')
   }
 
+  function lastLaunchedShortLabel(inst: Installation): string {
+    return typeof inst.lastLaunchedAt === 'number'
+      ? timeAgo(inst.lastLaunchedAt)
+      : ''
+  }
+
   return {
     searchQuery,
     activeFilter,
@@ -189,5 +197,6 @@ export function useInstallList(opts: UseInstallListOpts): UseInstallListApi {
     showEmptyHint,
     matchesQuery,
     lastLaunchedLabel,
+    lastLaunchedShortLabel,
   }
 }
diff --git a/src/renderer/src/composables/useLocalInstanceGuard.test.ts b/src/renderer/src/composables/useLocalInstanceGuard.test.ts
index f017c81d..360d0cb3 100644
--- a/src/renderer/src/composables/useLocalInstanceGuard.test.ts
+++ b/src/renderer/src/composables/useLocalInstanceGuard.test.ts
@@ -8,10 +8,10 @@ vi.mock('vue-i18n', () => ({
   })
 }))
 
-const mockSelect = vi.fn()
-vi.mock('./useModal', () => ({
-  useModal: () => ({
-    select: mockSelect
+const mockConfirm = vi.fn()
+vi.mock('./useDialogs', () => ({
+  useDialogs: () => ({
+    confirm: mockConfirm
   })
 }))
 
@@ -72,7 +72,7 @@ describe('useLocalInstanceGuard', () => {
     const result = await guard.checkBeforeLaunch('cloud-1')
 
     expect(result).toBe(true)
-    expect(mockSelect).not.toHaveBeenCalled()
+    expect(mockConfirm).not.toHaveBeenCalled()
   })
 
   it('prompts when another local instance is running', async () => {
@@ -85,12 +85,12 @@ describe('useLocalInstanceGuard', () => {
       installationName: 'Running Install',
       mode: 'window',
     })
-    mockSelect.mockResolvedValue('proceed')
+    mockConfirm.mockResolvedValue('primary')
     const guard = useLocalInstanceGuard()
 
     const result = await guard.checkBeforeLaunch('target')
 
-    expect(mockSelect).toHaveBeenCalled()
+    expect(mockConfirm).toHaveBeenCalled()
     expect(result).toBe(true)
   })
 
@@ -102,12 +102,12 @@ describe('useLocalInstanceGuard', () => {
     sessionStore.launchingInstances.set('launching-1', {
       installationName: 'Launching Install',
     })
-    mockSelect.mockResolvedValue('proceed')
+    mockConfirm.mockResolvedValue('primary')
     const guard = useLocalInstanceGuard()
 
     const result = await guard.checkBeforeLaunch('target')
 
-    expect(mockSelect).toHaveBeenCalled()
+    expect(mockConfirm).toHaveBeenCalled()
     expect(result).toBe(true)
   })
 
@@ -121,7 +121,7 @@ describe('useLocalInstanceGuard', () => {
     const result = await guard.checkBeforeLaunch('target')
 
     expect(result).toBe(true)
-    expect(mockSelect).not.toHaveBeenCalled()
+    expect(mockConfirm).not.toHaveBeenCalled()
   })
 
   it('returns false when user cancels the prompt', async () => {
@@ -134,7 +134,7 @@ describe('useLocalInstanceGuard', () => {
       installationName: 'Other',
       mode: 'window',
     })
-    mockSelect.mockResolvedValue(null)
+    mockConfirm.mockResolvedValue(false)
     const guard = useLocalInstanceGuard()
 
     const result = await guard.checkBeforeLaunch('target')
@@ -152,7 +152,7 @@ describe('useLocalInstanceGuard', () => {
       installationName: 'Other',
       mode: 'window',
     })
-    mockSelect.mockResolvedValue('replace')
+    mockConfirm.mockResolvedValue('secondary')
     const guard = useLocalInstanceGuard()
 
     const result = await guard.checkBeforeLaunch('target')
diff --git a/src/renderer/src/composables/useLocalInstanceGuard.ts b/src/renderer/src/composables/useLocalInstanceGuard.ts
index 8865fd7a..4f4c4385 100644
--- a/src/renderer/src/composables/useLocalInstanceGuard.ts
+++ b/src/renderer/src/composables/useLocalInstanceGuard.ts
@@ -1,7 +1,7 @@
 import { useI18n } from 'vue-i18n'
 import { useSessionStore } from '../stores/sessionStore'
 import { useInstallationStore } from '../stores/installationStore'
-import { useModal } from './useModal'
+import { useDialogs } from './useDialogs'
 
 /**
  * Guard that checks whether another local ComfyUI instance is already running
@@ -11,7 +11,7 @@ export function useLocalInstanceGuard() {
   const { t } = useI18n()
   const sessionStore = useSessionStore()
   const installationStore = useInstallationStore()
-  const modal = useModal()
+  const dialogs = useDialogs()
 
   /**
    * Check if another local instance is running before launching.
@@ -42,27 +42,27 @@ export function useLocalInstanceGuard() {
 
     const names = runningLocal.map((r) => r.name).join(', ')
 
-    const choice = await modal.select({
+    // Two non-cancel actions in the footer — `secondary` is "Close
+    // Running & Launch" (destructive: stops the other instance),
+    // `primary` is "Launch Alongside" (additive). Header ✕ carries
+    // the dismiss affordance since the footer is full.
+    const choice = await dialogs.confirm({
       title: t('launch.instanceRunningTitle'),
       message: t('launch.instanceRunningMessage', { name: names }),
-      items: [
-        {
-          value: 'proceed',
-          label: t('launch.instanceRunningProceed'),
-        },
-        {
-          value: 'replace',
-          label: t('launch.instanceRunningReplace'),
-        },
-      ],
+      confirmLabel: t('launch.instanceRunningProceed'),
+      tone: 'primary',
+      secondaryLabel: t('launch.instanceRunningReplace'),
+      secondaryTone: 'danger',
+      showCancel: false,
+      showCloseIcon: true,
     })
 
-    if (choice === 'replace') {
+    if (choice === 'secondary') {
       await Promise.all(runningLocal.map((r) => window.api.stopComfyUI(r.id)))
       return true
     }
 
-    return choice === 'proceed'
+    return choice === 'primary'
   }
 
   return { checkBeforeLaunch }
diff --git a/src/renderer/src/composables/useTitlePopupAutoResize.ts b/src/renderer/src/composables/useTitlePopupAutoResize.ts
deleted file mode 100644
index 38c9a910..00000000
--- a/src/renderer/src/composables/useTitlePopupAutoResize.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { onMounted, onUnmounted, type Ref } from 'vue'
-
-/**
- * Wire a `ResizeObserver` on a renderer-side popup view that asks main
- * to size the WebContentsView to the natural content height whenever
- * the observed element changes size.
- *
- * Used by `GlobalSettingsView` and `InstancePickerView` — both have
- * `BaseAccordion`s whose expand / collapse should grow and shrink the
- * outer popup bounds, but neither view's root can be measured directly
- * because it is height-clamped to the WebContentsView's current
- * bounds. Each view supplies:
- *
- *  - `observed`: an inner wrapper that sits OUTSIDE any
- *    `max-height: 100%` / `overflow-y: auto` clamp so its
- *    `offsetHeight` reports the unclamped natural content height in
- *    both directions.
- *  - `compute`: returns the popup view height the renderer wants in
- *    CSS px, given the current DOM state. Called every observation
- *    tick. Main clamps the request to the popup kind's ceiling band
- *    so unbounded growth is impossible.
- *
- * The bridge's `requestSize` IPC is the same channel `DownloadsView`
- * uses — this composable just centralises the ResizeObserver wiring
- * the two accordion-driven popups would otherwise duplicate.
- */
-/**
- * Options for fine-grained control over when the observer fires.
- *
- *  - `enabled`: predicate the observer calls on every tick. Returning
- *    `false` makes the tick a no-op — useful when the caller knows the
- *    natural-height signal is meaningless for the current mode (e.g.
- *    the picker's expanded mode is sized main-side, so renderer
- *    measurement is pure cost).
- *  - The composable also dedupes consecutive identical heights (within
- *    a ±2px slop) so font-loading jitter and integer-rounding wobble
- *    don't flood the IPC channel with no-op `setBounds` calls.
- */
-interface UseTitlePopupAutoResizeOptions {
-  enabled?: () => boolean
-}
-
-export function useTitlePopupAutoResize(
-  observed: Ref<HTMLElement | null>,
-  compute: () => number,
-  requestSize: ((height: number) => void) | undefined,
-  options?: UseTitlePopupAutoResizeOptions,
-): void {
-  let resizeObserver: ResizeObserver | null = null
-  let lastSent: number | null = null
-
-  onMounted(() => {
-    const el = observed.value
-    if (!el || typeof ResizeObserver === 'undefined') return
-    resizeObserver = new ResizeObserver(() => {
-      if (!requestSize) return
-      if (options?.enabled && !options.enabled()) return
-      const next = compute()
-      if (!Number.isFinite(next)) return
-      if (lastSent !== null && Math.abs(next - lastSent) < 2) return
-      lastSent = next
-      requestSize(next)
-    })
-    resizeObserver.observe(el)
-  })
-
-  onUnmounted(() => {
-    resizeObserver?.disconnect()
-    resizeObserver = null
-  })
-}
diff --git a/src/renderer/src/composables/useTooltip.ts b/src/renderer/src/composables/useTooltip.ts
index 96341631..38882d0f 100644
--- a/src/renderer/src/composables/useTooltip.ts
+++ b/src/renderer/src/composables/useTooltip.ts
@@ -1,35 +1,191 @@
-import { type Ref, ref } from 'vue'
+import { nextTick, onBeforeUnmount, ref, type Ref } from 'vue'
+
+export type TooltipSide = 'top' | 'bottom' | 'left' | 'right'
+export type TooltipAlign = 'start' | 'center' | 'end'
+
+export interface UseTooltipOpts {
+  side: () => TooltipSide
+  align?: () => TooltipAlign
+  canShow?: () => boolean
+  /** Viewport margin the bubble's bounds must stay inside. Default 8px. */
+  edgePadding?: number
+  /** Gap between trigger edge and bubble edge along the placement axis. Default 8px. */
+  offset?: number
+}
+
+export interface TooltipPlacement {
+  visible: Ref<boolean>
+  show: () => void
+  hide: () => void
+  bubbleStyle: Ref<Record<string, string>>
+  resolvedSide: Ref<TooltipSide>
+  arrowStyle: Ref<Record<string, string>>
+}
 
 export function useTooltip(
   triggerRef: Ref<HTMLElement | null>,
-  side: () => 'top' | 'bottom',
-  canShow?: () => boolean,
-) {
-  const bubbleStyle = ref<Record<string, string>>({})
+  bubbleRef: Ref<HTMLElement | null>,
+  opts: UseTooltipOpts,
+): TooltipPlacement {
   const visible = ref(false)
+  const bubbleStyle = ref<Record<string, string>>({})
+  const arrowStyle = ref<Record<string, string>>({})
+  const resolvedSide = ref<TooltipSide>(opts.side())
 
-  function show(): void {
-    if (!triggerRef.value) return
-    if (canShow && !canShow()) return
-    const rect = triggerRef.value.getBoundingClientRect()
-    const x = rect.left + rect.width / 2
-    if (side() === 'bottom') {
-      bubbleStyle.value = {
-        top: `${rect.bottom + 6}px`,
-        left: `${x}px`,
-      }
+  const edgePadding = opts.edgePadding ?? 8
+  const offset = opts.offset ?? 8
+  const align = opts.align ?? (() => 'center' as TooltipAlign)
+
+  let rafId: number | null = null
+  let listenersAttached = false
+
+  function measure(): void {
+    const trigger = triggerRef.value?.getBoundingClientRect()
+    const bubble = bubbleRef.value?.getBoundingClientRect()
+    if (!trigger || !bubble) return
+
+    const vw = window.innerWidth
+    const vh = window.innerHeight
+
+    const placement = resolvePlacement(opts.side(), trigger, bubble, vw, vh, offset)
+    resolvedSide.value = placement
+
+    const { top, left } = computeBubbleOrigin(placement, align(), trigger, bubble, offset)
+    const clampedLeft = clamp(left, edgePadding, vw - bubble.width - edgePadding)
+    const clampedTop = clamp(top, edgePadding, vh - bubble.height - edgePadding)
+
+    bubbleStyle.value = {
+      top: `${clampedTop}px`,
+      left: `${clampedLeft}px`,
+    }
+
+    const triggerCenterX = trigger.left + trigger.width / 2
+    const triggerCenterY = trigger.top + trigger.height / 2
+    if (placement === 'top' || placement === 'bottom') {
+      const local = clamp(triggerCenterX - clampedLeft, 12, bubble.width - 12)
+      arrowStyle.value = { left: `${local}px` }
     } else {
-      bubbleStyle.value = {
-        bottom: `${window.innerHeight - rect.top + 6}px`,
-        left: `${x}px`,
-      }
+      const local = clamp(triggerCenterY - clampedTop, 12, bubble.height - 12)
+      arrowStyle.value = { top: `${local}px` }
     }
-    visible.value = true
+  }
+
+  function scheduleMeasure(): void {
+    if (rafId !== null) return
+    rafId = requestAnimationFrame(() => {
+      rafId = null
+      if (visible.value) measure()
+    })
+  }
+
+  function attachReflowListeners(): void {
+    if (listenersAttached) return
+    listenersAttached = true
+    // Capture-phase scroll catches scroll on any ancestor container, not
+    // just the window — without this an open tooltip stays pinned to its
+    // stale viewport coords when a parent scrolls.
+    window.addEventListener('scroll', scheduleMeasure, { capture: true, passive: true })
+    window.addEventListener('resize', scheduleMeasure)
+  }
+
+  function detachReflowListeners(): void {
+    if (!listenersAttached) return
+    listenersAttached = false
+    window.removeEventListener('scroll', scheduleMeasure, { capture: true } as EventListenerOptions)
+    window.removeEventListener('resize', scheduleMeasure)
   }
 
   function hide(): void {
     visible.value = false
+    detachReflowListeners()
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+      rafId = null
+    }
+  }
+
+  async function show(): Promise<void> {
+    if (!triggerRef.value) return
+    if (opts.canShow && !opts.canShow()) return
+
+    // Mount the bubble off-screen first so we can measure its intrinsic
+    // size before placing it. Without this the first hover paints in the
+    // wrong spot for one frame.
+    visible.value = true
+    bubbleStyle.value = {
+      top: '-9999px',
+      left: '-9999px',
+      visibility: 'hidden',
+    }
+    await nextTick()
+    measure()
+    attachReflowListeners()
+  }
+
+  onBeforeUnmount(detachReflowListeners)
+
+  return { visible, show: () => void show(), hide, bubbleStyle, resolvedSide, arrowStyle }
+}
+
+function resolvePlacement(
+  requested: TooltipSide,
+  trigger: DOMRect,
+  bubble: DOMRect,
+  vw: number,
+  vh: number,
+  offset: number,
+): TooltipSide {
+  const room: Record<TooltipSide, number> = {
+    top: trigger.top - offset,
+    bottom: vh - trigger.bottom - offset,
+    left: trigger.left - offset,
+    right: vw - trigger.right - offset,
+  }
+  const need = (s: TooltipSide) =>
+    s === 'top' || s === 'bottom' ? bubble.height : bubble.width
+
+  if (room[requested] >= need(requested)) return requested
+
+  const opposite: Record<TooltipSide, TooltipSide> = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
   }
+  const flip = opposite[requested]
+  if (room[flip] >= need(flip)) return flip
+  return room[flip] > room[requested] ? flip : requested
+}
+
+function computeBubbleOrigin(
+  side: TooltipSide,
+  align: TooltipAlign,
+  trigger: DOMRect,
+  bubble: DOMRect,
+  offset: number,
+): { top: number; left: number } {
+  if (side === 'top' || side === 'bottom') {
+    const top = side === 'top' ? trigger.top - bubble.height - offset : trigger.bottom + offset
+    const left = alignedAxisOrigin(align, trigger.left, trigger.width, bubble.width)
+    return { top, left }
+  }
+  const left = side === 'left' ? trigger.left - bubble.width - offset : trigger.right + offset
+  const top = alignedAxisOrigin(align, trigger.top, trigger.height, bubble.height)
+  return { top, left }
+}
+
+function alignedAxisOrigin(
+  align: TooltipAlign,
+  triggerStart: number,
+  triggerSize: number,
+  bubbleSize: number,
+): number {
+  if (align === 'start') return triggerStart
+  if (align === 'end') return triggerStart + triggerSize - bubbleSize
+  return triggerStart + triggerSize / 2 - bubbleSize / 2
+}
 
-  return { bubbleStyle, visible, show, hide }
+function clamp(value: number, min: number, max: number): number {
+  if (max < min) return min
+  return Math.min(Math.max(value, min), max)
 }
diff --git a/src/renderer/src/lib/datetime.ts b/src/renderer/src/lib/datetime.ts
new file mode 100644
index 00000000..e2f2c689
--- /dev/null
+++ b/src/renderer/src/lib/datetime.ts
@@ -0,0 +1,18 @@
+type Translator = (key: string, params?: Record<string, unknown>) => string
+
+/** Localised relative-time string from epoch ms (e.g. "5 minutes ago").
+ *  Falls back to absolute date for stamps older than 30 days or in the
+ *  future (clock skew, bad input) — relative phrasing would lie. */
+export function formatRelativeFromMs(ms: number, t: Translator): string {
+  if (!Number.isFinite(ms)) return ''
+  const diff = Date.now() - ms
+  if (diff < 0) return new Date(ms).toLocaleDateString()
+  const mins = Math.floor(diff / 60000)
+  if (mins < 1) return t('snapshots.timeJustNow')
+  if (mins < 60) return t('snapshots.timeMinutesAgo', { count: mins })
+  const hours = Math.floor(mins / 60)
+  if (hours < 24) return t('snapshots.timeHoursAgo', { count: hours })
+  const days = Math.floor(hours / 24)
+  if (days < 30) return t('snapshots.timeDaysAgo', { count: days })
+  return new Date(ms).toLocaleDateString()
+}
diff --git a/src/renderer/src/lib/i18nMessages.ts b/src/renderer/src/lib/i18nMessages.ts
index 0d272786..17896105 100644
--- a/src/renderer/src/lib/i18nMessages.ts
+++ b/src/renderer/src/lib/i18nMessages.ts
@@ -17,6 +17,7 @@ export const en = {
     cancel: 'Cancel',
     back: 'Back',
     browse: 'Browse…',
+    learnMore: 'Learn more'
   },
   /** Global Settings view (rendered inside the title-popup process via
    *  `comfyTitlePopup/GlobalSettingsView.vue`). The corresponding keys
@@ -26,19 +27,48 @@ export const en = {
    *  can resolve against. */
   settings: {
     open: 'Open',
+    general: 'General',
+    preferences: 'Preferences',
+    privacy: 'Privacy',
+    community: 'Community',
+    cache: 'Cache',
+    advanced: 'Advanced',
+    platform: 'Platform',
+    storageTab: 'Storage',
+    sharedDirectories: 'Shared Directories',
+    models: 'Shared Models',
+    updatesTab: 'Updates',
+    checkForUpdates: 'Check for updates',
+    checkingForUpdates: 'Checking…'
+  },
+  /** Keys consumed by the picker-side Storage tab (StoragePane.vue),
+   *  duplicated here so the popup-scoped i18n catalog used in tests
+   *  resolves them too. Source of truth for the live app is
+   *  `locales/en.json`. */
+  comfyUISettings: {
+    tabStorage: 'Storage',
+    storageGlobalNote: 'Changes here apply to all of your ComfyUI instances.',
+    storageRestartNote:
+      'Restart the application (or close and reopen) for these changes to take effect.'
   },
   models: {
-    addDir: 'Add Directory',
+    addDir: 'Add directory',
     removeDir: 'Remove',
-    primary: 'primary',
-    default: 'default',
-    makePrimary: 'Make Primary',
+    removeDirTitle: 'Remove shared models directory?',
+    removeDirConfirm:
+      "This won't delete any files. You can re-add the directory later from this list.",
+    primary: 'Primary',
+    default: 'Default',
+    makePrimary: 'Make primary',
+    moreActions: 'More actions'
   },
   tooltips: {
+    sharedModels:
+      "Folders shared across all installations so models aren't downloaded twice. Newly downloaded models go to the primary folder. The system default folder is always kept and can't be removed, and the primary folder can't be removed while it's in use — pick a different primary first.",
     modelsPrimary:
       'The primary directory is where ComfyUI saves newly downloaded models by default.',
     modelsDefault:
-      'The system default directory. This path is created automatically and cannot be removed.',
+      'The system default directory. This path is created automatically and cannot be removed.'
   },
   /** Top-level so the dotted keys returned by `installTypeMetaFor`
    *  (`installType.standalone`, …) map directly without a prefix. */
@@ -47,7 +77,7 @@ export const en = {
     cloud: 'Cloud',
     legacyDesktop: 'Legacy Desktop',
     remote: 'Remote',
-    unknown: 'Unknown',
+    unknown: 'Unknown'
   },
   titleBar: {
     menu: 'Menu',
@@ -67,7 +97,7 @@ export const en = {
     desktopUpdateReady: 'Desktop Update Ready',
     desktopUpdateWithVersion: '{label} (v{version})',
     installUpdateAvailable: 'ComfyUI Update',
-    installUpdateVersion: 'ComfyUI {version}',
+    installUpdateVersion: 'ComfyUI {version}'
   },
   fileMenu: {
     newWindow: 'New Window',
@@ -78,7 +108,9 @@ export const en = {
     sendFeedback: 'Send Beta Feedback',
     returnToDashboard: 'Return to Dashboard',
     closeAllWindows: 'Close All Windows',
-    skipOnboarding: 'Skip Onboarding',
+    exitWindow: 'Exit Window',
+    exitAllWindows: 'Exit All Windows',
+    skipOnboarding: 'Skip Onboarding'
     /* Reset Zoom carries a dynamic percentage in the label and is
      * built main-side without going through this catalog — kept as a
      * raw `label` on the menu item rather than `labelKey`. */
@@ -92,7 +124,7 @@ export const en = {
     showInFolder: 'Show in Finder',
     remove: 'Remove from list',
     viewAllInSettings: 'View All Downloads',
-    completed: 'Completed',
+    completed: 'Completed'
   },
   /** Settings → Downloads tab — superset of the popup view with a
    *  status filter and a different empty placeholder. Action labels
@@ -105,14 +137,14 @@ export const en = {
     filterActive: 'Active',
     filterCompleted: 'Completed',
     filterErrored: 'Failed',
-    filterAriaLabel: 'Status filter',
+    filterAriaLabel: 'Status filter'
   },
   settingsModal: {
     title: 'Settings',
     tabComfy: 'ComfyUI Settings',
     tabDirectories: 'Directories',
     tabDownloads: 'Downloads',
-    tabGlobal: 'Desktop Settings',
+    tabGlobal: 'Desktop Settings'
   },
   /** Strings shared by every install-listing surface (the dashboard
    *  grid in `ChooserView.vue` and the title-bar instance-picker
@@ -129,7 +161,7 @@ export const en = {
     newInstall: 'New Install',
     moreActions: 'More actions',
     menuRevealInFolder: 'Open Folder',
-    menuDelete: 'Delete…',
+    menuDelete: 'Uninstall…'
   },
   /** Picker-only install-action menu labels. The corresponding keys
    *  live under `actions.*` in `locales/en.json` for the panel
@@ -137,7 +169,7 @@ export const en = {
    *  the keys are mirrored here. */
   actions: {
     copyInstallation: 'Copy Install',
-    untrack: 'Untrack',
+    untrack: 'Forget'
   },
   /** Cloud-card copy used by ChooserView's empty cloud CTA AND the
    *  instance-picker popover's empty cloud row. Mirrored from the
@@ -145,7 +177,16 @@ export const en = {
    *  process (which doesn't merge from there) can resolve them. */
   cloud: {
     label: 'Cloud',
-    desc: 'Connect to Comfy Cloud for remote GPU-powered workflows.',
+    desc: 'Connect to Comfy Cloud for remote GPU-powered workflows.'
+  },
+  firstUse: {
+    localModeLabel: 'Local install mode',
+    localModeExpressLabel: 'Quick',
+    localModeConfigureLabel: 'Configure',
+    localDescRecommended:
+      'Fast install with **recommended settings** — skips optional setup steps.',
+    localDescRecommendedGpu:
+      "Fast install tuned for **{gpu}** with recommended settings. Pick **Configure** if that's not your hardware."
   },
   /** Shared relative-time labels used by both ChooserView (via the
    *  panel renderer's merged `locales/en.json`) and the title-bar
@@ -153,7 +194,7 @@ export const en = {
    *  no main-side locale merge, so the keys must be available here. */
   dashboard: {
     launchedAgo: 'Launched {time}',
-    neverLaunched: 'Not launched yet',
+    neverLaunched: 'Not launched yet'
   },
   /** Picker-only strings (right pane + section titles + a11y labels).
    *  Strings used by BOTH surfaces live under `chooser.*` above. */
@@ -172,7 +213,7 @@ export const en = {
     snapshots: 'Snapshots',
     manage: 'Manage',
     running: 'Running',
-    empty: 'Select an instance',
+    empty: 'Select an instance'
   },
   /** Snapshot strings consumed by `SnapshotRow` + `formatRelative` +
    *  `triggerLabel` + `changeSummary` in the popup process. Mirrors
@@ -197,7 +238,7 @@ export const en = {
     triggerPostUpdate: 'Updated',
     triggerPostRestore: 'Restored',
     // Relative-time strings — `formatRelative(iso, t)` resolves these.
-    timeJustNow: 'just now',
+    timeJustNow: 'Just now',
     timeMinutesAgo: '{count}m ago',
     timeHoursAgo: '{count}h ago',
     timeDaysAgo: '{count}d ago',
@@ -210,8 +251,33 @@ export const en = {
     channelChanged: 'Channel changed',
     added: 'Added',
     removed: 'Removed',
-    changed: 'Changed',
+    changed: 'Changed'
+  },
+  channelCards: {
+    lastChecked: 'Last checked',
+    latestVersion: 'Latest',
+    updateAvailable: 'Update available',
+    upToDate: 'Up to date'
+  },
+  appUpdate: {
+    download: 'Download',
+    downloading: 'Downloading…',
+    restartNow: 'Restart & update',
+    readyBadge: 'Ready to restart',
+    sectionTitle: 'Desktop updates',
+    fallbackVersion: 'this update',
+    panelIdleTitle: 'ComfyUI Desktop is up to date',
+    panelAvailableTitle: 'Update {version} available',
+    panelReadyTitle: 'Update {version} ready to install',
+    panelDownloadingTitle: 'Downloading update {version}…',
+    installedLabel: 'Installed {version}',
+    lastCheckedLabel: 'Last checked {time}',
+    latestLabel: 'Latest {version}',
+    systemManagedNote: 'Updates for this install are delivered through your system package manager.'
   },
+  update: {
+    debManagedShort: 'System-managed updates'
+  }
 }
 
 export type AppLocale = typeof en
diff --git a/src/renderer/src/lib/modalLinkify.ts b/src/renderer/src/lib/modalLinkify.ts
new file mode 100644
index 00000000..9fc26bda
--- /dev/null
+++ b/src/renderer/src/lib/modalLinkify.ts
@@ -0,0 +1,39 @@
+/**
+ * Shared markdown-lite formatter for modal copy: escapes HTML, turns
+ * `https://…` runs into clickable anchors that route through
+ * `window.api.openExternal`, and renders `**bold**` as `<strong>`.
+ * Used by `ModalDialog`, `BasePrompt`, and `BaseSelect` so prompt /
+ * select / confirm bodies share identical link + emphasis behavior.
+ */
+
+function escapeHtml(text: string): string {
+  const div = document.createElement('div')
+  div.textContent = text
+  return div.innerHTML
+}
+
+export function linkify(text: string): string {
+  if (!text) return ''
+  const parts = text.split(/(https?:\/\/[^\s<>"']+)/g)
+  return parts
+    .map((part, i) => {
+      const escaped = escapeHtml(part)
+      if (i % 2 === 1) {
+        return `<a href="#" class="modal-link" data-url="${escaped}">${escaped}</a>`
+      }
+      return escaped
+    })
+    .join('')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+}
+
+export function handleModalLinkClick(event: MouseEvent): void {
+  const target = event.target as HTMLElement
+  if (target.classList.contains('modal-link')) {
+    event.preventDefault()
+    const url = target.dataset.url
+    if (url) {
+      window.api.openExternal(url)
+    }
+  }
+}
diff --git a/src/renderer/src/lib/pickerTabs.ts b/src/renderer/src/lib/pickerTabs.ts
index 486bf21e..90048a8d 100644
--- a/src/renderer/src/lib/pickerTabs.ts
+++ b/src/renderer/src/lib/pickerTabs.ts
@@ -1,12 +1,20 @@
 /** Tabs valid for `openInstancePicker` expanded mode and
  *  `ComfyUISettingsContent`. */
-export type PickerTab = 'config' | 'status' | 'update' | 'snapshots'
+export type PickerTab = 'config' | 'status' | 'update' | 'snapshots' | 'storage'
+
+/** Tab ids that main-emitted `DetailSection.tab` values are bucketed
+ *  into for the per-install settings UI. Distinct namespace from
+ *  `PickerTab` (which uses `'config'` where sections use `'settings'`)
+ *  — they overlap on `'storage'`. Renderer-only literal narrowing of
+ *  the upstream `DetailSection.tab: string`. */
+export type SectionTab = 'settings' | 'status' | 'update' | 'snapshots' | 'storage'
 
 const PICKER_TABS: ReadonlySet<PickerTab> = new Set([
   'config',
   'status',
   'update',
   'snapshots',
+  'storage',
 ])
 
 export function isPickerTab(tab: string | null | undefined): tab is PickerTab {
diff --git a/src/renderer/src/lib/uiTiming.ts b/src/renderer/src/lib/uiTiming.ts
new file mode 100644
index 00000000..e53714e0
--- /dev/null
+++ b/src/renderer/src/lib/uiTiming.ts
@@ -0,0 +1,52 @@
+/**
+ * Minimum visible duration for in-flight UI feedback (spinners, busy
+ * labels) on quick, opaque async actions like "Check for updates".
+ *
+ * Why a floor exists: some of these IPCs resolve in <16ms — a cached
+ * rate-limit response from `releaseCache`, an `up_to_date` short-circuit
+ * inside todesktop's autoUpdater, or a dev-mode no-op when no updater
+ * is bound. Without a floor the spinner appears and disappears inside
+ * a single frame and the click reads as a no-op to the user.
+ *
+ * Why 700ms: roughly the floor below which a feedback flash stops
+ * reading as "the system did something" and starts reading as "did I
+ * even click?". Long enough to register, short enough that successful
+ * cases never feel laggy. Calibrate here, not at each call site.
+ */
+export const MIN_BUSY_FEEDBACK_MS = 700
+
+/**
+ * Run `task` and ensure at least `minDurationMs` has elapsed before
+ * resolving. If the task already took longer, returns immediately —
+ * the floor never delays a legitimately slow action.
+ *
+ * The task's result and rejection both propagate unchanged. Errors
+ * are not swallowed.
+ */
+export async function withMinDuration<T>(
+  task: () => Promise<T>,
+  minDurationMs: number = MIN_BUSY_FEEDBACK_MS,
+): Promise<T> {
+  const startedAt = Date.now()
+  try {
+    return await task()
+  } finally {
+    await sleepRemainder(startedAt, minDurationMs)
+  }
+}
+
+/**
+ * Sleep until `minDurationMs` has passed since `startedAt`. Returns
+ * immediately if the deadline is already in the past. Use when a
+ * try/catch/finally already exists around the awaited work and a
+ * `withMinDuration` wrap would fight the existing control flow.
+ */
+export async function sleepRemainder(
+  startedAt: number,
+  minDurationMs: number = MIN_BUSY_FEEDBACK_MS,
+): Promise<void> {
+  const remaining = minDurationMs - (Date.now() - startedAt)
+  if (remaining > 0) {
+    await new Promise((resolve) => setTimeout(resolve, remaining))
+  }
+}
diff --git a/src/renderer/src/panel/PanelApp.test.ts b/src/renderer/src/panel/PanelApp.test.ts
index e56984e2..7d7e18b4 100644
--- a/src/renderer/src/panel/PanelApp.test.ts
+++ b/src/renderer/src/panel/PanelApp.test.ts
@@ -739,15 +739,14 @@ it('opens the new-install takeover above the chooser body when show-new-install
     expect(api.openInstancePicker).toHaveBeenCalledTimes(1)
     expect(api.openInstancePicker).toHaveBeenCalledWith({
       installationId: 'test-id',
-      mode: 'expanded',
       initialTab: 'update',
     })
   })
 
-  it('opens the instance picker (expanded, Config tab) when a panel-trigger-overlay open-settings event arrives with tab=comfy', async () => {
+  it('opens the instance picker on the Config tab when a panel-trigger-overlay open-settings event arrives with tab=comfy', async () => {
     // `comfy://open-settings?tab=comfy` on an install-backed host
-    // opens the picker in expanded mode on the Config tab — the same
-    // surface the title-bar Settings entry routes to.
+    // opens the picker on the Config tab — the same surface the
+    // title-bar Settings entry routes to.
     mountPanel()
     await flushPromises()
     const api = (
@@ -765,7 +764,6 @@ it('opens the new-install takeover above the chooser body when show-new-install
     expect(api.openInstancePicker).toHaveBeenCalledTimes(1)
     expect(api.openInstancePicker).toHaveBeenCalledWith({
       installationId: 'test-id',
-      mode: 'expanded',
       initialTab: 'config',
     })
     expect(api.openGlobalSettings).not.toHaveBeenCalled()
diff --git a/src/renderer/src/panel/PanelApp.vue b/src/renderer/src/panel/PanelApp.vue
index c037a030..07f12696 100644
--- a/src/renderer/src/panel/PanelApp.vue
+++ b/src/renderer/src/panel/PanelApp.vue
@@ -3,6 +3,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ProgressModal from '../views/ProgressModal.vue'
 import ModalDialog from '../components/ModalDialog.vue'
+import DialogHost from '../components/DialogHost.vue'
 import DownloadsModal from '../components/DownloadsModal.vue'
 import FeedbackModal from '../components/FeedbackModal.vue'
 import ComfyLifecycleView from './ComfyLifecycleView.vue'
@@ -218,7 +219,6 @@ const { triggerAction: triggerInstallAction } = useInstallContextMenu({
     }
     window.api.openInstancePicker({
       installationId: inst.id,
-      mode: 'expanded',
       initialTab: resolvePickerTab(initialTab, 'config'),
       autoAction,
     })
@@ -585,6 +585,7 @@ onUnmounted(() => {
     <FeedbackModal :open="feedbackOpen" :url="feedbackUrl" @close="closeFeedback" />
 
     <ModalDialog />
+    <DialogHost />
     <MigrateConfirmTakeover ref="migrateTakeoverRef" />
   </div>
 </template>
diff --git a/src/renderer/src/panel/useFirstUseChain.test.ts b/src/renderer/src/panel/useFirstUseChain.test.ts
new file mode 100644
index 00000000..6ea8e749
--- /dev/null
+++ b/src/renderer/src/panel/useFirstUseChain.test.ts
@@ -0,0 +1,380 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, nextTick, ref, type Ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import type { ActionResult, FieldOption, ShowProgressOpts, Source } from '../types/ipc'
+import { useProgressStore } from '../stores/progressStore'
+import { useFirstUseChain, type FirstUseChainApi } from './useFirstUseChain'
+
+/**
+ * `useFirstUseChain` integration tests focused on the Express Install
+ * path. Express skips the Configure (`InstallWizardModal`) screen and
+ * runs Standalone + recommended defaults straight through to the
+ * install-progress takeover. The other chain branches (Cloud auto-
+ * launch, migrate, file-menu skip) are exercised indirectly by
+ * PanelApp's integration tests.
+ */
+
+const standaloneSource: Source = {
+  id: 'standalone',
+  label: 'Standalone',
+  fields: [
+    { id: 'release', label: 'Release', type: 'select' },
+    { id: 'variant', label: 'Variant', type: 'select' },
+  ],
+}
+
+const recommendedRelease: FieldOption = {
+  value: 'v1.0.0',
+  label: 'v1.0.0',
+  recommended: true,
+}
+const fallbackRelease: FieldOption = { value: 'v0.9.0', label: 'v0.9.0' }
+const recommendedVariant: FieldOption = {
+  value: 'nvidia',
+  label: 'NVIDIA',
+  recommended: true,
+  data: { variantId: 'nvidia-cuda' },
+}
+
+interface TestApi {
+  validateHardware: ReturnType<typeof vi.fn>
+  getDefaultInstallDir: ReturnType<typeof vi.fn>
+  getSources: ReturnType<typeof vi.fn>
+  getFieldOptions: ReturnType<typeof vi.fn>
+  buildInstallation: ReturnType<typeof vi.fn>
+  getUniqueName: ReturnType<typeof vi.fn>
+  addInstallation: ReturnType<typeof vi.fn>
+  installInstance: ReturnType<typeof vi.fn>
+  setFirstUseMode: ReturnType<typeof vi.fn>
+  setSetting: ReturnType<typeof vi.fn>
+  getSetting: ReturnType<typeof vi.fn>
+  getInstallations: ReturnType<typeof vi.fn>
+  onInstallationsChanged: ReturnType<typeof vi.fn>
+  onInstallationsVersionsUpdated: ReturnType<typeof vi.fn>
+  onFirstUseSkip: ReturnType<typeof vi.fn>
+  onErrorDetail: ReturnType<typeof vi.fn>
+  onInstallProgress: ReturnType<typeof vi.fn>
+  onComfyOutput: ReturnType<typeof vi.fn>
+}
+
+function buildApi(overrides: Partial<TestApi> = {}): TestApi {
+  return {
+    validateHardware: vi.fn().mockResolvedValue({ supported: true }),
+    getDefaultInstallDir: vi.fn().mockResolvedValue('/Users/test/ComfyUI'),
+    getSources: vi.fn().mockResolvedValue([standaloneSource]),
+    getFieldOptions: vi.fn().mockImplementation((_sourceId: string, fieldId: string) => {
+      if (fieldId === 'release') return Promise.resolve([recommendedRelease, fallbackRelease])
+      if (fieldId === 'variant') return Promise.resolve([recommendedVariant])
+      return Promise.resolve([])
+    }),
+    buildInstallation: vi.fn().mockResolvedValue({ sourceId: 'standalone', sourceCategory: 'local' }),
+    getUniqueName: vi.fn().mockResolvedValue('ComfyUI'),
+    addInstallation: vi.fn().mockResolvedValue({ ok: true, entry: { id: 'inst-express-1' } }),
+    installInstance: vi.fn().mockResolvedValue(undefined),
+    setFirstUseMode: vi.fn(),
+    setSetting: vi.fn().mockResolvedValue(undefined),
+    getSetting: vi.fn().mockResolvedValue(undefined),
+    getInstallations: vi.fn().mockResolvedValue([]),
+    onInstallationsChanged: vi.fn(),
+    onInstallationsVersionsUpdated: vi.fn(),
+    onFirstUseSkip: vi.fn().mockReturnValue(() => {}),
+    onErrorDetail: vi.fn().mockReturnValue(() => {}),
+    onInstallProgress: vi.fn().mockReturnValue(() => {}),
+    onComfyOutput: vi.fn().mockReturnValue(() => {}),
+    ...overrides,
+  }
+}
+
+interface MountedChain {
+  api: FirstUseChainApi | null
+  handleShowProgress: ReturnType<typeof vi.fn>
+  switchPanel: ReturnType<typeof vi.fn>
+  dismissTakeoverDirect: ReturnType<typeof vi.fn>
+  performChooserLaunch: ReturnType<typeof vi.fn>
+  openFirstUseTakeover: ReturnType<typeof vi.fn>
+}
+
+function mountChain(): MountedChain {
+  const handleShowProgress = vi.fn().mockResolvedValue(undefined)
+  const switchPanel = vi.fn().mockResolvedValue(undefined)
+  const dismissTakeoverDirect = vi.fn()
+  const performChooserLaunch = vi.fn().mockResolvedValue('launched')
+  const openFirstUseTakeover = vi.fn().mockResolvedValue(undefined)
+
+  const apiRef: Ref<FirstUseChainApi | null> = ref(null)
+
+  const TestHost = defineComponent({
+    setup() {
+      apiRef.value = useFirstUseChain({
+        handleShowProgress,
+        switchPanel,
+        dismissTakeoverDirect,
+        performChooserLaunch,
+        openFirstUseTakeover,
+      })
+      return () => h('div')
+    },
+  })
+
+  mount(TestHost)
+
+  return {
+    api: apiRef.value,
+    handleShowProgress,
+    switchPanel,
+    dismissTakeoverDirect,
+    performChooserLaunch,
+    openFirstUseTakeover,
+  }
+}
+
+describe('useFirstUseChain — Express Install', () => {
+  let testApi: TestApi
+
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    testApi = buildApi()
+    vi.stubGlobal('window', { ...window, api: testApi })
+    vi.clearAllMocks()
+  })
+
+  it('skips Configure when `express: true` — runs buildInstallation/addInstallation/handleShowProgress', async () => {
+    const chain = mountChain()
+    await chain.api!.handleFirstUseChainLocal({ express: true })
+
+    expect(testApi.validateHardware).toHaveBeenCalledTimes(1)
+    expect(testApi.getSources).toHaveBeenCalledTimes(1)
+    expect(testApi.buildInstallation).toHaveBeenCalledWith(
+      'standalone',
+      expect.objectContaining({
+        release: recommendedRelease,
+        variant: recommendedVariant,
+      }),
+    )
+    expect(testApi.addInstallation).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'ComfyUI',
+        installPath: '/Users/test/ComfyUI',
+        sourceId: 'standalone',
+      }),
+    )
+    expect(chain.handleShowProgress).toHaveBeenCalledWith(
+      expect.objectContaining({
+        installationId: 'inst-express-1',
+        autoLaunchOnFinish: true,
+        opKind: 'install',
+      }),
+    )
+    // Did NOT delegate to Configure when express succeeded.
+    expect(chain.switchPanel).not.toHaveBeenCalled()
+  })
+
+  it('picks the `recommended` option for each non-text field', async () => {
+    const chain = mountChain()
+    await chain.api!.handleFirstUseChainLocal({ express: true })
+
+    const call = testApi.buildInstallation.mock.calls[0]
+    expect(call).toBeDefined()
+    const selections = call![1] as Record<string, FieldOption>
+    expect(selections.release).toEqual(recommendedRelease)
+    expect(selections.variant).toEqual(recommendedVariant)
+  })
+
+  it('falls back to Configure when hardware validation reports unsupported', async () => {
+    testApi.validateHardware = vi
+      .fn()
+      .mockResolvedValue({ supported: false, error: 'No GPU' })
+    vi.stubGlobal('window', { ...window, api: testApi })
+
+    const chain = mountChain()
+    await chain.api!.handleFirstUseChainLocal({ express: true })
+
+    expect(testApi.buildInstallation).not.toHaveBeenCalled()
+    expect(chain.handleShowProgress).not.toHaveBeenCalled()
+    expect(chain.switchPanel).toHaveBeenCalledWith('new-install', 'first_use')
+  })
+
+  it('falls back to Configure when addInstallation rejects', async () => {
+    testApi.addInstallation = vi
+      .fn()
+      .mockResolvedValue({ ok: false, message: 'path conflict' })
+    vi.stubGlobal('window', { ...window, api: testApi })
+
+    const chain = mountChain()
+    await chain.api!.handleFirstUseChainLocal({ express: true })
+
+    expect(chain.handleShowProgress).not.toHaveBeenCalled()
+    expect(chain.switchPanel).toHaveBeenCalledWith('new-install', 'first_use')
+  })
+
+  it('opens Configure when `express` is omitted (legacy chain-local behaviour)', async () => {
+    const chain = mountChain()
+    await chain.api!.handleFirstUseChainLocal()
+
+    expect(chain.switchPanel).toHaveBeenCalledWith('new-install', 'first_use')
+    expect(testApi.buildInstallation).not.toHaveBeenCalled()
+    expect(chain.handleShowProgress).not.toHaveBeenCalled()
+  })
+
+  it('opens Configure when `express: false`', async () => {
+    const chain = mountChain()
+    await chain.api!.handleFirstUseChainLocal({ express: false })
+
+    expect(chain.switchPanel).toHaveBeenCalledWith('new-install', 'first_use')
+    expect(testApi.buildInstallation).not.toHaveBeenCalled()
+  })
+})
+
+describe('useFirstUseChain — chainSpan stamping', () => {
+  let testApi: TestApi
+
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    testApi = buildApi()
+    vi.stubGlobal('window', { ...window, api: testApi })
+    vi.clearAllMocks()
+  })
+
+  function progressOpts(installationId: string, extra: Partial<ShowProgressOpts> = {}): ShowProgressOpts {
+    return {
+      installationId,
+      title: `Installing — ${installationId}`,
+      apiCall: () => Promise.resolve({ ok: true } as ActionResult) as Promise<unknown>,
+      ...extra
+    }
+  }
+
+  it('stamps chainSpan=install when the first-use chain captures an install op', async () => {
+    const chain = mountChain()
+    // Kick off the chain — sets `chainingFirstUseToNewInstall=true` so
+    // the next show-progress qualifies as the chained install leg.
+    await chain.api!.handleFirstUseChainLocal({ express: true })
+
+    // Inspect what handleShowProgress received from `runExpressInstall`.
+    // `onShowProgress` mutated the opts object IN PLACE before the call
+    // (it's how usePanelOverlays-style hosts forward chainSpan into the
+    // store), so we can assert directly on the mock call's argument.
+    const showOpts = chain.handleShowProgress.mock.calls[0]?.[0] as ShowProgressOpts | undefined
+    expect(showOpts).toBeDefined()
+    // Express install runs onShowProgress synchronously inside the chain
+    // composable's hook — the test mock for handleShowProgress doesn't
+    // call onShowProgress itself, so simulate the host's job here:
+    chain.api!.hooks.onShowProgress(showOpts!)
+    expect(showOpts!.chainSpan).toBe('install')
+  })
+
+  it('stamps chainSpan=install when an autoLaunchOnFinish op begins (non-first-use entry point)', () => {
+    const chain = mountChain()
+    const opts = progressOpts('inst-auto-1', { autoLaunchOnFinish: true })
+    chain.api!.hooks.onShowProgress(opts)
+    expect(opts.chainSpan).toBe('install')
+  })
+
+  it('does not stamp chainSpan on a plain standalone op', () => {
+    const chain = mountChain()
+    const opts = progressOpts('inst-plain-1')
+    chain.api!.hooks.onShowProgress(opts)
+    expect(opts.chainSpan).toBeUndefined()
+  })
+
+  it('stamps chainSpan=launch when the auto-launch watcher fires the chained launch leg', async () => {
+    const chain = mountChain()
+    // Hold `performChooserLaunch` open: the production flow stamps the
+    // launch op's `show-progress` BEFORE the launch action resolves
+    // (main emits the IPC mid-flight). Returning an unresolved promise
+    // mirrors that — `.finally()` won't clear `pendingChainedLaunch`
+    // until we explicitly resolve.
+    let resolveLaunch: (v: unknown) => void = () => {}
+    chain.performChooserLaunch.mockReturnValue(
+      new Promise((res) => {
+        resolveLaunch = res
+      })
+    )
+
+    const progressStore = useProgressStore()
+    const installationStore = (await import('../stores/installationStore')).useInstallationStore()
+    installationStore.installations = [
+      {
+        id: 'inst-chained-1',
+        name: 'ComfyUI',
+        sourceCategory: 'local',
+        sourceId: 'standalone',
+        createdAt: new Date().toISOString()
+      } as never
+    ]
+
+    // First leg: install op enters the chain → onShowProgress stamps it.
+    const installOpts = progressOpts('inst-chained-1', { autoLaunchOnFinish: true })
+    chain.api!.hooks.onShowProgress(installOpts)
+    expect(installOpts.chainSpan).toBe('install')
+
+    // Seed a finished+ok op so the watcher's predicate sees it and
+    // calls performChooserLaunch (which we've held open above).
+    progressStore.startOperation({
+      installationId: 'inst-chained-1',
+      title: 'Installing',
+      apiCall: () => Promise.resolve({ ok: true } as ActionResult)
+    })
+    const op = progressStore.operations.get('inst-chained-1')!
+    op.finished = true
+    op.result = { ok: true }
+    await vi.waitFor(() => expect(chain.performChooserLaunch).toHaveBeenCalledTimes(1))
+
+    // Second leg: while performChooserLaunch is still pending, the
+    // launch action's `show-progress` arrives. `pendingChainedLaunch`
+    // is still true so the hook stamps the launch span.
+    const launchOpts = progressOpts('inst-chained-1', { triggersInstanceStart: true })
+    chain.api!.hooks.onShowProgress(launchOpts)
+    expect(launchOpts.chainSpan).toBe('launch')
+
+    // After we let the launch promise settle, the .finally() clears
+    // the flag — a subsequent unrelated op must NOT be stamped.
+    resolveLaunch('launched')
+    await Promise.resolve()
+    await Promise.resolve()
+    const unrelated = progressOpts('inst-other')
+    chain.api!.hooks.onShowProgress(unrelated)
+    expect(unrelated.chainSpan).toBeUndefined()
+  })
+
+  it('clears pendingChainedLaunch via the watcher .finally() when performChooserLaunch resolves', async () => {
+    // performChooserLaunch returning 'missing-action' means the launch
+    // never reached handleShowProgress. The .finally() in the watcher
+    // must reset the flag so a later unrelated op isn't mis-stamped.
+    const chain = mountChain()
+    chain.performChooserLaunch.mockResolvedValue('missing-action')
+
+    const progressStore = useProgressStore()
+    const installationStore = (await import('../stores/installationStore')).useInstallationStore()
+    installationStore.installations = [
+      {
+        id: 'inst-noop-1',
+        name: 'ComfyUI',
+        sourceCategory: 'local',
+        sourceId: 'standalone',
+        createdAt: new Date().toISOString()
+      } as never
+    ]
+
+    chain.api!.hooks.onShowProgress(progressOpts('inst-noop-1', { autoLaunchOnFinish: true }))
+    progressStore.startOperation({
+      installationId: 'inst-noop-1',
+      title: 'Installing',
+      apiCall: () => Promise.resolve({ ok: true } as ActionResult)
+    })
+    const op = progressStore.operations.get('inst-noop-1')!
+    op.finished = true
+    op.result = { ok: true }
+    await nextTick()
+    // Let the watcher's .finally() flush.
+    await vi.waitFor(() => expect(chain.performChooserLaunch).toHaveBeenCalled())
+    await Promise.resolve()
+    await Promise.resolve()
+
+    const after = progressOpts('inst-after-missing')
+    chain.api!.hooks.onShowProgress(after)
+    expect(after.chainSpan).toBeUndefined()
+  })
+})
diff --git a/src/renderer/src/panel/useFirstUseChain.ts b/src/renderer/src/panel/useFirstUseChain.ts
index 69d403e3..e72ac338 100644
--- a/src/renderer/src/panel/useFirstUseChain.ts
+++ b/src/renderer/src/panel/useFirstUseChain.ts
@@ -4,7 +4,7 @@ import { useProgressStore } from '../stores/progressStore'
 import { useLauncherPrefs } from '../composables/useLauncherPrefs'
 import { useMigrateAction } from '../composables/useMigrateAction'
 import { useOverlay } from '../composables/useOverlay'
-import type { Installation, ShowProgressOpts } from '../types/ipc'
+import type { FieldOption, Installation, ShowProgressOpts, Source } from '../types/ipc'
 import type { ChooserLaunchOutcome } from './useChooserHandoff'
 import type { FirstUseChainHooks, PanelKey } from './usePanelOverlays'
 
@@ -28,7 +28,7 @@ export interface FirstUseChainOpts {
   /** Re-opens the FirstUseTakeover from the Configure → Back chain.
    *  Owned by usePanelOverlays. Pass `{ initialStep: 'localBranch' }`
    *  so the user lands on the sub-step they came from. */
-  openFirstUseTakeover: (opts?: { initialStep?: 'consent' | 'pick' | 'localBranch' }) => Promise<void>
+  openFirstUseTakeover: (opts?: { initialStep?: 'start' | 'localBranch' }) => Promise<void>
 }
 
 export interface FirstUseChainApi {
@@ -44,9 +44,12 @@ export interface FirstUseChainApi {
   handleFirstUseComplete: () => Promise<void>
   /** FirstUseTakeover `chain-local` emit. Optional payload flags
    *  whether the chain reached us via the Local → Start Fresh
-   *  sub-step (vs the direct no-legacy path). */
+   *  sub-step (vs the direct no-legacy path), and whether the user
+   *  asked for an Express install (skip the Configure screen and run
+   *  Standalone + recommended defaults straight through to the
+   *  install-progress takeover). */
   handleFirstUseChainLocal: (
-    payload?: { cameFromLocalBranch?: boolean }
+    payload?: { cameFromLocalBranch?: boolean; express?: boolean }
   ) => Promise<void>
   /** FirstUseTakeover `chain-migrate` emit. */
   handleFirstUseChainMigrate: () => Promise<void>
@@ -117,6 +120,13 @@ export function useFirstUseChain(opts: FirstUseChainOpts): FirstUseChainApi {
    *  Back link in its Configure footer. */
   const pendingCameFromLocalBranch = ref(false)
 
+  /** One-shot flag raised in the auto-launch watcher just before the
+   *  chained `performChooserLaunch` call. The launch action runs with
+   *  `showProgress: true`, so the resulting `show-progress` comes back
+   *  through `onShowProgress`; reading + clearing this flag there is
+   *  what stamps the launch op as the second leg of the chain. */
+  const pendingChainedLaunch = ref(false)
+
   const hooks: FirstUseChainHooks = {
     shouldForceTakeover: () => chainingFirstUseToNewInstall.value,
     consumeCameFromLocalBranch: () => {
@@ -134,6 +144,9 @@ export function useFirstUseChain(opts: FirstUseChainOpts): FirstUseChainApi {
       // calls leave it untouched.
       if (chainingFirstUseToNewInstall.value && pendingFirstUseAutoLaunchId.value === null) {
         pendingFirstUseAutoLaunchId.value = showOpts.installationId
+        // Stamp the install op as the first leg of a chain so ProgressModal
+        // maps its 0→100% to the unified bar's 0→70% slot.
+        showOpts.chainSpan = 'install'
         // Flip the persisted gate now so the takeover doesn't re-run
         // on the next launch — the overlay handoff doesn't go through
         // InstallWizardModal's close emit.
@@ -147,6 +160,16 @@ export function useFirstUseChain(opts: FirstUseChainOpts): FirstUseChainApi {
       // first-use-only.
       if (showOpts.autoLaunchOnFinish === true && pendingAutoLaunchId.value === null) {
         pendingAutoLaunchId.value = showOpts.installationId
+        showOpts.chainSpan = 'install'
+        return
+      }
+      // Launch leg of the install→launch chain. The watcher set
+      // `pendingChainedLaunch` just before kicking the launch action;
+      // consume it here so ProgressModal maps this op to the unified
+      // bar's 70→100% slot.
+      if (pendingChainedLaunch.value) {
+        pendingChainedLaunch.value = false
+        showOpts.chainSpan = 'launch'
       }
     },
   }
@@ -232,13 +255,31 @@ export function useFirstUseChain(opts: FirstUseChainOpts): FirstUseChainApi {
    *  Tier 3 takeover. The Tier 3 → Tier 3 swap is silent in
    *  `useOverlay`, so the first-use takeover unmounts as the new-install
    *  takeover mounts. The completion flip is deferred to the new-install
-   *  close path (see `handleNewInstallTakeoverClose`). */
+   *  close path (see `handleNewInstallTakeoverClose`).
+   *
+   *  When `payload.express === true`, skip the Configure screen entirely
+   *  and run the same `buildInstallation → addInstallation → show-progress`
+   *  sequence Configure's `handleSave` runs, using the recommended option
+   *  for every non-text field on the Standalone source (the same defaults
+   *  Configure pre-selects). If any step fails, fall back to opening
+   *  Configure so the user sees the actual error rather than a silent
+   *  dead end. */
   async function handleFirstUseChainLocal(
-    payload?: { cameFromLocalBranch?: boolean },
+    payload?: { cameFromLocalBranch?: boolean; express?: boolean },
   ): Promise<void> {
     chainingFirstUseToNewInstall.value = true
     pendingFirstUseAutoLaunchId.value = null
     pendingCameFromLocalBranch.value = payload?.cameFromLocalBranch === true
+
+    if (payload?.express === true) {
+      const expressOk = await runExpressInstall()
+      if (expressOk) return
+      // Fall through to the Configure screen — runExpressInstall already
+      // reset chain bookkeeping on failure.
+      chainingFirstUseToNewInstall.value = true
+      pendingFirstUseAutoLaunchId.value = null
+    }
+
     await opts.switchPanel('new-install', 'first_use')
     // FirstUseTakeover.onUnmounted just pushed `'none'` as the chain
     // swap unmounted it. Re-assert `'post-consent'` so the file-menu
@@ -247,6 +288,92 @@ export function useFirstUseChain(opts: FirstUseChainOpts): FirstUseChainApi {
     window.api.setFirstUseMode('post-consent')
   }
 
+  /** Express install — the "skip Configure" path. Runs the Standalone
+   *  source with the `recommended` option for every non-text field
+   *  (mirroring Configure's `loadFieldOptions` default-selection logic),
+   *  then hands off to the install-progress takeover via
+   *  `handleShowProgress`. Returns `true` on success so the caller
+   *  knows the chain handoff is complete; `false` if any precondition
+   *  failed and the caller should fall back to opening Configure. */
+  async function runExpressInstall(): Promise<boolean> {
+    try {
+      const hardware = await window.api.validateHardware()
+      if (!hardware.supported) {
+        console.warn('[firstUseChain] express: hardware unsupported', hardware)
+        return false
+      }
+
+      const [installDir, sources] = await Promise.all([
+        window.api.getDefaultInstallDir().catch(() => ''),
+        window.api.getSources(),
+      ])
+      const standalone = sources.find((s: Source) => s.id === 'standalone')
+      if (!standalone) {
+        console.warn('[firstUseChain] express: standalone source missing', { sources })
+        return false
+      }
+
+      const selections: Record<string, FieldOption> = {}
+      for (const field of standalone.fields) {
+        if (field.type === 'text') {
+          if (field.defaultValue !== undefined) {
+            selections[field.id] = { value: field.defaultValue, label: field.defaultValue }
+          }
+          continue
+        }
+        const options = await window.api.getFieldOptions(
+          standalone.id,
+          field.id,
+          selections,
+          field.id === 'release' ? { includeLatestStable: true } : undefined,
+        )
+        if (!options || options.length === 0) {
+          console.warn('[firstUseChain] express: no options for field', field.id)
+          return false
+        }
+        const pick = options.find((o) => o.recommended) ?? options[0]
+        if (!pick) return false
+        selections[field.id] = pick
+      }
+
+      const instData = await window.api.buildInstallation(standalone.id, selections)
+      const name = await window.api.getUniqueName('ComfyUI')
+      const installPath = installDir ?? ''
+
+      const result = await window.api.addInstallation({
+        name,
+        installPath,
+        ...instData,
+      })
+      if (!result.ok || !result.entry) {
+        console.warn('[firstUseChain] express: addInstallation failed', result)
+        return false
+      }
+
+      // `onShowProgress` captures `pendingFirstUseAutoLaunchId` from this
+      // call because `chainingFirstUseToNewInstall` is already true — the
+      // auto-launch watcher takes the install through to a running ComfyUI
+      // window the same way the Configure handoff does.
+      await opts.handleShowProgress({
+        installationId: result.entry.id,
+        title: `Installing — ${name}`,
+        apiCall: () => window.api.installInstance(result.entry!.id),
+        autoLaunchOnFinish: true,
+        opKind: 'install',
+      })
+      // `handleShowProgress` swaps the first-use takeover for the
+      // install-progress takeover. Push `'post-consent'` so the file-menu
+      // builder stays locked down for the duration of the install.
+      window.api.setFirstUseMode('post-consent')
+      return true
+    } catch (err) {
+      console.warn('[firstUseChain] express install failed; falling back to Configure', err)
+      chainingFirstUseToNewInstall.value = false
+      pendingFirstUseAutoLaunchId.value = null
+      return false
+    }
+  }
+
   /** InstallWizardModal `back-to-local-branch` emit. Silent Tier 3 → Tier 3
    *  swap that re-opens the FirstUseTakeover on its localBranch
    *  sub-step (the step the user came from). Drops chain bookkeeping so
@@ -402,7 +529,15 @@ export function useFirstUseChain(opts: FirstUseChainOpts): FirstUseChainApi {
           ?? null
       }
       if (inst) {
-        void opts.performChooserLaunch(inst)
+        // Mark the upcoming `show-progress` as the launch leg of the
+        // chain. `onShowProgress` consumes the flag and stamps the op.
+        pendingChainedLaunch.value = true
+        void opts.performChooserLaunch(inst).finally(() => {
+          // Defensive: if the launch never reached `handleShowProgress`
+          // (missing-action / focused-running outcomes) clear the flag
+          // so it can't leak into an unrelated future op.
+          pendingChainedLaunch.value = false
+        })
       }
     },
     { deep: false },
diff --git a/src/renderer/src/panel/usePanelOverlays.ts b/src/renderer/src/panel/usePanelOverlays.ts
index 300c8946..53dc1f94 100644
--- a/src/renderer/src/panel/usePanelOverlays.ts
+++ b/src/renderer/src/panel/usePanelOverlays.ts
@@ -122,7 +122,7 @@ export interface UsePanelOverlaysApi {
   handleProgressClose: () => void
   openFlowTakeover: (component: FlowComponent, entrypoint: string) => Promise<void>
   openFirstUseTakeover: (opts?: {
-    initialStep?: 'consent' | 'pick' | 'localBranch'
+    initialStep?: 'start' | 'localBranch'
   }) => Promise<void>
   dismissTakeoverDirect: () => void
   switchPanel: (panel: PanelKey, entrypoint?: string) => Promise<void>
@@ -222,6 +222,28 @@ export function usePanelOverlays(opts: UsePanelOverlaysOpts): UsePanelOverlaysAp
     const onCancel = (): void => {
       progressStore.cancelOperation(showOpts.installationId)
     }
+    // Pre-seed the operation in the progress store BEFORE swapping the
+    // overlay so `ProgressModal` paints fully populated on its first
+    // frame (op title, "Starting…" status, brand loader). Without this
+    // the modal mounts on a still-empty operation map and renders a
+    // blank/placeholder frame for one tick — the visible flicker users
+    // saw between Continue and the loader. The IPC `apiCall` fires
+    // synchronously from `progressStore.startOperation`, so the install
+    // begins a tick earlier than before; that's fine since the loader
+    // appears in the same swap.
+    const existing = progressStore.operations.get(showOpts.installationId)
+    if (!existing || existing.finished) {
+      progressStore.startOperation({
+        installationId: showOpts.installationId,
+        title: showOpts.title,
+        apiCall: showOpts.apiCall as () => Promise<ActionResult>,
+        cancellable: showOpts.cancellable,
+        returnTo: showOpts.returnTo,
+        opKind: showOpts.opKind,
+        destroysInstance: showOpts.destroysInstance,
+        chainSpan: showOpts.chainSpan,
+      })
+    }
     // Every show-progress op renders as a Tier 3 brand takeover now —
     // delete, copy, migrate, install, update, launch, and snapshot ops
     // share the same loader chrome (BrandTakeoverLayout + glyph +
@@ -256,21 +278,10 @@ export function usePanelOverlays(opts: UsePanelOverlaysOpts): UsePanelOverlaysAp
       )
     }
     await nextTick()
-    // If an in-progress operation already exists for this ID, just show it.
-    const existing = progressStore.operations.get(showOpts.installationId)
-    if (existing && !existing.finished) {
-      progressRef.value?.showOperation(showOpts.installationId)
-      return
-    }
-    progressRef.value?.startOperation({
-      installationId: showOpts.installationId,
-      title: showOpts.title,
-      apiCall: showOpts.apiCall as () => Promise<ActionResult>,
-      cancellable: showOpts.cancellable,
-      returnTo: showOpts.returnTo,
-      opKind: showOpts.opKind,
-      destroysInstance: showOpts.destroysInstance,
-    })
+    // After the overlay swap, ProgressModal exists — point it at the
+    // (already running) operation so its internal `currentId` ref tracks
+    // it for showOperation/auto-close logic.
+    progressRef.value?.showOperation(showOpts.installationId)
   }
 
   function handleProgressClose(): void {
@@ -329,7 +340,7 @@ export function usePanelOverlays(opts: UsePanelOverlaysOpts): UsePanelOverlaysAp
    * fetch runs in parallel with the overlay mount.
    */
   async function openFirstUseTakeover(
-    firstUseOpts?: { initialStep?: 'consent' | 'pick' | 'localBranch' },
+    firstUseOpts?: { initialStep?: 'start' | 'localBranch' },
   ): Promise<void> {
     const statePromise = window.api
       .getFirstUseState()
diff --git a/src/renderer/src/stores/progressStore.test.ts b/src/renderer/src/stores/progressStore.test.ts
index 1ad8b9bc..7ef0d836 100644
--- a/src/renderer/src/stores/progressStore.test.ts
+++ b/src/renderer/src/stores/progressStore.test.ts
@@ -379,4 +379,64 @@ describe('useProgressStore', () => {
       expect(() => store.cleanupOperation('nonexistent')).not.toThrow()
     })
   })
+
+  describe('Operation.chainSpan', () => {
+    it('persists chainSpan on the Operation when set', () => {
+      store.startOperation({
+        installationId: 'inst-1',
+        title: 'Installing — DevFixture',
+        apiCall: () => new Promise<ActionResult>(() => {}),
+        chainSpan: 'install'
+      })
+      expect(store.operations.get('inst-1')?.chainSpan).toBe('install')
+    })
+
+    it('persists chainSpan=launch for the launch leg of a chain', () => {
+      store.startOperation({
+        installationId: 'inst-2',
+        title: 'Launching — DevFixture',
+        apiCall: () => new Promise<ActionResult>(() => {}),
+        chainSpan: 'launch'
+      })
+      expect(store.operations.get('inst-2')?.chainSpan).toBe('launch')
+    })
+
+    it('defaults chainSpan to null when omitted', () => {
+      store.startOperation({
+        installationId: 'inst-3',
+        title: 'Standalone op',
+        apiCall: () => new Promise<ActionResult>(() => {})
+      })
+      // null (not undefined) so the Operation literal stays well-typed.
+      expect(store.operations.get('inst-3')?.chainSpan).toBeNull()
+    })
+
+    it('does not regress globalProgressFor when chainSpan is set', () => {
+      // chainSpan is consumed by ProgressModal.unifiedPercent, NOT by
+      // globalProgressFor. A stepped op with chainSpan='install' at
+      // download(50%) still returns its raw weighted percent — the
+      // 0–70 mapping is applied upstream in the view.
+      store.startOperation({
+        installationId: 'inst-4',
+        title: 'Installing',
+        apiCall: () => new Promise<ActionResult>(() => {}),
+        chainSpan: 'install'
+      })
+      const op = store.operations.get('inst-4')!
+      op.steps = [
+        { phase: 'download', label: 'Download' },
+        { phase: 'extract', label: 'Extract' }
+      ]
+      op.activePhase = 'download'
+      op.activePercent = 50
+
+      const result = store.globalProgressFor(op)
+      // Equal phase weights → download owns 0–50% slot, so 50% of that
+      // slot is ~25% on the bar. The exact figure depends on the weight
+      // table; assert it's mid-bar, not capped at 70.
+      expect(result.percent).toBeGreaterThan(0)
+      expect(result.percent).toBeLessThan(70)
+      expect(result.indeterminate).toBe(false)
+    })
+  })
 })
diff --git a/src/renderer/src/stores/progressStore.ts b/src/renderer/src/stores/progressStore.ts
index b56da1c8..a19cb909 100644
--- a/src/renderer/src/stores/progressStore.ts
+++ b/src/renderer/src/stores/progressStore.ts
@@ -25,6 +25,12 @@ export interface Operation {
    *  ProgressModal's footer can swap Reboot for a no-Reboot finished
    *  state and the success path can auto-detach the host. */
   destroysInstance: boolean
+  /** Mirrors `ShowProgressOpts.chainSpan`. When set, ProgressModal's
+   *  unified bar maps the install leg to 0–70% and the launch leg to
+   *  70–100% so the user sees one continuous 0→100% journey instead of
+   *  the bar hitting 100 mid-install and stalling through the launch
+   *  tail. Standalone ops leave this unset. */
+  chainSpan: 'install' | 'launch' | null
   steps: ProgressStep[] | null
   activePhase: string | null
   activePercent: number
@@ -92,8 +98,9 @@ export const useProgressStore = defineStore('progress', () => {
     returnTo?: string
     opKind?: ShowProgressOpts['opKind']
     destroysInstance?: boolean
+    chainSpan?: ShowProgressOpts['chainSpan']
   }): void {
-    const { installationId, title, apiCall, returnTo, opKind, destroysInstance } = opts
+    const { installationId, title, apiCall, returnTo, opKind, destroysInstance, chainSpan } = opts
 
     cleanupOperation(installationId)
 
@@ -106,6 +113,7 @@ export const useProgressStore = defineStore('progress', () => {
       returnTo,
       opKind: opKind ?? 'generic',
       destroysInstance: !!destroysInstance,
+      chainSpan: chainSpan ?? null,
       steps: null,
       activePhase: null,
       activePercent: -1,
diff --git a/src/renderer/src/views/ChooserView.vue b/src/renderer/src/views/ChooserView.vue
index a3c19942..5c3f563b 100644
--- a/src/renderer/src/views/ChooserView.vue
+++ b/src/renderer/src/views/ChooserView.vue
@@ -115,7 +115,6 @@ function openManage(
   }
   window.api.openInstancePicker({
     installationId: installation.id,
-    mode: 'expanded',
     initialTab: resolvePickerTab(opts.initialTab, 'status'),
     autoAction: opts.autoAction ?? null
   })
@@ -269,21 +268,26 @@ function handleNewInstallClick(): void {
   background: transparent;
 }
 
+.chooser-bg :deep(.brand-beam--2) {
+  left: anchor(center, clamp(39%, calc(52.5vw - 135px), 44%));
+}
+
 .chooser-view {
   /* Fluid centering pattern with a top-spacer floor:
-   *   - Short grid → both spacers grow toward 1fr → cluster centered
-   *   - Tall grid → spacers shrink, but top spacer stops at the clamp
-   *     minimum (~18vh) so the logo/search anchor at a stable upper
-   *     position instead of sliding into the brand-beam at the top
-   *   - Very tall grid → grid still scrolls internally (max-height
-   *     100%) so the cluster + viewport bounds are never breached
+   *   - Short grid (initial state, few tiles) → both spacers grow
+   *     toward 1fr → cluster centered, as before
+   *   - More tiles → spacers shrink symmetrically; top spacer floors
+   *     at ~4vh / 24-56px so the wordmark+search keep getting pushed
+   *     toward the top of the frame and the grid gains rows in-view
+   *   - Very tall grid → grid scrolls internally (max-height 100%)
+   *     so the cluster + viewport bounds are never breached
    *
    * Row layout: [top spacer] [wordmark] [search] [grid] [bottom spacer] */
   flex: 1 1 auto;
   min-height: 0;
   display: grid;
   grid-template-rows:
-    minmax(clamp(72px, 18vh, 180px), 1fr)
+    minmax(clamp(24px, 4vh, 56px), 1fr)
     auto
     auto
     minmax(0, auto)
@@ -291,7 +295,7 @@ function handleNewInstallClick(): void {
   grid-template-columns: minmax(0, 1fr);
   justify-items: center;
   width: 100%;
-  max-width: 1080px;
+  max-width: 1280px;
   padding: 24px;
   row-gap: 32px;
 }
@@ -339,7 +343,10 @@ function handleNewInstallClick(): void {
 .chooser-grid {
   grid-row: 4;
   width: 100%;
-  max-width: 920px;
+  /* 4 fixed tracks @ 280px + 3 × 16px gaps = 1168px. Keeps the 280px
+   * fixed-track contract from the comment below intact while letting
+   * wide viewports surface a 4-up row instead of capping at 3. */
+  max-width: 1168px;
   /* When the row collapses (tall grid in a short viewport), the grid
    * stops growing and scrolls internally. `min-height: 0` + an
    * explicit `max-height: 100%` are required so the grid can't push
diff --git a/src/renderer/src/views/FirstUseTakeover.test.ts b/src/renderer/src/views/FirstUseTakeover.test.ts
index 900292a7..7e7b4143 100644
--- a/src/renderer/src/views/FirstUseTakeover.test.ts
+++ b/src/renderer/src/views/FirstUseTakeover.test.ts
@@ -1,8 +1,9 @@
 /**
- * Consent-screen behaviour tests for FirstUseTakeover.
+ * Start-screen behaviour tests for FirstUseTakeover (merged T&C +
+ * Cloud-vs-Local picker).
  *
  * Scope:
- *   - Get Started button stays disabled until the Terms checkbox is
+ *   - Continue button stays disabled until the Terms checkbox is
  *     checked (legally required affirmative-assent gate).
  *   - The two inline links on the Terms row route to the right docs
  *     (`'eula'` and `'tos'`), and the telemetry Learn-more routes to
@@ -11,7 +12,7 @@
  *
  * Heavy children (BrandTakeoverLayout, ModalShell, TermsModal,
  * WhyTryCloudModal, etc.) are stubbed so the test can focus on the
- * consent-step DOM without dragging in their dependencies.
+ * start-step DOM without dragging in their dependencies.
  */
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
@@ -28,11 +29,22 @@ vi.mock('../components/ModalShell.vue', () => ({
   default: { template: '<div data-testid="stub-modal-shell"><slot /></div>' },
 }))
 vi.mock('../components/ChoiceCard.vue', () => ({
-  default: { template: '<div data-testid="stub-choice-card" />' },
+  default: {
+    template:
+      '<div data-testid="stub-choice-card"><slot name="label-trailing" /><slot /></div>',
+  },
 }))
 vi.mock('../components/WhyTryCloudModal.vue', () => ({
   default: { template: '<div data-testid="stub-why-cloud" />' },
 }))
+vi.mock('../components/ui/Tooltip.vue', () => ({
+  default: {
+    name: 'Tooltip',
+    props: ['text', 'side', 'align', 'delayMs', 'disabled'],
+    template:
+      '<span data-testid="stub-tooltip-wrap" :data-text="text"><slot /></span>',
+  },
+}))
 vi.mock('../components/TermsModal.vue', () => ({
   default: {
     props: ['doc'],
@@ -44,9 +56,6 @@ vi.mock('../components/BrandTakeoverLayout.vue', () => ({
     template: '<div data-testid="stub-brand-layout"><slot /></div>',
   },
 }))
-vi.mock('../components/icons/ComfyWordmark.vue', () => ({
-  default: { template: '<svg data-testid="stub-wordmark" />' },
-}))
 
 import FirstUseTakeover from './FirstUseTakeover.vue'
 
@@ -63,6 +72,7 @@ beforeEach(() => {
     setSetting: vi.fn().mockResolvedValue(undefined),
     getSetting: vi.fn().mockResolvedValue(true),
     getLocale: vi.fn().mockResolvedValue('en'),
+    detectGPU: vi.fn().mockResolvedValue(null),
     setFirstUseMode: vi.fn(),
     closeHostWindow: vi.fn().mockResolvedValue(undefined),
   } as unknown as typeof window.api
@@ -74,20 +84,18 @@ function mountTakeover() {
   })
 }
 
-describe('FirstUseTakeover consent step', () => {
-  it('Get Started is disabled until the Terms checkbox is checked', async () => {
+describe('FirstUseTakeover start step', () => {
+  it('Continue triggers a nudge shake on the ToS row when terms are not accepted', async () => {
     const wrapper = mountTakeover()
-    const accept = wrapper.find('[data-testid="first-use-accept-consent"]')
-    expect(accept.exists()).toBe(true)
-    // Initial state: terms unchecked → button disabled.
-    expect(accept.attributes('disabled')).toBeDefined()
-
-    // Tick the Terms checkbox.
-    const tosCheckbox = wrapper.find(
-      '[data-testid="first-use-consent-tos"] input[type="checkbox"]',
-    )
-    await tosCheckbox.setValue(true)
-    expect(accept.attributes('disabled')).toBeUndefined()
+    const tosRow = wrapper.find('[data-testid="first-use-consent-tos"]')
+    expect(tosRow.classes()).not.toContain('start-consent-row--nudge')
+
+    await wrapper.find('[data-testid="first-use-continue"]').trigger('click')
+    expect(tosRow.classes()).toContain('start-consent-row--nudge')
+
+    // No emit should fire — the click was blocked by the ToS gate.
+    expect(wrapper.emitted('complete-cloud')).toBeFalsy()
+    expect(wrapper.emitted('chain-local')).toBeFalsy()
   })
 
   it('clicking the EULA inline link opens the modal with doc="eula"', async () => {
@@ -112,6 +120,131 @@ describe('FirstUseTakeover consent step', () => {
     expect(modal.attributes('data-doc')).toBe('privacy')
   })
 
+  it('Cloud (i) icon is wrapped in TooltipWrap carrying the whyTryCloud copy', () => {
+    const wrapper = mountTakeover()
+    const infoBtn = wrapper.find('[data-testid="first-use-why-cloud"]')
+    expect(infoBtn.exists()).toBe(true)
+    const tooltip = infoBtn.element.closest(
+      '[data-testid="stub-tooltip-wrap"]',
+    ) as HTMLElement | null
+    expect(tooltip).not.toBeNull()
+    expect(tooltip?.getAttribute('data-text')).toBe('firstUse.whyTryCloud')
+  })
+
+  it('Express-install checkbox is hidden on the default Cloud pick and revealed only after Local is picked', async () => {
+    const wrapper = mountTakeover()
+    // The row stays mounted (reserved layout space, no jump on swap)
+    // but is visually + a11y hidden until Local is picked.
+    const express = () => wrapper.find('[data-testid="first-use-express-install"]')
+    expect(express().exists()).toBe(true)
+    expect(express().classes()).toContain('start-express--hidden')
+    expect(express().attributes('aria-hidden')).toBe('true')
+
+    await wrapper.find('[data-testid="first-use-pick-local"]').trigger('click')
+    expect(express().classes()).not.toContain('start-express--hidden')
+    expect(express().attributes('aria-hidden')).toBe('false')
+
+    await wrapper.find('[data-testid="first-use-pick-cloud"]').trigger('click')
+    expect(express().classes()).toContain('start-express--hidden')
+    expect(express().attributes('aria-hidden')).toBe('true')
+  })
+
+  it('emits `chain-local` with `express: true` when Local is picked with Express on (no legacy desktop)', async () => {
+    const wrapper = mountTakeover()
+    // Accept T&C (Continue is gated on it), pick Local, leave Express
+    // checked (default), press Continue.
+    await wrapper
+      .find('[data-testid="first-use-consent-tos"] input[type="checkbox"]')
+      .setValue(true)
+    await wrapper.find('[data-testid="first-use-pick-local"]').trigger('click')
+    await wrapper.find('[data-testid="first-use-continue"]').trigger('click')
+
+    const emitted = wrapper.emitted('chain-local')
+    expect(emitted).toBeTruthy()
+    expect(emitted![0]).toEqual([{ express: true }])
+  })
+
+  it('emits `chain-local` with `express: false` when Express is unticked', async () => {
+    const wrapper = mountTakeover()
+    await wrapper
+      .find('[data-testid="first-use-consent-tos"] input[type="checkbox"]')
+      .setValue(true)
+    await wrapper.find('[data-testid="first-use-pick-local"]').trigger('click')
+    await wrapper
+      .find('[data-testid="first-use-express-install"] input[type="checkbox"]')
+      .setValue(false)
+    await wrapper.find('[data-testid="first-use-continue"]').trigger('click')
+
+    const emitted = wrapper.emitted('chain-local')
+    expect(emitted).toBeTruthy()
+    expect(emitted![0]).toEqual([{ express: false }])
+  })
+
+  it('Express takes precedence over hasLegacyDesktop — emits `chain-local` with `express: true` instead of opening the localBranch sub-step', async () => {
+    const wrapper = mountTakeover()
+    // Simulate the host telling the takeover that a Legacy Desktop
+    // install was detected (normally plumbed via `getFirstUseState()`).
+    await (wrapper.vm as unknown as { open: (opts: { hasLegacyDesktop: boolean }) => Promise<void> }).open({
+      hasLegacyDesktop: true,
+    })
+    await wrapper
+      .find('[data-testid="first-use-consent-tos"] input[type="checkbox"]')
+      .setValue(true)
+    await wrapper.find('[data-testid="first-use-pick-local"]').trigger('click')
+    await wrapper.find('[data-testid="first-use-continue"]').trigger('click')
+
+    const emitted = wrapper.emitted('chain-local')
+    expect(emitted).toBeTruthy()
+    expect(emitted![0]).toEqual([{ express: true }])
+  })
+
+  it('hasLegacyDesktop + Express OFF routes to the localBranch sub-step (migrate-vs-fresh fork preserved)', async () => {
+    const wrapper = mountTakeover()
+    await (wrapper.vm as unknown as { open: (opts: { hasLegacyDesktop: boolean }) => Promise<void> }).open({
+      hasLegacyDesktop: true,
+    })
+    await wrapper
+      .find('[data-testid="first-use-consent-tos"] input[type="checkbox"]')
+      .setValue(true)
+    await wrapper.find('[data-testid="first-use-pick-local"]').trigger('click')
+    await wrapper
+      .find('[data-testid="first-use-express-install"] input[type="checkbox"]')
+      .setValue(false)
+    await wrapper.find('[data-testid="first-use-continue"]').trigger('click')
+
+    // No chain-local fires — the user lands on the localBranch sub-step
+    // to make the migrate-vs-fresh decision.
+    expect(wrapper.emitted('chain-local')).toBeFalsy()
+    expect(wrapper.find('[data-testid="first-use-local-migrate"]').exists()).toBe(true)
+  })
+
+  it('emits `complete-cloud` (not `chain-local`) when Cloud is picked, regardless of Express', async () => {
+    const wrapper = mountTakeover()
+    await wrapper
+      .find('[data-testid="first-use-consent-tos"] input[type="checkbox"]')
+      .setValue(true)
+    // Cloud is the default selection — just press Continue.
+    await wrapper.find('[data-testid="first-use-continue"]').trigger('click')
+
+    expect(wrapper.emitted('complete-cloud')).toBeTruthy()
+    expect(wrapper.emitted('chain-local')).toBeFalsy()
+  })
+
+  it('Continue button switches to the loading copy + becomes disabled while Continue is in flight', async () => {
+    const wrapper = mountTakeover()
+    await wrapper
+      .find('[data-testid="first-use-consent-tos"] input[type="checkbox"]')
+      .setValue(true)
+    const btn = wrapper.find('[data-testid="first-use-continue"]')
+    expect(btn.text()).toBe('firstUse.startContinue')
+    // Click — the express path's emit unmounts in real PanelApp, but in
+    // the isolated test we stay mounted, so the busy copy persists.
+    await btn.trigger('click')
+    expect(btn.text()).toBe('firstUse.startContinueBusy')
+    expect(btn.attributes('disabled')).toBeDefined()
+    expect(btn.attributes('aria-busy')).toBe('true')
+  })
+
   it('closing the terms modal clears termsDoc (modal unmounts)', async () => {
     const wrapper = mountTakeover()
     await wrapper.find('[data-testid="first-use-eula-link"]').trigger('click')
diff --git a/src/renderer/src/views/FirstUseTakeover.vue b/src/renderer/src/views/FirstUseTakeover.vue
index 76775ae5..d9720dfa 100644
--- a/src/renderer/src/views/FirstUseTakeover.vue
+++ b/src/renderer/src/views/FirstUseTakeover.vue
@@ -9,23 +9,29 @@
  * `openFirstUseTakeover` for the host-side wiring.
  *
  * Step ordering:
- *   1. `consent` — T&C acknowledgement + telemetry consent toggle on a
- *                  single page. Accept-T&C button advances.
+ *   1. `start`   — Merged T&C + Cloud-vs-Local picker on a single page.
+ *                  T&C + telemetry checkboxes, an Express-Install
+ *                  opt-out modifier, and two radio cards (Cloud
+ *                  pre-selected). A single Continue commit persists
+ *                  telemetry, fires fork_chosen, and routes to the
+ *                  next step. Cancel closes the host window.
  *   2. `mirrors` — Only inserted when the resolved locale starts with
  *                  'zh'. Reuses the existing `chineseMirrorsSuggest*`
  *                  copy in en/zh + the `useChineseMirrors` setting; we
  *                  flip the global flag through `setSetting`, no new
  *                  per-source override surface yet.
  *                  `chineseMirrorsPrompted` is also set so the
- *                  prompt machinery doesn't re-fire later.
- *   3. `pick`    — Cloud-vs-Local card picker. Cloud emits `complete`
- *                  immediately (the chooser body underneath is what the
- *                  user lands on, where they can pick the cloud install
- *                  to launch). Local emits `chain-local` so the host
- *                  swaps this takeover for the new-install Tier 3
- *                  takeover (Tier 3 → Tier 3 swap is silent in
- *                  `useOverlay`); the host then marks completion when
- *                  new-install ends successfully.
+ *                  prompt machinery doesn't re-fire later. After the
+ *                  user picks, `routePostStart` resumes the fork
+ *                  routing from step 1.
+ *   3. (routing) — From step 1 (or post-mirrors): Cloud emits
+ *                  `complete-cloud` immediately. Local emits
+ *                  `chain-local` so the host swaps this takeover for
+ *                  the new-install Tier 3 takeover (Tier 3 → Tier 3
+ *                  swap is silent in `useOverlay`); the host marks
+ *                  completion when new-install ends successfully.
+ *                  Local + Legacy Desktop detected routes to the
+ *                  `localBranch` sub-step first.
  *
  * The takeover stays a pure stepper — it does NOT call `setSetting`
  * for `firstUseCompleted` itself; the host owns that flip so the
@@ -36,18 +42,18 @@
  * locale; the host calls it post-mount the same way the flow modals
  * are reset.
  */
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
-import { Check, Copy, FolderInput, Info } from 'lucide-vue-next'
+import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
+import { Check, Copy, FolderInput, Info, Loader2 } from 'lucide-vue-next'
 import TakeoverHeader from '../components/TakeoverHeader.vue'
 import ModalShell from '../components/ModalShell.vue'
 import ChoiceCard from '../components/ChoiceCard.vue'
 import WhyTryCloudModal from '../components/WhyTryCloudModal.vue'
 import TermsModal from '../components/TermsModal.vue'
+import Tooltip from '../components/ui/Tooltip.vue'
 import BrandTakeoverLayout from '../components/BrandTakeoverLayout.vue'
-import ComfyWordmark from '../components/icons/ComfyWordmark.vue'
 import { emitTelemetryAction } from '../lib/telemetry'
 
-type Step = 'consent' | 'mirrors' | 'pick' | 'localBranch'
+type Step = 'start' | 'mirrors' | 'localBranch'
 
 const emit = defineEmits<{
   /** Cloud branch explicitly picked at the cloud-vs-local fork. Host
@@ -66,8 +72,11 @@ const emit = defineEmits<{
    *  happens inline on the Configure screen now. The optional payload
    *  flags whether the chain was reached via the Local → Start Fresh
    *  sub-step (vs. the direct no-legacy path) so the Configure screen
-   *  can surface a Back link to return the user to localBranch. */
-  'chain-local': [payload?: { cameFromLocalBranch?: boolean }]
+   *  can surface a Back link to return the user to localBranch, and
+   *  whether the user opted into Express Install (skip Configure and
+   *  run Standalone + recommended defaults straight through to the
+   *  install-progress takeover). */
+  'chain-local': [payload?: { cameFromLocalBranch?: boolean; express?: boolean }]
   /** Local-branch follow-up: a Legacy Desktop install was detected
    *  and the user chose to migrate it instead of installing fresh.
    *  Host runs the migration flow (`useMigrateAction.confirmMigration`
@@ -78,9 +87,27 @@ const emit = defineEmits<{
   'chain-migrate': []
 }>()
 
-const step = ref<Step>('consent')
+const step = ref<Step>('start')
 const telemetryEnabled = ref(true)
 const locale = ref('en')
+/** Cloud-vs-Local selection picked on the merged start screen.
+ *  Cloud is the brand-anchor card (glow + beam target) so it ships
+ *  pre-selected — users can flip to Local before pressing Continue. */
+const pickedChoice = ref<'cloud' | 'local'>('cloud')
+/** Express-install opt-out modifier on the start screen. Pre-ticked.
+ *  Functional wiring (skipping optional setup steps) lands separately;
+ *  for now the value is captured for telemetry only. */
+const expressInstall = ref(true)
+/** Detected GPU vendor — populated by `window.api.detectGPU()` on
+ *  `open()`. Surfaces as an inline confirmation line under the Express
+ *  checkbox so users on the wrong hardware can untick Express before
+ *  the install kicks off. `null` when detection fails or returns no
+ *  supported GPU; in that case the hint is suppressed and Express
+ *  behaves as before (recommended-first picks downstream). */
+const detectedGpuLabel = ref<string | null>(null)
+const showGpuHint = computed(
+  () => pickedChoice.value === 'local' && expressInstall.value && detectedGpuLabel.value !== null
+)
 /** Funnel-completion bookkeeping for `desktop2.first_use.completed`.
  *  `mountedAt` is reset in `open()` so a takeover replay measures
  *  duration from the replay, not from the original mount.
@@ -100,12 +127,12 @@ function emitCompleted(exitPath: 'cloud' | 'local-new' | 'local-migrate' | 'skip
   })
 }
 /** When the host detects prior usage of the launcher (any
- *  non-cloud, non-legacy-desktop install present), the
- *  cloud-vs-local pick step is suppressed: the user's already made
- *  the choice, no need to re-litigate. The takeover stops at consent
- *  (and the optional China-mirror sub-step) and emits `complete`
- *  instead of advancing to `pick`. Detection lives in main —
- *  `window.api.getFirstUseState()` — and is plumbed in via `open()`. */
+ *  non-cloud, non-legacy-desktop install present), the cloud-vs-local
+ *  pick is suppressed and Continue routes straight to `complete-skip`
+ *  via `routePostStart`. T&C still resets on every `open()` — explicit
+ *  re-consent is required on every takeover replay regardless of
+ *  `skipPick`. Detection lives in main (`getFirstUseState()`) and is
+ *  plumbed in via `open()`. */
 const skipPick = ref(false)
 /** When a Legacy Desktop install is detected on the machine
  *  (auto-tracked at startup as `sourceId === 'desktop'`),
@@ -125,6 +152,16 @@ const termsDoc = ref<'eula' | 'tos' | 'privacy' | 'notices' | null>(null)
  *  telemetry checkbox is a separate, optional opt-in (see
  *  `telemetryEnabled`). */
 const acceptedTos = ref(false)
+/** True while Continue's downstream work (telemetry persist + Express
+ *  prep IPC chain) is in flight. Drives the button's spinner + disabled
+ *  state so the user gets feedback instead of staring at an unchanged
+ *  screen during the multi-IPC express-install pre-roll. */
+const isContinuing = ref(false)
+/** Briefly true when the user clicks Continue without accepting ToS —
+ *  drives a shake animation on the consent row so the required checkbox
+ *  is impossible to miss even on tall viewports. */
+const tosNudge = ref(false)
+let nudgeTimer: ReturnType<typeof setTimeout> | undefined
 
 const isChinese = computed(() => locale.value.startsWith('zh'))
 
@@ -133,57 +170,88 @@ const isChinese = computed(() => locale.value.startsWith('zh'))
  *  entrance animation plays once on overlay open, not on every internal
  *  step swap. Mirrors still ships as `ModalShell` until it gets the
  *  brand treatment too. */
-const isBrandStep = computed(
-  () =>
-    step.value === 'consent' ||
-    step.value === 'pick' ||
-    step.value === 'localBranch'
-)
+const isBrandStep = computed(() => step.value === 'start' || step.value === 'localBranch')
 
-/** Cancel on the consent step closes the host window. The figma's
- *  Cancel affordance maps to the standard desktop-app "Decline"
- *  pattern — user opted out of T&Cs, so we don't persist anything
- *  (telemetry pref stays at its prior value; `firstUseCompleted`
- *  stays false so the consent step re-surfaces on next launch). */
-function cancelConsent(): void {
-  emitTelemetryAction('desktop2.first_use.consent_decision', {
-    decision: 'cancel',
-    telemetry_enabled: telemetryEnabled.value,
-    locale: locale.value
-  })
-  void window.api.closeHostWindow()
+/** Single Continue commit for the merged start screen: T&C acceptance,
+ *  telemetry pref, fork choice, and the Express-install modifier all
+ *  resolve in one click. Telemetry persists immediately so a mid-flow
+ *  cancel still respects the user's choice (the `firstUseCompleted`
+ *  gate is separate — re-running the takeover surfaces the toggle in
+ *  its current persisted state, not as a freshly-defaulted opt-in).
+ *  China-mirror sub-step still runs first when the locale calls for
+ *  it; the post-mirror branch reuses the same routing logic. */
+function nudgeTos(): void {
+  if (acceptedTos.value) return
+  tosNudge.value = true
+  clearTimeout(nudgeTimer)
+  nudgeTimer = setTimeout(() => {
+    tosNudge.value = false
+  }, 600)
 }
 
-/** Step 1 → next: telemetry persists immediately so a mid-flow cancel
- *  still respects the user's choice (the `firstUseCompleted` gate is
- *  separate — re-running the takeover surfaces the toggle in its
- *  current persisted state, not as a freshly-defaulted opt-in). */
-async function acceptConsent(): Promise<void> {
+async function onContinue(): Promise<void> {
+  if (isContinuing.value) return
+  if (!acceptedTos.value) {
+    nudgeTos()
+    return
+  }
+  // Keep `isContinuing` true past `routePostStart()` because the chain
+  // handlers (express prep, cloud auto-launch, new-install swap) all
+  // either unmount this takeover or swap to a sub-step within ms. The
+  // China-mirrors branch is the only path that lingers on this component
+  // post-Continue, so it explicitly clears the flag on its return.
+  isContinuing.value = true
+
   await window.api.setSetting('telemetryEnabled', telemetryEnabled.value)
-  // `consent_decision` (not `consent_accepted`) because this fires for
-  // both opt-in and opt-out — the `decision` prop says which one.
+
   emitTelemetryAction('desktop2.first_use.consent_decision', {
     decision: telemetryEnabled.value ? 'accept' : 'decline',
     telemetry_enabled: telemetryEnabled.value,
     locale: locale.value
   })
-  // skipPick suppresses the pick step entirely. China-mirror sub-step
-  // still runs first when the locale calls for it, then the takeover
-  // emits `complete-skip` (returning user — no implicit cloud launch)
-  // instead of advancing to `pick`.
+  emitTelemetryAction('desktop2.first_use.fork_chosen', {
+    choice: pickedChoice.value,
+    has_legacy_desktop: hasLegacyDesktop.value,
+    express_install: expressInstall.value
+  })
+
   if (isChinese.value) {
     step.value = 'mirrors'
-  } else if (skipPick.value) {
+    isContinuing.value = false
+    return
+  }
+
+  routePostStart()
+}
+
+/** Post-start routing — shared by `onContinue` (non-China path) and
+ *  `chooseMirrors` (China path, after mirrors prompt). Honours
+ *  `skipPick` for returning users by short-circuiting to `complete-skip`
+ *  regardless of which card was selected. */
+function routePostStart(): void {
+  if (skipPick.value) {
     emitCompleted('skipped')
     emit('complete-skip')
+    return
+  }
+  if (pickedChoice.value === 'cloud') {
+    emitCompleted('cloud')
+    emit('complete-cloud')
+  } else if (hasLegacyDesktop.value && !expressInstall.value) {
+    // Express takes precedence: when checked, skip the migrate-vs-fresh
+    // sub-step and head straight to the express Standalone install. Only
+    // surface the localBranch fork when Express is unticked.
+    step.value = 'localBranch'
+    isContinuing.value = false
   } else {
-    step.value = 'pick'
+    emitCompleted('local-new')
+    emit('chain-local', { express: expressInstall.value })
   }
 }
 
-/** Step 2 — the China-mirror prompt always advances regardless of
- *  the user's pick; only the persisted `useChineseMirrors` flag
- *  differs. `chineseMirrorsPrompted` is set in both branches so the
+/** China-mirror prompt always advances regardless of the user's pick;
+ *  only the persisted `useChineseMirrors` flag differs.
+ *  `chineseMirrorsPrompted` is set in both branches so the
  *  `suggest-chinese-mirrors` listener won't re-fire later. */
 async function chooseMirrors(useMirrors: boolean): Promise<void> {
   await Promise.all([
@@ -191,39 +259,7 @@ async function chooseMirrors(useMirrors: boolean): Promise<void> {
     window.api.setSetting('chineseMirrorsPrompted', true)
   ])
   emitTelemetryAction('desktop2.first_use.mirrors_chosen', { use_mirrors: useMirrors })
-  if (skipPick.value) {
-    emitCompleted('skipped')
-    emit('complete-skip')
-  } else {
-    step.value = 'pick'
-  }
-}
-
-function pickCloud(): void {
-  emitTelemetryAction('desktop2.first_use.fork_chosen', {
-    choice: 'cloud',
-    has_legacy_desktop: hasLegacyDesktop.value
-  })
-  emitCompleted('cloud')
-  emit('complete-cloud')
-}
-
-/** Local branch — when a Legacy Desktop install is on the machine
- *  the user gets a Migrate-vs-Install-new sub-step before the chain
- *  fires; otherwise we go straight to the new-install chain.
- *  Detection (`hasLegacyDesktop`) is computed by main and plumbed in
- *  via `open()`. */
-function pickLocal(): void {
-  emitTelemetryAction('desktop2.first_use.fork_chosen', {
-    choice: 'local',
-    has_legacy_desktop: hasLegacyDesktop.value
-  })
-  if (hasLegacyDesktop.value) {
-    step.value = 'localBranch'
-  } else {
-    emitCompleted('local-new')
-    emit('chain-local')
-  }
+  routePostStart()
 }
 
 function openWhyCloud(): void {
@@ -239,7 +275,11 @@ function dismissWhyCloud(action: 'maybe_later' | 'dismiss'): void {
 function onWhyCloudTryCloud(): void {
   whyCloudOpen.value = false
   emitTelemetryAction('desktop2.first_use.why_cloud_action', { action: 'try_cloud' })
-  pickCloud()
+  // "Try Cloud" inside the explainer modal flips the start-screen
+  // selection to Cloud but leaves the user on the screen so they can
+  // accept T&C and press Continue. The legal gate is non-negotiable —
+  // we can't auto-commit on the user's behalf.
+  pickedChoice.value = 'cloud'
 }
 
 function chooseMigrate(): void {
@@ -248,6 +288,35 @@ function chooseMigrate(): void {
   emit('chain-migrate')
 }
 
+/** Radiogroup arrow-key handler for the Cloud/Local cards. WAI-ARIA
+ *  APG §3.15: arrow keys cycle the checked radio and move DOM focus
+ *  along with it. Without this, keyboard-only users can't switch
+ *  between the two cards. */
+function onStartCardsKeydown(e: KeyboardEvent): void {
+  const target = e.target as HTMLElement | null
+  if (!target?.closest('[role="radio"]')) return
+  const order = ['cloud', 'local'] as const
+  const currentIndex = order.indexOf(pickedChoice.value)
+  let next: number
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+    next = (currentIndex + 1) % order.length
+  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+    next = (currentIndex - 1 + order.length) % order.length
+  } else {
+    return
+  }
+  const nextChoice = order[next]
+  if (!nextChoice) return
+  e.preventDefault()
+  pickedChoice.value = nextChoice
+  void nextTick(() => {
+    const radios = (e.currentTarget as HTMLElement | null)?.querySelectorAll<HTMLElement>(
+      '[role="radio"]'
+    )
+    radios?.[next]?.focus()
+  })
+}
+
 function chooseInstallNew(): void {
   emitTelemetryAction('desktop2.first_use.local_branch_chosen', { choice: 'install_new' })
   // Skip the dedicated name screen — naming now happens inline on the
@@ -267,17 +336,19 @@ interface OpenOpts {
   hasLegacyDesktop?: boolean
   /** Skip ahead to a specific brand step on open. Used by the
    *  Configure → Back chain to land the user back on the localBranch
-   *  sub-step instead of restarting at consent. Defaults to 'consent'. */
-  initialStep?: 'consent' | 'pick' | 'localBranch'
+   *  sub-step instead of restarting at start. Defaults to 'start'. */
+  initialStep?: 'start' | 'localBranch'
 }
 
 async function open(opts: OpenOpts = {}): Promise<void> {
-  step.value = opts.initialStep ?? 'consent'
+  step.value = opts.initialStep ?? 'start'
   skipPick.value = opts.skipPick === true
   hasLegacyDesktop.value = opts.hasLegacyDesktop === true
   whyCloudOpen.value = false
   termsDoc.value = null
   acceptedTos.value = false
+  pickedChoice.value = 'cloud'
+  expressInstall.value = true
   // Reset funnel-completion bookkeeping so a takeover replay measures
   // duration / steps from the replay, not from the original mount.
   mountedAt = Date.now()
@@ -294,6 +365,10 @@ async function open(opts: OpenOpts = {}): Promise<void> {
   const existing = (await window.api.getSetting('telemetryEnabled')) as boolean | undefined
   telemetryEnabled.value = existing !== false
   locale.value = await window.api.getLocale().catch(() => 'en')
+  detectedGpuLabel.value = await window.api
+    .detectGPU()
+    .then((g) => g?.label ?? null)
+    .catch(() => null)
 }
 
 onMounted(() => {
@@ -307,19 +382,19 @@ onMounted(() => {
 /**
  * Push the current step to main as the host's `firstUseMode` so:
  *   - `buildTitlePopupMenuItems` can surface the Skip Onboarding entry
- *     once we're past consent (`'post-consent'`).
+ *     once we're past the merged start step (`'post-consent'`).
  *   - The title bar can lock down during `'consent-lockdown'`.
  *
  * `immediate: true` makes the very first mount fire the watcher so the
- * initial step (`'consent'`) lands on the host without waiting for a
- * step transition. The `localBranch` sub-step counts as `post-consent`
- * — the user has already accepted T&Cs and the menu's escape hatch
- * stays available there.
+ * initial step (`'start'`) lands on the host without waiting for a
+ * step transition. The merged start screen still gates T&C, so
+ * lockdown applies until the user presses Continue and the takeover
+ * advances to mirrors / localBranch / completion.
  */
 watch(
   step,
   (current) => {
-    const mode = current === 'consent' ? 'consent-lockdown' : 'post-consent'
+    const mode = current === 'start' ? 'consent-lockdown' : 'post-consent'
     window.api.setFirstUseMode(mode)
     stepsSeen.add(current)
     emitTelemetryAction('desktop2.first_use.step_viewed', {
@@ -332,6 +407,7 @@ watch(
 )
 
 onUnmounted(() => {
+  clearTimeout(nudgeTimer)
   // Clear the host's `firstUseMode` whenever the takeover unmounts,
   // regardless of why (Cloud-branch
   // completion, Local-branch chain swap, file-menu Skip Onboarding,
@@ -347,94 +423,152 @@ defineExpose({ open })
 </script>
 
 <template>
-  <BrandTakeoverLayout v-if="isBrandStep" :vignette="step === 'pick'">
-    <!-- Step 1: T&C + telemetry consent. Brand-wrapped: wordmark
-         centered, two square brand checkboxes (T&C + telemetry), then
-         the Get Started / Cancel action row. Full policy text moves
-         into TermsModal opened by either Learn more link. -->
-    <div v-if="step === 'consent'" class="brand-hero consent-hero">
-      <ComfyWordmark class="consent-wordmark" aria-hidden="true" />
-      <div class="consent-checkboxes">
-        <label class="brand-checkbox" data-testid="first-use-consent-tos">
-          <input v-model="acceptedTos" type="checkbox" />
-          <span class="brand-checkbox__text">
-            <span class="brand-checkbox__title">{{ $t('firstUse.consentTosTitle') }}</span>
-            <span class="brand-checkbox__hint">
-              {{ $t('firstUse.consentTosHintPrefix') }}
-              <button
-                type="button"
-                class="brand-checkbox__link"
-                data-testid="first-use-eula-link"
-                @click.prevent="termsDoc = 'eula'"
-              >{{ $t('firstUse.eulaLinkLabel') }}</button>
-              {{ $t('firstUse.consentTosHintSep') }}
-              <button
-                type="button"
-                class="brand-checkbox__link"
-                data-testid="first-use-tos-link"
-                @click.prevent="termsDoc = 'tos'"
-              >{{ $t('firstUse.tosLinkLabel') }}</button>{{ $t('firstUse.consentTosHintSuffix') }}
-            </span>
-          </span>
-        </label>
-        <label class="brand-checkbox" data-testid="first-use-consent-telemetry">
-          <input v-model="telemetryEnabled" type="checkbox" />
-          <span class="brand-checkbox__text">
-            <span class="brand-checkbox__title">{{ $t('firstUse.consentTelemetryTitle') }}</span>
-            <span class="brand-checkbox__hint">
-              {{ $t('firstUse.consentTelemetryHint') }}
-              <button
-                type="button"
-                class="brand-checkbox__link"
-                data-testid="first-use-telemetry-learn-more"
-                @click.prevent="termsDoc = 'privacy'"
-              >{{ $t('common.learnMore') }}</button>
+  <BrandTakeoverLayout v-if="isBrandStep" :vignette="step === 'start'">
+    <!-- Step 1: Merged start screen. Wordmark on top, Cloud-vs-Local
+         radio cards in the middle, Express-Install opt-out modifier,
+         then the legal/telemetry checkboxes and the Continue / Cancel
+         action row. T&C must be accepted before Continue activates. -->
+    <div v-if="step === 'start'" class="start-screen">
+      <div class="brand-hero start-hero">
+        <h1 class="brand-title">{{ $t('firstUse.pickTitle') }}</h1>
+        <p class="brand-lead">{{ $t('firstUse.pickLead') }}</p>
+        <div
+          class="start-cards"
+          role="radiogroup"
+          :aria-label="$t('firstUse.pickTitle')"
+          @keydown="onStartCardsKeydown"
+        >
+          <ChoiceCard
+            class="start-card-cloud"
+            selectable
+            :selected="pickedChoice === 'cloud'"
+            glow
+            :label="$t('cloud.label')"
+            :tagline="$t('firstUse.cloudTagline')"
+            :description="$t('firstUse.cloudDesc')"
+            data-testid="first-use-pick-cloud"
+            @click="pickedChoice = 'cloud'"
+          >
+            <template #label-trailing>
+              <Tooltip :text="$t('firstUse.whyTryCloud')">
+                <button
+                  type="button"
+                  class="start-cloud-info"
+                  :aria-label="$t('firstUse.whyTryCloud')"
+                  data-testid="first-use-why-cloud"
+                  @click.stop="openWhyCloud"
+                >
+                  <Info :size="14" />
+                </button>
+              </Tooltip>
+            </template>
+          </ChoiceCard>
+          <ChoiceCard
+            selectable
+            :selected="pickedChoice === 'local'"
+            :label="$t('firstUse.localLabel')"
+            :tagline="$t('firstUse.localTagline')"
+            :description="$t('firstUse.localDesc')"
+            data-testid="first-use-pick-local"
+            @click="pickedChoice = 'local'"
+          />
+        </div>
+        <label
+          class="brand-checkbox start-express"
+          :class="{ 'start-express--hidden': pickedChoice !== 'local' }"
+          :aria-hidden="pickedChoice !== 'local'"
+          data-testid="first-use-express-install"
+        >
+          <input
+            v-model="expressInstall"
+            type="checkbox"
+            :tabindex="pickedChoice === 'local' ? 0 : -1"
+          />
+          <span class="start-express__body">
+            <span class="start-express__label">{{ $t('firstUse.expressInstallLine') }}</span>
+            <span
+              class="start-express__gpu-hint"
+              :class="{ 'start-express__gpu-hint--hidden': !showGpuHint }"
+              :aria-hidden="!showGpuHint"
+              data-testid="first-use-express-gpu-hint"
+            >
+              <template v-if="detectedGpuLabel">
+                {{ $t('firstUse.expressGpuHintPrefix')
+                }}<span class="start-express__gpu-vendor">{{ detectedGpuLabel }}</span
+                >{{ $t('firstUse.expressGpuHintSuffix') }}
+              </template>
+              <template v-else>&nbsp;</template>
             </span>
           </span>
         </label>
       </div>
-      <div class="consent-actions">
-        <button
-          class="brand-primary consent-get-started"
-          type="button"
-          data-testid="first-use-accept-consent"
-          :disabled="!acceptedTos"
-          @click="acceptConsent"
-        >
-          {{ $t('firstUse.consentGetStarted') }}
-        </button>
-        <button
-          class="brand-ghost consent-cancel"
-          type="button"
-          data-testid="first-use-cancel-consent"
-          @click="cancelConsent"
-        >
-          {{ $t('common.cancel') }}
-        </button>
-      </div>
-    </div>
-
-    <!-- Step 3: Cloud-vs-Local pick. -->
-    <div v-else-if="step === 'pick'" class="brand-hero">
-      <h1 class="brand-title">{{ $t('firstUse.pickTitle') }}</h1>
-      <p class="brand-lead">{{ $t('firstUse.pickLead') }}</p>
-      <div class="pick-grid">
-        <ChoiceCard
-          class="pick-card-cloud"
-          :label="$t('cloud.label')"
-          :tagline="$t('firstUse.cloudTagline')"
-          :description="$t('firstUse.cloudDesc')"
-          glow
-          data-testid="first-use-pick-cloud"
-          @click="pickCloud"
-        />
-        <ChoiceCard
-          :label="$t('firstUse.localLabel')"
-          :tagline="$t('firstUse.localTagline')"
-          :description="$t('firstUse.localDesc')"
-          data-testid="first-use-pick-local"
-          @click="pickLocal"
-        />
+      <div class="start-bottom">
+        <div class="start-consent-strip">
+          <div class="start-consent-rows">
+            <label
+              class="brand-checkbox start-consent-row"
+              :class="{ 'start-consent-row--nudge': tosNudge }"
+              data-testid="first-use-consent-tos"
+            >
+              <input v-model="acceptedTos" type="checkbox" />
+              <span class="start-consent-row__text">
+                {{ $t('firstUse.consentTosHintPrefix') }}
+                <button
+                  type="button"
+                  class="brand-checkbox__link"
+                  data-testid="first-use-eula-link"
+                  @click.prevent="termsDoc = 'eula'"
+                >
+                  {{ $t('firstUse.eulaLinkLabel') }}
+                </button>
+                {{ $t('firstUse.consentTosHintSep') }}
+                <button
+                  type="button"
+                  class="brand-checkbox__link"
+                  data-testid="first-use-tos-link"
+                  @click.prevent="termsDoc = 'tos'"
+                >
+                  {{ $t('firstUse.tosLinkLabel') }}</button
+                >{{ $t('firstUse.consentTosHintSuffix') }}
+              </span>
+            </label>
+            <label
+              class="brand-checkbox start-consent-row"
+              data-testid="first-use-consent-telemetry"
+            >
+              <input v-model="telemetryEnabled" type="checkbox" />
+              <span class="start-consent-row__text">
+                {{ $t('firstUse.consentTelemetryHint') }}
+                <button
+                  type="button"
+                  class="brand-checkbox__link"
+                  data-testid="first-use-telemetry-learn-more"
+                  @click.prevent="termsDoc = 'privacy'"
+                >
+                  {{ $t('common.learnMore') }}
+                </button>
+              </span>
+            </label>
+          </div>
+          <button
+            class="brand-primary start-continue"
+            type="button"
+            data-testid="first-use-continue"
+            :disabled="isContinuing"
+            :aria-busy="isContinuing"
+            @click="onContinue"
+          >
+            <Loader2
+              v-if="isContinuing"
+              :size="16"
+              class="start-continue__spinner"
+              aria-hidden="true"
+            />
+            <span>{{
+              isContinuing ? $t('firstUse.startContinueBusy') : $t('firstUse.startContinue')
+            }}</span>
+          </button>
+        </div>
       </div>
     </div>
 
@@ -485,21 +619,11 @@ defineExpose({ open })
 
     <template #footer-left>
       <button
-        v-if="step === 'pick'"
-        class="pick-why-cloud"
-        type="button"
-        data-testid="first-use-why-cloud"
-        @click="openWhyCloud"
-      >
-        <Info :size="14" />
-        <span>{{ $t('firstUse.whyTryCloud') }}</span>
-      </button>
-      <button
-        v-else-if="step === 'localBranch'"
+        v-if="step === 'localBranch'"
         class="pick-why-cloud"
         data-testid="first-use-local-branch-back"
         type="button"
-        @click="step = 'pick'"
+        @click="step = 'start'"
       >
         ← {{ $t('common.back') }}
       </button>
@@ -510,7 +634,12 @@ defineExpose({ open })
       @close="dismissWhyCloud('dismiss')"
       @try-cloud="onWhyCloudTryCloud"
     />
-    <TermsModal v-if="termsDoc" :doc="termsDoc" @close="termsDoc = null" />
+    <TermsModal
+      v-if="termsDoc"
+      :open="termsDoc !== null"
+      :doc="termsDoc"
+      @close="termsDoc = null"
+    />
   </BrandTakeoverLayout>
   <ModalShell v-else binding hide-close content-class="first-use-takeover">
     <!-- Mirrors step retains the legacy ModalShell chrome until it gets
@@ -574,55 +703,216 @@ defineExpose({ open })
   color: var(--text);
 }
 
-/* Consent step: brand-wrapped. Hero column is centred by `.brand-hero`;
- * we just stack wordmark → checkboxes → action row inside it. */
-.consent-hero {
-  max-width: 560px;
+/* Merged start step.
+ *
+ * Layout: `.start-screen` fills the inner-frame as a vertical flex
+ * column. `.start-hero` (title + lead + cards + express) flexes to
+ * fill the available space and centres its content vertically so the
+ * cards still land on the original `pick`-step beam target.
+ * `.start-bottom` (consent rows + Continue) is the natural bottom of
+ * the column — no `position: absolute`, so window resizing keeps the
+ * two sections from overlapping. */
+.start-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  max-width: 760px;
+  gap: 8px;
+}
+.start-hero {
+  flex: 1 1 auto;
+  justify-content: center;
   gap: var(--takeover-gap-md);
+  max-width: 760px;
+}
+.start-cards {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
+  gap: 32px;
 }
-.consent-wordmark {
-  width: clamp(140px, 9.7vw, 240px);
-  height: auto;
-  color: #f0ff41;
-  margin-bottom: var(--takeover-gap-md);
-  isolation: isolate;
+/* Cloud card anchors the brand beam — keep the spotlight on the
+ * Cloud card the same way the original pick step did. */
+.start-card-cloud {
   anchor-name: --brand-beam-target;
 }
-.consent-checkboxes {
+.start-cloud-info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: color-mix(in oklab, var(--neutral-100) 65%, transparent);
+  cursor: pointer;
+  transition:
+    color 120ms ease,
+    background 120ms ease;
+}
+.start-cloud-info:hover {
+  color: var(--neutral-100);
+  background: color-mix(in oklab, var(--neutral-100) 10%, transparent);
+}
+.start-cloud-info:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* Express Install — intentionally low-weight: left-aligned single
+ * line with the standard brand-checkbox box, smaller font + muted
+ * text colour so it reads as an opt-out modifier, not a primary
+ * decision. */
+.start-express {
+  display: inline-flex;
+  align-self: center;
+  align-items: flex-start;
+  gap: 8px;
+  margin-top: 4px;
+  font-size: 13px;
+  color: var(--neutral-300);
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 180ms ease-out,
+    transform 180ms ease-out;
+}
+.start-express__body {
   display: flex;
   flex-direction: column;
-  gap: var(--takeover-gap-sm);
-  width: 100%;
-  text-align: left;
+  align-items: flex-start;
+  gap: 2px;
+  min-width: 0;
+}
+.start-express__gpu-hint {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--neutral-400);
+  min-height: 1.4em;
+  transition: opacity 180ms ease-out;
+}
+.start-express__gpu-hint--hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+.start-express__gpu-vendor {
+  font-weight: 500;
+  color: var(--neutral-100);
+}
+/* Cloud pick: reserve the row's space (no layout shift on swap) but
+ * fade + nudge the content out and disable pointer/keyboard access. */
+.start-express--hidden {
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+}
+.start-express__label {
+  line-height: 1.4;
+}
+@media (prefers-reduced-motion: reduce) {
+  .start-express {
+    transition: none;
+  }
 }
-.consent-actions {
+
+/* Bottom strip: consent checkboxes + Continue grouped into a single
+ * glass panel so they read as one cohesive action block instead of
+ * scattered centre-aligned lines. Left-aligned text (checkboxes
+ * should never centre-align) with the CTA docked to the right. */
+.start-bottom {
+  flex: 0 0 auto;
+  width: 95%;
+}
+.start-consent-strip {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 12px;
-  margin-top: var(--takeover-gap-lg);
+  width: 100%;
+  padding: 16px 20px;
+  border-radius: 10px;
+  background: rgba(138, 134, 136, 0.06);
+  backdrop-filter: blur(40px);
+  border: 1px solid rgba(194, 191, 185, 0.08);
+}
+.start-consent-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+.start-consent-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--neutral-200);
+  line-height: 1.5;
 }
 
-/* Pick step. Hero/title/lead live as the global `.brand-*` classes
- * (main.css) so the Configure screen can reuse the same primitives.
- * `.pick-why-cloud` is rendered via the layout's #footer-left slot
- * and stays here because its absolute positioning resolves against the
- * outer frame, which the layout preserves as its positioning context. */
-.pick-grid {
-  display: grid;
-  width: 100%;
-  /* Constrain the grid below the hero's 960px max so the cards sit
-   * narrower under the centred light beam (the Cloud card is the
-   * `--brand-beam-target` anchor). Without this cap the cards stretch
-   * to the full hero width and the spotlight no longer lands on the
-   * card's centre line. */
-  max-width: 760px;
-  margin-inline: auto;
-  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
-  gap: 24px;
+.start-consent-row input[type='checkbox'] {
+  margin-top: 0;
+}
+.start-consent-row__text {
+  white-space: normal;
 }
 
-.pick-card-cloud {
-  anchor-name: --brand-beam-target;
+/* Shake nudge when the user clicks Continue without accepting ToS. */
+.start-consent-row--nudge {
+  animation: consent-shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+.start-consent-row--nudge input[type='checkbox'] {
+  border-color: var(--comfy-yellow) !important;
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--comfy-yellow) 30%, transparent);
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease;
+}
+@keyframes consent-shake {
+  10%,
+  90% {
+    transform: translateX(-1px);
+  }
+  20%,
+  80% {
+    transform: translateX(2px);
+  }
+  30%,
+  50%,
+  70% {
+    transform: translateX(-3px);
+  }
+  40%,
+  60% {
+    transform: translateX(3px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .start-consent-row--nudge {
+    animation: none;
+  }
+}
+
+.start-continue {
+  flex-shrink: 0;
+  min-width: 160px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.start-continue__spinner {
+  animation: start-continue-spin 750ms linear infinite;
+  flex-shrink: 0;
+}
+@keyframes start-continue-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .pick-why-cloud {
@@ -702,7 +992,7 @@ defineExpose({ open })
   width: 32px;
   height: 32px;
   border-radius: 6px;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--chooser-surface-bg);
   color: var(--text);
 }
 .lb-card__text {
diff --git a/src/renderer/src/views/InstallWizardModal.vue b/src/renderer/src/views/InstallWizardModal.vue
index a5541f88..65dd518f 100644
--- a/src/renderer/src/views/InstallWizardModal.vue
+++ b/src/renderer/src/views/InstallWizardModal.vue
@@ -824,7 +824,6 @@ defineExpose({ open })
 
                     <template v-else>
                       <BaseSelect
-                        variant="brand"
                         :model-value="selections[field.id]?.value ?? ''"
                         :options="getSelectOptions(field)"
                         :placeholder="getSelectPlaceholder(field)"
diff --git a/src/renderer/src/views/LoadSnapshotModal.vue b/src/renderer/src/views/LoadSnapshotModal.vue
index 6e1ec1a0..72889248 100644
--- a/src/renderer/src/views/LoadSnapshotModal.vue
+++ b/src/renderer/src/views/LoadSnapshotModal.vue
@@ -371,7 +371,6 @@ defineExpose({ open })
             <div class="ls-field">
               <label class="ls-label">{{ $t('list.snapshotRelease') }}</label>
               <BaseSelect
-                variant="brand"
                 :model-value="selectedRelease?.value ?? ''"
                 :options="releaseSelectOptions"
                 :placeholder="releasePlaceholder"
diff --git a/src/renderer/src/views/ProgressModal.test.ts b/src/renderer/src/views/ProgressModal.test.ts
index 4bf81d26..579afcd4 100644
--- a/src/renderer/src/views/ProgressModal.test.ts
+++ b/src/renderer/src/views/ProgressModal.test.ts
@@ -123,6 +123,7 @@ function snapOp(installationId: string, patch: Partial<Operation> = {}): Operati
     returnTo: 'list',
     opKind: 'destructive',
     destroysInstance: false,
+    chainSpan: null,
     steps: null,
     activePhase: null,
     activePercent: -1,
@@ -268,8 +269,10 @@ describe('ProgressModal — brand branch state transitions', () => {
     expect(body.classList('.brand-progress__banner')).toContain('brand-progress__banner--success')
     expect(body.selectorText('.brand-progress__banner')).toContain('Completed successfully')
 
-    // No buttons during the auto-close window — success self-dismisses.
-    expect(body.exists('.brand-progress__footer')).toBe(false)
+    // No action buttons during the auto-close window — success self-dismisses.
+    // The footer band itself stays mounted (it also hosts the logs accordion
+    // after the redesign), so assert on the buttons specifically.
+    expect(body.exists('.brand-progress__footer-btn')).toBe(false)
 
     // The auto-close watcher fires after ~700ms; advancing timers should
     // emit a `close` event so the host can tear down the takeover.
@@ -288,7 +291,7 @@ describe('ProgressModal — brand branch state transitions', () => {
     expect(body.exists('.brand-progress__banner')).toBe(true)
     expect(body.classList('.brand-progress__banner')).toContain('brand-progress__banner--cancelled')
     expect(body.selectorText('.brand-progress__banner')).toContain('Operation was cancelled')
-    expect(body.exists('.brand-progress__footer')).toBe(false)
+    expect(body.exists('.brand-progress__footer-btn')).toBe(false)
 
     vi.advanceTimersByTime(800)
     await flushPromises()
@@ -495,15 +498,156 @@ describe('ProgressModal — brand branch state transitions', () => {
 
     // Headline (curated label).
     expect(body.text()).toContain('Downloading ComfyUI…')
-    // Substatus (raw main-side detail with bytes/speed/ETA).
+    // Substatus (rich main-side detail with bytes/speed/ETA). The view
+    // runs `formattedSubStatus` over the raw string so byte counts >= 4
+    // digits get locale grouping (`2100 MB` → `2,100 MB`) for readability.
+    // `1050` stays as-is because it's followed by `/`, not a byte unit.
     expect(body.exists('.brand-progress__substatus')).toBe(true)
     const subText = body.selectorText('.brand-progress__substatus')
-    expect(subText).toContain('1050 / 2100 MB')
+    expect(subText).toContain('1050 / 2,100 MB')
     expect(subText).toContain('22 MB/s')
     expect(subText).toContain('~1m remaining')
   })
 })
 
+describe('ProgressModal — unified bar + launch stepper', () => {
+  beforeEach(() => {
+    // Match the helpers the rest of this file's specs already use —
+    // `createPinia` + `installMockApi` are what `beforeEach` at the top
+    // of the brand-branch describe block runs.
+    setActivePinia(createPinia())
+    installMockApi()
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  function barWidth(): string {
+    const el = document.body.querySelector(
+      '.brand-progress__bar-fill',
+    ) as HTMLElement | null
+    return el?.style.width ?? ''
+  }
+  function barPercent(): number {
+    const m = barWidth().match(/^([\d.]+)%$/)
+    return m ? Number(m[1]) : NaN
+  }
+
+  it('caps unifiedPercent at 70% for a chainSpan=install op even at 100% real progress', async () => {
+    await mountWithOp('inst-chain-install', {
+      opKind: 'install',
+      chainSpan: 'install',
+      steps: [{ phase: 'download', label: 'Download' }],
+      activePhase: 'download',
+      activePercent: 100,
+      _globalFloor: 100,
+    })
+    expect(barPercent()).toBeCloseTo(70, 1)
+  })
+
+  it('hides the unified bar for launch ops (stepper carries the progress visual)', async () => {
+    // Launch ops render only the horizontal stepper — the single
+    // `.brand-progress__bar` fill is gated off because each stepper
+    // cell already shows its own fill via `::before`. The percent
+    // readout below the stepper still reflects `unifiedPercent`.
+    const { body } = await mountWithOp('inst-chain-launch', {
+      opKind: 'launch',
+      chainSpan: 'launch',
+    })
+    expect(body.exists('.brand-progress__bar')).toBe(false)
+    expect(body.exists('.brand-progress__stepper')).toBe(true)
+  })
+
+  it('advances the stepper one row per timer tick (load-bearing 900ms clamp)', async () => {
+    // Standalone launch: no stdout signals, no chainSpan. Each 900ms
+    // tick of the caption timer bumps `captionFloor` by 1, which is
+    // what guarantees rows 0–1 each get airtime even if stdout races
+    // ahead later. The clamp logic lives in `launchActiveIndex`.
+    await mountWithOp('inst-launch-tick', { opKind: 'launch' })
+
+    function activeIdx(): number {
+      const rows = Array.from(
+        document.body.querySelectorAll('.brand-progress__stepper .brand-progress__step'),
+      )
+      return rows.findIndex((r) => r.classList.contains('is-active'))
+    }
+
+    expect(activeIdx()).toBe(0)
+    vi.advanceTimersByTime(900 + 50)
+    await flushPromises()
+    expect(activeIdx()).toBe(1)
+    vi.advanceTimersByTime(900 + 50)
+    await flushPromises()
+    expect(activeIdx()).toBe(2)
+  })
+
+  it('throttles stdout-driven jumps to one row ahead of the caption floor', async () => {
+    // Seed an empty op (the stdout watcher in ProgressModal has no
+    // `{ immediate: true }`, so it only fires on *changes* — production
+    // sees IPC chunks; tests have to mutate after mount).
+    await mountWithOp('inst-launch-clamp', {
+      opKind: 'launch',
+      chainSpan: 'launch',
+      terminalOutput: '',
+    })
+    const store = useProgressStore()
+    const op = store.operations.get('inst-launch-clamp')!
+    op.terminalOutput =
+      'Total VRAM 24576 MB\n' +
+      'Loading custom node ComfyUI-Manager\n' +
+      'Uvicorn running on http://127.0.0.1:8188\n'
+    await flushPromises()
+    vi.advanceTimersByTime(900 + 50)
+    await flushPromises()
+
+    // captionFloor=1 (one tick), stdoutStep=4 — but the clamp caps the
+    // visible active index at captionFloor+1=2. This is the guarantee
+    // that rows 0 and 1 get airtime even when stdout immediately races
+    // to "Uvicorn running on" right at boot.
+    const rows = Array.from(
+      document.body.querySelectorAll('.brand-progress__stepper .brand-progress__step'),
+    )
+    const activeIdx = rows.findIndex((r) => r.classList.contains('is-active'))
+    expect(activeIdx).toBeLessThanOrEqual(2)
+    expect(activeIdx).toBeGreaterThanOrEqual(1)
+  })
+
+  it('renders five stepper rows reflecting the current launchActiveIndex', async () => {
+    await mountWithOp('inst-launch-stepper', {
+      opKind: 'launch',
+      // No chainSpan → standalone launch path. launchActiveIndex starts
+      // at 0 (securityScan). One timer tick → 1, two ticks → 2.
+    })
+    // Advance to launchActiveIndex=2 (gpu) via the 900ms timer.
+    vi.advanceTimersByTime(900 * 2 + 50)
+    await flushPromises()
+    const rows = Array.from(
+      document.body.querySelectorAll('.brand-progress__stepper .brand-progress__step'),
+    ) as HTMLElement[]
+    expect(rows).toHaveLength(5)
+    expect(Array.from(rows[0]!.classList)).toContain('is-done')
+    expect(Array.from(rows[1]!.classList)).toContain('is-done')
+    expect(Array.from(rows[2]!.classList)).toContain('is-active')
+    expect(Array.from(rows[3]!.classList)).toContain('is-pending')
+    expect(Array.from(rows[4]!.classList)).toContain('is-pending')
+  })
+
+  it('does NOT render the launch stepper for non-launch ops (delete / install)', async () => {
+    const { body } = await mountWithOp('inst-install-only', {
+      opKind: 'install',
+      steps: [{ phase: 'download', label: 'Download' }],
+      activePhase: 'download',
+      activePercent: 40,
+    })
+    // Stepper container present? Must be absent for non-launch ops; the
+    // friendlyCaption div is what carries the single-line phase headline.
+    expect(body.exists('.brand-progress__stepper')).toBe(false)
+    expect(body.exists('.brand-progress__caption')).toBe(true)
+  })
+})
+
 describe('ProgressModal — error message styling (regression for #582)', () => {
   // jsdom doesn't compute layout, so we can't assert via
   // `getComputedStyle().maxHeight` against the rendered element. Instead
diff --git a/src/renderer/src/views/ProgressModal.vue b/src/renderer/src/views/ProgressModal.vue
index 2d2b924a..bdc3964f 100644
--- a/src/renderer/src/views/ProgressModal.vue
+++ b/src/renderer/src/views/ProgressModal.vue
@@ -1,9 +1,20 @@
 <script setup lang="ts">
 import { ref, computed, watch, onBeforeUnmount } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Check, X, TriangleAlert, ChevronDown, ArrowLeft, RefreshCcw } from 'lucide-vue-next'
+import {
+  Check,
+  X,
+  TriangleAlert,
+  ChevronDown,
+  ArrowLeft,
+  RefreshCcw,
+  Loader2
+} from 'lucide-vue-next'
 import { useModal } from '../composables/useModal'
-import { useReturnToDashboardConfirm, type ReturnToDashboardReason } from '../composables/useReturnToDashboardConfirm'
+import {
+  useReturnToDashboardConfirm,
+  type ReturnToDashboardReason
+} from '../composables/useReturnToDashboardConfirm'
 import { useInstallationStore } from '../stores/installationStore'
 import { emitTelemetryAction } from '../lib/telemetry'
 
@@ -94,6 +105,25 @@ const globalProgress = computed<{ percent: number; indeterminate: boolean }>(()
   return progressStore.globalProgressFor(op)
 })
 
+/**
+ * Per-step weight slots for the launch 0→100% bar. Each entry is the
+ * end-of-slot percent; the active step interpolates between the
+ * previous slot's end and its own end as elapsed-time-in-step grows.
+ * Calibrated so gpu + customNodes — the two long ones — own the middle
+ * of the bar, and startingServer holds the final 25% for the port-wait.
+ *
+ * Indexed by `LAUNCH_STEP_ORDER`:
+ *   [securityScan, mountLibraries, gpu, customNodes, startingServer]
+ */
+const LAUNCH_SLOT_ENDS = [10, 25, 45, 70, 95] as const
+const LAUNCH_SLOT_STARTS = [0, 10, 25, 45, 70] as const
+/** Soft estimate (ms) for how long the active step takes when no
+ *  stdout signal arrives — used purely to interpolate the bar fill
+ *  inside its slot. Steps still advance only on the 900ms timer +
+ *  stdout regexes; this constant just keeps the bar from looking
+ *  frozen between transitions. */
+const LAUNCH_STEP_BUDGET_MS = 4_000
+
 /**
  * User-facing caption that swaps as phases advance.
  *
@@ -103,8 +133,10 @@ const globalProgress = computed<{ percent: number; indeterminate: boolean }>(()
  * phase not in the i18n table (e.g. a new main-side phase shipped before
  * the table is updated) so we never go blank.
  *
- * Flat ops: pass through `flatStatus` — chooser-launch overrides this
- * anyway via the existing `launchCaption` branch.
+ * Flat ops: pass through `flatStatus`. Chooser-launch ops short-circuit
+ * this entirely — `isBrandLaunch` swaps the caption for the 5-row
+ * launch stepper (`launchSteps`) so the rolling text is irrelevant for
+ * that branch.
  */
 const friendlyCaption = computed<string>(() => {
   const op = currentOp.value
@@ -150,6 +182,31 @@ const subStatus = computed<string | null>(() => {
   return raw
 })
 
+/**
+ * Polish the rich substatus string main produces (e.g. `"250 / 1000 MB ·
+ * 12.3 MB/s · 1m30s elapsed · 45s remaining"`). Three passes:
+ *   1. Group 4+ digit byte counts (`1000 MB` → `1,000 MB`). Lookahead is
+ *      scoped to a byte-unit suffix so unrelated numerics (port, PID,
+ *      timestamp) elsewhere in the string can't be mangled into
+ *      `12,345`.
+ *   2. Drop the "· 0s remaining" / "· — remaining" tail at the very end
+ *      of the elapsed window — it's noise once the ETA has collapsed.
+ *   3. Collapse the doubled separator left behind and trim a trailing
+ *      one so we never render `"… elapsed  ·  "`.
+ */
+const formattedSubStatus = computed<string | null>(() => {
+  const raw = subStatus.value
+  if (!raw) return null
+  return (
+    raw
+      .replace(/(\d{4,})(?=\s*(?:GB|MB|KB|B)\b)/gi, (_, n) => Number(n).toLocaleString())
+      .replace(/\s*·\s*(?:0s?|—)\s*remaining/gi, '')
+      .replace(/\s*·\s*·\s*/g, '  ·  ')
+      .replace(/\s*·\s*$/, '')
+      .trim() || null
+  )
+})
+
 /**
  * Brand-loader launch step list — chooser-tile launch path only.
  *
@@ -179,33 +236,26 @@ const subStatus = computed<string | null>(() => {
  * in main later (sendProgress in launch.ts), drop the narrative timer
  * and key off `op.lastStatus.launch` instead.
  */
-type LaunchStepKey =
-  | 'securityScan'
-  | 'mountLibraries'
-  | 'gpu'
-  | 'customNodes'
-  | 'startingServer'
+type LaunchStepKey = 'securityScan' | 'mountLibraries' | 'gpu' | 'customNodes' | 'startingServer'
 
 const LAUNCH_STEP_ORDER: readonly LaunchStepKey[] = [
   'securityScan',
   'mountLibraries',
   'gpu',
   'customNodes',
-  'startingServer',
+  'startingServer'
 ]
 
-// True only for launch-class ops in the brand layout. Drives the
-// rolling 5-step launchCaption pipeline ("security scan → mount
-// libraries → GPU → custom nodes → starting server") + the GPU stdout
-// scanner. Non-launch ops (delete / update / install / snapshot / generic)
-// fall through to `friendlyCaption`, which maps `progress.phaseLabel.<phase>`
-// or `flatStatus` to a user-facing string — so a delete op now reads
-// "Deleting installation…" instead of "Mounting model libraries…".
+// True only for launch-class ops in the brand layout. Drives the 5-step
+// launch stepper ("security scan → mount libraries → GPU → custom nodes
+// → starting server") + the GPU stdout scanner + the `launchPercent`
+// bar interpolation. Non-launch ops (delete / update / install /
+// snapshot / generic) fall through to `friendlyCaption`, which maps
+// `progress.phaseLabel.<phase>` or `flatStatus` to a user-facing string
+// — so a delete op now reads "Deleting installation…" instead of
+// "Mounting model libraries…".
 const isBrandLaunch = computed(
-  () =>
-    !!currentOp.value &&
-    currentOp.value.opKind === 'launch' &&
-    currentOp.value.steps === null,
+  () => !!currentOp.value && currentOp.value.opKind === 'launch' && currentOp.value.steps === null
 )
 
 /**
@@ -269,7 +319,7 @@ function startCaptionTimer(): void {
 }
 
 // Reset + (re)arm the caption timer when the brand-launch op changes.
-// Keyed on `displayId` so each launch starts the rolling caption fresh.
+// Keyed on `displayId` so each launch starts the stepper fresh at row 0.
 watch(
   () => (isBrandLaunch.value ? displayId.value : null),
   (id) => {
@@ -282,7 +332,7 @@ watch(
       startCaptionTimer()
     }
   },
-  { immediate: true },
+  { immediate: true }
 )
 
 // Snap to the terminal caption the moment the op finishes (success or
@@ -295,7 +345,7 @@ watch(
       clearCaptionTimer()
       captionFloor.value = LAUNCH_STEP_ORDER.length - 1
     }
-  },
+  }
 )
 
 onBeforeUnmount(clearCaptionTimer)
@@ -334,7 +384,7 @@ watch(
     ) {
       stdoutStep.value = 4
     }
-  },
+  }
 )
 
 const launchActiveIndex = computed(() => {
@@ -349,19 +399,154 @@ const launchActiveIndex = computed(() => {
   return Math.max(captionFloor.value, stdoutClamped)
 })
 
-/** Single rolling caption — picks the label for the current active step
- *  (or the last one once the op has finished). The bar shows progress
- *  visually; this just swaps the text as phases advance. */
-const launchCaption = computed<string>(() => {
-  if (!isBrandLaunch.value) return ''
-  const idx = Math.min(launchActiveIndex.value, LAUNCH_STEP_ORDER.length - 1)
-  const key = LAUNCH_STEP_ORDER[idx]
-  if (key === 'gpu') {
-    return vramGb.value !== null
-      ? t('launch.steps.gpu', { vram: vramGb.value })
-      : t('launch.steps.gpuFallback')
+const launchSteps = computed(() => {
+  const activeIdx = launchActiveIndex.value
+  return LAUNCH_STEP_ORDER.map((key, idx) => {
+    const status: 'done' | 'active' | 'pending' =
+      idx < activeIdx ? 'done' : idx === activeIdx ? 'active' : 'pending'
+    let label: string
+    if (key === 'gpu' && vramGb.value != null) {
+      label = t('launch.steps.gpu', { vram: vramGb.value })
+    } else if (key === 'gpu') {
+      label = t('launch.steps.gpuFallback')
+    } else {
+      label = t(`launch.steps.${key}`)
+    }
+    return { key, status, label }
+  })
+})
+
+/**
+ * Wall-clock timestamp the current launch step became active. Used by
+ * `launchPercent` to interpolate the bar's fill within its slot so the
+ * user sees forward motion between step transitions even though the
+ * step itself only advances on the 900ms timer / stdout regex match.
+ *
+ * `launchStepNow` is a low-frequency reactive clock that re-evaluates
+ * `launchPercent` every ~250ms. It only ticks during an in-flight
+ * launch op (gated below); other ops bypass `launchPercent` entirely.
+ */
+const launchStepStartMs = ref(0)
+const launchStepNow = ref(0)
+let launchTickTimer: ReturnType<typeof setInterval> | null = null
+const LAUNCH_TICK_MS = 250
+
+function clearLaunchTick(): void {
+  if (launchTickTimer) {
+    clearInterval(launchTickTimer)
+    launchTickTimer = null
+  }
+}
+
+function startLaunchTick(): void {
+  clearLaunchTick()
+  launchStepNow.value = Date.now()
+  launchTickTimer = setInterval(() => {
+    if (currentOp.value?.finished || !isBrandLaunch.value) {
+      clearLaunchTick()
+      return
+    }
+    launchStepNow.value = Date.now()
+  }, LAUNCH_TICK_MS)
+}
+
+// Reset the step-elapsed clock whenever the launch op changes or the
+// active step advances. Anchoring on `launchActiveIndex` is what makes
+// the bar's slot-internal interpolation snap forward at each transition
+// instead of carrying stale elapsed-time from the previous step.
+watch(
+  () => (isBrandLaunch.value ? `${displayId.value}:${launchActiveIndex.value}` : null),
+  (key) => {
+    if (!key) {
+      clearLaunchTick()
+      return
+    }
+    launchStepStartMs.value = Date.now()
+    launchStepNow.value = launchStepStartMs.value
+    if (!currentOp.value?.finished) startLaunchTick()
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(clearLaunchTick)
+
+/**
+ * Launch progress as a 0→100 percent for the unified bar. Maps the
+ * 5-step state machine onto `LAUNCH_SLOT_ENDS`:
+ *   - Completed steps contribute their full slot.
+ *   - Active step interpolates `[slotStart, slotEnd)` by elapsed time
+ *     against `LAUNCH_STEP_BUDGET_MS`, capped so we never reach the next
+ *     slot before the step itself advances.
+ *   - When the final step has fired AND stdout has matched the "server
+ *     ready" regex (encoded as `stdoutStep >= 4`), snap to 100.
+ *
+ * Standalone-launch flows feed this into `unifiedPercent` directly
+ * (the launch op carries the whole 0→100 by itself); chained-launch
+ * flows feed it through the 70→100 mapping so install+launch read as
+ * one journey.
+ */
+const launchPercent = computed<number>(() => {
+  if (!isBrandLaunch.value) return 0
+  const op = currentOp.value
+  if (!op) return 0
+  if (op.finished && op.result?.ok) return 100
+  const idx = launchActiveIndex.value
+  // Final step reached AND server-ready regex fired → snap to 100. The
+  // regex matching is what set `stdoutStep` to 4 in the first place, so
+  // checking either side is equivalent; we check `stdoutStep` directly
+  // so the bar doesn't sit at 95% while the user waits for the comfy
+  // window to appear.
+  if (idx >= LAUNCH_STEP_ORDER.length - 1 && stdoutStep.value >= LAUNCH_STEP_ORDER.length - 1) {
+    return 100
+  }
+  const slotStart = LAUNCH_SLOT_STARTS[idx] ?? 0
+  const slotEnd = LAUNCH_SLOT_ENDS[idx] ?? 100
+  const elapsed = Math.max(0, launchStepNow.value - launchStepStartMs.value)
+  const ratio = Math.min(1, elapsed / LAUNCH_STEP_BUDGET_MS)
+  return slotStart + (slotEnd - slotStart) * ratio
+})
+
+/**
+ * Unified 0→100 percent for the bar across an install→launch chain.
+ *
+ * - `chainSpan === 'install'`: install op's `globalProgress` mapped to
+ *   0→70% so the install never visually saturates before the launch
+ *   leg begins. The remaining 30% is reserved for the launch.
+ * - `chainSpan === 'launch'`: launch op's `launchPercent` mapped to
+ *   70→100% so the bar picks up where the install left off.
+ * - Standalone launch (`opKind === 'launch'`, no chainSpan): launch
+ *   op's `launchPercent` mapped 0→100. Bar moves through all five slots
+ *   on its own.
+ * - Anything else: pass-through `globalProgress.percent`.
+ *
+ * Monotonic by construction — install caps at 70 and launch starts at
+ * 70, so the seam between the two ops is invisible.
+ */
+const unifiedPercent = computed<number>(() => {
+  const op = currentOp.value
+  if (!op) return 0
+  if (op.chainSpan === 'install') {
+    return Math.min(70, globalProgress.value.percent * 0.7)
+  }
+  if (op.chainSpan === 'launch') {
+    return 70 + launchPercent.value * 0.3
   }
-  return t(`launch.steps.${key}`)
+  if (isBrandLaunch.value) {
+    return launchPercent.value
+  }
+  return globalProgress.value.percent
+})
+
+/** Whether the bar should render with the indeterminate slide animation
+ *  rather than a determinate fill. Launch ops always render determinate
+ *  now (the 5-step state machine + `launchPercent` give us a number);
+ *  non-launch ops fall back to the existing `globalProgress.indeterminate`
+ *  signal. */
+const unifiedIndeterminate = computed<boolean>(() => {
+  if (isBrandLaunch.value) return false
+  const op = currentOp.value
+  if (op?.chainSpan === 'install') return false
+  return globalProgress.value.indeterminate
 })
 
 // Independent of the modal-branch terminal toggle (`terminalExpanded`)
@@ -374,12 +559,10 @@ const brandTerminalRef = ref<HTMLDivElement | null>(null)
 // this surface (brand + modal terminal), every stdout chunk would wake
 // both watchers and post a `nextTick → scrollToBottom` on a `null` ref.
 // Gating the getter elides that fan-out until the disclosure is open.
-const {
-  isAtBottom: brandIsAtBottom,
-  handleTerminalScroll: handleBrandTerminalScroll,
-} = useTerminalScroll(brandTerminalRef, () =>
-  brandLogsExpanded.value ? currentOp.value?.terminalOutput : undefined,
-)
+const { isAtBottom: brandIsAtBottom, handleTerminalScroll: handleBrandTerminalScroll } =
+  useTerminalScroll(brandTerminalRef, () =>
+    brandLogsExpanded.value ? currentOp.value?.terminalOutput : undefined
+  )
 
 function toggleBrandLogs(): void {
   brandLogsExpanded.value = !brandLogsExpanded.value
@@ -441,6 +624,11 @@ function startOperation(opts: {
   returnTo?: string
   opKind?: ShowProgressOpts['opKind']
   destroysInstance?: boolean
+  /** Forwarded straight to the store so a host that drives the modal
+   *  via the exposed handle (instead of `handleShowProgress`) can still
+   *  set up an install→launch chain. Without this widening the field
+   *  would be silently dropped — bar resets at the seam. */
+  chainSpan?: ShowProgressOpts['chainSpan']
 }): void {
   currentId.value = opts.installationId
   resolvingConflict.value = false
@@ -492,10 +680,7 @@ function handleDone(): void {
   // op whose success removes the install from the registry) would
   // otherwise route to a now-missing detail view.
   const installStillExists = !!installationStore.getById(id)
-  if (
-    installStillExists &&
-    (op.returnTo === 'detail' || op.result.navigate === 'detail')
-  ) {
+  if (installStillExists && (op.returnTo === 'detail' || op.result.navigate === 'detail')) {
     emit('show-detail', id)
   } else if (op.result.mode === 'console') {
     emit('show-console', id)
@@ -542,7 +727,7 @@ function handleReboot(): void {
     apiCall: op.apiCall || (() => window.api.runAction(id, 'launch')),
     returnTo: op.returnTo,
     opKind: op.opKind,
-    destroysInstance: op.destroysInstance,
+    destroysInstance: op.destroysInstance
   })
 }
 
@@ -562,7 +747,7 @@ async function cancelDestructiveOp(): Promise<void> {
   if (!ok) return
   emitTelemetryAction('desktop2.instance.return_to_dashboard', {
     from: 'progress',
-    reason: 'in_flight',
+    reason: 'in_flight'
   })
   progressStore.cancelOperation(id)
   emit('close')
@@ -597,7 +782,7 @@ watch(
       autoCloseTimer = null
       if (displayId.value === id) handleDone()
     }, AUTO_CLOSE_DELAY_MS)
-  },
+  }
 )
 onBeforeUnmount(clearAutoCloseTimer)
 
@@ -655,23 +840,14 @@ defineExpose({ startOperation, showOperation })
         <ComfyWordmark class="brand-progress__wordmark" />
 
         <!-- Progress bar — hidden once the op finishes so the
-             finished-state banner owns the visual focus. -->
-        <template v-if="!currentOp.finished">
-          <div
-            class="brand-progress__bar"
-            :class="{ 'is-indeterminate': globalProgress.indeterminate }"
-          >
-            <div
-              class="brand-progress__bar-fill"
-              :style="{ width: `${globalProgress.percent}%` }"
-            />
+             finished-state banner owns the visual focus.
+             Launch ops use the horizontal stepper below instead. -->
+        <template v-if="!currentOp.finished && !isBrandLaunch">
+          <div class="brand-progress__bar" :class="{ 'is-indeterminate': unifiedIndeterminate }">
+            <div class="brand-progress__bar-fill" :style="{ width: `${unifiedPercent}%` }" />
           </div>
-          <div
-            v-if="!isBrandLaunch && !globalProgress.indeterminate"
-            class="brand-progress__percent"
-            aria-hidden="true"
-          >
-            {{ Math.round(globalProgress.percent) }}%
+          <div v-if="!unifiedIndeterminate" class="brand-progress__percent" aria-hidden="true">
+            {{ Math.round(unifiedPercent) }}%
           </div>
         </template>
 
@@ -700,18 +876,12 @@ defineExpose({ startOperation, showOperation })
           <div
             v-else-if="currentOp.finished"
             :key="`finished-${
-              currentOp.cancelRequested
-                ? 'cancelled'
-                : currentOp.error
-                  ? 'error'
-                  : 'success'
+              currentOp.cancelRequested ? 'cancelled' : currentOp.error ? 'error' : 'success'
             }`"
             class="brand-progress__banner"
             :class="{
-              'brand-progress__banner--success':
-                !currentOp.cancelRequested && currentOp.result?.ok,
-              'brand-progress__banner--error':
-                !currentOp.cancelRequested && !!currentOp.error,
+              'brand-progress__banner--success': !currentOp.cancelRequested && currentOp.result?.ok,
+              'brand-progress__banner--error': !currentOp.cancelRequested && !!currentOp.error,
               'brand-progress__banner--cancelled': currentOp.cancelRequested
             }"
             aria-live="polite"
@@ -730,45 +900,60 @@ defineExpose({ startOperation, showOperation })
             </span>
           </div>
 
-          <!-- Running caption. For chooser-tile launches the caption
-               cycles through `launchCaption` (5 narrative + stdout-driven
-               phases). Every other op kind (delete, update, install,
-               snapshot, generic) maps through `friendlyCaption` which
-               resolves `progress.phaseLabel.<phase>` or `flatStatus` —
-               so a delete reads "Deleting installation…" instead of the
-               launch-flow "Mounting model libraries…". The `:key` swap
-               drives a tiny crossfade on text change.
-
-               ⚠️ The key embeds `vramGb` because that's the only
-               *intra-step* dynamic var we want to crossfade on (null → 24).
-               Don't add more parametric vars to this key without thinking —
-               every value change forces a remount + crossfade, which looks
-               like a stutter when the underlying text is identical. -->
+          <div
+            v-else-if="isBrandLaunch"
+            key="launch-stepper"
+            class="brand-progress__stepper"
+            aria-live="polite"
+          >
+            <div
+              v-for="step in launchSteps"
+              :key="step.key"
+              class="brand-progress__step"
+              :class="`is-${step.status}`"
+            >
+              <span class="brand-progress__step-icon">
+                <Check v-if="step.status === 'done'" :size="12" :stroke-width="2.5" />
+                <Loader2
+                  v-else-if="step.status === 'active'"
+                  :size="12"
+                  :stroke-width="2"
+                  class="brand-progress__step-spinner"
+                />
+              </span>
+              <span class="brand-progress__step-label">{{ step.label }}</span>
+            </div>
+          </div>
           <div
             v-else
-            :key="
-              isBrandLaunch
-                ? `launch-${launchActiveIndex}-${vramGb ?? 'na'}`
-                : (currentOp.activePhase ?? 'caption')
-            "
+            :key="currentOp.activePhase ?? 'caption'"
             class="brand-progress__caption"
             aria-live="polite"
           >
-            {{ isBrandLaunch ? launchCaption : friendlyCaption }}
+            {{ friendlyCaption }}
           </div>
         </Transition>
 
+        <!-- Progress percent for launch ops (shown below stepper) -->
+        <div
+          v-if="!currentOp.finished && isBrandLaunch"
+          class="brand-progress__percent"
+          aria-hidden="true"
+        >
+          {{ Math.round(unifiedPercent) }}%
+        </div>
+
         <!-- Substatus line — the rich main-side detail string (bytes
              received / total, MB/s, elapsed, ETA) for stepped phases
              whose curated label hides those numbers. Launch ops keep
-             it hidden because their rolling launchCaption already
-             cycles through narrative phases. -->
+             it hidden because the 5-row launch stepper already shows
+             which narrative phase is active. -->
         <div
-          v-if="!currentOp.finished && !isBrandLaunch && subStatus"
+          v-if="!currentOp.finished && !isBrandLaunch && formattedSubStatus"
           class="brand-progress__substatus"
           aria-live="polite"
         >
-          {{ subStatus }}
+          {{ formattedSubStatus }}
         </div>
 
         <!-- Error / port-conflict detail line beneath the banner.
@@ -780,14 +965,8 @@ defineExpose({ startOperation, showOperation })
              the same string the user could grab manually so the
              share-to-Google / paste-into-issue-thread flow doesn't
              require keyboard chording. -->
-        <div
-          v-if="finishedErrorMessage"
-          class="brand-progress__error-row"
-        >
-          <div
-            class="brand-progress__error-message"
-            :data-testid="TID.progressErrorMessage"
-          >
+        <div v-if="finishedErrorMessage" class="brand-progress__error-row">
+          <div class="brand-progress__error-message" :data-testid="TID.progressErrorMessage">
             {{ finishedErrorMessage }}
           </div>
           <BaseCopyButton
@@ -796,47 +975,6 @@ defineExpose({ startOperation, showOperation })
             class="brand-progress__error-copy"
           />
         </div>
-
-        <!-- View logs disclosure — any op with stdout (launch, delete,
-             update, install, snapshot…) can expand the log tail. State
-             is independent from the legacy modal-branch terminal toggle
-             so re-mounts on swap don't leak open/closed state. -->
-        <template v-if="currentOp.terminalOutput">
-          <div class="brand-progress__logs-header">
-            <button
-              type="button"
-              class="brand-progress__logs-toggle"
-              :aria-expanded="brandLogsExpanded"
-              aria-controls="brand-progress-logs"
-              @click="toggleBrandLogs"
-            >
-              <ChevronDown
-                :size="14"
-                class="brand-progress__logs-chevron"
-                :class="{ 'is-open': brandLogsExpanded }"
-              />
-              <span>{{ $t('launch.viewLogs') }}</span>
-            </button>
-            <BaseCopyButton
-              v-if="brandLogsExpanded"
-              :get-value="getTerminalLogText"
-              :aria-label="$t('common.copy')"
-              class="brand-progress__logs-copy"
-            />
-          </div>
-          <BaseAccordion :open="brandLogsExpanded" class="brand-progress__logs-wrap">
-            <div
-              id="brand-progress-logs"
-              ref="brandTerminalRef"
-              class="brand-progress__logs"
-              :data-testid="TID.progressLogs"
-              @scroll="handleBrandTerminalScroll"
-            >
-              {{ displayedTerminalOutput }}
-            </div>
-          </BaseAccordion>
-        </template>
-
       </div>
     </div>
     <!-- Footer band — sibling to the centered hero stack so the action
@@ -858,81 +996,122 @@ defineExpose({ startOperation, showOperation })
          Success / cancelled auto-close after a short delay so no
          buttons render then — the band collapses to zero height. -->
     <template #footer>
-      <div
-        v-if="
-          currentOp &&
-            (!currentOp.finished ||
-              isPortConflictOpen ||
-              (!!currentOp.error && !currentOp.cancelRequested))
-        "
-        class="brand-progress__footer"
-      >
-        <template v-if="!currentOp.finished">
-          <button
-            v-if="currentOp.destroysInstance"
-            type="button"
-            class="brand-ghost brand-progress__footer-btn"
-            @click="cancelDestructiveOp"
-          >
-            <X :size="16" />
-            {{ $t('common.cancel') }}
-          </button>
-          <button
-            v-else
-            type="button"
-            class="brand-ghost brand-progress__footer-btn"
-            @click="returnToDashboard('in_flight')"
-          >
-            <ArrowLeft :size="16" />
-            {{ $t('progress.returnToDashboard') }}
-          </button>
-        </template>
-        <template v-else-if="isPortConflictOpen && currentOp.result?.portConflict">
-          <button
-            v-if="currentOp.result.portConflict.nextPort"
-            type="button"
-            class="brand-primary brand-progress__footer-btn"
-            @click="handleUseNextPort(currentOp.result.portConflict.nextPort!)"
-          >
-            {{
-              $t('errors.portConflictUsePort', {
-                port: currentOp.result.portConflict.nextPort
-              })
-            }}
-          </button>
-          <button
-            v-if="currentOp.result.portConflict.isComfy"
-            type="button"
-            class="brand-ghost brand-progress__footer-btn brand-progress__footer-btn--danger"
-            @click="handleKillProcess(currentOp.result.portConflict.port)"
-          >
-            {{ $t('errors.portConflictKill') }}
-          </button>
-        </template>
-        <template v-else>
-          <button
-            v-if="!currentOp.destroysInstance"
-            type="button"
-            class="brand-primary brand-progress__footer-btn"
-            :data-testid="TID.progressReboot"
-            @click="handleReboot"
+      <div v-if="currentOp" class="brand-progress__footer">
+        <!-- Log panel (opens above the footer bar) -->
+        <BaseAccordion
+          v-if="currentOp.terminalOutput"
+          :open="brandLogsExpanded"
+          class="brand-progress__logs-wrap"
+          :class="{ 'is-expanded': brandLogsExpanded }"
+        >
+          <div class="brand-progress__logs-panel-header">
+            <span class="brand-progress__logs-panel-title">{{ $t('launch.viewLogs') }}</span>
+            <BaseCopyButton
+              :get-value="getTerminalLogText"
+              :aria-label="$t('common.copy')"
+              class="brand-progress__logs-copy"
+            />
+          </div>
+          <div
+            id="brand-progress-logs"
+            ref="brandTerminalRef"
+            class="brand-progress__logs"
+            :data-testid="TID.progressLogs"
+            @scroll="handleBrandTerminalScroll"
           >
-            <RefreshCcw :size="16" />
-            {{ $t('progress.reboot') }}
-          </button>
+            {{ displayedTerminalOutput }}
+          </div>
+        </BaseAccordion>
+        <div
+          class="brand-progress__footer-bar"
+          :class="{ 'is-centered': !currentOp.terminalOutput }"
+        >
+          <div class="brand-progress__footer-left">
+            <template v-if="!currentOp.finished">
+              <button
+                v-if="currentOp.destroysInstance"
+                type="button"
+                class="brand-ghost brand-progress__footer-btn"
+                @click="cancelDestructiveOp"
+              >
+                <X :size="14" />
+                {{ $t('common.cancel') }}
+              </button>
+              <button
+                v-else
+                type="button"
+                class="brand-ghost brand-progress__footer-btn"
+                @click="returnToDashboard('in_flight')"
+              >
+                <ArrowLeft :size="14" />
+                {{ $t('progress.returnToDashboard') }}
+              </button>
+            </template>
+            <template v-else-if="isPortConflictOpen && currentOp.result?.portConflict">
+              <button
+                v-if="currentOp.result.portConflict.nextPort"
+                type="button"
+                class="brand-primary brand-progress__footer-btn"
+                @click="handleUseNextPort(currentOp.result.portConflict.nextPort!)"
+              >
+                {{
+                  $t('errors.portConflictUsePort', {
+                    port: currentOp.result.portConflict.nextPort
+                  })
+                }}
+              </button>
+              <button
+                v-if="currentOp.result.portConflict.isComfy"
+                type="button"
+                class="brand-ghost brand-progress__footer-btn brand-progress__footer-btn--danger"
+                @click="handleKillProcess(currentOp.result.portConflict.port)"
+              >
+                {{ $t('errors.portConflictKill') }}
+              </button>
+            </template>
+            <template
+              v-else-if="currentOp.finished && !!currentOp.error && !currentOp.cancelRequested"
+            >
+              <button
+                v-if="!currentOp.destroysInstance"
+                type="button"
+                class="brand-primary brand-progress__footer-btn"
+                :data-testid="TID.progressReboot"
+                @click="handleReboot"
+              >
+                <RefreshCcw :size="14" />
+                {{ $t('progress.reboot') }}
+              </button>
+              <button
+                type="button"
+                :class="
+                  currentOp.destroysInstance
+                    ? 'brand-primary brand-progress__footer-btn'
+                    : 'brand-ghost brand-progress__footer-btn'
+                "
+                @click="returnToDashboard('crashed')"
+              >
+                <ArrowLeft :size="14" />
+                {{ $t('progress.returnToDashboard') }}
+              </button>
+            </template>
+          </div>
           <button
+            v-if="currentOp.terminalOutput"
             type="button"
-            :class="
-              currentOp.destroysInstance
-                ? 'brand-primary brand-progress__footer-btn'
-                : 'brand-ghost brand-progress__footer-btn'
-            "
-            @click="returnToDashboard('crashed')"
+            class="brand-ghost brand-progress__footer-btn brand-progress__logs-toggle"
+            :aria-expanded="brandLogsExpanded"
+            aria-controls="brand-progress-logs"
+            @click="toggleBrandLogs"
           >
-            <ArrowLeft :size="16" />
-            {{ $t('progress.returnToDashboard') }}
+            <ChevronDown
+              :size="14"
+              class="brand-progress__logs-chevron"
+              :class="{ 'is-open': brandLogsExpanded }"
+            />
+            {{ $t('launch.viewLogs') }}
           </button>
-        </template>
+        </div>
       </div>
     </template>
   </BrandTakeoverLayout>
@@ -964,11 +1143,31 @@ defineExpose({ startOperation, showOperation })
   position: relative;
   z-index: 2;
   width: min(85%, 880px);
+  max-width: calc(100vw - 48px);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: clamp(1rem, 3vh, 2rem);
   text-align: center;
+  overflow: hidden;
+}
+.brand-progress__stack::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 130%;
+  height: 160%;
+  border-radius: 50%;
+  background: radial-gradient(
+    ellipse at center,
+    color-mix(in srgb, var(--neutral-800) 60%, transparent) 0%,
+    color-mix(in srgb, var(--neutral-800) 40%, transparent) 35%,
+    transparent 60%
+  );
+  pointer-events: none;
+  z-index: -1;
 }
 .brand-progress__wordmark {
   width: clamp(140px, 9.7vw, 240px);
@@ -986,7 +1185,7 @@ defineExpose({ startOperation, showOperation })
 }
 .brand-progress__bar-fill {
   height: 100%;
-  background: var(--neutral-50);
+  background: var(--comfy-yellow);
   border-radius: inherit;
   transition: width 200ms cubic-bezier(0.22, 1, 0.36, 1);
 }
@@ -1002,15 +1201,112 @@ defineExpose({ startOperation, showOperation })
     transform: translateX(330%);
   }
 }
+
+/* Horizontal stepper beneath the segmented bar */
+.brand-progress__stepper {
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  gap: 3px;
+  align-items: flex-start;
+  overflow: hidden;
+}
+.brand-progress__step {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  transition: opacity 180ms ease;
+}
+.brand-progress__step::before {
+  content: '';
+  width: 100%;
+  height: 5px;
+  border-radius: 3px;
+  background: var(--brand-surface-bg);
+  border: 1px solid var(--brand-surface-border);
+  transition:
+    background 200ms ease,
+    border-color 200ms ease;
+}
+.brand-progress__step.is-done::before {
+  background: var(--comfy-yellow);
+  border-color: var(--comfy-yellow);
+}
+.brand-progress__step.is-active::before {
+  background: linear-gradient(
+    90deg,
+    var(--comfy-yellow) 0%,
+    var(--comfy-yellow) 60%,
+    var(--brand-surface-bg) 100%
+  );
+  border-color: color-mix(in srgb, var(--comfy-yellow) 50%, var(--brand-surface-border));
+}
+.brand-progress__step.is-pending {
+  opacity: 0.5;
+}
+.brand-progress__step-icon {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.brand-progress__step.is-done .brand-progress__step-icon {
+  background: var(--semantic-success, #00cd72);
+  color: #fff;
+}
+.brand-progress__step.is-active .brand-progress__step-icon {
+  color: var(--comfy-yellow);
+}
+.brand-progress__step.is-pending .brand-progress__step-icon {
+  color: var(--neutral-500);
+}
+.brand-progress__step-spinner {
+  animation: brand-step-spin 1s linear infinite;
+}
+@keyframes brand-step-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.brand-progress__step-label {
+  font-size: clamp(9px, 1.2vw, 11px);
+  color: var(--neutral-100);
+  text-align: center;
+  line-height: 1.3;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@media (max-width: 720px) {
+  .brand-progress__step-label {
+    white-space: normal;
+    word-break: break-word;
+  }
+}
+.brand-progress__step.is-active .brand-progress__step-label {
+  color: var(--neutral-100);
+}
+.brand-progress__step.is-done .brand-progress__step-label {
+  color: var(--neutral-300);
+}
+@media (prefers-reduced-motion: reduce) {
+  .brand-progress__step-spinner {
+    animation: none;
+  }
+}
 .brand-progress__caption {
   font-size: var(--takeover-fs-body);
-  color: var(--neutral-300);
+  color: var(--neutral-100);
   text-align: center;
   min-height: 1.5em;
-  /* Selectable so users can copy the running phase label (e.g.
-     "Counting files…") into bug reports without waiting for the op
-     to finish. Same allowance now applies to the finished-state
-     banner via `.brand-progress__banner span`. */
+  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
   user-select: text;
   -webkit-user-select: text;
 }
@@ -1022,11 +1318,12 @@ defineExpose({ startOperation, showOperation })
 .brand-progress__substatus {
   margin-top: -8px;
   font-size: var(--takeover-fs-caption, 12px);
-  color: var(--neutral-400);
+  color: var(--neutral-200);
   text-align: center;
   font-variant-numeric: tabular-nums;
   letter-spacing: 0.01em;
   min-height: 1.4em;
+  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
   user-select: text;
   -webkit-user-select: text;
 }
@@ -1041,7 +1338,9 @@ defineExpose({ startOperation, showOperation })
 
 .brand-caption-fade-enter-active,
 .brand-caption-fade-leave-active {
-  transition: opacity 180ms ease, transform 180ms ease;
+  transition:
+    opacity 180ms ease,
+    transform 180ms ease;
 }
 .brand-caption-fade-enter-from {
   opacity: 0;
@@ -1062,44 +1361,53 @@ defineExpose({ startOperation, showOperation })
   }
 }
 
+/* View Logs toggle (lives in the footer bar) */
 .brand-progress__logs-toggle {
-  appearance: none;
-  background: transparent;
-  border: none;
-  color: var(--neutral-400);
-  font-size: var(--takeover-fs-caption, 12px);
-  display: inline-flex;
-  align-items: center;
   gap: 6px;
-  padding: 6px 8px;
-  cursor: pointer;
   border-radius: 6px;
-  transition: color 160ms ease, background-color 160ms ease;
-}
-.brand-progress__logs-toggle:hover,
-.brand-progress__logs-toggle:focus-visible {
-  color: var(--neutral-200);
-  background: var(--brand-surface-bg);
-  outline: none;
+  border: 1px solid rgba(194, 191, 185, 0.09);
+  background: rgba(138, 134, 136, 0.1);
+  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
+  backdrop-filter: blur(75px);
+  color: var(--text);
 }
 .brand-progress__logs-chevron {
+  transform: rotate(180deg);
   transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 .brand-progress__logs-chevron.is-open {
-  transform: rotate(180deg);
+  transform: rotate(0deg);
 }
+/* Log panel that opens above the footer bar */
 .brand-progress__logs-wrap {
-  width: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+}
+.brand-progress__logs-wrap.is-expanded {
+  border: 1px solid var(--brand-surface-border);
+  background: var(--brand-surface-bg);
+  backdrop-filter: blur(8px);
+}
+.brand-progress__logs-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--brand-surface-border);
+}
+.brand-progress__logs-panel-title {
+  font-size: var(--takeover-fs-caption, 12px);
+  color: var(--neutral-200);
+  font-weight: 500;
+}
+.brand-progress__logs-copy {
+  flex: none;
 }
 .brand-progress__logs {
   width: 100%;
-  height: clamp(160px, 28vh, 320px);
+  height: clamp(140px, 25vh, 260px);
   overflow-y: auto;
-  margin-top: 8px;
   padding: 12px 14px;
-  border-radius: 10px;
-  border: 1px solid var(--brand-surface-border);
-  background: var(--brand-surface-bg);
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 11px;
   line-height: 1.55;
@@ -1107,28 +1415,10 @@ defineExpose({ startOperation, showOperation })
   text-align: left;
   white-space: pre-wrap;
   word-break: break-word;
-  backdrop-filter: blur(4px);
-  /* Selectable so users can copy the visible log tail manually even
-     before clicking the BaseCopyButton (which writes the FULL
-     unbounded buffer — see `getTerminalLogText`). */
   user-select: text;
   -webkit-user-select: text;
 }
 
-/* Header row hosting the "View logs" disclosure + a Copy button on
-   the right. Copy is only visible while the accordion is open so a
-   collapsed log doesn't suggest there's anything to copy yet. */
-.brand-progress__logs-header {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-.brand-progress__logs-copy {
-  margin-left: 4px;
-}
-
 /* Row hosting the error / port-conflict detail line + its inline
    Copy button. Flex with the copy button hugging the right edge so
    the message text reads naturally on the left. */
@@ -1201,21 +1491,50 @@ defineExpose({ startOperation, showOperation })
   white-space: pre-wrap;
 }
 
-/* Pinned footer band — slotted into BrandTakeoverLayout's `#footer`
-   so the buttons hug the takeover's bottom edge instead of crowding
-   the centered hero stack above. */
+/* Footer — positioned container for the bar + the logs panel above it */
 .brand-progress__footer {
   position: absolute;
-  bottom: clamp(24px, 4vh, 48px);
-  left: 50%;
-  transform: translateX(-50%);
-  display: inline-flex;
+  bottom: clamp(16px, 2.5vh, 32px);
+  left: clamp(16px, 2.5vw, 32px);
+  right: clamp(16px, 2.5vw, 32px);
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.brand-progress__footer-bar {
+  display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 12px;
-  z-index: 3;
+  flex-wrap: wrap;
+}
+.brand-progress__footer-bar.is-centered {
+  justify-content: center;
+}
+.brand-progress__footer-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
 }
 .brand-progress__footer-btn {
-  min-width: 160px;
+  min-width: auto;
+  padding: 7px 14px;
+  font-size: 13px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+.brand-progress__footer-btn.brand-ghost {
+  border-color: var(--neutral-500);
+  color: var(--neutral-100);
+}
+@media (max-width: 720px) {
+  .brand-progress__footer-btn {
+    padding: 6px 10px;
+    font-size: 12px;
+  }
 }
 /* Destructive variant for the port-conflict Kill Process button.
    Pairs with `.brand-ghost` to keep the chrome consistent — same
diff --git a/src/renderer/src/views/TrackModal.vue b/src/renderer/src/views/TrackModal.vue
index fc9c21fb..239901ab 100644
--- a/src/renderer/src/views/TrackModal.vue
+++ b/src/renderer/src/views/TrackModal.vue
@@ -250,7 +250,6 @@ defineExpose({ open })
           <div class="track-field">
             <label class="track-label">{{ $t('track.detectedType') }}</label>
             <BaseSelect
-              variant="brand"
               :model-value="selectedProbeValue"
               :options="probeOptions"
               :placeholder="selectPlaceholder"
diff --git a/src/renderer/src/views/chooser/chooser-tiles.css b/src/renderer/src/views/chooser/chooser-tiles.css
index eba50112..fbb1370b 100644
--- a/src/renderer/src/views/chooser/chooser-tiles.css
+++ b/src/renderer/src/views/chooser/chooser-tiles.css
@@ -67,12 +67,18 @@
 .chooser-tile-name {
   font-size: 16px;
   font-weight: 600;
-  display: flex;
-  align-items: center;
+  display: block;
   color: var(--neutral-100);
-  gap: 6px;
   /* Reserve space for the type icon at top-left so name doesn't collide. */
   margin-top: auto;
+  /* Single-line ellipsis: long install names (cloud workspace names,
+   * user-renamed installs) must not blow out the tile's fixed width
+   * or wrap into the pill row below. */
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .chooser-tile-meta {
diff --git a/src/renderer/src/views/comfyUISettings/ArgsBuilderField.test.ts b/src/renderer/src/views/comfyUISettings/ArgsBuilderField.test.ts
index 67f7ae00..23ac42f8 100644
--- a/src/renderer/src/views/comfyUISettings/ArgsBuilderField.test.ts
+++ b/src/renderer/src/views/comfyUISettings/ArgsBuilderField.test.ts
@@ -69,7 +69,7 @@ afterEach(() => {
 describe('ArgsBuilderField — inline autocomplete', () => {
   it('does not render the popover when the input is empty', async () => {
     const wrapper = await mountField()
-    expect(wrapper.find('.args-field-ac').exists()).toBe(false)
+    expect(wrapper.find('.args-raw-input-ac').exists()).toBe(false)
   })
 
   it('renders matching suggestions while the user types a partial flag', async () => {
@@ -79,9 +79,9 @@ describe('ArgsBuilderField — inline autocomplete', () => {
     await input.setValue('--lo')
     await flushPromises()
 
-    const popover = wrapper.find('.args-field-ac')
+    const popover = wrapper.find('.args-raw-input-ac')
     expect(popover.exists()).toBe(true)
-    const names = popover.findAll('.args-field-ac-flag').map((n) => n.text())
+    const names = popover.findAll('.args-raw-input-ac-flag').map((n) => n.text())
     expect(names).toContain('--lowvram')
     // `--cpu` doesn't match "lo" so it shouldn't surface.
     expect(names).not.toContain('--cpu')
@@ -93,7 +93,7 @@ describe('ArgsBuilderField — inline autocomplete', () => {
     await input.trigger('focusin')
     await input.setValue('--lo')
     await flushPromises()
-    expect(wrapper.find('.args-field-ac').text()).toContain('Reduce VRAM')
+    expect(wrapper.find('.args-raw-input-ac').text()).toContain('Reduce VRAM')
   })
 
   it("emits `update` with the spliced flag when a suggestion is clicked", async () => {
@@ -104,7 +104,7 @@ describe('ArgsBuilderField — inline autocomplete', () => {
     await flushPromises()
 
     const lowvramOption = wrapper
-      .findAll('.args-field-ac-item')
+      .findAll('.args-raw-input-ac-item')
       .find((o) => o.text().includes('--lowvram'))
     await lowvramOption?.trigger('mousedown')
     await flushPromises()
@@ -121,15 +121,15 @@ describe('ArgsBuilderField — inline autocomplete', () => {
     await input.trigger('focusin')
     await input.setValue('--lo')
     await flushPromises()
-    expect(wrapper.find('.args-field-ac').exists()).toBe(true)
+    expect(wrapper.find('.args-raw-input-ac').exists()).toBe(true)
 
     await input.trigger('keydown', { key: 'Escape' })
     await flushPromises()
-    expect(wrapper.find('.args-field-ac').exists()).toBe(false)
+    expect(wrapper.find('.args-raw-input-ac').exists()).toBe(false)
 
     await input.setValue('--low')
     await flushPromises()
-    expect(wrapper.find('.args-field-ac').exists()).toBe(true)
+    expect(wrapper.find('.args-raw-input-ac').exists()).toBe(true)
   })
 
   it('suppresses suggestions while filling a value-typed flag', async () => {
@@ -140,13 +140,13 @@ describe('ArgsBuilderField — inline autocomplete', () => {
     // typing the PORT value, not a flag name, so no dropdown.
     await input.setValue('--port 81')
     await flushPromises()
-    expect(wrapper.find('.args-field-ac').exists()).toBe(false)
+    expect(wrapper.find('.args-raw-input-ac').exists()).toBe(false)
   })
 
   it('still works as a plain text input when no installationId is provided', async () => {
     const wrapper = await mountField({ installationId: null })
     expect(wrapper.find('input').exists()).toBe(true)
     expect((window as unknown as { api: { getComfyArgs: ReturnType<typeof vi.fn> } }).api.getComfyArgs).not.toHaveBeenCalled()
-    expect(wrapper.find('.args-field-ac').exists()).toBe(false)
+    expect(wrapper.find('.args-raw-input-ac').exists()).toBe(false)
   })
 })
diff --git a/src/renderer/src/views/comfyUISettings/ArgsBuilderField.vue b/src/renderer/src/views/comfyUISettings/ArgsBuilderField.vue
index cda58cab..97bcad25 100644
--- a/src/renderer/src/views/comfyUISettings/ArgsBuilderField.vue
+++ b/src/renderer/src/views/comfyUISettings/ArgsBuilderField.vue
@@ -1,28 +1,14 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Settings } from 'lucide-vue-next'
-import BaseInput from '../../components/ui/BaseInput.vue'
+import ArgsRawInput from './ArgsRawInput.vue'
 import type { ComfyArgDef, DetailField } from '../../types/ipc'
-import { useArgsAutocomplete } from '../../composables/useArgsAutocomplete'
 
 /**
  * Compact summary row for the `launchArgs` field. Shows the current
- * arg string (or a placeholder when empty) with an inline gear icon
- * docked on the input's right edge that opens the `ArgsBuilderPage`
- * sub-page.
- *
- * Carries the inline-autocomplete affordance from the legacy
- * ArgsBuilder modal: typing a partial flag (e.g. `--lo`) drops a
- * popover of matching schema flags with help text below the input.
- * The drawer's 400px width can't fit the categorized editor inline,
- * but it can fit a focused suggestion list — and surfacing it here
- * matches the user's muscle memory from the legacy field.
- *
- * Schema is loaded once per `installationId` via `get-comfy-args`,
- * same IPC the sub-page uses. The prop is optional so non-launchArgs
- * surfaces (e.g. instance-picker contexts that don't know an install
- * id yet) degrade gracefully to a plain text input.
+ * arg string with inline autocomplete and a gear icon that opens the
+ * full `ArgsBuilderPage` sub-page.
  */
 
 interface Props {
@@ -33,10 +19,7 @@ interface Props {
 const props = defineProps<Props>()
 
 const emit = defineEmits<{
-  /** Parent should swap drawer body to the args sub-page. */
   open: []
-  /** Live edit of the raw text — same emit shape as PathField / EnvVarsField
-   *  so the parent's dispatch can route them through `updateField`. */
   update: [field: DetailField, value: string]
 }>()
 
@@ -45,7 +28,6 @@ const { t } = useI18n()
 const stringValue = computed(() => (props.field.value == null ? '' : String(props.field.value)))
 const localValue = ref(stringValue.value)
 watch(stringValue, (v) => {
-  // Parent commits round-trip into us — keep the mirror in sync.
   if (v !== localValue.value) localValue.value = v
 })
 
@@ -60,7 +42,6 @@ async function loadSchema(id: string | undefined): Promise<void> {
     const result = await window.api.getComfyArgs(id)
     schema.value = result?.args ?? []
   } catch {
-    // Silent failure — the field still works as a plain text input.
     schema.value = []
   }
 }
@@ -68,180 +49,36 @@ async function loadSchema(id: string | undefined): Promise<void> {
 onMounted(() => void loadSchema(props.installationId))
 watch(() => props.installationId, (id) => void loadSchema(id))
 
-const rowRef = ref<HTMLElement | null>(null)
-const focused = ref(false)
-
-const autocomplete = useArgsAutocomplete({
-  value: localValue,
-  schema,
-  focused,
-  onAccept(next) {
-    localValue.value = next
-    emit('update', props.field, next)
-    void nextTick(() => {
-      const input = rowRef.value?.querySelector('input')
-      if (input) {
-        input.focus()
-        const len = input.value.length
-        input.setSelectionRange(len, len)
-      }
-    })
-  },
-})
-
 function handleEdit(): void {
   emit('open')
 }
 
 function handleInput(value: string): void {
-  // Live mirror so the autocomplete sees every keystroke. Defer the
-  // parent commit to `@change` (blur/Enter) so we don't thrash the
-  // IPC update pipeline on every character.
   localValue.value = value
 }
 
 function handleChange(value: string): void {
   emit('update', props.field, value)
 }
-
-function onFocus(): void {
-  focused.value = true
-}
-function onBlur(): void {
-  focused.value = false
-}
-function onKeydown(e: KeyboardEvent): void {
-  if (autocomplete.handleKeydown(e.key) === 'consumed') e.preventDefault()
-}
 </script>
 
 <template>
-  <div
-    ref="rowRef"
-    class="args-field-row"
-    @focusin="onFocus"
-    @focusout="onBlur"
-    @keydown="onKeydown"
+  <ArgsRawInput
+    :model-value="localValue"
+    :schema="schema"
+    :placeholder="t('comfyUISettings.argsPlaceholder', 'No arguments set')"
+    :aria-label="field.label"
+    @update:model-value="handleInput"
+    @change="handleChange"
   >
-    <BaseInput
-      mono
-      :model-value="localValue"
-      :placeholder="t('comfyUISettings.argsPlaceholder', 'No arguments set')"
-      :aria-label="field.label"
-      @update:model-value="handleInput"
-      @change="handleChange"
-    >
-      <template #trailing>
-        <button
-          type="button"
-          :aria-label="t('comfyUISettings.configureArgs', 'Configure arguments')"
-          @click="handleEdit"
-        >
-          <Settings :size="14" />
-        </button>
-      </template>
-    </BaseInput>
-    <ul
-      v-if="autocomplete.visible.value"
-      class="args-field-ac"
-      role="listbox"
-      :aria-label="t('comfyUISettings.argsAutocompleteLabel', 'Argument suggestions')"
-    >
-      <li
-        v-for="(m, i) in autocomplete.matches.value"
-        :key="m.name"
-        class="args-field-ac-item"
-        :class="{ selected: i === autocomplete.acIndex.value }"
-        role="option"
-        :aria-selected="i === autocomplete.acIndex.value"
-        @mousedown.prevent="autocomplete.completeArg(m.name)"
-        @mouseenter="autocomplete.acIndex.value = i"
+    <template #trailing>
+      <button
+        type="button"
+        :aria-label="t('comfyUISettings.configureArgs', 'Configure arguments')"
+        @click="handleEdit"
       >
-        <span class="args-field-ac-flag">{{ m.flag }}</span>
-        <span v-if="m.type !== 'boolean'" class="args-field-ac-meta">
-          {{ m.metavar ? (m.type === 'optional-value' ? `[${m.metavar}]` : m.metavar) : '' }}
-        </span>
-        <span class="args-field-ac-help">{{ m.help }}</span>
-      </li>
-      <li class="args-field-ac-hint" aria-hidden="true">
-        {{ t('comfyUISettings.argsAutocompleteHint', '↑↓ navigate · Tab/Enter select · Esc dismiss') }}
-      </li>
-    </ul>
-  </div>
+        <Settings :size="14" />
+      </button>
+    </template>
+  </ArgsRawInput>
 </template>
-
-<style scoped>
-.args-field-row {
-  position: relative;
-}
-
-/* Inline autocomplete popover — anchored under the BaseInput while
- * typing a partial flag. Tokens only; matches the BaseSelect listbox
- * chrome so the two surfaces read as the same family. */
-.args-field-ac {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  z-index: 50;
-  margin: 0;
-  padding: 4px;
-  list-style: none;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
-  max-height: 280px;
-  overflow-y: auto;
-}
-
-.args-field-ac-item {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  padding: 6px 8px;
-  font-size: 12px;
-  color: var(--text);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: background-color 120ms ease;
-}
-
-.args-field-ac-item.selected,
-.args-field-ac-item:hover {
-  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
-}
-
-.args-field-ac-flag {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-weight: 600;
-  color: var(--accent-primary);
-  flex-shrink: 0;
-}
-
-.args-field-ac-meta {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: 11px;
-  color: var(--text-muted);
-  flex-shrink: 0;
-}
-
-.args-field-ac-help {
-  color: var(--text-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  flex: 1;
-}
-
-.args-field-ac-hint {
-  padding: 4px 8px 2px;
-  font-size: 10px;
-  color: color-mix(in srgb, var(--text-muted) 70%, transparent);
-  border-top: 1px solid var(--border);
-  margin-top: 2px;
-  text-align: right;
-  cursor: default;
-}
-</style>
diff --git a/src/renderer/src/views/comfyUISettings/ArgsBuilderPage.vue b/src/renderer/src/views/comfyUISettings/ArgsBuilderPage.vue
index ca2f2c7e..e6b9e496 100644
--- a/src/renderer/src/views/comfyUISettings/ArgsBuilderPage.vue
+++ b/src/renderer/src/views/comfyUISettings/ArgsBuilderPage.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { AlertCircle, ArrowLeft, Loader2, Search, SearchX, X } from 'lucide-vue-next'
 import BaseInput from '../../components/ui/BaseInput.vue'
 import BaseSelect, { type BaseSelectOption } from '../../components/ui/BaseSelect.vue'
+import ArgsRawInput from './ArgsRawInput.vue'
 import type { ComfyArgDef } from '../../types/ipc'
 import { parseArgs, serialize, tokenize } from '../../lib/argsParser'
 import { scoreName } from '../../utils/fuzzyMatch'
@@ -314,10 +315,10 @@ const structuredGroups = computed(() => {
 
 const hasResults = computed(() => Array.from(structuredGroups.value.values()).some((items) => items.length > 0))
 
-// Free-text mirror — lets the user paste raw args directly. The
-// outer ArgsBuilderField on the main settings panel owns the inline
-// autocomplete affordance; this sub-page is for categorized browsing
-// + the search box below, so the raw row stays a plain text input.
+function onRawInput(value: string): void {
+  localValue.value = value
+}
+
 function onRawChange(value: string): void {
   localValue.value = value
   emit('update', value)
@@ -368,10 +369,12 @@ const unknownFlagsMessage = computed(() => {
 
     <div class="args-page-raw">
       <label class="args-page-raw-label">{{ t('comfyUISettings.argsRawLabel', 'Raw arguments') }}</label>
-      <BaseInput
-        mono
+      <ArgsRawInput
         :model-value="localValue"
+        :schema="schema"
         :placeholder="t('comfyUISettings.argsPlaceholder', 'No arguments set')"
+        :aria-label="t('comfyUISettings.argsRawLabel', 'Raw arguments')"
+        @update:model-value="onRawInput"
         @change="onRawChange"
       />
       <p class="args-page-raw-hint">
@@ -448,7 +451,6 @@ const unknownFlagsMessage = computed(() => {
                carry the layout class. -->
           <div class="args-page-exclusive-select">
             <BaseSelect
-              variant="brand"
               :model-value="activeInGroup(item.group)"
               :options="optionsForGroup(item.args)"
               :aria-label="t('comfyUISettings.argsExclusiveLabel', 'Choose one')"
@@ -698,6 +700,7 @@ const unknownFlagsMessage = computed(() => {
 .args-page-item {
   display: flex;
   flex-direction: column;
+  min-width: 0;
 }
 
 .args-page-item + .args-page-item {
@@ -807,8 +810,8 @@ const unknownFlagsMessage = computed(() => {
 
 /* Exclusive ("choose one") cluster — the faint inline label sits above
  * a BaseSelect picker so the group can be cleared via a synthetic "None"
- * option (native radios couldn't deselect). The brand-variant trigger
- * tints when a member is active and dims to the placeholder when not. */
+ * option (native radios couldn't deselect). Uses the shared BaseSelect
+ * chrome — same as Global Settings language and other select fields. */
 .args-page-row-cluster-label {
   padding: 0 2px;
   margin: 2px 0 4px;
@@ -823,10 +826,7 @@ const unknownFlagsMessage = computed(() => {
 }
 
 .args-page-exclusive-select {
-  /* Align the trigger with sibling .args-page-arg-row, which uses the
-   * same -10px negative margin to extend its hover background to the
-   * page edges. */
-  margin: 0 -10px;
+  min-width: 0;
 }
 
 /* TODO(brand-cleanup): the radio cluster styles below are no longer
diff --git a/src/renderer/src/views/comfyUISettings/ArgsRawInput.vue b/src/renderer/src/views/comfyUISettings/ArgsRawInput.vue
new file mode 100644
index 00000000..d52872a2
--- /dev/null
+++ b/src/renderer/src/views/comfyUISettings/ArgsRawInput.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { ref, toRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import BaseInput from '../../components/ui/BaseInput.vue'
+import { useArgsAutocomplete } from '../../composables/useArgsAutocomplete'
+import type { ComfyArgDef } from '../../types/ipc'
+
+/**
+ * Raw startup-arguments text input with inline flag autocomplete.
+ * Shared by the compact settings field and the full args sub-page.
+ */
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    schema: ComfyArgDef[]
+    placeholder?: string
+    ariaLabel?: string
+  }>(),
+  {
+    placeholder: '',
+    ariaLabel: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  change: [value: string]
+}>()
+
+const { t } = useI18n()
+
+const localValue = ref(props.modelValue)
+watch(
+  () => props.modelValue,
+  (next) => {
+    if (next !== localValue.value) localValue.value = next
+  },
+)
+
+const focused = ref(false)
+
+const autocomplete = useArgsAutocomplete({
+  value: localValue,
+  schema: toRef(props, 'schema'),
+  focused,
+  onAccept(next) {
+    localValue.value = next
+    emit('update:modelValue', next)
+    emit('change', next)
+  },
+})
+
+function handleInput(value: string): void {
+  localValue.value = value
+  emit('update:modelValue', value)
+}
+
+function handleChange(value: string): void {
+  emit('change', value)
+}
+
+function onFocus(): void {
+  focused.value = true
+}
+function onBlur(): void {
+  focused.value = false
+}
+function onKeydown(e: KeyboardEvent): void {
+  if (autocomplete.handleKeydown(e.key) === 'consumed') e.preventDefault()
+}
+</script>
+
+<template>
+  <div
+    class="args-raw-input"
+    @focusin="onFocus"
+    @focusout="onBlur"
+    @keydown="onKeydown"
+  >
+    <BaseInput
+      mono
+      :model-value="localValue"
+      :placeholder="placeholder || t('comfyUISettings.argsPlaceholder', 'No arguments set')"
+      :aria-label="ariaLabel"
+      @update:model-value="handleInput"
+      @change="handleChange"
+    >
+      <template v-if="$slots.trailing" #trailing>
+        <slot name="trailing" />
+      </template>
+    </BaseInput>
+    <ul
+      v-if="autocomplete.visible.value"
+      class="args-raw-input-ac"
+      role="listbox"
+      :aria-label="t('comfyUISettings.argsAutocompleteLabel', 'Argument suggestions')"
+    >
+      <li
+        v-for="(m, i) in autocomplete.matches.value"
+        :key="m.name"
+        class="args-raw-input-ac-item"
+        :class="{ selected: i === autocomplete.acIndex.value }"
+        role="option"
+        :aria-selected="i === autocomplete.acIndex.value"
+        @mousedown.prevent="autocomplete.completeArg(m.name)"
+        @mouseenter="autocomplete.acIndex.value = i"
+      >
+        <span class="args-raw-input-ac-flag">{{ m.flag }}</span>
+        <span v-if="m.type !== 'boolean'" class="args-raw-input-ac-meta">
+          {{ m.metavar ? (m.type === 'optional-value' ? `[${m.metavar}]` : m.metavar) : '' }}
+        </span>
+        <span class="args-raw-input-ac-help">{{ m.help }}</span>
+      </li>
+      <li class="args-raw-input-ac-hint" aria-hidden="true">
+        {{ t('comfyUISettings.argsAutocompleteHint', '↑↓ navigate · Tab/Enter select · Esc dismiss') }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.args-raw-input {
+  position: relative;
+}
+
+.args-raw-input-ac {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 50;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.args-raw-input-ac-item {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 6px 8px;
+  font-size: 12px;
+  color: var(--text);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.args-raw-input-ac-item.selected,
+.args-raw-input-ac-item:hover {
+  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
+}
+
+.args-raw-input-ac-flag {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-weight: 600;
+  color: var(--accent-primary);
+  flex-shrink: 0;
+}
+
+.args-raw-input-ac-meta {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.args-raw-input-ac-help {
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1;
+}
+
+.args-raw-input-ac-hint {
+  padding: 4px 8px 2px;
+  font-size: 10px;
+  color: color-mix(in srgb, var(--text-muted) 70%, transparent);
+  border-top: 1px solid var(--border);
+  margin-top: 2px;
+  text-align: right;
+  cursor: default;
+}
+</style>
diff --git a/src/renderer/src/views/comfyUISettings/BooleanToggle.vue b/src/renderer/src/views/comfyUISettings/BooleanToggle.vue
index c8ddf434..f82b29a4 100644
--- a/src/renderer/src/views/comfyUISettings/BooleanToggle.vue
+++ b/src/renderer/src/views/comfyUISettings/BooleanToggle.vue
@@ -1,19 +1,10 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 import type { DetailField } from '../../types/ipc'
 
 /**
- * Boolean toggle for the ComfyUI Settings drawer. Modeled on shadcn's
- * Switch: `data-state` attribute drives all visual state, thumb is a
- * real child element transitioned via `translate-x`.
- *
- * Owns a local `visualOn` ref so the click is optimistic — `updateField`
- * in the parent awaits an IPC roundtrip + section reload, so without
- * this the visible state would snap to its destination only after the
- * roundtrip and the CSS transition would never have a chance to play.
- * The watcher reconciles back to `field.value` (no-op on success, snap
- * on failure / external change).
+ * macOS Settings-style boolean switch. The parent field row owns the
+ * label; this component renders only the switch control on the right.
  */
 
 interface Props {
@@ -26,8 +17,6 @@ const emit = defineEmits<{
   update: [value: boolean]
 }>()
 
-const { t } = useI18n()
-
 const visualOn = ref(props.field.value === true)
 
 watch(
@@ -57,28 +46,21 @@ function handleClick(): void {
     <span class="bt-track" :aria-hidden="true">
       <span class="bt-thumb"></span>
     </span>
-    <span class="bt-label">{{ t('comfyUISettings.toggleOn', 'Enabled') }}</span>
   </button>
 </template>
 
 <style scoped>
 .bt-switch {
+  flex-shrink: 0;
   display: inline-flex;
   align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 8px 12px;
-  background: var(--neutral-800);
-  border: 1px solid var(--chooser-surface-border);
-  border-radius: 8px;
-  color: var(--neutral-100);
-  font-size: 13px;
-  text-align: left;
+  padding: 0;
+  background: transparent;
+  border: none;
   cursor: pointer;
 }
 
 .bt-track {
-  flex-shrink: 0;
   position: relative;
   display: inline-block;
   width: 36px;
diff --git a/src/renderer/src/views/comfyUISettings/ChannelPicker.vue b/src/renderer/src/views/comfyUISettings/ChannelPicker.vue
index 87928211..548ebb97 100644
--- a/src/renderer/src/views/comfyUISettings/ChannelPicker.vue
+++ b/src/renderer/src/views/comfyUISettings/ChannelPicker.vue
@@ -1,38 +1,43 @@
 <script setup lang="ts">
 import { computed, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { Loader2 } from 'lucide-vue-next'
 import BaseSelect, { type BaseSelectOption } from '../../components/ui/BaseSelect.vue'
+import InfoTooltip from '../../components/InfoTooltip.vue'
+import { formatRelativeFromMs } from '../../lib/datetime'
 import type { ActionDef, DetailField, DetailFieldOption } from '../../types/ipc'
 import { TID } from '../../../../shared/testIds'
 
 /**
- * Update Channel picker for the brand-redesigned Settings drawer (v2).
- * Replaces the legacy `DetailSection`'s `channel-cards` branch with the
- * drawer-style layout from the Figma: a dropdown to pick a channel, a
- * preview block for the selected channel's version info, and a row of
- * actions (Update Now / Copy & Update / Switch Channel) — actions are
- * nested in `option.data.actions` per the same payload main builds.
- *
- * Draft state: switching to a different channel via the dropdown does
- * NOT commit until the user clicks an action. The committed channel is
- * `field.value`; the drafted choice lives in `draftValue` until the
- * action fires. Mirrors `DetailSection`'s `draftValues` reactive map.
+ * Unified update surface: headline status, inset channel card, and
+ * compact action row aligned with Global Settings UpdatesSection.
  */
 
 interface Props {
   field: DetailField
+  sectionActions?: ActionDef[]
+  /** Inline-action busy set — drives the per-button spinner +
+   *  disabled state so quick actions like Check-for-Update feel
+   *  acknowledged. Passed through from SettingsSectionList. */
+  runningActionIds?: Set<string>
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  sectionActions: () => [],
+  runningActionIds: () => new Set<string>()
+})
+
+const runningIdsSet = computed(() => props.runningActionIds ?? new Set<string>())
+function isActionRunning(actionId: string): boolean {
+  return runningIdsSet.value.has(actionId)
+}
 
 const emit = defineEmits<{
   action: [action: ActionDef]
 }>()
 
-const { t } = useI18n()
+const { t, d } = useI18n()
 
-// Local draft selection — reset whenever main commits a new value
-// (e.g. after a successful channel switch).
 const state = reactive({
   draft: '' as string
 })
@@ -62,22 +67,205 @@ interface PreviewData {
   installedVersion?: string
   latestVersion?: string
   lastChecked?: string
+  lastCheckedAt?: number
   updateAvailable?: boolean
 }
 
 const preview = computed<PreviewData | null>(() => {
   const data = selectedOption.value?.data as PreviewData | undefined
   if (!data) return null
-  // Discard `actions` for the preview computation — only the metadata
-  // fields are rendered as rows.
   return {
     installedVersion: data.installedVersion,
     latestVersion: data.latestVersion,
     lastChecked: data.lastChecked,
+    lastCheckedAt: data.lastCheckedAt,
     updateAvailable: data.updateAvailable
   }
 })
 
+function formatVersionLabel(raw: string | undefined): string {
+  if (!raw || raw === '—') return '—'
+  const trimmed = raw.trim()
+  if (trimmed.startsWith('v') || trimmed.startsWith('V')) return trimmed
+  return `v${trimmed}`
+}
+
+function normalizeVersion(raw: string | undefined): string {
+  if (!raw || raw === '—') return ''
+  return raw.trim().replace(/^[vV]/, '').toLowerCase()
+}
+
+const versionsMatch = computed(() => {
+  if (!preview.value) return false
+  const installed = normalizeVersion(preview.value.installedVersion)
+  const latest = normalizeVersion(preview.value.latestVersion)
+  if (!installed || !latest) return false
+  return installed === latest
+})
+
+const headline = computed(() => {
+  if (preview.value?.installedVersion) {
+    return formatVersionLabel(preview.value.installedVersion)
+  }
+  if (!preview.value) {
+    return draftIsCurrent.value
+      ? t('channelCards.upToDate', 'Up to date')
+      : t('channelCards.switchTo', { channel: selectedOption.value?.label ?? '' })
+  }
+  if (preview.value.updateAvailable) {
+    const ver = preview.value.latestVersion
+    return ver ? formatVersionLabel(ver) : t('channelCards.updateAvailable', 'Update available')
+  }
+  return formatVersionLabel(preview.value.installedVersion)
+})
+
+const statusBadge = computed(() => {
+  if (!preview.value) return null
+  if (preview.value.updateAvailable) {
+    return t('channelCards.updateAvailable', 'Update available')
+  }
+  return t('channelCards.upToDate', 'Up to date')
+})
+
+const statusBadgeTone = computed<'current' | 'update'>(() =>
+  preview.value?.updateAvailable ? 'update' : 'current'
+)
+
+interface StatRow {
+  id: string
+  label: string
+  value: string
+  title?: string
+  highlight?: boolean
+}
+
+const lastCheckedDisplay = computed<{ value: string; title?: string } | null>(() => {
+  if (!preview.value) return null
+  if (preview.value.lastCheckedAt) {
+    const ms = preview.value.lastCheckedAt
+    let title: string | undefined
+    try {
+      title = d(new Date(ms), 'long')
+    } catch {
+      title = new Date(ms).toLocaleString()
+    }
+    return { value: formatRelativeFromMs(ms, t), title }
+  }
+  if (preview.value.lastChecked && preview.value.lastChecked !== '—') {
+    return { value: preview.value.lastChecked }
+  }
+  return null
+})
+
+const statRows = computed<StatRow[]>(() => {
+  if (!preview.value) return []
+  const rows: StatRow[] = []
+  const updateAvailable = preview.value.updateAvailable === true
+
+  if (updateAvailable && preview.value.installedVersion) {
+    rows.push({
+      id: 'installed',
+      label: t('channelCards.installedVersion', 'Installed'),
+      value: formatVersionLabel(preview.value.installedVersion)
+    })
+  }
+  if (updateAvailable && preview.value.latestVersion && !versionsMatch.value) {
+    rows.push({
+      id: 'latest',
+      label: t('channelCards.latestVersion', 'Latest'),
+      value: formatVersionLabel(preview.value.latestVersion),
+      highlight: true
+    })
+  }
+
+  const lastChecked = lastCheckedDisplay.value
+  if (lastChecked) {
+    rows.push({
+      id: 'last-checked',
+      label: t('channelCards.lastChecked', 'Last checked'),
+      value: lastChecked.value,
+      title: lastChecked.title
+    })
+  }
+
+  return rows
+})
+
+const allActions = computed<ActionDef[]>(() => [...selectedActions.value, ...props.sectionActions])
+
+const checkUpdateAction = computed<ActionDef | undefined>(() =>
+  allActions.value.find((a) => a.id === 'check-update')
+)
+
+const promotedPrimaryActions = computed<ActionDef[]>(() =>
+  selectedActions.value.filter((a) => a.id === 'update-comfyui' || a.id === 'copy-update')
+)
+
+const otherSecondaryActions = computed<ActionDef[]>(() =>
+  selectedActions.value.filter(
+    (a) =>
+      a.id !== 'check-update' &&
+      a.id !== 'update-comfyui' &&
+      a.id !== 'copy-update' &&
+      a.style !== 'primary' &&
+      a.style !== 'accent'
+  )
+)
+
+const showCheckInHeader = computed(
+  () =>
+    checkUpdateAction.value != null &&
+    promotedPrimaryActions.value.length === 0 &&
+    otherSecondaryActions.value.length === 0
+)
+
+// When an update is already detected, the user can see the new version
+// + Update Now / Copy & Update right above — re-checking is redundant.
+// Only surface the manual check when no update is currently visible.
+const showCheckUpdateInFooter = computed(
+  () =>
+    checkUpdateAction.value != null &&
+    !showCheckInHeader.value &&
+    preview.value?.updateAvailable !== true
+)
+
+const showFooterActions = computed(
+  () =>
+    promotedPrimaryActions.value.length > 0 ||
+    otherSecondaryActions.value.length > 0 ||
+    showCheckUpdateInFooter.value
+)
+
+const footerActions = computed<
+  Array<{ action: ActionDef; variant: 'accent' | 'default' | 'danger' }>
+>(() => {
+  const out: Array<{ action: ActionDef; variant: 'accent' | 'default' | 'danger' }> = []
+
+  if (checkUpdateAction.value && showCheckUpdateInFooter.value) {
+    out.push({ action: checkUpdateAction.value, variant: 'default' })
+  }
+
+  for (const action of otherSecondaryActions.value) {
+    out.push({
+      action,
+      variant: action.style === 'danger' ? 'danger' : 'default'
+    })
+  }
+
+  for (const action of promotedPrimaryActions.value) {
+    if (action.id === 'copy-update') {
+      out.push({ action, variant: 'default' })
+    }
+  }
+
+  const updateNow = promotedPrimaryActions.value.find((a) => a.id === 'update-comfyui')
+  if (updateNow) {
+    out.push({ action: updateNow, variant: 'accent' })
+  }
+
+  return out
+})
+
 function optionLabel(opt: DetailFieldOption): string {
   if (opt.value === currentValue.value) {
     return `${opt.label} — ${t('channelCards.current', 'Current')}`
@@ -99,110 +287,93 @@ const selectOptions = computed<BaseSelectOption[]>(() =>
 
 <template>
   <div class="channel-picker">
-    <BaseSelect
-      :model-value="state.draft"
-      :options="selectOptions"
-      :aria-label="field.label"
-      @update:model-value="state.draft = $event"
-    />
-
-    <p v-if="selectedOption?.description" class="channel-picker-desc">
-      {{ selectedOption.description }}
-    </p>
-
-    <!-- Preview card. Per Figma, the channel-level actions (Update Now,
-         Copy & Update, etc.) live INSIDE this card, separated from the
-         info rows by a hairline. When there's no preview (channel switch
-         drafted but no metadata for it) the actions are surfaced below
-         the empty placeholder instead, since the card wouldn't render. -->
-    <div v-if="preview" class="channel-picker-preview">
-      <div class="channel-picker-row">
-        <span class="channel-picker-label">{{
-          t('channelCards.installedVersion', 'Installed Version')
-        }}</span>
-        <span class="channel-picker-value">{{ preview.installedVersion ?? '—' }}</span>
-      </div>
-      <div class="channel-picker-row">
-        <span class="channel-picker-label">{{
-          t('channelCards.latestVersion', 'Latest Version')
-        }}</span>
-        <span class="channel-picker-value">{{ preview.latestVersion ?? '—' }}</span>
+    <div class="channel-picker-status">
+      <div class="channel-picker-headline-row">
+        <p
+          class="channel-picker-headline"
+          :class="{ 'is-update-available': preview?.updateAvailable }"
+        >
+          {{ headline }}
+        </p>
+        <span v-if="statusBadge && preview" class="channel-picker-badge" :class="statusBadgeTone">
+          {{ statusBadge }}
+        </span>
       </div>
-      <div class="channel-picker-row">
-        <span class="channel-picker-label">{{
-          t('channelCards.lastChecked', 'Last Checked')
-        }}</span>
-        <span class="channel-picker-value">{{ preview.lastChecked ?? '—' }}</span>
+
+    </div>
+
+    <dl v-if="statRows.length > 0" class="channel-picker-stats">
+      <div
+        v-for="row in statRows"
+        :key="row.id"
+        class="channel-picker-stat-row"
+        :class="{ 'is-highlight': row.highlight }"
+      >
+        <dt>{{ row.label }}</dt>
+        <dd :title="row.title">{{ row.value }}</dd>
       </div>
-      <div class="channel-picker-row">
-        <span class="channel-picker-label">{{ t('channelCards.status', 'Status') }}</span>
-        <span
-          class="channel-picker-value"
-          :class="{ 'is-update-available': preview.updateAvailable }"
-        >
-          {{
-            preview.updateAvailable
-              ? t('channelCards.updateAvailable', 'Update available')
-              : t('channelCards.upToDate', 'Up to date')
-          }}
+    </dl>
+
+    <div class="channel-picker-card">
+      <div class="channel-picker-channel-header">
+        <span class="channel-picker-field-label">
+          {{ field.label }}
+          <InfoTooltip v-if="field.tooltip" :text="field.tooltip" />
         </span>
+        <button
+          v-if="showCheckInHeader && checkUpdateAction"
+          type="button"
+          class="channel-picker-action compact"
+          :class="{ 'is-running': isActionRunning(checkUpdateAction.id) }"
+          :disabled="checkUpdateAction.enabled === false || isActionRunning(checkUpdateAction.id)"
+          :title="checkUpdateAction.tooltip"
+          @click="emit('action', checkUpdateAction)"
+        >
+          <Loader2
+            v-if="isActionRunning(checkUpdateAction.id)"
+            :size="14"
+            class="channel-picker-action-spinner"
+          />
+          {{ checkUpdateAction.label }}
+        </button>
       </div>
 
-      <div v-if="selectedActions.length > 0" class="channel-picker-card-actions">
-        <p v-if="!draftIsCurrent" class="channel-picker-switch-hint">
-          {{ t('channelCards.switchTo', { channel: selectedOption?.label ?? '' }) }}
+      <div class="channel-picker-channel">
+        <BaseSelect
+          :model-value="state.draft"
+          :options="selectOptions"
+          :aria-label="field.label"
+          @update:model-value="state.draft = $event"
+        />
+        <p v-if="selectedOption?.description" class="channel-picker-desc">
+          {{ selectedOption.description }}
         </p>
-        <div class="channel-picker-action-row">
-          <button
-            v-for="action in selectedActions"
-            :key="action.id"
-            type="button"
-            :class="[
-              'channel-picker-action',
-              {
-                primary: action.style === 'primary',
-                accent: action.style === 'accent',
-                danger: action.style === 'danger'
-              }
-            ]"
-            :disabled="action.enabled === false"
-            :title="action.tooltip"
-            :data-testid="TID.updateActionButton(action.id)"
-            @click="emit('action', action)"
-          >
-            {{ action.label }}
-          </button>
-        </div>
       </div>
-    </div>
-    <p v-else-if="!draftIsCurrent" class="channel-picker-empty">
-      {{ t('channelCards.noInfo', 'No information available for this channel.') }}
-    </p>
-
-    <!-- Fallback action row for the no-preview case (drafted channel
-         has no cached metadata yet). -->
-    <div v-if="!preview && selectedActions.length > 0" class="channel-picker-actions">
-      <p v-if="!draftIsCurrent" class="channel-picker-switch-hint">
+
+      <p v-if="!draftIsCurrent && !preview" class="channel-picker-empty">
+        {{ t('channelCards.noInfo', 'No information available for this channel.') }}
+      </p>
+      <p v-else-if="!draftIsCurrent && preview" class="channel-picker-switch-hint">
         {{ t('channelCards.switchTo', { channel: selectedOption?.label ?? '' }) }}
       </p>
-      <div class="channel-picker-action-row">
+
+      <div v-if="showFooterActions" class="channel-picker-actions">
         <button
-          v-for="action in selectedActions"
+          v-for="{ action, variant } in footerActions"
           :key="action.id"
           type="button"
-          :class="[
-            'channel-picker-action',
-            {
-              primary: action.style === 'primary',
-              accent: action.style === 'accent',
-              danger: action.style === 'danger'
-            }
-          ]"
-          :disabled="action.enabled === false"
+          class="channel-picker-action"
+          :class="[variant, { 'is-running': isActionRunning(action.id) }]"
+          :disabled="action.enabled === false || isActionRunning(action.id)"
           :title="action.tooltip"
           :data-testid="TID.updateActionButton(action.id)"
           @click="emit('action', action)"
         >
+          <Loader2
+            v-if="isActionRunning(action.id)"
+            :size="14"
+            class="channel-picker-action-spinner"
+          />
           {{ action.label }}
         </button>
       </div>
@@ -214,109 +385,228 @@ const selectOptions = computed<BaseSelectOption[]>(() =>
 .channel-picker {
   display: flex;
   flex-direction: column;
-  gap: var(--takeover-gap-sm);
+  gap: 12px;
 }
 
-.channel-picker-desc {
+.channel-picker-headline-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.channel-picker-headline {
   margin: 0;
-  font-size: 12px;
-  color: var(--text-muted);
-  line-height: 16.5px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--text);
 }
 
-.channel-picker-preview {
+.channel-picker-headline.is-update-available {
+  color: var(--accent);
+}
+
+.channel-picker-badge {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  border-radius: 999px;
+}
+
+.channel-picker-badge.current {
+  color: var(--success, #4ade80);
+  background: color-mix(in srgb, var(--success, #4ade80) 12%, transparent);
+}
+
+.channel-picker-badge.update {
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
+.channel-picker-stats {
+  margin: 0;
   display: flex;
   flex-direction: column;
-  padding: 12px;
-  border: 1px solid var(--secondary-background);
+  border: 1px solid var(--chooser-surface-border);
   border-radius: 8px;
-  margin-top: 12px;
+  padding: 4px 12px;
+  background: var(--brand-surface-bg);
 }
 
-/* Each metadata row gets a hairline divider to the next, per Figma. The
- * last row before the in-card action area has no divider — `:has()`
- * keeps the rule declarative without a Vue-template branch. */
-.channel-picker-row {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 12px 0;
-  font-size: var(--takeover-fs-caption);
+.channel-picker-stat-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
   border-top: 1px solid var(--border-hover);
 }
 
-.channel-picker-row:first-child {
-  padding-top: 4px;
+.channel-picker-stat-row:first-child {
   border-top: none;
 }
 
-.channel-picker-preview:not(:has(.channel-picker-card-actions)) .channel-picker-row:last-child {
-  padding-bottom: 4px;
-}
-
-.channel-picker-label {
+.channel-picker-stat-row dt {
+  margin: 0;
+  font-size: 12px;
+  line-height: 16px;
   color: var(--text-muted);
-  font-size: var(--takeover-fs-caption);
 }
 
-.channel-picker-value {
+.channel-picker-stat-row dd {
+  margin: 0;
+  font-size: 13px;
+  line-height: 19px;
   color: var(--neutral-100);
-  font-size: 14px;
-  line-height: 21px;
+  text-align: right;
 }
 
-.channel-picker-value.is-update-available {
-  color: var(--info);
+.channel-picker-stat-row.is-highlight dd {
+  color: var(--accent);
+  font-weight: 500;
 }
 
-.channel-picker-empty {
-  margin: 0;
+.channel-picker-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
   padding: 12px;
-  border: 1px dashed var(--border);
+  border: 1px solid var(--chooser-surface-border);
   border-radius: 8px;
-  font-size: var(--takeover-fs-caption);
-  color: var(--text-muted);
+  background: var(--brand-surface-bg);
 }
 
-.channel-picker-actions {
+.channel-picker-channel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.channel-picker-channel {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
+}
+
+.channel-picker-field-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text-muted);
+  line-height: 16px;
+}
+
+.channel-picker-desc {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 16.5px;
 }
 
+.channel-picker-empty,
 .channel-picker-switch-hint {
   margin: 0;
-  font-size: var(--takeover-fs-caption);
+  font-size: 12px;
+  line-height: 16px;
   color: var(--text-muted);
 }
 
-.channel-picker-action-row {
+.channel-picker-empty {
+  padding: 8px 10px;
+  border: 1px dashed var(--chooser-surface-border);
+  border-radius: 6px;
+}
+
+.channel-picker-actions {
   display: flex;
   flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-hover);
+}
+
+.channel-picker-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   gap: 6px;
+  flex: 0 0 auto;
+  height: 32px;
+  min-height: 32px;
+  padding: 0 16px;
+  border-radius: 8px;
+  border: 1px solid var(--chooser-surface-border);
+  background: var(--brand-surface-bg);
+  color: var(--neutral-100);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition:
+    background-color 100ms ease,
+    filter 100ms ease;
 }
 
-/* Card-internal action row (Figma: actions sit inside the preview
- * card, separated from the metadata rows by a hairline divider, and
- * fill the card width as an evenly-split pair). */
-.channel-picker-card-actions {
-  margin-top: 4px;
-  padding-top: 14px;
-  border-top: 1px solid var(--border-hover);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+.channel-picker-action.is-running {
+  cursor: progress;
+  opacity: 0.85;
 }
 
-.channel-picker-card-actions .channel-picker-action-row {
-  gap: 8px;
+.channel-picker-action-spinner {
+  flex: 0 0 auto;
+  animation: channel-picker-action-spin 0.9s linear infinite;
 }
 
-.channel-picker-card-actions .channel-picker-action {
-  flex: 1;
+@keyframes channel-picker-action-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-.channel-picker-action {
-  border: none;
+.channel-picker-action.compact {
+  height: 28px;
+  min-height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.channel-picker-action:hover:not(:disabled),
+.channel-picker-action:focus-visible:not(:disabled) {
+  background: var(--brand-surface-bg-hover);
+  outline: none;
+}
+
+.channel-picker-action.accent {
+  border-color: var(--accent);
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.channel-picker-action.accent:hover:not(:disabled),
+.channel-picker-action.accent:focus-visible:not(:disabled) {
+  background: var(--accent);
+  color: var(--bg);
+}
+
+.channel-picker-action.danger {
+  color: var(--danger);
+  border-color: var(--chooser-surface-border);
+}
+
+.channel-picker-action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 </style>
diff --git a/src/renderer/src/views/comfyUISettings/EnvVarsField.vue b/src/renderer/src/views/comfyUISettings/EnvVarsField.vue
index 139488b7..9ba9a91c 100644
--- a/src/renderer/src/views/comfyUISettings/EnvVarsField.vue
+++ b/src/renderer/src/views/comfyUISettings/EnvVarsField.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Plus, ShieldAlert, X } from 'lucide-vue-next'
+import { Eye, EyeOff, Plus, X } from 'lucide-vue-next'
 import BaseInput from '../../components/ui/BaseInput.vue'
 import type { DetailField } from '../../types/ipc'
 
+const SENSITIVE_KEY = /TOKEN|KEY|SECRET|PASSWORD|PASS(?!_)|AUTH|CREDENTIAL|API/i
+
+function looksSensitive(key: string): boolean {
+  return SENSITIVE_KEY.test(key)
+}
+
 /**
- * Environment variables field for the brand-redesigned Settings drawer
- * (v2). Mirrors `EnvVarsEditor.vue`'s data model exactly — local KEY /
- * VALUE rows, duplicate-key highlight, single emit when any cell
- * changes — but in the drawer's design language.
- *
- * The parent (`ComfyUISettingsPanel`) listens for `update` and runs the
- * value through the composable's `updateField` → `update-installation`
- * IPC. Same path the legacy modal uses; main applies `sanitizeEnvVars`
- * server-side.
+ * Environment variables key/value editor. The field header and security
+ * callout live in SettingsSectionList — this component is body only.
  */
 
 interface Props {
@@ -35,19 +34,44 @@ interface Row {
 }
 
 const rows = ref<Row[]>([])
+const revealed = ref<Set<number>>(new Set())
+const rowRefs = ref<(HTMLElement | null)[]>([])
+
+function setRowRef(i: number, el: Element | null): void {
+  rowRefs.value[i] = el as HTMLElement | null
+}
+
+function isRevealed(i: number): boolean {
+  return revealed.value.has(i)
+}
+
+function toggleReveal(i: number): void {
+  const next = new Set(revealed.value)
+  if (next.has(i)) next.delete(i)
+  else next.add(i)
+  revealed.value = next
+}
+
+function isMasked(i: number): boolean {
+  const row = rows.value[i]
+  if (!row) return false
+  if (isRevealed(i)) return false
+  return looksSensitive(row.key)
+}
 
-// Sync from prop to local state. Avoid resetting if the structural
-// contents haven't changed — would interrupt mid-edit typing on a key.
 watch(
   () => props.field.value,
   (val) => {
     const dict =
       val && typeof val === 'object' && !Array.isArray(val) ? (val as Record<string, string>) : {}
-    const incoming: Row[] = Object.entries(dict).map(([key, value]) => ({ key, value }))
-    const currentNonEmpty = rows.value.filter((r) => r.key || r.value)
-    if (JSON.stringify(incoming) !== JSON.stringify(currentNonEmpty)) {
-      rows.value = incoming
-    }
+    const serverRows: Row[] = Object.entries(dict).map(([key, value]) => ({ key, value }))
+    // Preserve any in-progress rows whose key is still empty — the
+    // server can't have seen them yet (emitUpdate filters out keyless
+    // rows), so an incoming snapshot that "doesn't mention them" must
+    // not evict them. Previously, typing a value before a key would
+    // round-trip an empty dict and the watch would wipe the row.
+    const localPartial = rows.value.filter((r) => !r.key.trim())
+    rows.value = [...serverRows, ...localPartial]
   },
   { immediate: true }
 )
@@ -79,8 +103,12 @@ function emitUpdate(): void {
   emit('update', props.field, out)
 }
 
-function addRow(): void {
+async function addRow(): Promise<void> {
   rows.value.push({ key: '', value: '' })
+  await nextTick()
+  const last = rowRefs.value[rowRefs.value.length - 1]
+  last?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+  last?.querySelector<HTMLInputElement>('input')?.focus()
 }
 
 function removeRow(i: number): void {
@@ -105,44 +133,72 @@ function onValueChange(i: number, val: string): void {
 
 <template>
   <div class="env-vars-field">
-    <div v-if="rows.length > 0" class="env-vars-list">
-      <div class="env-vars-notice">
-        <ShieldAlert :size="13" />
-        <span>{{ t('envVars.securityWarning') }}</span>
+    <div v-if="rows.length > 0" class="env-vars-rows">
+      <div class="env-vars-head" aria-hidden="true">
+        <span>{{ t('envVars.name') }}</span>
+        <span>{{ t('envVars.value') }}</span>
+        <span class="env-vars-head-action"></span>
       </div>
-      <div v-for="(row, i) in rows" :key="i" class="env-var-row">
-        <div class="env-var-cell env-var-key">
+
+      <div
+        v-for="(row, i) in rows"
+        :key="i"
+        :ref="(el) => setRowRef(i, el as Element | null)"
+        class="env-var-row"
+      >
+        <div class="env-var-cell">
           <BaseInput
             mono
             :model-value="row.key"
-            :placeholder="t('envVars.namePlaceholder', 'NAME')"
-            :aria-label="t('envVars.namePlaceholder', 'NAME')"
+            :placeholder="t('envVars.namePlaceholder')"
+            :aria-label="t('envVars.name')"
             :invalid="isDuplicate(i)"
+            :aria-invalid="isDuplicate(i)"
             @change="onKeyChange(i, $event)"
           />
+          <p v-if="isDuplicate(i)" class="env-var-error" role="alert">
+            {{ t('envVars.duplicateKey', 'Duplicate key') }}
+          </p>
         </div>
-        <div class="env-var-cell env-var-value">
+        <div class="env-var-cell env-var-value-cell">
           <BaseInput
             mono
+            :type="isMasked(i) ? 'password' : 'text'"
             :model-value="row.value"
-            :placeholder="t('envVars.valuePlaceholder', 'value')"
-            :aria-label="t('envVars.valuePlaceholder', 'value')"
+            :placeholder="t('envVars.valuePlaceholder')"
+            :aria-label="t('envVars.value')"
             @change="onValueChange(i, $event)"
           />
+          <button
+            v-if="looksSensitive(row.key)"
+            type="button"
+            class="env-var-reveal"
+            :aria-label="
+              isRevealed(i)
+                ? t('envVars.hideValue', 'Hide value')
+                : t('envVars.revealValue', 'Reveal value')
+            "
+            :aria-pressed="isRevealed(i)"
+            @click="toggleReveal(i)"
+          >
+            <EyeOff v-if="isRevealed(i)" :size="14" />
+            <Eye v-else :size="14" />
+          </button>
         </div>
         <button
           type="button"
           class="env-var-remove"
-          :aria-label="t('common.cancel', 'Remove')"
+          :aria-label="t('envVars.remove', 'Remove variable')"
           @click="removeRow(i)"
         >
-          <X :size="13" />
+          <X :size="14" />
         </button>
       </div>
     </div>
+
     <button type="button" class="env-var-add" @click="addRow">
-      <Plus :size="13" />
-      <span>{{ t('envVars.add', 'Add Variable') }}</span>
+      <Plus :size="16" aria-hidden="true" />
+      <span>{{ t('envVars.add') }}</span>
     </button>
   </div>
 </template>
@@ -151,46 +207,83 @@ function onValueChange(i: number, val: string): void {
 .env-vars-field {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-}
-
-.env-vars-notice {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: var(--takeover-fs-caption);
-  color: var(--info);
+  gap: 10px;
 }
 
-.env-vars-list {
+.env-vars-rows {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }
 
+.env-vars-head,
 .env-var-row {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr) 32px;
+  gap: 8px;
   align-items: center;
-  gap: 6px;
 }
 
-/* Cell wrappers around BaseInput — only own the flex sizing.
- * Input chrome (bg, border, focus, invalid) is delegated to the
- * shared primitive in components/ui/. */
+.env-vars-head {
+  padding: 0 2px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--text-muted);
+}
+
+.env-vars-head-action {
+  width: 32px;
+}
+
 .env-var-cell {
   min-width: 0;
 }
 
-.env-var-key {
-  flex: 2;
+.env-var-value-cell {
+  position: relative;
+}
+
+.env-var-value-cell:has(.env-var-reveal) :deep(.ui-input-control) {
+  padding-right: 36px;
+  padding-top: 5px;
+}
+
+.env-var-reveal {
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--neutral-100);
+  cursor: pointer;
+  transition:
+    color 120ms ease,
+    background-color 120ms ease;
+}
+
+.env-var-reveal:hover,
+.env-var-reveal:focus-visible {
+  color: var(--text);
+  background: var(--border-hover);
+  outline: none;
 }
 
-.env-var-value {
-  flex: 3;
+.env-var-error {
+  margin: 4px 0 0;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--danger);
 }
 
-/* Remove (X) button — square override on top of the global button
- * chrome. The hover color flips to danger only on this button. */
 .env-var-remove {
   flex-shrink: 0;
   width: 32px;
@@ -199,35 +292,50 @@ function onValueChange(i: number, val: string): void {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
   color: var(--text-muted);
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease;
 }
 
-.env-var-remove:hover {
+.env-var-remove:hover,
+.env-var-remove:focus-visible {
   color: var(--danger);
-  border-color: var(--danger);
-  background: var(--surface);
+  border-color: var(--chooser-surface-border);
+  background: var(--brand-surface-bg-hover);
+  outline: none;
 }
 
 .env-var-add {
   align-self: flex-start;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 4px;
-  padding: 8px 16px 8px 8px;
-  background: rgba(255, 255, 255, 0.1);
+  height: 32px;
+  padding: 8px 14px;
+  border: none;
   border-radius: 8px;
+  background: var(--chooser-surface-border-hover);
   color: var(--neutral-100);
+  font-size: 12px;
   font-weight: 500;
-  font-size: 14px;
-}
-
-.env-var-add:hover {
-  color: var(--text);
-  background: rgba(255, 255, 255, 0.15);
+  line-height: 16px;
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
 }
 
+.env-var-add:hover,
 .env-var-add:focus-visible {
-  outline: 2px solid var(--accent-primary);
-  outline-offset: 2px;
+  background: var(--brand-surface-border-hover);
+  color: var(--text);
+  outline: none;
 }
 </style>
diff --git a/src/renderer/src/views/comfyUISettings/MoreMenu.vue b/src/renderer/src/views/comfyUISettings/MoreMenu.vue
index 1c606206..83292498 100644
--- a/src/renderer/src/views/comfyUISettings/MoreMenu.vue
+++ b/src/renderer/src/views/comfyUISettings/MoreMenu.vue
@@ -190,6 +190,10 @@ const visibleActions = computed(() => props.actions)
 .more-menu-item.is-danger {
   color: var(--danger);
 }
+.more-menu-item.is-danger:hover:not(:disabled),
+.more-menu-item.is-danger:focus-visible {
+  color: var(--danger-hover);
+}
 
 .more-menu-item.is-accent {
   color: var(--accent-primary);
diff --git a/src/renderer/src/views/comfyUISettings/SettingsSectionList.vue b/src/renderer/src/views/comfyUISettings/SettingsSectionList.vue
index f0b1bcc1..2ca8de68 100644
--- a/src/renderer/src/views/comfyUISettings/SettingsSectionList.vue
+++ b/src/renderer/src/views/comfyUISettings/SettingsSectionList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ChevronRight } from 'lucide-vue-next'
+import { ChevronRight, Loader2, ShieldAlert } from 'lucide-vue-next'
 import BaseInput from '../../components/ui/BaseInput.vue'
 import BaseSelect, { type BaseSelectOption } from '../../components/ui/BaseSelect.vue'
 import BooleanToggle from './BooleanToggle.vue'
@@ -10,6 +10,7 @@ import EnvVarsField from './EnvVarsField.vue'
 import ChannelPicker from './ChannelPicker.vue'
 import ArgsBuilderField from './ArgsBuilderField.vue'
 import InfoTooltip from '../../components/InfoTooltip.vue'
+import BaseCopyButton from '../../components/ui/BaseCopyButton.vue'
 import TooltipWrap from '../../components/TooltipWrap.vue'
 import type { ActionDef, DetailField, DetailSection } from '../../types/ipc'
 
@@ -40,13 +41,46 @@ interface Props {
    *  `getComfyArgs(id)`). Optional so call sites without a current
    *  install degrade gracefully. */
   installationId?: string
+  /** Inline-action busy set from the host's `useComfyUISettings` —
+   *  drives the per-button spinner + disabled state so quick
+   *  actions like Check-for-Update feel acknowledged. */
+  runningActionIds?: Set<string>
+  /** Field ids edited while the install is running that need a
+   *  process restart to take effect. Renders a small tag next to the
+   *  field label so users can spot which specific edits are pending. */
+  pendingRestartFieldIds?: Set<string>
+  /** Per-field transient error messages from failed
+   *  `updateInstallation` IPCs. Renders a red inline pill next to
+   *  the field label so the user knows the change didn't land. */
+  fieldErrorMessages?: Map<string, string>
 }
 
 const props = withDefaults(defineProps<Props>(), {
   readonly: false,
   installationId: undefined,
+  runningActionIds: () => new Set<string>(),
+  pendingRestartFieldIds: () => new Set<string>(),
+  fieldErrorMessages: () => new Map<string, string>()
 })
 
+// Wrap the Set in a computed so each `.has()` call tracks a reactive
+// dep on the prop — bare-function access on a destructured prop inside
+// a template attribute binding can miss the dep otherwise.
+const runningIdsSet = computed(() => props.runningActionIds ?? new Set<string>())
+function isActionRunning(actionId: string): boolean {
+  return runningIdsSet.value.has(actionId)
+}
+
+const pendingRestartSet = computed(() => props.pendingRestartFieldIds ?? new Set<string>())
+function needsRestartTag(field: DetailField): boolean {
+  return !!field.requiresRestart && pendingRestartSet.value.has(field.id)
+}
+
+const errorMessagesMap = computed(() => props.fieldErrorMessages ?? new Map<string, string>())
+function fieldErrorMessage(field: DetailField): string | null {
+  return errorMessagesMap.value.get(field.id) ?? null
+}
+
 const emit = defineEmits<{
   'update-field': [field: DetailField, value: unknown]
   'run-action': [action: ActionDef]
@@ -74,7 +108,7 @@ watch(
       }
     }
   },
-  { immediate: true },
+  { immediate: true }
 )
 
 function isCollapsible(section: { title?: string; collapsed?: boolean }): boolean {
@@ -95,187 +129,281 @@ function toggleCollapsed(section: { title?: string }): void {
 }
 
 const visibleSections = computed(() => props.sections)
+
+const NESTED_FIELD_IDS = new Set(['useSharedOutputDir', 'outputDir'])
+
+function isNestedField(field: DetailField): boolean {
+  return NESTED_FIELD_IDS.has(field.id ?? '')
+}
+
+function hasChannelPicker(section: DetailSection): boolean {
+  return (section.fields ?? []).some((f) => f.editType === 'channel-cards')
+}
+
+function isPathLikeValue(value: unknown): boolean {
+  if (typeof value !== 'string') return false
+  const v = value.trim()
+  if (!v || v === '—') return false
+  return v.includes('/') || v.includes('\\') || v.startsWith('~')
+}
+
+function readonlyDisplayValue(field: DetailField): string {
+  return asString(field.value)
+}
+
+function fieldOwnsLabel(field: DetailField): boolean {
+  return field.editType === 'env-vars' || field.editType === 'channel-cards'
+}
 </script>
 
 <template>
-  <article
-    v-for="(section, si) in visibleSections"
-    :key="`s-${si}`"
-    class="settings-v2-section"
-    :class="{
-      'is-readonly-list': readonly,
-      'is-collapsible': isCollapsible(section),
-      'is-collapsed': isCollapsible(section) && isCollapsed(section),
-    }"
-  >
-    <button
-      v-if="isCollapsible(section)"
-      type="button"
-      class="settings-v2-section-title is-toggle"
-      :aria-expanded="!isCollapsed(section)"
-      @click="toggleCollapsed(section)"
-    >
-      <ChevronRight
-        :size="14"
-        class="settings-v2-section-chevron"
-        :class="{ 'is-open': !isCollapsed(section) }"
-      />
-      {{ section.title }}
-    </button>
-
-    <p
-      v-if="section.description && !isCollapsed(section)"
-      class="settings-v2-section-desc"
+  <div class="settings-v2-sections">
+    <article
+      v-for="(section, si) in visibleSections"
+      :key="`s-${si}`"
+      class="settings-v2-section"
+      :class="{
+        'is-readonly-list': readonly,
+        'is-collapsible': isCollapsible(section),
+        'is-collapsed': isCollapsible(section) && isCollapsed(section)
+      }"
     >
-      {{ section.description }}
-    </p>
-
-    <div v-for="(item, i) in section.items" :key="`i-${i}`" class="settings-v2-item">
-      <span class="settings-v2-item-label">
-        {{ item.label }}{{ item.active ? ` (${t('common.active', 'active')})` : '' }}
-        <span v-if="item.tag" class="settings-v2-item-tag">{{ item.tag }}</span>
-      </span>
-      <span
-        v-if="item.actions && item.actions.length"
-        class="settings-v2-item-actions"
+      <button
+        v-if="isCollapsible(section)"
+        type="button"
+        class="settings-v2-section-title is-toggle"
+        :aria-expanded="!isCollapsed(section)"
+        @click="toggleCollapsed(section)"
+      >
+        <ChevronRight
+          :size="14"
+          class="settings-v2-section-chevron"
+          :class="{ 'is-open': !isCollapsed(section) }"
+        />
+        {{ section.title }}
+      </button>
+
+      <p
+        v-else-if="section.title && readonly"
+        class="settings-v2-section-title settings-v2-section-title--readonly"
+      >
+        {{ section.title }}
+      </p>
+
+      <p v-if="section.description && !isCollapsed(section)" class="settings-v2-section-desc">
+        {{ section.description }}
+      </p>
+
+      <div v-for="(item, i) in section.items" :key="`i-${i}`" class="settings-v2-item">
+        <span class="settings-v2-item-label">
+          {{ item.label }}{{ item.active ? ` (${t('common.active', 'active')})` : '' }}
+          <span v-if="item.tag" class="settings-v2-item-tag">{{ item.tag }}</span>
+        </span>
+        <span v-if="item.actions && item.actions.length" class="settings-v2-item-actions">
+          <TooltipWrap
+            v-for="a in item.actions"
+            :key="a.id"
+            :text="a.enabled === false && a.disabledMessage ? a.disabledMessage : a.tooltip"
+          >
+            <button
+              type="button"
+              :class="[
+                'settings-v2-action',
+                a.style,
+                { 'looks-disabled': a.enabled === false && a.disabledMessage }
+              ]"
+              :disabled="a.enabled === false && !a.disabledMessage"
+              @click="emit('run-action', a)"
+            >
+              {{ a.label }}
+            </button>
+          </TooltipWrap>
+        </span>
+      </div>
+
+      <div
+        v-for="field in section.fields"
+        :key="field.id"
+        class="settings-v2-field"
+        :class="{
+          'is-boolean-row': field.editType === 'boolean',
+          'is-nested': isNestedField(field),
+          'is-env-vars': field.editType === 'env-vars',
+          'is-channel-picker': field.editType === 'channel-cards'
+        }"
+      >
+        <template v-if="field.editType === 'env-vars'">
+          <div class="settings-v2-env-header">
+            <label class="settings-v2-field-label">
+              <span class="settings-v2-field-label-text">{{ field.label }}</span>
+              <InfoTooltip v-if="field.tooltip" :text="field.tooltip" />
+              <span v-if="needsRestartTag(field)" class="settings-v2-restart-tag" role="status">
+                {{ t('comfyUISettings.restartRequired', 'Restart to apply') }}
+              </span>
+              <span
+                v-if="fieldErrorMessage(field)"
+                class="settings-v2-field-error-tag"
+                role="alert"
+                :title="fieldErrorMessage(field) ?? ''"
+              >
+                {{ fieldErrorMessage(field) }}
+              </span>
+            </label>
+            <div class="settings-v2-env-notice" role="note">
+              <ShieldAlert :size="14" class="settings-v2-env-notice-icon" aria-hidden="true" />
+              <span class="settings-v2-env-notice-text">
+                {{ t('envVars.securityWarningShort', 'Environment variables may contain secrets') }}
+              </span>
+            </div>
+          </div>
+          <EnvVarsField :field="field" @update="(f, v) => emit('update-field', f, v)" />
+        </template>
+
+        <div v-else-if="field.editType === 'boolean'" class="settings-v2-boolean-row">
+          <label class="settings-v2-field-label">
+            <span class="settings-v2-field-label-text">{{ field.label }}</span>
+            <InfoTooltip v-if="field.tooltip" :text="field.tooltip" />
+            <span v-if="needsRestartTag(field)" class="settings-v2-restart-tag" role="status">
+              {{ t('comfyUISettings.restartRequired', 'Restart to apply') }}
+            </span>
+          </label>
+          <BooleanToggle :field="field" @update="(v) => emit('update-field', field, v)" />
+        </div>
+
+        <template v-else>
+          <label v-if="!fieldOwnsLabel(field)" class="settings-v2-field-label">
+            <span class="settings-v2-field-label-text">{{ field.label }}</span>
+            <InfoTooltip v-if="field.tooltip" :text="field.tooltip" />
+            <span v-if="needsRestartTag(field)" class="settings-v2-restart-tag" role="status">
+              {{ t('comfyUISettings.restartRequired', 'Restart to apply') }}
+            </span>
+          </label>
+
+          <PathField
+            v-if="field.editType === 'path' && !readonly"
+            :field="field"
+            @update="(f, v) => emit('update-field', f, v)"
+          />
+
+          <div
+            v-else-if="readonly && (field.editType === 'path' || isPathLikeValue(field.value))"
+            class="settings-v2-readonly-path"
+          >
+            <span class="settings-v2-field-readonly settings-v2-field-readonly-path">{{
+              readonlyDisplayValue(field)
+            }}</span>
+            <BaseCopyButton :value="readonlyDisplayValue(field)" />
+          </div>
+
+          <BaseSelect
+            v-else-if="field.editType === 'select'"
+            :model-value="asString(field.value)"
+            :options="
+              (field.options ?? []).map(
+                (opt): BaseSelectOption => ({
+                  value: opt.value,
+                  label: opt.label,
+                  description: opt.description
+                })
+              )
+            "
+            :aria-label="field.label"
+            @update:model-value="(v: string) => emit('update-field', field, v)"
+          />
+
+          <ArgsBuilderField
+            v-else-if="field.editType === 'args-builder'"
+            :field="field"
+            :installation-id="props.installationId"
+            @open="emit('open-args-page', field)"
+            @update="(f, v) => emit('update-field', f, v)"
+          />
+
+          <ChannelPicker
+            v-else-if="field.editType === 'channel-cards'"
+            :field="field"
+            :section-actions="section.actions ?? []"
+            :running-action-ids="runningIdsSet"
+            @action="(a) => emit('run-action', a)"
+          />
+
+          <BaseInput
+            v-else-if="field.editType === 'text'"
+            :model-value="asString(field.value)"
+            :aria-label="field.label"
+            :placeholder="field.placeholder"
+            @change="(v: string) => emit('update-field', field, v)"
+          />
+
+          <BaseInput
+            v-else-if="field.editType === 'number'"
+            :model-value="asString(field.value)"
+            :aria-label="field.label"
+            type="number"
+            :min="field.min"
+            :max="field.max"
+            @change="(v: string) => emit('update-field', field, v === '' ? null : Number(v))"
+          />
+
+          <span v-else class="settings-v2-field-readonly">{{ asString(field.value) }}</span>
+        </template>
+      </div>
+
+      <div
+        v-if="section.actions && section.actions.length && !hasChannelPicker(section)"
+        class="settings-v2-actions"
       >
         <TooltipWrap
-          v-for="a in item.actions"
-          :key="a.id"
-          :text="a.enabled === false && a.disabledMessage ? a.disabledMessage : a.tooltip"
+          v-for="action in section.actions"
+          :key="action.id"
+          class="settings-v2-action-tooltip"
+          :text="
+            action.enabled === false && action.disabledMessage
+              ? action.disabledMessage
+              : action.tooltip
+          "
         >
           <button
             type="button"
             :class="[
               'settings-v2-action',
-              a.style,
-              { 'looks-disabled': a.enabled === false && a.disabledMessage },
+              {
+                primary: action.style === 'primary',
+                danger: action.style === 'danger',
+                'looks-disabled': action.enabled === false && action.disabledMessage,
+                'is-running': isActionRunning(action.id)
+              }
             ]"
-            :disabled="a.enabled === false && !a.disabledMessage"
-            @click="emit('run-action', a)"
+            :disabled="
+              (action.enabled === false && !action.disabledMessage) ||
+              isActionRunning(action.id)
+            "
+            @click="emit('run-action', action)"
           >
-            {{ a.label }}
+            <Loader2
+              v-if="isActionRunning(action.id)"
+              :size="14"
+              class="settings-v2-action-spinner"
+            />
+            {{ action.label }}
           </button>
         </TooltipWrap>
-      </span>
-    </div>
-
-    <div v-for="field in section.fields" :key="field.id" class="settings-v2-field">
-      <label class="settings-v2-field-label">
-        {{ field.label }}
-        <InfoTooltip v-if="field.tooltip" :text="field.tooltip" />
-      </label>
-
-      <BooleanToggle
-        v-if="field.editType === 'boolean'"
-        :field="field"
-        @update="(v) => emit('update-field', field, v)"
-      />
-
-      <BaseSelect
-        v-else-if="field.editType === 'select'"
-        :model-value="asString(field.value)"
-        :options="
-          (field.options ?? []).map(
-            (opt): BaseSelectOption => ({
-              value: opt.value,
-              label: opt.label,
-              description: opt.description,
-            }),
-          )
-        "
-        :aria-label="field.label"
-        @update:model-value="(v: string) => emit('update-field', field, v)"
-      />
-
-      <PathField
-        v-else-if="field.editType === 'path'"
-        :field="field"
-        @update="(f, v) => emit('update-field', f, v)"
-      />
-
-      <ArgsBuilderField
-        v-else-if="field.editType === 'args-builder'"
-        :field="field"
-        :installation-id="props.installationId"
-        @open="emit('open-args-page', field)"
-        @update="(f, v) => emit('update-field', f, v)"
-      />
-
-      <EnvVarsField
-        v-else-if="field.editType === 'env-vars'"
-        :field="field"
-        @update="(f, v) => emit('update-field', f, v)"
-      />
-
-      <ChannelPicker
-        v-else-if="field.editType === 'channel-cards'"
-        :field="field"
-        @action="(a) => emit('run-action', a)"
-      />
-
-      <BaseInput
-        v-else-if="field.editType === 'text'"
-        :model-value="asString(field.value)"
-        :aria-label="field.label"
-        :placeholder="field.placeholder"
-        @change="(v: string) => emit('update-field', field, v)"
-      />
-
-      <BaseInput
-        v-else-if="field.editType === 'number'"
-        :model-value="asString(field.value)"
-        :aria-label="field.label"
-        type="number"
-        :min="field.min"
-        :max="field.max"
-        @change="(v: string) => emit('update-field', field, v === '' ? null : Number(v))"
-      />
-
-      <span v-else class="settings-v2-field-readonly">{{ asString(field.value) }}</span>
-    </div>
-
-    <div v-if="section.actions && section.actions.length" class="settings-v2-actions">
-      <TooltipWrap
-        v-for="action in section.actions"
-        :key="action.id"
-        class="settings-v2-action-tooltip"
-        :text="
-          action.enabled === false && action.disabledMessage
-            ? action.disabledMessage
-            : action.tooltip
-        "
-      >
-        <button
-          type="button"
-          :class="[
-            'settings-v2-action',
-            {
-              primary: action.style === 'primary',
-              danger: action.style === 'danger',
-              'looks-disabled': action.enabled === false && action.disabledMessage,
-            },
-          ]"
-          :disabled="action.enabled === false && !action.disabledMessage"
-          @click="emit('run-action', action)"
-        >
-          {{ action.label }}
-        </button>
-      </TooltipWrap>
-    </div>
-  </article>
+      </div>
+    </article>
+  </div>
 </template>
 
 <style scoped>
-/* Section + field styling lives WITH the component (not in the
- * consuming surface) so both the drawer and the instance-picker get
- * identical visuals without either having to re-declare these rules
- * — Vue scoped styles only reach their own DOM, and these classes
- * live in this template. */
+.settings-v2-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
 .settings-v2-section {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 16px;
 }
 
 .settings-v2-section-title {
@@ -301,6 +429,17 @@ const visibleSections = computed(() => props.sections)
   color: var(--text);
 }
 
+.settings-v2-section-title--micro {
+  padding: 0 0 4px;
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  opacity: 0.55;
+}
+
 .settings-v2-section-chevron {
   color: var(--text-muted);
   transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
@@ -362,19 +501,142 @@ const visibleSections = computed(() => props.sections)
 .settings-v2-field {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 10px;
+}
+
+.settings-v2-section .settings-v2-field + .settings-v2-field {
+  margin-top: 4px;
 }
 
 .settings-v2-field-label {
   display: inline-flex;
-  justify-content: space-between;
   align-items: center;
+  width: fit-content;
+  max-width: 100%;
+  gap: 2px;
   font-size: 12px;
   font-weight: 400;
   color: var(--text-muted);
   line-height: 16px;
 }
 
+.settings-v2-field-label-text {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.settings-v2-restart-tag {
+  flex: 0 0 auto;
+  margin-left: 6px;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 14px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--warning);
+  background: color-mix(in srgb, var(--warning) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--warning) 36%, transparent);
+  white-space: nowrap;
+}
+
+/* Failed-write inline pill. Same shape as the restart tag (so the
+ * label row stays calm when one swaps in for the other) but in the
+ * danger ramp so the user immediately reads "rejected" not "pending".
+ * Clamped to a max-width with ellipsis — IPC errors can be long; the
+ * full message lives in the `title` tooltip. */
+.settings-v2-field-error-tag {
+  flex: 0 0 auto;
+  margin-left: 6px;
+  max-width: 240px;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 14px;
+  letter-spacing: 0.02em;
+  color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--danger) 36%, transparent);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.settings-v2-boolean-row .settings-v2-field-label {
+  flex: 0 1 auto;
+  max-width: calc(100% - 48px);
+}
+
+.settings-v2-field.is-env-vars,
+.settings-v2-field.is-channel-picker {
+  gap: 10px;
+}
+
+.settings-v2-env-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.settings-v2-env-header .settings-v2-field-label {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.settings-v2-env-notice {
+  flex: 0 0 auto;
+  width: fit-content;
+  max-width: min(100%, 320px);
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 6px 8px;
+  margin: -6px 0 -6px auto;
+  border: 1px solid var(--chooser-surface-border);
+  border-radius: 8px;
+  background: var(--chooser-surface-bg);
+  font-size: 10.5px;
+  line-height: 16px;
+  color: var(--text-muted);
+  text-align: left;
+}
+
+.settings-v2-env-notice-icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+  color: var(--neutral-100);
+}
+
+.settings-v2-env-notice-text {
+  min-width: 0;
+}
+
+.settings-v2-boolean-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 44px;
+  padding: 4px 0;
+}
+.settings-v2-readonly-path {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.settings-v2-field-readonly-path {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .settings-v2-field-readonly {
   font-size: 13px;
   color: var(--neutral-100);
@@ -391,6 +653,24 @@ const visibleSections = computed(() => props.sections)
 .settings-v2-action {
   border: none;
   width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.settings-v2-action.is-running {
+  cursor: progress;
+  opacity: 0.85;
+}
+
+.settings-v2-action-spinner {
+  flex: 0 0 auto;
+  animation: settings-v2-action-spin 0.9s linear infinite;
+}
+
+@keyframes settings-v2-action-spin {
+  to { transform: rotate(360deg); }
 }
 
 .settings-v2-action-tooltip {
@@ -405,16 +685,48 @@ const visibleSections = computed(() => props.sections)
  * label-over-value layout instead of input-style field chrome. */
 .settings-v2-section.is-readonly-list {
   gap: 0;
+  padding: 4px 12px;
+  border-radius: 10px;
+  background: var(--secondary-background);
+  border: 1px solid var(--chooser-surface-border);
+}
+
+.settings-v2-section.is-readonly-list .settings-v2-section-title {
+  padding: 8px 0 4px;
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.55;
 }
 
 .settings-v2-section.is-readonly-list .settings-v2-field {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
+  align-items: start;
+  gap: 8px 16px;
   padding: 10px 0;
   border-bottom: 1px solid var(--chooser-surface-border);
-  gap: 2px;
+}
+
+.settings-v2-section.is-readonly-list .settings-v2-field:last-child {
+  border-bottom: none;
 }
 
 .settings-v2-section.is-readonly-list .settings-v2-field-label {
   color: var(--text-muted);
   font-weight: 400;
 }
+
+.settings-v2-section.is-readonly-list .settings-v2-field-readonly,
+.settings-v2-section.is-readonly-list .settings-v2-readonly-path {
+  justify-self: end;
+  text-align: right;
+  width: 100%;
+}
+
+.settings-v2-section.is-readonly-list .settings-v2-readonly-path {
+  justify-self: stretch;
+}
 </style>
diff --git a/src/renderer/src/views/comfyUISettings/SnapshotRow.vue b/src/renderer/src/views/comfyUISettings/SnapshotRow.vue
index a13fb917..c880ce20 100644
--- a/src/renderer/src/views/comfyUISettings/SnapshotRow.vue
+++ b/src/renderer/src/views/comfyUISettings/SnapshotRow.vue
@@ -24,15 +24,15 @@ import BaseAccordion from '../../components/ui/BaseAccordion.vue'
 interface Props {
   snapshot: SnapshotSummary
   expanded: boolean
-  /** First (newest) snapshot in the timeline carries a "Current" badge. */
-  isCurrent?: boolean
+  /** First (newest) snapshot in the timeline carries a "Latest" badge. */
+  isLatest?: boolean
   /** Optional `data-testid` for the header toggle — lets the parent
    *  scope tests to a specific snapshot by filename. */
   toggleTestId?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  isCurrent: false,
+  isLatest: false,
   toggleTestId: undefined,
 })
 
@@ -58,46 +58,6 @@ const triggerTone = computed<'state' | 'neutral'>(() => {
       return 'neutral'
   }
 })
-
-/** Diff chips derived from `diffVsPrevious`. We surface up to three
- *  high-signal facts: ComfyUI version change, package change count,
- *  node change count. The full summary list still renders in the
- *  expanded detail; these are the at-a-glance summary. */
-interface Chip {
-  key: string
-  label: string
-  tone: 'state' | 'neutral'
-}
-
-const chips = computed<Chip[]>(() => {
-  const diff = props.snapshot.diffVsPrevious
-  if (!diff) return []
-  const out: Chip[] = []
-  if (diff.comfyuiChanged) {
-    out.push({
-      key: 'comfy',
-      label: t('snapshots.comfyuiUpdated', 'ComfyUI updated'),
-      tone: 'state'
-    })
-  }
-  const pipDelta = diff.pipsAdded + diff.pipsRemoved + diff.pipsChanged
-  if (pipDelta > 0) {
-    out.push({
-      key: 'pip',
-      label: t('snapshots.pipChanges', { count: pipDelta }),
-      tone: 'neutral'
-    })
-  }
-  const nodeDelta = diff.nodesAdded + diff.nodesRemoved + diff.nodesChanged
-  if (nodeDelta > 0) {
-    out.push({
-      key: 'nodes',
-      label: t('snapshots.nodeChanges', { count: nodeDelta }),
-      tone: 'neutral'
-    })
-  }
-  return out
-})
 </script>
 
 <template>
@@ -114,8 +74,8 @@ const chips = computed<Chip[]>(() => {
     >
       <div class="snapshot-row-head-left">
         <span class="snapshot-row-trigger" :data-tone="triggerTone">{{ triggerCopy }}</span>
-        <span v-if="isCurrent" class="snapshot-row-current">
-          {{ t('snapshots.current', 'Current') }}
+        <span v-if="isLatest" class="snapshot-row-latest">
+          {{ t('snapshots.latestBadge', 'Latest') }}
         </span>
       </div>
       <div class="snapshot-row-head-right">
@@ -124,39 +84,21 @@ const chips = computed<Chip[]>(() => {
       </div>
     </button>
 
-    <!-- Bordered card holds the body content only. Sits below the
-         header so the dot on the rail aligns with the header text, not
-         with this card's edge. When expanded, the parent's <expanded>
-         slot renders inside the card so the change summary + actions
-         look visually fused with the row body. -->
-    <div class="snapshot-row-card">
-      <div v-if="chips.length > 0" class="snapshot-row-chips">
-        <span
-          v-for="chip in chips"
-          :key="chip.key"
-          class="snapshot-row-chip"
-          :data-tone="chip.tone"
-          >{{ chip.label }}</span
-        >
-      </div>
-
-      <div class="snapshot-row-meta">
-        <span v-if="snapshot.comfyuiVersion">{{ snapshot.comfyuiVersion }}</span>
-        <span v-if="snapshot.comfyuiVersion" class="snapshot-row-meta-dot">·</span>
-        <span>{{ t('snapshots.nodesCount', { count: snapshot.nodeCount }) }}</span>
-        <span class="snapshot-row-meta-dot">·</span>
-        <span>{{ t('snapshots.packagesCount', { count: snapshot.pipPackageCount }) }}</span>
-      </div>
-
-      <!-- Smooth height-animated accordion. Keeps the slot mounted so
-           layout is measured for the open transition; the wrapping
-           BaseAccordion clips and fades during the height change. -->
-      <BaseAccordion :open="expanded">
+    <!-- Body card animates open/closed via BaseAccordion. -->
+    <BaseAccordion :open="expanded">
+      <div class="snapshot-row-card">
+        <div class="snapshot-row-meta">
+          <span v-if="snapshot.comfyuiVersion">{{ snapshot.comfyuiVersion }}</span>
+          <span v-if="snapshot.comfyuiVersion" class="snapshot-row-meta-dot">·</span>
+          <span>{{ t('snapshots.nodesCount', { count: snapshot.nodeCount }) }}</span>
+          <span class="snapshot-row-meta-dot">·</span>
+          <span>{{ t('snapshots.packagesCount', { count: snapshot.pipPackageCount }) }}</span>
+        </div>
         <div class="snapshot-row-expanded">
           <slot name="expanded" />
         </div>
-      </BaseAccordion>
-    </div>
+      </div>
+    </BaseAccordion>
   </div>
 </template>
 
@@ -212,14 +154,14 @@ const chips = computed<Chip[]>(() => {
   color: var(--warning);
 }
 
-.snapshot-row-current {
+.snapshot-row-latest {
   flex-shrink: 0;
   padding: 1px 6px;
   font-size: 11px;
-  font-weight: 600;
-  color: var(--color-accent);
-  background: rgba(96, 165, 250, 0.15);
-  border-radius: 3px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: color-mix(in srgb, var(--text) 8%, transparent);
+  border-radius: 999px;
   line-height: 16.5px;
 }
 
@@ -242,23 +184,10 @@ const chips = computed<Chip[]>(() => {
 .snapshot-row-card {
   display: flex;
   flex-direction: column;
-  padding: 8px;
-  background: var(--secondary-background);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 10px;
-  transition: border-color 120ms ease;
-}
-
-.snapshot-row-card > * + * {
-  margin-top: 8px;
-}
-
-.snapshot-row-card > [data-state='closed'] {
-  margin-top: 0;
-}
-
-.snapshot-row.is-expanded .snapshot-row-card {
-  border-color: color-mix(in srgb, var(--accent-primary) 60%, var(--border));
+  padding: 10px 12px;
+  background: var(--brand-surface-bg);
+  border: 1px solid var(--chooser-surface-border);
+  border-radius: 8px;
 }
 
 .snapshot-row-chips {
diff --git a/src/renderer/src/views/comfyUISettings/SnapshotsView.vue b/src/renderer/src/views/comfyUISettings/SnapshotsView.vue
index f0bae17c..f3a9a1be 100644
--- a/src/renderer/src/views/comfyUISettings/SnapshotsView.vue
+++ b/src/renderer/src/views/comfyUISettings/SnapshotsView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Download, RotateCcw, Trash2 } from 'lucide-vue-next'
+import { Download, GitCompare, RotateCcw, Trash2, Upload } from 'lucide-vue-next'
 import { TID } from '../../../../shared/testIds'
-import { useModal } from '../../composables/useModal'
+import { useDialogs } from '../../composables/useDialogs'
 import { emitTelemetryAction, toCountBucket } from '../../lib/telemetry'
 import {
   changeSummary as _changeSummary,
@@ -19,6 +19,7 @@ import type {
   SnapshotSummary
 } from '../../types/ipc'
 import SnapshotRow from './SnapshotRow.vue'
+import SnapshotDiffView from '../../components/SnapshotDiffView.vue'
 
 /**
  * Snapshots tab body for the brand-redesigned Settings drawer (v2).
@@ -58,7 +59,7 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const modal = useModal()
+const dialogs = useDialogs()
 
 const listData = ref<SnapshotListData | null>(null)
 const loading = ref(true)
@@ -116,21 +117,71 @@ async function load(): Promise<void> {
     console.error('SnapshotsView.load failed', err)
   } finally {
     loading.value = false
+    if (expandedFilenames.value.size === 0) {
+      const firstSnapshot = timeline.value.find(
+        (item): item is Extract<TimelineItem, { kind: 'snapshot' }> => item.kind === 'snapshot'
+      )
+      if (firstSnapshot) {
+        expandedFilenames.value = new Set([firstSnapshot.snapshot.filename])
+      }
+    }
   }
 }
 
 // --- Per-row expansion (change summary) ---
 
-const expanded = ref<string | null>(null)
+const expandedFilenames = ref<Set<string>>(new Set())
+// Loaded "Changes from previous" diffs, keyed by snapshot filename.
+// Presence in the map = panel is open; null = loaded with no diff returned.
+const diffByFilename = ref<Map<string, SnapshotDiffData | null>>(new Map())
+const diffLoadingFilename = ref<string | null>(null)
+
+function isExpanded(filename: string): boolean {
+  return expandedFilenames.value.has(filename)
+}
 
 function toggleExpand(filename: string): void {
-  expanded.value = expanded.value === filename ? null : filename
+  const next = new Set(expandedFilenames.value)
+  if (next.has(filename)) {
+    next.delete(filename)
+  } else {
+    next.add(filename)
+  }
+  expandedFilenames.value = next
+}
+
+function isDiffOpen(filename: string): boolean {
+  return diffByFilename.value.has(filename)
+}
+
+async function toggleDiff(filename: string): Promise<void> {
+  if (diffByFilename.value.has(filename)) {
+    const next = new Map(diffByFilename.value)
+    next.delete(filename)
+    diffByFilename.value = next
+    return
+  }
+  diffLoadingFilename.value = filename
+  try {
+    const d = await window.api.getSnapshotDiff(props.installationId, filename, 'previous')
+    const next = new Map(diffByFilename.value)
+    next.set(filename, d)
+    diffByFilename.value = next
+    emitTelemetryAction('desktop2.snapshot.flow', {
+      action: 'view_diff',
+      snapshot_count_bucket: toCountBucket(snapshots.value.length),
+      has_diff: d ? diffHasChanges(d.diff) : undefined
+    })
+  } finally {
+    diffLoadingFilename.value = null
+  }
 }
 
 watch(
   () => props.installationId,
   () => {
-    expanded.value = null
+    expandedFilenames.value = new Set()
+    diffByFilename.value = new Map()
     void load()
   },
   { immediate: true }
@@ -143,7 +194,7 @@ function changeSummaryFor(s: SnapshotSummary): string[] {
 // --- Save ---
 
 async function handleSave(): Promise<void> {
-  const label = await modal.prompt({
+  const label = await dialogs.prompt({
     title: t('standalone.snapshotSaveTitle'),
     message: t('standalone.snapshotSaveMessage'),
     placeholder: t('standalone.snapshotLabelPlaceholder'),
@@ -156,9 +207,10 @@ async function handleSave(): Promise<void> {
       label: label || undefined
     })
   } catch (err: unknown) {
-    await modal.alert({
-      title: t('snapshots.saveSnapshot'),
-      message: (err as Error).message || String(err)
+    await dialogs.alert({
+      title: t('snapshots.saveErrorTitle'),
+      message: (err as Error).message || String(err),
+      tone: 'danger'
     })
     return
   }
@@ -166,7 +218,7 @@ async function handleSave(): Promise<void> {
     action: 'save',
     snapshot_count_bucket: toCountBucket(snapshots.value.length)
   })
-  expanded.value = null
+  expandedFilenames.value = new Set()
   await load()
   emit('refresh-all')
 }
@@ -188,17 +240,14 @@ async function handleRestore(filename: string): Promise<void> {
       ? [{ label: t('snapshots.willChange', 'Changes when restoring'), items: summaryLines }]
       : undefined
 
-  const ok = await modal.confirm({
-    title: t('standalone.snapshotRestore', 'Restore Snapshot'),
-    message: t(
-      'snapshots.restoreConfirm',
-      'Are you sure you want to restore this snapshot? Your current install state will be replaced.'
-    ),
+  const result = await dialogs.confirm({
+    title: t('snapshots.restoreConfirmTitle'),
+    message: t('snapshots.restoreConfirmMessage'),
     messageDetails,
     confirmLabel: t('standalone.snapshotRestore', 'Restore'),
-    confirmStyle: 'primary'
+    tone: 'primary'
   })
-  if (!ok) return
+  if (result !== 'primary') return
 
   emitTelemetryAction('desktop2.snapshot.flow', {
     action: 'restore_complete',
@@ -219,18 +268,28 @@ async function handleRestore(filename: string): Promise<void> {
 // --- Delete ---
 
 async function handleDelete(filename: string): Promise<void> {
-  const ok = await modal.confirm({
-    title: t('standalone.snapshotDelete'),
-    message: t('snapshots.deleteConfirm'),
-    confirmStyle: 'danger'
+  const target = snapshots.value.find((s) => s.filename === filename)
+  const displayName = target?.label || target?.filename || ''
+  // Title carries the snapshot name (HIG-style: "Delete X?") so the
+  // user can scan the destructive scope at a glance. Message
+  // explains the consequence in one sentence — no recessed "what
+  // happens" block; that was over-engineered for a one-line confirm.
+  const result = await dialogs.confirm({
+    title: displayName
+      ? t('snapshots.deleteConfirmNamed', { name: displayName })
+      : t('snapshots.deleteConfirm'),
+    message: t('snapshots.deleteConfirmMessage'),
+    confirmLabel: t('snapshots.delete'),
+    tone: 'danger'
   })
-  if (!ok) return
+  if (result !== 'primary') return
   try {
     await window.api.runAction(props.installationId, 'snapshot-delete', { file: filename })
   } catch (err: unknown) {
-    await modal.alert({
-      title: t('snapshots.delete', 'Delete Snapshot'),
-      message: (err as Error).message || String(err)
+    await dialogs.alert({
+      title: t('snapshots.deleteErrorTitle'),
+      message: (err as Error).message || String(err),
+      tone: 'danger'
     })
     return
   }
@@ -238,7 +297,11 @@ async function handleDelete(filename: string): Promise<void> {
     action: 'delete',
     snapshot_count_bucket: toCountBucket(snapshots.value.length)
   })
-  if (expanded.value === filename) expanded.value = null
+  if (expandedFilenames.value.has(filename)) {
+    const next = new Set(expandedFilenames.value)
+    next.delete(filename)
+    expandedFilenames.value = next
+  }
   await load()
   emit('refresh-all')
 }
@@ -268,9 +331,10 @@ async function handleImport(): Promise<void> {
   const preview = await window.api.importSnapshotsPreview()
   if (!preview.ok) {
     if (preview.message) {
-      await modal.alert({
-        title: t('snapshots.importSnapshots', 'Import Snapshots'),
-        message: preview.message
+      await dialogs.alert({
+        title: t('snapshots.importErrorTitle'),
+        message: preview.message,
+        tone: 'danger'
       })
     }
     return
@@ -279,37 +343,39 @@ async function handleImport(): Promise<void> {
   const previewLines = previewItems.map(
     (p) => `${p.label || p.filename} (${formatDate(p.createdAt)})`
   )
-  const ok = await modal.confirm({
-    title: t('snapshots.importSnapshots', 'Import Snapshots'),
-    message: t('snapshots.importPreviewMessage', 'Review the snapshots to import.'),
+  const importChoice = await dialogs.confirm({
+    title: t('snapshots.importConfirmTitle'),
+    message: t('snapshots.importConfirmMessage'),
     messageDetails:
       previewLines.length > 0
         ? [{ label: t('snapshots.importPreviewLabel', 'Snapshots'), items: previewLines }]
         : undefined,
-    confirmLabel: t('snapshots.importContinue', 'Continue'),
-    confirmStyle: 'primary'
+    confirmLabel: t('snapshots.importConfirmLabel'),
+    tone: 'primary'
   })
-  if (!ok) return
+  if (importChoice !== 'primary') return
 
   // Step 2: diff
   const diff = await window.api.importSnapshotsDiff(props.installationId)
   if (!diff.ok) {
     if (diff.message) {
-      await modal.alert({
-        title: t('snapshots.importSnapshots', 'Import Snapshots'),
-        message: diff.message
+      await dialogs.alert({
+        title: t('snapshots.importErrorTitle'),
+        message: diff.message,
+        tone: 'danger'
       })
     }
     return
   }
 
   // Step 3: confirm restore on the imported snapshot
-  const result = await window.api.importSnapshotsConfirm(props.installationId)
-  if (!result.ok) {
-    if (result.message) {
-      await modal.alert({
-        title: t('snapshots.importSnapshots', 'Import Snapshots'),
-        message: result.message
+  const importResult = await window.api.importSnapshotsConfirm(props.installationId)
+  if (!importResult.ok) {
+    if (importResult.message) {
+      await dialogs.alert({
+        title: t('snapshots.importErrorTitle'),
+        message: importResult.message,
+        tone: 'danger'
       })
     }
     return
@@ -317,17 +383,17 @@ async function handleImport(): Promise<void> {
   emitTelemetryAction('desktop2.snapshot.flow', {
     action: 'import',
     snapshot_count_bucket: toCountBucket(snapshots.value.length),
-    imported_bucket: toCountBucket(result.imported ?? 0)
+    imported_bucket: toCountBucket(importResult.imported ?? 0)
   })
 
   await load()
   emit('refresh-all')
 
-  if (result.restoreFile) {
+  if (importResult.restoreFile) {
     emit('run-action', {
       id: 'snapshot-restore',
       label: t('standalone.snapshotRestore', 'Restore'),
-      data: { file: result.restoreFile },
+      data: { file: importResult.restoreFile },
       showProgress: true,
       progressTitle: t('standalone.snapshotRestoringTitle', 'Restoring snapshot'),
       cancellable: true
@@ -358,6 +424,7 @@ async function handleImport(): Promise<void> {
           :aria-label="t('snapshots.importSnapshots', 'Import')"
           @click="handleImport"
         >
+          <Upload :size="14" aria-hidden="true" />
           <span>{{ t('snapshots.importSnapshots', 'Import') }}</span>
         </button>
         <button
@@ -367,6 +434,7 @@ async function handleImport(): Promise<void> {
           :aria-label="t('snapshots.exportAll', 'Export All')"
           @click="handleExportAll"
         >
+          <Download :size="14" aria-hidden="true" />
           <span>{{ t('snapshots.exportAll', 'Export All') }}</span>
         </button>
       </div>
@@ -399,7 +467,7 @@ async function handleImport(): Promise<void> {
           <div class="snapshots-rail-save-box">
             <button
               type="button"
-              class="snapshots-rail-cta primary"
+              class="snapshots-rail-cta"
               :aria-label="t('snapshots.saveSnapshot', 'Save Snapshot')"
               @click="handleSave"
             >
@@ -433,8 +501,8 @@ async function handleImport(): Promise<void> {
           <template v-if="item.kind === 'snapshot'">
             <SnapshotRow
               :snapshot="item.snapshot"
-              :expanded="expanded === item.snapshot.filename"
-              :is-current="i === 0"
+              :expanded="isExpanded(item.snapshot.filename)"
+              :is-latest="i === 0"
               :toggle-test-id="TID.snapshotRow(item.snapshot.filename)"
               @toggle="toggleExpand(item.snapshot.filename)"
             >
@@ -451,6 +519,29 @@ async function handleImport(): Promise<void> {
                 <p v-else class="snapshots-view-no-changes">
                   {{ t('snapshots.noChangesSinceLast', 'No changes since the previous snapshot.') }}
                 </p>
+                <!-- Inline diff panel (parity with legacy SnapshotInspector
+                     "Changes from previous" toggle). Reuses SnapshotDiffView
+                     verbatim — no design changes from the per-install legacy. -->
+                <div v-if="isDiffOpen(item.snapshot.filename)" class="snapshots-view-diff">
+                  <template v-if="diffByFilename.get(item.snapshot.filename)">
+                    <div
+                      v-if="!diffHasChanges(diffByFilename.get(item.snapshot.filename)!.diff)"
+                      class="snapshots-view-diff-empty"
+                    >
+                      {{ t('snapshots.diffNoChanges', 'No changes') }}
+                    </div>
+                    <SnapshotDiffView
+                      v-else
+                      :diff="diffByFilename.get(item.snapshot.filename)!.diff"
+                    />
+                  </template>
+                </div>
+                <div
+                  v-else-if="diffLoadingFilename === item.snapshot.filename"
+                  class="snapshots-view-diff-loading"
+                >
+                  {{ t('common.loading', 'Loading…') }}
+                </div>
                 <!-- Actions live in the expanded detail (per Figma): the
                      collapsed row stays a clean tap target, and the
                      destructive / mutating ops only surface once the
@@ -458,7 +549,23 @@ async function handleImport(): Promise<void> {
                 <div class="snapshots-view-detail-actions">
                   <button
                     type="button"
-                    class="snapshots-view-detail-btn primary"
+                    class="snapshots-view-detail-btn"
+                    :class="{ 'is-active': isDiffOpen(item.snapshot.filename) }"
+                    :disabled="item.snapshotIndex === snapshots.length - 1"
+                    :aria-label="t('snapshots.diffPrevious', 'Changes from previous')"
+                    :title="
+                      item.snapshotIndex === snapshots.length - 1
+                        ? t('snapshots.noPrevious', 'First snapshot — no previous to compare')
+                        : t('snapshots.diffPrevious', 'Changes from previous')
+                    "
+                    @click="toggleDiff(item.snapshot.filename)"
+                  >
+                    <GitCompare :size="13" />
+                    <span>{{ t('snapshots.diffPrevious', 'Changes from previous') }}</span>
+                  </button>
+                  <button
+                    type="button"
+                    class="snapshots-view-detail-btn"
                     :aria-label="t('snapshots.restore', 'Restore')"
                     :data-testid="TID.snapshotRowRestore(item.snapshot.filename)"
                     @click="handleRestore(item.snapshot.filename)"
@@ -509,41 +616,53 @@ async function handleImport(): Promise<void> {
 .snapshots-view {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 16px;
 }
 
-/* Header row: "Latest: 8d ago" left, Import / Export All right. */
 .snapshots-view-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
-  border-bottom: 1px solid var(--secondary-background);
-  padding-bottom: 16px;
+  gap: 12px;
 }
 
 .snapshots-view-latest {
-  font-size: 14px;
-  color: var(--neutral-100);
-}
-
-.snapshots-view-latest strong {
-  color: var(--text);
-  font-weight: 500;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--text-muted);
 }
 
 .snapshots-view-toolbar {
   display: inline-flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 8px;
 }
 
 .snapshots-view-toolbtn {
   display: inline-flex;
   align-items: center;
+  gap: 5px;
+  min-height: 28px;
+  padding: 6px 12px;
   font-size: 12px;
+  font-weight: 500;
   color: var(--neutral-100);
-  gap: 4px;
+  border-radius: 8px;
+  border: 1px solid var(--chooser-surface-border);
+  background: var(--brand-surface-bg);
+  cursor: pointer;
+  transition: background-color 100ms ease;
+}
+
+.snapshots-view-toolbtn:hover:not(:disabled),
+.snapshots-view-toolbtn:focus-visible:not(:disabled) {
+  background: var(--brand-surface-bg-hover);
+  outline: none;
+}
+
+.snapshots-view-toolbtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .snapshots-view-status {
@@ -652,7 +771,7 @@ async function handleImport(): Promise<void> {
   display: flex;
   flex-direction: column;
   padding: 12px;
-  border: 1px dashed var(--secondary-background);
+  border: 1px dashed var(--chooser-surface-border);
   border-radius: 8px;
 }
 
@@ -665,6 +784,18 @@ async function handleImport(): Promise<void> {
   font-size: var(--takeover-fs-body);
   padding: 10px 14px;
   border-radius: 8px;
+  border: 1px solid var(--chooser-surface-border);
+  background: var(--brand-surface-bg);
+  color: var(--neutral-100);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 100ms ease;
+}
+
+.snapshots-rail-cta:hover,
+.snapshots-rail-cta:focus-visible {
+  background: var(--brand-surface-bg-hover);
+  outline: none;
 }
 
 .snapshots-rail-node.is-save .snapshots-rail-label {
@@ -687,24 +818,87 @@ async function handleImport(): Promise<void> {
 .snapshots-view-detail-actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 2px;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-hover);
 }
 
 .snapshots-view-detail-btn {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  padding: 6px 10px;
+  min-height: 32px;
+  padding: 8px 16px;
   font-size: 12px;
-  border-radius: 6px;
+  font-weight: 500;
+  border-radius: 8px;
+  border: 1px solid var(--chooser-surface-border);
+  background: var(--brand-surface-bg);
+  color: var(--neutral-100);
+  cursor: pointer;
+  transition:
+    background-color 100ms ease,
+    border-color 100ms ease;
+}
+
+.snapshots-view-detail-btn:hover,
+.snapshots-view-detail-btn:focus-visible {
+  background: var(--brand-surface-bg-hover);
+  outline: none;
+}
+
+.snapshots-view-detail-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.snapshots-view-detail-btn.is-active {
+  background: var(--brand-surface-bg-hover);
+  border-color: color-mix(in oklab, var(--neutral-100) 28%, transparent);
+}
+
+.snapshots-view-detail-btn-danger {
+  color: var(--danger);
 }
 
-.snapshots-view-detail-btn-danger:hover {
+.snapshots-view-detail-btn-danger:hover,
+.snapshots-view-detail-btn-danger:focus-visible {
   color: var(--danger);
   border-color: var(--danger);
 }
 
+.snapshots-view-diff {
+  /* Match the surrounding expanded-row surface — no second tint, no
+   * box-in-a-box. The 1px hairline + radius are enough to delimit the
+   * panel; tinted background made it the only filled block in the
+   * expanded card and felt foreign. */
+  padding: 10px 12px;
+  margin-top: 8px;
+  /* Cap at ~14 diff lines (12px/16px line-height) before the inner
+   * pane starts scrolling — long diffs (100+ pip changes) otherwise
+   * push the action row off-screen and force whole-drawer scroll. */
+  max-height: 280px;
+  overflow-y: auto;
+  border: 1px solid var(--border-hover);
+  border-radius: 8px;
+  background: transparent;
+}
+
+.snapshots-view-diff-empty {
+  font-size: var(--takeover-fs-caption);
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.snapshots-view-diff-loading {
+  padding: 8px 12px;
+  margin-top: 8px;
+  font-size: var(--takeover-fs-caption);
+  color: var(--text-muted);
+}
+
 .snapshots-view-label {
   margin: 0 0 6px;
   font-size: var(--takeover-fs-caption);
@@ -713,14 +907,18 @@ async function handleImport(): Promise<void> {
 }
 
 .snapshots-view-changes {
-  list-style: disc;
+  list-style: none;
   margin: 0;
-  padding-left: 18px;
+  padding: 0;
   font-size: var(--takeover-fs-caption);
   color: var(--text-muted);
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
+}
+
+.snapshots-view-changes li {
+  line-height: 16px;
 }
 
 .snapshots-view-no-changes {
diff --git a/src/renderer/src/views/comfyUISettings/StatusFactPanel.vue b/src/renderer/src/views/comfyUISettings/StatusFactPanel.vue
new file mode 100644
index 00000000..c4800d97
--- /dev/null
+++ b/src/renderer/src/views/comfyUISettings/StatusFactPanel.vue
@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import BaseCopyButton from '../../components/ui/BaseCopyButton.vue'
+import type { DetailField, DetailSection, Installation } from '../../types/ipc'
+
+/**
+ * Status tab — grouped install summary with identity hero and inset
+ * fact groups. Replaces generic readonly SettingsSectionList rows.
+ */
+
+interface Props {
+  installation: Installation | null
+  sections: DetailSection[]
+  diskUsage: { label: string; value: string } | null
+}
+
+const props = defineProps<Props>()
+
+const { t } = useI18n()
+
+interface FactRow {
+  id: string
+  label: string
+  value: string
+  copyable?: boolean
+  /** `'start'` truncates with a leading ellipsis so the tail (last
+   *  path segment) stays visible. Paths use it; everything else
+   *  defaults to end-truncation. */
+  truncate?: 'start' | 'end'
+}
+
+interface FactGroup {
+  id: string
+  title: string
+  rows: FactRow[]
+}
+
+const allFields = computed<DetailField[]>(() => {
+  const out: DetailField[] = []
+  for (const section of props.sections) {
+    for (const field of section.fields ?? []) {
+      out.push(field)
+    }
+  }
+  return out
+})
+
+function fieldValue(field: DetailField): string {
+  const v = field.value
+  if (v == null || v === '') return '—'
+  return String(v)
+}
+
+function isPathLike(value: string): boolean {
+  if (!value || value === '—') return false
+  return value.includes('/') || value.includes('\\') || value.startsWith('~')
+}
+
+function matchLabel(field: DetailField, keys: string[]): boolean {
+  const extra = field as DetailField & { key?: string }
+  const id = (field.id ?? extra.key ?? '').toLowerCase()
+  const label = field.label.toLowerCase()
+  return keys.some((k) => id.includes(k) || label.includes(k.toLowerCase()))
+}
+
+const heroSubtitle = computed(() => {
+  const parts: string[] = []
+  for (const field of allFields.value) {
+    if (matchLabel(field, ['comfyui', 'comfyui-version'])) {
+      parts.push(fieldValue(field))
+      break
+    }
+  }
+  for (const field of allFields.value) {
+    if (matchLabel(field, ['variant'])) {
+      parts.push(fieldValue(field))
+      break
+    }
+  }
+  for (const field of allFields.value) {
+    if (matchLabel(field, ['python'])) {
+      parts.push(fieldValue(field))
+      break
+    }
+  }
+  return parts.filter((p) => p && p !== '—').join(' · ')
+})
+
+function toRow(field: DetailField): FactRow {
+  const value = fieldValue(field)
+  const extra = field as DetailField & { key?: string }
+  return {
+    id: field.id ?? extra.key ?? field.label,
+    label: field.label,
+    value,
+    copyable: isPathLike(value),
+  }
+}
+
+const installDetailRows = computed<FactRow[]>(() => {
+  const used = new Set<string>()
+  const rows: FactRow[] = []
+  const sourceLabel = props.installation?.sourceLabel?.toLowerCase()
+  for (const field of allFields.value) {
+    if (matchLabel(field, ['lineage'])) continue
+    if (matchLabel(field, ['location', 'path', 'disk'])) continue
+    if (matchLabel(field, ['comfyui', 'comfyui-version'])) continue
+    if (matchLabel(field, ['variant', 'python']) && heroSubtitle.value) continue
+    if (matchLabel(field, ['install method', 'method'])) continue
+    const row = toRow(field)
+    if (sourceLabel && row.value.toLowerCase() === sourceLabel) continue
+    if (row.value === '—' && !field.label) continue
+    rows.push(row)
+    used.add(row.id)
+  }
+  return rows
+})
+
+const locationRows = computed<FactRow[]>(() => {
+  const rows: FactRow[] = []
+  for (const field of allFields.value) {
+    if (matchLabel(field, ['location', 'path', 'install path'])) {
+      const row = toRow(field)
+      if (isPathLike(row.value)) row.truncate = 'start'
+      rows.push(row)
+    }
+  }
+  if (props.diskUsage) {
+    rows.push({
+      id: '__disk-usage',
+      label: props.diskUsage.label,
+      value: props.diskUsage.value,
+    })
+  }
+  return rows
+})
+
+const lineageRows = computed<FactRow[]>(() => {
+  return allFields.value
+    .filter((field) => matchLabel(field, ['lineage']))
+    .map(toRow)
+})
+
+const groups = computed<FactGroup[]>(() => {
+  const out: FactGroup[] = []
+  const details = installDetailRows.value
+  if (details.length > 0) {
+    out.push({
+      id: 'install-details',
+      title: t('statusFactPanel.installDetails', 'Install details'),
+      rows: details,
+    })
+  }
+  const location = locationRows.value
+  if (location.length > 0) {
+    out.push({
+      id: 'location-storage',
+      title: t('statusFactPanel.locationStorage', 'Location & storage'),
+      rows: location,
+    })
+  }
+  const lineage = lineageRows.value
+  if (lineage.length > 0) {
+    out.push({
+      id: 'lineage',
+      title: t('statusFactPanel.lineage', 'Lineage'),
+      rows: lineage,
+    })
+  }
+  return out
+})
+</script>
+
+<template>
+  <div class="status-fact-panel">
+    <header v-if="installation" class="status-fact-hero">
+      <div class="status-fact-hero-title-row">
+        <p class="status-fact-hero-name">{{ installation.name }}</p>
+        <span v-if="installation.sourceLabel" class="status-fact-hero-badge">
+          {{ installation.sourceLabel }}
+        </span>
+      </div>
+      <p v-if="heroSubtitle" class="status-fact-hero-meta">{{ heroSubtitle }}</p>
+    </header>
+
+    <section v-for="group in groups" :key="group.id" class="status-fact-group">
+      <h3 class="status-fact-group-title">{{ group.title }}</h3>
+      <dl class="status-fact-list">
+        <div v-for="row in group.rows" :key="row.id" class="status-fact-row">
+          <dt>{{ row.label }}</dt>
+          <dd>
+            <span
+              class="status-fact-value"
+              :class="{ 'is-truncate-start': row.truncate === 'start' }"
+              :title="row.value"
+            >
+              <bdi v-if="row.truncate === 'start'" dir="ltr">{{ row.value }}</bdi>
+              <template v-else>{{ row.value }}</template>
+            </span>
+            <BaseCopyButton v-if="row.copyable" :value="row.value" />
+          </dd>
+        </div>
+      </dl>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.status-fact-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.status-fact-hero {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.status-fact-hero-title-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-fact-hero-name {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--text);
+}
+
+.status-fact-hero-badge {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--text-muted);
+  background: color-mix(in srgb, var(--text) 8%, transparent);
+  border-radius: 999px;
+}
+
+.status-fact-hero-meta {
+  margin: 4px 0 0;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--neutral-100);
+}
+
+.status-fact-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.status-fact-group-title {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  opacity: 0.7;
+}
+
+.status-fact-list {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--chooser-surface-border);
+  border-radius: 8px;
+  padding: 4px 12px;
+  background: var(--brand-surface-bg);
+}
+
+.status-fact-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0;
+  border-top: 1px solid var(--border-hover);
+}
+
+.status-fact-row:first-child {
+  border-top: none;
+}
+
+.status-fact-row dt {
+  margin: 0;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--text-muted);
+}
+
+.status-fact-row dd {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  min-width: 0;
+  font-size: 13px;
+  line-height: 19px;
+  color: var(--neutral-100);
+  text-align: right;
+}
+
+.status-fact-value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Path rows truncate from the START so the trailing folder name
+ * (the useful bit) stays readable. `direction: rtl` makes the
+ * ellipsis fall on the left; the inner <bdi dir="ltr"> keeps the
+ * character order rendering left-to-right. */
+.status-fact-value.is-truncate-start {
+  direction: rtl;
+  text-align: left;
+}
+</style>
diff --git a/src/renderer/src/views/comfyUISettings/StoragePane.test.ts b/src/renderer/src/views/comfyUISettings/StoragePane.test.ts
new file mode 100644
index 00000000..9df6780f
--- /dev/null
+++ b/src/renderer/src/views/comfyUISettings/StoragePane.test.ts
@@ -0,0 +1,125 @@
+import { describe, expect, it, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import { nextTick } from 'vue'
+
+import { en } from '../../lib/i18nMessages.ts'
+import StoragePane, { type StorageSnapshot } from './StoragePane.vue'
+
+interface BridgeState {
+  updateFieldCalls: Array<{ id: string; value: unknown }>
+  setModelsDirsCalls: string[][]
+  openPathCalls: string[]
+  browseFolderReturn: string | null
+}
+
+function installMockBridge(): BridgeState {
+  const state: BridgeState = {
+    updateFieldCalls: [],
+    setModelsDirsCalls: [],
+    openPathCalls: [],
+    browseFolderReturn: null,
+  }
+  const bridge = {
+    globalSettingsUpdateField: async (id: string, value: unknown) => {
+      state.updateFieldCalls.push({ id, value })
+      return { ok: true }
+    },
+    globalSettingsBrowseFolder: async () => state.browseFolderReturn,
+    globalSettingsOpenPath: (path: string) => {
+      state.openPathCalls.push(path)
+    },
+    globalSettingsSetModelsDirs: async (dirs: string[]) => {
+      state.setModelsDirsCalls.push([...dirs])
+      return { ok: true }
+    },
+  }
+  ;(window as unknown as { __comfyTitlePopup: typeof bridge }).__comfyTitlePopup = bridge
+  return state
+}
+
+function makeI18n() {
+  return createI18n({ legacy: false, locale: 'en', messages: { en } })
+}
+
+function makeSnapshot(): StorageSnapshot {
+  return {
+    sharedDirectoriesFields: [],
+    modelsDirs: [
+      { path: '/home/u/ComfyUI/models', isPrimary: true, isDefault: true },
+      { path: '/mnt/extra/models', isPrimary: false, isDefault: false },
+    ],
+    modelsSystemDefault: '/home/u/ComfyUI/models',
+  }
+}
+
+function mountPane(snapshot: StorageSnapshot = makeSnapshot()) {
+  return mount(StoragePane, {
+    props: {
+      installation: null,
+      snapshot,
+      sections: [],
+      pendingRestartFieldIds: new Set<string>(),
+      fieldErrorMessages: new Map<string, string>(),
+      runningActionIds: new Set<string>(),
+    },
+    global: { plugins: [makeI18n()] },
+    attachTo: document.body,
+  })
+}
+
+describe('StoragePane', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('renders the models-dir list from the snapshot prop', async () => {
+    installMockBridge()
+    const wrapper = mountPane()
+    await nextTick()
+    const rows = wrapper.findAll('.models-dir-row')
+    expect(rows).toHaveLength(2)
+    expect(rows[0]!.find('.tag-primary').exists()).toBe(true)
+    expect(rows[1]!.find('.tag-primary').exists()).toBe(false)
+  })
+
+  it('writes reordered dirs through the bridge when make-primary is invoked', async () => {
+    const bridge = installMockBridge()
+    const wrapper = mountPane()
+    await nextTick()
+    const toggles = wrapper.findAll('.models-dir-menu-wrap > button')
+    expect(toggles).toHaveLength(1)
+    await toggles[0]!.trigger('click')
+    await nextTick()
+    await flushPromises()
+    const makePrimary = wrapper.find('.models-dir-menu button[role="menuitem"]')
+    await makePrimary.trigger('click')
+    await flushPromises()
+    expect(bridge.setModelsDirsCalls).toEqual([
+      ['/mnt/extra/models', '/home/u/ComfyUI/models'],
+    ])
+  })
+
+  it('closes the dir menu on Escape and restores focus to the toggle', async () => {
+    installMockBridge()
+    const wrapper = mountPane()
+    await nextTick()
+    const toggle = wrapper.find<HTMLButtonElement>('.models-dir-menu-wrap > button')
+    await toggle.trigger('click')
+    await nextTick()
+    await flushPromises()
+    expect(wrapper.find('.models-dir-menu').exists()).toBe(true)
+    await wrapper.find('.models-dir-menu').trigger('keydown', { key: 'Escape' })
+    expect(wrapper.find('.models-dir-menu').exists()).toBe(false)
+    expect(document.activeElement).toBe(toggle.element)
+  })
+
+  it('opens a models dir through the bridge when the open icon is clicked', async () => {
+    const bridge = installMockBridge()
+    const wrapper = mountPane()
+    await nextTick()
+    const openBtns = wrapper.findAll('.models-dir-row .models-dir-action')
+    await openBtns[0]!.trigger('click')
+    expect(bridge.openPathCalls).toEqual(['/home/u/ComfyUI/models'])
+  })
+})
diff --git a/src/renderer/src/views/comfyUISettings/StoragePane.vue b/src/renderer/src/views/comfyUISettings/StoragePane.vue
new file mode 100644
index 00000000..168ddbb9
--- /dev/null
+++ b/src/renderer/src/views/comfyUISettings/StoragePane.vue
@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { AlertTriangle, Info } from 'lucide-vue-next'
+import { useModal } from '../../composables/useModal'
+import GlobalSettingsMicroSection from '../../comfyTitlePopup/globalSettings/GlobalSettingsMicroSection.vue'
+import ModelsDirList from '../../comfyTitlePopup/globalSettings/ModelsDirList.vue'
+import SettingsSectionList from './SettingsSectionList.vue'
+import type { DetailField, DetailSection, Installation } from '../../types/ipc'
+
+/**
+ * Storage tab pane for the instance-picker settings.
+ *
+ * Composes:
+ *  - Global shared-models UI (model directories + shared-directory
+ *    fields) — driven by the same `globalSettingsSnapshot` the popup
+ *    already streams, and mutated through the popup's existing
+ *    `__comfyTitlePopup.globalSettings*` bridge methods. This mirrors
+ *    the old Global Settings popup view exactly — only the render
+ *    surface changed.
+ *  - Per-install `useSharedPaths` toggle, sourced from `props.sections`
+ *    (main emits `{ tab: 'storage', fields: [useSharedPaths] }` for
+ *    desktop / portable installs; git installs omit it).
+ *
+ * Top-of-tab note swaps between an informational muted line and a
+ * warning-colour restart prompt when the user has touched any field
+ * in the tab during this session. The warning refers to restarting
+ * the desktop application — distinct from the per-field "Restart to
+ * apply" pill on `useSharedPaths`, which restarts the running Comfy
+ * instance.
+ */
+
+interface ModelsDir {
+  path: string
+  isPrimary: boolean
+  isDefault: boolean
+}
+
+export interface StorageSnapshot {
+  sharedDirectoriesFields: Record<string, unknown>[]
+  modelsDirs: ModelsDir[]
+  modelsSystemDefault: string
+}
+
+interface GlobalSettingsBridge {
+  globalSettingsUpdateField(
+    fieldId: string,
+    value: unknown
+  ): Promise<{ ok: boolean; message?: string }>
+  globalSettingsBrowseFolder(defaultPath?: string): Promise<string | null>
+  globalSettingsOpenPath(path: string): void
+  globalSettingsSetModelsDirs(dirs: string[]): Promise<{ ok: boolean }>
+}
+
+interface Props {
+  installation: Installation | null
+  /** Global snapshot fields the popup streams via
+   *  `onGlobalSettingsSnapshot`. Passed in as a prop so the picker view
+   *  doesn't subscribe twice. */
+  snapshot: StorageSnapshot
+  /** Per-install storage sections (today: a single section carrying
+   *  the `useSharedPaths` toggle for desktop / portable installs). */
+  sections: DetailSection[]
+  pendingRestartFieldIds: Set<string>
+  fieldErrorMessages: Map<string, string>
+  runningActionIds: Set<string>
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update-field': [field: DetailField, value: unknown]
+}>()
+
+const { t } = useI18n()
+const modal = useModal()
+
+const bridge = (window as unknown as { __comfyTitlePopup?: GlobalSettingsBridge })
+  .__comfyTitlePopup
+
+/** Tracks whether the user has touched ANY global field in this tab
+ *  session. Global writes go through `globalSettingsSetModelsDirs` /
+ *  `globalSettingsUpdateField`, which persist immediately — there is
+ *  no save step, only the intent-to-have-changed signal that drives
+ *  the warning-color swap on the top-of-tab note. */
+const globalTouched = ref(false)
+
+watch(
+  () => props.installation?.id ?? null,
+  () => {
+    globalTouched.value = false
+  }
+)
+
+const showRestartWarning = computed(() => {
+  if (globalTouched.value) return true
+  return props.pendingRestartFieldIds.has('useSharedPaths')
+})
+
+/** Note-bar leading icon. Computed (not inlined as `:is`-via-import)
+ *  so the symbols are typed as used — otherwise `<script setup>`
+ *  doesn't count `:is` template references as imports. */
+const noteIcon = computed(() => (showRestartWarning.value ? AlertTriangle : Info))
+
+const sharedDirsSections = computed<DetailSection[]>(() => [
+  { fields: props.snapshot.sharedDirectoriesFields as unknown as DetailField[] },
+])
+
+async function handleAddModelsDir(): Promise<void> {
+  const picked = await bridge?.globalSettingsBrowseFolder()
+  if (!picked) return
+  globalTouched.value = true
+  const dirs = props.snapshot.modelsDirs.map((d) => d.path)
+  dirs.push(picked)
+  await bridge?.globalSettingsSetModelsDirs(dirs)
+}
+
+async function handleRemoveModelsDir(index: number): Promise<void> {
+  const dir = props.snapshot.modelsDirs[index]
+  if (!dir) return
+  const ok = await modal.confirm({
+    title: t('models.removeDirTitle', 'Remove shared models directory?'),
+    message: t(
+      'models.removeDirConfirm',
+      "This won't delete any files. You can re-add the directory later from this list."
+    ),
+    confirmLabel: t('models.removeDir', 'Remove'),
+    confirmStyle: 'danger',
+  })
+  if (!ok) return
+  globalTouched.value = true
+  const dirs = props.snapshot.modelsDirs.map((d) => d.path)
+  dirs.splice(index, 1)
+  await bridge?.globalSettingsSetModelsDirs(dirs)
+}
+
+async function handleMakePrimary(index: number): Promise<void> {
+  globalTouched.value = true
+  const dirs = props.snapshot.modelsDirs.map((d) => d.path)
+  const moved = dirs.splice(index, 1)[0]
+  if (typeof moved !== 'string') return
+  dirs.unshift(moved)
+  await bridge?.globalSettingsSetModelsDirs(dirs)
+}
+
+function handleOpenModelsDir(path: string): void {
+  bridge?.globalSettingsOpenPath(path)
+}
+
+async function handleUpdateSharedDirField(field: DetailField, value: unknown): Promise<void> {
+  globalTouched.value = true
+  await bridge?.globalSettingsUpdateField(field.id, value)
+}
+
+function handleUpdatePerInstallField(field: DetailField, value: unknown): void {
+  emit('update-field', field, value)
+}
+</script>
+
+<template>
+  <div class="storage-pane">
+    <div class="storage-note" :class="{ 'is-warning': showRestartWarning }" role="status">
+      <component
+        :is="noteIcon"
+        :size="14"
+        class="storage-note-icon"
+        aria-hidden="true"
+      />
+      <p class="storage-note-text">
+        <template v-if="showRestartWarning">
+          {{
+            t(
+              'comfyUISettings.storageRestartNote',
+              'Restart the application (or close and reopen) for these changes to take effect.'
+            )
+          }}
+        </template>
+        <template v-else>
+          {{
+            t(
+              'comfyUISettings.storageGlobalNote',
+              'Changes here apply to all of your ComfyUI instances.'
+            )
+          }}
+        </template>
+      </p>
+    </div>
+
+    <!-- Per-install toggle (`useSharedPaths`) above the global model
+         lists so the user sees "this instance opts in to shared
+         storage" before scrolling through the dirs themselves. Hidden
+         for sources that opt out (git installs) where main emits no
+         storage section. -->
+    <SettingsSectionList
+      v-if="sections.length > 0"
+      :sections="sections"
+      :installation-id="installation?.id"
+      :running-action-ids="runningActionIds"
+      :pending-restart-field-ids="pendingRestartFieldIds"
+      :field-error-messages="fieldErrorMessages"
+      @update-field="handleUpdatePerInstallField"
+    />
+
+    <GlobalSettingsMicroSection
+      :title="t('settings.models', 'Shared Models')"
+      :tooltip="t('tooltips.sharedModels')"
+    >
+      <ModelsDirList
+        :dirs="snapshot.modelsDirs"
+        @open="handleOpenModelsDir"
+        @remove="handleRemoveModelsDir"
+        @make-primary="handleMakePrimary"
+        @add="handleAddModelsDir"
+      />
+    </GlobalSettingsMicroSection>
+
+    <GlobalSettingsMicroSection :title="t('settings.sharedDirectories', 'Shared Directories')">
+      <SettingsSectionList
+        :sections="sharedDirsSections"
+        :installation-id="installation?.id"
+        :running-action-ids="runningActionIds"
+        :pending-restart-field-ids="pendingRestartFieldIds"
+        :field-error-messages="fieldErrorMessages"
+        @update-field="handleUpdateSharedDirField"
+      />
+    </GlobalSettingsMicroSection>
+  </div>
+</template>
+
+<style scoped>
+.storage-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.storage-note {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--brand-surface-bg);
+  border: 1px solid var(--chooser-surface-border);
+  color: var(--text-muted);
+  transition:
+    color 160ms ease,
+    background-color 160ms ease,
+    border-color 160ms ease;
+}
+
+.storage-note-icon {
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+
+.storage-note-text {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+/* Warning state — solid `--warning` border + icon so the row reads
+ * as a banner, not chrome. Background + border + icon all shift to
+ * the warning token. Icon `color` is explicit so it overrides the
+ * base `.storage-note-icon { opacity: 0.85 }`. */
+.storage-note.is-warning {
+  color: var(--warning);
+  border-color: var(--warning);
+  background: color-mix(in srgb, var(--warning) 14%, transparent);
+  font-weight: 500;
+}
+
+.storage-note.is-warning .storage-note-icon {
+  color: var(--warning);
+  opacity: 1;
+}
+</style>
diff --git a/src/types/ipc.ts b/src/types/ipc.ts
index 05bde452..d0cd0d0c 100644
--- a/src/types/ipc.ts
+++ b/src/types/ipc.ts
@@ -122,6 +122,10 @@ export interface DetailField {
   browseOnly?: boolean
   onChangeAction?: string
   tooltip?: string
+  /** Marks fields that only take effect on next process start.
+   *  Renderer shows a per-field tag + promotes the footer Restart
+   *  button when one of these is edited while the install is running. */
+  requiresRestart?: boolean
   // text / number support — surfaced from SettingsField when DetailField
   // is built from a global SettingsSection (Global Settings panel).
   placeholder?: string
@@ -244,6 +248,14 @@ export interface ShowProgressOpts {
    *  model libraries…") which read as wrong copy. Falls back to
    *  `'generic'` when omitted so legacy callers keep working. */
   opKind?: 'launch' | 'install' | 'update' | 'destructive' | 'snapshot' | 'generic'
+  /** Tags this op as one leg of an install→launch chain so ProgressModal
+   *  can render a unified 0→100% bar across both ops instead of letting
+   *  the install fill 0→100 then stalling the launch at 100. `'install'`
+   *  maps the bar to 0→70%; `'launch'` maps to 70→100%. Stamped by
+   *  `useFirstUseChain` when capturing the install op and again when its
+   *  auto-launch watcher fires the chained launch. Standalone ops leave
+   *  this unset and keep their existing 0→100 behaviour. */
+  chainSpan?: 'install' | 'launch'
   /** Set on ops that remove the install from the registry as a
    *  successful side-effect (today: the install-level delete action).
    *  Drives three carve-outs on top of the standard takeover flow:
@@ -881,17 +893,14 @@ export interface ElectronApi {
    *  centre pill opens. Omitting `installationId` falls back to the
    *  host's active install — matches the pill-click behaviour.
    *
-   *  `mode: 'expanded'` opens the picker directly in the full
-   *  per-install settings UI (mounted in the right pane), with
-   *  `initialTab` seeding the active tab and `autoAction` firing an
-   *  action on mount. Used by the chooser kebab's specialised entries
+   *  `initialTab` seeds the active tab and `autoAction` fires an action
+   *  on mount. Used by the chooser kebab's specialised entries
    *  (Update / Migrate / Restore-Snapshot / Delete) and by the
    *  per-install deep links (`comfy://install-update/<id>`,
    *  `comfy://open-settings?tab=comfy`). */
   openInstancePicker(opts?: {
     installationId?: string | null
-    mode?: 'compact' | 'expanded'
-    initialTab?: 'config' | 'status' | 'update' | 'snapshots'
+    initialTab?: 'config' | 'status' | 'update' | 'snapshots' | 'storage'
     autoAction?: string | null
   }): void
   /** Push the first-use takeover's current step to main so it can