@qnote/q-ai-note 1.0.10 → 1.0.12

package/dist/web/app.js

@@ -45,6 +45,7 @@ const state = {
   changesSandboxFilter: '',
   changesTypeFilter: 'all',
   changesQuickFilter: 'all',
+  workTreeExpandInitialized: false,
 };
 
 const expandedNodes = new Set();
@@ -331,6 +332,91 @@ function expandAllNodes() {
   items.forEach(item => expandedNodes.add(item.id));
 }
 
+function buildWorkItemDepthMap(items) {
+  const byId = new Map(items.map((item) => [item.id, item]));
+  const memo = new Map();
+  const visiting = new Set();
+  const walk = (id) => {
+    if (memo.has(id)) return memo.get(id);
+    if (visiting.has(id)) return 0;
+    visiting.add(id);
+    const item = byId.get(id);
+    if (!item) {
+      visiting.delete(id);
+      return 0;
+    }
+    const parentId = item.parent_id;
+    const depth = parentId && byId.has(parentId) ? walk(parentId) + 1 : 0;
+    memo.set(id, depth);
+    visiting.delete(id);
+    return depth;
+  };
+  items.forEach((item) => walk(item.id));
+  return memo;
+}
+
+function getWorkTreeMaxDepth(items) {
+  const depthMap = buildWorkItemDepthMap(items || []);
+  let maxDepth = 0;
+  depthMap.forEach((depth) => {
+    if (Number.isFinite(depth)) maxDepth = Math.max(maxDepth, Number(depth));
+  });
+  return maxDepth;
+}
+
+function expandNodesToLevel(level, items) {
+  const safeLevel = Math.max(1, Number(level) || 1);
+  const depthMap = buildWorkItemDepthMap(items || []);
+  expandedNodes.clear();
+  (items || []).forEach((item) => {
+    const depth = Number(depthMap.get(item.id) || 0);
+    if (depth < safeLevel) expandedNodes.add(item.id);
+  });
+}
+
+function applyWorkTreeCollapseAction(action) {
+  if (!state.currentSandbox) return;
+  const items = state.currentSandbox.items || [];
+  if (!items.length) return;
+  if (action === 'expand-all') {
+    expandedNodes.clear();
+    expandAllNodes();
+  } else if (action === 'collapse-all') {
+    expandedNodes.clear();
+  } else if (String(action || '').startsWith('collapse-level:')) {
+    const level = Number(String(action).split(':')[1] || '1');
+    expandNodesToLevel(level, items);
+  }
+  state.workTreeExpandInitialized = true;
+}
+
+function updateWorkTreeCollapseMenu(items) {
+  const selector = document.getElementById('work-tree-collapse-action');
+  if (!(selector instanceof HTMLSelectElement)) return;
+  const denseMode = state.workTreeViewMode === 'dense';
+  const hasItems = (items || []).length > 0;
+  selector.classList.toggle('hidden', !denseMode);
+  selector.disabled = !denseMode || !hasItems;
+  if (!denseMode || !hasItems) {
+    selector.innerHTML = '<option value="">层级操作</option>';
+    selector.value = '';
+    return;
+  }
+  const maxDepth = getWorkTreeMaxDepth(items);
+  const maxLevel = Math.max(1, maxDepth + 1);
+  const levelOptions = Array.from({ length: maxLevel }, (_v, idx) => {
+    const level = idx + 1;
+    return `<option value="collapse-level:${level}">折叠到 L${level}</option>`;
+  }).join('');
+  selector.innerHTML = `
+    <option value="">层级操作</option>
+    <option value="expand-all">全部展开</option>
+    <option value="collapse-all">全部折叠</option>
+    ${levelOptions}
+  `;
+  selector.value = '';
+}
+
 function getRootNodeIds(items) {
   return items.filter((item) => !item.parent_id).map((item) => item.id);
 }
@@ -348,6 +434,8 @@ function applyWorkTreeViewMode(mode) {
   } else {
     expandAllNodes();
   }
+  state.workTreeExpandInitialized = true;
+  updateWorkTreeCollapseMenu(items);
 }
 
 function applyWorkItemAssigneeToggle() {
@@ -374,13 +462,15 @@ function renderWorkTree() {
   const entitySummaryByNodeId = buildNodeEntitySummaryByNodeId();
   const entityRowsByNodeId = buildNodeEntityRowsByNodeId();
   
-  if (expandedNodes.size === 0 && allItems.length > 0) {
+  if (!state.workTreeExpandInitialized && allItems.length > 0) {
     if (state.workTreeViewMode === 'report') {
       getRootNodeIds(allItems).forEach((id) => expandedNodes.add(id));
     } else {
       expandAllNodes();
     }
+    state.workTreeExpandInitialized = true;
   }
+  updateWorkTreeCollapseMenu(allItems);
 
   if (allItems.length === 0) {
     tree.innerHTML = `<div class="empty-state"><p>${treeReadonly ? '暂无任务' : '点击上方"添加"按钮创建第一个任务'}</p></div>`;
@@ -686,8 +776,49 @@ function populateParentSelect(items, preferredParentId = null) {
   select.value = hasExpectedValue ? expectedValue : '';
 }
 
-function renderMarkdownSnippet(text) {
-  const source = String(text || '').replace(/\r\n/g, '\n');
+function normalizeAssistantResponseText(raw) {
+  let text = String(raw || '').trim();
+  if (!text) return '';
+  // Recover nested response payload when parser fallback returns a JSON string.
+  for (let depth = 0; depth < 2; depth += 1) {
+    const maybeJson = text.trim();
+    if (!maybeJson.startsWith('{') || !maybeJson.endsWith('}')) break;
+    try {
+      const parsed = JSON.parse(maybeJson);
+      if (parsed && typeof parsed.response === 'string' && parsed.response.trim()) {
+        text = String(parsed.response).trim();
+        continue;
+      }
+    } catch {
+      // Ignore invalid json and keep original text.
+    }
+    break;
+  }
+  return text;
+}
+
+function unwrapMarkdownFence(rawText) {
+  const text = String(rawText || '').replace(/\r\n/g, '\n').trim();
+  const start = text.match(/^```(?:markdown|md)\s*\n?/i);
+  if (!start) return null;
+  let body = text.slice(start[0].length);
+  const endIdx = body.lastIndexOf('\n```');
+  if (endIdx >= 0) {
+    body = body.slice(0, endIdx);
+  } else {
+    body = body.replace(/```$/m, '');
+  }
+  return body.trim();
+}
+
+function renderMarkdownSnippet(text, options = {}) {
+  const enableMermaid = Boolean(options.enableMermaid);
+  const normalizedSource = normalizeAssistantResponseText(text);
+  const fencedMarkdown = unwrapMarkdownFence(normalizedSource);
+  if (fencedMarkdown !== null) {
+    return renderMarkdownSnippet(fencedMarkdown, options);
+  }
+  const source = String(normalizedSource || '').replace(/\r\n/g, '\n');
   const lines = source.split('\n');
   const blocks = [];
   let listItems = [];
@@ -711,12 +842,61 @@ function renderMarkdownSnippet(text) {
     return html;
   };
 
-  for (const line of lines) {
+  const splitTableCells = (line) => {
+    let raw = String(line || '').trim();
+    if (raw.startsWith('|')) raw = raw.slice(1);
+    if (raw.endsWith('|')) raw = raw.slice(0, -1);
+    return raw.split('|').map((cell) => String(cell || '').trim());
+  };
+
+  for (let idx = 0; idx < lines.length; idx += 1) {
+    const line = lines[idx];
     const trimmed = line.trim();
     if (!trimmed) {
       flushList();
       continue;
     }
+    const fenceMatch = trimmed.match(/^```([a-zA-Z0-9_-]+)?\s*$/);
+    if (fenceMatch) {
+      flushList();
+      const fenceLang = String(fenceMatch[1] || '').toLowerCase();
+      const codeLines = [];
+      idx += 1;
+      while (idx < lines.length && !/^```/.test(String(lines[idx] || '').trim())) {
+        codeLines.push(lines[idx]);
+        idx += 1;
+      }
+      const code = codeLines.join('\n');
+      if (fenceLang === 'mermaid' && enableMermaid) {
+        blocks.push(`<div class="chat-mermaid" data-mermaid-code="${encodeURIComponent(code)}"></div>`);
+      } else {
+        blocks.push(`<pre><code>${safeText(code)}</code></pre>`);
+      }
+      continue;
+    }
+    if (trimmed.includes('|') && idx + 1 < lines.length) {
+      const nextTrimmed = String(lines[idx + 1] || '').trim();
+      const isTableDivider = /^\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?$/.test(nextTrimmed);
+      if (isTableDivider) {
+        flushList();
+        const headerCells = splitTableCells(trimmed);
+        const bodyRows = [];
+        idx += 2;
+        while (idx < lines.length) {
+          const row = String(lines[idx] || '').trim();
+          if (!row || !row.includes('|')) {
+            idx -= 1;
+            break;
+          }
+          bodyRows.push(splitTableCells(row));
+          idx += 1;
+        }
+        const headerHtml = `<tr>${headerCells.map((cell) => `<th>${renderInline(cell)}</th>`).join('')}</tr>`;
+        const bodyHtml = bodyRows.map((cells) => `<tr>${cells.map((cell) => `<td>${renderInline(cell)}</td>`).join('')}</tr>`).join('');
+        blocks.push(`<table class="md-table"><thead>${headerHtml}</thead><tbody>${bodyHtml}</tbody></table>`);
+        continue;
+      }
+    }
     if (/^[-*]\s+/.test(trimmed)) {
       listItems.push(renderInline(trimmed.replace(/^[-*]\s+/, '')));
       continue;
@@ -734,6 +914,73 @@ function renderMarkdownSnippet(text) {
   return blocks.join('');
 }
 
+let mermaidLoadPromise = null;
+
+function ensureMermaidRuntime() {
+  if (window.mermaid && typeof window.mermaid.render === 'function') {
+    return Promise.resolve(window.mermaid);
+  }
+  if (mermaidLoadPromise) return mermaidLoadPromise;
+  mermaidLoadPromise = new Promise((resolve, reject) => {
+    const existing = document.querySelector('script[data-mermaid-runtime="1"]');
+    if (existing) {
+      existing.addEventListener('load', () => {
+        if (window.mermaid && typeof window.mermaid.initialize === 'function') {
+          window.mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
+        }
+        resolve(window.mermaid);
+      }, { once: true });
+      existing.addEventListener('error', () => reject(new Error('Mermaid script load failed')), { once: true });
+      return;
+    }
+    const script = document.createElement('script');
+    script.src = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js';
+    script.async = true;
+    script.setAttribute('data-mermaid-runtime', '1');
+    script.addEventListener('load', () => {
+      if (window.mermaid && typeof window.mermaid.initialize === 'function') {
+        window.mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
+      }
+      resolve(window.mermaid);
+    }, { once: true });
+    script.addEventListener('error', () => reject(new Error('Mermaid script load failed')), { once: true });
+    document.head.appendChild(script);
+  });
+  return mermaidLoadPromise;
+}
+
+async function renderMermaidInContainer(container) {
+  if (!(container instanceof HTMLElement)) return;
+  const blocks = Array.from(container.querySelectorAll('.chat-mermaid[data-mermaid-code]:not([data-mermaid-rendered="1"])'));
+  if (!blocks.length) return;
+  let mermaid = null;
+  try {
+    mermaid = await ensureMermaidRuntime();
+  } catch {
+    mermaid = null;
+  }
+  for (let idx = 0; idx < blocks.length; idx += 1) {
+    const block = blocks[idx];
+    const code = decodeURIComponent(String(block.getAttribute('data-mermaid-code') || ''));
+    if (!code) {
+      block.setAttribute('data-mermaid-rendered', '1');
+      continue;
+    }
+    if (mermaid && typeof mermaid.render === 'function') {
+      try {
+        const id = `chat-mermaid-${Date.now()}-${idx}`;
+        const rendered = await mermaid.render(id, code);
+        block.innerHTML = rendered?.svg || `<pre><code>${safeText(code)}</code></pre>`;
+      } catch {
+        block.innerHTML = `<pre><code>${safeText(code)}</code></pre>`;
+      }
+    } else {
+      block.innerHTML = `<pre><code>${safeText(code)}</code></pre>`;
+    }
+    block.setAttribute('data-mermaid-rendered', '1');
+  }
+}
+
 function getNodeById(nodeId) {
   return state.currentSandbox?.items?.find((item) => item.id === nodeId) || null;
 }
@@ -1453,6 +1700,7 @@ async function loadSandbox(id) {
     apiRequest(`${API_BASE}/sandboxes/${id}/entities/stats`),
   ]);
   state.currentSandbox = { ...sandbox, items, diaries };
+  state.workTreeExpandInitialized = false;
   state.nodeEntities = entities;
   state.nodeEntityStats = entityStats;
   
@@ -1510,9 +1758,10 @@ async function loadSandboxChats(sandboxId) {
     chats.map((chat) => renderChatEntry(chat, {
       safeText,
       renderAIActionMessage,
-      renderContent: (content) => renderMarkdownSnippet(content),
+      renderContent: (content) => renderMarkdownSnippet(content, { enableMermaid: true }),
     })),
   );
+  await renderMermaidInContainer(messages);
   
   messages.scrollTop = messages.scrollHeight;
 }
@@ -1544,7 +1793,7 @@ function renderAIActionMessage(action) {
   };
   
   if (actionType === 'response' || actionType === 'clarify') {
-    return `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || action.observation || '')}</div>`;
+    return `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || action.observation || '', { enableMermaid: true })}</div>`;
   }
   else if (actionType === 'confirm' && action.confirm_items) {
     // Skip confirm, go directly to done
@@ -1571,7 +1820,7 @@ function renderAIActionMessage(action) {
     </div>`;
   }
   
-  return `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || '')}</div>`;
+  return `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || '', { enableMermaid: true })}</div>`;
 }
 
 window.undoOperation = async function(operationId, btn) {
@@ -2575,7 +2824,8 @@ async function initApp() {
     const actionType = action.action;
     
     if (actionType === 'response' || actionType === 'clarify') {
-      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || action.observation || '')}</div>`);
+      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || action.observation || '', { enableMermaid: true })}</div>`);
+      await renderMermaidInContainer(messages);
       messages.scrollTop = messages.scrollHeight;
       
       if (actionType === 'clarify') {
@@ -2663,11 +2913,13 @@ async function initApp() {
     }
     else if (actionType === 'done') {
       messages.insertAdjacentHTML('beforeend', renderAIActionMessage(action));
+      await renderMermaidInContainer(messages);
       messages.scrollTop = messages.scrollHeight;
       state.pendingAction = null;
     }
     else if (actionType === 'stop') {
-      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${renderMarkdownSnippet(action.observation || '已取消操作')}</div>`);
+      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${renderMarkdownSnippet(action.observation || '已取消操作', { enableMermaid: true })}</div>`);
+      await renderMermaidInContainer(messages);
       messages.scrollTop = messages.scrollHeight;
       state.pendingAction = null;
     }
@@ -3012,6 +3264,13 @@ async function initApp() {
     renderWorkTree();
   });
 
+  document.getElementById('work-tree-collapse-action')?.addEventListener('change', (e) => {
+    const action = e.target.value || '';
+    if (!action) return;
+    applyWorkTreeCollapseAction(action);
+    renderWorkTree();
+  });
+
   document.getElementById('work-item-element-preview-mode')?.addEventListener('change', (e) => {
     state.workItemElementPreviewMode = e.target.value || 'none';
     renderWorkTree();

package/dist/web/index.html

@@ -63,6 +63,11 @@
                   <option value="report">汇报折叠模式</option>
                   <option value="dense">树模式</option>
                 </select>
+                <select id="work-tree-collapse-action" title="树模式层级操作">
+                  <option value="">层级操作</option>
+                  <option value="expand-all">全部展开</option>
+                  <option value="collapse-all">全部折叠</option>
+                </select>
                 <select id="work-item-element-preview-mode">
                   <option value="none">能力要素：不显示</option>
                   <option value="issue">能力要素：Issue</option>

package/dist/web/styles.css

@@ -221,6 +221,10 @@ h2 {
   gap: 8px;
 }
 
+#work-tree-collapse-action {
+  min-width: 132px;
+}
+
 .inline-checkbox {
   display: inline-flex;
   align-items: center;
@@ -1200,6 +1204,65 @@ h2 {
   border-bottom-left-radius: 4px;
 }
 
+.chat-message.assistant h1,
+.chat-message.assistant h2,
+.chat-message.assistant h3,
+.chat-message.assistant h4 {
+  margin: 2px 0 6px;
+  line-height: 1.35;
+  font-weight: 600;
+}
+
+.chat-message.assistant h1 {
+  font-size: 16px;
+}
+
+.chat-message.assistant h2 {
+  font-size: 15px;
+}
+
+.chat-message.assistant h3,
+.chat-message.assistant h4 {
+  font-size: 14px;
+}
+
+.chat-message.assistant p,
+.chat-message.assistant ul,
+.chat-message.assistant ol,
+.chat-message.assistant pre {
+  margin: 4px 0;
+}
+
+.chat-message.assistant .md-table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 6px 0;
+  font-size: 12px;
+}
+
+.chat-message.assistant .md-table th,
+.chat-message.assistant .md-table td {
+  border: 1px solid #d5deed;
+  padding: 4px 6px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.chat-message.assistant .md-table th {
+  background: #eef4ff;
+  font-weight: 600;
+}
+
+.chat-message.assistant .chat-mermaid {
+  width: 100%;
+  overflow-x: auto;
+  background: #fff;
+  border: 1px solid #d5deed;
+  border-radius: 8px;
+  padding: 6px;
+  margin: 6px 0;
+}
+
 .chat-message.assistant.loading {
   color: var(--text-secondary);
   font-style: italic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qnote/q-ai-note",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "type": "module",
   "description": "AI-assisted personal work sandbox and diary system",
   "main": "dist/server/index.js",