cli-jaw 2.2.11 → 2.2.12

package/public/js/features/channel-onboarding.ts

@@ -0,0 +1,322 @@
+// ── Channel Onboarding Wizard (UI shell) ──
+// Four numbered steps for every channel: 안내 → 자격 증명 입력 → 연결 검증 →
+// 저장. Each step is gated by channel-onboarding-flow.ts, so "다음" refuses to
+// move while that step's own contract is unmet, and draft values survive
+// moving back and forth. This module owns rendering and IO only.
+import { api, apiJson } from '../api.js';
+import { t } from './i18n.js';
+import { escapeHtml } from '../render.js';
+import { refreshTransportStatusRow } from './transport-status-row.js';
+import {
+    TOTAL_STEPS,
+    ISSUER_URLS,
+    advance,
+    applyValidation,
+    blockerForStep,
+    canAdvance,
+    createFlow,
+    fieldsFor,
+    goBack,
+    markSaved,
+    setField,
+    settingsPatch,
+    validationPayload,
+    type FlowState,
+    type OnboardChannel,
+} from './channel-onboarding-flow.js';
+import { maybeRequestNotificationPermission } from './notifications.js';
+
+export type { OnboardChannel };
+
+let overlay: HTMLDivElement | null = null;
+let flow: FlowState | null = null;
+let validating = false;
+let saving = false;
+/**
+ * Bumped whenever the wizard is (re)opened. An in-flight validation compares
+ * it on return: switching to another channel — or reopening the same one —
+ * must not let a stale response mark the new flow as verified.
+ */
+let flowGeneration = 0;
+
+export function initChannelOnboarding(): void {
+    document.addEventListener('click', (ev) => {
+        const btn = (ev.target as HTMLElement | null)?.closest('[data-onboard-channel]') as HTMLElement | null;
+        if (!btn) return;
+        ev.preventDefault();
+        openChannelOnboarding(btn.getAttribute('data-onboard-channel') as OnboardChannel);
+    });
+    // Capture phase, matching help-dialog: whichever overlay is open handles
+    // Escape and stops it there, so the two never both react.
+    document.addEventListener('keydown', (ev) => {
+        if (ev.key !== 'Escape' || !flow) return;
+        ev.preventDefault();
+        ev.stopImmediatePropagation();
+        close();
+    }, true);
+    // Focus trap: a modal that lets Tab wander into the page behind it is a
+    // keyboard dead end — the user cannot see what is focused and cannot get
+    // back without a mouse.
+    document.addEventListener('keydown', (ev) => {
+        if (ev.key !== 'Tab' || !flow || !overlay) return;
+        const focusable = [...overlay.querySelectorAll<HTMLElement>(
+            'button:not([disabled]), input:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])',
+        )];
+        if (!focusable.length) return;
+        const first = focusable[0]!;
+        const last = focusable[focusable.length - 1]!;
+        const active = document.activeElement as HTMLElement | null;
+        if (ev.shiftKey && (active === first || !overlay.contains(active))) {
+            ev.preventDefault();
+            last.focus();
+        } else if (!ev.shiftKey && active === last) {
+            ev.preventDefault();
+            first.focus();
+        }
+    }, true);
+}
+
+export function openChannelOnboarding(channel: OnboardChannel): void {
+    if (channel !== 'telegram' && channel !== 'discord' && channel !== 'slack') return;
+    // Seed the draft from whatever the settings section already holds, so an
+    // existing token does not have to be retyped.
+    const draft: Record<string, string> = {};
+    for (const field of fieldsFor(channel)) {
+        draft[field.key] = readSettingsInput(field.settingsId);
+    }
+    flow = createFlow(channel, draft);
+    validating = false;
+    saving = false;
+    flowGeneration += 1;
+    ensureOverlay();
+    render();
+    overlay?.classList.add('open');
+}
+
+function close(): void {
+    overlay?.classList.remove('open');
+    flow = null;
+}
+
+function readSettingsInput(id: string): string {
+    return (document.getElementById(id) as HTMLInputElement | null)?.value.trim() || '';
+}
+
+function writeSettingsInput(id: string, value: string): void {
+    const el = document.getElementById(id) as HTMLInputElement | null;
+    if (el) el.value = value;
+}
+
+function ensureOverlay(): void {
+    if (overlay) return;
+    overlay = document.createElement('div');
+    overlay.className = 'modal-overlay onboarding-overlay';
+    overlay.addEventListener('click', (ev) => { if (ev.target === overlay) close(); });
+    document.body.appendChild(overlay);
+}
+
+function stepBody(state: FlowState): string {
+    if (state.step === 1) {
+        return `
+            <p class="onboarding-guide">${escapeHtml(t(`onboarding.guide.${state.channel}`))}</p>
+            <div class="onboarding-actions">
+                <button type="button" class="perm-btn" data-onboard-issuer="1">
+                    ${escapeHtml(t('onboarding.openIssuer'))}
+                </button>
+            </div>`;
+    }
+    if (state.step === 2) {
+        return fieldsFor(state.channel).map((field) => {
+            const label = t(`onboarding.token.${field.key}`) + (field.optional ? ` (${t('onboarding.optional')})` : '');
+            return `
+            <div class="onboarding-field">
+                <label for="onboard-${field.key}">${escapeHtml(label)}</label>
+                <input id="onboard-${field.key}" data-onboard-field="${field.key}" class="input-sm"
+                    type="${field.secret ? 'password' : 'text'}"
+                    placeholder="${escapeHtml(field.example)}"
+                    autocomplete="off" spellcheck="false"
+                    value="${escapeHtml(state.draft[field.key] || '')}">
+                <span class="onboarding-hint">${escapeHtml(t(`onboarding.hint.${state.channel}.${field.key}`))}</span>
+            </div>`;
+        }).join('');
+    }
+    if (state.step === 3) {
+        const status = validating
+            ? `<p class="onboarding-guide">${escapeHtml(t('onboarding.validating'))}</p>`
+            : state.validatedIdentity
+                ? `<p class="onboarding-identity">${escapeHtml(t('onboarding.valid', { identity: state.validatedIdentity }))}</p>`
+                : `<p class="onboarding-guide">${escapeHtml(t('onboarding.validateHint'))}</p>`;
+        return `${status}
+            <div class="onboarding-actions">
+                <button type="button" class="perm-btn" data-onboard-validate="1" ${validating ? 'disabled' : ''}>
+                    ${escapeHtml(t('onboarding.validate'))}
+                </button>
+            </div>`;
+    }
+    return `<p class="onboarding-next">${escapeHtml(t(
+        state.saved ? `onboarding.next.${state.channel}` : 'onboarding.saveHint',
+    ))}</p>`;
+}
+
+function footer(state: FlowState): string {
+    if (state.step === TOTAL_STEPS && state.saved) {
+        return `<button type="button" class="perm-btn active" data-onboard-close="1">${escapeHtml(t('onboarding.close'))}</button>`;
+    }
+    const back = state.step > 1
+        ? `<button type="button" class="perm-btn" data-onboard-back="1">${escapeHtml(t('onboarding.back'))}</button>`
+        : '';
+    const primary = state.step === TOTAL_STEPS
+        ? `<button type="button" class="perm-btn active" data-onboard-save="1">${escapeHtml(t('onboarding.save'))}</button>`
+        : `<button type="button" class="perm-btn ${canAdvance(state) ? 'active' : ''}" data-onboard-next="1">${escapeHtml(t('onboarding.next'))}</button>`;
+    return `${back}${primary}`;
+}
+
+function render(): void {
+    if (!overlay || !flow) return;
+    const state = flow;
+    overlay.innerHTML = `
+        <div class="modal-box onboarding-box" role="dialog" aria-modal="true"
+            aria-labelledby="onboarding-title" aria-describedby="onboarding-step-title">
+            <div class="onboarding-head">
+                <span class="onboarding-title" id="onboarding-title">${escapeHtml(t(`onboarding.title.${state.channel}`))}</span>
+                <span class="onboarding-progress" role="status" aria-live="polite"
+                    aria-label="${escapeHtml(t('onboarding.progressLabel', { step: state.step, total: TOTAL_STEPS }))}">${state.step}/${TOTAL_STEPS}</span>
+                <button type="button" class="help-trigger onboarding-close" data-onboard-close="1"
+                    aria-label="${escapeHtml(t('onboarding.close'))}">✕</button>
+            </div>
+            <div class="onboarding-steps" aria-hidden="true">
+                ${Array.from({ length: TOTAL_STEPS }, (_, i) =>
+                    `<span class="onboarding-dot${i + 1 === state.step ? ' is-active' : ''}${i + 1 < state.step ? ' is-done' : ''}"></span>`).join('')}
+            </div>
+            <div class="onboarding-step-title" id="onboarding-step-title">${escapeHtml(t(`onboarding.step.${state.step}`))}</div>
+            ${stepBody(state)}
+            <div class="onboarding-error" role="alert" style="display:${state.error ? '' : 'none'}">
+                ${state.error ? escapeHtml(t(`onboarding.error.${state.error}`)) : ''}
+                ${state.missingScopes.length ? `<span class="onboarding-scopes">${escapeHtml(state.missingScopes.join(', '))}</span>` : ''}
+            </div>
+            <div class="onboarding-actions onboarding-footer">${footer(state)}</div>
+        </div>`;
+
+    overlay.querySelectorAll('[data-onboard-close]').forEach(el => el.addEventListener('click', close));
+    overlay.querySelector('[data-onboard-issuer]')?.addEventListener('click', () => {
+        if (flow) window.open(ISSUER_URLS[flow.channel], '_blank', 'noopener');
+    });
+    overlay.querySelector('[data-onboard-back]')?.addEventListener('click', () => {
+        if (!flow) return;
+        flow = goBack(flow);
+        render();
+    });
+    overlay.querySelector('[data-onboard-next]')?.addEventListener('click', () => {
+        if (!flow) return;
+        captureInputs();
+        flow = advance(flow);
+        render();
+    });
+    overlay.querySelector('[data-onboard-validate]')?.addEventListener('click', () => { void runValidation(); });
+    overlay.querySelector('[data-onboard-save]')?.addEventListener('click', () => { void runSave(); });
+    // Live capture keeps the draft authoritative even if the user closes the
+    // step without pressing 다음.
+    overlay.querySelectorAll('[data-onboard-field]').forEach(el => {
+        el.addEventListener('input', () => {
+            if (!flow) return;
+            const key = (el as HTMLElement).getAttribute('data-onboard-field') || '';
+            flow = setField(flow, key, (el as HTMLInputElement).value);
+        });
+        // Enter submits the step instead of doing nothing — the wizard is a
+        // form, and a form that ignores Enter reads as broken.
+        el.addEventListener('keydown', (ev) => {
+            const key = (ev as KeyboardEvent).key;
+            if (key !== 'Enter' || (ev as KeyboardEvent).shiftKey || (ev as KeyboardEvent).isComposing) return;
+            ev.preventDefault();
+            primaryAction();
+        });
+    });
+
+    focusFirstEmptyField();
+}
+
+/** Whatever the current step's primary button does — Enter mirrors it. */
+function primaryAction(): void {
+    if (!flow) return;
+    if (flow.step === 3) { void runValidation(); return; }
+    if (flow.step === TOTAL_STEPS) { if (!flow.saved) void runSave(); return; }
+    captureInputs();
+    flow = advance(flow);
+    render();
+}
+
+/**
+ * render() replaces innerHTML, so focus is lost on every state change. Restore
+ * it to the first field still needing input (or the first field at all), which
+ * is also what a freshly opened step-2 should focus.
+ */
+function focusFirstEmptyField(): void {
+    const inputs = [...(overlay?.querySelectorAll('[data-onboard-field]') ?? [])] as HTMLInputElement[];
+    if (!inputs.length) return;
+    const target = inputs.find(input => !input.value.trim()) ?? inputs[0];
+    target?.focus();
+    // Caret at the end so an existing value can be corrected, not overwritten.
+    const end = target?.value.length ?? 0;
+    target?.setSelectionRange?.(end, end);
+}
+
+function captureInputs(): void {
+    if (!flow) return;
+    for (const el of overlay?.querySelectorAll('[data-onboard-field]') ?? []) {
+        const key = el.getAttribute('data-onboard-field') || '';
+        flow = setField(flow, key, (el as HTMLInputElement).value);
+    }
+}
+
+async function runValidation(): Promise<void> {
+    if (!flow || validating) return;
+    const generation = flowGeneration;
+    validating = true;
+    render();
+    const res = await api<{ ok?: boolean; identity?: string; teamId?: string; error?: string; missing?: string[] }>(
+        '/api/channels/validate',
+        {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(validationPayload(flow)),
+        },
+    );
+    // The wizard may have been closed or pointed at another channel while the
+    // request was in flight; applying this result then would verify the wrong
+    // credentials.
+    if (generation !== flowGeneration) return;
+    validating = false;
+    if (!flow) return;
+    flow = applyValidation(flow, res || { ok: false, error: 'network' });
+    render();
+}
+
+async function runSave(): Promise<void> {
+    if (!flow || saving) return;
+    const blocker = blockerForStep({ ...flow, step: 3 });
+    if (blocker) {
+        flow = { ...flow, step: 3, error: blocker };
+        render();
+        return;
+    }
+    // Mirror into the settings section so the existing load/save surfaces and
+    // the transport status row stay consistent with the wizard.
+    for (const field of fieldsFor(flow.channel)) {
+        writeSettingsInput(field.settingsId, (flow.draft[field.key] || '').trim());
+    }
+    const generation = flowGeneration;
+    saving = true;
+    try {
+        await apiJson('/api/settings', 'PUT', settingsPatch(flow));
+    } finally {
+        saving = false;
+    }
+    if (generation !== flowGeneration || !flow) return;
+    flow = markSaved(flow);
+    render();
+    void refreshTransportStatusRow();
+    // The save click is a user gesture, which is the only moment a browser
+    // will honour a notification request — and the only moment it is relevant,
+    // since a channel just started delivering messages.
+    void maybeRequestNotificationPermission();
+}

package/public/js/features/channel-setup-guide.ts

@@ -0,0 +1,26 @@
+// ── Channel Setup Guide Popup ──
+// When a user points cli-jaw at a channel that has no credentials, open the
+// existing help dialog's setup guide instead of leaving a silently dead
+// channel. Fires only on explicit user intent: switching the active channel
+// or enabling a channel toggle — never on page load, so a settings visit
+// does not pop a dialog the user did not ask for.
+import { openChannelOnboarding } from './channel-onboarding.js';
+import { isTelegramConfigured, isDiscordConfigured, isSlackConfigured } from './channel-setup-rules.js';
+
+type SetupChannel = 'telegram' | 'discord' | 'slack';
+
+function inputValue(id: string): string {
+    return (document.getElementById(id) as HTMLInputElement | null)?.value ?? '';
+}
+
+/** Open the channel's setup guide when its required credentials are missing. */
+export function openSetupGuideIfUnconfigured(ch: SetupChannel): void {
+    const configured =
+        ch === 'telegram' ? isTelegramConfigured(inputValue('tgToken')) :
+        ch === 'discord' ? isDiscordConfigured(inputValue('dcToken'), inputValue('dcGuildId')) :
+        isSlackConfigured(inputValue('slBotToken'));
+    // The wizard supersedes the read-only help dialog here: it carries the
+    // same guidance AND lets the user finish setup (validate + save) inside
+    // the popup. The "?" help trigger remains for deep reference.
+    if (!configured) openChannelOnboarding(ch);
+}

package/public/js/features/channel-setup-rules.ts

@@ -0,0 +1,32 @@
+// ── Channel "configured?" rules (data-only) ──
+// Kept import-free and DOM-free so unit tests can pull them without the
+// help-dialog module graph — same separation as help-content vs help-dialog.
+//
+// The rules mirror doctor's hard failures, NOT its warnings: telegram needs
+// a token; discord needs token + guildId (doctor additionally hard-fails on
+// missing channelIds, but the popup targets zero-credentials, not partial
+// config — guild+token is enough to receive); slack needs only botToken —
+// a missing appToken is outbound-only, a legitimate state the doctor WARNs
+// about rather than fails.
+
+export function isTelegramConfigured(token: string): boolean {
+    return token.trim().length > 0;
+}
+
+export function isDiscordConfigured(token: string, guildId: string): boolean {
+    return token.trim().length > 0 && guildId.trim().length > 0;
+}
+
+export function isSlackConfigured(botToken: string): boolean {
+    return botToken.trim().length > 0;
+}
+
+// Token-shape hints for inline field validation. Prefixes are how Slack
+// namespaces its tokens; a wrong prefix is almost always a swapped paste.
+export function hasSlackBotTokenPrefix(token: string): boolean {
+    return token.trim().startsWith('xoxb-');
+}
+
+export function hasSlackAppTokenPrefix(token: string): boolean {
+    return token.trim().startsWith('xapp-');
+}

package/public/js/features/notifications.ts

@@ -0,0 +1,38 @@
+// ── Browser notification permission ──
+// Asked ONCE, and only from a real user gesture. Browsers reject unprompted
+// requests, and a permission prompt on page load is the fastest way to earn a
+// permanent "block" — so the ask rides the wizard's save step, where the user
+// just connected a channel and inbound messages are about to arrive.
+
+const ASKED_KEY = 'jaw:notificationsAsked';
+
+export function notificationsAsked(): boolean {
+    try {
+        return localStorage.getItem(ASKED_KEY) === '1';
+    } catch {
+        // Private mode / disabled storage: treat as asked so a blocked write
+        // cannot turn into a prompt on every save.
+        return true;
+    }
+}
+
+function markAsked(): void {
+    try { localStorage.setItem(ASKED_KEY, '1'); } catch { /* best-effort */ }
+}
+
+/**
+ * Request notification permission if it has never been asked in this browser.
+ * Returns the resulting permission, or null when nothing was asked.
+ * A denial is remembered too: never nag.
+ */
+export async function maybeRequestNotificationPermission(): Promise<NotificationPermission | null> {
+    if (typeof Notification === 'undefined') return null;
+    if (Notification.permission !== 'default') return Notification.permission;
+    if (notificationsAsked()) return null;
+    markAsked();
+    try {
+        return await Notification.requestPermission();
+    } catch {
+        return null;
+    }
+}

package/public/js/features/settings-channel.ts

@@ -5,6 +5,7 @@ import { getCliMeta } from '../constants.js';
 import { providerLabel } from '../provider-icons.js';
 import { t } from './i18n.js';
 import { refreshTransportStatusRow } from './transport-status-row.js';
+import { openSetupGuideIfUnconfigured } from './channel-setup-guide.js';
 import type { SettingsData } from './settings-types.js';
 
 export async function setActiveChannel(ch: 'telegram' | 'discord' | 'slack'): Promise<void> {
@@ -16,6 +17,9 @@ export async function setActiveChannel(ch: 'telegram' | 'discord' | 'slack'): Pr
     document.getElementById('channelSlackSettings')?.style.setProperty('display', ch === 'slack' ? '' : 'none');
     await apiJson('/api/settings', 'PUT', { channel: ch });
     await refreshTransportStatusRow();
+    // Switching to a channel with no credentials leaves a silently dead
+    // channel — open its setup guide right away.
+    openSetupGuideIfUnconfigured(ch);
 }
 
 export function loadActiveChannel(s: SettingsData): void {

package/public/js/features/settings-core.ts

@@ -1,5 +1,6 @@
 // ── Settings Core ──
 import { MODEL_MAP, loadCliRegistry, getCliKeys, getCliMeta, PRIMARY_CLIS } from '../constants.js';
+import type { CliEntry } from '../constants.js';
 import { escapeHtml } from '../render.js';
 import { syncStoredLocale } from '../locale.js';
 import { t } from './i18n.js';
@@ -190,6 +191,41 @@ function normalizeModelForDisplay(_cli: string, model: string): string {
     return (model || '').trim();
 }
 
+/**
+ * Effort choices for one model.
+ *
+ * A live opencodex catalog advertises a different effort set per model
+ * (`gpt-5.6-sol` reaches `ultra`, `gpt-5.6-luna` stops at `max`, routed models
+ * take none), and the chosen value is forwarded to the wire, so the per-model
+ * set wins over the provider/registry lists. An entry that EXISTS but is empty
+ * means "no effort for this model" and must not fall back.
+ */
+function resolveEffortChoices(
+    meta: CliEntry | null,
+    model: string,
+    providerEfforts: string[] | null,
+    provider?: string,
+): string[] {
+    const key = (model || '').trim();
+    // Provider-scoped map wins for provider-split runtimes (ai-e): the same model
+    // id can allow different efforts per provider. A missing model key falls back
+    // to the provider list rather than inventing an empty "no effort" set.
+    if (provider) {
+        const scoped = meta?.effortsByModelByProvider?.[provider]?.[key];
+        if (scoped) return scoped;
+    }
+    const byModel = meta?.effortsByModel?.[key];
+    if (byModel) return byModel;
+    return providerEfforts || meta?.efforts || [];
+}
+
+function resolveDefaultEffort(meta: CliEntry | null, model: string, provider?: string): string {
+    const key = (model || '').trim();
+    return (provider ? meta?.defaultEffortByModelByProvider?.[provider]?.[key] : undefined)
+        ?? meta?.defaultEffortByModel?.[key]
+        ?? '';
+}
+
 function syncPerCliModelAndEffortControls(settings: SettingsData | null = null): void {
     for (const cli of getCliKeys()) {
         const meta = getCliMeta(cli);
@@ -224,8 +260,15 @@ function syncPerCliModelAndEffortControls(settings: SettingsData | null = null):
             const providerEfforts = cliProvider
                 ? (meta?.effortsByProvider?.[cliProvider] || [])
                 : null;
-            const options = [''].concat(providerEfforts || meta?.efforts || []);
-            const selected = settings?.perCli?.[cli]?.effort ?? effortSel.value ?? '';
+            const selectedModel = normalizeModelForDisplay(cli, settings?.perCli?.[cli]?.model || getModelSelect(cli)?.value || '');
+            const effortsList = resolveEffortChoices(meta, selectedModel, providerEfforts, cliProvider || undefined);
+            const options = [''].concat(effortsList);
+            const saved = settings?.perCli?.[cli]?.effort ?? effortSel.value ?? '';
+            // Drop a saved effort the current model does not support — it would
+            // otherwise reach the wire as `-c model_reasoning_effort=<bad>`.
+            const selected = !saved || effortsList.includes(saved)
+                ? saved
+                : resolveDefaultEffort(meta, selectedModel, cliProvider || undefined);
             const unique = [...new Set(options)];
             const noneLabel = (unique.length === 1 && !unique[0] && meta?.effortNote) ? meta.effortNote : '— none';
             effortSel.innerHTML = unique.map(v => {
@@ -233,13 +276,18 @@ function syncPerCliModelAndEffortControls(settings: SettingsData | null = null):
                 return `<option value="${escapeHtml(v)}">${escapeHtml(v)}</option>`;
             }).join('');
             if (meta?.effortNote) effortSel.title = meta.effortNote;
-            effortSel.disabled = (unique.length === 1 && !unique[0] && !!meta?.effortNote);
+            // A model with an explicitly EMPTY effort set takes no effort at all.
+            effortSel.disabled = (unique.length === 1 && !unique[0]);
             if (Array.from(effortSel.options).some(o => o.value === selected)) effortSel.value = selected;
         }
     }
 }
 
-function syncActiveEffortOptions(cli: string, selected = ''): void {
+function getActiveEffortValue(): string {
+    return (document.getElementById('selEffort') as HTMLSelectElement | null)?.value || '';
+}
+
+function syncActiveEffortOptions(cli: string, selected = '', model?: string): void {
     const selEffort = document.getElementById('selEffort') as HTMLSelectElement | null;
     if (!selEffort) return;
     const meta = getCliMeta(cli);
@@ -247,10 +295,15 @@ function syncActiveEffortOptions(cli: string, selected = ''): void {
     const providerEfforts = cliProvider
         ? (meta?.effortsByProvider?.[cliProvider] || [])
         : null;
-    const effortsList = providerEfforts || meta?.efforts || [];
-    if (meta?.effortNote && effortsList.length === 0) {
-        selEffort.innerHTML = `<option value="">${escapeHtml(meta.effortNote)}</option>`;
-        selEffort.title = meta.effortNote;
+    const activeModel = normalizeModelForDisplay(
+        cli,
+        model ?? (document.getElementById('selModel') as HTMLSelectElement | null)?.value ?? '',
+    );
+    const effortsList = resolveEffortChoices(meta, activeModel, providerEfforts, cliProvider || undefined);
+    if (effortsList.length === 0) {
+        const note = meta?.effortNote || '— none';
+        selEffort.innerHTML = `<option value="">${escapeHtml(note)}</option>`;
+        selEffort.title = note;
         selEffort.disabled = true;
         return;
     }
@@ -262,7 +315,12 @@ function syncActiveEffortOptions(cli: string, selected = ''): void {
     }).join('');
     selEffort.disabled = false;
     selEffort.title = meta?.effortNote || '';
-    if (Array.from(selEffort.options).some(o => o.value === selected)) selEffort.value = selected;
+    // Coerce a saved effort the active model does not support, so the value that
+    // reaches `-c model_reasoning_effort=` is always one the model advertises.
+    const resolved = !selected || effortsList.includes(selected)
+        ? selected
+        : resolveDefaultEffort(meta, activeModel, cliProvider || undefined);
+    if (Array.from(selEffort.options).some(o => o.value === resolved)) selEffort.value = resolved;
 }
 
 function syncAiEProviderOptions(select: HTMLSelectElement | null, current: string, providers: string[]): string {
@@ -543,6 +601,9 @@ export function onCliChange(save = true): void {
         appendCustomOption(modelSel, val);
         modelSel.value = val;
         (this as HTMLInputElement).style.display = 'none';
+        // A custom model has no advertised effort set; re-resolve so the picker
+        // falls back to the registry list instead of keeping the old model's.
+        syncActiveEffortOptions(cli, getActiveEffortValue(), val);
         saveActiveCliSettings();
     };
     if (!modelSel) { if (save) updateSettings(); return; }
@@ -553,6 +614,9 @@ export function onCliChange(save = true): void {
             inp.focus();
         } else {
             inp.style.display = 'none';
+            // Efforts are per-model on a live opencodex catalog, so the picker
+            // must follow the model rather than keep the previous model's set.
+            syncActiveEffortOptions(cli, getActiveEffortValue(), (this as HTMLSelectElement).value);
             saveActiveCliSettings();
         }
     };

package/public/js/features/settings-discord.ts

@@ -1,5 +1,6 @@
 // ── Discord Settings ──
 import { apiJson } from '../api.js';
+import { openSetupGuideIfUnconfigured } from './channel-setup-guide.js';
 import type { SettingsData } from './settings-types.js';
 
 export async function saveDiscordSettings(): Promise<void> {
@@ -16,6 +17,7 @@ export async function setDiscord(enabled: boolean): Promise<void> {
     document.getElementById('dcOn')?.classList.toggle('active', enabled);
     document.getElementById('dcOff')?.classList.toggle('active', !enabled);
     await apiJson('/api/settings', 'PUT', { discord: { enabled } });
+    if (enabled) openSetupGuideIfUnconfigured('discord');
 }
 
 export async function setDiscordForwardAll(enabled: boolean): Promise<void> {