@@ -0,0 +1,16 @@
+---
+"@trigger.dev/react-hooks": patch
+"@trigger.dev/core": patch
+"@trigger.dev/sdk": patch
+---
+
+Named side channels on a Session: durable, two-way realtime streams that outlive a single run and are shared across runs. Open a channel with `sessions.open(id).channel(name)` (or `chat.channel(name)` inside a `chat.agent`) to get an `.in`/`.out` pair addressed by name rather than the reserved default pair. Writing a side channel's `.in` does not wake or trigger a run, so a channel can carry out-of-band data (a stream of frames, a control signal) that many clients read while the agent produces it.
+
+```ts
+// Inside a chat.agent: stream frames on a named channel, wakes nothing
+const frames = chat.channel("screenshots");
+await frames.out.append(frame);
+frames.in.on((control) => { /* client control, no suspend */ });
+```
+
+Declare channel record types once with `sessions.defineChannel(...)` and infer them on both the producer and the consumer, including `useSessionStreamChannel` in React. Channels get a default retention that keeps them bounded, overridable per channel.
@@ -36,6 +36,7 @@ import { PythonLogoIcon } from "~/assets/icons/PythonLogoIcon";
 import { TraceIcon } from "~/assets/icons/TraceIcon";
 import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
 import { StreamsIcon } from "~/assets/icons/StreamsIcon";
+import { AIChatIcon } from "~/assets/icons/AIChatIcon";
 
 type TaskIconProps = {
   name: string | undefined;
@@ -169,6 +170,8 @@ export function RunIcon({ name, className, spanName }: TaskIconProps) {
           className={cn(className, "text-text-dimmed group-hover/spannode:text-text-bright")}
         />
       );
+    case "sessions":
+      return <AIChatIcon className={cn(className, "text-sessions")} />;
     case "hero-sparkles":
       return (
         <SparklesIcon
 
@@ -840,6 +840,45 @@ export class SpanPresenter extends BasePresenter {
           },
         };
       }
+      case "session-stream": {
+        if (!span.entity.id) {
+          logger.error(`SpanPresenter: No session stream id`, {
+            spanId,
+            sessionStreamId: span.entity.id,
+          });
+          return { ...data, entity: null };
+        }
+
+        const parts = span.entity.id.split(":");
+        const io = parts.at(-1);
+        const channel = parts.at(-2) ?? "";
+        const sessionId = parts.at(-3);
+
+        if (!sessionId || (io !== "out" && io !== "in")) {
+          logger.error(`SpanPresenter: Invalid session stream id`, {
+            spanId,
+            sessionStreamId: span.entity.id,
+          });
+          return { ...data, entity: null };
+        }
+
+        const metadata = span.entity.metadata
+          ? (safeJsonParse(span.entity.metadata) as Record<string, unknown> | undefined)
+          : undefined;
+
+        return {
+          ...data,
+          entity: {
+            type: "session-stream" as const,
+            object: {
+              sessionId,
+              channel: channel.length > 0 ? channel : undefined,
+              io,
+              metadata,
+            },
+          },
+        };
+      }
       case "prompt": {
         const promptData = extractPromptSpanData(span.properties as Record<string, unknown>);
 
 
@@ -57,6 +57,14 @@ import { redirectWithErrorMessage } from "~/models/message.server";
 import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { SessionPresenter } from "~/presenters/v3/SessionPresenter.server";
+import { tryCatch } from "@trigger.dev/core/utils";
+import { S2RealtimeStreams } from "~/services/realtime/s2realtimeStreams.server";
+import {
+  canonicalSessionAddressingKey,
+  resolveSessionByIdOrExternalId,
+} from "~/services/realtime/sessions.server";
+import { getRealtimeStreamInstance } from "~/services/realtime/v1StreamsGlobal.server";
+import { logger } from "~/services/logger.server";
 import {
   type StreamChunk,
   useRealtimeStream,
@@ -115,11 +123,34 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     throw new Response("Session not found", { status: 404 });
   }
 
-  return typedjson({ session, loadedAt: Date.now() });
+  let channels: string[] = [];
+  const streamSessionId = session.agentView?.sessionId;
+  if (streamSessionId) {
+    const [channelsError, listed] = await tryCatch(
+      (async () => {
+        const row = await resolveSessionByIdOrExternalId($replica, environment.id, streamSessionId);
+        if (!row) return [] as string[];
+        const realtimeStream = getRealtimeStreamInstance(environment, "v2", { session: row });
+        if (!(realtimeStream instanceof S2RealtimeStreams)) return [] as string[];
+        const addressingKey = canonicalSessionAddressingKey(row, streamSessionId);
+        return realtimeStream.listSessionChannels(addressingKey);
+      })()
+    );
+    if (channelsError) {
+      logger.warn("Failed to list session channels", {
+        sessionId: streamSessionId,
+        error: channelsError,
+      });
+    } else {
+      channels = listed ?? [];
+    }
+  }
+
+  return typedjson({ session, channels, loadedAt: Date.now() });
 };
 
 export default function Page() {
-  const { session, loadedAt } = useTypedLoaderData<typeof loader>();
+  const { session, channels, loadedAt } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
@@ -158,7 +189,7 @@ export default function Page() {
       <PageBody scrollable={false}>
         <ResizablePanelGroup orientation="horizontal" className="max-h-full">
           <ResizablePanel id="session-conversation" min={"300px"}>
-            <ConversationPane session={session} />
+            <ConversationPane session={session} channels={channels} />
           </ResizablePanel>
           <ResizableHandle id="session-handle" />
           <ResizablePanel
@@ -177,18 +208,49 @@ export default function Page() {
 
 type LoadedSession = ReturnType<typeof useTypedLoaderData<typeof loader>>["session"];
 
-function ConversationPane({ session }: { session: LoadedSession }) {
+function ConversationPane({ session, channels }: { session: LoadedSession; channels: string[] }) {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
   const { value, replace } = useSearchParams();
   const isRaw = value("raw") === "1";
+  const channelParam = value("channel");
+  const activeChannel = channelParam && channels.includes(channelParam) ? channelParam : undefined;
 
   const sessionId = session.agentView.sessionId;
   const encodedSession = encodeURIComponent(sessionId);
   const sessionResourceBase = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/sessions/${encodedSession}/realtime/v1`;
 
-  const setView = useCallback((raw: boolean) => replace({ raw: raw ? "1" : undefined }), [replace]);
+  const setView = useCallback(
+    (raw: boolean) => replace({ raw: raw ? "1" : undefined, channel: undefined }),
+    [replace]
+  );
+  const selectChannel = useCallback(
+    (channel: string) => replace({ channel, raw: undefined }),
+    [replace]
+  );
+
+  const utilityBarProps = {
+    channels,
+    activeChannel,
+    onSelectChannel: selectChannel,
+  };
+
+  if (activeChannel) {
+    const channelBase = `${sessionResourceBase}/channels/${encodeURIComponent(activeChannel)}`;
+    return (
+      <div className="flex h-full max-h-full flex-col overflow-hidden bg-background-bright">
+        <RawConversationView
+          key={activeChannel}
+          inResourcePath={`${channelBase}/in`}
+          outResourcePath={`${channelBase}/out`}
+          isRaw={isRaw}
+          onChangeView={setView}
+          {...utilityBarProps}
+        />
+      </div>
+    );
+  }
 
   return (
     <div className="flex h-full max-h-full flex-col overflow-hidden bg-background-bright">
@@ -198,10 +260,11 @@ function ConversationPane({ session }: { session: LoadedSession }) {
           outResourcePath={`${sessionResourceBase}/out`}
           isRaw={isRaw}
           onChangeView={setView}
+          {...utilityBarProps}
         />
       ) : (
         <>
-          <ConversationUtilityBar isRaw={isRaw} onChangeView={setView} />
+          <ConversationUtilityBar isRaw={isRaw} onChangeView={setView} {...utilityBarProps} />
           <div className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
             <AgentView agentView={session.agentView} />
           </div>
@@ -214,29 +277,45 @@ function ConversationPane({ session }: { session: LoadedSession }) {
 function ConversationUtilityBar({
   isRaw,
   onChangeView,
+  channels = [],
+  activeChannel,
+  onSelectChannel,
   right,
 }: {
   isRaw: boolean;
   onChangeView: (raw: boolean) => void;
+  channels?: string[];
+  activeChannel?: string;
+  onSelectChannel?: (channel: string) => void;
   right?: React.ReactNode;
 }) {
   return (
     <div className="flex h-9 items-center justify-between gap-3 border-b border-grid-bright px-3">
       <TabContainer className="-mb-2">
         <TabButton
-          isActive={!isRaw}
+          isActive={!isRaw && !activeChannel}
           layoutId="conversation-view-mode"
           onClick={() => onChangeView(false)}
         >
           Rendered
         </TabButton>
         <TabButton
-          isActive={isRaw}
+          isActive={isRaw && !activeChannel}
           layoutId="conversation-view-mode"
           onClick={() => onChangeView(true)}
         >
           Raw
         </TabButton>
+        {channels.map((channel) => (
+          <TabButton
+            key={channel}
+            isActive={activeChannel === channel}
+            layoutId="conversation-view-mode"
+            onClick={() => onSelectChannel?.(channel)}
+          >
+            {channel}
+          </TabButton>
+        ))}
       </TabContainer>
       {right}
     </div>
@@ -266,11 +345,17 @@ function RawConversationView({
   outResourcePath,
   isRaw,
   onChangeView,
+  channels,
+  activeChannel,
+  onSelectChannel,
 }: {
   inResourcePath: string;
   outResourcePath: string;
   isRaw: boolean;
   onChangeView: (raw: boolean) => void;
+  channels?: string[];
+  activeChannel?: string;
+  onSelectChannel?: (channel: string) => void;
 }) {
   const {
     chunks: inChunks,
@@ -496,7 +581,14 @@ function RawConversationView({
 
   return (
     <>
-      <ConversationUtilityBar isRaw={isRaw} onChangeView={onChangeView} right={controls} />
+      <ConversationUtilityBar
+        isRaw={isRaw}
+        onChangeView={onChangeView}
+        channels={channels}
+        activeChannel={activeChannel}
+        onSelectChannel={onSelectChannel}
+        right={controls}
+      />
       <div className="flex min-h-0 flex-1 flex-col bg-background-deep">
         <div
           ref={scrollRef}
 
@@ -12,6 +12,10 @@ import { $replica, prisma, type PrismaClient } from "~/db.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
 import { logger } from "~/services/logger.server";
 import { mintSessionToken } from "~/services/realtime/mintSessionToken.server";
+import {
+  isSafeSessionExternalId,
+  SESSION_CHANNEL_SCOPE_INFIX,
+} from "~/services/realtime/sessionChannels.server";
 import {
   ensureRunForSession,
   type SessionTriggerConfig,
@@ -168,6 +172,13 @@ const { action } = createActionApiRoute(
   },
   async ({ authentication, body }) => {
     try {
+      if (body.externalId && !isSafeSessionExternalId(body.externalId)) {
+        return json(
+          { error: `externalId cannot contain "${SESSION_CHANNEL_SCOPE_INFIX}"` },
+          { status: 422 }
+        );
+      }
+
       // Idempotent on (env, externalId): two concurrent POSTs converge to the same row, and
       // `triggerConfig` is refreshed on the cached path so a redeployed config reaches the next run.
       const { session, isCached } = await findOrCreateSession({