@webinson/peer 0.4.1 → 0.4.5

package/mod/peer-thread-mark/hooks/register.tsx

@@ -0,0 +1,685 @@
+import { atom, read, update } from 'claude-code'
+import type { EngineInterface, Register, RenderChildren, RenderNode } from 'claude-code'
+
+import type { AllMemories, AllQuery, Board, Memories, MemoryItem, MemoryRow, Thread } from '../types'
+import type { Shared } from '../types'
+
+// The peer CLI's hook writes ~/.peer/sessions/<session id> on `/peer` and removes it on `/peer stop`;
+// that file alone says whether this thread is shared, and in which workspace.
+const shared = atom({ plugin: 'peer-thread-mark', key: 'shared' } as const, null)
+
+// The threads pane: /peer-list opens it instead of answering with a blocked prompt, and it reloads while open.
+const PANE = 'peer-threads'
+const RELOAD_MS = 15_000
+// Change the tag when Board's fields change: it declines what an earlier version stored.
+const board = atom({ plugin: 'peer-thread-mark', key: 'board' } as const, null, { shape: 'board-1' })
+
+// The memory pane: /peer-thread lists what this thread saved to the person's own OpenViking, in sentences.
+const MEMORY_PANE = 'peer-thread-memories'
+const memories = atom({ plugin: 'peer-thread-mark', key: 'memories' } as const, null, { shape: 'memories-1' })
+// The one memory the pane shows open; every other stays a single line.
+const openMemory = atom({ plugin: 'peer-thread-mark', key: 'openMemory' } as const, null)
+
+// The search pane: /peer-all lists all of the person's own memories, newest first, and searches their text.
+const ALL_PANE = 'peer-all-memories'
+const all = atom({ plugin: 'peer-thread-mark', key: 'all' } as const, null, { shape: 'all-2' })
+// The one memory the search pane shows open, by its address.
+const openAll = atom({ plugin: 'peer-thread-mark', key: 'openAll' } as const, null)
+
+// A repository key without its host and owner: github.com-semans-peer reads as peer.
+const shortRepo = (repo: string) => (repo === 'global' ? 'everywhere' : repo.replace(/^[^-]+\.[a-z]+-[^-]+-/, '') || repo)
+
+// A time as the pane says it: today's as 13:42, this year's as 3 Nov, older ones with the year.
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+function when(at: string, today: Date) {
+  const date = new Date(at.replace(' ', 'T') + (at.length > 10 ? ':00Z' : ''))
+  if (!at || Number.isNaN(date.getTime())) return ''
+  if (date.toDateString() === today.toDateString()) return clock(date.toISOString())
+  const day = `${date.getDate()} ${MONTHS[date.getMonth()]}`
+  return date.getFullYear() === today.getFullYear() ? day : `${day} ${date.getFullYear()}`
+}
+function dayOf(at: string, today: Date) {
+  const date = new Date(at.replace(' ', 'T') + (at.length > 10 ? ':00Z' : ''))
+  if (!at || Number.isNaN(date.getTime())) return 'No date'
+  const yesterday = new Date(today.getTime() - 86_400_000)
+  if (date.toDateString() === today.toDateString()) return 'Today'
+  if (date.toDateString() === yesterday.toDateString()) return 'Yesterday'
+  return when(at.slice(0, 10), today)
+}
+
+// A matched line without the Markdown and transcript marks around it: what it says, not how it was stored.
+const snippet = (line: string) =>
+  line
+    .replace(/\*\*(user|assistant)[^*]*\*\*:\s*/gi, '')
+    .replace(/[*`#>]+/g, '')
+    .replace(/^\s*[-•]\s+/, '')
+    .replace(/\s+/g, ' ')
+    .trim()
+
+// The words searched for, without quotes or diacritics, to light them where they occur.
+const fold = (text: string) => text.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase()
+const searchWords = (text: string) =>
+  [...text.matchAll(/"([^"]+)"|(\S+)/g)].map(m => fold((m[1] ?? m[2] ?? '').trim())).filter(word => word.length > 1)
+
+// A line with each searched word in it drawn bold; folded the same way, so pamat lights "pamäť".
+function marked(Text: (props: { bold?: boolean; children?: RenderChildren }) => RenderNode, line: string, words: string[]) {
+  if (!words.length) return line
+  const folded = fold(line)
+  const parts: RenderChildren[] = []
+  let at = 0
+  while (at < line.length) {
+    let next = -1
+    let length = 0
+    for (const word of words) {
+      const found = folded.indexOf(word, at)
+      if (found >= 0 && (next < 0 || found < next)) [next, length] = [found, word.length]
+    }
+    if (next < 0) break
+    if (next > at) parts.push(line.slice(at, next))
+    parts.push(<Text key={`w-${next}`} bold>{line.slice(next, next + length)}</Text>)
+    at = next + length
+  }
+  parts.push(line.slice(at))
+  return parts
+}
+
+// `/peer-all [words] [here] [--newest | --oldest] [page N]`, as the CLI reads the same words.
+function asked(args: string): AllQuery {
+  const words = args.split(/\s+/).filter(Boolean)
+  const ask: AllQuery = { text: '', here: false, page: 1, sort: '' }
+  const text: string[] = []
+  for (let i = 0; i < words.length; i++) {
+    if (words[i] === 'here' || words[i] === '--here') ask.here = true
+    else if (words[i] === '--newest' || words[i] === '--oldest') ask.sort = words[i] === '--newest' ? 'new' : 'old'
+    else if (words[i] === 'page' && /^\d+$/.test(words[i + 1] ?? '')) ask.page = Math.max(1, Number(words[++i]))
+    else text.push(words[i]!)
+  }
+  return { ...ask, text: text.join(' ') }
+}
+
+// Typing searches once it pauses this long; Enter searches at once.
+const TYPING_PAUSE_MS = 350
+// Each search is numbered: an answer that comes after a newer search started is dropped, so a slow search for
+// what was typed earlier never covers the results for what is in the field now.
+let asking = 0
+let typing = 0
+
+async function loadAll($: EngineInterface, ask: AllQuery) {
+  const mine = ++asking
+  // The last page stays drawn while the next one loads.
+  const before = await read($, all)
+  await update($, all, () => ({ ask, loading: true, found: before?.found }))
+  let now: AllMemories
+  try {
+    const sort = { new: ['--newest'], old: ['--oldest'], '': [] }[ask.sort]
+    const words = [...ask.text.split(/\s+/).filter(Boolean), ...(ask.here ? ['--here'] : []), ...sort, 'page', String(ask.page)]
+    const { stdout, exitCode } = await $.process.run([...(await peerCli($)), 'all', '--json', ...words], {
+      cwd: (await $.env.get('PWD')) || undefined,
+      timeoutMs: 15_000,
+    })
+    const found = JSON.parse(stdout.trim().split('\n').pop() || '')
+    if (exitCode !== 0 || typeof found?.connected !== 'boolean') throw new Error('`peer all --json` did not answer; update peer')
+    now = { ask, loading: false, found }
+  } catch (error) {
+    now = { ask, loading: false, error: error instanceof Error ? error.message : String(error) }
+  }
+  if (mine === asking) await update($, all, () => now)
+}
+
+// The field's text as it is typed: kept at once, so the field shows it, and searched when the typing pauses.
+async function typed($: EngineInterface, ask: AllQuery) {
+  const mine = ++typing
+  await update($, all, before => (before ? { ...before, ask } : before))
+  await $.clock.sleep(TYPING_PAUSE_MS)
+  if (mine === typing) await loadAll($, ask)
+}
+
+async function peerHome($: EngineInterface) {
+  return (await $.env.get('PEER_HOME')) || `${await $.env.get('HOME')}/.peer`
+}
+
+async function refresh($: EngineInterface) {
+  const home = await peerHome($)
+  const before = await read($, shared)
+  let now: Shared
+  try {
+    const marker = JSON.parse(await $.fs.read(`${home}/sessions/${await $.session.id()}`))
+    now = { workspace: String(marker.workspace ?? 'Peer'), isShared: true }
+  } catch {
+    // Not shared, or not readable: keep the band and the workspace it last showed, so stop and start differ
+    // only in state. A thread never shared on a computer without Peer stays without a band.
+    now = before ? { workspace: before.workspace, isShared: false } : null
+  }
+  if (before?.workspace !== now?.workspace || before?.isShared !== now?.isShared) {
+    await update($, shared, () => now)
+  }
+}
+
+// The prompt hook exactly as `peer install` put it in Claude Code's settings, split into its arguments.
+async function promptHook($: EngineInterface): Promise<string[] | undefined> {
+  const claude = (await $.env.get('CLAUDE_CONFIG_DIR')) || `${await $.env.get('HOME')}/.claude`
+  const settings = JSON.parse(await $.fs.read(`${claude}/settings.json`))
+  for (const group of settings.hooks?.UserPromptSubmit ?? []) {
+    for (const hook of group.hooks ?? []) {
+      const command = String(hook.command ?? '')
+      if (!command.includes('# peer-hook') || !/\bhook prompt\b/.test(command)) continue
+      return [...(command.split('#')[0] ?? '').matchAll(/"([^"]*)"|(\S+)/g)].map(m => m[1] ?? m[2] ?? '')
+    }
+  }
+  return undefined
+}
+
+// The workspace's threads from the same CLI the prompt hook runs, `peer list --json`.
+async function load($: EngineInterface) {
+  let now: Board
+  try {
+    const { stdout, exitCode } = await $.process.run([...(await peerCli($)), 'list', '--json'], { timeoutMs: 10_000 })
+    const list = JSON.parse(stdout.trim().split('\n').pop() || '')
+    if (exitCode !== 0 || !Array.isArray(list?.people)) throw new Error('`peer list --json` did not answer; update peer')
+    now = { ...list, loadedAt: await $.clock.now() }
+  } catch (error) {
+    now = { error: error instanceof Error ? error.message : String(error), loadedAt: await $.clock.now() }
+  }
+  await update($, board, () => now)
+}
+
+// The CLI the prompt hook runs (node and peer.mjs), without its `hook prompt` arguments.
+async function peerCli($: EngineInterface) {
+  const argv = await promptHook($)
+  if (!argv) throw new Error('no prompt hook in Claude Code settings; run `peer install`')
+  return argv.slice(0, argv.indexOf('hook'))
+}
+
+async function loadMemories($: EngineInterface) {
+  let now: Memories
+  try {
+    const { stdout, exitCode } = await $.process.run([...(await peerCli($)), 'thread', '--json', await $.session.id()], { timeoutMs: 15_000 })
+    const found = JSON.parse(stdout.trim().split('\n').pop() || '')
+    if (exitCode !== 0 || typeof found?.connected !== 'boolean') throw new Error('`peer thread --json` did not answer; update peer')
+    now = { ...found, loadedAt: await $.clock.now() }
+  } catch (error) {
+    now = { error: error instanceof Error ? error.message : String(error), loadedAt: await $.clock.now() }
+  }
+  await update($, memories, () => now)
+}
+
+// One row of the memory pane. New memories read as their sentence under a name; updates of one memory across
+// saves are one row, newest first, saying what was added last.
+type Entry = { id: string; title: string; when: string; lines: string[] }
+
+const titled = (name: string) => name.charAt(0).toUpperCase() + name.slice(1)
+const KIND: Record<string, string> = { preferences: 'your preference', profile: 'your profile' }
+
+function sections(saves: { at: string; items: MemoryItem[] }[]) {
+  const check: Entry[] = []
+  const added: Entry[] = []
+  const removed: Entry[] = []
+  const updated = new Map<string, Entry & { times: number }>()
+  for (const save of saves) {
+    save.items.forEach((item, index) => {
+      const id = `${save.at}-${index}`
+      const when = clock(save.at)
+      // A memory that holds Claude Code's text is listed once, where it asks for a look.
+      if (item.systemText) {
+        check.push({ id, title: titled(item.name), when, lines: item.lines })
+        return
+      }
+      if (item.change === 'updated') {
+        const name = KIND[item.type] ? `${titled(KIND[item.type]!)}: ${item.name}` : titled(item.name)
+        const known = updated.get(name)
+        if (known) known.times += 1
+        else updated.set(name, { id, title: name, when, lines: item.lines, times: 1 })
+      } else {
+        const entry = { id, title: titled(item.name), when, lines: item.lines }
+        ;(item.change === 'removed' ? removed : added).push(entry)
+      }
+    })
+  }
+  const merged = [...updated.values()].map(entry => ({ ...entry, when: entry.times > 1 ? `${entry.when}, ${entry.times}×` : entry.when }))
+  return { check, added, updated: merged, removed }
+}
+
+const clock = (at: string) => {
+  const date = new Date(at)
+  return Number.isNaN(date.getTime()) ? at : `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+}
+
+function ago(at: string | null | undefined, now: number) {
+  const mins = Math.max(0, Math.round((now - Date.parse(at ?? '')) / 60_000))
+  if (!Number.isFinite(mins) || mins < 1) return 'just now'
+  if (mins < 60) return `${mins} min`
+  return `${Math.floor(mins / 60)} h ${mins % 60} min`
+}
+
+// The dot's color and the words beside it, the CLI's list in a glance.
+function state(thread: Thread, now: number): { color: 'success' | 'warning' | 'inactive'; text: string } {
+  if (thread.status === 'active') return thread.working ? { color: 'success', text: 'working' } : { color: 'warning', text: 'waits for its person' }
+  if (thread.status === 'silent') return { color: 'inactive', text: `silent ${ago(thread.seenAt, now)}` }
+  return { color: 'inactive', text: `stopped ${ago(thread.stoppedAt, now)} ago` }
+}
+
+// Teammates' text, one line: a branch name cannot draw anything else.
+const plain = (text: unknown) => String(text ?? '').replace(/[\u0000-\u001f\u007f-\u009f]/g, '').slice(0, 80)
+
+// One project per repository key, as the CLI groups them; each holds its people and their threads.
+function projects(people: { email: string; threads: Thread[] }[]) {
+  const out = new Map<string, { name: string; repoKey?: string | null; people: Map<string, Thread[]> }>()
+  for (const person of people) {
+    for (const thread of person.threads) {
+      const key = thread.repoKey || `name:${thread.repository || 'unknown'}`
+      if (!out.has(key)) out.set(key, { name: thread.repository || 'unknown', repoKey: thread.repoKey, people: new Map() })
+      const mine = out.get(key)!.people
+      mine.set(person.email, [...(mine.get(person.email) ?? []), thread])
+    }
+  }
+  return [...out.values()]
+}
+
+// A press does what typing the command does: the CLI's own hook shares or stops the thread and says so.
+// (A plugin may not submit a prompt that starts with `/`, so the hook is run directly.)
+async function send($: EngineInterface, prompt: string) {
+  try {
+    const argv = await promptHook($)
+    if (!argv) {
+      $.ui.toast('Peer: no prompt hook in Claude Code settings; run `peer install`')
+      return
+    }
+    const input = { session_id: await $.session.id(), cwd: await $.env.get('PWD'), prompt }
+    const { stdout } = await $.process.run(argv, { stdin: JSON.stringify(input), timeoutMs: 10_000 })
+    const reason = JSON.parse(stdout.trim().split('\n').pop() || '{}').reason
+    if (reason) $.ui.toast(String(reason))
+  } catch (error) {
+    $.ui.toast(`Peer: ${error instanceof Error ? error.message : String(error)}`)
+  }
+  await refresh($)
+}
+
+export const register: Register = on => {
+  // A session that loaded the mod after it started (/reload-plugins, an install) has no state yet: the first
+  // drawing looks once, so the band shows without waiting for the next prompt.
+  let looked = false
+  let reloading: { cancel: () => void } | undefined
+  let memoryOpen = false
+  const stopReloading = () => {
+    reloading?.cancel()
+    reloading = undefined
+  }
+
+  on('session.start', async ($, e, next) => {
+    const result = await next(e)
+    await $.command.register({ name: 'peer-thread', description: "Show what this thread saved to your memory, in a pane" }).catch(() => {})
+    // Nothing under the prompt: clear the line an earlier version pinned there.
+    $.ui.status(undefined)
+    await refresh($).catch(() => {})
+    return result
+  })
+
+  // The CLI's prompt hook writes or removes the marker while a typed command goes in, so look after it.
+  on('prompt.submit', async ($, e, next) => {
+    const result = await next(e)
+    await refresh($).catch(() => {})
+    return result
+  })
+
+  on('turn.complete', async ($, e, next) => {
+    await refresh($).catch(() => {})
+    // OpenViking saves a thread's memories when a turn ends past its threshold, so the open pane looks again.
+    if (memoryOpen) await loadMemories($).catch(() => {})
+    return next(e)
+  })
+
+  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
+    if (!looked) {
+      looked = true
+      await refresh($).catch(() => {})
+    }
+    const now = await read($, shared)
+    if (e.props.hasSurvey || now === null) return next(e)
+
+    const { Box, Button, Text } = $.ui.resolve(e)
+    // One band in both states: the label's own surface says the state (accent when shared, gray when not),
+    // and the one control changes in place, stop to start and back.
+    return (
+      <Box>
+        <Text backgroundColor={now.isShared ? 'suggestion' : 'inactive'} color="inverseText" bold>
+          {' Peer '}
+        </Text>
+        <Text bold={now.isShared} dimColor={!now.isShared}>{now.workspace ? ` ${now.workspace}  ` : '  '}</Text>
+        <Button
+          key="toggle"
+          label={now.isShared ? '/peer stop' : '/peer start'}
+          plain
+          dimColor
+          onPress={() => send($, now.isShared ? '/peer stop' : '/peer')}
+        />
+      </Box>
+    )
+  })
+
+  // /peer-list opens the pane and runs no command: the prompt never reaches the CLI's hook, so Claude Code shows
+  // no "hook blocked your prompt" card. Where no surface can seat a pane, the command runs as before.
+  on('command.run', { command: 'peer-list' }, async ($, e, next) => {
+    await load($)
+    const opened = await $.ui.open({ id: PANE, title: 'Peer' })
+    if (!opened.isPlaced) return next(e)
+    stopReloading()
+    reloading = $.clock.every(RELOAD_MS, () => void load($))
+    return { text: 'Peer: the shared threads are in the Peer pane; it reloads every 15 s.' }
+  })
+
+  on('command.run', { command: 'peer-thread' }, async ($, e, next) => {
+    await loadMemories($)
+    const opened = await $.ui.open({ id: MEMORY_PANE, title: 'This thread' })
+    memoryOpen = opened.isPlaced
+    return { text: opened.isPlaced ? "Peer: this thread's memories are in the pane." : 'Peer: no room for a pane here; `peer thread <session id>` prints the same list.' }
+  })
+
+  // /peer-all opens the search pane on the words typed after it; without room for a pane, the hook answers.
+  on('command.run', { command: 'peer-all' }, async ($, e, next) => {
+    await loadAll($, asked(e.args))
+    const opened = await $.ui.open({ id: ALL_PANE, title: 'Your memory' })
+    if (!opened.isPlaced) return next(e)
+    return { text: 'Peer: your memories are in the pane; type there to search them.' }
+  })
+
+  on('ui.close', async ($, e, next) => {
+    if (e.id === MEMORY_PANE) memoryOpen = false
+    if (e.id === PANE) stopReloading()
+    return next(e)
+  })
+
+  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
+    const { Box, Button, Text } = $.ui.resolve(e)
+    const now = await read($, board)
+    const at = await $.clock.now()
+    const reload = <Button key="reload" label="Reload" plain dimColor onPress={() => void load($)} />
+    if (now === null) return <Text dimColor>Loading…</Text>
+    if ('error' in now) {
+      return (
+        <Box flexDirection="column">
+          <Text color="error">Peer: the list did not load ({now.error})</Text>
+          {reload}
+        </Box>
+      )
+    }
+    const groups = projects(now.people)
+    return (
+      <Box flexDirection="column">
+        <Box>
+          <Text bold>{plain(now.workspace)}</Text>
+          <Text dimColor>{`  loaded ${ago(new Date(now.loadedAt).toISOString(), at)} ago  `}</Text>
+          {reload}
+        </Box>
+        {groups.length === 0 && (
+          <Text dimColor>Nobody shares a thread right now. Only threads where someone typed /peer show here.</Text>
+        )}
+        {groups.map(project => (
+          <Box key={project.repoKey ?? project.name} flexDirection="column" marginTop={1}>
+            <Text bold>
+              {plain(project.name)}
+              <Text dimColor>{project.repoKey ? `  ${plain(project.repoKey)}` : '  an older Peer, no repository key'}</Text>
+            </Text>
+            {[...project.people].map(([email, threads]) => (
+              <Box key={email} flexDirection="column">
+                <Text dimColor>{`${plain(email)}${email === now.you ? ' (you)' : ''}`}</Text>
+                {threads.map(thread => {
+                  const { color, text } = state(thread, at)
+                  return (
+                    <Text key={thread.session}>
+                      <Text color={color}>{thread.status === 'stopped' ? ' ■ ' : ' ● '}</Text>
+                      {plain(thread.branch) || '(no branch)'}
+                      <Text dimColor>{`  ${text}`}</Text>
+                    </Text>
+                  )
+                })}
+              </Box>
+            ))}
+          </Box>
+        ))}
+        <Box marginTop={1}>
+          <Text dimColor>
+            {`Silent after ${now.silentAfterMins} min without a signal, stopped after ${now.stoppedAfterMins / 60} h; stopped threads stay ${now.stoppedShownHours} h.`}
+          </Text>
+        </Box>
+      </Box>
+    )
+  })
+
+  on('ui.render', { component: 'Pane', requestId: ALL_PANE }, async ($, e) => {
+    const elements = $.ui.resolve(e)
+    const { Box, Button, Text } = elements
+    const now = await read($, all)
+    const open = await read($, openAll)
+    const today = new Date(await $.clock.now())
+    const ask: AllQuery = now?.ask ?? { text: '', here: false, page: 1, sort: '' }
+    const go = (change: Partial<AllQuery>) => void loadAll($, { ...ask, page: 1, ...change })
+
+    // Mobile draws no Input: the list and its pages still show, the words come from /peer-all.
+    const search =
+      'Input' in elements ? (
+        <elements.Input
+          key="q"
+          placeholder='Search: words in any order, "a phrase"'
+          value={ask.text}
+          submitLabel="search"
+          autoFocus
+          onInput={value => void typed($, { ...ask, page: 1, text: value.trim() })}
+          onSubmit={value => {
+            typing += 1
+            go({ text: value.trim() })
+          }}
+        />
+      ) : (
+        ask.text && <Text dimColor>{`"${ask.text}"`}</Text>
+      )
+    // The switches read as words, lit when on; one press each, the time one goes unsorted, newest, oldest.
+    const switches = (
+      <Box gap={2}>
+        <Button key="here" label="This repository" plain dimColor={!ask.here} onPress={() => go({ here: !ask.here })} />
+        <Button
+          key="sort"
+          label={{ '': 'Time', new: 'Newest ↓', old: 'Oldest ↑' }[ask.sort]}
+          plain
+          dimColor={!ask.sort}
+          onPress={() => go({ sort: ({ '': 'new', new: 'old', old: '' } as const)[ask.sort] })}
+        />
+        {ask.text ? <Button key="clear" label="Clear" plain dimColor onPress={() => go({ text: '' })} /> : null}
+      </Box>
+    )
+    const found = now?.found
+    const count = found?.connected ? (found.total === 1 ? '1 memory' : `${found.total.toLocaleString('en')} memories`) : ''
+    const header = (
+      <Box flexDirection="column" gap={1}>
+        <Box justifyContent="space-between" gap={1}>
+          <Text bold>Your memory</Text>
+          <Text dimColor tabular size="footnote">{now?.loading ? 'loading…' : count}</Text>
+        </Box>
+        {search}
+        {switches}
+      </Box>
+    )
+    const status = (body: RenderChildren) => (
+      <Box flexDirection="column" gap={1}>
+        {header}
+        {body}
+      </Box>
+    )
+    if (now === null || !found) {
+      return status(now?.error ? <Text color="error">{`Peer: your memories did not load (${now.error})`}</Text> : <Text dimColor>Loading…</Text>)
+    }
+    if (now.error) return status(<Text color="error">{`Peer: your memories did not load (${now.error})`}</Text>)
+    if (!found.connected) return status(<Text dimColor>{`No personal OpenViking here (${found.reason}).`}</Text>)
+    if (found.total === 0) return status(<Text dimColor>{ask.text ? 'Nothing has those words.' : 'No memories yet.'}</Text>)
+
+    const words = searchWords(ask.text)
+    // One line per memory: its name left, where and when right; under it, when searching, the line that matched.
+    // A press opens it in place with every matching line and Copy; one is open at a time.
+    const row = (memory: MemoryRow) => {
+      const id = memory.uri
+      const isOpen = open === id
+      const where = [ask.here ? '' : shortRepo(memory.repo), when(memory.at, today)].filter(Boolean).join(' · ')
+      const lines = memory.lines.map(snippet).filter(Boolean)
+      return (
+        <Box key={id} flexDirection="column">
+          <Box justifyContent="space-between" gap={1}>
+            <Button key={id} plain onPress={() => void update($, openAll, was => (was === id ? null : id))}>
+              <Text bold={isOpen} wrap="truncate-end">
+                {titled(memory.title)}
+              </Text>
+            </Button>
+            <Text dimColor tabular size="footnote">{where}</Text>
+          </Box>
+          {!isOpen && lines[0] && (
+            <Text dimColor size="footnote" wrap="truncate-end">
+              {marked(Text, lines[0], words)}
+            </Text>
+          )}
+          {isOpen && (
+            <Box flexDirection="column" paddingLeft={2} marginBottom={1}>
+              {lines.map((line, i) => (
+                <Text key={`${id}-${i}`} dimColor wrap="wrap">
+                  {marked(Text, line, words)}
+                </Text>
+              ))}
+              <Text dimColor size="footnote">{`${memory.type} · ${memory.repo === 'global' ? 'every repository' : memory.repo}`}</Text>
+              <Button
+                key={`${id}-copy`}
+                label="Copy address"
+                plain
+                dimColor
+                onPress={press => {
+                  void $.ui.copy({ text: memory.uri, surface: press.surface })
+                  $.ui.toast('Copied')
+                }}
+              />
+            </Box>
+          )}
+        </Box>
+      )
+    }
+    // Ordered by time, the page falls into days, each with its count; unordered, it is one list.
+    const days: { day: string; rows: MemoryRow[] }[] = []
+    for (const memory of found.rows) {
+      const day = ask.sort ? dayOf(memory.at, today) : ''
+      if (days.at(-1)?.day !== day) days.push({ day, rows: [] })
+      days.at(-1)!.rows.push(memory)
+    }
+    return (
+      <Box flexDirection="column" gap={1}>
+        {header}
+        {days.map(group => (
+          <Box key={`d-${group.day || 'all'}`} flexDirection="column">
+            {group.day && (
+              <Box justifyContent="space-between">
+                <Text dimColor size="caption">{group.day}</Text>
+                <Text dimColor tabular size="caption">{String(group.rows.length)}</Text>
+              </Box>
+            )}
+            {group.rows.map(row)}
+          </Box>
+        ))}
+        {found.pages > 1 && (
+          <Box justifyContent="space-between" gap={1}>
+            {found.page > 1 ? (
+              <Button key="prev" label="‹ Newer" plain dimColor onPress={() => void loadAll($, { ...ask, page: found.page - 1 })} />
+            ) : (
+              <Text> </Text>
+            )}
+            <Text dimColor tabular size="footnote">{`${found.page} / ${found.pages}`}</Text>
+            {found.page < found.pages ? (
+              <Button key="next" label="Older ›" plain dimColor onPress={() => void loadAll($, { ...ask, page: found.page + 1 })} />
+            ) : (
+              <Text> </Text>
+            )}
+          </Box>
+        )}
+        <Text dimColor size="caption">{`Edit or delete in OpenViking Studio, ${found.url}/studio/`}</Text>
+      </Box>
+    )
+  })
+
+  on('ui.render', { component: 'Pane', requestId: MEMORY_PANE }, async ($, e) => {
+    const { Box, Button, Text } = $.ui.resolve(e)
+    const now = await read($, memories)
+    const open = await read($, openMemory)
+    const reload = <Button key="reload" label="Reload" plain dimColor onPress={() => void loadMemories($)} />
+    if (now === null) return <Text dimColor>Loading…</Text>
+    if ('error' in now) {
+      return (
+        <Box flexDirection="column">
+          <Text color="error">Peer: the memories did not load ({now.error})</Text>
+          {reload}
+        </Box>
+      )
+    }
+    if (!now.connected) return <Text dimColor>{`No personal OpenViking here (${now.reason}).`}</Text>
+
+    const groups = sections(now.saves)
+    const total = groups.check.length + groups.added.length + groups.updated.length + groups.removed.length
+
+    // A list of one-line rows, name left and time right; the pressed one opens under itself with its text and Copy.
+    const row = (entry: Entry, section: string, isCheck: boolean) => {
+      const id = `${section}-${entry.id}`
+      const isOpen = open === id
+      return (
+        <Box key={id} flexDirection="column">
+          <Box justifyContent="space-between" gap={1}>
+            <Button key={id} plain onPress={() => void update($, openMemory, was => (was === id ? null : id))}>
+              <Text color={isCheck ? 'warning' : undefined} bold={isOpen} wrap="truncate-end">
+                {entry.title}
+              </Text>
+            </Button>
+            <Text dimColor tabular size="footnote">
+              {entry.when}
+            </Text>
+          </Box>
+          {isOpen && (
+            <Box flexDirection="column" paddingLeft={2} marginBottom={1}>
+              {isCheck && <Text color="warning" size="footnote">{"Holds Claude Code's own text, not yours."}</Text>}
+              <Text dimColor wrap="wrap">
+                {entry.lines.join(' ') || '(no text)'}
+              </Text>
+              <Button
+                key={`${id}-copy`}
+                label="Copy"
+                plain
+                dimColor
+                onPress={press => {
+                  void $.ui.copy({ text: [entry.title, ...entry.lines].join('\n'), surface: press.surface })
+                  $.ui.toast('Copied')
+                }}
+              />
+            </Box>
+          )}
+        </Box>
+      )
+    }
+    const section = (title: string, entries: Entry[], isCheck = false) =>
+      entries.length > 0 && (
+        <Box key={title} flexDirection="column" marginTop={1}>
+          <Box justifyContent="space-between">
+            <Text dimColor size="caption">{title}</Text>
+            <Text dimColor tabular size="caption">{String(entries.length)}</Text>
+          </Box>
+          {entries.map(entry => row(entry, title, isCheck))}
+        </Box>
+      )
+
+    return (
+      <Box flexDirection="column">
+        <Box justifyContent="space-between" gap={1}>
+          <Text bold>This thread</Text>
+          <Box gap={1}>
+            <Text dimColor size="footnote">{total === 1 ? '1 memory' : `${total} memories`}</Text>
+            {reload}
+          </Box>
+        </Box>
+        {total === 0 && <Text dimColor>Nothing saved yet. OpenViking saves after longer turns.</Text>}
+        {section('Check', groups.check, true)}
+        {section('New', groups.added)}
+        {section('Updated', groups.updated)}
+        {section('Forgotten', groups.removed)}
+      </Box>
+    )
+  })
+}