@vpxa/aikit 0.1.162 → 0.1.164

package/packages/server/viewers/task-plan-static.html

@@ -167,8 +167,8 @@
     svg {
       display: block;
       width: 100%;
-      height: min(78vh, 980px);
-      min-height: 480px;
+      height: auto;
+      min-height: 600px;
     }
 
     .empty-state {
@@ -235,7 +235,7 @@
       }
 
       svg {
-        min-height: 420px;
+        min-height: 500px;
       }
     }
   </style>
@@ -271,17 +271,17 @@
       const themeButton = document.getElementById('theme-button');
       const themes = ['auto', 'dark', 'light'];
       const monoFont = '"JetBrains Mono", "SFMono-Regular", Consolas, ui-monospace, monospace';
-      const phaseGap = 260;
-      const batchGap = 100;
-      const taskGap = 80;
-      const sequentialTaskGap = 112;
-      const taskWidth = 200;
-      const taskHeight = 72;
-      const phaseHeaderHeight = 60;
-      const canvasPadding = 64;
-      const phasePaddingX = 28;
-      const phasePaddingBottom = 34;
-      const batchLabelHeight = 26;
+      const phaseGap = 300;
+      const batchGap = 120;
+      const taskGap = 100;
+      const sequentialTaskGap = 140;
+      const taskWidth = 260;
+      const taskHeight = 88;
+      const phaseHeaderHeight = 72;
+      const canvasPadding = 80;
+      const phasePaddingX = 36;
+      const phasePaddingBottom = 44;
+      const batchLabelHeight = 32;
       const phasePalette = [
         '--dt-cyan',
         '--tp-indigo',
@@ -531,9 +531,9 @@
       }
 
       function measureTask(task) {
-        const titleLines = wrapText(task.title || task.id, 22, 2);
-        const agentLines = wrapText(task.agent || 'Unassigned', 18, 1);
-        const height = taskHeight + Math.max(0, titleLines.length - 1) * 18;
+        const titleLines = wrapText(task.title || task.id, 28, 2);
+        const agentLines = wrapText(task.agent || 'Unassigned', 24, 1);
+        const height = taskHeight + Math.max(0, titleLines.length - 1) * 20;
         return {
           width: taskWidth,
           height,
@@ -579,59 +579,61 @@
       function layout(model) {
         const phaseLayouts = [];
         const taskBoxes = new Map();
-        let currentX = canvasPadding;
-        let maxBottom = 0;
+        let currentY = canvasPadding;
+        let maxWidth = 0;
 
         model.phases.forEach((phase, phaseIndex) => {
-          const phaseX = currentX;
-          const phaseY = canvasPadding;
-          let batchX = phaseX + phasePaddingX;
-          let batchY = phaseY + phaseHeaderHeight + 18;
+          const phaseX = canvasPadding;
+          const phaseY = currentY;
+          let batchCursorX = phaseX + phasePaddingX;
+          const batchBaseY = phaseY + phaseHeaderHeight + 18;
           let rightEdge = phaseX + 320;
+          let maxBatchBottom = batchBaseY;
           const batchLayouts = [];
 
           phase.batches.forEach((batch) => {
-            const batchLayout = layoutBatch(batch, batchX, batchY);
+            const batchLayout = layoutBatch(batch, batchCursorX, batchBaseY);
             batchLayout.boxes.forEach((box) => {
               taskBoxes.set(box.task.id, box);
             });
             batchLayouts.push({
               batch,
-              x: batchX,
-              y: batchY,
+              x: batchCursorX,
+              y: batchBaseY,
               width: batchLayout.width,
               height: batchLayout.height,
               boxes: batchLayout.boxes,
             });
-            rightEdge = Math.max(rightEdge, batchX + batchLayout.width + phasePaddingX);
-            batchY += batchLayout.height + batchGap;
-            batchX += Math.max(taskWidth, batchLayout.width) + 108;
+            rightEdge = Math.max(rightEdge, batchCursorX + batchLayout.width + phasePaddingX);
+            maxBatchBottom = Math.max(maxBatchBottom, batchBaseY + batchLayout.height);
+            batchCursorX += Math.max(taskWidth, batchLayout.width) + batchGap;
           });
 
+          const phaseWidth = Math.max(600, rightEdge - phaseX);
           const phaseHeight = Math.max(
             phaseHeaderHeight + 120,
-            batchY - phaseY - batchGap + phasePaddingBottom,
+            maxBatchBottom - phaseY + phasePaddingBottom,
           );
 
           phaseLayouts.push({
             phase,
             x: phaseX,
             y: phaseY,
-            width: Math.max(360, rightEdge - phaseX),
+            width: phaseWidth,
             height: phaseHeight,
             color: phaseColor(phaseIndex),
             batches: batchLayouts,
           });
 
-          currentX += Math.max(360, rightEdge - phaseX) + phaseGap;
-          maxBottom = Math.max(maxBottom, phaseY + phaseHeight);
+          maxWidth = Math.max(maxWidth, phaseX + phaseWidth + canvasPadding);
+          currentY += phaseHeight + phaseGap;
         });
 
         return {
           phases: phaseLayouts,
           taskBoxes,
-          width: Math.max(1160, currentX - phaseGap + canvasPadding),
-          height: Math.max(700, maxBottom + canvasPadding),
+          width: Math.max(1200, maxWidth),
+          height: Math.max(600, currentY - phaseGap + canvasPadding),
         };
       }
 
@@ -1008,6 +1010,7 @@
         const layoutResult = layout(model);
         svg.innerHTML = '';
         svg.setAttribute('viewBox', '0 0 ' + layoutResult.width + ' ' + layoutResult.height);
+        svg.style.height = layoutResult.height + 'px';
         svg.setAttribute('aria-label', model.title + ' with ' + totalTasks + ' tasks');
         svg.appendChild(renderDefs());
         svg.appendChild(node('title', { id: 'diagram-title' }, model.title || 'Task execution plan'));