Show IM channel source on threads

frontend/src/components/workspace/recent-chat-list.tsx

@@ -55,10 +55,16 @@ import {
   useThreads,
 } from "@/core/threads/hooks";
 import type { AgentThread, AgentThreadState } from "@/core/threads/types";
-import { pathOfThread, titleOfThread } from "@/core/threads/utils";
+import {
+  channelSourceOfThread,
+  pathOfThread,
+  titleOfThread,
+} from "@/core/threads/utils";
 import { env } from "@/env";
 import { isIMEComposing } from "@/lib/ime";
 
+import { ThreadChannelIcon } from "./thread-channel-source";
+
 export function RecentChatList() {
   const { t } = useI18n();
   const router = useRouter();
@@ -182,6 +188,7 @@ export function RecentChatList() {
             <div className="flex w-full flex-col gap-1">
               {threads.map((thread) => {
                 const isActive = pathOfThread(thread) === pathname;
+                const channelSource = channelSourceOfThread(thread);
                 return (
                   <SidebarMenuItem
                     key={thread.thread_id}
@@ -190,10 +197,23 @@ export function RecentChatList() {
                     <SidebarMenuButton isActive={isActive} asChild>
                       <div>
                         <Link
-                          className="text-muted-foreground block w-full whitespace-nowrap group-hover/side-menu-item:overflow-hidden"
+                          className="text-muted-foreground flex min-w-0 items-center gap-1.5 whitespace-nowrap pr-7 group-hover/side-menu-item:overflow-hidden"
                           href={pathOfThread(thread)}
                         >
-                          {titleOfThread(thread)}
+                          <ThreadChannelIcon source={channelSource} />
+                          <span className="min-w-0 truncate">
+                            {titleOfThread(thread)}
+                          </span>
+                          {channelSource && (
+                            <span
+                              className="bg-muted text-muted-foreground ml-auto inline-flex h-5 max-w-14 shrink-0 items-center rounded-md px-1.5 text-[10px] font-medium"
+                              title={`${channelSource.label} channel`}
+                            >
+                              <span className="truncate">
+                                {channelSource.label}
+                              </span>
+                            </span>
+                          )}
                         </Link>
                         {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY !== "true" && (
                           <DropdownMenu>

frontend/src/components/workspace/thread-channel-source.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { ChannelProviderIcon } from "@/components/workspace/channels/channel-provider-icon";
+import type { ChannelThreadSource } from "@/core/threads/utils";
+import { cn } from "@/lib/utils";
+
+type ThreadChannelIconProps = {
+  source: ChannelThreadSource | null;
+  className?: string;
+};
+
+export function ThreadChannelIcon({
+  source,
+  className,
+}: ThreadChannelIconProps) {
+  if (!source) {
+    return null;
+  }
+
+  return (
+    <span
+      aria-label={`${source.label} channel`}
+      title={`${source.label} channel`}
+      className={cn("inline-flex shrink-0 items-center", className)}
+    >
+      <ChannelProviderIcon provider={source.provider} className="size-4" />
+    </span>
+  );
+}
+
+type ThreadChannelBadgeProps = {
+  source: ChannelThreadSource | null;
+  className?: string;
+};
+
+export function ThreadChannelBadge({
+  source,
+  className,
+}: ThreadChannelBadgeProps) {
+  if (!source) {
+    return null;
+  }
+
+  return (
+    <span
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-6 max-w-32 items-center gap-1 rounded-md px-2 text-xs font-medium",
+        className,
+      )}
+      title={`${source.label} channel`}
+    >
+      <ChannelProviderIcon provider={source.provider} className="size-3.5" />
+      <span className="truncate">{source.label}</span>
+    </span>
+  );
+}