desktop: registry-driven slash commands + first-class /resume & /handoff (#42351)

* desktop: surface /tools, /save, /personality and fix /help skill count Move /tools and /save out of TERMINAL_ONLY_COMMANDS and /personality out of ADVANCED_COMMANDS so they appear in the desktop slash palette and execute via the existing slash.exec → command.dispatch fallback. The backend gateway already accepts these through slash.exec (none are in _PENDING_INPUT_COMMANDS or the skill list), so no backend change is required. Recompute skill_count in filterDesktopCommandsCatalog from the filtered pairs. Previously the /help footer echoed the unfiltered backend total — e.g. "60 skill commands available" while only ~29 actually appeared in the rendered list, because the desktop hides terminal-only, picker-owned, and advanced commands. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * desktop: keep slash popover live while typing args The trigger regex `(?:^|[\s])([@/])([^\s@/]*)$` stopped matching the moment the user typed a space after a slash command, so the popover never showed arg completions for `/personality`, `/tools`, etc. — even though the backend's `complete.slash` already returns them with a `replace_from` indicator. Split the trigger detection so `/` allows args (`/cmd arg1 arg2`) while `@` keeps the strict no-space behavior. Restrict the slash command name to `[a-zA-Z][\w-]*` so file paths like `src/foo/bar` don't accidentally trigger the popover. Rewrite arg-completion items in useSlashCompletions to insert the full `/personality alice` token instead of stranding `/alice`: when `replace_from` is past the command base, prepend the existing prefix to each item's text so the chip serializer produces a coherent replacement. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * cli: complete toolset names after /tools enable|disable SlashCommandCompleter previously only auto-derived the first subcommand level from args_hint, so `/tools enable <tab>` yielded nothing — the user had to remember every toolset key (web, file, spotify, …) and every MCP server prefix. Add `_tools_completions` that handles both stages: subcommand (list|disable|enable) and tool name. Filter by current enable state so `/tools enable <tab>` only offers disabled toolsets and `/tools disable <tab>` only offers enabled ones — no point suggesting a no-op. MCP server prefixes (server:) come from the saved mcp_servers config; per-tool completion under a server would require runtime MCP introspection and is left as follow-up. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * desktop: registry-driven slash commands with first-class pickers Collapse the if/else slash dispatch into one DESKTOP_COMMAND_SPECS table that drives popover suggestions, per-type composer pills, and execution. - /resume, /sessions, /switch: inline session completions (like /skin) plus a "Browse all sessions…" entry that opens a dedicated session picker overlay - /handoff: inline platform completion + handoff.request/handoff.state gateway bridge so desktop reaches CLI parity - colored per-type pills (command/skill/theme) in the composer - strip ANSI and fix width/alignment of slash output in the chat panel * desktop: fold repeated slash session/output boilerplate into one helper runExec, /title, /help and the unavailable case each re-derived the same ensure-session → bail-with-notify → build-renderSlashOutput dance. withSlashOutput() returns {sessionId, render} or null, so each handler is a two-line resolve instead of an eight-line preamble. * desktop: keep backend meta on slash arg completions Arg suggestions (/personality <name>, /tools enable <toolset>, /handoff <platform>) were having their meta overwritten with the parent command's registry description: desktopSlashDescription("/personality none") canonicalizes back to /personality and returns its blurb. Skip the lookup for arg rows so the backend's own display_meta ("clear personality overlay", etc.) survives. * cli: list real personalities in /personality completion _personality_completions resolved load_config().agent.personalities — but that schema has no agent.personalities key, so completion always returned just `none` even though the runtime (load_cli_config().agent.personalities) ships a dozen built-ins (helpful, kawaii, pirate, …). Read from the same source the command actually applies, so `/personality ` surfaces the real options. * desktop: expand bare arg-commands to their options on pick Picking a command like /personality from the slash popover committed it immediately instead of advancing to its argument list. Mark arg-taking commands (/skin, /resume, /handoff, /personality, /tools) in the registry and, when one is picked bare, insert "/cmd " as plain text and re-open the popover on its inline options — mirroring typing "/cmd " by hand. Arg picks (serialized text already contains a space) still commit a single pill. Also realign trigger-popover loading test with the redesigned popover (the /help empty-state hint shows when resolved, not while the spinner is up); the merge from main reintroduced the pre-redesign expectation. * tui_gateway: fold session-db close into a context manager Both handoff RPCs repeated the same `db, close_db = _session_db_handle()` + `finally: if close_db: db.close()` dance. Turn the helper into a `_session_db` contextmanager that owns the close, so callers just `with _session_db(session) as db:`. * desktop: unblock handoff retries and exact resume ids Clear timed-out desktop handoffs through the gateway so retries are not stuck behind a pending row, and let typed /resume session ids bypass the loaded sidebar cache. --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-06-11 01:49:24 +00:00
parent 615ad97928
commit 3ffbdfbcc0
31 changed files with 1973 additions and 537 deletions
@@ -3,32 +3,25 @@ import { ComposerPrimitive } from '@assistant-ui/react'
 import type { ReactNode } from 'react'

 export const COMPLETION_DRAWER_CLASS = [
-  'absolute bottom-[calc(100%+0.25rem)] left-0 z-50',
-  'w-60 max-w-[calc(100vw-2rem)]',
-  'max-h-[min(23rem,calc(100vh-8rem))] overflow-y-auto overscroll-contain',
-  'rounded-lg border border-(--ui-stroke-secondary)',
-  'bg-[color-mix(in_srgb,var(--ui-bg-elevated)_96%,transparent)]',
-  'p-1 text-xs text-popover-foreground shadow-md',
+  'absolute bottom-[calc(100%+0.375rem)] left-0 z-50',
+  'w-80 max-w-[calc(100vw-2rem)]',
+  'max-h-[min(22rem,calc(100vh-8rem))] overflow-y-auto overscroll-contain',
+  'rounded-xl border border-(--ui-stroke-secondary)',
+  'bg-[color-mix(in_srgb,var(--ui-bg-elevated)_97%,transparent)]',
+  'p-1 text-xs text-popover-foreground shadow-lg',
  'backdrop-blur-md'
 ].join(' ')

 export const COMPLETION_DRAWER_BELOW_CLASS = [
-  'absolute left-0 top-[calc(100%+0.25rem)] z-50',
-  'w-60 max-w-[calc(100vw-2rem)]',
-  'max-h-[min(23rem,calc(100vh-8rem))] overflow-y-auto overscroll-contain',
-  'rounded-lg border border-(--ui-stroke-secondary)',
-  'bg-[color-mix(in_srgb,var(--ui-bg-elevated)_96%,transparent)]',
-  'p-1 text-xs text-popover-foreground shadow-md',
+  'absolute left-0 top-[calc(100%+0.375rem)] z-50',
+  'w-80 max-w-[calc(100vw-2rem)]',
+  'max-h-[min(22rem,calc(100vh-8rem))] overflow-y-auto overscroll-contain',
+  'rounded-xl border border-(--ui-stroke-secondary)',
+  'bg-[color-mix(in_srgb,var(--ui-bg-elevated)_97%,transparent)]',
+  'p-1 text-xs text-popover-foreground shadow-lg',
  'backdrop-blur-md'
 ].join(' ')

-export const COMPLETION_DRAWER_ROW_CLASS = [
-  'relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1',
-  'w-full min-w-0 text-left text-xs outline-hidden transition-colors',
-  'hover:bg-(--ui-bg-tertiary)',
-  'data-[highlighted]:bg-(--ui-bg-tertiary) data-[highlighted]:text-foreground'
-].join(' ')
-
 export function ComposerCompletionDrawer({
  adapter,
  ariaLabel,
@@ -5,6 +5,13 @@ export interface CompletionEntry {
  text: string
  display?: unknown
  meta?: unknown
+  /** Optional section label (e.g. "Commands", "Skills"). The popover renders a
+   *  header whenever this changes between consecutive items, so the fetcher must
+   *  emit entries already grouped contiguously. */
+  group?: string
+  /** Optional completion-action id. When set, picking the item runs that action
+   *  (e.g. opening an overlay) instead of inserting a chip + waiting for submit. */
+  action?: string
 }

 export interface CompletionPayload {
@@ -2,12 +2,17 @@ import type { Unstable_TriggerAdapter, Unstable_TriggerItem } from '@assistant-u
 import { useCallback } from 'react'

 import type { HermesGateway } from '@/hermes'
+import { sessionTitle } from '@/lib/chat-runtime'
 import {
  type CommandsCatalogLike,
+  desktopSkinSlashCompletions,
  desktopSlashDescription,
+  type DesktopThemeCommandOption,
  filterDesktopCommandsCatalog,
+  isDesktopSlashExtensionCommand,
  isDesktopSlashSuggestion
 } from '@/lib/desktop-slash-commands'
+import { $sessions } from '@/store/session'

 import type { CompletionEntry, CompletionPayload } from './use-live-completion-adapter'
 import { useLiveCompletionAdapter } from './use-live-completion-adapter'
@@ -16,7 +21,10 @@ interface SlashItemMetadata extends Record<string, string> {
  command: string
  display: string
  meta: string
+  group: string
  rawText: string
+  /** Completion-action id; empty for ordinary insert-a-chip completions. */
+  action: string
 }

 function textValue(value: unknown, fallback = ''): string {
@@ -38,12 +46,21 @@ function commandText(value: string): string {
  return value.startsWith('/') ? value : `/${value}`
 }

+/** How many recent sessions to surface inline before the "Browse all…" entry. */
+const SESSION_INLINE_LIMIT = 7
+
 /** Live `/` completions backed by the gateway's `complete.slash` RPC. */
-export function useSlashCompletions(options: { gateway: HermesGateway | null }): {
+export function useSlashCompletions(options: {
+  gateway: HermesGateway | null
+  /** Desktop theme list — `/skin` is owned client-side, so its arg completions
+   *  come from here, not the backend (whose skin list is CLI/TUI-only). */
+  skinThemes?: DesktopThemeCommandOption[]
+  activeSkin?: string
+}): {
  adapter: Unstable_TriggerAdapter
  loading: boolean
 } {
-  const { gateway } = options
+  const { gateway, skinThemes, activeSkin } = options
  const enabled = Boolean(gateway)

  const fetcher = useCallback(
@@ -54,34 +71,136 @@ export function useSlashCompletions(options: { gateway: HermesGateway | null }):

      const text = `/${query}`

+      // The desktop owns /skin entirely (client-side theme context). Surface its
+      // theme list inside this single popover instead of a bespoke one, and skip
+      // the backend skin completions (which describe CLI/TUI skins that don't
+      // apply here). Matches once we're past `/skin ` into the arg stage.
+      const skinArg = /^\/skin\s+(.*)$/is.exec(text)
+
+      if (skinArg && skinThemes) {
+        const items = desktopSkinSlashCompletions(skinThemes, activeSkin ?? '', skinArg[1] ?? '').map(entry => ({
+          text: entry.text,
+          display: entry.display,
+          meta: entry.meta,
+          group: 'Themes'
+        }))
+
+        return { items, query }
+      }
+
+      // /resume (and its aliases) completes recent sessions inline — the same
+      // client-side list the picker overlay shows — instead of the backend
+      // (whose /resume opens an interactive TUI picker we can't render here).
+      const sessionArg = /^\/(?:resume|sessions|switch)\s+(.*)$/is.exec(text)
+
+      if (sessionArg) {
+        const needle = (sessionArg[1] ?? '').trim().toLowerCase()
+
+        const matches = (
+          needle
+            ? $sessions.get().filter(
+                session =>
+                  sessionTitle(session).toLowerCase().includes(needle) ||
+                  (session.preview ?? '').toLowerCase().includes(needle) ||
+                  session.id.toLowerCase().includes(needle)
+              )
+            : $sessions.get()
+        ).slice(0, SESSION_INLINE_LIMIT)
+
+        const items: CompletionEntry[] = matches.map(session => ({
+          text: `/resume ${session.id}`,
+          display: sessionTitle(session),
+          meta: (session.preview ?? '').trim(),
+          group: 'Sessions'
+        }))
+
+        // Trailing "more" affordance (Cursor-style): picking it opens the full
+        // session picker overlay directly. `text` stays a bare `/resume` so that
+        // submitting it (Enter) still opens the overlay if the action is skipped.
+        items.push({
+          text: '/resume',
+          display: 'Browse all sessions…',
+          meta: '',
+          group: 'Sessions',
+          action: 'session-picker'
+        })
+
+        return { items, query }
+      }
+
      try {
        if (!query) {
          const catalog = filterDesktopCommandsCatalog(await gateway.request<CommandsCatalogLike>('commands.catalog'))

-          const items = (catalog.pairs ?? []).map(([command, meta]) => ({
-            text: command,
-            display: command,
-            meta
-          }))
+          // Prefer the categorized layout so the popover renders section headers
+          // (Session, Tools & Skills, ...). Fall back to the flat list when the
+          // backend didn't categorize.
+          const sections = catalog.categories?.length
+            ? catalog.categories
+            : [{ name: '', pairs: catalog.pairs ?? [] }]
+
+          const items = sections.flatMap(section =>
+            section.pairs.map(([command, meta]) => ({
+              text: command,
+              display: command,
+              group: section.name || undefined,
+              meta
+            }))
+          )

          return { items, query }
        }

-        const result = await gateway.request<{ items?: CompletionEntry[] }>('complete.slash', { text })
+        const result = await gateway.request<{ items?: CompletionEntry[]; replace_from?: number }>(
+          'complete.slash',
+          { text }
+        )

-        const items = (result.items ?? [])
-          .filter(item => isDesktopSlashSuggestion(item.text))
+        // Arg-completion items (replace_from > 1) carry just the arg stub —
+        // e.g. complete.slash returns `{text: "alice"}` for `/personality alic`
+        // with replace_from = 14. Rewrite those entries so the popover inserts
+        // the full `/personality alice` token instead of stranding `/alice`.
+        const replaceFrom = typeof result.replace_from === 'number' ? result.replace_from : 1
+        const isArgCompletion = replaceFrom > 1
+        const prefix = isArgCompletion ? text.slice(0, replaceFrom) : ''
+
+        const decorated = (result.items ?? [])
+          .map(item => {
+            if (!isArgCompletion) {
+              return item
+            }
+
+            const argText = typeof item.text === 'string' ? item.text : ''
+
+            return { ...item, text: `${prefix}${argText}` }
+          })
+          .filter(item => isArgCompletion || isDesktopSlashSuggestion(item.text))
          .map(item => ({
            ...item,
-            meta: desktopSlashDescription(item.text, textValue(item.meta))
+            // Arg suggestions (e.g. `/handoff <platform>`) live under one
+            // header; otherwise split skills out from built-in commands.
+            group: isArgCompletion ? 'Options' : isDesktopSlashExtensionCommand(item.text) ? 'Skills' : 'Commands',
+            // Arg items carry their own meta (the personality/toolset/platform
+            // blurb). Only command rows get the registry description — looking
+            // one up for `/personality none` would clobber it with the parent
+            // command's text.
+            meta: isArgCompletion ? textValue(item.meta) : desktopSlashDescription(item.text, textValue(item.meta))
          }))

+        // Keep each group contiguous so headers render once: Commands before
+        // Skills (stable within a group, preserving backend relevance order).
+        const groupOrder = ['Commands', 'Skills', 'Options']
+
+        const items = isArgCompletion
+          ? decorated
+          : [...decorated].sort((a, b) => groupOrder.indexOf(a.group) - groupOrder.indexOf(b.group))
+
        return { items, query }
      } catch {
        return { items: [], query }
      }
    },
-    [gateway]
+    [gateway, skinThemes, activeSkin]
  )

  const toItem = useCallback((entry: CompletionEntry, index: number): Unstable_TriggerItem => {
@@ -93,6 +212,8 @@ export function useSlashCompletions(options: { gateway: HermesGateway | null }):
      command,
      display,
      meta,
+      group: textValue(entry.group),
+      action: textValue(entry.action),
      // Provide rawText so hermesDirectiveFormatter.serialize uses the
      // direct-insertion path instead of the legacy @type:id fallback.
      // Without this, the item.id (which includes a "|index" suffix for
@@ -13,13 +13,14 @@ import {
  useState
 } from 'react'

-import { hermesDirectiveFormatter } from '@/components/assistant-ui/directive-text'
+import { hermesDirectiveFormatter, type SlashChipKind } from '@/components/assistant-ui/directive-text'
 import { Button } from '@/components/ui/button'
 import { useMediaQuery } from '@/hooks/use-media-query'
 import { useResizeObserver } from '@/hooks/use-resize-observer'
 import { useI18n } from '@/i18n'
 import { chatMessageText } from '@/lib/chat-messages'
 import { SLASH_COMMAND_RE } from '@/lib/chat-runtime'
+import { desktopSlashCommandTakesArgs } from '@/lib/desktop-slash-commands'
 import { DATA_IMAGE_URL_RE } from '@/lib/embedded-images'
 import { triggerHaptic } from '@/lib/haptics'
 import { cn } from '@/lib/utils'
@@ -40,8 +41,9 @@ import {
  shouldAutoDrainOnSettle,
  updateQueuedPrompt
 } from '@/store/composer-queue'
-import { $gatewayState, $messages } from '@/store/session'
+import { $gatewayState, $messages, setSessionPickerOpen } from '@/store/session'
 import { $threadScrolledUp } from '@/store/thread-scroll'
+import { useTheme } from '@/themes'

 import { extractDroppedFiles, HERMES_PATHS_MIME, partitionDroppedFiles } from '../hooks/use-composer-actions'

@@ -74,9 +76,9 @@ import {
  placeCaretEnd,
  refChipElement,
  renderComposerContents,
-  RICH_INPUT_SLOT
+  RICH_INPUT_SLOT,
+  slashChipElement
 } from './rich-editor'
-import { SkinSlashPopover } from './skin-slash-popover'
 import { detectTrigger, extractClipboardImageBlobs, textBeforeCaret, type TriggerState } from './text-utils'
 import { ComposerTriggerPopover } from './trigger-popover'
 import type { ChatBarProps } from './types'
@@ -95,6 +97,30 @@ const COMPOSER_FADE_BACKGROUND =

 const pickPlaceholder = (pool: readonly string[]) => pool[Math.floor(Math.random() * pool.length)]

+/** Completion items can carry an `action` (set in use-slash-completions) that
+ *  runs a side effect on pick instead of inserting a chip — e.g. the session
+ *  picker's "Browse all…" entry opens the overlay. Table-driven so new action
+ *  items are a registry row, not a composer branch. */
+const COMPLETION_ACTIONS: Record<string, () => void> = {
+  'session-picker': () => setSessionPickerOpen(true)
+}
+
+/** Map a picked `/` completion to its pill accent. Driven by the completion
+ *  group set in use-slash-completions (Skills / Themes / Commands|Options). */
+function slashChipKindForItem(item: Unstable_TriggerItem): SlashChipKind {
+  const group = (item.metadata as { group?: unknown } | undefined)?.group
+
+  if (group === 'Skills') {
+    return 'skill'
+  }
+
+  if (group === 'Themes') {
+    return 'theme'
+  }
+
+  return 'command'
+}
+
 interface QueueEditState {
  attachments: ComposerAttachment[]
  draft: string
@@ -162,8 +188,9 @@ export function ChatBar({

  const narrow = useMediaQuery('(max-width: 30rem)')

+  const { availableThemes, themeName } = useTheme()
  const at = useAtCompletions({ gateway: gateway ?? null, sessionId: sessionId ?? null, cwd: cwd ?? null })
-  const slash = useSlashCompletions({ gateway: gateway ?? null })
+  const slash = useSlashCompletions({ activeSkin: themeName, gateway: gateway ?? null, skinThemes: availableThemes })

  const stacked = expanded || narrow || tight
  const trimmedDraft = draft.trim()
@@ -171,10 +198,12 @@ export function ChatBar({
  const canSubmit = busy || hasComposerPayload
  const editingQueuedPrompt = queueEdit ? (queuedPrompts.find(entry => entry.id === queueEdit.entryId) ?? null) : null
  const busyAction = busy && hasComposerPayload ? 'queue' : 'stop'
+
  // Steer only makes sense mid-turn, text-only (the gateway can't carry images
  // into a tool result) and never for a slash command (those execute inline).
  const canSteer =
    busy && !!onSteer && attachments.length === 0 && trimmedDraft.length > 0 && !SLASH_COMMAND_RE.test(trimmedDraft)
+
  const showHelpHint = draft === '?'

  const { t } = useI18n()
@@ -462,12 +491,6 @@ export function ChatBar({
    })
  }, [])

-  const selectSkinSlashCommand = (command: string) => {
-    draftRef.current = command
-    aui.composer().setText(command)
-    requestMainFocus()
-  }
-
  const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
    const imageBlobs = extractClipboardImageBlobs(event.clipboardData)

@@ -620,16 +643,50 @@ export function ChatBar({
      return
    }

+    // Action items (e.g. "Browse all sessions…") run a side effect instead of
+    // inserting a chip: strip the typed trigger token, then fire the action.
+    const completionAction = (item.metadata as { action?: unknown } | undefined)?.action
+    const runAction = typeof completionAction === 'string' ? COMPLETION_ACTIONS[completionAction] : undefined
+
+    if (runAction) {
+      const current = composerPlainText(editor)
+      const prefix = current.slice(0, Math.max(0, current.length - trigger.tokenLength))
+
+      renderComposerContents(editor, prefix)
+      placeCaretEnd(editor)
+      draftRef.current = composerPlainText(editor)
+      aui.composer().setText(draftRef.current)
+      closeTrigger()
+      runAction()
+      requestMainFocus()
+
+      return
+    }
+
    const serialized = hermesDirectiveFormatter.serialize(item)
    const starter = serialized.endsWith(':')
+
+    // Picking a bare arg-taking command (e.g. `/personality`) shouldn't commit
+    // it — expand to its options step so the popover shows the inline list, just
+    // as typing `/personality ` by hand would. A serialized value with a space is
+    // already an arg pick (`/personality alice`), so it commits normally.
+    const command = (item.metadata as { command?: string } | undefined)?.command ?? ''
+
+    const expandsToArgs =
+      trigger.kind === '/' && !serialized.includes(' ') && desktopSlashCommandTakesArgs(command)
+
    const text = starter || serialized.endsWith(' ') ? serialized : `${serialized} `
    const directive = !starter && serialized.match(/^@([^:]+):(.+)$/)
+    // No pill while expanding — the bare command stays plain text until an arg
+    // is picked, at which point a single pill is emitted for the full command.
+    const slashKind = !expandsToArgs && trigger.kind === '/' ? slashChipKindForItem(item) : null
+    const keepTriggerOpen = starter || expandsToArgs

    const finish = () => {
      draftRef.current = composerPlainText(editor)
      aui.composer().setText(draftRef.current)
      requestMainFocus()
-      starter ? window.setTimeout(refreshTrigger, 0) : closeTrigger()
+      keepTriggerOpen ? window.setTimeout(refreshTrigger, 0) : closeTrigger()
    }

    const sel = window.getSelection()
@@ -639,7 +696,20 @@ export function ChatBar({

    if (!sel || !range || node?.nodeType !== Node.TEXT_NODE || offset < trigger.tokenLength) {
      const current = composerPlainText(editor)
-      renderComposerContents(editor, `${current.slice(0, Math.max(0, current.length - trigger.tokenLength))}${text}`)
+      const prefix = current.slice(0, Math.max(0, current.length - trigger.tokenLength))
+
+      if (slashKind) {
+        // Two-step arg picks (e.g. `/handoff` pill already inserted, now picking
+        // the platform) land here because the caret sits past a contenteditable
+        // chip. Rebuild the prefix and re-emit a single pill for the full command.
+        renderComposerContents(editor, prefix)
+        editor.append(slashChipElement(serialized, slashKind), document.createTextNode(' '))
+        placeCaretEnd(editor)
+
+        return finish()
+      }
+
+      renderComposerContents(editor, `${prefix}${text}`)
      placeCaretEnd(editor)

      return finish()
@@ -650,8 +720,13 @@ export function ChatBar({
    replaceRange.setEnd(node, offset)
    replaceRange.deleteContents()

-    if (directive) {
-      const chip = refChipElement(directive[1], directive[2])
+    const chip = slashKind
+      ? slashChipElement(serialized, slashKind)
+      : directive
+        ? refChipElement(directive[1], directive[2])
+        : null
+
+    if (chip) {
      const space = document.createTextNode(' ')
      const fragment = document.createDocumentFragment()
      fragment.append(chip, space)
@@ -1515,7 +1590,6 @@ export function ChatBar({
              onPick={replaceTriggerWithChip}
            />
          )}
-          <SkinSlashPopover draft={draft} onSelect={selectSkinSlashCommand} />
          {activeQueueSessionKey && queuedPrompts.length > 0 && (
            // Out of flow so the queue never inflates the composer's measured
            // height (that drives thread bottom padding → chat resizes on
@@ -10,7 +10,10 @@ import {
  DIRECTIVE_CHIP_CLASS,
  directiveIconElement,
  directiveIconSvg,
-  formatRefValue
+  formatRefValue,
+  slashChipClass,
+  type SlashChipKind,
+  slashIconElement
 } from '@/components/assistant-ui/directive-text'

 export const RICH_INPUT_SLOT = 'composer-rich-input'
@@ -77,6 +80,24 @@ export function refChipElement(kind: string, rawValue: string, displayLabel?: st
  return chip
 }

+/** A non-editable pill for a picked slash command (`/skin nous`, `/tropes`).
+ *  `data-ref-text` carries the literal command so `composerPlainText` round-trips
+ *  it back to the exact text that gets submitted. */
+export function slashChipElement(command: string, kind: SlashChipKind, label?: string) {
+  const chip = document.createElement('span')
+  const text = document.createElement('span')
+
+  chip.contentEditable = 'false'
+  chip.dataset.refText = command
+  chip.dataset.slashKind = kind
+  chip.className = slashChipClass(kind)
+  text.className = 'truncate'
+  text.textContent = label || command
+  chip.append(slashIconElement(kind), text)
+
+  return chip
+}
+
 function appendTextWithBreaks(target: DocumentFragment | HTMLElement, text: string) {
  const lines = text.split('\n')

@@ -1,61 +0,0 @@
-import { useI18n } from '@/i18n'
-import { desktopSkinSlashCompletions } from '@/lib/desktop-slash-commands'
-import { triggerHaptic } from '@/lib/haptics'
-import { useTheme } from '@/themes/context'
-
-import { COMPLETION_DRAWER_CLASS, COMPLETION_DRAWER_ROW_CLASS, CompletionDrawerEmpty } from './completion-drawer'
-
-interface SkinSlashPopoverProps {
-  draft: string
-  onSelect: (command: string) => void
-}
-
-export function SkinSlashPopover({ draft, onSelect }: SkinSlashPopoverProps) {
-  const { t } = useI18n()
-  const c = t.composer
-  const { availableThemes, themeName } = useTheme()
-  const match = draft.match(/^\/skin\s+(\S*)$/i)
-
-  if (!match) {
-    return null
-  }
-
-  const items = desktopSkinSlashCompletions(availableThemes, themeName, match[1] ?? '')
-
-  return (
-    <div
-      aria-label={c.themeSuggestions}
-      className={COMPLETION_DRAWER_CLASS}
-      data-slot="composer-skin-completion-drawer"
-      data-state="open"
-      role="listbox"
-    >
-      <div className="grid gap-0.5 pt-0.5">
-        {items.length === 0 ? (
-          <CompletionDrawerEmpty title={c.noMatchingThemes}>
-            {c.themeTryPre}
-            <span className="font-mono text-foreground/80">/skin list</span>
-            {c.themeTryPost}
-          </CompletionDrawerEmpty>
-        ) : (
-          items.map(item => (
-            <button
-              className={COMPLETION_DRAWER_ROW_CLASS}
-              key={item.text}
-              onClick={() => {
-                triggerHaptic('selection')
-                onSelect(item.text)
-              }}
-              onMouseDown={event => event.preventDefault()}
-              role="option"
-              type="button"
-            >
-              <span className="shrink-0 font-mono font-medium leading-5 text-foreground">{item.display}</span>
-              <span className="min-w-0 truncate leading-5 text-muted-foreground/80">{item.meta}</span>
-            </button>
-          ))
-        )}
-      </div>
-    </div>
-  )
-}
@@ -22,6 +22,33 @@ describe('detectTrigger', () => {
  it('returns null for plain text', () => {
    expect(detectTrigger('hello there')).toBeNull()
  })
+
+  it('keeps the slash trigger live while typing args', () => {
+    expect(detectTrigger('/personality ')).toEqual({
+      kind: '/',
+      query: 'personality ',
+      tokenLength: 13
+    })
+    expect(detectTrigger('/personality alic')).toEqual({
+      kind: '/',
+      query: 'personality alic',
+      tokenLength: 17
+    })
+    expect(detectTrigger('/tools enable foo')).toEqual({
+      kind: '/',
+      query: 'tools enable foo',
+      tokenLength: 17
+    })
+  })
+
+  it('does not treat file-style paths as slash triggers', () => {
+    expect(detectTrigger('src/foo/bar')).toBeNull()
+    expect(detectTrigger('/path/to/file')).toBeNull()
+  })
+
+  it('still anchors at-mention triggers strictly at the token edge', () => {
+    expect(detectTrigger('@file:path with space')).toBeNull()
+  })
 })

 describe('extractClipboardImageBlobs', () => {
@@ -6,7 +6,13 @@ export interface TriggerState {
  tokenLength: number
 }

-const TRIGGER_RE = /(?:^|[\s])([@/])([^\s@/]*)$/
+// `@` triggers stop at the first whitespace — `@file:path` and `@diff` are
+// single tokens. `/` triggers keep going so the popover stays live while the
+// user types args (`/personality alic` → arg completer suggests `alice`).
+// Restricting the slash command name to `[a-zA-Z][\w-]*` avoids matching file
+// paths like `src/foo/bar`.
+const AT_TRIGGER_RE = /(?:^|[\s])(@)([^\s@/]*)$/
+const SLASH_TRIGGER_RE = /(?:^|[\s])(\/)((?:[a-zA-Z][\w-]*(?:\s+\S*)*)?)$/

 /** Stable key for paste dedupe — `items` and `files` often mirror the same image as different objects. */
 export function blobDedupeKey(blob: Blob): string {
@@ -97,11 +103,17 @@ export function textBeforeCaret(editor: HTMLDivElement): string | null {
 }

 export function detectTrigger(textBefore: string): TriggerState | null {
-  const match = TRIGGER_RE.exec(textBefore)
+  const slash = SLASH_TRIGGER_RE.exec(textBefore)

-  if (!match) {
-    return null
+  if (slash) {
+    return { kind: '/', query: slash[2], tokenLength: 1 + slash[2].length }
  }

-  return { kind: match[1] as '@' | '/', query: match[2], tokenLength: 1 + match[2].length }
+  const at = AT_TRIGGER_RE.exec(textBefore)
+
+  if (at) {
+    return { kind: '@', query: at[2], tokenLength: 1 + at[2].length }
+  }
+
+  return null
 }
@@ -34,9 +34,17 @@ describe('ComposerTriggerPopover i18n', () => {
  })

  it('renders localized loading copy for slash commands', () => {
-    const { container } = renderPopover('/', true)
+    renderPopover('/', true)

+    // While loading the popover shows only the spinner + loading copy — the
+    // `/help` empty-state hint is reserved for the resolved (not-loading) state.
    expect(screen.getByText('查找中…')).toBeTruthy()
+  })
+
+  it('renders the slash empty-state hint when not loading', () => {
+    const { container } = renderPopover('/')
+
+    expect(screen.getByText('没有匹配项。')).toBeTruthy()
    expect(container.textContent).toContain('/help')
  })
 })
@@ -1,5 +1,7 @@
 import type { Unstable_TriggerItem } from '@assistant-ui/core'
+import { Fragment } from 'react'

+import { BrailleSpinner } from '@/components/ui/braille-spinner'
 import { Codicon } from '@/components/ui/codicon'
 import { useI18n } from '@/i18n'
 import { cn } from '@/lib/utils'
@@ -7,7 +9,6 @@ import { cn } from '@/lib/utils'
 import {
  COMPLETION_DRAWER_BELOW_CLASS,
  COMPLETION_DRAWER_CLASS,
-  COMPLETION_DRAWER_ROW_CLASS,
  CompletionDrawerEmpty
 } from './completion-drawer'

@@ -23,11 +24,7 @@ const AT_ICON_BY_TYPE: Record<string, string> = {
  url: 'globe'
 }

-function completionIcon(kind: '@' | '/', item: Unstable_TriggerItem) {
-  if (kind === '/') {
-    return 'terminal'
-  }
-
+function atIcon(item: Unstable_TriggerItem) {
  const meta = item.metadata as { rawText?: string } | undefined
  const raw = meta?.rawText || item.label

@@ -42,6 +39,18 @@ function completionIcon(kind: '@' | '/', item: Unstable_TriggerItem) {
  return AT_ICON_BY_TYPE[item.type] || AT_ICON_BY_TYPE.simple
 }

+interface RowMeta {
+  display?: string
+  group?: string
+  meta?: string
+}
+
+const ROW_BASE_CLASS = [
+  'relative flex w-full cursor-default select-none rounded-md px-2 py-1 text-left',
+  'outline-hidden transition-colors hover:bg-(--ui-bg-tertiary)',
+  'data-[highlighted]:bg-(--ui-bg-tertiary) data-[highlighted]:text-foreground'
+].join(' ')
+
 interface ComposerTriggerPopoverProps {
  activeIndex: number
  items: readonly Unstable_TriggerItem[]
@@ -63,6 +72,9 @@ export function ComposerTriggerPopover({
 }: ComposerTriggerPopoverProps) {
  const { t } = useI18n()
  const copy = t.composer
+  const isSlash = kind === '/'
+
+  let lastGroup: string | undefined

  return (
    <div
@@ -73,41 +85,79 @@ export function ComposerTriggerPopover({
      role="listbox"
    >
      {items.length === 0 ? (
-        <CompletionDrawerEmpty title={loading ? copy.lookupLoading : copy.lookupNoMatches}>
-          {kind === '@' ? (
-            <>
-              {copy.lookupTry} <span className="font-mono text-foreground/80">@file:</span> {copy.lookupOr}{' '}
-              <span className="font-mono text-foreground/80">@folder:</span>.
-            </>
-          ) : (
-            <>
-              {copy.lookupTry} <span className="font-mono text-foreground/80">/help</span>.
-            </>
-          )}
-        </CompletionDrawerEmpty>
+        loading ? (
+          <div className="flex items-center gap-2 px-2 py-1.5 text-(--ui-text-tertiary)">
+            <BrailleSpinner ariaLabel={copy.lookupLoading} className="text-foreground/70" spinner="braille" />
+            <span>{copy.lookupLoading}</span>
+          </div>
+        ) : (
+          <CompletionDrawerEmpty title={copy.lookupNoMatches}>
+            {kind === '@' ? (
+              <>
+                {copy.lookupTry} <span className="font-mono text-foreground/80">@file:</span> {copy.lookupOr}{' '}
+                <span className="font-mono text-foreground/80">@folder:</span>.
+              </>
+            ) : (
+              <>
+                {copy.lookupTry} <span className="font-mono text-foreground/80">/help</span>.
+              </>
+            )}
+          </CompletionDrawerEmpty>
+        )
      ) : (
        items.map((item, index) => {
-          const meta = item.metadata as { display?: string; meta?: string } | undefined
-          const display = meta?.display ?? (kind === '/' ? `/${item.label}` : item.label)
+          const meta = item.metadata as RowMeta | undefined
+          const display = meta?.display ?? (isSlash ? `/${item.label}` : item.label)
          const description = meta?.meta || item.description
+          const group = meta?.group?.trim()
+          const showHeader = isSlash && Boolean(group) && group !== lastGroup
+          const isFirstHeader = lastGroup === undefined
+          lastGroup = group || lastGroup
+          const active = index === activeIndex

          return (
-            <button
-              className={cn(COMPLETION_DRAWER_ROW_CLASS, index === activeIndex && 'bg-(--ui-bg-tertiary)')}
-              data-highlighted={index === activeIndex ? '' : undefined}
-              key={item.id}
-              onClick={() => onPick(item)}
-              onMouseEnter={() => onHover(index)}
-              type="button"
-            >
-              <span className="grid size-3.5 shrink-0 place-items-center text-(--ui-text-tertiary)">
-                <Codicon name={completionIcon(kind, item)} size="0.875rem" />
-              </span>
-              <span className="min-w-0 shrink truncate font-mono font-medium leading-5 text-foreground">{display}</span>
-              {description && (
-                <span className="min-w-0 flex-1 truncate leading-5 text-(--ui-text-tertiary)">{description}</span>
+            <Fragment key={item.id}>
+              {showHeader && (
+                <div
+                  className={cn(
+                    'select-none px-2 pb-0.5 text-[0.625rem] font-semibold uppercase tracking-wider text-(--ui-text-tertiary)',
+                    isFirstHeader ? 'pt-0.5' : 'pt-2'
+                  )}
+                >
+                  {group}
+                </div>
              )}
-            </button>
+              <button
+                className={cn(ROW_BASE_CLASS, isSlash ? 'flex-col gap-0' : 'items-center gap-2')}
+                data-highlighted={active ? '' : undefined}
+                onClick={() => onPick(item)}
+                onMouseEnter={() => onHover(index)}
+                type="button"
+              >
+                {isSlash ? (
+                  <>
+                    <span className="truncate text-[0.8125rem] font-medium leading-snug text-foreground">{display}</span>
+                    {description && (
+                      <span className="truncate text-[0.6875rem] leading-snug text-(--ui-text-tertiary)">
+                        {description}
+                      </span>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    <span className="grid size-4 shrink-0 place-items-center text-(--ui-text-tertiary)">
+                      <Codicon name={atIcon(item)} size="0.875rem" />
+                    </span>
+                    <span className="min-w-0 shrink truncate font-mono font-medium leading-5 text-foreground">
+                      {display}
+                    </span>
+                    {description && (
+                      <span className="min-w-0 flex-1 truncate leading-5 text-(--ui-text-tertiary)">{description}</span>
+                    )}
+                  </>
+                )}
+              </button>
+            </Fragment>
          )
        })
      )}
@@ -98,6 +98,7 @@ import { RightSidebarPane } from './right-sidebar'
 import { $terminalTakeover } from './right-sidebar/store'
 import { PersistentTerminal, TerminalSlot } from './right-sidebar/terminal/persistent'
 import { CRON_ROUTE, NEW_CHAT_ROUTE, routeSessionId, sessionRoute, SETTINGS_ROUTE } from './routes'
+import { SessionPickerOverlay } from './session-picker-overlay'
 import { SessionSwitcher } from './session-switcher'
 import { useContextSuggestions } from './session/hooks/use-context-suggestions'
 import { useCwdActions } from './session/hooks/use-cwd-actions'
@@ -694,6 +695,7 @@ export function DesktopController() {
    handleSkinCommand,
    refreshSessions,
    requestGateway,
+    resumeStoredSession: resumeSession,
    selectedStoredSessionIdRef,
    startFreshSessionDraft,
    sttEnabled,
@@ -829,6 +831,7 @@ export function DesktopController() {
        />
      )}
      <ModelPickerOverlay gateway={gatewayRef.current || undefined} onSelect={selectModel} />
+      <SessionPickerOverlay onResume={resumeSession} />
      <ModelVisibilityOverlay gateway={gatewayRef.current || undefined} onOpenProviders={openProviderSettings} />
      <UpdatesOverlay />
      <GatewayConnectingOverlay />
@@ -0,0 +1,32 @@
+import { useStore } from '@nanostores/react'
+
+import { SessionPickerDialog } from '@/components/session-picker'
+import { $gatewayState, $selectedStoredSessionId, $sessionPickerOpen, setSessionPickerOpen } from '@/store/session'
+
+interface SessionPickerOverlayProps {
+  onResume: (storedSessionId: string) => void
+}
+
+/**
+ * Mounts the session picker that `/resume` (and `/sessions`, `/switch`) opens —
+ * the desktop equivalent of the TUI's sessions overlay. Resuming runs through
+ * the same `resumeSession` path the sidebar uses.
+ */
+export function SessionPickerOverlay({ onResume }: SessionPickerOverlayProps) {
+  const open = useStore($sessionPickerOpen)
+  const gatewayOpen = useStore($gatewayState) === 'open'
+  const activeStoredSessionId = useStore($selectedStoredSessionId)
+
+  if (!gatewayOpen) {
+    return null
+  }
+
+  return (
+    <SessionPickerDialog
+      activeStoredSessionId={activeStoredSessionId}
+      onOpenChange={setSessionPickerOpen}
+      onResume={onResume}
+      open={open}
+    />
+  )
+}
@@ -1,6 +1,6 @@
 import { cleanup, render, waitFor } from '@testing-library/react'
 import type { MutableRefObject } from 'react'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'

 import { $composerAttachments, type ComposerAttachment } from '@/store/composer'
@@ -55,6 +55,7 @@ function Harness({
  onSeedState,
  refreshSessions,
  requestGateway,
+  resumeStoredSession,
  storedSessionId
 }: {
  busyRef?: MutableRefObject<boolean>
@@ -62,6 +63,7 @@ function Harness({
  onSeedState?: (state: Record<string, unknown>) => void
  refreshSessions: () => Promise<void>
  requestGateway: <T>(method: string, params?: Record<string, unknown>) => Promise<T>
+  resumeStoredSession?: (storedSessionId: string) => Promise<void> | void
  storedSessionId?: null | string
 }) {
  const activeSessionIdRef: MutableRefObject<string | null> = { current: RUNTIME_SESSION_ID }
@@ -69,6 +71,12 @@ function Harness({
    current: storedSessionId === undefined ? RUNTIME_SESSION_ID : storedSessionId
  }
  const localBusyRef = busyRef ?? { current: false }
+  const stateRef = useRef({
+    messages: [],
+    busy: false,
+    awaitingResponse: false,
+    interrupted: true
+  } as never)

  const actions = usePromptActions({
    activeSessionId: RUNTIME_SESSION_ID,
@@ -79,17 +87,14 @@ function Harness({
    handleSkinCommand: () => '',
    refreshSessions,
    requestGateway,
+    resumeStoredSession: resumeStoredSession ?? (() => undefined),
    selectedStoredSessionIdRef,
    startFreshSessionDraft: () => undefined,
    sttEnabled: false,
    updateSessionState: (_sessionId, updater) => {
      // Seed with interrupted:true so we can prove a fresh submit clears it.
-      const next = updater({
-        messages: [],
-        busy: false,
-        awaitingResponse: false,
-        interrupted: true
-      } as never) as unknown as Record<string, unknown>
+      const next = updater(stateRef.current) as unknown as Record<string, unknown>
+      stateRef.current = next as never
      onSeedState?.(next)

      return next as never
@@ -190,6 +195,68 @@ describe('usePromptActions /title', () => {
  })
 })

+describe('usePromptActions desktop slash pickers', () => {
+  beforeEach(() => {
+    setSessions(() => [sessionInfo({ id: '20260610_120000_abcdef', title: 'Loaded session' })])
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
+  it('resumes an exact session id even when it is not in the loaded sidebar cache', async () => {
+    const resumeStoredSession = vi.fn(async () => undefined)
+    const requestGateway = vi.fn(async () => ({}) as never)
+
+    let handle: HarnessHandle | null = null
+    render(
+      <Harness
+        onReady={h => (handle = h)}
+        refreshSessions={async () => undefined}
+        requestGateway={requestGateway}
+        resumeStoredSession={resumeStoredSession}
+      />
+    )
+
+    await handle!.submitText('/resume 20260610_130000_123abc')
+
+    expect(resumeStoredSession).toHaveBeenCalledWith('20260610_130000_123abc')
+    expect(requestGateway).not.toHaveBeenCalledWith('slash.exec', expect.anything())
+  })
+
+  it('marks a timed-out handoff as failed so the next attempt can retry', async () => {
+    vi.useFakeTimers()
+    const calls: { method: string; params?: Record<string, unknown> }[] = []
+    const requestGateway = vi.fn(async (method: string, params?: Record<string, unknown>) => {
+      calls.push({ method, params })
+
+      if (method === 'handoff.state') {
+        return { state: 'pending' } as never
+      }
+
+      return {} as never
+    })
+
+    let handle: HarnessHandle | null = null
+    render(<Harness onReady={h => (handle = h)} refreshSessions={async () => undefined} requestGateway={requestGateway} />)
+
+    const result = handle!.submitText('/handoff telegram')
+    await vi.advanceTimersByTimeAsync(61_000)
+    await result
+
+    expect(calls.some(call => call.method === 'handoff.request')).toBe(true)
+    expect(calls).toContainEqual({
+      method: 'handoff.fail',
+      params: {
+        error: expect.stringContaining('Timed out'),
+        session_id: RUNTIME_SESSION_ID
+      }
+    })
+  })
+})
+
 describe('usePromptActions submit / queue drain semantics', () => {
  afterEach(() => {
    cleanup()
@@ -4,20 +4,24 @@ import { type MutableRefObject, useCallback, useEffect, useRef } from 'react'

 import { getProfiles, transcribeAudio } from '@/hermes'
 import { translateNow, type Translations, useI18n } from '@/i18n'
+import { stripAnsi } from '@/lib/ansi'
 import { branchGroupForUser, type ChatMessage, chatMessageText, textPart } from '@/lib/chat-messages'
 import {
  optimisticAttachmentRef,
  parseCommandDispatch,
  parseSlashCommand,
  pathLabel,
+  sessionTitle,
  SLASH_COMMAND_RE
 } from '@/lib/chat-runtime'
 import {
  type CommandsCatalogLike,
+  type DesktopActionId,
+  type DesktopPickerId,
  desktopSlashUnavailableMessage,
  filterDesktopCommandsCatalog,
  isDesktopSlashCommand,
-  isModelPickerCommand
+  resolveDesktopCommand
 } from '@/lib/desktop-slash-commands'
 import { triggerHaptic } from '@/lib/haptics'
 import { setMutableRef } from '@/lib/mutable-ref'
@@ -38,11 +42,13 @@ import {
  $busy,
  $connection,
  $messages,
+  $sessions,
  $yoloActive,
  setAwaitingResponse,
  setBusy,
  setMessages,
  setModelPickerOpen,
+  setSessionPickerOpen,
  setSessions,
  setYoloActive
 } from '@/store/session'
@@ -50,12 +56,30 @@ import {
 import type {
  ClientSessionState,
  FileAttachResponse,
+  HandoffFailResponse,
+  HandoffRequestResponse,
+  HandoffStateResponse,
  ImageAttachResponse,
  SessionSteerResponse,
  SessionTitleResponse,
  SlashExecResponse
 } from '../../types'

+interface HandoffResult {
+  ok: boolean
+  error?: string
+}
+
+function delay(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+function isSessionIdCandidate(value: string): boolean {
+  const trimmed = value.trim()
+
+  return /^\d{8}_\d{6}_[A-Fa-f0-9]{6}$/.test(trimmed) || /^[A-Fa-f0-9]{32}$/.test(trimmed)
+}
+
 function blobToDataUrl(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
@@ -245,6 +269,7 @@ interface PromptActionsOptions {
  handleSkinCommand: (arg: string) => string
  refreshSessions: () => Promise<void>
  requestGateway: <T>(method: string, params?: Record<string, unknown>) => Promise<T>
+  resumeStoredSession: (storedSessionId: string) => Promise<void> | void
  selectedStoredSessionIdRef: MutableRefObject<string | null>
  startFreshSessionDraft: () => void
  sttEnabled: boolean
@@ -260,6 +285,15 @@ interface SubmitTextOptions {
  fromQueue?: boolean
 }

+/** Everything a slash handler needs about the invocation it's serving. */
+interface SlashActionCtx {
+  arg: string
+  command: string
+  name: string
+  recordInput: boolean
+  sessionHint?: string
+}
+
 function renderCommandsCatalog(catalog: CommandsCatalogLike, copy: Translations['desktop']): string {
  const desktopCatalog = filterDesktopCommandsCatalog(catalog)

@@ -310,6 +344,7 @@ export function usePromptActions({
  handleSkinCommand,
  refreshSessions,
  requestGateway,
+  resumeStoredSession,
  selectedStoredSessionIdRef,
  startFreshSessionDraft,
  sttEnabled,
@@ -320,7 +355,11 @@ export function usePromptActions({

  const appendSessionTextMessage = useCallback(
    (sessionId: string, role: ChatMessage['role'], text: string) => {
-      const body = text.trim()
+      // Strip ANSI: slash-command output from the backend worker carries SGR
+      // color codes (e.g. "Unknown command" in red). The ESC byte is invisible
+      // in the chat panel, so without this the `[1;31m…[0m` payload leaks as
+      // literal text.
+      const body = stripAnsi(text).trim()

      if (!body) {
        return
@@ -696,230 +735,124 @@ export function usePromptActions({
    ]
  )

+  // Queue a handoff of this session to a messaging platform and watch it to
+  // a terminal state. We only write the request through the gateway; the
+  // separate `hermes gateway` process performs the actual transfer, so we
+  // poll `handoff.state` (mirror of the CLI's block-poll) for the result.
+  const handoffSession = useCallback(
+    async (
+      platform: string,
+      options?: { onProgress?: (state: string) => void; sessionId?: string }
+    ): Promise<HandoffResult> => {
+      const sid = options?.sessionId || activeSessionIdRef.current
+
+      if (!sid) {
+        return { error: copy.sessionUnavailable, ok: false }
+      }
+
+      const target = platform.trim().toLowerCase()
+
+      if (!target) {
+        return { error: copy.handoff.failed(''), ok: false }
+      }
+
+      try {
+        options?.onProgress?.('pending')
+        await requestGateway<HandoffRequestResponse>('handoff.request', {
+          platform: target,
+          session_id: sid
+        })
+      } catch (err) {
+        return { error: inlineErrorMessage(err, copy.handoff.failed(target)), ok: false }
+      }
+
+      const deadline = Date.now() + 60_000
+      let lastState = 'pending'
+
+      while (Date.now() < deadline) {
+        await delay(800)
+
+        let record: HandoffStateResponse
+
+        try {
+          record = await requestGateway<HandoffStateResponse>('handoff.state', { session_id: sid })
+        } catch {
+          continue
+        }
+
+        const state = record.state || 'pending'
+
+        if (state !== lastState) {
+          options?.onProgress?.(state)
+          lastState = state
+        }
+
+        if (state === 'completed') {
+          appendSessionTextMessage(sid, 'system', copy.handoff.systemNote(target))
+          notify({ kind: 'success', message: copy.handoff.success(target) })
+
+          return { ok: true }
+        }
+
+        if (state === 'failed') {
+          return { error: record.error || copy.handoff.failed(target), ok: false }
+        }
+      }
+
+      const cleanup = await requestGateway<HandoffFailResponse>('handoff.fail', {
+        error: copy.handoff.timedOut,
+        session_id: sid
+      }).catch(() => null)
+
+      if (cleanup?.state === 'completed') {
+        appendSessionTextMessage(sid, 'system', copy.handoff.systemNote(target))
+        notify({ kind: 'success', message: copy.handoff.success(target) })
+
+        return { ok: true }
+      }
+
+      return { error: copy.handoff.timedOut, ok: false }
+    },
+    [activeSessionIdRef, appendSessionTextMessage, copy, requestGateway]
+  )
+
  const executeSlashCommand = useCallback(
    async (rawCommand: string, options?: { sessionId?: string; recordInput?: boolean }) => {
-      const runSlash = async (commandText: string, sessionHint?: string, recordInput = true): Promise<void> => {
-        const command = commandText.trim()
-        const { name, arg } = parseSlashCommand(command)
-        const normalizedName = name.toLowerCase()
+      const ensureSessionId = async (sessionHint?: string) =>
+        sessionHint || activeSessionIdRef.current || (await createBackendSessionForSend())

-        if (!name) {
-          const sessionId = sessionHint || activeSessionIdRef.current || (await createBackendSessionForSend())
-
-          if (sessionId) {
-            appendSessionTextMessage(sessionId, 'system', copy.emptySlashCommand)
-          }
-
-          return
-        }
-
-        if (normalizedName === 'new' || normalizedName === 'reset') {
-          startFreshSessionDraft()
-
-          return
-        }
-
-        if (normalizedName === 'branch' || normalizedName === 'fork') {
-          await branchCurrentSession()
-
-          return
-        }
-
-        // /yolo maps to the status-bar YOLO control — a per-session approval
-        // bypass, same scope as the TUI's Shift+Tab. With no session yet we arm
-        // it locally; the session-create path applies it on the first message.
-        if (normalizedName === 'yolo') {
-          const sid = sessionHint || activeSessionIdRef.current
-          const next = !$yoloActive.get()
-
-          if (!sid) {
-            setYoloActive(next)
-            notify({ kind: 'success', message: next ? copy.yoloArmed : copy.yoloOff })
-
-            return
-          }
-
-          try {
-            const active = await setSessionYolo(requestGateway, sid, next)
-            appendSessionTextMessage(sid, 'system', copy.yoloSystem(active))
-          } catch {
-            notify({ kind: 'error', title: copy.yoloTitle, message: copy.yoloToggleFailed })
-          }
-
-          return
-        }
-
-        // /model opens the desktop model picker overlay — the same full
-        // provider+model picker reachable from the status-bar model button —
-        // instead of the headless prompt_toolkit modal the slash worker can't
-        // render. With explicit args (`/model <name> [--provider ...]`) run the
-        // switch directly through slash.exec so power users can still type it.
-        if (isModelPickerCommand(`/${normalizedName}`)) {
-          if (!arg.trim()) {
-            setModelPickerOpen(true)
-
-            return
-          }
-
-          const sid = sessionHint || activeSessionIdRef.current || (await createBackendSessionForSend())
-
-          if (!sid) {
-            notify({ kind: 'error', title: 'Session unavailable', message: 'Could not create a new session' })
-
-            return
-          }
-
-          try {
-            const result = await requestGateway<SlashExecResponse>('slash.exec', {
-              session_id: sid,
-              command: command.replace(/^\/+/, '')
-            })
-
-            const body = result?.output || `/${name}: model switched`
-            appendSessionTextMessage(
-              sid,
-              'system',
-              recordInput ? slashStatusText(command, body) : body
-            )
-          } catch (err) {
-            appendSessionTextMessage(
-              sid,
-              'system',
-              `error: ${err instanceof Error ? err.message : String(err)}`
-            )
-          }
-
-          return
-        }
-
-        if (normalizedName === 'skin' && !sessionHint && !activeSessionIdRef.current) {
-          notify({ kind: 'success', message: handleSkinCommand(arg) })
-
-          return
-        }
-
-        // /profile selects which profile new chats open in — no app relaunch.
-        // A profile is per-session now, so an existing thread can't change its
-        // profile mid-stream; `/profile <name>` instead points the next new chat
-        // (and the current empty draft) at that profile's backend.
-        if (normalizedName === 'profile') {
-          const target = arg.trim()
-          const current = normalizeProfileKey($activeGatewayProfile.get())
-
-          if (!target) {
-            notify({
-              kind: 'success',
-              message: copy.profileStatus(current)
-            })
-
-            return
-          }
-
-          try {
-            const { profiles } = await getProfiles()
-            const match = profiles.find(profile => profile.name === target)
-
-            if (!match) {
-              notify({
-                kind: 'error',
-                title: copy.unknownProfile,
-                message: copy.noProfileNamed(target, profiles.map(profile => profile.name).join(', '))
-              })
-
-              return
-            }
-
-            const key = normalizeProfileKey(match.name)
-
-            $newChatProfile.set(key)
-            // Swap the live gateway now so an empty draft sends into this
-            // profile immediately; an existing thread keeps its own profile.
-            await ensureGatewayProfile(key)
-            notify({ kind: 'success', message: copy.newChatsProfile(match.name) })
-          } catch (err) {
-            notifyError(err, copy.setProfileFailed)
-          }
-
-          return
-        }
-
-        const sessionId = sessionHint || activeSessionIdRef.current || (await createBackendSessionForSend())
+      // Resolve the target session plus a writer for inline slash output, or
+      // notify + return null when none can be created. Folds the ensure / bail /
+      // build-renderSlashOutput boilerplate every exec-style handler repeats.
+      const withSlashOutput = async (
+        ctx: SlashActionCtx
+      ): Promise<{ render: (text: string) => void; sessionId: string } | null> => {
+        const sessionId = await ensureSessionId(ctx.sessionHint)

        if (!sessionId) {
-          notify({
-            kind: 'error',
-            title: copy.sessionUnavailable,
-            message: copy.createSessionFailed
-          })
+          notify({ kind: 'error', title: copy.sessionUnavailable, message: copy.createSessionFailed })

+          return null
+        }
+
+        const render = (text: string) =>
+          appendSessionTextMessage(sessionId, 'system', ctx.recordInput ? slashStatusText(ctx.command, text) : text)
+
+        return { render, sessionId }
+      }
+
+      // `exec` commands (and unknown skill / quick commands the backend owns)
+      // run on the gateway and render their text output inline. This is the only
+      // path that talks to slash.exec / command.dispatch.
+      async function runExec(ctx: SlashActionCtx): Promise<void> {
+        const { arg, command, name } = ctx
+        const resolved = await withSlashOutput(ctx)
+
+        if (!resolved) {
          return
        }

-        const renderSlashOutput = (text: string) =>
-          appendSessionTextMessage(sessionId, 'system', recordInput ? slashStatusText(command, text) : text)
-
-        // /title <name> renames the session. Route through the gateway's
-        // `session.title` RPC — the same path the TUI uses — NOT the REST
-        // renameSession endpoint and NOT the slash worker.
-        //
-        // Why not the slash worker: it's a separate HermesCLI subprocess whose
-        // SQLite write to the shared state.db can silently fail (notably on
-        // Windows), and it never refreshes the sidebar.
-        //
-        // Why not REST renameSession: `sessionId` here is the *runtime* session
-        // id returned by session.create — it is NOT the stored DB `sessions.id`,
-        // and session.create deliberately does not persist a DB row until the
-        // first turn. The REST PATCH endpoint resolves against the sessions
-        // table, so a runtime id (or a brand-new, not-yet-persisted session)
-        // 404s with "Session not found" on every platform. See #38508 / #38576.
-        //
-        // session.title maps the runtime id to the in-memory session, writes
-        // through the gateway's own DB connection, and QUEUES the title
-        // (`pending: true`) when the row isn't persisted yet — so it works for a
-        // fresh chat too. refreshSessions() then pulls the authoritative title
-        // back into the sidebar. A bare `/title` (no arg) still falls through to
-        // the worker to display the current title.
-        if (normalizedName === 'title' && arg) {
-          try {
-            const result = await requestGateway<SessionTitleResponse>('session.title', {
-              session_id: sessionId,
-              title: arg
-            })
-
-            const finalTitle = (result?.title || arg).trim()
-            const queued = result?.pending === true
-
-            setSessions(prev => prev.map(s => (s.id === sessionId ? { ...s, title: finalTitle || null } : s)))
-            await refreshSessions().catch(() => undefined)
-            renderSlashOutput(
-              finalTitle
-                ? `Session title set: ${finalTitle}${queued ? ' (queued while session initializes)' : ''}`
-                : 'Session title cleared.'
-            )
-          } catch (err) {
-            renderSlashOutput(`error: ${err instanceof Error ? err.message : String(err)}`)
-          }
-
-          return
-        }
-
-        if (normalizedName === 'skin') {
-          renderSlashOutput(handleSkinCommand(arg))
-
-          return
-        }
-
-        if (name === 'help' || name === 'commands') {
-          try {
-            const catalog = await requestGateway<CommandsCatalogLike>('commands.catalog', { session_id: sessionId })
-
-            renderSlashOutput(renderCommandsCatalog(catalog, copy))
-          } catch (err) {
-            renderSlashOutput(`error: ${err instanceof Error ? err.message : String(err)}`)
-          }
-
-          return
-        }
+        const { render: renderSlashOutput, sessionId } = resolved

        if (!isDesktopSlashCommand(name)) {
          renderSlashOutput(desktopSlashUnavailableMessage(name) || `/${name} is not available in the desktop app.`)
@@ -943,11 +876,7 @@ export function usePromptActions({

        try {
          const dispatch = parseCommandDispatch(
-            await requestGateway<unknown>('command.dispatch', {
-              session_id: sessionId,
-              name,
-              arg
-            })
+            await requestGateway<unknown>('command.dispatch', { session_id: sessionId, name, arg })
          )

          if (!dispatch) {
@@ -994,6 +923,261 @@ export function usePromptActions({
        }
      }

+      // One handler per `action` command. Adding a desktop-native command is a
+      // registry row in desktop-slash-commands.ts plus an entry here — never a
+      // new branch in a dispatch ladder.
+      const actionHandlers: Record<DesktopActionId, (ctx: SlashActionCtx) => Promise<void>> = {
+        new: async () => {
+          startFreshSessionDraft()
+        },
+        branch: async () => {
+          await branchCurrentSession()
+        },
+        // /yolo maps to the status-bar YOLO control — a per-session approval
+        // bypass, same scope as the TUI's Shift+Tab. With no session yet we arm
+        // it locally; the session-create path applies it on the first message.
+        yolo: async ({ sessionHint }) => {
+          const sid = sessionHint || activeSessionIdRef.current
+          const next = !$yoloActive.get()
+
+          if (!sid) {
+            setYoloActive(next)
+            notify({ kind: 'success', message: next ? copy.yoloArmed : copy.yoloOff })
+
+            return
+          }
+
+          try {
+            const active = await setSessionYolo(requestGateway, sid, next)
+            appendSessionTextMessage(sid, 'system', copy.yoloSystem(active))
+          } catch {
+            notify({ kind: 'error', title: copy.yoloTitle, message: copy.yoloToggleFailed })
+          }
+        },
+        // /handoff hands this session to a messaging platform. The platform is
+        // completed inline in the slash popover (backend _handoff_completions),
+        // so there is no overlay: `/handoff <platform>` runs the desktop's own
+        // handoff RPC. cli_only on the backend, so it must not reach slash.exec.
+        handoff: async ({ arg, command, recordInput, sessionHint }) => {
+          const platform = arg.trim()
+
+          if (!platform) {
+            notify({ kind: 'success', message: copy.handoff.pickPlatform })
+
+            return
+          }
+
+          const sid = sessionHint || activeSessionIdRef.current
+
+          if (!sid) {
+            notify({ kind: 'error', title: copy.sessionUnavailable, message: copy.createSessionFailed })
+
+            return
+          }
+
+          const result = await handoffSession(platform, { sessionId: sid })
+
+          if (!result.ok && result.error) {
+            appendSessionTextMessage(sid, 'system', recordInput ? slashStatusText(command, result.error) : result.error)
+          }
+        },
+        // /profile selects which profile new chats open in — no app relaunch.
+        // A profile is per-session now, so an existing thread can't change its
+        // profile mid-stream; `/profile <name>` points the next new chat (and
+        // the current empty draft) at that profile's backend.
+        profile: async ({ arg }) => {
+          const target = arg.trim()
+          const current = normalizeProfileKey($activeGatewayProfile.get())
+
+          if (!target) {
+            notify({ kind: 'success', message: copy.profileStatus(current) })
+
+            return
+          }
+
+          try {
+            const { profiles } = await getProfiles()
+            const match = profiles.find(profile => profile.name === target)
+
+            if (!match) {
+              notify({
+                kind: 'error',
+                title: copy.unknownProfile,
+                message: copy.noProfileNamed(target, profiles.map(profile => profile.name).join(', '))
+              })
+
+              return
+            }
+
+            const key = normalizeProfileKey(match.name)
+
+            $newChatProfile.set(key)
+            await ensureGatewayProfile(key)
+            notify({ kind: 'success', message: copy.newChatsProfile(match.name) })
+          } catch (err) {
+            notifyError(err, copy.setProfileFailed)
+          }
+        },
+        skin: async ({ arg, command, recordInput, sessionHint }) => {
+          const sid = sessionHint || activeSessionIdRef.current
+          const message = handleSkinCommand(arg)
+
+          // No session to print into yet — surface it as a toast instead of
+          // spinning up a backend session just to change the theme.
+          if (!sid) {
+            notify({ kind: 'success', message })
+
+            return
+          }
+
+          appendSessionTextMessage(sid, 'system', recordInput ? slashStatusText(command, message) : message)
+        },
+        // /title <name> renames via the gateway's session.title RPC — the same
+        // path the TUI uses, NOT REST renameSession (which 404s on runtime ids)
+        // nor the slash worker (whose DB write can silently fail). Bare /title
+        // shows the current title, which the worker owns, so delegate to exec.
+        title: async ctx => {
+          if (!ctx.arg) {
+            await runExec(ctx)
+
+            return
+          }
+
+          const resolved = await withSlashOutput(ctx)
+
+          if (!resolved) {
+            return
+          }
+
+          const { render: renderSlashOutput, sessionId } = resolved
+          const { arg } = ctx
+
+          try {
+            const result = await requestGateway<SessionTitleResponse>('session.title', {
+              session_id: sessionId,
+              title: arg
+            })
+
+            const finalTitle = (result?.title || arg).trim()
+            const queued = result?.pending === true
+
+            setSessions(prev => prev.map(s => (s.id === sessionId ? { ...s, title: finalTitle || null } : s)))
+            await refreshSessions().catch(() => undefined)
+            renderSlashOutput(
+              finalTitle
+                ? `Session title set: ${finalTitle}${queued ? ' (queued while session initializes)' : ''}`
+                : 'Session title cleared.'
+            )
+          } catch (err) {
+            renderSlashOutput(`error: ${err instanceof Error ? err.message : String(err)}`)
+          }
+        },
+        help: async ctx => {
+          const resolved = await withSlashOutput(ctx)
+
+          if (!resolved) {
+            return
+          }
+
+          const { render: renderSlashOutput, sessionId } = resolved
+
+          try {
+            const catalog = await requestGateway<CommandsCatalogLike>('commands.catalog', { session_id: sessionId })
+
+            renderSlashOutput(renderCommandsCatalog(catalog, copy))
+          } catch (err) {
+            renderSlashOutput(`error: ${err instanceof Error ? err.message : String(err)}`)
+          }
+        }
+      }
+
+      // Picker commands open a desktop overlay; a typed arg is resolved by that
+      // picker so the command never dead-ends or falls through to the backend.
+      const openPicker = async (pickerId: DesktopPickerId, ctx: SlashActionCtx): Promise<void> => {
+        if (pickerId === 'model') {
+          if (!ctx.arg.trim()) {
+            setModelPickerOpen(true)
+
+            return
+          }
+
+          // Power users can still type `/model <name>` — run it on the backend.
+          await runExec(ctx)
+
+          return
+        }
+
+        // session picker — /resume, /sessions, /switch
+        const query = ctx.arg.trim()
+
+        if (!query) {
+          setSessionPickerOpen(true)
+
+          return
+        }
+
+        const sessions = $sessions.get()
+        const lower = query.toLowerCase()
+
+        const match =
+          sessions.find(session => session.id === query) ||
+          sessions.find(session => sessionTitle(session).toLowerCase().includes(lower)) ||
+          sessions.find(session => (session.preview ?? '').toLowerCase().includes(lower))
+
+        if (!match) {
+          if (isSessionIdCandidate(query)) {
+            await resumeStoredSession(query)
+
+            return
+          }
+
+          notify({ kind: 'error', message: copy.resumeFailed })
+
+          return
+        }
+
+        await resumeStoredSession(match.id)
+      }
+
+      // The whole dispatcher: resolve the command's desktop surface, then act on
+      // its kind. No per-command ladder — behavior lives in the registry.
+      async function runSlash(commandText: string, sessionHint?: string, recordInput = true): Promise<void> {
+        const command = commandText.trim()
+        const { name, arg } = parseSlashCommand(command)
+
+        if (!name) {
+          const sessionId = await ensureSessionId(sessionHint)
+
+          if (sessionId) {
+            appendSessionTextMessage(sessionId, 'system', copy.emptySlashCommand)
+          }
+
+          return
+        }
+
+        const ctx: SlashActionCtx = { arg, command, name, recordInput, sessionHint }
+        const surface = resolveDesktopCommand(`/${name}`)?.surface
+
+        switch (surface?.kind) {
+          case 'unavailable': {
+            const resolved = await withSlashOutput(ctx)
+            resolved?.render(desktopSlashUnavailableMessage(name) || `/${name} is not available in the desktop app.`)
+
+            return
+          }
+
+          case 'picker':
+            return openPicker(surface.picker, ctx)
+
+          case 'action':
+            return actionHandlers[surface.action](ctx)
+
+          default:
+            // exec spec, or an unknown skill / quick command the backend owns.
+            return runExec(ctx)
+        }
+      }
+
      await runSlash(rawCommand, options?.sessionId, options?.recordInput ?? true)
    },
    [
@@ -1004,8 +1188,10 @@ export function usePromptActions({
      copy,
      createBackendSessionForSend,
      handleSkinCommand,
+      handoffSession,
      refreshSessions,
      requestGateway,
+      resumeStoredSession,
      startFreshSessionDraft,
      submitPromptText
    ]
@@ -1314,6 +1500,7 @@ export function usePromptActions({
    cancelRun,
    editMessage,
    handleThreadMessagesChange,
+    handoffSession,
    reloadFromMessage,
    steerPrompt,
    submitText,
@@ -61,6 +61,26 @@ export interface SessionTitleResponse {
  session_key?: string
 }

+export interface HandoffRequestResponse {
+  queued?: boolean
+  session_key?: string
+  platform?: string
+  // Human-readable home channel name for the destination platform.
+  home_name?: string
+}
+
+export interface HandoffStateResponse {
+  // '' | 'pending' | 'running' | 'completed' | 'failed'
+  state?: string
+  platform?: string
+  error?: string
+}
+
+export interface HandoffFailResponse {
+  failed?: boolean
+  state?: string
+}
+
 export interface ExecCommandDispatchResponse {
  type: 'exec' | 'plugin'
  output?: string