onbuzz 4.2.0 → 4.4.0

package/src/modules/widget/__tests__/eventBus.test.js

@@ -0,0 +1,169 @@
+/**
+ * Tests for the WidgetTool event bus (`widget-changed`).
+ *
+ * The bus is what powers the WebSocket `widget_changed` push that keeps
+ * the frontend artifacts panel in sync regardless of chat-feed
+ * virtualization. Each mutation must emit exactly one event with the
+ * expected changeType and a summary that matches the artifacts panel
+ * shape (same as `_list` rows).
+ */
+
+import { describe, test, expect, beforeEach } from '@jest/globals';
+import { WidgetTool } from '../widgetTool.js';
+import { GalleryStore } from '../galleryStore.js';
+import path from 'path';
+import os from 'os';
+import fs from 'fs/promises';
+
+const LOGGER = { info() {}, warn() {}, error() {}, debug() {} };
+const ctx = (agentId = 'agent-a', overrides = {}) =>
+  ({ agentId, toolConfig: { allowCustomCode: true }, ...overrides });
+
+function makeTool() { return new WidgetTool({}, LOGGER); }
+
+function recorder(tool) {
+  const events = [];
+  tool.events.on('widget-changed', e => events.push(e));
+  return events;
+}
+
+describe('WidgetTool.events — basic shape', () => {
+  test('events bus is an EventEmitter with on/emit', () => {
+    const tool = makeTool();
+    expect(typeof tool.events.on).toBe('function');
+    expect(typeof tool.events.emit).toBe('function');
+  });
+
+  test('summary shape matches _list row shape (key fields)', async () => {
+    const tool = makeTool();
+    const events = recorder(tool);
+    await tool.execute({ action: 'render', kind: 'html', content: '<div>x</div>', widgetId: 'w1' }, ctx());
+    const list = (await tool.execute({ action: 'list' }, ctx())).widgets[0];
+    expect(events).toHaveLength(1);
+    const summary = events[0].summary;
+    // Same keys + values as the artifacts panel cares about.
+    for (const k of ['widgetId', 'kind', 'createdAt', 'updatedAt', 'lastRenderedAt',
+                     'size', 'phishingHits', 'versionCount', 'mainVersionId',
+                     'linkedGalleryTemplateId', 'linkedGalleryVersion', 'divergedFromGallery']) {
+      expect(summary[k]).toEqual(list[k]);
+    }
+  });
+});
+
+describe('emits per mutation type', () => {
+  test('render → "rendered" with agentId, widgetId, summary', async () => {
+    const tool = makeTool();
+    const events = recorder(tool);
+    await tool.execute({ action: 'render', kind: 'html', content: '<i>hi</i>', widgetId: 'w1' }, ctx('a1'));
+    expect(events).toHaveLength(1);
+    expect(events[0]).toMatchObject({
+      agentId: 'a1', widgetId: 'w1', changeType: 'rendered',
+      summary: expect.objectContaining({ widgetId: 'w1', versionCount: 1 }),
+    });
+  });
+
+  test('a second render bumps versionCount in the emitted summary', async () => {
+    const tool = makeTool();
+    const events = recorder(tool);
+    await tool.execute({ action: 'render', kind: 'html', content: '<i>v1</i>', widgetId: 'w1' }, ctx());
+    await tool.execute({ action: 'render', kind: 'html', content: '<i>v2</i>', widgetId: 'w1' }, ctx());
+    expect(events).toHaveLength(2);
+    expect(events[0].summary.versionCount).toBe(1);
+    expect(events[1].summary.versionCount).toBe(2);
+    expect(events[1].changeType).toBe('rendered');
+  });
+
+  test('update → "updated"', async () => {
+    const tool = makeTool();
+    await tool.execute({ action: 'render', kind: 'jsx', content: 'loxia.render(()=>h("div"));', widgetId: 'w1' }, ctx());
+    const events = recorder(tool);
+    await tool.execute({ action: 'update', widgetId: 'w1', props: { x: 1 } }, ctx());
+    expect(events).toHaveLength(1);
+    expect(events[0].changeType).toBe('updated');
+    expect(events[0].widgetId).toBe('w1');
+  });
+
+  test('destroy → "destroyed" with summary=null', async () => {
+    const tool = makeTool();
+    await tool.execute({ action: 'render', kind: 'html', content: '<i/>', widgetId: 'w1' }, ctx());
+    const events = recorder(tool);
+    await tool.execute({ action: 'destroy', widgetId: 'w1' }, ctx());
+    expect(events).toHaveLength(1);
+    expect(events[0]).toMatchObject({ changeType: 'destroyed', widgetId: 'w1', summary: null });
+  });
+
+  test('set-main → "main-set"', async () => {
+    const tool = makeTool();
+    await tool.execute({ action: 'render', kind: 'html', content: '<i>v1</i>', widgetId: 'w1' }, ctx());
+    await tool.execute({ action: 'render', kind: 'html', content: '<i>v2</i>', widgetId: 'w1' }, ctx());
+    const w = tool._widgetsByAgent.get('agent-a').get('w1');
+    const olderVersionId = w.versions[0].versionId;
+    const events = recorder(tool);
+    await tool.execute({ action: 'set-main', widgetId: 'w1', versionId: olderVersionId }, ctx());
+    expect(events).toHaveLength(1);
+    expect(events[0].changeType).toBe('main-set');
+    expect(events[0].summary.mainVersionId).toBe(olderVersionId);
+  });
+});
+
+describe('gallery mutations also emit', () => {
+  let tmp, galleryFile;
+  beforeEach(async () => {
+    tmp = await fs.mkdtemp(path.join(os.tmpdir(), 'widget-events-'));
+    galleryFile = path.join(tmp, 'g.json');
+  });
+
+  test('share-to-gallery → "shared" with templateId in extra fields', async () => {
+    const tool = makeTool();
+    tool.setGalleryStore(new GalleryStore({ filePath: galleryFile, logger: LOGGER, debounceMs: 0 }));
+    await tool.execute({ action: 'render', kind: 'html', content: '<i/>', widgetId: 'w1' }, ctx());
+    const events = recorder(tool);
+    const r = await tool.execute({ action: 'share-to-gallery', widgetId: 'w1', title: 'Hello' }, ctx());
+    expect(r.success).toBe(true);
+    expect(events).toHaveLength(1);
+    expect(events[0]).toMatchObject({
+      changeType: 'shared',
+      widgetId: 'w1',
+      templateId: r.templateId,
+      templateVersion: r.version,
+      summary: expect.objectContaining({ linkedGalleryTemplateId: r.templateId }),
+    });
+  });
+
+  test('unshare-from-gallery → "unshared" for each affected widget', async () => {
+    const tool = makeTool();
+    tool.setGalleryStore(new GalleryStore({ filePath: galleryFile, logger: LOGGER, debounceMs: 0 }));
+    await tool.execute({ action: 'render', kind: 'html', content: '<i/>', widgetId: 'w1' }, ctx());
+    const shared = await tool.execute({ action: 'share-to-gallery', widgetId: 'w1' }, ctx());
+    const events = recorder(tool);
+    await tool.execute({ action: 'unshare-from-gallery', templateId: shared.templateId }, ctx());
+    const unshare = events.find(e => e.changeType === 'unshared');
+    expect(unshare).toBeTruthy();
+    expect(unshare.widgetId).toBe('w1');
+    expect(unshare.templateId).toBe(shared.templateId);
+    expect(unshare.summary.linkedGalleryTemplateId).toBeNull();
+  });
+});
+
+describe('listener errors do not break the tool call', () => {
+  test('a throwing listener is swallowed; mutation still succeeds', async () => {
+    const tool = makeTool();
+    tool.events.on('widget-changed', () => { throw new Error('boom'); });
+    const r = await tool.execute({ action: 'render', kind: 'html', content: '<i/>', widgetId: 'w1' }, ctx());
+    expect(r.success).toBe(true);
+    expect(r.widgetId).toBe('w1');
+  });
+});
+
+describe('multiple subscribers receive the same event', () => {
+  test('two listeners both fire for one mutation', async () => {
+    const tool = makeTool();
+    const a = []; const b = [];
+    tool.events.on('widget-changed', e => a.push(e));
+    tool.events.on('widget-changed', e => b.push(e));
+    await tool.execute({ action: 'render', kind: 'html', content: '<i/>', widgetId: 'w1' }, ctx());
+    expect(a).toHaveLength(1);
+    expect(b).toHaveLength(1);
+    expect(a[0]).toEqual(b[0]);
+  });
+});

package/src/modules/widget/__tests__/galleryActions.test.js

@@ -0,0 +1,290 @@
+/**
+ * WidgetTool gallery actions — share / unshare / list / render-from.
+ *
+ * Tests inject a sandboxed GalleryStore with a temp file path so we
+ * never touch the user's real ~/.loxia/widget-gallery.json.
+ */
+import { describe, test, expect, beforeEach, afterEach } from '@jest/globals';
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import { WidgetTool } from '../widgetTool.js';
+import { GalleryStore } from '../galleryStore.js';
+
+const LOGGER = { info() {}, warn() {}, error() {}, debug() {} };
+const ctx = (overrides = {}) => ({
+  agentId: 'a',
+  agentName: 'Coder',
+  sessionId: 'sess-1',
+  toolConfig: { allowCustomCode: true },
+  ...overrides,
+});
+
+function tempFile() {
+  return path.join(os.tmpdir(), `loxia-gallery-actions-${Date.now()}-${Math.random().toString(36).slice(2, 8)}.json`);
+}
+
+let tool, gallery, filePath;
+
+beforeEach(async () => {
+  filePath = tempFile();
+  gallery = new GalleryStore({ filePath, persistDebounceMs: 0, logger: LOGGER });
+  tool = new WidgetTool({}, LOGGER);
+  tool.setGalleryStore(gallery);
+  // Pre-render a widget for the agent to share.
+  await tool.execute(
+    { action: 'render', kind: 'webcomponent',
+      content: 'class C extends LoxiaElement {}', widgetId: 'calc' },
+    ctx()
+  );
+});
+
+afterEach(async () => {
+  await gallery.flush();
+  try { await fs.unlink(filePath); } catch { /* ok */ }
+});
+
+// ──────────────────────────────────────────────────────────────────────────
+// share-to-gallery
+// ──────────────────────────────────────────────────────────────────────────
+
+describe('share-to-gallery', () => {
+  test('publishes the current widget content as a new gallery template', async () => {
+    const r = await tool.execute(
+      { action: 'share-to-gallery', widgetId: 'calc', title: 'Loan calc', tags: ['finance'] },
+      ctx()
+    );
+    expect(r.success).toBe(true);
+    expect(r.templateId).toMatch(/loan-calc-v1-/);
+    expect(r.version).toBe(1);
+    expect(r.entry.title).toBe('Loan calc');
+    expect(r.entry.tags).toEqual(['finance']);
+    expect(r.entry.sharedBy.agentId).toBe('a');
+    expect(r.entry.sharedBy.agentName).toBe('Coder');
+    // Local widget gets linked
+    expect(r.widget.linkedGalleryTemplateId).toBe(r.templateId);
+    expect(r.widget.linkedGalleryVersion).toBe(1);
+    expect(r.widget.divergedFromGallery).toBe(false);
+  });
+
+  test('rejects missing widgetId', async () => {
+    const r = await tool.execute({ action: 'share-to-gallery' }, ctx());
+    expect(r.success).toBe(false);
+    expect(r.error).toMatch(/widgetId/);
+  });
+
+  test('rejects unknown widget', async () => {
+    const r = await tool.execute(
+      { action: 'share-to-gallery', widgetId: 'unknown' },
+      ctx()
+    );
+    expect(r.success).toBe(false);
+    expect(r.error).toMatch(/Widget not found/);
+  });
+
+  test('subsequent local renders flip divergedFromGallery=true', async () => {
+    await tool.execute(
+      { action: 'share-to-gallery', widgetId: 'calc' },
+      ctx()
+    );
+    // Render new content under the same widgetId — it diverges.
+    await tool.execute(
+      { action: 'render', kind: 'webcomponent',
+        content: 'class C extends LoxiaElement { /* edited */ }',
+        widgetId: 'calc' },
+      ctx()
+    );
+    const list = await tool.execute({ action: 'list' }, ctx());
+    const w = list.widgets.find(w => w.widgetId === 'calc');
+    expect(w.linkedGalleryTemplateId).toBeTruthy();
+    expect(w.divergedFromGallery).toBe(true);
+  });
+
+  test('re-sharing an edited widget creates a NEW template version', async () => {
+    const r1 = await tool.execute(
+      { action: 'share-to-gallery', widgetId: 'calc', title: 'shared' },
+      ctx()
+    );
+    // Edit and re-share
+    await tool.execute(
+      { action: 'render', kind: 'webcomponent', content: 'edited', widgetId: 'calc' },
+      ctx()
+    );
+    const r2 = await tool.execute(
+      { action: 'share-to-gallery', widgetId: 'calc', title: 'shared' },
+      ctx()
+    );
+    expect(r2.version).toBe(2);
+    expect(r2.templateId).not.toBe(r1.templateId);
+    // Re-sharing resets divergedFromGallery (we just synced upstream)
+    expect(r2.widget.divergedFromGallery).toBe(false);
+  });
+});
+
+// ──────────────────────────────────────────────────────────────────────────
+// unshare-from-gallery
+// ──────────────────────────────────────────────────────────────────────────
+
+describe('unshare-from-gallery', () => {
+  test('removes the template from the gallery and clears local linkage', async () => {
+    const sh = await tool.execute({ action: 'share-to-gallery', widgetId: 'calc' }, ctx());
+    const r = await tool.execute(
+      { action: 'unshare-from-gallery', templateId: sh.templateId },
+      ctx()
+    );
+    expect(r.success).toBe(true);
+    expect(r.removed).toBe(true);
+    // Linkage on the local widget is cleared
+    const list = await tool.execute({ action: 'list' }, ctx());
+    const w = list.widgets.find(w => w.widgetId === 'calc');
+    expect(w.linkedGalleryTemplateId).toBeNull();
+  });
+
+  test('idempotent on unknown templateId', async () => {
+    const r = await tool.execute(
+      { action: 'unshare-from-gallery', templateId: 'totally-fake' },
+      ctx()
+    );
+    expect(r.success).toBe(false);
+    expect(r.error).toMatch(/Template not found/);
+  });
+
+  test('rejects missing templateId', async () => {
+    const r = await tool.execute({ action: 'unshare-from-gallery' }, ctx());
+    expect(r.success).toBe(false);
+    expect(r.error).toMatch(/templateId/);
+  });
+});
+
+// ──────────────────────────────────────────────────────────────────────────
+// list-gallery
+// ──────────────────────────────────────────────────────────────────────────
+
+describe('list-gallery', () => {
+  test('returns templates with summaries (no content fetched implicitly)', async () => {
+    await tool.execute({ action: 'share-to-gallery', widgetId: 'calc', tags: ['finance'] }, ctx());
+    const r = await tool.execute({ action: 'list-gallery' }, ctx());
+    expect(r.success).toBe(true);
+    expect(r.count).toBe(1);
+    expect(r.templates[0]).toEqual(expect.objectContaining({
+      templateId: expect.any(String),
+      version: 1,
+      kind: 'webcomponent',
+      tags: ['finance'],
+      sharedBy: expect.objectContaining({ agentId: 'a' }),
+      size: expect.any(Number),
+    }));
+    // size is the content length — useful for triage
+    expect(r.templates[0].size).toBeGreaterThan(0);
+  });
+
+  test('filters by tag', async () => {
+    await tool.execute({ action: 'share-to-gallery', widgetId: 'calc', title: 'a', tags: ['finance'] }, ctx());
+    // Render and share a second widget with a different tag
+    await tool.execute(
+      { action: 'render', kind: 'html', content: '<p>x</p>', widgetId: 'card' },
+      ctx()
+    );
+    await tool.execute({ action: 'share-to-gallery', widgetId: 'card', title: 'b', tags: ['demo'] }, ctx());
+    const finance = await tool.execute({ action: 'list-gallery', tag: 'finance' }, ctx());
+    expect(finance.templates.map(t => t.title)).toEqual(['a']);
+    const demo = await tool.execute({ action: 'list-gallery', tag: 'demo' }, ctx());
+    expect(demo.templates.map(t => t.title)).toEqual(['b']);
+  });
+});
+
+// ──────────────────────────────────────────────────────────────────────────
+// render-from-gallery
+// ──────────────────────────────────────────────────────────────────────────
+
+describe('render-from-gallery', () => {
+  test('mints a new local widget linked to the source template', async () => {
+    const sh = await tool.execute(
+      { action: 'share-to-gallery', widgetId: 'calc', title: 'x' },
+      ctx()
+    );
+    // Use a SECOND agent to render — simulates cross-session reuse
+    const r = await tool.execute(
+      { action: 'render-from-gallery', templateId: sh.templateId, widgetId: 'borrowed' },
+      ctx({ agentId: 'b' })
+    );
+    expect(r.success).toBe(true);
+    expect(r.widgetId).toBe('borrowed');
+    expect(r.templateId).toBe(sh.templateId);
+    expect(r.templateVersion).toBe(1);
+    // Linkage is set; not diverged
+    expect(r.widget.linkedGalleryTemplateId).toBe(sh.templateId);
+    expect(r.widget.linkedGalleryVersion).toBe(1);
+    expect(r.widget.divergedFromGallery).toBe(false);
+    // Per-agent isolation — the original agent's widget is untouched
+    const bList = await tool.execute({ action: 'list' }, ctx({ agentId: 'b' }));
+    expect(bList.widgets.map(w => w.widgetId)).toEqual(['borrowed']);
+  });
+
+  test('merges custom props over template defaultProps', async () => {
+    // Render a widget with default props, share, then render-from with overrides
+    await tool.execute(
+      { action: 'render', kind: 'webcomponent', content: 'class X extends LoxiaElement {}',
+        widgetId: 'calc', props: { rate: 5, term: 12 } },
+      ctx()
+    );
+    const sh = await tool.execute({ action: 'share-to-gallery', widgetId: 'calc' }, ctx());
+    const r = await tool.execute(
+      { action: 'render-from-gallery', templateId: sh.templateId, props: { rate: 7 } },
+      ctx({ agentId: 'b' })
+    );
+    expect(r.success).toBe(true);
+    expect(r.widget.props).toEqual({ rate: 7, term: 12 }); // override merged
+  });
+
+  test('rejects unknown templateId', async () => {
+    const r = await tool.execute(
+      { action: 'render-from-gallery', templateId: 'fake' },
+      ctx()
+    );
+    expect(r.success).toBe(false);
+    expect(r.error).toMatch(/Template not found/);
+  });
+
+  test('disabled-by-default returns disabled:true (does not bypass the toolConfig kill switch)', async () => {
+    const sh = await tool.execute({ action: 'share-to-gallery', widgetId: 'calc' }, ctx());
+    const r = await tool.execute(
+      { action: 'render-from-gallery', templateId: sh.templateId },
+      // No toolConfig — defaults to allowCustomCode=false
+      { agentId: 'no-perms' }
+    );
+    expect(r.success).toBe(false);
+    expect(r.disabled).toBe(true);
+  });
+
+  test('local edits after render-from-gallery flip divergedFromGallery=true', async () => {
+    const sh = await tool.execute({ action: 'share-to-gallery', widgetId: 'calc' }, ctx());
+    await tool.execute(
+      { action: 'render-from-gallery', templateId: sh.templateId, widgetId: 'mine' },
+      ctx({ agentId: 'b' })
+    );
+    // Re-render LOCALLY with new content — should flip diverged
+    await tool.execute(
+      { action: 'render', kind: 'webcomponent', content: 'edited', widgetId: 'mine' },
+      ctx({ agentId: 'b' })
+    );
+    const list = await tool.execute({ action: 'list' }, ctx({ agentId: 'b' }));
+    const w = list.widgets.find(w => w.widgetId === 'mine');
+    expect(w.linkedGalleryTemplateId).toBe(sh.templateId);
+    expect(w.divergedFromGallery).toBe(true);
+  });
+
+  test('bumps the gallery template renderCount', async () => {
+    const sh = await tool.execute({ action: 'share-to-gallery', widgetId: 'calc' }, ctx());
+    await tool.execute(
+      { action: 'render-from-gallery', templateId: sh.templateId },
+      ctx({ agentId: 'b' })
+    );
+    await tool.execute(
+      { action: 'render-from-gallery', templateId: sh.templateId },
+      ctx({ agentId: 'c' })
+    );
+    const list = await tool.execute({ action: 'list-gallery' }, ctx());
+    expect(list.templates[0].renderCount).toBe(2);
+  });
+});