sethmux/claude-design/design_handoff_sethmux_toolbar

Handoff: sethmux mobile toolbar — Google Workspace dark refresh + compose bar

Overview

This handoff covers two related changes to the sethmux web terminal's mobile UI (static/toolbar.js):

1. Theme refresh — re-skin the existing 2-row mobile button bar to match the Google Workspace dark vocabulary (palette, typography, hairline borders, hover behavior) while keeping sethmux's orange #D35400 as the accent identity.
2. Mobile autocorrect workaround — add an opt-in compose bar (third row, toggled by a "Type" button) that gives Gboard / iOS keyboards a real <input> to operate on. Typed text is flushed to the terminal stdin on Enter / Send so swipe, autocorrect, and predictions all work despite xterm.js's per-keystroke input model.

About the Design Files

The files in this bundle are design references — toolbar.js is the single source file to ship; the preview*.html files are visual mockups demonstrating intended look and behavior in a Chrome window and an Android phone frame, and the *.jsx files are throwaway frame components used only by the previews.

The task is to drop the new toolbar.js into the existing sethmux project at static/toolbar.js, replacing the current file. No build step required; no other static files change. The previews are not meant to be served in production.

Fidelity

High-fidelity. All colors, type sizes, spacings, radii, and behaviors are final. Implement to spec.

What changed in toolbar.js

Visual system (Google Workspace dark)

Token	Hex	Usage
toolbar bg	#202124	bar background
button surface	#303134	button face at rest
border	#3c4043	1px hairlines, group dividers
primary text	#e8eaed	button labels
secondary text	#9aa0a6	mono-class buttons at rest
tertiary text	#5f6368	placeholder, disabled
accent (sethmux)	#D35400	active/toggled fill, send button, focus ring
accent at rest	#f0a36b	text color of .hi (orange-tinted) buttons
accent bg-1	#2a1f15	.hi button background at rest
accent bg-2	#3a2a1a	hover wash (subtle orange tint)
accent border	#5a3a22	.hi border at rest
success at rest	#81c995	Save button text
success filled	#1e8e3e	Save button after confirm

Typography

• Primary: Roboto, 'Helvetica Neue', Arial, sans-serif, 12px / 500, letter-spacing 0.1px
• Mono (chord and arrow keys, terminal input): 'Roboto Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace, 14px / 400 in the compose input, 12px / 400 on .mono buttons

Geometry

• Bar padding: 6px 8px 7px
• Button: height: 32px, min-width: 40px, padding: 0 10px, border-radius: 4px, border: 1px solid #3c4043
• Narrow-phone breakpoint at max-width: 380px: button height: 30px, min-width: 34px, padding: 0 7px, font-size: 11.5px
• Compose input: height: 36px, padding: 0 10px, border-radius: 4px, orange caret + orange focus border #D35400
• Send button: height: 36px, min-width: 54px, filled #D35400 on text #0a0a0a
• Newline button (↵): same height as Send, min-width: 38px, neutral surface (#303134 / #3c4043)
• Group dividers (.sep): 1px wide × 20px tall, #3c4043, 4px horizontal margin (2px on narrow phones)
• Bar shadow: 0 -1px 0 rgba(0,0,0,.4), 0 -8px 24px rgba(0,0,0,.35)
• Transitions: background .15s ease, border-color .15s ease, color .15s ease (no bounces)

Button states

• Default: #303134 bg, #3c4043 border, #e8eaed text
• Hover: #3a2a1a bg, #fff text
• Active (mouse-down): full orange fill #D35400 on #0a0a0a
• .hi (accent at rest): orange-tinted bg #2a1f15, border #5a3a22, text #f0a36b. Hover deepens both
• .on (toggled, e.g. selection mode active, Type active): full #D35400 fill, hover lightens to #e26416
• .mono (chord keys): mono font, #9aa0a6 text → #e8eaed on hover
• .grn (Save): #81c995 text at rest; .grn.on (post-confirm) fills #1e8e3e and shows "✓ Saved" for 1500ms

Layout / structure

The bar is a single position: fixed; bottom: 0 element with flex-direction: column.

Row 1 (always visible):

[+ Tab] [Next] [Prev]  |  [^C] [^D] [Clr]  |  [Esc] [Tab] [▲] [▼]

• + Tab is .hi, the rest neutral, ^C ^D Esc Tab ▲ ▼ are .mono.

Row 2 (always visible):

[Sel] [Paste] [Zoom] [Save]  |  [V.Spl] [H.Spl] [Pane] [Kill]  |  [Type]

• Sel, Paste, Type are .hi. Save is .grn. The Type button is the new entry point for the compose bar.

Row 3 — compose (only visible when #mb has class composing):

[          input field           ] [↵] [Send]

• The input is full-width-flex, monospace, autocorrect on. ↵ and Send both flush.

Interactions / behavior

Send to stdin (send(k)): unchanged. Tries term._core.coreService.triggerDataEvent(k) first, falls back to term._core._onData.fire(k), then term.input(k). Always re-focuses the terminal afterward.

Selection mode (Sel): unchanged. Toggles body.selmode which adds pointer-events: none to .xterm-screen and forces text selection. While in selmode the body also gets filter: brightness(.92) for a subtle visual cue. Sending any key auto-exits selmode.

Paste: unchanged. Reads navigator.clipboard.readText() and feeds the result through send(). Alerts if HTTPS clipboard is unavailable.

Save: unchanged behavior — sends \x01S (Ctrl-A S, the tmux capture binding). Adds the .on class and label ✓ Saved for 1500ms, then reverts.

Compose / Type (new):

• Tapping Type toggles the composing class on #mb.
• On open, #mb-compose gets focused via setTimeout(...,0) so iOS/Android keyboards open reliably.
• Input attributes: autocomplete="on" autocorrect="on" autocapitalize="sentences" spellcheck="true" enterkeyhint="send" inputmode="text". These are required — the whole point is to let the OS keyboard's correction layer mutate the input value, which xterm.js's hidden textarea cannot do.
• Pressing Enter (or tapping Send or ↵) calls flushCompose(true): reads the input value, clears it, sends the value as a string to stdin, then sends \r. Re-focuses the input so the user can keep typing.
• Other toolbar buttons remain active while composing. If a chord/arrow/etc. button is tapped with non-empty input text, the typed text is flushed first (preserving order), then the chord is sent. The compose bar stays open; the user is mid-thought.

Layout reflow (relayout()): The terminal pane (.xterm) is sized via height: calc(100vh - {barHeight + 4}px) whenever the bar's height changes. This runs on:

• DOM mutations (existing MutationObserver)
• Window resize
• Toggling the composing class (called from toggleType())

The previous implementation hard-coded calc(100vh - 92px); the new code measures bar.offsetHeight so opening the third row reflows correctly without overlap.

Helper textarea hardening: unchanged. Still sets autocomplete=off, autocorrect=off, autocapitalize=off, spellcheck=false on .xterm-helper-textarea once it appears. This is the standard xterm.js mitigation and is still useful — it prevents Gboard from trying to munge the per-keystroke stream when the user happens to type outside the compose bar.

Mobile breakpoint

The toolbar shows at @media (max-width: 900px). Unchanged. Above that, sethmux assumes a real keyboard and the bar stays hidden.

Why the compose bar is necessary

xterm.js reads from a hidden <textarea> and forwards keydown / keypress events plus IME compositionstart / compositionend to the terminal's data event one keystroke at a time. Mobile keyboards' autocorrect, swipe input, and word predictions don't fire per-key events — they replace the textarea's .value in bulk via input events with inputType: "insertReplacementText" or "insertCompositionText". xterm.js's input handler discards those, so corrections silently fail. The compose bar sidesteps this by giving the OS keyboard a real text field, then sending the assembled string in one shot.

Files in this bundle

File	Purpose
toolbar.js	Ship this. Drop into static/toolbar.js.
preview.html	Minimal mock terminal + the live toolbar.js for in-browser test
preview-desktop.html	Chrome window mock showing the full sethmux UI with tmux tabs
preview-mobile.html	Two Android frames: collapsed state + compose-open state
browser-window.jsx	Used only by preview-desktop.html
android-frame.jsx	Used only by preview-mobile.html

Acceptance checklist

• Bar appears only at viewport widths ≤ 900px.
• All 20 original buttons present and bound to the same key sequences.
• Type button toggles a third row with input + ↵ + Send.
• Pressing Enter inside the input sends the typed text plus \r and clears the field.
• Tapping any other toolbar button while composing flushes the typed text first, then sends the button's key. Compose bar stays open.
• Terminal pane height reflows when the bar grows/shrinks; nothing overlaps.
• Autocorrect / swipe / predictions work in the compose input on Gboard and iOS.
• Save button shows ✓ Saved filled green for 1500ms after tap.
• Sel button toggles to Done (filled orange) and dims the terminal slightly.
• No console errors; window._toolbar guards against double-init.