mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-09-30 12:39:42 +02:00
feat(settings): lead with version + update, tail the rest of System
App Settings opened on a System section that mixed the two things worth seeing
immediately (what this install runs, whether a newer release is waiting) with
three groups nobody sets twice (CLAUDE.md template path, default working
directory, image watcher, Cloudflare tunnel).
Split in two. **Updates** is now the first section and carries only the current
version and the update action, so the modal opens on it and the second thing in
reach is Terminal & Input, where Local Echo lives. **System** keeps Paths,
Automation and Remote access and tails the document, last in the rail.
Also fixes the admin-ui load-order test, which broke on this branch: it located
the modules with a bare `indexOf('session-ui.js')`, and the modal markup now
cites those modules in comments well above the script tags, so it was comparing
a comment against a `<script src>`. It matches the script tag itself now.
This commit is contained in:
Codeman maintainer
@@ -264,7 +264,7 @@ 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.
|
||||
|
||||
**Settings surface** (`#appSettingsModal` + `#sessionOptionsModal` + `#createCaseModal`): the `set-*` language (left rail, groups of rows, control pinned right) is shared by all three modals through ONE `:is(#appSettingsModal, #sessionOptionsModal, #createCaseModal)` scope in styles.css: an `:is()` list takes its most specific argument's specificity, so every rule keeps the id weight it had and nothing downstream shifts. **App Settings** is a rail that is a **table of contents over ONE scrolling document**, not a tab switcher: every section stays mounted (`.set-section`, ids `settings-system|terminal|layout|appearance|models|clis|notifications|voice|shortcuts`, in that order, System first so the version and the updater are the first thing seen), and `switchSettingsTab(id)` keeps its historical name but SCROLLS instead of hiding. **Session Options** and **Add Case** use the same surface with a rail that really SWITCHES (`switchOptionsTab` / `switchCaseModalTab` show one `.set-section` and `.hidden` the rest, since Summary owns its own scroller, Respawn is long, and Add Case is six independent forms). ⚠️ They also take a deliberate **size-up** that App Settings does not (900px shell, 236px rail, `height:auto` between `min(560px,80vh)` and 88vh, vs App Settings' tight 760×620): they are short task panels, not a document you scan, and at scanning density they read as a few fields marooned in an empty frame. Those per-modal blocks are the design, not drift. Phones (≤860px) give App Settings the sticky `#appSettingsJump` pill and give the other two a horizontal rail strip, which neither has a pill for. ⚠️ The Session Options rail entry labelled **Session** still keys off `context` (`data-tab="context"`, `#context-tab`, `switchOptionsTab('context')`), the rename is label-only. Add Case keeps its legacy `.form-row` markup (six panels of it, every id read back by session-ui.js) and is mapped onto the look by an adapter block scoped to `#createCaseModal .set-doc`. Do not restructure those forms just to reach the row classes. ⚠️ That adapter's `summary { display:flex }` **kills the native disclosure triangle**, so every `<details>` there needs the explicit `.set-adv-chev` and both marker suppressions (`list-style` + `::-webkit-details-marker`); without it five collapsed blocks render as plain headings nobody clicks. ⚠️ **The load/save contract is `getElementById` by id**: `openAppSettings()`/`saveAppSettings()`/`openSessionOptions()` 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. Static guards: `test/app-settings-structure.test.ts` + `test/session-options-structure.test.ts` (rail↔section pairing, one-visible-section, the `data-claude-only` entries external CLIs drop). ⚠️ 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 RETIRED: no modal uses them and their CSS is deleted, and a reappearance means a modal drifted off the shared surface. ⚠️ The **Header & Panels live preview** is a scale model rebuilt from the chips (`_syncLayoutPreview`); it owns NO icons, it CLONES `.set-chip-ico` out of the chip, so each icon has exactly one copy in index.html. A chip joins it via `data-preview` (slot) + `data-preview-order`, or `data-preview-text` for readouts that are not buttons. Its frame is painted from skin tokens only (hardcoded black alphas turned it into a grey slab on the light skins) and is `data-i18n-skip`. ⚠️ In Session Options → Respawn, auto-resume is a `.set-callout` whose `<label>` **wraps its own switch with no `for=`** (nesting associates them; the label+`for` pair has historically double-fired), and the cycle steps are real checkboxes (`.set-checks`), not chips. ⚠️ `admin-ui.js` injects the multi-user Users entry into `.set-rail-items` + `.set-doc`, so those hooks must survive any restructure. → [architecture-invariants#settings-surface-app-settings-session-options-add-case](docs/architecture-invariants.md#settings-surface-app-settings-session-options-add-case)
|
||||
**Settings surface** (`#appSettingsModal` + `#sessionOptionsModal` + `#createCaseModal`): the `set-*` language (left rail, groups of rows, control pinned right) is shared by all three modals through ONE `:is(#appSettingsModal, #sessionOptionsModal, #createCaseModal)` scope in styles.css: an `:is()` list takes its most specific argument's specificity, so every rule keeps the id weight it had and nothing downstream shifts. **App Settings** is a rail that is a **table of contents over ONE scrolling document**, not a tab switcher: every section stays mounted (`.set-section`, ids `settings-updates|terminal|layout|appearance|models|clis|notifications|voice|shortcuts|system`, in that order, the version and the updater leading and the rest of the system settings tailing), and `switchSettingsTab(id)` keeps its historical name but SCROLLS instead of hiding. **Session Options** and **Add Case** use the same surface with a rail that really SWITCHES (`switchOptionsTab` / `switchCaseModalTab` show one `.set-section` and `.hidden` the rest, since Summary owns its own scroller, Respawn is long, and Add Case is six independent forms). ⚠️ They also take a deliberate **size-up** that App Settings does not (900px shell, 236px rail, `height:auto` between `min(560px,80vh)` and 88vh, vs App Settings' tight 760×620): they are short task panels, not a document you scan, and at scanning density they read as a few fields marooned in an empty frame. Those per-modal blocks are the design, not drift. Phones (≤860px) give App Settings the sticky `#appSettingsJump` pill and give the other two a horizontal rail strip, which neither has a pill for. ⚠️ The Session Options rail entry labelled **Session** still keys off `context` (`data-tab="context"`, `#context-tab`, `switchOptionsTab('context')`), the rename is label-only. Add Case keeps its legacy `.form-row` markup (six panels of it, every id read back by session-ui.js) and is mapped onto the look by an adapter block scoped to `#createCaseModal .set-doc`. Do not restructure those forms just to reach the row classes. ⚠️ That adapter's `summary { display:flex }` **kills the native disclosure triangle**, so every `<details>` there needs the explicit `.set-adv-chev` and both marker suppressions (`list-style` + `::-webkit-details-marker`); without it five collapsed blocks render as plain headings nobody clicks. ⚠️ **The load/save contract is `getElementById` by id**: `openAppSettings()`/`saveAppSettings()`/`openSessionOptions()` 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. Static guards: `test/app-settings-structure.test.ts` + `test/session-options-structure.test.ts` (rail↔section pairing, one-visible-section, the `data-claude-only` entries external CLIs drop). ⚠️ 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 RETIRED: no modal uses them and their CSS is deleted, and a reappearance means a modal drifted off the shared surface. ⚠️ The **Header & Panels live preview** is a scale model rebuilt from the chips (`_syncLayoutPreview`); it owns NO icons, it CLONES `.set-chip-ico` out of the chip, so each icon has exactly one copy in index.html. A chip joins it via `data-preview` (slot) + `data-preview-order`, or `data-preview-text` for readouts that are not buttons. Its frame is painted from skin tokens only (hardcoded black alphas turned it into a grey slab on the light skins) and is `data-i18n-skip`. ⚠️ In Session Options → Respawn, auto-resume is a `.set-callout` whose `<label>` **wraps its own switch with no `for=`** (nesting associates them; the label+`for` pair has historically double-fired), and the cycle steps are real checkboxes (`.set-checks`), not chips. ⚠️ `admin-ui.js` injects the multi-user Users entry into `.set-rail-items` + `.set-doc`, so those hooks must survive any restructure. → [architecture-invariants#settings-surface-app-settings-session-options-add-case](docs/architecture-invariants.md#settings-surface-app-settings-session-options-add-case)
|
||||
|
||||
**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)
|
||||
|
||||
|
||||
@@ -234,7 +234,7 @@ Anatomy: `.set-shell` → `.set-shell-head` (title + `.set-head-actions`) + `.se
|
||||
|
||||
**The rail means two different things, and that is deliberate:**
|
||||
|
||||
- **App Settings** is a **table of contents over ONE scrolling document**. Every section stays mounted; rail entries carry `data-section` and `switchSettingsTab(id)` keeps its historical name but SCROLLS instead of hiding. Section order in the DOM is `settings-system|terminal|layout|appearance|models|clis|notifications|voice|shortcuts`, and the modal opens scrolled to **System**: the version this install runs and whether an update is waiting are the first thing you see, with Updates promoted above Paths/Automation/Remote access.
|
||||
- **App Settings** is a **table of contents over ONE scrolling document**. Every section stays mounted; rail entries carry `data-section` and `switchSettingsTab(id)` keeps its historical name but SCROLLS instead of hiding. Section order in the DOM is `settings-updates|terminal|layout|appearance|models|clis|notifications|voice|shortcuts|system`, and the modal opens scrolled to **Updates**, which carries ONLY the current version and the update action: what this install runs, and whether a newer release is waiting, before any preference. The rest of the old System section (Paths, Automation, Remote access) tails the document under **System**, set once and rarely touched, which puts Terminal & Input (where Local Echo lives) second in reach.
|
||||
- **Session Options** and **Add Case** really SWITCH: `switchOptionsTab(tab)` / `switchCaseModalTab(tab)` (session-ui.js) show one `.set-section` and put `.hidden` on the rest, then reset the document scroll so a switched-to section starts at its own top. Stacking them into one document would bury both ends: Summary owns its own scroller, Respawn is long, and Add Case is six independent forms. Their rail entries call the handler from an inline `onclick` and pair by id (`data-tab="respawn"` ↔ `#respawn-tab`; `data-tab="case-clone"` ↔ `#case-clone`).
|
||||
|
||||
⚠️ **The Session Options rail reads "Session" but the key is still `context`.** The tab was renamed because "context" described only one of its three groups (they are now Identity / Context window / Behavior), and the rename is **label-only**: `data-tab="context"`, `id="context-tab"` and `switchOptionsTab('context')` are unchanged, including the call in `openSessionOptions` that lands external-CLI sessions somewhere valid.
|
||||
|
||||
+81
-67
@@ -1412,9 +1412,9 @@
|
||||
<input type="search" id="appSettingsSearch" placeholder="Search settings" autocomplete="off" aria-label="Search settings">
|
||||
</div>
|
||||
<div class="set-rail-items" id="appSettingsRailItems">
|
||||
<button type="button" class="set-rail-item active" data-section="settings-system">
|
||||
<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"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.26.6.86 1 1.51 1H21a2 2 0 0 1 0 4h-.09c-.65 0-1.25.4-1.51 1z"/></svg>
|
||||
<span>System</span>
|
||||
<button type="button" class="set-rail-item active" data-section="settings-updates">
|
||||
<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="M12 3v12"/><polyline points="7 10 12 15 17 10"/><path d="M4 20h16"/></svg>
|
||||
<span>Updates</span>
|
||||
</button>
|
||||
<button type="button" class="set-rail-item" data-section="settings-terminal">
|
||||
<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="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
|
||||
@@ -1448,6 +1448,10 @@
|
||||
<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"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 13h6"/></svg>
|
||||
<span>Shortcuts</span>
|
||||
</button>
|
||||
<button type="button" class="set-rail-item" data-section="settings-system">
|
||||
<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"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.26.6.86 1 1.51 1H21a2 2 0 0 1 0 4h-.09c-.65 0-1.25.4-1.51 1z"/></svg>
|
||||
<span>System</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="set-rail-foot">Settings marked <b>device</b> stay on this browser. The rest sync to every device.</p>
|
||||
</nav>
|
||||
@@ -1464,16 +1468,17 @@
|
||||
|
||||
<p class="set-empty" id="appSettingsSearchEmpty" hidden>No settings match that search.</p>
|
||||
|
||||
<!-- ══ System ═══════════════════════════════════════════════════ -->
|
||||
<section class="set-section" id="settings-system" data-label="System">
|
||||
<!-- ══ Updates ══════════════════════════════════════════════════
|
||||
First in the document on purpose: what this install is running,
|
||||
and whether a newer release is waiting, before any preference. -->
|
||||
<section class="set-section" id="settings-updates" data-label="Updates">
|
||||
<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"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.26.6.86 1 1.51 1H21a2 2 0 0 1 0 4h-.09c-.65 0-1.25.4-1.51 1z"/></svg>
|
||||
<h2>System</h2>
|
||||
<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="M12 3v12"/><polyline points="7 10 12 15 17 10"/><path d="M4 20h16"/></svg>
|
||||
<h2>Updates</h2>
|
||||
</div>
|
||||
<p class="set-section-blurb">What this install is running, plus paths, automation and remote access.</p>
|
||||
<p class="set-section-blurb">The version this install is running, and the one-click update.</p>
|
||||
|
||||
<div class="set-group">
|
||||
<div class="set-group-head"><h4>Updates</h4></div>
|
||||
<div class="set-group-body">
|
||||
<div class="set-row" data-search="version current release">
|
||||
<div class="set-row-text"><span class="set-row-label">Current version</span></div>
|
||||
@@ -1495,65 +1500,8 @@
|
||||
<div id="updateProgress" class="set-progress" style="display:none"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="set-group">
|
||||
<div class="set-group-head"><h4>Paths</h4><span class="set-scope">synced</span></div>
|
||||
<div class="set-group-body">
|
||||
<div class="set-row has-field" data-search="claude.md template path new cases">
|
||||
<div class="set-row-text">
|
||||
<span class="set-row-label">CLAUDE.md template</span>
|
||||
<span class="set-row-desc">Used when creating new cases. Leave empty for the built-in template.</span>
|
||||
</div>
|
||||
<input type="text" id="appSettingsClaudeMdPath" class="set-input" placeholder="/path/to/CLAUDE.md template">
|
||||
</div>
|
||||
<div class="set-row has-field" data-search="default working directory">
|
||||
<div class="set-row-text">
|
||||
<span class="set-row-label">Default working directory</span>
|
||||
<span class="set-row-desc">Starting directory for new sessions.</span>
|
||||
</div>
|
||||
<input type="text" id="appSettingsDefaultDir" class="set-input" placeholder="~/projects">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="set-group">
|
||||
<div class="set-group-head"><h4>Automation</h4><span class="set-scope">synced</span></div>
|
||||
<div class="set-group-body">
|
||||
<div class="set-row" data-search="image watcher popup screenshots">
|
||||
<div class="set-row-text">
|
||||
<span class="set-row-label">Image watcher</span>
|
||||
<span class="set-row-desc">Detect and pop up new images found in session directories.</span>
|
||||
</div>
|
||||
<label class="switch switch-sm"><input type="checkbox" id="appSettingsImageWatcherEnabled"><span class="slider"></span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="set-group">
|
||||
<div class="set-group-head"><h4>Remote access</h4><span class="set-scope">synced</span></div>
|
||||
<div class="set-group-body">
|
||||
<div class="set-row" data-search="cloudflare tunnel remote access url">
|
||||
<div class="set-row-text">
|
||||
<span class="set-row-label">Cloudflare Tunnel</span>
|
||||
<span class="set-row-desc">Expose Codeman on a public URL. Set CODEMAN_PASSWORD first.</span>
|
||||
</div>
|
||||
<label class="switch switch-sm"><input type="checkbox" id="appSettingsTunnelEnabled"><span class="slider"></span></label>
|
||||
</div>
|
||||
<div class="set-row" id="tunnelUrlRow" style="display:none">
|
||||
<div class="set-row-text"><span class="set-row-label">Tunnel URL</span></div>
|
||||
<div class="set-row-actions">
|
||||
<span id="tunnelUrlDisplay" class="set-copy" title="Click to copy"></span>
|
||||
<button class="btn-icon-sm" id="tunnelQrBtn" onclick="app.showTunnelQR()" title="Show QR code">⊞</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="set-row" id="tunnelUploadUrlRow" style="display:none">
|
||||
<div class="set-row-text"><span class="set-row-label">Upload URL</span></div>
|
||||
<span id="tunnelUploadUrlDisplay" class="set-copy" title="Click to copy"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- ══ Terminal & Input ══════════════════════════════════════ -->
|
||||
<section class="set-section" id="settings-terminal" data-label="Terminal & Input">
|
||||
<div class="set-section-head">
|
||||
@@ -2262,6 +2210,72 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ══ System ═══════════════════════════════════════════════════ -->
|
||||
<section class="set-section" id="settings-system" data-label="System">
|
||||
<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"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.26.6.86 1 1.51 1H21a2 2 0 0 1 0 4h-.09c-.65 0-1.25.4-1.51 1z"/></svg>
|
||||
<h2>System</h2>
|
||||
</div>
|
||||
<p class="set-section-blurb">Paths, automation and remote access. Set once, rarely touched.</p>
|
||||
|
||||
<div class="set-group">
|
||||
<div class="set-group-head"><h4>Paths</h4><span class="set-scope">synced</span></div>
|
||||
<div class="set-group-body">
|
||||
<div class="set-row has-field" data-search="claude.md template path new cases">
|
||||
<div class="set-row-text">
|
||||
<span class="set-row-label">CLAUDE.md template</span>
|
||||
<span class="set-row-desc">Used when creating new cases. Leave empty for the built-in template.</span>
|
||||
</div>
|
||||
<input type="text" id="appSettingsClaudeMdPath" class="set-input" placeholder="/path/to/CLAUDE.md template">
|
||||
</div>
|
||||
<div class="set-row has-field" data-search="default working directory">
|
||||
<div class="set-row-text">
|
||||
<span class="set-row-label">Default working directory</span>
|
||||
<span class="set-row-desc">Starting directory for new sessions.</span>
|
||||
</div>
|
||||
<input type="text" id="appSettingsDefaultDir" class="set-input" placeholder="~/projects">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="set-group">
|
||||
<div class="set-group-head"><h4>Automation</h4><span class="set-scope">synced</span></div>
|
||||
<div class="set-group-body">
|
||||
<div class="set-row" data-search="image watcher popup screenshots">
|
||||
<div class="set-row-text">
|
||||
<span class="set-row-label">Image watcher</span>
|
||||
<span class="set-row-desc">Detect and pop up new images found in session directories.</span>
|
||||
</div>
|
||||
<label class="switch switch-sm"><input type="checkbox" id="appSettingsImageWatcherEnabled"><span class="slider"></span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="set-group">
|
||||
<div class="set-group-head"><h4>Remote access</h4><span class="set-scope">synced</span></div>
|
||||
<div class="set-group-body">
|
||||
<div class="set-row" data-search="cloudflare tunnel remote access url">
|
||||
<div class="set-row-text">
|
||||
<span class="set-row-label">Cloudflare Tunnel</span>
|
||||
<span class="set-row-desc">Expose Codeman on a public URL. Set CODEMAN_PASSWORD first.</span>
|
||||
</div>
|
||||
<label class="switch switch-sm"><input type="checkbox" id="appSettingsTunnelEnabled"><span class="slider"></span></label>
|
||||
</div>
|
||||
<div class="set-row" id="tunnelUrlRow" style="display:none">
|
||||
<div class="set-row-text"><span class="set-row-label">Tunnel URL</span></div>
|
||||
<div class="set-row-actions">
|
||||
<span id="tunnelUrlDisplay" class="set-copy" title="Click to copy"></span>
|
||||
<button class="btn-icon-sm" id="tunnelQrBtn" onclick="app.showTunnelQR()" title="Show QR code">⊞</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="set-row" id="tunnelUploadUrlRow" style="display:none">
|
||||
<div class="set-row-text"><span class="set-row-label">Upload URL</span></div>
|
||||
<span id="tunnelUploadUrlDisplay" class="set-copy" title="Click to copy"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions set-foot">
|
||||
|
||||
@@ -503,10 +503,11 @@ Object.assign(CodemanApp.prototype, {
|
||||
this._syncSettingsChips();
|
||||
this._syncModelCards();
|
||||
this._syncEffortSegment();
|
||||
// Back to the top of the document (one scroll, not a tab reset). System is
|
||||
// first now: the version this install is running, and whether an update is
|
||||
// waiting, are the two things worth seeing before anything is configured.
|
||||
this.switchSettingsTab('settings-system');
|
||||
// Back to the top of the document (one scroll, not a tab reset). Updates is
|
||||
// first now: the version this install is running, and whether a newer one is
|
||||
// waiting, are the two things worth seeing before any preference. The rest of
|
||||
// the system settings (paths, automation, remote access) tail the document.
|
||||
this.switchSettingsTab('settings-updates');
|
||||
const modal = document.getElementById('appSettingsModal');
|
||||
modal.classList.add('active');
|
||||
|
||||
|
||||
+10
-5
@@ -135,11 +135,16 @@ describe('admin panel modal', () => {
|
||||
|
||||
describe('index.html wiring', () => {
|
||||
it('loads admin-ui.js after settings-ui.js and before session-ui.js', () => {
|
||||
const settings = INDEX_HTML.indexOf('settings-ui.js');
|
||||
const admin = INDEX_HTML.indexOf('admin-ui.js');
|
||||
const session = INDEX_HTML.indexOf('session-ui.js');
|
||||
expect(admin).toBeGreaterThan(settings);
|
||||
expect(session).toBeGreaterThan(admin);
|
||||
// Match the SCRIPT TAG, not the bare filename: modal markup earlier in the
|
||||
// document cites these modules in comments ("session-ui.js: openSessionOptions"),
|
||||
// and a bare indexOf finds the comment instead of the load order.
|
||||
const at = (file: string) => {
|
||||
const i = INDEX_HTML.indexOf(`src="${file}"`);
|
||||
expect(i, `no <script src="${file}"> in index.html`).toBeGreaterThan(-1);
|
||||
return i;
|
||||
};
|
||||
expect(at('admin-ui.js')).toBeGreaterThan(at('settings-ui.js'));
|
||||
expect(at('session-ui.js')).toBeGreaterThan(at('admin-ui.js'));
|
||||
});
|
||||
|
||||
it('ships the header Admin Panel button hidden by default', () => {
|
||||
|
||||
@@ -59,20 +59,25 @@ describe('App Settings modal structure', () => {
|
||||
}
|
||||
});
|
||||
|
||||
it('opens on System, with the version and the updater above everything else', () => {
|
||||
expect(settingsUi).toContain("this.switchSettingsTab('settings-system')");
|
||||
it('opens on Updates: the version and the updater above everything else', () => {
|
||||
expect(settingsUi).toContain("this.switchSettingsTab('settings-updates')");
|
||||
const modal = settingsModal();
|
||||
const order = [...modal.matchAll(/<section class="set-section" id="([a-z-]+)"/g)].map((m) => m[1]);
|
||||
// Rail and document must agree, or scroll-spy paints the wrong entry.
|
||||
const rail = [...modal.matchAll(/data-section="([a-z-]+)"/g)].map((m) => m[1]);
|
||||
expect(rail.slice(0, 3)).toEqual(['settings-system', 'settings-terminal', 'settings-layout']);
|
||||
expect(order.slice(0, 3)).toEqual(['settings-system', 'settings-terminal', 'settings-layout']);
|
||||
// Updates leads the System section: version first, then the update action.
|
||||
expect(rail.slice(0, 3)).toEqual(['settings-updates', 'settings-terminal', 'settings-layout']);
|
||||
expect(order.slice(0, 3)).toEqual(['settings-updates', 'settings-terminal', 'settings-layout']);
|
||||
// Updates carries ONLY the version and the update action; the rest of the
|
||||
// system settings tail the document under System, out of the way.
|
||||
const updates = modal.match(/id="settings-updates"([\s\S]*?)<\/section>/)?.[1] ?? '';
|
||||
expect(updates).toContain('id="updateCurrentVersion"');
|
||||
expect(updates).toContain('id="updateCheckBtn"');
|
||||
expect(updates).not.toContain('id="appSettingsClaudeMdPath"');
|
||||
expect(rail[rail.length - 1]).toBe('settings-system');
|
||||
expect(order[order.length - 1]).toBe('settings-system');
|
||||
const system = modal.match(/id="settings-system"([\s\S]*?)<\/section>/)?.[1] ?? '';
|
||||
const version = system.indexOf('id="updateCurrentVersion"');
|
||||
expect(version).toBeGreaterThan(-1);
|
||||
expect(version).toBeLessThan(system.indexOf('id="appSettingsClaudeMdPath"'));
|
||||
expect(system.indexOf('id="updateCheckBtn"')).toBeLessThan(system.indexOf('id="appSettingsClaudeMdPath"'));
|
||||
expect(system).toContain('id="appSettingsClaudeMdPath"');
|
||||
expect(system).toContain('id="appSettingsTunnelEnabled"');
|
||||
});
|
||||
|
||||
it('keeps Local Echo the first row of the second section', () => {
|
||||
|
||||
Reference in New Issue
Block a user