Show IM channel source on threads

frontend/src/app/workspace/chats/page.tsx

@@ -5,6 +5,10 @@ import { useEffect, useMemo, useState } from "react";
 
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  ThreadChannelBadge,
+  ThreadChannelIcon,
+} from "@/components/workspace/thread-channel-source";
 import {
   WorkspaceBody,
   WorkspaceContainer,
@@ -12,7 +16,11 @@ import {
 } from "@/components/workspace/workspace-container";
 import { useI18n } from "@/core/i18n/hooks";
 import { useThreads } from "@/core/threads/hooks";
-import { pathOfThread, titleOfThread } from "@/core/threads/utils";
+import {
+  channelSourceOfThread,
+  pathOfThread,
+  titleOfThread,
+} from "@/core/threads/utils";
 import { formatTimeAgo } from "@/core/utils/datetime";
 
 export default function ChatsPage() {
@@ -47,20 +55,30 @@ export default function ChatsPage() {
           <main className="min-h-0 flex-1">
             <ScrollArea className="size-full py-4">
               <div className="mx-auto flex size-full max-w-(--container-width-md) flex-col">
-                {filteredThreads?.map((thread) => (
-                  <Link key={thread.thread_id} href={pathOfThread(thread)}>
-                    <div className="flex flex-col gap-2 border-b p-4">
-                      <div>
-                        <div>{titleOfThread(thread)}</div>
-                      </div>
-                      {thread.updated_at && (
-                        <div className="text-muted-foreground text-sm">
-                          {formatTimeAgo(thread.updated_at)}
+                {filteredThreads?.map((thread) => {
+                  const channelSource = channelSourceOfThread(thread);
+                  return (
+                    <Link key={thread.thread_id} href={pathOfThread(thread)}>
+                      <div className="flex flex-col gap-2 border-b p-4">
+                        <div className="flex min-w-0 items-center gap-2">
+                          <ThreadChannelIcon source={channelSource} />
+                          <div className="min-w-0 flex-1 truncate">
+                            {titleOfThread(thread)}
+                          </div>
+                          <ThreadChannelBadge
+                            source={channelSource}
+                            className="hidden sm:inline-flex"
+                          />
                         </div>
-                      )}
-                    </div>
-                  </Link>
-                ))}
+                        {thread.updated_at && (
+                          <div className="text-muted-foreground text-sm">
+                            {formatTimeAgo(thread.updated_at)}
+                          </div>
+                        )}
+                      </div>
+                    </Link>
+                  );
+                })}
               </div>
             </ScrollArea>
           </main>

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>
+  );
+}

frontend/src/core/threads/utils.ts

@@ -2,6 +2,12 @@ import type { Message } from "@langchain/langgraph-sdk";
 
 import type { AgentThread, AgentThreadContext } from "./types";
 
+export type ChannelThreadSource = {
+  type: "im_channel";
+  provider: string;
+  label: string;
+};
+
 type ThreadRouteTarget =
   | string
   | {
@@ -49,3 +55,42 @@ export function textOfMessage(message: Message) {
 export function titleOfThread(thread: AgentThread) {
   return thread.values?.title ?? "Untitled";
 }
+
+const CHANNEL_PROVIDER_LABELS: Record<string, string> = {
+  dingtalk: "DingTalk",
+  discord: "Discord",
+  feishu: "Feishu",
+  slack: "Slack",
+  telegram: "Telegram",
+  wechat: "WeChat",
+  wecom: "WeCom",
+};
+
+function labelOfChannelProvider(provider: string) {
+  return CHANNEL_PROVIDER_LABELS[provider] ?? provider;
+}
+
+export function channelSourceOfThread(
+  thread: Pick<AgentThread, "metadata">,
+): ChannelThreadSource | null {
+  const source = thread.metadata?.channel_source;
+  if (!source || typeof source !== "object" || Array.isArray(source)) {
+    return null;
+  }
+
+  if (Reflect.get(source, "type") !== "im_channel") {
+    return null;
+  }
+
+  const provider = Reflect.get(source, "provider");
+  if (typeof provider !== "string" || provider.trim().length === 0) {
+    return null;
+  }
+
+  const normalizedProvider = provider.trim().toLowerCase();
+  return {
+    type: "im_channel",
+    provider: normalizedProvider,
+    label: labelOfChannelProvider(normalizedProvider),
+  };
+}

frontend/tests/e2e/thread-history.spec.ts

@@ -152,4 +152,45 @@ test.describe("Thread history", () => {
     });
     await expect(main.getByText("Second conversation")).toBeVisible();
   });
+
+  test("IM channel threads show their source in thread lists", async ({
+    page,
+  }) => {
+    mockLangGraphAPI(page, {
+      threads: [
+        {
+          thread_id: MOCK_THREAD_ID,
+          title: "Feishu conversation",
+          updated_at: "2025-06-03T12:00:00Z",
+          metadata: {
+            channel_source: {
+              type: "im_channel",
+              provider: "feishu",
+              chat_id: "oc_mock",
+            },
+          },
+        },
+      ],
+    });
+
+    await page.goto("/workspace/chats/new");
+
+    const sidebarThread = page.locator(
+      `a[href='/workspace/chats/${MOCK_THREAD_ID}']`,
+    );
+    await expect(sidebarThread).toBeVisible({ timeout: 15_000 });
+    await expect(
+      sidebarThread.getByLabel("Feishu channel"),
+    ).toBeVisible();
+
+    await page.goto("/workspace/chats");
+
+    const mainThread = page.locator("main").locator(
+      `a[href='/workspace/chats/${MOCK_THREAD_ID}']`,
+    );
+    await expect(mainThread.getByText("Feishu conversation")).toBeVisible({
+      timeout: 15_000,
+    });
+    await expect(mainThread.getByText("Feishu", { exact: true })).toBeVisible();
+  });
 });

frontend/tests/e2e/utils/mock-api.ts

@@ -25,6 +25,7 @@ export type MockThread = {
   title?: string;
   updated_at?: string;
   agent_name?: string;
+  metadata?: Record<string, unknown>;
   messages?: unknown[];
   artifacts?: string[];
 };
@@ -90,7 +91,10 @@ export function mockLangGraphAPI(page: Page, options?: MockAPIOptions) {
       thread_id: t.thread_id,
       created_at: "2025-01-01T00:00:00Z",
       updated_at: t.updated_at ?? "2025-01-01T00:00:00Z",
-      metadata: t.agent_name ? { agent_name: t.agent_name } : {},
+      metadata: {
+        ...(t.metadata ?? {}),
+        ...(t.agent_name ? { agent_name: t.agent_name } : {}),
+      },
       status: "idle",
       values: { title: t.title ?? "Untitled" },
     }));

frontend/tests/unit/core/threads/utils.test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "vitest";
 
-import { pathOfThread } from "@/core/threads/utils";
+import { channelSourceOfThread, pathOfThread } from "@/core/threads/utils";
 
 test("uses standard chat route when thread has no agent context", () => {
   expect(pathOfThread("thread-123")).toBe("/workspace/chats/thread-123");
@@ -44,3 +44,40 @@ test("prefers context.agent_name over metadata.agent_name", () => {
     }),
   ).toBe("/workspace/agents/from-context/chats/thread-789");
 });
+
+test("reads IM channel source metadata", () => {
+  expect(
+    channelSourceOfThread({
+      metadata: {
+        channel_source: {
+          type: "im_channel",
+          provider: "feishu",
+          chat_id: "oc_123",
+        },
+      },
+    }),
+  ).toEqual({
+    type: "im_channel",
+    provider: "feishu",
+    label: "Feishu",
+  });
+});
+
+test("ignores threads without valid IM channel source metadata", () => {
+  expect(channelSourceOfThread({ metadata: {} })).toBeNull();
+  expect(
+    channelSourceOfThread({
+      metadata: { channel_source: { provider: "" } },
+    }),
+  ).toBeNull();
+  expect(
+    channelSourceOfThread({
+      metadata: {
+        channel_source: {
+          type: "other",
+          provider: "feishu",
+        },
+      },
+    }),
+  ).toBeNull();
+});