Jeffrey Smith
115004a3ab
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
507 lines
19 KiB
JavaScript
507 lines
19 KiB
JavaScript
// ==========================================
|
||
// Chat Switchboard – Extension System
|
||
// ==========================================
|
||
// Loader, registry, scoped context, and renderer pipeline.
|
||
// Tier 0 (browser) extensions register here. The ctx object
|
||
// enforces permissions declared in the manifest.
|
||
//
|
||
// Usage:
|
||
// Extensions.register({
|
||
// id: 'my-ext',
|
||
// init(ctx) { ctx.renderers.register(...); },
|
||
// destroy() { /* cleanup */ }
|
||
// });
|
||
//
|
||
// Load order: events.js → extensions.js → [ext scripts] → api.js → app.js
|
||
// ==========================================
|
||
//
|
||
// Exports: window.Extensions
|
||
|
||
|
||
const Extensions = {
|
||
|
||
// ── State ────────────────────────────────
|
||
_registry: new Map(), // extId → { def, ctx, instance }
|
||
_renderers: [], // sorted by priority
|
||
_toolHandlers: new Map(), // toolName → { extId, handler }
|
||
_loaded: false,
|
||
_manifests: [], // loaded from server
|
||
|
||
// ── Script Loading ────────────────────────
|
||
|
||
/**
|
||
* Fetch enabled browser extensions from the server and inject their scripts.
|
||
* Called before app init so extensions can register before initAll().
|
||
*/
|
||
async loadAll() {
|
||
try {
|
||
const resp = await API._get('/api/v1/extensions?tier=browser');
|
||
const exts = resp.data || [];
|
||
this._manifests = exts;
|
||
|
||
for (const ext of exts) {
|
||
// Parse manifest to check for _script (inline) or entry (file)
|
||
const manifest = ext.manifest || {};
|
||
const extId = ext.id;
|
||
|
||
if (manifest._script) {
|
||
// Inject script tag pointing at the asset endpoint
|
||
await this._injectScript(extId, `${window.__BASE__ || ''}/api/v1/extensions/${extId}/assets/main.js`);
|
||
} else if (manifest.entry) {
|
||
await this._injectScript(extId, `${window.__BASE__ || ''}/api/v1/extensions/${extId}/assets/${manifest.entry}`);
|
||
}
|
||
}
|
||
console.log(`[Extensions] Loaded ${exts.length} browser extension(s)`);
|
||
} catch (e) {
|
||
console.warn('[Extensions] Failed to load extensions:', e.message || e);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* Inject a script tag and wait for it to load.
|
||
*/
|
||
_injectScript(extId, src) {
|
||
return new Promise((resolve) => {
|
||
const script = document.createElement('script');
|
||
script.src = src;
|
||
script.dataset.extension = extId;
|
||
script.onload = () => { resolve(); };
|
||
script.onerror = () => {
|
||
console.error(`[Extensions] Failed to load script for ${extId}: ${src}`);
|
||
resolve(); // Don't block other extensions
|
||
};
|
||
document.head.appendChild(script);
|
||
});
|
||
},
|
||
|
||
// ── Registration ─────────────────────────
|
||
|
||
/**
|
||
* Register a browser extension. Called by extension scripts.
|
||
* @param {object} def — { id, init(ctx), destroy() }
|
||
*/
|
||
register(def) {
|
||
if (!def || !def.id) {
|
||
console.error('[Extensions] register() requires an id');
|
||
return;
|
||
}
|
||
if (this._registry.has(def.id)) {
|
||
console.warn(`[Extensions] ${def.id} already registered, skipping`);
|
||
return;
|
||
}
|
||
|
||
const entry = { def, ctx: null, instance: null, active: false };
|
||
this._registry.set(def.id, entry);
|
||
console.log(`[Extensions] Registered: ${def.id}`);
|
||
},
|
||
|
||
// ── Lifecycle ────────────────────────────
|
||
|
||
/**
|
||
* Initialize all registered extensions. Called once after app startup.
|
||
* Builds scoped ctx for each and calls init().
|
||
*/
|
||
async initAll() {
|
||
// Set up the tool bridge: listen for tool.call.* events from server
|
||
this._setupToolBridge();
|
||
|
||
for (const [id, entry] of this._registry) {
|
||
if (entry.active) continue;
|
||
try {
|
||
entry.ctx = this._buildContext(id, entry.def);
|
||
if (typeof entry.def.init === 'function') {
|
||
await entry.def.init.call(entry.def, entry.ctx);
|
||
}
|
||
entry.active = true;
|
||
console.log(`[Extensions] Initialized: ${id}`);
|
||
} catch (e) {
|
||
console.error(`[Extensions] Failed to init ${id}:`, e);
|
||
}
|
||
}
|
||
this._loaded = true;
|
||
Events.emit('extension.loaded', { count: this._registry.size }, { localOnly: true });
|
||
},
|
||
|
||
/**
|
||
* Destroy all extensions (logout/cleanup).
|
||
*/
|
||
destroyAll() {
|
||
for (const [id, entry] of this._registry) {
|
||
if (!entry.active) continue;
|
||
try {
|
||
if (typeof entry.def.destroy === 'function') {
|
||
entry.def.destroy.call(entry.def);
|
||
}
|
||
} catch (e) {
|
||
console.error(`[Extensions] Failed to destroy ${id}:`, e);
|
||
}
|
||
entry.active = false;
|
||
entry.ctx = null;
|
||
}
|
||
this._renderers = [];
|
||
this._loaded = false;
|
||
},
|
||
|
||
// ── Context Builder ──────────────────────
|
||
|
||
/**
|
||
* Build a scoped context object for an extension.
|
||
* Each extension gets its own ctx with permission-aware proxies.
|
||
*/
|
||
_buildContext(extId, def) {
|
||
const manifest = def.manifest || {};
|
||
const permissions = new Set(manifest.permissions || []);
|
||
|
||
return {
|
||
// Extension identity
|
||
id: extId,
|
||
|
||
// Event bus (scoped — could filter by permissions later)
|
||
events: {
|
||
on: (label, fn) => Events.on(label, fn),
|
||
once: (label, fn) => Events.once(label, fn),
|
||
off: (label, fn) => Events.off(label, fn),
|
||
emit: (label, payload) => Events.emit(label, payload, { localOnly: true }),
|
||
},
|
||
|
||
// Scoped localStorage namespace
|
||
storage: {
|
||
get: (key) => {
|
||
try {
|
||
return JSON.parse(localStorage.getItem(`ext::${extId}::${key}`));
|
||
} catch { return null; }
|
||
},
|
||
set: (key, value) => {
|
||
localStorage.setItem(`ext::${extId}::${key}`, JSON.stringify(value));
|
||
},
|
||
remove: (key) => {
|
||
localStorage.removeItem(`ext::${extId}::${key}`);
|
||
},
|
||
},
|
||
|
||
// Extension settings (read-only, from manifest defaults + user overrides)
|
||
settings: Object.freeze(Object.assign(
|
||
{},
|
||
Extensions._extractDefaults(manifest.settings || {}),
|
||
Extensions._getUserSettings(extId)
|
||
)),
|
||
|
||
// Renderer registration
|
||
renderers: {
|
||
register: (name, opts) => Extensions._registerRenderer(extId, name, opts),
|
||
},
|
||
|
||
// Tool registration (browser tool bridge)
|
||
tools: {
|
||
handle: (name, fn) => {
|
||
Extensions._toolHandlers.set(name, { extId, handler: fn });
|
||
console.log(`[Extensions] Tool registered: ${extId}:${name}`);
|
||
},
|
||
},
|
||
|
||
// UI primitives — safe wrappers around primary UI components.
|
||
// Extensions use these instead of reaching into globals directly.
|
||
ui: {
|
||
/** Show a toast notification. type: 'success' | 'error' | 'warning' | 'info' */
|
||
toast(msg, type = 'success') {
|
||
if (typeof UI !== 'undefined' && UI.toast) UI.toast(msg, type);
|
||
},
|
||
|
||
/** Open the side-panel preview with arbitrary HTML content. */
|
||
openPreview(html) {
|
||
const frame = document.getElementById('previewFrame');
|
||
const empty = document.getElementById('previewEmpty');
|
||
if (frame) {
|
||
frame.srcdoc = html;
|
||
frame.style.display = '';
|
||
}
|
||
if (empty) empty.style.display = 'none';
|
||
if (typeof PanelRegistry !== 'undefined') {
|
||
PanelRegistry.open('preview');
|
||
PanelRegistry.refreshActions();
|
||
}
|
||
},
|
||
|
||
/** Is the current theme dark? */
|
||
isDark() {
|
||
return document.body.classList.contains('dark-theme') ||
|
||
window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||
},
|
||
|
||
/** Is the viewport at mobile width (≤ 768px)? */
|
||
isMobile() {
|
||
return window.innerWidth <= 768;
|
||
},
|
||
|
||
/** Is the side panel container currently open? */
|
||
isPanelOpen() {
|
||
if (typeof PanelRegistry !== 'undefined') return PanelRegistry.isContainerOpen();
|
||
return false;
|
||
},
|
||
|
||
/** Show a confirm dialog. Returns Promise<boolean>. */
|
||
confirm(msg, opts) {
|
||
if (typeof showConfirm === 'function') return showConfirm(msg, opts);
|
||
return Promise.resolve(window.confirm(msg));
|
||
},
|
||
|
||
/**
|
||
* Replace a surface region's content with a new element.
|
||
* Current children are preserved in memory (not destroyed)
|
||
* and can be restored later. Critical for CM6 state preservation.
|
||
*/
|
||
replace(regionId, element) {
|
||
console.warn(`[Extensions] ui.replace() requires surface system (removed in v0.22.6)`);
|
||
},
|
||
|
||
/**
|
||
* Restore a surface region's previously saved content.
|
||
*/
|
||
restore(regionId) {
|
||
console.warn(`[Extensions] ui.restore() requires surface system (removed in v0.22.6)`);
|
||
},
|
||
|
||
/** Inject an element into a named UI region (stub for future use). */
|
||
inject(region, el) {
|
||
console.warn(`[Extensions] ui.inject() not yet implemented (${extId}:${region})`);
|
||
},
|
||
|
||
/** Create a popup menu anchored to an element. */
|
||
createMenu(anchor, opts) {
|
||
if (typeof createPopupMenu === 'function') return createPopupMenu(anchor, opts);
|
||
return null;
|
||
},
|
||
},
|
||
|
||
// Surface registration (removed v0.22.6 — server-rendered surfaces)
|
||
surfaces: {
|
||
register: (id, opts) => {
|
||
console.warn(`[Extensions] surfaces.register() removed in v0.22.6`);
|
||
},
|
||
unregister: (id) => {
|
||
console.warn(`[Extensions] surfaces.unregister() removed in v0.22.6`);
|
||
},
|
||
activate: (id) => {
|
||
console.warn(`[Extensions] surfaces.activate() removed in v0.22.6`);
|
||
},
|
||
getCurrent: () => {
|
||
return window.__SURFACE__ || 'chat';
|
||
},
|
||
},
|
||
|
||
// Model info (resolved at call time)
|
||
get model() {
|
||
return {
|
||
id: typeof currentModelId !== 'undefined' ? currentModelId : null,
|
||
};
|
||
},
|
||
|
||
// User info
|
||
get user() {
|
||
return {
|
||
id: typeof API !== 'undefined' ? API.user?.id : null,
|
||
username: typeof API !== 'undefined' ? API.user?.username : null,
|
||
role: typeof API !== 'undefined' ? API.user?.role : null,
|
||
};
|
||
},
|
||
|
||
// Proxied API fetch
|
||
api: {
|
||
fetch: (path, opts) => {
|
||
if (typeof API !== 'undefined' && typeof API._fetch === 'function') {
|
||
return API._fetch(path, opts);
|
||
}
|
||
return fetch(path, opts);
|
||
},
|
||
},
|
||
};
|
||
},
|
||
|
||
// ── Renderer Pipeline ────────────────────
|
||
|
||
/**
|
||
* Register a custom renderer.
|
||
* @param {string} extId — owning extension
|
||
* @param {string} name — renderer name (unique within extension)
|
||
* @param {object} opts — { pattern, render, priority, type }
|
||
*
|
||
* Types:
|
||
* 'block' — operates on code blocks (receives lang, code, container)
|
||
* 'inline' — operates on the full message HTML (receives html string, returns html string)
|
||
* 'post' — operates on the rendered DOM (receives container element)
|
||
*/
|
||
_registerRenderer(extId, name, opts) {
|
||
if (!opts || !opts.render) {
|
||
console.error(`[Extensions] Renderer ${extId}:${name} requires a render function`);
|
||
return;
|
||
}
|
||
|
||
const renderer = {
|
||
extId,
|
||
name,
|
||
type: opts.type || 'block',
|
||
priority: opts.priority || 50,
|
||
pattern: opts.pattern || null,
|
||
render: opts.render,
|
||
match: opts.match || null, // function(lang, code) → bool
|
||
};
|
||
|
||
this._renderers.push(renderer);
|
||
this._renderers.sort((a, b) => a.priority - b.priority);
|
||
|
||
// v0.28.5: Shim 'post' renderers into the SDK render pipe.
|
||
// This makes old ctx.renderers.register() calls visible in
|
||
// sw.pipe.list() and ordered alongside new sw.pipe.render() filters.
|
||
// Block renderers stay in the old path (they run during formatMessage,
|
||
// not after DOM insertion).
|
||
if (renderer.type === 'post' && typeof sw !== 'undefined' && sw.pipe) {
|
||
sw.pipe.render(renderer.priority, (renderCtx) => {
|
||
try {
|
||
renderer.render(renderCtx.element);
|
||
} catch (e) {
|
||
console.error(`[Extensions] Shimmed post-renderer ${extId}:${name} error:`, e);
|
||
}
|
||
return renderCtx;
|
||
}, { source: `${extId}:${name}` });
|
||
}
|
||
|
||
console.log(`[Extensions] Renderer registered: ${extId}:${name} (type=${renderer.type}, priority=${renderer.priority})`);
|
||
},
|
||
|
||
/**
|
||
* Run block renderers on a code block element.
|
||
* Called by ui-format.js after creating the code block DOM.
|
||
* Returns true if a renderer handled the block (caller should skip default).
|
||
*
|
||
* @param {string} lang — language tag
|
||
* @param {string} code — raw code content
|
||
* @param {HTMLElement} container — the code block wrapper element
|
||
*/
|
||
runBlockRenderers(lang, code, container) {
|
||
for (const r of this._renderers) {
|
||
if (r.type !== 'block') continue;
|
||
|
||
let matched = false;
|
||
if (r.match && typeof r.match === 'function') {
|
||
matched = r.match(lang, code);
|
||
} else if (r.pattern instanceof RegExp) {
|
||
matched = r.pattern.test(lang);
|
||
} else if (typeof r.pattern === 'string') {
|
||
matched = lang === r.pattern;
|
||
}
|
||
|
||
if (matched) {
|
||
try {
|
||
r.render(lang, code, container);
|
||
return true;
|
||
} catch (e) {
|
||
console.error(`[Extensions] Renderer ${r.extId}:${r.name} error:`, e);
|
||
}
|
||
}
|
||
}
|
||
return false;
|
||
},
|
||
|
||
/**
|
||
* Run post-render DOM processors on a message container.
|
||
* Called after the full message HTML is inserted into the DOM.
|
||
*
|
||
* @param {HTMLElement} container — the message content element
|
||
*/
|
||
runPostRenderers(container) {
|
||
for (const r of this._renderers) {
|
||
if (r.type !== 'post') continue;
|
||
try {
|
||
r.render(container);
|
||
} catch (e) {
|
||
console.error(`[Extensions] Post-renderer ${r.extId}:${r.name} error:`, e);
|
||
}
|
||
}
|
||
},
|
||
|
||
// ── Helpers ──────────────────────────────
|
||
|
||
_extractDefaults(settingsSchema) {
|
||
const defaults = {};
|
||
for (const [key, def] of Object.entries(settingsSchema)) {
|
||
if (def && 'default' in def) defaults[key] = def.default;
|
||
}
|
||
return defaults;
|
||
},
|
||
|
||
_getUserSettings(extId) {
|
||
// Find user settings from the manifest data loaded from API
|
||
const manifest = this._manifests.find(m => m.id === extId);
|
||
if (manifest?.user_settings) {
|
||
try {
|
||
return typeof manifest.user_settings === 'string'
|
||
? JSON.parse(manifest.user_settings)
|
||
: manifest.user_settings;
|
||
} catch { return {}; }
|
||
}
|
||
return {};
|
||
},
|
||
|
||
/**
|
||
* Set up the WebSocket bridge for browser tool execution.
|
||
* Listens for tool.call.* events from the server, routes to
|
||
* the registered handler, and sends tool.result.* back.
|
||
*/
|
||
_setupToolBridge() {
|
||
Events.on('tool.call.*', async (payload, meta) => {
|
||
const { call_id, tool, arguments: args } = payload || {};
|
||
if (!call_id || !tool) return;
|
||
|
||
const registration = this._toolHandlers.get(tool);
|
||
if (!registration) {
|
||
// No handler registered — send error back
|
||
Events.emit(`tool.result.${call_id}`, {
|
||
call_id,
|
||
error: JSON.stringify({ error: `no handler for tool: ${tool}` }),
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const parsedArgs = typeof args === 'string' ? JSON.parse(args) : args;
|
||
const result = await registration.handler(parsedArgs);
|
||
const resultStr = typeof result === 'string' ? result : JSON.stringify(result);
|
||
Events.emit(`tool.result.${call_id}`, {
|
||
call_id,
|
||
result: resultStr,
|
||
});
|
||
} catch (e) {
|
||
console.error(`[Extensions] Tool ${tool} error:`, e);
|
||
Events.emit(`tool.result.${call_id}`, {
|
||
call_id,
|
||
error: JSON.stringify({ error: e.message || 'tool execution failed' }),
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* Check if any renderers are registered for a given type.
|
||
*/
|
||
hasRenderers(type) {
|
||
return this._renderers.some(r => r.type === type);
|
||
},
|
||
|
||
/**
|
||
* Get info about all registered extensions (for debug/admin).
|
||
*/
|
||
debug() {
|
||
const exts = {};
|
||
for (const [id, entry] of this._registry) {
|
||
exts[id] = {
|
||
active: entry.active,
|
||
renderers: this._renderers.filter(r => r.extId === id).map(r => r.name),
|
||
};
|
||
}
|
||
return { extensions: exts, rendererCount: this._renderers.length };
|
||
},
|
||
};
|
||
|
||
// ── Exports ─────────────────────────────────
|
||
sb.ns('Extensions', Extensions);
|