claude-simple 0.2.13 → 0.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-simple",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "type": "module",
   "bin": {
     "claude-simple": "server.js",
@@ -40,6 +40,7 @@
     "jszip": "^3.10.1",
     "mammoth": "^1.8.0",
     "marked": "^9.1.6",
+    "mermaid": "^11.17.1",
     "pdfjs-dist": "^3.11.174",
     "ws": "^8.16.0",
     "xlsx": "^0.18.5"

package/public/agent-panel.js

@@ -5,6 +5,7 @@
 import { esc, $ } from './lib.js';
 import { api, authHeaders, currentMachineId } from './api.js';
 import { hubMode, ctx, currentAgent, currentProject } from './state.js';
+import { renderMermaid } from './mermaid.js';
 
 let panelOpen = false;
 let mode = 'chat'; // chat | report | history | config
@@ -35,10 +36,13 @@ function mdHtml(text) {
 }
 
 function highlight(root) {
-  if (!root || typeof hljs === 'undefined') return;
-  root.querySelectorAll('pre code').forEach((el) => {
-    try { hljs.highlightElement(el); } catch {}
-  });
+  if (!root) return;
+  if (typeof hljs !== 'undefined') {
+    root.querySelectorAll('pre code').forEach((el) => {
+      try { hljs.highlightElement(el); } catch {}
+    });
+  }
+  renderMermaid(root);
 }
 
 /** Fetch SSE with auth (+ hub machine routing). */

package/public/chat.js

@@ -6,6 +6,7 @@ import { ctx, isProcessing, currentProject, currentTab, currentModel, currentEff
 import { sendWs, api, authHeaders, flushWsQueue, clearWsQueue } from './api.js';
 import { initWakeLock, setWakeLockDesired } from './wake-lock.js';
 import { pushNotification } from './notifications.js';
+import { renderMermaid } from './mermaid.js';
 
 function assistantLabel() {
   return AGENT_LABELS[currentAgent.peek()] || 'Assistant';
@@ -513,7 +514,7 @@ function finalizeAssistantStream() {
     liveAsstBody.classList.remove('whitespace-pre-wrap');
     liveAsstBody.classList.add('md');
     liveAsstBody.innerHTML = renderMarkdown(text);
-    highlightCode(liveAsstEl);
+    enhanceMarkdown(liveAsstEl);
   } else {
     liveAsstEl.remove();
   }
@@ -1005,7 +1006,7 @@ export function appendMsg(role, _label, text, opts = {}) {
   if (!msgs) return;
   const ts = coerceTs(opts.ts) ?? (role === 'system' ? null : Date.now());
   msgs.insertAdjacentHTML('beforeend', bubbleHtml(role, text, ts));
-  highlightCode(msgs.lastElementChild);
+  enhanceMarkdown(msgs.lastElementChild);
   stickBottom(msgs, role === 'user');
 }
 
@@ -1523,6 +1524,11 @@ function highlightCode(root) {
   });
 }
 
+function enhanceMarkdown(root) {
+  highlightCode(root);
+  renderMermaid(root);
+}
+
 // ── Init (called after HTML is in DOM) ────────────────────────────────────────
 export function initChat() {
   applyChatDensity();

package/public/index.html

@@ -82,7 +82,8 @@
   <script src="/vendor/marked.min.js"></script>
   <link id="hljs-theme" rel="stylesheet" href="/vendor/highlight-dark.min.css">
   <script src="/vendor/highlight.min.js"></script>
-  <link rel="stylesheet" href="style.css?v=ui-13">
+  <script src="/vendor/mermaid.min.js"></script>
+  <link rel="stylesheet" href="style.css?v=ui-15">
 </head>
 <body class="h-dvh overflow-hidden flex flex-col bg-base-100 text-base-content">
   <div id="root" class="flex flex-col flex-1 overflow-hidden"></div>
@@ -98,6 +99,6 @@
       }
     }, 10000);
   </script>
-  <script type="module" src="app.js?v=ui-13"></script>
+  <script type="module" src="app.js?v=ui-15"></script>
 </body>
 </html>

package/public/mermaid.js

@@ -0,0 +1,64 @@
+// Local Mermaid integration. It is loaded from /vendor in index.html so Hub
+// diagrams keep working when public CDNs are unavailable.
+let initialized = false;
+let sequence = 0;
+
+function setup() {
+  const api = globalThis.mermaid;
+  if (!api || initialized) return api;
+  api.initialize({
+    startOnLoad: false,
+    securityLevel: 'strict',
+    theme: document.documentElement.dataset.theme === 'dark' ? 'dark' : 'default',
+    flowchart: { htmlLabels: false },
+  });
+  initialized = true;
+  return api;
+}
+
+function normalizeSource(raw) {
+  let source = String(raw || '').replace(/\r\n?/g, '\n').trim();
+  // Some agents include the Markdown fence or language name inside an already
+  // fenced Mermaid block.  Mermaid treats both as grammar tokens and renders
+  // its own error SVG, so remove that transport wrapper defensively.
+  source = source.replace(/^```(?:mermaid)?\s*/i, '').replace(/\s*```$/, '').trim();
+  source = source.replace(/^mermaid\s*\n/i, '');
+  // `graph` remains an alias, but normalising it avoids version-specific
+  // parser behaviour in Mermaid 11 and keeps generated diagrams consistent.
+  source = source.replace(/^graph\s+(TD|TB|BT|RL|LR)\b/i, 'flowchart $1');
+  return source;
+}
+
+/** Render fenced ```mermaid blocks below a freshly-rendered Markdown root. */
+export function renderMermaid(root) {
+  const api = setup();
+  if (!api || !root) return;
+  root.querySelectorAll('pre code.language-mermaid, pre code.lang-mermaid').forEach(code => {
+    if (code.dataset.mermaidHandled) return;
+    const pre = code.closest('pre');
+    const source = normalizeSource(code.textContent);
+    if (!pre || !source) return;
+    code.dataset.mermaidHandled = '1';
+
+    const host = document.createElement('div');
+    host.className = 'mermaid-diagram';
+    host.setAttribute('role', 'img');
+    host.setAttribute('aria-label', 'Mermaid diagram');
+    pre.replaceWith(host);
+    const id = `mermaid-diagram-${++sequence}`;
+
+    // Mermaid.render may resolve with an error SVG for invalid syntax rather
+    // than reject. Parse first so invalid generated content always takes the
+    // clean code-block fallback below.
+    Promise.resolve(api.parse(source)).then(() => api.render(id, source)).then(({ svg, bindFunctions }) => {
+      host.innerHTML = svg;
+      bindFunctions?.(host);
+    }).catch(error => {
+      // Syntax errors remain inspectable/copyable as the original code block.
+      host.replaceWith(pre);
+      delete code.dataset.mermaidHandled;
+      pre.classList.add('mermaid-error');
+      pre.title = `Mermaid render failed: ${error?.message || 'invalid diagram'}`;
+    });
+  });
+}

package/public/style.css

@@ -1153,6 +1153,13 @@ html.pwa-standalone .ma-panel {
   flex: 0 0 auto;
 }
 .topbar-icon-label { display: inline; }
+.mermaid-diagram {
+  overflow-x: auto;
+  padding: .75rem .25rem .25rem;
+  text-align: center;
+}
+.mermaid-diagram svg { max-width: 100%; height: auto; }
+.mermaid-error { border-color: color-mix(in oklch, var(--color-error) 55%, var(--color-base-300)); }
 @media (max-width: 640px) {
   #recent-menu {
     min-width: 0;

package/public/sw.js

@@ -1,19 +1,20 @@
 /* Agent UI service worker — cache shell assets only.
  * Never intercepts WebSocket or mutates API semantics beyond offline fallback.
  * Bump CACHE when shipping UI that must invalidate old shells. */
-const CACHE = 'agent-ui-shell-v18';
+const CACHE = 'agent-ui-shell-v20';
 const PRECACHE = [
   '/',
   '/index.html',
   '/manifest.webmanifest',
-  '/style.css?v=ui-13',
+  '/style.css?v=ui-15',
   '/style.css',
   '/ui.min.css',
   '/vendor/mini-react.min.js',
   '/vendor/marked.min.js',
   '/vendor/highlight.min.js',
   '/vendor/highlight-dark.min.css',
-  '/app.js?v=ui-13',
+  '/vendor/mermaid.min.js',
+  '/app.js?v=ui-15',
   '/icons/icon-192.png',
   '/icons/icon-512.png',
   '/icons/icon-maskable-512.png',