@dxos/plugin-assistant 0.9.1-main.c7dcc2e112 → 0.10.0

package/src/components/ChatPrompt/ChatActions.tsx

@@ -2,9 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren, useCallback, useEffect, useState } from 'react';
 
-import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { useOptionalAtomCapabilityState, useOptionalCapabilities } from '@dxos/app-framework/ui';
+import { type Settings, TranscriptionCapabilities } from '@dxos/plugin-transcription';
+import { DropdownMenu, Icon, IconButton, MicButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
@@ -13,43 +15,188 @@ import { type ChatEvent } from '../Chat/events';
 
 export type ChatActionsProps = ThemedClassName<
   PropsWithChildren<{
+    docId?: string;
     microphone?: boolean;
-    recording?: boolean;
     processing?: boolean;
     debug?: boolean;
     onEvent?: (event: ChatEvent) => void;
   }>
 >;
 
+type AudioInputDevice = {
+  deviceId: string;
+  label: string;
+};
+
 export const ChatActions = ({
   classNames,
   children,
+  docId,
   microphone,
-  recording,
   processing,
   debug,
   onEvent,
 }: ChatActionsProps) => {
   const { t } = useTranslation(meta.profile.key);
+  // Voice input is optional: the transcription plugin contributes these capabilities. Tolerate its
+  // absence so the chat prompt still renders (e.g. in stories that do not load the plugin).
+  const transcriptionAvailable = useOptionalCapabilities(TranscriptionCapabilities.RecordingSession).length > 0;
+  const [session, setSession] = useOptionalAtomCapabilityState(TranscriptionCapabilities.RecordingSession);
+  const [settings, setSettings] = useOptionalAtomCapabilityState(TranscriptionCapabilities.Settings);
+
+  const recording = !!session?.recording && session.id === docId;
+  const recordMode: Settings.RecordMode = settings?.recordMode ?? 'toggle';
+  const entityExtraction = settings?.entityExtraction !== false;
+  const selectedDeviceId = settings?.audioDeviceId ?? '';
+
+  const [devices, setDevices] = useState<AudioInputDevice[]>([]);
+  useEffect(() => {
+    // Only touch media APIs when the recording controls are actually shown.
+    if (!microphone || !transcriptionAvailable || !navigator.mediaDevices?.enumerateDevices) {
+      return;
+    }
+    let cancelled = false;
+    const refresh = async () => {
+      const all = await navigator.mediaDevices.enumerateDevices();
+      if (cancelled) {
+        return;
+      }
+      // Labels are blank until microphone permission is granted; fall back to an ordinal name.
+      setDevices(
+        all
+          .filter((device) => device.kind === 'audioinput' && device.deviceId)
+          .map((device, index) => ({
+            deviceId: device.deviceId,
+            label: device.label || `Microphone ${index + 1}`,
+          })),
+      );
+    };
+    void refresh();
+    navigator.mediaDevices.addEventListener('devicechange', refresh);
+    return () => {
+      cancelled = true;
+      navigator.mediaDevices.removeEventListener('devicechange', refresh);
+    };
+  }, [microphone, transcriptionAvailable]);
+
+  const handleToggle = useCallback(() => {
+    if (!docId) {
+      return;
+    }
+    setSession((current) => (current?.recording && current.id === docId ? null : { id: docId, recording: true }));
+  }, [setSession, docId]);
+
+  const handlePressStart = useCallback(() => {
+    if (!docId) {
+      return;
+    }
+    setSession(() => ({ id: docId, recording: true }));
+  }, [setSession, docId]);
+
+  const handlePressEnd = useCallback(() => {
+    setSession((current) => (current?.id === docId ? null : current));
+  }, [setSession, docId]);
+
+  const handleRecordModeChange = useCallback(
+    (mode: Settings.RecordMode) => setSettings((current) => ({ ...current, recordMode: mode })),
+    [setSettings],
+  );
+
+  const handleEntityExtractionChange = useCallback(
+    (value: boolean) => setSettings((current) => ({ ...current, entityExtraction: value })),
+    [setSettings],
+  );
+
+  const handleSelectDevice = useCallback(
+    (deviceId: string) => setSettings((current) => ({ ...current, audioDeviceId: deviceId || undefined })),
+    [setSettings],
+  );
+
+  const recordLabel = recording
+    ? t('stop-recording.label')
+    : recordMode === 'hold'
+      ? t('hold-to-record.label')
+      : t('start-recording.label');
 
   return (
     <div className={mx('flex items-center', classNames)}>
       {children}
 
-      {microphone && (
-        <IconButton
-          disabled={!processing}
-          classNames={mx(recording && 'bg-primary-500')}
-          variant='ghost'
-          icon='ph--microphone--regular'
-          iconOnly
-          noTooltip
-          label={t('microphone.button')}
-          onMouseDown={() => onEvent?.({ type: 'record-start' })}
-          onMouseUp={() => onEvent?.({ type: 'record-stop' })}
-          onTouchStart={() => onEvent?.({ type: 'record-start' })}
-          onTouchEnd={() => onEvent?.({ type: 'record-stop' })}
-        />
+      {microphone && docId && transcriptionAvailable && (
+        <>
+          <MicButton
+            iconOnly
+            variant='ghost'
+            label={recordLabel}
+            recording={recording}
+            mode={recordMode}
+            onToggle={handleToggle}
+            onPressStart={handlePressStart}
+            onPressEnd={handlePressEnd}
+            data-testid='assistant.record'
+          />
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <IconButton
+                icon='ph--caret-down--regular'
+                iconOnly
+                label={t('recording-options.label')}
+                variant='ghost'
+                classNames='w-4'
+                data-testid='assistant.record.options'
+              />
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Portal>
+              <DropdownMenu.Content>
+                <DropdownMenu.Viewport>
+                  <DropdownMenu.GroupLabel>{t('record-mode.label')}</DropdownMenu.GroupLabel>
+                  <SettingsSelectableItem
+                    label={t('record-mode.toggle.label')}
+                    selected={recordMode === 'toggle'}
+                    onSelect={() => handleRecordModeChange('toggle')}
+                  />
+                  <SettingsSelectableItem
+                    label={t('record-mode.hold.label')}
+                    selected={recordMode === 'hold'}
+                    onSelect={() => handleRecordModeChange('hold')}
+                  />
+
+                  <DropdownMenu.Separator />
+
+                  <DropdownMenu.GroupLabel>{t('audio-device.label')}</DropdownMenu.GroupLabel>
+                  <SettingsSelectableItem
+                    label={t('audio-device.default.label')}
+                    selected={selectedDeviceId === ''}
+                    onSelect={() => handleSelectDevice('')}
+                  />
+                  {devices.map((device) => (
+                    <SettingsSelectableItem
+                      key={device.deviceId}
+                      label={device.label}
+                      selected={selectedDeviceId === device.deviceId}
+                      onSelect={() => handleSelectDevice(device.deviceId)}
+                    />
+                  ))}
+
+                  <DropdownMenu.Separator />
+
+                  <DropdownMenu.CheckboxItem
+                    checked={entityExtraction}
+                    onCheckedChange={handleEntityExtractionChange}
+                    classNames='gap-2'
+                    data-testid='assistant.entity-extraction'
+                  >
+                    <span className='grow truncate'>{t('settings.entity-extraction.label')}</span>
+                    <DropdownMenu.ItemIndicator asChild>
+                      <Icon icon='ph--check--regular' size={4} />
+                    </DropdownMenu.ItemIndicator>
+                  </DropdownMenu.CheckboxItem>
+                </DropdownMenu.Viewport>
+                <DropdownMenu.Arrow />
+              </DropdownMenu.Content>
+            </DropdownMenu.Portal>
+          </DropdownMenu.Root>
+        </>
       )}
 
       {debug && (
@@ -75,3 +222,19 @@ export const ChatActions = ({
     </div>
   );
 };
+
+type SettingsSelectableItemProps = {
+  label: string;
+  selected: boolean;
+  onSelect: () => void;
+};
+
+// The design system's `DropdownMenu.RadioItem` renders a plain item (no radio semantics), so
+// single-select is modelled with a plain item and an explicit trailing check. `onSelect` (not
+// `onClick`) so keyboard activation works.
+const SettingsSelectableItem = ({ label, selected, onSelect }: SettingsSelectableItemProps) => (
+  <DropdownMenu.Item classNames='gap-2' role='menuitemradio' aria-checked={selected} onSelect={onSelect}>
+    <span className='grow truncate'>{label}</span>
+    {selected && <Icon icon='ph--check--regular' size={4} />}
+  </DropdownMenu.Item>
+);

package/src/components/ChatPrompt/ChatOptions.stories.tsx

@@ -23,7 +23,7 @@ import { Organization, Person } from '@dxos/types';
 import { useContextBinder } from '#hooks';
 import { translations } from '#translations';
 
-import { ChatOptions, ObjectsPanel, type ChatOptionsProps } from './ChatOptions';
+import { ChatOptions, type ChatOptionsProps, ObjectsPanel } from './ChatOptions';
 
 const presets = [
   {
@@ -40,9 +40,9 @@ const presets = [
   },
 ];
 
-type DefaultStoryProps = Pick<ChatOptionsProps, 'presets'>;
+type StoryArgs = Pick<ChatOptionsProps, 'presets'>;
 
-const DefaultStory = ({ presets }: DefaultStoryProps) => {
+const DefaultStory = ({ presets }: StoryArgs) => {
   const [space] = useSpaces();
   const [feed] = useQuery(space?.db, Filter.type(Feed.Feed));
   const [chat] = useQuery(space?.db, Filter.type(Chat.Chat));

package/src/components/ChatPrompt/ChatOptions.tsx

@@ -14,7 +14,7 @@ import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { getStyles, mx } from '@dxos/ui-theme';
 
-import { useActiveBlueprints, useBlueprintHandlers, useBlueprints, useContextObjects, useFilteredTypes } from '#hooks';
+import { useActiveSkills, useContextObjects, useFilteredTypes, useSkillHandlers, useSkills } from '#hooks';
 import { meta } from '#meta';
 import { Assistant, type ChatPresetProps } from '#types';
 
@@ -69,8 +69,8 @@ export const ChatOptions = ({ chat, db, context, registry, presets, preset, onPr
                   <Tabs.Panel tabIndex={-1} classNames='dx-focus-ring-inset overflow-hidden' value='view'>
                     <ViewPanel chat={chat} />
                   </Tabs.Panel>
-                  <Tabs.Panel tabIndex={-1} classNames='dx-focus-ring-inset overflow-hidden' value='blueprints'>
-                    <BlueprintsPanel registry={registry} db={db} context={context} />
+                  <Tabs.Panel tabIndex={-1} classNames='dx-focus-ring-inset overflow-hidden' value='skills'>
+                    <SkillsPanel registry={registry} db={db} context={context} />
                   </Tabs.Panel>
                   <Tabs.Panel tabIndex={-1} classNames='dx-focus-ring-inset overflow-hidden' value='mcp-servers'>
                     <McpServersPanel db={db} />
@@ -80,11 +80,7 @@ export const ChatOptions = ({ chat, db, context, registry, presets, preset, onPr
                   </Tabs.Panel>
                   <Tabs.Tablist classNames={[styles.toolbar]}>
                     <Tabs.IconTab value='view' icon='ph--eye--regular' label={t('chat-view.title')} />
-                    <Tabs.IconTab
-                      value='blueprints'
-                      icon='ph--blueprint--regular'
-                      label={t('options.blueprints.title')}
-                    />
+                    <Tabs.IconTab value='skills' icon='ph--blueprint--regular' label={t('options.skills.title')} />
                     <Tabs.IconTab
                       value='mcp-servers'
                       icon='ph--plugs-connected--regular'
@@ -103,32 +99,32 @@ export const ChatOptions = ({ chat, db, context, registry, presets, preset, onPr
   );
 };
 
-const BlueprintsPanel = ({ registry, db, context }: Pick<ChatOptionsProps, 'registry' | 'db' | 'context'>) => {
+const SkillsPanel = ({ registry, db, context }: Pick<ChatOptionsProps, 'registry' | 'db' | 'context'>) => {
   const { t } = useTranslation(meta.profile.key);
 
-  const blueprints = useBlueprints({ registry, db });
-  const activeBlueprints = useActiveBlueprints({ context });
-  const { onUpdateBlueprint } = useBlueprintHandlers({ db, context, registry });
+  const skills = useSkills({ registry, db });
+  const activeSkills = useActiveSkills({ context });
+  const { onUpdateSkill } = useSkillHandlers({ db, context, registry });
   const { results, handleSearch } = useSearchListResults({
-    items: blueprints,
-    extract: (blueprint) => blueprint.name,
+    items: skills,
+    extract: (skill) => skill.name,
   });
 
   return (
     <SearchList.Root onSearch={handleSearch}>
       <SearchList.Content classNames='flex flex-col'>
         <SearchList.Viewport>
-          {results.map((blueprint) => {
-            const blueprintKey = Obj.getMeta(blueprint).key ?? blueprint.id;
-            const isActive = activeBlueprints.has(blueprintKey);
+          {results.map((skill) => {
+            const skillKey = Obj.getMeta(skill).key ?? skill.id;
+            const isActive = activeSkills.has(skillKey);
             return (
               <SearchList.Item
                 classNames='flex items-center overflow-hidden'
-                key={blueprintKey}
-                value={blueprintKey}
-                label={blueprint.name}
+                key={skillKey}
+                value={skillKey}
+                label={skill.name}
                 checked={isActive}
-                onSelect={() => onUpdateBlueprint?.(blueprintKey, !isActive)}
+                onSelect={() => onUpdateSkill?.(skillKey, !isActive)}
               />
             );
           })}

package/src/components/ChatPrompt/ChatPrompt.tsx

@@ -4,16 +4,16 @@
 
 import { useAtomValue } from '@effect-atom/atom-react';
 import * as Option from 'effect/Option';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useMemo, useRef } from 'react';
 
 import { type Chat } from '@dxos/assistant-toolkit';
 import { type Event } from '@dxos/async';
 import { type Database } from '@dxos/echo';
-import { type Merge } from '@dxos/effect';
-import { useVoiceInput } from '@dxos/plugin-transcription';
 import { Input, type ThemedClassName, useDynamicRef, useTranslation } from '@dxos/react-ui';
 import { ChatEditor, type ChatEditorController, type ChatEditorProps } from '@dxos/react-ui-chat';
+import { pendingText } from '@dxos/ui-editor';
 import { mx } from '@dxos/ui-theme';
+import { type Merge } from '@dxos/util';
 
 import { useChatKeymapExtensions } from '#hooks';
 import { meta } from '#meta';
@@ -26,23 +26,22 @@ import { ChatMcpErrors } from './ChatMcpErrors';
 import { ChatOptions } from './ChatOptions';
 import { ChatReferences } from './ChatReferences';
 import { ChatStatusIndicator } from './ChatStatusIndicator';
-
-export type ChatPromptProps = ThemedClassName<
-  Merge<
-    {
-      outline?: boolean;
-      settings?: boolean;
-      expandable?: boolean;
-      db?: Database.Database;
-      chat?: Chat.Chat;
-      processor: AiChatProcessor;
-      event: Event<ChatEvent>;
-      online?: boolean;
-      placeholder?: ChatEditorProps['placeholder'];
-      onOnlineChange?: (online: boolean) => void;
-    },
-    ChatPresetProps
-  >
+import { useChatVoiceInput } from './useChatVoiceInput';
+
+export type ChatPromptProps = Merge<
+  ThemedClassName<{
+    outline?: boolean;
+    settings?: boolean;
+    expandable?: boolean;
+    db?: Database.Database;
+    chat?: Chat.Chat;
+    processor: AiChatProcessor;
+    event: Event<ChatEvent>;
+    /** Read-only indicator of whether the configured provider is the remote (online) service. */
+    online?: boolean;
+    placeholder?: ChatEditorProps['placeholder'];
+  }>,
+  ChatPresetProps
 >;
 
 export const ChatPrompt = ({
@@ -54,7 +53,6 @@ export const ChatPrompt = ({
   event,
   online,
   placeholder,
-  onOnlineChange,
   onPresetChange,
   settings = true,
   presets,
@@ -68,36 +66,21 @@ export const ChatPrompt = ({
   const activeRef = useDynamicRef(active);
 
   const editorRef = useRef<ChatEditorController>(null);
-  const [recordingState, setRecordingState] = useState(false);
   useEffect(() => {
     return event.on((ev) => {
-      switch (ev.type) {
-        case 'update-prompt':
-          if (!editorRef.current?.getText()?.length) {
-            editorRef.current?.setText(ev.text);
-            editorRef.current?.focus();
-          }
-          break;
-        case 'record-start':
-          setRecordingState(true);
-          break;
-        case 'record-stop':
-          setRecordingState(false);
-          break;
+      if (ev.type === 'update-prompt' && !editorRef.current?.getText()?.length) {
+        editorRef.current?.setText(ev.text);
+        editorRef.current?.focus();
       }
     });
   }, [event]);
 
-  // TODO(burdon): Configure capability in TranscriptionPlugin.
-  const { recording } = useVoiceInput({
-    active: recordingState,
-    onUpdate: (text) => {
-      editorRef.current?.setText(text);
-      editorRef.current?.focus();
-    },
-  });
+  const fallbackDocId = useId();
+  const docId = chat?.id ?? fallbackDocId;
+  useChatVoiceInput(docId, editorRef);
 
-  const extensions = useChatKeymapExtensions({ event });
+  const keymapExtensions = useChatKeymapExtensions({ event });
+  const extensions = useMemo(() => [keymapExtensions, pendingText()], [keymapExtensions]);
 
   const handleSubmit = useCallback<NonNullable<ChatEditorProps['onSubmit']>>(
     (text) => {
@@ -160,14 +143,15 @@ export const ChatPrompt = ({
           <ChatActions
             classNames='col-span-2'
             microphone={true}
-            recording={recording}
+            docId={docId}
             processing={streaming}
             onEvent={handleEvent}
           >
             {online !== undefined && (
               <Input.Root>
                 <Input.Label srOnly>{t('online-switch.label')}</Input.Label>
-                <Input.Switch classNames='mx-1' checked={online} onCheckedChange={onOnlineChange} />
+                {/* Read-only: the provider is configured in Assistant settings, not toggled here. */}
+                <Input.Switch classNames='mx-1' checked={online} disabled />
               </Input.Root>
             )}
           </ChatActions>

package/src/components/ChatPrompt/useChatVoiceInput.ts

@@ -0,0 +1,103 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { useOptionalAtomCapabilityState } from '@dxos/app-framework/ui';
+import { TranscriptionCapabilities } from '@dxos/plugin-transcription/types';
+import { useTranslation } from '@dxos/react-ui';
+import { type ChatEditorController } from '@dxos/react-ui-chat';
+import { useAudioTrack, useTranscriber } from '@dxos/react-ui-transcription';
+import { type ContentBlock } from '@dxos/types';
+import { PendingTextStreamer, cancelPendingText, editorPendingTextSink, pendingTextState } from '@dxos/ui-editor';
+
+import { meta } from '#meta';
+
+// Recorder chunk interval; the transcriber's chunk threshold is derived from the buffering setting.
+const RECORDER_INTERVAL_MS = 200;
+
+/**
+ * Drives word-by-word streaming transcription into the chat editor via PendingTextStreamer.
+ * Reads the active RecordingSession and Settings capabilities; activates when the session id
+ * matches the given docId and the session is recording.
+ */
+export const useChatVoiceInput = (docId: string, editorRef: RefObject<ChatEditorController | null>): void => {
+  const { t } = useTranslation(meta.profile.key);
+  // Voice input is optional: tolerate the transcription plugin being absent (no session ⇒ inactive).
+  const [session] = useOptionalAtomCapabilityState(TranscriptionCapabilities.RecordingSession);
+  const [settings] = useOptionalAtomCapabilityState(TranscriptionCapabilities.Settings);
+
+  const active = !!session?.recording && session.id === docId;
+
+  const streamerRef = useRef<PendingTextStreamer | null>(null);
+
+  // Create/destroy the streamer when active transitions.
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+    const view = editorRef.current?.view;
+    if (!view) {
+      return;
+    }
+
+    const streamer = new PendingTextStreamer(editorPendingTextSink(view), {
+      mode: settings?.streamMode ?? 'word',
+      wordIntervalMs: settings?.wordIntervalMs ?? 80,
+    });
+    streamer.start({ anchor: view.state.selection.main.head, placeholder: t('recording.placeholder') });
+    streamerRef.current = streamer;
+
+    return () => {
+      streamer.dispose();
+      streamerRef.current = null;
+      // Drop the placeholder if nothing was transcribed; otherwise leave it for review.
+      const currentView = editorRef.current?.view;
+      if (currentView) {
+        const pending = currentView.state.field(pendingTextState, false);
+        if (pending && pending.final.length === 0) {
+          currentView.dispatch({ effects: cancelPendingText.of() });
+        }
+      }
+    };
+  }, [active, settings?.streamMode, settings?.wordIntervalMs]);
+
+  const handleSegments = useCallback(async (segments: ContentBlock.Transcript[]) => {
+    const text = segments
+      .map((segment) => segment.text)
+      .join(' ')
+      .trim();
+    if (text.length > 0) {
+      streamerRef.current?.push(text);
+    }
+  }, []);
+
+  // Derive the transcriber's chunk threshold from the configured initial buffering time.
+  const transcriberConfig = useMemo(
+    () => ({
+      transcribeAfterChunksAmount: Math.max(
+        1,
+        Math.round((settings?.transcribeAfterMs ?? 4000) / RECORDER_INTERVAL_MS),
+      ),
+    }),
+    [settings?.transcribeAfterMs],
+  );
+
+  // Stable identity: a fresh object would change useTranscriber's memo deps every render.
+  const recorderConfig = useMemo(() => ({ interval: RECORDER_INTERVAL_MS }), []);
+
+  const audioConstraints = useMemo<MediaTrackConstraints | undefined>(
+    () => (settings?.audioDeviceId ? { deviceId: { exact: settings.audioDeviceId } } : undefined),
+    [settings?.audioDeviceId],
+  );
+
+  const track = useAudioTrack(active, audioConstraints);
+
+  useTranscriber({
+    audioStreamTrack: track,
+    transcriberConfig,
+    recorderConfig,
+    onSegments: handleSegments,
+  });
+};

package/src/components/ChatThread/ChatThread.stories.tsx

@@ -9,7 +9,6 @@ import * as Layer from 'effect/Layer';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { createFeedServiceLayer } from '@dxos/client/echo';
 import { Database, Feed, Filter, Query } from '@dxos/echo';
 import { EffectEx } from '@dxos/effect';
 import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
@@ -28,11 +27,11 @@ import { ChatThread, type ChatThreadProps } from './ChatThread';
 
 random.seed(1);
 
-type MessageGenerator = Effect.Effect<void, never, Database.Service | Feed.ContextFeedService | Feed.FeedService>;
+type MessageGenerator = Effect.Effect<void, never, Database.Service | Feed.ContextFeedService>;
 
-type DefaultStoryProps = { generator?: MessageGenerator[]; delay?: number; wait?: boolean } & ChatThreadProps;
+type StoryArgs = { generator?: MessageGenerator[]; delay?: number; wait?: boolean } & ChatThreadProps;
 
-const DefaultStory = ({ generator = [], delay = 0, wait, ...props }: DefaultStoryProps) => {
+const DefaultStory = ({ generator = [], delay = 0, wait, ...props }: StoryArgs) => {
   const [space] = useSpaces();
   const feed = useMemo<Feed.Feed | undefined>(
     () => (space ? space.db.add(Feed.make({ name: 'chat' })) : undefined),
@@ -60,15 +59,7 @@ const DefaultStory = ({ generator = [], delay = 0, wait, ...props }: DefaultStor
         }
 
         setDone(true);
-      }).pipe(
-        Effect.provide(
-          Layer.mergeAll(
-            Database.layer(space.db),
-            Feed.ContextFeedService.layer(feed),
-            createFeedServiceLayer(space.db),
-          ),
-        ),
-      ),
+      }).pipe(Effect.provide(Layer.mergeAll(Database.layer(space.db), Feed.ContextFeedService.layer(feed)))),
     );
 
     return () => {
@@ -100,7 +91,7 @@ const meta = {
         StorybookPlugin({}),
         PreviewPlugin(),
         ClientPlugin({
-          types: [Organization.Organization, Person.Person],
+          types: [Feed.Feed, Message.Message, Organization.Organization, Person.Person],
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
               yield* initializeIdentity(client);
@@ -113,11 +104,11 @@ const meta = {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<DefaultStoryProps>;
+} satisfies Meta<StoryArgs>;
 
 export default meta;
 
-type Story = StoryObj<DefaultStoryProps>;
+type Story = StoryObj<StoryArgs>;
 
 export const Default: Story = {
   args: {

package/src/components/ChatThread/MarkdownStream.stories.tsx

@@ -54,7 +54,7 @@ const SAMPLE_TOOL_NAMES = [
   'get_project_rules',
   'list_mailboxes',
   'query_inbox',
-  'enable_blueprint',
+  'enable_skill',
   'create_schema',
   'create_project',
   'retry_operation',
@@ -70,7 +70,7 @@ const sampleCallAndResultBlocks = (toolCallId: string, index: number): ContentBl
   ];
 };
 
-type DefaultStoryProps = MarkdownStreamProps & {
+type StoryArgs = MarkdownStreamProps & {
   initialContent?: string;
   streamOptions?: TextStreamOptions;
   /**
@@ -87,7 +87,7 @@ const DefaultStory = ({
   debug: debugProp,
   seedToolWidgetsFromMarkdown = false,
   ...props
-}: DefaultStoryProps) => {
+}: StoryArgs) => {
   const [controller, setController] = useState<MarkdownStreamController | null>(null);
   const [streaming, setStreaming] = useState(false);
   const [debug, setDebug] = useState(debugProp);