cli-jaw 1.4.11 → 1.5.0

package/public/js/features/sidebar.ts

@@ -12,7 +12,8 @@ const STORAGE_KEY = 'sidebarState';
 const BREAKPOINT = 900;
 
 export function initSidebar(): void {
-    const saved: SidebarState = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+    let saved: SidebarState = {};
+    try { saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}'); } catch { /* corrupted */ }
     if (saved.left) document.body.classList.add('left-collapsed');
     if (saved.right) document.body.classList.add('right-collapsed');
 
@@ -23,7 +24,8 @@ export function initSidebar(): void {
     window.addEventListener('resize', () => {
         if (window.innerWidth > BREAKPOINT) {
             document.body.classList.remove('left-expanded', 'right-expanded');
-            const s: SidebarState = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+            let s: SidebarState = {};
+            try { s = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}'); } catch { /* corrupted */ }
             document.body.classList.toggle('left-collapsed', !!s.left);
             document.body.classList.toggle('right-collapsed', !!s.right);
         } else {

package/public/js/features/skills.ts

@@ -46,16 +46,17 @@ export function renderSkills(): void {
 
     list.innerHTML = filtered.map(s => {
         const reqParts: string[] = [];
-        if (s.requires?.env) reqParts.push('🔑 ' + s.requires.env.join(', '));
-        if (s.requires?.bins) reqParts.push('⚙️ ' + s.requires.bins.join(', '));
-        if (s.install) reqParts.push(s.install);
+        if (s.requires?.env) reqParts.push('🔑 ' + s.requires.env.map(e => escapeHtml(e)).join(', '));
+        if (s.requires?.bins) reqParts.push('⚙️ ' + s.requires.bins.map(b => escapeHtml(b)).join(', '));
+        if (s.install) reqParts.push(escapeHtml(s.install));
         return `
         <div class="skill-card ${s.enabled ? 'enabled' : ''}">
             <div class="skill-card-header">
                 <span class="skill-emoji">${escapeHtml(s.emoji || '🔧')}</span>
                 <span class="skill-name">${escapeHtml(s.name || s.id)}</span>
                 <button class="skill-toggle ${s.enabled ? 'on' : 'off'}"
-                        data-skill-id="${escapeHtml(s.id)}" data-skill-enabled="${s.enabled}"></button>
+                        data-skill-id="${escapeHtml(s.id)}" data-skill-enabled="${s.enabled}"
+                        aria-label="${escapeHtml((s.name || s.id) + ' toggle')}"></button>
             </div>
             <div class="skill-desc">${escapeHtml(s.description || '')}</div>
             ${reqParts.length ? `<div class="skill-req">${reqParts.join(' · ')}</div>` : ''}

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

@@ -2,6 +2,7 @@
 import { getPreferredLocale } from '../locale.js';
 import { t } from './i18n.js';
 import { api } from '../api.js';
+import { escapeHtml } from '../render.js';
 
 interface SlashCommand {
     name: string;
@@ -25,14 +26,6 @@ function looksLikeFilePath(text: string): boolean {
 const dropdown = (): HTMLElement | null => document.getElementById('cmdDropdown');
 const input = (): HTMLTextAreaElement | null => document.getElementById('chatInput') as HTMLTextAreaElement | null;
 
-function escapeHtml(str: string): string {
-    return String(str || '')
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-}
-
 function filterCommands(partial: string): SlashCommand[] {
     const prefix = String(partial || '').toLowerCase();
     return cmdList.filter(c => (`/${c.name}`).startsWith(prefix));

package/public/js/features/theme.ts

@@ -1,13 +1,24 @@
 // ── Theme Toggle ──
 // Dark/Light theme switching with localStorage persistence
-// Swaps CSS data-theme attribute + highlight.js stylesheet
+// hljs themes bundled via npm (no CDN dependency)
+
+import githubDark from 'highlight.js/styles/github-dark.css?inline';
+import githubLight from 'highlight.js/styles/github.css?inline';
 
 const STORAGE_KEY = 'theme';
-const HLJS_DARK = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css';
-const HLJS_LIGHT = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css';
+let hljsStyleEl: HTMLStyleElement | null = null;
+
+function applyHljsTheme(theme: string): void {
+    const css = theme === 'light' ? githubLight : githubDark;
+    if (!hljsStyleEl) {
+        hljsStyleEl = document.createElement('style');
+        hljsStyleEl.id = 'hljsTheme';
+        document.head.appendChild(hljsStyleEl);
+    }
+    hljsStyleEl.textContent = css;
+}
 
 export function initTheme(): void {
-    // Detect: localStorage → OS preference → default dark
     const saved = localStorage.getItem(STORAGE_KEY);
     const prefer = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
     const theme = saved || prefer;
@@ -26,15 +37,10 @@ function toggleTheme(): void {
 function applyTheme(theme: string): void {
     document.documentElement.setAttribute('data-theme', theme);
 
-    // Update button icon (SVG sun/moon swap)
     const btn = document.getElementById('toggleTheme');
     if (btn) {
         btn.classList.toggle('is-light', theme === 'light');
     }
 
-    // Swap highlight.js theme
-    const hljsLink = document.getElementById('hljsTheme') as HTMLLinkElement | null;
-    if (hljsLink) {
-        hljsLink.href = theme === 'dark' ? HLJS_DARK : HLJS_LIGHT;
-    }
+    applyHljsTheme(theme);
 }

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

@@ -0,0 +1,113 @@
+// ── Tool Use UI ──
+// Phase 4/8: Tool call group rendering for agent messages
+// Extracted from ui.ts for modularity.
+
+import { escapeHtml } from '../render.js';
+
+export interface ToolLogEntry {
+    icon: string;
+    label: string;
+    detail?: string;
+    toolType?: string;
+    stepRef?: string;
+}
+
+function hasExpandableDetail(tl: ToolLogEntry): boolean {
+    const detail = (tl.detail || '').trim();
+    if (!detail) return false;
+    return detail !== (tl.label || '').trim();
+}
+
+function previewText(text: string, max = 100): string {
+    const singleLine = text.replace(/\s+/g, ' ').trim();
+    if (!singleLine) return '';
+    return singleLine.length > max ? `${singleLine.slice(0, max - 1)}…` : singleLine;
+}
+
+function renderToolItem(tl: ToolLogEntry, idx: number): string {
+    const icon = escapeHtml(tl.icon);
+    const label = escapeHtml(tl.label);
+    const detail = tl.detail || '';
+    const detailId = `tool-detail-${Date.now()}-${idx}`;
+
+    if (hasExpandableDetail(tl)) {
+        const snippet = previewText(detail);
+        const snippetHtml = snippet
+            ? `<span class="tool-item-snippet">${escapeHtml(snippet)}</span>`
+            : '';
+        return `<div class="tool-item tool-item-expandable">
+            <button class="tool-item-toggle" aria-expanded="false" aria-controls="${detailId}">
+                <span class="tool-item-icon">${icon}</span>
+                <span class="tool-item-main">
+                    <span class="tool-item-label">${label}</span>
+                    ${snippetHtml}
+                </span>
+                <span class="tool-item-chevron">▸</span>
+            </button>
+            <div class="tool-item-details collapsed" id="${detailId}">
+                <pre class="tool-item-full">${escapeHtml(detail)}</pre>
+            </div>
+        </div>`;
+    }
+
+    return `<div class="tool-item"><div class="tool-item-header"><span class="tool-item-icon">${icon}</span><span class="tool-item-label">${label}</span></div></div>`;
+}
+
+/** Build tool group HTML from finalized tool log entries */
+export function buildToolGroupHtml(toolLog: ToolLogEntry[]): string {
+    if (!toolLog || toolLog.length === 0) return '';
+
+    const counts: Record<string, number> = {};
+    toolLog.forEach(tl => {
+        counts[tl.icon] = (counts[tl.icon] || 0) + 1;
+    });
+
+    const summaryParts = Object.entries(counts)
+        .map(([icon, n]) => `${escapeHtml(icon)}×${n}`)
+        .join(' ');
+
+    const toolId = `td-${Date.now()}`;
+
+    const logLines = toolLog.map((tl, i) => renderToolItem(tl, i)).join('');
+
+    return `<div class="tool-group"><button class="tool-group-summary" aria-expanded="false" aria-controls="${toolId}"><span class="tool-status-dot done"></span><span class="tool-group-summary-text">${summaryParts}</span><span class="tool-group-chevron">▾</span></button><div class="tool-details collapsed" id="${toolId}">${logLines}</div></div>`;
+}
+
+/** Bind expand/collapse click handlers for tool items within a container */
+export function bindToolItemInteractions(root: HTMLElement): void {
+    if (root.dataset.toolItemBound === '1') return;
+    root.addEventListener('click', (event) => {
+        const target = event.target as HTMLElement | null;
+        if (!target) return;
+        const toggle = target.closest('.tool-item-toggle') as HTMLElement | null;
+        if (!toggle) return;
+        const wrapper = toggle.closest('.tool-item');
+        const details = wrapper?.querySelector('.tool-item-details') as HTMLElement | null;
+        const chevron = toggle.querySelector('.tool-item-chevron');
+        if (!wrapper || !details) return;
+        const expanding = details.classList.contains('collapsed');
+        details.classList.toggle('collapsed', !expanding);
+        wrapper.classList.toggle('expanded', expanding);
+        toggle.setAttribute('aria-expanded', expanding ? 'true' : 'false');
+        if (chevron) chevron.textContent = expanding ? '▾' : '▸';
+    });
+    root.dataset.toolItemBound = '1';
+}
+
+/** Show live tool activity indicator inside the current agent message */
+export function renderLiveToolActivity(msgDiv: HTMLElement, label: string): void {
+    let liveEl = msgDiv.querySelector('.tool-activity-live') as HTMLElement | null;
+    if (!liveEl) {
+        liveEl = document.createElement('div');
+        liveEl.className = 'tool-activity-live';
+        const content = msgDiv.querySelector('.msg-content');
+        if (content) content.before(liveEl);
+    }
+    liveEl.innerHTML = `<span class="tool-status-dot running"></span><span>${escapeHtml(label)}</span>`;
+}
+
+/** Clean up all live tool activity indicators */
+export function cleanupToolElements(): void {
+    document.querySelectorAll('.tool-activity-live').forEach(el => el.remove());
+    document.querySelectorAll('.msg-system.tool-activity').forEach(el => el.remove());
+}

package/public/js/main.ts

@@ -1,6 +1,9 @@
 // ── App Entry Point ──
 // All event bindings happen here (no inline onclick in HTML)
 
+// CSS imports — bundled by Vite
+import 'katex/dist/katex.min.css';
+
 // ── Global Error Boundary ──
 window.addEventListener('unhandledrejection', (e) => {
     console.error('[unhandled]', e.reason);
@@ -11,24 +14,26 @@ window.addEventListener('error', (e) => {
 });
 
 import { connect } from './ws.js';
-import { switchTab, handleSave, loadStats, loadMessages, loadMemory, initMsgCopy } from './ui.js';
+import { switchTab, handleSave, loadMessages, initMsgCopy } from './ui.js';
 import { sendMessage, handleKey, clearAttachedFiles, removeAttachedFile, clearChat, initDragDrop, initAutoResize } from './features/chat.js';
 import {
     loadCommands, update as updateSlashDropdown, handleKeydown as handleSlashKeydown,
     handleClick as handleSlashClick, handleOutsideClick as handleSlashOutsideClick,
 } from './features/slash-commands.js';
-import { loadSkills, toggleSkill, filterSkills } from './features/skills.js';
+import { toggleSkill, filterSkills } from './features/skills.js';
 import {
-    loadSettings, setPerm, handleModelSelect, applyCustomModel, onCliChange,
-    saveActiveCliSettings, savePerCli, updateSettings, openPromptModal,
+    loadSettings, handleModelSelect, applyCustomModel, onCliChange,
+    saveActiveCliSettings, savePerCli, openPromptModal,
     closePromptModal, savePromptFromModal, syncMcpServers, installMcpGlobal,
-    loadCliStatus, setTelegram, setForwardAll, saveTelegramSettings, saveFallbackOrder,
+    loadCliStatus, setTelegram, setForwardAll, saveTelegramSettings,
+    setDiscord, setDiscordForwardAll, setDiscordAllowBots, saveDiscordSettings, setActiveChannel,
+    saveFallbackOrder,
     openTemplateModal, saveTemplateFromModal, closeTemplateModal, templateGoBack, toggleDevMode
 } from './features/settings.js';
-import {
+const {
     loadEmployees, addEmployee, deleteEmployee, updateEmployee,
     onEmpCliChange, onEmpRoleChange
-} from './features/employees.js';
+} = await import('./features/employees.js');
 import {
     openHeartbeatModal, closeHeartbeatModal, addHeartbeatJob,
     removeHeartbeatJob, renderHeartbeatJobs, toggleHeartbeatJob, saveHeartbeatJobs,
@@ -45,6 +50,7 @@ import { loadCliRegistry, getCliKeys } from './constants.js';
 import { initAppName } from './features/appname.js';
 import { initSidebar, toggleLeft, toggleRight } from './features/sidebar.js';
 import { initTheme } from './features/theme.js';
+import { initGestures } from './features/gesture.js';
 import { initI18n, setLang, getLang, t } from './features/i18n.js';
 import { toggleRecording, cancelRecording } from './features/voice-recorder.js';
 
@@ -170,6 +176,18 @@ document.getElementById('tgForwardOff')?.addEventListener('click', () => setForw
 document.getElementById('tgForwardOn')?.addEventListener('click', () => setForwardAll(true));
 document.getElementById('tgToken')?.addEventListener('change', saveTelegramSettings);
 document.getElementById('tgChatIds')?.addEventListener('change', saveTelegramSettings);
+// Discord
+document.getElementById('chTelegram')?.addEventListener('click', () => setActiveChannel('telegram'));
+document.getElementById('chDiscord')?.addEventListener('click', () => setActiveChannel('discord'));
+document.getElementById('dcOff')?.addEventListener('click', () => setDiscord(false));
+document.getElementById('dcOn')?.addEventListener('click', () => setDiscord(true));
+document.getElementById('dcForwardOff')?.addEventListener('click', () => setDiscordForwardAll(false));
+document.getElementById('dcForwardOn')?.addEventListener('click', () => setDiscordForwardAll(true));
+document.getElementById('dcAllowBotsOff')?.addEventListener('click', () => setDiscordAllowBots(false));
+document.getElementById('dcAllowBotsOn')?.addEventListener('click', () => setDiscordAllowBots(true));
+document.getElementById('dcToken')?.addEventListener('change', saveDiscordSettings);
+document.getElementById('dcGuildId')?.addEventListener('change', saveDiscordSettings);
+document.getElementById('dcChannelIds')?.addEventListener('change', saveDiscordSettings);
 document.getElementById('fallbackOrderList')?.addEventListener('change', saveFallbackOrder);
 
 // Codex fast mode toggle
@@ -201,6 +219,42 @@ document.getElementById('codexCtxOn')?.addEventListener('click', () => setCodexC
 document.getElementById('codexCtxOff')?.addEventListener('click', () => setCodexCtx(false));
 document.getElementById('codexCtxWindow')?.addEventListener('change', savePerCli);
 document.getElementById('codexCtxCompact')?.addEventListener('change', savePerCli);
+
+// Claude 1M context toggle — switches model between base and [1m] variant
+function setClaude1m(on: boolean) {
+    const onBtn = document.getElementById('claude1mOn');
+    const offBtn = document.getElementById('claude1mOff');
+    const modelSel = document.getElementById('modelClaude') as HTMLSelectElement | null;
+
+    let effective = on;
+    if (modelSel) {
+        let current = modelSel.value || '';
+        if (on && !current.endsWith('[1m]')) {
+            const target = current + '[1m]';
+            if (Array.from(modelSel.options).some(o => o.value === target)) {
+                modelSel.value = target;
+            } else {
+                effective = false; // no [1m] variant available
+            }
+        } else if (!on && current.endsWith('[1m]')) {
+            const base = current.replace(/\[1m\]$/, '');
+            if (Array.from(modelSel.options).some(o => o.value === base)) {
+                modelSel.value = base;
+            } else {
+                effective = true; // can't remove [1m], stay on
+            }
+        } else {
+            effective = current.endsWith('[1m]');
+        }
+    }
+    if (onBtn && offBtn) {
+        onBtn.classList.toggle('active', effective);
+        offBtn.classList.toggle('active', !effective);
+    }
+    savePerCli();
+}
+document.getElementById('claude1mOn')?.addEventListener('click', () => setClaude1m(true));
+document.getElementById('claude1mOff')?.addEventListener('click', () => setClaude1m(false));
 // Per-CLI model selects
 function bindPerCliControlEvents(): void {
     for (const cli of getCliKeys()) {
@@ -357,7 +411,6 @@ async function bootstrap(): Promise<void> {
     await loadCommands();
     await loadSettings();
     loadCliStatus();
-    loadMemory();
     // loadMessages() is handled by ws.js onopen (clear + reload)
     loadEmployees();
     initHeartbeatBadge();
@@ -365,6 +418,12 @@ async function bootstrap(): Promise<void> {
     initSidebar();
     initTheme();
     initMsgCopy();
+    initGestures();
+
+    // Register Service Worker (production only — Vite HMR handles dev)
+    if ('serviceWorker' in navigator && !import.meta.env.DEV) {
+        navigator.serviceWorker.register('/sw.js').catch(() => {});
+    }
 }
 
 void bootstrap().catch((err: unknown) => {