Indexing status: calm hourglass, details on hover

- Replace the top-right scan/replay overlays with one small `IndexingStatusIndicator` hourglass icon; the dynamic status message, progress bar, and ETA move into a rich tooltip on hover/focus
- Size column and status bar: unindexed dirs show `<dir>`/`DIR` + a quiet hourglass (tooltip: "Sizes are usually ready after 3 minutes") instead of `Scanning...`; column measurement reserves the icon width via the shared `getDirSizeDisplayState` decider
- Tooltip action gains generic `contentEl` support: live rich content via reparenting, singleton-safe, pinned by regression tests (incl. the hidden-host trap)
- Extract pure ETA helpers into `lib/indexing/eta.ts` with unit tests; drop the replay overlay's 4s grace delay (an icon is unobtrusive, honesty wins)
- Delete `ScanStatusOverlay`, `ReplayStatusOverlay`, `ProgressOverlay` + their a11y tests, gallery demo, and coverage-allowlist entries
- Also: oxfmt reflow of two pre-existing `docs/specs/later/` drafts

Author: vdavid

apps/desktop/coverage-allowlist.json

@@ -189,9 +189,6 @@
     "tauri-commands/rename.ts": {
       "reason": "Tauri command wrappers, tested via integration"
     },
-    "indexing/ScanStatusOverlay.svelte": {
-      "reason": "UI overlay component, depends on Tauri event listeners"
-    },
     "indexing/index-events.ts": {
       "reason": "Thin wrapper over Tauri listen API"
     },
@@ -252,12 +249,6 @@
     "tauri-commands/search.ts": {
       "reason": "Tauri command wrappers, tested via integration"
     },
-    "indexing/ReplayStatusOverlay.svelte": {
-      "reason": "UI overlay component, depends on Tauri event listeners"
-    },
-    "ui/ProgressOverlay.svelte": {
-      "reason": "Pure UI component, no logic to test beyond rendering"
-    },
     "crash-reporter/CrashReportDialog.svelte": {
       "reason": "UI dialog, depends on Tauri commands for send/dismiss"
     },

apps/desktop/src/lib/file-explorer/selection/CLAUDE.md

@@ -73,10 +73,11 @@ Stale indicator (Lucide hourglass icon via `~icons/lucide/hourglass`, rendered i
   `getDirSizeDisplayState(displaySize, indexing, recursiveSizePending)` — the same decider FullList uses, so Brief's
   status bar matches Full's size column. Here `indexing = isScanning() || isAggregating()` (the aggregation phase
   matters too), and `recursiveSizePending` lights the hourglass during a live delete/copy even with no full scan. An
-  unindexed dir shows `Scanning...` while indexing, else `DIR`. The per-folder `recursiveSizePending` flag lives only on
-  `DirStats` (not `get_file_range`), so `FilePane.fetchEntryUnderCursor` overlays it onto the cursor entry via
-  `updateIndexSizesInPlace([entry])` (skipping `..`, whose entry path is the parent folder), and re-runs on
-  `index-dir-updated` so the hourglass tracks a storm live.
+  unindexed dir always shows `DIR`; while indexing it adds a "Size not ready yet" hourglass (tooltip: "Sizes are usually
+  ready after 3 minutes"), the same de-emphasized treatment Full's size column gives its `scanning` state. The
+  per-folder `recursiveSizePending` flag lives only on `DirStats` (not `get_file_range`), so
+  `FilePane.fetchEntryUnderCursor` overlays it onto the cursor entry via `updateIndexSizesInPlace([entry])` (skipping
+  `..`, whose entry path is the parent folder), and re-runs on `index-dir-updated` so the hourglass tracks a storm live.
 
 Symlink hint (Lucide info icon via `~icons/lucide/info`, rendered in tertiary text color) appears next to a directory's
 size in `file-info` mode when `entry.recursiveHasSymlinks === true`. The tooltip reads: "This folder contains symlinks.

apps/desktop/src/lib/file-explorer/selection/SelectionInfo.dir-size-state.test.ts

@@ -105,11 +105,12 @@ describe('SelectionInfo Brief file-info dir size state', () => {
     expect(t.querySelector('.stale-indicator')).toBeNull()
   })
 
-  it('shows "Scanning" for an unindexed dir while indexing', async () => {
+  it('shows the dir placeholder with the not-ready hourglass for an unindexed dir while indexing', async () => {
     idx.scanning = true
     const t = mountFileInfo(makeDir({ recursiveSize: undefined, recursivePhysicalSize: undefined }))
     await tick()
-    expect(t.textContent).toMatch(/Scanning/i)
+    expect(t.textContent).toMatch(/DIR/)
+    expect(t.querySelector('.stale-indicator')).not.toBeNull()
   })
 
   it('shows the dir placeholder for an unindexed dir when idle', async () => {

apps/desktop/src/lib/file-explorer/selection/SelectionInfo.svelte

@@ -237,7 +237,17 @@
         <span class="name" use:tooltip={displayName} use:useShortenMiddle={{ text: displayName, preferBreakAt: '.', startRatio: 0.7 }}></span>
         <span class="size" use:tooltip={sizeTooltip}>
             {#if sizeDisplay === 'DIR'}
-                {#if dirSizeState === 'scanning'}Scanning...{:else}DIR{/if}
+                DIR
+                {#if dirSizeState === 'scanning'}
+                    <span
+                        class="stale-indicator stale-icon"
+                        role="img"
+                        aria-label="Size not ready yet"
+                        use:tooltip={'Sizes are usually ready after 3 minutes'}
+                    >
+                        <IconHourglass width="12" height="12" />
+                    </span>
+                {/if}
             {:else if sizeDisplay}
                 {#each sizeDisplay as triad, i (i)}
                     <span class={triad.tierClass}>{triad.value}</span>

apps/desktop/src/lib/file-explorer/views/CLAUDE.md

@@ -36,13 +36,17 @@ without DOM performance issues.
   delegates to triads in bytes mode, a dynamic friendliest-unit string in dynamic mode, and a forced single-unit string
   in `kB`/`MB`/`GB` mode. `measure-column-widths.ts` accepts the same options so the size column shrink-wraps the
   actually-rendered cell text. Uses Lucide icons (via `unplugin-icons`): `~icons/lucide/circle-alert` for size mismatch
-  warnings and `~icons/lucide/hourglass` for stale index indicators. The hourglass shows when the global `indexing` flag
+  warnings and `~icons/lucide/hourglass` for the index indicators. The hourglass shows when the global `indexing` flag
   is set (full scan/aggregation, every size in flux) OR the row's own `recursiveSizePending` is set (live delete/copy in
-  flight for that dir, even with no scan running). The per-dir flag rides `DirStats.recursiveSizePending`, copied onto
-  entries by `updateIndexSizesInPlace` / `createParentEntry` (backend: `indexing/pending_sizes.rs`). Also renders an
-  optional Git status column between Name and Ext when `gitRepoRoot` is set and `showGitColumn` is true (gated by the
-  `fileExplorer.git.showStatusColumn` setting in `FilePane`); fetches `fetchStatusMap` and refreshes on
-  `git-state-changed` for the active repo
+  flight for that dir, even with no scan running). Two flavors share the glyph: the `size-stale` state pairs it with a
+  visible recursive size (tooltip "Updating index: size may change."), while the `scanning` state (no size yet) renders
+  the `<dir>` placeholder plus the hourglass with tooltip "Sizes are usually ready after 3 minutes" so a fresh install
+  reads as quietly working rather than `Scanning...` on every row. `measure-column-widths.ts` reserves `SIZE_ICON_WIDTH`
+  for both states so the shrink-wrapped column never clips the glyph. The per-dir flag rides
+  `DirStats.recursiveSizePending`, copied onto entries by `updateIndexSizesInPlace` / `createParentEntry` (backend:
+  `indexing/pending_sizes.rs`). Also renders an optional Git status column between Name and Ext when `gitRepoRoot` is
+  set and `showGitColumn` is true (gated by the `fileExplorer.git.showStatusColumn` setting in `FilePane`); fetches
+  `fetchStatusMap` and refreshes on `git-state-changed` for the active repo
 - **dir-size-display.test.ts** – Tests for `getDirSizeDisplayState` / `buildDirSizeTooltip` (functions in
   `full-list-utils.ts`)
 - **view-modes.test.ts** – Integration tests for hidden-file filtering and directory listing structure (uses

apps/desktop/src/lib/file-explorer/views/FullList.svelte

@@ -962,7 +962,14 @@
                                         </span>
                                     {/if}
                                 {:else if dirSizeState === 'scanning'}
-                                    <span class="size-scanning">Scanning...</span>
+                                    <span class="size-dir">&lt;dir&gt;</span>
+                                    <span
+                                        class="size-stale icon-indicator"
+                                        role="img"
+                                        aria-label="Size not ready yet"
+                                        use:tooltip={'Sizes are usually ready after 3 minutes'}
+                                        ><IconHourglass width="12" height="12" /></span
+                                    >
                                 {:else}
                                     <span class="size-dir">&lt;dir&gt;</span>
                                 {/if}
@@ -1314,12 +1321,6 @@
         cursor: help;
     }
 
-    .size-scanning {
-        color: var(--color-text-secondary);
-        font-size: var(--font-size-xs);
-        white-space: nowrap;
-    }
-
     .col-date {
         overflow: hidden;
         text-overflow: ellipsis;

apps/desktop/src/lib/file-explorer/views/dir-size-display.test.ts

@@ -92,8 +92,10 @@ describe('buildDirSizeTooltip', () => {
     expect(buildDirSizeTooltip(undefined, undefined, 0, 0, false, formatSize, formatNum, plural)).toBe('')
   })
 
-  it('returns "Scanning..." when no data and scanning is active', () => {
-    expect(buildDirSizeTooltip(undefined, undefined, 0, 0, true, formatSize, formatNum, plural)).toBe('Scanning...')
+  it('returns the size-readiness hint when no data and scanning is active', () => {
+    expect(buildDirSizeTooltip(undefined, undefined, 0, 0, true, formatSize, formatNum, plural)).toBe(
+      'Sizes are usually ready after 3 minutes',
+    )
   })
 
   it('returns HTML tooltip with size and counts when recursive size is available', () => {

apps/desktop/src/lib/file-explorer/views/full-list-utils.ts

@@ -324,7 +324,7 @@ export type DirSizeDisplayState = 'dir' | 'scanning' | 'size' | 'size-stale'
  * Rules (where "active" = global `indexing` OR this dir's own `pending` flag):
  * - Has recursiveSize + active     -> 'size-stale' (show size with hourglass)
  * - Has recursiveSize + not active -> 'size' (show formatted size)
- * - No recursiveSize + active      -> 'scanning' (show spinner)
+ * - No recursiveSize + active      -> 'scanning' (show <dir> placeholder with hourglass)
  * - No recursiveSize + not active  -> 'dir' (show <dir> placeholder)
  *
  * Global `indexing` means a full scan/aggregation is running (every size in
@@ -395,5 +395,5 @@ export function buildDirSizeTooltip(
 
     return { html: lines.join('<br>') }
   }
-  return scanning ? 'Scanning...' : ''
+  return scanning ? 'Sizes are usually ready after 3 minutes' : ''
 }

apps/desktop/src/lib/file-explorer/views/measure-column-widths.test.ts

@@ -206,6 +206,22 @@ describe('computeFullListColumnWidths', () => {
     expect(pending.size).toBeGreaterThanOrEqual(idle.size)
   })
 
+  it('reserves icon width for a scanning directory with no size yet', () => {
+    _setMeasureForTests(fakeMeasure)
+    const idle = computeFullListColumnWidths({
+      ...baseArgs,
+      entries: [entry({ name: 'd', isDirectory: true, recursiveSize: undefined })],
+    })
+    const scanning = computeFullListColumnWidths({
+      ...baseArgs,
+      indexing: true,
+      entries: [entry({ name: 'd', isDirectory: true, recursiveSize: undefined })],
+    })
+    // The `<dir>` placeholder text is the same in both, but the scanning row also
+    // draws the hourglass, so its column must reserve the extra icon width.
+    expect(scanning.size).toBeGreaterThan(idle.size)
+  })
+
   it('includes parentDirStats size when provided', () => {
     _setMeasureForTests(fakeMeasure)
     const without = computeFullListColumnWidths({

apps/desktop/src/lib/file-explorer/views/measure-column-widths.ts

@@ -174,7 +174,6 @@ function sizeCellText(bytes: number, opts: SizeFormatOpts): string {
 function sizeTextForEntry(
   entry: FileEntry,
   sizeDisplayMode: 'smart' | 'logical' | 'physical',
-  indexing: boolean,
   sizeFormatOpts: SizeFormatOpts,
   isRestricted: boolean,
 ): string {
@@ -191,9 +190,10 @@ function sizeTextForEntry(
   if (entry.isDirectory) {
     const s = getDisplaySize(entry.recursiveSize, entry.recursivePhysicalSize, sizeDisplayMode)
     if (s !== undefined) return sizeCellText(s, sizeFormatOpts)
-    // Mirror FullList's render decision (same `getDirSizeDisplayState`) so the
-    // measured text matches what's drawn for the no-size case.
-    return getDirSizeDisplayState(s, indexing, entry.recursiveSizePending) === 'scanning' ? 'Scanning...' : '<dir>'
+    // Mirror FullList's render decision (same `getDirSizeDisplayState`): both the
+    // scanning and dir states render the `<dir>` placeholder text (the scanning
+    // state adds an hourglass on top, reserved separately in `sizeIconSuffixForEntry`).
+    return '<dir>'
   }
   const s = getDisplaySize(entry.size, entry.physicalSize, sizeDisplayMode)
   return s !== undefined ? sizeCellText(s, sizeFormatOpts) : ''
@@ -227,10 +227,23 @@ function foldDate(current: DateMaxima, formatted: FormattedDate, measure: (text:
 }
 
 /** Pixel width of the size-column icons that follow the text for this row. */
-function sizeIconSuffixForEntry(entry: FileEntry, indexing: boolean, showSizeMismatchWarning: boolean): number {
+function sizeIconSuffixForEntry(
+  entry: FileEntry,
+  sizeDisplayMode: 'smart' | 'logical' | 'physical',
+  indexing: boolean,
+  showSizeMismatchWarning: boolean,
+): number {
   let suffix = 0
-  if (entry.isDirectory && (indexing || entry.recursiveSizePending) && entry.recursiveSize != null)
-    suffix += SIZE_ICON_WIDTH
+  if (entry.isDirectory) {
+    // FullList draws the hourglass for both the `size-stale` state (a settled
+    // size that may still change) and the `scanning` state (`<dir>` placeholder
+    // with no size yet). Both reserve the icon width here so the shrink-wrapped
+    // column doesn't clip the glyph. Mirror the same `getDirSizeDisplayState`
+    // decision the renderer uses.
+    const s = getDisplaySize(entry.recursiveSize, entry.recursivePhysicalSize, sizeDisplayMode)
+    const state = getDirSizeDisplayState(s, indexing, entry.recursiveSizePending)
+    if (state === 'size-stale' || state === 'scanning') suffix += SIZE_ICON_WIDTH
+  }
   if (showSizeMismatchWarning) {
     const logical = entry.isDirectory ? entry.recursiveSize : entry.size
     const physical = entry.isDirectory ? entry.recursivePhysicalSize : entry.physicalSize
@@ -377,11 +390,10 @@ function foldEntries(
     const sizeText = sizeTextForEntry(
       entry,
       ctx.sizeDisplayMode,
-      ctx.indexing,
       ctx.sizeFormatOpts,
       ctx.isRestricted?.(entry.path) ?? false,
     )
-    const iconSuffix = sizeIconSuffixForEntry(entry, ctx.indexing, ctx.showSizeMismatchWarning)
+    const iconSuffix = sizeIconSuffixForEntry(entry, ctx.sizeDisplayMode, ctx.indexing, ctx.showSizeMismatchWarning)
     const rowSize = (sizeText ? ctx.measure(sizeText) : 0) + iconSuffix
     if (rowSize > sizeMax) sizeMax = rowSize
     if (iconSuffix > sizeIconSuffixMax) sizeIconSuffixMax = iconSuffix