cli-jaw 2.1.1 → 2.1.2

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

@@ -6,63 +6,31 @@ import { state } from '../state.js';
 import { ICONS } from '../icons.js';
 import { providerIcon, providerLabel } from '../provider-icons.js';
 import type { QuotaEntry } from './settings-types.js';
+import {
+    buildAccountParts,
+    normalizeQuotaWindowLabel,
+    QUOTA_CUSTOM_MSG,
+    QUOTA_HIDDEN_CLIS,
+    QUOTA_SETUP_HINTS,
+    renderQuotaSetupBox,
+    renderSetupHelpMark,
+} from './settings-cli-status-render.js';
+
+export { normalizeQuotaWindowLabel } from './settings-cli-status-render.js';
 
 const CLI_STATUS_INTERVAL_VALUES = new Set([0, 600, 1800]);
 const DEFAULT_CLI_STATUS_INTERVAL_SEC = 0;
 /** Defer heavy /api/quota so chat/history APIs win on initial page load. */
 const QUOTA_LOAD_DEFER_MS = 2000;
+const CLI_STATUS_REFRESH_DONE_CLEAR_MS = 4000;
 
-const QUOTA_HIDDEN_CLIS = new Set(['ai-e', 'codex-app']);
-const QUOTA_CUSTOM_MSG: Record<string, string> = {
-    claude: 'Currently subscribed, by June with credit',
-};
-
-type QuotaSetupHint = {
-    title: string;
-    commands: string[];
-    note?: string;
-};
-
-/** Actionable setup when plan quota is not wired yet (quotaCapable=false). */
-const QUOTA_SETUP_HINTS: Record<string, QuotaSetupHint> = {
-    cursor: {
-        title: 'Enable quota bars (dashboard session)',
-        commands: [
-            'cursor-agent login',
-            'export CURSOR_SESSION_TOKEN="<WorkosCursorSessionToken from cursor.com DevTools>"',
-            'echo "$CURSOR_SESSION_TOKEN" > ~/.cli-jaw/quota/cursor-session-token && chmod 600 ~/.cli-jaw/quota/cursor-session-token',
-        ],
-    },
-    agy: {
-        title: 'Enable Gem / Cla quota bars',
-        commands: [
-            'npx antigravity-usage login',
-            'npx antigravity-usage --json',
-        ],
-    },
-    grok: {
-        title: 'Grok Build auth (plan quota not in grok CLI)',
-        commands: [
-            'grok login --oauth',
-            'grok models   # verify auth',
-        ],
-        note: 'Subscription remaining quota: xAI console only. No official grok quota subcommand.',
-    },
-    opencode: {
-        title: 'OpenCode auth + optional plan quota plugin',
-        commands: [
-            'opencode auth login',
-            'opencode plugin add @slkiser/opencode-quota',
-            'npx @slkiser/opencode-quota show',
-        ],
-        note: 'Built-in opencode stats shows session tokens/cost, not subscription limits. opencode-go/* models use the same CLI.',
-    },
-};
+type CliStatusRefreshFeedback = 'idle' | 'refreshing' | 'success' | 'error';
 
 let cliStatusTimer: number | null = null;
 let cliStatusPreviewHooksRegistered = false;
 let cliStatusLoadSeq = 0;
 let cliStatusLoadInFlight: Promise<void> | null = null;
+let cliStatusRefreshFeedbackTimer: number | null = null;
 
 const CLI_STATUS_COLLAPSED_KEY = 'cliStatusCollapsed';
 
@@ -84,6 +52,47 @@ function saveCliStatusCollapsed(collapsed: boolean): void {
     catch { /* ignore */ }
 }
 
+function formatCliStatusRefreshTime(date: Date): string {
+    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
+}
+
+function clearCliStatusRefreshFeedbackTimer(): void {
+    if (cliStatusRefreshFeedbackTimer == null) return;
+    window.clearTimeout(cliStatusRefreshFeedbackTimer);
+    cliStatusRefreshFeedbackTimer = null;
+}
+
+function setCliStatusRefreshFeedback(kind: CliStatusRefreshFeedback, message = ''): void {
+    clearCliStatusRefreshFeedbackTimer();
+
+    const button = document.getElementById('cliStatusRefreshBtn') as HTMLButtonElement | null;
+    const status = document.getElementById('cliStatusRefreshState');
+    const label = button?.querySelector<HTMLElement>('.cli-refresh-label');
+
+    if (button) {
+        button.classList.remove('is-refreshing', 'is-success', 'is-error');
+        button.disabled = kind === 'refreshing';
+        if (kind === 'idle') button.removeAttribute('aria-busy');
+        else button.setAttribute('aria-busy', kind === 'refreshing' ? 'true' : 'false');
+        if (kind === 'refreshing') button.classList.add('is-refreshing');
+        if (kind === 'success') button.classList.add('is-success');
+        if (kind === 'error') button.classList.add('is-error');
+    }
+
+    if (label) label.textContent = kind === 'refreshing' ? 'Refreshing...' : 'Refresh';
+    if (status) {
+        status.textContent = message;
+        status.dataset['state'] = kind;
+    }
+}
+
+function finishCliStatusRefreshFeedback(kind: Exclude<CliStatusRefreshFeedback, 'idle' | 'refreshing'>, message: string): void {
+    setCliStatusRefreshFeedback(kind, message);
+    cliStatusRefreshFeedbackTimer = window.setTimeout(() => {
+        setCliStatusRefreshFeedback('idle');
+    }, CLI_STATUS_REFRESH_DONE_CLEAR_MS);
+}
+
 let cliStatusExpanded = !readCliStatusCollapsed();
 
 export function isCliStatusExpanded(): boolean {
@@ -172,118 +181,6 @@ export function setCliStatusInterval(value: string): void {
     scheduleCliStatusRefresh();
 }
 
-export function normalizeQuotaWindowLabel(cliName: string, label: string): string {
-    if (cliName === 'gemini') {
-        if (label === 'Pro' || label === 'P') return 'P';
-        if (label === 'Flash' || label === 'F') return 'F';
-        return label;
-    }
-
-    if (cliName === 'copilot') {
-        if (label === 'Premium' || label === 'Prem') return '30d';
-        if (label.includes('plus monthly subscriber quota')) return '30d';
-    }
-
-    return label
-        .replace('-hour', 'h')
-        .replace('-day', 'd')
-        .replace(' Sonnet', '')
-        .replace(' Opus', '');
-}
-
-function describeStatusOnlyQuota(cliName: string, q: QuotaEntry): string {
-    if (q.delegatedProvider) return `Delegates quota/status to ${q.delegatedProvider}`;
-    const match = q.quotaSource?.match(/^not-exposed-by-(.*?)-cli$/);
-    if (match) return `Quota not exposed by ${match[1].toUpperCase()} CLI`;
-    if (q.quotaSource) return q.quotaSource;
-    return cliName === 'opencode' ? 'Auth/status only' : 'Usage data not exposed by this CLI';
-}
-
-function normalizeAccountToken(value: string): string {
-    return value.toLowerCase().replace(/^cursor\s+/i, '').trim();
-}
-
-const ACCOUNT_LABEL_SKIP = new Set([
-    'auth/status only',
-    'google cloud code',
-    'runtime-checked',
-]);
-
-const PROVIDER_ACCOUNT_TYPES = new Set([
-    'cursor',
-    'antigravity.google',
-    'antigravity',
-    'max',
-    'copilot',
-    'gemini',
-]);
-
-function buildAccountParts(_cliName: string, q: QuotaEntry): string[] {
-    const account = q.account;
-    if (!account) return [];
-
-    const parts: string[] = [];
-    if (account.email) parts.push(account.email);
-
-    const seen = new Set(parts.map(normalizeAccountToken));
-    for (const value of [account.plan, account.tier]) {
-        if (!value) continue;
-        const norm = normalizeAccountToken(value);
-        if (!norm || ACCOUNT_LABEL_SKIP.has(norm)) continue;
-        if (PROVIDER_ACCOUNT_TYPES.has(norm)) continue;
-        if (seen.has(norm)) continue;
-        seen.add(norm);
-        parts.push(value);
-        break;
-    }
-
-    return parts;
-}
-
-function renderSetupHelpMark(cliName: string, q: QuotaEntry, extraTooltip: string[] = []): string {
-    const hint = QUOTA_SETUP_HINTS[cliName];
-    const tooltipParts = [
-        ...extraTooltip,
-        ...(hint ? hint.commands : []),
-        ...(hint?.note ? [hint.note] : []),
-    ].filter(Boolean);
-    if (!tooltipParts.length) return '';
-    return `<span style="cursor:help;opacity:0.55;margin-left:4px;font-weight:400" title="${escapeHtml(tooltipParts.join('\n'))}">?</span>`;
-}
-
-function renderQuotaSetupBox(cliName: string, q: QuotaEntry): string {
-    const hint = QUOTA_SETUP_HINTS[cliName];
-    const usage = q.sessionUsage;
-    const extraTooltip: string[] = [];
-    if (usage?.primaryModelId) extraTooltip.push(`Model: ${usage.primaryModelId}`);
-    if (usage?.contextTokensUsed && usage?.contextWindowTokens) {
-        extraTooltip.push(`Session context: ${Math.round(usage.contextTokensUsed).toLocaleString()} / ${Math.round(usage.contextWindowTokens).toLocaleString()} tokens`);
-    } else if (usage?.turnCount) {
-        extraTooltip.push(`Session turns: ${Math.round(usage.turnCount).toLocaleString()}`);
-    }
-    const helpMark = renderSetupHelpMark(cliName, q, extraTooltip);
-
-    if (hint) {
-        const commandLines = hint.commands.map(cmd => `
-            <div style="margin-top:3px"><code style="font-size:10px;background:var(--border);padding:1px 4px;border-radius:2px;word-break:break-all">${escapeHtml(cmd)}</code></div>
-        `).join('');
-        return `
-            <div style="font-size:10px;color:var(--text-dim);margin:4px 0 0 16px;padding:5px 7px;background:var(--surface);border:1px solid var(--border);border-radius:5px">
-                <div style="color:var(--text);font-weight:600">${escapeHtml(hint.title)}${helpMark}</div>
-                ${commandLines}
-                ${hint.note ? `<div style="margin-top:4px;opacity:0.75">${escapeHtml(hint.note)}</div>` : ''}
-            </div>
-        `;
-    }
-
-    return `
-        <div style="font-size:10px;color:var(--text-dim);margin:4px 0 0 16px;padding:5px 7px;background:var(--surface);border:1px solid var(--border);border-radius:5px">
-            <div style="color:var(--text);font-weight:600">${escapeHtml(q.displayTier || providerLabel(cliName))}${helpMark}</div>
-            <div style="margin-top:2px">${escapeHtml(describeStatusOnlyQuota(cliName, q))}</div>
-        </div>
-    `;
-}
-
 function scheduleEmbeddedQuotaRetry(
     seq: number,
     cliStatus: Record<string, { available: boolean }>,
@@ -305,9 +202,9 @@ async function fetchAndRenderQuota(
     seq: number,
     cliStatus: Record<string, { available: boolean }>,
     cachedQuota: Record<string, QuotaEntry> | null | undefined,
-): Promise<void> {
+): Promise<boolean> {
     const quota = await api<Record<string, QuotaEntry>>('/api/quota');
-    if (seq !== cliStatusLoadSeq) return;
+    if (seq !== cliStatusLoadSeq) return false;
 
     const resolvedQuota = quota ?? cachedQuota ?? null;
     state.cliStatusCache = { cliStatus, quota: resolvedQuota } as Record<string, unknown>;
@@ -315,6 +212,7 @@ async function fetchAndRenderQuota(
     renderCliStatus({ cliStatus, quota: resolvedQuota });
 
     if (!quota) scheduleEmbeddedQuotaRetry(seq, cliStatus, cachedQuota);
+    return Boolean(quota);
 }
 
 function scheduleQuotaFetch(
@@ -322,17 +220,15 @@ function scheduleQuotaFetch(
     seq: number,
     cliStatus: Record<string, { available: boolean }>,
     cachedQuota: Record<string, QuotaEntry> | null | undefined,
-): void {
-    const run = () => { void fetchAndRenderQuota(seq, cliStatus, cachedQuota); };
-    if (force) {
-        void fetchAndRenderQuota(seq, cliStatus, cachedQuota);
-        return;
-    }
+): Promise<boolean> | void {
+    const run = () => { void fetchAndRenderQuota(seq, cliStatus, cachedQuota).catch(() => {}); };
+    if (force) return fetchAndRenderQuota(seq, cliStatus, cachedQuota);
     window.setTimeout(run, QUOTA_LOAD_DEFER_MS);
 }
 
 export async function loadCliStatus(force = false): Promise<void> {
     if (!cliStatusExpanded) return;
+    if (force) setCliStatusRefreshFeedback('refreshing', 'Refreshing quota...');
 
     if (cliStatusLoadInFlight) {
         if (force) await cliStatusLoadInFlight.catch(() => {});
@@ -341,29 +237,39 @@ export async function loadCliStatus(force = false): Promise<void> {
 
     cliStatusLoadInFlight = (async () => {
         const seq = ++cliStatusLoadSeq;
-        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,
-                quota: (state.cliStatusCache as Record<string, unknown>)?.['quota'] as Record<string, QuotaEntry> | null,
-            });
-            return;
-        }
-
         const el = document.getElementById('cliStatusList');
-        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>';
+        try {
+            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,
+                    quota: (state.cliStatusCache as Record<string, unknown>)?.['quota'] as Record<string, QuotaEntry> | null,
+                });
+                return;
+            }
 
-        const cliStatus = await api<Record<string, { available: boolean }>>('/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>';
-            return;
-        }
+            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');
+            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>';
+                if (force) finishCliStatusRefreshFeedback('error', 'Refresh failed');
+                return;
+            }
 
-        renderCliStatus({ cliStatus, quota: cachedQuota ?? null });
+            renderCliStatus({ cliStatus, quota: cachedQuota ?? null });
 
-        scheduleQuotaFetch(force, seq, cliStatus, cachedQuota);
+            const quotaUpdated = await scheduleQuotaFetch(force, seq, cliStatus, cachedQuota);
+            if (force && seq === cliStatusLoadSeq) {
+                const verb = quotaUpdated ? 'Updated' : 'Checked';
+                finishCliStatusRefreshFeedback('success', `${verb} ${formatCliStatusRefreshTime(new Date())}`);
+            }
+        } catch {
+            if (el) el.innerHTML = '<div style="color:var(--text-dim);font-size:11px">Failed to load CLI status</div>';
+            if (force) finishCliStatusRefreshFeedback('error', 'Refresh failed');
+        }
     })().finally(() => {
         cliStatusLoadInFlight = null;
     });
@@ -383,6 +289,7 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
         codex: { install: 'npm i -g @openai/codex', auth: 'codex login' },
         'codex-app': { install: 'npm i -g @openai/codex', auth: 'codex login' },
         cursor: { install: 'curl https://cursor.com/install -fsS | bash', auth: 'cursor-agent login, CURSOR_API_KEY, or CURSOR_SESSION_TOKEN for quota' },
+        'kiro-code': { install: 'Install Kiro CLI from https://kiro.dev/docs/cli', auth: 'kiro-cli login' },
         gemini: { install: 'npm i -g @google/gemini-cli', auth: `gemini  (${t('cli.gemini.auth')})` },
         grok: { install: 'curl -fsSL https://x.ai/cli/install.sh | bash', auth: 'grok login --oauth' },
         opencode: { install: 'npm i -g opencode-ai', auth: 'opencode auth' },
@@ -530,4 +437,42 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
             setTimeout(() => { btn.innerHTML = ICONS.key; btn.disabled = false; }, 2000);
         });
     }
+
+    // Bind CLI setup help ? buttons (rendered as data-cli-help)
+    if (el) {
+        el.querySelectorAll<HTMLButtonElement>('[data-cli-help]').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const text = btn.getAttribute('data-cli-help') || '';
+                showCliHelpPopup(text);
+            });
+        });
+    }
+}
+
+function showCliHelpPopup(text: string): void {
+    const existing = document.getElementById('cliHelpOverlay');
+    if (existing) existing.remove();
+
+    const overlay = document.createElement('div');
+    overlay.id = 'cliHelpOverlay';
+    overlay.className = 'mcp-help-overlay';
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
+
+    const inner = document.createElement('div');
+    inner.className = 'mcp-help-inner';
+    const lines = text.split('\n').filter(Boolean);
+    inner.innerHTML = `
+        <h4>CLI Setup</h4>
+        ${lines.map(l => `<p><code>${l.replace(/&/g, '&amp;').replace(/</g, '&lt;')}</code></p>`).join('')}
+        <div style="text-align:right;margin-top:12px">
+            <button type="button" class="btn-save" id="cliHelpClose">OK</button>
+        </div>
+    `;
+    overlay.append(inner);
+    document.body.append(overlay);
+    inner.querySelector('#cliHelpClose')?.addEventListener('click', () => overlay.remove());
+    document.addEventListener('keydown', function esc(e) {
+        if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', esc, true); }
+    }, true);
 }

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

@@ -11,6 +11,7 @@ import { loadDiscordSettings } from './settings-discord.js';
 import { loadActiveChannel, loadFallbackOrder } from './settings-channel.js';
 import { loadMcpServers } from './settings-mcp.js';
 import { providerIcon, providerLabel } from '../provider-icons.js';
+import { postPreviewInvalidate } from '../preview-parent-origin.js';
 
 let activeSettingsSave: Promise<void> | null = null;
 
@@ -336,6 +337,7 @@ export async function updateSettings(): Promise<void> {
             selCli.dataset['prev'] = confirmedCli;
         }
         setHeaderCli(confirmedCli);
+        postPreviewInvalidate(['instances'], 'active-cli-changed');
     })());
 }
 
@@ -518,7 +520,9 @@ export async function saveActiveCliSettings(): Promise<void> {
     if (effortEl && !effortEl.disabled) overrides[cli].effort = effortEl.value || '';
     const patch: Record<string, unknown> = { activeOverrides: overrides };
     if (cli === 'ai-e') patch['perCli'] = { 'ai-e': { provider: getSelectedAiEProvider() } };
-    await apiJson('/api/settings', 'PUT', patch);
+    if (await apiJson('/api/settings', 'PUT', patch)) {
+        postPreviewInvalidate(['instances'], 'active-cli-changed');
+    }
 }
 
 // ── Flush Agent Sidebar ──