@dxos/plugin-thread 0.8.4-main.4a85c3132b → 0.8.4-main.4f23b4e393

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-thread",
-  "version": "0.8.4-main.4a85c3132b",
+  "version": "0.8.4-main.4f23b4e393",
   "description": "DXOS Threads Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,37 +12,85 @@
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#blueprints": {
+      "source": "./src/blueprints/index.ts",
+      "types": "./dist/types/src/blueprints/index.d.ts",
+      "default": "./dist/lib/neutral/blueprints/index.mjs"
+    },
+    "#capabilities": {
+      "source": "./src/capabilities/index.ts",
+      "types": "./dist/types/src/capabilities/index.d.ts",
+      "default": "./dist/lib/neutral/capabilities/index.mjs"
+    },
+    "#components": {
+      "source": "./src/components/index.ts",
+      "types": "./dist/types/src/components/index.d.ts",
+      "default": "./dist/lib/neutral/components/index.mjs"
+    },
+    "#containers": {
+      "source": "./src/containers/index.ts",
+      "types": "./dist/types/src/containers/index.d.ts",
+      "default": "./dist/lib/neutral/containers/index.mjs"
+    },
+    "#hooks": {
+      "source": "./src/hooks/index.ts",
+      "types": "./dist/types/src/hooks/index.d.ts",
+      "default": "./dist/lib/neutral/hooks/index.mjs"
+    },
+    "#meta": {
+      "source": "./src/meta.ts",
+      "types": "./dist/types/src/meta.d.ts",
+      "default": "./dist/lib/neutral/meta.mjs"
+    },
+    "#operations": {
+      "source": "./src/operations/index.ts",
+      "types": "./dist/types/src/operations/index.d.ts",
+      "default": "./dist/lib/neutral/operations/index.mjs"
+    },
+    "#plugin": {
+      "source": {
+        "node": "./src/ThreadPlugin.node.ts",
+        "default": "./src/ThreadPlugin.tsx"
+      },
+      "types": "./dist/types/src/ThreadPlugin.d.ts",
+      "node": "./dist/lib/neutral/ThreadPlugin.node.mjs",
+      "default": "./dist/lib/neutral/ThreadPlugin.mjs"
+    },
+    "#testing": {
+      "source": "./src/testing/index.ts",
+      "types": "./dist/types/src/testing/index.d.ts",
+      "default": "./dist/lib/neutral/testing/index.mjs"
+    },
+    "#translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
+    },
+    "#types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "default": "./dist/lib/neutral/types/index.mjs"
+    }
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs",
-      "types": "./dist/types/src/index.d.ts"
+      "types": "./dist/types/src/index.d.ts",
+      "default": "./dist/lib/neutral/index.mjs"
     },
-    "./blueprints": {
-      "source": "./src/blueprints/index.ts",
-      "browser": "./dist/lib/browser/blueprints/index.mjs",
-      "node": "./dist/lib/node-esm/blueprints/index.mjs",
-      "types": "./dist/types/src/blueprints/index.d.ts"
+    "./plugin": {
+      "source": "./src/plugin.ts",
+      "types": "./dist/types/src/plugin.d.ts",
+      "default": "./dist/lib/neutral/plugin.mjs"
     },
-    "./types": {
-      "source": "./src/types/index.ts",
-      "browser": "./dist/lib/browser/types/index.mjs",
-      "node": "./dist/lib/node-esm/types/index.mjs",
-      "types": "./dist/types/src/types/index.d.ts"
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "blueprints": [
-        "dist/types/src/blueprints/index.d.ts"
-      ],
-      "types": [
-        "dist/types/src/types/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -50,89 +98,86 @@
   "dependencies": {
     "@codemirror/language": "^6.11.3",
     "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.4",
+    "@codemirror/view": "^6.38.5",
     "@effect-atom/atom": "^0.5.1",
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/ai": "0.33.2",
     "@effect/experimental": "0.58.0",
     "@peermetrics/webrtc-stats": "5.7.1",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "extendable-media-recorder": "^9.2.19",
     "extendable-media-recorder-wav-encoder": "^7.0.123",
     "md5-hex": "5.0.0",
     "react-resize-detector": "^11.0.1",
     "wavefile": "^11.0.0",
-    "@dxos/app-framework": "0.8.4-main.4a85c3132b",
-    "@dxos/app-toolkit": "0.8.4-main.4a85c3132b",
-    "@dxos/assistant": "0.8.4-main.4a85c3132b",
-    "@dxos/blueprints": "0.8.4-main.4a85c3132b",
-    "@dxos/async": "0.8.4-main.4a85c3132b",
-    "@dxos/context": "0.8.4-main.4a85c3132b",
-    "@dxos/debug": "0.8.4-main.4a85c3132b",
-    "@dxos/devtools": "0.8.4-main.4a85c3132b",
-    "@dxos/codec-protobuf": "0.8.4-main.4a85c3132b",
-    "@dxos/echo": "0.8.4-main.4a85c3132b",
-    "@dxos/display-name": "0.8.4-main.4a85c3132b",
-    "@dxos/echo-db": "0.8.4-main.4a85c3132b",
-    "@dxos/echo-react": "0.8.4-main.4a85c3132b",
-    "@dxos/invariant": "0.8.4-main.4a85c3132b",
-    "@dxos/effect": "0.8.4-main.4a85c3132b",
-    "@dxos/keys": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-attention": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-client": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-deck": "0.8.4-main.4a85c3132b",
-    "@dxos/operation": "0.8.4-main.4a85c3132b",
-    "@dxos/log": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-graph": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-markdown": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-observability": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-settings": "0.8.4-main.4a85c3132b",
-    "@dxos/functions": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-space": "0.8.4-main.4a85c3132b",
-    "@dxos/protocols": "0.8.4-main.4a85c3132b",
-    "@dxos/react-client": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-attention": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-dnd": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-editor": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-menu": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-form": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-mosaic": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-sfx": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-thread": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-tabs": "0.8.4-main.4a85c3132b",
-    "@dxos/schema": "0.8.4-main.4a85c3132b",
-    "@dxos/types": "0.8.4-main.4a85c3132b",
-    "@dxos/util": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-stack": "0.8.4-main.4a85c3132b",
-    "@dxos/ui-editor": "0.8.4-main.4a85c3132b"
+    "@dxos/app-framework": "0.8.4-main.4f23b4e393",
+    "@dxos/app-toolkit": "0.8.4-main.4f23b4e393",
+    "@dxos/assistant": "0.8.4-main.4f23b4e393",
+    "@dxos/client-protocol": "0.8.4-main.4f23b4e393",
+    "@dxos/async": "0.8.4-main.4f23b4e393",
+    "@dxos/context": "0.8.4-main.4f23b4e393",
+    "@dxos/compute": "0.8.4-main.4f23b4e393",
+    "@dxos/debug": "0.8.4-main.4f23b4e393",
+    "@dxos/devtools": "0.8.4-main.4f23b4e393",
+    "@dxos/display-name": "0.8.4-main.4f23b4e393",
+    "@dxos/echo": "0.8.4-main.4f23b4e393",
+    "@dxos/echo-db": "0.8.4-main.4f23b4e393",
+    "@dxos/echo-react": "0.8.4-main.4f23b4e393",
+    "@dxos/invariant": "0.8.4-main.4f23b4e393",
+    "@dxos/keys": "0.8.4-main.4f23b4e393",
+    "@dxos/effect": "0.8.4-main.4f23b4e393",
+    "@dxos/operation": "0.8.4-main.4f23b4e393",
+    "@dxos/log": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-attention": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-deck": "0.8.4-main.4f23b4e393",
+    "@dxos/codec-protobuf": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-client": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-graph": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-markdown": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-observability": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-space": "0.8.4-main.4f23b4e393",
+    "@dxos/protocols": "0.8.4-main.4f23b4e393",
+    "@dxos/react-client": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-dnd": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-attention": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-settings": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-form": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-editor": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-menu": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-sfx": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-mosaic": "0.8.4-main.4f23b4e393",
+    "@dxos/random": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-stack": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-tabs": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-thread": "0.8.4-main.4f23b4e393",
+    "@dxos/schema": "0.8.4-main.4f23b4e393",
+    "@dxos/types": "0.8.4-main.4f23b4e393",
+    "@dxos/ui-editor": "0.8.4-main.4f23b4e393",
+    "@dxos/util": "0.8.4-main.4f23b4e393"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/platform": "0.94.4",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/plugin-testing": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-theme": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
-    "@dxos/random": "0.8.4-main.4a85c3132b",
-    "@dxos/storybook-utils": "0.8.4-main.4a85c3132b",
-    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
+    "vite": "^8.0.10",
+    "@dxos/plugin-testing": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-theme": "0.8.4-main.4f23b4e393",
+    "@dxos/storybook-utils": "0.8.4-main.4f23b4e393",
+    "@dxos/ui-theme": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui": "0.8.4-main.4f23b4e393"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/platform": "0.94.4",
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
-    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@dxos/react-ui": "0.8.4-main.4f23b4e393",
+    "@dxos/ui-theme": "0.8.4-main.4f23b4e393"
   }
 }

package/src/ThreadPlugin.node.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability, Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+import { SpaceCapabilities, SpaceEvents } from '@dxos/plugin-space';
+import { AnchoredTo, Channel, Message, Thread } from '@dxos/types';
+
+import { AppGraphBuilder, BlueprintDefinition, CreateObject, OperationHandler, UndoMappings } from '#capabilities';
+import { meta } from '#meta';
+import { ThreadOperation } from '#types';
+
+export const ThreadPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addBlueprintDefinitionModule({ activate: BlueprintDefinition }),
+  AppPlugin.addCreateObjectModule({ activate: CreateObject }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addUndoMappingsModule({ activate: UndoMappings }),
+  AppPlugin.addSchemaModule({
+    schema: [AnchoredTo.AnchoredTo, Channel.Channel, Message.Message, Thread.Thread],
+  }),
+  Plugin.addModule({
+    id: 'on-space-created',
+    activatesOn: SpaceEvents.SpaceCreated,
+    activate: () =>
+      Effect.succeed(
+        Capability.contributes(SpaceCapabilities.OnCreateSpace, (params) =>
+          Operation.invoke(ThreadOperation.OnCreateSpace, params),
+        ),
+      ),
+  }),
+  Plugin.make,
+);
+
+export default ThreadPlugin;

package/src/ThreadPlugin.test.ts

@@ -0,0 +1,37 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { AppActivationEvents } from '@dxos/app-toolkit';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { createComposerTestApp } from '@dxos/plugin-testing/harness';
+
+import { ThreadPlugin } from '#plugin';
+
+import { meta } from './meta';
+
+const moduleId = (name: string) => `${meta.id}.module.${name}`;
+
+describe('ThreadPlugin', () => {
+  test('modules activate on the expected events', async ({ expect }) => {
+    await using harness = await createComposerTestApp({
+      plugins: [ClientPlugin({}), ThreadPlugin()],
+    });
+
+    // After autoStart: AppGraphBuilder, CreateObject, schema, OperationHandler, UndoMappings all auto-cascade.
+    expect(harness.manager.getActive()).toEqual(
+      expect.arrayContaining([moduleId('AppGraphBuilder'), moduleId('CreateObject'), moduleId('schema')]),
+    );
+
+    // SetupArtifactDefinition is fired by AssistantPlugin, which can't be included here due to a workspace cycle.
+    await harness.fire(AppActivationEvents.SetupArtifactDefinition);
+    expect(harness.manager.getActive()).toContain(moduleId('BlueprintDefinition'));
+
+    // Operation handlers auto-cascade from OperationPlugin.
+    expect(harness.manager.getActive()).toEqual(
+      expect.arrayContaining([moduleId('OperationHandler'), moduleId('UndoMappings')]),
+    );
+  });
+});

package/src/ThreadPlugin.tsx

@@ -6,73 +6,41 @@ import * as Effect from 'effect/Effect';
 
 import { Capability, Plugin } from '@dxos/app-framework';
 import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
-import { Ref, Type } from '@dxos/echo';
-import { Operation } from '@dxos/operation';
+import { Operation } from '@dxos/compute';
 import { ClientEvents } from '@dxos/plugin-client';
 import { MarkdownEvents } from '@dxos/plugin-markdown';
 import { SpaceCapabilities, SpaceEvents } from '@dxos/plugin-space';
-import { type CreateObject } from '@dxos/plugin-space/types';
-import { translations as threadTranslations } from '@dxos/react-ui-thread';
-import { AnchoredTo, Message, Thread } from '@dxos/types';
+import { translations as threadTranslations } from '@dxos/react-ui-thread/translations';
+import { AnchoredTo, Channel, Message, Thread } from '@dxos/types';
 
 import {
   AppGraphBuilder,
   BlueprintDefinition,
   CallManager,
+  CreateObject,
   Markdown,
-  OperationResolver,
+  OperationHandler,
+  UndoMappings,
   ReactRoot,
   ReactSurface,
-  Repair,
   ThreadState,
-} from './capabilities';
-import { THREAD_ITEM, meta } from './meta';
-import { translations } from './translations';
-import { Channel, ThreadOperation } from './types';
+} from '#capabilities';
+import { meta } from '#meta';
+import { translations } from '#translations';
+import { ThreadOperation } from '#types';
 
 // TODO(Zan): Every instance of `cursor` should be replaced with `anchor`.
 //  NOTE(burdon): Review/discuss CursorConverter semantics.
 
 // TODO(wittjosiah): Rename to ChatPlugin.
 // TODO(wittjosiah): Enabling comments should likely be factored out of this plugin but depend on it's capabilities.
+
 export const ThreadPlugin = Plugin.define(meta).pipe(
   AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
   AppPlugin.addBlueprintDefinitionModule({ activate: BlueprintDefinition }),
-  AppPlugin.addMetadataModule({
-    metadata: [
-      {
-        id: Type.getTypename(Channel.Channel),
-        metadata: {
-          icon: 'ph--hash--regular',
-          iconHue: 'rose',
-          createObject: ((props) => Effect.sync(() => Channel.make(props))) satisfies CreateObject,
-        },
-      },
-      {
-        id: Type.getTypename(Thread.Thread),
-        metadata: {
-          // TODO(wittjosiah): Move out of metadata.
-          loadReferences: async (thread: Thread.Thread) => await Ref.Array.loadAll(thread.messages ?? []),
-        },
-      },
-      {
-        id: THREAD_ITEM,
-        metadata: {
-          parse: (item: Thread.Thread, type: string) => {
-            switch (type) {
-              case 'node':
-                return { id: item.id, label: item.name, data: item };
-              case 'object':
-                return item;
-              case 'view-object':
-                return { id: `${item.id}-view`, object: item };
-            }
-          },
-        },
-      },
-    ],
-  }),
-  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addCreateObjectModule({ activate: CreateObject }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addUndoMappingsModule({ activate: UndoMappings }),
   AppPlugin.addReactRootModule({ activate: ReactRoot }),
   AppPlugin.addSchemaModule({
     schema: [AnchoredTo.AnchoredTo, Channel.Channel, Message.Message, Thread.Thread],
@@ -108,11 +76,6 @@ export const ThreadPlugin = Plugin.define(meta).pipe(
         ),
       ),
   }),
-  Plugin.addModule({
-    id: 'repair',
-    activatesOn: ClientEvents.SpacesReady,
-    activate: Repair,
-  }),
   Plugin.addModule({
     id: 'markdown',
     activatesOn: MarkdownEvents.SetupExtensions,
@@ -120,3 +83,5 @@ export const ThreadPlugin = Plugin.define(meta).pipe(
   }),
   Plugin.make,
 );
+
+export default ThreadPlugin;

package/src/blueprints/thread-blueprint.ts

@@ -2,21 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type AppCapabilities } from '@dxos/app-toolkit';
-import { Blueprint, Template } from '@dxos/blueprints';
+import { Blueprint, Template } from '@dxos/compute';
 import { trim } from '@dxos/util';
 
-import { ThreadFunctions } from '../functions';
+import { ThreadOperation } from '#types';
 
-const BLUEPRINT_KEY = 'dxos.org/blueprint/thread';
-
-const functions = Object.values(ThreadFunctions);
+const BLUEPRINT_KEY = 'org.dxos.blueprint.thread';
 
 const make = () =>
   Blueprint.make({
     key: BLUEPRINT_KEY,
     name: 'Thread',
-    tools: Blueprint.toolDefinitions({ functions }),
+    tools: Blueprint.toolDefinitions({ operations: [ThreadOperation.CreateProposals] }),
     instructions: Template.make({
       // TODO(wittjosiah): Move example to function input schema annotation.
       source: trim`
@@ -31,9 +28,8 @@ const make = () =>
     }),
   });
 
-const blueprint: AppCapabilities.BlueprintDefinition = {
+const blueprint: Blueprint.Definition = {
   key: BLUEPRINT_KEY,
-  functions,
   make,
 };
 

package/src/calls/util/calls-service.ts

@@ -14,7 +14,6 @@ import {
   type TrackObject,
   type TracksResponse,
 } from '../types';
-
 import { HistoryCache } from './history-cache';
 import { BulkRequestDispatcher, FIFOScheduler } from './task-scheduling';
 
@@ -548,7 +547,9 @@ const waitForTransceiverToSendData = async (ctx: Context, transceiver: RTCRtpTra
   ctx.onDispose(() => waitForData.throw(new Error('Transceiver was closed')));
 
   const checkStats = async () => {
-    if (ctx.disposed) return;
+    if (ctx.disposed) {
+      return;
+    }
 
     try {
       const stats = await transceiver.sender.getStats();

package/src/calls/util/stub-media-streams.ts

@@ -74,7 +74,9 @@ export const createInaudibleAudioStreamTrack = async ({ ctx }: { ctx: Context })
 
   let oscillatorStarted = false;
   const ensureOscillatorStarted = () => {
-    if (oscillatorStarted) return;
+    if (oscillatorStarted) {
+      return;
+    }
     oscillator.start();
     oscillatorStarted = true;
   };

package/src/calls-service.stories.tsx

@@ -12,13 +12,14 @@ import { log } from '@dxos/log';
 import { Config, useConfig } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Button } from '@dxos/react-ui';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/react-ui/testing';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
 
 const testVideo = new URL('../testing/video.mp4', import.meta.url).href;
 
+import { useBlackCanvasStreamTrack, useInaudibleAudioStreamTrack, useVideoStreamTrack } from '#hooks';
+
 import { CALLS_URL, CallsServicePeer, type TrackObject } from './calls';
-import { useBlackCanvasStreamTrack, useInaudibleAudioStreamTrack, useVideoStreamTrack } from './hooks';
 
 // TODO(burdon): THIS IS TOO COMPLEX FOR A TEST SETUP.
 const pushAndPullTrack = (mediaStreamTrack?: MediaStreamTrack) => {
@@ -130,9 +131,9 @@ const pushAndPullTrack = (mediaStreamTrack?: MediaStreamTrack) => {
   };
 };
 
-type StoryProps = { source: string };
+type DefaultStoryProps = { source: string };
 
-const DefaultStory = ({ source }: StoryProps) => {
+const DefaultStory = ({ source }: DefaultStoryProps) => {
   const pushVideoElement = useRef<HTMLVideoElement>(null);
   const pullVideoElement = useRef<HTMLVideoElement>(null);
   // Get video stream track.
@@ -166,7 +167,7 @@ const DefaultStory = ({ source }: StoryProps) => {
           Re-pull video
         </Button>
       </div>
-      <Json data={metrics} />
+      <JsonHighlighter data={metrics} />
     </div>
   );
 };
@@ -208,7 +209,7 @@ export const InaudibleAudioStreamTrack = {
 
     return (
       <div className='flex flex-col gap-4 items-center'>
-        <Json data={metrics} />
+        <JsonHighlighter data={metrics} />
         <Button onClick={rePullTrack}>Re-pull audio</Button>
       </div>
     );
@@ -221,7 +222,7 @@ export const BlackVideoStreamTrack = {
     const { rePullTrack, metrics } = pushAndPullTrack(videoStreamTrack);
     return (
       <div className='flex flex-col gap-4 items-center'>
-        <Json data={metrics} />
+        <JsonHighlighter data={metrics} />
         <Button onClick={rePullTrack}>Re-pull audio</Button>
       </div>
     );