@xp266/dshtui 0.1.0

package/src/ui/message/md/inline.ts

@@ -0,0 +1,97 @@
+import type { Token, Tokens } from 'marked'
+import { mergeRuns } from '../../../core/segments.ts'
+import type { MarkStyle, Segment } from '../../../core/segments.ts'
+import { markdownExtensions } from './extensions.ts'
+import type { MdPalette } from './palette.ts'
+
+function mergeStyle(base: MarkStyle | undefined, extra: MarkStyle): MarkStyle {
+  const merged: MarkStyle = {}
+  const color = extra.color ?? base?.color
+  if (color !== undefined) merged.color = color
+  if (base?.bold === true || extra.bold === true) merged.bold = true
+  if (base?.italic === true || extra.italic === true) merged.italic = true
+  if (base?.strike === true || extra.strike === true) merged.strike = true
+  if (base?.underline === true || extra.underline === true) merged.underline = true
+  return merged
+}
+
+export function renderInline(tokens: Token[], palette: MdPalette, base?: MarkStyle): Segment[] {
+  const out: Segment[] = []
+  const emit = (text: string, style: MarkStyle): void => {
+    if (text !== '') out.push({ text, style })
+  }
+  for (const token of tokens) {
+    const contributed = markdownExtensions.markdownInlineOf(token)
+    if (contributed !== undefined) {
+      out.push(contributed.render(token, { palette, base }))
+      continue
+    }
+    switch (token.type) {
+      case 'strong': {
+        const t = token as Tokens.Strong
+        out.push(...renderInline(t.tokens, palette, mergeStyle(base, palette.bold)))
+        break
+      }
+      case 'em': {
+        const t = token as Tokens.Em
+        out.push(...renderInline(t.tokens, palette, mergeStyle(base, palette.italic)))
+        break
+      }
+      case 'del': {
+        const t = token as Tokens.Del
+        out.push(...renderInline(t.tokens, palette, mergeStyle(base, palette.strike)))
+        break
+      }
+      case 'codespan': {
+        const t = token as Tokens.Codespan
+        emit(t.text.replace(/\n/gm, ' '), mergeStyle(base, palette.inlineCode))
+        break
+      }
+      case 'link': {
+        const t = token as Tokens.Link
+        out.push(...renderInline(t.tokens.length > 0 ? t.tokens : [{ type: 'text', raw: t.text, text: t.text }], palette, mergeStyle(base, palette.link)))
+        break
+      }
+      case 'image': {
+        const t = token as Tokens.Image
+        emit(t.text, base ?? palette.plain)
+        break
+      }
+      case 'br': {
+        emit('\n', palette.plain)
+        break
+      }
+      case 'escape': {
+        const t = token as Tokens.Escape
+        emit(t.text, base ?? palette.plain)
+        break
+      }
+      case 'inline-links':
+      case 'url': {
+        const t = token as Tokens.Generic & { href: string; text: string }
+        emit(t.text !== '' ? t.text : t.href, mergeStyle(base, palette.link))
+        break
+      }
+      case 'html': {
+        const t = token as Tokens.HTML
+        emit(t.raw.replace(/<br\s*\/?>/gi, '\n'), base ?? palette.plain)
+        break
+      }
+      case 'text': {
+        const t = token as Tokens.Text
+        if (t.tokens !== undefined && t.tokens.length > 0) {
+          out.push(...renderInline(t.tokens, palette, base))
+        } else {
+          emit(t.text, base ?? palette.plain)
+        }
+        break
+      }
+      default: {
+        const raw = (token as Tokens.Generic).raw
+        if (typeof raw === 'string') emit(raw, base ?? palette.plain)
+        break
+      }
+    }
+  }
+  return mergeRuns(out)
+}

package/src/ui/message/md/palette.ts

@@ -0,0 +1,87 @@
+import type { MarkStyle } from '../../../core/segments.ts'
+import { COLORS } from '../../../theme.ts'
+
+export interface MdPalette {
+  plain: MarkStyle
+  bold: MarkStyle
+  italic: MarkStyle
+  strike: MarkStyle
+  link: MarkStyle
+  inlineCode: MarkStyle
+  quoteBar: MarkStyle
+  hr: MarkStyle
+  listMarker: MarkStyle
+  taskDone: MarkStyle
+  taskTodo: MarkStyle
+  heading(level: number): MarkStyle
+  codePlain: MarkStyle
+  codeFallback: MarkStyle
+}
+
+interface ColorSpec {
+  link: string
+  inlineCode: string
+  quoteBar: string
+  hr: string
+  list: string
+  taskDone: string
+  taskTodo: string
+  h1: string
+  h3: string
+  codePlain: string
+  codeFallback: string
+}
+
+const MD_SPEC: ColorSpec = {
+  link: 'mdLink',
+  inlineCode: 'mdInlineCode',
+  quoteBar: 'mdQuoteBar',
+  hr: 'mdHr',
+  list: 'mdList',
+  taskDone: 'mdTaskDone',
+  taskTodo: 'mdTaskTodo',
+  h1: 'mdH1',
+  h3: 'mdH3',
+  codePlain: 'mdCodePlain',
+  codeFallback: 'mdCodeFallback',
+}
+
+const THINK_SPEC: ColorSpec = {
+  link: 'thinkLink',
+  inlineCode: 'thinkInlineCode',
+  quoteBar: 'mdQuoteBar',
+  hr: 'thinkHr',
+  list: 'thinkList',
+  taskDone: 'thinkTaskDone',
+  taskTodo: 'thinkTaskTodo',
+  h1: 'thinkH1',
+  h3: 'thinkH1',
+  codePlain: 'thinkCodePlain',
+  codeFallback: 'thinkCodeFallback',
+}
+
+function buildPalette(spec: ColorSpec): MdPalette {
+  const at = (key: string): MarkStyle => ({ color: (COLORS as unknown as Record<string, string>)[key] })
+  return {
+    plain: {},
+    bold: { bold: true },
+    italic: { italic: true },
+    strike: { strike: true },
+    link: { ...at(spec.link), underline: true },
+    inlineCode: at(spec.inlineCode),
+    quoteBar: at(spec.quoteBar),
+    hr: at(spec.hr),
+    listMarker: at(spec.list),
+    taskDone: at(spec.taskDone),
+    taskTodo: at(spec.taskTodo),
+    heading(level) {
+      return { color: (COLORS as unknown as Record<string, string>)[level <= 2 ? spec.h1 : spec.h3], bold: true }
+    },
+    codePlain: at(spec.codePlain),
+    codeFallback: at(spec.codeFallback),
+  }
+}
+
+export function createMdPalette(thinking: boolean): MdPalette {
+  return buildPalette(thinking ? THINK_SPEC : MD_SPEC)
+}

package/src/ui/message/message-list.tsx

@@ -0,0 +1,69 @@
+import { Box, useInput } from 'ink'
+import { isKeyConsumed } from '../key-arbiter.ts'
+import type { Message } from '../../model/message.ts'
+import { rowIndexFor, scrollbarGeometry } from './layout.ts'
+import { MessageRow } from './message-row.tsx'
+import { COLORS } from '../../theme.ts'
+import { scrollbarColumn } from '../layout-service.ts'
+import { Region } from '../region.tsx'
+
+interface MessageListProps {
+  messages: Message[]
+  height: number
+  width: number
+  scrollTop: number
+  onScroll: (next: number) => void
+  interactive?: boolean
+  themeTick?: number
+}
+
+export function MessageList({ messages, height, width, scrollTop, onScroll, interactive = true, themeTick = 0 }: MessageListProps) {
+  const index = rowIndexFor(messages, width)
+  const total = index.total
+  const halfPage = Math.max(1, Math.ceil(height / 2))
+  useInput((input, key) => {
+    if (!interactive || isKeyConsumed()) return
+    const maxScroll = Math.max(0, total - height)
+    const scroll = (delta: number): void => {
+      onScroll(Math.max(0, Math.min(maxScroll, scrollTop + delta)))
+    }
+    if (key.pageUp) scroll(-(height - 2))
+    if (key.pageDown) scroll(height - 2)
+    if (key.ctrl && input === 'u') scroll(-halfPage)
+    if (key.ctrl && input === 'd') scroll(halfPage)
+  })
+  const rows = []
+  const endRow = Math.min(scrollTop + height, total)
+  for (let row = scrollTop; row < endRow; row++) {
+    const info = index.rowAt(row)
+    if (info) rows.push(<MessageRow key={`${info.messageId}:${info.lineNo}`} info={info} row={row} themeTick={themeTick} />)
+  }
+  const scrollbar = scrollbarGeometry(total, height, scrollTop)
+  return (
+    <Box width={width} height={height} flexDirection="column" overflow="hidden">
+      <Region y={-scrollTop}>
+        {rows}
+      </Region>
+      {scrollbar !== null && (
+        <>
+          <Box
+            position="absolute"
+            top={0}
+            left={scrollbarColumn(width)}
+            width={1}
+            height={height}
+            backgroundColor={COLORS.scrollTrackBackground}
+          />
+          <Box
+            position="absolute"
+            top={scrollbar.top}
+            left={scrollbarColumn(width)}
+            width={1}
+            height={scrollbar.height}
+            backgroundColor={COLORS.scrollThumbBackground}
+          />
+        </>
+      )}
+    </Box>
+  )
+}

package/src/ui/message/message-row.tsx

@@ -0,0 +1,137 @@
+import { Box, Text } from 'ink'
+import { memo } from 'react'
+import { COLORS } from '../../theme.ts'
+import { glyphs } from '../../terminal/glyphs.ts'
+import { headerSymbol, HEADER_LABEL_COL } from './layout.ts'
+import type { RowInfo } from './layout.ts'
+import { SelectableText } from '../selection.tsx'
+import { useSpinnerTick } from '../spinner-tick.tsx'
+import { wavePalette, waveSegments } from './wave.ts'
+
+function TickGlyph({ y, col, color }: { y: number; col: number; color?: string }): ReturnType<typeof SelectableText> {
+  const tick = useSpinnerTick()
+  return (
+    <SelectableText
+      y={y}
+      col={col}
+      text={`${glyphs.spinnerFrames[tick % glyphs.spinnerFrames.length]} `}
+      color={color}
+      messageLayer
+    />
+  )
+}
+
+function WaveText({ info, row, color }: { info: RowInfo; row: number; color: string }): ReturnType<typeof SelectableText> {
+  const tick = useSpinnerTick()
+  const base = info.segments?.[0]?.style.bold === true ? { bold: true } : {}
+  return (
+    <SelectableText
+      y={row}
+      col={info.colStart}
+      segments={waveSegments(info.text, tick, wavePalette(color), color, base)}
+      messageLayer
+      flow
+    />
+  )
+}
+
+interface MessageRowProps {
+  info: RowInfo
+  row: number
+  themeTick?: number
+}
+
+// The row component itself consumes no context: only the spinner and wave
+// subcomponents subscribe to the tick, so memoized rows that are not
+// animating stay untouched on every tick.
+export const MessageRow = memo(
+  function MessageRow({ info, row, themeTick = 0 }: MessageRowProps) {
+  switch (info.kind) {
+    case 'pad':
+      return (
+        <Box marginLeft={2} width={info.backgroundWidth} backgroundColor={backgroundFor(info.role)}>
+          <Text>{' '.repeat(info.backgroundWidth)}</Text>
+        </Box>
+      )
+    case 'text': {
+      const col = info.colStart
+      const marginLeft = col >= 2 ? 2 : col
+      const paddingLeft = col >= 2 ? col - 2 : 0
+      const baseColor = info.role === 'error' ? COLORS.errorText : info.muted ? COLORS.toolBodyText : undefined
+      const waveColor = info.segments?.[0]?.style.color ?? baseColor
+      return (
+        <Box
+          marginLeft={marginLeft}
+          width={info.backgroundWidth}
+          paddingLeft={info.spinner ? 0 : paddingLeft}
+          backgroundColor={info.lineBg ?? (info.background ? backgroundFor(info.role) : undefined)}
+        >
+          {info.spinner && <TickGlyph y={row} col={col - 2} color={info.accent ?? baseColor} />}
+          {info.wave && waveColor !== undefined ? (
+            <WaveText info={info} row={row} color={waveColor} />
+          ) : info.segments !== undefined && info.segments.length > 0 ? (
+            <SelectableText y={row} col={col} segments={info.segments} color={baseColor} messageLayer flow />
+          ) : (
+            <SelectableText
+              text={info.text || ' '}
+              y={row}
+              col={col}
+              color={baseColor}
+              messageLayer
+              flow
+            />
+          )}
+        </Box>
+      )
+    }
+    case 'header': {
+      const symbol = headerSymbol(info.collapsed)
+      const color = COLORS.toolLabel
+      return (
+        <Box>
+          {info.spinner ? (
+            <>
+              <SelectableText y={row} col={0} text={'  '} color={color} messageLayer />
+              <TickGlyph y={row} col={2} color={color} />
+            </>
+          ) : (
+            <SelectableText y={row} col={0} text={`  ${symbol} `} color={color} messageLayer />
+          )}
+          <SelectableText y={row} col={HEADER_LABEL_COL} text={info.label} color={color} messageLayer />
+        </Box>
+      )
+    }
+    case 'blank':
+      return <Text> </Text>
+  }
+  },
+  (prev, next) => {
+    if (prev.row !== next.row) return false
+    if (prev.themeTick !== next.themeTick) return false
+    const a = prev.info
+    const b = next.info
+    return (
+      a.kind === b.kind &&
+      a.text === b.text &&
+      a.label === b.label &&
+      a.role === b.role &&
+      a.muted === b.muted &&
+      a.background === b.background &&
+      a.backgroundWidth === b.backgroundWidth &&
+      a.colStart === b.colStart &&
+      a.selectable === b.selectable &&
+      a.clickable === b.clickable &&
+      a.collapsed === b.collapsed &&
+      a.thinking === b.thinking &&
+      a.segKey === b.segKey &&
+      a.spinner === b.spinner &&
+      a.wave === b.wave &&
+      a.accent === b.accent &&
+      a.lineBg === b.lineBg
+    )
+  },
+)
+
+function backgroundFor(role: RowInfo['role']): string {
+  return role === 'user' ? COLORS.userBubbleBackground : COLORS.aiBubbleBackground
+}

package/src/ui/message/message-views.ts

@@ -0,0 +1,16 @@
+import { keyedRegistry } from '../../kernel/registry.ts'
+import type { MessageViewContribution } from '../../contract/index.ts'
+
+const views = keyedRegistry<MessageViewContribution>()
+
+export function registerMessageView(contribution: MessageViewContribution): () => void {
+  return views.register(contribution.view, contribution, { order: contribution.order })
+}
+
+export function messageViewOf(view: string): MessageViewContribution | undefined {
+  return views.get(view)
+}
+
+export function subscribeMessageViews(listener: () => void): () => void {
+  return views.subscribe(listener)
+}

package/src/ui/message/renderers.ts

@@ -0,0 +1,39 @@
+import { keyedRegistry } from '../../kernel/registry.ts'
+import type { Message, MessageKind } from '../../model/message.ts'
+import type { Segment } from '../../core/segments.ts'
+
+export interface MessageRendererResult {
+  lines: string[]
+  rows?: Segment[][] | null
+  bgs?: (string | undefined)[] | null
+  /** Custom messages only: override the default view-key label. */
+  customLabel?: string
+  customMuted?: boolean
+}
+
+export interface MessageRendererContribution {
+  /** Message kind to take over: 'bubble' | 'collapsible' | 'tool-card' | 'compaction' | 'custom'. */
+  kind: MessageKind
+  order?: number
+  render(message: Message, width: number): MessageRendererResult | undefined
+}
+
+const renderers = keyedRegistry<MessageRendererContribution>()
+
+/**
+ * Kind-keyed takeover of builtin message body rendering. Builtin rendering
+ * stays inline in layout.ts and applies only when no override is registered,
+ * so a plugin can re-present todo bubbles, plan text, diff bodies, and even
+ * assistant bubbles. Disposal restores the builtin path.
+ */
+export function registerMessageRenderer(contribution: MessageRendererContribution): () => void {
+  return renderers.register(contribution.kind, contribution, { order: contribution.order })
+}
+
+export function messageRendererOf(kind: MessageKind): MessageRendererContribution | undefined {
+  return renderers.get(kind)
+}
+
+export function subscribeMessageRenderers(listener: () => void): () => void {
+  return renderers.subscribe(listener)
+}

package/src/ui/message/tool-diff.ts

@@ -0,0 +1,188 @@
+import { wrapSegments } from '../../core/segments.ts'
+import type { Segment } from '../../core/segments.ts'
+import { COLORS } from '../../theme.ts'
+import { highlightCodeBlock, LANGUAGE_ALIASES } from './md/highlight.ts'
+import type { DiffLine } from '../../model/message.ts'
+
+const FILENAME_LANGUAGES: Record<string, string> = {
+  makefile: 'makefile',
+  dockerfile: 'docker',
+  'cmakelists.txt': 'cmake',
+}
+
+export function languageFromPath(path: string): string {
+  const name = path.replace(/\\/g, '/').split('/').pop() ?? ''
+  const filename = FILENAME_LANGUAGES[name.toLowerCase()]
+  if (filename !== undefined) return filename
+  const dot = name.lastIndexOf('.')
+  if (dot < 0) return ''
+  return LANGUAGE_ALIASES[name.slice(dot + 1).toLowerCase()] ?? ''
+}
+
+const SNIFF_RULES: readonly (readonly [RegExp, string])[] = [
+  [/^#!.*\b(ba|z|k)?sh\b/, 'bash'],
+  [/^\s*<\?php/, 'php'],
+  [/^\s*<!DOCTYPE\s+html/i, 'markup'],
+  [/^\s*[{\[][\s\S]*"[^"]+"\s*:/, 'json'],
+  [/\b(?:def\s+\w+\s*\(|elif\s|from\s+\w+\s+import\b|__name__\s*==)/, 'python'],
+  [/\b(?:package\s+\w+[;\s]|func\s+\w*\(|import\s+"|\bnil\b)/, 'go'],
+  [/\bfn\s+\w+\s*\(|\blet\s+mut\b|\bimpl\s+\w+\s+for\b/, 'rust'],
+  [/\b(?:interface\s+\w+\s*[<{]|type\s+\w+\s*=\s*[^=]|:\s*(?:string|number|boolean)\b|export\s+(?:default|const|function|class|interface)\b|import\s+[\w{*}\s,]+\s+from\s+)/, 'typescript'],
+  [/\b(?:require\(|module\.exports|console\.log\(|function\s+\w+\s*\()/, 'javascript'],
+  [/=>|\bconst\s+\w+\s*=|\blet\s+\w+\s*=/, 'javascript'],
+  [/^\s*(?:SELECT\b|INSERT\s+INTO\b|CREATE\s+TABLE\b)/im, 'sql'],
+]
+
+export function sniffLanguage(content: string): string {
+  const sample = content.length > 4000 ? content.slice(0, 4000) : content
+  for (const [pattern, lang] of SNIFF_RULES) {
+    if (pattern.test(sample)) return lang
+  }
+  return ''
+}
+
+export interface ToolDiffBody {
+  lines: string[]
+  rows: Segment[][]
+  bgs: (string | undefined)[]
+}
+
+const PLAIN_STYLE = { color: COLORS.mdCodePlain }
+
+function splitHighlightedLines(source: string, lang: string, streamId: string): Segment[][] {
+  if (source === '') return []
+  const highlighted = highlightCodeBlock(source, lang, false, streamId)
+  const segments = highlighted ?? [{ text: source, style: PLAIN_STYLE }]
+  const out: Segment[][] = [[]]
+  for (const segment of segments) {
+    const parts = segment.text.split('\n')
+    for (let p = 0; p < parts.length; p++) {
+      if (p > 0) out.push([])
+      const part = parts[p]!
+      if (part !== '') out[out.length - 1]!.push({ text: part, style: segment.style })
+    }
+  }
+  return out
+}
+
+export interface ToolDiffLike {
+  tool?: string
+  path: string
+  hunks: readonly (readonly DiffLine[])[]
+  error?: string
+  /**
+   * Paint whole-line red/green backgrounds behind removed and added lines.
+   * Defaults to true when the diff contains any removal: a pure-addition card
+   * (a fresh file write) would otherwise read as one noisy column of green.
+   * Contributions set this explicitly to override the heuristic either way.
+   */
+  backgrounds?: boolean
+}
+
+function hasRemovals(hunks: readonly (readonly DiffLine[])[]): boolean {
+  return hunks.some(hunk => hunk.some(line => line.kind === 'del'))
+}
+
+export function renderToolDiffBody(message: ToolDiffLike, width: number): ToolDiffBody {
+  const budget = Math.max(4, width)
+  const bodyWidth = Math.max(2, budget - 2)
+  const lines: string[] = []
+  const rows: Segment[][] = []
+  const bgs: (string | undefined)[] = []
+  const sourceText = message.hunks.map(hunk => hunk.map(line => line.text).join('\n')).join('\n')
+  const fromPath = message.path === '' ? '' : languageFromPath(message.path)
+  const lang = fromPath !== '' ? fromPath : sniffLanguage(sourceText)
+  const withBackgrounds = message.backgrounds ?? hasRemovals(message.hunks)
+  for (const [hunkIndex, hunk] of message.hunks.entries()) {
+    const perLine = splitHighlightedLines(
+      hunk.map(line => line.text).join('\n'),
+      lang,
+      `${message.tool ?? ''}\u0000${message.path}\u0000${hunkIndex}`,
+    )
+    for (let index = 0; index < hunk.length; index++) {
+      const line = hunk[index]!
+      let bg: string | undefined
+      let prefix: Segment[]
+      if (line.kind === 'add') {
+        bg = withBackgrounds ? COLORS.diffAddedBackground : undefined
+        prefix = [{ text: '+', style: { color: COLORS.diffAdded } }, { text: ' ', style: {} }]
+      } else if (line.kind === 'del') {
+        bg = withBackgrounds ? COLORS.diffRemovedBackground : undefined
+        prefix = [{ text: '-', style: { color: COLORS.diffRemoved } }, { text: ' ', style: {} }]
+      } else {
+        prefix = [{ text: '  ', style: {} }]
+      }
+      const wrapped = wrapSegments(perLine[index] ?? [], bodyWidth)
+      for (let r = 0; r < wrapped.length; r++) {
+        const codeRow = wrapped[r] ?? []
+        const row = r === 0 ? [...prefix, ...codeRow] : [{ text: '  ', style: {} }, ...codeRow]
+        rows.push(row)
+        lines.push(row.map(segment => segment.text).join(''))
+        bgs.push(bg)
+      }
+    }
+  }
+  if (message.error !== undefined && message.error !== '') {
+    rows.push([])
+    lines.push('')
+    bgs.push(undefined)
+    const wrapped = wrapSegments([{ text: message.error, style: { color: COLORS.errorText } }], bodyWidth)
+    for (const segs of wrapped) {
+      rows.push(segs)
+      lines.push(segs.map(segment => segment.text).join(''))
+      bgs.push(undefined)
+    }
+  }
+  return { lines, rows, bgs }
+}
+
+export interface ToolReadLike {
+  path?: string
+  lines: readonly { number: number; text: string }[]
+  offset?: number
+  totalLines?: number
+  lang?: string
+}
+
+/**
+ * The read card body: a line-number gutter beside syntax-highlighted code,
+ * closed by a "lines N-M of total" footer when the window stops short of the
+ * end of the file. The gutter is part of the row segments, so the code column
+ * stays aligned across wraps.
+ */
+export function renderToolReadBody(view: ToolReadLike, width: number): ToolDiffBody {
+  const budget = Math.max(4, width)
+  const lines: string[] = []
+  const rows: Segment[][] = []
+  const bgs: (string | undefined)[] = []
+  const gutterWidth = view.lines.reduce((max, line) => Math.max(max, String(line.number).length), 1)
+  const codeWidth = Math.max(2, budget - gutterWidth - 1)
+  const source = view.lines.map(line => line.text).join('\n')
+  const fromPath = view.path === undefined || view.path === '' ? '' : languageFromPath(view.path)
+  const lang = view.lang !== undefined && view.lang !== ''
+    ? view.lang
+    : fromPath !== '' ? fromPath : sniffLanguage(source)
+  const perLine = splitHighlightedLines(source, lang, `read\u0000${view.path ?? ''}`)
+  for (const [index, line] of view.lines.entries()) {
+    const gutter = String(line.number).padStart(gutterWidth)
+    const prefix: Segment[] = [{ text: gutter, style: { color: COLORS.toolBodyText } }, { text: ' ', style: {} }]
+    const wrapped = wrapSegments(perLine[index] ?? [], codeWidth)
+    for (let r = 0; r < wrapped.length; r++) {
+      const row = r === 0 ? [...prefix, ...(wrapped[r] ?? [])] : [{ text: `${' '.repeat(gutterWidth)} `, style: {} }, ...(wrapped[r] ?? [])]
+      rows.push(row)
+      lines.push(row.map(segment => segment.text).join(''))
+      bgs.push(undefined)
+    }
+  }
+  const first = view.lines[0]?.number ?? view.offset ?? 1
+  const last = view.lines.length === 0 ? first - 1 : view.lines[view.lines.length - 1]!.number
+  if (view.totalLines !== undefined && view.totalLines > last) {
+    const text = view.lines.length === 0
+      ? `... empty window at line ${first} of ${view.totalLines}`
+      : `... lines ${first}-${last} of ${view.totalLines}`
+    rows.push([{ text, style: { color: COLORS.toolBodyText } }])
+    lines.push(text)
+    bgs.push(undefined)
+  }
+  return { lines, rows, bgs }
+}

package/src/ui/message/warmup.ts

@@ -0,0 +1,41 @@
+import { renderMarkdown } from './md/index.ts'
+import { buildRowIndex } from './layout.ts'
+import type { Message } from '../../model/message.ts'
+
+const MARKDOWN_FIXTURE = [
+  '# Heading',
+  '',
+  'Paragraph with **bold**, *italic*, `inline code` and a [link](https://example.com).',
+  '',
+  '- list item one',
+  '- list item two',
+  '',
+  '```ts',
+  'export function warm(input: string): number {',
+  '  return input.length + 1',
+  '}',
+  '```',
+  '',
+  '> quoted text',
+].join('\n')
+
+/**
+ * Run the markdown and row-layout pipeline once on a small fixture so the
+ * first real message does not pay one-time lexer, highlighter, and JIT
+ * initialization. Call during idle after the syntax languages finish warming.
+ */
+export function warmRenderPipeline(): void {
+  renderMarkdown(MARKDOWN_FIXTURE, 96)
+  renderMarkdown(MARKDOWN_FIXTURE, 72)
+  const messages: Message[] = [
+    { kind: 'home-logo', id: 'warm-logo', lines: ['██ ████'], colors: ['#7aa2f7'], info: ['dsh 0.0.0', 'dshtui 0.0.0'] },
+    { kind: 'bubble', id: 'warm-user', role: 'user', content: 'warm up the render pipeline' },
+    { kind: 'bubble', id: 'warm-ai', role: 'assistant', content: MARKDOWN_FIXTURE },
+    { kind: 'collapsible', id: 'warm-think', label: 'Thinking', body: 'thinking fixture body', running: false, collapsed: false, thinking: true },
+    { kind: 'tool-card', id: 'warm-diff', tool: 'edit', label: 'edit src/warm.ts', argsBody: '', diff: { path: 'src/warm.ts', hunks: [[{ kind: 'ctx', text: 'const keep = 1' }, { kind: 'add', text: 'const added = 2' }]] }, running: false },
+    { kind: 'tool-card', id: 'warm-card', tool: 'bash', label: 'bash[ls]', argsBody: '{\n  "command": "ls"\n}', resultBody: 'src\ntests', running: false },
+    { kind: 'bubble', id: 'warm-cmd', role: 'assistant', content: 'command output', origin: 'command' },
+  ]
+  const index = buildRowIndex(messages, 96)
+  for (let row = 0; row < index.total; row++) index.rowAt(row)
+}