feat: keybar function captions + Ctrl+R/L/D, plus ⌨ shortcut cheat-sheet
keybar: - add Ctrl+R (搜历史/\x12), Ctrl+L (重绘/\x0c), Ctrl+D (退出/\x04) - each key now shows a short function caption under the glyph (self-documenting on touch where tooltips don't appear); 17 keys total - test/keybar.test.ts updated to 17 keys cheat-sheet (new public/shortcuts.ts): - ⌨ toolbar button opens a grouped reference of common Claude Code shortcuts (general / editing / multiline / macOS / prefixes), each labeled with what it does; keys also on the bottom bar are tagged 键栏 - Esc / click-outside to close; styled card with sticky header + accent tags 216 tests green; tsc + build clean.
This commit is contained in:
Yaojia Wang
@@ -2,8 +2,10 @@
|
||||
* public/keybar.ts — Mobile/desktop touch key bar, tuned for Claude Code.
|
||||
*
|
||||
* Buttons send terminal byte sequences a phone soft keyboard can't easily
|
||||
* produce, most-used first. Order/selection follows the official Claude Code
|
||||
* keyboard-shortcut docs (interactive-mode / keybindings).
|
||||
* produce, most-used first. Each button shows a short function caption under
|
||||
* the glyph so it's self-documenting on touch (where tooltips don't appear).
|
||||
* Order/selection follows the official Claude Code keyboard-shortcut docs
|
||||
* (interactive-mode / keybindings).
|
||||
*
|
||||
* Esc \x1b interrupt Claude / dismiss (primary)
|
||||
* Esc·Esc \x1b\x1b rewind / clear draft
|
||||
@@ -11,9 +13,12 @@
|
||||
* ↑ ↓ \x1b[A/B select menu option / history
|
||||
* Enter \r confirm
|
||||
* Ctrl+C \x03 cancel / quit
|
||||
* Ctrl+R \x12 reverse-search command history
|
||||
* Ctrl+O \x0f expand transcript / tool detail
|
||||
* Ctrl+L \x0c redraw screen
|
||||
* Ctrl+T \x14 toggle task list
|
||||
* Ctrl+B \x02 background running task
|
||||
* Ctrl+D \x04 exit session (EOF)
|
||||
* Tab \t complete / toggle
|
||||
* ← → \x1b[D/C cursor
|
||||
* / / slash-command launcher
|
||||
@@ -32,9 +37,12 @@ export const KEY_MAP = {
|
||||
arrowRight: '\x1b[C',
|
||||
enter: '\r',
|
||||
ctrlC: '\x03',
|
||||
ctrlR: '\x12',
|
||||
ctrlO: '\x0f',
|
||||
ctrlL: '\x0c',
|
||||
ctrlT: '\x14',
|
||||
ctrlB: '\x02',
|
||||
ctrlD: '\x04',
|
||||
tab: '\t',
|
||||
slash: '/',
|
||||
} as const
|
||||
@@ -43,6 +51,7 @@ export type KeyName = keyof typeof KEY_MAP
|
||||
|
||||
interface KeybarButton {
|
||||
label: string
|
||||
caption: string // short function label shown under the glyph
|
||||
keyName: KeyName
|
||||
title: string // tooltip / aria-label
|
||||
primary?: boolean // styled as prominent
|
||||
@@ -50,20 +59,23 @@ interface KeybarButton {
|
||||
|
||||
/** Button layout: most-used Claude Code keys first. */
|
||||
export const KEYBAR_BUTTONS: KeybarButton[] = [
|
||||
{ label: 'Esc', keyName: 'esc', title: 'Esc — interrupt Claude / dismiss', primary: true },
|
||||
{ label: 'Esc²', keyName: 'escEsc', title: 'Esc Esc — rewind / clear draft' },
|
||||
{ label: '⇧Tab', keyName: 'shiftTab', title: 'Shift+Tab — cycle plan / auto-accept mode' },
|
||||
{ label: '↑', keyName: 'arrowUp', title: 'Up — previous option / history' },
|
||||
{ label: '↓', keyName: 'arrowDown', title: 'Down — next option / history' },
|
||||
{ label: '⏎', keyName: 'enter', title: 'Enter — confirm' },
|
||||
{ label: '^C', keyName: 'ctrlC', title: 'Ctrl+C — cancel / quit' },
|
||||
{ label: '^O', keyName: 'ctrlO', title: 'Ctrl+O — expand transcript / tool detail' },
|
||||
{ label: '^T', keyName: 'ctrlT', title: 'Ctrl+T — toggle task list' },
|
||||
{ label: '^B', keyName: 'ctrlB', title: 'Ctrl+B — background running task' },
|
||||
{ label: 'Tab', keyName: 'tab', title: 'Tab — complete / toggle' },
|
||||
{ label: '←', keyName: 'arrowLeft', title: 'Left' },
|
||||
{ label: '→', keyName: 'arrowRight', title: 'Right' },
|
||||
{ label: '/', keyName: 'slash', title: 'Slash — command launcher' },
|
||||
{ label: 'Esc', caption: '中断', keyName: 'esc', title: 'Esc — interrupt Claude / dismiss', primary: true },
|
||||
{ label: 'Esc²', caption: '回溯', keyName: 'escEsc', title: 'Esc Esc — rewind / clear draft' },
|
||||
{ label: '⇧Tab', caption: '模式', keyName: 'shiftTab', title: 'Shift+Tab — cycle plan / auto-accept mode' },
|
||||
{ label: '↑', caption: '上一个', keyName: 'arrowUp', title: 'Up — previous option / history' },
|
||||
{ label: '↓', caption: '下一个', keyName: 'arrowDown', title: 'Down — next option / history' },
|
||||
{ label: '⏎', caption: '确认', keyName: 'enter', title: 'Enter — confirm' },
|
||||
{ label: '^C', caption: '取消', keyName: 'ctrlC', title: 'Ctrl+C — cancel / quit' },
|
||||
{ label: '^R', caption: '搜历史', keyName: 'ctrlR', title: 'Ctrl+R — reverse-search command history' },
|
||||
{ label: '^O', caption: '详情', keyName: 'ctrlO', title: 'Ctrl+O — expand transcript / tool detail' },
|
||||
{ label: '^L', caption: '重绘', keyName: 'ctrlL', title: 'Ctrl+L — redraw screen' },
|
||||
{ label: '^T', caption: '任务', keyName: 'ctrlT', title: 'Ctrl+T — toggle task list' },
|
||||
{ label: '^B', caption: '后台', keyName: 'ctrlB', title: 'Ctrl+B — background running task' },
|
||||
{ label: '^D', caption: '退出', keyName: 'ctrlD', title: 'Ctrl+D — exit session (EOF)' },
|
||||
{ label: 'Tab', caption: '补全', keyName: 'tab', title: 'Tab — complete / toggle' },
|
||||
{ label: '←', caption: '左移', keyName: 'arrowLeft', title: 'Left — move cursor left' },
|
||||
{ label: '→', caption: '右移', keyName: 'arrowRight', title: 'Right — move cursor right' },
|
||||
{ label: '/', caption: '命令', keyName: 'slash', title: 'Slash — command launcher' },
|
||||
]
|
||||
|
||||
/** Mount the key bar: create buttons in #keybar, bind touchstart → onSend(bytes) + preventDefault. */
|
||||
@@ -71,15 +83,22 @@ export const mountKeybar: MountKeybar = (onSend) => {
|
||||
const keybarEl = document.getElementById('keybar')
|
||||
if (!keybarEl) return
|
||||
|
||||
for (const { label, keyName, title, primary } of KEYBAR_BUTTONS) {
|
||||
for (const { label, caption, keyName, title, primary } of KEYBAR_BUTTONS) {
|
||||
const btn = document.createElement('button')
|
||||
btn.textContent = label
|
||||
btn.classList.add('keybar-btn')
|
||||
if (primary) btn.classList.add('keybar-btn-primary')
|
||||
btn.dataset.key = keyName
|
||||
btn.title = title
|
||||
btn.setAttribute('aria-label', title)
|
||||
|
||||
const keyEl = document.createElement('span')
|
||||
keyEl.className = 'kb-key'
|
||||
keyEl.textContent = label
|
||||
const capEl = document.createElement('span')
|
||||
capEl.className = 'kb-cap'
|
||||
capEl.textContent = caption
|
||||
btn.append(keyEl, capEl)
|
||||
|
||||
const bytes = KEY_MAP[keyName]
|
||||
|
||||
// touchstart: send immediately, prevent default so the soft keyboard stays hidden.
|
||||
|
||||
Reference in New Issue
Block a user