@prisma-next/cli 0.12.0-dev.5 → 0.12.0-dev.50

package/src/utils/formatters/migration-graph-tree-render.ts

@@ -1,7 +1,18 @@
 import { EMPTY_CONTRACT_HASH } from '@prisma-next/migration-tools/constants';
-import { bold } from 'colorette';
+import { bold, createColors, green, yellow } from 'colorette';
 import stringWidth from 'string-width';
 import type { GlyphMode } from '../glyph-mode';
+import {
+  laneColorForColumn,
+  NEUTRAL_LANE_COLUMN,
+  type RowArcLaneColors,
+  resolveConnectorLaneColors,
+  resolveRowArcLaneColors,
+  stylerForLaneColumn,
+} from './migration-graph-lane-colors';
+
+export { resolveConnectorLaneColors } from './migration-graph-lane-colors';
+
 import type {
   MigrationGraphGridModel,
   MigrationGraphGridRow,
@@ -12,10 +23,15 @@ import {
   MIGRATION_LIST_HASH_WIDTH,
   migrationListEmptySource,
   migrationListForwardArrow,
+  padFromHashColumn,
 } from './migration-list-data-column';
 import type { MigrationEdgeKind } from './migration-list-graph-topology';
 import type { MigrationListStyler } from './migration-list-render';
-import { CONTRACT_MARKER_NAME, createAnsiMigrationListStyler } from './migration-list-styler';
+import {
+  CONTRACT_MARKER_NAME,
+  createAnsiMigrationListStyler,
+  formatContractNodeOverlays,
+} from './migration-list-styler';
 
 const LABEL_GAP = 2;
 
@@ -26,14 +42,24 @@ const LABEL_GAP = 2;
  */
 const DB_MARKER_NAME = 'db';
 
+export interface MigrationEdgeAnnotation {
+  readonly status?: 'applied' | 'pending';
+  readonly operationCount?: number;
+  readonly invariants?: readonly string[];
+}
+
 export interface RenderMigrationGraphTreeOptions {
   readonly refsByHash?: ReadonlyMap<string, readonly string[]>;
+  readonly edgeAnnotationsByHash?: ReadonlyMap<string, MigrationEdgeAnnotation>;
   readonly dbHash?: string;
   readonly contractHash?: string;
   readonly activeRefName?: string;
   readonly hashLength?: number;
+  readonly globalMaxEdgeTreePrefixWidth?: number;
+  readonly globalMaxDirNameWidth?: number;
   readonly colorize: boolean;
   readonly glyphMode?: GlyphMode;
+  readonly styler?: MigrationListStyler;
 }
 
 interface MigrationGraphTreeGlyphPalette {
@@ -48,6 +74,7 @@ interface MigrationGraphTreeGlyphPalette {
   readonly arcBranchCorner: string;
   readonly arcBranchTee: string;
   readonly arcLandCorner: string;
+  readonly arcLandTee: string;
   readonly arcCrossing: string;
   readonly arcLandBridge: string;
   readonly horizontalPass: string;
@@ -71,6 +98,7 @@ const UNICODE_PALETTE: MigrationGraphTreeGlyphPalette = {
   arcBranchCorner: '╮ ',
   arcBranchTee: '┬─',
   arcLandCorner: '╯ ',
+  arcLandTee: '┴─',
   arcCrossing: '┼─',
   arcLandBridge: '──',
   horizontalPass: '──',
@@ -94,6 +122,7 @@ const ASCII_PALETTE: MigrationGraphTreeGlyphPalette = {
   arcBranchCorner: '\\ ',
   arcBranchTee: '+-',
   arcLandCorner: '/ ',
+  arcLandTee: '+-',
   arcCrossing: '+-',
   arcLandBridge: '--',
   horizontalPass: '--',
@@ -109,6 +138,13 @@ function paletteFor(mode: GlyphMode): MigrationGraphTreeGlyphPalette {
   return mode === 'ascii' ? ASCII_PALETTE : UNICODE_PALETTE;
 }
 
+function overlayStatusGlyphs(mode: GlyphMode): {
+  readonly applied: string;
+  readonly pending: string;
+} {
+  return mode === 'ascii' ? { applied: '+', pending: '>' } : { applied: '✓', pending: '⧗' };
+}
+
 function arrowForEdgeKind(
   kind: MigrationEdgeKind,
   palette: MigrationGraphTreeGlyphPalette,
@@ -116,56 +152,153 @@ function arrowForEdgeKind(
   return palette.edgeArrow[kind];
 }
 
+/**
+ * Forced bold for branch-coloured names. A branched name pairs its lane hue
+ * (also forced, via {@link laneColorForColumn}) with bold; both must emit even
+ * when colorette's ambient TTY detection is off, so the colorized branch name
+ * is deterministically bold + hue rather than hue-only.
+ */
+const { bold: forcedBold } = createColors({ useColor: true });
+
+function laneStylerForColumn(
+  colorColumn: number,
+  colorize: boolean,
+  style: MigrationListStyler,
+): (text: string) => string {
+  return stylerForLaneColumn(colorColumn, colorize, style.lane);
+}
+
+/**
+ * Tint a branch-owned token (direction arrow, migration name) by its edge's
+ * lane so the whole branch row reads in one colour. Column 0 has nothing to be
+ * told apart from in the common linear chain, so it keeps the token's existing
+ * default styling (`fallback`) rather than a palette hue; only lanes ≥ 1 take a
+ * colour. With colour off, the fallback (also colourless) is used unchanged.
+ */
+function branchStylerOrDefault(
+  column: number,
+  colorize: boolean,
+  fallback: (text: string) => string,
+): (text: string) => string {
+  if (!colorize || column <= NEUTRAL_LANE_COLUMN) {
+    return fallback;
+  }
+  return laneColorForColumn(column);
+}
+
+/**
+ * Render a crossing tee (`┼─`): the junction stays dim/neutral so neither arc
+ * steals the cell; the trailing dash takes the served lane hue.
+ */
+function renderArcCrossing(
+  pair: string,
+  dashColumn: number,
+  colorize: boolean,
+  style: MigrationListStyler,
+): string {
+  const junction = colorize ? style.lane : (text: string) => text;
+  const dash = laneStylerForColumn(dashColumn, colorize, style);
+  return junction(pair.slice(0, 1)) + dash(pair.slice(1));
+}
+
+/**
+ * Render a connector tee (`├─` / `┬─` / `┴─`) with its junction glyph and its
+ * trailing dash coloured independently: the junction anchors its own lane while
+ * the dash leads into the branch on its right.
+ */
+function renderConnectorTee(
+  pair: string,
+  glyphColumn: number,
+  dashColumn: number,
+  colorize: boolean,
+  style: MigrationListStyler,
+): string {
+  const glyph = laneStylerForColumn(glyphColumn, colorize, style);
+  if (glyphColumn === dashColumn) {
+    return glyph(pair);
+  }
+  return glyph(pair.slice(0, 1)) + laneStylerForColumn(dashColumn, colorize, style)(pair.slice(1));
+}
+
 /**
  * A node-marker glyph pair (`○◂`, `○─`, `*<`, `*-`) is the contract node
- * marker (`○` / `*`) followed by an arc connector (`◂` / `─` / `<` / `-`).
- * The marker is the signal and stays bright (`style.kind`); the connector is
- * gutter and stays dim (`style.lane`) — consistent with the plain node marker,
- * which is never dimmed.
+ * marker (`○` / `*`) followed by an arc connector (`◂` / `─` / `<` / `-`). The
+ * marker takes its own lane's hue (so each node visibly belongs to its branch);
+ * the connector follows the arc it belongs to (its owning back-lane hue).
+ * Direction arrows are handled elsewhere — they take their edge's lane hue too.
  */
-function renderNodeMarkerPair(pair: string, style: MigrationListStyler): string {
-  return style.kind(pair.slice(0, 1)) + style.lane(pair.slice(1));
+function renderNodeMarkerPair(
+  pair: string,
+  nodeColumn: number,
+  arcColumn: number,
+  colorize: boolean,
+  style: MigrationListStyler,
+): string {
+  const marker = laneStylerForColumn(nodeColumn, colorize, style);
+  const connector = laneStylerForColumn(arcColumn, colorize, style);
+  return marker(pair.slice(0, 1)) + connector(pair.slice(1));
 }
 
 function renderCellPair(
   cell: StructuralCell,
+  column: number,
+  colors: RowArcLaneColors,
+  colorize: boolean,
   style: MigrationListStyler,
   palette: MigrationGraphTreeGlyphPalette,
 ): string {
+  const laneColumn = colors.lane[column] ?? column;
+  const lane = laneStylerForColumn(laneColumn, colorize, style);
   switch (cell.kind) {
-    case 'node':
-      if (cell.arcLand === true) return renderNodeMarkerPair(palette.arcLand, style);
-      if (cell.arcTee === true) return renderNodeMarkerPair(palette.arcTee, style);
-      return style.kind(palette.node);
+    case 'node': {
+      const arcColumn = colors.connector[column] ?? NEUTRAL_LANE_COLUMN;
+      if (cell.arcLand === true) {
+        return renderNodeMarkerPair(palette.arcLand, column, arcColumn, colorize, style);
+      }
+      if (cell.arcTee === true) {
+        return renderNodeMarkerPair(palette.arcTee, column, arcColumn, colorize, style);
+      }
+      return lane(palette.node);
+    }
     case 'vertical-pass':
-      return style.lane(palette.verticalPass);
+      return lane(palette.verticalPass);
     case 'edge-lane':
-      // The lane stays dim; the direction arrow (↑ / ↓ / ⟲) is the signal and
-      // stays bright, like the contract-node marker.
       return cell.ownsLabel
-        ? style.lane(palette.verticalPass.trimEnd()) +
-            style.kind(arrowForEdgeKind(cell.edgeKind, palette))
-        : style.lane(palette.verticalPass);
+        ? lane(palette.verticalPass.trimEnd()) +
+            branchStylerOrDefault(
+              column,
+              colorize,
+              style.kind,
+            )(arrowForEdgeKind(cell.edgeKind, palette))
+        : lane(palette.verticalPass);
     case 'branch-tee':
-      return style.lane(palette.branchTee);
+      return lane(palette.branchTee);
     case 'merge-tee':
-      return style.lane(palette.mergeTee);
+      return lane(palette.mergeTee);
     case 'branch-corner':
-      return style.lane(palette.branchCorner);
+      return lane(palette.branchCorner);
     case 'merge-corner':
-      return style.lane(palette.mergeCorner);
+      return lane(palette.mergeCorner);
     case 'arc-branch-corner':
-      return style.lane(palette.arcBranchCorner);
+      return lane(palette.arcBranchCorner);
     case 'arc-branch-tee':
-      return style.lane(palette.arcBranchTee);
+      return lane(palette.arcBranchTee);
     case 'arc-land-corner':
-      return style.lane(palette.arcLandCorner);
+      return lane(palette.arcLandCorner);
+    case 'arc-land-tee':
+      return renderConnectorTee(
+        palette.arcLandTee,
+        laneColumn,
+        colors.dash[column] ?? laneColumn,
+        colorize,
+        style,
+      );
     case 'arc-crossing':
-      return style.lane(palette.arcCrossing);
+      return lane(palette.arcLandBridge);
     case 'arc-land-bridge':
-      return style.lane(palette.arcLandBridge);
+      return lane(palette.arcLandBridge);
     case 'horizontal-pass':
-      return style.lane(palette.horizontalPass);
+      return lane(palette.horizontalPass);
     case 'empty':
       return '  ';
   }
@@ -174,34 +307,56 @@ function renderCellPair(
 function renderConnectorRow(
   row: MigrationGraphGridRow,
   gridWidth: number,
+  colorize: boolean,
   style: MigrationListStyler,
   palette: MigrationGraphTreeGlyphPalette,
 ): string {
   const isMerge = row.kind === 'merge-connector';
   if (row.cells.length > 0) {
+    const colors = resolveConnectorLaneColors(row.cells, row.startLane ?? 0);
     let seenTee = false;
     let out = '';
-    for (const cell of row.cells) {
+    for (let column = 0; column < row.cells.length; column++) {
+      const cell = row.cells[column];
+      if (cell === undefined) continue;
+      const glyphColumn = colors.glyph[column] ?? column;
+      const dashColumn = colors.dash[column] ?? glyphColumn;
+      const lane = laneStylerForColumn(glyphColumn, colorize, style);
       switch (cell.kind) {
         case 'branch-tee':
-          out += style.lane(seenTee ? palette.connectorBranchTeeCo : palette.connectorBranchTee);
+          out += renderConnectorTee(
+            seenTee ? palette.connectorBranchTeeCo : palette.connectorBranchTee,
+            glyphColumn,
+            dashColumn,
+            colorize,
+            style,
+          );
           seenTee = true;
           break;
         case 'merge-tee':
-          out += style.lane(seenTee ? palette.connectorMergeTeeCo : palette.connectorBranchTee);
+          out += renderConnectorTee(
+            seenTee ? palette.connectorMergeTeeCo : palette.connectorBranchTee,
+            glyphColumn,
+            dashColumn,
+            colorize,
+            style,
+          );
           seenTee = true;
           break;
         case 'branch-corner':
-          out += style.lane(palette.branchCorner);
+          out += lane(palette.branchCorner);
           break;
         case 'merge-corner':
-          out += style.lane(palette.mergeCorner);
+          out += lane(palette.mergeCorner);
           break;
         case 'vertical-pass':
-          out += style.lane(palette.verticalPass);
+          out += lane(palette.verticalPass);
           break;
         case 'horizontal-pass':
-          out += style.lane(palette.horizontalPass);
+          out += lane(palette.horizontalPass);
+          break;
+        case 'arc-crossing':
+          out += renderArcCrossing(palette.arcCrossing, dashColumn, colorize, style);
           break;
         default:
           out += '  ';
@@ -218,13 +373,15 @@ function renderConnectorRow(
 
   const start = row.startLane ?? 0;
   const end = row.endLane ?? start;
+  // The whole fork/merge run reads as one line in the served lane's hue (the
+  // corner it reaches); pass-through columns outside the run keep their own.
+  const runLane = laneStylerForColumn(end, colorize, style);
   let out = '';
   for (let column = 0; column < gridWidth; column++) {
     if (column < start || column > end) out += '  ';
-    else if (column === start) out += style.lane(palette.connectorBranchTee);
-    else if (column === end)
-      out += style.lane(isMerge ? palette.mergeCorner : palette.branchCorner);
-    else out += style.lane(isMerge ? palette.connectorMergeTeeCo : palette.connectorBranchTeeCo);
+    else if (column === start) out += runLane(palette.connectorBranchTee);
+    else if (column === end) out += runLane(isMerge ? palette.mergeCorner : palette.branchCorner);
+    else out += runLane(isMerge ? palette.connectorMergeTeeCo : palette.connectorBranchTeeCo);
   }
   return out;
 }
@@ -239,26 +396,41 @@ function abbreviateHash(hash: string, hashLength: number, emptySource: string):
 
 const MIN_HASH_DATA_COLUMN = 25;
 
+interface ContractOverlayNames {
+  readonly markers: readonly string[];
+  readonly refs: readonly string[];
+}
+
 function overlayNamesForContract(
   contractHash: string,
   opts: RenderMigrationGraphTreeOptions,
-): readonly string[] {
-  const names: string[] = [];
+): ContractOverlayNames {
+  const markers: string[] = [];
+  const refs: string[] = [];
   const userRefs = opts.refsByHash?.get(contractHash);
   if (userRefs) {
-    names.push(...[...userRefs].sort((a, b) => a.localeCompare(b)));
-  }
-  if (opts.dbHash === contractHash) {
-    names.push(DB_MARKER_NAME);
+    refs.push(...[...userRefs].sort((a, b) => a.localeCompare(b)));
   }
   if (opts.contractHash === contractHash && contractHash !== EMPTY_CONTRACT_HASH) {
-    names.push(CONTRACT_MARKER_NAME);
+    markers.push(CONTRACT_MARKER_NAME);
+  }
+  if (opts.dbHash === contractHash) {
+    markers.push(DB_MARKER_NAME);
   }
-  return names;
+  markers.sort((a, b) => {
+    if (a === CONTRACT_MARKER_NAME) {
+      return -1;
+    }
+    if (b === CONTRACT_MARKER_NAME) {
+      return 1;
+    }
+    return a.localeCompare(b);
+  });
+  return { markers, refs };
 }
 
 function createTreeStyler(opts: RenderMigrationGraphTreeOptions): MigrationListStyler {
-  const base = createAnsiMigrationListStyler({ useColor: opts.colorize });
+  const base = opts.styler ?? createAnsiMigrationListStyler({ useColor: opts.colorize });
   const activeRefName = opts.activeRefName;
   if (!opts.colorize || activeRefName === undefined) {
     return base;
@@ -272,6 +444,40 @@ function createTreeStyler(opts: RenderMigrationGraphTreeOptions): MigrationListS
   };
 }
 
+function formatEdgeAnnotationSuffix(
+  migrationHash: string,
+  opts: RenderMigrationGraphTreeOptions,
+  style: MigrationListStyler,
+): string {
+  const annotation = opts.edgeAnnotationsByHash?.get(migrationHash);
+  if (annotation === undefined) {
+    return '';
+  }
+  const segments: string[] = [];
+  if (annotation.operationCount !== undefined) {
+    segments.push(`${annotation.operationCount} ops`);
+  }
+  if (annotation.invariants !== undefined && annotation.invariants.length > 0) {
+    segments.push(style.invariants(annotation.invariants));
+  }
+  const status = annotation.status;
+  if (status !== undefined) {
+    const glyphs = overlayStatusGlyphs(opts.glyphMode ?? 'unicode');
+    const glyph = status === 'applied' ? glyphs.applied : glyphs.pending;
+    const label = status === 'applied' ? 'applied' : 'pending';
+    if (!opts.colorize) {
+      segments.push(`${glyph} ${label}`);
+    } else {
+      const styler = status === 'applied' ? green : yellow;
+      segments.push(styler(`${glyph} ${label}`));
+    }
+  }
+  if (segments.length === 0) {
+    return '';
+  }
+  return `  ${segments.join('  ')}`;
+}
+
 function formatEdgeHashColumn(
   edge: ClassifiedEdge,
   style: MigrationListStyler,
@@ -280,13 +486,16 @@ function formatEdgeHashColumn(
 ): string {
   if (edge.kind === 'self') {
     const hash = abbreviateHash(edge.from, hashLength, palette.emptySource);
-    return `${style.sourceHash(hash)} ${style.glyph(palette.forwardArrow)} ${style.destHash(hash)}`;
+    const source = padFromHashColumn(style.sourceHash(hash), hashLength);
+    return `${source} ${style.glyph(palette.forwardArrow)} ${style.destHash(hash)}`;
   }
   const source =
     edge.from === EMPTY_CONTRACT_HASH
-      ? style.glyph(palette.emptySource) +
-        ' '.repeat(Math.max(0, hashLength - palette.emptySource.length))
-      : style.sourceHash(abbreviateHash(edge.from, hashLength, palette.emptySource));
+      ? padFromHashColumn(style.glyph(palette.emptySource), hashLength)
+      : padFromHashColumn(
+          style.sourceHash(abbreviateHash(edge.from, hashLength, palette.emptySource)),
+          hashLength,
+        );
   const arrow = style.glyph(palette.forwardArrow);
   const dest = style.destHash(abbreviateHash(edge.to, hashLength, palette.emptySource));
   return `${source} ${arrow} ${dest}`;
@@ -297,6 +506,13 @@ function padVisible(text: string, targetWidth: number): string {
   return text + ' '.repeat(padding);
 }
 
+const ANSI_ESCAPE = '\x1b';
+
+function trimTrailingWhitespace(line: string): string {
+  const trailingSpaceBeforeReset = new RegExp(`[\\t ]+((?:${ANSI_ESCAPE}\\[[0-9;]*m)+)$`);
+  return line.replace(trailingSpaceBeforeReset, '$1').replace(/\s+$/, '');
+}
+
 function gridWidthForModel(rows: readonly MigrationGraphGridRow[]): number {
   return rows.reduce(
     (max, row) =>
@@ -336,6 +552,35 @@ function edgeLabelColumn(row: MigrationGraphGridRow, wideLabelColumn: number | u
   return usesFullRowGutter ? row.cells.length * 2 + LABEL_GAP : (laneIndex + 1) * 2 + LABEL_GAP;
 }
 
+function maxEdgeTreePrefixWidth(
+  rows: readonly MigrationGraphGridRow[],
+  wideLabelColumn: number | undefined,
+): number {
+  let max = 0;
+  for (const row of rows) {
+    if (row.kind !== 'edge' || row.edge === undefined) continue;
+    max = Math.max(max, edgeLabelColumn(row, wideLabelColumn));
+  }
+  return max;
+}
+
+export function computeMaxEdgeTreePrefixWidthForLayout(model: MigrationGraphGridModel): number {
+  const wideLabelColumn = gridUsesSkipRollbackArcs(model.rows)
+    ? gridWidthForModel(model.rows) * 2 + 4
+    : undefined;
+  return maxEdgeTreePrefixWidth(model.rows, wideLabelColumn);
+}
+
+export function computeMaxDirNameLengthForLayout(model: MigrationGraphGridModel): number {
+  const allEdges = model.rows
+    .filter(
+      (row): row is MigrationGraphGridRow & { edge: ClassifiedEdge } =>
+        row.kind === 'edge' && row.edge !== undefined,
+    )
+    .map((row) => row.edge);
+  return maxDirNameLength(allEdges);
+}
+
 function nodeHasArcDecoration(row: MigrationGraphGridRow): boolean {
   return row.cells.some(
     (cell) => cell.kind === 'node' && (cell.arcTee === true || cell.arcLand === true),
@@ -360,6 +605,10 @@ export function renderMigrationGraphTree(
     )
     .map((row) => row.edge);
   const maxDirNameLen = maxDirNameLength(allEdges);
+  const effectiveMaxDirNameLen = opts.globalMaxDirNameWidth ?? maxDirNameLen;
+  const maxEdgePrefixWidth =
+    opts.globalMaxEdgeTreePrefixWidth ?? maxEdgeTreePrefixWidth(model.rows, wideLabelColumn);
+  const edgeDirNameWidth = rowDirNameWidth(maxEdgePrefixWidth, effectiveMaxDirNameLen, dirNameGap);
 
   const lines: string[] = [];
 
@@ -373,24 +622,37 @@ export function renderMigrationGraphTree(
     }
 
     if (row.kind === 'branch-connector' || row.kind === 'merge-connector') {
-      lines.push(renderConnectorRow(row, gridWidth, style, palette).replace(/\s+$/, ''));
+      lines.push(
+        trimTrailingWhitespace(renderConnectorRow(row, gridWidth, opts.colorize, style, palette)),
+      );
       continue;
     }
 
-    let gutter = row.cells.map((cell) => renderCellPair(cell, style, palette)).join('');
-    const prevRow = model.rows[rowIndex - 1];
+    const cellColors = resolveRowArcLaneColors(row.cells);
+    let gutter = row.cells
+      .map((cell, column) =>
+        renderCellPair(cell, column, cellColors, opts.colorize, style, palette),
+      )
+      .join('');
     let laneSpan = row.cells.length;
     if (row.kind === 'node') {
       const contractHash = row.contractHash ?? EMPTY_CONTRACT_HASH;
-      if (prevRow?.kind === 'merge-connector' || contractHash === EMPTY_CONTRACT_HASH) {
+      if (contractHash === EMPTY_CONTRACT_HASH) {
         laneSpan = 1;
       } else {
-        laneSpan = row.cells.length;
+        let lastActiveColumn = -1;
+        for (let column = row.cells.length - 1; column >= 0; column--) {
+          if (row.cells[column]?.kind !== 'empty') {
+            lastActiveColumn = column;
+            break;
+          }
+        }
+        laneSpan = lastActiveColumn >= 0 ? lastActiveColumn + 1 : 1;
       }
     }
     const labelColumn =
       row.kind === 'edge'
-        ? edgeLabelColumn(row, wideLabelColumn)
+        ? maxEdgePrefixWidth
         : wideLabelColumn !== undefined &&
             (nodeHasArcDecoration(row) || row.contractHash !== undefined)
           ? wideLabelColumn
@@ -402,18 +664,24 @@ export function renderMigrationGraphTree(
     ) {
       gutter = row.cells
         .slice(0, 1)
-        .map((cell) => renderCellPair(cell, style, palette))
+        .map((cell, column) =>
+          renderCellPair(cell, column, cellColors, opts.colorize, style, palette),
+        )
         .join('');
     } else if (row.kind === 'node' && laneSpan < row.cells.length && !nodeHasArcDecoration(row)) {
       gutter = row.cells
         .slice(0, laneSpan)
-        .map((cell) => renderCellPair(cell, style, palette))
+        .map((cell, column) =>
+          renderCellPair(cell, column, cellColors, opts.colorize, style, palette),
+        )
         .join('');
     } else if (gutter.length < laneSpan * 2) {
       gutter = gutter.padEnd(laneSpan * 2, ' ');
     }
-    const dirNameWidth = rowDirNameWidth(labelColumn, maxDirNameLen, dirNameGap);
-    const dataColumn = labelColumn + dirNameWidth;
+    const dirNameWidth =
+      row.kind === 'edge'
+        ? edgeDirNameWidth
+        : rowDirNameWidth(labelColumn, maxDirNameLen, dirNameGap);
     const gutterPad = padVisible(gutter, labelColumn);
 
     if (row.kind === 'node') {
@@ -421,28 +689,30 @@ export function renderMigrationGraphTree(
       if (contractHash === EMPTY_CONTRACT_HASH) {
         const trailingLanes = row.cells
           .slice(1)
-          .map((cell) => renderCellPair(cell, style, palette))
+          .map((cell, offset) =>
+            renderCellPair(cell, offset + 1, cellColors, opts.colorize, style, palette),
+          )
           .join('');
         const emptyGutter = palette.emptySource.padEnd(2, ' ') + trailingLanes;
-        const overlayNames = overlayNamesForContract(contractHash, opts);
-        if (overlayNames.length === 0) {
-          lines.push(emptyGutter.replace(/\s+$/, ''));
+        const overlays = overlayNamesForContract(contractHash, opts);
+        if (overlays.markers.length === 0 && overlays.refs.length === 0) {
+          lines.push(trimTrailingWhitespace(emptyGutter));
           continue;
         }
-        const overlay = style.refs(overlayNames);
-        lines.push(`${padVisible(emptyGutter, dataColumn)}${overlay}`.replace(/\s+$/, ''));
+        const overlay = formatContractNodeOverlays(style, overlays.markers, overlays.refs);
+        lines.push(trimTrailingWhitespace(`${emptyGutter}${' '.repeat(LABEL_GAP)}${overlay}`));
         continue;
       }
       const hashText = style.sourceHash(
         abbreviateHash(contractHash, hashLength, palette.emptySource),
       );
-      const overlayNames = overlayNamesForContract(contractHash, opts);
-      const overlayPad =
-        overlayNames.length > 0
-          ? ' '.repeat(Math.max(0, dataColumn - labelColumn - stringWidth(hashText)))
-          : '';
-      const overlay = overlayNames.length > 0 ? style.refs(overlayNames) : '';
-      lines.push(`${gutterPad}${hashText}${overlayPad}${overlay}`.replace(/\s+$/, ''));
+      const overlays = overlayNamesForContract(contractHash, opts);
+      const hasOverlays = overlays.markers.length > 0 || overlays.refs.length > 0;
+      const overlayPad = hasOverlays ? ' '.repeat(LABEL_GAP) : '';
+      const overlay = hasOverlays
+        ? formatContractNodeOverlays(style, overlays.markers, overlays.refs)
+        : '';
+      lines.push(trimTrailingWhitespace(`${gutterPad}${hashText}${overlayPad}${overlay}`));
       continue;
     }
 
@@ -450,10 +720,68 @@ export function renderMigrationGraphTree(
     if (edge === undefined) continue;
 
     const dirNamePadding = ' '.repeat(Math.max(0, dirNameWidth - edge.dirName.length));
-    const dirName = `${style.dirName(edge.dirName)}${dirNamePadding}`;
+    const laneIndex = row.laneIndex ?? 0;
+    // A branched name keeps its bold (via `style.dirName`) and adds the lane
+    // hue, so it reads as one with its lane/arrow; column-0 names stay bold-only.
+    const dirNameStyler =
+      opts.colorize && laneIndex > NEUTRAL_LANE_COLUMN
+        ? (text: string) => forcedBold(laneColorForColumn(laneIndex)(text))
+        : style.dirName;
+    const dirName = `${dirNameStyler(edge.dirName)}${dirNamePadding}`;
     const hashColumn = formatEdgeHashColumn(edge, style, hashLength, palette);
-    lines.push(`${gutterPad}${dirName}${hashColumn}`.replace(/\s+$/, ''));
+    const annotationSuffix = formatEdgeAnnotationSuffix(edge.migrationHash, opts, style);
+    lines.push(trimTrailingWhitespace(`${gutterPad}${dirName}${hashColumn}${annotationSuffix}`));
+  }
+
+  return lines.join('\n');
+}
+
+export interface RenderMigrationGraphLegendOptions {
+  readonly colorize: boolean;
+  readonly glyphMode?: GlyphMode;
+}
+
+function formatLegendExampleMarkers(colorize: boolean): string {
+  if (!colorize) {
+    return '<contract, db>';
   }
+  const open = green('<');
+  const close = green('>');
+  const separator = green(', ');
+  return open + green('contract') + separator + green('db') + close;
+}
 
+/**
+ * A compact key for the tree visual language: the contract node glyph, the
+ * in-lane direction arrows, the empty baseline, the system-marker `<…>` and
+ * user-ref `(…)` bracket conventions (two illustrative example lines), and a
+ * worked sample of the data-column `from → to` migration hash arrow.
+ *
+ * Honors the same glyph palette (unicode vs ASCII) and `colorize` gate as the
+ * tree renderer, so the key matches whatever the graph itself drew and stays
+ * pipe-safe (zero ANSI when color is off). The caller adds the trailing blank
+ * line that separates this stderr key from the tree on stdout.
+ */
+export function renderMigrationGraphLegend(opts: RenderMigrationGraphLegendOptions): string {
+  const palette = paletteFor(opts.glyphMode ?? 'unicode');
+  const style = createAnsiMigrationListStyler({ useColor: opts.colorize });
+  const node = palette.node.trimEnd();
+  const sampleArrow = `${style.sourceHash('aaaaaa')} ${style.glyph(palette.forwardArrow)} ${style.destHash('bbbbbb')}`;
+  const statusGlyphs = overlayStatusGlyphs(opts.glyphMode ?? 'unicode');
+  const appliedPending = opts.colorize
+    ? `  ${green(statusGlyphs.applied)} ${style.summary('applied')}   ${yellow(statusGlyphs.pending)} ${style.summary('pending')}`
+    : `  ${statusGlyphs.applied} ${style.summary('applied')}   ${statusGlyphs.pending} ${style.summary('pending')}`;
+  const exampleMarkers = formatLegendExampleMarkers(opts.colorize);
+  const exampleRefs = opts.colorize ? style.refs(['prod', 'staging']) : '(prod, staging)';
+  const lines = [
+    'Legend:',
+    `  ${style.kind(node)} ${style.summary('contract')}   ${style.kind(palette.edgeArrow.forward)} ${style.summary('forward')}   ${style.kind(palette.edgeArrow.rollback)} ${style.summary('rollback')}`,
+    `  ${style.kind(palette.edgeArrow.self)} ${style.summary('migration without schema change')}`,
+    appliedPending,
+    `  ${style.kind(palette.emptySource)} ${style.summary('empty database (baseline)')}`,
+    `  ${exampleMarkers} ${style.summary('live markers (contract on disk, database state)')}`,
+    `  ${exampleRefs} ${style.summary('user-defined refs')}`,
+    `  ${sampleArrow}   ${style.summary('migration from contract aaaaaa to bbbbbb')}`,
+  ];
   return lines.join('\n');
 }