@xp266/dshtui 0.1.0

package/src/ui/panels-builtin.tsx

@@ -0,0 +1,86 @@
+import type { ComponentType } from 'react'
+import { ApprovalPanel } from './panels/approval-panel.tsx'
+import type { ApprovalPanelProps } from './panels/approval-panel.tsx'
+import { QuestionPanel } from './panels/question-panel.tsx'
+import type { QuestionPanelProps } from './panels/question-panel.tsx'
+import type { InteractionPanelComponentProps, InteractionPanelContribution } from '../chat/interactions.ts'
+import type { ChatBridge } from '../chat/bridge.ts'
+
+export interface PanelServices {
+  bridge: ChatBridge
+}
+
+function adapt<P extends object>(Component: ComponentType<P>, map: (props: InteractionPanelComponentProps) => Omit<P, 'handleRef'> | null): ComponentType<InteractionPanelComponentProps> {
+  const Wrapped = (props: InteractionPanelComponentProps) => {
+    const adapted = map(props)
+    if (adapted === null) return null
+    const Specific = Component as ComponentType<Record<string, unknown>>
+    return <Specific {...(adapted as Record<string, unknown>)} handleRef={props.handleRef} />
+  }
+  return Wrapped
+}
+
+/**
+ * Builtin panels register as high-order fallback layers so a plugin
+ * contribution for the same kind always wins regardless of timing.
+ */
+export const BUILTIN_PANEL_ORDER = 500
+
+export function registerBuiltinPanels(services: PanelServices): () => void {
+  const { bridge } = services
+  const contributions: InteractionPanelContribution[] = [
+    {
+      kind: 'approval',
+      order: BUILTIN_PANEL_ORDER,
+      component: adapt<ApprovalPanelProps>(ApprovalPanel, props => {
+        const approval = (props.request as { approval?: { reason?: string; callId?: string } }).approval
+        if (approval === undefined) return null
+        return {
+          reason: approval.reason,
+          command: approval.callId === undefined ? undefined : commandForCall(bridge, approval.callId),
+          background: props.background,
+          active: props.active,
+          columns: props.columns,
+          rows: props.rows,
+          innerWidth: props.innerWidth,
+          blockWidth: props.blockWidth,
+          onDecide: (outcome: 'allowed-once' | 'rejected') => props.resolve(outcome),
+          onResize: props.onResize,
+        }      }),
+    },
+    {
+      kind: 'question',
+      order: BUILTIN_PANEL_ORDER + 10,
+      component: adapt<QuestionPanelProps>(QuestionPanel, props => {
+        const question = (props.request as { question?: QuestionPanelProps['question'] }).question
+        if (question === undefined) return null
+        return {
+          question,
+          background: props.background,
+          active: props.active,
+          columns: props.columns,
+          rows: props.rows,
+          innerWidth: props.innerWidth,
+          blockWidth: props.blockWidth,
+          onSubmit: (answer: Parameters<QuestionPanelProps['onSubmit']>[0]) => props.resolve(answer),
+          onCancel: () => props.reject(new Error('the user closed the question panel')),
+          onResize: props.onResize,
+        }
+      }),
+    },
+  ]
+  const disposers = contributions.map(contribution => services.bridge.interactions.panels.register(contribution))
+  return () => {
+    for (const dispose of disposers) dispose()
+  }
+}
+
+function commandForCall(bridge: ChatBridge, callId: string): string | undefined {
+  try {
+    const args = JSON.parse(bridge.toolPresenter.argsJson(callId) ?? 'null') as { command?: unknown } | null
+    return typeof args?.command === 'string' && args.command !== '' ? args.command : undefined
+  } catch {
+    // Unparsable or missing args simply carry no command preview.
+    return undefined
+  }
+}

package/src/ui/pointer/builtins.ts

@@ -0,0 +1,281 @@
+import type { LineSelection, PointerEventFrame } from '../../contract/index.ts'
+import { panelContains } from '../layout-service.ts'
+import { POINTER_BUILTIN_ORDER } from './registry.ts'
+
+const WHEEL_LINES = 3
+
+export interface PointerBuiltinDeps {
+  inInputContent(y: number): boolean
+  inMessageArea(screenRow: number): boolean
+  toContentRow(screenRow: number): number
+  activeHintRegion(): { top: number; bottom: number } | null
+  focusRowFor(current: LineSelection, eventY: number): number
+  clampMessageFocus(anchorInMessage: boolean, eventY: number): number
+  setPointerArea(inMessageArea: boolean): void
+  onScrollbarDown(x: number, y: number): boolean
+  onScrollbarDrag(y: number): void
+  stopDragScroll(): void
+  updateDragScroll(eventY: number): void
+  setSelection(next: LineSelection | null | ((current: LineSelection | null) => LineSelection | null)): void
+  getSelection(): LineSelection | null
+  rowHasText(y: number): boolean
+  rowInfoAt(y: number): { messageId: string; clickable: boolean; selectable: boolean } | null | undefined
+  inputClickAt(y: number, x: number): void
+  panelClickAt(y: number, x: number): void
+  dialogWheel(y: number, dir: -1 | 1): boolean
+  panelWheel(dir: -1 | 1): boolean
+  hintWheel(dir: -1 | 1): void
+  inputWheel(dir: -1 | 1): void
+  hintPress(x: number, y: number): void
+  hintDragStart(x: number, y: number): void
+  hintDragMove(x: number, y: number): void
+  hintRelease(x: number, y: number, dragged: boolean): void
+  onScroll(next: number): void
+  toggleMessage(id: string): void
+  dialogClick(y: number, x: number): void
+}
+
+/**
+ * The six builtin gesture handlers (scrollbar, hint, dialog, panel, input,
+ * message area) collapsed into one contribution. Each owns its candidate
+ * state; the dispatcher guarantees beginDown() runs on every press so stale
+ * candidates never survive into the next gesture.
+ */
+export function createBuiltinPointerHandler(deps: PointerBuiltinDeps) {
+  const scrollbarSession: { current: { grabOffset: number } | null } = { current: null }
+  const hintGesture: { current: { x: number; y: number; dragged: boolean } | null } = { current: null }
+  const clickCandidate: { current: { messageId: string; y: number; x: number; moved: boolean } | null } = { current: null }
+  const dialogCandidate: { current: { x: number; y: number } | null } = { current: null }
+  const panelCandidate: { current: { x: number; y: number } | null } = { current: null }
+  const inputCandidate: { current: { x: number; y: number } | null } = { current: null }
+  // Which sub-handler owns the active gesture; '' means none.
+  let owner = ''
+
+  function clearCandidates(): void {
+    clickCandidate.current = null
+    dialogCandidate.current = null
+    panelCandidate.current = null
+    inputCandidate.current = null
+  }
+
+  function extendOrDrag(candidate: { current: { x: number; y: number } | null }, event: PointerEventFrame): void {
+    const anchor = candidate.current
+    if (anchor !== null) {
+      candidate.current = null
+      deps.setSelection({
+        anchorRow: anchor.y,
+        anchorCol: anchor.x,
+        focusRow: event.event.y,
+        focusCol: event.event.x,
+        inMessage: false,
+      })
+      return
+    }
+    deps.setSelection(current => current === null || current.inMessage ? current : {
+      ...current,
+      focusRow: event.event.y,
+      focusCol: event.event.x,
+    })
+  }
+
+  return {
+    order: POINTER_BUILTIN_ORDER,
+    id: 'builtin.pointer',
+    beginDown(): void {
+      clearCandidates()
+      scrollbarSession.current = null
+      hintGesture.current = null
+      owner = ''
+    },
+    onDown(event: PointerEventFrame): boolean {
+      const { x, y } = event.event
+      if (deps.onScrollbarDown(x, y)) {
+        owner = 'scrollbar'
+        return true
+      }
+      const hintRegionActive = (() => {
+        if (event.ui.dialogOpen || event.ui.panelActive) return false
+        const region = deps.activeHintRegion()
+        return region !== null && y >= region.top && y <= region.bottom
+      })()
+      if (hintRegionActive) {
+        hintGesture.current = { x, y, dragged: false }
+        deps.hintPress(x, y)
+        clearCandidates()
+        deps.stopDragScroll()
+        deps.setPointerArea(false)
+        deps.setSelection(null)
+        owner = 'hint'
+        return true
+      }
+      if (event.ui.dialogOpen) {
+        const anchorable = deps.rowHasText(y)
+        dialogCandidate.current = { x, y }
+        if (anchorable) deps.setSelection({ anchorRow: y, anchorCol: x, focusRow: y, focusCol: x, inMessage: false })
+        owner = 'dialog'
+        return true
+      }
+      if (event.ui.panelActive && panelContains(y, { columns: event.ui.columns, rows: event.ui.rows, inputHeight: event.ui.inputHeight, messageHeight: event.ui.messageHeight, panelHeight: null })) {
+        panelCandidate.current = { x, y }
+        if (deps.rowHasText(y)) {
+          deps.setSelection({ anchorRow: y, anchorCol: x, focusRow: y, focusCol: x, inMessage: false })
+        }
+        owner = 'panel'
+        return true
+      }
+      if (!event.ui.dialogOpen && !event.ui.panelActive && deps.inInputContent(y)) {
+        inputCandidate.current = { x, y }
+        deps.setSelection(null)
+        owner = 'input'
+        return true
+      }
+      const contentRow = deps.toContentRow(y)
+      const hit = deps.rowInfoAt(y)
+      if (hit?.clickable) {
+        clickCandidate.current = { messageId: hit.messageId, y, x, moved: false }
+        owner = 'message'
+        return true
+      }
+      // Message rows anchor on the row model: artwork made of block glyphs
+      // never passes the screen-level text check. Chrome rows keep it.
+      const anchorInMessage = deps.inMessageArea(y)
+      if (anchorInMessage ? hit?.selectable === true : deps.rowHasText(y)) {
+        deps.setPointerArea(anchorInMessage)
+        deps.setSelection({ anchorRow: contentRow, anchorCol: x, focusRow: contentRow, focusCol: x, inMessage: anchorInMessage })
+        owner = 'message'
+        return true
+      }
+      // Nothing claimed; the dispatcher keeps default drag behavior alive.
+      return false
+    },
+    onDrag(event: PointerEventFrame): void {
+      const { x, y } = event.event
+      switch (owner) {
+        case 'scrollbar':
+          deps.onScrollbarDrag(y)
+          return
+        case 'hint': {
+          const gesture = hintGesture.current
+          if (gesture === null) return
+          if (!gesture.dragged) {
+            gesture.dragged = true
+            deps.hintDragStart(x, y)
+          } else {
+            deps.hintDragMove(x, y)
+          }
+          return
+        }
+        case 'input':
+          extendOrDrag(inputCandidate, event)
+          return
+        case 'panel':
+          extendOrDrag(panelCandidate, event)
+          return
+        case 'dialog':
+          extendOrDrag(dialogCandidate, event)
+          return
+        case 'message': {
+          const candidate = clickCandidate.current
+          if (candidate !== null) {
+            candidate.moved = true
+            clickCandidate.current = null
+            const anchorInMessage = deps.inMessageArea(candidate.y)
+            deps.setPointerArea(anchorInMessage)
+            deps.setSelection({
+              anchorRow: deps.toContentRow(candidate.y),
+              anchorCol: candidate.x,
+              focusRow: deps.clampMessageFocus(anchorInMessage, y),
+              focusCol: x,
+              inMessage: anchorInMessage,
+            })
+            return
+          }
+          deps.setSelection(current => current === null ? current : {
+            ...current,
+            focusRow: deps.focusRowFor(current, y),
+            focusCol: x,
+          })
+          deps.updateDragScroll(y)
+          return
+        }
+        default:
+          deps.setSelection(current => current === null ? current : {
+            ...current,
+            focusRow: deps.focusRowFor(current, y),
+            focusCol: x,
+          })
+          deps.updateDragScroll(y)
+      }
+    },
+    onUp(event: PointerEventFrame): void {
+      const { x, y } = event.event
+      switch (owner) {
+        case 'scrollbar':
+          scrollbarSession.current = null
+          return
+        case 'hint': {
+          const gesture = hintGesture.current
+          hintGesture.current = null
+          if (gesture !== null) deps.hintRelease(x, y, gesture.dragged)
+          return
+        }
+        case 'input': {
+          const candidate = inputCandidate.current
+          inputCandidate.current = null
+          if (candidate !== null) deps.inputClickAt(candidate.y, candidate.x)
+          return
+        }
+        case 'panel': {
+          const candidate = panelCandidate.current
+          panelCandidate.current = null
+          if (candidate !== null) {
+            deps.panelClickAt(candidate.y, candidate.x)
+            deps.setSelection(null)
+          }
+          return
+        }
+        case 'dialog': {
+          const candidate = dialogCandidate.current
+          dialogCandidate.current = null
+          if (candidate !== null) {
+            deps.dialogClick(candidate.y, candidate.x)
+            deps.setSelection(null)
+          }
+          return
+        }
+        case 'message': {
+          const candidate = clickCandidate.current
+          clickCandidate.current = null
+          if (candidate !== null && !candidate.moved) deps.toggleMessage(candidate.messageId)
+          return
+        }
+        default:
+          return
+      }
+    },
+    onWheel(event: PointerEventFrame): boolean {
+      const { y } = event.event
+      const dir: -1 | 1 = event.event.scrollDirection === 'up' ? -1 : 1
+      if (event.ui.dialogOpen) return deps.dialogWheel(y, dir)
+      if (event.ui.panelActive && panelContains(y, { columns: event.ui.columns, rows: event.ui.rows, inputHeight: event.ui.inputHeight, messageHeight: event.ui.messageHeight, panelHeight: null })) return deps.panelWheel(dir)
+      if (!event.ui.dialogOpen && !event.ui.panelActive) {
+        const region = deps.activeHintRegion()
+        if (region !== null && y >= region.top && y <= region.bottom) {
+          deps.hintWheel(dir)
+          return true
+        }
+      }
+      if (!event.ui.dialogOpen && !event.ui.panelActive && deps.inInputContent(y)) {
+        deps.inputWheel(dir)
+        return true
+      }
+      const delta = dir === -1 ? -WHEEL_LINES : WHEEL_LINES
+      const live = event.ui.getScroll()
+      const next = Math.max(0, Math.min(live.maxScroll, live.top + delta))
+      if (next !== live.top) deps.onScroll(next)
+      return true
+    },
+  }
+}
+
+export type BuiltinPointerHandler = ReturnType<typeof createBuiltinPointerHandler>

package/src/ui/pointer/registry.ts

@@ -0,0 +1,25 @@
+import { keyedRegistry } from '../../kernel/registry.ts'
+import type { PointerHandlerContribution } from '../../contract/index.ts'
+
+export type { PointerUiContext, PointerSession, PointerEventFrame, PointerHandlerContribution } from '../../contract/index.ts'
+
+const pointerHandlers = keyedRegistry<PointerHandlerContribution>()
+
+/**
+ * Plugins observe pointer events the builtin gesture handler does not claim,
+ * or preempt the builtins entirely. Default order 300 places a plugin behind
+ * every builtin handler (which live at 100..190); order < 100 runs before the
+ * builtins and may claim events first.
+ */
+export const POINTER_PLUGIN_ORDER = 300
+
+export function registerPointerHandler(contribution: PointerHandlerContribution): () => void {
+  return pointerHandlers.register(contribution.id, contribution, { order: contribution.order ?? POINTER_PLUGIN_ORDER })
+}
+
+export function pointerHandlerEntries(): Array<{ key: string; order: number; value: PointerHandlerContribution }> {
+  return pointerHandlers.entries()
+}
+
+/** Builtin layer order constant; see pointer/builtins.ts. */
+export const POINTER_BUILTIN_ORDER = 100

package/src/ui/region.tsx

@@ -0,0 +1,31 @@
+import { createContext, useContext, useMemo } from 'react'
+import type { ReactNode } from 'react'
+
+export interface Origin {
+  x: number
+  y: number
+}
+
+export const ZERO_ORIGIN: Origin = { x: 0, y: 0 }
+
+export const RegionContext = createContext<Origin>(ZERO_ORIGIN)
+
+export function useOrigin(): Origin {
+  return useContext(RegionContext)
+}
+
+export function translate(parent: Origin, x: number, y: number): Origin {
+  return { x: parent.x + x, y: parent.y + y }
+}
+
+export interface RegionProps {
+  x?: number
+  y?: number
+  children: ReactNode
+}
+
+export function Region({ x = 0, y = 0, children }: RegionProps) {
+  const parent = useOrigin()
+  const value = useMemo(() => translate(parent, x, y), [parent.x, parent.y, x, y])
+  return <RegionContext.Provider value={value}>{children}</RegionContext.Provider>
+}

package/src/ui/selection/service.ts

@@ -0,0 +1,92 @@
+import { keyedRegistry } from '../../kernel/registry.ts'
+import { writeClipboardText } from '../../terminal/clipboard.ts'
+import type {
+  LineSelection,
+  SelectionClipboardContribution,
+  SelectionDomainContribution,
+  SelectionExtractContext,
+  SelectionTransformerContribution,
+} from '../../contract/index.ts'
+
+export type {
+  SelectionClipboardContribution,
+  SelectionDomainContribution,
+  SelectionExtractContext,
+  SelectionTransformerContribution,
+} from '../../contract/index.ts'
+
+const domains = keyedRegistry<SelectionDomainContribution>()
+const transformers = keyedRegistry<SelectionTransformerContribution>()
+const clipboardProviders = keyedRegistry<SelectionClipboardContribution>()
+
+/**
+ * Builtin domains sit behind plugin contributions (default order 100): a
+ * plugin domain may claim selections first, and a plugin that unmounts
+ * hands extraction back to the shell.
+ */
+const BUILTIN_DOMAIN_ORDER = 500
+
+let installed = false
+
+function installBuiltins(): void {
+  if (installed) return
+  installed = true
+  const messageDomain: SelectionDomainContribution = {
+    id: 'builtin.message',
+    hit: sel => sel.inMessage,
+    extract: (sel, ctx) => ctx.messageText(sel),
+  }
+  const chromeDomain: SelectionDomainContribution = {
+    id: 'builtin.chrome',
+    hit: () => true,
+    extract: (sel, ctx) => ctx.chromeText(sel),
+  }
+  const clipboardProvider: SelectionClipboardContribution = {
+    id: 'builtin.clipboard',
+    copy: text => {
+      writeClipboardText(text)
+      return true
+    },
+  }
+  domains.register(messageDomain.id, messageDomain, { order: BUILTIN_DOMAIN_ORDER })
+  domains.register(chromeDomain.id, chromeDomain, { order: BUILTIN_DOMAIN_ORDER + 1 })
+  clipboardProviders.register(clipboardProvider.id, clipboardProvider, { order: BUILTIN_DOMAIN_ORDER })
+}
+
+export function registerSelectionDomain(contribution: SelectionDomainContribution): () => void {
+  installBuiltins()
+  return domains.register(contribution.id, contribution, { order: contribution.order ?? 100 })
+}
+
+export function registerSelectionTransformer(contribution: SelectionTransformerContribution): () => void {
+  installBuiltins()
+  return transformers.register(contribution.id, contribution, { order: contribution.order ?? 100 })
+}
+
+export function registerSelectionClipboard(contribution: SelectionClipboardContribution): () => void {
+  installBuiltins()
+  return clipboardProviders.register(contribution.id, contribution, { order: contribution.order ?? 100 })
+}
+
+/**
+ * Copy pipeline: domain extract -> transformer chain -> clipboard provider
+ * chain. Returns the text that was extracted, or null when no domain
+ * claimed the selection.
+ */
+export function copySelection(sel: LineSelection, ctx: SelectionExtractContext): string | null {
+  installBuiltins()
+  let text: string | null = null
+  for (const domain of domains.values()) {
+    if (!domain.hit(sel)) continue
+    text = domain.extract(sel, ctx)
+    break
+  }
+  if (text === null) return null
+  for (const transformer of transformers.values()) {
+    text = transformer.transform(text)
+  }
+  for (const provider of clipboardProviders.values()) {
+    if (provider.copy(text)) break
+  }
+  return text
+}

package/src/ui/selection-registry.ts

@@ -0,0 +1,88 @@
+import { selectedRange } from '../model/selection.ts'
+import type { LineSelection } from '../model/selection.ts'
+import { colToCharIndex, textWidth } from '../core/text.ts'
+
+export interface RowPiece {
+  col: number
+  text: string
+  layer?: 'chrome' | 'message'
+}
+
+const rows = new Map<number, Map<object, RowPiece>>()
+
+export function registerRowPiece(id: object, y: number, piece: RowPiece | null): void {
+  let pieces = rows.get(y)
+  if (piece === null) {
+    if (pieces !== undefined) {
+      pieces.delete(id)
+      if (pieces.size === 0) rows.delete(y)
+    }
+    return
+  }
+  if (pieces === undefined) {
+    pieces = new Map()
+    rows.set(y, pieces)
+  }
+  pieces.set(id, piece)
+}
+
+export function rowPieces(y: number): RowPiece[] {
+  const pieces = rows.get(y)
+  if (pieces === undefined) return []
+  return [...pieces.values()].sort((a, b) => a.col - b.col)
+}
+
+function visiblePieces(y: number): RowPiece[] {
+  const pieces = rowPieces(y)
+  const chrome = pieces.filter(piece => piece.layer !== 'message')
+  return chrome.length > 0 ? chrome : pieces
+}
+
+export function clearRowPieces(): void {
+  rows.clear()
+}
+
+export function envelopeOf(selection: LineSelection): { start: number; end: number } {
+  return {
+    start: Math.min(selection.anchorCol, selection.focusCol),
+    end: Math.max(selection.anchorCol, selection.focusCol),
+  }
+}
+
+export function envelopeOverlaps(selection: LineSelection, col: number, width: number): boolean {
+  const env = envelopeOf(selection)
+  return env.end > col && env.start < col + width
+}
+
+export function sliceByColumns(text: string, startCol: number, endCol: number): string {
+  const startIndex = colToCharIndex(text, Math.max(0, startCol))
+  const endIndex = colToCharIndex(text, Math.max(0, endCol))
+  return text.slice(startIndex, endIndex)
+}
+
+export function chromeSelectionText(selection: LineSelection): string {
+  const top = Math.min(selection.anchorRow, selection.focusRow)
+  const bottom = Math.max(selection.anchorRow, selection.focusRow)
+  const env = envelopeOf(selection)
+  const lines: string[] = []
+  for (let row = top; row <= bottom; row++) {
+    const range = selectedRange(selection, row)
+    if (range === null) continue
+    let line = ''
+    let prevEnd = -1
+    for (const piece of visiblePieces(row)) {
+      const width = textWidth(piece.text)
+      if (!(env.end > piece.col && env.start < piece.col + width)) continue
+      const start = Math.max(range.start, piece.col)
+      const end = Math.min(range.end, piece.col + width)
+      if (start >= end) continue
+      const text = sliceByColumns(piece.text, start - piece.col, end - piece.col)
+      if (text === '') continue
+      if (line !== '') line += prevEnd === piece.col ? '' : ' '
+      line += text
+      prevEnd = piece.col + width
+    }
+    lines.push(line)
+  }
+  return lines.join('\n').replace(/[ \t]+$/gm, '').replace(/\n+$/, '')
+}