From d07992d12a3d3cd14a3d2fcaba63659cad84e46d Mon Sep 17 00:00:00 2001
From: Yaniv Zalach <yanivzalach@Yanivs-MacBook-Air.local>
Date: Sun, 16 Aug 2026 16:19:47 +0300
Subject: [PATCH] Adding link of action to timeline

---
 frontend/src/pages/DocsPage.jsx     |  7 +++++
 frontend/src/pages/TimelinePage.jsx | 44 +++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/frontend/src/pages/DocsPage.jsx b/frontend/src/pages/DocsPage.jsx
index f4924d4..0b633b3 100644
--- a/frontend/src/pages/DocsPage.jsx
+++ b/frontend/src/pages/DocsPage.jsx
@@ -355,6 +355,13 @@ const SECTIONS = [
             expanded or collapsed with <strong className="text-white">▼</strong>{" "}
             / <strong className="text-white">▲</strong>.
           </p>
+          <p>
+            When the event's snapshot points at the job that wrote it, an{" "}
+            <strong className="text-white">
+              <code>action_link</code>
+            </strong>{" "}
+            row links out to it, opening in a new tab.
+          </p>
         </div>
       </div>
     ),
diff --git a/frontend/src/pages/TimelinePage.jsx b/frontend/src/pages/TimelinePage.jsx
index 13bd660..9c18768 100644
--- a/frontend/src/pages/TimelinePage.jsx
+++ b/frontend/src/pages/TimelinePage.jsx
@@ -405,6 +405,35 @@ function DiffRow({ label, before, after }) {
   );
 }
 
+function SnapOperationDescription({ operation, operationDescription }) {
+  if (!operationDescription || operationDescription === operation) return null;
+  return (
+    <PanelDetailRow
+      label="Operation Description"
+      value={operationDescription}
+    />
+  );
+}
+
+function SnapActionLink({ actionLink }) {
+  if (!actionLink) return null;
+  return (
+    <div>
+      <span className={`block ${PANEL_FIELD_LABEL_CLASS} mb-1`}>
+        action_link
+      </span>
+      <a
+        href={actionLink}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="block font-mono text-xs text-accent hover:text-accent-dark break-all"
+      >
+        {actionLink}
+      </a>
+    </div>
+  );
+}
+
 function SnapSummary({ summary }) {
   const entries = summary ? Object.entries(summary) : [];
   if (entries.length === 0) return null;
@@ -996,6 +1025,11 @@ export default function TimelinePage() {
                     label="Operation"
                     value={selectedSnap.operation}
                   />
+                  <SnapOperationDescription
+                    operation={selectedSnap.operation}
+                    operationDescription={selectedSnap.operation_description}
+                  />
+                  <SnapActionLink actionLink={selectedSnap.action_link} />
                   <SnapSummary summary={selectedSnap.summary} />
                 </>
               )}
@@ -1018,6 +1052,11 @@ export default function TimelinePage() {
                     label="Operation"
                     value={selectedSnap.operation}
                   />
+                  <SnapOperationDescription
+                    operation={selectedSnap.operation}
+                    operationDescription={selectedSnap.operation_description}
+                  />
+                  <SnapActionLink actionLink={selectedSnap.action_link} />
                   <SnapSummary summary={selectedSnap.summary} />
                 </>
               )}
@@ -1056,6 +1095,11 @@ export default function TimelinePage() {
                     label="Operation"
                     value={selectedSnap.operation}
                   />
+                  <SnapOperationDescription
+                    operation={selectedSnap.operation}
+                    operationDescription={selectedSnap.operation_description}
+                  />
+                  <SnapActionLink actionLink={selectedSnap.action_link} />
                   <SnapSummary summary={selectedSnap.summary} />
                 </>
               )}