Show provider icons for active sidebar threads

Author: Marve10s

apps/web/src/components/Sidebar.logic.test.ts

@@ -441,6 +441,36 @@ describe("resolveThreadStatusPill", () => {
     ).toMatchObject({ label: "Working", pulse: true });
   });
 
+  it("exposes the codex provider when a codex thread is running", () => {
+    expect(
+      resolveThreadStatusPill({
+        thread: {
+          ...baseThread,
+          session: {
+            ...baseThread.session,
+            provider: "codex",
+            status: "running",
+          },
+        },
+      }),
+    ).toMatchObject({ label: "Working", workingProvider: "codex", pulse: true });
+  });
+
+  it("exposes the claude provider when a claude thread is running", () => {
+    expect(
+      resolveThreadStatusPill({
+        thread: {
+          ...baseThread,
+          session: {
+            ...baseThread.session,
+            provider: "claudeAgent",
+            status: "running",
+          },
+        },
+      }),
+    ).toMatchObject({ label: "Working", workingProvider: "claudeAgent", pulse: true });
+  });
+
   it("shows plan ready when a settled plan turn has a proposed plan ready for follow-up", () => {
     expect(
       resolveThreadStatusPill({

apps/web/src/components/Sidebar.logic.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import type { SidebarProjectSortOrder, SidebarThreadSortOrder } from "@t3tools/contracts/settings";
+import type { ProviderKind } from "@t3tools/contracts";
 import type { SidebarThreadSummary, Thread } from "../types";
 import { cn } from "../lib/utils";
 import { isLatestTurnSettled } from "../session-logic";
@@ -31,6 +32,7 @@ export interface ThreadStatusPill {
   colorClass: string;
   dotClass: string;
   pulse: boolean;
+  workingProvider?: ProviderKind;
 }
 
 const THREAD_STATUS_PRIORITY: Record<ThreadStatusPill["label"], number> = {
@@ -337,6 +339,7 @@ export function resolveThreadStatusPill(input: {
       colorClass: "text-sky-600 dark:text-sky-300/80",
       dotClass: "bg-sky-500 dark:bg-sky-300/80",
       pulse: true,
+      workingProvider: thread.session.provider,
     };
   }
 
@@ -346,6 +349,7 @@ export function resolveThreadStatusPill(input: {
       colorClass: "text-sky-600 dark:text-sky-300/80",
       dotClass: "bg-sky-500 dark:bg-sky-300/80",
       pulse: true,
+      workingProvider: thread.session.provider,
     };
   }
 

apps/web/src/components/Sidebar.tsx

@@ -12,6 +12,7 @@ import {
   TriangleAlertIcon,
 } from "lucide-react";
 import { ProjectFavicon } from "./ProjectFavicon";
+import { ClaudeAI, OpenAI } from "./Icons";
 import { autoAnimate } from "@formkit/auto-animate";
 import React, { useCallback, useEffect, memo, useMemo, useRef, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
@@ -233,24 +234,56 @@ interface PrStatusIndicator {
 
 type ThreadPr = GitStatusResult["pr"];
 
+function providerStatusIconClassName(provider: ThreadStatusPill["workingProvider"]): string {
+  if (provider === "claudeAgent") {
+    return "text-[#d97757]";
+  }
+
+  if (provider === "codex") {
+    return "text-foreground";
+  }
+
+  return "";
+}
+
 function ThreadStatusLabel({
   status,
   compact = false,
 }: {
   status: ThreadStatusPill;
   compact?: boolean;
 }) {
+  const isCodex = status.workingProvider === "codex";
+  const statusIcon =
+    status.workingProvider === "claudeAgent" ? (
+      <ClaudeAI
+        className={`size-3 ${providerStatusIconClassName(status.workingProvider)} ${
+          status.pulse ? "animate-pulse" : ""
+        }`}
+      />
+    ) : isCodex ? (
+      <OpenAI
+        className={`size-3 ${providerStatusIconClassName(status.workingProvider)} ${
+          status.pulse ? "animate-pulse" : ""
+        }`}
+      />
+    ) : null;
+
   if (compact) {
     return (
       <span
         title={status.label}
         className={`inline-flex size-3.5 shrink-0 items-center justify-center ${status.colorClass}`}
       >
-        <span
-          className={`size-[9px] rounded-full ${status.dotClass} ${
-            status.pulse ? "animate-pulse" : ""
-          }`}
-        />
+        {statusIcon ? (
+          statusIcon
+        ) : (
+          <span
+            className={`size-[9px] rounded-full ${status.dotClass} ${
+              status.pulse ? "animate-pulse" : ""
+            }`}
+          />
+        )}
         <span className="sr-only">{status.label}</span>
       </span>
     );
@@ -261,11 +294,15 @@ function ThreadStatusLabel({
       title={status.label}
       className={`inline-flex items-center gap-1 text-[10px] ${status.colorClass}`}
     >
-      <span
-        className={`h-1.5 w-1.5 rounded-full ${status.dotClass} ${
-          status.pulse ? "animate-pulse" : ""
-        }`}
-      />
+      {statusIcon ? (
+        statusIcon
+      ) : (
+        <span
+          className={`h-1.5 w-1.5 rounded-full ${status.dotClass} ${
+            status.pulse ? "animate-pulse" : ""
+          }`}
+        />
+      )}
       <span className="hidden md:inline">{status.label}</span>
     </span>
   );