@doriandev/devcc 0.1.2

package/src/devcc/views/ScriptsView.ts

@@ -0,0 +1,187 @@
+import type { KeyEvent } from "@opentui/core"
+import { theme } from "../app/theme.js"
+import type { KeyHint } from "../components/Footer.js"
+import { RowList, type ListRow } from "../components/primitives.js"
+import { chunk, dim, styled } from "../components/styled.js"
+import { setSelection, type AppState, type ScriptRun, type ViewId } from "../core/state.js"
+import { errorMessage } from "../utils/errors.js"
+import { fit, formatDuration, singleLine } from "../utils/format.js"
+import { fuzzyFilter } from "../utils/fuzzy.js"
+import { View, type ViewDeps } from "./View.js"
+
+/**
+ * package.json scripts, run through the detected package manager.
+ *
+ * devcc does not reimplement script running: it shells out to `pnpm run x` (or
+ * the npm/yarn/bun equivalent) as a managed process so the output lands in the
+ * log viewer like anything else.
+ */
+export class ScriptsView extends View {
+  readonly id: ViewId = "scripts"
+  readonly title = "Scripts"
+
+  private readonly list: RowList
+  private filter = ""
+  private visible: { name: string; command: string }[] = []
+
+  constructor(deps: ViewDeps) {
+    super(deps)
+    this.list = new RowList(deps.ctx, { flexGrow: 1 })
+    this.box.add(this.list.box)
+  }
+
+  update(state: AppState): void {
+    const width = Math.max(40, state.ui.width - (state.ui.sidebarVisible ? 26 : 4))
+    const nameWidth = Math.min(24, Math.max(12, Math.floor(width * 0.24)))
+
+    this.visible =
+      this.filter.trim() === ""
+        ? state.scripts.available
+        : fuzzyFilter(state.scripts.available, this.filter, (script) => script.name).map(
+            (match) => match.item,
+          )
+
+    const rows: ListRow[] = this.visible.map((script) => {
+      const run = state.scripts.runs[script.name]
+      return {
+        key: script.name,
+        content: styled(
+          runGlyph(run),
+          " ",
+          chunk(fit(script.name, nameWidth), theme.textBright),
+          dim(fit(singleLine(script.command), Math.max(10, width - nameWidth - 24))),
+          runDetail(run),
+        ),
+      }
+    })
+
+    if (rows.length === 0) {
+      rows.push({
+        key: "__empty",
+        disabled: true,
+        content: styled(
+          dim(this.filter ? `No scripts match "${this.filter}"` : "No scripts in package.json"),
+        ),
+      })
+    }
+
+    this.list.setRows(rows, state.ui.selection.scripts)
+  }
+
+  override handleKey(key: KeyEvent, state: AppState): boolean {
+    const count = this.visible.length
+    const selected = state.ui.selection.scripts
+
+    switch (key.name) {
+      case "up":
+      case "k":
+        if (count > 0) setSelection(this.deps.app.store, "scripts", Math.max(0, selected - 1))
+        return true
+      case "down":
+      case "j":
+        if (count > 0) setSelection(this.deps.app.store, "scripts", Math.min(count - 1, selected + 1))
+        return true
+      case "return":
+      case "s":
+        void this.run(selected)
+        return true
+      case "x":
+        void this.stop(selected)
+        return true
+      case "f":
+        void this.promptFilter()
+        return true
+      case "c":
+        this.setFilter("")
+        return true
+      case "l":
+        this.openLogs(selected)
+        return false
+      default:
+        return false
+    }
+  }
+
+  override hints(): KeyHint[] {
+    return [
+      { keys: "↑↓/jk", label: "select" },
+      { keys: "enter", label: "run" },
+      { keys: "x", label: "stop" },
+      { keys: "f", label: "filter" },
+      { keys: "c", label: "clear filter" },
+      { keys: "l", label: "logs" },
+    ]
+  }
+
+  private async promptFilter(): Promise<void> {
+    const value = await this.deps.app.prompt("Filter scripts", this.filter || "e.g. test")
+    if (value !== null) this.setFilter(value)
+  }
+
+  private setFilter(value: string): void {
+    this.filter = value
+    setSelection(this.deps.app.store, "scripts", 0)
+    this.update(this.deps.app.store.getState())
+  }
+
+  private async run(index: number): Promise<void> {
+    const script = this.visible[index]
+    if (!script) return
+    try {
+      await this.deps.app.runScript(script.name)
+    } catch (error) {
+      this.deps.app.notify("error", errorMessage(error))
+    }
+  }
+
+  private async stop(index: number): Promise<void> {
+    const script = this.visible[index]
+    if (!script) return
+    const processId = scriptProcessId(script.name)
+    if (!this.deps.app.processes.isRunning(processId)) {
+      this.deps.app.notify("warn", `${script.name} is not running`)
+      return
+    }
+    try {
+      await this.deps.app.processes.stop(processId)
+      this.deps.app.notify("info", `Stopped ${script.name}`)
+    } catch (error) {
+      this.deps.app.notify("error", errorMessage(error))
+    }
+  }
+
+  private openLogs(index: number): void {
+    const script = this.visible[index]
+    if (!script) return
+    this.deps.app.store.setState((state) => ({
+      ...state,
+      ui: { ...state.ui, logSource: scriptProcessId(script.name) },
+    }))
+  }
+}
+
+/** Log/process id used for a script run. */
+export function scriptProcessId(scriptName: string): string {
+  return `script:${scriptName}`
+}
+
+function runGlyph(run: ScriptRun | undefined) {
+  if (!run) return dim("·")
+  switch (run.status) {
+    case "running":
+      return chunk("◐", theme.warning)
+    case "succeeded":
+      return chunk("✓", theme.success)
+    case "failed":
+      return chunk("✖", theme.danger)
+  }
+}
+
+function runDetail(run: ScriptRun | undefined) {
+  if (!run) return dim("")
+  const elapsed = (run.finishedAt ?? new Date()).getTime() - run.startedAt.getTime()
+  if (run.status === "running") return chunk(fit(`running ${formatDuration(elapsed)}`, 20), theme.warning)
+  const code = run.exitCode ?? 0
+  const label = `exit ${code} · ${formatDuration(elapsed)}`
+  return chunk(fit(label, 20), run.status === "failed" ? theme.danger : theme.textDim)
+}

package/src/devcc/views/ServicesView.ts

@@ -0,0 +1,188 @@
+import type { KeyEvent } from "@opentui/core"
+import { theme } from "../app/theme.js"
+import type { KeyHint } from "../components/Footer.js"
+import { RowList, type ListRow } from "../components/primitives.js"
+import { serviceBadge, serviceGlyph } from "../components/StatusBadge.js"
+import { chunk, dim, styled } from "../components/styled.js"
+import { setSelection, type AppState, type ViewId } from "../core/state.js"
+import type { ServiceSnapshot } from "../services/types.js"
+import { errorMessage } from "../utils/errors.js"
+import { fit } from "../utils/format.js"
+import { View, type ViewDeps } from "./View.js"
+
+interface Entry {
+  kind: "service" | "item" | "heading"
+  service?: ServiceSnapshot
+}
+
+/**
+ * Detected services, grouped by category.
+ *
+ * Actions are only offered when the adapter implements them; a database devcc
+ * merely observes has no start/stop keys.
+ */
+export class ServicesView extends View {
+  readonly id: ViewId = "services"
+  readonly title = "Services"
+
+  private readonly list: RowList
+  private entries: Entry[] = []
+
+  constructor(deps: ViewDeps) {
+    super(deps)
+    this.list = new RowList(deps.ctx, { flexGrow: 1 })
+    this.box.add(this.list.box)
+  }
+
+  update(state: AppState): void {
+    const rows: ListRow[] = []
+    const entries: Entry[] = []
+    const width = Math.max(40, state.ui.width - (state.ui.sidebarVisible ? 26 : 4))
+
+    const byCategory = new Map<string, ServiceSnapshot[]>()
+    for (const service of state.services) {
+      const bucket = byCategory.get(service.category) ?? []
+      bucket.push(service)
+      byCategory.set(service.category, bucket)
+    }
+
+    if (state.services.length === 0) {
+      rows.push({
+        key: "__empty",
+        disabled: true,
+        content: styled(dim("No services detected yet. Detection runs in the background at startup.")),
+      })
+      entries.push({ kind: "heading" })
+    }
+
+    for (const [category, services] of [...byCategory.entries()].sort()) {
+      rows.push({
+        key: `heading-${category}`,
+        disabled: true,
+        content: styled(chunk(category.toUpperCase(), theme.accent)),
+      })
+      entries.push({ kind: "heading" })
+
+      for (const service of services) {
+        rows.push({
+          key: service.id,
+          content: styled(
+            ...serviceBadge(service.status.state).chunks,
+            chunk(fit(service.name, 20), theme.textBright),
+            dim(fit(service.status.detail ?? "", Math.max(10, width - 56))),
+            dim(service.status.endpoint ?? ""),
+          ),
+        })
+        entries.push({ kind: "service", service })
+
+        for (const item of service.status.items ?? []) {
+          rows.push({
+            key: `${service.id}-${item.name}`,
+            disabled: true,
+            content: styled(
+              "    ",
+              serviceGlyph(item.state).chunks[0] ?? chunk(" "),
+              " ",
+              dim(fit(item.name, 20)),
+              dim(item.detail ?? ""),
+            ),
+          })
+          entries.push({ kind: "item" })
+        }
+      }
+    }
+
+    this.entries = entries
+    this.list.setRows(rows, state.ui.selection.services)
+  }
+
+  override handleKey(key: KeyEvent, state: AppState): boolean {
+    const selected = state.ui.selection.services
+
+    switch (key.name) {
+      case "up":
+      case "k":
+        this.moveSelection(selected, -1)
+        return true
+      case "down":
+      case "j":
+        this.moveSelection(selected, 1)
+        return true
+      case "s":
+        void this.toggle(selected)
+        return true
+      case "r":
+        void this.action(selected, "restart")
+        return true
+      case "d":
+        void this.composeDown(selected)
+        return true
+      default:
+        return false
+    }
+  }
+
+  override hints(): KeyHint[] {
+    return [
+      { keys: "↑↓/jk", label: "select" },
+      { keys: "s", label: "start/stop" },
+      { keys: "r", label: "restart" },
+      { keys: "d", label: "compose down" },
+      { keys: "/", label: "commands" },
+    ]
+  }
+
+  /** Skip headings and sub-items when moving. */
+  private moveSelection(from: number, direction: 1 | -1): void {
+    let index = from
+    for (let steps = 0; steps < this.entries.length; steps += 1) {
+      index += direction
+      if (index < 0 || index >= this.entries.length) return
+      if (this.entries[index]?.kind === "service") {
+        setSelection(this.deps.app.store, "services", index)
+        return
+      }
+    }
+  }
+
+  private selectedService(index: number): ServiceSnapshot | undefined {
+    return this.entries[index]?.service
+  }
+
+  private async toggle(index: number): Promise<void> {
+    const service = this.selectedService(index)
+    if (!service) return
+    const running = service.status.state === "running" || service.status.state === "degraded"
+    await this.action(index, running ? "stop" : "start")
+  }
+
+  private async action(index: number, action: "start" | "stop" | "restart"): Promise<void> {
+    const service = this.selectedService(index)
+    if (!service) return
+
+    const supported =
+      action === "start" ? service.canStart : action === "stop" ? service.canStop : service.canRestart
+    if (!supported) {
+      this.deps.app.notify("warn", `${service.name} cannot be ${action}ed from devcc`)
+      return
+    }
+
+    try {
+      this.deps.app.notify("info", `${action}ing ${service.name}…`)
+      await this.deps.app.services.runAction(service.id, action, { confirm: this.deps.app.confirm })
+      this.deps.app.notify("success", `${service.name} ${action} complete`)
+    } catch (error) {
+      this.deps.app.notify("error", errorMessage(error))
+    }
+  }
+
+  /** `docker compose down` removes containers; always confirmed. */
+  private async composeDown(index: number): Promise<void> {
+    const service = this.selectedService(index)
+    if (!service || service.id !== "docker") {
+      this.deps.app.notify("warn", "Select the Docker Compose service first")
+      return
+    }
+    await this.deps.commands.run("docker.down", this.deps.app)
+  }
+}

package/src/devcc/views/SettingsView.ts

@@ -0,0 +1,146 @@
+import type { KeyEvent } from "@opentui/core"
+import { theme } from "../app/theme.js"
+import type { KeyHint } from "../components/Footer.js"
+import { RowList, type ListRow } from "../components/primitives.js"
+import { chunk, dim, styled } from "../components/styled.js"
+import type { AppState, Notification, ViewId } from "../core/state.js"
+import { fit, formatTimestamp, singleLine } from "../utils/format.js"
+import { tildify } from "../utils/paths.js"
+import { View, type ViewDeps } from "./View.js"
+
+/**
+ * Configuration, detection results and the diagnostics log.
+ *
+ * This is where errors go to be inspected: the footer only shows the newest
+ * message, the full history (with detail) lives here.
+ */
+export class SettingsView extends View {
+  readonly id: ViewId = "settings"
+  readonly title = "Settings"
+
+  private readonly list: RowList
+
+  constructor(deps: ViewDeps) {
+    super(deps)
+    this.list = new RowList(deps.ctx, { flexGrow: 1, scrollPadding: 0 })
+    this.box.add(this.list.box)
+  }
+
+  update(state: AppState): void {
+    const rows: ListRow[] = []
+
+    rows.push(heading("Project"))
+    rows.push(row("name", state.project.name))
+    rows.push(row("root", tildify(state.project.rootDir)))
+    rows.push(
+      row(
+        "package manager",
+        `${state.project.packageManager.manager} (${state.project.packageManager.source}${
+          state.project.packageManager.evidence ? `: ${state.project.packageManager.evidence}` : ""
+        })`,
+      ),
+    )
+    rows.push(
+      row("config", state.project.configPath ? tildify(state.project.configPath) : "none (using defaults)"),
+    )
+    rows.push(row("log file", tildify(logPath(state))))
+
+    if (state.project.configIssues.length > 0) {
+      rows.push(blank())
+      rows.push(heading("Config issues"))
+      for (const issue of state.project.configIssues) {
+        rows.push({
+          key: `issue-${issue}`,
+          disabled: true,
+          content: styled(chunk(`⚠ ${issue}`, theme.warning)),
+        })
+      }
+    }
+
+    rows.push(blank())
+    rows.push(heading("Counts"))
+    rows.push(row("managed processes", String(state.processes.length)))
+    rows.push(row("detected services", String(state.services.length)))
+    rows.push(row("package scripts", String(state.scripts.available.length)))
+    rows.push(row("log sources", String(state.logSources.length)))
+
+    rows.push(blank())
+    rows.push(heading(`Diagnostics (${state.notifications.length})`))
+    if (state.notifications.length === 0) {
+      rows.push({ key: "no-diag", disabled: true, content: styled(dim("  nothing to report")) })
+    }
+    for (const notification of state.notifications.slice(0, 40)) {
+      rows.push({
+        key: `notification-${notification.id}`,
+        content: styled(
+          dim(fit(formatTimestamp(notification.createdAt), 13)),
+          chunk(fit(notification.level, 8), levelColor(notification.level)),
+          chunk(singleLine(notification.message, 90), theme.text),
+        ),
+      })
+    }
+
+    this.list.setRows(rows, state.ui.selection.settings)
+  }
+
+  override handleKey(key: KeyEvent, _state: AppState): boolean {
+    switch (key.name) {
+      case "up":
+      case "k":
+        this.list.scrollBy(-1)
+        return true
+      case "down":
+      case "j":
+        this.list.scrollBy(1)
+        return true
+      case "c":
+        this.deps.app.store.setState((state) => ({ ...state, notifications: [] }))
+        return true
+      default:
+        return false
+    }
+  }
+
+  override hints(): KeyHint[] {
+    return [
+      { keys: "j/k", label: "scroll" },
+      { keys: "c", label: "clear diagnostics" },
+      { keys: "/", label: "commands" },
+    ]
+  }
+}
+
+const LABEL_WIDTH = 20
+
+function logPath(state: AppState): string {
+  return `${state.project.rootDir}/.devcc/devcc.log`
+}
+
+function heading(title: string): ListRow {
+  return { key: `h-${title}`, disabled: true, content: styled(chunk(title.toUpperCase(), theme.accent)) }
+}
+
+function blank(): ListRow {
+  return { key: `b-${Math.random().toString(36).slice(2)}`, disabled: true, content: "" }
+}
+
+function row(label: string, value: string): ListRow {
+  return {
+    key: `r-${label}`,
+    disabled: true,
+    content: styled(dim(fit(label, LABEL_WIDTH)), chunk(value, theme.text)),
+  }
+}
+
+function levelColor(level: Notification["level"]): string {
+  switch (level) {
+    case "error":
+      return theme.danger
+    case "warn":
+      return theme.warning
+    case "success":
+      return theme.success
+    case "info":
+      return theme.info
+  }
+}

package/src/devcc/views/SystemView.ts

@@ -0,0 +1,110 @@
+import { theme } from "../app/theme.js"
+import type { KeyHint } from "../components/Footer.js"
+import { RowList, type ListRow } from "../components/primitives.js"
+import { chunk, dim, styled } from "../components/styled.js"
+import type { AppState, ViewId } from "../core/state.js"
+import { fit, formatBytes, formatDuration, meter, toGigabytes } from "../utils/format.js"
+import { View, type ViewDeps } from "./View.js"
+
+/** Host information and live resource usage. Read-only. */
+export class SystemView extends View {
+  readonly id: ViewId = "system"
+  readonly title = "System"
+
+  private readonly list: RowList
+
+  constructor(deps: ViewDeps) {
+    super(deps)
+    this.list = new RowList(deps.ctx, { flexGrow: 1, scrollPadding: 0 })
+    this.box.add(this.list.box)
+  }
+
+  update(state: AppState): void {
+    const host = state.project.host
+    const tools = state.project.tools
+    const metrics = state.system
+    const rows: ListRow[] = []
+
+    rows.push(heading("Host"))
+    rows.push(row("hostname", host.hostname))
+    rows.push(row("os", `${host.platform} ${host.release}`))
+    rows.push(row("arch", host.arch))
+    rows.push(row("cpu", `${host.cpuModel} (${host.cpuCount} cores)`))
+    rows.push(row("memory", `${toGigabytes(host.totalMemory)} GB total`))
+
+    rows.push(blank())
+    rows.push(heading("Toolchain"))
+    rows.push(row("runtime", host.runtime))
+    rows.push(row("node", host.nodeVersion))
+    rows.push(
+      row("package manager", `${state.project.packageManager.manager} ${tools.packageManager ?? ""}`.trim()),
+    )
+    rows.push(row("git", tools.git ?? "not found"))
+    rows.push(row("docker", tools.docker ?? "not found"))
+
+    rows.push(blank())
+    rows.push(heading("Usage"))
+    if (!metrics) {
+      rows.push(row("", "sampling…"))
+    } else {
+      rows.push(gauge("cpu", metrics.cpu, `${(metrics.cpu * 100).toFixed(1)}%`))
+      rows.push(
+        gauge(
+          "memory",
+          metrics.memoryRatio,
+          `${toGigabytes(metrics.memoryUsed)} / ${toGigabytes(metrics.memoryTotal)} GB`,
+        ),
+      )
+      if (metrics.disk) {
+        rows.push(
+          gauge(
+            "disk",
+            metrics.disk.ratio,
+            `${formatBytes(metrics.disk.used)} / ${formatBytes(metrics.disk.total)}`,
+          ),
+        )
+      }
+      rows.push(row("load average", metrics.loadAverage.map((value) => value.toFixed(2)).join("  ")))
+      rows.push(row("host uptime", formatDuration(metrics.uptimeMs)))
+      rows.push(row("devcc uptime", formatDuration(metrics.processUptimeMs)))
+      rows.push(row("sampled", metrics.sampledAt.toLocaleTimeString()))
+    }
+
+    this.list.setRows(rows, -1)
+  }
+
+  override hints(): KeyHint[] {
+    return [
+      { keys: "↑↓", label: "scroll" },
+      { keys: "/", label: "commands" },
+      { keys: "?", label: "help" },
+    ]
+  }
+}
+
+const LABEL_WIDTH = 18
+
+function heading(title: string): ListRow {
+  return { key: `h-${title}`, disabled: true, content: styled(chunk(title.toUpperCase(), theme.accent)) }
+}
+
+function blank(): ListRow {
+  return { key: `b-${Math.random().toString(36).slice(2)}`, disabled: true, content: "" }
+}
+
+function row(label: string, value: string): ListRow {
+  return {
+    key: `r-${label}`,
+    disabled: true,
+    content: styled(dim(fit(label, LABEL_WIDTH)), chunk(value, theme.text)),
+  }
+}
+
+function gauge(label: string, ratio: number, value: string): ListRow {
+  const color = ratio > 0.85 ? theme.danger : ratio > 0.6 ? theme.warning : theme.success
+  return {
+    key: `g-${label}`,
+    disabled: true,
+    content: styled(dim(fit(label, LABEL_WIDTH)), chunk(meter(ratio, 16), color), dim(`  ${value}`)),
+  }
+}

package/src/devcc/views/View.ts

@@ -0,0 +1,63 @@
+import { BoxRenderable, type KeyEvent, type RenderContext } from "@opentui/core"
+import { theme } from "../app/theme.js"
+import type { KeyHint } from "../components/Footer.js"
+import type { CommandContext, CommandRegistry } from "../core/commands.js"
+import type { AppState, ViewId } from "../core/state.js"
+
+export interface ViewDeps {
+  ctx: RenderContext
+  /** The same context commands receive; views and commands share one surface. */
+  app: CommandContext
+  commands: CommandRegistry
+}
+
+/**
+ * Base class for the content panes.
+ *
+ * Views own a subtree and are told when state changes; they never poll. Key
+ * handling is view-first: a view may claim a key (returning `true`) before the
+ * global keymap sees it.
+ */
+export abstract class View {
+  abstract readonly id: ViewId
+  abstract readonly title: string
+
+  readonly box: BoxRenderable
+
+  constructor(protected readonly deps: ViewDeps) {
+    this.box = new BoxRenderable(deps.ctx, {
+      flexGrow: 1,
+      flexDirection: "column",
+      paddingLeft: 1,
+      paddingRight: 1,
+      paddingTop: 1,
+      backgroundColor: "transparent",
+      visible: false,
+    })
+  }
+
+  /** Called whenever application state changes while this view is active. */
+  abstract update(state: AppState): void
+
+  /** Return true when the key was handled and must not fall through. */
+  handleKey(_key: KeyEvent, _state: AppState): boolean {
+    return false
+  }
+
+  /** Footer hints for this view. */
+  hints(): KeyHint[] {
+    return []
+  }
+
+  onActivate(_state: AppState): void {}
+
+  onDeactivate(): void {}
+
+  dispose(): void {
+    this.box.destroyRecursively()
+  }
+
+  protected get accentColor(): string {
+    return theme.accent
+  }
+}