opencode-sesh 0.1.7 → 0.2.1

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,7 +212,13 @@ const SIDEBAR_TITLE_WIDTH = 27
 const SIDEBAR_GROUP_WIDTH = 30
 const HOME_TITLE_WIDTH = 30
 
-const SEARCH_KEYS = "abcdefghijklmnopqrstuvwxyz0123456789-_.@/+".split("")
+// 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.
+const SEARCH_KEYS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_.@/+:,?!()[]".split("")
 
 function searchBindings(append: (input: string) => void, exit: () => void) {
   return [
@@ -262,7 +343,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) {
@@ -272,7 +353,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()
@@ -302,7 +383,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)
@@ -354,6 +435,45 @@ async function buildSearchIndexRemote(
 const TRANSCRIPT_PREVIEW_TURNS = 8
 const TRANSCRIPT_PREVIEW_CHARS = 2000
 
+// Case-insensitive range of `query` inside `text`, so a matched row can show
+// which part of it the search hit instead of only filtering invisibly. Kept
+// below the data-layer markers that tests/tui.mjs evaluates: JSX must not enter
+// that extraction window.
+function matchRange(text: string, query: string): [number, number] | undefined {
+  const q = query.trim().toLowerCase()
+  if (!q) return undefined
+  const at = text.toLowerCase().indexOf(q)
+  return at < 0 ? undefined : [at, at + q.length]
+}
+
+function Highlighted(props: {
+  text: string
+  query: string
+  color: RGBA
+  matchColor: RGBA
+  bold?: boolean
+}) {
+  const parts = createMemo(() => {
+    const range = matchRange(props.text, props.query)
+    if (!range) return [props.text, "", ""] as const
+    return [props.text.slice(0, range[0]), props.text.slice(range[0], range[1]), props.text.slice(range[1])] as const
+  })
+  return (
+    <text
+      flexGrow={1}
+      flexShrink={1}
+      overflow="hidden"
+      wrapMode="none"
+      attributes={props.bold ? TextAttributes.BOLD : undefined}
+      style={{ fg: props.color }}
+    >
+      {parts()[0]}
+      <span style={{ fg: props.matchColor }}>{parts()[1]}</span>
+      {parts()[2]}
+    </text>
+  )
+}
+
 async function fetchTranscriptText(api: TuiPluginApi, sessionID: string): Promise<string> {
   try {
     const result = await api.client.session.messages({ sessionID })
@@ -400,7 +520,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}>
@@ -418,7 +540,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>
             )}
@@ -454,16 +580,24 @@ 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)
   const [query, setQuery] = createSignal("")
   const [deleting, setDeleting] = createSignal<string>()
   const [searching, setSearching] = createSignal(false)
+  const [loadFailed, setLoadFailed] = createSignal(false)
+  const [navActive, setNavActive] = createSignal(false)
+  const [cursor, setCursor] = createSignal(0)
+  const [pendingDelete, setPendingDelete] = createSignal<string>()
+  let confirmTimer: ReturnType<typeof setTimeout> | undefined
   const currentID = createMemo(() => {
     const route = props.api.route.current
     if (route.name !== "session") return undefined
@@ -474,11 +608,17 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
   onMount(() => {
     let alive = true
     const load = async () => {
+      props.refreshPins()
       try {
         const { entries: all } = await fetchEntries(props.api)
-        if (alive) setEntries(all)
+        if (alive) {
+          setEntries(all)
+          setLoadFailed(false)
+        }
       } catch {
-        // leave the previous list in place rather than flashing to blank
+        // leave the previous list in place rather than flashing to blank, but
+        // say so when there is nothing at all to show
+        if (alive && entries().length === 0) setLoadFailed(true)
       }
     }
     void load()
@@ -491,22 +631,31 @@ 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())
+  const remaining = createMemo(() => Math.max(0, filteredEntries().length - shownEntries().length))
+
   const tree = createMemo<TreeRow[]>(() => {
     const groups = new Map<string, Entry[]>()
-    for (const entry of filteredEntries()) {
+    for (const entry of shownEntries()) {
       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)
+      .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
+      })
     const rows: TreeRow[] = []
     for (const group of ordered) {
       rows.push({ kind: "group", dir: group.dir, label: prettyDir(group.dir, home), count: group.list.length })
@@ -522,6 +671,36 @@ 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] : [])))
+  const isActive = (id: string) => (navActive() ? itemRows()[cursor()]?.id === id : hovered() === id)
+  const isPendingDelete = (id: string) => pendingDelete() === id
+  const moveCursor = (delta: number) => {
+    const count = itemRows().length
+    if (count === 0) return
+    setCursor((value) => Math.max(0, Math.min(count - 1, value + delta)))
+  }
+  let previousRows: Entry[] = []
+  createEffect(() => {
+    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" => {
     try {
       const permissions = props.api.state.session.permission(id)
@@ -540,7 +719,41 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
     return theme().textMuted
   }
 
+  const cancelDelete = () => {
+    if (confirmTimer) clearTimeout(confirmTimer)
+    confirmTimer = undefined
+    setPendingDelete(undefined)
+  }
+
+  // Deleting is irreversible, so ctrl+x arms the row and a second ctrl+x (or y)
+  // 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) {
+      void deleteEntry(entry)
+      return
+    }
+    setPendingDelete(entry.id)
+    if (confirmTimer) clearTimeout(confirmTimer)
+    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
     setDeleting(entry.id)
     try {
@@ -568,6 +781,7 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
 
   let disposeHoverSpace: (() => void) | undefined
   let disposeSearch: (() => void) | undefined
+  let disposeNav: (() => void) | undefined
   let insideSearchBox = false
 
   const onRootMouseDown = () => {
@@ -614,7 +828,7 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
       priority: 20,
       bindings: [
         {
-          key: "space",
+          key: "ctrl+p",
           desc: "Preview session transcript",
           preventDefault: true,
           cmd: () => openSidebarPreview(entry),
@@ -623,8 +837,12 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
           key: "ctrl+x",
           desc: "Delete session",
           preventDefault: true,
-          cmd: () => void deleteEntry(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",
@@ -635,22 +853,128 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
     })
   })
 
+  // 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(() => {
+    disposeNav?.()
+    disposeNav = undefined
+    if (!navActive()) return
+    const 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(-5) },
+      { key: "pagedown", desc: "Page down", preventDefault: true, cmd: () => moveCursor(5) },
+      { key: "home", desc: "First session", preventDefault: true, cmd: () => setCursor(0) },
+      {
+        key: "end",
+        desc: "Last session",
+        preventDefault: true,
+        cmd: () => setCursor(Math.max(0, itemRows().length - 1)),
+      },
+      {
+        key: "ctrl+p",
+        desc: "Preview session transcript",
+        preventDefault: true,
+        cmd: () => {
+          const entry = itemRows()[cursor()]
+          if (entry) openSidebarPreview(entry)
+        },
+      },
+      {
+        key: "ctrl+x",
+        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",
+        preventDefault: true,
+        cmd: () => {
+          const entry = itemRows()[cursor()]
+          if (entry) props.api.route.navigate("session", { sessionID: entry.id })
+        },
+      },
+      {
+        key: "escape",
+        desc: "Leave the session list",
+        preventDefault: true,
+        cmd: () => {
+          cancelDelete()
+          setNavActive(false)
+        },
+      },
+      ...(pendingDelete()
+        ? [
+            {
+              key: "y",
+              desc: "Confirm delete",
+              preventDefault: true,
+              cmd: () => {
+                confirmArmed()
+              },
+            },
+            { key: "n", desc: "Cancel delete", preventDefault: true, cmd: cancelDelete },
+          ]
+        : []),
+    ]
+    disposeNav = props.api.keymap.registerLayer({ mode: "base", priority: 20, bindings })
+  })
+
   onCleanup(() => {
     disposeHoverSpace?.()
     disposeSearch?.()
+    disposeNav?.()
+    if (confirmTimer) clearTimeout(confirmTimer)
   })
 
   return (
-    <box flexDirection="column" paddingRight={1}>
-      <Show when={entries().length > 0}>
-        <box flexDirection="row" gap={1}>
-          <text>
-            <b>Sessions</b>
-            <span style={{ fg: theme().textMuted }}>
-              {query().trim() ? ` (${filteredEntries().length}/${entries().length})` : ` (${entries().length})`}
-            </span>
+    <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: theme().accent }}>{navActive() ? " · nav" : ""}</span>
+        </text>
+        <text flexShrink={0} style={{ fg: theme().textMuted }} onMouseDown={toggleSection}>
+          {sectionCollapsed() ? "▸ show" : "▾ hide"}
+        </text>
+      </box>
+      <Show when={!sectionCollapsed()}>
+      <Show
+        when={entries().length > 0}
+        fallback={
+          <text style={{ fg: theme().textMuted }}>
+            {loadFailed() ? "Session list unavailable · will retry" : "No sessions yet · ctrl+o to browse"}
           </text>
-        </box>
+        }
+      >
         <box
           flexDirection="row"
           gap={1}
@@ -679,6 +1003,8 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
           </Show>
         </box>
         <scrollbox
+          flexGrow={1}
+          flexShrink={1}
           verticalScrollbarOptions={{ visible: false }}
           horizontalScrollbarOptions={{ visible: false }}
         >
@@ -688,7 +1014,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})
@@ -701,33 +1027,63 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
                 paddingLeft={1}
                 paddingRight={1}
                 backgroundColor={
-                  row.entry.id === hovered() && row.entry.id !== currentID()
+                  isActive(row.entry.id) && row.entry.id !== currentID()
                     ? 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 })}
               >
                 <text flexShrink={0}>
                   <span style={{ fg: theme().textMuted }}>{row.last ? "└" : "├"}</span>
                   <span
-                    style={{ fg: row.entry.id === currentID() ? theme().accent : statusColor(row.entry.id) }}
+                    style={{
+                      fg: isPendingDelete(row.entry.id)
+                        ? theme().error
+                        : row.entry.id === currentID()
+                          ? theme().accent
+                          : statusColor(row.entry.id),
+                    }}
                   >
-                    {row.entry.id === currentID() ? "●" : "○"}
+                    {row.entry.id === currentID() ? "●" : isActive(row.entry.id) ? "▸" : "○"}
                   </span>
                 </text>
-                <text flexGrow={1} flexShrink={1} overflow="hidden" wrapMode="none" style={{ fg: theme().text }}>
-                  {truncate(row.entry.title, SIDEBAR_TITLE_WIDTH)}
-                </text>
-                <text flexShrink={0} style={{ fg: theme().textMuted }}>
-                  {ago(row.entry.updated)}
+                <Highlighted
+                  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)}
                 </text>
               </box>
             )
           }
         </For>
         </scrollbox>
+        <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 · ctrl+p preview · option+s/d pin · ctrl+x delete · esc done</text>
+          </box>
+        </Show>
+      </Show>
       </Show>
     </box>
   )
@@ -735,13 +1091,14 @@ function SidebarSessions(props: { api: TuiPluginApi }) {
 
 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[]>([])
   const [query, setQuery] = createSignal("")
   const [hovered, setHovered] = createSignal<string>()
   const [searching, setSearching] = createSignal(false)
+  const [loadFailed, setLoadFailed] = createSignal(false)
   const preview = createTranscriptPreview(props.api)
   let disposeHoverSpace: (() => void) | undefined
   let disposeSearch: (() => void) | undefined
@@ -789,11 +1146,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) },
       ],
     })
   })
@@ -804,10 +1163,16 @@ function HomeSessions(props: { api: TuiPluginApi }) {
   onMount(() => {
     let alive = true
     const load = async () => {
+      props.refreshPins()
       try {
         const { entries: all } = await fetchEntries(props.api)
-        if (alive) setEntries(all)
-      } catch {}
+        if (alive) {
+          setEntries(all)
+          setLoadFailed(false)
+        }
+      } catch {
+        if (alive && entries().length === 0) setLoadFailed(true)
+      }
     }
     void load()
     const clock = setInterval(() => void load(), POLL_MS)
@@ -824,14 +1189,27 @@ 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 (
     <box flexDirection="column" width="100%" maxWidth={72} paddingLeft={1} paddingRight={1} paddingTop={1} gap={1}>
-      <Show when={entries().length > 0}>
+      <Show
+        when={entries().length > 0}
+        fallback={
+          <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"}
+            </text>
+          </box>
+        }
+      >
         <box flexDirection="row" justifyContent="space-between" gap={2}>
-          <text style={{ fg: theme().textMuted }}>Recent sessions</text>
+          <box flexDirection="row" gap={1}>
+            <text style={{ fg: theme().textMuted }}>Recent sessions</text>
+            <text style={{ fg: theme().textMuted }}>· ctrl+o for all</text>
+          </box>
           <box
             flexDirection="row"
             gap={1}
@@ -875,17 +1253,20 @@ function HomeSessions(props: { api: TuiPluginApi }) {
               <text flexShrink={0} style={{ fg: theme().textMuted }}>
                 ○
               </text>
-              <text flexGrow={1} flexShrink={1} overflow="hidden" wrapMode="none" style={{ fg: theme().text }}>
-                {truncate(entry.title, HOME_TITLE_WIDTH)}
-              </text>
+              <Highlighted
+                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>
@@ -893,19 +1274,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
 
@@ -922,25 +1324,34 @@ const tui: TuiPlugin = async (api) => {
       return
     }
 
+    const [allEntries, setAllEntries] = createSignal<Entry[]>(entries)
     const [previewText, setPreviewText] = createSignal("")
     const [showPreview, setShowPreview] = createSignal(false)
     const [query, setQuery] = createSignal("")
     const [cursor, setCursor] = createSignal(0)
+    const [scope, setScope] = createSignal<string>()
+    const [pendingDelete, setPendingDelete] = createSignal<Entry>()
     const [searchIndex, setSearchIndex] = createSignal<Map<string, string>>(new Map())
     const [indexProgress, setIndexProgress] = createSignal<IndexProgress>({
       indexed: 0,
       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 matched = entries.filter((entry) => {
+      const group = scope()
+      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()
         return haystack.includes(q)
@@ -951,7 +1362,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))
@@ -961,6 +1379,7 @@ const tui: TuiPlugin = async (api) => {
     const coverageLabel = createMemo(() => {
       const progress = indexProgress()
       const bits: string[] = []
+      if (scope()) bits.push(`scope ${scope()}`)
       if (progress.total > 0) {
         bits.push(
           progress.complete
@@ -968,13 +1387,18 @@ const tui: TuiPlugin = async (api) => {
             : `indexing transcripts ${progress.indexed}/${progress.total}`,
         )
       }
-      if (entriesResult.truncated) bits.push(`showing newest ${entries.length}`)
+      if (entriesResult.truncated) bits.push(`showing newest ${allEntries().length}`)
       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[]>(() => {
@@ -1043,8 +1467,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)
     })
 
@@ -1053,9 +1477,76 @@ const tui: TuiPlugin = async (api) => {
     const moveCursor = (delta: number) => {
       const count = selectableEntries().length
       if (count === 0) return
+      cancelDelete()
       setCursor((value) => Math.max(0, Math.min(count - 1, value + delta)))
     }
 
+    // Delete confirmation lives in its own layer, registered only while a row
+    // is armed, so y/n never shadow the search box's typing.
+    let disposeConfirm: (() => void) | undefined
+    const cancelDelete = () => {
+      disposeConfirm?.()
+      disposeConfirm = undefined
+      setPendingDelete(undefined)
+    }
+
+    const deleteEntry = async (entry: Entry) => {
+      cancelDelete()
+      try {
+        const result = await api.client.session.delete({
+          sessionID: entry.id,
+          directory: entry.dir || undefined,
+        })
+        if (result && "error" in result && result.error) throw result.error
+        const { entries: remaining } = await fetchEntries(api)
+        if (remaining.some((item) => item.id === entry.id)) {
+          setAllEntries(remaining)
+          api.ui.toast({ message: "Session was not deleted", variant: "error" })
+          return
+        }
+        setAllEntries(remaining)
+        api.ui.toast({ message: `Deleted "${truncate(entry.title, 40)}"`, variant: "info" })
+      } catch {
+        api.ui.toast({ message: "Could not delete session", variant: "error" })
+      }
+    }
+
+    const armDelete = (entry: Entry) => {
+      setPendingDelete(entry)
+      disposeConfirm?.()
+      disposeConfirm = api.keymap.registerLayer({
+        bindings: [
+          {
+            key: "y",
+            desc: "Confirm delete",
+            preventDefault: true,
+            cmd: () => {
+              const armed = pendingDelete()
+              if (armed) void deleteEntry(armed)
+            },
+          },
+          { key: "n", desc: "Cancel delete", preventDefault: true, cmd: cancelDelete },
+        ],
+      })
+    }
+
+    const forkEntry = async (entry: Entry) => {
+      try {
+        const result = await api.client.session.fork({
+          sessionID: entry.id,
+          directory: entry.dir || undefined,
+        })
+        const created = (result?.data ?? result) as Session | undefined
+        if (!created?.id) throw new Error("fork returned no session")
+        cleanup()
+        api.ui.dialog.clear()
+        api.route.navigate("session", { sessionID: created.id })
+        api.ui.toast({ message: `Forked "${truncate(entry.title, 40)}"`, variant: "info" })
+      } catch {
+        api.ui.toast({ message: "Could not fork session", variant: "error" })
+      }
+    }
+
     const choose = (entry?: Entry) => {
       const target = entry ?? selectableEntries()[cursor()]
       if (!target) return
@@ -1078,22 +1569,53 @@ 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: "escape",
-          desc: "Close",
+          key: "ctrl+x",
+          desc: "Delete session",
           preventDefault: true,
           cmd: () => {
-            cleanup()
-            api.ui.dialog.clear()
+            const target = selectableEntries()[cursor()]
+            if (!target) return
+            const armed = pendingDelete()
+            if (armed && armed.id === target.id) void deleteEntry(target)
+            else armDelete(target)
+          },
+        },
+        {
+          key: "ctrl+f",
+          desc: "Fork session",
+          preventDefault: true,
+          cmd: () => {
+            const target = selectableEntries()[cursor()]
+            if (target) void forkEntry(target)
           },
         },
         {
           key: "ctrl+g",
+          desc: "Toggle project scope",
+          preventDefault: true,
+          cmd: () => {
+            const target = selectableEntries()[cursor()]
+            if (scope()) setScope(undefined)
+            else if (target) setScope(target.group)
+          },
+        },
+        {
+          key: "escape",
           desc: "Close",
           preventDefault: true,
           cmd: () => {
-            cleanup()
-            api.ui.dialog.clear()
+            cancelDelete()
+            close()
           },
         },
       ],
@@ -1101,19 +1623,11 @@ const tui: TuiPlugin = async (api) => {
 
     const cleanup = () => {
       disposeNav()
+      disposeConfirm?.()
+      disposeConfirm = undefined
       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}>
@@ -1128,7 +1642,6 @@ const tui: TuiPlugin = async (api) => {
             </box>
             <box paddingTop={1}>
               <input
-                ref={(r) => (pickerInput = r)}
                 focused
                 placeholder="Search title, directory, transcript…"
                 value={query()}
@@ -1136,7 +1649,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") {
@@ -1165,7 +1678,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>
                   ) : (
@@ -1194,63 +1707,90 @@ const tui: TuiPlugin = async (api) => {
                           ●
                         </text>
                       </Show>
-                      <text
-                        flexGrow={1}
-                        flexShrink={1}
-                        overflow="hidden"
-                        wrapMode="none"
-                        attributes={
-                          row.entry.id === selectableEntries()[cursor()]?.id ? TextAttributes.BOLD : undefined
+                      <Highlighted
+                        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={
+                          row.entry.id === selectableEntries()[cursor()]?.id
+                            ? api.theme.current.selectedListItemText
+                            : api.theme.current.text
                         }
-                        style={{
-                          fg:
-                            row.entry.id === selectableEntries()[cursor()]?.id
-                              ? api.theme.current.selectedListItemText
-                              : api.theme.current.text,
-                        }}
-                      >
-                        {truncate(row.entry.title, 61)}
-                      </text>
+                        matchColor={
+                          row.entry.id === selectableEntries()[cursor()]?.id
+                            ? api.theme.current.selectedListItemText
+                            : api.theme.current.warning
+                        }
+                      />
                       <text
                         flexShrink={0}
                         style={{
                           fg:
-                            row.entry.id === selectableEntries()[cursor()]?.id
-                              ? api.theme.current.selectedListItemText
-                              : api.theme.current.textMuted,
+                            pendingDelete()?.id === row.entry.id
+                              ? api.theme.current.error
+                              : row.entry.id === selectableEntries()[cursor()]?.id
+                                ? api.theme.current.selectedListItemText
+                                : api.theme.current.textMuted,
                         }}
                       >
-                        {prettyDir(row.entry.dir, process.env.HOME ?? "")} · {ago(row.entry.updated)}
+                        {pendingDelete()?.id === row.entry.id
+                          ? "press y to delete"
+                          : `${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>
                   )
                 }
               </For>
+              <Show when={selectableEntries().length === 0}>
+                <box paddingLeft={4} paddingRight={4}>
+                  <text style={{ fg: api.theme.current.textMuted }}>
+                    {!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>
             </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}>
-                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>
           </Show>
           <box paddingLeft={4} paddingRight={4} flexShrink={0}>
-            <text style={{ fg: api.theme.current.textMuted }}>
-              ↑↓ navigate · enter open · space preview · esc close
+            <text
+              style={{
+                fg: pendingDelete() ? api.theme.current.warning : api.theme.current.textMuted,
+              }}
+            >
+              {pendingDelete()
+                ? `Delete "${truncate(pendingDelete()!.title, 40)}"? y confirm · n cancel`
+                : "↑↓ navigate · enter open · option+s/d pin · ctrl+x delete · ctrl+f fork · ctrl+g project · ctrl+p preview · esc close"}
             </text>
           </box>
         </box>