[FEAT] Highlight changed cells in branch diff

[divideby0]

Summary

When viewing a diff between branches, highlight the cells that changed with a high-contrast visual indicator (outline, background color, or badge) so users can immediately spot what's different.

Motivation

The current diff view (PR #16) shows both branches side by side, but users have to visually scan the entire matrix to find what changed. A visual highlight — similar to Chromatic's visual diff highlighting or Google Drive's revision coloring — would make changes immediately obvious, especially in large matrices.

Suggested Approach

• Add a high-contrast outline or background tint to cells whose values differ between the two branches
• Consider color-coding: green for improved ratings, red for decreased, yellow/orange for changed-but-neutral
• For added/removed rows or columns (new options or criteria in one branch), use a distinct style (e.g., dashed border or striped background)
• Keep it subtle enough to not overwhelm the matrix but obvious enough to guide the eye

References

• Google Drive revision history highlighting
• Chromatic visual diff overlay
• Eli noted the AI suggested Chromatic-style highlighting during development

Priority

Low — enhancement on top of the existing diff UI.

Context

From Slack discussion — Cedric suggested: "it could be cool to highlight the cells that changed when you diff. maybe just add a high-contrast outline around them"

[evie-assist]

Implementation Notes

Based on review of feat/branch-diff-merge-ui at commit c5083db.

The data is already there

BranchDiff returns both sourceState and targetState as PughDomainState, which contain the full projected scores: ScoreEntry[] arrays. Comparing them cell-by-cell is straightforward:

function getChangedCells(diff: BranchDiff): Set<string> {
  const changed = new Set<string>();
  const sourceScoreMap = new Map(
    diff.sourceState.scores.map(s => [`${s.toolId}:${s.criterionId}`, s])
  );
  for (const target of diff.targetState.scores) {
    const key = `${target.toolId}:${target.criterionId}`;
    const source = sourceScoreMap.get(key);
    if (!source || source.score !== target.score || source.label !== target.label) {
      changed.add(key);
    }
    sourceScoreMap.delete(key);
  }
  // Remaining = scores only in source (removed in target)
  for (const key of sourceScoreMap.keys()) changed.add(key);
  return changed;
}

Where to apply the highlight

The matrix cells are rendered in PughMatrix.tsx. Score cells are at line 369:

className={`pugh-score-cell${!readOnly ? ' pugh-score-cell-editable' : ''}${isWinner(tool.id) ? ...}`}

Add a pugh-cell-changed class here when changedCells.has(${tool.id}:${criterion.id}).

CSS — the --pugh-primary custom property is already defined for both light (#2e8555) and dark (#4caf7d) modes. The highlight style follows existing patterns like the weight input focus:

.pugh-cell-changed {
  outline: 2px solid var(--pugh-primary);
  outline-offset: -1px;
}

.pugh-cell-changed-improved {
  outline-color: #2e8555; /* green */
}

.pugh-cell-changed-regressed {
  outline-color: #e53e3e; /* red */
}

Store integration

The branchDiff is already in the store state, populated by compareBranch(). Use a selector in the component:

const changedCells = usePughStore((s) => {
  if (!s.branchDiff) return new Set<string>();
  return getChangedCells(s.branchDiff);
});

No new API calls or repository methods needed.

Also consider: changed rows/columns

If one branch added a new option (tool) or criterion that doesn't exist in the other, the entire row/column is "new." Compare sourceState.tools/criteria with targetState equivalents. New rows/columns could get a subtle background tint on the header cells plus a dashed border on all cells in that row/column.

Scope

• getChangedCells() utility: ~25 lines
• CSS for highlight styles: ~20 lines
• Wire into PughMatrix.tsx cell rendering (line 369): ~15 lines
• Selector in component: ~5 lines
• Delta badges (optional): ~30 lines
• Changed row/column highlighting (optional): ~30 lines

Core: ~65 lines. With all extras: ~125 lines.