@qnote/q-ai-note 1.0.3 → 1.0.5

package/dist/web/vueRenderers.js

@@ -52,7 +52,16 @@ export function mountHtmlList(targetId, htmlItems) {
 export function mountDiaryTimeline(targetId, options) {
   const container = byId(targetId);
   if (!container) return;
-  const { diaries = [], getSandboxName, onConfirm, onIgnore } = options || {};
+  const {
+    diaries = [],
+    getSandboxName,
+    getWorkItemName,
+    onConfirm,
+    onIgnore,
+    onEdit,
+    onOpenWorkItem,
+    renderContent,
+  } = options || {};
 
   if (!diaries.length) {
     container.innerHTML = '<div class="empty-state"><p>暂无日记</p></div>';
@@ -61,17 +70,29 @@ export function mountDiaryTimeline(targetId, options) {
 
   container.innerHTML = diaries.map((diary) => `
     <div class="diary-item ${diary.processed ? 'processed' : ''}">
-      <div class="diary-meta">
-        ${esc(new Date(diary.created_at).toLocaleString())}
-        ${diary.sandbox_id ? ` · ${esc(getSandboxName?.(diary.sandbox_id) || diary.sandbox_id)}` : ''}
-      </div>
-      <div class="diary-content">${esc(diary.content)}</div>
-      ${diary.processed ? '' : `
+      <div class="diary-head-row">
+        <div class="diary-meta">
+          ${esc(new Date(diary.created_at).toLocaleString())}
+          ${diary.sandbox_id ? ` · ${esc(getSandboxName?.(diary.sandbox_id) || diary.sandbox_id)}` : ''}
+          ${diary.work_item_id ? `
+            · 节点:
+            <button
+              class="diary-open-node-link"
+              type="button"
+              data-open-work-item="${esc(diary.work_item_id)}"
+              data-open-sandbox="${esc(diary.sandbox_id || '')}"
+            >${esc(getWorkItemName?.(diary.sandbox_id, diary.work_item_id) || diary.work_item_id)}</button>
+          ` : ''}
+        </div>
         <div class="diary-actions">
-          <button class="confirm" data-confirm-id="${esc(diary.id)}">采纳</button>
-          <button class="ignore" data-ignore-id="${esc(diary.id)}">忽略</button>
+          <button class="edit" data-edit-id="${esc(diary.id)}">编辑</button>
+          ${diary.processed ? '' : `
+            <button class="confirm" data-confirm-id="${esc(diary.id)}">采纳</button>
+            <button class="ignore" data-ignore-id="${esc(diary.id)}">忽略</button>
+          `}
         </div>
-      `}
+      </div>
+      <div class="diary-content">${typeof renderContent === 'function' ? renderContent(diary.content) : esc(diary.content)}</div>
     </div>
   `).join('');
 
@@ -81,15 +102,28 @@ export function mountDiaryTimeline(targetId, options) {
   container.querySelectorAll('[data-ignore-id]').forEach((el) => {
     el.addEventListener('click', () => onIgnore?.(el.getAttribute('data-ignore-id')));
   });
+  container.querySelectorAll('[data-edit-id]').forEach((el) => {
+    el.addEventListener('click', () => onEdit?.(el.getAttribute('data-edit-id')));
+  });
+  container.querySelectorAll('[data-open-work-item]').forEach((el) => {
+    el.addEventListener('click', () => {
+      const workItemId = el.getAttribute('data-open-work-item');
+      const sandboxId = el.getAttribute('data-open-sandbox');
+      if (!workItemId || !sandboxId) return;
+      onOpenWorkItem?.(sandboxId, workItemId);
+    });
+  });
 }
 
 function renderEntityBadges(summary) {
   const issue = Number(summary?.issue || 0);
   const knowledge = Number(summary?.knowledge || 0);
   const capability = Number(summary?.capability || 0);
+  if (issue + knowledge + capability === 0) {
+    return '';
+  }
   const issueOpen = Number(summary?.issue_open || 0);
   const issueClosed = Number(summary?.issue_closed || 0);
-  const isBlindSpot = issue + knowledge + capability === 0;
   const issueStateClass = issue === 0
     ? 'issue-none'
     : issueOpen > 0
@@ -99,20 +133,53 @@ function renderEntityBadges(summary) {
         : 'issue-none';
   return `
     <span
-      class="node-entity-mini-badges ${isBlindSpot ? 'blind-spot' : ''} ${issueStateClass}"
+      class="node-entity-mini-badges ${issueStateClass}"
       title="节点摘要：${issue}/${knowledge}/${capability}（Issue/Knowledge/Capability）"
     >
-      <span class="node-entity-mini-badge ${issue > 0 || knowledge > 0 || capability > 0 ? 'active' : ''}">${issue}/${knowledge}/${capability}</span>
+      <span class="node-entity-mini-badge active">${issue}/${knowledge}/${capability}</span>
     </span>
   `;
 }
 
-function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee = false) {
+function pickEntityPreviewRows(nodeId, entityRowsByNodeId, mode) {
+  if (!entityRowsByNodeId || mode === 'none') return [];
+  const rows = entityRowsByNodeId[nodeId] || [];
+  if (mode === 'all') return rows;
+  return rows.filter((row) => row.entity_type === mode);
+}
+
+function renderEntityPreviewBoxes(nodeId, entityRowsByNodeId, mode) {
+  const rows = pickEntityPreviewRows(nodeId, entityRowsByNodeId, mode);
+  if (!rows.length) return '';
+  const shownRows = rows.slice(0, 4);
+  return `
+    <div class="node-entity-preview-strip" data-node-id="${esc(nodeId)}">
+      ${shownRows.map((row) => `
+        <button
+          class="entity-preview-box ${esc(row.entity_type)}"
+          type="button"
+          data-action="entity-preview"
+          data-node-id="${esc(nodeId)}"
+          data-entity-type="${esc(row.entity_type)}"
+          data-entity-id="${esc(row.id)}"
+          title="${esc(row.title || row.entity_type)}"
+        >
+          <span class="entity-preview-type">${esc(row.entity_type)}</span>
+          <span class="entity-preview-title">${esc(row.title || '-')}</span>
+        </button>
+      `).join('')}
+      ${rows.length > shownRows.length ? `<span class="entity-preview-more">+${rows.length - shownRows.length}</span>` : ''}
+    </div>
+  `;
+}
+
+function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none') {
   const children = byParent.get(node.id) || [];
   const hasChildren = children.length > 0;
   const isExpanded = expandedIdSet.has(node.id);
   const isShort = String(node.name || '').trim().length <= 10;
   const nodeSummary = entitySummaryByNodeId?.[node.id] || { issue: 0, knowledge: 0, capability: 0 };
+  const previewHtml = renderEntityPreviewBoxes(node.id, entityRowsByNodeId, elementPreviewMode);
 
   if (!hasChildren) {
     return `
@@ -120,8 +187,10 @@ function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, sh
         <span class="node-status ${esc(node.status)}"></span>
         <span class="node-name ${isShort ? 'short-name' : ''}" data-select-id="${esc(node.id)}">${esc(node.name)}</span>
         ${renderEntityBadges(nodeSummary)}
+        ${previewHtml}
         <div class="node-actions">
           <button class="node-action-btn chat" data-action="quick-chat" data-id="${esc(node.id)}" title="快捷提问">💬</button>
+          <button class="node-action-btn" data-action="add-diary" data-id="${esc(node.id)}" title="记录日记">📝</button>
           <button class="node-action-btn add-child" data-action="add-child" data-id="${esc(node.id)}" title="添加子任务">+</button>
           <button class="node-action-btn" data-action="edit" data-id="${esc(node.id)}" title="编辑">✎</button>
           <button class="node-action-btn delete" data-action="delete" data-id="${esc(node.id)}" title="删除">✕</button>
@@ -152,27 +221,32 @@ function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, sh
         ${showAssignee && node.assignee ? `<span class="node-meta">@${esc(node.assignee)}</span>` : ''}
         <div class="node-actions">
           <button class="node-action-btn chat" data-action="quick-chat" data-id="${esc(node.id)}" title="快捷提问">💬</button>
+          <button class="node-action-btn" data-action="add-diary" data-id="${esc(node.id)}" title="记录日记">📝</button>
           <button class="node-action-btn add-child" data-action="add-child" data-id="${esc(node.id)}" title="添加子任务">+</button>
           <button class="node-action-btn" data-action="edit" data-id="${esc(node.id)}" title="编辑">✎</button>
           <button class="node-action-btn delete" data-action="delete" data-id="${esc(node.id)}" title="删除">✕</button>
         </div>
       </div>
       ${isExpanded ? `
+        ${previewHtml ? `<div class="tree-node-preview-wrapper">${previewHtml}</div>` : ''}
         <div class="tree-parent-children">
-          ${branchChildren.map((child) => renderTreeNode(child, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee)).join('')}
+          ${branchChildren.map((child) => renderTreeNode(child, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee, entityRowsByNodeId, elementPreviewMode)).join('')}
           ${leafChildren.length ? `
             <div class="tree-leaf-container">
               <div class="tree-leaf-grid">
                 ${leafChildren.map((child) => {
                   const shortName = String(child.name || '').trim().length <= 10;
                   const childSummary = entitySummaryByNodeId?.[child.id] || { issue: 0, knowledge: 0, capability: 0 };
+                  const childPreviewHtml = renderEntityPreviewBoxes(child.id, entityRowsByNodeId, elementPreviewMode);
                   return `
                     <div class="tree-leaf-node" data-id="${esc(child.id)}" data-select-id="${esc(child.id)}" tabindex="0">
                       <span class="node-status ${esc(child.status)}"></span>
                       <span class="node-name ${shortName ? 'short-name' : ''}" data-select-id="${esc(child.id)}">${esc(child.name)}</span>
                       ${renderEntityBadges(childSummary)}
+                      ${childPreviewHtml}
                       <div class="node-actions">
                         <button class="node-action-btn chat" data-action="quick-chat" data-id="${esc(child.id)}" title="快捷提问">💬</button>
+                        <button class="node-action-btn" data-action="add-diary" data-id="${esc(child.id)}" title="记录日记">📝</button>
                         <button class="node-action-btn add-child" data-action="add-child" data-id="${esc(child.id)}" title="添加子任务">+</button>
                         <button class="node-action-btn" data-action="edit" data-id="${esc(child.id)}" title="编辑">✎</button>
                         <button class="node-action-btn delete" data-action="delete" data-id="${esc(child.id)}" title="删除">✕</button>
@@ -232,18 +306,19 @@ function applyAdaptiveRootMixedGridLayout(container) {
   });
 }
 
-function renderDenseLaneNode(node, byParent, expandedIdSet, entitySummaryByNodeId, depth = 0, showAssignee = false) {
+function renderDenseLaneNode(node, byParent, expandedIdSet, entitySummaryByNodeId, depth = 0, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none') {
   const children = byParent.get(node.id) || [];
   const hasChildren = children.length > 0;
   const isExpanded = expandedIdSet.has(node.id);
   const nodeSummary = entitySummaryByNodeId?.[node.id] || { issue: 0, knowledge: 0, capability: 0 };
   const useStackSummary = depth >= 3;
+  const previewHtml = renderEntityPreviewBoxes(node.id, entityRowsByNodeId, elementPreviewMode);
   const childrenHtml = hasChildren && isExpanded
-    ? `<div class="lane-tree-children">${children.map((child) => renderDenseLaneNode(child, byParent, expandedIdSet, entitySummaryByNodeId, depth + 1, showAssignee)).join('')}</div>`
+    ? `<div class="lane-tree-children">${children.map((child) => renderDenseLaneNode(child, byParent, expandedIdSet, entitySummaryByNodeId, depth + 1, showAssignee, entityRowsByNodeId, elementPreviewMode)).join('')}</div>`
     : '';
   return `
     <div class="lane-tree-node" data-depth="${depth}">
-      <div class="lane-tree-node-row" data-select-id="${esc(node.id)}" data-node-id="${esc(node.id)}" tabindex="0">
+      <div class="lane-tree-node-row" data-select-id="${esc(node.id)}" data-node-id="${esc(node.id)}" tabindex="0" draggable="true">
         ${hasChildren ? `
           <button
             class="node-expand-btn dense-expand-btn ${isExpanded ? 'expanded' : ''}"
@@ -277,6 +352,7 @@ function renderDenseLaneNode(node, byParent, expandedIdSet, entitySummaryByNodeI
           <button class="node-action-btn delete" data-action="delete" data-id="${esc(node.id)}" title="删除">✕</button>
         </div>
       </div>
+      ${previewHtml ? `<div class="lane-node-preview-wrapper">${previewHtml}</div>` : ''}
       ${childrenHtml}
     </div>
   `;
@@ -316,16 +392,17 @@ function getDenseLaneWidthPx(root, byParent, showAssignee = false) {
   return Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, preferred));
 }
 
-function renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee = false) {
+function renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none') {
   return `
     <div class="dense-tree dense-horizontal dense-lane-board">
       ${roots.map((root) => {
         const laneWidth = getDenseLaneWidthPx(root, byParent, showAssignee);
         const laneNameMax = Math.max(120, laneWidth - 86);
         return `
-        <section class="dense-lane" style="--lane-width:${laneWidth}px;--lane-name-max:${laneNameMax}px;">
+        <section class="dense-lane" data-root-id="${esc(root.id)}" style="--lane-width:${laneWidth}px;--lane-name-max:${laneNameMax}px;">
+          <div class="dense-lane-drag-handle" data-lane-drag-id="${esc(root.id)}" draggable="true" title="拖拽调整泳道顺序">⋮⋮</div>
           <div class="dense-lane-body">
-            ${renderDenseLaneNode(root, byParent, expandedIdSet, entitySummaryByNodeId, 0, showAssignee)}
+            ${renderDenseLaneNode(root, byParent, expandedIdSet, entitySummaryByNodeId, 0, showAssignee, entityRowsByNodeId, elementPreviewMode)}
           </div>
         </section>
       `;
@@ -342,11 +419,18 @@ export function mountWorkTree(targetId, options) {
     expandedIds = [],
     onToggleExpand,
     onAddChild,
+    onAddDiary,
     onEdit,
     onDelete,
     onQuickChat,
     onSelect,
+    onSelectEntity,
+    onMoveNode,
+    onReorderSiblings,
+    onReorderLanes,
     entitySummaryByNodeId = {},
+    entityRowsByNodeId = {},
+    elementPreviewMode = 'none',
     renderMode = 'card',
     showAssignee = false,
   } = options || {};
@@ -357,6 +441,33 @@ export function mountWorkTree(targetId, options) {
     if (!byParent.has(key)) byParent.set(key, []);
     byParent.get(key).push(item);
   }
+  const laneOrderOf = (item) => {
+    const value = Number(item?.extra_data?.lane_order);
+    return Number.isFinite(value) ? value : Number.POSITIVE_INFINITY;
+  };
+  const keyOf = (item, keyName) => String(item?.extra_data?.[keyName] || '').trim();
+  byParent.forEach((rows, parentKey) => {
+    rows.sort((a, b) => {
+      if (parentKey === '__root__') {
+        const laneKeyA = keyOf(a, 'lane_order_key');
+        const laneKeyB = keyOf(b, 'lane_order_key');
+        if (laneKeyA && laneKeyB && laneKeyA !== laneKeyB) return laneKeyA.localeCompare(laneKeyB);
+        if (laneKeyA && !laneKeyB) return -1;
+        if (!laneKeyA && laneKeyB) return 1;
+        const laneDiff = laneOrderOf(a) - laneOrderOf(b);
+        if (laneDiff !== 0) return laneDiff;
+      } else {
+        const orderKeyA = keyOf(a, 'order_key');
+        const orderKeyB = keyOf(b, 'order_key');
+        if (orderKeyA && orderKeyB && orderKeyA !== orderKeyB) return orderKeyA.localeCompare(orderKeyB);
+        if (orderKeyA && !orderKeyB) return -1;
+        if (!orderKeyA && orderKeyB) return 1;
+      }
+      const timeA = String(a.created_at || '');
+      const timeB = String(b.created_at || '');
+      return timeA.localeCompare(timeB);
+    });
+  });
   const roots = byParent.get('__root__') || [];
   const expandedIdSet = new Set(expandedIds);
 
@@ -365,13 +476,13 @@ export function mountWorkTree(targetId, options) {
     return;
   }
   if (renderMode === 'dense') {
-    container.innerHTML = renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee);
+    container.innerHTML = renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee, entityRowsByNodeId, elementPreviewMode);
   } else {
   const htmlParts = roots.map((root) => {
     const hasChildren = ((byParent.get(root.id) || []).length > 0);
     return `
       <div class="root-grid-item ${hasChildren ? 'branch' : 'leaf'}" data-root-item-type="${hasChildren ? 'branch' : 'leaf'}">
-        ${renderTreeNode(root, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee)}
+        ${renderTreeNode(root, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee, entityRowsByNodeId, elementPreviewMode)}
       </div>
     `;
   });
@@ -382,10 +493,17 @@ export function mountWorkTree(targetId, options) {
     el.addEventListener('click', (e) => {
       e.stopPropagation();
       const action = el.getAttribute('data-action');
+      if (action === 'entity-preview') {
+        const nodeId = el.getAttribute('data-node-id');
+        const entityType = el.getAttribute('data-entity-type') || 'all';
+        if (nodeId) onSelectEntity?.(nodeId, entityType);
+        return;
+      }
       const id = el.getAttribute('data-id');
       if (!id) return;
       if (action === 'toggle') onToggleExpand?.(id);
       if (action === 'add-child') onAddChild?.(id);
+      if (action === 'add-diary') onAddDiary?.(id);
       if (action === 'edit') onEdit?.(id);
       if (action === 'delete') onDelete?.(id);
       if (action === 'quick-chat') onQuickChat?.(id, el);
@@ -402,5 +520,113 @@ export function mountWorkTree(targetId, options) {
   if (renderMode !== 'dense') {
     applyAdaptiveLeafGridLayout(container);
     applyAdaptiveRootMixedGridLayout(container);
+    return;
   }
+
+  let draggingNodeId = '';
+  let draggingLaneId = '';
+  const dragDropPositionByNodeId = new Map();
+  const rowEls = Array.from(container.querySelectorAll('.lane-tree-node-row[data-node-id]'));
+  rowEls.forEach((el) => {
+    const nodeId = el.getAttribute('data-node-id') || '';
+    el.addEventListener('dragstart', (event) => {
+      draggingNodeId = nodeId;
+      draggingLaneId = '';
+      el.classList.add('is-dragging');
+      event.stopPropagation();
+      event.dataTransfer?.setData('text/plain', nodeId);
+      if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+    });
+    el.addEventListener('dragend', () => {
+      draggingNodeId = '';
+      el.classList.remove('is-dragging');
+      rowEls.forEach((rowEl) => {
+        rowEl.classList.remove('drag-over-target');
+        rowEl.removeAttribute('data-drop-position');
+      });
+      dragDropPositionByNodeId.clear();
+    });
+    el.addEventListener('dragover', (event) => {
+      if (!draggingNodeId || draggingNodeId === nodeId) return;
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
+      const rect = el.getBoundingClientRect();
+      const offsetY = event.clientY - rect.top;
+      const ratio = rect.height > 0 ? offsetY / rect.height : 0.5;
+      let dropPosition = 'child';
+      if (ratio < 0.25) dropPosition = 'before';
+      else if (ratio > 0.75) dropPosition = 'after';
+      dragDropPositionByNodeId.set(nodeId, dropPosition);
+      el.setAttribute('data-drop-position', dropPosition);
+      el.classList.add('drag-over-target');
+    });
+    el.addEventListener('dragleave', () => {
+      el.classList.remove('drag-over-target');
+      el.removeAttribute('data-drop-position');
+      dragDropPositionByNodeId.delete(nodeId);
+    });
+    el.addEventListener('drop', (event) => {
+      event.preventDefault();
+      el.classList.remove('drag-over-target');
+      const dropPosition = dragDropPositionByNodeId.get(nodeId) || 'child';
+      el.removeAttribute('data-drop-position');
+      dragDropPositionByNodeId.delete(nodeId);
+      if (!draggingNodeId || draggingNodeId === nodeId) return;
+      if (dropPosition === 'before' || dropPosition === 'after') {
+        onReorderSiblings?.(draggingNodeId, nodeId, dropPosition);
+      } else {
+        onMoveNode?.(draggingNodeId, nodeId);
+      }
+      draggingNodeId = '';
+    });
+  });
+
+  const board = container.querySelector('.dense-lane-board');
+  board?.addEventListener('dragover', (event) => {
+    if (!draggingNodeId) return;
+    event.preventDefault();
+  });
+  board?.addEventListener('drop', (event) => {
+    if (!draggingNodeId) return;
+    event.preventDefault();
+    onMoveNode?.(draggingNodeId, null);
+    draggingNodeId = '';
+  });
+
+  const laneEls = Array.from(container.querySelectorAll('.dense-lane[data-root-id]'));
+  const laneHandleEls = Array.from(container.querySelectorAll('.dense-lane-drag-handle[data-lane-drag-id]'));
+  laneHandleEls.forEach((handle) => {
+    const rootId = handle.getAttribute('data-lane-drag-id') || '';
+    handle.addEventListener('dragstart', (event) => {
+      draggingLaneId = rootId;
+      draggingNodeId = '';
+      const lane = handle.closest('.dense-lane');
+      lane?.classList.add('is-lane-dragging');
+      event.dataTransfer?.setData('text/plain', rootId);
+      if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+    });
+    handle.addEventListener('dragend', () => {
+      const lane = handle.closest('.dense-lane');
+      lane?.classList.remove('is-lane-dragging');
+      draggingLaneId = '';
+    });
+  });
+  laneEls.forEach((el) => {
+    const rootId = el.getAttribute('data-root-id') || '';
+    el.addEventListener('dragover', (event) => {
+      if (!draggingLaneId || draggingLaneId === rootId) return;
+      event.preventDefault();
+      el.classList.add('lane-drag-over-target');
+    });
+    el.addEventListener('dragleave', () => {
+      el.classList.remove('lane-drag-over-target');
+    });
+    el.addEventListener('drop', (event) => {
+      event.preventDefault();
+      el.classList.remove('lane-drag-over-target');
+      if (!draggingLaneId || draggingLaneId === rootId) return;
+      onReorderLanes?.(draggingLaneId, rootId);
+      draggingLaneId = '';
+    });
+  });
 }

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@qnote/q-ai-note",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "description": "AI-assisted personal work sandbox and diary system",
   "main": "dist/server/index.js",
   "bin": {
-    "q-ai-note": "dist/cli.js"
+    "q-ai-note": "dist/cli.js",
+    "q-ai-note-server": "dist/cli-server.js"
   },
   "files": [
     "dist/**/*",
@@ -16,7 +17,8 @@
     "build": "tsc && node scripts/copy-web-assets.mjs",
     "start": "PORT=3000 node dist/server/index.js",
     "test": "vitest run",
-    "test:e2e": "playwright test",
+    "test:e2e": "env -u CI playwright test --grep-invert @ai --workers=1",
+    "test:e2e:full": "playwright test",
     "test:watch": "vitest",
     "paths:check": "tsx scripts/print-runtime-paths.ts",
     "prepack": "npm run build"