@xp266/dshtui 0.1.0

package/src/contract/upstream.ts

@@ -0,0 +1,165 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+export const UPSTREAM_FLOOR_VERSION = '0.1.0-rc.6'
+
+export const UPSTREAM_CEILING_VERSION = '0.2.0'
+
+export const UPSTREAM_FRAMEWORK_MAJORS: Record<string, number> = {
+  '@deepseek-ai/cordis': 4,
+  '@deepseek-ai/schemastery': 3,
+}
+
+export const UPSTREAM_BLESSED_PACKAGES = [
+  '@deepseek-ai/cordis',
+  '@deepseek-ai/schemastery',
+  '@deepseek-ai/dsh-agent',
+  '@deepseek-ai/dsh-agent-default-model',
+  '@deepseek-ai/dsh-agent-loop',
+  '@deepseek-ai/dsh-agent-presets',
+  '@deepseek-ai/dsh-attachment',
+  '@deepseek-ai/dsh-credentials',
+  '@deepseek-ai/dsh-llm',
+  '@deepseek-ai/dsh-session',
+  '@deepseek-ai/dsh-settings',
+] as const
+
+export interface UpstreamDriftEntry {
+  package: string
+  installed: string | undefined
+  expected: string
+}
+
+export type UpstreamChannel = 'alpha' | 'beta' | 'rc' | 'stable'
+
+export type UpstreamVersionTuple = readonly [number, number, number, UpstreamChannel, number]
+
+export function parseUpstreamVersion(version: string | undefined): UpstreamVersionTuple | undefined {
+  const match = /^(\d+)\.(\d+)\.(\d+)(?:-(alpha|beta|rc)\.(\d+))?$/u.exec(version ?? '')
+  if (match === null) return undefined
+  const channel = (match[4] ?? 'stable') as UpstreamChannel
+  const revision = match[5] === undefined ? 0 : Number(match[5])
+  return [Number(match[1]), Number(match[2]), Number(match[3]), channel, revision]
+}
+
+export function compareVersions(a: UpstreamVersionTuple, b: UpstreamVersionTuple): number {
+  for (const index of [0, 1, 2] as const) {
+    if (a[index] > b[index]) return 1
+    if (a[index] < b[index]) return -1
+  }
+  const channelRank = { alpha: 0, beta: 1, rc: 2, stable: 3 } as const
+  const channelOrder = channelRank[a[3]] - channelRank[b[3]]
+  return channelOrder !== 0 ? channelOrder : a[4] - b[4]
+}
+
+export const UPSTREAM_SUPPORTED_RANGE = `>=${UPSTREAM_FLOOR_VERSION} <${UPSTREAM_CEILING_VERSION}`
+
+export function isCompatibleUpstreamVersion(version: string | undefined): boolean {
+  const parsed = parseUpstreamVersion(version)
+  const floor = parseUpstreamVersion(UPSTREAM_FLOOR_VERSION)
+  const ceiling = parseUpstreamVersion(UPSTREAM_CEILING_VERSION)
+  if (parsed === undefined || floor === undefined || ceiling === undefined) return false
+  const exclusiveCeiling: UpstreamVersionTuple = [ceiling[0], ceiling[1], ceiling[2], 'alpha', 0]
+  return compareVersions(parsed, floor) >= 0 && compareVersions(parsed, exclusiveCeiling) < 0
+}
+
+function resolvePackageJson(packageName: string): string | undefined {
+  try {
+    const path = import.meta.resolve(`${packageName}/package.json`)
+    return path.startsWith('file:') ? fileURLToPath(path) : path
+  } catch {
+    // The package is not installed in this profile; it counts as missing.
+    return undefined
+  }
+}
+
+let cachedVersions: Record<string, string | undefined> | undefined
+
+export function installedUpstreamVersions(): Record<string, string | undefined> {
+  if (cachedVersions !== undefined) return cachedVersions
+  const result: Record<string, string | undefined> = {}
+  for (const packageName of UPSTREAM_BLESSED_PACKAGES) {
+    let version: string | undefined
+    const path = resolvePackageJson(packageName)
+    if (path !== undefined) {
+      try {
+        version = (JSON.parse(readFileSync(path, 'utf8')) as { version?: string }).version
+      } catch {
+        // An unreadable package.json counts as an unknown version.
+        version = undefined
+      }
+    }
+    result[packageName] = version
+  }
+  cachedVersions = Object.freeze(result)
+  return cachedVersions
+}
+
+export function installedUpstreamLines(
+  installedVersions: Readonly<Record<string, string | undefined>> = installedUpstreamVersions(),
+): string[] {
+  const lines = new Set<string>()
+  for (const packageName of UPSTREAM_BLESSED_PACKAGES) {
+    if (UPSTREAM_FRAMEWORK_MAJORS[packageName] !== undefined) continue
+    const version = installedVersions[packageName]
+    if (version !== undefined && parseUpstreamVersion(version) !== undefined) lines.add(version)
+  }
+  return [...lines].sort((a, b) => compareVersions(parseUpstreamVersion(a)!, parseUpstreamVersion(b)!))
+}
+
+export function upstreamDrift(
+  installedVersions: Readonly<Record<string, string | undefined>> = installedUpstreamVersions(),
+): UpstreamDriftEntry[] {
+  const drift: UpstreamDriftEntry[] = []
+  for (const [packageName, installed] of Object.entries(installedVersions)) {
+    const frameworkMajor = UPSTREAM_FRAMEWORK_MAJORS[packageName]
+    const matches = frameworkMajor !== undefined
+      ? Number((installed ?? '').split('.')[0]) === frameworkMajor
+      : isCompatibleUpstreamVersion(installed)
+    if (!matches) {
+      drift.push({
+        package: packageName,
+        installed,
+        expected: frameworkMajor !== undefined ? `major ${frameworkMajor}` : UPSTREAM_SUPPORTED_RANGE,
+      })
+    }
+  }
+  return drift
+}
+
+export type UpstreamDriftKind = 'newer' | 'older' | 'mixed' | 'broken'
+
+export interface UpstreamDriftSummary {
+  kind: UpstreamDriftKind
+  versions: string[]
+}
+
+export function upstreamDriftSummary(
+  installedVersions: Readonly<Record<string, string | undefined>> = installedUpstreamVersions(),
+): UpstreamDriftSummary | undefined {
+  const drift = upstreamDrift(installedVersions)
+  if (drift.length === 0) return undefined
+  const harness = drift.filter(entry => UPSTREAM_FRAMEWORK_MAJORS[entry.package] === undefined)
+  const versions = [...new Set(drift.map(entry => entry.installed ?? 'missing'))]
+  let kind: UpstreamDriftKind
+  if (harness.length === 0) {
+    kind = 'broken'
+  } else {
+    const parsed = harness
+      .map(entry => parseUpstreamVersion(entry.installed))
+      .filter((entry): entry is UpstreamVersionTuple => entry !== undefined)
+    if (parsed.length !== harness.length) {
+      kind = 'broken'
+    } else {
+      const floor = parseUpstreamVersion(UPSTREAM_FLOOR_VERSION)!
+      const ceiling = parseUpstreamVersion(UPSTREAM_CEILING_VERSION)!
+      const exclusiveCeiling: UpstreamVersionTuple = [ceiling[0], ceiling[1], ceiling[2], 'alpha', 0]
+      const allNewer = parsed.every(entry => compareVersions(entry, exclusiveCeiling) >= 0)
+      const allOlder = parsed.every(entry => compareVersions(entry, floor) < 0)
+      if (allNewer) kind = 'newer'
+      else if (allOlder) kind = 'older'
+      else kind = 'mixed'
+    }
+  }
+  return { kind, versions }
+}

package/src/core/caret-nonce.ts

@@ -0,0 +1,19 @@
+/**
+ * Ink 7.1.1 places the caret one row high on the rewrite path; every caret
+ * move changes these frame bytes so the diff renderer stays on the rewrite
+ * path that useCaret() compensates for. The variant span exceeds any
+ * terminal width, so no frame follows the misplaced cursor-only path.
+ */
+const NONCE_SPAN = 240
+
+export function caretNonceColor(cursor: number): string {
+  return `ansi256(${16 + (cursor % NONCE_SPAN)})`
+}
+
+export function caretNonceText(cursor: number): string {
+  return Math.floor(cursor / NONCE_SPAN) % 2 === 0 ? ' ' : '\u00a0'
+}
+
+export function caretNonceBold(cursor: number): boolean {
+  return Math.floor(cursor / (NONCE_SPAN * 2)) % 2 === 0
+}

package/src/core/composer-layout.ts

@@ -0,0 +1,65 @@
+import { CHROME_FRAME_ROWS, INPUT_WIDTH_OFFSET } from './metrics.ts'
+import { colToCharIndex, lineBreaks, locToPoint, textWidth, wrapLines } from './text.ts'
+
+export const INPUT_MAX_CONTENT_ROWS = 8
+
+export interface InputLayout {
+  lines: string[]
+  cursorRow: number
+  cursorCol: number
+  realRows: number
+  barHeight: number
+  visibleStart: number
+}
+
+export function inputLayout(value: string, cursor: number, width: number): InputLayout {
+  const contentWidth = width - INPUT_WIDTH_OFFSET
+  const lines: string[] = []
+  const segmentStarts: number[] = []
+  let charOffset = 0
+  for (const raw of value.split('\n')) {
+    const wrapped = wrapLines(raw, contentWidth)
+    let offset = 0
+    for (const segment of wrapped) {
+      lines.push(segment)
+      segmentStarts.push(charOffset + offset)
+      offset += segment.length
+    }
+    charOffset += raw.length + 1
+  }
+  const clamped = Math.max(0, Math.min(cursor, value.length))
+  let cursorRow = lines.length - 1
+  let cursorCol = 0
+  for (let i = 0; i < lines.length; i++) {
+    const start = segmentStarts[i]!
+    const end = start + lines[i]!.length
+    if (clamped < end || i === lines.length - 1 || clamped < segmentStarts[i + 1]!) {
+      cursorRow = i
+      cursorCol = textWidth(lines[i]!.slice(0, clamped - start))
+      break
+    }
+  }
+  const realRows = Math.min(lines.length, INPUT_MAX_CONTENT_ROWS - 1)
+  const maxVisibleReal = INPUT_MAX_CONTENT_ROWS - 1
+  const visibleStart = Math.min(
+    Math.max(0, cursorRow - (maxVisibleReal - 1)),
+    Math.max(0, lines.length - maxVisibleReal),
+  )
+  return {
+    lines,
+    cursorRow,
+    cursorCol,
+    realRows,
+    barHeight: realRows + CHROME_FRAME_ROWS,
+    visibleStart,
+  }
+}
+
+export function moveCaretLine(value: string, cursor: number, wrapWidth: number, delta: -1 | 1): number {
+  const breaks = lineBreaks(value, wrapWidth)
+  const point = locToPoint(value, wrapWidth, cursor)
+  const targetRow = point.row + delta
+  if (targetRow < 0 || targetRow >= breaks.length) return cursor
+  const target = breaks[targetRow]!
+  return target.start + colToCharIndex(value.slice(target.start, target.end), point.col)
+}

package/src/core/edit.ts

@@ -0,0 +1,152 @@
+import { segmentGraphemes } from './text.ts'
+
+export interface EditState {
+  value: string
+  cursor: number
+}
+
+function clamp(state: EditState, cursor: number): EditState {
+  return { value: state.value, cursor: Math.max(0, Math.min(cursor, state.value.length)) }
+}
+
+interface Span {
+  start: number
+  end: number
+}
+
+function spanAtOrBefore(value: string, cursor: number): Span | undefined {
+  for (const segment of segmentGraphemes(value)) {
+    const end = segment.index + segment.segment.length
+    if (end >= cursor) return { start: segment.index, end }
+  }
+  return undefined
+}
+
+function spanAtOrAfter(value: string, cursor: number): Span | undefined {
+  for (const segment of segmentGraphemes(value)) {
+    if (segment.index >= cursor) return { start: segment.index, end: segment.index + segment.segment.length }
+  }
+  return undefined
+}
+
+export function editInsert(state: EditState, text: string): EditState {
+  if (text === '') return clamp(state, state.cursor)
+  const cursor = Math.max(0, Math.min(state.cursor, state.value.length))
+  return {
+    value: state.value.slice(0, cursor) + text + state.value.slice(cursor),
+    cursor: cursor + text.length,
+  }
+}
+
+export function editBackspace(state: EditState): EditState | null {
+  if (state.cursor <= 0) return null
+  const span = spanAtOrBefore(state.value, state.cursor)
+  if (span === undefined) return null
+  return {
+    value: state.value.slice(0, span.start) + state.value.slice(span.end),
+    cursor: span.start,
+  }
+}
+
+export function editDelete(state: EditState): EditState | null {
+  if (state.cursor >= state.value.length) return null
+  const span = spanAtOrAfter(state.value, state.cursor)
+  if (span === undefined) return null
+  return {
+    value: state.value.slice(0, state.cursor) + state.value.slice(span.end),
+    cursor: state.cursor,
+  }
+}
+
+export function editCursorLeft(state: EditState): EditState {
+  if (state.cursor <= 0) return state
+  const span = spanAtOrBefore(state.value, state.cursor)
+  return clamp(state, span === undefined ? state.cursor - 1 : span.start)
+}
+
+export function editCursorRight(state: EditState): EditState {
+  if (state.cursor >= state.value.length) return state
+  const span = spanAtOrAfter(state.value, state.cursor)
+  return clamp(state, span === undefined ? state.cursor + 1 : span.end)
+}
+
+const SEPARATOR_RANGES: ReadonlyArray<readonly [number, number]> = [
+  [0x2010, 0x2027],
+  [0x3000, 0x303f],
+  [0xff01, 0xff0f],
+  [0xff1a, 0xff20],
+  [0xff3b, 0xff40],
+  [0xff5b, 0xff65],
+  [0xffe0, 0xffe4],
+]
+
+function isAsciiWordChar(code: number): boolean {
+  return (code >= 97 && code <= 122) || (code >= 65 && code <= 90) || (code >= 48 && code <= 57) || code === 95
+}
+
+function isLineBreakAt(value: string, index: number): boolean {
+  const code = value.charCodeAt(index)
+  return code === 10 || code === 13
+}
+
+function isSeparatorAt(value: string, index: number): boolean {
+  const code = value.charCodeAt(index)
+  if (code === 10 || code === 13) return true
+  if (isAsciiWordChar(code)) return false
+  if (code >= 0x80) {
+    for (const [start, end] of SEPARATOR_RANGES) {
+      if (code >= start && code <= end) return true
+    }
+    return false
+  }
+  if (code === 0x20) return true
+  return code >= 0x21 && code <= 0x7e
+}
+
+function wordLeftBoundary(value: string, cursor: number): number {
+  let i = cursor - 1
+  while (i >= 0 && !isLineBreakAt(value, i) && isSeparatorAt(value, i)) i--
+  while (i >= 0 && !isSeparatorAt(value, i)) i--
+  return i + 1
+}
+
+function wordRightBoundary(value: string, cursor: number): number {
+  if (cursor >= value.length) return cursor
+  if (!isSeparatorAt(value, cursor)) {
+    let i = cursor
+    while (i < value.length && !isSeparatorAt(value, i)) i++
+    return i
+  }
+  let i = cursor
+  while (i < value.length && !isLineBreakAt(value, i) && isSeparatorAt(value, i)) i++
+  while (i < value.length && !isSeparatorAt(value, i)) i++
+  return i
+}
+
+export function editCursorWordLeft(state: EditState): EditState {
+  const boundary = wordLeftBoundary(state.value, state.cursor)
+  return boundary >= state.cursor ? state : { value: state.value, cursor: boundary }
+}
+
+export function editCursorWordRight(state: EditState): EditState {
+  const boundary = wordRightBoundary(state.value, state.cursor)
+  return boundary <= state.cursor ? state : { value: state.value, cursor: boundary }
+}
+
+export function editDeleteWordLeft(state: EditState): EditState | null {
+  const boundary = wordLeftBoundary(state.value, state.cursor)
+  if (boundary >= state.cursor) return null
+  return {
+    value: state.value.slice(0, boundary) + state.value.slice(state.cursor),
+    cursor: boundary,
+  }
+}
+
+export function editDeleteWordRight(state: EditState): EditState | null {
+  const boundary = wordRightBoundary(state.value, state.cursor)
+  if (boundary <= state.cursor) return null
+  return {
+    value: state.value.slice(0, state.cursor) + state.value.slice(boundary),
+    cursor: state.cursor,
+  }
+}

package/src/core/field-view.ts

@@ -0,0 +1,52 @@
+import { fieldSlotOf, fieldStyleOf, hasFieldChar, isFieldChar } from './fields.ts'
+import type { FieldStyle } from './fields.ts'
+import type { MarkStyle, Segment } from './segments.ts'
+
+export function expandFieldChars(text: string): string {
+  if (!hasFieldChar(text)) return text
+  let out = ''
+  for (const char of text) {
+    if (!isFieldChar(char)) {
+      out += char
+      continue
+    }
+    const slot = fieldSlotOf(char)
+    // A slotless field char (reclaimed or foreign sentinel) would render as
+    // a raw block glyph; drop it instead of emitting the code point.
+    out += slot === undefined ? '' : slot.label
+  }
+  return out
+}
+
+export function fieldRowSegments(text: string, base?: MarkStyle): Segment[] {
+  const out: Segment[] = []
+  let plain = ''
+  const flushPlain = (): void => {
+    if (plain === '') return
+    out.push({ text: plain, style: base ?? {} })
+    plain = ''
+  }
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i]!
+    const slot = fieldSlotOf(char)
+    if (slot === undefined) {
+      // A slotless field char renders as a raw block glyph; omit it and keep
+      // the surrounding plain run merged.
+      if (!isFieldChar(char)) plain += char
+      continue
+    }
+    flushPlain()
+    const style = fieldStyleOf(slot)
+    out.push({ text: slot.label, style: styleToMark(style) })
+  }
+  flushPlain()
+  return out
+}
+
+function styleToMark(style: FieldStyle): MarkStyle {
+  return {
+    color: style.color,
+    background: style.background,
+    ...(style.bold === true ? { bold: true } : {}),
+  }
+}

package/src/core/fields.ts

@@ -0,0 +1,185 @@
+import stringWidth from 'string-width'
+import { COLORS } from '../theme.ts'
+
+const FIELD_CHAR_BASE = 0xe000
+const FIELD_CHAR_END = 0xf8ff
+const FIELD_CHAR_COUNT = FIELD_CHAR_END - FIELD_CHAR_BASE + 1
+
+export type FieldOwner = 'composer' | 'message'
+
+export interface FieldStyle {
+  color: string
+  background: string
+  bold?: boolean
+}
+
+export interface FieldKindDef {
+  kind: string
+  style(): FieldStyle
+  /** Text injected into the sent message for a field of this kind; defaults to the label. */
+  expand?(data: unknown): string
+}
+
+export interface SpecialFieldCreateInput {
+  kind: string
+  label: string
+  owner?: FieldOwner
+}
+
+export interface SpecialFieldFactory {
+  create(input: SpecialFieldCreateInput): string | null
+  release(char: string): void
+  /** Protect a chip from the automatic reclaim scans until the disposer runs. */
+  pin(char: string): (() => void) | undefined
+  isFieldChar(char: string): boolean
+  labelOf(char: string): string | undefined
+}
+
+interface FieldSlot {
+  kind: string
+  label: string
+  owner: FieldOwner
+  pins: number
+}
+
+const slots = new Map<number, FieldSlot>()
+const kindDefs = new Map<string, FieldKindDef>()
+const labelWidthCache = new Map<string, number>()
+let cursor = 0
+
+export function specialFieldStyle(): FieldStyle {
+  return { color: COLORS.specialFieldText, background: COLORS.specialFieldBackground, bold: true }
+}
+
+export function registerFieldKind(def: FieldKindDef): () => void {
+  kindDefs.set(def.kind, def)
+  return () => {
+    if (kindDefs.get(def.kind) === def) kindDefs.delete(def.kind)
+  }
+}
+
+export function fieldStyleOf(slot: FieldSlot): FieldStyle {
+  const def = kindDefs.get(slot.kind)
+  if (def !== undefined) return def.style()
+  return specialFieldStyle()
+}
+
+export function fieldExpandOf(kind: string): ((data: unknown) => string) | undefined {
+  return kindDefs.get(kind)?.expand
+}
+
+export function specialFieldFactory(): SpecialFieldFactory {
+  return {
+    create: input => allocateField(input.kind, input.label, input.owner ?? 'composer'),
+    release: releaseField,
+    pin: pinField,
+    isFieldChar,
+    labelOf: char => fieldSlotOf(char)?.label,
+  }
+}
+
+export function isFieldCode(code: number): boolean {
+  return code >= FIELD_CHAR_BASE && code <= FIELD_CHAR_END
+}
+
+export function hasFieldChar(text: string): boolean {
+  for (let i = 0; i < text.length; i++) {
+    if (isFieldCode(text.charCodeAt(i))) return true
+  }
+  return false
+}
+
+export function isFieldChar(char: string): boolean {
+  return char.length === 1 && isFieldCode(char.charCodeAt(0))
+}
+
+export function fieldCodeWidth(code: number): number {
+  const slot = slots.get(code - FIELD_CHAR_BASE)
+  if (slot === undefined) return 1
+  return labelWidth(slot.label)
+}
+
+function labelWidth(label: string): number {
+  const hit = labelWidthCache.get(label)
+  if (hit !== undefined) return hit
+  const width = stringWidth(label)
+  if (labelWidthCache.size >= 4096) labelWidthCache.clear()
+  labelWidthCache.set(label, width)
+  return width
+}
+
+export function allocateField(kind: string, label: string, owner: FieldOwner): string | null {
+  for (let i = 0; i < FIELD_CHAR_COUNT; i++) {
+    const index = (cursor + i) % FIELD_CHAR_COUNT
+    if (slots.has(index)) continue
+    cursor = (index + 1) % FIELD_CHAR_COUNT
+    slots.set(index, { kind, label, owner, pins: 0 })
+    return String.fromCharCode(FIELD_CHAR_BASE + index)
+  }
+  return null
+}
+
+export function fieldSlotOf(char: string): FieldSlot | undefined {
+  if (char.length !== 1) return undefined
+  const code = char.charCodeAt(0)
+  if (!isFieldCode(code)) return undefined
+  return slots.get(code - FIELD_CHAR_BASE)
+}
+
+export function releaseField(char: string): void {
+  if (char.length !== 1) return
+  const index = char.charCodeAt(0) - FIELD_CHAR_BASE
+  const slot = slots.get(index)
+  if (slot === undefined || slot.pins > 0) return
+  slots.delete(index)
+}
+
+/**
+ * Hold a field slot against the automatic reclaim scans (composer edits and
+ * message-list rebuilds drop every slot whose char is absent from the live
+ * text). Callers that create chips outside the composer value — custom
+ * windows, overlays, background tasks — must pin them and call the returned
+ * disposer when done.
+ */
+export function pinField(char: string): (() => void) | undefined {
+  if (char.length !== 1) return undefined
+  const slot = slots.get(char.charCodeAt(0) - FIELD_CHAR_BASE)
+  if (slot === undefined) return undefined
+  slot.pins += 1
+  return () => {
+    slot.pins -= 1
+  }
+}
+
+export function hasFieldSlots(owner: FieldOwner): boolean {
+  for (const slot of slots.values()) {
+    if (slot.owner === owner) return true
+  }
+  return false
+}
+
+export function releaseUnreferenced(owner: FieldOwner, keepText: string): void {
+  for (const [index, slot] of slots) {
+    if (slot.owner !== owner || slot.pins > 0) continue
+    const char = String.fromCharCode(FIELD_CHAR_BASE + index)
+    if (!keepText.includes(char)) slots.delete(index)
+  }
+}
+
+export function releaseFields(owner: FieldOwner): void {
+  for (const [index, slot] of slots) {
+    if (slot.owner === owner && slot.pins === 0) slots.delete(index)
+  }
+}
+
+export function imageChipLabel(count: number): string {
+  return `[${count} images]`
+}
+
+export function linesChipLabel(count: number): string {
+  return `[${count} lines]`
+}
+
+export function charactersChipLabel(count: number): string {
+  return `[${count} characters]`
+}

package/src/core/metrics.ts

@@ -0,0 +1,26 @@
+export const CHROME_MARGIN_X = 2
+export const CHROME_PAD_X = 2
+export const CHROME_TEXT_X = CHROME_MARGIN_X + CHROME_PAD_X
+export const CHROME_FRAME_ROWS = 4
+
+export const MESSAGE_INPUT_GAP_ROWS = 1
+export const HINT_INPUT_GAP_ROWS = 1
+
+export const INPUT_WIDTH_OFFSET = CHROME_MARGIN_X * 2 + CHROME_PAD_X * 2
+
+export const BUBBLE_WIDTH_OFFSET = 8
+export const HEADER_LABEL_COL = 4
+export const SCROLLBAR_COL_FROM_EDGE = 3
+export const SCROLLBAR_GAP_COLS = 1
+
+export function inputFrameTop(rows: number, realRows: number): number {
+  return rows - CHROME_FRAME_ROWS - realRows
+}
+
+export function inputStatusRow(rows: number): number {
+  return rows - CHROME_FRAME_ROWS + 1
+}
+
+export function hintBlockTop(rows: number, inputHeight: number, visibleCount: number): number {
+  return Math.max(0, rows - inputHeight - MESSAGE_INPUT_GAP_ROWS - visibleCount)
+}