From bb92935c7285de07a98dabc982d32488acabd83c Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 22 Jun 2026 17:31:43 +0100
Subject: [PATCH] feat(webapp): update task and cached task span icons (#4014)

## Summary

Refreshes the SVG artwork for the main task icon and the cached task
variant shown on the run trace span view.

The cached icon (previously a hardcoded blue "T" in a dashed border) now
lives alongside `TaskIcon` in `TaskIcon.tsx` and is drawn with
`currentColor`, so it inherits the `text-tasks` theme color like the
other span icons instead of ignoring it. The standalone
`TaskCachedIcon.tsx` file is removed and its two import sites updated.
---
 .server-changes/cached-task-icon-svg.md       |   6 +
 .../app/assets/icons/TaskCachedIcon.tsx       |  49 -------
 apps/webapp/app/assets/icons/TaskIcon.tsx     | 131 +++++++++++++++---
 .../webapp/app/components/runs/v3/RunIcon.tsx |   3 +-
 .../app/routes/storybook.icons/route.tsx      |   3 +-
 5 files changed, 123 insertions(+), 69 deletions(-)
 create mode 100644 .server-changes/cached-task-icon-svg.md
 delete mode 100644 apps/webapp/app/assets/icons/TaskCachedIcon.tsx

diff --git a/.server-changes/cached-task-icon-svg.md b/.server-changes/cached-task-icon-svg.md
new file mode 100644
index 000000000..7a675e01e
--- /dev/null
+++ b/.server-changes/cached-task-icon-svg.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Refresh the task and cached-task span icons shown in the run trace view with new SVG artwork.
diff --git a/apps/webapp/app/assets/icons/TaskCachedIcon.tsx b/apps/webapp/app/assets/icons/TaskCachedIcon.tsx
deleted file mode 100644
index 650f9be39..000000000
--- a/apps/webapp/app/assets/icons/TaskCachedIcon.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-export function TaskCachedIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      className={className}
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_15584_76102)">
-        <path
-          d="M0.5 3.5L0.5 2.5C0.5 1.39543 1.39543 0.5 2.5 0.5H3.5"
-          stroke="#3B82F6"
-          strokeLinecap="square"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M15.5 12.5L15.5 13.5C15.5 14.6046 14.6046 15.5 13.5 15.5L12.5 15.5"
-          stroke="#3B82F6"
-          strokeLinecap="square"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M12.5 0.5L13.5 0.5C14.6046 0.5 15.5 1.39543 15.5 2.5L15.5 3.5"
-          stroke="#3B82F6"
-          strokeLinecap="square"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M3.5 15.5L2.5 15.5C1.39543 15.5 0.5 14.6046 0.5 13.5L0.5 12.5"
-          stroke="#3B82F6"
-          strokeLinecap="square"
-          strokeLinejoin="round"
-        />
-        <path d="M11.1799 4.19V5.598H8.8479V12H7.1649V5.598H4.8219V4.19H11.1799Z" fill="#3B82F6" />
-        <line x1="6" y1="15.5" x2="10" y2="15.5" stroke="#3B82F6" />
-        <line x1="6" y1="0.5" x2="10" y2="0.5" stroke="#3B82F6" />
-        <line x1="15.5" y1="6" x2="15.5" y2="10" stroke="#3B82F6" />
-        <line x1="0.5" y1="6" x2="0.5" y2="10" stroke="#3B82F6" />
-      </g>
-      <defs>
-        <clipPath id="clip0_15584_76102">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
diff --git a/apps/webapp/app/assets/icons/TaskIcon.tsx b/apps/webapp/app/assets/icons/TaskIcon.tsx
index ba73c34c5..c0cdc3fd4 100644
--- a/apps/webapp/app/assets/icons/TaskIcon.tsx
+++ b/apps/webapp/app/assets/icons/TaskIcon.tsx
@@ -8,58 +8,157 @@ export function TaskIcon({ className }: { className?: string }) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect x="11" y="16" width="2" height="6" rx="1" fill="currentColor" />
-      <rect x="11" y="2" width="2" height="6" rx="1" fill="currentColor" />
+      <rect x="11" y="16" width="2" height="7" rx="1" fill="currentColor" />
+      <rect x="11" y="1" width="2" height="7" rx="1" fill="currentColor" />
       <rect
         x="13"
         y="11"
         width="2"
-        height="11"
+        height="12"
         rx="1"
         transform="rotate(90 13 11)"
         fill="currentColor"
       />
       <rect
-        x="22"
+        x="23"
         y="11"
         width="2"
-        height="6"
+        height="7"
         rx="1"
-        transform="rotate(90 22 11)"
+        transform="rotate(90 23 11)"
         fill="currentColor"
       />
       <rect
-        x="5.63604"
-        y="19.7782"
+        x="4.92758"
+        y="20.4867"
         width="2"
-        height="10.9999"
+        height="12.0018"
         rx="1"
-        transform="rotate(-135 5.63604 19.7782)"
+        transform="rotate(-135 4.92758 20.4867)"
         fill="currentColor"
       />
       <rect
         x="15.3185"
         y="10.0958"
         width="2"
-        height="6.30698"
+        height="6.99687"
         rx="1"
         transform="rotate(-135 15.3185 10.0958)"
         fill="currentColor"
       />
       <rect
-        x="19.7781"
-        y="18.364"
+        x="20.3488"
+        y="18.9346"
         width="2"
-        height="6.18952"
+        height="6.99653"
         rx="1"
-        transform="rotate(135 19.7781 18.364)"
+        transform="rotate(135 20.3488 18.9346)"
         fill="currentColor"
       />
       <rect
         x="13.4161"
         y="12.002"
         width="2"
-        height="11.0027"
+        height="11.9956"
+        rx="1"
+        transform="rotate(135 13.4161 12.002)"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function TaskCachedIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="11" y="16" width="2" height="3" rx="1" fill="currentColor" />
+      <rect x="11" y="20" width="2" height="3" rx="1" fill="currentColor" />
+      <rect x="11" y="5" width="2" height="3" rx="1" fill="currentColor" />
+      <rect x="11" y="1" width="2" height="3" rx="1" fill="currentColor" />
+      <rect
+        x="13"
+        y="11"
+        width="2"
+        height="12"
+        rx="1"
+        transform="rotate(90 13 11)"
+        fill="currentColor"
+      />
+      <rect
+        x="19"
+        y="11"
+        width="2"
+        height="3"
+        rx="1"
+        transform="rotate(90 19 11)"
+        fill="currentColor"
+      />
+      <rect
+        x="23"
+        y="11"
+        width="2"
+        height="3"
+        rx="1"
+        transform="rotate(90 23 11)"
+        fill="currentColor"
+      />
+      <rect
+        x="4.92758"
+        y="20.4867"
+        width="2"
+        height="12.0018"
+        rx="1"
+        transform="rotate(-135 4.92758 20.4867)"
+        fill="currentColor"
+      />
+      <rect
+        x="15.3185"
+        y="10.0958"
+        width="2"
+        height="2.99815"
+        rx="1"
+        transform="rotate(-135 15.3185 10.0958)"
+        fill="currentColor"
+      />
+      <rect
+        x="18.1445"
+        y="7.26978"
+        width="2"
+        height="3.00029"
+        rx="1"
+        transform="rotate(-135 18.1445 7.26978)"
+        fill="currentColor"
+      />
+      <rect
+        x="17.5259"
+        y="16.1117"
+        width="2"
+        height="3.00436"
+        rx="1"
+        transform="rotate(135 17.5259 16.1117)"
+        fill="currentColor"
+      />
+      <rect
+        x="20.3488"
+        y="18.9346"
+        width="2"
+        height="3.00154"
+        rx="1"
+        transform="rotate(135 20.3488 18.9346)"
+        fill="currentColor"
+      />
+      <rect
+        x="13.4161"
+        y="12.002"
+        width="2"
+        height="11.9956"
         rx="1"
         transform="rotate(135 13.4161 12.002)"
         fill="currentColor"
diff --git a/apps/webapp/app/components/runs/v3/RunIcon.tsx b/apps/webapp/app/components/runs/v3/RunIcon.tsx
index f207ba9e6..ea31fa811 100644
--- a/apps/webapp/app/components/runs/v3/RunIcon.tsx
+++ b/apps/webapp/app/components/runs/v3/RunIcon.tsx
@@ -23,11 +23,10 @@ import {
   XAIIcon,
 } from "~/assets/icons/AiProviderIcons";
 import { AttemptIcon } from "~/assets/icons/AttemptIcon";
-import { TaskIcon } from "~/assets/icons/TaskIcon";
+import { TaskCachedIcon, TaskIcon } from "~/assets/icons/TaskIcon";
 import { cn } from "~/utils/cn";
 import { tablerIcons } from "~/utils/tablerIcons";
 import tablerSpritePath from "~/components/primitives/tabler-sprite.svg";
-import { TaskCachedIcon } from "~/assets/icons/TaskCachedIcon";
 import { PauseIcon } from "~/assets/icons/PauseIcon";
 import { RunFunctionIcon } from "~/assets/icons/RunFunctionIcon";
 import { MiddlewareIcon } from "~/assets/icons/MiddlewareIcon";
diff --git a/apps/webapp/app/routes/storybook.icons/route.tsx b/apps/webapp/app/routes/storybook.icons/route.tsx
index af98d0830..2b5f4c4cd 100644
--- a/apps/webapp/app/routes/storybook.icons/route.tsx
+++ b/apps/webapp/app/routes/storybook.icons/route.tsx
@@ -128,8 +128,7 @@ import { StarIcon } from "~/assets/icons/StarIcon";
 import { StatusIcon } from "~/assets/icons/StatusIcon";
 import { StreamsIcon } from "~/assets/icons/StreamsIcon";
 import { TableIcon } from "~/assets/icons/TableIcon";
-import { TaskCachedIcon } from "~/assets/icons/TaskCachedIcon";
-import { TaskIcon, TaskIconSmall } from "~/assets/icons/TaskIcon";
+import { TaskCachedIcon, TaskIcon, TaskIconSmall } from "~/assets/icons/TaskIcon";
 import { TestTubeIcon } from "~/assets/icons/TestTubeIcon";
 import { TextInlineIcon } from "~/assets/icons/TextInlineIcon";
 import { TextWrapIcon } from "~/assets/icons/TextWrapIcon";