dsh-session-mng 0.1.3 → 0.2.0

package/client.js

@@ -22,6 +22,10 @@ window.__ModuleLoader__.load({
     const STYLE_ID = 'dsh-session-mng-style'
     const GROUP_PAGE_SIZE = 50
     const DEFAULT_COLLAPSE_AFTER = 100
+    /** Debounce between typing in the search box and applying the query. */
+    const SEARCH_DEBOUNCE_MS = 250
+    /** Ceiling on concurrent workspace-page requests (expand-all / focus). */
+    const MAX_CONCURRENT_PAGES = 3
 
     const DICT = {
       zh: {
@@ -48,7 +52,9 @@ window.__ModuleLoader__.load({
         showBlank: '显示空会话',
         cleanupBlank: '清理空会话（{n}）',
         cleanupBlankHint: '批量删除已归档的空会话；未归档的空会话需先归档。',
-        blankActiveHint: '另有 {n} 个未归档空会话，归档后才能清理。',
+        cleanupBlankLockedHint: '有 {n} 个已归档空会话已在 DSH 中打开，重启后才能清理。',
+        archiveBlank: '归档空会话（{n}）',
+        archiveBlankHint: '把未归档的空会话批量归档；归档后即可用「清理空会话」彻底删除。',
         hiddenBlankCount: '已隐藏 {n} 个空会话',
         selectAll: '全选当前列表',
         expandAll: '展开全部',
@@ -56,6 +62,15 @@ window.__ModuleLoader__.load({
         loadMore: '加载更多（剩余 {n} 条）',
         selectionScopeHint: '选择仅作用于当前筛选与展开结果。',
         searchAutoExpand: '搜索时自动展开命中工作区。',
+        groupLoading: '正在加载会话…',
+        groupLoadFailed: '加载失败：{message}',
+        groupRetry: '重试',
+        loadedOf: '已加载 {loaded}/{total}',
+        partialSelection: '另有 {n} 条未加载，未纳入全选',
+        parentNotLoaded: '来源父会话未加载',
+        overviewLoadFailed: '读取总览失败：{message}',
+        sizesPending: '正在统计大小…',
+        sizesUnavailable: '大小统计暂不可用，请稍后重试。',
         selectRow: '选择会话 {name}',
         justNow: '刚刚',
         titleApplied: '标题已写入。',
@@ -212,7 +227,9 @@ window.__ModuleLoader__.load({
         showBlank: 'Show empty sessions',
         cleanupBlank: 'Clean up empty sessions ({n})',
         cleanupBlankHint: 'Permanently delete archived empty sessions; unarchived empty sessions must be archived first.',
-        blankActiveHint: '{n} unarchived empty sessions must be archived before cleanup.',
+        cleanupBlankLockedHint: '{n} archived empty sessions are open in this DSH process; restart DSH before cleaning them up.',
+        archiveBlank: 'Archive empty sessions ({n})',
+        archiveBlankHint: 'Archive every unarchived empty session in one batch; they can then be cleaned up with "Clean up empty sessions".',
         hiddenBlankCount: '{n} empty sessions hidden',
         selectAll: 'Select all shown',
         expandAll: 'Expand all',
@@ -220,6 +237,15 @@ window.__ModuleLoader__.load({
         loadMore: 'Load {n} more',
         selectionScopeHint: 'Selection applies to the current filter and expanded workspaces.',
         searchAutoExpand: 'Matching workspaces expand automatically while searching.',
+        groupLoading: 'Loading sessions…',
+        groupLoadFailed: 'Could not load: {message}',
+        groupRetry: 'Retry',
+        loadedOf: '{loaded}/{total} loaded',
+        partialSelection: '{n} more not loaded; not included in Select all',
+        parentNotLoaded: 'Source session not loaded',
+        overviewLoadFailed: 'Could not load the overview: {message}',
+        sizesPending: 'Measuring sizes…',
+        sizesUnavailable: 'Size totals are not ready; try again in a moment.',
         selectRow: 'Select session {name}',
         justNow: 'just now',
         titleApplied: 'Title applied.',
@@ -356,10 +382,13 @@ window.__ModuleLoader__.load({
 
     const CSS = `
 .dsm-page{display:flex;flex-direction:column;gap:12px;font:inherit;color:var(--dsw-alias-label-primary);min-width:0}
-.dsm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
+/* Page head: title and its actions share the first row; the subtitles use the
+   full width below, so the buttons sit in the top-right corner. */
+.dsm-head{display:flex;flex-direction:column;gap:2px;min-width:0}
+.dsm-head-row{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;min-width:0}
 .dsm-title{margin:0;font-size:17px;font-weight:600;line-height:24px}
 .dsm-sub{margin:2px 0 0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary)}
-.dsm-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.dsm-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
 .dsm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:28px;padding:0 10px;
  border:1px solid var(--dsw-alias-border-l1);border-radius:6px;background:transparent;color:var(--dsw-alias-label-primary);
  font:inherit;font-size:12px;line-height:18px;cursor:pointer;white-space:nowrap}
@@ -387,6 +416,12 @@ window.__ModuleLoader__.load({
 .dsm-note.warn{border-color:var(--dsw-alias-state-warn-primary)}
 .dsm-note-actions{display:flex;gap:6px;flex-wrap:wrap;flex:0 0 auto}
 .dsm-note detail{flex:1 1 100%}
+/* Operation-result toast: floats above the pane so scrolling never hides it. */
+.dsm-toast{position:fixed;bottom:18px;right:18px;z-index:1200;width:max-content;
+ max-width:min(460px,calc(100vw - 36px));padding:10px 12px;border-radius:8px;
+ background:var(--dsw-alias-bg-layer-2);box-shadow:0 14px 40px rgba(0,0,0,.45);
+ animation:dsm-toast-in .16s ease-out}
+@keyframes dsm-toast-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
 .dsm-sticky{position:sticky;top:0;z-index:3;display:flex;flex-direction:column;gap:8px;
  padding:6px 0 8px;background:var(--dsw-alias-bg-layer-2);border-bottom:1px solid var(--dsw-alias-border-l1)}
 .dsm-batch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:7px;
@@ -417,6 +452,7 @@ window.__ModuleLoader__.load({
 .dsm-group-title{font-size:12px;font-weight:600;line-height:18px}
 .dsm-group-path{font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary);word-break:break-all}
 .dsm-group-meta{margin-left:auto;font-size:11px;color:var(--dsw-alias-label-secondary);white-space:nowrap}
+.dsm-group-loaded{padding:7px 10px;border-top:1px solid var(--dsw-alias-border-l1);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
 .dsm-warn{color:var(--dsw-alias-state-warn-primary);font-size:11px}
 .dsm-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto auto;align-items:center;gap:8px;
  padding:7px 10px;border-top:1px solid var(--dsw-alias-border-l1);min-width:0}
@@ -438,7 +474,10 @@ window.__ModuleLoader__.load({
 .dsm-empty{padding:22px 10px;text-align:center;font-size:12px;color:var(--dsw-alias-label-secondary);
  border:1px dashed var(--dsw-alias-border-l2);border-radius:8px}
 .dsm-detail{display:flex;flex-direction:column;gap:12px}
-.dsm-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
+/* The title row and its actions stay in view while the detail page scrolls. */
+.dsm-detail-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;
+ gap:10px;flex-wrap:wrap;padding:6px 0 8px;background:var(--dsw-alias-bg-layer-2);
+ border-bottom:1px solid var(--dsw-alias-border-l1)}
 .dsm-detail-title{margin:0;font-size:16px;line-height:23px;font-weight:600;word-break:break-word}
 .dsm-card{border:1px solid var(--dsw-alias-border-l1);border-radius:8px;background:var(--dsw-alias-bg-layer-1);padding:10px}
 .dsm-card h3{margin:0 0 8px;font-size:12px;line-height:18px;font-weight:600}
@@ -581,6 +620,7 @@ window.__ModuleLoader__.load({
           : t('noAdapterUnknown')
       }
       if (code === 'title-invalid') return t('titleInvalid')
+      if (code === 'sizes-pending') return t('sizesUnavailable')
       if (code === 'timeout') return t('timeout')
       if (code === 'llm-error') return t('llmError', { message: error?.message ?? '' })
       if (code === 'session-active') return t('sessionActive')
@@ -622,6 +662,26 @@ window.__ModuleLoader__.load({
     const getState = (includeSubagents, signal) =>
       request('GET', `/state?subagents=${includeSubagents ? '1' : '0'}`, undefined, signal)
 
+    const getOverview = (includeSubagents, signal) =>
+      request('GET', `/overview?subagents=${includeSubagents ? '1' : '0'}`, undefined, signal)
+
+    const getBlanks = (includeSubagents, signal) =>
+      request('GET', `/blanks?subagents=${includeSubagents ? '1' : '0'}`, undefined, signal)
+
+    const getSizes = (workspaceId, includeSubagents, signal) =>
+      request(
+        'GET',
+        `/sizes?workspaceId=${encodeURIComponent(workspaceId)}&subagents=${includeSubagents ? '1' : '0'}`,
+        undefined,
+        signal,
+      )
+
+    const getSessions = (params, signal) => request('GET', `/sessions?${queryOf(params)}`, undefined, signal)
+
+    const getSearch = (params, signal) => request('GET', `/search?${queryOf(params)}`, undefined, signal)
+
+    const getSession = (id, signal) => request('GET', `/session?id=${encodeURIComponent(id)}`, undefined, signal)
+
     const post = (action, body, signal) => request('POST', `/${action}`, body, signal)
 
     function useLocaleTick(ctx) {
@@ -655,11 +715,33 @@ window.__ModuleLoader__.load({
       return h('span', null, h('span', { className: 'dsm-spin', 'aria-hidden': 'true' }), ' ', label ?? t('working'))
     }
 
+    /** How long a plain success toast stays before hiding itself. */
+    const NOTICE_HIDE_MS = 5000
+
+    /**
+     * Operation-result toast.
+     *
+     * It floats above the settings pane (instead of sitting in the scroll flow),
+     * so a result is visible no matter where the list is scrolled. A plain
+     * success toast hides itself after a few seconds; failures and notices with
+     * an action stay until the user dismisses them, because they carry details
+     * worth reading.
+     */
     function Notice({ notice, t, onDismiss }) {
+      const dismiss = React.useRef(onDismiss)
+      dismiss.current = onDismiss
+      const transient = notice !== null && notice !== undefined
+        && notice.tone !== 'error' && notice.tone !== 'warn'
+        && notice.details === undefined && notice.action === undefined
+      React.useEffect(() => {
+        if (!transient) return undefined
+        const timer = setTimeout(() => dismiss.current?.(), NOTICE_HIDE_MS)
+        return () => clearTimeout(timer)
+      }, [notice, transient])
       if (notice === null || notice === undefined) return null
       return h(
         'div',
-        { className: `dsm-note ${notice.tone ?? ''}`, role: 'status' },
+        { className: `dsm-note dsm-toast ${notice.tone ?? ''}`, role: 'status' },
         h('div', { style: { flex: '1 1 auto', minWidth: 0 } },
           h('div', null, notice.text),
           notice.detail ? h('div', { className: 'dsm-hint', style: { marginTop: 3 } }, notice.detail) : null,
@@ -685,7 +767,21 @@ window.__ModuleLoader__.load({
     function Row({ row, selected, onToggle, onOpen, t }) {
       const depth = row.branchDepth ?? 0
       const branch = row.kind === 'fork'
+      const glyph = depth > 0 || row.branchOrphan === true
       const forkCount = row.forkCount ?? 0
+      // A branch whose parent is not among the loaded rows keeps the glyph but
+      // must not claim the parent is gone: the three cases read differently.
+      const parentNote = branch !== true
+        ? ''
+        : row.branchParentTitle
+          ? `${t('fromParent', { title: row.branchParentTitle })} · `
+          : row.branchParentMissing
+            ? `${t('parentMissing')} · `
+            : row.branchParentNotLoaded
+              ? `${t('parentNotLoaded')} · `
+              : row.branchDepth === undefined && row.parentPresent === false
+                ? `${t('parentMissing')} · `
+                : ''
       const badges = []
       if (row.running) badges.push(h(Badge, { key: 'run', tone: 'run' }, t('running')))
       if (row.archived) badges.push(h(Badge, { key: 'arch' }, t('archived')))
@@ -717,17 +813,13 @@ window.__ModuleLoader__.load({
           h(
             'span',
             { className: 'dsm-row-title' },
-            depth > 0 ? h('span', { className: 'dsm-branch-glyph', 'aria-hidden': 'true' }, '↳') : null,
+            glyph ? h('span', { className: 'dsm-branch-glyph', 'aria-hidden': 'true' }, '↳') : null,
             row.title === '' ? t('untitled') : row.title,
           ),
           h(
             'span',
             { className: 'dsm-row-meta' },
-            branch && row.parentTitle !== ''
-              ? `${t('fromParent', { title: row.parentTitle })} · `
-              : branch && row.parentPresent === false
-                ? `${t('parentMissing')} · `
-                : '',
+            parentNote,
             row.cwd === '' ? t('noCwd') : row.cwd,
             ' · ',
             row.id,
@@ -743,8 +835,15 @@ window.__ModuleLoader__.load({
       )
     }
 
-    function Group({ group, selected, onToggle, onSelect, onOpen, onMore, t, locked }) {
-      const remaining = group.rows.length - group.renderedRows.length
+    function Group({ group, selected, onToggle, onSelect, onOpen, onMore, onRetry, t, locked }) {
+      const total = Number.isFinite(group.total) ? group.total : group.rows.length
+      // Paged groups render everything they have loaded; the legacy fallback
+      // renders a 0.1.x-style 50-row window per group.
+      const rendered = Array.isArray(group.renderedRows) ? group.renderedRows : group.rows
+      const remaining = Math.max(0, total - rendered.length)
+      const size = formatBytesOrDash(group.bytes)
+      const meta = `${t('groupLine', { n: total, size })}${group.expanded === true && remaining > 0 ? ` · ${t('loadedOf', { loaded: rendered.length, total })}` : ''}`
+      const empty = rendered.length === 0
       return h(
         'section',
         { className: 'dsm-group' },
@@ -777,19 +876,30 @@ window.__ModuleLoader__.load({
               ? h('div', { className: 'dsm-warn' }, t('workspaceMissing'))
               : null,
           ),
-          h('div', { className: 'dsm-group-meta' }, t('groupLine', { n: group.rows.length, size: formatBytes(group.bytes) })),
+          h('div', { className: 'dsm-group-meta' }, meta),
         ),
-        group.renderedRows.map((row) =>
-          h(Row, {
-            key: row.id,
-            row,
-            selected: selected.has(row.id),
-            onToggle: () => onSelect(row.id),
-            onOpen: () => onOpen(row.id),
-            t,
-          }),
-        ),
-        group.expanded === true && remaining > 0
+        group.expanded === true && empty && (group.phase === 'loading' || group.phase === 'idle')
+          ? h('p', { className: 'dsm-group-loaded dsm-hint' }, t('groupLoading'))
+          : null,
+        group.expanded === true && group.phase === 'error'
+          ? h('div', { className: 'dsm-group-loaded' },
+              h('span', { className: 'dsm-error' }, t('groupLoadFailed', { message: errorText(t, group.error) })),
+              h('button', { type: 'button', className: 'dsm-btn', onClick: onRetry }, t('groupRetry')),
+            )
+          : null,
+        group.expanded === true
+          ? rendered.map((row) =>
+              h(Row, {
+                key: row.id,
+                row,
+                selected: selected.has(row.id),
+                onToggle: () => onSelect(row.id),
+                onOpen: () => onOpen(row.id),
+                t,
+              }),
+            )
+          : null,
+        group.expanded === true && remaining > 0 && group.phase === 'ready'
           ? h(
               'button',
               { type: 'button', className: 'dsm-btn ghost dsm-more', onClick: onMore },
@@ -982,30 +1092,44 @@ window.__ModuleLoader__.load({
     // Delete scope (shared by single and batch)
     // ---------------------------------------------------------------------
 
-    function DeleteScope({ ctx, t, ids, onConfirmed, onCancel, busy }) {
+    function DeleteScope({ ctx, t, ids, maxBatch, onConfirmed, onCancel, busy }) {
       const [phase, setPhase] = React.useState('loading')
       const [preview, setPreview] = React.useState(null)
       const [error, setError] = React.useState(null)
       const [checked, setChecked] = React.useState(false)
       const idsKey = ids.join('\u0000')
 
+      // One confirmation may name more sessions than a single request admits
+      // (the empty-session shortcut does). Preview in batches and merge the
+      // scopes so the dialog still shows one combined result.
       React.useEffect(() => {
         const controller = new AbortController()
         setPhase('loading')
         setChecked(false)
-        post('delete/preview', { sessionIds: ids }, controller.signal)
-          .then((value) => {
+        const size = Number.isFinite(maxBatch) && maxBatch > 0 ? maxBatch : 50
+        const merge = async () => {
+          const merged = { roots: [], errors: [], sessions: [], descendantCount: 0, forkChildren: [], totalBytes: 0 }
+          for (let index = 0; index < ids.length; index += size) {
+            const value = await post('delete/preview', { sessionIds: ids.slice(index, index + size) }, controller.signal)
             if (controller.signal.aborted) return
-            setPreview(value)
-            setPhase('ready')
-          })
-          .catch((failure) => {
-            if (failure?.name === 'AbortError') return
-            setError(errorText(t, failure))
-            setPhase('error')
-          })
+            merged.roots.push(...(value?.roots ?? []))
+            merged.errors.push(...(value?.errors ?? []))
+            merged.sessions.push(...(value?.sessions ?? []))
+            merged.descendantCount += value?.descendantCount ?? 0
+            merged.forkChildren.push(...(value?.forkChildren ?? []))
+            merged.totalBytes += value?.totalBytes ?? 0
+          }
+          if (controller.signal.aborted) return
+          setPreview(merged)
+          setPhase('ready')
+        }
+        merge().catch((failure) => {
+          if (failure?.name === 'AbortError') return
+          setError(errorText(t, failure))
+          setPhase('error')
+        })
         return () => controller.abort()
-      }, [idsKey, t])
+      }, [idsKey, maxBatch, t])
 
       React.useEffect(() => {
         const onKeyDown = (event) => {
@@ -1120,12 +1244,12 @@ window.__ModuleLoader__.load({
     // Detail view
     // ---------------------------------------------------------------------
 
-    function DetailView({ ctx, t, state, row, busy, onBack, onChanged, onOpen, onArchive, onRestore, onMove, onDelete }) {
+    function DetailView({ ctx, t, overview, limits, row, busy, onBack, onChanged, onOpen, onArchive, onRestore, onMove, onDelete }) {
       const [copied, setCopied] = React.useState(false)
       const [showDelete, setShowDelete] = React.useState(false)
       const deleteIds = React.useMemo(() => [row.id], [row.id])
       const [target, setTarget] = React.useState('')
-      const targets = (state?.workspaces ?? []).filter((workspace) => workspace.id !== row.workspaceId && workspace.status === 'ok')
+      const targets = (overview?.workspaces ?? []).filter((workspace) => workspace.id !== row.workspaceId && workspace.status === 'ok')
       const movable = row.can?.move === true && targets.length > 0
       const uiWorkspace = (() => {
         try {
@@ -1272,6 +1396,7 @@ window.__ModuleLoader__.load({
                     ctx,
                     t,
                     ids: deleteIds,
+                    maxBatch: limits?.maxBatch ?? 50,
                     busy,
                     onCancel: () => setShowDelete(false),
                     onConfirmed: (ids) => onDelete(ids),
@@ -1317,16 +1442,11 @@ window.__ModuleLoader__.load({
       return out.length === rows.length ? out : rows
     }
 
-    /**
-     * Derive the filtered / grouped / rendered view for the list.
-     * Pure so the selection-pruning effect can use it before the loading guard.
-     */
-    function computeView({ state, tab, workspaceFilter, query, sort, expanded, defaultExpanded, limits, showBlank }) {
-      const rows = state?.sessions ?? []
-      const workspaceOrder = state?.workspaces ?? []
-      const text = query.trim().toLowerCase()
+    /** Tab / workspace / blank / text filter over one state's rows. */
+    function filterRows(rows, { tab, workspaceFilter, query, showBlank }) {
+      const text = (query ?? '').trim().toLowerCase()
       const filtering = text !== ''
-      const filtered = rows.filter((row) => {
+      return rows.filter((row) => {
         if (tab === 'active' && row.archived) return false
         if (tab === 'archived' && !row.archived) return false
         if (workspaceFilter === 'ungrouped' && row.workspaceId !== null) return false
@@ -1338,20 +1458,37 @@ window.__ModuleLoader__.load({
         }
         return true
       })
-      const sorted = [...filtered].sort((left, right) => {
-        if (sort === 'created') return right.createdAt - left.createdAt
-        if (sort === 'size') return right.sizeBytes - left.sizeBytes
-        if (sort === 'title') return (left.title || left.cwd).localeCompare(right.title || right.cwd)
-        return right.updatedAt - left.updatedAt
+    }
+
+    /** Id order used as the tie-break of every sort so paged slices stay stable. */
+    function compareRowIds(left, right) {
+      if (left.id === right.id) return 0
+      return left.id < right.id ? -1 : 1
+    }
+
+    /** Sort a filtered row list; equal keys fall back to id ascending. */
+    function sortRows(rows, sort) {
+      return [...rows].sort((left, right) => {
+        let order
+        if (sort === 'created') order = right.createdAt - left.createdAt
+        else if (sort === 'size') order = right.sizeBytes - left.sizeBytes
+        else if (sort === 'title') order = (left.title || left.cwd).localeCompare(right.title || right.cwd)
+        else order = right.updatedAt - left.updatedAt
+        // `!order` also catches NaN from a missing numeric field.
+        return !order ? compareRowIds(left, right) : order
       })
+    }
+
+    /** Group sorted rows in workspace order, keeping the ungrouped group last. */
+    function groupRows(sorted, workspaceOrder) {
       const baseGroups = []
       for (const workspace of workspaceOrder) {
-        const groupRows = orderBranchRows(sorted.filter((row) => row.workspaceId === workspace.id))
-        if (groupRows.length === 0) continue
+        const rows = orderBranchRows(sorted.filter((row) => row.workspaceId === workspace.id))
+        if (rows.length === 0) continue
         baseGroups.push({
           ...workspace,
-          rows: groupRows,
-          bytes: groupRows.reduce((sum, row) => sum + row.sizeBytes, 0),
+          rows,
+          bytes: rows.reduce((sum, row) => sum + row.sizeBytes, 0),
         })
       }
       const ungroupedRows = orderBranchRows(sorted.filter((row) => row.workspaceId === null))
@@ -1364,7 +1501,12 @@ window.__ModuleLoader__.load({
           bytes: ungroupedRows.reduce((sum, row) => sum + row.sizeBytes, 0),
         })
       }
-      const groups = baseGroups.map((group) => {
+      return baseGroups
+    }
+
+    /** Attach expansion + page-limit state to each group; only expanded groups render rows. */
+    function expandGroups(baseGroups, { expanded, defaultExpanded, limits, filtering }) {
+      return baseGroups.map((group) => {
         const isExpanded = filtering ? true : (expanded === null ? defaultExpanded : expanded.has(group.id))
         const limit = limits[group.id] ?? GROUP_PAGE_SIZE
         return {
@@ -1374,6 +1516,47 @@ window.__ModuleLoader__.load({
           renderedRows: isExpanded ? group.rows.slice(0, limit) : [],
         }
       })
+    }
+
+    /**
+     * Keep only the selected ids that are still visible. Returning the previous
+     * Set when nothing is dropped keeps the React state identity stable.
+     */
+    function pruneSelection(selected, visibleIdSet) {
+      if (selected.size === 0) return selected
+      const next = new Set()
+      for (const id of selected) if (visibleIdSet.has(id)) next.add(id)
+      return next.size === selected.size ? selected : next
+    }
+
+    /**
+     * Key of every scope-dependent client state (selection pruning, page
+     * limits): it must change whenever a filter *or the sort* changes.
+     */
+    function scopeKey({ generatedAt, tab, workspaceFilter, query, sort, includeSubagents, showBlank, defaultExpanded, expanded }) {
+      return [
+        generatedAt ?? 0,
+        tab,
+        workspaceFilter,
+        query,
+        sort,
+        includeSubagents ? 1 : 0,
+        showBlank ? 1 : 0,
+        defaultExpanded ? 1 : 0,
+        expanded === null || expanded === undefined ? 'auto' : [...expanded].sort().join(','),
+      ].join('|')
+    }
+
+    /**
+     * Derive the filtered / grouped / rendered view for the list.
+     * Pure so the selection-pruning effect can use it before the loading guard.
+     */
+    function computeView({ state, tab, workspaceFilter, query, sort, expanded, defaultExpanded, limits, showBlank }) {
+      const rows = state?.sessions ?? []
+      const workspaceOrder = state?.workspaces ?? []
+      const filtering = query.trim() !== ''
+      const sorted = sortRows(filterRows(rows, { tab, workspaceFilter, query, showBlank }), sort)
+      const groups = expandGroups(groupRows(sorted, workspaceOrder), { expanded, defaultExpanded, limits, filtering })
       const visibleRows = groups.flatMap((group) => (group.expanded ? group.rows : []))
       return {
         filteredRows: sorted,
@@ -1383,87 +1566,691 @@ window.__ModuleLoader__.load({
       }
     }
 
+    // ---------------------------------------------------------------------
+    // Paged data layer helpers (pure; the page only schedules requests)
+    // ---------------------------------------------------------------------
+
+    /** True when a request failure means this Host build has no such route. */
+    function isMissingRoute(failure) {
+      return failure?.status === 404 || failure?.code === 'http-404' || failure?.code === 'not-found'
+    }
+
+    /** Encode a flat parameter object as a query string, skipping empty values. */
+    function queryOf(params) {
+      const parts = []
+      for (const key of Object.keys(params ?? {})) {
+        const value = params[key]
+        if (value === undefined || value === null || value === '') continue
+        parts.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
+      }
+      return parts.join('&')
+    }
+
+    /** The six-field scope key that invalidates page caches and selection. */
+    function dataScopeKey({ tab, workspaceFilter, query, sort, includeSubagents, showBlank }) {
+      return [tab, workspaceFilter, query, sort, includeSubagents ? 1 : 0, showBlank ? 1 : 0].join('|')
+    }
+
+    /** Append one page to the loaded rows, skipping ids already on screen. */
+    function mergePageRows(current, incoming) {
+      if (!Array.isArray(incoming) || incoming.length === 0) return current
+      const seen = new Set(current.map((row) => row.id))
+      const out = [...current]
+      for (const row of incoming) {
+        if (seen.has(row.id)) continue
+        seen.add(row.id)
+        out.push(row)
+      }
+      return out
+    }
+
+    /** Merge rows into the id → row cache; later responses win. */
+    function mergeRowCache(cache, rows) {
+      if (!Array.isArray(rows) || rows.length === 0) return cache
+      const next = new Map(cache)
+      for (const row of rows) next.set(row.id, row)
+      return next
+    }
+
+    /**
+     * Nest one group's loaded rows and annotate branch rows whose parent is not
+     * among them: such a row stays top level but keeps the "↳" glyph, and its
+     * meta line distinguishes "not loaded", "no longer exists", and "from X".
+     */
+    function annotateBranchRows(rows) {
+      const ordered = orderBranchRows(rows)
+      const ids = new Set(rows.map((row) => row.id))
+      return ordered.map((row) => {
+        if (row.kind !== 'fork') return row
+        const parentLoaded = row.parentSessionId !== null && ids.has(row.parentSessionId)
+        if (parentLoaded) {
+          return { ...row, branchParentTitle: row.parentTitle || '', branchParentMissing: false, branchParentNotLoaded: false }
+        }
+        const stub = row.parentStub
+        const stubKnown = stub !== null && stub !== undefined
+        const present = stubKnown ? stub.present === true : row.parentPresent !== false
+        const stubTitle = stubKnown && typeof stub.title === 'string' ? stub.title : ''
+        const title = stubTitle !== '' ? stubTitle : row.parentTitle || ''
+        if (present !== true) {
+          return { ...row, branchDepth: 0, branchOrphan: true, branchParentTitle: '', branchParentMissing: true, branchParentNotLoaded: false }
+        }
+        if (title !== '') {
+          return { ...row, branchDepth: 0, branchOrphan: true, branchParentTitle: title, branchParentMissing: false, branchParentNotLoaded: false }
+        }
+        return { ...row, branchDepth: 0, branchOrphan: true, branchParentTitle: '', branchParentMissing: false, branchParentNotLoaded: true }
+      })
+    }
+
+    /** A `/state` payload expressed in the `/overview` shape (old-Host fallback). */
+    function overviewFromState(state) {
+      const rows = Array.isArray(state?.sessions) ? state.sessions : []
+      const workspaces = Array.isArray(state?.workspaces) ? state.workspaces : []
+      const bucketOf = (subset) => ({
+        count: subset.length,
+        activeCount: subset.filter((row) => !row.archived).length,
+        archivedCount: subset.filter((row) => row.archived).length,
+        blankCount: subset.filter((row) => row.blank === true).length,
+      })
+      const totals = state?.totals ?? {}
+      const ungroupedRows = rows.filter((row) => row.workspaceId === null)
+      return {
+        generatedAt: state?.generatedAt ?? 0,
+        source: 'legacy',
+        backend: state?.backend,
+        capabilities: state?.capabilities ?? {},
+        limits: state?.limits ?? {},
+        workspaces: workspaces.map((workspace) => ({
+          ...workspace,
+          ...bucketOf(rows.filter((row) => row.workspaceId === workspace.id)),
+          totalBytes: null,
+        })),
+        ungrouped: { ...bucketOf(ungroupedRows), totalBytes: null },
+        totals: {
+          all: totals.all ?? rows.length,
+          active: totals.active ?? rows.filter((row) => !row.archived).length,
+          archived: totals.archived ?? rows.filter((row) => row.archived).length,
+          subagents: rows.filter((row) => row.isSubagent === true).length,
+          hiddenSubagents: totals.hiddenSubagents ?? 0,
+          forks: rows.filter((row) => row.kind === 'fork').length,
+          blank: rows.filter((row) => row.blank === true).length,
+          bytes: totals.bytes ?? null,
+        },
+        orphans: Array.isArray(state?.orphans) ? state.orphans : [],
+      }
+    }
+
+    /** The three blank-session id lists, derived from one `/state` payload. */
+    function blanksFromState(state) {
+      const rows = Array.isArray(state?.sessions) ? state.sessions : []
+      const blank = rows.filter((row) => row.blank === true)
+      return {
+        unarchivedIds: blank.filter((row) => !row.archived).map((row) => row.id),
+        archivedIds: blank.filter((row) => row.archived).map((row) => row.id),
+        deletableIds: blank.filter((row) => row.archived && row.can?.delete === true).map((row) => row.id),
+      }
+    }
+
+    function bytesOf(value) {
+      if (value === null || value === undefined) return null
+      const number = Number(value)
+      return Number.isFinite(number) ? number : null
+    }
+
+    /**
+     * Normalize the `/sizes` payload:
+     * `{total:{bytes,count}, workspaces:[{id,bytes,count}], ungrouped:{bytes,count}}`.
+     * The short aliases keep a degraded or older payload usable.
+     */
+    function normalizeSizes(value) {
+      const byWorkspace = new Map()
+      const list = Array.isArray(value) ? value : Array.isArray(value?.workspaces) ? value.workspaces : []
+      for (const item of list) {
+        if (item === null || typeof item !== 'object') continue
+        const id = typeof item.id === 'string' ? item.id : typeof item.workspaceId === 'string' ? item.workspaceId : ''
+        if (id === '') continue
+        const bytes = bytesOf(item.totalBytes ?? item.bytes ?? item.sizeBytes)
+        if (bytes !== null) byWorkspace.set(id, bytes)
+      }
+      const ungroupedBytes = bytesOf(value?.ungrouped?.bytes ?? value?.ungrouped?.totalBytes)
+      if (ungroupedBytes !== null) byWorkspace.set('ungrouped', ungroupedBytes)
+      const totalSource = value?.totalBytes ?? value?.bytes ?? value?.total
+      const totalBytes = totalSource !== null && typeof totalSource === 'object'
+        ? bytesOf(totalSource.bytes ?? totalSource.totalBytes ?? totalSource.sizeBytes)
+        : bytesOf(totalSource)
+      return { totalBytes, byWorkspace }
+    }
+
+    function formatBytesOrDash(bytes) {
+      return Number.isFinite(bytes) && bytes >= 0 ? formatBytes(bytes) : '—'
+    }
+
+    /** Count one overview bucket for a tab. */
+    function countBucket(bucket, tab) {
+      if (bucket === null || bucket === undefined) return 0
+      if (tab === 'archived') return bucket.archivedCount ?? 0
+      if (tab === 'active') return bucket.activeCount ?? 0
+      return bucket.count ?? 0
+    }
+
+    /**
+     * Compose the rendered groups from the overview plus the loaded page cache.
+     * Pure: the page component only memoizes it. `searchMode` keeps only groups
+     * the search answered for; `requirePage` does the same for the legacy
+     * fallback, whose pages are built locally.
+     */
+    function composeGroups({ overview, pages, sizes, expanded, defaultExpanded, query, tab, workspaceFilter, showBlank, searchMode, requirePage, legacy, legacyLimits }) {
+      const filtering = typeof query === 'string' && query.trim() !== ''
+      const isExpanded = (id) => (filtering ? true : expanded === null ? defaultExpanded : expanded.has(id))
+      const workspaces = Array.isArray(overview?.workspaces) ? overview.workspaces : []
+      const workspaceById = new Map(workspaces.map((workspace) => [workspace.id, workspace]))
+      const ids = []
+      for (const workspace of workspaces) {
+        if (workspaceFilter !== 'all' && workspace.id !== workspaceFilter) continue
+        ids.push(workspace.id)
+      }
+      const ungrouped = overview?.ungrouped
+      if ((workspaceFilter === 'all' || workspaceFilter === 'ungrouped') && (ungrouped?.count ?? 0) > 0) ids.push('ungrouped')
+      const groups = []
+      for (const id of ids) {
+        // Structural checks: these maps may come from another realm in tests.
+        const page = pages !== null && pages !== undefined && typeof pages.get === 'function' ? pages.get(id) : undefined
+        if ((searchMode === true || requirePage === true) && page === undefined) continue
+        const meta = id === 'ungrouped'
+          ? { title: '', path: '', status: 'ok' }
+          : workspaceById.get(id) ?? { title: '', path: '', status: 'ok' }
+        let fallbackCount = id === 'ungrouped' ? countBucket(ungrouped, tab) : countBucket(meta, tab)
+        if (showBlank !== true && tab === 'all') {
+          fallbackCount -= id === 'ungrouped' ? ungrouped?.blankCount ?? 0 : meta.blankCount ?? 0
+        }
+        if (fallbackCount < 0) fallbackCount = 0
+        if (page === undefined && fallbackCount <= 0) continue
+        if (page !== undefined && page.phase === 'ready' && (page.total ?? 0) === 0) continue
+        const rows = annotateBranchRows(Array.isArray(page?.rows) ? page.rows : [])
+        // The legacy fallback has every row in memory but keeps the 0.1.x
+        // per-group window: expand to 50, "load more" grows it by 50.
+        const windowSize = legacy === true ? legacyLimits?.[id] ?? GROUP_PAGE_SIZE : rows.length
+        groups.push({
+          id,
+          title: meta.title ?? '',
+          path: meta.path ?? '',
+          status: meta.status,
+          rows,
+          renderedRows: isExpanded(id) ? rows.slice(0, windowSize) : [],
+          expanded: isExpanded(id),
+          total: page !== undefined && Number.isFinite(page.total) ? page.total : fallbackCount,
+          hasMore: page?.hasMore === true,
+          phase: page?.phase ?? 'idle',
+          error: page?.error ?? null,
+          bytes: sizes !== null && sizes !== undefined && typeof sizes.byWorkspace?.get === 'function' ? sizes.byWorkspace.get(id) ?? null : null,
+        })
+      }
+      const visibleRows = groups.flatMap((group) => (group.expanded === true ? group.rows : []))
+      let partialCount = 0
+      for (const group of groups) {
+        if (group.expanded !== true) continue
+        partialCount += Math.max(0, (group.total ?? 0) - group.rows.length)
+      }
+      return {
+        groups,
+        visibleRows,
+        visibleIdSet: new Set(visibleRows.map((row) => row.id)),
+        partialCount,
+      }
+    }
+
+    /** Run scheduled page loads with a small concurrency ceiling. */
+    function pumpLimiter(state) {
+      while (state.active < MAX_CONCURRENT_PAGES && state.queue.length > 0) {
+        const task = state.queue.shift()
+        state.active += 1
+        Promise.resolve()
+          .then(task)
+          .catch(() => {})
+          .then(() => {
+            state.active -= 1
+            pumpLimiter(state)
+          })
+      }
+    }
+
     function SessionManagerPage(props) {
       const { ctx, t } = props
       useLocaleTick(ctx)
-      const [state, setState] = React.useState(null)
-      const [phase, setPhase] = React.useState('loading')
-      const [error, setError] = React.useState(null)
       const [tab, setTab] = React.useState('all')
       const [workspaceFilter, setWorkspaceFilter] = React.useState('all')
+      const [queryInput, setQueryInput] = React.useState('')
       const [query, setQuery] = React.useState('')
       const [sort, setSort] = React.useState('updated')
       const [includeSubagents, setIncludeSubagents] = React.useState(false)
+      const [showBlank, setShowBlank] = React.useState(false)
+      const [expanded, setExpanded] = React.useState(null)
       const [selected, setSelected] = React.useState(() => new Set())
       const [selectedId, setSelectedId] = React.useState(null)
       const [busy, setBusy] = React.useState(false)
       const [notice, setNotice] = React.useState(null)
       const [bulkDeleteIds, setBulkDeleteIds] = React.useState(null)
       const [bulkTarget, setBulkTarget] = React.useState('')
-      const [expanded, setExpanded] = React.useState(null)
-      const [limits, setLimits] = React.useState({})
-      const [showBlank, setShowBlank] = React.useState(false)
-      const abortRef = React.useRef(null)
+      // Two-stage data layer: `overview` is the first paint, `pages` holds one
+      // lazily loaded page box per workspace, `rowCache` is the only row source
+      // for the detail view and for batch submissions.
+      const [transport, setTransport] = React.useState('loading')
+      const [overview, setOverview] = React.useState(null)
+      const [overviewPhase, setOverviewPhase] = React.useState('loading')
+      const [overviewError, setOverviewError] = React.useState(null)
+      const [legacyState, setLegacyState] = React.useState(null)
+      const [pages, setPages] = React.useState(() => new Map())
+      const [rowCache, setRowCache] = React.useState(() => new Map())
+      const [blanks, setBlanks] = React.useState(null)
+      const [sizes, setSizes] = React.useState(null)
+      const [sizesPhase, setSizesPhase] = React.useState('idle')
+      const [searchPhase, setSearchPhase] = React.useState('idle')
+      const [searchError, setSearchError] = React.useState(null)
+      const [reload, setReload] = React.useState(0)
+      // Legacy fallback only: per-group row window (0.1.x "load more").
+      const [legacyLimits, setLegacyLimits] = React.useState({})
+      const [detail, setDetail] = React.useState(null)
+      const [detailPhase, setDetailPhase] = React.useState('idle')
+      const [detailError, setDetailError] = React.useState(null)
+      const [detailNonce, setDetailNonce] = React.useState(0)
       const searchRef = React.useRef(null)
       const listScroll = React.useRef(0)
+      const overviewAbort = React.useRef(null)
+      const sizesAbort = React.useRef(null)
+      const searchAbort = React.useRef(null)
+      const detailAbort = React.useRef(null)
+      const pagesEpoch = React.useRef(0)
+      const pageControllers = React.useRef(new Map())
+      const inflightPages = React.useRef(new Set())
+      const limiter = React.useRef({ active: 0, queue: [] })
+      const preserveCounts = React.useRef(new Map())
+      const preserveChain = React.useRef(new Set())
+      const transportRef = React.useRef('loading')
+      const overviewRef = React.useRef(null)
+      const legacyStateRef = React.useRef(null)
+      const pagesRef = React.useRef(pages)
+      const rowCacheRef = React.useRef(rowCache)
+      const tabRef = React.useRef(tab)
+      const sortRef = React.useRef(sort)
+      const queryRef = React.useRef(query)
+      const includeSubagentsRef = React.useRef(includeSubagents)
+      const showBlankRef = React.useRef(showBlank)
+      // Latest-value refs: background tasks read these instead of stale closures.
+      pagesRef.current = pages
+      rowCacheRef.current = rowCache
+      tabRef.current = tab
+      sortRef.current = sort
+      queryRef.current = query
+      includeSubagentsRef.current = includeSubagents
+      showBlankRef.current = showBlank
+
+      const scope = dataScopeKey({ tab, workspaceFilter, query, sort, includeSubagents, showBlank })
+      const isSearch = query !== ''
+
+      /** The two empty-session shortcuts' id lists; absent until a response lands. */
+      const loadBlanks = async () => {
+        try {
+          const value = await getBlanks(includeSubagentsRef.current)
+          if (value !== null && value !== undefined) setBlanks(value)
+        } catch {
+          // The shortcuts degrade to hidden buttons when /blanks is unavailable.
+          setBlanks(null)
+        }
+      }
 
-      const load = React.useCallback(async (options = {}) => {
-        abortRef.current?.abort()
+      /** Total / per-workspace bytes, fetched out of band and never awaited. */
+      const loadSizes = async () => {
+        sizesAbort.current?.abort()
         const controller = new AbortController()
-        abortRef.current = controller
-        if (options.silent !== true) setPhase((previous) => (previous === 'ready' ? previous : 'loading'))
+        sizesAbort.current = controller
+        setSizesPhase('loading')
         try {
-          const value = await getState(includeSubagents, controller.signal)
+          const value = await getSizes('all', includeSubagentsRef.current, controller.signal)
           if (controller.signal.aborted) return
-          setState(value)
-          setPhase('ready')
-          setError(null)
+          setSizes(normalizeSizes(value))
+          setSizesPhase('ready')
         } catch (failure) {
           if (failure?.name === 'AbortError') return
-          setError(failure)
-          setPhase('error')
+          setSizes(null)
+          setSizesPhase('error')
         }
-      }, [includeSubagents])
+      }
+
+      /**
+       * First paint: `/overview` (counts only). A Host that predates the route
+       * is detected once and served by the 0.1.x `/state` path from then on.
+       */
+      const loadOverview = async (options = {}) => {
+        overviewAbort.current?.abort()
+        const controller = new AbortController()
+        overviewAbort.current = controller
+        const silent = options.silent === true
+        if (!silent && overviewRef.current === null) setOverviewPhase('loading')
+        try {
+          if (transportRef.current !== 'legacy') {
+            try {
+              const value = await getOverview(includeSubagentsRef.current, controller.signal)
+              if (controller.signal.aborted) return
+              transportRef.current = 'paged'
+              setTransport('paged')
+              overviewRef.current = value
+              setOverview(value)
+              setOverviewPhase('ready')
+              setOverviewError(null)
+              void loadBlanks()
+              return
+            } catch (failure) {
+              if (failure?.name === 'AbortError') return
+              if (transportRef.current !== 'loading' || !isMissingRoute(failure)) throw failure
+              // Old Host: no /overview route at all. Fall back for good.
+              transportRef.current = 'legacy'
+              setTransport('legacy')
+            }
+          }
+          const value = await getState(includeSubagentsRef.current, controller.signal)
+          if (controller.signal.aborted) return
+          legacyStateRef.current = value
+          setLegacyState(value)
+          setOverview(overviewFromState(value))
+          setBlanks(blanksFromState(value))
+          setOverviewPhase('ready')
+          setOverviewError(null)
+        } catch (failure) {
+          if (failure?.name === 'AbortError') return
+          setOverviewError(failure)
+          setOverviewPhase('error')
+        }
+      }
+
+      /** Cross-workspace search: one request answers every matching workspace. */
+      const runSearch = async () => {
+        searchAbort.current?.abort()
+        const controller = new AbortController()
+        searchAbort.current = controller
+        const epoch = pagesEpoch.current
+        setSearchPhase('loading')
+        setSearchError(null)
+        try {
+          const value = await getSearch({
+            query: queryRef.current,
+            tab: tabRef.current,
+            sort: sortRef.current,
+            subagents: includeSubagentsRef.current ? 1 : 0,
+            blank: showBlankRef.current ? 1 : 0,
+            limitPerGroup: GROUP_PAGE_SIZE,
+          }, controller.signal)
+          if (controller.signal.aborted || epoch !== pagesEpoch.current) return
+          const groups = Array.isArray(value?.groups) ? value.groups : []
+          const nextPages = new Map()
+          const cacheRows = []
+          for (const group of groups) {
+            const id = group?.workspaceId === null || group?.workspaceId === undefined ? 'ungrouped' : group.workspaceId
+            const rows = Array.isArray(group?.rows) ? group.rows : []
+            nextPages.set(id, {
+              rows,
+              total: Number.isFinite(group?.total) ? group.total : rows.length,
+              offset: rows.length,
+              hasMore: group?.hasMore === true,
+              phase: 'ready',
+              error: null,
+            })
+            for (const row of rows) cacheRows.push(row)
+          }
+          pagesRef.current = nextPages
+          setPages(nextPages)
+          setRowCache((previous) => mergeRowCache(previous, cacheRows))
+          setSearchPhase('ready')
+        } catch (failure) {
+          if (failure?.name === 'AbortError') return
+          if (epoch !== pagesEpoch.current) return
+          setSearchError(failure)
+          setSearchPhase('error')
+        }
+      }
+
+      /** Load (or append) one workspace page; stale epochs are dropped. */
+      const loadGroupPage = async (groupId, requestOffset, options = {}) => {
+        if (transportRef.current !== 'paged') return
+        const append = options.append === true
+        const epoch = pagesEpoch.current
+        const controller = new AbortController()
+        pageControllers.current.get(groupId)?.abort()
+        pageControllers.current.set(groupId, controller)
+        setPages((previous) => {
+          const next = new Map(previous)
+          const page = next.get(groupId) ?? { rows: [], total: 0, offset: 0, hasMore: false }
+          next.set(groupId, { ...page, phase: 'loading', error: null })
+          return next
+        })
+        try {
+          const value = await getSessions({
+            workspaceId: groupId,
+            tab: tabRef.current,
+            query: queryRef.current,
+            sort: sortRef.current,
+            subagents: includeSubagentsRef.current ? 1 : 0,
+            blank: showBlankRef.current ? 1 : 0,
+            offset: requestOffset,
+            limit: GROUP_PAGE_SIZE,
+            sizes: 1,
+          }, controller.signal)
+          if (controller.signal.aborted || epoch !== pagesEpoch.current) return
+          const incoming = Array.isArray(value?.rows) ? value.rows : []
+          setPages((previous) => {
+            const next = new Map(previous)
+            const page = next.get(groupId) ?? { rows: [], total: 0, offset: 0, hasMore: false }
+            const rows = append ? mergePageRows(page.rows, incoming) : incoming
+            next.set(groupId, {
+              rows,
+              total: Number.isFinite(value?.total) ? value.total : rows.length,
+              offset: (Number.isFinite(requestOffset) ? requestOffset : 0) + incoming.length,
+              hasMore: value?.hasMore === true,
+              phase: 'ready',
+              error: null,
+            })
+            return next
+          })
+          setRowCache((previous) => mergeRowCache(previous, incoming))
+          // Walk back down to the depth this group had loaded before a refresh
+          // (writes and the Refresh button preserve selection/scroll).
+          const target = preserveCounts.current.get(groupId)
+          if (target !== undefined) {
+            const loaded = (Number.isFinite(requestOffset) ? requestOffset : 0) + incoming.length
+            if (loaded < target && value?.hasMore === true) {
+              if (!preserveChain.current.has(groupId)) {
+                preserveChain.current.add(groupId)
+                schedulePage(async () => {
+                  try {
+                    await loadGroupPage(groupId, loaded, { append: true })
+                  } finally {
+                    preserveChain.current.delete(groupId)
+                  }
+                })
+              }
+            } else {
+              preserveCounts.current.delete(groupId)
+            }
+          }
+        } catch (failure) {
+          if (failure?.name === 'AbortError') return
+          if (epoch !== pagesEpoch.current) return
+          setPages((previous) => {
+            const next = new Map(previous)
+            const page = next.get(groupId) ?? { rows: [], total: 0, offset: 0, hasMore: false }
+            next.set(groupId, { ...page, phase: 'error', error: failure })
+            return next
+          })
+        } finally {
+          if (pageControllers.current.get(groupId) === controller) pageControllers.current.delete(groupId)
+        }
+      }
+
+      /** Queue one page load under the shared concurrency ceiling. */
+      const schedulePage = (task) => {
+        const state = limiter.current
+        state.queue.push(task)
+        pumpLimiter(state)
+      }
+
+      const ensureGroupPage = (groupId, force = false) => {
+        if (transportRef.current !== 'paged') return
+        if (force !== true && pagesRef.current.has(groupId)) return
+        if (inflightPages.current.has(groupId)) return
+        inflightPages.current.add(groupId)
+        schedulePage(async () => {
+          try {
+            await loadGroupPage(groupId, 0)
+          } finally {
+            inflightPages.current.delete(groupId)
+          }
+        })
+      }
+
+      const loadMoreGroup = (groupId) => {
+        if (transportRef.current !== 'paged') return
+        if (inflightPages.current.has(groupId)) return
+        const page = pagesRef.current.get(groupId)
+        const offset = page?.rows?.length ?? 0
+        inflightPages.current.add(groupId)
+        schedulePage(async () => {
+          try {
+            await loadGroupPage(groupId, offset, { append: true })
+          } finally {
+            inflightPages.current.delete(groupId)
+          }
+        })
+      }
+
+      const retryGroup = (groupId) => {
+        ensureGroupPage(groupId, true)
+      }
+
+      /** Drop every loaded page (scope change or an explicit refresh). */
+      const resetPageCache = (clearSelection) => {
+        pagesEpoch.current += 1
+        for (const controller of pageControllers.current.values()) controller.abort()
+        pageControllers.current.clear()
+        inflightPages.current.clear()
+        preserveChain.current = new Set()
+        if (clearSelection === true) preserveCounts.current = new Map()
+        setLegacyLimits({})
+        pagesRef.current = new Map()
+        setPages(new Map())
+        if (clearSelection === true) setSelected(new Set())
+        setSearchPhase('idle')
+        setSearchError(null)
+      }
+
+      /** Refresh after a write or the Refresh button: overview first, then pages. */
+      const refresh = async () => {
+        // Remember how deep each loaded group was so the refetch keeps the
+        // user's scroll position instead of collapsing back to one page.
+        const counts = new Map()
+        for (const [groupId, page] of pagesRef.current) {
+          if (page?.phase === 'ready' && (page.rows?.length ?? 0) > 0) counts.set(groupId, page.rows.length)
+        }
+        preserveCounts.current = counts
+        await loadOverview({ silent: true })
+        setReload((value) => value + 1)
+        setDetailNonce((value) => value + 1)
+      }
 
       React.useEffect(() => {
-        void load()
-        return () => abortRef.current?.abort()
-      }, [load])
+        void loadOverview()
+        return () => {
+          overviewAbort.current?.abort()
+          for (const controller of pageControllers.current.values()) controller.abort()
+        }
+      }, [includeSubagents])
 
+      // The window gaining focus only refreshes the cheap first paint; open
+      // workspaces stay as they are and reload on the next explicit action.
       React.useEffect(() => {
-        const onFocus = () => void load({ silent: true })
+        const onFocus = () => void loadOverview({ silent: true })
         window.addEventListener('focus', onFocus)
         return () => window.removeEventListener('focus', onFocus)
-      }, [load])
+      }, [])
 
+      // A scope change invalidates every page AND the selection (data safety:
+      // an id selected under another tab/query must never reach a batch call).
       React.useEffect(() => {
-        if (selectedId === null) return
-        if (state !== null && !state.sessions.some((row) => row.id === selectedId)) setSelectedId(null)
-      }, [state, selectedId])
+        resetPageCache(true)
+      }, [scope])
+
+      // A write or manual refresh drops the loaded pages but keeps the selection.
+      // The legacy path rebuilds its pages from /state instead of clearing them.
+      React.useEffect(() => {
+        if (reload === 0) return
+        if (transportRef.current === 'legacy') {
+          setLegacyLimits({})
+          return
+        }
+        resetPageCache(false)
+      }, [reload])
+
+      // Old-Host fallback: pages are carved locally out of one /state payload.
+      React.useEffect(() => {
+        if (transport !== 'legacy' || legacyState === null) return
+        const viewNow = computeView({
+          state: legacyState,
+          tab,
+          workspaceFilter,
+          query,
+          sort,
+          expanded: null,
+          defaultExpanded: false,
+          limits: {},
+          showBlank,
+        })
+        const nextPages = new Map()
+        for (const group of viewNow.groups) {
+          nextPages.set(group.id, {
+            rows: group.rows,
+            total: group.rows.length,
+            offset: group.rows.length,
+            hasMore: false,
+            phase: 'ready',
+            error: null,
+          })
+        }
+        pagesRef.current = nextPages
+        setPages(nextPages)
+        setRowCache((previous) => mergeRowCache(previous, viewNow.groups.flatMap((group) => group.rows)))
+        setSizes({
+          totalBytes: bytesOf(legacyState?.totals?.bytes),
+          byWorkspace: new Map(viewNow.groups.map((group) => [group.id, group.bytes])),
+        })
+        setSizesPhase('ready')
+      }, [transport, legacyState, scope, reload])
+
+      // Search is server-side and debounced through `query`; the applied query
+      // is part of the scope key, so old results never survive a new search.
+      React.useEffect(() => {
+        if (transport !== 'paged' || query.trim() === '') return undefined
+        void runSearch()
+        return () => searchAbort.current?.abort()
+      }, [transport, scope, reload])
+
+      React.useEffect(() => {
+        if (transport !== 'paged') return
+        void loadSizes()
+        return () => sizesAbort.current?.abort()
+      }, [transport, includeSubagents, reload])
+
+      // Typing is debounced; `query` only changes once the user pauses.
+      React.useEffect(() => {
+        const text = queryInput.trim()
+        if (text === query) return undefined
+        const timer = setTimeout(() => setQuery(text), SEARCH_DEBOUNCE_MS)
+        return () => clearTimeout(timer)
+      }, [queryInput, query])
 
       React.useEffect(() => {
         if (selectedId === null) return
-        const detail = document.querySelector('.dsm-detail')
-        const parent = scrollParentOf(detail)
+        const detailElement = document.querySelector('.dsm-detail')
+        const parent = scrollParentOf(detailElement)
         if (parent !== null && typeof parent.scrollTop === 'number') parent.scrollTop = 0
       }, [selectedId])
 
-      const openDetail = (id) => {
-        const page = document.querySelector('.dsm-page')
-        const parent = scrollParentOf(page)
-        listScroll.current = parent?.scrollTop ?? 0
-        setSelectedId(id)
-      }
-
-      const backToList = () => {
-        setSelectedId(null)
-        requestAnimationFrame(() => {
-          const page = document.querySelector('.dsm-page')
-          const parent = scrollParentOf(page)
-          if (parent !== null && typeof parent.scrollTop === 'number') parent.scrollTop = listScroll.current
-        })
-      }
-
       React.useEffect(() => {
         if (selectedId === null) return undefined
         const onKeyDown = (event) => {
@@ -1477,37 +2264,147 @@ window.__ModuleLoader__.load({
         return () => document.removeEventListener('keydown', onKeyDown, true)
       }, [selectedId])
 
+      // Detail row: render the cached row immediately, then refresh it from the
+      // dedicated route; only an explicit not-found clears the view.
       React.useEffect(() => {
-        setLimits({})
-      }, [tab, workspaceFilter, query, includeSubagents, showBlank])
+        detailAbort.current?.abort()
+        if (selectedId === null) {
+          setDetail(null)
+          setDetailPhase('idle')
+          setDetailError(null)
+          return undefined
+        }
+        const cached = rowCacheRef.current.get(selectedId)
+        if (cached !== undefined) {
+          setDetail(cached)
+          setDetailPhase('ready')
+        } else {
+          setDetail(null)
+          setDetailPhase('loading')
+        }
+        const controller = new AbortController()
+        detailAbort.current = controller
+        if (transportRef.current === 'legacy') {
+          const stateNow = legacyStateRef.current
+          const row = (stateNow?.sessions ?? []).find((item) => item.id === selectedId)
+          if (row !== undefined) {
+            setDetail(row)
+            setDetailPhase('ready')
+          } else if (cached === undefined) {
+            setDetailPhase('missing')
+          }
+          return () => controller.abort()
+        }
+        getSession(selectedId, controller.signal)
+          .then((value) => {
+            if (controller.signal.aborted) return
+            if (value?.row !== undefined && value?.row !== null) {
+              setDetail(value.row)
+              setDetailPhase('ready')
+              setDetailError(null)
+              setRowCache((previous) => mergeRowCache(previous, [value.row]))
+            } else if (cached === undefined) {
+              setDetailPhase('missing')
+            }
+          })
+          .catch((failure) => {
+            if (failure?.name === 'AbortError') return
+            // The Host answers an unknown id with `not-found`; that is the only
+            // case that may clear the detail view. A missing *route* (old Host)
+            // keeps the cached row visible instead.
+            if (failure?.code === 'not-found') {
+              setDetail(null)
+              setDetailPhase('missing')
+              return
+            }
+            if (isMissingRoute(failure)) {
+              if (cached === undefined) setDetailPhase('missing')
+              return
+            }
+            if (cached === undefined) {
+              setDetailError(failure)
+              setDetailPhase('error')
+            }
+          })
+        return () => controller.abort()
+      }, [selectedId, detailNonce])
 
-      const rows = state?.sessions ?? []
-      const defaultExpanded = (state?.totals?.all ?? 0) <= DEFAULT_COLLAPSE_AFTER
+      const totals = overview?.totals ?? {}
+      const limits = overview?.limits ?? {}
+      const defaultExpanded = (totals.all ?? 0) <= DEFAULT_COLLAPSE_AFTER
       const view = React.useMemo(
-        () => computeView({ state, tab, workspaceFilter, query, sort, expanded, defaultExpanded, limits, showBlank }),
-        [state, tab, workspaceFilter, query, sort, expanded, defaultExpanded, limits, showBlank],
-      )
-      const viewKey = React.useMemo(
-        () => [
-          state?.generatedAt ?? 0,
+        () => composeGroups({
+          overview,
+          pages,
+          sizes,
+          expanded,
+          defaultExpanded,
+          query,
           tab,
           workspaceFilter,
-          query,
-          includeSubagents ? 1 : 0,
-          showBlank ? 1 : 0,
-          defaultExpanded ? 1 : 0,
-          expanded === null ? 'auto' : [...expanded].sort().join(','),
-        ].join('|'),
-        [state?.generatedAt, tab, workspaceFilter, query, includeSubagents, showBlank, defaultExpanded, expanded],
+          showBlank,
+          searchMode: transport === 'paged' && isSearch,
+          requirePage: transport === 'legacy',
+          legacy: transport === 'legacy',
+          legacyLimits,
+        }),
+        [overview, pages, sizes, expanded, defaultExpanded, query, tab, workspaceFilter, showBlank, transport, isSearch, legacyLimits],
+      )
+      const expandedIdsKey = view.groups.filter((group) => group.expanded === true).map((group) => group.id).join('|')
+      React.useEffect(() => {
+        if (transport !== 'paged' || isSearch) return
+        for (const group of view.groups) if (group.expanded === true) ensureGroupPage(group.id)
+      }, [transport, scope, reload, expandedIdsKey])
+
+      const visibleKey = React.useMemo(
+        () => view.groups.filter((group) => group.expanded === true).map((group) => group.rows.map((row) => row.id).join(',')).join('|'),
+        [view],
       )
       React.useEffect(() => {
         setSelected((previous) => {
           if (previous.size === 0) return previous
+          const visible = new Set()
+          for (const group of view.groups) {
+            if (group.expanded !== true) continue
+            for (const row of group.rows) visible.add(row.id)
+          }
           const next = new Set()
-          for (const id of previous) if (view.visibleIdSet.has(id)) next.add(id)
+          for (const id of previous) if (visible.has(id)) next.add(id)
           return next.size === previous.size ? previous : next
         })
-      }, [viewKey])
+      }, [visibleKey])
+
+      const rows = overview === null ? [] : view.groups
+      const blankIds = blanks ?? { unarchivedIds: [], archivedIds: [], deletableIds: [] }
+      const tabCounts = {
+        all: Math.max(0, (totals.all ?? 0) - (showBlank ? 0 : (totals.blank ?? 0))),
+        active: Math.max(0, (totals.active ?? 0) - (showBlank ? 0 : (blankIds.unarchivedIds.length ?? 0))),
+        archived: Math.max(0, (totals.archived ?? 0) - (showBlank ? 0 : (blankIds.archivedIds.length ?? 0))),
+      }
+      const tabs = [
+        { key: 'all', label: t('tabAll'), count: tabCounts.all },
+        { key: 'active', label: t('tabActive'), count: tabCounts.active },
+        { key: 'archived', label: t('tabArchived'), count: tabCounts.archived },
+      ]
+      const maxBatch = limits.maxBatch ?? 50
+      const maxMoveBatch = limits.maxMoveBatch ?? 20
+      const selectedRows = [...selected].map((id) => rowCache.get(id)).filter((row) => row !== undefined)
+      const visibleAllSelected = view.visibleRows.length > 0 && view.visibleRows.every((row) => selected.has(row.id))
+      const overBatch = selectedRows.length > maxBatch
+      const overMove = selectedRows.length > maxMoveBatch
+      const selectedArchived = selectedRows.length > 0 && !overBatch && selectedRows.every((row) => row.archived)
+      const selectedActive = selectedRows.length > 0 && !overBatch && selectedRows.every((row) => !row.archived)
+      const selectedMovable =
+        selectedRows.length > 0 && !overMove &&
+        selectedRows.every((row) => row.can?.move === true) &&
+        new Set(selectedRows.map((row) => row.workspaceId)).size === 1
+      const selectedDeletable = selectedRows.length > 0 && !overBatch && selectedRows.every((row) => row.can?.delete === true)
+      const targetWorkspaces = (overview?.workspaces ?? []).filter((workspace) => {
+        if (workspace.status !== 'ok') return false
+        return !selectedRows.some((row) => row.workspaceId === workspace.id)
+      })
+      const totalBytes = sizes?.totalBytes
+      const sizeText = Number.isFinite(totalBytes) ? formatBytes(totalBytes) : '—'
 
       const run = async (operation, successText) => {
         setBusy(true)
@@ -1515,7 +2412,7 @@ window.__ModuleLoader__.load({
         try {
           const value = await operation()
           setNotice({ tone: 'ok', text: successText(value) })
-          await load({ silent: true })
+          await refresh()
           return value
         } catch (failure) {
           setNotice({ tone: 'error', text: errorText(t, failure), detail: failure?.message })
@@ -1526,9 +2423,9 @@ window.__ModuleLoader__.load({
       }
 
       const resultText = (value) => {
-        const totals = value?.totals
-        if (totals === undefined) return t('working')
-        return t('batchDone', { ok: totals.succeeded, failed: totals.failed })
+        const valueTotals = value?.totals
+        if (valueTotals === undefined) return t('working')
+        return t('batchDone', { ok: valueTotals.succeeded, failed: valueTotals.failed })
       }
 
       const archiveRows = async (ids, stopActivity = false) => {
@@ -1552,40 +2449,96 @@ window.__ModuleLoader__.load({
       }
 
       const moveRows = async (ids, workspaceId) => {
-        const value = await run(
+        return await run(
           () => post('move', { sessionIds: ids, workspaceId }),
           (result) => resultText(result),
         )
-        return value
       }
 
+      /**
+       * Permanently delete sessions in backend-sized batches. One confirmation
+       * may cover more ids than a single request admits (the empty-session
+       * shortcut can), so the request is split and the totals are summed into
+       * one notice.
+       */
       const deleteRows = async (ids) => {
-        const value = await run(
-          () => post('delete', { sessionIds: ids, confirm: true }),
-          (result) => resultText(result),
-        )
-        if (value !== undefined) {
+        if (ids.length === 0) return undefined
+        setBusy(true)
+        setNotice(null)
+        try {
+          let succeeded = 0
+          let failed = 0
+          const failures = []
+          for (let index = 0; index < ids.length; index += maxBatch) {
+            const value = await post('delete', { sessionIds: ids.slice(index, index + maxBatch), confirm: true })
+            succeeded += value?.totals?.succeeded ?? 0
+            failed += value?.totals?.failed ?? 0
+            for (const item of value?.results ?? []) if (item.ok === false) failures.push(item)
+          }
+          setNotice(
+            failed === 0
+              ? { tone: 'ok', text: t('batchDone', { ok: succeeded, failed: 0 }) }
+              : { tone: 'error', text: t('batchDone', { ok: succeeded, failed }), details: failures.slice(0, 20) },
+          )
           setBulkDeleteIds(null)
           setSelected(new Set())
           if (selectedId !== null && ids.includes(selectedId)) setSelectedId(null)
+          await refresh()
+          return { totals: { succeeded, failed } }
+        } catch (failure) {
+          setNotice({ tone: 'error', text: errorText(t, failure), detail: failure?.message })
+          return undefined
+        } finally {
+          setBusy(false)
         }
-        return value
       }
 
       const cleanupOrphans = async () => {
-        const ids = state?.orphans ?? []
+        const ids = overview?.orphans ?? []
         if (ids.length === 0) return
-        const max = state?.limits?.maxBatch ?? 50
         setBusy(true)
         setNotice(null)
         try {
           let cleaned = 0
-          for (let index = 0; index < ids.length; index += max) {
-            await post('unarchive', { sessionIds: ids.slice(index, index + max) })
-            cleaned += Math.min(max, ids.length - index)
+          for (let index = 0; index < ids.length; index += maxBatch) {
+            await post('unarchive', { sessionIds: ids.slice(index, index + maxBatch) })
+            cleaned += Math.min(maxBatch, ids.length - index)
           }
           setNotice({ tone: 'ok', text: t('cleanedOrphans', { n: cleaned }) })
-          await load({ silent: true })
+          await refresh()
+        } catch (failure) {
+          setNotice({ tone: 'error', text: errorText(t, failure) })
+        } finally {
+          setBusy(false)
+        }
+      }
+
+      /**
+       * Archive every unarchived empty session, in backend-sized batches. The
+       * user can then clean them up with one confirm dialog.
+       */
+      const archiveBlankSessions = async (ids) => {
+        if (ids.length === 0) return
+        setBusy(true)
+        setNotice(null)
+        try {
+          let archived = 0
+          const failures = []
+          for (let index = 0; index < ids.length; index += maxBatch) {
+            const value = await post('archive', { sessionIds: ids.slice(index, index + maxBatch) })
+            archived += value?.totals?.succeeded ?? 0
+            for (const item of value?.results ?? []) if (item.ok === false) failures.push(item)
+          }
+          if (failures.length === 0) {
+            setNotice({ tone: 'ok', text: t('archiveDone', { n: archived }) })
+          } else {
+            setNotice({
+              tone: 'error',
+              text: t('batchDone', { ok: archived, failed: failures.length }),
+              details: failures.slice(0, 20),
+            })
+          }
+          await refresh()
         } catch (failure) {
           setNotice({ tone: 'error', text: errorText(t, failure) })
         } finally {
@@ -1614,43 +2567,21 @@ window.__ModuleLoader__.load({
         if (value !== undefined) openSession(id)
       }
 
-      if (state === null) {
-        if (phase === 'error') {
-          return h(
-            'div',
-            { className: 'dsm-page' },
-            h('h2', { className: 'dsm-title' }, t('pageTitle')),
-            h('p', { className: 'dsm-error' }, t('loadFailed', { message: errorText(t, error) })),
-            h('button', { type: 'button', className: 'dsm-btn', onClick: () => void load() }, t('retry')),
-          )
-        }
-        return h('div', { className: 'dsm-page' }, h('p', { className: 'dsm-hint' }, h(Spinner, { t, label: t('loading') })))
+      const openDetail = (id) => {
+        const page = document.querySelector('.dsm-page')
+        const parent = scrollParentOf(page)
+        listScroll.current = parent?.scrollTop ?? 0
+        setSelectedId(id)
       }
 
-      const rowsForTabs = rows.filter((row) => showBlank || row.blank !== true)
-      const blankRows = rows.filter((row) => row.blank === true)
-      const blankArchivedRows = blankRows.filter((row) => row.archived === true && row.can?.delete === true)
-      const blankActiveCount = blankRows.filter((row) => row.archived !== true || row.can?.delete !== true).length
-      const tabs = [
-        { key: 'all', label: t('tabAll'), count: rowsForTabs.length },
-        { key: 'active', label: t('tabActive'), count: rowsForTabs.filter((row) => !row.archived).length },
-        { key: 'archived', label: t('tabArchived'), count: rowsForTabs.filter((row) => row.archived).length },
-      ]
-      const visibleAllSelected = view.visibleRows.length > 0 && view.visibleRows.every((row) => selected.has(row.id))
-      const selectedRows = view.visibleRows.filter((row) => selected.has(row.id))
-      const overBatch = selectedRows.length > (state.limits?.maxBatch ?? 50)
-      const overMove = selectedRows.length > (state.limits?.maxMoveBatch ?? 20)
-      const selectedArchived = selectedRows.length > 0 && !overBatch && selectedRows.every((row) => row.archived)
-      const selectedActive = selectedRows.length > 0 && !overBatch && selectedRows.every((row) => !row.archived)
-      const selectedMovable =
-        selectedRows.length > 0 && !overMove &&
-        selectedRows.every((row) => row.can?.move === true) &&
-        new Set(selectedRows.map((row) => row.workspaceId)).size === 1
-      const selectedDeletable = selectedRows.length > 0 && !overBatch && selectedRows.every((row) => row.can?.delete === true)
-      const targetWorkspaces = (state?.workspaces ?? []).filter((workspace) => {
-        if (workspace.status !== 'ok') return false
-        return !selectedRows.some((row) => row.workspaceId === workspace.id)
-      })
+      const backToList = () => {
+        setSelectedId(null)
+        requestAnimationFrame(() => {
+          const page = document.querySelector('.dsm-page')
+          const parent = scrollParentOf(page)
+          if (parent !== null && typeof parent.scrollTop === 'number') parent.scrollTop = listScroll.current
+        })
+      }
 
       const toggle = (id) => {
         setSelected((previous) => {
@@ -1689,16 +2620,44 @@ window.__ModuleLoader__.load({
       const expandAll = () => setExpanded(new Set(view.groups.map((group) => group.id)))
       const collapseAll = () => setExpanded(new Set())
       const loadMore = (id) => {
-        setLimits((previous) => ({ ...previous, [id]: (previous[id] ?? GROUP_PAGE_SIZE) + GROUP_PAGE_SIZE }))
+        if (transportRef.current === 'legacy') {
+          setLegacyLimits((previous) => ({ ...previous, [id]: (previous[id] ?? GROUP_PAGE_SIZE) + GROUP_PAGE_SIZE }))
+          return
+        }
+        loadMoreGroup(id)
+      }
+
+      if (overview === null) {
+        if (overviewPhase === 'error') {
+          return h(
+            'div',
+            { className: 'dsm-page' },
+            h('h2', { className: 'dsm-title' }, t('pageTitle')),
+            h('p', { className: 'dsm-error' }, t('overviewLoadFailed', { message: errorText(t, overviewError) })),
+            h('button', { type: 'button', className: 'dsm-btn', onClick: () => void loadOverview() }, t('retry')),
+          )
+        }
+        return h('div', { className: 'dsm-page' }, h('p', { className: 'dsm-hint' }, h(Spinner, { t, label: t('loading') })))
       }
-      const isSearch = query.trim() !== ''
 
       if (selectedId !== null) {
-        const row = state.sessions.find((item) => item.id === selectedId)
+        const row = detail ?? rowCache.get(selectedId)
         if (row === undefined) {
-          return h('div', { className: 'dsm-page' },
-            h('button', { type: 'button', className: 'dsm-btn ghost', onClick: backToList }, `← ${t('back')}`),
-            h('div', { className: 'dsm-empty' }, t('notFound')),
+          const failed = detailPhase === 'error'
+          const missing = detailPhase === 'missing'
+          return h(
+            'div',
+            { className: 'dsm-page' },
+            h('div', { className: 'dsm-actions', style: { marginBottom: 4 } },
+              h('button', { type: 'button', className: 'dsm-btn ghost', onClick: backToList }, `← ${t('back')}`),
+            ),
+            failed || missing
+              ? h('p', { className: failed ? 'dsm-error' : 'dsm-empty' },
+                  failed ? t('loadFailed', { message: errorText(t, detailError) }) : t('notFound'))
+              : h('p', { className: 'dsm-hint' }, h(Spinner, { t, label: t('loading') })),
+            failed
+              ? h('button', { type: 'button', className: 'dsm-btn', onClick: () => setDetailNonce((value) => value + 1) }, t('retry'))
+              : null,
           )
         }
         return h(
@@ -1708,13 +2667,14 @@ window.__ModuleLoader__.load({
           h(DetailView, {
             ctx,
             t,
-            state,
+            overview,
+            limits,
             row,
             busy,
             onBack: backToList,
             onChanged: (text) => {
               setNotice({ tone: 'ok', text: text ?? t('copied') })
-              void load({ silent: true })
+              void refresh()
             },
             onOpen: openSession,
             onArchive: (id) => void archiveRows([id]),
@@ -1731,46 +2691,67 @@ window.__ModuleLoader__.load({
         h(
           'div',
           { className: 'dsm-head' },
-          h('div', null,
+          h(
+            'div',
+            { className: 'dsm-head-row' },
             h('h2', { className: 'dsm-title' }, t('pageTitle')),
-            h('p', { className: 'dsm-sub' }, t('pageSubtitle')),
-            h('p', { className: 'dsm-sub' },
-              t('totalLine', {
-                all: state.totals.all,
-                archived: state.totals.archived,
-                size: formatBytes(state.totals.bytes),
-              }),
-              blankRows.length > 0 && !showBlank
-                ? ` · ${t('hiddenBlankCount', { n: blankRows.length })}`
-                : '',
-              (state.totals?.hiddenSubagents ?? 0) > 0 && !includeSubagents
-                ? ` · ${t('hiddenSubagentCount', { n: state.totals.hiddenSubagents })}`
-                : '',
+            h('div', { className: 'dsm-head-actions' },
+              blankIds.unarchivedIds.length > 0
+                ? h('button', {
+                    type: 'button',
+                    className: 'dsm-btn',
+                    disabled: busy,
+                    title: t('archiveBlankHint'),
+                    onClick: () => void archiveBlankSessions(blankIds.unarchivedIds),
+                  }, t('archiveBlank', { n: blankIds.unarchivedIds.length }))
+                : null,
+              blankIds.archivedIds.length > 0
+                ? h('button', {
+                    type: 'button',
+                    className: 'dsm-btn',
+                    disabled: busy || blankIds.deletableIds.length === 0,
+                    title: blankIds.deletableIds.length === blankIds.archivedIds.length
+                      ? t('cleanupBlankHint')
+                      : t('cleanupBlankLockedHint', { n: blankIds.archivedIds.length - blankIds.deletableIds.length }),
+                    onClick: () => setBulkDeleteIds(blankIds.deletableIds),
+                  }, t('cleanupBlank', { n: blankIds.archivedIds.length }))
+                : null,
+              h('button', { type: 'button', className: 'dsm-btn', disabled: busy, onClick: () => void refresh() },
+                busy ? h(Spinner, { t, label: t('working') }) : t('refresh')),
             ),
-            blankActiveCount > 0 && showBlank
-              ? h('p', { className: 'dsm-hint' }, t('blankActiveHint', { n: blankActiveCount }))
-              : null,
           ),
-          h('div', { className: 'dsm-head-actions' },
-            blankArchivedRows.length > 0
-              ? h('button', {
-                  type: 'button',
-                  className: 'dsm-btn',
-                  disabled: busy,
-                  title: `${t('cleanupBlankHint')}${blankActiveCount > 0 ? ` ${t('blankActiveHint', { n: blankActiveCount })}` : ''}`,
-                  onClick: () => setBulkDeleteIds(blankArchivedRows.map((row) => row.id)),
-                }, t('cleanupBlank', { n: blankArchivedRows.length }))
-              : null,
-            h('button', { type: 'button', className: 'dsm-btn', disabled: busy, onClick: () => void load({ silent: true }) },
-              busy ? h(Spinner, { t, label: t('working') }) : t('refresh')),
+          h('p', { className: 'dsm-sub' }, t('pageSubtitle')),
+          h('p', { className: 'dsm-sub' },
+            t('totalLine', {
+              all: totals.all ?? 0,
+              archived: totals.archived ?? 0,
+              size: sizeText,
+            }),
+            (totals.blank ?? 0) > 0 && !showBlank
+              ? ` · ${t('hiddenBlankCount', { n: totals.blank })}`
+              : '',
+            (totals.hiddenSubagents ?? 0) > 0 && !includeSubagents
+              ? ` · ${t('hiddenSubagentCount', { n: totals.hiddenSubagents })}`
+              : '',
+            sizesPhase === 'loading' ? ` · ${t('sizesPending')}` : '',
           ),
         ),
         h(Notice, { notice, t, onDismiss: () => setNotice(null) }),
-        state.orphans.length > 0
+        overviewPhase === 'error'
+          ? h(
+              'div',
+              { className: 'dsm-note warn' },
+              h('div', { style: { flex: '1 1 auto' } }, t('overviewLoadFailed', { message: errorText(t, overviewError) })),
+              h('div', { className: 'dsm-note-actions' },
+                h('button', { type: 'button', className: 'dsm-btn', disabled: busy, onClick: () => void refresh() }, t('retry')),
+              ),
+            )
+          : null,
+        (overview?.orphans?.length ?? 0) > 0
           ? h(
               'div',
               { className: 'dsm-note warn' },
-              h('div', { style: { flex: '1 1 auto' } }, t('orphanBanner', { n: state.orphans.length })),
+              h('div', { style: { flex: '1 1 auto' } }, t('orphanBanner', { n: overview.orphans.length })),
               h('div', { className: 'dsm-note-actions' },
                 h('button', { type: 'button', className: 'dsm-btn', disabled: busy, onClick: () => void cleanupOrphans() },
                   busy ? t('cleaningOrphans') : t('cleanupOrphans')),
@@ -1778,139 +2759,142 @@ window.__ModuleLoader__.load({
             )
           : null,
         h('div', { className: 'dsm-sticky' },
-        h(
-          'div',
-          { className: 'dsm-toolbar' },
-          h('div', { className: 'dsm-tabs', role: 'group' },
-            tabs.map((item) =>
-              h('button', {
-                key: item.key,
-                type: 'button',
-                className: 'dsm-tab',
-                'aria-pressed': tab === item.key ? 'true' : 'false',
-                onClick: () => setTab(item.key),
-              }, `${item.label} ${item.count}`),
+          h(
+            'div',
+            { className: 'dsm-toolbar' },
+            h('div', { className: 'dsm-tabs', role: 'group' },
+              tabs.map((item) =>
+                h('button', {
+                  key: item.key,
+                  type: 'button',
+                  className: 'dsm-tab',
+                  'aria-pressed': tab === item.key ? 'true' : 'false',
+                  onClick: () => setTab(item.key),
+                }, `${item.label} ${item.count}`),
+              ),
             ),
-          ),
-          h('select', {
-            className: 'dsm-select',
-            value: workspaceFilter,
-            onChange: (event) => setWorkspaceFilter(event.target.value),
-            'aria-label': t('workspaceAll'),
-          },
-            h('option', { value: 'all' }, t('workspaceAll')),
-            ...(state.workspaces ?? []).map((workspace) =>
-              h('option', { key: workspace.id, value: workspace.id },
-                `${workspace.title || workspace.path}${workspace.status === 'ok' ? '' : ` · ${t('workspaceMissing')}`}`),
+            h('select', {
+              className: 'dsm-select',
+              value: workspaceFilter,
+              onChange: (event) => setWorkspaceFilter(event.target.value),
+              'aria-label': t('workspaceAll'),
+            },
+              h('option', { value: 'all' }, t('workspaceAll')),
+              ...(overview?.workspaces ?? []).map((workspace) =>
+                h('option', { key: workspace.id, value: workspace.id },
+                  `${workspace.title || workspace.path}${workspace.status === 'ok' ? '' : ` · ${t('workspaceMissing')}`}`),
+              ),
+              h('option', { value: 'ungrouped' }, t('workspaceUngrouped')),
             ),
-            h('option', { value: 'ungrouped' }, t('workspaceUngrouped')),
-          ),
-          h('input', {
-            ref: searchRef,
-            className: 'dsm-input',
-            type: 'search',
-            value: query,
-            placeholder: t('searchPlaceholder'),
-            'aria-label': t('searchPlaceholder'),
-            onChange: (event) => setQuery(event.target.value),
-          }),
-          h('select', {
-            className: 'dsm-select',
-            value: sort,
-            onChange: (event) => setSort(event.target.value),
-            'aria-label': t('sortUpdated'),
-          },
-            h('option', { value: 'updated' }, t('sortUpdated')),
-            h('option', { value: 'created' }, t('sortCreated')),
-            h('option', { value: 'size' }, t('sortSize')),
-            h('option', { value: 'title' }, t('sortTitle')),
-          ),
-          h('label', { className: 'dsm-check', title: t('showSubagentsHint') },
-            h('input', {
-              type: 'checkbox',
-              checked: includeSubagents,
-              onChange: (event) => setIncludeSubagents(event.target.checked),
-            }),
-            t('showSubagents'),
-          ),
-          h('label', { className: 'dsm-check' },
             h('input', {
-              type: 'checkbox',
-              checked: showBlank,
-              onChange: (event) => setShowBlank(event.target.checked),
+              ref: searchRef,
+              className: 'dsm-input',
+              type: 'search',
+              value: queryInput,
+              placeholder: t('searchPlaceholder'),
+              'aria-label': t('searchPlaceholder'),
+              onChange: (event) => setQueryInput(event.target.value),
             }),
-            t('showBlank'),
+            h('select', {
+              className: 'dsm-select',
+              value: sort,
+              onChange: (event) => setSort(event.target.value),
+              'aria-label': t('sortUpdated'),
+            },
+              h('option', { value: 'updated' }, t('sortUpdated')),
+              h('option', { value: 'created' }, t('sortCreated')),
+              h('option', { value: 'size' }, t('sortSize')),
+              h('option', { value: 'title' }, t('sortTitle')),
+            ),
+            h('label', { className: 'dsm-check', title: t('showSubagentsHint') },
+              h('input', {
+                type: 'checkbox',
+                checked: includeSubagents,
+                onChange: (event) => setIncludeSubagents(event.target.checked),
+              }),
+              t('showSubagents'),
+            ),
+            h('label', { className: 'dsm-check' },
+              h('input', {
+                type: 'checkbox',
+                checked: showBlank,
+                onChange: (event) => setShowBlank(event.target.checked),
+              }),
+              t('showBlank'),
+            ),
           ),
-        ),
-        view.visibleRows.length > 0
-          ? h(
-              'div',
-              { className: 'dsm-batch' },
-              h('label', { className: 'dsm-check' },
-                h('input', { type: 'checkbox', checked: visibleAllSelected, onChange: toggleAll }),
-                t('selectAll'),
-              ),
-              selectedRows.length > 0
-                ? h(React.Fragment, null,
-                    h('span', { className: 'dsm-hint' }, t('selectedCount', { n: selectedRows.length })),
-                    h('span', { className: 'dsm-hint' }, t('selectionScopeHint')),
-                    overBatch ? h('span', { className: 'dsm-warn' }, t('tooMany', { max: state.limits?.maxBatch ?? 50 })) : null,
-                    overMove ? h('span', { className: 'dsm-warn' }, t('tooMany', { max: state.limits?.maxMoveBatch ?? 20 })) : null,
-                    h('button', {
-                      type: 'button',
-                      className: 'dsm-btn',
-                      disabled: busy || !selectedActive,
-                      title: selectedActive ? t('archiveHint') : t('noAction'),
-                      onClick: () => void archiveRows(selectedRows.map((row) => row.id)),
-                    }, t('archiveSelected')),
-                    h('button', {
-                      type: 'button',
-                      className: 'dsm-btn',
-                      disabled: busy || !selectedArchived,
-                      onClick: () => void restoreRows(selectedRows.map((row) => row.id)),
-                    }, t('restoreSelected')),
-                    h('select', {
-                      className: 'dsm-select',
-                      value: bulkTarget,
-                      disabled: busy || !selectedMovable,
-                      onChange: (event) => setBulkTarget(event.target.value),
-                      'aria-label': t('moveTo'),
-                    },
-                      h('option', { value: '' }, t('moveTo')),
-                      ...targetWorkspaces.map((workspace) =>
-                        h('option', { key: workspace.id, value: workspace.id }, workspace.title || workspace.path),
+          view.visibleRows.length > 0
+            ? h(
+                'div',
+                { className: 'dsm-batch' },
+                h('label', { className: 'dsm-check' },
+                  h('input', { type: 'checkbox', checked: visibleAllSelected, onChange: toggleAll }),
+                  t('selectAll'),
+                ),
+                selectedRows.length > 0
+                  ? h(React.Fragment, null,
+                      h('span', { className: 'dsm-hint' }, t('selectedCount', { n: selectedRows.length })),
+                      h('span', { className: 'dsm-hint' }, t('selectionScopeHint')),
+                      view.partialCount > 0
+                        ? h('span', { className: 'dsm-hint' }, t('partialSelection', { n: view.partialCount }))
+                        : null,
+                      overBatch ? h('span', { className: 'dsm-warn' }, t('tooMany', { max: maxBatch })) : null,
+                      overMove ? h('span', { className: 'dsm-warn' }, t('tooMany', { max: maxMoveBatch })) : null,
+                      h('button', {
+                        type: 'button',
+                        className: 'dsm-btn',
+                        disabled: busy || !selectedActive,
+                        title: selectedActive ? t('archiveHint') : t('noAction'),
+                        onClick: () => void archiveRows(selectedRows.map((row) => row.id)),
+                      }, t('archiveSelected')),
+                      h('button', {
+                        type: 'button',
+                        className: 'dsm-btn',
+                        disabled: busy || !selectedArchived,
+                        onClick: () => void restoreRows(selectedRows.map((row) => row.id)),
+                      }, t('restoreSelected')),
+                      h('select', {
+                        className: 'dsm-select',
+                        value: bulkTarget,
+                        disabled: busy || !selectedMovable,
+                        onChange: (event) => setBulkTarget(event.target.value),
+                        'aria-label': t('moveTo'),
+                      },
+                        h('option', { value: '' }, t('moveTo')),
+                        ...targetWorkspaces.map((workspace) =>
+                          h('option', { key: workspace.id, value: workspace.id }, workspace.title || workspace.path),
+                        ),
                       ),
-                    ),
-                    h('button', {
-                      type: 'button',
-                      className: 'dsm-btn',
-                      disabled: busy || !selectedMovable || bulkTarget === '',
-                      onClick: () => void moveRows(selectedRows.map((row) => row.id), bulkTarget),
-                    }, t('moveSelected')),
-                    h('button', {
-                      type: 'button',
-                      className: 'dsm-btn danger',
-                      disabled: busy || !selectedDeletable,
-                      onClick: () => setBulkDeleteIds(selectedRows.map((row) => row.id)),
-                    }, t('deleteSelected')),
-                    h('button', {
-                      type: 'button',
-                      className: 'dsm-btn ghost',
-                      disabled: busy,
-                      onClick: () => setSelected(new Set()),
-                    }, t('clearSelection')),
-                    !selectedMovable && selectedRows.length > 0
-                      ? h('span', { className: 'dsm-hint' },
-                          selectedRows.some((row) => row.live || row.running)
-                            ? t('liveHint')
-                            : selectedRows.some((row) => row.kind === 'fork')
-                              ? t('moveForkHint')
-                              : t('moveUnavailableHint'))
-                      : null,
-                  )
-                : null,
-            )
-          : null,
+                      h('button', {
+                        type: 'button',
+                        className: 'dsm-btn',
+                        disabled: busy || !selectedMovable || bulkTarget === '',
+                        onClick: () => void moveRows(selectedRows.map((row) => row.id), bulkTarget),
+                      }, t('moveSelected')),
+                      h('button', {
+                        type: 'button',
+                        className: 'dsm-btn danger',
+                        disabled: busy || !selectedDeletable,
+                        onClick: () => setBulkDeleteIds(selectedRows.map((row) => row.id)),
+                      }, t('deleteSelected')),
+                      h('button', {
+                        type: 'button',
+                        className: 'dsm-btn ghost',
+                        disabled: busy,
+                        onClick: () => setSelected(new Set()),
+                      }, t('clearSelection')),
+                      !selectedMovable && selectedRows.length > 0
+                        ? h('span', { className: 'dsm-hint' },
+                            selectedRows.some((row) => row.live || row.running)
+                              ? t('liveHint')
+                              : selectedRows.some((row) => row.kind === 'fork')
+                                ? t('moveForkHint')
+                                : t('moveUnavailableHint'))
+                        : null,
+                    )
+                  : null,
+              )
+            : null,
         ),
         h('div', { className: 'dsm-list-actions' },
           h('button', {
@@ -1927,18 +2911,29 @@ window.__ModuleLoader__.load({
           }, t('collapseAll')),
           isSearch ? h('span', { className: 'dsm-hint' }, t('searchAutoExpand')) : null,
         ),
+        isSearch && searchPhase === 'error'
+          ? h(
+              'div',
+              { className: 'dsm-note warn' },
+              h('div', { style: { flex: '1 1 auto' } }, t('groupLoadFailed', { message: errorText(t, searchError) })),
+              h('div', { className: 'dsm-note-actions' },
+                h('button', { type: 'button', className: 'dsm-btn', disabled: busy, onClick: () => setReload((value) => value + 1) }, t('groupRetry')),
+              ),
+            )
+          : null,
         bulkDeleteIds !== null
           ? h(DeleteScope, {
               ctx,
               t,
               ids: bulkDeleteIds,
+              maxBatch,
               busy,
               onCancel: () => setBulkDeleteIds(null),
               onConfirmed: (ids) => void deleteRows(ids),
             })
           : null,
-        view.groups.length > 0
-          ? view.groups.map((group) =>
+        rows.length > 0
+          ? rows.map((group) =>
               h(Group, {
                 key: group.id,
                 group,
@@ -1947,11 +2942,14 @@ window.__ModuleLoader__.load({
                 onSelect: toggle,
                 onOpen: openDetail,
                 onMore: () => loadMore(group.id),
+                onRetry: () => retryGroup(group.id),
                 locked: isSearch,
                 t,
               }),
             )
-          : h('div', { className: 'dsm-empty' }, rows.length === 0 ? t('emptyNoSessions') : t('emptyFiltered')),
+          : isSearch && searchPhase === 'loading'
+            ? h('div', { className: 'dsm-empty' }, h(Spinner, { t, label: t('groupLoading') }))
+            : h('div', { className: 'dsm-empty' }, (totals.all ?? 0) === 0 ? t('emptyNoSessions') : t('emptyFiltered')),
         h('p', { className: 'dsm-footer' }, t('archiveHint')),
       )
     }
@@ -1959,6 +2957,24 @@ window.__ModuleLoader__.load({
 
     return {
       inject: ['slots', 'locale'],
+      /** Pure helpers for `node --test`; not part of the Host/client contract. */
+      __test: {
+        computeView,
+        orderBranchRows,
+        pruneSelection,
+        scopeKey,
+        dataScopeKey,
+        queryOf,
+        mergePageRows,
+        mergeRowCache,
+        annotateBranchRows,
+        overviewFromState,
+        blanksFromState,
+        normalizeSizes,
+        composeGroups,
+        /** Components are exposed only so the vm test can smoke their render bodies. */
+        components: { SessionManagerPage, Row, Group, DetailView },
+      },
       apply(ctx) {
         const t = ctx.locale.bind(NS)
         ctx.effect(() => ctx.locale.register(NS, DICT), 'session-mng: dictionaries')