cli-jaw 2.0.1 → 2.0.2

package/public/js/features/trace-drawer.ts

@@ -0,0 +1,122 @@
+import { api } from '../api.js';
+import { escapeHtml } from '../render.js';
+
+interface TraceSummary {
+    id: string; cli: string; model: string; agentLabel: string; status: string;
+    rawRetentionStatus: string; eventCount: number; byteCount: number; startedAt: number;
+}
+interface TraceEventListItem {
+    seq: number; source: string; event_type?: string; eventType?: string; preview?: string;
+    bytes?: number; retention_status?: string; retentionStatus?: string; created_at?: number; createdAt?: number;
+}
+interface TraceEventDetail extends TraceEventListItem { runId: string; raw: string; }
+interface TraceEventsPage { total: number; events: TraceEventListItem[]; }
+
+const PAGE_SIZE = 80;
+let currentRunId = '';
+let loadedCount = 0;
+let totalCount = 0;
+let loading = false;
+
+function eventTypeOf(event: TraceEventListItem): string { return event.eventType || event.event_type || 'event'; }
+
+function ensureDrawer(): HTMLElement {
+    let overlay = document.getElementById('traceDrawerOverlay') as HTMLElement | null;
+    if (overlay) return overlay;
+    overlay = document.createElement('div');
+    overlay.id = 'traceDrawerOverlay';
+    overlay.className = 'trace-drawer-overlay';
+    overlay.innerHTML = `<aside class="trace-drawer" role="dialog" aria-modal="true" aria-labelledby="traceDrawerTitle">
+        <header class="trace-drawer-header">
+            <div><p class="trace-drawer-kicker">Raw trace</p><h2 id="traceDrawerTitle">Trace</h2></div>
+            <button class="trace-drawer-close" type="button" aria-label="Close trace drawer">×</button>
+        </header>
+        <section class="trace-drawer-meta" id="traceDrawerMeta"></section>
+        <section class="trace-drawer-body">
+            <div class="trace-event-list" id="traceEventList"></div>
+            <pre class="trace-event-raw" id="traceEventRaw">Select an event.</pre>
+        </section>
+        <footer class="trace-drawer-footer"><button class="trace-load-more" type="button">Load more</button></footer>
+    </aside>`;
+    document.body.appendChild(overlay);
+    overlay.addEventListener('click', event => {
+        const target = event.target as HTMLElement | null;
+        if (!target) return;
+        if (target === overlay || target.closest('.trace-drawer-close')) closeTraceDrawer();
+        const row = target.closest('.trace-event-row') as HTMLElement | null;
+        if (row) void loadEventDetail(row.dataset['runId'] || '', Number(row.dataset['seq'] || 0));
+        if (target.closest('.trace-load-more')) void loadNextPage();
+    });
+    document.addEventListener('keydown', event => {
+        if (event.key === 'Escape' && overlay?.classList.contains('open')) closeTraceDrawer();
+    });
+    return overlay;
+}
+
+function setRaw(text: string): void {
+    const raw = document.getElementById('traceEventRaw');
+    if (raw) raw.textContent = text;
+}
+function closeTraceDrawer(): void { document.getElementById('traceDrawerOverlay')?.classList.remove('open'); }
+
+function renderSummary(summary: TraceSummary): void {
+    const title = document.getElementById('traceDrawerTitle');
+    if (title) title.textContent = `${summary.cli || 'agent'} trace`;
+    const meta = document.getElementById('traceDrawerMeta');
+    if (!meta) return;
+    meta.innerHTML = [
+        ['run', summary.id], ['model', summary.model || '-'], ['agent', summary.agentLabel || '-'],
+        ['status', summary.status], ['events', `${summary.eventCount}`], ['bytes', `${summary.byteCount}`],
+        ['retention', summary.rawRetentionStatus],
+    ].map(([label, value]) => `<span><b>${escapeHtml(label)}</b>${escapeHtml(value)}</span>`).join('');
+}
+
+function renderEventRows(events: TraceEventListItem[]): void {
+    const list = document.getElementById('traceEventList');
+    if (!list) return;
+    const html = events.map(event => {
+        const seq = Number(event.seq || 0);
+        return `<button class="trace-event-row" type="button" data-run-id="${escapeHtml(currentRunId)}" data-seq="${seq}">
+            <span class="trace-event-seq">#${seq}</span><span class="trace-event-source">${escapeHtml(event.source || 'trace')}</span>
+            <span class="trace-event-type">${escapeHtml(eventTypeOf(event))}</span><span class="trace-event-preview">${escapeHtml(event.preview || '')}</span>
+        </button>`;
+    }).join('');
+    list.insertAdjacentHTML('beforeend', html);
+}
+
+async function loadNextPage(): Promise<void> {
+    if (!currentRunId || loading || (loadedCount >= totalCount && totalCount > 0)) return;
+    loading = true;
+    const page = await api<TraceEventsPage>(`/api/traces/${encodeURIComponent(currentRunId)}/events?offset=${loadedCount}&limit=${PAGE_SIZE}`);
+    loading = false;
+    if (!page) { setRaw('Trace events could not be loaded.'); return; }
+    totalCount = page.total || 0;
+    loadedCount += page.events.length;
+    renderEventRows(page.events);
+    const more = document.querySelector('.trace-load-more') as HTMLButtonElement | null;
+    if (more) more.disabled = loadedCount >= totalCount;
+}
+
+async function loadEventDetail(runId: string, seq: number): Promise<void> {
+    if (!runId || !Number.isInteger(seq) || seq < 1) return;
+    setRaw('Loading event...');
+    const detail = await api<TraceEventDetail>(`/api/traces/${encodeURIComponent(runId)}/events/${seq}`);
+    setRaw(detail?.raw || (detail ? '(empty trace event)' : 'Trace event could not be loaded.'));
+}
+
+export async function openTraceDrawer(runId: string, seq?: number): Promise<void> {
+    const overlay = ensureDrawer();
+    currentRunId = runId;
+    loadedCount = 0;
+    totalCount = 0;
+    const list = document.getElementById('traceEventList');
+    if (list) list.innerHTML = '';
+    setRaw('Loading trace...');
+    overlay.classList.add('open');
+    const summary = await api<TraceSummary>(`/api/traces/${encodeURIComponent(runId)}`);
+    if (!summary) { setRaw('Trace is unavailable or internal-only.'); return; }
+    renderSummary(summary);
+    totalCount = summary.eventCount || 0;
+    await loadNextPage();
+    if (seq) await loadEventDetail(runId, seq);
+}

package/public/js/icons.ts

@@ -269,7 +269,7 @@ export function emojiToStatus(emoji: string): 'done' | 'error' | null {
 export function hydrateIcons(root: Element = document.body): void {
     const els = root.querySelectorAll<HTMLElement>('[data-icon]');
     for (const el of els) {
-        const name = el.dataset.icon as IconName;
+        const name = el.dataset['icon'] as IconName;
         if (name && ICONS[name]) {
             el.innerHTML = ICONS[name];
             el.classList.add('icon-hydrated');

package/public/js/main.ts

@@ -112,7 +112,7 @@ initPendingQueue();
 document.getElementById('filePreviewClear')?.addEventListener('click', clearAttachedFiles);
 document.getElementById('filePreviewList')?.addEventListener('click', (e) => {
     const btn = (e.target as HTMLElement)?.closest('[data-file-idx]') as HTMLElement | null;
-    if (btn) removeAttachedFile(+(btn.dataset.fileIdx || '0'));
+    if (btn) removeAttachedFile(+(btn.dataset['fileIdx'] || '0'));
 });
 document.querySelector('.btn-attach')?.addEventListener('click', () => {
     (document.getElementById('fileInput') as HTMLInputElement | null)?.click();
@@ -158,14 +158,14 @@ document.querySelector('[data-action="addEmployee"]')?.addEventListener('click',
 // ── Employees (Event Delegation) ──
 document.getElementById('employeesList')?.addEventListener('click', (e) => {
     const del = (e.target as HTMLElement)?.closest('[data-emp-delete]') as HTMLElement | null;
-    if (del) { deleteEmployee(del.dataset.empDelete || ''); return; }
+    if (del) { deleteEmployee(del.dataset['empDelete'] || ''); return; }
 });
 document.getElementById('employeesList')?.addEventListener('change', (e) => {
     const tgt = e.target as HTMLSelectElement;
     const name = tgt.closest('[data-emp-name]') as HTMLElement | null;
-    if (name) { updateEmployee(name.dataset.empName || '', { name: tgt.value }); return; }
+    if (name) { updateEmployee(name.dataset['empName'] || '', { name: tgt.value }); return; }
     const cli = tgt.closest('[data-emp-cli]') as HTMLElement | null;
-    if (cli) { onEmpCliChange(cli.dataset.empCli || '', tgt.value); return; }
+    if (cli) { onEmpCliChange(cli.dataset['empCli'] || '', tgt.value); return; }
     const model = tgt.closest('[data-emp-model]') as HTMLElement | null;
     if (model) {
         if (tgt.value === '__custom__') {
@@ -176,29 +176,29 @@ document.getElementById('employeesList')?.addEventListener('change', (e) => {
                 const customOpt = tgt.querySelector('option[value="__custom__"]');
                 if (customOpt) tgt.insertBefore(opt, customOpt);
                 tgt.value = val.trim();
-                updateEmployee(model.dataset.empModel || '', { model: val.trim() });
+                updateEmployee(model.dataset['empModel'] || '', { model: val.trim() });
             } else { tgt.value = 'default'; }
-        } else { updateEmployee(model.dataset.empModel || '', { model: tgt.value }); }
+        } else { updateEmployee(model.dataset['empModel'] || '', { model: tgt.value }); }
         return;
     }
     const role = tgt.closest('[data-emp-role]') as HTMLElement | null;
-    if (role) { onEmpRoleChange(role.dataset.empRole || '', tgt.value); return; }
+    if (role) { onEmpRoleChange(role.dataset['empRole'] || '', tgt.value); return; }
     const custom = tgt.closest('[data-emp-custom]') as HTMLElement | null;
-    if (custom) { updateEmployee(custom.dataset.empCustom || '', { role: tgt.value }); return; }
+    if (custom) { updateEmployee(custom.dataset['empCustom'] || '', { role: tgt.value }); return; }
 });
 
 // ── Skills Tab (Event Delegation) ──
 document.getElementById('skillsList')?.addEventListener('click', (e) => {
     const toggle = (e.target as HTMLElement)?.closest('[data-skill-id]') as HTMLElement | null;
     if (toggle) {
-        toggleSkill(toggle.dataset.skillId || '', toggle.dataset.skillEnabled === 'true');
+        toggleSkill(toggle.dataset['skillId'] || '', toggle.dataset['skillEnabled'] === 'true');
     }
 });
 // Skill filter buttons (event delegation)
 document.querySelector('#tabSkills')?.addEventListener('click', (e) => {
     const filterBtn = (e.target as HTMLElement)?.closest('.skill-filter') as HTMLElement | null;
     if (filterBtn) {
-        const cat = filterBtn.dataset.filter || 'all';
+        const cat = filterBtn.dataset['filter'] || 'all';
         filterSkills(cat, filterBtn);
     }
 });
@@ -344,32 +344,32 @@ document.querySelector('[data-action="addHeartbeat"]')?.addEventListener('click'
 // Heartbeat jobs (event delegation)
 document.getElementById('hbJobsList')?.addEventListener('click', (e) => {
     const toggle = (e.target as HTMLElement)?.closest('[data-hb-toggle]') as HTMLElement | null;
-    if (toggle) { toggleHeartbeatJob(+(toggle.dataset.hbToggle || '0')); return; }
+    if (toggle) { toggleHeartbeatJob(+(toggle.dataset['hbToggle'] || '0')); return; }
     const remove = (e.target as HTMLElement)?.closest('[data-hb-remove]') as HTMLElement | null;
-    if (remove) { removeHeartbeatJob(+(remove.dataset.hbRemove || '0')); return; }
+    if (remove) { removeHeartbeatJob(+(remove.dataset['hbRemove'] || '0')); return; }
 });
 document.getElementById('hbJobsList')?.addEventListener('change', (e) => {
     const tgt = e.target as HTMLInputElement | HTMLSelectElement;
     const name = tgt.closest('[data-hb-name]') as HTMLElement | null;
-    if (name) { state.heartbeatJobs[+(name.dataset.hbName || '0')].name = tgt.value; saveHeartbeatJobs(); return; }
+    if (name) { state.heartbeatJobs[+(name.dataset['hbName'] || '0')].name = tgt.value; saveHeartbeatJobs(); return; }
     const kind = tgt.closest('[data-hb-kind]') as HTMLElement | null;
     if (kind) {
-        const i = +(kind.dataset.hbKind || '0');
+        const i = +(kind.dataset['hbKind'] || '0');
         const current = state.heartbeatJobs[i]?.schedule as Record<string, unknown> | undefined;
-        const timeZone = typeof current?.timeZone === 'string' ? current.timeZone : undefined;
+        const timeZone = typeof current?.['timeZone'] === 'string' ? current['timeZone'] : undefined;
         state.heartbeatJobs[i].schedule = tgt.value === 'cron'
-            ? { kind: 'cron', cron: typeof current?.cron === 'string' && current.cron.trim() ? current.cron : '0 9 * * *', ...(timeZone ? { timeZone } : {}) }
-            : { kind: 'every', minutes: typeof current?.minutes === 'number' && current.minutes > 0 ? Math.floor(current.minutes) : 5, ...(timeZone ? { timeZone } : {}) };
+            ? { kind: 'cron', cron: typeof current?.['cron'] === 'string' && current['cron'].trim() ? current['cron'] : '0 9 * * *', ...(timeZone ? { timeZone } : {}) }
+            : { kind: 'every', minutes: typeof current?.['minutes'] === 'number' && current['minutes'] > 0 ? Math.floor(current['minutes']) : 5, ...(timeZone ? { timeZone } : {}) };
         renderHeartbeatJobs();
         saveHeartbeatJobs();
         return;
     }
     const min = tgt.closest('[data-hb-minutes]') as HTMLElement | null;
     if (min) {
-        const i = +(min.dataset.hbMinutes || '0');
+        const i = +(min.dataset['hbMinutes'] || '0');
         const current = state.heartbeatJobs[i]?.schedule as Record<string, unknown> | undefined;
         const minutes = Math.max(1, Math.floor(Number(tgt.value) || 5));
-        const timeZone = typeof current?.timeZone === 'string' ? current.timeZone : undefined;
+        const timeZone = typeof current?.['timeZone'] === 'string' ? current['timeZone'] : undefined;
         state.heartbeatJobs[i].schedule = { kind: 'every', minutes, ...(timeZone ? { timeZone } : {}) };
         renderHeartbeatJobs();
         saveHeartbeatJobs();
@@ -377,9 +377,9 @@ document.getElementById('hbJobsList')?.addEventListener('change', (e) => {
     }
     const cron = tgt.closest('[data-hb-cron]') as HTMLElement | null;
     if (cron) {
-        const i = +(cron.dataset.hbCron || '0');
+        const i = +(cron.dataset['hbCron'] || '0');
         const current = state.heartbeatJobs[i]?.schedule as Record<string, unknown> | undefined;
-        const timeZone = typeof current?.timeZone === 'string' ? current.timeZone : undefined;
+        const timeZone = typeof current?.['timeZone'] === 'string' ? current['timeZone'] : undefined;
         const cronExpr = tgt.value.trim().replace(/\s+/g, ' ');
         state.heartbeatJobs[i].schedule = { kind: 'cron', cron: cronExpr, ...(timeZone ? { timeZone } : {}) };
         renderHeartbeatJobs();
@@ -388,18 +388,18 @@ document.getElementById('hbJobsList')?.addEventListener('change', (e) => {
     }
     const timeZone = tgt.closest('[data-hb-timezone]') as HTMLElement | null;
     if (timeZone) {
-        const i = +(timeZone.dataset.hbTimezone || '0');
+        const i = +(timeZone.dataset['hbTimezone'] || '0');
         const current = state.heartbeatJobs[i]?.schedule as Record<string, unknown> | undefined;
-        if (current?.kind === 'cron') {
+        if (current?.['kind'] === 'cron') {
             state.heartbeatJobs[i].schedule = {
                 kind: 'cron',
-                cron: typeof current.cron === 'string' && current.cron.trim() ? current.cron : '0 9 * * *',
+                cron: typeof current['cron'] === 'string' && current['cron'].trim() ? current['cron'] : '0 9 * * *',
                 ...(tgt.value.trim() ? { timeZone: tgt.value.trim() } : {}),
             };
         } else {
             state.heartbeatJobs[i].schedule = {
                 kind: 'every',
-                minutes: typeof current?.minutes === 'number' && current.minutes > 0 ? Math.floor(current.minutes) : 5,
+                minutes: typeof current?.['minutes'] === 'number' && current['minutes'] > 0 ? Math.floor(current['minutes']) : 5,
                 ...(tgt.value.trim() ? { timeZone: tgt.value.trim() } : {}),
             };
         }
@@ -408,7 +408,7 @@ document.getElementById('hbJobsList')?.addEventListener('change', (e) => {
         return;
     }
     const prompt = tgt.closest('[data-hb-prompt]') as HTMLElement | null;
-    if (prompt) { state.heartbeatJobs[+(prompt.dataset.hbPrompt || '0')].prompt = tgt.value; saveHeartbeatJobs(); return; }
+    if (prompt) { state.heartbeatJobs[+(prompt.dataset['hbPrompt'] || '0')].prompt = tgt.value; saveHeartbeatJobs(); return; }
 });
 
 // ── Memory Modal ──
@@ -437,9 +437,9 @@ bindAdvancedProviderUi();
 // Memory files (event delegation)
 document.getElementById('basicMemoryFiles')?.addEventListener('click', (e) => {
     const del = (e.target as HTMLElement)?.closest('[data-mem-delete]') as HTMLElement | null;
-    if (del) { e.stopPropagation(); deleteMemFile(del.dataset.memDelete || ''); return; }
+    if (del) { e.stopPropagation(); deleteMemFile(del.dataset['memDelete'] || ''); return; }
     const view = (e.target as HTMLElement)?.closest('[data-mem-view]') as HTMLElement | null;
-    if (view) { viewMemFile(view.dataset.memView || ''); return; }
+    if (view) { viewMemFile(view.dataset['memView'] || ''); return; }
     const back = (e.target as HTMLElement)?.closest('[data-mem-back]');
     if (back) { openMemoryModal(); return; }
 });

package/public/js/provider-icons.ts

@@ -62,7 +62,7 @@ export function providerIcon(slug: string, variant: 'color' | 'mono' = 'color'):
 export function hydrateProviderIcons(root: Element = document.body): void {
     const els = root.querySelectorAll<HTMLElement>('[data-provider]');
     for (const el of els) {
-        const slug = el.dataset.provider || '';
+        const slug = el.dataset['provider'] || '';
         const svg = providerIcon(slug);
         if (svg) {
             el.innerHTML = svg;

package/public/js/render.ts

@@ -32,7 +32,9 @@ import {
     extractTopLevelSvg,
 } from './diagram/types.js';
 
-const DOMPurify = getDOMPurify();
+function purifier() {
+    return getDOMPurify();
+}
 
 // Register hljs languages (core-only import: ~25KB vs ~1MB full)
 hljs.registerLanguage('javascript', javascript);
@@ -134,7 +136,7 @@ function applyMermaidTheme() {
 // Mermaid is configured with htmlLabels:false so labels use SVG <text>,
 // not <foreignObject> + HTML. This avoids DOMPurify namespace issues.
 function sanitizeMermaidSvg(svg: string): string {
-    const clean = DOMPurify.sanitize(svg, {
+    const clean = purifier().sanitize(svg, {
         USE_PROFILES: { svg: true, svgFilters: true },
         FORBID_TAGS: [
             'script', 'iframe', 'object', 'embed', 'form', 'input',
@@ -163,7 +165,7 @@ export function escapeHtml(str: string): string {
 
 // ── XSS sanitization (hardened for inline SVG — Phase 1) ──
 export function sanitizeHtml(html: string): string {
-    return DOMPurify.sanitize(html, {
+    return purifier().sanitize(html, {
         USE_PROFILES: { html: true, svg: true, svgFilters: true },
         FORBID_TAGS: [
             'script', 'style', 'iframe', 'object', 'embed', 'form', 'input',
@@ -284,7 +286,7 @@ export async function rerenderMermaidDiagrams(): Promise<void> {
         const mm = await ensureMermaidLoaded();
         for (const el of rendered) {
             const htmlEl = el as HTMLElement;
-            const code = htmlEl.dataset.mermaidCode;
+            const code = htmlEl.dataset['mermaidCode'];
             if (!code || !htmlEl.isConnected) continue;
             const id = `mermaid-${++mermaidId}`;
             try {
@@ -361,17 +363,17 @@ function renderMermaidError(el: HTMLElement, code: string, errMsg: string): void
 
 async function renderSingleMermaidImpl(el: HTMLElement): Promise<void> {
     if (!el.isConnected) {
-        delete el.dataset.mermaidQueued;
-        delete el.dataset.mermaidInflight;
+        delete el.dataset['mermaidQueued'];
+        delete el.dataset['mermaidInflight'];
         return;
     }
     el.classList.remove('mermaid-pending');
     // Phase 127-F1: raw source lives in data attribute (skeleton DOM has no source text).
-    const encoded = el.dataset.mermaidCodeRaw || '';
+    const encoded = el.dataset['mermaidCodeRaw'] || '';
     const code = encoded ? decodeURIComponent(encoded) : (el.textContent || '');
-    el.dataset.mermaidCode = code;
+    el.dataset['mermaidCode'] = code;
     const id = `mermaid-${++mermaidId}`;
-    el.dataset.mermaidInflight = '1';
+    el.dataset['mermaidInflight'] = '1';
     try {
         const mm = await ensureMermaidLoaded();
         // Apply theme immediately before render — no intermediate parse()
@@ -383,7 +385,7 @@ async function renderSingleMermaidImpl(el: HTMLElement): Promise<void> {
         }
         el.innerHTML = sanitizeMermaidSvg(svg);
         el.classList.add('mermaid-rendered');
-        delete el.dataset.mermaidCodeRaw;
+        delete el.dataset['mermaidCodeRaw'];
         appendMermaidActionBtns(el);
         bindDiagramZoom(el);
     } catch (err: unknown) {
@@ -391,8 +393,8 @@ async function renderSingleMermaidImpl(el: HTMLElement): Promise<void> {
             || (err as { str?: string })?.str || 'Unknown error';
         renderMermaidError(el, code, errMsg);
     } finally {
-        delete el.dataset.mermaidQueued;
-        delete el.dataset.mermaidInflight;
+        delete el.dataset['mermaidQueued'];
+        delete el.dataset['mermaidInflight'];
     }
 }
 
@@ -402,8 +404,8 @@ function renderSingleMermaid(el: HTMLElement): void {
     // Phase 127-N2: synchronous queued guard prevents duplicate enqueueing when
     // renderMermaidBlocks immediate mode fires repeatedly (e.g. VS onPostRender
     // on every scroll). Class/dataset is set right away so the next pass skips.
-    if (el.dataset.mermaidQueued === '1') return;
-    el.dataset.mermaidQueued = '1';
+    if (el.dataset['mermaidQueued'] === '1') return;
+    el.dataset['mermaidQueued'] = '1';
     // Phase 127-F6: .catch tail keeps the queue alive after any rejection so
     // one bad render cannot permanently block subsequent diagrams.
     mermaidQueue = mermaidQueue
@@ -430,7 +432,7 @@ export async function renderMermaidBlocks(
     if (!pending.length) return;
     ensureMermaidObserver();
     for (const el of pending) {
-        if (el.dataset.mermaidQueued === '1') continue;   // N2 guard
+        if (el.dataset['mermaidQueued'] === '1') continue;   // N2 guard
         if (opts.immediate) {
             const rect = el.getBoundingClientRect();
             const vh = window.innerHeight || document.documentElement.clientHeight;
@@ -457,11 +459,11 @@ export function releaseMermaidNodes(scope: HTMLElement): void {
     scope.querySelectorAll<HTMLElement>(selector).forEach((el) => nodes.push(el));
     for (const el of nodes) {
         mermaidObserver.unobserve(el);
-        delete el.dataset.mermaidQueued;
-        delete el.dataset.mermaidQueuedAt;
-        delete el.dataset.mermaidInflight;
+        delete el.dataset['mermaidQueued'];
+        delete el.dataset['mermaidQueuedAt'];
+        delete el.dataset['mermaidInflight'];
         if (!el.classList.contains('mermaid-rendered')
-            && (el.dataset.mermaidCodeRaw || el.dataset.mermaidCode)) {
+            && (el.dataset['mermaidCodeRaw'] || el.dataset['mermaidCode'])) {
             el.classList.add('mermaid-pending');
         }
     }
@@ -540,7 +542,7 @@ function ensureMarked(): boolean {
 export function rehighlightAll(scope?: HTMLElement | Document): void {
     const root = scope || document;
     root.querySelectorAll('.code-block pre code, .code-block-wrapper pre code').forEach(el => {
-        if ((el as HTMLElement).dataset.highlighted === 'yes') return;
+        if ((el as HTMLElement).dataset['highlighted'] === 'yes') return;
         const lang = [...el.classList].find(c => c.startsWith('language-'))?.replace('language-', '');
         const raw = el.textContent || '';
         try {
@@ -549,7 +551,7 @@ export function rehighlightAll(scope?: HTMLElement | Document): void {
             } else {
                 el.innerHTML = hljs.highlightAuto(raw).value;
             }
-            (el as HTMLElement).dataset.highlighted = 'yes';
+            (el as HTMLElement).dataset['highlighted'] = 'yes';
         } catch { /* ignore */ }
     });
 }
@@ -763,8 +765,8 @@ function ensureDiagramActionDelegation(): void {
             const container = diagCopyBtn.closest('.diagram-container') as HTMLElement | null;
             if (!container) return;
             let text = '';
-            if (container.dataset.widgetHtml) {
-                try { text = decodeURIComponent(escape(atob(container.dataset.widgetHtml))); }
+            if (container.dataset['widgetHtml']) {
+                try { text = decodeURIComponent(escape(atob(container.dataset['widgetHtml']))); }
                 catch { return; }
             } else {
                 const svgEl = container.querySelector('svg');
@@ -778,7 +780,7 @@ function ensureDiagramActionDelegation(): void {
         if (mermaidCopyBtn) {
             const container = mermaidCopyBtn.closest('.mermaid-container') as HTMLElement | null;
             if (!container) return;
-            const code = container.dataset.mermaidCode || '';
+            const code = container.dataset['mermaidCode'] || '';
             if (code) btnFeedback(mermaidCopyBtn, code, 'copy');
             return;
         }
@@ -789,7 +791,7 @@ function ensureDiagramActionDelegation(): void {
             const container = diagSaveBtn.closest('.diagram-container') as HTMLElement | null;
             if (!container) return;
             // Widget: request screenshot via bridge
-            if (container.dataset.widgetHtml) {
+            if (container.dataset['widgetHtml']) {
                 const iframe = container.querySelector('iframe') as HTMLIFrameElement | null;
                 if (iframe?.contentWindow) {
                     iframe.contentWindow.postMessage({ type: 'jaw-request-screenshot' }, '*');
@@ -929,8 +931,8 @@ function unshieldSvgBlocks(html: string, blocks: SvgBlock[]): string {
 export function bindDiagramZoom(scope?: HTMLElement | Document): void {
     const root = scope || document;
     root.querySelectorAll('.diagram-zoom-btn, .mermaid-zoom-btn').forEach(btn => {
-        if ((btn as HTMLElement).dataset.bound) return;
-        (btn as HTMLElement).dataset.bound = '1';
+        if ((btn as HTMLElement).dataset['bound']) return;
+        (btn as HTMLElement).dataset['bound'] = '1';
         btn.addEventListener('click', () => {
             if (btn.closest('.diagram-widget')) return;
             const container = btn.closest('.diagram-container, .mermaid-container');

package/public/js/sanitizer.ts

@@ -77,3 +77,7 @@ export function getDOMPurify(): DOMPurifyLike {
     registerAttributeHook(purifySingleton);
     return purifySingleton;
 }
+
+export function resetDOMPurifyForTests(): void {
+    purifySingleton = null;
+}