feat: improve workflows (#228)

apps/web/app/globals.css

@@ -985,6 +985,47 @@
   border-radius: 8px;
 }
 
+/* Pipeline node rotating border for running tasks */
+@property --border-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes node-border-rotate {
+  to {
+    --border-angle: 360deg;
+  }
+}
+
+.node-border-running {
+  position: relative;
+}
+
+.node-border-running::after {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1.5px;
+  background: conic-gradient(
+    from var(--border-angle),
+    hsl(var(--muted-foreground) / 0.4) 0%,
+    transparent 12%,
+    transparent 38%,
+    hsl(var(--muted-foreground) / 0.4) 50%,
+    transparent 62%,
+    transparent 88%,
+    hsl(var(--muted-foreground) / 0.4) 100%
+  );
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  animation: node-border-rotate 3s linear infinite;
+  pointer-events: none;
+}
+
 .debug {
   border: 1px solid red !important;
 }