feat: add response diff highlight to call history

src/components/CallHistoryRow.test.tsx

@@ -114,6 +114,25 @@ describe('CallHistoryRow', () => {
     expect(screen.queryByRole('region', { name: 'Call details' })).toBeNull();
   });
 
+  it('renders response diff lines when a comparison response is available', () => {
+    const callWithDiff: CallRecord = {
+      ...successCall,
+      compareResponse: { name: 'Alice', plan: 'Free' },
+      response: { name: 'Alice', plan: 'Pro' },
+    };
+
+    renderRow({ call: callWithDiff, expanded: true, onToggleExpand: () => {} });
+
+    expect(screen.getByLabelText('Response diff')).toBeTruthy();
+    expect(screen.getByText(/-.*"plan": "Free"/)).toBeTruthy();
+    expect(screen.getByText(/\+.*"plan": "Pro"/)).toBeTruthy();
+  });
+
+  it('does not render response diff when no comparison response is available', () => {
+    renderRow({ call: successCall, expanded: true, onToggleExpand: () => {} });
+    expect(screen.queryByLabelText('Response diff')).toBeNull();
+  });
+
   // ── Data rendering ───────────────────────────────────────────────────────
 
   it('displays the endpoint path', () => {

src/components/CallHistoryRow.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
 import { CheckCircle, XCircle } from 'lucide-react';
 import { formatPrice } from '../utils/format';
+import { buildJsonDiff } from '../utils/diff';
 
 export type CallRecord = {
   id: string;
@@ -11,6 +11,7 @@ export type CallRecord = {
   cost: number;
   request?: unknown;
   response?: unknown;
+  compareResponse?: unknown;
 };
 
 type Props = {
@@ -55,6 +56,34 @@ function StatusIcon({ status }: { status: 'success' | 'error' }) {
   );
 }
 
+function ResponseDiff({ before, after }: { before: unknown; after: unknown }) {
+  const lines = buildJsonDiff(before, after);
+
+  return (
+    <div className="detail-section" aria-label="Response diff">
+      <h4>Response diff</h4>
+      <pre>
+        {lines.map((line, index) => {
+          const prefix =
+            line.type === 'added' ? '+ ' : line.type === 'removed' ? '- ' : '  ';
+
+          return (
+            <span
+              key={`${line.type}-${index}-${line.text}`}
+              className={`diff-line ${line.type}`}
+              data-testid={`diff-line-${line.type}`}
+            >
+              {prefix}
+              {line.text}
+              {'\n'}
+            </span>
+          );
+        })}
+      </pre>
+    </div>
+  );
+}
+
 export default function CallHistoryRow({ call, expanded, onToggleExpand }: Props) {
   return (
     <>
@@ -97,6 +126,9 @@ export default function CallHistoryRow({ call, expanded, onToggleExpand }: Props
             <h4>Response</h4>
             <pre>{JSON.stringify(call.response ?? {}, null, 2)}</pre>
           </div>
+          {call.compareResponse !== undefined && (
+            <ResponseDiff before={call.compareResponse} after={call.response ?? {}} />
+          )}
         </div>
       )}
     </>

src/utils/diff.ts

@@ -0,0 +1,57 @@
+export type DiffLineType = 'same' | 'added' | 'removed';
+
+export type DiffLine = {
+  type: DiffLineType;
+  text: string;
+};
+
+function formatJsonLines(value: unknown) {
+  return JSON.stringify(value ?? {}, null, 2).split('\n');
+}
+
+export function buildJsonDiff(before: unknown, after: unknown): DiffLine[] {
+  const previous = formatJsonLines(before);
+  const next = formatJsonLines(after);
+  const lengths = Array.from({ length: previous.length + 1 }, () =>
+    Array(next.length + 1).fill(0)
+  );
+
+  for (let i = previous.length - 1; i >= 0; i -= 1) {
+    for (let j = next.length - 1; j >= 0; j -= 1) {
+      lengths[i][j] =
+        previous[i] === next[j]
+          ? lengths[i + 1][j + 1] + 1
+          : Math.max(lengths[i + 1][j], lengths[i][j + 1]);
+    }
+  }
+
+  const diff: DiffLine[] = [];
+  let i = 0;
+  let j = 0;
+
+  while (i < previous.length && j < next.length) {
+    if (previous[i] === next[j]) {
+      diff.push({ type: 'same', text: previous[i] });
+      i += 1;
+      j += 1;
+    } else if (lengths[i + 1][j] >= lengths[i][j + 1]) {
+      diff.push({ type: 'removed', text: previous[i] });
+      i += 1;
+    } else {
+      diff.push({ type: 'added', text: next[j] });
+      j += 1;
+    }
+  }
+
+  while (i < previous.length) {
+    diff.push({ type: 'removed', text: previous[i] });
+    i += 1;
+  }
+
+  while (j < next.length) {
+    diff.push({ type: 'added', text: next[j] });
+    j += 1;
+  }
+
+  return diff;
+}