mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-10-02 13:39:41 +02:00
Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Codeman maintainer
|
8fcfdb1e6e | ||
|
Codeman maintainer
|
45ad9de89e |
@@ -260,6 +260,8 @@ Frontend JS modules have `@fileoverview` with `@dependency`/`@loadorder` tags. L
|
||||
|
||||
**Per-device vs synced settings**: the `displayKeys` set in settings-ui.js is a **client-side merge policy**, not a wire filter. A display key seeds from the server only when localStorage has no value for it, which is what prevents one device overwriting another; `showPlanUsageLimits` is additionally `delete`d from the incoming payload outright. Separately, `SettingsUpdateSchema` is `.strict()` and simply **does not declare** `skin`, `showFileViewerButton`, `showCronButton`, `webglRendererEnabled`, `localEchoEnabled`, `cjkInputEnabled`, or `extendedKeyboardBar`, so sending one of those is a validation error. The rest (`showResponseViewer`, `showPlanUsageLimits`, `language`, and most `show*` keys) ARE in the schema and do persist server-side; they are per-device by client policy only. ⚠️ Adding a new per-device setting means deciding **both** questions: membership in `displayKeys`, and presence in the schema.
|
||||
|
||||
**App Settings modal** (`#appSettingsModal`): a left rail that is a **table of contents over ONE scrolling document**, not a tab switcher. Every section stays mounted (`.set-section`, ids `settings-terminal|appearance|layout|models|clis|notifications|voice|shortcuts|system`), the rail follows the scroll, and `switchSettingsTab(id)` keeps its historical name but SCROLLS instead of hiding. Phones swap the rail for the sticky `#appSettingsJump` pill (compact layout at ≤860px in mobile.css). ⚠️ **The load/save contract is `getElementById` by id**: `openAppSettings()`/`saveAppSettings()` read every control by a fixed id, so moving a control between sections is free but renaming or dropping one silently stops it loading or saving. `test/app-settings-structure.test.ts` is the static guard. ⚠️ Model cards (`#appSettingsModelCards`) and the effort segment are **views over hidden `<select>`s** that remain the source of truth; the cards hold the BASE model and the "1M context window" switch composes `base + [1m]` back into `claudeModel`, which is what retires the old "takes precedence over the toggle below" trap. ⚠️ `.modal-tabs`/`.modal-tab-btn`/`.modal-tab-content` are still used by `#sessionOptionsModal` and `#createCaseModal`; the settings rail uses its own `set-*` classes and must not restyle them. ⚠️ `admin-ui.js` injects the multi-user Users entry into `.set-rail-items` + `.set-doc`, so those hooks must survive any restructure.
|
||||
|
||||
**Header button visibility**: most header controls are opt-in and hidden by a marker class (`btn-multimonitor--hidden`, `btn-response-viewer-header--hidden`, `btn-file-viewer--hidden`, `btn-cron--hidden`) that `applyHeaderVisibilitySettings()` (settings-ui.js) toggles after settings load; the multi-monitor button is instead stripped at render by `renderIndexHtml`. ⚠️ Hiding must go through the marker class: the base rules are `display:inline-flex !important`, so an inline style cannot override them. Current desktop default is WS/CPU/MEM + File Viewer + gear, with the token chip and lifecycle-log button OFF. ⚠️ New header controls must not leak onto phones; `test/mobile-header-buttons-policy.test.ts` is the static guard. → [architecture-invariants#header-button-visibility-multi-monitor-response-viewer-file-viewer-cron](docs/architecture-invariants.md#header-button-visibility-multi-monitor-response-viewer-file-viewer-cron)
|
||||
|
||||
**Gesture control** (camera hand-tracking overlay, opt-in, default OFF): `CODEMAN_GESTURE=1` makes the feature *available*; `gestureControlEnabled` turns it on. The bundle is injected by `renderIndexHtml` only when enabled, which is why that method is `async` and reads settings with `readSettings(true)` (a fresh read: a post-save reload lands inside the 2s cache TTL and would otherwise render the pre-toggle state). **Source lives in `packages/gesture-control/`; edit there, run `npm run build:gesture`, and commit the regenerated bundle** because dev serves the committed bundle with no runtime bundler. The MediaPipe wasm + model are fetched separately and gitignored. ⚠️ Keep `MP_VERSION` in `fetch-gesture-assets.mjs` in sync with `@mediapipe/tasks-vision`. → [architecture-invariants#gesture-control-the-source-package](docs/architecture-invariants.md#gesture-control-the-source-package)
|
||||
@@ -270,8 +272,6 @@ 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.
|
||||
|
||||
+35
-20
@@ -110,34 +110,49 @@
|
||||
}
|
||||
|
||||
// ── Admin Users panel (injected into the App Settings modal) ──────────────
|
||||
// The settings modal is a rail (table of contents) over ONE scrolling
|
||||
// document, so this appends a rail entry plus a real section rather than a
|
||||
// tab button plus a hidden panel.
|
||||
function injectUsersTab() {
|
||||
const modal = document.getElementById('appSettingsModal');
|
||||
if (!modal || modal.querySelector('[data-tab="settings-users"]')) return;
|
||||
const tabs = modal.querySelector('.modal-tabs');
|
||||
const body = modal.querySelector('.modal-body');
|
||||
if (!tabs || !body) return;
|
||||
if (!modal || modal.querySelector('[data-section="settings-users"]')) return;
|
||||
const rail = modal.querySelector('.set-rail-items');
|
||||
const body = modal.querySelector('.set-doc');
|
||||
if (!rail || !body) return;
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'modal-tab-btn';
|
||||
btn.dataset.tab = 'settings-users';
|
||||
btn.textContent = 'Users';
|
||||
tabs.appendChild(btn);
|
||||
const content = document.createElement('div');
|
||||
content.className = 'modal-tab-content hidden';
|
||||
btn.type = 'button';
|
||||
btn.className = 'set-rail-item';
|
||||
btn.dataset.section = 'settings-users';
|
||||
btn.innerHTML =
|
||||
'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg><span>Users</span>';
|
||||
rail.appendChild(btn);
|
||||
const content = document.createElement('section');
|
||||
content.className = 'set-section';
|
||||
content.id = 'settings-users';
|
||||
content.dataset.label = 'Users';
|
||||
content.innerHTML = `
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
|
||||
<strong>Users</strong>
|
||||
<span>
|
||||
<button class="btn btn-sm" id="adminOpenPanel">Open Admin Panel</button>
|
||||
<button class="btn btn-sm" id="adminAddUser">+ Add user</button>
|
||||
</span>
|
||||
<div class="set-section-head">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg>
|
||||
<h2>Users</h2>
|
||||
</div>
|
||||
<p class="form-hint">Users share the host account; this separates workspaces, it does not sandbox
|
||||
<p class="set-section-blurb">Users share the host account; this separates workspaces, it does not sandbox
|
||||
users from each other. Pair with Docker cases for isolation.</p>
|
||||
<div id="adminUsersTable"></div>
|
||||
<p id="adminUsersMsg" style="min-height:1.2em;color:var(--muted,#888)"></p>`;
|
||||
<div class="set-group">
|
||||
<div class="set-group-head"><h4>Accounts</h4></div>
|
||||
<div class="set-group-body">
|
||||
<div class="set-row">
|
||||
<div class="set-row-text"><span class="set-row-label">Manage users</span></div>
|
||||
<div class="set-row-actions">
|
||||
<button class="btn-toolbar btn-sm" id="adminOpenPanel">Open Admin Panel</button>
|
||||
<button class="btn-toolbar btn-sm" id="adminAddUser">+ Add user</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="adminUsersTable"></div>
|
||||
<p id="adminUsersMsg" style="min-height:1.2em;color:var(--text-muted)"></p>
|
||||
</div>
|
||||
</div>`;
|
||||
body.appendChild(content);
|
||||
// Render whenever the tab is shown (the shared switchSettingsTab toggles it).
|
||||
// Render whenever the entry is used (the shared switchSettingsTab scrolls to it).
|
||||
btn.addEventListener('click', renderUsers);
|
||||
content.querySelector('#adminAddUser').onclick = addUserFlow;
|
||||
content.querySelector('#adminOpenPanel').onclick = openAdminPanel;
|
||||
|
||||
@@ -848,11 +848,9 @@ class CodemanApp {
|
||||
SwipeHandler.init();
|
||||
VoiceInput.init();
|
||||
KeyboardAccessoryBar.init();
|
||||
// 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.
|
||||
// Apply keyboard bar mode from settings
|
||||
const _kbSettings = this.loadAppSettingsFromStorage();
|
||||
KeyboardAccessoryBar.setMode(_kbSettings.extendedKeyboardBar ? 'extended' : 'simple');
|
||||
if (_kbSettings.extendedKeyboardBar) KeyboardAccessoryBar.setMode('extended');
|
||||
this.applyHeaderVisibilitySettings();
|
||||
this.restorePlanUsageChip();
|
||||
this.applySkin();
|
||||
@@ -4459,10 +4457,6 @@ 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
|
||||
|
||||
+829
-770
File diff suppressed because it is too large
Load Diff
@@ -12,13 +12,6 @@
|
||||
* 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.
|
||||
*
|
||||
@@ -421,58 +414,12 @@ 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,
|
||||
// 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,
|
||||
_mode: 'simple', // 'simple' or 'extended'
|
||||
|
||||
/** HTML for simple mode: arrows, commands, paste, Esc, dismiss */
|
||||
_simpleButtons: `
|
||||
@@ -501,45 +448,6 @@ 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">
|
||||
@@ -606,7 +514,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', '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-o', 'opt-enter', 'esc', 'effort-max', 'clear-input']);
|
||||
if (refocusActions.has(action) ||
|
||||
((action === 'clear' || action === 'compact') && this._confirmAction)) {
|
||||
if (typeof app !== 'undefined' && app.terminal) {
|
||||
@@ -622,91 +530,14 @@ const KeyboardAccessoryBar = {
|
||||
}
|
||||
},
|
||||
|
||||
/** 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. */
|
||||
/** Switch between 'simple' and 'extended' button layouts */
|
||||
setMode(mode) {
|
||||
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;
|
||||
if (mode === this._mode || !this.element) return;
|
||||
this._mode = mode;
|
||||
this.clearConfirm();
|
||||
// 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;
|
||||
this.element.innerHTML = 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');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
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,
|
||||
|
||||
@@ -714,15 +545,7 @@ 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;
|
||||
@@ -961,10 +784,6 @@ 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');
|
||||
}
|
||||
|
||||
+364
-19
@@ -680,6 +680,13 @@ html.mobile-init .file-browser-panel {
|
||||
box-shadow: 0 0 8px 2px color-mix(in srgb, var(--green) 55%, transparent) !important;
|
||||
}
|
||||
|
||||
/* No orbiting ring on phone tabs (styles.css draws one on desktop/tablet):
|
||||
the dot is already enlarged to 9px with a glow here, and a 15px ring in a
|
||||
32px tab would sit on top of the tab name. The glow is the phone's tell. */
|
||||
.session-tab .tab-status.busy::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Truncate tab names more aggressively on mobile */
|
||||
.session-tab .tab-name {
|
||||
max-width: 50px;
|
||||
@@ -1162,18 +1169,6 @@ 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;
|
||||
}
|
||||
@@ -2919,13 +2914,7 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* `.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)) {
|
||||
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) {
|
||||
background: var(--control-bg);
|
||||
border-color: var(--control-border);
|
||||
color: var(--text-dim);
|
||||
@@ -3117,3 +3106,359 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
|
||||
padding: 0.65rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
App Settings, compact layout (<= 860px)
|
||||
|
||||
Same single scrolling document as the desktop rail layout; only the
|
||||
navigation changes. The rail collapses to its search field and #appSettingsJump
|
||||
takes over as the sticky "where am I / jump elsewhere" control, so a phone
|
||||
spends its vertical budget on settings instead of on chrome.
|
||||
|
||||
Groups render as one inset rounded list with hairline dividers rather than a
|
||||
stack of separate cards: at 390px the per-card borders were most of the pixels.
|
||||
============================================================================ */
|
||||
@media (max-width: 860px) {
|
||||
#appSettingsModal .modal-content.modal-lg {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Rail keeps only its search field, laid out as a bar */
|
||||
#appSettingsModal .set-rail {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: transparent;
|
||||
padding: 10px 14px;
|
||||
overflow: visible;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-rail-items,
|
||||
#appSettingsModal .set-rail-foot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-search {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-search input {
|
||||
padding: 9px 10px 9px 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Save moves into the header; the bottom action bar would cost 60px */
|
||||
#appSettingsModal .set-head-save {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-foot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-doc {
|
||||
padding: 0 14px 34px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ── jump control ──────────────────────────────────────────────────── */
|
||||
#appSettingsModal .set-jump {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
margin: 10px 0 2px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 11px;
|
||||
font: inherit;
|
||||
font-size: 0.82rem;
|
||||
color: var(--text);
|
||||
background: rgba(var(--accent-rgb), 0.13);
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.3);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-jump-ico {
|
||||
color: var(--accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-jump-label {
|
||||
font-weight: 580;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-jump-chev {
|
||||
margin-left: auto;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.18s;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-jump[aria-expanded='true'] .set-jump-chev {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-jump-veil {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 8;
|
||||
background: rgba(4, 8, 13, 0.62);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-jump-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
right: 14px;
|
||||
z-index: 9;
|
||||
padding: 7px;
|
||||
border-radius: 16px;
|
||||
/* Opaque on purpose: --floating-bg is translucent and the settings rows
|
||||
behind the menu bleed through it. */
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--control-border);
|
||||
box-shadow: var(--elevated-shadow);
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#appSettingsModal.jump-open .set-jump-veil,
|
||||
#appSettingsModal.jump-open .set-jump-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-jump-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
width: 100%;
|
||||
padding: 11px 12px;
|
||||
border: 0;
|
||||
border-radius: 11px;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
font: inherit;
|
||||
font-size: 0.82rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-jump-row svg {
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-jump-row .set-jump-count {
|
||||
margin-left: auto;
|
||||
font-size: 0.62rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-jump-row.active {
|
||||
background: rgba(var(--accent-rgb), 0.14);
|
||||
color: var(--text);
|
||||
font-weight: 570;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-jump-row.active svg {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── sections step down: the jump pill already names the current one ── */
|
||||
#appSettingsModal .set-section {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-section + .set-section {
|
||||
border-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-section-head {
|
||||
gap: 7px;
|
||||
margin: 18px 0 2px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-section-head svg {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-section-head h2 {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 640;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-section-head::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, var(--border), transparent);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-section-blurb {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ── inset grouped list ────────────────────────────────────────────── */
|
||||
#appSettingsModal .set-group {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group + .set-group {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-head {
|
||||
margin-bottom: 7px;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-hint {
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-body {
|
||||
gap: 0;
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-body > .set-row {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: 12px 13px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-body > .set-row + .set-row {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.055);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-body > .set-chips,
|
||||
#appSettingsModal .set-group-body > .set-modelgrid,
|
||||
#appSettingsModal .set-group-body > .set-minigrid,
|
||||
#appSettingsModal .set-group-body > #appSettingsShortcutsList {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-body > .event-type-grid {
|
||||
padding: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-row-label {
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-row-desc {
|
||||
font-size: 0.69rem;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* Fields go full width under their label instead of fighting for the row */
|
||||
#appSettingsModal .set-row.has-field {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-row.has-field .set-select,
|
||||
#appSettingsModal .set-row.has-field .set-input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-row-actions-wide {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-row-actions-wide .set-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-num {
|
||||
width: 76px;
|
||||
}
|
||||
|
||||
/* Bigger touch targets for the toggles and chips */
|
||||
#appSettingsModal .switch-sm {
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#appSettingsModal .switch-sm .slider:before {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
#appSettingsModal .switch-sm input:checked + .slider:before {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-chip {
|
||||
font-size: 0.78rem;
|
||||
padding: 9px 14px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-modelgrid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-minigrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-mini .set-select {
|
||||
width: 148px;
|
||||
}
|
||||
|
||||
/* One scrollable line beats a ragged two-row wrap for 7 effort levels */
|
||||
#appSettingsModal .set-segment {
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-segment::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-segment button {
|
||||
flex: 0 0 auto;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
+348
-33
@@ -354,11 +354,8 @@ Object.assign(CodemanApp.prototype, {
|
||||
// Phone overview home screen: only meaningful under 430px, so the row is
|
||||
// hidden elsewhere rather than offering a toggle that changes nothing.
|
||||
document.getElementById('appSettingsMobileOverview').checked = settings.mobileOverviewEnabled ?? defaults.mobileOverviewEnabled ?? false;
|
||||
const phoneOnly = MobileDetection.getDeviceType() === 'mobile' ? '' : 'none';
|
||||
const mobileOverviewItem = document.getElementById('appSettingsMobileOverviewItem');
|
||||
if (mobileOverviewItem) mobileOverviewItem.style.display = phoneOnly;
|
||||
const phoneSection = document.getElementById('appSettingsPhoneSection');
|
||||
if (phoneSection) phoneSection.style.display = phoneOnly;
|
||||
if (mobileOverviewItem) mobileOverviewItem.style.display = MobileDetection.getDeviceType() === 'mobile' ? '' : 'none';
|
||||
// Session Manager, Away Digest and Cron buttons all default OFF (opt-in under
|
||||
// Display → Header Displays; the Cron button also ships with btn-cron--hidden
|
||||
// in the template, so an unchecked box and a hidden button stay consistent).
|
||||
@@ -500,12 +497,15 @@ Object.assign(CodemanApp.prototype, {
|
||||
// Updates section — show current version, reset transient result/progress UI.
|
||||
this._initUpdatesSection();
|
||||
|
||||
// Reset to first tab and wire up tab switching
|
||||
this.switchSettingsTab('settings-display');
|
||||
// Model cards + effort segment are views over the hidden <select>s above,
|
||||
// so they must be synced AFTER those have been given their stored values.
|
||||
this._initSettingsNav();
|
||||
this._syncSettingsChips();
|
||||
this._syncModelCards();
|
||||
this._syncEffortSegment();
|
||||
// Back to the top of the document (one scroll, not a tab reset).
|
||||
this.switchSettingsTab('settings-terminal');
|
||||
const modal = document.getElementById('appSettingsModal');
|
||||
modal.querySelectorAll('.modal-tabs .modal-tab-btn').forEach(btn => {
|
||||
btn.onclick = () => this.switchSettingsTab(btn.dataset.tab);
|
||||
});
|
||||
modal.classList.add('active');
|
||||
|
||||
// Activate focus trap
|
||||
@@ -514,44 +514,359 @@ Object.assign(CodemanApp.prototype, {
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the App Settings "Codex CLI" tab only on instances where the codex
|
||||
* binary actually resolves. Both settings on it (approval bypass, animated
|
||||
* status effects) are passed to `codex` at launch, so on a box without codex
|
||||
* the tab is a promise nothing can keep.
|
||||
* Show the App Settings "Codex" group only on instances where the codex binary
|
||||
* actually resolves. Both settings in it (approval bypass, animated status
|
||||
* effects) are passed to `codex` at launch, so on a box without codex the
|
||||
* group is a promise nothing can keep.
|
||||
*
|
||||
* Availability comes from the injected `window.__codemanCliAvailable`, shared
|
||||
* with the welcome buttons and the run-mode dropdown, so the tab never flickers
|
||||
* in and back out. Only the tab BUTTON is toggled: the panel already carries
|
||||
* `.modal-tab-content.hidden` unless it is the selected tab, and
|
||||
* openAppSettings() always reopens on Display, so an unreachable button is
|
||||
* enough to keep the panel unreachable.
|
||||
* with the welcome buttons and the run-mode dropdown, so the group never
|
||||
* flickers in and back out. The inputs stay in the DOM either way, so a user
|
||||
* without codex can never silently wipe the codex prefs of an instance that
|
||||
* has it (openAppSettings/saveAppSettings still read and write them).
|
||||
*
|
||||
* Note the inverted default versus the run buttons: an UNKNOWN flag hides this
|
||||
* tab. Hiding a settings tab costs a user nothing (the values stay in the DOM
|
||||
* and are still saved), whereas hiding a run button would leave a working
|
||||
* install with nothing to click.
|
||||
* group. Hiding it costs a user nothing, whereas hiding a run button would
|
||||
* leave a working install with nothing to click.
|
||||
*/
|
||||
_applyCodexSettingsVisibility() {
|
||||
const btn = document.querySelector('#appSettingsModal .modal-tab-btn[data-tab="settings-codex"]');
|
||||
if (btn) btn.style.display = window.__codemanCliAvailable?.codex === true ? '' : 'none';
|
||||
const group = document.getElementById('appSettingsCodexGroup');
|
||||
if (group) group.style.display = window.__codemanCliAvailable?.codex === true ? '' : 'none';
|
||||
},
|
||||
|
||||
switchSettingsTab(tabName) {
|
||||
/**
|
||||
* Scroll the settings document to a section.
|
||||
*
|
||||
* Kept under the historical `switchSettingsTab` name because it is the shared
|
||||
* entry point: openAppSettings() calls it, and admin-ui.js's injected Users
|
||||
* entry routes through it too. Sections are never hidden any more — the rail
|
||||
* is a table of contents over ONE document, so "switching" is a scroll.
|
||||
*/
|
||||
switchSettingsTab(sectionId) {
|
||||
// The Shortcuts list renders lazily so it reflects the CURRENT registry
|
||||
// (defaults + overrides) every time it is reached.
|
||||
if (sectionId === 'settings-shortcuts') this.renderShortcutSettingsList?.();
|
||||
const doc = document.getElementById('appSettingsDoc');
|
||||
const section = document.getElementById(sectionId);
|
||||
if (doc && section && typeof section.offsetTop === 'number') {
|
||||
// On phones the jump pill is sticky at the top of the document, so land
|
||||
// the section head below it instead of underneath it.
|
||||
const jump = document.getElementById('appSettingsJump');
|
||||
const inset = jump && jump.offsetParent ? jump.offsetHeight + 16 : 6;
|
||||
doc.scrollTop = Math.max(0, section.offsetTop - inset);
|
||||
}
|
||||
this._setActiveSettingsSection(sectionId);
|
||||
},
|
||||
|
||||
/** Paint the rail + jump pill for the section currently in view. */
|
||||
_setActiveSettingsSection(sectionId) {
|
||||
const modal = document.getElementById('appSettingsModal');
|
||||
// Toggle active class on tab buttons
|
||||
modal.querySelectorAll('.modal-tabs .modal-tab-btn').forEach(btn => {
|
||||
btn.classList.toggle('active', btn.dataset.tab === tabName);
|
||||
if (!modal || typeof modal.querySelectorAll !== 'function') return;
|
||||
let active = null;
|
||||
modal.querySelectorAll('.set-rail-item').forEach(item => {
|
||||
const on = item.dataset.section === sectionId;
|
||||
item.classList.toggle('active', on);
|
||||
if (on) active = item;
|
||||
});
|
||||
// Toggle hidden class on tab content
|
||||
modal.querySelectorAll('.modal-tab-content').forEach(content => {
|
||||
content.classList.toggle('hidden', content.id !== tabName);
|
||||
modal.querySelectorAll('.set-jump-row').forEach(row => {
|
||||
row.classList.toggle('active', row.dataset.section === sectionId);
|
||||
});
|
||||
// The Shortcuts tab renders lazily so the list reflects the CURRENT
|
||||
// registry (defaults + overrides) every time it is opened.
|
||||
if (tabName === 'settings-shortcuts') this.renderShortcutSettingsList?.();
|
||||
const label = document.getElementById('appSettingsJump')?.querySelector('.set-jump-label');
|
||||
if (label && active) label.textContent = active.textContent.trim();
|
||||
const ico = document.getElementById('appSettingsJump')?.querySelector('.set-jump-ico');
|
||||
const src = active?.querySelector('svg');
|
||||
if (ico && src) ico.innerHTML = src.innerHTML;
|
||||
},
|
||||
|
||||
/**
|
||||
* Wire the settings navigation once per page: rail clicks, the phone jump
|
||||
* menu, scroll-spy, live search, chip/card/segment views over the real inputs,
|
||||
* and the collapsible Advanced group. Idempotent — openAppSettings() calls it
|
||||
* on every open, and re-registering listeners on every open would multiply
|
||||
* them across a long-lived tab.
|
||||
*/
|
||||
_initSettingsNav() {
|
||||
const modal = document.getElementById('appSettingsModal');
|
||||
const doc = document.getElementById('appSettingsDoc');
|
||||
if (!modal || !doc || typeof modal.querySelectorAll !== 'function') return;
|
||||
this._buildModelCards();
|
||||
this._buildEffortSegment();
|
||||
// Rebuilt on every open: admin-ui.js appends its Users entry to the rail
|
||||
// after the first open, and the menu must not drift from the rail.
|
||||
this._buildSettingsJumpMenu();
|
||||
if (modal.dataset.navReady === '1') return;
|
||||
modal.dataset.navReady = '1';
|
||||
|
||||
// Delegated so rail entries injected later (Users) work without rewiring.
|
||||
modal.querySelector('.set-rail-items')?.addEventListener('click', e => {
|
||||
const item = e.target.closest?.('.set-rail-item');
|
||||
if (item?.dataset.section) this.switchSettingsTab(item.dataset.section);
|
||||
});
|
||||
document.getElementById('appSettingsJumpMenu')?.addEventListener('click', e => {
|
||||
const row = e.target.closest?.('.set-jump-row');
|
||||
if (!row?.dataset.section) return;
|
||||
this._toggleSettingsJump(false);
|
||||
this.switchSettingsTab(row.dataset.section);
|
||||
});
|
||||
document.getElementById('appSettingsJump')?.addEventListener('click', () => this._toggleSettingsJump());
|
||||
document.getElementById('appSettingsJumpVeil')?.addEventListener('click', () => this._toggleSettingsJump(false));
|
||||
|
||||
// Scroll-spy: the rail follows the document rather than driving it.
|
||||
doc.addEventListener('scroll', () => {
|
||||
if (this._settingsSpyQueued) return;
|
||||
this._settingsSpyQueued = true;
|
||||
requestAnimationFrame(() => {
|
||||
this._settingsSpyQueued = false;
|
||||
const sections = [...doc.querySelectorAll('.set-section')].filter(s => s.offsetParent !== null);
|
||||
if (!sections.length) return;
|
||||
let current = sections[0].id;
|
||||
for (const s of sections) {
|
||||
if (s.offsetTop - doc.scrollTop <= 140) current = s.id;
|
||||
}
|
||||
this._setActiveSettingsSection(current);
|
||||
});
|
||||
});
|
||||
|
||||
const search = document.getElementById('appSettingsSearch');
|
||||
search?.addEventListener('input', () => this._filterSettings(search.value));
|
||||
|
||||
// Chips are labels wrapping the real checkbox; mirror the checked state onto
|
||||
// the label so the styling does not depend on :has() support.
|
||||
modal.querySelectorAll('.set-chip input').forEach(input => {
|
||||
input.addEventListener('change', () => this._syncSettingsChips());
|
||||
});
|
||||
|
||||
const advHead = modal.querySelector('.set-group-head-toggle');
|
||||
const advGroup = advHead?.closest('.set-group-advanced');
|
||||
if (advHead && advGroup) {
|
||||
const toggle = () => {
|
||||
const open = advGroup.classList.toggle('open');
|
||||
advHead.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
};
|
||||
advHead.addEventListener('click', toggle);
|
||||
advHead.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
toggle();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('appSettingsOpusContext1m')?.addEventListener('change', () => this._applyModelSelection());
|
||||
},
|
||||
|
||||
/** Phone jump menu, mirrored from the rail so the two can never drift. */
|
||||
_buildSettingsJumpMenu() {
|
||||
const modal = document.getElementById('appSettingsModal');
|
||||
const menu = document.getElementById('appSettingsJumpMenu');
|
||||
if (!modal || !menu) return;
|
||||
menu.innerHTML = '';
|
||||
modal.querySelectorAll('.set-rail-item').forEach(item => {
|
||||
const row = document.createElement('button');
|
||||
row.type = 'button';
|
||||
row.className = 'set-jump-row';
|
||||
row.dataset.section = item.dataset.section;
|
||||
row.innerHTML = item.innerHTML;
|
||||
const section = document.getElementById(item.dataset.section);
|
||||
const count = section ? section.querySelectorAll('input, select').length : 0;
|
||||
if (count) {
|
||||
const n = document.createElement('span');
|
||||
n.className = 'set-jump-count';
|
||||
n.textContent = String(count);
|
||||
row.appendChild(n);
|
||||
}
|
||||
menu.appendChild(row);
|
||||
});
|
||||
},
|
||||
|
||||
_toggleSettingsJump(force) {
|
||||
const modal = document.getElementById('appSettingsModal');
|
||||
if (!modal) return;
|
||||
const open = force === undefined ? !modal.classList.contains('jump-open') : force;
|
||||
modal.classList.toggle('jump-open', open);
|
||||
document.getElementById('appSettingsJump')?.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
},
|
||||
|
||||
/** Mirror checkbox state onto the chip labels (see _initSettingsNav). */
|
||||
_syncSettingsChips() {
|
||||
document.querySelectorAll('#appSettingsModal .set-chip').forEach(chip => {
|
||||
chip.classList.toggle('is-on', !!chip.querySelector('input')?.checked);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Build the model picker cards from the hidden <select>'s own options, so the
|
||||
* select stays the single source of truth that openAppSettings/saveAppSettings
|
||||
* read and write by id. The `[1m]` variants are folded away: context width is a
|
||||
* property of the chosen model (the "1M context window" switch), not a rival
|
||||
* setting that silently loses to it.
|
||||
*/
|
||||
_buildModelCards() {
|
||||
const select = document.getElementById('appSettingsClaudeModel');
|
||||
const grid = document.getElementById('appSettingsModelCards');
|
||||
if (!select || !grid || grid.dataset.built === '1' || !select.options) return;
|
||||
grid.innerHTML = '';
|
||||
[...select.options]
|
||||
.filter(opt => opt.dataset.variant !== '1m')
|
||||
.forEach(opt => {
|
||||
const card = document.createElement('button');
|
||||
card.type = 'button';
|
||||
card.className = 'set-modelcard';
|
||||
card.setAttribute('role', 'radio');
|
||||
card.dataset.value = opt.value;
|
||||
if (opt.dataset.ctx === '1') card.dataset.ctx = '1';
|
||||
const top = document.createElement('span');
|
||||
top.className = 'set-mc-top';
|
||||
const name = document.createElement('span');
|
||||
name.className = 'set-mc-name';
|
||||
name.textContent = opt.textContent;
|
||||
top.appendChild(name);
|
||||
const dot = document.createElement('span');
|
||||
dot.className = 'set-mc-dot';
|
||||
top.appendChild(dot);
|
||||
card.appendChild(top);
|
||||
const meta = document.createElement('span');
|
||||
meta.className = 'set-mc-meta';
|
||||
meta.textContent = opt.dataset.meta || '';
|
||||
card.appendChild(meta);
|
||||
if (opt.dataset.ctx === '1') {
|
||||
const ctx = document.createElement('span');
|
||||
ctx.className = 'set-mc-ctx';
|
||||
ctx.textContent = '1M capable';
|
||||
card.appendChild(ctx);
|
||||
}
|
||||
card.addEventListener('click', () => {
|
||||
this._settingsModelBase = opt.value;
|
||||
this._applyModelSelection();
|
||||
});
|
||||
grid.appendChild(card);
|
||||
});
|
||||
grid.dataset.built = '1';
|
||||
},
|
||||
|
||||
/** Derive card + context-switch state from the select's stored value. */
|
||||
_syncModelCards() {
|
||||
const select = document.getElementById('appSettingsClaudeModel');
|
||||
if (!select) return;
|
||||
const value = select.value || '';
|
||||
this._settingsModelBase = value.endsWith('[1m]') ? value.slice(0, -4) : value;
|
||||
if (value.endsWith('[1m]')) {
|
||||
const ctx = document.getElementById('appSettingsOpusContext1m');
|
||||
if (ctx) ctx.checked = true;
|
||||
}
|
||||
this._applyModelSelection();
|
||||
},
|
||||
|
||||
/** Compose card + context switch back into the select's value. */
|
||||
_applyModelSelection() {
|
||||
const select = document.getElementById('appSettingsClaudeModel');
|
||||
const grid = document.getElementById('appSettingsModelCards');
|
||||
if (!select || !grid) return;
|
||||
const base = this._settingsModelBase || '';
|
||||
let capable = false;
|
||||
grid.querySelectorAll('.set-modelcard').forEach(card => {
|
||||
const on = card.dataset.value === base;
|
||||
card.classList.toggle('selected', on);
|
||||
card.setAttribute('aria-checked', on ? 'true' : 'false');
|
||||
if (on) capable = card.dataset.ctx === '1';
|
||||
});
|
||||
const ctxOn = !!document.getElementById('appSettingsOpusContext1m')?.checked;
|
||||
select.value = base && capable && ctxOn ? `${base}[1m]` : base;
|
||||
// A model with no 1M variant makes the switch inert; say so instead of
|
||||
// leaving a toggle that looks like it does something.
|
||||
const row = document.getElementById('appSettingsContextRow');
|
||||
const desc = document.getElementById('appSettingsContextDesc');
|
||||
const inert = !!base && !capable;
|
||||
row?.classList.toggle('set-row-disabled', inert);
|
||||
if (desc) {
|
||||
desc.textContent = inert
|
||||
? 'The selected model has no 1M variant.'
|
||||
: base
|
||||
? 'Available for Fable 5, Opus and Opus 4.6.'
|
||||
: 'With no model pinned, this starts new sessions on Opus with a 1M window.';
|
||||
}
|
||||
},
|
||||
|
||||
_buildEffortSegment() {
|
||||
const select = document.getElementById('appSettingsThinkingEffort');
|
||||
const seg = document.getElementById('appSettingsEffortSegment');
|
||||
if (!select || !seg || seg.dataset.built === '1' || !select.options) return;
|
||||
seg.innerHTML = '';
|
||||
[...select.options].forEach(opt => {
|
||||
const btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.setAttribute('role', 'radio');
|
||||
btn.dataset.value = opt.value;
|
||||
btn.textContent = opt.textContent;
|
||||
btn.addEventListener('click', () => {
|
||||
select.value = opt.value;
|
||||
this._syncEffortSegment();
|
||||
});
|
||||
seg.appendChild(btn);
|
||||
});
|
||||
seg.dataset.built = '1';
|
||||
},
|
||||
|
||||
_syncEffortSegment() {
|
||||
const select = document.getElementById('appSettingsThinkingEffort');
|
||||
const seg = document.getElementById('appSettingsEffortSegment');
|
||||
if (!select || !seg) return;
|
||||
seg.querySelectorAll('button').forEach(btn => {
|
||||
const on = btn.dataset.value === (select.value || '');
|
||||
btn.classList.toggle('selected', on);
|
||||
btn.setAttribute('aria-checked', on ? 'true' : 'false');
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Live filter across every section. Everything stays mounted (that is the
|
||||
* point of the single-document layout), so a search only hides units that do
|
||||
* not match, then collapses groups and sections left with nothing visible.
|
||||
*/
|
||||
_filterSettings(query) {
|
||||
const doc = document.getElementById('appSettingsDoc');
|
||||
if (!doc) return;
|
||||
const q = (query || '').trim().toLowerCase();
|
||||
const UNIT = '.set-row, .set-chip, .set-modelgrid, .set-minigrid, .event-type-grid, #appSettingsShortcutsList';
|
||||
const units = [...doc.querySelectorAll(UNIT)];
|
||||
let anyVisible = false;
|
||||
|
||||
units.forEach(unit => {
|
||||
if (!q) {
|
||||
unit.classList.remove('set-hit-hidden');
|
||||
return;
|
||||
}
|
||||
const hay = `${unit.dataset?.search || ''} ${unit.textContent || ''}`.toLowerCase();
|
||||
const hit = hay.includes(q);
|
||||
unit.classList.toggle('set-hit-hidden', !hit);
|
||||
if (hit) anyVisible = true;
|
||||
});
|
||||
|
||||
// A chip wrapper is only empty when every chip inside it is hidden.
|
||||
doc.querySelectorAll('.set-chips').forEach(wrap => {
|
||||
const hasVisible = [...wrap.querySelectorAll('.set-chip')].some(c => !c.classList.contains('set-hit-hidden'));
|
||||
wrap.classList.toggle('set-hit-hidden', !!q && !hasVisible);
|
||||
});
|
||||
|
||||
doc.querySelectorAll('.set-group').forEach(group => {
|
||||
const hasVisible = [...group.querySelectorAll(UNIT)].some(u => !u.classList.contains('set-hit-hidden'));
|
||||
group.classList.toggle('set-hit-hidden', !!q && !hasVisible);
|
||||
// An Advanced group that matches must open, or the hit stays invisible.
|
||||
if (q && hasVisible) group.classList.add('open');
|
||||
});
|
||||
|
||||
doc.querySelectorAll('.set-section').forEach(section => {
|
||||
const hasVisible = [...section.querySelectorAll('.set-group')].some(g => !g.classList.contains('set-hit-hidden'));
|
||||
section.classList.toggle('set-hit-hidden', !!q && !hasVisible);
|
||||
});
|
||||
|
||||
const empty = document.getElementById('appSettingsSearchEmpty');
|
||||
if (empty) empty.hidden = !q || anyVisible;
|
||||
if (!q) doc.querySelectorAll('.set-group-advanced').forEach(g => g.classList.remove('open'));
|
||||
},
|
||||
|
||||
closeAppSettings() {
|
||||
this._toggleSettingsJump(false);
|
||||
document.getElementById('appSettingsModal').classList.remove('active');
|
||||
|
||||
// Deactivate focus trap and restore focus
|
||||
|
||||
+709
-19
@@ -1316,11 +1316,31 @@ html[data-line-anim="packet"] .connection-line.line-enter {
|
||||
|
||||
.session-tab .tab-status.idle { background: var(--green); }
|
||||
.session-tab .tab-status.busy {
|
||||
position: relative;
|
||||
background: var(--green);
|
||||
animation: pulse 1.5s infinite;
|
||||
/* Performance: GPU acceleration for animation */
|
||||
will-change: opacity;
|
||||
}
|
||||
/* Orbiting ring on a WORKING tab: the same `tab-load-spin` circle the desktop
|
||||
home rail (.home-sessions-dot--working) and the phone overview
|
||||
(.mobile-overview-dot--working) draw, so "working" reads identically on every
|
||||
surface. Pseudo-element on purpose — the skin block below sets
|
||||
`box-shadow: none` on .tab-status.busy to keep tab dots halo-free, and it
|
||||
outranks any plain class rule here; a ring drawn with a border is untouched by
|
||||
that and keeps the tabs quiet while still showing motion. Absolutely
|
||||
positioned, so it never widens the tab or shifts the label. */
|
||||
.session-tab .tab-status.busy::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -3px;
|
||||
border: 1.5px solid color-mix(in srgb, var(--green) 25%, transparent);
|
||||
border-top-color: var(--green);
|
||||
border-radius: 50%;
|
||||
animation: tab-load-spin 0.7s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.session-tab .tab-status.error { background: var(--red); }
|
||||
.session-tab .tab-status.ended { background: var(--text-muted); opacity: 0.5; }
|
||||
|
||||
@@ -5765,11 +5785,6 @@ body.touch-device .terminal-container .xterm .xterm-helper-textarea {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* App Settings packs a 2-column toggle grid; give it room so right-column
|
||||
switches aren't cramped against the edge (other modal-lg modals stay 540). */
|
||||
#appSettingsModal .modal-content.modal-lg {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/* Mobile Case Picker - Base Styles */
|
||||
.mobile-case-picker-sheet {
|
||||
@@ -12081,20 +12096,6 @@ body.touch-device.cjk-input-visible .main {
|
||||
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);
|
||||
}
|
||||
@@ -14316,9 +14317,698 @@ html[data-skin="daylight-blue"] .welcome-btn-tunnel.active:hover {
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.session-tab .tab-status.busy::after,
|
||||
.home-sessions-row,
|
||||
.home-sessions-dot,
|
||||
.home-sessions-dot::after {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════════
|
||||
App Settings (#appSettingsModal)
|
||||
|
||||
A left rail that is a TABLE OF CONTENTS over ONE scrolling document, not a
|
||||
tab switcher: every section stays mounted, the rail follows the scroll, and
|
||||
the browser's own find-in-page still works across all of them.
|
||||
|
||||
Scoped under #appSettingsModal on purpose. `.modal-tabs`/`.modal-tab-btn`
|
||||
are shared with #sessionOptionsModal and #createCaseModal, so this file
|
||||
introduces its own `set-*` classes rather than restyling those.
|
||||
═══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
#appSettingsModal .modal-content.modal-lg {
|
||||
max-width: min(960px, 96vw);
|
||||
width: min(960px, 96vw);
|
||||
height: min(700px, 88vh);
|
||||
max-height: 88vh;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-shell-head {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-head-actions {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* The phone layout drops the bottom action bar and saves from the header
|
||||
instead; on desktop the footer owns Save, so this stays hidden. */
|
||||
#appSettingsModal .set-head-save {
|
||||
display: none;
|
||||
font: inherit;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 620;
|
||||
letter-spacing: -0.01em;
|
||||
padding: 8px 15px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(180deg, var(--accent-grad-a), var(--accent-grad-b));
|
||||
color: var(--accent-ink);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-body {
|
||||
display: grid;
|
||||
grid-template-columns: 212px minmax(0, 1fr);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-foot {
|
||||
margin-top: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── rail ─────────────────────────────────────────────────────────────── */
|
||||
#appSettingsModal .set-rail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px 10px;
|
||||
border-right: 1px solid var(--border);
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-search {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-search svg {
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
color: var(--text-muted);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-search input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 7px 9px 7px 28px;
|
||||
font: inherit;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text);
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-search input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-rail-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-rail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 7px 10px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
font: inherit;
|
||||
font-size: 0.77rem;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-rail-item svg {
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-rail-item:hover {
|
||||
background: var(--control-bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-rail-item.active {
|
||||
color: var(--accent);
|
||||
font-weight: 580;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-rail-item.active svg {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-rail-item.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-rail-foot {
|
||||
margin: auto 0 0;
|
||||
padding: 10px 10px 2px;
|
||||
font-size: 0.62rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-muted);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* ── document ─────────────────────────────────────────────────────────── */
|
||||
#appSettingsModal .set-doc {
|
||||
overflow-y: auto;
|
||||
padding: 0 22px 40px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-section {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-section + .set-section {
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-section-head svg {
|
||||
color: var(--accent);
|
||||
flex-shrink: 0;
|
||||
padding: 5px;
|
||||
border-radius: 8px;
|
||||
background: rgba(var(--accent-rgb), 0.13);
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.24);
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-section-head h2 {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 640;
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-section-blurb {
|
||||
margin: 0 0 14px 36px;
|
||||
font-size: 0.69rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-empty {
|
||||
margin: 24px 0 0;
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── groups ───────────────────────────────────────────────────────────── */
|
||||
#appSettingsModal .set-group + .set-group {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-head h4 {
|
||||
margin: 0;
|
||||
font-size: 0.63rem;
|
||||
font-weight: 640;
|
||||
letter-spacing: 0.09em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-head::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, var(--border), transparent);
|
||||
order: 9;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-head-toggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-adv {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 0.62rem;
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-adv svg {
|
||||
transition: transform 0.18s;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-advanced.open .set-adv svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-advanced:not(.open) .set-group-body,
|
||||
#appSettingsModal .set-group-advanced:not(.open) .set-group-hint {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-hint {
|
||||
margin: -2px 0 9px;
|
||||
font-size: 0.68rem;
|
||||
line-height: 1.45;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-group-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* ── rows ─────────────────────────────────────────────────────────────── */
|
||||
#appSettingsModal .set-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 9px 12px;
|
||||
border-radius: 9px;
|
||||
background: rgba(255, 255, 255, 0.028);
|
||||
border: 1px solid rgba(255, 255, 255, 0.055);
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-row:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.09);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-row-block {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-row-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-row-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
font-size: 0.79rem;
|
||||
color: var(--text);
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-row-desc {
|
||||
font-size: 0.66rem;
|
||||
line-height: 1.45;
|
||||
color: var(--text-muted);
|
||||
max-width: 62ch;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-row-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-scope,
|
||||
#appSettingsModal .set-tag {
|
||||
font-size: 0.52rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
border-radius: 4px;
|
||||
padding: 1px 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-scope {
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-tag {
|
||||
color: var(--accent);
|
||||
background: rgba(var(--accent-rgb), 0.13);
|
||||
border: 1px solid rgba(var(--accent-rgb), 0.25);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-tag-beta {
|
||||
color: var(--yellow);
|
||||
background: rgba(240, 194, 90, 0.12);
|
||||
border-color: rgba(240, 194, 90, 0.28);
|
||||
}
|
||||
|
||||
/* ── controls ─────────────────────────────────────────────────────────── */
|
||||
#appSettingsModal .set-select,
|
||||
#appSettingsModal .set-input,
|
||||
#appSettingsModal .set-num {
|
||||
font: inherit;
|
||||
font-size: 0.74rem;
|
||||
color: var(--text);
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 7px;
|
||||
padding: 5px 8px;
|
||||
outline: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-select:focus,
|
||||
#appSettingsModal .set-input:focus,
|
||||
#appSettingsModal .set-num:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-select {
|
||||
min-width: 190px;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-input {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-num {
|
||||
width: 62px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-unit {
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-static {
|
||||
font-size: 0.74rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
#appSettingsModal .mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-copy {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-dim);
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* The cards and the segmented control are the visible UI; the underlying
|
||||
<select> stays in the DOM as the single source of truth that
|
||||
openAppSettings()/saveAppSettings() read and write by id. */
|
||||
#appSettingsModal .set-field-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-note,
|
||||
#appSettingsModal .set-notes,
|
||||
#appSettingsModal .set-progress {
|
||||
font-size: 0.72rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-secondary);
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-notes {
|
||||
max-height: 160px;
|
||||
overflow: auto;
|
||||
font-size: 0.7rem;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
background: rgba(127, 127, 127, 0.08);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-progress {
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* ── chips (header buttons, panels, features, levels) ─────────────────── */
|
||||
#appSettingsModal .set-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 0.72rem;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--control-border);
|
||||
background: rgba(255, 255, 255, 0.028);
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-chip input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-chip::before {
|
||||
content: '\2713';
|
||||
font-size: 0.8em;
|
||||
line-height: 1;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: width 0.15s, opacity 0.15s;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-chip:hover {
|
||||
border-color: var(--control-border-hover);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* `.is-on` is written by settings-ui.js on load and on change; `:has()` keeps
|
||||
the state correct for any chip toggled before that listener runs. */
|
||||
#appSettingsModal .set-chip.is-on,
|
||||
#appSettingsModal .set-chip:has(input:checked) {
|
||||
color: var(--accent);
|
||||
border-color: rgba(var(--accent-rgb), 0.45);
|
||||
background: rgba(var(--accent-rgb), 0.12);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-chip.is-on::before,
|
||||
#appSettingsModal .set-chip:has(input:checked)::before {
|
||||
width: 0.85em;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-chip:focus-within {
|
||||
outline: 2px solid rgba(var(--accent-rgb), 0.5);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* ── model cards ──────────────────────────────────────────────────────── */
|
||||
#appSettingsModal .set-modelgrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-modelcard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
padding: 9px 11px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--control-border);
|
||||
background: rgba(255, 255, 255, 0.028);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-modelcard:hover {
|
||||
border-color: var(--control-border-hover);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-modelcard.selected {
|
||||
border-color: rgba(var(--accent-rgb), 0.55);
|
||||
background: rgba(var(--accent-rgb), 0.11);
|
||||
box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.2);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-mc-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-mc-name {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text);
|
||||
font-weight: 560;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-mc-dot {
|
||||
margin-left: auto;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-modelcard.selected .set-mc-dot {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-mc-meta {
|
||||
font-size: 0.64rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-mc-ctx {
|
||||
margin-top: 2px;
|
||||
align-self: flex-start;
|
||||
font-size: 0.53rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-row-disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
/* ── segmented control (thinking effort) ──────────────────────────────── */
|
||||
#appSettingsModal .set-segment {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
padding: 3px;
|
||||
background: rgba(0, 0, 0, 0.26);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-segment button {
|
||||
flex: 1;
|
||||
font: inherit;
|
||||
font-size: 0.68rem;
|
||||
padding: 6px 4px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-segment button:hover {
|
||||
color: var(--text);
|
||||
background: var(--control-bg);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-segment button.selected {
|
||||
background: linear-gradient(180deg, var(--accent-grad-a), var(--accent-grad-b));
|
||||
color: var(--accent-ink);
|
||||
font-weight: 620;
|
||||
}
|
||||
|
||||
/* ── task-routing 2x2 ─────────────────────────────────────────────────── */
|
||||
#appSettingsModal .set-minigrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
#appSettingsModal .set-mini {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 7px 10px;
|
||||
border-radius: 9px;
|
||||
background: rgba(255, 255, 255, 0.028);
|
||||
border: 1px solid rgba(255, 255, 255, 0.055);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-mini-label {
|
||||
font-size: 0.74rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
#appSettingsModal .set-mini .set-select {
|
||||
min-width: 0;
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
/* Search hides non-matching units; everything stays mounted underneath. */
|
||||
#appSettingsModal .set-hit-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ── phone jump control: desktop hides it entirely ────────────────────── */
|
||||
#appSettingsModal .set-jump,
|
||||
#appSettingsModal .set-jump-menu,
|
||||
#appSettingsModal .set-jump-veil {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ── injected sections (admin Users panel) ────────────────────────────── */
|
||||
#appSettingsModal .set-section .form-hint {
|
||||
display: block;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
@@ -15,15 +15,6 @@
|
||||
(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.
|
||||
@@ -115,30 +106,6 @@
|
||||
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,
|
||||
@@ -167,7 +134,6 @@
|
||||
global.CodemanTerminalInput = {
|
||||
isTerminalQueryResponse,
|
||||
shouldSuppressTerminalQueryResponse,
|
||||
isTerminalFocusOrMouseReport,
|
||||
isComposerNavKey,
|
||||
classifyPredictInput,
|
||||
isCodexComposerRow,
|
||||
@@ -964,28 +930,6 @@ 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 ──
|
||||
@@ -2640,20 +2584,6 @@ 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}`);
|
||||
|
||||
@@ -28,7 +28,7 @@ async function bootWith(me: Record<string, unknown>) {
|
||||
const dom = new JSDOM(
|
||||
`<!doctype html><body>
|
||||
<button id="adminPanelBtn" class="btn-admin-panel btn-admin-panel--hidden"></button>
|
||||
<div class="modal" id="appSettingsModal"><div class="modal-tabs"></div><div class="modal-body"></div></div>
|
||||
<div class="modal" id="appSettingsModal"><nav class="set-rail"><div class="set-rail-items"></div></nav><div class="set-doc" id="appSettingsDoc"></div></div>
|
||||
</body>`,
|
||||
{ url: 'http://localhost/', runScripts: 'outside-only' }
|
||||
);
|
||||
@@ -45,22 +45,23 @@ async function bootWith(me: Record<string, unknown>) {
|
||||
}
|
||||
|
||||
describe('admin-ui boot', () => {
|
||||
it('exposes the identity and injects the Users tab for a multi-user admin', async () => {
|
||||
it('exposes the identity and injects the Users section for a multi-user admin', async () => {
|
||||
const { win } = await bootWith({ username: 'root', role: 'admin', multiUser: true, mustChangePassword: false });
|
||||
expect(win.__codemanUser).toMatchObject({ username: 'root', role: 'admin', multiUser: true });
|
||||
const btn = win.document.querySelector('[data-tab="settings-users"]');
|
||||
// The settings modal is a rail over one document: a rail entry, not a tab.
|
||||
const btn = win.document.querySelector('[data-section="settings-users"]');
|
||||
expect(btn).toBeTruthy();
|
||||
expect(win.document.getElementById('settings-users')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('does NOT inject the Users tab for a regular user', async () => {
|
||||
it('does NOT inject the Users section for a regular user', async () => {
|
||||
const { win } = await bootWith({ username: 'joe', role: 'user', multiUser: true, mustChangePassword: false });
|
||||
expect(win.document.querySelector('[data-tab="settings-users"]')).toBeFalsy();
|
||||
expect(win.document.querySelector('[data-section="settings-users"]')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('does NOT inject the Users tab in single-user mode', async () => {
|
||||
const { win } = await bootWith({ username: 'admin', role: 'admin', multiUser: false, mustChangePassword: false });
|
||||
expect(win.document.querySelector('[data-tab="settings-users"]')).toBeFalsy();
|
||||
expect(win.document.querySelector('[data-section="settings-users"]')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('shows the change-password modal when mustChangePassword is set', async () => {
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* App Settings structural guard.
|
||||
*
|
||||
* The settings modal is a rail (table of contents) over ONE scrolling document.
|
||||
* Its load/save path is pure `getElementById` by a fixed set of ids
|
||||
* (openAppSettings / saveAppSettings in settings-ui.js), so a restructure of the
|
||||
* markup that drops or renames an element does not fail loudly: the setting just
|
||||
* silently stops loading, or stops being saved and falls back to its default.
|
||||
*
|
||||
* These tests read the REAL settings-ui.js and index.html and pin that contract.
|
||||
*/
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { readFileSync } from 'node:fs';
|
||||
import { resolve } from 'node:path';
|
||||
|
||||
const publicDir = resolve(import.meta.dirname, '../src/web/public');
|
||||
const html = readFileSync(resolve(publicDir, 'index.html'), 'utf8');
|
||||
const settingsUi = readFileSync(resolve(publicDir, 'settings-ui.js'), 'utf8');
|
||||
|
||||
/** The App Settings modal markup, so assertions can't be satisfied elsewhere. */
|
||||
function settingsModal(): string {
|
||||
const start = html.indexOf('<div class="modal" id="appSettingsModal">');
|
||||
expect(start).toBeGreaterThan(-1);
|
||||
const end = html.indexOf('<!-- Shortcut Overlay Modal -->', start);
|
||||
expect(end).toBeGreaterThan(start);
|
||||
return html.slice(start, end);
|
||||
}
|
||||
|
||||
/**
|
||||
* Every id the load and save paths touch. Scoped to those two functions on
|
||||
* purpose: settings-ui.js also drives elements that live OUTSIDE the modal
|
||||
* (toasts, header chips), and those are not this file's contract.
|
||||
*/
|
||||
function referencedIds(): string[] {
|
||||
const ids = new Set<string>();
|
||||
for (const fn of ['openAppSettings()', 'async saveAppSettings()']) {
|
||||
const start = settingsUi.indexOf(`\n ${fn} {`);
|
||||
expect(start, `${fn} not found in settings-ui.js`).toBeGreaterThan(-1);
|
||||
const body = settingsUi.slice(start, settingsUi.indexOf('\n },', start));
|
||||
for (const m of body.matchAll(/getElementById\('([A-Za-z0-9_-]+)'\)/g)) ids.add(m[1]);
|
||||
}
|
||||
return [...ids];
|
||||
}
|
||||
|
||||
describe('App Settings modal structure', () => {
|
||||
it('keeps every element settings-ui.js loads or saves by id', () => {
|
||||
const modal = settingsModal();
|
||||
const missing = referencedIds().filter((id) => !modal.includes(`id="${id}"`));
|
||||
expect(missing).toEqual([]);
|
||||
});
|
||||
|
||||
it('carries every section the rail points at, exactly once', () => {
|
||||
const modal = settingsModal();
|
||||
const sections = [...modal.matchAll(/data-section="([a-z-]+)"/g)].map((m) => m[1]);
|
||||
expect(sections.length).toBeGreaterThanOrEqual(9);
|
||||
for (const id of new Set(sections)) {
|
||||
const hits = modal.split(`<section class="set-section" id="${id}"`).length - 1;
|
||||
expect(hits, `section ${id} should exist exactly once`).toBe(1);
|
||||
}
|
||||
});
|
||||
|
||||
it('opens on Terminal & Input, so Local Echo is the first thing in reach', () => {
|
||||
expect(settingsUi).toContain("this.switchSettingsTab('settings-terminal')");
|
||||
const terminal = settingsModal().match(/id="settings-terminal"([\s\S]*?)<\/section>/);
|
||||
const localEcho = terminal?.[1].indexOf('appSettingsLocalEcho') ?? -1;
|
||||
const cjk = terminal?.[1].indexOf('appSettingsCjkInput') ?? -1;
|
||||
expect(localEcho).toBeGreaterThan(-1);
|
||||
expect(localEcho).toBeLessThan(cjk);
|
||||
});
|
||||
|
||||
it('models: keeps the 1M variants as select options behind the context switch', () => {
|
||||
const modal = settingsModal();
|
||||
const select = modal.match(/id="appSettingsClaudeModel"([\s\S]*?)<\/select>/)?.[1] ?? '';
|
||||
// The cards render the base models; the [1m] rows exist so that base + the
|
||||
// context switch can compose back into a real claudeModel value.
|
||||
for (const value of ['opus[1m]', 'claude-fable-5[1m]', 'claude-opus-4-6[1m]']) {
|
||||
expect(select).toContain(`value="${value}"`);
|
||||
}
|
||||
expect(select).toContain('data-ctx="1"');
|
||||
expect(modal).toContain('id="appSettingsOpusContext1m"');
|
||||
});
|
||||
|
||||
it('never hides sections behind .modal-tab-content (that class means display:none)', () => {
|
||||
expect(settingsModal()).not.toContain('modal-tab-content');
|
||||
});
|
||||
|
||||
it('leaves the shared modal tab classes to the other modals', () => {
|
||||
// #sessionOptionsModal and #createCaseModal still use .modal-tabs; the
|
||||
// settings rail must not restyle them out from under those.
|
||||
expect(settingsModal()).not.toContain('class="modal-tabs"');
|
||||
expect(html).toContain('<div class="modal-tabs">');
|
||||
});
|
||||
|
||||
it('exposes the rail hooks admin-ui.js injects the Users section into', () => {
|
||||
const modal = settingsModal();
|
||||
expect(modal).toContain('class="set-rail-items"');
|
||||
expect(modal).toContain('id="appSettingsDoc"');
|
||||
const adminUi = readFileSync(resolve(publicDir, 'admin-ui.js'), 'utf8');
|
||||
expect(adminUi).toContain('.set-rail-items');
|
||||
expect(adminUi).toContain('.set-doc');
|
||||
});
|
||||
});
|
||||
@@ -1,567 +0,0 @@
|
||||
/**
|
||||
* @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,183 +1048,6 @@ 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', () => {
|
||||
|
||||
+25
-25
@@ -274,41 +274,41 @@ describe('Run launch synchronization', () => {
|
||||
});
|
||||
|
||||
describe('Codex quick start settings', () => {
|
||||
it('renders Codex CLI settings in a dedicated app settings tab', () => {
|
||||
it('renders Codex CLI settings in their own group inside Agents & CLIs', () => {
|
||||
const html = readFileSync(resolve(import.meta.dirname, '../src/web/public/index.html'), 'utf8');
|
||||
|
||||
expect(html).toContain('data-tab="settings-codex">Codex CLI</button>');
|
||||
// The settings modal is one scrolling document: Codex is a GROUP that can be
|
||||
// hidden wholesale, not a tab (see _applyCodexSettingsVisibility).
|
||||
const clis = html.match(/<section class="set-section" id="settings-clis"([\s\S]*?)<\/section>/);
|
||||
expect(clis?.[1]).toBeTruthy();
|
||||
|
||||
const claudeTab = html.match(
|
||||
/<div class="modal-tab-content hidden" id="settings-claude">([\s\S]*?)<!-- Codex CLI Tab -->/
|
||||
);
|
||||
expect(claudeTab?.[1]).not.toContain('appSettingsCodexDangerouslyBypassApprovals');
|
||||
expect(claudeTab?.[1]).not.toContain('appSettingsCodexAnimations');
|
||||
const codexGroup = clis![1].match(/id="appSettingsCodexGroup"([\s\S]*)$/);
|
||||
expect(codexGroup?.[1]).toContain('appSettingsCodexDangerouslyBypassApprovals');
|
||||
expect(codexGroup?.[1]).toContain('appSettingsCodexAnimations');
|
||||
expect(codexGroup?.[1]).not.toContain('appSettingsCodexRenderMode');
|
||||
|
||||
const codexTab = html.match(
|
||||
/<div class="modal-tab-content hidden" id="settings-codex">([\s\S]*?)<\/div>\s*<!-- Models Tab -->/
|
||||
);
|
||||
expect(codexTab?.[1]).toContain('appSettingsCodexDangerouslyBypassApprovals');
|
||||
expect(codexTab?.[1]).toContain('appSettingsCodexAnimations');
|
||||
expect(codexTab?.[1]).not.toContain('appSettingsCodexRenderMode');
|
||||
// The Claude settings above it must not have absorbed the codex inputs.
|
||||
const beforeCodex = clis![1].slice(0, clis![1].indexOf('id="appSettingsCodexGroup"'));
|
||||
expect(beforeCodex).not.toContain('appSettingsCodexDangerouslyBypassApprovals');
|
||||
expect(beforeCodex).not.toContain('appSettingsCodexAnimations');
|
||||
});
|
||||
|
||||
describe('Codex CLI tab visibility', () => {
|
||||
// Both settings on the tab are handed to `codex` at launch, so on an instance
|
||||
// where the binary does not resolve the tab is a promise nothing can keep.
|
||||
// renderIndexHtml injects window.__codemanCliAvailable; this pins the client
|
||||
// half. Coupled test: it drives the REAL settings-ui.js against a stub button,
|
||||
// so deleting the call in openAppSettings() is what it is meant to catch.
|
||||
describe('Codex CLI group visibility', () => {
|
||||
// Both settings in the group are handed to `codex` at launch, so on an
|
||||
// instance where the binary does not resolve the group is a promise nothing
|
||||
// can keep. renderIndexHtml injects window.__codemanCliAvailable; this pins
|
||||
// the client half. Coupled test: it drives the REAL settings-ui.js against a
|
||||
// stub element, so deleting the call in openAppSettings() is what it catches.
|
||||
function loadSettingsUi(codexAvailable: boolean | undefined) {
|
||||
const codexTabBtn = { dataset: { tab: 'settings-codex' }, style: { display: 'PRISTINE' } };
|
||||
const codexTabBtn = { id: 'appSettingsCodexGroup', style: { display: 'PRISTINE' } };
|
||||
const CodemanApp = function CodemanApp(this: any) {};
|
||||
const context: any = vm.createContext({
|
||||
CodemanApp,
|
||||
MobileDetection: { getDeviceType: () => 'desktop', isTouchDevice: () => false, isHandheldDevice: () => false },
|
||||
localStorage: { getItem: () => null, setItem: () => {} },
|
||||
document: {
|
||||
getElementById: () => null,
|
||||
querySelector: (sel: string) => (sel.includes('[data-tab="settings-codex"]') ? codexTabBtn : null),
|
||||
getElementById: (id: string) => (id === 'appSettingsCodexGroup' ? codexTabBtn : null),
|
||||
querySelector: () => null,
|
||||
},
|
||||
console,
|
||||
});
|
||||
@@ -319,19 +319,19 @@ describe('Codex quick start settings', () => {
|
||||
return { app: new (CodemanApp as any)(), codexTabBtn };
|
||||
}
|
||||
|
||||
it('hides the Codex tab when the codex binary is not available', () => {
|
||||
it('hides the Codex group when the codex binary is not available', () => {
|
||||
const { app, codexTabBtn } = loadSettingsUi(false);
|
||||
app._applyCodexSettingsVisibility();
|
||||
expect(codexTabBtn.style.display).toBe('none');
|
||||
});
|
||||
|
||||
it('hides the Codex tab when the availability flag was never injected', () => {
|
||||
it('hides the Codex group when the availability flag was never injected', () => {
|
||||
const { app, codexTabBtn } = loadSettingsUi(undefined);
|
||||
app._applyCodexSettingsVisibility();
|
||||
expect(codexTabBtn.style.display).toBe('none');
|
||||
});
|
||||
|
||||
it('shows the Codex tab when codex is available', () => {
|
||||
it('shows the Codex group when codex is available', () => {
|
||||
const { app, codexTabBtn } = loadSettingsUi(true);
|
||||
app._applyCodexSettingsVisibility();
|
||||
expect(codexTabBtn.style.display).toBe('');
|
||||
|
||||
@@ -32,8 +32,8 @@ describe('shortcut registry and overlay', () => {
|
||||
expect(appSource).not.toContain("key: '/'");
|
||||
});
|
||||
|
||||
it('exposes shortcut overrides in a dedicated App Settings shortcuts tab', () => {
|
||||
expect(htmlSource).toContain('data-tab="settings-shortcuts"');
|
||||
it('exposes shortcut overrides in a dedicated App Settings shortcuts section', () => {
|
||||
expect(htmlSource).toContain('data-section="settings-shortcuts"');
|
||||
expect(htmlSource).toContain('id="settings-shortcuts"');
|
||||
expect(htmlSource).toContain('id="appSettingsShortcutsList"');
|
||||
expect(htmlSource).not.toContain('id="appSettingsShortcutOverrides"');
|
||||
@@ -192,7 +192,7 @@ describe('shortcut settings persistence and capture', () => {
|
||||
expect(app.showToast).toHaveBeenCalledWith('Shortcut must include Ctrl, Cmd, or Alt', 'error');
|
||||
});
|
||||
|
||||
it('renders the shortcuts list when the Shortcuts settings tab is opened', () => {
|
||||
it('renders the shortcuts list when the Shortcuts settings section is reached', () => {
|
||||
const { app, elements } = loadSettingsHarness();
|
||||
elements.appSettingsModal = { querySelectorAll: () => [] };
|
||||
app.renderShortcutSettingsList = vi.fn();
|
||||
@@ -200,7 +200,7 @@ describe('shortcut settings persistence and capture', () => {
|
||||
app.switchSettingsTab('settings-shortcuts');
|
||||
expect(app.renderShortcutSettingsList).toHaveBeenCalledTimes(1);
|
||||
|
||||
app.switchSettingsTab('settings-display');
|
||||
app.switchSettingsTab('settings-terminal');
|
||||
expect(app.renderShortcutSettingsList).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user