@qnote/q-ai-note 1.0.8 → 1.0.10

package/dist/web/app.js

@@ -487,16 +487,50 @@ function renderWorkTree() {
       });
       await loadSandbox(state.currentSandbox.id);
     },
-    onReorderLanes: treeReadonly ? undefined : async (dragRootId, targetRootId) => {
+    onReorderLanes: treeReadonly ? undefined : async (dragRootId, targetRootId, position = 'before') => {
       if (!state.currentSandbox) return;
-      if (!dragRootId || !targetRootId || dragRootId === targetRootId) return;
+      if (!dragRootId) return;
+      if (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 missingLaneKeyRoots = ordered.filter((item) => !getNodeOrderKey(item, 'lane_order_key'));
+      if (missingLaneKeyRoots.length > 0) {
+        let leftKey = '';
+        for (const root of ordered) {
+          const currentKey = getNodeOrderKey(root, 'lane_order_key');
+          if (currentKey) {
+            leftKey = currentKey;
+            continue;
+          }
+          const generatedKey = rankBetween(leftKey, '');
+          await apiRequest(`${API_BASE}/items/${root.id}`, {
+            method: 'PUT',
+            body: JSON.stringify({
+              extra_data: {
+                ...(root.extra_data || {}),
+                lane_order_key: generatedKey,
+              },
+            }),
+          });
+          root.extra_data = {
+            ...(root.extra_data || {}),
+            lane_order_key: generatedKey,
+          };
+          leftKey = generatedKey;
+        }
+      }
       const fromIdx = ordered.findIndex((item) => item.id === dragRootId);
-      const toIdx = ordered.findIndex((item) => item.id === targetRootId);
-      if (fromIdx < 0 || toIdx < 0) return;
+      if (fromIdx < 0) return;
       const [moved] = ordered.splice(fromIdx, 1);
-      ordered.splice(toIdx, 0, moved);
+      let insertIndex = ordered.length;
+      if (targetRootId) {
+        const targetIdx = ordered.findIndex((item) => item.id === targetRootId);
+        if (targetIdx < 0) return;
+        insertIndex = position === 'after' ? targetIdx + 1 : targetIdx;
+      } else if (position !== 'end') {
+        insertIndex = ordered.length;
+      }
+      ordered.splice(insertIndex, 0, moved);
       const movedIndex = ordered.findIndex((item) => item.id === dragRootId);
       const left = ordered[movedIndex - 1] || null;
       const right = ordered[movedIndex + 1] || null;
@@ -623,7 +657,7 @@ function getNodeOrderKey(item, keyName = 'order_key') {
 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 && keyA !== keyB) return keyA < keyB ? -1 : 1;
   if (keyA && !keyB) return -1;
   if (!keyA && keyB) return 1;
   const numericA = Number(a?.extra_data?.lane_order);
@@ -633,7 +667,10 @@ function compareSiblingOrder(a, b, keyName = 'order_key') {
   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 || ''));
+  const createdA = String(a?.created_at || '');
+  const createdB = String(b?.created_at || '');
+  if (createdA === createdB) return 0;
+  return createdA < createdB ? -1 : 1;
 }
 
 function populateParentSelect(items, preferredParentId = null) {
@@ -1468,7 +1505,14 @@ async function loadSandboxChats(sandboxId) {
   const chats = await apiRequest(`${API_BASE}/chats/sandbox/${sandboxId}`);
   state.chats = chats;
 
-  mountHtmlList('sandbox-chat-messages', chats.map((chat) => renderChatEntry(chat, { safeText, renderAIActionMessage })));
+  mountHtmlList(
+    'sandbox-chat-messages',
+    chats.map((chat) => renderChatEntry(chat, {
+      safeText,
+      renderAIActionMessage,
+      renderContent: (content) => renderMarkdownSnippet(content),
+    })),
+  );
   
   messages.scrollTop = messages.scrollHeight;
 }
@@ -1500,7 +1544,7 @@ function renderAIActionMessage(action) {
   };
   
   if (actionType === 'response' || actionType === 'clarify') {
-    return `<div class="chat-message assistant">${escapeHtml(action.response || action.observation || '')}</div>`;
+    return `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || action.observation || '')}</div>`;
   }
   else if (actionType === 'confirm' && action.confirm_items) {
     // Skip confirm, go directly to done
@@ -1527,7 +1571,7 @@ function renderAIActionMessage(action) {
     </div>`;
   }
   
-  return `<div class="chat-message assistant">${escapeHtml(action.response || '')}</div>`;
+  return `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || '')}</div>`;
 }
 
 window.undoOperation = async function(operationId, btn) {
@@ -2531,7 +2575,7 @@ async function initApp() {
     const actionType = action.action;
     
     if (actionType === 'response' || actionType === 'clarify') {
-      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${safeText(action.response || action.observation || '')}</div>`);
+      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${renderMarkdownSnippet(action.response || action.observation || '')}</div>`);
       messages.scrollTop = messages.scrollHeight;
       
       if (actionType === 'clarify') {
@@ -2623,7 +2667,7 @@ async function initApp() {
       state.pendingAction = null;
     }
     else if (actionType === 'stop') {
-      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${safeText(action.observation || '已取消操作')}</div>`);
+      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${renderMarkdownSnippet(action.observation || '已取消操作')}</div>`);
       messages.scrollTop = messages.scrollHeight;
       state.pendingAction = null;
     }

package/dist/web/chatView.js

@@ -14,7 +14,7 @@ export function tryParseAssistantAction(content) {
 }
 
 export function renderChatEntry(chat, helpers) {
-  const { safeText, renderAIActionMessage } = helpers;
+  const { safeText, renderAIActionMessage, renderContent } = helpers;
 
   if (!('role' in chat)) {
     return `<div class="chat-message diary">[日记] ${safeText(chat.content)}</div>`;
@@ -25,6 +25,10 @@ export function renderChatEntry(chat, helpers) {
     if (parsedAction) {
       return renderAIActionMessage(parsedAction);
     }
+    const contentHtml = typeof renderContent === 'function'
+      ? renderContent(chat.content)
+      : safeText(chat.content);
+    return `<div class="chat-message assistant">${contentHtml}</div>`;
   }
 
   return `<div class="chat-message ${chat.role}">${safeText(chat.content)}</div>`;

package/dist/web/styles.css

@@ -647,6 +647,30 @@ h2 {
   flex-wrap: nowrap;
 }
 
+.dense-lane-drop-slot {
+  width: 14px;
+  min-width: 14px;
+  align-self: stretch;
+  border-radius: 6px;
+  min-height: 180px;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.dense-lane-drop-slot.end {
+  width: 24px;
+  min-width: 24px;
+}
+
+.dense-lane-drop-slot.lane-slot-drag-over {
+  background: rgba(59, 130, 246, 0.28);
+  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.45);
+}
+
+.dense-lane-board.is-lane-dragging-active .dense-lane-drop-slot {
+  background: rgba(148, 163, 184, 0.14);
+  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22);
+}
+
 .dense-lane {
   min-width: var(--lane-width, 220px);
   width: var(--lane-width, 220px);
@@ -746,21 +770,26 @@ h2 {
 }
 
 .lane-tree-title-line {
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 4px;
   min-width: 0;
 }
 
-.lane-tree-summary-line {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  min-height: 14px;
+.lane-tree-title-line .dense-node-name {
+  flex: 1 1 auto;
+  min-width: 96px;
 }
 
-.lane-tree-node-main.stack-summary .dense-node-name {
-  max-width: calc(var(--lane-name-max, 154px) + 28px);
+.lane-tree-title-line .node-entity-mini-badges,
+.lane-tree-title-line .node-meta {
+  flex: 0 0 auto;
+  max-width: 100%;
+}
+
+.lane-tree-title-line .node-meta {
+  white-space: nowrap;
 }
 
 .lane-tree-node {

package/dist/web/vueRenderers.js

@@ -318,7 +318,6 @@ function renderDenseLaneNode(node, byParent, expandedIdSet, entitySummaryByNodeI
   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 summaryBadgeHtml = renderEntityBadges(nodeSummary);
   const summaryAssigneeHtml = showAssignee && node.assignee ? `<span class="node-meta">@${esc(node.assignee)}</span>` : '';
   const previewHtml = renderEntityPreviewBoxes(node.id, entityRowsByNodeId, elementPreviewMode);
@@ -342,18 +341,12 @@ function renderDenseLaneNode(node, byParent, expandedIdSet, entitySummaryByNodeI
           </button>
         ` : ''}
         <span class="node-status ${esc(node.status)}"></span>
-        <div class="lane-tree-node-main ${useStackSummary ? 'stack-summary' : ''}">
+        <div class="lane-tree-node-main">
           <div class="lane-tree-title-line">
             <span class="dense-node-name">${esc(node.name)}</span>
-            ${!useStackSummary ? summaryBadgeHtml : ''}
-            ${!useStackSummary ? summaryAssigneeHtml : ''}
+            ${summaryBadgeHtml}
+            ${summaryAssigneeHtml}
           </div>
-          ${useStackSummary && (summaryBadgeHtml || summaryAssigneeHtml) ? `
-            <div class="lane-tree-summary-line">
-              ${summaryBadgeHtml}
-              ${summaryAssigneeHtml}
-            </div>
-          ` : ''}
         </div>
         ${readonly ? '' : `
           <div class="node-actions">
@@ -411,6 +404,7 @@ function renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId,
         const laneWidth = getDenseLaneWidthPx(root, byParent, showAssignee);
         const laneNameMax = Math.max(120, laneWidth - 86);
         return `
+        <div class="dense-lane-drop-slot" data-lane-slot-root-id="${esc(root.id)}" data-lane-slot-position="before" title="拖拽到此处：插入到当前泳道之前"></div>
         <section class="dense-lane" data-root-id="${esc(root.id)}" style="--lane-width:${laneWidth}px;--lane-name-max:${laneNameMax}px;">
           ${readonly ? '' : `<div class="dense-lane-drag-handle" data-lane-drag-id="${esc(root.id)}" draggable="true" title="拖拽调整泳道顺序">⋮⋮</div>`}
           <div class="dense-lane-body">
@@ -419,6 +413,7 @@ function renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId,
         </section>
       `;
       }).join('')}
+      <div class="dense-lane-drop-slot end" data-lane-slot-end="1" title="拖拽到此处：移动到最后"></div>
     </div>
   `;
 }
@@ -608,12 +603,16 @@ export function mountWorkTree(targetId, options) {
   });
 
   const laneEls = Array.from(container.querySelectorAll('.dense-lane[data-root-id]'));
+  const laneSlotEls = Array.from(container.querySelectorAll('.dense-lane-drop-slot[data-lane-slot-root-id]'));
+  const laneEndSlotEl = container.querySelector('.dense-lane-drop-slot[data-lane-slot-end="1"]');
+  const laneDropPositionByRootId = new Map();
   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 = '';
+      board?.classList.add('is-lane-dragging-active');
       const lane = handle.closest('.dense-lane');
       lane?.classList.add('is-lane-dragging');
       event.dataTransfer?.setData('text/plain', rootId);
@@ -622,6 +621,14 @@ export function mountWorkTree(targetId, options) {
     handle.addEventListener('dragend', () => {
       const lane = handle.closest('.dense-lane');
       lane?.classList.remove('is-lane-dragging');
+      board?.classList.remove('is-lane-dragging-active');
+      laneEls.forEach((laneEl) => {
+        laneEl.classList.remove('lane-drag-over-target');
+        laneEl.removeAttribute('data-lane-drop-position');
+      });
+      laneSlotEls.forEach((slotEl) => slotEl.classList.remove('lane-slot-drag-over'));
+      laneEndSlotEl?.classList.remove('lane-slot-drag-over');
+      laneDropPositionByRootId.clear();
       draggingLaneId = '';
     });
   });
@@ -630,17 +637,101 @@ export function mountWorkTree(targetId, options) {
     el.addEventListener('dragover', (event) => {
       if (!draggingLaneId || draggingLaneId === rootId) return;
       event.preventDefault();
+      const rect = el.getBoundingClientRect();
+      const offsetX = event.clientX - rect.left;
+      const ratio = rect.width > 0 ? offsetX / rect.width : 0.5;
+      const laneDropPosition = ratio >= 0.5 ? 'after' : 'before';
+      laneDropPositionByRootId.set(rootId, laneDropPosition);
+      el.setAttribute('data-lane-drop-position', laneDropPosition);
       el.classList.add('lane-drag-over-target');
     });
     el.addEventListener('dragleave', () => {
       el.classList.remove('lane-drag-over-target');
+      el.removeAttribute('data-lane-drop-position');
+      laneDropPositionByRootId.delete(rootId);
     });
     el.addEventListener('drop', (event) => {
       event.preventDefault();
       el.classList.remove('lane-drag-over-target');
+      let laneDropPosition = laneDropPositionByRootId.get(rootId);
+      if (!laneDropPosition) {
+        const rect = el.getBoundingClientRect();
+        const offsetX = event.clientX - rect.left;
+        const ratio = rect.width > 0 ? offsetX / rect.width : 0.5;
+        laneDropPosition = ratio >= 0.5 ? 'after' : 'before';
+      }
+      el.removeAttribute('data-lane-drop-position');
+      laneDropPositionByRootId.delete(rootId);
       if (!draggingLaneId || draggingLaneId === rootId) return;
-      onReorderLanes?.(draggingLaneId, rootId);
+      if (laneDropPosition === 'before') {
+        event.stopPropagation();
+        onReorderLanes?.(draggingLaneId, rootId, 'before');
+        board?.classList.remove('is-lane-dragging-active');
+        draggingLaneId = '';
+      } else {
+        const orderedRootIds = laneEls
+          .map((laneEl) => laneEl.getAttribute('data-root-id') || '')
+          .filter((id) => id && id !== draggingLaneId);
+        const isLastTarget = orderedRootIds.length > 0 && orderedRootIds[orderedRootIds.length - 1] === rootId;
+        if (!isLastTarget) {
+          event.stopPropagation();
+          onReorderLanes?.(draggingLaneId, rootId, 'after');
+          board?.classList.remove('is-lane-dragging-active');
+          draggingLaneId = '';
+        }
+      }
+    });
+  });
+  laneSlotEls.forEach((slotEl) => {
+    const targetRootId = slotEl.getAttribute('data-lane-slot-root-id') || '';
+    slotEl.addEventListener('dragover', (event) => {
+      if (!draggingLaneId || draggingLaneId === targetRootId) return;
+      event.preventDefault();
+      slotEl.classList.add('lane-slot-drag-over');
+    });
+    slotEl.addEventListener('dragleave', () => {
+      slotEl.classList.remove('lane-slot-drag-over');
+    });
+    slotEl.addEventListener('drop', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      slotEl.classList.remove('lane-slot-drag-over');
+      if (!draggingLaneId || draggingLaneId === targetRootId) return;
+      onReorderLanes?.(draggingLaneId, targetRootId, 'before');
+      board?.classList.remove('is-lane-dragging-active');
       draggingLaneId = '';
     });
   });
+  laneEndSlotEl?.addEventListener('dragover', (event) => {
+    if (!draggingLaneId) return;
+    event.preventDefault();
+    laneEndSlotEl.classList.add('lane-slot-drag-over');
+  });
+  laneEndSlotEl?.addEventListener('dragleave', () => {
+    laneEndSlotEl.classList.remove('lane-slot-drag-over');
+  });
+  laneEndSlotEl?.addEventListener('drop', (event) => {
+    if (!draggingLaneId) return;
+    event.preventDefault();
+    event.stopPropagation();
+    laneEndSlotEl.classList.remove('lane-slot-drag-over');
+    onReorderLanes?.(draggingLaneId, '', 'end');
+    board?.classList.remove('is-lane-dragging-active');
+    draggingLaneId = '';
+  });
+  board?.addEventListener('dragover', (event) => {
+    if (!draggingLaneId) return;
+    event.preventDefault();
+  });
+  board?.addEventListener('drop', (event) => {
+    if (!draggingLaneId) return;
+    event.preventDefault();
+    laneEls.forEach((laneEl) => {
+      laneEl.classList.remove('lane-drag-over-target');
+      laneEl.removeAttribute('data-lane-drop-position');
+    });
+    laneDropPositionByRootId.clear();
+    onReorderLanes?.(draggingLaneId, '', 'end');
+    draggingLaneId = '';
+  });
 }

package/package.json

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