feat(v0.3): keybar Claude shortcuts + scrollback search + clickable links
- keybar: add Esc·Esc / ^O / ^T / ^B + per-button tooltips (KEY_MAP 14 keys)
- M1 search: @xterm/addon-search per terminal; 🔍 toolbar button + search box
(Enter=next, Shift+Enter=prev, Esc=close)
- M2 links: @xterm/addon-web-links per terminal (tap URLs Claude prints)
- tab bar split into #tabs (scrollable) + #toolbar (utility cluster) for future
utilities (QR/settings/dashboard)
- Browser-verified: 14 keybar buttons, search highlights matches, no console errors.
199 tests green, typechecks + build ok.
This commit is contained in:
Yaojia Wang
@@ -1,19 +1,22 @@
|
||||
/**
|
||||
* public/keybar.ts — Mobile touch key bar, tuned for Claude Code.
|
||||
* public/keybar.ts — Mobile/desktop touch key bar, tuned for Claude Code.
|
||||
*
|
||||
* Exports pure key-to-byte mappings and a mount function that binds DOM buttons
|
||||
* to onSend on touchstart (bypassing xterm so the soft keyboard doesn't pop up).
|
||||
* 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).
|
||||
*
|
||||
* Order/selection follows Claude Code mobile habits — the keys a phone soft
|
||||
* keyboard can't easily produce, most-used first (leftmost = no scroll needed):
|
||||
* Esc \x1b interrupt Claude / dismiss (primary — most used)
|
||||
* Shift+Tab \x1b[Z cycle plan / auto-accept mode
|
||||
* ↑ ↓ \x1b[A/B select menu option / history
|
||||
* Enter \r confirm
|
||||
* Ctrl+C \x03 cancel / quit
|
||||
* Tab \t complete / toggle
|
||||
* ← → \x1b[D/C cursor
|
||||
* / / slash-command launcher
|
||||
* Esc \x1b interrupt Claude / dismiss (primary)
|
||||
* Esc·Esc \x1b\x1b rewind / clear draft
|
||||
* Shift+Tab \x1b[Z cycle plan / auto-accept mode
|
||||
* ↑ ↓ \x1b[A/B select menu option / history
|
||||
* Enter \r confirm
|
||||
* Ctrl+C \x03 cancel / quit
|
||||
* Ctrl+O \x0f expand transcript / tool detail
|
||||
* Ctrl+T \x14 toggle task list
|
||||
* Ctrl+B \x02 background running task
|
||||
* Tab \t complete / toggle
|
||||
* ← → \x1b[D/C cursor
|
||||
* / / slash-command launcher
|
||||
*/
|
||||
|
||||
import type { MountKeybar } from '../src/types.js'
|
||||
@@ -21,6 +24,7 @@ import type { MountKeybar } from '../src/types.js'
|
||||
/** Key name → byte string mapping (pure data, for testing). */
|
||||
export const KEY_MAP = {
|
||||
esc: '\x1b',
|
||||
escEsc: '\x1b\x1b',
|
||||
shiftTab: '\x1b[Z',
|
||||
arrowUp: '\x1b[A',
|
||||
arrowDown: '\x1b[B',
|
||||
@@ -28,24 +32,38 @@ export const KEY_MAP = {
|
||||
arrowRight: '\x1b[C',
|
||||
enter: '\r',
|
||||
ctrlC: '\x03',
|
||||
ctrlO: '\x0f',
|
||||
ctrlT: '\x14',
|
||||
ctrlB: '\x02',
|
||||
tab: '\t',
|
||||
slash: '/',
|
||||
} as const
|
||||
|
||||
export type KeyName = keyof typeof KEY_MAP
|
||||
|
||||
/** Button layout: most-used Claude Code keys first. `primary` styles a key as prominent. */
|
||||
export const KEYBAR_BUTTONS: Array<{ label: string; keyName: KeyName; primary?: boolean }> = [
|
||||
{ label: 'Esc', keyName: 'esc', primary: true },
|
||||
{ label: '⇧Tab', keyName: 'shiftTab' },
|
||||
{ label: '↑', keyName: 'arrowUp' },
|
||||
{ label: '↓', keyName: 'arrowDown' },
|
||||
{ label: '⏎', keyName: 'enter' },
|
||||
{ label: '^C', keyName: 'ctrlC' },
|
||||
{ label: 'Tab', keyName: 'tab' },
|
||||
{ label: '←', keyName: 'arrowLeft' },
|
||||
{ label: '→', keyName: 'arrowRight' },
|
||||
{ label: '/', keyName: 'slash' },
|
||||
interface KeybarButton {
|
||||
label: string
|
||||
keyName: KeyName
|
||||
title: string // tooltip / aria-label
|
||||
primary?: boolean // styled as prominent
|
||||
}
|
||||
|
||||
/** 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' },
|
||||
]
|
||||
|
||||
/** Mount the key bar: create buttons in #keybar, bind touchstart → onSend(bytes) + preventDefault. */
|
||||
@@ -53,13 +71,14 @@ export const mountKeybar: MountKeybar = (onSend) => {
|
||||
const keybarEl = document.getElementById('keybar')
|
||||
if (!keybarEl) return
|
||||
|
||||
for (const { label, keyName, primary } of KEYBAR_BUTTONS) {
|
||||
for (const { label, 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.setAttribute('aria-label', label)
|
||||
btn.title = title
|
||||
btn.setAttribute('aria-label', title)
|
||||
|
||||
const bytes = KEY_MAP[keyName]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user