@doriandev/devcc 0.1.2

package/src/devcc/cli.ts

@@ -0,0 +1,122 @@
+#!/usr/bin/env bun
+/**
+ * Entry point for `devcc` / `pnpm dev:center`.
+ *
+ * OpenTUI talks to a native Zig core over FFI, which currently means Bun 1.3+
+ * or Node 26.4+ with `--experimental-ffi`. The launcher in `bin/devcc.mjs`
+ * re-execs under a supported runtime; this file fails loudly if something
+ * bypassed it.
+ */
+import { createRequire } from "node:module"
+import { pathToFileURL } from "node:url"
+import { App } from "./app/App.js"
+import { errorMessage } from "./utils/errors.js"
+import { findProjectRoot } from "./utils/paths.js"
+
+interface CliArgs {
+  cwd?: string
+  help: boolean
+  version: boolean
+}
+
+/**
+ * Read the version from package.json rather than duplicating it here, so the
+ * CLI can never disagree with what was published. `src/devcc/cli.ts` and
+ * `dist/devcc/cli.js` sit at the same depth, so one relative path serves both.
+ */
+function readVersion(): string {
+  try {
+    const require = createRequire(import.meta.url)
+    const pkg = require("../../package.json") as { version?: unknown }
+    return typeof pkg.version === "string" ? pkg.version : "0.0.0"
+  } catch {
+    return "0.0.0"
+  }
+}
+
+const VERSION = readVersion()
+
+function parseArgs(argv: readonly string[]): CliArgs {
+  const args: CliArgs = { help: false, version: false }
+  for (let index = 0; index < argv.length; index += 1) {
+    const arg = argv[index]
+    if (arg === "--help" || arg === "-h") args.help = true
+    else if (arg === "--version" || arg === "-v") args.version = true
+    else if (arg === "--cwd" || arg === "-C") {
+      const value = argv[index + 1]
+      if (value) {
+        args.cwd = value
+        index += 1
+      }
+    } else if (arg?.startsWith("--cwd=")) {
+      args.cwd = arg.slice("--cwd=".length)
+    }
+  }
+  return args
+}
+
+const USAGE = `dev command center ${VERSION}
+
+Usage:
+  devcc [options]
+
+Options:
+  -C, --cwd <dir>   Project directory (default: nearest project root)
+  -h, --help        Show this help
+  -v, --version     Show the version
+
+Environment:
+  DEVCC_LOG_LEVEL   debug | info | warn | error | silent (default: info)
+
+Configuration:
+  Optional .devcc.ts or devcc.config.ts in the project root.
+`
+
+export async function main(argv: readonly string[] = process.argv.slice(2)): Promise<number> {
+  const args = parseArgs(argv)
+
+  if (args.help) {
+    process.stdout.write(USAGE)
+    return 0
+  }
+  if (args.version) {
+    process.stdout.write(`${VERSION}\n`)
+    return 0
+  }
+
+  if (!process.stdout.isTTY) {
+    process.stderr.write("devcc needs an interactive terminal (stdout is not a TTY).\n")
+    return 1
+  }
+
+  const app = new App({ cwd: args.cwd ? args.cwd : findProjectRoot() })
+
+  try {
+    await app.run()
+    return 0
+  } catch (error) {
+    // The renderer may still own the terminal; tear it down before printing.
+    try {
+      await app.quit()
+    } catch {
+      // Nothing more we can do here.
+    }
+    process.stderr.write(`devcc failed to start: ${errorMessage(error)}\n`)
+    if (error instanceof Error && error.stack) process.stderr.write(`${error.stack}\n`)
+    return 1
+  }
+}
+
+const entry = process.argv[1]
+const isDirectRun = entry !== undefined && import.meta.url === pathToFileURL(entry).href
+
+if (isDirectRun) {
+  main()
+    .then((code) => {
+      process.exitCode = code
+    })
+    .catch((error: unknown) => {
+      process.stderr.write(`${errorMessage(error)}\n`)
+      process.exitCode = 1
+    })
+}

package/src/devcc/components/CommandPalette.ts

@@ -0,0 +1,136 @@
+import { BoxRenderable, InputRenderable, TextRenderable, type RenderContext } from "@opentui/core"
+import { theme } from "../app/theme.js"
+import type { CommandDefinition } from "../core/commands.js"
+import { fit } from "../utils/format.js"
+import { Overlay } from "./Overlay.js"
+import { RowList, type ListRow } from "./primitives.js"
+import { chunk, dim, styled } from "./styled.js"
+
+/**
+ * Fuzzy command palette (`/`).
+ *
+ * The palette is the discoverable surface for every registered command,
+ * including ones contributed by project config, so nothing is reachable only
+ * through a hidden key binding.
+ */
+export class CommandPalette extends Overlay {
+  readonly input: InputRenderable
+  private readonly list: RowList
+  private readonly counter: TextRenderable
+  private results: CommandDefinition[] = []
+  private selectedIndex = 0
+
+  constructor(ctx: RenderContext) {
+    super(ctx, {
+      title: " Command palette ",
+      widthRatio: 0.7,
+      minWidth: 42,
+      maxWidth: 96,
+      heightRatio: 0.6,
+      minHeight: 9,
+      maxHeight: 24,
+    })
+
+    const inputWrapper = new BoxRenderable(ctx, {
+      height: 1,
+      flexShrink: 0,
+      flexDirection: "row",
+      marginTop: 1,
+      backgroundColor: theme.panelAlt,
+      paddingLeft: 1,
+      paddingRight: 1,
+    })
+    const marker = new TextRenderable(ctx, {
+      content: "› ",
+      fg: theme.accent,
+      width: 2,
+      selectable: false,
+    })
+    this.input = new InputRenderable(ctx, {
+      flexGrow: 1,
+      backgroundColor: theme.panelAlt,
+      textColor: theme.textBright,
+      placeholder: "Type a command…",
+      placeholderColor: theme.textDim,
+    })
+    inputWrapper.add(marker)
+    inputWrapper.add(this.input)
+
+    this.list = new RowList(ctx, { marginTop: 1, flexGrow: 1, onViewportChange: () => this.paint() })
+
+    this.counter = new TextRenderable(ctx, {
+      content: "",
+      fg: theme.textDim,
+      height: 1,
+      flexShrink: 0,
+      selectable: false,
+      truncate: true,
+    })
+
+    this.box.add(inputWrapper)
+    this.box.add(this.list.box)
+    this.box.add(this.counter)
+  }
+
+  open(): void {
+    this.input.value = ""
+    this.selectedIndex = 0
+    this.show()
+    this.input.focus()
+  }
+
+  close(): void {
+    this.input.blur()
+    this.hide()
+  }
+
+  get query(): string {
+    return this.input.value
+  }
+
+  setResults(results: CommandDefinition[]): void {
+    this.results = results
+    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, results.length - 1))
+    this.paint()
+  }
+
+  move(delta: number): void {
+    if (this.results.length === 0) return
+    const next = this.selectedIndex + delta
+    this.selectedIndex = ((next % this.results.length) + this.results.length) % this.results.length
+    this.paint()
+  }
+
+  get selected(): CommandDefinition | undefined {
+    return this.results[this.selectedIndex]
+  }
+
+  private paint(): void {
+    const width = Math.max(20, this.box.width - 4)
+    const categoryWidth = 12
+    const shortcutWidth = 8
+
+    const rows: ListRow[] = this.results.map((command) => ({
+      key: command.id,
+      content: styled(
+        dim(fit(command.category ?? "", categoryWidth)),
+        chunk(fit(command.title, Math.max(8, width - categoryWidth - shortcutWidth)), theme.text),
+        dim(command.shortcut ? fit(command.shortcut, shortcutWidth) : ""),
+      ),
+    }))
+
+    if (rows.length === 0) {
+      rows.push({ key: "__empty", content: dimRow("No matching commands"), disabled: true })
+    }
+
+    this.list.setRows(rows, this.selectedIndex)
+    this.counter.content = styled(
+      dim(`${this.results.length} command${this.results.length === 1 ? "" : "s"}`),
+      dim("     ↑↓ move   enter run   esc close"),
+    )
+  }
+}
+
+function dimRow(text: string) {
+  return styled(dim(text))
+}

package/src/devcc/components/ConfirmDialog.ts

@@ -0,0 +1,174 @@
+import { BoxRenderable, InputRenderable, TextRenderable, type RenderContext } from "@opentui/core"
+import { theme } from "../app/theme.js"
+import { Overlay } from "./Overlay.js"
+import { chunk, dim, styled } from "./styled.js"
+
+/**
+ * Yes/no modal for anything destructive or irreversible.
+ *
+ * Nothing in devcc runs a destructive command without one of these: `git
+ * restore`, `git push`, `docker compose down`, and any config-declared command
+ * marked `confirm` all route through here.
+ */
+export class ConfirmDialog extends Overlay {
+  private readonly message: TextRenderable
+  private readonly detail: TextRenderable
+  private resolver: ((value: boolean) => void) | null = null
+
+  constructor(ctx: RenderContext) {
+    super(ctx, {
+      title: " Confirm ",
+      widthRatio: 0.5,
+      minWidth: 36,
+      maxWidth: 72,
+      heightRatio: 0.3,
+      minHeight: 7,
+      maxHeight: 11,
+    })
+
+    this.box.borderColor = theme.warning
+    this.box.titleColor = theme.warning
+
+    this.message = new TextRenderable(ctx, {
+      content: "",
+      fg: theme.textBright,
+      height: 1,
+      marginTop: 1,
+      selectable: false,
+      truncate: true,
+    })
+    this.detail = new TextRenderable(ctx, {
+      content: "",
+      fg: theme.text,
+      flexGrow: 1,
+      wrapMode: "word",
+      selectable: false,
+    })
+    const hints = new TextRenderable(ctx, {
+      content: styled(
+        chunk("y", theme.success),
+        dim(" confirm     "),
+        chunk("n / esc", theme.danger),
+        dim(" cancel"),
+      ),
+      height: 1,
+      selectable: false,
+    })
+
+    this.box.add(this.message)
+    this.box.add(this.detail)
+    this.box.add(hints)
+  }
+
+  /** Show the dialog; resolves once the user answers or dismisses it. */
+  ask(title: string, message: string): Promise<boolean> {
+    this.resolve(false)
+    this.message.content = title
+    this.detail.content = message
+    this.show()
+    return new Promise<boolean>((resolve) => {
+      this.resolver = resolve
+    })
+  }
+
+  resolve(value: boolean): void {
+    const resolver = this.resolver
+    this.resolver = null
+    this.hide()
+    resolver?.(value)
+  }
+
+  get pending(): boolean {
+    return this.resolver !== null
+  }
+}
+
+/** Single-line text prompt, used for commit messages and similar input. */
+export class PromptDialog extends Overlay {
+  readonly input: InputRenderable
+  private readonly label: TextRenderable
+  private resolver: ((value: string | null) => void) | null = null
+
+  constructor(ctx: RenderContext) {
+    super(ctx, {
+      title: " Input ",
+      widthRatio: 0.6,
+      minWidth: 40,
+      maxWidth: 90,
+      heightRatio: 0.25,
+      minHeight: 7,
+      maxHeight: 9,
+    })
+
+    this.label = new TextRenderable(ctx, {
+      content: "",
+      fg: theme.textBright,
+      height: 1,
+      marginTop: 1,
+      selectable: false,
+      truncate: true,
+    })
+
+    const inputWrapper = new BoxRenderable(ctx, {
+      height: 3,
+      marginTop: 1,
+      border: true,
+      borderColor: theme.border,
+      backgroundColor: theme.panelAlt,
+      paddingLeft: 1,
+      paddingRight: 1,
+    })
+    this.input = new InputRenderable(ctx, {
+      backgroundColor: theme.panelAlt,
+      textColor: theme.textBright,
+      placeholderColor: theme.textDim,
+    })
+    inputWrapper.add(this.input)
+
+    const hints = new TextRenderable(ctx, {
+      content: styled(
+        chunk("enter", theme.success),
+        dim(" submit     "),
+        chunk("esc", theme.danger),
+        dim(" cancel"),
+      ),
+      height: 1,
+      marginTop: 1,
+      selectable: false,
+    })
+
+    this.box.add(this.label)
+    this.box.add(inputWrapper)
+    this.box.add(hints)
+  }
+
+  ask(title: string, placeholder = ""): Promise<string | null> {
+    this.resolve(null)
+    this.label.content = title
+    this.input.value = ""
+    this.input.placeholder = placeholder
+    this.show()
+    this.input.focus()
+    return new Promise<string | null>((resolve) => {
+      this.resolver = resolve
+    })
+  }
+
+  resolve(value: string | null): void {
+    const resolver = this.resolver
+    this.resolver = null
+    if (resolver) {
+      this.input.blur()
+      this.hide()
+      resolver(value)
+    }
+  }
+
+  submit(): void {
+    this.resolve(this.input.value)
+  }
+
+  get pending(): boolean {
+    return this.resolver !== null
+  }
+}

package/src/devcc/components/Footer.ts

@@ -0,0 +1,85 @@
+import { BoxRenderable, TextRenderable, type RenderContext, type StyledText } from "@opentui/core"
+import { theme } from "../app/theme.js"
+import { chunk, dim, joinStyled, styled } from "./styled.js"
+
+export interface KeyHint {
+  keys: string
+  label: string
+}
+
+/**
+ * Bottom bar: context-sensitive key hints on the left, transient status on the
+ * right. Hints are dropped from the end when the terminal is too narrow.
+ */
+export class Footer {
+  readonly box: BoxRenderable
+  private readonly hints: TextRenderable
+  private readonly status: TextRenderable
+  private currentHints: KeyHint[] = []
+  private width = 80
+
+  constructor(ctx: RenderContext) {
+    this.box = new BoxRenderable(ctx, {
+      height: 2,
+      flexShrink: 0,
+      flexDirection: "row",
+      alignItems: "center",
+      paddingLeft: 1,
+      paddingRight: 1,
+      border: ["top"],
+      borderColor: theme.border,
+      backgroundColor: theme.footerBackground,
+    })
+
+    this.hints = new TextRenderable(ctx, {
+      content: "",
+      fg: theme.textDim,
+      height: 1,
+      flexGrow: 1,
+      flexShrink: 1,
+      selectable: false,
+      truncate: true,
+    })
+    this.status = new TextRenderable(ctx, {
+      content: "",
+      fg: theme.textDim,
+      height: 1,
+      flexShrink: 0,
+      selectable: false,
+      truncate: true,
+    })
+
+    this.box.add(this.hints)
+    this.box.add(this.status)
+  }
+
+  setWidth(width: number): void {
+    this.width = width
+    this.render()
+  }
+
+  setHints(hints: KeyHint[]): void {
+    this.currentHints = hints
+    this.render()
+  }
+
+  setStatus(message: string | null, level: "info" | "error" | "success" = "info"): void {
+    this.status.content = message ? ` ${message} ` : ""
+    this.status.fg = level === "error" ? theme.danger : level === "success" ? theme.success : theme.textDim
+  }
+
+  private render(): void {
+    const budget = Math.max(10, this.width - 26)
+    const parts: StyledText[] = []
+    let used = 0
+
+    for (const hint of this.currentHints) {
+      const length = hint.keys.length + hint.label.length + 4
+      if (used + length > budget) break
+      used += length
+      parts.push(styled(chunk(hint.keys, theme.text), " ", dim(hint.label)))
+    }
+
+    this.hints.content = joinStyled(parts, "   ")
+  }
+}

package/src/devcc/components/Header.ts

@@ -0,0 +1,93 @@
+import { BoxRenderable, fg, t, TextRenderable, type RenderContext } from "@opentui/core"
+import { theme } from "../app/theme.js"
+import type { AppState } from "../core/state.js"
+import { formatClock } from "../utils/format.js"
+import { truncatePath, tildify } from "../utils/paths.js"
+
+/**
+ * Top bar: product name on the left, project identity and clock on the right.
+ * Collapses to just the project name on narrow terminals.
+ */
+/** `HH:MM` plus a trailing space. */
+const CLOCK_WIDTH = 6
+
+export class Header {
+  readonly box: BoxRenderable
+  private readonly title: TextRenderable
+  private readonly spacer: BoxRenderable
+  private readonly meta: TextRenderable
+  private readonly clock: TextRenderable
+
+  constructor(ctx: RenderContext) {
+    this.box = new BoxRenderable(ctx, {
+      height: 2,
+      flexShrink: 0,
+      flexDirection: "row",
+      alignItems: "center",
+      paddingLeft: 1,
+      paddingRight: 1,
+      border: ["bottom"],
+      borderColor: theme.border,
+      backgroundColor: theme.headerBackground,
+    })
+
+    this.title = new TextRenderable(ctx, {
+      content: "DEV COMMAND CENTER",
+      fg: theme.accent,
+      height: 1,
+      selectable: false,
+      truncate: true,
+    })
+    // A flexible spacer absorbs the slack, so the project block and clock sit
+    // flush right without any padding arithmetic.
+    this.spacer = new BoxRenderable(ctx, {
+      flexGrow: 1,
+      flexShrink: 1,
+      height: 1,
+      backgroundColor: "transparent",
+    })
+    this.meta = new TextRenderable(ctx, {
+      content: "",
+      fg: theme.textDim,
+      height: 1,
+      marginLeft: 2,
+      flexShrink: 1,
+      selectable: false,
+      truncate: true,
+    })
+    // The clock never gets truncated away: it sits outside the flexible column.
+    this.clock = new TextRenderable(ctx, {
+      content: "",
+      fg: theme.text,
+      height: 1,
+      // Fixed width so the flexible project block can never squeeze it out.
+      width: CLOCK_WIDTH,
+      flexShrink: 0,
+      selectable: false,
+    })
+
+    this.box.add(this.title)
+    this.box.add(this.spacer)
+    this.box.add(this.meta)
+    this.box.add(this.clock)
+  }
+
+  update(state: AppState): void {
+    const { width } = state.ui
+    const narrow = width < 64
+
+    this.title.content = narrow ? "DEVCC" : "DEV COMMAND CENTER"
+
+    const clockText = formatClock(state.ui.clock)
+    this.clock.content = t`${fg(theme.text)(clockText)} `
+
+    // Drop detail as the terminal narrows rather than letting it be clipped.
+    const pieces = [state.project.name]
+    if (width >= 64) pieces.push(state.project.packageManager.manager)
+    if (width >= 96)
+      pieces.push(truncatePath(tildify(state.project.rootDir), Math.max(12, Math.floor(width / 3))))
+
+    const label = pieces.join("  ·  ")
+    this.meta.content = t`${fg(theme.textDim)(label)} `
+  }
+}

package/src/devcc/components/HelpOverlay.ts

@@ -0,0 +1,62 @@
+import type { RenderContext } from "@opentui/core"
+import { theme } from "../app/theme.js"
+import { fit } from "../utils/format.js"
+import { Overlay } from "./Overlay.js"
+import { RowList, type ListRow } from "./primitives.js"
+import { chunk, dim, styled } from "./styled.js"
+
+export interface HelpEntry {
+  keys: string
+  description: string
+}
+
+export interface HelpSection {
+  title: string
+  entries: HelpEntry[]
+}
+
+/** Scrollable in-app manual (`?` / `F1`). */
+export class HelpOverlay extends Overlay {
+  private readonly list: RowList
+
+  constructor(ctx: RenderContext, sections: HelpSection[]) {
+    super(ctx, {
+      title: " Manual ",
+      // Wide enough that a full description line fits on an 80-column terminal.
+      widthRatio: 0.85,
+      minWidth: 60,
+      maxWidth: 100,
+      heightRatio: 0.85,
+      minHeight: 10,
+      maxHeight: 40,
+    })
+
+    this.list = new RowList(ctx, { marginTop: 1, flexGrow: 1, scrollPadding: 0 })
+    this.box.add(this.list.box)
+    this.setSections(sections)
+  }
+
+  setSections(sections: HelpSection[]): void {
+    const rows: ListRow[] = []
+    for (const [index, section] of sections.entries()) {
+      if (index > 0) rows.push({ key: `spacer-${index}`, content: "", disabled: true })
+      rows.push({
+        key: `section-${section.title}`,
+        content: styled(chunk(section.title.toUpperCase(), theme.accent)),
+        disabled: true,
+      })
+      for (const entry of section.entries) {
+        rows.push({
+          key: `${section.title}-${entry.keys}`,
+          content: styled(chunk(fit(entry.keys, 14), theme.textBright), dim(entry.description)),
+          disabled: true,
+        })
+      }
+    }
+    this.list.setRows(rows, 0)
+  }
+
+  scroll(delta: number): void {
+    this.list.scrollBy(delta)
+  }
+}