Savestate: Final fixes for detective board nodes, lines, auto-scroll centering and translations

index.html

@@ -65,7 +65,7 @@
 </head>
 <body class="dark-theme in-chat-view" data-bg-style="fluid-dark">
   
-  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.8.179</div>
+  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.8.180</div>
     
   <!-- SVG Filters for Liquid Glass Refraction -->
   <svg width="0" height="0" style="position: absolute; pointer-events: none;">

src/ai/research-agent.js

@@ -127,7 +127,7 @@ export class ResearchAgent {
       for (let i = 0; i < queries.length; i++) {
         try {
           const queryLabel = queries[i].length > 40 ? queries[i].substring(0, 40) + '...' : queries[i];
-          onGraphEvent({ type: 'node', id: `q_${iteration}_${i}`, label: `Query: ${queryLabel}`, group: 'query' });
+          onGraphEvent({ type: 'node', id: `q_${iteration}_${i}`, label: `Suchanfrage: ${queryLabel}`, group: 'query' });
           onGraphEvent({ type: 'edge', from: 'root', to: `q_${iteration}_${i}` });
 
           const hits = await this.searchDDG(queries[i], 3);
@@ -158,8 +158,9 @@ export class ResearchAgent {
         newDocs.forEach(doc => {
           const srcInfo = uniqueSourcesMap.get(doc.url);
           if (srcInfo && srcInfo.queryId) {
-            const sourceLabel = srcInfo.title.length > 40 ? srcInfo.title.substring(0, 40) + '...' : srcInfo.title;
-            onGraphEvent({ type: 'node', id: `s_${doc.url}`, label: `Source: ${sourceLabel}`, group: 'source' });
+            let sourceLabel = srcInfo.title;
+            if (sourceLabel.length > 35) sourceLabel = sourceLabel.substring(0, 35) + '...';
+            onGraphEvent({ type: 'node', id: `s_${doc.url}`, label: `Quelle: ${sourceLabel}`, group: 'source' });
             onGraphEvent({ type: 'edge', from: srcInfo.queryId, to: `s_${doc.url}` });
           }
         });

src/ai/research-canvas.js

@@ -43,22 +43,11 @@ function scrollToLatestNode() {
     const node = nodesMap.get(latestNodeId);
     if (!node) return;
     
-    // Project the node's position to screen coordinates
-    const pos = projectToScreen(node.x, node.y);
-    
-    // Canvas origin is at the center of the screen.
-    // We want the node to appear in the lower third of the screen (e.g. at Y = innerHeight * 0.25 relative to center)
-    // So target Y on screen = +innerHeight * 0.25
-    const targetScreenY = window.innerHeight * 0.25;
-    const panScreenY = targetScreenY - pos.y;
-    
-    // Center horizontally
-    const panScreenX = -pos.x;
-    
-    // Convert screen pan to canvas pan
-    const canvasPan = unprojectFromScreen(panScreenX, panScreenY);
-    currentPanX = canvasPan.x;
-    currentPanY = canvasPan.y;
+    // We want the node to be directly in the center of the screen horizontally
+    // and slightly below the center vertically (e.g. 15% of screen height).
+    const targetOffset = unprojectFromScreen(0, window.innerHeight * 0.15); 
+    currentPanX = -node.x + targetOffset.x;
+    currentPanY = -node.y + targetOffset.y;
     
     canvas.style.transition = 'background-position 0.5s ease-out';
     panLayer.style.transition = 'transform 0.5s ease-out';
@@ -197,13 +186,14 @@ export function addNode(id, label, type = 'query') {
 
     // Spine equation to go straight down on screen: X must decrease as Y increases
     // We use currentY as the progression along the spine.
-    const maxSpread = window.innerWidth < 600 ? 150 : 350;
-    const randomOffset = (Math.random() - 0.5) * maxSpread;
-    
-    // The panLayer origin (0,0) is at the center of the screen.
-    const posX = -currentY + randomOffset;
-    const posY = originOffsetY + currentY + randomOffset;
-    
+    let posX, posY;
+    if (id === 'root') {
+        posX = 0; posY = originOffsetY;
+    } else {
+        // No zigzag, straight down the spine
+        posX = -currentY;
+        posY = originOffsetY + currentY;
+    }
     nodesMap.set(id, { x: posX, y: posY, type, label });
     currentY += (150 + Math.random() * 100);
     latestNodeId = id;
@@ -251,44 +241,44 @@ export function addNode(id, label, type = 'query') {
 }
 
 export function addEdge(fromId, toId) {
-    if (!svgLayer) return;
+    if (!nodesMap.has(fromId) || !nodesMap.has(toId)) return;
+
     const fromNode = nodesMap.get(fromId);
     const toNode = nodesMap.get(toId);
-    if (!fromNode || !toNode) return;
-
-    // Draw SVG Path
-    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    const edgeType = toNode.type === 'source' ? 'type-source' : 'type-query';
-    path.setAttribute('class', `db-edge ${edgeType}`);
     
-    // Create a bezier curve between the points
-    const controlY = fromNode.y + (toNode.y - fromNode.y) / 2;
-    // We add 5000 to X and Y because SVG is positioned at -5000px, -5000px
-    const sx = fromNode.x + 5000;
-    const sy = fromNode.y + 5000;
-    const ex = toNode.x + 5000;
-    const ey = toNode.y + 5000;
-    const cy = controlY + 5000;
+    const minX = Math.min(fromNode.x, toNode.x);
+    const minY = Math.min(fromNode.y, toNode.y);
+    const maxX = Math.max(fromNode.x, toNode.x);
+    const maxY = Math.max(fromNode.y, toNode.y);
     
-    const d = `M ${sx},${sy} C ${sx},${cy} ${ex},${cy} ${ex},${ey}`;
-    path.setAttribute('d', d);
+    const padding = 20;
+    const width = (maxX - minX) + padding * 2;
+    const height = (maxY - minY) + padding * 2;
     
-    // Add path to SVG
-    svgLayer.appendChild(path);
-
-    // Draw Glow Dot moving along the path
-    const dot = document.createElement('div');
-    dot.className = `db-glow-dot ${edgeType}`;
-    dot.style.offsetPath = `path('${d}')`;
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('class', 'db-edge-svg');
+    svg.style.position = 'absolute';
+    svg.style.left = `${minX - padding}px`;
+    svg.style.top = `${minY - padding}px`;
+    svg.style.width = `${width}px`;
+    svg.style.height = `${height}px`;
+    svg.style.pointerEvents = 'none';
+    svg.style.overflow = 'visible';
+    svg.style.zIndex = '1';
     
-    // Since offsetPath is relative to the SVG viewbox, and dot is in panLayer, we must position the dot
-    dot.style.left = '-5000px';
-    dot.style.top = '-5000px';
+    const sx = fromNode.x - (minX - padding);
+    const sy = fromNode.y - (minY - padding);
+    const ex = toNode.x - (minX - padding);
+    const ey = toNode.y - (minY - padding);
     
-    panLayer.appendChild(dot);
-
-    // Remove dot after animation to save DOM nodes
-    setTimeout(() => {
-        if (dot.parentNode) dot.remove();
-    }, 3000);
+    const controlY = sy + (ey - sy) / 2;
+    
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    const edgeType = toNode.type === 'source' ? 'type-source' : 'type-query';
+    path.setAttribute('class', `db-edge ${edgeType}`);
+    const d = `M ${sx},${sy} C ${sx},${controlY} ${ex},${controlY} ${ex},${ey}`;
+    path.setAttribute('d', d);
+    
+    svg.appendChild(path);
+    if (panLayer) panLayer.appendChild(svg);
 }

src/styles/detective-board.css

@@ -174,8 +174,8 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  opacity: 0;
-  pointer-events: none;
+  opacity: 0.4;
+  pointer-events: auto;
   transition: opacity 0.3s, transform 0.3s, background 0.2s;
   z-index: 999999;
   backdrop-filter: blur(8px);