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

package/dist/lib/browser/index.mjs

@@ -1,109 +1,1203 @@
 import {
-  TranscriptContainer
-} from "./chunk-SYGEFDWO.mjs";
-import {
-  TranscriptView,
-  TranscriptionContainer,
-  useAudioFile,
-  useAudioTrack,
-  useQueueModelAdapter,
-  useTranscriber,
-  useVoiceInput
-} from "./chunk-ICM7JRCO.mjs";
-import {
-  MediaStreamRecorder,
-  Transcriber,
-  TranscriptionManager
-} from "./chunk-TKFU53OZ.mjs";
+  TranscriptionCapabilities
+} from "./chunk-YXU2ZO6W.mjs";
 import {
+  mergeFloat64Arrays,
   renderByline
 } from "./chunk-HOOPZ7EM.mjs";
-import {
-  TranscriptionCapabilities,
-  meta
-} from "./chunk-Q5OC3WVG.mjs";
 import "./chunk-J5LGTIGS.mjs";
 
-// src/TranscriptionPlugin.tsx
-import { Common, Plugin } from "@dxos/app-framework";
-import { Obj } from "@dxos/echo";
-import { getSpace } from "@dxos/react-client/echo";
-import { Message, Transcript } from "@dxos/types";
+// src/components/Transcription/Transcription.tsx
+import React from "react";
+import { useThemeContext } from "@dxos/react-ui";
+import { useTextEditor } from "@dxos/react-ui-editor";
+import { autoScroll, createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown, documentSlots, preview } from "@dxos/ui-editor";
+import { composable, composableProps } from "@dxos/ui-theme";
+import { isTruthy } from "@dxos/util";
+
+// src/components/Transcription/transcription-extension.ts
+import { RangeSetBuilder } from "@codemirror/state";
+import { EditorView, GutterMarker, ViewPlugin, gutter } from "@codemirror/view";
+import { format } from "date-fns/format";
+import { intervalToDuration } from "date-fns/intervalToDuration";
+import { addEventListener, combine } from "@dxos/async";
+
+// src/model/model.ts
+import { Text } from "@codemirror/state";
+import { Event } from "@dxos/async";
+import { invariant } from "@dxos/invariant";
+import { log } from "@dxos/log";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-transcription/src/model/model.ts";
+var DocumentAdapter = class {
+  _view;
+  constructor(_view) {
+    this._view = _view;
+  }
+  /** The document must always have at least one line. */
+  lineCount() {
+    return this._view.state.doc.lines - 1;
+  }
+  replaceLines(from, remove, insert) {
+    log("replaceLines", {
+      count: this._view.state.doc.lines,
+      from,
+      remove,
+      insert
+    }, {
+      F: __dxlog_file,
+      L: 39,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    const numLines = this._view.state.doc.lines;
+    const posFrom = this._view.state.doc.line(from).from;
+    const posTo = remove === 0 ? posFrom : this._view.state.doc.line(Math.min(numLines, from + remove)).from;
+    let text = insert.join("\n");
+    if (posTo === this._view.state.doc.length) {
+      text += "\n";
+    }
+    this._view.dispatch({
+      changes: {
+        from: posFrom,
+        to: posTo,
+        insert: text
+      }
+    });
+  }
+};
+var SerializationModel = class {
+  _renderer;
+  /** Ordered set of chunks. */
+  _chunks = [];
+  /** Map of chunk IDs to their current line counts. */
+  _chunkLineCounts = /* @__PURE__ */ new Map();
+  /** Map of line numbers to chunk IDs. */
+  _lineToChunk = /* @__PURE__ */ new Map();
+  /** Track chunk changes since last sync. */
+  _changes = [];
+  /** Emits when the document is updated. */
+  update = new Event();
+  constructor(_renderer, initialChunks = []) {
+    this._renderer = _renderer;
+    initialChunks.forEach((chunk) => {
+      this.appendChunk(chunk);
+    });
+  }
+  toJSON() {
+    return {
+      chunks: this._chunks.length,
+      changes: this._changes.length
+    };
+  }
+  get doc() {
+    return Text.of([
+      ...this._chunks.flatMap((chunk, index) => this._renderer(chunk, index)),
+      ""
+    ]);
+  }
+  get chunks() {
+    return this._chunks;
+  }
+  /**
+  * Get the block ID at the given line number.
+  */
+  getChunkAtLine(line) {
+    return this._lineToChunk.get(line);
+  }
+  reset() {
+    this._chunks.length = 0;
+    this._chunkLineCounts.clear();
+    this._lineToChunk.clear();
+    this.update.emit();
+    return this;
+  }
+  appendChunk(chunk) {
+    const index = this._chunks.length;
+    this._chunks.push(chunk);
+    this._changes.push({
+      type: "append",
+      index,
+      chunk
+    });
+    this.update.emit();
+    return this;
+  }
+  updateChunk(chunk) {
+    const index = this._chunks.findIndex((c) => c.id === chunk.id);
+    invariant(index !== -1, void 0, {
+      F: __dxlog_file,
+      L: 147,
+      S: this,
+      A: [
+        "index !== -1",
+        ""
+      ]
+    });
+    this._chunks[index] = chunk;
+    this._changes.push({
+      type: "update",
+      index,
+      chunk
+    });
+    this.update.emit();
+    return this;
+  }
+  deleteBlock(id) {
+    const index = this._chunks.findIndex((c) => c.id === id);
+    invariant(index !== -1, void 0, {
+      F: __dxlog_file,
+      L: 156,
+      S: this,
+      A: [
+        "index !== -1",
+        ""
+      ]
+    });
+    this._chunks.splice(index, 1);
+    this._changes.push({
+      type: "delete",
+      index,
+      id
+    });
+    this.update.emit();
+    return this;
+  }
+  /**
+  * Syncs the tracked changes with the ChunkDocument.
+  */
+  sync(document2) {
+    log("sync", {
+      changes: this._changes
+    }, {
+      F: __dxlog_file,
+      L: 167,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    for (const change of this._changes) {
+      switch (change.type) {
+        case "append": {
+          const lines = this._renderer(change.chunk, change.index);
+          const lastLine = document2.lineCount();
+          document2.replaceLines(lastLine + 1, 0, lines);
+          break;
+        }
+        case "update": {
+          let lineStart = 1;
+          for (let i = 0; i < change.index; i++) {
+            lineStart += this._chunkLineCounts.get(this._chunks[i].id);
+          }
+          const previousLineCount = this._chunkLineCounts.get(change.chunk.id);
+          const newLines = this._renderer(change.chunk, change.index);
+          document2.replaceLines(lineStart, previousLineCount, newLines);
+          break;
+        }
+        case "delete": {
+          let lineStart = 1;
+          for (let i = 0; i < change.index; i++) {
+            lineStart += this._chunkLineCounts.get(this._chunks[i].id);
+          }
+          const previousLineCount = this._chunkLineCounts.get(change.id);
+          document2.replaceLines(lineStart, previousLineCount, []);
+          break;
+        }
+      }
+    }
+    this._lineToChunk.clear();
+    let currentLine = 1;
+    for (const [index, chunk] of this._chunks.entries()) {
+      const lineCount = this._renderer(chunk, index).length;
+      this._chunkLineCounts.set(chunk.id, lineCount);
+      this._lineToChunk.set(currentLine, chunk);
+      currentLine += lineCount;
+    }
+    const chunkIds = new Set(this._chunks.map((chunk) => chunk.id));
+    for (const id of this._chunkLineCounts.keys()) {
+      if (!chunkIds.has(id)) {
+        this._chunkLineCounts.delete(id);
+      }
+    }
+    this._changes.length = 0;
+    return this;
+  }
+};
+
+// src/components/Transcription/transcription-extension.ts
+var transcription = ({ model, started }) => {
+  return [
+    // Show timestamps in the gutter.
+    gutter({
+      class: "cm-timestamp-gutter",
+      lineMarkerChange: (update) => update.docChanged || update.viewportChanged,
+      markers: (view) => {
+        const start = getStartTime(started, model.chunks[0]);
+        const builder = new RangeSetBuilder();
+        for (const { from, to } of view.visibleRanges) {
+          let line = view.state.doc.lineAt(from);
+          while (line.from <= to) {
+            const block = model.getChunkAtLine(line.number)?.blocks[0];
+            const timestamp = block?._tag === "transcript" && block.started;
+            if (timestamp) {
+              builder.add(line.from, line.from, new TimestampMarker(line.number, new Date(timestamp), start));
+            }
+            if (line.to + 1 > view.state.doc.length) {
+              break;
+            }
+            line = view.state.doc.lineAt(line.to + 1);
+          }
+        }
+        return builder.finish();
+      }
+    }),
+    // Listen for model updates.
+    ViewPlugin.fromClass(class {
+      _controls;
+      _cleanup;
+      _adapter;
+      _initialized = false;
+      constructor(view) {
+        this._adapter = new DocumentAdapter(view);
+        const scroller = view.scrollDOM;
+        let isAutoScrolling = false;
+        let hasScrolled = false;
+        let timeout;
+        const scrollToBottom = (smooth = false) => {
+          scroller.style.scrollBehavior = smooth ? "smooth" : "";
+          scroller.classList.add("cm-hide-scrollbar");
+          isAutoScrolling = true;
+          clearTimeout(timeout);
+          timeout = setTimeout(() => {
+            this._controls?.classList.add("opacity-0");
+            scroller.classList.remove("cm-hide-scrollbar");
+            isAutoScrolling = false;
+          }, 500);
+          view.dispatch({
+            effects: EditorView.scrollIntoView(view.state.doc.length, {
+              y: "end"
+            })
+          });
+        };
+        this._cleanup = combine(addEventListener(view.scrollDOM, "scroll", () => {
+          if (!isAutoScrolling) {
+            hasScrolled = true;
+            this._controls?.classList.remove("opacity-0");
+          }
+        }), model.update.on(() => {
+          const autoScroll2 = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight === 0 || !hasScrolled;
+          model.sync(this._adapter);
+          if (autoScroll2) {
+            scrollToBottom(true);
+          }
+        }));
+      }
+      update(_update) {
+        if (!this._initialized) {
+          this._initialized = true;
+          setTimeout(() => {
+            model.sync(this._adapter);
+          });
+        }
+      }
+      destroy() {
+        this._controls?.remove();
+        this._cleanup();
+      }
+    }),
+    EditorView.theme({
+      ".cm-gutters": {
+        backgroundColor: "var(--color-base-surface)"
+      },
+      ".cm-timestamp-gutter": {
+        width: "6rem",
+        paddingLeft: "0.5rem",
+        paddingRight: "1rem"
+      },
+      ".cm-timestamp-gutter > .cm-gutterElement > div": {
+        display: "inline-flex",
+        textAlign: "right",
+        padding: "3px"
+      }
+    })
+  ];
+};
+var TimestampMarker = class extends GutterMarker {
+  _line;
+  _timestamp;
+  _started;
+  constructor(_line, _timestamp, _started) {
+    super(), this._line = _line, this._timestamp = _timestamp, this._started = _started;
+  }
+  eq(other) {
+    return this._timestamp === other._timestamp;
+  }
+  toDOM(view) {
+    const el = document.createElement("div");
+    el.className = "text-sm text-subdued hover:bg-hover-surface cursor-pointer";
+    el.textContent = formatTimestamp(this._timestamp, this._started);
+    el.onclick = () => {
+      const pos = view.state.doc.line(this._line).from;
+      view.dispatch({
+        effects: EditorView.scrollIntoView(pos, {
+          y: "start"
+        })
+      });
+    };
+    return el;
+  }
+};
+var getStartTime = (started, message) => {
+  if (started) {
+    return started;
+  }
+  if (message?.blocks[0]?._tag === "transcript" && message.blocks[0].started) {
+    return new Date(message.blocks[0].started);
+  }
+  return void 0;
+};
+var formatTimestamp = (timestamp, relative) => {
+  if (relative) {
+    const pad = (n = 0) => String(n).padStart(2, "0");
+    const { hours, minutes, seconds } = intervalToDuration({
+      start: relative,
+      end: timestamp
+    });
+    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+  } else {
+    return format(timestamp, "HH:mm:ss");
+  }
+};
+
+// src/components/Transcription/Transcription.tsx
+var Transcription = composable(({ 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) : void 0
+        }),
+        autoScroll()
+      ].filter(isTruthy)
+    };
+  }, [
+    model
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ...composableProps(props, {
+      classNames: "dx-container"
+    }),
+    ref: parentRef,
+    "data-popover-collision-boundary": true
+  });
+});
+
+// src/hooks/useAudioFile.ts
+import { useEffect, useState } from "react";
+import { scheduleTask } from "@dxos/async";
+import { Context } from "@dxos/context";
+import { log as log2 } from "@dxos/log";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-transcription/src/hooks/useAudioFile.ts";
+var useAudioFile = (audioUrl, constraints) => {
+  const [{ audio, stream, track }, setStream] = useState({});
+  useEffect(() => {
+    const ctx = new Context(void 0, {
+      F: __dxlog_file2,
+      L: 20
+    });
+    scheduleTask(ctx, async () => {
+      try {
+        const response = await fetch(audioUrl);
+        const blob = await response.blob();
+        const objectUrl = URL.createObjectURL(blob);
+        ctx.onDispose(() => {
+          URL.revokeObjectURL(objectUrl);
+        });
+        const audio2 = new Audio();
+        audio2.src = objectUrl;
+        await new Promise((resolve, reject) => {
+          audio2.addEventListener("error", (err) => {
+            log2.error("error", {
+              err
+            }, {
+              F: __dxlog_file2,
+              L: 39,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+            reject(err);
+          }, {
+            once: true
+          });
+          audio2.addEventListener("canplay", async () => {
+            resolve();
+          }, {
+            once: true
+          });
+          audio2.load();
+        });
+        const audioCtx = new AudioContext();
+        if (audioCtx.state === "suspended") {
+          await audioCtx.resume();
+        }
+        const destination = audioCtx.createMediaStreamDestination();
+        destination.channelCount = 1;
+        const source = audioCtx.createMediaElementSource(audio2);
+        source.connect(destination);
+        const track2 = destination.stream.getAudioTracks()[0];
+        if (constraints) {
+          await track2.applyConstraints(constraints).catch((err) => log2.catch(err, void 0, {
+            F: __dxlog_file2,
+            L: 68,
+            S: void 0,
+            C: (f, a) => f(...a)
+          }));
+        }
+        setStream({
+          audio: audio2,
+          stream: destination.stream,
+          track: destination.stream.getAudioTracks()[0]
+        });
+      } catch (err) {
+        log2.catch(err, void 0, {
+          F: __dxlog_file2,
+          L: 78,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+      }
+    });
+    return () => {
+      void ctx.dispose();
+    };
+  }, [
+    audioUrl
+  ]);
+  return {
+    audio,
+    stream,
+    track
+  };
+};
+
+// src/hooks/useAudioTrack.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+var useAudioTrack = (active, constraints) => {
+  const [track, setTrack] = useState2();
+  useEffect2(() => {
+    if (!active) {
+      track?.stop();
+      setTrack(void 0);
+      return;
+    }
+    const initAudio = async () => {
+      const audio = new Audio();
+      audio.srcObject = await navigator.mediaDevices.getUserMedia({
+        audio: constraints ?? true
+      });
+      const [track2] = audio.srcObject.getAudioTracks();
+      if (track2) {
+        setTrack(track2);
+      }
+    };
+    if (active) {
+      void initAudio();
+    }
+  }, [
+    active
+  ]);
+  return track;
+};
+
+// src/hooks/useQueueModelAdapter.ts
+import { useEffect as useEffect3, useMemo, useState as useState3 } from "react";
+var useQueueModelAdapter = (renderer, queue, initialChunks = []) => {
+  const model = useMemo(() => new SerializationModel(renderer, initialChunks), [
+    queue
+  ]);
+  const [loaded, setLoaded] = useState3(false);
+  useEffect3(() => {
+    if (!queue) {
+      return;
+    }
+    const update = () => {
+      for (const block of queue?.objects ?? []) {
+        model.appendChunk(block);
+      }
+      setLoaded(true);
+    };
+    let i;
+    if (queue.isLoading) {
+      i = setInterval(() => {
+        if (!queue?.isLoading) {
+          clearInterval(i);
+          update();
+        }
+      }, 1e3);
+    } else {
+      update();
+    }
+    return () => clearTimeout(i);
+  }, [
+    model,
+    queue
+  ]);
+  useEffect3(() => {
+    if (!loaded || !queue || model.chunks.length === queue.objects.length) {
+      return;
+    }
+    const chunk = queue.objects.at(-1);
+    if (chunk) {
+      model.appendChunk(chunk);
+    }
+  }, [
+    model,
+    loaded,
+    queue?.objects.length
+  ]);
+  return model;
+};
+
+// src/hooks/useTranscriber.ts
+import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
+import { useCapabilities } from "@dxos/app-framework/ui";
+import { TranscriptionCapabilities as TranscriptionCapabilities2 } from "#types";
+var useTranscriber = ({ audioStreamTrack, recorderConfig, transcriberConfig, onSegments }) => {
+  const [getTranscriber] = useCapabilities(TranscriptionCapabilities2.Transcriber);
+  const transcriber = useMemo2(() => {
+    if (!getTranscriber || !audioStreamTrack || !onSegments) {
+      return void 0;
+    }
+    return getTranscriber({
+      audioStreamTrack,
+      recorderConfig,
+      transcriberConfig,
+      onSegments
+    });
+  }, [
+    getTranscriber,
+    audioStreamTrack,
+    recorderConfig,
+    transcriberConfig,
+    onSegments
+  ]);
+  useEffect4(() => {
+    return () => {
+      void transcriber?.close();
+    };
+  }, [
+    transcriber
+  ]);
+  return transcriber;
+};
 
-// src/capabilities/blueprint-definition/index.ts
-import { Capability } from "@dxos/app-framework";
-var BlueprintDefinition = Capability.lazy("BlueprintDefinition", () => import("./blueprint-definition-FTRNMLJZ.mjs"));
+// src/hooks/useVoiceInput.ts
+import { useCallback, useEffect as useEffect5, useState as useState4 } from "react";
+import { scheduleMicroTask } from "@dxos/async";
+import { Context as Context2 } from "@dxos/context";
+import { log as log3 } from "@dxos/log";
+import { useSoundEffect } from "@dxos/react-ui-sfx";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/plugins/plugin-transcription/src/hooks/useVoiceInput.ts";
+var useVoiceInput = ({ active, onUpdate }) => {
+  const soundStart = useSoundEffect("StartRecording");
+  const soundStop = useSoundEffect("StopRecording");
+  const handleSegments = useCallback(async (segments) => {
+    const text = segments.map((str) => str.text.trim().replace(/[^\w\s]/g, "")).join(" ");
+    onUpdate(text);
+  }, []);
+  const [recording, setRecording] = useState4(false);
+  const track = useAudioTrack(active);
+  const transcriber = useTranscriber({
+    audioStreamTrack: track,
+    onSegments: handleSegments
+  });
+  useEffect5(() => {
+    const ctx = new Context2(void 0, {
+      F: __dxlog_file3,
+      L: 44
+    });
+    scheduleMicroTask(ctx, async () => {
+      if (active && transcriber) {
+        await transcriber.open();
+        log3.info("starting...", void 0, {
+          F: __dxlog_file3,
+          L: 48,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        setRecording(true);
+        void soundStart.play();
+        transcriber.startChunksRecording();
+      } else if (!active && transcriber?.isOpen) {
+        transcriber?.stopChunksRecording();
+        await transcriber?.close();
+        log3.info("stopped", void 0, {
+          F: __dxlog_file3,
+          L: 55,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        setRecording(false);
+        void soundStop.play();
+      }
+    });
+    return () => {
+      void ctx.dispose();
+    };
+  }, [
+    active,
+    transcriber
+  ]);
+  return {
+    recording
+  };
+};
 
-// src/capabilities/operation-resolver/index.ts
-import { Capability as Capability2 } from "@dxos/app-framework";
-var OperationResolver = Capability2.lazy("OperationResolver", () => import("./operation-resolver-ZUWTU7C5.mjs"));
+// src/meta.ts
+import { trim } from "@dxos/util";
+var meta = {
+  id: "org.dxos.plugin.transcription",
+  name: "Transcription",
+  description: trim`
+    Real-time voice-to-text transcription service for capturing spoken content.
+    Convert audio input into searchable text that integrates seamlessly with notes and documents.
+  `,
+  icon: "ph--microphone--regular",
+  iconHue: "sky",
+  source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-transcription",
+  tags: [
+    "labs"
+  ],
+  screenshots: []
+};
 
-// src/capabilities/react-surface/index.ts
-import { Capability as Capability3 } from "@dxos/app-framework";
-var ReactSurface = Capability3.lazy("ReactSurface", () => import("./react-surface-ZXH5267I.mjs"));
+// src/transcriber/media-stream-recorder.ts
+import { MediaRecorder, register } from "extendable-media-recorder";
+import { WaveFile } from "wavefile";
+import { synchronized } from "@dxos/async";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { log as log4 } from "@dxos/log";
+import { trace } from "@dxos/tracing";
+function _ts_decorate(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+var __dxlog_file4 = "/__w/dxos/dxos/packages/plugins/plugin-transcription/src/transcriber/media-stream-recorder.ts";
+var initializingPromise;
+var initializeExtendableMediaRecorder = async () => {
+  const { connect } = await import("extendable-media-recorder-wav-encoder");
+  await register(await connect());
+};
+var MediaStreamRecorder = class {
+  _mediaStreamTrack;
+  /**
+  * Default MediaRecorder implementation do not support wav encoding.
+  */
+  _config;
+  _mediaRecorder = void 0;
+  _header = void 0;
+  _onChunk;
+  constructor({ mediaStreamTrack, config }) {
+    this._mediaStreamTrack = mediaStreamTrack;
+    this._config = config;
+  }
+  get wavConfig() {
+    const settings = this._mediaStreamTrack.getSettings();
+    return {
+      channels: settings.channelCount ?? 1,
+      sampleRate: settings.sampleRate ?? 16e3,
+      bitDepthCode: settings.sampleSize ? String(settings.sampleSize) : "16"
+    };
+  }
+  get mediaStreamTrack() {
+    return this._mediaStreamTrack;
+  }
+  setOnChunk(onChunk) {
+    this._onChunk = onChunk;
+  }
+  async start() {
+    await (initializingPromise ??= initializeExtendableMediaRecorder()).catch((err) => log4.info("initializeExtendableMediaRecorder", {
+      err
+    }, {
+      F: __dxlog_file4,
+      L: 69,
+      S: this,
+      C: (f, a) => f(...a)
+    }));
+    if (!this._mediaRecorder) {
+      const stream = new MediaStream([
+        this._mediaStreamTrack
+      ]);
+      this._mediaRecorder = new MediaRecorder(stream, {
+        mimeType: "audio/wav"
+      });
+    }
+    if (this._mediaRecorder.state === "recording") {
+      return;
+    }
+    invariant2(this._onChunk, "MediaStreamRecorder: onChunk is not set", {
+      F: __dxlog_file4,
+      L: 80,
+      S: this,
+      A: [
+        "this._onChunk",
+        "'MediaStreamRecorder: onChunk is not set'"
+      ]
+    });
+    this._mediaRecorder.ondataavailable = (event) => this._ondataavailable(event);
+    this._mediaRecorder.start(this._config.interval);
+  }
+  async stop() {
+    if (this._mediaRecorder?.state !== "recording") {
+      return;
+    }
+    this._mediaRecorder.stop();
+  }
+  async _ondataavailable(event) {
+    const blob = event.data;
+    const uint8Array = new Uint8Array(await blob.arrayBuffer());
+    const isHeader = uint8Array[0] === 82 && // R
+    uint8Array[1] === 73 && // I
+    uint8Array[2] === 70 && // F
+    uint8Array[3] === 70;
+    let wav;
+    if (isHeader) {
+      wav = new WaveFile(uint8Array);
+      this._header = uint8Array.slice(0, 44);
+    } else if (this._header) {
+      wav = new WaveFile(new Uint8Array([
+        ...this._header,
+        ...uint8Array
+      ]));
+    } else {
+      log4.warn("MediaStreamRecorder: no header", void 0, {
+        F: __dxlog_file4,
+        L: 111,
+        S: this,
+        C: (f, a) => f(...a)
+      });
+      return;
+    }
+    this._onChunk({
+      timestamp: Date.now(),
+      data: wav.getSamples()
+    });
+  }
+};
+_ts_decorate([
+  synchronized
+], MediaStreamRecorder.prototype, "_ondataavailable", null);
+MediaStreamRecorder = _ts_decorate([
+  trace.resource()
+], MediaStreamRecorder);
 
-// src/capabilities/transcriber/index.ts
-import { Capability as Capability4 } from "@dxos/app-framework";
-var Transcriber2 = Capability4.lazy("Transcriber", () => import("./transcriber-EZZTUCPE.mjs"));
+// src/transcriber/transcriber.ts
+import { WaveFile as WaveFile2 } from "wavefile";
+import { DeferredTask, Trigger } from "@dxos/async";
+import { LifecycleState, Resource } from "@dxos/context";
+import { log as log5 } from "@dxos/log";
+import { trace as trace2 } from "@dxos/tracing";
+import { TRANSCRIPTION_URL } from "#types";
+function _ts_decorate2(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+var __dxlog_file5 = "/__w/dxos/dxos/packages/plugins/plugin-transcription/src/transcriber/transcriber.ts";
+var Transcriber = class extends Resource {
+  _audioChunks = [];
+  _lastUsedTimestamp = 0;
+  _openTrigger = new Trigger({
+    autoReset: true
+  });
+  _config;
+  _recorder;
+  _onSegments;
+  _recording = false;
+  _transcribeTask = void 0;
+  constructor({ config, recorder, onSegments }) {
+    super();
+    this._config = config;
+    this._recorder = recorder;
+    this._onSegments = onSegments;
+  }
+  async _open(ctx) {
+    log5.info("opening", void 0, {
+      F: __dxlog_file5,
+      L: 102,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    this._recorder.setOnChunk((chunk) => this._saveAudioChunk(chunk));
+    await this._recorder.start();
+    this._transcribeTask = new DeferredTask(ctx, async () => this._transcribe());
+    this._openTrigger.wake();
+  }
+  async _close() {
+    log5.info("closing", void 0, {
+      F: __dxlog_file5,
+      L: 110,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    this._recording = false;
+    this._transcribeTask = void 0;
+    await this._recorder.stop();
+  }
+  startChunksRecording() {
+    log5.info("starting", void 0, {
+      F: __dxlog_file5,
+      L: 117,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    if (this._lifecycleState !== LifecycleState.OPEN) {
+      return;
+    }
+    this._recording = true;
+  }
+  stopChunksRecording() {
+    if (this._lifecycleState !== LifecycleState.OPEN || !this._recording) {
+      return;
+    }
+    this._recording = false;
+    this._transcribeTask?.schedule();
+    log5.info("stopped", void 0, {
+      F: __dxlog_file5,
+      L: 132,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+  }
+  _saveAudioChunk(chunk) {
+    log5("saving audio chunk", {
+      chunk
+    }, {
+      F: __dxlog_file5,
+      L: 136,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    this._audioChunks.push(chunk);
+    if (!this._recording && (!this._transcribeTask || !this._transcribeTask.scheduled) && this._audioChunks.length >= this._config.prefixBufferChunksAmount) {
+      this._audioChunks = this._dropOldChunks();
+    } else if (this._audioChunks.length >= this._config.transcribeAfterChunksAmount && this._recording) {
+      this._transcribeTask?.schedule();
+    }
+  }
+  async _transcribe() {
+    log5("transcribing", {
+      chunks: this._audioChunks.length
+    }, {
+      F: __dxlog_file5,
+      L: 152,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    const chunks = this._audioChunks;
+    this._audioChunks = this._dropOldChunks();
+    if (chunks.length === 0) {
+      return;
+    }
+    const audio = await this._mergeAudioChunks(chunks);
+    const segments = await this._fetchTranscription(audio);
+    if (!Array.isArray(segments) || segments.length === 0) {
+      return;
+    }
+    const alignedSegments = this._alignSegments(segments, chunks);
+    if (alignedSegments.length > 0) {
+      await this._onSegments(alignedSegments);
+    }
+  }
+  _dropOldChunks() {
+    return this._config.prefixBufferChunksAmount > 0 ? this._audioChunks.slice(-this._config.prefixBufferChunksAmount) : [];
+  }
+  async _mergeAudioChunks(chunks) {
+    const file = new WaveFile2();
+    const wavConfig = this._recorder.wavConfig;
+    file.fromScratch(wavConfig.channels, wavConfig.sampleRate, wavConfig.bitDepthCode, mergeFloat64Arrays(chunks.map(({ data }) => data)));
+    return file.toBase64();
+  }
+  async _fetchTranscription(audio) {
+    if (audio.length === 0) {
+      this._audioChunks = [];
+      throw new Error("No audio to send for transcribing");
+    }
+    const response = await fetch(`${TRANSCRIPTION_URL}/transcribe`, {
+      method: "POST",
+      body: JSON.stringify({
+        audio
+      }),
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    if (!response.ok) {
+      this._audioChunks = [];
+      throw new Error(`Transcription failed: ${response.statusText}`);
+    }
+    const { segments } = await response.json();
+    log5.info("transcription response", {
+      segments: segments.length,
+      string: segments.map((segments2) => segments2.text).join(" ")
+    }, {
+      F: __dxlog_file5,
+      L: 216,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    return segments;
+  }
+  _alignSegments(segments, originalChunks) {
+    const zeroTimestamp = originalChunks.at(0).timestamp;
+    const filteredSegments = segments.filter((segment) => zeroTimestamp + segment.end * 1e3 >= this._lastUsedTimestamp).map((segment) => {
+      const words = segment.words.filter((word) => zeroTimestamp + word.start * 1e3 >= this._lastUsedTimestamp);
+      return {
+        ...segment,
+        words,
+        text: words.map((word) => word.word).join(""),
+        start: words.at(0)?.start ?? segment.end
+      };
+    }).filter((segment) => segment.words.length > 0);
+    if (filteredSegments.length === 0) {
+      return [];
+    }
+    this._lastUsedTimestamp = zeroTimestamp + filteredSegments.at(-1).end * 1e3;
+    return filteredSegments.map((segment) => ({
+      _tag: "transcript",
+      started: new Date(zeroTimestamp + segment.start * 1e3).toISOString(),
+      text: segment.text.trim()
+    }));
+  }
+};
+_ts_decorate2([
+  trace2.span({
+    showInBrowserTimeline: true
+  })
+], Transcriber.prototype, "_mergeAudioChunks", null);
+_ts_decorate2([
+  trace2.span({
+    showInBrowserTimeline: true
+  })
+], Transcriber.prototype, "_fetchTranscription", null);
+
+// src/transcriber/transcription-manager.ts
+import { Atom } from "@effect-atom/atom-react";
+import { synchronized as synchronized2 } from "@dxos/async";
+import { Resource as Resource2 } from "@dxos/context";
+import { Obj } from "@dxos/echo";
+import { Message } from "@dxos/types";
+function _ts_decorate3(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+var RECORD_INTERVAL = 200;
+var PREFIXED_CHUNKS_AMOUNT = 10;
+var TRANSCRIBE_AFTER_CHUNKS_AMOUNT = 50;
+var TranscriptionManager = class extends Resource2 {
+  _edgeClient;
+  _messageEnricher;
+  _registry;
+  _audioStreamTrack = void 0;
+  _identityDid = void 0;
+  _mediaRecorder = void 0;
+  _transcriber = void 0;
+  _queue = void 0;
+  _enabledAtom = Atom.make(false);
+  constructor(options) {
+    super();
+    this._edgeClient = options.edgeClient;
+    this._messageEnricher = options.messageEnricher;
+    this._registry = options.registry;
+  }
+  get enabled() {
+    return this._enabledAtom;
+  }
+  getEnabled() {
+    return this._registry.get(this._enabledAtom);
+  }
+  setQueue(queue) {
+    this._queue = queue;
+    return this;
+  }
+  setIdentityDid(did) {
+    if (this._identityDid !== did) {
+      this._identityDid = did;
+    }
+    return this;
+  }
+  setRecording(recording) {
+    if (!this.isOpen || !this.getEnabled()) {
+      return this;
+    }
+    if (recording) {
+      this._transcriber?.startChunksRecording();
+    } else {
+      this._transcriber?.stopChunksRecording();
+    }
+    return this;
+  }
+  async setEnabled(enabled) {
+    if (this.getEnabled() === enabled) {
+      return;
+    }
+    this._registry.set(this._enabledAtom, enabled ?? false);
+    if (enabled) {
+      await this._maybeRestartTranscriber();
+    } else {
+      await this._stopTranscriber();
+    }
+  }
+  async setAudioTrack(track) {
+    if (this._audioStreamTrack === track) {
+      return;
+    }
+    this._audioStreamTrack = track;
+    await this._maybeRestartTranscriber();
+  }
+  async _open() {
+    await this._maybeRestartTranscriber();
+  }
+  async _close() {
+    await this._stopTranscriber();
+  }
+  async _maybeRestartTranscriber() {
+    if (!this._audioStreamTrack || !this.getEnabled() || !this.isOpen) {
+      return;
+    }
+    let needReinit = false;
+    if (this._audioStreamTrack !== this._mediaRecorder?.mediaStreamTrack) {
+      this._mediaRecorder = new MediaStreamRecorder({
+        mediaStreamTrack: this._audioStreamTrack,
+        config: {
+          interval: RECORD_INTERVAL
+        }
+      });
+      needReinit = true;
+    }
+    if (needReinit) {
+      await this._transcriber?.close();
+      this._transcriber = new Transcriber({
+        config: {
+          transcribeAfterChunksAmount: TRANSCRIBE_AFTER_CHUNKS_AMOUNT,
+          prefixBufferChunksAmount: PREFIXED_CHUNKS_AMOUNT
+        },
+        recorder: this._mediaRecorder,
+        onSegments: (segments) => this._onSegments(segments)
+      });
+      await this._transcriber?.open();
+    }
+  }
+  async _stopTranscriber() {
+    await this._transcriber?.close();
+  }
+  async _onSegments(segments) {
+    if (!this.isOpen || !this._queue) {
+      return;
+    }
+    let block = Obj.make(Message.Message, {
+      created: (/* @__PURE__ */ new Date()).toISOString(),
+      blocks: segments,
+      sender: {
+        identityDid: this._identityDid
+      }
+    });
+    if (this._messageEnricher) {
+      block = await this._messageEnricher(block);
+    }
+    await this._queue.append([
+      block
+    ]);
+  }
+};
+_ts_decorate3([
+  synchronized2
+], TranscriptionManager.prototype, "setAudioTrack", null);
+
+// src/TranscriptionPlugin.tsx
+import * as Option from "effect/Option";
+import { Plugin } from "@dxos/app-framework";
+import { AppActivationEvents, AppPlugin } from "@dxos/app-toolkit";
+import { Annotation, Obj as Obj2 } from "@dxos/echo";
+import { getSpace } from "@dxos/react-client/echo";
+import { Message as Message2, Transcript } from "@dxos/types";
+import { meta as meta3 } from "#meta";
 
 // src/translations.ts
+import { meta as meta2 } from "#meta";
 var translations = [
   {
     "en-US": {
-      [meta.id]: {
-        "plugin name": "Transcription",
-        "transcript companion label": "Transcript",
-        "delete button": "Delete",
-        "bookmark button": "Bookmark",
-        "scroll to end label": "Scroll to latest",
-        "settings entity extraction label": "Entity extraction"
+      [meta2.id]: {
+        "plugin.name": "Transcription",
+        "transcript-companion.label": "Transcript",
+        "delete.button": "Delete",
+        "bookmark.button": "Bookmark",
+        "scroll-to-end.label": "Scroll to latest",
+        "settings.entity-extraction.label": "Entity extraction"
       }
     }
   }
 ];
 
 // src/TranscriptionPlugin.tsx
-var TranscriptionPlugin = Plugin.define(meta).pipe(Common.Plugin.addTranslationsModule({
-  translations
-}), Common.Plugin.addMetadataModule({
+import { BlueprintDefinition, OperationHandler, ReactSurface, Transcriber as Transcriber2 } from "#capabilities";
+var TranscriptionPlugin = Plugin.define(meta3).pipe(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) => {
         const space = getSpace(transcript);
         const members = space?.members.get().map((member) => member.identity) ?? [];
         const queue = space?.queues.get(transcript.queue.dxn);
         await queue?.refresh();
-        const content = queue?.objects.filter((message) => Obj.instanceOf(Message.Message, message)).flatMap((message, index) => renderByline(members)(message, index)).join("\n\n");
+        const content = queue?.objects.filter((message) => Obj2.instanceOf(Message2.Message, message)).flatMap((message, index) => renderByline(members)(message, index)).join("\n\n");
         return content;
       }
     }
   }
-}), Common.Plugin.addSchemaModule({
+}), AppPlugin.addOperationHandlerModule({
+  activate: OperationHandler
+}), AppPlugin.addSchemaModule({
   schema: [
     Transcript.Transcript
   ]
-}), Common.Plugin.addSurfaceModule({
+}), AppPlugin.addSurfaceModule({
   activate: ReactSurface
-}), Common.Plugin.addOperationResolverModule({
-  activate: OperationResolver
+}), AppPlugin.addTranslationsModule({
+  translations
 }), Plugin.addModule({
   id: "transcription",
-  activatesOn: Common.ActivationEvent.SetupAppGraph,
+  activatesOn: AppActivationEvents.SetupAppGraph,
   activate: Transcriber2
-}), Common.Plugin.addBlueprintDefinitionModule({
-  activate: BlueprintDefinition
 }), Plugin.make);
 export {
   MediaStreamRecorder,
   Transcriber,
-  TranscriptContainer,
-  TranscriptView,
+  Transcription,
   TranscriptionCapabilities,
-  TranscriptionContainer,
   TranscriptionManager,
   TranscriptionPlugin,
   meta,