@cplieger/web-terminal-ui
The reference touch-first browser UI for @cplieger/web-terminal-engine. It turns the engine's render/scroll/connection/keyboard modules into a usable terminal on a phone as well as a desktop.
One createTerminal(target, { features }) call builds the entire terminal UI inside a single container element you provide. A small always-present kernel composes with opt-in feature modules that own everything above the raw terminal:
- a display-only terminal output (native text selection survives redraws)
and a hidden <textarea that owns the keyboard and IME (the kernel)
- tabs: multiple independent terminals with a desktop strip, a mobile
bottom switcher, a modal overview sheet, and an opt-in two-pane split view
- an activity monitor that drives per-tab status dots (working / idle /
needs-input / exited) from the server's status stream
- a mobile key toolbar (Tab / Esc / arrows / Enter / sticky-Ctrl) and a
scroll-to-bottom control
- a context menu (Copy / Select All / Paste), on a right-click and on a
touch long-press. Paste is the reason it exists: the keyboard target is a hidden <textarea, so no platform can offer a native paste over the output. On touch the platform keeps its long-press: word selection and the OS copy callout run untouched, and the menu appears on release only when the press selected nothing
- predictive local echo, IME / composition (CJK, dictation,
autocorrect), and viewport + keyboard-inset handling for the iOS soft keyboard, rotation, and font-load reflows
- a connection-status banner, including a persistent protocol-incompatibility
state, and a copy toast
It is published as TypeScript source (no build step) to npm and JSR, alongside the CSS bundle and a reference HTML page. Consumers who want a different UI should depend on the engine directly and skip this package.