aifastdb-devplan 1.5.0 → 1.6.1

package/dist/visualize/template.js

@@ -338,8 +338,50 @@ function getVisualizationHTML(projectName) {
     .docs-content-body::-webkit-scrollbar { width: 6px; }
     .docs-content-body::-webkit-scrollbar-track { background: transparent; }
     .docs-content-body::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
-    .docs-content-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: #4b5563; font-size: 14px; flex-direction: column; gap: 8px; }
+    .docs-content-empty { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
     .docs-content-empty .empty-icon { font-size: 48px; opacity: 0.4; }
+
+    /* RAG Chat UI */
+    .docs-chat-container { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+    .docs-chat-messages { flex: 1; overflow-y: auto; padding: 20px 28px; scrollbar-width: thin; scrollbar-color: #374151 transparent; }
+    .docs-chat-messages::-webkit-scrollbar { width: 6px; }
+    .docs-chat-messages::-webkit-scrollbar-track { background: transparent; }
+    .docs-chat-messages::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
+    .docs-chat-welcome { text-align: center; padding: 60px 40px 30px; color: #6b7280; }
+    .docs-chat-welcome .welcome-icon { font-size: 48px; opacity: 0.4; margin-bottom: 12px; }
+    .docs-chat-welcome .welcome-title { font-size: 16px; font-weight: 600; color: #9ca3af; margin-bottom: 6px; }
+    .docs-chat-welcome .welcome-desc { font-size: 13px; color: #6b7280; line-height: 1.6; }
+    .docs-chat-welcome .welcome-tips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
+    .docs-chat-welcome .tip-chip { font-size: 12px; padding: 6px 14px; border-radius: 16px; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); color: #a5b4fc; cursor: pointer; transition: all 0.15s; }
+    .docs-chat-welcome .tip-chip:hover { background: rgba(99,102,241,0.2); border-color: rgba(99,102,241,0.4); }
+
+    .chat-bubble { margin-bottom: 16px; max-width: 90%; animation: chatFadeIn 0.25s ease; }
+    .chat-bubble.user { margin-left: auto; }
+    .chat-bubble.assistant { margin-right: auto; }
+    .chat-bubble-inner { padding: 10px 16px; border-radius: 12px; font-size: 13px; line-height: 1.6; }
+    .chat-bubble.user .chat-bubble-inner { background: rgba(99,102,241,0.2); color: #c7d2fe; border-bottom-right-radius: 4px; }
+    .chat-bubble.assistant .chat-bubble-inner { background: #1f2937; color: #d1d5db; border: 1px solid #374151; border-bottom-left-radius: 4px; }
+    .chat-result-card { margin-top: 8px; padding: 10px 14px; border-radius: 8px; background: rgba(55,65,81,0.4); border: 1px solid #374151; cursor: pointer; transition: all 0.15s; }
+    .chat-result-card:hover { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.3); }
+    .chat-result-title { font-size: 13px; font-weight: 600; color: #a5b4fc; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
+    .chat-result-score { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(16,185,129,0.15); color: #6ee7b7; font-weight: 500; }
+    .chat-result-snippet { font-size: 11px; color: #9ca3af; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
+    .chat-result-meta { font-size: 10px; color: #6b7280; margin-top: 4px; display: flex; gap: 8px; }
+    .chat-no-result { color: #6b7280; font-size: 12px; margin-top: 8px; }
+    .chat-typing { display: flex; gap: 4px; padding: 12px 16px; }
+    .chat-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: #6b7280; animation: chatTyping 1.2s infinite; }
+    .chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
+    .chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }
+    @keyframes chatTyping { 0%,60%,100% { opacity: 0.3; transform: scale(0.8); } 30% { opacity: 1; transform: scale(1); } }
+    @keyframes chatFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+
+    .docs-chat-input-wrap { padding: 12px 20px 16px; border-top: 1px solid #374151; flex-shrink: 0; display: flex; gap: 8px; align-items: flex-end; background: #111827; }
+    .docs-chat-input { flex: 1; background: #1f2937; border: 1px solid #374151; border-radius: 12px; padding: 10px 16px; color: #e5e7eb; font-size: 13px; outline: none; resize: none; min-height: 20px; max-height: 120px; line-height: 1.5; font-family: inherit; transition: border-color 0.2s; }
+    .docs-chat-input:focus { border-color: #6366f1; }
+    .docs-chat-input::placeholder { color: #6b7280; }
+    .docs-chat-send { width: 36px; height: 36px; border-radius: 10px; border: none; background: #6366f1; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; font-size: 16px; }
+    .docs-chat-send:hover { background: #818cf8; }
+    .docs-chat-send:disabled { background: #374151; color: #6b7280; cursor: not-allowed; }
     .docs-related { margin-top: 20px; border-top: 1px solid #374151; padding-top: 16px; }
     .docs-related-title { font-size: 13px; font-weight: 600; color: #9ca3af; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
     .docs-related-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; color: #d1d5db; }
@@ -498,18 +540,45 @@ function getVisualizationHTML(projectName) {
             <div style="text-align:center;padding:40px;color:#6b7280;font-size:12px;">加载中...</div>
           </div>
         </div>
-        <!-- Right: Document Content -->
+        <!-- Right: Document Content / Chat -->
         <div class="docs-content">
+          <!-- RAG Chat (default view) -->
           <div class="docs-content-empty" id="docsEmptyState">
-            <div class="empty-icon">📄</div>
-            <div>选择左侧文档查看内容</div>
+            <div class="docs-chat-container">
+              <div class="docs-chat-messages" id="docsChatMessages">
+                <div class="docs-chat-welcome" id="docsChatWelcome">
+                  <div class="welcome-icon">🔍</div>
+                  <div class="welcome-title">文档智能搜索</div>
+                  <div class="welcome-desc">输入问题，AI 将在文档库中搜索相关内容<br>支持语义搜索，理解你的意图而非仅匹配关键词</div>
+                  <div class="welcome-tips">
+                    <span class="tip-chip" onclick="chatSendTip(this)">有多少篇文档？</span>
+                    <span class="tip-chip" onclick="chatSendTip(this)">项目进度</span>
+                    <span class="tip-chip" onclick="chatSendTip(this)">有哪些阶段？</span>
+                    <span class="tip-chip" onclick="chatSendTip(this)">最近更新</span>
+                    <span class="tip-chip" onclick="chatSendTip(this)">帮助</span>
+                  </div>
+                  <div class="welcome-tips" style="margin-top:8px;">
+                    <span class="tip-chip" onclick="chatSendTip(this)">向量搜索</span>
+                    <span class="tip-chip" onclick="chatSendTip(this)">aifastdb vs LanceDB</span>
+                    <span class="tip-chip" onclick="chatSendTip(this)">GPU 加速</span>
+                    <span class="tip-chip" onclick="chatSendTip(this)">全文搜索</span>
+                  </div>
+                </div>
+              </div>
+              <div class="docs-chat-input-wrap">
+                <textarea class="docs-chat-input" id="docsChatInput" placeholder="发送消息搜索文档数据库..." rows="1" onkeydown="chatInputKeydown(event)" oninput="chatAutoResize(this)"></textarea>
+                <button class="docs-chat-send" id="docsChatSend" onclick="chatSend()" title="发送">↑</button>
+              </div>
+            </div>
           </div>
+          <!-- Document Content View -->
           <div id="docsContentView" style="display:none;flex-direction:column;flex:1;min-height:0;">
             <div class="docs-content-header">
-              <div>
+              <div style="flex:1;min-width:0;">
                 <div class="docs-content-title" id="docsContentTitle">文档标题</div>
                 <div class="docs-content-meta" id="docsContentMeta"></div>
               </div>
+              <button style="flex-shrink:0;background:none;border:1px solid #374151;border-radius:6px;padding:4px 10px;color:#9ca3af;font-size:11px;cursor:pointer;transition:all 0.15s;" onmouseover="this.style.borderColor='#6366f1';this.style.color='#a5b4fc'" onmouseout="this.style.borderColor='#374151';this.style.color='#9ca3af'" onclick="backToChat()" title="返回对话搜索">← 返回搜索</button>
             </div>
             <div class="docs-content-body" id="docsContentBody">
               <div class="doc-content" id="docsContentInner"></div>
@@ -623,7 +692,103 @@ function log(msg, ok) {
   dbg.innerHTML = (ok ? '<span class="ok">✓</span> ' : '<span class="err">✗</span> ') + msg;
 }
 
-// ========== 动态加载 vis-network ==========
+// ========== 渲染引擎选择: GraphCanvas (高性能) vs vis-network (兼容) ==========
+// URL 参数 ?renderer=vis 可强制使用 vis-network; 默认使用 GraphCanvas
+var RENDERER_ENGINE = 'auto'; // 'auto' | 'graphcanvas' | 'vis'
+(function() {
+  var params = new URLSearchParams(window.location.search);
+  var r = params.get('renderer');
+  if (r === 'vis') RENDERER_ENGINE = 'vis';
+  else if (r === 'graphcanvas' || r === 'gc') RENDERER_ENGINE = 'graphcanvas';
+})();
+var USE_GRAPH_CANVAS = false; // set after engine loads
+
+// ========== SimpleDataSet — vis.DataSet shim for GraphCanvas mode ==========
+function SimpleDataSet(items) {
+  this._data = {};
+  this._ids = [];
+  if (items) {
+    for (var i = 0; i < items.length; i++) {
+      var item = items[i];
+      this._data[item.id] = item;
+      this._ids.push(item.id);
+    }
+  }
+}
+SimpleDataSet.prototype.get = function(id) {
+  if (id === undefined || id === null) {
+    // Return all items as array
+    var result = [];
+    for (var i = 0; i < this._ids.length; i++) result.push(this._data[this._ids[i]]);
+    return result;
+  }
+  return this._data[id] || null;
+};
+SimpleDataSet.prototype.getIds = function() {
+  return this._ids.slice();
+};
+SimpleDataSet.prototype.forEach = function(callback) {
+  for (var i = 0; i < this._ids.length; i++) {
+    callback(this._data[this._ids[i]], this._ids[i]);
+  }
+};
+SimpleDataSet.prototype.update = function(itemOrArray) {
+  var items = Array.isArray(itemOrArray) ? itemOrArray : [itemOrArray];
+  for (var i = 0; i < items.length; i++) {
+    var item = items[i];
+    if (this._data[item.id]) {
+      for (var key in item) {
+        if (item.hasOwnProperty(key)) this._data[item.id][key] = item[key];
+      }
+    }
+  }
+};
+SimpleDataSet.prototype.add = function(itemOrArray) {
+  var items = Array.isArray(itemOrArray) ? itemOrArray : [itemOrArray];
+  for (var i = 0; i < items.length; i++) {
+    var item = items[i];
+    this._data[item.id] = item;
+    if (this._ids.indexOf(item.id) === -1) this._ids.push(item.id);
+  }
+};
+SimpleDataSet.prototype.remove = function(idOrArray) {
+  var ids = Array.isArray(idOrArray) ? idOrArray : [idOrArray];
+  for (var i = 0; i < ids.length; i++) {
+    var id = typeof ids[i] === 'object' ? ids[i].id : ids[i];
+    delete this._data[id];
+    var idx = this._ids.indexOf(id);
+    if (idx >= 0) this._ids.splice(idx, 1);
+  }
+};
+// ========== 动态加载渲染引擎 ==========
+function loadRenderEngine() {
+  if (RENDERER_ENGINE === 'vis') {
+    log('强制使用 vis-network 渲染器 (?renderer=vis)', true);
+    loadVisNetwork(0);
+    return;
+  }
+
+  // Try loading GraphCanvas first (from local server)
+  log('正在加载 GraphCanvas 高性能渲染引擎...', true);
+  var s = document.createElement('script');
+  s.src = '/graph-canvas.js';
+  s.onload = function() {
+    if (typeof GraphCanvas !== 'undefined' && typeof DevPlanGraph !== 'undefined') {
+      log('GraphCanvas 引擎加载成功 ✓', true);
+      USE_GRAPH_CANVAS = true;
+      startApp();
+    } else {
+      log('GraphCanvas 加载但对象不完整, 回退到 vis-network', false);
+      loadVisNetwork(0);
+    }
+  };
+  s.onerror = function() {
+    log('GraphCanvas 加载失败, 回退到 vis-network', false);
+    loadVisNetwork(0);
+  };
+  document.head.appendChild(s);
+}
+
 var VIS_URLS = [
   'https://unpkg.com/vis-network@9.1.9/standalone/umd/vis-network.min.js',
   'https://cdn.jsdelivr.net/npm/vis-network@9.1.9/standalone/umd/vis-network.min.js',
@@ -633,16 +798,17 @@ var VIS_URLS = [
 function loadVisNetwork(index) {
   if (index >= VIS_URLS.length) {
     log('所有 CDN 均加载失败，请检查网络连接', false);
-    document.getElementById('loading').innerHTML = '<div style="text-align:center"><div style="font-size:48px;margin-bottom:16px;">⚠️</div><p style="color:#f87171;">vis-network 库加载失败</p><p style="color:#9ca3af;margin-top:8px;font-size:13px;">所有 CDN 源均不可用，请检查网络连接</p><button class="refresh-btn" onclick="location.reload()" style="margin-top:12px;">刷新页面</button></div>';
+    document.getElementById('loading').innerHTML = '<div style="text-align:center"><div style="font-size:48px;margin-bottom:16px;">⚠️</div><p style="color:#f87171;">渲染引擎加载失败</p><p style="color:#9ca3af;margin-top:8px;font-size:13px;">GraphCanvas 和 vis-network CDN 均不可用</p><button class="refresh-btn" onclick="location.reload()" style="margin-top:12px;">刷新页面</button></div>';
     return;
   }
   var url = VIS_URLS[index];
-  log('尝试加载 CDN #' + (index+1) + ': ' + url.split('/')[2], true);
+  log('尝试加载 vis-network CDN #' + (index+1) + ': ' + url.split('/')[2], true);
   var s = document.createElement('script');
   s.src = url;
   s.onload = function() {
     if (typeof vis !== 'undefined' && vis.Network && vis.DataSet) {
       log('vis-network 加载成功 (CDN #' + (index+1) + ')', true);
+      USE_GRAPH_CANVAS = false;
       startApp();
     } else {
       log('CDN #' + (index+1) + ' 加载但 vis 对象不完整, 尝试下一个', false);
@@ -1175,6 +1341,10 @@ function edgeStyle(edge) {
 }
 
 // ========== Data Loading ==========
+// ── Phase-8C: Chunked loading configuration ──
+var CHUNK_SIZE = 5000;       // nodes per page
+var CHUNK_THRESHOLD = 3000;  // use chunked loading if total > this
+
 function loadData() {
   document.getElementById('loading').style.display = 'flex';
   log('正在获取图谱数据...', true);
@@ -1191,13 +1361,206 @@ function loadData() {
     allEdges = graphRes.edges || [];
     log('数据获取成功: ' + allNodes.length + ' 节点, ' + allEdges.length + ' 边', true);
     renderStats(progressRes, graphRes);
-    renderGraph();
+
+    // Phase-8C: If data is large and GraphCanvas is active, use chunked loading
+    if (USE_GRAPH_CANVAS && allNodes.length > CHUNK_THRESHOLD) {
+      renderGraphChunked();
+    } else {
+      renderGraph();
+    }
   }).catch(function(err) {
     log('数据获取失败: ' + err.message, false);
     document.getElementById('loading').innerHTML = '<div style="text-align:center"><div style="font-size:48px;margin-bottom:16px;">⚠️</div><p style="color:#f87171;">数据加载失败: ' + err.message + '</p><button class="refresh-btn" onclick="loadData()" style="margin-top:12px;">重试</button></div>';
   });
 }
 
+/**
+ * Phase-8C T8C.3+T8C.4: Chunked progressive rendering for large datasets.
+ * Renders the first CHUNK_SIZE nodes immediately, then loads remaining chunks
+ * in the background using addNodes/addEdges incremental API.
+ */
+function renderGraphChunked() {
+  try {
+    var container = document.getElementById('graph');
+    var rect = container.getBoundingClientRect();
+    if (rect.height < 50) {
+      container.style.height = (window.innerHeight - 140) + 'px';
+    }
+
+    // Sort nodes: center-priority (closest to centroid first)
+    var cx = 0, cy = 0;
+    for (var i = 0; i < allNodes.length; i++) {
+      cx += (allNodes[i].x || 0);
+      cy += (allNodes[i].y || 0);
+    }
+    if (allNodes.length > 0) { cx /= allNodes.length; cy /= allNodes.length; }
+    var sortedNodes = allNodes.slice().sort(function(a, b) {
+      var da = Math.pow(((a.x||0) - cx), 2) + Math.pow(((a.y||0) - cy), 2);
+      var db = Math.pow(((b.x||0) - cx), 2) + Math.pow(((b.y||0) - cy), 2);
+      return da - db;
+    });
+
+    // First chunk
+    var firstChunkNodes = sortedNodes.slice(0, CHUNK_SIZE);
+    var firstChunkIds = {};
+    for (var i = 0; i < firstChunkNodes.length; i++) firstChunkIds[firstChunkNodes[i].id] = true;
+    var firstChunkEdges = [];
+    for (var i = 0; i < allEdges.length; i++) {
+      if (firstChunkIds[allEdges[i].from] && firstChunkIds[allEdges[i].to]) {
+        firstChunkEdges.push(allEdges[i]);
+      }
+    }
+
+    // Prepare first chunk visible nodes/edges (same transform as renderGraph)
+    var visibleNodes = [];
+    for (var i = 0; i < firstChunkNodes.length; i++) {
+      var n = firstChunkNodes[i];
+      if (hiddenTypes[n.type]) continue;
+      if (isNodeCollapsedByParent(n.id)) continue;
+      var deg = getNodeDegree(n);
+      var s = nodeStyle(n, deg);
+      visibleNodes.push({
+        id: n.id, label: n.label, _origLabel: n.label,
+        title: n.label + ' (连接: ' + deg + ')',
+        shape: s.shape, size: s.size, color: s.color, font: s.font,
+        borderWidth: s.borderWidth, _type: n.type,
+        _props: n.properties || {}, _isParentDoc: isParentDocNode(n),
+      });
+    }
+    var visibleIds = {};
+    for (var i = 0; i < visibleNodes.length; i++) visibleIds[visibleNodes[i].id] = true;
+    var visibleEdges = [];
+    for (var i = 0; i < firstChunkEdges.length; i++) {
+      var e = firstChunkEdges[i];
+      if (!visibleIds[e.from] || !visibleIds[e.to]) continue;
+      var es = edgeStyle(e);
+      visibleEdges.push({
+        id: 'e' + i, from: e.from, to: e.to,
+        width: es.width, _origWidth: es.width,
+        color: es.color, dashes: es.dashes, arrows: es.arrows,
+        _label: e.label, _highlightColor: es._highlightColor || '#9ca3af',
+      });
+    }
+
+    log('分块加载: 首批 ' + visibleNodes.length + '/' + allNodes.length + ' 节点', true);
+
+    if (network) { network.destroy(); network = null; }
+
+    // Create network with first chunk
+    nodesDataSet = new SimpleDataSet(visibleNodes);
+    edgesDataSet = new SimpleDataSet(visibleEdges);
+
+    var networkOptions = {
+      nodes: { borderWidth: 2, shadow: { enabled: true, color: 'rgba(0,0,0,0.3)', size: 5, x: 0, y: 2 } },
+      edges: { smooth: { enabled: true, type: 'continuous', roundness: 0.5 }, shadow: false },
+      physics: { enabled: true, solver: 'forceAtlas2Based',
+        forceAtlas2Based: { gravitationalConstant: -80, centralGravity: 0.015, springLength: 150, springConstant: 0.05, damping: 0.4, avoidOverlap: 0.8 },
+        stabilization: { enabled: true, iterations: 200, updateInterval: 25 }
+      },
+      interaction: { hover: true, tooltipDelay: 100, navigationButtons: false, keyboard: false, zoomView: true, dragView: true },
+      layout: { improvedLayout: false, hierarchical: false }
+    };
+
+    network = new DevPlanGraph(container, { nodes: visibleNodes, edges: visibleEdges }, networkOptions);
+
+    // Show loading indicator with progress
+    document.getElementById('loading').style.display = 'none';
+    log('首批数据已渲染，后台加载剩余 ' + (sortedNodes.length - CHUNK_SIZE) + ' 节点...', true);
+
+    // ── Progressive background loading ──
+    var loadedNodeIds = Object.assign({}, firstChunkIds);
+    var chunkIndex = 1;
+    var totalChunks = Math.ceil(sortedNodes.length / CHUNK_SIZE);
+
+    function loadNextChunk() {
+      var start = chunkIndex * CHUNK_SIZE;
+      var end = Math.min(start + CHUNK_SIZE, sortedNodes.length);
+      if (start >= sortedNodes.length) {
+        log('✅ 全部数据加载完成: ' + allNodes.length + ' 节点, ' + allEdges.length + ' 边', true);
+        return;
+      }
+
+      var chunkNodes = [];
+      for (var i = start; i < end; i++) {
+        var n = sortedNodes[i];
+        if (hiddenTypes[n.type]) continue;
+        if (isNodeCollapsedByParent(n.id)) continue;
+        var deg = getNodeDegree(n);
+        var s = nodeStyle(n, deg);
+        chunkNodes.push({
+          id: n.id, label: n.label, _origLabel: n.label,
+          title: n.label, shape: s.shape, size: s.size,
+          color: s.color, font: s.font, borderWidth: s.borderWidth,
+          _type: n.type, _props: n.properties || {},
+          x: n.x || 0, y: n.y || 0,
+        });
+        loadedNodeIds[n.id] = true;
+      }
+
+      // Edges for this chunk (both endpoints must be loaded)
+      var chunkEdges = [];
+      for (var i = 0; i < allEdges.length; i++) {
+        var e = allEdges[i];
+        if (loadedNodeIds[e.from] && loadedNodeIds[e.to]) {
+          var es = edgeStyle(e);
+          chunkEdges.push({
+            id: 'ec' + chunkIndex + '_' + i, from: e.from, to: e.to,
+            width: es.width, _origWidth: es.width,
+            color: es.color, dashes: es.dashes, arrows: es.arrows,
+            _label: e.label, _highlightColor: es._highlightColor || '#9ca3af',
+          });
+        }
+      }
+
+      // Use incremental API (Phase-8C T8C.5)
+      if (network && network._gc) {
+        network._gc.addNodes(chunkNodes);
+        network._gc.addEdges(chunkEdges);
+      }
+
+      chunkIndex++;
+      var pct = Math.min(100, Math.round(chunkIndex / totalChunks * 100));
+      log('加载进度: ' + pct + '% (' + (chunkIndex * CHUNK_SIZE) + '/' + sortedNodes.length + ')', true);
+
+      // Schedule next chunk (yield to main thread for rendering)
+      if (chunkIndex < totalChunks) {
+        setTimeout(loadNextChunk, 50);
+      } else {
+        log('✅ 全部数据加载完成: ' + Object.keys(loadedNodeIds).length + ' 节点', true);
+      }
+    }
+
+    // Start loading remaining chunks after first render stabilizes
+    network.on('stabilizationIterationsDone', function() {
+      network.setOptions({ physics: { enabled: false } });
+      log('首批渲染稳定，开始后台增量加载...', true);
+      setTimeout(loadNextChunk, 100);
+    });
+
+    // Wire up click handler (same as renderGraph)
+    network.on('click', function(params) {
+      if (params.pointer && params.pointer.canvas) {
+        var hitNodeId = hitTestDocToggleBtn(params.pointer.canvas.x, params.pointer.canvas.y);
+        if (hitNodeId) { toggleDocNodeExpand(hitNodeId); return; }
+      }
+      if (params.nodes.length > 0) {
+        panelHistory = [];
+        currentPanelNodeId = null;
+        highlightConnectedEdges(params.nodes[0]);
+        showPanel(params.nodes[0]);
+      } else {
+        resetAllEdgeColors();
+        closePanel();
+      }
+    });
+
+  } catch (e) {
+    log('分块渲染失败: ' + e.message, false);
+    log('回退到标准渲染模式', true);
+    renderGraph();
+  }
+}
+
 function renderStats(progress, graph) {
   var bar = document.getElementById('statsBar');
   var pct = progress.overallPercent || 0;
@@ -1265,15 +1628,20 @@ function renderGraph() {
 
     log('可见节点: ' + visibleNodes.length + ', 可见边: ' + visibleEdges.length, true);
 
-    nodesDataSet = new vis.DataSet(visibleNodes);
-    edgesDataSet = new vis.DataSet(visibleEdges);
+    if (USE_GRAPH_CANVAS) {
+      nodesDataSet = new SimpleDataSet(visibleNodes);
+      edgesDataSet = new SimpleDataSet(visibleEdges);
+    } else {
+      nodesDataSet = new vis.DataSet(visibleNodes);
+      edgesDataSet = new vis.DataSet(visibleEdges);
+    }
 
     if (network) {
       network.destroy();
       network = null;
     }
 
-    network = new vis.Network(container, { nodes: nodesDataSet, edges: edgesDataSet }, {
+    var networkOptions = {
       nodes: {
         borderWidth: 2,
         shadow: { enabled: true, color: 'rgba(0,0,0,0.3)', size: 5, x: 0, y: 2 }
@@ -1307,7 +1675,19 @@ function renderGraph() {
         improvedLayout: false,
         hierarchical: false
       }
-    });
+    };
+
+    if (USE_GRAPH_CANVAS) {
+      network = new DevPlanGraph(container,
+        { nodes: visibleNodes, edges: visibleEdges },
+        networkOptions
+      );
+    } else {
+      network = new vis.Network(container,
+        { nodes: nodesDataSet, edges: edgesDataSet },
+        networkOptions
+      );
+    }
 
     log('Network 实例已创建, 等待物理稳定化...', true);
 
@@ -1804,6 +2184,18 @@ function fmtTime(ts) {
   return time;
 }
 
+/** 文档列表用的短日期格式：MM-DD 或 YYYY-MM-DD */
+function fmtDateShort(ts) {
+  if (!ts) return '';
+  var d = new Date(ts);
+  var m = String(d.getMonth() + 1).padStart(2, '0');
+  var day = String(d.getDate()).padStart(2, '0');
+  if (d.getFullYear() !== new Date().getFullYear()) {
+    return d.getFullYear() + '-' + m + '-' + day;
+  }
+  return m + '-' + day;
+}
+
 // ========== Phase Expand (Stats page) ==========
 function togglePhaseExpand(el) {
   var wrap = el.closest('.phase-item-wrap');
@@ -2345,7 +2737,11 @@ function updateNodeStyles() {
 
 // ========== App Start ==========
 function startApp() {
-  log('vis-network 就绪, 开始加载数据...', true);
+  if (USE_GRAPH_CANVAS) {
+    log('GraphCanvas 引擎就绪, 开始加载数据...', true);
+  } else {
+    log('vis-network 就绪, 开始加载数据...', true);
+  }
   loadData();
 }
 
@@ -2434,6 +2830,39 @@ function renderDocsList(docs) {
     groups[sec].push(d);
   }
 
+  // 每组内按 updatedAt 倒序排列（最新的在上方）
+  for (var gi = 0; gi < groupOrder.length; gi++) {
+    groups[groupOrder[gi]].sort(function(a, b) {
+      var ta = a.updatedAt || 0;
+      var tb = b.updatedAt || 0;
+      return tb - ta; // 降序
+    });
+  }
+
+  // 子文档也按 updatedAt 倒序
+  var parentKeys = Object.keys(childrenMap);
+  for (var pi = 0; pi < parentKeys.length; pi++) {
+    childrenMap[parentKeys[pi]].sort(function(a, b) {
+      var ta = a.updatedAt || 0;
+      var tb = b.updatedAt || 0;
+      return tb - ta;
+    });
+  }
+
+  // 分组按最新文档日期排序（最新的分组在上）
+  groupOrder.sort(function(secA, secB) {
+    var maxA = 0, maxB = 0;
+    var itemsA = groups[secA] || [];
+    var itemsB = groups[secB] || [];
+    for (var k = 0; k < itemsA.length; k++) {
+      if ((itemsA[k].updatedAt || 0) > maxA) maxA = itemsA[k].updatedAt || 0;
+    }
+    for (var k = 0; k < itemsB.length; k++) {
+      if ((itemsB[k].updatedAt || 0) > maxB) maxB = itemsB[k].updatedAt || 0;
+    }
+    return maxB - maxA;
+  });
+
   if (groupOrder.length === 0) {
     list.innerHTML = '<div style="text-align:center;padding:40px;color:#6b7280;font-size:12px;">暂无文档</div>';
     return;
@@ -2492,8 +2921,10 @@ function renderDocItemWithChildren(item, childrenMap, secIcon) {
   html += '<span class="docs-item-text" title="' + escHtml(item.title) + '">' + escHtml(item.title) + '</span>';
   if (hasChildren) {
     html += '<span class="docs-item-sub" style="color:#818cf8;">' + children.length + ' 子文档</span>';
-  } else if (item.subSection) {
-    html += '<span class="docs-item-sub">' + escHtml(item.subSection) + '</span>';
+  }
+  // 右侧显示日期（替代原来的 subSection 标签）
+  if (item.updatedAt) {
+    html += '<span class="docs-item-sub">' + fmtDateShort(item.updatedAt) + '</span>';
   }
   html += '</div>';
 
@@ -2694,6 +3125,161 @@ function renderDocContent(doc, section, subSection) {
   document.getElementById('docsContentInner').innerHTML = contentHtml;
 }
 
+// ========== RAG Chat ==========
+var chatHistory = []; // [{role:'user'|'assistant', content:string, results?:array}]
+var chatBusy = false;
+
+/** 点击推荐话题 */
+function chatSendTip(el) {
+  var input = document.getElementById('docsChatInput');
+  if (input) { input.value = el.textContent; chatSend(); }
+}
+
+/** Enter 发送（Shift+Enter 换行） */
+function chatInputKeydown(e) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    chatSend();
+  }
+}
+
+/** 自动调整 textarea 高度 */
+function chatAutoResize(el) {
+  el.style.height = 'auto';
+  el.style.height = Math.min(el.scrollHeight, 120) + 'px';
+}
+
+/** 发送消息并搜索 */
+function chatSend() {
+  if (chatBusy) return;
+  var input = document.getElementById('docsChatInput');
+  var query = (input.value || '').trim();
+  if (!query) return;
+
+  // 隐藏欢迎信息
+  var welcome = document.getElementById('docsChatWelcome');
+  if (welcome) welcome.style.display = 'none';
+
+  // 添加用户消息
+  chatHistory.push({ role: 'user', content: query });
+  chatRenderBubble('user', query);
+  input.value = '';
+  chatAutoResize(input);
+
+  // 显示加载动画
+  chatBusy = true;
+  document.getElementById('docsChatSend').disabled = true;
+  var loadingId = 'chat-loading-' + Date.now();
+  var msgBox = document.getElementById('docsChatMessages');
+  var loadingHtml = '<div class="chat-bubble assistant" id="' + loadingId + '"><div class="chat-bubble-inner"><div class="chat-typing"><div class="chat-typing-dot"></div><div class="chat-typing-dot"></div><div class="chat-typing-dot"></div></div></div></div>';
+  msgBox.insertAdjacentHTML('beforeend', loadingHtml);
+  msgBox.scrollTop = msgBox.scrollHeight;
+
+  // 调用搜索 API
+  fetch('/api/chat', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ query: query, limit: 5 })
+  }).then(function(r) { return r.json(); }).then(function(data) {
+    // 移除加载动画
+    var loadEl = document.getElementById(loadingId);
+    if (loadEl) loadEl.remove();
+
+    var replyHtml = '';
+
+    if (data.type === 'meta') {
+      // ---- 元信息直接回答 ----
+      replyHtml = chatFormatMarkdown(data.answer || '');
+    } else {
+      // ---- 文档搜索结果 ----
+      var results = data.results || [];
+      if (results.length > 0) {
+        replyHtml += '<div style="margin-bottom:8px;color:#9ca3af;font-size:12px;">找到 <strong style="color:#a5b4fc;">' + results.length + '</strong> 篇相关文档';
+        if (data.mode === 'hybrid') replyHtml += ' <span style="font-size:10px;color:#6b7280;">(语义+字面混合)</span>';
+        else if (data.mode === 'semantic') replyHtml += ' <span style="font-size:10px;color:#6b7280;">(语义搜索)</span>';
+        else replyHtml += ' <span style="font-size:10px;color:#6b7280;">(字面搜索)</span>';
+        replyHtml += '</div>';
+
+        for (var i = 0; i < results.length; i++) {
+          var r = results[i];
+          var docKey = r.section + (r.subSection ? '|' + r.subSection : '');
+          replyHtml += '<div class="chat-result-card" onclick="chatOpenDoc(\\x27' + docKey.replace(/'/g, "\\\\'") + '\\x27)">';
+          replyHtml += '<div class="chat-result-title">';
+          replyHtml += '<span>📄 ' + escHtml(r.title) + '</span>';
+          if (r.score != null) replyHtml += '<span class="chat-result-score">' + r.score.toFixed(3) + '</span>';
+          replyHtml += '</div>';
+          if (r.snippet) replyHtml += '<div class="chat-result-snippet">' + escHtml(r.snippet) + '</div>';
+          var metaParts = [];
+          if (r.section) metaParts.push(r.section);
+          if (r.updatedAt) metaParts.push(fmtDateShort(r.updatedAt));
+          if (r.version) metaParts.push('v' + r.version);
+          if (metaParts.length > 0) replyHtml += '<div class="chat-result-meta">' + metaParts.join(' · ') + '</div>';
+          replyHtml += '</div>';
+        }
+      } else {
+        replyHtml += '<div class="chat-no-result">🤔 未找到高度相关的文档。</div>';
+        replyHtml += '<div style="margin-top:8px;font-size:12px;color:#6b7280;line-height:1.6;">';
+        replyHtml += '建议：<br>';
+        replyHtml += '• 尝试使用更具体的 <strong>关键词</strong>（如 "向量搜索"、"GPU"、"LanceDB"）<br>';
+        replyHtml += '• 问项目统计问题（如 "有多少篇文档"、"项目进度"、"有哪些阶段"）<br>';
+        replyHtml += '• 输入 <strong>"帮助"</strong> 查看我的全部能力';
+        replyHtml += '</div>';
+      }
+    }
+
+    chatHistory.push({ role: 'assistant', content: replyHtml, results: data.results || [] });
+    chatRenderBubble('assistant', replyHtml, true);
+
+  }).catch(function(err) {
+    var loadEl = document.getElementById(loadingId);
+    if (loadEl) loadEl.remove();
+    chatRenderBubble('assistant', '<span style="color:#f87171;">搜索出错: ' + escHtml(err.message) + '</span>', true);
+  }).finally(function() {
+    chatBusy = false;
+    document.getElementById('docsChatSend').disabled = false;
+    document.getElementById('docsChatInput').focus();
+  });
+}
+
+/** 简单 Markdown → HTML 转换（用于元信息回答） */
+function chatFormatMarkdown(text) {
+  return text
+    .replace(/\\*\\*(.+?)\\*\\*/g, '<strong style="color:#a5b4fc;">$1</strong>')
+    .replace(/\\n/g, '<br>');
+}
+
+/** 渲染一条消息气泡 */
+function chatRenderBubble(role, content, isHtml) {
+  var msgBox = document.getElementById('docsChatMessages');
+  var bubble = document.createElement('div');
+  bubble.className = 'chat-bubble ' + role;
+  var inner = document.createElement('div');
+  inner.className = 'chat-bubble-inner';
+  if (isHtml) { inner.innerHTML = content; }
+  else { inner.textContent = content; }
+  bubble.appendChild(inner);
+  msgBox.appendChild(bubble);
+  msgBox.scrollTop = msgBox.scrollHeight;
+}
+
+/** 从聊天结果中点击打开文档 */
+function chatOpenDoc(docKey) {
+  selectDoc(docKey);
+}
+
+/** 返回聊天视图 */
+function backToChat() {
+  document.getElementById('docsContentView').style.display = 'none';
+  document.getElementById('docsEmptyState').style.display = 'flex';
+  // 取消左侧选中
+  currentDocKey = '';
+  var items = document.querySelectorAll('.docs-item');
+  for (var i = 0; i < items.length; i++) items[i].classList.remove('active');
+  // 聚焦输入框
+  var input = document.getElementById('docsChatInput');
+  if (input) input.focus();
+}
+
 // ========== Stats Dashboard ==========
 var statsLoaded = false;
 
@@ -2910,8 +3496,8 @@ function phaseItem(task, status, icon) {
   return h;
 }
 
-// ========== Init: 动态加载 vis-network ==========
-loadVisNetwork(0);
+// ========== Init: 动态加载渲染引擎 ==========
+loadRenderEngine();
 </script>
 </body>
 </html>`;