@brimveyn/aimux 1.1.0

package/src/app-runtime/use-backend-runtime.ts

@@ -0,0 +1,99 @@
+import { type MutableRefObject, useEffect, useRef } from 'react'
+
+import type { SessionBackend } from '../session-backend/types'
+import type { AppAction, LayoutState } from '../state/types'
+
+import { attachCurrentSession } from './backend-attach-runtime'
+import { bindBackendRuntimeEvents } from './backend-runtime-events'
+import { useTabRuntimeTimeouts } from './tab-runtime-timeouts'
+
+interface BackendRuntimeOptions {
+  backend: SessionBackend
+  dispatch: (action: AppAction) => void
+  activeTabId: string | null
+  currentSessionId: string | null
+  layoutRef: MutableRefObject<LayoutState>
+  resizingRef: MutableRefObject<boolean>
+  currentSessionWorkspaceSnapshot: Parameters<SessionBackend['attach']>[0]['workspaceSnapshot']
+}
+
+export interface TabRuntimeControls {
+  clearIdleTimer: (tabId: string) => void
+  clearStartupGrace: (tabId: string) => void
+  startStartupGrace: (tabId: string, timeoutMs: number) => void
+}
+
+export function useBackendRuntime({
+  activeTabId,
+  backend,
+  currentSessionId,
+  currentSessionWorkspaceSnapshot,
+  dispatch,
+  layoutRef,
+  resizingRef,
+}: BackendRuntimeOptions): TabRuntimeControls {
+  const attachRequestIdRef = useRef(0)
+  const timeouts = useTabRuntimeTimeouts(dispatch)
+  const {
+    clearAllTimers,
+    clearIdleTimer,
+    clearStartupGrace,
+    isStartupGraceActive,
+    scheduleIdle,
+    startStartupGrace,
+  } = timeouts
+
+  useEffect(() => {
+    if (!currentSessionId) {
+      attachRequestIdRef.current += 1
+      return
+    }
+
+    return attachCurrentSession({
+      attachRequestIdRef,
+      backend,
+      currentSessionId,
+      currentSessionWorkspaceSnapshot,
+      dispatch,
+      layoutRef,
+    })
+  }, [backend, currentSessionId, currentSessionWorkspaceSnapshot, dispatch, layoutRef])
+
+  useEffect(() => {
+    if (!currentSessionId) {
+      return
+    }
+
+    backend.setActiveTab(activeTabId)
+  }, [activeTabId, backend, currentSessionId])
+
+  useEffect(() => {
+    return bindBackendRuntimeEvents({
+      backend,
+      dispatch,
+      resizingRef,
+      timeouts: {
+        clearAllTimers,
+        clearIdleTimer,
+        clearStartupGrace,
+        isStartupGraceActive,
+        scheduleIdle,
+      },
+    })
+  }, [
+    backend,
+    clearAllTimers,
+    clearIdleTimer,
+    clearStartupGrace,
+    dispatch,
+    isStartupGraceActive,
+    resizingRef,
+    scheduleIdle,
+  ])
+
+  return {
+    clearIdleTimer,
+    clearStartupGrace,
+    startStartupGrace,
+  }
+}

package/src/app-runtime/use-directory-search.ts

@@ -0,0 +1,52 @@
+import { useEffect } from 'react'
+
+import type { AppAction, ModalState } from '../state/types'
+
+import { searchProjectDirectories } from '../platform/project-search'
+
+const DEFAULT_DIRECTORY_SEARCH_DEBOUNCE_MS = 200
+
+function getDirectoryQuery(modal: ModalState): string {
+  if (modal.type !== 'create-session') {
+    return ''
+  }
+
+  if (modal.activeField === 'directory') {
+    return modal.editBuffer ?? ''
+  }
+
+  return modal.nameBuffer
+}
+
+export function useDirectorySearch(
+  modal: ModalState,
+  dispatch: (action: AppAction) => void,
+  debounceMs = DEFAULT_DIRECTORY_SEARCH_DEBOUNCE_MS
+): void {
+  const directoryQuery = getDirectoryQuery(modal)
+
+  useEffect(() => {
+    if (modal.type !== 'create-session') {
+      return
+    }
+
+    let isCurrent = true
+
+    if (!directoryQuery.trim()) {
+      dispatch({ results: [], type: 'set-directory-results' })
+      return
+    }
+
+    const timer = setTimeout(async () => {
+      const results = await searchProjectDirectories(directoryQuery)
+      if (isCurrent) {
+        dispatch({ results, type: 'set-directory-results' })
+      }
+    }, debounceMs)
+
+    return () => {
+      isCurrent = false
+      clearTimeout(timer)
+    }
+  }, [debounceMs, directoryQuery, dispatch, modal.type])
+}

package/src/app-runtime/use-mouse-handlers.ts

@@ -0,0 +1,183 @@
+import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
+
+import { useRef } from 'react'
+
+import type { TerminalContentOrigin } from '../input/raw-input-handler'
+import type { SessionBackend } from '../session-backend/types'
+import type { SplitDirection } from '../state/layout-tree'
+import type { AppAction, AppState, TabSession } from '../state/types'
+
+import { logInputDebug } from '../debug/input-log'
+import { MultiClickDetector } from '../input/multi-click-detector'
+import { copyToSystemClipboard } from '../platform/clipboard'
+import {
+  type ClickSelectionResult,
+  isPositionedNode,
+  resolveClickSelection,
+} from './click-selection-resolver'
+import { requestRenderUpTree } from './render-invalidation'
+import { getSplitRatioFromDrag, type SplitDragState } from './split-drag-controller'
+import { getForwardedMouseSequence, getScrollViewportDelta } from './terminal-mouse-adapter'
+
+interface UseMouseHandlersOptions {
+  state: AppState
+  dispatch: (action: AppAction) => void
+  backend: SessionBackend
+  renderer: {
+    clearSelection(): void
+    hasSelection?: boolean
+    startSelection(target: unknown, x: number, y: number): void
+    updateSelection(target: unknown, x: number, y: number, opts: { finishDragging: boolean }): void
+  }
+  activeMouseForwardingEnabled: boolean
+  activeLocalScrollbackEnabled: boolean
+}
+
+const MIN_MULTI_CLICK_SELECTION_COUNT = 2
+
+function getTargetTerminalTabId(
+  focusMode: AppState['focusMode'],
+  activeTabId: string | null,
+  isEnabled: boolean
+): string | null {
+  if (focusMode !== 'terminal-input' || !activeTabId || !isEnabled) {
+    return null
+  }
+
+  return activeTabId
+}
+
+function applyResolvedSelection(
+  renderer: UseMouseHandlersOptions['renderer'],
+  selection: ClickSelectionResult
+): void {
+  renderer.clearSelection()
+  renderer.startSelection(selection.target, selection.baseX + selection.startCol, selection.eventY)
+  renderer.updateSelection(selection.target, selection.baseX + selection.endCol, selection.eventY, {
+    finishDragging: true,
+  })
+  requestRenderUpTree(selection.target)
+  copyToSystemClipboard(selection.selectedText)
+}
+
+export function useMouseHandlers({
+  activeLocalScrollbackEnabled,
+  activeMouseForwardingEnabled,
+  backend,
+  dispatch,
+  renderer,
+  state,
+}: UseMouseHandlersOptions) {
+  const separatorDragRef = useRef<SplitDragState | null>(null)
+  const multiClickRef = useRef(new MultiClickDetector())
+
+  const handleTerminalMouseEvent = (event: OtuiMouseEvent, origin: TerminalContentOrigin) => {
+    const targetTabId = getTargetTerminalTabId(
+      state.focusMode,
+      state.activeTabId,
+      activeMouseForwardingEnabled
+    )
+    if (!targetTabId) {
+      return
+    }
+
+    const sequence = getForwardedMouseSequence(event, origin)
+    if (!sequence) {
+      return
+    }
+
+    backend.write(targetTabId, sequence)
+  }
+
+  const handleTerminalScrollEvent = (event: OtuiMouseEvent) => {
+    const targetTabId = getTargetTerminalTabId(state.focusMode, state.activeTabId, true)
+    if (!targetTabId || activeMouseForwardingEnabled || !activeLocalScrollbackEnabled) {
+      return
+    }
+
+    const delta = getScrollViewportDelta(event)
+    if (delta === null) {
+      return
+    }
+
+    backend.scrollViewport(targetTabId, delta)
+  }
+
+  const handleSplitResize = (tabId: string, ratio: number, axis: SplitDirection) => {
+    dispatch({ axis, ratio, tabId, type: 'set-split-ratio' })
+  }
+
+  const handleSeparatorDragStart = (info: {
+    tabId: string
+    direction: SplitDirection
+    screenStart: number
+    totalSize: number
+  }) => {
+    separatorDragRef.current = info
+  }
+
+  const handleSeparatorDrag = (event: OtuiMouseEvent): boolean => {
+    const drag = separatorDragRef.current
+    if (!drag) {
+      return false
+    }
+
+    const newRatio = getSplitRatioFromDrag(event, drag)
+    dispatch({ axis: drag.direction, ratio: newRatio, tabId: drag.tabId, type: 'set-split-ratio' })
+    return true
+  }
+
+  const handleSeparatorDragEnd = () => {
+    separatorDragRef.current = null
+  }
+
+  const handlePaneActivate = (tabId: string) => {
+    if (tabId !== state.activeTabId) {
+      dispatch({ tabId, type: 'set-active-tab' })
+    }
+    if (state.focusMode !== 'terminal-input') {
+      dispatch({ focusMode: 'terminal-input', type: 'set-focus-mode' })
+    }
+  }
+
+  const handleTerminalClick = (
+    event: OtuiMouseEvent,
+    _origin: TerminalContentOrigin,
+    tabId?: string
+  ) => {
+    const targetTabId = tabId ?? state.activeTabId
+    if (!targetTabId || !event.target) {
+      return
+    }
+
+    const clickCount = multiClickRef.current.track(event.x, event.y)
+    if (clickCount < MIN_MULTI_CLICK_SELECTION_COUNT) {
+      return
+    }
+
+    const tab = state.tabs.find((t: TabSession) => t.id === targetTabId)
+    const selection = resolveClickSelection(event, targetTabId, tab, clickCount)
+    if (!selection) {
+      return
+    }
+
+    event.preventDefault()
+    applyResolvedSelection(renderer, selection)
+
+    logInputDebug('click.done', {
+      hasSelection: !!renderer.hasSelection,
+      targetSelectable: isPositionedNode(event.target) ? !!event.target.selectable : false,
+    })
+  }
+
+  return {
+    handlePaneActivate,
+    handleSeparatorDrag,
+    handleSeparatorDragEnd,
+    handleSeparatorDragStart,
+    handleSplitResize,
+    handleTerminalClick,
+    handleTerminalMouseEvent,
+    handleTerminalScrollEvent,
+  }
+}

package/src/app-runtime/use-renderer-bindings.ts

@@ -0,0 +1,163 @@
+import { useRenderer } from '@opentui/react'
+import { type MutableRefObject, useEffect, useRef } from 'react'
+
+import type { KeyChord } from '../input/keymap/key-chord'
+import type { SessionBackend } from '../session-backend/types'
+import type { AppAction, FocusMode, TabSession } from '../state/types'
+
+import { INPUT_DEBUG_LOG_PATH, logInputDebug } from '../debug/input-log'
+import { createRawInputHandler } from '../input/raw-input-handler'
+import { copyToSystemClipboard } from '../platform/clipboard'
+import { writePasteToTab, writeToTab } from './pty-write'
+import { type OtuiSelection, resolveSelectionClipboardText } from './selection-clipboard'
+import { applyViewportObservation, type ViewportObservation } from './selection-scroll'
+
+const BRACKETED_PASTE_ENABLE_SEQUENCE = '\x1b[?2004h'
+const BRACKETED_PASTE_DISABLE_SEQUENCE = '\x1b[?2004l'
+const PASTE_DEBUG_PREVIEW_LENGTH = 120
+const TEXT_DECODER = new TextDecoder()
+
+interface UseRendererBindingsOptions {
+  backend: SessionBackend
+  renderer: ReturnType<typeof useRenderer>
+  dispatch: (action: AppAction) => void
+  focusMode: FocusMode
+  activeTabId: string | null
+  activeTabViewportY: number | null
+  focusModeRef: MutableRefObject<FocusMode>
+  activeTabIdRef: MutableRefObject<string | null>
+  activeTabRef: MutableRefObject<TabSession | undefined>
+  handleTerminalShortcut: (chord: KeyChord) => boolean
+}
+
+function decodeBytes(bytes: Uint8Array): string {
+  return TEXT_DECODER.decode(bytes)
+}
+
+export function useRendererBindings({
+  activeTabId,
+  activeTabIdRef,
+  activeTabRef,
+  activeTabViewportY,
+  backend,
+  dispatch,
+  focusMode,
+  focusModeRef,
+  handleTerminalShortcut,
+  renderer,
+}: UseRendererBindingsOptions): void {
+  const lastViewportRef = useRef<ViewportObservation | null>(null)
+
+  useEffect(() => {
+    renderer.useMouse = true
+    renderer.useConsole = false
+    renderer.console.hide()
+    renderer.console.show = () => {}
+
+    const handler = createRawInputHandler({
+      getActiveTabId: () => activeTabIdRef.current,
+      getBracketedPasteModeEnabled: () =>
+        activeTabRef.current?.terminalModes.bracketedPasteMode ?? false,
+      getFocusMode: () => focusModeRef.current,
+      handleTerminalShortcut,
+      writeToPty: (tabId, data) => writeToTab(backend, tabId, activeTabRef.current, data),
+    })
+
+    const handlePasteEvent = (event: { bytes: Uint8Array; defaultPrevented?: boolean }) => {
+      logInputDebug('app.rendererPaste', {
+        byteLength: event.bytes.length,
+        defaultPrevented: event.defaultPrevented ?? false,
+      })
+
+      if (event.defaultPrevented) {
+        return
+      }
+
+      const tab = activeTabRef.current
+      const tabId = activeTabIdRef.current
+      const currentFocusMode = focusModeRef.current
+      const payload = decodeBytes(event.bytes)
+
+      logInputDebug('app.onTerminalPaste', {
+        activeTabId: tabId,
+        bracketedPasteMode: tab?.terminalModes.bracketedPasteMode ?? false,
+        byteLength: event.bytes.length,
+        decodedPreview: payload.slice(0, PASTE_DEBUG_PREVIEW_LENGTH),
+        focusMode: currentFocusMode,
+      })
+
+      if (currentFocusMode !== 'terminal-input' || !tabId || !tab) {
+        return
+      }
+
+      writePasteToTab(backend, tabId, tab, payload)
+    }
+
+    const handleSelection = (selection: OtuiSelection) => {
+      const { fallbackLength, selectedText, streamLength } = resolveSelectionClipboardText(
+        selection,
+        activeTabRef.current
+      )
+
+      logInputDebug('app.selection', {
+        fallbackLength,
+        isDragging: selection.isDragging ?? false,
+        osc52Supported: renderer.isOsc52Supported(),
+        streamLength,
+        textLength: selectedText.length,
+      })
+
+      if (selection.isDragging || selectedText.length === 0) {
+        return
+      }
+
+      renderer.copyToClipboardOSC52(selectedText)
+      copyToSystemClipboard(selectedText)
+    }
+
+    renderer.prependInputHandler(handler)
+    renderer.keyInput.on('paste', handlePasteEvent)
+    renderer.on('selection', handleSelection)
+
+    return () => {
+      renderer.removeInputHandler(handler)
+      renderer.keyInput.off('paste', handlePasteEvent)
+      renderer.off('selection', handleSelection)
+    }
+  }, [
+    activeTabIdRef,
+    activeTabRef,
+    backend,
+    dispatch,
+    focusModeRef,
+    handleTerminalShortcut,
+    renderer,
+  ])
+
+  useEffect(() => {
+    const next: ViewportObservation | null =
+      activeTabId !== null && activeTabViewportY !== null
+        ? { tabId: activeTabId, y: activeTabViewportY }
+        : null
+    lastViewportRef.current = applyViewportObservation(renderer, lastViewportRef.current, next)
+  }, [activeTabId, activeTabViewportY, renderer])
+
+  useEffect(() => {
+    const shouldEnableBracketedPaste = focusMode === 'terminal-input' && activeTabId !== null
+    logInputDebug('app.bracketedPasteMode', {
+      activeTabId,
+      enabled: shouldEnableBracketedPaste,
+      focusMode,
+      logPath: INPUT_DEBUG_LOG_PATH,
+    })
+    process.stdout.write(
+      shouldEnableBracketedPaste
+        ? BRACKETED_PASTE_ENABLE_SEQUENCE
+        : BRACKETED_PASTE_DISABLE_SEQUENCE
+    )
+
+    return () => {
+      process.stdout.write(BRACKETED_PASTE_DISABLE_SEQUENCE)
+    }
+  }, [activeTabId, focusMode])
+}

package/src/app-runtime/use-terminal-resize.ts

@@ -0,0 +1,141 @@
+import { type MutableRefObject, useEffect, useMemo, useRef } from 'react'
+
+import type { TerminalContentOrigin } from '../input/raw-input-handler'
+import type { SessionBackend } from '../session-backend/types'
+import type { AppAction, AppState } from '../state/types'
+
+import {
+  createTerminalBounds,
+  forEachSplitPaneRect,
+  toTerminalContentSize,
+} from '../state/layout-resize'
+
+const MAIN_AREA_HORIZONTAL_CHROME = 2
+const MAIN_AREA_VERTICAL_PADDING = 0
+const STATUS_BAR_HEIGHT = 2
+const TERMINAL_PANE_VERTICAL_CHROME = 2
+const MIN_TERMINAL_ROWS = 1
+const MIN_TERMINAL_COLS = 20
+const RESIZE_ACTIVITY_SETTLE_MS = 500
+
+function getTerminalBounds(cols: number, rows: number) {
+  return createTerminalBounds(cols, rows)
+}
+
+function resizeSplitTabs(
+  backend: SessionBackend,
+  layoutTrees: AppState['layoutTrees'],
+  tabIds: string[],
+  cols: number,
+  rows: number
+): void {
+  const bounds = getTerminalBounds(cols, rows)
+  const resizedTabIds = new Set<string>()
+
+  forEachSplitPaneRect(Object.values(layoutTrees), bounds, (tabId, rect) => {
+    const size = toTerminalContentSize(rect)
+    backend.resizeTab(tabId, size.cols, size.rows)
+    resizedTabIds.add(tabId)
+  })
+
+  for (const id of tabIds) {
+    if (!resizedTabIds.has(id)) {
+      backend.resizeTab(id, cols, rows)
+    }
+  }
+}
+
+interface UseTerminalResizeOptions {
+  state: AppState
+  dispatch: (action: AppAction) => void
+  backend: SessionBackend
+  dimensions: { width: number; height: number }
+  contentOriginRef: MutableRefObject<TerminalContentOrigin>
+  resizingRef: MutableRefObject<boolean>
+}
+
+export function useTerminalResize({
+  backend,
+  contentOriginRef,
+  dimensions,
+  dispatch,
+  resizingRef,
+  state,
+}: UseTerminalResizeOptions) {
+  const resizingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const tabIdsRef = useRef<string[]>([])
+
+  const currentTabIds = state.tabs.map((t) => t.id)
+  const tabIdsChanged =
+    currentTabIds.length !== tabIdsRef.current.length ||
+    currentTabIds.some((id, i) => id !== tabIdsRef.current[i])
+  if (tabIdsChanged) {
+    tabIdsRef.current = currentTabIds
+  }
+  const stableTabIds = tabIdsRef.current
+
+  const terminalSize = useMemo(() => {
+    const sidebarWidth = state.sidebar.visible ? state.sidebar.width + 1 : 0
+    const reservedRows =
+      MAIN_AREA_VERTICAL_PADDING + STATUS_BAR_HEIGHT + TERMINAL_PANE_VERTICAL_CHROME
+    const cols = Math.max(
+      MIN_TERMINAL_COLS,
+      Math.floor(dimensions.width - sidebarWidth - MAIN_AREA_HORIZONTAL_CHROME)
+    )
+    const rows = Math.max(MIN_TERMINAL_ROWS, Math.floor(dimensions.height - reservedRows))
+
+    contentOriginRef.current = {
+      cols,
+      rows,
+      x: sidebarWidth + 1,
+      y: 1,
+    }
+
+    return { cols, rows }
+  }, [
+    contentOriginRef,
+    dimensions.height,
+    dimensions.width,
+    state.sidebar.visible,
+    state.sidebar.width,
+  ])
+
+  useEffect(() => {
+    dispatch({
+      cols: terminalSize.cols,
+      rows: terminalSize.rows,
+      type: 'set-terminal-size',
+    })
+    resizingRef.current = true
+    if (resizingTimerRef.current) {
+      clearTimeout(resizingTimerRef.current)
+    }
+    const trees = Object.values(state.layoutTrees)
+    const hasSplits = trees.some((t) => t.type === 'split')
+    if (hasSplits) {
+      resizeSplitTabs(
+        backend,
+        state.layoutTrees,
+        stableTabIds,
+        terminalSize.cols,
+        terminalSize.rows
+      )
+    } else {
+      backend.resizeAll(terminalSize.cols, terminalSize.rows)
+    }
+    resizingTimerRef.current = setTimeout(() => {
+      resizingRef.current = false
+      resizingTimerRef.current = null
+    }, RESIZE_ACTIVITY_SETTLE_MS)
+  }, [
+    backend,
+    dispatch,
+    resizingRef,
+    terminalSize.cols,
+    terminalSize.rows,
+    state.layoutTrees,
+    stableTabIds,
+  ])
+
+  return terminalSize
+}

package/src/app-runtime/use-workspace-autosave.ts

@@ -0,0 +1,39 @@
+import { useEffect, useRef } from 'react'
+
+import type { AppState } from '../state/types'
+
+import { saveCurrentWorkspace } from '../state/workspace-save'
+
+export function useWorkspaceAutosave(state: AppState, debounceMs: number): void {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const latestStateRef = useRef(state)
+  latestStateRef.current = state
+
+  useEffect(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      saveCurrentWorkspace(latestStateRef.current)
+      timeoutRef.current = null
+    }, debounceMs)
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+        timeoutRef.current = null
+      }
+    }
+  }, [debounceMs, state])
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+        timeoutRef.current = null
+      }
+      saveCurrentWorkspace(latestStateRef.current)
+    }
+  }, [])
+}