@xp266/dshtui 0.1.0

package/src/ui/widgets/select.tsx

@@ -0,0 +1,97 @@
+import { Box, Text } from 'ink'
+import { COLORS } from '../../theme.ts'
+import { glyphs } from '../../terminal/glyphs.ts'
+import { selectBlock, CAROUSEL_BUTTON_WIDTH } from '../dialog/geometry.ts'
+import { textWidth } from '../../core/text.ts'
+import { SelectableText } from '../selection.tsx'
+import { BUILTIN_WIDGET_ORDER, registerWidget } from './registry.ts'
+import type { PaintArgs, ClickHit, ClickActions, WidgetKeyApi } from './types.ts'
+import type { DialogItem } from '../dialog/items.ts'
+
+type SelectItem = Extract<DialogItem, { type: 'select' }>
+
+export function carouselHit(item: SelectItem, width: number, localX: number): -1 | 1 | null {
+  if (item.options.length <= 1) return null
+  const block = selectBlock(width, item.value)
+  if (localX >= block.blockStart && localX < block.blockStart + CAROUSEL_BUTTON_WIDTH) return -1
+  if (localX >= block.blockStart + block.blockWidth - CAROUSEL_BUTTON_WIDTH && localX < block.blockStart + block.blockWidth) return 1
+  return null
+}
+
+function paintSelect(paint: PaintArgs<SelectItem>) {
+  const { item, width, y, x } = paint
+  const block = selectBlock(width, item.value)
+  const hasArrows = item.options.length > 1
+  const pad = hasArrows ? block.leftPad : block.fullLeftPad
+  const inner = block.blockWidth - (hasArrows ? CAROUSEL_BUTTON_WIDTH * 2 : 0)
+  const valueCol = x + block.blockStart + (hasArrows ? CAROUSEL_BUTTON_WIDTH : 0)
+  const valueText = ' '.repeat(pad) + block.text + ' '.repeat(Math.max(0, inner - pad - textWidth(block.text)))
+  const carousel = (
+    <Box width={width} justifyContent="space-between">
+      <SelectableText y={y} col={x} text={`${item.label}:`} />
+      <Box width={block.blockWidth} flexDirection="row">
+        {hasArrows && (
+          <Text color={COLORS.ink} backgroundColor={paint.pressed === 'left' ? COLORS.carouselButtonPressedBg : COLORS.carouselButtonBg}>{` ${glyphs.carouselLeft} `}</Text>
+        )}
+        <SelectableText
+          y={y}
+          col={valueCol}
+          text={valueText}
+          color={paint.focused ? COLORS.carouselSelectedText : COLORS.ink}
+          backgroundColor={COLORS.carouselCurrentBg}
+        />
+        {hasArrows && (
+          <Text color={COLORS.ink} backgroundColor={paint.pressed === 'right' ? COLORS.carouselButtonPressedBg : COLORS.carouselButtonBg}>{` ${glyphs.carouselRight} `}</Text>
+        )}
+      </Box>
+    </Box>
+  )
+  if (!item.spaced) return carousel
+  return (
+    <Box flexDirection="column">
+      {paint.clip === 0 && carousel}
+      <Box height={1}>
+        <Text> </Text>
+      </Box>
+    </Box>
+  )
+}
+
+function cycle(item: SelectItem, direction: -1 | 1): void {
+  const index = Math.max(0, item.options.indexOf(item.value))
+  const length = item.options.length
+  const next = item.options[(index + direction + length) % length]
+  if (next !== undefined) item.onChange(next)
+}
+
+registerWidget<SelectItem>('select', {
+  selectable: true,
+  height(item) {
+    return item.spaced === true ? 2 : 1
+  },
+  paintWidth(item) {
+    return textWidth(item.label)
+  },
+  render: paintSelect,
+  onLeftRight(item, direction) {
+    if (item.options.length <= 1) return false
+    cycle(item, direction)
+    return true
+  },
+  onEnter(item, api) {
+    if (item.onEnter !== undefined) {
+      item.onEnter()
+      return true
+    }
+    api.navigate('down')
+    return true
+  },
+  onClick(item, hit: ClickHit, actions: ClickActions) {
+    if (hit.localY !== 0) return false
+    const direction = carouselHit(item, hit.width, hit.localX)
+    if (direction === null) return false
+    cycle(item, direction)
+    actions.flash(direction === -1 ? 'left' : 'right')
+    return true
+  },
+}, { order: BUILTIN_WIDGET_ORDER })

package/src/ui/widgets/static.tsx

@@ -0,0 +1,37 @@
+import { Box } from 'ink'
+import { COLORS } from '../../theme.ts'
+import { textWidth, wrapLines } from '../../core/text.ts'
+import { SelectableText } from '../selection.tsx'
+import { BUILTIN_WIDGET_ORDER, registerWidget } from './registry.ts'
+import type { DialogItem } from '../dialog/items.ts'
+
+type StaticItem = Extract<DialogItem, { type: 'static' }>
+
+registerWidget<StaticItem>('static', {
+  selectable: false,
+  height(item, width) {
+    return Math.max(1, wrapLines(item.label, Math.max(4, width)).length)
+  },
+  paintWidth(item) {
+    return textWidth(item.label)
+  },
+  render({ item, width, y, x }) {
+    const lines = item.label === '' ? [''] : wrapLines(item.label, Math.max(4, width))
+    if (lines.length === 1) {
+      return <SelectableText y={y} col={x} text={item.label === '' ? ' ' : item.label} color={item.label === '' ? undefined : COLORS.toolBodyText} />
+    }
+    return (
+      <Box flexDirection="column">
+        {lines.map((line, index) => (
+          <SelectableText
+            key={index}
+            y={y + index}
+            col={x}
+            text={line === '' ? ' ' : line}
+            color={line === '' ? undefined : COLORS.toolBodyText}
+          />
+        ))}
+      </Box>
+    )
+  },
+}, { order: BUILTIN_WIDGET_ORDER })

package/src/ui/widgets/types.ts

@@ -0,0 +1 @@
+export type { ClickActions, ClickHit, PaintArgs, WidgetDef, WidgetKeyApi } from '../../contract/index.ts'

package/src/ui/window-services-bridge.ts

@@ -0,0 +1,71 @@
+import { registerWindowService } from './window-services.ts'
+import type { ChatBridge } from '../chat/bridge.ts'
+import type { ModelApi } from './dialog/models-dialog.tsx'
+import type { SessionsApi } from './dialog/sessions-dialog.tsx'
+import type { PresetsApi } from './dialog/presets-dialog.tsx'
+import type { EffortsApi } from './dialog/effort-dialog.tsx'
+import type { DefaultsApi } from './dialog/defaults-dialog.tsx'
+import type { TodoItemLike } from '../chat/todo-view.ts'
+
+/** Builtin window services sit in a high-order layer; plugin services override by default. */
+export const BUILTIN_SERVICE_ORDER = 500
+
+export function registerWindowServices(bridge: ChatBridge): () => void {
+  const models: ModelApi = {
+    listModels: bridge.listModels,
+    selectModel: bridge.selectModel,
+    fetchCustomModels: bridge.fetchCustomModels,
+    saveCustomProvider: bridge.saveCustomProvider,
+    listProviderDirectory: bridge.listProviderDirectory,
+    fetchProviderModels: bridge.fetchProviderModels,
+    saveProviderKey: bridge.saveProviderKey,
+    saveProviderModels: bridge.saveProviderModels,
+    deleteProvider: bridge.deleteProvider,
+    readModelEntries: bridge.readModelEntries,
+    describeModel: bridge.describeModel,
+    saveModelEntry: bridge.saveModelEntry,
+    deleteModelEntry: bridge.deleteModelEntry,
+  }
+  const sessions: SessionsApi = {
+    listSessions: bridge.listSessions,
+    onSessionsChanged: bridge.onSessionListChanged,
+    openSession: bridge.openSession,
+    newSession: bridge.newSession,
+    archiveSession: bridge.archiveSession,
+    activeSessionId: bridge.activeSessionId,
+  }
+  const presets: PresetsApi = {
+    listPresets: bridge.listPresets,
+    currentPreset: bridge.currentPreset,
+    selectPreset: bridge.selectPreset,
+  }
+  const efforts: EffortsApi = {
+    listEfforts: bridge.listEfforts,
+    currentEffort: bridge.currentEffort,
+    selectEffort: bridge.selectEffort,
+  }
+  const defaults: DefaultsApi = {
+    listPresets: bridge.listPresets,
+    defaultPresetId: bridge.defaultPresetId,
+    setDefaultPreset: bridge.setDefaultPreset,
+    listPermissionPresets: bridge.listPermissionPresets,
+    defaultPermission: bridge.defaultPermission,
+    setDefaultPermission: bridge.setDefaultPermission,
+    themeMode: bridge.themePreference,
+    setThemeMode: bridge.setThemePreference,
+  }
+  const disposers = [
+    registerWindowService('models', models, { order: BUILTIN_SERVICE_ORDER }),
+    registerWindowService('sessions', sessions, { order: BUILTIN_SERVICE_ORDER }),
+    registerWindowService('presets', presets, { order: BUILTIN_SERVICE_ORDER }),
+    registerWindowService('efforts', efforts, { order: BUILTIN_SERVICE_ORDER }),
+    registerWindowService('defaults', defaults, { order: BUILTIN_SERVICE_ORDER }),
+  ]
+  return () => {
+    for (const dispose of disposers) dispose()
+  }
+}
+
+export function registerTodosService(todos: readonly TodoItemLike[]): () => void {
+  return registerWindowService('todos', todos, { order: BUILTIN_SERVICE_ORDER })
+}

package/src/ui/window-services.ts

@@ -0,0 +1,20 @@
+import { useSyncExternalStore } from 'react'
+import { keyedRegistry } from '../kernel/registry.ts'
+
+export const windowServices = keyedRegistry<unknown>()
+
+export const registerWindowService = windowServices.register.bind(windowServices)
+export const subscribeWindowServices = windowServices.subscribe.bind(windowServices)
+
+export function hasWindowServices(required: readonly string[] | undefined): boolean {
+  if (required === undefined || required.length === 0) return true
+  return required.every(name => windowServices.has(name))
+}
+
+export function useWindowService<T>(name: string): T | undefined {
+  return useSyncExternalStore(
+    subscribeWindowServices,
+    () => (windowServices.has(name) ? (windowServices.get(name) as T) : undefined),
+    () => undefined,
+  )
+}

package/src/ui/windows/models-window.tsx

@@ -0,0 +1,15 @@
+import { ModelsDialog } from '../dialog/models-dialog.tsx'
+import { useWindowService } from '../window-services.ts'
+import type { ModelApi } from '../dialog/models-dialog.tsx'
+import type { WindowProps } from '../windows.ts'
+
+export interface ModelsWindowProps extends WindowProps {
+  onModelSelected(provider: string, model: string): void
+  onAddProvider(): void
+}
+
+export function ModelsWindow({ onModelSelected, onAddProvider, handleRef, ...props }: ModelsWindowProps) {
+  const api = useWindowService<ModelApi>('models')
+  if (api === undefined) return null
+  return <ModelsDialog ref={handleRef} api={api} onModelSelected={onModelSelected} onAddProvider={onAddProvider} {...props} />
+}

package/src/ui/windows/providers-window.tsx

@@ -0,0 +1,14 @@
+import { ProvidersDialog } from '../dialog/providers-dialog.tsx'
+import { useWindowService } from '../window-services.ts'
+import type { ModelApi } from '../dialog/models-dialog.tsx'
+import type { WindowProps } from '../windows.ts'
+
+export interface ProvidersWindowProps extends WindowProps {
+  onModelSelected(provider: string, model: string): void
+}
+
+export function ProvidersWindow({ onModelSelected, handleRef, ...props }: ProvidersWindowProps) {
+  const api = useWindowService<ModelApi>('models')
+  if (api === undefined) return null
+  return <ProvidersDialog ref={handleRef} api={api} onModelSelected={onModelSelected} {...props} />
+}

package/src/ui/windows/service-window.tsx

@@ -0,0 +1,18 @@
+import type { ComponentType, Ref } from 'react'
+import { useWindowService } from '../window-services.ts'
+import type { DialogHandle } from '../dialog/dialog.tsx'
+import type { WindowProps } from '../windows.ts'
+
+export interface ServiceDialogProps<Api> {
+  api: Api
+  onClose(): void
+  ref?: Ref<DialogHandle>
+}
+
+export function createServiceWindow<Api>(name: string, Dialog: ComponentType<ServiceDialogProps<Api>>): ComponentType<WindowProps> {
+  return function ServiceWindow({ handleRef, onClose }: WindowProps) {
+    const api = useWindowService<Api>(name)
+    if (api === undefined) return null
+    return <Dialog ref={handleRef} api={api} onClose={onClose} />
+  }
+}

package/src/ui/windows/sessions-window.tsx

@@ -0,0 +1,25 @@
+import { SessionsDialog } from '../dialog/sessions-dialog.tsx'
+import { useWindowService } from '../window-services.ts'
+import type { SessionsApi } from '../dialog/sessions-dialog.tsx'
+import type { WindowProps } from '../windows.ts'
+
+export interface SessionsWindowProps extends WindowProps {
+  onBeforeSessionSelected?(): void
+  onSessionSelected(): void
+  onNewSession?(): void
+}
+
+export function SessionsWindow({ onBeforeSessionSelected, onSessionSelected, onNewSession, handleRef, ...props }: SessionsWindowProps) {
+  const api = useWindowService<SessionsApi>('sessions')
+  if (api === undefined) return null
+  return (
+    <SessionsDialog
+      ref={handleRef}
+      api={api}
+      onBeforeSessionSelected={onBeforeSessionSelected}
+      onSessionSelected={onSessionSelected}
+      onNewSession={onNewSession}
+      {...props}
+    />
+  )
+}

package/src/ui/windows-builtin.tsx

@@ -0,0 +1,94 @@
+import { ModelsWindow } from './windows/models-window.tsx'
+import { ProvidersWindow } from './windows/providers-window.tsx'
+import { SessionsWindow } from './windows/sessions-window.tsx'
+import { PresetsDialog } from './dialog/presets-dialog.tsx'
+import { EffortDialog } from './dialog/effort-dialog.tsx'
+import { DefaultsDialog } from './dialog/defaults-dialog.tsx'
+import { TodoDialog } from './dialog/todo-dialog.tsx'
+import { createServiceWindow } from './windows/service-window.tsx'
+import { registerWindow } from './windows.ts'
+
+/**
+ * Builtin windows register as high-order fallback layers: a plugin
+ * contribution for the same id (default order 100) always wins regardless of
+ * registration timing, and disposing the plugin restores the builtin.
+ */
+export const BUILTIN_WINDOW_ORDER = 500
+
+export interface BuiltinWindowDeps {
+  onModelSelected(provider: string, model: string): void
+  onAddProvider(): void
+  onBeforeSessionSelected(): void
+  onSessionSelected(): void
+  onNewSession(): void
+}
+
+export function registerBuiltinWindows(deps: BuiltinWindowDeps): () => void {
+  const disposers = [
+    registerWindow({
+      id: 'models',
+      title: 'models',
+      order: BUILTIN_WINDOW_ORDER + 0,
+      required: ['models'],
+      component: props => <ModelsWindow {...props} onModelSelected={deps.onModelSelected} onAddProvider={deps.onAddProvider} />,
+      command: { name: 'models', description: 'Open model selection' },
+    }),
+    registerWindow({
+      id: 'providers',
+      title: 'providers',
+      order: BUILTIN_WINDOW_ORDER + 5,
+      required: ['models'],
+      component: props => <ProvidersWindow {...props} onModelSelected={deps.onModelSelected} />,
+      command: { name: 'providers', description: 'Open provider selection' },
+    }),
+    registerWindow({
+      id: 'sessions',
+      title: 'sessions',
+      order: BUILTIN_WINDOW_ORDER + 10,
+      required: ['sessions'],
+      component: props => (
+        <SessionsWindow
+          {...props}
+          onBeforeSessionSelected={deps.onBeforeSessionSelected}
+          onSessionSelected={deps.onSessionSelected}
+          onNewSession={deps.onNewSession}
+        />
+      ),
+      command: { name: 'sessions', description: 'Open session picker' },
+    }),
+    registerWindow({
+      id: 'preset',
+      title: 'preset',
+      order: BUILTIN_WINDOW_ORDER + 20,
+      required: ['presets'],
+      component: createServiceWindow('presets', PresetsDialog),
+      command: { name: 'preset', description: 'Select agent preset' },
+    }),
+    registerWindow({
+      id: 'effort',
+      title: 'reasoning effort',
+      order: BUILTIN_WINDOW_ORDER + 30,
+      required: ['efforts'],
+      component: createServiceWindow('efforts', EffortDialog),
+      command: { name: 'reasoning-effort', description: "Select the current model's reasoning effort" },
+    }),
+    registerWindow({
+      id: 'defaults',
+      title: 'defaults',
+      order: BUILTIN_WINDOW_ORDER + 40,
+      required: ['defaults'],
+      component: createServiceWindow('defaults', DefaultsDialog),
+      command: { name: 'defaults', description: 'Set default permission and agent preset' },
+    }),
+    registerWindow({
+      id: 'todo',
+      title: 'todo',
+      order: BUILTIN_WINDOW_ORDER + 50,
+      required: ['todos'],
+      component: createServiceWindow('todos', TodoDialog),
+    }),
+  ]
+  return () => {
+    for (const dispose of disposers) dispose()
+  }
+}

package/src/ui/windows.ts

@@ -0,0 +1,18 @@
+import { keyedRegistry } from '../kernel/registry.ts'
+import type { WindowContribution } from '../contract/index.ts'
+
+export type { WindowCommandSpec, WindowContribution, WindowProps } from '../contract/index.ts'
+
+const inner = keyedRegistry<WindowContribution>()
+
+export function registerWindow(contribution: WindowContribution): () => void {
+  return inner.register(contribution.id, contribution, { order: contribution.order })
+}
+
+export function listWindows(): WindowContribution[] {
+  return inner.values()
+}
+
+export function subscribeWindows(listener: () => void): () => void {
+  return inner.subscribe(listener)
+}

package/src/vendor.ts

@@ -0,0 +1,12 @@
+import './runtime/prod-react.ts'
+/**
+ * Shared react/ink runtime for third-party TUI plugins.
+ *
+ * Plugin authors must import react and ink from this entry instead of adding
+ * them as dependencies: the profile module graph only contains what dshtui
+ * itself links, so a separate react install forks the React instance and
+ * breaks hooks. Re-exporting keeps module identity identical to dshtui's
+ * own copy while the bundler treats both as externals.
+ */
+export { default as React, Children, Component, Fragment, Profiler, StrictMode, Suspense, createContext, createElement, createRef, forwardRef, isValidElement, lazy, memo, startTransition, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useOptimistic, useReducer, useRef, useState, useSyncExternalStore, useTransition } from 'react'
+export { Box, Text, Static, useApp, useInput, useStdin, useStdout, useFocus, useFocusManager, measureElement } from 'ink'