@supatype/cli 0.1.1 → 0.1.3

package/src/ui/dev/DevReadyPanelView.tsx

@@ -0,0 +1,134 @@
+import React from "react"
+import { Box, Text } from "ink"
+import type { DevReadyPanel } from "../../dev-ready-panel.js"
+import { theme } from "../theme.js"
+
+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 shortenKey(key: string, width: number): string {
+  if (key.length <= width) return key
+  if (width <= 12) return truncate(key, width)
+  return `${key.slice(0, width - 10)}…${key.slice(-8)}`
+}
+
+/** Inner text width inside the round border + horizontal padding. */
+function panelInnerWidth(outerWidth: number): number {
+  return Math.max(20, outerWidth - 4)
+}
+
+function ServiceLinkRow({
+  label,
+  url,
+  innerWidth,
+  labelWidth,
+}: {
+  label: string
+  url: string
+  innerWidth: number
+  labelWidth: number
+}): React.ReactElement {
+  return (
+    <Text wrap="truncate">
+      <Text dimColor>{truncate(label.padEnd(labelWidth), labelWidth)}</Text>
+      <Text color={theme.info}>{truncate(url, Math.max(8, innerWidth - labelWidth))}</Text>
+    </Text>
+  )
+}
+
+function CompactLinks({ panel, innerWidth }: { panel: DevReadyPanel; innerWidth: number }): React.ReactElement {
+  const gateway = panel.links.find((link) => link.label === "API")?.url ?? panel.links[0]?.url ?? ""
+  const studio =
+    panel.links.find((link) => link.label === "Studio")?.url ??
+    panel.links[panel.links.length - 1]?.url ??
+    ""
+  const otherPaths = panel.links
+    .filter((link) => link.label !== "API" && link.label !== "Studio")
+    .map((link) => {
+      const prefix = `${link.url.split("://")[0] ?? "http"}://`
+      const path = link.url.slice(link.url.indexOf("://") + 3)
+      const slash = path.indexOf("/")
+      return slash >= 0 ? path.slice(slash) : link.url
+    })
+    .join(", ")
+
+  return (
+    <>
+      <Text wrap="truncate">
+        <Text dimColor>{"Gateway".padEnd(14)}</Text>
+        <Text color={theme.info}>{truncate(gateway, innerWidth - 14)}</Text>
+      </Text>
+      {otherPaths ? (
+        <Text dimColor wrap="truncate">
+          {truncate(`Also: ${otherPaths}`, innerWidth)}
+        </Text>
+      ) : null}
+      {studio ? (
+        <Text wrap="truncate">
+          <Text dimColor>{"Studio".padEnd(14)}</Text>
+          <Text color={theme.info}>{truncate(studio, innerWidth - 14)}</Text>
+        </Text>
+      ) : null}
+    </>
+  )
+}
+
+export function DevReadyPanelView({
+  panel,
+  width,
+  compact = false,
+}: {
+  panel: DevReadyPanel
+  width: number
+  compact?: boolean
+}): React.ReactElement {
+  const innerWidth = panelInnerWidth(width)
+  const labelWidth = 14
+
+  return (
+    <Box
+      flexDirection="column"
+      flexShrink={0}
+      width={width}
+      marginBottom={1}
+      borderStyle="round"
+      borderColor={theme.brand}
+      paddingX={1}
+    >
+      <Text bold color={theme.brand}>
+        {truncate(panel.title, innerWidth)}
+      </Text>
+      {compact ? (
+        <CompactLinks panel={panel} innerWidth={innerWidth} />
+      ) : (
+        panel.links.map((link) => (
+          <ServiceLinkRow
+            key={`${link.label}-${link.url}`}
+            label={link.label}
+            url={link.url}
+            innerWidth={innerWidth}
+            labelWidth={labelWidth}
+          />
+        ))
+      )}
+      {panel.hints?.map((hint) => (
+        <Text key={hint} dimColor wrap="truncate">
+          {truncate(hint, innerWidth)}
+        </Text>
+      ))}
+      {panel.anonKey ? (
+        <>
+          <Text dimColor>API keys (local dev)</Text>
+          <Text dimColor wrap="truncate">{`anon ${shortenKey(panel.anonKey, innerWidth - 5)}`}</Text>
+          {panel.serviceRoleKey ? (
+            <Text dimColor wrap="truncate">{`svc  ${shortenKey(panel.serviceRoleKey, innerWidth - 5)}`}</Text>
+          ) : null}
+        </>
+      ) : null}
+    </Box>
+  )
+}

package/src/ui/fatal.ts

@@ -1,8 +1,7 @@
-import * as p from "@clack/prompts"
 import type { DockerBrandOptions } from "../docker-runtime.js"
 import { isInteractive } from "./interactive.js"
 import { error, plain } from "./messages.js"
-import { clack, printLogo } from "./prompts.js"
+import { printLogo } from "./prompts.js"
 
 export type FatalOptions = {
   brand?: DockerBrandOptions
@@ -13,19 +12,15 @@ export type FatalOptions = {
 export function fatalError(message: string, hints: string[] = [], opts?: FatalOptions): never {
   if (opts?.brand && isInteractive()) {
     printLogo()
-    clack.intro(opts.brand.intro)
+    plain(opts.brand.intro)
   }
 
   error(message)
 
   if (hints.length > 0) {
-    if (isInteractive()) {
-      p.note(hints.join("\n\n"))
-    } else {
-      for (const hint of hints) {
-        plain()
-        plain(`  ${hint}`)
-      }
+    for (const hint of hints) {
+      plain()
+      plain(`  ${hint}`)
     }
   }
 

package/src/ui/flows/FlowApp.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef, useState } from "react"
+import { Box } from "ink"
+import { PromptPanel } from "../components/PromptPanel.js"
+import { CLACK_CANCEL } from "../runtime/cancel.js"
+import {
+  ActiveFlowPromptView,
+  FlowLogPane,
+  FlowLogoHeader,
+  FlowSpinnerLine,
+} from "./prompt-fields.js"
+import type { ActiveFlowPrompt, FlowController, FlowLogLine } from "./types.js"
+
+interface FlowAppProps {
+  bind: (controller: FlowController) => void
+}
+
+export function FlowApp({ bind }: FlowAppProps): React.ReactElement {
+  const [logLines, setLogLines] = useState<FlowLogLine[]>([])
+  const [spinner, setSpinner] = useState<string | null>(null)
+  const [prompt, setPrompt] = useState<ActiveFlowPrompt | null>(null)
+  const [promptResolver, setPromptResolver] = useState<((value: unknown) => void) | null>(null)
+  const bound = useRef(false)
+
+  useEffect(() => {
+    if (bound.current) return
+    bound.current = true
+    const controller: FlowController = {
+      appendLog(level, text) {
+        setLogLines((lines) => [...lines, { level, text }])
+      },
+      appendPlain(text) {
+        setLogLines((lines) => [...lines, { level: "plain", text }])
+      },
+      setSpinner(message) {
+        setSpinner(message)
+      },
+      waitForPrompt<T>(spec: ActiveFlowPrompt): Promise<T> {
+        return new Promise<T>((resolve) => {
+          setLogLines([])
+          setSpinner(null)
+          setPrompt(spec)
+          setPromptResolver(() => (value: unknown) => {
+            setPrompt(null)
+            setPromptResolver(null)
+            resolve(value as T)
+          })
+        })
+      },
+    }
+    bind(controller)
+  }, [bind])
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <FlowLogoHeader />
+      {prompt ? null : <FlowLogPane lines={logLines} />}
+      {spinner ? <FlowSpinnerLine message={spinner} /> : null}
+      {prompt && promptResolver ? (
+        <PromptPanel>
+          <ActiveFlowPromptView
+            prompt={prompt}
+            onSubmit={(value) => promptResolver(value)}
+            onCancel={() => promptResolver(CLACK_CANCEL)}
+          />
+        </PromptPanel>
+      ) : null}
+    </Box>
+  )
+}

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

@@ -0,0 +1,198 @@
+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 (input === "y" || input === "Y") {
+      onSubmit(true)
+      return
+    }
+    if (input === "n" || input === "N") {
+      onSubmit(false)
+      return
+    }
+    if (key.leftArrow || input === "h") setValue(false)
+    if (key.rightArrow || input === "l") setValue(true)
+    if (key.return) onSubmit(value)
+  })
+
+  return (
+    <Box flexDirection="column">
+      <Text bold color={theme.brand}>
+        {spec.message}
+      </Text>
+      <Text>
+        {value ? (
+          <Text color={theme.brand} bold>
+            Yes
+          </Text>
+        ) : (
+          <Text dimColor>Yes</Text>
+        )}
+        <Text dimColor> / </Text>
+        {!value ? (
+          <Text color={theme.brand} bold>
+            No
+          </Text>
+        ) : (
+          <Text dimColor>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
+}