@diagrammo/dgmo 0.5.2 → 0.5.4

package/src/initiative-status/layout.ts

@@ -8,6 +8,7 @@
 
 import dagre from '@dagrejs/dagre';
 import type { ParsedInitiativeStatus, InitiativeStatus } from './types';
+import type { CollapseResult } from './collapse';
 
 export interface ISLayoutNode {
   label: string;
@@ -26,7 +27,13 @@ export interface ISLayoutEdge {
   label?: string;
   status: import('./types').InitiativeStatus;
   lineNumber: number;
+  // Layout contract for points[]:
+  //   Back-edges:       3 points — [src.bottom/top_center, arc_control, tgt.bottom/top_center]
+  //   Y-displaced:      3 points — [src.bottom/top_center, diagonal_mid, tgt.left_center]
+  //   4-point elbow:    points[0] and points[last] pinned at node center Y; interior fans via yOffset
+  //   fixedDagrePoints: points[0]=src.right, points[last]=tgt.left; interior from dagre
   points: { x: number; y: number }[];
+  parallelCount: number; // 1 for unique edges, >1 for parallel groups — used by renderer to narrow hit area
 }
 
 export interface ISLayoutGroup {
@@ -37,6 +44,7 @@ export interface ISLayoutGroup {
   width: number;
   height: number;
   lineNumber: number;
+  collapsed: boolean;
 }
 
 export interface ISLayoutResult {
@@ -49,7 +57,7 @@ export interface ISLayoutResult {
 
 const STATUS_PRIORITY: Record<string, number> = { todo: 3, wip: 2, done: 1, na: 0 };
 
-function rollUpStatus(members: ISLayoutNode[]): InitiativeStatus {
+export function rollUpStatus(members: { status: InitiativeStatus }[]): InitiativeStatus {
   let worst: InitiativeStatus = null;
   let worstPri = -1;
   for (const m of members) {
@@ -68,22 +76,54 @@ const NODE_WIDTH = Math.round(NODE_HEIGHT * PHI);
 const GROUP_PADDING = 20;
 const NODESEP = 80;
 const RANKSEP = 160;
+const PARALLEL_SPACING = 16; // px between parallel edges sharing same source→target (~27% of NODE_HEIGHT)
+const PARALLEL_EDGE_MARGIN = 12; // total vertical margin reserved at top+bottom of node for edge bundles (6px each side)
+const MAX_PARALLEL_EDGES = 5; // at most this many edges rendered between any directed source→target pair
+const BACK_EDGE_MARGIN = 40; // clearance below/above nodes for back-edge arcs (~half NODESEP)
+const BACK_EDGE_MIN_SPREAD = Math.round(NODE_WIDTH * 0.75); // minimum horizontal arc spread for near-same-X back-edges
+const CHAR_WIDTH_RATIO = 0.6;
+const NODE_FONT_SIZE = 13;
+const NODE_TEXT_PADDING = 12;
 
 // ============================================================
 // Main layout function
 // ============================================================
 
-export function layoutInitiativeStatus(parsed: ParsedInitiativeStatus): ISLayoutResult {
-  if (parsed.nodes.length === 0) {
+export function layoutInitiativeStatus(
+  parsed: ParsedInitiativeStatus,
+  collapseResult?: CollapseResult
+): ISLayoutResult {
+  if (parsed.nodes.length === 0 && (!collapseResult || collapseResult.collapsedGroupStatuses.size === 0)) {
     return { nodes: [], edges: [], groups: [], width: 0, height: 0 };
   }
 
+  // Derive collapse context
+  const originalGroups = collapseResult?.originalGroups ?? parsed.groups;
+  const collapsedGroupStatuses = collapseResult?.collapsedGroupStatuses ?? new Map<string, InitiativeStatus>();
+  const collapsedGroupLabels = new Set(
+    originalGroups
+      .map((g) => g.label)
+      .filter((l) => !parsed.groups.some((g) => g.label === l))
+  );
+
   // Build and run dagre graph
-  const hasGroups = parsed.groups.length > 0;
+  const hasGroups = parsed.groups.length > 0 || collapsedGroupLabels.size > 0;
   const g = new dagre.graphlib.Graph({ multigraph: true, compound: hasGroups });
   g.setGraph({ rankdir: 'LR', nodesep: NODESEP, ranksep: RANKSEP });
   g.setDefaultEdgeLabel(() => ({}));
 
+  // Collapsed groups → regular dagre nodes (no compound parent)
+  for (const group of originalGroups) {
+    if (collapsedGroupLabels.has(group.label)) {
+      const collapsedW = Math.max(
+        NODE_WIDTH,
+        Math.ceil(group.label.length * CHAR_WIDTH_RATIO * NODE_FONT_SIZE) + NODE_TEXT_PADDING * 2
+      );
+      g.setNode(group.label, { label: group.label, width: collapsedW, height: NODE_HEIGHT });
+    }
+  }
+
+  // Expanded groups → compound parents
   for (const group of parsed.groups) {
     g.setNode(`__group_${group.label}`, { label: group.label, clusterLabelPos: 'top' });
   }
@@ -118,15 +158,64 @@ export function layoutInitiativeStatus(parsed: ParsedInitiativeStatus): ISLayout
     };
   });
 
-  const nodeMap = new Map(layoutNodes.map((n) => [n.label, n]));
-  const allNodeX = layoutNodes.map((n) => n.x);
+  // Build a unified position map covering both regular nodes and collapsed groups
+  interface NodePos { x: number; y: number; width: number; height: number }
+  const posMap = new Map<string, NodePos>(layoutNodes.map((n) => [n.label, n]));
+  for (const label of collapsedGroupLabels) {
+    const pos = g.node(label);
+    if (pos) posMap.set(label, { x: pos.x, y: pos.y, width: pos.width, height: pos.height });
+  }
+
+  const allNodeX = [...posMap.values()].map((n) => n.x);
+  // avgNodeY / avgNodeX: O(1) scalars used for back-edge above/below heuristic and arc spread direction.
+  // layoutNodes.length === 0 is unreachable here (early-return guard at line 92 exits for empty diagrams).
+  const avgNodeY = layoutNodes.length > 0
+    ? layoutNodes.reduce((s, n) => s + n.y, 0) / layoutNodes.length
+    : 0;
+  const avgNodeX = layoutNodes.length > 0
+    ? layoutNodes.reduce((s, n) => s + n.x, 0) / layoutNodes.length
+    : 0;
 
   // Adjacent-rank edges: 4-point elbow (perpendicular exit/entry, no crossings).
   // Multi-rank edges: dagre's interior waypoints for obstacle avoidance, with
   // first/last points pinned to exact node boundaries at node-center Y.
-  const layoutEdges: ISLayoutEdge[] = parsed.edges.map((edge, i) => {
-    const src = nodeMap.get(edge.source)!;
-    const tgt = nodeMap.get(edge.target)!;
+
+  // Precompute Y offsets and parallel counts for parallel edges (same directed source→target).
+  // Edges beyond MAX_PARALLEL_EDGES in a group are marked with parallelCount=0 and excluded from layout.
+  const edgeYOffsets: number[] = new Array(parsed.edges.length).fill(0);
+  const edgeParallelCounts: number[] = new Array(parsed.edges.length).fill(1);
+  const parallelGroups = new Map<string, number[]>();
+  for (let i = 0; i < parsed.edges.length; i++) {
+    const edge = parsed.edges[i];
+    const key = `${edge.source}\x00${edge.target}`; // null-byte separator — safe in all label strings
+    parallelGroups.set(key, parallelGroups.get(key) ?? []);
+    parallelGroups.get(key)!.push(i);
+  }
+  for (const group of parallelGroups.values()) {
+    // Cap group to MAX_PARALLEL_EDGES; mark excess edges for exclusion
+    const capped = group.slice(0, MAX_PARALLEL_EDGES);
+    for (const idx of group.slice(MAX_PARALLEL_EDGES)) {
+      edgeParallelCounts[idx] = 0; // sentinel: exclude from layout
+    }
+    if (capped.length < 2) continue;
+    // Clamp spacing so the bundle fits within node bounds regardless of edge count
+    const effectiveSpacing = Math.min(PARALLEL_SPACING, (NODE_HEIGHT - PARALLEL_EDGE_MARGIN) / (capped.length - 1));
+    for (let j = 0; j < capped.length; j++) {
+      edgeYOffsets[capped[j]] = (j - (capped.length - 1) / 2) * effectiveSpacing;
+      edgeParallelCounts[capped[j]] = capped.length;
+    }
+  }
+
+  const layoutEdges: ISLayoutEdge[] = [];
+  for (let i = 0; i < parsed.edges.length; i++) {
+    const edge = parsed.edges[i];
+    const src = posMap.get(edge.source);
+    const tgt = posMap.get(edge.target);
+    // Exclude edges beyond the parallel cap and edges with missing node positions
+    if (edgeParallelCounts[i] === 0) continue;
+    if (!src || !tgt) continue;
+    const yOffset = edgeYOffsets[i];
+    const parallelCount = edgeParallelCounts[i];
     const exitX = src.x + src.width / 2;
     const enterX = tgt.x - tgt.width / 2;
     const dagreEdge = g.edge(edge.source, edge.target, `e${i}`);
@@ -134,26 +223,102 @@ export function layoutInitiativeStatus(parsed: ParsedInitiativeStatus): ISLayout
     const hasIntermediateRank = allNodeX.some((x) => x > src.x + 20 && x < tgt.x - 20);
     const step = Math.min((enterX - exitX) * 0.15, 20);
 
-    const fixedDagrePoints = dagrePoints.length >= 2 ? [
-      { x: exitX, y: src.y },
-      ...dagrePoints.slice(1, -1),
-      { x: enterX, y: tgt.y },
-    ] : dagrePoints;
-
-    const points = (tgt.x > src.x && !hasIntermediateRank)
-      ? [
-          { x: exitX,         y: src.y },
-          { x: exitX + step,  y: src.y },
-          { x: enterX - step, y: tgt.y },
-          { x: enterX,        y: tgt.y },
-        ]
-      : fixedDagrePoints;
-    return { source: edge.source, target: edge.target, label: edge.label,
-             status: edge.status, lineNumber: edge.lineNumber, points };
-  });
+    // 4-branch routing: isBackEdge → isYDisplaced → 4-point elbow → fixedDagrePoints
+    const isBackEdge = tgt.x < src.x - 5; // 5px epsilon: same-rank same-X nodes must not false-match
+    const isYDisplaced = !isBackEdge
+      && Math.abs(tgt.y - src.y) > NODESEP;
+    // Note: hasIntermediateRank guard intentionally omitted from isYDisplaced — the > NODESEP threshold
+    // already filters normal adjacent-rank fans (which spread by ~NODESEP); the guard would block the
+    // original use case (fan targets far below source in the same adjacent rank).
+
+    let points: { x: number; y: number }[];
+
+    if (isBackEdge) {
+      // 3-point arc via bottom (or top) of both nodes — bypasses dagre entirely so arrowhead is visible.
+      // curveMonotoneX requires monotone-decreasing X (src.x > tgt.x for back-edges) ✓
+      // Parallel back-edges share the same arc (yOffset ignored) — acknowledged limitation, out of scope.
+      const routeAbove = Math.min(src.y, tgt.y) > avgNodeY;
+      const srcHalfH = src.height / 2;
+      const tgtHalfH = tgt.height / 2;
+      const rawMidX = (src.x + tgt.x) / 2;
+      const spreadDir = avgNodeX < rawMidX ? 1 : -1;
+      // Clamp midX to [tgt.x, src.x] to preserve monotone-decreasing X for curveMonotoneX.
+      // When nodes are near-same-X the arc stays narrow but valid.
+      const unclamped = Math.abs(src.x - tgt.x) < NODE_WIDTH
+        ? rawMidX + spreadDir * BACK_EDGE_MIN_SPREAD
+        : rawMidX;
+      const midX = Math.min(src.x, Math.max(tgt.x, unclamped));
+      if (routeAbove) {
+        const arcY = Math.min(src.y - srcHalfH, tgt.y - tgtHalfH) - BACK_EDGE_MARGIN;
+        points = [
+          { x: src.x, y: src.y - srcHalfH },
+          { x: midX,  y: arcY },
+          { x: tgt.x, y: tgt.y - tgtHalfH },
+        ];
+      } else {
+        const arcY = Math.max(src.y + srcHalfH, tgt.y + tgtHalfH) + BACK_EDGE_MARGIN;
+        points = [
+          { x: src.x, y: src.y + srcHalfH },
+          { x: midX,  y: arcY },
+          { x: tgt.x, y: tgt.y + tgtHalfH },
+        ];
+      }
+    } else if (isYDisplaced) {
+      // 3-point diagonal: exit bottom/top-center of source, enter left-center of target.
+      // Using src.x (center) not exitX (right side) avoids overlapping the parallel bundle.
+      const exitY = tgt.y > src.y + NODESEP
+        ? src.y + src.height / 2   // target is below — exit bottom
+        : src.y - src.height / 2;  // target is above — exit top
+      const midX = Math.max(src.x + 1, (src.x + enterX) / 2); // +1 ensures strictly increasing X
+      const midY = (exitY + tgt.y) / 2;
+      points = [
+        { x: src.x,  y: exitY },
+        { x: midX,   y: midY },
+        { x: enterX, y: tgt.y },
+      ];
+    } else if (tgt.x > src.x && !hasIntermediateRank) {
+      // 4-point elbow: adjacent-rank forward edges (unchanged)
+      points = [
+        { x: exitX,         y: src.y },           // exits node center — stays pinned
+        { x: exitX + step,  y: src.y + yOffset },  // fans out
+        { x: enterX - step, y: tgt.y + yOffset },  // still fanned
+        { x: enterX,        y: tgt.y },            // enters node center — stays pinned
+      ];
+    } else {
+      // fixedDagrePoints: multi-rank forward edges — dagre interior waypoints for obstacle avoidance.
+      // dagrePoints is still fetched above (line 209) and available here.
+      points = dagrePoints.length >= 2 ? [
+        { x: exitX, y: src.y + yOffset },
+        ...dagrePoints.slice(1, -1),
+        { x: enterX, y: tgt.y + yOffset },
+      ] : dagrePoints;
+    }
+    layoutEdges.push({ source: edge.source, target: edge.target, label: edge.label,
+                       status: edge.status, lineNumber: edge.lineNumber, points, parallelCount });
+  }
 
   // Compute group bounding boxes
   const layoutGroups: ISLayoutGroup[] = [];
+
+  // Collapsed groups: dagre placed them as regular nodes → normalize to top-left
+  for (const group of originalGroups) {
+    if (collapsedGroupLabels.has(group.label)) {
+      const pos = g.node(group.label);
+      if (!pos) continue;
+      layoutGroups.push({
+        label: group.label,
+        status: collapsedGroupStatuses.get(group.label) ?? null,
+        x: pos.x - pos.width / 2,
+        y: pos.y - pos.height / 2,
+        width: pos.width,
+        height: pos.height,
+        lineNumber: group.lineNumber,
+        collapsed: true,
+      });
+    }
+  }
+
+  // Expanded groups: bounding box from member positions
   if (parsed.groups.length > 0) {
     const nMap = new Map(layoutNodes.map((n) => [n.label, n]));
     for (const group of parsed.groups) {
@@ -182,10 +347,12 @@ export function layoutInitiativeStatus(parsed: ParsedInitiativeStatus): ISLayout
         width: maxX - minX + GROUP_PADDING * 2,
         height: maxY - minY + GROUP_PADDING * 2,
         lineNumber: group.lineNumber,
+        collapsed: false,
       });
     }
   }
 
+
   // Compute total dimensions
   let totalWidth = 0;
   let totalHeight = 0;

package/src/initiative-status/renderer.ts

@@ -25,13 +25,14 @@ const EDGE_LABEL_FONT_SIZE = 11;
 const EDGE_STROKE_WIDTH = 2;
 const NODE_STROKE_WIDTH = 2;
 const NODE_RX = 8;
-const ARROWHEAD_W = 10;
-const ARROWHEAD_H = 7;
+const ARROWHEAD_W = 5;
+const ARROWHEAD_H = 4;
 const CHAR_WIDTH_RATIO = 0.6; // approx char width / font size for Helvetica
 const NODE_TEXT_PADDING = 12; // horizontal padding inside node for text
 const SERVICE_RX = 10;
 const GROUP_EXTRA_PADDING = 8;
 const GROUP_LABEL_FONT_SIZE = 11;
+const COLLAPSE_BAR_HEIGHT = 6;
 
 // ============================================================
 // Color helpers
@@ -602,51 +603,98 @@ export function renderInitiativeStatus(
 
   // Render groups (background layer, before edges and nodes)
   for (const group of layout.groups) {
-    if (group.width === 0 && group.height === 0) continue;
-    const gx = group.x - GROUP_EXTRA_PADDING;
-    const gy = group.y - GROUP_EXTRA_PADDING - GROUP_LABEL_FONT_SIZE - 4;
-    const gw = group.width + GROUP_EXTRA_PADDING * 2;
-    const gh = group.height + GROUP_EXTRA_PADDING * 2 + GROUP_LABEL_FONT_SIZE + 4;
-
-    const groupStatusColor = group.status
-      ? statusColor(group.status, palette, isDark)
-      : palette.textMuted;
-    // More subdued than nodes: 15% status color vs 30% for nodes
-    const fillColor = mix(groupStatusColor, isDark ? palette.surface : palette.bg, 15);
-    const strokeColor = mix(groupStatusColor, palette.textMuted, 50);
-
-    const groupG = contentG
-      .append('g')
-      .attr('class', 'is-group')
-      .attr('data-line-number', String(group.lineNumber));
+    if (group.collapsed) {
+      // ── Collapsed: node-like box (same fill/stroke as nodes) + drill-bar ──
+      const fillCol = nodeFill(group.status, palette, isDark);
+      const strokeCol = nodeStroke(group.status, palette, isDark);
+      const textCol = nodeTextColor(group.status, palette, isDark);
+      const clipId = `clip-group-${group.lineNumber}`;
+
+      const groupG = contentG
+        .append('g')
+        .attr('class', 'is-group is-group-collapsed')
+        .attr('data-line-number', String(group.lineNumber))
+        .attr('data-group-toggle', group.label)
+        .style('cursor', 'pointer');
+
+      // Clip path for drill-bar rounded corners
+      groupG.append('clipPath').attr('id', clipId)
+        .append('rect')
+        .attr('x', group.x).attr('y', group.y)
+        .attr('width', group.width).attr('height', group.height)
+        .attr('rx', NODE_RX);
+
+      // Main box
+      groupG.append('rect')
+        .attr('x', group.x).attr('y', group.y)
+        .attr('width', group.width).attr('height', group.height)
+        .attr('rx', NODE_RX)
+        .attr('fill', fillCol)
+        .attr('stroke', strokeCol)
+        .attr('stroke-width', NODE_STROKE_WIDTH);
+
+      // Drill-bar (6px bottom stripe, clipped to rounded corners)
+      groupG.append('rect')
+        .attr('x', group.x)
+        .attr('y', group.y + group.height - COLLAPSE_BAR_HEIGHT)
+        .attr('width', group.width)
+        .attr('height', COLLAPSE_BAR_HEIGHT)
+        .attr('fill', strokeCol)
+        .attr('clip-path', `url(#${clipId})`)
+        .attr('class', 'is-collapse-bar');
+
+      // Label centered (above drill-bar)
+      groupG.append('text')
+        .attr('x', group.x + group.width / 2)
+        .attr('y', group.y + group.height / 2 - COLLAPSE_BAR_HEIGHT / 2)
+        .attr('text-anchor', 'middle')
+        .attr('dominant-baseline', 'central')
+        .attr('fill', textCol)
+        .attr('font-size', NODE_FONT_SIZE)
+        .attr('font-weight', 'bold')
+        .attr('font-family', FONT_FAMILY)
+        .text(group.label);
 
-    groupG
-      .append('rect')
-      .attr('x', gx)
-      .attr('y', gy)
-      .attr('width', gw)
-      .attr('height', gh)
-      .attr('rx', 6)
-      .attr('fill', fillColor)
-      .attr('stroke', strokeColor)
-      .attr('stroke-width', 1)
-      .attr('stroke-opacity', 0.5);
-
-    groupG
-      .append('text')
-      .attr('x', gx + 8)
-      .attr('y', gy + GROUP_LABEL_FONT_SIZE + 4)
-      .attr('fill', strokeColor)
-      .attr('font-size', GROUP_LABEL_FONT_SIZE)
-      .attr('font-weight', 'bold')
-      .attr('opacity', 0.7)
-      .attr('class', 'is-group-label')
-      .text(group.label);
+    } else {
+      // ── Expanded: neutral background (no status color bleed) ──
+      if (group.width === 0 && group.height === 0) continue;
+      const gx = group.x - GROUP_EXTRA_PADDING;
+      const gy = group.y - GROUP_EXTRA_PADDING - GROUP_LABEL_FONT_SIZE - 4;
+      const gw = group.width + GROUP_EXTRA_PADDING * 2;
+      const gh = group.height + GROUP_EXTRA_PADDING * 2 + GROUP_LABEL_FONT_SIZE + 4;
+
+      const fillColor = isDark ? palette.surface : palette.bg;
+      const strokeColor = palette.textMuted;
+
+      const groupG = contentG
+        .append('g')
+        .attr('class', 'is-group')
+        .attr('data-line-number', String(group.lineNumber))
+        .attr('data-group-toggle', group.label)
+        .style('cursor', 'pointer');
+
+      groupG
+        .append('rect')
+        .attr('x', gx)
+        .attr('y', gy)
+        .attr('width', gw)
+        .attr('height', gh)
+        .attr('rx', 6)
+        .attr('fill', fillColor)
+        .attr('stroke', strokeColor)
+        .attr('stroke-opacity', 0.5);
+
+      groupG
+        .append('text')
+        .attr('x', gx + 8)
+        .attr('y', gy + GROUP_LABEL_FONT_SIZE + 4)
+        .attr('fill', strokeColor)
+        .attr('font-size', GROUP_LABEL_FONT_SIZE)
+        .attr('font-weight', 'bold')
+        .attr('opacity', 0.7)
+        .attr('class', 'is-group-label')
+        .text(group.label);
 
-    if (onClickItem) {
-      groupG.style('cursor', 'pointer').on('click', () => {
-        onClickItem(group.lineNumber);
-      });
     }
   }
 
@@ -670,7 +718,7 @@ export function renderInitiativeStatus(
         .attr('d', pathD)
         .attr('fill', 'none')
         .attr('stroke', 'transparent')
-        .attr('stroke-width', 16);
+        .attr('stroke-width', Math.max(6, Math.round(16 / (edge.parallelCount ?? 1))));
 
       edgeG
         .append('path')

package/src/org/layout.ts

@@ -110,6 +110,8 @@ const LEGEND_ENTRY_FONT_W = 10 * 0.6;
 const LEGEND_ENTRY_DOT_GAP = 4;
 const LEGEND_ENTRY_TRAIL = 8;
 const LEGEND_GROUP_GAP = 12;
+const LEGEND_EYE_SIZE = 14;
+const LEGEND_EYE_GAP = 6;
 
 // ============================================================
 // Helpers
@@ -263,7 +265,7 @@ function centerHeavyChildren(node: TreeNode): void {
 
 function computeLegendGroups(
   tagGroups: OrgTagGroup[],
-  _showEyeIcons: boolean,
+  showEyeIcons: boolean,
   usedValuesByGroup?: Map<string, Set<string>>
 ): OrgLegendGroup[] {
   const groups: OrgLegendGroup[] = [];
@@ -291,8 +293,9 @@ function computeLegendGroups(
         entry.value.length * LEGEND_ENTRY_FONT_W +
         LEGEND_ENTRY_TRAIL;
     }
+    const eyeSpace = showEyeIcons ? LEGEND_EYE_SIZE + LEGEND_EYE_GAP : 0;
     const capsuleWidth =
-      LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + entriesWidth;
+      LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + eyeSpace + entriesWidth;
 
     groups.push({
       name: group.name,

package/src/org/renderer.ts

@@ -49,8 +49,16 @@ const LEGEND_ENTRY_FONT_W = LEGEND_ENTRY_FONT_SIZE * 0.6;
 const LEGEND_ENTRY_DOT_GAP = 4;
 const LEGEND_ENTRY_TRAIL = 8;
 const LEGEND_GROUP_GAP = 12;
+const LEGEND_EYE_SIZE = 14;
+const LEGEND_EYE_GAP = 6;
 const LEGEND_FIXED_GAP = 8; // gap between fixed legend and scaled diagram
 
+// Eye icon SVG paths (14×14 viewBox)
+const EYE_OPEN_PATH =
+  'M1 7s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5z M7 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z';
+const EYE_CLOSED_PATH =
+  'M2.5 2.5l9 9 M1.5 7s2.2-4 5.5-4c1.2 0 2.2.5 3 1.1 M12.5 7s-2.2 4-5.5 4c-1.2 0-2.2-.5-3-1.1';
+
 // ============================================================
 // Color helpers
 // ============================================================
@@ -122,14 +130,19 @@ export function renderOrg(
   const fixedLegend = !exportDims && hasLegend && !legendOnly;
   const legendReserve = fixedLegend ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
 
+  // Similarly, render the title at fixed size outside the scaled group in
+  // non-export mode so it stays legible regardless of how small the chart scale is.
+  const fixedTitle = !exportDims && !!parsed.title;
+  const titleReserve = fixedTitle ? TITLE_HEIGHT : 0;
+
   // Compute scale to fit diagram in viewport
   const diagramW = layout.width;
-  let diagramH = layout.height + titleOffset;
+  let diagramH = layout.height + (fixedTitle ? 0 : titleOffset);
   if (fixedLegend) {
     // Remove the legend space from diagram height — legend is rendered separately
     diagramH -= layoutLegendShift;
   }
-  const availH = height - DIAGRAM_PADDING * 2 - legendReserve;
+  const availH = height - DIAGRAM_PADDING * 2 - legendReserve - titleReserve;
   const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
   const scaleY = availH / diagramH;
   const scale = Math.min(MAX_SCALE, scaleX, scaleY);
@@ -139,8 +152,8 @@ export function renderOrg(
   const offsetX = (width - scaledW) / 2;
   const offsetY =
     legendPosition === 'top' && fixedLegend
-      ? DIAGRAM_PADDING + legendReserve
-      : DIAGRAM_PADDING;
+      ? DIAGRAM_PADDING + legendReserve + titleReserve
+      : DIAGRAM_PADDING + titleReserve;
 
   // Create SVG
   const svg = d3Selection
@@ -156,11 +169,17 @@ export function renderOrg(
     .attr('transform', `translate(${offsetX}, ${offsetY}) scale(${scale})`);
 
   // Title
+  // In non-export mode (fixedTitle), render at native size directly on the SVG
+  // so it stays legible regardless of chart scale. In export mode, render inside
+  // mainG so it scales with the diagram to match the exported dimensions.
   if (parsed.title) {
-    const titleEl = mainG
+    const titleParent = fixedTitle ? svg : mainG;
+    const titleX = fixedTitle ? width / 2 : diagramW / 2;
+    const titleY = fixedTitle ? DIAGRAM_PADDING + TITLE_FONT_SIZE : TITLE_FONT_SIZE;
+    const titleEl = titleParent
       .append('text')
-      .attr('x', diagramW / 2)
-      .attr('y', TITLE_FONT_SIZE)
+      .attr('x', titleX)
+      .attr('y', titleY)
       .attr('text-anchor', 'middle')
       .attr('fill', palette.text)
       .attr('font-size', TITLE_FONT_SIZE)
@@ -187,10 +206,10 @@ export function renderOrg(
     }
   }
 
-  // Content group (offset by title)
+  // Content group (offset by title — only when title is inside the scaled group)
   const contentG = mainG
     .append('g')
-    .attr('transform', `translate(0, ${titleOffset})`);
+    .attr('transform', `translate(0, ${fixedTitle ? 0 : titleOffset})`);
 
   // Build display name map from tag groups (lowercase key → original casing)
   const displayNames = new Map<string, string>();
@@ -501,7 +520,7 @@ export function renderOrg(
             'transform',
             legendPosition === 'bottom'
               ? `translate(0, ${height - DIAGRAM_PADDING - LEGEND_HEIGHT})`
-              : `translate(0, ${DIAGRAM_PADDING})`
+              : `translate(0, ${DIAGRAM_PADDING + titleReserve})`
           )
       : contentG;
 
@@ -578,9 +597,44 @@ export function renderOrg(
         .attr('text-anchor', 'middle')
         .text(pillLabel);
 
+      // Eye icon for visibility toggle (active only, app mode)
+      if (isActive && fixedLegend) {
+        const groupKey = group.name.toLowerCase();
+        const isHidden = hiddenAttributes?.has(groupKey) ?? false;
+        const eyeX = pillXOff + pillWidth + LEGEND_EYE_GAP;
+        const eyeY = (LEGEND_HEIGHT - LEGEND_EYE_SIZE) / 2;
+        const hitPad = 6;
+
+        const eyeG = gEl
+          .append('g')
+          .attr('class', 'org-legend-eye')
+          .attr('data-legend-visibility', groupKey)
+          .style('cursor', 'pointer')
+          .attr('opacity', isHidden ? 0.4 : 0.7);
+
+        // Transparent hit area for easier clicking
+        eyeG.append('rect')
+          .attr('x', eyeX - hitPad)
+          .attr('y', eyeY - hitPad)
+          .attr('width', LEGEND_EYE_SIZE + hitPad * 2)
+          .attr('height', LEGEND_EYE_SIZE + hitPad * 2)
+          .attr('fill', 'transparent')
+          .attr('pointer-events', 'all');
+
+        eyeG.append('path')
+          .attr('d', isHidden ? EYE_CLOSED_PATH : EYE_OPEN_PATH)
+          .attr('transform', `translate(${eyeX}, ${eyeY})`)
+          .attr('fill', 'none')
+          .attr('stroke', palette.textMuted)
+          .attr('stroke-width', 1.2)
+          .attr('stroke-linecap', 'round')
+          .attr('stroke-linejoin', 'round');
+      }
+
       // Entries inside capsule (active only)
       if (isActive) {
-        let entryX = pillXOff + pillWidth + 4;
+        const eyeShift = fixedLegend ? LEGEND_EYE_SIZE + LEGEND_EYE_GAP : 0;
+        let entryX = pillXOff + pillWidth + 4 + eyeShift;
         for (const entry of group.entries) {
           const entryG = gEl
             .append('g')

package/src/org/resolver.ts

@@ -228,7 +228,7 @@ async function resolveFile(
       continue;
     }
     if (isTagBlockHeading(trimmed)) continue; // skip inline tag group headings
-    if (lines[i] !== trimmed) continue; // skip tag group entries (indented lines)
+    if (/^\s/.test(lines[i])) continue; // skip tag group entries (indented lines)
 
     const tagsMatch = trimmed.match(TAGS_RE);
     if (tagsMatch) {