@supatype/cli 0.1.0-alpha.10

package/src/dev-log-filter.ts

@@ -0,0 +1,32 @@
+/**
+ * Line filters for subprocess output during `supatype dev`.
+ */
+
+/** Strip ANSI SGR sequences for TUI rendering. */
+export function stripAnsi(text: string): string {
+  return text.replace(/\x1b\[[0-9;]*m/g, "")
+}
+
+/** Drop npm/vite noise from frontend dev servers (proxy app + Studio). */
+export function filterDevSubprocessLine(taskId: string, line: string): boolean {
+  if (taskId !== "app" && taskId !== "studio") return true
+  const trimmed = stripAnsi(line).trim()
+  if (!trimmed) return false
+  if (/^>\s+\S/.test(trimmed)) return false
+  if (trimmed.includes("Network:") && trimmed.includes("➜")) return false
+  return true
+}
+
+/** Format console.* arguments the way Node does for a single log line. */
+export function formatConsoleArgs(args: unknown[]): string {
+  return args
+    .map((arg) => {
+      if (typeof arg === "string") return arg
+      try {
+        return JSON.stringify(arg)
+      } catch {
+        return String(arg)
+      }
+    })
+    .join(" ")
+}

package/src/dev-logo.ts

@@ -0,0 +1,62 @@
+/**
+ * Supatype ASCII wordmark for the dev TUI header.
+ * Baked from `figlet -f slant supatype` → assets/supatype-logo-wordmark.ascii.txt
+ */
+
+import { existsSync, readFileSync } from "node:fs"
+import { dirname, join } from "node:path"
+import { fileURLToPath } from "node:url"
+import { BOLD, RESET, taskColor } from "./dev-task-colors.js"
+
+const EMBEDDED_LOGO_WORDMARK = [
+  "                           __                 ",
+  "   _______  ______  ____ _/ /___  ______  ___ ",
+  "  / ___/ / / / __ \\/ __ `/ __/ / / / __ \\/ _ \\",
+  " (__  ) /_/ / /_/ / /_/ / /_/ /_/ / /_/ /  __/",
+  "/____/\\__,_/ .___/\\__,_/\\__/\\__, / .___/\\___/ ",
+  "          /_/              /____/_/           ",
+] as const
+
+function readLogoFile(basename: string): readonly string[] | null {
+  const here = dirname(fileURLToPath(import.meta.url))
+  const candidates = [
+    join(here, "assets", basename),
+    join(here, "..", "assets", basename),
+  ]
+  for (const path of candidates) {
+    if (!existsSync(path)) continue
+    const lines = readFileSync(path, "utf8")
+      .split(/\r?\n/)
+      .map((line) => (line.endsWith("\r") ? line.slice(0, -1) : line))
+      .filter((line) => line.length > 0)
+    if (lines.length > 0) return lines
+  }
+  return null
+}
+
+function loadWordmarkLogoLines(): readonly string[] {
+  const fromFile = readLogoFile("supatype-logo-wordmark.ascii.txt")
+  if (fromFile) return fromFile
+  return [...EMBEDDED_LOGO_WORDMARK]
+}
+
+/** Figlet slant wordmark (~46×6). */
+export const SUPATYPE_ASCII_LOGO_WORDMARK = loadWordmarkLogoLines()
+
+export function pickLogoLines(): readonly string[] {
+  return SUPATYPE_ASCII_LOGO_WORDMARK
+}
+
+export function logoRowCount(): number {
+  return pickLogoLines().length
+}
+
+/** Return logo rows exactly as authored (spaces preserved). */
+export function layoutLogoBlock(lines: readonly string[]): string[] {
+  return [...lines]
+}
+
+export function colorLogoLines(lines: readonly string[]): string[] {
+  const purple = taskColor("stack")
+  return lines.map((line) => `${purple}${BOLD}${line}${RESET}`)
+}

package/src/dev-session.ts

@@ -0,0 +1,130 @@
+/**
+ * `supatype dev` output session — TUI (default) or interleaved stream mode.
+ */
+
+import type { ProcessOptions } from "./process-manager.js"
+import { filterDevSubprocessLine, formatConsoleArgs } from "./dev-log-filter.js"
+import { DevLogBus, type DevLogLevel } from "./dev-log-bus.js"
+import { DevTui } from "./dev-tui.js"
+
+export type DevUiMode = "tui" | "stream"
+
+export function resolveDevUiMode(streamFlag: boolean): DevUiMode {
+  if (streamFlag) return "stream"
+  if (!process.stdout.isTTY || !process.stdin.isTTY) return "stream"
+  return "tui"
+}
+
+let activeSession: DevSession | null = null
+
+export function beginDevSession(mode: DevUiMode): DevSession {
+  activeSession?.stop()
+  activeSession = new DevSession(mode)
+  return activeSession
+}
+
+/** Enter console capture + TUI. */
+export function startDevSession(): void {
+  activeSession?.start()
+}
+
+export function endDevSession(): void {
+  activeSession?.stop()
+  activeSession = null
+}
+
+export function getActiveDevSession(): DevSession | null {
+  return activeSession
+}
+
+/** Log to a TUI task stream, or prefixed console output in stream mode. */
+export function appendDevTaskLog(
+  taskId: string,
+  taskTitle: string,
+  line: string,
+  level: DevLogLevel = "log",
+): void {
+  const session = getActiveDevSession()
+  if (session?.isTui()) {
+    session.bus.ensureTask(taskId, taskTitle)
+    session.bus.append(taskId, line, level)
+    return
+  }
+  const prefix = taskId === "stack" ? "[supatype]" : `[${taskId}]`
+  const write = level === "warn" ? console.warn : level === "error" ? console.error : console.log
+  write(`${prefix} ${line}`)
+}
+
+export class DevSession {
+  readonly bus = new DevLogBus()
+  readonly mode: DevUiMode
+  private tui: DevTui | null = null
+  private restoreConsole: (() => void) | null = null
+
+  constructor(mode: DevUiMode) {
+    this.mode = mode
+  }
+
+  isTui(): boolean {
+    return this.mode === "tui"
+  }
+
+  start(): void {
+    if (!this.isTui()) return
+    this.restoreConsole = patchConsole(this.bus)
+    this.tui = new DevTui(this.bus)
+    this.tui.start()
+  }
+
+  stop(): void {
+    this.tui?.stop()
+    this.tui = null
+    this.restoreConsole?.()
+    this.restoreConsole = null
+  }
+}
+
+export function enhanceProcessOptions(label: string, opts: ProcessOptions): ProcessOptions {
+  const session = getActiveDevSession()
+  const subprocessFilter =
+    label === "app" || label === "studio"
+      ? { shouldLogLine: (line: string) => filterDevSubprocessLine(label, line) }
+      : {}
+
+  if (!session?.isTui()) {
+    return { ...opts, ...subprocessFilter }
+  }
+
+  session.bus.ensureTask(label, label)
+  return {
+    ...opts,
+    ...subprocessFilter,
+    onLine: (line, stream) => {
+      session.bus.append(label, line, stream === "stderr" ? "error" : "log")
+    },
+  }
+}
+
+function patchConsole(bus: DevLogBus): () => void {
+  const original = {
+    log: console.log,
+    warn: console.warn,
+    error: console.error,
+  }
+
+  console.log = (...args: unknown[]) => {
+    bus.append("stack", formatConsoleArgs(args), "log")
+  }
+  console.warn = (...args: unknown[]) => {
+    bus.append("stack", formatConsoleArgs(args), "warn")
+  }
+  console.error = (...args: unknown[]) => {
+    bus.append("stack", formatConsoleArgs(args), "error")
+  }
+
+  return () => {
+    console.log = original.log
+    console.warn = original.warn
+    console.error = original.error
+  }
+}

package/src/dev-shutdown.ts

@@ -0,0 +1,54 @@
+/**
+ * Graceful shutdown for `supatype dev` — single path from SIGINT and TUI Ctrl+C.
+ */
+
+import { endDevSession } from "./dev-session.js"
+
+let shutdownWork: (() => Promise<void>) | null = null
+let shuttingDown = false
+let signalsRegistered = false
+
+function onSignal(): void {
+  void runDevShutdown()
+}
+
+/** Register async teardown (stop children, compose down, etc.). Call once per dev session. */
+export function registerDevShutdown(work: () => Promise<void>): void {
+  shutdownWork = work
+  if (signalsRegistered) return
+  signalsRegistered = true
+  process.on("SIGINT", onSignal)
+  process.on("SIGTERM", onSignal)
+}
+
+/** TUI Ctrl+C — do not re-emit SIGINT (avoids double-fire on Windows raw mode). */
+export function requestDevShutdown(): void {
+  void runDevShutdown()
+}
+
+export function isDevShuttingDown(): boolean {
+  return shuttingDown
+}
+
+async function runDevShutdown(): Promise<void> {
+  if (shuttingDown) {
+    try {
+      endDevSession()
+    } catch {
+      // best-effort terminal restore
+    }
+    process.stdout.write("\n")
+    process.exit(130)
+  }
+  shuttingDown = true
+
+  try {
+    endDevSession()
+    process.stdout.write("\n")
+    await shutdownWork?.()
+    process.exit(0)
+  } catch (err) {
+    process.stderr.write(`[supatype] Shutdown failed: ${(err as Error).message}\n`)
+    process.exit(1)
+  }
+}

package/src/dev-task-colors.ts

@@ -0,0 +1,47 @@
+/**
+ * ANSI colours for `supatype dev` TUI task list and log panes.
+ */
+
+export const RESET = "\x1b[0m"
+export const DIM = "\x1b[2m"
+export const BOLD = "\x1b[1m"
+
+/** Purple for orchestrator logs, green for Vite/app, etc. */
+export function taskColor(taskId: string): string {
+  switch (taskId) {
+    case "stack":
+      return "\x1b[35m"
+    case "app":
+      return "\x1b[32m"
+    case "studio":
+      return "\x1b[96m"
+    case "server":
+      return "\x1b[32m"
+    case "postgrest":
+      return "\x1b[36m"
+    default:
+      return "\x1b[37m"
+  }
+}
+
+export function levelColor(line: string): string | null {
+  if (line.startsWith("✗ ")) return "\x1b[31m"
+  if (line.startsWith("⚠ ")) return "\x1b[33m"
+  return null
+}
+
+/** Drop redundant prefix — task pane is already labelled supatype. */
+export function normalizeStackLogLine(line: string): string {
+  return line.replace(/^\[supatype\]\s*/, "")
+}
+
+export function colorizeLogLine(taskId: string, line: string): string {
+  const level = levelColor(line)
+  const base = level ?? taskColor(taskId)
+  return `${base}${line}${RESET}`
+}
+
+export function colorizeTaskLabel(taskId: string, label: string, focused: boolean): string {
+  const style = focused ? BOLD + taskColor(taskId) : taskColor(taskId)
+  return `${style}${label}${RESET}`
+}

package/src/dev-tui.ts

@@ -0,0 +1,232 @@
+/**
+ * Interactive terminal UI for `supatype dev` — task list + focused log pane.
+ */
+
+import { stripAnsi } from "./dev-log-filter.js"
+import type { DevLogBus } from "./dev-log-bus.js"
+import {
+  colorizeLogLine,
+  colorizeTaskLabel,
+  DIM,
+  RESET,
+  taskColor,
+} from "./dev-task-colors.js"
+import {
+  colorLogoLines,
+  layoutLogoBlock,
+  logoRowCount,
+  pickLogoLines,
+} from "./dev-logo.js"
+import { requestDevShutdown } from "./dev-shutdown.js"
+
+const ENTER_ALT_SCREEN = "\x1b[?1049h"
+const LEAVE_ALT_SCREEN = "\x1b[?1049l"
+const HIDE_CURSOR = "\x1b[?25l"
+const SHOW_CURSOR = "\x1b[?25h"
+const CLEAR_SCREEN = "\x1b[2J\x1b[H"
+
+const TASK_COL_WIDTH = 22
+const MIN_WIDTH = 60
+const MIN_HEIGHT = 14
+
+export class DevTui {
+  private active = false
+  private scrollFromBottom = 0
+  private renderPending = false
+  private unsubscribeBus: (() => void) | null = null
+  private readonly onResize = (): void => this.scheduleRender()
+  private readonly onData = (chunk: Buffer): void => this.handleInput(chunk)
+
+  constructor(private readonly bus: DevLogBus) {}
+
+  start(): void {
+    if (this.active) return
+    this.active = true
+    this.scrollFromBottom = 0
+
+    if (process.stdin.isTTY) {
+      process.stdin.setRawMode(true)
+      process.stdin.resume()
+      process.stdin.on("data", this.onData)
+    }
+    process.stdout.on("resize", this.onResize)
+
+    process.stdout.write(ENTER_ALT_SCREEN + HIDE_CURSOR)
+    this.unsubscribeBus = this.bus.onUpdate(() => this.scheduleRender())
+    this.scheduleRender()
+  }
+
+  stop(): void {
+    if (!this.active) return
+    this.active = false
+
+    this.unsubscribeBus?.()
+    this.unsubscribeBus = null
+
+    process.stdout.off("resize", this.onResize)
+    if (process.stdin.isTTY) {
+      process.stdin.off("data", this.onData)
+      process.stdin.setRawMode(false)
+      process.stdin.pause()
+    }
+
+    process.stdout.write(SHOW_CURSOR + LEAVE_ALT_SCREEN)
+  }
+
+  private scheduleRender(): void {
+    if (!this.active || this.renderPending) return
+    this.renderPending = true
+    setImmediate(() => {
+      this.renderPending = false
+      if (this.active) this.render()
+    })
+  }
+
+  private handleInput(chunk: Buffer): void {
+    const key = chunk.toString()
+
+    if (key === "\x03") {
+      requestDevShutdown()
+      return
+    }
+
+    switch (key) {
+      case "j":
+      case "\x1b[B":
+        this.bus.focusNext()
+        this.scrollFromBottom = 0
+        break
+      case "k":
+      case "\x1b[A":
+        this.bus.focusPrevious()
+        this.scrollFromBottom = 0
+        break
+      case "u":
+        this.scrollFromBottom = Math.min(
+          this.scrollFromBottom + 3,
+          this.maxScroll(this.bus.getFocusedTaskId()),
+        )
+        break
+      case "d":
+        this.scrollFromBottom = Math.max(this.scrollFromBottom - 3, 0)
+        break
+      case "g":
+        this.scrollFromBottom = this.maxScroll(this.bus.getFocusedTaskId())
+        break
+      case "G":
+        this.scrollFromBottom = 0
+        break
+      default:
+        return
+    }
+    this.scheduleRender()
+  }
+
+  private maxScroll(taskId: string): number {
+    const task = this.bus.getTask(taskId)
+    if (!task) return 0
+    const logHeight = this.splitPaneHeight()
+    return Math.max(0, task.lines.length - logHeight)
+  }
+
+  private chromeRowCount(): number {
+    // logo + separator + keybind hint + footer
+    return logoRowCount() + 3
+  }
+
+  private splitPaneHeight(): number {
+    const rows = Math.max(MIN_HEIGHT, process.stdout.rows ?? 24)
+    return Math.max(4, rows - this.chromeRowCount())
+  }
+
+  private render(): void {
+    const cols = Math.max(MIN_WIDTH, process.stdout.columns ?? 80)
+    const logWidth = cols - TASK_COL_WIDTH - 1
+    const logHeight = this.splitPaneHeight()
+
+    const lines: string[] = []
+
+    const logoPlain = layoutLogoBlock(pickLogoLines())
+    for (const colored of colorLogoLines(logoPlain)) {
+      lines.push(formatLogoRow(colored, cols))
+    }
+
+    lines.push(`${DIM}${"─".repeat(cols)}${RESET}`)
+    lines.push(
+      `${DIM}${truncate(
+        " ↑/k ↓/j task  u/d scroll  g/G top/bottom  Ctrl+C quit",
+        cols,
+      )}${RESET}`,
+    )
+
+    const taskIds = this.bus.getTaskOrder()
+    const focusedId = this.bus.getFocusedTaskId()
+
+    for (let row = 0; row < logHeight; row++) {
+      let left = " ".repeat(TASK_COL_WIDTH)
+      const taskId = taskIds[row]
+      if (taskId) {
+        const task = this.bus.getTask(taskId)
+        if (task) {
+          const marker = taskId === focusedId ? "▶" : " "
+          const unread = task.unread ? " •" : "  "
+          const label = truncate(`${marker} ${task.title}${unread}`, TASK_COL_WIDTH - 1)
+          left = padVisible(
+            colorizeTaskLabel(taskId, label, taskId === focusedId),
+            TASK_COL_WIDTH,
+          )
+        }
+      }
+
+      const logLine = this.logLineAt(focusedId, row, logHeight, logWidth)
+      lines.push(left + `${DIM}│${RESET}` + logLine)
+    }
+
+    const focusedTitle = this.bus.getTask(focusedId)?.title ?? focusedId
+    lines.push(`${DIM} focused:${RESET} ${colorizeTaskLabel(focusedId, focusedTitle, true)}`)
+
+    process.stdout.write(CLEAR_SCREEN + lines.join("\n"))
+  }
+
+  private logLineAt(taskId: string, row: number, logHeight: number, width: number): string {
+    const task = this.bus.getTask(taskId)
+    if (!task || task.lines.length === 0) {
+      return " ".repeat(width)
+    }
+
+    const total = task.lines.length
+    const end = total - this.scrollFromBottom
+    const start = Math.max(0, end - logHeight)
+    const index = start + row
+    if (index >= end || index >= total) {
+      return " ".repeat(width)
+    }
+
+    const raw = stripAnsi(task.lines[index] ?? "")
+    const clipped = truncate(raw, width)
+    return padVisible(colorizeLogLine(taskId, clipped), width)
+  }
+}
+
+function truncate(text: string, width: number): string {
+  if (width <= 0) return ""
+  if (text.length <= width) return text
+  if (width <= 1) return text.slice(0, width)
+  return `${text.slice(0, width - 1)}…`
+}
+
+/** Pad to visible width (ignores ANSI sequences already stripped from input). */
+function padVisible(text: string, width: number): string {
+  const visible = stripAnsi(text)
+  if (visible.length >= width) return text
+  return text + " ".repeat(width - visible.length)
+}
+
+function formatLogoRow(colored: string, cols: number): string {
+  const plain = stripAnsi(colored)
+  if (plain.length <= cols) {
+    return plain.length < cols ? `${colored}${" ".repeat(cols - plain.length)}` : colored
+  }
+  const purple = taskColor("stack")
+  return `${purple}\x1b[1m${plain.slice(0, cols)}${RESET}`
+}

package/src/diff-output.ts

@@ -0,0 +1,12 @@
+import type { DiffResult } from "./engine-client.js"
+
+/** Print engine diff warnings before the operation list. */
+export function printDiffWarnings(diff: DiffResult): void {
+  const warnings = diff.warnings ?? []
+  if (warnings.length === 0) return
+  console.log(`\n${warnings.length} warning(s):\n`)
+  for (const w of warnings) {
+    console.log(`  [!] ${w}`)
+  }
+  console.log()
+}