fix: improve actions status icons and texts (#37206)

Action runs, jobs and steps have 8 statuses but the UI only showed 5
(from the commit status api) for the latter two. Align all 8 to GitHub
as closely as possible:

  - waiting — `octicon-circle` (hollow circle), gray
  - blocked — `octicon-blocked` (slashed circle), yellow
  - running — `gitea-running` (rotating spinner), yellow
  - cancelled — `octicon-stop` (gray), was `octicon-x` (red)

Descriptions also aligned with GitHub:

  - "Has started running" → "In progress"
  - "Has been cancelled" → "Cancelled after {dur}"
  - "Has been skipped" → "Skipped"

Fixes: https://github.com/go-gitea/gitea/issues/32228

---------

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Nicolas <bircni@icloud.com>

modules/actions/commit_status_info.go

@@ -0,0 +1,70 @@
+// Copyright 2026 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package actions
+
+import (
+	"context"
+	"maps"
+	"slices"
+
+	actions_model "code.gitea.io/gitea/models/actions"
+	"code.gitea.io/gitea/models/db"
+	git_model "code.gitea.io/gitea/models/git"
+	repo_model "code.gitea.io/gitea/models/repo"
+	"code.gitea.io/gitea/modules/log"
+)
+
+// CommitActionsStatusMap maps CommitStatus.ID to the live ActionRunJob status
+// for Gitea Actions rows.
+type CommitActionsStatusMap map[int64]actions_model.Status
+
+// IconStatus returns the action status name to route the icon through
+// repo/icons/action_status, or "" when the row isn't from Gitea Actions.
+func (m CommitActionsStatusMap) IconStatus(s *git_model.CommitStatus) string {
+	if status, ok := m[s.ID]; ok {
+		return status.String()
+	}
+	return ""
+}
+
+// GetCommitActionsStatusMap resolves the live ActionRunJob.Status for every
+// CommitStatus row backed by Gitea Actions. Rows from other sources (external
+// CIs, API) are left untouched and rendered from their stored State.
+func GetCommitActionsStatusMap(ctx context.Context, statuses []*git_model.CommitStatus) CommitActionsStatusMap {
+	if len(statuses) == 0 {
+		return nil
+	}
+	statusByJobID := make(map[int64]*git_model.CommitStatus)
+	repoByID := make(map[int64]*repo_model.Repository)
+	for _, status := range statuses {
+		if status == nil || status.TargetURL == "" {
+			continue
+		}
+		if status.Repo == nil {
+			status.Repo = repoByID[status.RepoID]
+		}
+		// ParseGiteaActionsTargetURL lazy-loads status.Repo on miss; cache the
+		// outcome so later entries with the same RepoID skip that load.
+		_, jobID, ok := status.ParseGiteaActionsTargetURL(ctx)
+		repoByID[status.RepoID] = status.Repo
+		if ok {
+			statusByJobID[jobID] = status
+		}
+	}
+	if len(statusByJobID) == 0 {
+		return nil
+	}
+	jobs := make(map[int64]*actions_model.ActionRunJob, len(statusByJobID))
+	if err := db.GetEngine(ctx).In("id", slices.Collect(maps.Keys(statusByJobID))).Cols("id", "status").Find(&jobs); err != nil {
+		log.Error("db.Find: failed to find action run jobs: %v", err)
+		return nil
+	}
+	info := make(CommitActionsStatusMap, len(jobs))
+	for jobID, status := range statusByJobID {
+		if job, ok := jobs[jobID]; ok {
+			info[status.ID] = job.Status
+		}
+	}
+	return info
+}

modules/templates/util_actions.go

@@ -0,0 +1,23 @@
+// Copyright 2026 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package templates
+
+import (
+	"context"
+
+	git_model "code.gitea.io/gitea/models/git"
+	actions_module "code.gitea.io/gitea/modules/actions"
+)
+
+type ActionsUtils struct {
+	ctx context.Context
+}
+
+func NewActionsUtils(ctx context.Context) *ActionsUtils {
+	return &ActionsUtils{ctx: ctx}
+}
+
+func (a *ActionsUtils) CommitStatusesToActionsStatuses(statuses []*git_model.CommitStatus) actions_module.CommitActionsStatusMap {
+	return actions_module.GetCommitActionsStatusMap(a.ctx, statuses)
+}

routers/api/actions/artifactsv4.go

@@ -104,7 +104,6 @@ import (
 
 	actions_model "code.gitea.io/gitea/models/actions"
 	"code.gitea.io/gitea/models/db"
-	"code.gitea.io/gitea/modules/actions"
 	"code.gitea.io/gitea/modules/httplib"
 	"code.gitea.io/gitea/modules/log"
 	"code.gitea.io/gitea/modules/optional"
@@ -112,6 +111,7 @@ import (
 	"code.gitea.io/gitea/modules/storage"
 	"code.gitea.io/gitea/modules/util"
 	"code.gitea.io/gitea/modules/web"
+	"code.gitea.io/gitea/services/actions"
 	"code.gitea.io/gitea/services/context"
 
 	"google.golang.org/protobuf/encoding/protojson"

routers/api/v1/repo/action.go

@@ -21,7 +21,6 @@ import (
 	"code.gitea.io/gitea/models/db"
 	repo_model "code.gitea.io/gitea/models/repo"
 	secret_model "code.gitea.io/gitea/models/secret"
-	"code.gitea.io/gitea/modules/actions"
 	"code.gitea.io/gitea/modules/httplib"
 	"code.gitea.io/gitea/modules/optional"
 	"code.gitea.io/gitea/modules/setting"
@@ -1877,7 +1876,7 @@ func GetArtifact(ctx *context.APIContext) {
 		return
 	}
 
-	if actions.IsArtifactV4(art) {
+	if actions_service.IsArtifactV4(art) {
 		convertedArtifact, err := convert.ToActionArtifact(ctx.Repo.Repository, art)
 		if err != nil {
 			ctx.APIErrorInternal(err)
@@ -1926,7 +1925,7 @@ func DeleteArtifact(ctx *context.APIContext) {
 		return
 	}
 
-	if actions.IsArtifactV4(art) {
+	if actions_service.IsArtifactV4(art) {
 		if err := actions_model.SetArtifactNeedDeleteByID(ctx, art.ID); err != nil {
 			ctx.APIErrorInternal(err)
 			return
@@ -1999,10 +1998,10 @@ func DownloadArtifact(ctx *context.APIContext) {
 		return
 	}
 
-	if actions.IsArtifactV4(art) {
+	if actions_service.IsArtifactV4(art) {
 		// @actions/toolkit asserts that downloaded artifacts of a different runid return 302
 		// https://github.com/actions/toolkit/blob/44d43b5490b02998bd09b0c4ff369a4cc67876c2/packages/artifact/src/internal/download/download-artifact.ts#L203-L210
-		if actions.DownloadArtifactV4ServeDirect(ctx.Base, art) {
+		if actions_service.DownloadArtifactV4ServeDirect(ctx.Base, art) {
 			return
 		}
 
@@ -2054,8 +2053,8 @@ func DownloadArtifactRaw(ctx *context.APIContext) {
 		ctx.APIError(http.StatusNotFound, "Artifact has expired")
 		return
 	}
-	if actions.IsArtifactV4(art) {
-		err := actions.DownloadArtifactV4(ctx.Base, art)
+	if actions_service.IsArtifactV4(art) {
+		err := actions_service.DownloadArtifactV4(ctx.Base, art)
 		if err != nil {
 			ctx.APIErrorInternal(err)
 			return

routers/web/repo/actions/view.go

@@ -972,8 +972,8 @@ func ArtifactsDownloadView(ctx *context_module.Context) {
 	// A v4 Artifact may only contain a single file
 	// Multiple files are uploaded as a single file archive
 	// All other cases fall back to the legacy v1–v3 zip handling below
-	if len(artifacts) == 1 && actions.IsArtifactV4(artifacts[0]) {
-		err := actions.DownloadArtifactV4(ctx.Base, artifacts[0])
+	if len(artifacts) == 1 && actions_service.IsArtifactV4(artifacts[0]) {
+		err := actions_service.DownloadArtifactV4(ctx.Base, artifacts[0])
 		if err != nil {
 			ctx.ServerError("DownloadArtifactV4", err)
 			return

services/actions/commit_status.go

@@ -181,11 +181,11 @@ func toCommitStatusDescription(job *actions_model.ActionRunJob) string {
 	case actions_model.StatusFailure:
 		return fmt.Sprintf("Failing after %s", job.Duration())
 	case actions_model.StatusCancelled:
-		return "Has been cancelled"
+		return fmt.Sprintf("Cancelled after %s", job.Duration())
 	case actions_model.StatusSkipped:
-		return "Has been skipped"
+		return "Skipped"
 	case actions_model.StatusRunning:
-		return "Has started running"
+		return "In progress"
 	case actions_model.StatusWaiting:
 		return "Waiting to run"
 	case actions_model.StatusBlocked:

services/actions/commit_status_test.go

@@ -11,13 +11,36 @@ import (
 	git_model "code.gitea.io/gitea/models/git"
 	repo_model "code.gitea.io/gitea/models/repo"
 	"code.gitea.io/gitea/models/unittest"
+	actions_module "code.gitea.io/gitea/modules/actions"
 	"code.gitea.io/gitea/modules/commitstatus"
 	"code.gitea.io/gitea/modules/gitrepo"
+	"code.gitea.io/gitea/modules/timeutil"
 
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 )
 
+func TestCommitStatusDescription(t *testing.T) {
+	cases := []struct {
+		status           actions_model.Status
+		started, stopped timeutil.TimeStamp
+		want             string
+	}{
+		{actions_model.StatusSuccess, 100, 102, "Successful in 2s"},
+		{actions_model.StatusFailure, 100, 130, "Failing after 30s"},
+		{actions_model.StatusCancelled, 100, 145, "Cancelled after 45s"},
+		{actions_model.StatusSkipped, 0, 0, "Skipped"},
+		{actions_model.StatusRunning, 0, 0, "In progress"},
+		{actions_model.StatusWaiting, 0, 0, "Waiting to run"},
+		{actions_model.StatusBlocked, 0, 0, "Blocked by required conditions"},
+		{actions_model.StatusUnknown, 0, 0, "Unknown status: 0"},
+	}
+	for _, tc := range cases {
+		job := &actions_model.ActionRunJob{Status: tc.status, Started: tc.started, Stopped: tc.stopped}
+		assert.Equal(t, tc.want, toCommitStatusDescription(job), tc.status.String())
+	}
+}
+
 func TestCreateCommitStatus_Dedupe(t *testing.T) {
 	assert.NoError(t, unittest.PrepareTestDatabase())
 
@@ -61,7 +84,7 @@ func TestCreateCommitStatus_Dedupe(t *testing.T) {
 	require.Len(t, statuses, 2)
 	assert.Equal(t, "Waiting to run", statuses[0].Description)
 	assert.Equal(t, commitstatus.CommitStatusPending, statuses[1].State)
-	assert.Equal(t, "Has started running", statuses[1].Description)
+	assert.Equal(t, "In progress", statuses[1].Description)
 	assert.Equal(t, expectedTargetURL, statuses[1].TargetURL)
 
 	require.NoError(t, createCommitStatus(t.Context(), repo, "push", commit.ID.String(), run, job))
@@ -75,6 +98,53 @@ func TestCreateCommitStatus_Dedupe(t *testing.T) {
 	assert.Equal(t, commitstatus.CommitStatusSuccess, statuses[2].State)
 }
 
+func TestGetCommitActionsStatusMap(t *testing.T) {
+	assert.NoError(t, unittest.PrepareTestDatabase())
+
+	repo := unittest.AssertExistsAndLoadBean(t, &repo_model.Repository{ID: 4})
+	branch := unittest.AssertExistsAndLoadBean(t, &git_model.Branch{RepoID: repo.ID, Name: repo.DefaultBranch})
+
+	run := &actions_model.ActionRun{
+		RepoID: repo.ID, Repo: repo, OwnerID: repo.OwnerID, TriggerUserID: repo.OwnerID,
+		WorkflowID: "test.yaml", CommitSHA: branch.CommitID,
+	}
+	require.NoError(t, db.Insert(t.Context(), run))
+
+	cases := []struct {
+		jobName string
+		status  actions_model.Status
+	}{
+		{"running-job", actions_model.StatusRunning},
+		{"waiting-job", actions_model.StatusWaiting},
+		{"unknown-job", actions_model.StatusUnknown},
+	}
+	for _, tc := range cases {
+		job := &actions_model.ActionRunJob{
+			RunID: run.ID, RepoID: repo.ID, OwnerID: repo.OwnerID, Name: tc.jobName, Status: tc.status,
+		}
+		require.NoError(t, db.Insert(t.Context(), job))
+		require.NoError(t, createCommitStatus(t.Context(), repo, "push", branch.CommitID, run, job))
+	}
+
+	statuses, err := git_model.GetLatestCommitStatus(t.Context(), repo.ID, branch.CommitID, db.ListOptionsAll)
+	require.NoError(t, err)
+
+	info := actions_module.GetCommitActionsStatusMap(t.Context(), statuses)
+	got := map[string]string{}
+	for _, s := range statuses {
+		got[s.Context] = info.IconStatus(s)
+	}
+	for _, tc := range cases {
+		key := "test.yaml / " + tc.jobName + " (push)"
+		want := tc.status.String()
+		assert.Equal(t, want, got[key], "icon status for %s", tc.jobName)
+	}
+
+	// Nil receiver returns "" without panicking — used by callers that skip enrichment.
+	var nilInfo actions_module.CommitActionsStatusMap
+	assert.Empty(t, nilInfo.IconStatus(statuses[0]))
+}
+
 func findCommitStatusesForContext(t *testing.T, repoID int64, sha, context string) []*git_model.CommitStatus {
 	t.Helper()
 

services/context/context.go

@@ -104,6 +104,7 @@ func NewTemplateContextForWeb(ctx reqctx.RequestContext, req *http.Request, loca
 	tmplCtx["AvatarUtils"] = templates.NewAvatarUtils(ctx)
 	tmplCtx["RenderUtils"] = templates.NewRenderUtils(ctx)
 	tmplCtx["MiscUtils"] = templates.NewMiscUtils(ctx)
+	tmplCtx["ActionsUtils"] = templates.NewActionsUtils(ctx)
 	tmplCtx["RootData"] = ctx.GetData()
 	tmplCtx["Consts"] = map[string]any{
 		"RepoUnitTypeCode":            unit.TypeCode,

templates/repo/actions/runs_list.tmpl

@@ -8,7 +8,9 @@
 	{{range $run := .Runs}}
 		<div class="item tw-items-center">
 			<div class="item-leading">
-				{{template "repo/actions/status" (dict "status" $run.Status.String)}}
+				<span data-tooltip-content="{{ctx.Locale.Tr (printf "actions.status.%s" $run.Status.String)}}">
+					{{template "repo/icons/action_status" (dict "Status" $run.Status.String "IconVariant" "circle-fill")}}
+				</span>
 			</div>
 			<div class="item-main">
 				<span class="item-title" title="{{$run.Title}}">

templates/repo/actions/status.tmpl

@@ -1,23 +0,0 @@
-<!-- This template should be kept the same as web_src/js/components/ActionRunStatus.vue
-	Please also update the vue file above if this template is modified.
-	action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, unknown
--->
-{{- $size := Iif .size .size 16 -}}
-{{- $className := Iif .className .className "" -}}
-<span data-tooltip-content="{{ctx.Locale.Tr (printf "actions.status.%s" .status)}}">
-{{if eq .status "success"}}
-	{{svg "octicon-check-circle-fill" $size (printf "tw-text-green %s" $className)}}
-{{else if eq .status "skipped"}}
-	{{svg "octicon-skip" $size (printf "tw-text-text-light %s" $className)}}
-{{else if eq .status "cancelled"}}
-	{{svg "octicon-stop" $size (printf "tw-text-text-light %s" $className)}}
-{{else if eq .status "waiting"}}
-	{{svg "octicon-circle" $size (printf "tw-text-text-light %s" $className)}}
-{{else if eq .status "blocked"}}
-	{{svg "octicon-blocked" $size (printf "tw-text-yellow %s" $className)}}
-{{else if eq .status "running"}}
-	{{svg "gitea-running" $size (printf "tw-text-yellow rotate-clockwise %s" $className)}}
-{{else}}{{/*failure, unknown*/}}
-	{{svg "octicon-x-circle-fill" $size (printf "tw-text-red %s" $className)}}
-{{end}}
-</span>

templates/repo/commit_statuses.tmpl

@@ -1,11 +1,11 @@
 {{if .Statuses}}
 	{{if and (eq (len .Statuses) 1) .Status.TargetURL}}
 		<a class="flex-text-inline tw-no-underline {{.AdditionalClasses}}" data-global-init="initCommitStatuses" href="{{.Status.TargetURL}}">
-			{{template "repo/commit_status" .Status}}
+			{{template "repo/icons/commit_status" .Status}}
 		</a>
 	{{else}}
 		<span class="flex-text-inline {{.AdditionalClasses}}" data-global-init="initCommitStatuses" tabindex="0">
-			{{template "repo/commit_status" .Status}}
+			{{template "repo/icons/commit_status" .Status}}
 		</span>
 	{{end}}
 	<div class="tippy-target">

templates/repo/icons/action_status.tmpl

@@ -0,0 +1,28 @@
+{{/* Status icons used for runs, jobs and steps.
+
+Template Attributes:
+* Status: one of success, skipped, waiting, blocked, running, failure, cancelled, unknown
+* Size: icon size in pixels (default 16)
+* ClassName: additional CSS classes
+* IconVariant: "circle-fill" → octicon-check-circle-fill / octicon-x-circle-fill
+
+Keep this template in sync with web_src/js/components/ActionStatusIcon.vue.
+*/}}
+{{- $size := or .Size 16 -}}
+{{- $className := or .ClassName "" -}}
+{{- $circleFill := eq .IconVariant "circle-fill" -}}
+{{if eq .Status "success"}}
+	{{svg (Iif $circleFill "octicon-check-circle-fill" "octicon-check") $size (printf "tw-text-green %s" $className)}}
+{{else if eq .Status "skipped"}}
+	{{svg "octicon-skip" $size (printf "tw-text-text-light %s" $className)}}
+{{else if eq .Status "cancelled"}}
+	{{svg "octicon-stop" $size (printf "tw-text-text-light %s" $className)}}
+{{else if eq .Status "waiting"}}
+	{{svg "octicon-circle" $size (printf "tw-text-text-light %s" $className)}}
+{{else if eq .Status "blocked"}}
+	{{svg "octicon-blocked" $size (printf "tw-text-yellow %s" $className)}}
+{{else if eq .Status "running"}}
+	{{svg "gitea-running" $size (printf "tw-text-yellow rotate-clockwise %s" $className)}}
+{{else}}{{/*failure, unknown*/}}
+	{{svg (Iif $circleFill "octicon-x-circle-fill" "octicon-x") $size (printf "tw-text-red %s" $className)}}
+{{end}}

templates/repo/pulls/status_items.tmpl

@@ -3,10 +3,16 @@
 * StatusCheckData: optional, additional status check data, see backend pullCommitStatusCheckData struct
 */}}
 {{$statusCheckData := $.StatusCheckData}}
+{{$commitActionsStatuses :=  ctx.ActionsUtils.CommitStatusesToActionsStatuses $.CommitStatuses}}
 {{range $cs := $.CommitStatuses}}
 	<div class="item commit-status-item">
 		<div class="flex-text-block">
-			{{template "repo/commit_status" $cs}}
+			{{$actionStatus := $commitActionsStatuses.IconStatus $cs}}
+			{{if $actionStatus}}
+				{{template "repo/icons/action_status" (dict "Status" $actionStatus "Size" 18 "ClassName" "commit-status icon")}}
+			{{else}}
+				{{template "repo/icons/commit_status" $cs}}
+			{{end}}
 			<div class="status-context gt-ellipsis">
 				{{$cs.Context}} <span class="tw-text-text-light-2">{{$cs.Description}}</span>
 			</div>

web_src/js/components/ActionRunJobView.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import {nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch} from 'vue';
 import {SvgIcon} from '../svg.ts';
-import ActionRunStatus from './ActionRunStatus.vue';
+import ActionStatusIcon from './ActionStatusIcon.vue';
 import {addDelegatedEventListener, createElementFromAttrs, toggleElem} from '../utils/dom.ts';
 import {formatDatetime} from '../utils/time.ts';
 import {POST} from '../modules/fetch.ts';
 import type {IntervalId} from '../types.ts';
 import {toggleFullScreen} from '../utils.ts';
 import {localUserSettings} from '../modules/user-settings.ts';
-import type {ActionsArtifact, ActionsRun, ActionsRunStatus} from '../modules/gitea-actions.ts';
+import type {ActionsArtifact, ActionsRun, ActionsStatus} from '../modules/gitea-actions.ts';
 import {
   type ActionRunViewStore,
   createLogLineMessage,
@@ -26,7 +26,7 @@ function isLogElementInViewport(el: Element, {extraViewPortHeight}={extraViewPor
 type Step = {
   summary: string,
   duration: string,
-  status: ActionsRunStatus,
+  status: ActionsStatus,
 }
 
 type JobStepState = {
@@ -352,11 +352,11 @@ async function loadJob() {
   }
 }
 
-function isDone(status: ActionsRunStatus) {
+function isDone(status: ActionsStatus) {
   return ['success', 'skipped', 'failure', 'cancelled'].includes(status);
 }
 
-function isExpandable(status: ActionsRunStatus) {
+function isExpandable(status: ActionsStatus) {
   return ['success', 'running', 'failure', 'cancelled'].includes(status);
 }
 
@@ -466,7 +466,7 @@ async function hashChangeListener() {
           :name="currentJobStepsStates[stepIdx].expanded ? 'octicon-chevron-down' : 'octicon-chevron-right'"
           :class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"
         />
-        <ActionRunStatus :status="jobStep.status" class="tw-mr-2"/>
+        <ActionStatusIcon :status="jobStep.status" icon-variant="circle-fill" class="tw-mr-2"/>
         <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>
         <span class="step-summary-duration">{{ jobStep.duration }}</span>
       </div>

web_src/js/components/ActionRunSummaryView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ActionRunStatus from './ActionRunStatus.vue';
+import ActionStatusIcon from './ActionStatusIcon.vue';
 import WorkflowGraph from './WorkflowGraph.vue';
 import type {ActionRunViewStore} from "./ActionRunView.ts";
 import {computed, onBeforeUnmount, onMounted, toRefs} from "vue";
@@ -45,11 +45,11 @@ onBeforeUnmount(() => {
           <a v-if="triggerUser.link" class="muted" :href="triggerUser.link">{{ triggerUser.name }}</a>
           <span v-else class="muted">{{ triggerUser.name }}</span>
         </template>
-        <span>•</span> 
+        <span>•</span>
         <relative-time :datetime="run.triggeredAt || ''" prefix=""/>
       </div>
       <div class="flex-text-block">
-        <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="16"/>
+        <ActionStatusIcon :locale-status="locale.status[run.status]" :status="run.status" :size="16" icon-variant="circle-fill"/>
         <span>{{ locale.status[run.status] }}</span> • <span>{{ locale.totalDuration }} {{ run.duration || '–' }}</span>
       </div>
     </div>

web_src/js/components/ActionRunView.ts

@@ -1,7 +1,7 @@
 import {createElementFromAttrs} from '../utils/dom.ts';
 import {renderAnsi} from '../render/ansi.ts';
 import {reactive} from 'vue';
-import type {ActionsArtifact, ActionsJob, ActionsRun, ActionsRunStatus} from '../modules/gitea-actions.ts';
+import type {ActionsArtifact, ActionsJob, ActionsRun, ActionsStatus} from '../modules/gitea-actions.ts';
 import type {IntervalId} from '../types.ts';
 import {POST} from '../modules/fetch.ts';
 
@@ -94,7 +94,7 @@ export function createEmptyActionsRun(): ActionsRun {
     viewLink: '',
     title: '',
     titleHTML: '',
-    status: '' as ActionsRunStatus, // do not show the status before initialized, otherwise it would show an incorrect "error" icon
+    status: '' as ActionsStatus, // do not show the status before initialized, otherwise it would show an incorrect "error" icon
     canCancel: false,
     canApprove: false,
     canRerun: false,

web_src/js/components/ActionStatusIcon.vue

@@ -1,30 +1,32 @@
-<!-- This vue should be kept the same as templates/repo/actions/status.tmpl
-    Please also update the template file above if this vue is modified.
-    action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, unknown
+<!-- Keep in sync with templates/repo/icons/action_status.tmpl.
+    action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, unknown.
 -->
 <script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   status: 'success' | 'skipped' | 'waiting' | 'blocked' | 'running' | 'failure' | 'cancelled' | 'unknown',
   size?: number,
   className?: string,
   localeStatus?: string,
+  iconVariant?: 'circle-fill' | '',
 }>(), {
   size: 16,
   className: '',
   localeStatus: undefined,
+  iconVariant: '',
 });
+const circleFill = props.iconVariant === 'circle-fill';
 </script>
 
 <template>
   <span :data-tooltip-content="localeStatus ?? status" v-if="status">
-    <SvgIcon name="octicon-check-circle-fill" class="tw-text-green" :size="size" :class="className" v-if="status === 'success'"/>
+    <SvgIcon :name="circleFill ? 'octicon-check-circle-fill' : 'octicon-check'" class="tw-text-green" :size="size" :class="className" v-if="status === 'success'"/>
     <SvgIcon name="octicon-skip" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'skipped'"/>
     <SvgIcon name="octicon-stop" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'cancelled'"/>
     <SvgIcon name="octicon-circle" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'waiting'"/>
     <SvgIcon name="octicon-blocked" class="tw-text-yellow" :size="size" :class="className" v-else-if="status === 'blocked'"/>
     <SvgIcon name="gitea-running" class="tw-text-yellow" :size="size" :class="'rotate-clockwise ' + className" v-else-if="status === 'running'"/>
-    <SvgIcon name="octicon-x-circle-fill" class="tw-text-red" :size="size" v-else/><!-- failure, unknown -->
+    <SvgIcon :name="circleFill ? 'octicon-x-circle-fill' : 'octicon-x'" class="tw-text-red" :size="size" :class="className" v-else/><!-- failure, unknown -->
   </span>
 </template>

web_src/js/components/RepoActionView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {SvgIcon} from '../svg.ts';
-import ActionRunStatus from './ActionRunStatus.vue';
+import ActionStatusIcon from './ActionStatusIcon.vue';
 import {toRefs} from 'vue';
 import {POST, DELETE} from '../modules/fetch.ts';
 import ActionRunSummaryView from './ActionRunSummaryView.vue';
@@ -56,7 +56,7 @@ async function deleteArtifact(name: string) {
     <div class="action-view-header">
       <div class="action-info-summary">
         <div class="action-info-summary-title">
-          <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="20"/>
+          <ActionStatusIcon :locale-status="locale.status[run.status]" :status="run.status" :size="20" icon-variant="circle-fill"/>
           <!-- eslint-disable-next-line vue/no-v-html -->
           <h2 class="action-info-summary-title-text" v-html="run.titleHTML"/>
         </div>
@@ -105,7 +105,7 @@ async function deleteArtifact(name: string) {
                 </div>
                 <div class="flex-text-block tw-pl-[20px]">
                   <span class="flex-text-inline tw-flex-shrink-0">
-                    <ActionRunStatus :locale-status="locale.status[attempt.status]" :status="attempt.status" :size="14" class="flex-text-block"/>
+                    <ActionStatusIcon :locale-status="locale.status[attempt.status]" :status="attempt.status" :size="14" class="flex-text-block" icon-variant="circle-fill"/>
                     <span>{{ locale.status[attempt.status] }}</span>
                   </span>
                   <span>•</span>
@@ -154,7 +154,7 @@ async function deleteArtifact(name: string) {
         <ul class="ui relaxed list flex-items-block tw-p-0">
           <li class="item job-brief-item" v-for="job in run.jobs" :key="job.id" :class="props.jobId === job.id ? 'selected' : ''">
             <a class="tw-contents silenced" :href="job.link">
-              <ActionRunStatus :locale-status="locale.status[job.status]" :status="job.status"/>
+              <ActionStatusIcon :locale-status="locale.status[job.status]" :status="job.status" icon-variant="circle-fill"/>
               <span class="tw-flex-1 gt-ellipsis">{{ job.name }}</span>
               <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="tw-cursor-pointer link-action interact-fg" :data-url="`${run.link}/jobs/${job.id}/rerun`" v-if="job.canRerun"/>
               <span>{{ job.duration }}</span>

web_src/js/components/WorkflowGraph.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
 import {SvgIcon} from '../svg.ts';
-import ActionRunStatus from './ActionRunStatus.vue';
+import ActionStatusIcon from './ActionStatusIcon.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 {ActionsJob, ActionsStatus} from '../modules/gitea-actions.ts';
 import type {ActionRunViewStore} from './ActionRunView.ts';
 
 interface JobNode {
   id: number;
   name: string;
-  status: ActionsRunStatus;
+  status: ActionsStatus;
   duration: string;
 
   x: number;
@@ -641,7 +641,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) {
             class="job-status-fg-obj"
           >
             <div class="job-status-icon-wrap">
-              <ActionRunStatus :status="job.status"/>
+              <ActionStatusIcon :status="job.status" icon-variant="circle-fill"/>
             </div>
           </foreignObject>
 

web_src/js/modules/gitea-actions.ts

@@ -1,5 +1,5 @@
 // see "models/actions/status.go", if it needs to be used somewhere else, move it to a shared file like "types/actions.ts"
-export type ActionsRunStatus = 'unknown' | 'waiting' | 'running' | 'success' | 'failure' | 'cancelled' | 'skipped' | 'blocked';
+export type ActionsStatus = 'unknown' | 'waiting' | 'running' | 'success' | 'failure' | 'cancelled' | 'skipped' | 'blocked';
 export type ActionsArtifactStatus = 'expired' | 'completed';
 
 export type ActionsRun = {
@@ -8,7 +8,7 @@ export type ActionsRun = {
   viewLink: string,
   title: string,
   titleHTML: string,
-  status: ActionsRunStatus,
+  status: ActionsStatus,
   canCancel: boolean,
   canApprove: boolean,
   canRerun: boolean,
@@ -43,7 +43,7 @@ export type ActionsRun = {
 
 export type ActionsRunAttempt = {
   attempt: number;
-  status: ActionsRunStatus;
+  status: ActionsStatus;
   done: boolean;
   link: string;
   current: boolean;
@@ -58,7 +58,7 @@ export type ActionsJob = {
   link: string;
   jobId: string;
   name: string;
-  status: ActionsRunStatus;
+  status: ActionsStatus;
   canRerun: boolean;
   needs?: string[];
   duration: string;