@celljs/ta-web 0.0.0-stage → 4.6.1

package/src/browser/extension/web-extensions.ts

@@ -0,0 +1,717 @@
+import { Autowired, Component, Optional, PostConstruct } from '@celljs/core';
+import type { TaEvent, TaPackageServer, TaServer, TaTerminalServer, TaWebExtensionInfo, TaWorkspaceServer } from '@celljs/ta-protocol';
+import * as React from 'react';
+import { CodeEditor } from '../components/code-editor';
+import { DiffEditor } from '../components/diff-editor';
+import { FolderPicker } from '../components/folder-picker';
+import { Markdown } from '../components/markdown';
+import { TaAvatar } from '../components/ta-avatar';
+import { WebComposer } from '../components/web-composer';
+import { WebDialog } from '../components/web-dialog';
+import { message as messageOf } from '../i18n/messages';
+import { TaNotices } from '../notices/notices-protocol';
+import { TaSettings } from '../settings/settings-protocol';
+import { type StateSpec, StateUtil, TaState } from '../state/state-protocol';
+import { TaWorkbench } from '../workbench-protocol';
+import { WEB_ICONS } from './icons';
+import type {
+    CodeEditorProps,
+    DiffEditorProps,
+    WebComposerProps,
+    WebEditor,
+    WebExtensionAPI,
+    WebExtensionFactory,
+    WebFolderPickerProps,
+    WebOpener,
+    WebStorage,
+    WebTool,
+    WebView,
+    WidgetOptions,
+} from './web-extension-api';
+import {
+    BuiltinWebExtension,
+    type LoadedWebExtension,
+    TaWebExtensions,
+    type WebEditorEntry,
+    type WebExtensionConversation,
+    type WebExtensionsState,
+    WebLabelUtil,
+    type WorkbenchTabs,
+} from './web-extension-protocol';
+
+const DEFAULT_ORDER = 100;
+
+/** One web extension that runs, and what it registered. */
+interface Running {
+    loaded: LoadedWebExtension;
+    /** Of the file it runs; a change loads it again. */
+    hash?: string;
+    /** Its function has returned: what it registers from now on shows at once. */
+    started: boolean;
+    stopped: boolean;
+    views: Map<string, WebView>;
+    widgets: Map<string, { component: React.ComponentType; options: WidgetOptions }>;
+    renderers: Map<string, WebExtensionsState['renderers'][string]>;
+    avatar?: WebExtensionsState['avatars'][string];
+    tools: WebTool[];
+    openers: WebOpener[];
+    handlers: { type: string; handler: (event: TaEvent) => void }[];
+    /** Undo what it subscribed to outside this class (the terminals of the workbench). */
+    unsubscribes: (() => void)[];
+    dispose?: () => void;
+}
+
+export namespace WebExtensionUtil {
+    export function builtinId(name: string): string {
+        return `builtin:${name}`;
+    }
+
+    /** The default export of a module of source code. */
+    export async function load(code: string): Promise<WebExtensionFactory> {
+        const url = URL.createObjectURL(new Blob([code], { type: 'text/javascript' }));
+        try {
+            const module = await import(/* @vite-ignore */ url);
+            if (typeof module.default !== 'function') {
+                throw new Error('A web extension exports a function as its default export.');
+            }
+            return module.default as WebExtensionFactory;
+        } finally {
+            URL.revokeObjectURL(url);
+        }
+    }
+
+    export function message(error: unknown): string {
+        return error instanceof Error ? error.message : String(error);
+    }
+}
+
+export namespace WebViewUtil {
+    /** The tab a `panel` view opens as. */
+    export function editorId(viewId: string): string {
+        return `view:${viewId}`;
+    }
+
+    /** The page shown last in this tab of the browser: another tab may show another. */
+    export const PAGE: StateSpec<string> = { key: 'page', tier: 'tab', initial: '', parse: StateUtil.string };
+
+    /** The tools open in the workbench, for the user in any browser: the workbench is one for the whole page. */
+    export const TABS: StateSpec<WorkbenchTabs> = {
+        key: 'workbench',
+        tier: 'user',
+        initial: { views: [] },
+        parse: value => {
+            const kept = value as Partial<WorkbenchTabs> | null;
+            if (!kept || typeof kept !== 'object' || !Array.isArray(kept.views)) {
+                return undefined;
+            }
+            const views = kept.views.filter((id): id is string => typeof id === 'string');
+            return typeof kept.active === 'string' ? { views, active: kept.active } : { views };
+        },
+    };
+
+    /** What to keep of the tabs: the views open, and the one shown, or the one still to open again. */
+    export function tabs(editors: readonly { id: string }[], active: string | undefined): WorkbenchTabs {
+        const prefix = editorId('');
+        const views = editors.filter(editor => editor.id.startsWith(prefix)).map(editor => editor.id.slice(prefix.length));
+        return active ? { views, active } : { views };
+    }
+}
+
+@Component(TaWebExtensions)
+export class TaWebExtensionsImpl implements TaWebExtensions {
+    @Autowired(TaWorkbench)
+    protected readonly workbench: TaWorkbench;
+
+    @Autowired(TaSettings)
+    protected readonly settings: TaSettings;
+
+    @Autowired(TaNotices)
+    protected readonly notices: TaNotices;
+    @Autowired(TaState)
+    protected readonly persisted: TaState;
+
+    @Autowired(BuiltinWebExtension)
+    @Optional()
+    readonly builtins: BuiltinWebExtension[] = [];
+
+    protected current: WebExtensionsState = {
+        extensions: [],
+        views: [],
+        widgets: [],
+        renderers: {},
+        avatars: {},
+        tools: [],
+        openers: [],
+        editors: [],
+        focus: 0,
+        page: '',
+    };
+    protected readonly running = new Map<string, Running>();
+    protected readonly listeners = new Set<(state: WebExtensionsState) => void>();
+    protected conversation?: WebExtensionConversation;
+    protected switcher?: (sessionId: string) => Promise<void>;
+    protected refreshing: Promise<boolean> = Promise.resolve(false);
+    /** The tabs of before are open again: from now on, what is open is kept. */
+    protected restored = false;
+    /** The tab shown before the page loaded, until it opens again or the user shows another. */
+    protected pendingActive?: string;
+
+    get state(): WebExtensionsState {
+        return this.current;
+    }
+
+    @PostConstruct()
+    protected init(): void {
+        this.current = { ...this.current, page: this.persisted.get(WebViewUtil.PAGE) };
+    }
+
+    subscribe(listener: (state: WebExtensionsState) => void): () => void {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+
+    /** One at a time: a refresh while one runs follows it. */
+    refresh(): Promise<boolean> {
+        const next = this.refreshing.then(
+            () => this.reconcile(),
+            () => this.reconcile(),
+        );
+        this.refreshing = next;
+        return next;
+    }
+
+    async remove(id: string): Promise<void> {
+        await this.workbench.packages.removeWebExtension(id);
+        await this.refresh();
+    }
+
+    showEditor(id: string): void {
+        if (this.current.editors.some(editor => editor.id === id)) {
+            this.pendingActive = undefined;
+            this.update({ activeEditor: id, focus: this.current.focus + 1 });
+            this.keepTabs();
+        }
+    }
+
+    openView(id: string, preserveFocus = false): void {
+        const view = this.current.views.find(candidate => candidate.id === id && candidate.location === 'panel');
+        const run = view && this.running.get(view.extension);
+        if (view && run) {
+            this.openEditor(run, { id: WebViewUtil.editorId(view.id), title: view.title, icon: view.icon, render: view.component }, preserveFocus);
+        }
+    }
+
+    showPage(id: string): void {
+        this.persisted.set(WebViewUtil.PAGE, id);
+        if (this.current.page !== id) {
+            this.update({ page: id });
+        }
+    }
+
+    protected showView(id: string): void {
+        if (id === '') {
+            this.showPage('');
+            return;
+        }
+        const view = this.current.views.find(candidate => candidate.id === id);
+        if (view?.location === 'page') {
+            this.showPage(id);
+        } else if (view?.location === 'panel') {
+            this.openView(id);
+        }
+    }
+
+    protected isShown(id: string): boolean {
+        return this.current.page === id || this.current.activeEditor === WebViewUtil.editorId(id);
+    }
+
+    closeEditor(id: string): Promise<void> {
+        return this.closeEditors([id]);
+    }
+
+    async closeEditors(ids: readonly string[]): Promise<void> {
+        const editors = this.current.editors.filter(candidate => ids.includes(candidate.id));
+        const dirty = editors.filter(editor => editor.dirty);
+        if (dirty.length > 0) {
+            const language = this.settings.state.language;
+            const title =
+                dirty.length === 1
+                    ? messageOf(language, 'ta.editor.unsavedTitle').replace('{title}', WebLabelUtil.text(dirty[0].title))
+                    : messageOf(language, 'ta.editor.unsavedManyTitle').replace('{count}', String(dirty.length));
+            const confirmed = await this.notices.confirm({
+                title,
+                message: messageOf(language, 'ta.editor.unsavedMessage'),
+                confirmLabel: messageOf(language, 'ta.editor.discardClose'),
+                danger: true,
+            });
+            if (!confirmed) {
+                return;
+            }
+        }
+        // Those closed meanwhile are not closed twice.
+        for (const editor of editors) {
+            if (this.current.editors.includes(editor)) {
+                this.dropEditor(editor);
+            }
+        }
+    }
+
+    pinEditor(id: string): void {
+        if (this.current.editors.some(editor => editor.id === id && editor.preview)) {
+            this.update({ editors: this.current.editors.map(editor => (editor.id === id ? { ...editor, preview: false } : editor)) });
+        }
+    }
+
+    /** Removes a tab and tells the extension that opened it. */
+    protected dropEditor(editor: WebEditorEntry): void {
+        this.removeEditors(candidate => candidate === editor);
+        const run = this.running.get(editor.extension);
+        if (editor.onClose && run) {
+            this.guard(run, editor.onClose);
+        }
+    }
+
+    protected setDirty(run: Running, id: string, dirty: boolean): void {
+        const found = this.current.editors.find(editor => editor.id === id && editor.extension === run.loaded.id);
+        if (found && !!found.dirty !== dirty) {
+            this.update({
+                editors: this.current.editors.map(editor => (editor === found ? { ...editor, dirty, preview: dirty ? false : editor.preview } : editor)),
+            });
+        }
+    }
+
+    connect(conversation: WebExtensionConversation | undefined): void {
+        this.conversation = conversation;
+        if (this.current.cwd !== conversation?.cwd || this.current.sessionId !== conversation?.sessionId) {
+            this.update({ cwd: conversation?.cwd, sessionId: conversation?.sessionId });
+        }
+    }
+
+    setSessionSwitcher(switcher: ((sessionId: string) => Promise<void>) | undefined): void {
+        this.switcher = switcher;
+    }
+
+    emit(event: TaEvent): void {
+        for (const run of this.running.values()) {
+            for (const { type, handler } of run.handlers) {
+                if (type === event.type) {
+                    this.guard(run, () => handler(event));
+                }
+            }
+        }
+    }
+
+    protected async reconcile(): Promise<boolean> {
+        const off = new Set(this.settings.state.settings.builtinsOff);
+        const builtins = this.builtins.filter(builtin => !off.has(builtin.name));
+        // A built-in package turned off stays in the list, for its switch in the settings.
+        const infos = (await this.workbench.packages.listWebExtensions()).filter(info => info.enabled !== false);
+        const wanted = new Map<string, string | undefined>([
+            ...builtins.map(builtin => [WebExtensionUtil.builtinId(builtin.name), undefined] as const),
+            ...infos.map(info => [info.id, info.hash] as const),
+        ]);
+        let changed = false;
+        for (const [id, run] of this.running) {
+            if (!wanted.has(id) || wanted.get(id) !== run.hash) {
+                this.stop(run);
+                this.running.delete(id);
+                changed = true;
+            }
+        }
+        for (const builtin of builtins) {
+            const id = WebExtensionUtil.builtinId(builtin.name);
+            if (!this.running.has(id)) {
+                this.start({ id, name: builtin.name }, builtin.activate);
+                changed = true;
+            }
+        }
+        for (const info of infos) {
+            if (!this.running.has(info.id)) {
+                await this.startPackage(info);
+                changed = true;
+            }
+        }
+        if (changed) {
+            this.publish();
+        }
+        if (!this.restored) {
+            await this.restoreTabs();
+        }
+        return changed;
+    }
+
+    /** The tools open before, behind what is shown; the tab shown before, once it is open again. */
+    protected async restoreTabs(): Promise<void> {
+        const kept = await this.persisted.load(WebViewUtil.TABS);
+        this.restored = true;
+        this.pendingActive = this.current.editors.some(editor => editor.id === kept.active) ? undefined : kept.active;
+        for (const id of kept.views) {
+            this.openView(id, true);
+        }
+        if (kept.active && this.current.editors.some(editor => editor.id === kept.active)) {
+            this.update({ activeEditor: kept.active });
+        }
+        this.keepTabs();
+    }
+
+    protected keepTabs(): void {
+        if (this.restored) {
+            this.persisted.set(WebViewUtil.TABS, WebViewUtil.tabs(this.current.editors, this.pendingActive ?? this.current.activeEditor));
+        }
+    }
+
+    protected async startPackage(info: TaWebExtensionInfo): Promise<void> {
+        const loaded = { id: info.id, name: info.name, info };
+        try {
+            const { code, hash } = await this.workbench.packages.readWebExtension(info.id);
+            this.start(loaded, await WebExtensionUtil.load(code), hash);
+        } catch (error) {
+            this.running.set(info.id, { ...this.record(loaded, info.hash), loaded: { ...loaded, error: WebExtensionUtil.message(error) } });
+        }
+    }
+
+    protected start(loaded: LoadedWebExtension, factory: WebExtensionFactory, hash?: string): void {
+        const run = this.record(loaded, hash);
+        this.running.set(loaded.id, run);
+        try {
+            const dispose = factory(this.api(run));
+            run.dispose = typeof dispose === 'function' ? dispose : undefined;
+            run.started = true;
+        } catch (error) {
+            this.stop(run);
+            run.loaded = { ...loaded, error: WebExtensionUtil.message(error) };
+        }
+    }
+
+    protected stop(run: Running): void {
+        run.stopped = true;
+        if (run.dispose) {
+            this.guard(run, run.dispose);
+        }
+        run.views.clear();
+        run.widgets.clear();
+        run.renderers.clear();
+        run.avatar = undefined;
+        run.tools = [];
+        run.openers = [];
+        run.handlers = [];
+        for (const unsubscribe of run.unsubscribes.splice(0)) {
+            unsubscribe();
+        }
+        this.removeEditors(editor => editor.extension === run.loaded.id);
+    }
+
+    protected openEditor(run: Running, editor: WebEditor, preserveFocus = false, preview = false): void {
+        if (!run.stopped) {
+            this.open({ ...editor, extension: run.loaded.id, preview }, preserveFocus);
+        }
+    }
+
+    open(editor: WebEditorEntry, preserveFocus = false): void {
+        let editors = [...this.current.editors];
+        const index = editors.findIndex(candidate => candidate.id === editor.id);
+        if (index >= 0) {
+            const open = editors[index];
+            // A tab kept stays kept; one dirty stays dirty.
+            editors[index] = { ...editor, preview: !!editor.preview && !!open.preview && !open.dirty, dirty: open.dirty };
+        } else {
+            // A preview takes the place of the preview open, as a single click does in an IDE.
+            const replaced = editor.preview ? editors.find(candidate => candidate.preview && !candidate.dirty) : undefined;
+            if (replaced) {
+                editors[editors.indexOf(replaced)] = editor;
+                const run = this.running.get(replaced.extension);
+                if (replaced.onClose && run) {
+                    this.guard(run, replaced.onClose);
+                }
+            } else {
+                editors = [...editors, editor];
+            }
+        }
+        if (!preserveFocus) {
+            this.pendingActive = undefined;
+            this.update({ editors, activeEditor: editor.id, focus: this.current.focus + 1 });
+        } else if (editor.id === this.pendingActive || this.current.activeEditor === undefined) {
+            if (editor.id === this.pendingActive) {
+                this.pendingActive = undefined;
+            }
+            this.update({ editors, activeEditor: editor.id });
+        } else {
+            this.update({ editors });
+        }
+        this.keepTabs();
+    }
+
+    protected removeEditors(match: (editor: WebExtensionsState['editors'][number]) => boolean): void {
+        const editors = this.current.editors.filter(editor => !match(editor));
+        if (editors.length === this.current.editors.length) {
+            return;
+        }
+        const active = editors.some(editor => editor.id === this.current.activeEditor) ? this.current.activeEditor : editors[editors.length - 1]?.id;
+        this.update({ editors, activeEditor: active });
+        this.keepTabs();
+    }
+
+    protected record(loaded: LoadedWebExtension, hash?: string): Running {
+        return {
+            loaded,
+            hash,
+            started: false,
+            stopped: false,
+            views: new Map(),
+            widgets: new Map(),
+            renderers: new Map(),
+            tools: [],
+            openers: [],
+            handlers: [],
+            unsubscribes: [],
+        };
+    }
+
+    /** The API of one extension: what it registers is its own and goes when it stops. */
+    /** Monaco in the theme and language of the settings, the same component for every extension. */
+    protected readonly codeEditor = (props: CodeEditorProps) => React.createElement(CodeEditor, { ...props, settings: this.settings });
+    protected readonly diffEditor = (props: DiffEditorProps) => React.createElement(DiffEditor, { ...props, settings: this.settings });
+    protected readonly listDirectory = (directory: string) => this.workbench.workspace.listDirectory('.', directory);
+    /** The message box, whose button of the directory lists those of the server. */
+    protected readonly composer = (props: WebComposerProps) =>
+        React.createElement(WebComposer, { ...props, notices: this.notices, listDirectory: this.listDirectory, serverCwd: this.workbench.state.server?.cwd });
+    protected readonly folderPicker = ({ initial, onPick, onClose }: WebFolderPickerProps) =>
+        React.createElement(FolderPicker, {
+            list: this.listDirectory,
+            initial: initial || this.workbench.state.server?.cwd || '.',
+            onPick: async (path: string) => onPick(path),
+            onClose,
+        });
+
+    protected api(run: Running): WebExtensionAPI {
+        const { workbench, settings } = this;
+        const subscribe = (listener: () => void) => this.subscribe(listener);
+        const register = (change: () => void) => {
+            if (!run.stopped) {
+                change();
+                if (run.started) {
+                    this.publish();
+                }
+            }
+        };
+        return {
+            React,
+            get server(): TaServer {
+                return workbench.server;
+            },
+            get workspace(): TaWorkspaceServer {
+                return workbench.workspace;
+            },
+            get terminals(): TaTerminalServer {
+                return workbench.terminals;
+            },
+            get packages(): TaPackageServer {
+                return workbench.packages;
+            },
+            ui: {
+                setWidget: (key, component, options = {}) =>
+                    register(() => (component ? run.widgets.set(key, { component, options }) : run.widgets.delete(key))),
+                notify: (message, type = 'info') => {
+                    if (!run.stopped) {
+                        this.notices.notify(message, { level: type });
+                    }
+                },
+                confirm: (title, message, options) => (run.stopped ? Promise.resolve(false) : this.notices.confirm({ title, message, ...options })),
+                input: (title, placeholder, options) =>
+                    run.stopped ? Promise.resolve(undefined) : this.notices.input({ title, placeholder, value: options?.value }),
+                editor: (title, prefill) => (run.stopped ? Promise.resolve(undefined) : this.notices.input({ title, value: prefill, multiline: true })),
+                get theme() {
+                    return settings.state.theme;
+                },
+                get language() {
+                    return settings.state.language;
+                },
+                openEditor: (editor, options) => this.openEditor(run, editor, options?.preserveFocus === true, options?.preview === true),
+                closeEditor: id => this.removeEditors(editor => editor.id === id && editor.extension === run.loaded.id),
+                pinEditor: id => {
+                    if (this.current.editors.some(editor => editor.id === id && editor.extension === run.loaded.id)) {
+                        this.pinEditor(id);
+                    }
+                },
+                setEditorDirty: (id, dirty) => this.setDirty(run, id, dirty),
+                useActiveEditor: () => {
+                    const active = () => this.current.activeEditor;
+                    return React.useSyncExternalStore(subscribe, active, active);
+                },
+                useCwd: () => {
+                    const cwd = React.useSyncExternalStore(subscribe, () => this.current.cwd);
+                    const fallback = React.useSyncExternalStore(
+                        listener => workbench.subscribe(listener),
+                        () => workbench.state.server?.cwd,
+                    );
+                    return cwd ?? fallback ?? '.';
+                },
+                useSessionId: () => React.useSyncExternalStore(subscribe, () => this.current.sessionId),
+                showView: id => !run.stopped && this.showView(id),
+                useView: id => {
+                    const find = () => this.current.views.find(candidate => candidate.id === id);
+                    const isShown = () => this.isShown(id);
+                    const view = React.useSyncExternalStore(subscribe, find, find);
+                    const shown = React.useSyncExternalStore(subscribe, isShown, isShown);
+                    // The title is read again in another language: a string, so that the same words stay the same value.
+                    const title = view ? WebLabelUtil.text(view.title) : undefined;
+                    return React.useMemo(
+                        () => (view && title !== undefined ? { title, location: view.location, shown, menu: view.menu } : undefined),
+                        [view, title, shown],
+                    );
+                },
+                Avatar: TaAvatar,
+                icons: WEB_ICONS,
+                CodeEditor: this.codeEditor,
+                DiffEditor: this.diffEditor,
+                Composer: this.composer,
+                Markdown,
+                Dialog: WebDialog,
+                FolderPicker: this.folderPicker,
+            },
+            onTerminalData: listener => {
+                if (run.stopped) {
+                    return () => undefined;
+                }
+                const unsubscribe = workbench.onTerminalData((terminalId, data, exitCode) => this.guard(run, () => listener(terminalId, data, exitCode)));
+                run.unsubscribes.push(unsubscribe);
+                return () => {
+                    unsubscribe();
+                    run.unsubscribes = run.unsubscribes.filter(other => other !== unsubscribe);
+                };
+            },
+            storage: { ...this.storage(run), directory: cwd => this.storage(run, cwd) },
+            registerView: (name, view) => register(() => run.views.set(name, view)),
+            registerMessageRenderer: (customType, renderer) => register(() => run.renderers.set(customType, renderer)),
+            registerAvatar: avatar =>
+                register(() => {
+                    run.avatar = avatar;
+                }),
+            registerTool: tool => register(() => run.tools.push(tool)),
+            registerOpener: opener =>
+                register(() =>
+                    run.openers.push(async link => {
+                        // An opener that fails, or of an extension that stopped, leaves the link to the next one.
+                        try {
+                            return !run.stopped && (await opener(link)) === true;
+                        } catch (error) {
+                            console.error(`The web extension ${run.loaded.name} failed:`, error);
+                            return false;
+                        }
+                    }),
+                ),
+            on: (type, handler) => register(() => run.handlers.push({ type, handler: handler as (event: TaEvent) => void })),
+            sendUserMessage: async text => {
+                if (!this.conversation?.send) {
+                    throw new Error('No conversation is shown yet.');
+                }
+                await this.conversation.send(text);
+            },
+            switchSession: async sessionId => {
+                if (!this.switcher) {
+                    throw new Error('The page cannot show another conversation yet.');
+                }
+                await this.switcher(sessionId);
+                this.showPage('');
+            },
+            callHost: <T>(method: string, ...params: unknown[]) => workbench.packages.callPackageHost(run.loaded.name, method, params) as Promise<T>,
+            reloadExtensions: async () => {
+                await this.refresh();
+                await this.conversation?.reload?.();
+            },
+        };
+    }
+
+    /** The data of the package of an extension on the server; of a directory with `cwd`. */
+    protected storage(run: Running, cwd?: string): WebStorage {
+        const { workbench } = this;
+        const { name } = run.loaded;
+        return {
+            // JSON has no undefined: none comes as null.
+            get: async <T>(key: string) => ((await workbench.packages.getExtensionData(name, key, cwd)) ?? undefined) as T | undefined,
+            set: (key, value) => workbench.packages.setExtensionData(name, key, value, cwd),
+            onChange: listener => {
+                if (run.stopped) {
+                    return () => undefined;
+                }
+                const unsubscribe = workbench.onExtensionData((changed, keys, directory) => {
+                    if (changed === name && directory === cwd) {
+                        this.guard(run, () => listener(keys));
+                    }
+                });
+                run.unsubscribes.push(unsubscribe);
+                return () => {
+                    unsubscribe();
+                    run.unsubscribes = run.unsubscribes.filter(other => other !== unsubscribe);
+                };
+            },
+        };
+    }
+
+    protected guard(run: Running, action: () => void): void {
+        try {
+            action();
+        } catch (error) {
+            console.error(`The web extension ${run.loaded.name} failed:`, error);
+        }
+    }
+
+    protected publish(): void {
+        const runs = [...this.running.values()];
+        const renderers: WebExtensionsState['renderers'] = {};
+        const avatars: WebExtensionsState['avatars'] = {};
+        const tools: WebTool[] = [];
+        for (const run of runs) {
+            if (run.avatar) {
+                avatars[run.loaded.name] = run.avatar;
+            }
+            for (const [type, renderer] of run.renderers) {
+                renderers[type] ??= renderer;
+            }
+            for (const tool of run.tools) {
+                if (!tools.some(other => other.name === tool.name)) {
+                    tools.push(tool);
+                }
+            }
+        }
+        this.update({
+            openers: runs.flatMap(run => run.openers),
+            extensions: runs.map(run => run.loaded),
+            views: runs
+                .flatMap(run =>
+                    [...run.views].map(([name, view]) => ({
+                        id: `${run.loaded.name}/${name}`,
+                        extension: run.loaded.id,
+                        title: view.title,
+                        component: view.render,
+                        icon: view.icon,
+                        location: view.location ?? 'page',
+                        order: view.order ?? DEFAULT_ORDER,
+                        head: view.head,
+                        pages: view.pages,
+                        menu: view.menu?.bind(view),
+                    })),
+                )
+                .sort((a, b) => a.order - b.order),
+            widgets: runs.flatMap(run =>
+                [...run.widgets].map(([key, { component, options }]) => ({
+                    id: `${run.loaded.id}/${key}`,
+                    extension: run.loaded.id,
+                    placement: options.placement ?? 'aboveEditor',
+                    title: options.title,
+                    component,
+                })),
+            ),
+            renderers,
+            avatars,
+            tools,
+        });
+    }
+
+    protected update(change: Partial<WebExtensionsState>): void {
+        this.current = { ...this.current, ...change };
+        for (const listener of this.listeners) {
+            listener(this.current);
+        }
+    }
+}