@xp266/dshtui 0.1.0

package/src/ui/home-logo.ts

@@ -0,0 +1,132 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { useMemo, useSyncExternalStore } from 'react'
+import { installedUpstreamLines } from '../contract/upstream.ts'
+import { BUBBLE_WIDTH_OFFSET } from '../core/metrics.ts'
+import type { HomeLogoMessage } from '../model/message.ts'
+import { keyedRegistry } from '../kernel/registry.ts'
+import { textWidth } from '../core/text.ts'
+import { COLORS } from '../theme.ts'
+
+export interface HomeLogoContribution {
+  id: string
+  order?: number
+  /** Logo artwork, one string per terminal row. */
+  lines: readonly string[]
+}
+
+const BUILTIN_LOGO_LINES = [
+  '▀█▀▀▄                   ▄▀▀▀▄             ▀█',
+  ' █  █ ▄▀▀▀▄ ▄▀▀▀▄ ▀█▀▀▄ ▀▄▄▄  ▄▀▀▀▄ ▄▀▀▀▄  █ ▄▀',
+  ' █  █ █▀▀▀▀ █▀▀▀▀  █▄▄▀ ▄   █ █▀▀▀▀ █▀▀▀▀  █▀▄',
+  '▀▀▀▀   ▀▀▀   ▀▀▀   █     ▀▀▀   ▀▀▀   ▀▀▀  ▀▀  ▀',
+  '█   █             ▀▀▀',
+  '█▄▄▄█ ▀▀▀▄  ▀█▄▀▄ █▄▀▀▄ ▄▀▀▀▄ ▄▀▀▀ ▄▀▀▀',
+  '█   █ ▄▀▀█   █  ▀ █   █ █▀▀▀▀  ▀▀▄  ▀▀▄',
+  '▀   ▀  ▀▀ ▀ ▀▀▀   ▀   ▀  ▀▀▀  ▀▀▀  ▀▀▀',
+]
+
+const SLOT = 'home-logo'
+const HOME_LOGO_BUILTIN_ORDER = 1000
+const registry = keyedRegistry<HomeLogoContribution>()
+
+registry.register(SLOT, { id: 'builtin', order: HOME_LOGO_BUILTIN_ORDER, lines: BUILTIN_LOGO_LINES }, { order: HOME_LOGO_BUILTIN_ORDER })
+
+export function registerHomeLogo(contribution: HomeLogoContribution): () => void {
+  return registry.register(SLOT, contribution, { order: contribution.order })
+}
+
+export function currentHomeLogo(): HomeLogoContribution | undefined {
+  return registry.get(SLOT)
+}
+
+export function subscribeHomeLogo(listener: () => void): () => void {
+  return registry.subscribe(listener)
+}
+
+export function useHomeLogo(): HomeLogoContribution | undefined {
+  return useSyncExternalStore(subscribeHomeLogo, currentHomeLogo, currentHomeLogo)
+}
+
+/** Mix two hex colors linearly; t=0 keeps `from`, t=1 keeps `to`. */
+export function mixHex(from: string, to: string, t: number): string {
+  const clamp = Math.max(0, Math.min(1, t))
+  const mix = (at: number): string => {
+    const a = parseInt(from.slice(at, at + 2), 16)
+    const b = parseInt(to.slice(at, at + 2), 16)
+    return Math.round(a + (b - a) * clamp).toString(16).padStart(2, '0')
+  }
+  return `#${mix(1)}${mix(3)}${mix(5)}`
+}
+
+export interface HomeLogoMetrics {
+  rows: number
+  columns: number
+}
+
+/** Trimmed display extent of the artwork; used for the small-terminal guard. */
+export function homeLogoMetrics(lines: readonly string[]): HomeLogoMetrics {
+  let columns = 0
+  for (const raw of lines) {
+    const width = textWidth(raw.trimEnd())
+    if (width > columns) columns = width
+  }
+  return { rows: lines.length, columns }
+}
+
+/** One color per artwork row, graded from `top` to `bottom`. */
+export function homeLogoLineColors(lines: readonly string[], top: string, bottom: string): string[] {
+  const count = lines.length
+  if (count === 0) return []
+  if (count === 1) return [top]
+  const step = 1 / (count - 1)
+  return lines.map((_, i) => mixHex(top, bottom, i * step))
+}
+
+const HOME_LOGO_ID = 'home-logo'
+
+/**
+ * The home page presents its content in chat-page style: the logo artwork is
+ * the first bubble, left-aligned with a transparent background, followed by
+ * version banner lines inside the same bubble. `width` is the full list
+ * width and `height` the visible viewport; when either cannot hold the
+ * artwork, only the artwork lines are culled and the bubble stays.
+ */
+export function useHomeLogoBubble(width: number, height: number): HomeLogoMessage {
+  const logo = useHomeLogo()
+  return useMemo(() => homeLogoBubble(logo, width, height), [logo, width, height])
+}
+
+function homeLogoBubble(logo: HomeLogoContribution | undefined, width: number, height: number): HomeLogoMessage {
+  const clean = logo?.lines.map(line => line.trimEnd()) ?? []
+  const metrics = homeLogoMetrics(clean)
+  const fits = clean.length > 0 && width - BUBBLE_WIDTH_OFFSET >= metrics.columns && height >= metrics.rows
+  return {
+    kind: 'home-logo',
+    id: HOME_LOGO_ID,
+    lines: fits ? clean : [],
+    colors: fits ? homeLogoLineColors(clean, COLORS.homeLogoTop, COLORS.homeLogoBottom) : [],
+    info: [dshVersionLine(), `dshtui ${tuiVersion()}`],
+  }
+}
+
+function dshVersionLine(): string {
+  // dsh-agent itself does not export ./package.json, so the version comes
+  // from the lockstepped harness line any sibling package exposes.
+  return `dsh ${installedUpstreamLines()[0] ?? 'unknown'}`
+}
+
+let cachedTuiVersion: string | undefined
+
+function tuiVersion(): string {
+  if (cachedTuiVersion !== undefined) return cachedTuiVersion
+  try {
+    const path = fileURLToPath(import.meta.resolve('@xp266/dshtui/package.json'))
+    const manifest = JSON.parse(readFileSync(path, 'utf8')) as { version?: string }
+    cachedTuiVersion = manifest.version ?? 'unknown'
+  } catch {
+    // The manifest may be unreadable in unusual install layouts; the bubble still renders.
+    cachedTuiVersion = 'unknown'
+  }
+  return cachedTuiVersion
+}

package/src/ui/hooks/use-async-action.ts

@@ -0,0 +1,25 @@
+import { useCallback, useState } from 'react'
+import { errorText } from '../../core/text.ts'
+
+export type AsyncActionResult<T> = { ok: true; value: T } | { ok: false }
+
+export interface AsyncActionState {
+  error: string | null
+  setError(error: string | null): void
+  clearError(): void
+  run<T>(action: () => Promise<T>): Promise<AsyncActionResult<T>>
+}
+
+export function useAsyncAction(): AsyncActionState {
+  const [error, setError] = useState<string | null>(null)
+  const clearError = useCallback(() => setError(null), [])
+  const run = useCallback(async <T,>(action: () => Promise<T>): Promise<AsyncActionResult<T>> => {
+    try {
+      return { ok: true, value: await action() }
+    } catch (cause) {
+      setError(errorText(cause))
+      return { ok: false }
+    }
+  }, [])
+  return { error, setError, clearError, run }
+}

package/src/ui/hooks/use-async-list.ts

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { errorText } from '../../core/text.ts'
+
+export interface AsyncListState<T> {
+  items: T[]
+  loading: boolean
+  error: string | null
+  reload(): void
+  remove(predicate: (item: T) => boolean): void
+}
+
+const LOADING_HINT_DELAY_MS = 120
+
+export function useAsyncList<T>(load: () => Promise<T[]>): AsyncListState<T> {
+  const [items, setItems] = useState<T[]>([])
+  const itemsRef = useRef(items)
+  itemsRef.current = items
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const loadRef = useRef(load)
+  loadRef.current = load
+  const cancelRef = useRef<(() => void) | null>(null)
+  const hintTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const clearHintTimer = (): void => {
+    if (hintTimerRef.current !== null) {
+      clearTimeout(hintTimerRef.current)
+      hintTimerRef.current = null
+    }
+  }
+  const reload = useCallback(() => {
+    cancelRef.current?.()
+    clearHintTimer()
+    const cancelled = { current: false }
+    cancelRef.current = () => {
+      cancelled.current = true
+    }
+    setLoading(false)
+    hintTimerRef.current = setTimeout(() => {
+      if (!cancelled.current && itemsRef.current.length === 0) setLoading(true)
+    }, LOADING_HINT_DELAY_MS)
+    loadRef.current()
+      .then(next => {
+        if (cancelled.current) return
+        itemsRef.current = next
+        setItems(next)
+        setError(null)
+      })
+      .catch(cause => {
+        if (cancelled.current) return
+        setError(errorText(cause))
+      })
+      .finally(() => {
+        if (cancelled.current) return
+        clearHintTimer()
+        setLoading(false)
+      })
+  }, [])
+  const remove = useCallback((predicate: (item: T) => boolean) => {
+    const next = itemsRef.current.filter(item => !predicate(item))
+    itemsRef.current = next
+    setItems(next)
+  }, [])
+  useEffect(() => {
+    reload()
+    return () => {
+      cancelRef.current?.()
+      clearHintTimer()
+    }
+  }, [reload])
+  return { items, loading, error, reload, remove }
+}

package/src/ui/hooks/use-caret.ts

@@ -0,0 +1,24 @@
+import { useCursor } from 'ink'
+import { useCallback } from 'react'
+
+export interface CaretPosition {
+  x: number
+  y: number
+}
+
+/**
+ * Ink 7.1.1 rests the hardware cursor one row above where frames without a
+ * trailing newline end; this layout fills the viewport, so request one row
+ * lower.
+ */
+export function useCaret(): { setCursorPosition(position: CaretPosition | undefined): void } {
+  const { setCursorPosition } = useCursor()
+  const adjusted = useCallback((position: CaretPosition | undefined) => {
+    if (position === undefined) {
+      setCursorPosition(undefined)
+      return
+    }
+    setCursorPosition({ x: position.x, y: position.y + 1 })
+  }, [setCursorPosition])
+  return { setCursorPosition: adjusted }
+}

package/src/ui/hooks/use-chat-events.ts

@@ -0,0 +1,153 @@
+import { useEffect, useRef, useState } from 'react'
+import type { SessionEvent } from '@deepseek-ai/dsh-session'
+import type { ChatBridge, ChatToolPresenter, RegistryCommand } from '../../chat/bridge.ts'
+import { initialTurnState, reduceChatEvent } from '../../chat/store.ts'
+import { nextRetryStatus } from '../../chat/retry-status.ts'
+import type { RetryStatus } from '../../chat/retry-status.ts'
+import type { AgentActivity } from '../../chat/store.ts'
+import { normalizeTodos } from '../../chat/todo-view.ts'
+import type { TodoItemLike } from '../../chat/todo-view.ts'
+import type { Message } from '../../model/message.ts'
+import { releaseFields, hasFieldSlots, releaseUnreferenced } from '../../core/fields.ts'
+
+const FRAME_MS = 33
+
+const IDLE_ACTIVITY: AgentActivity = { running: false, phase: 'awaiting-request', compacting: false }
+const NO_TODOS: TodoItemLike[] = []
+
+function todosKey(todos: readonly TodoItemLike[]): string {
+  return todos.map(item => `${item.status}:${item.content}`).join('\n')
+}
+
+export interface ChatEvents {
+  messages: Message[]
+  modelName: string
+  setModelName(name: string): void
+  updateMessages(fn: (messages: Message[]) => Message[]): void
+  resetChat(): void
+  activity: AgentActivity
+  todos: TodoItemLike[]
+  retryStatus?: RetryStatus
+  streamedChars: number
+  registryCommands: readonly RegistryCommand[]
+}
+
+export function useChatEvents(bridge: ChatBridge | undefined, dialogOpen: boolean): ChatEvents {
+  const [messages, setMessages] = useState<Message[]>([])
+  const [modelName, setModelName] = useState('')
+  const [activity, setActivity] = useState<AgentActivity>(IDLE_ACTIVITY)
+  const [todos, setTodos] = useState<TodoItemLike[]>(NO_TODOS)
+  const [retryStatus, setRetryStatus] = useState<RetryStatus | undefined>(undefined)
+  const [streamedChars, setStreamedChars] = useState(0)
+  const [registryCommands, setRegistryCommands] = useState<readonly RegistryCommand[]>([])
+  const streamedCharsRef = useRef(0)
+  const chatStateRef = useRef<{ messages: Message[]; turn: ReturnType<typeof initialTurnState> }>({
+    messages: [],
+    turn: initialTurnState(),
+  })
+  const pendingEventsRef = useRef<SessionEvent[]>([])
+  const retryStatusRef = useRef<RetryStatus | undefined>(undefined)
+  const presenterRef = useRef<ChatToolPresenter | undefined>(undefined)
+  const dialogOpenRef = useRef(false)
+  dialogOpenRef.current = dialogOpen
+  useEffect(() => {
+    presenterRef.current = bridge?.toolPresenter
+    if (bridge === undefined) {
+      setRegistryCommands([])
+      return
+    }
+    setRegistryCommands(bridge.listRegistryCommands())
+    return bridge.onRegistryChanged(() => setRegistryCommands(bridge.listRegistryCommands()))
+  }, [bridge])
+  useEffect(() => {
+    if (!bridge) return
+    return bridge.subscribe(event => {
+      pendingEventsRef.current.push(event)
+    })
+  }, [bridge])
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (dialogOpenRef.current) return
+      const events = pendingEventsRef.current
+      if (events.length === 0) return
+      pendingEventsRef.current = []
+      let state = chatStateRef.current
+      let dirty = false
+      let latestTodos: TodoItemLike[] | undefined
+      let retry: RetryStatus | undefined = retryStatusRef.current
+      let retryDirty = false
+      for (const event of events) {
+        if (event.type === 'assistant/chunk') {
+          const chunk = (event.data as { chunk?: { type?: string; text?: string } }).chunk
+          if ((chunk?.type === 'text-delta' || chunk?.type === 'reasoning-delta') && typeof chunk.text === 'string') {
+            streamedCharsRef.current += chunk.text.length
+          }
+        } else if (event.type === 'assistant/message' || event.type === 'turn/end') {
+          streamedCharsRef.current = 0
+        }
+        if (event.type === 'todo/write') {
+          latestTodos = normalizeTodos((event.data as { todos?: unknown }).todos)
+        }
+        const nextRetry = nextRetryStatus(retry, event)
+        if (nextRetry !== retry) {
+          retry = nextRetry
+          retryDirty = true
+        }
+        const next = reduceChatEvent(state.messages, event, state.turn, presenterRef.current)
+        dirty = dirty || next.changed
+        state = { messages: next.messages, turn: next.turn }
+      }
+      chatStateRef.current = state
+      if (dirty && hasFieldSlots('message')) {
+        let keep = ''
+        for (const message of state.messages) {
+          if (message.kind === 'bubble') keep += message.content
+        }
+        releaseUnreferenced('message', keep)
+      }
+      retryStatusRef.current = retry
+      setStreamedChars(previous => previous === streamedCharsRef.current ? previous : streamedCharsRef.current)
+      if (dirty) setMessages([...state.messages])
+      if (retryDirty) setRetryStatus(retry)
+      const turn = state.turn
+      setActivity(previous => previous.running === turn.running && previous.phase === turn.phase && previous.compacting === turn.compacting
+        ? previous
+        : { running: turn.running, phase: turn.phase, compacting: turn.compacting })
+      if (latestTodos !== undefined) {
+        setTodos(previous => todosKey(previous) === todosKey(latestTodos!) ? previous : latestTodos!)
+      }
+    }, FRAME_MS)
+    return () => clearInterval(timer)
+  }, [])
+  useEffect(() => {
+    if (!bridge) return
+    setModelName(bridge.modelName())
+  }, [bridge])
+  return {
+    messages,
+    modelName,
+    setModelName,
+    updateMessages(fn) {
+      const next = fn(chatStateRef.current.messages)
+      chatStateRef.current = { ...chatStateRef.current, messages: next }
+      setMessages(next)
+    },
+    resetChat() {
+      setMessages([])
+      chatStateRef.current = { messages: [], turn: initialTurnState() }
+      pendingEventsRef.current = []
+      retryStatusRef.current = undefined
+      streamedCharsRef.current = 0
+      releaseFields('message')
+      setStreamedChars(0)
+      setRetryStatus(undefined)
+      setActivity(IDLE_ACTIVITY)
+      setTodos(NO_TODOS)
+    },
+    activity,
+    todos,
+    retryStatus,
+    streamedChars,
+    registryCommands,
+  }
+}