@supatype/cli 0.1.1 → 0.1.3

package/src/ui/brand.ts

@@ -1,12 +1,6 @@
 /**
  * Shared ANSI styling for Supatype CLI output and the dev TUI.
+ * @deprecated Prefer `theme.ts` for new code — re-exports kept for dev-logo / task colors.
  */
 
-export const RESET = "\x1b[0m"
-export const DIM = "\x1b[2m"
-export const BOLD = "\x1b[1m"
-export const BRAND_COLOR = "\x1b[35m"
-
-export function brandStyle(text: string): string {
-  return `${BRAND_COLOR}${BOLD}${text}${RESET}`
-}
+export { BOLD, BRAND_COLOR, brandStyle, DIM, RESET } from "./theme.js"

package/src/ui/clack-api.ts

@@ -0,0 +1,123 @@
+import type { FlowController } from "./flows/types.js"
+import type { DevSelectOption } from "./runtime/dev-prompt-queue.js"
+import { CLACK_CANCEL } from "./runtime/cancel.js"
+
+export interface ClackTextOptions {
+  message: string
+  defaultValue?: string
+  placeholder?: string
+  validate?: (value: string) => string | undefined
+}
+
+export interface ClackSelectOptions<T extends string = string> {
+  message: string
+  options: DevSelectOption<T>[]
+  initialValue?: T
+}
+
+export interface ClackConfirmOptions {
+  message: string
+  initialValue?: boolean
+}
+
+export interface ClackPasswordOptions {
+  message: string
+}
+
+export interface ClackSpinner {
+  start(message: string): void
+  stop(message: string): void
+}
+
+export interface ClackApi {
+  intro(message: string): void
+  outro(message: string): void
+  note(message: string): void
+  cancel(message: string): never
+  text(options: ClackTextOptions): Promise<string | typeof CLACK_CANCEL>
+  password(options: ClackPasswordOptions): Promise<string | typeof CLACK_CANCEL>
+  select<T extends string>(options: ClackSelectOptions<T>): Promise<T | typeof CLACK_CANCEL>
+  confirm(options: ClackConfirmOptions): Promise<boolean | typeof CLACK_CANCEL>
+  spinner(): ClackSpinner
+  log: {
+    info(message: string): void
+    warn(message: string): void
+    error(message: string): void
+    success(message: string): void
+  }
+}
+
+export function createClackApi(controller: FlowController): ClackApi {
+  return {
+    intro(message) {
+      controller.appendLog("plain", message)
+    },
+    outro(message) {
+      controller.appendLog("success", message)
+    },
+    note(message) {
+      for (const line of message.split("\n")) {
+        if (line.trim()) controller.appendPlain(line)
+      }
+    },
+    cancel(message): never {
+      controller.appendLog("warn", message)
+      process.exit(0)
+    },
+    async text(options) {
+      return controller.waitForPrompt<string>({
+        kind: "text",
+        message: options.message,
+        ...(options.defaultValue !== undefined ? { defaultValue: options.defaultValue } : {}),
+        ...(options.placeholder !== undefined ? { placeholder: options.placeholder } : {}),
+        ...(options.validate !== undefined ? { validate: options.validate } : {}),
+      })
+    },
+    async password(options) {
+      return controller.waitForPrompt<string>({
+        kind: "password",
+        message: options.message,
+      })
+    },
+    async select<T extends string>(options: ClackSelectOptions<T>) {
+      return controller.waitForPrompt<T>({
+        kind: "select",
+        message: options.message,
+        options: options.options,
+        ...(options.initialValue !== undefined ? { initialValue: options.initialValue } : {}),
+      })
+    },
+    async confirm(options) {
+      return controller.waitForPrompt<boolean>({
+        kind: "confirm",
+        message: options.message,
+        initialValue: options.initialValue ?? false,
+      })
+    },
+    spinner() {
+      return {
+        start(message: string) {
+          controller.setSpinner(message)
+        },
+        stop(message: string) {
+          controller.setSpinner(null)
+          controller.appendLog("success", message)
+        },
+      }
+    },
+    log: {
+      info(message) {
+        controller.appendLog("info", message)
+      },
+      warn(message) {
+        controller.appendLog("warn", message)
+      },
+      error(message) {
+        controller.appendLog("error", message)
+      },
+      success(message) {
+        controller.appendLog("success", message)
+      },
+    },
+  }
+}

package/src/ui/clack.ts

@@ -0,0 +1,153 @@
+/**
+ * Clack-compatible prompt API backed by Ink.
+ * Use inside `runClackFlow()` for multi-step wizards, or via `confirm()` / `promptText()` helpers.
+ */
+
+import { getActiveDevSession } from "../dev-session.js"
+import { createClackApi, type ClackApi } from "./clack-api.js"
+import { isInteractive } from "./interactive.js"
+import { CLACK_CANCEL, isCancel } from "./runtime/cancel.js"
+import { enqueueDevPrompt } from "./runtime/dev-prompt-queue.js"
+import { runClackFlow as mountClackFlow } from "./runtime/run-clack-flow.js"
+import type { DevSelectOption } from "./runtime/dev-prompt-queue.js"
+
+export { CLACK_CANCEL, isCancel }
+export type { ClackApi } from "./clack-api.js"
+
+import { getActiveFlowApi, setActiveFlowApi } from "./runtime/flow-session.js"
+
+function inDevTui(): boolean {
+  const session = getActiveDevSession()
+  return Boolean(session?.isTui() && session.isInkMounted())
+}
+
+async function devOrFlow<T>(
+  spec: Parameters<typeof enqueueDevPrompt>[0],
+  flowFn: (api: ClackApi) => Promise<T>,
+): Promise<T | typeof CLACK_CANCEL> {
+  if (inDevTui()) {
+    return enqueueDevPrompt(spec) as Promise<T | typeof CLACK_CANCEL>
+  }
+  const api = getActiveFlowApi()
+  if (api) {
+    return flowFn(api)
+  }
+  return mountClackFlow(async (flowApi) => flowFn(flowApi))
+}
+
+export async function runClackFlow<T>(run: (api: ClackApi) => Promise<T>): Promise<T> {
+  return mountClackFlow(async (api) => {
+    setActiveFlowApi(api)
+    try {
+      return await run(api)
+    } finally {
+      setActiveFlowApi(null)
+    }
+  })
+}
+
+export { getActiveFlowApi } from "./runtime/flow-session.js"
+
+export const p: ClackApi = {
+  intro(message) {
+    const api = getActiveFlowApi()
+    if (api) api.intro(message)
+    else console.log(`\n${message}\n`)
+  },
+  outro(message) {
+    const api = getActiveFlowApi()
+    if (api) api.outro(message)
+    else console.log(`\n${message}\n`)
+  },
+  note(message) {
+    const api = getActiveFlowApi()
+    if (api) api.note(message)
+    else {
+      for (const line of message.split("\n")) {
+        if (line.trim()) console.log(`  ${line}`)
+      }
+    }
+  },
+  cancel(message): never {
+    const api = getActiveFlowApi()
+    if (api) {
+      api.cancel(message)
+    }
+    console.log(message)
+    process.exit(0)
+  },
+  async text(options) {
+    return devOrFlow(
+      {
+        kind: "text",
+        message: options.message,
+        ...(options.defaultValue !== undefined ? { defaultValue: options.defaultValue } : {}),
+        ...(options.placeholder !== undefined ? { placeholder: options.placeholder } : {}),
+        ...(options.validate !== undefined ? { validate: options.validate } : {}),
+      },
+      (api) => api.text(options),
+    )
+  },
+  async password(options) {
+    return devOrFlow({ kind: "password", message: options.message }, (api) => api.password(options))
+  },
+  async select<T extends string>(options: { message: string; options: DevSelectOption<T>[]; initialValue?: T }) {
+    return devOrFlow(
+      {
+        kind: "select",
+        message: options.message,
+        options: options.options,
+        ...(options.initialValue !== undefined ? { initialValue: options.initialValue as string | boolean } : {}),
+      },
+      (api) => api.select(options),
+    )
+  },
+  async confirm(options) {
+    return devOrFlow(
+      {
+        kind: "confirm",
+        message: options.message,
+        initialValue: options.initialValue ?? false,
+      },
+      (api) => api.confirm(options),
+    )
+  },
+  spinner() {
+    const api = getActiveFlowApi()
+    if (api) return api.spinner()
+    return {
+      start(message: string) {
+        console.log(`${message}...`)
+      },
+      stop(message: string) {
+        console.log(message)
+      },
+    }
+  },
+  log: {
+    info(message) {
+      const api = getActiveFlowApi()
+      if (api) api.log.info(message)
+      else if (isInteractive()) console.log(message)
+      else console.log(`[supatype] ${message}`)
+    },
+    warn(message) {
+      const api = getActiveFlowApi()
+      if (api) api.log.warn(message)
+      else console.warn(`[supatype] ${message}`)
+    },
+    error(message) {
+      const api = getActiveFlowApi()
+      if (api) api.log.error(message)
+      else console.error(`[supatype] ${message}`)
+    },
+    success(message) {
+      const api = getActiveFlowApi()
+      if (api) api.log.success(message)
+      else console.log(`[supatype] ${message}`)
+    },
+  },
+}
+
+/** @deprecated Use `p` from this module inside `runClackFlow`. */
+export { p as clack }

package/src/ui/components/FlowSpinner.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+import { Box, Text } from "ink"
+import Spinner from "ink-spinner"
+import { theme } from "../theme.js"
+
+export function FlowSpinner({ message }: { message: string }): React.ReactElement {
+  return (
+    <Box marginBottom={1}>
+      <Text color={theme.brand}>
+        <Spinner type="dots" />
+        {` ${message}`}
+      </Text>
+    </Box>
+  )
+}

package/src/ui/components/LogoWordmark.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import { Box, Text } from "ink"
+import { layoutLogoBlock, pickLogoLines } from "../../dev-logo.js"
+import { theme } from "../theme.js"
+
+function truncatePlain(text: string, width: number): string {
+  if (text.length <= width) return text
+  if (width <= 1) return text.slice(0, width)
+  return `${text.slice(0, width - 1)}…`
+}
+
+export interface LogoWordmarkProps {
+  maxWidth?: number
+  /** Small caption under the figlet wordmark. */
+  tagline?: string
+}
+
+/** Figlet slant wordmark — native Ink colours (no embedded ANSI). */
+export function LogoWordmark({ maxWidth, tagline }: LogoWordmarkProps): React.ReactElement {
+  const lines = layoutLogoBlock(pickLogoLines())
+
+  return (
+    <Box flexDirection="column" marginBottom={tagline ? 0 : 1}>
+      {lines.map((line, index) => (
+        <Text key={`logo-${index}`} bold color={theme.brand}>
+          {maxWidth !== undefined ? truncatePlain(line, maxWidth) : line}
+        </Text>
+      ))}
+      {tagline ? (
+        <Text dimColor color={theme.brand}>
+          {tagline}
+        </Text>
+      ) : null}
+    </Box>
+  )
+}

package/src/ui/components/PromptPanel.tsx

@@ -0,0 +1,17 @@
+import React, { type ReactNode } from "react"
+import { Box } from "ink"
+import { theme } from "../theme.js"
+
+export function PromptPanel({ children }: { children: ReactNode }): React.ReactElement {
+  return (
+    <Box
+      marginTop={1}
+      borderStyle="round"
+      borderColor={theme.brand}
+      paddingX={1}
+      flexDirection="column"
+    >
+      {children}
+    </Box>
+  )
+}

package/src/ui/components/SelectField.tsx

@@ -0,0 +1,58 @@
+import React, { type FC } from "react"
+import { Box, Text, useInput } from "ink"
+import SelectInput from "ink-select-input"
+import { theme } from "../theme.js"
+import type { DevSelectOption } from "../runtime/dev-prompt-queue.js"
+
+export interface SelectFieldProps {
+  message: string
+  options: DevSelectOption[]
+  initialValue?: string
+  onSubmit: (value: string) => void
+  onCancel: () => void
+}
+
+const BrandIndicator: FC<{ isSelected?: boolean }> = ({ isSelected }) => (
+  <Text {...(isSelected ? { color: theme.brand, bold: true } : { dimColor: true })}>
+    {isSelected ? "▸ " : "  "}
+  </Text>
+)
+
+const BrandItem: FC<{ isSelected?: boolean; label: string }> = ({ isSelected, label }) => (
+  <Text {...(isSelected ? { color: theme.brand, bold: true } : {})}>{label}</Text>
+)
+
+export function SelectField({
+  message,
+  options,
+  initialValue,
+  onSubmit,
+  onCancel,
+}: SelectFieldProps): React.ReactElement {
+  useInput((_input, key) => {
+    if (key.escape) onCancel()
+  })
+
+  const items = options.map((opt) => ({
+    label: opt.hint ? `${opt.label} — ${opt.hint}` : opt.label,
+    value: opt.value,
+  }))
+
+  const foundIndex = items.findIndex((item) => item.value === initialValue)
+
+  return (
+    <Box flexDirection="column">
+      <Text bold color={theme.brand}>
+        {message}
+      </Text>
+      <SelectInput
+        items={items}
+        {...(foundIndex >= 0 ? { initialIndex: foundIndex } : {})}
+        indicatorComponent={BrandIndicator}
+        itemComponent={BrandItem}
+        onSelect={(item) => onSubmit(item.value)}
+      />
+      <Text dimColor>↑/↓ or j/k · enter · esc cancel · 1-9 quick pick</Text>
+    </Box>
+  )
+}

package/src/ui/confirm.ts

@@ -1,5 +1,5 @@
-import * as p from "@clack/prompts"
 import { isInteractive } from "./interactive.js"
+import { CLACK_CANCEL, isCancel, p } from "./clack.js"
 import { plain } from "./messages.js"
 
 export interface ConfirmOptions {
@@ -9,7 +9,7 @@ export interface ConfirmOptions {
 }
 
 /**
- * Yes/no confirmation — Clack in TTY, plain prompt or default otherwise.
+ * Yes/no confirmation — Ink overlay in dev, Ink flow in TTY, default otherwise.
  */
 export async function confirm(message: string, opts: ConfirmOptions = {}): Promise<boolean> {
   const fallback = opts.nonInteractive ?? opts.default ?? false
@@ -24,9 +24,8 @@ export async function confirm(message: string, opts: ConfirmOptions = {}): Promi
     initialValue: opts.default ?? false,
   })
 
-  if (p.isCancel(value)) {
+  if (isCancel(value)) {
     p.cancel("Cancelled.")
-    process.exit(0)
   }
 
   return value
@@ -36,3 +35,5 @@ export async function confirm(message: string, opts: ConfirmOptions = {}): Promi
 export function logSkippedConfirm(reason: string): void {
   plain(`${reason} (use --yes to skip confirmation)`)
 }
+
+export { isCancel, CLACK_CANCEL } from "./clack.js"

package/src/ui/dev/DevDashboard.tsx

@@ -0,0 +1,223 @@
+import React, { useEffect, useState } from "react"
+import { Box, Text, useInput, useStdout } from "ink"
+import type { DevLogBus } from "../../dev-log-bus.js"
+import { stripAnsi } from "../../dev-log-filter.js"
+import { logoRowCount } from "../../dev-logo.js"
+import { logInkColor, taskInkColor } from "../../dev-task-colors.js"
+import { LogoWordmark } from "../components/LogoWordmark.js"
+import { PromptPanel } from "../components/PromptPanel.js"
+import { DevReadyPanelView } from "./DevReadyPanelView.js"
+import { theme } from "../theme.js"
+import { requestDevShutdown } from "../../dev-shutdown.js"
+import {
+  getActiveDevPrompt,
+  resolveDevPrompt,
+  subscribeDevPrompts,
+} from "../runtime/dev-prompt-queue.js"
+import { CLACK_CANCEL } from "../runtime/cancel.js"
+import { ActiveFlowPromptView } from "../flows/prompt-fields.js"
+import type { ActiveFlowPrompt } from "../flows/types.js"
+
+const TASK_COL_WIDTH = 22
+const MIN_WIDTH = 60
+const MIN_HEIGHT = 14
+const TAGLINE = "local development"
+const CHROME_ABOVE_LOG = 2 // separator + keybindings
+const CHROME_BELOW_LOG = 2 // footer separator + focused line
+const MIN_LOG_ROWS = 3
+
+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)}…`
+}
+
+function padPlain(text: string, width: number): string {
+  if (text.length >= width) return text
+  return text + " ".repeat(width - text.length)
+}
+
+function devPromptToFlowPrompt(prompt: NonNullable<ReturnType<typeof getActiveDevPrompt>>): ActiveFlowPrompt {
+  switch (prompt.kind) {
+    case "confirm":
+      return {
+        kind: "confirm",
+        message: prompt.message,
+        initialValue: typeof prompt.initialValue === "boolean" ? prompt.initialValue : false,
+      }
+    case "text":
+      return {
+        kind: "text",
+        message: prompt.message,
+        ...(prompt.defaultValue !== undefined ? { defaultValue: prompt.defaultValue } : {}),
+        ...(prompt.placeholder !== undefined ? { placeholder: prompt.placeholder } : {}),
+        ...(prompt.validate !== undefined ? { validate: prompt.validate } : {}),
+      }
+    case "password":
+      return { kind: "password", message: prompt.message }
+    case "select":
+      return {
+        kind: "select",
+        message: prompt.message,
+        options: prompt.options ?? [],
+        ...(typeof prompt.initialValue === "string" ? { initialValue: prompt.initialValue } : {}),
+      }
+    default:
+      return { kind: "confirm", message: prompt.message, initialValue: false }
+  }
+}
+
+function scrollHint(scrollFromBottom: number, total: number, visible: number): string {
+  if (total <= visible) return "all lines visible"
+  if (scrollFromBottom === 0) return "latest"
+  if (scrollFromBottom >= total - visible) return "oldest"
+  return `${scrollFromBottom} lines up from latest`
+}
+
+interface DevDashboardProps {
+  bus: DevLogBus
+}
+
+export function DevDashboard({ bus }: DevDashboardProps): React.ReactElement {
+  const { stdout } = useStdout()
+  const cols = Math.max(MIN_WIDTH, stdout.columns ?? 80)
+  const rows = Math.max(MIN_HEIGHT, stdout.rows ?? 24)
+  const [, tick] = useState(0)
+  const [scrollFromBottom, setScrollFromBottom] = useState(0)
+  const [activePrompt, setActivePrompt] = useState(getActiveDevPrompt())
+
+  useEffect(() => {
+    const offBus = bus.onUpdate(() => tick((n) => n + 1))
+    const offPrompt = subscribeDevPrompts(() => setActivePrompt(getActiveDevPrompt()))
+    return () => {
+      offBus()
+      offPrompt()
+    }
+  }, [bus])
+
+  const promptOpen = activePrompt !== null
+  const focusedId = bus.getFocusedTaskId()
+  const taskIds = bus.getTaskOrder()
+  const readyPanel = bus.getReadyPanel()
+  const logoRows = logoRowCount() + 1 // figlet + tagline
+  const promptRows = promptOpen ? 6 : 0
+  const fullReadyRows = readyPanel ? bus.readyPanelRowCount(false) : 0
+  const availableForPanel =
+    rows - logoRows - CHROME_ABOVE_LOG - CHROME_BELOW_LOG - MIN_LOG_ROWS - promptRows
+  const useCompactPanel = readyPanel !== null && fullReadyRows > availableForPanel
+  const readyRows = readyPanel ? bus.readyPanelRowCount(useCompactPanel) : 0
+  const chromeRows = logoRows + readyRows + CHROME_ABOVE_LOG + CHROME_BELOW_LOG + promptRows
+  const logHeight = Math.max(0, rows - chromeRows)
+  const logWidth = cols - TASK_COL_WIDTH - 1
+
+  useInput((input, key) => {
+    if (promptOpen) return
+
+    if ((key.ctrl && input === "c") || input === "\x03") {
+      requestDevShutdown()
+      return
+    }
+
+    if (key.downArrow || input === "j") {
+      bus.focusNext()
+      setScrollFromBottom(0)
+      return
+    }
+    if (key.upArrow || input === "k") {
+      bus.focusPrevious()
+      setScrollFromBottom(0)
+      return
+    }
+    if (input === "u") {
+      setScrollFromBottom((s) =>
+        Math.min(s + 3, Math.max(0, (bus.getTask(focusedId)?.lines.length ?? 0) - logHeight)),
+      )
+      return
+    }
+    if (input === "d") {
+      setScrollFromBottom((s) => Math.max(s - 3, 0))
+      return
+    }
+    if (input === "g") {
+      setScrollFromBottom(Math.max(0, (bus.getTask(focusedId)?.lines.length ?? 0) - logHeight))
+      return
+    }
+    if (input === "G") {
+      setScrollFromBottom(0)
+    }
+  })
+
+  const taskLines = bus.getTask(focusedId)?.lines ?? []
+  const totalLines = taskLines.length
+  const end = totalLines - scrollFromBottom
+  const start = Math.max(0, end - logHeight)
+
+  return (
+    <Box flexDirection="column" width={cols} height={rows}>
+      <LogoWordmark maxWidth={cols} tagline={TAGLINE} />
+      {readyPanel ? (
+        <DevReadyPanelView panel={readyPanel} width={cols} compact={useCompactPanel} />
+      ) : null}
+      <Text dimColor>{"─".repeat(cols)}</Text>
+      <Text dimColor>
+        {truncate(" ↑/k ↓/j task  u/d scroll  g/G top/bottom  Ctrl+C quit", cols)}
+      </Text>
+
+      {Array.from({ length: logHeight }, (_, row) => {
+        const taskId = taskIds[row]
+        const task = taskId ? bus.getTask(taskId) : undefined
+        let left = " ".repeat(TASK_COL_WIDTH)
+        if (task && taskId) {
+          const marker = taskId === focusedId ? "▶" : " "
+          const unread = task.unread ? " •" : "  "
+          const label = truncate(`${marker} ${task.title}${unread}`, TASK_COL_WIDTH - 1)
+          left = padPlain(label, TASK_COL_WIDTH)
+        }
+
+        const index = start + row
+        const rawFull = index >= end || index >= totalLines ? "" : (taskLines[index] ?? "")
+        const raw = stripAnsi(rawFull)
+        const logLine = padPlain(truncate(raw, logWidth), logWidth)
+
+        return (
+          <Box key={`row-${row}`}>
+            <Text
+              {...(taskId === focusedId ? { bold: true } : {})}
+              color={taskId ? taskInkColor(taskId) : theme.dim}
+            >
+              {left}
+            </Text>
+            <Text dimColor>│</Text>
+            <Text
+              {...(raw
+                ? { color: logInkColor(focusedId, raw) }
+                : { dimColor: true })}
+            >
+              {logLine}
+            </Text>
+          </Box>
+        )
+      })}
+
+      <Text dimColor>{"─".repeat(cols)}</Text>
+      <Text>
+        <Text dimColor> focused </Text>
+        <Text color={taskInkColor(focusedId)} bold>
+          {bus.getTask(focusedId)?.title ?? focusedId}
+        </Text>
+        <Text dimColor>{` · ${scrollHint(scrollFromBottom, totalLines, logHeight)}`}</Text>
+      </Text>
+
+      {promptOpen && activePrompt ? (
+        <PromptPanel>
+          <ActiveFlowPromptView
+            prompt={devPromptToFlowPrompt(activePrompt)}
+            onSubmit={(value) => resolveDevPrompt(value)}
+            onCancel={() => resolveDevPrompt(CLACK_CANCEL)}
+          />
+        </PromptPanel>
+      ) : null}
+    </Box>
+  )
+}