cli-jaw 2.2.16 → 2.2.17

package/public/js/features/session-hub.ts

@@ -0,0 +1,334 @@
+import { API_BASE, api, getAuthToken } from '../api.js';
+import { escapeHtml } from '../render/html.js';
+import { getLang, t } from './i18n.js';
+
+export type SessionSource = 'local' | 'slack' | 'telegram' | 'discord';
+
+export interface SessionListItem {
+    id: string;
+    seq: number;
+    label: string | null;
+    message_count: number;
+    source?: SessionSource;
+    remoteKey?: string | null;
+    lastActivityAt?: string | null;
+}
+
+export interface SessionListResponse {
+    sessions: SessionListItem[];
+    active: string;
+}
+
+type SessionViewMode = 'off' | 'hub' | 'session' | 'redirect';
+
+interface SessionViewState {
+    enabled: boolean;
+    mode: SessionViewMode;
+    activeId: string | null;
+    viewed: SessionListItem | null;
+}
+
+const viewState: SessionViewState = {
+    enabled: false,
+    mode: 'off',
+    activeId: null,
+    viewed: null,
+};
+
+let cancelRecordingOnReadonly: (() => void) | null = null;
+let latestList: SessionListResponse | null = null;
+
+const ALLOWED_READONLY_COMMAND = /^\s*(?:\/switch(?:\s|$)|\/sessions(?:\s|$)|\/fork(?:\s|$)|\/\d+(?:\s|$))/i;
+
+function routePath(pathname: string): string {
+    const withoutProxy = API_BASE && pathname.startsWith(API_BASE)
+        ? pathname.slice(API_BASE.length)
+        : pathname;
+    return withoutProxy || '/';
+}
+
+function parsedSeq(pathname: string): number | null {
+    const match = routePath(pathname).match(/^\/(\d+)\/?$/);
+    return match ? Number(match[1]) : null;
+}
+
+function navigationFieldsPresent(response: SessionListResponse): boolean {
+    return response.sessions.some(session => Object.prototype.hasOwnProperty.call(session, 'source'));
+}
+
+export function configureSessionView(response: SessionListResponse, pathname = window.location.pathname): SessionViewMode {
+    latestList = response;
+    if (!navigationFieldsPresent(response)) {
+        Object.assign(viewState, { enabled: false, mode: 'off', activeId: null, viewed: null });
+        return 'off';
+    }
+
+    const path = routePath(pathname);
+    if (path === '/' || path === '') {
+        Object.assign(viewState, { enabled: true, mode: 'hub', activeId: response.active, viewed: null });
+        return 'hub';
+    }
+
+    const seq = parsedSeq(pathname);
+    const viewed = seq === null ? null : response.sessions.find(session => session.seq === seq) || null;
+    if (!viewed) {
+        Object.assign(viewState, { enabled: true, mode: 'redirect', activeId: response.active, viewed: null });
+        return 'redirect';
+    }
+
+    Object.assign(viewState, { enabled: true, mode: 'session', activeId: response.active, viewed });
+    if (!canSendFromCurrentView()) cancelRecordingOnReadonly?.();
+    return 'session';
+}
+
+export function canSendFromCurrentView(commandText = ''): boolean {
+    // Fail CLOSED on numeric routes before initialization. Write listeners are
+    // installed at module load (main.ts:120) but initializeSessionView() only
+    // runs later in bootstrap, so an early click on /:seq would otherwise pass
+    // the guard and write to the GLOBAL active session — the exact
+    // cross-session write this guard exists to prevent.
+    if (!viewState.enabled) {
+        if (parsedSeq(window.location.pathname) === null) return true;
+        return commandText ? ALLOWED_READONLY_COMMAND.test(commandText) : false;
+    }
+    if (commandText && ALLOWED_READONLY_COMMAND.test(commandText)) return true;
+    return viewState.mode === 'session'
+        && viewState.viewed?.id === viewState.activeId
+        && viewState.viewed.remoteKey === null;
+}
+
+export function currentSessionId(): string | null {
+    return viewState.enabled && viewState.mode === 'session' ? viewState.viewed?.id || null : null;
+}
+
+// Mirrors scopeForChatSession() on the server (src/orchestrator/scope.ts). A tab on the
+// hub or on a pre-navigation build returns null, which means an unfiltered connection
+// that receives everything — the behaviour before per-tab scoping existed.
+//
+// Remotely bound sessions run under their remote key, so a tab viewing one must
+// subscribe to that key rather than a local scope it would never see events on.
+export function currentEventScope(): string | null {
+    if (!viewState.enabled || viewState.mode !== 'session') return null;
+    const viewed = viewState.viewed;
+    if (!viewed) return null;
+    if (viewed.id === 'default') return 'default';
+    if (viewed.remoteKey) return viewed.remoteKey;
+    return `local:${viewed.id}`;
+}
+
+export function withCurrentSessionQuery(path: string): string {
+    const sessionId = currentSessionId();
+    if (!sessionId) return path;
+    if (path.startsWith('?')) {
+        const params = new URLSearchParams(path.slice(1));
+        params.set('session', sessionId);
+        return `?${params.toString()}`;
+    }
+    const url = new URL(path, 'http://session.local');
+    url.searchParams.set('session', sessionId);
+    return `${url.pathname}${url.search}${url.hash}`;
+}
+
+// Writes carry the session id, not a scope: the scope rule belongs to the server
+// (src/orchestrator/scope.ts). A tab on the hub or a pre-navigation build sends
+// nothing extra and the server keeps using the globally active session, which is
+// exactly the behaviour before per-tab routing existed.
+export function withCurrentSessionBody<T extends Record<string, unknown>>(body: T): T & { sessionId?: string } {
+    const sessionId = currentSessionId();
+    return sessionId ? { ...body, sessionId } : body;
+}
+
+function sessionHref(seq: number): string {
+    return `${API_BASE}/${seq}`;
+}
+
+function hubHref(): string {
+    return API_BASE || '/';
+}
+
+function displayLabel(session: SessionListItem): string {
+    if (session.seq === 0) return t('sessionHub.defaultSession');
+    return session.label?.trim() || t('sessionHub.sessionLabel', { seq: session.seq });
+}
+
+function formatLastActivity(value: string | null | undefined): string {
+    if (value == null) return t('sessionHub.noActivity');
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return t('sessionHub.noActivity');
+    return new Intl.DateTimeFormat(getLang(), { dateStyle: 'medium', timeStyle: 'short' }).format(date);
+}
+
+function sourceLabel(source: SessionSource | undefined): string {
+    return t(`sessionHub.source.${source || 'local'}`);
+}
+
+function renderSessionCard(session: SessionListItem, activeId: string): string {
+    const remoteBound = session.remoteKey != null;
+    const canDelete = session.id !== 'default' && !remoteBound;
+    const deleteReason = remoteBound ? t('sessionHub.deleteRemoteDisabled') : '';
+    return `<article class="session-card${session.id === activeId ? ' is-active' : ''}" data-session-id="${escapeHtml(session.id)}">
+        <a class="session-card-link" href="${escapeHtml(sessionHref(session.seq))}">
+            <div class="session-card-heading">
+                <span class="session-seq">/${session.seq}</span>
+                <span class="session-source">${escapeHtml(sourceLabel(session.source))}</span>
+            </div>
+            <h2>${escapeHtml(displayLabel(session))}</h2>
+            <dl class="session-card-meta">
+                <div><dt>${escapeHtml(t('sessionHub.messages'))}</dt><dd>${session.message_count}</dd></div>
+                <div><dt>${escapeHtml(t('sessionHub.lastActivity'))}</dt><dd>${escapeHtml(formatLastActivity(session.lastActivityAt))}</dd></div>
+            </dl>
+        </a>
+        ${session.id === 'default' ? '' : (canDelete
+            // A disabled button is not focusable and its title is unreliable on
+            // touch and assistive tech, so the remote-bound reason is rendered as
+            // visible text and wired with aria-describedby instead.
+            ? `<button type="button" class="session-delete" data-delete-session="${escapeHtml(session.id)}">${escapeHtml(t('sessionHub.delete'))}</button>`
+            : `<button type="button" class="session-delete" data-delete-session="${escapeHtml(session.id)}" aria-disabled="true" aria-describedby="delete-reason-${escapeHtml(session.id)}">${escapeHtml(t('sessionHub.delete'))}</button>
+               <p class="session-delete-reason" id="delete-reason-${escapeHtml(session.id)}">${escapeHtml(deleteReason)}</p>`)}
+    </article>`;
+}
+
+function renderHubSkeleton(): void {
+    document.body.classList.add('session-hub-mode');
+    let hub = document.getElementById('sessionHub');
+    if (!hub) {
+        hub = document.createElement('main');
+        hub.id = 'sessionHub';
+        hub.className = 'session-hub';
+        document.body.prepend(hub);
+    }
+    hub.setAttribute('aria-busy', 'true');
+    hub.innerHTML = `<div class="session-hub-shell">
+        <header class="session-hub-header"><div><p class="session-hub-kicker">CLI-JAW</p><h1>${escapeHtml(t('sessionHub.title'))}</h1></div></header>
+        <div class="session-grid session-grid-loading" aria-hidden="true">
+            <div class="session-card-skeleton"><span></span><span></span><span></span></div>
+            <div class="session-card-skeleton"><span></span><span></span><span></span></div>
+        </div>
+    </div>`;
+}
+
+function renderHub(response: SessionListResponse): void {
+    document.body.classList.add('session-hub-mode');
+    let hub = document.getElementById('sessionHub');
+    if (!hub) {
+        hub = document.createElement('main');
+        hub.id = 'sessionHub';
+        hub.className = 'session-hub';
+        document.body.prepend(hub);
+    }
+    hub.removeAttribute('aria-busy');
+    const onlyDefault = response.sessions.length === 1 && response.sessions[0]?.id === 'default';
+    hub.innerHTML = `<div class="session-hub-shell">
+        <header class="session-hub-header">
+            <div><p class="session-hub-kicker">CLI-JAW</p><h1>${escapeHtml(t('sessionHub.title'))}</h1></div>
+            <p>${escapeHtml(t('sessionHub.description'))}</p>
+        </header>
+        ${onlyDefault ? `<section class="session-hub-empty" aria-labelledby="sessionHubEmptyTitle">
+            <h2 id="sessionHubEmptyTitle">${escapeHtml(t('sessionHub.empty.title'))}</h2>
+            <p>${escapeHtml(t('sessionHub.empty.description'))}</p>
+            <a href="${escapeHtml(sessionHref(0))}#settings">${escapeHtml(t('sessionHub.empty.action'))}</a>
+        </section>` : ''}
+        <section class="session-grid" aria-label="${escapeHtml(t('sessionHub.listAria'))}">
+            ${response.sessions.map(session => renderSessionCard(session, response.active)).join('')}
+        </section>
+        <p class="session-hub-error" id="sessionHubError" role="status" aria-live="polite"></p>
+    </div>`;
+    if (!hub.dataset['eventsBound']) {
+        hub.addEventListener('click', handleHubClick);
+        hub.dataset['eventsBound'] = 'true';
+    }
+}
+
+async function handleHubClick(event: Event): Promise<void> {
+    const button = (event.target as HTMLElement | null)?.closest<HTMLButtonElement>('[data-delete-session]');
+    // aria-disabled keeps the control focusable so its reason can be announced,
+    // so activation has to be suppressed here rather than by the DOM.
+    if (!button || button.disabled || button.getAttribute('aria-disabled') === 'true') return;
+    event.preventDefault();
+    const sessionId = button.dataset['deleteSession'];
+    if (!sessionId || !window.confirm(t('sessionHub.deleteConfirm'))) return;
+    button.disabled = true;
+    const token = await getAuthToken();
+    try {
+        const response = await fetch(`${API_BASE}/api/chat-sessions/${encodeURIComponent(sessionId)}`, {
+            method: 'DELETE',
+            headers: token ? { Authorization: `Bearer ${token}` } : {},
+        });
+        if (!response.ok) throw new Error(String(response.status));
+        const refreshed = await api<SessionListResponse>('/api/chat-sessions');
+        if (refreshed) {
+            latestList = refreshed;
+            renderHub(refreshed);
+        }
+    } catch {
+        const error = document.getElementById('sessionHubError');
+        if (error) error.textContent = t('sessionHub.deleteFailed');
+        button.disabled = false;
+    }
+}
+
+function renderSessionViewChrome(): void {
+    const viewed = viewState.viewed;
+    if (!viewed) return;
+    document.title = `${displayLabel(viewed)} · CLI-JAW`;
+    const header = document.querySelector<HTMLElement>('.chat-header > span');
+    if (header) header.insertAdjacentHTML('beforeend', `<span class="session-view-label">/${viewed.seq} · ${escapeHtml(displayLabel(viewed))}</span>`);
+    if (!canSendFromCurrentView()) showReadOnlySwitchAffordance();
+}
+
+export function showReadOnlySwitchAffordance(): void {
+    if (!viewState.enabled || !viewState.viewed) return;
+    let notice = document.getElementById('sessionReadonlyNotice');
+    if (!notice) {
+        notice = document.createElement('div');
+        notice.id = 'sessionReadonlyNotice';
+        notice.className = 'session-readonly-notice';
+        notice.setAttribute('role', 'status');
+        document.querySelector('.chat-input-area')?.before(notice);
+    }
+    const remote = viewState.viewed.remoteKey != null;
+    const command = remote ? '/sessions' : `/switch ${viewState.viewed.seq}`;
+    const actionLabel = remote
+        ? t('sessionReadonly.openSessions')
+        : t('sessionReadonly.switch', { seq: viewState.viewed.seq });
+    notice.innerHTML = `<span>${escapeHtml(t(remote ? 'sessionReadonly.remote' : 'sessionReadonly.message'))}</span>
+        <button type="button">${escapeHtml(actionLabel)}</button>`;
+    notice.querySelector('button')?.addEventListener('click', () => {
+        const input = document.getElementById('chatInput') as HTMLTextAreaElement | null;
+        if (!input) return;
+        input.value = command;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        input.dispatchEvent(new Event('cmd-execute', { bubbles: true }));
+    });
+}
+
+export function handleSessionListBroadcast(message: { deleted?: { id?: unknown; seq?: unknown } }): boolean {
+    if (!viewState.enabled || viewState.mode !== 'session' || !viewState.viewed) return false;
+    const deleted = message.deleted;
+    if (!deleted) return false;
+    if (deleted.id !== viewState.viewed.id && deleted.seq !== viewState.viewed.seq) return false;
+    window.location.assign(hubHref());
+    return true;
+}
+
+export async function initializeSessionView(options: { cancelRecording?: () => void } = {}): Promise<SessionViewMode> {
+    cancelRecordingOnReadonly = options.cancelRecording || null;
+    const response = await api<SessionListResponse>('/api/chat-sessions');
+    if (!response) {
+        if (parsedSeq(window.location.pathname) !== null) {
+            Object.assign(viewState, { enabled: true, mode: 'redirect', activeId: null, viewed: null });
+            window.location.replace(hubHref());
+            return 'redirect';
+        }
+        return 'off';
+    }
+    const mode = configureSessionView(response);
+    if (mode === 'hub') {
+        renderHubSkeleton();
+        const refreshed = await api<SessionListResponse>('/api/chat-sessions');
+        renderHub(refreshed || response);
+    }
+    if (mode === 'session') renderSessionViewChrome();
+    if (mode === 'redirect') window.location.replace(hubHref());
+    return mode;
+}

package/public/js/features/settings-cli-status-render.ts

@@ -12,7 +12,7 @@ type QuotaSetupHint = {
 };
 
 export const QUOTA_HIDDEN_CLIS = new Set(['ai-e', 'codex-app']);
-export const SIDEBAR_HIDDEN_CLIS = new Set(['ai-e', 'claude-e', 'jwc', 'pi', 'codex-app', 'gemini']);
+export const SIDEBAR_HIDDEN_CLIS = new Set(['ai-e', 'claude-e', 'jwc', 'pi', 'gemini']);
 export const QUOTA_CUSTOM_MSG: Record<string, string> = {};
 
 export const QUOTA_SETUP_HINTS: Record<string, QuotaSetupHint> = {

package/public/js/features/settings-cli-status.ts

@@ -5,7 +5,7 @@ import { t } from './i18n.js';
 import { state } from '../state.js';
 import { ICONS } from '../icons.js';
 import { providerIcon, providerLabel } from '../provider-icons.js';
-import { resolveQuotaWindowDisplay, type QuotaEntry } from './settings-types.js';
+import { describeCliProbe, resolveQuotaWindowDisplay, type CliStatusInfo, type QuotaEntry } from './settings-types.js';
 import {
     buildAccountParts,
     normalizeQuotaWindowLabel,
@@ -184,7 +184,7 @@ export function setCliStatusInterval(value: string): void {
 
 function scheduleEmbeddedQuotaRetry(
     seq: number,
-    cliStatus: Record<string, { available: boolean }>,
+    cliStatus: Record<string, CliStatusInfo>,
     cachedQuota: Record<string, QuotaEntry> | null | undefined,
 ): void {
     if (!isEmbeddedPreviewFrame()) return;
@@ -201,7 +201,7 @@ function scheduleEmbeddedQuotaRetry(
 
 async function fetchAndRenderQuota(
     seq: number,
-    cliStatus: Record<string, { available: boolean }>,
+    cliStatus: Record<string, CliStatusInfo>,
     cachedQuota: Record<string, QuotaEntry> | null | undefined,
 ): Promise<boolean> {
     const quota = await api<Record<string, QuotaEntry>>('/api/quota');
@@ -219,7 +219,7 @@ async function fetchAndRenderQuota(
 function scheduleQuotaFetch(
     force: boolean,
     seq: number,
-    cliStatus: Record<string, { available: boolean }>,
+    cliStatus: Record<string, CliStatusInfo>,
     cachedQuota: Record<string, QuotaEntry> | null | undefined,
 ): Promise<boolean> | void {
     const run = () => { void fetchAndRenderQuota(seq, cliStatus, cachedQuota).catch(() => {}); };
@@ -243,7 +243,7 @@ export async function loadCliStatus(force = false): Promise<void> {
             const interval = readCliStatusInterval();
             if (!force && state.cliStatusCache && interval > 0 && (Date.now() - state.cliStatusTs) < interval * 1000) {
                 renderCliStatus({
-                    cliStatus: (state.cliStatusCache as Record<string, unknown>)?.['cliStatus'] as Record<string, { available: boolean }> | null,
+                    cliStatus: (state.cliStatusCache as Record<string, unknown>)?.['cliStatus'] as Record<string, CliStatusInfo> | null,
                     quota: (state.cliStatusCache as Record<string, unknown>)?.['quota'] as Record<string, QuotaEntry> | null,
                 });
                 return;
@@ -252,7 +252,7 @@ export async function loadCliStatus(force = false): Promise<void> {
             const cachedQuota = (state.cliStatusCache as Record<string, unknown> | null)?.['quota'] as Record<string, QuotaEntry> | null | undefined;
             if (el && !cachedQuota) el.innerHTML = '<div style="color:var(--text-dim);font-size:11px">Loading...</div>';
 
-            const cliStatus = await api<Record<string, { available: boolean }>>('/api/cli-status');
+            const cliStatus = await api<Record<string, CliStatusInfo>>('/api/cli-status');
             if (seq !== cliStatusLoadSeq) return;
             if (!cliStatus || typeof cliStatus !== 'object') {
                 if (el) el.innerHTML = '<div style="color:var(--text-dim);font-size:11px">Failed to load CLI status</div>';
@@ -278,7 +278,7 @@ export async function loadCliStatus(force = false): Promise<void> {
     await cliStatusLoadInFlight;
 }
 
-function renderCliStatus(data: { cliStatus: Record<string, { available: boolean }> | null; quota: Record<string, QuotaEntry> | null }): void {
+function renderCliStatus(data: { cliStatus: Record<string, CliStatusInfo> | null; quota: Record<string, QuotaEntry> | null }): void {
     const { cliStatus, quota } = data;
     const el = document.getElementById('cliStatusList');
 
@@ -306,9 +306,14 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
 
     for (const [name, info] of Object.entries(cliStatus)) {
         if (SIDEBAR_HIDDEN_CLIS.has(name)) continue;
-        const q = quota?.[name];
+        const probeDescription = describeCliProbe(info);
+        const checking = probeDescription === 'checking';
+        const capabilityFailed = probeDescription === 'capability-failed';
+        const q = checking ? undefined : quota?.[name];
         let dotClass: string;
-        if (!info.available) {
+        if (checking) {
+            dotClass = 'checking';
+        } else if (!info.available || capabilityFailed) {
             dotClass = 'missing';
         } else if (!q || q.error) {
             dotClass = 'ok';
@@ -330,7 +335,7 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
         }
 
         let authHint = '';
-        if (!info.available || dotClass === 'warn') {
+        if (!checking && (!info.available || dotClass === 'warn')) {
             const hint = AUTH_HINTS[name];
             if (hint) {
                 const isNotInstalled = !info.available;
@@ -398,6 +403,14 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
             ? `<span style="margin-left:auto;font-size:10px;color:var(--text-dim);white-space:nowrap">$${q.billing.usedUsd.toFixed(1)}/$${q.billing.limitUsd}</span>`
             : '';
 
+        const probeLine = checking
+            ? '<div role="status" aria-live="polite" style="font-size:10px;color:var(--text-dim);margin:2px 0 0 16px">상태 확인 중</div>'
+            : capabilityFailed
+                ? `<div role="status" style="font-size:10px;color:var(--error);margin:2px 0 0 16px">설치됨, app-server 사용 불가${info.reason ? ` · ${escapeHtml(info.reason)}` : ''}</div>`
+                : probeDescription === 'stale'
+                    ? '<div role="status" style="font-size:10px;color:var(--text-dim);margin:2px 0 0 16px">이전 상태 표시 중 · 새로 확인 중</div>'
+                    : '';
+
         html += `
             <div class="settings-group" style="margin-bottom:6px;padding:8px 10px">
                 <div class="cli-status-row" style="display:flex;align-items:center">
@@ -406,6 +419,7 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
                     <span class="cli-name" style="font-weight:600">${escapeHtml(providerLabel(name))}${quotaHelpMark}</span>${name === 'copilot' ? `<button id="copilotKeychainBtn" style="font-size:9px;margin-left:6px;padding:1px 5px;background:var(--border);color:var(--text-dim);border:1px solid var(--text-dim);border-radius:3px;cursor:pointer;vertical-align:middle;line-height:1" title="${t('copilot.keychainHint')}">${ICONS.key}</button>` : ''}${billingLabel}
                 </div>
                 ${accountLine}
+                ${probeLine}
                 ${authHint}
                 ${windowsHtml}
             </div>
@@ -416,7 +430,7 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
 
     const allEntries = Object.entries(cliStatus);
     const hasReadyCli = allEntries.some(([name, info]) => {
-        if (!info.available) return false;
+        if (describeCliProbe(info) !== 'ready') return false;
         const q = quota?.[name];
         return !q || q.authenticated !== false;
     });

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

@@ -4,8 +4,8 @@ import type { CliEntry } from '../constants.js';
 import { escapeHtml } from '../render.js';
 import { syncStoredLocale } from '../locale.js';
 import { t } from './i18n.js';
-import { api, apiJson, apiFire } from '../api.js';
-import type { PerCliConfig, SettingsData } from './settings-types.js';
+import { API_BASE, api, apiJson, apiFire, getAuthToken } from '../api.js';
+import { shouldHydrateRuntimeMigrationResponse, type PerCliConfig, type SettingsData } from './settings-types.js';
 import { setCachedPi, syncPiProviderDropdown, syncPiModelDropdown, piDiscoveredModels } from './pi-settings.js';
 import { initSttSettings } from './settings-stt.js';
 import { loadTelegramSettings } from './settings-telegram.js';
@@ -20,6 +20,70 @@ import { loadHeaderGitStatus, refreshHeaderGitStatusFromSettingsChange } from '.
 
 let activeSettingsSave: Promise<void> | null = null;
 
+type MigrationResponse = SettingsData | { ok?: boolean; data?: SettingsData; settings?: SettingsData };
+
+function unwrapMigrationSettings(payload: MigrationResponse | null): SettingsData | null {
+    if (!payload || typeof payload !== 'object') return null;
+    if ('settings' in payload && payload.settings) return payload.settings;
+    if ('data' in payload && payload.data) return payload.data;
+    return payload as SettingsData;
+}
+
+async function resolvePendingRuntimeMigration(snapshot: SettingsData): Promise<SettingsData> {
+    if (snapshot.runtimeDefaultMigration?.state !== 'pending') return snapshot;
+    const action = window.confirm('신규 설치의 기본 런타임이 Codex App으로 변경되었습니다. 지금 Codex App을 사용하시겠습니까?')
+        ? 'accept'
+        : 'keep';
+    try {
+        const token = await getAuthToken();
+        const response = await fetch(`${API_BASE}/api/settings/runtime-default-migration`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                ...(token ? { Authorization: `Bearer ${token}` } : {}),
+            },
+            body: JSON.stringify({ action }),
+        });
+        const payload = await response.json().catch(() => null) as MigrationResponse | null;
+        if (shouldHydrateRuntimeMigrationResponse(response.status)) {
+            return unwrapMigrationSettings(payload) ?? snapshot;
+        }
+        window.alert(`런타임 선택을 저장하지 못했습니다 (${response.status}). 다음 설정 진입 때 다시 안내합니다.`);
+    } catch {
+        window.alert('런타임 선택을 저장하지 못했습니다. 다음 설정 진입 때 다시 안내합니다.');
+    }
+    return snapshot;
+}
+
+async function resolvePendingMultiSessionMigration(snapshot: SettingsData): Promise<SettingsData> {
+    if (snapshot.multiSessionDefaultMigration?.state !== 'pending') return snapshot;
+    // The prompt names both halves because accepting applies both: sessions on, and a
+    // second lane so a second tab does not queue behind the first. Turning it on without
+    // the lane would change what the screen shows and nothing about how it runs.
+    const action = window.confirm(
+        '이제 대화 세션을 여러 개 열 수 있습니다. 켜면 동시 실행도 2로 올라가서, 두 번째 세션이 첫 번째가 끝나기를 기다리지 않습니다. 지금 켤까요?',
+    ) ? 'accept' : 'keep';
+    try {
+        const token = await getAuthToken();
+        const response = await fetch(`${API_BASE}/api/settings/multi-session-default-migration`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                ...(token ? { Authorization: `Bearer ${token}` } : {}),
+            },
+            body: JSON.stringify({ action }),
+        });
+        const payload = await response.json().catch(() => null) as MigrationResponse | null;
+        if (shouldHydrateRuntimeMigrationResponse(response.status)) {
+            return unwrapMigrationSettings(payload) ?? snapshot;
+        }
+        window.alert(`세션 선택을 저장하지 못했습니다 (${response.status}). 다음 설정 진입 때 다시 안내합니다.`);
+    } catch {
+        window.alert('세션 선택을 저장하지 못했습니다. 다음 설정 진입 때 다시 안내합니다.');
+    }
+    return snapshot;
+}
+
 function setHeaderCli(cli: string): void {
     const hdr = document.getElementById('headerCli');
     if (!hdr) return;
@@ -362,8 +426,13 @@ function syncCliProviderControl(settings: SettingsData | null, cli: string): str
 
 export async function loadSettings(): Promise<void> {
     await loadCliRegistry();
-    const s = await api<SettingsData>('/api/settings');
+    let s = await api<SettingsData>('/api/settings');
     if (!s) return;
+    s = await resolvePendingRuntimeMigration(s);
+    // Runtime first, then sessions: which CLI runs is the earlier decision, and a v1
+    // install has both pending at once. The second call takes the snapshot the first
+    // returned — passing the pre-call one would write back over the answer just given.
+    s = await resolvePendingMultiSessionMigration(s);
     syncStoredLocale(s.locale ?? '');
     syncCliOptionSelects(s);
     setCachedPi(s.pi);

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

@@ -46,6 +46,35 @@ export interface QuotaEntry {
 }
 export interface PiProfileView { id: string; label: string; mode: string; endpoint: string; apiKind?: string; apiKeySet?: boolean; apiKeyLast4?: string; model: string; }
 export interface PiSettingsView { defaultProfileId: string; profiles: PiProfileView[]; discoveredModels?: Record<string, string[]>; }
+export interface RuntimeDefaultMigration {
+    id: 'codex-app-default-v2';
+    state: 'pending' | 'accepted' | 'kept' | 'already-codex-app';
+    fromCli: string;
+    toCli: 'codex-app';
+}
+export interface MultiSessionDefaultMigration {
+    id: 'multi-session-default-v3';
+    state: 'pending' | 'accepted' | 'kept' | 'already-enabled';
+}
+export interface CliStatusInfo {
+    available: boolean | null;
+    binaryInstalled: boolean | null;
+    capabilityReady: boolean | null;
+    authenticated: boolean | null;
+    path: string | null;
+    source: string;
+    probeState: 'checking' | 'fresh' | 'stale';
+    reason?: string;
+}
+export function describeCliProbe(info: CliStatusInfo): 'checking' | 'capability-failed' | 'stale' | 'ready' | 'unavailable' {
+    if (info.probeState === 'checking') return 'checking';
+    if (info.binaryInstalled === true && info.capabilityReady === false) return 'capability-failed';
+    if (info.probeState === 'stale') return 'stale';
+    return info.available === true && info.capabilityReady !== false ? 'ready' : 'unavailable';
+}
+export function shouldHydrateRuntimeMigrationResponse(status: number): boolean {
+    return status >= 200 && status < 300 || status === 409;
+}
 export interface SettingsData {
     cli: string; workingDir: string; permissions: string; locale?: string; showReasoning?: boolean;
     perCli?: Record<string, PerCliConfig>;
@@ -59,4 +88,7 @@ export interface SettingsData {
     projectDirs?: string[] | null;
     stt?: { engine?: string; geminiKeySet?: boolean; geminiKeyLast4?: string; geminiModel?: string; whisperModel?: string; openaiKeySet?: boolean; openaiKeyLast4?: string };
     pi?: PiSettingsView;
+    settingsSchemaVersion?: number;
+    runtimeDefaultMigration?: RuntimeDefaultMigration | null;
+    multiSessionDefaultMigration?: MultiSessionDefaultMigration | null;
 }

package/public/js/features/ui-status.ts

@@ -3,6 +3,7 @@ import { api } from '../api.js';
 import { ICONS } from '../icons.js';
 import { t } from './i18n.js';
 import { showSkeleton, removeSkeleton } from './chat-messages.js';
+import { withCurrentSessionQuery } from './session-hub.js';
 
 export function setStatus(s: string): void {
     const badge = document.getElementById('statusBadge');
@@ -47,7 +48,7 @@ export function updateStatMsgs(count: number): void {
 }
 
 export async function loadStats(): Promise<void> {
-    const result = await api<{ count: number }>('/api/messages/count');
+    const result = await api<{ count: number }>(withCurrentSessionQuery('/api/messages/count'));
     if (!result) return;
     updateStatMsgs(result.count);
 }

package/public/js/main.ts

@@ -95,6 +95,8 @@ import { initAttentionBadge } from './features/attention-badge.js';
 import { initHelpDialog } from './features/help-dialog.js';
 import { initChatSearch, toggleChatSearch, closeChatSearch } from './features/chat-search.js';
 import { initMediaLightbox } from './features/media-lightbox.js';
+import { currentEventScope, initializeSessionView } from './features/session-hub.js';
+import { setEventChannelScopeProvider } from './event-channel.js';
 
 function isLocalPreviewOrigin(origin: string): boolean {
     if (origin === window.location.origin) return true;
@@ -559,9 +561,23 @@ async function bootstrap(): Promise<void> {
     ensurePreviewCapabilityListener();
     ensurePreviewInsertTextListener();
     await initI18n();
+    const sessionMode = await initializeSessionView({ cancelRecording });
+    if (sessionMode === 'redirect') return;
+    // Must run before either connect() below: the channel reads this on every
+    // (re)connect, and an unregistered provider opens an unfiltered stream that
+    // would carry other sessions' output into this tab.
+    setEventChannelScopeProvider(currentEventScope);
     const langSel = document.getElementById('langSelect') as HTMLSelectElement | null;
     if (langSel) langSel.value = getLang();
     initHelpDialog();
+    if (sessionMode === 'hub') {
+        // The hub has no chat surface, but the badge/help listeners are part of
+        // the documented boot order (AB-003 / HD-002): they must be installed
+        // before connect() regardless of which view is rendering.
+        initAttentionBadge();
+        connect();
+        return;
+    }
     initChatSearch();
     initMediaLightbox();
     document.getElementById('chatSearchTrigger')?.addEventListener('click', toggleChatSearch);
@@ -590,6 +606,10 @@ async function bootstrap(): Promise<void> {
     await initAvatar();
     initMsgCopy();
     initGestures();
+    if (window.location.hash === '#settings') {
+        const settingsTab = document.getElementById('tabBtnSettings');
+        if (settingsTab) switchTab('settings', settingsTab);
+    }
     try { sessionStorage.removeItem(STALE_BUNDLE_RELOAD_KEY); } catch {}
 
     // Phase 127-F2: prewarm Mermaid at idle so first diagram renders fast.