@dxos/plugin-transcription 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-transcription",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.bcb3aa67d6",
   "description": "Voice transcription.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -11,23 +11,40 @@
   "license": "MIT",
   "author": "DXOS.org",
   "type": "module",
+  "imports": {
+    "#blueprints": "./src/blueprints/index.ts",
+    "#capabilities": "./src/capabilities/index.ts",
+    "#components": "./src/components/index.ts",
+    "#containers": "./src/containers/index.ts",
+    "#hooks": "./src/hooks/index.ts",
+    "#meta": "./src/meta.ts",
+    "#operations": "./src/operations/index.ts",
+    "#testing": "./src/testing/index.ts",
+    "#types": "./src/types/index.ts"
+  },
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs",
-      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts"
     },
     "./blueprints": {
+      "source": "./src/blueprints/index.ts",
       "browser": "./dist/lib/browser/blueprints/index.mjs",
       "node": "./dist/lib/node-esm/blueprints/index.mjs",
-      "source": "./src/blueprints/index.ts",
       "types": "./dist/types/src/blueprints/index.d.ts"
     },
+    "./operations": {
+      "source": "./src/operations/index.ts",
+      "browser": "./dist/lib/browser/operations/index.mjs",
+      "node": "./dist/lib/node-esm/operations/index.mjs",
+      "types": "./dist/types/src/operations/index.d.ts"
+    },
     "./types": {
+      "source": "./src/types/index.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": "./dist/lib/node-esm/types/index.mjs",
-      "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts"
     }
   },
@@ -37,6 +54,9 @@
       "blueprints": [
         "dist/types/src/blueprints/index.d.ts"
       ],
+      "operations": [
+        "dist/types/src/operations/index.d.ts"
+      ],
       "types": [
         "dist/types/src/types/index.d.ts"
       ]
@@ -49,83 +69,84 @@
   "dependencies": {
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "extendable-media-recorder": "^9.2.19",
     "extendable-media-recorder-wav-encoder": "^7.0.123",
     "main-thread-scheduling": "^14.1.1",
     "react-resize-detector": "^11.0.1",
-    "react-router-dom": "^6.4.0",
+    "react-router-dom": "^6.30.3",
     "react-use": "^17.5.1",
     "wavefile": "^11.0.0",
-    "@dxos/ai": "0.8.4-main.bc674ce",
-    "@dxos/app-framework": "0.8.4-main.bc674ce",
-    "@dxos/async": "0.8.4-main.bc674ce",
-    "@dxos/assistant": "0.8.4-main.bc674ce",
-    "@dxos/blueprints": "0.8.4-main.bc674ce",
-    "@dxos/client": "0.8.4-main.bc674ce",
-    "@dxos/codec-protobuf": "0.8.4-main.bc674ce",
-    "@dxos/context": "0.8.4-main.bc674ce",
-    "@dxos/display-name": "0.8.4-main.bc674ce",
-    "@dxos/debug": "0.8.4-main.bc674ce",
-    "@dxos/echo": "0.8.4-main.bc674ce",
-    "@dxos/functions": "0.8.4-main.bc674ce",
-    "@dxos/echo-db": "0.8.4-main.bc674ce",
-    "@dxos/functions-runtime": "0.8.4-main.bc674ce",
-    "@dxos/keys": "0.8.4-main.bc674ce",
-    "@dxos/log": "0.8.4-main.bc674ce",
-    "@dxos/invariant": "0.8.4-main.bc674ce",
-    "@dxos/operation": "0.8.4-main.bc674ce",
-    "@dxos/plugin-client": "0.8.4-main.bc674ce",
-    "@dxos/plugin-deck": "0.8.4-main.bc674ce",
-    "@dxos/plugin-graph": "0.8.4-main.bc674ce",
-    "@dxos/plugin-markdown": "0.8.4-main.bc674ce",
-    "@dxos/plugin-thread": "0.8.4-main.bc674ce",
-    "@dxos/protocols": "0.8.4-main.bc674ce",
-    "@dxos/react-client": "0.8.4-main.bc674ce",
-    "@dxos/react-edge-client": "0.8.4-main.bc674ce",
-    "@dxos/plugin-space": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-attention": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-components": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-editor": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-form": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-mosaic": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-sfx": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-grid": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-stack": "0.8.4-main.bc674ce",
-    "@dxos/schema": "0.8.4-main.bc674ce",
-    "@dxos/types": "0.8.4-main.bc674ce",
-    "@dxos/ui-editor": "0.8.4-main.bc674ce",
-    "@dxos/tracing": "0.8.4-main.bc674ce",
-    "@dxos/util": "0.8.4-main.bc674ce"
+    "@dxos/ai": "0.8.4-main.bcb3aa67d6",
+    "@dxos/app-toolkit": "0.8.4-main.bcb3aa67d6",
+    "@dxos/app-framework": "0.8.4-main.bcb3aa67d6",
+    "@dxos/blueprints": "0.8.4-main.bcb3aa67d6",
+    "@dxos/assistant": "0.8.4-main.bcb3aa67d6",
+    "@dxos/codec-protobuf": "0.8.4-main.bcb3aa67d6",
+    "@dxos/client": "0.8.4-main.bcb3aa67d6",
+    "@dxos/async": "0.8.4-main.bcb3aa67d6",
+    "@dxos/context": "0.8.4-main.bcb3aa67d6",
+    "@dxos/debug": "0.8.4-main.bcb3aa67d6",
+    "@dxos/display-name": "0.8.4-main.bcb3aa67d6",
+    "@dxos/echo-db": "0.8.4-main.bcb3aa67d6",
+    "@dxos/functions": "0.8.4-main.bcb3aa67d6",
+    "@dxos/echo": "0.8.4-main.bcb3aa67d6",
+    "@dxos/functions-runtime": "0.8.4-main.bcb3aa67d6",
+    "@dxos/keys": "0.8.4-main.bcb3aa67d6",
+    "@dxos/log": "0.8.4-main.bcb3aa67d6",
+    "@dxos/invariant": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-client": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-graph": "0.8.4-main.bcb3aa67d6",
+    "@dxos/operation": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-deck": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-markdown": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-space": "0.8.4-main.bcb3aa67d6",
+    "@dxos/protocols": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-thread": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-edge-client": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-client": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-attention": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-components": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-editor": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-form": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-mosaic": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-sfx": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-grid": "0.8.4-main.bcb3aa67d6",
+    "@dxos/schema": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-stack": "0.8.4-main.bcb3aa67d6",
+    "@dxos/tracing": "0.8.4-main.bcb3aa67d6",
+    "@dxos/types": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-editor": "0.8.4-main.bcb3aa67d6",
+    "@dxos/util": "0.8.4-main.bcb3aa67d6"
   },
   "devDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
     "@types/dom-speech-recognition": "^0.0.6",
     "@types/react": "~19.2.7",
-    "effect": "3.19.11",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "tailwindcss": "~3.4.1",
-    "@dxos/plugin-preview": "0.8.4-main.bc674ce",
-    "@dxos/plugin-testing": "0.8.4-main.bc674ce",
-    "@dxos/plugin-theme": "0.8.4-main.bc674ce",
-    "@dxos/random": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-form": "0.8.4-main.bc674ce",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/storybook-utils": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce",
-    "@dxos/test-utils": "0.8.4-main.bc674ce"
+    "tailwindcss": "^4.2.0",
+    "@dxos/plugin-preview": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-testing": "0.8.4-main.bcb3aa67d6",
+    "@dxos/random": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-theme": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-form": "0.8.4-main.bcb3aa67d6",
+    "@dxos/storybook-utils": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/test-utils": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6"
   },
   "peerDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
-    "effect": "3.19.11",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6"
   },
   "publishConfig": {
     "access": "public"

package/src/TranscriptionPlugin.tsx

@@ -2,24 +2,28 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Common, Plugin } from '@dxos/app-framework';
-import { Obj } from '@dxos/echo';
+import * as Option from 'effect/Option';
+
+import { Plugin } from '@dxos/app-framework';
+import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
+import { Annotation, Obj } from '@dxos/echo';
 import { getSpace } from '@dxos/react-client/echo';
 import { Message, Transcript } from '@dxos/types';
 
-import { BlueprintDefinition, OperationResolver, ReactSurface, Transcriber } from './capabilities';
-import { meta } from './meta';
+import { meta } from '#meta';
 import { translations } from './translations';
 import { renderByline } from './util';
 
+import { BlueprintDefinition, OperationHandler, ReactSurface, Transcriber } from '#capabilities';
+
 export const TranscriptionPlugin = Plugin.define(meta).pipe(
-  Common.Plugin.addTranslationsModule({ translations }),
-  Common.Plugin.addMetadataModule({
+  AppPlugin.addBlueprintDefinitionModule({ activate: BlueprintDefinition }),
+  AppPlugin.addMetadataModule({
     metadata: {
       id: Transcript.Transcript.typename,
       metadata: {
-        icon: 'ph--subtitles--regular',
-        iconHue: 'sky',
+        icon: Annotation.IconAnnotation.get(Transcript.Transcript).pipe(Option.getOrThrow).icon,
+        iconHue: Annotation.IconAnnotation.get(Transcript.Transcript).pipe(Option.getOrThrow).hue ?? 'white',
         // TODO(wittjosiah): Factor out. Artifact? Separate capability?
         getTextContent: async (transcript: Transcript.Transcript) => {
           const space = getSpace(transcript);
@@ -35,14 +39,14 @@ export const TranscriptionPlugin = Plugin.define(meta).pipe(
       },
     },
   }),
-  Common.Plugin.addSchemaModule({ schema: [Transcript.Transcript] }),
-  Common.Plugin.addSurfaceModule({ activate: ReactSurface }),
-  Common.Plugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addSchemaModule({ schema: [Transcript.Transcript] }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
   Plugin.addModule({
     id: 'transcription',
-    activatesOn: Common.ActivationEvent.SetupAppGraph,
+    activatesOn: AppActivationEvents.SetupAppGraph,
     activate: Transcriber,
   }),
-  Common.Plugin.addBlueprintDefinitionModule({ activate: BlueprintDefinition }),
   Plugin.make,
 );

package/src/blueprints/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * as TranscriptionBlueprint from './transcription-blueprint';
+export { default as TranscriptionBlueprint } from './transcription-blueprint';

package/src/blueprints/transcription-blueprint.ts

@@ -2,24 +2,29 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type AppCapabilities } from '@dxos/app-toolkit';
 import { Blueprint, Template } from '@dxos/blueprints';
-import { type FunctionDefinition } from '@dxos/functions';
 import { trim } from '@dxos/util';
 
-import { open, summarize } from '../functions';
+import { TranscriptOperation } from '#operations';
 
-export const functions: FunctionDefinition[] = [open, summarize];
+const BLUEPRINT_KEY = 'org.dxos.blueprint.transcription';
 
-export const Key = 'dxos.org/blueprint/transcription';
-
-export const make = () =>
+const make = () =>
   Blueprint.make({
-    key: Key,
+    key: BLUEPRINT_KEY,
     name: 'Transcription',
-    tools: Blueprint.toolDefinitions({ functions }),
+    tools: Blueprint.toolDefinitions({ operations: [TranscriptOperation.Open, TranscriptOperation.Summarize] }),
     instructions: Template.make({
       source: trim`
         You can open and summarize a meeting transcript.
       `,
     }),
   });
+
+const blueprint: AppCapabilities.BlueprintDefinition = {
+  key: BLUEPRINT_KEY,
+  make,
+};
+
+export default blueprint;

package/src/capabilities/blueprint-definition.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+
+import { TranscriptionBlueprint } from '#blueprints';
+
+const blueprintDefinition = Capability.makeModule<
+  [],
+  Capability.Capability<typeof AppCapabilities.BlueprintDefinition>[]
+>(() => Effect.succeed([Capability.contributes(AppCapabilities.BlueprintDefinition, TranscriptionBlueprint)]));
+
+export default blueprintDefinition;

package/src/capabilities/index.ts

@@ -2,7 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './blueprint-definition';
-export * from './operation-resolver';
-export * from './react-surface';
-export * from './transcriber';
+import { Capability } from '@dxos/app-framework';
+import { OperationHandlerSet } from '@dxos/operation';
+
+export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
+export const Transcriber = Capability.lazy('Transcriber', () => import('./transcriber'));

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/operation';
+
+import { TranscriptionOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, TranscriptionOperationHandlerSet);
+  }),
+);

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+import { Obj } from '@dxos/echo';
+import { Transcript } from '@dxos/types';
+
+import { TranscriptionContainer } from '#containers';
+import { meta } from '#meta';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: `${meta.id}.article.transcript`,
+        role: ['article', 'section'],
+        filter: (data): data is { attendableId: string; subject: Transcript.Transcript } =>
+          typeof data.attendableId === 'string' && Obj.instanceOf(Transcript.Transcript, data.subject),
+        component: ({ data, role }) => (
+          <TranscriptionContainer role={role} subject={data.subject} attendableId={data.attendableId} />
+        ),
+      }),
+    ]),
+  ),
+);

package/src/capabilities/{transcriber/transcriber.ts → transcriber.ts}

@@ -4,11 +4,11 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
-import { ClientCapabilities } from '@dxos/plugin-client';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { ClientCapabilities } from '@dxos/plugin-client/types';
 
-import { MediaStreamRecorder, Transcriber, TranscriptionManager } from '../../transcriber';
-import { TranscriptionCapabilities } from '../../types';
+import { MediaStreamRecorder, Transcriber, TranscriptionManager } from '../transcriber';
+import { TranscriptionCapabilities } from '#types';
 
 // TODO(burdon): Move to config?
 
@@ -35,7 +35,7 @@ export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     // Get context for lazy capability access in callbacks.
     const capabilities = yield* Capability.Service;
-    const registry = yield* Capability.get(Common.Capability.AtomRegistry);
+    const registry = yield* Capability.get(Capabilities.AtomRegistry);
 
     const getTranscriber: TranscriptionCapabilities.GetTranscriber = ({
       audioStreamTrack,
@@ -64,7 +64,7 @@ export default Capability.makeModule(
     const getTranscriptionManager: TranscriptionCapabilities.GetTranscriptionManager = ({ messageEnricher }) => {
       const client = capabilities.get(ClientCapabilities.Client);
       const transcriptionManager = new TranscriptionManager({
-        edgeClient: client.edge,
+        edgeClient: client.edge.http,
         messageEnricher,
         registry,
       });

package/src/components/{Transcript/Transcript.stories.tsx → Transcription/Transcription.stories.tsx}

@@ -10,28 +10,29 @@ import React, { type FC, useEffect, useMemo, useState } from 'react';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Key } from '@dxos/echo';
 import { ClientPlugin } from '@dxos/plugin-client';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { PreviewPlugin } from '@dxos/plugin-preview';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
 import { useMembers, useSpace } from '@dxos/react-client/echo';
 import { IconButton, Toolbar } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout } from '@dxos/react-ui/testing';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { TestSchema } from '@dxos/schema/testing';
 import { type ContentBlock, type Message, Organization, Person } from '@dxos/types';
 
-import { useQueueModelAdapter } from '../../hooks';
+import { useQueueModelAdapter } from '#hooks';
 import { SerializationModel } from '../../model';
 import {
   MessageBuilder,
   TestItem,
   useTestTranscriptionQueue,
   useTestTranscriptionQueueWithEntityExtraction,
-} from '../../testing';
+} from '#testing';
 import { translations } from '../../translations';
 import { renderByline } from '../../util';
 
-import { TranscriptView, type TranscriptViewProps } from './Transcript';
+import { Transcription, type TranscriptionProps } from './Transcription';
 
 faker.seed(1);
 
@@ -39,7 +40,7 @@ faker.seed(1);
  * Story wrapper with test controls.
  */
 const TranscriptContainer: FC<
-  TranscriptViewProps & {
+  TranscriptionProps & {
     running: boolean;
     onRunningChange: (running: boolean) => void;
     onReset?: () => void;
@@ -47,7 +48,7 @@ const TranscriptContainer: FC<
 > = ({ model, running, onRunningChange, onReset }) => {
   return (
     <div className='grid grid-rows-[1fr_40px] grow divide-y divide-separator'>
-      <TranscriptView model={model} />
+      <Transcription model={model} />
       <div className='grid grid-cols-[1fr_16rem] overflow-hidden'>
         <div className='flex items-center'>
           <SyntaxHighlighter language='json' className='text-sm'>
@@ -67,12 +68,15 @@ const TranscriptContainer: FC<
   );
 };
 
-type StoryProps = { messages?: Message.Message[] } & Pick<TranscriptViewProps, 'ignoreAttention' | 'attendableId'>;
+type DefaultStoryProps = { messages?: Message.Message[] } & Pick<
+  TranscriptionProps,
+  'ignoreAttention' | 'attendableId'
+>;
 
 /**
  * Basic story mutates array of messages.
  */
-const BasicStory = ({ messages: initialMessages = [], ...props }: StoryProps) => {
+const BasicStory = ({ messages: initialMessages = [], ...props }: DefaultStoryProps) => {
   const [reset, setReset] = useState({});
   const builder = useMemo(() => new MessageBuilder(), []);
   const model = useMemo(
@@ -134,7 +138,7 @@ const QueueStory = ({
   queueId,
   onReset,
   ...props
-}: StoryProps & { queueId: Key.ObjectId; onReset: () => void }) => {
+}: DefaultStoryProps & { queueId: Key.ObjectId; onReset: () => void }) => {
   const [running, setRunning] = useState(true);
   const space = useSpace();
   const members = useMembers(space?.id).map((member) => member.identity);
@@ -171,9 +175,9 @@ const QueueStoryWrapper = () => {
 };
 
 const meta = {
-  title: 'plugins/plugin-transcription/Transcript',
+  title: 'plugins/plugin-transcription/components/Transcription',
   decorators: [
-    withTheme,
+    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [
         ...corePlugins(),
@@ -182,7 +186,7 @@ const meta = {
           types: [TestItem, TestSchema.DocumentType, Person.Person, Organization.Organization],
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
-              yield* Effect.promise(() => client.halo.createIdentity());
+              yield* initializeIdentity(client);
             }),
         }),
 
@@ -198,8 +202,7 @@ const meta = {
 
 export default meta;
 
-// TODO(wittjosiah): ECHO objects don't work when passed via Storybook args.
-const DefaultStory = (props: StoryProps) => {
+const DefaultStory = (props: DefaultStoryProps) => {
   const [messages, setMessages] = useState<Message.Message[]>([]);
   useEffect(() => {
     void Promise.all(Array.from({ length: 10 }, () => MessageBuilder.singleton.createMessage())).then(setMessages);

package/src/components/Transcription/Transcription.tsx

@@ -0,0 +1,65 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { useThemeContext } from '@dxos/react-ui';
+import { useTextEditor } from '@dxos/react-ui-editor';
+import { type Message, type Transcript } from '@dxos/types';
+import {
+  autoScroll,
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+  documentSlots,
+  preview,
+} from '@dxos/ui-editor';
+import { composable, composableProps } from '@dxos/ui-theme';
+import { isTruthy } from '@dxos/util';
+
+import { type SerializationModel } from '../../model';
+import { renderByline } from '../../util';
+
+import { transcription } from './transcription-extension';
+
+export { renderByline };
+
+export type TranscriptionProps = {
+  transcript?: Transcript.Transcript;
+  model: SerializationModel<Message.Message>;
+  // TODO(burdon): Are these still in use?
+  attendableId?: string;
+  ignoreAttention?: boolean;
+};
+
+/**
+ * Transcript component implemented using the editor.
+ */
+export const Transcription = composable<HTMLDivElement, TranscriptionProps>(
+  ({ transcript: object, model, children, ...props }, forwardedRef) => {
+    const { themeMode } = useThemeContext();
+    const { parentRef } = useTextEditor(() => {
+      return {
+        extensions: [
+          createBasicExtensions({ readOnly: true, lineWrapping: true, search: true }),
+          createMarkdownExtensions(),
+          createThemeExtensions({ themeMode, slots: documentSlots }),
+          decorateMarkdown(),
+          preview(),
+          transcription({ model, started: object?.started ? new Date(object.started) : undefined }),
+          autoScroll(),
+        ].filter(isTruthy),
+      };
+    }, [model]);
+
+    return (
+      <div
+        {...composableProps(props, { classNames: 'dx-container' })}
+        ref={parentRef}
+        data-popover-collision-boundary={true /* TODO(thure): Make this a constant and document it. */}
+      />
+    );
+  },
+);

package/src/components/{Transcript → Transcription}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './Transcript';
+export * from './Transcription';

package/src/components/{Transcript/transcript-extension.ts → Transcription/transcription-extension.ts}

@@ -15,7 +15,7 @@ import { DocumentAdapter, type SerializationModel } from '../../model';
 /**
  * Data structure that maps Chunks queue to lines with transcript state.
  */
-export type TranscriptOptions = {
+export type TranscriptionOptions = {
   model: SerializationModel<Message.Message>;
   started?: Date;
 };
@@ -23,7 +23,7 @@ export type TranscriptOptions = {
 /**
  * Scrolling transcript with timestamps.
  */
-export const transcript = ({ model, started }: TranscriptOptions): Extension => {
+export const transcription = ({ model, started }: TranscriptionOptions): Extension => {
   return [
     // Show timestamps in the gutter.
     gutter({
@@ -132,7 +132,7 @@ export const transcript = ({ model, started }: TranscriptOptions): Extension =>
 
     EditorView.theme({
       '.cm-gutters': {
-        backgroundColor: 'var(--dx-baseSurface)',
+        backgroundColor: 'var(--color-base-surface)',
       },
       '.cm-timestamp-gutter': {
         width: '6rem',
@@ -166,7 +166,7 @@ class TimestampMarker extends GutterMarker {
 
   override toDOM(view: EditorView) {
     const el = document.createElement('div');
-    el.className = 'text-sm text-subdued hover:bg-hoverSurface cursor-pointer';
+    el.className = 'text-sm text-subdued hover:bg-hover-surface cursor-pointer';
     el.textContent = formatTimestamp(this._timestamp, this._started);
     // TODO(burdon): Click to bookmark or copy hyperlink.
     el.onclick = () => {