@doriandev/devcc 0.1.2

package/src/devcc/components/Overlay.ts

@@ -0,0 +1,91 @@
+import { BoxRenderable, type RenderContext } from "@opentui/core"
+import { theme } from "../app/theme.js"
+
+export interface OverlayOptions {
+  title: string
+  /** Fraction of the terminal width, clamped by min/max. */
+  widthRatio?: number
+  minWidth?: number
+  maxWidth?: number
+  heightRatio?: number
+  minHeight?: number
+  maxHeight?: number
+}
+
+/**
+ * Base class for modal panels.
+ *
+ * Overlays are absolutely positioned children of the root, so they float above
+ * the layout without disturbing it, and they re-centre themselves on resize.
+ */
+export class Overlay {
+  readonly box: BoxRenderable
+  protected terminalWidth = 80
+  protected terminalHeight = 24
+
+  constructor(
+    protected readonly ctx: RenderContext,
+    protected readonly options: OverlayOptions,
+  ) {
+    this.box = new BoxRenderable(ctx, {
+      position: "absolute",
+      zIndex: 100,
+      visible: false,
+      flexDirection: "column",
+      border: true,
+      borderStyle: "rounded",
+      borderColor: theme.borderFocus,
+      backgroundColor: theme.panel,
+      title: options.title,
+      titleColor: theme.accent,
+      paddingLeft: 1,
+      paddingRight: 1,
+    })
+  }
+
+  get visible(): boolean {
+    return this.box.visible
+  }
+
+  show(): void {
+    this.box.visible = true
+    this.layout(this.terminalWidth, this.terminalHeight)
+  }
+
+  hide(): void {
+    this.box.visible = false
+  }
+
+  /** Re-centre for the given terminal size. Safe to call on every resize. */
+  layout(terminalWidth: number, terminalHeight: number): void {
+    this.terminalWidth = terminalWidth
+    this.terminalHeight = terminalHeight
+
+    const {
+      widthRatio = 0.6,
+      minWidth = 30,
+      maxWidth = 100,
+      heightRatio = 0.5,
+      minHeight = 5,
+      maxHeight = 30,
+    } = this.options
+
+    const width = clampSize(Math.round(terminalWidth * widthRatio), minWidth, maxWidth, terminalWidth - 2)
+    const height = clampSize(
+      Math.round(terminalHeight * heightRatio),
+      minHeight,
+      maxHeight,
+      terminalHeight - 2,
+    )
+
+    this.box.width = width
+    this.box.height = height
+    this.box.left = Math.max(0, Math.floor((terminalWidth - width) / 2))
+    this.box.top = Math.max(0, Math.floor((terminalHeight - height) / 2))
+  }
+}
+
+function clampSize(preferred: number, min: number, max: number, available: number): number {
+  const upper = Math.max(1, Math.min(max, available))
+  return Math.max(1, Math.min(upper, Math.max(min, preferred)))
+}

package/src/devcc/components/ProjectPicker.ts

@@ -0,0 +1,138 @@
+import { BoxRenderable, InputRenderable, TextRenderable, type RenderContext } from "@opentui/core"
+import { theme } from "../app/theme.js"
+import type { ProjectEntry } from "../projects/ProjectRegistry.js"
+import { fit } from "../utils/format.js"
+import { tildify, truncatePath } from "../utils/paths.js"
+import { Overlay } from "./Overlay.js"
+import { RowList, type ListRow } from "./primitives.js"
+import { chunk, dim, styled } from "./styled.js"
+
+/**
+ * Project switcher (`ctrl+p`).
+ *
+ * Reattaches the whole dashboard to another checkout: the current project,
+ * recently opened ones, anything named in config, and sibling directories.
+ */
+export class ProjectPicker extends Overlay {
+  readonly input: InputRenderable
+  private readonly list: RowList
+  private readonly footer: TextRenderable
+  private results: ProjectEntry[] = []
+  private selectedIndex = 0
+  private currentPath = ""
+
+  constructor(ctx: RenderContext) {
+    super(ctx, {
+      title: " Switch project ",
+      widthRatio: 0.7,
+      minWidth: 44,
+      maxWidth: 100,
+      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,
+    })
+    inputWrapper.add(
+      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: "Filter projects…",
+      placeholderColor: theme.textDim,
+    })
+    inputWrapper.add(this.input)
+
+    // Column widths depend on the overlay width, which is only known after
+    // layout, so recompute the rows when the viewport changes.
+    this.list = new RowList(ctx, { marginTop: 1, flexGrow: 1, onViewportChange: () => this.paint() })
+    this.footer = 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.footer)
+  }
+
+  open(currentPath: string): void {
+    this.currentPath = currentPath
+    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: ProjectEntry[]): 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(): ProjectEntry | undefined {
+    return this.results[this.selectedIndex]
+  }
+
+  private paint(): void {
+    const width = Math.max(24, this.box.width - 4)
+    const nameWidth = Math.min(28, Math.max(12, Math.floor(width * 0.3)))
+
+    const rows: ListRow[] = this.results.map((entry) => {
+      const isCurrent = entry.path === this.currentPath
+      const markers = [entry.hasGit ? "git" : null, entry.hasPackageJson ? "pkg" : null]
+        .filter(Boolean)
+        .join(" ")
+      const pathWidth = Math.max(12, width - nameWidth - 12)
+      return {
+        key: entry.path,
+        content: styled(
+          chunk(isCurrent ? "● " : "  ", theme.accent),
+          chunk(fit(entry.name, nameWidth), isCurrent ? theme.accent : theme.textBright),
+          dim(fit(truncatePath(tildify(entry.path), pathWidth - 1), pathWidth)),
+          dim(fit(markers, 8)),
+        ),
+      }
+    })
+
+    if (rows.length === 0) {
+      rows.push({ key: "__empty", disabled: true, content: styled(dim("No matching projects")) })
+    }
+
+    this.list.setRows(rows, this.selectedIndex)
+    this.footer.content = styled(
+      dim(`${this.results.length} project${this.results.length === 1 ? "" : "s"}`),
+      dim("     ↑↓ move   enter switch   esc cancel"),
+    )
+  }
+}

package/src/devcc/components/Sidebar.ts

@@ -0,0 +1,163 @@
+import { BoxRenderable, TextRenderable, type RenderContext } from "@opentui/core"
+import { shortcutHintFor } from "../app/keymap.js"
+import { theme } from "../app/theme.js"
+import type { ViewId } from "../core/state.js"
+import { fit } from "../utils/format.js"
+import { chunk, dim, styled } from "./styled.js"
+
+export interface SidebarItem {
+  id: ViewId
+  label: string
+}
+
+export const SIDEBAR_ITEMS: readonly SidebarItem[] = [
+  { id: "overview", label: "Overview" },
+  { id: "processes", label: "Processes" },
+  { id: "services", label: "Services" },
+  { id: "scripts", label: "Scripts" },
+  { id: "git", label: "Git" },
+  { id: "logs", label: "Logs" },
+  { id: "dependencies", label: "Dependencies" },
+  { id: "system", label: "System" },
+  { id: "settings", label: "Settings" },
+]
+
+/** What the rail needs to know about an open project. */
+export interface SidebarProject {
+  path: string
+  name: string
+  /** Processes currently active in that project. */
+  running: number
+  /** True when a process there has failed or exhausted its restarts. */
+  attention: boolean
+}
+
+export const SIDEBAR_WIDTH = 23
+
+/** Widest label ("Dependencies") plus a space before the shortcut column. */
+const LABEL_WIDTH = 13
+/** Room for the project name; a space and a 3-column badge follow it. */
+const PROJECT_WIDTH = 14
+/** Keep the rail readable on short terminals. */
+const MAX_PROJECT_ROWS = 6
+
+/**
+ * Left navigation rail.
+ *
+ * With one project open it is the plain section list. Once a second project is
+ * opened a PROJECTS block appears above it - progressive disclosure, so the
+ * single-project case looks exactly as it always did.
+ */
+export class Sidebar {
+  readonly box: BoxRenderable
+  private readonly projectsBlock: BoxRenderable
+  private readonly projectRows: TextRenderable[] = []
+  private readonly sectionHeading: TextRenderable
+  private readonly rows = new Map<ViewId, TextRenderable>()
+  private activeView: ViewId = "overview"
+
+  constructor(private readonly ctx: RenderContext) {
+    this.box = new BoxRenderable(ctx, {
+      width: SIDEBAR_WIDTH,
+      flexShrink: 0,
+      flexDirection: "column",
+      paddingLeft: 1,
+      paddingRight: 1,
+      paddingTop: 1,
+      border: ["right"],
+      borderColor: theme.border,
+      backgroundColor: theme.panel,
+    })
+
+    this.projectsBlock = new BoxRenderable(ctx, {
+      flexDirection: "column",
+      flexShrink: 0,
+      visible: false,
+      backgroundColor: "transparent",
+    })
+    this.projectsBlock.add(
+      new TextRenderable(ctx, { content: "PROJECTS", fg: theme.textDim, height: 1, selectable: false }),
+    )
+    this.box.add(this.projectsBlock)
+
+    this.sectionHeading = new TextRenderable(ctx, {
+      content: "PROJECT",
+      fg: theme.textDim,
+      height: 1,
+      selectable: false,
+    })
+    this.box.add(this.sectionHeading)
+    this.box.add(new BoxRenderable(ctx, { height: 1, backgroundColor: "transparent" }))
+
+    for (const item of SIDEBAR_ITEMS) {
+      const row = new TextRenderable(ctx, { content: "", height: 1, selectable: false, truncate: true })
+      this.rows.set(item.id, row)
+      this.box.add(row)
+    }
+
+    this.setActive("overview")
+  }
+
+  setActive(view: ViewId): void {
+    this.activeView = view
+    for (const item of SIDEBAR_ITEMS) {
+      const row = this.rows.get(item.id)
+      if (!row) continue
+      const active = item.id === view
+      // Shortcut hints are derived from the keymap, never hand-written here.
+      const hint = shortcutHintFor(item.id)
+      row.content = styled(
+        chunk(active ? "● " : "○ ", active ? theme.accent : theme.textDim),
+        chunk(fit(item.label, LABEL_WIDTH), active ? theme.textBright : theme.text),
+        dim(hint),
+      )
+      row.bg = active ? theme.selectionBackground : "transparent"
+    }
+  }
+
+  /**
+   * Show the open projects. The block hides itself with a single project, and
+   * the section heading switches from "PROJECT" to "SECTIONS" when it shows.
+   */
+  setProjects(projects: readonly SidebarProject[], activePath: string): void {
+    const multi = projects.length > 1
+    this.projectsBlock.visible = multi
+    this.sectionHeading.content = multi ? "SECTIONS" : "PROJECT"
+    if (!multi) return
+
+    const visible = projects.slice(0, MAX_PROJECT_ROWS)
+    while (this.projectRows.length < visible.length + 1) {
+      const row = new TextRenderable(this.ctx, { content: "", height: 1, selectable: false, truncate: true })
+      this.projectRows.push(row)
+      this.projectsBlock.add(row)
+    }
+
+    for (const [index, row] of this.projectRows.entries()) {
+      const project = visible[index]
+      if (!project) {
+        // The last pooled row doubles as the spacer under the block.
+        row.visible = index === visible.length
+        row.content =
+          index === visible.length && projects.length > visible.length
+            ? styled(dim(`  +${projects.length - visible.length} more`))
+            : ""
+        row.bg = "transparent"
+        continue
+      }
+      row.visible = true
+      const active = project.path === activePath
+      const badge = project.running > 0 ? `${project.running}▸` : ""
+      row.content = styled(
+        chunk(active ? "● " : "○ ", active ? theme.accent : theme.textDim),
+        chunk(fit(project.name, PROJECT_WIDTH), active ? theme.textBright : theme.text),
+        " ",
+        project.attention ? chunk(fit("!", 3), theme.danger) : chunk(fit(badge, 3), theme.success),
+      )
+      row.bg = active ? theme.selectionBackground : "transparent"
+    }
+  }
+
+  get active(): ViewId {
+    return this.activeView
+  }
+}

package/src/devcc/components/StatusBadge.ts

@@ -0,0 +1,36 @@
+import { fg, t, type StyledText } from "@opentui/core"
+import { processStatusStyle, serviceStateStyle, theme } from "../app/theme.js"
+import type { ProcessStatus } from "../processes/ManagedProcess.js"
+import type { ServiceState } from "../services/types.js"
+import { fit } from "../utils/format.js"
+
+/**
+ * Status indicators.
+ *
+ * A single glyph plus a colour is enough to scan a column at a glance; the
+ * word is included at a fixed width so the columns after it stay aligned.
+ */
+export function processBadge(status: ProcessStatus, width = 9): StyledText {
+  const style = processStatusStyle(status)
+  return t`${fg(style.color)(style.glyph)} ${fg(style.color)(fit(style.label, width))}`
+}
+
+export function serviceBadge(state: ServiceState, width = 12): StyledText {
+  const style = serviceStateStyle(state)
+  return t`${fg(style.color)(style.glyph)} ${fg(style.color)(fit(style.label, width))}`
+}
+
+export function processGlyph(status: ProcessStatus): StyledText {
+  const style = processStatusStyle(status)
+  return t`${fg(style.color)(style.glyph)}`
+}
+
+export function serviceGlyph(state: ServiceState): StyledText {
+  const style = serviceStateStyle(state)
+  return t`${fg(style.color)(style.glyph)}`
+}
+
+/** `label  value` pair with a dim label, aligned to `labelWidth`. */
+export function keyValue(label: string, value: string, labelWidth = 16): StyledText {
+  return t`${fg(theme.textDim)(fit(label, labelWidth))}${fg(theme.text)(value)}`
+}

package/src/devcc/components/primitives.ts

@@ -0,0 +1,213 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  type BoxOptions,
+  type RenderContext,
+  type StyledText,
+} from "@opentui/core"
+import { theme } from "../app/theme.js"
+
+/** Shorthand for a plain text row. */
+export function createText(
+  ctx: RenderContext,
+  content: StyledText | string,
+  options: { fg?: string; bg?: string; height?: number } = {},
+): TextRenderable {
+  return new TextRenderable(ctx, {
+    content,
+    fg: options.fg ?? theme.text,
+    bg: options.bg ?? "transparent",
+    height: options.height ?? 1,
+    truncate: true,
+    selectable: false,
+  })
+}
+
+/** A section heading inside a panel. */
+export function createHeading(ctx: RenderContext, label: string): TextRenderable {
+  return new TextRenderable(ctx, {
+    content: label.toUpperCase(),
+    fg: theme.accent,
+    height: 1,
+    selectable: false,
+    truncate: true,
+  })
+}
+
+export function createBox(ctx: RenderContext, options: BoxOptions = {}): BoxRenderable {
+  return new BoxRenderable(ctx, {
+    backgroundColor: "transparent",
+    ...options,
+  })
+}
+
+/** A vertical spacer. */
+export function createSpacer(ctx: RenderContext, height = 1): BoxRenderable {
+  return new BoxRenderable(ctx, { height, backgroundColor: "transparent" })
+}
+
+export interface ListRow {
+  /** Stable identity, used to preserve selection across refreshes. */
+  key: string
+  content: StyledText | string
+  /** Rendered as a non-selectable row (group headings, empty states). */
+  disabled?: boolean
+}
+
+export interface RowListOptions extends BoxOptions {
+  /** Rows kept visible above/below the selection while scrolling. */
+  scrollPadding?: number
+  /**
+   * Called when the viewport height changes. Views that window their own data
+   * (the log viewer) use this to recompute the slice they hand over.
+   */
+  onViewportChange?: () => void
+}
+
+/**
+ * A scrolling, selectable list of single-line rows.
+ *
+ * Renderables are recycled: refreshing the data updates existing
+ * `TextRenderable` contents instead of rebuilding the subtree, and only the rows
+ * that fit the current viewport are materialised.
+ */
+export class RowList {
+  readonly box: BoxRenderable
+  private readonly rowRenderables: TextRenderable[] = []
+  private rows: ListRow[] = []
+  private selectedIndex = 0
+  private scrollOffset = 0
+  private focused = true
+  private readonly scrollPadding: number
+  private readonly onViewportChange: (() => void) | undefined
+  private lastVisibleCount = 0
+
+  constructor(
+    private readonly ctx: RenderContext,
+    options: RowListOptions = {},
+  ) {
+    const { scrollPadding, onViewportChange, ...boxOptions } = options
+    this.scrollPadding = scrollPadding ?? 1
+    this.onViewportChange = onViewportChange
+    this.box = new BoxRenderable(ctx, {
+      flexDirection: "column",
+      flexGrow: 1,
+      overflow: "hidden",
+      backgroundColor: "transparent",
+      ...boxOptions,
+    })
+    this.box.onSizeChange = () => {
+      const visible = this.visibleCount
+      this.paint()
+      if (visible !== this.lastVisibleCount) {
+        this.lastVisibleCount = visible
+        this.onViewportChange?.()
+      }
+    }
+  }
+
+  get length(): number {
+    return this.rows.length
+  }
+
+  get visibleCount(): number {
+    return Math.max(1, this.box.height)
+  }
+
+  get offset(): number {
+    return this.scrollOffset
+  }
+
+  setFocused(focused: boolean): void {
+    if (this.focused === focused) return
+    this.focused = focused
+    this.paint()
+  }
+
+  setRows(rows: ListRow[], selectedIndex: number): void {
+    this.rows = rows
+    this.selectedIndex = clamp(selectedIndex, 0, Math.max(0, rows.length - 1))
+    this.ensureVisible()
+    this.paint()
+  }
+
+  setSelectedIndex(index: number): void {
+    const next = clamp(index, 0, Math.max(0, this.rows.length - 1))
+    if (next === this.selectedIndex) return
+    this.selectedIndex = next
+    this.ensureVisible()
+    this.paint()
+  }
+
+  scrollBy(delta: number): void {
+    const maxOffset = Math.max(0, this.rows.length - this.visibleCount)
+    this.scrollOffset = clamp(this.scrollOffset + delta, 0, maxOffset)
+    this.paint()
+  }
+
+  scrollToEnd(): void {
+    this.scrollOffset = Math.max(0, this.rows.length - this.visibleCount)
+    this.paint()
+  }
+
+  private ensureVisible(): void {
+    const visible = this.visibleCount
+    const padding = Math.min(this.scrollPadding, Math.floor((visible - 1) / 2))
+    const maxOffset = Math.max(0, this.rows.length - visible)
+
+    if (this.selectedIndex < this.scrollOffset + padding) {
+      this.scrollOffset = this.selectedIndex - padding
+    } else if (this.selectedIndex > this.scrollOffset + visible - 1 - padding) {
+      this.scrollOffset = this.selectedIndex - visible + 1 + padding
+    }
+    this.scrollOffset = clamp(this.scrollOffset, 0, maxOffset)
+  }
+
+  private paint(): void {
+    const visible = this.visibleCount
+    this.ensurePool(Math.min(visible, Math.max(this.rows.length, 1)))
+
+    for (const [index, renderable] of this.rowRenderables.entries()) {
+      const rowIndex = this.scrollOffset + index
+      const row = this.rows[rowIndex]
+      if (!row) {
+        renderable.visible = false
+        continue
+      }
+      renderable.visible = true
+      renderable.content = row.content
+      const selected = rowIndex === this.selectedIndex && !row.disabled
+      renderable.bg = selected ? (this.focused ? theme.selectionBackground : theme.panelAlt) : "transparent"
+    }
+  }
+
+  private ensurePool(size: number): void {
+    while (this.rowRenderables.length < size) {
+      const renderable = new TextRenderable(this.ctx, {
+        content: "",
+        fg: theme.text,
+        height: 1,
+        flexShrink: 0,
+        truncate: true,
+        selectable: false,
+      })
+      this.rowRenderables.push(renderable)
+      this.box.add(renderable)
+    }
+    while (this.rowRenderables.length > size) {
+      const renderable = this.rowRenderables.pop()
+      if (!renderable) break
+      this.box.remove(renderable)
+      renderable.destroy()
+    }
+  }
+
+  destroy(): void {
+    this.box.destroyRecursively()
+  }
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  if (max < min) return min
+  return Math.max(min, Math.min(max, value))
+}

package/src/devcc/components/styled.ts

@@ -0,0 +1,44 @@
+import { bold as boldChunk, dim as dimChunk, fg, StyledText, type TextChunk } from "@opentui/core"
+import { theme } from "../app/theme.js"
+
+/**
+ * Helpers for composing `StyledText` programmatically.
+ *
+ * The `t` template literal is convenient for fixed strings; these helpers cover
+ * the dynamic case (variable numbers of coloured segments) without fighting the
+ * template syntax.
+ */
+
+export function chunk(text: string, color: string = theme.text): TextChunk {
+  return fg(color)(text)
+}
+
+export function bold(text: string, color: string = theme.textBright): TextChunk {
+  return boldChunk(fg(color)(text))
+}
+
+export function dim(text: string): TextChunk {
+  return dimChunk(fg(theme.textDim)(text))
+}
+
+export function styled(...parts: (TextChunk | string)[]): StyledText {
+  return new StyledText(parts.map((part) => (typeof part === "string" ? chunk(part) : part)))
+}
+
+export function joinStyled(
+  parts: StyledText[],
+  separator: string,
+  separatorColor = theme.textDim,
+): StyledText {
+  const chunks: TextChunk[] = []
+  for (const [index, part] of parts.entries()) {
+    if (index > 0) chunks.push(chunk(separator, separatorColor))
+    chunks.push(...part.chunks)
+  }
+  return new StyledText(chunks)
+}
+
+/** Total display length of a styled line, for right-alignment maths. */
+export function styledLength(text: StyledText): number {
+  return text.chunks.reduce((total, part) => total + part.text.length, 0)
+}