@patze/code-cli 0.43.3 → 0.55.0

package/opentui/src/App.tsx

@@ -24,14 +24,34 @@ import { classifyPlainOutput, createTranscriptSink, inferErrorKind } from "./tui
 import { upsertTranscriptEntry } from "../../dist/cli/interactive/transcript-upsert.js"
 import { applyOpenTuiAgentEvent } from "../../dist/cli/interactive/opentui-agent-event.js"
 import type { AgentEvent } from "../../dist/cli/interactive/agent-events.js"
-import {
-  dedupeModelIds,
-  formatModelDisplayName,
-  getModelCatalogEntry,
-  isPatzeDefaultModel,
+import { formatModelDisplayName,
   PATZE_MODEL_CATALOG,
+  type PatzeModelCatalogEntry,
 } from "../../dist/config/models.js"
-import { formatModelDisplay } from "../../dist/config/model-preferences.js"
+import {
+  buildFilteredModelSelectOptions,
+  filterModelCatalogEntries,
+  formatCodexListItemLabel,
+  formatModelPickerPreferenceHint,
+  indexForFilteredCatalogEntry,
+  indexForReasoningLevel,
+} from "../../dist/cli/interactive/model-picker-panel.js"
+import { isComposerNewlineKey } from "../../dist/cli/interactive/composer-keys.js"
+import { isHistorySafe } from "../../dist/cli/interactive/redact-input.js"
+import {
+  getReasoningLevelsForModelId,
+  getDefaultReasoningLevel,
+  type ModelReasoningLevel,
+} from "../../dist/config/model-reasoning.js"
+import {
+  buildInteractiveFooterHint,
+} from "../../dist/cli/interactive/interactive-footer-hints.js"
+import {
+  applySimpleComposerBufferEdit,
+  jumpListSelection,
+  mapListNavKey,
+  moveListSelection,
+} from "../../dist/cli/interactive/select-list-nav.js"
 
 extend({ "tui-input": InputRenderable })
 
@@ -47,12 +67,13 @@ function TuiInput(props: TuiInputProps) {
   return createElement("tui-input", props)
 }
 
-type ViewMode = "command" | "input" | "model"
+type ViewMode = "input" | "model" | "model-reasoning"
 
 type CommandSelectItem = SelectOption & {
   name: string
   description: string
   value: string
+  commandName?: string
 }
 
 type ModelSelectItem = SelectOption & {
@@ -69,6 +90,8 @@ type InteractiveController = {
     setModelThinking: (value: boolean | null) => void
     getModelFast: () => boolean | null
     setModelFast: (value: boolean | null) => void
+    getModelReasoningLevel: () => ModelReasoningLevel | null
+    setModelReasoningLevel: (value: ModelReasoningLevel | null) => void
     getExecutionMode: () => "local" | "cloud"
     snapshot: () => Array<{ input: string; lines: string[] }>
   }
@@ -106,6 +129,15 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
   const streamingIdRef = useRef<string | null>(null)
   const scrollPinnedRef = useRef(true)
   const activeAbortRef = useRef<AbortController | null>(null)
+  const inputHistoryRef = useRef<string[]>([])
+  const historyIndexRef = useRef(-1)
+  const stashedInputRef = useRef("")
+  const commandSelectIndexRef = useRef(0)
+  const [commandSelectIndex, setCommandSelectIndex] = useState(0)
+  const [modelSelectIndex, setModelSelectIndex] = useState(0)
+  const [modelSearch, setModelSearch] = useState("")
+  const [reasoningSelectIndex, setReasoningSelectIndex] = useState(0)
+  const [menuDismissed, setMenuDismissed] = useState(false)
 
   const [ready, setReady] = useState(false)
   const [bootError, setBootError] = useState<string | null>(null)
@@ -114,18 +146,23 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
   const [activityFrame, setActivityFrame] = useState(0)
   const [input, setInput] = useState("")
   const [mode, setMode] = useState<ViewMode>("input")
-  const [modelSearch, setModelSearch] = useState("")
   const [scrollOffset, setScrollOffset] = useState(0)
   const [transcript, setTranscript] = useState<TranscriptEntry[]>([])
   const [currentModel, setCurrentModel] = useState("composer-2.5-fast")
   const [modelThinking, setModelThinking] = useState<boolean | null>(null)
   const [modelFast, setModelFast] = useState<boolean | null>(null)
+  const [modelReasoningLevel, setModelReasoningLevel] = useState<ModelReasoningLevel | null>(null)
+  const [pendingModelEntry, setPendingModelEntry] = useState<PatzeModelCatalogEntry | null>(null)
   const [executionMode, setExecutionMode] = useState<"local" | "cloud">("local")
   const [executionTarget, setExecutionTarget] = useState<string | null>(null)
-  const [supportedModels, setSupportedModels] = useState<string[]>([])
+  const [pickerCatalog, setPickerCatalog] = useState<PatzeModelCatalogEntry[]>([
+    ...PATZE_MODEL_CATALOG,
+  ])
   const [slashMenuReady, setSlashMenuReady] = useState(false)
   const [startupHeader, setStartupHeader] = useState<string[]>([])
   const [composerPlaceholder, setComposerPlaceholder] = useState("Describe a task… · / for commands")
+  const [composerChromeLeft, setComposerChromeLeft] = useState("Patze")
+  const [composerChromeRight, setComposerChromeRight] = useState("")
   const [emptySessionHints, setEmptySessionHints] = useState<string[]>([])
 
   const followTranscript = useCallback(() => {
@@ -143,6 +180,53 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
     setScrollOffset(0)
   }, [])
 
+  const resetInputHistoryNav = useCallback(() => {
+    historyIndexRef.current = -1
+    stashedInputRef.current = ""
+  }, [])
+
+  const pushInputHistory = useCallback((value: string) => {
+    if (!isHistorySafe(value)) {
+      return
+    }
+    const history = inputHistoryRef.current
+    if (history[history.length - 1] !== value) {
+      inputHistoryRef.current = [...history, value]
+    }
+    resetInputHistoryNav()
+  }, [resetInputHistoryNav])
+
+  const historyPrev = useCallback((): string | null => {
+    const history = inputHistoryRef.current
+    if (!history.length) {
+      return null
+    }
+    if (historyIndexRef.current === -1) {
+      stashedInputRef.current = input
+      historyIndexRef.current = history.length - 1
+    } else {
+      historyIndexRef.current = Math.max(0, historyIndexRef.current - 1)
+    }
+    return history[historyIndexRef.current] ?? null
+  }, [input])
+
+  const historyNext = useCallback((): string | null => {
+    if (historyIndexRef.current === -1) {
+      return null
+    }
+    const history = inputHistoryRef.current
+    if (historyIndexRef.current >= history.length - 1) {
+      historyIndexRef.current = -1
+      return stashedInputRef.current
+    }
+    historyIndexRef.current += 1
+    return history[historyIndexRef.current] ?? null
+  }, [])
+
+  const transcriptScrollActive = useCallback(() => {
+    return !scrollPinnedRef.current || scrollOffset > 0
+  }, [scrollOffset])
+
   const nextId = useCallback(() => {
     const id = nextIdRef.current
     nextIdRef.current += 1
@@ -239,24 +323,12 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
     setExecutionMode(controller.session.getExecutionMode())
     setModelThinking(controller.session.getModelThinking())
     setModelFast(controller.session.getModelFast())
+    setModelReasoningLevel(controller.session.getModelReasoningLevel())
 
-    let modelIds = [...models.PATZE_SUPPORTED_MODELS]
-    const apiKey = process.env.CURSOR_API_KEY?.trim()
-    if (apiKey) {
-      try {
-        const { Cursor } = await import("@cursor/sdk")
-        const listed = await Cursor.models.list({ apiKey })
-        const ids = listed
-          .map((item) => String(item.id ?? "").trim())
-          .filter(Boolean)
-        if (ids.length > 0) {
-          modelIds = ids
-        }
-      } catch {
-        // keep bundled fallback list
-      }
-    }
-    setSupportedModels(modelIds)
+    const catalogResolve = await importPatzeDist<
+      typeof import("../../dist/cli/interactive/model-catalog-resolve.js")
+    >("cli/interactive/model-catalog-resolve.js")
+    setPickerCatalog(await catalogResolve.resolvePickerModelCatalog())
 
     const cloudGit = await importPatzeDist<
       typeof import("../../dist/cli/interactive/cloud-git.js")
@@ -278,7 +350,19 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
     const sessionHints = await importPatzeDist<
       typeof import("../../dist/cli/interactive/session-hints.js")
     >("cli/interactive/session-hints.js")
-    setEmptySessionHints(sessionHints.buildEmptySessionHints(controller.cwd))
+    setEmptySessionHints(
+      sessionHints.shouldShowEmptySessionHints(controller.cwd)
+        ? sessionHints.buildEmptySessionHints(controller.cwd)
+        : []
+    )
+
+    const composerChrome = await importPatzeDist<
+      typeof import("../../dist/cli/interactive/composer-session-chrome.js")
+    >("cli/interactive/composer-session-chrome.js")
+    const chrome = composerChrome.buildComposerChromeForSession(controller as never)
+    setComposerChromeLeft(chrome.left)
+    setComposerChromeRight(chrome.right)
+    setStartupHeader(controller.renderHeaderLines())
   }, [])
 
   useEffect(() => {
@@ -387,7 +471,7 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
         const result = await controller.processLine(value, sink, {
           signal: abort.signal,
           onActivity: setActivityLabel,
-          useActivitySpinner: true,
+          useActivitySpinner: false,
           onAgentEvent: (event) => {
             setActivityLabel(null)
             setTranscript((items) =>
@@ -403,6 +487,9 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
           setTranscript([])
           markScrollPinned()
         }
+        if (result.refreshHeader) {
+          setStartupHeader(controller.renderHeaderLines())
+        }
         await refreshStatusMeta()
         if (result.exitShell) {
           exitApp()
@@ -430,32 +517,44 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
   )
 
   const openModelPicker = useCallback(() => {
+    setPendingModelEntry(null)
     setModelSearch("")
+    const filtered = filterModelCatalogEntries("", pickerCatalog)
+    setModelSelectIndex(indexForFilteredCatalogEntry(filtered, currentModel))
     setMode("model")
-  }, [])
+  }, [currentModel, pickerCatalog])
 
-  const toggleModelPreference = useCallback((kind: "thinking" | "fast") => {
-    const controller = controllerRef.current
-    if (!controller) {
-      return
-    }
-    if (kind === "thinking") {
-      const next = controller.session.getModelThinking() === true ? null : true
-      controller.session.setModelThinking(next)
-      setModelThinking(next)
-    } else {
-      const next = controller.session.getModelFast() === true ? null : true
-      controller.session.setModelFast(next)
-      setModelFast(next)
-    }
-    controller.persistSession()
-  }, [])
+  const toggleModelPickerPreference = useCallback(
+    (preference: "thinking" | "fast") => {
+      const controller = controllerRef.current
+      if (!controller) {
+        return
+      }
+      void (async () => {
+        const prefs = await importPatzeDist<
+          typeof import("../../dist/config/model-preferences.js")
+        >("config/model-preferences.js")
+        const current = preference === "thinking" ? modelThinking : modelFast
+        const next = prefs.resolveModelPreferenceToggle(current, "toggle")
+        if (preference === "thinking") {
+          controller.session.setModelThinking(next)
+          setModelThinking(next)
+        } else {
+          controller.session.setModelFast(next)
+          setModelFast(next)
+        }
+        controller.persistSession()
+      })()
+    },
+    [modelFast, modelThinking]
+  )
 
   const runCommand = useCallback(
     async (rawCommand: string) => {
       const trimmed = rawCommand.trim()
       setMode("input")
       setInput("")
+      setMenuDismissed(false)
 
       if (!trimmed) {
         return
@@ -492,7 +591,30 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
   const submitInput = useCallback(
     (value: string) => {
       const prompt = trimComposerPrompt(value)
+
+      if (
+        prompt.startsWith("/") &&
+        !prompt.includes(" ") &&
+        !menuDismissed &&
+        slashMenuModule &&
+        commandMenu.items.length > 0
+      ) {
+        const command = commandMenu.items[commandSelectIndexRef.current]
+        if (command) {
+          setInput("")
+          resetInputHistoryNav()
+          if (slashMenuModule.commandRequiresArg(command)) {
+            setInput(`/${command.name} `)
+            setMenuDismissed(false)
+            return
+          }
+          void runCommand(`/${command.name}`)
+          return
+        }
+      }
+
       setInput("")
+      resetInputHistoryNav()
 
       if (!prompt || busy) {
         return
@@ -503,9 +625,19 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
         return
       }
 
+      pushInputHistory(prompt)
       void submitToController(prompt)
     },
-    [busy, runCommand, submitToController]
+    [
+      busy,
+      commandMenu.items,
+      menuDismissed,
+      pushInputHistory,
+      resetInputHistoryNav,
+      runCommand,
+      slashMenuModule,
+      submitToController,
+    ]
   )
 
   const selectModel = useCallback(
@@ -515,45 +647,118 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
         return
       }
 
-      const modelCommand = await importPatzeDist<
-        typeof import("../../dist/cli/interactive/model-command.js")
-      >("cli/interactive/model-command.js")
+      const modelApply = await importPatzeDist<
+        typeof import("../../dist/cli/interactive/interactive-model-apply.js")
+      >("cli/interactive/interactive-model-apply.js")
+
+      const catalogEntry =
+        pickerCatalog.find((entry) => entry.id.toLowerCase() === modelId.toLowerCase()) ?? null
+
+      const result = modelApply.applyInteractiveModelChoice(
+        controller.session as never,
+        modelId,
+        undefined,
+        catalogEntry
+      )
+      if (result.pendingReasoning) {
+        setPendingModelEntry(result.pendingReasoning)
+        setReasoningSelectIndex(
+          indexForReasoningLevel(
+            getReasoningLevelsForModelId(result.pendingReasoning.id),
+            currentModel.toLowerCase() === result.pendingReasoning.id.toLowerCase()
+              ? modelReasoningLevel
+              : null,
+            result.pendingReasoning.id
+          )
+        )
+        setMode("model-reasoning")
+        return
+      }
+
+      for (const line of result.lines) {
+        addEntry(inferErrorKind(line), "model", line)
+      }
+      controller.persistSession()
+      setStartupHeader(controller.renderHeaderLines())
+      await refreshStatusMeta()
+      setMode("input")
+    },
+    [addEntry, currentModel, modelReasoningLevel, pickerCatalog, refreshStatusMeta]
+  )
+
+  const selectReasoning = useCallback(
+    async (level: ModelReasoningLevel) => {
+      const controller = controllerRef.current
+      if (!controller || !pendingModelEntry) {
+        return
+      }
+
+      const modelApply = await importPatzeDist<
+        typeof import("../../dist/cli/interactive/interactive-model-apply.js")
+      >("cli/interactive/interactive-model-apply.js")
 
-      const result = modelCommand.dispatchModelCommand(controller.session as never, modelId)
+      const result = modelApply.applyInteractiveModelReasoning(
+        controller.session as never,
+        pendingModelEntry,
+        level
+      )
       for (const line of result.lines) {
         addEntry(inferErrorKind(line), "model", line)
       }
+      controller.persistSession()
+      setPendingModelEntry(null)
+      setStartupHeader(controller.renderHeaderLines())
       await refreshStatusMeta()
       setMode("input")
     },
-    [addEntry, refreshStatusMeta]
+    [addEntry, pendingModelEntry, refreshStatusMeta]
   )
 
   const commandSelectRows = Math.min(6, Math.max(3, rows - 10))
   const modelSelectRows = Math.min(8, Math.max(3, rows - 10))
   const commandPanelRows = 2 + commandSelectRows
-  const modelPanelRows = 3 + modelSelectRows
+  const modelPanelRows = 4 + modelSelectRows
   const headerRows = Math.max(1, startupHeader.length)
   const composerChromeRows = 5
   const bottomHintRows = 1
 
+  const commandMenu = useMemo(() => {
+    if (!slashMenuReady || !slashMenuModule || !input.startsWith("/") || input.includes(" ") || menuDismissed) {
+      return { items: [], advancedCount: 0 }
+    }
+    return slashMenuModule.computeSlashMenuItems(input)
+  }, [input, menuDismissed, slashMenuReady])
+
+  const commandItems = useMemo(() => {
+    return commandMenu.items.map((command) => ({
+      name: `/${command.name}`,
+      description: command.description,
+      value: `/${command.name}`,
+      commandName: command.name,
+    }))
+  }, [commandMenu.items])
+
+  const slashPaletteOpen =
+    mode === "input" &&
+    input.startsWith("/") &&
+    !input.includes(" ") &&
+    !menuDismissed &&
+    commandMenu.items.length > 0
+
   const transcriptViewportRows = Math.max(
     4,
     rows -
       headerRows -
       bottomHintRows -
-      (mode === "model"
+      (mode === "model-reasoning"
         ? modelPanelRows + 2
-        : mode === "command"
-          ? commandPanelRows + 2
-          : composerChromeRows)
+        : mode === "model"
+          ? modelPanelRows + 2
+          : composerChromeRows + (slashPaletteOpen ? commandPanelRows + 2 : 0))
   )
 
-  const composerModelLabel = formatModelDisplay(currentModel, {
-    thinking: modelThinking,
-    fast: modelFast,
-  })
-  const composerPathLabel = shortenComposerPath(cwd)
+  const composerModelLabel = composerChromeLeft
+  const composerPathLabel = composerChromeRight
 
   const scrollableEntries = useMemo(() => transcript, [transcript])
 
@@ -575,40 +780,53 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
     setScrollOffset((offset) => Math.min(offset, maxScrollOffset))
   }, [maxScrollOffset])
 
-  const commandItems = useMemo(() => {
-    if (!slashMenuReady || !input.startsWith("/") || input.includes(" ")) {
+  useEffect(() => {
+    setCommandSelectIndex(0)
+    commandSelectIndexRef.current = 0
+  }, [commandMenu.items])
+
+  const modelItems = useMemo(
+    () => buildFilteredModelSelectOptions(currentModel, modelSearch, pickerCatalog),
+    [currentModel, modelSearch, pickerCatalog]
+  )
+
+  useEffect(() => {
+    if (mode !== "model") {
+      return
+    }
+    setModelSelectIndex((index) => {
+      if (modelItems.length === 0) {
+        return 0
+      }
+      return Math.min(index, modelItems.length - 1)
+    })
+  }, [mode, modelItems.length, modelSearch])
+
+  const reasoningItems = useMemo(() => {
+    if (!pendingModelEntry) {
       return []
     }
-    return getCommandItems(input)
-  }, [input, slashMenuReady])
-
-  const modelItems = useMemo(() => {
-    const catalogIds = PATZE_MODEL_CATALOG.map((entry) => entry.id)
-    const merged = dedupeModelIds([...catalogIds, ...supportedModels])
-    const normalized = modelSearch.trim().toLowerCase()
-    return merged
-      .filter((model) => {
-        if (!normalized) {
-          return true
-        }
-        const display = formatModelDisplayName(model).toLowerCase()
-        if (model.toLowerCase().includes(normalized) || display.includes(normalized)) {
-          return true
-        }
-        if (normalized === "patze" && isPatzeDefaultModel(model)) {
-          return true
-        }
-        return false
-      })
-      .map((model) => {
-        const entry = getModelCatalogEntry(model)
-        return {
-          name: formatModelDisplayName(model),
-          description: entry?.description ?? "",
-          value: model,
-        }
-      })
-  }, [currentModel, modelSearch, supportedModels])
+    const levels = getReasoningLevelsForModelId(pendingModelEntry.id)
+    const currentLevel =
+      pendingModelEntry.id.toLowerCase() === currentModel.toLowerCase()
+        ? modelReasoningLevel
+        : null
+    const highlightLevel = currentLevel ?? getDefaultReasoningLevel(pendingModelEntry.id)
+    const defaultLevel = getDefaultReasoningLevel(pendingModelEntry.id)
+    return levels.map((option) => {
+      const item = {
+        label: option.label,
+        description: option.description,
+        isDefault: option.id === defaultLevel,
+        isCurrent: option.id === highlightLevel,
+      }
+      return {
+        name: formatCodexListItemLabel(item),
+        description: option.description,
+        value: option.id,
+      }
+    })
+  }, [currentModel, modelReasoningLevel, pendingModelEntry])
 
   const toggleFeedExpand = useCallback((target: "think" | "diff") => {
     setTranscript((items) => {
@@ -631,21 +849,25 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
   }, [followTranscript])
 
   useKeyboard((key: KeyEvent) => {
-    const character = getInputCharacter(key)
-
     if (key.ctrl && key.name === "c") {
       if (busy && activeAbortRef.current) {
         activeAbortRef.current.abort()
         addEntry("status", "run", "cancelled · stream stopped locally")
         return
       }
+      if (!busy && mode === "input" && input.trim()) {
+        setInput("")
+        return
+      }
       if (!busy) {
         exitApp()
       }
       return
     }
 
-    if (mode === "model" && key.name === "escape") {
+    if ((mode === "model" || mode === "model-reasoning") && key.name === "escape") {
+      setPendingModelEntry(null)
+      setModelSearch("")
       setMode("input")
       return
     }
@@ -653,24 +875,86 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
     if (mode === "model") {
       if (key.name === "backspace" || key.name === "delete") {
         setModelSearch((value) => value.slice(0, -1))
-      } else if (character === "T") {
-        toggleModelPreference("thinking")
-      } else if (character === "F") {
-        toggleModelPreference("fast")
-      } else if (isSearchInput(character)) {
-        setModelSearch((value) => `${value}${character}`)
+        return
+      }
+
+      const searchCharacter = getModelPickerSearchCharacter(key)
+      if (searchCharacter === "T") {
+        toggleModelPickerPreference("thinking")
+        return
+      }
+      if (searchCharacter === "F") {
+        toggleModelPickerPreference("fast")
+        return
+      }
+      if (isModelPickerSearchInput(searchCharacter)) {
+        setModelSearch((value) => `${value}${searchCharacter}`)
+        return
+      }
+
+      if (modelItems.length > 0) {
+        if (
+          applyOpenTuiListNav(key, {
+            count: modelItems.length,
+            index: modelSelectIndex,
+            setIndex: setModelSelectIndex,
+            onEnter: () => {
+              const item = modelItems[modelSelectIndex]
+              if (item) {
+                void selectModel(item.value)
+              }
+            },
+          })
+        ) {
+          return
+        }
       }
       return
     }
 
-    if (mode === "command" && key.name === "escape") {
-      setInput("")
-      setMode("input")
-      return
+    if (mode === "model-reasoning" && reasoningItems.length > 0) {
+      if (
+        applyOpenTuiListNav(key, {
+          count: reasoningItems.length,
+          index: reasoningSelectIndex,
+          setIndex: setReasoningSelectIndex,
+          onEnter: () => {
+            const item = reasoningItems[reasoningSelectIndex]
+            if (item) {
+              void selectReasoning(item.value as ModelReasoningLevel)
+            }
+          },
+        })
+      ) {
+        return
+      }
     }
 
     if (mode === "input") {
       const pageSize = Math.max(1, transcriptViewportRows - 1)
+      const paletteOpen =
+        input.startsWith("/") && !input.includes(" ") && !menuDismissed && commandMenu.items.length > 0
+
+      if (paletteOpen && commandItems.length > 0) {
+        if (
+          applyOpenTuiListNav(key, {
+            count: commandItems.length,
+            index: commandSelectIndex,
+            setIndex: (index) => {
+              setCommandSelectIndex(index)
+              commandSelectIndexRef.current = index
+            },
+            onEnter: () => {
+              const item = commandItems[commandSelectIndexRef.current]
+              if (item) {
+                selectCommandOption(commandSelectIndexRef.current, item)
+              }
+            },
+          })
+        ) {
+          return
+        }
+      }
 
       if (key.ctrl && key.name === "t") {
         toggleFeedExpand("think")
@@ -682,22 +966,64 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
         return
       }
 
-      if (key.shift && (key.name === "return" || key.name === "enter")) {
+      if (key.ctrl && (key.name === "u" || key.name === "k")) {
+        const edit = applySimpleComposerBufferEdit(input, key)
+        if (edit.handled) {
+          setInput(edit.value)
+          resetInputHistoryNav()
+          return
+        }
+      }
+
+      if (isComposerNewlineKey(key.sequence, key)) {
         setInput((value) => `${value}\n`)
+        resetInputHistoryNav()
         return
       }
 
-      if (key.name === "up") {
-        markScrollUnpinned()
-        setScrollOffset((offset) => Math.min(maxScrollOffset, offset + 1))
-      } else if (key.name === "down") {
-        setScrollOffset((offset) => {
-          const next = Math.max(0, offset - 1)
-          if (next === 0) {
-            scrollPinnedRef.current = true
+      if (key.name === "escape") {
+        if (paletteOpen) {
+          setMenuDismissed(true)
+        }
+        return
+      }
+
+      if (key.name === "tab" && paletteOpen) {
+        const command = commandMenu.items[commandSelectIndexRef.current]
+        if (command) {
+          setInput(`/${command.name} `)
+          setMenuDismissed(false)
+        }
+        return
+      }
+
+      const scrollTranscript = transcriptScrollActive() && !paletteOpen
+
+      if (key.name === "up" || (key.name === "k" && !key.ctrl && !key.meta && !paletteOpen)) {
+        if (scrollTranscript) {
+          markScrollUnpinned()
+          setScrollOffset((offset) => Math.min(maxScrollOffset, offset + 1))
+        } else {
+          const previous = historyPrev()
+          if (previous !== null) {
+            setInput(previous)
           }
-          return next
-        })
+        }
+      } else if (key.name === "down" || (key.name === "j" && !key.ctrl && !key.meta && !paletteOpen)) {
+        if (scrollTranscript) {
+          setScrollOffset((offset) => {
+            const next = Math.max(0, offset - 1)
+            if (next === 0) {
+              scrollPinnedRef.current = true
+            }
+            return next
+          })
+        } else {
+          const next = historyNext()
+          if (next !== null) {
+            setInput(next)
+          }
+        }
       } else if (key.name === "pageup") {
         markScrollUnpinned()
         setScrollOffset((offset) => Math.min(maxScrollOffset, offset + pageSize))
@@ -710,19 +1036,36 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
           return next
         })
       } else if (key.name === "home") {
-        markScrollUnpinned()
-        setScrollOffset(maxScrollOffset)
+        if (scrollTranscript) {
+          markScrollUnpinned()
+          setScrollOffset(maxScrollOffset)
+        }
       } else if (key.name === "end") {
-        markScrollPinned()
+        if (scrollTranscript) {
+          markScrollPinned()
+        }
       }
     }
   })
 
   const selectCommandOption = (_index: number, option: SelectOption | null) => {
     const item = option as CommandSelectItem | null
-    if (item?.value) {
-      void runCommand(item.value)
+    if (!item?.value || !slashMenuModule) {
+      return
+    }
+    const command = commandMenu.items.find((entry) => entry.name === item.commandName)
+    if (command && slashMenuModule.commandRequiresArg(command)) {
+      setInput(`/${command.name} `)
+      setMenuDismissed(false)
+      setMode("input")
+      return
     }
+    void runCommand(item.value)
+  }
+
+  const trackCommandSelection = (index: number) => {
+    commandSelectIndexRef.current = index
+    setCommandSelectIndex(index)
   }
 
   const selectModelOption = (_index: number, option: SelectOption | null) => {
@@ -732,6 +1075,28 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
     }
   }
 
+  const selectReasoningOption = (_index: number, option: SelectOption | null) => {
+    const item = option as ModelSelectItem | null
+    if (item?.value) {
+      void selectReasoning(item.value as ModelReasoningLevel)
+    }
+  }
+
+  const footerHint = buildInteractiveFooterHint({
+    busy,
+    slashMenuOpen: slashPaletteOpen,
+    pickerMode:
+      mode === "model"
+        ? "model"
+        : mode === "model-reasoning"
+          ? "model-reasoning"
+          : null,
+    modelPickerPreferences:
+      mode === "model"
+        ? { thinking: modelThinking, fast: modelFast }
+        : undefined,
+  })
+
   if (bootError) {
     return createElement(
       "box",
@@ -788,32 +1153,36 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
           attributes: TextAttributes.DIM,
         })
       : null,
-    mode === "command"
+    mode === "model-reasoning"
       ? createElement(
           "box",
           {
             border: true,
             borderStyle: "single",
-            borderColor: "cyan",
+            borderColor: "magenta",
             flexDirection: "column",
             marginTop: 1,
             paddingX: 1,
           },
           createElement("text", {
-            content: "Commands",
+            content: "Select reasoning effort",
             attributes: TextAttributes.BOLD,
           }),
           createElement("text", {
-            content: "Use arrows and Enter, or Escape to cancel.",
+            content: `${formatModelDisplayName(pendingModelEntry?.id ?? currentModel)} · ↑↓ or j/k · 1-9 · Enter · Esc`,
             fg: "gray",
           }),
-          createElement("select", {
-            focused: mode === "command",
-            height: commandSelectRows,
-            options: commandItems,
-            onSelect: selectCommandOption,
-            showDescription: false,
-          })
+          reasoningItems.length === 0
+            ? createElement("text", { content: "No reasoning levels.", fg: "yellow" })
+            : createElement("select", {
+                focused: mode === "model-reasoning",
+                height: modelSelectRows,
+                options: reasoningItems,
+                selectedIndex: reasoningSelectIndex,
+                onSelect: selectReasoningOption,
+                showDescription: true,
+                showScrollIndicator: true,
+              })
         )
       : mode === "model"
         ? createElement(
@@ -827,100 +1196,177 @@ export function App({ cwd: cwdArg }: { cwd?: string }) {
               paddingX: 1,
             },
             createElement("text", {
-              content: "Select a model",
+              content: "Select Model and Effort",
               attributes: TextAttributes.BOLD,
             }),
             createElement("text", {
-              content: `Type to search · T thinking ${modelThinking ? "on" : "off"} · F fast ${modelFast ? "on" : "off"} · Enter choose · Escape cancel`,
+              content: `Type to search · ${formatModelPickerPreferenceHint(modelThinking, modelFast)} · ↑↓ or j/k · 1-9 · Enter · Esc`,
               fg: "gray",
             }),
             createElement("text", {
               content: `Search: ${modelSearch || "all models"}`,
               fg: "gray",
             }),
+            createElement("text", {
+              content: "Access other models by running patze -m <model> or in config",
+              fg: "gray",
+            }),
             modelItems.length === 0
               ? createElement("text", { content: "No matching models.", fg: "yellow" })
               : createElement("select", {
                   focused: mode === "model",
                   height: modelSelectRows,
                   options: modelItems,
+                  selectedIndex: modelSelectIndex,
                   onSelect: selectModelOption,
+                  showDescription: true,
                   showScrollIndicator: true,
                 })
           )
         : createElement(
             "box",
-            {
-              border: true,
-              borderStyle: "single",
-              borderColor: busy ? "yellow" : "green",
-              flexDirection: "column",
-              marginTop: 1,
-              paddingX: 1,
-            },
+            { flexDirection: "column", flexShrink: 0 },
+            slashPaletteOpen && commandItems.length > 0
+              ? createElement(
+                  "box",
+                  {
+                    border: true,
+                    borderStyle: "single",
+                    borderColor: "cyan",
+                    flexDirection: "column",
+                    marginTop: 1,
+                    paddingX: 1,
+                  },
+                  createElement("text", {
+                    content: "Commands",
+                    attributes: TextAttributes.BOLD,
+                  }),
+                  createElement("text", {
+                    content:
+                      commandMenu.advancedCount > 0
+                        ? `${commandMenu.advancedCount} advanced · Tab · ↑↓ or j/k · 1-9 · Enter · Esc`
+                        : "Tab · ↑↓ or j/k · 1-9 jump · Enter · Esc dismiss",
+                    fg: "gray",
+                  }),
+                  createElement("select", {
+                    focused: false,
+                    height: commandSelectRows,
+                    options: commandItems,
+                    selectedIndex: commandSelectIndex,
+                    onChange: trackCommandSelection,
+                    onSelect: selectCommandOption,
+                    showDescription: true,
+                    showScrollIndicator: true,
+                  })
+                )
+              : null,
             createElement(
               "box",
-              { flexDirection: "row", alignItems: "center" },
+              {
+                border: true,
+                borderStyle: "single",
+                borderColor: busy ? "yellow" : "green",
+                flexDirection: "column",
+                marginTop: 1,
+                paddingX: 1,
+              },
+              createElement(
+                "box",
+                { flexDirection: "row", alignItems: "center" },
+                createElement("text", {
+                  content: "> ",
+                  attributes: TextAttributes.BOLD,
+                }),
+                createElement(TuiInput, {
+                  focused: ready && !busy,
+                  placeholder: busy
+                    ? activityLabel
+                      ? `${["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"][activityFrame % 10]} ${activityLabel}… · Ctrl+C cancel`
+                      : "Ctrl+C cancel · waiting for agent…"
+                    : ready
+                      ? composerPlaceholder
+                      : "Loading Patze Code…",
+                  value: input,
+                  onInput: (value: string) => {
+                    setInput(value)
+                    resetInputHistoryNav()
+                    if (busy) {
+                      return
+                    }
+                    if (!value.startsWith("/")) {
+                      setMenuDismissed(false)
+                    }
+                    if (value.startsWith("/") && !value.includes(" ") && !menuDismissed) {
+                      setCommandSelectIndex(0)
+                      commandSelectIndexRef.current = 0
+                    }
+                  },
+                  onSubmit: submitInput,
+                })
+              ),
               createElement("text", {
-                content: "> ",
-                attributes: TextAttributes.BOLD,
-              }),
-              createElement(TuiInput, {
-                focused: ready && !busy,
-                placeholder: busy
-                  ? activityLabel
-                    ? `${["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"][activityFrame % 10]} ${activityLabel}… · Ctrl+C cancel`
-                    : "Ctrl+C cancel · waiting for agent…"
-                  : ready
-                    ? composerPlaceholder
-                    : "Loading Patze Code…",
-                value: input,
-                onInput: (value: string) => {
-                  setInput(value)
-                  if (busy) {
-                    return
-                  }
-                  if (value.startsWith("/") && !value.includes(" ")) {
-                    setMode("command")
-                  } else {
-                    setMode("input")
-                  }
-                },
-                onSubmit: submitInput,
+                content: `${composerModelLabel} · ${composerPathLabel}`,
+                attributes: TextAttributes.DIM,
               })
-            ),
-            createElement("text", {
-              content: `${composerModelLabel} · ${composerPathLabel}`,
-              attributes: TextAttributes.DIM,
-            })
+            )
           ),
     createElement("text", {
-      content: busy
-        ? "Esc exit · Ctrl+C cancel run · agent executing"
-        : "Esc exit · Ctrl+C quit · / commands · ctrl+t thought · ctrl+d diff · /status",
+      content: footerHint,
       attributes: TextAttributes.DIM,
     })
   )
 }
 
+function applyOpenTuiListNav(
+  key: KeyEvent,
+  input: {
+    count: number
+    index: number
+    setIndex: (index: number) => void
+    onEnter: () => void
+  }
+): boolean {
+  if (input.count <= 0) {
+    return false
+  }
+
+  const digitSource =
+    key.sequence && key.sequence.length === 1 ? key.sequence : (key.name ?? "")
+  const jump = jumpListSelection(digitSource, input.count)
+  if (jump !== null) {
+    input.setIndex(jump)
+    return true
+  }
+
+  const nav = mapListNavKey(key.name, key.sequence)
+  if (nav === "up") {
+    input.setIndex(moveListSelection(input.index, -1, input.count))
+    return true
+  }
+  if (nav === "down") {
+    input.setIndex(moveListSelection(input.index, 1, input.count))
+    return true
+  }
+  if (nav === "enter") {
+    input.onEnter()
+    return true
+  }
+  return false
+}
+
 function trimComposerPrompt(value: string): string {
   return value.replace(/^\s+|\s+$/g, "")
 }
 
-function shortenComposerPath(path: string): string {
-  const normalized = String(path || "").trim().replace(/\\/g, "/")
-  if ([...normalized].length <= 36) {
-    return normalized
-  }
-  const parts = normalized.split("/").filter(Boolean)
-  if (parts.length >= 2) {
-    const tail = `${parts[parts.length - 2]}/${parts[parts.length - 1]}`
-    const candidate = `…/${tail}`
-    if ([...candidate].length <= 36) {
-      return candidate
-    }
+function getModelPickerSearchCharacter(key: KeyEvent): string {
+  if (key.ctrl || key.meta || key.name.length !== 1) {
+    return ""
   }
-  return `…${normalized.slice(-35)}`
+  return key.shift ? key.name.toUpperCase() : key.name
+}
+
+function isModelPickerSearchInput(input: string): boolean {
+  return input.length > 0 && !/[\u0000-\u001F\u007F]/.test(input)
 }
 
 function HeaderLine({ line }: { line: string }) {
@@ -985,31 +1431,8 @@ function partToAttributes(part: TranscriptPart) {
   return attributes
 }
 
-function getInputCharacter(key: KeyEvent): string {
-  if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
-    return key.sequence
-  }
-  return ""
-}
-
-function isSearchInput(character: string): boolean {
-  return Boolean(character && character !== " " && character.charCodeAt(0) >= 32)
-}
-
 type SlashMenuModule = typeof import("../../dist/cli/interactive/slash-menu.js")
 
 let slashMenuModule: SlashMenuModule | null = null
 
-function getCommandItems(input: string): CommandSelectItem[] {
-  if (!slashMenuModule) {
-    return []
-  }
-  const menu = slashMenuModule.computeSlashMenuItems(input)
-  return menu.items.map((command) => ({
-    name: `/${command.name}`,
-    description: command.description,
-    value: `/${command.name}`,
-  }))
-}
-
 export { parseCwdArg }