opencode-sesh 0.2.0 → 0.3.0

package/tui/sesh-panel.tsx

@@ -2,8 +2,9 @@
 import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/tui"
 import type { Project, Session } from "@opencode-ai/sdk/v2"
 import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js"
-import { readFile } from "node:fs/promises"
-import { RGBA, SyntaxStyle, TextAttributes } from "@opentui/core"
+import { mkdir, readFile, rename, rmdir, unlink, writeFile } from "node:fs/promises"
+import { dirname, join } from "node:path"
+import { getTreeSitterClient, RGBA, SyntaxStyle, TextAttributes } from "@opentui/core"
 
 type ThemeColors = TuiPluginApi["theme"]["current"]
 
@@ -49,21 +50,24 @@ function buildMarkdownStyle(theme: ThemeColors): SyntaxStyle {
       ],
       style: { foreground: theme.error },
     },
-    { scope: ["markup.heading"], style: { foreground: theme.markdownHeading, bold: true } },
+    // Some opencode themes give Markdown roles the same foreground as body
+    // text. Use their semantic accents here so transcript structure remains
+    // legible without recoloring the surrounding TUI or ordinary prose.
+    { scope: ["markup.heading"], style: { foreground: theme.accent, bold: true } },
     {
       scope: ["markup.heading.1"],
-      style: { foreground: theme.markdownHeading, bold: true, underline: true },
+      style: { foreground: theme.primary, bold: true, underline: true },
     },
     {
       scope: ["markup.heading.2", "markup.heading.3", "markup.heading.4", "markup.heading.5", "markup.heading.6"],
-      style: { foreground: theme.markdownHeading, bold: true },
+      style: { foreground: theme.accent, bold: true },
     },
-    { scope: ["markup.bold", "markup.strong"], style: { foreground: theme.markdownStrong, bold: true } },
-    { scope: ["markup.italic"], style: { foreground: theme.markdownEmph, italic: true } },
-    { scope: ["markup.list"], style: { foreground: theme.markdownListItem } },
+    { scope: ["markup.bold", "markup.strong"], style: { foreground: theme.accent, bold: true } },
+    { scope: ["markup.italic"], style: { foreground: theme.syntaxString, italic: true } },
+    { scope: ["markup.list"], style: { foreground: theme.syntaxKeyword } },
     { scope: ["markup.quote"], style: { foreground: theme.markdownBlockQuote, italic: true } },
-    { scope: ["markup.raw", "markup.raw.block"], style: { foreground: theme.markdownCode } },
-    { scope: ["markup.raw.inline"], style: { foreground: theme.markdownCode, background: theme.background } },
+    { scope: ["markup.raw", "markup.raw.block"], style: { foreground: theme.syntaxString } },
+    { scope: ["markup.raw.inline"], style: { foreground: theme.syntaxString, background: theme.background } },
     {
       scope: ["markup.link", "markup.link.url", "string.special", "string.special.url"],
       style: { foreground: theme.markdownLink, underline: true },
@@ -87,6 +91,77 @@ function getMarkdownStyle(theme: ThemeColors): SyntaxStyle | undefined {
   }
 }
 
+type Pins = { sessions: string[]; directories: string[] }
+const emptyPins = (): Pins => ({ sessions: [], directories: [] })
+const pinsPath = () =>
+  process.env.SESH_PINS_FILE ?? join(process.env.XDG_DATA_HOME ?? join(process.env.HOME ?? "", ".local/share"), "sesh/pins.json")
+
+async function readPins(): Promise<Pins> {
+  try {
+    const data = JSON.parse(await readFile(pinsPath(), "utf8")) as Partial<Pins>
+    return {
+      sessions: Array.isArray(data.sessions) ? data.sessions.filter((id): id is string => typeof id === "string") : [],
+      directories: Array.isArray(data.directories) ? data.directories.filter((dir): dir is string => typeof dir === "string") : [],
+    }
+  } catch {
+    return emptyPins()
+  }
+}
+
+async function togglePin(kind: keyof Pins, value: string): Promise<Pins> {
+  const file = pinsPath()
+  await mkdir(dirname(file), { recursive: true })
+  const lock = `${file}.lock`
+  let locked = false
+  for (let attempt = 0; attempt < 50; attempt++) {
+    try {
+      await mkdir(lock)
+      locked = true
+      break
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== "EEXIST") throw error
+      try {
+        const owner = Number((await readFile(join(lock, "pid"), "utf8")).trim())
+        if (Number.isSafeInteger(owner) && owner > 0) {
+          try {
+            process.kill(owner, 0)
+          } catch (check) {
+            if ((check as NodeJS.ErrnoException).code === "ESRCH") {
+              await unlink(join(lock, "pid")).catch(() => {})
+              await rmdir(lock).catch(() => {})
+            }
+          }
+        }
+      } catch {}
+      await new Promise((resolve) => setTimeout(resolve, 100))
+    }
+  }
+  if (!locked) throw new Error("pins are busy")
+  const tmp = `${file}.${process.pid}.${Math.random().toString(36).slice(2)}`
+  try {
+    await writeFile(join(lock, "pid"), `${process.pid}\n`)
+    const next = await readPins()
+    next[kind] = next[kind].includes(value) ? next[kind].filter((item) => item !== value) : [...next[kind], value]
+    await writeFile(tmp, JSON.stringify(next) + "\n", { mode: 0o600 })
+    await rename(tmp, file)
+    return next
+  } finally {
+    await unlink(tmp).catch(() => {})
+    await unlink(join(lock, "pid")).catch(() => {})
+    await rmdir(lock)
+  }
+}
+
+function pinnedFirst(entries: Entry[], pins: Pins): Entry[] {
+  const sessions = new Set(pins.sessions)
+  const directories = new Set(pins.directories)
+  return [...entries].sort((a, b) => {
+    const aRank = sessions.has(a.id) ? 2 : directories.has(a.dir) ? 1 : 0
+    const bRank = sessions.has(b.id) ? 2 : directories.has(b.dir) ? 1 : 0
+    return bRank - aRank || b.updated - a.updated
+  })
+}
+
 // Sessions panel: an opencode-native session switcher in two parts.
 //
 // 1. Sidebar (always visible): a compact recent-sessions section appended to
@@ -137,10 +212,9 @@ const SIDEBAR_TITLE_WIDTH = 27
 const SIDEBAR_GROUP_WIDTH = 30
 const HOME_TITLE_WIDTH = 30
 
-// The sidebar is a glanceable recent list, not a second picker: cap it so the
-// section cannot grow into a scrolling wall (the docs promise "most recent"),
-// and point at the picker for everything else.
-const SIDEBAR_LIMIT = 15
+// 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.
 
 // Uppercase is included deliberately: a search box that silently drops shifted
 // letters cannot be used for acronyms or paths like README.
@@ -252,6 +326,68 @@ async function openTranscriptDb(): Promise<any | undefined> {
   }
 }
 
+// NEEDS_INPUT_SQL: sessions waiting on the user (shared heuristic — keep in
+// sync with bin/sesh-waiting.sh). A session waits when it is not archived,
+// is not a fork child, and either has an unanswered `question` tool part or
+// a `tool` part still marked running older than STUCK_AFTER_MS (awaiting
+// approval, or orphaned by a dead server). Server-independent on purpose:
+// the TUI sync layer only sees permission/question state for sessions owned
+// by the current server, which is invisible cross-project.
+const STUCK_AFTER_MS = 600000
+const NEEDS_INPUT_SQL = (stuckBefore: number) => `
+SELECT s.id AS id,
+  CASE WHEN EXISTS (
+    SELECT 1 FROM part p
+    WHERE p.session_id = s.id
+      AND json_extract(p.data, '$.type') = 'tool'
+      AND json_extract(p.data, '$.tool') = 'question'
+      AND COALESCE(json_extract(p.data, '$.state.status'), 'pending') != 'completed'
+      AND NOT EXISTS (
+        SELECT 1 FROM message m
+        WHERE m.session_id = s.id
+          AND json_extract(m.data, '$.role') = 'user'
+          AND m.time_created > p.time_created)
+  ) THEN 'question' ELSE 'stuck' END AS reason
+FROM session s
+WHERE COALESCE(s.time_archived, 0) = 0
+  AND s.parent_id IS NULL
+  AND (EXISTS (
+    SELECT 1 FROM part p
+    WHERE p.session_id = s.id
+      AND json_extract(p.data, '$.type') = 'tool'
+      AND json_extract(p.data, '$.tool') = 'question'
+      AND COALESCE(json_extract(p.data, '$.state.status'), 'pending') != 'completed'
+      AND NOT EXISTS (
+        SELECT 1 FROM message m
+        WHERE m.session_id = s.id
+          AND json_extract(m.data, '$.role') = 'user'
+          AND m.time_created > p.time_created)
+  ) OR EXISTS (
+    SELECT 1 FROM part p2
+    WHERE p2.session_id = s.id
+      AND json_extract(p2.data, '$.type') = 'tool'
+      AND json_extract(p2.data, '$.state.status') = 'running'
+      AND p2.time_created < ${stuckBefore}))
+ORDER BY s.time_updated DESC`
+
+async function queryWaitingIds(db: any): Promise<Map<string, string>> {
+  const rows = (db.query(NEEDS_INPUT_SQL(Date.now() - STUCK_AFTER_MS)).all() ?? []) as {
+    id: unknown
+    reason: unknown
+  }[]
+  const out = new Map<string, string>()
+  for (const row of rows) {
+    if (
+      typeof row?.id === "string" &&
+      SESSION_ID_PATTERN.test(row.id) &&
+      (row.reason === "question" || row.reason === "stuck")
+    ) {
+      out.set(row.id, row.reason)
+    }
+  }
+  return out
+}
+
 function addTranscript(index: Map<string, string>, sid: string, data: string): void {
   try {
     const part = JSON.parse(data) as { type?: unknown; text?: unknown }
@@ -269,7 +405,7 @@ function addTranscript(index: Map<string, string>, sid: string, data: string): v
 async function buildSearchIndex(
   api: TuiPluginApi,
   entries: Entry[],
-  onProgress?: (progress: IndexProgress) => void,
+  onProgress?: (progress: IndexProgress, index: Map<string, string>) => void,
 ): Promise<Map<string, string>> {
   const index = new Map<string, string>()
   for (const entry of entries) {
@@ -279,7 +415,7 @@ async function buildSearchIndex(
   const remaining = new Set(ids)
   const total = ids.length
   let indexed = 0
-  const report = (complete: boolean) => onProgress?.({ indexed, total, complete })
+  const report = (complete: boolean) => onProgress?.({ indexed, total, complete }, index)
   report(false)
 
   const db = await openTranscriptDb()
@@ -309,7 +445,7 @@ async function buildSearchIndex(
   if (remaining.size > 0) {
     await buildSearchIndexRemote(api, [...remaining], index, () => {
       indexed += 1
-      report(false)
+      if (indexed % TRANSCRIPT_BATCH === 0) report(false)
     })
   }
   report(true)
@@ -446,7 +582,9 @@ function createTranscriptPreview(api: TuiPluginApi) {
     }
     setPreviewID(entry.id)
     setPreviewText("Loading…")
-    void fetchTranscriptText(api, entry.id).then(setPreviewText)
+    void fetchTranscriptText(api, entry.id).then((text) => {
+      if (previewID() === entry.id) setPreviewText(text)
+    })
     api.ui.dialog.replace(
       () => (
         <box flexDirection="column" paddingLeft={4} paddingRight={4} paddingBottom={1} gap={1}>
@@ -464,7 +602,11 @@ function createTranscriptPreview(api: TuiPluginApi) {
             maxHeight={Math.max(6, Math.floor(api.renderer.height / 2))}
           >
             {getMarkdownStyle(api.theme.current) ? (
-              <markdown content={previewText()} syntaxStyle={getMarkdownStyle(api.theme.current)!} />
+              <markdown
+                content={previewText()}
+                syntaxStyle={getMarkdownStyle(api.theme.current)!}
+                treeSitterClient={getTreeSitterClient()}
+              />
             ) : (
               <text wrapMode="word">{previewText()}</text>
             )}
@@ -500,10 +642,13 @@ type TreeRow =
   | { kind: "group"; dir: string; label: string; count: number }
   | { kind: "item"; entry: Entry; last: boolean }
 
-function SidebarSessions(props: { api: TuiPluginApi }) {
+type PinProps = { pins: () => Pins; onTogglePin: (kind: keyof Pins, value: string) => void; refreshPins: () => void }
+
+function SidebarSessions(props: { api: TuiPluginApi } & PinProps) {
   const theme = () => props.api.theme.current
   const home = process.env.HOME ?? ""
   const [entries, setEntries] = createSignal<Entry[]>([])
+  const [sectionCollapsed, setSectionCollapsed] = createSignal(false)
   const [collapsed, setCollapsed] = createSignal<Record<string, boolean>>({})
   const [hovered, setHovered] = createSignal<string>()
   const preview = createTranscriptPreview(props.api)
@@ -514,6 +659,7 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
   const [navActive, setNavActive] = createSignal(false)
   const [cursor, setCursor] = createSignal(0)
   const [pendingDelete, setPendingDelete] = createSignal<string>()
+  const [waiting, setWaiting] = createSignal<Map<string, string>>(new Map())
   let confirmTimer: ReturnType<typeof setTimeout> | undefined
   const currentID = createMemo(() => {
     const route = props.api.route.current
@@ -525,6 +671,7 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
   onMount(() => {
     let alive = true
     const load = async () => {
+      props.refreshPins()
       try {
         const { entries: all } = await fetchEntries(props.api)
         if (alive) {
@@ -536,6 +683,19 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
         // say so when there is nothing at all to show
         if (alive && entries().length === 0) setLoadFailed(true)
       }
+      try {
+        const db = await openTranscriptDb()
+        if (db) {
+          try {
+            const ids = await queryWaitingIds(db)
+            if (alive) setWaiting(ids)
+          } finally {
+            db.close()
+          }
+        }
+      } catch {
+        // leave the previous waiting set in place rather than flashing
+      }
     }
     void load()
     const clock = setInterval(() => void load(), POLL_MS)
@@ -547,26 +707,49 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
 
   const filteredEntries = createMemo(() => {
     const q = query().trim().toLowerCase()
-    if (!q) return entries()
-    return entries().filter(
+    const ordered = pinnedFirst(entries(), props.pins())
+    if (!q) return ordered
+    return ordered.filter(
       (entry) => entry.title.toLowerCase().includes(q) || entry.dir.toLowerCase().includes(q),
     )
   })
 
-  const shownEntries = createMemo(() => filteredEntries().slice(0, SIDEBAR_LIMIT))
+  const shownEntries = createMemo(() => filteredEntries())
   const remaining = createMemo(() => Math.max(0, filteredEntries().length - shownEntries().length))
 
+  const NEEDS_INPUT_DIR = "__needs_input__"
+  const waitingEntries = createMemo(() => {
+    const ids = waiting()
+    return shownEntries().filter((entry) => ids.has(entry.id))
+  })
+  const waitingReason = (id: string) => (waiting().get(id) === "question" ? "awaiting answer" : "run stuck")
+
   const tree = createMemo<TreeRow[]>(() => {
+    const rows: TreeRow[] = []
+    const pending = waitingEntries()
+    if (pending.length > 0) {
+      rows.push({ kind: "group", dir: NEEDS_INPUT_DIR, label: "Needs input", count: pending.length })
+      if (!collapsed()[NEEDS_INPUT_DIR]) {
+        for (let i = 0; i < pending.length; i++) {
+          rows.push({ kind: "item", entry: pending[i], last: i === pending.length - 1 })
+        }
+      }
+    }
     const groups = new Map<string, Entry[]>()
     for (const entry of shownEntries()) {
+      if (waiting().has(entry.id)) continue
       const list = groups.get(entry.dir) ?? []
       list.push(entry)
       groups.set(entry.dir, list)
     }
     const ordered = [...groups.entries()]
       .map(([dir, list]) => ({ dir, list, updated: Math.max(...list.map((entry) => entry.updated)) }))
-      .sort((a, b) => b.updated - a.updated)
-    const rows: TreeRow[] = []
+      .sort((a, b) => {
+        const pins = props.pins()
+        const rank = (group: { dir: string; list: Entry[] }) =>
+          pins.directories.includes(group.dir) ? 2 : group.list.some((entry) => pins.sessions.includes(entry.id)) ? 1 : 0
+        return rank(b) - rank(a) || b.updated - a.updated
+      })
     for (const group of ordered) {
       rows.push({ kind: "group", dir: group.dir, label: prettyDir(group.dir, home), count: group.list.length })
       if (collapsed()[group.dir]) continue
@@ -581,6 +764,16 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
     setCollapsed((prev) => ({ ...prev, [dir]: !prev[dir] }))
   }
 
+  const toggleSection = () => {
+    if (!sectionCollapsed()) {
+      cancelDelete()
+      setNavActive(false)
+      setSearching(false)
+      setHovered(undefined)
+    }
+    setSectionCollapsed((value) => !value)
+  }
+
   // Flat order of the rows a cursor can land on, so keyboard navigation and
   // mouse hover resolve to the same row.
   const itemRows = createMemo(() => tree().flatMap((row) => (row.kind === "item" ? [row.entry] : [])))
@@ -591,9 +784,14 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
     if (count === 0) return
     setCursor((value) => Math.max(0, Math.min(count - 1, value + delta)))
   }
+  let previousRows: Entry[] = []
   createEffect(() => {
-    const count = itemRows().length
-    if (cursor() >= count) setCursor(Math.max(0, count - 1))
+    const rows = itemRows()
+    const selected = previousRows[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))
+    previousRows = rows
   })
 
   const sessionStatus = (id: string): "running" | "waiting" | "idle" => {
@@ -621,8 +819,9 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
   }
 
   // Deleting is irreversible, so ctrl+x arms the row and a second ctrl+x (or y)
-  // commits it. Anything else — another row, five seconds, a keypress elsewhere
-  // — lets it go. The old behaviour deleted whatever was hovered outright.
+  // commits it. The arm survives pointer movement — edge-hover flicker must
+  // not eat the confirm — and is cleared by the five-second timeout, n, Esc,
+  // collapsing the section, or the delete itself.
   const requestDelete = (entry: Entry) => {
     if (deleting()) return
     if (pendingDelete() === entry.id) {
@@ -634,6 +833,18 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
     confirmTimer = setTimeout(() => setPendingDelete(undefined), 5000)
   }
 
+  // The confirm always targets the visibly armed row ("ctrl+x again"),
+  // wherever the pointer or cursor currently is. Returns true when an arm
+  // was pending (and is now committed or discarded as stale).
+  const confirmArmed = (): boolean => {
+    const id = pendingDelete()
+    if (!id) return false
+    const entry = entries().find((e) => e.id === id)
+    if (!entry) cancelDelete()
+    else void deleteEntry(entry)
+    return true
+  }
+
   const deleteEntry = async (entry: Entry) => {
     cancelDelete()
     if (deleting()) return
@@ -710,7 +921,7 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
       priority: 20,
       bindings: [
         {
-          key: "space",
+          key: "ctrl+p",
           desc: "Preview session transcript",
           preventDefault: true,
           cmd: () => openSidebarPreview(entry),
@@ -719,8 +930,12 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
           key: "ctrl+x",
           desc: "Delete session",
           preventDefault: true,
-          cmd: () => requestDelete(entry),
+          cmd: () => {
+            if (!confirmArmed()) requestDelete(entry)
+          },
         },
+        { key: "option+s", desc: "Pin session", preventDefault: true, cmd: () => props.onTogglePin("sessions", entry.id) },
+        { key: "option+d", desc: "Pin directory", preventDefault: true, cmd: () => props.onTogglePin("directories", entry.dir) },
         {
           key: "/",
           desc: "Search sessions",
@@ -731,13 +946,6 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
     })
   })
 
-  // Mouse hover must not commit a keyboard-initiated confirm (and vice versa):
-  // leaving the armed row abandons the pending delete.
-  createEffect(() => {
-    const pending = pendingDelete()
-    if (pending && !navActive() && pending !== hovered()) cancelDelete()
-  })
-
   // Keyboard navigation is opt-in (click the "Sessions" heading or the search
   // box) so the sidebar never steals the arrow keys from the main prompt.
   createEffect(() => {
@@ -757,7 +965,7 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
         cmd: () => setCursor(Math.max(0, itemRows().length - 1)),
       },
       {
-        key: "space",
+        key: "ctrl+p",
         desc: "Preview session transcript",
         preventDefault: true,
         cmd: () => {
@@ -770,10 +978,29 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
         desc: "Delete session",
         preventDefault: true,
         cmd: () => {
+          if (confirmArmed()) return
           const entry = itemRows()[cursor()]
           if (entry) requestDelete(entry)
         },
       },
+      {
+        key: "option+s",
+        desc: "Pin session",
+        preventDefault: true,
+        cmd: () => {
+          const entry = itemRows()[cursor()]
+          if (entry) props.onTogglePin("sessions", entry.id)
+        },
+      },
+      {
+        key: "option+d",
+        desc: "Pin directory",
+        preventDefault: true,
+        cmd: () => {
+          const entry = itemRows()[cursor()]
+          if (entry) props.onTogglePin("directories", entry.dir)
+        },
+      },
       {
         key: "enter",
         desc: "Open session",
@@ -799,8 +1026,7 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
               desc: "Confirm delete",
               preventDefault: true,
               cmd: () => {
-                const entry = itemRows()[cursor()]
-                if (entry && pendingDelete() === entry.id) void deleteEntry(entry)
+                confirmArmed()
               },
             },
             { key: "n", desc: "Cancel delete", preventDefault: true, cmd: cancelDelete },
@@ -818,16 +1044,25 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
   })
 
   return (
-    <box flexDirection="column" paddingRight={1}>
-      <box flexDirection="row" gap={1} onMouseDown={() => setNavActive((value) => !value)}>
-        <text>
+    <box flexDirection="column" paddingRight={1} flexGrow={1} flexShrink={1}>
+      <box flexDirection="row" justifyContent="space-between" gap={1}>
+        <text flexShrink={1} onMouseDown={() => {
+          if (!sectionCollapsed()) setNavActive((value) => !value)
+        }}>
           <b>Sessions</b>
           <span style={{ fg: theme().textMuted }}>
             {query().trim() ? ` (${filteredEntries().length}/${entries().length})` : ` (${entries().length})`}
           </span>
-          <span style={{ fg: navActive() ? theme().accent : theme().textMuted }}>{navActive() ? "  ▸ nav" : "  ▸"}</span>
+          <span style={{ fg: theme().accent }}>{navActive() ? " · nav" : ""}</span>
+          <Show when={waitingEntries().length > 0}>
+            <span style={{ fg: theme().warning }}> · {waitingEntries().length} need input</span>
+          </Show>
+        </text>
+        <text flexShrink={0} style={{ fg: theme().textMuted }} onMouseDown={toggleSection}>
+          {sectionCollapsed() ? "▸ show" : "▾ hide"}
         </text>
       </box>
+      <Show when={!sectionCollapsed()}>
       <Show
         when={entries().length > 0}
         fallback={
@@ -864,6 +1099,8 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
           </Show>
         </box>
         <scrollbox
+          flexGrow={1}
+          flexShrink={1}
           verticalScrollbarOptions={{ visible: false }}
           horizontalScrollbarOptions={{ visible: false }}
         >
@@ -873,7 +1110,7 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
               <box flexDirection="row" paddingTop={1} onMouseDown={() => toggleGroup(row.dir)}>
                 <text flexGrow={1} flexShrink={1} wrapMode="none">
                   <span style={{ fg: theme().textMuted }}>{collapsed()[row.dir] ? "▸ " : "▾ "}</span>
-                  <b>{truncate(row.label, SIDEBAR_GROUP_WIDTH)}</b>
+                  <b>{props.pins().directories.includes(row.dir) ? "★ " : ""}{truncate(row.label, SIDEBAR_GROUP_WIDTH - (props.pins().directories.includes(row.dir) ? 2 : 0))}</b>
                 </text>
                 <text flexShrink={0} style={{ fg: theme().textMuted }}>
                   {" "}({row.count})
@@ -890,7 +1127,16 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
                     ? theme().backgroundElement
                     : RGBA.fromInts(0, 0, 0, 0)
                 }
-                onMouseOver={() => setHovered(row.entry.id)}
+                onMouseOver={() => {
+                  setHovered(row.entry.id)
+                  // The keyboard layer wins over the hover layer while nav is
+                  // active. Keep its cursor on the hovered row so Option-S/Option-D
+                  // cannot silently pin a different (often current) session.
+                  if (navActive()) {
+                    const index = itemRows().findIndex((entry) => entry.id === row.entry.id)
+                    if (index >= 0) setCursor(index)
+                  }
+                }}
                 onMouseOut={() => setHovered(undefined)}
                 onMouseDown={() => props.api.route.navigate("session", { sessionID: row.entry.id })}
               >
@@ -909,13 +1155,21 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
                   </span>
                 </text>
                 <Highlighted
-                  text={truncate(row.entry.title, SIDEBAR_TITLE_WIDTH)}
+                  text={`${props.pins().sessions.includes(row.entry.id) ? "★ " : ""}${truncate(row.entry.title, SIDEBAR_TITLE_WIDTH - (props.pins().sessions.includes(row.entry.id) ? 2 : 0))}`}
                   query={query()}
                   color={isPendingDelete(row.entry.id) ? theme().error : theme().text}
                   matchColor={theme().warning}
                 />
                 <text flexShrink={0} style={{ fg: isPendingDelete(row.entry.id) ? theme().error : theme().textMuted }}>
-                  {isPendingDelete(row.entry.id) ? "ctrl+x again" : ago(row.entry.updated)}
+                  {isPendingDelete(row.entry.id) ? (
+                    "ctrl+x again"
+                  ) : waiting().has(row.entry.id) ? (
+                    <span>
+                      {ago(row.entry.updated)} · <span style={{ fg: theme().warning }}>{waitingReason(row.entry.id)}</span>
+                    </span>
+                  ) : (
+                    ago(row.entry.updated)
+                  )}
                 </text>
               </box>
             )
@@ -925,19 +1179,23 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
         <Show when={remaining() > 0}>
           <text style={{ fg: theme().textMuted }}>{`… ${remaining()} more · ctrl+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>
+        </Show>
         <Show when={navActive()}>
           <box paddingTop={1}>
-            <text style={{ fg: theme().textMuted }}>↑↓ move · enter open · space preview · ctrl+x delete · esc done</text>
+            <text style={{ fg: theme().textMuted }}>↑↓ move · enter open · ctrl+p preview · option+s/d pin · ctrl+x delete · esc done</text>
           </box>
         </Show>
       </Show>
+      </Show>
     </box>
   )
 }
 
 const HOME_SESSION_LIMIT = 6
 
-function HomeSessions(props: { api: TuiPluginApi }) {
+function HomeSessions(props: { api: TuiPluginApi } & PinProps) {
   const theme = () => props.api.theme.current
   const home = process.env.HOME ?? ""
   const [entries, setEntries] = createSignal<Entry[]>([])
@@ -992,11 +1250,13 @@ function HomeSessions(props: { api: TuiPluginApi }) {
       priority: 20,
       bindings: [
         {
-          key: "space",
+          key: "ctrl+p",
           desc: "Preview session transcript",
           preventDefault: true,
           cmd: () => preview.open(entry),
         },
+        { key: "option+s", desc: "Pin session", preventDefault: true, cmd: () => props.onTogglePin("sessions", entry.id) },
+        { key: "option+d", desc: "Pin directory", preventDefault: true, cmd: () => props.onTogglePin("directories", entry.dir) },
       ],
     })
   })
@@ -1007,6 +1267,7 @@ function HomeSessions(props: { api: TuiPluginApi }) {
   onMount(() => {
     let alive = true
     const load = async () => {
+      props.refreshPins()
       try {
         const { entries: all } = await fetchEntries(props.api)
         if (alive) {
@@ -1032,7 +1293,7 @@ function HomeSessions(props: { api: TuiPluginApi }) {
           (entry) => entry.title.toLowerCase().includes(q) || entry.dir.toLowerCase().includes(q),
         )
       : entries()
-    return list.slice(0, HOME_SESSION_LIMIT)
+    return pinnedFirst(list, props.pins()).slice(0, HOME_SESSION_LIMIT)
   })
 
   return (
@@ -1097,19 +1358,19 @@ function HomeSessions(props: { api: TuiPluginApi }) {
                 ○
               </text>
               <Highlighted
-                text={truncate(entry.title, HOME_TITLE_WIDTH)}
+                text={`${props.pins().sessions.includes(entry.id) ? "★ " : ""}${truncate(entry.title, HOME_TITLE_WIDTH - (props.pins().sessions.includes(entry.id) ? 2 : 0))}`}
                 query={query()}
                 color={theme().text}
                 matchColor={theme().warning}
               />
               <text flexShrink={0} style={{ fg: theme().textMuted }}>
-                {prettyDir(entry.dir, home)} · {ago(entry.updated)}
+                {props.pins().directories.includes(entry.dir) ? "★ " : ""}{prettyDir(entry.dir, home)} · {ago(entry.updated)}
               </text>
             </box>
           )}
         </For>
         <Show when={visible().length === 0}>
-          <text style={{ fg: theme().textMuted }}>No matching sessions</text>
+          <text style={{ fg: theme().textMuted }}>No title or directory matches · ctrl+o to search transcripts</text>
         </Show>
       </Show>
     </box>
@@ -1117,19 +1378,40 @@ function HomeSessions(props: { api: TuiPluginApi }) {
 }
 
 const tui: TuiPlugin = async (api) => {
+  const [pins, setPins] = createSignal<Pins>(emptyPins())
+  let pinVersion = 0
+  const refreshPins = () => {
+    const version = pinVersion
+    void readPins().then((latest) => {
+      if (version === pinVersion) setPins(latest)
+    })
+  }
+  refreshPins()
+  const onTogglePin = (kind: keyof Pins, value: string) => {
+    if (!value) return
+    pinVersion += 1
+    void togglePin(kind, value).then(
+      (updated) => {
+        setPins(updated)
+        api.ui.toast({ message: `${updated[kind].includes(value) ? "Pinned" : "Unpinned"} ${kind === "sessions" ? "session" : "directory"}`, variant: "info" })
+      },
+      () => api.ui.toast({ message: "Could not update pins", variant: "error" }),
+    )
+  }
   api.slots.register({
     order: 100,
     slots: {
       sidebar_content() {
-        return <SidebarSessions api={api} />
+        return <SidebarSessions api={api} pins={pins} onTogglePin={onTogglePin} refreshPins={refreshPins} />
       },
       home_bottom() {
-        return <HomeSessions api={api} />
+        return <HomeSessions api={api} pins={pins} onTogglePin={onTogglePin} refreshPins={refreshPins} />
       },
     },
   })
 
   const openPicker = async () => {
+    refreshPins()
     if (api.mode.current() !== BASE_MODE) return
     if (api.renderer.currentFocusedEditor === null) return
 
@@ -1159,16 +1441,20 @@ const tui: TuiPlugin = async (api) => {
       total: 0,
       complete: false,
     })
-    void buildSearchIndex(api, entries, setIndexProgress).then(setSearchIndex)
-    let pickerInput: { value: string; isDestroyed?: boolean } | undefined
-
+    void buildSearchIndex(api, entries, (progress, index) => {
+      setIndexProgress(progress)
+      // Publish a fresh snapshot: the indexing workers mutate their own map,
+      // 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 matchedGroups = createMemo(() => {
       const q = query().trim().toLowerCase()
       const index = searchIndex()
       const group = scope()
-      const matched = allEntries().filter((entry) => {
+      const matched = orderedEntries().filter((entry) => {
         if (group && entry.group !== group) return false
         if (!q) return true
         const haystack = index.get(entry.id) ?? `${entry.title} ${entry.dir}`.toLowerCase()
@@ -1180,7 +1466,14 @@ const tui: TuiPlugin = async (api) => {
         list.push(entry)
         byGroup.set(entry.group, list)
       }
-      return [...byGroup.entries()].map(([name, list]) => ({ name, list }))
+      const groups = [...byGroup.entries()].map(([name, list]) => ({ name, list }))
+      const currentPins = pins()
+      const rank = (group: (typeof groups)[number]) =>
+        group.list.some((entry) => currentPins.directories.includes(entry.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))
@@ -1202,9 +1495,14 @@ const tui: TuiPlugin = async (api) => {
       return bits.join(" · ")
     })
 
+    let previousSelection: Entry[] = []
     createEffect(() => {
-      const count = selectableEntries().length
-      if (cursor() >= count) setCursor(Math.max(0, count - 1))
+      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[]>(() => {
@@ -1273,8 +1571,8 @@ const tui: TuiPlugin = async (api) => {
         setPreviewText(cached)
         return
       }
-      // Keep the previous transcript visible while the next one loads so the
-      // preview does not blink away on every cursor move.
+      // Never show another session's transcript beneath the new selection.
+      setPreviewText("Loading…")
       previewTimer = setTimeout(() => void loadPreview(id), 120)
     })
 
@@ -1375,6 +1673,15 @@ const tui: TuiPlugin = async (api) => {
           cmd: () => setCursor(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+s", desc: "Pin session", preventDefault: true, cmd: () => {
+          const entry = selectableEntries()[cursor()]
+          if (entry) onTogglePin("sessions", entry.id)
+        } },
+        { key: "option+d", desc: "Pin directory", preventDefault: true, cmd: () => {
+          const entry = selectableEntries()[cursor()]
+          if (entry) onTogglePin("directories", entry.dir)
+        } },
         {
           key: "ctrl+x",
           desc: "Delete session",
@@ -1425,16 +1732,6 @@ const tui: TuiPlugin = async (api) => {
       if (previewTimer) clearTimeout(previewTimer)
     }
 
-    const onSearchInput = (value: string) => {
-      if (query() === "" && value.trim() === "" && value.length > 0) {
-        if (pickerInput && !pickerInput.isDestroyed) pickerInput.value = ""
-        setQuery("")
-        togglePreview()
-        return
-      }
-      setQuery(value)
-    }
-
     api.ui.dialog.replace(
       () => (
         <box flexDirection="column" flexGrow={1} paddingBottom={1} gap={1}>
@@ -1449,7 +1746,6 @@ const tui: TuiPlugin = async (api) => {
             </box>
             <box paddingTop={1}>
               <input
-                ref={(r) => (pickerInput = r)}
                 focused
                 placeholder="Search title, directory, transcript…"
                 value={query()}
@@ -1457,7 +1753,7 @@ const tui: TuiPlugin = async (api) => {
                 focusedBackgroundColor={api.theme.current.backgroundPanel}
                 focusedTextColor={api.theme.current.text}
                 cursorColor={api.theme.current.primary}
-                onInput={onSearchInput}
+                onInput={setQuery}
                 onSubmit={() => choose()}
                 onKeyDown={(event) => {
                   if (event.name === "escape") {
@@ -1486,7 +1782,7 @@ const tui: TuiPlugin = async (api) => {
                   row.kind === "group" ? (
                     <box paddingTop={1} paddingLeft={4}>
                       <text style={{ fg: api.theme.current.accent }} attributes={TextAttributes.BOLD}>
-                        {row.label} <span style={{ fg: api.theme.current.textMuted }}>({row.count})</span>
+                        {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>
                       </text>
                     </box>
                   ) : (
@@ -1516,7 +1812,7 @@ const tui: TuiPlugin = async (api) => {
                         </text>
                       </Show>
                       <Highlighted
-                        text={truncate(row.entry.title, 61)}
+                        text={`${pins().sessions.includes(row.entry.id) ? "★ " : ""}${truncate(row.entry.title, pins().sessions.includes(row.entry.id) ? 59 : 61)}`}
                         query={query()}
                         bold={row.entry.id === selectableEntries()[cursor()]?.id}
                         color={
@@ -1543,7 +1839,12 @@ 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)}`}
+                          : `${prettyDir(row.entry.dir, process.env.HOME ?? "")} · ${ago(row.entry.updated)}${
+                              query().trim() &&
+                              !`${row.entry.title} ${row.entry.dir}`.toLowerCase().includes(query().trim().toLowerCase())
+                                ? " · transcript match"
+                                : ""
+                            }`}
                       </text>
                     </box>
                   )
@@ -1552,7 +1853,11 @@ const tui: TuiPlugin = async (api) => {
               <Show when={selectableEntries().length === 0}>
                 <box paddingLeft={4} paddingRight={4}>
                   <text style={{ fg: api.theme.current.textMuted }}>
-                    {scope() ? `No sessions in ${scope()}` : "No sessions match this search"}
+                    {!indexProgress().complete
+                      ? "No matches yet · still searching transcripts…"
+                      : scope()
+                        ? `No matches in ${scope()} · ctrl+g for all projects`
+                        : "No sessions match · try another search"}
                   </text>
                 </box>
               </Show>
@@ -1560,20 +1865,23 @@ const tui: TuiPlugin = async (api) => {
           <Show when={showPreview()}>
             <box flexShrink={0} flexDirection="column" paddingLeft={4} paddingRight={4} height={12}>
               <text style={{ fg: api.theme.current.textMuted }} attributes={TextAttributes.BOLD}>
-                Preview
+                {previewID() ? `Preview · ${truncate(selectableEntries()[cursor()]!.title, 48)}` : "Preview"}
               </text>
               <scrollbox flexGrow={1} scrollbarOptions={{ visible: false }}>
-                <Show
-                  when={previewText()}
-                  fallback={<text style={{ fg: api.theme.current.textMuted }}>Loading…</text>}
-                >
-                  {(text) =>
-                    getMarkdownStyle(api.theme.current) ? (
-                      <markdown content={text()} syntaxStyle={getMarkdownStyle(api.theme.current)!} />
-                    ) : (
-                      <text wrapMode="word">{text()}</text>
-                    )
-                  }
+                <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>}>
+                    {(text) =>
+                      getMarkdownStyle(api.theme.current) ? (
+                        <markdown
+                          content={text()}
+                          syntaxStyle={getMarkdownStyle(api.theme.current)!}
+                          treeSitterClient={getTreeSitterClient()}
+                        />
+                      ) : (
+                        <text wrapMode="word">{text()}</text>
+                      )
+                    }
+                  </Show>
                 </Show>
               </scrollbox>
             </box>
@@ -1586,7 +1894,7 @@ const tui: TuiPlugin = async (api) => {
             >
               {pendingDelete()
                 ? `Delete "${truncate(pendingDelete()!.title, 40)}"? y confirm · n cancel`
-                : "↑↓ navigate · enter open · ctrl+x delete · ctrl+f fork · ctrl+g project · space preview · esc close"}
+                : "↑↓ navigate · enter open · option+s/d pin · ctrl+x delete · ctrl+f fork · ctrl+g project · ctrl+p preview · esc close"}
             </text>
           </box>
         </box>