web-terminal/public/shortcuts.ts

/**
 * public/shortcuts.ts — Claude Code keyboard cheat-sheet (⌨ toolbar button).
 *
 * Opens an overlay listing the common Claude Code shortcuts grouped by purpose,
 * each labeled with what it does. Keys also present on the bottom touch key bar
 * are tagged "键栏". Source: official Claude Code interactive-mode docs.
 */

import { ICON_KEYBOARD } from './icons.js'

interface Shortcut {
  keys: string
  desc: string
  onBar?: boolean // also available on the bottom key bar
}

interface ShortcutGroup {
  title: string
  items: Shortcut[]
}

const GROUPS: ShortcutGroup[] = [
  {
    title: '常用 General',
    items: [
      { keys: 'Esc', desc: '打断 Claude / 关闭弹窗', onBar: true },
      { keys: 'Esc Esc', desc: '有输入→清空存草稿;空→打开回溯菜单', onBar: true },
      { keys: 'Ctrl+C', desc: '中断运行;无运行时清空,再按退出', onBar: true },
      { keys: 'Ctrl+D', desc: '退出会话 (EOF)', onBar: true },
      { keys: 'Shift+Tab', desc: '循环权限模式 (default/acceptEdits/plan…)', onBar: true },
      { keys: 'Ctrl+R', desc: '反向搜索命令历史', onBar: true },
      { keys: 'Ctrl+O', desc: '切换 transcript(详细工具调用)视图', onBar: true },
      { keys: 'Ctrl+L', desc: '重绘屏幕(显示错乱时救场)', onBar: true },
      { keys: 'Ctrl+T', desc: '切换任务列表', onBar: true },
      { keys: 'Ctrl+B', desc: '把命令/agent 转到后台(tmux 按两次)', onBar: true },
      { keys: '↑ / ↓', desc: '移动光标 / 翻命令历史', onBar: true },
      { keys: 'Tab', desc: '补全建议 / 接受提示', onBar: true },
      { keys: '/', desc: '命令与 skill 启动器', onBar: true },
    ],
  },
  {
    title: '行内编辑 Editing',
    items: [
      { keys: 'Ctrl+A', desc: '光标到行首' },
      { keys: 'Ctrl+E', desc: '光标到行尾' },
      { keys: 'Ctrl+K', desc: '删除到行尾' },
      { keys: 'Ctrl+U', desc: '删除到行首' },
      { keys: 'Ctrl+W', desc: '删除前一个词' },
      { keys: 'Ctrl+Y', desc: '粘回被删除的内容' },
      { keys: 'Alt+B / Alt+F', desc: '按词左移 / 右移' },
    ],
  },
  {
    title: '多行输入 Multiline',
    items: [
      { keys: '\\ + Enter', desc: '换行(任何终端都行)' },
      { keys: 'Shift+Enter', desc: '换行(iTerm2/WezTerm/Kitty… 原生)' },
      { keys: 'Ctrl+J', desc: '换行(无需配置,任何终端)' },
    ],
  },
  {
    title: 'macOS(需 Option 当 Meta)',
    items: [
      { keys: 'Option+P', desc: '切换模型' },
      { keys: 'Option+T', desc: '开关 extended thinking' },
      { keys: 'Option+O', desc: '开关 fast mode' },
    ],
  },
  {
    title: '前缀 Prefixes',
    items: [
      { keys: '! 开头', desc: 'shell 模式,直接跑命令并入上下文' },
      { keys: '@', desc: '文件路径补全' },
    ],
  },
]

export function mountShortcuts(toolbar: HTMLElement): void {
  const overlay = document.createElement('div')
  overlay.id = 'shortcutsmodal'
  overlay.style.display = 'none'
  const card = document.createElement('div')
  card.className = 'sc-card'
  overlay.appendChild(card)
  document.body.appendChild(overlay)

  const hide = (): void => {
    overlay.style.display = 'none'
  }
  overlay.addEventListener('click', (e) => {
    if (e.target === overlay) hide()
  })
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && overlay.style.display !== 'none') hide()
  })

  const build = (): void => {
    card.replaceChildren()
    const title = document.createElement('div')
    title.className = 'sc-title'
    title.textContent = 'Claude Code 快捷键'
    card.appendChild(title)

    for (const group of GROUPS) {
      const gh = document.createElement('div')
      gh.className = 'sc-group'
      gh.textContent = group.title
      card.appendChild(gh)

      for (const sc of group.items) {
        const row = document.createElement('div')
        row.className = 'sc-row'

        const key = document.createElement('span')
        key.className = 'sc-key'
        key.textContent = sc.keys

        const desc = document.createElement('span')
        desc.className = 'sc-desc'
        desc.textContent = sc.desc

        row.append(key, desc)
        if (sc.onBar) {
          const tag = document.createElement('span')
          tag.className = 'sc-tag'
          tag.textContent = '键栏'
          row.appendChild(tag)
        }
        card.appendChild(row)
      }
    }
  }
  build()

  const toggle = document.createElement('button')
  toggle.className = 'toolbtn'
  toggle.innerHTML = ICON_KEYBOARD
  toggle.dataset.tip = 'Keyboard shortcuts'
  toggle.setAttribute('aria-label', 'Keyboard shortcuts')
  toggle.setAttribute('aria-label', 'Keyboard shortcuts')
  toggle.addEventListener('click', () => {
    overlay.style.display = overlay.style.display === 'none' ? 'flex' : 'none'
  })
  toolbar.appendChild(toggle)
}