CL-5653: Live channel name in the page band

apps/web/src/shell/app-shell.tsx

@@ -143,6 +143,7 @@ export function AppShell({
                 canvasOpen={canvasState.open}
                 onToggleCanvas={() => setCanvasState(toggleCanvasColumn)}
                 canvasAllowed={canvasAllowed}
+                onOpenInCanvas={handleOpenInCanvas}
               />
             </div>
           </>

apps/web/src/shell/channel-context.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, test } from "bun:test";
+
+import type { Channel } from "@corbits/chat-ui";
+
+import { resolveChannelTitle } from "./channel-context";
+import type { BenchActivityQuery } from "./bench-activity";
+
+const channel = (partial: {
+  id: string;
+  title: string;
+  kind?: string;
+}): Channel =>
+  ({
+    id: partial.id,
+    title: partial.title,
+    kind: partial.kind ?? "channel",
+    pinned: false,
+    participants: [],
+  }) as Channel;
+
+const ready: BenchActivityQuery = {
+  kind: "ready",
+  channels: [channel({ id: "ch_1", title: "Myra" })],
+  chats: [channel({ id: "ch_2", title: "  ", kind: "chat" })],
+  routines: [],
+};
+
+describe("resolveChannelTitle", () => {
+  test("returns null without a channel id", () => {
+    expect(resolveChannelTitle(ready, null)).toBeNull();
+  });
+
+  test("returns null while activity is loading", () => {
+    expect(resolveChannelTitle({ kind: "loading" }, "ch_1")).toBeNull();
+  });
+
+  test("returns the channel title when found", () => {
+    expect(resolveChannelTitle(ready, "ch_1")).toBe("Myra");
+  });
+
+  test("falls back to Untitled channel for blank titles", () => {
+    expect(resolveChannelTitle(ready, "ch_2")).toBe("Untitled channel");
+  });
+
+  test("returns null when the channel is not in the list", () => {
+    expect(resolveChannelTitle(ready, "ch_missing")).toBeNull();
+  });
+});

apps/web/src/shell/channel-context.ts

@@ -0,0 +1,31 @@
+// Resolve the active channel's display title for the contextual page band.
+// Reuses the same channel/chat lists the Channels band already loads so the
+// page title does not invent a second fetch.
+
+import type { Channel } from "@corbits/chat-ui";
+
+import type { BenchActivityQuery } from "./bench-activity";
+
+/** Prefer channel title; fall back to untitled label; null when still loading. */
+export function resolveChannelTitle(
+  activity: BenchActivityQuery,
+  channelId: string | null,
+): string | null {
+  if (channelId === null) return null;
+  if (activity.kind !== "ready") return null;
+  const match = findChannel(activity.channels, activity.chats, channelId);
+  if (match === undefined) return null;
+  const title = match.title?.trim();
+  return title && title.length > 0 ? title : "Untitled channel";
+}
+
+function findChannel(
+  channels: readonly Channel[],
+  chats: readonly Channel[],
+  channelId: string,
+): Channel | undefined {
+  return (
+    channels.find((c) => c.id === channelId) ??
+    chats.find((c) => c.id === channelId)
+  );
+}

apps/web/src/shell/contextual-panel.tsx

@@ -118,7 +118,7 @@ export function ContextualPanel({
       {pageSpecific !== null ? (
         <section
           className="panel-band panel-band-page-specific"
-          aria-label={`${pageBand.title} details`}
+          aria-label="Page details"
         >
           <h3 className="panel-band-heading">{pageBand.title}</h3>
           {pageSpecific}

apps/web/src/shell/panel-contribution.ts

@@ -12,7 +12,8 @@ export type PanelAction = {
 };
 
 export type PageBand = {
-  readonly title: string;
+  /** String or live component (e.g. resolved channel name). */
+  readonly title: ReactNode;
   readonly subtitle?: string;
   readonly settingsPath?: string;
   readonly actions?: readonly PanelAction[];

apps/web/src/shell/panel-contributions.tsx

@@ -26,6 +26,7 @@ import type { KeyboardEvent } from "react";
 import { useBench } from "../bench-context";
 import { channelIdFromPath, channelPath, isChannelPath } from "../channel-path";
 import { useBenchActivity } from "./bench-activity";
+import { resolveChannelTitle } from "./channel-context";
 import {
   registerPanelContribution,
   type PanelRenderContext,
@@ -228,6 +229,21 @@ function ChannelDetails({ channel }: { readonly channel: Channel }) {
   );
 }
 
+/** Live page-band title for an open channel — falls back while loading. */
+function ChannelPageTitle({
+  channelId,
+  fallback,
+}: {
+  readonly channelId: string | null;
+  readonly fallback: string;
+}) {
+  const { selectedTenantId } = useBench();
+  const activity = useBenchActivity(selectedTenantId);
+  const title = resolveChannelTitle(activity, channelId);
+  if (title !== null) return title;
+  return fallback;
+}
+
 function ChannelsBand({
   path,
   onOpenInCanvas,
@@ -491,20 +507,28 @@ export function ensurePanelContributions(): void {
   registerPanelContribution({
     id: "channels",
     match: (path) => isChannelPath(path),
-    pageBand: (ctx) => ({
-      title: "Channels",
-      subtitle: "Open a conversation in the canvas",
-      actions: [
-        {
-          id: "new-channel",
-          label: "New channel",
-          onSelect: () => {
-            window.dispatchEvent(new CustomEvent("workbench:chat:new-channel"));
-            if (!isChannelPath(ctx.path)) ctx.onNavigate(channelPath(null));
+    pageBand: (ctx) => {
+      const channelId = channelIdFromPath(ctx.path);
+      return {
+        title: <ChannelPageTitle channelId={channelId} fallback="Channels" />,
+        subtitle:
+          channelId === null
+            ? "Open a conversation in the canvas"
+            : "Channel open in the canvas",
+        actions: [
+          {
+            id: "new-channel",
+            label: "New channel",
+            onSelect: () => {
+              window.dispatchEvent(
+                new CustomEvent("workbench:chat:new-channel"),
+              );
+              if (!isChannelPath(ctx.path)) ctx.onNavigate(channelPath(null));
+            },
           },
-        },
-      ],
-    }),
+        ],
+      };
+    },
     pageSpecific: (ctx) => (
       <ChannelsBand path={ctx.path} onOpenInCanvas={ctx.onOpenInCanvas} />
     ),