"use client"; import { useState } from "react";import {  diffLineClassName,  diffLinePrefix,  pairDiffLines,  type DiffFile,  type DiffViewMode,} from "@/features/agent/ui/git-diff-panel-model"; export function DiffFileList({  files,  viewMode,  onViewMode,}: {  files: DiffFile[];  viewMode: DiffViewMode;  onViewMode: (mode: DiffViewMode) => void;}) {  return (    <div className="min-h-0 flex-1 overflow-auto p-2 font-mono text-[length:var(--fs-sm)] leading-5">      <div className="sticky top-0 z-10 mb-2 flex items-center justify-end gap-1 bg-(--color-panel) py-1">        <DiffModeButton active={viewMode === "unified"} onClick={() => onViewMode("unified")}>          Unified        </DiffModeButton>        <DiffModeButton          active={viewMode === "side-by-side"}          onClick={() => onViewMode("side-by-side")}        >          Side by side        </DiffModeButton>        <DiffModeButton active={viewMode === "stacked"} onClick={() => onViewMode("stacked")}>          Top / bottom        </DiffModeButton>      </div>      <div className="flex flex-col gap-2">        {files.map((file, fileIndex) => (          <DiffFileEntry            key={file.path}            file={file}            viewMode={viewMode}            defaultOpen={fileIndex === 0}          />        ))}      </div>    </div>  );} // Render a file's diff body only while its <details> is open. A collapsed// <details> keeps its children in the DOM, so without this a large diff (a// lockfile, a big refactor) would materialize every file's full line list at// once — tens of thousands of grid rows — and freeze the pane.function DiffFileEntry({  file,  viewMode,  defaultOpen,}: {  file: DiffFile;  viewMode: DiffViewMode;  defaultOpen: boolean;}) {  const [open, setOpen] = useState(defaultOpen);  return (    <details      className="overflow-hidden rounded-md border border-(--border)/80 bg-(--color-panel)"      open={open}      onToggle={(event) => setOpen((event.currentTarget as HTMLDetailsElement).open)}    >      <summary        className="flex cursor-pointer list-none items-center gap-2 border-b border-(--border)/80 bg-(--color-header) px-2 py-1.5 text-xs text-(--fg) hover:bg-(--color-surface-hover)"        title={file.path}      >        <span className="min-w-0 flex-1 truncate">{file.path}</span>        <span className="shrink-0 font-mono text-[length:var(--fs-xs)]">          <span className="text-(--color-diff-added)">+{file.additions}</span>{" "}          <span className="text-(--color-diff-removed)">-{file.deletions}</span>        </span>      </summary>      {open ? (        viewMode === "side-by-side" ? (          <SideBySideDiff file={file} />        ) : viewMode === "stacked" ? (          <StackedDiff file={file} />        ) : (          <UnifiedDiff file={file} />        )      ) : null}    </details>  );} function DiffModeButton({  active,  onClick,  children,}: {  active: boolean;  onClick: () => void;  children: string;}) {  return (    <button      type="button"      onClick={onClick}      className={`h-6 rounded px-2 text-[length:var(--fs-xs)] ${        active ? "bg-(--hover) text-(--fg)" : "text-(--dim) hover:bg-(--hover) hover:text-(--fg)"      }`}    >      {children}    </button>  );} function UnifiedDiff({ file }: { file: DiffFile }) {  return (    <div className="min-w-max">      {file.lines.map((line, index) => (        <div          key={`${file.path}-${index}`}          className={`grid grid-cols-[3rem_3rem_1fr] gap-2 border-b border-(--border)/20 px-2 ${diffLineClassName(line.kind)}`}        >          <span className="select-none text-right text-(--dim)">{line.oldLine ?? ""}</span>          <span className="select-none text-right text-(--dim)">{line.newLine ?? ""}</span>          <span className="whitespace-pre">            {diffLinePrefix(line.kind)}            {line.text}          </span>        </div>      ))}    </div>  );} function SideBySideDiff({ file }: { file: DiffFile }) {  const rows = pairDiffLines(file);  return (    <div className="min-w-[52rem]">      {rows.map((row, index) => (        <div          key={`${file.path}-pair-${index}`}          className="grid grid-cols-2 border-b border-(--border)/20"        >          <DiffCell line={row.left} side="old" />          <DiffCell line={row.right} side="new" />        </div>      ))}    </div>  );} function StackedDiff({ file }: { file: DiffFile }) {  const oldLines = file.lines.filter((line) => line.kind !== "add");  const newLines = file.lines.filter((line) => line.kind !== "del");  return (    <div className="grid gap-2 p-2">      <div className="rounded border border-red-500/20">        <div className="border-b border-red-500/20 px-2 py-1 text-[length:var(--fs-sm)] text-red-300">          Before        </div>        {oldLines.map((line, index) => (          <DiffStackLine key={`${file.path}-old-${index}`} line={line} />        ))}      </div>      <div className="rounded-lg border border-(--color-diff-added)/25">        <div className="border-b border-(--color-diff-added)/25 px-2 py-1 text-[length:var(--fs-sm)] text-(--color-diff-added)">          After        </div>        {newLines.map((line, index) => (          <DiffStackLine key={`${file.path}-new-${index}`} line={line} />        ))}      </div>    </div>  );} function DiffCell({ line, side }: { line?: DiffFile["lines"][number]; side: "old" | "new" }) {  if (!line) {    return <div className="min-h-5 border-r border-(--border)/20 bg-(--color-surface)" />;  }  const lineNumber = side === "old" ? line.oldLine : line.newLine;  return (    <div      className={`grid grid-cols-[3rem_1fr] gap-2 border-r border-(--border)/20 px-2 ${diffLineClassName(line.kind)}`}    >      <span className="select-none text-right text-(--dim)">{lineNumber ?? ""}</span>      <span className="whitespace-pre">        {diffLinePrefix(line.kind)}        {line.text}      </span>    </div>  );} function DiffStackLine({ line }: { line: DiffFile["lines"][number] }) {  return (    <div className={`grid grid-cols-[3rem_1fr] gap-2 px-2 ${diffLineClassName(line.kind)}`}>      <span className="select-none text-right text-(--dim)">        {line.kind === "del" ? line.oldLine : (line.newLine ?? line.oldLine ?? "")}      </span>      <span className="whitespace-pre">        {diffLinePrefix(line.kind)}        {line.text}      </span>    </div>  );}