mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-10-02 13:39:41 +02:00
Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c8ac04662d | ||
|
|
7c2a49d432 | ||
|
|
9b9f2c21e9 |
@@ -210,7 +210,7 @@ Codeman is a Claude Code session manager with web interface and autonomous Ralph
|
||||
|
||||
**Approvals Inbox** (cross-session queue of prompts waiting on a human; `approvalsInboxEnabled`, SYNCED, default OFF: every surface is opt-in; only the store and answer endpoints run regardless, so flipping it ON shows anything already pending): `web/approval-inbox.ts` is a `sessionWaits`-style singleton fed by `/api/hook-event`, holding at most ONE item per session (a new prompt supersedes), claude-mode only, in-memory. Cards are answered via `POST /api/approvals/:id/answer`, which sends a digit / Esc / idle-prompt text through `writeViaMux` (menu answers never carry `\r`). ⚠️ `option` digits are accepted ONLY when they match options parsed from the captured pane frame, and the answer path RE-CAPTURES the pane first (a dialog that no longer parses on screen means the keystroke would land in the composer, so refuse with 409). ⚠️ Resolution on the heuristic `working` signal is restricted to `idle` items; permission/question items clear only on definitive signals (`stop`, `elicitation_complete`/`elicitation_response`, exit/delete, answer, supersede, 12h TTL). The frontend seeds from `GET /api/approvals` in `handleInit` (which is what makes tab alerts survive reloads), but only with the setting ON; push Approve/Deny buttons are also gated on it (`sendPushNotifications` strips `actions`/`approvalId` when OFF) and are answered from `sw.js` directly so they work with no tab open. Surfaces (all gated on the setting): header bell (marker-hidden until count > 0, phones never show it) + drawer (`approvals-ui.js`), phone overview NEEDS YOU answer strips (`mobile-overview.js`). Design: `docs/approvals-inbox-plan.md`.
|
||||
|
||||
**Read My Mind intent profiles** (phase 1 of `docs/readmymind-plan.md`; `readMyMindEnabled`, SYNCED, default OFF): per-CASE profiles (user-stated `goals` + the user's recent real prompts), keyed by owner + realpath(workingDir) so they survive `/clear`/respawns and multi-user scoping is structural. Capture rides the transcript (`transcript:user_prompt` from `transcript-watcher.ts`), NOT the input paths: `POST /input` sees only programmatic prompts and the WS channel is raw keystrokes. The listener lives inside `startTranscriptWatcher()`'s `if (!watcher)` block (outside it would duplicate per hook event) and is claude-only + gated on the setting per event. Store: `src/intent-store.ts` singleton, `intents.json` written 0600 tmp+rename (prompts can contain secrets; never fed to `/api/search`). Endpoints: GET/PUT/DELETE `/api/sessions/:id/intent` + POST `/api/sessions/:id/readmymind` (`readmymind-routes.ts`, ownership via `findSessionOrFail` WITH `req`; registrations stay the bare `app.<method>('path')` shape, the endpoints.md drift scanner cannot see generics). **Phase 2 (predictor + 🧠 button)**: `readmymind-context.ts` is the PURE budgeted assembler (9 ranked sources, drop order siblings→away→workspace→tools, sections 1-4 truncate only); IO lives in `readmymind-collectors.ts` (transcript TAIL read — the live watcher keeps only a 500-char snippet — + git signals, skipped for remote-SSH cases) and the route; `readmymind-predictor.ts` reuses the AiCheckerBase spawn mechanics standalone (verdict-shaped base vs freeform JSON) as a mutable singleton routes call and tests stub. Claude-mode only (400), one in flight per session (409 CONFLICT), model = `readMyMindModel` setting defaulting to `AI_CHECK_MODEL` (opus, decided). Frontend `readmymind-ui.js`: header 🧠 marker-hidden (`btn-readmymind--hidden`) until the setting is ON, desktop; phones get the keyboard-accessory 🧠 key (`refreshReadMyMind()` in keyboard-accessory.js, re-derived after every innerHTML rebuild + settings apply + the tab-render tail; `.accessory-btn[hidden]` must stay re-asserted, inline-flex beats the UA hidden rule) plus a `🧠 Suggest` strip on the overview's YELLOW waiting rows ONLY (on red rows a dialog is on screen and `POST /input` text would land in its menu; answer routing via the approvals endpoint is phase-3 PR 2). Up to 3 kind-diverse suggestions: alternates swap into the editable field, Rethink records everything displayed as rejected and carries the optional steer note (resets each open, like the rejections); suggestions render via value/`textContent` ONLY and Send/Insert go through `POST /input` (server-side, so the sendEnterKey/local-echo trap does not apply) — nothing auto-sends, ever. User guide: `docs/readmymind.md`.
|
||||
**Read My Mind intent profiles** (phase 1 of `docs/readmymind-plan.md`; `readMyMindEnabled`, SYNCED, default OFF): per-CASE profiles (user-stated `goals` + the user's recent real prompts), keyed by owner + realpath(workingDir) so they survive `/clear`/respawns and multi-user scoping is structural. Capture rides the transcript (`transcript:user_prompt` from `transcript-watcher.ts`), NOT the input paths: `POST /input` sees only programmatic prompts and the WS channel is raw keystrokes. The listener lives inside `startTranscriptWatcher()`'s `if (!watcher)` block (outside it would duplicate per hook event) and is claude-only + gated on the setting per event. Store: `src/intent-store.ts` singleton, `intents.json` written 0600 tmp+rename (prompts can contain secrets; never fed to `/api/search`). Endpoints: GET/PUT/DELETE `/api/sessions/:id/intent` + POST `/api/sessions/:id/readmymind` (`readmymind-routes.ts`, ownership via `findSessionOrFail` WITH `req`; registrations stay the bare `app.<method>('path')` shape, the endpoints.md drift scanner cannot see generics). **Phase 2 (predictor + 🧠 button)**: `readmymind-context.ts` is the PURE budgeted assembler (9 ranked sources, drop order siblings→away→workspace→tools, sections 1-4 truncate only); IO lives in `readmymind-collectors.ts` (transcript TAIL read — the live watcher keeps only a 500-char snippet — + git signals, skipped for remote-SSH cases) and the route; `readmymind-predictor.ts` reuses the AiCheckerBase spawn mechanics standalone (verdict-shaped base vs freeform JSON) as a mutable singleton routes call and tests stub. Claude-mode only (400), one in flight per session (409 CONFLICT), model = `readMyMindModel` setting defaulting to `AI_CHECK_MODEL` (opus, decided). Frontend `readmymind-ui.js`: header 🧠 marker-hidden (`btn-readmymind--hidden`) until the setting is ON, desktop-only (mobile.css hides it; phone key is phase 3); suggestions render via value/`textContent` ONLY and Send/Insert go through `POST /input` (server-side, so the sendEnterKey/local-echo trap does not apply) — nothing auto-sends, ever. User guide: `docs/readmymind.md`.
|
||||
|
||||
**Agent Teams**: `TeamWatcher` polls `~/.claude/teams/`, matches to sessions via `leadSessionId`. Teammates are in-process threads appearing as subagents. Enable: `CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1`. See `docs/agent-teams/`.
|
||||
|
||||
@@ -270,6 +270,8 @@ Frontend JS modules have `@fileoverview` with `@dependency`/`@loadorder` tags. L
|
||||
|
||||
**WebGL renderer toggle** (`webglRendererEnabled`, per-device): the GPU-stall watchdog's sticky `codeman-webgl-disabled` marker survives page loads and is cleared only by an explicit OFF→ON save or `?webgl=force`. `?nowebgl` forces the DOM renderer per-load. → [architecture-invariants#webgl-renderer-toggle](docs/architecture-invariants.md#webgl-renderer-toggle)
|
||||
|
||||
**Shell keyboard accessory bar + one-shot Ctrl** (issue #262, `keyboard-accessory.js`): a **shell**-mode session automatically swaps the mobile accessory bar for terminal controls (Ctrl, Esc, Tab, four arrows, paste, dismiss); every other mode keeps the agent bar. `setMode()` now records the user's `extendedKeyboardBar` preference as the **base** layout and `refreshForActiveSession()` (called from `selectSession`) resolves base-vs-shell, so a settings save during a shell session cannot yank the bar away and switching back restores the user's choice. ⚠️ **Ctrl is a ONE-SHOT modifier applied in `terminal.onData`, not in a keydown handler**: a virtual keyboard emits no usable key events, so the character only exists as onData text. The hook sits AFTER `shouldSuppressTerminalQueryResponse` (xterm answers DA/CPR through onData too, and one of those would silently spend the modifier) and BEFORE every send path, so the control byte follows the normal control-char route. ⚠️ **Not every onData chunk is a keystroke**, and the query filter is not enough on its own: xterm ALSO emits mouse and focus reports on its own initiative, so the hook skips them via `isTerminalFocusOrMouseReport()` (they still reach the PTY, they just don't count as the next key). The mouse half is live — a shell session keeps the NARROW strip, so mouse DECSETs reach the browser and one tap while vim/htop runs spent the armed modifier silently (measured). The focus half is defense in depth: `FOCUS_ESCAPE_FILTER` in `session.ts` strips `\x1b[?1004h` from every PTY read, so `sendFocusMode` never turns on today; if it ever did, the bar's own post-key refocus would emit `\x1b[I` and eat the modifier before the user typed. ⚠️ It must disarm on ALL of: use, second tap, any other accessory key, session switch, keyboard dismissal, and a layout swap; a modifier left armed turns the next innocent keystroke into a control byte. ⚠️ **onData is not the only input path** — with `cjkInputEnabled` on, the CJK textarea owns the keyboard (onData returns early for everything it swallows, and the focus router sends `terminal.focus()` there, which is where the bar refocuses after every key), so `_handleCjkInput()` applies the modifier too. It is that module's single choke point to the PTY, so one call covers typed characters, IME flushes, Enter, backspace and arrows. Without it an armed modifier could neither fire NOR be spent, and survived to a later keystroke. Mapping is `ctrlByteFor()` (`code & 0x1f` over @A-Z[\]^_ and a-z, plus Ctrl+Space=NUL / Ctrl+?=DEL); characters with no control equivalent pass through unchanged, like a hardware keyboard. ⚠️ The armed style is `.accessory-btn.accessory-btn-ctrl.armed` (0,3,0) in BOTH stylesheets, and it cannot outrank mobile.css's light-skin repaint at **(0,3,1)** (`:is()` inherits its most specific argument, and that list holds `.btn-toolbar.btn-shell`) — so that rule excludes the state by hand as `.accessory-btn:not(.armed)`. Without the exclusion the armed button renders identically to a resting one on all four light skins, which is worse than no armed style at all.
|
||||
|
||||
**Phone toolbar: Enter replaces Shell** (post-1.8.0): inside `@media (max-width: 430px)` `btn-shell` is `display:none` and `btn-enter` takes its slot (`order: 4`); starting a shell moved into the Run dropdown (`Terminal / Shell` → `setRunMode('shell')` → `run()` → `runShell()`, button label "Run SH"). `runMode` is `z.string().max(20)` server-side, so new modes need no schema change. Desktop and tablet keep the green Run Shell button unchanged.
|
||||
|
||||
⚠️ **`sendEnterKey()` MUST go through `terminal._core.coreService.triggerDataEvent('\r', true)`** — not `sendInput()`, and never a raw POST to `/api/sessions/:id/input`. `localEchoEnabled` defaults to `MobileDetection.isTouchDevice()`, so on every phone the characters you type are buffered in the `LocalEchoOverlay` and have **never reached the PTY**; the `onData` Enter branch in terminal-ui.js is what flushes `pendingText` first and only then sends `\r` (after an 80ms delay so text lands first). Sending a bare `\r` submits an empty line and strands the typed text on screen, so the button looks dead. Replaying the keypress reuses the overlay flush, the flushed-offset cleanup and the ordering instead of reimplementing them. `KeyboardAccessory.sendKey()` is for escape sequences (arrows/Esc) and is the WRONG template to copy for input.
|
||||
|
||||
@@ -122,15 +122,14 @@ Agent use cases this unlocks: a lead session records intentions as the user stat
|
||||
|
||||
## Phases
|
||||
|
||||
1. **Intent store + capture + intent endpoints + skill docs.** Immediately useful to agents even before any UI exists. Shipped 1.16.1 (PR #253).
|
||||
2. **Context assembler + predictor + predict endpoint + desktop button/modal.** The feature as pitched. The assembler ships with all collectors it can serve from day one (transcript, intent, git, run-summary, siblings); the approvals collector activates when PR #245 lands. Shipped 1.16.2 (PR #256).
|
||||
3. **Phase 3, PR 1: alternates row, rethink steering, phone surfaces.** Alternate suggestions as tappable rows that swap into the field; Rethink records everything displayed as rejected and carries the optional steer note; keyboard-accessory 🧠 key (`refreshReadMyMind()`, re-derived after every innerHTML rebuild, settings apply, and session switch); `🧠 Suggest` strip on the phone overview's YELLOW waiting rows only. Red rows deliberately get no shortcut yet: a dialog is on screen there and text sent via `POST /input` would land in its menu.
|
||||
4. **Phase 3, PR 2: the approvals fusion** (the Cloudflare OS learnings tie-in, items 1-2 of `cloudflare-os-learnings-plan.md`). `GET /api/sessions/:id/recap`: a deterministic "what was done, simplified" catch-up (last assistant tail + recent tool one-liners + git state) reusing the phase-2 collectors verbatim; no model call, effectively an observation-ledger v0 whose data source can later swap to a real ledger. Surfaces: collapsible "What happened" on approval cards (lazy-fetched), recap in the modal's loading phase (read while opus thinks), 🧠 on approval cards and red overview rows. Answer-aware Send: the predictor output gains an optional `answer` option number (validated against the pending dialog's parsed options, dropped when invalid) and the modal routes dialog answers through `POST /api/approvals/:id/answer` (option digits / idle text), keeping `POST /input` only for dialog-free sessions.
|
||||
5. Explicitly later: proactive predict-on-idle (ghost suggestion chip), auto-compaction of `recentPrompts` into `goals` via a cheap model, codex/gemini capture, cross-case "global" intent, a model-written prose recap (deterministic-only in v1).
|
||||
1. **Intent store + capture + intent endpoints + skill docs.** Immediately useful to agents even before any UI exists.
|
||||
2. **Context assembler + predictor + predict endpoint + desktop button/modal.** The feature as pitched. The assembler ships with all collectors it can serve from day one (transcript, intent, git, run-summary, siblings); the approvals collector activates when PR #245 lands.
|
||||
3. **Phone accessory key, rethink steering, alternates row.**
|
||||
4. Explicitly later: proactive predict-on-idle (ghost suggestion chip), auto-compaction of `recentPrompts` into `goals` via a cheap model, codex/gemini capture, cross-case "global" intent.
|
||||
|
||||
## Open questions
|
||||
|
||||
- ~~Should Rethink's rejected-suggestion memory persist across modal closes, or reset each open?~~ Decided in phase 2 and kept: reset each open (a fresh open is a fresh question); the steer note resets with it.
|
||||
- Should Rethink's rejected-suggestion memory persist across modal closes, or reset each open?
|
||||
- Is a composer-adjacent placement (next to the toolbar Run controls) better than the header for discoverability?
|
||||
- Pending-dialog input (source #1) consumes the approvals-inbox store (PR #245, merged): the phase-2 collector reads pending items directly from `src/approval-inbox.ts`.
|
||||
|
||||
|
||||
+4
-5
@@ -23,11 +23,11 @@ Add `-u user:password` if your install has `CODEMAN_PASSWORD` set, and drop `-k`
|
||||
|
||||
## The 🧠 button
|
||||
|
||||
On a Claude session, press the brain button in the header (desktop). On phones the same modal opens from the 🧠 key on the keyboard accessory bar, or from the `🧠 Suggest` strip under a yellow waiting row on the phone overview home screen (steer a session without opening its tab). Codeman assembles everything it already knows: your goals, your recent prompts (with your voice: length, tone, shorthand), the tail of the last assistant reply, recent tool activity, git state (branch, dirty files, pending changesets), how long you have been away and what happened meanwhile, sibling sessions in the same case, and any dialog the session is currently waiting on. A one-shot model call (opus by default, `readMyMindModel` to override) turns that into 1-3 kind-diverse suggestions (continue / verify / redirect); the top one lands in an editable field with its rationale, and the others render as tappable alternate rows that swap into the field.
|
||||
On a Claude session, press the brain button in the header (desktop; the phone surface is a planned keyboard-accessory key). Codeman assembles everything it already knows: your goals, your recent prompts (with your voice: length, tone, shorthand), the tail of the last assistant reply, recent tool activity, git state (branch, dirty files, pending changesets), how long you have been away and what happened meanwhile, sibling sessions in the same case, and any dialog the session is currently waiting on. A one-shot model call (opus by default, `readMyMindModel` to override) turns that into 1-3 suggestions; the top one lands in an editable field with its rationale.
|
||||
|
||||
- **Send** submits it to the session (with Enter).
|
||||
- **Insert** drops it on the CLI composer *without* Enter, so you can edit it in the terminal before sending.
|
||||
- **Rethink** re-runs with everything currently displayed recorded as rejected. The optional steer field above the buttons ("no, I meant the mobile bug") tells the re-run what you actually meant; it is your own words and outranks everything the predictor observed.
|
||||
- **Rethink** re-runs with the shown suggestion recorded as rejected.
|
||||
- **Dismiss** closes; nothing happens.
|
||||
|
||||
A prediction takes 5-90 seconds and costs real tokens; one runs per session at a time. If the session is sitting on a permission/question dialog, the suggestion is usually an answer to that dialog: that is intentional.
|
||||
@@ -87,14 +87,13 @@ The `codeman` agent skill documents the same verbs (SKILL.md §3 plus `reference
|
||||
|
||||
## What comes next (phase 3+)
|
||||
|
||||
The approvals fusion: a per-session catch-up recap ("what was done, simplified", derived from the same collectors the predictor uses), shown on Approvals Inbox cards next to a 🧠 button, plus answer-aware Send that routes dialog answers through the approvals endpoint instead of typing into a menu. Explicitly later: proactive predict-on-idle, auto-compaction of the prompt history into goals, non-Claude capture. See the phases section of [`readmymind-plan.md`](readmymind-plan.md).
|
||||
Phone keyboard-accessory 🧠 key, a steer-note input on Rethink, and tappable alternate suggestions. Explicitly later: proactive predict-on-idle, auto-compaction of the prompt history into goals, non-Claude capture. See the phases section of [`readmymind-plan.md`](readmymind-plan.md).
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Symptom | Cause / fix |
|
||||
| ------- | ----------- |
|
||||
| No 🧠 button in the header | `readMyMindEnabled` is OFF (App Settings → Panels), you are on a phone (the header button is desktop-only; phones use the keyboard-accessory 🧠 key and the overview waiting rows), or the active session is not claude-mode |
|
||||
| No 🧠 key on the phone keyboard bar | `readMyMindEnabled` is OFF, or the active session is not claude-mode (the key hides itself for codex/gemini/opencode/antigravity/shell sessions) |
|
||||
| No 🧠 button in the header | `readMyMindEnabled` is OFF (App Settings → Panels), you are on a phone (desktop-only in this phase), or the active session is not claude-mode |
|
||||
| Prediction feels generic | The profile is thin: record goals (PUT or ask your agent to), and let capture accumulate a few real prompts first |
|
||||
| "A prediction is already running" (409) | One per session at a time; wait for the current one (up to 90 s) |
|
||||
| Prediction fails (502) | The model returned no usable JSON, or the CLI could not start; retry. Check `readMyMindModel` if you overrode it |
|
||||
|
||||
@@ -848,9 +848,11 @@ class CodemanApp {
|
||||
SwipeHandler.init();
|
||||
VoiceInput.init();
|
||||
KeyboardAccessoryBar.init();
|
||||
// Apply keyboard bar mode from settings
|
||||
// Apply keyboard bar mode from settings. Always set it (not only when the
|
||||
// extended bar is on) so the bar's remembered agent-session layout matches
|
||||
// the setting before the first shell session swaps in the terminal bar.
|
||||
const _kbSettings = this.loadAppSettingsFromStorage();
|
||||
if (_kbSettings.extendedKeyboardBar) KeyboardAccessoryBar.setMode('extended');
|
||||
KeyboardAccessoryBar.setMode(_kbSettings.extendedKeyboardBar ? 'extended' : 'simple');
|
||||
this.applyHeaderVisibilitySettings();
|
||||
this.restorePlanUsageChip();
|
||||
this.applySkin();
|
||||
@@ -3688,10 +3690,6 @@ class CodemanApp {
|
||||
this._refreshMobileOverviewIfVisible?.();
|
||||
// Same deal for the desktop home screen's tab column.
|
||||
this._refreshHomeSessionsIfVisible?.();
|
||||
// The keyboard accessory bar's 🧠 key depends on the active session's mode
|
||||
// (claude only) and the readMyMindEnabled setting; session switches and
|
||||
// mode changes all funnel through this render.
|
||||
if (typeof KeyboardAccessoryBar !== 'undefined') KeyboardAccessoryBar.refreshReadMyMind?.();
|
||||
}
|
||||
|
||||
// Auto-wrap desktop session tabs to a second row when they overflow one row,
|
||||
@@ -4461,6 +4459,10 @@ class CodemanApp {
|
||||
this.loadAttachmentHistory?.(sessionId);
|
||||
}
|
||||
this._updateLocalEchoState();
|
||||
// Shell sessions get the terminal keyboard bar, agent sessions the command
|
||||
// bar (issue #262). Also disarms a one-shot Ctrl left over from the tab we
|
||||
// just left, so it can never fire against the session we just opened.
|
||||
if (typeof KeyboardAccessoryBar !== 'undefined') KeyboardAccessoryBar.refreshForActiveSession();
|
||||
|
||||
// Restore flushed offset AND text IMMEDIATELY so backspace/typing work during
|
||||
// the async buffer load. Without this, the offset is 0 during the
|
||||
|
||||
@@ -257,8 +257,6 @@
|
||||
'Reading your mind…': '正在读取您的想法…',
|
||||
'No suggestion this time. Rethink to try again.': '这次没有建议。点击「重想」再试一次。',
|
||||
Rethink: '重想',
|
||||
'Steer the rethink (optional): tell it what you actually meant': '引导重想(可选):告诉它您真正的意思',
|
||||
'Optional steer note for Rethink': '重想的可选引导说明',
|
||||
Insert: '插入',
|
||||
"Put the text on the session's composer without submitting it": '将文本放入会话输入框但不提交',
|
||||
'Predicted prompt, editable': '预测的提示,可编辑',
|
||||
|
||||
@@ -2802,7 +2802,7 @@
|
||||
<div class="modal-backdrop" onclick="app.closeReadMyMind()"></div>
|
||||
<div class="modal-content readmymind-modal">
|
||||
<div class="modal-header">
|
||||
<h3><span aria-hidden="true">🧠</span> Read My Mind<span class="readmymind-session" id="readMyMindSession" data-i18n-skip></span></h3>
|
||||
<h3><span aria-hidden="true">🧠</span> Read My Mind</h3>
|
||||
<button class="modal-close" onclick="app.closeReadMyMind()" aria-label="Close">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@@ -2813,18 +2813,14 @@
|
||||
<input type="text" id="readMyMindPrompt" class="readmymind-prompt-input" data-i18n-skip aria-label="Predicted prompt, editable" onkeydown="if(event.key==='Enter')app.sendReadMyMind(true)">
|
||||
</div>
|
||||
<div class="readmymind-why" id="readMyMindWhy" data-i18n-skip></div>
|
||||
<div class="readmymind-alternates" id="readMyMindAlternates" data-i18n-skip></div>
|
||||
</div>
|
||||
<div class="readmymind-error" style="display:none">No suggestion this time. Rethink to try again.</div>
|
||||
<!-- Outside the result div on purpose: steering matters in the error
|
||||
phase too (Rethink retries with the note); hidden only while loading. -->
|
||||
<input type="text" id="readMyMindSteer" class="readmymind-steer-input" style="display:none" placeholder="Steer the rethink (optional): tell it what you actually meant" aria-label="Optional steer note for Rethink" onkeydown="if(event.key==='Enter')app.rethinkReadMyMind()">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" onclick="app.closeReadMyMind()">Dismiss</button>
|
||||
<button class="btn btn-secondary" id="readMyMindRethink" onclick="app.rethinkReadMyMind()">Rethink</button>
|
||||
<button class="btn btn-secondary" id="readMyMindInsert" onclick="app.sendReadMyMind(false)" title="Put the text on the session's composer without submitting it">Insert</button>
|
||||
<button class="btn btn-primary" id="readMyMindSend" onclick="app.sendReadMyMind(true)">Send</button>
|
||||
<button class="btn btn-secondary" onclick="app.sendReadMyMind(false)" title="Put the text on the session's composer without submitting it">Insert</button>
|
||||
<button class="btn btn-primary" onclick="app.sendReadMyMind(true)">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,13 @@
|
||||
* Destructive actions (/clear, /compact, extended bar only) require double-tap confirmation (2s amber state).
|
||||
* Commands are sent as text + Enter separately for Ink compatibility.
|
||||
* Only initializes on touch devices (MobileDetection.isTouchDevice guard).
|
||||
* SHELL sessions get their own layout automatically (issue #262): Ctrl, Esc, Tab,
|
||||
* four arrows, paste, dismiss. Ctrl is a ONE-SHOT modifier: arm it, type a
|
||||
* character on the system keyboard, and terminal-ui.js's onData hook swaps the
|
||||
* character for its control byte (ctrlByteFor) and disarms. That is what makes
|
||||
* Ctrl+C/D/Z/R/L/A/E/W/U/K reachable without a button per chord. It resets on
|
||||
* use, on a second tap, on any other accessory key, on a session switch
|
||||
* (refreshForActiveSession) and when the keyboard is dismissed (hide).
|
||||
* - PathPicker (singleton object) — Lazy server-side file/folder browser shared
|
||||
* by Link Existing and the extended mobile keyboard bar.
|
||||
*
|
||||
@@ -414,12 +421,58 @@ const PathPicker = {
|
||||
// Mobile Keyboard Accessory Bar
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
/**
|
||||
* Control byte a terminal sends for Ctrl+<char> (issue #262).
|
||||
*
|
||||
* Returns null for characters with no control equivalent (digits, most
|
||||
* punctuation): the caller then sends the character unchanged, matching a
|
||||
* hardware keyboard where Ctrl+7 just types "7".
|
||||
*
|
||||
* `code & 0x1f` covers both ranges a terminal maps: @A-Z[\]^_ (64-95 → 0-31)
|
||||
* and a-z (97-122 → 1-26). Space and ? are the two conventional extras
|
||||
* (Ctrl+Space = NUL, Ctrl+? = DEL) and can't come from the mask.
|
||||
*/
|
||||
function ctrlByteFor(char) {
|
||||
if (typeof char !== 'string' || char.length !== 1) return null;
|
||||
const code = char.charCodeAt(0);
|
||||
if (code === 32) return '\x00';
|
||||
if (code === 63) return '\x7f';
|
||||
if ((code >= 64 && code <= 95) || (code >= 97 && code <= 122)) {
|
||||
return String.fromCharCode(code & 0x1f);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply an armed one-shot Ctrl to one chunk of terminal input.
|
||||
* Returns `{ data, consumed }`, where `consumed` tells the bar to disarm.
|
||||
*
|
||||
* Multi-character chunks (pastes, escape sequences, IME commits) have no
|
||||
* single key to modify, but they still spend the modifier: leaving it armed
|
||||
* would silently turn the NEXT innocent keystroke into a control byte.
|
||||
*/
|
||||
function applyOneShotCtrl(data) {
|
||||
if (typeof data !== 'string' || data.length === 0) return { data, consumed: false };
|
||||
if (data.length === 1) {
|
||||
const byte = ctrlByteFor(data);
|
||||
return { data: byte === null ? data : byte, consumed: true };
|
||||
}
|
||||
return { data, consumed: true };
|
||||
}
|
||||
|
||||
/**
|
||||
* KeyboardAccessoryBar - Quick action buttons shown above keyboard when typing.
|
||||
*/
|
||||
const KeyboardAccessoryBar = {
|
||||
element: null,
|
||||
_mode: 'simple', // 'simple' or 'extended'
|
||||
// Layout currently in the DOM: 'simple' | 'extended' | 'shell'.
|
||||
_mode: 'simple',
|
||||
// Layout the user picked for AGENT sessions ('simple' | 'extended', the
|
||||
// extendedKeyboardBar setting). Shell sessions override it with the shell
|
||||
// bar; this is what we come back to when they switch to an agent tab.
|
||||
_baseMode: 'simple',
|
||||
// One-shot Ctrl modifier (shell bar only). See handleAction('ctrl').
|
||||
_ctrlArmed: false,
|
||||
|
||||
/** HTML for simple mode: arrows, commands, paste, Esc, dismiss */
|
||||
_simpleButtons: `
|
||||
@@ -441,7 +494,6 @@ const KeyboardAccessoryBar = {
|
||||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="accessory-btn accessory-btn-readmymind" data-action="readmymind" title="Read My Mind: predict your next prompt" hidden>🧠</button>
|
||||
<button class="accessory-btn" data-action="esc" title="Escape">Esc</button>
|
||||
<button class="accessory-btn accessory-btn-dismiss" data-action="dismiss" title="Dismiss keyboard">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||||
@@ -449,6 +501,45 @@ const KeyboardAccessoryBar = {
|
||||
</svg>
|
||||
</button>`,
|
||||
|
||||
/** HTML for shell mode (issue #262): terminal controls instead of agent
|
||||
* commands. Ctrl is a one-shot modifier rather than one button per chord,
|
||||
* which is what puts Ctrl+C/D/Z/R/L/A/E/W/U/K on a 9-button bar. */
|
||||
_shellButtons: `
|
||||
<button class="accessory-btn accessory-btn-ctrl" data-action="ctrl" title="Ctrl, then tap a key" aria-pressed="false">Ctrl</button>
|
||||
<button class="accessory-btn" data-action="esc" title="Escape">Esc</button>
|
||||
<button class="accessory-btn" data-action="tab" title="Tab">Tab</button>
|
||||
<button class="accessory-btn accessory-btn-arrow" data-action="scroll-up" title="Arrow up">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M5 15l7-7 7 7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="accessory-btn accessory-btn-arrow" data-action="scroll-down" title="Arrow down">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="accessory-btn accessory-btn-arrow" data-action="arrow-left" title="Arrow left">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="accessory-btn accessory-btn-arrow" data-action="arrow-right" title="Arrow right">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<path d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="accessory-btn" data-action="paste" title="Paste from clipboard">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
|
||||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="accessory-btn accessory-btn-dismiss" data-action="dismiss" title="Dismiss keyboard">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||||
<path d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>`,
|
||||
|
||||
/** HTML for extended mode: all keys including arrows, Tab, Esc, etc. */
|
||||
_extendedButtons: `
|
||||
<button class="accessory-btn accessory-btn-arrow" data-action="scroll-up" title="Arrow up">
|
||||
@@ -478,7 +569,6 @@ const KeyboardAccessoryBar = {
|
||||
</svg>
|
||||
</button>
|
||||
<button class="accessory-btn" data-action="pick-path" title="Insert a file or folder path">📁 Path</button>
|
||||
<button class="accessory-btn accessory-btn-readmymind" data-action="readmymind" title="Read My Mind: predict your next prompt" hidden>🧠</button>
|
||||
<button class="accessory-btn" data-action="clear-input" title="Clear the current unsent input">⌫ All</button>
|
||||
<button class="accessory-btn" data-action="tab" title="Tab">Tab</button>
|
||||
<button class="accessory-btn" data-action="shift-tab" title="Shift+Tab">⇧Tab</button>
|
||||
@@ -516,7 +606,7 @@ const KeyboardAccessoryBar = {
|
||||
this.handleAction(action, btn);
|
||||
|
||||
// Refocus terminal so keyboard stays open (tap blurs terminal → keyboard dismisses → toolbar shifts)
|
||||
const refocusActions = new Set(['scroll-up', 'scroll-down', 'arrow-left', 'arrow-right', 'tab', 'shift-tab', 'ctrl-o', 'opt-enter', 'esc', 'effort-max', 'clear-input']);
|
||||
const refocusActions = new Set(['scroll-up', 'scroll-down', 'arrow-left', 'arrow-right', 'tab', 'shift-tab', 'ctrl', 'ctrl-o', 'opt-enter', 'esc', 'effort-max', 'clear-input']);
|
||||
if (refocusActions.has(action) ||
|
||||
((action === 'clear' || action === 'compact') && this._confirmAction)) {
|
||||
if (typeof app !== 'undefined' && app.terminal) {
|
||||
@@ -530,39 +620,93 @@ const KeyboardAccessoryBar = {
|
||||
if (toolbar && toolbar.parentNode) {
|
||||
toolbar.parentNode.insertBefore(this.element, toolbar);
|
||||
}
|
||||
|
||||
this.refreshReadMyMind();
|
||||
},
|
||||
|
||||
/** Switch between 'simple' and 'extended' button layouts */
|
||||
/** Pick the layout the user wants for AGENT sessions ('simple' | 'extended',
|
||||
* the extendedKeyboardBar setting). A shell session keeps the shell bar;
|
||||
* the preference is remembered and applied on the next agent tab. */
|
||||
setMode(mode) {
|
||||
if (mode === this._mode || !this.element) return;
|
||||
this._baseMode = mode === 'extended' ? 'extended' : 'simple';
|
||||
this._applyLayout(this._resolveMode());
|
||||
},
|
||||
|
||||
/** Re-resolve the layout after the active session changed (issue #262):
|
||||
* shell sessions get the terminal bar, everything else the agent bar. Also
|
||||
* disarms Ctrl, because a modifier armed on one session must never fire on
|
||||
* the next one. */
|
||||
refreshForActiveSession() {
|
||||
this.clearCtrl();
|
||||
this._applyLayout(this._resolveMode());
|
||||
},
|
||||
|
||||
/** Which layout the current state calls for. */
|
||||
_resolveMode() {
|
||||
return this._isShellSession() ? 'shell' : this._baseMode;
|
||||
},
|
||||
|
||||
_isShellSession() {
|
||||
if (typeof app === 'undefined' || !app.activeSessionId) return false;
|
||||
return app.sessions?.get(app.activeSessionId)?.mode === 'shell';
|
||||
},
|
||||
|
||||
/** Swap the button set in the DOM. */
|
||||
_applyLayout(mode) {
|
||||
if (!this.element || mode === this._mode) return;
|
||||
this._mode = mode;
|
||||
this.clearConfirm();
|
||||
this.element.innerHTML = mode === 'extended' ? this._extendedButtons : this._simpleButtons;
|
||||
// innerHTML rebuilds ship the 🧠 key with its default `hidden` attribute;
|
||||
// re-derive its visibility for the fresh element.
|
||||
this.refreshReadMyMind();
|
||||
// Reset before the rewrite: _setCtrl() styles the button it can find, and
|
||||
// the one holding the armed class is about to be replaced.
|
||||
this.clearCtrl();
|
||||
this.element.innerHTML =
|
||||
mode === 'shell' ? this._shellButtons : mode === 'extended' ? this._extendedButtons : this._simpleButtons;
|
||||
},
|
||||
|
||||
// ── One-shot Ctrl modifier (shell bar) ──────────────────────────────────
|
||||
// Tap Ctrl, then type a character on the system keyboard: the character is
|
||||
// replaced by its control byte and Ctrl disarms. Tapping Ctrl again cancels.
|
||||
// The interception lives in the terminal onData handler (terminal-ui.js),
|
||||
// which is where system-keyboard input arrives on a phone. A keydown hook
|
||||
// would miss it, since virtual keyboards report no usable key events.
|
||||
|
||||
/** Is the one-shot Ctrl waiting for a key? */
|
||||
isCtrlArmed() {
|
||||
return this._ctrlArmed === true;
|
||||
},
|
||||
|
||||
/** Arm/cancel the one-shot Ctrl (the Ctrl button toggles). */
|
||||
toggleCtrl() {
|
||||
this._setCtrl(!this._ctrlArmed);
|
||||
},
|
||||
|
||||
/** Disarm: used by session switch, keyboard dismissal and every other key. */
|
||||
clearCtrl() {
|
||||
if (this._ctrlArmed) this._setCtrl(false);
|
||||
},
|
||||
|
||||
_setCtrl(on) {
|
||||
this._ctrlArmed = !!on;
|
||||
const btn = this.element?.querySelector('[data-action="ctrl"]');
|
||||
if (btn) {
|
||||
btn.classList.toggle('armed', this._ctrlArmed);
|
||||
btn.setAttribute('aria-pressed', this._ctrlArmed ? 'true' : 'false');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the 🧠 key only when Read My Mind is opted in (`readMyMindEnabled`,
|
||||
* synced) AND the active session is claude mode (the predictor is a 400 on
|
||||
* every other CLI). Called after every innerHTML rebuild, from
|
||||
* applyHeaderVisibilitySettings (settings load/save), and from the tab
|
||||
* renderer tail (session switches funnel through it).
|
||||
* Apply an armed Ctrl to a chunk of typed input and disarm.
|
||||
* Returns the data unchanged (and leaves the modifier alone) when Ctrl is
|
||||
* not armed, so the caller can pipe every keystroke through it.
|
||||
*/
|
||||
refreshReadMyMind() {
|
||||
if (!this.element) return;
|
||||
const btn = this.element.querySelector('[data-action="readmymind"]');
|
||||
if (!btn) return;
|
||||
const hasApp = typeof app !== 'undefined' && app;
|
||||
const session = hasApp && app.activeSessionId ? app.sessions?.get(app.activeSessionId) : null;
|
||||
const enabled = hasApp && app.readMyMindEnabled?.() === true;
|
||||
const claudeMode = !!session && (!session.mode || session.mode === 'claude');
|
||||
btn.hidden = !(enabled && claudeMode);
|
||||
consumeCtrl(data) {
|
||||
if (!this._ctrlArmed) return data;
|
||||
const result = applyOneShotCtrl(data);
|
||||
if (result.consumed) this.clearCtrl();
|
||||
return result.data;
|
||||
},
|
||||
|
||||
/** Exposed for tests: pure char to control byte mapping. */
|
||||
ctrlByteFor,
|
||||
|
||||
_confirmTimer: null,
|
||||
_confirmAction: null,
|
||||
|
||||
@@ -570,7 +714,15 @@ const KeyboardAccessoryBar = {
|
||||
handleAction(action, btn) {
|
||||
if (typeof app === 'undefined' || !app.activeSessionId) return;
|
||||
|
||||
// Any key other than Ctrl itself spends the modifier. It is a one-shot for
|
||||
// the next TYPED character, so an accessory key tapped in between (Esc, an
|
||||
// arrow, paste) must not leave it armed to bite the keystroke after that.
|
||||
if (action !== 'ctrl') this.clearCtrl();
|
||||
|
||||
switch (action) {
|
||||
case 'ctrl':
|
||||
this.toggleCtrl();
|
||||
break;
|
||||
case 'scroll-up':
|
||||
this.sendKey('\x1b[A');
|
||||
break;
|
||||
@@ -638,11 +790,6 @@ const KeyboardAccessoryBar = {
|
||||
case 'pick-path':
|
||||
this.pickPath();
|
||||
break;
|
||||
case 'readmymind':
|
||||
// Opens the shared prediction modal (readmymind-ui.js). Deliberately
|
||||
// not in refocusActions: the modal takes over and the keyboard closes.
|
||||
app.openReadMyMind?.();
|
||||
break;
|
||||
case 'clear-input':
|
||||
app.clearTerminalInput?.();
|
||||
break;
|
||||
@@ -814,6 +961,10 @@ const KeyboardAccessoryBar = {
|
||||
|
||||
/** Hide the accessory bar */
|
||||
hide() {
|
||||
// The bar goes away with the keyboard, so an armed Ctrl has nothing left
|
||||
// to modify, and a modifier the user can no longer see must not survive
|
||||
// to the next time they open the keyboard.
|
||||
this.clearCtrl();
|
||||
if (this.element) {
|
||||
this.element.classList.remove('visible');
|
||||
}
|
||||
|
||||
@@ -642,16 +642,12 @@ Object.assign(CodemanApp.prototype, {
|
||||
// Approvals Inbox: a pending dialog for this session gets an answer strip
|
||||
// BELOW the row (the row itself is a <button>, so actions cannot nest
|
||||
// inside it). Tapping the row still opens the session, unchanged.
|
||||
// Waiting rows get the Read My Mind shortcut strip the same way.
|
||||
const approval = this._pendingApprovalForSession(row.id);
|
||||
const rmmShortcut = !approval && this._readMyMindRowShortcut(row);
|
||||
if (approval || rmmShortcut) {
|
||||
if (approval) {
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'mobile-overview-row-wrap';
|
||||
wrap.appendChild(item);
|
||||
wrap.appendChild(
|
||||
approval ? this._buildMobileOverviewApprovalStrip(approval) : this._buildMobileOverviewRmmStrip(row.id)
|
||||
);
|
||||
wrap.appendChild(this._buildMobileOverviewApprovalStrip(approval));
|
||||
return wrap;
|
||||
}
|
||||
|
||||
@@ -695,39 +691,6 @@ Object.assign(CodemanApp.prototype, {
|
||||
return strip;
|
||||
},
|
||||
|
||||
/**
|
||||
* Whether a NEEDS YOU row gets the Read My Mind shortcut: opt-in setting,
|
||||
* live claude-mode session, and only the `waiting` state. A yellow row is a
|
||||
* bare composer waiting for a prompt; on red rows a dialog is on screen and
|
||||
* sent text would land in its menu, so those keep the approval strip (or the
|
||||
* open-the-session path) until the predictor can answer dialogs through the
|
||||
* approvals endpoint (phase 3 PR 2, docs/readmymind-plan.md).
|
||||
*/
|
||||
_readMyMindRowShortcut(row) {
|
||||
if (row.state !== 'waiting') return false;
|
||||
if (!this.readMyMindEnabled || !this.readMyMindEnabled()) return false;
|
||||
const session = this.sessions.get(row.id);
|
||||
return !!session && (!session.mode || session.mode === 'claude');
|
||||
},
|
||||
|
||||
/** A one-button strip opening the prediction modal for this row's session. */
|
||||
_buildMobileOverviewRmmStrip(sessionId) {
|
||||
const strip = document.createElement('div');
|
||||
strip.className = 'mobile-overview-approval-strip';
|
||||
strip.setAttribute('data-i18n-skip', '');
|
||||
const btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'mobile-overview-approval-btn rmm';
|
||||
btn.textContent = '🧠 Suggest';
|
||||
btn.setAttribute('aria-label', 'Predict my next prompt');
|
||||
btn.addEventListener('click', (ev) => {
|
||||
ev.stopPropagation();
|
||||
this.openReadMyMind(sessionId);
|
||||
});
|
||||
strip.appendChild(btn);
|
||||
return strip;
|
||||
},
|
||||
|
||||
/** A past conversation. Tapping it resumes, which creates a fresh session. */
|
||||
_buildMobileOverviewPastRow(row) {
|
||||
const item = document.createElement('button');
|
||||
|
||||
+23
-24
@@ -530,9 +530,8 @@ html.mobile-init .file-browser-panel {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Read My Mind 🧠 button: desktop header only. The phone surfaces are the
|
||||
keyboard-accessory 🧠 key and the overview's waiting-row Suggest strip
|
||||
(docs/readmymind-plan.md phase 3), both opening the same modal. */
|
||||
/* Read My Mind 🧠 button: desktop header only in phase 2; the phone surface
|
||||
is a planned keyboard-accessory key (docs/readmymind-plan.md phase 3). */
|
||||
.btn-icon-header.btn-readmymind {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -1163,6 +1162,18 @@ html.mobile-init .file-browser-panel {
|
||||
color: #ffd54f;
|
||||
}
|
||||
|
||||
/* Armed one-shot Ctrl (shell bar, issue #262). Phone palette is hardcoded in
|
||||
this block, so the state needs its own entry here. Three classes beat the
|
||||
plain .accessory-btn rules; the light-skin rule at the bottom of this file
|
||||
is higher still at (0,3,1) and is excluded by hand there, not outranked. */
|
||||
.accessory-btn.accessory-btn-ctrl.armed {
|
||||
background: #2563eb;
|
||||
border-color: rgba(59, 130, 246, 0.9);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45);
|
||||
}
|
||||
|
||||
.accessory-btn:active {
|
||||
background: #3a3a3a;
|
||||
}
|
||||
@@ -1291,11 +1302,8 @@ html.mobile-init .file-browser-panel {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Small modals (confirmations, dialogs) — auto-height, not full-screen.
|
||||
Read My Mind is a decision dialog, not a workspace, so it gets the same
|
||||
compact-sheet treatment instead of the full-screen default. */
|
||||
.modal-content.modal-sm,
|
||||
.modal-content.readmymind-modal {
|
||||
/* Small modals (confirmations, dialogs) — auto-height, not full-screen */
|
||||
.modal-content.modal-sm {
|
||||
height: auto;
|
||||
max-height: 85vh;
|
||||
border-radius: 12px;
|
||||
@@ -1303,16 +1311,6 @@ html.mobile-init .file-browser-panel {
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
/* Read My Mind phone polish: iOS zooms the page when focusing sub-16px
|
||||
inputs, and alternate rows are tap targets. */
|
||||
.readmymind-prompt-input,
|
||||
.readmymind-steer-input {
|
||||
font-size: 16px;
|
||||
}
|
||||
.readmymind-alt {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* Modal safe area padding - all sides for full-screen modals */
|
||||
.ios-device .modal-content {
|
||||
padding-top: var(--safe-area-top);
|
||||
@@ -2614,11 +2612,6 @@ html.mobile-init .file-browser-panel {
|
||||
border-color: var(--error);
|
||||
color: var(--error);
|
||||
}
|
||||
/* Read My Mind shortcut on waiting rows (mobile-overview.js). */
|
||||
.mobile-overview-approval-btn.rmm {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Attention states mirror the session tabs exactly: red blink when the agent
|
||||
asked something (permission / question), yellow blink when it is waiting for
|
||||
@@ -2926,7 +2919,13 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="catppuccin-latte"], [data-skin="rose-pine-dawn"]) :is(.btn-voice-mobile, .btn-settings-mobile, .btn-toolbar.btn-shell, .toolbar .btn-case-add, .accessory-btn) {
|
||||
/* `.accessory-btn:not(.armed)` on purpose: this selector is (0,3,1) — `:is()`
|
||||
takes the specificity of its most specific argument, and `.btn-toolbar
|
||||
.btn-shell` is two classes — so it OUTRANKS the (0,3,0) armed-Ctrl rules in
|
||||
both stylesheets and repainted the armed modifier back to a resting button on
|
||||
all four light skins. Excluding the state here fixes phone and tablet at once;
|
||||
adding a class to the armed rules would only have moved the tie. */
|
||||
html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="catppuccin-latte"], [data-skin="rose-pine-dawn"]) :is(.btn-voice-mobile, .btn-settings-mobile, .btn-toolbar.btn-shell, .toolbar .btn-case-add, .accessory-btn:not(.armed)) {
|
||||
background: var(--control-bg);
|
||||
border-color: var(--control-border);
|
||||
color: var(--text-dim);
|
||||
|
||||
+19
-113
@@ -5,16 +5,9 @@
|
||||
* setting is ON) opens a modal that asks the server for the user's most likely
|
||||
* next prompt (`POST /api/sessions/:id/readmymind`, one-shot predictor over the
|
||||
* case's intent profile + live session signals). The top suggestion lands in an
|
||||
* editable single-line field with its rationale below; the predictor returns up
|
||||
* to 3 kind-diverse suggestions (continue / verify / redirect) and the rest
|
||||
* render as tappable alternate rows that swap into the field. Buttons are Send
|
||||
* (with Enter), Insert (drop on the CLI composer WITHOUT Enter, for editing),
|
||||
* Rethink (re-run with every displayed suggestion recorded as rejected, plus an
|
||||
* optional free-text steer note from the field above the buttons), Dismiss.
|
||||
*
|
||||
* Phone surfaces reuse this same modal: the keyboard-accessory 🧠 key
|
||||
* (keyboard-accessory.js) and the phone overview's waiting-row shortcut
|
||||
* (mobile-overview.js) both call openReadMyMind(sessionId).
|
||||
* editable single-line field with its rationale below; buttons are Send (with
|
||||
* Enter), Insert (drop on the CLI composer WITHOUT Enter, for editing), Rethink
|
||||
* (re-run with the shown suggestion recorded as rejected), Dismiss.
|
||||
*
|
||||
* Suggestions are NEVER auto-sent: the explicit click here is the security
|
||||
* boundary for observed/injectable predictor inputs, so suggestion text is
|
||||
@@ -38,14 +31,10 @@ Object.assign(CodemanApp.prototype, {
|
||||
return this.loadAppSettingsFromStorage().readMyMindEnabled === true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Open the modal and start a prediction. Defaults to the active session;
|
||||
* phone surfaces (accessory key, overview rows) pass an explicit id so a
|
||||
* prediction can start without switching tabs first.
|
||||
*/
|
||||
openReadMyMind(sessionId) {
|
||||
const id = sessionId || this.activeSessionId;
|
||||
const session = id ? this.sessions.get(id) : null;
|
||||
/** Open the modal for the active session and start a prediction. */
|
||||
openReadMyMind() {
|
||||
const sessionId = this.activeSessionId;
|
||||
const session = sessionId ? this.sessions.get(sessionId) : null;
|
||||
if (!session) {
|
||||
this.showToast('Select a session first', 'warning');
|
||||
return;
|
||||
@@ -54,15 +43,8 @@ Object.assign(CodemanApp.prototype, {
|
||||
this.showToast('Read My Mind works on Claude sessions only', 'warning');
|
||||
return;
|
||||
}
|
||||
// Rethink memory resets on each open (a fresh open is a fresh question),
|
||||
// and so does the steer note (it belongs to the question it steered).
|
||||
this._rmm = { sessionId: id, shown: null, alternates: [], rejected: [], busy: false };
|
||||
const steer = document.getElementById('readMyMindSteer');
|
||||
if (steer) steer.value = '';
|
||||
// Name the target in the header: overview rows and the accessory key can
|
||||
// open this for a session that is not the active tab.
|
||||
const sessionLabel = document.getElementById('readMyMindSession');
|
||||
if (sessionLabel) sessionLabel.textContent = this.getSessionName?.(session) || session.name || '';
|
||||
// Rethink memory resets on each open (a fresh open is a fresh question).
|
||||
this._rmm = { sessionId, shown: null, rejected: [], busy: false };
|
||||
document.getElementById('readMyMindModal')?.classList.add('active');
|
||||
this._readMyMindPredict();
|
||||
},
|
||||
@@ -72,25 +54,14 @@ Object.assign(CodemanApp.prototype, {
|
||||
this._rmm = null;
|
||||
},
|
||||
|
||||
/** Run (or re-run) the prediction and render the suggestions. */
|
||||
/** Run (or re-run) the prediction and render the top suggestion. */
|
||||
async _readMyMindPredict() {
|
||||
const state = this._rmm;
|
||||
if (!state || state.busy) return;
|
||||
state.busy = true;
|
||||
this._rmmSetPhase('loading');
|
||||
|
||||
const body = {};
|
||||
if (state.rejected.length > 0) body.rejected = state.rejected.slice(-10);
|
||||
// The steer note is the user's own words; server-side it rides in the
|
||||
// highest-authority context tier. Bounds mirror ReadMyMindPredictSchema.
|
||||
const steerEl = document.getElementById('readMyMindSteer');
|
||||
const steer = steerEl
|
||||
? steerEl.value
|
||||
.replace(/[\r\n]+/g, ' ')
|
||||
.trim()
|
||||
.slice(0, 2000)
|
||||
: '';
|
||||
if (steer) body.steer = steer;
|
||||
const body = state.rejected.length > 0 ? { rejected: state.rejected.slice(-10) } : {};
|
||||
const data = await this._apiJson(`/api/sessions/${state.sessionId}/readmymind`, { method: 'POST', body });
|
||||
|
||||
// The modal may have been dismissed (or reopened for another session) while
|
||||
@@ -98,21 +69,14 @@ Object.assign(CodemanApp.prototype, {
|
||||
if (this._rmm !== state) return;
|
||||
state.busy = false;
|
||||
|
||||
const suggestions = (data && data.suggestions) || [];
|
||||
if (suggestions.length === 0) {
|
||||
const suggestion = data && data.suggestions && data.suggestions[0];
|
||||
if (!suggestion) {
|
||||
this._rmmSetPhase('error');
|
||||
return;
|
||||
}
|
||||
state.shown = suggestions[0];
|
||||
state.alternates = suggestions.slice(1);
|
||||
state.shown = suggestion;
|
||||
this._rmmSetPhase('ready');
|
||||
this._rmmShowSuggestion(state.shown);
|
||||
this._rmmRenderAlternates();
|
||||
document.getElementById('readMyMindPrompt')?.focus();
|
||||
},
|
||||
|
||||
/** Paint one suggestion into the editable field, kind chip, and rationale. */
|
||||
_rmmShowSuggestion(suggestion) {
|
||||
const input = document.getElementById('readMyMindPrompt');
|
||||
const why = document.getElementById('readMyMindWhy');
|
||||
const kind = document.getElementById('readMyMindKind');
|
||||
@@ -124,49 +88,7 @@ Object.assign(CodemanApp.prototype, {
|
||||
kind.textContent = suggestion.kind || 'continue';
|
||||
kind.className = `readmymind-kind readmymind-kind-${suggestion.kind || 'continue'}`;
|
||||
}
|
||||
},
|
||||
|
||||
/** The non-primary suggestions as tappable rows below the rationale. */
|
||||
_rmmRenderAlternates() {
|
||||
const state = this._rmm;
|
||||
const box = document.getElementById('readMyMindAlternates');
|
||||
if (!box) return;
|
||||
box.textContent = '';
|
||||
if (!state) return;
|
||||
state.alternates.forEach((alt, i) => {
|
||||
const row = document.createElement('button');
|
||||
row.type = 'button';
|
||||
row.className = 'readmymind-alt';
|
||||
const kind = document.createElement('span');
|
||||
kind.className = `readmymind-kind readmymind-kind-${alt.kind || 'continue'}`;
|
||||
kind.textContent = alt.kind || 'continue';
|
||||
const col = document.createElement('span');
|
||||
col.className = 'readmymind-alt-col';
|
||||
const text = document.createElement('span');
|
||||
text.className = 'readmymind-alt-text';
|
||||
text.textContent = alt.prompt;
|
||||
col.appendChild(text);
|
||||
// The rationale as a visible second line: phones have no hover, and the
|
||||
// why is what separates two plausible-looking prompts.
|
||||
if (alt.why) {
|
||||
const why = document.createElement('span');
|
||||
why.className = 'readmymind-alt-why';
|
||||
why.textContent = alt.why;
|
||||
col.appendChild(why);
|
||||
}
|
||||
row.appendChild(kind);
|
||||
row.appendChild(col);
|
||||
row.addEventListener('click', () => {
|
||||
// Swap: the tapped alternate becomes the shown suggestion and the
|
||||
// previously shown one takes its row, so browsing loses nothing.
|
||||
const prev = state.shown;
|
||||
state.shown = alt;
|
||||
state.alternates[i] = prev;
|
||||
this._rmmShowSuggestion(alt);
|
||||
this._rmmRenderAlternates();
|
||||
});
|
||||
box.appendChild(row);
|
||||
});
|
||||
input?.focus();
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -192,19 +114,11 @@ Object.assign(CodemanApp.prototype, {
|
||||
this.showToast(withEnter ? 'Prompt sent' : 'Inserted, press Enter in the terminal to send', 'success');
|
||||
},
|
||||
|
||||
/**
|
||||
* Re-run with every displayed suggestion recorded as a rejection (the user
|
||||
* saw them all and wanted none: strong negative signal) plus the optional
|
||||
* steer note, read by _readMyMindPredict from its field.
|
||||
*/
|
||||
/** Re-run with the shown suggestion recorded as a rejection. */
|
||||
rethinkReadMyMind() {
|
||||
const state = this._rmm;
|
||||
if (!state || state.busy) return;
|
||||
for (const s of [state.shown, ...state.alternates]) {
|
||||
if (!s || !s.prompt) continue;
|
||||
const prompt = s.prompt.slice(0, 1000);
|
||||
if (!state.rejected.includes(prompt)) state.rejected.push(prompt);
|
||||
}
|
||||
if (state.shown && state.shown.prompt) state.rejected.push(state.shown.prompt);
|
||||
this._readMyMindPredict();
|
||||
},
|
||||
|
||||
@@ -215,15 +129,7 @@ Object.assign(CodemanApp.prototype, {
|
||||
modal.querySelector('.readmymind-loading').style.display = phase === 'loading' ? '' : 'none';
|
||||
modal.querySelector('.readmymind-result').style.display = phase === 'ready' ? '' : 'none';
|
||||
modal.querySelector('.readmymind-error').style.display = phase === 'error' ? '' : 'none';
|
||||
// The steer field shows in ready AND error phases: steering a failed run's
|
||||
// retry is exactly when a note helps. Hidden only while loading.
|
||||
const steer = document.getElementById('readMyMindSteer');
|
||||
if (steer) steer.style.display = phase === 'loading' ? 'none' : '';
|
||||
// While the predictor runs the hidden field still holds the previous text;
|
||||
// freeze every action so a stale suggestion cannot be sent mid-rethink.
|
||||
for (const btnId of ['readMyMindRethink', 'readMyMindInsert', 'readMyMindSend']) {
|
||||
const btn = document.getElementById(btnId);
|
||||
if (btn) btn.disabled = phase === 'loading';
|
||||
}
|
||||
const rethinkBtn = document.getElementById('readMyMindRethink');
|
||||
if (rethinkBtn) rethinkBtn.disabled = phase === 'loading';
|
||||
},
|
||||
});
|
||||
|
||||
@@ -2117,9 +2117,6 @@ Object.assign(CodemanApp.prototype, {
|
||||
if (readMyMindBtn) {
|
||||
readMyMindBtn.classList.toggle('btn-readmymind--hidden', settings.readMyMindEnabled !== true);
|
||||
}
|
||||
// The phone accessory bar's 🧠 key follows the same setting (plus the
|
||||
// active session's mode); keep it in step on every settings apply.
|
||||
if (typeof KeyboardAccessoryBar !== 'undefined') KeyboardAccessoryBar.refreshReadMyMind?.();
|
||||
|
||||
// Plan-usage chip — shown by default on desktop, OFF on handhelds (App
|
||||
// Settings → Display → "Plan Usage Limits"). The template always ships it
|
||||
|
||||
+14
-87
@@ -10697,17 +10697,6 @@ kbd {
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
}
|
||||
/* Which session the prediction targets: overview rows and the accessory key
|
||||
can open the modal for a session that is not the active tab. */
|
||||
.readmymind-session {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.readmymind-session:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Read My Mind modal: top suggestion in an editable single-line field with the
|
||||
kind badge beside it and the rationale below. */
|
||||
@@ -10764,75 +10753,6 @@ kbd {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
/* Alternates: the predictor's other kind-diverse suggestions (verify /
|
||||
redirect) as tappable rows; tapping swaps one into the editable field.
|
||||
Text is set via textContent only (predictor output is observed/injectable
|
||||
content, same rule as the field above). */
|
||||
.readmymind-alternates {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.readmymind-alternates:empty {
|
||||
display: none;
|
||||
}
|
||||
.readmymind-alt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 7px 9px;
|
||||
background: var(--bg-dark);
|
||||
border: 1px solid var(--control-border);
|
||||
border-radius: 8px;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
.readmymind-alt:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.readmymind-alt-col {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.readmymind-alt-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
}
|
||||
/* Rationale as a visible second line: phones have no hover for a title tip,
|
||||
and the why is what separates two plausible-looking prompts. */
|
||||
.readmymind-alt-why {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
/* Steer note: optional free-text guidance for Rethink ("no, I meant the
|
||||
mobile bug"); sent as the highest-authority tier of the re-run's context. */
|
||||
.readmymind-steer-input {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
padding: 7px 9px;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
border: 1px dashed var(--control-border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.readmymind-steer-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
border-style: solid;
|
||||
}
|
||||
.readmymind-error {
|
||||
padding: 12px 4px;
|
||||
color: var(--text-dim);
|
||||
@@ -12155,19 +12075,26 @@ body.touch-device.cjk-input-visible .main {
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
/* The 🧠 key ships `hidden` until refreshReadMyMind() reveals it; the
|
||||
inline-flex rules above (and mobile.css's) beat the UA [hidden] rule, so
|
||||
hiding must be re-asserted, same trap as the home-sessions column. */
|
||||
.accessory-btn[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.accessory-btn.confirming {
|
||||
background: color-mix(in srgb, var(--yellow) 18%, var(--bg-input));
|
||||
border-color: var(--yellow);
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
/* Armed one-shot Ctrl (shell bar, issue #262). Three classes on purpose, to beat
|
||||
the plain .accessory-btn rules. It still cannot outrank the light-skin
|
||||
compatibility rule in mobile.css, which repaints every .accessory-btn at
|
||||
(0,3,1) — `:is()` inherits its most specific argument — so that rule excludes
|
||||
`.armed` by hand. Without the exclusion the modifier looks unarmed on the four
|
||||
light skins, which is worse than having no armed style at all. */
|
||||
.accessory-btn.accessory-btn-ctrl.armed {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
font-weight: 700;
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
|
||||
}
|
||||
|
||||
.accessory-btn:active {
|
||||
background: var(--control-bg-hover);
|
||||
}
|
||||
|
||||
@@ -15,6 +15,15 @@
|
||||
(function (global) {
|
||||
const TERMINAL_QUERY_RESPONSE_PATTERN = /^\x1b\[[\?>=]?[\d;]*[cnR]$/;
|
||||
const TERMINAL_OSC_RESPONSE_PATTERN = /^\x1b\][\d;]*[^\x07\x1b]*(?:\x07|\x1b\\)$/;
|
||||
// Pointer and focus reports xterm emits through onData on the terminal's OWN
|
||||
// initiative, with no key pressed: SGR mouse (DECSET 1006, also 1016), legacy
|
||||
// X10 mouse (DECSET 1000 — three raw bytes after CSI M) and focus in/out
|
||||
// (DECSET 1004). They are not query REPLIES, so the query-response filter
|
||||
// above does not match them, and they must keep reaching the PTY. What they
|
||||
// must NOT do is stand in for a keystroke: see isTerminalFocusOrMouseReport.
|
||||
const MOUSE_SGR_REPORT_PATTERN = /^\x1b\[<\d+;\d+;\d+[Mm]$/;
|
||||
const MOUSE_X10_REPORT_PATTERN = /^\x1b\[M[\s\S]{3}$/;
|
||||
const FOCUS_REPORT_PATTERN = /^\x1b\[[IO]$/;
|
||||
// Grace window after a manual scroll-up gesture during which sticky-scroll is
|
||||
// suppressed, so high-frequency Codex status redraws don't snap the viewport
|
||||
// back to the bottom while the user is inspecting earlier output.
|
||||
@@ -106,6 +115,30 @@
|
||||
return isTerminalQueryResponse(data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Did the terminal generate this chunk itself, rather than a human pressing a
|
||||
* key? True for mouse and focus reports (issue #262).
|
||||
*
|
||||
* Consumers that treat one onData chunk as "the next keystroke" must skip
|
||||
* these. The one-shot Ctrl modifier is why this exists, and the MOUSE half is
|
||||
* the live one: a shell session keeps the narrow scrollback strip, so mouse
|
||||
* DECSETs reach the browser and anything the user runs that enables tracking
|
||||
* (vim, htop, less) turns a tap into `\x1b[<0;31;23M`. Measured in a real
|
||||
* shell session: with Ctrl armed, one tap on the terminal spent it silently.
|
||||
*
|
||||
* Focus reports are the same class and cost nothing to cover, but they cannot
|
||||
* reach xterm today: `FOCUS_ESCAPE_FILTER` in session.ts strips `\x1b[?1004h`
|
||||
* (and the reports themselves) from every PTY read, so `sendFocusMode` never
|
||||
* turns on. Were that filter to go, the Ctrl button would spend the modifier
|
||||
* on its OWN refocus — the bar refocuses the terminal after every key so the
|
||||
* keyboard stays open, and that refocus emits `\x1b[I`.
|
||||
*/
|
||||
function isTerminalFocusOrMouseReport(data) {
|
||||
return (
|
||||
FOCUS_REPORT_PATTERN.test(data) || MOUSE_SGR_REPORT_PATTERN.test(data) || MOUSE_X10_REPORT_PATTERN.test(data)
|
||||
);
|
||||
}
|
||||
|
||||
// Per-skin xterm.js palettes. The 'daylight-blue' object equals the legacy hardcoded
|
||||
// theme, so default behavior is unchanged. Shared at module scope and exported on the
|
||||
// global so both terminal-ui.js (main terminal) and panels-ui.js (teammate terminals,
|
||||
@@ -134,6 +167,7 @@
|
||||
global.CodemanTerminalInput = {
|
||||
isTerminalQueryResponse,
|
||||
shouldSuppressTerminalQueryResponse,
|
||||
isTerminalFocusOrMouseReport,
|
||||
isComposerNavKey,
|
||||
classifyPredictInput,
|
||||
isCodexComposerRow,
|
||||
@@ -930,6 +964,28 @@ Object.assign(CodemanApp.prototype, {
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
// ── One-shot Ctrl (mobile shell bar, issue #262) ──
|
||||
// A virtual keyboard reports no usable key events, so a keydown hook
|
||||
// would never see the character the modifier applies to: it arrives
|
||||
// here as onData text. Sits AFTER the query-response filter so xterm's
|
||||
// own DA/CPR replies can never spend the modifier, and BEFORE every
|
||||
// send path so the control byte follows the normal control-char route
|
||||
// (immediate flush, local-echo state cleared).
|
||||
//
|
||||
// Mouse and focus reports are skipped rather than suppressed: they are
|
||||
// real bytes the PTY still needs, they just were not typed by anyone.
|
||||
// A shell session passes mouse DECSETs through, so with vim or htop
|
||||
// running, one tap on the terminal used to spend the modifier silently
|
||||
// (measured against a real shell). See isTerminalFocusOrMouseReport.
|
||||
if (
|
||||
typeof KeyboardAccessoryBar !== 'undefined' &&
|
||||
KeyboardAccessoryBar.isCtrlArmed?.() &&
|
||||
!window.CodemanTerminalInput?.isTerminalFocusOrMouseReport(data)
|
||||
) {
|
||||
data = KeyboardAccessoryBar.consumeCtrl(data);
|
||||
}
|
||||
|
||||
this._lastTerminalData = { data, time: performance.now() };
|
||||
|
||||
// ── Local Echo Pass-through ──
|
||||
@@ -2584,6 +2640,20 @@ Object.assign(CodemanApp.prototype, {
|
||||
_crashDiag.log(`CJK send DROP no-session len=${text.length}`);
|
||||
return;
|
||||
}
|
||||
// ── One-shot Ctrl (mobile shell bar, issue #262) ──
|
||||
// While the CJK field is visible it OWNS the keyboard: onData returns early
|
||||
// for everything it swallows, and the focus router even redirects
|
||||
// terminal.focus() into it — which is where the accessory bar sends focus
|
||||
// after every key. So the onData hook never sees these keystrokes, and an
|
||||
// armed modifier could neither fire NOR be spent: it survived until a
|
||||
// session switch and then turned an innocent keystroke into a control byte.
|
||||
// This is the module's single choke point to the PTY, so applying it here
|
||||
// covers typed characters, IME flushes, Enter, backspace and arrows at once.
|
||||
// Same policy as the onData hook: the next single character is modified,
|
||||
// anything longer merely spends the modifier.
|
||||
if (typeof KeyboardAccessoryBar !== 'undefined' && KeyboardAccessoryBar.isCtrlArmed?.()) {
|
||||
text = KeyboardAccessoryBar.consumeCtrl(text);
|
||||
}
|
||||
// Bypasses onData (like insertTerminalText): predictions cannot see this
|
||||
if (this._localEchoPolicy === 'predict') this._predictiveEcho?.clearPredictions();
|
||||
_crashDiag.log(`CJK send→${this.activeSessionId.slice(0, 8)} len=${text.length}`);
|
||||
|
||||
@@ -0,0 +1,567 @@
|
||||
/**
|
||||
* @fileoverview Shell-specific mobile keyboard bar and its one-shot Ctrl
|
||||
* modifier (issue #262).
|
||||
*
|
||||
* The bar is a `const` singleton in a non-module script, so it is loaded with
|
||||
* `vm` against a small fake DOM (no jsdom in this repo), the same approach as
|
||||
* test/path-picker-ui.test.ts. What matters here is the state machine: which
|
||||
* layout a session gets, when the modifier arms, what byte a keystroke turns
|
||||
* into, and every path that must disarm it. Behavior against a real shell
|
||||
* (Ctrl+C reaching the PTY) is covered in test/mobile/keyboard.test.ts.
|
||||
*/
|
||||
import { readFileSync } from 'node:fs';
|
||||
import { resolve } from 'node:path';
|
||||
import vm from 'node:vm';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
|
||||
const keyboardSource = readFileSync(resolve('src/web/public/keyboard-accessory.js'), 'utf8');
|
||||
const terminalSource = readFileSync(resolve('src/web/public/terminal-ui.js'), 'utf8');
|
||||
|
||||
type TerminalInput = { isTerminalFocusOrMouseReport(data: string): boolean };
|
||||
type TerminalModule = {
|
||||
terminalInput: TerminalInput;
|
||||
CodemanApp: { prototype: Record<string, (...args: never[]) => unknown> };
|
||||
bar: Bar;
|
||||
};
|
||||
let terminalModule: TerminalModule | null = null;
|
||||
|
||||
/**
|
||||
* terminal-ui.js in a vm, with the REAL accessory bar in the same script scope
|
||||
* (it is a `const` singleton, so only a shared scope makes the bare
|
||||
* `KeyboardAccessoryBar` reference in the CJK path resolve). Its IIFE only
|
||||
* needs a window to hang `CodemanTerminalInput` on, but the rest of the file
|
||||
* assigns to CodemanApp.prototype at top level, so constants.js + app.js load
|
||||
* first — the same recipe as test/local-echo-codex-gating.test.ts.
|
||||
*/
|
||||
function loadTerminalModule(): TerminalModule {
|
||||
if (terminalModule) return terminalModule;
|
||||
const read = (file: string) => readFileSync(resolve(`src/web/public/${file}`), 'utf8');
|
||||
const windowStub: Record<string, unknown> = { addEventListener: vi.fn(), removeEventListener: vi.fn() };
|
||||
const context = vm.createContext({
|
||||
console,
|
||||
setInterval: vi.fn(),
|
||||
clearInterval: vi.fn(),
|
||||
setTimeout,
|
||||
clearTimeout,
|
||||
requestAnimationFrame: vi.fn(),
|
||||
HTMLCanvasElement: class HTMLCanvasElement {},
|
||||
WebSocket: { OPEN: 1 },
|
||||
fetch: vi.fn(),
|
||||
URLSearchParams,
|
||||
document: { addEventListener: vi.fn(), documentElement: { dataset: {} }, getElementById: () => null },
|
||||
localStorage: { length: 0, key: vi.fn(), getItem: vi.fn(), setItem: vi.fn(), removeItem: vi.fn() },
|
||||
window: windowStub,
|
||||
MobileDetection: { isTouchDevice: () => true, isHandheldDevice: () => false, getDeviceType: () => 'desktop' },
|
||||
});
|
||||
vm.runInContext(
|
||||
`${read('constants.js')}\n${keyboardSource}\n${read('app.js')}\n${terminalSource}\n` +
|
||||
`globalThis.__CodemanApp = CodemanApp; globalThis.__bar = KeyboardAccessoryBar;`,
|
||||
context
|
||||
);
|
||||
const exported = context as unknown as { __CodemanApp: TerminalModule['CodemanApp']; __bar: Bar };
|
||||
terminalModule = {
|
||||
terminalInput: (windowStub as { CodemanTerminalInput?: TerminalInput }).CodemanTerminalInput!,
|
||||
CodemanApp: exported.__CodemanApp,
|
||||
bar: exported.__bar,
|
||||
};
|
||||
return terminalModule;
|
||||
}
|
||||
|
||||
function loadTerminalInput(): TerminalInput {
|
||||
return loadTerminalModule().terminalInput;
|
||||
}
|
||||
|
||||
type FakeButton = {
|
||||
dataset: { action: string };
|
||||
classList: { has: Set<string>; toggle(name: string, on: boolean): void; contains(name: string): boolean };
|
||||
attrs: Record<string, string>;
|
||||
setAttribute(name: string, value: string): void;
|
||||
};
|
||||
|
||||
function fakeButton(action: string): FakeButton {
|
||||
const has = new Set<string>();
|
||||
return {
|
||||
dataset: { action },
|
||||
classList: {
|
||||
has,
|
||||
toggle(name: string, on: boolean) {
|
||||
if (on) has.add(name);
|
||||
else has.delete(name);
|
||||
},
|
||||
contains: (name: string) => has.has(name),
|
||||
},
|
||||
attrs: {},
|
||||
setAttribute(name: string, value: string) {
|
||||
this.attrs[name] = value;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/** Fake bar element: tracks the button set parsed out of the assigned HTML. */
|
||||
function fakeBarElement() {
|
||||
let html = '';
|
||||
let buttons = new Map<string, FakeButton>();
|
||||
const classes = new Set<string>();
|
||||
return {
|
||||
className: '',
|
||||
classList: {
|
||||
add: (name: string) => classes.add(name),
|
||||
remove: (name: string) => classes.delete(name),
|
||||
contains: (name: string) => classes.has(name),
|
||||
},
|
||||
get innerHTML() {
|
||||
return html;
|
||||
},
|
||||
set innerHTML(next: string) {
|
||||
html = next;
|
||||
buttons = new Map();
|
||||
for (const match of next.matchAll(/data-action="([^"]+)"/g)) {
|
||||
buttons.set(match[1], fakeButton(match[1]));
|
||||
}
|
||||
},
|
||||
get actions() {
|
||||
return [...buttons.keys()];
|
||||
},
|
||||
querySelector(selector: string) {
|
||||
const match = /\[data-action="([^"]+)"\]/.exec(selector);
|
||||
return match ? (buttons.get(match[1]) ?? null) : null;
|
||||
},
|
||||
addEventListener: vi.fn(),
|
||||
};
|
||||
}
|
||||
|
||||
type Bar = {
|
||||
element: ReturnType<typeof fakeBarElement>;
|
||||
_mode: string;
|
||||
init(): void;
|
||||
setMode(mode: string): void;
|
||||
refreshForActiveSession(): void;
|
||||
handleAction(action: string, btn?: unknown): void;
|
||||
isCtrlArmed(): boolean;
|
||||
toggleCtrl(): void;
|
||||
clearCtrl(): void;
|
||||
consumeCtrl(data: string): string;
|
||||
ctrlByteFor(char: string): string | null;
|
||||
hide(): void;
|
||||
show(): void;
|
||||
};
|
||||
|
||||
function loadBar(sessionMode = 'claude') {
|
||||
const app = {
|
||||
activeSessionId: 'session-1',
|
||||
sessions: new Map<string, { mode: string }>([['session-1', { mode: sessionMode }]]),
|
||||
terminal: { focus: vi.fn() },
|
||||
};
|
||||
const fetchMock = vi.fn(() => Promise.resolve({ ok: true, catch: () => {} }));
|
||||
const barElement = fakeBarElement();
|
||||
const context = vm.createContext({
|
||||
app,
|
||||
MobileDetection: { isTouchDevice: () => true },
|
||||
URLSearchParams,
|
||||
fetch: fetchMock,
|
||||
document: {
|
||||
createElement: () => barElement,
|
||||
querySelector: () => ({ parentNode: { insertBefore: vi.fn() } }),
|
||||
},
|
||||
setTimeout: (fn: () => void) => {
|
||||
fn();
|
||||
return 1;
|
||||
},
|
||||
clearTimeout: vi.fn(),
|
||||
});
|
||||
vm.runInContext(`${keyboardSource}\nglobalThis.__bar = KeyboardAccessoryBar;`, context, {
|
||||
filename: 'keyboard-accessory.js',
|
||||
});
|
||||
const bar = (context as unknown as { __bar: Bar }).__bar;
|
||||
bar.init();
|
||||
return { app, bar, barElement, fetchMock };
|
||||
}
|
||||
|
||||
describe('ctrlByteFor: character to control byte', () => {
|
||||
const { bar } = loadBar();
|
||||
|
||||
it.each([
|
||||
['c', '\x03'], // interrupt
|
||||
['d', '\x04'], // EOF
|
||||
['z', '\x1a'], // suspend
|
||||
['r', '\x12'], // reverse search
|
||||
['l', '\x0c'], // clear
|
||||
['a', '\x01'],
|
||||
['e', '\x05'],
|
||||
['w', '\x17'],
|
||||
['u', '\x15'],
|
||||
['k', '\x0b'],
|
||||
])('maps %s to its control byte', (char, byte) => {
|
||||
expect(bar.ctrlByteFor(char)).toBe(byte);
|
||||
});
|
||||
|
||||
it('maps uppercase the same as lowercase (Ctrl+C == Ctrl+c)', () => {
|
||||
expect(bar.ctrlByteFor('C')).toBe('\x03');
|
||||
expect(bar.ctrlByteFor('D')).toBe('\x04');
|
||||
});
|
||||
|
||||
it('maps the punctuation controls a terminal defines', () => {
|
||||
expect(bar.ctrlByteFor('@')).toBe('\x00');
|
||||
expect(bar.ctrlByteFor('[')).toBe('\x1b'); // Ctrl+[ is Escape
|
||||
expect(bar.ctrlByteFor('\\')).toBe('\x1c');
|
||||
expect(bar.ctrlByteFor(']')).toBe('\x1d');
|
||||
expect(bar.ctrlByteFor('^')).toBe('\x1e');
|
||||
expect(bar.ctrlByteFor('_')).toBe('\x1f');
|
||||
expect(bar.ctrlByteFor(' ')).toBe('\x00'); // Ctrl+Space = NUL
|
||||
expect(bar.ctrlByteFor('?')).toBe('\x7f'); // Ctrl+? = DEL
|
||||
});
|
||||
|
||||
it('returns null for characters with no control equivalent', () => {
|
||||
// A hardware keyboard types these straight through under Ctrl.
|
||||
for (const char of ['1', '9', '.', ',', '/', '-', '=', 'é']) {
|
||||
expect(bar.ctrlByteFor(char)).toBeNull();
|
||||
}
|
||||
expect(bar.ctrlByteFor('ab')).toBeNull();
|
||||
expect(bar.ctrlByteFor('')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('shell keyboard bar selection', () => {
|
||||
it('gives a shell session the terminal bar', () => {
|
||||
const { bar, barElement } = loadBar('shell');
|
||||
bar.refreshForActiveSession();
|
||||
expect(bar._mode).toBe('shell');
|
||||
expect(barElement.actions).toEqual([
|
||||
'ctrl',
|
||||
'esc',
|
||||
'tab',
|
||||
'scroll-up',
|
||||
'scroll-down',
|
||||
'arrow-left',
|
||||
'arrow-right',
|
||||
'paste',
|
||||
'dismiss',
|
||||
]);
|
||||
});
|
||||
|
||||
it.each(['claude', 'codex', 'opencode', 'gemini', 'antigravity'])('leaves a %s session on the agent bar', (mode) => {
|
||||
const { bar, barElement } = loadBar(mode);
|
||||
bar.refreshForActiveSession();
|
||||
expect(bar._mode).toBe('simple');
|
||||
expect(barElement.actions).toContain('init');
|
||||
expect(barElement.actions).not.toContain('ctrl');
|
||||
});
|
||||
|
||||
it('remembers the extended-bar preference across a shell session', () => {
|
||||
const { app, bar, barElement } = loadBar('claude');
|
||||
bar.setMode('extended');
|
||||
expect(bar._mode).toBe('extended');
|
||||
|
||||
app.sessions.set('shell-1', { mode: 'shell' });
|
||||
app.activeSessionId = 'shell-1';
|
||||
bar.refreshForActiveSession();
|
||||
expect(bar._mode).toBe('shell');
|
||||
|
||||
// Settings saved while the shell bar is up must not yank it away...
|
||||
bar.setMode('extended');
|
||||
expect(bar._mode).toBe('shell');
|
||||
|
||||
// ...and switching back to the agent session restores the user's choice.
|
||||
app.activeSessionId = 'session-1';
|
||||
bar.refreshForActiveSession();
|
||||
expect(bar._mode).toBe('extended');
|
||||
expect(barElement.actions).toContain('compact');
|
||||
});
|
||||
|
||||
it('falls back to the agent bar with no active session', () => {
|
||||
const { app, bar } = loadBar('shell');
|
||||
app.activeSessionId = null as unknown as string;
|
||||
bar.refreshForActiveSession();
|
||||
expect(bar._mode).toBe('simple');
|
||||
});
|
||||
});
|
||||
|
||||
describe('one-shot Ctrl modifier', () => {
|
||||
function shellBar() {
|
||||
const loaded = loadBar('shell');
|
||||
loaded.bar.refreshForActiveSession();
|
||||
return loaded;
|
||||
}
|
||||
|
||||
it('is disarmed until the Ctrl key is tapped', () => {
|
||||
const { bar } = shellBar();
|
||||
expect(bar.isCtrlArmed()).toBe(false);
|
||||
expect(bar.consumeCtrl('c')).toBe('c');
|
||||
});
|
||||
|
||||
it('arms visibly and rewrites the next character as its control byte', () => {
|
||||
const { bar, barElement } = shellBar();
|
||||
bar.handleAction('ctrl');
|
||||
|
||||
expect(bar.isCtrlArmed()).toBe(true);
|
||||
const button = barElement.querySelector('[data-action="ctrl"]')!;
|
||||
expect(button.classList.contains('armed')).toBe(true);
|
||||
expect(button.attrs['aria-pressed']).toBe('true');
|
||||
|
||||
expect(bar.consumeCtrl('c')).toBe('\x03');
|
||||
|
||||
// One shot: spent, and the button says so.
|
||||
expect(bar.isCtrlArmed()).toBe(false);
|
||||
expect(button.classList.contains('armed')).toBe(false);
|
||||
expect(button.attrs['aria-pressed']).toBe('false');
|
||||
expect(bar.consumeCtrl('c')).toBe('c');
|
||||
});
|
||||
|
||||
it('sends Ctrl+D for the next key too', () => {
|
||||
const { bar } = shellBar();
|
||||
bar.handleAction('ctrl');
|
||||
expect(bar.consumeCtrl('d')).toBe('\x04');
|
||||
});
|
||||
|
||||
it('cancels on a second tap of Ctrl', () => {
|
||||
const { bar, barElement } = shellBar();
|
||||
bar.handleAction('ctrl');
|
||||
bar.handleAction('ctrl');
|
||||
expect(bar.isCtrlArmed()).toBe(false);
|
||||
expect(barElement.querySelector('[data-action="ctrl"]')!.classList.contains('armed')).toBe(false);
|
||||
expect(bar.consumeCtrl('c')).toBe('c');
|
||||
});
|
||||
|
||||
it('passes a character with no control byte through unchanged, spending the modifier', () => {
|
||||
const { bar } = shellBar();
|
||||
bar.handleAction('ctrl');
|
||||
expect(bar.consumeCtrl('7')).toBe('7');
|
||||
expect(bar.isCtrlArmed()).toBe(false);
|
||||
});
|
||||
|
||||
it('spends the modifier on a paste instead of leaving it armed for the next keystroke', () => {
|
||||
const { bar } = shellBar();
|
||||
bar.handleAction('ctrl');
|
||||
expect(bar.consumeCtrl('git status')).toBe('git status');
|
||||
expect(bar.isCtrlArmed()).toBe(false);
|
||||
});
|
||||
|
||||
it('is cancelled by any other accessory key', () => {
|
||||
const { bar } = shellBar();
|
||||
bar.handleAction('ctrl');
|
||||
bar.handleAction('esc');
|
||||
expect(bar.isCtrlArmed()).toBe(false);
|
||||
});
|
||||
|
||||
it('is cancelled by a session switch', () => {
|
||||
const { app, bar } = shellBar();
|
||||
bar.handleAction('ctrl');
|
||||
expect(bar.isCtrlArmed()).toBe(true);
|
||||
|
||||
app.sessions.set('shell-2', { mode: 'shell' });
|
||||
app.activeSessionId = 'shell-2';
|
||||
bar.refreshForActiveSession();
|
||||
|
||||
// Same layout, but the modifier must not survive into the next session.
|
||||
expect(bar._mode).toBe('shell');
|
||||
expect(bar.isCtrlArmed()).toBe(false);
|
||||
});
|
||||
|
||||
it('is cancelled when the keyboard is dismissed', () => {
|
||||
const { bar } = shellBar();
|
||||
bar.handleAction('ctrl');
|
||||
bar.hide();
|
||||
expect(bar.isCtrlArmed()).toBe(false);
|
||||
});
|
||||
|
||||
it('drops the armed state when the layout is swapped out from under it', () => {
|
||||
const { app, bar } = shellBar();
|
||||
bar.handleAction('ctrl');
|
||||
app.sessions.set('agent-1', { mode: 'claude' });
|
||||
app.activeSessionId = 'agent-1';
|
||||
bar.refreshForActiveSession();
|
||||
expect(bar._mode).toBe('simple');
|
||||
expect(bar.isCtrlArmed()).toBe(false);
|
||||
expect(bar.consumeCtrl('c')).toBe('c');
|
||||
});
|
||||
});
|
||||
|
||||
describe('terminal input wiring', () => {
|
||||
it('applies the modifier in onData after the query-response filter and before the send paths', () => {
|
||||
const hook = terminalSource.indexOf('KeyboardAccessoryBar.consumeCtrl(data)');
|
||||
const queryFilter = terminalSource.indexOf('shouldSuppressTerminalQueryResponse(data)', hook - 4000);
|
||||
const firstSend = terminalSource.indexOf('this._lastTerminalData', hook - 4000);
|
||||
|
||||
expect(hook).toBeGreaterThan(0);
|
||||
// xterm answers DA/CPR queries through onData as well; letting one of those
|
||||
// spend the modifier would silently eat the user's Ctrl.
|
||||
expect(queryFilter).toBeGreaterThan(0);
|
||||
expect(queryFilter).toBeLessThan(hook);
|
||||
// Every send path (local echo, predictive echo, plain flush) reads `data`
|
||||
// after this point, so the control byte reaches the PTY unchanged.
|
||||
expect(firstSend).toBeGreaterThan(hook);
|
||||
});
|
||||
|
||||
it('guards the hook so a page without the bar (desktop) still types normally', () => {
|
||||
expect(terminalSource).toContain("typeof KeyboardAccessoryBar !== 'undefined'");
|
||||
});
|
||||
|
||||
it('skips terminal-generated focus and mouse reports', () => {
|
||||
// Pins the gate itself: without it the modifier is spent by the `\x1b[I`
|
||||
// that the Ctrl button's own refocus emits (see the describe below).
|
||||
expect(terminalSource).toContain('!window.CodemanTerminalInput?.isTerminalFocusOrMouseReport(data)');
|
||||
});
|
||||
});
|
||||
|
||||
describe('CodemanTerminalInput.isTerminalFocusOrMouseReport', () => {
|
||||
const isReport = loadTerminalInput().isTerminalFocusOrMouseReport;
|
||||
|
||||
it.each([
|
||||
['\x1b[I', 'focus in (DECSET 1004)'],
|
||||
['\x1b[O', 'focus out (DECSET 1004)'],
|
||||
['\x1b[<0;10;5M', 'SGR mouse press'],
|
||||
['\x1b[<0;10;5m', 'SGR mouse release'],
|
||||
['\x1b[<64;10;5M', 'SGR wheel up'],
|
||||
['\x1b[M !!', 'legacy X10 mouse'],
|
||||
])('classifies %j as terminal-generated (%s)', (data) => {
|
||||
expect(isReport(data)).toBe(true);
|
||||
});
|
||||
|
||||
it.each([
|
||||
['c', 'a typed character'],
|
||||
['\x03', 'a control byte'],
|
||||
['\r', 'Enter'],
|
||||
['\x1b', 'the Escape key'],
|
||||
['\x1b[A', 'an arrow key'],
|
||||
['\x1b[200~hi\x1b[201~', 'a bracketed paste'],
|
||||
['\x1b[?1;2c', 'a DA reply'],
|
||||
['I', 'the letter I'],
|
||||
])('leaves %j alone (%s)', (data) => {
|
||||
expect(isReport(data)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('one-shot Ctrl vs terminal-generated reports', () => {
|
||||
// The onData gate, as terminal-ui.js writes it. The wiring test above pins
|
||||
// the real source; this proves the behavior the gate buys.
|
||||
function feed(bar: Bar, data: string): string {
|
||||
const isReport = loadTerminalInput().isTerminalFocusOrMouseReport;
|
||||
return bar.isCtrlArmed() && !isReport(data) ? bar.consumeCtrl(data) : data;
|
||||
}
|
||||
|
||||
function shellBar() {
|
||||
const loaded = loadBar('shell');
|
||||
loaded.bar.refreshForActiveSession();
|
||||
return loaded;
|
||||
}
|
||||
|
||||
it('survives a tap once an app in the pane turns mouse reporting on', () => {
|
||||
const { bar } = shellBar();
|
||||
// The live case: a shell session keeps the narrow scrollback strip, so mouse
|
||||
// DECSETs reach the browser. Measured against a real shell with vim-style
|
||||
// tracking on, one tap on the terminal spent the armed modifier silently.
|
||||
bar.handleAction('ctrl');
|
||||
expect(feed(bar, '\x1b[<0;10;5M')).toBe('\x1b[<0;10;5M');
|
||||
expect(feed(bar, '\x1b[<0;10;5m')).toBe('\x1b[<0;10;5m');
|
||||
expect(bar.isCtrlArmed()).toBe(true);
|
||||
|
||||
// ...so the character the user actually types is still the one modified.
|
||||
expect(feed(bar, 'd')).toBe('\x04');
|
||||
expect(bar.isCtrlArmed()).toBe(false);
|
||||
});
|
||||
|
||||
it('survives a focus report, should one ever reach xterm', () => {
|
||||
// Defense in depth: FOCUS_ESCAPE_FILTER (session.ts) strips `\x1b[?1004h`
|
||||
// from every PTY read, so sendFocusMode never turns on today. If it did,
|
||||
// the bar's own post-key refocus would emit `\x1b[I` and eat the modifier
|
||||
// before the user typed a single character.
|
||||
const { bar } = shellBar();
|
||||
bar.handleAction('ctrl');
|
||||
expect(feed(bar, '\x1b[I')).toBe('\x1b[I');
|
||||
expect(bar.isCtrlArmed()).toBe(true);
|
||||
expect(feed(bar, 'c')).toBe('\x03');
|
||||
});
|
||||
|
||||
it('still spends the modifier on a paste, which is real input', () => {
|
||||
const { bar } = shellBar();
|
||||
bar.handleAction('ctrl');
|
||||
expect(feed(bar, 'git status')).toBe('git status');
|
||||
expect(bar.isCtrlArmed()).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('one-shot Ctrl through the CJK input field', () => {
|
||||
// The CJK textarea swallows keystrokes before onData sees them, so the CJK
|
||||
// send path needs the modifier applied too. These drive the REAL
|
||||
// _handleCjkInput against the REAL bar, both loaded into one vm scope.
|
||||
function cjkApp() {
|
||||
const { CodemanApp, bar } = loadTerminalModule();
|
||||
bar.clearCtrl();
|
||||
const app = Object.create(CodemanApp.prototype) as {
|
||||
activeSessionId: string;
|
||||
_sendInputAsync: ReturnType<typeof vi.fn>;
|
||||
_handleCjkInput(text: string): void;
|
||||
};
|
||||
app.activeSessionId = 'cjk-session';
|
||||
app._sendInputAsync = vi.fn();
|
||||
return { app, bar };
|
||||
}
|
||||
|
||||
it('sends the control byte for a character typed into the CJK field', () => {
|
||||
const { app, bar } = cjkApp();
|
||||
bar.toggleCtrl();
|
||||
app._handleCjkInput('c');
|
||||
expect(app._sendInputAsync).toHaveBeenCalledWith('cjk-session', '\x03');
|
||||
expect(bar.isCtrlArmed()).toBe(false);
|
||||
});
|
||||
|
||||
it('leaves ordinary CJK input untouched when nothing is armed', () => {
|
||||
const { app } = cjkApp();
|
||||
app._handleCjkInput('你好');
|
||||
expect(app._sendInputAsync).toHaveBeenCalledWith('cjk-session', '你好');
|
||||
});
|
||||
|
||||
it('spends the modifier on a committed IME word instead of stranding it', () => {
|
||||
// The gap this closes: with the field focused the modifier could neither
|
||||
// fire nor be spent, so it survived to bite a later innocent keystroke.
|
||||
const { app, bar } = cjkApp();
|
||||
bar.toggleCtrl();
|
||||
app._handleCjkInput('你好');
|
||||
expect(app._sendInputAsync).toHaveBeenCalledWith('cjk-session', '你好');
|
||||
expect(bar.isCtrlArmed()).toBe(false);
|
||||
});
|
||||
|
||||
it('spends the modifier on Enter, like every other non-character key', () => {
|
||||
const { app, bar } = cjkApp();
|
||||
bar.toggleCtrl();
|
||||
app._handleCjkInput('\r');
|
||||
expect(app._sendInputAsync).toHaveBeenCalledWith('cjk-session', '\r');
|
||||
expect(bar.isCtrlArmed()).toBe(false);
|
||||
});
|
||||
|
||||
it('drops the input, and does not spend the modifier, with no active session', () => {
|
||||
const { app, bar } = cjkApp();
|
||||
(app as unknown as { activeSessionId: string | null }).activeSessionId = null;
|
||||
bar.toggleCtrl();
|
||||
app._handleCjkInput('c');
|
||||
expect(app._sendInputAsync).not.toHaveBeenCalled();
|
||||
expect(bar.isCtrlArmed()).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('armed styling survives the light-skin overrides', () => {
|
||||
const mobileCss = readFileSync(resolve('src/web/public/mobile.css'), 'utf8');
|
||||
|
||||
it('excludes .armed from the light-skin .accessory-btn repaint', () => {
|
||||
// That selector is (0,3,1): `:is()` takes the specificity of its most
|
||||
// specific argument and the list holds `.btn-toolbar.btn-shell`. It
|
||||
// therefore OUTRANKS the (0,3,0) armed rules in both stylesheets, and a
|
||||
// bare `.accessory-btn` there paints the armed modifier back to a resting
|
||||
// button on all four light skins (measured across every skin at 390px).
|
||||
const lightSkinRule = mobileCss
|
||||
.split('\n')
|
||||
.find((line) => line.includes('[data-skin="paper-gray"]') && line.includes('.btn-voice-mobile,'));
|
||||
|
||||
expect(lightSkinRule).toBeDefined();
|
||||
expect(lightSkinRule).toContain('.accessory-btn:not(.armed)');
|
||||
});
|
||||
|
||||
it('keeps an armed rule in both stylesheets', () => {
|
||||
// mobile.css hardcodes the phone palette, styles.css carries the
|
||||
// skin-aware one for everything wider.
|
||||
expect(mobileCss).toContain('.accessory-btn.accessory-btn-ctrl.armed');
|
||||
expect(readFileSync(resolve('src/web/public/styles.css'), 'utf8')).toContain(
|
||||
'.accessory-btn.accessory-btn-ctrl.armed'
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -1048,6 +1048,183 @@ describe('Virtual Keyboard', () => {
|
||||
});
|
||||
});
|
||||
|
||||
// ── Shell keyboard bar + one-shot Ctrl (issue #262) ───────────────────
|
||||
//
|
||||
// The bar swaps layouts per session mode, and Ctrl is a one-shot modifier
|
||||
// applied to the next character typed on the SYSTEM keyboard, which on a
|
||||
// phone reaches the app as xterm onData text, not a key event. These drive
|
||||
// the real xterm instance with page.keyboard.type() and assert on what would
|
||||
// go out on the wire (_sendInputAsync), not on DOM state alone.
|
||||
|
||||
describe('Shell keyboard bar', () => {
|
||||
let context: BrowserContext;
|
||||
let page: Page;
|
||||
|
||||
beforeAll(async () => {
|
||||
({ context, page } = await createDevicePage(REPRESENTATIVE_DEVICES['standard-phone'], BASE_URL, 'chromium'));
|
||||
await page.waitForTimeout(WAIT.PAGE_SETTLE);
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await context.close();
|
||||
});
|
||||
|
||||
/** Point the app at a fake session of `mode` and re-resolve the bar. */
|
||||
async function activateSession(mode: string, id = 'kb-shell-1'): Promise<void> {
|
||||
await page.evaluate(`(function (id, mode) {
|
||||
app.sessions.set(id, { id, name: id, status: 'idle', mode, workingDir: '/tmp' });
|
||||
app.activeSessionId = id;
|
||||
KeyboardAccessoryBar.show();
|
||||
KeyboardAccessoryBar.refreshForActiveSession();
|
||||
})('${id}', '${mode}')`);
|
||||
}
|
||||
|
||||
/** Capture what the terminal would send, while typing on the real keyboard. */
|
||||
async function typeAndCapture(text: string): Promise<string[]> {
|
||||
await page.evaluate(`(function () {
|
||||
window.__sent = [];
|
||||
if (!app.__origSend) app.__origSend = app._sendInputAsync;
|
||||
app._sendInputAsync = function (sessionId, input) { window.__sent.push(input); };
|
||||
app.terminal.focus();
|
||||
})()`);
|
||||
await page.keyboard.type(text);
|
||||
await page.waitForTimeout(200);
|
||||
const sent = (await page.evaluate(`window.__sent`)) as string[];
|
||||
await page.evaluate(`(function () { app._sendInputAsync = app.__origSend; })()`);
|
||||
return sent;
|
||||
}
|
||||
|
||||
async function tapCtrl(): Promise<void> {
|
||||
await page.evaluate(`document.querySelector('.keyboard-accessory-bar [data-action="ctrl"]').click()`);
|
||||
}
|
||||
|
||||
it('shows the terminal bar for shell sessions', async () => {
|
||||
await activateSession('shell');
|
||||
const actions = await page.evaluate(() =>
|
||||
Array.from(document.querySelectorAll('.keyboard-accessory-bar [data-action]')).map(
|
||||
(button) => (button as HTMLElement).dataset.action
|
||||
)
|
||||
);
|
||||
expect(actions).toEqual([
|
||||
'ctrl',
|
||||
'esc',
|
||||
'tab',
|
||||
'scroll-up',
|
||||
'scroll-down',
|
||||
'arrow-left',
|
||||
'arrow-right',
|
||||
'paste',
|
||||
'dismiss',
|
||||
]);
|
||||
});
|
||||
|
||||
it('keeps the command bar for agent sessions', async () => {
|
||||
await activateSession('claude', 'kb-agent-1');
|
||||
const actions = await page.evaluate(() =>
|
||||
Array.from(document.querySelectorAll('.keyboard-accessory-bar [data-action]')).map(
|
||||
(button) => (button as HTMLElement).dataset.action
|
||||
)
|
||||
);
|
||||
expect(actions).toContain('init');
|
||||
expect(actions).not.toContain('ctrl');
|
||||
});
|
||||
|
||||
it('sends Ctrl+C for the next typed character and disarms', async () => {
|
||||
await activateSession('shell');
|
||||
await tapCtrl();
|
||||
expect(await page.evaluate(`KeyboardAccessoryBar.isCtrlArmed()`)).toBe(true);
|
||||
|
||||
expect(await typeAndCapture('c')).toEqual(['\x03']);
|
||||
expect(await page.evaluate(`KeyboardAccessoryBar.isCtrlArmed()`)).toBe(false);
|
||||
// The very next keystroke is a literal c again.
|
||||
expect(await typeAndCapture('c')).toEqual(['c']);
|
||||
});
|
||||
|
||||
it('sends Ctrl+D for the next typed character', async () => {
|
||||
await activateSession('shell');
|
||||
await tapCtrl();
|
||||
expect(await typeAndCapture('d')).toEqual(['\x04']);
|
||||
});
|
||||
|
||||
it('survives a terminal tap while the pane has mouse reporting on', async () => {
|
||||
// A shell session keeps the narrow scrollback strip, so mouse DECSETs
|
||||
// reach the browser: run vim or htop and xterm starts reporting taps
|
||||
// through onData as \x1b[<0;31;23M. Those arrive on the same channel as
|
||||
// typed characters, so a hook that treats every chunk as "the next
|
||||
// keystroke" spends Ctrl on a tap and the button looks dead. Verified
|
||||
// against a real shell session before this guard existed.
|
||||
await activateSession('shell');
|
||||
await page.evaluate(`app.terminal.write('\\x1b[?1000h\\x1b[?1006h')`);
|
||||
await page.waitForTimeout(150);
|
||||
|
||||
await tapCtrl();
|
||||
expect(await page.evaluate(`KeyboardAccessoryBar.isCtrlArmed()`)).toBe(true);
|
||||
|
||||
const box = await page.locator('.xterm-screen').first().boundingBox();
|
||||
await page.touchscreen.tap(box!.x + box!.width / 2, box!.y + box!.height / 2);
|
||||
await page.waitForTimeout(200);
|
||||
|
||||
expect(await page.evaluate(`KeyboardAccessoryBar.isCtrlArmed()`)).toBe(true);
|
||||
expect(await typeAndCapture('c')).toEqual(['\x03']);
|
||||
|
||||
await page.evaluate(`app.terminal.write('\\x1b[?1000l\\x1b[?1006l')`);
|
||||
});
|
||||
|
||||
it('cancels on a second tap of Ctrl', async () => {
|
||||
await activateSession('shell');
|
||||
await tapCtrl();
|
||||
await tapCtrl();
|
||||
expect(await page.evaluate(`KeyboardAccessoryBar.isCtrlArmed()`)).toBe(false);
|
||||
expect(await typeAndCapture('c')).toEqual(['c']);
|
||||
});
|
||||
|
||||
it('shows the armed state and keeps the terminal focused', async () => {
|
||||
await activateSession('shell');
|
||||
await tapCtrl();
|
||||
const state = await page.evaluate(() => {
|
||||
const button = document.querySelector('.keyboard-accessory-bar [data-action="ctrl"]') as HTMLElement;
|
||||
const style = getComputedStyle(button);
|
||||
return {
|
||||
armed: button.classList.contains('armed'),
|
||||
pressed: button.getAttribute('aria-pressed'),
|
||||
background: style.backgroundColor,
|
||||
focusedTerminal: document.activeElement === (app.terminal as { textarea: Element }).textarea,
|
||||
};
|
||||
});
|
||||
expect(state.armed).toBe(true);
|
||||
expect(state.pressed).toBe('true');
|
||||
// Armed styling must actually land (three-class rule beating the skin
|
||||
// overrides): an invisible modifier is worse than none.
|
||||
expect(state.background).not.toBe('rgba(0, 0, 0, 0)');
|
||||
expect(state.focusedTerminal).toBe(true);
|
||||
});
|
||||
|
||||
it('drops the armed modifier when switching sessions', async () => {
|
||||
await activateSession('shell');
|
||||
await tapCtrl();
|
||||
expect(await page.evaluate(`KeyboardAccessoryBar.isCtrlArmed()`)).toBe(true);
|
||||
|
||||
await activateSession('shell', 'kb-shell-2');
|
||||
expect(await page.evaluate(`KeyboardAccessoryBar.isCtrlArmed()`)).toBe(false);
|
||||
expect(await typeAndCapture('c')).toEqual(['c']);
|
||||
});
|
||||
|
||||
it('drops the armed modifier when the keyboard is dismissed', async () => {
|
||||
await activateSession('shell');
|
||||
await tapCtrl();
|
||||
await page.evaluate(`KeyboardAccessoryBar.hide()`);
|
||||
expect(await page.evaluate(`KeyboardAccessoryBar.isCtrlArmed()`)).toBe(false);
|
||||
});
|
||||
|
||||
it('spends the modifier on another accessory key instead of the next keystroke', async () => {
|
||||
await activateSession('shell');
|
||||
await tapCtrl();
|
||||
await page.evaluate(`document.querySelector('.keyboard-accessory-bar [data-action="esc"]').click()`);
|
||||
expect(await page.evaluate(`KeyboardAccessoryBar.isCtrlArmed()`)).toBe(false);
|
||||
expect(await typeAndCapture('c')).toEqual(['c']);
|
||||
});
|
||||
});
|
||||
|
||||
// ── Cross-device keyboard behavior ────────────────────────────────────
|
||||
|
||||
describe('Cross-device keyboard behavior', () => {
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
// Port: none (pure static analysis, runs in CI, no browser/server).
|
||||
//
|
||||
// Regression guard for the Read My Mind phase-3 surfaces (alternates, steer,
|
||||
// phone accessory key, overview waiting-row shortcut). The browser E2E that
|
||||
// exercised these lives outside CI, so this test pins the load-bearing facts
|
||||
// statically, in the style of mobile-header-buttons-policy.test.ts:
|
||||
//
|
||||
// 1. The accessory-bar 🧠 key exists in BOTH layouts and ships `hidden`
|
||||
// (setMode() swaps innerHTML; a key present in only one layout silently
|
||||
// vanishes when the user toggles extendedKeyboardBar).
|
||||
// 2. `.accessory-btn[hidden]` is re-asserted as display:none !important:
|
||||
// the base rule is display:inline-flex, which beats the UA [hidden] rule,
|
||||
// so without this the key can never hide (same trap as .home-sessions).
|
||||
// 3. The header 🧠 button stays OFF phones (the accessory key + overview strip
|
||||
// are the phone surfaces).
|
||||
// 4. The overview shortcut is gated to `waiting` rows only: on red rows a
|
||||
// dialog is on screen and text sent via POST /input would land in its menu.
|
||||
// Answer-aware routing through the approvals endpoint is phase-3 PR 2;
|
||||
// loosening this gate before that lands is a real misdelivery bug.
|
||||
// 5. The 'readmymind' action must NOT refocus the terminal (the modal takes
|
||||
// over; a refocus would pop the phone keyboard back up over it).
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { readFileSync } from 'node:fs';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { join } from 'node:path';
|
||||
|
||||
const HERE = fileURLToPath(new URL('.', import.meta.url));
|
||||
const PUBLIC = join(HERE, '../src/web/public');
|
||||
|
||||
const accessoryJs = readFileSync(join(PUBLIC, 'keyboard-accessory.js'), 'utf8');
|
||||
const overviewJs = readFileSync(join(PUBLIC, 'mobile-overview.js'), 'utf8');
|
||||
const stylesCss = readFileSync(join(PUBLIC, 'styles.css'), 'utf8');
|
||||
const mobileCss = readFileSync(join(PUBLIC, 'mobile.css'), 'utf8');
|
||||
const indexHtml = readFileSync(join(PUBLIC, 'index.html'), 'utf8');
|
||||
|
||||
/** Extract a template-literal property body, e.g. `_simpleButtons: \`...\``. */
|
||||
function templateBody(source: string, prop: string): string {
|
||||
const m = source.match(new RegExp(`${prop}:\\s*\``));
|
||||
if (!m || m.index === undefined) return '';
|
||||
const start = m.index + m[0].length;
|
||||
const end = source.indexOf('`', start);
|
||||
return end === -1 ? '' : source.slice(start, end);
|
||||
}
|
||||
|
||||
describe('read my mind phase-3 surfaces (static policy)', () => {
|
||||
it('accessory 🧠 key exists in BOTH layouts and ships hidden', () => {
|
||||
for (const layout of ['_simpleButtons', '_extendedButtons']) {
|
||||
const body = templateBody(accessoryJs, layout);
|
||||
expect(body, `${layout} template found`).not.toBe('');
|
||||
const keys = body.match(/data-action="readmymind"/g) || [];
|
||||
expect(keys.length, `${layout} has exactly one readmymind key`).toBe(1);
|
||||
const tag = body.match(/<button[^>]*data-action="readmymind"[^>]*>/);
|
||||
expect(tag, `${layout} readmymind button tag parses`).toBeTruthy();
|
||||
expect(tag![0], `${layout} key ships hidden (refreshReadMyMind reveals it)`).toContain('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
it('refreshReadMyMind is re-applied after every innerHTML rebuild', () => {
|
||||
// init() and setMode() both assign innerHTML, which resurrects the default
|
||||
// `hidden` attribute; each must re-derive visibility afterwards.
|
||||
const calls = accessoryJs.match(/this\.refreshReadMyMind\(\)/g) || [];
|
||||
expect(calls.length, 'called from init() and setMode() at least').toBeGreaterThanOrEqual(2);
|
||||
// The setMode rebuild specifically must be followed by a refresh.
|
||||
expect(accessoryJs).toMatch(
|
||||
/innerHTML = mode === 'extended' \? this\._extendedButtons : this\._simpleButtons;[\s\S]{0,300}?this\.refreshReadMyMind\(\)/
|
||||
);
|
||||
});
|
||||
|
||||
it('accessory [hidden] re-assertion exists (inline-flex beats the UA rule)', () => {
|
||||
expect(stylesCss).toMatch(/\.accessory-btn\[hidden\]\s*\{\s*display:\s*none\s*!important;/);
|
||||
});
|
||||
|
||||
it('the readmymind action never refocuses the terminal', () => {
|
||||
const refocus = accessoryJs.match(/refocusActions\s*=\s*new Set\(\[([^\]]*)\]\)/);
|
||||
expect(refocus, 'refocusActions set found').toBeTruthy();
|
||||
expect(refocus![1]).not.toContain('readmymind');
|
||||
});
|
||||
|
||||
it('header 🧠 button stays hidden on phones', () => {
|
||||
expect(mobileCss).toMatch(/\.btn-icon-header\.btn-readmymind\s*\{\s*display:\s*none\s*!important;/);
|
||||
});
|
||||
|
||||
it('overview shortcut is gated to waiting rows only (red rows have a dialog on screen)', () => {
|
||||
const defIdx = overviewJs.indexOf('_readMyMindRowShortcut(row) {');
|
||||
expect(defIdx, '_readMyMindRowShortcut definition found').toBeGreaterThan(-1);
|
||||
const gate = overviewJs.slice(defIdx, overviewJs.indexOf('_buildMobileOverviewRmmStrip(sessionId) {'));
|
||||
expect(gate, 'definition precedes its strip builder').not.toBe('');
|
||||
expect(gate).toContain("row.state !== 'waiting'");
|
||||
});
|
||||
|
||||
it('alternates container and steer input exist with i18n protection', () => {
|
||||
// Suggestion content is observed/injectable text; the container-level skip
|
||||
// covers the dynamically inserted rows (i18n skip checks ancestors).
|
||||
expect(indexHtml).toMatch(/id="readMyMindAlternates"[^>]*data-i18n-skip/);
|
||||
expect(indexHtml).toContain('id="readMyMindSteer"');
|
||||
// The steer field lives OUTSIDE the result div so it stays available in
|
||||
// the error phase (steering a failed run's retry).
|
||||
const resultDiv = indexHtml.slice(
|
||||
indexHtml.indexOf('class="readmymind-result"'),
|
||||
indexHtml.indexOf('class="readmymind-error"')
|
||||
);
|
||||
expect(resultDiv).not.toContain('id="readMyMindSteer"');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user