@xp266/dshtui 0.1.0

package/src/ui/dialog/sessions-dialog.tsx

@@ -0,0 +1,163 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import type { Ref } from 'react'
+import { COLORS } from '../../theme.ts'
+import { errorLine, loadingLine } from './status-lines.ts'
+import type { SessionSummary } from '../../chat/session-list.ts'
+import { groupSessions } from '../../chat/session-groups.ts'
+import type { SessionSectionKind } from '../../chat/session-groups.ts'
+import { useAsyncAction } from '../hooks/use-async-action.ts'
+import { useAsyncList } from '../hooks/use-async-list.ts'
+import { Dialog } from './dialog.tsx'
+import { DIALOG_MAX_HEIGHT, DIALOG_WIDTH_LARGE } from './sizes.ts'
+import type { DialogFooterLine, DialogHandle, DialogItem, DialogRow } from './dialog.tsx'
+
+export interface SessionsApi {
+  listSessions(): Promise<SessionSummary[]>
+  openSession(id: string): Promise<void>
+  archiveSession(id: string): Promise<void>
+  activeSessionId(): string
+  newSession(): Promise<void>
+  onSessionsChanged?(listener: () => void): () => void
+}
+
+export interface SessionsDialogProps {
+  api: SessionsApi
+  onClose: () => void
+  onBeforeSessionSelected?: () => void
+  onSessionSelected: (session: SessionSummary) => void
+  onNewSession?: () => void
+  ref?: Ref<DialogHandle>
+}
+
+const ARM_TIMEOUT_MS = 3000
+
+const SECTION_LABELS: Record<SessionSectionKind, string> = {
+  recent: 'Recent',
+  week: 'This Week',
+  older: 'Other',
+}
+
+const ARCHIVE_HINT: DialogFooterLine[] = [
+  { text: 'Ctrl+D to archive the session', color: COLORS.dialogHintText },
+]
+
+interface ArmedRow {
+  key: string
+  id: string
+}
+
+export function SessionsDialog({ api, onClose, onBeforeSessionSelected, onSessionSelected, onNewSession, ref }: SessionsDialogProps) {
+  const { error, clearError, run } = useAsyncAction()
+  const [armedKey, setArmedKey] = useState<string | null>(null)
+  const armedRef = useRef<string | null>(null)
+  const armTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const itemRows = useRef(new Map<DialogItem, ArmedRow>())
+  const pendingArchives = useRef(new Set<string>())
+  const loadSessions = useCallback(async () => {
+    const rows = await api.listSessions()
+    if (pendingArchives.current.size === 0) return rows
+    const present = new Set(rows.map(row => row.id))
+    for (const id of [...pendingArchives.current]) {
+      if (!present.has(id)) pendingArchives.current.delete(id)
+    }
+    return rows.filter(row => !pendingArchives.current.has(row.id))
+  }, [api])
+  const selectSession = async (session: SessionSummary) => {
+    await run(async () => {
+      onBeforeSessionSelected?.()
+      await api.openSession(session.id)
+      onSessionSelected(session)
+      onClose()
+    })
+  }
+  const { items, loading, error: loadError, reload, remove } = useAsyncList(loadSessions)
+  const sections = useMemo(() => groupSessions(items), [items])
+  const disarm = () => {
+    clearTimeout(armTimer.current)
+    if (armedRef.current !== null) {
+      armedRef.current = null
+      setArmedKey(null)
+    }
+  }
+  useEffect(() => () => clearTimeout(armTimer.current), [])
+  useEffect(() => api.onSessionsChanged?.(() => reload()), [api, reload])
+  const archive = (id: string) => {
+    const wasActive = api.activeSessionId() === id
+    pendingArchives.current.add(id)
+    remove(session => session.id === id)
+    disarm()
+    void api.archiveSession(id)
+      .then(() => {
+        if (wasActive) {
+          onBeforeSessionSelected?.()
+          onNewSession?.()
+        }
+        clearError()
+      })
+      .catch(cause => {
+        pendingArchives.current.delete(id)
+        void run(async () => {
+          throw cause instanceof Error ? cause : new Error(String(cause))
+        })
+        reload()
+      })
+  }
+  const handleCtrlD = (focused: DialogItem | undefined): boolean => {
+    if (focused?.type !== 'button') return false
+    const row = itemRows.current.get(focused)
+    if (row === undefined) return false
+    if (armedRef.current === row.key) {
+      disarm()
+      void archive(row.id)
+      return true
+    }
+    clearTimeout(armTimer.current)
+    armedRef.current = row.key
+    setArmedKey(row.key)
+    armTimer.current = setTimeout(disarm, ARM_TIMEOUT_MS)
+    return true
+  }
+  const rows: DialogRow[] = []
+  const rowRefs = new Map<DialogItem, ArmedRow>()
+  sections.forEach((section, sectionIndex) => {
+    rows.push({ items: [{ type: 'header', label: SECTION_LABELS[section.kind], leadingBlank: sectionIndex > 0 }] })
+    for (const session of section.items) {
+      const key = `${section.kind}:${session.id}`
+      const armed = armedKey === key
+      const item: DialogItem = {
+        type: 'button',
+        label: session.name || session.id,
+        right: armed ? 'Press Ctrl+D again to archive' : session.ungrouped ? 'Ungrouped' : session.directory,
+        onPress: () => void selectSession(session),
+        ...(armed ? { rightColor: COLORS.errorText } : {}),
+      }
+      rowRefs.set(item, { key, id: session.id })
+      rows.push({ items: [item] })
+    }
+  })
+  useLayoutEffect(() => {
+    itemRows.current = rowRefs
+  })
+  const footer: DialogFooterLine[] = [...(loading ? [loadingLine()] : []), ...ARCHIVE_HINT]
+  const errors: DialogFooterLine[] = [
+    ...(loadError !== null ? [errorLine(loadError)] : []),
+    ...(error !== null ? [errorLine(error)] : []),
+  ]
+  return (
+    <Dialog
+      ref={ref}
+      title="sessions"
+      width={DIALOG_WIDTH_LARGE}
+      maxHeight={DIALOG_MAX_HEIGHT}
+      rows={rows}
+      footer={footer}
+      errors={errors}
+      onClose={onClose}
+      search
+      searchRight
+      centerScroll
+      onCtrlD={handleCtrlD}
+      onActivity={disarm}
+    />
+  )
+}

package/src/ui/dialog/sizes.ts

@@ -0,0 +1,7 @@
+export const DIALOG_WIDTH_MEDIUM = 60
+export const DIALOG_WIDTH_LARGE = 88
+
+export const DIALOG_MAX_HEIGHT = 0.6
+
+export const INPUT_MAX_ROWS = 3
+export const ERROR_MAX_ROWS = 3

package/src/ui/dialog/status-lines.ts

@@ -0,0 +1,11 @@
+import { COLORS } from '../../theme.ts'
+import { glyphs } from '../../terminal/glyphs.ts'
+import type { DialogFooterLine } from './geometry.ts'
+
+export function loadingLine(): DialogFooterLine {
+  return { text: `loading${glyphs.ellipsis}`, color: COLORS.dialogHintText }
+}
+
+export function errorLine(text: string): DialogFooterLine {
+  return { text, color: COLORS.errorText }
+}

package/src/ui/dialog/todo-dialog.tsx

@@ -0,0 +1,29 @@
+import type { Ref } from 'react'
+import { Dialog } from './dialog.tsx'
+import { DIALOG_WIDTH_MEDIUM, DIALOG_MAX_HEIGHT } from './sizes.ts'
+import type { DialogHandle, DialogRow } from './dialog.tsx'
+import { todoSymbol } from '../../chat/todo-view.ts'
+import type { TodoItemLike } from '../../chat/todo-view.ts'
+
+export interface TodoDialogProps {
+  ref?: Ref<DialogHandle>
+  api: readonly TodoItemLike[]
+  onClose: () => void
+}
+
+export function todoRows(todos: readonly TodoItemLike[]): DialogRow[] {
+  return todos.map(item => ({ items: [{ type: 'static', label: `${todoSymbol(item.status)} ${item.content}` }] }))
+}
+
+export function TodoDialog({ ref, api, onClose }: TodoDialogProps) {
+  return (
+    <Dialog
+      ref={ref}
+      title="todo"
+      width={DIALOG_WIDTH_MEDIUM}
+      maxHeight={DIALOG_MAX_HEIGHT}
+      rows={todoRows(api)}
+      onClose={onClose}
+    />
+  )
+}

package/src/ui/dialog/use-dialog-input.ts

@@ -0,0 +1,186 @@
+import { useInput, usePaste } from 'ink'
+import { isKeyConsumed } from '../key-arbiter.ts'
+import type { RefObject } from 'react'
+import { isMouseResidue } from '../../terminal/mouse.ts'
+import { editBackspace, editDelete, editInsert } from '../../core/edit.ts'
+import { adjustScroll, listCenterScroll } from './geometry.ts'
+import { asTextItem, clampFocus, focusedItem, moveFocus } from './items.ts'
+import type { DialogFocus, DialogItem, DialogRow } from './items.ts'
+import { widgetOf } from '../widgets/registry.ts'
+import '../widgets/index.ts'
+import type { WidgetKeyApi } from '../widgets/types.ts'
+
+export interface DialogLiveState {
+  rows: DialogRow[]
+  contentRows: DialogRow[]
+  focus: DialogFocus
+  scrollTop: number
+  cursor: number
+  value: string
+  searchValue: string
+  viewportHeight: number
+  focusMinRow: number
+  focusMaxRow: number
+  contentWidth: number
+  top: number
+  windowHeight: number
+}
+
+export interface NavigationSetters {
+  setFocus(focus: DialogFocus): void
+  setScrollTop(scrollTop: number): void
+}
+
+export function applyNavigation(live: DialogLiveState, direction: 'up' | 'down' | 'left' | 'right', search: boolean, setters: NavigationSetters, centerScroll = false): void {
+  const next = moveFocus(live.rows, live.focus, direction)
+  const clamped = clampFocus(live.rows, next, live.focusMinRow, live.focusMaxRow)
+  setters.setFocus(clamped)
+  const contentRow = Math.max(0, clamped.row - (search ? 1 : 0))
+  setters.setScrollTop(centerScroll && (direction === 'up' || direction === 'down')
+    ? listCenterScroll(live.contentRows, contentRow, live.viewportHeight, live.contentWidth, direction)
+    : adjustScroll(live.contentRows, { row: contentRow, col: clamped.col }, live.scrollTop, live.viewportHeight, live.contentWidth))
+}
+
+function arrowFromRaw(input: string): 'up' | 'down' | 'left' | 'right' | null {
+  const match = /^(?:\[|O)(?:1;)?\d*(?::\d+)?([ABCD])$/.exec(input)
+  if (match === null) return null
+  const letter = match[1]!
+  return letter === 'A' ? 'up' : letter === 'B' ? 'down' : letter === 'C' ? 'right' : 'left'
+}
+
+export interface DialogInputOptions {
+  live: RefObject<DialogLiveState>
+  search: boolean
+  closeGuarded: boolean
+  centerScroll?: boolean
+  onClose(): void
+  onCtrlA?(focused: DialogItem | undefined): boolean
+  onCtrlD?(focused: DialogItem | undefined): boolean
+  onCtrlE?(focused: DialogItem | undefined): boolean
+  onActivity?(): void
+  requestSearch(value: string): void
+  setFocus(focus: DialogFocus): void
+  setScrollTop(scrollTop: number): void
+  setCursor(cursor: number): void
+}
+
+export function useDialogInput(options: DialogInputOptions): void {
+  const { live, search, closeGuarded, onClose, onCtrlA, onCtrlD, onCtrlE, onActivity, requestSearch, setFocus, setScrollTop, setCursor } = options
+  const setters: NavigationSetters = { setFocus, setScrollTop }
+  const centerScroll = options.centerScroll === true
+  usePaste(text => {
+    onActivity?.()
+    const state = live.current
+    const current = focusedItem(state.rows[state.focus.row], state.focus.col)
+    const textItem = current === undefined ? null : asTextItem(current)
+    if (textItem === null) return
+    const normalized = text.replace(/\r\n?/g, '\n')
+    if (normalized === '') return
+    const next = editInsert({ value: textItem.value, cursor: state.cursor }, normalized)
+    textItem.onChange(next.value)
+    state.value = next.value
+    state.cursor = next.cursor
+    setCursor(next.cursor)
+  })
+  useInput((input, key) => {
+    if (isKeyConsumed()) return
+    const state = live.current
+    const liveCurrent = focusedItem(state.rows[state.focus.row], state.focus.col)
+    const rawArrow = arrowFromRaw(input)
+    const isUp = key.upArrow || rawArrow === 'up'
+    const isDown = key.downArrow || rawArrow === 'down'
+    const isLeft = key.leftArrow || rawArrow === 'left'
+    const isRight = key.rightArrow || rawArrow === 'right'
+    if (key.ctrl && input === 'a' && onCtrlA !== undefined && onCtrlA(liveCurrent)) return
+    if (key.ctrl && input === 'd' && onCtrlD !== undefined && onCtrlD(liveCurrent)) return
+    if (key.ctrl && input === 'e' && onCtrlE !== undefined && onCtrlE(liveCurrent)) return
+    onActivity?.()
+    if (key.escape || (key.ctrl && input === 'c')) {
+      if (!(key.ctrl && closeGuarded)) onClose()
+      return
+    }
+    const def = liveCurrent === undefined ? undefined : widgetOf(liveCurrent.type)
+    const keyApi: WidgetKeyApi = {
+      cursor: state.cursor,
+      subCol: state.focus.col,
+      setCursor(next) {
+        state.cursor = next
+        setCursor(next)
+      },
+      navigate(direction) {
+        applyNavigation(state, direction, search, setters, centerScroll)
+      },
+    }
+    if ((isLeft || isRight) && liveCurrent !== undefined && def !== undefined) {
+      if (def.onLeftRight?.(liveCurrent, isRight ? 1 : -1, keyApi) === true) return
+    }
+    if (isUp || isDown) {
+      applyNavigation(state, isUp ? 'up' : 'down', search, setters, centerScroll)
+      return
+    }
+    if (key.return) {
+      if (liveCurrent === undefined || def === undefined) return
+      const handled = def.onEnter?.(liveCurrent, keyApi) ?? false
+      if (!handled) applyNavigation(state, 'down', search, setters, centerScroll)
+      return
+    }
+    if (input === ' ' && liveCurrent !== undefined && def?.onSpace !== undefined) {
+      def.onSpace(liveCurrent)
+      return
+    }
+    const editingFormInput = liveCurrent !== undefined && liveCurrent.type !== 'search' && widgetOf(liveCurrent.type).editable === true
+    if (search && !editingFormInput) {
+      const v = state.searchValue
+      const onSearchRow = state.focus.row === 0
+      const caret = onSearchRow ? Math.max(0, Math.min(state.cursor, v.length)) : v.length
+      if (isLeft || isRight) {
+        const next = Math.max(0, Math.min(v.length, caret + (isRight ? 1 : -1)))
+        if (next !== caret) {
+          state.cursor = next
+          setCursor(next)
+        }
+        return
+      }
+      const applyEdit = (next: { value: string; cursor: number } | null): boolean => {
+        if (next === null) return false
+        requestSearch(next.value)
+        state.cursor = next.cursor
+        setCursor(next.cursor)
+        return true
+      }
+      if (key.backspace) {
+        applyEdit(editBackspace({ value: v, cursor: caret }))
+        return
+      }
+      if (key.delete) {
+        applyEdit(editDelete({ value: v, cursor: caret }))
+        return
+      }
+      if (input && !key.ctrl && !key.meta && !isMouseResidue(input)) {
+        applyEdit(editInsert({ value: v, cursor: caret }, input))
+        return
+      }
+    }
+    if (def?.editable === true && liveCurrent !== undefined) {
+      const textItem = asTextItem(liveCurrent)
+      if (textItem === null) return
+      const apply = (next: { value: string; cursor: number } | null, trackCursor: boolean): boolean => {
+        if (next === null) return false
+        state.value = next.value
+        textItem.onChange(next.value)
+        if (trackCursor) {
+          state.cursor = next.cursor
+          setCursor(next.cursor)
+        }
+        return true
+      }
+      if (key.backspace) {
+        apply(editBackspace({ value: state.value, cursor: state.cursor }), true)
+      } else if (key.delete) {
+        apply(editDelete({ value: state.value, cursor: state.cursor }), false)
+      } else if (input && !key.ctrl && !key.meta && !isMouseResidue(input)) {
+        apply(editInsert({ value: state.value, cursor: state.cursor }, input), true)
+      }
+    }
+  })
+}

package/src/ui/extension-point.ts

@@ -0,0 +1,188 @@
+import type { Context } from '@deepseek-ai/cordis'
+import { registerOverlay, registerStatusLine } from './contributions.ts'
+import { registerWindow } from './windows.ts'
+import { registerWindowService } from './window-services.ts'
+import { registerWidget } from './widgets/registry.ts'
+import { registerCommand } from './input/commands.ts'
+import { registerKeyBinding } from './keymap.ts'
+import { registerInputStatus } from './chrome/input-status.ts'
+import { registerHomeLogo, subscribeHomeLogo } from './home-logo.ts'
+import { registerHintArgsProvider, registerHintMatcher } from './chrome/hint-service.ts'
+import { registerPalette, subscribePalettes } from '../theme.ts'
+import { paletteColor } from '../theme.ts'
+import { registerClipboardBackend } from '../terminal/clipboard-backends.ts'
+import { registerToolView, subscribeToolViews } from '../chat/tool-views.ts'
+import { registerChatNode, subscribeChatNodes } from '../chat/chat-nodes.ts'
+import { registerMessageView, subscribeMessageViews } from './message/message-views.ts'
+import { registerMessageRenderer } from './message/renderers.ts'
+import { subscribeMessageRenderers } from './message/renderers.ts'
+import { registerBootSink } from '../boot-log.ts'
+import { registerFieldKind, specialFieldFactory } from '../core/fields.ts'
+import { bumpSurface } from '../kernel/surface.ts'
+import { registerMarkdownBlock, registerMarkdownInline, registerPrismGrammar } from '../ui/message/md/extensions.ts'
+import { registerPointerHandler } from './pointer/registry.ts'
+import { registerSelectionDomain, registerSelectionTransformer, registerSelectionClipboard } from './selection/service.ts'
+import { registerPasteHandler } from '../ui/input/composer-paste.ts'
+import { registerComposerKeyBinding } from '../ui/input/composer-keys.ts'
+import { insertIntoComposer } from '../ui/input/composer-bus.ts'
+import { createChatFace } from '../chat/chat-face.ts'
+import type { ChatBridge } from '../chat/bridge.ts'
+import type {
+  TuiChromeFace,
+  TuiExtensionPoint,
+  TuiInteractionsFace,
+  TuiServicesFace,
+  TuiWindowsFace,
+} from '../contract/index.ts'
+
+export type {
+  TuiChatFace,
+  TuiChromeFace,
+  TuiCommandsFace,
+  TuiContentFace,
+  TuiFieldsFace,
+  TuiHomeLogoFace,
+  TuiInteractionsFace,
+  TuiKeymapFace,
+  TuiPaletteFace,
+  TuiServicesFace,
+  TuiToolsFace,
+  TuiWidgetsFace,
+  TuiWindowsFace,
+} from '../contract/index.ts'
+
+export interface TuiExtensionPointHooks {
+  /** Invoked after a palette/content contribution changes the rendered surface. */
+  onContributionsChanged?(): void
+}
+
+/**
+ * Publish the TUI extension point as the `tui` cordis service so other
+ * plugins can contribute windows, window services, chrome, widgets,
+ * palettes, key bindings, commands, tool views, chat nodes, message views,
+ * interaction panels, and the bridge-backed chat face without importing
+ * this package's modules (which would fork the registries). Registration
+ * lifetimes ride the contributing plugin's own fiber: callers receive
+ * disposers and the registries only hold live entries.
+ */
+export function createTuiExtensionPoint(ctx: Context, hooks: TuiExtensionPointHooks = {}): { extension: TuiExtensionPoint; dispose(): void } {
+  const extension: TuiExtensionPoint = {
+    windows: { register: registerWindow },
+    services: { register: registerWindowService },
+    chrome: {
+      statusLine: { register: registerStatusLine },
+      overlays: { register: registerOverlay },
+      widgets: { register: registerWidget },
+      palette: { register: registerPalette, color: paletteColor },
+      keys: { register: registerKeyBinding },
+      inputStatus: { register: registerInputStatus },
+      logo: { register: registerHomeLogo },
+    },
+    commands: { register: registerCommand },
+    tools: { register: registerToolView },
+    content: {
+      nodes: { register: registerChatNode },
+      views: { register: registerMessageView },
+      renderers: { register: registerMessageRenderer },
+    },
+    startup: { registerSink: registerBootSink },
+    fields: {
+      register(contribution) {
+        const off = registerFieldKind(contribution)
+        surfaceChanged()
+        return () => {
+          off()
+          surfaceChanged()
+        }
+      },
+      factory: specialFieldFactory(),
+    },
+    composer: {
+      paste: { register: registerPasteHandler },
+      keys: { register: registerComposerKeyBinding },
+      insert: insertIntoComposer,
+    },
+    hint: {
+      matchers: { register: registerHintMatcher },
+      args: { register: registerHintArgsProvider },
+    },
+    clipboard: { register: registerClipboardBackend },
+    pointer: { register: registerPointerHandler },
+    selection: {
+      domains: { register: registerSelectionDomain },
+      transformers: { register: registerSelectionTransformer },
+      clipboard: { register: registerSelectionClipboard },
+    },
+    markdown: {
+      blocks: {
+        register(contribution) {
+          const off = registerMarkdownBlock(contribution)
+          contentChanged()
+          return () => {
+            off()
+            contentChanged()
+          }
+        },
+      },
+      inline: {
+        register(contribution) {
+          const off = registerMarkdownInline(contribution)
+          contentChanged()
+          return () => {
+            off()
+            contentChanged()
+          }
+        },
+      },
+      languages: {
+        register(contribution) {
+          const off = registerPrismGrammar(contribution)
+          contentChanged()
+          return () => {
+            off()
+            contentChanged()
+          }
+        },
+      },
+    },
+  }
+  const surfaceChanged = (): void => {
+    bumpSurface()
+    hooks.onContributionsChanged?.()
+  }
+  const offToolViews = subscribeToolViews(surfaceChanged)
+  const offMessageViews = subscribeMessageViews(surfaceChanged)
+  const offPalettes = subscribePalettes(surfaceChanged)
+  const offMessageRenderers = subscribeMessageRenderers(surfaceChanged)
+  const offChatNodes = subscribeChatNodes(surfaceChanged)
+  const offHomeLogo = subscribeHomeLogo(surfaceChanged)
+  const contentChanged = (): void => {
+    surfaceChanged()
+  }
+  const disposeService = ctx.provide('tui', extension)
+  return {
+    extension,
+    dispose() {
+      offToolViews()
+      offMessageViews()
+      offPalettes()
+      offMessageRenderers()
+      offChatNodes()
+      offHomeLogo()
+      disposeService()
+    },
+  }
+}
+
+/** Attach the bridge-backed faces once the chat bridge exists; returns the disposer. */
+export function exposeRuntimeFaces(extension: TuiExtensionPoint, bridge: ChatBridge): () => void {
+  extension.interactions = {
+    panels: bridge.interactions.panels,
+    push: (kind, request, signal) => bridge.interactions.pushRequest(kind, request, signal),
+  }
+  extension.chat = createChatFace(bridge)
+  return () => {
+    extension.interactions = undefined
+    extension.chat = undefined
+  }
+}