@eyeauras/workbench-monaco

Optional Monaco-backed editor providers and a high-volume Output viewer for @eyeauras/workbench.

Install

npm install @eyeauras/[email protected] @eyeauras/[email protected] monaco-editor@^0.52.2

Editor quickstart

Use a CSS-aware browser bundler and a sized host. This Vite example configures the plain-text worker; add JSON, CSS, HTML or TypeScript workers when your host needs those languages.

import { createWorkbench } from "@eyeauras/workbench";
import { createMonacoEditorProvider } from "@eyeauras/workbench-monaco";
import * as monaco from "monaco-editor";
import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
window.MonacoEnvironment = { getWorker: () => new EditorWorker() };
const host = document.createElement("div");
host.style.cssText = "width:100%;height:600px";
document.body.append(host);
const workbench = createWorkbench(host);
workbench.registerEditorProvider(createMonacoEditorProvider(monaco, { languageFromInput: () => "plaintext" }));
workbench.openEditor({ id: "notes", title: "Notes", editorType: "monaco", data: "Hello" });
export function dispose() { workbench.dispose(); host.remove(); }

Vite TypeScript projects include vite/client for worker import types. Other bundlers supply their own worker integration. The provider owns mounted editors/models. Core installs shared styles; see the shell quickstart for codicons and themes.

The host can provide an existing Monaco namespace or use the lazy provider. See the EyeAuras UI Workbench repository for examples and API orientation.

Every provider also projects workbench.services.diagnostics for the editor input's exact resource into Monaco markers. Diagnostic owners remain isolated through namespaced Monaco marker owners, missing ranges fall back to the first character, and closing the editor clears only markers projected by that editor. Publish diagnostics through the core service; no Monaco-specific producer API is required.

Output log

createMonacoOutputView mounts a standalone, read-only Output editor. It takes an existing Monaco namespace and a core channel; it does not need a Workbench shell or React. Configure Monaco workers in your bundler as for the editor provider, and give the container a definite height.

import { WorkbenchOutputService } from "@eyeauras/workbench";
import { createMonacoOutputView } from "@eyeauras/workbench-monaco";
import * as monaco from "monaco-editor";

const output = new WorkbenchOutputService();
const channel = output.registerChannel("runtime", "Runtime", {
  maxEntries: 100_000,
  maxCharacters: 16 * 1024 * 1024,
});
// The application supplies current translated presentation, including count formatting.
const presentation = resolveOutputPresentation(currentLocale);
const view = createMonacoOutputView(container, monaco, channel, { presentation });
// On a locale change: updates controls/ARIA/counts without replacing the model or filters.
view.setPresentation(resolveOutputPresentation(nextLocale));
channel.appendLines([
  { timestamp: new Date(), level: "info", source: "Combat", message: "Target acquired" },
  { timestamp: new Date(), level: "error", source: "Runtime", message: "Attack failed\n  at attack()" },
]);
view.setFilter({ text: "attack,!cancelled", levels: ["warning", "error"] });

// On unmount: the view owns its editor/model; the service owns its channels.
view.dispose();
output.dispose();

The required MonacoOutputPresentation contains the viewer labels, level names and a count formatter. The host owns translation; the adapter has no default catalog or localization dependency.

The toolbar supports independent level and category (source) selection, literal include/!exclude terms, Follow, Wrap, Clear, and Copy filtered. Positive comma-separated terms use OR; any matching negative term excludes the whole record, including its multiline continuation. Matching is case-insensitive over message and source. Quotes keep commas inside a term and remain literal, matching VS Code Output's parser. This is not a regex or JavaScript expression evaluator. Missing levels/sources means all; an empty array means none. Timestamps display UTC. Raw sources can supply timestamp: null and level: "unknown"; these display as [--:--:--.---] [UNKNOWN] with neutral severity color and remain independently filterable.

The header uses the shared WorkbenchToolbar and context menus. Its filter stays available on the left; actions overflow right-to-left into More Actions as the container narrows, without adding header rows or resetting filter/toggle state. The standalone view installs the shared Workbench styles once per document; hosts can customize the same --vscode-* theme tokens as other controls. Filters, view modes and operations are separate menu groups; the same grouping remains in overflow.

Options and lifetime

The returned view exposes element, the public Monaco editor, setFilter, setFollow, flush, getText, and idempotent dispose. A view owns its editor, model, toolbar, and subscriptions, not its channel or service. Reuse a host-owned channel without disposing the host's service on view unmount. Clipboard failures appear in the status; the current Copy action has no temporary success animation.

Projection and limits

Timestamp/severity decorations cover the visible viewport only and use Workbench CSS color variables. They remain colored when another Monaco editor changes the namespace-wide theme; the viewer does not register a global log language or theme.

Only matching records enter the Monaco model, so native Find and selection copy operate on visible text. Filter changes rebuild that projection synchronously and reset its selection. Batch appends and prefix eviction preserve the reading position when Follow is off and the selected record survives. A compaction periodically releases deleted Monaco text buffers. Source records remain available in the channel when hidden by a filter. UI updates are coalesced per animation frame; flush() applies pending changes immediately and getText() flushes before returning filtered text.

Both retention limits apply simultaneously. Defaults are 100,000 records and 16 Mi UTF-16 code units of message + source, not a JavaScript heap byte cap. An oversized record is evicted too; the status reports the number evicted since Clear. getEntries(afterId) returns the retained cursor tail without copying earlier history. IDs remain monotonic across Clear. onDidChange announces one complete append batch or Clear; onDidAppend reports new records that survived retention. Existing append, appendLine, and getLines producer calls continue to work.

The default clipboard uses navigator.clipboard; an embedded host can pass writeClipboard. Dispose the viewer before disposing its service. In React, mount it from an effect instead of passing each log batch through component state:

import { useEffect, useRef } from "react";
import type { OutputChannel } from "@eyeauras/workbench";
import { createMonacoOutputView, type MonacoNamespace } from "@eyeauras/workbench-monaco";

function Output({ channel, monaco }: { channel: OutputChannel; monaco: MonacoNamespace }) {
  const host = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const view = createMonacoOutputView(host.current!, monaco, channel);
    return () => view.dispose();
  }, [channel, monaco]);
  return <div ref={host} style={{ height: "100%", minHeight: 0 }} />;
}

See the demo's Output Log page for 100k/1M batch loading and a live stream. Persistent archives and Studio/Vizor transport adapters remain host responsibilities. The renderer decision and benchmark limitations are recorded in issue #26.