@prover-coder-ai/docker-git 1.0.5

package/src/docker-git/menu-create.ts

@@ -0,0 +1,320 @@
+import { type CreateCommand, deriveRepoPathParts, resolveRepoInput } from "@effect-template/lib/core/domain"
+import { createProject } from "@effect-template/lib/usecases/actions"
+import type { AppError } from "@effect-template/lib/usecases/errors"
+import { defaultProjectsRoot } from "@effect-template/lib/usecases/menu-helpers"
+import * as Path from "@effect/platform/Path"
+import { Effect, Either, Match, pipe } from "effect"
+import { parseArgs } from "./cli/parser.js"
+import { formatParseError, usageText } from "./cli/usage.js"
+
+import { resetToMenu } from "./menu-shared.js"
+import {
+  type CreateInputs,
+  type CreateStep,
+  createSteps,
+  type MenuEnv,
+  type MenuState,
+  type ViewState
+} from "./menu-types.js"
+
+// CHANGE: move create-flow handling into a dedicated module
+// WHY: keep TUI entry slim and satisfy lint constraints
+// QUOTE(ТЗ): "TUI? Красивый, удобный"
+// REF: user-request-2026-02-01-tui
+// SOURCE: n/a
+// FORMAT THEOREM: forall s: step(s) -> step'(s)
+// PURITY: SHELL
+// EFFECT: Effect<void, AppError, FileSystem | Path | CommandExecutor>
+// INVARIANT: outDir resolves to a stable repo path
+// COMPLEXITY: O(1) per keypress
+
+type Mutable<T> = { -readonly [K in keyof T]: T[K] }
+
+type CreateRunner = { readonly runEffect: (effect: Effect.Effect<void, AppError, MenuEnv>) => void }
+
+type CreateContext = {
+  readonly state: MenuState
+  readonly setView: (view: ViewState) => void
+  readonly setMessage: (message: string | null) => void
+  readonly runner: CreateRunner
+  readonly setActiveDir: (dir: string | null) => void
+}
+
+type CreateReturnContext = CreateContext & {
+  readonly view: Extract<ViewState, { readonly _tag: "Create" }>
+}
+
+export const buildCreateArgs = (input: CreateInputs): ReadonlyArray<string> => {
+  const args: Array<string> = ["create", "--repo-url", input.repoUrl, "--secrets-root", input.secretsRoot]
+  if (input.repoRef.length > 0) {
+    args.push("--repo-ref", input.repoRef)
+  }
+  args.push("--out-dir", input.outDir)
+  if (!input.runUp) {
+    args.push("--no-up")
+  }
+  if (input.enableMcpPlaywright) {
+    args.push("--mcp-playwright")
+  }
+  if (input.force) {
+    args.push("--force")
+  }
+  if (input.forceEnv) {
+    args.push("--force-env")
+  }
+  return args
+}
+
+const trimLeftSlash = (value: string): string => {
+  let start = 0
+  while (start < value.length && value[start] === "/") {
+    start += 1
+  }
+  return value.slice(start)
+}
+
+const trimRightSlash = (value: string): string => {
+  let end = value.length
+  while (end > 0 && value[end - 1] === "/") {
+    end -= 1
+  }
+  return value.slice(0, end)
+}
+
+const joinPath = (...parts: ReadonlyArray<string>): string => {
+  const cleaned = parts
+    .filter((part) => part.length > 0)
+    .map((part, index) => {
+      if (index === 0) {
+        return trimRightSlash(part)
+      }
+      return trimRightSlash(trimLeftSlash(part))
+    })
+  return cleaned.join("/")
+}
+
+const resolveDefaultOutDir = (cwd: string, repoUrl: string): string => {
+  const resolvedRepo = resolveRepoInput(repoUrl)
+  const baseParts = deriveRepoPathParts(resolvedRepo.repoUrl).pathParts
+  const projectParts = resolvedRepo.workspaceSuffix ? [...baseParts, resolvedRepo.workspaceSuffix] : baseParts
+  return joinPath(defaultProjectsRoot(cwd), ...projectParts)
+}
+
+export const resolveCreateInputs = (
+  cwd: string,
+  values: Partial<CreateInputs>
+): CreateInputs => {
+  const repoUrl = values.repoUrl ?? ""
+  const resolvedRepoRef = repoUrl.length > 0 ? resolveRepoInput(repoUrl).repoRef : undefined
+  const secretsRoot = values.secretsRoot ?? joinPath(defaultProjectsRoot(cwd), "secrets")
+  const outDir = values.outDir ?? (repoUrl.length > 0 ? resolveDefaultOutDir(cwd, repoUrl) : "")
+
+  return {
+    repoUrl,
+    repoRef: values.repoRef ?? resolvedRepoRef ?? "main",
+    outDir,
+    secretsRoot,
+    runUp: values.runUp !== false,
+    enableMcpPlaywright: values.enableMcpPlaywright === true,
+    force: values.force === true,
+    forceEnv: values.forceEnv === true
+  }
+}
+
+const parseYesDefault = (input: string, fallback: boolean): boolean => {
+  const normalized = input.trim().toLowerCase()
+  if (normalized === "y" || normalized === "yes") {
+    return true
+  }
+  if (normalized === "n" || normalized === "no") {
+    return false
+  }
+  return fallback
+}
+
+const applyCreateCommand = (
+  state: MenuState,
+  create: CreateCommand
+): Effect.Effect<{ readonly _tag: "Continue"; readonly state: MenuState }, AppError, MenuEnv> =>
+  Effect.gen(function*(_) {
+    const path = yield* _(Path.Path)
+    const resolvedOutDir = path.resolve(create.outDir)
+    yield* _(createProject(create))
+    return { _tag: "Continue", state: { ...state, activeDir: resolvedOutDir } }
+  })
+
+const isCreateCommand = (command: { readonly _tag: string }): command is CreateCommand => command._tag === "Create"
+
+const buildCreateEffect = (
+  command: { readonly _tag: string },
+  state: MenuState,
+  setActiveDir: (dir: string | null) => void,
+  setMessage: (message: string | null) => void
+): Effect.Effect<void, AppError, MenuEnv> => {
+  if (isCreateCommand(command)) {
+    return pipe(
+      applyCreateCommand(state, command),
+      Effect.tap((outcome) =>
+        Effect.sync(() => {
+          setActiveDir(outcome.state.activeDir)
+        })
+      ),
+      Effect.asVoid
+    )
+  }
+  if (command._tag === "Help") {
+    return Effect.sync(() => {
+      setMessage(usageText)
+    })
+  }
+  return Effect.void
+}
+
+const applyCreateStep = (input: {
+  readonly step: CreateStep
+  readonly buffer: string
+  readonly currentDefaults: CreateInputs
+  readonly nextValues: Partial<Mutable<CreateInputs>>
+  readonly cwd: string
+  readonly setMessage: (message: string | null) => void
+}): boolean =>
+  Match.value(input.step).pipe(
+    Match.when("repoUrl", () => {
+      if (input.buffer.length === 0) {
+        input.setMessage("Repo URL is required.")
+        return false
+      }
+      input.nextValues.repoUrl = input.buffer
+      input.nextValues.outDir = resolveDefaultOutDir(input.cwd, input.buffer)
+      return true
+    }),
+    Match.when("repoRef", () => {
+      input.nextValues.repoRef = input.buffer.length > 0 ? input.buffer : input.currentDefaults.repoRef
+      return true
+    }),
+    Match.when("outDir", () => {
+      input.nextValues.outDir = input.buffer.length > 0 ? input.buffer : input.currentDefaults.outDir
+      return true
+    }),
+    Match.when("runUp", () => {
+      input.nextValues.runUp = parseYesDefault(input.buffer, input.currentDefaults.runUp)
+      return true
+    }),
+    Match.when("mcpPlaywright", () => {
+      input.nextValues.enableMcpPlaywright = parseYesDefault(
+        input.buffer,
+        input.currentDefaults.enableMcpPlaywright
+      )
+      return true
+    }),
+    Match.when("force", () => {
+      input.nextValues.force = parseYesDefault(input.buffer, input.currentDefaults.force)
+      return true
+    }),
+    Match.exhaustive
+  )
+
+const finalizeCreateFlow = (input: {
+  readonly state: MenuState
+  readonly nextValues: Partial<CreateInputs>
+  readonly setView: (view: ViewState) => void
+  readonly setMessage: (message: string | null) => void
+  readonly runner: CreateRunner
+  readonly setActiveDir: (dir: string | null) => void
+}) => {
+  const inputs = resolveCreateInputs(input.state.cwd, input.nextValues)
+  if (inputs.repoUrl.length === 0) {
+    input.setMessage("Repo URL is required.")
+    return
+  }
+
+  const parsed = parseArgs(buildCreateArgs(inputs))
+  if (Either.isLeft(parsed)) {
+    input.setMessage(formatParseError(parsed.left))
+    input.setView({ _tag: "Menu" })
+    return
+  }
+
+  const effect = buildCreateEffect(parsed.right, input.state, input.setActiveDir, input.setMessage)
+  input.runner.runEffect(effect)
+  input.setView({ _tag: "Menu" })
+  input.setMessage(null)
+}
+
+const handleCreateReturn = (context: CreateReturnContext) => {
+  const step = createSteps[context.view.step]
+  if (!step) {
+    context.setView({ _tag: "Menu" })
+    return
+  }
+
+  const buffer = context.view.buffer.trim()
+  const currentDefaults = resolveCreateInputs(context.state.cwd, context.view.values)
+  const nextValues: Partial<Mutable<CreateInputs>> = { ...context.view.values }
+  const updated = applyCreateStep({
+    step,
+    buffer,
+    currentDefaults,
+    nextValues,
+    cwd: context.state.cwd,
+    setMessage: context.setMessage
+  })
+  if (!updated) {
+    return
+  }
+
+  const nextStep = context.view.step + 1
+  if (nextStep < createSteps.length) {
+    context.setView({ _tag: "Create", step: nextStep, buffer: "", values: nextValues })
+    context.setMessage(null)
+    return
+  }
+
+  finalizeCreateFlow({
+    state: context.state,
+    nextValues,
+    setView: context.setView,
+    setMessage: context.setMessage,
+    runner: context.runner,
+    setActiveDir: context.setActiveDir
+  })
+}
+
+export const startCreateView = (
+  setView: (view: ViewState) => void,
+  setMessage: (message: string | null) => void,
+  buffer = ""
+) => {
+  setView({ _tag: "Create", step: 0, buffer, values: {} })
+  setMessage(null)
+}
+
+export const handleCreateInput = (
+  input: string,
+  key: {
+    readonly escape?: boolean
+    readonly return?: boolean
+    readonly backspace?: boolean
+    readonly delete?: boolean
+  },
+  view: Extract<ViewState, { readonly _tag: "Create" }>,
+  context: CreateContext
+) => {
+  if (key.escape) {
+    resetToMenu(context)
+    return
+  }
+  if (key.return) {
+    handleCreateReturn({ ...context, view })
+    return
+  }
+
+  if (key.backspace || key.delete) {
+    context.setView({ ...view, buffer: view.buffer.slice(0, -1) })
+    return
+  }
+
+  if (input.length > 0) {
+    context.setView({ ...view, buffer: view.buffer + input })
+  }
+}

package/src/docker-git/menu-input.ts

@@ -0,0 +1,2 @@
+export { buildCreateArgs, handleCreateInput, resolveCreateInputs, startCreateView } from "./menu-create.js"
+export { handleMenuInput } from "./menu-menu.js"

package/src/docker-git/menu-menu.ts

@@ -0,0 +1,58 @@
+import { parseMenuSelection } from "@effect-template/lib/core/domain"
+import { isRepoUrlInput } from "@effect-template/lib/usecases/menu-helpers"
+import { Either } from "effect"
+
+import { handleMenuActionSelection, type MenuSelectionContext } from "./menu-actions.js"
+import { startCreateView } from "./menu-create.js"
+import { menuItems } from "./menu-types.js"
+
+const handleMenuNavigation = (
+  key: { readonly upArrow?: boolean; readonly downArrow?: boolean },
+  setSelected: (update: (value: number) => number) => void
+) => {
+  if (key.upArrow) {
+    setSelected((prev) => (prev === 0 ? menuItems.length - 1 : prev - 1))
+    return
+  }
+  if (key.downArrow) {
+    setSelected((prev) => (prev === menuItems.length - 1 ? 0 : prev + 1))
+  }
+}
+
+const handleMenuEnter = (context: MenuSelectionContext) => {
+  const action = menuItems[context.selected]?.id
+  if (!action) {
+    return
+  }
+  handleMenuActionSelection(action, context)
+}
+
+const handleMenuTextInput = (input: string, context: MenuSelectionContext): boolean => {
+  const trimmed = input.trim()
+  if (trimmed.length > 0 && isRepoUrlInput(trimmed)) {
+    startCreateView(context.setView, context.setMessage, trimmed)
+    return true
+  }
+  const selection = parseMenuSelection(input)
+  if (Either.isRight(selection)) {
+    handleMenuActionSelection(selection.right, context)
+    return true
+  }
+  return false
+}
+
+export const handleMenuInput = (
+  input: string,
+  key: { readonly upArrow?: boolean; readonly downArrow?: boolean; readonly return?: boolean },
+  context: MenuSelectionContext
+) => {
+  if (key.upArrow || key.downArrow) {
+    handleMenuNavigation(key, context.setSelected)
+    return
+  }
+  if (key.return) {
+    handleMenuEnter(context)
+    return
+  }
+  handleMenuTextInput(input, context)
+}

package/src/docker-git/menu-render.ts

@@ -0,0 +1,327 @@
+import { Match } from "effect"
+import { Box, Text } from "ink"
+import React from "react"
+
+import type { ProjectItem } from "@effect-template/lib/usecases/projects"
+import type { CreateInputs, CreateStep } from "./menu-types.js"
+import { createSteps, menuItems } from "./menu-types.js"
+
+// CHANGE: render menu views with Ink without JSX
+// WHY: keep UI logic separate from input/state reducers
+// QUOTE(ТЗ): "TUI? Красивый, удобный"
+// REF: user-request-2026-02-01-tui
+// SOURCE: n/a
+// FORMAT THEOREM: forall v: view(v) -> render(v)
+// PURITY: SHELL
+// EFFECT: n/a
+// INVARIANT: menu renders all items once
+// COMPLEXITY: O(n)
+
+export const renderStepLabel = (step: CreateStep, defaults: CreateInputs): string =>
+  Match.value(step).pipe(
+    Match.when("repoUrl", () => "Repo URL"),
+    Match.when("repoRef", () => `Repo ref [${defaults.repoRef}]`),
+    Match.when("outDir", () => `Output dir [${defaults.outDir}]`),
+    Match.when("runUp", () => `Run docker compose up now? [${defaults.runUp ? "Y" : "n"}]`),
+    Match.when(
+      "mcpPlaywright",
+      () => `Enable Playwright MCP (Chromium sidecar)? [${defaults.enableMcpPlaywright ? "y" : "N"}]`
+    ),
+    Match.when(
+      "force",
+      () => `Force recreate (overwrite files + wipe volumes)? [${defaults.force ? "y" : "N"}]`
+    ),
+    Match.exhaustive
+  )
+
+const renderMessage = (message: string | null): React.ReactElement | null => {
+  if (!message) {
+    return null
+  }
+  return React.createElement(
+    Box,
+    { marginTop: 1 },
+    React.createElement(Text, { color: "magenta" }, message)
+  )
+}
+
+const renderLayout = (
+  title: string,
+  body: ReadonlyArray<React.ReactElement>,
+  message: string | null
+): React.ReactElement => {
+  const el = React.createElement
+  const messageView = renderMessage(message)
+  const tail = messageView ? [messageView] : []
+  return el(
+    Box,
+    { flexDirection: "column", padding: 1, borderStyle: "round" },
+    el(Text, { color: "cyan", bold: true }, title),
+    ...body,
+    ...tail
+  )
+}
+
+const compactElements = (
+  items: ReadonlyArray<React.ReactElement | null>
+): ReadonlyArray<React.ReactElement> => items.filter((item): item is React.ReactElement => item !== null)
+
+const renderMenuHints = (el: typeof React.createElement): React.ReactElement =>
+  el(
+    Box,
+    { marginTop: 1, flexDirection: "column" },
+    el(Text, { color: "gray" }, "Hints:"),
+    el(Text, { color: "gray" }, "  - Paste repo URL to create directly."),
+    el(
+      Text,
+      { color: "gray" },
+      "  - Aliases: create/c, select/s, info/i, status/ps, logs/l, down/d, down-all/da, delete/del, quit/q"
+    ),
+    el(Text, { color: "gray" }, "  - Use arrows and Enter to run.")
+  )
+
+const renderMenuMessage = (
+  el: typeof React.createElement,
+  message: string | null
+): React.ReactElement | null => {
+  if (!message || message.length === 0) {
+    return null
+  }
+  return el(
+    Box,
+    { marginTop: 1, flexDirection: "column" },
+    ...message
+      .split("\n")
+      .map((line, index) => el(Text, { key: `${index}-${line}`, color: "magenta" }, line))
+  )
+}
+
+export const renderMenu = (
+  cwd: string,
+  activeDir: string | null,
+  selected: number,
+  busy: boolean,
+  message: string | null
+): React.ReactElement => {
+  const el = React.createElement
+  const activeLabel = `Active: ${activeDir ?? "(none)"}`
+  const cwdLabel = `CWD: ${cwd}`
+  const items = menuItems.map((item, index) => {
+    const indexLabel = `${index + 1})`
+    const prefix = index === selected ? ">" : " "
+    return el(
+      Text,
+      { key: item.label, color: index === selected ? "green" : "white" },
+      `${prefix} ${indexLabel} ${item.label}`
+    )
+  })
+
+  const busyView = busy
+    ? el(Box, { marginTop: 1 }, el(Text, { color: "yellow" }, "Running..."))
+    : null
+
+  const messageView = renderMenuMessage(el, message)
+  const hints = renderMenuHints(el)
+
+  return renderLayout(
+    "docker-git",
+    compactElements([
+      el(Text, null, activeLabel),
+      el(Text, null, cwdLabel),
+      el(Box, { flexDirection: "column", marginTop: 1 }, ...items),
+      hints,
+      busyView,
+      messageView
+    ]),
+    null
+  )
+}
+
+export const renderCreate = (
+  label: string,
+  buffer: string,
+  message: string | null,
+  stepIndex: number,
+  defaults: CreateInputs
+): React.ReactElement => {
+  const el = React.createElement
+  const steps = createSteps.map((step, index) =>
+    el(
+      Text,
+      { key: step, color: index === stepIndex ? "green" : "gray" },
+      `${index === stepIndex ? ">" : " "} ${renderStepLabel(step, defaults)}`
+    )
+  )
+  return renderLayout(
+    "docker-git / Create",
+    [
+      el(Box, { flexDirection: "column", marginTop: 1 }, ...steps),
+      el(
+        Box,
+        { marginTop: 1 },
+        el(Text, null, `${label}: `),
+        el(Text, { color: "green" }, buffer)
+      ),
+      el(Box, { marginTop: 1 }, el(Text, { color: "gray" }, "Enter = next, Esc = cancel."))
+    ],
+    message
+  )
+}
+
+const formatRepoRef = (repoRef: string): string => {
+  const trimmed = repoRef.trim()
+  const prPrefix = "refs/pull/"
+  if (trimmed.startsWith(prPrefix)) {
+    const rest = trimmed.slice(prPrefix.length)
+    const number = rest.split("/")[0] ?? rest
+    return `PR#${number}`
+  }
+  return trimmed.length > 0 ? trimmed : "main"
+}
+
+const renderSelectDetails = (
+  el: typeof React.createElement,
+  purpose: SelectPurpose,
+  item: ProjectItem | undefined
+): ReadonlyArray<React.ReactElement> => {
+  if (!item) {
+    return [el(Text, { color: "gray", wrap: "truncate" }, "No project selected.")]
+  }
+
+  const refLabel = formatRepoRef(item.repoRef)
+  const authSuffix = item.authorizedKeysExists ? "" : " (missing)"
+
+  return Match.value(purpose).pipe(
+    Match.when("Info", () => [
+      el(Text, { color: "cyan", bold: true, wrap: "truncate" }, "Connection info"),
+      el(Text, { wrap: "wrap" }, `Project directory: ${item.projectDir}`),
+      el(Text, { wrap: "wrap" }, `Container: ${item.containerName}`),
+      el(Text, { wrap: "wrap" }, `Service: ${item.serviceName}`),
+      el(Text, { wrap: "wrap" }, `SSH command: ${item.sshCommand}`),
+      el(Text, { wrap: "wrap" }, `Repo: ${item.repoUrl} (${refLabel})`),
+      el(Text, { wrap: "wrap" }, `Workspace: ${item.targetDir}`),
+      el(Text, { wrap: "wrap" }, `Authorized keys: ${item.authorizedKeysPath}${authSuffix}`),
+      el(Text, { wrap: "wrap" }, `Env global: ${item.envGlobalPath}`),
+      el(Text, { wrap: "wrap" }, `Env project: ${item.envProjectPath}`),
+      el(Text, { wrap: "wrap" }, `Codex auth: ${item.codexAuthPath} -> ${item.codexHome}`)
+    ]),
+    Match.when("Delete", () => [
+      el(Text, { color: "cyan", bold: true, wrap: "truncate" }, "Delete project"),
+      el(Text, { wrap: "wrap" }, `Project directory: ${item.projectDir}`),
+      el(Text, { wrap: "wrap" }, `Container: ${item.containerName}`),
+      el(Text, { wrap: "wrap" }, `Repo: ${item.repoUrl} (${refLabel})`),
+      el(Text, { wrap: "wrap" }, "Removes the project folder (no git history rewrite).")
+    ]),
+    Match.orElse(() => [
+      el(Text, { color: "cyan", bold: true, wrap: "truncate" }, "Details"),
+      el(Text, { wrap: "truncate" }, `Repo: ${item.repoUrl}`),
+      el(Text, { wrap: "truncate" }, `Ref: ${item.repoRef}`),
+      el(Text, { wrap: "truncate" }, `Project dir: ${item.projectDir}`),
+      el(Text, { wrap: "truncate" }, `Workspace: ${item.targetDir}`),
+      el(Text, { wrap: "truncate" }, `SSH: ${item.sshCommand}`)
+    ])
+  )
+}
+
+type SelectPurpose = "Connect" | "Down" | "Info" | "Delete"
+
+const selectTitle = (purpose: SelectPurpose): string =>
+  Match.value(purpose).pipe(
+    Match.when("Connect", () => "docker-git / Select project"),
+    Match.when("Down", () => "docker-git / Stop container"),
+    Match.when("Info", () => "docker-git / Show connection info"),
+    Match.when("Delete", () => "docker-git / Delete project"),
+    Match.exhaustive
+  )
+
+const selectHint = (purpose: SelectPurpose): string =>
+  Match.value(purpose).pipe(
+    Match.when("Connect", () => "Enter = select + SSH, Esc = back"),
+    Match.when("Down", () => "Enter = stop container, Esc = back"),
+    Match.when("Info", () => "Use arrows to browse details, Enter = set active, Esc = back"),
+    Match.when("Delete", () => "Enter = ask/confirm delete, Esc = cancel"),
+    Match.exhaustive
+  )
+
+const buildSelectLabels = (
+  items: ReadonlyArray<ProjectItem>,
+  selected: number
+): ReadonlyArray<string> =>
+  items.map((item, index) => {
+    const prefix = index === selected ? ">" : " "
+    const refLabel = formatRepoRef(item.repoRef)
+    return `${prefix} ${index + 1}. ${item.displayName} (${refLabel})`
+  })
+
+const computeListWidth = (labels: ReadonlyArray<string>): number => {
+  const maxLabelWidth = labels.length > 0 ? Math.max(...labels.map((label) => label.length)) : 24
+  return Math.min(Math.max(maxLabelWidth + 2, 28), 54)
+}
+
+const renderSelectListBox = (
+  el: typeof React.createElement,
+  items: ReadonlyArray<ProjectItem>,
+  selected: number,
+  labels: ReadonlyArray<string>,
+  width: number
+): React.ReactElement => {
+  const list = labels.map((label, index) =>
+    el(
+      Text,
+      {
+        key: items[index]?.projectDir ?? String(index),
+        color: index === selected ? "green" : "white",
+        wrap: "truncate"
+      },
+      label
+    )
+  )
+
+  return el(
+    Box,
+    { flexDirection: "column", width },
+    ...(list.length > 0 ? list : [el(Text, { color: "gray" }, "No projects found.")])
+  )
+}
+
+const renderSelectDetailsBox = (
+  el: typeof React.createElement,
+  purpose: SelectPurpose,
+  items: ReadonlyArray<ProjectItem>,
+  selected: number
+): React.ReactElement => {
+  const details = renderSelectDetails(el, purpose, items[selected])
+  return el(
+    Box,
+    { flexDirection: "column", marginLeft: 2, flexGrow: 1 },
+    ...details
+  )
+}
+
+export const renderSelect = (
+  purpose: SelectPurpose,
+  items: ReadonlyArray<ProjectItem>,
+  selected: number,
+  confirmDelete: boolean,
+  message: string | null
+): React.ReactElement => {
+  const el = React.createElement
+  const listLabels = buildSelectLabels(items, selected)
+  const listWidth = computeListWidth(listLabels)
+  const listBox = renderSelectListBox(el, items, selected, listLabels, listWidth)
+  const detailsBox = renderSelectDetailsBox(el, purpose, items, selected)
+  const baseHint = selectHint(purpose)
+  const deleteHint = purpose === "Delete" && confirmDelete
+    ? "Confirm mode: Enter = delete now, Esc = cancel"
+    : baseHint
+  const hints = el(Box, { marginTop: 1 }, el(Text, { color: "gray" }, deleteHint))
+
+  return renderLayout(
+    selectTitle(purpose),
+    [
+      el(Box, { flexDirection: "row", marginTop: 1 }, listBox, detailsBox),
+      hints
+    ],
+    message
+  )
+}