clideck 1.27.0 → 1.29.0

package/public/js/app.js

@@ -14,6 +14,8 @@ import { registerHotkey, unregisterHotkey, unregisterAllForPlugin } from './hotk
 import { renderPrompts } from './prompts.js';
 import { renderRoles } from './roles.js';
 
+const shownAgentHealthToasts = new Set();
+
 function connect() {
   state.ws = new WebSocket(`ws://${location.host}`);
 
@@ -50,6 +52,12 @@ function connect() {
         state.presets = msg.presets;
         renderSettings();
         refreshCreator();
+        for (const p of state.presets) {
+          if (p.available && p.health && !p.health.ok && p.health.reason !== 'Not installed' && !shownAgentHealthToasts.has(p.presetId)) {
+            shownAgentHealthToasts.add(p.presetId);
+            showToast(`${p.name}: ${p.health.reason}`, { id: `agent-health-${p.presetId}`, type: p.versionOk === false ? 'error' : 'warn', duration: 0, title: 'Agent Attention' });
+          }
+        }
         break;
       case 'sessions.resumable':
         state.resumable = msg.list;
@@ -83,17 +91,23 @@ function connect() {
       case 'session.status':
         setStatus(msg.id, msg.working);
         break;
-      // Server requests screen capture (e.g. after PermissionRequest hook)
-      case 'screen.capture': {
+      // Server requests terminal capture (e.g. after PermissionRequest hook)
+      case 'terminal.capture': {
         const ce = state.terms.get(msg.id);
         if (ce?.term) {
           const buf = ce.term.buffer.active;
           const lines = [];
           for (let i = 0; i < buf.length; i++) { const line = buf.getLine(i); if (line) lines.push(line.translateToString(true)); }
-          send({ type: 'terminal.buffer', id: msg.id, lines });
+          send({ type: 'terminal.buffer', id: msg.id, lines, menuVersion: msg.menuVersion });
         }
         break;
       }
+      case 'session.history': {
+        const entry = state.terms.get(msg.id);
+        if (entry && !entry.queue(msg.text + '\n')) entry.term.write(msg.text + '\n');
+        updatePreview(msg.id);
+        break;
+      }
       // Bridge preview text (OpenCode plugin)
       case 'session.preview': {
         const pe = state.terms.get(msg.id);
@@ -193,7 +207,9 @@ function connect() {
         if (!toast) break;
         const actionsEl = toast.querySelector('.setup-actions');
         if (msg.success) {
-          const sid = toast.dataset.sessionId;
+          const sid = (toast.dataset.sessionId && toast.dataset.sessionId !== 'null' && toast.dataset.sessionId !== 'undefined')
+            ? toast.dataset.sessionId
+            : '';
           actionsEl.innerHTML = `
             <div class="flex-1 flex items-center gap-1.5 text-xs text-emerald-400">
               <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg>
@@ -221,6 +237,19 @@ function connect() {
       case 'plugins':
         loadPlugins(msg.list);
         break;
+      case 'plugin.install.result': {
+        const btn = document.querySelector(`.plugin-install-btn[data-plugin-id="${msg.pluginId}"]`);
+        if (!btn) break;
+        if (msg.success) {
+          btn.textContent = 'Installed';
+          btn.className = btn.className.replace('bg-blue-600 hover:bg-blue-500 text-white', 'bg-emerald-600/20 text-emerald-400 cursor-default');
+        } else {
+          btn.textContent = 'Failed';
+          btn.className = btn.className.replace('bg-blue-600 hover:bg-blue-500', 'bg-red-600/20 text-red-400 cursor-default');
+          btn.disabled = false;
+        }
+        break;
+      }
       case 'pills':
         state.pills.clear();
         for (const p of msg.list) addPill(p);
@@ -420,7 +449,7 @@ function showTelemetrySetup(commandId, sessionId) {
 
   const toast = document.createElement('div');
   toast.dataset.setupPreset = preset.presetId;
-  toast.dataset.sessionId = sessionId;
+  if (sessionId) toast.dataset.sessionId = sessionId;
   toast.dataset.commandId = commandId;
   toast.className = 'fixed bottom-5 right-5 z-[500] w-[360px] bg-slate-800/95 backdrop-blur-sm border border-slate-700/60 rounded-xl shadow-2xl shadow-black/60';
   toast.style.opacity = '0';
@@ -746,15 +775,34 @@ function renderPluginsPanel(list) {
   }
   const expanded = getPluginExpanded();
   const trashSvg = `<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>`;
+  const defaultIcon = `<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v2m6.36 1.64l-1.42 1.42M21 12h-2M17.94 17.94l-1.42-1.42M12 19v2M6.06 17.94l1.42-1.42M3 12h2M6.06 6.06l1.42 1.42"/><circle cx="12" cy="12" r="4"/></svg>`;
 
   container.innerHTML = list.map((p, i) => {
     const open = !!expanded[p.id];
+    const icon = p.icon || defaultIcon;
     const deleteBtn = p.bundled ? '' : `<div class="plugin-delete flex items-center justify-center w-6 h-6 rounded text-slate-600 hover:text-red-400 hover:bg-slate-700/50 cursor-pointer transition-colors flex-shrink-0" data-plugin-id="${esc(p.id)}" data-plugin-name="${esc(p.name)}" title="Remove plugin">${trashSvg}</div>`;
     const hasFooter = p.author || !p.bundled;
+
+    if (!p.installed) {
+      return `
+      <div class="plugin-card ${i > 0 ? 'border-t border-slate-700/50' : ''}">
+        <div class="px-4 py-3">
+          <div class="flex items-center gap-2">
+            <span class="text-slate-500 flex-shrink-0">${icon}</span>
+            <span class="flex-1 text-sm font-medium text-slate-400 truncate">${esc(p.name)}</span>
+            <span class="text-[10px] text-slate-600 flex-shrink-0">v${esc(p.version)}</span>
+            <button class="plugin-install-btn px-2.5 py-1 text-[11px] font-medium bg-blue-600 hover:bg-blue-500 text-white rounded-md transition-colors flex-shrink-0" data-plugin-id="${esc(p.id)}">Install</button>
+          </div>
+          ${p.description ? `<p class="text-[11px] text-slate-600 mt-0.5 leading-snug">${esc(p.description)}</p>` : ''}
+        </div>
+      </div>`;
+    }
+
     return `
     <div class="plugin-card ${i > 0 ? 'border-t border-slate-700/50' : ''}">
       <div class="plugin-toggle px-4 py-3 hover:bg-slate-800/50 transition-colors cursor-pointer" data-plugin-id="${esc(p.id)}">
         <div class="flex items-center gap-2">
+          <span class="text-slate-400 flex-shrink-0">${icon}</span>
           <span class="flex-1 text-sm font-medium text-slate-200 truncate">${esc(p.name)}</span>
           <span class="text-[10px] text-slate-500 flex-shrink-0">v${esc(p.version)}</span>
           <svg class="plugin-chevron w-4 h-4 text-slate-500 transition-transform duration-200 flex-shrink-0 ${open ? '' : 'collapsed'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19 9l-7 7-7-7"/></svg>
@@ -793,6 +841,15 @@ function renderPluginsPanel(list) {
     });
   });
 
+  container.querySelectorAll('.plugin-install-btn').forEach(el => {
+    el.addEventListener('click', () => {
+      el.disabled = true;
+      el.textContent = 'Installing...';
+      el.className = el.className.replace('bg-blue-600 hover:bg-blue-500', 'bg-slate-700 cursor-wait');
+      send({ type: 'plugin.install', pluginId: el.dataset.pluginId });
+    });
+  });
+
   container.querySelectorAll('[data-setting]').forEach(el => {
     const pluginId = el.dataset.plugin;
     const key = el.dataset.setting;

package/public/js/creator.js

@@ -35,11 +35,15 @@ function isPresetMissing(p) {
   return cmd.command === p.command;
 }
 
+function isPresetOutdated(p) {
+  return p.available !== false && p.versionOk === false;
+}
+
 // True if preset binary exists but telemetry/hooks are not configured yet
 function isPresetUnpatched(p) {
-  if (p.available === false || !p.telemetryAutoSetup) return false;
+  if (p.available === false || p.versionOk === false || !p.telemetryAutoSetup) return false;
   const cmd = findCommandForPreset(p);
-  return !cmd || !cmd.telemetryEnabled;
+  return !cmd || !cmd.telemetryStatus?.ok;
 }
 
 function renderPresetButtons() {
@@ -52,6 +56,14 @@ function renderPresetButtons() {
         <button class="install-btn px-2.5 py-1 text-[11px] font-medium text-blue-400 hover:text-blue-300 bg-blue-500/10 hover:bg-blue-500/20 rounded-md transition-colors" data-preset="${p.presetId}">Add</button>
       </div>`;
     }
+    if (isPresetOutdated(p)) {
+      return `
+      <div class="w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-sm text-left text-slate-500">
+        <span class="opacity-40">${agentIcon(p.icon, 24)}</span>
+        <span class="flex-1 min-w-0">${esc(p.name)}</span>
+        <button class="install-btn px-2.5 py-1 text-[11px] font-medium text-rose-400 hover:text-rose-300 bg-rose-500/10 hover:bg-rose-500/20 rounded-md transition-colors" data-preset="${p.presetId}">Update</button>
+      </div>`;
+    }
     if (isPresetUnpatched(p)) {
       return `
       <div class="w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-sm text-left text-slate-500">

package/public/js/settings.js

@@ -111,10 +111,12 @@ function integrationSection(c) {
   const preset = telemetryPreset(c);
   if (!preset) return '';
   if (!preset.telemetryAutoSetup && !preset.bridge) return '';
-  const configured = !!c.telemetryEnabled;
-  const detail = configured
-    ? `<span class="text-emerald-400/80">Configured</span> &mdash; ${esc(preset.telemetryConfigPath || '')}`
-    : `<span class="text-slate-500">Not configured</span> &mdash; enable agent to set up`;
+  const configured = !!c.telemetryStatus?.ok;
+  const detail = preset.versionOk === false
+    ? `<span class="text-rose-400/80">Update required</span> &mdash; need ${esc(preset.minVersion)}+ (found ${esc(preset.version || 'unknown')})`
+    : configured
+      ? `<span class="text-emerald-400/80">Configured</span> &mdash; ${esc(preset.telemetryConfigPath || '')}`
+      : `<span class="text-amber-400/80">${esc(c.telemetryStatus?.error || 'Needs setup')}</span> &mdash; ${esc(preset.telemetryConfigPath || '')}`;
   return `
     <div class="mt-3 pt-3 border-t border-slate-700/50">
       <div class="text-[11px] text-slate-500">${detail}</div>
@@ -383,7 +385,7 @@ function renderThemeSection() {
 function renderNotifications() {
   const enabled = !!state.cfg.notifyIdle;
   document.getElementById('cfg-notify-idle').checked = enabled;
-  document.getElementById('cfg-notify-min-work').value = state.cfg.notifyMinWork || 10;
+  document.getElementById('cfg-notify-min-work').value = state.cfg.notifyMinWork ?? 0;
 
   const permStatus = document.getElementById('notify-permission-status');
   if (enabled && 'Notification' in window) {
@@ -461,7 +463,7 @@ function saveConfig() {
   state.cfg.defaultPath = document.getElementById('cfg-default-path').value.trim();
   state.cfg.confirmClose = document.getElementById('cfg-confirm-close').checked;
   state.cfg.notifyIdle = document.getElementById('cfg-notify-idle').checked;
-  state.cfg.notifyMinWork = parseInt(document.getElementById('cfg-notify-min-work').value, 10) || 10;
+  state.cfg.notifyMinWork = parseInt(document.getElementById('cfg-notify-min-work').value, 10) || 0;
   state.cfg.notifySoundEnabled = document.getElementById('cfg-notify-sound').checked;
   state.cfg.notifySound = document.getElementById('cfg-notify-sound-pick').value;
   // Preserve fields not managed by this form

package/public/js/terminals.js

@@ -1,5 +1,5 @@
 import { state, send } from './state.js';
-import { esc, resolveIconPath } from './utils.js';
+import { esc, miniMarkdown, resolveIconPath } from './utils.js';
 import { resolveTheme, resolveAccent, applyTheme } from './profiles.js';
 import { attachToTerminal, registerHotkey } from './hotkeys.js';
 import { closeDropdown } from './prompts.js';
@@ -338,25 +338,56 @@ export function addTerminal(id, name, themeId, commandId, projectId, muted, last
   term.loadAddon(fit);
   term.onData(data => send({ type: 'input', id, data }));
 
-  // [SCREEN-CAPTURE] extract terminal buffer when BOTH idle AND render-silent (2s)
-  // Decoupled from status: telemetry knows when agent is done, onRender knows when terminal is done
-  const _hasServerStatus = cmd?.presetId === 'claude-code' || cmd?.presetId === 'codex' || cmd?.presetId === 'gemini-cli' || cmd?.presetId === 'opencode';
-  let _screenTimer = null, _renderSilent = false;
-  function _tryScreenCapture() {
+  // [TRANSCRIPT-CAPTURE] initial settled capture plus one delayed idle save
+  let _captureTimer = null, _renderSilent = false, _lastTyping = 0, _initialCaptureDone = false, _idleSaveTimer = null;
+  function _sendCapture() {
     const entry = state.terms.get(id);
-    if (!entry?.pendingScreenCapture || (!_renderSilent && !_hasServerStatus) || !entry.term) return;
-    entry.pendingScreenCapture = false;
+    if (!entry?.term) return;
     const buf = entry.term.buffer.active;
     const lines = [];
     for (let i = 0; i < buf.length; i++) { const line = buf.getLine(i); if (line) lines.push(line.translateToString(true)); }
     send({ type: 'terminal.buffer', id, lines });
   }
-  let _lastTyping = 0;
-  term.onData(() => { _lastTyping = Date.now(); });
+  function _isChrome(t) {
+    return !t
+      || /^[─━═\u2500-\u257f]+$/.test(t)
+      || /^[▀▄█▌▐░▒▓╭╮╰╯│╔╗╚╝║]+$/.test(t)
+      || (/[█▀▄▌▐░▒▓]/.test(t) && /^[█▀▄▌▐░▒▓\s]+$/.test(t))
+      || /^[❯>$%#]\s*$/.test(t)
+      || /^(esc to interrupt|\? for shortcuts)$/i.test(t);
+  }
+  function _hasContent() {
+    const entry = state.terms.get(id);
+    if (!entry?.term) return false;
+    const buf = entry.term.buffer.active;
+    for (let i = 0; i < buf.length; i++) {
+      const text = buf.getLine(i)?.translateToString(true).trim();
+      if (!_isChrome(text)) return true;
+    }
+    return false;
+  }
+  function _tryCapture() {
+    const entry = state.terms.get(id);
+    if (!_renderSilent || Date.now() - _lastTyping < 2000) return;
+    // Initial capture: first time render settles with real content, capture regardless of working/idle
+    if (!_initialCaptureDone) {
+      if (!_hasContent()) return; // retry on next silence
+      _initialCaptureDone = true;
+      _sendCapture();
+      return;
+    }
+  }
+  term.onData(() => {
+    _lastTyping = Date.now();
+    // User typing invalidates pending capture — will re-try after silence
+    _renderSilent = false;
+    clearTimeout(_captureTimer);
+    _captureTimer = setTimeout(() => { _renderSilent = true; _tryCapture(); }, 2000);
+  });
   term.onRender(() => {
     _renderSilent = false;
-    clearTimeout(_screenTimer);
-    _screenTimer = setTimeout(() => { _renderSilent = true; _tryScreenCapture(); }, 2000);
+    clearTimeout(_captureTimer);
+    _captureTimer = setTimeout(() => { _renderSilent = true; _tryCapture(); }, 2000);
   });
   term.onWriteParsed(() => {
     if (Date.now() - _lastTyping < 500) return;
@@ -364,8 +395,23 @@ export function addTerminal(id, name, themeId, commandId, projectId, muted, last
     if (entry) entry.lastRenderAt = Date.now();
   });
 
-  // Expose capture function so setStatus can trigger it when idle arrives after render silence
-  setTimeout(() => { const e = state.terms.get(id); if (e) e.tryScreenCapture = _tryScreenCapture; }, 0);
+  // Expose capture function so setStatus can schedule a retry
+  setTimeout(() => {
+    const e = state.terms.get(id);
+    if (e) {
+      e.tryCapture = _tryCapture;
+      e.sendCaptureNow = _sendCapture;
+      e.scheduleIdleCapture = () => {
+        clearTimeout(_idleSaveTimer);
+        _idleSaveTimer = setTimeout(() => {
+          const entry = state.terms.get(id);
+          if (!entry || entry.working) return;
+          _sendCapture();
+        }, 300);
+      };
+      e.cancelIdleCapture = () => clearTimeout(_idleSaveTimer);
+    }
+  }, 0);
 
   term.open(el);
   attachToTerminal(term);
@@ -394,8 +440,21 @@ export function addTerminal(id, name, themeId, commandId, projectId, muted, last
     fitRaf = requestAnimationFrame(() => { fitRaf = 0; doFit(); });
   });
   ro.observe(el);
-  // Safety: if RO hasn't fired within 500ms, flush anyway to avoid unbounded queue
-  setTimeout(() => { if (!fitted) { fitted = true; for (const chunk of pending) term.write(chunk); pending = null; updatePreview(id); } }, 500);
+  // Safety: if RO hasn't fired within 500ms, flush anyway to avoid unbounded queue.
+  // If the element is hidden (background tab), force a reasonable default size so the PTY
+  // doesn't stay at a tiny default and produce garbled output.
+  setTimeout(() => {
+    if (!fitted) {
+      fitted = true;
+      if (!el.offsetWidth) {
+        term.resize(120, 30);
+        send({ type: 'resize', id, cols: 120, rows: 30 });
+      }
+      for (const chunk of pending) term.write(chunk);
+      pending = null;
+      updatePreview(id);
+    }
+  }, 500);
   const cancelFitRaf = () => { if (fitRaf) { cancelAnimationFrame(fitRaf); fitRaf = 0; } };
   state.terms.set(id, { term, fit, el, ro, cancelFitRaf, themeId, commandId, projectId: projectId || null, muted: !!muted, working: false, workStartedAt: null, stopBounce, queue: (data) => { if (!fitted) { pending.push(data); return true; } return false; }, lastActivityAt: Date.now(), unread: false, lastPreviewText: lastPreview || '', searchText: '' });
   document.getElementById('empty').style.display = 'none';
@@ -526,11 +585,12 @@ function setStatus(id, working) {
 
   // Notify on working → idle transition
   if (wasWorking && !working && !entry.muted) {
+    const minWork = state.cfg.notifyMinWork ?? 0;
     const workDuration = (Date.now() - (entry.workStartedAt || 0)) / 1000;
-    const minWork = state.cfg.notifyMinWork || 10;
     if (workDuration >= minWork) {
-      // Sound: plays unless this session is the one you're looking at
-      if (state.cfg.notifySoundEnabled !== false && state.active !== id) {
+      entry.workStartedAt = null;
+      // Sound: all sessions when tab unfocused, all except active when focused
+      if (state.cfg.notifySoundEnabled !== false && (!document.hasFocus() || state.active !== id)) {
         new Audio(`/fx/${(state.cfg.notifySound || 'default-beep')}.mp3`).play().catch(() => {});
       }
       // Browser notification: plays when the CliDeck tab is not focused
@@ -545,11 +605,15 @@ function setStatus(id, working) {
     }
   }
 
-  // Mark idle so the onRender silence watcher can capture .screen
-  // Also try immediately — renders may already be silent
-  if (wasWorking && !working) { entry.pendingScreenCapture = true; entry.tryScreenCapture?.(); }
+  // Save once shortly after idle unless the agent resumes first.
+  if (wasWorking && !working) {
+    entry.scheduleIdleCapture?.();
+  }
 
-  if (working) entry.workStartedAt = Date.now();
+  if (working) {
+    entry.cancelIdleCapture?.();
+    if (!entry.workStartedAt) entry.workStartedAt = Date.now();
+  }
 
   const el = document.querySelector(`.group[data-id="${id}"] .session-status`);
   if (!el) return;
@@ -1111,7 +1175,7 @@ function openPillLog(id) {
           <span class="flex-1"></span>
           <button class="pill-log-clear text-[11px] text-slate-600 hover:text-slate-400 transition-colors">Clear</button>
         </div>
-        <div class="pill-log-body flex-1 overflow-y-auto p-4 font-mono text-xs leading-relaxed tmx-scroll"></div>
+        <div class="pill-log-body flex-1 overflow-y-auto p-4 text-xs leading-relaxed tmx-scroll"></div>
       </div>`;
     document.getElementById('terminals').appendChild(panel);
     panel.querySelector('.pill-log-clear').addEventListener('click', () => {
@@ -1146,9 +1210,45 @@ function appendLogLine(entry) {
   const body = document.querySelector('#pill-log-panel .pill-log-body');
   if (!body) return;
   const line = document.createElement('div');
-  line.className = 'flex gap-3 py-0.5';
   const time = new Date(entry.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
-  line.innerHTML = `<span class="text-slate-600 flex-shrink-0">${time}</span><span class="text-slate-400">${esc(entry.text)}</span>`;
+  const t = entry.text;
+
+  // Categorize log entries for visual treatment
+  let color = 'text-slate-400';
+  let icon = '';
+  let content = esc(t);
+  if (/^Started with/.test(t)) {
+    color = 'text-emerald-400';
+    icon = '<span class="text-emerald-500">&#9654;</span>';
+  } else if (/^Routed /.test(t)) {
+    color = 'text-indigo-400';
+    icon = '<span class="text-indigo-500">&#8594;</span>';
+  } else if (/^Notify:/.test(t)) {
+    color = 'text-amber-300';
+    icon = '<span class="text-amber-500">&#9679;</span>';
+    content = '<strong class="text-amber-300">Notify:</strong> ' + miniMarkdown(t.replace(/^Notify:\s*/, ''));
+  } else if (/^Consulting /.test(t)) {
+    color = 'text-slate-500';
+    icon = '<span class="text-slate-600">&#8230;</span>';
+  } else if (/→ working$/.test(t)) {
+    color = 'text-blue-400';
+    icon = '<span class="text-blue-500">&#9679;</span>';
+  } else if (/→ idle$/.test(t)) {
+    color = 'text-slate-500';
+    icon = '<span class="text-slate-600">&#9675;</span>';
+  } else if (/^Completed$/.test(t)) {
+    color = 'text-emerald-400';
+    icon = '<span class="text-emerald-500">&#10003;</span>';
+  } else if (/^Stopped$/.test(t)) {
+    color = 'text-slate-500';
+    icon = '<span class="text-slate-600">&#9632;</span>';
+  } else if (/^Paused/.test(t)) {
+    color = 'text-amber-400';
+    icon = '<span class="text-amber-500">&#9646;&#9646;</span>';
+  }
+
+  line.className = 'flex gap-3 py-1 items-start';
+  line.innerHTML = `<span class="text-slate-600 flex-shrink-0 tabular-nums">${time}</span><span class="w-4 flex-shrink-0 text-center">${icon}</span><span class="${color} leading-relaxed">${content}</span>`;
   body.appendChild(line);
   body.scrollTop = body.scrollHeight;
 }

package/public/js/toast.js

@@ -1,3 +1,5 @@
+import { esc, miniMarkdown } from './utils.js';
+
 const ICONS = {
   info:    '<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/>',
   success: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>',
@@ -19,18 +21,6 @@ function getContainer() {
   return c;
 }
 
-/**
- * Minimal markdown: **bold**, `code`, - bullet lists, line breaks.
- */
-function miniMarkdown(text) {
-  return esc(text)
-    .replace(/\*\*(.+?)\*\*/g, '<strong class="text-slate-200 font-semibold">$1</strong>')
-    .replace(/`(.+?)`/g, '<code class="px-1 py-0.5 rounded bg-slate-700/60 text-slate-300 text-[11px]">$1</code>')
-    .replace(/^[-•]\s+(.+)$/gm, '<li class="ml-3">$1</li>')
-    .replace(/(<li.*<\/li>\n?)+/g, '<ul class="list-disc pl-2 space-y-0.5">$&</ul>')
-    .replace(/\n/g, '<br>');
-}
-
 /**
  * @param {string} message  — plain text, markdown (if markdown option), or raw HTML (if html option)
  * @param {{ type?: string, duration?: number, id?: string, html?: boolean, markdown?: boolean, title?: string }} opts
@@ -74,8 +64,3 @@ export function showToast(message, opts = {}) {
   return { dismiss };
 }
 
-function esc(s) {
-  const d = document.createElement('div');
-  d.textContent = s;
-  return d.innerHTML;
-}

package/public/js/utils.js

@@ -8,6 +8,15 @@ export function esc(s) {
   return s.replace(/[&<>"']/g, c => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c]));
 }
 
+export function miniMarkdown(text) {
+  return esc(text)
+    .replace(/\*\*(.+?)\*\*/g, '<strong class="text-slate-200 font-semibold">$1</strong>')
+    .replace(/`(.+?)`/g, '<code class="px-1 py-0.5 rounded bg-slate-700/60 text-slate-300 text-[11px]">$1</code>')
+    .replace(/^[-•]\s+(.+)$/gm, '<li class="ml-3">$1</li>')
+    .replace(/(<li.*<\/li>\n?)+/g, '<ul class="list-disc pl-2 space-y-0.5">$&</ul>')
+    .replace(/\n/g, '<br>');
+}
+
 export function debounce(fn, ms) {
   let t;
   return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); };