dsh-code 0.2.0 → 0.3.0

package/src/app.ts

@@ -15,20 +15,25 @@
  */
 
 import {
-  createElement, useEffect, useRef, useState, useSyncExternalStore, type ReactElement,
+  createElement, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ReactElement,
 } from 'react'
-import { Box, Text, useInput } from 'ink'
+import { Box, Text, useInput, useStdout } from 'ink'
 import { assertNever } from '@deepseek-ai/dsh-llm'
 import type { CommandDescriptor } from '@deepseek-ai/dsh-commands'
 import type { TodoItem } from '@deepseek-ai/dsh-session'
+import type { AskUserQuestionAnswerItem } from '@deepseek-ai/dsh-user-questions'
 import { TUI_RGB, brand, dim, error as paintError, warn } from './theme.ts'
 import { WHALE_GLYPH, WHALE_GLYPH_COLUMNS } from './whale-glyph.ts'
 import type { TranscriptStore } from './store.ts'
 import type { TranscriptEntry } from './render/projection.ts'
+import { renderMarkdown, type MdSegment, visibleColumns } from './render/markdown.ts'
+import { caretVisible, pulseFrame } from './render/animations.ts'
 import type { ApprovalStore } from './approval.ts'
 import type { CommandsView } from './commands.ts'
 import type { ModelDirectory, ModelRow } from './models.ts'
+import type { QuestionStore } from './questions.ts'
 import type { SkillsView, SkillRow } from './skills.ts'
+import type { MentionCandidate } from './mentions.ts'
 import { buildStatusGroups, type StatusFacts } from './render/status.ts'
 import { displayText } from './render/text.ts'
 
@@ -38,6 +43,8 @@ export interface AppProps {
   store: TranscriptStore
   /** Approval-question store fed by the answerer listener. */
   approval: ApprovalStore
+  /** ask_user_question store fed by the single UI provider. */
+  questions: QuestionStore
   /** Live slash-command descriptor list (completion candidates). */
   commands: CommandsView
   /** Live user-invocable skill catalog (completion candidates). */
@@ -62,8 +69,12 @@ export interface AppProps {
   quit(): void
   /** Load the selectable model directory (called when /model opens). */
   loadModels(): Promise<ModelDirectory>
+  /** Load @mention candidates for the typed query (files + sessions). */
+  loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
   /** Apply one /model selection; returns the display label. */
   selectModel(row: ModelRow): string
+  /** Cycle to the next permission preset (Shift+Tab); returns the new label. */
+  cyclePermission(): string
   /** Registers the app's notice channel with the runner (called once on mount). */
   onBridgeReady(bridge: { notify(text: string): void }): void
 }
@@ -73,42 +84,173 @@ function inkColor(triple: readonly [number, number, number]): string {
   return `rgb(${triple[0]}, ${triple[1]}, ${triple[2]})`
 }
 
+/** Truncate text to a visible-column budget, appending … when cut. */
+function truncateColumns(text: string, max: number): string {
+  let columns = 0
+  let out = ''
+  for (const char of text) {
+    const code = char.codePointAt(0) ?? 0
+    const width = code > 0x2e7f ? 2 : 1
+    if (columns + width > max) return `${out}…`
+    out += char
+    columns += width
+  }
+  return out
+}
+
+/** Pad text with spaces to a visible-column target (menu name column). */
+function padColumns(text: string, width: number): string {
+  return text + ' '.repeat(Math.max(0, width - visibleColumns(text)))
+}
+
+/** Interval-driven frame counter for one self-contained animated leaf. */
+function useFrames(intervalMs: number): number {
+  const [tick, setTick] = useState(0)
+  useEffect(() => {
+    const id = setInterval(() => setTick(current => current + 1), intervalMs)
+    return () => {
+      clearInterval(id)
+    }
+  }, [intervalMs])
+  return tick
+}
+
+/** Single-cell stepped pulse: the web's 125ms flat-hold brightness steps over 1s. */
+function Pulse(): ReactElement {
+  const tick = useFrames(125)
+  return createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, pulseFrame(tick))
+}
+
+/** Blinking block caret appended to streaming text. */
+function Caret(): ReactElement {
+  const tick = useFrames(530)
+  return createElement(Text, null, caretVisible(tick) ? '▍' : ' ')
+}
+
+/** Blinking input cursor: inverse block while the caret phase is on. */
+function CursorBlock({ char }: { char: string }): ReactElement {
+  const tick = useFrames(530)
+  return createElement(Text, { inverse: caretVisible(tick) || undefined }, char)
+}
+
+/** Ink props for one markdown style class. */
+function segmentProps(style: MdSegment['style']): {
+  color: string | undefined
+  bold: boolean | undefined
+  italic: boolean | undefined
+  strikethrough: boolean | undefined
+} {
+  switch (style) {
+    case 'accent':
+      return { color: inkColor(TUI_RGB.brandBright), bold: undefined, italic: undefined, strikethrough: undefined }
+    case 'code':
+      return { color: inkColor(TUI_RGB.code), bold: undefined, italic: undefined, strikethrough: undefined }
+    case 'dim':
+      return { color: inkColor(TUI_RGB.dim), bold: undefined, italic: undefined, strikethrough: undefined }
+    case 'bold':
+      return { color: undefined, bold: true, italic: undefined, strikethrough: undefined }
+    case 'italic':
+      return { color: undefined, bold: undefined, italic: true, strikethrough: undefined }
+    case 'boldItalic':
+      return { color: undefined, bold: true, italic: true, strikethrough: undefined }
+    case 'strike':
+      return { color: inkColor(TUI_RGB.dim), bold: undefined, italic: undefined, strikethrough: true }
+    default:
+      return { color: undefined, bold: undefined, italic: undefined, strikethrough: undefined }
+  }
+}
+
+/** One settled markdown document rendered as styled lines at the terminal width. */
+function MarkdownBody({ text }: { text: string }): ReactElement {
+  const columns = useStdout().stdout?.columns ?? 80
+  // Cached by (text, width): settled replies re-layout only when either moves.
+  const lines = useMemo(
+    () => renderMarkdown(displayText(text), Math.max(20, columns - 2)),
+    [text, columns],
+  )
+  return createElement(
+    Box,
+    { flexDirection: 'column' },
+    ...lines.map((line, index) => createElement(
+      Text,
+      { key: index },
+      ...line.segments.map((segment, at) => createElement(Text, { key: at, ...segmentProps(segment.style) }, segment.text)),
+    )),
+  )
+}
+
 /** One settled transcript row. */
-function EntryLine({ entry }: { entry: TranscriptEntry }): ReactElement {
+function EntryLine({ entry, showReasoning }: { entry: TranscriptEntry; showReasoning: boolean }): ReactElement {
   switch (entry.kind) {
     case 'user':
-      return createElement(Text, null, brand('❯ '), displayText(entry.text))
+      // Collapsed injected context reads as a dim ↳ row; only direct human
+      // prompts get the brand ❯ (they are different surfaces, not the same).
+      return entry.notice
+        ? createElement(Text, { dimColor: true }, `⤷ ${displayText(entry.text)}`)
+        : createElement(Text, null, brand('❯ '), displayText(entry.text))
     case 'assistant':
-      return createElement(Text, null, displayText(entry.text))
+      // Claude-Code-style thinking: a dim ✻ marker collapsed, the reasoning
+      // text dim-italic expanded (Ctrl+R toggles globally). The collapsed
+      // row is static — an animated counter inside the text would jitter the
+      // line width every frame.
+      return createElement(
+        Box,
+        { flexDirection: 'column' },
+        entry.reasoning === ''
+          ? undefined
+          : showReasoning
+            ? createElement(Text, { dimColor: true, italic: true }, `  ✻ ${displayText(entry.reasoning)}`)
+            : createElement(Text, { dimColor: true }, `  ✻ Thinking (${entry.reasoning.length} chars, Ctrl+R to expand)`),
+        createElement(MarkdownBody, { text: entry.text }),
+      )
     case 'tool': {
+      // Claude-Code-style tool card: the invocation row plus a nested ⎿
+      // result line, so the summary reads under its call instead of inline.
       const mark = entry.state === 'running'
-        ? createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, '◐')
+        ? createElement(Pulse)
         : entry.state === 'error'
           ? createElement(Text, { color: inkColor(TUI_RGB.error) }, '⨯')
           : createElement(Text, { color: inkColor(TUI_RGB.success) }, '⏺')
       return createElement(
-        Text,
-        null,
-        mark,
-        ' ',
-        brand(entry.name),
-        entry.summary === '' ? '' : ` ${dim(displayText(entry.summary))}`,
+        Box,
+        { flexDirection: 'column' },
+        createElement(
+          Text,
+          null,
+          mark,
+          ' ',
+          brand(entry.name),
+          entry.preview === '' ? '' : ` ${dim(displayText(entry.preview))}`,
+        ),
+        entry.summary === ''
+          ? undefined
+          : createElement(
+            Text,
+            { color: entry.state === 'error' ? inkColor(TUI_RGB.error) : inkColor(TUI_RGB.dim) },
+            `  ⎿ ${displayText(entry.summary)}`,
+          ),
       )
     }
     case 'command': {
       const mark = entry.state === 'running'
-        ? createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, '◐')
+        ? createElement(Pulse)
         : entry.state === 'error'
           ? createElement(Text, { color: inkColor(TUI_RGB.error) }, '⨯')
           : createElement(Text, { color: inkColor(TUI_RGB.success) }, '⏺')
       return createElement(
-        Text,
-        null,
-        mark,
-        ' ',
-        brand(`/${entry.name}`),
-        entry.args === '' ? '' : ` ${dim(displayText(entry.args))}`,
-        entry.summary === '' ? '' : ` ${dim(displayText(entry.summary))}`,
+        Box,
+        { flexDirection: 'column' },
+        createElement(
+          Text,
+          null,
+          mark,
+          ' ',
+          brand(`/${entry.name}`),
+          entry.args === '' ? '' : ` ${dim(displayText(entry.args))}`,
+        ),
+        entry.summary === ''
+          ? undefined
+          : createElement(Text, { color: inkColor(TUI_RGB.dim) }, `  ⎿ ${displayText(entry.summary)}`),
       )
     }
     case 'error':
@@ -118,8 +260,24 @@ function EntryLine({ entry }: { entry: TranscriptEntry }): ReactElement {
   }
 }
 
-/** The whale wordmark header in DeepSeek blue, hugging its content width. */
+/**
+ * The whale wordmark header in DeepSeek blue, hugging its content width.
+ * The 8-row half-block glyph pairs adjacent lines, so on a terminal too
+ * short to show it whole (or mid-resize) the clipped pairs garble the
+ * screen — below the height floor the header collapses to a single-line
+ * wordmark that stays correct at any size.
+ */
 function Header({ resumed }: { resumed: boolean }): ReactElement {
+  const rows = useStdout().stdout?.rows ?? 40
+  const hint = resumed ? 'resumed session · /help commands · Esc interrupt' : '/help commands · Esc interrupt · Ctrl+C quit'
+  if (rows < 20) {
+    return createElement(
+      Box,
+      { flexDirection: 'row', gap: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.brand), paddingX: 1, alignSelf: 'flex-start' },
+      createElement(Text, { color: inkColor(TUI_RGB.brand), bold: true }, 'DeepSeek Harness'),
+      createElement(Text, { dimColor: true }, hint),
+    )
+  }
   return createElement(
     Box,
     // alignSelf shrinks the border to the whale-plus-wordmark content instead
@@ -135,11 +293,7 @@ function Header({ resumed }: { resumed: boolean }): ReactElement {
       Box,
       { flexDirection: 'column', justifyContent: 'center' },
       createElement(Text, { color: inkColor(TUI_RGB.brand), bold: true }, 'DeepSeek Harness'),
-      createElement(
-        Text,
-        { dimColor: true },
-        resumed ? 'resumed session · /help commands · Esc interrupt' : '/help commands · Esc interrupt · Ctrl+C quit',
-      ),
+      createElement(Text, { dimColor: true }, hint),
     ),
   )
 }
@@ -157,7 +311,7 @@ function TodoPanel({ todos }: { todos: readonly TodoItem[] }): ReactElement | un
   const pending = todos.length - completed - inProgress
   return createElement(
     Box,
-    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.brandDeep), alignSelf: 'flex-start', marginLeft: 1 },
+    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.brandDeep), alignSelf: 'flex-start', marginLeft: 1, marginTop: 1 },
     createElement(
       Text,
       { color: inkColor(TUI_RGB.brand), bold: true },
@@ -193,24 +347,40 @@ function StatusLine({ facts, stats, busy }: {
   const groups = buildStatusGroups(facts, stats)
   const children: ReactElement[] = [
     busy
-      ? createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, '● ')
-      : createElement(Text, { color: inkColor(TUI_RGB.brand) }, '○ '),
+      ? createElement(Pulse)
+      : createElement(Text, { color: inkColor(TUI_RGB.brand) }, '○'),
+    createElement(Text, null, ' '),
   ]
   groups.forEach((group, index) => {
     if (index > 0) children.push(createElement(Text, { dimColor: true }, dim(' | ')))
     children.push(createElement(Text, { dimColor: true }, group))
   })
-  return createElement(Box, { paddingX: 1 }, ...children)
+  // Left-aligned status bar; the top margin keeps it clear of the input box.
+  return createElement(
+    Box,
+    { paddingX: 1, marginTop: 1 },
+    ...children,
+  )
 }
 
 /** The y/n approval bar rendered while an approval ask is pending. */
-function ApprovalBar({ approval }: { approval: ApprovalStore }): ReactElement | undefined {
+function ApprovalBar({ approval, locked }: { approval: ApprovalStore; locked: boolean }): ReactElement | undefined {
   const snapshot = useSyncExternalStore(approval.subscribe, approval.getSnapshot)
+  useInput((input) => {
+    if (locked || snapshot.pending === undefined || snapshot.answered) return
+    if (input === 'y' || input === 'Y') {
+      snapshot.pending.answer('allowed-once')
+      return
+    }
+    if (input === 'n' || input === 'N') {
+      snapshot.pending.answer('rejected')
+    }
+  })
   if (snapshot.pending === undefined) return undefined
   const { pending, answered } = snapshot
   return createElement(
     Box,
-    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.warn), alignSelf: 'flex-start', marginLeft: 1 },
+    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.warn), alignSelf: 'flex-start', marginLeft: 1, marginTop: 1 },
     createElement(Text, { color: inkColor(TUI_RGB.warn), bold: true }, '⏸ waiting for approval'),
     createElement(Text, null, warn(displayText(pending.headline))),
     pending.command === '' ? undefined : createElement(Text, { dimColor: true }, dim(`  ${displayText(pending.command)}`)),
@@ -220,6 +390,172 @@ function ApprovalBar({ approval }: { approval: ApprovalStore }): ReactElement |
   )
 }
 
+/**
+ * The ask_user_question bar: walks one request question by question,
+ * renders the option menu (Claude-Code style: arrows move, space toggles a
+ * multi-select, enter submits, `c` opens the custom-answer box, Esc
+ * interrupts the question as aborted). Plan reviews arrive through the same
+ * service with a `plan-review` intent — the approve option gets a ✓ mark,
+ * the answer encoding stays identical.
+ */
+function QuestionBar({ store, locked }: { store: QuestionStore; locked: boolean }): ReactElement | undefined {
+  const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot)
+  const pending = snapshot.pending
+  const [index, setIndex] = useState(0)
+  const [cursor, setCursor] = useState(0)
+  const [selected, setSelected] = useState<readonly number[]>([])
+  const [mode, setMode] = useState<'options' | 'custom'>('options')
+  const [custom, setCustom] = useState('')
+  const [answers, setAnswers] = useState<readonly AskUserQuestionAnswerItem[]>([])
+  const [submitted, setSubmitted] = useState(false)
+
+  // A new request resets the walk; questions without options start in the
+  // custom-answer box (a free-form question).
+  useEffect(() => {
+    const question = pending?.request.questions[0]
+    setIndex(0)
+    setCursor(0)
+    setSelected([])
+    setMode(question?.options === undefined || question.options.length === 0 ? 'custom' : 'options')
+    setCustom('')
+    setAnswers([])
+    setSubmitted(false)
+  }, [pending])
+
+  const question = pending?.request.questions[index]
+  const options = question?.options ?? []
+  const isPlan = question?.intent?.kind === 'plan-review'
+  const isMulti = question?.multiSelect === true
+
+  const commit = (answer: AskUserQuestionAnswerItem): void => {
+    if (pending === undefined) return
+    const next = [...answers, answer]
+    const total = pending.request.questions.length
+    if (index + 1 >= total) {
+      setSubmitted(true)
+      store.submit(pending, { answers: next })
+      return
+    }
+    setAnswers(next)
+    setIndex(index + 1)
+    setCursor(0)
+    setSelected([])
+    setMode('options')
+    setCustom('')
+  }
+
+  const commitOption = (): void => {
+    if (pending === undefined || question === undefined) return
+    if (isMulti) {
+      const labels = selected
+        .map(at => options[at]?.label)
+        .filter((label): label is string => label !== undefined)
+      const customText = custom.trim()
+      commit({ id: question.id, selected: labels, ...(customText === '' ? {} : { custom: customText }) })
+      return
+    }
+    const option = options[cursor]
+    if (option === undefined) return
+    commit({ id: question.id, selected: [option.label] })
+  }
+
+  useInput((input, key) => {
+    if (locked || pending === undefined || question === undefined || submitted) return
+    if (key.escape) {
+      store.cancel(pending)
+      return
+    }
+    if (mode === 'custom' || options.length === 0) {
+      if (key.return) {
+        if (custom.trim() === '' && options.length > 0) {
+          commitOption()
+          return
+        }
+        commit({
+          id: question.id,
+          selected: isMulti
+            ? selected.map(at => options[at]?.label).filter((label): label is string => label !== undefined)
+            : [],
+          ...(custom.trim() === '' ? {} : { custom: custom.trim() }),
+        })
+        return
+      }
+      if (key.backspace) {
+        setCustom(current => current.slice(0, -1))
+        return
+      }
+      if (input !== '' && !key.ctrl && !key.meta) {
+        setCustom(current => current + input)
+      }
+      return
+    }
+    if (key.upArrow) {
+      setCursor(current => (current + options.length - 1) % options.length)
+      return
+    }
+    if (key.downArrow) {
+      setCursor(current => (current + 1) % options.length)
+      return
+    }
+    if (key.return) {
+      commitOption()
+      return
+    }
+    if (key.tab || input === 'c' || input === 'C') {
+      setMode('custom')
+      return
+    }
+    if (input === ' ' && isMulti) {
+      setSelected(current => current.includes(cursor) ? current.filter(at => at !== cursor) : [...current, cursor])
+    }
+  })
+
+  if (pending === undefined || question === undefined) return undefined
+  return createElement(
+    Box,
+    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(isPlan ? TUI_RGB.brand : TUI_RGB.brandDeep), alignSelf: 'flex-start', marginLeft: 1, marginTop: 1 },
+    createElement(
+      Text,
+      { color: inkColor(isPlan ? TUI_RGB.brand : TUI_RGB.brandDeep), bold: true },
+      isPlan ? `📋 plan review (${index + 1}/${pending.request.questions.length})` : `❓ question ${index + 1}/${pending.request.questions.length}`,
+    ),
+    question.header === undefined ? undefined : createElement(Text, { bold: true }, displayText(question.header)),
+    createElement(Text, null, displayText(question.question)),
+    question.detail === undefined
+      ? undefined
+      : isPlan
+        ? createElement(MarkdownBody, { text: question.detail })
+        : createElement(Text, { dimColor: true }, displayText(question.detail)),
+    submitted
+      ? createElement(Text, { dimColor: true }, '  submitted…')
+      : createElement(
+        Box,
+        { flexDirection: 'column', marginLeft: 1 },
+        ...(mode === 'custom' || options.length === 0
+          ? [
+            createElement(Text, { color: inkColor(TUI_RGB.brandBright) }, `  custom: ${custom}${submitted ? '' : '▌'}`),
+            createElement(Text, { dimColor: true }, dim('  type your answer · enter submit · esc interrupt')),
+          ]
+          : options.map((option, at) => {
+            const chosen = isMulti && selected.includes(at)
+            const approve = isPlan && question.intent?.approve === option.label
+            const mark = approve ? '✓ ' : chosen ? '◉ ' : at === cursor ? '❯ ' : '  '
+            return createElement(
+              Text,
+              {
+                key: at,
+                color: at === cursor ? inkColor(TUI_RGB.brandBright) : chosen || approve ? inkColor(TUI_RGB.success) : inkColor(TUI_RGB.text),
+              },
+              `${mark}${displayText(option.label)}${option.description === undefined ? '' : dim(` — ${displayText(option.description)}`)}`,
+            )
+          })),
+        createElement(Text, { dimColor: true }, dim(isMulti
+          ? '  ↑↓ move · space toggle · enter submit · c custom · esc interrupt'
+          : '  ↑↓ move · enter submit · c custom · esc interrupt')),
+      ),
+  )
+}
+
 /** The /model panel: a scrolling list over the advisory model directory. */
 function ModelPanel({ directory, error, onSelect, onClose }: {
   directory: ModelDirectory | undefined
@@ -252,7 +588,7 @@ function ModelPanel({ directory, error, onSelect, onClose }: {
   const visible = rows.slice(Math.max(0, first), Math.max(0, first) + window)
   return createElement(
     Box,
-    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.brand), alignSelf: 'flex-start', marginLeft: 1 },
+    { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: inkColor(TUI_RGB.brand), alignSelf: 'flex-start', marginLeft: 1, marginTop: 1 },
     createElement(Text, { color: inkColor(TUI_RGB.brand), bold: true }, '/model — select the model for the next step'),
     directory === undefined && error === undefined
       ? createElement(Text, { dimColor: true }, '  loading models…')
@@ -283,7 +619,7 @@ interface CompletionCandidate {
   /** Human-readable description shown beside the label. */
   description: string
   /** Candidate origin; skills land the same literal text but route through the prompt. */
-  origin: 'command' | 'skill'
+  origin: 'command' | 'skill' | 'mention'
 }
 
 /**
@@ -305,11 +641,17 @@ function completionCandidates(
     { label: '/clear', description: 'clear the screen', origin: 'command' },
     { label: '/quit', description: 'exit', origin: 'command' },
   ]
-  const registry = descriptors.map((descriptor): CompletionCandidate => ({
-    label: `/${descriptor.name}`,
-    description: descriptor.description,
-    origin: 'command',
-  }))
+  // Local commands shadow registry names (e.g. the plugin-registered
+  // /permission is served by the registry itself, never duplicated here),
+  // so collisions cannot render two rows with the same key.
+  const localNames = new Set(local.map(candidate => candidate.label.slice(1)))
+  const registry = descriptors
+    .filter(descriptor => !localNames.has(descriptor.name))
+    .map((descriptor): CompletionCandidate => ({
+      label: `/${descriptor.name}`,
+      description: descriptor.description,
+      origin: 'command',
+    }))
   const taken = new Set([...local, ...registry].map(candidate => candidate.label.slice(1)))
   const skillRows = skills
     .filter(skill => !taken.has(skill.name))
@@ -323,11 +665,55 @@ function completionCandidates(
   return all.filter(candidate => candidate.label.slice(1).startsWith(prefix)).slice(0, 10)
 }
 
+/** The completion menu snapshot the input editor publishes to the app. */
+export interface MenuState {
+  /** Whether the menu is on screen (slash or @mention). */
+  active: boolean
+  /** Whether the menu is driven by an @mention token. */
+  mention: boolean
+  /** Highlighted candidate index (wraps by row count). */
+  index: number
+  /** Rendered rows in display order. */
+  rows: readonly CompletionCandidate[]
+}
+
+/**
+ * The completion menu, rendered after the status line — the very last
+ * element in the tree. Being last in the layout flow, opening or closing it
+ * moves nothing above it: the transcript, input box, and status line all
+ * stay put (the Claude-Code dropdown treatment adapted to Ink, whose
+ * absolute positioning cannot place children above their parent).
+ */
+function CompletionMenu({ state }: { state: MenuState }): ReactElement | undefined {
+  if (!state.active) return undefined
+  const columns = useStdout().stdout?.columns ?? 80
+  const nameWidth = Math.min(18, Math.max(0, ...state.rows.map(row => visibleColumns(row.label))) + 2)
+  const descBudget = Math.max(24, columns - nameWidth - 8)
+  return createElement(
+    Box,
+    { flexDirection: 'column', marginTop: 1, marginLeft: 2 },
+    ...(state.rows.length === 0
+      ? [createElement(Text, { key: 'loading', dimColor: true }, 'searching…')]
+      : state.rows.map((candidate, index) => createElement(
+        Text,
+        {
+          key: candidate.label,
+          color: index === state.index % state.rows.length ? inkColor(TUI_RGB.brandBright) : inkColor(TUI_RGB.dim),
+        },
+        `${index === state.index % state.rows.length ? '❯ ' : '  '}${padColumns(candidate.label, nameWidth)}${dim(truncateColumns(displayText(candidate.description), descBudget))}`,
+      ))),
+    createElement(Text, { dimColor: true }, dim(state.mention ? '↑↓ choose · tab insert' : '↑↓ choose · tab complete')),
+  )
+}
+
 /**
  * The prompt box: TUI-local slash commands handled locally, other lines
  * dispatched; input editing keeps a cursor with history and completion.
+ * While a modal (approval / question / model panel) owns the keys, the
+ * box passes every key through untouched.
  */
-function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, notify }: {
+function Input({ active, busy, descriptors, skills, dispatch, steer, interrupt, quit, openModel, notify, toggleReasoning, loadMentions, cyclePermission, onMenuState }: {
+  active: boolean
   busy: boolean
   descriptors: readonly CommandDescriptor[]
   skills: readonly SkillRow[]
@@ -337,6 +723,10 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
   quit(): void
   openModel(): void
   notify(text: string): void
+  toggleReasoning(): void
+  loadMentions(query: string, signal?: AbortSignal): Promise<readonly MentionCandidate[]>
+  cyclePermission(): string
+  onMenuState(state: MenuState): void
 }): ReactElement {
   const [value, setValue] = useState('')
   const [cursor, setCursor] = useState(0)
@@ -345,9 +735,75 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
   const draft = useRef('')
   const [completionIndex, setCompletionIndex] = useState(0)
   const candidates = completionCandidates(value, descriptors, skills)
-  const completionActive = candidates.length > 0 && value.startsWith('/') && !value.includes(' ') && !value.includes('\n')
+  const slashActive = candidates.length > 0 && value.startsWith('/') && !value.includes(' ') && !value.includes('\n')
+
+  // @mention token: the last `@word` on the cursor's line before the cursor.
+  const beforeCursor = value.slice(0, cursor)
+  const lastLine = beforeCursor.split('\n').at(-1) ?? ''
+  const tokenMatch = /(^|\s)@([^\s]*)$/u.exec(lastLine)
+  const mentionToken = tokenMatch === null
+    ? undefined
+    : { start: beforeCursor.length - lastLine.length + (tokenMatch.index ?? 0) + (tokenMatch[1]?.length ?? 0), query: tokenMatch[2] ?? '' }
+  const mentionActive = mentionToken !== undefined
+  const [mentionRows, setMentionRows] = useState<readonly MentionCandidate[]>([])
+
+  useEffect(() => {
+    if (!mentionActive) {
+      setMentionRows([])
+      return
+    }
+    const controller = new AbortController()
+    setMentionRows([])
+    loadMentions(mentionToken.query, controller.signal).then(
+      rows => setMentionRows(rows),
+      () => {},
+    )
+    return () => {
+      controller.abort()
+    }
+  }, [mentionActive, mentionToken?.query])
+
+  const menuActive = (slashActive || mentionActive) && !busy
+  const menuRows: readonly CompletionCandidate[] = mentionActive
+    ? mentionRows.map(row => ({
+      label: row.label.startsWith('@')
+        ? row.label
+        : `@${row.label}${row.kind === 'directory' ? '/' : ''}`,
+      description: row.description,
+      origin: 'mention',
+    }))
+    : candidates
+
+  // The menu renders at the very bottom of the app (after the status line),
+  // where opening it moves nothing above it — the App needs this snapshot.
+  // Notify only on change; an unconditional set would re-render in a loop.
+  const menuStateKey = useRef('')
+  useEffect(() => {
+    const key = JSON.stringify([menuActive, mentionActive, completionIndex, menuRows.map(row => row.label)])
+    if (key === menuStateKey.current) return
+    menuStateKey.current = key
+    onMenuState({
+      active: menuActive,
+      mention: mentionActive,
+      index: completionIndex,
+      rows: menuRows,
+    })
+  }, [menuActive, mentionActive, completionIndex, menuRows, onMenuState])
 
   useInput((input, key) => {
+    // Modal ownership: approval/question/model dialogs consume all keys.
+    if (!active) return
+    // Shift+Tab cycles the permission preset (Claude-Code convention).
+    if (key.tab && key.shift) {
+      const next = cyclePermission()
+      if (next !== '') notify(`permission → ${next}`)
+      return
+    }
+    // Ctrl+R toggles the thinking display (Claude-Code reasoning fold).
+    if (key.ctrl && input === 'r') {
+      toggleReasoning()
+      return
+    }
     // Ctrl+C is three-state (community-TUI convention): a running turn is
     // cancelled, a non-empty draft is cleared, and only an idle empty input
     // exits. Ctrl+D always means exit but refuses mid-turn.
@@ -393,7 +849,7 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
         return
       }
       if (text === '/help') {
-        notify('/model switch · /clear clear the screen · /quit exit · other /commands reach the registry · Esc or Ctrl+C interrupts the running turn')
+        notify('/model switch · /clear clear the screen · /quit exit · Ctrl+R toggle thinking · Shift+Tab cycle permission · other /commands reach the registry · Esc or Ctrl+C interrupts the running turn')
         return
       }
       if (text === '/clear') {
@@ -414,12 +870,12 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
       dispatch(text)
       return
     }
-    if (completionActive && key.upArrow) {
-      setCompletionIndex(index => (index + candidates.length - 1) % candidates.length)
+    if (menuActive && key.upArrow) {
+      setCompletionIndex(index => (index + menuRows.length - 1) % menuRows.length)
       return
     }
-    if (completionActive && key.downArrow) {
-      setCompletionIndex(index => (index + 1) % candidates.length)
+    if (menuActive && key.downArrow) {
+      setCompletionIndex(index => (index + 1) % menuRows.length)
       return
     }
     if (key.upArrow) {
@@ -447,13 +903,26 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
       setCursor((entries[next] ?? '').length)
       return
     }
-    if (key.tab && completionActive) {
-      const candidate = candidates[completionIndex % candidates.length]
-      if (candidate !== undefined) {
-        setValue(`${candidate.label} `)
-        setCursor(candidate.label.length + 1)
-        setCompletionIndex(0)
+    if (key.tab && menuActive) {
+      if (mentionActive && mentionToken !== undefined) {
+        const row = mentionRows[completionIndex % mentionRows.length]
+        if (row !== undefined) {
+          // Session rows carry the canonical @[label](dsh-session:…) token;
+          // file rows insert `@path` (directories keep their trailing slash).
+          const insertion = row.label.startsWith('@')
+            ? row.label
+            : `@${row.label}${row.kind === 'directory' ? '/' : ''}`
+          setValue(value.slice(0, mentionToken.start) + insertion + value.slice(cursor))
+          setCursor(mentionToken.start + insertion.length)
+        }
+      } else {
+        const candidate = candidates[completionIndex % candidates.length]
+        if (candidate !== undefined) {
+          setValue(`${candidate.label} `)
+          setCursor(candidate.label.length + 1)
+        }
       }
+      setCompletionIndex(0)
       return
     }
     if (key.backspace || key.delete) {
@@ -492,35 +961,27 @@ function Input({ busy, descriptors, skills, dispatch, steer, interrupt, quit, op
     }
   })
 
-  const shown = completionActive && !busy
   return createElement(
     Box,
-    { flexDirection: 'column' },
-    shown
-      ? createElement(
-        Box,
-        { flexDirection: 'column', marginLeft: 1 },
-        ...candidates.map((candidate, index) => createElement(
-          Text,
-          {
-            key: candidate.label,
-            color: index === completionIndex % candidates.length ? inkColor(TUI_RGB.brandBright) : inkColor(TUI_RGB.dim),
-          },
-          `${index === completionIndex % candidates.length ? '❯ ' : '  '}${candidate.label} ${dim(displayText(candidate.description))}`,
-        )),
-        createElement(Text, { dimColor: true }, dim('  ↑↓ choose · tab complete')),
-      )
-      : undefined,
+    { flexDirection: 'column', marginTop: 1 },
     busy && value === ''
       ? createElement(Text, { dimColor: true }, dim('  enter steers the running turn · esc or ctrl+c cancels'))
       : undefined,
+    // The framed input box: a visible boundary so the prompt never blends
+    // into the transcript above it; the cursor block sits immediately after
+    // the prompt marker (leftmost), with the dim placeholder trailing it —
+    // no extra space, so the empty state reads `❯ ▮type a message…`.
     createElement(
       Box,
-      null,
+      { borderStyle: 'round', borderColor: inkColor(TUI_RGB.dim), paddingX: 1 },
       createElement(Text, { color: inkColor(TUI_RGB.brand) }, busy ? '… ' : '❯ '),
-      createElement(Text, null, value.slice(0, cursor)),
-      createElement(Text, { inverse: true }, value.slice(cursor, cursor + 1) === '' ? ' ' : value.slice(cursor, cursor + 1)),
-      createElement(Text, null, value.slice(cursor + 1)),
+      value === ''
+        ? undefined
+        : createElement(Text, null, value.slice(0, cursor)),
+      createElement(CursorBlock, { char: value.slice(cursor, cursor + 1) === '' ? ' ' : value.slice(cursor, cursor + 1) }),
+      value === '' && !busy
+        ? createElement(Text, { dimColor: true }, 'type a message · / commands · @ mentions')
+        : createElement(Text, null, value.slice(cursor + 1)),
     ),
   )
 }
@@ -557,6 +1018,24 @@ export function App(props: AppProps): ReactElement {
   }, [modelOpen])
 
   const busy = view.busy
+  const [showReasoning, setShowReasoning] = useState(false)
+  const [menuState, setMenuState] = useState<MenuState>({ active: false, mention: false, index: 0, rows: [] })
+  const approvalSnapshot = useSyncExternalStore(props.approval.subscribe, props.approval.getSnapshot)
+  const questionSnapshot = useSyncExternalStore(props.questions.subscribe, props.questions.getSnapshot)
+  // While any modal owns the keys, the prompt box passes everything through.
+  const inputActive = !modelOpen && approvalSnapshot.pending === undefined && questionSnapshot.pending === undefined
+  // Layered ownership: question > approval > model panel; each bar answers
+  // only while no higher-priority modal is on screen.
+  const questionPending = questionSnapshot.pending !== undefined
+  // Claude-Code spacing: one blank row before each user prompt (except the
+  // first) separates replies from the next turn.
+  const transcriptRows: ReactElement[] = []
+  view.entries.forEach((entry, index) => {
+    if (entry.kind === 'user' && index > 0) {
+      transcriptRows.push(createElement(Text, { key: `gap-${index}` }, ' '))
+    }
+    transcriptRows.push(createElement(EntryLine, { key: index, entry, showReasoning }))
+  })
   return createElement(
     Box,
     { flexDirection: 'column' },
@@ -564,12 +1043,22 @@ export function App(props: AppProps): ReactElement {
     createElement(
       Box,
       { flexDirection: 'column', paddingX: 1 },
-      ...view.entries.map((entry, index) => createElement(EntryLine, { key: index, entry })),
-      view.streaming !== '' ? createElement(Text, null, displayText(view.streaming)) : undefined,
-      busy && view.streaming === '' ? createElement(Text, { dimColor: true }, 'thinking…') : undefined,
+      ...transcriptRows,
+      view.streamingReasoning !== ''
+        ? createElement(
+          Text,
+          { dimColor: true, italic: true },
+          showReasoning ? `  ✻ ${displayText(view.streamingReasoning)}` : '  ✻ Thinking…',
+        )
+        : undefined,
+      view.streaming !== ''
+        ? createElement(Text, null, displayText(view.streaming), busy ? createElement(Caret) : undefined)
+        : undefined,
+      busy && view.streaming === '' && view.streamingReasoning === '' ? createElement(Text, { dimColor: true }, 'Deep diving...') : undefined,
     ),
     createElement(TodoPanel, { todos: view.todos }),
-    createElement(ApprovalBar, { approval: props.approval }),
+    createElement(QuestionBar, { store: props.questions, locked: modelOpen }),
+    createElement(ApprovalBar, { approval: props.approval, locked: modelOpen || questionPending }),
     modelOpen
       ? createElement(ModelPanel, {
         directory,
@@ -590,6 +1079,7 @@ export function App(props: AppProps): ReactElement {
       ...notices.slice(-3).map((notice, index) => createElement(Text, { key: index, dimColor: true }, notice)),
     ),
     createElement(Input, {
+      active: inputActive,
       busy,
       descriptors,
       skills,
@@ -601,11 +1091,25 @@ export function App(props: AppProps): ReactElement {
         setModelOpen(true)
       },
       notify,
+      toggleReasoning: () => {
+        setShowReasoning(current => !current)
+      },
+      loadMentions: props.loadMentions,
+      cyclePermission: props.cyclePermission,
+      onMenuState: setMenuState,
     }),
     createElement(StatusLine, {
-      facts: { model: modelLabel, cwd: props.cwd, branch: props.branch, sessionId: props.sessionId },
+      facts: {
+        model: modelLabel,
+        cwd: props.cwd,
+        branch: props.branch,
+        sessionId: props.sessionId,
+        plan: view.plan,
+        permission: view.permission,
+      },
       stats: view.stats,
       busy,
     }),
+    createElement(CompletionMenu, { state: menuState }),
   )
 }