@qnote/q-ai-note 1.0.2 → 1.0.4

package/dist/web/app.js

@@ -10,6 +10,16 @@ const state = {
   chats: [],
   settings: {},
   pendingAction: null,
+  nodeEntities: [],
+  nodeEntityStats: null,
+  selectedNodeId: null,
+  nodeEntityFilter: 'all',
+  editingNodeEntityId: null,
+  nodeEntityFormExpanded: false,
+  sandboxPresentationMode: false,
+  sandboxFullscreenMode: false,
+  workTreeViewMode: 'full',
+  workItemShowAssignee: false,
   workItemSearch: '',
   workItemStatusFilter: 'all',
   diarySearch: '',
@@ -20,7 +30,102 @@ const state = {
 };
 
 const expandedNodes = new Set();
-let selectedNodeId = null;
+let quickChatPopover = null;
+let sandboxActionHandler = null;
+let sandboxEscLocked = false;
+let resizeRenderTimer = null;
+const WORK_ITEM_SHOW_ASSIGNEE_STORAGE_KEY = 'q-ai-note.work-item.show-assignee';
+
+function loadWorkItemAssigneePreference() {
+  try {
+    const raw = window.localStorage.getItem(WORK_ITEM_SHOW_ASSIGNEE_STORAGE_KEY);
+    if (raw === 'true') state.workItemShowAssignee = true;
+    if (raw === 'false') state.workItemShowAssignee = false;
+  } catch {
+    // Ignore storage failures in restricted environments.
+  }
+}
+
+function persistWorkItemAssigneePreference() {
+  try {
+    window.localStorage.setItem(
+      WORK_ITEM_SHOW_ASSIGNEE_STORAGE_KEY,
+      state.workItemShowAssignee ? 'true' : 'false',
+    );
+  } catch {
+    // Ignore storage failures in restricted environments.
+  }
+}
+
+function applySandboxLayoutMode() {
+  const layout = document.getElementById('sandbox-layout');
+  const toggleBtn = document.getElementById('toggle-sandbox-present-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');
+}
+
+function getSandboxLayoutElement() {
+  return document.getElementById('sandbox-layout');
+}
+
+function getSandboxFullscreenElement() {
+  return document.getElementById('page-sandbox-detail');
+}
+
+async function syncSandboxEscLock(enabled) {
+  const keyboardApi = navigator?.keyboard;
+  if (!keyboardApi) return;
+  try {
+    if (enabled && !sandboxEscLocked) {
+      await keyboardApi.lock(['Escape']);
+      sandboxEscLocked = true;
+      return;
+    }
+    if (!enabled && sandboxEscLocked) {
+      keyboardApi.unlock();
+      sandboxEscLocked = false;
+    }
+  } catch {
+    // Ignore platforms without keyboard lock support.
+  }
+}
+
+function applySandboxFullscreenState() {
+  const layout = getSandboxLayoutElement();
+  const fullscreenRoot = getSandboxFullscreenElement();
+  const toggleBtn = document.getElementById('toggle-sandbox-fullscreen-btn');
+  const isFullscreen = Boolean(fullscreenRoot && document.fullscreenElement === fullscreenRoot);
+  state.sandboxFullscreenMode = isFullscreen;
+  if (layout) {
+    layout.classList.toggle('is-fullscreen', isFullscreen);
+  }
+  if (fullscreenRoot) {
+    fullscreenRoot.classList.toggle('is-sandbox-fullscreen', isFullscreen);
+  }
+  if (toggleBtn) {
+    toggleBtn.textContent = isFullscreen ? '退出全屏' : '全屏';
+    toggleBtn.setAttribute('aria-pressed', isFullscreen ? 'true' : 'false');
+  }
+  void syncSandboxEscLock(isFullscreen);
+}
+
+async function toggleSandboxFullscreen() {
+  const fullscreenRoot = getSandboxFullscreenElement();
+  if (!fullscreenRoot) return;
+  try {
+    if (document.fullscreenElement === fullscreenRoot) {
+      await document.exitFullscreen();
+    } else {
+      await fullscreenRoot.requestFullscreen();
+    }
+  } catch (_error) {
+    // Keep UI fallback silent for browsers/environments that block fullscreen.
+    applySandboxFullscreenState();
+  }
+}
 
 function applyWorkItemFilters(items) {
   const query = state.workItemSearch.trim().toLowerCase();
@@ -69,15 +174,46 @@ function expandAllNodes() {
   items.forEach(item => expandedNodes.add(item.id));
 }
 
+function getRootNodeIds(items) {
+  return items.filter((item) => !item.parent_id).map((item) => item.id);
+}
+
+function applyWorkTreeViewMode(mode) {
+  state.workTreeViewMode = mode === 'report' ? 'report' : mode === 'dense' ? 'dense' : 'full';
+  const selector = document.getElementById('work-tree-view-mode');
+  if (selector instanceof HTMLSelectElement) {
+    selector.value = state.workTreeViewMode;
+  }
+  const items = state.currentSandbox?.items || [];
+  expandedNodes.clear();
+  if (state.workTreeViewMode === 'report') {
+    getRootNodeIds(items).forEach((id) => expandedNodes.add(id));
+  } else {
+    expandAllNodes();
+  }
+}
+
+function applyWorkItemAssigneeToggle() {
+  const toggle = document.getElementById('work-item-show-assignee-toggle');
+  if (toggle instanceof HTMLInputElement) {
+    toggle.checked = Boolean(state.workItemShowAssignee);
+  }
+}
+
 function renderWorkTree() {
   const tree = document.getElementById('work-tree');
   if (!tree || !state.currentSandbox) return;
   
   const allItems = state.currentSandbox.items || [];
   const items = applyWorkItemFilters(allItems);
+  const entitySummaryByNodeId = buildNodeEntitySummaryByNodeId();
   
   if (expandedNodes.size === 0 && allItems.length > 0) {
-    expandAllNodes();
+    if (state.workTreeViewMode === 'report') {
+      getRootNodeIds(allItems).forEach((id) => expandedNodes.add(id));
+    } else {
+      expandAllNodes();
+    }
   }
 
   if (allItems.length === 0) {
@@ -88,6 +224,7 @@ function renderWorkTree() {
   mountWorkTree('work-tree', {
     items,
     expandedIds: Array.from(expandedNodes),
+    entitySummaryByNodeId,
     onToggleExpand: (id) => {
       if (expandedNodes.has(id)) {
         expandedNodes.delete(id);
@@ -110,17 +247,48 @@ function renderWorkTree() {
     onEdit: (id) => {
       editWorkItem(id);
     },
+    onSelect: (id) => {
+      showNodeEntityDrawer(id);
+    },
     onDelete: async (id) => {
       if (confirm('确定删除此任务？')) {
         await apiRequest(`${API_BASE}/items/${id}`, { method: 'DELETE' });
         await loadSandbox(state.currentSandbox.id);
       }
-    }
+    },
+    onQuickChat: (id, el) => {
+      openQuickChatPopover(id, el);
+    },
+    renderMode: state.workTreeViewMode === 'dense' ? 'dense' : 'card',
+    showAssignee: state.workItemShowAssignee,
   });
   
   populateParentSelect(allItems);
 }
 
+function buildNodeEntitySummaryByNodeId() {
+  const summaryByNodeId = {};
+  for (const row of state.nodeEntities || []) {
+    const nodeId = String(row.work_item_id || '');
+    if (!nodeId) continue;
+    if (!summaryByNodeId[nodeId]) {
+      summaryByNodeId[nodeId] = { issue: 0, knowledge: 0, capability: 0, issue_open: 0, issue_closed: 0 };
+    }
+    if (row.entity_type === 'issue') {
+      summaryByNodeId[nodeId].issue += 1;
+      const status = String(row.status || '');
+      if (status === 'resolved' || status === 'closed') {
+        summaryByNodeId[nodeId].issue_closed += 1;
+      } else {
+        summaryByNodeId[nodeId].issue_open += 1;
+      }
+    }
+    if (row.entity_type === 'knowledge') summaryByNodeId[nodeId].knowledge += 1;
+    if (row.entity_type === 'capability') summaryByNodeId[nodeId].capability += 1;
+  }
+  return summaryByNodeId;
+}
+
 function populateParentSelect(items) {
   const select = document.getElementById('new-item-parent');
   if (!select) return;
@@ -129,6 +297,422 @@ function populateParentSelect(items) {
     items.map(i => `<option value="${i.id}">${safeText(i.name)}</option>`).join('');
 }
 
+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>`;
+  });
+}
+
+function getNodeById(nodeId) {
+  return state.currentSandbox?.items?.find((item) => item.id === nodeId) || null;
+}
+
+function getNodeEntitiesByNodeId(nodeId) {
+  return (state.nodeEntities || []).filter((row) => row.work_item_id === nodeId);
+}
+
+function closeNodeEntityDrawer() {
+  const drawer = document.getElementById('node-entity-drawer');
+  if (!drawer) return;
+  drawer.classList.add('hidden');
+  state.selectedNodeId = null;
+  state.nodeEntityFilter = 'all';
+  state.editingNodeEntityId = null;
+  state.nodeEntityFormExpanded = false;
+}
+
+function setNodeEntityFormExpanded(expanded) {
+  state.nodeEntityFormExpanded = expanded;
+  const form = document.getElementById('drawer-create-form');
+  const toggleBtn = document.getElementById('toggle-node-entity-form-btn');
+  form?.classList.toggle('hidden', !expanded);
+  if (toggleBtn) {
+    toggleBtn.textContent = expanded ? '收起表单' : '+ 新建记录';
+  }
+}
+
+async function deleteNodeEntityRecord(entityId) {
+  if (!state.currentSandbox) return;
+  await apiRequest(`${API_BASE}/sandboxes/${state.currentSandbox.id}/entities/${entityId}`, {
+    method: 'DELETE',
+  });
+  await loadSandbox(state.currentSandbox.id);
+  if (state.selectedNodeId) {
+    showNodeEntityDrawer(state.selectedNodeId);
+  }
+}
+
+function renderNodeEntitySummary(nodeId) {
+  const container = document.getElementById('node-entity-summary');
+  if (!container) return;
+  const rows = getNodeEntitiesByNodeId(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');
+  const openIssues = issues.filter((row) => row.status === 'open' || row.status === 'in_progress' || row.status === 'blocked').length;
+  container.innerHTML = `
+    <div class="summary-card"><div class="label">Issue</div><div class="value">${issues.length}</div></div>
+    <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>
+  `;
+}
+
+function renderNodeEntityList(nodeId) {
+  const container = document.getElementById('node-entity-list');
+  if (!container) return;
+  const allRows = getNodeEntitiesByNodeId(nodeId);
+  const rows = state.nodeEntityFilter === 'all'
+    ? allRows
+    : allRows.filter((row) => row.entity_type === state.nodeEntityFilter);
+  if (!rows.length) {
+    container.innerHTML = '<div class="empty-state"><p>当前节点还没有 issue/knowledge/capability</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>
+        </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-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('');
+
+  container.querySelectorAll('[data-entity-delete-id]').forEach((el) => {
+    el.addEventListener('click', async (e) => {
+      e.preventDefault();
+      const id = el.getAttribute('data-entity-delete-id');
+      if (!id) return;
+      if (!confirm('确定删除这条记录？')) return;
+      await deleteNodeEntityRecord(id);
+    });
+  });
+
+  container.querySelectorAll('[data-entity-edit-id]').forEach((el) => {
+    el.addEventListener('click', (e) => {
+      e.preventDefault();
+      const id = el.getAttribute('data-entity-edit-id');
+      if (!id) return;
+      const row = allRows.find((item) => item.id === id);
+      if (!row) return;
+      startEditNodeEntity(row);
+    });
+  });
+}
+
+function resetNodeEntityForm() {
+  state.editingNodeEntityId = null;
+  const typeInput = document.getElementById('entity-type-select');
+  const titleInput = document.getElementById('entity-title-input');
+  const contentInput = document.getElementById('entity-content-input');
+  const assigneeInput = document.getElementById('entity-assignee-input');
+  const statusInput = document.getElementById('entity-status-select');
+  const priorityInput = document.getElementById('entity-priority-select');
+  const capabilityTypeInput = document.getElementById('entity-capability-type-input');
+  if (typeInput) typeInput.value = 'issue';
+  if (titleInput) titleInput.value = '';
+  if (contentInput) contentInput.value = '';
+  if (assigneeInput) assigneeInput.value = '';
+  if (statusInput) statusInput.value = '';
+  if (priorityInput) priorityInput.value = '';
+  if (capabilityTypeInput) capabilityTypeInput.value = '';
+
+  applyEntityFormMode();
+  const submitBtn = document.getElementById('create-node-entity-btn');
+  if (submitBtn) submitBtn.textContent = '添加记录';
+  const cancelBtn = document.getElementById('cancel-edit-entity-btn');
+  cancelBtn?.classList.add('hidden');
+  setNodeEntityFormExpanded(false);
+}
+
+function startEditNodeEntity(row) {
+  state.editingNodeEntityId = row.id;
+  setNodeEntityFormExpanded(true);
+  const typeInput = document.getElementById('entity-type-select');
+  const titleInput = document.getElementById('entity-title-input');
+  const contentInput = document.getElementById('entity-content-input');
+  const assigneeInput = document.getElementById('entity-assignee-input');
+  const statusInput = document.getElementById('entity-status-select');
+  const priorityInput = document.getElementById('entity-priority-select');
+  const capabilityTypeInput = document.getElementById('entity-capability-type-input');
+  if (typeInput) typeInput.value = row.entity_type || 'issue';
+  applyEntityFormMode();
+  if (titleInput) titleInput.value = row.title || '';
+  if (contentInput) contentInput.value = row.content_md || '';
+  if (assigneeInput) assigneeInput.value = row.assignee || '';
+  if (statusInput) statusInput.value = row.status || '';
+  if (priorityInput) priorityInput.value = row.priority || '';
+  if (capabilityTypeInput) capabilityTypeInput.value = row.capability_type || '';
+
+  const submitBtn = document.getElementById('create-node-entity-btn');
+  if (submitBtn) submitBtn.textContent = '保存修改';
+  const cancelBtn = document.getElementById('cancel-edit-entity-btn');
+  cancelBtn?.classList.remove('hidden');
+  titleInput?.focus();
+}
+
+function showNodeEntityDrawer(nodeId) {
+  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';
+  title.textContent = node.name || nodeId;
+  renderNodeEntitySummary(nodeId);
+  renderNodeEntityFilterTabs();
+  renderNodeEntityList(nodeId);
+  resetNodeEntityForm();
+  drawer.classList.remove('hidden');
+  setTimeout(() => drawer.focus(), 0);
+}
+
+function renderNodeEntityFilterTabs() {
+  const tabs = document.getElementById('entity-filter-tabs');
+  if (!tabs) return;
+  tabs.querySelectorAll('[data-entity-filter]').forEach((el) => {
+    const filter = el.getAttribute('data-entity-filter');
+    el.classList.toggle('active', filter === state.nodeEntityFilter);
+  });
+}
+
+function getStatusOptionsByEntityType(entityType) {
+  if (entityType === 'issue') {
+    return [
+      { value: '', label: '状态（Issue，默认 open）' },
+      { value: 'open', label: 'open' },
+      { value: 'in_progress', label: 'in_progress' },
+      { value: 'blocked', label: 'blocked' },
+      { value: 'resolved', label: 'resolved' },
+      { value: 'closed', label: 'closed' },
+    ];
+  }
+  if (entityType === 'capability') {
+    return [
+      { value: '', label: '状态（Capability，默认 building）' },
+      { value: 'building', label: 'building' },
+      { value: 'ready', label: 'ready' },
+    ];
+  }
+  return [{ value: '', label: '无状态（Knowledge）' }];
+}
+
+function applyEntityFormMode() {
+  const type = document.getElementById('entity-type-select')?.value || 'issue';
+  const assigneeGroup = document.getElementById('entity-assignee-group');
+  const statusGroup = document.getElementById('entity-status-group');
+  const priorityGroup = document.getElementById('entity-priority-group');
+  const capabilityTypeGroup = document.getElementById('entity-capability-type-group');
+  const hint = document.getElementById('entity-form-hint');
+  const statusSelect = document.getElementById('entity-status-select');
+
+  if (statusSelect) {
+    statusSelect.innerHTML = getStatusOptionsByEntityType(type)
+      .map((option) => `<option value="${safeText(option.value)}">${safeText(option.label)}</option>`)
+      .join('');
+  }
+
+  assigneeGroup?.classList.toggle('hidden', type !== 'issue');
+  priorityGroup?.classList.toggle('hidden', type !== 'issue');
+  capabilityTypeGroup?.classList.toggle('hidden', type !== 'capability');
+  statusGroup?.classList.toggle('hidden', false);
+
+  if (hint) {
+    hint.textContent = type === 'issue'
+      ? 'Issue 推荐填写状态/优先级/负责人。'
+      : type === 'knowledge'
+        ? 'Knowledge 可仅保存链接或少量 Markdown。'
+        : 'Capability 建议填写能力类型与简述。';
+  }
+}
+
+function closeQuickChatPopover() {
+  if (!quickChatPopover) return;
+  quickChatPopover.remove();
+  quickChatPopover = null;
+}
+
+function getNodePath(nodeId) {
+  const items = state.currentSandbox?.items || [];
+  const byId = new Map(items.map((item) => [item.id, item]));
+  const path = [];
+  let cursor = byId.get(nodeId);
+  while (cursor) {
+    path.unshift(cursor.name || cursor.id);
+    cursor = cursor.parent_id ? byId.get(cursor.parent_id) : null;
+  }
+  return path;
+}
+
+function composeQuickChatContent(nodeId, userQuestion) {
+  const node = getNodeById(nodeId);
+  if (!node || !state.currentSandbox) {
+    return userQuestion;
+  }
+  const rows = getNodeEntitiesByNodeId(nodeId);
+  const issueCount = rows.filter((row) => row.entity_type === 'issue').length;
+  const knowledgeCount = rows.filter((row) => row.entity_type === 'knowledge').length;
+  const capabilityCount = rows.filter((row) => row.entity_type === 'capability').length;
+  const path = getNodePath(nodeId).join(' > ');
+  return [
+    '[NODE_CONTEXT]',
+    `sandbox_id=${state.currentSandbox.id}`,
+    `node_type=work_item`,
+    `node_id=${node.id}`,
+    `node_name=${node.name || ''}`,
+    `node_path=${path}`,
+    `entity_counts=issue:${issueCount},knowledge:${knowledgeCount},capability:${capabilityCount}`,
+    '[/NODE_CONTEXT]',
+    '',
+    '用户问题：',
+    userQuestion,
+  ].join('\n');
+}
+
+async function sendSandboxChatMessage(content, options = {}) {
+  if (!content || !state.currentSandbox) return;
+  const messages = document.getElementById('sandbox-chat-messages');
+  const btn = document.getElementById('sandbox-send-btn');
+  if (!messages || !btn) return;
+
+  const displayContent = options.displayContent || content;
+  const payloadContent = options.payloadContent || content;
+  messages.insertAdjacentHTML('beforeend', `<div class="chat-message user">${escapeHtml(displayContent)}</div>`);
+  const loadingMessage = appendLoadingMessage(messages);
+  messages.scrollTop = messages.scrollHeight;
+
+  const originalText = btn.textContent;
+  setButtonState(btn, { disabled: true, text: '思考中' });
+
+  try {
+    const history = state.chats
+      .filter(c => c.role)
+      .slice(-10)
+      .map(c => ({ role: c.role, content: typeof c.content === 'string' ? c.content : JSON.stringify(c.content) }));
+    
+    const result = await apiRequest(`${API_BASE}/chats/react`, {
+      method: 'POST',
+      body: JSON.stringify({ 
+        content: payloadContent, 
+        sandbox_id: state.currentSandbox.id,
+        history,
+        pending_action: state.pendingAction
+      }),
+    });
+    
+    loadingMessage?.remove();
+    if (typeof sandboxActionHandler === 'function') {
+      await sandboxActionHandler(result.action, state.currentSandbox.id);
+    }
+    await loadSandbox(state.currentSandbox.id);
+  } 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, text: originalText || '发送' });
+  }
+}
+
+function openQuickChatPopover(nodeId, anchorEl) {
+  if (!state.currentSandbox) return;
+  closeQuickChatPopover();
+  const container = document.querySelector('.sandbox-tree-section');
+  if (!container || !(anchorEl instanceof HTMLElement)) return;
+  const node = getNodeById(nodeId);
+  if (!node) return;
+
+  const popover = document.createElement('div');
+  popover.className = 'quick-chat-popover';
+  popover.innerHTML = `
+    <div class="quick-chat-header">
+      <span>快捷提问 · ${safeText(node.name || node.id)}</span>
+      <button class="btn btn-secondary btn-sm" data-quick-chat-cancel>关闭</button>
+    </div>
+    <textarea placeholder="输入多行问题，确认后会自动提交到右侧聊天区（Ctrl/Cmd+Enter 提交）"></textarea>
+    <div class="quick-chat-meta"><span data-quick-chat-count>0</span>/1000</div>
+    <div class="quick-chat-actions">
+      <button class="btn btn-secondary btn-sm" data-quick-chat-cancel>取消</button>
+      <button class="btn btn-primary btn-sm" data-quick-chat-submit disabled>确认提交</button>
+    </div>
+  `;
+  container.appendChild(popover);
+  quickChatPopover = popover;
+
+  const containerRect = container.getBoundingClientRect();
+  const anchorRect = anchorEl.getBoundingClientRect();
+  const popoverRect = popover.getBoundingClientRect();
+  const horizontalPadding = 8;
+  const verticalPadding = 8;
+  const preferredLeft = anchorRect.right - containerRect.left - popoverRect.width + 20;
+  const preferredTop = anchorRect.bottom - containerRect.top + 6;
+  const maxLeft = Math.max(horizontalPadding, containerRect.width - popoverRect.width - horizontalPadding);
+  const maxTop = Math.max(58, containerRect.height - popoverRect.height - verticalPadding);
+  const left = Math.min(maxLeft, Math.max(horizontalPadding, preferredLeft));
+  const top = Math.min(maxTop, Math.max(58, preferredTop));
+  popover.style.left = `${left}px`;
+  popover.style.top = `${top}px`;
+
+  const textarea = popover.querySelector('textarea');
+  const submitBtn = popover.querySelector('[data-quick-chat-submit]');
+  const countEl = popover.querySelector('[data-quick-chat-count]');
+  const cancelBtns = popover.querySelectorAll('[data-quick-chat-cancel]');
+
+  const updateSubmitState = () => {
+    const value = String(textarea?.value || '');
+    const length = value.length;
+    if (countEl) {
+      countEl.textContent = String(length);
+    }
+    const disabled = length === 0 || length > 1000;
+    if (submitBtn) {
+      submitBtn.classList.toggle('disabled', disabled);
+      submitBtn.disabled = disabled;
+    }
+  };
+
+  cancelBtns.forEach((btn) => {
+    btn.addEventListener('click', () => closeQuickChatPopover());
+  });
+  submitBtn?.addEventListener('click', async () => {
+    const question = String(textarea?.value || '').trim();
+    if (!question) return;
+    closeQuickChatPopover();
+    const payloadContent = composeQuickChatContent(nodeId, question);
+    const displayContent = `【快捷】${question}`;
+    await sendSandboxChatMessage(question, { payloadContent, displayContent });
+  });
+  textarea?.addEventListener('input', updateSubmitState);
+  textarea?.addEventListener('keydown', async (event) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      closeQuickChatPopover();
+      return;
+    }
+    const isSubmit = event.key === 'Enter' && (event.ctrlKey || event.metaKey);
+    if (!isSubmit) return;
+    event.preventDefault();
+    if (submitBtn instanceof HTMLButtonElement && !submitBtn.disabled) {
+      submitBtn.click();
+    }
+  });
+  textarea?.focus();
+  updateSubmitState();
+}
+
 async function loadSandboxes() {
   state.sandboxes = await apiRequest(`${API_BASE}/sandboxes`);
   renderSandboxes();
@@ -172,14 +756,23 @@ function renderSandboxes() {
 }
 
 async function loadSandbox(id) {
-  const [sandbox, items, diaries] = await Promise.all([
+  closeQuickChatPopover();
+  const [sandbox, items, diaries, entities, entityStats] = await Promise.all([
     apiRequest(`${API_BASE}/sandboxes/${id}`),
     apiRequest(`${API_BASE}/sandboxes/${id}/items`),
-    apiRequest(`${API_BASE}/diaries?sandbox_id=${id}`)
+    apiRequest(`${API_BASE}/diaries?sandbox_id=${id}`),
+    apiRequest(`${API_BASE}/sandboxes/${id}/entities`),
+    apiRequest(`${API_BASE}/sandboxes/${id}/entities/stats`),
   ]);
   state.currentSandbox = { ...sandbox, items, diaries };
+  state.nodeEntities = entities;
+  state.nodeEntityStats = entityStats;
   
   document.getElementById('sandbox-title').textContent = sandbox.name;
+  applyWorkTreeViewMode(state.workTreeViewMode || 'full');
+  applyWorkItemAssigneeToggle();
+  applySandboxLayoutMode();
+  applySandboxFullscreenState();
   renderSandboxOverview();
   renderWorkTree();
   loadSandboxChats(id);
@@ -195,11 +788,14 @@ function renderSandboxOverview() {
     inProgress: items.filter((i) => i.status === 'in_progress').length,
     done: items.filter((i) => i.status === 'done').length,
   };
+  const entityStats = state.nodeEntityStats || { issue: {}, knowledge: {}, capability: {} };
   container.innerHTML = `
     <div class="summary-card"><div class="label">任务总数</div><div class="value">${items.length}</div></div>
     <div class="summary-card"><div class="label">待处理/进行中</div><div class="value">${byStatus.pending}/${byStatus.inProgress}</div></div>
     <div class="summary-card"><div class="label">已完成</div><div class="value">${byStatus.done}</div></div>
     <div class="summary-card"><div class="label">关联日记</div><div class="value">${diaries.length}</div></div>
+    <div class="summary-card"><div class="label">Issue（Open）</div><div class="value">${entityStats.issue?.total || 0}（${(entityStats.issue?.open || 0) + (entityStats.issue?.in_progress || 0) + (entityStats.issue?.blocked || 0)}）</div></div>
+    <div class="summary-card"><div class="label">Knowledge / Capability</div><div class="value">${entityStats.knowledge?.total || 0} / ${entityStats.capability?.total || 0}</div></div>
   `;
 }
 
@@ -252,6 +848,10 @@ function renderAIActionMessage(action) {
     const status = getExecutionStatus(action);
     const statusIcon = status === 'success' ? '✅' : status === 'partial' ? '⚠️' : '❌';
     const statusClass = status === 'success' ? 'is-success' : status === 'partial' ? 'is-partial' : 'is-failed';
+    const details = Array.isArray(action?.execution_result?.details) ? action.execution_result.details : [];
+    const detailsHtml = details.length
+      ? `<div class="result-detail-list">${details.map((line) => `<div class="result-detail-item">${escapeHtml(String(line))}</div>`).join('')}</div>`
+      : '';
     const undoBtn = action.operationId 
       ? `<button class="btn btn-sm btn-undo" data-operation-id="${action.operationId}" onclick="undoOperation('${action.operationId}', this)">撤销</button>`
       : '';
@@ -261,6 +861,7 @@ function renderAIActionMessage(action) {
         <span class="result-text">${escapeHtml(action.observation || '操作完成')}</span>
         ${undoBtn}
       </div>
+      ${detailsHtml}
     </div>`;
   }
   
@@ -397,6 +998,10 @@ function isKeyOperation(op, before, after) {
 function formatDiffLabel(key) {
   const labels = {
     name: '名称',
+    title: '标题',
+    entity_type: '类型',
+    work_item_id: '节点ID',
+    content_md: '内容',
     status: '状态',
     priority: '优先级',
     assignee: '负责人',
@@ -406,8 +1011,29 @@ function formatDiffLabel(key) {
   return labels[key] || key;
 }
 
-function buildUpdateDiffLines(before, after) {
-  const trackedFields = ['name', 'status', 'priority', 'assignee', 'parent_id', 'description'];
+function getOperationTarget(before, after) {
+  const recordType = String(after?.record_type || before?.record_type || 'work_item');
+  if (recordType === 'node_entity') {
+    const entityType = String(after?.entity_type || before?.entity_type || 'entity');
+    return {
+      recordType,
+      typeLabel: entityType.toUpperCase(),
+      name: String(after?.title || before?.title || '-'),
+      scopeLabel: `节点 ${String(after?.work_item_id || before?.work_item_id || '-')}`,
+    };
+  }
+  return {
+    recordType: 'work_item',
+    typeLabel: 'WORK_ITEM',
+    name: String(after?.name || before?.name || '-'),
+    scopeLabel: `父节点 ${String(after?.parent_id || before?.parent_id || 'root')}`,
+  };
+}
+
+function buildUpdateDiffLines(before, after, recordType = 'work_item') {
+  const trackedFields = recordType === 'node_entity'
+    ? ['title', 'status', 'priority', 'assignee', 'content_md', 'work_item_id']
+    : ['name', 'status', 'priority', 'assignee', 'parent_id', 'description'];
   return trackedFields
     .filter((key) => (before?.[key] ?? '') !== (after?.[key] ?? ''))
     .map((key) => {
@@ -466,8 +1092,8 @@ function generateWeeklySummaryMarkdown(mode = 'management') {
       const sandboxName = state.sandboxes.find((s) => s.id === op.sandbox_id)?.name || op.sandbox_id;
       const before = parseOpJson(op.data_before);
       const after = parseOpJson(op.data_after);
-      const taskName = after?.name || before?.name || '-';
-      lines.push(`- ${new Date(op.created_at).toLocaleString()} [${sandboxName}] ${op.operation_type} ${taskName}`);
+      const target = getOperationTarget(before, after);
+      lines.push(`- ${new Date(op.created_at).toLocaleString()} [${sandboxName}] ${op.operation_type} ${target.typeLabel} ${target.name}`);
     }
   } else {
     lines.push('');
@@ -480,9 +1106,9 @@ function generateWeeklySummaryMarkdown(mode = 'management') {
       const sandboxName = state.sandboxes.find((s) => s.id === op.sandbox_id)?.name || op.sandbox_id;
       const before = parseOpJson(op.data_before);
       const after = parseOpJson(op.data_after);
-      const taskName = after?.name || before?.name || '-';
-      const diffLines = op.operation_type === 'update' ? buildUpdateDiffLines(before, after) : [];
-      lines.push(`- ${new Date(op.created_at).toLocaleString()} [${sandboxName}] ${op.operation_type} ${taskName}`);
+      const target = getOperationTarget(before, after);
+      const diffLines = op.operation_type === 'update' ? buildUpdateDiffLines(before, after, target.recordType) : [];
+      lines.push(`- ${new Date(op.created_at).toLocaleString()} [${sandboxName}] ${op.operation_type} ${target.typeLabel} ${target.name}`);
       if (diffLines.length > 0) {
         for (const line of diffLines.slice(0, 3)) {
           lines.push(`  - ${line}`);
@@ -514,26 +1140,28 @@ function renderChanges() {
     const items = ops.map((op) => {
       const before = parseOpJson(op.data_before);
       const after = parseOpJson(op.data_after);
+      const target = getOperationTarget(before, after);
       const sandboxName = state.sandboxes.find((s) => s.id === op.sandbox_id)?.name || op.sandbox_id;
       let detail = '';
       let diffLinesHtml = '';
 
       if (op.operation_type === 'create') {
-        detail = `创建任务：${safeText(after?.name || '-')}`;
+        detail = `创建${safeText(target.typeLabel)}：${safeText(target.name)}`;
       } else if (op.operation_type === 'update') {
-        detail = `更新任务：${safeText(after?.name || before?.name || '-')}`;
-        const diffLines = buildUpdateDiffLines(before, after);
+        detail = `更新${safeText(target.typeLabel)}：${safeText(target.name)}`;
+        const diffLines = buildUpdateDiffLines(before, after, target.recordType);
         if (diffLines.length > 0) {
           diffLinesHtml = `<div class="change-diff-list">${diffLines.map((line) => `<div class="change-diff-line">${line}</div>`).join('')}</div>`;
         }
       } else if (op.operation_type === 'delete') {
-        detail = `删除任务：${safeText(before?.name || '-')}`;
+        detail = `删除${safeText(target.typeLabel)}：${safeText(target.name)}`;
       }
       return `
         <div class="change-item">
           <div class="change-meta">
             <span class="change-type ${safeText(op.operation_type)}">${safeText(op.operation_type)}</span>
             <span>${safeText(sandboxName)}</span>
+            <span class="change-target">${safeText(target.scopeLabel)}</span>
             <span>${new Date(op.created_at).toLocaleTimeString()}</span>
           </div>
           <div class="change-detail">${detail}</div>
@@ -568,6 +1196,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 || {});
+}
+
+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;
 }
 
 async function loadChats() {
@@ -608,6 +1279,7 @@ function editWorkItem(id) {
 
 function initApp() {
   const hash = window.location.hash;
+  loadWorkItemAssigneePreference();
   
   document.querySelectorAll('.nav-list a').forEach(link => {
     link.addEventListener('click', (e) => {
@@ -658,10 +1330,154 @@ function initApp() {
     document.getElementById('new-item-parent').value = '';
     document.getElementById('item-dialog').showModal();
   });
+
+  document.getElementById('toggle-sandbox-present-btn')?.addEventListener('click', () => {
+    state.sandboxPresentationMode = !state.sandboxPresentationMode;
+    applySandboxLayoutMode();
+  });
+
+  document.getElementById('toggle-sandbox-fullscreen-btn')?.addEventListener('click', async () => {
+    await toggleSandboxFullscreen();
+    applySandboxFullscreenState();
+  });
+
+  document.addEventListener('fullscreenchange', () => {
+    applySandboxFullscreenState();
+  });
   
   document.getElementById('cancel-item-btn')?.addEventListener('click', () => {
     document.getElementById('item-dialog').close();
   });
+
+  document.getElementById('close-node-drawer-btn')?.addEventListener('click', () => {
+    closeNodeEntityDrawer();
+  });
+
+  document.getElementById('toggle-node-entity-form-btn')?.addEventListener('click', () => {
+    setNodeEntityFormExpanded(!state.nodeEntityFormExpanded);
+    if (state.nodeEntityFormExpanded) {
+      document.getElementById('entity-title-input')?.focus();
+    }
+  });
+
+  document.getElementById('entity-type-select')?.addEventListener('change', () => {
+    applyEntityFormMode();
+  });
+
+  document.getElementById('entity-filter-tabs')?.addEventListener('click', (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) return;
+    const btn = target.closest('[data-entity-filter]');
+    if (!(btn instanceof HTMLElement)) return;
+    const filter = btn.getAttribute('data-entity-filter') || 'all';
+    state.nodeEntityFilter = filter;
+    renderNodeEntityFilterTabs();
+    if (state.selectedNodeId) {
+      renderNodeEntityList(state.selectedNodeId);
+    }
+  });
+
+  document.getElementById('cancel-edit-entity-btn')?.addEventListener('click', () => {
+    resetNodeEntityForm();
+  });
+
+  document.getElementById('create-node-entity-btn')?.addEventListener('click', async () => {
+    if (!state.currentSandbox || !state.selectedNodeId) return;
+    const btn = document.getElementById('create-node-entity-btn');
+    const title = document.getElementById('entity-title-input').value.trim();
+    const entity_type = document.getElementById('entity-type-select').value;
+    if (!title) return;
+    const rawStatus = document.getElementById('entity-status-select').value || '';
+    const status = rawStatus || (entity_type === 'issue' ? 'open' : entity_type === 'capability' ? 'building' : '');
+    const payload = {
+      work_item_id: state.selectedNodeId,
+      entity_type,
+      title,
+      content_md: document.getElementById('entity-content-input').value || '',
+      assignee: document.getElementById('entity-assignee-input').value || '',
+      status,
+      priority: document.getElementById('entity-priority-select').value || '',
+      capability_type: document.getElementById('entity-capability-type-input').value || '',
+    };
+
+    const isEditing = Boolean(state.editingNodeEntityId);
+    setButtonState(btn, { disabled: true, text: isEditing ? '保存中...' : '添加中...' });
+    try {
+      if (isEditing) {
+        await apiRequest(`${API_BASE}/sandboxes/${state.currentSandbox.id}/entities/${state.editingNodeEntityId}`, {
+          method: 'PUT',
+          body: JSON.stringify(payload),
+        });
+      } else {
+        await apiRequest(`${API_BASE}/sandboxes/${state.currentSandbox.id}/entities`, {
+          method: 'POST',
+          body: JSON.stringify(payload),
+        });
+      }
+      await loadSandbox(state.currentSandbox.id);
+      showNodeEntityDrawer(state.selectedNodeId);
+      resetNodeEntityForm();
+    } finally {
+      const defaultText = state.editingNodeEntityId ? '保存修改' : '添加记录';
+      setButtonState(btn, { disabled: false, text: defaultText });
+    }
+  });
+
+  const entitySubmitByShortcut = async (event) => {
+    const isSubmit = event.key === 'Enter' && (event.ctrlKey || event.metaKey);
+    if (!isSubmit) return;
+    event.preventDefault();
+    const drawer = document.getElementById('node-entity-drawer');
+    const form = document.getElementById('drawer-create-form');
+    const submitBtn = document.getElementById('create-node-entity-btn');
+    if (drawer?.classList.contains('hidden')) return;
+    if (form?.classList.contains('hidden')) return;
+    if (!(submitBtn instanceof HTMLButtonElement) || submitBtn.disabled) return;
+    submitBtn.click();
+  };
+  document.getElementById('entity-title-input')?.addEventListener('keydown', entitySubmitByShortcut);
+  document.getElementById('entity-content-input')?.addEventListener('keydown', entitySubmitByShortcut);
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape') return;
+    if (quickChatPopover) {
+      event.preventDefault();
+      event.stopPropagation();
+      closeQuickChatPopover();
+      return;
+    }
+    const drawer = document.getElementById('node-entity-drawer');
+    if (drawer && !drawer.classList.contains('hidden')) {
+      event.preventDefault();
+      event.stopPropagation();
+      closeNodeEntityDrawer();
+      return;
+    }
+    if (state.sandboxFullscreenMode) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  });
+
+  document.addEventListener('click', (event) => {
+    const drawer = document.getElementById('node-entity-drawer');
+    const workTree = document.getElementById('work-tree');
+    if (!drawer || drawer.classList.contains('hidden')) return;
+    const target = event.target;
+    if (!(target instanceof Node)) return;
+    if (drawer.contains(target)) return;
+    if (workTree?.contains(target)) return;
+    closeNodeEntityDrawer();
+  });
+
+  document.addEventListener('click', (event) => {
+    if (!quickChatPopover) return;
+    const target = event.target;
+    if (!(target instanceof Node)) return;
+    if (quickChatPopover.contains(target)) return;
+    if (target instanceof HTMLElement && target.closest('[data-action="quick-chat"]')) return;
+    closeQuickChatPopover();
+  });
   
   document.getElementById('confirm-item-btn')?.addEventListener('click', async () => {
     const dialog = document.getElementById('item-dialog');
@@ -757,48 +1573,8 @@ function initApp() {
     const input = document.getElementById('sandbox-chat-input');
     const content = input.value.trim();
     if (!content || !state.currentSandbox) return;
-    
-    const btn = document.getElementById('sandbox-send-btn');
-    const messages = document.getElementById('sandbox-chat-messages');
-    
-    messages.insertAdjacentHTML('beforeend', `<div class="chat-message user">${escapeHtml(content)}</div>`);
-    const loadingMessage = appendLoadingMessage(messages);
-    messages.scrollTop = messages.scrollHeight;
     input.value = '';
-    
-    const originalText = btn.textContent;
-    setButtonState(btn, { disabled: true, text: '思考中' });
-    
-    try {
-      const history = state.chats
-        .filter(c => c.role)
-        .slice(-10)
-        .map(c => ({ role: c.role, content: typeof c.content === 'string' ? c.content : JSON.stringify(c.content) }));
-      
-      const result = await apiRequest(`${API_BASE}/chats/react`, {
-        method: 'POST',
-        body: JSON.stringify({ 
-          content, 
-          sandbox_id: state.currentSandbox.id,
-          history,
-          pending_action: state.pendingAction
-        }),
-      });
-      
-      console.log('Chat result:', result);
-      
-      loadingMessage?.remove();
-      
-      await handleAIAction(result.action, state.currentSandbox.id);
-      await loadSandbox(state.currentSandbox.id);
-    } catch (error) {
-      console.error('发送消息失败:', 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, text: originalText || '发送' });
-    }
+    await sendSandboxChatMessage(content);
   });
 
   async function handleAIAction(action, sandboxId) {
@@ -907,6 +1683,8 @@ function initApp() {
       state.pendingAction = null;
     }
   }
+
+  sandboxActionHandler = handleAIAction;
   
   document.getElementById('sandbox-chat-input')?.addEventListener('keypress', (e) => {
     if (e.key === 'Enter') {
@@ -932,6 +1710,7 @@ function initApp() {
     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',
@@ -947,11 +1726,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();
@@ -962,6 +1751,18 @@ function initApp() {
     renderWorkTree();
   });
 
+  document.getElementById('work-tree-view-mode')?.addEventListener('change', (e) => {
+    const nextMode = e.target.value || 'full';
+    applyWorkTreeViewMode(nextMode);
+    renderWorkTree();
+  });
+
+  document.getElementById('work-item-show-assignee-toggle')?.addEventListener('change', (e) => {
+    state.workItemShowAssignee = Boolean(e.target.checked);
+    persistWorkItemAssigneePreference();
+    renderWorkTree();
+  });
+
   document.getElementById('diary-search')?.addEventListener('input', (e) => {
     state.diarySearch = e.target.value || '';
     renderDiaries();
@@ -1049,12 +1850,26 @@ function initApp() {
     await navigator.clipboard.writeText(content);
     alert('周报摘要已复制');
   });
+
+  window.addEventListener('resize', () => {
+    if (!state.currentSandbox) return;
+    if (resizeRenderTimer) {
+      clearTimeout(resizeRenderTimer);
+    }
+    resizeRenderTimer = setTimeout(() => {
+      renderWorkTree();
+    }, 120);
+  });
   
   window.addEventListener('hashchange', handleRoute);
   handleRoute();
   
   async function handleRoute() {
     const hash = window.location.hash.slice(1) || '/';
+    const fullscreenRoot = getSandboxFullscreenElement();
+    if (!hash.startsWith('/sandbox/') && fullscreenRoot && document.fullscreenElement === fullscreenRoot) {
+      await document.exitFullscreen();
+    }
     
     if (hash === '/') {
       showPage('home');