@celljs/ta-web 0.0.0-stage → 4.6.1

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

@@ -0,0 +1,597 @@
+import { describe, expect, it } from 'bun:test';
+import type { TaWebExtensionInfo } from '@celljs/ta-protocol';
+import * as React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { TaNoticesImpl } from '../notices/notices';
+import type { WebExtensionAPI, WebViewInfo } from './web-extension-api';
+import type { BuiltinWebExtension } from './web-extension-protocol';
+import { TaWebExtensionsImpl } from './web-extensions';
+
+const NOTES = `export default function (pi) {
+    pi.ui.setWidget('notes', () => 'notes', { title: 'Notes', placement: 'panel' });
+    pi.ui.setWidget('hint', () => 'hint');
+    pi.registerTool({ name: 'add_note', description: 'Adds a note.', parameters: { type: 'object' }, execute: () => 'added' });
+    pi.registerMessageRenderer('note', () => 'note');
+    pi.registerAvatar(() => 'face');
+    pi.registerOpener(link => link.type === 'file' && link.path.endsWith('.note'));
+    pi.on('agent_end', () => globalThis.ended = (globalThis.ended ?? 0) + 1);
+    return () => globalThis.disposed = (globalThis.disposed ?? 0) + 1;
+}`;
+
+function setup(builtins: BuiltinWebExtension[] = []) {
+    const files = new Map<string, string>([['notes', NOTES]]);
+    const info = (id: string): TaWebExtensionInfo => ({
+        id,
+        name: id,
+        scope: 'user',
+        origin: 'directory',
+        enabled: true,
+        source: id,
+        entry: 'web.js',
+        hash: String(files.get(id)?.length),
+    });
+    const server = {
+        listWebExtensions: async () => [...files.keys()].map(info),
+        readWebExtension: async (id: string) => ({ id, hash: info(id).hash, code: files.get(id) ?? '' }),
+        removeWebExtension: async (id: string) => void files.delete(id),
+    };
+    const settings = { state: { settings: { builtinsOff: [] as string[] }, theme: 'dark', language: 'en-US' } };
+    const notices = new TaNoticesImpl();
+    const extensions = new TaWebExtensionsImpl();
+    const kept = new Map<string, unknown>();
+    const persisted = {
+        get: (spec: { key: string; initial: unknown }) => kept.get(spec.key) ?? spec.initial,
+        load: async (spec: { key: string; initial: unknown }) => kept.get(spec.key) ?? spec.initial,
+        set: (spec: { key: string }, value: unknown) => void kept.set(spec.key, value),
+    };
+    // One fake answers for every service of ta serve.
+    Object.assign(extensions, { workbench: { server, packages: server, workspace: server, terminals: server }, settings, builtins, notices, persisted });
+    Object.assign(globalThis, { ended: 0, disposed: 0 });
+    return { extensions, files, settings, notices, kept };
+}
+
+describe('TaWebExtensionsImpl', () => {
+    it('runs the web extensions of packages, with what they register', async () => {
+        const { extensions } = setup();
+        expect(await extensions.refresh()).toBe(true);
+        const { state } = extensions;
+        expect(state.extensions).toMatchObject([{ id: 'notes', name: 'notes' }]);
+        expect(state.widgets).toMatchObject([
+            { id: 'notes/notes', placement: 'panel', title: 'Notes' },
+            { id: 'notes/hint', placement: 'aboveEditor' },
+        ]);
+        expect(state.tools.map(tool => tool.name)).toEqual(['add_note']);
+        expect(state.openers).toHaveLength(1);
+        expect(await state.openers[0]({ type: 'file', cwd: '/w', path: 'a.note' })).toBe(true);
+        expect(await state.openers[0]({ type: 'url', url: 'https://x.dev' })).toBe(false);
+        expect(Object.keys(state.renderers)).toEqual(['note']);
+        // By the name of the extension: the group of the sessions of its package.
+        expect(Object.keys(state.avatars)).toEqual(['notes']);
+        extensions.emit({ type: 'agent_end', messages: [] } as never);
+        expect((globalThis as { ended?: number }).ended).toBe(1);
+        expect(await extensions.refresh()).toBe(false);
+    });
+
+    it('does not run the web extension of a built-in package that is turned off', async () => {
+        const { extensions } = setup();
+        const server = (extensions as unknown as { workbench: { server: { listWebExtensions(): Promise<TaWebExtensionInfo[]> } } }).workbench.server;
+        const list = server.listWebExtensions;
+        server.listWebExtensions = async () => (await list()).map(info => ({ ...info, origin: 'builtin', enabled: false }));
+        await extensions.refresh();
+        expect(extensions.state.extensions).toEqual([]);
+        server.listWebExtensions = list;
+        expect(await extensions.refresh()).toBe(true);
+        expect(extensions.state.extensions.map(extension => extension.name)).toEqual(['notes']);
+    });
+
+    it('runs a changed file again and stops a removed one', async () => {
+        const { extensions, files } = setup();
+        await extensions.refresh();
+        files.set('notes', NOTES.replace("'Notes'", "'My notes'"));
+        expect(await extensions.refresh()).toBe(true);
+        expect((globalThis as { disposed?: number }).disposed).toBe(1);
+        expect(extensions.state.widgets).toMatchObject([{ title: 'My notes' }, { id: 'notes/hint' }]);
+        await extensions.remove('notes');
+        expect((globalThis as { disposed?: number }).disposed).toBe(2);
+        expect(extensions.state).toMatchObject({ extensions: [], widgets: [], tools: [], openers: [], renderers: {}, avatars: {} });
+    });
+
+    it('keeps the error of an extension that fails, until its file changes', async () => {
+        const { extensions, files } = setup();
+        files.set('broken', 'export default function () { throw new Error("no luck"); }');
+        files.set('wrong', 'export const x = 1;');
+        await extensions.refresh();
+        expect(extensions.state.extensions.map(({ name, error }) => [name, error])).toEqual([
+            ['notes', undefined],
+            ['broken', 'no luck'],
+            ['wrong', 'A web extension exports a function as its default export.'],
+        ]);
+        expect(await extensions.refresh()).toBe(false);
+    });
+
+    it('runs the built-ins the settings turn on', async () => {
+        let api: WebExtensionAPI | undefined;
+        const builtin: BuiltinWebExtension = {
+            name: 'clock',
+            title: 'ta.settings',
+            description: 'ta.settings',
+            activate: pi => {
+                api = pi;
+                pi.registerView('clock', { title: 'Clock', render: () => null, icon: () => null });
+            },
+        };
+        const { extensions, settings } = setup([builtin]);
+        settings.state.settings.builtinsOff = ['clock'];
+        await extensions.refresh();
+        expect(extensions.state.views).toEqual([]);
+        settings.state.settings.builtinsOff = [];
+        await extensions.refresh();
+        expect(extensions.state.views).toMatchObject([{ id: 'clock/clock', title: 'Clock', icon: expect.any(Function) }]);
+        expect(api?.ui.theme).toBe('dark');
+        settings.state.settings.builtinsOff = ['clock'];
+        await extensions.refresh();
+        expect(extensions.state.views).toEqual([]);
+        // An extension that stopped registers nothing more.
+        api?.ui.setWidget('late', () => null);
+        expect(extensions.state.widgets.filter(widget => widget.id.includes('late'))).toEqual([]);
+    });
+
+    it('sends to the conversation shown, and shows notices and questions on the page', async () => {
+        let api: WebExtensionAPI | undefined;
+        const { extensions, notices } = setup([
+            {
+                name: 'probe',
+                title: 'ta.settings',
+                description: 'ta.settings',
+                activate: pi => {
+                    api = pi;
+                },
+            },
+        ]);
+        Object.assign(extensions, { settings: { state: { settings: { builtinsOff: [] }, theme: 'light', language: 'zh-CN' } } });
+        await extensions.refresh();
+        await expect(api!.sendUserMessage('hi')).rejects.toThrow('No conversation');
+        // A new conversation has a directory, and nothing to send to until its first message.
+        extensions.connect({ cwd: '/work' });
+        expect(extensions.state.cwd).toBe('/work');
+        await expect(api!.sendUserMessage('hi')).rejects.toThrow('No conversation');
+        expect(api!.ui.FolderPicker).toBeFunction();
+        const sent: string[] = [];
+        extensions.connect({ send: async text => void sent.push(text) });
+        await api!.sendUserMessage('/notes add milk');
+        expect(sent).toEqual(['/notes add milk']);
+        await expect(api!.switchSession('s2')).rejects.toThrow('cannot show');
+        const shown: string[] = [];
+        extensions.setSessionSwitcher(async sessionId => {
+            shown.push(sessionId);
+            extensions.connect({ send: async () => undefined, sessionId });
+        });
+        await api!.switchSession('s2');
+        expect(shown).toEqual(['s2']);
+        expect(extensions.state.sessionId).toBe('s2');
+        api!.ui.notify('saved');
+        api!.ui.notify('failed', 'error');
+        expect(notices.state.notices).toMatchObject([
+            { message: 'saved', level: 'info' },
+            { message: 'failed', level: 'error' },
+        ]);
+        const asked = api!.ui.confirm('Delete it?', 'It cannot be undone.');
+        expect(notices.state.confirm).toMatchObject({ title: 'Delete it?', message: 'It cannot be undone.' });
+        notices.answer(notices.state.confirm!.id, true);
+        expect(await asked).toBe(true);
+        const named = api!.ui.input('Name', 'A name', { value: 'Ta' });
+        expect(notices.state.input).toMatchObject({ title: 'Name', placeholder: 'A name', value: 'Ta' });
+        notices.answerInput(notices.state.input!.id, 'Rex');
+        expect(await named).toBe('Rex');
+        const role = api!.ui.editor('Role', 'Writes tests.');
+        expect(notices.state.input).toMatchObject({ title: 'Role', value: 'Writes tests.', multiline: true });
+        notices.answerInput(notices.state.input!.id, undefined);
+        expect(await role).toBeUndefined();
+    });
+    it('sorts views by location and order, and keeps editors until their extension stops', async () => {
+        const closed: string[] = [];
+        const builtin: BuiltinWebExtension = {
+            name: 'files',
+            title: 'ta.settings' as never,
+            description: 'ta.settings' as never,
+            activate: pi => {
+                pi.registerView('search', { title: 'Search', render: () => null, location: 'sidebar', order: 20 });
+                pi.registerView('explorer', { title: 'Explorer', render: () => null, location: 'sidebar', order: 10 });
+                pi.registerView('page', { title: 'Page', render: () => null });
+                pi.ui.openEditor({ id: 'a', title: 'a.ts', render: () => null, onClose: () => closed.push('a') });
+                pi.ui.openEditor({ id: 'b', title: 'b.ts', render: () => null, onClose: () => closed.push('b') });
+                pi.ui.openEditor({ id: 'a', title: 'a.ts', render: () => null, onClose: () => closed.push('a') });
+                return undefined;
+            },
+        };
+        const { extensions, settings } = setup([builtin]);
+        settings.state.settings.builtinsOff = [];
+        await extensions.refresh();
+        expect(extensions.state.views.map(view => [view.id, view.location])).toEqual([
+            ['files/explorer', 'sidebar'],
+            ['files/search', 'sidebar'],
+            ['files/page', 'page'],
+        ]);
+        expect(extensions.state.editors.map(editor => editor.id)).toEqual(['a', 'b']);
+        expect(extensions.state.activeEditor).toBe('a');
+        extensions.showEditor('b');
+        extensions.closeEditor('b');
+        expect(closed).toEqual(['b']);
+        expect(extensions.state.activeEditor).toBe('a');
+        settings.state.settings.builtinsOff = ['files'];
+        await extensions.refresh();
+        expect(extensions.state.editors).toEqual([]);
+        expect(closed).toEqual(['b']);
+    });
+
+    it('replaces a preview tab with the next one, keeps pinned and dirty tabs, and asks before closing a dirty one', async () => {
+        let api: WebExtensionAPI | undefined;
+        const closed: string[] = [];
+        const builtin: BuiltinWebExtension = {
+            name: 'files',
+            title: 'ta.settings' as never,
+            description: 'ta.settings' as never,
+            activate: pi => {
+                api = pi;
+                return undefined;
+            },
+        };
+        const { extensions, settings } = setup([builtin]);
+        settings.state.settings.builtinsOff = [];
+        const answers: boolean[] = [];
+        Object.assign(extensions, { notices: { confirm: async () => answers.shift() ?? false } });
+        await extensions.refresh();
+        const open = (id: string, preview: boolean) => api!.ui.openEditor({ id, title: id, render: () => null, onClose: () => closed.push(id) }, { preview });
+        const tabs = () => extensions.state.editors.map(editor => `${editor.id}${editor.preview ? '~' : ''}${editor.dirty ? '*' : ''}`);
+        open('a', true);
+        open('b', true);
+        // The preview takes the place of the one before, which is closed.
+        expect(tabs()).toEqual(['b~']);
+        expect(closed).toEqual(['a']);
+        // Opened again without preview, or pinned: it stays.
+        open('b', false);
+        open('c', true);
+        expect(tabs()).toEqual(['b', 'c~']);
+        extensions.pinEditor('c');
+        open('d', true);
+        expect(tabs()).toEqual(['b', 'c', 'd~']);
+        // A dirty tab is pinned too.
+        api!.ui.setEditorDirty('d', true);
+        open('e', true);
+        expect(tabs()).toEqual(['b', 'c', 'd*', 'e~']);
+        const Probe = () => {
+            seen = api!.ui.useActiveEditor();
+            return null;
+        };
+        let seen: string | undefined;
+        renderToStaticMarkup(React.createElement(Probe));
+        expect(seen).toBe('e');
+        // Closing a dirty tab asks: no keeps it, yes closes it.
+        answers.push(false);
+        await extensions.closeEditor('d');
+        expect(tabs()).toContain('d*');
+        answers.push(true);
+        await extensions.closeEditor('d');
+        expect(tabs()).toEqual(['b', 'c', 'e~']);
+        expect(closed).toEqual(['a', 'd']);
+        expect(api!.ui.DiffEditor).toBeFunction();
+    });
+
+    it('closes tabs at once, asking once for those that are dirty', async () => {
+        let api: WebExtensionAPI | undefined;
+        const closed: string[] = [];
+        const builtin: BuiltinWebExtension = {
+            name: 'files',
+            title: 'ta.settings' as never,
+            description: 'ta.settings' as never,
+            activate: pi => {
+                api = pi;
+                return undefined;
+            },
+        };
+        const { extensions } = setup([builtin]);
+        const asked: string[] = [];
+        const answers: boolean[] = [];
+        Object.assign(extensions, {
+            notices: {
+                confirm: async ({ title }: { title: string }) => {
+                    asked.push(title);
+                    return answers.shift() ?? false;
+                },
+            },
+        });
+        await extensions.refresh();
+        for (const id of ['a', 'b', 'c', 'd']) {
+            api!.ui.openEditor({ id, title: id, render: () => null, onClose: () => closed.push(id) });
+        }
+        const tabs = () => extensions.state.editors.map(editor => editor.id);
+        // None dirty: no question.
+        await extensions.closeEditors(['a']);
+        expect(tabs()).toEqual(['b', 'c', 'd']);
+        expect(asked).toEqual([]);
+        api!.ui.setEditorDirty('b', true);
+        api!.ui.setEditorDirty('c', true);
+        // One question for both; no keeps all of them.
+        answers.push(false);
+        await extensions.closeEditors(['b', 'c', 'd']);
+        expect(asked).toEqual(['Close 2 tabs without saving?']);
+        expect(tabs()).toEqual(['b', 'c', 'd']);
+        answers.push(true);
+        await extensions.closeEditors(['b', 'c', 'd', 'missing']);
+        expect(tabs()).toEqual([]);
+        expect(closed).toEqual(['a', 'b', 'c', 'd']);
+    });
+
+    it('opens a panel view as a tab of the workbench, once', async () => {
+        const Terminal = () => null;
+        const builtin: BuiltinWebExtension = {
+            name: 'tools',
+            title: 'ta.settings' as never,
+            description: 'ta.settings' as never,
+            activate: pi => {
+                pi.registerView('terminal', { title: 'Terminal', render: Terminal, location: 'panel' });
+                pi.registerView('page', { title: 'Page', render: () => null });
+                return undefined;
+            },
+        };
+        const { extensions, settings } = setup([builtin]);
+        settings.state.settings.builtinsOff = [];
+        await extensions.refresh();
+        extensions.openView('tools/page');
+        expect(extensions.state.editors).toEqual([]);
+        extensions.openView('tools/terminal');
+        extensions.openView('tools/terminal');
+        expect(extensions.state.editors).toMatchObject([{ id: 'view:tools/terminal', title: 'Terminal', render: Terminal, extension: 'builtin:tools' }]);
+        expect(extensions.state.activeEditor).toBe('view:tools/terminal');
+        extensions.open({ id: 'view:ta/cards', extension: 'ta', title: 'Cards', render: () => null });
+        expect(extensions.state.activeEditor).toBe('view:ta/cards');
+        settings.state.settings.builtinsOff = ['tools'];
+        await extensions.refresh();
+        expect(extensions.state.editors.map(editor => editor.id)).toEqual(['view:ta/cards']);
+    });
+
+    it('shows a view of another extension by its id, and tells whether it is shown', async () => {
+        let api: WebExtensionAPI | undefined;
+        const builtin: BuiltinWebExtension = {
+            name: 'side',
+            title: 'ta.settings' as never,
+            description: 'ta.settings' as never,
+            activate: pi => {
+                api = pi;
+                pi.registerView('list', { title: 'List', render: () => null, location: 'sidebar', pages: ['side/room'] });
+                pi.registerView('room', {
+                    title: () => 'Room',
+                    render: () => null,
+                    head: () => null,
+                    menu: () => [[{ key: 'rename', label: 'Rename', run: () => undefined }]],
+                });
+                pi.registerView('tool', { title: 'Tool', render: () => null, location: 'panel' });
+                return undefined;
+            },
+        };
+        const { extensions, settings } = setup([builtin]);
+        settings.state.settings.builtinsOff = [];
+        await extensions.refresh();
+        expect(extensions.state.views.find(view => view.id === 'side/list')?.pages).toEqual(['side/room']);
+        expect(extensions.state.views.find(view => view.id === 'side/room')?.head).toBeFunction();
+        const shown = () => {
+            let seen: unknown;
+            const Probe = () => {
+                seen = api!.ui.useView('side/room');
+                return null;
+            };
+            renderToStaticMarkup(React.createElement(Probe));
+            return seen;
+        };
+        expect(shown()).toMatchObject({ title: 'Room', location: 'page', shown: false });
+        expect((shown() as WebViewInfo).menu?.().map(section => section.map(item => item.key))).toEqual([['rename']]);
+        api!.ui.showView('side/room');
+        expect(extensions.state.page).toBe('side/room');
+        expect(shown()).toMatchObject({ title: 'Room', location: 'page', shown: true });
+        api!.ui.showView('side/tool');
+        expect(extensions.state.activeEditor).toBe('view:side/tool');
+        api!.ui.showView('nobody/nothing');
+        expect(extensions.state.page).toBe('side/room');
+        api!.ui.showView('');
+        expect(extensions.state.page).toBe('');
+        api!.ui.showView('side/room');
+        // Another conversation shown: the page goes.
+        extensions.setSessionSwitcher(async () => undefined);
+        await api!.switchSession('s2');
+        expect(extensions.state.page).toBe('');
+        expect(api!.ui.Composer).toBeFunction();
+        expect(api!.ui.Markdown).toBeFunction();
+        expect(api!.ui.Dialog).toBeFunction();
+    });
+
+    it('keeps the data of a package on the server, under its name', async () => {
+        const { extensions } = setup();
+        const data = new Map<string, unknown>();
+        const holder: { api?: WebExtensionAPI } = {};
+        Object.assign((extensions as unknown as { workbench: { server: object } }).workbench.server, {
+            getExtensionData: async (name: string, key: string) => data.get(`${name}/${key}`),
+            setExtensionData: async (name: string, key: string, value: unknown) => void data.set(`${name}/${key}`, value),
+        });
+        Object.assign(extensions, {
+            builtins: [
+                {
+                    name: 'keeper',
+                    title: 'ta.settings',
+                    description: 'ta.settings',
+                    activate: (pi: WebExtensionAPI) => {
+                        holder.api = pi;
+                        return undefined;
+                    },
+                },
+            ],
+            settings: { state: { settings: { builtinsOff: [] }, theme: 'dark', language: 'en-US' } },
+        });
+        await extensions.refresh();
+        const api = holder.api as WebExtensionAPI;
+        await api.storage.set('channels', [{ name: 'general' }]);
+        expect(await api.storage.get<{ name: string }[]>('channels')).toEqual([{ name: 'general' }]);
+        expect([...data.keys()]).toEqual(['keeper/channels']);
+        expect(Object.keys(api.ui.icons)).toContain('Files');
+    });
+    it('passes the output of terminals to an extension until it unloads', async () => {
+        const { extensions, settings } = setup();
+        const listeners = new Set<(terminalId: string, data: string, exitCode?: number) => void>();
+        Object.assign((extensions as unknown as { workbench: object }).workbench, {
+            onTerminalData: (listener: (terminalId: string, data: string, exitCode?: number) => void) => {
+                listeners.add(listener);
+                return () => listeners.delete(listener);
+            },
+        });
+        const seen: string[] = [];
+        Object.assign(extensions, {
+            builtins: [
+                {
+                    name: 'shell',
+                    title: 'ta.settings',
+                    description: 'ta.settings',
+                    activate: (pi: WebExtensionAPI) => {
+                        pi.onTerminalData((terminalId, data, exitCode) => seen.push(`${terminalId}:${data}:${exitCode}`));
+                        return undefined;
+                    },
+                },
+            ],
+        });
+        settings.state.settings.builtinsOff = [];
+        await extensions.refresh();
+        for (const listener of listeners) {
+            listener('t1', 'hi', undefined);
+            listener('t1', '', 0);
+        }
+        expect(seen).toEqual(['t1:hi:undefined', 't1::0']);
+        settings.state.settings.builtinsOff = ['shell'];
+        await extensions.refresh();
+        expect(listeners.size).toBe(0);
+    });
+    it('opens again the tools of the workbench open before, behind what is shown, and keeps what opens or closes', async () => {
+        const { extensions, settings, kept } = setup();
+        kept.set('workbench', { views: ['tools/terminal', 'tools/gone'], active: 'file:a' });
+        let reopen: (() => void) | undefined;
+        Object.assign(extensions, {
+            builtins: [
+                {
+                    name: 'tools',
+                    title: 'ta.settings',
+                    description: 'ta.settings',
+                    activate: (pi: WebExtensionAPI) => {
+                        pi.registerView('explorer', { title: 'Files', render: () => null, location: 'panel' });
+                        pi.registerView('terminal', { title: 'Terminal', render: () => null, location: 'panel' });
+                        reopen = () => pi.ui.openEditor({ id: 'file:a', title: 'a.ts', render: () => null }, { preserveFocus: true });
+                        return undefined;
+                    },
+                },
+            ],
+        });
+        settings.state.settings.builtinsOff = [];
+        await extensions.refresh();
+        // Opened again without being put in front: the workbench is not revealed for it.
+        expect(extensions.state.editors.map(editor => editor.id)).toEqual(['view:tools/terminal']);
+        expect(extensions.state.focus).toBe(0);
+        expect(kept.get('workbench')).toEqual({ views: ['tools/terminal'], active: 'file:a' });
+        // The tab shown before comes in front once its extension opens it again.
+        reopen?.();
+        expect(extensions.state.activeEditor).toBe('file:a');
+        expect(extensions.state.focus).toBe(0);
+        extensions.openView('tools/explorer');
+        expect(extensions.state.focus).toBe(1);
+        expect(kept.get('workbench')).toEqual({ views: ['tools/terminal', 'tools/explorer'], active: 'view:tools/explorer' });
+        extensions.closeEditor('view:tools/terminal');
+        expect(kept.get('workbench')).toEqual({ views: ['tools/explorer'], active: 'view:tools/explorer' });
+        // Loading again does not open again what was closed.
+        expect(await extensions.refresh()).toBe(false);
+        expect(extensions.state.editors.map(editor => editor.id)).toEqual(['file:a', 'view:tools/explorer']);
+    });
+
+    it('keeps the data of a directory apart, and tells the extension only of its own', async () => {
+        const { extensions, settings } = setup();
+        const listeners = new Set<(name: string, keys: string[], cwd?: string) => void>();
+        const calls: unknown[][] = [];
+        Object.assign((extensions as unknown as { workbench: { server: object } }).workbench.server, {
+            getExtensionData: async (...args: unknown[]) => {
+                calls.push(['get', ...args]);
+                return null;
+            },
+            setExtensionData: async (...args: unknown[]) => void calls.push(['set', ...args]),
+        });
+        Object.assign((extensions as unknown as { workbench: object }).workbench, {
+            onExtensionData: (listener: (name: string, keys: string[], cwd?: string) => void) => {
+                listeners.add(listener);
+                return () => listeners.delete(listener);
+            },
+        });
+        const seen: string[] = [];
+        let api: WebExtensionAPI | undefined;
+        Object.assign(extensions, {
+            builtins: [
+                {
+                    name: 'keeper',
+                    title: 'ta.settings',
+                    description: 'ta.settings',
+                    activate: (pi: WebExtensionAPI) => {
+                        api = pi;
+                        pi.storage.onChange(keys => seen.push(`package:${keys}`));
+                        pi.storage.directory('/work').onChange(keys => seen.push(`/work:${keys}`));
+                        return undefined;
+                    },
+                },
+            ],
+        });
+        settings.state.settings.builtinsOff = [];
+        await extensions.refresh();
+        // None is undefined, as for any key never set.
+        expect(await api?.storage.directory('/work').get('open')).toBeUndefined();
+        await api?.storage.directory('/work').set('open', ['src']);
+        await api?.storage.set('team', 1);
+        expect(calls).toEqual([
+            ['get', 'keeper', 'open', '/work'],
+            ['set', 'keeper', 'open', ['src'], '/work'],
+            ['set', 'keeper', 'team', 1, undefined],
+        ]);
+        for (const listener of listeners) {
+            listener('keeper', ['open'], '/work');
+            listener('keeper', ['open'], '/else');
+            listener('keeper', ['team']);
+            listener('other', ['open'], '/work');
+        }
+        expect(seen.sort()).toEqual(['/work:open', 'package:team']);
+    });
+
+    it('tells an extension which keys of its data changed, until it unloads', async () => {
+        const { extensions, settings } = setup();
+        const listeners = new Set<(name: string, keys: string[]) => void>();
+        Object.assign((extensions as unknown as { workbench: object }).workbench, {
+            onExtensionData: (listener: (name: string, keys: string[]) => void) => {
+                listeners.add(listener);
+                return () => listeners.delete(listener);
+            },
+        });
+        const seen: string[][] = [];
+        Object.assign(extensions, {
+            builtins: [
+                {
+                    name: 'keeper',
+                    title: 'ta.settings',
+                    description: 'ta.settings',
+                    activate: (pi: WebExtensionAPI) => {
+                        pi.storage.onChange(keys => seen.push(keys));
+                        return undefined;
+                    },
+                },
+            ],
+        });
+        settings.state.settings.builtinsOff = [];
+        await extensions.refresh();
+        for (const listener of listeners) {
+            listener('keeper', ['team', 'messages/a']);
+            listener('other', ['team']);
+        }
+        expect(seen).toEqual([['team', 'messages/a']]);
+        settings.state.settings.builtinsOff = ['keeper'];
+        await extensions.refresh();
+        expect(listeners.size).toBe(0);
+    });
+});