cli-jaw 2.0.5 → 2.0.6

package/public/js/constants.ts

@@ -5,12 +5,43 @@ export interface CliEntry {
     label: string;
     efforts: string[];
     models: string[];
+    defaultProvider?: string;
+    providers?: string[];
+    modelsByProvider?: Record<string, string[]>;
+    effortsByProvider?: Record<string, string[]>;
     effortNote?: string;
 }
 
 export type CliRegistry = Record<string, CliEntry>;
 
 const FALLBACK_CLI_REGISTRY: CliRegistry = {
+    'ai-e': {
+        label: 'AI-E',
+        defaultProvider: 'claude',
+        providers: ['claude', 'codex', 'gemini', 'grok', 'copilot'],
+        efforts: ['low', 'medium', 'high', 'xhigh', 'max'],
+        models: [
+            'opus', 'sonnet', 'haiku',
+            'gpt-5.4', 'gpt-5.4-mini',
+            'gemini-3-flash-preview',
+            'grok-build',
+            'gpt-5-mini',
+        ],
+        modelsByProvider: {
+            claude: ['opus', 'sonnet', 'haiku'],
+            codex: ['gpt-5.4', 'gpt-5.4-mini'],
+            gemini: ['gemini-3-flash-preview'],
+            grok: ['grok-build'],
+            copilot: ['gpt-5-mini'],
+        },
+        effortsByProvider: {
+            claude: ['low', 'medium', 'high', 'xhigh', 'max'],
+            codex: ['low', 'medium', 'high', 'xhigh'],
+            gemini: [],
+            grok: [],
+            copilot: ['low', 'medium', 'high'],
+        },
+    },
     claude: {
         label: 'Claude',
         efforts: ['low', 'medium', 'high', 'xhigh', 'max'],
@@ -32,16 +63,39 @@ const FALLBACK_CLI_REGISTRY: CliRegistry = {
             'claude-haiku-4-5',
         ],
     },
+    'claude-e': {
+        label: 'Claude E',
+        efforts: ['low', 'medium', 'high', 'xhigh', 'max'],
+        models: [
+            'opus',
+            'sonnet',
+            'haiku',
+            'claude-opus-4-7',
+            'claude-sonnet-4-6',
+            'claude-haiku-4-5',
+        ],
+    },
     codex: {
         label: 'Codex',
         efforts: ['low', 'medium', 'high', 'xhigh'],
         models: ['gpt-5.5', 'gpt-5.4', 'gpt-5.3-codex', 'gpt-5.3-codex-spark', 'gpt-5.2-codex', 'gpt-5.1-codex-max', 'gpt-5.1-codex-mini'],
     },
+    'codex-app': {
+        label: 'Codex App',
+        efforts: ['low', 'medium', 'high', 'xhigh'],
+        models: ['gpt-5.5', 'gpt-5.4', 'gpt-5.4-mini', 'gpt-5.3-codex', 'gpt-5.3-codex-spark'],
+    },
     gemini: {
         label: 'Gemini',
         efforts: [],
         models: ['gemini-3.0-pro-preview', 'gemini-3.1-pro-preview', 'gemini-2.5-pro', 'gemini-3-flash-preview', 'gemini-2.5-flash'],
     },
+    grok: {
+        label: 'Grok',
+        efforts: [],
+        effortNote: 'unsupported by grok-build; do not pass --effort',
+        models: ['grok-build'],
+    },
     opencode: {
         label: 'OpenCode',
         efforts: ['minimal', 'low', 'high', 'max'],
@@ -98,6 +152,22 @@ function normalizeRegistry(input: Record<string, unknown>): CliRegistry {
         if (typeof v['effortNote'] === 'string' && v['effortNote'].trim()) {
             normalized['effortNote'] = v['effortNote'];
         }
+        if (typeof v['defaultProvider'] === 'string') normalized.defaultProvider = v['defaultProvider'];
+        if (Array.isArray(v['providers'])) normalized.providers = [...v['providers']] as string[];
+        if (v['modelsByProvider'] && typeof v['modelsByProvider'] === 'object') {
+            normalized.modelsByProvider = Object.fromEntries(
+                Object.entries(v['modelsByProvider'] as Record<string, unknown>)
+                    .filter((entry): entry is [string, string[]] => Array.isArray(entry[1]))
+                    .map(([provider, models]) => [provider, [...models]])
+            );
+        }
+        if (v['effortsByProvider'] && typeof v['effortsByProvider'] === 'object') {
+            normalized.effortsByProvider = Object.fromEntries(
+                Object.entries(v['effortsByProvider'] as Record<string, unknown>)
+                    .filter((entry): entry is [string, string[]] => Array.isArray(entry[1]))
+                    .map(([provider, efforts]) => [provider, [...efforts]])
+            );
+        }
         out[key] = normalized;
     }
     return out;
@@ -135,6 +205,8 @@ export function getCliMeta(cli: string): CliEntry | null {
     return CLI_REGISTRY[cli] || null;
 }
 
+export const PRIMARY_CLIS: readonly string[] = ['claude', 'codex', 'gemini'];
+
 export interface RolePreset {
     value: string;
     labelKey: string;

package/public/js/diagram/iframe-renderer.ts

@@ -4,6 +4,7 @@
 
 import { ICONS } from '../icons.js';
 import { validateWidgetHtml } from './widget-validator.js';
+import { isChatNearBottom, reconcileChatBottomAfterLayout } from '../features/chat-scroll.js';
 
 // ── Action Button Helpers ──
 function createDiagramCopyBtn(): HTMLButtonElement {
@@ -569,11 +570,17 @@ function throttledResize(source: Window, height: number): void {
   if (resizeTimers.has(source)) return;
   resizeTimers.set(source, window.setTimeout(() => resizeTimers.delete(source), 100));
 
+  const wasNearBottom = isChatNearBottom();
+  let resized = false;
   document.querySelectorAll('iframe').forEach(iframe => {
     if (iframe.contentWindow === source) {
       iframe.style.height = `${Math.min(Math.max(height, 60), 2000)}px`;
+      resized = true;
     }
   });
+  if (resized && wasNearBottom) {
+    requestAnimationFrame(() => reconcileChatBottomAfterLayout(true));
+  }
 }
 
 // ── Theme Broadcast to All Widget iframes ──

package/public/js/features/chat-scroll.ts

@@ -18,12 +18,14 @@ export function canFollowAfterRestore(): boolean {
 export function markFollowingBottom(): void {
     userNearBottom = true;
     scrollIntent = 'following';
+    updateScrollFabVisibility();
 }
 
 function updateScrollIntentFromDistance(dist: number): void {
     userNearBottom = dist < SCROLL_BOTTOM_THRESHOLD;
     scrollIntent = userNearBottom ? 'following' : 'pinnedAway';
     if (scrollIntent === 'pinnedAway') cancelPendingChatRestorePasses();
+    updateScrollFabVisibility();
 }
 
 function cancelPendingChatRestorePasses(): void {
@@ -71,6 +73,7 @@ export function ensureScrollTracking(): void {
         const dist = c.scrollHeight - c.scrollTop - c.clientHeight;
         updateScrollIntentFromDistance(dist);
     }, { passive: true });
+    initScrollFab();
 }
 
 export function isChatNearBottom(): boolean {
@@ -224,3 +227,31 @@ export function scrollToBottom(force = false): void {
         if (c) c.scrollTop = c.scrollHeight;
     });
 }
+
+// ── Scroll-to-Bottom FAB ──
+let fabEl: HTMLButtonElement | null = null;
+let fabVisible = false;
+
+function createScrollFab(): HTMLButtonElement {
+    const btn = document.createElement('button');
+    btn.className = 'scroll-to-bottom-fab';
+    btn.setAttribute('aria-label', 'Scroll to bottom');
+    btn.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 3v10M4 9l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+    btn.addEventListener('click', () => scrollToBottom(true));
+    return btn;
+}
+
+function initScrollFab(): void {
+    const host = document.querySelector('.chat-area') as HTMLElement | null;
+    if (!host || fabEl) return;
+    fabEl = createScrollFab();
+    host.appendChild(fabEl);
+}
+
+function updateScrollFabVisibility(): void {
+    if (!fabEl) return;
+    const shouldShow = scrollIntent === 'pinnedAway';
+    if (shouldShow === fabVisible) return;
+    fabVisible = shouldShow;
+    fabEl.classList.toggle('visible', shouldShow);
+}

package/public/js/features/chat-search.ts

@@ -0,0 +1,223 @@
+import { api } from '../api.js';
+import { getVirtualScroll } from '../virtual-scroll.js';
+import { escapeHtml } from '../render.js';
+
+const IS_IFRAME = window.parent !== window;
+
+interface SearchResult {
+    id: number;
+    role: string;
+    content: string;
+    cli?: string | null;
+    match_field: 'content' | 'tool_log';
+    tool_log?: string | null;
+    created_at: string;
+}
+
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+let lastQuery = '';
+let messageIdToVsIndex: Map<number, number> | null = null;
+
+export function initChatSearch(): void {
+    const input = document.getElementById('chatSearchInput') as HTMLInputElement | null;
+    const closeBtn = document.getElementById('chatSearchClose');
+    const resultsEl = document.getElementById('chatSearchResults');
+    const countEl = document.getElementById('chatSearchCount');
+    if (!input || !closeBtn || !resultsEl || !countEl) return;
+
+    window.addEventListener('message', (e) => {
+        if (e.data?.type === 'jaw-preview-search') toggleChatSearch();
+    });
+
+    input.addEventListener('input', () => {
+        const q = input.value.trim();
+        if (debounceTimer) clearTimeout(debounceTimer);
+        if (!q) {
+            clearResults(resultsEl, countEl);
+            return;
+        }
+        debounceTimer = setTimeout(() => void runSearch(q, resultsEl, countEl), 250);
+    });
+
+    input.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') { closeChatSearch(); return; }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const first = resultsEl.querySelector('.chat-search-result') as HTMLElement | null;
+            first?.click();
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            focusNextResult(resultsEl, 1);
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            focusNextResult(resultsEl, -1);
+        }
+    });
+
+    resultsEl.addEventListener('wheel', (e) => {
+        const el = resultsEl;
+        const atTop = el.scrollTop === 0 && e.deltaY < 0;
+        const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight && e.deltaY > 0;
+        if (!atTop && !atBottom) e.stopPropagation();
+        if (atTop || atBottom) e.preventDefault();
+    }, { passive: false });
+
+    closeBtn.addEventListener('click', closeChatSearch);
+}
+
+export function toggleChatSearch(): void {
+    const wrap = document.getElementById('chatSearch');
+    const input = document.getElementById('chatSearchInput') as HTMLInputElement | null;
+    if (!wrap || !input) return;
+    if (wrap.classList.contains('open')) {
+        closeChatSearch();
+    } else {
+        wrap.classList.add('open');
+        input.focus();
+        buildMessageIndexMap();
+    }
+}
+
+export function closeChatSearch(): void {
+    const wrap = document.getElementById('chatSearch');
+    const input = document.getElementById('chatSearchInput') as HTMLInputElement | null;
+    const resultsEl = document.getElementById('chatSearchResults');
+    const countEl = document.getElementById('chatSearchCount');
+    if (!wrap) return;
+    wrap.classList.remove('open');
+    if (input) input.value = '';
+    if (resultsEl && countEl) clearResults(resultsEl, countEl);
+    lastQuery = '';
+}
+
+function buildMessageIndexMap(): void {
+    messageIdToVsIndex = new Map();
+    api<{ id: number }[]>('/api/messages').then(msgs => {
+        if (!msgs) return;
+        messageIdToVsIndex = new Map();
+        msgs.forEach((m, i) => messageIdToVsIndex!.set(m.id, i));
+    }).catch(() => {});
+}
+
+async function runSearch(q: string, resultsEl: HTMLElement, countEl: HTMLElement): Promise<void> {
+    lastQuery = q;
+    const data = await api<SearchResult[]>(`/api/messages/search?q=${encodeURIComponent(q)}&limit=20`);
+    if (!data || lastQuery !== q) return;
+    countEl.textContent = data.length > 0 ? `${data.length} found` : 'no results';
+    if (data.length === 0) {
+        resultsEl.classList.remove('has-results');
+        resultsEl.innerHTML = '';
+        return;
+    }
+    resultsEl.innerHTML = data.map(r => buildResultHtml(r, q)).join('');
+    resultsEl.classList.add('has-results');
+    resultsEl.querySelectorAll('.chat-search-result').forEach(el => {
+        el.addEventListener('click', () => {
+            const msgId = Number((el as HTMLElement).dataset['msgId']);
+            scrollToMessage(msgId);
+        });
+    });
+}
+
+function buildResultHtml(r: SearchResult, q: string): string {
+    const role = r.role === 'assistant' ? 'agent' : r.role;
+    const roleLabel = role === 'agent' ? (r.cli || 'agent') : 'you';
+    const isToolMatch = r.match_field === 'tool_log';
+    const badge = isToolMatch ? '<span class="chat-search-result-badge">tool</span>' : '';
+    const sourceText = isToolMatch ? extractToolSnippet(r.tool_log, q) : r.content;
+    const snippet = highlightSnippet(sourceText, q);
+    const time = formatTime(r.created_at);
+    return `<div class="chat-search-result" data-msg-id="${r.id}" tabindex="-1">
+        <div class="chat-search-result-meta">
+            <span class="chat-search-result-role ${role}">${escapeHtml(roleLabel)}</span>
+            ${badge}
+            <span>${escapeHtml(time)}</span>
+        </div>
+        <div class="chat-search-result-snippet">${snippet}</div>
+    </div>`;
+}
+
+function extractToolSnippet(toolLog: string | null | undefined, q: string): string {
+    if (!toolLog) return '';
+    try {
+        const entries = JSON.parse(toolLog) as { label?: string; detail?: string }[];
+        const lower = q.toLowerCase();
+        for (const e of entries) {
+            const text = `${e.label || ''} ${e.detail || ''}`;
+            if (text.toLowerCase().includes(lower)) return text;
+        }
+    } catch { /* raw fallback */ }
+    return toolLog.slice(0, 300);
+}
+
+function highlightSnippet(text: string, q: string): string {
+    const lower = text.toLowerCase();
+    const idx = lower.indexOf(q.toLowerCase());
+    if (idx === -1) return escapeHtml(text.slice(0, 120));
+    const start = Math.max(0, idx - 40);
+    const end = Math.min(text.length, idx + q.length + 80);
+    const before = escapeHtml(text.slice(start, idx));
+    const match = escapeHtml(text.slice(idx, idx + q.length));
+    const after = escapeHtml(text.slice(idx + q.length, end));
+    const prefix = start > 0 ? '&hellip;' : '';
+    const suffix = end < text.length ? '&hellip;' : '';
+    return `${prefix}${before}<mark>${match}</mark>${after}${suffix}`;
+}
+
+function scrollToMessage(dbId: number): void {
+    if (!messageIdToVsIndex) return;
+    const vsIndex = messageIdToVsIndex.get(dbId);
+    if (vsIndex == null) return;
+    const vs = getVirtualScroll();
+    vs.scrollToIndex(vsIndex, 'center');
+    requestAnimationFrame(() => {
+        setTimeout(() => {
+            const container = document.getElementById('chatMessages');
+            if (!container) return;
+            container.querySelectorAll('.msg.search-highlight').forEach(
+                el => el.classList.remove('search-highlight'),
+            );
+            const msgs = container.querySelectorAll('.msg');
+            for (const msg of msgs) {
+                const turnIdx = msg.getAttribute('data-turn-index');
+                if (turnIdx != null && Number(turnIdx) === vsIndex) {
+                    msg.classList.add('search-highlight');
+                    break;
+                }
+            }
+        }, 150);
+    });
+}
+
+function focusNextResult(resultsEl: HTMLElement, dir: 1 | -1): void {
+    const items = Array.from(resultsEl.querySelectorAll('.chat-search-result')) as HTMLElement[];
+    if (items.length === 0) return;
+    const active = resultsEl.querySelector('.chat-search-result.active') as HTMLElement | null;
+    let idx = active ? items.indexOf(active) + dir : 0;
+    if (idx < 0) idx = items.length - 1;
+    if (idx >= items.length) idx = 0;
+    items.forEach(el => el.classList.remove('active'));
+    items[idx].classList.add('active');
+    items[idx].scrollIntoView({ block: 'nearest' });
+    items[idx].click();
+}
+
+function clearResults(resultsEl: HTMLElement, countEl: HTMLElement): void {
+    resultsEl.classList.remove('has-results');
+    resultsEl.innerHTML = '';
+    countEl.textContent = '';
+}
+
+function formatTime(iso: string): string {
+    try {
+        const d = new Date(iso);
+        const now = new Date();
+        if (d.toDateString() === now.toDateString()) {
+            return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        }
+        return d.toLocaleDateString([], { month: 'short', day: 'numeric' }) +
+            ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    } catch { return ''; }
+}

package/public/js/features/help-content.ts

@@ -22,6 +22,11 @@ export type HelpTopicId =
     | 'diagrams'
     | 'keyboardShortcuts';
 
+export interface HelpDocLink {
+    url: string;
+    labelKey: string;
+}
+
 export interface HelpTopic {
     titleKey: string;
     introKey: string;
@@ -31,6 +36,7 @@ export interface HelpTopic {
     exampleKeys: string[];
     avoidWhenKeys?: string[];
     relatedKeys?: string[];
+    docLinks?: HelpDocLink[];
 }
 
 export const HELP_TOPICS: Record<HelpTopicId, HelpTopic> = {
@@ -42,8 +48,20 @@ export const HELP_TOPICS: Record<HelpTopicId, HelpTopic> = {
     employees: topic('employees', 3, 3, 2),
     skills: topic('skills', 2, 1, 1),
     activeChannel: topic('activeChannel', 2, 1, 1),
-    telegram: topic('telegram', 2, 1, 2),
-    discord: topic('discord', 2, 1, 2),
+    telegram: {
+        ...topic('telegram', 2, 1, 2, 8),
+        docLinks: [
+            { url: 'https://t.me/BotFather', labelKey: 'help.telegram.link.botfather' },
+            { url: 'https://core.telegram.org/bots/tutorial', labelKey: 'help.telegram.link.docs' },
+        ],
+    },
+    discord: {
+        ...topic('discord', 2, 1, 2, 9),
+        docLinks: [
+            { url: 'https://discord.com/developers/applications', labelKey: 'help.discord.link.portal' },
+            { url: 'https://discord.com/developers/docs/getting-started', labelKey: 'help.discord.link.docs' },
+        ],
+    },
     fallbackOrder: topic('fallbackOrder', 2, 1, 1),
     mcp: topic('mcp', 2, 1, 1),
     memory: topic('memory', 2, 1, 2),

package/public/js/features/help-dialog.ts

@@ -1,5 +1,5 @@
 import { t } from './i18n.js';
-import { HELP_TOPICS, isHelpTopicId, type HelpTopic, type HelpTopicId } from './help-content.js';
+import { HELP_TOPICS, isHelpTopicId, type HelpDocLink, type HelpTopic, type HelpTopicId } from './help-content.js';
 
 let initialized = false;
 let overlay: HTMLDivElement | null = null;
@@ -142,10 +142,11 @@ function renderTopic(topicId: HelpTopicId, topicIds: readonly HelpTopicId[] = [t
 }
 
 function appendTopicSections(parent: HTMLElement, topic: HelpTopic): void {
+    if (topic.docLinks?.length) appendDocLinksSection(parent, topic.docLinks);
     appendTextSection(parent, t('help.section.what'), t(topic.introKey));
     appendTextSection(parent, t('help.section.effect'), t(topic.effectKey), 'help-effect-text');
     appendListSection(parent, t('help.section.useWhen'), topic.useWhenKeys);
-    appendListSection(parent, t('help.section.howTo'), topic.howToKeys);
+    appendHowToList(parent, t('help.section.howTo'), topic.howToKeys);
     appendListSection(parent, t('help.section.example'), topic.exampleKeys, false, 'help-example-list');
     if (topic.avoidWhenKeys?.length) appendListSection(parent, t('help.section.avoidWhen'), topic.avoidWhenKeys);
     if (topic.relatedKeys?.length) appendListSection(parent, t('help.section.related'), topic.relatedKeys, true);
@@ -187,6 +188,28 @@ function normalizeTopicIds(values: readonly string[], fallback: HelpTopicId): He
     return ids;
 }
 
+function appendDocLinksSection(parent: HTMLElement, links: HelpDocLink[]): void {
+    const section = document.createElement('section');
+    section.className = 'help-dialog-section help-doc-links';
+    const nav = document.createElement('nav');
+    nav.className = 'help-doc-links-nav';
+    for (const link of links) {
+        const a = document.createElement('a');
+        a.href = link.url;
+        a.target = '_blank';
+        a.rel = 'noopener noreferrer';
+        a.className = 'help-doc-link';
+        a.textContent = t(link.labelKey);
+        const icon = document.createElement('span');
+        icon.className = 'help-doc-link-icon';
+        icon.textContent = '↗';
+        a.append(icon);
+        nav.append(a);
+    }
+    section.append(nav);
+    parent.append(section);
+}
+
 function appendTextSection(parent: HTMLElement, heading: string, text: string, className?: string): void {
     const section = createSection(heading);
     const p = document.createElement('p');
@@ -223,3 +246,16 @@ function createSection(heading: string): HTMLElement {
     section.append(h3);
     return section;
 }
+
+function appendHowToList(parent: HTMLElement, heading: string, keys: string[]): void {
+    const section = createSection(heading);
+    const list = document.createElement('ol');
+    list.className = 'help-dialog-list help-howto-list';
+    for (const key of keys) {
+        const item = document.createElement('li');
+        item.textContent = t(key);
+        list.append(item);
+    }
+    section.append(list);
+    parent.append(section);
+}

package/public/js/features/pending-queue.ts

@@ -117,6 +117,9 @@ function arm(id: string, action: Action): void {
     const timerId = setTimeout(() => fire(id, action), ARM_DELAY_MS);
     armed.set(key, { id, action, timerId });
     paintArmed(id, action);
+    if (action === 'steer') {
+        apiJson(`/api/orchestrate/queue/${encodeURIComponent(id)}/hold`, 'POST', {}).catch(() => {});
+    }
 }
 
 function cancelArm(id: string, action: Action): void {
@@ -126,6 +129,9 @@ function cancelArm(id: string, action: Action): void {
     clearTimeout(slot.timerId);
     armed.delete(key);
     unpaintArmed(id, action);
+    if (action === 'steer') {
+        apiJson(`/api/orchestrate/queue/${encodeURIComponent(id)}/hold`, 'DELETE', {}).catch(() => {});
+    }
 }
 
 async function fire(id: string, action: Action): Promise<void> {

package/public/js/features/process-block.ts

@@ -165,6 +165,26 @@ export function mergeStoredProcessStepDetail(stepId: string, incomingDetail?: st
     return meta?.preview || previewText(merged, PROCESS_DETAIL_PREVIEW_CHARS);
 }
 
+export function setStoredProcessStepDetail(stepId: string, incomingDetail?: string): string {
+    const incoming = incomingDetail || getStoredProcessStepDetail(stepId);
+    const retained = retainedDetail(incoming);
+    if (incoming) {
+        processDetailStore.set(stepId, {
+            detail: retained.detail,
+            originalLength: incoming.length,
+            truncated: retained.truncated,
+        });
+    }
+    const preview = previewText(incoming, PROCESS_DETAIL_PREVIEW_CHARS);
+    const meta = processStepMetaStore.get(stepId);
+    if (meta) {
+        meta.preview = preview;
+        meta.detailLength = incoming.length;
+        meta.detailTruncated = retained.truncated;
+    }
+    return preview;
+}
+
 function updateStoredStepMeta(step: ProcessStep): void {
     const compact = compactProcessStepForStorage(step);
     processStepMetaStore.set(step.id, {

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

@@ -1,6 +1,8 @@
 // ── Active Channel & Fallback Order ──
 import { apiJson } from '../api.js';
 import { escapeHtml } from '../render.js';
+import { getCliMeta } from '../constants.js';
+import { providerLabel } from '../provider-icons.js';
 import { t } from './i18n.js';
 import type { SettingsData } from './settings-types.js';
 
@@ -31,7 +33,7 @@ export function loadFallbackOrder(s: SettingsData): void {
     for (let i = 0; i < slotCount; i++) {
         const current = active[i] || '';
         const opts = allClis.map(cli =>
-            `<option value="${escapeHtml(cli)}" ${cli === current ? 'selected' : ''}>${escapeHtml(cli)}</option>`
+            `<option value="${escapeHtml(cli)}" ${cli === current ? 'selected' : ''}>${escapeHtml(getCliMeta(cli)?.label || providerLabel(cli))}</option>`
         ).join('');
         html += `
             <div class="settings-row sub-row">

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

@@ -4,7 +4,7 @@ import { escapeHtml } from '../render.js';
 import { t } from './i18n.js';
 import { state } from '../state.js';
 import { ICONS } from '../icons.js';
-import { providerIcon } from '../provider-icons.js';
+import { providerIcon, providerLabel } from '../provider-icons.js';
 import type { QuotaEntry } from './settings-types.js';
 
 const CLI_STATUS_INTERVAL_VALUES = new Set([0, 600, 1800]);
@@ -145,9 +145,13 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
     const el = document.getElementById('cliStatusList');
 
     const AUTH_HINTS: Record<string, { install: string; auth: string }> = {
+        'ai-e': { install: 'Install AI-E helper', auth: 'delegates to selected AI-E provider' },
         claude: { install: 'npm i -g @anthropic-ai/claude-code', auth: 'claude auth' },
+        'claude-e': { install: 'Install claude-e helper', auth: 'claude auth' },
         codex: { install: 'npm i -g @openai/codex', auth: 'codex login' },
+        'codex-app': { install: 'npm i -g @openai/codex', auth: 'codex login' },
         gemini: { install: 'npm i -g @google/gemini-cli', auth: `gemini  (${t('cli.gemini.auth')})` },
+        grok: { install: 'Install Grok CLI', auth: 'grok login --oauth' },
         opencode: { install: 'npm i -g opencode-ai', auth: 'opencode auth' },
         copilot: { install: 'npm i -g copilot', auth: t('cli.copilot.authHint') },
     };
@@ -200,7 +204,24 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
         }
 
         let windowsHtml = '';
-        if (q?.windows?.length) {
+        if (name === 'grok' && q?.quotaCapable === false && q.authenticated !== false && info.available) {
+            const usage = q.sessionUsage;
+            const contextLine = usage?.contextTokensUsed && usage?.contextWindowTokens
+                ? `Session context: ${Math.round(usage.contextTokensUsed).toLocaleString()} / ${Math.round(usage.contextWindowTokens).toLocaleString()} tokens`
+                : usage?.turnCount
+                    ? `Session turns: ${Math.round(usage.turnCount).toLocaleString()}`
+                    : '';
+            const modelLine = usage?.primaryModelId ? `Model: ${usage.primaryModelId}` : '';
+            const detail = [modelLine, contextLine, q.quotaSource ? 'Quota not exposed by Grok CLI' : 'Auth/status only']
+                .filter(Boolean)
+                .join(' · ');
+            windowsHtml = `
+                <div style="font-size:10px;color:var(--text-dim);margin:4px 0 0 16px;padding:5px 7px;background:var(--bg-dim, #1e1e2e);border:1px solid var(--border);border-radius:5px">
+                    <div style="color:var(--text);font-weight:600">${escapeHtml(q.displayTier || 'Grok Heavy')}</div>
+                    <div style="margin-top:2px">${escapeHtml(detail || 'Auth/status only')}</div>
+                </div>
+            `;
+        } else if (q?.windows?.length) {
             windowsHtml = q.windows.map(w => {
                 const pct = Math.round(w.percent);
                 const barColor = pct > 80 ? '#ef4444' : pct > 50 ? '#fbbf24' : '#38bdf8';
@@ -236,7 +257,7 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
                 <div class="cli-status-row">
                     <span class="cli-dot ${dotClass}"></span>
                     <span class="cli-provider-icon" aria-hidden="true">${providerIcon(name) || ''}</span>
-                    <span class="cli-name" style="font-weight:600">${escapeHtml(name)}</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>` : ''}
+                    <span class="cli-name" style="font-weight:600">${escapeHtml(providerLabel(name))}</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>` : ''}
                 </div>
                 ${accountLine}
                 ${authHint}