stage-tui 1.0.7

package/src/hooks/use-git-tui-keyboard.ts

@@ -0,0 +1,293 @@
+import { useKeyboard } from "@opentui/react"
+import type { Dispatch, SetStateAction } from "react"
+
+import { COMMIT_FOCUS_ORDER, MAIN_FOCUS_ORDER, type FocusTarget, type TopAction } from "../ui/types"
+
+type UseGitTuiKeyboardParams = {
+  renderer: {
+    destroy: () => void
+    getSelection?: () => { getSelectedText: () => string } | null
+    copyToClipboardOSC52?: (text: string) => boolean
+  }
+  commitDialogOpen: boolean
+  branchDialogOpen: boolean
+  branchDialogMode: "select" | "create" | "confirm"
+  historyDialogOpen: boolean
+  historyDialogMode: "list" | "action"
+  shortcutsDialogOpen: boolean
+  setCommitDialogOpen: Dispatch<SetStateAction<boolean>>
+  setFocus: Dispatch<SetStateAction<FocusTarget>>
+  focus: FocusTarget
+  fileCount: number
+  moveToPreviousFile: () => void
+  moveToNextFile: () => void
+  openBranchDialog: () => void
+  closeBranchDialog: () => void
+  showBranchDialogList: () => void
+  submitBranchSelection: () => Promise<void>
+  submitBranchStrategy: () => Promise<void>
+  openHistoryDialog: () => Promise<void>
+  closeHistoryDialog: () => void
+  backToHistoryCommitList: () => void
+  submitHistoryCommitSelection: () => Promise<void>
+  submitHistoryAction: () => Promise<void>
+  commitChanges: () => Promise<void>
+  createBranchAndCheckout: () => Promise<void>
+  openCommitDialog: () => void
+  openShortcutsDialog: () => void
+  closeShortcutsDialog: () => void
+  runTopAction: (action: TopAction) => Promise<void>
+  toggleSelectedFileInCommit: () => void
+}
+
+export function useGitTuiKeyboard({
+  renderer,
+  commitDialogOpen,
+  branchDialogOpen,
+  branchDialogMode,
+  historyDialogOpen,
+  historyDialogMode,
+  shortcutsDialogOpen,
+  setCommitDialogOpen,
+  setFocus,
+  focus,
+  fileCount,
+  moveToPreviousFile,
+  moveToNextFile,
+  openBranchDialog,
+  closeBranchDialog,
+  showBranchDialogList,
+  submitBranchSelection,
+  submitBranchStrategy,
+  openHistoryDialog,
+  closeHistoryDialog,
+  backToHistoryCommitList,
+  submitHistoryCommitSelection,
+  submitHistoryAction,
+  commitChanges,
+  createBranchAndCheckout,
+  openCommitDialog,
+  openShortcutsDialog,
+  closeShortcutsDialog,
+  runTopAction,
+  toggleSelectedFileInCommit,
+}: UseGitTuiKeyboardParams) {
+  useKeyboard((key) => {
+    const hasNonShiftModifier = key.ctrl || key.meta || key.option || key.super || key.hyper
+    const isPlainShortcutKey = !hasNonShiftModifier
+    const isMetaCopy = (key.meta || key.super) && !key.ctrl && !key.option && !key.hyper && key.name === "c"
+    const isHelpKey = isPlainShortcutKey && (key.name === "?" || ((key.name === "/" || key.name === "slash") && key.shift))
+    const isSpaceKey = key.name === "space" || key.name === " "
+    const isEnter = key.name === "return" || key.name === "linefeed"
+    const isDialogOpen = commitDialogOpen || branchDialogOpen || historyDialogOpen || shortcutsDialogOpen
+
+    if (isMetaCopy) {
+      const selectedText = renderer.getSelection?.()?.getSelectedText?.()
+      if (selectedText && selectedText.length > 0) {
+        renderer.copyToClipboardOSC52?.(selectedText)
+        key.preventDefault()
+        key.stopPropagation()
+        return
+      }
+    }
+
+    if (!commitDialogOpen && !branchDialogOpen && !historyDialogOpen && isHelpKey) {
+      key.preventDefault()
+      key.stopPropagation()
+      if (shortcutsDialogOpen) {
+        closeShortcutsDialog()
+      } else {
+        openShortcutsDialog()
+      }
+      return
+    }
+
+    if (shortcutsDialogOpen) {
+      if (key.name === "escape") {
+        key.preventDefault()
+        key.stopPropagation()
+        closeShortcutsDialog()
+      }
+      return
+    }
+
+    if (historyDialogOpen && isEnter) {
+      key.preventDefault()
+      key.stopPropagation()
+      if (historyDialogMode === "action") {
+        void submitHistoryAction()
+      } else {
+        void submitHistoryCommitSelection()
+      }
+      return
+    }
+
+    if (branchDialogOpen && isEnter) {
+      key.preventDefault()
+      key.stopPropagation()
+      if (branchDialogMode === "create") {
+        void createBranchAndCheckout()
+      } else if (branchDialogMode === "confirm") {
+        void submitBranchStrategy()
+      } else {
+        void submitBranchSelection()
+      }
+      return
+    }
+
+    if (commitDialogOpen && isEnter) {
+      key.preventDefault()
+      key.stopPropagation()
+      void commitChanges()
+      return
+    }
+
+    if (key.name === "escape") {
+      if (historyDialogOpen) {
+        if (historyDialogMode === "action") {
+          backToHistoryCommitList()
+        } else {
+          closeHistoryDialog()
+        }
+        return
+      }
+      if (branchDialogOpen) {
+        if (branchDialogMode === "select") {
+          closeBranchDialog()
+        } else {
+          showBranchDialogList()
+        }
+        return
+      }
+      if (commitDialogOpen) {
+        setCommitDialogOpen(false)
+        setFocus("files")
+        return
+      }
+      renderer.destroy()
+      return
+    }
+
+    if (key.name === "tab") {
+      key.preventDefault()
+      key.stopPropagation()
+      if (branchDialogOpen) {
+        setFocus(branchDialogMode === "create" ? "branch-create" : "branch-dialog-list")
+        return
+      }
+      if (historyDialogOpen) {
+        setFocus(historyDialogMode === "action" ? "history-actions" : "history-commits")
+        return
+      }
+      const order = commitDialogOpen ? COMMIT_FOCUS_ORDER : MAIN_FOCUS_ORDER
+      setFocus((current) => {
+        const currentIndex = order.findIndex((item) => item === current)
+        if (currentIndex < 0) return order[0] ?? "files"
+        const nextIndex = key.shift ? (currentIndex - 1 + order.length) % order.length : (currentIndex + 1) % order.length
+        return order[nextIndex] ?? "files"
+      })
+      return
+    }
+
+    if (!isDialogOpen && isPlainShortcutKey && key.name === "c") {
+      key.preventDefault()
+      key.stopPropagation()
+      openCommitDialog()
+      return
+    }
+
+    if (!isDialogOpen && isPlainShortcutKey && key.name === "b") {
+      key.preventDefault()
+      key.stopPropagation()
+      openBranchDialog()
+      return
+    }
+
+    if (!isDialogOpen && isPlainShortcutKey && key.name === "h") {
+      key.preventDefault()
+      key.stopPropagation()
+      void openHistoryDialog()
+      return
+    }
+
+    if (!isDialogOpen && isPlainShortcutKey && focus === "files" && fileCount > 0 && isSpaceKey) {
+      key.preventDefault()
+      key.stopPropagation()
+      toggleSelectedFileInCommit()
+      return
+    }
+
+    if (!isDialogOpen && isPlainShortcutKey && focus === "files" && fileCount > 0 && key.name === "up") {
+      key.preventDefault()
+      key.stopPropagation()
+      moveToPreviousFile()
+      return
+    }
+    if (!isDialogOpen && isPlainShortcutKey && focus === "files" && fileCount > 0 && key.name === "down") {
+      key.preventDefault()
+      key.stopPropagation()
+      moveToNextFile()
+      return
+    }
+
+    if (!isDialogOpen && key.ctrl && key.name === "r") {
+      key.preventDefault()
+      key.stopPropagation()
+      void runTopAction("refresh")
+      return
+    }
+    if (!isDialogOpen && key.ctrl && key.name === "f") {
+      key.preventDefault()
+      key.stopPropagation()
+      void runTopAction("fetch")
+      return
+    }
+    if (!isDialogOpen && key.ctrl && key.name === "l") {
+      key.preventDefault()
+      key.stopPropagation()
+      void runTopAction("pull")
+      return
+    }
+    if (!isDialogOpen && key.ctrl && key.name === "p") {
+      key.preventDefault()
+      key.stopPropagation()
+      void runTopAction("push")
+      return
+    }
+
+    if (!isDialogOpen && isPlainShortcutKey && key.name === "r") {
+      key.preventDefault()
+      key.stopPropagation()
+      void runTopAction("refresh")
+      return
+    }
+    if (!isDialogOpen && isPlainShortcutKey && key.name === "f") {
+      key.preventDefault()
+      key.stopPropagation()
+      void runTopAction("fetch")
+      return
+    }
+    if (!isDialogOpen && isPlainShortcutKey && key.name === "l") {
+      key.preventDefault()
+      key.stopPropagation()
+      void runTopAction("pull")
+      return
+    }
+    if (!isDialogOpen && isPlainShortcutKey && key.name === "p") {
+      key.preventDefault()
+      key.stopPropagation()
+      void runTopAction("push")
+      return
+    }
+
+    if (key.ctrl && key.name === "return") {
+      key.preventDefault()
+      key.stopPropagation()
+      if (commitDialogOpen) {
+        void commitChanges()
+      } else {
+        openCommitDialog()
+      }
+    }
+  })
+}

package/src/ui/components/branch-dialog.tsx

@@ -0,0 +1,107 @@
+import type { InputRenderable, SelectOption } from "@opentui/core"
+import type { RefObject } from "react"
+
+import type { UiTheme } from "../theme"
+import type { FocusTarget } from "../types"
+
+type BranchDialogProps = {
+  open: boolean
+  mode: "select" | "create" | "confirm"
+  focus: FocusTarget
+  currentBranch: string
+  branchOptions: SelectOption[]
+  branchOptionsKey: string
+  branchIndex: number
+  onBranchChange: (index: number) => void
+  branchStrategyOptions: SelectOption[]
+  branchStrategyIndex: number
+  onBranchStrategyChange: (index: number) => void
+  branchName: string
+  branchNameRef: RefObject<InputRenderable | null>
+  onBranchNameInput: (value: string) => void
+  theme: UiTheme
+}
+
+export function BranchDialog({
+  open,
+  mode,
+  focus,
+  currentBranch,
+  branchOptions,
+  branchOptionsKey,
+  branchIndex,
+  onBranchChange,
+  branchStrategyOptions,
+  branchStrategyIndex,
+  onBranchStrategyChange,
+  branchName,
+  branchNameRef,
+  onBranchNameInput,
+  theme,
+}: BranchDialogProps) {
+  if (!open) return null
+
+  return (
+    <box
+      style={{
+        width: "100%",
+        flexGrow: 1,
+        paddingLeft: 6,
+        paddingRight: 6,
+        paddingTop: 8,
+        paddingBottom: 4,
+      }}
+    >
+      <box style={{ width: "100%", maxWidth: 88, gap: 1, flexDirection: "column", flexGrow: 1 }}>
+        <text fg={theme.colors.title}>change branch</text>
+        <text fg={theme.colors.subtleText}>current: {currentBranch}</text>
+        {mode === "select" ? (
+          <>
+            <text fg={theme.colors.subtleText}>enter to checkout | select & enter to create branch | esc to close</text>
+            <select
+              key={branchOptionsKey}
+              style={{ width: "100%", height: "100%", textColor: theme.colors.selectText }}
+              options={branchOptions}
+              selectedIndex={branchIndex}
+              showDescription={true}
+              focused={focus === "branch-dialog-list"}
+              selectedBackgroundColor={theme.colors.selectSelectedBackground}
+              selectedTextColor={theme.colors.selectSelectedText}
+              focusedTextColor={theme.colors.selectFocusedText}
+              onChange={onBranchChange}
+            />
+          </>
+        ) : mode === "confirm" ? (
+          <>
+            <text fg={theme.colors.subtleText}>what should happen to your working changes? | enter to continue | esc to go back</text>
+            <select
+              key={`${branchOptionsKey}-strategy`}
+              style={{ width: "100%", height: "100%", textColor: theme.colors.selectText }}
+              options={branchStrategyOptions}
+              selectedIndex={branchStrategyIndex}
+              showDescription={true}
+              focused={focus === "branch-dialog-list"}
+              selectedBackgroundColor={theme.colors.selectSelectedBackground}
+              selectedTextColor={theme.colors.selectSelectedText}
+              focusedTextColor={theme.colors.selectFocusedText}
+              onChange={onBranchStrategyChange}
+            />
+          </>
+        ) : (
+          <>
+            <text fg={theme.colors.subtleText}>enter to create and checkout | invalid chars become "-" | esc to go back</text>
+            <input
+              ref={branchNameRef}
+              value={branchName}
+              onInput={onBranchNameInput}
+              placeholder="new branch name"
+              focused={focus === "branch-create"}
+              textColor={theme.colors.inputText}
+              focusedTextColor={theme.colors.inputFocusedText}
+            />
+          </>
+        )}
+      </box>
+    </box>
+  )
+}

package/src/ui/components/commit-dialog.tsx

@@ -0,0 +1,68 @@
+import type { InputRenderable, TextareaRenderable } from "@opentui/core"
+import type { RefObject } from "react"
+
+import type { UiTheme } from "../theme"
+import type { FocusTarget } from "../types"
+
+type CommitDialogProps = {
+  open: boolean
+  focus: FocusTarget
+  summary: string
+  descriptionRenderKey: number
+  summaryRef: RefObject<InputRenderable | null>
+  descriptionRef: RefObject<TextareaRenderable | null>
+  onSummaryInput: (value: string) => void
+  theme: UiTheme
+}
+
+export function CommitDialog({
+  open,
+  focus,
+  summary,
+  descriptionRenderKey,
+  summaryRef,
+  descriptionRef,
+  onSummaryInput,
+  theme,
+}: CommitDialogProps) {
+  if (!open) return null
+
+  return (
+    <box
+      style={{
+        width: "100%",
+        flexGrow: 1,
+        paddingLeft: 6,
+        paddingRight: 6,
+        paddingTop: 4,
+        paddingBottom: 3,
+        gap: 1,
+      }}
+    >
+      <text fg={theme.colors.title}>commit changes</text>
+      <text fg={theme.colors.subtleText}>enter to commit | esc to cancel</text>
+      <box style={{ width: "100%", height: 3, flexDirection: "column", marginTop: 1 }}>
+        <input
+          ref={summaryRef}
+          value={summary}
+          onInput={onSummaryInput}
+          placeholder="summary (required)"
+          focused={focus === "commit-summary"}
+          textColor={theme.colors.inputText}
+          focusedTextColor={theme.colors.inputFocusedText}
+        />
+      </box>
+      <box style={{ width: "100%", flexGrow: 1 }}>
+        <textarea
+          key={descriptionRenderKey}
+          ref={descriptionRef}
+          initialValue=""
+          placeholder="description (optional)"
+          focused={focus === "commit-description"}
+          textColor={theme.colors.secondaryInputText}
+          focusedTextColor={theme.colors.inputText}
+        />
+      </box>
+    </box>
+  )
+}

package/src/ui/components/commit-history-dialog.tsx

@@ -0,0 +1,87 @@
+import type { SelectOption } from "@opentui/core"
+
+import type { UiTheme } from "../theme"
+import type { FocusTarget } from "../types"
+
+type CommitHistoryDialogProps = {
+  open: boolean
+  mode: "list" | "action"
+  focus: FocusTarget
+  currentBranch: string
+  commitOptions: SelectOption[]
+  commitIndex: number
+  onCommitChange: (index: number) => void
+  actionOptions: SelectOption[]
+  actionIndex: number
+  onActionChange: (index: number) => void
+  selectedCommitTitle: string
+  theme: UiTheme
+}
+
+export function CommitHistoryDialog({
+  open,
+  mode,
+  focus,
+  currentBranch,
+  commitOptions,
+  commitIndex,
+  onCommitChange,
+  actionOptions,
+  actionIndex,
+  onActionChange,
+  selectedCommitTitle,
+  theme,
+}: CommitHistoryDialogProps) {
+  if (!open) return null
+
+  return (
+    <box
+      style={{
+        width: "100%",
+        flexGrow: 1,
+        paddingLeft: 6,
+        paddingRight: 6,
+        paddingTop: 8,
+        paddingBottom: 4,
+      }}
+    >
+      <box style={{ width: "100%", maxWidth: 96, flexDirection: "column", gap: 1, flexGrow: 1 }}>
+        <text fg={theme.colors.title}>commit history</text>
+        <text fg={theme.colors.subtleText}>current branch: {currentBranch}</text>
+
+        {mode === "list" ? (
+          <>
+            <text fg={theme.colors.subtleText}>enter to choose action for selected commit | esc to close</text>
+            <select
+              style={{ width: "100%", height: "100%", textColor: theme.colors.selectText }}
+              options={commitOptions}
+              selectedIndex={commitIndex}
+              showDescription={true}
+              focused={focus === "history-commits"}
+              selectedBackgroundColor={theme.colors.selectSelectedBackground}
+              selectedTextColor={theme.colors.selectSelectedText}
+              focusedTextColor={theme.colors.selectFocusedText}
+              onChange={onCommitChange}
+            />
+          </>
+        ) : (
+          <>
+            <text fg={theme.colors.text}>{selectedCommitTitle}</text>
+            <text fg={theme.colors.subtleText}>choose action | enter confirm | esc back</text>
+            <select
+              style={{ width: "100%", height: 4, textColor: theme.colors.selectText }}
+              options={actionOptions}
+              selectedIndex={actionIndex}
+              showDescription={true}
+              focused={focus === "history-actions"}
+              selectedBackgroundColor={theme.colors.selectSelectedBackground}
+              selectedTextColor={theme.colors.selectSelectedText}
+              focusedTextColor={theme.colors.selectFocusedText}
+              onChange={onActionChange}
+            />
+          </>
+        )}
+      </box>
+    </box>
+  )
+}

package/src/ui/components/diff-workspace.tsx

@@ -0,0 +1,108 @@
+import type { UiTheme } from "../theme"
+import type { FileRow, FocusTarget } from "../types"
+
+type DiffWorkspaceProps = {
+  fileRows: FileRow[]
+  fileIndex: number
+  selectedFilePath: string | null
+  focus: FocusTarget
+  terminalWidth: number
+  terminalHeight: number
+  diffText: string
+  diffMessage: string | null
+  diffFiletype: string | undefined
+  diffView: "unified" | "split"
+  theme: UiTheme
+}
+
+export function DiffWorkspace({
+  fileRows,
+  fileIndex,
+  selectedFilePath,
+  focus,
+  terminalWidth,
+  terminalHeight,
+  diffText,
+  diffMessage,
+  diffFiletype,
+  diffView,
+  theme,
+}: DiffWorkspaceProps) {
+  const visibleRows = Math.max(1, terminalHeight - 6)
+  const changesPaneWidth = getChangesPaneWidth(terminalWidth)
+  const { start, end } = getVisibleRange(fileRows.length, fileIndex, visibleRows)
+  const rows = fileRows.slice(start, end)
+
+  return (
+    <box style={{ flexDirection: "row", flexGrow: 1, gap: 1, paddingLeft: 1, paddingRight: 1 }}>
+      <box style={{ width: changesPaneWidth, flexDirection: "column" }}>
+        <text fg={theme.colors.mutedText}>changes ({fileRows.length})</text>
+        <box style={{ flexDirection: "column", flexGrow: 1 }}>
+          {rows.map((row, rowIndex) => {
+            const absoluteIndex = start + rowIndex
+            const selected = absoluteIndex === fileIndex
+            return (
+              <box key={row.path} style={{ height: 1, flexDirection: "row", ...(selected ? { backgroundColor: theme.colors.selectedRowBackground } : {}) }}>
+                <text fg={row.included ? theme.colors.text : theme.colors.subtleText}>{row.included ? "[x]" : "[ ]"}</text>
+                <text fg={theme.colors.subtleText}> </text>
+                <text fg={row.statusColor}>{row.statusSymbol}</text>
+                <text fg={theme.colors.subtleText}> </text>
+                {row.directory ? <text fg={theme.colors.subtleText}>{row.directory}</text> : null}
+                <text fg={selected || focus === "files" ? theme.colors.inputFocusedText : theme.colors.text}>{row.filename}</text>
+              </box>
+            )
+          })}
+        </box>
+      </box>
+      <box style={{ flexGrow: 1, flexDirection: "column" }}>
+        <text fg={theme.colors.mutedText}>{selectedFilePath ?? "no file selected"}</text>
+        {diffMessage ? (
+          <box style={{ width: "100%", height: "100%", paddingLeft: 1, paddingTop: 1 }}>
+            <text fg={theme.colors.subtleText}>{diffMessage}</text>
+          </box>
+        ) : (
+          <diff
+            key={selectedFilePath ?? "no-selection"}
+            diff={diffText}
+            view={diffView}
+            filetype={diffFiletype}
+            syntaxStyle={theme.diffSyntaxStyle}
+            showLineNumbers={true}
+            wrapMode="none"
+            lineNumberFg={theme.colors.diffLineNumber}
+            addedBg={theme.colors.diffAddedBackground}
+            removedBg={theme.colors.diffRemovedBackground}
+            addedContentBg={theme.colors.diffAddedBackground}
+            removedContentBg={theme.colors.diffRemovedBackground}
+            addedLineNumberBg={theme.colors.diffAddedLineNumberBackground}
+            removedLineNumberBg={theme.colors.diffRemovedLineNumberBackground}
+            fg={theme.colors.diffForeground}
+            style={{ width: "100%", height: "100%" }}
+          />
+        )}
+      </box>
+    </box>
+  )
+}
+
+function getChangesPaneWidth(terminalWidth: number): number {
+  if (!Number.isFinite(terminalWidth) || terminalWidth <= 0) return 42
+  const minimumWidth = 24
+  const minimumDiffWidth = 48
+  const preferredWidth = Math.floor(terminalWidth * 0.28)
+  const maxAllowedWidth = Math.max(minimumWidth, terminalWidth - minimumDiffWidth)
+  return clamp(preferredWidth, minimumWidth, maxAllowedWidth)
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value))
+}
+
+function getVisibleRange(total: number, selectedIndex: number, windowSize: number): { start: number; end: number } {
+  if (total <= 0) return { start: 0, end: 0 }
+  const safeSize = Math.max(windowSize, 1)
+  const maxStart = Math.max(total - safeSize, 0)
+  const centeredStart = Math.max(selectedIndex - Math.floor(safeSize / 2), 0)
+  const start = Math.min(centeredStart, maxStart)
+  return { start, end: Math.min(start + safeSize, total) }
+}