cli-jaw 2.0.1 → 2.0.2

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

@@ -1,33 +1,51 @@
-// ── Process Block ──
-// Collapsible panel showing tool/thinking activity during agent responses.
-
 import { escapeHtml } from '../render.js';
 import { ICONS } from '../icons.js';
-
 export interface ProcessStep {
     id: string;
     type: 'tool' | 'thinking' | 'search' | 'subagent';
     icon: string;
-    rawIcon?: string;
+    rawIcon?: string | undefined;
     label: string;
     detail?: string;
-    stepRef?: string;
+    detailPreview?: string | undefined;
+    detailLength?: number | undefined;
+    detailTruncated?: boolean | undefined;
+    stepRef?: string | undefined;
+    traceRunId?: string | undefined; traceSeq?: number | undefined; detailAvailable?: boolean | undefined; detailBytes?: number | undefined; rawRetentionStatus?: string | undefined;
     status: 'running' | 'done' | 'error';
     startTime: number;
 }
-
 export interface ProcessBlockState {
     element: HTMLElement;
     steps: ProcessStep[];
     collapsed: boolean;
     _durationEl?: HTMLElement | null;
 }
-
-// ── Duration ticker ──
-// Single module-level interval; runs only while a block has running steps.
-// 3s cadence — one textContent write per tick, no DOM queries beyond cached ref.
 let _tickerHandle: ReturnType<typeof setInterval> | null = null;
 let _tickerBlock: ProcessBlockState | null = null;
+const PROCESS_DETAIL_PREVIEW_CHARS = 160;
+const PROCESS_DETAIL_RETAIN_CHARS = 3000;
+const PROCESS_DETAIL_COLLAPSE_CLEAR_CHARS = 1000;
+const PROCESS_BLOCK_MAX_RENDERED_STEPS = 80;
+const PROCESS_BLOCK_HEAD_STEPS = 24;
+const PROCESS_BLOCK_TAIL_STEPS = 24;
+
+export interface StoredProcessStepMeta {
+    id: string;
+    type: ProcessStep['type'];
+    icon: string;
+    rawIcon?: string | undefined;
+    label: string;
+    stepRef?: string | undefined;
+    traceRunId?: string | undefined; traceSeq?: number | undefined; detailAvailable?: boolean | undefined; detailBytes?: number | undefined; rawRetentionStatus?: string | undefined;
+    status: ProcessStep['status'];
+    startTime: number;
+    preview: string;
+    detailLength: number;
+    detailTruncated: boolean;
+}
+const processDetailStore = new Map<string, { detail: string; originalLength: number; truncated: boolean }>();
+const processStepMetaStore = new Map<string, StoredProcessStepMeta>();
 
 function tickDuration(): void {
     const pb = _tickerBlock;
@@ -37,7 +55,6 @@ function tickDuration(): void {
     const elapsed = Math.round((Date.now() - pb.steps[0].startTime) / 1000);
     el.textContent = elapsed > 0 ? `${elapsed}s` : '';
 }
-
 function ensureTicker(pb: ProcessBlockState): void {
     if (_tickerHandle && _tickerBlock === pb) return;
     stopBlockTicker();
@@ -49,7 +66,6 @@ export function stopBlockTicker(): void {
     if (_tickerHandle) { clearInterval(_tickerHandle); _tickerHandle = null; }
     _tickerBlock = null;
 }
-
 function buildSummaryText(steps: ProcessStep[]): string {
     const counts: Record<string, number> = {};
     for (const s of steps) {
@@ -70,6 +86,114 @@ function previewText(text: string, max = 120): string {
     return singleLine.length > max ? `${singleLine.slice(0, max - 1)}…` : singleLine;
 }
 
+function retainedDetail(text: string): { detail: string; truncated: boolean } {
+    if (text.length <= PROCESS_DETAIL_RETAIN_CHARS) return { detail: text, truncated: false };
+    const notice = `\n[detail truncated: kept ${PROCESS_DETAIL_RETAIN_CHARS} of ${text.length} chars]`;
+    return {
+        detail: `${text.slice(0, Math.max(0, PROCESS_DETAIL_RETAIN_CHARS - notice.length))}${notice}`,
+        truncated: true,
+    };
+}
+
+export function getStoredProcessStepDetail(stepId: string): string {
+    return processDetailStore.get(stepId)?.detail || '';
+}
+
+export function compactProcessStepForStorage(step: ProcessStep): ProcessStep {
+    const storedDetail = getStoredProcessStepDetail(step.id);
+    const fullDetail = storedDetail || step.detail || '';
+    const retained = retainedDetail(fullDetail);
+    const preview = step.detailPreview || previewText(fullDetail, PROCESS_DETAIL_PREVIEW_CHARS);
+    if (fullDetail) {
+        processDetailStore.set(step.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,
+        stepRef: step.stepRef,
+        traceRunId: step.traceRunId, traceSeq: step.traceSeq, detailAvailable: step.detailAvailable,
+        detailBytes: step.detailBytes, rawRetentionStatus: step.rawRetentionStatus,
+        status: step.status,
+        startTime: step.startTime,
+        preview,
+        detailLength: fullDetail.length,
+        detailTruncated: retained.truncated,
+    });
+    return {
+        ...step,
+        detail: preview,
+        detailPreview: preview,
+        detailLength: fullDetail.length,
+        detailTruncated: retained.truncated,
+    };
+}
+
+export function mergeStoredProcessStepDetail(stepId: string, incomingDetail?: string): string {
+    const incoming = incomingDetail || '';
+    const existing = getStoredProcessStepDetail(stepId);
+    const merged = existing && incoming ? `${existing}\n${incoming}` : incoming || existing;
+    const retained = retainedDetail(merged);
+    if (merged) {
+        processDetailStore.set(stepId, {
+            detail: retained.detail,
+            originalLength: merged.length,
+            truncated: retained.truncated,
+        });
+    }
+    const meta = processStepMetaStore.get(stepId);
+    if (meta) {
+        meta.preview = previewText(merged, PROCESS_DETAIL_PREVIEW_CHARS);
+        meta.detailLength = merged.length;
+        meta.detailTruncated = retained.truncated;
+    }
+    return meta?.preview || previewText(merged, PROCESS_DETAIL_PREVIEW_CHARS);
+}
+
+function updateStoredStepMeta(step: ProcessStep): void {
+    const compact = compactProcessStepForStorage(step);
+    processStepMetaStore.set(step.id, {
+        id: compact.id,
+        type: compact.type,
+        icon: compact.icon,
+        rawIcon: compact.rawIcon,
+        label: compact.label,
+        stepRef: compact.stepRef,
+        traceRunId: compact.traceRunId, traceSeq: compact.traceSeq, detailAvailable: compact.detailAvailable,
+        detailBytes: compact.detailBytes, rawRetentionStatus: compact.rawRetentionStatus,
+        status: compact.status,
+        startTime: compact.startTime,
+        preview: compact.detailPreview || compact.detail || '',
+        detailLength: compact.detailLength || 0,
+        detailTruncated: Boolean(compact.detailTruncated),
+    });
+}
+
+function updateProcessBlockDetailIndex(pb: ProcessBlockState): void {
+    pb.element.dataset['processStepIds'] = pb.steps.map(step => step.id).join(' ');
+}
+
+function visibleStepIndexes(steps: ProcessStep[]): Set<number> {
+    const indexes = new Set<number>();
+    if (steps.length <= PROCESS_BLOCK_MAX_RENDERED_STEPS) {
+        steps.forEach((_step, idx) => indexes.add(idx));
+        return indexes;
+    }
+    steps.forEach((step, idx) => {
+        if (idx < PROCESS_BLOCK_HEAD_STEPS || idx >= steps.length - PROCESS_BLOCK_TAIL_STEPS
+            || step.status === 'running' || step.status === 'error') {
+            indexes.add(idx);
+        }
+    });
+    return indexes;
+}
+
 function renderTrustedIcon(icon: string | undefined): string {
     const value = icon || ICONS.tool;
     return value.trim().startsWith('<svg') ? value : escapeHtml(value);
@@ -81,11 +205,10 @@ function renderStep(step: ProcessStep): string {
     const badgeText = step.type.toUpperCase();
     const label = escapeHtml(step.label || step.icon || '');
     const icon = renderTrustedIcon(step.icon);
-    const detail = step.detail || '';
+    const detail = step.detailPreview || step.detail || '';
     const detailId = `process-detail-${step.id}`;
+    const traceButton = step.detailAvailable && step.traceRunId && step.traceSeq ? `<span class="process-step-trace" role="button" tabindex="0" title="Open full trace" aria-label="Open full trace" data-trace-run-id="${escapeHtml(step.traceRunId)}" data-trace-seq="${String(step.traceSeq)}">Trace</span>` : '';
 
-    // Always render expandable — VS (THRESHOLD=1) keeps DOM count low
-    // so the extra elements per step are negligible
     const snippetPreview = previewText(detail, step.type === 'thinking' ? 120 : 80);
     const snippetHtml = snippetPreview
         ? `<span class="process-step-snippet">${escapeHtml(snippetPreview)}</span>`
@@ -95,6 +218,8 @@ function renderStep(step: ProcessStep): string {
         data-type="${escapeHtml(step.type)}"
         data-status="${escapeHtml(step.status)}"
         data-step-ref="${escapeHtml(step.stepRef || '')}"
+        data-trace-run-id="${escapeHtml(step.traceRunId || '')}"
+        data-trace-seq="${String(step.traceSeq || '')}"
         data-start-time="${String(step.startTime || Date.now())}">
         <button class="process-step-toggle" aria-expanded="false" aria-controls="${detailId}">
             <span class="${dotClass}"></span>
@@ -104,14 +229,42 @@ function renderStep(step: ProcessStep): string {
                 <span class="process-step-label">${label}</span>
                 ${snippetHtml}
             </span>
+            ${traceButton}
             <span class="process-step-chevron">${ICONS.chevronRight}</span>
         </button>
         <div class="process-step-details collapsed" id="${detailId}">
-            <pre class="process-step-full">${escapeHtml(detail)}</pre>
+            <pre class="process-step-full" data-detail-lazy="true"></pre>
         </div>
     </div>`;
 }
 
+function renderOmittedStepSummary(count: number): string {
+    return `<div class="process-step process-step-omitted" aria-hidden="true">
+        <span class="process-step-snippet">${count} completed tool step${count === 1 ? '' : 's'} hidden for memory safety</span>
+    </div>`;
+}
+
+function renderSteps(steps: ProcessStep[]): string {
+    const indexes = visibleStepIndexes(steps);
+    let omitted = 0;
+    const parts: string[] = [];
+    for (let idx = 0; idx < steps.length; idx++) {
+        const step = steps[idx];
+        if (!step) continue;
+        if (indexes.has(idx)) {
+            if (omitted > 0) {
+                parts.push(renderOmittedStepSummary(omitted));
+                omitted = 0;
+            }
+            parts.push(renderStep(step));
+        } else {
+            omitted++;
+        }
+    }
+    if (omitted > 0) parts.push(renderOmittedStepSummary(omitted));
+    return parts.join('');
+}
+
 function blockShell(summaryText = '', collapsed = false): string {
     return `<div class="process-block${collapsed ? ' collapsed' : ''}">
         <button class="process-summary" aria-expanded="${collapsed ? 'false' : 'true'}">
@@ -129,9 +282,18 @@ function blockShell(summaryText = '', collapsed = false): string {
 function toggleStepDetails(toggle: HTMLElement): void {
     const wrapper = toggle.closest('.process-step');
     const details = wrapper?.querySelector('.process-step-details') as HTMLElement | null;
+    const pre = details?.querySelector('.process-step-full') as HTMLElement | null;
     const chevron = toggle.querySelector('.process-step-chevron');
     if (!wrapper || !details) return;
     const expanding = details.classList.contains('collapsed');
+    if (expanding && pre?.dataset['detailLazy'] === 'true') {
+        const detail = getStoredProcessStepDetail((wrapper as HTMLElement).dataset['stepId'] || '');
+        pre.textContent = detail || processStepMetaStore.get((wrapper as HTMLElement).dataset['stepId'] || '')?.preview || '';
+        delete pre.dataset['detailLazy'];
+    } else if (!expanding && pre && pre.textContent && pre.textContent.length > PROCESS_DETAIL_COLLAPSE_CLEAR_CHARS) {
+        pre.textContent = '';
+        pre.dataset['detailLazy'] = 'true';
+    }
     details.classList.toggle('collapsed', !expanding);
     wrapper.classList.toggle('expanded', expanding);
     toggle.setAttribute('aria-expanded', expanding ? 'true' : 'false');
@@ -139,10 +301,20 @@ function toggleStepDetails(toggle: HTMLElement): void {
 }
 
 export function bindProcessBlockInteractions(root: HTMLElement): void {
-    if (root.dataset.processBlockBound === '1') return;
+    if (root.dataset['processBlockBound'] === '1') return;
     root.addEventListener('click', (event) => {
         const target = event.target as HTMLElement | null;
         if (!target) return;
+        const traceTrigger = target.closest('.process-step-trace') as HTMLElement | null;
+        if (traceTrigger) {
+            event.preventDefault();
+            event.stopPropagation();
+            const runId = traceTrigger.dataset['traceRunId'] || '';
+            const seq = Number(traceTrigger.dataset['traceSeq'] || 0);
+            import('./trace-drawer.js').then(m => m.openTraceDrawer(runId, seq))
+                .catch(error => console.warn('[trace-drawer] open failed:', error));
+            return;
+        }
 
         const stepToggle = target.closest('.process-step-toggle') as HTMLElement | null;
         if (stepToggle) {
@@ -161,19 +333,22 @@ export function bindProcessBlockInteractions(root: HTMLElement): void {
             if (chevron) chevron.innerHTML = expanding ? ICONS.chevronDown : ICONS.chevronRight;
         }
     });
-    root.dataset.processBlockBound = '1';
+    root.dataset['processBlockBound'] = '1';
 }
 
 export function buildProcessBlockHtml(steps: ProcessStep[], collapsed = true): string {
-    const summaryText = buildSummaryText(steps);
+    const compactSteps = steps.map(compactProcessStepForStorage);
+    const summaryText = buildSummaryText(compactSteps);
     const html = blockShell(summaryText, collapsed);
     const wrapper = document.createElement('div');
     wrapper.innerHTML = html;
+    const block = wrapper.querySelector('.process-block') as HTMLElement | null;
+    if (block) block.dataset['processStepIds'] = compactSteps.map(step => step.id).join(' ');
     const inner = wrapper.querySelector('.process-steps-inner');
-    if (inner) inner.innerHTML = steps.map(renderStep).join('');
+    if (inner) inner.innerHTML = renderSteps(compactSteps);
     const dot = wrapper.querySelector('.process-dot');
     if (dot) {
-        const anyRunning = steps.some(step => step.status === 'running');
+        const anyRunning = compactSteps.some(step => step.status === 'running');
         dot.classList.toggle('running', anyRunning && !collapsed);
         dot.classList.toggle('done', !anyRunning || collapsed);
     }
@@ -214,23 +389,37 @@ export function createProcessBlock(parentEl: HTMLElement): ProcessBlockState {
 }
 
 export function addStep(pb: ProcessBlockState, step: ProcessStep): void {
-    pb.steps.push(step);
+    const compactStep = compactProcessStepForStorage(step);
+    pb.steps.push(compactStep);
     const inner = pb.element.querySelector('.process-steps-inner');
-    if (inner) inner.insertAdjacentHTML('beforeend', renderStep(step));
+    if (inner) {
+        if (pb.steps.length > PROCESS_BLOCK_MAX_RENDERED_STEPS) inner.innerHTML = renderSteps(pb.steps);
+        else inner.insertAdjacentHTML('beforeend', renderStep(compactStep));
+    }
+    updateProcessBlockDetailIndex(pb);
     updateSummary(pb);
 }
 
 export function replaceStep(pb: ProcessBlockState, oldStepId: string, newStep: ProcessStep): void {
     const idx = pb.steps.findIndex(s => s.id === oldStepId);
     if (idx === -1) return;
-    pb.steps[idx] = newStep;
+    if (oldStepId !== newStep.id) {
+        processDetailStore.delete(oldStepId);
+        processStepMetaStore.delete(oldStepId);
+    }
+    const compactStep = compactProcessStepForStorage(newStep);
+    pb.steps[idx] = compactStep;
     const oldEl = pb.element.querySelector(`[data-step-id="${oldStepId}"]`);
     if (oldEl) {
         const temp = document.createElement('div');
-        temp.innerHTML = renderStep(newStep);
+        temp.innerHTML = renderStep(compactStep);
         const newEl = temp.firstElementChild;
         if (newEl) oldEl.replaceWith(newEl);
+    } else if (pb.steps.length > PROCESS_BLOCK_MAX_RENDERED_STEPS) {
+        const inner = pb.element.querySelector('.process-steps-inner');
+        if (inner) inner.innerHTML = renderSteps(pb.steps);
     }
+    updateProcessBlockDetailIndex(pb);
     updateSummary(pb);
 }
 
@@ -238,15 +427,20 @@ export function updateStepStatus(pb: ProcessBlockState, stepId: string, status:
     const step = pb.steps.find(s => s.id === stepId);
     if (!step) return;
     step.status = status;
+    updateStoredStepMeta(step);
     const stepEl = pb.element.querySelector(`[data-step-id="${stepId}"]`);
     if (stepEl) {
-        (stepEl as HTMLElement).dataset.status = status;
+        (stepEl as HTMLElement).dataset['status'] = status;
         const dot = stepEl.querySelector('.process-step-dot');
         if (dot) {
             dot.classList.remove('running', 'done', 'error');
             dot.classList.add(status);
         }
+    } else if (status === 'running' || status === 'error') {
+        const inner = pb.element.querySelector('.process-steps-inner');
+        if (inner) inner.innerHTML = renderSteps(pb.steps);
     }
+    updateProcessBlockDetailIndex(pb);
     updateSummary(pb);
 }
 
@@ -260,13 +454,47 @@ export function collapseBlock(pb: ProcessBlockState): void {
     if (chevron) chevron.innerHTML = ICONS.chevronRight;
 
     for (const step of pb.steps) {
-        if (step.status === 'running') step.status = 'done';
+        if (step.status === 'running') {
+            step.status = 'done';
+            updateStoredStepMeta(step);
+        }
     }
     pb.element.querySelectorAll('.process-step-dot.running').forEach(dot => {
         dot.classList.remove('running');
         dot.classList.add('done');
         const row = dot.closest('.process-step') as HTMLElement | null;
-        if (row) row.dataset.status = 'done';
+        if (row) row.dataset['status'] = 'done';
     });
     updateSummary(pb);
 }
+
+export function releaseProcessBlockDetails(rootOrState: HTMLElement | ProcessBlockState | null | undefined): void {
+    if (!rootOrState) return;
+    const ids = new Set<string>();
+    if ('steps' in rootOrState) {
+        rootOrState.steps.forEach(step => ids.add(step.id));
+    } else {
+        if (rootOrState.classList.contains('process-block')) {
+            (rootOrState.dataset['processStepIds'] || '').split(/\s+/).filter(Boolean).forEach(id => ids.add(id));
+        }
+        rootOrState.querySelectorAll<HTMLElement>('.process-block[data-process-step-ids]').forEach(block => {
+            (block.dataset['processStepIds'] || '').split(/\s+/).filter(Boolean).forEach(id => ids.add(id));
+        });
+        if (rootOrState.classList.contains('process-step')) {
+            const id = rootOrState.dataset['stepId'];
+            if (id) ids.add(id);
+        }
+        rootOrState.querySelectorAll<HTMLElement>('.process-step[data-step-id]').forEach(row => {
+            const id = row.dataset['stepId'];
+            if (id) ids.add(id);
+        });
+    }
+    ids.forEach(id => {
+        processDetailStore.delete(id);
+        processStepMetaStore.delete(id);
+    });
+}
+
+export function processStepMetaFromStore(stepId: string): StoredProcessStepMeta | null {
+    return processStepMetaStore.get(stepId) || null;
+}

package/public/js/features/process-step-match.ts

@@ -0,0 +1,18 @@
+import type { ProcessStep } from './process-block.js';
+
+export function findLegacyRunningMatch(steps: ProcessStep[], step: ProcessStep): ProcessStep | null {
+    const matches = steps.filter(s => s.status === 'running'
+        && !s.stepRef
+        && s.label === step.label
+        && s.type === step.type);
+    return matches.length === 1 ? matches[0]! : null;
+}
+
+export function findRunningProcessStepMatch(steps: ProcessStep[], step: ProcessStep): ProcessStep | null {
+    const running = [...steps].reverse().filter(s => s.status === 'running');
+    if (step.stepRef) {
+        return running.find(s => s.stepRef === step.stepRef)
+            ?? findLegacyRunningMatch(running, step);
+    }
+    return findLegacyRunningMatch(running, step);
+}

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

@@ -72,7 +72,7 @@ export function normalizeQuotaWindowLabel(cliName: string, label: string): strin
 export async function loadCliStatus(force = false): Promise<void> {
     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 });
+        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;
     }
 

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

@@ -2,7 +2,33 @@
 import { apiJson } from '../api.js';
 import { t } from './i18n.js';
 
-export function initSttSettings(sttConfig: Record<string, any>): void {
+type SttSettingsConfig = {
+    engine?: string;
+    geminiKeySet?: boolean;
+    geminiKeyLast4?: string;
+    geminiModel?: string;
+    whisperModel?: string;
+    openaiBaseUrl?: string;
+    openaiKeySet?: boolean;
+    openaiKeyLast4?: string;
+    openaiModel?: string;
+    vertexConfig?: string;
+};
+
+type SttSettingsPatch = {
+    stt: {
+        engine: string;
+        geminiModel: string;
+        whisperModel: string;
+        openaiBaseUrl: string;
+        openaiModel: string;
+        vertexConfig: string;
+        geminiApiKey?: string;
+        openaiApiKey?: string;
+    };
+};
+
+export function initSttSettings(sttConfig: SttSettingsConfig): void {
     const engine = document.getElementById('sttEngine') as HTMLSelectElement | null;
     const geminiKey = document.getElementById('sttGeminiKey') as HTMLInputElement | null;
     const geminiModel = document.getElementById('sttGeminiModel') as HTMLSelectElement | null;
@@ -13,19 +39,19 @@ export function initSttSettings(sttConfig: Record<string, any>): void {
     const openaiModel = document.getElementById('sttOpenaiModel') as HTMLInputElement | null;
     const vertexJson = document.getElementById('sttVertexJson') as HTMLTextAreaElement | null;
 
-    if (engine) engine.value = sttConfig.engine || 'auto';
-    if (geminiKey) geminiKey.placeholder = sttConfig.geminiKeySet ? savedKeyPlaceholder(sttConfig.geminiKeyLast4) : 'AIza...';
+    if (engine) engine.value = sttConfig['engine'] || 'auto';
+    if (geminiKey) geminiKey.placeholder = sttConfig['geminiKeySet'] ? savedKeyPlaceholder(sttConfig['geminiKeyLast4']) : 'AIza...';
     if (geminiModel) {
-        const saved = sttConfig.geminiModel || 'gemini-2.5-flash-lite';
+        const saved = sttConfig['geminiModel'] || 'gemini-2.5-flash-lite';
         const hasOption = Array.from(geminiModel.options).some(o => o.value === saved);
         if (hasOption) { geminiModel.value = saved; }
         else { geminiModel.value = '__custom__'; if (geminiModelCustom) { geminiModelCustom.value = saved; geminiModelCustom.style.display = ''; } }
     }
-    if (whisperModel) whisperModel.value = sttConfig.whisperModel || 'mlx-community/whisper-large-v3-turbo';
-    if (openaiBaseUrl) openaiBaseUrl.value = sttConfig.openaiBaseUrl || '';
-    if (openaiKey) openaiKey.placeholder = sttConfig.openaiKeySet ? savedKeyPlaceholder(sttConfig.openaiKeyLast4) : 'sk-...';
-    if (openaiModel) openaiModel.value = sttConfig.openaiModel || '';
-    if (vertexJson) vertexJson.value = sttConfig.vertexConfig || '';
+    if (whisperModel) whisperModel.value = sttConfig['whisperModel'] || 'mlx-community/whisper-large-v3-turbo';
+    if (openaiBaseUrl) openaiBaseUrl.value = sttConfig['openaiBaseUrl'] || '';
+    if (openaiKey) openaiKey.placeholder = sttConfig['openaiKeySet'] ? savedKeyPlaceholder(sttConfig['openaiKeyLast4']) : 'sk-...';
+    if (openaiModel) openaiModel.value = sttConfig['openaiModel'] || '';
+    if (vertexJson) vertexJson.value = sttConfig['vertexConfig'] || '';
 
     function toggleProviderFields() {
         const v = engine?.value || 'auto';
@@ -41,7 +67,7 @@ export function initSttSettings(sttConfig: Record<string, any>): void {
     toggleProviderFields();
 
     async function saveStt() {
-        const patch: Record<string, any> = {
+        const patch: SttSettingsPatch = {
             stt: {
                 engine: engine?.value || 'auto',
                 geminiModel: (geminiModel?.value === '__custom__' ? geminiModelCustom?.value : geminiModel?.value) || 'gemini-2.5-flash-lite',
@@ -53,7 +79,7 @@ export function initSttSettings(sttConfig: Record<string, any>): void {
         };
         if (geminiKey?.value) patch.stt.geminiApiKey = geminiKey.value;
         if (openaiKey?.value) patch.stt.openaiApiKey = openaiKey.value;
-        console.log('[stt] saving:', { engine: patch.stt.engine, hasGeminiKey: !!patch.stt.geminiApiKey, hasOpenaiKey: !!patch.stt.openaiApiKey });
+        console.log('[stt] saving:', { engine: patch['stt'].engine, hasGeminiKey: !!patch['stt'].geminiApiKey, hasOpenaiKey: !!patch['stt'].openaiApiKey });
         try {
             await apiJson('/api/settings', 'PUT', patch);
             if (geminiKey?.value) { const l4 = geminiKey.value.slice(-4); geminiKey.value = ''; geminiKey.placeholder = savedKeyPlaceholder(l4); }

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

@@ -70,7 +70,7 @@ function renderTree(tree: TreeNode[]): void {
 function openTemplateEditor(tmpl: TemplateInfo): void {
     const editor = document.getElementById('templateEditor') as HTMLTextAreaElement;
     editor.value = tmpl.content;
-    editor.dataset.templateId = tmpl.id;
+    editor.dataset['templateId'] = tmpl.id;
     editor.readOnly = true;
     _devMode = false;
     const label = document.getElementById('templateEditorLabel');
@@ -106,7 +106,7 @@ export function toggleDevMode(): void {
 
 export async function saveTemplateFromModal(): Promise<void> {
     const editor = document.getElementById('templateEditor') as HTMLTextAreaElement;
-    const id = editor.dataset.templateId;
+    const id = editor.dataset['templateId'];
     if (!id) return;
     await apiJson(`/api/prompt-templates/${id}`, 'PUT', { content: editor.value });
     const label = document.getElementById('templateEditorLabel');

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

@@ -207,7 +207,7 @@ export function handleClick(e: Event): void {
     const target = e.target as HTMLElement;
     const item = target.closest('.cmd-item') as HTMLElement | null;
     if (!item) return;
-    const idx = parseInt(item.dataset.index || '-1', 10);
+    const idx = parseInt(item.dataset['index'] || '-1', 10);
     if (Number.isNaN(idx) || idx < 0) return;
     selectedIdx = Math.min(idx, filtered.length - 1);
     applySelection(true);

package/public/js/features/tool-ui.ts

@@ -7,12 +7,18 @@ import { ICONS } from '../icons.js';
 
 export interface ToolLogEntry {
     icon: string;
-    rawIcon?: string;
+    rawIcon?: string | undefined;
     label: string;
-    detail?: string;
-    toolType?: string;
-    stepRef?: string;
-    status?: string;
+    detail?: string | undefined;
+    toolType?: string | undefined;
+    stepRef?: string | undefined;
+    status?: string | undefined;
+    isEmployee?: boolean | undefined;
+    traceRunId?: string | undefined;
+    traceSeq?: number | undefined;
+    detailAvailable?: boolean | undefined;
+    detailBytes?: number | undefined;
+    rawRetentionStatus?: string | undefined;
 }
 
 function hasExpandableDetail(tl: ToolLogEntry): boolean {
@@ -78,7 +84,7 @@ export function buildToolGroupHtml(toolLog: ToolLogEntry[]): string {
 
 /** Bind expand/collapse click handlers for tool items within a container */
 export function bindToolItemInteractions(root: HTMLElement): void {
-    if (root.dataset.toolItemBound === '1') return;
+    if (root.dataset['toolItemBound'] === '1') return;
     root.addEventListener('click', (event) => {
         const target = event.target as HTMLElement | null;
         if (!target) return;
@@ -94,7 +100,7 @@ export function bindToolItemInteractions(root: HTMLElement): void {
         toggle.setAttribute('aria-expanded', expanding ? 'true' : 'false');
         if (chevron) chevron.innerHTML = expanding ? ICONS.chevronDown : ICONS.chevronRight;
     });
-    root.dataset.toolItemBound = '1';
+    root.dataset['toolItemBound'] = '1';
 }
 
 /** Show live tool activity indicator inside the current agent message */