@supatype/cli 0.1.1 → 0.1.2

package/src/ui/flows/prompt-fields.tsx

@@ -0,0 +1,192 @@
+import React, { useState } from "react"
+import { Box, Text, useInput } from "ink"
+import TextInput from "ink-text-input"
+import { FlowSpinner } from "../components/FlowSpinner.js"
+import { LogoWordmark } from "../components/LogoWordmark.js"
+import { SelectField } from "../components/SelectField.js"
+import { theme } from "../theme.js"
+import type { ActiveFlowPrompt, FlowLogLine } from "./types.js"
+
+const TASK_COL_WIDTH = 22
+
+function flowLogLineProps(level: FlowLogLine["level"]): { color?: string; dimColor?: boolean } {
+  if (level === "plain") return { dimColor: true }
+  if (level === "warn") return { color: theme.warn }
+  if (level === "error") return { color: theme.error }
+  if (level === "success") return { color: theme.success }
+  return { color: theme.info }
+}
+
+export function FlowLogoHeader(): React.ReactElement {
+  return <LogoWordmark />
+}
+
+export function FlowLogPane({ lines }: { lines: FlowLogLine[] }): React.ReactElement {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      {lines.map((line, index) => (
+        <Text key={`${index}-${line.text.slice(0, 24)}`} {...flowLogLineProps(line.level)}>
+          {line.text}
+        </Text>
+      ))}
+    </Box>
+  )
+}
+
+export function FlowSpinnerLine({ message }: { message: string }): React.ReactElement {
+  return <FlowSpinner message={message} />
+}
+
+interface ConfirmPromptProps {
+  spec: Extract<ActiveFlowPrompt, { kind: "confirm" }>
+  onSubmit: (value: boolean) => void
+}
+
+export function ConfirmPrompt({ spec, onSubmit }: ConfirmPromptProps): React.ReactElement {
+  const [value, setValue] = useState(spec.initialValue)
+
+  useInput((input, key) => {
+    if (key.leftArrow || input === "h") setValue(false)
+    if (key.rightArrow || input === "l") setValue(true)
+    if (input === "y" || input === "Y") setValue(true)
+    if (input === "n" || input === "N") setValue(false)
+    if (key.return) onSubmit(value)
+  })
+
+  return (
+    <Box flexDirection="column">
+      <Text bold color={theme.brand}>
+        {spec.message}
+      </Text>
+      <Text>
+        {value ? (
+          <Text color={theme.success} bold>
+            Yes
+          </Text>
+        ) : (
+          <Text>Yes</Text>
+        )}
+        <Text> / </Text>
+        {!value ? (
+          <Text color={theme.success} bold>
+            No
+          </Text>
+        ) : (
+          <Text>No</Text>
+        )}
+        <Text dimColor> — y/n, ←/→, enter</Text>
+      </Text>
+    </Box>
+  )
+}
+
+interface TextPromptProps {
+  spec: Extract<ActiveFlowPrompt, { kind: "text" }>
+  onSubmit: (value: string) => void
+  onCancel: () => void
+}
+
+export function TextPrompt({ spec, onSubmit, onCancel }: TextPromptProps): React.ReactElement {
+  const [value, setValue] = useState(spec.defaultValue ?? "")
+  const [error, setError] = useState<string | undefined>()
+
+  useInput((_input, key) => {
+    if (key.escape) onCancel()
+  })
+
+  return (
+    <Box flexDirection="column">
+      <Text bold color={theme.brand}>
+        {spec.message}
+      </Text>
+      <Box>
+        <Text color={theme.brand}>› </Text>
+        <TextInput
+          value={value}
+          {...(spec.placeholder !== undefined ? { placeholder: spec.placeholder } : {})}
+          onChange={setValue}
+          onSubmit={(submitted) => {
+            const err = spec.validate?.(submitted)
+            if (err) {
+              setError(err)
+              return
+            }
+            onSubmit(submitted)
+          }}
+        />
+      </Box>
+      {error ? <Text color={theme.error}>{error}</Text> : null}
+      <Text dimColor>enter submit · esc cancel</Text>
+    </Box>
+  )
+}
+
+interface PasswordPromptProps {
+  spec: Extract<ActiveFlowPrompt, { kind: "password" }>
+  onSubmit: (value: string) => void
+  onCancel: () => void
+}
+
+export function PasswordPrompt({ spec, onSubmit, onCancel }: PasswordPromptProps): React.ReactElement {
+  const [value, setValue] = useState("")
+
+  useInput((_input, key) => {
+    if (key.escape) onCancel()
+  })
+
+  return (
+    <Box flexDirection="column">
+      <Text bold color={theme.brand}>
+        {spec.message}
+      </Text>
+      <Box>
+        <Text color={theme.brand}>› </Text>
+        <TextInput mask="*" value={value} onChange={setValue} onSubmit={onSubmit} />
+      </Box>
+      <Text dimColor>enter submit · esc cancel</Text>
+    </Box>
+  )
+}
+
+interface SelectPromptProps {
+  spec: Extract<ActiveFlowPrompt, { kind: "select" }>
+  onSubmit: (value: string) => void
+  onCancel: () => void
+}
+
+export function SelectPrompt({ spec, onSubmit, onCancel }: SelectPromptProps): React.ReactElement {
+  return (
+    <SelectField
+      message={spec.message}
+      options={spec.options}
+      {...(spec.initialValue !== undefined ? { initialValue: spec.initialValue } : {})}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
+    />
+  )
+}
+
+export function ActiveFlowPromptView({
+  prompt,
+  onSubmit,
+  onCancel,
+}: {
+  prompt: ActiveFlowPrompt
+  onSubmit: (value: unknown) => void
+  onCancel: () => void
+}): React.ReactElement {
+  switch (prompt.kind) {
+    case "confirm":
+      return <ConfirmPrompt spec={prompt} onSubmit={(v) => onSubmit(v)} />
+    case "text":
+      return <TextPrompt spec={prompt} onSubmit={(v) => onSubmit(v)} onCancel={onCancel} />
+    case "password":
+      return <PasswordPrompt spec={prompt} onSubmit={(v) => onSubmit(v)} onCancel={onCancel} />
+    case "select":
+      return <SelectPrompt spec={prompt} onSubmit={(v) => onSubmit(v)} onCancel={onCancel} />
+    default:
+      return <Text>Unsupported prompt</Text>
+  }
+}
+
+export { TASK_COL_WIDTH }

package/src/ui/flows/types.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react"
+import type { DevSelectOption } from "../runtime/dev-prompt-queue.js"
+
+export type FlowLogLevel = "info" | "warn" | "error" | "success" | "plain"
+
+export interface FlowLogLine {
+  level: FlowLogLevel
+  text: string
+}
+
+export type ActiveFlowPrompt =
+  | {
+      kind: "confirm"
+      message: string
+      initialValue: boolean
+    }
+  | {
+      kind: "text"
+      message: string
+      defaultValue?: string
+      placeholder?: string
+      validate?: (value: string) => string | undefined
+    }
+  | {
+      kind: "password"
+      message: string
+    }
+  | {
+      kind: "select"
+      message: string
+      options: DevSelectOption[]
+      initialValue?: string
+    }
+
+export interface FlowPromptHandle<T = unknown> {
+  resolve: (value: T) => void
+  reject: (err: Error) => void
+}
+
+export interface FlowController {
+  appendLog(level: FlowLogLevel, text: string): void
+  appendPlain(text: string): void
+  setSpinner(message: string | null): void
+  waitForPrompt<T>(spec: ActiveFlowPrompt): Promise<T>
+}
+
+export type FlowShellProps = {
+  controller: FlowController
+  children?: ReactNode
+}

package/src/ui/index.ts

@@ -1,4 +1,4 @@
-export * from "./brand.js"
+export * from "./theme.js"
 export * from "./interactive.js"
 export * from "./messages.js"
 export * from "./fatal.js"

package/src/ui/messages.ts

@@ -1,27 +1,47 @@
-import * as p from "@clack/prompts"
+import { getActiveFlowApi } from "./runtime/flow-session.js"
 import { isInteractive } from "./interactive.js"
+import { plainError, plainInfo, plainSuccess, plainWarn } from "./theme.js"
 
 export const SUPATYPE_PREFIX = "[supatype]"
 
+function writePlain(message = ""): void {
+  console.log(message)
+}
+
 export function info(message: string): void {
+  const api = getActiveFlowApi()
+  if (api) {
+    api.log.info(message)
+    return
+  }
   if (isInteractive()) {
-    p.log.info(message)
+    writePlain(plainInfo(message))
     return
   }
-  console.log(`${SUPATYPE_PREFIX} ${message}`)
+  writePlain(`${SUPATYPE_PREFIX} ${message}`)
 }
 
 export function warn(message: string): void {
+  const api = getActiveFlowApi()
+  if (api) {
+    api.log.warn(message)
+    return
+  }
   if (isInteractive()) {
-    p.log.warn(message)
+    writePlain(plainWarn(message))
     return
   }
   console.warn(`${SUPATYPE_PREFIX} ${message}`)
 }
 
 export function error(message: string): void {
+  const api = getActiveFlowApi()
+  if (api) {
+    api.log.error(message)
+    return
+  }
   if (isInteractive()) {
-    p.log.error(message)
+    writePlain(plainError(message))
     return
   }
   console.error(`${SUPATYPE_PREFIX} ${message}`)
@@ -29,15 +49,37 @@ export function error(message: string): void {
 
 /** Unprefixed line (tables, diff output, blank lines). */
 export function plain(message = ""): void {
-  console.log(message)
+  const api = getActiveFlowApi()
+  if (api) {
+    if (message === "") {
+      api.note("")
+      return
+    }
+    api.note(message)
+    return
+  }
+  writePlain(message)
 }
 
 export function step(title: string): void {
-  console.log(`\n${title}`)
+  plain(`\n${title}`)
 }
 
 export type FileAction = "created" | "updated" | "skipped" | "removed" | "wrote"
 
 export function file(action: FileAction, rel: string): void {
-  console.log(`  ${action}  ${rel}`)
+  plain(`  ${action}  ${rel}`)
+}
+
+export function success(message: string): void {
+  const api = getActiveFlowApi()
+  if (api) {
+    api.log.success(message)
+    return
+  }
+  if (isInteractive()) {
+    writePlain(plainSuccess(message))
+    return
+  }
+  plain(`${SUPATYPE_PREFIX} ${message}`)
 }

package/src/ui/progress.ts

@@ -1,9 +1,15 @@
-import * as p from "@clack/prompts"
+/**
+ * Progress UI for one-shot commands — Ink spinner inside command chrome.
+ */
+
+import { getActiveFlowApi } from "./runtime/flow-session.js"
 import { isInteractive } from "./interactive.js"
 import { info } from "./messages.js"
+import { runCommandChrome } from "./runtime/command-chrome.js"
 
 /**
- * Run an async task with a Clack spinner (TTY) or a plain status line (CI/pipes).
+ * Show progress with the branded Ink spinner when command chrome is active
+ * (or mount chrome for a standalone spinner).
  */
 export async function withSpinner<T>(
   message: string,
@@ -15,7 +21,12 @@ export async function withSpinner<T>(
     return task()
   }
 
-  const spinner = p.spinner()
+  const api = getActiveFlowApi()
+  if (!api) {
+    return runCommandChrome(() => withSpinner(message, task, doneMessage))
+  }
+
+  const spinner = api.spinner()
   spinner.start(message)
   try {
     const result = await task()

package/src/ui/prompts.ts

@@ -1,7 +1,7 @@
-import * as p from "@clack/prompts"
-import { SUPATYPE_ASCII_LOGO_WORDMARK, colorLogoLines } from "../dev-logo.js"
-import { plain } from "./messages.js"
+import { colorLogoLines, SUPATYPE_ASCII_LOGO_WORDMARK } from "../dev-logo.js"
 import { isInteractive } from "./interactive.js"
+import { plain } from "./messages.js"
+import { CLACK_CANCEL, isCancel, p } from "./clack.js"
 
 /** Print the coloured Supatype ASCII wordmark at the top of an interactive command. */
 export function printLogo(): void {
@@ -11,17 +11,16 @@ export function printLogo(): void {
 }
 
 /**
- * Unwrap a clack prompt result, exiting cleanly when the user cancels (Ctrl-C).
+ * Unwrap a prompt result, exiting cleanly when the user cancels (Ctrl-C).
  */
-export function ensureNotCancelled<T>(value: T | symbol, cancelMessage = "Cancelled."): T {
-  if (p.isCancel(value)) {
+export function ensureNotCancelled<T>(value: T | typeof CLACK_CANCEL, cancelMessage = "Cancelled."): T {
+  if (isCancel(value)) {
     p.cancel(cancelMessage)
-    process.exit(0)
   }
   return value as T
 }
 
-/** Single-line text input via Clack (TTY only). */
+/** Single-line text input (TTY only). */
 export async function promptText(
   message: string,
   opts?: { defaultValue?: string; placeholder?: string },
@@ -37,4 +36,13 @@ export async function promptText(
   return ensureNotCancelled(value).trim()
 }
 
-export { p as clack }
+/** Masked password input (TTY only). */
+export async function promptPassword(message: string): Promise<string> {
+  if (!isInteractive()) {
+    throw new Error(`Cannot prompt for "${message}" in non-interactive mode.`)
+  }
+  const value = await p.password({ message })
+  return ensureNotCancelled(value).trim()
+}
+
+export { p, clack, isCancel, CLACK_CANCEL, runClackFlow } from "./clack.js"

package/src/ui/runtime/cancel.ts

@@ -0,0 +1,6 @@
+/** Clack-compatible cancel sentinel for Ink prompt flows. */
+export const CLACK_CANCEL = Symbol("supatype:cancel")
+
+export function isCancel(value: unknown): value is typeof CLACK_CANCEL {
+  return value === CLACK_CANCEL
+}

package/src/ui/runtime/command-chrome.ts

@@ -0,0 +1,147 @@
+/**
+ * Branded Ink chrome for one-shot CLI commands (push, diff, adopt, …).
+ * Reuses the flow shell: figlet logo, coloured log pane, ink-spinner, prompts.
+ */
+
+import type { Command } from "commander"
+import type { ClackApi } from "../clack-api.js"
+import { getActiveFlowApi } from "./flow-session.js"
+import { runClackFlow } from "../clack.js"
+import { isInteractive } from "../interactive.js"
+import {
+  filterCommandLogLine,
+  formatConsoleArgs,
+  stripAnsi,
+} from "../../dev-log-filter.js"
+
+function patchConsoleForCommand(api: ClackApi): () => void {
+  const original = {
+    log: console.log,
+    warn: console.warn,
+    error: console.error,
+  }
+
+  const emitLine = (raw: string, stream: "log" | "warn" | "error"): void => {
+    if (!filterCommandLogLine(raw)) return
+    const t = stripAnsi(raw).trim()
+    if (!t) return
+    const stripped = t.replace(/^\[supatype\]\s*/, "")
+
+    if (stream === "error" || stripped.startsWith("✗")) {
+      api.log.error(stripped.replace(/^✗\s*/, ""))
+      return
+    }
+    if (stream === "warn" || stripped.startsWith("⚠")) {
+      api.log.warn(stripped.replace(/^⚠\s*/, ""))
+      return
+    }
+    if (stripped.startsWith("✓")) {
+      api.log.success(stripped.replace(/^✓\s*/, ""))
+      return
+    }
+    if (/\[supatype\]/.test(raw)) {
+      api.log.info(stripped)
+      return
+    }
+    api.note(t)
+  }
+
+  const wrap =
+    (stream: "log" | "warn" | "error") =>
+    (...args: unknown[]): void => {
+      for (const part of formatConsoleArgs(args).split(/\r?\n/)) {
+        emitLine(part, stream)
+      }
+    }
+
+  console.log = wrap("log")
+  console.warn = wrap("warn")
+  console.error = wrap("error")
+
+  return () => {
+    console.log = original.log
+    console.warn = original.warn
+    console.error = original.error
+  }
+}
+
+/**
+ * Run a command body inside the branded Ink shell (logo + logs + spinner).
+ * Falls back to plain stdout when not interactive.
+ */
+export async function runCommandChrome<T>(fn: () => Promise<T>): Promise<T> {
+  if (!isInteractive() || isCommandChromeActive()) {
+    return fn()
+  }
+
+  return runClackFlow(async (api) => {
+    const restore = patchConsoleForCommand(api)
+    try {
+      return await fn()
+    } finally {
+      restore()
+    }
+  })
+}
+
+/** True while `runCommandChrome` / `runClackFlow` is active. */
+export function isCommandChromeActive(): boolean {
+  return getActiveFlowApi() !== null
+}
+
+/** Commands that mount their own Ink UI — do not wrap with command chrome. */
+const WIZARD_COMMAND_PATHS = new Set(["dev", "init", "link"])
+
+/** Prefixes for subcommands that call `runClackFlow` internally. */
+const WIZARD_COMMAND_PREFIXES = ["add "]
+
+/** Long-running or stdio-inherit commands where chrome would fight subprocess output. */
+const STREAMING_COMMAND_PATHS = new Set([
+  "logs",
+  "pg psql",
+  "functions serve",
+  "self-host compose logs",
+])
+
+type CommandWithAction = Command & {
+  parent?: Command | null
+  _actionHandler?: ((args: unknown) => unknown) | null
+}
+
+/** Whether a registered command path should skip automatic command chrome. */
+export function shouldExcludeCommandChrome(commandPath: string): boolean {
+  if (WIZARD_COMMAND_PATHS.has(commandPath)) return true
+  if (WIZARD_COMMAND_PREFIXES.some((prefix) => commandPath.startsWith(prefix))) return true
+  if (STREAMING_COMMAND_PATHS.has(commandPath)) return true
+  return false
+}
+
+function commandPath(cmd: CommandWithAction, root: Command): string {
+  const segments: string[] = []
+  let current: CommandWithAction | null = cmd
+  while (current && current !== root) {
+    segments.unshift(current.name())
+    current = current.parent ?? null
+  }
+  return segments.join(" ")
+}
+
+function wrapCommandAction(cmd: CommandWithAction, root: Command): void {
+  const path = commandPath(cmd, root)
+  const handler = cmd._actionHandler
+  if (!handler || shouldExcludeCommandChrome(path)) return
+
+  cmd._actionHandler = (args: unknown) =>
+    runCommandChrome(() => Promise.resolve(handler(args)))
+}
+
+/** Wrap every leaf command action with branded Ink chrome (see exclusions above). */
+export function wrapProgramActionsWithChrome(program: Command): void {
+  const walk = (cmd: CommandWithAction): void => {
+    wrapCommandAction(cmd, program)
+    for (const sub of cmd.commands) {
+      walk(sub as CommandWithAction)
+    }
+  }
+  walk(program as CommandWithAction)
+}

package/src/ui/runtime/dev-prompt-queue.ts

@@ -0,0 +1,84 @@
+/**
+ * Imperative prompt queue for the dev dashboard overlay.
+ */
+
+import { CLACK_CANCEL } from "./cancel.js"
+
+export type DevPromptKind = "confirm" | "text" | "password" | "select"
+
+export interface DevSelectOption<T extends string = string> {
+  value: T
+  label: string
+  hint?: string
+}
+
+export interface DevPromptRequest<T = unknown> {
+  id: number
+  kind: DevPromptKind
+  message: string
+  initialValue?: string | boolean
+  defaultValue?: string
+  placeholder?: string
+  mask?: boolean
+  options?: DevSelectOption[]
+  validate?: (value: string) => string | undefined
+  resolve: (value: T | typeof CLACK_CANCEL) => void
+}
+
+let nextId = 0
+let active: DevPromptRequest | null = null
+const waiters: DevPromptRequest[] = []
+const listeners = new Set<() => void>()
+
+function notify(): void {
+  for (const listener of listeners) listener()
+}
+
+export function subscribeDevPrompts(listener: () => void): () => void {
+  listeners.add(listener)
+  return () => listeners.delete(listener)
+}
+
+export function getActiveDevPrompt(): DevPromptRequest | null {
+  return active
+}
+
+export function enqueueDevPrompt<T>(spec: Omit<DevPromptRequest<T>, "id" | "resolve">): Promise<T | typeof CLACK_CANCEL> {
+  return new Promise((resolve) => {
+    const request: DevPromptRequest<T> = {
+      ...spec,
+      id: nextId++,
+      resolve: resolve as DevPromptRequest["resolve"],
+    }
+    waiters.push(request as DevPromptRequest)
+    if (!active) {
+      active = waiters.shift() ?? null
+    }
+    notify()
+  })
+}
+
+export function resolveDevPrompt(value: unknown): void {
+  if (!active) return
+  const current = active
+  active = waiters.shift() ?? null
+  current.resolve(value)
+  notify()
+}
+
+export function clearDevPromptQueue(): void {
+  while (active) {
+    active.resolve(CLACK_CANCEL)
+    active = waiters.shift() ?? null
+  }
+  for (const pending of waiters.splice(0)) {
+    pending.resolve(CLACK_CANCEL)
+  }
+  notify()
+}
+
+/** @internal Tests */
+export function resetDevPromptQueueForTests(): void {
+  clearDevPromptQueue()
+  nextId = 0
+}

package/src/ui/runtime/flow-session.ts

@@ -0,0 +1,11 @@
+import type { ClackApi } from "../clack-api.js"
+
+let activeFlowApi: ClackApi | null = null
+
+export function setActiveFlowApi(api: ClackApi | null): void {
+  activeFlowApi = api
+}
+
+export function getActiveFlowApi(): ClackApi | null {
+  return activeFlowApi
+}