From 8eea2a6cb8fd8a00a84ddfa64eba7f7b5d644eaa Mon Sep 17 00:00:00 2001
From: Dax Raad <d@ironbay.co>
Date: Fri, 31 Oct 2025 02:17:09 -0400
Subject: [PATCH] sync

---
 .../cmd/tui/component/prompt/autocomplete.tsx |  8 ++++
 .../src/cli/cmd/tui/ui/dialog-help.tsx        | 39 +++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 packages/opencode/src/cli/cmd/tui/ui/dialog-help.tsx

diff --git a/packages/opencode/src/cli/cmd/tui/component/prompt/autocomplete.tsx b/packages/opencode/src/cli/cmd/tui/component/prompt/autocomplete.tsx
index 424174d96..e78426df9 100644
--- a/packages/opencode/src/cli/cmd/tui/component/prompt/autocomplete.tsx
+++ b/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
diff --git a/packages/opencode/src/cli/cmd/tui/ui/dialog-help.tsx b/packages/opencode/src/cli/cmd/tui/ui/dialog-help.tsx
new file mode 100644
index 000000000..f08e0dabf
--- /dev/null
+++ b/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>
+  )
+}