[codex] keep Create settings visible (#316)

* fix(app): clarify create settings flow

* fix(web): keep create settings visible

* fix(web): require create repo URL before submit

* fix(app): restore checks after main merge

* test(app): split create flow coverage

* test(app): deduplicate create flow tests

* fix(web): preserve select ready urls

* fix(app): restore ci lint and grok auth

* fix(app): deduplicate create flow source

* fix(app): address create flow review feedback

* fix(app): align create boolean labels

* test(app): deduplicate create navigation assertions

* fix(app): align create display step mapping

* fix(app): use mode-aware create test helpers

* chore: retrigger ci

* test(app): tighten create settings assertions

* test(app): deduplicate empty create validation checks

Author: rikohomeless

packages/app/src/docker-git/menu-create-shared.ts

@@ -11,6 +11,7 @@ import {
   advanceCreateFlow,
   createInitialFlowView,
   handleAdvanceCreateFlowResult,
+  moveCreateSettingsStep,
   resolveCreateInputs
 } from "./menu-create-shared.js"
 import { resetToMenu } from "./menu-shared.js"
@@ -156,7 +157,9 @@ const handleCreateReturn = (
       })
     },
     onContinue: (view) => {
-      context.setView({ _tag: "Create", ...view })
+      if (view.mode === "create") {
+        context.setView({ _tag: "Create", ...view })
+      }
       context.setMessage(null)
     },
     onError: (error) => {
@@ -178,6 +181,8 @@ export const handleCreateInput = (
   input: string,
   key: {
     readonly escape?: boolean
+    readonly upArrow?: boolean
+    readonly downArrow?: boolean
     readonly return?: boolean
     readonly shift?: boolean
     readonly backspace?: boolean
@@ -190,6 +195,14 @@ export const handleCreateInput = (
     resetToMenu(context)
     return
   }
+  if (key.upArrow || key.downArrow) {
+    const nextView = moveCreateSettingsStep(view, key.upArrow ? "up" : "down")
+    if (nextView !== null) {
+      context.setView({ _tag: "Create", ...nextView })
+      context.setMessage(null)
+    }
+    return
+  }
   if (key.return) {
     handleCreateReturn({ ...context, view }, key.shift === true)
     return

packages/app/src/docker-git/menu-create.ts

@@ -1,7 +1,7 @@
 import React from "react"
 
 import { Box, Text } from "../ui/primitives.js"
-import { renderCreateStepLabel } from "./menu-create-shared.js"
+import { createSettingsHint, renderCreateStepLabel } from "./menu-create-shared.js"
 import { renderLayout } from "./menu-render-layout.js"
 import {
   buildSelectLabels,
@@ -120,9 +120,7 @@ export const renderMenu = (input: MenuRenderInput): React.ReactElement => {
 export const renderCreate = (input: CreateRenderInput): React.ReactElement => {
   const { buffer, defaults, label, message, stepIndex, steps } = input
   const el = React.createElement
-  const hint = stepIndex === 0
-    ? "Enter = next, Shift+Enter = quick create, Esc = cancel."
-    : "Enter = next, Esc = cancel."
+  const hint = stepIndex > 0 ? createSettingsHint : null
   const stepViews = steps.map((step, index) =>
     el(
       Text,
@@ -132,16 +130,18 @@ export const renderCreate = (input: CreateRenderInput): React.ReactElement => {
   )
   return renderLayout(
     "docker-git / Create",
-    [
+    compactElements([
       el(Box, { flexDirection: "column", marginTop: 1 }, ...stepViews),
       el(
         Box,
         { marginTop: 1 },
         el(Text, null, `${label}: `),
         el(Text, { fg: "green" }, buffer)
       ),
-      el(Box, { marginTop: 1 }, el(Text, { fg: "gray" }, hint))
-    ],
+      hint === null
+        ? null
+        : el(Box, { marginTop: 1 }, el(Text, { fg: "gray" }, hint))
+    ]),
     message
   )
 }

packages/app/src/docker-git/menu-render.ts

@@ -142,7 +142,14 @@ export interface ProjectAuthSnapshot {
 
 export type ViewState =
   | { readonly _tag: "Menu" }
-  | { readonly _tag: "Create"; readonly step: number; readonly buffer: string; readonly values: Partial<CreateInputs> }
+  | {
+    readonly _tag: "Create"
+    readonly mode: "create"
+    readonly step: number
+    readonly buffer: string
+    readonly inputError: string | null
+    readonly values: Partial<CreateInputs>
+  }
   | { readonly _tag: "AuthMenu"; readonly selected: number; readonly snapshot: AuthSnapshot }
   | {
     readonly _tag: "AuthPrompt"

packages/app/src/docker-git/menu-types.ts

@@ -20,11 +20,12 @@ import {
 } from "./api-client.js"
 import { type ControllerRuntime, ensureControllerReady } from "./controller.js"
 import type { Command } from "./frontend-lib/core/domain.js"
-import type { ApiRequestError, CliError, ControllerBootstrapError } from "./host-errors.js"
+import type { ApiRequestError, CliError } from "./host-errors.js"
 import { terminalAuthTitle } from "./menu-auth-shared.js"
-import { attachTerminalSession, type TerminalSessionClientError } from "./terminal-session-client.js"
+import { attachTerminalSession } from "./terminal-session-client.js"
 
 type OperationalCommand = Exclude<Command, { readonly _tag: "Help" }>
+type RoutedAuthEffect = Effect.Effect<void, CliError, ControllerRuntime>
 
 export type RoutedAuthCommand = Extract<
   OperationalCommand,
@@ -46,10 +47,9 @@ export type RoutedAuthCommand = Extract<
   }
 >
 
-const withControllerReady = <E extends CliError, R>(
-  effect: Effect.Effect<void, E, R>
-): Effect.Effect<void, E | ControllerBootstrapError, R | ControllerRuntime> =>
-  pipe(ensureControllerReady(), Effect.zipRight(effect))
+const withControllerReady = <R>(
+  effect: Effect.Effect<void, CliError, R>
+): Effect.Effect<void, CliError, ControllerRuntime | R> => pipe(ensureControllerReady(), Effect.zipRight(effect))
 
 const renderAuthPayload = (payload: JsonValue) => Effect.log(renderJsonPayload(payload))
 
@@ -60,17 +60,6 @@ const missingAuthTerminalSessionError = (provider: "GrokOauth"): ApiRequestError
   message: `Controller did not create a terminal session for ${provider}.`
 })
 
-const attachGrokTerminalSession = (
-  session: ApiTerminalSession | null
-): Effect.Effect<void, ApiRequestError | TerminalSessionClientError> =>
-  session === null
-    ? Effect.fail(missingAuthTerminalSessionError("GrokOauth"))
-    : attachTerminalSession({
-      header: terminalAuthTitle("GrokOauth"),
-      session,
-      websocketPath: `/auth/terminal-sessions/${encodeURIComponent(session.id)}/ws`
-    })
-
 const routedAuthTags: Readonly<Record<string, true>> = {
   AuthCodexImport: true,
   AuthCodexLogin: true,
@@ -120,12 +109,34 @@ const handleCodexLoginCommand = (
   command: Extract<OperationalCommand, { readonly _tag: "AuthCodexLogin" }>
 ) => withControllerReady(codexLogin(command))
 
+/**
+ * Attaches the Grok OAuth terminal session created by the controller.
+ *
+ * @pure false
+ * @effect terminal websocket attachment through `attachTerminalSession`
+ * @invariant null controller sessions fail with a typed ApiRequestError
+ * @precondition controller response has already been decoded as ApiTerminalSession | null
+ * @postcondition non-null sessions are attached through the auth terminal websocket path
+ * @complexity O(1) before terminal IO
+ * @throws Never; errors are represented in the Effect error channel as CliError
+ */
+const attachGrokAuthTerminalSession = (
+  session: ApiTerminalSession | null
+): Effect.Effect<void, CliError> =>
+  session === null
+    ? Effect.fail(missingAuthTerminalSessionError("GrokOauth"))
+    : attachTerminalSession({
+      header: terminalAuthTitle("GrokOauth"),
+      session,
+      websocketPath: `/auth/terminal-sessions/${encodeURIComponent(session.id)}/ws`
+    })
+
 const handleGrokLoginCommand = (
   command: Extract<OperationalCommand, { readonly _tag: "AuthGrokLogin" }>
 ) =>
   withControllerReady(
     createAuthTerminalSession("GrokOauth", command.label).pipe(
-      Effect.flatMap((session) => attachGrokTerminalSession(session))
+      Effect.flatMap((session) => attachGrokAuthTerminalSession(session))
     )
   )
 
@@ -157,7 +168,7 @@ const handleCodexLogoutCommand = (
 
 export const dispatchRoutedAuthCommand = (
   command: RoutedAuthCommand
-): Effect.Effect<void, CliError, ControllerRuntime> =>
+): RoutedAuthEffect =>
   Match.value(command).pipe(
     Match.when({ _tag: "AuthGithubLogin" }, handleGithubLoginCommand),
     Match.when({ _tag: "AuthGithubStatus" }, handleGithubStatusCommand),

packages/app/src/docker-git/program-auth.ts

@@ -1,4 +1,4 @@
-import { createElement, type CSSProperties, type JSX } from "react"
+import { createElement, type CSSProperties, type JSX, type KeyboardEvent } from "react"
 
 import type { UiBoxProps, UiButtonProps, UiTextInputProps, UiTextProps } from "./primitives.js"
 
@@ -113,8 +113,67 @@ export const webPrimitives = {
     props.multiline === true ? <MultilineTextInput {...props} /> : <SingleLineTextInput {...props} />
 } as const
 
+const horizontalArrowAction = (
+  key: string,
+  onArrowLeft: (() => void) | undefined,
+  onArrowRight: (() => void) | undefined
+): (() => void) | null => {
+  if (key === "ArrowLeft") {
+    return onArrowLeft ?? null
+  }
+  if (key === "ArrowRight") {
+    return onArrowRight ?? null
+  }
+  return null
+}
+
+type TextInputKeyboardHandlers = {
+  readonly onArrowLeft: (() => void) | undefined
+  readonly onArrowRight: (() => void) | undefined
+  readonly onEnter: ((shift: boolean) => void) | undefined
+  readonly onEscape: (() => void) | undefined
+}
+
+const stopTextInputKey = (
+  event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
+): void => {
+  event.preventDefault()
+  event.stopPropagation()
+}
+
+const handleMultilineTextInputKeyDown =
+  ({ onArrowLeft, onArrowRight, onEnter, onEscape }: TextInputKeyboardHandlers) =>
+  (event: KeyboardEvent<HTMLTextAreaElement>): void => {
+    const onArrow = horizontalArrowAction(event.key, onArrowLeft, onArrowRight)
+    if (onArrow !== null) {
+      stopTextInputKey(event)
+      onArrow()
+      return
+    }
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+      stopTextInputKey(event)
+      onEnter?.(event.shiftKey)
+      return
+    }
+    if (event.key === "Escape") {
+      stopTextInputKey(event)
+      onEscape?.()
+    }
+  }
+
 const MultilineTextInput = (
-  { ariaLabel, autoFocus, minRows, onChange, onEnter, onEscape, placeholder, value }: UiTextInputProps
+  {
+    ariaLabel,
+    autoFocus,
+    minRows,
+    onArrowLeft,
+    onArrowRight,
+    onChange,
+    onEnter,
+    onEscape,
+    placeholder,
+    value
+  }: UiTextInputProps
 ): JSX.Element => {
   const rows = minRows ?? 6
   return (
@@ -124,19 +183,7 @@ const MultilineTextInput = (
       onChange={(event) => {
         onChange(event.currentTarget.value)
       }}
-      onKeyDown={(event) => {
-        if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
-          event.preventDefault()
-          event.stopPropagation()
-          onEnter?.(event.shiftKey)
-          return
-        }
-        if (event.key === "Escape") {
-          event.preventDefault()
-          event.stopPropagation()
-          onEscape?.()
-        }
-      }}
+      onKeyDown={handleMultilineTextInputKeyDown({ onArrowLeft, onArrowRight, onEnter, onEscape })}
       placeholder={placeholder}
       rows={rows}
       style={{
@@ -152,7 +199,18 @@ const MultilineTextInput = (
 }
 
 const SingleLineTextInput = (
-  { ariaLabel, autoFocus, onChange, onEnter, onEscape, placeholder, secret, value }: UiTextInputProps
+  {
+    ariaLabel,
+    autoFocus,
+    onArrowLeft,
+    onArrowRight,
+    onChange,
+    onEnter,
+    onEscape,
+    placeholder,
+    secret,
+    value
+  }: UiTextInputProps
 ): JSX.Element => (
   <input
     aria-label={ariaLabel}
@@ -161,6 +219,13 @@ const SingleLineTextInput = (
       onChange(event.currentTarget.value)
     }}
     onKeyDown={(event) => {
+      const onArrow = horizontalArrowAction(event.key, onArrowLeft, onArrowRight)
+      if (onArrow !== null) {
+        event.preventDefault()
+        event.stopPropagation()
+        onArrow()
+        return
+      }
       if (event.key === "Enter") {
         event.preventDefault()
         event.stopPropagation()

packages/app/src/ui/primitives-web.tsx

@@ -56,6 +56,8 @@ export type UiTextInputProps = {
   readonly minRows?: number
   readonly multiline?: boolean
   readonly onChange: (value: string) => void
+  readonly onArrowLeft?: () => void
+  readonly onArrowRight?: () => void
   readonly onEnter?: (shift: boolean) => void
   readonly onEscape?: () => void
   readonly placeholder?: string

packages/app/src/ui/primitives.tsx

@@ -448,7 +448,7 @@ export const runProjectMenuAction = (
   context: BrowserActionContext
 ) => {
   if (currentMenu === "Create") {
-    context.setMessage("Create mode is active. Paste URL or URL + flags, Enter = next, Shift+Enter = quick create.")
+    context.setMessage("Create mode is active. Paste URL or URL + flags, then choose Quick Create or Settings.")
     return
   }
   if (currentMenu === "Select") {

packages/app/src/web/actions-projects.ts

@@ -19,7 +19,13 @@ import { resolveCurrentMenu, runAuthActionByIndex, runProjectAuthActionByIndex }
 import { useProjectBrowserReset, useTerminalBrowserAutoload } from "./app-ready-browser-hook.js"
 import { useBrowserShortcuts } from "./app-ready-browser-shortcuts-hook.js"
 import { createReadyActionContext } from "./app-ready-controller-context.js"
-import { cancelCreate, setCreateBuffer, submitCreateView, useCreateMenuReset } from "./app-ready-create.js"
+import {
+  cancelCreate,
+  type CreateSubmitMode,
+  setCreateBuffer,
+  submitCreateView,
+  useCreateMenuReset
+} from "./app-ready-create.js"
 import { bindDatabaseActions } from "./app-ready-database-actions.js"
 import { useProjectDatabasesReset } from "./app-ready-databases-hook.js"
 import { useGithubAuthGate } from "./app-ready-github-auth-gate-hook.js"
@@ -198,13 +204,13 @@ const bindCreateActions = (
   onCreateCancel: () => {
     cancelCreate(actionContext, state.setCreateView)
   },
-  onCreateSubmit: (quickCreate = false) => {
+  onCreateSubmit: (mode: CreateSubmitMode) => {
     submitCreateView({
       context: actionContext,
       controllerCwd: dashboard.health.cwd,
       projectsRoot: dashboard.health.projectsRoot,
       createView: state.createView,
-      quickCreate,
+      mode,
       setCreateView: state.setCreateView
     })
   }