From bdc146dd8d793a3fc797fb95dea23af42b9ea04a Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Mon, 16 Mar 2026 20:44:32 +0100
Subject: [PATCH 01/37] Enhance workflow graph: add job 103 to mock actions and
 improve layout calculations

---
 routers/web/devtest/mock_actions.go     |   9 +
 web_src/js/components/WorkflowGraph.vue | 411 +++++++-----------------
 2 files changed, 121 insertions(+), 299 deletions(-)

diff --git a/routers/web/devtest/mock_actions.go b/routers/web/devtest/mock_actions.go
index 0dd33425dc267..908bdf206ad9e 100644
--- a/routers/web/devtest/mock_actions.go
+++ b/routers/web/devtest/mock_actions.go
@@ -138,6 +138,15 @@ func MockActionsRunsJobs(ctx *context.Context) {
 		Duration: "3h",
 		Needs:    []string{"job-100", "job-101"},
 	})
+	resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
+		ID:       runID*10 + 3,
+		JobID:    "job-103",
+		Name:     "job 103",
+		Status:   actions_model.StatusCancelled.String(),
+		CanRerun: false,
+		Duration: "2m",
+		Needs:    []string{"job-100"},
+	})
 
 	var mockLogOptions []generateMockStepsLogOptions
 	resp.State.CurrentJob.Steps = append(resp.State.CurrentJob.Steps, &actions.ViewJobStep{
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 571db2cd03604..f46359e8823af 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -29,6 +29,10 @@ interface BezierEdge extends Edge {
   path: string;
   fromNode: JobNode;
   toNode: JobNode;
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
 }
 
 interface StoredState {
@@ -95,7 +99,7 @@ const nodeWidth = computed(() => {
   return Math.min(Math.max(140, maxNameLength * 8), 180);
 });
 
-const horizontalSpacing = computed(() => nodeWidth.value + 20);
+const horizontalSpacing = computed(() => nodeWidth.value + 84);
 const graphWidth = computed(() => {
   if (jobsWithLayout.value.length === 0) return 800;
   const maxX = Math.max(...jobsWithLayout.value.map(j => j.x + nodeWidth.value));
@@ -135,8 +139,8 @@ const jobsWithLayout = computed<JobNode[]>(() => {
         return;
       }
 
-      const levelWidth = (levelJobs.length - 1) * currentHorizontalSpacing;
-      const startX = margin + (maxJobsPerLevel * currentHorizontalSpacing - levelWidth) / 2;
+      const levelHeight = (levelJobs.length - 1) * verticalSpacing;
+      const startY = margin + (maxJobsPerLevel * verticalSpacing - levelHeight) / 2;
 
       levelJobs.forEach((job, jobIndex) => {
         result.push({
@@ -148,8 +152,8 @@ const jobsWithLayout = computed<JobNode[]>(() => {
 
           index: props.jobs.findIndex(j => j.id === job.id),
 
-          x: startX + jobIndex * currentHorizontalSpacing,
-          y: margin + levelIndex * verticalSpacing,
+          x: margin + levelIndex * currentHorizontalSpacing,
+          y: startY + jobIndex * verticalSpacing,
           level: levelIndex,
         });
       });
@@ -166,7 +170,7 @@ const jobsWithLayout = computed<JobNode[]>(() => {
 
       index: index,
 
-      x: margin + index * (nodeWidth.value + 40),
+      x: margin + index * horizontalSpacing.value,
       y: margin,
       level: 0,
     }));
@@ -211,26 +215,24 @@ const bezierEdges = computed<BezierEdge[]>(() => {
       return;
     }
 
-    const startX = fromNode.x + nodeWidth.value / 2;
-    const startY = fromNode.y + nodeHeight;
-    const endX = toNode.x + nodeWidth.value / 2;
-    const endY = toNode.y;
+    const startX = fromNode.x + nodeWidth.value;
+    const startY = fromNode.y + nodeHeight / 2;
+    const endX = toNode.x;
+    const endY = toNode.y + nodeHeight / 2;
 
-    const levelDiff = toNode.level - fromNode.level;
-    const curveStrength = 30 + Math.abs(levelDiff) * 15;
-
-    const controlX1 = startX;
-    const controlY1 = startY + curveStrength;
-    const controlX2 = endX;
-    const controlY2 = endY - curveStrength;
-
-    const path = `M ${startX} ${startY} C ${controlX1} ${controlY1}, ${controlX2} ${controlY2}, ${endX} ${endY}`;
+    const elbowOffset = Math.max(18, Math.min((endX - startX) / 2, 28));
+    const midX = startX + elbowOffset;
+    const path = `M ${startX} ${startY} L ${midX} ${startY} L ${midX} ${endY} L ${endX} ${endY}`;
 
     bezierEdgesList.push({
       ...edge,
       path,
       fromNode,
       toNode,
+      startX,
+      startY,
+      endX,
+      endY,
     });
   });
 
@@ -253,8 +255,8 @@ const graphMetrics = computed(() => {
   };
 })
 
-const nodeHeight = 50;
-const verticalSpacing = 120;
+const nodeHeight = 64;
+const verticalSpacing = 104;
 const margin = 40;
 
 function zoomIn() {
@@ -338,17 +340,12 @@ function isEdgeHighlighted(edge: BezierEdge): boolean {
   return edge.from === hoveredJob.name || edge.to === hoveredJob.name;
 }
 
-function getNodeColor(status: ActionsRunStatus): string {
-  if (status === 'success') {
-    return 'var(--color-green-dark-2)';
-  } else if (status === 'failure') {
-    return 'var(--color-red-dark-2)';
-  } else if (status === 'running') {
-    return 'var(--color-yellow-dark-2)';
-  } else if (status === 'blocked') {
-    return 'var(--color-purple)';
-  }
-  return 'var(--color-text-light-3)';
+function hasIncomingEdge(job: JobNode): boolean {
+  return edges.value.some((edge) => edge.to === job.name);
+}
+
+function hasOutgoingEdge(job: JobNode): boolean {
+  return edges.value.some((edge) => edge.from === job.name);
 }
 
 function getStatusDotColor(status: ActionsRunStatus): string {
@@ -362,45 +359,6 @@ function getStatusDotColor(status: ActionsRunStatus): string {
   return 'var(--color-text-light-2)';
 }
 
-function getEdgeColor(edge: BezierEdge): string {
-  if (!edge.fromNode || !edge.toNode) {
-    return 'var(--color-secondary)';
-  }
-
-  const fromStatus = edge.fromNode.status;
-  const toStatus = edge.toNode.status;
-
-  if (fromStatus === 'failure' || toStatus === 'failure') {
-    return 'var(--color-red)';
-  }
-
-  if (fromStatus === 'running') {
-    return 'var(--color-yellow)';
-  }
-
-  if (toStatus === 'running' && fromStatus === 'success') {
-    return 'var(--color-primary)';
-  }
-
-  if (fromStatus === 'success' && toStatus === 'success') {
-    return 'var(--color-green)';
-  }
-
-  if (fromStatus === 'success' && (toStatus === 'waiting' || toStatus === 'blocked')) {
-    return 'var(--color-primary-light)';
-  }
-
-  if (fromStatus === 'waiting' || fromStatus === 'blocked') {
-    return 'var(--color-text-light-2)';
-  }
-
-  if (fromStatus === 'cancelled' || toStatus === 'cancelled') {
-    return 'var(--color-text-light-2)';
-  }
-
-  return 'var(--color-secondary)';
-}
-
 function getDisplayName(name: string): string {
   const maxChars = 26;
   if (name.length <= maxChars) {
@@ -433,88 +391,19 @@ function getEdgeStyle(edge: BezierEdge) {
     };
   }
 
-  const fromStatus = edge.fromNode.status;
-  const toStatus = edge.toNode.status;
   const isHighlighted = isEdgeHighlighted(edge);
 
   return {
-    'stroke': getEdgeColor(edge),
-    'stroke-width': isHighlighted ? '3' : getStrokeWidth(fromStatus, toStatus),
-    'stroke-dasharray': getDashArray(fromStatus, toStatus),
-    'opacity': isHighlighted ? 1 : getEdgeOpacity(fromStatus, toStatus),
+    'stroke': (!edge.fromNode || !edge.toNode) ? 'var(--color-secondary-alpha-50)' :  'var(--color-secondary-alpha-50)',
+    'stroke-width': isHighlighted ? '3' : '1.75',
+    'stroke-dasharray': 'none',
+    'opacity': isHighlighted ? 1 : 0.6,
     'transition': 'all 0.2s ease',
   };
 }
 
-function getStrokeWidth(fromStatus: ActionsRunStatus, toStatus: ActionsRunStatus): string {
-  if (fromStatus === 'running' || toStatus === 'running') {
-    return '3';
-  }
-
-  if (fromStatus === 'failure' || toStatus === 'failure') {
-    return '2.5';
-  }
-
-  return '2';
-}
-
-function getDashArray(fromStatus: ActionsRunStatus, toStatus: ActionsRunStatus): string {
-  if (fromStatus === 'waiting' || toStatus === 'waiting') {
-    return '5,3';
-  }
-
-  if (fromStatus === 'blocked') {
-    return '8,4';
-  }
-
-  if (fromStatus === 'cancelled' || toStatus === 'cancelled') {
-    return '3,6';
-  }
-
-  return 'none';
-}
-
-function getEdgeOpacity(fromStatus: ActionsRunStatus, toStatus: ActionsRunStatus): number {
-  if (fromStatus === 'success' && toStatus === 'success') {
-    return 0.6;
-  }
-
-  if (fromStatus === 'failure' || toStatus === 'failure') {
-    return 1;
-  }
-
-  if (fromStatus === 'running' || toStatus === 'running') {
-    return 1;
-  }
-
-  return 0.8;
-}
-
 function getEdgeClass(edge: BezierEdge): string {
-  if (!edge.fromNode || !edge.toNode) return '';
-
-  const fromStatus = edge.fromNode.status;
-  const toStatus = edge.toNode.status;
-
-  const classes: string[] = ['node-edge'];
-
-  if (fromStatus === 'running' || toStatus === 'running') {
-    classes.push('running-edge');
-  }
-
-  if (fromStatus === 'success' && toStatus === 'success') {
-    classes.push('success-edge');
-  }
-
-  if (fromStatus === 'failure' || toStatus === 'failure') {
-    classes.push('failure-edge');
-  }
-
-  if (fromStatus === 'waiting' || toStatus === 'waiting') {
-    classes.push('waiting-edge');
-  }
-
-  return classes.join(' ');
+  return edge.fromNode && edge.toNode ? 'node-edge' : '';
 }
 
 function computeJobLevels(jobs: ActionsJob[]): Map<string, number> {
@@ -663,29 +552,52 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             :y="job.y"
             :width="nodeWidth"
             :height="nodeHeight"
-            rx="8"
-            :fill="getNodeColor(job.status)"
-            :stroke="job.id === currentJobId ? 'var(--color-primary)' : 'var(--color-card-border)'"
-            :stroke-width="job.id === currentJobId ? '3' : '2'"
+            rx="10"
+            fill="var(--color-box-body)"
+            :stroke="job.id === currentJobId ? 'var(--color-primary)' : 'var(--color-secondary-alpha-20)'"
+            :stroke-width="job.id === currentJobId ? '1.75' : '1'"
             class="job-rect"
           />
 
-          <rect
-            v-if="job.status === 'running'"
-            :x="job.x"
-            :y="job.y"
-            :width="nodeWidth"
-            :height="nodeHeight"
-            rx="8"
-            fill="url(#running-gradient)"
-            opacity="0.3"
-            class="running-background"
+          <circle
+            v-if="hasIncomingEdge(job)"
+            :cx="job.x"
+            :cy="job.y + nodeHeight / 2"
+            r="6"
+            class="node-port"
+          />
+
+          <circle
+            v-if="hasOutgoingEdge(job)"
+            :cx="job.x + nodeWidth"
+            :cy="job.y + nodeHeight / 2"
+            r="6"
+            class="node-port"
           />
+
+          <circle
+            :cx="job.x + 20"
+            :cy="job.y + 20"
+            r="7"
+            :fill="getStatusDotColor(job.status)"
+            class="job-status-dot"
+          />
+
+          <circle
+            v-if="job.status === 'waiting' || job.status === 'cancelled' || job.status === 'unknown'"
+            :cx="job.x + 20"
+            :cy="job.y + 20"
+            r="4"
+            :fill="'var(--color-box-body)'"
+            class="job-status-dot-inner"
+          />
+
           <text
-            :x="job.x + 8"
-            :y="job.y + 18"
-            fill="white"
-            font-size="12"
+            :x="job.x + 40"
+            :y="job.y + 25"
+            :fill="'var(--color-text)'"
+            font-size="11"
+            font-weight="600"
             text-anchor="start"
             class="job-name"
           >
@@ -694,10 +606,10 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 
           <text
             v-if="job.duration || (job.status === 'success' || job.status === 'failure')"
-            :x="job.x + nodeWidth - 10"
-            :y="job.y + nodeHeight - 25"
-            fill="rgba(255,255,255,0.7)"
-            font-size="9"
+            :x="job.x + nodeWidth - 14"
+            :y="job.y + 25"
+            :fill="'var(--color-text-light-2)'"
+            font-size="8.5"
             text-anchor="end"
             class="job-duration"
           >
@@ -705,56 +617,17 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
           </text>
 
           <text
-            :x="job.x + nodeWidth - 10"
-            :y="job.y + nodeHeight - 8"
-            fill="rgba(255,255,255,0.9)"
-            font-size="10"
-            text-anchor="end"
+            :x="job.x + 20"
+            :y="job.y + nodeHeight - 16"
+            :fill="'var(--color-text-light-1)'"
+            font-size="9.5"
+            text-anchor="start"
             class="job-status"
           >
             {{ formatStatus(job.status) }}
           </text>
 
-          <rect
-            v-if="job.status === 'running'"
-            :x="job.x + 2"
-            :y="job.y + nodeHeight - 6"
-            :width="(nodeWidth - 4) * 0.5"
-            height="4"
-            rx="2"
-            :fill="getStatusDotColor('running')"
-            class="progress-bar"
-          >
-            <animate
-              attributeName="width"
-              values="0; 100"
-              dur="2s"
-              repeatCount="indefinite"
-              calcMode="spline"
-              keySplines="0.4, 0, 0.2, 1"
-            />
-          </rect>
-
-          <text
-            v-if="job.needs?.length"
-            :x="job.x + nodeWidth / 2"
-            :y="job.y - 8"
-            fill="var(--color-text-light-2)"
-            font-size="10"
-            text-anchor="middle"
-            class="job-deps-label"
-          >
-            ← {{ job.needs.length }} deps
-          </text>
         </g>
-
-        <defs>
-          <linearGradient id="running-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop offset="0%" :stop-color="getStatusDotColor('running')" stop-opacity="0.2"/>
-            <stop offset="50%" :stop-color="getStatusDotColor('running')" stop-opacity="0.4"/>
-            <stop offset="100%" :stop-color="getStatusDotColor('running')" stop-opacity="0.2"/>
-          </linearGradient>
-        </defs>
       </svg>
     </div>
   </div>
@@ -804,12 +677,13 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 
 .graph-container {
   overflow: auto;
-  padding: 12px;
-  border-radius: 8px;
+  padding: 12px 16px 20px;
+  border-radius: 10px;
   cursor: grab;
   min-height: 300px;
   max-height: 600px;
   position: relative;
+  background: var(--color-body);
 }
 
 .graph-container.dragging {
@@ -823,12 +697,14 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 
 .graph-svg path {
   transition: all 0.2s ease;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
 .highlighted-edge {
-  stroke-width: 3 !important;
-  opacity: 1 !important;
-  stroke: var(--color-primary) !important;
+  stroke-width: 2.25 !important;
+  opacity: 0.9 !important;
+  stroke: color-mix(in srgb, var(--color-primary) 35%, var(--color-secondary)) !important;
 }
 
 .job-node-group {
@@ -838,10 +714,8 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 }
 
 .job-node-group:hover .job-rect {
-  filter: brightness(1.1);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 10;
+  filter: brightness(1.01);
+  transform: translateX(1px);
 }
 
 .job-node-group.current-job {
@@ -849,11 +723,11 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 }
 
 .job-node-group.current-job .job-rect {
-  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-primary) 30%, transparent));
+  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--color-primary) 12%, transparent));
 }
 
 .job-name {
-  max-width: calc(var(--node-width, 150px) - 50px);
+  max-width: calc(var(--node-width, 150px) - 92px);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -862,95 +736,34 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 }
 
 .job-status,
-.job-duration,
-.job-deps-label {
+.job-duration {
   user-select: none;
   pointer-events: none;
 }
 
-@keyframes shimmer {
-  0% {
-    background-position: -200px 0;
-  }
-  100% {
-    background-position: calc(200px + 100%) 0;
-  }
-}
-
-.running-background {
-  animation: shimmer 2s infinite linear;
-  background-size: 200px 100%;
-}
-
-@keyframes flowRunning {
-  0% {
-    stroke-dashoffset: 20;
-    stroke-opacity: 0.7;
-  }
-  50% {
-    stroke-opacity: 1;
-  }
-  100% {
-    stroke-dashoffset: 0;
-    stroke-opacity: 0.7;
-  }
-}
-
-@keyframes pulseFailure {
-  0%, 100% {
-    stroke-width: 2.5;
-    opacity: 0.7;
-  }
-  50% {
-    stroke-width: 3;
-    opacity: 1;
-    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-red) 50%, transparent));
-  }
-}
-
-@keyframes shimmerEdge {
-  0% {
-    stroke-dashoffset: 20;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-.node-edge.running-edge {
-  stroke-dasharray: 10, 5;
-  animation: flowRunning 1s linear infinite;
-}
-
-.node-edge.failure-edge {
-  animation: pulseFailure 0.8s ease-in-out infinite;
-}
-
-.node-edge.waiting-edge {
-  stroke-dasharray: 5, 3;
-  animation: shimmerEdge 2s linear infinite;
+.job-status-dot {
+  pointer-events: none;
+  stroke: var(--color-box-body);
+  stroke-width: 1.5;
 }
 
-.node-edge.success-edge {
-  transition: stroke-width 0.3s ease, opacity 0.3s ease;
+.job-status-dot-inner {
+  pointer-events: none;
 }
 
-.node-edge.success-edge:hover {
-  stroke-width: 3;
-  opacity: 1;
+.job-rect {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
 }
 
-.progress-bar {
-  animation: progressPulse 2s ease-in-out infinite;
+.node-port {
+  fill: var(--color-box-body);
+  stroke: var(--color-secondary-alpha-90);
+  stroke-width: 1.5;
+  pointer-events: none;
 }
 
-@keyframes progressPulse {
-  0%, 100% {
-    opacity: 0.8;
-  }
-  50% {
-    opacity: 1;
-  }
+.node-edge {
+  transition: stroke-width 0.2s ease, opacity 0.2s ease;
 }
 
 @media (max-width: 768px) {

From 69b9f2b0d4af8b6e3fbbf412e718d3c3baffc943 Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Mon, 16 Mar 2026 21:01:41 +0100
Subject: [PATCH 02/37] Use commit status icons

---
 routers/web/devtest/mock_actions.go     |  9 +++
 web_src/js/components/WorkflowGraph.vue | 88 ++++++++-----------------
 2 files changed, 35 insertions(+), 62 deletions(-)

diff --git a/routers/web/devtest/mock_actions.go b/routers/web/devtest/mock_actions.go
index 908bdf206ad9e..d86ce68d79850 100644
--- a/routers/web/devtest/mock_actions.go
+++ b/routers/web/devtest/mock_actions.go
@@ -147,6 +147,15 @@ func MockActionsRunsJobs(ctx *context.Context) {
 		Duration: "2m",
 		Needs:    []string{"job-100"},
 	})
+	resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
+		ID:       runID*10 + 4,
+		JobID:    "job-104",
+		Name:     "job 104",
+		Status:   actions_model.StatusSuccess.String(),
+		CanRerun: false,
+		Duration: "2m",
+		Needs:    []string{"job-103"},
+	})
 
 	var mockLogOptions []generateMockStepsLogOptions
 	resp.State.CurrentJob.Steps = append(resp.State.CurrentJob.Steps, &actions.ViewJobStep{
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index f46359e8823af..ec3300c38687f 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
 import {SvgIcon} from '../svg.ts';
+import ActionRunStatus from './ActionRunStatus.vue';
 import {localUserSettings} from "../modules/user-settings.ts";
 import {debounce} from "throttle-debounce";
 import type {ActionsJob, ActionsRunStatus} from '../modules/gitea-actions.ts';
@@ -255,8 +256,8 @@ const graphMetrics = computed(() => {
   };
 })
 
-const nodeHeight = 64;
-const verticalSpacing = 104;
+const nodeHeight = 48;
+const verticalSpacing = 88;
 const margin = 40;
 
 function zoomIn() {
@@ -348,17 +349,6 @@ function hasOutgoingEdge(job: JobNode): boolean {
   return edges.value.some((edge) => edge.from === job.name);
 }
 
-function getStatusDotColor(status: ActionsRunStatus): string {
-  if (status === 'success') {
-    return 'var(--color-green)';
-  } else if (status === 'failure') {
-    return 'var(--color-red)';
-  } else if (status === 'running') {
-    return 'var(--color-yellow)';
-  }
-  return 'var(--color-text-light-2)';
-}
-
 function getDisplayName(name: string): string {
   const maxChars = 26;
   if (name.length <= maxChars) {
@@ -368,20 +358,6 @@ function getDisplayName(name: string): string {
   return name.substring(0, maxChars - 3) + '...';
 }
 
-function formatStatus(status: ActionsRunStatus): string {
-  const statusMap: Record<ActionsRunStatus, string> = {
-    skipped: 'Skipped',
-    unknown: 'Unknown',
-    success: 'Success',
-    failure: 'Failed',
-    running: 'Running',
-    waiting: 'Waiting',
-    cancelled: 'Cancelled',
-    blocked: 'Blocked'
-  };
-  return statusMap[status] || status;
-}
-
 function getEdgeStyle(edge: BezierEdge) {
   if (!edge.fromNode || !edge.toNode) {
     return {
@@ -575,30 +551,26 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             class="node-port"
           />
 
-          <circle
-            :cx="job.x + 20"
-            :cy="job.y + 20"
-            r="7"
-            :fill="getStatusDotColor(job.status)"
-            class="job-status-dot"
-          />
-
-          <circle
-            v-if="job.status === 'waiting' || job.status === 'cancelled' || job.status === 'unknown'"
-            :cx="job.x + 20"
-            :cy="job.y + 20"
-            r="4"
-            :fill="'var(--color-box-body)'"
-            class="job-status-dot-inner"
-          />
+          <foreignObject
+            :x="job.x + 10"
+            :y="job.y + 14"
+            width="20"
+            height="20"
+            class="job-status-fo"
+          >
+            <div xmlns="http://www.w3.org/1999/xhtml" class="job-status-icon-wrap">
+              <ActionRunStatus :status="job.status"/>
+            </div>
+          </foreignObject>
 
           <text
             :x="job.x + 40"
-            :y="job.y + 25"
+            :y="job.y + nodeHeight / 2 + 1"
             :fill="'var(--color-text)'"
             font-size="11"
             font-weight="600"
             text-anchor="start"
+            dominant-baseline="middle"
             class="job-name"
           >
             {{ getDisplayName(job.name) }}
@@ -607,26 +579,16 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
           <text
             v-if="job.duration || (job.status === 'success' || job.status === 'failure')"
             :x="job.x + nodeWidth - 14"
-            :y="job.y + 25"
+            :y="job.y + nodeHeight / 2 + 1"
             :fill="'var(--color-text-light-2)'"
             font-size="8.5"
             text-anchor="end"
+            dominant-baseline="middle"
             class="job-duration"
           >
             {{ job.duration }}
           </text>
 
-          <text
-            :x="job.x + 20"
-            :y="job.y + nodeHeight - 16"
-            :fill="'var(--color-text-light-1)'"
-            font-size="9.5"
-            text-anchor="start"
-            class="job-status"
-          >
-            {{ formatStatus(job.status) }}
-          </text>
-
         </g>
       </svg>
     </div>
@@ -735,20 +697,22 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   pointer-events: none;
 }
 
-.job-status,
 .job-duration {
   user-select: none;
   pointer-events: none;
 }
 
-.job-status-dot {
+.job-status-fo,
+.job-status-icon-wrap {
   pointer-events: none;
-  stroke: var(--color-box-body);
-  stroke-width: 1.5;
 }
 
-.job-status-dot-inner {
-  pointer-events: none;
+.job-status-icon-wrap {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .job-rect {

From 5affc612ade0b53f56a217fd4e04818e09079fb9 Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Mon, 16 Mar 2026 21:04:58 +0100
Subject: [PATCH 03/37] fix problem with too long job names

---
 routers/web/devtest/mock_actions.go     | 2 +-
 web_src/js/components/WorkflowGraph.vue | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/routers/web/devtest/mock_actions.go b/routers/web/devtest/mock_actions.go
index d86ce68d79850..0b359999db8ef 100644
--- a/routers/web/devtest/mock_actions.go
+++ b/routers/web/devtest/mock_actions.go
@@ -132,7 +132,7 @@ func MockActionsRunsJobs(ctx *context.Context) {
 	resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
 		ID:       runID*10 + 2,
 		JobID:    "job-102",
-		Name:     "job 102",
+		Name:     "ULTRA LOONG job name 102 that exceeds the limit",
 		Status:   actions_model.StatusFailure.String(),
 		CanRerun: false,
 		Duration: "3h",
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index ec3300c38687f..d72a93c071b14 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -349,8 +349,8 @@ function hasOutgoingEdge(job: JobNode): boolean {
   return edges.value.some((edge) => edge.from === job.name);
 }
 
-function getDisplayName(name: string): string {
-  const maxChars = 26;
+function getDisplayName(name: string, hasDuration: boolean): string {
+  const maxChars = hasDuration ? 18 : 22;
   if (name.length <= maxChars) {
     return name;
   }
@@ -523,6 +523,8 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
           @mouseenter="handleNodeMouseEnter(job)"
           @mouseleave="handleNodeMouseLeave"
         >
+          <title>{{ job.name }}</title>
+
           <rect
             :x="job.x"
             :y="job.y"
@@ -573,7 +575,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             dominant-baseline="middle"
             class="job-name"
           >
-            {{ getDisplayName(job.name) }}
+            {{ getDisplayName(job.name, Boolean(job.duration || job.status === 'success' || job.status === 'failure')) }}
           </text>
 
           <text

From 25970badc16e2be9528f400dc4d247843fa3e63b Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Mon, 16 Mar 2026 22:18:56 +0100
Subject: [PATCH 04/37] remove some unneeded code - if statement returned 2x
 the same, was left over from testing -  bezier dont need to store start and
 end vars as they are not used anymore anywhere, just needed for local
 computes

---
 web_src/js/components/WorkflowGraph.vue | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index d72a93c071b14..920872ac93f8f 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -30,10 +30,6 @@ interface BezierEdge extends Edge {
   path: string;
   fromNode: JobNode;
   toNode: JobNode;
-  startX: number;
-  startY: number;
-  endX: number;
-  endY: number;
 }
 
 interface StoredState {
@@ -230,10 +226,6 @@ const bezierEdges = computed<BezierEdge[]>(() => {
       path,
       fromNode,
       toNode,
-      startX,
-      startY,
-      endX,
-      endY,
     });
   });
 
@@ -370,7 +362,7 @@ function getEdgeStyle(edge: BezierEdge) {
   const isHighlighted = isEdgeHighlighted(edge);
 
   return {
-    'stroke': (!edge.fromNode || !edge.toNode) ? 'var(--color-secondary-alpha-50)' :  'var(--color-secondary-alpha-50)',
+    'stroke': 'var(--color-secondary-alpha-50)',
     'stroke-width': isHighlighted ? '3' : '1.75',
     'stroke-dasharray': 'none',
     'opacity': isHighlighted ? 1 : 0.6,

From 793bbbe23c692f23cc3e745607be6c13782e33ad Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Tue, 17 Mar 2026 18:57:06 +0100
Subject: [PATCH 05/37] fix review comments: precompute edge sets and
 consolidate highlight styling

- Replace hasIncomingEdge/hasOutgoingEdge linear scans with precomputed
  Sets for O(1) lookups per node render
- Inline set lookups directly in template, removing one-off wrapper functions
- Remove dead highlight logic from getEdgeStyle(); highlight styling is
  solely handled by .highlighted-edge CSS class
---
 web_src/js/components/WorkflowGraph.vue | 26 +++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 920872ac93f8f..05016eb9bbac0 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -333,13 +333,17 @@ function isEdgeHighlighted(edge: BezierEdge): boolean {
   return edge.from === hoveredJob.name || edge.to === hoveredJob.name;
 }
 
-function hasIncomingEdge(job: JobNode): boolean {
-  return edges.value.some((edge) => edge.to === job.name);
-}
+const nodesWithIncomingEdge = computed(() => {
+  const set = new Set<string>();
+  for (const edge of edges.value) set.add(edge.to);
+  return set;
+});
 
-function hasOutgoingEdge(job: JobNode): boolean {
-  return edges.value.some((edge) => edge.from === job.name);
-}
+const nodesWithOutgoingEdge = computed(() => {
+  const set = new Set<string>();
+  for (const edge of edges.value) set.add(edge.from);
+  return set;
+});
 
 function getDisplayName(name: string, hasDuration: boolean): string {
   const maxChars = hasDuration ? 18 : 22;
@@ -359,13 +363,11 @@ function getEdgeStyle(edge: BezierEdge) {
     };
   }
 
-  const isHighlighted = isEdgeHighlighted(edge);
-
   return {
     'stroke': 'var(--color-secondary-alpha-50)',
-    'stroke-width': isHighlighted ? '3' : '1.75',
+    'stroke-width': '1.75',
     'stroke-dasharray': 'none',
-    'opacity': isHighlighted ? 1 : 0.6,
+    'opacity': '0.6',
     'transition': 'all 0.2s ease',
   };
 }
@@ -530,7 +532,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
           />
 
           <circle
-            v-if="hasIncomingEdge(job)"
+            v-if="nodesWithIncomingEdge.has(job.name)"
             :cx="job.x"
             :cy="job.y + nodeHeight / 2"
             r="6"
@@ -538,7 +540,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
           />
 
           <circle
-            v-if="hasOutgoingEdge(job)"
+            v-if="nodesWithOutgoingEdge.has(job.name)"
             :cx="job.x + nodeWidth"
             :cy="job.y + nodeHeight / 2"
             r="6"

From 3f501d8104fc2ce5a9439833c4bf1c13af95f7e3 Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Sun, 22 Mar 2026 16:58:07 +0100
Subject: [PATCH 06/37] refactor: remove currentJobId prop and related styles
 from WorkflowGraph

---
 web_src/js/components/WorkflowGraph.vue | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 858c7423a1333..0a8f8c778daea 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -41,7 +41,6 @@ interface StoredState {
 
 const props = defineProps<{
   jobs: ActionsJob[];
-  currentJobId?: number;
   runLink: string;
   workflowId: string;
 }>()
@@ -507,7 +506,6 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
         <g
           v-for="job in jobsWithLayout"
           :key="job.id"
-          :class="{'current-job': job.id === currentJobId}"
           class="job-node-group"
           @click="onNodeClick(job, $event)"
           @mouseenter="handleNodeMouseEnter(job)"
@@ -522,8 +520,8 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             :height="nodeHeight"
             rx="10"
             fill="var(--color-box-body)"
-            :stroke="job.id === currentJobId ? 'var(--color-primary)' : 'var(--color-secondary-alpha-20)'"
-            :stroke-width="job.id === currentJobId ? '1.75' : '1'"
+            stroke="var(--color-secondary-alpha-20)"
+            stroke-width="1"
             class="job-rect"
           />
 
@@ -674,14 +672,6 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   transform: translateX(1px);
 }
 
-.job-node-group.current-job {
-  cursor: default;
-}
-
-.job-node-group.current-job .job-rect {
-  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--color-primary) 12%, transparent));
-}
-
 .job-name {
   max-width: calc(var(--node-width, 150px) - 92px);
   text-overflow: ellipsis;

From de8b6107e3baf4e0f2e0d2bde6fa389c581901ad Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Sun, 22 Mar 2026 17:16:24 +0100
Subject: [PATCH 07/37] improve ui

---
 web_src/js/components/WorkflowGraph.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 0a8f8c778daea..a48e87fcb40e4 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -520,8 +520,8 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             :height="nodeHeight"
             rx="10"
             fill="var(--color-box-body)"
-            stroke="var(--color-secondary-alpha-20)"
-            stroke-width="1"
+            stroke="var(--color-secondary-alpha-50)"
+            stroke-width="1.25"
             class="job-rect"
           />
 
@@ -700,7 +700,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 }
 
 .job-rect {
-  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
 }
 
 .node-port {

From 8f8152a8895262cd06214005e15b56b8fc7ac6d1 Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Sun, 22 Mar 2026 20:45:08 +0100
Subject: [PATCH 08/37] adjust mocks

---
 routers/web/devtest/mock_actions.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/routers/web/devtest/mock_actions.go b/routers/web/devtest/mock_actions.go
index 7de80528fb96e..61239b168d8ea 100644
--- a/routers/web/devtest/mock_actions.go
+++ b/routers/web/devtest/mock_actions.go
@@ -157,7 +157,7 @@ func MockActionsRunsJobs(ctx *context.Context) {
 		Status:   actions_model.StatusSuccess.String(),
 		CanRerun: false,
 		Duration: "2m",
-		Needs:    []string{"job-103"},
+		Needs:    []string{"job-103", "job-101", "job-100"},
 	})
 
 	fillViewRunResponseCurrentJob(ctx, resp)

From 808e7f80da4b846b99fd89de4de6ecdebb6ed943 Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Sun, 22 Mar 2026 22:18:50 +0100
Subject: [PATCH 09/37] improve ui

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web_src/js/components/WorkflowGraph.vue | 232 +++++++++++++++---------
 1 file changed, 148 insertions(+), 84 deletions(-)

diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index a48e87fcb40e4..bfebac01bc3e0 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -10,23 +10,20 @@ interface JobNode {
   id: number;
   name: string;
   status: ActionsRunStatus;
-  needs: string[];
   duration: string;
 
-  index: number;
-
   x: number;
   y: number;
   level: number;
 }
 
 interface Edge {
-  from: string;
-  to: string;
+  fromId: number;
+  toId: number;
   key: string;
 }
 
-interface BezierEdge extends Edge {
+interface RoutedEdge extends Edge {
   path: string;
   fromNode: JobNode;
   toNode: JobNode;
@@ -133,19 +130,15 @@ const jobsWithLayout = computed<JobNode[]>(() => {
         return;
       }
 
-      const levelHeight = (levelJobs.length - 1) * verticalSpacing;
-      const startY = margin + (maxJobsPerLevel * verticalSpacing - levelHeight) / 2;
+      const startY = margin;
 
       levelJobs.forEach((job, jobIndex) => {
         result.push({
           id: job.id,
           name: job.name,
           status: job.status,
-          needs: job.needs || [],
           duration: job.duration,
 
-          index: props.jobs.findIndex(j => j.id === job.id),
-
           x: margin + levelIndex * currentHorizontalSpacing,
           y: startY + jobIndex * verticalSpacing,
           level: levelIndex,
@@ -159,11 +152,8 @@ const jobsWithLayout = computed<JobNode[]>(() => {
       id: job.id,
       name: job.name,
       status: job.status,
-      needs: job.needs || [],
       duration: job.duration,
 
-      index: index,
-
       x: margin + index * horizontalSpacing.value,
       y: margin,
       level: 0,
@@ -171,10 +161,64 @@ const jobsWithLayout = computed<JobNode[]>(() => {
   }
 });
 
+function buildDirectNeedsMap(jobs: ActionsJob[]): Map<string, string[]> {
+  const directNeedsByJobId = new Map<string, string[]>();
+  const dependentsByJobId = new Map<string, Set<string>>();
+
+  for (const job of jobs) {
+    const needs = job.needs || [];
+    directNeedsByJobId.set(job.jobId, needs);
+
+    for (const need of needs) {
+      if (!dependentsByJobId.has(need)) {
+        dependentsByJobId.set(need, new Set());
+      }
+      dependentsByJobId.get(need)!.add(job.jobId);
+    }
+  }
+
+  const reachabilityCache = new Map<string, boolean>();
+
+  function canReach(fromJobId: string, toJobId: string): boolean {
+    const cacheKey = `${fromJobId}->${toJobId}`;
+    if (reachabilityCache.has(cacheKey)) {
+      return reachabilityCache.get(cacheKey)!;
+    }
+
+    const visited = new Set<string>();
+    const stack = [...(dependentsByJobId.get(fromJobId) || [])];
+
+    while (stack.length > 0) {
+      const current = stack.pop()!;
+      if (current === toJobId) {
+        reachabilityCache.set(cacheKey, true);
+        return true;
+      }
+      if (visited.has(current)) continue;
+      visited.add(current);
+      stack.push(...(dependentsByJobId.get(current) || []));
+    }
+
+    reachabilityCache.set(cacheKey, false);
+    return false;
+  }
+
+  const reducedNeedsByJobId = new Map<string, string[]>();
+  for (const [jobId, needs] of directNeedsByJobId.entries()) {
+    reducedNeedsByJobId.set(jobId, needs.filter((need) => {
+      return !needs.some((otherNeed) => otherNeed !== need && canReach(need, otherNeed));
+    }));
+  }
+
+  return reducedNeedsByJobId;
+}
+
+const directNeedsByJobId = computed(() => buildDirectNeedsMap(props.jobs));
+
 const edges = computed<Edge[]>(() => {
   const edgesList: Edge[] = [];
-
   const jobsByJobId = new Map<string, ActionsJob[]>();
+
   for (const job of props.jobs) {
     if (!jobsByJobId.has(job.jobId)) {
       jobsByJobId.set(job.jobId, []);
@@ -183,13 +227,13 @@ const edges = computed<Edge[]>(() => {
   }
 
   for (const job of props.jobs) {
-    for (const need of job.needs || []) {
-      const targetJobs = jobsByJobId.get(need) || [];
-      for (const targetJob of targetJobs) {
+    for (const need of directNeedsByJobId.value.get(job.jobId) || []) {
+      const upstreamJobs = jobsByJobId.get(need) || [];
+      for (const upstreamJob of upstreamJobs) {
         edgesList.push({
-          from: targetJob.name,
-          to: job.name,
-          key: `${targetJob.id}-${job.id}`,
+          fromId: upstreamJob.id,
+          toId: job.id,
+          key: `${upstreamJob.id}-${job.id}`,
         });
       }
     }
@@ -198,35 +242,89 @@ const edges = computed<Edge[]>(() => {
   return edgesList;
 });
 
-const bezierEdges = computed<BezierEdge[]>(() => {
-  const bezierEdgesList: BezierEdge[] = [];
+function buildRoundedConnectorPath(startX: number, startY: number, endX: number, endY: number, turnX: number): string {
+  const deltaY = endY - startY;
+  if (Math.abs(deltaY) < 1) {
+    return `M ${startX} ${startY} H ${endX}`;
+  }
 
-  edges.value.forEach(edge => {
-    const fromNode = jobsWithLayout.value.find(j => j.name === edge.from);
-    const toNode = jobsWithLayout.value.find(j => j.name === edge.to);
+  const direction = deltaY > 0 ? 1 : -1;
+  const elbowSize = Math.max(8, Math.min(24, Math.abs(deltaY) / 2, Math.abs(endX - startX) / 2));
+  const controlOffset = elbowSize / 2;
+  const clampedTurnX = Math.min(Math.max(turnX, startX + elbowSize), endX - elbowSize);
+
+  return [
+    `M ${startX} ${startY}`,
+    `H ${clampedTurnX - elbowSize}`,
+    `C ${clampedTurnX - controlOffset} ${startY} ${clampedTurnX} ${startY + direction * controlOffset} ${clampedTurnX} ${startY + direction * elbowSize}`,
+    `V ${endY - direction * elbowSize}`,
+    `C ${clampedTurnX} ${endY - direction * controlOffset} ${clampedTurnX + controlOffset} ${endY} ${clampedTurnX + elbowSize} ${endY}`,
+    `H ${endX}`,
+  ].join(' ');
+}
+
+const routedEdges = computed<RoutedEdge[]>(() => {
+  const nodesById = new Map(jobsWithLayout.value.map((job) => [job.id, job]));
+  const outgoingEdges = new Map<number, Edge[]>();
+  const incomingEdges = new Map<number, Edge[]>();
+
+  for (const edge of edges.value) {
+    if (!outgoingEdges.has(edge.fromId)) {
+      outgoingEdges.set(edge.fromId, []);
+    }
+    outgoingEdges.get(edge.fromId)!.push(edge);
 
-    if (!fromNode || !toNode) {
-      return;
+    if (!incomingEdges.has(edge.toId)) {
+      incomingEdges.set(edge.toId, []);
     }
+    incomingEdges.get(edge.toId)!.push(edge);
+  }
+
+  for (const sourceEdges of outgoingEdges.values()) {
+    sourceEdges.sort((a, b) => {
+      const targetA = nodesById.get(a.toId);
+      const targetB = nodesById.get(b.toId);
+      if (!targetA || !targetB) return 0;
+      return targetA.y - targetB.y || a.toId - b.toId;
+    });
+  }
+
+  const edgePaths: RoutedEdge[] = [];
+
+  for (const edge of edges.value) {
+    const fromNode = nodesById.get(edge.fromId);
+    const toNode = nodesById.get(edge.toId);
+    if (!fromNode || !toNode) continue;
 
     const startX = fromNode.x + nodeWidth.value;
     const startY = fromNode.y + nodeHeight / 2;
     const endX = toNode.x;
     const endY = toNode.y + nodeHeight / 2;
+    const sourceEdges = outgoingEdges.get(edge.fromId) || [];
+    const targetEdges = incomingEdges.get(edge.toId) || [];
+    const horizontalGap = endX - startX;
+    const turnOffset = Math.min(28, Math.max(16, horizontalGap * 0.14));
+    const sourceTurnX = startX + turnOffset;
+    const targetTurnX = endX - turnOffset;
+
+    let turnX = startX + horizontalGap / 2;
+    if (sourceEdges.length > 1) {
+      turnX = sourceTurnX;
+    } else if (targetEdges.length > 1) {
+      turnX = targetTurnX;
+    }
 
-    const elbowOffset = Math.max(18, Math.min((endX - startX) / 2, 28));
-    const midX = startX + elbowOffset;
-    const path = `M ${startX} ${startY} L ${midX} ${startY} L ${midX} ${endY} L ${endX} ${endY}`;
+    const path = buildRoundedConnectorPath(startX, startY, endX, endY, turnX);
 
-    bezierEdgesList.push({
+    edgePaths.push({
       ...edge,
       path,
       fromNode,
       toNode,
     });
-  });
+  }
 
-  return bezierEdgesList;
+  return edgePaths;
 });
 
 const graphMetrics = computed(() => {
@@ -317,28 +415,22 @@ function handleNodeMouseLeave() {
   hoveredJobId.value = null;
 }
 
-function isEdgeHighlighted(edge: BezierEdge): boolean {
+function isEdgeHighlighted(edge: RoutedEdge): boolean {
   if (!hoveredJobId.value) {
     return false;
   }
-
-  const hoveredJob = jobsWithLayout.value.find(j => j.id === hoveredJobId.value);
-  if (!hoveredJob) {
-    return false;
-  }
-
-  return edge.from === hoveredJob.name || edge.to === hoveredJob.name;
+  return edge.fromId === hoveredJobId.value || edge.toId === hoveredJobId.value;
 }
 
 const nodesWithIncomingEdge = computed(() => {
-  const set = new Set<string>();
-  for (const edge of edges.value) set.add(edge.to);
+  const set = new Set<number>();
+  for (const edge of routedEdges.value) set.add(edge.toId);
   return set;
 });
 
 const nodesWithOutgoingEdge = computed(() => {
-  const set = new Set<string>();
-  for (const edge of edges.value) set.add(edge.from);
+  const set = new Set<number>();
+  for (const edge of routedEdges.value) set.add(edge.fromId);
   return set;
 });
 
@@ -351,28 +443,6 @@ function getDisplayName(name: string, hasDuration: boolean): string {
   return name.substring(0, maxChars - 3) + '...';
 }
 
-function getEdgeStyle(edge: BezierEdge) {
-  if (!edge.fromNode || !edge.toNode) {
-    return {
-      'stroke': 'var(--color-secondary)',
-      'stroke-width': '2',
-      'opacity': '0.7',
-    };
-  }
-
-  return {
-    'stroke': 'var(--color-secondary-alpha-50)',
-    'stroke-width': '1.75',
-    'stroke-dasharray': 'none',
-    'opacity': '0.6',
-    'transition': 'all 0.2s ease',
-  };
-}
-
-function getEdgeClass(edge: BezierEdge): string {
-  return edge.fromNode && edge.toNode ? 'node-edge' : '';
-}
-
 function computeJobLevels(jobs: ActionsJob[]): Map<string, number> {
   const jobMap = new Map<string, ActionsJob>()
   jobs.forEach(job => {
@@ -492,15 +562,14 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
         }"
       >
         <path
-          v-for="edge in bezierEdges"
+          v-for="edge in routedEdges"
           :key="edge.key"
           :d="edge.path"
           fill="none"
-          v-bind="getEdgeStyle(edge)"
-          :class="[
-            getEdgeClass(edge),
-            { 'highlighted-edge': isEdgeHighlighted(edge) }
-          ]"
+          stroke="var(--color-secondary-alpha-50)"
+          stroke-width="1.75"
+          opacity="0.6"
+          :class="['node-edge', { 'highlighted-edge': isEdgeHighlighted(edge) }]"
         />
 
         <g
@@ -519,14 +588,14 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             :width="nodeWidth"
             :height="nodeHeight"
             rx="10"
-            fill="var(--color-box-body)"
+            fill="var(--workflow-card-fill)"
             stroke="var(--color-secondary-alpha-50)"
             stroke-width="1.25"
             class="job-rect"
           />
 
           <circle
-            v-if="nodesWithIncomingEdge.has(job.name)"
+            v-if="nodesWithIncomingEdge.has(job.id)"
             :cx="job.x"
             :cy="job.y + nodeHeight / 2"
             r="6"
@@ -534,7 +603,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
           />
 
           <circle
-            v-if="nodesWithOutgoingEdge.has(job.name)"
+            v-if="nodesWithOutgoingEdge.has(job.id)"
             :cx="job.x + nodeWidth"
             :cy="job.y + nodeHeight / 2"
             r="6"
@@ -588,6 +657,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 <style scoped>
 .workflow-graph {
   position: relative;
+  --workflow-card-fill: color-mix(in srgb, var(--color-box-body) 84%, black);
 }
 
 .graph-header {
@@ -623,14 +693,8 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   font-weight: var(--font-weight-medium);
 }
 
-.graph-controls {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
 .graph-container {
-  overflow: auto;
+  overflow: hidden;
   padding: 12px 16px 20px;
   border-radius: 10px;
   cursor: grab;

From 5221b3ae9f3ab1c01ad3db561b436c32485ec1f2 Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Mon, 23 Mar 2026 18:58:45 +0100
Subject: [PATCH 10/37] style: update workflow graph colors for dark and light
 themes

---
 web_src/css/themes/theme-gitea-dark.css  | 2 ++
 web_src/css/themes/theme-gitea-light.css | 2 ++
 web_src/js/components/WorkflowGraph.vue  | 5 ++---
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index ad5eec9e8262c..14c5c466aa298 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -194,6 +194,8 @@ gitea-theme-meta-info {
   --color-box-header: #1a1d1f;
   --color-box-body: #14171a;
   --color-box-body-highlight: #1e2226;
+  --color-workflow-box-bg: #1d2226;
+  --color-workflow-box-border: #3b444c;
   --color-text-dark: #f7f8f9;
   --color-text: #d0d5da;
   --color-text-light: #bcc3cb;
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index 049b64f73f6e0..957583f976c3e 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -194,6 +194,8 @@ gitea-theme-meta-info {
   --color-box-header: #f1f3f5;
   --color-box-body: #ffffff;
   --color-box-body-highlight: #ecf5fd;
+  --color-workflow-box-bg: #f8f9fb;
+  --color-workflow-box-border: #d0d7de;
   --color-text-dark: #01050a;
   --color-text: #181c21;
   --color-text-light: #30363b;
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index bfebac01bc3e0..afadbedbf1cd0 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -588,8 +588,8 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             :width="nodeWidth"
             :height="nodeHeight"
             rx="10"
-            fill="var(--workflow-card-fill)"
-            stroke="var(--color-secondary-alpha-50)"
+            fill="var(--color-workflow-box-bg)"
+            stroke="var(--color-workflow-box-border)"
             stroke-width="1.25"
             class="job-rect"
           />
@@ -657,7 +657,6 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 <style scoped>
 .workflow-graph {
   position: relative;
-  --workflow-card-fill: color-mix(in srgb, var(--color-box-body) 84%, black);
 }
 
 .graph-header {

From cb4e07c5217d59e638db62ff95cd7c2ec24c4d34 Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Mon, 23 Mar 2026 19:57:11 +0100
Subject: [PATCH 11/37] fix more comments

---
 web_src/css/themes/theme-gitea-dark.css  | 1 +
 web_src/css/themes/theme-gitea-light.css | 1 +
 web_src/js/components/WorkflowGraph.vue  | 5 ++---
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index 65440ee3fa2f3..7cc563911465c 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -195,6 +195,7 @@ gitea-theme-meta-info {
   --color-box-body: #14171a;
   --color-box-body-highlight: #1e2226;
   --color-workflow-box-bg: #1d2226;
+  --color-workflow-box-bg-hover: #242a2f;
   --color-workflow-box-border: #3b444c;
   --color-text-dark: #f7f8f9;
   --color-text: #d0d5da;
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index 9815a23ee056d..e80b99e7edd57 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -195,6 +195,7 @@ gitea-theme-meta-info {
   --color-box-body: #ffffff;
   --color-box-body-highlight: #ecf5fd;
   --color-workflow-box-bg: #f8f9fb;
+  --color-workflow-box-bg-hover: #eef1f5;
   --color-workflow-box-border: #d0d7de;
   --color-text-dark: #01050a;
   --color-text: #181c21;
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index afadbedbf1cd0..79e7763eac9a9 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -568,7 +568,6 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
           fill="none"
           stroke="var(--color-secondary-alpha-50)"
           stroke-width="1.75"
-          opacity="0.6"
           :class="['node-edge', { 'highlighted-edge': isEdgeHighlighted(edge) }]"
         />
 
@@ -720,7 +719,6 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 
 .highlighted-edge {
   stroke-width: 2.25 !important;
-  opacity: 0.9 !important;
   stroke: color-mix(in srgb, var(--color-primary) 35%, var(--color-secondary)) !important;
 }
 
@@ -731,7 +729,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 }
 
 .job-node-group:hover .job-rect {
-  filter: brightness(1.01);
+  fill: var(--color-workflow-box-bg-hover);
   transform: translateX(1px);
 }
 
@@ -764,6 +762,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 
 .job-rect {
   filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
+  transition: fill 0.2s ease, transform 0.2s ease;
 }
 
 .node-port {

From c5eee525d54cda32348560fee605dd24b5a03cae Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Mon, 23 Mar 2026 20:04:10 +0100
Subject: [PATCH 12/37] fix silverwind

---
 web_src/css/themes/theme-gitea-dark.css  | 2 +-
 web_src/css/themes/theme-gitea-light.css | 2 +-
 web_src/js/components/WorkflowGraph.vue  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index 7cc563911465c..b3b98b4d31a39 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -195,7 +195,7 @@ gitea-theme-meta-info {
   --color-box-body: #14171a;
   --color-box-body-highlight: #1e2226;
   --color-workflow-box-bg: #1d2226;
-  --color-workflow-box-bg-hover: #242a2f;
+  --color-workflow-box-hover-bg: #242a2f;
   --color-workflow-box-border: #3b444c;
   --color-text-dark: #f7f8f9;
   --color-text: #d0d5da;
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index e80b99e7edd57..062a53775a335 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -195,7 +195,7 @@ gitea-theme-meta-info {
   --color-box-body: #ffffff;
   --color-box-body-highlight: #ecf5fd;
   --color-workflow-box-bg: #f8f9fb;
-  --color-workflow-box-bg-hover: #eef1f5;
+  --color-workflow-box-hover-bg: #eef1f5;
   --color-workflow-box-border: #d0d7de;
   --color-text-dark: #01050a;
   --color-text: #181c21;
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 79e7763eac9a9..d9d20e6844811 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -729,7 +729,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 }
 
 .job-node-group:hover .job-rect {
-  fill: var(--color-workflow-box-bg-hover);
+  fill: var(--color-workflow-box-hover-bg);
   transform: translateX(1px);
 }
 

From ebc01302964fc1dd06bdc55e25048a67e84ca5cf Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 24 Mar 2026 08:39:26 +0800
Subject: [PATCH 13/37] fine tune UI

---
 routers/web/devtest/mock_actions.go      | 2 +-
 web_src/js/components/RepoActionView.vue | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/routers/web/devtest/mock_actions.go b/routers/web/devtest/mock_actions.go
index 61239b168d8ea..c70c63e2585e9 100644
--- a/routers/web/devtest/mock_actions.go
+++ b/routers/web/devtest/mock_actions.go
@@ -135,7 +135,7 @@ func MockActionsRunsJobs(ctx *context.Context) {
 	resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
 		ID:       runID*10 + 2,
 		JobID:    "job-102",
-		Name:     "ULTRA LOONG job name 102 that exceeds the limit",
+		Name:     "ULTRA LOOOOOOOOOOOONG job name 102 that exceeds the limit",
 		Status:   actions_model.StatusFailure.String(),
 		CanRerun: false,
 		Duration: "3h",
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 4ced86b523ba6..d915daec610eb 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -236,7 +236,7 @@ async function deleteArtifact(name: string) {
 
 .left-list-header {
   font-size: 12px;
-  color: var(--color-grey);
+  color: var(--color-grey-light);
 }
 
 .job-artifacts-item {
@@ -299,7 +299,6 @@ async function deleteArtifact(name: string) {
 
 .job-brief-item .job-brief-item-left .job-brief-name {
   display: block;
-  width: 70%;
 }
 
 .job-brief-item .job-brief-item-right {

From 3d61a061724cb7c1d9fe4201f958ea0dd9d80bd9 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 24 Mar 2026 08:46:42 +0800
Subject: [PATCH 14/37] remove pollution introduced by #35061

---
 web_src/css/base.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 2c7bd7395a49a..36ff1c36fee68 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -814,9 +814,7 @@ table th[data-sortt-desc] .svg {
 
 .btn,
 .ui.ui.dropdown,
-.flex-text-inline,
-.flex-text-inline > a,
-.flex-text-inline > span {
+.flex-text-inline {
   display: inline-flex;
   align-items: center;
   gap: var(--gap-inline);

From c3b2edb69fddb04f1041b0e8f0f8c53698b2e922 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 24 Mar 2026 08:53:00 +0800
Subject: [PATCH 15/37] job dup test

---
 routers/web/devtest/mock_actions.go | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/routers/web/devtest/mock_actions.go b/routers/web/devtest/mock_actions.go
index c70c63e2585e9..7cd94ab65aaec 100644
--- a/routers/web/devtest/mock_actions.go
+++ b/routers/web/devtest/mock_actions.go
@@ -150,16 +150,17 @@ func MockActionsRunsJobs(ctx *context.Context) {
 		Duration: "2m",
 		Needs:    []string{"job-100"},
 	})
-	resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
-		ID:       runID*10 + 4,
-		JobID:    "job-104",
-		Name:     "job 104",
-		Status:   actions_model.StatusSuccess.String(),
-		CanRerun: false,
-		Duration: "2m",
-		Needs:    []string{"job-103", "job-101", "job-100"},
-	})
-
+	for i := range 10 {
+		resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
+			ID:       runID*1000 + int64(i),
+			JobID:    "job-dup-test-" + strconv.Itoa(i),
+			Name:     "job dup test " + strconv.Itoa(i),
+			Status:   actions_model.StatusSuccess.String(),
+			CanRerun: false,
+			Duration: "2m",
+			Needs:    []string{"job-103", "job-101", "job-100"},
+		})
+	}
 	fillViewRunResponseCurrentJob(ctx, resp)
 	ctx.JSON(http.StatusOK, resp)
 }

From dd307af9ca8c15b2e13b31fc0e76b5929bfa2454 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 24 Mar 2026 09:02:27 +0800
Subject: [PATCH 16/37] add repo id for view run, fix TODO

---
 routers/web/devtest/mock_actions.go            |  1 +
 routers/web/repo/actions/view.go               |  2 ++
 web_src/js/components/ActionRunSummaryView.vue |  1 +
 web_src/js/components/ActionRunView.ts         |  1 +
 web_src/js/components/WorkflowGraph.vue        | 12 ++++++++----
 web_src/js/modules/gitea-actions.ts            |  1 +
 6 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/routers/web/devtest/mock_actions.go b/routers/web/devtest/mock_actions.go
index 7cd94ab65aaec..a580e5ff3884e 100644
--- a/routers/web/devtest/mock_actions.go
+++ b/routers/web/devtest/mock_actions.go
@@ -68,6 +68,7 @@ func MockActionsRunsJobs(ctx *context.Context) {
 	runID := ctx.PathParamInt64("run")
 
 	resp := &actions.ViewResponse{}
+	resp.State.Run.RepoID = 12345
 	resp.State.Run.TitleHTML = `mock run title <a href="/">link</a>`
 	resp.State.Run.Link = setting.AppSubURL + "/devtest/repo-action-view/runs/" + strconv.FormatInt(runID, 10)
 	resp.State.Run.Status = actions_model.StatusRunning.String()
diff --git a/routers/web/repo/actions/view.go b/routers/web/repo/actions/view.go
index 98d86f0bb34fa..075d575acad50 100644
--- a/routers/web/repo/actions/view.go
+++ b/routers/web/repo/actions/view.go
@@ -128,6 +128,7 @@ type ViewResponse struct {
 
 	State struct {
 		Run struct {
+			RepoID            int64         `json:"repo_id"`
 			Link              string        `json:"link"`
 			Title             string        `json:"title"`
 			TitleHTML         template.HTML `json:"titleHTML"`
@@ -251,6 +252,7 @@ func fillViewRunResponseSummary(ctx *context_module.Context, resp *ViewResponse,
 		return
 	}
 
+	resp.State.Run.RepoID = ctx.Repo.Repository.ID
 	// the title for the "run" is from the commit message
 	resp.State.Run.Title = run.Title
 	resp.State.Run.TitleHTML = templates.NewRenderUtils(ctx).RenderCommitMessage(run.Title, ctx.Repo.Repository)
diff --git a/web_src/js/components/ActionRunSummaryView.vue b/web_src/js/components/ActionRunSummaryView.vue
index 2d79a82288eb3..b8cb7d4b56280 100644
--- a/web_src/js/components/ActionRunSummaryView.vue
+++ b/web_src/js/components/ActionRunSummaryView.vue
@@ -43,6 +43,7 @@ onBeforeUnmount(() => {
     </div>
     <WorkflowGraph
       v-if="run.jobs.length > 0"
+      :store="store"
       :jobs="run.jobs"
       :run-link="run.link"
       :workflow-id="run.workflowID"
diff --git a/web_src/js/components/ActionRunView.ts b/web_src/js/components/ActionRunView.ts
index 6ae09a46fecda..9bc183ed2d2fa 100644
--- a/web_src/js/components/ActionRunView.ts
+++ b/web_src/js/components/ActionRunView.ts
@@ -63,6 +63,7 @@ export function createLogLineMessage(line: LogLine, cmd: LogLineCommand | null)
 
 export function createEmptyActionsRun(): ActionsRun {
   return {
+    repoId: 0,
     link: '',
     title: '',
     titleHTML: '',
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index d9d20e6844811..a0c62bfadde82 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -5,6 +5,7 @@ import ActionRunStatus from './ActionRunStatus.vue';
 import {localUserSettings} from "../modules/user-settings.ts";
 import {debounce} from "throttle-debounce";
 import type {ActionsJob, ActionsRunStatus} from '../modules/gitea-actions.ts';
+import type {ActionRunViewStore} from './ActionRunView.ts';
 
 interface JobNode {
   id: number;
@@ -37,6 +38,7 @@ interface StoredState {
 }
 
 const props = defineProps<{
+  store: ActionRunViewStore;
   jobs: ActionsJob[];
   runLink: string;
   workflowId: string;
@@ -54,9 +56,13 @@ const lastMousePos = ref({ x: 0, y: 0 });
 const graphContainer = ref<HTMLElement | null>(null);
 const hoveredJobId = ref<number | null>(null);
 
+const stateKey = () => {
+  return `${props.store.viewData.currentRun.repoId}-${props.workflowId}`;
+}
+
 const loadSavedState = () => {
   const allStates = localUserSettings.getJsonObject<Record<string, StoredState>>(settingKeyStates, {});
-  const saved = allStates[props.workflowId];
+  const saved = allStates[stateKey()];
   if (!saved) return;
   scale.value = saved.scale ?? scale.value;
   translateX.value = saved.translateX ?? translateX.value;
@@ -64,10 +70,8 @@ const loadSavedState = () => {
 }
 
 const saveState = () => {
-  // TODO: different repos might have the same workflowId, but at the moment, we don't have repo id
-  // If overwritten occurs, acceptable, not too bad
   const allStates = localUserSettings.getJsonObject<Record<string, StoredState>>(settingKeyStates, {});
-  allStates[props.workflowId] = {
+  allStates[stateKey()] = {
     scale: scale.value,
     translateX: translateX.value,
     translateY: translateY.value,
diff --git a/web_src/js/modules/gitea-actions.ts b/web_src/js/modules/gitea-actions.ts
index fb8639458e774..96b31e4c9496e 100644
--- a/web_src/js/modules/gitea-actions.ts
+++ b/web_src/js/modules/gitea-actions.ts
@@ -2,6 +2,7 @@
 export type ActionsRunStatus = 'unknown' | 'waiting' | 'running' | 'success' | 'failure' | 'cancelled' | 'skipped' | 'blocked';
 
 export type ActionsRun = {
+  repoId: number,
   link: string,
   title: string,
   titleHTML: string,

From 26d5696127e5e7501e3d46944121e1c1bf58aed2 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 24 Mar 2026 09:52:38 +0800
Subject: [PATCH 17/37] fix typo

---
 routers/web/repo/actions/view.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/routers/web/repo/actions/view.go b/routers/web/repo/actions/view.go
index 075d575acad50..08b46f8bb4de6 100644
--- a/routers/web/repo/actions/view.go
+++ b/routers/web/repo/actions/view.go
@@ -128,7 +128,7 @@ type ViewResponse struct {
 
 	State struct {
 		Run struct {
-			RepoID            int64         `json:"repo_id"`
+			RepoID            int64         `json:"repoId"`
 			Link              string        `json:"link"`
 			Title             string        `json:"title"`
 			TitleHTML         template.HTML `json:"titleHTML"`

From 604a3f2e945e2661d6f92c636680d02fccedbf4d Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Wed, 25 Mar 2026 17:22:45 +0100
Subject: [PATCH 18/37] fixes

---
 web_src/js/components/WorkflowGraph.vue | 179 ++++++++++++++++++------
 1 file changed, 136 insertions(+), 43 deletions(-)

diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index a0c62bfadde82..02eba6cdd1e15 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -55,6 +55,9 @@ const dragStart = ref({ x: 0, y: 0 });
 const lastMousePos = ref({ x: 0, y: 0 });
 const graphContainer = ref<HTMLElement | null>(null);
 const hoveredJobId = ref<number | null>(null);
+const containerViewport = ref({width: 0, height: 0});
+const hasCustomizedView = ref(false);
+let resizeObserver: ResizeObserver | null = null;
 
 const stateKey = () => {
   return `${props.store.viewData.currentRun.repoId}-${props.workflowId}`;
@@ -63,10 +66,12 @@ const stateKey = () => {
 const loadSavedState = () => {
   const allStates = localUserSettings.getJsonObject<Record<string, StoredState>>(settingKeyStates, {});
   const saved = allStates[stateKey()];
-  if (!saved) return;
+  if (!saved) return false;
   scale.value = saved.scale ?? scale.value;
   translateX.value = saved.translateX ?? translateX.value;
   translateY.value = saved.translateY ?? translateY.value;
+  hasCustomizedView.value = true;
+  return true;
 }
 
 const saveState = () => {
@@ -86,7 +91,6 @@ const saveState = () => {
   localUserSettings.setJsonObject(settingKeyStates, limitedStates);
 };
 
-loadSavedState();
 watch([translateX, translateY, scale], debounce(500, saveState))
 
 const nodeWidth = computed(() => {
@@ -107,6 +111,21 @@ const graphHeight = computed(() => {
   return maxY + margin * 2;
 });
 
+const containerPaddingX = 32;
+const containerPaddingY = 32;
+
+const viewportWidth = computed(() => Math.max(containerViewport.value.width - containerPaddingX, 0));
+const viewportHeight = computed(() => Math.max(containerViewport.value.height - containerPaddingY, 0));
+
+const fittedScale = computed(() => {
+  if (!viewportWidth.value || !viewportHeight.value) return 1;
+  return Math.min(
+    1,
+    viewportWidth.value / graphWidth.value,
+    viewportHeight.value / graphHeight.value,
+  );
+});
+
 const jobsWithLayout = computed<JobNode[]>(() => {
   try {
     const levels = computeJobLevels(props.jobs);
@@ -350,19 +369,62 @@ const graphMetrics = computed(() => {
 const nodeHeight = 48;
 const verticalSpacing = 88;
 const margin = 40;
+const minScale = 0.1;
+const maxScale = 3;
+
+function updateContainerViewport() {
+  if (!graphContainer.value) return;
+  containerViewport.value = {
+    width: graphContainer.value.clientWidth,
+    height: graphContainer.value.clientHeight,
+  };
+}
+
+function fitGraphToViewport() {
+  const nextScale = fittedScale.value;
+  scale.value = nextScale;
+  translateX.value = Math.max((viewportWidth.value - graphWidth.value * nextScale) / 2, 0);
+  translateY.value = Math.max((viewportHeight.value - graphHeight.value * nextScale) / 2, 0);
+}
+
+function clampScale(nextScale: number): number {
+  return Math.min(Math.max(nextScale, minScale), maxScale);
+}
+
+function zoomTo(nextScale: number, clientX?: number, clientY?: number) {
+  const clampedScale = clampScale(nextScale);
+  const container = graphContainer.value;
+  if (!container) {
+    scale.value = clampedScale;
+    return;
+  }
+
+  const rect = container.getBoundingClientRect();
+  const fallbackClientX = rect.left + containerPaddingX / 2;
+  const fallbackClientY = rect.top + containerPaddingY / 2;
+  const pointerX = (clientX ?? fallbackClientX) - rect.left - containerPaddingX / 2;
+  const pointerY = (clientY ?? fallbackClientY) - rect.top - containerPaddingY / 2;
+  const contentX = (pointerX - translateX.value) / scale.value;
+  const contentY = (pointerY - translateY.value) / scale.value;
+
+  scale.value = clampedScale;
+  translateX.value = pointerX - contentX * clampedScale;
+  translateY.value = pointerY - contentY * clampedScale;
+}
 
 function zoomIn() {
-  scale.value = Math.min(scale.value * 1.2, 3);
+  hasCustomizedView.value = true;
+  zoomTo(scale.value * 1.2);
 }
 
 function zoomOut() {
-  scale.value = Math.max(scale.value / 1.2, 0.5);
+  hasCustomizedView.value = true;
+  zoomTo(scale.value / 1.2);
 }
 
 function resetView() {
-  scale.value = 1;
-  translateX.value = 0;
-  translateY.value = 0;
+  hasCustomizedView.value = false;
+  fitGraphToViewport();
 }
 
 function handleMouseDown(e: MouseEvent) {
@@ -389,6 +451,7 @@ function handleMouseMoveOnDocument(event: MouseEvent) {
   const dx = event.clientX - lastMousePos.value.x;
   const dy = event.clientY - lastMousePos.value.y;
 
+  hasCustomizedView.value = true;
   translateX.value += dx;
   translateY.value += dy;
 
@@ -402,15 +465,39 @@ function handleMouseUpOnDocument() {
 }
 
 onMounted(() => {
+  const hadSavedState = loadSavedState();
+  updateContainerViewport();
+  if (!hadSavedState) {
+    fitGraphToViewport();
+  }
+
+  resizeObserver = new ResizeObserver(() => {
+    updateContainerViewport();
+    if (!hasCustomizedView.value) {
+      fitGraphToViewport();
+    }
+  });
+  if (graphContainer.value) {
+    resizeObserver.observe(graphContainer.value);
+  }
+
   document.addEventListener('mousemove', handleMouseMoveOnDocument);
   document.addEventListener('mouseup', handleMouseUpOnDocument);
 });
 
 onUnmounted(() => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
   document.removeEventListener('mousemove', handleMouseMoveOnDocument);
   document.removeEventListener('mouseup', handleMouseUpOnDocument);
 });
 
+watch([graphWidth, graphHeight], () => {
+  if (!hasCustomizedView.value) {
+    fitGraphToViewport();
+  }
+});
+
 function handleNodeMouseEnter(job: JobNode) {
   hoveredJobId.value = job.id;
 }
@@ -419,6 +506,13 @@ function handleNodeMouseLeave() {
   hoveredJobId.value = null;
 }
 
+function handleWheel(event: WheelEvent) {
+  event.preventDefault();
+  hasCustomizedView.value = true;
+  const zoomFactor = Math.exp(-event.deltaY * 0.0015);
+  zoomTo(scale.value * zoomFactor, event.clientX, event.clientY);
+}
+
 function isEdgeHighlighted(edge: RoutedEdge): boolean {
   if (!hoveredJobId.value) {
     return false;
@@ -438,14 +532,6 @@ const nodesWithOutgoingEdge = computed(() => {
   return set;
 });
 
-function getDisplayName(name: string, hasDuration: boolean): string {
-  const maxChars = hasDuration ? 18 : 22;
-  if (name.length <= maxChars) {
-    return name;
-  }
-
-  return name.substring(0, maxChars - 3) + '...';
-}
 
 function computeJobLevels(jobs: ActionsJob[]): Map<string, number> {
   const jobMap = new Map<string, ActionsJob>()
@@ -554,6 +640,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
       class="graph-container"
       ref="graphContainer"
       @mousedown="handleMouseDown"
+      @wheel.prevent="handleWheel"
       :class="{ 'dragging': isDragging }"
     >
       <svg
@@ -625,31 +712,20 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             </div>
           </foreignObject>
 
-          <text
-            :x="job.x + 40"
-            :y="job.y + nodeHeight / 2 + 1"
-            :fill="'var(--color-text)'"
-            font-size="11"
-            font-weight="600"
-            text-anchor="start"
-            dominant-baseline="middle"
-            class="job-name"
-          >
-            {{ getDisplayName(job.name, Boolean(job.duration || job.status === 'success' || job.status === 'failure')) }}
-          </text>
-
-          <text
-            v-if="job.duration || (job.status === 'success' || job.status === 'failure')"
-            :x="job.x + nodeWidth - 14"
-            :y="job.y + nodeHeight / 2 + 1"
-            :fill="'var(--color-text-light-2)'"
-            font-size="8.5"
-            text-anchor="end"
-            dominant-baseline="middle"
-            class="job-duration"
+          <foreignObject
+            :x="job.x + 36"
+            :y="job.y"
+            :width="nodeWidth - 40"
+            :height="nodeHeight"
           >
-            {{ job.duration }}
-          </text>
+            <div xmlns="http://www.w3.org/1999/xhtml" class="job-text-wrap">
+              <span class="job-name">{{ job.name }}</span>
+              <span
+                v-if="job.duration || job.status === 'success' || job.status === 'failure'"
+                class="job-duration"
+              >{{ job.duration }}</span>
+            </div>
+          </foreignObject>
 
         </g>
       </svg>
@@ -701,7 +777,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   border-radius: 10px;
   cursor: grab;
   min-height: 300px;
-  max-height: 600px;
+  max-height: 70vh;
   position: relative;
   background: var(--color-body);
 }
@@ -712,6 +788,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 
 .graph-svg {
   display: block;
+  max-width: none;
   will-change: transform;
 }
 
@@ -729,7 +806,6 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 .job-node-group {
   cursor: pointer;
   transition: all 0.2s ease;
-  --node-width: v-bind(nodeWidth + "px");
 }
 
 .job-node-group:hover .job-rect {
@@ -737,16 +813,33 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   transform: translateX(1px);
 }
 
+.job-text-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  padding-right: 8px;
+}
+
 .job-name {
-  max-width: calc(var(--node-width, 150px) - 92px);
-  text-overflow: ellipsis;
+  flex: 1;
   overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-text);
   user-select: none;
   pointer-events: none;
 }
 
 .job-duration {
+  font-size: 11px;
+  color: var(--color-text-light-2);
+  white-space: nowrap;
+  flex-shrink: 0;
   user-select: none;
   pointer-events: none;
 }

From 8bbfdf63221f635901ace6dca6a0e5068eaf42f6 Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Wed, 25 Mar 2026 19:40:33 +0100
Subject: [PATCH 19/37] fixes again

---
 web_src/js/components/WorkflowGraph.vue | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 02eba6cdd1e15..78e6b740a1f77 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -471,13 +471,13 @@ onMounted(() => {
     fitGraphToViewport();
   }
 
-  resizeObserver = new ResizeObserver(() => {
-    updateContainerViewport();
-    if (!hasCustomizedView.value) {
-      fitGraphToViewport();
-    }
-  });
   if (graphContainer.value) {
+    resizeObserver = new ResizeObserver(() => {
+      updateContainerViewport();
+      if (!hasCustomizedView.value) {
+        fitGraphToViewport();
+      }
+    });
     resizeObserver.observe(graphContainer.value);
   }
 
@@ -707,7 +707,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             height="20"
             class="job-status-fo"
           >
-            <div xmlns="http://www.w3.org/1999/xhtml" class="job-status-icon-wrap">
+            <div class="job-status-icon-wrap">
               <ActionRunStatus :status="job.status"/>
             </div>
           </foreignObject>
@@ -718,7 +718,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             :width="nodeWidth - 40"
             :height="nodeHeight"
           >
-            <div xmlns="http://www.w3.org/1999/xhtml" class="job-text-wrap">
+            <div class="job-text-wrap">
               <span class="job-name">{{ job.name }}</span>
               <span
                 v-if="job.duration || job.status === 'success' || job.status === 'failure'"
@@ -788,7 +788,6 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 
 .graph-svg {
   display: block;
-  max-width: none;
   will-change: transform;
 }
 
@@ -829,7 +828,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 11px;
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
   color: var(--color-text);
   user-select: none;
   pointer-events: none;
@@ -864,7 +863,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 
 .node-port {
   fill: var(--color-box-body);
-  stroke: var(--color-secondary-alpha-90);
+  stroke: var(--color-workflow-box-border);
   stroke-width: 1.5;
   pointer-events: none;
 }

From a6c7ecb143d9351ebbc200481e81930139acbade Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Wed, 25 Mar 2026 20:10:49 +0100
Subject: [PATCH 20/37] remove zoom and cleanup old stuff

---
 web_src/js/components/WorkflowGraph.vue | 79 +++----------------------
 1 file changed, 9 insertions(+), 70 deletions(-)

diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 78e6b740a1f77..3deeec5b3b7da 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -3,6 +3,7 @@ import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
 import {SvgIcon} from '../svg.ts';
 import ActionRunStatus from './ActionRunStatus.vue';
 import {localUserSettings} from "../modules/user-settings.ts";
+import {isPlainClick} from '../utils/dom.ts';
 import {debounce} from "throttle-debounce";
 import type {ActionsJob, ActionsRunStatus} from '../modules/gitea-actions.ts';
 import type {ActionRunViewStore} from './ActionRunView.ts';
@@ -51,13 +52,9 @@ const scale = ref(1);
 const translateX = ref(0);
 const translateY = ref(0);
 const isDragging = ref(false);
-const dragStart = ref({ x: 0, y: 0 });
 const lastMousePos = ref({ x: 0, y: 0 });
 const graphContainer = ref<HTMLElement | null>(null);
 const hoveredJobId = ref<number | null>(null);
-const containerViewport = ref({width: 0, height: 0});
-const hasCustomizedView = ref(false);
-let resizeObserver: ResizeObserver | null = null;
 
 const stateKey = () => {
   return `${props.store.viewData.currentRun.repoId}-${props.workflowId}`;
@@ -66,12 +63,10 @@ const stateKey = () => {
 const loadSavedState = () => {
   const allStates = localUserSettings.getJsonObject<Record<string, StoredState>>(settingKeyStates, {});
   const saved = allStates[stateKey()];
-  if (!saved) return false;
+  if (!saved) return;
   scale.value = saved.scale ?? scale.value;
   translateX.value = saved.translateX ?? translateX.value;
   translateY.value = saved.translateY ?? translateY.value;
-  hasCustomizedView.value = true;
-  return true;
 }
 
 const saveState = () => {
@@ -114,18 +109,6 @@ const graphHeight = computed(() => {
 const containerPaddingX = 32;
 const containerPaddingY = 32;
 
-const viewportWidth = computed(() => Math.max(containerViewport.value.width - containerPaddingX, 0));
-const viewportHeight = computed(() => Math.max(containerViewport.value.height - containerPaddingY, 0));
-
-const fittedScale = computed(() => {
-  if (!viewportWidth.value || !viewportHeight.value) return 1;
-  return Math.min(
-    1,
-    viewportWidth.value / graphWidth.value,
-    viewportHeight.value / graphHeight.value,
-  );
-});
-
 const jobsWithLayout = computed<JobNode[]>(() => {
   try {
     const levels = computeJobLevels(props.jobs);
@@ -372,21 +355,6 @@ const margin = 40;
 const minScale = 0.1;
 const maxScale = 3;
 
-function updateContainerViewport() {
-  if (!graphContainer.value) return;
-  containerViewport.value = {
-    width: graphContainer.value.clientWidth,
-    height: graphContainer.value.clientHeight,
-  };
-}
-
-function fitGraphToViewport() {
-  const nextScale = fittedScale.value;
-  scale.value = nextScale;
-  translateX.value = Math.max((viewportWidth.value - graphWidth.value * nextScale) / 2, 0);
-  translateY.value = Math.max((viewportHeight.value - graphHeight.value * nextScale) / 2, 0);
-}
-
 function clampScale(nextScale: number): number {
   return Math.min(Math.max(nextScale, minScale), maxScale);
 }
@@ -413,34 +381,29 @@ function zoomTo(nextScale: number, clientX?: number, clientY?: number) {
 }
 
 function zoomIn() {
-  hasCustomizedView.value = true;
   zoomTo(scale.value * 1.2);
 }
 
 function zoomOut() {
-  hasCustomizedView.value = true;
   zoomTo(scale.value / 1.2);
 }
 
 function resetView() {
-  hasCustomizedView.value = false;
-  fitGraphToViewport();
+  scale.value = 1;
+  translateX.value = 0;
+  translateY.value = 0;
 }
 
 function handleMouseDown(e: MouseEvent) {
-  if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return; // only left mouse button can drag
+  if (!isPlainClick(e)) return;
   const target = e.target as Element;
-  // don't start the drag if the click is on an interactive element (e.g.: link, button) or text element
+  // don't start drag on interactive/text elements inside the SVG
   const interactive = target.closest('div, p, a, span, button, input, text, .job-node-group');
   if (interactive?.closest('svg')) return;
 
   e.preventDefault();
 
   isDragging.value = true;
-  dragStart.value = {
-    x: e.clientX - translateX.value,
-    y: e.clientY - translateY.value,
-  };
   lastMousePos.value = { x: e.clientX, y: e.clientY };
   graphContainer.value!.style.cursor = 'grabbing';
 }
@@ -451,7 +414,6 @@ function handleMouseMoveOnDocument(event: MouseEvent) {
   const dx = event.clientX - lastMousePos.value.x;
   const dy = event.clientY - lastMousePos.value.y;
 
-  hasCustomizedView.value = true;
   translateX.value += dx;
   translateY.value += dy;
 
@@ -465,39 +427,17 @@ function handleMouseUpOnDocument() {
 }
 
 onMounted(() => {
-  const hadSavedState = loadSavedState();
-  updateContainerViewport();
-  if (!hadSavedState) {
-    fitGraphToViewport();
-  }
-
-  if (graphContainer.value) {
-    resizeObserver = new ResizeObserver(() => {
-      updateContainerViewport();
-      if (!hasCustomizedView.value) {
-        fitGraphToViewport();
-      }
-    });
-    resizeObserver.observe(graphContainer.value);
-  }
+  loadSavedState();
 
   document.addEventListener('mousemove', handleMouseMoveOnDocument);
   document.addEventListener('mouseup', handleMouseUpOnDocument);
 });
 
 onUnmounted(() => {
-  resizeObserver?.disconnect();
-  resizeObserver = null;
   document.removeEventListener('mousemove', handleMouseMoveOnDocument);
   document.removeEventListener('mouseup', handleMouseUpOnDocument);
 });
 
-watch([graphWidth, graphHeight], () => {
-  if (!hasCustomizedView.value) {
-    fitGraphToViewport();
-  }
-});
-
 function handleNodeMouseEnter(job: JobNode) {
   hoveredJobId.value = job.id;
 }
@@ -508,7 +448,6 @@ function handleNodeMouseLeave() {
 
 function handleWheel(event: WheelEvent) {
   event.preventDefault();
-  hasCustomizedView.value = true;
   const zoomFactor = Math.exp(-event.deltaY * 0.0015);
   zoomTo(scale.value * zoomFactor, event.clientX, event.clientY);
 }
@@ -619,7 +558,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
       <h4 class="graph-title">Workflow Dependencies</h4>
       <div class="graph-stats">
         {{ jobs.length }} jobs • {{ edges.length }} dependencies
-        <span v-if="graphMetrics" class="graph-metrics">
+        <span class="graph-metrics">
           • {{ graphMetrics.successRate }} success
         </span>
       </div>

From f24eba3666ef475cd5df7bdb3003ca063a8543f6 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 26 Mar 2026 00:14:42 +0100
Subject: [PATCH 21/37] Fix action run view style regressions from #36883

- Fix `.left-list-header` unreadable on dark theme by using
  `--color-text-light-2` instead of `--color-grey`
- Fix `.graph-metrics` bullet inheriting blue color
- Improve summary block layout with horizontal flexbox
- Add dot separator between status and duration

Co-Authored-By: Claude (claude-opus-4-6) <noreply@anthropic.com>
---
 .../js/components/ActionRunSummaryView.vue    | 21 ++++++++++++++-----
 web_src/js/components/RepoActionView.vue      |  4 ++--
 web_src/js/components/WorkflowGraph.vue       |  7 ++++---
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/web_src/js/components/ActionRunSummaryView.vue b/web_src/js/components/ActionRunSummaryView.vue
index b8cb7d4b56280..9071ce3365f03 100644
--- a/web_src/js/components/ActionRunSummaryView.vue
+++ b/web_src/js/components/ActionRunSummaryView.vue
@@ -32,13 +32,11 @@ onBeforeUnmount(() => {
   <div>
     <div class="action-run-summary-block">
       <p class="action-run-summary-trigger">
-        {{ locale.triggeredVia.replace('%s', run.triggerEvent) }}
-        &nbsp;•&nbsp;<relative-time :datetime="runTriggeredAtIso" prefix=" "/>
+        {{ locale.triggeredVia.replace('%s', run.triggerEvent) }}&nbsp;•&nbsp;<relative-time :datetime="runTriggeredAtIso"/>
       </p>
       <p class="tw-mb-0">
         <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="16"/>
-        <span class="tw-ml-2">{{ locale.status[run.status] }}</span>
-        <span class="tw-ml-3">{{ locale.totalDuration }} {{ run.duration || '–' }}</span>
+        <span class="tw-ml-2">{{ locale.status[run.status] }}</span>&nbsp;•&nbsp;<span>{{ locale.totalDuration }} {{ run.duration || '–' }}</span>
       </p>
     </div>
     <WorkflowGraph
@@ -53,12 +51,25 @@ onBeforeUnmount(() => {
 </template>
 <style scoped>
 .action-run-summary-block {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   padding: 12px;
   border-bottom: 1px solid var(--color-secondary);
 }
 
 .action-run-summary-trigger {
-  margin-bottom: 6px;
+  margin-bottom: 0;
   color: var(--color-text-light-2);
 }
+
+@media (max-width: 767.98px) {
+  .action-run-summary-block {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .action-run-summary-trigger {
+    margin-bottom: 6px;
+  }
+}
 </style>
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index d915daec610eb..b5951c2238735 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -235,8 +235,8 @@ async function deleteArtifact(name: string) {
 }
 
 .left-list-header {
-  font-size: 12px;
-  color: var(--color-grey-light);
+  font-size: 13px;
+  color: var(--color-text-light-2);
 }
 
 .job-artifacts-item {
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 3deeec5b3b7da..264a1a0323cb6 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -558,9 +558,9 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
       <h4 class="graph-title">Workflow Dependencies</h4>
       <div class="graph-stats">
         {{ jobs.length }} jobs • {{ edges.length }} dependencies
-        <span class="graph-metrics">
-          • {{ graphMetrics.successRate }} success
-        </span>
+        <template v-if="graphMetrics">
+          • <span class="graph-metrics">{{ graphMetrics.successRate }} success</span>
+        </template>
       </div>
       <div class="flex-text-block">
         <button @click="zoomIn" class="ui compact tiny icon button" title="Zoom in">
@@ -683,6 +683,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   align-items: center;
   padding: 8px 14px;
   background: var(--color-box-header);
+  border-bottom: 1px solid var(--color-secondary);
   gap: 20px;
   flex-wrap: wrap;
 }

From 0e0114ed72e4dbcd7c9feef3a7ffa3c28f80c242 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 26 Mar 2026 00:26:53 +0100
Subject: [PATCH 22/37] Fix relative-time prefix and graph-stats flex layout

- Add prefix="" to <relative-time> to prevent default "on" prefix
- Wrap graph metrics bullet in <span> to keep it as single flex item

Co-Authored-By: Claude (claude-opus-4-6) <noreply@anthropic.com>
---
 web_src/js/components/ActionRunSummaryView.vue | 2 +-
 web_src/js/components/WorkflowGraph.vue        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/js/components/ActionRunSummaryView.vue b/web_src/js/components/ActionRunSummaryView.vue
index 9071ce3365f03..b49203da3fa4d 100644
--- a/web_src/js/components/ActionRunSummaryView.vue
+++ b/web_src/js/components/ActionRunSummaryView.vue
@@ -32,7 +32,7 @@ onBeforeUnmount(() => {
   <div>
     <div class="action-run-summary-block">
       <p class="action-run-summary-trigger">
-        {{ locale.triggeredVia.replace('%s', run.triggerEvent) }}&nbsp;•&nbsp;<relative-time :datetime="runTriggeredAtIso"/>
+        {{ locale.triggeredVia.replace('%s', run.triggerEvent) }}&nbsp;•&nbsp;<relative-time :datetime="runTriggeredAtIso" prefix=""/>
       </p>
       <p class="tw-mb-0">
         <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="16"/>
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 264a1a0323cb6..39ecae35b4e10 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -558,9 +558,9 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
       <h4 class="graph-title">Workflow Dependencies</h4>
       <div class="graph-stats">
         {{ jobs.length }} jobs • {{ edges.length }} dependencies
-        <template v-if="graphMetrics">
+        <span v-if="graphMetrics">
           • <span class="graph-metrics">{{ graphMetrics.successRate }} success</span>
-        </template>
+        </span>
       </div>
       <div class="flex-text-block">
         <button @click="zoomIn" class="ui compact tiny icon button" title="Zoom in">

From dccbeeac37c90fb8b9a23607aebb43a5d56d16c6 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 26 Mar 2026 00:29:31 +0100
Subject: [PATCH 23/37] Use gap instead of margin-bottom in
 action-run-summary-block

Co-Authored-By: Claude (claude-opus-4-6) <noreply@anthropic.com>
---
 web_src/js/components/ActionRunSummaryView.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/web_src/js/components/ActionRunSummaryView.vue b/web_src/js/components/ActionRunSummaryView.vue
index b49203da3fa4d..0ead70a78e2ff 100644
--- a/web_src/js/components/ActionRunSummaryView.vue
+++ b/web_src/js/components/ActionRunSummaryView.vue
@@ -54,6 +54,7 @@ onBeforeUnmount(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 6px;
   padding: 12px;
   border-bottom: 1px solid var(--color-secondary);
 }
@@ -68,8 +69,5 @@ onBeforeUnmount(() => {
     flex-direction: column;
     align-items: flex-start;
   }
-  .action-run-summary-trigger {
-    margin-bottom: 6px;
-  }
 }
 </style>

From 41b49b6e1f921325aaf5bcc52c8423dc80f0b00b Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Thu, 26 Mar 2026 16:56:00 +0100
Subject: [PATCH 24/37] fixes

---
 web_src/js/components/WorkflowGraph.vue | 27 ++++---------------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 39ecae35b4e10..ad79a88470a9f 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -106,8 +106,6 @@ const graphHeight = computed(() => {
   return maxY + margin * 2;
 });
 
-const containerPaddingX = 32;
-const containerPaddingY = 32;
 
 const jobsWithLayout = computed<JobNode[]>(() => {
   try {
@@ -359,25 +357,8 @@ function clampScale(nextScale: number): number {
   return Math.min(Math.max(nextScale, minScale), maxScale);
 }
 
-function zoomTo(nextScale: number, clientX?: number, clientY?: number) {
-  const clampedScale = clampScale(nextScale);
-  const container = graphContainer.value;
-  if (!container) {
-    scale.value = clampedScale;
-    return;
-  }
-
-  const rect = container.getBoundingClientRect();
-  const fallbackClientX = rect.left + containerPaddingX / 2;
-  const fallbackClientY = rect.top + containerPaddingY / 2;
-  const pointerX = (clientX ?? fallbackClientX) - rect.left - containerPaddingX / 2;
-  const pointerY = (clientY ?? fallbackClientY) - rect.top - containerPaddingY / 2;
-  const contentX = (pointerX - translateX.value) / scale.value;
-  const contentY = (pointerY - translateY.value) / scale.value;
-
-  scale.value = clampedScale;
-  translateX.value = pointerX - contentX * clampedScale;
-  translateY.value = pointerY - contentY * clampedScale;
+function zoomTo(nextScale: number) {
+  scale.value = clampScale(nextScale);
 }
 
 function zoomIn() {
@@ -449,7 +430,7 @@ function handleNodeMouseLeave() {
 function handleWheel(event: WheelEvent) {
   event.preventDefault();
   const zoomFactor = Math.exp(-event.deltaY * 0.0015);
-  zoomTo(scale.value * zoomFactor, event.clientX, event.clientY);
+  zoomTo(scale.value * zoomFactor);
 }
 
 function isEdgeHighlighted(edge: RoutedEdge): boolean {
@@ -739,7 +720,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 
 .highlighted-edge {
   stroke-width: 2.25 !important;
-  stroke: color-mix(in srgb, var(--color-primary) 35%, var(--color-secondary)) !important;
+  stroke: var(--color-workflow-box-border) !important;
 }
 
 .job-node-group {

From d25b6ce7bea766534cccb0e0943dab29b1a6f2f8 Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Fri, 27 Mar 2026 16:24:16 +0100
Subject: [PATCH 25/37] remove zoom

---
 web_src/js/components/WorkflowGraph.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index ad79a88470a9f..39d2c04616043 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -427,12 +427,6 @@ function handleNodeMouseLeave() {
   hoveredJobId.value = null;
 }
 
-function handleWheel(event: WheelEvent) {
-  event.preventDefault();
-  const zoomFactor = Math.exp(-event.deltaY * 0.0015);
-  zoomTo(scale.value * zoomFactor);
-}
-
 function isEdgeHighlighted(edge: RoutedEdge): boolean {
   if (!hoveredJobId.value) {
     return false;
@@ -560,7 +554,6 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
       class="graph-container"
       ref="graphContainer"
       @mousedown="handleMouseDown"
-      @wheel.prevent="handleWheel"
       :class="{ 'dragging': isDragging }"
     >
       <svg

From f4b2dc8bd30981e8f572a0d0a854dc55f15522fc Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Fri, 27 Mar 2026 17:24:43 +0100
Subject: [PATCH 26/37] fix viewports

---
 .../js/components/ActionRunSummaryView.vue    | 14 ++++-
 web_src/js/components/RepoActionView.vue      | 50 +++++++++++++++++-
 web_src/js/components/WorkflowGraph.vue       | 52 +++++++++++--------
 web_src/js/features/repo-actions.ts           |  8 ++-
 4 files changed, 98 insertions(+), 26 deletions(-)

diff --git a/web_src/js/components/ActionRunSummaryView.vue b/web_src/js/components/ActionRunSummaryView.vue
index 0ead70a78e2ff..e6ea947e03a71 100644
--- a/web_src/js/components/ActionRunSummaryView.vue
+++ b/web_src/js/components/ActionRunSummaryView.vue
@@ -29,7 +29,7 @@ onBeforeUnmount(() => {
 });
 </script>
 <template>
-  <div>
+  <div class="action-run-summary-view">
     <div class="action-run-summary-block">
       <p class="action-run-summary-trigger">
         {{ locale.triggeredVia.replace('%s', run.triggerEvent) }}&nbsp;•&nbsp;<relative-time :datetime="runTriggeredAtIso" prefix=""/>
@@ -50,6 +50,13 @@ onBeforeUnmount(() => {
   </div>
 </template>
 <style scoped>
+.action-run-summary-view {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 .action-run-summary-block {
   display: flex;
   justify-content: space-between;
@@ -64,6 +71,11 @@ onBeforeUnmount(() => {
   color: var(--color-text-light-2);
 }
 
+.workflow-graph-container {
+  flex: 1;
+  min-height: 0;
+}
+
 @media (max-width: 767.98px) {
   .action-run-summary-block {
     flex-direction: column;
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index b5951c2238735..09c6838301871 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -164,6 +164,7 @@ async function deleteArtifact(name: string) {
   padding-bottom: 12px;
   display: flex;
   gap: 12px;
+  min-height: 0;
 }
 
 /* ================ */
@@ -319,7 +320,8 @@ async function deleteArtifact(name: string) {
   border: 1px solid var(--color-console-border);
   border-radius: var(--border-radius);
   background: var(--color-console-bg);
-  align-self: flex-start;
+  align-self: stretch;
+  min-height: 0;
 }
 
 /* begin fomantic button overrides */
@@ -354,3 +356,49 @@ async function deleteArtifact(name: string) {
   }
 }
 </style>
+
+<style> /* eslint-disable-line vue-scoped-css/enforce-style-type */
+body.action-run-summary-page {
+  height: 100vh;
+}
+
+body.action-run-summary-page > .full.height {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  padding-bottom: 0;
+}
+
+body.action-run-summary-page .page-content {
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+body.action-run-summary-page .page-content > *:not(#repo-action-view) {
+  flex-shrink: 0;
+}
+
+body.action-run-summary-page #repo-action-view {
+  flex: 1 1 0;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+body.action-run-summary-page #repo-action-view > .ui.fluid.container {
+  flex: 1 1 0;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+body.action-run-summary-page #repo-action-view .action-view-body {
+  flex: 1;
+  min-height: 0;
+}
+</style>
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 39d2c04616043..2d4da9adb7057 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -2,9 +2,9 @@
 import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
 import {SvgIcon} from '../svg.ts';
 import ActionRunStatus from './ActionRunStatus.vue';
-import {localUserSettings} from "../modules/user-settings.ts";
+import {localUserSettings} from '../modules/user-settings.ts';
 import {isPlainClick} from '../utils/dom.ts';
-import {debounce} from "throttle-debounce";
+import {debounce} from 'throttle-debounce';
 import type {ActionsJob, ActionsRunStatus} from '../modules/gitea-actions.ts';
 import type {ActionRunViewStore} from './ActionRunView.ts';
 
@@ -52,13 +52,11 @@ const scale = ref(1);
 const translateX = ref(0);
 const translateY = ref(0);
 const isDragging = ref(false);
-const lastMousePos = ref({ x: 0, y: 0 });
+const lastMousePos = ref({x: 0, y: 0});
 const graphContainer = ref<HTMLElement | null>(null);
 const hoveredJobId = ref<number | null>(null);
 
-const stateKey = () => {
-  return `${props.store.viewData.currentRun.repoId}-${props.workflowId}`;
-}
+const stateKey = () => `${props.store.viewData.currentRun.repoId}-${props.workflowId}`;
 
 const loadSavedState = () => {
   const allStates = localUserSettings.getJsonObject<Record<string, StoredState>>(settingKeyStates, {});
@@ -67,7 +65,7 @@ const loadSavedState = () => {
   scale.value = saved.scale ?? scale.value;
   translateX.value = saved.translateX ?? translateX.value;
   translateY.value = saved.translateY ?? translateY.value;
-}
+};
 
 const saveState = () => {
   const allStates = localUserSettings.getJsonObject<Record<string, StoredState>>(settingKeyStates, {});
@@ -82,11 +80,10 @@ const saveState = () => {
     .sort(([, a], [, b]) => b.timestamp - a.timestamp)
     .slice(0, maxStoredStates);
 
-  const limitedStates = Object.fromEntries(sortedStates);
-  localUserSettings.setJsonObject(settingKeyStates, limitedStates);
+  localUserSettings.setJsonObject(settingKeyStates, Object.fromEntries(sortedStates));
 };
 
-watch([translateX, translateY, scale], debounce(500, saveState))
+watch([translateX, translateY, scale], debounce(500, saveState));
 
 const nodeWidth = computed(() => {
   const maxNameLength = Math.max(...props.jobs.map(j => j.name.length));
@@ -378,14 +375,13 @@ function resetView() {
 function handleMouseDown(e: MouseEvent) {
   if (!isPlainClick(e)) return;
   const target = e.target as Element;
-  // don't start drag on interactive/text elements inside the SVG
   const interactive = target.closest('div, p, a, span, button, input, text, .job-node-group');
   if (interactive?.closest('svg')) return;
 
   e.preventDefault();
 
   isDragging.value = true;
-  lastMousePos.value = { x: e.clientX, y: e.clientY };
+  lastMousePos.value = {x: e.clientX, y: e.clientY};
   graphContainer.value!.style.cursor = 'grabbing';
 }
 
@@ -398,7 +394,7 @@ function handleMouseMoveOnDocument(event: MouseEvent) {
   translateX.value += dx;
   translateY.value += dy;
 
-  lastMousePos.value = { x: event.clientX, y: event.clientY };
+  lastMousePos.value = {x: event.clientX, y: event.clientY};
 }
 
 function handleMouseUpOnDocument() {
@@ -407,6 +403,12 @@ function handleMouseUpOnDocument() {
   graphContainer.value!.style.cursor = 'grab';
 }
 
+function handleWheel(event: WheelEvent) {
+  event.preventDefault();
+  const zoomFactor = Math.exp(-event.deltaY * 0.0015);
+  zoomTo(scale.value * zoomFactor);
+}
+
 onMounted(() => {
   loadSavedState();
 
@@ -538,13 +540,13 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
         </span>
       </div>
       <div class="flex-text-block">
-        <button @click="zoomIn" class="ui compact tiny icon button" title="Zoom in">
+        <button type="button" @click="zoomIn" class="ui compact tiny icon button" title="Zoom in">
           <SvgIcon name="octicon-zoom-in" :size="12"/>
         </button>
-        <button @click="resetView" class="ui compact tiny icon button" title="Reset view">
+        <button type="button" @click="resetView" class="ui compact tiny icon button" title="Reset view">
           <SvgIcon name="octicon-sync" :size="12"/>
         </button>
-        <button @click="zoomOut" class="ui compact tiny icon button" title="Zoom out">
+        <button type="button" @click="zoomOut" class="ui compact tiny icon button" title="Zoom out">
           <SvgIcon name="octicon-zoom-out" :size="12"/>
         </button>
       </div>
@@ -554,7 +556,8 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
       class="graph-container"
       ref="graphContainer"
       @mousedown="handleMouseDown"
-      :class="{ 'dragging': isDragging }"
+      @wheel.prevent="handleWheel"
+      :class="{dragging: isDragging}"
     >
       <svg
         :width="graphWidth"
@@ -562,7 +565,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
         class="graph-svg"
         :style="{
           transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`,
-          transformOrigin: '0 0'
+          transformOrigin: '0 0',
         }"
       >
         <path
@@ -649,6 +652,10 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 <style scoped>
 .workflow-graph {
   position: relative;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .graph-header {
@@ -660,6 +667,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   border-bottom: 1px solid var(--color-secondary);
   gap: 20px;
   flex-wrap: wrap;
+  flex-shrink: 0;
 }
 
 .graph-title {
@@ -688,12 +696,12 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 .graph-container {
   overflow: hidden;
   padding: 12px 16px 20px;
-  border-radius: 10px;
-  cursor: grab;
-  min-height: 300px;
-  max-height: 70vh;
+  border-radius: 0 0 10px 10px;
+  flex: 1;
+  min-height: 0;
   position: relative;
   background: var(--color-body);
+  cursor: grab;
 }
 
 .graph-container.dragging {
diff --git a/web_src/js/features/repo-actions.ts b/web_src/js/features/repo-actions.ts
index 1467250c1aaa7..e6bbfbe2add99 100644
--- a/web_src/js/features/repo-actions.ts
+++ b/web_src/js/features/repo-actions.ts
@@ -4,15 +4,19 @@ import RepoActionView from '../components/RepoActionView.vue';
 export function initRepositoryActionView() {
   const el = document.querySelector('#repo-action-view');
   if (!el) return;
+  const runId = parseInt(el.getAttribute('data-run-id')!);
+  const jobId = parseInt(el.getAttribute('data-job-id')!);
+  const isSummaryView = !el.getAttribute('data-job-id');
 
   // TODO: the parent element's full height doesn't work well now,
   // but we can not pollute the global style at the moment, only fix the height problem for pages with this component
   const parentFullHeight = document.querySelector<HTMLElement>('body > div.full.height');
   if (parentFullHeight) parentFullHeight.classList.add('tw-pb-0');
+  if (isSummaryView) document.body.classList.add('action-run-summary-page');
 
   const view = createApp(RepoActionView, {
-    runId: parseInt(el.getAttribute('data-run-id')!),
-    jobId: parseInt(el.getAttribute('data-job-id')!),
+    runId,
+    jobId,
     actionsUrl: el.getAttribute('data-actions-url'),
     locale: {
       approve: el.getAttribute('data-locale-approve'),

From 1b844ee60e2bf48268ebdf6da186697f256c79ab Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Fri, 27 Mar 2026 21:46:33 +0100
Subject: [PATCH 27/37] suggestion

---
 web_src/js/components/WorkflowGraph.vue | 31 ++++++++++++++++++-------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 2d4da9adb7057..dc3b0c356b0df 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -58,11 +58,18 @@ const hoveredJobId = ref<number | null>(null);
 
 const stateKey = () => `${props.store.viewData.currentRun.repoId}-${props.workflowId}`;
 
+const minScale = 0.1;
+const maxScale = 1;
+
+function clampScale(nextScale: number): number {
+  return Math.min(Math.max(nextScale, minScale), maxScale);
+}
+
 const loadSavedState = () => {
   const allStates = localUserSettings.getJsonObject<Record<string, StoredState>>(settingKeyStates, {});
   const saved = allStates[stateKey()];
   if (!saved) return;
-  scale.value = saved.scale ?? scale.value;
+  scale.value = clampScale(saved.scale ?? scale.value);
   translateX.value = saved.translateX ?? translateX.value;
   translateY.value = saved.translateY ?? translateY.value;
 };
@@ -347,12 +354,8 @@ const graphMetrics = computed(() => {
 const nodeHeight = 48;
 const verticalSpacing = 88;
 const margin = 40;
-const minScale = 0.1;
-const maxScale = 3;
 
-function clampScale(nextScale: number): number {
-  return Math.min(Math.max(nextScale, minScale), maxScale);
-}
+const canZoomIn = computed(() => scale.value < maxScale - 1e-9);
 
 function zoomTo(nextScale: number) {
   scale.value = clampScale(nextScale);
@@ -404,6 +407,10 @@ function handleMouseUpOnDocument() {
 }
 
 function handleWheel(event: WheelEvent) {
+  // Without a modifier, let the wheel scroll the page
+  if (!event.ctrlKey && !event.metaKey) {
+    return;
+  }
   event.preventDefault();
   const zoomFactor = Math.exp(-event.deltaY * 0.0015);
   zoomTo(scale.value * zoomFactor);
@@ -540,13 +547,19 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
         </span>
       </div>
       <div class="flex-text-block">
-        <button type="button" @click="zoomIn" class="ui compact tiny icon button" title="Zoom in">
+        <button
+          type="button"
+          @click="zoomIn"
+          class="ui compact tiny icon button"
+          :disabled="!canZoomIn"
+          :title="canZoomIn ? 'Zoom in (Ctrl/Cmd + scroll on graph)' : 'Already at 100% zoom'"
+        >
           <SvgIcon name="octicon-zoom-in" :size="12"/>
         </button>
         <button type="button" @click="resetView" class="ui compact tiny icon button" title="Reset view">
           <SvgIcon name="octicon-sync" :size="12"/>
         </button>
-        <button type="button" @click="zoomOut" class="ui compact tiny icon button" title="Zoom out">
+        <button type="button" @click="zoomOut" class="ui compact tiny icon button" title="Zoom out (Ctrl/Cmd + scroll on graph)">
           <SvgIcon name="octicon-zoom-out" :size="12"/>
         </button>
       </div>
@@ -556,7 +569,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
       class="graph-container"
       ref="graphContainer"
       @mousedown="handleMouseDown"
-      @wheel.prevent="handleWheel"
+      @wheel="handleWheel"
       :class="{dragging: isDragging}"
     >
       <svg

From 4d6caca5cd400e40abef4270eb5792e3f416ee9e Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 28 Mar 2026 14:19:22 +0800
Subject: [PATCH 28/37] fix

---
 .../js/components/ActionRunSummaryView.vue    |  6 --
 web_src/js/components/RepoActionView.vue      | 55 ++-----------------
 web_src/js/components/WorkflowGraph.vue       | 15 +----
 web_src/js/features/repo-actions.ts           |  2 -
 4 files changed, 8 insertions(+), 70 deletions(-)

diff --git a/web_src/js/components/ActionRunSummaryView.vue b/web_src/js/components/ActionRunSummaryView.vue
index e6ea947e03a71..6ceb986b36ffa 100644
--- a/web_src/js/components/ActionRunSummaryView.vue
+++ b/web_src/js/components/ActionRunSummaryView.vue
@@ -45,7 +45,6 @@ onBeforeUnmount(() => {
       :jobs="run.jobs"
       :run-link="run.link"
       :workflow-id="run.workflowID"
-      class="workflow-graph-container"
     />
   </div>
 </template>
@@ -71,11 +70,6 @@ onBeforeUnmount(() => {
   color: var(--color-text-light-2);
 }
 
-.workflow-graph-container {
-  flex: 1;
-  min-height: 0;
-}
-
 @media (max-width: 767.98px) {
   .action-run-summary-block {
     flex-direction: column;
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 09c6838301871..a8e94f6e6d87e 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -164,7 +164,6 @@ async function deleteArtifact(name: string) {
   padding-bottom: 12px;
   display: flex;
   gap: 12px;
-  min-height: 0;
 }
 
 /* ================ */
@@ -223,7 +222,11 @@ async function deleteArtifact(name: string) {
   max-width: 400px;
   position: sticky;
   top: 12px;
-  max-height: 100vh;
+
+  /* about 12px top padding + 12px bottom padding + 37px footer height,
+  TODO: need to use JS to calculate the height for better scrolling experience*/
+  max-height: calc(100vh - 62px);
+
   overflow-y: auto;
   background: var(--color-body);
   z-index: 2; /* above .job-info-header */
@@ -320,8 +323,6 @@ async function deleteArtifact(name: string) {
   border: 1px solid var(--color-console-border);
   border-radius: var(--border-radius);
   background: var(--color-console-bg);
-  align-self: stretch;
-  min-height: 0;
 }
 
 /* begin fomantic button overrides */
@@ -356,49 +357,3 @@ async function deleteArtifact(name: string) {
   }
 }
 </style>
-
-<style> /* eslint-disable-line vue-scoped-css/enforce-style-type */
-body.action-run-summary-page {
-  height: 100vh;
-}
-
-body.action-run-summary-page > .full.height {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  padding-bottom: 0;
-}
-
-body.action-run-summary-page .page-content {
-  flex: 1 1 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-body.action-run-summary-page .page-content > *:not(#repo-action-view) {
-  flex-shrink: 0;
-}
-
-body.action-run-summary-page #repo-action-view {
-  flex: 1 1 0;
-  min-height: 0;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-body.action-run-summary-page #repo-action-view > .ui.fluid.container {
-  flex: 1 1 0;
-  min-height: 0;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-body.action-run-summary-page #repo-action-view .action-view-body {
-  flex: 1;
-  min-height: 0;
-}
-</style>
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index dc3b0c356b0df..5903deb8fddd5 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -377,6 +377,8 @@ function resetView() {
 
 function handleMouseDown(e: MouseEvent) {
   if (!isPlainClick(e)) return;
+
+  // don't start drag on interactive/text elements inside the SVG
   const target = e.target as Element;
   const interactive = target.closest('div, p, a, span, button, input, text, .job-node-group');
   if (interactive?.closest('svg')) return;
@@ -663,14 +665,6 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 </template>
 
 <style scoped>
-.workflow-graph {
-  position: relative;
-  height: 100%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
 .graph-header {
   display: flex;
   justify-content: space-between;
@@ -680,7 +674,6 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   border-bottom: 1px solid var(--color-secondary);
   gap: 20px;
   flex-wrap: wrap;
-  flex-shrink: 0;
 }
 
 .graph-title {
@@ -710,11 +703,9 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   overflow: hidden;
   padding: 12px 16px 20px;
   border-radius: 0 0 10px 10px;
-  flex: 1;
-  min-height: 0;
+  cursor: grab;
   position: relative;
   background: var(--color-body);
-  cursor: grab;
 }
 
 .graph-container.dragging {
diff --git a/web_src/js/features/repo-actions.ts b/web_src/js/features/repo-actions.ts
index e6bbfbe2add99..ad233246309fa 100644
--- a/web_src/js/features/repo-actions.ts
+++ b/web_src/js/features/repo-actions.ts
@@ -6,13 +6,11 @@ export function initRepositoryActionView() {
   if (!el) return;
   const runId = parseInt(el.getAttribute('data-run-id')!);
   const jobId = parseInt(el.getAttribute('data-job-id')!);
-  const isSummaryView = !el.getAttribute('data-job-id');
 
   // TODO: the parent element's full height doesn't work well now,
   // but we can not pollute the global style at the moment, only fix the height problem for pages with this component
   const parentFullHeight = document.querySelector<HTMLElement>('body > div.full.height');
   if (parentFullHeight) parentFullHeight.classList.add('tw-pb-0');
-  if (isSummaryView) document.body.classList.add('action-run-summary-page');
 
   const view = createApp(RepoActionView, {
     runId,

From e658c85c00b792aed61053f9e87d587a5a425772 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 28 Mar 2026 14:31:01 +0800
Subject: [PATCH 29/37] fix

---
 routers/web/devtest/mock_actions.go     | 25 +++++++++++++++----------
 web_src/js/components/WorkflowGraph.vue | 24 ++++--------------------
 2 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/routers/web/devtest/mock_actions.go b/routers/web/devtest/mock_actions.go
index a580e5ff3884e..0fb2a358243c0 100644
--- a/routers/web/devtest/mock_actions.go
+++ b/routers/web/devtest/mock_actions.go
@@ -151,17 +151,22 @@ func MockActionsRunsJobs(ctx *context.Context) {
 		Duration: "2m",
 		Needs:    []string{"job-100"},
 	})
-	for i := range 10 {
-		resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
-			ID:       runID*1000 + int64(i),
-			JobID:    "job-dup-test-" + strconv.Itoa(i),
-			Name:     "job dup test " + strconv.Itoa(i),
-			Status:   actions_model.StatusSuccess.String(),
-			CanRerun: false,
-			Duration: "2m",
-			Needs:    []string{"job-103", "job-101", "job-100"},
-		})
+
+	// add more jobs to a run for UI testing
+	if resp.State.Run.CanCancel {
+		for i := range 10 {
+			resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
+				ID:       runID*1000 + int64(i),
+				JobID:    "job-dup-test-" + strconv.Itoa(i),
+				Name:     "job dup test " + strconv.Itoa(i),
+				Status:   actions_model.StatusSuccess.String(),
+				CanRerun: false,
+				Duration: "2m",
+				Needs:    []string{"job-103", "job-101", "job-100"},
+			})
+		}
 	}
+
 	fillViewRunResponseCurrentJob(ctx, resp)
 	ctx.JSON(http.StatusOK, resp)
 }
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 5903deb8fddd5..b6f270a7e78e1 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -58,11 +58,11 @@ const hoveredJobId = ref<number | null>(null);
 
 const stateKey = () => `${props.store.viewData.currentRun.repoId}-${props.workflowId}`;
 
-const minScale = 0.1;
+const minScale = 0.3;
 const maxScale = 1;
 
 function clampScale(nextScale: number): number {
-  return Math.min(Math.max(nextScale, minScale), maxScale);
+  return Math.min(Math.max(Math.round(nextScale * 100) / 100, minScale), maxScale);
 }
 
 const loadSavedState = () => {
@@ -355,7 +355,7 @@ const nodeHeight = 48;
 const verticalSpacing = 88;
 const margin = 40;
 
-const canZoomIn = computed(() => scale.value < maxScale - 1e-9);
+const canZoomIn = computed(() => scale.value < maxScale);
 
 function zoomTo(nextScale: number) {
   scale.value = clampScale(nextScale);
@@ -672,7 +672,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   padding: 8px 14px;
   background: var(--color-box-header);
   border-bottom: 1px solid var(--color-secondary);
-  gap: 20px;
+  gap: var(--gap-block);
   flex-wrap: wrap;
 }
 
@@ -797,20 +797,4 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 .node-edge {
   transition: stroke-width 0.2s ease, opacity 0.2s ease;
 }
-
-@media (max-width: 768px) {
-  .graph-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-  }
-
-  .graph-stats {
-    font-size: 12px;
-  }
-
-  .workflow-graph {
-    padding: 15px;
-  }
-}
 </style>

From 158c075be74e0b0710322766805240d3952c8528 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 28 Mar 2026 14:32:39 +0800
Subject: [PATCH 30/37] fix double scroll bars

---
 web_src/js/components/RepoActionView.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index a8e94f6e6d87e..3637763b90e95 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -235,6 +235,7 @@ async function deleteArtifact(name: string) {
 @media (max-width: 767.98px) {
   .action-view-left {
     position: static; /* can not sticky because multiple jobs would overlap into right view */
+    max-height: unset;
   }
 }
 

From bd789158b675a64478a8e540a1d027059031b495 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 28 Mar 2026 15:08:35 +0800
Subject: [PATCH 31/37] fix hover color and reduce palette

---
 web_src/css/themes/theme-gitea-dark.css  |  5 +----
 web_src/css/themes/theme-gitea-light.css |  5 +----
 web_src/js/components/WorkflowGraph.vue  | 18 +++++++-----------
 3 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index 26f904486b3f6..d8416ae8113bc 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -195,9 +195,6 @@ gitea-theme-meta-info {
   --color-box-header: #1a1d1f;
   --color-box-body: #14171a;
   --color-box-body-highlight: #1e2226;
-  --color-workflow-box-bg: #1d2226;
-  --color-workflow-box-hover-bg: #242a2f;
-  --color-workflow-box-border: #3b444c;
   --color-text-dark: #f7f8f9;
   --color-text: #d0d5da;
   --color-text-light: #bcc3cb;
@@ -211,7 +208,6 @@ gitea-theme-meta-info {
   --color-input-toggle-background: #2e353c;
   --color-input-border: var(--color-secondary-dark-1);
   --color-light: #00001728;
-  --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #e8f3ff28;
   --color-hover: #e8f3ff19;
   --color-hover-opaque: #21252a; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
@@ -252,6 +248,7 @@ gitea-theme-meta-info {
   --color-danger: var(--color-red);
   --color-transparency-grid-light: #2a2a2a;
   --color-transparency-grid-dark: #1a1a1a;
+  --color-workflow-edge-hover: #616e78;
   accent-color: var(--color-accent);
   color-scheme: dark;
 }
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index 527a9d517ac60..f4b46f2da4032 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -195,9 +195,6 @@ gitea-theme-meta-info {
   --color-box-header: #f1f3f5;
   --color-box-body: #ffffff;
   --color-box-body-highlight: #ecf5fd;
-  --color-workflow-box-bg: #f8f9fb;
-  --color-workflow-box-hover-bg: #eef1f5;
-  --color-workflow-box-border: #d0d7de;
   --color-text-dark: #01050a;
   --color-text: #181c21;
   --color-text-light: #30363b;
@@ -211,7 +208,6 @@ gitea-theme-meta-info {
   --color-input-toggle-background: #d0d7de;
   --color-input-border: var(--color-secondary-dark-1);
   --color-light: #00001706;
-  --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #0000171d;
   --color-hover: #00001708;
   --color-hover-opaque: #f1f3f5; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
@@ -252,6 +248,7 @@ gitea-theme-meta-info {
   --color-danger: var(--color-red);
   --color-transparency-grid-light: #fafafa;
   --color-transparency-grid-dark: #e2e2e2;
+  --color-workflow-edge-hover: #b1b7bd;
   accent-color: var(--color-accent);
   color-scheme: light;
 }
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index b6f270a7e78e1..33399dc087bd8 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -609,8 +609,8 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             :width="nodeWidth"
             :height="nodeHeight"
             rx="10"
-            fill="var(--color-workflow-box-bg)"
-            stroke="var(--color-workflow-box-border)"
+            fill="var(--color-button)"
+            stroke="var(--color-light-border)"
             stroke-width="1.25"
             class="job-rect"
           />
@@ -725,7 +725,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 
 .highlighted-edge {
   stroke-width: 2.25 !important;
-  stroke: var(--color-workflow-box-border) !important;
+  stroke: var(--color-workflow-edge-hover) !important;
 }
 
 .job-node-group {
@@ -734,8 +734,9 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 }
 
 .job-node-group:hover .job-rect {
-  fill: var(--color-workflow-box-hover-bg);
-  transform: translateX(1px);
+  /* due to SVG rendering limitation, only one of fill and drop-shadow can work */
+  fill: var(--color-hover);
+  /* filter: drop-shadow(0 1px 3px var(--color-shadow-opaque)); */
 }
 
 .job-text-wrap {
@@ -782,14 +783,9 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   justify-content: center;
 }
 
-.job-rect {
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
-  transition: fill 0.2s ease, transform 0.2s ease;
-}
-
 .node-port {
   fill: var(--color-box-body);
-  stroke: var(--color-workflow-box-border);
+  stroke: var(--color-light-border);
   stroke-width: 1.5;
   pointer-events: none;
 }

From 2822fb1301cf53a9aec6e072073a7390331d124d Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 28 Mar 2026 15:18:01 +0800
Subject: [PATCH 32/37] fix layout

---
 web_src/js/components/ActionRunSummaryView.vue | 3 +--
 web_src/js/components/WorkflowGraph.vue        | 8 +++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web_src/js/components/ActionRunSummaryView.vue b/web_src/js/components/ActionRunSummaryView.vue
index 6ceb986b36ffa..0900b2d808443 100644
--- a/web_src/js/components/ActionRunSummaryView.vue
+++ b/web_src/js/components/ActionRunSummaryView.vue
@@ -50,8 +50,7 @@ onBeforeUnmount(() => {
 </template>
 <style scoped>
 .action-run-summary-view {
-  height: 100%;
-  min-height: 0;
+  flex: 1;
   display: flex;
   flex-direction: column;
 }
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 33399dc087bd8..894cae9749b22 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -665,6 +665,11 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 </template>
 
 <style scoped>
+.workflow-graph {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
 .graph-header {
   display: flex;
   justify-content: space-between;
@@ -700,9 +705,10 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
 }
 
 .graph-container {
+  flex: 1;
   overflow: hidden;
   padding: 12px 16px 20px;
-  border-radius: 0 0 10px 10px;
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
   cursor: grab;
   position: relative;
   background: var(--color-body);

From 07945fcf0641bbef48f325830bddecbac2046681 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 28 Mar 2026 15:48:03 +0800
Subject: [PATCH 33/37] fix layout

---
 web_src/js/components/ActionRunSummaryView.vue | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/web_src/js/components/ActionRunSummaryView.vue b/web_src/js/components/ActionRunSummaryView.vue
index 0900b2d808443..8a80f6a304d91 100644
--- a/web_src/js/components/ActionRunSummaryView.vue
+++ b/web_src/js/components/ActionRunSummaryView.vue
@@ -31,13 +31,13 @@ onBeforeUnmount(() => {
 <template>
   <div class="action-run-summary-view">
     <div class="action-run-summary-block">
-      <p class="action-run-summary-trigger">
-        {{ locale.triggeredVia.replace('%s', run.triggerEvent) }}&nbsp;•&nbsp;<relative-time :datetime="runTriggeredAtIso" prefix=""/>
-      </p>
-      <p class="tw-mb-0">
+      <div class="flex-text-block tw-text-text-light-2">
+        {{ locale.triggeredVia.replace('%s', run.triggerEvent) }} • <relative-time :datetime="runTriggeredAtIso" prefix=""/>
+      </div>
+      <div class="flex-text-block">
         <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="16"/>
-        <span class="tw-ml-2">{{ locale.status[run.status] }}</span>&nbsp;•&nbsp;<span>{{ locale.totalDuration }} {{ run.duration || '–' }}</span>
-      </p>
+        <span>{{ locale.status[run.status] }}</span> • <span>{{ locale.totalDuration }} {{ run.duration || '–' }}</span>
+      </div>
     </div>
     <WorkflowGraph
       v-if="run.jobs.length > 0"
@@ -64,11 +64,6 @@ onBeforeUnmount(() => {
   border-bottom: 1px solid var(--color-secondary);
 }
 
-.action-run-summary-trigger {
-  margin-bottom: 0;
-  color: var(--color-text-light-2);
-}
-
 @media (max-width: 767.98px) {
   .action-run-summary-block {
     flex-direction: column;

From 4a68b00b6c812919a49e1f28ba4dd31cc500e88d Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 28 Mar 2026 15:59:25 +0800
Subject: [PATCH 34/37] fine tune

---
 web_src/js/components/WorkflowGraph.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 894cae9749b22..bec4aee12d62a 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -58,13 +58,6 @@ const hoveredJobId = ref<number | null>(null);
 
 const stateKey = () => `${props.store.viewData.currentRun.repoId}-${props.workflowId}`;
 
-const minScale = 0.3;
-const maxScale = 1;
-
-function clampScale(nextScale: number): number {
-  return Math.min(Math.max(Math.round(nextScale * 100) / 100, minScale), maxScale);
-}
-
 const loadSavedState = () => {
   const allStates = localUserSettings.getJsonObject<Record<string, StoredState>>(settingKeyStates, {});
   const saved = allStates[stateKey()];
@@ -90,8 +83,6 @@ const saveState = () => {
   localUserSettings.setJsonObject(settingKeyStates, Object.fromEntries(sortedStates));
 };
 
-watch([translateX, translateY, scale], debounce(500, saveState));
-
 const nodeWidth = computed(() => {
   const maxNameLength = Math.max(...props.jobs.map(j => j.name.length));
   return Math.min(Math.max(140, maxNameLength * 8), 180);
@@ -355,6 +346,13 @@ const nodeHeight = 48;
 const verticalSpacing = 88;
 const margin = 40;
 
+const minScale = 0.3;
+const maxScale = 1;
+
+function clampScale(nextScale: number): number {
+  return Math.min(Math.max(Math.round(nextScale * 100) / 100, minScale), maxScale);
+}
+
 const canZoomIn = computed(() => scale.value < maxScale);
 
 function zoomTo(nextScale: number) {
@@ -420,6 +418,8 @@ function handleWheel(event: WheelEvent) {
 
 onMounted(() => {
   loadSavedState();
+  watch([translateX, translateY, scale], debounce(500, saveState));
+  watch([scale], debounce(100, saveState));
 
   document.addEventListener('mousemove', handleMouseMoveOnDocument);
   document.addEventListener('mouseup', handleMouseUpOnDocument);

From 4d10ed96e5d4bfadab78f686f54a1efc66b9e36a Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 28 Mar 2026 16:01:21 +0800
Subject: [PATCH 35/37] fix css name

---
 web_src/js/components/WorkflowGraph.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index bec4aee12d62a..d1d66430455fd 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -636,7 +636,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             :y="job.y + 14"
             width="20"
             height="20"
-            class="job-status-fo"
+            class="job-status-fg-obj"
           >
             <div class="job-status-icon-wrap">
               <ActionRunStatus :status="job.status"/>
@@ -776,7 +776,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   pointer-events: none;
 }
 
-.job-status-fo,
+.job-status-fg-obj,
 .job-status-icon-wrap {
   pointer-events: none;
 }

From 585fafb29e15adb41e2d5a43808dad996bd031a3 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 28 Mar 2026 16:25:23 +0800
Subject: [PATCH 36/37] use wrap instead of media query

---
 web_src/js/components/ActionRunSummaryView.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/web_src/js/components/ActionRunSummaryView.vue b/web_src/js/components/ActionRunSummaryView.vue
index 8a80f6a304d91..91c1dfe567faa 100644
--- a/web_src/js/components/ActionRunSummaryView.vue
+++ b/web_src/js/components/ActionRunSummaryView.vue
@@ -59,15 +59,9 @@ onBeforeUnmount(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
   gap: 6px;
   padding: 12px;
   border-bottom: 1px solid var(--color-secondary);
 }
-
-@media (max-width: 767.98px) {
-  .action-run-summary-block {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
 </style>

From 2fd826969819a8b6502dc5f0f592e1e41e7de1da Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 28 Mar 2026 09:47:55 +0100
Subject: [PATCH 37/37] Use theme color variables for workflow graph and
 summary

Use --color-box-body for graph container, --color-box-header for
summary block, and --color-text-light-1 for summary text instead
of Tailwind utility classes and --color-body.

Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>
---
 web_src/js/components/ActionRunSummaryView.vue | 5 ++++-
 web_src/js/components/WorkflowGraph.vue        | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/web_src/js/components/ActionRunSummaryView.vue b/web_src/js/components/ActionRunSummaryView.vue
index 91c1dfe567faa..48af966c94be8 100644
--- a/web_src/js/components/ActionRunSummaryView.vue
+++ b/web_src/js/components/ActionRunSummaryView.vue
@@ -31,7 +31,7 @@ onBeforeUnmount(() => {
 <template>
   <div class="action-run-summary-view">
     <div class="action-run-summary-block">
-      <div class="flex-text-block tw-text-text-light-2">
+      <div class="flex-text-block">
         {{ locale.triggeredVia.replace('%s', run.triggerEvent) }} • <relative-time :datetime="runTriggeredAtIso" prefix=""/>
       </div>
       <div class="flex-text-block">
@@ -53,6 +53,7 @@ onBeforeUnmount(() => {
   flex: 1;
   display: flex;
   flex-direction: column;
+  color: var(--color-text-light-1);
 }
 
 .action-run-summary-block {
@@ -63,5 +64,7 @@ onBeforeUnmount(() => {
   gap: 6px;
   padding: 12px;
   border-bottom: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  background: var(--color-box-header);
 }
 </style>
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index d1d66430455fd..06ac1686e68c4 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -711,7 +711,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
   border-radius: 0 0 var(--border-radius) var(--border-radius);
   cursor: grab;
   position: relative;
-  background: var(--color-body);
+  background: var(--color-box-body);
 }
 
 .graph-container.dragging {