PIT: UI views

frontend/src/components/navigation/SecretDashboardPathBreadcrumb.tsx

@@ -14,13 +14,15 @@ type Props = {
   selectedPathSegmentIndex: number;
   environmentSlug: string;
   projectId: string;
+  disableCopy?: boolean;
 };
 
 export const SecretDashboardPathBreadcrumb = ({
   secretPathSegments,
   selectedPathSegmentIndex,
   environmentSlug,
-  projectId
+  projectId,
+  disableCopy
 }: Props) => {
   const [, isCopying, setIsCopying] = useTimedReset({
     initialState: false
@@ -32,7 +34,7 @@ export const SecretDashboardPathBreadcrumb = ({
 
   return (
     <div className="flex items-center space-x-3">
-      {isLastItem ? (
+      {isLastItem && !disableCopy ? (
         <div className="group flex items-center space-x-2">
           <span
             className={twMerge(

frontend/src/const/routes.ts

@@ -75,6 +75,18 @@ export const ROUTE_PATHS = Object.freeze({
       "/secret-manager/$projectId/secrets/$envSlug",
       "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/secrets/$envSlug"
     ),
+    RollbackPreviewPage: setRoute(
+      "/secret-manager/$projectId/commits/$environment/$folderId/$commitId/restore",
+      "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/restore"
+    ),
+    CommitDetailsPage: setRoute(
+      "/secret-manager/$projectId/commits/$environment/$folderId/$commitId",
+      "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId"
+    ),
+    CommitsPage: setRoute(
+      "/secret-manager/$projectId/commits/$environment/$folderId",
+      "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId"
+    ),
     OverviewPage: setRoute(
       "/secret-manager/$projectId/overview",
       "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/overview"

frontend/src/context/ProjectPermissionContext/types.ts

@@ -106,6 +106,11 @@ export enum PermissionConditionOperators {
   $ELEMENTMATCH = "$elemMatch"
 }
 
+export enum ProjectPermissionCommitsActions {
+  Read = "read",
+  PerformRollback = "perform-rollback"
+}
+
 export type IdentityManagementSubjectFields = {
   identityId: string;
 };
@@ -181,7 +186,8 @@ export enum ProjectPermissionSub {
   Kms = "kms",
   Cmek = "cmek",
   SecretSyncs = "secret-syncs",
-  Kmip = "kmip"
+  Kmip = "kmip",
+  Commits = "commits"
 }
 
 export type SecretSubjectFields = {
@@ -284,6 +290,7 @@ export type ProjectPermissionSet =
   | [ProjectPermissionActions.Create, ProjectPermissionSub.SecretRollback]
   | [ProjectPermissionCmekActions, ProjectPermissionSub.Cmek]
   | [ProjectPermissionActions.Edit, ProjectPermissionSub.Kms]
-  | [ProjectPermissionKmipActions, ProjectPermissionSub.Kmip];
+  | [ProjectPermissionKmipActions, ProjectPermissionSub.Kmip]
+  | [ProjectPermissionCommitsActions, ProjectPermissionSub.Commits];
 
 export type TProjectPermission = MongoAbility<ProjectPermissionSet>;

frontend/src/hooks/api/folderCommits/index.tsx

@@ -0,0 +1,2 @@
+export { useGetFolderCommitHistory, useGetFolderCommitsCount } from "./queries";
+export * from "./types";

frontend/src/hooks/api/folderCommits/queries.tsx

@@ -0,0 +1,247 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { CommitHistoryItem, CommitWithChanges, RollbackPreview } from "./types";
+
+export const commitKeys = {
+  count: ({
+    workspaceId,
+    environment,
+    directory
+  }: {
+    workspaceId: string;
+    environment: string;
+    directory?: string;
+  }) => [{ workspaceId, environment, directory }, "folder-commits-count"] as const,
+
+  history: ({
+    workspaceId,
+    environment,
+    directory
+  }: {
+    workspaceId: string;
+    environment: string;
+    directory?: string;
+  }) => [{ workspaceId, environment, directory }, "folder-commits"] as const,
+
+  details: ({ workspaceId, commitId }: { workspaceId: string; commitId: string }) =>
+    [{ workspaceId, commitId }, "commit-details"] as const,
+
+  rollbackPreview: ({
+    folderId,
+    commitId,
+    envId,
+    projectId,
+    deepRollback
+  }: {
+    folderId: string;
+    commitId: string;
+    envId: string;
+    projectId: string;
+    deepRollback: boolean;
+  }) => [{ folderId, commitId, envId, projectId, deepRollback }, "rollback-preview"] as const
+};
+
+const fetchFolderCommitsCount = async ({
+  workspaceId,
+  environment,
+  directory
+}: {
+  workspaceId: string;
+  environment: string;
+  directory?: string;
+}) => {
+  const res = await apiRequest.get<{ count: number; folderId: string }>(
+    `/api/v1/pit/commits/count/${workspaceId}`,
+    {
+      params: {
+        environment,
+        path: directory
+      }
+    }
+  );
+  return res.data;
+};
+
+const fetchFolderCommitHistory = async (
+  workspaceId: string,
+  environment: string,
+  directory: string
+): Promise<CommitHistoryItem[]> => {
+  const res = await apiRequest.get<CommitHistoryItem[]>(`/api/v1/pit/commits/${workspaceId}`, {
+    params: {
+      environment,
+      path: directory
+    }
+  });
+  return res.data;
+};
+
+export const fetchCommitDetails = async (workspaceId: string, commitId: string) => {
+  const { data } = await apiRequest.get<CommitWithChanges>(
+    `/api/v1/pit/commits/${workspaceId}/${commitId}/changes`
+  );
+  return data;
+};
+
+export const fetchRollbackPreview = async (
+  folderId: string,
+  commitId: string,
+  envId: string,
+  projectId: string,
+  deepRollback: boolean,
+  secretPath: string
+): Promise<RollbackPreview[]> => {
+  const { data } = await apiRequest.get<RollbackPreview[]>(
+    `/api/v1/pit/commits/${projectId}/${commitId}/compare`,
+    {
+      params: {
+        folderId,
+        envId,
+        deepRollback,
+        secretPath
+      }
+    }
+  );
+  return data;
+};
+
+const fetchRollback = async (
+  folderId: string,
+  commitId: string,
+  projectId: string,
+  deepRollback: boolean,
+  message?: string
+) => {
+  const { data } = await apiRequest.post<{ success: boolean }>(
+    `/api/v1/pit/commits/${projectId}/${commitId}/rollback`,
+    {
+      folderId,
+      deepRollback,
+      message
+    }
+  );
+  return data;
+};
+
+const fetchRevert = async (commitId: string, projectId: string) => {
+  const { data } = await apiRequest.post<{ success: boolean; message: string }>(
+    `/api/v1/pit/commits/${projectId}/${commitId}/revert`
+  );
+  return data;
+};
+
+export const useCommitRevert = ({
+  commitId,
+  projectId,
+  environment,
+  directory
+}: {
+  commitId: string;
+  projectId: string;
+  environment: string;
+  directory: string;
+}) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: () => fetchRevert(commitId, projectId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          commitKeys.details({ workspaceId: projectId, commitId }),
+          commitKeys.history({ workspaceId: projectId, environment, directory }),
+          commitKeys.count({ workspaceId: projectId, environment, directory })
+        ]
+      });
+    }
+  });
+};
+
+export const useCommitRollback = ({
+  workspaceId,
+  commitId,
+  folderId,
+  deepRollback,
+  environment,
+  directory
+}: {
+  workspaceId: string;
+  commitId: string;
+  folderId: string;
+  deepRollback: boolean;
+  environment: string;
+  directory: string;
+}) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (message: string) =>
+      fetchRollback(folderId, commitId, workspaceId, deepRollback, message),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          commitKeys.details({ workspaceId, commitId }),
+          commitKeys.history({ workspaceId, environment, directory }),
+          commitKeys.count({ workspaceId, environment, directory })
+        ]
+      });
+    }
+  });
+};
+
+export const useGetFolderCommitsCount = ({
+  workspaceId,
+  environment,
+  directory,
+  isPaused
+}: {
+  workspaceId: string;
+  environment: string;
+  directory: string;
+  isPaused?: boolean;
+}) =>
+  useQuery({
+    enabled: Boolean(workspaceId && environment) && !isPaused,
+    queryKey: commitKeys.count({ workspaceId, environment, directory }),
+    queryFn: () => fetchFolderCommitsCount({ workspaceId, environment, directory })
+  });
+
+export const useGetFolderCommitHistory = ({
+  workspaceId,
+  environment,
+  directory
+}: {
+  workspaceId: string;
+  environment: string;
+  directory: string;
+}) => {
+  return useQuery({
+    queryKey: commitKeys.history({ workspaceId, environment, directory }),
+    queryFn: () => fetchFolderCommitHistory(workspaceId, environment, directory),
+    enabled: Boolean(workspaceId && environment)
+  });
+};
+
+export const useGetCommitDetails = (workspaceId: string, commitId: string) => {
+  return useQuery({
+    queryKey: commitKeys.details({ workspaceId, commitId }),
+    queryFn: () => fetchCommitDetails(workspaceId, commitId),
+    enabled: Boolean(workspaceId) && Boolean(commitId)
+  });
+};
+
+export const useGetRollbackPreview = (
+  folderId: string,
+  commitId: string,
+  envId: string,
+  projectId: string,
+  deepRollback: boolean,
+  secretPath: string
+) => {
+  return useQuery({
+    queryKey: commitKeys.rollbackPreview({ folderId, commitId, envId, projectId, deepRollback }),
+    queryFn: () =>
+      fetchRollbackPreview(folderId, commitId, envId, projectId, deepRollback, secretPath),
+    enabled: Boolean(folderId) && Boolean(commitId)
+  });
+};

frontend/src/hooks/api/folderCommits/types.ts

@@ -0,0 +1,63 @@
+import { SecretVersions } from "../types";
+
+export type CommitHistoryItem = {
+  id: string;
+  commitId: string;
+  actorMetadata: {
+    id: string;
+    name?: string;
+  };
+  actorType: string;
+  message: string;
+  folderId: string;
+  envId: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type TFolderCommitChanges = {
+  id: string;
+  folderCommitId: string;
+  changeType: "add" | "delete";
+  isUpdate: boolean;
+  secretVersionId: string | null;
+  folderVersionId: string | null;
+  createdAt: string;
+  updatedAt: string;
+  versions: SecretVersions[];
+  secretKey?: string;
+  folderName?: string;
+  secretVersion?: string;
+  folderVersion?: string;
+};
+
+export type FolderReconstructedItem = {
+  type: string;
+  id: string;
+  versionId: string;
+  folderName?: string;
+  folderVersion?: number;
+  secretKey?: string;
+  secretVersion?: number;
+};
+
+export type CommitWithChanges = {
+  changes: CommitHistoryItem & {
+    changes: TFolderCommitChanges[];
+  };
+};
+
+export type RollbackChange = {
+  type: "folder" | "secret";
+  id: string;
+  versionId: string;
+  changeType: "create" | "update" | "delete";
+  commitId: string;
+};
+
+export type RollbackPreview = {
+  folderId: string;
+  folderName: string;
+  folderPath: string;
+  changes: RollbackChange[];
+};

frontend/src/hooks/api/secretFolders/queries.tsx

@@ -10,6 +10,7 @@ import {
 import { apiRequest } from "@app/config/request";
 import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
 
+import { commitKeys } from "../folderCommits/queries";
 import { secretSnapshotKeys } from "../secretSnapshots/queries";
 import {
   TCreateFolderDTO,
@@ -166,6 +167,9 @@ export const useCreateFolder = () => {
       queryClient.invalidateQueries({
         queryKey: secretSnapshotKeys.count({ workspaceId: projectId, environment, directory: path })
       });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.count({ workspaceId: projectId, environment, directory: path })
+      });
     }
   });
 };
@@ -200,6 +204,12 @@ export const useUpdateFolder = () => {
       queryClient.invalidateQueries({
         queryKey: secretSnapshotKeys.count({ workspaceId: projectId, environment, directory: path })
       });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.count({ workspaceId: projectId, environment, directory: path })
+      });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.history({ workspaceId: projectId, environment, directory: path })
+      });
     }
   });
 };
@@ -234,6 +244,12 @@ export const useDeleteFolder = () => {
       queryClient.invalidateQueries({
         queryKey: secretSnapshotKeys.count({ workspaceId: projectId, environment, directory: path })
       });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.count({ workspaceId: projectId, environment, directory: path })
+      });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.history({ workspaceId: projectId, environment, directory: path })
+      });
     }
   });
 };
@@ -279,6 +295,20 @@ export const useUpdateFolderBatch = () => {
             directory: folder.path
           })
         });
+        queryClient.invalidateQueries({
+          queryKey: commitKeys.count({
+            workspaceId: projectId,
+            environment: folder.environment,
+            directory: folder.path
+          })
+        });
+        queryClient.invalidateQueries({
+          queryKey: commitKeys.history({
+            workspaceId: projectId,
+            environment: folder.environment,
+            directory: folder.path
+          })
+        });
       });
     }
   });

frontend/src/hooks/api/secrets/mutations.tsx

@@ -3,6 +3,7 @@ import { MutationOptions, useMutation, useQueryClient } from "@tanstack/react-qu
 import { apiRequest } from "@app/config/request";
 import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
 
+import { commitKeys } from "../folderCommits/queries";
 import { secretApprovalRequestKeys } from "../secretApprovalRequest/queries";
 import { secretSnapshotKeys } from "../secretSnapshots/queries";
 import { secretKeys } from "./queries";
@@ -59,6 +60,12 @@ export const useCreateSecretV3 = ({
       queryClient.invalidateQueries({
         queryKey: secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
       });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.count({ workspaceId, environment, directory: secretPath })
+      });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.history({ workspaceId, environment, directory: secretPath })
+      });
       queryClient.invalidateQueries({ queryKey: secretApprovalRequestKeys.count({ workspaceId }) });
     },
     ...options
@@ -118,6 +125,12 @@ export const useUpdateSecretV3 = ({
       queryClient.invalidateQueries({
         queryKey: secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
       });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.count({ workspaceId, environment, directory: secretPath })
+      });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.history({ workspaceId, environment, directory: secretPath })
+      });
       queryClient.invalidateQueries({ queryKey: secretApprovalRequestKeys.count({ workspaceId }) });
     },
     ...options
@@ -164,6 +177,12 @@ export const useDeleteSecretV3 = ({
       queryClient.invalidateQueries({
         queryKey: secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
       });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.count({ workspaceId, environment, directory: secretPath })
+      });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.history({ workspaceId, environment, directory: secretPath })
+      });
       queryClient.invalidateQueries({ queryKey: secretApprovalRequestKeys.count({ workspaceId }) });
     },
     ...options
@@ -200,6 +219,12 @@ export const useCreateSecretBatch = ({
       queryClient.invalidateQueries({
         queryKey: secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
       });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.count({ workspaceId, environment, directory: secretPath })
+      });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.history({ workspaceId, environment, directory: secretPath })
+      });
       queryClient.invalidateQueries({ queryKey: secretApprovalRequestKeys.count({ workspaceId }) });
     },
     ...options
@@ -236,6 +261,12 @@ export const useUpdateSecretBatch = ({
       queryClient.invalidateQueries({
         queryKey: secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
       });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.count({ workspaceId, environment, directory: secretPath })
+      });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.history({ workspaceId, environment, directory: secretPath })
+      });
       queryClient.invalidateQueries({ queryKey: secretApprovalRequestKeys.count({ workspaceId }) });
     },
     ...options
@@ -274,6 +305,12 @@ export const useDeleteSecretBatch = ({
       queryClient.invalidateQueries({
         queryKey: secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
       });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.count({ workspaceId, environment, directory: secretPath })
+      });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.history({ workspaceId, environment, directory: secretPath })
+      });
       queryClient.invalidateQueries({ queryKey: secretApprovalRequestKeys.count({ workspaceId }) });
     },
     ...options
@@ -347,6 +384,20 @@ export const useMoveSecrets = ({
           directory: sourceSecretPath
         })
       });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.count({
+          workspaceId: projectId,
+          environment: sourceEnvironment,
+          directory: sourceSecretPath
+        })
+      });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.history({
+          workspaceId: projectId,
+          environment: sourceEnvironment,
+          directory: sourceSecretPath
+        })
+      });
       queryClient.invalidateQueries({
         queryKey: secretApprovalRequestKeys.count({ workspaceId: projectId })
       });

frontend/src/pages/project/RoleDetailsBySlugPage/components/ProjectRoleModifySection.utils.tsx

@@ -11,6 +11,7 @@ import {
 } from "@app/context";
 import {
   PermissionConditionOperators,
+  ProjectPermissionCommitsActions,
   ProjectPermissionDynamicSecretActions,
   ProjectPermissionGroupActions,
   ProjectPermissionIdentityActions,
@@ -70,6 +71,11 @@ const SecretSyncPolicyActionSchema = z.object({
   [ProjectPermissionSecretSyncActions.RemoveSecrets]: z.boolean().optional()
 });
 
+const CommitPolicyActionSchema = z.object({
+  [ProjectPermissionCommitsActions.Read]: z.boolean().optional(),
+  [ProjectPermissionCommitsActions.PerformRollback]: z.boolean().optional()
+});
+
 const SecretRotationPolicyActionSchema = z.object({
   [ProjectPermissionSecretRotationActions.Read]: z.boolean().optional(),
   [ProjectPermissionSecretRotationActions.ReadGeneratedCredentials]: z.boolean().optional(),
@@ -248,7 +254,8 @@ export const projectRoleFormSchema = z.object({
       [ProjectPermissionSub.Kms]: GeneralPolicyActionSchema.array().default([]),
       [ProjectPermissionSub.Cmek]: CmekPolicyActionSchema.array().default([]),
       [ProjectPermissionSub.SecretSyncs]: SecretSyncPolicyActionSchema.array().default([]),
-      [ProjectPermissionSub.Kmip]: KmipPolicyActionSchema.array().default([])
+      [ProjectPermissionSub.Kmip]: KmipPolicyActionSchema.array().default([]),
+      [ProjectPermissionSub.Commits]: CommitPolicyActionSchema.array().default([])
     })
     .partial()
     .optional()
@@ -382,7 +389,8 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
         ProjectPermissionSub.SshCertificateTemplates,
         ProjectPermissionSub.SshCertificateAuthorities,
         ProjectPermissionSub.SshCertificates,
-        ProjectPermissionSub.SshHostGroups
+        ProjectPermissionSub.SshHostGroups,
+        ProjectPermissionSub.Commits
       ].includes(subject)
     ) {
       // from above statement we are sure it won't be undefined
@@ -975,6 +983,13 @@ export const PROJECT_PERMISSION_OBJECT: TProjectPermissionObject = {
       { label: "Remove", value: "delete" }
     ]
   },
+  [ProjectPermissionSub.Commits]: {
+    title: "Commits",
+    actions: [
+      { label: "View", value: ProjectPermissionCommitsActions.Read },
+      { label: "Perform Rollback", value: ProjectPermissionCommitsActions.PerformRollback }
+    ]
+  },
   [ProjectPermissionSub.Tags]: {
     title: "Tags",
     actions: [

frontend/src/pages/secret-manager/CommitDetailsPage/CommitDetailsPage.tsx

@@ -0,0 +1,81 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
+
+import { ROUTE_PATHS } from "@app/const/routes";
+import { useWorkspace } from "@app/context";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+
+import { CommitDetailsTab } from "./components/CommitDetailsTab";
+
+export const CommitDetailsPage = () => {
+  const { t } = useTranslation();
+  const envSlug = useParams({
+    from: ROUTE_PATHS.SecretManager.CommitDetailsPage.id,
+    select: (el) => el.environment
+  });
+  const selectedCommitId = useParams({
+    from: ROUTE_PATHS.SecretManager.CommitDetailsPage.id,
+    select: (el) => el.commitId
+  });
+  const folderId = useParams({
+    from: ROUTE_PATHS.SecretManager.CommitDetailsPage.id,
+    select: (el) => el.folderId
+  });
+  const { currentWorkspace } = useWorkspace();
+
+  const navigate = useNavigate();
+  const routerQueryParams: { secretPath?: string } = useSearch({
+    from: ROUTE_PATHS.SecretManager.CommitDetailsPage.id
+  });
+
+  const secretPath = (routerQueryParams.secretPath as string) || "/";
+
+  const handleGoBackToHistory = () => {
+    navigate({
+      to: `/${ProjectType.SecretManager}/$projectId/commits/$environment/$folderId` as const,
+      params: {
+        projectId: currentWorkspace.id,
+        folderId,
+        environment: envSlug
+      },
+      search: (query) => ({
+        ...query,
+        secretPath
+      })
+    });
+  };
+
+  const handleGoToRollbackPreview = () => {
+    navigate({
+      to: `/${ProjectType.SecretManager}/$projectId/commits/$environment/$folderId/$commitId/restore` as const,
+      params: {
+        projectId: currentWorkspace.id,
+        folderId,
+        environment: envSlug,
+        commitId: selectedCommitId
+      },
+      search: (query) => ({
+        ...query,
+        secretPath
+      })
+    });
+  };
+
+  return (
+    <div className="mx-auto flex w-full max-w-7xl justify-center bg-bunker-800 pb-4 pt-2 text-white">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Commit History" })}</title>
+      </Helmet>
+      <div className="w-full max-w-[75vw]">
+        <CommitDetailsTab
+          selectedCommitId={selectedCommitId}
+          workspaceId={currentWorkspace.id}
+          goBackToHistory={handleGoBackToHistory}
+          envSlug={envSlug}
+          goToRollbackPreview={handleGoToRollbackPreview}
+        />
+      </div>
+    </div>
+  );
+};

frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx

@@ -0,0 +1,327 @@
+import { useEffect, useState } from "react";
+import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { DropdownMenuItem } from "@radix-ui/react-dropdown-menu";
+import { useSearch } from "@tanstack/react-router";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  IconButton,
+  Spinner
+} from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { usePopUp } from "@app/hooks";
+import { CommitWithChanges } from "@app/hooks/api/folderCommits";
+import { useCommitRevert, useGetCommitDetails } from "@app/hooks/api/folderCommits/queries";
+
+import { SecretVersionDiffView } from "../SecretVersionDiffView";
+import { MergedItem } from "./types";
+
+const formatDisplayDate = (dateString: string): string => {
+  try {
+    const date = new Date(dateString);
+    const options: Intl.DateTimeFormatOptions = {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      hour12: true
+    };
+    return new Intl.DateTimeFormat("en-US", options).format(date);
+  } catch {
+    return dateString;
+  }
+};
+
+export const CommitDetailsTab = ({
+  selectedCommitId,
+  workspaceId,
+  envSlug,
+  goBackToHistory,
+  goToRollbackPreview
+}: {
+  selectedCommitId: string;
+  workspaceId: string;
+  envSlug: string;
+  goBackToHistory: () => void;
+  goToRollbackPreview: () => void;
+}): JSX.Element => {
+  // State for tracking collapsed items (empty by default means all are expanded)
+  const [collapsedItems, setCollapsedItems] = useState<Record<string, boolean>>({});
+
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "revertChanges"
+  ] as const);
+
+  const { data: commitDetails, isLoading } = useGetCommitDetails(workspaceId, selectedCommitId);
+
+  const routerQueryParams: { secretPath?: string } = useSearch({
+    from: ROUTE_PATHS.SecretManager.CommitDetailsPage.id
+  });
+  const secretPath = (routerQueryParams.secretPath as string) || "/";
+
+  const { mutateAsync: revert } = useCommitRevert({
+    commitId: selectedCommitId,
+    projectId: workspaceId,
+    environment: envSlug,
+    directory: secretPath
+  });
+
+  useEffect(() => {
+    setCollapsedItems({});
+  }, [selectedCommitId]);
+
+  const toggleItemCollapsed = (itemId: string): void => {
+    setCollapsedItems((prev) => ({ ...prev, [itemId]: !prev[itemId] }));
+  };
+
+  const handleRevertChanges = async (): Promise<void> => {
+    const response = await revert();
+    if (!response.success) {
+      createNotification({
+        type: "error",
+        text: response.message
+      });
+      return;
+    }
+    createNotification({
+      type: "success",
+      text: response.message
+    });
+
+    handlePopUpClose("revertChanges");
+
+    goBackToHistory();
+  };
+
+  // If no commit is selected or data is loading, show appropriate message
+  if (!selectedCommitId) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-gray-400">Select a commit to view details</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  if (!commitDetails) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-gray-400">No details found for this commit</p>
+      </div>
+    );
+  }
+
+  // Parse the commit details if it's a string
+  let parsedCommitDetails: CommitWithChanges;
+  try {
+    parsedCommitDetails =
+      typeof commitDetails === "string" ? JSON.parse(commitDetails) : commitDetails;
+  } catch (error) {
+    console.error("Failed to parse commit details:", error);
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-gray-400">Error parsing commit details</p>
+      </div>
+    );
+  }
+
+  // Get all changes from the commit
+  const commitChanges = parsedCommitDetails.changes?.changes || [];
+
+  // Separate changes by type
+  const addedChanges = commitChanges.filter((c) => c.changeType === "add" && !c.isUpdate);
+  const updatedChanges = commitChanges.filter((c) => c.changeType === "add" && c.isUpdate);
+  const deletedChanges = commitChanges.filter((c) => c.changeType === "delete");
+
+  // Create merged item list from changes only
+  const changedItems: MergedItem[] = [];
+
+  // Add items from added changes
+  addedChanges.forEach((change) => {
+    changedItems.push({
+      id: change.id,
+      type: change.secretVersionId || change.secretKey ? "secret" : "folder",
+      versionId: change.secretVersionId || change.id,
+      folderName: change.folderName,
+      folderVersion: change.folderVersion,
+      secretKey: change.secretKey,
+      secretVersion: change.secretVersion,
+      isAdded: true,
+      versions: change.versions,
+      changeId: change.id
+    });
+  });
+
+  // Add items from updated changes
+  updatedChanges.forEach((change) => {
+    changedItems.push({
+      id: change.id,
+      type: change.secretVersionId || change.secretKey ? "secret" : "folder",
+      versionId: change.secretVersionId || change.id,
+      folderName: change.folderName,
+      folderVersion: change.folderVersion,
+      secretKey: change.secretKey,
+      secretVersion: change.secretVersion,
+      isUpdated: true,
+      versions: change.versions,
+      changeId: change.id
+    });
+  });
+
+  // Add deleted items
+  deletedChanges.forEach((change) => {
+    changedItems.push({
+      id: change.id,
+      type: change.secretVersionId || change.secretKey ? "secret" : "folder",
+      secretKey: change.secretKey,
+      folderName: change.folderName,
+      secretVersion: change.secretVersion,
+      folderVersion: change.folderVersion,
+      isDeleted: true,
+      versions: change.versions,
+      changeId: change.id
+    });
+  });
+
+  // Sort items: deleted first, then folders, then secrets, all alphabetically
+  const sortedChangedItems = [...changedItems].sort((a, b) => {
+    // First sort deleted items to the top
+    if (a.isDeleted !== b.isDeleted) {
+      return a.isDeleted ? -1 : 1;
+    }
+
+    // Then sort by type (folders before secrets)
+    if (a.type !== b.type) {
+      return a.type === "folder" ? -1 : 1;
+    }
+
+    // Finally sort alphabetically by name
+    const aName = a.type === "folder" ? a.folderName || "" : a.secretKey || "";
+    const bName = b.type === "folder" ? b.folderName || "" : b.secretKey || "";
+    return aName.localeCompare(bName);
+  });
+
+  // Render an item from the merged list
+  const renderMergedItem = (item: MergedItem): JSX.Element => {
+    return (
+      <div key={item.id} className="mb-2">
+        <SecretVersionDiffView
+          item={item}
+          isCollapsed={collapsedItems[item.id]}
+          onToggleCollapse={(id) => toggleItemCollapsed(id)}
+        />
+      </div>
+    );
+  };
+
+  // Format actor display
+  const actorDisplay =
+    parsedCommitDetails.changes?.actorMetadata?.name ||
+    parsedCommitDetails.changes?.actorType ||
+    "Unknown";
+
+  return (
+    <div className="w-full">
+      <div>
+        <div className="flex justify-between pb-2">
+          <div>
+            <div>
+              <div className="flex items-center">
+                <h1 className="mr-4 text-3xl font-semibold text-white">
+                  {parsedCommitDetails.changes?.message || "No message"}
+                </h1>
+              </div>
+            </div>
+            <div className="font-small mb-4 mt-2 flex items-center text-sm">
+              <p>
+                <span> Commited by </span>
+                <b>{actorDisplay}</b>
+                <span> on </span>
+                <b>
+                  {formatDisplayDate(
+                    parsedCommitDetails.changes?.createdAt || new Date().toISOString()
+                  )}
+                </b>
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center justify-start">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <IconButton
+                  ariaLabel="commit-options"
+                  variant="outline_bg"
+                  className="h-10 rounded border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-sm font-medium"
+                >
+                  <p className="mr-2">Restore Options</p>
+                  <FontAwesomeIcon icon={faAngleDown} />
+                </IconButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                sideOffset={2}
+                className="animate-in fade-in-50 zoom-in-95 min-w-[200px] p-1"
+                style={{ marginTop: "0" }}
+              >
+                <DropdownMenuItem
+                  className="h-10 w-full cursor-pointer px-3 py-2 text-sm transition-colors hover:bg-mineshaft-700"
+                  onClick={() => goToRollbackPreview()}
+                >
+                  <div className="flex w-full items-center justify-start">
+                    <span>Restore entire folder</span>
+                  </div>
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                  className="h-10 w-full cursor-pointer px-3 py-2 text-sm transition-colors hover:bg-mineshaft-700"
+                  onClick={() => handlePopUpOpen("revertChanges")}
+                >
+                  <div className="flex w-full items-center justify-start">
+                    <span>Revert commit changes</span>
+                  </div>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        <div className="py-2">
+          <div className="overflow-hidden">
+            <div className="space-y-2">
+              {sortedChangedItems.length > 0 ? (
+                sortedChangedItems.map((item) => renderMergedItem(item))
+              ) : (
+                <div className="flex h-32 items-center justify-center rounded-lg border border-mineshaft-600 bg-mineshaft-800">
+                  <p className="text-gray-400">No changed items found</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <DeleteActionModal
+        isOpen={popUp.revertChanges.isOpen}
+        deleteKey="revert"
+        title="Are you sure you want to revert changes from this commit?"
+        subTitle="This action will undo all changes made in this commit."
+        onChange={(isOpen) => handlePopUpToggle("revertChanges", isOpen)}
+        onDeleteApproved={handleRevertChanges}
+        buttonText="Revert Changes"
+      />
+    </div>
+  );
+};

frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/index.ts

@@ -0,0 +1 @@
+export { CommitDetailsTab } from "./CommitDetailsTab";

frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/types.ts

@@ -0,0 +1,14 @@
+export interface MergedItem {
+  id: string;
+  type: "secret" | "folder";
+  versionId?: string;
+  folderName?: string;
+  folderVersion?: string;
+  secretKey?: string;
+  secretVersion?: string;
+  isAdded?: boolean;
+  isUpdated?: boolean;
+  isDeleted?: boolean;
+  versions?: any[];
+  changeId: string;
+}

frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/RollbackPreviewTab.tsx

@@ -0,0 +1,376 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { useEffect, useState } from "react";
+import { faFolder, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  DeleteActionModal,
+  Input,
+  PageHeader,
+  Spinner,
+  Switch,
+  Tooltip
+} from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useCommitRollback, useGetRollbackPreview } from "@app/hooks/api/folderCommits/queries";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+
+import { SecretVersionDiffView } from "../SecretVersionDiffView";
+
+interface Version {
+  // Common fields
+  id?: string;
+  version: number;
+  createdAt?: string;
+  updatedAt?: string;
+
+  // Secret-specific fields
+  secretKey?: string;
+  secretValue?: string;
+  secretComment?: string;
+  skipMultilineEncoding?: boolean;
+  secretReminderRepeatDays?: number | null;
+  secretReminderNote?: string | null;
+  secretReminderRecipients?: string[];
+  tags?: string[];
+  metadata?: Record<string, unknown>;
+
+  // Folder-specific fields
+  name?: string;
+  envId?: string;
+  folderId?: string;
+
+  [key: string]: any;
+}
+
+interface RollbackChange {
+  type: "secret" | "folder";
+  id: string;
+  versionId: string;
+  fromVersion?: number;
+  changeType: "create" | "update" | "delete";
+  commitId: string;
+  secretKey?: string;
+  secretVersion?: number;
+  folderName?: string;
+  folderVersion?: number;
+  versions?: Version[];
+  createdAt?: string;
+}
+
+interface FolderChanges {
+  folderId: string;
+  folderName: string;
+  folderPath: string;
+  changes: RollbackChange[];
+}
+
+export const RollbackPreviewTab = (): JSX.Element => {
+  const [deepRollback, setDeepRollback] = useState<boolean>(false);
+  const [message, setMessage] = useState<string>("");
+  const [selectedFolderId, setSelectedFolderId] = useState<string | null>(null);
+  const { currentWorkspace } = useWorkspace();
+  const envSlug = useParams({
+    from: ROUTE_PATHS.SecretManager.RollbackPreviewPage.id,
+    select: (el) => el.environment
+  });
+  const selectedCommitId = useParams({
+    from: ROUTE_PATHS.SecretManager.RollbackPreviewPage.id,
+    select: (el) => el.commitId
+  });
+  const folderId = useParams({
+    from: ROUTE_PATHS.SecretManager.RollbackPreviewPage.id,
+    select: (el) => el.folderId
+  });
+
+  const navigate = useNavigate();
+  const routerQueryParams = useSearch({
+    from: ROUTE_PATHS.SecretManager.RollbackPreviewPage.id
+  });
+
+  const secretPath = (routerQueryParams.secretPath as string) || "/";
+
+  const goBackToHistory = () => {
+    navigate({
+      to: `/${ProjectType.SecretManager}/$projectId/commits/$environment/$folderId` as const,
+      params: {
+        projectId: currentWorkspace.id,
+        folderId,
+        environment: envSlug
+      },
+      search: (query) => ({
+        ...query,
+        secretPath
+      })
+    });
+  };
+
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "rollbackConfirm"
+  ] as const);
+
+  const { mutateAsync: rollback } = useCommitRollback({
+    workspaceId: currentWorkspace.id,
+    commitId: selectedCommitId,
+    folderId,
+    deepRollback,
+    environment: envSlug,
+    directory: secretPath
+  });
+
+  const { data: rollbackChangesNested, isLoading } = useGetRollbackPreview(
+    folderId,
+    selectedCommitId,
+    currentWorkspace.environments.find((e) => e.slug === envSlug)?.id || "",
+    currentWorkspace.id,
+    deepRollback,
+    secretPath
+  );
+
+  const handleRollback = async (): Promise<void> => {
+    try {
+      await rollback(message);
+
+      createNotification({
+        type: "success",
+        text: "Rollback completed successfully"
+      });
+
+      handlePopUpClose("rollbackConfirm");
+      goBackToHistory();
+    } catch (error) {
+      createNotification({
+        type: "error",
+        text: error instanceof Error ? error.message : "Failed to rollback changes"
+      });
+    }
+  };
+
+  const folderChanges: FolderChanges[] = rollbackChangesNested || [];
+
+  const currentFolderChanges: FolderChanges = folderChanges.find(
+    (folder) => folder.folderId === folderId
+  ) || {
+    folderId: folderId || "",
+    folderName: "Current Folder",
+    folderPath: secretPath,
+    changes: []
+  };
+  const nestedFolderChanges: FolderChanges[] = folderChanges.filter(
+    (folder) => folder.folderId !== folderId
+  );
+
+  useEffect(() => {
+    // Select the current folder by default
+    if (folderChanges.length > 0) {
+      setSelectedFolderId(currentFolderChanges.folderId);
+    }
+  }, [folderChanges, currentFolderChanges.folderId]);
+
+  if (!selectedCommitId) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-gray-400">Select a commit to view rollback preview</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  const renderSidebar = (): JSX.Element => {
+    return (
+      <div className="h-[70vh] w-72 overflow-y-auto bg-mineshaft-900">
+        <div
+          className={`cursor-pointer border-b border-mineshaft-600 ${
+            selectedFolderId === currentFolderChanges.folderId ? "bg-mineshaft-700" : ""
+          }`}
+          onClick={() => setSelectedFolderId(currentFolderChanges.folderId)}
+        >
+          <div className="flex items-center justify-between px-4 py-3">
+            <div className="flex items-center">
+              <FontAwesomeIcon icon={faFolder} className="mr-2 text-yellow-500" />
+              <span className="font-medium text-white">
+                {currentFolderChanges.folderPath || currentFolderChanges.folderName}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {deepRollback && nestedFolderChanges.length > 0 && (
+          <>
+            <div className="border-b border-mineshaft-600 bg-mineshaft-800 px-4 py-2">
+              <span className="text-sm font-semibold text-white">Affected Child Folders</span>
+            </div>
+            {nestedFolderChanges.map((folder) => (
+              <div
+                key={folder.folderId}
+                className={`cursor-pointer border-b border-mineshaft-600 ${
+                  selectedFolderId === folder.folderId ? "bg-mineshaft-700" : ""
+                }`}
+                onClick={() => setSelectedFolderId(folder.folderId)}
+              >
+                <div className="flex items-center justify-between px-4 py-2">
+                  <div className="flex items-center">
+                    <FontAwesomeIcon icon={faFolder} className="mr-2 text-yellow-500" size="sm" />
+                    <span className="max-w-[150px] truncate text-sm font-medium text-white">
+                      {folder.folderPath || folder.folderName}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </>
+        )}
+      </div>
+    );
+  };
+
+  const getSelectedFolderChanges = (): RollbackChange[] => {
+    if (!selectedFolderId) return [];
+
+    const folder = folderChanges.find((f) => f.folderId === selectedFolderId);
+    return folder?.changes || [];
+  };
+
+  const renderMainContent = (): JSX.Element => {
+    const selectedFolderChanges = getSelectedFolderChanges();
+    const selectedFolder = folderChanges.find((f) => f.folderId === selectedFolderId);
+
+    if (!selectedFolder || selectedFolderChanges.length === 0) {
+      return (
+        <div className="flex h-[70vh] w-full items-center justify-center border border-mineshaft-600">
+          <p className="text-gray-400">No changes in selected folder</p>
+        </div>
+      );
+    }
+
+    return (
+      <div className="h-[70vh] w-full overflow-y-auto border-l border-mineshaft-600">
+        <div className="space-y-4 p-4">
+          {selectedFolderChanges.map((change) => (
+            <div key={change.id} className="mb-4">
+              <SecretVersionDiffView
+                item={{
+                  id: change.id,
+                  type: change.type,
+                  isAdded: change.changeType === "create",
+                  isDeleted: change.changeType === "delete",
+                  isUpdated: change.changeType === "update",
+                  versions: change.versions,
+                  isRollback: true,
+                  secretKey: change.secretKey,
+                  folderName: change.folderName
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="mx-auto flex w-full max-w-7xl justify-center bg-bunker-800 pb-4 pt-2 text-white">
+      <div className="w-full max-w-[75vw]">
+        <div className="h-full w-full">
+          <div>
+            <PageHeader
+              title={`Restore folder at commit ${selectedCommitId.substring(0, 8)}`}
+              description="This will restore all changes to how they appeared at the point in time of this commit. Any modifications made after this commit will be undone."
+            />
+
+            {folderChanges.length > 0 ? (
+              <div className="flex w-full border border-mineshaft-600">
+                {renderSidebar()}
+                {renderMainContent()}
+              </div>
+            ) : (
+              <div className="flex h-32 items-center justify-center">
+                <p className="text-gray-400">No changes will be applied with this restore</p>
+              </div>
+            )}
+
+            <div className="border-x border-mineshaft-600 bg-mineshaft-800 px-6 py-3">
+              <div className="flex items-center justify-end">
+                <div className="flex items-center">
+                  <Tooltip content="Enable/Disable deep rollback to restore all nested folders to their previous state">
+                    <FontAwesomeIcon icon={faInfoCircle} className="mr-2 text-mineshaft-400" />
+                  </Tooltip>
+                  <Switch
+                    className="ml-2 bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/50"
+                    thumbClassName="bg-mineshaft-800"
+                    isChecked={deepRollback}
+                    onCheckedChange={setDeepRollback}
+                    id="deep-rollback"
+                  >
+                    Recursively Restore Child Folders
+                  </Switch>
+                </div>
+              </div>
+            </div>
+
+            <div className="border-t border-mineshaft-600 py-4">
+              <div className="flex w-full items-center justify-between gap-2">
+                <div className="flex-1">
+                  <Input
+                    placeholder="Restore Message"
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    className="w-full border-mineshaft-500 bg-mineshaft-700 text-sm"
+                  />
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    onClick={() => {
+                      if (!message) {
+                        createNotification({
+                          type: "error",
+                          text: "Please enter a restore message"
+                        });
+                        return;
+                      }
+                      handlePopUpOpen("rollbackConfirm");
+                    }}
+                    colorSchema="primary"
+                    className="px-6 py-2"
+                  >
+                    Restore
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <DeleteActionModal
+            isOpen={popUp.rollbackConfirm.isOpen}
+            deleteKey="restore"
+            title={`Are you sure you want to restore to commit ${selectedCommitId?.substring(0, 8)}?`}
+            subTitle={`
+              ${
+                deepRollback
+                  ? "This will revert all changes to how they appeared at the point in time of this commit."
+                  : "This will revert this folder and all child folders to how they appeared at the point in time of this commit."
+              }
+                Any changes made after this commit will be permanently removed.
+            `}
+            onChange={(isOpen) => handlePopUpToggle("rollbackConfirm", isOpen)}
+            onDeleteApproved={handleRollback}
+            buttonText="Restore"
+          />
+        </div>{" "}
+      </div>{" "}
+    </div>
+  );
+};

frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/index.ts

@@ -0,0 +1 @@
+export { RollbackPreviewTab } from "./RollbackPreviewTab";

frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/route.tsx

@@ -0,0 +1,91 @@
+import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
+import { zodValidator } from "@tanstack/zod-adapter";
+import { z } from "zod";
+
+import { SecretDashboardPathBreadcrumb } from "@app/components/navigation/SecretDashboardPathBreadcrumb";
+import { BreadcrumbTypes } from "@app/components/v2";
+
+import { RollbackPreviewTab } from "./RollbackPreviewTab";
+
+const RollbackPreviewTabQueryParamsSchema = z.object({
+  secretPath: z.string().catch("/")
+});
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/restore"
+)({
+  component: RollbackPreviewTab,
+  validateSearch: zodValidator(RollbackPreviewTabQueryParamsSchema),
+  search: {
+    middlewares: [stripSearchParams({ secretPath: "/" })]
+  },
+  beforeLoad: ({ context, params, search }) => {
+    const secretPathSegments = search.secretPath.split("/").filter(Boolean);
+
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          type: BreadcrumbTypes.Dropdown,
+          label:
+            context.project.environments.find((el) => el.slug === params.environment)?.name || "",
+          dropdownTitle: "Environments",
+          links: context.project.environments.map((el) => ({
+            label: el.name,
+            link: linkOptions({
+              to: "/secret-manager/$projectId/secrets/$envSlug",
+              params: {
+                projectId: params.projectId,
+                envSlug: el.slug
+              }
+            })
+          }))
+        },
+        ...secretPathSegments.map((_, index) => ({
+          type: BreadcrumbTypes.Component,
+          component: () => (
+            <SecretDashboardPathBreadcrumb
+              secretPathSegments={secretPathSegments}
+              selectedPathSegmentIndex={index}
+              environmentSlug={params.environment}
+              projectId={params.projectId}
+              disableCopy
+            />
+          )
+        })),
+        {
+          label: "Commits",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/commits/$environment/$folderId",
+            params: {
+              projectId: params.projectId,
+              environment: params.environment,
+              folderId: params.folderId
+            },
+            search: {
+              secretPath: search.secretPath
+            }
+          })
+        },
+        {
+          label: params.commitId,
+          link: linkOptions({
+            to: "/secret-manager/$projectId/commits/$environment/$folderId/$commitId",
+            params: {
+              projectId: params.projectId,
+              environment: params.environment,
+              folderId: params.folderId,
+              commitId: params.commitId
+            },
+            search: {
+              secretPath: search.secretPath
+            }
+          })
+        },
+        {
+          label: "Restore"
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx

@@ -0,0 +1,585 @@
+/* eslint-disable react/prop-types */
+import { useRef, useState } from "react";
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export interface Version {
+  id?: string;
+  version: number;
+  // Secret-specific fields
+  secretKey?: string;
+  secretValue?: string;
+  secretComment?: string;
+  skipMultilineEncoding?: boolean;
+  // Folder-specific fields
+  name?: string;
+  // Allow other properties
+  [key: string]: any;
+}
+
+export interface DiffViewItem {
+  type: "secret" | "folder";
+  isAdded?: boolean;
+  isDeleted?: boolean;
+  isUpdated?: boolean;
+  versions?: Version[];
+  isRollback?: boolean;
+  id: string;
+  secretKey?: string;
+  folderName?: string;
+}
+
+interface SecretVersionDiffViewProps {
+  item: DiffViewItem;
+  isCollapsed?: boolean;
+  onToggleCollapse?: (id: string) => void;
+  showHeader?: boolean;
+  customHeader?: JSX.Element;
+}
+
+const highlightChangedFields = (
+  json: any,
+  changedFields: Set<string>,
+  isOldVersion: boolean
+): JSX.Element => {
+  const lines = JSON.stringify(json, null, 2).split("\n");
+  return (
+    <div className="font-mono text-sm">
+      {lines.map((line, idx) => {
+        const fieldMatch = line.match(/"([^"]+)":/);
+        if (fieldMatch && changedFields.has(fieldMatch[1])) {
+          // Check for different value types and highlight them
+
+          // 1. String values: "field": "value"
+          const stringMatch = line.match(/: "([^"]*)"(,?)$/);
+          if (stringMatch) {
+            const beforeValue = line.substring(0, line.indexOf(': "'));
+            const value = `"${stringMatch[1]}"`;
+            const afterValue = stringMatch[2] || "";
+
+            return (
+              <div
+                key={`${idx + 1}`}
+                className={
+                  isOldVersion ? "flex bg-red-950 text-red-300" : "flex bg-green-950 text-green-300"
+                }
+              >
+                <div className="w-4 flex-shrink-0">{isOldVersion ? "-" : "+"}</div>
+                <div>
+                  {beforeValue}:{" "}
+                  <span
+                    className={`rounded border border-none px-1 ${isOldVersion ? "bg-red-900" : "bg-green-900"}`}
+                  >
+                    {value}
+                  </span>
+                  {afterValue}
+                </div>
+              </div>
+            );
+          }
+
+          // 2. Number values: "field": 123
+          const numberMatch = line.match(/: (-?\d+(?:\.\d+)?)(,?)$/);
+          if (numberMatch) {
+            const beforeValue = line.substring(0, line.indexOf(": ") + 2);
+            const value = numberMatch[1];
+            const afterValue = numberMatch[2] || "";
+
+            return (
+              <div
+                key={`${idx + 1}`}
+                className={
+                  isOldVersion ? "flex bg-red-950 text-red-300" : "flex bg-green-950 text-green-300"
+                }
+              >
+                <div className="w-4 flex-shrink-0">{isOldVersion ? "-" : "+"}</div>
+                <div>
+                  {beforeValue.substring(0, beforeValue.length - 2)}:{" "}
+                  <span
+                    className={`rounded border border-none px-1 ${isOldVersion ? "bg-red-900" : "bg-green-900"}`}
+                  >
+                    {value}
+                  </span>
+                  {afterValue}
+                </div>
+              </div>
+            );
+          }
+
+          // 3. Null values: "field": null
+          const nullMatch = line.match(/: (null)(,?)$/);
+          if (nullMatch) {
+            const beforeValue = line.substring(0, line.indexOf(": ") + 2);
+            const value = nullMatch[1];
+            const afterValue = nullMatch[2] || "";
+
+            return (
+              <div
+                key={`${idx + 1}`}
+                className={
+                  isOldVersion ? "flex bg-red-950 text-red-300" : "flex bg-green-950 text-green-300"
+                }
+              >
+                <div className="w-4 flex-shrink-0">{isOldVersion ? "-" : "+"}</div>
+                <div>
+                  {beforeValue.substring(0, beforeValue.length - 2)}:{" "}
+                  <span
+                    className={`rounded border border-none px-1 ${isOldVersion ? "bg-red-900" : "bg-green-900"}`}
+                  >
+                    {value}
+                  </span>
+                  {afterValue}
+                </div>
+              </div>
+            );
+          }
+
+          // 4. Boolean values: "field": true|false
+          const booleanMatch = line.match(/: (true|false)(,?)$/);
+          if (booleanMatch) {
+            const beforeValue = line.substring(0, line.indexOf(": ") + 2);
+            const value = booleanMatch[1];
+            const afterValue = booleanMatch[2] || "";
+
+            return (
+              <div
+                key={`${idx + 1}`}
+                className={
+                  isOldVersion ? "flex bg-red-950 text-red-300" : "flex bg-green-950 text-green-300"
+                }
+              >
+                <div className="w-4 flex-shrink-0">{isOldVersion ? "-" : "+"}</div>
+                <div>
+                  {beforeValue.substring(0, beforeValue.length - 2)}:{" "}
+                  <span
+                    className={`rounded border border-none px-1 ${isOldVersion ? "bg-red-900" : "bg-green-900"}`}
+                  >
+                    {value}
+                  </span>
+                  {afterValue}
+                </div>
+              </div>
+            );
+          }
+
+          // 5. Array values: Handle the first line of an array - "field": [
+          const arrayStartMatch = line.match(/: \[(,?)$/);
+          if (arrayStartMatch) {
+            // This is the start of an array, highlight the whole line
+            return (
+              <div
+                key={`${idx + 1}`}
+                className={
+                  isOldVersion ? "flex bg-red-950 text-red-300" : "flex bg-green-950 text-green-300"
+                }
+              >
+                <div className="w-4 flex-shrink-0">{isOldVersion ? "-" : "+"}</div>
+                <div>{line}</div>
+              </div>
+            );
+          }
+
+          // 6. Empty Array values: "field": []
+          const emptyArrayMatch = line.match(/: \[\](,?)$/);
+          if (emptyArrayMatch) {
+            const beforeValue = line.substring(0, line.indexOf(": ") + 2);
+            const value = "[]";
+            const afterValue = emptyArrayMatch[1] || "";
+
+            return (
+              <div
+                key={`${idx + 1}`}
+                className={
+                  isOldVersion ? "flex bg-red-950 text-red-300" : "flex bg-green-950 text-green-300"
+                }
+              >
+                <div className="w-4 flex-shrink-0">{isOldVersion ? "-" : "+"}</div>
+                <div>
+                  {beforeValue.substring(0, beforeValue.length - 2)}:{" "}
+                  <span
+                    className={`rounded border border-none px-1 ${isOldVersion ? "bg-red-900" : "bg-green-900"}`}
+                  >
+                    {value}
+                  </span>
+                  {afterValue}
+                </div>
+              </div>
+            );
+          }
+
+          // Check if this is part of an array or object that belongs to a changed field
+          // This handles array items, closing brackets, and other complex structure contents
+          const belongsToChangedField = () => {
+            // If we're inside an array or object of a changed field, highlight it
+            let openBrackets = 0;
+            let openBraces = 0;
+            let currentFieldName = null;
+
+            for (let i = idx - 1; i >= 0; i -= 1) {
+              const prevLine = lines[i];
+
+              // Count brackets and braces to track nesting
+              openBrackets += (prevLine.match(/\[/g) || []).length;
+              openBrackets -= (prevLine.match(/\]/g) || []).length;
+              openBraces += (prevLine.match(/{/g) || []).length;
+              openBraces -= (prevLine.match(/}/g) || []).length;
+
+              // If we find a field and we're still inside its value, check if it's a changed field
+              const fieldNameMatch = prevLine.match(/"([^"]+)":/);
+              if (fieldNameMatch && (openBrackets > 0 || openBraces > 0)) {
+                [, currentFieldName] = fieldNameMatch;
+                return changedFields.has(currentFieldName);
+              }
+
+              // If we've reached the root level, stop looking
+              if (openBrackets <= 0 && openBraces <= 0) {
+                return false;
+              }
+            }
+
+            return false;
+          };
+
+          // Regular line with changed field or part of a changed complex structure
+          if (belongsToChangedField()) {
+            return (
+              <div
+                key={`${idx + 1}`}
+                className={
+                  isOldVersion ? "flex bg-red-950 text-red-300" : "flex bg-green-950 text-green-300"
+                }
+              >
+                <div className="w-4 flex-shrink-0">{isOldVersion ? "-" : "+"}</div>
+                <div>{line}</div>
+              </div>
+            );
+          }
+
+          // Simple fallback for any other cases of changed fields
+          return (
+            <div
+              key={`${idx + 1}`}
+              className={
+                isOldVersion ? "flex bg-red-950 text-red-300" : "flex bg-green-950 text-green-300"
+              }
+            >
+              <div className="w-4 flex-shrink-0">{isOldVersion ? "-" : "+"}</div>
+              <div>{line}</div>
+            </div>
+          );
+        }
+
+        // Unchanged lines
+        return (
+          <div key={`${idx + 1}`} className="flex">
+            <div className="w-4 flex-shrink-0" />
+            <div>{line}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+// Helper: Format added JSON with + in a separate column
+const formatAddedJson = (json: any): JSX.Element => {
+  const lines = JSON.stringify(json, null, 2).split("\n");
+  return (
+    <div className="font-mono text-sm text-green-300">
+      {lines.map((line, idx) => (
+        <div key={`${idx + 1}`} className="flex">
+          <div className="w-4 flex-shrink-0">+</div>
+          <div>{line}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// Helper: Format deleted JSON with - in a separate column
+const formatDeletedJson = (json: any): JSX.Element => {
+  const lines = JSON.stringify(json, null, 2).split("\n");
+  return (
+    <div className="font-mono text-sm text-red-300">
+      {lines.map((line, idx) => (
+        <div key={`${idx + 1}`} className="flex">
+          <div className="w-4 flex-shrink-0">-</div>
+          <div>{line}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// Helper: Get differences between secret versions
+export const getVersionDifferences = (versions: Version[]) => {
+  if (!versions || versions.length === 0) return [];
+
+  // Sort versions by version number (descending)
+  const sortedVersions = [...versions].sort((a, b) => b.version - a.version);
+  const newVersion = sortedVersions[0];
+
+  // Fields to process
+  const fieldsToProcess = [
+    "secretKey",
+    "secretValue",
+    "secretComment",
+    "skipMultilineEncoding",
+    "secretReminderRepeatDays",
+    "secretReminderNote",
+    "metadata",
+    "tags",
+    "secretReminderRecipients",
+    "name"
+  ];
+
+  // If only one version exists
+  if (sortedVersions.length === 1) {
+    return fieldsToProcess.reduce(
+      (differences, field) => {
+        if (newVersion[field] !== undefined && newVersion[field] !== null) {
+          let newVal = newVersion[field];
+
+          if (field === "tags" && Array.isArray(newVersion[field])) {
+            if (newVersion[field].length > 0 && typeof newVersion[field][0] === "object") {
+              newVal = newVersion[field].map((tag) => tag.name).join(", ");
+            } else if (Array.isArray(newVersion[field])) {
+              newVal = newVersion[field].join(", ");
+            }
+          }
+
+          differences.push({
+            field,
+            oldValue: null,
+            newValue: newVal
+          });
+        }
+        return differences;
+      },
+      [] as { field: string; oldValue: any; newValue: any }[]
+    );
+  }
+
+  // Otherwise, compare the two versions
+  const oldVersion = sortedVersions[1];
+
+  return fieldsToProcess.reduce(
+    (differences, field) => {
+      if (JSON.stringify(oldVersion[field]) !== JSON.stringify(newVersion[field])) {
+        let oldVal = oldVersion[field];
+        let newVal = newVersion[field];
+
+        if (field === "tags" && Array.isArray(oldVersion[field])) {
+          if (oldVersion[field].length > 0 && typeof oldVersion[field][0] === "object") {
+            oldVal = oldVersion[field].map((tag) => tag.name).join(", ");
+          } else if (Array.isArray(oldVersion[field])) {
+            oldVal = oldVersion[field].join(", ");
+          }
+        }
+
+        if (field === "tags" && Array.isArray(newVersion[field])) {
+          if (newVersion[field].length > 0 && typeof newVersion[field][0] === "object") {
+            newVal = newVersion[field].map((tag) => tag.name).join(", ");
+          } else if (Array.isArray(newVersion[field])) {
+            newVal = newVersion[field].join(", ");
+          }
+        }
+
+        differences.push({
+          field,
+          oldValue: oldVal,
+          newValue: newVal
+        });
+      }
+      return differences;
+    },
+    [] as { field: string; oldValue: any; newValue: any }[]
+  );
+};
+
+// Helper: Get differences between folder versions
+export const getFolderDifferences = (versions: Version[]) => {
+  if (!versions || versions.length === 0) return [];
+
+  const sortedVersions = [...versions].sort((a, b) => b.version - a.version);
+  const newVersion = sortedVersions[0];
+
+  if (sortedVersions.length === 1) {
+    return [
+      {
+        field: "folderName",
+        oldValue: null,
+        newValue: newVersion.name
+      }
+    ];
+  }
+
+  const oldVersion = sortedVersions[1];
+  return [
+    {
+      field: "folderName",
+      oldValue: oldVersion.name,
+      newValue: newVersion.name
+    }
+  ];
+};
+
+export const SecretVersionDiffView: React.FC<SecretVersionDiffViewProps> = ({
+  item,
+  isCollapsed = false,
+  onToggleCollapse,
+  showHeader = true,
+  customHeader
+}) => {
+  const oldContainerRef = useRef<HTMLDivElement>(null);
+  const newContainerRef = useRef<HTMLDivElement>(null);
+  const [isScrollingSynced, setIsScrollingSynced] = useState(false);
+  const [internalCollapsed, setInternalCollapsed] = useState(isCollapsed);
+
+  const collapsed = onToggleCollapse ? isCollapsed : internalCollapsed;
+
+  const handleToggle = () => {
+    if (onToggleCollapse && item.id) {
+      onToggleCollapse(item.id);
+    } else {
+      setInternalCollapsed(!internalCollapsed);
+    }
+  };
+
+  if (!item.versions) {
+    return <div className="px-6 py-3 text-gray-400">No details available</div>;
+  }
+
+  const differences = getVersionDifferences(item.versions);
+
+  if (differences.length === 0) {
+    return <div className="px-6 py-3 text-gray-400">No details available</div>;
+  }
+
+  const changedFields = new Set<string>();
+  differences.forEach((diff) => {
+    if (JSON.stringify(diff.oldValue) !== JSON.stringify(diff.newValue)) {
+      changedFields.add(diff.field);
+    }
+  });
+
+  const handleScroll = (container: "old" | "new") => {
+    if (isScrollingSynced) return;
+    setIsScrollingSynced(true);
+
+    if (container === "old" && oldContainerRef.current && newContainerRef.current) {
+      newContainerRef.current.scrollTop = oldContainerRef.current.scrollTop;
+    } else if (container === "new" && oldContainerRef.current && newContainerRef.current) {
+      oldContainerRef.current.scrollTop = newContainerRef.current.scrollTop;
+    }
+
+    setTimeout(() => setIsScrollingSynced(false), 50);
+  };
+
+  const sortedVersions = [...item.versions].sort((a, b) => b.version - a.version);
+
+  let oldVersion = null;
+  let newVersion = null;
+  let oldVersionContent = null;
+  let newVersionContent = null;
+
+  if (item.isUpdated) {
+    if (item.isRollback) {
+      [oldVersion, newVersion] = sortedVersions;
+    } else {
+      [newVersion, oldVersion] = sortedVersions;
+    }
+    oldVersionContent = highlightChangedFields(oldVersion, changedFields, true);
+    newVersionContent = highlightChangedFields(newVersion, changedFields, false);
+  } else if (item.isAdded) {
+    [newVersion] = sortedVersions;
+    oldVersionContent = <div className="italic text-gray-400" />;
+    newVersionContent = formatAddedJson(newVersion);
+  } else if (item.isDeleted) {
+    [oldVersion] = sortedVersions;
+    oldVersionContent = formatDeletedJson(oldVersion);
+    newVersionContent = <div className="italic text-gray-400" />;
+  }
+
+  const renderHeader = () => {
+    if (customHeader) {
+      return customHeader;
+    }
+
+    const isSecret = item.type === "secret";
+    const key = isSecret ? item.secretKey || "" : item.folderName || "";
+    let textStyle = "text-white";
+    let changeBadge = null;
+
+    if (item.isDeleted) {
+      textStyle = "line-through text-red-300";
+      changeBadge = (
+        <span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
+          {isSecret ? "Secret" : "Folder"} Deleted
+        </span>
+      );
+    } else if (item.isAdded) {
+      changeBadge = (
+        <span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
+          {isSecret ? "Secret" : "Folder"} Added
+        </span>
+      );
+    } else if (item.isUpdated) {
+      changeBadge = (
+        <span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
+          {isSecret ? "Secret" : "Folder"} Updated
+        </span>
+      );
+    }
+
+    return (
+      <div
+        className="flex cursor-pointer items-center justify-between p-4 hover:bg-mineshaft-700"
+        onClick={handleToggle}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            handleToggle();
+            e.preventDefault();
+          }
+        }}
+        role="button"
+        tabIndex={0}
+        aria-expanded={!collapsed}
+      >
+        <div className="flex items-center">
+          <span className={textStyle}>{key}</span>
+          {changeBadge}
+        </div>
+        <FontAwesomeIcon icon={collapsed ? faChevronDown : faChevronUp} className="text-gray-400" />
+      </div>
+    );
+  };
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-mineshaft-600 bg-mineshaft-800">
+      {showHeader && renderHeader()}
+
+      {!collapsed && (
+        <div className="border-t border-mineshaft-700 bg-mineshaft-900 px-6 py-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div
+              ref={oldContainerRef}
+              className="thin-scrollbar max-h-96 overflow-auto whitespace-pre rounded border border-mineshaft-600 bg-mineshaft-900 p-4"
+              onScroll={() => handleScroll("old")}
+            >
+              {oldVersionContent}
+            </div>
+
+            <div
+              ref={newContainerRef}
+              className="thin-scrollbar max-h-96 overflow-auto whitespace-pre rounded border border-mineshaft-600 bg-mineshaft-900 p-4"
+              onScroll={() => handleScroll("new")}
+            >
+              {newVersionContent}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/index.ts

@@ -0,0 +1 @@
+export { SecretVersionDiffView } from "./SecretVersionDiffView";

frontend/src/pages/secret-manager/CommitDetailsPage/index.tsx

@@ -0,0 +1 @@
+export { CommitDetailsPage } from "./CommitDetailsPage";

frontend/src/pages/secret-manager/CommitDetailsPage/route.tsx

@@ -0,0 +1,76 @@
+import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
+import { zodValidator } from "@tanstack/zod-adapter";
+import { z } from "zod";
+
+import { SecretDashboardPathBreadcrumb } from "@app/components/navigation/SecretDashboardPathBreadcrumb";
+import { BreadcrumbTypes } from "@app/components/v2";
+
+import { CommitDetailsPage } from "./CommitDetailsPage";
+
+const CommitDetailsPageQueryParamsSchema = z.object({
+  secretPath: z.string().catch("/")
+});
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/"
+)({
+  component: CommitDetailsPage,
+  validateSearch: zodValidator(CommitDetailsPageQueryParamsSchema),
+  search: {
+    middlewares: [stripSearchParams({ secretPath: "/" })]
+  },
+  beforeLoad: ({ context, params, search }) => {
+    const secretPathSegments = search.secretPath.split("/").filter(Boolean);
+
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          type: BreadcrumbTypes.Dropdown,
+          label:
+            context.project.environments.find((el) => el.slug === params.environment)?.name || "",
+          dropdownTitle: "Environments",
+          links: context.project.environments.map((el) => ({
+            label: el.name,
+            link: linkOptions({
+              to: "/secret-manager/$projectId/secrets/$envSlug",
+              params: {
+                projectId: params.projectId,
+                envSlug: el.slug
+              }
+            })
+          }))
+        },
+        ...secretPathSegments.map((_, index) => ({
+          type: BreadcrumbTypes.Component,
+          component: () => (
+            <SecretDashboardPathBreadcrumb
+              secretPathSegments={secretPathSegments}
+              selectedPathSegmentIndex={index}
+              environmentSlug={params.environment}
+              projectId={params.projectId}
+              disableCopy
+            />
+          )
+        })),
+        {
+          label: "Commits",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/commits/$environment/$folderId",
+            params: {
+              projectId: params.projectId,
+              environment: params.environment,
+              folderId: params.folderId
+            },
+            search: {
+              secretPath: search.secretPath
+            }
+          })
+        },
+        {
+          label: params.commitId
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/secret-manager/CommitsPage/CommitsPage.tsx

@@ -0,0 +1,65 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
+
+import { PageHeader } from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { useWorkspace } from "@app/context";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+
+import { CommitHistoryTab } from "./components/CommitHistoryTab";
+
+export const CommitsPage = () => {
+  const { t } = useTranslation();
+  const envSlug = useParams({
+    from: ROUTE_PATHS.SecretManager.CommitsPage.id,
+    select: (el) => el.environment
+  });
+  const { currentWorkspace } = useWorkspace();
+  const navigate = useNavigate();
+  const folderId = useParams({
+    from: ROUTE_PATHS.SecretManager.CommitsPage.id,
+    select: (el) => el.folderId
+  });
+  const routerQueryParams: { secretPath?: string } = useSearch({
+    from: ROUTE_PATHS.SecretManager.CommitsPage.id
+  });
+
+  const secretPath = routerQueryParams?.secretPath || "/";
+
+  const handleSelectCommit = (commitId: string) => {
+    navigate({
+      to: `/${ProjectType.SecretManager}/$projectId/commits/$environment/$folderId/$commitId` as const,
+      params: {
+        projectId: currentWorkspace.id,
+        folderId,
+        environment: envSlug,
+        commitId
+      },
+      search: (query) => ({
+        ...query,
+        secretPath
+      })
+    });
+  };
+
+  return (
+    <div className="mx-auto flex h-full w-full max-w-7xl justify-center bg-bunker-800 py-4 text-white">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Commit History" })}</title>
+      </Helmet>
+      <div className="w-full max-w-[75vw]">
+        <PageHeader
+          title="Commits"
+          description="Track, inspect, and restore your secrets and folders with confidence. View the complete history of changes made to your environment, examine specific modifications at each commit point, and preview the exact impact before rolling back to previous states."
+        />
+        <CommitHistoryTab
+          onSelectCommit={handleSelectCommit}
+          projectId={currentWorkspace.id}
+          environment={envSlug}
+          secretPath={secretPath}
+        />
+      </div>
+    </div>
+  );
+};

frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx

@@ -0,0 +1,281 @@
+import { useCallback, useMemo, useState } from "react";
+import {
+  faArrowDownWideShort,
+  faArrowUpWideShort,
+  faCopy,
+  faSearch
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format, formatDistanceToNow } from "date-fns";
+
+import { Button, Input, Spinner } from "@app/components/v2";
+import { CopyButton } from "@app/components/v2/CopyButton";
+import { useGetFolderCommitHistory } from "@app/hooks/api/folderCommits";
+
+interface CommitActorMetadata {
+  email?: string;
+  name?: string;
+}
+
+interface Commit {
+  id: string;
+  message: string;
+  createdAt: string;
+  actorType: string;
+  actorMetadata?: CommitActorMetadata;
+}
+
+const formatTimeAgo = (timestamp: string): string => {
+  return formatDistanceToNow(new Date(timestamp), { addSuffix: true });
+};
+
+/**
+ * Commit Item component for displaying a single commit
+ */
+const CommitItem = ({
+  commit,
+  onSelectCommit
+}: {
+  commit: Commit;
+  onSelectCommit: (commitId: string, tab: string) => void;
+}) => {
+  return (
+    <div className="border-b border-zinc-800 last:border-b-0">
+      <div className="px-4 py-4 transition-colors duration-200 hover:bg-zinc-800">
+        <div className="flex flex-col sm:flex-row sm:justify-between">
+          <div className="flex-1">
+            <div className="flex items-center">
+              <Button
+                variant="link"
+                className="text-white hover:underline"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onSelectCommit(commit.id, "tab-commit-details");
+                }}
+              >
+                {commit.message}
+              </Button>
+            </div>
+            <p className="text-white-400 mt-2 flex flex-wrap items-center gap-4 text-sm">
+              <span className="flex items-center">
+                {commit.actorMetadata?.email || commit.actorMetadata?.name || commit.actorType}
+                <p className="ml-1 mr-1">committed</p>
+                <time dateTime={commit.createdAt}>{formatTimeAgo(commit.createdAt)}</time>
+              </span>
+            </p>
+          </div>
+          <div className="mt-2 flex items-center sm:mt-0">
+            <div className="flex items-center space-x-1">
+              <Button
+                variant="link"
+                className="text-white hover:underline"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onSelectCommit(commit.id, "tab-commit-details");
+                }}
+              >
+                <code className="text-white-400 px-3 py-1 font-mono text-sm">
+                  {commit.id?.substring(0, 11)}
+                </code>
+              </Button>
+              <CopyButton
+                value={commit.id}
+                name={commit.id}
+                size="sm"
+                variant="plain"
+                color="text-mineshaft-400"
+                icon={faCopy}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Date Group component for displaying commits grouped by date
+ */
+const DateGroup = ({
+  date,
+  commits,
+  onSelectCommit
+}: {
+  date: string;
+  commits: Commit[];
+  onSelectCommit: (commitId: string, tab: string) => void;
+}) => {
+  return (
+    <div className="mb-8 last:mb-0 last:pb-2">
+      <div className="mb-4 flex items-center">
+        <div className="relative mr-3 flex h-6 w-6 items-center justify-center">
+          <div className="z-10 h-3 w-3 rounded-full border-2 border-mineshaft-600 bg-bunker-800" />
+          <div className="absolute left-0 right-0 top-1/2 h-0.5 -translate-y-1/2 bg-mineshaft-600" />
+        </div>
+        <h2 className="text-sm text-white">Commits on {date}</h2>
+      </div>
+
+      <div className="relative">
+        <div className="absolute bottom-0 left-3 top-0 w-0.5 bg-mineshaft-600" />
+        <div className="ml-10">
+          {commits.map((commit) => (
+            <div key={commit.id} className="relative mb-3 pb-1">
+              <div className="overflow-hidden rounded-md border border-solid border-mineshaft-600">
+                <CommitItem commit={commit} onSelectCommit={onSelectCommit} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const CommitHistoryTab = ({
+  onSelectCommit,
+  projectId,
+  environment,
+  secretPath
+}: {
+  onSelectCommit: (commitId: string, tab: string) => void;
+  projectId: string;
+  environment: string;
+  secretPath: string;
+}) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
+  const [visibleCommits, setVisibleCommits] = useState(10);
+
+  const { data: commits, isLoading } = useGetFolderCommitHistory({
+    workspaceId: projectId,
+    environment,
+    directory: secretPath
+  });
+
+  const filteredCommits = useMemo(() => {
+    if (!commits?.length) return [];
+
+    return commits.filter(
+      (commit) =>
+        commit.id?.includes(searchTerm) ||
+        commit.message?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        commit.actorMetadata?.name?.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [commits, searchTerm]);
+
+  const sortedCommits = useMemo(() => {
+    if (!filteredCommits?.length) return [];
+
+    return [...filteredCommits].sort((a, b) => {
+      const dateA = new Date(a.createdAt).getTime();
+      const dateB = new Date(b.createdAt).getTime();
+      return sortDirection === "desc" ? dateB - dateA : dateA - dateB;
+    });
+  }, [filteredCommits, sortDirection]);
+
+  const displayedCommits = useMemo(() => {
+    return sortedCommits.slice(0, visibleCommits);
+  }, [sortedCommits, visibleCommits]);
+  const groupedCommits = useMemo(() => {
+    return displayedCommits.reduce(
+      (acc, commit) => {
+        const date = format(new Date(commit.createdAt), "MMM d, yyyy");
+        if (!acc[date]) {
+          acc[date] = [];
+        }
+        acc[date].push(commit);
+        return acc;
+      },
+      {} as Record<string, Commit[]>
+    );
+  }, [displayedCommits]);
+
+  const handleSort = useCallback(() => {
+    setSortDirection((prev) => (prev === "desc" ? "asc" : "desc"));
+  }, []);
+
+  const loadMoreCommits = useCallback(() => {
+    setVisibleCommits((prev) => prev + 10);
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Spinner size="lg" aria-label="Loading commits" />
+      </div>
+    );
+  }
+
+  const hasMoreCommits = sortedCommits.length > visibleCommits;
+
+  return (
+    <div className="w-full">
+      <div className="mb-4 flex flex-col sm:flex-row sm:justify-end">
+        <div className="flex w-full flex-wrap items-center gap-2">
+          <div className="relative flex-grow">
+            <Input
+              placeholder="Search commits..."
+              className="h-10 w-full rounded-md border-transparent bg-zinc-800 pl-9 pr-3 text-sm text-white placeholder-gray-400 focus:border-gray-600 focus:ring-primary-500/20"
+              onChange={(e) => setSearchTerm(e.target.value)}
+              aria-label="Search commits"
+            />
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 transform text-gray-400">
+              <FontAwesomeIcon icon={faSearch} aria-hidden="true" />
+            </div>
+          </div>
+          <Button
+            variant="outline_bg"
+            size="md"
+            className="flex h-10 items-center justify-center gap-2 rounded-md bg-zinc-800 px-4 py-2 text-sm text-white transition-colors duration-200 hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-primary-500"
+            onClick={handleSort}
+            aria-label={`Sort by date ${sortDirection === "desc" ? "ascending" : "descending"}`}
+          >
+            <FontAwesomeIcon
+              icon={sortDirection === "desc" ? faArrowDownWideShort : faArrowUpWideShort}
+              aria-hidden="true"
+            />
+          </Button>
+        </div>
+      </div>
+
+      <div className="space-y-8">
+        {Object.keys(groupedCommits).length > 0 ? (
+          <>
+            {Object.entries(groupedCommits).map(([date, dateCommits]) => (
+              <DateGroup
+                key={date}
+                date={date}
+                commits={dateCommits}
+                onSelectCommit={onSelectCommit}
+              />
+            ))}
+          </>
+        ) : (
+          <div className="text-white-400 flex min-h-40 flex-col items-center justify-center rounded-lg bg-zinc-900 py-8 text-center">
+            <FontAwesomeIcon
+              icon={faSearch}
+              className="text-white-500 mb-3 text-3xl"
+              aria-hidden="true"
+            />
+            <p>No matching commits found. Try a different search term.</p>
+          </div>
+        )}
+
+        {hasMoreCommits && (
+          <div className="flex justify-center pb-2">
+            <Button
+              variant="outline_bg"
+              size="md"
+              className="rounded-md bg-zinc-900 px-6 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-primary-500"
+              onClick={loadMoreCommits}
+              aria-label="Load more commits"
+            >
+              Load more commits
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/index.tsx

@@ -0,0 +1 @@
+export { CommitHistoryTab } from "./CommitHistoryTab";

frontend/src/pages/secret-manager/CommitsPage/index.tsx

@@ -0,0 +1 @@
+export { CommitsPage } from "./CommitsPage";

frontend/src/pages/secret-manager/CommitsPage/route.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
+import { zodValidator } from "@tanstack/zod-adapter";
+import { z } from "zod";
+
+import { SecretDashboardPathBreadcrumb } from "@app/components/navigation/SecretDashboardPathBreadcrumb";
+import { BreadcrumbTypes } from "@app/components/v2";
+
+import { CommitsPage } from "./CommitsPage";
+
+const CommitsPageQueryParamsSchema = z.object({
+  secretPath: z.string().catch("/")
+});
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/"
+)({
+  component: CommitsPage,
+  validateSearch: zodValidator(CommitsPageQueryParamsSchema),
+  search: {
+    middlewares: [stripSearchParams({ secretPath: "/" })]
+  },
+  beforeLoad: ({ context, params, search }) => {
+    const secretPathSegments = search.secretPath.split("/").filter(Boolean);
+
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          type: BreadcrumbTypes.Dropdown,
+          label:
+            context.project.environments.find((el) => el.slug === params.environment)?.name || "",
+          dropdownTitle: "Environments",
+          links: context.project.environments.map((el) => ({
+            label: el.name,
+            link: linkOptions({
+              to: "/secret-manager/$projectId/secrets/$envSlug",
+              params: {
+                projectId: params.projectId,
+                envSlug: el.slug
+              }
+            })
+          }))
+        },
+        ...secretPathSegments.map((_, index) => ({
+          type: BreadcrumbTypes.Component,
+          component: () => (
+            <SecretDashboardPathBreadcrumb
+              secretPathSegments={secretPathSegments}
+              selectedPathSegmentIndex={index}
+              environmentSlug={params.environment}
+              projectId={params.projectId}
+              disableCopy
+            />
+          )
+        })),
+        {
+          label: "Commits",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/commits/$environment/$folderId",
+            params: {
+              projectId: params.projectId,
+              environment: params.environment,
+              folderId: params.folderId
+            }
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx

@@ -39,6 +39,7 @@ import {
 } from "@app/hooks/api";
 import { useGetProjectSecretsDetails } from "@app/hooks/api/dashboard";
 import { DashboardSecretsOrderBy } from "@app/hooks/api/dashboard/types";
+import { useGetFolderCommitsCount } from "@app/hooks/api/folderCommits";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
@@ -265,6 +266,17 @@ const Page = () => {
     limit: 10
   });
 
+  const {
+    data: { count: folderCommitsCount, folderId } = { count: 0, folderId: "" },
+    isPending: isFolderCommitsCountLoading,
+    isFetching: isFolderCommitsCountFetching
+  } = useGetFolderCommitsCount({
+    directory: secretPath,
+    workspaceId,
+    environment,
+    isPaused: !canDoReadRollback
+  });
+
   const {
     data: snapshotCount,
     isPending: isSnapshotCountLoading,
@@ -276,6 +288,39 @@ const Page = () => {
     isPaused: !canDoReadRollback
   });
 
+  const isPITEnabled = true;
+
+  const changesCount = useMemo(() => {
+    return isPITEnabled ? folderCommitsCount : snapshotCount;
+  }, [folderCommitsCount, snapshotCount]);
+
+  const isChangesCountPending = useMemo(() => {
+    return isPITEnabled ? isFolderCommitsCountLoading || isSnapshotCountLoading : false;
+  }, [isFolderCommitsCountLoading, isSnapshotCountLoading]);
+
+  const isChangesCountFetching = useMemo(() => {
+    return isPITEnabled ? isFolderCommitsCountFetching || isSnapshotCountFetching : false;
+  }, [isFolderCommitsCountFetching, isSnapshotCountFetching]);
+
+  const handleOnClickRollbackMode = () => {
+    if (isPITEnabled) {
+      navigate({
+        to: `/${ProjectType.SecretManager}/$projectId/commits/$environment/$folderId` as const,
+        params: {
+          projectId: workspaceId,
+          folderId,
+          environment
+        },
+        search: (query) => ({
+          ...query,
+          secretPath
+        })
+      });
+    } else {
+      handlePopUpToggle("snapshots", true);
+    }
+  };
+
   const noAccessSecretCount = Math.max(
     (page * perPage > totalCount ? totalCount % perPage : perPage) -
       (imports?.length || 0) -
@@ -436,13 +481,14 @@ const Page = () => {
             onVisibilityToggle={handleToggleVisibility}
             onSearchChange={handleSearchChange}
             onToggleTagFilter={handleTagToggle}
-            snapshotCount={snapshotCount || 0}
-            isSnapshotCountLoading={isSnapshotCountLoading && isSnapshotCountFetching}
+            snapshotCount={changesCount || 0}
+            isSnapshotCountLoading={isChangesCountPending && isChangesCountFetching}
             onToggleRowType={handleToggleRowType}
-            onClickRollbackMode={() => handlePopUpToggle("snapshots", true)}
+            onClickRollbackMode={handleOnClickRollbackMode}
             protectedBranchPolicyName={boardPolicy?.name}
             importedBy={importedBy}
             usedBySecretSyncs={usedBySecretSyncs}
+            isPITEnabled={isPITEnabled}
           />
           <div className="thin-scrollbar mt-3 overflow-y-auto overflow-x-hidden rounded-md rounded-b-none bg-mineshaft-800 text-left text-sm text-bunker-300">
             <div className="flex flex-col" id="dashboard">
@@ -606,7 +652,7 @@ const Page = () => {
           secretPath={secretPath}
           secrets={secrets}
           folders={folders}
-          snapshotCount={snapshotCount}
+          snapshotCount={changesCount}
           onGoBack={handleResetSnapshot}
           onClickListSnapshot={() => handlePopUpToggle("snapshots", true)}
         />

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx

@@ -123,6 +123,7 @@ type Props = {
       isImported: boolean;
     }[];
   }[];
+  isPITEnabled: boolean;
 };
 
 export const ActionBar = ({
@@ -142,6 +143,7 @@ export const ActionBar = ({
   onToggleRowType,
   protectedBranchPolicyName,
   importedBy,
+  isPITEnabled = false,
   usedBySecretSyncs
 }: Props) => {
   const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
@@ -796,7 +798,7 @@ export const ActionBar = ({
                 className="h-10"
                 isDisabled={!isAllowed}
               >
-                {`${snapshotCount} ${snapshotCount === 1 ? "Snapshot" : "Snapshots"}`}
+                {`${snapshotCount} ${isPITEnabled ? "Commit" : "Snapshot"}${snapshotCount === 1 ? "" : "s"}`}
               </Button>
             )}
           </ProjectPermissionCan>

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretListView.tsx

@@ -9,6 +9,7 @@ import { usePopUp } from "@app/hooks";
 import { useCreateSecretV3, useDeleteSecretV3, useUpdateSecretV3 } from "@app/hooks/api";
 import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
 import { UsedBySecretSyncs } from "@app/hooks/api/dashboard/types";
+import { commitKeys } from "@app/hooks/api/folderCommits/queries";
 import { secretApprovalRequestKeys } from "@app/hooks/api/secretApprovalRequest/queries";
 import { secretKeys } from "@app/hooks/api/secrets/queries";
 import { SecretType, SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
@@ -264,6 +265,12 @@ export const SecretListView = ({
         queryClient.invalidateQueries({
           queryKey: secretSnapshotKeys.count({ workspaceId, environment, directory: secretPath })
         });
+        queryClient.invalidateQueries({
+          queryKey: commitKeys.count({ workspaceId, environment, directory: secretPath })
+        });
+        queryClient.invalidateQueries({
+          queryKey: commitKeys.history({ workspaceId, environment, directory: secretPath })
+        });
         queryClient.invalidateQueries({
           queryKey: secretApprovalRequestKeys.count({ workspaceId })
         });
@@ -315,6 +322,12 @@ export const SecretListView = ({
       queryClient.invalidateQueries({
         queryKey: secretSnapshotKeys.count({ workspaceId, environment, directory: secretPath })
       });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.count({ workspaceId, environment, directory: secretPath })
+      });
+      queryClient.invalidateQueries({
+        queryKey: commitKeys.history({ workspaceId, environment, directory: secretPath })
+      });
       queryClient.invalidateQueries({
         queryKey: secretApprovalRequestKeys.count({ workspaceId })
       });

frontend/src/routeTree.gen.ts

@@ -191,6 +191,9 @@ import { Route as secretManagerIntegrationsGcpSecretManagerOauthCallbackPageRout
 import { Route as secretManagerIntegrationsBitbucketOauthCallbackPageRouteImport } from './pages/secret-manager/integrations/BitbucketOauthCallbackPage/route'
 import { Route as secretManagerIntegrationsAzureKeyVaultOauthCallbackPageRouteImport } from './pages/secret-manager/integrations/AzureKeyVaultOauthCallbackPage/route'
 import { Route as secretManagerIntegrationsAzureAppConfigurationOauthCallbackPageRouteImport } from './pages/secret-manager/integrations/AzureAppConfigurationOauthCallbackPage/route'
+import { Route as secretManagerCommitsPageRouteImport } from './pages/secret-manager/CommitsPage/route'
+import { Route as secretManagerCommitDetailsPageComponentsRollbackPreviewTabRouteImport } from './pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/route'
+import { Route as secretManagerCommitDetailsPageRouteImport } from './pages/secret-manager/CommitDetailsPage/route'
 
 // Create Virtual Routes
 
@@ -246,6 +249,14 @@ const AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLa
   createFileRoute(
     '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations',
   )()
+const AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdImport =
+  createFileRoute(
+    '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId',
+  )()
+const AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdImport =
+  createFileRoute(
+    '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId',
+  )()
 
 // Create/Update Routes
 
@@ -1082,6 +1093,15 @@ const secretManagerIntegrationsListPageRouteRoute =
       AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutIntegrationsRoute,
   } as any)
 
+const AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRoute =
+  AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdImport.update(
+    {
+      id: '/commits/$environment/$folderId',
+      path: '/commits/$environment/$folderId',
+      getParentRoute: () => secretManagerLayoutRoute,
+    } as any,
+  )
+
 const secretManagerIntegrationsWindmillConfigurePageRouteRoute =
   secretManagerIntegrationsWindmillConfigurePageRouteImport.update({
     id: '/windmill/create',
@@ -1608,6 +1628,16 @@ const secretManagerIntegrationsAwsParameterStoreAuthorizePageRouteRoute =
       AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutIntegrationsRoute,
   } as any)
 
+const AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRoute =
+  AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdImport.update(
+    {
+      id: '/$commitId',
+      path: '/$commitId',
+      getParentRoute: () =>
+        AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRoute,
+    } as any,
+  )
+
 const secretManagerIntegrationsVercelOauthCallbackPageRouteRoute =
   secretManagerIntegrationsVercelOauthCallbackPageRouteImport.update({
     id: '/vercel/oauth2/callback',
@@ -1690,6 +1720,30 @@ const secretManagerIntegrationsAzureAppConfigurationOauthCallbackPageRouteRoute
     } as any,
   )
 
+const secretManagerCommitsPageRouteRoute =
+  secretManagerCommitsPageRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () =>
+      AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRoute,
+  } as any)
+
+const secretManagerCommitDetailsPageComponentsRollbackPreviewTabRouteRoute =
+  secretManagerCommitDetailsPageComponentsRollbackPreviewTabRouteImport.update({
+    id: '/restore',
+    path: '/restore',
+    getParentRoute: () =>
+      AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRoute,
+  } as any)
+
+const secretManagerCommitDetailsPageRouteRoute =
+  secretManagerCommitDetailsPageRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () =>
+      AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRoute,
+  } as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -2975,6 +3029,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof secretManagerIntegrationsWindmillConfigurePageRouteImport
       parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutIntegrationsImport
     }
+    '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId': {
+      id: '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId'
+      path: '/commits/$environment/$folderId'
+      fullPath: '/secret-manager/$projectId/commits/$environment/$folderId'
+      preLoaderRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdImport
+      parentRoute: typeof secretManagerLayoutImport
+    }
+    '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/': {
+      id: '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/'
+      path: '/'
+      fullPath: '/secret-manager/$projectId/commits/$environment/$folderId/'
+      preLoaderRoute: typeof secretManagerCommitsPageRouteImport
+      parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdImport
+    }
     '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/oauth2/callback': {
       id: '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/oauth2/callback'
       path: '/azure-app-configuration/oauth2/callback'
@@ -3045,6 +3113,27 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof secretManagerIntegrationsVercelOauthCallbackPageRouteImport
       parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutIntegrationsImport
     }
+    '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId': {
+      id: '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId'
+      path: '/$commitId'
+      fullPath: '/secret-manager/$projectId/commits/$environment/$folderId/$commitId'
+      preLoaderRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdImport
+      parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdImport
+    }
+    '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/': {
+      id: '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/'
+      path: '/'
+      fullPath: '/secret-manager/$projectId/commits/$environment/$folderId/$commitId/'
+      preLoaderRoute: typeof secretManagerCommitDetailsPageRouteImport
+      parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdImport
+    }
+    '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/restore': {
+      id: '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/restore'
+      path: '/restore'
+      fullPath: '/secret-manager/$projectId/commits/$environment/$folderId/$commitId/restore'
+      preLoaderRoute: typeof secretManagerCommitDetailsPageComponentsRollbackPreviewTabRouteImport
+      parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdImport
+    }
   }
 }
 
@@ -3553,6 +3642,41 @@ const AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLa
     AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutIntegrationsRouteChildren,
   )
 
+interface AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRouteChildren {
+  secretManagerCommitDetailsPageRouteRoute: typeof secretManagerCommitDetailsPageRouteRoute
+  secretManagerCommitDetailsPageComponentsRollbackPreviewTabRouteRoute: typeof secretManagerCommitDetailsPageComponentsRollbackPreviewTabRouteRoute
+}
+
+const AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRouteChildren: AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRouteChildren =
+  {
+    secretManagerCommitDetailsPageRouteRoute:
+      secretManagerCommitDetailsPageRouteRoute,
+    secretManagerCommitDetailsPageComponentsRollbackPreviewTabRouteRoute:
+      secretManagerCommitDetailsPageComponentsRollbackPreviewTabRouteRoute,
+  }
+
+const AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRouteWithChildren =
+  AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRoute._addFileChildren(
+    AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRouteChildren,
+  )
+
+interface AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRouteChildren {
+  secretManagerCommitsPageRouteRoute: typeof secretManagerCommitsPageRouteRoute
+  AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRouteWithChildren
+}
+
+const AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRouteChildren: AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRouteChildren =
+  {
+    secretManagerCommitsPageRouteRoute: secretManagerCommitsPageRouteRoute,
+    AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRoute:
+      AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRouteWithChildren,
+  }
+
+const AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRouteWithChildren =
+  AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRoute._addFileChildren(
+    AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRouteChildren,
+  )
+
 interface secretManagerLayoutRouteChildren {
   secretManagerIPAllowlistPageRouteRoute: typeof secretManagerIPAllowlistPageRouteRoute
   secretManagerSecretApprovalsPageRouteRoute: typeof secretManagerSecretApprovalsPageRouteRoute
@@ -3565,6 +3689,7 @@ interface secretManagerLayoutRouteChildren {
   projectIdentityDetailsByIDPageRouteSecretManagerRoute: typeof projectIdentityDetailsByIDPageRouteSecretManagerRoute
   projectMemberDetailsByIDPageRouteSecretManagerRoute: typeof projectMemberDetailsByIDPageRouteSecretManagerRoute
   projectRoleDetailsBySlugPageRouteSecretManagerRoute: typeof projectRoleDetailsBySlugPageRouteSecretManagerRoute
+  AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRouteWithChildren
 }
 
 const secretManagerLayoutRouteChildren: secretManagerLayoutRouteChildren = {
@@ -3588,6 +3713,8 @@ const secretManagerLayoutRouteChildren: secretManagerLayoutRouteChildren = {
     projectMemberDetailsByIDPageRouteSecretManagerRoute,
   projectRoleDetailsBySlugPageRouteSecretManagerRoute:
     projectRoleDetailsBySlugPageRouteSecretManagerRoute,
+  AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRoute:
+    AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRouteWithChildren,
 }
 
 const secretManagerLayoutRouteWithChildren =
@@ -4018,6 +4145,8 @@ export interface FileRoutesByFullPath {
   '/secret-manager/$projectId/integrations/vercel/create': typeof secretManagerIntegrationsVercelConfigurePageRouteRoute
   '/secret-manager/$projectId/integrations/windmill/authorize': typeof secretManagerIntegrationsWindmillAuthorizePageRouteRoute
   '/secret-manager/$projectId/integrations/windmill/create': typeof secretManagerIntegrationsWindmillConfigurePageRouteRoute
+  '/secret-manager/$projectId/commits/$environment/$folderId': typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRouteWithChildren
+  '/secret-manager/$projectId/commits/$environment/$folderId/': typeof secretManagerCommitsPageRouteRoute
   '/secret-manager/$projectId/integrations/azure-app-configuration/oauth2/callback': typeof secretManagerIntegrationsAzureAppConfigurationOauthCallbackPageRouteRoute
   '/secret-manager/$projectId/integrations/azure-key-vault/oauth2/callback': typeof secretManagerIntegrationsAzureKeyVaultOauthCallbackPageRouteRoute
   '/secret-manager/$projectId/integrations/bitbucket/oauth2/callback': typeof secretManagerIntegrationsBitbucketOauthCallbackPageRouteRoute
@@ -4028,6 +4157,9 @@ export interface FileRoutesByFullPath {
   '/secret-manager/$projectId/integrations/netlify/oauth2/callback': typeof secretManagerIntegrationsNetlifyOauthCallbackPageRouteRoute
   '/secret-manager/$projectId/integrations/secret-syncs/$destination/$syncId': typeof secretManagerSecretSyncDetailsByIDPageRouteRoute
   '/secret-manager/$projectId/integrations/vercel/oauth2/callback': typeof secretManagerIntegrationsVercelOauthCallbackPageRouteRoute
+  '/secret-manager/$projectId/commits/$environment/$folderId/$commitId': typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRouteWithChildren
+  '/secret-manager/$projectId/commits/$environment/$folderId/$commitId/': typeof secretManagerCommitDetailsPageRouteRoute
+  '/secret-manager/$projectId/commits/$environment/$folderId/$commitId/restore': typeof secretManagerCommitDetailsPageComponentsRollbackPreviewTabRouteRoute
 }
 
 export interface FileRoutesByTo {
@@ -4196,6 +4328,7 @@ export interface FileRoutesByTo {
   '/secret-manager/$projectId/integrations/vercel/create': typeof secretManagerIntegrationsVercelConfigurePageRouteRoute
   '/secret-manager/$projectId/integrations/windmill/authorize': typeof secretManagerIntegrationsWindmillAuthorizePageRouteRoute
   '/secret-manager/$projectId/integrations/windmill/create': typeof secretManagerIntegrationsWindmillConfigurePageRouteRoute
+  '/secret-manager/$projectId/commits/$environment/$folderId': typeof secretManagerCommitsPageRouteRoute
   '/secret-manager/$projectId/integrations/azure-app-configuration/oauth2/callback': typeof secretManagerIntegrationsAzureAppConfigurationOauthCallbackPageRouteRoute
   '/secret-manager/$projectId/integrations/azure-key-vault/oauth2/callback': typeof secretManagerIntegrationsAzureKeyVaultOauthCallbackPageRouteRoute
   '/secret-manager/$projectId/integrations/bitbucket/oauth2/callback': typeof secretManagerIntegrationsBitbucketOauthCallbackPageRouteRoute
@@ -4206,6 +4339,8 @@ export interface FileRoutesByTo {
   '/secret-manager/$projectId/integrations/netlify/oauth2/callback': typeof secretManagerIntegrationsNetlifyOauthCallbackPageRouteRoute
   '/secret-manager/$projectId/integrations/secret-syncs/$destination/$syncId': typeof secretManagerSecretSyncDetailsByIDPageRouteRoute
   '/secret-manager/$projectId/integrations/vercel/oauth2/callback': typeof secretManagerIntegrationsVercelOauthCallbackPageRouteRoute
+  '/secret-manager/$projectId/commits/$environment/$folderId/$commitId': typeof secretManagerCommitDetailsPageRouteRoute
+  '/secret-manager/$projectId/commits/$environment/$folderId/$commitId/restore': typeof secretManagerCommitDetailsPageComponentsRollbackPreviewTabRouteRoute
 }
 
 export interface FileRoutesById {
@@ -4393,6 +4528,8 @@ export interface FileRoutesById {
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/vercel/create': typeof secretManagerIntegrationsVercelConfigurePageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/windmill/authorize': typeof secretManagerIntegrationsWindmillAuthorizePageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/windmill/create': typeof secretManagerIntegrationsWindmillConfigurePageRouteRoute
+  '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId': typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdRouteWithChildren
+  '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/': typeof secretManagerCommitsPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/oauth2/callback': typeof secretManagerIntegrationsAzureAppConfigurationOauthCallbackPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-key-vault/oauth2/callback': typeof secretManagerIntegrationsAzureKeyVaultOauthCallbackPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/bitbucket/oauth2/callback': typeof secretManagerIntegrationsBitbucketOauthCallbackPageRouteRoute
@@ -4403,6 +4540,9 @@ export interface FileRoutesById {
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/netlify/oauth2/callback': typeof secretManagerIntegrationsNetlifyOauthCallbackPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/secret-syncs/$destination/$syncId': typeof secretManagerSecretSyncDetailsByIDPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/vercel/oauth2/callback': typeof secretManagerIntegrationsVercelOauthCallbackPageRouteRoute
+  '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId': typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdSecretManagerLayoutCommitsEnvironmentFolderIdCommitIdRouteWithChildren
+  '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/': typeof secretManagerCommitDetailsPageRouteRoute
+  '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/restore': typeof secretManagerCommitDetailsPageComponentsRollbackPreviewTabRouteRoute
 }
 
 export interface FileRouteTypes {
@@ -4582,6 +4722,8 @@ export interface FileRouteTypes {
     | '/secret-manager/$projectId/integrations/vercel/create'
     | '/secret-manager/$projectId/integrations/windmill/authorize'
     | '/secret-manager/$projectId/integrations/windmill/create'
+    | '/secret-manager/$projectId/commits/$environment/$folderId'
+    | '/secret-manager/$projectId/commits/$environment/$folderId/'
     | '/secret-manager/$projectId/integrations/azure-app-configuration/oauth2/callback'
     | '/secret-manager/$projectId/integrations/azure-key-vault/oauth2/callback'
     | '/secret-manager/$projectId/integrations/bitbucket/oauth2/callback'
@@ -4592,6 +4734,9 @@ export interface FileRouteTypes {
     | '/secret-manager/$projectId/integrations/netlify/oauth2/callback'
     | '/secret-manager/$projectId/integrations/secret-syncs/$destination/$syncId'
     | '/secret-manager/$projectId/integrations/vercel/oauth2/callback'
+    | '/secret-manager/$projectId/commits/$environment/$folderId/$commitId'
+    | '/secret-manager/$projectId/commits/$environment/$folderId/$commitId/'
+    | '/secret-manager/$projectId/commits/$environment/$folderId/$commitId/restore'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -4759,6 +4904,7 @@ export interface FileRouteTypes {
     | '/secret-manager/$projectId/integrations/vercel/create'
     | '/secret-manager/$projectId/integrations/windmill/authorize'
     | '/secret-manager/$projectId/integrations/windmill/create'
+    | '/secret-manager/$projectId/commits/$environment/$folderId'
     | '/secret-manager/$projectId/integrations/azure-app-configuration/oauth2/callback'
     | '/secret-manager/$projectId/integrations/azure-key-vault/oauth2/callback'
     | '/secret-manager/$projectId/integrations/bitbucket/oauth2/callback'
@@ -4769,6 +4915,8 @@ export interface FileRouteTypes {
     | '/secret-manager/$projectId/integrations/netlify/oauth2/callback'
     | '/secret-manager/$projectId/integrations/secret-syncs/$destination/$syncId'
     | '/secret-manager/$projectId/integrations/vercel/oauth2/callback'
+    | '/secret-manager/$projectId/commits/$environment/$folderId/$commitId'
+    | '/secret-manager/$projectId/commits/$environment/$folderId/$commitId/restore'
   id:
     | '__root__'
     | '/'
@@ -4954,6 +5102,8 @@ export interface FileRouteTypes {
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/vercel/create'
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/windmill/authorize'
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/windmill/create'
+    | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId'
+    | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/'
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/oauth2/callback'
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-key-vault/oauth2/callback'
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/bitbucket/oauth2/callback'
@@ -4964,6 +5114,9 @@ export interface FileRouteTypes {
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/netlify/oauth2/callback'
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/secret-syncs/$destination/$syncId'
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/vercel/oauth2/callback'
+    | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId'
+    | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/'
+    | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/restore'
   fileRoutesById: FileRoutesById
 }
 
@@ -5403,7 +5556,8 @@ export const routeTree = rootRoute
         "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/secrets/$envSlug",
         "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/identities/$identityId",
         "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/members/$membershipId",
-        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/roles/$roleSlug"
+        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/roles/$roleSlug",
+        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId"
       ]
     },
     "/_authenticate/_inject-org-details/_org-layout/ssh/$projectId/_ssh-layout": {
@@ -5970,6 +6124,18 @@ export const routeTree = rootRoute
       "filePath": "secret-manager/integrations/WindmillConfigurePage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations"
     },
+    "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId": {
+      "filePath": "",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout",
+      "children": [
+        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/",
+        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId"
+      ]
+    },
+    "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/": {
+      "filePath": "secret-manager/CommitsPage/route.tsx",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId"
+    },
     "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/oauth2/callback": {
       "filePath": "secret-manager/integrations/AzureAppConfigurationOauthCallbackPage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations"
@@ -6009,6 +6175,22 @@ export const routeTree = rootRoute
     "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/vercel/oauth2/callback": {
       "filePath": "secret-manager/integrations/VercelOauthCallbackPage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations"
+    },
+    "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId": {
+      "filePath": "",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId",
+      "children": [
+        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/",
+        "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/restore"
+      ]
+    },
+    "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/": {
+      "filePath": "secret-manager/CommitDetailsPage/route.tsx",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId"
+    },
+    "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId/restore": {
+      "filePath": "secret-manager/CommitDetailsPage/components/RollbackPreviewTab/route.tsx",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/commits/$environment/$folderId/$commitId"
     }
   }
 }

frontend/src/routes.ts

@@ -47,6 +47,16 @@ const secretManagerRoutes = route("/secret-manager/$projectId", [
     route("/approval", "secret-manager/SecretApprovalsPage/route.tsx"),
     route("/secret-rotation", "secret-manager/SecretRotationPage/route.tsx"),
     route("/settings", "secret-manager/SettingsPage/route.tsx"),
+    route("/commits/$environment/$folderId", [
+      index("secret-manager/CommitsPage/route.tsx"),
+      route("/$commitId", [
+        index("secret-manager/CommitDetailsPage/route.tsx"),
+        route(
+          "/restore",
+          "secret-manager/CommitDetailsPage/components/RollbackPreviewTab/route.tsx"
+        )
+      ])
+    ]),
     route("/integrations", [
       index("secret-manager/IntegrationsListPage/route.tsx"),
       route("/$integrationId", "secret-manager/IntegrationsDetailsByIDPage/route.tsx"),