Feature: credentials page & vaultwarden compose setup (#3534)

Co-authored-by: Suchintan <suchintan@users.noreply.github.com>

skyvern-frontend/src/router.tsx

@@ -26,6 +26,7 @@ import { WorkflowRunOverview } from "./routes/workflows/workflowRun/WorkflowRunO
 import { WorkflowRunRecording } from "./routes/workflows/workflowRun/WorkflowRunRecording";
 import { WorkflowRunCode } from "@/routes/workflows/workflowRun/WorkflowRunCode";
 import { DebugStoreProvider } from "@/store/DebugStoreContext";
+import { CredentialsPage } from "@/routes/credentials/CredentialsPage.tsx";
 
 const router = createBrowserRouter([
   {
@@ -201,6 +202,16 @@ const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: "credentials",
+        element: <PageLayout />,
+        children: [
+          {
+            index: true,
+            element: <CredentialsPage />,
+          },
+        ],
+      },
     ],
   },
 ]);

skyvern-frontend/src/routes/credentials/CredentialsPage.tsx

@@ -56,6 +56,43 @@ function CredentialsPage() {
       </div>
       <CredentialsList />
       <CredentialsModal />
+
+      {/* Footer note */}
+      <div className="mt-8 border-t border-slate-700 pt-4">
+        <div className="text-sm italic text-slate-400">
+          <strong>Note:</strong> This feature requires a Bitwarden-compatible
+          server ({" "}
+          <a
+            href="https://bitwarden.com/help/self-host-an-organization/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-400 underline hover:text-blue-300"
+          >
+            self-hosted Bitwarden
+          </a>{" "}
+          ) or{" "}
+          <a
+            href="https://github.com/dani-garcia/vaultwarden"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-400 underline hover:text-blue-300"
+          >
+            this community version
+          </a>{" "}
+          or a paid Bitwarden account. Make sure the relevant
+          `SKYVERN_AUTH_BITWARDEN_*` environment variables are configured. See
+          details{" "}
+          <a
+            href="https://docs.skyvern.com/credentials/bitwarden"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-400 underline hover:text-blue-300"
+          >
+            here
+          </a>
+          .
+        </div>
+      </div>
     </div>
   );
 }

skyvern-frontend/src/routes/root/SideNav.tsx

@@ -7,6 +7,7 @@ import {
   GearIcon,
   LightningBoltIcon,
 } from "@radix-ui/react-icons";
+import { KeyIcon } from "@/components/icons/KeyIcon.tsx";
 
 function SideNav() {
   const { collapsed } = useSidebarStore();
@@ -45,6 +46,11 @@ function SideNav() {
             to: "/settings",
             icon: <GearIcon className="size-6" />,
           },
+          {
+            label: "Credentials",
+            to: "/credentials",
+            icon: <KeyIcon className="size-6" />,
+          },
         ]}
       />
     </nav>