cli-jaw 2.17.62 → 2.17.63

package/public/manager/src/manager-shortcuts.ts

@@ -1,4 +1,5 @@
 import type { DashboardShortcutAction, DashboardShortcutKeymap } from './types';
+import { currentClientPlatform, isMacLikePlatform } from './client-platform';
 
 export const MANAGER_SHORTCUT_ACTIONS: DashboardShortcutAction[] = [
     'toggleInstanceSettings',
@@ -11,6 +12,7 @@ export const MANAGER_SHORTCUT_ACTIONS: DashboardShortcutAction[] = [
     'toggleRightPanel',
     'focusTerminal',
     'newTerminalSession',
+    'newCodeSession',
     'openDiff',
     'openFolderTree',
     'closeFocusedTab',
@@ -50,6 +52,9 @@ export const DEFAULT_MANAGER_SHORTCUT_KEYMAP: DashboardShortcutKeymap = {
     toggleRightPanel: 'Meta+B',
     focusTerminal: 'Ctrl+`',
     newTerminalSession: 'Ctrl+Shift+`',
+    // Alt over Meta: Meta+Shift+N is Chrome's incognito chord, so a web-hosted
+    // dashboard would never see the keydown. Alt+Shift+N has no browser default.
+    newCodeSession: 'Alt+Shift+N',
     openDiff: 'Meta+Shift+D',
     openFolderTree: 'Meta+Shift+E',
     closeFocusedTab: 'Meta+W',
@@ -84,6 +89,23 @@ const MANAGER_SHORTCUT_ALIASES: Partial<Record<DashboardShortcutAction, string[]
     newTerminalSession: ['Ctrl+Shift+`'],
 };
 
+/**
+ * Keymap modifier tokens. `Meta` (and its spellings `Cmd`, `Command`, `Mod`) is
+ * the primary modifier: ⌘ on macOS, Ctrl on Windows/Linux — the same meaning as
+ * the Electron menu's `CommandOrControl`. Persisted keymaps keep their `Meta+…`
+ * strings; only the interpretation follows the client platform. `Win`/`Super`
+ * names the physical Windows/Super key (`metaKey`) on every platform.
+ */
+const PRIMARY_MODIFIER_TOKENS = new Set(['meta', 'cmd', 'command', 'mod']);
+const SUPER_MODIFIER_TOKENS = new Set(['win', 'windows', 'super']);
+const CTRL_MODIFIER_TOKENS = new Set(['ctrl', 'control']);
+const ALT_MODIFIER_TOKENS = new Set(['alt', 'option']);
+
+export type ShortcutPlatformOptions = {
+    /** Client platform string; defaults to the current browser/window platform. */
+    platform?: string;
+};
+
 type ParsedShortcut = {
     key: string;
     altKey: boolean;
@@ -104,7 +126,7 @@ function normalizeKey(value: string): string {
     return lower;
 }
 
-function parseShortcut(raw: string): ParsedShortcut | null {
+function parseShortcut(raw: string, mac: boolean): ParsedShortcut | null {
     const parts = raw.split('+').map(part => part.trim()).filter(Boolean);
     if (parts.length === 0) return null;
     const parsed: ParsedShortcut = {
@@ -116,9 +138,12 @@ function parseShortcut(raw: string): ParsedShortcut | null {
     };
     for (const part of parts) {
         const lower = part.toLowerCase();
-        if (lower === 'alt' || lower === 'option') parsed.altKey = true;
-        else if (lower === 'ctrl' || lower === 'control') parsed.ctrlKey = true;
-        else if (lower === 'meta' || lower === 'cmd' || lower === 'command') parsed.metaKey = true;
+        if (ALT_MODIFIER_TOKENS.has(lower)) parsed.altKey = true;
+        else if (CTRL_MODIFIER_TOKENS.has(lower)) parsed.ctrlKey = true;
+        else if (PRIMARY_MODIFIER_TOKENS.has(lower)) {
+            if (mac) parsed.metaKey = true;
+            else parsed.ctrlKey = true;
+        } else if (SUPER_MODIFIER_TOKENS.has(lower)) parsed.metaKey = true;
         else if (lower === 'shift') parsed.shiftKey = true;
         else parsed.key = normalizeKey(part);
     }
@@ -138,18 +163,18 @@ export function normalizeManagerShortcutKeymap(value: unknown): DashboardShortcu
 function resolveEventKey(event: KeyboardEvent): string {
     if (event.code === 'Backquote') return '`';
     if (event.altKey && event.code?.startsWith('Digit')) return event.code.slice(5);
-    const k = normalizeKey(event.key);
-    if (k.length === 1) return k;
-    // macOS Option+letter produces special chars (e.g. ∆ for Alt+J).
-    // Fall back to event.code to recover the original letter.
+    // macOS Option+letter produces special chars (e.g. ∆ for Alt+J, ˜ for
+    // Option+Shift+N), and those are themselves single characters -- so the
+    // character cannot be trusted to be the letter the chord names. The code
+    // wins whenever Option is held, exactly as it does for the digits above.
     if (event.altKey && event.code?.startsWith('Key')) {
         return event.code.slice(3).toLowerCase();
     }
-    return k;
+    return normalizeKey(event.key);
 }
 
-export function shortcutMatches(event: KeyboardEvent, raw: string): boolean {
-    const parsed = parseShortcut(raw);
+export function shortcutMatches(event: KeyboardEvent, raw: string, platform: string = currentClientPlatform()): boolean {
+    const parsed = parseShortcut(raw, isMacLikePlatform(platform));
     if (!parsed) return false;
     return event.altKey === parsed.altKey
         && event.ctrlKey === parsed.ctrlKey
@@ -203,26 +228,63 @@ export const MENU_ACCELERATOR_SHORTCUT_CHORDS: string[] = [
 export function actionForShortcutEvent(
     event: KeyboardEvent,
     keymap: unknown,
-    options?: { menuOwned?: boolean },
+    options?: { menuOwned?: boolean } & ShortcutPlatformOptions,
 ): DashboardShortcutAction | null {
-    if (options?.menuOwned && MENU_ACCELERATOR_SHORTCUT_CHORDS.some(chord => shortcutMatches(event, chord))) {
+    // Resolve once: the menu-owned check and the keymap must agree on what Meta
+    // means, or Ctrl+W on Windows desktop would fire from both menu and renderer.
+    const platform = options?.platform ?? currentClientPlatform();
+    if (options?.menuOwned && MENU_ACCELERATOR_SHORTCUT_CHORDS.some(chord => shortcutMatches(event, chord, platform))) {
         return null;
     }
     const shortcuts = normalizeManagerShortcutKeymap(keymap);
     for (const action of MANAGER_SHORTCUT_ACTIONS) {
         if (RENDERER_DISABLED_SHORTCUT_ACTIONS.has(action)) continue;
-        if (shortcutMatches(event, shortcuts[action])) return action;
-        if (MANAGER_SHORTCUT_ALIASES[action]?.some(shortcut => shortcutMatches(event, shortcut))) return action;
+        if (shortcutMatches(event, shortcuts[action], platform)) return action;
+        if (MANAGER_SHORTCUT_ALIASES[action]?.some(shortcut => shortcutMatches(event, shortcut, platform))) return action;
     }
     return null;
 }
 
-export function formatShortcut(raw: string): string {
-    return raw
-        .split('+')
-        .map(part => part.trim())
-        .filter(Boolean)
-        .join(' + ');
+const MAC_KEY_LABELS: Record<string, string> = {
+    left: '←', arrowleft: '←', right: '→', arrowright: '→',
+    up: '↑', arrowup: '↑', down: '↓', arrowdown: '↓',
+};
+
+function macModifierLabel(lower: string): string | null {
+    if (PRIMARY_MODIFIER_TOKENS.has(lower) || SUPER_MODIFIER_TOKENS.has(lower)) return '⌘';
+    if (CTRL_MODIFIER_TOKENS.has(lower)) return '⌃';
+    if (ALT_MODIFIER_TOKENS.has(lower)) return '⌥';
+    if (lower === 'shift') return '⇧';
+    return null;
+}
+
+function otherModifierLabel(lower: string): string | null {
+    if (PRIMARY_MODIFIER_TOKENS.has(lower) || CTRL_MODIFIER_TOKENS.has(lower)) return 'Ctrl';
+    if (SUPER_MODIFIER_TOKENS.has(lower)) return 'Win';
+    if (ALT_MODIFIER_TOKENS.has(lower)) return 'Alt';
+    if (lower === 'shift') return 'Shift';
+    return null;
+}
+
+/**
+ * Human label for a stored chord on the client platform: `Meta+Shift+B` reads
+ * `⌘⇧B` on macOS and `Ctrl + Shift + B` on Windows/Linux. The stored string is
+ * not changed; this is display only.
+ */
+export function formatShortcut(raw: string, platform: string = currentClientPlatform()): string {
+    const parts = raw.split('+').map(part => part.trim()).filter(Boolean);
+    const mac = isMacLikePlatform(platform);
+    const labels: string[] = [];
+    for (const part of parts) {
+        const lower = part.toLowerCase();
+        const modifier = mac ? macModifierLabel(lower) : otherModifierLabel(lower);
+        const label = modifier
+            ?? (mac ? (MAC_KEY_LABELS[lower] ?? (part.length === 1 ? part.toUpperCase() : part)) : part);
+        // Meta and Ctrl both read Ctrl off macOS; show a doubled modifier once.
+        if (modifier && labels.includes(label)) continue;
+        labels.push(label);
+    }
+    return labels.join(mac ? '' : ' + ');
 }
 
 export function isManagerShortcutEditableTarget(target: EventTarget | null): boolean {

package/public/manager/src/panels/desktop-bridge.ts

@@ -193,6 +193,8 @@ export type BrowserWebviewTabState = {
     error?: string;
     favicons?: string[];
     zoomFactor?: number;
+    /** 'auto': fit-to-width manages zoomFactor; 'manual': user zoom wins. */
+    zoomMode?: 'auto' | 'manual';
 };
 
 /** v5: element resolved from the native inspect pick (CDP DOM/AX domains). */
@@ -230,7 +232,8 @@ export type BrowserWebviewCommand =
     | { kind: 'stop'; tabId: string }
     | { kind: 'zoomIn'; tabId: string }
     | { kind: 'zoomOut'; tabId: string }
-    | { kind: 'zoomReset'; tabId: string };
+    | { kind: 'zoomReset'; tabId: string }
+    | { kind: 'fitToWidth'; tabId: string };
 
 export type BrowserWebviewNativeAction =
     | { kind: 'openExternal'; tabId: string }

package/public/manager/src/panels/panels.css

@@ -46,6 +46,15 @@
 body.is-resizing-horizontal { cursor: col-resize !important; user-select: none; }
 body.is-resizing-vertical { cursor: row-resize !important; user-select: none; }
 
+/* While a drag resizes the grid, no pointer may reach a framed preview and no
+   scrollable subtree may let scroll anchoring rewrite its scrollTop — the page
+   and the iframe must only reflow, never scroll. */
+body.is-resizing-horizontal iframe,
+body.is-resizing-vertical iframe { pointer-events: none; }
+
+body.is-resizing-horizontal *,
+body.is-resizing-vertical * { overflow-anchor: none; }
+
 .panel-resize-overlay {
     position: fixed;
     inset: 0;

package/public/manager/src/preview.ts

@@ -19,6 +19,8 @@ type PreviewArgument =
     | {
         theme?: PreviewTheme | null;
         transport?: PreviewTransportPreference | null;
+        /** True when the preview renders inside the Electron desktop shell. */
+        desktop?: boolean | null;
     }
     | undefined;
 
@@ -35,17 +37,19 @@ function isPreviewTheme(value: PreviewArgument): value is PreviewTheme {
     return value === 'dark' || value === 'light';
 }
 
-function resolvePreviewArgument(value: PreviewArgument): { theme: PreviewTheme | null; transport: PreviewTransportPreference | null } {
+function resolvePreviewArgument(value: PreviewArgument): { theme: PreviewTheme | null; transport: PreviewTransportPreference | null; desktop: boolean } {
     if (value && typeof value === 'object') {
         const theme = value.theme === 'dark' || value.theme === 'light' ? value.theme : null;
         return {
             theme,
             transport: value.transport === 'legacy-path' || value.transport === 'origin-port' ? value.transport : null,
+            desktop: value.desktop === true,
         };
     }
     return {
         theme: isPreviewTheme(value) ? value : null,
         transport: value === 'proxy' ? 'legacy-path' : null,
+        desktop: false,
     };
 }
 
@@ -73,6 +77,17 @@ export function appendPreviewTheme(src: string, theme: PreviewTheme | null | und
     return url.toString();
 }
 
+/** Marks preview URLs loaded inside the desktop shell so the framed page can
+ * apply desktop chrome (titlebar-inset topbar height) without a preload. */
+export function appendPreviewDesktop(src: string, desktop: boolean): string {
+    if (!desktop) return src;
+    const isRelative = src.startsWith('/');
+    const url = new URL(src, 'http://jaw.local');
+    url.searchParams.set('jawDesktop', '1');
+    if (isRelative) return `${url.pathname}${url.search}${url.hash}`;
+    return url.toString();
+}
+
 export function buildPreviewState(
     instance: DashboardInstance | null,
     data: DashboardScanResult | null,
@@ -94,7 +109,7 @@ export function buildPreviewState(
         return { canPreview: false, src: null, reason: 'This port is outside the proxy allowlist.', transport: 'none', warning: null };
     }
     const originPreview = proxy.preview?.instances[String(instance.port)];
-    const { theme, transport } = resolvePreviewArgument(previewArgument);
+    const { theme, transport, desktop } = resolvePreviewArgument(previewArgument);
     const useOriginPort = transport !== 'legacy-path'
         && proxy.preview?.enabled
         && originPreview?.status === 'ready'
@@ -105,7 +120,7 @@ export function buildPreviewState(
         previewUrl.pathname = `${previewUrl.pathname.replace(/\/?$/, '/')}0`;
         return {
             canPreview: true,
-            src: appendPreviewTheme(previewUrl.toString(), theme),
+            src: appendPreviewDesktop(appendPreviewTheme(previewUrl.toString(), theme), desktop),
             reason: null,
             transport: 'origin-port',
             warning: 'origin proxy ready',
@@ -114,7 +129,7 @@ export function buildPreviewState(
     const basePath = proxy.basePath || '/i';
     return {
         canPreview: true,
-        src: appendPreviewTheme(`${basePath}/${instance.port}/0`, theme),
+        src: appendPreviewDesktop(appendPreviewTheme(`${basePath}/${instance.port}/0`, theme), desktop),
         reason: null,
         transport: 'legacy-path',
         warning: 'legacy proxy fallback',

package/public/manager/src/settings/pages/AdvancedExport.tsx

@@ -6,7 +6,8 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import type { SettingsPageProps } from '../types';
-import { SettingsSection, PageError, PageLoading, PageOffline, usePageSnapshot } from './page-shell';
+import { SettingsSection, SettingsActions, PageError, PageLoading, PageOffline, usePageSnapshot } from './page-shell';
+import { ToggleField } from '../fields';
 import { describeError } from '../components/error-normalize';
 
 type ExportImportProps = SettingsPageProps & {
@@ -44,6 +45,7 @@ export function stripServerOwnedSettingsFields(settings: Record<string, unknown>
         multiSessionDefaultMigration: _sessionMigration,
         nativeTransportMigration: _nativeTransportMigration,
         maxConcurrentDefaultMigration: _maxConcurrentDefaultMigration,
+        claudeDefaultModelMigration: _claudeDefaultModelMigration,
         slackEnvironmentVariables: _slackEnvironmentVariables,
         telegramEnvironmentVariables: _telegramEnvironmentVariables,
         discordEnvironmentVariables: _discordEnvironmentVariables,
@@ -103,28 +105,27 @@ export default function AdvancedExport({ port, client, triggerDownload }: Export
                 title="Export"
                 hint={`Download the resolved /i/${port}/api/settings document as JSON.`}
             >
-                <button
-                    type="button"
-                    className="settings-action settings-action-secondary"
-                    onClick={onExport}
-                >
-                    Download settings JSON
-                </button>
+                <SettingsActions>
+                    <button
+                        type="button"
+                        className="settings-action"
+                        onClick={onExport}
+                    >
+                        Download settings JSON
+                    </button>
+                </SettingsActions>
             </SettingsSection>
 
             <SettingsSection
                 title="Import (advanced)"
                 hint="Replaces matching keys via PUT. Only enable when you understand the impact."
             >
-                <label className="settings-field" htmlFor="advanced-toggle">
-                    <span className="settings-field-label">Show import controls</span>
-                    <input
-                        id="advanced-toggle"
-                        type="checkbox"
-                        checked={showAdvanced}
-                        onChange={(event) => setShowAdvanced(event.target.checked)}
-                    />
-                </label>
+                <ToggleField
+                    id="advanced-toggle"
+                    label="Show import controls"
+                    value={showAdvanced}
+                    onChange={setShowAdvanced}
+                />
                 {showAdvanced ? (
                     <>
                         <label className="settings-field" htmlFor="advanced-import">
@@ -142,20 +143,17 @@ export default function AdvancedExport({ port, client, triggerDownload }: Export
                                     {importError}
                                 </span>
                             ) : null}
-                            {importResult ? (
-                                <span className="settings-field-description" role="status">
-                                    {importResult}
-                                </span>
-                            ) : null}
                         </label>
-                        <button
-                            type="button"
-                            className="settings-action settings-action-save"
-                            onClick={() => void onImport()}
-                            disabled={importBusy || importText.trim() === ''}
-                        >
-                            {importBusy ? 'Importing…' : 'Apply import'}
-                        </button>
+                        <SettingsActions status={importResult ? <span role="status">{importResult}</span> : undefined}>
+                            <button
+                                type="button"
+                                className="settings-action settings-action-save"
+                                onClick={() => void onImport()}
+                                disabled={importBusy || importText.trim() === ''}
+                            >
+                                {importBusy ? 'Importing…' : 'Apply import'}
+                            </button>
+                        </SettingsActions>
                     </>
                 ) : null}
             </SettingsSection>

package/public/manager/src/settings/pages/Browser.tsx

@@ -11,8 +11,15 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { SettingsPageProps } from '../types';
 import { SettingsRequestError } from '../settings-client';
-import { PageError, PageLoading, SettingsSection } from './page-shell';
-import { InlineWarn } from './components/InlineWarn';
+import {
+    PageError,
+    PageLoading,
+    SettingsActions,
+    SettingsKeyValue,
+    SettingsNote,
+    SettingsSection,
+    StatusBadge,
+} from './page-shell';
 
 export type BrowserStatus = {
     running: boolean;
@@ -185,28 +192,35 @@ export default function Browser({ port, client }: SettingsPageProps) {
     const { status, activeTab } = pollState;
     const actionPending = actionState.kind === 'pending';
 
+    const actionStatus =
+        actionState.kind === 'pending' ? (
+            <span role="status">{actionState.label}…</span>
+        ) : actionState.kind === 'success' ? (
+            <span role="status">{actionState.message}</span>
+        ) : null;
+
     return (
         <form className="settings-page-form" onSubmit={(event) => event.preventDefault()}>
             <SettingsSection
                 title="Status"
                 hint={`Polled every ${POLL_INTERVAL_MS / 1000}s while this page is open.`}
             >
-                <dl className="settings-readonly-grid">
-                    <dt>Running</dt>
-                    <dd>{status.running ? '✅ yes' : '❌ no'}</dd>
-                    <dt>Tabs</dt>
-                    <dd>{status.tabs}</dd>
-                    <dt>CDP URL</dt>
-                    <dd>
-                        <code>{status.cdpUrl || '—'}</code>
-                    </dd>
-                    <dt>Instance port</dt>
-                    <dd>
-                        <code>{port}</code>
-                    </dd>
-                </dl>
-
-                <div className="browser-actions">
+                <SettingsKeyValue
+                    items={[
+                        {
+                            label: 'Running',
+                            value: status.running ? (
+                                <StatusBadge tone="ok">Running</StatusBadge>
+                            ) : (
+                                <StatusBadge tone="neutral">Stopped</StatusBadge>
+                            ),
+                        },
+                        { label: 'Tabs', value: status.tabs },
+                        { label: 'CDP URL', value: status.cdpUrl || '—', mono: true },
+                        { label: 'Instance port', value: port, mono: true },
+                    ]}
+                />
+                <SettingsActions status={actionStatus}>
                     <button
                         type="button"
                         className="settings-action settings-action-save"
@@ -233,26 +247,15 @@ export default function Browser({ port, client }: SettingsPageProps) {
                     </button>
                     <button
                         type="button"
-                        className="settings-action settings-action-discard"
+                        className="settings-action settings-action-danger"
                         disabled={actionPending}
                         onClick={onReset}
                     >
                         Reset profile
                     </button>
-                </div>
-
-                {actionState.kind === 'pending' && (
-                    <p className="settings-section-hint" role="status">
-                        {actionState.label}…
-                    </p>
-                )}
-                {actionState.kind === 'success' && (
-                    <p className="settings-section-hint" role="status">
-                        ✅ {actionState.message}
-                    </p>
-                )}
+                </SettingsActions>
                 {actionState.kind === 'error' && (
-                    <InlineWarn role="alert">{actionState.message}</InlineWarn>
+                    <SettingsNote tone="error" role="alert">{actionState.message}</SettingsNote>
                 )}
             </SettingsSection>
 
@@ -261,24 +264,19 @@ export default function Browser({ port, client }: SettingsPageProps) {
                 hint="Tab the agent currently targets. Empty when the browser is stopped."
             >
                 {!status.running ? (
-                    <p className="settings-section-hint">Browser is not running.</p>
+                    <SettingsNote>Browser is not running.</SettingsNote>
                 ) : activeTab && activeTab.ok && activeTab.tab ? (
-                    <dl className="settings-readonly-grid">
-                        <dt>URL</dt>
-                        <dd>
-                            <code>{activeTab.tab.url || '—'}</code>
-                        </dd>
-                        <dt>Title</dt>
-                        <dd>{activeTab.tab.title || '—'}</dd>
-                        <dt>Target ID</dt>
-                        <dd>
-                            <code>{activeTab.tab.targetId || '—'}</code>
-                        </dd>
-                    </dl>
+                    <SettingsKeyValue
+                        items={[
+                            { label: 'URL', value: activeTab.tab.url || '—', mono: true },
+                            { label: 'Title', value: activeTab.tab.title || '—' },
+                            { label: 'Target ID', value: activeTab.tab.targetId || '—', mono: true },
+                        ]}
+                    />
                 ) : (
-                    <p className="settings-section-hint">
+                    <SettingsNote>
                         No verified active tab{activeTab?.reason ? ` (${activeTab.reason})` : ''}.
-                    </p>
+                    </SettingsNote>
                 )}
             </SettingsSection>
         </form>

package/public/manager/src/settings/pages/ChannelsDiscord.tsx

@@ -20,6 +20,9 @@ import {
     PageLoading,
     PageOffline,
     usePageSnapshot,
+    SettingsActions,
+    SettingsKeyValue,
+    StatusBadge,
 } from './page-shell';
 import { expandPatch } from './path-utils';
 import { slackText } from './components/SlackSetup';
@@ -190,25 +193,37 @@ export default function ChannelsDiscord({ port, client, dirty, registerSave, man
         >
             <fieldset disabled={setupOpen} className="settings-slack-fields">
             <SettingsSection
-                title="Channels"
-                hint="Choose which channels receive inbound chat. Outbound send can still work on any configured channel."
+                title="Status"
+                hint="Live transport state plus a readiness probe for this channel."
             >
-                <ChannelEnablementControl
-                    pageChannel="discord"
-                    snapshot={state.kind === 'ready' ? state.data : {}}
-                    enabledChannels={enabledChannels}
-                    homeChannel={homeChannel}
-                    setEnabledChannels={setEnabledChannels}
-                    setHomeChannel={setHomeChannel}
-                    dirty={dirty}
-                    idPrefix="di-channel"
+                <SettingsKeyValue
+                    items={[
+                        {
+                            label: 'Discord',
+                            value: enabled ? (
+                                <StatusBadge tone="ok">Enabled</StatusBadge>
+                            ) : (
+                                <StatusBadge tone="neutral">Disabled</StatusBadge>
+                            ),
+                        },
+                        ...(environmentManaged
+                            ? [{ label: 'Managed by', value: environmentVariables.join(', '), mono: true }]
+                            : []),
+                    ]}
                 />
                 <TransportStatusChips client={client} channel="discord" />
+                <HealthBadge
+                    client={client}
+                    label="Discord"
+                    endpoint="/api/health"
+                    method="GET"
+                    interpret={interpretDiscordHealth}
+                />
             </SettingsSection>
 
-            <SettingsSection title="Discord" hint={environmentManaged
+            <SettingsSection title="Credentials" hint={environmentManaged
                 ? t('settings.discord.managedByEnvironment', { variables: environmentVariables.join(', ') })
-                : 'Bot token, guild + channels, forwarding rules.'}>
+                : 'Bot token, guild, and channel IDs.'}>
                 <ToggleField
                     id="dc-enabled"
                     label="Discord enabled"
@@ -276,6 +291,22 @@ export default function ChannelsDiscord({ port, client, dirty, registerSave, man
                         });
                     }}
                 />
+            </SettingsSection>
+
+            <SettingsSection
+                title="Routing"
+                hint="Choose which channels receive inbound chat and how replies are delivered. Outbound send can still work on any configured channel."
+            >
+                <ChannelEnablementControl
+                    pageChannel="discord"
+                    snapshot={state.kind === 'ready' ? state.data : {}}
+                    enabledChannels={enabledChannels}
+                    homeChannel={homeChannel}
+                    setEnabledChannels={setEnabledChannels}
+                    setHomeChannel={setHomeChannel}
+                    dirty={dirty}
+                    idPrefix="di-channel"
+                />
                 <ToggleField
                     id="dc-forwardAll"
                     label="Forward all"
@@ -316,22 +347,16 @@ export default function ChannelsDiscord({ port, client, dirty, registerSave, man
                     }}
                 />
             </SettingsSection>
-
+            </fieldset>
             <SettingsSection
-                title="Health"
-                hint="Probes /api/health for Discord readiness. Degraded mode means the bot is missing the MESSAGE_CONTENT intent (slash commands only)."
+                title="Actions"
+                hint="Guided setup validates credentials with the issuer before saving."
             >
-                <HealthBadge
-                    client={client}
-                    label="Discord"
-                    endpoint="/api/health"
-                    method="GET"
-                    interpret={interpretDiscordHealth}
-                />
+                <SettingsActions>
+                    <ChannelSetupEntry channel="discord" client={client} dirty={dirty} disabled={environmentManaged}
+                        open={setupOpen} onOpenChange={setSetupOpen} onSaved={async () => setData(await client.get<DiscordSnapshot>('/api/settings'))} />
+                </SettingsActions>
             </SettingsSection>
-            </fieldset>
-            <ChannelSetupEntry channel="discord" client={client} dirty={dirty} disabled={environmentManaged}
-                open={setupOpen} onOpenChange={setSetupOpen} onSaved={async () => setData(await client.get<DiscordSnapshot>('/api/settings'))} />
         </form>
     );
 }