cli-jaw 2.1.1 → 2.1.2

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

@@ -1,6 +1,7 @@
 import { api } from '../api.js';
 import { getVirtualScroll } from '../virtual-scroll.js';
 import { escapeHtml } from '../render.js';
+import { bootMessageQuery } from './message-history.js';
 
 const IS_IFRAME = window.parent !== window;
 
@@ -94,7 +95,10 @@ export function closeChatSearch(): void {
 
 function buildMessageIndexMap(): void {
     messageIdToVsIndex = new Map();
-    api<{ id: number }[]>('/api/messages').then(msgs => {
+    // Must mirror the rendered boot window so id→virtual-scroll index stays
+    // aligned with what loadMessages() actually rendered (embedded: recent-N;
+    // standalone: full history).
+    api<{ id: number }[]>(`/api/messages${bootMessageQuery()}`).then(msgs => {
         if (!msgs) return;
         messageIdToVsIndex = new Map();
         msgs.forEach((m, i) => messageIdToVsIndex!.set(m.id, i));

package/public/js/features/employees.ts

@@ -53,8 +53,13 @@ function normalizeEmployeeModel(_cli: string, model?: string): string {
 }
 
 function getDefaultEmployeeModel(cli: string, models: string[]): string {
-    if (cli !== 'claude') return 'default';
-    if (models.includes('sonnet')) return 'sonnet';
+    if (cli === 'claude' || cli === 'claude-e') {
+        if (models.includes('claude-opus-4-8')) return 'claude-opus-4-8';
+        if (models.includes('opus')) return 'opus';
+    }
+    if (cli === 'codex' || cli === 'codex-app') {
+        if (models.includes('gpt-5.5')) return 'gpt-5.5';
+    }
     return models[0] || 'default';
 }
 

package/public/js/features/idb-cache.ts

@@ -14,6 +14,10 @@ export function setMessageScope(scope: string): void {
     localStorage.setItem(SCOPE_KEY, currentScope);
 }
 
+export function getMessageScope(): string {
+    return currentScope;
+}
+
 export interface CachedMessage {
     id?: number;
     role: string;

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

@@ -6,7 +6,7 @@ import { bootstrapVirtualHistory, type VirtualHistoryBootstrapDeps } from '../vi
 import { activateWidgets } from '../diagram/iframe-renderer.js';
 import { ICONS } from '../icons.js';
 import { t } from './i18n.js';
-import { cacheMessages, getScopedMessages, setMessageScope } from './idb-cache.js';
+import { cacheMessages, getMessageScope, getScopedMessages, setMessageScope } from './idb-cache.js';
 import { addMessage, addSystemMsg, showEmptyState } from './chat-messages.js';
 import { buildLazyVirtualMessageItem } from './message-item-html.js';
 import { addStep, buildProcessBlockHtml, collapseBlock, createProcessBlock } from './process-block.js';
@@ -19,6 +19,47 @@ export function buildVirtualHistoryItems(msgs: MessageItem[]): VirtualItem[] {
     return msgs.map((m, index) => buildLazyVirtualMessageItem(normalizeMessageToolLog(m), index));
 }
 
+// Only the embedded dashboard preview frame remounts on every instance switch,
+// so it fetches a bounded recent-N window to keep the per-remount payload small
+// (the full all-time history was ~tens of MB). The standalone chat tab loads
+// once and never remounts, so it keeps the full scrollable history — bounding it
+// would silently drop access to older messages (no load-older mechanism exists).
+export const BOOT_MESSAGE_LIMIT = 300;
+
+export function bootMessageQuery(): string {
+    let embedded = true;
+    try { embedded = window.parent !== window; } catch { embedded = true; }
+    return embedded ? `?limit=${BOOT_MESSAGE_LIMIT}` : '';
+}
+
+function normalizeMessageScopePart(value: string | null | undefined): string {
+    return String(value || '').trim() || 'unknown';
+}
+
+export function buildMessageLocationKey(input: { origin?: string; pathname?: string | null }): string {
+    const origin = normalizeMessageScopePart(input.origin);
+    const pathname = normalizeMessageScopePart(input.pathname || '/');
+    return `${origin}${pathname.startsWith('/') ? pathname : `/${pathname}`}`;
+}
+
+export function buildMessageScopeIdentity(input: { locationKey?: string; workingDir?: string | null }): string {
+    return `${normalizeMessageScopePart(input.locationKey)}::${normalizeMessageScopePart(input.workingDir)}`;
+}
+
+function readCurrentMessageLocationKey(): string {
+    if (typeof window === 'undefined') return buildMessageLocationKey({});
+    return buildMessageLocationKey({
+        origin: window.location.origin,
+        pathname: window.location.pathname,
+    });
+}
+
+function readWorkingDirFromScope(scope: string): string | null {
+    if (!scope || scope === 'default') return null;
+    const markerIndex = scope.indexOf('::');
+    return markerIndex >= 0 ? scope.slice(markerIndex + 2) : scope;
+}
+
 export function registerVirtualScrollCallbacks(vs: ReturnType<typeof getVirtualScroll>): void {
     vs.onLazyRender = (targets: HTMLElement[]) => {
         for (const el of targets) {
@@ -89,25 +130,32 @@ function hydrateSmallHistory(messages: MessageItem[]): void {
 export async function loadMessages(): Promise<void> {
     const vs = getVirtualScroll();
     const chatEl = document.getElementById('chatMessages');
+    const previousScope = getMessageScope();
+    const locationKey = readCurrentMessageLocationKey();
+    let workingDir = readWorkingDirFromScope(previousScope);
     try {
         const settings = await api<{ workingDir?: string }>('/api/settings');
-        if (settings?.workingDir) setMessageScope(settings.workingDir);
+        if (settings?.workingDir) workingDir = settings.workingDir;
     } catch { /* localStorage fallback already initialized currentScope */ }
-    const msgs = await api<MessageItem[]>('/api/messages');
+    const nextScope = buildMessageScopeIdentity({ locationKey, workingDir });
+    setMessageScope(nextScope);
+    const scopeChanged = nextScope !== previousScope;
+    const msgs = await api<MessageItem[]>(`/api/messages${bootMessageQuery()}`);
     if (msgs !== null) {
         const safeMsgs = msgs.map(normalizeMessageToolLog);
         const hadRenderedHistory = Boolean(chatEl?.querySelector('.msg')) || vs.active;
-        const savedIndex = vs.active ? vs.firstVisibleIndex() : null;
+        const shouldForceBottom = scopeChanged || !hadRenderedHistory;
+        const savedIndex = !shouldForceBottom && vs.active ? vs.firstVisibleIndex() : null;
         vs.clear();
         if (chatEl) chatEl.innerHTML = '';
         if (safeMsgs.length >= VS_THRESHOLD) {
             bootstrapVirtualHistory(buildVirtualHistoryItems(safeMsgs), makeBootstrapDeps(vs, {
-                forceInitialBottom: !hadRenderedHistory,
-                restoreIndex: hadRenderedHistory ? savedIndex : null,
+                forceInitialBottom: shouldForceBottom,
+                restoreIndex: shouldForceBottom ? null : savedIndex,
             }));
         } else {
             hydrateSmallHistory(safeMsgs);
-            if (!hadRenderedHistory) settleChatBottomAfterInitialLoad();
+            if (shouldForceBottom) settleChatBottomAfterInitialLoad();
         }
         cacheMessages(safeMsgs.map(m => ({
             role: m.role, content: m.content, cli: m.cli ?? null, tool_log: m.tool_log ?? null, timestamp: Date.now(),

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

@@ -11,6 +11,7 @@ import { ICONS } from '../icons.js';
 import { apiJson } from '../api.js';
 import { t } from './i18n.js';
 import { setStatus } from './ui-status.js';
+import { syncOrchestrateSnapshot } from '../ws.js';
 
 export interface PendingItem {
     id: string;
@@ -144,8 +145,13 @@ async function fire(id: string, action: Action): Promise<void> {
     if (action === 'steer') setStatus('running');
     const result = await apiJson<{ pending: number }>(path, method, {});
     if (result == null) {
-        unpaintArmed(id, action);
-        if (action === 'steer') setStatus('idle');
+        // Item may have been processed by processQueue while arm was pending.
+        // Remove from UI regardless — snapshot sync will reconcile.
+        lastItems = lastItems.filter(it => it.id !== id);
+        renderPendingQueue(lastItems);
+        if (action === 'steer') {
+            syncOrchestrateSnapshot('steer-fire-miss').catch(() => {});
+        }
         return;
     }
     lastItems = lastItems.filter(it => it.id !== id);

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

@@ -1,5 +1,9 @@
 import { escapeHtml } from '../render.js';
 import { ICONS } from '../icons.js';
+import {
+    displayShellCommand,
+    displayShellCommandDetail,
+} from '../../../src/shared/shell-command-display.js';
 
 declare global {
     interface Window {
@@ -107,36 +111,47 @@ export function getStoredProcessStepDetail(stepId: string): string {
     return processDetailStore.get(stepId)?.detail || '';
 }
 
+function normalizeProcessStepForDisplay(step: ProcessStep): ProcessStep {
+    if (step.type !== 'tool') return step;
+    return {
+        ...step,
+        label: displayShellCommand(step.label || ''),
+        detail: displayShellCommandDetail(step.detail || ''),
+        detailPreview: step.detailPreview ? displayShellCommandDetail(step.detailPreview) : step.detailPreview,
+    };
+}
+
 export function compactProcessStepForStorage(step: ProcessStep): ProcessStep {
-    const storedDetail = getStoredProcessStepDetail(step.id);
-    const fullDetail = storedDetail || step.detail || '';
+    const displayStep = normalizeProcessStepForDisplay(step);
+    const storedDetail = displayShellCommandDetail(getStoredProcessStepDetail(displayStep.id));
+    const fullDetail = storedDetail || displayStep.detail || '';
     const retained = retainedDetail(fullDetail);
-    const preview = step.detailPreview || previewText(fullDetail, PROCESS_DETAIL_PREVIEW_CHARS);
+    const preview = displayStep.detailPreview || previewText(fullDetail, PROCESS_DETAIL_PREVIEW_CHARS);
     if (fullDetail) {
-        processDetailStore.set(step.id, {
+        processDetailStore.set(displayStep.id, {
             detail: retained.detail,
             originalLength: fullDetail.length,
             truncated: retained.truncated,
         });
     }
-    processStepMetaStore.set(step.id, {
-        id: step.id,
-        type: step.type,
-        icon: step.icon,
-        rawIcon: step.rawIcon,
-        label: step.label,
-        isEmployee: step.isEmployee,
-        stepRef: step.stepRef,
-        traceRunId: step.traceRunId, traceSeq: step.traceSeq, detailAvailable: step.detailAvailable,
-        detailBytes: step.detailBytes, rawRetentionStatus: step.rawRetentionStatus,
-        status: step.status,
-        startTime: step.startTime,
+    processStepMetaStore.set(displayStep.id, {
+        id: displayStep.id,
+        type: displayStep.type,
+        icon: displayStep.icon,
+        rawIcon: displayStep.rawIcon,
+        label: displayStep.label,
+        isEmployee: displayStep.isEmployee,
+        stepRef: displayStep.stepRef,
+        traceRunId: displayStep.traceRunId, traceSeq: displayStep.traceSeq, detailAvailable: displayStep.detailAvailable,
+        detailBytes: displayStep.detailBytes, rawRetentionStatus: displayStep.rawRetentionStatus,
+        status: displayStep.status,
+        startTime: displayStep.startTime,
         preview,
         detailLength: fullDetail.length,
         detailTruncated: retained.truncated,
     });
     return {
-        ...step,
+        ...displayStep,
         detail: preview,
         detailPreview: preview,
         detailLength: fullDetail.length,

package/public/js/features/process-log-adapter.ts

@@ -5,6 +5,10 @@ import {
     sanitizeToolLogForDurableStorage,
     serializeSanitizedToolLog,
 } from '../../../src/shared/tool-log-sanitize.js';
+import {
+    displayShellCommand,
+    displayShellCommandDetail,
+} from '../../../src/shared/shell-command-display.js';
 import type { ProcessStep } from './process-block.js';
 import type { ToolLogEntry } from './tool-ui.js';
 
@@ -28,6 +32,11 @@ function fallbackToolLabel(tool: ToolLogEntry): string {
     return typeof named.name === 'string' && named.name ? named.name : 'tool';
 }
 
+function displayToolLabel(tool: ToolLogEntry): string {
+    const label = fallbackToolLabel(tool);
+    return tool.toolType === 'tool' ? displayShellCommand(label) : label;
+}
+
 export function parseToolLog(toolLog?: string | null): ToolLogEntry[] {
     return parseToolLogBounded(toolLog) as ToolLogEntry[];
 }
@@ -47,10 +56,10 @@ export function toProcessSteps(tools: ToolLogEntry[], runStartedAt?: number): Pr
         id: generateId(),
         icon: tool.icon ? emojiToIcon(tool.icon) : ICONS.tool,
         rawIcon: tool.rawIcon || tool.icon || '',
-        label: fallbackToolLabel(tool),
+        label: displayToolLabel(tool),
         isEmployee: tool.isEmployee === true,
         type: processStepType(tool.toolType),
-        detail: tool.detail || '',
+        detail: tool.toolType === 'tool' ? displayShellCommandDetail(tool.detail || '') : tool.detail || '',
         stepRef: tool.stepRef || '',
         traceRunId: tool.traceRunId || '',
         traceSeq: tool.traceSeq,

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

@@ -0,0 +1,163 @@
+import { escapeHtml } from '../render.js';
+import { providerLabel } from '../provider-icons.js';
+import { t } from './i18n.js';
+import type { QuotaEntry } from './settings-types.js';
+
+type QuotaSetupHint = {
+    title: string;
+    commands: string[];
+    note?: string;
+};
+
+export const QUOTA_HIDDEN_CLIS = new Set(['ai-e', 'codex-app']);
+export const QUOTA_CUSTOM_MSG: Record<string, string> = {
+    claude: 'Currently subscribed, by June with credit',
+};
+
+export 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.',
+    },
+};
+
+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', '');
+}
+
+export 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();
+}
+
+export const ACCOUNT_LABEL_SKIP = new Set([
+    'auth/status only',
+    'google cloud code',
+    'runtime-checked',
+]);
+
+export const PROVIDER_ACCOUNT_TYPES = new Set([
+    'cursor',
+    'antigravity.google',
+    'antigravity',
+    'max',
+    'copilot',
+    'gemini',
+]);
+
+export 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;
+}
+
+export 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 '';
+    const tooltip = escapeHtml(tooltipParts.join('\n'));
+    return `<button type="button" class="help-trigger" style="margin-left:4px" data-cli-help="${tooltip}" aria-label="Setup help">?</button>`;
+}
+
+export 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>
+    `;
+}