opencode-sesh 0.9.1 → 0.11.0

package/AGENTS.md

@@ -11,7 +11,7 @@ territory: read this first, then the specific file you need.
    any terminal. Lists **all** sessions across **all** project directories,
    full-text searchable, with transcript preview and resume/fork/delete.
 2. **`tui/sesh-panel.tsx`** — a SolidJS/OpenTUI plugin for the opencode TUI: a
-   recent-sessions section in the sidebar plus a `ctrl+o` / `/sesh` picker.
+   recent-sessions section in the sidebar plus an `option+o` / `/sesh` picker.
 3. **`opencode/tools/sesh-list.ts`** — the `sesh-list` custom tool, so the agent
    can list sessions across every directory by querying the global `opencode
    db` store (the native `opencode session list` is project-scoped).
@@ -144,7 +144,7 @@ Resume happens in place (`exec` after `cd` to the session's cwd).
   by recency; sessions within each group sort by last update regardless of pins.
   Row markers alone signal session state: a running agent animates a loading
   spinner marker, the open session shows its own ●, and every other idle row
-  stays neutral (polled every 15 s); Ctrl-P previews
+  stays neutral (polled every 15 s); Option-P previews
   a row and ctrl+x deletes one (armed, then confirmed). The section lists every
   session without a row cap and flex-grows to fill the sidebar, with overflow
   scrolling inside; the picker remains the place for transcript search.
@@ -153,7 +153,7 @@ Resume happens in place (`exec` after `cd` to the session's cwd).
   same `NEEDS_INPUT_SQL` heuristic as `bin/sesh-waiting.sh`.
 - **Picker:** a custom dialog (not `DialogSelect`) grouped by
   project/directory, recency-ordered, resume via
-  `api.route.navigate("session", …)`. `ctrl+o` and the command palette open it;
+  `api.route.navigate("session", …)`. `option+o` and the command palette open it;
   Ctrl-X arms and then confirms a delete through `api.client.session.delete` and
   removes the row only after the server confirms; Ctrl-F forks through
   `api.client.session.fork`; Ctrl-G scopes the list to the selected session's
@@ -164,7 +164,7 @@ Resume happens in place (`exec` after `cd` to the session's cwd).
   (`TRANSCRIPT_BATCH`) with bounded remote concurrency (`REMOTE_CONCURRENCY`).
   The header shows indexing progress/coverage. Visible transcript hits get
   short excerpts from the text-only index (never tool or reasoning payloads).
-  Project, needs-input (Option-W), and pinned-session (Option-P) filters compose
+  Project, needs-input (Option-W), and pinned-session (Option-S) filters compose
   with the query; the picker remembers query/scope/filters until plugin restart.
   `/sesh-needs` uses the shared needs-input set plus the oldest unresolved
   question or running-tool timestamp, lists longest-waiting first, and `n`
@@ -181,6 +181,13 @@ Resume happens in place (`exec` after `cd` to the session's cwd).
   `dialog.replace(...)`; `replace` resets the size to medium.
 - Use the `backgroundColor` **prop** on boxes, never `style={{backgroundColor}}`.
 - No percentage heights/widths in the picker; size the list window explicitly.
+- The picker windows by visible terminal lines: directory headings take two
+  lines, transcript excerpts can take a second line, and a sticky directory
+  heading keeps a scrolled group identifiable. Wheel scroll follows every
+  OpenTUI delta and changes only the viewport; real mouse movement changes
+  selection without recentering it.
+  Option-P previews in a full-size overlay over the picker; Esc first closes the
+  preview, then the picker on the next press.
 - An inline `<input>` in a slot does **not** receive keyboard focus. Sidebar and
   home search are keymap-captured queries (priority-20 base layer, letters /
   space / backspace, Esc exits); click the box to activate, click elsewhere to

package/CHANGELOG.md

@@ -7,6 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.11.0] - 2026-09-25
+
+### Changed
+
+- OpenCode TUI shortcuts use Option-O for the picker and Option-P for previews;
+  Option-S filters pinned sessions, and the Option-W hint now says "input".
+- The TUI picker groups sessions in collapsible directory trees, with the
+  directory path on a separate heading and branch markers on session rows.
+- Mouse-wheel scrolling follows OpenTUI's native per-event speed without moving
+  the selection under a stationary pointer. The transcript preview now covers
+  the entire picker, with arrow keys to switch sessions while it is open.
+## [0.10.0] - 2026-09-25
+
+### Changed
+
+- The TUI session picker is taller (about three quarters of the screen) and
+  stays vertically centred; hovering a row moves the selection.
+- `ctrl+p` opens the transcript preview as a centred overlay on top of the
+  picker that follows the hovered session and closes with Esc.
 ## [0.9.1] - 2026-09-25
 
 ### Changed
@@ -352,7 +371,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixture-database regression suite, TypeScript typechecking, and ShellCheck in
   CI.
 
-[Unreleased]: https://github.com/ozandogrultan/opencode-sesh/compare/v0.9.1...HEAD
+[Unreleased]: https://github.com/ozandogrultan/opencode-sesh/compare/v0.11.0...HEAD
+[0.11.0]: https://github.com/ozandogrultan/opencode-sesh/compare/v0.10.0...v0.11.0
+[0.10.0]: https://github.com/ozandogrultan/opencode-sesh/compare/v0.9.1...v0.10.0
 [0.9.1]: https://github.com/ozandogrultan/opencode-sesh/compare/v0.9.0...v0.9.1
 [0.9.0]: https://github.com/ozandogrultan/opencode-sesh/compare/v0.8.0...v0.9.0
 [0.8.0]: https://github.com/ozandogrultan/opencode-sesh/compare/v0.7.3...v0.8.0

package/README.md

@@ -1,5 +1,7 @@
 # sesh
 
+[![CI](https://github.com/ozandogrultan/opencode-sesh/actions/workflows/ci.yml/badge.svg)](https://github.com/ozandogrultan/opencode-sesh/actions/workflows/ci.yml)
+
 **A session browser for [opencode](https://opencode.ai).** Search every session
 across every project, preview the transcript, and resume in place — from your
 terminal or from inside the TUI.
@@ -39,8 +41,8 @@ grouped by directory, full-text searchable, and previewable from anywhere.
 - **Resume in place.** Enter `exec`s `opencode --session <id>` in the session's
   own directory. Ctrl-F forks instead. Your terminal becomes the session — no
   tabs, no panes, no window management.
-- **Native TUI, too.** A recent-sessions section in the opencode sidebar plus a
-  `ctrl+o` picker, both themed by your opencode theme.
+- **Native TUI, too.** A recent-sessions section in the opencode sidebar plus an
+  `option+o` picker, both themed by your opencode theme.
 - **Fast.** The database is scanned once per refresh and cached; keystrokes only
   re-render the last snapshot, so typing never triggers a query storm.
 
@@ -85,7 +87,7 @@ sesh              # terminal picker
 
 ```text
 /sesh             # inside opencode — picker (TUI plugin)
-ctrl+o            # inside opencode — picker
+option+o          # inside opencode — picker
 ```
 
 ### Requirements
@@ -167,22 +169,27 @@ non-interactive `sesh-delete.sh` refuses unless given `--yes`.
 | `/sesh` | Open the full picker |
 | `/sesh-costs` | Per-project cost digest (24h beside lifetime) |
 | `/sesh-needs` | Sessions waiting on you (Enter opens) |
-| `ctrl+o` | Open the full picker (also in the command palette) |
+| `option+o` | Open the full picker (also in the command palette) |
 | Type | Search titles, directories and transcript text |
 | `↑`/`↓`, `PgUp`/`PgDn`, `Home`/`End` | Move the selection |
-| Ctrl-P | Toggle the transcript preview |
+| Option-P | Toggle the transcript preview |
 | Enter | Open the selected session |
 | Ctrl-X | Delete the selected session (asks to confirm) |
 | Ctrl-F | Fork the selected session |
 | Ctrl-G | Toggle scope: the selected session's project, or every project |
-| Option-W / Option-P | Show only sessions needing input / pinned sessions |
+| Option-W / Option-S | Show only sessions needing input / pinned sessions |
 | Ctrl-S / Ctrl-D | Pin or unpin the selected session / directory |
-| Esc | Close |
+| Esc | Close the preview first, then the picker |
+
+The picker groups sessions under collapsible directory headings (click ▾/▸).
+Mouse-wheel scrolling moves through the tree without changing the selection
+under a stationary pointer. Option-P opens a full-size transcript preview over
+the picker; use ↑/↓ to preview other sessions, then Esc to return to the list.
 
 Click the sidebar's `search…` box to filter recent sessions in place; click
 elsewhere or press Esc to leave search. Click the **Sessions** heading to drive
 the list from the keyboard instead of the mouse (`↑`/`↓` to move, Enter to open,
-Ctrl-P to preview, Ctrl-S/Ctrl-D to pin, Ctrl-X to delete, Esc to leave). Pinned
+Option-P to preview, Ctrl-S/Ctrl-D to pin, Ctrl-X to delete, Esc to leave). Pinned
 directories rise first, while sessions within each directory are ordered by
 last update, newest first. The section lists every session and scrolls to fill
 the sidebar, so click **▾ hide** to collapse it when you need the room.

package/install.sh

@@ -298,7 +298,7 @@ fi
 "$LAUNCHER" --check || fail "post-install check failed."
 note "done"
 note "  picker:  run 'sesh' in any terminal, or '/sesh' inside opencode"
-note "  sidebar: ctrl+o opens the full picker"
+note "  sidebar: option+o opens the full picker"
 note_restart
 case ":$PATH:" in
   *":$BIN_DIR:"*) ;;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "opencode-sesh",
-  "version": "0.9.1",
-  "type": "module",
+  "version": "0.11.0",
   "description": "Browse, search, preview and resume opencode sessions from the terminal and the TUI.",
+  "type": "module",
   "license": "MIT",
   "author": "Ozan Dogrultan",
   "repository": {
@@ -44,12 +44,13 @@
   },
   "scripts": {
     "prepare": "husky",
-    "postinstall": "bash install.sh --sync-panel || true",
     "test": "bash tests/sesh.sh && bash tests/changelog.sh",
+    "test:unit": "bash tests/sesh.sh",
     "test:changelog": "bash tests/changelog.sh",
     "test:picker": "python3 tests/picker.py",
-    "typecheck": "tsc -p tsconfig.json",
+    "typecheck": "tsc --noEmit",
     "lint:sh": "for script in bin/*.sh bin/sesh install.sh tests/*.sh scripts/*.sh; do bash -n \"$script\" || exit; done",
+    "postinstall": "bash install.sh --sync-panel || true",
     "prepublishOnly": "bun run test && bun run typecheck"
   },
   "devDependencies": {

package/tui/sesh-panel.tsx

@@ -167,8 +167,8 @@ function pinnedFirst(entries: Entry[], pins: Pins): Entry[] {
 // 1. Sidebar (always visible): a compact recent-sessions section appended to
 //    the native sidebar via the `sidebar_content` slot. Native session_list
 //    (<leader>l) is left untouched; this complements it with a cross-project
-//    view. Rows are display-only; ctrl+o opens the full picker.
-// 2. Picker (ctrl+o, `/sesh`, command palette): an xlarge grouped picker over
+//    view. Rows are display-only; option+o opens the full picker.
+// 2. Picker (option+o, `/sesh`, command palette): an xlarge grouped picker over
 //    every session across all project directories, newest first.
 //
 // `/sesh` is registered by this plugin (a markdown command cannot open the
@@ -214,7 +214,7 @@ const HOME_TITLE_WIDTH = 30
 
 // The sidebar lists every session (newest first, pins ahead) and fills
 // whatever vertical space it gets: overflow scrolls inside the stretched
-// scrollbox. The picker (ctrl+o) remains the place for transcript search.
+// scrollbox. The picker (option+o) remains the place for transcript search.
 
 // Uppercase is included deliberately: a search box that silently drops shifted
 // letters cannot be used for acronyms or paths like README.
@@ -729,6 +729,44 @@ type TreeRow =
   | { kind: "group"; dir: string; label: string; count: number }
   | { kind: "item"; entry: Entry; last: boolean }
 
+type PickerRow =
+  | { kind: "group"; dir: string; label: string; count: number; pinned: boolean; continued?: boolean }
+  | { kind: "item"; entry: Entry; last: boolean }
+
+// Window by terminal lines, not session count: group spacing and transcript
+// excerpts each consume an extra line. Carry the directory heading forward
+// when a long group starts above the viewport.
+function pickerWindow(rows: PickerRow[], start: number, height: number, excerpt: (entry: Entry) => boolean): PickerRow[] {
+  if (!rows.length) return []
+  const first = Math.max(0, Math.min(start, rows.length - 1))
+  const shown: PickerRow[] = []
+  let remaining = height
+  if (rows[first].kind === "item") {
+    for (let i = first - 1; i >= 0; i--) {
+      const row = rows[i]
+      if (row.kind !== "group") continue
+      shown.push({ ...row, continued: true })
+      remaining--
+      break
+    }
+  }
+  for (let i = first; i < rows.length; i++) {
+    const row = rows[i]
+    const lines = row.kind === "group" ? 2 : excerpt(row.entry) ? 2 : 1
+    if (lines > remaining && shown.length) break
+    shown.push(row)
+    remaining -= lines
+  }
+  return shown
+}
+
+function pickerLastStart(rows: PickerRow[], height: number, excerpt: (entry: Entry) => boolean): number {
+  if (!rows.length) return 0
+  let start = rows.length - 1
+  while (start > 0 && pickerWindow(rows, start - 1, height, excerpt).at(-1) === rows.at(-1)) start--
+  return start
+}
+
 type PinProps = { pins: () => Pins; onTogglePin: (kind: keyof Pins, value: string) => void; refreshPins: () => void }
 
 function SidebarSessions(props: { api: TuiPluginApi } & PinProps) {
@@ -1021,7 +1059,7 @@ function SidebarSessions(props: { api: TuiPluginApi } & PinProps) {
       priority: 20,
       bindings: [
         {
-          key: "ctrl+p",
+          key: "option+p",
           desc: "Preview session transcript",
           preventDefault: true,
           cmd: () => openSidebarPreview(entry),
@@ -1065,7 +1103,7 @@ function SidebarSessions(props: { api: TuiPluginApi } & PinProps) {
         cmd: () => setCursor(Math.max(0, itemRows().length - 1)),
       },
       {
-        key: "ctrl+p",
+        key: "option+p",
         desc: "Preview session transcript",
         preventDefault: true,
         cmd: () => {
@@ -1167,7 +1205,7 @@ function SidebarSessions(props: { api: TuiPluginApi } & PinProps) {
         when={entries().length > 0}
         fallback={
           <text style={{ fg: theme().textMuted }}>
-            {loadFailed() ? "Session list unavailable · will retry" : "No sessions yet · ctrl+o to browse"}
+            {loadFailed() ? "Session list unavailable · will retry" : "No sessions yet · option+o to browse"}
           </text>
         }
       >
@@ -1273,14 +1311,14 @@ function SidebarSessions(props: { api: TuiPluginApi } & PinProps) {
         </For>
         </scrollbox>
         <Show when={remaining() > 0}>
-          <text style={{ fg: theme().textMuted }}>{`… ${remaining()} more · ctrl+o for all`}</text>
+          <text style={{ fg: theme().textMuted }}>{`… ${remaining()} more · option+o for all`}</text>
         </Show>
         <Show when={query().trim() && filteredEntries().length === 0}>
-          <text style={{ fg: theme().textMuted }}>No title or directory matches · ctrl+o to search transcripts</text>
+            <text style={{ fg: theme().textMuted }}>No title or directory matches · option+o to search transcripts</text>
         </Show>
         <Show when={navActive()}>
           <box paddingTop={1}>
-            <text style={{ fg: theme().textMuted }}>↑↓ move · enter open · ctrl+p preview · ctrl+s/d pin · ctrl+x delete · esc done</text>
+            <text style={{ fg: theme().textMuted }}>↑↓ move · enter open · option+p preview · ctrl+s/d pin · ctrl+x delete · esc done</text>
           </box>
         </Show>
       </Show>
@@ -1346,7 +1384,7 @@ function HomeSessions(props: { api: TuiPluginApi } & PinProps) {
       priority: 20,
       bindings: [
         {
-          key: "ctrl+p",
+          key: "option+p",
           desc: "Preview session transcript",
           preventDefault: true,
           cmd: () => preview.open(entry),
@@ -1400,7 +1438,7 @@ function HomeSessions(props: { api: TuiPluginApi } & PinProps) {
           <box flexDirection="row" gap={1}>
             <text style={{ fg: theme().textMuted }}>Recent sessions</text>
             <text style={{ fg: theme().textMuted }}>
-              {loadFailed() ? "· list unavailable, will retry" : "· none yet, ctrl+o to browse"}
+              {loadFailed() ? "· list unavailable, will retry" : "· none yet, option+o to browse"}
             </text>
           </box>
         }
@@ -1408,7 +1446,7 @@ function HomeSessions(props: { api: TuiPluginApi } & PinProps) {
         <box flexDirection="row" justifyContent="space-between" gap={2}>
           <box flexDirection="row" gap={1}>
             <text style={{ fg: theme().textMuted }}>Recent sessions</text>
-            <text style={{ fg: theme().textMuted }}>· ctrl+o for all</text>
+            <text style={{ fg: theme().textMuted }}>· option+o for all</text>
           </box>
           <box
             flexDirection="row"
@@ -1466,7 +1504,7 @@ function HomeSessions(props: { api: TuiPluginApi } & PinProps) {
           )}
         </For>
         <Show when={visible().length === 0}>
-          <text style={{ fg: theme().textMuted }}>No title or directory matches · ctrl+o to search transcripts</text>
+            <text style={{ fg: theme().textMuted }}>No title or directory matches · option+o to search transcripts</text>
         </Show>
       </Show>
     </box>
@@ -1534,6 +1572,8 @@ const tui: TuiPlugin = async (api) => {
     const [showPreview, setShowPreview] = createSignal(false)
     const [query, setQuery] = createSignal(pickerState.query)
     const [cursor, setCursor] = createSignal(0)
+    const [viewportStart, setViewportStart] = createSignal(0)
+    const [collapsed, setCollapsed] = createSignal<Record<string, boolean>>({})
     const [scope, setScope] = createSignal<string | undefined>(
       entries.some((entry) => entry.group === pickerState.scope) ? pickerState.scope : undefined,
     )
@@ -1574,8 +1614,6 @@ const tui: TuiPlugin = async (api) => {
       // while Solid needs a new reference to update search results mid-scan.
       setSearchIndex(new Map(index))
     })
-    type DialogRow = { kind: "group"; label: string; count: number } | { kind: "item"; entry: Entry }
-
     const orderedEntries = createMemo(() => pinnedFirst(allEntries(), pins()))
     const currentProject = () => {
       const route = api.route.current
@@ -1591,21 +1629,23 @@ const tui: TuiPlugin = async (api) => {
       )
       const byGroup = new Map<string, Entry[]>()
       for (const entry of matched) {
-        const list = byGroup.get(entry.group) ?? []
+        const list = byGroup.get(entry.dir) ?? []
         list.push(entry)
-        byGroup.set(entry.group, list)
+        byGroup.set(entry.dir, list)
       }
-      const groups = [...byGroup.entries()].map(([name, list]) => ({ name, list: newestFirst(list) }))
+      const groups = [...byGroup.entries()].map(([dir, list]) => ({ dir, list: newestFirst(list) }))
       const currentPins = pins()
       const rank = (group: (typeof groups)[number]) =>
-        group.list.some((entry) => currentPins.directories.includes(entry.dir)) ? 2
+        currentPins.directories.includes(group.dir) ? 2
           : group.list.some((entry) => currentPins.sessions.includes(entry.id)) ? 1 : 0
       return groups.sort((a, b) =>
         rank(b) - rank(a) || Math.max(...b.list.map((entry) => entry.updated)) - Math.max(...a.list.map((entry) => entry.updated)),
       )
     })
 
-    const selectableEntries = createMemo(() => matchedGroups().flatMap((g) => g.list))
+    const selectableEntries = createMemo(() => matchedGroups().flatMap((g) =>
+      collapsed()[g.dir] && !query().trim() ? [] : g.list,
+    ))
 
     // Visible bounding: say how much transcript text search actually covers and
     // when the metadata walk hit its cap, instead of silently under-reporting.
@@ -1626,41 +1666,50 @@ const tui: TuiPlugin = async (api) => {
       return bits.join(" · ")
     })
 
-    let previousSelection: Entry[] = []
-    createEffect(() => {
-      const rows = selectableEntries()
-      const selected = previousSelection[cursor()]?.id
-      const position = rows.findIndex((entry) => entry.id === selected)
-      if (position >= 0 && position !== cursor()) setCursor(position)
-      else if (cursor() >= rows.length) setCursor(Math.max(0, rows.length - 1))
-      previousSelection = rows
-    })
-
-    const pickerRows = createMemo<DialogRow[]>(() => {
-      const flat: DialogRow[] = []
+    const pickerRows = createMemo<PickerRow[]>(() => {
+      const flat: PickerRow[] = []
       for (const group of matchedGroups()) {
-        flat.push({ kind: "group", label: group.name, count: group.list.length })
-        for (const entry of group.list) flat.push({ kind: "item", entry })
+        flat.push({ kind: "group", dir: group.dir, label: prettyDir(group.dir, process.env.HOME ?? ""),
+          count: group.list.length, pinned: pins().directories.includes(group.dir) })
+        if (collapsed()[group.dir] && !query().trim()) continue
+        for (let i = 0; i < group.list.length; i++) {
+          flat.push({ kind: "item", entry: group.list[i], last: i === group.list.length - 1 })
+        }
       }
       return flat
     })
 
     const termHeight = api.renderer.height
-    const listHeight = Math.max(6, Math.floor(termHeight / 2) - 12)
+    // The dialog host anchors content a quarter of the way down the screen and
+    // lets it size to content, so a taller picker drifts downward. Pin the
+    // content height and offset it up by the same amount to keep it centred.
+    const dialogWidth = Math.min(116, api.renderer.width - 2)
+    const CHROME_ROWS = 12
+    const listHeight = () => Math.max(6, Math.floor(termHeight * 0.75) - CHROME_ROWS)
+    const dialogHeight = () => listHeight() + CHROME_ROWS
+    const dialogOffset = () => Math.min(0, Math.floor(termHeight / 4 - dialogHeight() / 2 - 1))
+    const hasExcerpt = (entry: Entry) => !!transcriptMatchExcerpt(searchIndex().get(entry.id), entry, query())
+    const maxViewportStart = createMemo(() => pickerLastStart(pickerRows(), listHeight(), hasExcerpt))
+    const visiblePickerRows = createMemo(() => pickerWindow(
+      pickerRows(), Math.min(viewportStart(), maxViewportStart()), listHeight(), hasExcerpt,
+    ))
 
-    const visiblePickerRows = createMemo<DialogRow[]>(() => {
-      const flat = pickerRows()
-      // A transcript hit adds a second line to a row; bound by screen height,
-      // not just the number of session IDs.
-      const windowSize = query().trim() ? Math.max(2, Math.floor(listHeight / 3)) : listHeight
-      const currentID = selectableEntries()[cursor()]?.id
-      let pos = currentID
-        ? flat.findIndex((row) => row.kind === "item" && row.entry.id === currentID)
-        : 0
-      if (pos < 0) pos = 0
-      let start = Math.max(0, pos - Math.floor(windowSize / 2))
-      start = Math.min(start, Math.max(0, flat.length - windowSize))
-      return flat.slice(start, start + windowSize)
+    let previousSelection: Entry[] = []
+    createEffect(() => {
+      const rows = selectableEntries()
+      const position = rows.findIndex((entry) => entry.id === previousSelection[cursor()]?.id)
+      if (rows !== previousSelection && (rows.length !== previousSelection.length ||
+        rows.some((entry, index) => entry.id !== previousSelection[index]?.id))) {
+        // A search/filter/collapse changed the tree: reveal the retained row or
+        // start at the first result rather than leaving a stale window open.
+        const next = position >= 0 ? position : 0
+        setCursor(next)
+        const id = rows[next]?.id
+        setViewportStart(position < 0 || next === 0 ? 0 : Math.max(0, pickerRows().findIndex(
+          (row) => row.kind === "item" && row.entry.id === id,
+        )))
+      } else if (cursor() >= rows.length) setCursor(Math.max(0, rows.length - 1))
+      previousSelection = rows
     })
 
     const previewCache = new Map<string, string>()
@@ -1711,11 +1760,30 @@ const tui: TuiPlugin = async (api) => {
 
     const togglePreview = () => setShowPreview((value) => !value)
 
-    const moveCursor = (delta: number) => {
+    const selectCursor = (index: number) => {
       const count = selectableEntries().length
       if (count === 0) return
       cancelDelete()
-      setCursor((value) => Math.max(0, Math.min(count - 1, value + delta)))
+      const next = Math.max(0, Math.min(count - 1, index))
+      const id = selectableEntries()[next].id
+      const flat = pickerRows()
+      const target = flat.findIndex((row) => row.kind === "item" && row.entry.id === id)
+      let start = Math.min(viewportStart(), maxViewportStart())
+      if (target < start) start = target
+      else while (start < target && !pickerWindow(flat, start, listHeight(), hasExcerpt).some(
+        (row) => row.kind === "item" && row.entry.id === id,
+      )) start++
+      setViewportStart(Math.max(0, Math.min(start, maxViewportStart())))
+      setCursor(next)
+    }
+    const moveCursor = (delta: number) => selectCursor(cursor() + delta)
+
+    // Match OpenTUI's scrollbox: honor every wheel event's delta. The viewport
+    // stays independent of selection, so fast scrolling cannot recenter on hover.
+    const scrollPicker = (scroll?: { direction: string; delta: number }) => {
+      if (showPreview() || !scroll || (scroll.direction !== "up" && scroll.direction !== "down")) return
+      const amount = Math.trunc(scroll.delta) * (scroll.direction === "down" ? 1 : -1)
+      setViewportStart((start) => Math.max(0, Math.min(maxViewportStart(), start + amount)))
     }
 
     // Delete confirmation lives in its own layer, registered only while a row
@@ -1727,6 +1795,22 @@ const tui: TuiPlugin = async (api) => {
       setPendingDelete(undefined)
     }
 
+    // Escape first closes the transcript overlay, then the picker. One Escape
+    // can reach both the focused search input and the key layer (sometimes in
+    // separate ticks), so ignore the duplicate that trails right behind.
+    let escapeHandledAt = 0
+    const handleEscape = () => {
+      const now = Date.now()
+      if (escapeHandledAt > now) return
+      if (showPreview()) {
+        setShowPreview(false)
+        escapeHandledAt = now + 150
+        return
+      }
+      cancelDelete()
+      close()
+    }
+
     const deleteEntry = async (entry: Entry) => {
       cancelDelete()
       try {
@@ -1793,20 +1877,23 @@ const tui: TuiPlugin = async (api) => {
     }
 
     const disposeNav = api.keymap.registerLayer({
+      // Outrank the built-in dialog layer so Escape reaches this picker before
+      // the dialog host closes the whole thing.
+      priority: 1,
       bindings: [
         { key: "up", desc: "Previous session", preventDefault: true, cmd: () => moveCursor(-1) },
         { key: "down", desc: "Next session", preventDefault: true, cmd: () => moveCursor(1) },
         { key: "pageup", desc: "Page up", preventDefault: true, cmd: () => moveCursor(-10) },
         { key: "pagedown", desc: "Page down", preventDefault: true, cmd: () => moveCursor(10) },
-        { key: "home", desc: "First session", preventDefault: true, cmd: () => setCursor(0) },
+        { key: "home", desc: "First session", preventDefault: true, cmd: () => selectCursor(0) },
         {
           key: "end",
           desc: "Last session",
           preventDefault: true,
-          cmd: () => setCursor(selectableEntries().length - 1),
+          cmd: () => selectCursor(selectableEntries().length - 1),
         },
         { key: "enter", desc: "Open session", preventDefault: true, cmd: () => choose() },
-        { key: "ctrl+p", desc: "Toggle transcript preview", preventDefault: true, cmd: togglePreview },
+        { key: "option+p", desc: "Toggle transcript preview", preventDefault: true, cmd: togglePreview },
         { key: "ctrl+s", desc: "Pin session", preventDefault: true, cmd: () => {
           const entry = selectableEntries()[cursor()]
           if (entry) onTogglePin("sessions", entry.id)
@@ -1847,15 +1934,12 @@ const tui: TuiPlugin = async (api) => {
           },
         },
         { key: "option+w", desc: "Filter needs input", preventDefault: true, cmd: () => setWaitingOnly((value) => !value) },
-        { key: "option+p", desc: "Filter pinned sessions", preventDefault: true, cmd: () => setPinnedOnly((value) => !value) },
+        { key: "option+s", desc: "Filter pinned sessions", preventDefault: true, cmd: () => setPinnedOnly((value) => !value) },
         {
           key: "escape",
           desc: "Close",
           preventDefault: true,
-          cmd: () => {
-            cancelDelete()
-            close()
-          },
+          cmd: handleEscape,
         },
       ],
     })
@@ -1871,7 +1955,14 @@ const tui: TuiPlugin = async (api) => {
 
     api.ui.dialog.replace(
       () => (
-        <box flexDirection="column" flexGrow={1} paddingBottom={1} gap={1}>
+        <box
+          flexDirection="column"
+          height={dialogHeight()}
+          marginTop={dialogOffset()}
+          paddingBottom={1}
+          gap={1}
+          backgroundColor={api.theme.current.backgroundPanel}
+        >
           <box paddingLeft={4} paddingRight={4}>
             <box flexDirection="row" justifyContent="space-between">
               <text attributes={TextAttributes.BOLD}>
@@ -1895,7 +1986,7 @@ const tui: TuiPlugin = async (api) => {
                 onKeyDown={(event) => {
                   if (event.name === "escape") {
                     event.preventDefault()
-                    close()
+                    handleEscape()
                   }
                 }}
               />
@@ -1923,35 +2014,47 @@ const tui: TuiPlugin = async (api) => {
           </box>
           <box
             flexDirection="column"
-            onMouseScroll={(event: { scroll?: { direction: string } }) => {
-              const direction = event.scroll?.direction
-              if (direction === "down") moveCursor(3)
-              else if (direction === "up") moveCursor(-3)
+            flexGrow={1}
+            overflow="hidden"
+            onMouseScroll={(event: { scroll?: { direction: string; delta: number } }) => {
+              scrollPicker(event.scroll)
             }}
           >
             <For each={visiblePickerRows()}>
                 {(row) => {
                   if (row.kind === "group") return (
-                    <box paddingTop={1} paddingLeft={4}>
-                      <text style={{ fg: api.theme.current.accent }} attributes={TextAttributes.BOLD}>
-                        {matchedGroups().find((group) => group.name === row.label)?.list.some((entry) => pins().directories.includes(entry.dir)) ? "★ " : ""}{row.label} <span style={{ fg: api.theme.current.textMuted }}>({row.count})</span>
+                    <box flexDirection="row" paddingTop={row.continued ? 0 : 1} paddingLeft={4} paddingRight={4}
+                      onMouseDown={() => setCollapsed((state) => ({ ...state, [row.dir]: !state[row.dir] }))}>
+                      <text flexGrow={1} flexShrink={1} wrapMode="none" style={{ fg: api.theme.current.accent }} attributes={TextAttributes.BOLD}>
+                        {collapsed()[row.dir] && !query().trim() ? "▸ " : "▾ "}{row.pinned ? "★ " : ""}{row.label}
                       </text>
+                      <text flexShrink={0} style={{ fg: api.theme.current.textMuted }}> ({row.count})</text>
                     </box>
                   )
                   const excerpt = createMemo(() => transcriptMatchExcerpt(searchIndex().get(row.entry.id), row.entry, query()))
                   return (
                     <box
                       flexDirection="column"
-                      paddingLeft={4}
+                      paddingLeft={6}
                       paddingRight={4}
                       backgroundColor={
                         row.entry.id === selectableEntries()[cursor()]?.id
                           ? api.theme.current.primary
                           : RGBA.fromInts(0, 0, 0, 0)
                       }
+                      onMouseMove={() => {
+                        // Repainting under a stationary pointer must not select
+                        // another row while the wheel is moving the viewport.
+                        const index = selectableEntries().findIndex((entry) => entry.id === row.entry.id)
+                        if (index >= 0) setCursor(index)
+                      }}
                       onMouseDown={() => choose(row.entry)}
                     >
                       <box flexDirection="row" gap={1}>
+                      <text flexShrink={0} style={{ fg: row.entry.id === selectableEntries()[cursor()]?.id
+                        ? api.theme.current.selectedListItemText : api.theme.current.textMuted }}>
+                        {row.last ? "└" : "├"}
+                      </text>
                       <Show when={row.entry.id === currentSessionID()}>
                         <text
                           flexShrink={0}
@@ -1993,7 +2096,7 @@ const tui: TuiPlugin = async (api) => {
                       >
                         {pendingDelete()?.id === row.entry.id
                           ? "press y to delete"
-                          : `${prettyDir(row.entry.dir, process.env.HOME ?? "")} · ${ago(row.entry.updated)}${
+                          : `${ago(row.entry.updated)}${
                               query().trim() &&
                               !`${row.entry.title} ${row.entry.dir}`.toLowerCase().includes(query().trim().toLowerCase())
                                 ? " · transcript match"
@@ -2018,7 +2121,7 @@ const tui: TuiPlugin = async (api) => {
                   )
                 }}
               </For>
-              <Show when={selectableEntries().length === 0}>
+              <Show when={matchedGroups().length === 0}>
                 <box paddingLeft={4} paddingRight={4}>
                   <text style={{ fg: api.theme.current.textMuted }}>
                     {waitingOnly() && waitingCoverage() === "loading"
@@ -2038,11 +2141,46 @@ const tui: TuiPlugin = async (api) => {
                 </box>
               </Show>
             </box>
+          <box paddingLeft={4} paddingRight={4} flexShrink={0} flexDirection="column">
+            <text
+              style={{
+                fg: pendingDelete() ? api.theme.current.warning : api.theme.current.textMuted,
+              }}
+            >
+              {pendingDelete()
+                ? `Delete "${truncate(pendingDelete()!.title, 40)}"? y confirm · n cancel`
+                : "↑↓ move · enter open · ctrl+g project · option+w input · option+s pinned · option+p preview"}
+            </text>
+            <Show when={!pendingDelete()}>
+              <text style={{ fg: api.theme.current.textMuted }}>ctrl+s/d pin · ctrl+x delete · ctrl+f fork · esc close</text>
+            </Show>
+          </box>
           <Show when={showPreview()}>
-            <box flexShrink={0} flexDirection="column" paddingLeft={4} paddingRight={4} height={12}>
-              <text style={{ fg: api.theme.current.textMuted }} attributes={TextAttributes.BOLD}>
-                {previewID() ? `Preview · ${truncate(selectableEntries()[cursor()]!.title, 48)}` : "Preview"}
-              </text>
+            <box
+              position="absolute"
+              left={0}
+              top={0}
+              width={dialogWidth}
+              height={dialogHeight()}
+              flexDirection="column"
+              backgroundColor={api.theme.current.backgroundElement}
+              paddingLeft={4}
+              paddingRight={4}
+              paddingTop={1}
+              paddingBottom={1}
+              gap={1}
+            >
+              <box flexDirection="row" justifyContent="space-between">
+                <text attributes={TextAttributes.BOLD}>
+                  {previewID() ? truncate(selectableEntries()[cursor()]!.title, dialogWidth - 18) : "Preview"}
+                </text>
+                <text style={{ fg: api.theme.current.textMuted }}>esc close</text>
+              </box>
+              <Show when={previewID()}>
+                <text style={{ fg: api.theme.current.textMuted }}>
+                  {prettyDir(selectableEntries()[cursor()]!.dir, process.env.HOME ?? "")} · {ago(selectableEntries()[cursor()]!.updated)}
+                </text>
+              </Show>
               <scrollbox flexGrow={1} scrollbarOptions={{ visible: false }}>
                 <Show when={previewID()} fallback={<text style={{ fg: api.theme.current.textMuted }}>Select a session to preview</text>}>
                   <Show when={previewText()} fallback={<text style={{ fg: api.theme.current.textMuted }}>Loading…</text>}>
@@ -2060,22 +2198,9 @@ const tui: TuiPlugin = async (api) => {
                   </Show>
                 </Show>
               </scrollbox>
+              <text style={{ fg: api.theme.current.textMuted }}>↑↓ switch session · esc back to picker</text>
             </box>
           </Show>
-          <box paddingLeft={4} paddingRight={4} flexShrink={0} flexDirection="column">
-            <text
-              style={{
-                fg: pendingDelete() ? api.theme.current.warning : api.theme.current.textMuted,
-              }}
-            >
-              {pendingDelete()
-                ? `Delete "${truncate(pendingDelete()!.title, 40)}"? y confirm · n cancel`
-                : "↑↓ move · enter open · ctrl+g project · option+w needs · option+p pinned · ctrl+p preview"}
-            </text>
-            <Show when={!pendingDelete()}>
-              <text style={{ fg: api.theme.current.textMuted }}>ctrl+s/d pin · ctrl+x delete · ctrl+f fork · esc close</text>
-            </Show>
-          </box>
         </box>
       ),
       () => {
@@ -2374,7 +2499,7 @@ ORDER BY lifetime_cost DESC`).all() ?? []) as {
   ])
 
   api.keymap.registerLayer({
-    bindings: [{ key: "ctrl+o", desc: "Pick session", preventDefault: true, cmd: () => void openPicker() }],
+    bindings: [{ key: "option+o", desc: "Pick session", preventDefault: true, cmd: () => void openPicker() }],
   })
 }