eaeacf3a78
- 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.
100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
/**
|
|
* 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).
|
|
*
|
|
* 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'
|
|
|
|
/** 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',
|
|
arrowLeft: '\x1b[D',
|
|
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
|
|
|
|
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. */
|
|
export const mountKeybar: MountKeybar = (onSend) => {
|
|
const keybarEl = document.getElementById('keybar')
|
|
if (!keybarEl) return
|
|
|
|
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.title = title
|
|
btn.setAttribute('aria-label', title)
|
|
|
|
const bytes = KEY_MAP[keyName]
|
|
|
|
// touchstart: send immediately, prevent default so the soft keyboard stays hidden.
|
|
btn.addEventListener('touchstart', (e) => {
|
|
e.preventDefault()
|
|
onSend(bytes)
|
|
})
|
|
|
|
// Desktop fallback: click also sends.
|
|
btn.addEventListener('click', (e) => {
|
|
e.preventDefault()
|
|
onSend(bytes)
|
|
})
|
|
|
|
keybarEl.appendChild(btn)
|
|
}
|
|
}
|