Icons: updates and new icons for the side menu, run page and general improvements to the way they work (#1825)

* New format for the functions instead of “onWait() task” * Make the icon sizes match the hero icons * Updating icons for the new task hooks * Adds new icons to the RunIcon.tsx component * Improves the size of the menu icons * Fixes the missaligned environment dropdown and dev connected button * Changes the button colours so they are all unique * More icon updates * Adds new variables for main page icons * Improves icons sizes * Using new color variables in the side menu and blank states * Adds preview environment color variable * Align the env icon in the menu * Updates the env icons to be the correct size and padding to match hero icons * Label uses new colors, removes unused cases and new env icons * Lower case env label * Removes unused code * Use full env title * Organize imports * More variants of the runs icon to work at smaller sizes * small padding adjustment * reformat init function span * Fix last init formatting * New colour for settings * Organize switch statement for icons nicely * Use new color variable * Update icon svgs * Renamed lifecycle hook icon to Function icon * Renamed function icon file name
2025-03-26 19:12:12 +00:00
parent d745bb63ae
commit be02439d1d
29 changed files with 482 additions and 415 deletions
@@ -2,28 +2,18 @@ export function AttemptIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
-      <g clipPath="url(#clip0_9964_113464)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M16 0H0V16H16V0ZM7.09906 4.4L4.53906 11.5H6.11906L6.63906 10H9.35906L9.87906 11.5H11.4591L8.89906 4.4H7.09906ZM7.99906 6L8.92906 8.73H7.06906L7.99906 6Z"
-          fill="currentColor"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_9964_113464">
-          <path
-            d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z"
-            fill="white"
-          />
-        </clipPath>
-      </defs>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2H5ZM7.65398 16.4367C7.64829 16.4871 7.64671 16.5374 7.64905 16.5873C7.66648 16.959 7.90169 17.3021 8.27281 17.4389C8.7645 17.6202 9.31042 17.3713 9.49607 16.8813L10.2088 15H13.8788L14.5915 16.8813C14.7772 17.3713 15.3231 17.6202 15.8148 17.4389C16.3096 17.2565 16.5628 16.7075 16.3804 16.2127L13.2478 7.71625C13.1255 7.30217 12.7423 7 12.2886 7H11.8041C11.5337 7 11.2884 7.10733 11.1084 7.28171C11.0015 7.38343 10.9157 7.51053 10.8613 7.65817L7.70722 16.2126C7.67996 16.2865 7.66243 16.3617 7.65398 16.4367ZM12.0438 10.1564L10.9665 13H13.1211L12.0438 10.1564Z"
+        fill="currentColor"
+      />
    </svg>
  );
 }
@@ -1,23 +1,23 @@
 export function ConnectedIcon({ className }: { className?: string }) {
  return (
-    <svg className={className} viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect
        x="0.5"
        y="-0.5"
        width="19"
        height="1"
        rx="0.5"
-        transform="matrix(1 0 0 -1 0 17)"
+        transform="matrix(1 0 0 -1 1.99998 20)"
        stroke="#878C99"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
-        d="M12.4187 2L4 2C2.89543 2 2 2.89543 2 4L2 12C2 13.1046 2.89543 14 4 14L16 14C17.1046 14 18 13.1046 18 12L18 4.9816L16.5 6.4816L16.5 12C16.5 12.2761 16.2761 12.5 16 12.5L4 12.5C3.72386 12.5 3.5 12.2761 3.5 12L3.5 4C3.5 3.72386 3.72386 3.5 4 3.5L10.9187 3.5L12.4187 2Z"
+        d="M14.4187 5L6.00002 5C4.89545 5 4.00002 5.89543 4.00002 7L4.00001 15C4.00002 16.1046 4.89545 17 6.00002 17L18 17C19.1046 17 20 16.1046 20 15L20 7.9816L18.5 9.4816L18.5 15C18.5 15.2761 18.2762 15.5 18 15.5L6.00001 15.5C5.72387 15.5 5.50001 15.2761 5.50001 15L5.50002 7C5.50002 6.72386 5.72387 6.5 6.00002 6.5L12.9187 6.5L14.4187 5Z"
        fill="#878C99"
      />
      <path
-        d="M6.5 6.75L9.5 9.75L16 3"
+        d="M8.50002 9.75L11.5 12.75L18 6"
        stroke="#28BF5C"
        strokeWidth="1.5"
        strokeLinecap="round"
@@ -29,25 +29,20 @@ export function ConnectedIcon({ className }: { className?: string }) {

 export function DisconnectedIcon({ className }: { className?: string }) {
  return (
-    <svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
-        d="M11.2279 14.8334L1.50037 14.8334C1.04013 14.8334 0.667035 15.2065 0.667035 15.6667C0.667035 16.1269 1.04013 16.5 1.50037 16.5L12.8945 16.5L11.2279 14.8334Z"
+        d="M14.673 19L2.99998 19C2.44769 19 1.99998 19.4477 1.99998 20C1.99998 20.5523 2.44769 21 2.99998 21L16.673 21L14.673 19Z"
        fill="#878C99"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
-        d="M2.33268 5.93927L2.33268 11.1667C2.33268 12.2713 3.22811 13.1667 4.33268 13.1667L9.56016 13.1667L8.06016 11.6667L4.33268 11.6667C4.05654 11.6667 3.83268 11.4429 3.83268 11.1667L3.83268 7.43927L2.33268 5.93927ZM14.166 10.6369L14.166 5.16675C14.166 4.8906 13.9422 4.66675 13.666 4.66675L8.19589 4.66675L6.69589 3.16675L13.666 3.16675C14.7706 3.16675 15.666 4.06218 15.666 5.16675L15.666 11.1667C15.666 11.4522 15.6062 11.7237 15.4985 11.9693L14.166 10.6369Z"
+        d="M3.99999 8.32703L3.99999 15C3.99999 16.1046 4.89542 17 5.99999 17L12.673 17L11.173 15.5L5.99999 15.5C5.72385 15.5 5.49999 15.2761 5.49999 15L5.49999 9.82703L3.99999 8.32703ZM18.5 14.2641L18.5 7C18.5 6.72386 18.2761 6.5 18 6.5L10.7358 6.5L9.23585 5L18 5C19.1046 5 20 5.89543 20 7L20 15C20 15.2292 19.9614 15.4495 19.8904 15.6546L18.5 14.2641Z"
        fill="#878C99"
      />
-      <path
-        d="M1.5 1.50006L16.5 16.5001"
-        stroke="#E11D48"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
+      <path d="M3.00001 3L21 21" stroke="#E11D48" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
 }
@@ -1,92 +1,153 @@
 export function DevEnvironmentIcon({ className }: { className?: string }) {
  return (
-    <svg className={className} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clipPath="url(#clip0_15347_71059)">
-        <circle cx="7" cy="7" r="2" fill="currentColor" />
-        <path
-          d="M4.5 0.75H2.75C1.64543 0.75 0.75 1.64543 0.75 2.75V4.5"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M13.25 4.5L13.25 2.75C13.25 1.64543 12.3546 0.75 11.25 0.75L9.5 0.75"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M9.5 13.25L11.25 13.25C12.3546 13.25 13.25 12.3546 13.25 11.25L13.25 9.5"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M0.75 9.5L0.75 11.25C0.75 12.3546 1.64543 13.25 2.75 13.25L4.5 13.25"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_15347_71059">
-          <rect width="14" height="14" fill="currentColor" />
-        </clipPath>
-      </defs>
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="3" fill="currentColor" />
+      <path
+        d="M8.35714 3H5C3.89543 3 3 3.89543 3 5V8.35714"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21 8.35714L21 5C21 3.89543 20.1046 3 19 3L15.6429 3"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.6429 21L19 21C20.1046 21 21 20.1046 21 19L21 15.6429"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3 15.6429L3 19C3 20.1046 3.89543 21 5 21L8.35714 21"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function DevEnvironmentIconSmall({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="10" cy="10" r="2" fill="currentColor" />
+      <path
+        d="M7 3H5C3.89543 3 3 3.89543 3 5V7"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17 7L17 5C17 3.89543 16.1046 3 15 3L13 3"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13 17L15 17C16.1046 17 17 16.1046 17 15L17 13"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3 13L3 15C3 16.1046 3.89543 17 5 17L7 17"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
    </svg>
  );
 }

 export function ProdEnvironmentIcon({ className }: { className?: string }) {
  return (
-    <svg className={className} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.5037 7.33603C12.3174 6.88799 11.6827 6.88799 11.4963 7.33603L10.4338 9.89064L7.6759 10.1117C7.1922 10.1505 6.99606 10.7542 7.36459 11.0698L9.46583 12.8698L8.82387 15.561C8.71128 16.033 9.22477 16.4061 9.63888 16.1532L12 14.711L14.3612 16.1532C14.7753 16.4061 15.2888 16.0331 15.1762 15.561L14.5343 12.8698L16.6355 11.0698C17.004 10.7542 16.8079 10.1505 16.3242 10.1117L13.5663 9.89064L12.5037 7.33603Z"
+        fill="white"
+      />
      <rect
-        x="0.75"
-        y="0.75"
-        width="12.5"
-        height="12.5"
-        rx="3.25"
+        x="3"
+        y="3"
+        width="18"
+        height="18"
+        rx="2"
        stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
-      <g clipPath="url(#clip0_15515_83281)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M7.34731 4.15348C7.21887 3.84467 6.78141 3.84467 6.65298 4.15348L5.92066 5.91419L4.01982 6.06658C3.68644 6.0933 3.55126 6.50935 3.80526 6.72693L5.2535 7.96749L4.81104 9.82238C4.73344 10.1477 5.08735 10.4048 5.37277 10.2305L7.00014 9.23651L8.62752 10.2305C8.91294 10.4048 9.26685 10.1477 9.18925 9.82238L8.74679 7.96749L10.195 6.72693C10.449 6.50935 10.3138 6.0933 9.98046 6.06658L8.07963 5.91419L7.34731 4.15348Z"
-          fill="currentColor"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_15515_83281">
-          <rect width="8" height="8" fill="currentColor" transform="translate(3 3)" />
-        </clipPath>
-      </defs>
+    </svg>
+  );
+}
+
+export function ProdEnvironmentIconSmall({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect
+        x="3"
+        y="3"
+        width="14"
+        height="14"
+        rx="3"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.4174 6.23514C10.263 5.86384 9.73701 5.86384 9.58258 6.23514L8.70207 8.35213L6.4166 8.53536C6.01575 8.56749 5.85322 9.06773 6.15862 9.32934L7.89991 10.8209L7.36792 13.0512C7.27461 13.4423 7.70014 13.7515 8.04332 13.5419L10 12.3467L11.9567 13.5419C12.2999 13.7515 12.7254 13.4423 12.6321 13.0512L12.1001 10.8209L13.8414 9.32934C14.1468 9.06773 13.9842 8.56749 13.5834 8.53536L11.2979 8.35213L10.4174 6.23514Z"
+        fill="currentColor"
+      />
    </svg>
  );
 }

 export function DeployedEnvironmentIcon({ className }: { className?: string }) {
  return (
-    <svg className={className} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="3" fill="currentColor" />
      <rect
-        x="0.75"
-        y="0.75"
-        width="12.5"
-        height="12.5"
-        rx="3.25"
+        x="3"
+        y="3"
+        width="18"
+        height="18"
+        rx="2"
        stroke="currentColor"
-        strokeWidth="1.5"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function DeployedEnvironmentIconSmall({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="10" cy="10" r="2" fill="currentColor" />
+      <rect
+        x="3"
+        y="3"
+        width="14"
+        height="14"
+        rx="3"
+        stroke="currentColor"
+        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
-      <circle cx="7" cy="7" r="2" fill="currentColor" />
    </svg>
  );
 }
@@ -0,0 +1,21 @@
+export function FunctionIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect
+        x="2.5"
+        y="2.5"
+        width="19"
+        height="19"
+        rx="2.5"
+        stroke="currentColor"
+        strokeOpacity={0.5}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.9987 7.99477C13.8955 7.99477 13.0012 8.88907 13.0012 9.99225V10.6649H14.3363H15.3375V12.6675H14.3363H13.0012V14.0084C13.0012 16.2171 11.2107 18.0077 9.0019 18.0077H8.00061V16.0051H9.0019C10.1047 16.0051 10.9986 15.1111 10.9986 14.0084V12.6675H9.66357H8.66228V10.6649H9.66357H10.9986V9.99225C10.9986 7.78308 12.7895 5.99219 14.9987 5.99219H16V7.99477H14.9987Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,21 @@
+export function MiddlewareIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect
+        x="2.5"
+        y="2.5"
+        width="19"
+        height="19"
+        rx="2.5"
+        stroke="currentColor"
+        strokeOpacity={0.5}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.72775 14.8717V11.1087C8.72775 10.4761 9.24051 9.96338 9.87303 9.96338C10.5056 9.96338 11.0183 10.4761 11.0183 11.1087V15.5262V16.5079H12.9817V15.5262V11.1087C12.9817 10.4761 13.4944 9.96334 14.1269 9.96334C14.7594 9.96334 15.2722 10.4761 15.2722 11.1086V15.5262V16.5079H17.2356V15.5262V11.1086C17.2356 9.39177 15.8438 8 14.1269 8C13.3041 8 12.556 8.31966 12 8.84155C11.4439 8.31968 10.6958 8.00004 9.87303 8.00004C9.46858 8.00004 9.08217 8.07728 8.72775 8.21781V8.00004H6.7644V8.98171V11.1087V14.8717V15.5262V15.8534V16.5079H8.72775V15.8534V15.5262V14.8717Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -1,10 +1,17 @@
 export function PauseIcon({ className }: { className?: string }) {
  return (
-    <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
-        d="M0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM6.5 6C6.5 5.44772 6.94772 5 7.5 5C8.05229 5 8.5 5.44772 8.5 6V14C8.5 14.5523 8.05229 15 7.5 15C6.94772 15 6.5 14.5523 6.5 14V6ZM12.5 5C11.9477 5 11.5 5.44772 11.5 6V14C11.5 14.5523 11.9477 15 12.5 15C13.0523 15 13.5 14.5523 13.5 14V6C13.5 5.44772 13.0523 5 12.5 5Z"
+        d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM8 8.25C8 7.55964 8.55964 7 9.25 7C9.94036 7 10.5 7.55964 10.5 8.25V15.75C10.5 16.4404 9.94036 17 9.25 17C8.55964 17 8 16.4404 8 15.75V8.25ZM14.75 7C14.0596 7 13.5 7.55964 13.5 8.25V15.75C13.5 16.4404 14.0596 17 14.75 17C15.4404 17 16 16.4404 16 15.75V8.25C16 7.55964 15.4404 7 14.75 7Z"
        fill="currentColor"
      />
    </svg>
@@ -0,0 +1,21 @@
+export function RunFunctionIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect
+        x="2.5"
+        y="2.5"
+        width="19"
+        height="19"
+        rx="2.5"
+        stroke="currentColor"
+        strokeOpacity={0.5}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 8H10V12V16.5159H12V12C12 10.8954 12.8954 10 14 10H15.5V8H14C13.2714 8 12.5883 8.19479 12 8.53513V8Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -2,15 +2,53 @@ export function RunsIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
-        d="M12.2964 3.66962C11.97 3.83662 11.6961 4.09048 11.5047 4.40323C11.3134 4.71598 11.2121 5.07547 11.212 5.44211L11.211 8.0162L9.22047 8.0172C8.95637 8.0172 8.70309 8.12211 8.51635 8.30886C8.3296 8.4956 8.22469 8.74888 8.22469 9.01298V14.9877L8.23166 15.1042C8.26019 15.3464 8.37664 15.5697 8.5589 15.7318C8.74116 15.8939 8.97657 15.9834 9.22047 15.9834L11.211 15.9825L11.212 18.5585C11.2121 18.9524 11.329 19.3373 11.5478 19.6648C11.7666 19.9922 12.0777 20.2474 12.4415 20.3981C12.8054 20.5488 13.2057 20.5882 13.592 20.5114C13.9783 20.4346 14.3331 20.245 14.6116 19.9666L21.1698 13.4084C21.5432 13.0349 21.7529 12.5284 21.7529 12.0003C21.7529 11.4722 21.5432 10.9658 21.1698 10.5923L14.6116 4.03408C14.3331 3.75539 13.9782 3.56558 13.5918 3.48865C13.2054 3.41172 12.8048 3.45114 12.4408 3.60191L12.2964 3.66962Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.4075 8.80505C21.9499 8.40538 21.9499 7.59459 21.4075 7.19493L14.5932 2.17391C13.9329 1.68741 13 2.15883 13 2.97897V5.99999L4.5 5.99999C4.22386 5.99999 4 6.22385 4 6.49999L4 9.49999C4 9.77613 4.22386 9.99999 4.5 9.99999L13 9.99999V13.021C13 13.8411 13.9329 14.3126 14.5932 13.8261L21.4075 8.80505Z"
        fill="currentColor"
      />
      <path
-        d="M3.24578 8.0172C3.48968 8.01723 3.72509 8.10677 3.90735 8.26885C4.08961 8.43092 4.20606 8.65425 4.23459 8.89647L4.24156 9.01298V14.9877C4.24128 15.2415 4.1441 15.4856 3.96986 15.6701C3.79563 15.8547 3.55751 15.9658 3.30414 15.9806C3.05077 15.9955 2.80128 15.9131 2.60666 15.7502C2.41203 15.5873 2.28695 15.3562 2.25697 15.1042L2.25 14.9877V9.01298C2.25 8.74888 2.35491 8.4956 2.54166 8.30885C2.7284 8.12211 2.98168 8.0172 3.24578 8.0172Z"
-        fill="currentColor"
-      />
-      <path
-        d="M6.23312 8.0172C6.47702 8.01723 6.71243 8.10677 6.89469 8.26885C7.07696 8.43092 7.1934 8.65425 7.22193 8.89647L7.2289 9.01298V14.9877C7.22862 15.2415 7.13144 15.4856 6.95721 15.6701C6.78298 15.8547 6.54485 15.9658 6.29148 15.9806C6.03811 15.9955 5.78863 15.9131 5.594 15.7502C5.39937 15.5873 5.27429 15.3562 5.24431 15.1042L5.23734 14.9877V9.01298C5.23734 8.74888 5.34226 8.4956 5.529 8.30885C5.71575 8.12211 5.96903 8.0172 6.23312 8.0172Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.2494 17.5898C12.6316 17.2895 12.6316 16.7106 12.2494 16.4103L7.21336 12.4534C6.72127 12.0668 6 12.4173 6 13.0431L6 15.5L2.5 15.5C2.22386 15.5 2 15.7239 2 16V18C2 18.2762 2.22386 18.5 2.5 18.5L6 18.5L6 20.9569C6 21.5828 6.72127 21.9333 7.21336 21.5467L12.2494 17.5898Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function RunsIconSmall({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.6527 7.18006C18.145 6.86034 18.145 6.1396 17.6527 5.81987L12.2525 2.31329C11.713 1.96299 11 2.35016 11 2.99339L11 4.99998L4.40545 4.99998C4.18153 4.99998 4 5.1815 4 5.40543V7.59453C4 7.81845 4.18153 7.99998 4.40545 7.99998L11 7.99998L11 10.0065C11 10.6498 11.713 11.037 12.2525 10.6866L17.6527 7.18006Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.4064 14.4748C10.7107 14.2314 10.7107 13.7685 10.4064 13.525L6.98808 10.7904C6.58987 10.4718 5.99998 10.7554 5.99998 11.2653L5.99998 13L2.40539 13C2.18147 13 1.99994 13.1815 1.99994 13.4054V14.5945C1.99994 14.8185 2.18147 15 2.40539 15L5.99998 15L5.99999 16.7346C5.99999 17.2445 6.58987 17.528 6.98808 17.2095L10.4064 14.4748Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function RunsIconExtraSmall({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.6332 6.60006C16.0524 6.30985 16.0525 5.69018 15.6333 5.39997L11.1452 2.29277C10.6612 1.95767 9.99998 2.3041 9.99998 2.89281L9.99998 4.5L4.3649 4.5C4.16337 4.5 4 4.66337 4 4.8649V7.13509C4 7.33663 4.16337 7.5 4.3649 7.5L9.99998 7.5V9.10703C9.99998 9.69574 10.6612 10.0422 11.1452 9.70708L15.6332 6.60006Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.46572 12.9274C9.73962 12.7083 9.73961 12.2917 9.46572 12.0726L5.88926 9.21142C5.53087 8.92471 4.99998 9.17988 4.99998 9.63884V11.25L2.3649 11.25C2.16337 11.25 2 11.4134 2 11.6149V13.3851C2 13.5866 2.16337 13.75 2.3649 13.75L4.99998 13.75V15.3612C4.99998 15.8202 5.53088 16.0754 5.88927 15.7887L9.46572 12.9274Z"
        fill="currentColor"
      />
    </svg>
@@ -1,29 +1,25 @@
 export function TaskIcon({ 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_9221_99732)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M16 0H0V16H16V0ZM10.8901 5.73995V4.44995H5.11011V5.73995H7.23011V11.55H8.77011V5.73995H10.8901Z"
-          fill="currentColor"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_9221_99732">
-          <path
-            d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z"
-            fill="white"
-          />
-        </clipPath>
-      </defs>
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM7.5035 8C7.5035 8.55228 7.95122 9 8.5035 9H11V16.4954C11 17.0476 11.4477 17.4954 12 17.4954C12.5523 17.4954 13 17.0476 13 16.4954V9H15.4965C16.0488 9 16.4965 8.55228 16.4965 8C16.4965 7.44772 16.0488 7 15.4965 7H8.5035C7.95122 7 7.5035 7.44772 7.5035 8Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function TaskIconSmall({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 4C2 2.89543 2.89543 2 4 2H16C17.1046 2 18 2.89543 18 4V16C18 17.1046 17.1046 18 16 18H4C2.89543 18 2 17.1046 2 16V4ZM6 7C6 7.55228 6.44772 8 7 8H9L9 14C9 14.5523 9.44772 15 10 15C10.5523 15 11 14.5523 11 14V8H13C13.5523 8 14 7.55228 14 7C14 6.44772 13.5523 6 13 6H10H7C6.44772 6 6 6.44772 6 7Z"
+        fill="currentColor"
+      />
    </svg>
  );
 }
@@ -81,7 +81,7 @@ export function HasNoTasksDeployed({ environment }: { environment: MinimumEnviro
    <InfoPanel
      title={`You don't have any deployed tasks in ${environmentFullTitle(environment)}`}
      icon={TaskIcon}
-      iconClassName="text-blue-500"
+      iconClassName="text-tasks"
      panelClassName="max-w-full"
      accessory={
        <LinkButton
@@ -106,7 +106,7 @@ export function SchedulesNoPossibleTaskPanel() {
    <InfoPanel
      title="Create your first scheduled task"
      icon={ClockIcon}
-      iconClassName="text-sun-500"
+      iconClassName="text-schedules"
      panelClassName="max-w-full"
      accessory={
        <LinkButton
@@ -136,7 +136,7 @@ export function SchedulesNoneAttached() {
    <InfoPanel
      title="Attach your first schedule"
      icon={ClockIcon}
-      iconClassName="text-sun-500"
+      iconClassName="text-schedules"
      panelClassName="max-w-full"
    >
      <Paragraph spacing variant="small">
@@ -149,7 +149,7 @@ export function SchedulesNoneAttached() {
          variant="secondary/medium"
          LeadingIcon={RectangleGroupIcon}
          className="inline-flex"
-          leadingIconClassName="text-sun-500"
+          leadingIconClassName="text-blue-500"
        >
          Use the dashboard
        </LinkButton>
@@ -171,7 +171,7 @@ export function BatchesNone() {
    <InfoPanel
      title="Triggering batches"
      icon={Squares2X2Icon}
-      iconClassName="text-blue-500"
+      iconClassName="text-batches"
      panelClassName="max-w-full"
      accessory={
        <LinkButton to={docsPath("triggering")} variant="docs/small" LeadingIcon={BookOpenIcon}>
@@ -195,7 +195,7 @@ export function TestHasNoTasks() {
    <InfoPanel
      title="You don't have any tasks to test"
      icon={BeakerIcon}
-      iconClassName="text-lime-500"
+      iconClassName="text-tests"
      panelClassName="max-w-full"
      accessory={
        <LinkButton
@@ -224,7 +224,7 @@ export function DeploymentsNone() {
  return (
    <InfoPanel
      icon={ServerStackIcon}
-      iconClassName="text-blue-500"
+      iconClassName="text-deployments"
      title="Deploy for the first time"
      panelClassName="max-w-full"
    >
@@ -268,7 +268,7 @@ export function DeploymentsNoneDev() {
    <div className="space-y-8">
      <InfoPanel
        icon={ServerStackIcon}
-        iconClassName="text-blue-500"
+        iconClassName="text-deployments"
        title="Deploying tasks"
        panelClassName="max-w-full"
      >
@@ -314,7 +314,7 @@ export function AlertsNoneDev() {
    <div className="space-y-8">
      <InfoPanel
        icon={BellAlertIcon}
-        iconClassName="text-red-500"
+        iconClassName="text-alerts"
        title="Adding alerts"
        panelClassName="max-w-full"
      >
@@ -350,7 +350,7 @@ export function AlertsNoneDeployed() {
    <div className="space-y-8">
      <InfoPanel
        icon={BellAlertIcon}
-        iconClassName="text-red-500"
+        iconClassName="text-alerts"
        title="Adding alerts"
        panelClassName="max-w-full"
      >
@@ -391,7 +391,7 @@ export function QueuesHasNoTasks() {
    <InfoPanel
      title="You don't have any queues"
      icon={RectangleStackIcon}
-      iconClassName="text-blue-500"
+      iconClassName="text-queues"
      panelClassName="max-w-md"
      accessory={
        <LinkButton
@@ -1,12 +1,10 @@
+import {
+  DeployedEnvironmentIconSmall,
+  DevEnvironmentIconSmall,
+  ProdEnvironmentIconSmall,
+} from "~/assets/icons/EnvironmentIcons";
 import type { RuntimeEnvironment } from "~/models/runtimeEnvironment.server";
 import { cn } from "~/utils/cn";
-import { sortEnvironments } from "~/utils/environmentSort";
-import { SimpleTooltip } from "../primitives/Tooltip";
-import {
-  DeployedEnvironmentIcon,
-  DevEnvironmentIcon,
-  ProdEnvironmentIcon,
-} from "~/assets/icons/EnvironmentIcons";

 type Environment = Pick<RuntimeEnvironment, "type">;

@@ -20,16 +18,20 @@ export function EnvironmentIcon({
  switch (environment.type) {
    case "DEVELOPMENT":
      return (
-        <DevEnvironmentIcon className={cn(environmentTextClassName(environment), className)} />
+        <DevEnvironmentIconSmall className={cn(environmentTextClassName(environment), className)} />
      );
    case "PRODUCTION":
      return (
-        <ProdEnvironmentIcon className={cn(environmentTextClassName(environment), className)} />
+        <ProdEnvironmentIconSmall
+          className={cn(environmentTextClassName(environment), className)}
+        />
      );
    case "STAGING":
    case "PREVIEW":
      return (
-        <DeployedEnvironmentIcon className={cn(environmentTextClassName(environment), className)} />
+        <DeployedEnvironmentIconSmall
+          className={cn(environmentTextClassName(environment), className)}
+        />
      );
  }
 }
@@ -43,7 +45,7 @@ export function EnvironmentCombo({
 }) {
  return (
    <span className={cn("flex items-center gap-1.5 text-sm text-text-bright", className)}>
-      <EnvironmentIcon environment={environment} className="size-4" />
+      <EnvironmentIcon environment={environment} className="size-[1.125rem]" />
      <EnvironmentLabel environment={environment} />
    </span>
  );
@@ -89,54 +91,15 @@ export function environmentFullTitle(environment: Environment) {
  }
 }

-export function environmentTypeTitle(environment: Environment) {
-  switch (environment.type) {
-    case "PRODUCTION":
-      return "Prod";
-    case "STAGING":
-      return "Staging";
-    case "DEVELOPMENT":
-      return "Dev";
-    case "PREVIEW":
-      return "Preview";
-  }
-}
-
-export function environmentColorClassName(environment: Environment) {
-  switch (environment.type) {
-    case "PRODUCTION":
-      return "bg-green-500";
-    case "STAGING":
-      return "bg-amber-500";
-    case "DEVELOPMENT":
-      return "bg-pink-500";
-    case "PREVIEW":
-      return "bg-yellow-500";
-  }
-}
-
-export function environmentBorderClassName(environment: Environment) {
-  switch (environment.type) {
-    case "PRODUCTION":
-      return "border-green-500/50";
-    case "STAGING":
-      return "border-amber-500/50";
-    case "DEVELOPMENT":
-      return "border-pink-500/50";
-    case "PREVIEW":
-      return "border-yellow-500/50";
-  }
-}
-
 export function environmentTextClassName(environment: Environment) {
  switch (environment.type) {
    case "PRODUCTION":
-      return "text-green-500";
+      return "text-prod";
    case "STAGING":
-      return "text-amber-500";
+      return "text-staging";
    case "DEVELOPMENT":
-      return "text-pink-500";
+      return "text-dev";
    case "PREVIEW":
-      return "text-yellow-500";
+      return "text-preview";
  }
 }
@@ -39,7 +39,7 @@ export function RegenerateApiKeyModal({ id, title }: ModalProps) {
        </Button>
      </DialogTrigger>
      <DialogContent>
-        <DialogHeader>{`Regenerate ${title.toUpperCase()} environment key`}</DialogHeader>
+        <DialogHeader>{`Regenerate ${title} environment key`}</DialogHeader>
        <RegenerateApiKeyModalContent
          id={id}
          title={title}
@@ -43,7 +43,7 @@ export function EnvironmentSelector({
        isOpen={isMenuOpen}
        overflowHidden
        fullWidth
-        className={cn("h-7 overflow-hidden py-1 pl-2", className)}
+        className={cn("h-7 overflow-hidden py-1 pl-1.5", className)}
      >
        <EnvironmentCombo environment={environment} className="w-full text-2sm" />
      </PopoverArrowTrigger>
@@ -50,8 +50,10 @@ export function OrganizationSettingsSideMenu({
        </LinkButton>
      </div>
      <div className="mb-6 flex grow flex-col gap-4 overflow-y-auto px-1 pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-        <div className="flex flex-col gap-1">
-          <SideMenuHeader title="Organization" />
+        <div className="flex flex-col">
+          <div className="mb-1">
+            <SideMenuHeader title="Organization" />
+          </div>
          <SideMenuItem
            name="Usage"
            icon={ChartBarIcon}
@@ -83,7 +85,7 @@ export function OrganizationSettingsSideMenu({
          <SideMenuItem
            name="Settings"
            icon={Cog8ToothIcon}
-            activeIconColor="text-blue-500"
+            activeIconColor="text-orgSettings"
            to={organizationSettingsPath(organization)}
            data-action="settings"
          />
@@ -21,8 +21,8 @@ import { useNavigation } from "@remix-run/react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import simplur from "simplur";
 import { ConnectedIcon, DisconnectedIcon } from "~/assets/icons/ConnectionIcons";
-import { RunsIcon } from "~/assets/icons/RunsIcon";
-import { TaskIcon } from "~/assets/icons/TaskIcon";
+import { RunsIconExtraSmall, RunsIconSmall } from "~/assets/icons/RunsIcon";
+import { TaskIconSmall } from "~/assets/icons/TaskIcon";
 import { Avatar } from "~/components/primitives/Avatar";
 import { type MatchedEnvironment } from "~/hooks/useEnvironment";
 import { type MatchedOrganization } from "~/hooks/useOrganizations";
@@ -152,7 +152,7 @@ export function SideMenu({
        <div className="mb-6 flex flex-col gap-4 px-1">
          <div className="space-y-1">
            <SideMenuHeader title={"Environment"} />
-            <div className="flex items-center gap-1">
+            <div className="flex items-center">
              <EnvironmentSelector
                organization={organization}
                project={project}
@@ -165,49 +165,49 @@ export function SideMenu({
          <div>
            <SideMenuItem
              name="Tasks"
-              icon={TaskIcon}
-              activeIconColor="text-blue-500"
+              icon={TaskIconSmall}
+              activeIconColor="text-tasks"
              to={v3EnvironmentPath(organization, project, environment)}
              data-action="tasks"
            />
            <SideMenuItem
              name="Runs"
-              icon={RunsIcon}
-              activeIconColor="text-teal-500"
+              icon={RunsIconExtraSmall}
+              activeIconColor="text-runs"
              to={v3RunsPath(organization, project, environment)}
            />
            <SideMenuItem
              name="Batches"
              icon={Squares2X2Icon}
-              activeIconColor="text-blue-500"
+              activeIconColor="text-batches"
              to={v3BatchesPath(organization, project, environment)}
              data-action="batches"
            />
            <SideMenuItem
              name="Schedules"
              icon={ClockIcon}
-              activeIconColor="text-sun-500"
+              activeIconColor="text-schedules"
              to={v3SchedulesPath(organization, project, environment)}
              data-action="schedules"
            />
            <SideMenuItem
              name="Queues"
              icon={RectangleStackIcon}
-              activeIconColor="text-blue-500"
+              activeIconColor="text-queues"
              to={v3QueuesPath(organization, project, environment)}
              data-action="queues"
            />
            <SideMenuItem
              name="Deployments"
              icon={ServerStackIcon}
-              activeIconColor="text-blue-500"
+              activeIconColor="text-deployments"
              to={v3DeploymentsPath(organization, project, environment)}
              data-action="deployments"
            />
            <SideMenuItem
              name="Test"
              icon={BeakerIcon}
-              activeIconColor="text-lime-500"
+              activeIconColor="text-tests"
              to={v3TestPath(organization, project, environment)}
              data-action="test"
            />
@@ -226,28 +226,28 @@ export function SideMenu({
            <SideMenuItem
              name="API keys"
              icon={KeyIcon}
-              activeIconColor="text-amber-500"
+              activeIconColor="text-apiKeys"
              to={v3ApiKeysPath(organization, project, environment)}
              data-action="api keys"
            />
            <SideMenuItem
              name="Environment variables"
              icon={IdentificationIcon}
-              activeIconColor="text-pink-500"
+              activeIconColor="text-environmentVariables"
              to={v3EnvironmentVariablesPath(organization, project, environment)}
              data-action="environment variables"
            />
            <SideMenuItem
              name="Alerts"
              icon={BellAlertIcon}
-              activeIconColor="text-red-500"
+              activeIconColor="text-alerts"
              to={v3ProjectAlertsPath(organization, project, environment)}
              data-action="alerts"
            />
            <SideMenuItem
              name="Project settings"
              icon={Cog8ToothIcon}
-              activeIconColor="text-teal-500"
+              activeIconColor="text-projectSettings"
              to={v3ProjectSettingsPath(organization, project, environment)}
              data-action="project-settings"
            />
@@ -523,32 +523,30 @@ export function DevConnection() {

  return (
    <Dialog>
-      <div>
-        <TooltipProvider disableHoverableContent={true}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div>
-                <DialogTrigger asChild>
-                  <Button
-                    variant="minimal/small"
-                    className="px-1"
-                    LeadingIcon={
-                      isConnected ? (
-                        <ConnectedIcon className="size-5" />
-                      ) : (
-                        <DisconnectedIcon className="size-5" />
-                      )
-                    }
-                  />
-                </DialogTrigger>
-              </div>
-            </TooltipTrigger>
-            <TooltipContent side="right" className={"text-xs"}>
-              {isConnected ? "Your dev server is connected" : "Your dev server is not connected"}
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
+      <TooltipProvider disableHoverableContent={true}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="inline-flex">
+              <DialogTrigger asChild>
+                <Button
+                  variant="minimal/small"
+                  className="aspect-square h-7 p-1"
+                  LeadingIcon={
+                    isConnected ? (
+                      <ConnectedIcon className="size-5" />
+                    ) : (
+                      <DisconnectedIcon className="size-5" />
+                    )
+                  }
+                />
+              </DialogTrigger>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="right" className={"text-xs"}>
+            {isConnected ? "Your dev server is connected" : "Your dev server is not connected"}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
      <DialogContent>
        <DialogHeader>
          {isConnected ? "Your dev server is connected" : "Your dev server is not connected"}
@@ -29,7 +29,7 @@ export function SideMenuSection({
  return (
    <div>
      <div
-        className="flex cursor-pointer items-center gap-1 rounded-sm py-1 pl-1 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright"
+        className="flex cursor-pointer items-center gap-1 rounded-sm py-1 pl-1.5 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright"
        onClick={handleToggle}
      >
        <h2 className="text-xs">{title}</h2>
@@ -142,7 +142,7 @@ const variant = {
    textColor: "text-text-bright",
    button:
      "h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-charcoal-750",
-    icon: "h-4",
+    icon: "h-[1.125rem]",
    iconSpacing: "gap-x-1.5",
    shortcutVariant: undefined,
    shortcut: undefined,
@@ -13,6 +13,9 @@ 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";
+import { FunctionIcon } from "~/assets/icons/FunctionIcon";
 import { TriggerIcon } from "~/assets/icons/TriggerIcon";

 type TaskIconProps = {
@@ -76,31 +79,24 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) {
    case "warn":
      return <InformationCircleIcon className={cn(className, "text-amber-400")} />;
    case "error":
-      return <InformationCircleIcon className={cn(className, "text-rose-500")} />;
+      return <InformationCircleIcon className={cn(className, "text-error")} />;
    case "fatal":
-      return <HandRaisedIcon className={cn(className, "text-rose-800")} />;
+      return <HandRaisedIcon className={cn(className, "text-error")} />;
    case "task-middleware":
-      return <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
+      return <MiddlewareIcon className={cn(className, "text-text-dimmed")} />;
    case "task-fn-run":
-      return <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
+      return <RunFunctionIcon className={cn(className, "text-text-dimmed")} />;
    case "task-hook-init":
-      return <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
    case "task-hook-onStart":
-      return <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
    case "task-hook-onSuccess":
-      return <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
-    case "task-hook-onFailure":
-      return <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
-    case "task-hook-onComplete":
-      return <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
    case "task-hook-onWait":
-      return <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
    case "task-hook-onResume":
-      return <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
-    case "task-hook-catchError":
-      return <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
+    case "task-hook-onComplete":
    case "task-hook-cleanup":
-      return <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
+      return <FunctionIcon className={cn(className, "text-text-dimmed")} />;
+    case "task-hook-onFailure":
+    case "task-hook-catchError":
+      return <FunctionIcon className={cn(className, "text-error")} />;
  }

  return <InformationCircleIcon className={cn(className, "text-text-dimmed")} />;
@@ -2,7 +2,6 @@ import * as Ariakit from "@ariakit/react";
 import type { RuntimeEnvironment } from "@trigger.dev/database";
 import type { ReactNode } from "react";
 import { startTransition, useCallback, useMemo, useState } from "react";
-import { EnvironmentLabel, environmentTitle } from "~/components/environments/EnvironmentLabel";
 import { AppliedFilter } from "~/components/primitives/AppliedFilter";
 import { DateField } from "~/components/primitives/DateField";
 import { DateTime } from "~/components/primitives/DateTime";
@@ -14,7 +13,6 @@ import {
  SelectList,
  SelectPopover,
  SelectProvider,
-  shortcutFromIndex,
 } from "~/components/primitives/Select";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { Button } from "../../primitives/Buttons";
@@ -51,102 +49,6 @@ export function FilterMenuProvider({
  );
 }

-export function EnvironmentsDropdown({
-  trigger,
-  clearSearchValue,
-  searchValue,
-  onClose,
-  possibleEnvironments,
-}: {
-  trigger: ReactNode;
-  clearSearchValue: () => void;
-  searchValue: string;
-  onClose?: () => void;
-  possibleEnvironments: DisplayableEnvironment[];
-}) {
-  const { values, replace } = useSearchParams();
-
-  const handleChange = (values: string[]) => {
-    clearSearchValue();
-    replace({ environments: values, cursor: undefined, direction: undefined });
-  };
-
-  const filtered = useMemo(() => {
-    return possibleEnvironments.filter((item) => {
-      const title = environmentTitle(item, item.userName);
-      return title.toLowerCase().includes(searchValue.toLowerCase());
-    });
-  }, [searchValue, possibleEnvironments]);
-
-  return (
-    <SelectProvider value={values("environments")} setValue={handleChange} virtualFocus={true}>
-      {trigger}
-      <SelectPopover
-        className="min-w-0 max-w-[min(240px,var(--popover-available-width))]"
-        hideOnEscape={() => {
-          if (onClose) {
-            onClose();
-            return false;
-          }
-
-          return true;
-        }}
-      >
-        <ComboBox placeholder={"Filter by environment..."} value={searchValue} />
-        <SelectList>
-          {filtered.map((item, index) => (
-            <SelectItem
-              key={item.id}
-              value={item.id}
-              shortcut={shortcutFromIndex(index, { shortcutsEnabled: true })}
-            >
-              <EnvironmentLabel environment={item} />
-            </SelectItem>
-          ))}
-        </SelectList>
-      </SelectPopover>
-    </SelectProvider>
-  );
-}
-
-export function AppliedEnvironmentFilter({
-  possibleEnvironments,
-}: {
-  possibleEnvironments: DisplayableEnvironment[];
-}) {
-  const { values, del } = useSearchParams();
-
-  if (values("environments").length === 0) {
-    return null;
-  }
-
-  return (
-    <FilterMenuProvider>
-      {(search, setSearch) => (
-        <EnvironmentsDropdown
-          trigger={
-            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
-              <AppliedFilter
-                label="Environment"
-                value={appliedSummary(
-                  values("environments").map((v) => {
-                    const environment = possibleEnvironments.find((env) => env.id === v);
-                    return environment ? environmentTitle(environment, environment.userName) : v;
-                  })
-                )}
-                onRemove={() => del(["environments", "cursor", "direction"])}
-              />
-            </Ariakit.Select>
-          }
-          searchValue={search}
-          clearSearchValue={() => setSearch("")}
-          possibleEnvironments={possibleEnvironments}
-        />
-      )}
-    </FilterMenuProvider>
-  );
-}
-
 const timePeriods = [
  {
    label: "Last 5 mins",
@@ -1,6 +1,6 @@
 import { ClockIcon } from "@heroicons/react/20/solid";
-import { TaskTriggerSource } from "@trigger.dev/database";
-import { TaskIcon } from "~/assets/icons/TaskIcon";
+import { type TaskTriggerSource } from "@trigger.dev/database";
+import { TaskIconSmall } from "~/assets/icons/TaskIcon";
 import { cn } from "~/utils/cn";

 export function TaskTriggerSourceIcon({
@@ -12,14 +12,10 @@ export function TaskTriggerSourceIcon({
 }) {
  switch (source) {
    case "STANDARD": {
-      return (
-        <div className={cn("grid size-4 place-items-center text-blue-500", className)}>
-          <TaskIcon className="size-[87.5%]" />
-        </div>
-      );
+      return <TaskIconSmall className="size-[1.125rem] text-tasks" />;
    }
    case "SCHEDULED": {
-      return <ClockIcon className={cn("size-4 text-sun-500", className)} />;
+      return <ClockIcon className={cn("size-[1.125rem] text-schedules", className)} />;
    }
  }
 }
@@ -659,7 +659,7 @@ function HelpfulInfoHasTasks({ onClose }: { onClose: () => void }) {
        />
        <div className="mb-2 flex items-center gap-2 border-b border-grid-dimmed pb-2 pt-6">
          <Header2 className="flex items-center gap-2">
-            <TaskIcon className="size-4 text-blue-500" />
+            <TaskIcon className="size-5 text-blue-500" />
            Example tasks
          </Header2>
        </div>
@@ -3,7 +3,7 @@ import { type MetaFunction } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
-import { EnvironmentCombo, environmentTitle } from "~/components/environments/EnvironmentLabel";
+import { EnvironmentCombo, environmentFullTitle } from "~/components/environments/EnvironmentLabel";
 import { RegenerateApiKeyModal } from "~/components/environments/RegenerateApiKeyModal";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { LinkButton } from "~/components/primitives/Buttons";
@@ -124,7 +124,7 @@ export default function Page() {
                    popoverContent={
                      <RegenerateApiKeyModal
                        id={environment.id}
-                        title={environmentTitle(environment)}
+                        title={environmentFullTitle(environment)}
                      />
                    }
                  ></TableCellMenu>
@@ -10,15 +10,11 @@ import { parse } from "@conform-to/zod";
 import { LockClosedIcon, LockOpenIcon, PlusIcon, XMarkIcon } from "@heroicons/react/20/solid";
 import { Form, useActionData, useNavigate, useNavigation } from "@remix-run/react";
 import { ActionFunctionArgs, LoaderFunctionArgs, json } from "@remix-run/server-runtime";
+import dotenv from "dotenv";
 import { RefObject, useCallback, useEffect, useRef, useState } from "react";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
-import {
-  environmentTextClassName,
-  environmentTitle,
-  EnvironmentCombo,
-  EnvironmentLabel,
-} from "~/components/environments/EnvironmentLabel";
+import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
 import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog";
@@ -29,8 +25,17 @@ import { Hint } from "~/components/primitives/Hint";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
+import { Paragraph } from "~/components/primitives/Paragraph";
 import { Switch } from "~/components/primitives/Switch";
+import { TextLink } from "~/components/primitives/TextLink";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "~/components/primitives/Tooltip";
 import { prisma } from "~/db.server";
+import { useEnvironment } from "~/hooks/useEnvironment";
 import { useList } from "~/hooks/useList";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
@@ -45,16 +50,6 @@ import {
 } from "~/utils/pathBuilder";
 import { EnvironmentVariablesRepository } from "~/v3/environmentVariables/environmentVariablesRepository.server";
 import { EnvironmentVariableKey } from "~/v3/environmentVariables/repository";
-import dotenv from "dotenv";
-import { Paragraph } from "~/components/primitives/Paragraph";
-import { TextLink } from "~/components/primitives/TextLink";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "~/components/primitives/Tooltip";
-import { useEnvironment } from "~/hooks/useEnvironment";

 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
  const userId = await requireUserId(request);
@@ -13,9 +13,10 @@ import { type RuntimeEnvironmentType } from "@trigger.dev/database";
 import { useEffect, useState } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
-import { TaskIcon } from "~/assets/icons/TaskIcon";
+import { TaskIconSmall } from "~/assets/icons/TaskIcon";
 import upgradeForQueuesPath from "~/assets/images/queues-dashboard.png";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
+import { QueuesHasNoTasks } from "~/components/BlankStatePanels";
 import { environmentFullTitle } from "~/components/environments/EnvironmentLabel";
 import { Feedback } from "~/components/Feedback";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
@@ -60,7 +61,6 @@ import { docsPath, EnvironmentParamSchema, v3BillingPath } from "~/utils/pathBui
 import { PauseEnvironmentService } from "~/v3/services/pauseEnvironment.server";
 import { PauseQueueService } from "~/v3/services/pauseQueue.server";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
-import { QueuesHasNoTasks } from "~/components/BlankStatePanels";

 const SearchParamsSchema = z.object({
  page: z.coerce.number().min(1).default(1),
@@ -336,9 +336,9 @@ export default function Page() {
                            {queue.type === "task" ? (
                              <SimpleTooltip
                                button={
-                                  <TaskIcon
+                                  <TaskIconSmall
                                    className={cn(
-                                      "size-4 text-blue-500",
+                                      "size-[1.125rem] text-blue-500",
                                      queue.paused && "opacity-50"
                                    )}
                                  />
@@ -350,7 +350,7 @@ export default function Page() {
                                button={
                                  <RectangleStackIcon
                                    className={cn(
-                                      "size-4 text-purple-500",
+                                      "size-[1.125rem] text-purple-500",
                                      queue.paused && "opacity-50"
                                    )}
                                  />
@@ -631,11 +631,11 @@ function TasksTreeView({
                    </div>

                    <div className="flex w-full items-center justify-between gap-2 pl-1">
-                      <div className="flex items-center gap-2 overflow-x-hidden">
+                      <div className="flex items-center gap-1.5 overflow-x-hidden">
                        <RunIcon
                          name={node.data.style?.icon}
                          spanName={node.data.message}
-                          className="h-4 min-h-4 w-4 min-w-4"
+                          className="size-5 min-h-5 min-w-5"
                        />
                        <NodeText node={node} />
                        {node.data.isRoot && !rootRun && <Badge variant="extra-small">Root</Badge>}
@@ -1,9 +1,9 @@
 import type { ActionFunctionArgs } from "@remix-run/server-runtime";
 import { z } from "zod";
+import { environmentFullTitle } from "~/components/environments/EnvironmentLabel";
 import { regenerateApiKey } from "~/models/api-key.server";
-import { requireUserId } from "~/services/session.server";
 import { jsonWithErrorMessage, jsonWithSuccessMessage } from "~/models/message.server";
-import { environmentTitle } from "~/components/environments/EnvironmentLabel";
+import { requireUserId } from "~/services/session.server";

 const ParamsSchema = z.object({
  environmentId: z.string(),
@@ -25,7 +25,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
    return jsonWithSuccessMessage(
      { ok: true },
      request,
-      `API keys regenerated for ${environmentTitle(updatedEnvironment)} environment`
+      `API keys regenerated for ${environmentFullTitle(updatedEnvironment)} environment`
    );
  } catch (error) {
    const message = error instanceof Error ? error.message : "Unknown error";
@@ -200,7 +200,7 @@ function SpanBody({
          <RunIcon
            name={span.style?.icon}
            spanName={span.message}
-            className="h-4 min-h-4 w-4 min-w-4"
+            className="size-5 min-h-5 min-w-5"
          />
          <Header2 className={cn("overflow-x-hidden")}>
            <SpanTitle {...span} size="large" hideAccessory />
@@ -334,7 +334,7 @@ function RunBody({
          <RunIcon
            name={run.isCached ? "task-cached" : "task"}
            spanName={run.taskIdentifier}
-            className="h-4 min-h-4 w-4 min-w-4"
+            className="size-5 min-h-5 min-w-5"
          />
          <Header2 className={cn("overflow-x-hidden text-blue-500")}>
            <span className="truncate">
@@ -149,8 +149,24 @@ const warning = colors.amber[500];
 const error = colors.rose[600];
 const devEnv = colors.pink[500];
 const stagingEnv = colors.amber[400];
+const previewEnv = colors.amber[400];
 const prodEnv = mint[500];

+/** Icon colors */
+const tasks = colors.blue[500];
+const runs = colors.indigo[500];
+const batches = colors.pink[500];
+const schedules = colors.yellow[500];
+const queues = colors.purple[500];
+const deployments = colors.green[500];
+const tests = colors.lime[500];
+const apiKeys = colors.amber[500];
+const environmentVariables = colors.pink[500];
+const alerts = colors.red[500];
+const projectSettings = colors.blue[500];
+const orgSettings = colors.blue[500];
+const docs = colors.blue[500];
+
 /** Other variables */
 const radius = "0.5rem";

@@ -211,6 +227,20 @@ module.exports = {
        dev: devEnv,
        staging: stagingEnv,
        prod: prodEnv,
+        preview: previewEnv,
+        tasks,
+        runs,
+        batches,
+        schedules,
+        queues,
+        deployments,
+        tests,
+        apiKeys,
+        environmentVariables,
+        alerts,
+        projectSettings,
+        orgSettings,
+        docs,
      },
      focusStyles: {
        outline: "1px solid",
@@ -9,7 +9,13 @@ import {
  sanitizeError,
  TaskPayloadParsedError,
 } from "../errors.js";
-import { flattenAttributes, lifecycleHooks, runMetadata, waitUntil } from "../index.js";
+import {
+  accessoryAttributes,
+  flattenAttributes,
+  lifecycleHooks,
+  runMetadata,
+  waitUntil,
+} from "../index.js";
 import {
  AnyOnMiddlewareHookFunction,
  RegisteredHookFunction,
@@ -314,13 +320,14 @@ export class TaskExecutor {
      (next, hook) => {
        return async () => {
          await this._tracer.startActiveSpan(
-            hook.name ? `middleware/${hook.name}` : "middleware",
+            "middleware()",
            async (span) => {
              await hook.fn({ payload, ctx, signal, task: this.task.id, next });
            },
            {
              attributes: {
                [SemanticInternalAttributes.STYLE_ICON]: "task-middleware",
+                ...this.#lifecycleHookAccessoryAttributes(hook.name),
              },
            }
          );
@@ -376,7 +383,7 @@ export class TaskExecutor {

    return runTimelineMetrics.measureMetric("trigger.dev/execution", "run", async () => {
      return await this._tracer.startActiveSpan(
-        "run",
+        "run()",
        async (span) => {
          if (abortPromise) {
            // Race between the run function and the abort promise
@@ -413,7 +420,7 @@ export class TaskExecutor {
        for (const hook of globalWaitHooks) {
          const [hookError] = await tryCatch(
            this._tracer.startActiveSpan(
-              hook.name ? `onWait/${hook.name}` : "onWait/global",
+              "onWait()",
              async (span) => {
                await hook.fn({ payload, ctx, signal, task: this.task.id, wait, init: initOutput });
              },
@@ -421,6 +428,7 @@ export class TaskExecutor {
                attributes: {
                  [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onWait",
                  [SemanticInternalAttributes.COLLAPSED]: true,
+                  ...this.#lifecycleHookAccessoryAttributes(hook.name),
                },
              }
            )
@@ -434,7 +442,7 @@ export class TaskExecutor {
        if (taskWaitHook) {
          const [hookError] = await tryCatch(
            this._tracer.startActiveSpan(
-              "onWait/task",
+              "onWait()",
              async (span) => {
                await taskWaitHook({
                  payload,
@@ -449,6 +457,7 @@ export class TaskExecutor {
                attributes: {
                  [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onWait",
                  [SemanticInternalAttributes.COLLAPSED]: true,
+                  ...this.#lifecycleHookAccessoryAttributes("task"),
                },
              }
            )
@@ -483,7 +492,7 @@ export class TaskExecutor {
        for (const hook of globalResumeHooks) {
          const [hookError] = await tryCatch(
            this._tracer.startActiveSpan(
-              hook.name ? `onResume/${hook.name}` : "onResume/global",
+              "onResume()",
              async (span) => {
                await hook.fn({ payload, ctx, signal, task: this.task.id, wait, init: initOutput });
              },
@@ -491,6 +500,7 @@ export class TaskExecutor {
                attributes: {
                  [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onResume",
                  [SemanticInternalAttributes.COLLAPSED]: true,
+                  ...this.#lifecycleHookAccessoryAttributes(hook.name),
                },
              }
            )
@@ -504,7 +514,7 @@ export class TaskExecutor {
        if (taskResumeHook) {
          const [hookError] = await tryCatch(
            this._tracer.startActiveSpan(
-              "onResume/task",
+              "onResume()",
              async (span) => {
                await taskResumeHook({
                  payload,
@@ -519,6 +529,7 @@ export class TaskExecutor {
                attributes: {
                  [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onResume",
                  [SemanticInternalAttributes.COLLAPSED]: true,
+                  ...this.#lifecycleHookAccessoryAttributes("task"),
                },
              }
            )
@@ -549,7 +560,7 @@ export class TaskExecutor {
        for (const hook of globalInitHooks) {
          const [hookError, result] = await tryCatch(
            this._tracer.startActiveSpan(
-              hook.name ? `init/${hook.name}` : "init/global",
+              "init()",
              async (span) => {
                const result = await hook.fn({ payload, ctx, signal, task: this.task.id });

@@ -564,6 +575,7 @@ export class TaskExecutor {
                attributes: {
                  [SemanticInternalAttributes.STYLE_ICON]: "task-hook-init",
                  [SemanticInternalAttributes.COLLAPSED]: true,
+                  ...this.#lifecycleHookAccessoryAttributes(hook.name),
                },
              }
            )
@@ -584,7 +596,7 @@ export class TaskExecutor {
        if (taskInitHook) {
          const [hookError, taskResult] = await tryCatch(
            this._tracer.startActiveSpan(
-              "init/task",
+              "init()",
              async (span) => {
                const result = await taskInitHook({ payload, ctx, signal, task: this.task.id });

@@ -599,6 +611,7 @@ export class TaskExecutor {
                attributes: {
                  [SemanticInternalAttributes.STYLE_ICON]: "task-hook-init",
                  [SemanticInternalAttributes.COLLAPSED]: true,
+                  ...this.#lifecycleHookAccessoryAttributes("task"),
                },
              }
            )
@@ -646,7 +659,7 @@ export class TaskExecutor {
      for (const hook of globalSuccessHooks) {
        const [hookError] = await tryCatch(
          this._tracer.startActiveSpan(
-            hook.name ? `onSuccess/${hook.name}` : "onSuccess/global",
+            "onSuccess()",
            async (span) => {
              await hook.fn({
                payload,
@@ -661,6 +674,7 @@ export class TaskExecutor {
              attributes: {
                [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onSuccess",
                [SemanticInternalAttributes.COLLAPSED]: true,
+                ...this.#lifecycleHookAccessoryAttributes(hook.name),
              },
            }
          )
@@ -674,7 +688,7 @@ export class TaskExecutor {
      if (taskSuccessHook) {
        const [hookError] = await tryCatch(
          this._tracer.startActiveSpan(
-            "onSuccess/task",
+            "onSuccess()",
            async (span) => {
              await taskSuccessHook({
                payload,
@@ -689,6 +703,7 @@ export class TaskExecutor {
              attributes: {
                [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onSuccess",
                [SemanticInternalAttributes.COLLAPSED]: true,
+                ...this.#lifecycleHookAccessoryAttributes("task"),
              },
            }
          )
@@ -719,7 +734,7 @@ export class TaskExecutor {
      for (const hook of globalFailureHooks) {
        const [hookError] = await tryCatch(
          this._tracer.startActiveSpan(
-            hook.name ? `onFailure/${hook.name}` : "onFailure/global",
+            "onFailure()",
            async (span) => {
              await hook.fn({
                payload,
@@ -734,6 +749,7 @@ export class TaskExecutor {
              attributes: {
                [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onFailure",
                [SemanticInternalAttributes.COLLAPSED]: true,
+                ...this.#lifecycleHookAccessoryAttributes(hook.name),
              },
            }
          )
@@ -747,7 +763,7 @@ export class TaskExecutor {
      if (taskFailureHook) {
        const [hookError] = await tryCatch(
          this._tracer.startActiveSpan(
-            "onFailure/task",
+            "onFailure()",
            async (span) => {
              await taskFailureHook({
                payload,
@@ -762,6 +778,7 @@ export class TaskExecutor {
              attributes: {
                [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onFailure",
                [SemanticInternalAttributes.COLLAPSED]: true,
+                ...this.#lifecycleHookAccessoryAttributes("task"),
              },
            }
          )
@@ -803,7 +820,7 @@ export class TaskExecutor {
      for (const hook of globalStartHooks) {
        const [hookError] = await tryCatch(
          this._tracer.startActiveSpan(
-            hook.name ? `onStart/${hook.name}` : "onStart/global",
+            "onStart()",
            async (span) => {
              await hook.fn({ payload, ctx, signal, task: this.task.id, init: initOutput });
            },
@@ -811,6 +828,7 @@ export class TaskExecutor {
              attributes: {
                [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onStart",
                [SemanticInternalAttributes.COLLAPSED]: true,
+                ...this.#lifecycleHookAccessoryAttributes(hook.name),
              },
            }
          )
@@ -824,7 +842,7 @@ export class TaskExecutor {
      if (taskStartHook) {
        const [hookError] = await tryCatch(
          this._tracer.startActiveSpan(
-            "onStart/task",
+            "onStart()",
            async (span) => {
              await taskStartHook({
                payload,
@@ -838,6 +856,7 @@ export class TaskExecutor {
              attributes: {
                [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onStart",
                [SemanticInternalAttributes.COLLAPSED]: true,
+                ...this.#lifecycleHookAccessoryAttributes("task"),
              },
            }
          )
@@ -877,7 +896,7 @@ export class TaskExecutor {
      for (const hook of globalCleanupHooks) {
        const [hookError] = await tryCatch(
          this._tracer.startActiveSpan(
-            hook.name ? `cleanup/${hook.name}` : "cleanup/global",
+            "cleanup()",
            async (span) => {
              await hook.fn({
                payload,
@@ -891,6 +910,7 @@ export class TaskExecutor {
              attributes: {
                [SemanticInternalAttributes.STYLE_ICON]: "task-hook-cleanup",
                [SemanticInternalAttributes.COLLAPSED]: true,
+                ...this.#lifecycleHookAccessoryAttributes(hook.name),
              },
            }
          )
@@ -904,7 +924,7 @@ export class TaskExecutor {
      if (taskCleanupHook) {
        const [hookError] = await tryCatch(
          this._tracer.startActiveSpan(
-            "cleanup/task",
+            "cleanup()",
            async (span) => {
              await taskCleanupHook({
                payload,
@@ -918,6 +938,7 @@ export class TaskExecutor {
              attributes: {
                [SemanticInternalAttributes.STYLE_ICON]: "task-hook-cleanup",
                [SemanticInternalAttributes.COLLAPSED]: true,
+                ...this.#lifecycleHookAccessoryAttributes("task"),
              },
            }
          )
@@ -1134,7 +1155,7 @@ export class TaskExecutor {
      for (const hook of globalCompleteHooks) {
        const [hookError] = await tryCatch(
          this._tracer.startActiveSpan(
-            hook.name ? `onComplete/${hook.name}` : "onComplete/global",
+            "onComplete()",
            async (span) => {
              await hook.fn({
                payload,
@@ -1149,6 +1170,7 @@ export class TaskExecutor {
              attributes: {
                [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onComplete",
                [SemanticInternalAttributes.COLLAPSED]: true,
+                ...this.#lifecycleHookAccessoryAttributes(hook.name),
              },
            }
          )
@@ -1162,7 +1184,7 @@ export class TaskExecutor {
      if (taskCompleteHook) {
        const [hookError] = await tryCatch(
          this._tracer.startActiveSpan(
-            "onComplete/task",
+            "onComplete()",
            async (span) => {
              await taskCompleteHook({
                payload,
@@ -1177,6 +1199,7 @@ export class TaskExecutor {
              attributes: {
                [SemanticInternalAttributes.STYLE_ICON]: "task-hook-onComplete",
                [SemanticInternalAttributes.COLLAPSED]: true,
+                ...this.#lifecycleHookAccessoryAttributes("task"),
              },
            }
          )
@@ -1206,4 +1229,16 @@ export class TaskExecutor {
      },
    } satisfies TaskRunExecutionResult;
  }
+
+  #lifecycleHookAccessoryAttributes(name?: string) {
+    return accessoryAttributes({
+      items: [
+        {
+          text: name ?? "global",
+          variant: "normal",
+        },
+      ],
+      style: "codepath",
+    });
+  }
 }