@diagrammo/dgmo 0.7.0 → 0.7.2

package/src/gantt/renderer.ts

@@ -27,7 +27,7 @@ import {
 import type { PaletteColors } from '../palettes';
 import type { D3ExportDimensions } from '../d3';
 import type { ResolvedSchedule, ResolvedTask, ResolvedGroup, Weekday } from './types';
-import type { TagGroup } from '../utils/tag-groups';
+import type { TagGroup, TagEntry } from '../utils/tag-groups';
 
 // ── Constants ───────────────────────────────────────────────
 
@@ -39,6 +39,120 @@ const MILESTONE_SIZE = 10;
 const MIN_LEFT_MARGIN = 120;
 const BOTTOM_MARGIN = 40;
 const RIGHT_MARGIN = 20;
+const CHAR_W = 6.5;          // estimated px per character for bar labels
+const LABEL_PAD = 8;         // inner padding to decide if label fits inside bar
+const LABEL_GAP = 5;         // gap between bar edge and external label
+
+// ── Bar label placement ─────────────────────────────────────
+
+type BarLabelPlacement = {
+  x: number;
+  anchor: 'start' | 'end';
+  fill: string;
+  text: string;
+};
+
+function computeBarLabel(
+  label: string,
+  x1: number,
+  barWidth: number,
+  innerWidth: number,
+  textColor: string,
+): BarLabelPlacement | null {
+  const textWidth = label.length * CHAR_W;
+  const x2 = x1 + barWidth;
+
+  // 1. Inside
+  if (textWidth < barWidth - LABEL_PAD) {
+    return { x: x1 + 6, anchor: 'start', fill: textColor, text: label };
+  }
+
+  // 2. After (right of bar)
+  if (x2 + LABEL_GAP + textWidth <= innerWidth) {
+    return { x: x2 + LABEL_GAP, anchor: 'start', fill: textColor, text: label };
+  }
+
+  // 3. Before (left of bar)
+  if (x1 - LABEL_GAP - textWidth >= 0) {
+    return { x: x1 - LABEL_GAP, anchor: 'end', fill: textColor, text: label };
+  }
+
+  // 4. Truncate to fit before the bar
+  const availWidth = x1 - LABEL_GAP;
+  if (availWidth > CHAR_W * 3) {
+    const maxChars = Math.floor(availWidth / CHAR_W) - 1;
+    return { x: x1 - LABEL_GAP, anchor: 'end', fill: textColor, text: label.slice(0, maxChars) + '\u2026' };
+  }
+
+  return null;
+}
+
+// ── Left-panel visual helpers ───────────────────────────────
+
+const BAND_ACCENT_W = 4;
+const BAND_RADIUS = 4;
+let bandClipCounter = 0;
+
+function renderLabelBand(
+  svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>,
+  y: number,
+  leftMargin: number,
+  color: string,
+  palette: PaletteColors,
+  cssPrefix: 'group' | 'lane',
+  dataAttr?: { key: string; value: string },
+): void {
+  const bandX = 5;
+  const bandW = leftMargin - 7;
+  const bandY = y - BAR_H / 2;
+  const clipId = `gantt-band-clip-${bandClipCounter++}`;
+
+  // ClipPath matching the tint band shape
+  svg.append('clipPath').attr('id', clipId)
+    .append('rect')
+    .attr('x', bandX).attr('y', bandY)
+    .attr('width', bandW).attr('height', BAR_H)
+    .attr('rx', BAND_RADIUS);
+
+  // Tint band
+  const tint = svg.append('rect')
+    .attr('class', `gantt-${cssPrefix}-band-bg`)
+    .attr('x', bandX)
+    .attr('y', bandY)
+    .attr('width', bandW)
+    .attr('height', BAR_H)
+    .attr('rx', BAND_RADIUS)
+    .attr('fill', mix(color, palette.bg, 20))
+    .style('pointer-events', 'none');
+
+  // Accent strip inside the tint, clipped to the band's rounded shape
+  const accent = svg.append('rect')
+    .attr('class', `gantt-${cssPrefix}-band-accent`)
+    .attr('x', bandX)
+    .attr('y', bandY)
+    .attr('width', BAND_ACCENT_W)
+    .attr('height', BAR_H)
+    .attr('fill', color)
+    .attr('clip-path', `url(#${clipId})`)
+    .style('pointer-events', 'none');
+
+  if (dataAttr) {
+    tint.attr(dataAttr.key, dataAttr.value);
+    accent.attr(dataAttr.key, dataAttr.value);
+  }
+}
+
+function appendTaskIcon(
+  textEl: d3Selection.Selection<SVGTextElement, unknown, null, undefined>,
+  label: string,
+  isMilestone: boolean,
+  iconColor: string,
+  textColor: string,
+): void {
+  const icon = isMilestone ? '◆' : '●';
+  textEl.append('tspan').attr('fill', iconColor).text(icon);
+  textEl.append('tspan').attr('fill', textColor).text(' ' + label);
+}
 
 // ── Interactive Options ─────────────────────────────────────
 
@@ -67,8 +181,9 @@ export function renderGantt(
 ): void {
   // Clear previous content
   container.innerHTML = '';
+  bandClipCounter = 0;
 
-  if (resolved.error || resolved.tasks.length === 0) return;
+  if (resolved.tasks.length === 0) return;
 
   // ── Destructure options ─────────────────────────────────
 
@@ -98,15 +213,18 @@ export function renderGantt(
   const rows = tagRows ?? buildRowList(resolved, collapsedGroups);
   const isTagMode = tagRows !== null;
 
-  // Compute left margin based on longest visible label
+  // Compute left margin based on longest visible label (include ● /◆  prefix for tasks)
   const allLabels = isTagMode
     ? [
         ...rows.filter((r): r is LaneHeaderRow => r.type === 'lane-header').map(r => r.laneName),
-        ...rows.filter((r): r is TaskRow => r.type === 'task').map(r => r.task.task.label),
+        ...rows.filter((r): r is TaskRow => r.type === 'task').map(r => '● ' + r.task.task.label),
       ]
     : [
-        ...resolved.tasks.map(t => t.task.label),
-        ...resolved.groups.map(g => '  '.repeat(g.depth) + g.name),
+        ...resolved.tasks.map(t => '● ' + t.task.label),
+        ...resolved.groups.map(g => {
+          const px = g.depth <= 2 ? g.depth * 14 : 2 * 14 + (g.depth - 2) * 8;
+          return ' '.repeat(Math.ceil(px / 7)) + g.name;
+        }),
       ];
   const maxLabelLen = Math.max(...allLabels.map(l => l.length), 10);
   const leftMargin = Math.max(MIN_LEFT_MARGIN, maxLabelLen * 7 + 30);
@@ -118,14 +236,17 @@ export function renderGantt(
   const titleHeight = title ? 50 : 20;
   const tagLegendReserve = resolved.tagGroups.length > 0 ? LEGEND_HEIGHT + 8 : 0;
   const topDateLabelReserve = 22; // tick (6) + gap (4) + label height (~12)
+  const hasOverheadLabels = resolved.markers.length > 0 || resolved.eras.length > 0;
+  const markerLabelReserve = hasOverheadLabels ? 18 : 0; // markers/eras extend above date labels
+  const CONTENT_TOP_PAD = 16; // breathing room between scale labels and first row
 
-  const marginTop = titleHeight + tagLegendReserve + topDateLabelReserve;
+  const marginTop = titleHeight + tagLegendReserve + topDateLabelReserve + markerLabelReserve;
 
   // Content area
   const contentH = isTagMode
     ? totalRows * (BAR_H + ROW_GAP)
     : totalRows * (BAR_H + ROW_GAP) + GROUP_GAP * resolved.groups.length;
-  const innerHeight = contentH;
+  const innerHeight = CONTENT_TOP_PAD + contentH;
   const outerHeight = marginTop + innerHeight + BOTTOM_MARGIN;
 
   const containerWidth = exportDims?.width ?? (container.clientWidth || 800);
@@ -170,7 +291,7 @@ export function renderGantt(
       const legendY = titleHeight;
       renderTagLegend(
         svg, g, resolved.tagGroups, currentActiveGroup, leftMargin, innerWidth,
-        legendY, palette, isDark, hasCriticalPath, criticalPathActive,
+        legendY, palette, isDark, hasCriticalPath, criticalPathActive, resolved.options.optionLineNumbers,
         (groupName) => {
           // Toggle active group
           currentActiveGroup = currentActiveGroup?.toLowerCase() === groupName.toLowerCase()
@@ -186,6 +307,7 @@ export function renderGantt(
         currentSwimlaneGroup,
         onSwimlaneChange,
         viewMode,
+        resolved.tasks,
       );
     }
   }
@@ -228,7 +350,48 @@ export function renderGantt(
 
   renderWeekendBands(g, resolved, xScale, innerHeight, palette, isDark);
   renderHolidayBands(g, svg, resolved, xScale, innerHeight, palette, isDark, marginTop - 4, leftMargin, onClickItem);
-  renderErasAndMarkers(g, resolved, xScale, innerHeight, palette);
+  renderErasAndMarkers(g, svg, resolved, xScale, innerHeight, palette);
+
+  // ── Today marker (line rendered before rows so it paints behind task bars) ──
+
+  let todayDate: Date | null = null;
+  let todayX = -1;
+  const todayColor = palette.accent || '#e74c3c';
+  const todayMarkerLineNum = resolved.options.optionLineNumbers['today-marker'];
+  if (resolved.options.todayMarker !== 'off') {
+    if (resolved.options.todayMarker === 'on') {
+      todayDate = new Date();
+    } else {
+      todayDate = new Date(resolved.options.todayMarker + 'T00:00:00');
+    }
+    todayX = xScale(dateToFractionalYear(todayDate));
+    if (todayX >= 0 && todayX <= innerWidth) {
+      const todayLine = g.append('line')
+        .attr('class', 'gantt-today')
+        .attr('x1', todayX)
+        .attr('y1', 0)
+        .attr('x2', todayX)
+        .attr('y2', innerHeight + 10)
+        .attr('stroke', todayColor)
+        .attr('stroke-width', 2)
+        .attr('stroke-dasharray', '6 4')
+        .attr('opacity', 0.7)
+        .attr('pointer-events', 'none');
+      if (todayMarkerLineNum) todayLine.attr('data-line-number', String(todayMarkerLineNum));
+
+      const todayLabel = g.append('text')
+        .attr('class', 'gantt-today')
+        .attr('x', todayX)
+        .attr('y', innerHeight + 24)
+        .attr('text-anchor', 'middle')
+        .attr('font-size', '10px')
+        .attr('fill', todayColor)
+        .attr('opacity', 0.7)
+        .attr('pointer-events', 'none')
+        .text('Today');
+      if (todayMarkerLineNum) todayLabel.attr('data-line-number', String(todayMarkerLineNum));
+    }
+  }
 
   // ── Render rows ─────────────────────────────────────────
 
@@ -256,7 +419,7 @@ export function renderGantt(
       }
     }
   }
-  let yOffset = 0;
+  let yOffset = CONTENT_TOP_PAD;
 
   for (const row of rows) {
     if (row.type === 'lane-header') {
@@ -277,6 +440,7 @@ export function renderGantt(
 
       lanePositions.set(row.laneName, { x1: lx1, x2: lx1 + laneBarWidth, y: yOffset + BAR_H / 2 });
 
+      renderLabelBand(svg, marginTop + yOffset + BAR_H / 2, leftMargin, laneColor, palette, 'lane', { key: 'data-lane', value: row.laneName });
       const labelG = svg
         .append('g')
         .attr('class', 'gantt-lane-header')
@@ -344,7 +508,6 @@ export function renderGantt(
             .attr('y', yOffset)
             .attr('width', laneBarWidth * Math.min(row.aggregateProgress / 100, 1))
             .attr('height', BAR_H)
-            .attr('rx', 4)
             .attr('fill', laneColor)
             .attr('opacity', 0.5)
             .attr('pointer-events', 'none');
@@ -358,8 +521,10 @@ export function renderGantt(
       const indent = '  '.repeat(group.depth);
       const toggleIcon = isCollapsed ? '►' : '▼';
 
-      // Group label with toggle
-      const groupColor = group.color || palette.textMuted;
+      // Group label with toggle — resolve tag color from group metadata
+      const tagColor = resolveTagColor(group.metadata, resolved.tagGroups, currentActiveGroup, true);
+      const groupColor = (tagColor && tagColor !== '#999999') ? tagColor : (group.color || palette.textMuted);
+      renderLabelBand(svg, marginTop + yOffset + BAR_H / 2, leftMargin, groupColor, palette, 'group', { key: 'data-group', value: group.name });
       const labelG = svg
         .append('g')
         .attr('class', 'gantt-group-label')
@@ -378,7 +543,8 @@ export function renderGantt(
           hideGanttDateIndicators(g);
         });
 
-      const labelX = 10 + group.depth * 14;
+      const groupIndent = group.depth <= 2 ? group.depth * 14 : 2 * 14 + (group.depth - 2) * 8;
+      const labelX = 10 + groupIndent;
       labelG
         .append('text')
         .attr('x', labelX)
@@ -430,11 +596,27 @@ export function renderGantt(
               .attr('y', yOffset)
               .attr('width', barWidth * Math.min(group.progress / 100, 1))
               .attr('height', BAR_H)
-              .attr('rx', 4)
               .attr('fill', groupColor)
               .attr('opacity', 0.5);
           }
 
+          // Bar label (inside → after → before → truncate)
+          const summaryLabel = group.name + (group.progress !== null ? ` ${Math.round(group.progress)}%` : '');
+          const summaryPlacement = computeBarLabel(summaryLabel, gx1, barWidth, innerWidth, palette.text);
+          if (summaryPlacement) {
+            summaryG
+              .append('text')
+              .attr('x', summaryPlacement.x)
+              .attr('y', yOffset + BAR_H / 2)
+              .attr('dy', '0.35em')
+              .attr('font-size', '10px')
+              .attr('font-weight', 'bold')
+              .attr('text-anchor', summaryPlacement.anchor)
+              .attr('fill', summaryPlacement.fill)
+              .attr('pointer-events', 'none')
+              .text(summaryPlacement.text);
+          }
+
           // Track collapsed group position for dependency arrow redirection
           groupPositions.set(group.name, { x1: gx1, x2: gx1 + barWidth, y: yOffset + BAR_H / 2 });
         } else {
@@ -472,10 +654,26 @@ export function renderGantt(
               .attr('y', yOffset)
               .attr('width', groupBarWidth * Math.min(group.progress / 100, 1))
               .attr('height', BAR_H)
-              .attr('rx', 4)
               .attr('fill', groupColor)
               .attr('opacity', 0.5);
           }
+
+          // Bar label (inside → after → before → truncate)
+          const expandedLabel = group.name + (group.progress !== null ? ` ${Math.round(group.progress)}%` : '');
+          const expandedPlacement = computeBarLabel(expandedLabel, gx1, groupBarWidth, innerWidth, palette.text);
+          if (expandedPlacement) {
+            groupBarG
+              .append('text')
+              .attr('x', expandedPlacement.x)
+              .attr('y', yOffset + BAR_H / 2)
+              .attr('dy', '0.35em')
+              .attr('font-size', '10px')
+              .attr('font-weight', 'bold')
+              .attr('text-anchor', expandedPlacement.anchor)
+              .attr('fill', expandedPlacement.fill)
+              .attr('pointer-events', 'none')
+              .text(expandedPlacement.text);
+          }
         }
       }
 
@@ -484,8 +682,13 @@ export function renderGantt(
       const rt = row.task;
       const task = rt.task;
 
+      // Resolve bar color early so icon tspan can use it
+      const barColor = resolveTaskColor(rt, currentActiveGroup, resolved, seriesColors, palette);
+
       // Task label on the left (left-aligned with indent; flat in tag mode)
-      const taskLabelX = isTagMode ? 20 : 6 + rt.groupPath.length * 14;
+      const depth = rt.groupPath.length;
+      const indent = depth <= 2 ? depth * 14 : 2 * 14 + (depth - 2) * 8;
+      const taskLabelX = isTagMode ? 20 : 6 + indent;
       const topGroup = rt.groupPath.length > 0 ? rt.groupPath[0] : null;
       const taskLabel = svg
         .append('text')
@@ -500,17 +703,22 @@ export function renderGantt(
         .attr('data-task-id', task.id)
         .attr('data-group', topGroup)
         .style('cursor', onClickItem ? 'pointer' : 'default')
-        .text(task.label)
         .on('click', () => {
           if (onClickItem) onClickItem(task.lineNumber);
         })
         .on('mouseenter', () => {
-          highlightTask(g, svg, task.id);
+          if (rt.isMilestone) {
+            highlightMilestone(g, svg, task.id);
+          } else {
+            highlightTask(g, svg, task.id);
+          }
         })
         .on('mouseleave', () => {
           resetHighlight(g, svg);
         });
 
+      appendTaskIcon(taskLabel, task.label, rt.isMilestone, barColor, palette.text);
+
       // Tag attributes on label for legend hover matching
       for (const [key, value] of Object.entries(rt.effectiveMetadata)) {
         taskLabel.attr(`data-tag-${key}`, value.toLowerCase());
@@ -519,9 +727,6 @@ export function renderGantt(
         taskLabel.attr('data-critical-path', 'true');
       }
 
-      // Determine color
-      let barColor = resolveTaskColor(rt, currentActiveGroup, resolved, seriesColors, palette);
-
       if (rt.isMilestone) {
         // Render diamond
         const mx = xScale(dateToFractionalYear(rt.startDate));
@@ -534,13 +739,14 @@ export function renderGantt(
           .attr('stroke-width', 1.5)
           .attr('data-line-number', String(task.lineNumber))
           .attr('data-task-name', task.label)
+          .attr('data-task-id', task.id)
           .attr('data-group', topGroup)
           .style('cursor', onClickItem ? 'pointer' : 'default')
           .on('click', () => {
             if (onClickItem) onClickItem(task.lineNumber);
           })
           .on('mouseenter', () => {
-            highlightTaskLabel(svg, task.lineNumber);
+            highlightMilestone(g, svg, task.id);
             showGanttDateIndicators(g, xScale, rt.startDate, null, innerHeight, barColor);
             // Show label next to diamond
             g.append('text')
@@ -555,7 +761,7 @@ export function renderGantt(
               .text(task.label);
           })
           .on('mouseleave', () => {
-            resetTaskLabels(svg);
+            resetHighlight(g, svg);
             hideGanttDateIndicators(g);
             g.selectAll('.gantt-milestone-hover-label').remove();
           });
@@ -672,7 +878,6 @@ export function renderGantt(
             .attr('y', yOffset)
             .attr('width', progressWidth)
             .attr('height', BAR_H)
-            .attr('rx', 4)
             .attr('fill', progressFill)
             .attr('opacity', 0.5);
         }
@@ -683,18 +888,19 @@ export function renderGantt(
         }
 
 
-        // Label inside bar (if fits)
-        const textWidth = task.label.length * 6.5;
-        if (textWidth < barWidth - 8) {
+        // Bar label (inside → after → before → truncate)
+        const labelPlacement = computeBarLabel(task.label, x1, barWidth, innerWidth, palette.text);
+        if (labelPlacement) {
           taskG
             .append('text')
-            .attr('x', x1 + 6)
+            .attr('x', labelPlacement.x)
             .attr('y', yOffset + BAR_H / 2)
             .attr('dy', '0.35em')
             .attr('font-size', '10px')
-            .attr('fill', palette.text)
+            .attr('text-anchor', labelPlacement.anchor)
+            .attr('fill', labelPlacement.fill)
             .attr('pointer-events', 'none')
-            .text(task.label);
+            .text(labelPlacement.text);
         }
 
         // Track bar position for arrows
@@ -705,38 +911,42 @@ export function renderGantt(
     }
   }
 
-  // ── Today marker ────────────────────────────────────────
+  // ── Today hover overlay (rendered after rows so it receives pointer events) ──
 
-  if (resolved.options.todayMarker !== 'off') {
-    let todayDate: Date;
-    if (resolved.options.todayMarker === 'on') {
-      todayDate = new Date();
-    } else {
-      todayDate = new Date(resolved.options.todayMarker + 'T00:00:00');
-    }
-    const todayX = xScale(dateToFractionalYear(todayDate));
-    if (todayX >= 0 && todayX <= innerWidth) {
-      g.append('line')
-        .attr('class', 'gantt-today')
-        .attr('x1', todayX)
-        .attr('y1', 0)
-        .attr('x2', todayX)
-        .attr('y2', innerHeight + 10)
-        .attr('stroke', palette.accent || '#e74c3c')
-        .attr('stroke-width', 2)
-        .attr('stroke-dasharray', '6 4')
-        .attr('opacity', 0.7);
+  if (todayDate && todayX >= 0 && todayX <= innerWidth) {
+    const todayHoverG = g.append('g')
+      .attr('class', 'gantt-today-hover')
+      .style('cursor', 'pointer');
 
-      g.append('text')
-        .attr('class', 'gantt-today')
-        .attr('x', todayX + 4)
-        .attr('y', innerHeight + 24)
-        .attr('text-anchor', 'start')
-        .attr('font-size', '10px')
-        .attr('fill', palette.accent || '#e74c3c')
-        .attr('opacity', 0.7)
-        .text('Today');
-    }
+    // Invisible wide hit rect for easy hovering
+    todayHoverG.append('rect')
+      .attr('x', todayX - 10)
+      .attr('y', -6)
+      .attr('width', 20)
+      .attr('height', innerHeight + 16)
+      .attr('fill', 'transparent')
+      .attr('pointer-events', 'all');
+
+    const todayDateObj = todayDate;
+    todayHoverG
+      .on('mouseenter', () => {
+        // Fade everything
+        g.selectAll<SVGGElement, unknown>('.gantt-task').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-milestone').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGTextElement, unknown>('.gantt-task-label').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-era-group').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
+        showGanttDateIndicators(g, xScale, todayDateObj, null, innerHeight, todayColor);
+      })
+      .on('mouseleave', () => {
+        resetHighlight(g, svg);
+        hideGanttDateIndicators(g);
+      });
   }
 
   // ── Dependency arrows ───────────────────────────────────
@@ -1021,6 +1231,7 @@ function renderDependencyArrows(
         .attr('class', 'gantt-dep-arrow')
         .attr('data-dep-from', rt.task.id)
         .attr('data-dep-to', targetTask.task.id)
+        .attr('data-line-number', String(dep.lineNumber))
         .attr('data-critical-path', isCpArrow ? 'true' : null)
         .attr('d', path)
         .attr('fill', 'none')
@@ -1035,6 +1246,7 @@ function renderDependencyArrows(
         .attr('class', 'gantt-dep-arrowhead')
         .attr('data-dep-from', rt.task.id)
         .attr('data-dep-to', targetTask.task.id)
+        .attr('data-line-number', String(dep.lineNumber))
         .attr('data-critical-path', isCpArrow ? 'true' : null)
         .attr('points', arrowheadPoints(tx, ty, headSize, angle))
         .attr('fill', arrowColor)
@@ -1066,7 +1278,9 @@ function applyCriticalPathHighlight(
     el.attr('opacity', el.attr('data-critical-path') === 'true' ? 1 : FADE_OPACITY);
   });
   svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-group-band-bg, .gantt-group-band-accent').attr('opacity', FADE_OPACITY);
   svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-lane-band-bg, .gantt-lane-band-accent').attr('opacity', FADE_OPACITY);
   chartG.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent').attr('opacity', FADE_OPACITY);
   // Show critical path arrows at full opacity, fade others
   chartG.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').each(function () {
@@ -1083,7 +1297,9 @@ function resetHighlightAll(
   chartG.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', 1);
   svg.selectAll<SVGTextElement, unknown>('.gantt-task-label').attr('opacity', 1);
   svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', 1);
+  svg.selectAll<SVGElement, unknown>('.gantt-group-band-bg, .gantt-group-band-accent').attr('opacity', 1);
   svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', 1);
+  svg.selectAll<SVGElement, unknown>('.gantt-lane-band-bg, .gantt-lane-band-accent').attr('opacity', 1);
   chartG.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent').attr('opacity', 1);
   chartG.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', 0.5);
 }
@@ -1133,11 +1349,13 @@ function renderTagLegend(
   isDark: boolean,
   hasCriticalPath: boolean,
   criticalPathActive: boolean,
+  optionLineNumbers: Record<string, number>,
   onToggle?: (groupName: string) => void,
   onToggleCriticalPath?: () => void,
   currentSwimlaneGroup?: string | null,
   onSwimlaneChange?: (group: string | null) => void,
   legendViewMode?: boolean,
+  resolvedTasks?: ResolvedTask[],
 ): void {
   const groupBg = isDark
     ? mix(palette.surface, palette.bg, 50)
@@ -1155,6 +1373,32 @@ function renderTagLegend(
     visibleGroups = tagGroups;
   }
 
+  // Build set of used tag values per group from resolved tasks
+  const usedValues = new Map<string, Set<string>>();
+  if (resolvedTasks) {
+    for (const group of visibleGroups) {
+      const key = group.name.toLowerCase();
+      const used = new Set<string>();
+      for (const rt of resolvedTasks) {
+        const val = rt.effectiveMetadata[key];
+        if (val) used.add(val.toLowerCase());
+      }
+      usedValues.set(key, used);
+    }
+  }
+
+  // Filter entries to only those used in the current view
+  const filteredEntries = new Map<string, TagEntry[]>();
+  for (const group of visibleGroups) {
+    const key = group.name.toLowerCase();
+    const used = usedValues.get(key);
+    if (used && used.size > 0) {
+      filteredEntries.set(key, group.entries.filter(e => used.has(e.value.toLowerCase())));
+    } else {
+      filteredEntries.set(key, group.entries);
+    }
+  }
+
   // Compute per-group widths
   const groupWidths: number[] = [];
   let totalW = 0;
@@ -1166,8 +1410,9 @@ function renderTagLegend(
     const pillW = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD + iconReserve;
     let groupW = pillW;
     if (isActive) {
+      const entries = filteredEntries.get(group.name.toLowerCase()) ?? group.entries;
       let entriesW = 0;
-      for (const entry of group.entries) {
+      for (const entry of entries) {
         entriesW += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
       }
       groupW = LEGEND_CAPSULE_PAD * 2 + pillW + 4 + entriesW;
@@ -1188,8 +1433,9 @@ function renderTagLegend(
     totalW += cpPillW;
   }
 
-  // Center over chart area (not full container)
-  const legendX = chartLeftMargin + (chartInnerWidth - totalW) / 2;
+  // Center over full container (matching title centering)
+  const containerWidth = chartLeftMargin + chartInnerWidth + RIGHT_MARGIN;
+  const legendX = (containerWidth - totalW) / 2;
 
   const legendRow = svg.append('g')
     .attr('class', 'gantt-tag-legend-container')
@@ -1211,6 +1457,7 @@ function renderTagLegend(
       .attr('transform', `translate(${cursorX}, 0)`)
       .attr('class', 'gantt-tag-legend-group')
       .attr('data-tag-group', group.name)
+      .attr('data-line-number', String(group.lineNumber))
       .style('cursor', 'pointer')
       .on('click', () => { if (onToggle) onToggle(group.name); });
 
@@ -1278,16 +1525,18 @@ function renderTagLegend(
         });
     }
 
-    // Entries (when active — expanded color group)
+    // Entries (when active — expanded color group, only used values)
     if (isActive) {
       const tagKey = group.name.toLowerCase();
+      const entries = filteredEntries.get(tagKey) ?? group.entries;
       let ex = pillXOff + pillW + LEGEND_CAPSULE_PAD + 4;
-      for (const entry of group.entries) {
+      for (const entry of entries) {
         const entryValue = entry.value.toLowerCase();
 
         // Wrap dot + label in a <g> for hover targeting
         const entryG = gEl.append('g')
           .attr('class', 'gantt-legend-entry')
+          .attr('data-line-number', String(entry.lineNumber))
           .style('cursor', 'pointer');
 
         // Dot
@@ -1349,11 +1598,13 @@ function renderTagLegend(
 
   // Critical Path pill
   if (hasCriticalPath) {
+    const cpLineNum = optionLineNumbers['critical-path'];
     const cpG = legendRow.append('g')
       .attr('transform', `translate(${cursorX}, 0)`)
       .attr('class', 'gantt-legend-critical-path')
       .style('cursor', 'pointer')
       .on('click', () => { if (onToggleCriticalPath) onToggleCriticalPath(); });
+    if (cpLineNum) cpG.attr('data-line-number', String(cpLineNum));
 
     cpG.append('rect')
       .attr('width', cpPillW)
@@ -1403,6 +1654,7 @@ const ERA_COLORS = ['#5e81ac', '#a3be8c', '#ebcb8b', '#d08770', '#b48ead'];
 
 function renderErasAndMarkers(
   g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
+  svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>,
   resolved: ResolvedSchedule,
   xScale: d3Scale.ScaleLinear<number, number>,
   innerHeight: number,
@@ -1422,7 +1674,8 @@ function renderErasAndMarkers(
     const eraEndDate = parseDateStringToDate(era.endDate);
 
     const eraG = g.append('g')
-      .attr('class', 'gantt-era-group');
+      .attr('class', 'gantt-era-group')
+      .attr('data-line-number', String(era.lineNumber));
 
     const eraRect = eraG.append('rect')
       .attr('class', 'gantt-era')
@@ -1433,71 +1686,119 @@ function renderErasAndMarkers(
       .attr('fill', color)
       .attr('opacity', baseEraOpacity);
 
-    // Era label (inside chart at top)
+    // Era label (above date scale, same zone as markers)
     eraG.append('text')
       .attr('class', 'gantt-era-label')
       .attr('x', (sx + ex) / 2)
-      .attr('y', 12)
+      .attr('y', -24)
       .attr('text-anchor', 'middle')
       .attr('font-size', '10px')
       .attr('fill', color)
       .attr('opacity', 0.7)
-      .attr('pointer-events', 'none')
+      .style('cursor', 'pointer')
       .text(era.label);
 
     eraG
       .on('mouseenter', () => {
+        // Fade everything
+        g.selectAll<SVGGElement, unknown>('.gantt-task').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-milestone').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGTextElement, unknown>('.gantt-task-label').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
+        // Highlight this era
         eraRect.attr('opacity', hoverEraOpacity);
         showGanttDateIndicators(g, xScale, eraStartDate, eraEndDate, innerHeight, color);
       })
       .on('mouseleave', () => {
+        resetHighlight(g, svg);
         eraRect.attr('opacity', baseEraOpacity);
         hideGanttDateIndicators(g);
       });
   }
 
-  // Markers: vertical dashed lines
+  // Markers: label → diamond → dashed line (same layout as timeline)
   for (const marker of resolved.markers) {
     const color = marker.color || palette.accent || '#d08770';
     const mx = xScale(parseDateToFractionalYear(marker.date));
     const markerDate = parseDateStringToDate(marker.date);
+    const diamondSize = 5;
+    const labelY = -24;
+    const diamondY = labelY + 14;
 
     const markerG = g.append('g')
-      .attr('class', 'gantt-marker-group');
+      .attr('class', 'gantt-marker-group')
+      .attr('data-line-number', String(marker.lineNumber))
+      .style('cursor', 'pointer');
+
+    // Invisible hit rect for easier clicking/hovering
+    markerG.append('rect')
+      .attr('x', mx - 40)
+      .attr('y', labelY - 12)
+      .attr('width', 80)
+      .attr('height', innerHeight - labelY + 12)
+      .attr('fill', 'transparent')
+      .attr('pointer-events', 'all');
+
+    // Label above diamond
+    markerG.append('text')
+      .attr('class', 'gantt-marker-label')
+      .attr('x', mx)
+      .attr('y', labelY)
+      .attr('text-anchor', 'middle')
+      .attr('font-size', '11px')
+      .attr('font-weight', '600')
+      .attr('fill', color)
+      .text(marker.label);
+
+    // Diamond below label
+    markerG.append('path')
+      .attr('d', `M${mx},${diamondY - diamondSize} l${diamondSize},${diamondSize} l-${diamondSize},${diamondSize} l-${diamondSize},-${diamondSize} Z`)
+      .attr('fill', color)
+      .attr('opacity', 0.9);
 
+    // Dashed line from diamond down
     markerG.append('line')
       .attr('class', 'gantt-marker')
       .attr('x1', mx)
-      .attr('y1', 0)
+      .attr('y1', diamondY + diamondSize)
       .attr('x2', mx)
       .attr('y2', innerHeight)
       .attr('stroke', color)
       .attr('stroke-width', 1.5)
-      .attr('stroke-dasharray', '6 3')
-      .attr('opacity', 0.5);
-
-    // Diamond indicator (at top of chart area)
-    markerG.append('polygon')
-      .attr('points', diamondPoints(mx, 6, 8))
-      .attr('fill', color)
+      .attr('stroke-dasharray', '6 4')
       .attr('opacity', 0.5);
 
-    // Label (inside chart at top)
-    markerG.append('text')
-      .attr('class', 'gantt-marker-label')
-      .attr('x', mx + 8)
-      .attr('y', 10)
-      .attr('font-size', '9px')
-      .attr('fill', color)
-      .attr('opacity', 0.7)
-      .attr('pointer-events', 'none')
-      .text(marker.label);
-
+    // Hide marker line/diamond on hover but keep label visible
+    const markerLine = markerG.select('.gantt-marker');
+    const markerDiamond = markerG.select('path');
     markerG
       .on('mouseenter', () => {
-        showGanttDateIndicators(g, xScale, markerDate, null, innerHeight, color);
+        // Fade everything
+        g.selectAll<SVGGElement, unknown>('.gantt-task').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-milestone').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGTextElement, unknown>('.gantt-task-label').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-era-group').attr('opacity', FADE_OPACITY);
+        // Fade other markers but keep this one highlighted
+        g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
+        markerG.attr('opacity', 1);
+        markerLine.attr('opacity', 0.8);
+        markerDiamond.attr('opacity', 0);
+        showGanttDateIndicators(g, xScale, markerDate, null, innerHeight, color, { skipStartLine: true });
       })
       .on('mouseleave', () => {
+        resetHighlight(g, svg);
+        markerLine.attr('opacity', 0.5);
+        markerDiamond.attr('opacity', 0.9);
         hideGanttDateIndicators(g);
       });
   }
@@ -1520,11 +1821,7 @@ function parseDateStringToDate(s: string): Date {
  * Used for eras and markers which may have partial dates.
  */
 function parseDateToFractionalYear(s: string): number {
-  const parts = s.split('-').map(p => parseInt(p, 10));
-  const year = parts[0];
-  const month = parts.length >= 2 ? parts[1] : 1;
-  const day = parts.length >= 3 ? parts[2] : 1;
-  return year + (month - 1) / 12 + (day - 1) / 365;
+  return dateToFractionalYear(parseDateStringToDate(s));
 }
 
 // ── Dependency Hover Helpers ─────────────────────────────────
@@ -1580,6 +1877,8 @@ function highlightDeps(
     const isRelated = (from && related.has(from)) || (to && related.has(to));
     el.attr('opacity', isRelated ? 0.5 : FADE_OPACITY);
   });
+  // Fade markers
+  g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
 }
 
 function highlightGroup(
@@ -1612,9 +1911,17 @@ function highlightGroup(
     const el = d3Selection.select(this);
     el.attr('opacity', el.attr('data-group') === groupName ? 1 : FADE_OPACITY);
   });
+  // Fade group bands not matching
+  svg.selectAll<SVGElement, unknown>('.gantt-group-band-bg, .gantt-group-band-accent').each(function () {
+    const el = d3Selection.select(this);
+    el.attr('opacity', el.attr('data-group') === groupName ? 1 : FADE_OPACITY);
+  });
   // Fade lane elements
   svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-lane-band-bg, .gantt-lane-band-accent').attr('opacity', FADE_OPACITY);
   g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent').attr('opacity', FADE_OPACITY);
+  // Fade markers
+  g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
 }
 
 function highlightLane(
@@ -1651,9 +1958,17 @@ function highlightLane(
     const el = d3Selection.select(this);
     el.attr('opacity', el.attr('data-lane') === laneName ? 1 : FADE_OPACITY);
   });
+  // Fade lane bands not matching
+  svg.selectAll<SVGElement, unknown>('.gantt-lane-band-bg, .gantt-lane-band-accent').each(function () {
+    const el = d3Selection.select(this);
+    el.attr('opacity', el.attr('data-lane') === laneName ? 1 : FADE_OPACITY);
+  });
   // Fade group elements (not relevant in lane mode)
   g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', FADE_OPACITY);
   svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-group-band-bg, .gantt-group-band-accent').attr('opacity', FADE_OPACITY);
+  // Fade markers
+  g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
 }
 
 function highlightTask(
@@ -1676,9 +1991,42 @@ function highlightTask(
   // Fade group/lane elements
   g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', FADE_OPACITY);
   svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-group-band-bg, .gantt-group-band-accent').attr('opacity', FADE_OPACITY);
   svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-lane-band-bg, .gantt-lane-band-accent').attr('opacity', FADE_OPACITY);
   g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', FADE_OPACITY);
   g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', FADE_OPACITY);
+  // Fade markers
+  g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
+}
+
+function highlightMilestone(
+  g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
+  svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>,
+  taskId: string,
+): void {
+  // Fade tasks
+  g.selectAll<SVGGElement, unknown>('.gantt-task').attr('opacity', FADE_OPACITY);
+  // Fade milestones not matching
+  g.selectAll<SVGElement, unknown>('.gantt-milestone').each(function () {
+    const el = d3Selection.select(this);
+    el.attr('opacity', el.attr('data-task-id') === taskId ? 1 : FADE_OPACITY);
+  });
+  // Fade task labels not matching
+  svg.selectAll<SVGTextElement, unknown>('.gantt-task-label').each(function () {
+    const el = d3Selection.select(this);
+    el.attr('opacity', el.attr('data-task-id') === taskId ? 1 : FADE_OPACITY);
+  });
+  // Fade group/lane elements
+  g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-group-band-bg, .gantt-group-band-accent').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-lane-band-bg, .gantt-lane-band-accent').attr('opacity', FADE_OPACITY);
+  g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', FADE_OPACITY);
+  g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', FADE_OPACITY);
+  // Fade markers
+  g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
 }
 
 function highlightTaskLabel(
@@ -1705,10 +2053,14 @@ function resetHighlight(
   g.selectAll<SVGGElement, unknown>('.gantt-task, .gantt-milestone').attr('opacity', 1);
   g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', 1);
   svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', 1);
+  svg.selectAll<SVGElement, unknown>('.gantt-group-band-bg, .gantt-group-band-accent').attr('opacity', 1);
   svg.selectAll<SVGTextElement, unknown>('.gantt-task-label').attr('opacity', 1);
   svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', 1);
+  svg.selectAll<SVGElement, unknown>('.gantt-lane-band-bg, .gantt-lane-band-accent').attr('opacity', 1);
   g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', 1);
   g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', 0.5);
+  g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', 1);
+  g.selectAll<SVGElement, unknown>('.gantt-era-group').attr('opacity', 1);
 }
 
 // ── Row Building ────────────────────────────────────────────
@@ -1821,20 +2173,16 @@ export function buildTagLaneRowList(
     }
   }
 
-  // Emit lanes in tag entry declaration order
+  // Emit lanes in tag entry declaration order (skip empty lanes)
   for (const entry of tagGroup.entries) {
     const entryKey = entry.value.toLowerCase();
     const tasks = buckets.get(entryKey) ?? [];
+    if (tasks.length === 0) continue;
     // Sort tasks within lane by start date
     tasks.sort((a, b) => a.startDate.getTime() - b.startDate.getTime());
 
-    // Compute aggregate progress
-    const progressValues = tasks
-      .map(t => t.task.progress)
-      .filter((p): p is number => p !== null);
-    const aggregateProgress = progressValues.length > 0
-      ? progressValues.reduce((a, b) => a + b, 0) / progressValues.length
-      : null;
+    // Compute duration-weighted aggregate progress (tasks without progress count as 0%)
+    const aggregateProgress = durationWeightedProgress(tasks);
 
     // Compute lane date range from tasks
     const laneStartDate = tasks.length > 0 ? new Date(Math.min(...tasks.map(t => t.startDate.getTime()))) : null;
@@ -1861,12 +2209,7 @@ export function buildTagLaneRowList(
   // Append unbucketed tasks as "No {GroupName}" lane
   if (unbucketed.length > 0) {
     unbucketed.sort((a, b) => a.startDate.getTime() - b.startDate.getTime());
-    const progressValues = unbucketed
-      .map(t => t.task.progress)
-      .filter((p): p is number => p !== null);
-    const aggregateProgress = progressValues.length > 0
-      ? progressValues.reduce((a, b) => a + b, 0) / progressValues.length
-      : null;
+    const aggregateProgress = durationWeightedProgress(unbucketed);
 
     const noLaneStartDate = unbucketed.length > 0 ? new Date(Math.min(...unbucketed.map(t => t.startDate.getTime()))) : null;
     const noLaneEndDate = unbucketed.length > 0 ? new Date(Math.max(...unbucketed.map(t => t.endDate.getTime()))) : null;
@@ -1895,6 +2238,22 @@ export function buildTagLaneRowList(
 
 // ── Helpers ─────────────────────────────────────────────────
 
+/** Duration-weighted progress: tasks without explicit progress count as 0%. Returns null if no task has progress. */
+function durationWeightedProgress(tasks: ResolvedTask[]): number | null {
+  let totalDuration = 0;
+  let totalProgress = 0;
+  let hasProgress = false;
+  for (const rt of tasks) {
+    const dur = rt.endDate.getTime() - rt.startDate.getTime();
+    totalDuration += dur;
+    if (rt.task.progress !== null) {
+      totalProgress += rt.task.progress * dur;
+      hasProgress = true;
+    }
+  }
+  return hasProgress && totalDuration > 0 ? totalProgress / totalDuration : null;
+}
+
 function dateToFractionalYear(d: Date): number {
   const y = d.getFullYear();
   const startOfYear = new Date(y, 0, 1);
@@ -1923,29 +2282,38 @@ function showGanttDateIndicators(
   endDate: Date | null,
   innerHeight: number,
   color: string,
+  options?: { skipStartLine?: boolean },
 ): void {
   // Fade existing scale ticks and today marker
   g.selectAll('.gantt-scale-tick').attr('opacity', 0.05);
   g.selectAll('.gantt-today').attr('opacity', 0.05);
 
+  // Wrap all hover indicators in a group that ignores pointer events,
+  // so they don't steal mouseleave from the element being hovered.
+  const hg = g.append('g')
+    .attr('class', 'gantt-hover-date')
+    .attr('pointer-events', 'none');
+
   const tickLen = 6;
   const startPos = xScale(dateToFractionalYear(startDate));
   const startLabel = formatGanttDate(startDate);
 
-  // Start date — dashed vertical line
-  g.append('line')
-    .attr('class', 'gantt-hover-date')
-    .attr('x1', startPos)
-    .attr('y1', -tickLen)
-    .attr('x2', startPos)
-    .attr('y2', innerHeight)
-    .attr('stroke', color)
-    .attr('stroke-width', 1.5)
-    .attr('stroke-dasharray', '4 4')
-    .attr('opacity', 0.6);
+  // Start date — dashed vertical line (skip when caller already shows its own line)
+  if (!options?.skipStartLine) {
+    hg.append('line')
+      .attr('class', 'gantt-hover-date')
+      .attr('x1', startPos)
+      .attr('y1', -tickLen)
+      .attr('x2', startPos)
+      .attr('y2', innerHeight)
+      .attr('stroke', color)
+      .attr('stroke-width', 1.5)
+      .attr('stroke-dasharray', '4 4')
+      .attr('opacity', 0.6);
+  }
 
   // Start date — top label
-  g.append('text')
+  hg.append('text')
     .attr('class', 'gantt-hover-date')
     .attr('x', startPos)
     .attr('y', -tickLen - 4)
@@ -1956,7 +2324,7 @@ function showGanttDateIndicators(
     .text(startLabel);
 
   // Start date — bottom label
-  g.append('text')
+  hg.append('text')
     .attr('class', 'gantt-hover-date')
     .attr('x', startPos)
     .attr('y', innerHeight + tickLen + 12)
@@ -1970,8 +2338,24 @@ function showGanttDateIndicators(
     const endPos = xScale(dateToFractionalYear(endDate));
     const endLabel = formatGanttDate(endDate);
 
+    // When dates are close, push labels apart so they don't overlap.
+    // ~90px is roughly the width of a date label like "Aug 12, 2026" at 10px.
+    const minLabelGap = 90;
+    const gap = endPos - startPos;
+    let startLabelX = startPos;
+    let endLabelX = endPos;
+    let startAnchor = 'middle';
+    let endAnchor = 'middle';
+    if (gap < minLabelGap) {
+      const mid = (startPos + endPos) / 2;
+      startLabelX = mid - minLabelGap / 2;
+      endLabelX = mid + minLabelGap / 2;
+      startAnchor = 'middle';
+      endAnchor = 'middle';
+    }
+
     // End date — dashed vertical line
-    g.append('line')
+    hg.append('line')
       .attr('class', 'gantt-hover-date')
       .attr('x1', endPos)
       .attr('y1', -tickLen)
@@ -1982,23 +2366,31 @@ function showGanttDateIndicators(
       .attr('stroke-dasharray', '4 4')
       .attr('opacity', 0.6);
 
+    // Reposition start labels to avoid overlap
+    hg.selectAll<SVGTextElement, unknown>('text.gantt-hover-date').each(function () {
+      const el = d3Selection.select(this);
+      if (el.text() === startLabel) {
+        el.attr('x', startLabelX).attr('text-anchor', startAnchor);
+      }
+    });
+
     // End date — top label
-    g.append('text')
+    hg.append('text')
       .attr('class', 'gantt-hover-date')
-      .attr('x', endPos)
+      .attr('x', endLabelX)
       .attr('y', -tickLen - 4)
-      .attr('text-anchor', 'middle')
+      .attr('text-anchor', endAnchor)
       .attr('fill', color)
       .attr('font-size', '10px')
       .attr('font-weight', '600')
       .text(endLabel);
 
     // End date — bottom label
-    g.append('text')
+    hg.append('text')
       .attr('class', 'gantt-hover-date')
-      .attr('x', endPos)
+      .attr('x', endLabelX)
       .attr('y', innerHeight + tickLen + 12)
-      .attr('text-anchor', 'middle')
+      .attr('text-anchor', endAnchor)
       .attr('fill', color)
       .attr('font-size', '10px')
       .attr('font-weight', '600')