Add simulators

Author: rmcdaniel

docs/features/heartbeats.md

@@ -24,4 +24,8 @@ class MyActivity extends Activity
 }
 ```
 
+import HeartbeatSimulator from '@site/src/components/HeartbeatSimulator';
+
+<HeartbeatSimulator />
+
 In the above example, even though the activity would normally be terminated after running for 5 seconds, the periodic heartbeat allows it to keep running. If the activity does freeze or crash then the heartbeat will stop and the timeout will be triggered.

src/components/ConcurrencySimulator/index.js

@@ -42,6 +42,7 @@ export default function WorkflowSimulator({
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [isRunning, setIsRunning] = useState(false);
+  const [allCompleted, setAllCompleted] = useState(false);
   const [activityStates, setActivityStates] = useState(
     activities.map(() => ({ status: ActivityStatus.PENDING, progress: 0 }))
   );
@@ -97,6 +98,7 @@ export default function WorkflowSimulator({
         animationRef.current = requestAnimationFrame(animate);
       } else {
         setIsRunning(false);
+        setAllCompleted(true);
       }
     };
 
@@ -110,23 +112,24 @@ export default function WorkflowSimulator({
 
     const animate = (timestamp) => {
       const elapsed = timestamp - startTimeRef.current;
-      let allCompleted = true;
+      let allDone = true;
 
       setActivityStates(prev => {
         return activities.map((activity, index) => {
           const progress = Math.min((elapsed / activity.duration) * 100, 100);
-          if (progress < 100) allCompleted = false;
+          if (progress < 100) allDone = false;
           return {
             status: progress >= 100 ? ActivityStatus.COMPLETED : ActivityStatus.RUNNING,
             progress: progress,
           };
         });
       });
 
-      if (!allCompleted) {
+      if (!allDone) {
         animationRef.current = requestAnimationFrame(animate);
       } else {
         setIsRunning(false);
+        setAllCompleted(true);
       }
     };
 
@@ -263,6 +266,7 @@ export default function WorkflowSimulator({
         // Final update to mark everything complete
         setActivityStates(prev => prev.map(() => ({ status: ActivityStatus.COMPLETED, progress: 100 })));
         setIsRunning(false);
+        setAllCompleted(true);
       }
     };
 
@@ -336,8 +340,13 @@ export default function WorkflowSimulator({
             ))}
           </div>
 
-          <div className={styles.modeIndicator}>
-            Mode: <strong>{mode === 'series' ? 'Series (Sequential)' : mode === 'mix' ? 'Mix (Series + Parallel)' : 'Parallel (Concurrent)'}</strong>
+          <div className={styles.statusBar}>
+            <span className={`${styles.statusIndicator} ${isRunning ? styles.running : allCompleted ? styles.completed : styles.idle}`}>
+              {isRunning ? '▶️ Running' : allCompleted ? '✅ Completed' : '⏸️ Ready'}
+            </span>
+            <span className={styles.modeIndicator}>
+              Mode: <strong>{mode === 'series' ? 'Series' : mode === 'mix' ? 'Mix' : 'Parallel'}</strong>
+            </span>
           </div>
         </div>
       )}

src/components/ConcurrencySimulator/styles.module.css

@@ -205,11 +205,50 @@
   min-height: 1em;
 }
 
-.modeIndicator {
+/* Status bar */
+.statusBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-top: 1rem;
   padding-top: 0.75rem;
   border-top: 1px solid var(--ifm-color-emphasis-200);
-  font-size: 0.8rem;
+}
+
+.statusIndicator {
+  font-size: 0.85rem;
+  font-weight: 500;
+  padding: 0.25rem 0.75rem;
+  border-radius: 4px;
+}
+
+.statusIndicator.idle {
+  background: var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-emphasis-700);
+}
+
+.statusIndicator.running {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.statusIndicator.completed {
+  background: #dcfce7;
+  color: #166534;
+}
+
+[data-theme='dark'] .statusIndicator.running {
+  background: #78350f;
+  color: #fef3c7;
+}
+
+[data-theme='dark'] .statusIndicator.completed {
+  background: #14532d;
+  color: #dcfce7;
+}
+
+.modeIndicator {
+  font-size: 0.85rem;
   color: var(--ifm-color-emphasis-600);
 }