@supatype/cli 0.1.1 → 0.1.2

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,213 @@
+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"
+
+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 readyRows = readyPanel ? bus.readyPanelRowCount() : 0
+  const logoRows = logoRowCount() + 1 // figlet + tagline
+  const chromeRows = logoRows + readyRows + 2 // separator + keybindings line
+  const logHeight = Math.max(4, rows - chromeRows - (promptOpen ? 6 : 0) - 1)
+  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} /> : 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>
+  )
+}

package/src/ui/dev/DevReadyPanelView.tsx

@@ -0,0 +1,67 @@
+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)
+}
+
+export function DevReadyPanelView({
+  panel,
+  width,
+}: {
+  panel: DevReadyPanel
+  width: number
+}): React.ReactElement {
+  const innerWidth = panelInnerWidth(width)
+  const labelWidth = 14
+
+  return (
+    <Box
+      flexDirection="column"
+      marginBottom={1}
+      borderStyle="round"
+      borderColor={theme.brand}
+      paddingX={1}
+    >
+      <Text bold color={theme.brand}>
+        {truncate(panel.title, innerWidth)}
+      </Text>
+      {panel.links.map((link) => (
+        <Box key={`${link.label}-${link.url}`}>
+          <Text dimColor>{truncate(link.label.padEnd(labelWidth), labelWidth)}</Text>
+          <Text color={theme.info}>{truncate(link.url, innerWidth - labelWidth)}</Text>
+        </Box>
+      ))}
+      {panel.hints?.map((hint) => (
+        <Text key={hint} dimColor>
+          {truncate(hint, innerWidth)}
+        </Text>
+      ))}
+      {panel.anonKey ? (
+        <>
+          <Text dimColor>API keys (local dev)</Text>
+          <Text dimColor>{`anon ${shortenKey(panel.anonKey, innerWidth - 5)}`}</Text>
+          {panel.serviceRoleKey ? (
+            <Text dimColor>{`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,67 @@
+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) => {
+          setPrompt(spec)
+          setPromptResolver(() => (value: unknown) => {
+            setPrompt(null)
+            setPromptResolver(null)
+            resolve(value as T)
+          })
+        })
+      },
+    }
+    bind(controller)
+  }, [bind])
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <FlowLogoHeader />
+      <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>
+  )
+}