@xp266/dshtui 0.1.0

package/src/ui/chrome/status-bar.tsx

@@ -0,0 +1,147 @@
+import { Box } from 'ink'
+import type { ChatBridge } from '../../chat/bridge.ts'
+import type { TokenStats } from '../../chat/bridge.ts'
+import type { AgentActivity, AgentPhase } from '../../chat/store.ts'
+import type { ActivePanel } from '../../chat/interactions.ts'
+import type { RetryStatus } from '../../chat/retry-status.ts'
+import { COLORS } from '../../theme.ts'
+import { CHROME_MARGIN_X, CHROME_TEXT_X } from '../../core/metrics.ts'
+import { textWidth, truncate } from '../../core/text.ts'
+import { useStatusLineTexts } from '../contributions.ts'
+import { glyphs } from '../../terminal/glyphs.ts'
+import { Region } from '../region.tsx'
+import { SelectableText } from '../selection.tsx'
+import { useSpinnerTick } from '../spinner-tick.tsx'
+
+const WORKING_HINT = 'Press esc to interrupt'
+const WORKING_ARMED_HINT = 'Press esc again to interrupt'
+const CHARS_PER_TOKEN = 4
+
+const WORKING_PHASE_LABEL: Record<AgentPhase, string> = {
+  'awaiting-request': 'Awaiting request',
+  thinking: 'Thinking',
+  working: 'Working',
+}
+
+interface StatusBarProps {
+  bridge: ChatBridge
+  columns: number
+  top: number
+  busy: boolean
+  running: boolean
+  todoBadge?: { current: number; total: number }
+  activity: AgentActivity
+  panel: ActivePanel | null
+  retryStatus?: RetryStatus
+  escArmed: boolean
+  streamedChars: number
+}
+
+export function StatusBar({
+  bridge,
+  columns,
+  top,
+  busy,
+  running,
+  todoBadge,
+  activity,
+  panel,
+  retryStatus,
+  escArmed,
+  streamedChars,
+}: StatusBarProps) {
+  // Subscribing keeps the retry countdown (Date.now()-derived) fresh per tick.
+  useSpinnerTick()
+  const badge = running && todoBadge !== undefined ? `[Task ${todoBadge.current}/${todoBadge.total}] ` : ''
+  const leftText = busy ? `${badge}${agentStatusLabel(activity, panel, retryStatus)}` : cwdLabel(bridge)
+  const extras = useStatusLineTexts(columns).join(` ${glyphs.separator} `)
+  const extraCol = CHROME_TEXT_X + textWidth(leftText) + 2
+  const hint = busy ? (escArmed ? WORKING_ARMED_HINT : WORKING_HINT) : undefined
+  const hintCol = extraCol + (extras === '' ? 0 : textWidth(extras) + 2)
+  const leftWidth = textWidth(leftText)
+    + (extras === '' ? 0 : 2 + textWidth(extras))
+    + (hint === undefined ? 0 : 2 + textWidth(hint))
+  const avail = columns - CHROME_MARGIN_X * 2 - CHROME_TEXT_X
+  const stats = truncate(statsText(bridge.tokenStats(), streamedChars), Math.max(1, avail - leftWidth - 2))
+  const rightCol = Math.max(hintCol + (hint === undefined ? 0 : textWidth(hint)), columns - CHROME_MARGIN_X * 2 - textWidth(stats))
+  return (
+    <Box position="absolute" top={top} left={0} width={columns} height={1}>
+      <Region y={top}>
+        <Box position="absolute" top={0} left={CHROME_MARGIN_X} width={columns - CHROME_MARGIN_X}>
+          {busy && <SpinnerGlyph />}
+        </Box>
+        <Box position="absolute" top={0} left={CHROME_TEXT_X} width={columns - CHROME_TEXT_X}>
+          <SelectableText
+            y={0}
+            col={CHROME_TEXT_X}
+            text={leftText}
+            color={busy ? COLORS.workspaceWriteText : COLORS.cwdText}
+          />
+        </Box>
+        {extras !== '' && (
+          <Box position="absolute" top={0} left={extraCol} width={Math.max(1, columns - extraCol)}>
+            <SelectableText y={0} col={extraCol} text={extras} color={COLORS.dialogHintText} />
+          </Box>
+        )}
+        {hint !== undefined && (
+          <Box position="absolute" top={0} left={hintCol} width={Math.max(1, columns - hintCol)}>
+            <SelectableText y={0} col={hintCol} text={hint} color={COLORS.dialogHintText} />
+          </Box>
+        )}
+        <Box position="absolute" top={0} left={rightCol} width={Math.max(1, columns - rightCol)}>
+          <SelectableText y={0} col={rightCol} text={stats} color={COLORS.statsText} />
+        </Box>
+      </Region>
+    </Box>
+  )
+}
+
+function SpinnerGlyph() {
+  const tick = useSpinnerTick()
+  return (
+    <SelectableText
+      y={0}
+      col={CHROME_MARGIN_X}
+      text={`${glyphs.spinnerFrames[tick % glyphs.spinnerFrames.length]} `}
+      color={COLORS.workspaceWriteText}
+    />
+  )
+}
+
+function agentStatusLabel(activity: AgentActivity, panel: ActivePanel | null, retryStatus?: RetryStatus): string {
+  if (panel?.kind === 'approval') return 'Waiting for permission'
+  if (panel?.kind === 'question') return 'Waiting for selection'
+  if (activity.compacting) return 'Compacting'
+  if (retryStatus !== undefined) {
+    const remain = retryStatus.untilTs === 0
+      ? undefined
+      : Math.max(0, Math.ceil((retryStatus.untilTs - Date.now()) / 1000))
+    const progress = `(${retryStatus.attempt}/${retryStatus.maxRetries} ${glyphs.separator} ${retryStatus.code})`
+    return remain === undefined ? `Retrying${glyphs.ellipsis} ${progress}` : `Retrying in ${remain}s ${progress}`
+  }
+  return WORKING_PHASE_LABEL[activity.phase]
+}
+
+function cwdLabel(bridge: ChatBridge | undefined): string {
+  const home = process.env.HOME ?? ''
+  const cwd = bridge?.cwd() ?? process.cwd()
+  return home !== '' && cwd.startsWith(home) ? `~${cwd.slice(home.length)}` : cwd
+}
+
+function statsText(stats: TokenStats, streamedChars = 0): string {
+  const estimate = Math.ceil(streamedChars / CHARS_PER_TOKEN)
+  const contextPercent = estimate > 0 && stats.projectedTokens !== undefined && stats.contextWindow !== undefined
+    ? Math.min(100, Math.round((stats.projectedTokens + estimate) / stats.contextWindow * 100))
+    : stats.contextPercent
+  const context = `Context ${contextPercent}%`
+  const hit = `Hit ${stats.hitPercent}%`
+  const tokens = `${formatTokens(stats.input)} ${glyphs.tokenArrow} ${formatTokens(stats.output + estimate)}`
+  return `${context} | ${hit} | ${tokens}`
+}
+
+function formatTokens(n: number): string {
+  if (n < 1_000) return String(n)
+  const scaled = (v: number): string => (v >= 100 ? String(Math.round(v)) : String(Math.round(v * 10) / 10))
+  if (n < 1_000_000) return `${scaled(n / 1_000)}K`
+  return `${scaled(n / 1_000_000)}M`
+}

package/src/ui/contributions.ts

@@ -0,0 +1,47 @@
+import { useSyncExternalStore } from 'react'
+import { keyedRegistry } from '../kernel/registry.ts'
+import type { OverlayContribution, StatusLineContribution } from '../contract/index.ts'
+
+export type { OverlayContribution, StatusLineContribution } from '../contract/index.ts'
+
+export const statusLines = keyedRegistry<StatusLineContribution>()
+export const overlays = keyedRegistry<OverlayContribution>()
+
+export const registerStatusLine = (contribution: StatusLineContribution): (() => void) =>
+  statusLines.register(contribution.id, contribution, { order: contribution.order })
+
+export const registerOverlay = (contribution: OverlayContribution): (() => void) =>
+  overlays.register(contribution.id, contribution)
+
+let statusVersion = 0
+statusLines.subscribe(() => {
+  statusVersion += 1
+})
+let statusCacheVersion = -1
+let statusCacheColumns = -1
+let statusCacheTexts: string[] = []
+
+export function useStatusLineTexts(columns: number): string[] {
+  return useSyncExternalStore(
+    statusLines.subscribe,
+    () => {
+      if (statusCacheVersion !== statusVersion || statusCacheColumns !== columns) {
+        statusCacheVersion = statusVersion
+        statusCacheColumns = columns
+        statusCacheTexts = statusLines.values()
+          .map(contribution => contribution.render({ columns }).trim())
+          .filter(text => text !== '')
+      }
+      return statusCacheTexts
+    },
+    () => [],
+  )
+}
+
+export function useOverlayContribution(id: string | null): OverlayContribution | undefined {
+  return useSyncExternalStore(
+    overlays.subscribe,
+    () => (id === null ? undefined : overlays.get(id)),
+    () => undefined,
+  )
+}

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

@@ -0,0 +1,152 @@
+import { useRef, useState } from 'react'
+import type { Ref } from 'react'
+import { permissionModeInfo } from '../../theme.ts'
+import type { ThemeMode } from '../../theme.ts'
+import { errorLine, loadingLine } from './status-lines.ts'
+import type { PresetSummary } from '../../chat/presets.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_MEDIUM } from './sizes.ts'
+import type { DialogFooterLine, DialogHandle, DialogRow } from './dialog.tsx'
+
+export interface DefaultsApi {
+  listPresets(): Promise<PresetSummary[]>
+  defaultPresetId(): string
+  setDefaultPreset(id: string): Promise<void>
+  listPermissionPresets(): Promise<string[]>
+  defaultPermission(): string
+  setDefaultPermission(id: string): Promise<void>
+  themeMode(): ThemeMode
+  setThemeMode(mode: ThemeMode): Promise<void>
+}
+
+export interface DefaultsDialogProps {
+  api: DefaultsApi
+  onClose: () => void
+  ref?: Ref<DialogHandle>
+}
+
+
+interface DefaultsData {
+  presets: PresetSummary[]
+  permissions: string[]
+}
+
+function useSavedChoice<T>(read: () => T, write: (value: T) => Promise<void>): { value: T; save(value: T): void; error: string | null } {
+  const [value, setValue] = useState(read)
+  const { error, clearError, run } = useAsyncAction()
+  const save = (next: T): void => {
+    setValue(next)
+    void run(() => write(next)).then(result => {
+      if (result.ok) clearError()
+      else setValue(read())
+    })
+  }
+  return { value, save, error }
+}
+
+export function DefaultsDialog({ api, onClose, ref }: DefaultsDialogProps) {
+  const { items, loading, error } = useAsyncList<DefaultsData>(async () => {
+    const [presetList, permissionList] = await Promise.all([api.listPresets(), api.listPermissionPresets()])
+    return [{ presets: presetList, permissions: permissionList }]
+  })
+  const presetChoice = useSavedChoice(() => api.defaultPresetId(), api.setDefaultPreset)
+  const permissionChoice = useSavedChoice(() => api.defaultPermission(), api.setDefaultPermission)
+  const themeChoice = useSavedChoice(() => api.themeMode(), api.setThemeMode)
+  const saveError = presetChoice.error ?? permissionChoice.error ?? themeChoice.error
+  const presets = items[0]?.presets ?? []
+  const permissionIds = items[0]?.permissions ?? []
+  const presetIds = presets.map(preset => preset.id)
+  const presetNames = presets.map(preset => preset.name)
+  const presetValue = presetNames[presetIds.indexOf(presetChoice.value)] ?? presetChoice.value
+  const permissionNames = permissionIds.map(id => permissionModeInfo(id).name)
+  const permissionValue = permissionNames[permissionIds.indexOf(permissionChoice.value)] ?? permissionChoice.value
+  const originalRef = useRef({ preset: api.defaultPresetId(), permission: api.defaultPermission(), theme: api.themeMode() })
+  const revertAndClose = async () => {
+    const original = originalRef.current
+    try {
+      if (presetChoice.value !== original.preset) await api.setDefaultPreset(original.preset)
+      if (permissionChoice.value !== original.permission) await api.setDefaultPermission(original.permission)
+      if (themeChoice.value !== original.theme) await api.setThemeMode(original.theme)
+    } catch {
+      // A failed revert still closes the dialog; the values were already applied live.
+    }
+    onClose()
+  }
+  const rows: DialogRow[] = [
+    {
+      items: [
+        {
+          type: 'select',
+          label: 'Agent Preset',
+          value: presetValue,
+          options: presetNames,
+          onChange: name => {
+            const id = presetIds[presetNames.indexOf(name)]
+            if (id !== undefined) presetChoice.save(id)
+          },
+          spaced: true,
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          type: 'select',
+          label: 'Permission Mode',
+          value: permissionValue,
+          options: permissionNames,
+          onChange: name => {
+            const id = permissionIds[permissionNames.indexOf(name)]
+            if (id !== undefined) permissionChoice.save(id)
+          },
+          spaced: true,
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          type: 'select',
+          label: 'Theme',
+          value: themeChoice.value === 'light' ? 'Light' : 'Dark',
+          options: ['Dark', 'Light'],
+          onChange: name => {
+            const mode: ThemeMode = name === 'Light' ? 'light' : 'dark'
+            if (mode !== themeChoice.value) themeChoice.save(mode)
+          },
+          spaced: true,
+        },
+      ],
+    },
+    {
+      items: [
+        {
+          type: 'actions',
+          confirmLabel: 'Submit',
+          cancelLabel: 'Cancel',
+          onConfirm: onClose,
+          onCancel: () => void revertAndClose(),
+        },
+      ],
+    },
+  ]
+  const footer: DialogFooterLine[] = loading ? [loadingLine()] : []
+  const errors: DialogFooterLine[] = [
+    ...(error !== null ? [errorLine(error)] : []),
+    ...(saveError !== null ? [errorLine(saveError)] : []),
+  ]
+  return (
+    <Dialog
+      ref={ref}
+      width={DIALOG_WIDTH_MEDIUM}
+      maxHeight={DIALOG_MAX_HEIGHT}
+      title="defaults"
+      rows={rows}
+      footer={footer}
+      errors={errors}
+      onClose={onClose}
+    />
+  )
+}

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

@@ -0,0 +1,38 @@
+import { Box, Text } from 'ink'
+import type { ReactNode } from 'react'
+import { textWidth } from '../../core/text.ts'
+import { actionPositions, CAROUSEL_BUTTON_WIDTH, selectBlock } from './geometry.ts'
+import { widgetOf } from '../widgets/registry.ts'
+import '../widgets/index.ts'
+import type { DialogRow } from './items.ts'
+
+export { actionPositions, CAROUSEL_BUTTON_WIDTH, selectBlock }
+
+export function renderRow(
+  row: DialogRow,
+  focused: boolean,
+  contentWidth: number,
+  baseY: number,
+  left: number,
+  pressed: 'left' | 'right' | null = null,
+  subCol = 0,
+  clip = 0,
+  cursor?: number,
+): ReactNode {
+  let col = left
+  return (
+    <Box flexDirection="row">
+      {row.items.map((item, index) => {
+        const def = widgetOf(item.type)
+        const next = def.render({ item, focused, width: contentWidth, y: baseY, x: col, pressed, subCol, clip, cursor: focused ? cursor : undefined })
+        col += def.paintWidth(item) + 1
+        return (
+          <Box key={index} flexDirection="row">
+            {index > 0 && <Text> </Text>}
+            {next}
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}