@qnote/q-ai-note 1.0.4 → 1.0.6

package/dist/web/app.js

@@ -9,6 +9,7 @@ const state = {
   operations: [],
   chats: [],
   settings: {},
+  readonly: false,
   pendingAction: null,
   nodeEntities: [],
   nodeEntityStats: null,
@@ -16,14 +17,18 @@ const state = {
   nodeEntityFilter: 'all',
   editingNodeEntityId: null,
   nodeEntityFormExpanded: false,
-  sandboxPresentationMode: false,
+  sandboxChatVisible: false,
+  sandboxChatVisibleBeforeFullscreen: false,
   sandboxFullscreenMode: false,
   workTreeViewMode: 'full',
+  workItemElementPreviewMode: 'none',
   workItemShowAssignee: false,
   workItemSearch: '',
   workItemStatusFilter: 'all',
   diarySearch: '',
+  diarySandboxFilter: '',
   diaryProcessedFilter: 'all',
+  diaryWorkItemNameMap: {},
   changesSandboxFilter: '',
   changesTypeFilter: 'all',
   changesQuickFilter: 'all',
@@ -35,6 +40,7 @@ let sandboxActionHandler = null;
 let sandboxEscLocked = false;
 let resizeRenderTimer = null;
 const WORK_ITEM_SHOW_ASSIGNEE_STORAGE_KEY = 'q-ai-note.work-item.show-assignee';
+const WORK_TREE_VIEW_MODE_STORAGE_KEY = 'q-ai-note.work-tree.view-mode';
 
 function loadWorkItemAssigneePreference() {
   try {
@@ -57,14 +63,78 @@ function persistWorkItemAssigneePreference() {
   }
 }
 
-function applySandboxLayoutMode() {
+function loadWorkTreeViewModePreference() {
+  try {
+    const raw = String(window.localStorage.getItem(WORK_TREE_VIEW_MODE_STORAGE_KEY) || '').trim();
+    if (raw === 'full' || raw === 'report' || raw === 'dense') {
+      state.workTreeViewMode = raw;
+    }
+  } catch {
+    // Ignore storage failures in restricted environments.
+  }
+}
+
+function persistWorkTreeViewModePreference() {
+  try {
+    window.localStorage.setItem(WORK_TREE_VIEW_MODE_STORAGE_KEY, state.workTreeViewMode || 'full');
+  } catch {
+    // Ignore storage failures in restricted environments.
+  }
+}
+
+function applySandboxChatVisibility() {
   const layout = document.getElementById('sandbox-layout');
-  const toggleBtn = document.getElementById('toggle-sandbox-present-btn');
+  const toggleBtn = document.getElementById('toggle-sandbox-chat-btn');
   if (!layout || !toggleBtn) return;
-  const isPresentation = Boolean(state.sandboxPresentationMode);
-  layout.classList.toggle('presentation-mode', isPresentation);
-  toggleBtn.textContent = isPresentation ? '退出展示态' : '展示态布局';
-  toggleBtn.setAttribute('aria-pressed', isPresentation ? 'true' : 'false');
+  const shouldShow = !state.readonly && Boolean(state.sandboxChatVisible);
+  layout.classList.toggle('show-chat', shouldShow);
+  toggleBtn.classList.toggle('hidden', state.readonly);
+  toggleBtn.innerHTML = shouldShow
+    ? '<span class="icon" aria-hidden="true">🤖</span><span>隐藏 AI 助手</span>'
+    : '<span class="icon" aria-hidden="true">🤖</span><span>显示 AI 助手</span>';
+  toggleBtn.setAttribute('aria-pressed', shouldShow ? 'true' : 'false');
+}
+
+async function loadRuntimeMode() {
+  try {
+    const runtime = await apiRequest(`${API_BASE}/runtime`);
+    state.readonly = Boolean(runtime?.readonly);
+  } catch {
+    state.readonly = false;
+  }
+}
+
+function setHiddenById(id, hidden = true) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.classList.toggle('hidden', hidden);
+}
+
+function applyReadonlyMode() {
+  document.body.classList.toggle('readonly-mode', state.readonly);
+  const settingsNav = document.querySelector('[data-nav="settings"]');
+  if (settingsNav instanceof HTMLElement) {
+    settingsNav.classList.toggle('hidden', state.readonly);
+  }
+  setHiddenById('page-settings', state.readonly);
+  setHiddenById('add-sandbox-btn', state.readonly);
+  setHiddenById('add-item-btn', state.readonly);
+  setHiddenById('toggle-node-entity-form-btn', state.readonly);
+  setHiddenById('drawer-diary-save-btn', state.readonly);
+  setHiddenById('save-diary-btn', state.readonly);
+  const diaryForm = document.querySelector('#page-diaries .diary-form');
+  if (diaryForm instanceof HTMLElement) {
+    diaryForm.classList.toggle('hidden', state.readonly);
+  }
+  const drawerDiaryForm = document.querySelector('#node-entity-drawer .drawer-diary-quick-form');
+  if (drawerDiaryForm instanceof HTMLElement) {
+    drawerDiaryForm.classList.toggle('hidden', state.readonly);
+  }
+  if (state.readonly) {
+    state.sandboxChatVisible = false;
+    closeQuickChatPopover();
+  }
+  applySandboxChatVisibility();
 }
 
 function getSandboxLayoutElement() {
@@ -97,7 +167,14 @@ function applySandboxFullscreenState() {
   const layout = getSandboxLayoutElement();
   const fullscreenRoot = getSandboxFullscreenElement();
   const toggleBtn = document.getElementById('toggle-sandbox-fullscreen-btn');
+  const wasFullscreen = Boolean(state.sandboxFullscreenMode);
   const isFullscreen = Boolean(fullscreenRoot && document.fullscreenElement === fullscreenRoot);
+  if (!wasFullscreen && isFullscreen) {
+    state.sandboxChatVisibleBeforeFullscreen = Boolean(state.sandboxChatVisible);
+    state.sandboxChatVisible = false;
+  } else if (wasFullscreen && !isFullscreen) {
+    state.sandboxChatVisible = Boolean(state.sandboxChatVisibleBeforeFullscreen);
+  }
   state.sandboxFullscreenMode = isFullscreen;
   if (layout) {
     layout.classList.toggle('is-fullscreen', isFullscreen);
@@ -109,9 +186,22 @@ function applySandboxFullscreenState() {
     toggleBtn.textContent = isFullscreen ? '退出全屏' : '全屏';
     toggleBtn.setAttribute('aria-pressed', isFullscreen ? 'true' : 'false');
   }
+  applySandboxChatVisibility();
+  applySandboxLayoutHeight();
   void syncSandboxEscLock(isFullscreen);
 }
 
+function applySandboxLayoutHeight() {
+  const layout = getSandboxLayoutElement();
+  if (!(layout instanceof HTMLElement)) return;
+  const rect = layout.getBoundingClientRect();
+  const viewportHeight = Math.floor(window.visualViewport?.height || window.innerHeight || 0);
+  if (!Number.isFinite(viewportHeight) || viewportHeight <= 0) return;
+  const bottomGap = state.sandboxFullscreenMode ? 8 : 10;
+  const nextHeight = Math.max(320, viewportHeight - Math.floor(rect.top) - bottomGap);
+  layout.style.height = `${nextHeight}px`;
+}
+
 async function toggleSandboxFullscreen() {
   const fullscreenRoot = getSandboxFullscreenElement();
   if (!fullscreenRoot) return;
@@ -160,12 +250,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 +292,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 +306,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') {
@@ -217,7 +317,7 @@ function renderWorkTree() {
   }
 
   if (allItems.length === 0) {
-    tree.innerHTML = '<div class="empty-state"><p>点击上方"添加"按钮创建第一个任务</p></div>';
+    tree.innerHTML = `<div class="empty-state"><p>${state.readonly ? '暂无任务' : '点击上方"添加"按钮创建第一个任务'}</p></div>`;
     return;
   }
 
@@ -233,7 +333,7 @@ function renderWorkTree() {
       }
       renderWorkTree();
     },
-    onAddChild: (parentId) => {
+    onAddChild: state.readonly ? undefined : (parentId) => {
       document.getElementById('item-dialog-title').textContent = '添加子任务';
       document.getElementById('item-dialog').dataset.editId = '';
       document.getElementById('new-item-name').value = '';
@@ -244,23 +344,123 @@ function renderWorkTree() {
       document.getElementById('new-item-parent').value = parentId;
       document.getElementById('item-dialog').showModal();
     },
-    onEdit: (id) => {
+    onAddDiary: state.readonly ? undefined : (nodeId) => {
+      showNodeEntityDrawer(nodeId, 'diary');
+      const textarea = document.getElementById('drawer-diary-content');
+      if (textarea instanceof HTMLTextAreaElement) {
+        textarea.focus();
+      }
+    },
+    onEdit: state.readonly ? undefined : (id) => {
       editWorkItem(id);
     },
     onSelect: (id) => {
       showNodeEntityDrawer(id);
     },
-    onDelete: async (id) => {
+    onSelectEntity: (nodeId, entityType) => {
+      showNodeEntityDrawer(nodeId, entityType || 'all');
+    },
+    onMoveNode: state.readonly ? undefined : 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: state.readonly ? undefined : 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: state.readonly ? undefined : 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: state.readonly ? undefined : async (id) => {
       if (confirm('确定删除此任务？')) {
         await apiRequest(`${API_BASE}/items/${id}`, { method: 'DELETE' });
         await loadSandbox(state.currentSandbox.id);
       }
     },
-    onQuickChat: (id, el) => {
+    onQuickChat: state.readonly ? undefined : (id, el) => {
       openQuickChatPopover(id, el);
     },
     renderMode: state.workTreeViewMode === 'dense' ? 'dense' : 'card',
     showAssignee: state.workItemShowAssignee,
+    elementPreviewMode: state.workItemElementPreviewMode,
+    entityRowsByNodeId,
+    readonly: state.readonly,
+    selectedId: state.selectedNodeId || '',
   });
   
   populateParentSelect(allItems);
@@ -289,6 +489,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 +579,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;
@@ -322,6 +763,7 @@ function closeNodeEntityDrawer() {
   state.nodeEntityFilter = 'all';
   state.editingNodeEntityId = null;
   state.nodeEntityFormExpanded = false;
+  renderWorkTree();
 }
 
 function setNodeEntityFormExpanded(expanded) {
@@ -349,6 +791,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 +801,92 @@ 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>
+            ${state.readonly ? '' : `
+              <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>
+          ${state.readonly ? '' : `
+            <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 +903,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 +964,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 +994,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 +1004,18 @@ 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);
+  renderWorkTree();
+  renderQuickDiaryTargetLabel();
   renderNodeEntityFilterTabs();
   renderNodeEntityList(nodeId);
   resetNodeEntityForm();
@@ -583,6 +1126,7 @@ function composeQuickChatContent(nodeId, userQuestion) {
 }
 
 async function sendSandboxChatMessage(content, options = {}) {
+  if (state.readonly) return;
   if (!content || !state.currentSandbox) return;
   const messages = document.getElementById('sandbox-chat-messages');
   const btn = document.getElementById('sandbox-send-btn');
@@ -590,6 +1134,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 +1144,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 +1264,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) => {
@@ -746,12 +1317,13 @@ function renderSandboxes() {
     onOpen: (id) => {
       window.location.hash = `/sandbox/${id}`;
     },
-    onDelete: async (id) => {
+    onDelete: state.readonly ? undefined : async (id) => {
       if (confirm('确定删除此沙盘？')) {
         await apiRequest(`${API_BASE}/sandboxes/${id}`, { method: 'DELETE' });
         await loadSandboxes();
       }
-    }
+    },
+    readonly: state.readonly,
   });
 }
 
@@ -771,11 +1343,20 @@ async function loadSandbox(id) {
   document.getElementById('sandbox-title').textContent = sandbox.name;
   applyWorkTreeViewMode(state.workTreeViewMode || 'full');
   applyWorkItemAssigneeToggle();
-  applySandboxLayoutMode();
+  applyWorkItemElementPreviewMode();
+  applySandboxChatVisibility();
   applySandboxFullscreenState();
+  renderQuickDiaryTargetLabel();
   renderSandboxOverview();
   renderWorkTree();
-  loadSandboxChats(id);
+  applySandboxLayoutHeight();
+  if (state.readonly) {
+    state.chats = [];
+    const messages = document.getElementById('sandbox-chat-messages');
+    if (messages) messages.innerHTML = '';
+  } else {
+    loadSandboxChats(id);
+  }
 }
 
 function renderSandboxOverview() {
@@ -800,6 +1381,7 @@ function renderSandboxOverview() {
 }
 
 async function loadSandboxChats(sandboxId) {
+  if (state.readonly) return;
   const messages = document.getElementById('sandbox-chat-messages');
   if (!messages) return;
   
@@ -886,8 +1468,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,20 +1536,31 @@ function renderDiaries() {
   mountDiaryTimeline('diary-timeline', {
     diaries: filtered,
     getSandboxName,
-    onConfirm: async (id) => {
+    getWorkItemName: getDiaryWorkItemName,
+    onOpenWorkItem: (sandboxId, workItemId) => {
+      openDiaryWorkItemInSandbox(sandboxId, workItemId);
+    },
+    renderContent: (content) => renderMarkdownSnippet(content),
+    onConfirm: state.readonly ? undefined : async (id) => {
       await apiRequest(`${API_BASE}/diaries/${id}/process`, {
         method: 'PUT',
         body: JSON.stringify({ action: 'confirm' }),
       });
       await loadDiaries();
     },
-    onIgnore: async (id) => {
+    onIgnore: state.readonly ? undefined : async (id) => {
       await apiRequest(`${API_BASE}/diaries/${id}/process`, {
         method: 'PUT',
         body: JSON.stringify({ action: 'ignore' }),
       });
       await loadDiaries();
-    }
+    },
+    onEdit: state.readonly ? undefined : async (id) => {
+      const diary = state.diaries.find((row) => row.id === id);
+      if (!diary) return;
+      openDiaryEditDialog(diary);
+    },
+    readonly: state.readonly,
   });
 }
 
@@ -922,10 +1570,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');
@@ -1241,15 +1891,6 @@ function collectSettingHeadersFromUI() {
   return 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 showPage(pageId) {
   document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
   const page = document.getElementById(`page-${pageId}`);
@@ -1277,9 +1918,12 @@ function editWorkItem(id) {
   document.getElementById('item-dialog').showModal();
 }
 
-function initApp() {
-  const hash = window.location.hash;
+async function initApp() {
+  await loadRuntimeMode();
   loadWorkItemAssigneePreference();
+  loadWorkTreeViewModePreference();
+  renderQuickDiaryTargetLabel();
+  applyReadonlyMode();
   
   document.querySelectorAll('.nav-list a').forEach(link => {
     link.addEventListener('click', (e) => {
@@ -1289,6 +1933,7 @@ function initApp() {
   });
   
   document.getElementById('add-sandbox-btn')?.addEventListener('click', () => {
+    if (state.readonly) return;
     document.getElementById('sandbox-dialog').showModal();
   });
   
@@ -1297,6 +1942,7 @@ function initApp() {
   });
   
   const createSandbox = async (e) => {
+    if (state.readonly) return;
     e?.preventDefault?.();
     const name = document.getElementById('new-sandbox-name').value;
     const description = document.getElementById('new-sandbox-desc').value;
@@ -1320,6 +1966,7 @@ function initApp() {
   document.getElementById('confirm-sandbox-btn')?.addEventListener('click', createSandbox);
   
   document.getElementById('add-item-btn')?.addEventListener('click', () => {
+    if (state.readonly) return;
     document.getElementById('item-dialog-title').textContent = '添加任务';
     document.getElementById('item-dialog').dataset.editId = '';
     document.getElementById('new-item-name').value = '';
@@ -1331,9 +1978,11 @@ function initApp() {
     document.getElementById('item-dialog').showModal();
   });
 
-  document.getElementById('toggle-sandbox-present-btn')?.addEventListener('click', () => {
-    state.sandboxPresentationMode = !state.sandboxPresentationMode;
-    applySandboxLayoutMode();
+  document.getElementById('toggle-sandbox-chat-btn')?.addEventListener('click', () => {
+    if (state.readonly) return;
+    state.sandboxChatVisible = !state.sandboxChatVisible;
+    applySandboxChatVisibility();
+    applySandboxLayoutHeight();
   });
 
   document.getElementById('toggle-sandbox-fullscreen-btn')?.addEventListener('click', async () => {
@@ -1354,6 +2003,7 @@ function initApp() {
   });
 
   document.getElementById('toggle-node-entity-form-btn')?.addEventListener('click', () => {
+    if (state.readonly) return;
     setNodeEntityFormExpanded(!state.nodeEntityFormExpanded);
     if (state.nodeEntityFormExpanded) {
       document.getElementById('entity-title-input')?.focus();
@@ -1382,6 +2032,7 @@ function initApp() {
   });
 
   document.getElementById('create-node-entity-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     if (!state.currentSandbox || !state.selectedNodeId) return;
     const btn = document.getElementById('create-node-entity-btn');
     const title = document.getElementById('entity-title-input').value.trim();
@@ -1480,6 +2131,7 @@ function initApp() {
   });
   
   document.getElementById('confirm-item-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     const dialog = document.getElementById('item-dialog');
     const editId = dialog.dataset.editId || null;
     const isNewItem = !editId;
@@ -1526,50 +2178,15 @@ function initApp() {
   });
   
   document.getElementById('rollback-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     if (!state.currentSandbox?.items?.length) return;
     const lastItem = state.currentSandbox.items[state.currentSandbox.items.length - 1];
     await apiRequest(`${API_BASE}/items/${lastItem.id}/rollback`, { method: 'POST' });
     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 () => {
+    if (state.readonly) return;
     const input = document.getElementById('sandbox-chat-input');
     const content = input.value.trim();
     if (!content || !state.currentSandbox) return;
@@ -1687,26 +2304,67 @@ function initApp() {
   sandboxActionHandler = handleAIAction;
   
   document.getElementById('sandbox-chat-input')?.addEventListener('keypress', (e) => {
+    if (state.readonly) return;
     if (e.key === 'Enter') {
       document.getElementById('sandbox-send-btn').click();
     }
   });
   
   document.getElementById('save-diary-btn')?.addEventListener('click', async () => {
-    const sandboxId = document.getElementById('diary-sandbox-select').value || null;
+    if (state.readonly) return;
     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.readonly) return;
+    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 () => {
+    if (state.readonly) return;
+    await submitDiaryEditDialog();
+  });
+  document.getElementById('diary-edit-content')?.addEventListener('keydown', async (event) => {
+    if (state.readonly) return;
+    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 () => {
+    if (state.readonly) return;
     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;
@@ -1736,6 +2394,7 @@ function initApp() {
   });
 
   document.getElementById('add-setting-header-btn')?.addEventListener('click', () => {
+    if (state.readonly) return;
     const list = document.getElementById('setting-headers-list');
     if (!(list instanceof HTMLElement)) return;
     list.appendChild(createSettingHeaderRow('', ''));
@@ -1754,6 +2413,12 @@ function initApp() {
   document.getElementById('work-tree-view-mode')?.addEventListener('change', (e) => {
     const nextMode = e.target.value || 'full';
     applyWorkTreeViewMode(nextMode);
+    persistWorkTreeViewModePreference();
+    renderWorkTree();
+  });
+
+  document.getElementById('work-item-element-preview-mode')?.addEventListener('change', (e) => {
+    state.workItemElementPreviewMode = e.target.value || 'none';
     renderWorkTree();
   });
 
@@ -1773,6 +2438,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';
@@ -1800,16 +2470,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();
@@ -1857,39 +2537,57 @@ function initApp() {
       clearTimeout(resizeRenderTimer);
     }
     resizeRenderTimer = setTimeout(() => {
+      applySandboxLayoutHeight();
       renderWorkTree();
     }, 120);
   });
   
   window.addEventListener('hashchange', handleRoute);
-  handleRoute();
+  await handleRoute();
   
   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 (pathHash === '/sandboxes') {
       showPage('sandboxes');
       await loadSandboxes();
-    } else if (hash.startsWith('/sandbox/')) {
-      const id = hash.split('/')[2];
+    } 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') {
+      if (state.readonly) {
+        if (window.location.hash !== '#/sandboxes') {
+          window.location.hash = '/sandboxes';
+          return;
+        }
+        showPage('sandboxes');
+        await loadSandboxes();
+        return;
+      }
       showPage('settings');
       await loadSettings();
     }