import { PatchDiff } from "@pierre/diffs/react";import { XIcon } from "lucide-react";import { useMemo } from "react";import { isElectron } from "../env";import { deriveTurnDiffSummaries, formatTimestamp } from "../session-logic";import { useStore } from "../store";import { Button } from "./ui/button";import { cn } from "~/lib/utils"; export default function DiffPanel() {  const { state, dispatch } = useStore();  const activeThread = state.threads.find((thread) => thread.id === state.activeThreadId);  const turnDiffSummaries = useMemo(    () => deriveTurnDiffSummaries(activeThread?.events ?? []),    [activeThread?.events],  );   const canApplyStoredTarget = Boolean(activeThread && state.diffThreadId === activeThread.id);  const selectedTurnId = canApplyStoredTarget ? state.diffTurnId : null;  const selectedFilePath = canApplyStoredTarget ? state.diffFilePath : null;  const selectedTurn =    turnDiffSummaries.find((summary) => summary.turnId === selectedTurnId) ?? turnDiffSummaries[0];  const selectedFile =    selectedTurn?.files.find((file) => file.path === selectedFilePath) ?? selectedTurn?.files[0];  const selectedPatch = selectedFile?.diff ?? selectedTurn?.unifiedDiff;   const selectTurn = (turnId: string) => {    if (!activeThread) return;    const turn = turnDiffSummaries.find((summary) => summary.turnId === turnId);    dispatch({      type: "SET_DIFF_TARGET",      threadId: activeThread.id,      turnId,      ...(turn?.files[0]?.path ? { filePath: turn.files[0].path } : {}),    });  };   const selectFile = (filePath: string) => {    if (!activeThread || !selectedTurn) return;    dispatch({      type: "SET_DIFF_TARGET",      threadId: activeThread.id,      turnId: selectedTurn.turnId,      filePath,    });  };   return (    <aside className="flex h-full w-[560px] shrink-0 flex-col border-l border-border bg-card">      <div        className={cn(          "flex items-center justify-between border-b border-border px-4",          isElectron ? "drag-region h-[52px]" : "py-3",        )}      >        <h3 className="text-xs font-medium text-foreground">Turn diffs</h3>        <Button type="button" size="icon-xs" variant="ghost" onClick={() => dispatch({ type: "CLOSE_DIFF" })}>          <XIcon />        </Button>      </div>       {!activeThread ? (        <div className="flex flex-1 items-center justify-center px-5 text-center text-xs text-muted-foreground/70">          Select a thread to inspect turn diffs.        </div>      ) : turnDiffSummaries.length === 0 ? (        <div className="flex flex-1 items-center justify-center px-5 text-center text-xs text-muted-foreground/70">          No completed turn file changes yet.        </div>      ) : (        <>          <div className="border-b border-border px-3 py-2.5">            <p className="mb-1.5 text-[10px] uppercase tracking-[0.12em] text-muted-foreground/60">              Turns            </p>            <div className="flex flex-wrap gap-1.5">              {turnDiffSummaries.map((summary, index) => (                <button                  key={summary.turnId}                  type="button"                  className={cn(                    "rounded-md border px-2 py-1 text-left transition-colors",                    summary.turnId === selectedTurn?.turnId                      ? "border-border bg-accent text-accent-foreground"                      : "border-border/70 bg-background/70 text-muted-foreground/80 hover:border-border hover:text-foreground/80",                  )}                  onClick={() => selectTurn(summary.turnId)}                  title={summary.turnId}                >                  <div className="text-[10px] font-medium">Turn {turnDiffSummaries.length - index}</div>                  <div className="text-[10px] opacity-70">{formatTimestamp(summary.completedAt)}</div>                </button>              ))}            </div>          </div>           <div className="min-h-0 flex flex-1">            <div className="w-[220px] shrink-0 border-r border-border px-2 py-2">              <p className="mb-1.5 px-1 text-[10px] uppercase tracking-[0.12em] text-muted-foreground/60">                Files              </p>              <div className="space-y-1 overflow-y-auto">                {selectedTurn?.files.map((file) => (                  <button                    key={`${selectedTurn.turnId}:${file.path}`}                    type="button"                    className={cn(                      "flex w-full items-center justify-between gap-2 rounded-md border px-2 py-1.5 text-left font-mono text-[11px] transition-colors",                      selectedFile?.path === file.path                        ? "border-border bg-accent text-accent-foreground"                        : "border-border/60 bg-background/60 text-muted-foreground/85 hover:border-border hover:text-foreground/90",                    )}                    onClick={() => selectFile(file.path)}                  >                    <span className="truncate">{file.path}</span>                    {file.kind && (                      <span className="rounded-sm border border-border/60 px-1 py-0.5 text-[9px] uppercase tracking-[0.08em]">                        {file.kind}                      </span>                    )}                  </button>                ))}              </div>            </div>             <div className="min-w-0 flex-1 overflow-auto px-3 py-2">              {!canApplyStoredTarget && state.diffThreadId && (                <p className="mb-2 text-[11px] text-muted-foreground/65">                  Showing diffs for the active thread.                </p>              )}              {!selectedPatch ? (                <div className="flex h-full items-center justify-center text-xs text-muted-foreground/70">                  No patch available for this selection.                </div>              ) : (                <PatchDiff patch={selectedPatch} />              )}            </div>          </div>        </>      )}    </aside>  );}