Frontend: unified /runs URL (#3912)

skyvern-frontend/src/components/Status404.css

@@ -0,0 +1,63 @@
+@keyframes roll-right-404 {
+  0% {
+    transform: translateX(0rem) translateY(1rem) rotate(-60deg);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(10rem) translateY(1rem) rotate(0deg);
+    opacity: 1;
+  }
+}
+
+.animate-roll-right-404 {
+  animation: roll-right-404 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+}
+
+@keyframes fade-in-404 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.animate-fade-in-404 {
+  animation: fade-in-404 1s ease-out 0.5s forwards;
+  opacity: 0;
+}
+
+.animate-fade-in-slow-404 {
+  animation: fade-in-404 1s ease-out 1.7s forwards;
+  opacity: 0;
+}
+
+@keyframes orbit-404 {
+  0% {
+    transform: rotate(0deg) translateX(6.5rem) rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg) translateX(6.5rem) rotate(-360deg);
+  }
+}
+
+.animate-orbit-404 {
+  animation: orbit-404 8s linear infinite;
+  transform-origin: center;
+}
+
+@keyframes pulse-glow-404 {
+  0%,
+  100% {
+    filter: brightness(1) saturate(1);
+    opacity: 1;
+  }
+  50% {
+    filter: brightness(1.5) saturate(1.3);
+    opacity: 0.8;
+  }
+}
+
+.animate-pulse-glow-404 {
+  animation: pulse-glow-404 2s ease-in-out infinite;
+}

skyvern-frontend/src/components/Status404.tsx

@@ -0,0 +1,26 @@
+import "./Status404.css";
+
+function Status404() {
+  return (
+    <div className="fixed inset-0 z-50 bg-background">
+      <div className="absolute flex h-full w-full items-center justify-center">
+        <div className="animate-roll-right-404 relative flex h-[13rem] w-[13rem] flex-col items-center justify-center rounded-full bg-white/5 text-xl font-bold text-white">
+          <div className="animate-fade-in-404">404</div>
+          <div className="opacity-50">Not Found</div>
+          <div className="animate-orbit-404 absolute h-full w-full">
+            <div className="animate-fade-in-slow-404 relative h-[2rem] w-[2rem] translate-x-[5.5rem] translate-y-[5.5rem] rounded-full bg-white/10" />
+          </div>
+        </div>
+      </div>
+      <div className="absolute flex h-full w-full items-center justify-center">
+        <img
+          src="/404-sad-dragon-md.png"
+          alt="404 Not Found"
+          className="max-h-screen max-w-2xl object-contain"
+        />
+      </div>
+    </div>
+  );
+}
+
+export { Status404 };