Function DiffView

web/components/tools/DiffView.tsx:331–397

({
  oldContent,
  newContent,
  lang = "text",
  defaultMode = "unified",
  className,
}: DiffViewProps)

}

export function DiffView({
  oldContent,
  newContent,
  lang = "text",
  defaultMode = "unified",
  className,
}: DiffViewProps) {
  const [mode, setMode] = useState<"unified" | "side-by-side">(defaultMode);

  const lines = useMemo(
    () => computeDiff(oldContent, newContent),
    [oldContent, newContent]
  );

  const addCount = lines.filter((l) => l.type === "add").length;
  const removeCount = lines.filter((l) => l.type === "remove").length;

  return (
    <div className={cn("rounded-lg overflow-hidden border border-surface-700", className)}>
      {/* Header */}
      <div className="flex items-center justify-between px-3 py-2 bg-surface-800 border-b border-surface-700">
        <div className="flex items-center gap-2 text-xs">
          <span className="text-green-400 font-mono">+{addCount}</span>
          <span className="text-red-400 font-mono">−{removeCount}</span>
        </div>
        <div className="flex items-center gap-1">
          <CopyButton text={newContent} />
          <div className="flex items-center rounded overflow-hidden border border-surface-700">
            <button
              onClick={() => setMode("unified")}
              className={cn(
                "px-2 py-1 text-xs flex items-center gap-1 transition-colors",
                mode === "unified"
                  ? "bg-brand-600 text-white"
                  : "text-surface-400 hover:text-surface-200 hover:bg-surface-700"
              )}
            >
              <AlignLeft className="w-3 h-3" />
              Unified
            </button>
            <button
              onClick={() => setMode("side-by-side")}
              className={cn(
                "px-2 py-1 text-xs flex items-center gap-1 transition-colors",
                mode === "side-by-side"
                  ? "bg-brand-600 text-white"
                  : "text-surface-400 hover:text-surface-200 hover:bg-surface-700"
              )}
            >
              <Columns2 className="w-3 h-3" />
              Side by side
            </button>
          </div>
        </div>
      </div>

      {/* Diff content */}
      <div className="bg-surface-900 overflow-auto max-h-[480px]">