dsh-code 1.2.0 → 1.4.0

package/src/{kernel-panels.ts → panels/kernel-panels.ts}

@@ -1,26 +1,30 @@
 /** Bounded, composer-safe panels for preset, session, and plugin kernel views. */
 
-import { createElement, useEffect, useMemo, useRef, useState, type ReactElement } from 'react'
+import { createElement, useCallback, useEffect, useMemo, useRef, useState, type ReactElement } from 'react'
 import { Box, Text, useInput, useStdout } from 'ink'
-import type { ModelDirectory, ModelRow } from './models.ts'
-import type { SubagentRow } from './subagents.ts'
-import type { ScheduleRow } from './render/projection.ts'
-import type { PermissionRow } from './permissions.ts'
-import type { PresetRow } from './presets.ts'
-import type { PluginRow } from './plugin-inventory.ts'
-import type { SessionDirectoryOptions, SessionRow } from './session-directory.ts'
-import { formatRelativeTime } from './session-directory.ts'
-import type { ReviewBranch, ReviewCommit, ReviewSelection } from './git-workflow.ts'
-import { panelViewport, revealRow } from './render/inspector.ts'
-import { markdownLines, textLines, type LineStyle, type StyledLine } from './render/lines.ts'
-import { usageLines, type UsageView } from './render/usage.ts'
-import { deleteLastGrapheme } from './render/editor.ts'
-import { stripPasteMarkers } from './keyboard.ts'
-import { DEFAULT_STATUSLINE_ITEMS, STATUS_ITEMS, type StatusItemId } from './render/status.ts'
-import { singleLineText, truncateColumns } from './render/text.ts'
-import { panelAccent } from './panel-accent.ts'
-import { t } from './i18n.ts'
-import { getPalette, inkColor } from './theme.ts'
+import type { ModelDirectory, ModelRow } from '../models.ts'
+import type { SubagentRow } from '../session/subagents.ts'
+import type { SearchRow } from '../runner/search-rows.ts'
+export type { SearchRow } from '../runner/search-rows.ts'
+import type { ScheduleRow } from '../render/projection.ts'
+import type { PermissionRow } from '../permissions.ts'
+import type { PresetRow } from '../presets.ts'
+import type { PluginRow } from '../plugin-inventory.ts'
+import type { SessionDirectoryOptions, SessionRow } from '../session/session-directory.ts'
+import { formatRelativeTime, matchSessionRow } from '../session/session-directory.ts'
+import type { ReviewBranch, ReviewCommit, ReviewSelection } from '../git-workflow.ts'
+import { expandedDocumentViewport, panelViewport, revealRow } from '../render/inspector.ts'
+import { markdownLines, textLines, type LineStyle, type StyledLine } from '../render/lines.ts'
+import { usageLines, type UsageView } from '../render/usage.ts'
+import { deleteLastGrapheme } from '../render/editor.ts'
+import { stripPasteMarkers } from '../keyboard.ts'
+import { DEFAULT_STATUSLINE_ITEMS, localizedStatusItems, type StatusItemId } from '../render/status.ts'
+import { singleLineText, truncateColumns } from '../render/text.ts'
+import { panelAccent } from '../ui/panel-accent.ts'
+import { editQuery } from '../ui/query-editor.ts'
+export { editQuery } from '../ui/query-editor.ts'
+import { t } from '../i18n.ts'
+import { getPalette, inkColor } from '../theme.ts'
 
 interface ListFrameProps {
   readonly title: string
@@ -96,18 +100,6 @@ function ListFrame(props: ListFrameProps): ReactElement {
   )
 }
 
-/**
- * Apply one keystroke to a panel search query. IME commits arrive as one
- * multi-character chunk, so the whole printable run is appended; paste
- * markers are stripped and control-laden chunks are ignored.
- */
-export function editQuery(query: string, input: string, key: { backspace?: boolean; delete?: boolean }): string | undefined {
-  if (key.backspace || key.delete) return deleteLastGrapheme(query)
-  const text = stripPasteMarkers(input)
-  if (text !== '' && !/[\u0000-\u001f\u007f]/u.test(text)) return query + text
-  return undefined
-}
-
 export function ModePanel({ current, load, select, close }: {
   current: string
   load: () => Promise<readonly PresetRow[]>
@@ -119,13 +111,13 @@ export function ModePanel({ current, load, select, close }: {
   const [cursor, setCursor] = useState(0)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string>()
-  const refresh = (): void => {
+  const refresh = useCallback((): void => {
     setLoading(true); setError(undefined)
     Promise.resolve().then(load).then(value => { setRows(value); setLoading(false) }, reason => {
       setError(reason instanceof Error ? reason.message : String(reason)); setLoading(false)
     })
-  }
-  useEffect(refresh, [])
+  }, [load])
+  useEffect(refresh, [refresh])
   const visible = useMemo(() => rows.filter(row => `${row.id} ${row.name ?? ''} ${row.description ?? ''}`.toLowerCase().includes(query.toLowerCase())), [rows, query])
   useEffect(() => setCursor(value => Math.min(value, Math.max(0, visible.length - 1))), [visible.length])
   useInput((input, key) => {
@@ -160,13 +152,13 @@ export function PermissionPanel({ current, load, select, close }: {
   const [cursor, setCursor] = useState(0)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string>()
-  const refresh = (): void => {
+  const refresh = useCallback((): void => {
     setLoading(true); setError(undefined)
     Promise.resolve().then(load).then(value => { setRows(value); setLoading(false) }, reason => {
       setError(reason instanceof Error ? reason.message : String(reason)); setLoading(false)
     })
-  }
-  useEffect(refresh, [])
+  }, [load])
+  useEffect(refresh, [refresh])
   const visible = useMemo(() => rows.filter(row => `${row.id} ${row.description ?? ''}`.toLowerCase().includes(query.toLowerCase())), [rows, query])
   useEffect(() => setCursor(value => Math.min(value, Math.max(0, visible.length - 1))), [visible.length])
   useInput((input, key) => {
@@ -192,7 +184,8 @@ export function PluginPanel({ load, close, initialQuery = '' }: { load: () => re
   const [query, setQuery] = useState(initialQuery)
   const [cursor, setCursor] = useState(0)
   const [expanded, setExpanded] = useState(false)
-  const rows = useMemo(() => load().filter(row => `${row.entryId} ${row.moduleName} ${row.phase ?? ''}`.toLowerCase().includes(query.toLowerCase())), [epoch, query])
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- epoch is the panel's explicit registry refresh trigger
+  const rows = useMemo(() => load().filter(row => `${row.entryId} ${row.moduleName} ${row.phase ?? ''}`.toLowerCase().includes(query.toLowerCase())), [epoch, load, query])
   useEffect(() => setCursor(value => Math.min(value, Math.max(0, rows.length - 1))), [rows.length])
   useInput((input, key) => {
     if (key.escape) return close()
@@ -283,7 +276,7 @@ export function JobsPanel({ load, close }: { load: () => readonly JobRow[]; clos
   })
 }
 
-export function ResumePanel({ currentCwd, load, readTranscript, select, requestDelete, deleteConfirmId, reloadToken = 0, deleteMode = false, close }: {
+export function ResumePanel({ currentCwd, load, readTranscript, select, requestDelete, deleteConfirmId, reloadToken = 0, deleteMode = false, presetId, close }: {
   currentCwd: string
   load: (options: SessionDirectoryOptions, signal?: AbortSignal) => Promise<readonly SessionRow[]>
   readTranscript: (id: string, signal?: AbortSignal) => Promise<string>
@@ -296,12 +289,20 @@ export function ResumePanel({ currentCwd, load, readTranscript, select, requestD
   reloadToken?: number
   /** Opened via /delete: hint-first delete mode. */
   deleteMode?: boolean
+  /** `/delete <id>` argument to resolve after the listing loads. */
+  presetId?: string
   close: () => void
 }): ReactElement {
   // Codex resume-picker default: the CURRENT directory's root sessions; the
   // cwd filter widens to all only on request (the old default leaked every
   // directory's sessions into what read as a current-directory view).
-  const [options, setOptions] = useState<SessionDirectoryOptions>({ sessions: 'roots', cwd: 'current', sort: 'newest', currentCwd, query: '' })
+  const [options, setOptions] = useState<SessionDirectoryOptions>({
+    sessions: presetId === undefined || presetId === '' ? 'roots' : 'all',
+    cwd: presetId === undefined || presetId === '' ? 'current' : 'all',
+    sort: 'newest',
+    currentCwd,
+    query: '',
+  })
   const [focus, setFocus] = useState(0)
   const [density, setDensity] = useState<'comfortable' | 'dense'>('comfortable')
   const [rows, setRows] = useState<readonly SessionRow[]>([])
@@ -313,6 +314,7 @@ export function ResumePanel({ currentCwd, load, readTranscript, select, requestD
   /** Ctrl+F-gated search: typing filters only while searching (codex). */
   const [searching, setSearching] = useState(false)
   /** Reference clock pinned per row render, so relative times never drift mid-list. */
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally re-pin when the listing or its options change
   const now = useMemo(() => Date.now(), [rows, options])
   const transcriptLoad = useRef<AbortController>()
   useEffect(() => () => transcriptLoad.current?.abort(), [])
@@ -325,8 +327,22 @@ export function ResumePanel({ currentCwd, load, readTranscript, select, requestD
       if (!controller.signal.aborted) { setError(reason instanceof Error ? reason.message : String(reason)); setLoading(false) }
     })
     return () => controller.abort()
-  }, [options, reloadToken])
+  }, [load, options, reloadToken])
   useEffect(() => setCursor(value => Math.min(value, Math.max(0, rows.length - 1))), [rows.length])
+  const presetArmed = useRef(false)
+  useEffect(() => {
+    if (presetArmed.current || presetId === undefined || presetId === '' || rows.length === 0 || requestDelete === undefined) return
+    try {
+      const row = matchSessionRow(rows, presetId)
+      presetArmed.current = true
+      const index = rows.findIndex(candidate => candidate.id === row.id)
+      if (index >= 0) setCursor(index)
+      requestDelete(row)
+    } catch (reason: unknown) {
+      presetArmed.current = true
+      setError(reason instanceof Error ? reason.message : String(reason))
+    }
+  }, [rows, presetId, requestDelete])
   const cycle = (): void => {
     if (focus === 3) {
       setDensity(current => current === 'comfortable' ? 'dense' : 'comfortable')
@@ -363,7 +379,6 @@ export function ResumePanel({ currentCwd, load, readTranscript, select, requestD
     if (key.pageDown) return setCursor(value => Math.min(rows.length - 1, value + 8))
     if (input === 'g') return setCursor(0)
     if (input === 'G') return setCursor(Math.max(0, rows.length - 1))
-    if (input === 'd' && rows[cursor] !== undefined && requestDelete !== undefined) return requestDelete(rows[cursor])
     if (input === 'e' && rows[cursor] !== undefined) {
       return setExpanded(value => value === rows[cursor].id ? undefined : rows[cursor].id)
     }
@@ -379,7 +394,13 @@ export function ResumePanel({ currentCwd, load, readTranscript, select, requestD
       )
       return
     }
-    if (key.return && rows[cursor]?.resumable === true) return select(rows[cursor])
+    if (key.return && rows[cursor] !== undefined) {
+      if (deleteMode) {
+        if (requestDelete !== undefined && !rows[cursor].live) requestDelete(rows[cursor])
+        return
+      }
+      if (rows[cursor].resumable) select(rows[cursor])
+    }
   }, { isActive: transcript === undefined })
   if (transcript !== undefined) {
     return createElement(DocumentPanel, {
@@ -392,15 +413,17 @@ export function ResumePanel({ currentCwd, load, readTranscript, select, requestD
   const pendingRow = deleteConfirmId === undefined ? undefined : rows.find(row => row.id === deleteConfirmId)
   const toolbar = `[${focus === 0 ? '>' : ''}${options.sessions}] [${focus === 1 ? '>' : ''}${options.cwd} cwd] [${focus === 2 ? '>' : ''}${options.sort}] [${focus === 3 ? '>' : ''}${density}]`
   return createElement(ListFrame, {
-    title: deleteConfirmId === undefined
-      ? `/resume${deleteMode ? ' — delete mode' : ''}${searching ? ' — searching' : ''} · ${toolbar}`
-      : `permanently delete ${pendingRow === undefined ? deleteConfirmId.slice(-12) : pendingRow.title ?? pendingRow.id}? this cannot be undone · subagent threads go too`,
+    title: deleteConfirmId !== undefined
+      ? t('panel.resume.deleteTitle', { target: pendingRow === undefined ? deleteConfirmId.slice(-12) : pendingRow.title ?? pendingRow.id })
+      : deleteMode
+        ? t('panel.delete.title', { search: searching ? ` — ${t('panel.searching')}` : '', toolbar })
+        : t('panel.resume.title', { mode: '', search: searching ? ` — ${t('panel.searching')}` : '', toolbar }),
     rows: rows.map(row => ({
       key: row.id,
-      disabled: !row.resumable,
+      disabled: deleteMode ? row.live : !row.resumable,
       text: `${row.subagent ? '↳' : '○'} ${row.title ?? row.id.slice(-12)}${density === 'comfortable' ? ` · ${formatRelativeTime(row.updatedAt ?? row.createdAt, now)} · ${row.workspace} · ${row.preset}` : ''}${row.live ? ' · live' : ''}${expanded === row.id ? ` · ${row.id} · ${row.cwd}${row.parent === undefined ? '' : ` · parent ${row.parent}`}` : ''}`,
     })), cursor, loading, error, query: options.query, searching,
-    footer: t('panel.footer.resume'),
+    footer: t(deleteMode ? 'panel.footer.delete' : 'panel.footer.resume'),
   })
 }
 
@@ -441,24 +464,50 @@ function DocumentRows({ lines }: { lines: readonly StyledLine[] }): ReactElement
   )
 }
 
-function DocumentPanel({ title, text, error, close }: {
+function DocumentPanel({ title, text, error, close, onRefresh, onExpand }: {
   title: string
   text?: string
   error?: string
   close: () => void
+  /** Re-read the document; offered as `r` (running subagents keep moving). */
+  onRefresh?: () => void
+  /** Replace this preview with a fuller surface (subagent attachment). */
+  onExpand?: () => void
 }): ReactElement {
   const stdout = useStdout().stdout
-  const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  // Expanded mode: the document replaces the transcript area (near the whole
+  // terminal minus the bottom live region), entered from the preview with
+  // Enter/f. Esc leaves for the caller's list directly — the preview is a
+  // peek step, not a level to back through.
+  const [expanded, setExpanded] = useState(false)
+  const viewport = expanded
+    ? expandedDocumentViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+    : panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
   const [scroll, setScroll] = useState(0)
   const lines = useMemo(() => text === undefined ? [] : markdownLines(text, viewport.contentColumns), [text, viewport.contentColumns])
+  const maxScroll = Math.max(0, lines.length - viewport.bodyRows)
   useInput((input, key) => {
     if (key.escape || input === 'q' || input === 't') return close()
+    // Ctrl+D keeps its step-out meaning: empty-draft exit in the composer,
+    // leave-the-document here.
+    if (expanded && key.ctrl && input === 'd') return close()
+    if (!expanded && (key.return || input === 'f')) {
+      if (onExpand !== undefined) {
+        close()
+        onExpand()
+        return
+      }
+      setExpanded(true)
+      setScroll(value => Math.min(value, Math.max(0, lines.length - expandedDocumentViewport(stdout?.columns ?? 80, stdout?.rows ?? 30).bodyRows)))
+      return
+    }
+    if (expanded && input === 'r' && onRefresh !== undefined) return onRefresh()
     if (key.upArrow) return setScroll(value => Math.max(0, value - 1))
-    if (key.downArrow) return setScroll(value => Math.min(Math.max(0, lines.length - viewport.bodyRows), value + 1))
+    if (key.downArrow) return setScroll(value => Math.min(maxScroll, value + 1))
     if (key.pageUp) return setScroll(value => Math.max(0, value - Math.max(1, viewport.bodyRows - 1)))
-    if (key.pageDown) return setScroll(value => Math.min(Math.max(0, lines.length - viewport.bodyRows), value + Math.max(1, viewport.bodyRows - 1)))
+    if (key.pageDown) return setScroll(value => Math.min(maxScroll, value + Math.max(1, viewport.bodyRows - 1)))
     if (input === 'g') return setScroll(0)
-    if (input === 'G') return setScroll(Math.max(0, lines.length - viewport.bodyRows))
+    if (input === 'G') return setScroll(maxScroll)
   })
   if (viewport.compact) return createElement(Text, { wrap: 'truncate-end' }, truncateColumns(t('document.compact'), viewport.contentColumns))
   const body: readonly StyledLine[] = error !== undefined
@@ -469,10 +518,12 @@ function DocumentPanel({ title, text, error, close }: {
   const accent = panelAccent('kernel-transcript', getPalette().dim, getPalette().brandBright)
   return createElement(
     Box,
-    { width: viewport.outerColumns, borderStyle: 'round', borderColor: inkColor(accent.border), flexDirection: 'column', paddingX: 1 },
-    createElement(Text, { color: inkColor(accent.title), wrap: 'truncate-end' }, truncateColumns(singleLineText(title), viewport.contentColumns)),
+    { width: viewport.outerColumns, borderStyle: 'round', borderColor: expanded ? inkColor(accent.title) : inkColor(accent.border), flexDirection: 'column', paddingX: 1 },
+    createElement(Text, { color: inkColor(accent.title), wrap: 'truncate-end' }, truncateColumns(singleLineText(title) + (expanded ? ` · ${t('document.expanded')}` : ''), viewport.contentColumns)),
     createElement(DocumentRows, { lines: body }),
-    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(t('document.footer', { from: lines.length === 0 ? 0 : scroll + 1, to: Math.min(lines.length, scroll + viewport.bodyRows), total: lines.length }), viewport.contentColumns)),
+    createElement(Text, { dimColor: true, wrap: 'truncate-end' }, truncateColumns(expanded
+      ? t('document.footerExpanded', { from: lines.length === 0 ? 0 : scroll + 1, to: Math.min(lines.length, scroll + viewport.bodyRows), total: lines.length, refresh: onRefresh === undefined ? '' : ` · ${t('document.refreshHint')}` })
+      : t('document.footer', { from: lines.length === 0 ? 0 : scroll + 1, to: Math.min(lines.length, scroll + viewport.bodyRows), total: lines.length }), viewport.contentColumns)),
   )
 }
 
@@ -580,6 +631,7 @@ export function ReviewPickerPanel({ loadBranches, loadCommits, choose, close }:
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string>()
   const loadRef = useRef<AbortController>()
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally re-pin when review rows change
   const now = useMemo(() => Date.now(), [rows])
 
   useEffect(() => {
@@ -715,24 +767,6 @@ export function ReviewPickerPanel({ loadBranches, loadCommits, choose, close }:
   )
 }
 
-/** One cross-session full-text search hit mapped from the session-query engine. */
-export interface SearchRow {
-  /** Session id (Enter resumes it through the switch machinery). */
-  readonly id: string
-  /** Display label: session title or the short id form. */
-  readonly label: string
-  /** Secondary facts line (workspace · preset markers). */
-  readonly detail: string
-  /** Bounded plain-text excerpt around the strongest match. */
-  readonly snippet: string
-  /** Match timestamp (relative labels derive from it). */
-  readonly updatedAt: number
-  /** Whether the hit is a delegated subagent conversation (not resumable). */
-  readonly subagent: boolean
-  /** Whether Enter may switch into it. */
-  readonly resumable: boolean
-}
-
 /**
  * The /search panel: full-text search over every persisted session through
  * the in-process session-query engine (the same corpus the model's
@@ -815,6 +849,7 @@ export function SearchPanel({ load, select, initialQuery = '', close }: {
   })
   const stdout = useStdout().stdout
   const viewport = panelViewport(stdout?.columns ?? 80, stdout?.rows ?? 30)
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally re-pin when a search result set lands
   const now = useMemo(() => Date.now(), [rows, searched])
   if (viewport.maxHeight === 0 || viewport.compact) {
     const state = loading ? 'searching…' : error !== undefined ? `error: ${error}` : rows.length === 0 ? 'no results yet' : `❯ ${rows[cursor]?.label ?? ''}`
@@ -929,7 +964,7 @@ export function StatuslinePanel({ enabled, change, close }: {
   const bodyRows = Math.max(1, viewport.bodyRows - 1)
   const offset = revealRow(0, cursor, order.length, bodyRows)
   const visible = order.slice(offset, offset + bodyRows)
-  const meta = new Map(STATUS_ITEMS.map(item => [item.id, item]))
+  const meta = new Map(localizedStatusItems().map(item => [item.id, item]))
   const accent = panelAccent('statusline', getPalette().dim, getPalette().brandBright)
   return createElement(
     Box,
@@ -1059,13 +1094,15 @@ interface AgentsEntry {
  * Enter/t opening the child's full transcript in the shared read-only
  * document view (the same projection the exporter uses).
  */
-export function AgentsPanel({ live, load, readTranscript, close }: {
+export function AgentsPanel({ live, load, readTranscript, attach, close }: {
   /** Live feed rows (child sessions observed this process). */
   live: readonly SubagentRow[]
   /** Load this session's persisted child sessions by lineage. */
   load: () => Promise<readonly SessionRow[]>
   /** Read one child session's full transcript as markdown. */
   readTranscript: (id: string, signal?: AbortSignal) => Promise<string>
+  /** Attach to one child as the whole view (the runner's live buses). */
+  attach: ((id: string, label: string) => void) | undefined
   close: () => void
 }): ReactElement {
   const [dirRows, setDirRows] = useState<readonly SessionRow[] | undefined>(undefined)
@@ -1075,7 +1112,7 @@ export function AgentsPanel({ live, load, readTranscript, close }: {
   const [transcript, setTranscript] = useState<{ id: string; text?: string; error?: string }>()
   const transcriptLoad = useRef<AbortController>()
   useEffect(() => () => transcriptLoad.current?.abort(), [])
-  const refresh = (): void => {
+  const refresh = useCallback((): void => {
     setLoading(true)
     setError(undefined)
     Promise.resolve().then(load).then(value => {
@@ -1085,8 +1122,8 @@ export function AgentsPanel({ live, load, readTranscript, close }: {
       setError(reason instanceof Error ? reason.message : String(reason))
       setLoading(false)
     })
-  }
-  useEffect(refresh, [])
+  }, [load])
+  useEffect(refresh, [refresh])
   // Live feed rows first (they carry the running state), then persisted
   // children only the directory knows — settled subagents from earlier turns.
   const rows = useMemo<readonly AgentsEntry[]>(() => {
@@ -1112,22 +1149,26 @@ export function AgentsPanel({ live, load, readTranscript, close }: {
     return [...feedRows, ...persisted]
   }, [live, dirRows])
   useEffect(() => setCursor(value => Math.min(value, Math.max(0, rows.length - 1))), [rows.length])
-  const openTranscript = (): void => {
-    const row = rows[cursor]
-    if (row === undefined) return
+  /** (Re-)read one child's transcript; the id is captured, not re-derived. */
+  const readTranscriptOf = (id: string): void => {
     transcriptLoad.current?.abort()
-    setTranscript({ id: row.id })
+    setTranscript({ id })
     const controller = new AbortController()
     transcriptLoad.current = controller
-    Promise.resolve().then(() => readTranscript(row.id, controller.signal)).then(
+    Promise.resolve().then(() => readTranscript(id, controller.signal)).then(
       text => {
-        if (!controller.signal.aborted) setTranscript({ id: row.id, text })
+        if (!controller.signal.aborted) setTranscript({ id, text })
       },
       reason => {
-        if (!controller.signal.aborted) setTranscript({ id: row.id, error: reason instanceof Error ? reason.message : String(reason) })
+        if (!controller.signal.aborted) setTranscript({ id, error: reason instanceof Error ? reason.message : String(reason) })
       },
     )
   }
+  const openTranscript = (): void => {
+    const row = rows[cursor]
+    if (row === undefined) return
+    readTranscriptOf(row.id)
+  }
   useInput((input, key) => {
     if (key.escape || input === 'q') return close()
     if (input === 'r') return refresh()
@@ -1144,6 +1185,17 @@ export function AgentsPanel({ live, load, readTranscript, close }: {
         transcriptLoad.current?.abort()
         setTranscript(undefined)
       },
+      // Running subagents keep moving: `r` re-reads the same child.
+      onRefresh: () => readTranscriptOf(transcript.id),
+      // Enter/f in the preview attaches the child as the whole view when the
+      // runner wired the live buses; without them the bordered expansion
+      // keeps serving the same document.
+      ...(attach === undefined ? {} : {
+        onExpand: () => {
+          const label = rows.find(row => row.id === transcript.id)?.label ?? transcript.id.slice(-12)
+          attach(transcript.id, label)
+        },
+      }),
     })
   }
   return createElement(ListFrame, {
@@ -1187,7 +1239,7 @@ export function SubagentPanel({ current, load, pick, inherit, close }: {
   const [loading, setLoading] = useState(true)
   const [cursor, setCursor] = useState(0)
   const [effortFor, setEffortFor] = useState<ModelRow | undefined>(undefined)
-  const refresh = (): void => {
+  const refresh = useCallback((): void => {
     setLoading(true)
     setError(undefined)
     Promise.resolve().then(load).then(value => {
@@ -1197,8 +1249,8 @@ export function SubagentPanel({ current, load, pick, inherit, close }: {
       setError(reason instanceof Error ? reason.message : String(reason))
       setLoading(false)
     })
-  }
-  useEffect(refresh, [])
+  }, [load])
+  useEffect(refresh, [refresh])
   const rows = useMemo(() => directory?.rows ?? [], [directory])
   // The list opens on the override's own row (index 0 is the inherit row).
   useEffect(() => {

package/src/{language-panel.ts → panels/language-panel.ts}

@@ -6,10 +6,10 @@
 
 import { createElement, useState, type ReactElement } from 'react'
 import { Box, Text, useInput, useStdout } from 'ink'
-import { panelViewport } from './render/inspector.ts'
-import { truncateColumns } from './render/text.ts'
-import { LANGUAGES, t, type LanguageName } from './i18n.ts'
-import { getPalette, inkColor } from './theme.ts'
+import { panelViewport } from '../render/inspector.ts'
+import { truncateColumns } from '../render/text.ts'
+import { LANGUAGES, t, type LanguageName } from '../i18n.ts'
+import { getPalette, inkColor } from '../theme.ts'
 
 export function LanguagePanel({ current, select, close }: {
   current: LanguageName