fix(ui): prevent close button overlapping theme toggle

Docs: link server CLI docs and list flags/env vars

README.md

@@ -44,19 +44,22 @@ Run CodeNomad as a local server and access it via your web browser. Perfect for
 npx @neuralnomads/codenomad --launch
 ```
 
-For dev version
+Full server/CLI documentation (flags + env vars, TLS, auth, remote access):
+- [packages/server/README.md](packages/server/README.md)
+
+To see all available options:
+
+```bash
+npx @neuralnomads/codenomad --help
+```
+
+### 🧪 Dev Releases
+Bleeding-edge builds are published as GitHub pre-releases and are generated automatically from the `dev` branch.
 
 ```bash
 npx @neuralnomads/codenomad-dev --launch
 ```
 
-Dev builds are published as GitHub pre-releases:
-https://github.com/shantur/CodeNomad/releases
-
-Dev releases are bleeding-edge builds, generated automatically every time a new commit is pushed to the `dev` branch.
-
-This command starts the server and opens the web client in your default browser.
-
 ## Highlights
 
 - **Multi-Instance**: Juggle several OpenCode sessions side-by-side with tabs.

packages/server/README.md

@@ -31,6 +31,12 @@ You can run CodeNomad directly without installing it:
 npx @neuralnomads/codenomad --launch
 ```
 
+To list all CLI options:
+
+```sh
+npx @neuralnomads/codenomad --help
+```
+
 On startup, CodeNomad prints two URLs:
 
 - `Local Connection URL : ...` (used by desktop shells)
@@ -44,6 +50,16 @@ npm install -g @neuralnomads/codenomad
 codenomad --launch
 ```
 
+### Install Locally (per-project)
+If you prefer to install CodeNomad into a project and run the local binary:
+
+```sh
+npm install @neuralnomads/codenomad
+npx codenomad --launch
+```
+
+(`npx codenomad ...` will use `./node_modules/.bin/codenomad` when present.)
+
 ### Common Flags
 You can configure the server using flags or environment variables:
 
@@ -63,10 +79,30 @@ You can configure the server using flags or environment variables:
 | `--config <path>` | `CLI_CONFIG` | Config file location |
 | `--launch` | `CLI_LAUNCH` | Open the UI in a Chromium-based browser |
 | `--log-level <level>` | `CLI_LOG_LEVEL` | Logging level (trace, debug, info, warn, error) |
+| `--log-destination <path>` | `CLI_LOG_DESTINATION` | Log destination file (defaults to stdout) |
 | `--username <username>` | `CODENOMAD_SERVER_USERNAME` | Username for CodeNomad's internal auth (default `codenomad`) |
 | `--password <password>` | `CODENOMAD_SERVER_PASSWORD` | Password for CodeNomad's internal auth |
 | `--generate-token` | `CODENOMAD_GENERATE_TOKEN` | Emit a one-time local bootstrap token for desktop flows |
 | `--dangerously-skip-auth` | `CODENOMAD_SKIP_AUTH` | Disable CodeNomad's internal auth (use only behind a trusted perimeter) |
+| `--ui-dir <path>` | `CLI_UI_DIR` | Directory containing the built UI bundle |
+| `--ui-dev-server <url>` | `CLI_UI_DEV_SERVER` | Proxy UI requests to a running dev server (requires `--https=false --http=true`) |
+| `--ui-no-update` | `CLI_UI_NO_UPDATE` | Disable remote UI updates |
+| `--ui-auto-update <enabled>` | `CLI_UI_AUTO_UPDATE` | Enable remote UI updates (true|false) |
+| `--ui-manifest-url <url>` | `CLI_UI_MANIFEST_URL` | Remote UI manifest URL |
+
+### Dev Releases (Advanced)
+If you want the latest bleeding-edge builds (published as GitHub pre-releases), use the dev package:
+
+```sh
+npx @neuralnomads/codenomad-dev --launch
+```
+
+These environment variables control how CodeNomad checks for dev updates:
+
+| Env Variable | Description |
+|-------------|-------------|
+| `CODENOMAD_UPDATE_CHANNEL` | Update channel (use `dev` to enable dev build update checks) |
+| `CODENOMAD_GITHUB_REPO` | GitHub repo used for dev release checks (default `NeuralNomadsAI/CodeNomad`) |
 
 ### HTTP vs HTTPS
 

packages/ui/src/App.tsx

@@ -60,6 +60,7 @@ const App: Component = () => {
     preferences,
     recordWorkspaceLaunch,
     toggleShowThinkingBlocks,
+    toggleKeyboardShortcutHints,
     toggleShowTimelineTools,
     toggleAutoCleanupBlankSessions,
     toggleUsageMetrics,
@@ -80,6 +81,13 @@ const App: Component = () => {
   const [remoteAccessOpen, setRemoteAccessOpen] = createSignal(false)
   const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0)
 
+  createEffect(() => {
+    if (typeof document === "undefined") return
+    const shouldShow =
+      runtimeEnv.host !== "web" && runtimeEnv.platform !== "mobile" && (preferences().showKeyboardShortcutHints ?? true)
+    document.documentElement.dataset.keyboardHints = shouldShow ? "show" : "hide"
+  })
+
   const updateInstanceTabBarHeight = () => {
     if (typeof document === "undefined") return
     const element = document.querySelector<HTMLElement>(".tab-bar-instance")
@@ -293,6 +301,7 @@ const App: Component = () => {
     preferences,
     toggleAutoCleanupBlankSessions,
     toggleShowThinkingBlocks,
+    toggleKeyboardShortcutHints,
     toggleShowTimelineTools,
     toggleUsageMetrics,
     togglePromptSubmitOnEnter,
@@ -451,25 +460,17 @@ const App: Component = () => {
         <Show when={showFolderSelection()}>
           <div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
             <div class="w-full h-full relative">
-              <button
-                onClick={() => {
-                  setShowFolderSelection(false)
-                  setIsAdvancedSettingsOpen(false)
-                  clearLaunchError()
-                }}
-                class="absolute top-4 right-4 z-10 p-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-                title={t("app.launchError.closeTitle")}
-              >
-                <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
               <FolderSelectionView
                 onSelectFolder={handleSelectFolder}
                 isLoading={isSelectingFolder()}
                 advancedSettingsOpen={isAdvancedSettingsOpen()}
                 onAdvancedSettingsOpen={() => setIsAdvancedSettingsOpen(true)}
                 onAdvancedSettingsClose={() => setIsAdvancedSettingsOpen(false)}
+                onClose={() => {
+                  setShowFolderSelection(false)
+                  setIsAdvancedSettingsOpen(false)
+                  clearLaunchError()
+                }}
               />
             </div>
           </div>

packages/ui/src/components/command-palette.tsx

@@ -112,6 +112,10 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
 
   const groupedCommandList = () => processedCommands().groups
   const orderedCommands = () => processedCommands().ordered
+
+  const isCommandDisabled = (command: Command) => {
+    return command.disabled ? Boolean(resolveResolvable(command.disabled)) : false
+  }
   const selectedIndex = createMemo(() => {
     const ordered = orderedCommands()
     if (ordered.length === 0) return -1
@@ -138,10 +142,11 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
       }
       return
     }
- 
+
     const currentId = selectedCommandId()
     if (!currentId || !ordered.some((cmd) => cmd.id === currentId)) {
-      setSelectedCommandId(ordered[0].id)
+      const firstEnabled = ordered.find((cmd) => !isCommandDisabled(cmd))
+      setSelectedCommandId((firstEnabled || ordered[0])?.id ?? null)
     }
   })
 
@@ -195,12 +200,14 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
       if (index < 0 || index >= ordered.length) return
       const command = ordered[index]
       if (!command) return
+      if (isCommandDisabled(command)) return
       props.onExecute(command)
       props.onClose()
     }
   }
 
   function handleCommandClick(command: Command) {
+    if (isCommandDisabled(command)) return
     props.onExecute(command)
     props.onClose()
   }
@@ -265,11 +272,13 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
                       <For each={group.commands}>
                         {(command, localIndex) => {
                           const commandIndex = group.startIndex + localIndex()
+                          const disabled = isCommandDisabled(command)
                           return (
                             <button
                               type="button"
                               data-command-index={commandIndex}
                               onClick={() => handleCommandClick(command)}
+                              disabled={disabled}
                               class={`modal-item ${selectedCommandId() === command.id ? "modal-item-highlight" : ""}`}
                               onPointerMove={(event) => {
                                 if (event.movementX === 0 && event.movementY === 0) return

packages/ui/src/components/filesystem-browser-dialog.tsx

@@ -431,7 +431,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
               </Show>
             </div>
 
-            <div class="panel-footer">
+            <div class="panel-footer keyboard-hints">
               <div class="panel-footer-hints">
                 <div class="flex items-center gap-1.5">
                   <kbd class="kbd">↑</kbd>

packages/ui/src/components/folder-selection-view.tsx

@@ -1,6 +1,6 @@
 import { Select } from "@kobalte/core/select"
 import { Component, createSignal, Show, For, onMount, onCleanup, createEffect } from "solid-js"
-import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, Star, Languages, ChevronDown } from "lucide-solid"
+import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, Star, Languages, ChevronDown, X } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
 import AdvancedSettingsModal from "./advanced-settings-modal"
 import DirectoryBrowserDialog from "./directory-browser-dialog"
@@ -23,6 +23,7 @@ interface FolderSelectionViewProps {
   onAdvancedSettingsOpen?: () => void
   onAdvancedSettingsClose?: () => void
   onOpenRemoteAccess?: () => void
+  onClose?: () => void
 }
 
 const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
@@ -373,7 +374,18 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                 class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
                 onClick={() => props.onOpenRemoteAccess?.()}
               >
-                <MonitorUp class="w-4 h-4" />
+                  <MonitorUp class="w-4 h-4" />
+                </button>
+            </Show>
+            <Show when={props.onClose}>
+              <button
+                type="button"
+                class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
+                onClick={() => props.onClose?.()}
+                aria-label={t("app.launchError.close")}
+                title={t("app.launchError.closeTitle")}
+              >
+                <X class="w-4 h-4" />
               </button>
             </Show>
           </div>
@@ -548,7 +560,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                           : t("folderSelection.browse.button")}
                       </span>
                     </div>
-                    <Kbd shortcut="cmd+n" class="ml-2" />
+                    <Kbd shortcut="cmd+n" class="ml-2 kbd-hint" />
                   </button>
                 </div>
 
@@ -573,7 +585,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
             </div>
 
-            <div class="panel panel-footer shrink-0 hidden sm:block">
+            <div class="panel panel-footer shrink-0 hidden sm:block keyboard-hints">
               <div class="panel-footer-hints">
                 <Show when={folders().length > 0}>
                   <div class="flex items-center gap-1.5">
@@ -591,7 +603,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                   </div>
                 </Show>
                 <div class="flex items-center gap-1.5">
-                  <Kbd shortcut="cmd+n" />
+                  <Kbd shortcut="cmd+n" class="kbd-hint" />
                   <span>{t("folderSelection.hints.browse")}</span>
                 </div>
               </div>

packages/ui/src/components/hint-row.tsx

@@ -8,7 +8,7 @@ interface HintRowProps {
 
 const HintRow: Component<HintRowProps> = (props) => {
   return (
-    <span aria-hidden={props.ariaHidden} class={`text-xs text-muted ${props.class || ""}`}>
+    <span aria-hidden={props.ariaHidden} class={`keyboard-hints text-xs text-muted ${props.class || ""}`}>
       {props.children}
     </span>
   )

packages/ui/src/components/instance-welcome-view.tsx

@@ -502,7 +502,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                     )}
                     <span>{t("instanceWelcome.new.createButton")}</span>
                   </div>
-                  <Kbd shortcut={newSessionShortcutString()} class="ml-2" />
+                  <Kbd shortcut={newSessionShortcutString()} class="ml-2 kbd-hint" />
                 </button>
               </div>
             </div>
@@ -539,7 +539,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
         </div>
       </Show>
 
-      <div class="panel-footer hidden sm:block">
+      <div class="panel-footer hidden sm:block keyboard-hints">
 
         <div class="panel-footer-hints">
           <div class="flex items-center gap-1.5">

packages/ui/src/components/instance/instance-shell2.tsx

@@ -633,7 +633,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                       >
                         {t("instanceShell.commandPalette.button")}
                       </button>
-                      <span class="connection-status-shortcut-hint">
+                      <span class="connection-status-shortcut-hint kbd-hint">
                         <Kbd shortcut="cmd+shift+p" />
                       </span>
                     </div>
@@ -730,7 +730,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
               </div>
 
               <div class="session-toolbar-right flex-1 flex items-center gap-3">
-                <span class="connection-status-shortcut-hint">
+                <span class="connection-status-shortcut-hint kbd-hint">
                   <Kbd shortcut="cmd+shift+p" />
                 </span>
 

packages/ui/src/components/message-item.tsx

@@ -1,5 +1,5 @@
 import { For, Show, createSignal } from "solid-js"
-import { Copy, ExternalLink, Split, Trash2, Undo } from "lucide-solid"
+import { Copy, Split, Trash2, Undo } from "lucide-solid"
 import type { MessageInfo, ClientPart } from "../types/message"
 import { partHasRenderableText } from "../types/message"
 import type { MessageRecord } from "../stores/message-v2/types"
@@ -8,7 +8,6 @@ import { copyToClipboard } from "../lib/clipboard"
 import { useI18n } from "../lib/i18n"
 import { showAlertDialog } from "../stores/alerts"
 import { deleteMessagePart } from "../stores/session-actions"
-import { isTauriHost } from "../lib/runtime-env"
 
 interface MessageItemProps {
   record: MessageRecord
@@ -46,15 +45,6 @@ export default function MessageItem(props: MessageItemProps) {
 
   const messageParts = () => props.parts
 
-  // User messages can temporarily include synthetic helper parts (e.g. tool traces / file reads).
-  // We only want to display the primary prompt text for the user message; other synthetic text
-  // parts should be hidden.
-  const primaryUserTextPartId = () => {
-    if (!isUser()) return null
-    const firstText = messageParts().find((part) => part?.type === "text") as { id?: string } | undefined
-    return typeof firstText?.id === "string" ? firstText.id : null
-  }
-
   const fileAttachments = () =>
     messageParts().filter((part): part is FilePart => part?.type === "file" && typeof (part as FilePart).url === "string")
 
@@ -106,8 +96,7 @@ export default function MessageItem(props: MessageItemProps) {
     }
 
     if (url.startsWith("file://")) {
-      // Local filesystem URLs are not reliably downloadable from the message stream.
-      // We hide the download action for these chips.
+      window.open(url, "_blank", "noopener")
       return
     }
 
@@ -383,7 +372,6 @@ export default function MessageItem(props: MessageItemProps) {
               messageType={props.record.role}
               instanceId={props.instanceId}
               sessionId={props.sessionId}
-              primaryUserTextPartId={primaryUserTextPartId()}
               onRendered={props.onContentRendered}
             />
           )}
@@ -410,20 +398,17 @@ export default function MessageItem(props: MessageItemProps) {
                       <img src={attachment.url} alt={name} class="h-5 w-5 rounded object-cover" />
                     </Show>
                     <span class="truncate max-w-[180px]">{name}</span>
-                    <Show when={!attachment.url?.startsWith("file://")}>
-                      <button
-                        type="button"
-                        onClick={() => void handleAttachmentDownload(attachment)}
-                        class="attachment-download"
-                        aria-label={t("messageItem.attachment.downloadAriaLabel", { name })}
-                        title={t("messageItem.attachment.downloadAriaLabel", { name })}
-                      >
-                        <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" />
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12l4 4 4-4m-4-8v12" />
-                        </svg>
-                      </button>
-                    </Show>
+                    <button
+                      type="button"
+                      onClick={() => void handleAttachmentDownload(attachment)}
+                      class="attachment-download"
+                      aria-label={t("messageItem.attachment.downloadAriaLabel", { name })}
+                    >
+                      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" />
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12l4 4 4-4m-4-8v12" />
+                      </svg>
+                    </button>
 
                     <button
                       type="button"

packages/ui/src/components/message-list-header.tsx

@@ -62,7 +62,7 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
             {t("messageListHeader.commandPalette.button")}
           </button>
           <span class="connection-status-shortcut-hint">
-            <Kbd shortcut="cmd+shift+p" />
+            <Kbd shortcut="cmd+shift+p" class="kbd-hint" />
           </span>
         </div>
       </div>

packages/ui/src/components/message-part.tsx

@@ -13,12 +13,9 @@ interface MessagePartProps {
   messageType?: "user" | "assistant"
   instanceId: string
   sessionId: string
-  // For user messages, keep the primary prompt text visible even when synthetic (optimistic).
-  // Other synthetic text parts (tool traces, read outputs, etc.) should be hidden.
-  primaryUserTextPartId?: string | null
   onRendered?: () => void
  }
-   export default function MessagePart(props: MessagePartProps) {
+  export default function MessagePart(props: MessagePartProps) {
 
   const { isDark } = useTheme()
   const { preferences } = useConfig()
@@ -31,19 +28,8 @@ interface MessagePartProps {
   const shouldHideTextPart = () => {
     const part = props.part
     if (!part || part.type !== "text") return false
-
-    const isSynthetic = Boolean((part as any).synthetic)
-    if (!isSynthetic) return false
-
-    // Keep optimistic user prompts visible; hide other synthetic user helper parts.
-    if (props.messageType === "user") {
-      const primaryId = props.primaryUserTextPartId
-      if (!primaryId) return false
-      return part.id !== primaryId
-    }
-
-    // Hide synthetic assistant text.
-    return true
+    // Keep optimistic user prompts visible; hide synthetic assistant text.
+    return Boolean((part as any).synthetic) && props.messageType !== "user"
   }
 
 

packages/ui/src/components/message-section.tsx

@@ -867,7 +867,7 @@ export default function MessageSection(props: MessageSectionProps) {
                   <ul>
                     <li>
                       <span>{t("messageSection.empty.tips.commandPalette")}</span>
-                      <Kbd shortcut="cmd+shift+p" class="ml-2" />
+                      <Kbd shortcut="cmd+shift+p" class="ml-2 kbd-hint" />
                     </li>
                     <li>{t("messageSection.empty.tips.askAboutCodebase")}</li>
                     <li>

packages/ui/src/components/prompt-input.tsx

@@ -480,7 +480,7 @@ export default function PromptInput(props: PromptInputProps) {
                 </Show>
               </div>
               <Show when={shouldShowOverlay()}>
-                <div class={`prompt-input-overlay ${mode() === "shell" ? "shell-mode" : ""}`}>
+                <div class={`prompt-input-overlay keyboard-hints ${mode() === "shell" ? "shell-mode" : ""}`}>
                   <Show
                     when={props.escapeInDebounce}
                     fallback={

packages/ui/src/components/prompt-input/usePromptKeyDown.ts

@@ -183,25 +183,9 @@ export function usePromptKeyDown(options: UsePromptKeyDownOptions) {
 
         if (isDeletingFromEnd || isDeletingFromStart || isSelected) {
           const currentAttachments = options.getAttachments()
-          const attachment = currentAttachments.find((a) => {
-            if (a.source.type === "agent") {
-              return a.filename === name
-            }
-            if (a.source.type === "file") {
-              // Match either by filename (basename) or by path (for full paths like @docs/file.txt)
-              return (
-                a.filename === name ||
-                a.source.path === name ||
-                a.source.path.endsWith("/" + name) ||
-                a.source.path === name.replace(/\/$/, "")
-              )
-            }
-            if (a.source.type === "text") {
-              // For text attachments (path-only mentions), match by value
-              return a.source.value === name || a.source.value.endsWith("/" + name)
-            }
-            return false
-          })
+          const attachment = currentAttachments.find(
+            (a) => (a.source.type === "file" || a.source.type === "agent") && a.filename === name,
+          )
 
           if (attachment) {
             e.preventDefault()
@@ -221,14 +205,6 @@ export function usePromptKeyDown(options: UsePromptKeyDownOptions) {
               textarea.setSelectionRange(mentionStart, mentionStart)
             }, 0)
 
-            // Check if there are any @ remaining in the text - if not, close the picker
-            if (!newText.includes("@") && options.isPickerOpen()) {
-              options.closePicker()
-              // Clear ignoredAtPositions since we deleted the entire @mention
-              // This ensures typing @ again will open the picker
-              options.setIgnoredAtPositions(new Set())
-            }
-
             return
           }
         }

packages/ui/src/components/prompt-input/usePromptPicker.ts

@@ -1,10 +1,9 @@
 import { createSignal, type Accessor, type Setter } from "solid-js"
 import type { Command as SDKCommand } from "@opencode-ai/sdk/v2"
 import type { Agent } from "../../types/session"
-import { createAgentAttachment, createFileAttachment, createTextAttachment } from "../../types/attachment"
+import { createAgentAttachment, createFileAttachment } from "../../types/attachment"
 import { addAttachment, getAttachments } from "../../stores/attachments"
 import type { PickerMode } from "./types"
-import type { PickerSelectAction } from "../unified-picker"
 
 type PickerItem =
   | { type: "agent"; agent: Agent }
@@ -38,7 +37,7 @@ type PromptPickerController = {
   setIgnoredAtPositions: Setter<Set<number>>
 
   handleInput: (e: Event) => void
-  handlePickerSelect: (item: PickerItem, action: PickerSelectAction) => void
+  handlePickerSelect: (item: PickerItem) => void
   handlePickerClose: () => void
 }
 
@@ -104,11 +103,10 @@ export function usePromptPicker(options: PromptPickerOptions): PromptPickerContr
     setAtPosition(null)
   }
 
-  function handlePickerSelect(item: PickerItem, action: PickerSelectAction) {
+  function handlePickerSelect(item: PickerItem) {
     const textarea = options.getTextarea()
 
     if (item.type === "command") {
-      // For commands, Tab/Enter/Shift+Enter/click all mean "select".
       const name = item.command.name
       const currentPrompt = options.prompt()
 
@@ -130,7 +128,6 @@ export function usePromptPicker(options: PromptPickerOptions): PromptPickerContr
         }
       }, 0)
     } else if (item.type === "agent") {
-      // For agents, Tab/Enter/Shift+Enter/click all mean "select".
       const agentName = item.agent.name
       const existingAttachments = getAttachments(options.instanceId(), options.sessionId())
       const alreadyAttached = existingAttachments.some(
@@ -166,151 +163,75 @@ export function usePromptPicker(options: PromptPickerOptions): PromptPickerContr
       const relativePath = item.file.relativePath ?? displayPath
       const isFolder = item.file.isDirectory ?? displayPath.endsWith("/")
 
+      if (isFolder) {
+        const currentPrompt = options.prompt()
+        const pos = atPosition()
+        const cursorPos = textarea?.selectionStart || 0
+        const folderMention =
+          relativePath === "." || relativePath === ""
+            ? "/"
+            : relativePath.replace(/\/+$/, "") + "/"
+
+        if (pos !== null) {
+          const before = currentPrompt.substring(0, pos + 1)
+          const after = currentPrompt.substring(cursorPos)
+          const newPrompt = before + folderMention + after
+          options.setPrompt(newPrompt)
+          setSearchQuery(folderMention)
+
+          setTimeout(() => {
+            const nextTextarea = options.getTextarea()
+            if (nextTextarea) {
+              const newCursorPos = pos + 1 + folderMention.length
+              nextTextarea.setSelectionRange(newCursorPos, newCursorPos)
+            }
+          }, 0)
+        }
+
+        return
+      }
+
+      const normalizedPath = relativePath.replace(/\/+$/, "") || relativePath
+      const pathSegments = normalizedPath.split("/")
+      const filename = (() => {
+        const candidate = pathSegments[pathSegments.length - 1] || normalizedPath
+        return candidate === "." ? "/" : candidate
+      })()
+
+      const existingAttachments = getAttachments(options.instanceId(), options.sessionId())
+      const alreadyAttached = existingAttachments.some(
+        (att) => att.source.type === "file" && att.source.path === normalizedPath,
+      )
+
+      if (!alreadyAttached) {
+        const attachment = createFileAttachment(
+          normalizedPath,
+          filename,
+          "text/plain",
+          undefined,
+          options.instanceFolder(),
+        )
+        addAttachment(options.instanceId(), options.sessionId(), attachment)
+      }
+
+      const currentPrompt = options.prompt()
       const pos = atPosition()
       const cursorPos = textarea?.selectionStart || 0
 
-      const replaceMentionToken = (mentionText: string, opts?: { trailingSpace?: boolean }) => {
-        if (pos === null) return
-        const currentPrompt = options.prompt()
+      if (pos !== null) {
         const before = currentPrompt.substring(0, pos)
         const after = currentPrompt.substring(cursorPos)
-        const suffix = opts?.trailingSpace ? " " : ""
-        const nextPrompt = before + mentionText + suffix + after
-        options.setPrompt(nextPrompt)
+        const attachmentText = `@${normalizedPath}`
+        const newPrompt = before + attachmentText + " " + after
+        options.setPrompt(newPrompt)
 
         setTimeout(() => {
           const nextTextarea = options.getTextarea()
-          if (!nextTextarea) return
-          const nextCursorPos = pos + mentionText.length + suffix.length
-          nextTextarea.setSelectionRange(nextCursorPos, nextCursorPos)
-        }, 0)
-      }
-
-      const replaceMentionQueryAfterAt = (value: string) => {
-        // Replaces only the query after '@' (keeps the '@' itself). Used for directory navigation.
-        if (pos === null) return
-        const currentPrompt = options.prompt()
-        const before = currentPrompt.substring(0, pos + 1)
-        const after = currentPrompt.substring(cursorPos)
-        const nextPrompt = before + value + after
-        options.setPrompt(nextPrompt)
-
-        setTimeout(() => {
-          const nextTextarea = options.getTextarea()
-          if (!nextTextarea) return
-          const nextCursorPos = pos + 1 + value.length
-          nextTextarea.setSelectionRange(nextCursorPos, nextCursorPos)
-        }, 0)
-      }
-
-      const folderMention =
-        relativePath === "." || relativePath === "" || relativePath === "./"
-          ? "./"
-          : (relativePath.startsWith("./") ? relativePath.replace(/\/+$/, "") + "/" : relativePath.replace(/^\.\//, "").replace(/\/+$/, "") + "/")
-
-      const normalizedFolderPath = (() => {
-        const trimmed = relativePath.replace(/\/+$/, "")
-        // If it's root "./", just return "./"
-        if (trimmed === "" || trimmed === ".") return "./"
-        // Otherwise remove any leading ./ and add ./ prefix
-        return "./" + trimmed.replace(/^\.\//, "")
-      })()
-
-      const addPathOnlyAttachment = (value: string) => {
-        const display = `path: ${value}`
-        const filename = value
-        const existing = getAttachments(options.instanceId(), options.sessionId())
-        const alreadyAttached = existing.some(
-          (att) => att.source.type === "text" && att.source.value === value && att.display === display,
-        )
-        if (!alreadyAttached) {
-          addAttachment(options.instanceId(), options.sessionId(), createTextAttachment(value, display, filename))
-        }
-      }
-
-      if (isFolder) {
-        if (action === "tab") {
-          // TAB on directory: autocomplete directory name and show its contents.
-          replaceMentionQueryAfterAt(folderMention)
-          setSearchQuery(folderMention)
-          return
-        }
-
-        const mentionText = `@${folderMention}`
-
-        if (action === "shiftEnter") {
-          // SHIFT+ENTER on directory: keep @path in prompt, add text attachment, remove @ when sending
-          // Always prefix with ./ for consistency
-          const normalizedFolderPathWithPrefix = normalizedFolderPath.startsWith("./") ? normalizedFolderPath : "./" + normalizedFolderPath
-          addPathOnlyAttachment(normalizedFolderPathWithPrefix)
-          replaceMentionToken(mentionText, { trailingSpace: true })
-        } else {
-          // ENTER/click on directory: attach as a file part pointing at a file:// directory URL.
-          const dirLabel = normalizedFolderPath === "./" ? "./" : normalizedFolderPath.split("/").pop() || normalizedFolderPath
-          const dirFilename = dirLabel.endsWith("/") ? dirLabel : `${dirLabel}/`
-
-          const existingAttachments = getAttachments(options.instanceId(), options.sessionId())
-          const alreadyAttached = existingAttachments.some(
-            (att) => att.source.type === "file" && att.source.path === normalizedFolderPath && att.source.mime === "inode/directory",
-          )
-
-          if (!alreadyAttached) {
-            const attachment = createFileAttachment(
-              normalizedFolderPath,
-              dirFilename,
-              "inode/directory",
-              undefined,
-              options.instanceFolder(),
-            )
-            addAttachment(options.instanceId(), options.sessionId(), attachment)
+          if (nextTextarea) {
+            const newCursorPos = pos + attachmentText.length + 1
+            nextTextarea.setSelectionRange(newCursorPos, newCursorPos)
           }
-
-          replaceMentionToken(mentionText, { trailingSpace: true })
-        }
-      } else {
-        const normalizedPath = relativePath.replace(/\/+$/, "") || relativePath
-
-        if (action === "tab") {
-          // TAB on file: autocomplete the file path but do not attach.
-          replaceMentionToken(`@${normalizedPath}`)
-          setSearchQuery(normalizedPath)
-          return
-        }
-
-        if (action === "shiftEnter") {
-          // SHIFT+ENTER on file: keep @path in prompt, add text attachment, remove @ when sending
-          // Always prefix with ./ for consistency
-          const normalizedPathWithPrefix = normalizedPath.startsWith("./") ? normalizedPath : "./" + normalizedPath
-          addPathOnlyAttachment(normalizedPathWithPrefix)
-          replaceMentionToken(`@${normalizedPathWithPrefix}`, { trailingSpace: true })
-        } else {
-          // ENTER/click on file: attach file (existing behavior).
-          // Always prefix with ./ for consistency
-          const normalizedPathWithPrefix = normalizedPath.startsWith("./") ? normalizedPath : "./" + normalizedPath
-          const pathSegments = normalizedPath.split("/")
-          const filename = (() => {
-            const candidate = pathSegments[pathSegments.length - 1] || normalizedPath
-            return candidate === "." ? "/" : candidate
-          })()
-
-          const existingAttachments = getAttachments(options.instanceId(), options.sessionId())
-          const alreadyAttached = existingAttachments.some(
-            (att) => att.source.type === "file" && att.source.path === normalizedPathWithPrefix,
-          )
-
-          if (!alreadyAttached) {
-            const attachment = createFileAttachment(
-              normalizedPathWithPrefix,
-              filename,
-              "text/plain",
-              undefined,
-              options.instanceFolder(),
-            )
-            addAttachment(options.instanceId(), options.sessionId(), attachment)
-          }
-
-          replaceMentionToken(`@${normalizedPathWithPrefix}`, { trailingSpace: true })
-        }
+        }, 0)
       }
     }
 
@@ -324,28 +245,6 @@ export function usePromptPicker(options: PromptPickerOptions): PromptPickerContr
     const pos = atPosition()
     if (pickerMode() === "mention" && pos !== null) {
       setIgnoredAtPositions((prev) => new Set(prev).add(pos))
-
-      // Remove the partial @mention text from the textarea when ESC is pressed
-      const textarea = options.getTextarea()
-      if (textarea) {
-        const currentPrompt = options.prompt()
-        const cursorPos = textarea.selectionStart
-        // Remove text from @ position to cursor position
-        const before = currentPrompt.substring(0, pos)
-        const after = currentPrompt.substring(cursorPos)
-        options.setPrompt(before + after)
-
-        // Restore cursor position to where @ was
-        setTimeout(() => {
-          const nextTextarea = options.getTextarea()
-          if (nextTextarea) {
-            nextTextarea.setSelectionRange(pos, pos)
-          }
-        }, 0)
-
-        // Clear ignoredAtPositions so typing @ again will work
-        setIgnoredAtPositions(new Set<number>())
-      }
     }
     setShowPicker(false)
     setAtPosition(null)

packages/ui/src/components/session-picker.tsx

@@ -172,7 +172,7 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
                         </span>
                       </Show>
                     </div>
-                    <kbd class="kbd ml-2">
+                    <kbd class="kbd ml-2 kbd-hint">
                       Cmd+Enter
                     </kbd>
                   </button>

packages/ui/src/components/unified-picker.tsx

@@ -51,7 +51,9 @@ function normalizeQuery(rawQuery: string) {
   if (!trimmed) {
     return ""
   }
-  // Don't normalize "." - it's used for workspace root
+  if (trimmed === "." || trimmed === "./") {
+    return ""
+  }
   return trimmed.replace(/^(\.\/)+/, "").replace(/^\/+/, "")
 }
 
@@ -72,12 +74,10 @@ type PickerItem =
   | { type: "file"; file: FileItem }
   | { type: "command"; command: SDKCommand }
 
-export type PickerSelectAction = "click" | "tab" | "enter" | "shiftEnter"
-
 interface UnifiedPickerProps {
   open: boolean
   mode?: "mention" | "command"
-  onSelect: (item: PickerItem, action: PickerSelectAction) => void
+  onSelect: (item: PickerItem) => void
   onClose: () => void
   agents: Agent[]
   commands?: SDKCommand[]
@@ -266,13 +266,6 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
     const workspaceChanged = lastWorkspaceId !== props.workspaceId
     const queryChanged = lastQuery !== props.searchQuery
 
-    if (queryChanged) {
-      // Reset selectedIndex to 0 when query changes to avoid ghost state
-      // This ensures proper highlighting when navigating back to root or changing queries
-      setSelectedIndex(0)
-      resetScrollPosition()
-    }
-
     if (!isInitialized() || workspaceChanged || queryChanged) {
       setIsInitialized(true)
       lastWorkspaceId = props.workspaceId
@@ -348,22 +341,7 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
       return items
     }
 
-    // Add root directory as first item only when query is EXACTLY "." or "./" (not "./docs/")
-    const isExactRootQuery = props.searchQuery === "." || props.searchQuery === "./"
-    if (mode() === "mention" && isExactRootQuery) {
-      const rootFile: FileItem = {
-        path: ".",
-        relativePath: ".",
-        isDirectory: true,
-        isGitFile: false,
-      }
-      items.push({ type: "file", file: rootFile })
-    }
-
-    // Don't show agents for exact root path queries
-    if (!isExactRootQuery) {
-      filteredAgents().forEach((agent) => items.push({ type: "agent", agent }))
-    }
+    filteredAgents().forEach((agent) => items.push({ type: "agent", agent }))
     files().forEach((file) => items.push({ type: "file", file }))
     return items
   }
@@ -378,7 +356,7 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
   }
 
   function handleSelect(item: PickerItem) {
-    props.onSelect(item, "click")
+    props.onSelect(item)
   }
 
   function handleKeyDown(e: KeyboardEvent) {
@@ -401,8 +379,7 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
       e.stopPropagation()
       const selected = items[selectedIndex()]
       if (selected) {
-        const action: PickerSelectAction = e.key === "Tab" ? "tab" : e.shiftKey ? "shiftEnter" : "enter"
-        props.onSelect(selected, action)
+        handleSelect(selected)
       }
     } else if (e.key === "Escape") {
       e.preventDefault()
@@ -466,7 +443,7 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
                   <div
                     class={`dropdown-item ${isSelected() ? "dropdown-item-highlight" : ""}`}
                     data-picker-selected={isSelected()}
-                    onClick={() => props.onSelect({ type: "command", command }, "click")}
+                    onClick={() => handleSelect({ type: "command", command })}
                   >
                     <div class="flex items-start gap-2">
                       <svg class="dropdown-icon-accent h-4 w-4 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -487,7 +464,7 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
             </For>
           </Show>
 
-          <Show when={mode() === "mention" && agentCount() > 0 && !(props.searchQuery === "." || props.searchQuery === "./")}>
+          <Show when={mode() === "mention" && agentCount() > 0}>
             <div class="dropdown-section-header">
               {t("unifiedPicker.sections.agents")}
             </div>
@@ -502,7 +479,7 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
                       itemIndex === selectedIndex() ? "dropdown-item-highlight" : ""
                     }`}
                     data-picker-selected={itemIndex === selectedIndex()}
-                    onClick={() => props.onSelect({ type: "agent", agent }, "click")}
+                    onClick={() => handleSelect({ type: "agent", agent })}
                   >
                     <div class="flex items-start gap-2">
                       <svg
@@ -542,39 +519,10 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
             </For>
           </Show>
 
-          <Show when={mode() === "mention" && (fileCount() > 0 || props.searchQuery === "." || props.searchQuery === "./")}>
+          <Show when={mode() === "mention" && fileCount() > 0}>
             <div class="dropdown-section-header">
               {t("unifiedPicker.sections.files")}
             </div>
-            <Show when={props.searchQuery === "." || props.searchQuery === "./"}>
-              <div
-                class={`dropdown-item py-1.5 ${
-                  selectedIndex() === 0 ? "dropdown-item-highlight" : ""
-                }`}
-                data-picker-selected={selectedIndex() === 0}
-                onClick={() => {
-                  const rootFile: FileItem = {
-                    path: ".",
-                    relativePath: ".",
-                    isDirectory: true,
-                    isGitFile: false,
-                  }
-                  props.onSelect({ type: "file", file: rootFile }, "click")
-                }}
-              >
-                <div class="flex items-center gap-2 text-sm">
-                  <svg class="dropdown-icon h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
-                    />
-                  </svg>
-                  <span class="font-mono">. {t("unifiedPicker.sections.workspaceRoot")}</span>
-                </div>
-              </div>
-            </Show>
             <For each={files()}>
               {(file) => {
                 const itemIndex = allItems().findIndex(
@@ -587,7 +535,7 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
                       itemIndex === selectedIndex() ? "dropdown-item-highlight" : ""
                     }`}
                     data-picker-selected={itemIndex === selectedIndex()}
-                    onClick={() => props.onSelect({ type: "file", file }, "click")}
+                    onClick={() => handleSelect({ type: "file", file })}
                   >
                     <div class="flex items-center gap-2 text-sm">
                       <Show

packages/ui/src/lib/commands.ts

@@ -18,6 +18,7 @@ export interface Command {
   description: Resolvable<string>
   keywords?: Resolvable<string[]>
   shortcut?: KeyboardShortcut
+  disabled?: Resolvable<boolean>
   action: () => void | Promise<void>
   category?: Resolvable<string>
 }

packages/ui/src/lib/hooks/use-commands.ts

@@ -14,6 +14,7 @@ import { getLogger } from "../logger"
 import { requestData } from "../opencode-api"
 import { emitSessionSidebarRequest } from "../session-sidebar-events"
 import { tGlobal } from "../i18n"
+import { runtimeEnv } from "../runtime-env"
 
 const log = getLogger("actions")
 
@@ -28,6 +29,7 @@ function splitKeywords(key: string): string[] {
 export interface UseCommandsOptions {
   preferences: Accessor<Preferences>
   toggleShowThinkingBlocks: () => void
+  toggleKeyboardShortcutHints: () => void
   toggleShowTimelineTools: () => void
   toggleUsageMetrics: () => void
   toggleAutoCleanupBlankSessions: () => void
@@ -454,6 +456,26 @@ export function useCommands(options: UseCommandsOptions) {
       action: options.toggleShowTimelineTools,
     })
 
+    commandRegistry.register({
+      id: "keyboard-shortcut-hints",
+      label: () =>
+        tGlobal(
+          options.preferences().showKeyboardShortcutHints
+            ? "commands.keyboardShortcutHints.label.hide"
+            : "commands.keyboardShortcutHints.label.show",
+        ),
+      description: () =>
+        tGlobal(
+          runtimeEnv.host === "web"
+            ? "commands.keyboardShortcutHints.description.disabledWeb"
+            : "commands.keyboardShortcutHints.description",
+        ),
+      category: "System",
+      keywords: () => splitKeywords("commands.keyboardShortcutHints.keywords"),
+      disabled: () => runtimeEnv.host === "web",
+      action: options.toggleKeyboardShortcutHints,
+    })
+
     commandRegistry.register({
       id: "thinking-default-visibility",
       label: () => {

packages/ui/src/lib/i18n/messages/en/commands.ts

@@ -97,6 +97,12 @@ export const commandMessages = {
   "commands.timelineToolCalls.description": "Toggle tool call entries in the message timeline",
   "commands.timelineToolCalls.keywords": "timeline, tool, toggle",
 
+  "commands.keyboardShortcutHints.label.show": "Show Keyboard Shortcut Hints",
+  "commands.keyboardShortcutHints.label.hide": "Hide Keyboard Shortcut Hints",
+  "commands.keyboardShortcutHints.description": "Show or hide keyboard shortcut hints across the UI",
+  "commands.keyboardShortcutHints.description.disabledWeb": "Disabled in WebUI (shortcut hints are always hidden)",
+  "commands.keyboardShortcutHints.keywords": "shortcut, shortcuts, keyboard, keybind, hints",
+
   "commands.common.expanded": "Expanded",
   "commands.common.collapsed": "Collapsed",
   "commands.common.visible": "Visible",
@@ -158,7 +164,6 @@ export const commandMessages = {
   "unifiedPicker.sections.commands": "COMMANDS",
   "unifiedPicker.sections.agents": "AGENTS",
   "unifiedPicker.sections.files": "FILES",
-  "unifiedPicker.sections.workspaceRoot": "WORKSPACE ROOT",
   "unifiedPicker.badge.subagent": "subagent",
   "unifiedPicker.footer.navigate": "navigate",
   "unifiedPicker.footer.select": "select",

packages/ui/src/lib/i18n/messages/es/commands.ts

@@ -97,6 +97,12 @@ export const commandMessages = {
   "commands.timelineToolCalls.description": "Alternar entradas de llamadas de herramienta en la línea de tiempo de mensajes",
   "commands.timelineToolCalls.keywords": "línea de tiempo, herramienta, alternar",
 
+  "commands.keyboardShortcutHints.label.show": "Mostrar atajos de teclado",
+  "commands.keyboardShortcutHints.label.hide": "Ocultar atajos de teclado",
+  "commands.keyboardShortcutHints.description": "Mostrar u ocultar sugerencias de atajos de teclado en la interfaz",
+  "commands.keyboardShortcutHints.description.disabledWeb": "Desactivado en WebUI (los atajos siempre se ocultan)",
+  "commands.keyboardShortcutHints.keywords": "atajo, atajos, teclado, keybind, pistas",
+
   "commands.common.expanded": "Expandido",
   "commands.common.collapsed": "Colapsado",
   "commands.common.visible": "Visible",

packages/ui/src/lib/i18n/messages/fr/commands.ts

@@ -97,6 +97,12 @@ export const commandMessages = {
   "commands.timelineToolCalls.description": "Afficher/masquer les entrées d'appel d'outil dans la timeline des messages",
   "commands.timelineToolCalls.keywords": "timeline, outil, basculer",
 
+  "commands.keyboardShortcutHints.label.show": "Afficher les raccourcis clavier",
+  "commands.keyboardShortcutHints.label.hide": "Masquer les raccourcis clavier",
+  "commands.keyboardShortcutHints.description": "Afficher ou masquer les indices de raccourcis clavier dans l'interface",
+  "commands.keyboardShortcutHints.description.disabledWeb": "Désactivé en WebUI (les raccourcis sont toujours masqués)",
+  "commands.keyboardShortcutHints.keywords": "raccourci, raccourcis, clavier, keybind, indices",
+
   "commands.common.expanded": "Développé",
   "commands.common.collapsed": "Réduit",
   "commands.common.visible": "Visible",

packages/ui/src/lib/i18n/messages/ja/commands.ts

@@ -97,6 +97,12 @@ export const commandMessages = {
   "commands.timelineToolCalls.description": "メッセージタイムラインのツールコール表示を切り替え",
   "commands.timelineToolCalls.keywords": "タイムライン, ツール, 切り替え, timeline, tool, toggle",
 
+  "commands.keyboardShortcutHints.label.show": "キーボードショートカットのヒントを表示",
+  "commands.keyboardShortcutHints.label.hide": "キーボードショートカットのヒントを非表示",
+  "commands.keyboardShortcutHints.description": "UI 全体のキーボードショートカットヒントを表示/非表示",
+  "commands.keyboardShortcutHints.description.disabledWeb": "WebUI では無効（ヒントは常に非表示）",
+  "commands.keyboardShortcutHints.keywords": "ショートカット, キーボード, ヒント, shortcuts, keyboard, hints",
+
   "commands.common.expanded": "展開",
   "commands.common.collapsed": "折りたたみ",
   "commands.common.visible": "表示",

packages/ui/src/lib/i18n/messages/ru/commands.ts

@@ -97,6 +97,12 @@ export const commandMessages = {
   "commands.timelineToolCalls.description": "Переключить отображение вызовов инструментов в таймлайне сообщений",
   "commands.timelineToolCalls.keywords": "таймлайн, tool, переключить",
 
+  "commands.keyboardShortcutHints.label.show": "Показать подсказки сочетаний",
+  "commands.keyboardShortcutHints.label.hide": "Скрыть подсказки сочетаний",
+  "commands.keyboardShortcutHints.description": "Показать или скрыть подсказки сочетаний клавиш в интерфейсе",
+  "commands.keyboardShortcutHints.description.disabledWeb": "Отключено в WebUI (подсказки всегда скрыты)",
+  "commands.keyboardShortcutHints.keywords": "shortcut, shortcuts, keyboard, keybind, подсказки",
+
   "commands.common.expanded": "Развернуто",
   "commands.common.collapsed": "Свернуто",
   "commands.common.visible": "Видимо",

packages/ui/src/lib/i18n/messages/zh-Hans/commands.ts

@@ -97,6 +97,12 @@ export const commandMessages = {
   "commands.timelineToolCalls.description": "切换消息时间轴中的工具调用条目",
   "commands.timelineToolCalls.keywords": "timeline, tool, toggle, 时间轴, 工具, 切换",
 
+  "commands.keyboardShortcutHints.label.show": "显示键盘快捷键提示",
+  "commands.keyboardShortcutHints.label.hide": "隐藏键盘快捷键提示",
+  "commands.keyboardShortcutHints.description": "显示或隐藏界面中的键盘快捷键提示",
+  "commands.keyboardShortcutHints.description.disabledWeb": "WebUI 中已禁用（提示始终隐藏）",
+  "commands.keyboardShortcutHints.keywords": "shortcuts, keyboard, hints, 快捷键, 键盘, 提示",
+
   "commands.common.expanded": "展开",
   "commands.common.collapsed": "折叠",
   "commands.common.visible": "可见",

packages/ui/src/lib/prompt-placeholders.ts

@@ -1,59 +1,12 @@
-import type { Attachment, FileSource } from "../types/attachment"
+import type { Attachment } from "../types/attachment"
 
 export function resolvePastedPlaceholders(prompt: string, attachments: Attachment[] = []): string {
-  if (!prompt) {
+  if (!prompt || !prompt.includes("[pasted #")) {
     return prompt
   }
 
-  const fileAttachments = new Set(
-    attachments
-      .filter((a): a is Attachment & { source: FileSource } => a.source.type === "file")
-      .map((a) => a.source.path),
-  )
-
-  const pathAttachments = new Set(
-    attachments
-      .filter((a) => a.source.type === "text" && typeof a.display === "string" && a.display.startsWith("path:"))
-      .map((a) => (a.source as { value: string }).value),
-  )
-
-  let result = prompt
-
-  // Step 1: Handle root paths FIRST using unique placeholders
-  // Replace longer pattern first to avoid partial match issues
-  result = result.replace(/@(\.\/)/g, "___ROOT___")
-  result = result.replace(/@(\.)(?!\.)/g, "___ROOT_NOSLASH___")
-  // Note: The regex @(\.)(?!\.) means @. NOT followed by another .
-
-  // Step 2: Build set of non-root paths
-  const allPaths = new Set<string>()
-  for (const p of fileAttachments) {
-    if (p && p !== "." && p !== "./") allPaths.add(p)
-  }
-  for (const p of pathAttachments) {
-    if (p && p !== "." && p !== "./") allPaths.add(p)
-  }
-
-  // Step 3: Replace @path with ./path for non-root paths
-  for (const path of allPaths) {
-    if (!path) continue
-    const withoutPrefix = path.startsWith("./") ? path.slice(2) : path
-    const withPrefix = path.startsWith("./") ? path : "./" + path
-    result = result.replace("@" + withoutPrefix, withPrefix)
-    result = result.replace("@" + withoutPrefix + "/", withPrefix + "/")
-  }
-
-  // Step 4: Convert placeholders back to ./
-  result = result.replace("___ROOT___", "./")
-  result = result.replace("___ROOT_NOSLASH___", "./")
-
-  // Step 5: Resolve [pasted #N] placeholders
-  if (!result.includes("[pasted #")) {
-    return result
-  }
-
   if (!attachments || attachments.length === 0) {
-    return result
+    return prompt
   }
 
   const lookup = new Map<string, string>()
@@ -62,7 +15,7 @@ export function resolvePastedPlaceholders(prompt: string, attachments: Attachmen
     const source = attachment?.source
     if (!source || source.type !== "text") continue
     const display = attachment?.display
-    const value = (source as { value?: string }).value
+    const value = source.value
     if (typeof display !== "string" || typeof value !== "string") continue
     const match = display.match(/pasted #(\d+)/)
     if (!match) continue
@@ -73,10 +26,10 @@ export function resolvePastedPlaceholders(prompt: string, attachments: Attachmen
   }
 
   if (lookup.size === 0) {
-    return result
+    return prompt
   }
 
-  return result.replace(/\[pasted #(\d+)\]/g, (fullMatch) => {
+  return prompt.replace(/\[pasted #(\d+)\]/g, (fullMatch) => {
     const replacement = lookup.get(fullMatch)
     return typeof replacement === "string" ? replacement : fullMatch
   })

packages/ui/src/stores/preferences.tsx

@@ -34,6 +34,7 @@ export type ListeningMode = "local" | "all"
 
 export interface Preferences {
   showThinkingBlocks: boolean
+  showKeyboardShortcutHints: boolean
   thinkingBlocksExpansion: ExpansionPreference
   showTimelineTools: boolean
   promptSubmitOnEnter: boolean
@@ -78,6 +79,7 @@ const MAX_FAVORITE_MODELS = 50
 
 const defaultPreferences: Preferences = {
   showThinkingBlocks: false,
+  showKeyboardShortcutHints: true,
   thinkingBlocksExpansion: "expanded",
   showTimelineTools: true,
   promptSubmitOnEnter: false,
@@ -131,6 +133,7 @@ function normalizePreferences(pref?: Partial<Preferences> & { agentModelSelectio
 
   return {
     showThinkingBlocks: sanitized.showThinkingBlocks ?? defaultPreferences.showThinkingBlocks,
+    showKeyboardShortcutHints: sanitized.showKeyboardShortcutHints ?? defaultPreferences.showKeyboardShortcutHints,
     thinkingBlocksExpansion: sanitized.thinkingBlocksExpansion ?? defaultPreferences.thinkingBlocksExpansion,
     showTimelineTools: sanitized.showTimelineTools ?? defaultPreferences.showTimelineTools,
     promptSubmitOnEnter: sanitized.promptSubmitOnEnter ?? defaultPreferences.promptSubmitOnEnter,
@@ -393,6 +396,10 @@ function toggleShowThinkingBlocks(): void {
   updatePreferences({ showThinkingBlocks: !preferences().showThinkingBlocks })
 }
 
+function toggleKeyboardShortcutHints(): void {
+  updatePreferences({ showKeyboardShortcutHints: !preferences().showKeyboardShortcutHints })
+}
+
 function toggleShowTimelineTools(): void {
   updatePreferences({ showTimelineTools: !preferences().showTimelineTools })
 }
@@ -511,6 +518,7 @@ interface ConfigContextValue {
   setThemePreference: typeof setThemePreference
   updateConfig: typeof updateConfig
   toggleShowThinkingBlocks: typeof toggleShowThinkingBlocks
+  toggleKeyboardShortcutHints: typeof toggleKeyboardShortcutHints
   toggleShowTimelineTools: typeof toggleShowTimelineTools
   toggleUsageMetrics: typeof toggleUsageMetrics
   toggleAutoCleanupBlankSessions: typeof toggleAutoCleanupBlankSessions
@@ -548,6 +556,7 @@ const configContextValue: ConfigContextValue = {
   setThemePreference,
   updateConfig,
   toggleShowThinkingBlocks,
+  toggleKeyboardShortcutHints,
   toggleShowTimelineTools,
   toggleUsageMetrics,
   toggleAutoCleanupBlankSessions,
@@ -608,6 +617,7 @@ export {
   updateConfig,
   updatePreferences,
   toggleShowThinkingBlocks,
+  toggleKeyboardShortcutHints,
   toggleShowTimelineTools,
   toggleAutoCleanupBlankSessions,
   toggleUsageMetrics,

packages/ui/src/stores/session-actions.ts

@@ -140,11 +140,8 @@ async function sendMessage(
         const display: string | undefined = att.display
         const value: unknown = source.value
         const isPastedPlaceholder = typeof display === "string" && /^pasted #\d+/.test(display)
-        const isPathPlaceholder = typeof display === "string" && /^path:/.test(display)
 
-        // Skip path: attachments from being sent as separate parts (content is already in prompt)
-        // Skip pasted placeholders too (already resolved in prompt)
-        if (isPastedPlaceholder || isPathPlaceholder || typeof value !== "string") {
+        if (isPastedPlaceholder || typeof value !== "string") {
           continue
         }
 

packages/ui/src/styles/panels/modal.css

@@ -46,6 +46,11 @@
   color: var(--text-primary);
 }
 
+.modal-item:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
 .modal-list-container[data-pointer-mode="pointer"] .modal-item:hover {
   background-color: var(--surface-hover);
 }

packages/ui/src/styles/utilities.css

@@ -153,6 +153,19 @@
   @apply opacity-50;
 }
 
+/*
+  Shortcut hints are useful on desktop native apps, but are noisy/irrelevant on
+  touch-first devices and in WebUI where browser shortcuts often conflict.
+*/
+html[data-runtime-host="web"] .keyboard-hints,
+html[data-runtime-host="web"] .kbd-hint,
+html[data-runtime-platform="mobile"] .keyboard-hints,
+html[data-runtime-platform="mobile"] .kbd-hint,
+html[data-keyboard-hints="hide"] .keyboard-hints,
+html[data-keyboard-hints="hide"] .kbd-hint {
+  display: none !important;
+}
+
 /* Truncate from the start (keeps end visible; good for paths) */
 .truncate-start {
   overflow: hidden;