cli-jaw 2.0.10 → 2.0.16

package/public/js/features/memory.ts

@@ -4,6 +4,7 @@ import { api, apiJson } from '../api.js';
 import { ICONS } from '../icons.js';
 import { t } from '../locale.js';
 import { t as i18n } from './i18n.js';
+import { copyText } from './copy-text.js';
 
 interface MemoryFile {
     name: string;
@@ -212,7 +213,7 @@ function renderBasicFiles(files: MemoryFile[]) {
                 <span style="font-size:12px;font-family:monospace">${escapeHtml(f.name)}</span>
                 <span style="font-size:10px;color:var(--accent);margin-left:6px">${f.entries} entries</span>
             </div>
-            <button data-mem-delete="${escapeHtml(f.name)}" style="background:none;border:none;color:#f55;cursor:pointer;font-size:14px">${ICONS.trash}</button>
+            <button data-mem-delete="${escapeHtml(f.name)}" style="background:none;border:none;color:var(--error);cursor:pointer;font-size:14px">${ICONS.trash}</button>
         </div>
     `).join('');
 }
@@ -394,9 +395,7 @@ export async function reindexAdvancedMemory(): Promise<void> {
 export function openCorruptedFolder(): void {
     const text = $('advStorageRoot')?.textContent || '';
     const path = text ? `${text}/corrupted` : 'JAW_HOME/memory/structured/corrupted';
-    if (navigator.clipboard?.writeText) {
-        navigator.clipboard.writeText(path).catch(() => { });
-    }
+    void copyText(path);
     alert(`Corrupted folder path copied/shown:\n${path}`);
 }
 

package/public/js/features/message-actions.ts

@@ -3,6 +3,7 @@ import { escapeHtml } from '../render.js';
 import { ICONS } from '../icons.js';
 import { bindToolItemInteractions } from './tool-ui.js';
 import { bindProcessBlockInteractions } from './process-block.js';
+import { copyText } from './copy-text.js';
 
 type MessageActionSource = {
     role: string;
@@ -72,8 +73,8 @@ function setCopied(btn: HTMLElement): void {
 async function copyMessage(btn: HTMLElement): Promise<void> {
     const msg = btn.closest('.msg');
     if (!msg) return;
-    await navigator.clipboard.writeText(messageText(msg));
-    setCopied(btn);
+    const result = await copyText(messageText(msg));
+    if (result.ok) setCopied(btn);
 }
 
 async function pinMessage(btn: HTMLElement, options: MessageActionsOptions): Promise<void> {

package/public/js/features/message-history.ts

@@ -1,5 +1,5 @@
 import { api } from '../api.js';
-import { renderMarkdown, linkifyFilePaths } from '../render.js';
+import { renderMarkdown, linkifyFilePathsWithNotesRoot } from '../render.js';
 import { renderMermaidBlocks } from '../render.js';
 import { getVirtualScroll, VS_THRESHOLD, type VirtualItem } from '../virtual-scroll.js';
 import { bootstrapVirtualHistory, type VirtualHistoryBootstrapDeps } from '../virtual-scroll-bootstrap.js';
@@ -43,7 +43,7 @@ export function registerVirtualScrollCallbacks(vs: ReturnType<typeof getVirtualS
     };
     vs.onPostRender = (viewport: HTMLElement) => {
         activateWidgets(viewport);
-        linkifyFilePaths(viewport);
+        void linkifyFilePathsWithNotesRoot(viewport);
         void renderMermaidBlocks(viewport, { immediate: true });
     };
 }

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

@@ -10,6 +10,7 @@ import { escapeHtml } from '../render.js';
 import { ICONS } from '../icons.js';
 import { apiJson } from '../api.js';
 import { t } from './i18n.js';
+import { setStatus } from './ui-status.js';
 
 export interface PendingItem {
     id: string;
@@ -140,13 +141,13 @@ async function fire(id: string, action: Action): Promise<void> {
         ? `/api/orchestrate/queue/${encodeURIComponent(id)}/steer`
         : `/api/orchestrate/queue/${encodeURIComponent(id)}`;
     const method = action === 'steer' ? 'POST' : 'DELETE';
+    if (action === 'steer') setStatus('running');
     const result = await apiJson<{ pending: number }>(path, method, {});
     if (result == null) {
-        // Server already removed the item or call failed — let snapshot resync.
         unpaintArmed(id, action);
+        if (action === 'steer') setStatus('idle');
         return;
     }
-    // Optimistic local removal — queue_update broadcast will resync.
     lastItems = lastItems.filter(it => it.id !== id);
     renderPendingQueue(lastItems);
 }

package/public/js/features/preview-shortcut-bridge.ts

@@ -1,27 +1,42 @@
-// Forward Alt-modified keyboard shortcuts from iframe to parent manager window.
+// Forward manager keyboard shortcuts from iframe to parent manager window.
 // Only active when the page is embedded as an iframe (preview mode).
 
 const FORWARD_KEYS = new Set(['j', 'k', 'i', 'n', 'p']);
 
-export function initPreviewShortcutBridge(): void {
-    if (window.parent === window) return;
-
-    document.addEventListener('keydown', (e) => {
-        if (!e.altKey) return;
-        if (e.ctrlKey || e.metaKey) return;
+function isForwardedManagerShortcut(e: KeyboardEvent): boolean {
+    if (e.altKey && !e.ctrlKey && !e.metaKey) {
         let key = e.key.toLowerCase();
         // macOS Option+letter produces special chars (e.g. ∆ for Alt+J).
         if (key.length !== 1 || !FORWARD_KEYS.has(key)) {
             if (e.code?.startsWith('Key')) key = e.code.slice(3).toLowerCase();
         }
-        if (!FORWARD_KEYS.has(key)) return;
+        return FORWARD_KEYS.has(key);
+    }
+    if (e.ctrlKey && e.shiftKey && !e.metaKey && !e.altKey) {
+        return e.code === 'Backquote';
+    }
+    if (e.metaKey && !e.ctrlKey && !e.altKey) {
+        if (!e.shiftKey && (e.code === 'Backquote' || e.code === 'KeyB' || e.code === 'KeyJ')) return true;
+        if (e.shiftKey && (e.code === 'KeyB' || e.code === 'KeyD' || e.code === 'KeyE')) return true;
+    }
+    return false;
+}
+
+export function initPreviewShortcutBridge(): void {
+    if (window.parent === window) return;
+
+    document.addEventListener('keydown', (e) => {
+        if (!isForwardedManagerShortcut(e)) return;
 
         e.preventDefault();
         try {
             window.parent.postMessage({
                 type: 'jaw-preview-shortcut',
-                key,
-                altKey: true,
+                key: e.key,
+                code: e.code,
+                altKey: e.altKey,
+                ctrlKey: e.ctrlKey,
+                metaKey: e.metaKey,
                 shiftKey: e.shiftKey,
             }, '*');
         } catch { /* cross-origin guard */ }

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

@@ -4,6 +4,7 @@ import { escapeHtml } from '../render.js';
 import { getCliMeta } from '../constants.js';
 import { providerLabel } from '../provider-icons.js';
 import { t } from './i18n.js';
+import { refreshTransportStatusRow } from './transport-status-row.js';
 import type { SettingsData } from './settings-types.js';
 
 export async function setActiveChannel(ch: 'telegram' | 'discord'): Promise<void> {
@@ -12,6 +13,7 @@ export async function setActiveChannel(ch: 'telegram' | 'discord'): Promise<void
     document.getElementById('channelTelegramSettings')?.style.setProperty('display', ch === 'telegram' ? '' : 'none');
     document.getElementById('channelDiscordSettings')?.style.setProperty('display', ch === 'discord' ? '' : 'none');
     await apiJson('/api/settings', 'PUT', { channel: ch });
+    await refreshTransportStatusRow();
 }
 
 export function loadActiveChannel(s: SettingsData): void {
@@ -20,6 +22,7 @@ export function loadActiveChannel(s: SettingsData): void {
     document.getElementById('chDiscord')?.classList.toggle('active', ch === 'discord');
     document.getElementById('channelTelegramSettings')?.style.setProperty('display', ch === 'telegram' ? '' : 'none');
     document.getElementById('channelDiscordSettings')?.style.setProperty('display', ch === 'discord' ? '' : 'none');
+    void refreshTransportStatusRow();
 }
 
 export function loadFallbackOrder(s: SettingsData): void {

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

@@ -9,16 +9,71 @@ import type { QuotaEntry } from './settings-types.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 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.',
+    },
+};
+
 let cliStatusTimer: number | null = null;
+let cliStatusPreviewHooksRegistered = false;
+let cliStatusLoadSeq = 0;
+let cliStatusLoadInFlight: Promise<void> | null = null;
 
 const CLI_STATUS_COLLAPSED_KEY = 'cliStatusCollapsed';
 
+export function isEmbeddedPreviewFrame(): boolean {
+    try {
+        return window.parent !== window;
+    } catch {
+        return true;
+    }
+}
+
 function readCliStatusCollapsed(): boolean {
     try { return localStorage.getItem(CLI_STATUS_COLLAPSED_KEY) === 'true'; }
     catch { return false; }
@@ -91,11 +146,24 @@ export function scheduleCliStatusRefresh(): void {
     if (interval <= 0) return;
 
     cliStatusTimer = window.setInterval(() => {
-        if (document.hidden || !document.hasFocus() || !cliStatusExpanded) return;
+        if (document.hidden || !cliStatusExpanded) return;
+        // Parent dashboard keeps focus while iframe preview is visible.
+        if (!isEmbeddedPreviewFrame() && !document.hasFocus()) return;
         void loadCliStatus(true);
     }, interval * 1000);
 }
 
+export function initCliStatusPreviewHooks(): void {
+    if (cliStatusPreviewHooksRegistered || !isEmbeddedPreviewFrame()) return;
+    cliStatusPreviewHooksRegistered = true;
+    window.addEventListener('message', (event: MessageEvent) => {
+        const data = event.data as { type?: unknown; visible?: unknown } | null;
+        if (data?.type !== 'jaw-preview-visibility' || data.visible !== true) return;
+        if (!cliStatusExpanded) return;
+        void loadCliStatus(false);
+    });
+}
+
 export function setCliStatusInterval(value: string): void {
     const parsed = Number(value);
     const interval = CLI_STATUS_INTERVAL_VALUES.has(parsed) ? parsed : DEFAULT_CLI_STATUS_INTERVAL_SEC;
@@ -131,26 +199,176 @@ function describeStatusOnlyQuota(cliName: string, q: QuotaEntry): string {
     return cliName === 'opencode' ? 'Auth/status only' : 'Usage data not exposed by this CLI';
 }
 
-export async function loadCliStatus(force = false): Promise<void> {
-    if (!cliStatusExpanded && !force) return;
+function normalizeAccountToken(value: string): string {
+    return value.toLowerCase().replace(/^cursor\s+/i, '').trim();
+}
 
-    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 });
+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 }>,
+    cachedQuota: Record<string, QuotaEntry> | null | undefined,
+): void {
+    if (!isEmbeddedPreviewFrame()) return;
+    void (async () => {
+        await new Promise(resolve => window.setTimeout(resolve, 600));
+        if (seq !== cliStatusLoadSeq) return;
+        const retry = await api<Record<string, QuotaEntry>>('/api/quota');
+        if (seq !== cliStatusLoadSeq || !retry) return;
+        state.cliStatusCache = { cliStatus, quota: retry } as Record<string, unknown>;
+        state.cliStatusTs = Date.now();
+        renderCliStatus({ cliStatus, quota: retry });
+    })();
+}
+
+async function fetchAndRenderQuota(
+    seq: number,
+    cliStatus: Record<string, { available: boolean }>,
+    cachedQuota: Record<string, QuotaEntry> | null | undefined,
+): Promise<void> {
+    const quota = await api<Record<string, QuotaEntry>>('/api/quota');
+    if (seq !== cliStatusLoadSeq) return;
+
+    const resolvedQuota = quota ?? cachedQuota ?? null;
+    state.cliStatusCache = { cliStatus, quota: resolvedQuota } as Record<string, unknown>;
+    if (quota) state.cliStatusTs = Date.now();
+    renderCliStatus({ cliStatus, quota: resolvedQuota });
+
+    if (!quota) scheduleEmbeddedQuotaRetry(seq, cliStatus, cachedQuota);
+}
+
+function scheduleQuotaFetch(
+    force: boolean,
+    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;
     }
+    window.setTimeout(run, QUOTA_LOAD_DEFER_MS);
+}
 
-    const el = document.getElementById('cliStatusList');
-    if (el) el.innerHTML = '<div style="color:var(--text-dim);font-size:11px">Loading...</div>';
+export async function loadCliStatus(force = false): Promise<void> {
+    if (!cliStatusExpanded) return;
+
+    if (cliStatusLoadInFlight) {
+        if (force) await cliStatusLoadInFlight.catch(() => {});
+        else return;
+    }
+
+    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>';
+
+        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 [cliStatus, quota] = await Promise.all([
-        api<Record<string, { available: boolean }>>('/api/cli-status'),
-        api<Record<string, QuotaEntry>>('/api/quota'),
-    ]);
+        renderCliStatus({ cliStatus, quota: cachedQuota ?? null });
 
-    state.cliStatusCache = { cliStatus, quota } as Record<string, unknown>;
-    state.cliStatusTs = Date.now();
-    renderCliStatus({ cliStatus, quota });
+        scheduleQuotaFetch(force, seq, cliStatus, cachedQuota);
+    })().finally(() => {
+        cliStatusLoadInFlight = null;
+    });
+
+    await cliStatusLoadInFlight;
 }
 
 function renderCliStatus(data: { cliStatus: Record<string, { available: boolean }> | null; quota: Record<string, QuotaEntry> | null }): void {
@@ -158,12 +376,13 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
     const el = document.getElementById('cliStatusList');
 
     const AUTH_HINTS: Record<string, { install: string; auth: string }> = {
-        agy: { install: 'curl -fsSL https://antigravity.google/cli/install.sh | bash', auth: 'agy auth is checked by the CLI at run time' },
+        agy: { install: 'curl -fsSL https://antigravity.google/cli/install.sh | bash', auth: 'agy runtime auth, antigravity-usage login, or ~/.gemini oauth for quota' },
         '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' },
+        cursor: { install: 'curl https://cursor.com/install -fsS | bash', auth: 'cursor-agent login, CURSOR_API_KEY, or CURSOR_SESSION_TOKEN for quota' },
         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' },
@@ -191,12 +410,13 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
         }
 
         let accountLine = '';
-        if (q?.account) {
-            const parts = [];
-            if (q.account.email) parts.push(q.account.email);
-            if (q.account.type) parts.push(q.account.type);
-            if (q.account.plan) parts.push(q.account.plan);
-            if (q.account.tier) parts.push(q.account.tier);
+        const showSetupBox = q?.quotaCapable === false
+            && q.authenticated !== false
+            && info.available
+            && !QUOTA_CUSTOM_MSG[name]
+            && !QUOTA_HIDDEN_CLIS.has(name);
+        if (q?.account && !showSetupBox) {
+            const parts = buildAccountParts(name, q);
             if (parts.length) accountLine = `<div style="font-size:10px;color:var(--text-dim);margin:2px 0 4px 16px">${escapeHtml(parts.join(' · '))}</div>`;
         }
 
@@ -206,9 +426,9 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
             if (hint) {
                 const isNotInstalled = !info.available;
                 const title = isNotInstalled ? t('cli.authRequired') : t('cli.notAuthenticated');
-                const borderColor = isNotInstalled ? '#ef4444' : '#fbbf24';
+                const borderColor = isNotInstalled ? 'var(--error)' : 'var(--warning)';
                 authHint = `
-                    <div style="font-size:10px;margin:4px 0 2px 16px;padding:6px 8px;background:var(--bg-dim, #1e1e2e);border-radius:4px;border-left:2px solid ${borderColor}">
+                    <div style="font-size:10px;margin:4px 0 2px 16px;padding:6px 8px;background:var(--surface);border-radius:4px;border-left:2px solid ${borderColor}">
                         <div style="color:${borderColor};margin-bottom:3px">${title}</div>
                         ${isNotInstalled ? `<div style="color:var(--text-dim)"><code style="font-size:10px;background:var(--border);padding:1px 4px;border-radius:2px">${escapeHtml(hint.install)}</code></div>` : ''}
                         <div style="color:var(--text-dim)${isNotInstalled ? ';margin-top:2px' : ''}"><code style="font-size:10px;background:var(--border);padding:1px 4px;border-radius:2px">${escapeHtml(hint.auth)}</code></div>
@@ -223,31 +443,16 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
             // no quota display for this CLI
         } else if (customQuotaMsg && info.available) {
             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="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">
                     ${escapeHtml(customQuotaMsg)}
                 </div>
             `;
-        } else if (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, describeStatusOnlyQuota(name, q)]
-                .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 || providerLabel(name))}</div>
-                    <div style="margin-top:2px">${escapeHtml(detail || 'Auth/status only')}</div>
-                </div>
-            `;
+        } else if (showSetupBox) {
+            windowsHtml = renderQuotaSetupBox(name, q);
         } 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';
+                const barColor = pct > 80 ? 'var(--error)' : pct > 50 ? 'var(--warning)' : 'var(--info)';
                 const shortLabel = normalizeQuotaWindowLabel(name, w.label);
                 let resetStr = '';
                 if (w.resetsAt) {
@@ -275,12 +480,16 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
             windowsHtml = `<div style="font-size:10px;color:var(--text-dim);margin:2px 0 0 16px;opacity:0.7">${ICONS.warning} ${msg}</div>`;
         }
 
+        const quotaHelpMark = q?.quotaCapable && QUOTA_SETUP_HINTS[name]
+            ? renderSetupHelpMark(name, q)
+            : '';
+
         html += `
             <div class="settings-group" style="margin-bottom:6px;padding:8px 10px">
                 <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(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>` : ''}
+                    <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>` : ''}
                 </div>
                 ${accountLine}
                 ${authHint}
@@ -299,7 +508,7 @@ function renderCliStatus(data: { cliStatus: Record<string, { available: boolean
     });
     if (!hasReadyCli && allEntries.length > 0 && el) {
         el.insertAdjacentHTML('afterbegin',
-            `<div style="padding:8px 10px;margin-bottom:8px;background:#fbbf2422;border:1px solid #fbbf24;border-radius:6px;font-size:11px;color:#fbbf24">
+            `<div style="padding:8px 10px;margin-bottom:8px;background:var(--warning-dim);border:1px solid var(--warning);border-radius:6px;font-size:11px;color:var(--warning)">
                 ${ICONS.warning} ${t('cli.noReadyCli')}
             </div>`
         );

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

@@ -487,6 +487,14 @@ export function onCliChange(save = true): void {
         const model = ao.model || pc.model;
         const effort = ao.effort || pc.effort || '';
         if (model && modelSel) {
+            if (cli === 'ai-e') {
+                const savedProvider = s.perCli?.['ai-e']?.provider || 'claude';
+                const currentProvider = getSelectedAiEProvider();
+                if (savedProvider !== currentProvider) {
+                    syncActiveEffortOptions(cli, effort);
+                    return;
+                }
+            }
             const displayModel = normalizeModelForDisplay(cli, model);
             appendCustomOption(modelSel, displayModel);
             modelSel.value = displayModel;

package/public/js/features/settings.ts

@@ -5,6 +5,6 @@ export { setDiscord, setDiscordForwardAll, setDiscordAllowBots, setDiscordMentio
 export { setActiveChannel, loadFallbackOrder, saveFallbackOrder } from './settings-channel.js';
 export { loadMcpServers, syncMcpServers, installMcpGlobal } from './settings-mcp.js';
 export { loadCliStatus, scheduleCliStatusRefresh, setCliStatusInterval } from './settings-cli-status.js';
-export { initCliStatusToggle, isCliStatusExpanded, expandCliStatus } from './settings-cli-status.js';
+export { initCliStatusToggle, initCliStatusPreviewHooks, isCliStatusExpanded, expandCliStatus, isEmbeddedPreviewFrame } from './settings-cli-status.js';
 export { initSttSettings } from './settings-stt.js';
 export { openPromptModal, closePromptModal, savePromptFromModal, openTemplateModal, saveTemplateFromModal, closeTemplateModal, templateGoBack, toggleDevMode } from './settings-templates.js';

package/public/js/features/slash-commands.ts

@@ -4,11 +4,24 @@ import { t } from './i18n.js';
 import { api } from '../api.js';
 import { escapeHtml } from '../render.js';
 
+interface WorkflowCommandMeta {
+    kind: 'workflow';
+    phase: string;
+    risk: 'low' | 'medium' | 'high';
+    output: string;
+    prerequisites?: string[];
+    workflowArgs?: Array<{ name: string; required: boolean; kind: string }>;
+    gatedUntilPhase?: number;
+}
+
 interface SlashCommand {
     name: string;
     desc: string;
-    args?: string;
+    args?: string | null;
     category?: string;
+    aliases?: string[];
+    workflow?: WorkflowCommandMeta | null;
+    capability?: string | null;
 }
 
 let cmdList: SlashCommand[] = [];
@@ -31,6 +44,22 @@ function filterCommands(partial: string): SlashCommand[] {
     return cmdList.filter(c => (`/${c.name}`).startsWith(prefix));
 }
 
+function formatWorkflowArgs(cmd: SlashCommand): string {
+    const args = cmd.workflow?.workflowArgs || [];
+    if (!args.length) return cmd.args || '';
+    return args.map(a => a.required ? `<${a.name}>` : `[${a.name}]`).join(' ');
+}
+
+function renderWorkflowMeta(cmd: SlashCommand): string {
+    const wf = cmd.workflow;
+    if (!wf) return '';
+    return `<span class="cmd-meta">
+        <span class="cmd-chip">${escapeHtml(wf.phase)}</span>
+        <span class="cmd-chip cmd-risk-${escapeHtml(wf.risk)}">${escapeHtml(wf.risk)}</span>
+        <span class="cmd-chip">${escapeHtml(wf.output)}</span>
+    </span>`;
+}
+
 function showDropdown(): void {
     const el = dropdown();
     const inp = input();
@@ -66,6 +95,8 @@ function render(): void {
 
     el.innerHTML = filtered.map((cmd, i) => {
         const selected = i === selectedIdx;
+        const args = formatWorkflowArgs(cmd);
+        const workflowMeta = renderWorkflowMeta(cmd);
         return `<div class="cmd-item${selected ? ' selected' : ''}"
                      role="option"
                      id="cmd-item-${i}"
@@ -73,7 +104,8 @@ function render(): void {
                      data-index="${i}">
             <span class="cmd-name">/${escapeHtml(cmd.name)}</span>
             <span class="cmd-desc">${escapeHtml(cmd.desc)}</span>
-            ${cmd.args ? `<span class="cmd-args">${escapeHtml(cmd.args)}</span>` : ''}
+            ${workflowMeta}
+            ${args ? `<span class="cmd-args">${escapeHtml(args)}</span>` : ''}
         </div>`;
     }).join('');