stage-tui 1.0.7

package/src/ui/components/footer-bar.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react"
+
+import { fitFooterLine } from "../utils"
+import type { UiTheme } from "../theme"
+
+type FooterBarProps = {
+  statusMessage: string
+  showShortcutsHint: boolean
+  terminalWidth: number
+  fatalError: string | null
+  isBusy: boolean
+  theme: UiTheme
+}
+
+const SPINNER_FRAMES = "⣾⣽⣻⢿⡿⣟⣯⣷"
+
+export function FooterBar({ statusMessage, showShortcutsHint, terminalWidth, fatalError, isBusy, theme }: FooterBarProps) {
+  const [spinnerIndex, setSpinnerIndex] = useState(0)
+
+  useEffect(() => {
+    if (!isBusy) {
+      setSpinnerIndex(0)
+      return
+    }
+
+    const timer = setInterval(() => {
+      setSpinnerIndex((current) => (current + 1) % SPINNER_FRAMES.length)
+    }, 90)
+
+    return () => clearInterval(timer)
+  }, [isBusy])
+
+  const busyPrefix = isBusy ? `${SPINNER_FRAMES[spinnerIndex]} ` : ""
+  const statusWithSpinner = `${busyPrefix}${statusMessage}`
+  const footerInnerWidth = Math.max(terminalWidth - 2, 0)
+  const shortcutsHint = showShortcutsHint ? "[?] shortcuts" : ""
+
+  if (!shortcutsHint) {
+    const footerLine = fitFooterLine(statusWithSpinner, footerInnerWidth)
+    return (
+      <box style={{ height: 1, paddingLeft: 1, paddingRight: 1 }}>
+        <text fg={fatalError ? theme.colors.footerError : isBusy ? theme.colors.footerBusy : theme.colors.footerReady}>{footerLine}</text>
+      </box>
+    )
+  }
+
+  if (shortcutsHint.length >= footerInnerWidth) {
+    const hintOnlyLine = shortcutsHint.slice(0, footerInnerWidth)
+    return (
+      <box style={{ height: 1, paddingLeft: 1, paddingRight: 1 }}>
+        <text fg={theme.colors.subtleText}>{hintOnlyLine}</text>
+      </box>
+    )
+  }
+
+  const leftWidth = Math.max(footerInnerWidth - shortcutsHint.length - 1, 0)
+  const leftLine = fitFooterLine(statusWithSpinner, leftWidth)
+
+  return (
+    <box style={{ height: 1, paddingLeft: 1, paddingRight: 1, flexDirection: "row" }}>
+      <text fg={fatalError ? theme.colors.footerError : isBusy ? theme.colors.footerBusy : theme.colors.footerReady}>{leftLine}</text>
+      <text fg={theme.colors.subtleText}> {shortcutsHint}</text>
+    </box>
+  )
+}

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

@@ -0,0 +1,53 @@
+import type { UiTheme } from "../theme"
+
+type ShortcutsDialogProps = {
+  open: boolean
+  aiCommitEnabled: boolean
+  theme: UiTheme
+}
+
+const BASE_SHORTCUT_ROWS: ReadonlyArray<readonly [string, string]> = [
+  ["?", "show/hide shortcuts"],
+  ["b", "⎇ change branch"],
+  ["h", "◷ open commit history"],
+  ["space", "include/exclude file in commit"],
+  ["↑ / ↓", "move file selection"],
+  ["r", "↻ refresh"],
+  ["f", "⇣ fetch"],
+  ["l", "⇩ pull"],
+  ["p", "⇧ push"],
+]
+
+export function ShortcutsDialog({ open, aiCommitEnabled, theme }: ShortcutsDialogProps) {
+  if (!open) return null
+  const commitRow: readonly [string, string] = aiCommitEnabled
+    ? ["c", "✦ generate AI commit"]
+    : ["c", "✓ open commit dialog"]
+  const rows = [...BASE_SHORTCUT_ROWS, commitRow, ["esc", "close dialog or exit"]] as const
+
+  return (
+    <box
+      style={{
+        width: "100%",
+        flexGrow: 1,
+        paddingLeft: 6,
+        paddingRight: 6,
+        paddingTop: 8,
+        paddingBottom: 4,
+      }}
+    >
+      <box style={{ width: "100%", maxWidth: 72, flexDirection: "column", gap: 1 }}>
+        <text fg={theme.colors.title}>shortcuts</text>
+        <text fg={theme.colors.subtleText}>press ? or esc to close</text>
+        <box style={{ flexDirection: "column", marginTop: 1 }}>
+          {rows.map(([key, description]) => (
+            <box key={key} style={{ flexDirection: "row", gap: 2 }}>
+              <text fg={theme.colors.hintText}>{key.padEnd(8, " ")}</text>
+              <text fg={theme.colors.text}>{description}</text>
+            </box>
+          ))}
+        </box>
+      </box>
+    </box>
+  )
+}

package/src/ui/components/top-bar.tsx

@@ -0,0 +1,36 @@
+import type { UiTheme } from "../theme"
+
+type TopBarProps = {
+  currentBranch: string
+  tracking: {
+    loading: boolean
+    upstream: string | null
+    ahead: number
+    behind: number
+  }
+  theme: UiTheme
+}
+
+export function TopBar({ currentBranch, tracking, theme }: TopBarProps) {
+  return (
+    <box
+      style={{ height: 3, flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingLeft: 1, paddingRight: 1 }}
+    >
+      <box style={{ flexDirection: "row", gap: 1 }}>
+        <text fg={theme.colors.mutedText}>⎇</text>
+        <text fg={theme.colors.text}>{currentBranch}</text>
+      </box>
+      {tracking.loading ? (
+        <text fg={theme.colors.subtleText}>… loading repository state</text>
+      ) : (
+        <box style={{ flexDirection: "row" }}>
+          {tracking.upstream ? <text fg={theme.colors.subtleText}>{tracking.upstream}</text> : null}
+          {!tracking.upstream ? <text fg={theme.colors.subtleText}>◌ unpublished</text> : null}
+          {tracking.upstream && tracking.ahead === 0 && tracking.behind === 0 ? <text fg={theme.colors.subtleText}> ✓ synced</text> : null}
+          {tracking.ahead > 0 ? <text fg={theme.colors.successText}> ↑{tracking.ahead}</text> : null}
+          {tracking.behind > 0 ? <text fg={theme.colors.warningText}> ↓{tracking.behind}</text> : null}
+        </box>
+      )}
+    </box>
+  )
+}

package/src/ui/diff-style.ts

@@ -0,0 +1,33 @@
+import { RGBA, SyntaxStyle } from "@opentui/core"
+
+type DiffStyleMode = "dark" | "light"
+
+const DARK_DIFF_SYNTAX_STYLE = SyntaxStyle.fromStyles({
+  keyword: { fg: RGBA.fromHex("#c792ea"), italic: true },
+  string: { fg: RGBA.fromHex("#c3e88d") },
+  comment: { fg: RGBA.fromHex("#6a737d"), italic: true },
+  number: { fg: RGBA.fromHex("#f78c6c") },
+  function: { fg: RGBA.fromHex("#82aaff") },
+  type: { fg: RGBA.fromHex("#ffcb6b") },
+  variable: { fg: RGBA.fromHex("#f07178") },
+  operator: { fg: RGBA.fromHex("#89ddff") },
+  punctuation: { fg: RGBA.fromHex("#cdd6f4") },
+  default: { fg: RGBA.fromHex("#e6edf3") },
+})
+
+const LIGHT_DIFF_SYNTAX_STYLE = SyntaxStyle.fromStyles({
+  keyword: { fg: RGBA.fromHex("#7c3aed"), italic: true },
+  string: { fg: RGBA.fromHex("#15803d") },
+  comment: { fg: RGBA.fromHex("#6b7280"), italic: true },
+  number: { fg: RGBA.fromHex("#c2410c") },
+  function: { fg: RGBA.fromHex("#1d4ed8") },
+  type: { fg: RGBA.fromHex("#a16207") },
+  variable: { fg: RGBA.fromHex("#be123c") },
+  operator: { fg: RGBA.fromHex("#0e7490") },
+  punctuation: { fg: RGBA.fromHex("#334155") },
+  default: { fg: RGBA.fromHex("#111827") },
+})
+
+export function createDiffSyntaxStyle(mode: DiffStyleMode): SyntaxStyle {
+  return mode === "light" ? LIGHT_DIFF_SYNTAX_STYLE : DARK_DIFF_SYNTAX_STYLE
+}

package/src/ui/theme.ts

@@ -0,0 +1,151 @@
+import type { SyntaxStyle } from "@opentui/core"
+import { execFileSync } from "node:child_process"
+
+import { createDiffSyntaxStyle } from "./diff-style"
+
+export type UiThemeMode = "dark" | "light"
+export type UiThemePreference = UiThemeMode | "auto"
+
+type UiColors = {
+  title: string
+  text: string
+  mutedText: string
+  subtleText: string
+  hintText: string
+  successText: string
+  warningText: string
+  selectedRowBackground: string
+  selectText: string
+  selectSelectedBackground: string
+  selectSelectedText: string
+  selectFocusedText: string
+  inputText: string
+  inputFocusedText: string
+  secondaryInputText: string
+  footerReady: string
+  footerBusy: string
+  footerError: string
+  diffForeground: string
+  diffLineNumber: string
+  diffAddedBackground: string
+  diffRemovedBackground: string
+  diffAddedLineNumberBackground: string
+  diffRemovedLineNumberBackground: string
+}
+
+export type UiTheme = {
+  mode: UiThemeMode
+  colors: UiColors
+  diffSyntaxStyle: SyntaxStyle
+}
+
+const DARK_COLORS: UiColors = {
+  title: "#f5f5f5",
+  text: "#f3f4f6",
+  mutedText: "#737373",
+  subtleText: "#525252",
+  hintText: "#9ca3af",
+  successText: "#3fb950",
+  warningText: "#d29922",
+  selectedRowBackground: "#101010",
+  selectText: "#9ca3af",
+  selectSelectedBackground: "#111111",
+  selectSelectedText: "#ffffff",
+  selectFocusedText: "#f3f4f6",
+  inputText: "#f3f4f6",
+  inputFocusedText: "#f9fafb",
+  secondaryInputText: "#d1d5db",
+  footerReady: "#58a6ff",
+  footerBusy: "#d29922",
+  footerError: "#ff7b72",
+  diffForeground: "#e5e7eb",
+  diffLineNumber: "#525252",
+  diffAddedBackground: "#06180c",
+  diffRemovedBackground: "#220909",
+  diffAddedLineNumberBackground: "#0a2212",
+  diffRemovedLineNumberBackground: "#2c1010",
+}
+
+const LIGHT_COLORS: UiColors = {
+  title: "#111827",
+  text: "#1f2937",
+  mutedText: "#6b7280",
+  subtleText: "#9ca3af",
+  hintText: "#64748b",
+  successText: "#15803d",
+  warningText: "#b45309",
+  selectedRowBackground: "#e5e7eb",
+  selectText: "#334155",
+  selectSelectedBackground: "#dbeafe",
+  selectSelectedText: "#0f172a",
+  selectFocusedText: "#111827",
+  inputText: "#111827",
+  inputFocusedText: "#020617",
+  secondaryInputText: "#334155",
+  footerReady: "#1d4ed8",
+  footerBusy: "#b45309",
+  footerError: "#b91c1c",
+  diffForeground: "#111827",
+  diffLineNumber: "#6b7280",
+  diffAddedBackground: "#dff3e4",
+  diffRemovedBackground: "#fde2e2",
+  diffAddedLineNumberBackground: "#c7e9d0",
+  diffRemovedLineNumberBackground: "#f7c6c6",
+}
+
+const DARK_THEME: UiTheme = {
+  mode: "dark",
+  colors: DARK_COLORS,
+  diffSyntaxStyle: createDiffSyntaxStyle("dark"),
+}
+
+const LIGHT_THEME: UiTheme = {
+  mode: "light",
+  colors: LIGHT_COLORS,
+  diffSyntaxStyle: createDiffSyntaxStyle("light"),
+}
+
+const THEME_CACHE_TTL_MS = 1000
+let cachedTheme: UiTheme | null = null
+let cachedThemeAt = 0
+let cachedPreference: UiThemePreference | null = null
+
+export function resolveUiTheme(preference: UiThemePreference = "auto"): UiTheme {
+  const now = Date.now()
+  if (cachedTheme && cachedPreference === preference && now - cachedThemeAt < THEME_CACHE_TTL_MS) {
+    return cachedTheme
+  }
+
+  const mode = preference === "auto" ? resolveAutoThemeMode() : preference
+  cachedTheme = mode === "light" ? LIGHT_THEME : DARK_THEME
+  cachedThemeAt = now
+  cachedPreference = preference
+  return cachedTheme
+}
+
+function resolveAutoThemeMode(): UiThemeMode {
+  const explicitBackground = process.env.TERM_BACKGROUND?.trim().toLowerCase()
+  if (explicitBackground === "light") return "light"
+  if (explicitBackground === "dark") return "dark"
+
+  const osMode = resolveThemeModeFromMacOs()
+  if (osMode) return osMode
+
+  return "dark"
+}
+
+function resolveThemeModeFromMacOs(): UiThemeMode | null {
+  if (process.platform !== "darwin") return null
+
+  try {
+    const output = execFileSync("defaults", ["read", "-g", "AppleInterfaceStyle"], {
+      encoding: "utf8",
+      stdio: ["ignore", "pipe", "ignore"],
+      timeout: 200,
+      maxBuffer: 16 * 1024,
+    })
+    return output.trim().toLowerCase() === "dark" ? "dark" : "light"
+  } catch {
+    return "light"
+  }
+}

package/src/ui/types.ts

@@ -0,0 +1,21 @@
+export type FocusTarget =
+  | "files"
+  | "branch-dialog-list"
+  | "branch-create"
+  | "history-commits"
+  | "history-actions"
+  | "commit-summary"
+  | "commit-description"
+export type TopAction = "refresh" | "fetch" | "pull" | "push" | "commit"
+
+export const MAIN_FOCUS_ORDER: FocusTarget[] = ["files"]
+export const COMMIT_FOCUS_ORDER: FocusTarget[] = ["commit-summary", "commit-description"]
+
+export type FileRow = {
+  path: string
+  included: boolean
+  statusSymbol: string
+  statusColor: string
+  directory: string
+  filename: string
+}

package/src/ui/utils.ts

@@ -0,0 +1,99 @@
+import type { ChangedFile } from "../git"
+import type { FileRow } from "./types"
+
+export function inferFiletype(path: string | undefined): string | undefined {
+  if (!path) return undefined
+  const extension = path.includes(".") ? path.split(".").pop() : undefined
+  if (!extension) return undefined
+  const normalized = extension.toLowerCase()
+
+  if (normalized === "ts" || normalized === "tsx") return "typescript"
+  if (normalized === "js" || normalized === "jsx" || normalized === "mjs" || normalized === "cjs") return "javascript"
+  if (normalized === "md" || normalized === "mdx") return "markdown"
+  if (normalized === "yml") return "yaml"
+  if (normalized === "sh" || normalized === "zsh") return "bash"
+
+  return normalized
+}
+
+export function fitFooterLine(text: string, width: number): string {
+  if (width <= 0) return text
+  if (text.length > width) return text.slice(0, width)
+  return text.padEnd(width, " ")
+}
+
+export function fitFooterStatusLine(left: string, right: string, width: number): string {
+  if (width <= 0) return ""
+
+  const rightText = right.trim()
+  if (!rightText) return fitFooterLine(left, width)
+  if (rightText.length >= width) return rightText.slice(0, width)
+
+  const leftWidth = Math.max(width - rightText.length - 1, 0)
+  const leftText = fitFooterLine(left, leftWidth)
+  return `${leftText} ${rightText}`
+}
+
+export function formatTrackingSummary(upstream: string | null, ahead: number, behind: number): string {
+  if (!upstream) {
+    return "◌ unpublished"
+  }
+  if (ahead === 0 && behind === 0) {
+    return "✓ synced"
+  }
+
+  const parts: string[] = []
+  if (ahead > 0) {
+    parts.push(`↑${ahead}`)
+  }
+  if (behind > 0) {
+    parts.push(`↓${behind}`)
+  }
+  return parts.join(" ")
+}
+
+export function buildFileRow(file: ChangedFile, excludedPaths: Set<string>): FileRow {
+  const statusSymbol = resolveStatusSymbol(file)
+  const statusColor = resolveStatusColor(statusSymbol)
+  const pathParts = splitPathParts(file.path)
+
+  return {
+    path: file.path,
+    included: !excludedPaths.has(file.path),
+    statusSymbol,
+    statusColor,
+    directory: pathParts.directory,
+    filename: pathParts.filename,
+  }
+}
+
+function splitPathParts(path: string): { directory: string; filename: string } {
+  const lastSlash = path.lastIndexOf("/")
+  if (lastSlash < 0) {
+    return { directory: "", filename: path }
+  }
+  return {
+    directory: path.slice(0, lastSlash + 1),
+    filename: path.slice(lastSlash + 1),
+  }
+}
+
+function resolveStatusSymbol(file: ChangedFile): string {
+  if (file.untracked) return "◌"
+
+  const statuses = [file.indexStatus, file.worktreeStatus]
+  if (statuses.includes("D")) return "−"
+  if (statuses.includes("A")) return "+"
+  if (statuses.includes("R")) return "→"
+  if (statuses.includes("M")) return "●"
+  return "·"
+}
+
+function resolveStatusColor(statusSymbol: string): string {
+  if (statusSymbol === "+") return "#3fb950"
+  if (statusSymbol === "●") return "#58a6ff"
+  if (statusSymbol === "−") return "#ff7b72"
+  if (statusSymbol === "→") return "#d2a8ff"
+  if (statusSymbol === "◌") return "#d29922"
+  return "#9ca3af"
+}