@dxos/plugin-thread 0.8.4-main.c1de068 → 0.8.4-main.c85a9c8dae

package/src/components/ResponsiveGrid/ResponsiveGridItem.tsx

@@ -2,11 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useEffect, useState, type CSSProperties, type PropsWithChildren } from 'react';
+import React, { type CSSProperties, type PropsWithChildren, useEffect, useState } from 'react';
 
-import { Icon, IconButton, useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { Icon, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { Waveform } from '@dxos/react-ui-sfx';
-import { groupHoverControlItemWithTransition, mx } from '@dxos/react-ui-theme';
+import { groupHoverControlItemWithTransition, mx } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 
@@ -89,7 +89,7 @@ export const ResponsiveGridItem = <T extends object = any>({
       {onClick && (
         <div className='z-10 absolute top-1 right-1 flex'>
           <IconButton
-            classNames={mx('p-1 min-bs-1 rounded', groupHoverControlItemWithTransition)}
+            classNames={mx('p-1 min-h-1 rounded-sm', groupHoverControlItemWithTransition)}
             iconOnly
             icon={pinned ? 'ph--x--regular' : 'ph--arrows-out--regular'}
             size={pinned ? 5 : 4}
@@ -106,7 +106,10 @@ export const ResponsiveGridItem = <T extends object = any>({
           {/* {self && <Icon icon='ph--asterisk--regular' size={pinned ? 5 : 4} />} */}
           {screenshare && <Icon icon='ph--broadcast--regular' size={pinned ? 5 : 4} />}
           <div
-            className={mx('bg-neutral-800 text-neutral-100 py-0.5 truncate rounded', pinned ? 'px-2' : 'px-1 text-xs')}
+            className={mx(
+              'bg-neutral-800 text-neutral-100 py-0.5 truncate rounded-sm',
+              pinned ? 'px-2' : 'px-1 text-xs',
+            )}
           >
             {name}
           </div>
@@ -118,7 +121,7 @@ export const ResponsiveGridItem = <T extends object = any>({
         {(speaking && <Waveform active size={pinned ? 5 : 4} />) ||
           (props && (
             <IconButton
-              classNames={mx('p-1 min-bs-1 rounded', props?.classNames)}
+              classNames={mx('p-1 min-h-1 rounded-sm', props?.classNames)}
               icon={props?.icon}
               label={props?.label}
               size={pinned ? 5 : 4}

package/src/components/command-extension.ts

@@ -2,11 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
-import { StreamLanguage, HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { HighlightStyle, StreamLanguage, syntaxHighlighting } from '@codemirror/language';
 import { type Extension } from '@codemirror/state';
 
-import { tags } from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+import { tags } from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 
 /**
  * https://github.com/codemirror/stream-parser/blob/main/test/test-stream-parser.ts
@@ -27,7 +27,10 @@ const parser = StreamLanguage.define<{ count: number }>({
 });
 
 const styles = HighlightStyle.define([
-  { tag: tags.tagName, class: mx('dx-tag dx-tag--indigo text-baseText font-medium') },
+  {
+    tag: tags.tagName,
+    class: mx('dx-tag dx-tag--indigo text-base-surface-text font-medium'),
+  },
 ]);
 
 export const command: Extension = [parser, syntaxHighlighting(styles)];

package/src/components/index.ts

@@ -2,17 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
-export const ChannelContainer = lazy(() => import('./ChannelContainer'));
-export const ChatContainer = lazy(() => import('./ChatContainer'));
-
-// TODO(wittjosiah): Suspense boundary for sidebar?
 export * from './Call';
-export * from './CallDebugPanel';
-export * from './CallSidebar';
 export * from './CommentsContainer';
 export * from './CommentsThreadContainer';
 export * from './MessageContainer';
-export * from './ThreadComplementary';
-export * from './ThreadSettings';

package/src/components/testing.ts

@@ -6,16 +6,15 @@ import { Obj, Ref } from '@dxos/echo';
 import { IdentityDid } from '@dxos/keys';
 import { faker } from '@dxos/random';
 import { type Identity } from '@dxos/react-client/halo';
-import { DataType } from '@dxos/schema';
+import { Message, Thread } from '@dxos/types';
 
-import { ThreadType } from '../types';
-
-export const createCommentThread = (identity: Identity): ThreadType => {
-  return Obj.make(ThreadType, {
+export const createCommentThread = (identity: Identity): Thread.Thread => {
+  return Thread.make({
+    name: 'Comment',
     messages: faker.helpers.multiple(
       () =>
         Ref.make(
-          Obj.make(DataType.Message, {
+          Obj.make(Message.Message, {
             created: new Date().toISOString(),
             sender: {
               identityDid: faker.datatype.boolean() ? identity.did : IdentityDid.random(),
@@ -25,5 +24,26 @@ export const createCommentThread = (identity: Identity): ThreadType => {
         ),
       { count: { min: 2, max: 3 } },
     ),
+    status: 'active',
+  });
+};
+
+export const createProposalThread = (identity: Identity): Thread.Thread => {
+  return Thread.make({
+    name: 'Proposal',
+    messages: faker.helpers.multiple(
+      () =>
+        Ref.make(
+          Obj.make(Message.Message, {
+            created: new Date().toISOString(),
+            sender: {
+              identityDid: faker.datatype.boolean() ? identity.did : IdentityDid.random(),
+            },
+            blocks: [{ _tag: 'proposal', text: faker.lorem.sentences(3) }],
+          }),
+        ),
+      { count: { min: 1, max: 1 } },
+    ),
+    status: 'active',
   });
 };

package/src/containers/CallDebugPanel/CallDebugPanel.tsx

@@ -0,0 +1,172 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { WebRTCStats, type WebRTCStatsEvent } from '@peermetrics/webrtc-stats';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { truncateKey } from '@dxos/debug';
+import { JsonView, Panel } from '@dxos/devtools';
+import { log } from '@dxos/log';
+import { IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+
+import { type EncodedTrackName, type GlobalState } from '../../calls';
+import { meta } from '../../meta';
+
+export type CallDebugPanelProps = ThemedClassName<{ state?: GlobalState }>;
+
+export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
+  const { t } = useTranslation(meta.id);
+
+  const [open, setOpen] = useState(false);
+  const handleToggle = () => setOpen(!open);
+  const [showServiceHistory, setShowServiceHistory] = useState(false);
+  const handleToggleServiceHistory = () => setShowServiceHistory(!showServiceHistory);
+
+  const handleCopyRaw = async () => {
+    await navigator.clipboard.writeText(JSON.stringify({ users: state?.call?.users, stats }, null, 2));
+  };
+
+  const [showDetailedWebRTCStats, setShowDetailedWebRTCStats] = useState(false);
+  const handleShowDetailedWebRTCStats = () => setShowDetailedWebRTCStats(!showDetailedWebRTCStats);
+
+  const webrtcStats = useMemo(
+    () =>
+      new WebRTCStats({
+        getStatsInterval: 1000,
+      }),
+    [],
+  );
+  const [stats, setStats] = useState<WebRTCStatsEvent['data']>();
+
+  useEffect(() => {
+    const pc = state?.media.peer?.session?.peerConnection;
+    const handleStats = (stats: WebRTCStatsEvent) => {
+      setStats(stats.data);
+    };
+    let added = false;
+    if (pc && showDetailedWebRTCStats) {
+      webrtcStats.addConnection({ pc, peerId: 1, connectionId: '1' });
+      webrtcStats.on('stats', handleStats as never);
+      added = true;
+    }
+    return () => {
+      try {
+        if (pc && added) {
+          webrtcStats.removeConnection({ pc });
+          webrtcStats.removeListener('stats', handleStats as never);
+        }
+      } catch (error) {
+        log.error('error removing webrtc stats', { error, pc, peerId: 1, connectionId: '1' });
+      }
+    };
+  }, [state?.media.peer?.session?.peerConnection, showDetailedWebRTCStats]);
+
+  const rows = useMemo(() => getCallStatusTable(state), [state?.call.users, state?.media.pulledAudioTracks]);
+
+  return (
+    <Panel
+      id='meeting-status'
+      icon='ph--video-conference--regular'
+      open={open}
+      onToggle={handleToggle}
+      title={t('meeting status title')}
+      info={<div className='flex items-center gap-2'> {state?.call.joined ? 'Active' : 'Inactive'}</div>}
+      maxHeight={0}
+    >
+      <div className='flex flex-col w-full text-xs'>
+        <div className='flex items-center gap-2 items-center'>
+          <Input.Root>
+            <Input.Switch checked={showDetailedWebRTCStats} onCheckedChange={handleShowDetailedWebRTCStats} />
+            <Input.Label>{t('show webrtc stats title')}</Input.Label>
+          </Input.Root>
+        </div>
+        <div className='flex items-center gap-2 items-center'>
+          <Input.Root>
+            <Input.Switch checked={showServiceHistory} onCheckedChange={handleToggleServiceHistory} />
+            <Input.Label>{t('show calls history title')}</Input.Label>
+          </Input.Root>
+        </div>
+        <div className='flex items-center gap-2 items-center'>
+          <IconButton icon='ph--copy--regular' label={'copy raw'} onClick={handleCopyRaw} />
+        </div>
+        <Table rows={rows} />
+        {showDetailedWebRTCStats && <JsonView data={{ stats }} />}
+        {showServiceHistory && <JsonView data={{ history: state?.media.peer?.history.get() }} />}
+      </div>
+    </Panel>
+  );
+};
+
+const getCallStatusTable = (state?: GlobalState): TableProps['rows'] => {
+  if (!state || !state.call?.users) {
+    return [];
+  }
+
+  const self = state.call.self;
+  const users = state.call.users
+    .filter((user) => user.id !== self!.id)
+    .map((user) => {
+      const isOk = {
+        audio:
+          user.tracks?.audio &&
+          state.media.pulledAudioTracks[user.tracks?.audio as EncodedTrackName]?.ctx.disposed === false,
+        video:
+          user.tracks?.video &&
+          state.media.pulledVideoStreams[user.tracks?.video as EncodedTrackName]?.ctx.disposed === false,
+        screenshare:
+          user.tracks?.screenshare &&
+          state.media.pulledVideoStreams[user.tracks?.screenshare as EncodedTrackName]?.ctx.disposed === false,
+      };
+
+      return {
+        ...user,
+        isOk,
+      };
+    });
+
+  return [
+    ['users', state.call.users.length ?? 0],
+    [
+      '*self* ' + (self?.name ?? truncateKey(self!.id, 8)),
+      self?.tracks?.audio && state.media.pushedAudioTrack ? 'AUD ✅' : 'AUD ❌',
+      self?.tracks?.video && state.media.pushedVideoTrack ? 'VID ✅' : 'VID ❌',
+      self?.tracks?.screenshareEnabled
+        ? self.tracks.screenshareEnabled && state.media.pushedScreenshareTrack
+          ? 'SCR ✅'
+          : 'SCR ❌'
+        : undefined,
+    ],
+
+    ...users.map((user) => [
+      user.name ?? truncateKey(user.id, 8),
+      user.isOk.audio ? 'AUD ✅' : 'AUD ❌',
+      user.isOk.video ? 'VID ✅' : 'VID ❌',
+      user.tracks?.screenshareEnabled ? (user.isOk.screenshare ? 'SCR ✅' : 'SCR ❌') : undefined,
+    ]),
+    ['ICE', state.media.peer?.session?.peerConnection.iceConnectionState ?? 'no connection'],
+  ];
+};
+
+export namespace Unit {
+  export const KB = (n?: number) => ((n ?? 0) / 1_000).toFixed(2);
+}
+
+export type TableProps = {
+  rows: (string | number | undefined)[][];
+};
+
+export const Table = ({ rows }: TableProps) => {
+  return (
+    <div className='w-full text-xs font-mono'>
+      {rows.map(([prefix, label, value, unit], i) => (
+        <div key={i} className='grid grid-cols-[3fr_1fr_1fr_1fr]'>
+          <div className='p-1'>{prefix}</div>
+          <div className='p-1'>{label}</div>
+          <div className='p-1'>{value}</div>
+          <div className='p-1'>{unit}</div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/containers/CallDebugPanel/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { CallDebugPanel } from './CallDebugPanel';
+
+export default CallDebugPanel;

package/src/containers/CallSidebar/CallSidebar.tsx

@@ -0,0 +1,17 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React from 'react';
+
+import { useCapability } from '@dxos/app-framework/ui';
+
+import { ThreadCapabilities } from '../../types';
+import ChannelContainer from '../ChannelContainer';
+
+export const CallSidebar = () => {
+  const call = useCapability(ThreadCapabilities.CallManager);
+  const roomId = useAtomValue(call.roomIdAtom);
+  return <ChannelContainer subject={undefined} roomId={roomId} />;
+};

package/src/containers/CallSidebar/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { CallSidebar } from './CallSidebar';
+
+export default CallSidebar;

package/src/containers/ChannelContainer/ChannelContainer.stories.tsx

@@ -0,0 +1,60 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Capability } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { Query, useDatabase, useQuery } from '@dxos/react-client/echo';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { render } from '@dxos/storybook-utils';
+import { Message, Thread } from '@dxos/types';
+
+import { createThreadPlugins } from '../../testing';
+import { translations } from '../../translations';
+import { Channel } from '../../types';
+
+import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
+
+// TODO(wittjosiah): Channel doesn't render full height.
+const DefaultStory = ({ roomId }: ChannelContainerProps) => {
+  const db = useDatabase();
+  const [channel] = useQuery(db, Query.type(Channel.Channel));
+  if (!channel) {
+    return null;
+  }
+
+  return <ChannelContainer subject={channel} roomId={roomId} />;
+};
+
+const meta = {
+  title: 'plugins/plugin-thread/containers/ChannelContainer',
+  component: ChannelContainer,
+  render: render(DefaultStory),
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column' }),
+    withPluginManager({
+      plugins: [...(await createThreadPlugins())],
+      capabilities: [Capability.contributes(AppCapabilities.Schema, [Channel.Channel, Thread.Thread, Message.Message])],
+    }),
+  ],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof ChannelContainer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    // Fixed room for testing.
+    subject: undefined,
+    roomId: '04a1d1911703b8e929d0649021a965',
+  },
+};

package/src/{components → containers/ChannelContainer}/ChannelContainer.tsx

@@ -2,48 +2,54 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import React, { useCallback, useEffect, useMemo, useState, type ChangeEvent } from 'react';
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { useCapabilities, useCapability } from '@dxos/app-framework';
+import { useCapabilities, useCapability } from '@dxos/app-framework/ui';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { Context } from '@dxos/context';
 import { failUndefined } from '@dxos/debug';
+import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { getSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { useTranslation, Input, ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
-import { ControlGroup, ControlItemInput, ControlGroupButton } from '@dxos/react-ui-form';
-import { ToolbarMenu, MenuProvider, createMenuAction, useMenuActions, createMenuItemGroup } from '@dxos/react-ui-menu';
+import { ElevationProvider, Input, Panel, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
+import { Menu, createMenuAction, createMenuItemGroup, useMenuActions } from '@dxos/react-ui-menu';
 import { useSoundEffect } from '@dxos/react-ui-sfx';
-import { StackItem } from '@dxos/react-ui-stack';
 
-import { Call } from './Call';
-import ChatContainer from './ChatContainer';
-import { ThreadCapabilities } from '../capabilities';
-import { meta } from '../meta';
-import { type ChannelType } from '../types';
+import { Call } from '../../components';
+import { meta } from '../../meta';
+import { ThreadCapabilities } from '../../types';
+import { type Channel } from '../../types';
+import ChatContainer from '../ChatContainer';
 
-export type ChannelContainerProps = {
-  channel?: ChannelType;
-  roomId?: string;
-  role?: string;
-  fullscreen?: boolean;
-};
+export type ChannelContainerProps = SurfaceComponentProps<
+  Channel.Channel | undefined,
+  {
+    roomId?: string;
+    fullscreen?: boolean;
+  }
+>;
 
 /**
  * Renders a call when active, otherwise renders the channel chat.
  */
-export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }: ChannelContainerProps) => {
+// TODO(burdon): Create Radix style layout.
+export const ChannelContainer = ({ role, subject: channel, roomId: roomIdProp, fullscreen }: ChannelContainerProps) => {
   const space = getSpace(channel);
   const callManager = useCapability(ThreadCapabilities.CallManager);
-  const roomId = _roomId ?? (channel ? fullyQualifiedId(channel) : failUndefined());
+  const extensions = useCapabilities(ThreadCapabilities.CallExtension);
+  const joined = useAtomValue(callManager.joinedAtom);
+  const currentRoomId = useAtomValue(callManager.roomIdAtom);
+  const attendableId = channel ? Obj.getDXN(channel).toString() : undefined;
+  const roomId = roomIdProp ?? attendableId ?? failUndefined();
   const identity = useIdentity();
   const isNamed = !!identity?.profile?.displayName;
   const joinSound = useSoundEffect('JoinCall');
   const leaveSound = useSoundEffect('LeaveCall');
 
-  const extensions = useCapabilities(ThreadCapabilities.CallExtension);
   useEffect(() => {
     const ctx = new Context();
     callManager.left.on(ctx, (roomId) => {
@@ -78,7 +84,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       return;
     }
 
-    if (callManager.joined) {
+    if (joined) {
       await callManager.leave();
     }
 
@@ -91,7 +97,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       // TODO(burdon): Error sound.
       log.catch(err);
     }
-  }, [extensions, channel, roomId]);
+  }, [extensions, channel, roomId, joined]);
 
   /**
    * Leave the call.
@@ -110,28 +116,39 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
     }
   }, [extensions, roomId]);
 
-  const isJoined = callManager.joined && callManager.roomId === roomId;
-
-  return (
-    <StackItem.Content toolbar={!isJoined} classNames={isJoined && 'h-full'}>
-      {isJoined && !isNamed && <DisplayNameMissing />}
-      {isJoined && isNamed && (
-        <Call.Root>
-          <Call.Grid fullscreen={fullscreen} />
-          <Call.Toolbar channel={channel} onLeave={handleLeave} />
-        </Call.Root>
-      )}
-      {!isJoined && channel && channel.defaultThread.target && space && (
-        <>
-          <ChannelToolbar attendableId={fullyQualifiedId(channel)} role={role} onJoinCall={handleJoin} />
+  const isJoined = joined && currentRoomId === roomId;
+  if (isJoined) {
+    return (
+      <Panel.Root>
+        <Panel.Content>
+          {isNamed ? (
+            <Call.Root>
+              <Call.Grid fullscreen={fullscreen} />
+              <Call.Toolbar channel={channel} onLeave={handleLeave} />
+            </Call.Root>
+          ) : (
+            <DisplayNameMissing />
+          )}
+        </Panel.Content>
+      </Panel.Root>
+    );
+  }
+
+  if (channel && channel.defaultThread.target && space) {
+    return (
+      <Panel.Root classNames='dx-article'>
+        <Panel.Toolbar asChild>
+          <ChannelToolbar attendableId={attendableId} role={role} onJoinCall={handleJoin} />
+        </Panel.Toolbar>
+        <Panel.Content asChild>
           <ChatContainer space={space} thread={channel.defaultThread.target} />
-        </>
-      )}
-    </StackItem.Content>
-  );
-};
+        </Panel.Content>
+      </Panel.Root>
+    );
+  }
 
-export default ChannelContainer;
+  return null;
+};
 
 const DisplayNameMissing = () => {
   const { t } = useTranslation(meta.id);
@@ -141,26 +158,26 @@ const DisplayNameMissing = () => {
   const handleSave = useCallback(() => client.halo.updateProfile({ displayName }), [client, displayName]);
 
   return (
-    <ControlGroup classNames='p-4 place-content-center'>
-      <ControlItemInput title={t('display name label')} description={t('display name description')}>
+    <Settings.Group classNames='p-4 place-content-center'>
+      <Settings.ItemInput title={t('display name label')} description={t('display name description')}>
         <Input.TextInput
           value={displayName}
           onChange={handleChange}
           placeholder={t('display name input placeholder')}
-          classNames='md:min-is-64'
+          classNames='md:min-w-64'
         />
-      </ControlItemInput>
-      <ControlGroupButton disabled={!displayName} onClick={handleSave}>
+      </Settings.ItemInput>
+      <Settings.GroupButton disabled={!displayName} onClick={handleSave}>
         {t('set display name label')}
-      </ControlGroupButton>
-    </ControlGroup>
+      </Settings.GroupButton>
+    </Settings.Group>
   );
 };
 
 const useChannelToolbarActions = (onJoinCall?: () => void) => {
   const creator = useMemo(
     () =>
-      Rx.make(() => {
+      Atom.make(() => {
         return {
           nodes: [
             createMenuItemGroup('root', {
@@ -172,7 +189,7 @@ const useChannelToolbarActions = (onJoinCall?: () => void) => {
               type: 'video-call',
             }),
           ],
-          edges: [{ source: 'root', target: 'video-call' }],
+          edges: [{ source: 'root', target: 'video-call', relation: 'child' }],
         };
       }),
     [],
@@ -181,20 +198,20 @@ const useChannelToolbarActions = (onJoinCall?: () => void) => {
   return useMenuActions(creator);
 };
 
-type ChannelToolbarProps = ThemedClassName<{
+type ChannelToolbarProps = {
   attendableId?: string;
   role?: string;
   onJoinCall?: () => void;
-}>;
+};
 
-const ChannelToolbar = ({ attendableId, role, onJoinCall, classNames }: ChannelToolbarProps) => {
+const ChannelToolbar = ({ attendableId, role, onJoinCall }: ChannelToolbarProps) => {
   const menuProps = useChannelToolbarActions(onJoinCall);
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menuProps} attendableId={attendableId}>
-        <ToolbarMenu classNames={classNames} />
-      </MenuProvider>
+      <Menu.Root {...menuProps} attendableId={attendableId}>
+        <Menu.Toolbar textBlockWidth />
+      </Menu.Root>
     </ElevationProvider>
   );
 };

package/src/containers/ChannelContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ChannelContainer } from './ChannelContainer';
+
+export default ChannelContainer;