@doriandev/devcc 0.1.2

package/src/devcc/views/LogsView.ts

@@ -0,0 +1,300 @@
+import type { KeyEvent } from "@opentui/core"
+import { BoxRenderable, TextRenderable } 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 { updateUi, type AppState, type ViewId } from "../core/state.js"
+import type { LogBuffer } from "../logs/LogBuffer.js"
+import {
+  ALL_SOURCES,
+  describeFilter,
+  EMPTY_LOG_FILTER,
+  filterEntries,
+  isFilterActive,
+  mergeTails,
+  type LogFilter,
+  type SourcedLogEntry,
+} from "../logs/merge.js"
+import { fit, formatTimestamp } from "../utils/format.js"
+import { View, type ViewDeps } from "./View.js"
+
+const PAGE_SIZE = 15
+
+/** Stable per-source colours for the merged stream. */
+const SOURCE_COLOURS = [
+  "#6aa9ff",
+  "#4cc38a",
+  "#d9a441",
+  "#c77dff",
+  "#3fc1c9",
+  "#f28c6a",
+  "#9ad36b",
+  "#f2a2c9",
+]
+
+/**
+ * Log viewer: per-source buffers or one merged stream, with follow mode,
+ * manual scrolling and a search filter.
+ *
+ * The viewer never keeps its own copy of the history. Per-source views window
+ * straight into that source's ring buffer; the merged view materialises at most
+ * `MERGED_LIMIT` recent lines on demand, so memory stays bounded either way.
+ */
+export class LogsView extends View {
+  readonly id: ViewId = "logs"
+  readonly title = "Logs"
+
+  private readonly header: TextRenderable
+  private readonly filterLine: TextRenderable
+  private readonly list: RowList
+  private scrollOffset = 0
+  private follow = true
+  private sourceIds: string[] = []
+  private currentSource: string | null = null
+  private entryCount = 0
+  private filter: LogFilter = { ...EMPTY_LOG_FILTER }
+  private colourIndex = new Map<string, number>()
+
+  constructor(deps: ViewDeps) {
+    super(deps)
+
+    const headerBox = new BoxRenderable(deps.ctx, {
+      height: 3,
+      flexShrink: 0,
+      flexDirection: "column",
+      border: ["bottom"],
+      borderColor: theme.border,
+      backgroundColor: "transparent",
+    })
+    this.header = new TextRenderable(deps.ctx, { content: "", height: 1, selectable: false, truncate: true })
+    this.filterLine = new TextRenderable(deps.ctx, {
+      content: "",
+      height: 1,
+      selectable: false,
+      truncate: true,
+    })
+    headerBox.add(this.header)
+    headerBox.add(this.filterLine)
+
+    // The viewer slices the history itself, so it must recompute that slice
+    // whenever the viewport height changes.
+    this.list = new RowList(deps.ctx, {
+      flexGrow: 1,
+      marginTop: 1,
+      scrollPadding: 0,
+      onViewportChange: () => this.update(deps.app.store.getState()),
+    })
+
+    this.box.add(headerBox)
+    this.box.add(this.list.box)
+  }
+
+  update(state: AppState): void {
+    // The merged stream is offered first, so tab from it lands on the first real source.
+    this.sourceIds = [ALL_SOURCES, ...state.logSources.map((source) => source.id)]
+    this.follow = state.ui.logFollow
+
+    const sourceId = state.ui.logSource ?? this.sourceIds[1] ?? ALL_SOURCES
+    if (sourceId !== this.currentSource) {
+      this.currentSource = sourceId
+      this.scrollOffset = 0
+    }
+
+    const merged = sourceId === ALL_SOURCES
+    const entries = this.collect(sourceId, state)
+    this.entryCount = entries.length
+
+    const visible = Math.max(1, this.list.visibleCount)
+    const maxOffset = Math.max(0, entries.length - visible)
+    if (this.follow) this.scrollOffset = maxOffset
+    this.scrollOffset = Math.min(this.scrollOffset, maxOffset)
+
+    const window = entries.slice(this.scrollOffset, this.scrollOffset + visible)
+    const width = state.ui.width - (state.ui.sidebarVisible ? 26 : 4)
+    const rows: ListRow[] = window.map((item) => ({
+      key: `${item.sourceId}:${item.entry.seq}`,
+      disabled: true,
+      content: this.renderEntry(item, width, merged),
+    }))
+
+    if (rows.length === 0) {
+      rows.push({
+        key: "__empty",
+        disabled: true,
+        content: styled(
+          dim(
+            isFilterActive(this.filter)
+              ? "Nothing matches the current filter"
+              : state.logSources.length === 0
+                ? "No log sources - start a process or run a script"
+                : "No output yet",
+          ),
+        ),
+      })
+    }
+
+    this.list.setRows(rows, -1)
+
+    const label = merged
+      ? `all sources (${state.logSources.length})`
+      : (state.logSources.find((source) => source.id === sourceId)?.label ?? sourceId)
+    const position =
+      entries.length === 0
+        ? "0/0"
+        : `${Math.min(this.scrollOffset + visible, entries.length)}/${entries.length}`
+    const buffer = merged ? undefined : this.deps.app.logs.get(sourceId)
+
+    this.header.content = styled(
+      dim(fit("source", 8)),
+      chunk(fit(label, 26), theme.textBright),
+      this.follow ? chunk("● follow", theme.success) : dim("‖ paused"),
+      dim(`   ${position}`),
+      buffer?.truncated ? dim("   (older lines dropped)") : dim(""),
+    )
+    this.filterLine.content = isFilterActive(this.filter)
+      ? styled(dim(fit("filter", 8)), chunk(describeFilter(this.filter), theme.warning), dim("   x clears"))
+      : styled(dim(fit("filter", 8)), dim("none   s search   e errors only   a all sources"))
+  }
+
+  override handleKey(key: KeyEvent, state: AppState): boolean {
+    switch (key.name) {
+      case "f":
+        updateUi(this.deps.app.store, { logFollow: !state.ui.logFollow })
+        return true
+      case "c":
+        if (this.currentSource === ALL_SOURCES) {
+          void this.deps.commands.run("logs.clearAll", this.deps.app)
+        } else if (this.currentSource) {
+          this.deps.app.logs.clear(this.currentSource)
+          this.deps.app.notify("info", "Cleared logs")
+        }
+        return true
+      case "s":
+        void this.promptFilter()
+        return true
+      case "x":
+        this.setFilter({ ...this.filter, query: "" })
+        return true
+      case "e":
+        this.setFilter({ ...this.filter, errorsOnly: !this.filter.errorsOnly })
+        return true
+      case "a":
+        updateUi(this.deps.app.store, { logSource: ALL_SOURCES })
+        return true
+      case "tab":
+      case "right":
+      case "l":
+        this.cycleSource(1)
+        return true
+      case "left":
+      case "h":
+        this.cycleSource(-1)
+        return true
+      case "j":
+      case "down":
+        this.scroll(1)
+        return true
+      case "k":
+      case "up":
+        this.scroll(-1)
+        return true
+      case "pagedown":
+        this.scroll(PAGE_SIZE)
+        return true
+      case "pageup":
+        this.scroll(-PAGE_SIZE)
+        return true
+      case "end":
+        this.scrollOffset = Number.MAX_SAFE_INTEGER
+        updateUi(this.deps.app.store, { logFollow: true })
+        return true
+      case "home":
+        this.scrollOffset = 0
+        updateUi(this.deps.app.store, { logFollow: false })
+        return true
+      default:
+        return false
+    }
+  }
+
+  override hints(): KeyHint[] {
+    return [
+      { keys: "j/k", label: "scroll" },
+      { keys: "s", label: "search" },
+      { keys: "e", label: "errors" },
+      { keys: "a", label: "all sources" },
+      { keys: "tab", label: "next source" },
+      { keys: "f", label: "follow" },
+      { keys: "c", label: "clear" },
+    ]
+  }
+
+  /** Entries for the selected source, filtered. */
+  private collect(sourceId: string, state: AppState): SourcedLogEntry[] {
+    let entries: SourcedLogEntry[]
+    if (sourceId === ALL_SOURCES) {
+      const buffers = state.logSources
+        .map((source) => this.deps.app.logs.get(source.id))
+        .filter((buffer): buffer is LogBuffer => buffer !== undefined)
+      entries = mergeTails(buffers)
+    } else {
+      const buffer = this.deps.app.logs.get(sourceId)
+      entries = (buffer?.toArray() ?? []).map((entry) => ({ sourceId, entry }))
+    }
+    return filterEntries(entries, this.filter)
+  }
+
+  private renderEntry(item: SourcedLogEntry, width: number, merged: boolean) {
+    const { entry, sourceId } = item
+    const colour =
+      entry.stream === "stderr" ? theme.danger : entry.stream === "system" ? theme.accent : theme.text
+    const sourceWidth = merged ? 12 : 0
+    const available = Math.max(10, width - 14 - sourceWidth)
+    return styled(
+      dim(fit(formatTimestamp(entry.timestamp), 13)),
+      merged ? chunk(fit(sourceId, sourceWidth), this.colourFor(sourceId)) : "",
+      chunk(fit(entry.text, available), colour),
+    )
+  }
+
+  private colourFor(sourceId: string): string {
+    let index = this.colourIndex.get(sourceId)
+    if (index === undefined) {
+      index = this.colourIndex.size % SOURCE_COLOURS.length
+      this.colourIndex.set(sourceId, index)
+    }
+    return SOURCE_COLOURS[index] ?? theme.text
+  }
+
+  private async promptFilter(): Promise<void> {
+    const value = await this.deps.app.prompt(
+      "Filter logs (regex or text)",
+      this.filter.query || "e.g. error|warn",
+    )
+    if (value !== null) this.setFilter({ ...this.filter, query: value })
+  }
+
+  private setFilter(filter: LogFilter): void {
+    this.filter = filter
+    this.scrollOffset = 0
+    updateUi(this.deps.app.store, { logFollow: true })
+    this.update(this.deps.app.store.getState())
+  }
+
+  private scroll(delta: number): void {
+    const visible = Math.max(1, this.list.visibleCount)
+    const maxOffset = Math.max(0, this.entryCount - visible)
+    this.scrollOffset = Math.max(0, Math.min(maxOffset, this.scrollOffset + delta))
+    // Scrolling up pauses follow; scrolling to the bottom resumes it.
+    updateUi(this.deps.app.store, { logFollow: this.scrollOffset >= maxOffset })
+    this.update(this.deps.app.store.getState())
+  }
+
+  private cycleSource(direction: 1 | -1): void {
+    if (this.sourceIds.length === 0) return
+    const current = this.currentSource ? this.sourceIds.indexOf(this.currentSource) : -1
+    const next = (current + direction + this.sourceIds.length) % this.sourceIds.length
+    updateUi(this.deps.app.store, { logSource: this.sourceIds[next] ?? null })
+  }
+}

package/src/devcc/views/OverviewView.ts

@@ -0,0 +1,187 @@
+import { theme } from "../app/theme.js"
+import type { KeyHint } from "../components/Footer.js"
+import { RowList, type ListRow } from "../components/primitives.js"
+import { processGlyph, serviceGlyph } from "../components/StatusBadge.js"
+import { chunk, dim, styled } from "../components/styled.js"
+import { summariseStatus, summariseTracking } from "../git/parse.js"
+import { isActive } from "../processes/ManagedProcess.js"
+import type { AppState, ViewId } from "../core/state.js"
+import { fit, formatDuration, meter, toGigabytes } from "../utils/format.js"
+import { View, type ViewDeps } from "./View.js"
+
+/**
+ * The landing pane: one screenful answering "is everything up, and is my tree
+ * clean?". Every row here is a summary of a dedicated view.
+ */
+export class OverviewView extends View {
+  readonly id: ViewId = "overview"
+  readonly title = "Overview"
+
+  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[] = []
+    const compact = state.ui.height < 26
+    const labelWidth = 14
+
+    // --- Git -------------------------------------------------------------
+    rows.push(section("Git"))
+    if (state.git.lastRefreshedAt === null) {
+      rows.push(info("git", "checking…"))
+    } else if (!state.git.available) {
+      rows.push(info("git", "not installed"))
+    } else if (!state.git.isRepository) {
+      rows.push(info("repository", "not a git repository"))
+    } else {
+      const branch = state.git.status.branch ?? `detached @ ${state.git.status.head ?? "?"}`
+      rows.push(info("branch", branch, labelWidth))
+      rows.push(
+        infoStyled(
+          "status",
+          styled(
+            chunk(summariseStatus(state.git.status), state.git.status.clean ? theme.success : theme.warning),
+          ),
+          labelWidth,
+        ),
+      )
+      rows.push(info("tracking", summariseTracking(state.git.status), labelWidth))
+    }
+
+    // --- Development processes -------------------------------------------
+    rows.push(blank())
+    rows.push(section("Development"))
+    if (state.processes.length === 0) {
+      rows.push(info("", "no managed processes - add some in .devcc.ts"))
+    } else {
+      for (const process of state.processes.slice(0, compact ? 4 : 8)) {
+        const detail = process.url ?? (process.pid ? `pid ${process.pid}` : "")
+        const uptime =
+          process.startedAt && isActive(process.status)
+            ? formatDuration(Date.now() - process.startedAt.getTime())
+            : ""
+        rows.push({
+          key: `process-${process.id}`,
+          disabled: true,
+          content: styled(
+            "  ",
+            processGlyph(process.status).chunks[0] ?? chunk(" "),
+            " ",
+            chunk(fit(process.name, 16), theme.text),
+            dim(fit(process.status, 10)),
+            dim(fit(detail, 22)),
+            dim(uptime),
+          ),
+        })
+      }
+    }
+
+    // --- Services ---------------------------------------------------------
+    const services = state.services.filter((service) => service.status.state !== "unknown")
+    if (services.length > 0) {
+      rows.push(blank())
+      rows.push(section("Services"))
+      for (const service of services.slice(0, compact ? 3 : 6)) {
+        rows.push({
+          key: `service-${service.id}`,
+          disabled: true,
+          content: styled(
+            "  ",
+            serviceGlyph(service.status.state).chunks[0] ?? chunk(" "),
+            " ",
+            chunk(fit(service.name, 16), theme.text),
+            dim(fit(service.status.detail ?? service.status.state, 26)),
+            dim(service.status.endpoint ?? ""),
+          ),
+        })
+      }
+    }
+
+    // --- System -----------------------------------------------------------
+    rows.push(blank())
+    rows.push(section("System"))
+    const metrics = state.system
+    if (!metrics) {
+      rows.push(info("", "sampling…"))
+    } else {
+      rows.push(
+        infoStyled(
+          "cpu",
+          styled(
+            chunk(meter(metrics.cpu, 12), usageColor(metrics.cpu)),
+            dim(`  ${(metrics.cpu * 100).toFixed(0)}%`),
+            dim(`   load ${metrics.loadAverage[0].toFixed(2)}`),
+          ),
+          labelWidth,
+        ),
+      )
+      rows.push(
+        infoStyled(
+          "memory",
+          styled(
+            chunk(meter(metrics.memoryRatio, 12), usageColor(metrics.memoryRatio)),
+            dim(`  ${toGigabytes(metrics.memoryUsed)} / ${toGigabytes(metrics.memoryTotal)} GB`),
+          ),
+          labelWidth,
+        ),
+      )
+      if (!compact) {
+        rows.push(info("uptime", formatDuration(metrics.uptimeMs), labelWidth))
+        rows.push(info("node", `${state.project.host.runtime}`, labelWidth))
+      }
+    }
+
+    this.list.setRows(rows, -1)
+  }
+
+  override hints(): KeyHint[] {
+    return [
+      { keys: "↑↓", label: "navigate" },
+      { keys: "p", label: "processes" },
+      { keys: "g", label: "git" },
+      { keys: "l", label: "logs" },
+      { keys: "/", label: "commands" },
+      { keys: "?", label: "help" },
+      { keys: "q", label: "quit" },
+    ]
+  }
+}
+
+function section(title: string): ListRow {
+  return {
+    key: `section-${title}`,
+    disabled: true,
+    content: styled(chunk(title.toUpperCase(), theme.accent)),
+  }
+}
+
+function blank(): ListRow {
+  return { key: `blank-${Math.random()}`, disabled: true, content: "" }
+}
+
+function info(label: string, value: string, labelWidth = 14): ListRow {
+  return {
+    key: `info-${label}-${value}`,
+    disabled: true,
+    content: styled("  ", dim(fit(label, labelWidth)), chunk(value, theme.text)),
+  }
+}
+
+function infoStyled(label: string, value: ReturnType<typeof styled>, labelWidth = 14): ListRow {
+  return {
+    key: `info-${label}`,
+    disabled: true,
+    content: styled("  ", dim(fit(label, labelWidth)), ...value.chunks),
+  }
+}
+
+function usageColor(ratio: number): string {
+  if (ratio > 0.85) return theme.danger
+  if (ratio > 0.6) return theme.warning
+  return theme.success
+}

package/src/devcc/views/ProcessesView.ts

@@ -0,0 +1,177 @@
+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 { processBadge } from "../components/StatusBadge.js"
+import { chunk, dim, styled } from "../components/styled.js"
+import { setSelection, type AppState, type ViewId } from "../core/state.js"
+import { describeCommand, isActive, type ManagedProcess } from "../processes/ManagedProcess.js"
+import { errorMessage } from "../utils/errors.js"
+import { fit, formatDuration } from "../utils/format.js"
+import { View, type ViewDeps } from "./View.js"
+
+/**
+ * Processes devcc owns.
+ *
+ * Only entries with `ownership: "managed"` accept start/stop/restart; anything
+ * merely detected on the host is displayed read-only.
+ */
+export class ProcessesView extends View {
+  readonly id: ViewId = "processes"
+  readonly title = "Processes"
+
+  private readonly list: RowList
+  private processes: ManagedProcess[] = []
+
+  constructor(deps: ViewDeps) {
+    super(deps)
+    this.list = new RowList(deps.ctx, { flexGrow: 1 })
+    this.box.add(this.list.box)
+  }
+
+  update(state: AppState): void {
+    this.processes = state.processes
+    const selected = state.ui.selection.processes
+    const width = Math.max(40, state.ui.width - (state.ui.sidebarVisible ? 26 : 4))
+    const nameWidth = Math.min(22, Math.max(12, Math.floor(width * 0.22)))
+
+    const rows: ListRow[] = this.processes.map((process) => {
+      const uptime =
+        process.startedAt && isActive(process.status)
+          ? formatDuration(Date.now() - process.startedAt.getTime())
+          : ""
+      const detail = process.lastError
+        ? chunk(fit(process.lastError, Math.max(10, width - nameWidth - 26)), theme.danger)
+        : dim(fit(process.url ?? describeCommand(process), Math.max(10, width - nameWidth - 26)))
+
+      return {
+        key: process.id,
+        content: styled(
+          ...processBadge(process.status).chunks,
+          " ",
+          chunk(fit(process.name, nameWidth), theme.textBright),
+          detail,
+          dim(fit(process.pid ? `pid ${process.pid}` : "", 10)),
+          dim(uptime),
+        ),
+      }
+    })
+
+    if (rows.length === 0) {
+      rows.push({
+        key: "__empty",
+        disabled: true,
+        content: styled(dim("No managed processes. Declare them in .devcc.ts to control them here.")),
+      })
+    }
+
+    this.list.setRows(rows, selected)
+  }
+
+  override handleKey(key: KeyEvent, state: AppState): boolean {
+    const count = this.processes.length
+    const selected = state.ui.selection.processes
+
+    switch (key.name) {
+      case "up":
+      case "k":
+        if (count > 0) setSelection(this.deps.app.store, "processes", Math.max(0, selected - 1))
+        return true
+      case "down":
+      case "j":
+        if (count > 0) setSelection(this.deps.app.store, "processes", Math.min(count - 1, selected + 1))
+        return true
+      case "s":
+        void this.toggle(selected)
+        return true
+      case "r":
+        void this.restart(selected)
+        return true
+      case "return":
+        this.openLogs(selected)
+        return true
+      case "i":
+        this.inspect(selected)
+        return true
+      default:
+        return false
+    }
+  }
+
+  override hints(): KeyHint[] {
+    return [
+      { keys: "↑↓/jk", label: "select" },
+      { keys: "s", label: "start/stop" },
+      { keys: "r", label: "restart" },
+      { keys: "enter", label: "logs" },
+      { keys: "i", label: "inspect" },
+      { keys: "/", label: "commands" },
+    ]
+  }
+
+  private current(index: number): ManagedProcess | undefined {
+    return this.processes[index]
+  }
+
+  private async toggle(index: number): Promise<void> {
+    const process = this.current(index)
+    if (!process) return
+    if (process.ownership !== "managed") {
+      this.deps.app.notify("warn", `${process.name} was detected, not launched by devcc`)
+      return
+    }
+    try {
+      if (isActive(process.status)) {
+        await this.deps.app.processes.stop(process.id)
+        this.deps.app.notify("info", `Stopped ${process.name}`)
+      } else {
+        await this.deps.app.processes.start(process.id)
+        this.deps.app.notify("success", `Started ${process.name}`)
+      }
+    } catch (error) {
+      this.deps.app.notify("error", errorMessage(error))
+    }
+  }
+
+  private async restart(index: number): Promise<void> {
+    const process = this.current(index)
+    if (!process) return
+    if (process.ownership !== "managed") {
+      this.deps.app.notify("warn", `${process.name} was detected, not launched by devcc`)
+      return
+    }
+    try {
+      await this.deps.app.processes.restart(process.id)
+      this.deps.app.notify("success", `Restarted ${process.name}`)
+    } catch (error) {
+      this.deps.app.notify("error", errorMessage(error))
+    }
+  }
+
+  private openLogs(index: number): void {
+    const process = this.current(index)
+    if (!process) return
+    this.deps.app.store.setState((state) => ({
+      ...state,
+      ui: { ...state.ui, logSource: process.id },
+    }))
+    this.deps.app.navigate("logs")
+  }
+
+  private inspect(index: number): void {
+    const process = this.current(index)
+    if (!process) return
+    const lines = [
+      `id        ${process.id}`,
+      `command   ${describeCommand(process)}`,
+      `cwd       ${process.cwd ?? "(project root)"}`,
+      `status    ${process.status}`,
+      `pid       ${process.pid ?? "-"}`,
+      `started   ${process.startedAt?.toLocaleTimeString() ?? "-"}`,
+      `exit      ${process.exitCode ?? "-"}${process.exitSignal ? ` (${process.exitSignal})` : ""}`,
+      `restarts  ${process.restarts}`,
+      `ownership ${process.ownership}`,
+    ]
+    this.deps.app.notify("info", `${process.name}`, lines.join("\n"))
+  }
+}