feat&fix: implement auto-refresh functionality and disable animation when refresh

monitor/static/no-transition.css

@@ -0,0 +1,59 @@
+/* No transition class to disable animations */
+.no-transition,
+.no-transition * {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -ms-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
+    animation: none !important;
+}
+
+/* Immediate display changes for elements with no-transition */
+.task-type.no-transition.collapsed .tasks-container {
+    display: none;
+    max-height: 0 !important;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+
+.task-type.no-transition:not(.collapsed) .tasks-container {
+    display: block;
+    max-height: none !important;
+    opacity: 1;
+    overflow: visible;
+}
+
+/* Styles for refreshing state */
+.refreshing .tasks-container {
+    pointer-events: none; /* Prevent interactions during refresh */
+}
+
+.refreshing .task-card {
+    opacity: 0.7; /* Dim the cards during refresh */
+}
+
+/* Override progress bar animation during page refresh */
+.no-transition .progress-fill,
+.refreshing .progress-fill {
+    transition: none !important;
+}
+
+/* Error message styling */
+.error-message {
+    text-align: center;
+    padding: 30px;
+    color: #e74c3c;
+    font-size: 1.1em;
+    background: #fef2f2;
+    border-radius: 8px;
+    margin: 20px 0;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+}
+
+.error-message i {
+    font-size: 2em;
+    margin-bottom: 15px;
+}