cli-jaw 1.4.11 → 1.5.0

package/public/js/constants.ts

@@ -14,7 +14,7 @@ const FALLBACK_CLI_REGISTRY: CliRegistry = {
     claude: {
         label: 'Claude',
         efforts: ['low', 'medium', 'high'],
-        models: ['claude-sonnet-4-6', 'claude-opus-4-6', 'claude-sonnet-4-6[1m]', 'claude-opus-4-6[1m]', 'claude-haiku-4-5-20251001'],
+        models: ['sonnet', 'opus', 'sonnet[1m]', 'opus[1m]', 'haiku'],
     },
     codex: {
         label: 'Codex',
@@ -134,10 +134,10 @@ export interface RolePreset {
 }
 
 export const ROLE_PRESETS: readonly RolePreset[] = [
-    { value: 'frontend', labelKey: 'role.label.frontend', label: 'Frontend', prompt: 'UI/UX, CSS, components', skill: 'dev-frontend' },
-    { value: 'backend', labelKey: 'role.label.backend', label: 'Backend', prompt: 'API, DB, server logic', skill: 'dev-backend' },
-    { value: 'research', labelKey: 'role.label.research', label: 'Research', prompt: 'Search, codebase exploration, uncertainty reduction, read-only reports', skill: 'research-worker' },
-    { value: 'data', labelKey: 'role.label.data', label: 'Data', prompt: 'Data pipeline, analysis, ML', skill: 'dev-data' },
-    { value: 'docs', labelKey: 'role.label.docs', label: 'Docs', prompt: 'Documentation, README, API docs', skill: 'documentation' },
+    { value: 'frontend', labelKey: 'role.label.frontend', label: 'Frontend', prompt: 'Frontend employee — UI/UX, CSS, components', skill: 'dev-frontend' },
+    { value: 'backend', labelKey: 'role.label.backend', label: 'Backend', prompt: 'Backend employee — API, DB, server logic', skill: 'dev-backend' },
+    { value: 'research', labelKey: 'role.label.research', label: 'Research', prompt: 'Research employee — search, codebase exploration, uncertainty reduction, read-only reports', skill: 'research-worker' },
+    { value: 'data', labelKey: 'role.label.data', label: 'Data', prompt: 'Data employee — data pipeline, analysis, ML', skill: 'dev-data' },
+    { value: 'docs', labelKey: 'role.label.docs', label: 'Docs', prompt: 'Docs employee — documentation, README, API docs', skill: 'documentation' },
     { value: 'custom', labelKey: 'role.label.custom', label: 'Custom...', prompt: '', skill: null },
 ] as const;

package/public/js/features/chat.ts

@@ -1,10 +1,15 @@
 // ── Chat Feature ──
 import { state } from '../state.js';
-import { addMessage, addSystemMsg, scrollToBottom } from '../ui.js';
+import { addMessage, addSystemMsg } from '../ui.js';
 import { getPreferredLocale } from '../locale.js';
 import { t } from './i18n.js';
 import * as slashCmd from './slash-commands.js';
 import { api, apiJson, apiFire } from '../api.js';
+import { escapeHtml } from '../render.js';
+import { getVirtualScroll } from '../virtual-scroll.js';
+import { clearCache } from './idb-cache.js';
+
+let activeObjectURLs: string[] = [];
 
 interface CommandResult { code?: string; text?: string; type?: string; }
 interface MessageResult { queued?: boolean; pending?: number; continued?: boolean; error?: string; }
@@ -63,6 +68,7 @@ export async function sendMessage(): Promise<void> {
             }
             if (!res.ok && !result?.text) throw new Error(`HTTP ${res.status}`);
             if (result?.code === 'clear_screen') {
+                getVirtualScroll().clear();
                 const chatEl = document.getElementById('chatMessages');
                 if (chatEl) chatEl.innerHTML = '';
             }
@@ -143,6 +149,8 @@ export function removeAttachedFile(index: number): void {
 }
 
 export function clearAttachedFiles(): void {
+    activeObjectURLs.forEach(url => URL.revokeObjectURL(url));
+    activeObjectURLs = [];
     state.attachedFiles = [];
     renderFilePreview();
     const fi = document.getElementById('fileInput') as HTMLInputElement | null;
@@ -153,6 +161,9 @@ function renderFilePreview(): void {
     const preview = document.getElementById('filePreview');
     const listEl = document.getElementById('filePreviewList');
     if (!preview) return;
+    // Revoke all previous object URLs before creating new ones
+    activeObjectURLs.forEach(url => URL.revokeObjectURL(url));
+    activeObjectURLs = [];
     if (!state.attachedFiles.length) {
         preview.classList.remove('visible');
         if (listEl) listEl.innerHTML = '';
@@ -163,10 +174,15 @@ function renderFilePreview(): void {
     listEl.innerHTML = state.attachedFiles.map((f: File, i: number) => {
         const size = (f.size / 1024).toFixed(1);
         const isImg = f.type.startsWith('image/');
-        const thumb = isImg ? `<img src="${URL.createObjectURL(f)}" class="file-chip-thumb" alt="">` : '';
+        let thumb = '';
+        if (isImg) {
+            const url = URL.createObjectURL(f);
+            activeObjectURLs.push(url);
+            thumb = `<img src="${url}" class="file-chip-thumb" alt="">`;
+        }
         return `<div class="file-chip">
             ${thumb}
-            <span class="file-chip-name">📎 ${f.name} (${size}KB)</span>
+            <span class="file-chip-name">📎 ${escapeHtml(f.name)} (${size}KB)</span>
             <button class="file-chip-remove" data-file-idx="${i}" title="Remove">✕</button>
         </div>`;
     }).join('');
@@ -174,8 +190,12 @@ function renderFilePreview(): void {
 
 export async function clearChat(): Promise<void> {
     apiFire('/api/clear', 'POST');
+    getVirtualScroll().clear();
     const chatEl = document.getElementById('chatMessages');
     if (chatEl) chatEl.innerHTML = '';
+    const { cleanupToolActivity } = await import('../ui.js');
+    cleanupToolActivity();
+    clearCache().catch(() => {});
 }
 
 // ── Auto-resize textarea ──

package/public/js/features/employees.ts

@@ -70,7 +70,7 @@ export function renderEmployees(): void {
         const p = ps?.phase || a.phase;
         const pl = ps?.phaseLabel || a.phaseLabel;
         const phaseBadge = p
-            ? `<span style="background:${PHASE_COLORS[p] || '#888'};color:#000;padding:1px 6px;border-radius:9px;font-size:9px">${pl || 'P' + p}</span>`
+            ? `<span style="background:${PHASE_COLORS[p] || '#888'};color:#000;padding:1px 6px;border-radius:9px;font-size:9px">${escapeHtml(pl || 'P' + p)}</span>`
             : '';
 
         return `
@@ -79,36 +79,36 @@ export function renderEmployees(): void {
                 <span style="width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;flex-shrink:0"></span>
                 <input style="flex:1;background:none;border:none;color:var(--text);font-size:12px;font-weight:600;font-family:inherit;outline:none"
                        value="${escapeHtml(a.name || 'Agent')}"
-                       data-emp-name="${a.id}">
-                <button style="background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:12px" data-emp-delete="${a.id}" title="${t('emp.delete')}">✕</button>
+                       data-emp-name="${escapeHtml(a.id)}">
+                <button style="background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:12px" data-emp-delete="${escapeHtml(a.id)}" title="${t('emp.delete')}">✕</button>
             </div>
             <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:4px">
                 <div>
                     <label>CLI</label>
-                    <select data-emp-cli="${a.id}">
-                        ${cliKeys.map(c => `<option${a.cli === c ? ' selected' : ''}>${c}</option>`).join('')}
+                    <select data-emp-cli="${escapeHtml(a.id)}">
+                        ${cliKeys.map(c => `<option${a.cli === c ? ' selected' : ''}>${escapeHtml(c)}</option>`).join('')}
                     </select>
                 </div>
                 <div>
                     <label>Model</label>
-                    <select data-emp-model="${a.id}">
+                    <select data-emp-model="${escapeHtml(a.id)}">
                         <option value="default"${(!a.model || a.model === 'default') ? ' selected' : ''}>default</option>
-                        ${models.map(m => `<option${a.model === m ? ' selected' : ''}>${m}</option>`).join('')}
-                        ${a.model && a.model !== 'default' && !models.includes(a.model) ? `<option selected>${a.model}</option>` : ''}
+                        ${models.map(m => `<option${a.model === m ? ' selected' : ''}>${escapeHtml(m)}</option>`).join('')}
+                        ${a.model && a.model !== 'default' && !models.includes(a.model) ? `<option selected>${escapeHtml(a.model)}</option>` : ''}
                         <option value="__custom__">${t('emp.customModel')}</option>
                     </select>
                 </div>
             </div>
             <div>
                 <label>Role</label>
-                <select data-emp-role="${a.id}">
+                <select data-emp-role="${escapeHtml(a.id)}">
                     ${ROLE_PRESETS.map(r => `<option value="${r.value}"${presetVal === r.value ? ' selected' : ''}>${r.label}</option>`).join('')}
                 </select>
-                <textarea data-emp-custom="${a.id}" style="display:${isCustom ? 'block' : 'none'};margin-top:4px;width:100%;height:40px;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:4px 6px;border-radius:4px;font-size:10px;font-family:inherit;resize:vertical"
+                <textarea data-emp-custom="${escapeHtml(a.id)}" style="display:${isCustom ? 'block' : 'none'};margin-top:4px;width:100%;height:40px;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:4px 6px;border-radius:4px;font-size:10px;font-family:inherit;resize:vertical"
                           placeholder="${t('emp.customRole')}">${isCustom ? escapeHtml(a.role || '') : ''}</textarea>
             </div>
             <div style="margin-top:4px;font-size:10px;display:flex;align-items:center;gap:6px">
-                <span style="color:${a.status === 'running' ? '#fbbf24' : 'var(--green)'}">● ${a.status || 'idle'}</span>
+                <span style="color:${a.status === 'running' ? '#fbbf24' : 'var(--green)'}">● ${escapeHtml(a.status || 'idle')}</span>
                 ${phaseBadge}
             </div>
         </div>`;
@@ -135,7 +135,7 @@ export function onEmpCliChange(id: string, cli: string): void {
             models.map(m => `<option>${escapeHtml(m)}</option>`).join('') +
             `<option value="__custom__">${t('emp.customModel')}</option>`;
     }
-    updateEmployee(id, { cli, model: 'default' });
+    updateEmployee(id, { cli, model: cli === 'claude' ? 'sonnet' : 'default' });
 }
 
 export function onEmpRoleChange(id: string, presetVal: string): void {

package/public/js/features/gesture.ts

@@ -0,0 +1,61 @@
+// ── Touch Gestures ──
+// Swipe from screen edges to toggle sidebars on mobile
+
+import { toggleLeft, toggleRight } from './sidebar.js';
+
+const SWIPE_THRESHOLD = 50;
+const EDGE_ZONE = 30;
+const MAX_Y_DRIFT = 80;
+const MAX_TIME = 500;
+
+interface TouchState {
+    startX: number;
+    startY: number;
+    startTime: number;
+    isEdge: 'left' | 'right' | null;
+}
+
+let touch: TouchState | null = null;
+let initialized = false;
+
+export function initGestures(): void {
+    if (initialized || !('ontouchstart' in window)) return;
+    initialized = true;
+
+    const chat = document.querySelector('.chat-area') as HTMLElement | null;
+    if (!chat) return;
+
+    chat.addEventListener('touchstart', onTouchStart as EventListener, { passive: true });
+    chat.addEventListener('touchend', onTouchEnd as EventListener, { passive: true });
+}
+
+function onTouchStart(e: TouchEvent): void {
+    const t = e.touches[0];
+    const vw = window.innerWidth;
+
+    let isEdge: 'left' | 'right' | null = null;
+    if (t.clientX < EDGE_ZONE) isEdge = 'left';
+    else if (t.clientX > vw - EDGE_ZONE) isEdge = 'right';
+
+    touch = {
+        startX: t.clientX,
+        startY: t.clientY,
+        startTime: Date.now(),
+        isEdge,
+    };
+}
+
+function onTouchEnd(e: TouchEvent): void {
+    if (!touch) return;
+    const t = e.changedTouches[0];
+    const dx = t.clientX - touch.startX;
+    const dy = Math.abs(t.clientY - touch.startY);
+    const dt = Date.now() - touch.startTime;
+    const prev = touch;
+    touch = null;
+
+    if (dy > MAX_Y_DRIFT || dt > MAX_TIME || Math.abs(dx) < SWIPE_THRESHOLD) return;
+
+    if (dx > 0 && prev.isEdge === 'left') toggleLeft();
+    if (dx < 0 && prev.isEdge === 'right') toggleRight();
+}

package/public/js/features/heartbeat.ts

@@ -54,7 +54,7 @@ export function renderHeartbeatJobs(): void {
                         <input type="text" value="${escapeHtml(String(job.name || ''))}" placeholder="${escapeHtml(t('hb.name'))}"
                             data-hb-name="${i}">
                         <button class="hb-toggle ${job.enabled ? 'on' : 'off'}"
-                            data-hb-toggle="${i}"></button>
+                            data-hb-toggle="${i}" aria-label="${escapeHtml(String(job.name || 'job') + ' toggle')}"></button>
                         <button class="hb-del" data-hb-remove="${i}">✕</button>
                     </div>
                     <div class="hb-job-schedule">

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

@@ -0,0 +1,89 @@
+// ── IndexedDB Offline Cache ──
+// Caches conversation messages for offline viewing
+// Auto-syncs when server reconnects
+
+const DB_NAME = 'clijaw';
+const DB_VERSION = 1;
+const STORE = 'messages';
+
+export interface CachedMessage {
+    id?: number;
+    role: string;
+    content: string;
+    timestamp: number;
+}
+
+let dbPromise: Promise<IDBDatabase> | null = null;
+
+function openDB(): Promise<IDBDatabase> {
+    if (dbPromise) return dbPromise;
+    dbPromise = new Promise((resolve, reject) => {
+        const req = indexedDB.open(DB_NAME, DB_VERSION);
+        req.onupgradeneeded = () => {
+            const db = req.result;
+            if (!db.objectStoreNames.contains(STORE)) {
+                const store = db.createObjectStore(STORE, { keyPath: 'id', autoIncrement: true });
+                store.createIndex('timestamp', 'timestamp');
+            }
+        };
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => {
+            dbPromise = null;
+            reject(req.error);
+        };
+    });
+    return dbPromise;
+}
+
+export async function cacheMessages(messages: CachedMessage[]): Promise<void> {
+    try {
+        const db = await openDB();
+        const tx = db.transaction(STORE, 'readwrite');
+        const store = tx.objectStore(STORE);
+        store.clear();
+        for (const msg of messages) {
+            store.add({ role: msg.role, content: msg.content, timestamp: msg.timestamp || Date.now() });
+        }
+        await new Promise<void>((resolve, reject) => {
+            tx.oncomplete = () => resolve();
+            tx.onerror = () => reject(tx.error);
+        });
+    } catch (e) {
+        console.warn('[idb-cache] cacheMessages failed:', e);
+    }
+}
+
+export async function getCachedMessages(): Promise<CachedMessage[]> {
+    try {
+        const db = await openDB();
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE, 'readonly');
+            const req = tx.objectStore(STORE).getAll();
+            req.onsuccess = () => resolve(req.result);
+            req.onerror = () => reject(req.error);
+        });
+    } catch (e) {
+        console.warn('[idb-cache] getCachedMessages failed:', e);
+        return [];
+    }
+}
+
+export async function appendCachedMessage(role: string, content: string): Promise<void> {
+    try {
+        const db = await openDB();
+        const tx = db.transaction(STORE, 'readwrite');
+        tx.objectStore(STORE).add({ role, content, timestamp: Date.now() });
+    } catch (e) {
+        console.warn('[idb-cache] appendCachedMessage failed:', e);
+    }
+}
+
+export async function clearCache(): Promise<void> {
+    try {
+        const db = await openDB();
+        const tx = db.transaction(STORE, 'readwrite');
+        tx.objectStore(STORE).clear();
+    } catch (e) {
+        console.warn('[idb-cache] clearCache failed:', e);
+    }
+}

package/public/js/features/memory.ts

@@ -256,6 +256,9 @@ export function switchMemTab(tab: string): void {
     $('memTabBtnSettings')?.classList.toggle('active', tab === 'settings');
     $('memTabBtnAdvOps')?.classList.toggle('active', tab === 'status');
     $('memTabBtnFiles')?.classList.toggle('active', tab === 'files');
+    $('memTabBtnSettings')?.setAttribute('aria-selected', String(tab === 'settings'));
+    $('memTabBtnAdvOps')?.setAttribute('aria-selected', String(tab === 'status'));
+    $('memTabBtnFiles')?.setAttribute('aria-selected', String(tab === 'files'));
 }
 
 export async function setMemEnabled(v: boolean): Promise<void> {
@@ -327,7 +330,7 @@ export async function viewMemFile(name: string): Promise<void> {
     if (!container) return;
     container.innerHTML = `
         <div style="margin-bottom:8px;display:flex;justify-content:space-between;align-items:center">
-            <span style="font-size:12px;font-weight:600">${data.name}</span>
+            <span style="font-size:12px;font-weight:600">${escapeHtml(data.name)}</span>
             <button data-mem-back style="background:none;border:none;color:var(--accent);cursor:pointer;font-size:11px">← back</button>
         </div>
         <pre style="background:var(--bg);padding:8px;border-radius:4px;font-size:11px;white-space:pre-wrap;max-height:50vh;overflow-y:auto;color:var(--text)">${escapeHtml(data.content)}</pre>

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

@@ -0,0 +1,236 @@
+// ── Process Block ──
+// Collapsible panel showing tool/thinking activity during agent responses.
+
+import { escapeHtml } from '../render.js';
+
+export interface ProcessStep {
+    id: string;
+    type: 'tool' | 'thinking' | 'search';
+    icon: string;
+    label: string;
+    detail?: string;
+    stepRef?: string;
+    status: 'running' | 'done' | 'error';
+    startTime: number;
+}
+
+export interface ProcessBlockState {
+    element: HTMLElement;
+    steps: ProcessStep[];
+    collapsed: boolean;
+}
+
+function buildSummaryText(steps: ProcessStep[]): string {
+    const counts: Record<string, number> = {};
+    for (const s of steps) {
+        const key = s.type === 'thinking' ? '💭 Thinking'
+            : s.type === 'search' ? '🔍 Search'
+            : '🔧 Tool';
+        counts[key] = (counts[key] || 0) + 1;
+    }
+    return Object.entries(counts)
+        .map(([k, n]) => n > 1 ? `${k}×${n}` : k)
+        .join(' + ');
+}
+
+function previewText(text: string, max = 120): string {
+    const singleLine = text.replace(/\s+/g, ' ').trim();
+    if (!singleLine) return '';
+    return singleLine.length > max ? `${singleLine.slice(0, max - 1)}…` : singleLine;
+}
+
+function hasExpandableDetail(step: ProcessStep): boolean {
+    const detail = (step.detail || '').trim();
+    if (!detail) return false;
+    return detail !== (step.label || '').trim();
+}
+
+function renderStep(step: ProcessStep): string {
+    const dotClass = `process-step-dot ${step.status}`;
+    const badgeClass = `process-step-badge ${step.type}`;
+    const badgeText = step.type.toUpperCase();
+    const label = escapeHtml(step.label || step.icon || '');
+    const detail = step.detail || '';
+    const detailId = `process-detail-${step.id}`;
+    const detailPreview = hasExpandableDetail(step)
+        ? previewText(detail, step.type === 'thinking' ? 120 : 100)
+        : '';
+    const snippetHtml = detailPreview
+        ? `<span class="process-step-snippet">${escapeHtml(detailPreview)}</span>`
+        : '';
+
+    if (hasExpandableDetail(step)) {
+        return `<div class="process-step process-step-expandable" data-step-id="${step.id}" data-type="${step.type}">
+            <button class="process-step-toggle" aria-expanded="false" aria-controls="${detailId}">
+                <span class="${dotClass}"></span>
+                <span class="${badgeClass}">${badgeText}</span>
+                <span class="process-step-main">
+                    <span class="process-step-label">${label}</span>
+                    ${snippetHtml}
+                </span>
+                <span class="process-step-chevron">▸</span>
+            </button>
+            <div class="process-step-details collapsed" id="${detailId}">
+                <pre class="process-step-full">${escapeHtml(detail)}</pre>
+            </div>
+        </div>`;
+    }
+
+    return `<div class="process-step" data-step-id="${step.id}" data-type="${step.type}">
+        <span class="${dotClass}"></span>
+        <span class="${badgeClass}">${badgeText}</span>
+        <span class="process-step-label">${label}</span>
+    </div>`;
+}
+
+function blockShell(summaryText = '', collapsed = false): string {
+    return `<div class="process-block${collapsed ? ' collapsed' : ''}">
+        <button class="process-summary" aria-expanded="${collapsed ? 'false' : 'true'}">
+            <span class="process-dot ${collapsed ? 'done' : 'running'}"></span>
+            <span class="process-summary-text">${escapeHtml(summaryText)}</span>
+            <span class="process-duration"></span>
+            <span class="process-chevron">${collapsed ? '▸' : '▾'}</span>
+        </button>
+        <div class="process-details">
+            <div class="process-steps-inner"></div>
+        </div>
+    </div>`;
+}
+
+function toggleStepDetails(toggle: HTMLElement): void {
+    const wrapper = toggle.closest('.process-step');
+    const details = wrapper?.querySelector('.process-step-details') as HTMLElement | null;
+    const chevron = toggle.querySelector('.process-step-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 ? '▾' : '▸';
+}
+
+export function bindProcessBlockInteractions(root: HTMLElement): void {
+    if (root.dataset.processBlockBound === '1') return;
+    root.addEventListener('click', (event) => {
+        const target = event.target as HTMLElement | null;
+        if (!target) return;
+
+        const stepToggle = target.closest('.process-step-toggle') as HTMLElement | null;
+        if (stepToggle) {
+            toggleStepDetails(stepToggle);
+            return;
+        }
+
+        const summary = target.closest('.process-summary') as HTMLElement | null;
+        if (summary) {
+            const block = summary.closest('.process-block');
+            if (!block) return;
+            const expanding = block.classList.contains('collapsed');
+            block.classList.toggle('collapsed', !expanding);
+            summary.setAttribute('aria-expanded', expanding ? 'true' : 'false');
+            const chevron = summary.querySelector('.process-chevron');
+            if (chevron) chevron.textContent = expanding ? '▾' : '▸';
+        }
+    });
+    root.dataset.processBlockBound = '1';
+}
+
+export function buildProcessBlockHtml(steps: ProcessStep[], collapsed = true): string {
+    const summaryText = buildSummaryText(steps);
+    const html = blockShell(summaryText, collapsed);
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = html;
+    const inner = wrapper.querySelector('.process-steps-inner');
+    if (inner) inner.innerHTML = steps.map(renderStep).join('');
+    const dot = wrapper.querySelector('.process-dot');
+    if (dot) {
+        const anyRunning = steps.some(step => step.status === 'running');
+        dot.classList.toggle('running', anyRunning && !collapsed);
+        dot.classList.toggle('done', !anyRunning || collapsed);
+    }
+    return wrapper.innerHTML;
+}
+
+function updateSummary(pb: ProcessBlockState): void {
+    const summaryText = pb.element.querySelector('.process-summary-text');
+    if (summaryText) summaryText.textContent = buildSummaryText(pb.steps);
+
+    const anyRunning = pb.steps.some(s => s.status === 'running');
+    const dot = pb.element.querySelector('.process-dot');
+    if (dot) {
+        dot.classList.toggle('running', anyRunning && !pb.collapsed);
+        dot.classList.toggle('done', !anyRunning || pb.collapsed);
+    }
+
+    const elapsed = pb.steps.length > 0
+        ? Math.round((Date.now() - pb.steps[0].startTime) / 1000)
+        : 0;
+    const dur = pb.element.querySelector('.process-duration');
+    if (dur) dur.textContent = elapsed > 0 ? `${elapsed}s` : '';
+}
+
+export function createProcessBlock(parentEl: HTMLElement): ProcessBlockState {
+    const host = document.createElement('div');
+    host.innerHTML = blockShell('', false);
+    const el = host.firstElementChild as HTMLElement;
+
+    const content = parentEl.querySelector('.msg-content');
+    if (content) content.before(el);
+    else parentEl.appendChild(el);
+
+    return { element: el, steps: [], collapsed: false };
+}
+
+export function addStep(pb: ProcessBlockState, step: ProcessStep): void {
+    pb.steps.push(step);
+    const inner = pb.element.querySelector('.process-steps-inner');
+    if (inner) inner.insertAdjacentHTML('beforeend', renderStep(step));
+    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;
+    const oldEl = pb.element.querySelector(`[data-step-id="${oldStepId}"]`);
+    if (oldEl) {
+        const temp = document.createElement('div');
+        temp.innerHTML = renderStep(newStep);
+        const newEl = temp.firstElementChild;
+        if (newEl) oldEl.replaceWith(newEl);
+    }
+    updateSummary(pb);
+}
+
+export function updateStepStatus(pb: ProcessBlockState, stepId: string, status: ProcessStep['status']): void {
+    const step = pb.steps.find(s => s.id === stepId);
+    if (!step) return;
+    step.status = status;
+    const stepEl = pb.element.querySelector(`[data-step-id="${stepId}"]`);
+    if (stepEl) {
+        const dot = stepEl.querySelector('.process-step-dot');
+        if (dot) {
+            dot.classList.remove('running', 'done', 'error');
+            dot.classList.add(status);
+        }
+    }
+    updateSummary(pb);
+}
+
+export function collapseBlock(pb: ProcessBlockState): void {
+    pb.collapsed = true;
+    pb.element.classList.add('collapsed');
+    const btn = pb.element.querySelector('.process-summary');
+    if (btn) btn.setAttribute('aria-expanded', 'false');
+    const chevron = pb.element.querySelector('.process-chevron');
+    if (chevron) chevron.textContent = '▸';
+
+    for (const step of pb.steps) {
+        if (step.status === 'running') step.status = 'done';
+    }
+    pb.element.querySelectorAll('.process-step-dot.running').forEach(dot => {
+        dot.classList.remove('running');
+        dot.classList.add('done');
+    });
+    updateSummary(pb);
+}

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

@@ -0,0 +1,53 @@
+// ── Active Channel & Fallback Order ──
+import { apiJson } from '../api.js';
+import { escapeHtml } from '../render.js';
+import { t } from './i18n.js';
+import type { SettingsData } from './settings-types.js';
+
+export async function setActiveChannel(ch: 'telegram' | 'discord'): Promise<void> {
+    document.getElementById('chTelegram')?.classList.toggle('active', ch === 'telegram');
+    document.getElementById('chDiscord')?.classList.toggle('active', ch === 'discord');
+    document.getElementById('channelTelegramSettings')?.style.setProperty('display', ch === 'telegram' ? '' : 'none');
+    document.getElementById('channelDiscordSettings')?.style.setProperty('display', ch === 'discord' ? '' : 'none');
+    await apiJson('/api/settings', 'PUT', { channel: ch });
+}
+
+export function loadActiveChannel(s: SettingsData): void {
+    const ch = s.channel || 'telegram';
+    document.getElementById('chTelegram')?.classList.toggle('active', ch === 'telegram');
+    document.getElementById('chDiscord')?.classList.toggle('active', ch === 'discord');
+    document.getElementById('channelTelegramSettings')?.style.setProperty('display', ch === 'telegram' ? '' : 'none');
+    document.getElementById('channelDiscordSettings')?.style.setProperty('display', ch === 'discord' ? '' : 'none');
+}
+
+export function loadFallbackOrder(s: SettingsData): void {
+    const container = document.getElementById('fallbackOrderList');
+    if (!container) return;
+    const allClis = Object.keys(s.perCli || {});
+    const active = s.fallbackOrder || [];
+    const slotCount = Math.min(allClis.length - 1, 3);
+
+    let html = '';
+    for (let i = 0; i < slotCount; i++) {
+        const current = active[i] || '';
+        const opts = allClis.map(cli =>
+            `<option value="${escapeHtml(cli)}" ${cli === current ? 'selected' : ''}>${escapeHtml(cli)}</option>`
+        ).join('');
+        html += `
+            <div class="settings-row sub-row">
+                <label style="min-width:60px">Fallback ${i + 1}</label>
+                <select id="fallback${i}"
+                    style="font-size:11px;padding:4px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:4px;flex:1">
+                    <option value="">${t('settings.none')}</option>
+                    ${opts}
+                </select>
+            </div>`;
+    }
+    container.innerHTML = html;
+}
+
+export async function saveFallbackOrder(): Promise<void> {
+    const selects = document.querySelectorAll<HTMLSelectElement>('#fallbackOrderList select');
+    const fallbackOrder = [...selects].map(s => s.value).filter(Boolean);
+    await apiJson('/api/settings', 'PUT', { fallbackOrder });
+}