@qnote/q-ai-note 1.0.5 → 1.0.6

package/dist/web/styles.css

@@ -138,6 +138,10 @@ body {
   display: none;
 }
 
+.hidden {
+  display: none !important;
+}
+
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
@@ -453,6 +457,11 @@ h2 {
   background: linear-gradient(135deg, #e8f0fe 0%, #f0f7ff 100%);
 }
 
+.tree-parent-header.is-selected {
+  background: linear-gradient(135deg, #dbeafe 0%, #eef6ff 100%);
+  box-shadow: inset 0 0 0 1px #8bb8ff;
+}
+
 .tree-parent-header .node-status {
   width: 10px;
   height: 10px;
@@ -772,6 +781,12 @@ h2 {
   background: #f7faff;
 }
 
+.lane-tree-node-row.is-selected {
+  border-color: #80aef5;
+  background: #edf5ff;
+  box-shadow: inset 0 0 0 1px #80aef5;
+}
+
 .lane-tree-node-row:focus-visible {
   outline: 2px solid #c2dbff;
   outline-offset: 1px;
@@ -936,6 +951,12 @@ h2 {
   box-shadow: 0 4px 10px rgba(0,0,0,0.1);
 }
 
+.tree-leaf-node.is-selected {
+  border-color: #7aa9f8;
+  background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
+  box-shadow: 0 0 0 2px rgba(122, 169, 248, 0.28), 0 6px 14px rgba(58, 108, 196, 0.12);
+}
+
 .tree-leaf-node .node-status {
   display: inline-flex;
   width: 6px;
@@ -1753,16 +1774,24 @@ dialog::backdrop {
 /* Sandbox Layout - Left/Right */
 .sandbox-layout {
   display: grid;
-  grid-template-columns: minmax(0, 72fr) minmax(280px, 28fr);
+  grid-template-columns: minmax(0, 1fr);
   gap: 16px;
-  height: calc(100vh - 180px);
+  min-height: 320px;
   padding-right: 8px;
   box-sizing: border-box;
   position: relative;
 }
 
-.sandbox-layout.presentation-mode {
-  grid-template-columns: minmax(0, 82fr) minmax(240px, 18fr);
+.sandbox-layout.show-chat {
+  grid-template-columns: minmax(0, 72fr) minmax(280px, 28fr);
+}
+
+.sandbox-layout .sandbox-chat-section {
+  display: none;
+}
+
+.sandbox-layout.show-chat .sandbox-chat-section {
+  display: flex;
 }
 
 .sandbox-layout.is-fullscreen {
@@ -1774,12 +1803,24 @@ dialog::backdrop {
   align-items: stretch;
 }
 
+.sandbox-layout.is-fullscreen.show-chat {
+  grid-template-columns: minmax(0, 72fr) minmax(280px, 28fr);
+}
+
 .sandbox-layout.is-fullscreen .sandbox-tree-section,
 .sandbox-layout.is-fullscreen .sandbox-chat-section {
   min-height: 0;
 }
 
-.sandbox-layout.is-fullscreen .sandbox-chat-section {
+.sandbox-layout.is-fullscreen:not(.show-chat) .sandbox-chat-section {
+  display: none;
+}
+
+#page-sandbox-detail.is-sandbox-fullscreen #sandbox-overview {
+  display: none;
+}
+
+#page-sandbox-detail.is-sandbox-fullscreen .back-link {
   display: none;
 }
 
@@ -2121,11 +2162,15 @@ dialog::backdrop {
 
 @media (max-width: 1366px) {
   .sandbox-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sandbox-layout.show-chat {
     grid-template-columns: minmax(0, 70fr) minmax(260px, 30fr);
   }
 
-  .sandbox-layout.presentation-mode {
-    grid-template-columns: minmax(0, 80fr) minmax(220px, 20fr);
+  .sandbox-layout.is-fullscreen.show-chat {
+    grid-template-columns: minmax(0, 70fr) minmax(260px, 30fr);
   }
 
   .node-entity-drawer {
@@ -2138,6 +2183,21 @@ dialog::backdrop {
   }
 }
 
+.ai-toggle-btn {
+  background: linear-gradient(135deg, #2563eb, #1d4ed8);
+  color: #fff;
+  border-color: transparent;
+  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.24);
+}
+
+.ai-toggle-btn:hover {
+  background: linear-gradient(135deg, #1d4ed8, #1e40af);
+}
+
+.ai-toggle-btn .icon {
+  margin-right: 4px;
+}
+
 .sandbox-chat-section .chat-container {
   flex: 1;
   height: auto;

package/dist/web/vueRenderers.js

@@ -14,7 +14,7 @@ function byId(targetId) {
 export function mountSandboxGrid(targetId, options) {
   const container = byId(targetId);
   if (!container) return;
-  const { sandboxes = [], emptyText = '暂无数据', onOpen, onDelete } = options || {};
+  const { sandboxes = [], emptyText = '暂无数据', onOpen, onDelete, readonly = false } = options || {};
 
   if (!sandboxes.length) {
     container.innerHTML = `<div class="empty-state"><p>${esc(emptyText)}</p></div>`;
@@ -28,7 +28,7 @@ export function mountSandboxGrid(targetId, options) {
       <div class="sandbox-meta">
         <span>${esc(new Date(sandbox.updated_at).toLocaleDateString())}</span>
       </div>
-      <button class="btn btn-secondary btn-sm sandbox-delete" data-delete-id="${esc(sandbox.id)}">删除</button>
+      ${readonly ? '' : `<button class="btn btn-secondary btn-sm sandbox-delete" data-delete-id="${esc(sandbox.id)}">删除</button>`}
     </div>
   `).join('');
 
@@ -60,6 +60,7 @@ export function mountDiaryTimeline(targetId, options) {
     onIgnore,
     onEdit,
     onOpenWorkItem,
+    readonly = false,
     renderContent,
   } = options || {};
 
@@ -84,13 +85,15 @@ export function mountDiaryTimeline(targetId, options) {
             >${esc(getWorkItemName?.(diary.sandbox_id, diary.work_item_id) || diary.work_item_id)}</button>
           ` : ''}
         </div>
-        <div class="diary-actions">
-          <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>
+        ${readonly ? '' : `
+          <div class="diary-actions">
+            <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>
@@ -173,28 +176,30 @@ function renderEntityPreviewBoxes(nodeId, entityRowsByNodeId, mode) {
   `;
 }
 
-function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none') {
+function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none', readonly = false, selectedId = '') {
   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);
+  const isSelected = String(selectedId || '') === String(node.id || '');
 
   if (!hasChildren) {
     return `
-      <div class="tree-leaf-node" data-id="${esc(node.id)}" data-select-id="${esc(node.id)}" tabindex="0">
-        <span class="node-status ${esc(node.status)}"></span>
+      <div class="tree-leaf-node ${isSelected ? 'is-selected' : ''}" data-id="${esc(node.id)}" data-select-id="${esc(node.id)}" tabindex="0">
         <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>
-        </div>
+        ${readonly ? '' : `
+          <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>
     `;
   }
@@ -204,7 +209,7 @@ function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, sh
 
   return `
     <div class="tree-parent-card ${isExpanded ? 'expanded' : 'collapsed'}">
-      <div class="tree-parent-header" data-select-id="${esc(node.id)}" tabindex="0" aria-expanded="${isExpanded ? 'true' : 'false'}">
+      <div class="tree-parent-header ${isSelected ? 'is-selected' : ''}" data-select-id="${esc(node.id)}" tabindex="0" aria-expanded="${isExpanded ? 'true' : 'false'}">
         <button
           class="node-expand-btn ${isExpanded ? 'expanded' : ''}"
           data-action="toggle"
@@ -215,22 +220,23 @@ function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, sh
         >
           <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
         </button>
-        <span class="node-status ${esc(node.status)}"></span>
         <span class="node-name">${esc(node.name)}</span>
         ${renderEntityBadges(nodeSummary)}
         ${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>
+        ${readonly ? '' : `
+          <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, entityRowsByNodeId, elementPreviewMode)).join('')}
+          ${branchChildren.map((child) => renderTreeNode(child, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee, entityRowsByNodeId, elementPreviewMode, readonly, selectedId)).join('')}
           ${leafChildren.length ? `
             <div class="tree-leaf-container">
               <div class="tree-leaf-grid">
@@ -239,18 +245,19 @@ function renderTreeNode(node, byParent, expandedIdSet, entitySummaryByNodeId, sh
                   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>
+                    <div class="tree-leaf-node ${String(selectedId || '') === String(child.id || '') ? 'is-selected' : ''}" data-id="${esc(child.id)}" data-select-id="${esc(child.id)}" tabindex="0">
                       <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>
-                      </div>
+                      ${readonly ? '' : `
+                        <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>
+                        </div>
+                      `}
                     </div>
                   `;
                 }).join('')}
@@ -306,7 +313,7 @@ function applyAdaptiveRootMixedGridLayout(container) {
   });
 }
 
-function renderDenseLaneNode(node, byParent, expandedIdSet, entitySummaryByNodeId, depth = 0, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none') {
+function renderDenseLaneNode(node, byParent, expandedIdSet, entitySummaryByNodeId, depth = 0, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none', readonly = false, selectedId = '') {
   const children = byParent.get(node.id) || [];
   const hasChildren = children.length > 0;
   const isExpanded = expandedIdSet.has(node.id);
@@ -314,11 +321,12 @@ function renderDenseLaneNode(node, byParent, expandedIdSet, entitySummaryByNodeI
   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, entityRowsByNodeId, elementPreviewMode)).join('')}</div>`
+    ? `<div class="lane-tree-children">${children.map((child) => renderDenseLaneNode(child, byParent, expandedIdSet, entitySummaryByNodeId, depth + 1, showAssignee, entityRowsByNodeId, elementPreviewMode, readonly, selectedId)).join('')}</div>`
     : '';
+  const isSelected = String(selectedId || '') === String(node.id || '');
   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" draggable="true">
+      <div class="lane-tree-node-row ${isSelected ? 'is-selected' : ''}" data-select-id="${esc(node.id)}" data-node-id="${esc(node.id)}" tabindex="0" draggable="${readonly ? 'false' : 'true'}">
         ${hasChildren ? `
           <button
             class="node-expand-btn dense-expand-btn ${isExpanded ? 'expanded' : ''}"
@@ -345,12 +353,14 @@ function renderDenseLaneNode(node, byParent, expandedIdSet, entitySummaryByNodeI
             </div>
           ` : ''}
         </div>
-        <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 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>
+        ${readonly ? '' : `
+          <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 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>
       ${previewHtml ? `<div class="lane-node-preview-wrapper">${previewHtml}</div>` : ''}
       ${childrenHtml}
@@ -392,7 +402,7 @@ function getDenseLaneWidthPx(root, byParent, showAssignee = false) {
   return Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, preferred));
 }
 
-function renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none') {
+function renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee = false, entityRowsByNodeId = {}, elementPreviewMode = 'none', readonly = false, selectedId = '') {
   return `
     <div class="dense-tree dense-horizontal dense-lane-board">
       ${roots.map((root) => {
@@ -400,9 +410,9 @@ function renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId,
         const laneNameMax = Math.max(120, laneWidth - 86);
         return `
         <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>
+          ${readonly ? '' : `<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, entityRowsByNodeId, elementPreviewMode)}
+            ${renderDenseLaneNode(root, byParent, expandedIdSet, entitySummaryByNodeId, 0, showAssignee, entityRowsByNodeId, elementPreviewMode, readonly, selectedId)}
           </div>
         </section>
       `;
@@ -433,6 +443,8 @@ export function mountWorkTree(targetId, options) {
     elementPreviewMode = 'none',
     renderMode = 'card',
     showAssignee = false,
+    readonly = false,
+    selectedId = '',
   } = options || {};
 
   const byParent = new Map();
@@ -476,13 +488,13 @@ export function mountWorkTree(targetId, options) {
     return;
   }
   if (renderMode === 'dense') {
-    container.innerHTML = renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee, entityRowsByNodeId, elementPreviewMode);
+    container.innerHTML = renderDenseTree(roots, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee, entityRowsByNodeId, elementPreviewMode, readonly, selectedId);
   } 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, entityRowsByNodeId, elementPreviewMode)}
+        ${renderTreeNode(root, byParent, expandedIdSet, entitySummaryByNodeId, showAssignee, entityRowsByNodeId, elementPreviewMode, readonly, selectedId)}
       </div>
     `;
   });

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@qnote/q-ai-note",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "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-server": "dist/cli-server.js"
+    "q-ai-note-server": "dist/cli.js",
+    "q-ai-note-my-server": "dist/cli.js"
   },
   "files": [
     "dist/**/*",