cli-jaw 2.0.5 → 2.0.6

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

@@ -1,5 +1,5 @@
 // ── Settings Core ──
-import { MODEL_MAP, loadCliRegistry, getCliKeys, getCliMeta } from '../constants.js';
+import { MODEL_MAP, loadCliRegistry, getCliKeys, getCliMeta, PRIMARY_CLIS } from '../constants.js';
 import { escapeHtml } from '../render.js';
 import { syncStoredLocale } from '../locale.js';
 import { t } from './i18n.js';
@@ -10,7 +10,7 @@ import { loadTelegramSettings } from './settings-telegram.js';
 import { loadDiscordSettings } from './settings-discord.js';
 import { loadActiveChannel, loadFallbackOrder } from './settings-channel.js';
 import { loadMcpServers } from './settings-mcp.js';
-import { providerIcon } from '../provider-icons.js';
+import { providerIcon, providerLabel } from '../provider-icons.js';
 
 let activeSettingsSave: Promise<void> | null = null;
 
@@ -18,7 +18,12 @@ function setHeaderCli(cli: string): void {
     const hdr = document.getElementById('headerCli');
     if (!hdr) return;
     const ico = providerIcon(cli);
-    hdr.innerHTML = ico ? `${ico} ${escapeHtml(cli)}` : escapeHtml(cli);
+    const label = cliDisplayLabel(cli);
+    hdr.innerHTML = ico ? `${ico} ${escapeHtml(label)}` : escapeHtml(label);
+}
+
+function cliDisplayLabel(cli: string): string {
+    return getCliMeta(cli)?.label || providerLabel(cli) || cli;
 }
 
 function trackSettingsSave(promise: Promise<void>): Promise<void> {
@@ -34,20 +39,24 @@ export async function waitForSettingsSaveIdle(): Promise<void> {
     if (pending) await pending;
 }
 
-function toCap(cli: string): string {
-    return cli.charAt(0).toUpperCase() + cli.slice(1);
+function toDomSuffix(cli: string): string {
+    return cli
+        .split(/[^a-zA-Z0-9]+/)
+        .filter(Boolean)
+        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
 }
 
 function getModelSelect(cli: string): HTMLSelectElement | null {
-    return document.getElementById('model' + toCap(cli)) as HTMLSelectElement | null;
+    return document.getElementById('model' + toDomSuffix(cli)) as HTMLSelectElement | null;
 }
 
 function getCustomModelInput(cli: string): HTMLInputElement | null {
-    return document.getElementById('customModel' + toCap(cli)) as HTMLInputElement | null;
+    return document.getElementById('customModel' + toDomSuffix(cli)) as HTMLInputElement | null;
 }
 
 function getEffortSelect(cli: string): HTMLSelectElement | null {
-    return document.getElementById('effort' + toCap(cli)) as HTMLSelectElement | null;
+    return document.getElementById('effort' + toDomSuffix(cli)) as HTMLSelectElement | null;
 }
 
 function setSelectOptions(selectEl: HTMLSelectElement | null, values: string[], { includeCustom = false, includeDefault = false, selected = '' } = {}): void {
@@ -79,10 +88,30 @@ function syncCliOptionSelects(settings: SettingsData | null = null): void {
     const selCli = document.getElementById('selCli') as HTMLSelectElement | null;
     if (selCli) {
         const current = settings?.cli || selCli.value || cliKeys[0] || 'claude';
-        selCli.innerHTML = cliKeys.map(cli => {
+        const isPrimary = (cli: string) => PRIMARY_CLIS.includes(cli);
+        const currentIsSecondary = !isPrimary(current) && cliKeys.includes(current);
+        const wasExpanded = selCli.dataset['expanded'] === '1';
+        const primary = cliKeys.filter(isPrimary);
+        const secondary = cliKeys.filter(c => !isPrimary(c));
+        const showAll = primary.length === 0 || currentIsSecondary || wasExpanded;
+
+        let html = primary.map(cli => {
             const label = getCliMeta(cli)?.label || cli;
             return `<option value="${escapeHtml(cli)}">${escapeHtml(label)}</option>`;
         }).join('');
+
+        if (secondary.length > 0) {
+            if (showAll) {
+                html += '<option disabled>──────</option>';
+                html += secondary.map(cli => {
+                    const label = getCliMeta(cli)?.label || cli;
+                    return `<option value="${escapeHtml(cli)}">${escapeHtml(label)}</option>`;
+                }).join('');
+            } else {
+                html += `<option value="__show_more__">${t('cli.showMore')}</option>`;
+            }
+        }
+        selCli.innerHTML = html;
         if (Array.from(selCli.options).some(o => o.value === current)) selCli.value = current;
     }
 
@@ -90,7 +119,7 @@ function syncCliOptionSelects(settings: SettingsData | null = null): void {
     if (flushCli) {
         const current = settings?.memory?.cli || flushCli.value || '';
         flushCli.innerHTML = '<option value="">(active CLI)</option>' +
-            cliKeys.map(cli => `<option value="${escapeHtml(cli)}">${escapeHtml(cli)}</option>`).join('');
+            cliKeys.map(cli => `<option value="${escapeHtml(cli)}">${escapeHtml(cliDisplayLabel(cli))}</option>`).join('');
         if (Array.from(flushCli.options).some(o => o.value === current)) flushCli.value = current;
     }
 }
@@ -104,11 +133,16 @@ function normalizeModelForDisplay(_cli: string, model: string): string {
 
 function syncPerCliModelAndEffortControls(settings: SettingsData | null = null): void {
     for (const cli of getCliKeys()) {
+        const meta = getCliMeta(cli);
+        const aiEProvider = cli === 'ai-e' ? getSelectedAiEProvider() : '';
         const modelSel = getModelSelect(cli);
         if (modelSel) {
             const raw = settings?.perCli?.[cli]?.model || modelSel.value || '';
             const selected = normalizeModelForDisplay(cli, raw);
-            setSelectOptions(modelSel, MODEL_MAP[cli] || [], { includeCustom: true, selected });
+            const models = cli === 'ai-e'
+                ? (meta?.modelsByProvider?.[aiEProvider] || MODEL_MAP[cli] || [])
+                : (MODEL_MAP[cli] || []);
+            setSelectOptions(modelSel, models, { includeCustom: true, selected });
             if (selected && !Array.from(modelSel.options).some(o => o.value === selected)) {
                 appendCustomOption(modelSel, selected);
                 modelSel.value = selected;
@@ -117,17 +151,19 @@ function syncPerCliModelAndEffortControls(settings: SettingsData | null = null):
 
         const effortSel = getEffortSelect(cli);
         if (effortSel) {
-            const meta = getCliMeta(cli);
-            const options = [''].concat(meta?.efforts || []);
+            const providerEfforts = cli === 'ai-e' && aiEProvider
+                ? (meta?.effortsByProvider?.[aiEProvider] || [])
+                : null;
+            const options = [''].concat(providerEfforts || meta?.efforts || []);
             const selected = settings?.perCli?.[cli]?.effort || effortSel.value || '';
             const unique = [...new Set(options)];
-            const noneLabel = (meta?.efforts?.length === 0 && meta?.effortNote) ? meta.effortNote : '— none';
+            const noneLabel = (unique.length === 1 && !unique[0] && meta?.effortNote) ? meta.effortNote : '— none';
             effortSel.innerHTML = unique.map(v => {
                 if (!v) return `<option value="">${escapeHtml(noneLabel)}</option>`;
                 return `<option value="${escapeHtml(v)}">${escapeHtml(v)}</option>`;
             }).join('');
             if (meta?.effortNote) effortSel.title = meta.effortNote;
-            effortSel.disabled = (meta?.efforts?.length === 0 && !!meta?.effortNote);
+            effortSel.disabled = (unique.length === 1 && !unique[0] && !!meta?.effortNote);
             if (Array.from(effortSel.options).some(o => o.value === selected)) effortSel.value = selected;
         }
     }
@@ -137,13 +173,17 @@ function syncActiveEffortOptions(cli: string, selected = ''): void {
     const selEffort = document.getElementById('selEffort') as HTMLSelectElement | null;
     if (!selEffort) return;
     const meta = getCliMeta(cli);
+    const aiEProvider = getSelectedAiEProvider();
+    const providerEfforts = cli === 'ai-e' && aiEProvider
+        ? (meta?.effortsByProvider?.[aiEProvider] || [])
+        : null;
     if (meta?.effortNote) {
         selEffort.innerHTML = `<option value="">${escapeHtml(meta.effortNote)}</option>`;
         selEffort.title = meta.effortNote;
         selEffort.disabled = true;
         return;
     }
-    const efforts = [''].concat(meta?.efforts || []);
+    const efforts = [''].concat(providerEfforts || meta?.efforts || []);
     const unique = [...new Set(efforts)];
     selEffort.innerHTML = unique.map(v => {
         if (!v) return '<option value="">— none</option>';
@@ -154,24 +194,65 @@ function syncActiveEffortOptions(cli: string, selected = ''): void {
     if (Array.from(selEffort.options).some(o => o.value === selected)) selEffort.value = selected;
 }
 
+function syncAiEProviderOptions(select: HTMLSelectElement | null, current: string, providers: string[]): string {
+    if (!select) return current;
+    select.innerHTML = providers.map(provider => (
+        `<option value="${escapeHtml(provider)}">${escapeHtml(providerLabel(provider) || provider)}</option>`
+    )).join('');
+    if (Array.from(select.options).some(o => o.value === current)) select.value = current;
+    else if (select.options.length > 0) select.value = select.options[0]?.value || current;
+    return select.value || current;
+}
+
+function getSelectedAiEProvider(): string {
+    const select = document.getElementById('selAiEProvider') as HTMLSelectElement | null;
+    const perCliSelect = document.getElementById('providerAiE') as HTMLSelectElement | null;
+    return select?.value || perCliSelect?.value || getCliMeta('ai-e')?.defaultProvider || 'claude';
+}
+
+function getPerCliAiEProvider(): string {
+    const perCliSelect = document.getElementById('providerAiE') as HTMLSelectElement | null;
+    return perCliSelect?.value || getSelectedAiEProvider();
+}
+
+function syncAiEProviderControl(settings: SettingsData | null, cli: string): string {
+    const wrap = document.getElementById('aiEProviderWrap') as HTMLElement | null;
+    const select = document.getElementById('selAiEProvider') as HTMLSelectElement | null;
+    const perCliSelect = document.getElementById('providerAiE') as HTMLSelectElement | null;
+    const meta = getCliMeta('ai-e');
+    if (!meta?.providers?.length) return 'claude';
+    const current = settings?.perCli?.['ai-e']?.provider
+        || perCliSelect?.value
+        || select?.value
+        || meta.defaultProvider
+        || 'claude';
+    const selected = syncAiEProviderOptions(select, current, meta.providers);
+    syncAiEProviderOptions(perCliSelect, selected, meta.providers);
+    if (wrap) wrap.style.display = cli === 'ai-e' ? '' : 'none';
+    return selected;
+}
+
 export async function loadSettings(): Promise<void> {
     await loadCliRegistry();
     const s = await api<SettingsData>('/api/settings');
     if (!s) return;
     syncStoredLocale(s.locale ?? '');
     syncCliOptionSelects(s);
+    syncAiEProviderControl(s, s.cli || '');
     syncPerCliModelAndEffortControls(s);
 
     const selCli = document.getElementById('selCli') as HTMLSelectElement | null;
     if (selCli && Array.from(selCli.options).some(o => o.value === s.cli)) {
         selCli.value = s.cli;
+        selCli.dataset['prev'] = s.cli;
     }
     const cwdEl = document.getElementById('inpCwd');
     if (cwdEl) cwdEl.textContent = s.workingDir;
     const headerEl = document.getElementById('headerCli');
     if (headerEl) {
         const icon = providerIcon(s.cli);
-        headerEl.innerHTML = icon ? `${icon} ${escapeHtml(s.cli)}` : escapeHtml(s.cli);
+        const label = cliDisplayLabel(s.cli);
+        headerEl.innerHTML = icon ? `${icon} ${escapeHtml(label)}` : escapeHtml(label);
     }
     setPerm(s.permissions, false);
 
@@ -245,6 +326,7 @@ export async function updateSettings(): Promise<void> {
         const selCli = document.getElementById('selCli') as HTMLSelectElement | null;
         if (selCli && Array.from(selCli.options).some(o => o.value === confirmedCli)) {
             selCli.value = confirmedCli;
+            selCli.dataset['prev'] = confirmedCli;
         }
         setHeaderCli(confirmedCli);
     })());
@@ -296,6 +378,18 @@ export function applyCustomModel(cli: string, inputEl: HTMLInputElement): void {
     savePerCli();
 }
 
+export function onPerCliAiEProviderChange(): void {
+    const provider = getPerCliAiEProvider();
+    const activeProvider = document.getElementById('selAiEProvider') as HTMLSelectElement | null;
+    if (activeProvider && Array.from(activeProvider.options).some(o => o.value === provider)) {
+        activeProvider.value = provider;
+    }
+    syncPerCliModelAndEffortControls(null);
+    const activeCli = (document.getElementById('selCli') as HTMLSelectElement | null)?.value || '';
+    if (activeCli === 'ai-e') onCliChange(false);
+    savePerCli();
+}
+
 export async function savePerCli(): Promise<void> {
     const perCli: Record<string, PerCliConfig> = {};
     for (const cli of getCliKeys()) {
@@ -306,6 +400,7 @@ export async function savePerCli(): Promise<void> {
             model: getModelValue(cli),
             effort: effortEl ? effortEl.value : '',
         };
+        if (cli === 'ai-e') entry.provider = getPerCliAiEProvider();
         if (cli === 'codex') {
             const onBtn = document.getElementById('codexFastOn');
             entry.fastMode = onBtn?.classList.contains('active') ?? false;
@@ -322,8 +417,23 @@ export async function savePerCli(): Promise<void> {
 }
 
 export function onCliChange(save = true): void {
-    const cli = (document.getElementById('selCli') as HTMLSelectElement)?.value || 'claude';
-    const models = MODEL_MAP[cli] || [];
+    const selCli = document.getElementById('selCli') as HTMLSelectElement | null;
+    if (!selCli) return;
+    if (selCli.value === '__show_more__') {
+        const prev = selCli.dataset['prev'] || getCliKeys()[0] || 'claude';
+        selCli.dataset['expanded'] = '1';
+        syncCliOptionSelects(null);
+        if (Array.from(selCli.options).some(o => o.value === prev)) selCli.value = prev;
+        try { selCli.showPicker(); } catch { /* user-gesture guard */ }
+        return;
+    }
+    selCli.dataset['prev'] = selCli.value;
+    const cli = selCli.value || 'claude';
+    const aiEProvider = syncAiEProviderControl(null, cli);
+    const meta = getCliMeta(cli);
+    const models = cli === 'ai-e'
+        ? (meta?.modelsByProvider?.[aiEProvider] || MODEL_MAP[cli] || [])
+        : (MODEL_MAP[cli] || []);
     const modelSel = document.getElementById('selModel') as HTMLSelectElement | null;
     setSelectOptions(modelSel, models, { includeCustom: true, includeDefault: true });
     setHeaderCli(cli);
@@ -360,6 +470,7 @@ export function onCliChange(save = true): void {
         if (!s) return;
         const ao = s.activeOverrides?.[cli] || {};
         const pc = s.perCli?.[cli] || {};
+        if (cli === 'ai-e') syncAiEProviderControl(s, cli);
         const model = ao.model || pc.model;
         const effort = ao.effort || pc.effort || '';
         if (model && modelSel) {
@@ -384,7 +495,9 @@ export async function saveActiveCliSettings(): Promise<void> {
     const overrides: Record<string, PerCliConfig> = {};
     overrides[cli] = { model };
     if (effortEl && !effortEl.disabled) overrides[cli].effort = effortEl.value || '';
-    await apiJson('/api/settings', 'PUT', { activeOverrides: overrides });
+    const patch: Record<string, unknown> = { activeOverrides: overrides };
+    if (cli === 'ai-e') patch['perCli'] = { 'ai-e': { provider: getSelectedAiEProvider() } };
+    await apiJson('/api/settings', 'PUT', patch);
 }
 
 // ── Flush Agent Sidebar ──
@@ -429,7 +542,7 @@ function updateFlushBadge(): void {
     const model = (document.getElementById('flushModel') as HTMLSelectElement)?.value || '';
     const effectiveCli = cli || (document.getElementById('selCli') as HTMLSelectElement)?.value || '';
     const parts: string[] = [];
-    if (effectiveCli) parts.push(cli ? effectiveCli : `${effectiveCli}*`);
+    if (effectiveCli) parts.push(cli ? cliDisplayLabel(effectiveCli) : `${cliDisplayLabel(effectiveCli)}*`);
     if (model && model !== 'default') parts.push(model);
     badge.textContent = parts.length ? `(${parts.join(' / ')})` : '';
 }

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

@@ -1,6 +1,6 @@
 // ── Settings Type Definitions ──
 
-export interface PerCliConfig { model?: string; effort?: string; fastMode?: boolean; contextWindow?: boolean; contextWindowSize?: number; contextCompactLimit?: number; }
+export interface PerCliConfig { provider?: string; model?: string; effort?: string; fastMode?: boolean; contextWindow?: boolean; contextWindowSize?: number; contextCompactLimit?: number; }
 export interface TelegramConfig { enabled?: boolean; token?: string; allowedChatIds?: number[]; forwardAll?: boolean; mentionOnly?: boolean; }
 export interface DiscordConfig { enabled?: boolean; token?: string; guildId?: string; channelIds?: string[]; forwardAll?: boolean; allowBots?: boolean; mentionOnly?: boolean; }
 export interface QuotaWindow { label: string; percent: number; resetsAt?: string | number | null; modelId?: string; }
@@ -10,6 +10,17 @@ export interface QuotaEntry {
     authenticated?: boolean;
     error?: boolean;
     reason?: string;
+    quotaCapable?: boolean;
+    quotaSource?: string;
+    sessionUsageCapable?: boolean;
+    displayTier?: string;
+    sessionUsage?: {
+        contextTokensUsed?: number | null;
+        contextWindowTokens?: number | null;
+        contextWindowUsage?: number | null;
+        primaryModelId?: string | null;
+        turnCount?: number | null;
+    };
 }
 export interface SettingsData {
     cli: string; workingDir: string; permissions: string; locale?: string; showReasoning?: boolean;

package/public/js/features/settings.ts

@@ -1,5 +1,5 @@
 // settings.ts — barrel re-export (preserves all import paths)
-export { loadSettings, updateSettings, setPerm, getModelValue, handleModelSelect, applyCustomModel, onCliChange, saveActiveCliSettings, savePerCli, onFlushCliChange, loadFlushAgentSidebar } from './settings-core.js';
+export { loadSettings, updateSettings, setPerm, getModelValue, handleModelSelect, applyCustomModel, onPerCliAiEProviderChange, onCliChange, saveActiveCliSettings, savePerCli, onFlushCliChange, loadFlushAgentSidebar } from './settings-core.js';
 export { setTelegram, setForwardAll, setTelegramMentionOnly, saveTelegramSettings } from './settings-telegram.js';
 export { setDiscord, setDiscordForwardAll, setDiscordAllowBots, setDiscordMentionOnly, saveDiscordSettings } from './settings-discord.js';
 export { setActiveChannel, loadFallbackOrder, saveFallbackOrder } from './settings-channel.js';

package/public/js/features/trace-drawer.ts

@@ -1,4 +1,5 @@
 import { api } from '../api.js';
+import { providerLabel } from '../provider-icons.js';
 import { escapeHtml } from '../render.js';
 
 interface TraceSummary {
@@ -61,7 +62,7 @@ function closeTraceDrawer(): void { document.getElementById('traceDrawerOverlay'
 
 function renderSummary(summary: TraceSummary): void {
     const title = document.getElementById('traceDrawerTitle');
-    if (title) title.textContent = `${summary.cli || 'agent'} trace`;
+    if (title) title.textContent = `${summary.cli ? providerLabel(summary.cli) : 'agent'} trace`;
     const meta = document.getElementById('traceDrawerMeta');
     if (!meta) return;
     meta.innerHTML = [