thatcher 1.0.4 → 1.0.6

package/src/lib/xstate-workflow-engine.js

@@ -0,0 +1,478 @@
+/**
+ * XState Workflow Engine - State machine-based workflow management for Thatcher
+ * Replaces the legacy workflow engine with xstate v5 state machines and actors
+ */
+
+import { createMachine, createActor, assign, fromPromise, sendParent } from 'xstate';
+import { getConfigEngineSync } from './config-generator-engine.js';
+import { hookEngine } from './hook-engine.js';
+import { AppError } from './error-handler.js';
+import { HTTP } from '../config/constants.js';
+import { createLogger } from './logger.js';
+
+const logger = createLogger('[XStateWorkflow]');
+
+const _actors = new Map();
+const _transitionHistory = [];
+const MAX_HISTORY = 1000;
+const LOCKOUT_MS = 300000;
+
+export class XStateWorkflowEngine {
+  constructor() {
+    this._machineCache = new Map();
+    this._inspector = null;
+    this._inspectionEvents = [];
+  }
+
+  async init() {
+    this._setupInspector();
+
+    if (globalThis.__debug__) {
+      globalThis.__debug__.expose('xstate', {
+        actors: () => this.getActiveActors(),
+        machines: () => this.getCachedMachines(),
+        history: () => [..._transitionHistory],
+        inspector: () => this._inspector,
+        stats: () => this.getStats(),
+      }, 'XState Workflow Engine');
+    }
+
+    logger.info('XState Workflow Engine initialized');
+    return this;
+  }
+
+  _setupInspector() {
+    this._inspector = {
+      inspect: (inspectionEvent) => {
+        this._inspectionEvents.push({
+          type: inspectionEvent.type,
+          timestamp: Date.now(),
+          actorId: inspectionEvent.actorRef?.id,
+          snapshot: inspectionEvent.snapshot?.value,
+          event: inspectionEvent.event?.type,
+        });
+
+        while (this._inspectionEvents.length > MAX_HISTORY) {
+          this._inspectionEvents.shift();
+        }
+      },
+    };
+  }
+
+  compileWorkflow(workflowName) {
+    if (this._machineCache.has(workflowName)) {
+      return this._machineCache.get(workflowName);
+    }
+
+    const config = getConfigEngineSync().getConfig();
+    const wf = config?.workflows?.[workflowName];
+    if (!wf) throw new Error(`Workflow "${workflowName}" not found`);
+
+    const stages = wf.stages || wf.states || [];
+    const stageMap = {};
+    for (const stage of stages) {
+      stageMap[stage.name] = stage;
+    }
+
+    const states = {};
+    for (const stage of stages) {
+      const on = {};
+
+      const forward = stage.forward || [];
+      const backward = stage.backward || [];
+      const allTransitions = [...forward, ...backward];
+
+      for (const target of allTransitions) {
+        const targetCfg = stageMap[target];
+        const isForward = forward.includes(target);
+
+        on[`TRANSITION_TO_${target.toUpperCase()}`] = {
+          target,
+          guard: ({ context }) => {
+            if (targetCfg?.requires_role?.length > 0 && context.user?.role) {
+              return targetCfg.requires_role.includes(context.user.role);
+            }
+            if (targetCfg?.entry === 'partner_only' && context.user?.role !== 'partner') {
+              return false;
+            }
+            if (targetCfg?.readonly) return false;
+            if (context.lastTransitionAt) {
+              const elapsed = Date.now() - context.lastTransitionAt;
+              if (elapsed < LOCKOUT_MS) return false;
+            }
+            return true;
+          },
+          actions: [
+            assign({
+              status: () => target,
+              previousStatus: ({ context }) => context.status,
+              lastTransitionAt: () => Date.now(),
+              transitionHistory: ({ context }) => [
+                ...context.transitionHistory,
+                {
+                  from: context.status,
+                  to: target,
+                  at: Date.now(),
+                  user: context.user?.email || 'system',
+                  direction: isForward ? 'forward' : 'backward',
+                },
+              ],
+            }),
+            ({ context }) => {
+              hookEngine.execute(`workflow:${workflowName}:transition`, {
+                workflow: workflowName,
+                entityId: context.entityId,
+                from: context.previousStatus,
+                to: target,
+                user: context.user,
+                direction: isForward ? 'forward' : 'backward',
+              }).catch(err => logger.error('Transition hook error', { error: err.message }));
+
+              hookEngine.execute(`transition:${context.entityType}`, {
+                entity: context.entityType,
+                id: context.entityId,
+                from: context.previousStatus,
+                to: target,
+                user: context.user,
+              }).catch(err => logger.error('Entity transition hook error', { error: err.message }));
+            },
+          ],
+        };
+      }
+
+      states[stage.name] = {
+        on,
+        entry: ({ context }) => {
+          hookEngine.execute(`workflow:${workflowName}:enter:${stage.name}`, {
+            workflow: workflowName,
+            entityId: context.entityId,
+            stage: stage.name,
+            user: context.user,
+          }).catch(err => logger.error('Stage entry hook error', { error: err.message }));
+        },
+        exit: ({ context }) => {
+          hookEngine.execute(`workflow:${workflowName}:exit:${stage.name}`, {
+            workflow: workflowName,
+            entityId: context.entityId,
+            stage: stage.name,
+            user: context.user,
+          }).catch(err => logger.error('Stage exit hook error', { error: err.message }));
+        },
+      };
+    }
+
+    const initialStage = wf.initial || wf.initial_stage || stages[0]?.name;
+
+    const machine = createMachine({
+      id: workflowName,
+      initial: initialStage,
+      context: {
+        entityId: null,
+        entityType: null,
+        user: null,
+        status: initialStage,
+        previousStatus: null,
+        lastTransitionAt: null,
+        transitionHistory: [],
+        ...wf.context,
+      },
+      states,
+    });
+
+    this._machineCache.set(workflowName, { machine, stageMap, wf });
+    return { machine, stageMap, wf };
+  }
+
+  createActorForEntity(workflowName, entityId, initialState, user = null, entityType = null) {
+    const { machine } = this.compileWorkflow(workflowName);
+
+    const actor = createActor(machine, {
+      input: {
+        entityId,
+        entityType,
+        user,
+        status: initialState,
+      },
+      inspect: this._inspector,
+    });
+
+    actor.start();
+
+    if (initialState) {
+      actor.send({ type: 'SNAPSHOT', status: initialState });
+    }
+
+    const actorKey = `${workflowName}:${entityId}`;
+    _actors.set(actorKey, {
+      actor,
+      workflowName,
+      entityId,
+      entityType,
+      createdAt: Date.now(),
+    });
+
+    logger.info('Actor created', { workflowName, entityId, actorId: actor.id });
+    return actor;
+  }
+
+  getActor(workflowName, entityId) {
+    const key = `${workflowName}:${entityId}`;
+    return _actors.get(key)?.actor;
+  }
+
+  getActiveActors() {
+    return Array.from(_actors.entries()).map(([key, { actor, workflowName, entityId, entityType, createdAt }]) => ({
+      key,
+      actorId: actor.id,
+      workflowName,
+      entityId,
+      entityType,
+      status: actor.getSnapshot().value,
+      createdAt,
+      isActive: !actor.getSnapshot().done,
+    }));
+  }
+
+  stopActor(workflowName, entityId) {
+    const key = `${workflowName}:${entityId}`;
+    const entry = _actors.get(key);
+    if (entry) {
+      entry.actor.stop();
+      _actors.delete(key);
+      logger.info('Actor stopped', { workflowName, entityId });
+    }
+  }
+
+  sendEvent(workflowName, entityId, eventType, eventData = {}) {
+    const actor = this.getActor(workflowName, entityId);
+    if (!actor) {
+      throw new AppError(`No active actor for ${workflowName}:${entityId}`, 'NO_ACTOR', HTTP.NOT_FOUND);
+    }
+
+    actor.send({ type: eventType, ...eventData });
+    return actor.getSnapshot();
+  }
+
+  getSnapshot(workflowName, entityId) {
+    const actor = this.getActor(workflowName, entityId);
+    if (!actor) return null;
+    return actor.getSnapshot();
+  }
+
+  getCachedMachines() {
+    return Array.from(this._machineCache.entries()).map(([name, { wf, stageMap }]) => ({
+      name,
+      stages: Object.keys(stageMap),
+      initial: wf.initial || wf.initial_stage,
+    }));
+  }
+
+  getStats() {
+    return {
+      activeActors: _actors.size,
+      cachedMachines: this._machineCache.size,
+      inspectionEvents: this._inspectionEvents.length,
+      transitionHistory: _transitionHistory.length,
+    };
+  }
+
+  async close() {
+    for (const [, { actor }] of _actors.entries()) {
+      actor.stop();
+    }
+    _actors.clear();
+    this._machineCache.clear();
+    this._inspectionEvents.length = 0;
+    _transitionHistory.length = 0;
+  }
+}
+
+let _xstateEngine = null;
+
+export async function createXStateWorkflowEngine() {
+  if (!_xstateEngine) {
+    _xstateEngine = new XStateWorkflowEngine();
+    await _xstateEngine.init();
+  }
+  return _xstateEngine;
+}
+
+export function getXStateWorkflowEngine() {
+  return _xstateEngine;
+}
+
+export function validateTransition(workflowName, fromState, toState, user) {
+  const config = getConfigEngineSync().getConfig();
+  const wf = config?.workflows?.[workflowName];
+  if (!wf) throw new Error(`Workflow "${workflowName}" not found`);
+
+  const stages = wf.stages || wf.states || [];
+  const stageMap = {};
+  for (const stage of stages) {
+    stageMap[stage.name] = stage;
+  }
+
+  const fromCfg = stageMap[fromState];
+  const toCfg = stageMap[toState];
+
+  if (!fromCfg) throw new AppError(`Invalid current state: ${fromState}`, 'INVALID_STATE', HTTP.BAD_REQUEST);
+  if (!toCfg) throw new AppError(`Invalid target state: ${toState}`, 'INVALID_STATE', HTTP.BAD_REQUEST);
+
+  const forward = fromCfg.forward || [];
+  const backward = fromCfg.backward || [];
+
+  if (!forward.includes(toState) && !backward.includes(toState)) {
+    throw new AppError(
+      `Cannot transition from "${fromState}" to "${toState}". Allowed: ${[...forward, ...backward].join(', ') || 'none'}`,
+      'TRANSITION_INVALID',
+      HTTP.BAD_REQUEST
+    );
+  }
+
+  const requiresRole = toCfg.requires_role || [];
+  if (requiresRole.length > 0 && user && !requiresRole.includes(user.role)) {
+    throw new AppError(`Role "${user.role}" cannot enter state "${toState}"`, 'INSUFFICIENT_PERMISSIONS', HTTP.FORBIDDEN);
+  }
+
+  if (toCfg.entry === 'partner_only' && user?.role !== 'partner') {
+    throw new AppError(`Only partners can enter "${toState}"`, 'ENTRY_CONSTRAINT', HTTP.FORBIDDEN);
+  }
+
+  if (toCfg.readonly) {
+    throw new AppError(`State "${toState}" is read-only`, 'STATE_READONLY', HTTP.FORBIDDEN);
+  }
+
+  return {
+    forward: forward.includes(toState),
+    backward: backward.includes(toState),
+  };
+}
+
+export function getAvailableTransitions(workflowName, currentState, user, record = null) {
+  const config = getConfigEngineSync().getConfig();
+  const wf = config?.workflows?.[workflowName];
+  if (!wf) return [];
+
+  const stages = wf.stages || wf.states || [];
+  const stageMap = {};
+  for (const stage of stages) {
+    stageMap[stage.name] = stage;
+  }
+
+  const currentCfg = stageMap[currentState];
+  if (!currentCfg) return [];
+
+  const available = [];
+  const candidates = [...(currentCfg.forward || []), ...(currentCfg.backward || [])];
+  const currentOrder = currentCfg.order || 0;
+
+  for (const stateName of candidates) {
+    try {
+      if (record?.last_transition_at) {
+        const elapsed = Date.now() / 1000 - record.last_transition_at;
+        if (elapsed < LOCKOUT_MS / 1000) continue;
+      }
+
+      validateTransition(workflowName, currentState, stateName, user);
+      const cfg = stageMap[stateName];
+      available.push({
+        stage: stateName,
+        label: cfg.label || stateName,
+        forward: (cfg.order || 0) > currentOrder,
+        backward: (cfg.order || 0) < currentOrder,
+      });
+    } catch {
+      // Skip invalid
+    }
+  }
+
+  return available;
+}
+
+export async function transition(entityType, entityId, workflowName, toState, user, reason = '') {
+  const { get } = await import('./query-engine.js');
+  const { update: updateRecord } = await import('./query-engine-write.js');
+
+  const record = get(entityType, entityId);
+  if (!record) throw new AppError('Record not found', 'NOT_FOUND', HTTP.NOT_FOUND);
+
+  validateTransition(workflowName, record.status || record.stage, toState, user);
+
+  const updates = {
+    status: toState,
+    updated_at: Math.floor(Date.now() / 1000),
+  };
+
+  if (reason) {
+    updates.transition_reason = reason;
+  }
+
+  const updated = updateRecord(entityType, entityId, updates, user);
+
+  _transitionHistory.push({
+    entityType,
+    entityId,
+    workflowName,
+    from: record.status,
+    to: toState,
+    user: user?.email || 'system',
+    reason,
+    timestamp: Date.now(),
+  });
+
+  while (_transitionHistory.length > MAX_HISTORY) {
+    _transitionHistory.shift();
+  }
+
+  hookEngine.execute(`transition:${entityType}`, {
+    entity: entityType,
+    id: entityId,
+    from: record.status,
+    to: toState,
+    user,
+    record: updated,
+  }).catch(err => logger.error('Transition hook error', { error: err.message }));
+
+  return updated;
+}
+
+export function getStateField(workflowName) {
+  const config = getConfigEngineSync().getConfig();
+  const wf = config?.workflows?.[workflowName];
+  return wf?.state_field || 'status';
+}
+
+export function getStageLabels(workflowName) {
+  const config = getConfigEngineSync().getConfig();
+  const wf = config?.workflows?.[workflowName];
+  if (!wf) return {};
+
+  const stages = wf.stages || wf.states || [];
+  const labels = {};
+  for (const stage of stages) {
+    labels[stage.name] = stage.label || stage.name;
+  }
+  return labels;
+}
+
+export function getStateLocks(workflowName, state) {
+  const config = getConfigEngineSync().getConfig();
+  const wf = config?.workflows?.[workflowName];
+  if (!wf) return [];
+
+  const stages = wf.stages || wf.states || [];
+  const stage = stages.find(s => s.name === state);
+  return stage?.locks || [];
+}
+
+export function getStateActions(workflowName, state) {
+  const config = getConfigEngineSync().getConfig();
+  const wf = config?.workflows?.[workflowName];
+  if (!wf) return [];
+
+  const stages = wf.stages || wf.states || [];
+  const stage = stages.find(s => s.name === state);
+  return stage?.actions || [];
+}
+
+export default XStateWorkflowEngine;

package/src/plugins/index.js

@@ -0,0 +1,27 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export async function loadPlugins(configEngine) {
+  const pluginDir = __dirname;
+  let files;
+  try { files = fs.readdirSync(pluginDir).filter(f => f.endsWith('.plugin.js')); }
+  catch { return []; }
+
+  const loaded = [];
+  for (const file of files) {
+    try {
+      const mod = await import(`file://${path.join(pluginDir, file)}?t=${Date.now()}`);
+      const plugin = mod.default || mod;
+      if (!plugin.entityName) { console.warn(`[plugins] ${file} missing entityName, skipped`); continue; }
+      configEngine.registerPlugin(plugin.entityName, plugin);
+      loaded.push(file);
+    } catch (e) {
+      console.error(`[plugins] Failed to load ${file}:`, e.message);
+    }
+  }
+  if (loaded.length) console.log(`[plugins] Loaded: ${loaded.join(', ')}`);
+  return loaded;
+}

package/src/server/server.js

@@ -4,6 +4,7 @@
  */
 
 import http from 'http';
+import path from 'path';
 import { fileURLToPath, pathToFileURL } from 'url';
 import * as thatcherLib from '../index.js';
 
@@ -17,13 +18,24 @@ export function createServer(options) {
   let systemInitialized = false;
   const moduleCache = new Map();
 
-  // Debug registry
+  // Debug registry. expose/get/list MUST exist before any module that calls
+  // __debug__.expose() at load time (config-generator-engine, hook-engine,
+  // observability) is imported, or every request that loads them crashes.
+  const _debugExposed = new Map();
   globalThis.__debug__ = globalThis.__debug__ || {};
   globalThis.__debug__.moduleCache = { get size() { return moduleCache.size; }, entries: () => [...moduleCache.keys()] };
   globalThis.__debug__.activeRequests = { count: 0 };
+  globalThis.__debug__.configStats = { specCacheHits: 0, specCacheMisses: 0 };
   globalThis.__debug__.hooks = null;
   globalThis.__debug__.serverStart = SERVER_START;
   globalThis.__debug__.uptime = () => Date.now() - SERVER_START;
+  globalThis.__debug__.expose = globalThis.__debug__.expose || function (key, value, description = '') {
+    _debugExposed.set(key, { value, description, exposedAt: new Date().toISOString() });
+    if (!globalThis[key]) globalThis[key] = value;
+    return value;
+  };
+  globalThis.__debug__.get = globalThis.__debug__.get || function (key) { const e = _debugExposed.get(key); return e ? e.value : undefined; };
+  globalThis.__debug__.list = globalThis.__debug__.list || function () { return [..._debugExposed.entries()].map(([key, e]) => ({ key, description: e.description, exposedAt: e.exposedAt, type: typeof e.value })); };
 
   // Load module with caching
   const load = (p) => {
@@ -80,7 +92,7 @@ export function createServer(options) {
         }
 
         // Fall back to generic CRUD
-        return await handleGenericCrud(req, res, entity, id, action, thatcher);
+        return await handleGenericCrud(req, res, entity, id, action, thatcher, configEngine);
       }
 
       // Static file serving (simplified)
@@ -199,14 +211,21 @@ async function sendResponse(res, response) {
 /**
  * Generic CRUD handler
  */
-async function handleGenericCrud(req, res, entity, id, action, thatcher) {
+async function handleGenericCrud(req, res, entity, id, action, thatcher, configEngineArg) {
   // Simple auth: get from cookie or header
   let user = null;
   // In a real implementation, we'd decode session token
   // For now, default to system user for testing
   user = { id: 'system', role: 'admin' };
 
-  const { configEngine } = thatcher;
+  // Prefer the engine passed down from createServer options (guaranteed the
+  // same instance that was initialized at startup); fall back to thatcher /
+  // the module singleton only if it wasn't threaded through.
+  let configEngine = configEngineArg || thatcher?.configEngine || globalThis.__thatcherConfigEngine;
+  if (!configEngine) {
+    const { getConfigEngineSync } = await import('../lib/config-generator-engine.js');
+    configEngine = getConfigEngineSync();
+  }
   let spec;
   try {
     spec = configEngine.generateEntitySpec(entity);

package/src/services/permission.service.js

@@ -4,8 +4,8 @@
  */
 
 import { getCollaboratorRole, checkCollaboratorAccess } from '../services/collaborator-role.service.js';
-import { PermissionError } from './error-handler.js';
-import { getConfigEngineSync } from './config-generator-engine.js';
+import { PermissionError } from '../lib/error-handler.js';
+import { getConfigEngineSync } from '../lib/config-generator-engine.js';
 
 class PermissionService {
   /**
@@ -179,3 +179,7 @@ class PermissionService {
 
 export const permissionService = new PermissionService();
 export default permissionService;
+
+// Free-function wrappers over the singleton (parity with moonlanding's permission.service API).
+export function can(user, spec, action) { return permissionService.can(user, spec, action); }
+export function check(user, spec, action) { return permissionService.require(user, spec, action); }

package/src/ui/advanced-search-renderer.js

@@ -1,6 +1,6 @@
 import { statusLabel } from '@/ui/renderer.js';
 import { page } from '@/ui/layout.js';
-import { fmtDate } from '@/ui/render-helpers.js';
+import { fmtDate, esc } from '@/ui/render-helpers.js';
 
 function resultCard(item, entityType) {
   const sts = item.status ? statusLabel(item.status) : '';
@@ -8,11 +8,11 @@ function resultCard(item, entityType) {
   const subtitle = item.client_name || item.engagement_name || item.email || '';
   const date = fmtDate(item.created_at);
   const typeLabel = entityType.charAt(0).toUpperCase() + entityType.slice(1);
-  return `<div class="card-clean" style="margin-bottom:8px;cursor:pointer" data-navigate="/${entityType}/${item.id}"><div class="card-clean-body" style="padding:0.75rem"><div class="flex items-start justify-between"><div class="flex-1"><div class="flex items-center gap-2 mb-1"><span class="badge badge-sm bg-gray-100 text-gray-600">${typeLabel}</span>${sts}</div><div class="font-medium">${title}</div>${subtitle ? `<div class="text-xs text-gray-500 mt-0.5">${subtitle}</div>` : ''}</div><div class="text-xs text-gray-400">${date}</div></div></div></div>`;
+  return `<div class="card-clean" style="margin-bottom:8px;cursor:pointer" data-navigate="/${entityType}/${item.id}"><div class="card-clean-body" style="padding:0.75rem"><div class="flex items-start justify-between"><div class="flex-1"><div class="flex items-center gap-2 mb-1"><span class="badge badge-sm bg-gray-100 text-gray-600">${typeLabel}</span>${sts}</div><div class="font-medium">${esc(title)}</div>${subtitle ? `<div class="text-xs text-gray-500 mt-0.5">${esc(subtitle)}</div>` : ''}</div><div class="text-xs text-gray-400">${date}</div></div></div></div>`;
 }
 
 function filterPanel(teams, stages) {
-  const teamOpts = teams.map(t => `<option value="${t.id}">${t.name}</option>`).join('');
+  const teamOpts = teams.map(t => `<option value="${esc(t.id)}">${esc(t.name)}</option>`).join('');
   const stageOpts = stages.map(s => `<option value="${s}">${s.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())}</option>`).join('');
   return `<div class="card-clean" style="margin-bottom:1.5rem"><div class="card-clean-body"><div class="grid grid-cols-1 md:grid-cols-4 gap-3"><div><label class="text-xs font-medium text-gray-600 block mb-1" for="search-query">Search</label><input type="text"  id="search-query" class="input input-bordered input-sm w-full" placeholder="Search across all entities..."/></div><div><label class="text-xs font-medium text-gray-600 block mb-1" for="filter-entity">Entity Type</label><select id="filter-entity" class="select select-bordered select-sm w-full"><option value="">All Types</option><option value="engagement">Engagements</option><option value="client">Clients</option><option value="rfi">RFIs</option><option value="review">Reviews</option><option value="user">Users</option></select></div><div><label class="text-xs font-medium text-gray-600 block mb-1" for="filter-status">Status</label><select id="filter-status" class="select select-bordered select-sm w-full"><option value="">All Statuses</option><option value="active">Active</option><option value="pending">Pending</option><option value="completed">Completed</option><option value="archived">Archived</option></select></div><div><label class="text-xs font-medium text-gray-600 block mb-1" for="filter-stage">Stage</label><select id="filter-stage" class="select select-bordered select-sm w-full"><option value="">All Stages</option>${stageOpts}</select></div></div><div class="grid grid-cols-1 md:grid-cols-4 gap-3 mt-3"><div><label class="text-xs font-medium text-gray-600 block mb-1" for="filter-team">Team</label><select id="filter-team" class="select select-bordered select-sm w-full"><option value="">All Teams</option>${teamOpts}</select></div><div><label class="text-xs font-medium text-gray-600 block mb-1" for="filter-from">Date From</label><input type="date"  id="filter-from" class="input input-bordered input-sm w-full"/></div><div><label class="text-xs font-medium text-gray-600 block mb-1" for="filter-to">Date To</label><input type="date"  id="filter-to" class="input input-bordered input-sm w-full"/></div><div class="flex items-end"><button class="btn btn-primary btn-sm w-full" data-action="doSearch">Search</button></div></div></div></div>`;
 }

package/src/ui/advanced-widgets.js

@@ -12,7 +12,7 @@ export function dataGridAdvanced(config) {
   const expandCol = expandable ? '<th class="dg-expand-col"></th>' : ''
   const renderRow = (item, rowId, groupId) => {
     const memberAttr = groupId ? ` data-dg-member="${groupId}"` : ''
-    const expandBtn = expandable ? `<td class="dg-expand-col"><button class="dg-expand-btn" data-dg-row="${rowId}" data-action="dgToggleDetail" data-args='["${gridId}"]' data-self aria-label="Expand row details" aria-expanded="false">&#9654;</button></td>` : ''
+    const expandBtn = expandable ? `<td class="dg-expand-col"><button class="dg-expand-btn" data-dg-row="${rowId}" data-action="dgToggleDetail" data-args='["${gridId}"]' data-self aria-label="Expand row details" aria-expanded="false"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg></button></td>` : ''
     const cells = columns.map(col => `<td>${item[col.field] ?? '-'}</td>`).join('')
     const detailRow = expandable ? `<tr class="dg-detail-row"${memberAttr} data-dg-detail="${rowId}" style="display:none"><td colspan="${columns.length + 1}"><div class="dg-detail-panel">${detailRenderer ? detailRenderer(item) : ''}</div></td></tr>` : ''
     return `<tr class="dg-data-row"${memberAttr} data-dg-values='${JSON.stringify(columns.map(c => String(item[c.field] ?? '')))}'>${expandBtn}${cells}</tr>${detailRow}`
@@ -24,7 +24,7 @@ export function dataGridAdvanced(config) {
     bodyHtml = Object.entries(groups).map(([key, items]) => {
       const gid = `${gridId}-g-${key.replace(/\W/g, '_')}`
       const rows = items.map((item, i) => renderRow(item, `${gid}-r${i}`, gid)).join('')
-      return `<tr class="dg-group-header" data-dg-group="${gid}" tabindex="0" data-action="dgToggleGroup" data-args='["${gid}"]' onkeydown="if(event.key==='Enter')dgToggleGroup('${gid}')"><td colspan="${columns.length + (expandable ? 1 : 0)}"><span class="dg-group-arrow">&#9660;</span> <strong>${key}</strong> <span class="dg-group-count">(${items.length})</span></td></tr>${rows}`
+      return `<tr class="dg-group-header" data-dg-group="${gid}" tabindex="0" data-action="dgToggleGroup" data-args='["${gid}"]' onkeydown="if(event.key==='Enter')dgToggleGroup('${gid}')"><td colspan="${columns.length + (expandable ? 1 : 0)}"><span class="dg-group-arrow"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></span> <strong>${key}</strong> <span class="dg-group-count">(${items.length})</span></td></tr>${rows}`
     }).join('')
   } else {
     bodyHtml = data.map((item, i) => renderRow(item, `${gridId}-r${i}`, null)).join('')
@@ -40,8 +40,8 @@ export function collapsibleSidebar(sections, currentPath) {
       const active = currentPath === item.href
       return `<a href="${item.href}" class="sidebar-link${active ? ' sidebar-link-active' : ''}">${item.label}</a>`
     }).join('')
-    return `<div class="sidebar-section"><div class="sidebar-section-header" data-action="sidebarToggleSection" data-self>${section.title}<span class="sidebar-section-arrow">&#9660;</span></div><div class="sidebar-section-body">${links}</div></div>`
+    return `<div class="sidebar-section"><div class="sidebar-section-header" data-action="sidebarToggleSection" data-self>${section.title}<span class="sidebar-section-arrow"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></span></div><div class="sidebar-section-body">${links}</div></div>`
   }).join('')
   const script = `(function(){var sb=document.getElementById('${sidebarId}');var saved=localStorage.getItem('sidebar-width');if(saved)sb.style.width=saved+'px';var collapsed=localStorage.getItem('sidebar-collapsed')==='true';if(collapsed)sb.classList.add('sidebar-collapsed');window.sidebarToggleSection=function(el){el.parentElement.classList.toggle('sidebar-section-closed')};window.sidebarToggleCollapse=function(){sb.classList.toggle('sidebar-collapsed');localStorage.setItem('sidebar-collapsed',sb.classList.contains('sidebar-collapsed'))};var handle=sb.querySelector('.sidebar-resize-handle');var startX,startW;handle.addEventListener('mousedown',function(e){startX=e.clientX;startW=sb.offsetWidth;function onMove(ev){var w=startW+(ev.clientX-startX);if(w>48&&w<400){sb.style.width=w+'px';localStorage.setItem('sidebar-width',w)}}function onUp(){document.removeEventListener('mousemove',onMove);document.removeEventListener('mouseup',onUp)}document.addEventListener('mousemove',onMove);document.addEventListener('mouseup',onUp)})})();`
-  return `<aside id="${sidebarId}" class="sidebar-collapsible"><div class="sidebar-inner"><button class="sidebar-collapse-btn" data-action="sidebarToggleCollapse" title="Toggle sidebar">&#9776;</button>${sectionHtml}</div><div class="sidebar-resize-handle"></div></aside><script>${script}</script>`
+  return `<aside id="${sidebarId}" class="sidebar-collapsible"><div class="sidebar-inner"><button class="sidebar-collapse-btn" data-action="sidebarToggleCollapse" title="Toggle sidebar"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/></svg></button>${sectionHtml}</div><div class="sidebar-resize-handle"></div></aside><script>${script}</script>`
 }

package/src/ui/common-handlers.js

@@ -147,8 +147,10 @@ export const commonHandlers = {
         timer = setTimeout(() => fn.apply(this, args), delay);
       };
     },
-    confirm(message) { return window.confirm(message); },
-    prompt(message, defaultValue = '') { return window.prompt(message, defaultValue); },
+    // Delegate to the styled, focus-managed gm* dialogs (native confirm/prompt are
+    // banned — blocking, unstyled, outside dialogFocus). Both return Promises.
+    confirm(message) { return window.gmConfirm({ title: 'Please confirm', message }); },
+    prompt(message, defaultValue = '') { return window.gmPrompt({ title: message, label: message, value: defaultValue }); },
     wait(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }
   }
 };