Improve timeline readability and fix diagram viewer closing

src/components/DiagramViewer.astro

@@ -80,10 +80,10 @@
     }, { signal });
 
     dialog.addEventListener('click', (event) => {
-      if (event.target === dialog) dialog.close();
+      if (event.target === dialog) close();
       const action = event.target instanceof Element
         ? event.target.closest<HTMLButtonElement>('[data-action]')?.dataset.action : undefined;
-      if (action === 'close') dialog.close();
+      if (action === 'close') close();
       if (action === 'fit') fit();
       if (action === 'in' || action === 'out' || action === 'actual') {
         fitting = false;
@@ -97,15 +97,20 @@
       source = undefined;
       image.removeAttribute('src');
     }
-    dialog.addEventListener('close', release, { signal });
+    function close() {
+      if (!dialog.open) return;
+      release();
+      dialog.close();
+    }
+    dialog.addEventListener('cancel', (event) => {
+      event.preventDefault();
+      close();
+    }, { signal });
     window.addEventListener('resize', () => {
       if (dialog.open && fitting) fit();
     }, { signal });
     document.addEventListener('astro:before-swap', () => {
-      if (dialog.open) {
-        dialog.close();
-        release();
-      }
+      close();
       controller.abort();
     }, { once: true, signal });
   }

src/content/blog/cloud-agents-api-architecture.md

@@ -84,26 +84,38 @@ Imagine an on-call Agent on the platform. One night, the error rate of the order
 Plotted on one timeline:
 
 ```mermaid
+---
+config:
+    gantt:
+        useWidth: 900
+        leftPadding: 100
+        rightPadding: 110
+        barHeight: 24
+        barGap: 8
+        fontSize: 14
+        sectionFontSize: 14
+---
 gantt
     title The on-call Agent's night
     dateFormat HH:mm
     axisFormat %H:%M
+    tickInterval 2hour
     todayMarker off
     section Session
-    Exists from alert to review :active, 02:10, 10:45
+    Alert to review :active, 02:10, 10:45
     section Workspace
-    Preloaded repos and notes kept throughout :active, 02:10, 10:45
+    Repos and notes retained :active, 02:10, 10:45
     section Harness process
     Investigate and fix :02:10, 02:40
-    Waiting for approval with no process :done, 02:40, 08:05
-    Platform upgrades Workers :milestone, 03:00, 0m
+    Await approval (no process) :done, 02:40, 08:05
+    Worker upgrade :milestone, 03:00, 0m
     Roll back and report :08:05, 08:20
-    Add a test case :10:30, 10:45
+    Add test :10:30, 10:45
     section Containers
-    Container A reads code and runs tests :02:16, 02:30
-    Container A runs out of memory :milestone, 02:30, 0m
-    Container B reruns the tests :02:31, 02:40
-    Container C adds a test case :10:30, 10:45
+    A — code and tests :02:16, 02:30
+    A — out of memory :milestone, 02:30, 0m
+    B — rerun tests :02:31, 02:40
+    C — add test :10:30, 10:45
 ```
 
 Over these eight-plus hours, three containers came and went and the harness process was replaced during the platform upgrade, yet the task never stopped. Only the session record and the files in the workspace existed the whole time. Here is what this night requires from the components, and our corresponding choices: