sorting through ai belligerancy

Author: amadeus

apps/demo/src/main.ts

@@ -202,6 +202,7 @@ function renderDiff(parsedPatches: ParsedPatch[], manager?: WorkerPoolManager) {
         | FileDiff<LineCommentMetadata>
         | VirtualizedFileDiff<LineCommentMetadata>;
       const options: FileDiffOptions<LineCommentMetadata> = {
+        expandUnchanged: true,
         theme: DEMO_THEME,
         themeType,
         diffStyle: unified ? 'unified' : 'split',
@@ -226,7 +227,7 @@ function renderDiff(parsedPatches: ParsedPatch[], manager?: WorkerPoolManager) {
         // expandUnchanged: true,
 
         // Hover Decoration Snippets
-        enableGutterUtility: true,
+        // enableGutterUtility: true,
         // onGutterUtilityClick(event) {
         //   console.log('onGutterUtilityClick', event);
         // },
@@ -682,28 +683,40 @@ const DECORATIONS: FileDecorationItem[] = [
 ];
 
 const DECORATIONS_DIFF: DiffDecorationItem[] = [
-  {
-    lineNumber: 1,
-    side: 'deletions',
-    bar: true,
-    /* color: 'red' */
-  },
   {
     lineNumber: 2,
     endLineNumber: 6,
     side: 'additions',
     bar: true,
+    // color: 'red',
     background: 'red',
-    // color: 'blue',
   },
   {
     lineNumber: 5,
-    endLineNumber: 11,
+    endLineNumber: 6,
+    side: 'additions',
+    bar: true,
+    background: true,
+  },
+  {
+    lineNumber: 7,
+    side: 'additions',
+    bar: true,
+    background: true,
+  },
+  {
+    lineNumber: 9,
+    endLineNumber: 15,
+    side: 'additions',
+    bar: true,
+    background: true,
+  },
+  {
+    lineNumber: 12,
+    endLineNumber: 15,
     side: 'additions',
     bar: true,
     background: true,
-    // background: '#123456',
-    // color: 'orange',
   },
 ];
 
@@ -777,7 +790,7 @@ if (renderFileButton != null) {
       // },
 
       // Hover Decoration Snippets
-      enableGutterUtility: true,
+      // enableGutterUtility: true,
       // onGutterUtilityClick(event) {
       //   console.log('onGutterUtilityClick', event);
       // },
@@ -867,7 +880,7 @@ if (renderFileConflictButton != null) {
         overflow: wrap ? 'wrap' : 'scroll',
         renderAnnotation,
         enableLineSelection: true,
-        enableGutterUtility: true,
+        // enableGutterUtility: true,
         maxContextLines: 4,
 
         // Token Testing Helpers

packages/diffs/src/utils/getLineDecorationProperties.ts

@@ -51,13 +51,20 @@ export function getLineDecorationGutterChildren(
     return undefined;
   }
 
+  const visualBarLayers = collapseBarLayersForRendering(barLayers);
+
   return [
     createHastElement({
       tagName: 'span',
       properties: {
         'data-decoration-bar-stack': '',
-        'data-decoration-bar-layer-count': String(barLayers.length),
-        style: getLineDecorationBarStackStyle(barLayers),
+        'data-decoration-bar-layer-count': String(visualBarLayers.length),
+        'data-decoration-bar-overlap':
+          visualBarLayers.length > 1 ? '' : undefined,
+        'data-decoration-bar-second':
+          visualBarLayers.length > 1 ? '' : undefined,
+        'data-decoration-bar-third':
+          visualBarLayers.length > 2 ? '' : undefined,
       },
     }),
   ];
@@ -131,6 +138,12 @@ export function mergeNormalizedLineDecorations(
     second.barLayers
   );
   const topBar = barLayers?.at(-1);
+  const topBarDepth =
+    topBar?.sourceIndex === first.barSourceIndex
+      ? first.barDepth
+      : topBar?.sourceIndex === second.barSourceIndex
+        ? second.barDepth
+        : undefined;
 
   return {
     barIndices,
@@ -143,7 +156,7 @@ export function mergeNormalizedLineDecorations(
     backgroundColor: background?.color,
     backgroundLineNumber: background?.lineNumber,
     backgroundSourceIndex: background?.sourceIndex,
-    barDepth: mergeDecorationDepth(first.barDepth, second.barDepth),
+    barDepth: topBarDepth,
     barLayers,
     backgroundDepth: mergeDecorationDepth(
       first.backgroundDepth,
@@ -155,6 +168,8 @@ export function mergeNormalizedLineDecorations(
 function getLineDecorationBarProperties(
   decorations: NormalizedLineDecorations | undefined
 ): Properties | undefined {
+  const topmostBarEndIndices = getTopmostBarEndIndices(decorations);
+
   return mergeHastProperties(
     mergeHastProperties(
       getLineDecorationProperties(
@@ -173,42 +188,45 @@ function getLineDecorationBarProperties(
       'data-decoration-bar-start',
       decorations?.startIndices,
       'data-decoration-bar-end',
-      decorations?.endIndices
+      topmostBarEndIndices
     )
   );
 }
 
-function getLineDecorationBarStackStyle(barLayers: VisibleBarLayer[]): string {
-  const serializedLayers = [...barLayers].reverse();
-  const styles = [
-    `--diffs-decoration-bar-layer-count:${serializedLayers.length};`,
-  ];
-
-  for (const [index, layer] of serializedLayers.entries()) {
-    const layerNumber = index + 1;
-    styles.push(`--diffs-decoration-bar-color-${layerNumber}:${layer.color};`);
-    styles.push(
-      `--diffs-decoration-bar-tier-${layerNumber}:${getBarVisualTier(layerNumber)};`
-    );
-    styles.push(
-      `--diffs-decoration-bar-start-cap-${layerNumber}:${layer.showStartCap ? 1 : 0};`
-    );
-    styles.push(
-      `--diffs-decoration-bar-end-cap-${layerNumber}:${layer.showEndCap ? 1 : 0};`
-    );
+function getTopmostBarEndIndices(
+  decorations: NormalizedLineDecorations | undefined
+): number[] | undefined {
+  const topmostBarSourceIndex = decorations?.barSourceIndex;
+  if (topmostBarSourceIndex == null) {
+    return undefined;
   }
 
-  return styles.join('');
+  return (decorations?.endIndices?.includes(topmostBarSourceIndex) ?? false)
+    ? [topmostBarSourceIndex]
+    : undefined;
 }
 
-function getBarVisualTier(layerNumber: number): 1 | 2 | 3 {
-  if (layerNumber <= 1) {
-    return 1;
-  }
-  if (layerNumber === 2) {
-    return 2;
+// When adjacent visible layers share the same bar color, render them as one
+// continuous visual bar so overlap identity does not create artificial gaps.
+function collapseBarLayersForRendering(
+  barLayers: VisibleBarLayer[]
+): VisibleBarLayer[] {
+  const serializedLayers = [...barLayers].reverse();
+  const collapsed: VisibleBarLayer[] = [];
+
+  for (const layer of serializedLayers) {
+    const previousLayer = collapsed.at(-1);
+    if (previousLayer?.color !== layer.color) {
+      collapsed.push({ ...layer });
+      continue;
+    }
+
+    previousLayer.showStartCap =
+      previousLayer.showStartCap && layer.showStartCap;
+    previousLayer.showEndCap = previousLayer.showEndCap && layer.showEndCap;
   }
-  return 3;
+
+  return collapsed.reverse();
 }
 
 function getLineDecorationProperties(

packages/diffs/src/utils/normalizeLineDecorations.ts

@@ -151,6 +151,7 @@ export function normalizeFileDecorations<Metadata>(
   for (const [sourceIndex, decoration] of decorations.entries()) {
     applyDecorationRange(normalized, decoration, sourceIndex);
   }
+  finalizeBarDepths(normalized);
   return normalized;
 }
 
@@ -164,6 +165,8 @@ export function normalizeDiffDecorations<Metadata>(
   for (const [sourceIndex, decoration] of decorations.entries()) {
     applyDecorationRange(normalized[decoration.side], decoration, sourceIndex);
   }
+  finalizeBarDepths(normalized.additions);
+  finalizeBarDepths(normalized.deletions);
   return normalized;
 }
 
@@ -401,6 +404,80 @@ function cloneVisibleBarLayer(layer: VisibleBarLayer): VisibleBarLayer {
   return { ...layer };
 }
 
+function finalizeBarDepths(map: NormalizedLineDecorationMap): void {
+  const priorityBySourceIndex = new Map<
+    number,
+    { lineNumber: number; sourceIndex: number }
+  >();
+  const higherNeighborsBySourceIndex = new Map<number, Set<number>>();
+
+  for (const lineDecorations of Object.values(map)) {
+    const barLayers = lineDecorations?.barLayers;
+    if (barLayers == null || barLayers.length === 0) {
+      continue;
+    }
+
+    for (const layer of barLayers) {
+      if (!priorityBySourceIndex.has(layer.sourceIndex)) {
+        priorityBySourceIndex.set(layer.sourceIndex, {
+          lineNumber: layer.lineNumber,
+          sourceIndex: layer.sourceIndex,
+        });
+      }
+    }
+
+    for (let index = 0; index < barLayers.length - 1; index++) {
+      const lowerLayer = barLayers[index];
+      const higherLayer = barLayers[index + 1];
+      if (lowerLayer == null || higherLayer == null) {
+        continue;
+      }
+
+      const higherNeighbors =
+        higherNeighborsBySourceIndex.get(lowerLayer.sourceIndex) ?? new Set();
+      higherNeighborsBySourceIndex.set(
+        lowerLayer.sourceIndex,
+        higherNeighbors
+      );
+      higherNeighbors.add(higherLayer.sourceIndex);
+    }
+  }
+
+  const coveredDepthBySourceIndex = new Map<number, number>();
+  const sortedSourceIndices = [...priorityBySourceIndex.values()]
+    .sort((first, second) => compareDecorationPriority(second, first))
+    .map(({ sourceIndex }) => sourceIndex);
+
+  for (const sourceIndex of sortedSourceIndices) {
+    const higherNeighbors = higherNeighborsBySourceIndex.get(sourceIndex);
+    if (higherNeighbors == null || higherNeighbors.size === 0) {
+      coveredDepthBySourceIndex.set(sourceIndex, 0);
+      continue;
+    }
+
+    let maxCoveredDepth = 0;
+    for (const higherSourceIndex of higherNeighbors) {
+      const higherCoveredDepth = coveredDepthBySourceIndex.get(higherSourceIndex) ?? 0;
+      if (higherCoveredDepth + 1 > maxCoveredDepth) {
+        maxCoveredDepth = higherCoveredDepth + 1;
+      }
+    }
+
+    coveredDepthBySourceIndex.set(sourceIndex, maxCoveredDepth);
+  }
+
+  for (const lineDecorations of Object.values(map)) {
+    const topBarSourceIndex = lineDecorations?.barSourceIndex;
+    if (topBarSourceIndex == null || lineDecorations == null) {
+      continue;
+    }
+
+    const coveredCount = coveredDepthBySourceIndex.get(topBarSourceIndex) ?? 0;
+    lineDecorations.barDepth =
+      coveredCount > 0 ? getDecorationDepth(coveredCount) : undefined;
+  }
+}
+
 function incrementDecorationDepth(
   current: DecorationOverlapDepth | undefined
 ): DecorationOverlapDepth {