track current version

frontend/src/App.tsx

@@ -61,6 +61,7 @@ function App() {
 
   // App history
   const [appHistory, setAppHistory] = useState<History>([]);
+  const [currentVersion, setCurrentVersion] = useState<number | null>(null);
 
   const [shouldIncludeResultImage, setShouldIncludeResultImage] =
     useState<boolean>(false);
@@ -146,8 +147,10 @@ function App() {
               inputs: { image_url: referenceImages[0] },
             },
           ]);
+          setCurrentVersion(0);
         } else {
-          setAppHistory((prev) => [
+          setAppHistory((prev) => {
+            const newHistory: History = [
               {
                 type: "ai_edit",
                 code,
@@ -159,7 +162,10 @@ function App() {
                 },
               },
               ...prev,
-          ]);
+            ];
+            setCurrentVersion(0);
+            return newHistory;
+          });
         }
       },
       (line) => setExecutionConsole((prev) => [...prev, line]),
@@ -357,6 +363,7 @@ function App() {
           {
             <HistoryDisplay
               history={appHistory}
+              currentVersion={currentVersion}
               revertToVersion={(index) => {
                 if (
                   index < 0 ||
@@ -364,6 +371,7 @@ function App() {
                   !appHistory[index]
                 )
                   return;
+                setCurrentVersion(index);
                 setGeneratedCode(appHistory[index].code);
               }}
               shouldDisableReverts={appState === AppState.CODING}

frontend/src/components/HistoryDisplay.tsx

@@ -1,9 +1,11 @@
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { History, HistoryItemType } from "../history_types";
 import toast from "react-hot-toast";
+import classNames from "classnames";
 
 interface Props {
   history: History;
+  currentVersion: number | null;
   revertToVersion: (version: number) => void;
   shouldDisableReverts: boolean;
 }
@@ -28,6 +30,7 @@ function displayHistoryItemType(itemType: HistoryItemType) {
 
 export default function HistoryDisplay({
   history,
+  currentVersion,
   revertToVersion,
   shouldDisableReverts,
 }: Props) {
@@ -39,8 +42,14 @@ export default function HistoryDisplay({
           {history.map((item, index) => (
             <li
               key={index}
-              className="flex items-center space-x-2 justify-between p-2
+              className={classNames(
-              border-b cursor-pointer hover:bg-black hover:text-white"
+                "flex items-center space-x-2 justify-between p-2",
+                "border-b cursor-pointer",
+                {
+                  " hover:bg-black hover:text-white": index !== currentVersion,
+                  "bg-slate-500 text-white": index === currentVersion,
+                }
+              )}
               onClick={() =>
                 shouldDisableReverts
                   ? toast.error(