From 9088ea71909796e25e86ed2aef24007ec01a5360 Mon Sep 17 00:00:00 2001
From: Alessandro Pogliaghi <apogliaghi@gmail.com>
Date: Wed, 22 Jul 2026 12:58:48 +0100
Subject: [PATCH 1/4] Show stopped cloud tasks with a neutral status

Generated-By: PostHog Code
Task-Id: e71bcaa1-6a25-47c7-b878-2eddb5e77a8e
---
 .../sidebar/components/items/TaskIcon.tsx     | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx b/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx
index fbe1adcfb5..6088ed29b7 100644
--- a/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx
+++ b/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx
@@ -152,14 +152,28 @@ function CloudStatusIcon({
       </Tooltip>
     );
   }
-  if (taskRunStatus === "failed" || taskRunStatus === "cancelled") {
-    const statusLabel =
-      taskRunStatus === "cancelled"
-        ? `${sourceLabel} (cancelled)`
-        : `${sourceLabel} (failed)`;
+  if (taskRunStatus === "cancelled") {
     return (
       <Tooltip
-        content={link ? `Open ${sourceLabel} thread` : statusLabel}
+        content={
+          link ? `Open ${sourceLabel} thread` : `${sourceLabel} (stopped)`
+        }
+        side="right"
+      >
+        {renderIconSpan({
+          icon: <Icon size={size} color="var(--gray-9)" />,
+          link,
+          ariaLabel,
+        })}
+      </Tooltip>
+    );
+  }
+  if (taskRunStatus === "failed") {
+    return (
+      <Tooltip
+        content={
+          link ? `Open ${sourceLabel} thread` : `${sourceLabel} (failed)`
+        }
         side="right"
       >
         {renderIconSpan({

From 6c60f6b610f523c33d918cc657f6042f96a6130d Mon Sep 17 00:00:00 2001
From: Alessandro Pogliaghi <apogliaghi@gmail.com>
Date: Wed, 22 Jul 2026 13:01:36 +0100
Subject: [PATCH 2/4] Use completed styling for stopped cloud tasks

Generated-By: PostHog Code
Task-Id: e71bcaa1-6a25-47c7-b878-2eddb5e77a8e
---
 packages/ui/src/features/sidebar/components/items/TaskIcon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx b/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx
index 6088ed29b7..b14da72c85 100644
--- a/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx
+++ b/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx
@@ -161,7 +161,7 @@ function CloudStatusIcon({
         side="right"
       >
         {renderIconSpan({
-          icon: <Icon size={size} color="var(--gray-9)" />,
+          icon: <Icon size={size} weight="fill" color="var(--green-11)" />,
           link,
           ariaLabel,
         })}

From 424d45447d9c8fd50f0b693ffe064e5f207bb9ff Mon Sep 17 00:00:00 2001
From: Alessandro Pogliaghi <apogliaghi@gmail.com>
Date: Wed, 22 Jul 2026 13:05:06 +0100
Subject: [PATCH 3/4] Render sidebar icon helper as a component

Generated-By: PostHog Code
Task-Id: e71bcaa1-6a25-47c7-b878-2eddb5e77a8e
---
 .../sidebar/components/items/TaskIcon.tsx     | 68 +++++++++----------
 1 file changed, 32 insertions(+), 36 deletions(-)

diff --git a/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx b/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx
index b14da72c85..c26e03fb57 100644
--- a/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx
+++ b/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx
@@ -62,7 +62,7 @@ export function getOriginProductMeta(
 // clickable NestedButton that opens the originating thread externally.
 // SidebarItem renders the row as a `<button>`, so a real `<a>` or a nested
 // `<button>` here would be invalid HTML.
-function renderIconSpan({
+function IconSpan({
   icon,
   link,
   ariaLabel,
@@ -112,11 +112,11 @@ function CloudStatusIcon({
         }
         side="right"
       >
-        {renderIconSpan({
-          icon: <Icon size={size} className="ph-pulse" />,
-          link,
-          ariaLabel,
-        })}
+        <IconSpan
+          icon={<Icon size={size} className="ph-pulse" />}
+          link={link}
+          ariaLabel={ariaLabel}
+        />
       </Tooltip>
     );
   }
@@ -128,11 +128,11 @@ function CloudStatusIcon({
         }
         side="right"
       >
-        {renderIconSpan({
-          icon: <Icon size={size} weight="fill" color="var(--accent-11)" />,
-          link,
-          ariaLabel,
-        })}
+        <IconSpan
+          icon={<Icon size={size} weight="fill" color="var(--accent-11)" />}
+          link={link}
+          ariaLabel={ariaLabel}
+        />
       </Tooltip>
     );
   }
@@ -144,11 +144,11 @@ function CloudStatusIcon({
         }
         side="right"
       >
-        {renderIconSpan({
-          icon: <Icon size={size} weight="fill" color="var(--green-11)" />,
-          link,
-          ariaLabel,
-        })}
+        <IconSpan
+          icon={<Icon size={size} weight="fill" color="var(--green-11)" />}
+          link={link}
+          ariaLabel={ariaLabel}
+        />
       </Tooltip>
     );
   }
@@ -160,11 +160,11 @@ function CloudStatusIcon({
         }
         side="right"
       >
-        {renderIconSpan({
-          icon: <Icon size={size} weight="fill" color="var(--green-11)" />,
-          link,
-          ariaLabel,
-        })}
+        <IconSpan
+          icon={<Icon size={size} weight="fill" color="var(--green-11)" />}
+          link={link}
+          ariaLabel={ariaLabel}
+        />
       </Tooltip>
     );
   }
@@ -176,11 +176,11 @@ function CloudStatusIcon({
         }
         side="right"
       >
-        {renderIconSpan({
-          icon: <Icon size={size} weight="fill" color="var(--red-11)" />,
-          link,
-          ariaLabel,
-        })}
+        <IconSpan
+          icon={<Icon size={size} weight="fill" color="var(--red-11)" />}
+          link={link}
+          ariaLabel={ariaLabel}
+        />
       </Tooltip>
     );
   }
@@ -189,11 +189,7 @@ function CloudStatusIcon({
       content={link ? `Open ${sourceLabel} thread` : sourceLabel}
       side="right"
     >
-      {renderIconSpan({
-        icon: <Icon size={size} />,
-        link,
-        ariaLabel,
-      })}
+      <IconSpan icon={<Icon size={size} />} link={link} ariaLabel={ariaLabel} />
     </Tooltip>
   );
 }
@@ -365,11 +361,11 @@ export function TaskIcon({
         content={link ? `Open ${label} thread` : `From ${label}`}
         side="right"
       >
-        {renderIconSpan({
-          icon: <Icon size={size} color="var(--gray-10)" />,
-          link,
-          ariaLabel: `Open ${label} thread`,
-        })}
+        <IconSpan
+          icon={<Icon size={size} color="var(--gray-10)" />}
+          link={link}
+          ariaLabel={`Open ${label} thread`}
+        />
       </Tooltip>
     );
   }

From f683cdf05c37d2819a0f27db05412a16613d5ab7 Mon Sep 17 00:00:00 2001
From: Alessandro Pogliaghi <apogliaghi@gmail.com>
Date: Wed, 22 Jul 2026 13:09:15 +0100
Subject: [PATCH 4/4] Add accessible stopped task status

Generated-By: PostHog Code
Task-Id: e71bcaa1-6a25-47c7-b878-2eddb5e77a8e
---
 .../sidebar/components/items/TaskIcon.tsx     | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx b/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx
index c26e03fb57..a978b17725 100644
--- a/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx
+++ b/packages/ui/src/features/sidebar/components/items/TaskIcon.tsx
@@ -72,7 +72,18 @@ function IconSpan({
   ariaLabel?: string;
 }) {
   if (!link) {
-    return <span className="flex items-center justify-center">{icon}</span>;
+    if (!ariaLabel) {
+      return <span className="flex items-center justify-center">{icon}</span>;
+    }
+    return (
+      <span
+        aria-label={ariaLabel}
+        className="flex items-center justify-center"
+        role="img"
+      >
+        {icon}
+      </span>
+    );
   }
   return (
     <NestedButton
@@ -163,7 +174,11 @@ function CloudStatusIcon({
         <IconSpan
           icon={<Icon size={size} weight="fill" color="var(--green-11)" />}
           link={link}
-          ariaLabel={ariaLabel}
+          ariaLabel={
+            link
+              ? `Open ${sourceLabel} thread (stopped)`
+              : `${sourceLabel} (stopped)`
+          }
         />
       </Tooltip>
     );