@dxos/plugin-thread 0.8.3 → 0.8.4-main.1f223c7

package/src/capabilities/intent-resolver.ts

@@ -2,22 +2,41 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, createIntent, createResolver, type PluginContext } from '@dxos/app-framework';
+import { Effect } from 'effect';
+
+import { Capabilities, type PluginContext, contributes, createIntent, createResolver } from '@dxos/app-framework';
 import { sleep } from '@dxos/async';
-import { Obj, Relation } from '@dxos/echo';
+import { Obj, Relation, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
-import { SpaceAction } from '@dxos/plugin-space/types';
-import { fullyQualifiedId, getSpace, Ref } from '@dxos/react-client/echo';
+import { CollectionAction, SpaceAction } from '@dxos/plugin-space/types';
+import { Ref, fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
 import { AnchoredTo, DataType } from '@dxos/schema';
 
-import { ThreadCapabilities } from './capabilities';
 import { THREAD_PLUGIN } from '../meta';
 import { ChannelType, ThreadAction, ThreadType } from '../types';
 
+import { ThreadCapabilities } from './capabilities';
+
 export default (context: PluginContext) =>
   contributes(Capabilities.IntentResolver, [
+    createResolver({
+      intent: ThreadAction.OnSpaceCreated,
+      resolve: ({ space, rootCollection }) =>
+        Effect.gen(function* () {
+          const { dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+          const { object: collection } = yield* dispatch(
+            createIntent(CollectionAction.CreateQueryCollection, { typename: Type.getTypename(ChannelType) }),
+          );
+          rootCollection.objects.push(Ref.make(collection));
+
+          const { object: channel } = yield* dispatch(
+            createIntent(ThreadAction.CreateChannel, { name: 'General', spaceId: space.id }),
+          );
+          space.db.add(channel);
+        }),
+    }),
     createResolver({
       intent: ThreadAction.CreateChannel,
       resolve: ({ name }) => ({
@@ -76,6 +95,39 @@ export default (context: PluginContext) =>
         };
       },
     }),
+    createResolver({
+      intent: ThreadAction.AddProposal,
+      resolve: ({ text, anchor, sender, subject }) => {
+        const space = getSpace(subject);
+        invariant(space, 'Space not found');
+
+        const subjectId = fullyQualifiedId(subject);
+        const proposal = Obj.make(DataType.Message, {
+          created: new Date().toISOString(),
+          sender,
+          blocks: [{ _tag: 'proposal', text }],
+        });
+        const thread = Obj.make(ThreadType, { name: 'Proposal', messages: [Ref.make(proposal)], status: 'active' });
+
+        return {
+          intents: [
+            createIntent(SpaceAction.AddObject, { object: thread, target: space, hidden: true }),
+            createIntent(SpaceAction.AddRelation, {
+              space,
+              schema: AnchoredTo,
+              source: thread,
+              target: subject,
+              fields: { anchor },
+            }),
+            createIntent(ThreadAction.Select, { current: fullyQualifiedId(thread) }),
+            createIntent(DeckAction.ChangeCompanion, {
+              primary: subjectId,
+              companion: `${subjectId}${ATTENDABLE_PATH_SEPARATOR}comments`,
+            }),
+          ],
+        };
+      },
+    }),
     createResolver({
       intent: ThreadAction.Select,
       resolve: ({ current }) => {
@@ -179,17 +231,17 @@ export default (context: PluginContext) =>
         const subjectId = fullyQualifiedId(subject);
         const space = getSpace(subject);
         invariant(space, 'Space not found');
-        const intents = [];
 
         const message = Obj.make(DataType.Message, {
-          sender,
           created: new Date().toISOString(),
-          blocks: [{ type: 'text', text }],
+          sender,
+          blocks: [{ _tag: 'text', text }],
           // TODO(wittjosiah): Context based on attention.
           // context: context ? Ref.make(context) : undefined,
         });
         thread.messages.push(Ref.make(message));
 
+        const intents = [];
         const draft = state.drafts[subjectId]?.find((a) => a.id === anchor.id);
         if (draft) {
           // Move draft to document.

package/src/capabilities/markdown.ts

@@ -4,15 +4,16 @@
 
 import { EditorView } from '@codemirror/view';
 
-import { Capabilities, contributes, createIntent, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
 import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
 import { MarkdownCapabilities } from '@dxos/plugin-markdown';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { commentClickedEffect, commentsState, type EditorState, overlap } from '@dxos/react-ui-editor';
+import { type EditorState, commentClickedEffect, commentsState, overlap } from '@dxos/react-ui-editor';
 
-import { ThreadCapabilities } from './capabilities';
 import { threads } from '../extensions';
 
+import { ThreadCapabilities } from './capabilities';
+
 export default (context: PluginContext) =>
   contributes(MarkdownCapabilities.Extensions, [
     ({ document: doc }) => {

package/src/capabilities/react-surface.tsx

@@ -9,17 +9,18 @@ import { Obj, type Ref } from '@dxos/echo';
 import { SettingsStore } from '@dxos/local-storage';
 import { getSpace } from '@dxos/react-client/echo';
 
-import { ThreadCapabilities } from './capabilities';
 import {
-  CallSidebar,
   CallDebugPanel,
+  CallSidebar,
   ChannelContainer,
+  ChatContainer,
   ThreadComplementary,
   ThreadSettings,
-  ChatContainer,
 } from '../components';
 import { THREAD_PLUGIN } from '../meta';
-import { ChannelType, ThreadType, type ThreadSettingsProps } from '../types';
+import { ChannelType, type ThreadSettingsProps, ThreadType } from '../types';
+
+import { ThreadCapabilities } from './capabilities';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [

package/src/capabilities/state.ts

@@ -5,9 +5,10 @@
 import { contributes } from '@dxos/app-framework';
 import { live } from '@dxos/live-object';
 
-import { ThreadCapabilities } from './capabilities';
 import { type ThreadState, type ViewStore } from '../types';
 
+import { ThreadCapabilities } from './capabilities';
+
 const initialViewState = { showResolvedThreads: false };
 
 export default () => {

package/src/capabilities/toolkit.ts

@@ -0,0 +1,78 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { AiTool, AiToolkit } from '@effect/ai';
+import { Array, Effect, Schema, pipe } from 'effect';
+
+import { Capabilities, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
+import { ArtifactId, computeDiffsWithCursors } from '@dxos/assistant';
+import { type SpaceId } from '@dxos/keys';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { type Markdown } from '@dxos/plugin-markdown/types';
+import { createDocAccessor } from '@dxos/react-client/echo';
+import { trim } from '@dxos/util';
+
+import { ThreadAction } from '../types';
+
+// TODO(wittjosiah): How to make this work for more than Documents?
+class Toolkit extends AiToolkit.make(
+  AiTool.make('add-proposals', {
+    description: trim`
+      Proposes a set of changes to a document.
+    `,
+    parameters: {
+      id: ArtifactId,
+      diffs: Schema.Array(Schema.String).annotations({
+        description: 'The diffs to propose for the document.',
+      }),
+    },
+    success: Schema.Any,
+    failure: Schema.Never,
+  }),
+) {
+  static layer = (context: PluginContext) =>
+    Toolkit.toLayer({
+      'add-proposals': ({ id, diffs: _diffs }) =>
+        Effect.gen(function* () {
+          // TODO(wittjosiah): Get capabilities via layers.
+          const { dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+          const client = context.getCapability(ClientCapabilities.Client);
+          const state = context.getCapability(Capabilities.Layout);
+
+          const dxn = ArtifactId.toDXN(id, state.workspace as SpaceId);
+
+          const echoDxn = dxn.asEchoDXN();
+          if (!echoDxn) {
+            throw new Error(`Invalid object ID: ${id}`);
+          }
+
+          const space = client.spaces.get(echoDxn.spaceId!);
+          const object = space?.db.getObjectById<Markdown.Document>(echoDxn.echoId);
+          if (!object) {
+            throw new Error(`Object not found: ${id}`);
+          }
+
+          const content = yield* Effect.promise(() => object.content.load());
+          const accessor = createDocAccessor(content, ['content']);
+          yield* pipe(
+            computeDiffsWithCursors(accessor, _diffs),
+            Array.map(({ cursor, text }) =>
+              createIntent(ThreadAction.AddProposal, {
+                subject: object,
+                sender: { role: 'assistant' },
+                anchor: cursor,
+                text,
+              }),
+            ),
+            Array.map(dispatch),
+            Effect.allWith({ concurrency: 'unbounded' }),
+          );
+        }).pipe(Effect.orDie),
+    });
+}
+
+export default (context: PluginContext) => [
+  contributes(Capabilities.Toolkit, Toolkit),
+  contributes(Capabilities.ToolkitHandler, Toolkit.layer(context)),
+];

package/src/components/Call/Call.tsx

@@ -2,17 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type PropsWithChildren, type FC } from 'react';
+import React, { type FC, type PropsWithChildren } from 'react';
 
 import { useCapability } from '@dxos/app-framework';
 import { type ThemedClassName } from '@dxos/react-ui';
 
-import { Toolbar, type ToolbarProps } from './Toolbar';
 import { ThreadCapabilities } from '../../capabilities';
 import { useDebugMode } from '../../hooks';
 import { AudioStream } from '../Media';
 import { ParticipantGrid } from '../Participant';
 
+import { Toolbar, type ToolbarProps } from './Toolbar';
+
 //
 // Root
 //
@@ -34,7 +35,7 @@ type CallAudioProps = {};
 const CallAudio: FC<CallAudioProps> = () => {
   const call = useCapability(ThreadCapabilities.CallManager);
 
-  return <AudioStream tracks={call.pulledAudioTracks} />;
+  return <AudioStream tracks={call.audioTracksToPlay} />;
 };
 
 CallAudio.displayName = 'CallAudio';

package/src/components/Call/Toolbar.tsx

@@ -5,21 +5,21 @@
 import React from 'react';
 
 import { useAppGraph, useCapability } from '@dxos/app-framework';
-import { useNode, useActions } from '@dxos/plugin-graph';
+import { useActions, useNode } from '@dxos/plugin-graph';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 import {
   Icon,
   IconButton,
   type IconButtonProps,
+  Toolbar as NaturalToolbar,
   type ThemedClassName,
-  Toolbar as NativeToolbar,
   toLocalizedString,
   useTranslation,
 } from '@dxos/react-ui';
 import { groupHoverControlItemWithTransition, mx } from '@dxos/react-ui-theme';
 
 import { ThreadCapabilities } from '../../capabilities';
-import { THREAD_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { type ChannelType } from '../../types';
 
 export type ToolbarProps = ThemedClassName<{
@@ -40,7 +40,7 @@ export const Toolbar = ({
   onJoin,
   onLeave,
 }: ToolbarProps) => {
-  const { t } = useTranslation(THREAD_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const { graph } = useAppGraph();
   const call = useCapability(ThreadCapabilities.CallManager);
 
@@ -56,7 +56,7 @@ export const Toolbar = ({
   // TODO(wittjosiah): In order to use toolbar, need to update to actually use the graph action callbacks directly.
   return (
     <div className={mx('z-20 flex justify-center m-8', autoHideControls && groupHoverControlItemWithTransition)}>
-      <NativeToolbar.Root classNames={['p-2 bg-modalSurface rounded-md shadow-md', classNames]}>
+      <NaturalToolbar.Root classNames={['p-2 bg-modalSurface rounded-md shadow-md', classNames]}>
         <ToggleButton
           active={call.media.audioEnabled}
           state={{
@@ -95,7 +95,7 @@ export const Toolbar = ({
             <Icon icon='ph--users--regular' size={4} />
             <div>{participants}</div>
           </div>
-        )) || <NativeToolbar.Separator variant='gap' />}
+        )) || <NaturalToolbar.Separator variant='gap' />}
 
         {call.joined && (
           <>
@@ -151,7 +151,7 @@ export const Toolbar = ({
         ) : (
           <IconButton variant='primary' icon='ph--phone-incoming--regular' label={t('join call')} onClick={onJoin} />
         )}
-      </NativeToolbar.Root>
+      </NaturalToolbar.Root>
     </div>
   );
 };
@@ -174,7 +174,7 @@ const defaultButtonProps: Partial<IconButtonProps> = {
 const ToggleButton = ({ active, state }: ToolbarButtonProps) => (
   <IconButton
     {...defaultButtonProps}
-    classNames={[active ? state.on.classNames ?? 'bg-callActive' : state.off.classNames]}
+    classNames={[active ? (state.on.classNames ?? 'bg-callActive') : state.off.classNames]}
     icon={active ? state.on.icon : state.off.icon}
     label={active ? state.on.label : state.off.label}
     onClick={active ? state.on.onClick : state.off.onClick}

package/src/components/CallDebugPanel.tsx

@@ -2,28 +2,33 @@
 // Copyright 2024 DXOS.org
 //
 
-import { WebRTCStats } from '@peermetrics/webrtc-stats';
+import { WebRTCStats, type WebRTCStatsEvent } from '@peermetrics/webrtc-stats';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { Panel } from '@dxos/devtools';
+import { truncateKey } from '@dxos/debug';
+import { JsonView, Panel } from '@dxos/devtools';
 import { log } from '@dxos/log';
-import { Input, useTranslation, type ThemedClassName } from '@dxos/react-ui';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 
-import { type GlobalState } from '../calls';
-import { THREAD_PLUGIN } from '../meta';
+import { type EncodedTrackName, type GlobalState } from '../calls';
+import { meta } from '../meta';
 
 export type CallDebugPanelProps = ThemedClassName<{
   state?: GlobalState;
 }>;
 
 export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
-  const users = state?.call?.users;
-  const self = state?.call?.self;
-  const { t } = useTranslation(THREAD_PLUGIN);
+  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);
 
@@ -34,22 +39,24 @@ export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
       }),
     [],
   );
+  const [stats, setStats] = useState<WebRTCStatsEvent['data']>();
 
-  const [stats, setStats] = useState<Record<string, any>>({});
   useEffect(() => {
     const pc = state?.media.peer?.session?.peerConnection;
-    const handleStats = (stats: Record<string, any>) => setStats(stats.data);
+    const handleStats = (stats: WebRTCStatsEvent) => {
+      setStats(stats.data);
+    };
     let added = false;
     if (pc && showDetailedWebRTCStats) {
       webrtcStats.addConnection({ pc, peerId: 1, connectionId: '1' });
-      webrtcStats.on('stats', handleStats);
+      webrtcStats.on('stats', handleStats as never);
       added = true;
     }
     return () => {
       try {
         if (pc && added) {
           webrtcStats.removeConnection({ pc });
-          webrtcStats.removeListener('stats', handleStats);
+          webrtcStats.removeListener('stats', handleStats as never);
         }
       } catch (error) {
         log.error('error removing webrtc stats', { error, pc, peerId: 1, connectionId: '1' });
@@ -57,6 +64,8 @@ export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
     };
   }, [state?.media.peer?.session?.peerConnection, showDetailedWebRTCStats]);
 
+  const rows = useMemo(() => getCallStatusTable(state), [state?.call.users, state?.media.pulledAudioTracks]);
+
   return (
     <Panel
       id='meeting-status'
@@ -65,51 +74,101 @@ export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
       onToggle={handleToggle}
       title={t('meeting status title')}
       maxHeight={false}
-      info={
-        <div className='flex items-center gap-2'>
-          <span title='Joined'>{self?.joined ? 'Active' : 'Inactive'}</span>
-          {users?.length !== undefined && <span title='Users'>{users?.length ?? 0} User(s)</span>}
-        </div>
-      }
+      info={<div className='flex items-center gap-2'> {state?.call.joined ? 'Active' : 'Inactive'}</div>}
     >
-      <div className='flex flex-col gap-2 overflow-y-auto'>
-        <div className='flex items-row gap-2'>
+      <div className='flex flex-col w-full gap-2 text-xs'>
+        <div className='flex items-center gap-2'>
           <Input.Root>
             <Input.Label classNames={'text-sm'}>{t('show webrtc stats title')}</Input.Label>
             <Input.Checkbox checked={showDetailedWebRTCStats} onCheckedChange={handleShowDetailedWebRTCStats} />
           </Input.Root>
         </div>
-        <Json
-          classNames='text-sm'
-          data={{
-            users,
-            activities: state?.call?.activities,
-            ...(showDetailedWebRTCStats
-              ? {
-                  webrtc: {
-                    connectionState: state?.media.peer?.session?.peerConnection.connectionState,
-                    iceConnectionState: state?.media.peer?.session?.peerConnection.iceConnectionState,
-                    stats,
-                  },
-                }
-              : {}),
-            tracks: state?.media.peer?.session?.peerConnection.getTransceivers().map((transceiver) => {
-              const track =
-                transceiver.direction === 'recvonly' ? transceiver.receiver.track : transceiver.sender.track;
-              return {
-                id: track?.id,
-                kind: track?.kind,
-                direction: transceiver.direction,
-                enabled: track?.enabled,
-                muted: track?.muted,
-                readyState: track?.readyState,
-                settings: track?.getSettings(),
-              };
-            }),
-            callsServiceHistory: state?.media.peer?.history.get(),
-          }}
-        />
+        <div className='flex items-center gap-2'>
+          <Input.Root>
+            <Input.Label classNames={'text-sm'}>{t('show calls history title')}</Input.Label>
+            <Input.Checkbox checked={showServiceHistory} onCheckedChange={handleToggleServiceHistory} />
+          </Input.Root>
+        </div>
+        <div className='flex items-center gap-2'>
+          <IconButton classNames={'text-sm'} 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/components/CallSidebar.tsx

@@ -6,9 +6,10 @@ import React from 'react';
 
 import { useCapability } from '@dxos/app-framework';
 
-import { ChannelContainer } from './ChannelContainer';
 import { ThreadCapabilities } from '../capabilities';
 
+import { ChannelContainer } from './ChannelContainer';
+
 export const CallSidebar = () => {
   const call = useCapability(ThreadCapabilities.CallManager);
   return <ChannelContainer roomId={call.roomId} />;

package/src/components/ChannelContainer.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { contributes } from '@dxos/app-framework';
@@ -12,28 +12,29 @@ import { withPluginManager } from '@dxos/app-framework/testing';
 import { ClientCapabilities } from '@dxos/plugin-client';
 import { Query, useQuery, useSpace } from '@dxos/react-client/echo';
 import { DataType } from '@dxos/schema';
-import { withLayout, ColumnContainer } from '@dxos/storybook-utils';
+import { ColumnContainer, withLayout } from '@dxos/storybook-utils';
 
-import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
 import { createThreadPlugins } from '../testing';
-import translations from '../translations';
+import { translations } from '../translations';
 import { ChannelType, ThreadType } from '../types';
 
+import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
+
 // TODO(wittjosiah): Channel doesn't render full height.
-const Story = () => {
+const Story = ({ roomId }: ChannelContainerProps) => {
   const space = useSpace();
   const [channel] = useQuery(space, Query.type(ChannelType));
   if (!channel) {
     return null;
   }
 
-  return <ChannelContainer channel={channel} />;
+  return <ChannelContainer channel={channel} roomId={roomId} />;
 };
 
-const meta: Meta<ChannelContainerProps> = {
+const meta = {
   title: 'plugins/plugin-thread/ChannelContainer',
   component: ChannelContainer,
-  render: () => <Story />,
+  render: (args) => <Story {...args} />,
   decorators: [
     withPluginManager({
       plugins: [...(await createThreadPlugins())],
@@ -44,11 +45,11 @@ const meta: Meta<ChannelContainerProps> = {
   parameters: {
     translations,
   },
-};
+} satisfies Meta<typeof ChannelContainer>;
 
 export default meta;
 
-type Story = StoryObj<ChannelContainerProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {