File viewer: ⌘A selects whole file, gold partial highlights

- New `selection.svelte.ts` with a `{ anchor, focus }` model in logical `(line, UTF-16 offset)` coordinates so a selection survives DOM recycling under virtual scroll. Half-open `[start, end)` semantics, pure helpers for normalise, in-range, segment bounds, and byte estimation.
- New shared `line-segments.ts` segmenter that merges search-match spans with selection bounds into non-overlapping render spans. Search wins on background colour; selection wins on foreground (gold), matching the file list's "selected = gold" language.
- ⌘A handler in `+page.svelte`'s `handleKeyDown`. Empty file: no-op. Search input focused: defers to native ⌘A on the input. ByteSeek-no-index ⌘A handled later in M2 via `RangeEnd::Eof`.
- Flipped `.file-content` `user-select` from `text` to `none` (custom model owns selection rendering). `.status-bar` opts back in with `user-select: text` so users can still copy the file name and line count.
- Status bar hint reads "W wrap · ⌘A select all · ⌘C copy · ⌘F search · Esc close" (sentence case, macOS-native ⌘).
- 51 Vitest tests cover compare, normalise, isLineInRange, segment bounds, makeSelectAll (incl. empty / only-newlines / single-line files), byte estimator (incl. UTF-8 scaling), and the segmenter (incl. search+selection overlap, UTF-16 surrogate pairs).
- Updated `routes/viewer/CLAUDE.md` with the selection-model section and two new gotchas (`user-select: none` rationale, UTF-16 offset convention).
- Pre-existing failures NOT caused by this commit: `knip` (unused `src/lib/debug/debug-window.ts`), `css-unused` and 3 `desktop-svelte-eslint` errors in `routes/debug/`.

Author: vdavid

.gitignore

@@ -66,4 +66,4 @@ apps/desktop/src-tauri/resources/ai
 .cargo-docker/
 
 # Entire.io
-.entire/
+.entire/docs/specs/file-viewer-selection-progress.md

apps/desktop/src/routes/viewer/+page.svelte

@@ -26,6 +26,7 @@
     import { createTextWidthTracker } from './viewer-text-width.svelte'
     import { createIndexingPoll } from './viewer-indexing-poll'
     import { handleNavigationKey, handleToggleKey } from './viewer-keyboard'
+    import { createViewerSelection, getLineSegmentBounds } from './selection.svelte'
     import Size from '$lib/ui/Size.svelte'
     import { initAppMode, decorateChildWindowTitle } from '$lib/app-mode'
     import { categorizeForViewerWarning } from '$lib/file-viewer/binary-warning'
@@ -127,6 +128,8 @@
         getContentRef: () => scroll.contentRef,
     })
 
+    const selection = createViewerSelection()
+
     // Fetch lines when visible range changes (debounced)
     $effect(() => {
         scroll.runFetchEffect()
@@ -211,42 +214,62 @@
         setSetting('viewer.wordWrap', scroll.wordWrap)
     }
 
+    function handleSelectAllShortcut(): void {
+        if (totalLines === null || totalLines <= 0) return
+        // ByteSeek-no-index ⌘A is handled in M2 via the `RangeEnd::Eof` IPC variant.
+        const lastLineText = scroll.lineCache.get(totalLines - 1) ?? ''
+        selection.selectAll(totalLines, lastLineText.length)
+    }
+
+    function handleEscapeKey(): void {
+        log.debug('ESC pressed, searchVisible={searchVisible}, windowReady={windowReady}', {
+            searchVisible: search.searchVisible,
+            windowReady,
+        })
+        if (!search.searchVisible) {
+            closeWindow()
+            return
+        }
+        if (search.searchStatus === 'running') {
+            search.stopSearch()
+        } else {
+            search.closeSearch()
+        }
+    }
+
     function handleKeyDown(e: KeyboardEvent) {
-        if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
+        const metaOrCtrl = e.metaKey || e.ctrlKey
+        const searchInputFocused = search.searchVisible && document.activeElement === search.searchInputRef
+
+        // ⌘A selects the whole file (independent of the DOM, so it works regardless of
+        // how many lines the virtual scroller has rendered). If the search input is
+        // focused, defer to its native ⌘A so it can select the query text.
+        if (metaOrCtrl && e.key === 'a' && !searchInputFocused) {
+            e.preventDefault()
+            handleSelectAllShortcut()
+            return
+        }
+
+        if (metaOrCtrl && e.key === 'f') {
             e.preventDefault()
             search.openSearch()
             return
         }
 
         if (e.key === 'Escape') {
             e.preventDefault()
-            log.debug('ESC pressed, searchVisible={searchVisible}, windowReady={windowReady}', {
-                searchVisible: search.searchVisible,
-                windowReady,
-            })
-            if (search.searchVisible) {
-                if (search.searchStatus === 'running') {
-                    search.stopSearch()
-                } else {
-                    search.closeSearch()
-                }
-            } else {
-                closeWindow()
-            }
+            handleEscapeKey()
             return
         }
 
         if (e.key === 'Enter' && search.searchVisible) {
             e.preventDefault()
-            if (e.shiftKey) {
-                search.findPrev()
-            } else {
-                search.findNext()
-            }
+            if (e.shiftKey) search.findPrev()
+            else search.findNext()
             return
         }
 
-        if (search.searchVisible && document.activeElement === search.searchInputRef) return
+        if (searchInputFocused) return
 
         if (handleToggleKey(e, toggleWordWrap) || handleNavigationKey(e.key, scroll)) {
             e.preventDefault()
@@ -600,9 +623,10 @@
                                 >{lineNumber + 1}</span
                             >
                             <span class="line-text"
-                                >{#each search.getHighlightedSegments(lineNumber, text) as seg, segIdx (segIdx)}{#if seg.highlight}<mark
-                                            class:active={seg.active}>{seg.text}</mark
-                                        >{:else}{seg.text}{/if}{/each}</span
+                                >{#each search.getHighlightedSegments(lineNumber, text, getLineSegmentBounds(selection.selection, lineNumber, text.length)) as seg, segIdx (segIdx)}{#if seg.highlight}<mark
+                                            class:active={seg.active}
+                                            class:selected={seg.selected}>{seg.text}</mark
+                                        >{:else if seg.selected}<span class="selected">{seg.text}</span>{:else}{seg.text}{/if}{/each}</span
                             >
                         </div>
                     {/each}
@@ -647,7 +671,7 @@
                 >wrap</span
             >
         {/if}
-        <span class="shortcut-hint">W wrap &middot; Ctrl+F search &middot; Esc close</span>
+        <span class="shortcut-hint">W wrap &middot; ⌘A select all &middot; ⌘C copy &middot; ⌘F search &middot; Esc close</span>
     </div>
 </main>
 
@@ -826,11 +850,29 @@
         font-family: var(--font-mono);
         font-size: var(--font-size-sm);
         line-height: 1.5;
-        user-select: text;
-        -webkit-user-select: text;
+        /* The viewer owns its own selection model (see selection.svelte.ts). We
+         * suppress the browser's native selection because it can't render a
+         * selection that survives DOM recycling under virtual scroll. The custom
+         * `.selected` class below paints the visible portion. */
+        user-select: none;
+        -webkit-user-select: none;
         cursor: text;
     }
 
+    /* Selected text: gold foreground matches the file-list "selected = gold" language
+     * (see design-system.md § File list). Background uses the accent-subtle token, the
+     * same tint the cursor highlight uses. Both work in light and dark. */
+    .line-text :global(.selected) {
+        background: var(--color-accent-subtle);
+        color: var(--color-selection-fg);
+    }
+
+    /* Search hit + selection on the same span: keep the highlight background (so search
+     * remains the dominant signal) and apply the selection foreground colour. */
+    .line-text :global(mark.selected) {
+        color: var(--color-selection-fg);
+    }
+
     .scroll-spacer {
         position: relative;
     }
@@ -911,6 +953,11 @@
         font-size: var(--font-size-sm);
         color: var(--color-text-secondary);
         flex-shrink: 0;
+        /* Opt back in to native selection here so users can copy the file name or line
+         * count. The global reset is `user-select: none`, and `.file-content` keeps
+         * that for its custom selection model; the status bar is plain chrome. */
+        user-select: text;
+        -webkit-user-select: text;
     }
 
     .backend-badge {

apps/desktop/src/routes/viewer/CLAUDE.md

@@ -4,15 +4,17 @@ The file viewer opens files in a separate Tauri window with virtual scrolling an
 
 ## Files
 
-| File                            | Contents                                                                            |
-| ------------------------------- | ----------------------------------------------------------------------------------- |
-| `+page.svelte`                  | Top-level component: lifecycle, window management, UI                               |
-| `viewer-scroll.svelte.ts`       | Virtual scroll composable: line cache, fetch debounce, scroll compression, effects  |
-| `viewer-search.svelte.ts`       | Search composable: start/poll/cancel/navigate, match highlighting, debounce         |
-| `viewer-line-heights.svelte.ts` | Height map for accurate word-wrap scrolling via pretext (FullLoad files only)       |
-| `viewer-text-width.svelte.ts`   | `ResizeObserver`-driven tracker for the rendered `.line-text` width                 |
-| `viewer-indexing-poll.ts`       | Periodic `viewer_get_status` poll while the backend builds a line index             |
-| `viewer-keyboard.ts`            | Pure helpers `handleNavigationKey` / `handleToggleKey` mapping keys to scroll calls |
+| File                            | Contents                                                                                    |
+| ------------------------------- | ------------------------------------------------------------------------------------------- |
+| `+page.svelte`                  | Top-level component: lifecycle, window management, UI                                       |
+| `viewer-scroll.svelte.ts`       | Virtual scroll composable: line cache, fetch debounce, scroll compression, effects          |
+| `viewer-search.svelte.ts`       | Search composable: start/poll/cancel/navigate, match highlighting, debounce                 |
+| `viewer-line-heights.svelte.ts` | Height map for accurate word-wrap scrolling via pretext (FullLoad files only)               |
+| `viewer-text-width.svelte.ts`   | `ResizeObserver`-driven tracker for the rendered `.line-text` width                         |
+| `viewer-indexing-poll.ts`       | Periodic `viewer_get_status` poll while the backend builds a line index                     |
+| `viewer-keyboard.ts`            | Pure helpers `handleNavigationKey` / `handleToggleKey` mapping keys to scroll calls         |
+| `selection.svelte.ts`           | Selection model: state + pure helpers (normalise, in-range, segment bounds, byte estimator) |
+| `line-segments.ts`              | Pure shared segmenter: merges search matches + selection bounds into render spans           |
 
 ## Architecture
 
@@ -41,10 +43,38 @@ scroll-to-match positioning.
 existing uniform-height code. The `scrollScale` (for MAX_SCROLL_HEIGHT compression) multiplies height map values at the
 scroll layer (the height map stores unscaled positions).
 
+## Selection model
+
+The viewer owns its own selection model (`selection.svelte.ts`) instead of relying on the browser's `Selection` API. The
+browser API can't survive virtualisation: as soon as the anchor or focus scrolls out of the visible buffer, its DOM node
+is recycled and the selection collapses. The custom model tracks two `LineOffset` endpoints (`{ line, offset }`) in
+logical coordinates, independent of which lines happen to be rendered.
+
+- **Range semantics**: half-open `[start, end)`. The start line is included from `start.offset` to its end, intermediate
+  lines are included in full, the end line is included from offset 0 up to but not including `end.offset`.
+- **Offset units**: UTF-16 code units (matches `String.length` and the search column units the search engine already
+  emits, so the whole frontend speaks one unit). The backend converts to UTF-8 bytes at the IPC boundary, clamping
+  offsets that land between the high and low surrogate of an astral codepoint.
+- **Render**: the page calls `getLineSegmentBounds(selection, lineNumber, lineLength)` and passes the bounds to
+  `search.getHighlightedSegments(...)`. The shared `segmentLine()` function (in `line-segments.ts`) merges search-match
+  spans with selection bounds and emits non-overlapping `LineSegment`s tagged `highlight` / `active` / `selected`. The
+  template renders each segment as a `<mark>` (search) or `<span class="selected">` or plain text.
+- **Visual collision**: when a search hit and the selection overlap on the same span, search wins on the background
+  (`var(--color-highlight)`) and selection wins on the foreground (`var(--color-selection-fg)`, gold). Matches the
+  "selected = gold" language from the file list (design-system.md § File list).
+
 ## Gotchas
 
 - `$state(false)` in `.svelte.ts` triggers `@typescript-eslint/no-unnecessary-condition` because the linter doesn't know
   the value is mutated via Svelte reactivity. Use an inline eslint-disable comment with a reason.
+- **`user-select: none` on `.file-content` is deliberate.** The viewer owns its own selection model (above); the
+  browser's native selection would render a competing-and-broken one on top of ours that loses its anchor as soon as the
+  line scrolls out. `.status-bar` opts back in with `user-select: text` so users can still copy the file name or line
+  count. `.line-number` keeps the global default (`none`), it's aria-hidden chrome.
+- **Selection offsets are UTF-16 code units, not bytes or grapheme clusters.** When you add features that compute
+  offsets from a click position (M3a's caret math) or accept them across the IPC boundary (M2's `viewer_read_range`),
+  preserve the UTF-16 convention. The backend handles the conversion to UTF-8 bytes, clamping lone surrogates to the
+  nearest codepoint boundary.
 - `getLineHeight()` (returns `18px × effective scale`) and the CSS rule
   `.line { height: calc(18px * var(--font-scale)) }` in `+page.svelte` must stay paired. Both read the same scale: the
   JS function for virtualization math, the CSS rule for layout. If you change the 18 base, change both.

apps/desktop/src/routes/viewer/line-segments.test.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect } from 'vitest'
+
+import { segmentLine } from './line-segments'
+
+describe('segmentLine', () => {
+  it('no matches and no selection returns one unmarked span', () => {
+    const segs = segmentLine('hello world', [], null)
+    expect(segs).toEqual([{ text: 'hello world', highlight: false, active: false, selected: false }])
+  })
+
+  it('empty line returns a single empty span when nothing is highlighted', () => {
+    const segs = segmentLine('', [], null)
+    expect(segs).toEqual([{ text: '', highlight: false, active: false, selected: false }])
+  })
+
+  it('single search match splits into three segments', () => {
+    const segs = segmentLine('hello world', [{ column: 6, length: 5, active: false }], null)
+    expect(segs).toEqual([
+      { text: 'hello ', highlight: false, active: false, selected: false },
+      { text: 'world', highlight: true, active: false, selected: false },
+    ])
+  })
+
+  it('active match flag propagates to its segment', () => {
+    const segs = segmentLine('hello world', [{ column: 0, length: 5, active: true }], null)
+    expect(segs).toEqual([
+      { text: 'hello', highlight: true, active: true, selected: false },
+      { text: ' world', highlight: false, active: false, selected: false },
+    ])
+  })
+
+  it('two search matches with text between them', () => {
+    const segs = segmentLine(
+      'foo bar baz',
+      [
+        { column: 0, length: 3, active: false },
+        { column: 8, length: 3, active: false },
+      ],
+      null,
+    )
+    expect(segs).toEqual([
+      { text: 'foo', highlight: true, active: false, selected: false },
+      { text: ' bar ', highlight: false, active: false, selected: false },
+      { text: 'baz', highlight: true, active: false, selected: false },
+    ])
+  })
+
+  it('selection only (no search) splits into selected and unselected spans', () => {
+    const segs = segmentLine('hello world', [], { selStart: 6, selEnd: 11 })
+    expect(segs).toEqual([
+      { text: 'hello ', highlight: false, active: false, selected: false },
+      { text: 'world', highlight: false, active: false, selected: true },
+    ])
+  })
+
+  it('selection covering the whole line returns one selected segment', () => {
+    const segs = segmentLine('abc', [], { selStart: 0, selEnd: 3 })
+    expect(segs).toEqual([{ text: 'abc', highlight: false, active: false, selected: true }])
+  })
+
+  it('selection and search overlap: span is both highlighted and selected', () => {
+    // "hello world" — search match on "lo w" (cols 3..7), selection on "world" (6..11).
+    // Overlap: "lo " (3..6) is search only, " w" (6..7) is search+select, "orld" (7..11) is select only.
+    const segs = segmentLine('hello world', [{ column: 3, length: 4, active: false }], {
+      selStart: 6,
+      selEnd: 11,
+    })
+    expect(segs).toEqual([
+      { text: 'hel', highlight: false, active: false, selected: false },
+      { text: 'lo ', highlight: true, active: false, selected: false },
+      { text: 'w', highlight: true, active: false, selected: true },
+      { text: 'orld', highlight: false, active: false, selected: true },
+    ])
+  })
+
+  it('selection entirely inside a search match: produces three segments (h, h+s, h)', () => {
+    // "hello world" — match "hello world" (0..11), select "lo w" (3..7).
+    const segs = segmentLine('hello world', [{ column: 0, length: 11, active: false }], {
+      selStart: 3,
+      selEnd: 7,
+    })
+    expect(segs).toEqual([
+      { text: 'hel', highlight: true, active: false, selected: false },
+      { text: 'lo w', highlight: true, active: false, selected: true },
+      { text: 'orld', highlight: true, active: false, selected: false },
+    ])
+  })
+
+  it('clamps out-of-range match columns to the line length', () => {
+    // Match advertises column 20 but line is only 11 chars; we still don't crash and the segment is empty.
+    const segs = segmentLine('hello world', [{ column: 20, length: 5, active: false }], null)
+    expect(segs).toEqual([{ text: 'hello world', highlight: false, active: false, selected: false }])
+  })
+
+  it('selection at the line end (selEnd == lineLength) selects through the final char', () => {
+    const segs = segmentLine('abc', [], { selStart: 1, selEnd: 3 })
+    expect(segs).toEqual([
+      { text: 'a', highlight: false, active: false, selected: false },
+      { text: 'bc', highlight: false, active: false, selected: true },
+    ])
+  })
+
+  it('UTF-16 surrogate pair: offsets are in code units', () => {
+    // "👋hi" = 4 UTF-16 units (2 for emoji + h + i).
+    // Select just the emoji: 0..2.
+    const segs = segmentLine('👋hi', [], { selStart: 0, selEnd: 2 })
+    expect(segs).toEqual([
+      { text: '👋', highlight: false, active: false, selected: true },
+      { text: 'hi', highlight: false, active: false, selected: false },
+    ])
+  })
+})