cli-jaw 2.17.62 → 2.17.63

package/public/manager/src/settings/pages/components/PiProfileDialog.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { KeyboardEvent } from 'react';
 import { SelectField, TextField } from '../../fields';
+import { SettingsActions, SettingsNote } from '../page-shell';
 import type { SettingsClient } from '../../types';
 import type { PiProfileMode, PiSettingsView } from './pi-profile';
 
@@ -121,7 +122,7 @@ export function PiProfileDialog({ client, pi, provider, model, onClose, onRegist
                     <h3 id="pi-profile-title">Pi Settings</h3>
                     <button type="button" className="settings-action settings-action-discard" onClick={onClose}>Close</button>
                 </header>
-                <div className="settings-page-form">
+                <div className="settings-section-body">
                     <SelectField
                         id="pi-profile-mode"
                         label="Mode"
@@ -133,11 +134,13 @@ export function PiProfileDialog({ client, pi, provider, model, onClose, onRegist
                     <TextField id="pi-profile-endpoint" label="Endpoint" value={endpoint} onChange={setEndpoint} placeholder={defaultEndpoint(mode)} />
                     <TextField id="pi-profile-model" label="Model" value={modelId} onChange={setModelId} placeholder="grok-composer-2.5-fast" />
                     <TextField id="pi-profile-key" label="API Key" value={apiKey} onChange={setApiKey} placeholder={current?.apiKeySet ? `set (${current.apiKeyLast4 || '****'})` : 'empty for local proxy'} />
-                    <p className="settings-empty">Default: grok-composer-2.5-fast. Bare grok-composer-2.5 currently has no verified team access.</p>
-                    {error ? <p className="settings-field-error" role="alert">{error}</p> : null}
-                    <button type="button" className="settings-action settings-action-save" disabled={busy} onClick={() => void register()}>
-                        {busy ? 'Registering...' : 'Register'}
-                    </button>
+                    <SettingsNote>Default: grok-composer-2.5-fast. Bare grok-composer-2.5 currently has no verified team access.</SettingsNote>
+                    {error ? <SettingsNote tone="error" role="alert">{error}</SettingsNote> : null}
+                    <SettingsActions>
+                        <button type="button" className="settings-action settings-action-save" disabled={busy} onClick={() => void register()}>
+                            {busy ? 'Registering...' : 'Register'}
+                        </button>
+                    </SettingsActions>
                 </div>
             </div>
         </div>

package/public/manager/src/settings/pages/components/SlackSetup.tsx

@@ -93,15 +93,15 @@ export function ChannelSetupDialog({channel,client,t,initialDraft,returnFocus,on
                 <label htmlFor="sl-setup-name">{t('onboarding.slackAppName')}</label>
                 <input id="sl-setup-name" value={name} onChange={event=>{setName(event.target.value);setFlow(resetSlackSetup);setManifestStatus('');}}/>
                 <p>{t('onboarding.guide.slack')}</p>
-                <button type="button" onClick={()=>void manifest()}>{t('onboarding.slackGenerateManifest')}</button>
+                <button type="button" className="settings-action" onClick={()=>void manifest()}>{t('onboarding.slackGenerateManifest')}</button>
                 <p role="status">{manifestStatus}</p>
-                <button type="button" disabled={flow.slackSetupStage==='manifest'} onClick={()=>{
+                <button type="button" className="settings-action" disabled={flow.slackSetupStage==='manifest'} onClick={()=>{
                     window.open(ISSUER_URLS.slack,'_blank','noopener');setFlow(markSlackIssuerOpened);
                 }}>{t('onboarding.openIssuer')}</button>
             </>}
             {flow.step===1 && channel!=='slack' && <>
                 <p>{t(`onboarding.guide.${channel}`)}</p>
-                <button type="button" onClick={()=>window.open(ISSUER_URLS[channel],'_blank','noopener')}>{t('onboarding.openIssuer')}</button>
+                <button type="button" className="settings-action" onClick={()=>window.open(ISSUER_URLS[channel],'_blank','noopener')}>{t('onboarding.openIssuer')}</button>
             </>}
             {flow.step===2 && fieldsFor(channel).map(field=><label key={field.key}>
                 {t(`onboarding.token.${field.key}`)}{field.optional ? ` (${t('onboarding.optional')})` : ''}
@@ -110,17 +110,17 @@ export function ChannelSetupDialog({channel,client,t,initialDraft,returnFocus,on
                 <span>{t(`onboarding.hint.${channel}.${field.key}`)}</span>
             </label>)}
             {flow.step===3 && <>
-                <button type="button" onClick={()=>void validate()}>{t('onboarding.validate')}</button>
+                <button type="button" className="settings-action" onClick={()=>void validate()}>{t('onboarding.validate')}</button>
                 {flow.validatedIdentity && <p>{t('onboarding.valid',{identity:flow.validatedIdentity})}</p>}
             </>}
             {flow.step===4 && <p>{t(flow.saved?`onboarding.next.${channel}`:'onboarding.saveHint')}</p>}
-            {flow.step>1 && <button type="button" onClick={()=>setFlow(goBack)}>{t('onboarding.back')}</button>}
-            {flow.step<4 ? <button type="button" disabled={!canAdvance(flow)} onClick={()=>setFlow(advance)}>{t('onboarding.next')}</button>
-                : <button type="button" disabled={!flow.validatedIdentity} onClick={()=>void save()}>{t('onboarding.save')}</button>}
+            {flow.step>1 && <button type="button" className="settings-action" onClick={()=>setFlow(goBack)}>{t('onboarding.back')}</button>}
+            {flow.step<4 ? <button type="button" className="settings-action settings-action-save" disabled={!canAdvance(flow)} onClick={()=>setFlow(advance)}>{t('onboarding.next')}</button>
+                : <button type="button" className="settings-action settings-action-save" disabled={!flow.validatedIdentity} onClick={()=>void save()}>{t('onboarding.save')}</button>}
         </fieldset>
         {(error || flow.error || (flow.step===2 && blockerForStep(flow))) && <p role="alert">{error ?? t(`onboarding.error.${flow.error ?? blockerForStep(flow)}`)}</p>}
         {!!flow.missingScopes.length && <p role="alert">{flow.missingScopes.join(', ')}</p>}
         {!!flow.missingCapabilities.length && <p role="status">{t('onboarding.warning.missingCapabilities',{capabilities:flow.missingCapabilities.join(', ')})}</p>}
-        <button type="button" disabled={channel!=='slack' && busy} onClick={close}>{t('onboarding.close')}</button>
+        <button type="button" className="settings-action" disabled={channel!=='slack' && busy} onClick={close}>{t('onboarding.close')}</button>
     </dialog>;
 }

package/public/manager/src/settings/pages/components/TransportStatusChips.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { SettingsClient } from '../../types';
+import { StatusBadge } from '../page-shell';
 
 export type MessengerChannel = 'telegram' | 'discord' | 'slack';
 
@@ -110,25 +111,28 @@ export function TransportStatusChips({ client, channel }: Props) {
     const showHint = Boolean(status?.configured && status.sendCapable && !status.activeInbound);
 
     return (
-        <div className="settings-transport-status" role="status" aria-live="polite">
-            {error ? <p className="settings-field-hint">{error}</p> : null}
+        <div className="settings-transport-status settings-card-toolbar" role="status" aria-live="polite">
+            {error ? <span className="settings-field-hint">{error}</span> : null}
             {status ? (
                 <>
-                    <div className="settings-transport-chips">
-                        {transportChipLabels(status).map(label => (
-                            <span key={label} className="settings-health-pill is-ok">{label}</span>
-                        ))}
-                    </div>
+                    {transportChipLabels(status).map(label => (
+                        <StatusBadge
+                            key={label}
+                            tone={label === 'Not configured' ? 'neutral' : 'ok'}
+                        >
+                            {label}
+                        </StatusBadge>
+                    ))}
                     {showHint ? (
-                        <p className="settings-field-hint">
+                        <span className="settings-field-hint">
                             This transport is not receiving inbound messages, but send-only delivery remains available.
-                        </p>
+                        </span>
                     ) : null}
                 </>
             ) : null}
             <button
                 type="button"
-                className="settings-action settings-action-discard"
+                className="settings-action"
                 onClick={() => void refresh()}
             >
                 Refresh transport status

package/public/manager/src/settings/pages/components/agent/AgentEmployeesSection.tsx

@@ -1,4 +1,4 @@
-import { SettingsSection } from '../../page-shell';
+import { SettingsActions, SettingsNote, SettingsSection, SettingsToolbar, StatusBadge } from '../../page-shell';
 import { RuntimeEmployeeRow } from './RuntimeEmployeeRow';
 import type { CliMeta } from './agent-meta';
 import {
@@ -43,40 +43,40 @@ export function AgentEmployeesSection({
             title="Employees"
             hint="Runtime dispatch roster. Static employees keep their locked identity; database employees can be edited."
         >
-            <div className="settings-runtime-employee-summary">
-                <span>+{summary.added}</span>
-                <span>~{summary.updated}</span>
-                <span>-{summary.removed}</span>
-                {hasErrors ? <strong>Fix invalid rows before saving.</strong> : null}
-            </div>
-            {loading ? <p className="settings-agent-note">Loading employees...</p> : null}
-            {error ? <p className="settings-field-error" role="alert">{error}</p> : null}
+            <SettingsToolbar>
+                <span className="settings-runtime-employee-summary">
+                    <span>+{summary.added}</span>
+                    <span>~{summary.updated}</span>
+                    <span>-{summary.removed}</span>
+                </span>
+                {hasErrors ? <StatusBadge tone="error">Fix invalid rows before saving.</StatusBadge> : null}
+            </SettingsToolbar>
+            {loading ? <SettingsNote>Loading employees...</SettingsNote> : null}
+            {error ? <SettingsNote tone="error" role="alert">{error}</SettingsNote> : null}
             {roster.length === 0 ? (
-                <p className="settings-empty">No runtime employees configured.</p>
+                <SettingsNote>No runtime employees configured.</SettingsNote>
             ) : (
-                <div className="settings-runtime-employee-list">
-                    {roster.map((employee, idx) => (
-                        <RuntimeEmployeeRow
-                            key={employee.id}
-                            employee={employee}
-                            index={idx}
-                            cliOptions={cliOptions}
-                            cliMeta={cliMeta ?? null}
-                            onChange={(patch) => updateRow(idx, patch)}
-                            onRemove={() => removeRow(idx)}
-                        />
-                    ))}
-                </div>
+                roster.map((employee, idx) => (
+                    <RuntimeEmployeeRow
+                        key={employee.id}
+                        employee={employee}
+                        index={idx}
+                        cliOptions={cliOptions}
+                        cliMeta={cliMeta ?? null}
+                        onChange={(patch) => updateRow(idx, patch)}
+                        onRemove={() => removeRow(idx)}
+                    />
+                ))
             )}
-            <div className="settings-employee-footer-bar">
+            <SettingsActions>
                 <button
                     type="button"
-                    className="settings-action settings-action-discard"
+                    className="settings-action"
                     onClick={() => onRosterChange([...roster, makeDefaultRuntimeEmployee(cliOptions, cliMeta)])}
                 >
                     + Add employee
                 </button>
-            </div>
+            </SettingsActions>
         </SettingsSection>
     );
 }

package/public/manager/src/settings/pages/components/agent/PermissionQuickSection.tsx

@@ -1,5 +1,5 @@
 import { SelectField } from '../../../fields';
-import { SettingsSection } from '../../page-shell';
+import { SettingsNote, SettingsSection } from '../../page-shell';
 import {
     configuredPolicyLabel,
     isAllowlistValid,
@@ -49,12 +49,12 @@ export function PermissionQuickSection({ value, configuredValue, onChange }: Per
                 }}
             />
             {mode === 'invalid' ? (
-                <p className="settings-agent-note" role="alert">
+                <SettingsNote tone="error" role="alert">
                     The saved permissions value is not a recognized policy. Choose a policy to replace it.
-                </p>
+                </SettingsNote>
             ) : null}
-            {summary ? <p className="settings-agent-note">{summary}</p> : null}
-            <p className="settings-agent-note" id="agent-configured-policy">Configured policy: {configuredPolicyLabel(configuredValue)}</p>
+            {summary ? <SettingsNote>{summary}</SettingsNote> : null}
+            <SettingsNote><span id="agent-configured-policy">Configured policy: {configuredPolicyLabel(configuredValue)}</span></SettingsNote>
         </SettingsSection>
     );
 }

package/public/manager/src/settings/pages/components/agent/RuntimeEmployeeRow.tsx

@@ -1,4 +1,5 @@
 import { SelectField, TextField } from '../../../fields';
+import { SettingsActions, StatusBadge } from '../../page-shell';
 import { metaFor, optionList, selectableRuntimeOptions, isRetiredCliSelection, retiredRuntimeLabel, type CliMeta } from './agent-meta';
 import {
     isStaticEmployee,
@@ -30,12 +31,13 @@ export function RuntimeEmployeeRow({
     const retired = isRetiredCliSelection(employee.cli);
     const cliChoices = selectableRuntimeOptions(Array.from(new Set([...cliOptions, employee.cli, 'claude'])).filter(Boolean));
 
+    const employeeName = employee.name || `Employee ${index + 1}`;
     return (
-        <fieldset className="settings-runtime-employee-row">
-            <legend>
-                {employee.name || `Employee ${index + 1}`}
-                {locked ? <span>static</span> : null}
-            </legend>
+        <div className="settings-runtime-employee-row" role="group" aria-label={employeeName}>
+            <p className="settings-runtime-employee-head">
+                <span className="settings-runtime-employee-name">{employeeName}</span>
+                {locked ? <StatusBadge tone="neutral">static</StatusBadge> : null}
+            </p>
             <div className="settings-runtime-employee-grid">
                 <TextField
                     id={`runtime-employee-${employee.id}-name`}
@@ -74,18 +76,19 @@ export function RuntimeEmployeeRow({
                     onChange={(next) => onChange({ role: next })}
                 />
             </div>
-            <div className="settings-runtime-employee-footer">
-                <span>{employee.source}{employee.status ? ` / ${employee.status}` : ''}</span>
+            <SettingsActions
+                status={<span>{employee.source}{employee.status ? ` / ${employee.status}` : ''}</span>}
+            >
                 <button
                     type="button"
-                    className="settings-action settings-action-discard"
+                    className="settings-action settings-action-danger"
                     disabled={locked}
                     onClick={onRemove}
-                    aria-label={`Remove employee ${employee.name || index + 1}`}
+                    aria-label={`Remove employee ${employeeName}`}
                 >
                     Remove
                 </button>
-            </div>
-        </fieldset>
+            </SettingsActions>
+        </div>
     );
 }

package/public/manager/src/settings/pages/components/agent/RuntimeHeader.tsx

@@ -48,8 +48,7 @@ export function RuntimeHeader({
             title="Agent runtime"
             hint="Active CLI, model, effort, and workspace used by this instance."
         >
-            <div className="settings-agent-runtime-grid">
-                <SelectField
+            <SelectField
                     id="agent-cli"
                     label="Active CLI"
                     value={cli}
@@ -95,7 +94,6 @@ export function RuntimeHeader({
                     placeholder="/path/to/project"
                     onChange={onWorkingDirChange}
                 />
-            </div>
         </SettingsSection>
     );
 }

package/public/manager/src/settings/pages/components/agent/agent-meta.ts

@@ -36,8 +36,6 @@ export type PerCliEntry = {
     model?: string;
     effort?: string;
     fastMode?: boolean;
-    contextWindowSize?: number;
-    contextWindowCompactLimit?: number;
     [key: string]: unknown;
 };
 

package/public/manager/src/settings/pages/components/runtime-transport-field.tsx

@@ -41,7 +41,7 @@ export function RuntimeTransportField({ cli, original, dirty, disabled = false,
     if (key === null) return null;
 
     return (
-        <div>
+        <>
             <SelectField
                 id={`percli-${cli}-transport`}
                 label="Runtime transport"
@@ -63,6 +63,6 @@ export function RuntimeTransportField({ cli, original, dirty, disabled = false,
                         : 'Native requires Auto (YOLO) permissions; no native worker assignments.'}
                 </p>
             ) : null}
-        </div>
+        </>
     );
 }

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

@@ -1,8 +1,12 @@
 import type { SettingsPageProps } from '../../types';
+import { SettingsSection } from '../page-shell';
 import { COPY, normalizeDashboardLocale, TitleSupportSummary } from './shared';
 export default function Activity({manager}: SettingsPageProps) {
     if (!manager) return null;
     const locale = normalizeDashboardLocale(manager.ui.locale), copy = COPY[locale];
-    return <section className="dashboard-settings-section"><header><h3>{copy.activityTitle}</h3><p>{copy.activityDescription}</p></header>
-        <TitleSupportSummary support={manager.titleSupport} locale={locale}/></section>;
+    return (
+        <SettingsSection title={copy.activityTitle} hint={copy.activityDescription}>
+            <TitleSupportSummary support={manager.titleSupport} locale={locale}/>
+        </SettingsSection>
+    );
 }

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

@@ -1,6 +1,7 @@
 import type { SettingsPageProps } from '../../types';
 import type { DashboardShortcutAction } from '../../../types';
 import { formatShortcut, MANAGER_SHORTCUT_ACTIONS } from '../../../manager-shortcuts';
+import { SettingsSection } from '../page-shell';
 import { COPY, LOCALE_OPTIONS, normalizeDashboardLocale, DashboardSettingToggle, DashboardSettingSelect, DashboardShortcutInput, shortcutCopyKey } from './shared';
 export default function Display({manager}: SettingsPageProps) {
     if (!manager) return null;
@@ -17,12 +18,7 @@ export default function Display({manager}: SettingsPageProps) {
     }
 
     return (
-                <section className="dashboard-settings-section">
-                    <header>
-                        <h3>{copy.displayTitle}</h3>
-                        <p>{copy.displayDescription}</p>
-                    </header>
-                    <div className="dashboard-settings-field-list">
+                <SettingsSection title={copy.displayTitle} hint={copy.displayDescription}>
                         <DashboardSettingToggle
                             id="dashboard-show-activity-title"
                             label={copy.fields.activity.label}
@@ -86,7 +82,6 @@ export default function Display({manager}: SettingsPageProps) {
                                 />
                             );
                         })}
-                    </div>
-                </section>
+                </SettingsSection>
     );
 }

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

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import type { DashboardLocale, DashboardShortcutAction } from '../../../types';
+import { SettingsKeyValue, StatusBadge, SettingsNote } from '../page-shell';
 import type { DashboardActivityTitleSupport } from '../../../dashboard-settings/activity-title-support';
 const LOCALE_OPTIONS = [
     { value: 'ko', label: '한국어 (ko)' },
@@ -53,7 +54,7 @@ const COPY = {
             shortcuts: {
                 label: '전역 단축키',
                 scope: 'Manager dashboard',
-                description: '입력창과 에디터 바깥에서만 작동하는 Manager 이동 단축키를 켭니다.',
+                description: '입력창과 에디터 바깥에서만 작동하는 Manager 이동 단축키를 켭니다. Meta는 macOS에서 ⌘, Windows·Linux에서 Ctrl이고, Windows 키는 Win으로 적습니다.',
             },
             shortcutFocusInstances: {
                 label: '인스턴스 목록',
@@ -120,6 +121,11 @@ const COPY = {
                 scope: '단축키',
                 description: '터미널 탭을 열고 새 셸 세션을 시작합니다.',
             },
+            shortcutNewCodeSession: {
+                label: '새 Code 세션',
+                scope: '단축키',
+                description: 'Code 모드 사이드바에서 새 세션 초안을 시작합니다.',
+            },
             shortcutTerminalNewTab: {
                 label: '새 터미널 탭',
                 scope: '단축키',
@@ -244,7 +250,7 @@ const COPY = {
             shortcuts: {
                 label: 'Global shortcuts',
                 scope: 'Manager dashboard',
-                description: 'Enable Manager navigation shortcuts outside inputs and editors.',
+                description: 'Enable Manager navigation shortcuts outside inputs and editors. Meta means ⌘ on macOS and Ctrl on Windows/Linux; write Win for the Windows key.',
             },
             shortcutFocusInstances: {
                 label: 'Instance list',
@@ -311,6 +317,11 @@ const COPY = {
                 scope: 'Shortcut',
                 description: 'Open the terminal tab and start a new shell session.',
             },
+            shortcutNewCodeSession: {
+                label: 'New Code session',
+                scope: 'Shortcut',
+                description: 'Start a new session draft in Code mode.',
+            },
             shortcutTerminalNewTab: {
                 label: 'New terminal tab',
                 scope: 'Shortcut',
@@ -435,7 +446,7 @@ const COPY = {
             shortcuts: {
                 label: '全局快捷键',
                 scope: 'Manager dashboard',
-                description: '在输入框和编辑器外启用 Manager 导航快捷键。',
+                description: '在输入框和编辑器外启用 Manager 导航快捷键。Meta 在 macOS 上是 ⌘，在 Windows/Linux 上是 Ctrl；Windows 键请写作 Win。',
             },
             shortcutFocusInstances: {
                 label: '实例列表',
@@ -502,6 +513,11 @@ const COPY = {
                 scope: '快捷键',
                 description: '打开终端标签并启动新的 Shell 会话。',
             },
+            shortcutNewCodeSession: {
+                label: '新 Code 会话',
+                scope: '快捷键',
+                description: '在 Code 模式侧边栏中开始新的会话草稿。',
+            },
             shortcutTerminalNewTab: {
                 label: '新终端标签',
                 scope: '快捷键',
@@ -626,7 +642,7 @@ const COPY = {
             shortcuts: {
                 label: 'グローバルショートカット',
                 scope: 'Manager dashboard',
-                description: '入力欄とエディタ外で Manager ナビゲーションショートカットを有効にします。',
+                description: '入力欄とエディタ外で Manager ナビゲーションショートカットを有効にします。Meta は macOS では ⌘、Windows/Linux では Ctrl です。Windows キーは Win と書きます。',
             },
             shortcutFocusInstances: {
                 label: 'インスタンス一覧',
@@ -693,6 +709,11 @@ const COPY = {
                 scope: 'ショートカット',
                 description: 'ターミナルタブを開き、新しいシェルセッションを開始します。',
             },
+            shortcutNewCodeSession: {
+                label: '新しい Code セッション',
+                scope: 'ショートカット',
+                description: 'Code モードのサイドバーで新しいセッションの下書きを開始します。',
+            },
             shortcutTerminalNewTab: {
                 label: '新しいターミナルタブ',
                 scope: 'ショートカット',
@@ -790,18 +811,14 @@ type DashboardSettingRowProps = {
 
 function DashboardSettingRow(props: DashboardSettingRowProps) {
     return (
-        <div className="dashboard-settings-row">
-            <div className="dashboard-settings-row-main">
-                <label className="dashboard-settings-row-heading" htmlFor={props.id}>
-                    <span>{props.label}</span>
-                    <span className="dashboard-settings-row-scope">{props.scope}</span>
-                </label>
-                <p className="dashboard-settings-row-description">{props.description}</p>
-            </div>
-            <div className="dashboard-settings-row-control">
-                {props.children}
-            </div>
-        </div>
+        <label className="settings-field" htmlFor={props.id}>
+            <span className="settings-field-label">{props.label}</span>
+            {props.children}
+            <span className="settings-field-description">
+                <span className="dashboard-settings-row-scope">{props.scope}</span>{' '}
+                {props.description}
+            </span>
+        </label>
     );
 }
 
@@ -819,7 +836,6 @@ function DashboardSettingToggle(props: DashboardSettingToggleProps) {
         <DashboardSettingRow id={props.id} label={props.label} scope={props.scope} description={props.description}>
             <input
                 id={props.id}
-                className="dashboard-settings-toggle"
                 type="checkbox"
                 checked={props.value}
                 onChange={(event) => props.onChange(event.currentTarget.checked)}
@@ -852,7 +868,6 @@ function DashboardSettingSelect(props: DashboardSettingSelectProps) {
         <DashboardSettingRow id={props.id} label={props.label} scope={props.scope} description={props.description}>
             <select
                 id={props.id}
-                className="dashboard-settings-select"
                 value={props.value}
                 onChange={(event) => props.onChange(normalizeDashboardLocale(event.currentTarget.value))}
             >
@@ -869,8 +884,8 @@ function DashboardShortcutInput(props: DashboardShortcutInputProps) {
         <DashboardSettingRow id={`dashboard-shortcut-${props.action}`} label={props.label} scope={props.scope} description={props.description}>
             <input
                 id={`dashboard-shortcut-${props.action}`}
-                className="dashboard-settings-shortcut-input"
                 type="text"
+                className="dashboard-settings-shortcut-input"
                 value={props.value}
                 aria-label={`${props.label} shortcut`}
                 placeholder="Alt+I"
@@ -892,6 +907,7 @@ const SHORTCUT_COPY_KEYS: Record<DashboardShortcutAction, keyof typeof COPY.ko.f
     toggleLeftSidebar: 'shortcutToggleLeftSidebar',
     focusTerminal: 'shortcutFocusTerminal',
     newTerminalSession: 'shortcutNewTerminalSession',
+    newCodeSession: 'shortcutNewCodeSession',
     terminalNewTab: 'shortcutTerminalNewTab',
     terminalClear: 'shortcutTerminalClear',
     openDiff: 'shortcutOpenDiff',
@@ -927,20 +943,15 @@ function TitleSupportSummary({ support, locale }: { support: DashboardActivityTi
     const total = support.ready + support.legacy + support.offline;
     const copy = COPY[locale].support;
     return (
-        <div className="dashboard-settings-status-grid" aria-label={copy.ariaLabel}>
-            <div>
-                <span>{copy.ready}</span>
-                <strong>{support.ready}</strong>
-            </div>
-            <div>
-                <span>{copy.legacy}</span>
-                <strong>{support.legacy}</strong>
-            </div>
-            <div>
-                <span>{copy.offline}</span>
-                <strong>{support.offline}</strong>
-            </div>
-            <p>{total === 0 ? copy.empty : copy.restart}</p>
+        <div role="group" aria-label={copy.ariaLabel}>
+            <SettingsKeyValue
+                items={[
+                    { label: copy.ready, value: <StatusBadge tone="ok">{support.ready}</StatusBadge> },
+                    { label: copy.legacy, value: <StatusBadge tone="warn">{support.legacy}</StatusBadge> },
+                    { label: copy.offline, value: <StatusBadge tone="neutral">{support.offline}</StatusBadge> },
+                ]}
+            />
+            <SettingsNote>{total === 0 ? copy.empty : copy.restart}</SettingsNote>
         </div>
     );
 }

package/public/manager/src/settings/pages/page-shell.tsx

@@ -155,3 +155,69 @@ export function SaveBar({ saving, isDirty, error, onDiscard }: SaveBarProps) {
         </div>
     );
 }
+
+// ─── Card-body primitives ────────────────────────────────────────────
+// Children of `SettingsSection` render as divided rows inside one card.
+// These primitives share that row rhythm so pages never hand-roll grids,
+// emoji status, or free-floating button strips.
+
+export type StatusTone = 'ok' | 'warn' | 'error' | 'neutral';
+
+export function StatusBadge({ tone, children }: { tone: StatusTone; children: ReactNode }) {
+    return (
+        <span className={`settings-status settings-status-${tone}`}>
+            <span className="settings-status-dot" aria-hidden="true" />
+            {children}
+        </span>
+    );
+}
+
+export type KeyValueItem = { label: string; value: ReactNode; mono?: boolean; className?: string };
+
+export function SettingsKeyValue({ items }: { items: ReadonlyArray<KeyValueItem> }) {
+    return (
+        <dl className="settings-kv">
+            {items.map((item, index) => (
+                <div className={item.className ? `settings-kv-row ${item.className}` : 'settings-kv-row'} key={index}>
+                    <dt>{item.label}</dt>
+                    <dd className={item.mono ? 'settings-kv-mono' : undefined}>{item.value}</dd>
+                </div>
+            ))}
+        </dl>
+    );
+}
+
+export function SettingsActions({
+    children,
+    status,
+}: {
+    children: ReactNode;
+    status?: ReactNode;
+}) {
+    return (
+        <div className="settings-card-actions">
+            {status ? <div className="settings-card-actions-status">{status}</div> : null}
+            <div className="settings-card-actions-buttons">{children}</div>
+        </div>
+    );
+}
+
+export function SettingsToolbar({ children }: { children: ReactNode }) {
+    return <div className="settings-card-toolbar">{children}</div>;
+}
+
+export function SettingsNote({
+    children,
+    tone = 'muted',
+    role,
+}: {
+    children: ReactNode;
+    tone?: 'muted' | 'warn' | 'error';
+    role?: 'status' | 'alert';
+}) {
+    return (
+        <p className={`settings-card-note settings-card-note-${tone}`} role={role}>
+            {children}
+        </p>
+    );
+}