@qnote/q-ai-note 1.0.3 → 1.0.5

package/dist/web/app.js

@@ -19,11 +19,14 @@ const state = {
   sandboxPresentationMode: false,
   sandboxFullscreenMode: false,
   workTreeViewMode: 'full',
+  workItemElementPreviewMode: 'none',
   workItemShowAssignee: false,
   workItemSearch: '',
   workItemStatusFilter: 'all',
   diarySearch: '',
+  diarySandboxFilter: '',
   diaryProcessedFilter: 'all',
+  diaryWorkItemNameMap: {},
   changesSandboxFilter: '',
   changesTypeFilter: 'all',
   changesQuickFilter: 'all',
@@ -160,12 +163,14 @@ function applyWorkItemFilters(items) {
 function applyDiaryFilters(diaries) {
   const query = state.diarySearch.trim().toLowerCase();
   const processed = state.diaryProcessedFilter;
+  const sandboxId = state.diarySandboxFilter;
   return diaries.filter((diary) => {
     const queryMatched = !query || `${diary.content || ''}`.toLowerCase().includes(query);
+    const sandboxMatched = !sandboxId || String(diary.sandbox_id || '') === sandboxId;
     const statusMatched = processed === 'all'
       || (processed === 'processed' && diary.processed)
       || (processed === 'unprocessed' && !diary.processed);
-    return queryMatched && statusMatched;
+    return queryMatched && sandboxMatched && statusMatched;
   });
 }
 
@@ -200,6 +205,13 @@ function applyWorkItemAssigneeToggle() {
   }
 }
 
+function applyWorkItemElementPreviewMode() {
+  const selector = document.getElementById('work-item-element-preview-mode');
+  if (selector instanceof HTMLSelectElement) {
+    selector.value = state.workItemElementPreviewMode || 'none';
+  }
+}
+
 function renderWorkTree() {
   const tree = document.getElementById('work-tree');
   if (!tree || !state.currentSandbox) return;
@@ -207,6 +219,7 @@ function renderWorkTree() {
   const allItems = state.currentSandbox.items || [];
   const items = applyWorkItemFilters(allItems);
   const entitySummaryByNodeId = buildNodeEntitySummaryByNodeId();
+  const entityRowsByNodeId = buildNodeEntityRowsByNodeId();
   
   if (expandedNodes.size === 0 && allItems.length > 0) {
     if (state.workTreeViewMode === 'report') {
@@ -244,12 +257,108 @@ function renderWorkTree() {
       document.getElementById('new-item-parent').value = parentId;
       document.getElementById('item-dialog').showModal();
     },
+    onAddDiary: (nodeId) => {
+      showNodeEntityDrawer(nodeId, 'diary');
+      const textarea = document.getElementById('drawer-diary-content');
+      if (textarea instanceof HTMLTextAreaElement) {
+        textarea.focus();
+      }
+    },
     onEdit: (id) => {
       editWorkItem(id);
     },
     onSelect: (id) => {
       showNodeEntityDrawer(id);
     },
+    onSelectEntity: (nodeId, entityType) => {
+      showNodeEntityDrawer(nodeId, entityType || 'all');
+    },
+    onMoveNode: async (dragNodeId, newParentId) => {
+      if (!state.currentSandbox) return;
+      if (!dragNodeId || dragNodeId === newParentId) return;
+      const byId = new Map((state.currentSandbox.items || []).map((item) => [item.id, item]));
+      const dragNode = byId.get(dragNodeId);
+      if (!dragNode) return;
+      const nextParentId = newParentId || null;
+      if (nextParentId && isDescendantNode(nextParentId, dragNodeId, byId)) {
+        alert('不能将节点拖拽到其子节点下。');
+        return;
+      }
+      const siblingItems = (state.currentSandbox.items || [])
+        .filter((item) => (item.parent_id || null) === nextParentId && item.id !== dragNodeId)
+        .sort((a, b) => compareSiblingOrder(a, b, 'order_key'));
+      const left = siblingItems[siblingItems.length - 1] || null;
+      const nextOrderKey = rankBetween(getNodeOrderKey(left, 'order_key'), '');
+      await apiRequest(`${API_BASE}/items/${dragNodeId}`, {
+        method: 'PUT',
+        body: JSON.stringify({
+          parent_id: nextParentId,
+          extra_data: {
+            ...(dragNode.extra_data || {}),
+            order_key: nextOrderKey,
+          },
+        }),
+      });
+      await loadSandbox(state.currentSandbox.id);
+    },
+    onReorderSiblings: async (dragNodeId, targetNodeId, position) => {
+      if (!state.currentSandbox) return;
+      if (!dragNodeId || !targetNodeId || dragNodeId === targetNodeId) return;
+      const byId = new Map((state.currentSandbox.items || []).map((item) => [item.id, item]));
+      const dragNode = byId.get(dragNodeId);
+      const targetNode = byId.get(targetNodeId);
+      if (!dragNode || !targetNode) return;
+      if (isDescendantNode(targetNodeId, dragNodeId, byId)) {
+        alert('不能将节点排序到其子树内部。');
+        return;
+      }
+      const nextParentId = targetNode.parent_id || null;
+      const siblings = (state.currentSandbox.items || [])
+        .filter((item) => (item.parent_id || null) === nextParentId && item.id !== dragNodeId)
+        .sort((a, b) => compareSiblingOrder(a, b, 'order_key'));
+      const targetIndex = siblings.findIndex((item) => item.id === targetNodeId);
+      if (targetIndex < 0) return;
+      const insertIndex = position === 'after' ? targetIndex + 1 : targetIndex;
+      const left = siblings[insertIndex - 1] || null;
+      const right = siblings[insertIndex] || null;
+      const nextOrderKey = rankBetween(getNodeOrderKey(left, 'order_key'), getNodeOrderKey(right, 'order_key'));
+      await apiRequest(`${API_BASE}/items/${dragNodeId}`, {
+        method: 'PUT',
+        body: JSON.stringify({
+          parent_id: nextParentId,
+          extra_data: {
+            ...(dragNode.extra_data || {}),
+            order_key: nextOrderKey,
+          },
+        }),
+      });
+      await loadSandbox(state.currentSandbox.id);
+    },
+    onReorderLanes: async (dragRootId, targetRootId) => {
+      if (!state.currentSandbox) return;
+      if (!dragRootId || !targetRootId || dragRootId === targetRootId) return;
+      const roots = (state.currentSandbox.items || []).filter((item) => !item.parent_id);
+      const ordered = [...roots].sort((a, b) => compareSiblingOrder(a, b, 'lane_order_key'));
+      const fromIdx = ordered.findIndex((item) => item.id === dragRootId);
+      const toIdx = ordered.findIndex((item) => item.id === targetRootId);
+      if (fromIdx < 0 || toIdx < 0) return;
+      const [moved] = ordered.splice(fromIdx, 1);
+      ordered.splice(toIdx, 0, moved);
+      const movedIndex = ordered.findIndex((item) => item.id === dragRootId);
+      const left = ordered[movedIndex - 1] || null;
+      const right = ordered[movedIndex + 1] || null;
+      const nextLaneKey = rankBetween(getNodeOrderKey(left, 'lane_order_key'), getNodeOrderKey(right, 'lane_order_key'));
+      await apiRequest(`${API_BASE}/items/${dragRootId}`, {
+        method: 'PUT',
+        body: JSON.stringify({
+          extra_data: {
+            ...(moved.extra_data || {}),
+            lane_order_key: nextLaneKey,
+          },
+        }),
+      });
+      await loadSandbox(state.currentSandbox.id);
+    },
     onDelete: async (id) => {
       if (confirm('确定删除此任务？')) {
         await apiRequest(`${API_BASE}/items/${id}`, { method: 'DELETE' });
@@ -261,6 +370,8 @@ function renderWorkTree() {
     },
     renderMode: state.workTreeViewMode === 'dense' ? 'dense' : 'card',
     showAssignee: state.workItemShowAssignee,
+    elementPreviewMode: state.workItemElementPreviewMode,
+    entityRowsByNodeId,
   });
   
   populateParentSelect(allItems);
@@ -289,6 +400,87 @@ function buildNodeEntitySummaryByNodeId() {
   return summaryByNodeId;
 }
 
+function buildNodeEntityRowsByNodeId() {
+  const rowsByNodeId = {};
+  for (const row of state.nodeEntities || []) {
+    const nodeId = String(row.work_item_id || '');
+    if (!nodeId) continue;
+    if (!rowsByNodeId[nodeId]) rowsByNodeId[nodeId] = [];
+    rowsByNodeId[nodeId].push({
+      id: row.id,
+      entity_type: row.entity_type,
+      title: row.title || '',
+      status: row.status || '',
+      capability_type: row.capability_type || '',
+    });
+  }
+  return rowsByNodeId;
+}
+
+function isDescendantNode(candidateNodeId, parentNodeId, byId) {
+  let cursor = byId.get(candidateNodeId);
+  while (cursor && cursor.parent_id) {
+    if (cursor.parent_id === parentNodeId) return true;
+    cursor = byId.get(cursor.parent_id);
+  }
+  return false;
+}
+
+const ORDER_ALPHABET = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+const ORDER_BASE = ORDER_ALPHABET.length;
+
+function getOrderCharIndex(ch) {
+  if (!ch) return -1;
+  return ORDER_ALPHABET.indexOf(ch);
+}
+
+function rankBetween(left, right) {
+  const leftKey = String(left || '');
+  const rightKey = String(right || '');
+  if (leftKey && rightKey && leftKey >= rightKey) {
+    return `${leftKey}${ORDER_ALPHABET[Math.floor(ORDER_BASE / 2)]}`;
+  }
+  let i = 0;
+  let prefix = '';
+  while (i < 64) {
+    const leftDigit = i < leftKey.length ? getOrderCharIndex(leftKey[i]) : -1;
+    const rightDigit = i < rightKey.length ? getOrderCharIndex(rightKey[i]) : ORDER_BASE;
+    if (leftDigit < 0 && i < leftKey.length) {
+      return `${prefix}${ORDER_ALPHABET[Math.floor(ORDER_BASE / 2)]}`;
+    }
+    if (rightDigit < 0 && i < rightKey.length) {
+      return `${prefix}${ORDER_ALPHABET[Math.floor(ORDER_BASE / 2)]}`;
+    }
+    if (rightDigit - leftDigit > 1) {
+      const mid = Math.floor((leftDigit + rightDigit) / 2);
+      return `${prefix}${ORDER_ALPHABET[mid]}`;
+    }
+    prefix += i < leftKey.length ? leftKey[i] : ORDER_ALPHABET[0];
+    i += 1;
+  }
+  return `${prefix}${ORDER_ALPHABET[Math.floor(ORDER_BASE / 2)]}`;
+}
+
+function getNodeOrderKey(item, keyName = 'order_key') {
+  return String(item?.extra_data?.[keyName] || '').trim();
+}
+
+function compareSiblingOrder(a, b, keyName = 'order_key') {
+  const keyA = getNodeOrderKey(a, keyName);
+  const keyB = getNodeOrderKey(b, keyName);
+  if (keyA && keyB && keyA !== keyB) return keyA.localeCompare(keyB);
+  if (keyA && !keyB) return -1;
+  if (!keyA && keyB) return 1;
+  const numericA = Number(a?.extra_data?.lane_order);
+  const numericB = Number(b?.extra_data?.lane_order);
+  const validA = Number.isFinite(numericA);
+  const validB = Number.isFinite(numericB);
+  if (keyName === 'lane_order_key' && validA && validB && numericA !== numericB) return numericA - numericB;
+  if (keyName === 'lane_order_key' && validA && !validB) return -1;
+  if (keyName === 'lane_order_key' && !validA && validB) return 1;
+  return String(a?.created_at || '').localeCompare(String(b?.created_at || ''));
+}
+
 function populateParentSelect(items) {
   const select = document.getElementById('new-item-parent');
   if (!select) return;
@@ -298,22 +490,182 @@ function populateParentSelect(items) {
 }
 
 function renderMarkdownSnippet(text) {
-  const escaped = safeText(String(text || ''));
-  return escaped.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, (_m, label, url) => {
-    const safeUrl = safeText(url);
-    const safeLabel = safeText(label);
-    return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer">${safeLabel}</a>`;
-  });
+  const source = String(text || '').replace(/\r\n/g, '\n');
+  const lines = source.split('\n');
+  const blocks = [];
+  let listItems = [];
+
+  const flushList = () => {
+    if (!listItems.length) return;
+    blocks.push(`<ul>${listItems.map((item) => `<li>${item}</li>`).join('')}</ul>`);
+    listItems = [];
+  };
+
+  const renderInline = (raw) => {
+    let html = safeText(String(raw || ''));
+    html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+    html = html.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, (_m, label, url) => {
+      const safeUrl = safeText(url);
+      const safeLabel = safeText(label);
+      return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer">${safeLabel}</a>`;
+    });
+    return html;
+  };
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed) {
+      flushList();
+      continue;
+    }
+    if (/^[-*]\s+/.test(trimmed)) {
+      listItems.push(renderInline(trimmed.replace(/^[-*]\s+/, '')));
+      continue;
+    }
+    flushList();
+    const heading = trimmed.match(/^(#{1,6})\s+(.+)$/);
+    if (heading) {
+      const level = Math.min(6, heading[1].length);
+      blocks.push(`<h${level}>${renderInline(heading[2])}</h${level}>`);
+      continue;
+    }
+    blocks.push(`<p>${renderInline(trimmed)}</p>`);
+  }
+  flushList();
+  return blocks.join('');
 }
 
 function getNodeById(nodeId) {
   return state.currentSandbox?.items?.find((item) => item.id === nodeId) || null;
 }
 
+function getWorkItemNameById(nodeId) {
+  const row = getNodeById(nodeId);
+  return row?.name || String(nodeId || '');
+}
+
+function renderQuickDiaryTargetLabel() {
+  const el = document.getElementById('sandbox-diary-target-label');
+  if (!(el instanceof HTMLElement)) return;
+  if (!state.currentSandbox) {
+    el.textContent = '快速日记：未进入沙盘';
+    return;
+  }
+  const nodeId = state.selectedNodeId;
+  if (!nodeId) {
+    el.textContent = `快速日记：关联沙盘 ${state.currentSandbox.name}`;
+    return;
+  }
+  el.textContent = `快速日记：${state.currentSandbox.name} / ${getWorkItemNameById(nodeId)}`;
+}
+
+async function saveDiaryEntry({ content, sandboxId = null, workItemId = null }) {
+  const payload = {
+    sandbox_id: sandboxId,
+    work_item_id: workItemId,
+    content: String(content || '').trim(),
+  };
+  if (!payload.content) return null;
+  return apiRequest(`${API_BASE}/diaries`, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+function shouldAutoCaptureDiary(text) {
+  const normalized = String(text || '').trim().toLowerCase();
+  if (!normalized) return false;
+  if (normalized.length < 2) return false;
+  const patterns = [
+    /记录/,
+    /进展/,
+    /日志/,
+    /汇报/,
+    /同步/,
+    /今日.*完成/,
+    /今天.*完成/,
+    /progress/,
+    /update/,
+  ];
+  return patterns.some((pattern) => pattern.test(normalized));
+}
+
+function resolveDiaryCaptureIntent(text) {
+  const raw = String(text || '').trim();
+  const auto = shouldAutoCaptureDiary(raw);
+  const directPrefix = /^(请\s*)?(帮我\s*)?(记录(日记|日志)|写(日记|日志)|日记|日志)\s*[:：]?\s*/;
+  const isDirectDiaryCommand = directPrefix.test(raw);
+  const stripped = isDirectDiaryCommand ? raw.replace(directPrefix, '').trim() : raw;
+  return {
+    shouldCapture: auto,
+    isDirectDiaryCommand,
+    diaryContent: stripped || raw,
+  };
+}
+
+function parseNodeIdFromNodeContext(payloadContent) {
+  const text = String(payloadContent || '');
+  const match = text.match(/node_id=([^\n]+)/);
+  if (!match) return null;
+  const nodeId = String(match[1] || '').trim();
+  return nodeId || null;
+}
+
+function openDiaryEditDialog(diary) {
+  const dialog = document.getElementById('diary-edit-dialog');
+  const textarea = document.getElementById('diary-edit-content');
+  const preview = document.getElementById('diary-edit-preview');
+  if (!(dialog instanceof HTMLDialogElement) || !(textarea instanceof HTMLTextAreaElement)) return;
+  dialog.dataset.editDiaryId = String(diary?.id || '');
+  textarea.value = String(diary?.content || '');
+  if (preview instanceof HTMLElement) {
+    const rendered = renderMarkdownSnippet(textarea.value);
+    preview.innerHTML = rendered || '<p class="is-empty">在左侧输入 Markdown，这里会实时预览。</p>';
+    preview.classList.toggle('is-empty', !rendered);
+  }
+  dialog.showModal();
+  textarea.focus();
+}
+
+function closeDiaryEditDialog() {
+  const dialog = document.getElementById('diary-edit-dialog');
+  if (!(dialog instanceof HTMLDialogElement)) return;
+  dialog.close();
+}
+
+async function submitDiaryEditDialog() {
+  const dialog = document.getElementById('diary-edit-dialog');
+  const textarea = document.getElementById('diary-edit-content');
+  if (!(dialog instanceof HTMLDialogElement) || !(textarea instanceof HTMLTextAreaElement)) return;
+  const diaryId = String(dialog.dataset.editDiaryId || '').trim();
+  const content = textarea.value.trim();
+  if (!diaryId || !content) return;
+  await apiRequest(`${API_BASE}/diaries/${diaryId}`, {
+    method: 'PUT',
+    body: JSON.stringify({ content }),
+  });
+  const selectedNodeId = state.selectedNodeId;
+  const selectedFilter = state.nodeEntityFilter;
+  closeDiaryEditDialog();
+  await loadDiaries();
+  if (state.currentSandbox?.id) {
+    await loadSandbox(state.currentSandbox.id);
+    if (selectedNodeId) {
+      showNodeEntityDrawer(selectedNodeId, selectedFilter);
+    }
+  }
+}
+
 function getNodeEntitiesByNodeId(nodeId) {
   return (state.nodeEntities || []).filter((row) => row.work_item_id === nodeId);
 }
 
+function getNodeDiariesByNodeId(nodeId) {
+  return (state.currentSandbox?.diaries || []).filter((row) => row.work_item_id === nodeId);
+}
+
 function closeNodeEntityDrawer() {
   const drawer = document.getElementById('node-entity-drawer');
   if (!drawer) return;
@@ -349,6 +701,7 @@ function renderNodeEntitySummary(nodeId) {
   const container = document.getElementById('node-entity-summary');
   if (!container) return;
   const rows = getNodeEntitiesByNodeId(nodeId);
+  const diaries = getNodeDiariesByNodeId(nodeId);
   const issues = rows.filter((row) => row.entity_type === 'issue');
   const knowledges = rows.filter((row) => row.entity_type === 'knowledge');
   const capabilities = rows.filter((row) => row.entity_type === 'capability');
@@ -358,38 +711,88 @@ function renderNodeEntitySummary(nodeId) {
     <div class="summary-card"><div class="label">Open Issue</div><div class="value">${openIssues}</div></div>
     <div class="summary-card"><div class="label">Knowledge</div><div class="value">${knowledges.length}</div></div>
     <div class="summary-card"><div class="label">Capability</div><div class="value">${capabilities.length}</div></div>
+    <div class="summary-card"><div class="label">Diary</div><div class="value">${diaries.length}</div></div>
   `;
 }
 
+async function processNodeDiary(diaryId, action) {
+  if (!state.currentSandbox) return;
+  await apiRequest(`${API_BASE}/diaries/${diaryId}/process`, {
+    method: 'PUT',
+    body: JSON.stringify({ action }),
+  });
+  const selectedNodeId = state.selectedNodeId;
+  const selectedFilter = state.nodeEntityFilter;
+  await loadSandbox(state.currentSandbox.id);
+  await loadDiaries();
+  if (selectedNodeId) {
+    showNodeEntityDrawer(selectedNodeId, selectedFilter);
+  }
+}
+
 function renderNodeEntityList(nodeId) {
   const container = document.getElementById('node-entity-list');
   if (!container) return;
-  const allRows = getNodeEntitiesByNodeId(nodeId);
+  const allEntityRows = getNodeEntitiesByNodeId(nodeId);
+  const allDiaryRows = getNodeDiariesByNodeId(nodeId);
+  const timelineRows = [
+    ...allEntityRows.map((row) => ({ ...row, timeline_type: row.entity_type || 'issue' })),
+    ...allDiaryRows.map((row) => ({ ...row, timeline_type: 'diary' })),
+  ].sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
   const rows = state.nodeEntityFilter === 'all'
-    ? allRows
-    : allRows.filter((row) => row.entity_type === state.nodeEntityFilter);
+    ? timelineRows
+    : timelineRows.filter((row) => row.timeline_type === state.nodeEntityFilter);
   if (!rows.length) {
-    container.innerHTML = '<div class="empty-state"><p>当前节点还没有 issue/knowledge/capability</p></div>';
+    container.innerHTML = '<div class="empty-state"><p>当前筛选下暂无记录</p></div>';
     return;
   }
-  container.innerHTML = rows.map((row) => `
-    <div class="entity-card">
-      <div class="entity-card-header">
-        <div>
-          <span class="entity-type-pill">${safeText(row.entity_type)}</span>
-          <strong>${safeText(row.title || '-')}</strong>
+  container.innerHTML = rows.map((row) => {
+    if (row.timeline_type === 'diary') {
+      return `
+        <div class="entity-card diary-card ${row.processed ? 'processed' : ''}">
+          <div class="entity-card-header">
+            <div>
+              <span class="entity-type-pill">diary</span>
+              <strong>${safeText('日志记录')}</strong>
+            </div>
+            <div class="entity-card-actions">
+              <button class="btn btn-secondary btn-sm" data-diary-edit-id="${safeText(row.id)}">编辑</button>
+              ${row.processed ? '' : `
+                <button class="btn btn-secondary btn-sm" data-diary-confirm-id="${safeText(row.id)}">采纳</button>
+                <button class="btn btn-secondary btn-sm" data-diary-ignore-id="${safeText(row.id)}">忽略</button>
+              `}
+            </div>
+          </div>
+          <div class="entity-meta">
+            ${safeText(new Date(row.created_at).toLocaleString())}
+            ${row.processed ? ' · 已处理' : ' · 未处理'}
+          </div>
+          <div class="entity-content">${renderMarkdownSnippet(row.content || '')}</div>
+        </div>
+      `;
+    }
+    return `
+      <div class="entity-card">
+        <div class="entity-card-header">
+          <div>
+            <span class="entity-type-pill">${safeText(row.entity_type)}</span>
+            <strong>${safeText(row.title || '-')}</strong>
+          </div>
+          <div class="entity-card-actions">
+            <button class="btn btn-secondary btn-sm" data-entity-edit-id="${safeText(row.id)}">编辑</button>
+            <button class="btn btn-secondary btn-sm" data-entity-delete-id="${safeText(row.id)}">删除</button>
+          </div>
         </div>
-        <div class="entity-card-actions">
-          <button class="btn btn-secondary btn-sm" data-entity-edit-id="${safeText(row.id)}">编辑</button>
-          <button class="btn btn-secondary btn-sm" data-entity-delete-id="${safeText(row.id)}">删除</button>
+        <div class="entity-meta">
+          ${safeText(new Date(row.created_at).toLocaleString())}
+          ${row.status ? ` · <span class="entity-status-pill ${safeText(row.status)}">${safeText(row.status)}</span>` : ''}
+          ${row.priority ? ` · ${safeText(row.priority)}` : ''}
+          ${row.assignee ? ` · @${safeText(row.assignee)}` : ''}
         </div>
+        <div class="entity-content">${renderMarkdownSnippet(row.content_md || '')}</div>
       </div>
-      <div class="entity-meta">
-        ${row.status ? `<span class="entity-status-pill ${safeText(row.status)}">${safeText(row.status)}</span>` : ''}${row.priority ? `· ${safeText(row.priority)}` : ''} ${row.assignee ? `· @${safeText(row.assignee)}` : ''}
-      </div>
-      <div class="entity-content">${renderMarkdownSnippet(row.content_md || '')}</div>
-    </div>
-  `).join('');
+    `;
+  }).join('');
 
   container.querySelectorAll('[data-entity-delete-id]').forEach((el) => {
     el.addEventListener('click', async (e) => {
@@ -406,11 +809,40 @@ function renderNodeEntityList(nodeId) {
       e.preventDefault();
       const id = el.getAttribute('data-entity-edit-id');
       if (!id) return;
-      const row = allRows.find((item) => item.id === id);
+      const row = allEntityRows.find((item) => item.id === id);
       if (!row) return;
       startEditNodeEntity(row);
     });
   });
+
+  container.querySelectorAll('[data-diary-edit-id]').forEach((el) => {
+    el.addEventListener('click', (e) => {
+      e.preventDefault();
+      const id = el.getAttribute('data-diary-edit-id');
+      if (!id) return;
+      const row = allDiaryRows.find((item) => item.id === id);
+      if (!row) return;
+      openDiaryEditDialog(row);
+    });
+  });
+
+  container.querySelectorAll('[data-diary-confirm-id]').forEach((el) => {
+    el.addEventListener('click', async (e) => {
+      e.preventDefault();
+      const id = el.getAttribute('data-diary-confirm-id');
+      if (!id) return;
+      await processNodeDiary(id, 'confirm');
+    });
+  });
+
+  container.querySelectorAll('[data-diary-ignore-id]').forEach((el) => {
+    el.addEventListener('click', async (e) => {
+      e.preventDefault();
+      const id = el.getAttribute('data-diary-ignore-id');
+      if (!id) return;
+      await processNodeDiary(id, 'ignore');
+    });
+  });
 }
 
 function resetNodeEntityForm() {
@@ -438,6 +870,19 @@ function resetNodeEntityForm() {
   setNodeEntityFormExpanded(false);
 }
 
+function ensureCapabilityTypeOption(value) {
+  const capabilityTypeInput = document.getElementById('entity-capability-type-input');
+  if (!(capabilityTypeInput instanceof HTMLSelectElement)) return;
+  const normalized = String(value || '').trim();
+  if (!normalized) return;
+  const hasOption = Array.from(capabilityTypeInput.options).some((option) => option.value === normalized);
+  if (hasOption) return;
+  const option = document.createElement('option');
+  option.value = normalized;
+  option.textContent = `${normalized}（历史值）`;
+  capabilityTypeInput.appendChild(option);
+}
+
 function startEditNodeEntity(row) {
   state.editingNodeEntityId = row.id;
   setNodeEntityFormExpanded(true);
@@ -455,6 +900,7 @@ function startEditNodeEntity(row) {
   if (assigneeInput) assigneeInput.value = row.assignee || '';
   if (statusInput) statusInput.value = row.status || '';
   if (priorityInput) priorityInput.value = row.priority || '';
+  ensureCapabilityTypeOption(row.capability_type || '');
   if (capabilityTypeInput) capabilityTypeInput.value = row.capability_type || '';
 
   const submitBtn = document.getElementById('create-node-entity-btn');
@@ -464,15 +910,17 @@ function startEditNodeEntity(row) {
   titleInput?.focus();
 }
 
-function showNodeEntityDrawer(nodeId) {
+function showNodeEntityDrawer(nodeId, preferredFilter = 'all') {
   const drawer = document.getElementById('node-entity-drawer');
   const title = document.getElementById('drawer-node-title');
   const node = getNodeById(nodeId);
   if (!drawer || !title || !node) return;
   state.selectedNodeId = nodeId;
-  state.nodeEntityFilter = 'all';
+  const filter = ['all', 'issue', 'knowledge', 'capability', 'diary'].includes(preferredFilter) ? preferredFilter : 'all';
+  state.nodeEntityFilter = filter;
   title.textContent = node.name || nodeId;
   renderNodeEntitySummary(nodeId);
+  renderQuickDiaryTargetLabel();
   renderNodeEntityFilterTabs();
   renderNodeEntityList(nodeId);
   resetNodeEntityForm();
@@ -590,6 +1038,8 @@ async function sendSandboxChatMessage(content, options = {}) {
 
   const displayContent = options.displayContent || content;
   const payloadContent = options.payloadContent || content;
+  const autoDiaryWorkItemId = options.workItemId || parseNodeIdFromNodeContext(payloadContent);
+  const diaryIntent = resolveDiaryCaptureIntent(displayContent || content);
   messages.insertAdjacentHTML('beforeend', `<div class="chat-message user">${escapeHtml(displayContent)}</div>`);
   const loadingMessage = appendLoadingMessage(messages);
   messages.scrollTop = messages.scrollHeight;
@@ -598,6 +1048,31 @@ async function sendSandboxChatMessage(content, options = {}) {
   setButtonState(btn, { disabled: true, text: '思考中' });
 
   try {
+    let createdDiary = null;
+    if (diaryIntent.shouldCapture) {
+      createdDiary = await saveDiaryEntry({
+        content: diaryIntent.diaryContent,
+        sandboxId: state.currentSandbox.id,
+        workItemId: autoDiaryWorkItemId || null,
+      });
+    }
+    if (diaryIntent.isDirectDiaryCommand) {
+      loadingMessage?.remove();
+      if (createdDiary && state.currentSandbox) {
+        state.currentSandbox.diaries = [createdDiary, ...(state.currentSandbox.diaries || [])];
+        renderSandboxOverview();
+        if (state.selectedNodeId && String(createdDiary.work_item_id || '') === String(state.selectedNodeId)) {
+          renderNodeEntitySummary(state.selectedNodeId);
+          renderNodeEntityList(state.selectedNodeId);
+        }
+      }
+      messages.insertAdjacentHTML('beforeend', '<div class="chat-message assistant">📝 已记录日记。</div>');
+      messages.scrollTop = messages.scrollHeight;
+      if (state.currentSandbox) {
+        await loadDiaries();
+      }
+      return;
+    }
     const history = state.chats
       .filter(c => c.role)
       .slice(-10)
@@ -693,7 +1168,7 @@ function openQuickChatPopover(nodeId, anchorEl) {
     closeQuickChatPopover();
     const payloadContent = composeQuickChatContent(nodeId, question);
     const displayContent = `【快捷】${question}`;
-    await sendSandboxChatMessage(question, { payloadContent, displayContent });
+    await sendSandboxChatMessage(question, { payloadContent, displayContent, workItemId: nodeId });
   });
   textarea?.addEventListener('input', updateSubmitState);
   textarea?.addEventListener('keydown', async (event) => {
@@ -771,8 +1246,10 @@ async function loadSandbox(id) {
   document.getElementById('sandbox-title').textContent = sandbox.name;
   applyWorkTreeViewMode(state.workTreeViewMode || 'full');
   applyWorkItemAssigneeToggle();
+  applyWorkItemElementPreviewMode();
   applySandboxLayoutMode();
   applySandboxFullscreenState();
+  renderQuickDiaryTargetLabel();
   renderSandboxOverview();
   renderWorkTree();
   loadSandboxChats(id);
@@ -886,8 +1363,63 @@ window.undoOperation = async function(operationId, btn) {
   }
 };
 
+async function hydrateDiaryWorkItemNames(diaries) {
+  const map = {};
+  const sandboxIds = Array.from(
+    new Set(
+      (diaries || [])
+        .filter((row) => row?.sandbox_id && row?.work_item_id)
+        .map((row) => String(row.sandbox_id)),
+    ),
+  );
+  await Promise.all(sandboxIds.map(async (sandboxId) => {
+    try {
+      const items = await apiRequest(`${API_BASE}/sandboxes/${sandboxId}/items`);
+      (items || []).forEach((item) => {
+        const key = `${sandboxId}:${item.id}`;
+        map[key] = item.name || item.id;
+      });
+    } catch {
+      // Ignore per-sandbox fetch failure to keep diary page available.
+    }
+  }));
+  state.diaryWorkItemNameMap = map;
+}
+
+function getDiaryWorkItemName(sandboxId, workItemId) {
+  if (!workItemId) return '';
+  const sandboxKey = String(sandboxId || '').trim();
+  const itemKey = String(workItemId || '').trim();
+  if (!itemKey) return '';
+  if (sandboxKey) {
+    const key = `${sandboxKey}:${itemKey}`;
+    if (state.diaryWorkItemNameMap[key]) {
+      return state.diaryWorkItemNameMap[key];
+    }
+  }
+  if (state.currentSandbox?.id === sandboxKey) {
+    const node = (state.currentSandbox.items || []).find((item) => item.id === itemKey);
+    if (node?.name) return node.name;
+  }
+  return itemKey;
+}
+
+function openDiaryWorkItemInSandbox(sandboxId, workItemId) {
+  const targetSandboxId = String(sandboxId || '').trim();
+  const targetWorkItemId = String(workItemId || '').trim();
+  if (!targetSandboxId || !targetWorkItemId) return;
+  const nextHash = `/sandbox/${encodeURIComponent(targetSandboxId)}?node_id=${encodeURIComponent(targetWorkItemId)}&open_drawer=1`;
+  const currentHash = window.location.hash.slice(1);
+  if (currentHash === nextHash && state.currentSandbox?.id === targetSandboxId) {
+    showNodeEntityDrawer(targetWorkItemId);
+    return;
+  }
+  window.location.hash = nextHash;
+}
+
 async function loadDiaries() {
   state.diaries = await apiRequest(`${API_BASE}/diaries`);
+  await hydrateDiaryWorkItemNames(state.diaries);
   renderDiaries();
 }
 
@@ -899,6 +1431,11 @@ function renderDiaries() {
   mountDiaryTimeline('diary-timeline', {
     diaries: filtered,
     getSandboxName,
+    getWorkItemName: getDiaryWorkItemName,
+    onOpenWorkItem: (sandboxId, workItemId) => {
+      openDiaryWorkItemInSandbox(sandboxId, workItemId);
+    },
+    renderContent: (content) => renderMarkdownSnippet(content),
     onConfirm: async (id) => {
       await apiRequest(`${API_BASE}/diaries/${id}/process`, {
         method: 'PUT',
@@ -912,7 +1449,12 @@ function renderDiaries() {
         body: JSON.stringify({ action: 'ignore' }),
       });
       await loadDiaries();
-    }
+    },
+    onEdit: async (id) => {
+      const diary = state.diaries.find((row) => row.id === id);
+      if (!diary) return;
+      openDiaryEditDialog(diary);
+    },
   });
 }
 
@@ -922,10 +1464,12 @@ function getSandboxName(id) {
 }
 
 function updateSandboxSelect() {
-  const diarySelect = document.getElementById('diary-sandbox-select');
-  if (diarySelect) {
-    diarySelect.innerHTML = '<option value="">选择沙盘（可选）</option>' +
+  const diaryFilterSelect = document.getElementById('diary-sandbox-filter');
+  if (diaryFilterSelect) {
+    const current = state.diarySandboxFilter || '';
+    diaryFilterSelect.innerHTML = '<option value="">全部关联沙盘</option>' +
       state.sandboxes.map(s => `<option value="${s.id}">${safeText(s.name)}</option>`).join('');
+    diaryFilterSelect.value = current;
   }
 
   const changesSelect = document.getElementById('changes-sandbox-filter');
@@ -1196,15 +1740,49 @@ async function loadSettings() {
   apiKeyInput.value = '';
   apiKeyInput.placeholder = state.settings.has_api_key ? '已配置，留空表示不修改' : 'sk-...';
   document.getElementById('setting-model').value = state.settings.model || '';
+  renderSettingHeadersRows(state.settings.headers || {});
 }
 
-async function loadChats() {
-  const messages = document.getElementById('chat-messages');
-  if (!messages) return;
-  
-  const chats = await apiRequest(`${API_BASE}/chats`);
-  mountHtmlList('chat-messages', chats.map((chat) => renderChatEntry(chat, { safeText, renderAIActionMessage })));
-  messages.scrollTop = messages.scrollHeight;
+function createSettingHeaderRow(key = '', value = '') {
+  const row = document.createElement('div');
+  row.className = 'settings-kv-row';
+  row.innerHTML = `
+    <input type="text" class="setting-header-key" placeholder="Header 名称" value="${escapeHtml(String(key || ''))}">
+    <input type="text" class="setting-header-value" placeholder="Header 值" value="${escapeHtml(String(value || ''))}">
+    <button class="btn btn-secondary btn-sm remove-setting-header-btn" type="button">删除</button>
+  `;
+  row.querySelector('.remove-setting-header-btn')?.addEventListener('click', () => {
+    row.remove();
+  });
+  return row;
+}
+
+function renderSettingHeadersRows(headers) {
+  const list = document.getElementById('setting-headers-list');
+  if (!(list instanceof HTMLElement)) return;
+  list.innerHTML = '';
+  const entries = Object.entries(headers || {}).filter(([k, v]) => String(k || '').trim() && String(v || '').trim());
+  if (!entries.length) {
+    list.appendChild(createSettingHeaderRow('', ''));
+    return;
+  }
+  entries.forEach(([k, v]) => list.appendChild(createSettingHeaderRow(String(k), String(v))));
+}
+
+function collectSettingHeadersFromUI() {
+  const list = document.getElementById('setting-headers-list');
+  if (!(list instanceof HTMLElement)) return {};
+  const rows = Array.from(list.querySelectorAll('.settings-kv-row'));
+  const headers = {};
+  rows.forEach((row) => {
+    const keyInput = row.querySelector('.setting-header-key');
+    const valueInput = row.querySelector('.setting-header-value');
+    const key = String(keyInput?.value || '').trim();
+    const value = String(valueInput?.value || '').trim();
+    if (!key || !value) return;
+    headers[key] = value;
+  });
+  return headers;
 }
 
 function showPage(pageId) {
@@ -1237,6 +1815,7 @@ function editWorkItem(id) {
 function initApp() {
   const hash = window.location.hash;
   loadWorkItemAssigneePreference();
+  renderQuickDiaryTargetLabel();
   
   document.querySelectorAll('.nav-list a').forEach(link => {
     link.addEventListener('click', (e) => {
@@ -1489,43 +2068,6 @@ function initApp() {
     await loadSandbox(state.currentSandbox.id);
   });
   
-  document.getElementById('send-btn')?.addEventListener('click', async () => {
-    const input = document.getElementById('chat-input');
-    const content = input.value.trim();
-    if (!content) return;
-    
-    const messages = document.getElementById('chat-messages');
-    messages.insertAdjacentHTML('beforeend', `<div class="chat-message user">${escapeHtml(content)}</div>`);
-    const loadingMessage = appendLoadingMessage(messages);
-    messages.scrollTop = messages.scrollHeight;
-    input.value = '';
-    
-    const btn = document.getElementById('send-btn');
-    setButtonState(btn, { disabled: true });
-    
-    try {
-      await apiRequest(`${API_BASE}/chats`, {
-        method: 'POST',
-        body: JSON.stringify({ content }),
-      });
-      
-      loadingMessage?.remove();
-      await loadChats();
-    } catch (error) {
-      loadingMessage?.remove();
-      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant error">❌ 错误: ${escapeHtml(error.message)}</div>`);
-      messages.scrollTop = messages.scrollHeight;
-    } finally {
-      setButtonState(btn, { disabled: false });
-    }
-  });
-  
-  document.getElementById('chat-input')?.addEventListener('keypress', (e) => {
-    if (e.key === 'Enter') {
-      document.getElementById('send-btn').click();
-    }
-  });
-  
   document.getElementById('sandbox-send-btn')?.addEventListener('click', async () => {
     const input = document.getElementById('sandbox-chat-input');
     const content = input.value.trim();
@@ -1650,23 +2192,59 @@ function initApp() {
   });
   
   document.getElementById('save-diary-btn')?.addEventListener('click', async () => {
-    const sandboxId = document.getElementById('diary-sandbox-select').value || null;
     const content = document.getElementById('diary-content').value.trim();
     if (!content) return;
-    
-    await apiRequest(`${API_BASE}/diaries`, {
-      method: 'POST',
-      body: JSON.stringify({ sandbox_id: sandboxId, content }),
-    });
-    
+    await saveDiaryEntry({ content, sandboxId: null, workItemId: null });
     document.getElementById('diary-content').value = '';
     await loadDiaries();
   });
+
+  document.getElementById('drawer-diary-save-btn')?.addEventListener('click', async () => {
+    if (!state.currentSandbox || !state.selectedNodeId) return;
+    const textarea = document.getElementById('drawer-diary-content');
+    if (!(textarea instanceof HTMLTextAreaElement)) return;
+    const content = textarea.value.trim();
+    if (!content) return;
+    const selectedNodeId = state.selectedNodeId;
+    const selectedFilter = state.nodeEntityFilter;
+    await saveDiaryEntry({
+      content,
+      sandboxId: state.currentSandbox.id,
+      workItemId: selectedNodeId,
+    });
+    textarea.value = '';
+    await loadSandbox(state.currentSandbox.id);
+    await loadDiaries();
+    showNodeEntityDrawer(selectedNodeId, selectedFilter);
+  });
+
+  document.getElementById('cancel-edit-diary-btn')?.addEventListener('click', () => {
+    closeDiaryEditDialog();
+  });
+  document.getElementById('confirm-edit-diary-btn')?.addEventListener('click', async () => {
+    await submitDiaryEditDialog();
+  });
+  document.getElementById('diary-edit-content')?.addEventListener('keydown', async (event) => {
+    const isSubmit = event.key === 'Enter' && (event.metaKey || event.ctrlKey);
+    if (!isSubmit) return;
+    event.preventDefault();
+    await submitDiaryEditDialog();
+  });
+  document.getElementById('diary-edit-content')?.addEventListener('input', (event) => {
+    const preview = document.getElementById('diary-edit-preview');
+    if (!(preview instanceof HTMLElement)) return;
+    const target = event.target;
+    const value = target instanceof HTMLTextAreaElement ? target.value : '';
+    const rendered = renderMarkdownSnippet(value);
+    preview.innerHTML = rendered || '<p class="is-empty">在左侧输入 Markdown，这里会实时预览。</p>';
+    preview.classList.toggle('is-empty', !rendered);
+  });
   
   document.getElementById('save-settings-btn')?.addEventListener('click', async () => {
     const api_url = document.getElementById('setting-api-url').value;
     const api_key = document.getElementById('setting-api-key').value;
     const model = document.getElementById('setting-model').value;
+    const headers = collectSettingHeadersFromUI();
     
     await apiRequest(`${API_BASE}/settings/api_url`, {
       method: 'PUT',
@@ -1682,11 +2260,21 @@ function initApp() {
       method: 'PUT',
       body: JSON.stringify({ value: model }),
     });
+    await apiRequest(`${API_BASE}/settings/headers`, {
+      method: 'PUT',
+      body: JSON.stringify({ value: headers }),
+    });
     
     alert('设置已保存');
     await loadSettings();
   });
 
+  document.getElementById('add-setting-header-btn')?.addEventListener('click', () => {
+    const list = document.getElementById('setting-headers-list');
+    if (!(list instanceof HTMLElement)) return;
+    list.appendChild(createSettingHeaderRow('', ''));
+  });
+
   document.getElementById('work-item-search')?.addEventListener('input', (e) => {
     state.workItemSearch = e.target.value || '';
     renderWorkTree();
@@ -1703,6 +2291,11 @@ function initApp() {
     renderWorkTree();
   });
 
+  document.getElementById('work-item-element-preview-mode')?.addEventListener('change', (e) => {
+    state.workItemElementPreviewMode = e.target.value || 'none';
+    renderWorkTree();
+  });
+
   document.getElementById('work-item-show-assignee-toggle')?.addEventListener('change', (e) => {
     state.workItemShowAssignee = Boolean(e.target.checked);
     persistWorkItemAssigneePreference();
@@ -1719,6 +2312,11 @@ function initApp() {
     renderDiaries();
   });
 
+  document.getElementById('diary-sandbox-filter')?.addEventListener('change', (e) => {
+    state.diarySandboxFilter = e.target.value || '';
+    renderDiaries();
+  });
+
   document.getElementById('generate-report-btn')?.addEventListener('click', () => {
     if (!state.currentSandbox) return;
     const mode = document.getElementById('report-template')?.value || 'management';
@@ -1746,16 +2344,26 @@ function initApp() {
   document.getElementById('generate-insight-btn')?.addEventListener('click', async () => {
     if (!state.currentSandbox) return;
     const output = document.getElementById('sandbox-insight-output');
+    const contentEl = document.getElementById('sandbox-insight-content');
+    if (!(output instanceof HTMLElement) || !(contentEl instanceof HTMLElement)) return;
     output.classList.remove('hidden');
-    output.textContent = '生成中...';
+    output.removeAttribute('hidden');
+    contentEl.textContent = '生成中...';
     try {
       const result = await apiRequest(`${API_BASE}/chats/sandbox/${state.currentSandbox.id}/insight`);
-      output.textContent = result.insight;
+      contentEl.textContent = result.insight;
     } catch (error) {
-      output.textContent = `生成失败：${error.message}`;
+      contentEl.textContent = `生成失败：${error.message}`;
     }
   });
 
+  document.getElementById('close-sandbox-insight-btn')?.addEventListener('click', () => {
+    const output = document.getElementById('sandbox-insight-output');
+    if (!(output instanceof HTMLElement)) return;
+    output.classList.add('hidden');
+    output.setAttribute('hidden', 'hidden');
+  });
+
   document.getElementById('changes-sandbox-filter')?.addEventListener('change', async (e) => {
     state.changesSandboxFilter = e.target.value || '';
     await loadChanges();
@@ -1812,30 +2420,38 @@ function initApp() {
   
   async function handleRoute() {
     const hash = window.location.hash.slice(1) || '/';
+    const [pathHash, queryString = ''] = hash.split('?');
+    const query = new URLSearchParams(queryString);
     const fullscreenRoot = getSandboxFullscreenElement();
-    if (!hash.startsWith('/sandbox/') && fullscreenRoot && document.fullscreenElement === fullscreenRoot) {
+    if (!pathHash.startsWith('/sandbox/') && fullscreenRoot && document.fullscreenElement === fullscreenRoot) {
       await document.exitFullscreen();
     }
     
-    if (hash === '/') {
-      showPage('home');
-      await loadChats();
-    } else if (hash === '/sandboxes') {
+    if (pathHash === '/') {
       showPage('sandboxes');
       await loadSandboxes();
-    } else if (hash.startsWith('/sandbox/')) {
-      const id = hash.split('/')[2];
+    } else if (pathHash === '/sandboxes') {
+      showPage('sandboxes');
+      await loadSandboxes();
+    } else if (pathHash.startsWith('/sandbox/')) {
+      const id = decodeURIComponent(pathHash.split('/')[2] || '');
       showPage('sandbox-detail');
       await loadSandbox(id);
-    } else if (hash === '/diaries') {
+      const targetNodeId = String(query.get('node_id') || '').trim();
+      const shouldOpenDrawer = query.get('open_drawer') === '1' || Boolean(targetNodeId);
+      const preferredFilter = query.get('entity_filter') || 'all';
+      if (shouldOpenDrawer && targetNodeId) {
+        showNodeEntityDrawer(targetNodeId, preferredFilter);
+      }
+    } else if (pathHash === '/diaries') {
       showPage('diaries');
       await loadDiaries();
       await loadSandboxes();
-    } else if (hash === '/changes') {
+    } else if (pathHash === '/changes') {
       showPage('changes');
       await loadSandboxes();
       await loadChanges();
-    } else if (hash === '/settings') {
+    } else if (pathHash === '/settings') {
       showPage('settings');
       await loadSettings();
     }