ymichael · ymichael · Jun 19, 2026
diff --git a/apps/app/.ladle/story-fixtures.ts b/apps/app/.ladle/story-fixtures.ts
@@ -318,6 +318,7 @@ export function makeThreadListEntry(
     latestAttentionAt: 100,
     createdAt: 0,
     updatedAt: 100,
+    activity: { activeWorkflowCount: 0, activeBackgroundSubagentCount: 0 },
     hasPendingInteraction: false,
     environmentHostId: null,
     environmentName: null,

diff --git a/apps/app/src/components/sidebar/ProjectRow.tsx b/apps/app/src/components/sidebar/ProjectRow.tsx
@@ -720,7 +720,14 @@ function EnvironmentThreadGroupHeader({
           >
             <ThreadStatusGlyph
               hasPendingInteraction={childActivity.pending}
-              isBusy={childActivity.working}
+              isBusy={
+                childActivity.runtimeWorking || childActivity.backgroundWorking
+              }
+              isWorkflowActive={
+                !childActivity.runtimeWorking &&
+                !childActivity.backgroundWorking &&
+                childActivity.workflow
+              }
               showUnreadBadge={childActivity.unread}
               unreadBadgeTone={childActivity.unreadError ? "error" : "default"}
             />

diff --git a/apps/app/src/components/sidebar/SidebarThreadSearchPanel.test.tsx b/apps/app/src/components/sidebar/SidebarThreadSearchPanel.test.tsx
@@ -33,6 +33,7 @@ function createThreadListEntry({
   title: string;
 }): ThreadListEntry {
   return {
+    activity: { activeWorkflowCount: 0, activeBackgroundSubagentCount: 0 },
     archivedAt: null,
     childOrigin: null,
     createdAt: 1000,

diff --git a/apps/app/src/components/sidebar/ThreadRow.test.tsx b/apps/app/src/components/sidebar/ThreadRow.test.tsx
@@ -0,0 +1,113 @@
+// @vitest-environment jsdom
+
+import { cleanup, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import type { ReactNode } from "react";
+import type { ThreadListEntry } from "@bb/domain";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ThreadRow, type ThreadRowOptions } from "./ThreadRow";
+
+vi.mock("@/components/thread/ThreadActionsMenu", () => ({
+  ThreadActionsContextMenu: ({ children }: { children: ReactNode }) => (
+    <>{children}</>
+  ),
+  ThreadActionsMenu: () => null,
+}));
+
+function createThread(
+  overrides: Partial<ThreadListEntry> = {},
+): ThreadListEntry {
+  return {
+    id: "thr_test",
+    projectId: "proj_test",
+    environmentId: null,
+    providerId: "codex",
+    title: "Thread",
+    titleFallback: "Thread",
+    status: "idle",
+    parentThreadId: null,
+    sourceThreadId: null,
+    originKind: null,
+    childOrigin: null,
+    archivedAt: null,
+    pinnedAt: null,
+    pinSortKey: null,
+    deletedAt: null,
+    lastReadAt: 0,
+    latestAttentionAt: 1,
+    createdAt: 1,
+    updatedAt: 1,
+    activity: { activeWorkflowCount: 0, activeBackgroundSubagentCount: 0 },
+    hasPendingInteraction: false,
+    environmentHostId: null,
+    environmentName: null,
+    environmentBranchName: null,
+    environmentWorkspaceDisplayKind: "other",
+    runtime: {
+      displayStatus: "idle",
+      hostReconnectGraceExpiresAt: null,
+    },
+    ...overrides,
+  };
+}
+
+const DEFAULT_OPTIONS: ThreadRowOptions = {
+  kind: "default",
+  depth: 1,
+  isCompact: false,
+};
+
+function renderThreadRow({
+  isActive = false,
+  options = DEFAULT_OPTIONS,
+  thread = createThread(),
+}: {
+  isActive?: boolean;
+  options?: ThreadRowOptions;
+  thread?: ThreadListEntry;
+}) {
+  render(
+    <MemoryRouter>
+      <ThreadRow
+        projectId={thread.projectId}
+        thread={thread}
+        isActive={isActive}
+        hasComposerDraft={false}
+        options={options}
+      />
+    </MemoryRouter>,
+  );
+}
+
+afterEach(cleanup);
+
+describe("ThreadRow", () => {
+  it("shows a workflow glyph for an idle thread with an active workflow", () => {
+    renderThreadRow({
+      thread: createThread({
+        title: "Workflow thread",
+        activity: { activeWorkflowCount: 1, activeBackgroundSubagentCount: 0 },
+      }),
+    });
+
+    expect(screen.getByLabelText("Workflow running")).not.toBeNull();
+    expect(screen.queryByLabelText("Thread working")).toBeNull();
+  });
+
+  it("keeps the spinner for active runtime work even with an active workflow", () => {
+    renderThreadRow({
+      thread: createThread({
+        title: "Active workflow thread",
+        status: "active",
+        runtime: {
+          displayStatus: "active",
+          hostReconnectGraceExpiresAt: null,
+        },
+        activity: { activeWorkflowCount: 1, activeBackgroundSubagentCount: 0 },
+      }),
+    });
+
+    expect(screen.getByLabelText("Thread working")).not.toBeNull();
+    expect(screen.queryByLabelText("Workflow running")).toBeNull();
+  });
+});
diff --git a/apps/app/src/components/sidebar/ThreadRow.tsx b/apps/app/src/components/sidebar/ThreadRow.tsx
@@ -30,7 +30,10 @@ import {
   SIDEBAR_HOVER_ACTIONS_ROW_CLASS,
 } from "@/components/ui/sidebar-hover-actions.js";
 import {
+  hasActiveBackgroundActivity,
+  hasActiveWorkflowActivity,
   isBusyThread,
+  isRuntimeBusyThread,
   isUnreadDoneThread,
   NO_COLLAPSED_CHILD_ACTIVITY,
   type CollapsedChildActivity,
@@ -144,6 +147,7 @@ function renderThreadRowContainer({
 interface ThreadStatusGlyphProps {
   hasPendingInteraction: boolean;
   isBusy: boolean;
+  isWorkflowActive: boolean;
   showUnreadBadge: boolean;
   unreadBadgeTone: SidebarUnreadDotTone;
 }
@@ -155,6 +159,7 @@ interface ThreadUnreadBadgeLabelArgs {
 export function ThreadStatusGlyph({
   hasPendingInteraction,
   isBusy,
+  isWorkflowActive,
   showUnreadBadge,
   unreadBadgeTone,
 }: ThreadStatusGlyphProps) {
@@ -184,6 +189,19 @@ export function ThreadStatusGlyph({
     );
   }
 
+  if (isWorkflowActive) {
+    return (
+      <Icon
+        name="Workflow"
+        className={cn(
+          "text-muted-foreground",
+          COARSE_POINTER_ICON_SIZE_CLASS,
+        )}
+        aria-label="Workflow running"
+      />
+    );
+  }
+
   if (showUnreadBadge) {
     const label = getThreadUnreadBadgeLabel({ tone: unreadBadgeTone });
     return (
@@ -206,13 +224,17 @@ function getThreadUnreadBadgeLabel({
     : "Unread thread requires attention";
 }
 
+type ThreadTrailingIndicatorProps = ThreadStatusGlyphProps;
+
 function ThreadTrailingIndicator({
   hasPendingInteraction,
   isBusy,
+  isWorkflowActive,
   showUnreadBadge,
   unreadBadgeTone,
-}: ThreadStatusGlyphProps) {
-  const showStatusGlyph = hasPendingInteraction || isBusy || showUnreadBadge;
+}: ThreadTrailingIndicatorProps) {
+  const showStatusGlyph =
+    hasPendingInteraction || isBusy || isWorkflowActive || showUnreadBadge;
 
   if (!showStatusGlyph) {
     return null;
@@ -225,6 +247,7 @@ function ThreadTrailingIndicator({
       <ThreadStatusGlyph
         hasPendingInteraction={hasPendingInteraction}
         isBusy={isBusy}
+        isWorkflowActive={isWorkflowActive}
         showUnreadBadge={showUnreadBadge}
         unreadBadgeTone={unreadBadgeTone}
       />
@@ -247,8 +270,20 @@ function ThreadRowComponent({
   );
   const showActive = isActive;
   const hasPendingInteraction = thread.hasPendingInteraction;
+  const threadRuntimeBusy =
+    isRuntimeBusyThread(thread) && !hasPendingInteraction;
+  const threadWorkflowActive =
+    !threadRuntimeBusy &&
+    !hasPendingInteraction &&
+    hasActiveWorkflowActivity(thread);
+  const threadBackgroundBusy =
+    !threadRuntimeBusy &&
+    !threadWorkflowActive &&
+    !hasPendingInteraction &&
+    hasActiveBackgroundActivity(thread);
   const threadIsBusy = isBusyThread(thread) && !hasPendingInteraction;
-  const showUnreadBadge = !hasPendingInteraction && isUnreadDoneThread(thread);
+  const showUnreadBadge =
+    !hasPendingInteraction && !threadIsBusy && isUnreadDoneThread(thread);
   const unreadBadgeTone: SidebarUnreadDotTone =
     showUnreadBadge && thread.status === "error" ? "error" : "default";
   const threadTitle = getThreadDisplayTitle(thread);
@@ -266,9 +301,18 @@ function ThreadRowComponent({
   const trailingHasPendingInteraction = hasHiddenChildren
     ? hasPendingInteraction || childActivity.pending
     : hasPendingInteraction;
-  const trailingIsBusy = hasHiddenChildren
-    ? threadIsBusy || childActivity.working
-    : threadIsBusy;
+  const trailingRuntimeBusy = hasHiddenChildren
+    ? threadRuntimeBusy || childActivity.runtimeWorking
+    : threadRuntimeBusy;
+  const trailingBackgroundBusy = hasHiddenChildren
+    ? threadBackgroundBusy || childActivity.backgroundWorking
+    : threadBackgroundBusy;
+  const trailingIsWorkflowActive = hasHiddenChildren
+    ? !trailingRuntimeBusy &&
+      !trailingBackgroundBusy &&
+      (threadWorkflowActive || childActivity.workflow)
+    : threadWorkflowActive;
+  const trailingIsBusy = trailingRuntimeBusy || trailingBackgroundBusy;
   const trailingShowUnreadBadge = hasHiddenChildren
     ? showUnreadBadge || childActivity.unread
     : showUnreadBadge;
@@ -356,6 +400,7 @@ function ThreadRowComponent({
             <ThreadTrailingIndicator
               hasPendingInteraction={trailingHasPendingInteraction}
               isBusy={trailingIsBusy}
+              isWorkflowActive={trailingIsWorkflowActive}
               showUnreadBadge={trailingShowUnreadBadge}
               unreadBadgeTone={trailingUnreadBadgeTone}
             />

diff --git a/apps/app/src/components/sidebar/ThreadSearchResultRow.tsx b/apps/app/src/components/sidebar/ThreadSearchResultRow.tsx
@@ -11,7 +11,12 @@ import type { ThreadSearchMatch } from "@bb/server-contract";
 import { PERSONAL_PROJECT_ID } from "@bb/domain";
 import { COARSE_POINTER_ICON_SIZE_CLASS } from "@/components/ui/coarse-pointer-sizing.js";
 import { Icon } from "@/components/ui/icon.js";
-import { isBusyThread } from "@/lib/thread-activity";
+import {
+  hasActiveBackgroundActivity,
+  hasActiveWorkflowActivity,
+  isBusyThread,
+  isRuntimeBusyThread,
+} from "@/lib/thread-activity";
 import { getThreadDisplayTitle } from "@/lib/thread-title";
 import { cn } from "@/lib/utils";
 import { ThreadStatusGlyph } from "./ThreadRow";
@@ -117,6 +122,17 @@ function ThreadSearchResultRowComponent({
   const titleMatch = getTitleMatch(title, matches);
   const snippetMatch = getSnippetMatch(matches);
   const hasPendingInteraction = thread.hasPendingInteraction;
+  const threadRuntimeBusy =
+    isRuntimeBusyThread(thread) && !hasPendingInteraction;
+  const threadWorkflowActive =
+    !threadRuntimeBusy &&
+    !hasPendingInteraction &&
+    hasActiveWorkflowActivity(thread);
+  const threadBackgroundBusy =
+    !threadRuntimeBusy &&
+    !threadWorkflowActive &&
+    !hasPendingInteraction &&
+    hasActiveBackgroundActivity(thread);
   const threadIsBusy = isBusyThread(thread) && !hasPendingInteraction;
   const metadataParts = [
     thread.projectId !== PERSONAL_PROJECT_ID ? projectName : undefined,
@@ -194,7 +210,8 @@ function ThreadSearchResultRowComponent({
         <span className="inline-flex size-4 shrink-0 items-center justify-center">
           <ThreadStatusGlyph
             hasPendingInteraction={hasPendingInteraction}
-            isBusy={threadIsBusy}
+            isBusy={threadRuntimeBusy || threadBackgroundBusy}
+            isWorkflowActive={threadWorkflowActive}
             showUnreadBadge={false}
             unreadBadgeTone="default"
           />

diff --git a/apps/app/src/components/sidebar/pinnedSidebarThreads.test.ts b/apps/app/src/components/sidebar/pinnedSidebarThreads.test.ts
@@ -27,6 +27,7 @@ function createThread(
     latestAttentionAt: 2,
     createdAt: 1,
     updatedAt: 2,
+    activity: { activeWorkflowCount: 0, activeBackgroundSubagentCount: 0 },
     hasPendingInteraction: false,
     environmentHostId: null,
     environmentName: null,

diff --git a/apps/app/src/components/sidebar/projectThreadGroups.test.ts b/apps/app/src/components/sidebar/projectThreadGroups.test.ts
@@ -37,6 +37,7 @@ function createThread(
     latestAttentionAt: 2,
     createdAt: 1,
     updatedAt: 2,
+    activity: { activeWorkflowCount: 0, activeBackgroundSubagentCount: 0 },
     hasPendingInteraction: false,
     environmentHostId: null,
     environmentName: null,
@@ -328,6 +329,9 @@ describe("buildProjectThreadGroups", () => {
       childActivity: {
         pending: true,
         working: true,
+        runtimeWorking: true,
+        backgroundWorking: false,
+        workflow: false,
         unread: false,
         unreadError: false,
       },
@@ -337,6 +341,9 @@ describe("buildProjectThreadGroups", () => {
       childActivity: {
         pending: true,
         working: true,
+        runtimeWorking: true,
+        backgroundWorking: false,
+        workflow: false,
         unread: false,
         unreadError: false,
       },

diff --git a/apps/app/src/hooks/cache-owners/query-cache.ts b/apps/app/src/hooks/cache-owners/query-cache.ts
@@ -528,6 +528,7 @@ export function optimisticallyInsertThread(
     queryClient.setQueryData<ThreadListEntry[]>(queryKey, [
       {
         ...thread,
+        activity: { activeWorkflowCount: 0, activeBackgroundSubagentCount: 0 },
         environmentBranchName: null,
         environmentHostId: null,
         environmentName: null,

diff --git a/apps/app/src/hooks/cache-owners/realtime-cache-registry.ts b/apps/app/src/hooks/cache-owners/realtime-cache-registry.ts
@@ -211,6 +211,7 @@ export const REALTIME_THREAD_CHANGE_REGISTRY = {
   "events-appended": {
     flush: "debounced",
     dirty: [
+      dirtyThreadListQueriesForBackgroundActivity, // Sidebar rows render active workflow/background task state.
       dirtyThreadSearchQueries, // Indexed conversation content may now match a search query.
       dirtyThreadTimelineQueries, // Timeline rows are built from appended events.
       dirtyThreadPromptHistoryQueriesForTurnRequests, // Follow-up recall is built from client turn requests.
@@ -425,6 +426,7 @@ export interface RealtimeDirtyContext {
 }
 
 export interface ThreadRealtimeDirtyContext extends RealtimeDirtyContext {
+  backgroundActivityChanged: boolean | undefined;
   eventTypes: readonly ThreadEventType[] | undefined;
   hasPendingInteraction: boolean | undefined;
   projectId: string | undefined;
@@ -552,6 +554,15 @@ function dirtyThreadListQueries({
   return getThreadListInvalidationQueryKeys({ projectId, queryClient });
 }
 
+function dirtyThreadListQueriesForBackgroundActivity(
+  context: ThreadRealtimeDirtyContext,
+): QueryKey[] {
+  if (context.backgroundActivityChanged !== true) {
+    return [];
+  }
+  return dirtyThreadListQueries(context);
+}
+
 function dirtyRootOrderThreadListQueries({
   projectId,
   queryClient,

diff --git a/apps/app/src/hooks/cache-owners/thread-state-cache-owner.test.ts b/apps/app/src/hooks/cache-owners/thread-state-cache-owner.test.ts
@@ -48,6 +48,7 @@ function makeThreadListEntry(
 ): ThreadListEntry {
   return {
     ...makeThreadWithRuntime(thread),
+    activity: { activeWorkflowCount: 0, activeBackgroundSubagentCount: 0 },
     pinSortKey: null,
     hasPendingInteraction: false,
     environmentHostId: "host-1",