Function CodeDiff

web/src/components/diff/code-diff.tsx:14–60

({ oldSource, newSource, oldLabel, newLabel }: CodeDiffProps)

}

export function CodeDiff({ oldSource, newSource, oldLabel, newLabel }: CodeDiffProps) {
  const [viewMode, setViewMode] = useState<"unified" | "split">("unified");

  const changes = useMemo(() => diffLines(oldSource, newSource), [oldSource, newSource]);

  return (
    <div>
      <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div className="min-w-0 truncate text-sm text-zinc-500 dark:text-zinc-400">
          <span className="font-medium text-zinc-700 dark:text-zinc-300">{oldLabel}</span>
          {" -> "}
          <span className="font-medium text-zinc-700 dark:text-zinc-300">{newLabel}</span>
        </div>
        <div className="flex shrink-0 rounded-lg border border-zinc-200 dark:border-zinc-700">
          <button
            onClick={() => setViewMode("unified")}
            className={cn(
              "min-h-[36px] px-3 text-xs font-medium transition-colors",
              viewMode === "unified"
                ? "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900"
                : "text-zinc-500 hover:text-zinc-700 dark:text-zinc-400"
            )}
          >
            Unified
          </button>
          <button
            onClick={() => setViewMode("split")}
            className={cn(
              "min-h-[36px] px-3 text-xs font-medium transition-colors sm:inline-flex hidden",
              viewMode === "split"
                ? "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900"
                : "text-zinc-500 hover:text-zinc-700 dark:text-zinc-400"
            )}
          >
            Split
          </button>
        </div>
      </div>

      {viewMode === "unified" ? (
        <UnifiedView changes={changes} />
      ) : (
        <SplitView changes={changes} />
      )}
    </div>
  );
}

function UnifiedView({ changes }: { changes: Change[] }) {
  let oldLine = 1;