sync

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

@@ -8,6 +8,8 @@ import { useSync } from "@tui/context/sync"
 import { useTheme } from "@tui/context/theme"
 import { SplitBorder } from "@tui/component/border"
 import { useCommandDialog } from "@tui/component/dialog-command"
+import { useDialog } from "@tui/ui/dialog"
+import { DialogHelp } from "@tui/ui/dialog-help"
 import type { PromptInfo } from "./history"
 
 export type AutocompleteRef = {
@@ -38,6 +40,7 @@ export function Autocomplete(props: {
   const sdk = useSDK()
   const sync = useSync()
   const command = useCommandDialog()
+  const dialog = useDialog()
   const { theme } = useTheme()
 
   const [store, setStore] = createStore({
@@ -245,6 +248,11 @@ export function Autocomplete(props: {
         description: "show status",
         onSelect: () => command.trigger("opencode.status"),
       },
+      {
+        display: "/help",
+        description: "show help",
+        onSelect: () => dialog.replace(() => <DialogHelp />),
+      },
     )
     const max = firstBy(results, [(x) => x.display.length, "desc"])?.display.length
     if (!max) return results

packages/opencode/src/cli/cmd/tui/ui/dialog-help.tsx

@@ -0,0 +1,39 @@
+import { TextAttributes } from "@opentui/core"
+import { useTheme } from "@tui/context/theme"
+import { useDialog } from "./dialog"
+import { useKeyboard } from "@opentui/solid"
+
+export function DialogHelp() {
+  const dialog = useDialog()
+  const { theme } = useTheme()
+
+  useKeyboard((evt) => {
+    if (evt.name === "return" || evt.name === "escape") {
+      dialog.clear()
+    }
+  })
+
+  return (
+    <box paddingLeft={2} paddingRight={2} gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD}>Help</text>
+        <text fg={theme.textMuted}>esc/enter</text>
+      </box>
+      <box paddingBottom={1}>
+        <text fg={theme.textMuted}>
+          Press Ctrl+P to see all available actions and commands in any context.
+        </text>
+      </box>
+      <box flexDirection="row" justifyContent="flex-end" paddingBottom={1}>
+        <box
+          paddingLeft={3}
+          paddingRight={3}
+          backgroundColor={theme.primary}
+          onMouseUp={() => dialog.clear()}
+        >
+          <text fg={theme.background}>ok</text>
+        </box>
+      </box>
+    </box>
+  )
+}