use keymap state for layer visibility (#26246)

packages/opencode/src/cli/cmd/tui/component/command-palette.tsx

@@ -0,0 +1,80 @@
+import { createMemo } from "solid-js"
+import { DialogSelect, type DialogSelectRef } from "@tui/ui/dialog-select"
+import { type DialogContext } from "@tui/ui/dialog"
+import {
+  COMMAND_PALETTE_COMMAND,
+  formatKeyBindings,
+  type OpenTuiKeymap,
+  useKeymapSelector,
+  useOpencodeKeymap,
+} from "../keymap"
+import { useTuiConfig } from "../context/tui-config"
+
+type PaletteCommandEntry = ReturnType<OpenTuiKeymap["getCommandEntries"]>[number]
+
+function isVisiblePaletteCommand(command: PaletteCommandEntry["command"]) {
+  return command.hidden !== true && command.name !== COMMAND_PALETTE_COMMAND
+}
+
+function isSuggestedPaletteCommand(entry: PaletteCommandEntry) {
+  const suggested = entry.command.suggested
+  if (typeof suggested === "boolean") return suggested
+  if (typeof suggested === "function") return suggested() === true
+  return false
+}
+
+export function CommandPaletteDialog() {
+  const config = useTuiConfig()
+  const keymap = useOpencodeKeymap()
+  const entries = useKeymapSelector((keymap: OpenTuiKeymap) => {
+    const query = {
+      namespace: "palette",
+    }
+    const reachable = keymap
+      .getCommandEntries({
+        ...query,
+        visibility: "reachable",
+        filter: isVisiblePaletteCommand,
+      })
+    const registeredBindings = keymap.getCommandBindings({
+      visibility: "registered",
+      commands: reachable.map((entry) => entry.command.name),
+    })
+
+    return reachable.map((entry) => ({
+      ...entry,
+      bindings: registeredBindings.get(entry.command.name) ?? entry.bindings,
+    }))
+  })
+  const options = createMemo(() =>
+    entries().map((entry) => ({
+      title: typeof entry.command.title === "string" ? entry.command.title : entry.command.name,
+      description: typeof entry.command.desc === "string" ? entry.command.desc : undefined,
+      category: typeof entry.command.category === "string" ? entry.command.category : undefined,
+      footer: formatKeyBindings(entry.bindings, config),
+      value: entry.command.name,
+      suggested: isSuggestedPaletteCommand(entry),
+      onSelect: (dialog: DialogContext) => {
+        dialog.clear()
+        keymap.dispatchCommand(entry.command.name)
+      },
+    })),
+  )
+
+  let ref: DialogSelectRef<string>
+  const list = () => {
+    if (ref?.filter) return options()
+    return [
+      ...options()
+        .filter((option) => option.suggested)
+        .map((option) => ({
+          ...option,
+          value: `suggested:${option.value}`,
+          category: "Suggested",
+        })),
+      ...options(),
+    ]
+  }
+
+  return <DialogSelect ref={(value) => (ref = value)} title="Commands" options={list()} />
+}

packages/opencode/src/cli/cmd/tui/component/prompt/autocomplete.tsx

@@ -13,12 +13,11 @@ import { getScrollAcceleration } from "../../util/scroll"
 import { useTuiConfig } from "../../context/tui-config"
 import { useTheme, selectedForeground } from "@tui/context/theme"
 import { SplitBorder } from "@tui/component/border"
-import { useCommandPalette } from "../../context/command-palette"
 import { useTerminalDimensions } from "@opentui/solid"
 import { Locale } from "@/util/locale"
 import type { PromptInfo } from "./history"
 import { useFrecency } from "./frecency"
-import { useBindings } from "../../keymap"
+import { useBindings, useCommandSlashes, useOpencodeModeStack } from "../../keymap"
 import { Reference } from "@/reference/reference"
 import { ConfigReference } from "@/config/reference"
 import { displayCharAt, mentionTriggerIndex } from "@/cli/cmd/prompt-display"
@@ -87,7 +86,8 @@ export function Autocomplete(props: {
   const sdk = useSDK()
   const sync = useSync()
   const project = useProject()
-  const command = useCommandPalette()
+  const slashes = useCommandSlashes()
+  const modeStack = useOpencodeModeStack()
   const { theme } = useTheme()
   const dimensions = useTerminalDimensions()
   const frecency = useFrecency()
@@ -101,6 +101,12 @@ export function Autocomplete(props: {
 
   const [positionTick, setPositionTick] = createSignal(0)
 
+  createEffect(() => {
+    if (!store.visible) return
+    const popMode = modeStack.push("autocomplete")
+    onCleanup(popMode)
+  })
+
   createEffect(() => {
     if (store.visible) {
       let lastPos = { x: 0, y: 0, width: 0 }
@@ -367,7 +373,6 @@ export function Autocomplete(props: {
     const { filename, part } = createFilePart(item, lineRange)
     const index = store.visible === "@" ? store.index : props.input().cursorOffset
 
-    command.suspend(false)
     setStore("visible", false)
     setStore("index", index)
     insertPart(filename, part)
@@ -539,7 +544,7 @@ export function Autocomplete(props: {
   )
 
   const commands = createMemo((): AutocompleteOption[] => {
-    const results: AutocompleteOption[] = [...command.slashes()]
+    const results: AutocompleteOption[] = [...slashes()]
 
     for (const serverCommand of sync.data.command) {
       if (serverCommand.source === "skill") continue
@@ -730,7 +735,6 @@ export function Autocomplete(props: {
   }))
 
   function show(mode: "@" | "/") {
-    command.suspend(true)
     setStore({
       visible: mode,
       index: props.input().cursorOffset,
@@ -747,7 +751,6 @@ export function Autocomplete(props: {
         draft.input = props.input().plainText
       })
     }
-    command.suspend(false)
     setStore("visible", false)
   }
 

packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx

@@ -59,8 +59,13 @@ import { DialogWorkspaceUnavailable } from "../dialog-workspace-unavailable"
 import { useArgs } from "@tui/context/args"
 import { Flag } from "@opencode-ai/core/flag/flag"
 import { type WorkspaceStatus } from "../workspace-label"
-import { useCommandPalette } from "../../context/command-palette"
-import { useBindings, useCommandShortcut, useLeaderActive, useOpencodeKeymap } from "../../keymap"
+import {
+  OPENCODE_BASE_MODE,
+  useBindings,
+  useCommandShortcut,
+  useLeaderActive,
+  useOpencodeKeymap,
+} from "../../keymap"
 import { useTuiConfig } from "../../context/tui-config"
 
 export type PromptProps = {
@@ -152,7 +157,6 @@ export function Prompt(props: PromptProps) {
   const status = createMemo(() => sync.data.session_status?.[props.sessionID ?? ""] ?? { type: "idle" })
   const history = usePromptHistory()
   const stash = usePromptStash()
-  const command = useCommandPalette()
   const keymap = useOpencodeKeymap()
   const agentShortcut = useCommandShortcut("agent.cycle")
   const paletteShortcut = useCommandShortcut("command.palette.show")
@@ -629,7 +633,7 @@ export function Prompt(props: PromptProps) {
   }))
 
   useBindings(() => ({
-    enabled: command.matcher,
+    mode: OPENCODE_BASE_MODE,
     bindings: tuiConfig.keybinds.gather("prompt.palette", [
       "prompt.submit",
       "prompt.editor",