@adia-ai/a2ui-mcp 0.0.1

package/scripts/multi-turn-test.mjs

@@ -0,0 +1,247 @@
+#!/usr/bin/env node
+
+/**
+ * multi-turn-test.mjs — End-to-end multi-turn generation test.
+ *
+ * Runs a sequence of related prompts through Pro mode, evaluating:
+ *   - Output quality (component count, types, validation score)
+ *   - Context continuity (prior components preserved across turns)
+ *   - Intent alignment (does each turn actually do what was asked)
+ *   - Diff efficiency (how many components changed vs carried forward)
+ *
+ * Usage: node packages/a2ui/mcp/scripts/multi-turn-test.mjs
+ */
+
+import '../../../../scripts/load-env.mjs';
+import { generateUI } from '../../compose/engine/generator.js';
+import { validateSchema } from '../../validator/validator.js';
+
+// ── Test scenarios ──────────────────────────────────────────────────
+
+const SCENARIOS = [
+  {
+    name: 'Kanban Board Build',
+    turns: [
+      {
+        intent: 'Create a kanban board with 3 columns (To Do, In Progress, Done). Each column has 3-4 synthetic task cards. Each task card should have a title, a category tag (Design, Engineering, Marketing, QA), a priority badge (High, Medium, Low), and an assignee avatar. Include a board header with the project name "Project Aurora" and a button to add new tasks.',
+        expect: {
+          minComponents: 30,
+          requiredTypes: ['Grid', 'Column', 'Card', 'Badge', 'Avatar', 'Button', 'Text'],
+          requiredContent: ['To Do', 'In Progress', 'Done', 'Aurora'],
+        },
+      },
+      {
+        intent: 'Add a toolbar above the board with: a search input to filter tasks by title, a select dropdown to filter by category (All, Design, Engineering, Marketing, QA), and a select dropdown to sort by (Priority, Date Created, Assignee). Keep all existing board content.',
+        expect: {
+          minComponents: 35,
+          requiredTypes: ['Input', 'Select'],
+          requiredContent: ['search', 'filter', 'sort'],
+          preserveFromPrior: ['Grid', 'Badge', 'Avatar'],
+        },
+      },
+      {
+        intent: 'Add a toggle switch in the toolbar labeled "Compact View". When compact mode is conceptually on, the task cards should show only the title text and category badge — no avatar, no priority badge, no description. Show the board in compact mode as an example of what it would look like.',
+        expect: {
+          minComponents: 25,
+          requiredTypes: ['Switch', 'Toggle'],
+          requiredContent: ['Compact'],
+          preserveFromPrior: ['Input', 'Select'],
+        },
+      },
+    ],
+  },
+];
+
+// ── Helpers ──────────────────────────────────────────────────────────
+
+function extractComponents(result) {
+  return result.messages?.flatMap(m => m.components || []) || [];
+}
+
+function getTypes(components) {
+  return [...new Set(components.map(c => c.component).filter(Boolean))];
+}
+
+function getTextContent(components) {
+  return components
+    .filter(c => c.textContent || c.text || c.label || c.placeholder)
+    .map(c => c.textContent || c.text || c.label || c.placeholder)
+    .join(' ')
+    .toLowerCase();
+}
+
+function checkExpectations(components, expect, priorTypes) {
+  const issues = [];
+  const types = getTypes(components);
+  const text = getTextContent(components);
+
+  // Min components
+  if (expect.minComponents && components.length < expect.minComponents) {
+    issues.push(`TOO FEW: ${components.length} components (expected ${expect.minComponents}+)`);
+  }
+
+  // Required types
+  if (expect.requiredTypes) {
+    for (const t of expect.requiredTypes) {
+      // Allow flexible matching — Switch OR Toggle, etc
+      const alternatives = {
+        'Switch': ['Switch', 'Toggle'],
+        'Toggle': ['Switch', 'Toggle'],
+        'Input': ['Input', 'Search'],
+      };
+      const alts = alternatives[t] || [t];
+      if (!alts.some(a => types.includes(a))) {
+        issues.push(`MISSING TYPE: ${t} (have: ${types.join(', ')})`);
+      }
+    }
+  }
+
+  // Required content
+  if (expect.requiredContent) {
+    for (const c of expect.requiredContent) {
+      if (!text.includes(c.toLowerCase())) {
+        issues.push(`MISSING CONTENT: "${c}" not found in text`);
+      }
+    }
+  }
+
+  // Continuity — types from prior turn still present
+  if (expect.preserveFromPrior && priorTypes) {
+    for (const t of expect.preserveFromPrior) {
+      if (!types.includes(t)) {
+        issues.push(`CONTINUITY BREAK: ${t} was in prior turn but missing now`);
+      }
+    }
+  }
+
+  return issues;
+}
+
+// ── Runner ──────────────────────────────────────────────────────────
+
+async function runScenario(scenario) {
+  console.log(`\n${'═'.repeat(70)}`);
+  console.log(`  SCENARIO: ${scenario.name}`);
+  console.log(`${'═'.repeat(70)}\n`);
+
+  let executionId = undefined;
+  let priorTypes = null;
+  let priorComponentCount = 0;
+  const turnResults = [];
+
+  for (let i = 0; i < scenario.turns.length; i++) {
+    const turn = scenario.turns[i];
+    const turnNum = i + 1;
+
+    console.log(`── Turn ${turnNum}/${scenario.turns.length} ${'─'.repeat(50)}`);
+    console.log(`  Intent: ${turn.intent.slice(0, 120)}...`);
+    console.log(`  ExecutionId: ${executionId || '(new)'}`);
+    console.log('');
+
+    const startTime = Date.now();
+    let result;
+    try {
+      result = await generateUI({
+        intent: turn.intent,
+        mode: 'pro',
+        executionId,
+      });
+    } catch (err) {
+      console.log(`  ✗ GENERATION FAILED: ${err.message}`);
+      turnResults.push({ turn: turnNum, error: err.message });
+      continue;
+    }
+    const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
+
+    const components = extractComponents(result);
+    const types = getTypes(components);
+    const validation = validateSchema(result.messages, { intent: turn.intent });
+    const text = getTextContent(components);
+
+    // Store executionId for next turn
+    if (!executionId) executionId = result.executionId;
+
+    // Check expectations
+    const issues = checkExpectations(components, turn.expect, priorTypes);
+
+    // Diff analysis vs prior turn
+    let diffReport = '';
+    if (priorTypes) {
+      const newTypes = types.filter(t => !priorTypes.includes(t));
+      const lostTypes = priorTypes.filter(t => !types.includes(t));
+      const delta = components.length - priorComponentCount;
+      diffReport = `  Delta: ${delta >= 0 ? '+' : ''}${delta} components`;
+      if (newTypes.length) diffReport += `  New types: ${newTypes.join(', ')}`;
+      if (lostTypes.length) diffReport += `  Lost types: ${lostTypes.join(', ')}`;
+    }
+
+    // Print results
+    console.log(`  Components: ${components.length} | Score: ${validation.score}/100 | Time: ${elapsed}s`);
+    console.log(`  Types (${types.length}): ${types.join(', ')}`);
+    if (diffReport) console.log(diffReport);
+
+    // Text content sample
+    const contentWords = text.split(/\s+/).slice(0, 30).join(' ');
+    console.log(`  Content sample: ${contentWords}...`);
+
+    // Validation details
+    const failedChecks = validation.checks?.filter(c => !c.passed) || [];
+    if (failedChecks.length) {
+      console.log(`  Failed checks: ${failedChecks.map(c => c.name + ': ' + (c.detail || '').slice(0, 60)).join('; ')}`);
+    }
+
+    // Expectations
+    if (issues.length === 0) {
+      console.log(`  ✓ All expectations met`);
+    } else {
+      for (const issue of issues) {
+        console.log(`  ✗ ${issue}`);
+      }
+    }
+    console.log('');
+
+    // Store for next turn comparison
+    priorTypes = types;
+    priorComponentCount = components.length;
+    turnResults.push({
+      turn: turnNum,
+      components: components.length,
+      types: types.length,
+      score: validation.score,
+      elapsed: parseFloat(elapsed),
+      issues: issues.length,
+      issueDetails: issues,
+    });
+  }
+
+  // Summary
+  console.log(`── Summary ${'─'.repeat(55)}`);
+  const totalIssues = turnResults.reduce((s, t) => s + (t.issues || 0), 0);
+  const avgScore = Math.round(turnResults.reduce((s, t) => s + (t.score || 0), 0) / turnResults.length);
+  const totalTime = turnResults.reduce((s, t) => s + (t.elapsed || 0), 0).toFixed(1);
+
+  console.log(`  Turns: ${turnResults.length} | Avg score: ${avgScore} | Total time: ${totalTime}s`);
+  console.log(`  Issues: ${totalIssues}`);
+  for (const t of turnResults) {
+    const icon = t.error ? '✗' : t.issues === 0 ? '✓' : '△';
+    console.log(`    ${icon} Turn ${t.turn}: ${t.components || 0} comps, score ${t.score || 0}, ${t.elapsed || 0}s${t.issues ? ` (${t.issues} issues)` : ''}`);
+  }
+  console.log('');
+
+  return { scenario: scenario.name, turns: turnResults, totalIssues, avgScore };
+}
+
+// ── Main ────────────────────────────────────────────────────────────
+
+const results = [];
+for (const scenario of SCENARIOS) {
+  const result = await runScenario(scenario);
+  results.push(result);
+}
+
+console.log(`${'═'.repeat(70)}`);
+console.log('  FINAL VERDICT');
+console.log(`${'═'.repeat(70)}`);
+const totalIssues = results.reduce((s, r) => s + r.totalIssues, 0);
+console.log(`  Scenarios: ${results.length} | Total issues: ${totalIssues}`);
+process.exit(totalIssues > 0 ? 1 : 0);

package/scripts/smoke-engine-registry.mjs

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+/**
+ * Smoke test for the Phase 5 engine registry dispatcher.
+ * Verifies:
+ *   - registry.pick() returns different functions for different engines
+ *   - generateUI({ engine: 'monolithic', mode: 'instant' }) works
+ *   - generateUI({ engine: 'zettel' }) works
+ *   - shape invariants hold on both paths
+ */
+import '../../../../scripts/load-env.mjs';
+import { pick, listEngines, ENGINES } from '../../compose/engines/registry.js';
+import { generateUI } from '../../compose/engine/generator.js';
+
+console.log('[smoke] engines registered:', listEngines().join(', '));
+
+// pick() sanity
+const monoInstant = pick({ engine: 'monolithic', mode: 'instant' });
+const monoPro = pick({ engine: 'monolithic', mode: 'pro' });
+const zettel = pick({ engine: 'zettel' });
+console.log('[smoke] pick monolithic/instant:', monoInstant === ENGINES['monolithic-instant'] ? 'ok' : 'FAIL');
+console.log('[smoke] pick monolithic/pro:    ', monoPro === ENGINES['monolithic-pro'] ? 'ok' : 'FAIL');
+console.log('[smoke] pick zettel:            ', zettel === ENGINES.zettel ? 'ok' : 'FAIL');
+console.log('[smoke] pick unknown → fallback:', pick({ engine: 'xxx', mode: 'xxx' }) === ENGINES['monolithic-instant'] ? 'ok' : 'FAIL');
+
+const intent = 'login form with email and password';
+
+// Monolithic instant
+const t1 = Date.now();
+const r1 = await generateUI({ intent, engine: 'monolithic', mode: 'instant' });
+console.log(`\n[mono/instant] ${Date.now() - t1}ms  msgs=${r1.messages?.length}  valid=${r1.validation?.valid}  score=${r1.validation?.score}`);
+
+// Zettel
+const t2 = Date.now();
+const r2 = await generateUI({ intent, engine: 'zettel' });
+console.log(`[zettel]       ${Date.now() - t2}ms  msgs=${r2.messages?.length}  valid=${r2.validation?.valid}  score=${r2.validation?.score}  strategy=${r2.strategy}  engine=${r2.engine}`);
+
+// Shape invariants
+const ok =
+  Array.isArray(r1.messages) && r1.executionId && r1.validation &&
+  Array.isArray(r2.messages) && r2.validation;
+console.log(`\n[smoke] shape invariants: ${ok ? 'ok' : 'FAIL'}`);
+
+if (!ok) process.exit(1);

package/scripts/smoke-merged.mjs

@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+/**
+ * MCP smoke test — exercises the merged a2ui-mcp server via a real MCP client.
+ * Verifies: boot, tool listing, generate_ui with engine=monolithic, generate_ui with engine=zettel, get_graph.
+ */
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const serverPath = join(__dirname, '..', 'server.js');
+
+const transport = new StdioClientTransport({
+  command: 'node',
+  args: [serverPath],
+  stderr: 'inherit',
+});
+
+const client = new Client({ name: 'smoke-merged', version: '0.1.0' }, { capabilities: {} });
+await client.connect(transport);
+
+const tools = await client.listTools();
+const toolNames = tools.tools.map((t) => t.name).sort();
+console.log(`TOOLS (${toolNames.length}):`, toolNames.join(', '));
+
+// 1. Monolithic engine
+const mono = await client.callTool({
+  name: 'generate_ui',
+  arguments: { intent: 'login form with email and password', engine: 'monolithic', mode: 'instant' },
+});
+const monoData = JSON.parse(mono.content[0].text);
+console.log(`MONOLITHIC: engine=${monoData.engine} msgs=${monoData.messages?.length} score=${monoData.validation?.score}`);
+
+// 2. Zettel engine
+const zettel = await client.callTool({
+  name: 'generate_ui',
+  arguments: { intent: 'login form with email and password', engine: 'zettel', mode: 'instant' },
+});
+const zettelData = JSON.parse(zettel.content[0].text);
+console.log(`ZETTEL: engine=${zettelData.engine} strategy=${zettelData.strategy} msgs=${zettelData.messages?.length} score=${zettelData.validation?.score} frags=${zettelData.fragments_used?.length}`);
+
+// 3. Zettel-only tool
+const graph = await client.callTool({ name: 'get_graph', arguments: {} });
+const graphData = JSON.parse(graph.content[0].text);
+console.log(`GRAPH: fragments=${Object.keys(graphData.fragments || {}).length} compositions=${Object.keys(graphData.compositions || {}).length}`);
+
+await client.close();
+console.log('OK');
+process.exit(0);

package/scripts/smoke-register-engine.mjs

@@ -0,0 +1,51 @@
+// Smoke test for OD-5 plugin engine registry.
+import { registerEngine, unregisterEngine, pick, listEngines, ENGINES } from '../../compose/engines/registry.js';
+
+let pass = 0, fail = 0;
+const t = (label, ok, detail = '') => {
+  if (ok) { console.log(`  ✓ ${label}`); pass++; }
+  else    { console.log(`  ✗ ${label}  ${detail}`); fail++; }
+};
+
+// Baseline
+t('four built-ins registered', listEngines().length === 4);
+
+// Happy path
+let customCalled = null;
+registerEngine('my-test', async (ctx) => {
+  customCalled = ctx;
+  return { executionId: ctx.executionId, messages: [], validation: { score: 100 }, strategy: 'test', engine: 'my-test' };
+});
+t('custom engine registered', listEngines().includes('my-test'));
+t('pick returns custom engine', pick({ engine: 'my-test' }) === ENGINES['my-test']);
+
+const res = await ENGINES['my-test']({ intent: 'hi', executionId: 'e1', storeId: null, llmAdapter: null });
+t('custom engine invocable', res.validation.score === 100 && res.strategy === 'test');
+
+// Reserved guard
+try { registerEngine('zettel', () => {}); t('reserved names rejected', false, 'zettel should have thrown'); }
+catch (e) { t('reserved names rejected (zettel)', /reserved/.test(e.message)); }
+
+try { registerEngine('monolithic-instant', () => {}); t('reserved rejected (monolithic-instant)', false); }
+catch (e) { t('reserved rejected (monolithic-instant)', /reserved/.test(e.message)); }
+
+// Type guards
+try { registerEngine('', () => {}); t('empty name rejected', false); }
+catch (e) { t('empty name rejected', /non-empty/.test(e.message)); }
+
+try { registerEngine('ok-name', null); t('non-function rejected', false); }
+catch (e) { t('non-function rejected', /function/.test(e.message)); }
+
+// Unregister
+t('unregister custom ok', unregisterEngine('my-test') === true && !listEngines().includes('my-test'));
+
+try { unregisterEngine('zettel'); t('unregister reserved rejected', false); }
+catch (e) { t('unregister reserved rejected', /reserved/.test(e.message)); }
+
+// Dispatch precedence — re-register + verify priority
+registerEngine('monolithic-alt', async () => ({ engine: 'monolithic-alt' }));
+t('custom with monolithic- prefix works', pick({ engine: 'monolithic-alt' }) === ENGINES['monolithic-alt']);
+unregisterEngine('monolithic-alt');
+
+console.log(`\n${pass} passed, ${fail} failed`);
+process.exit(fail ? 1 : 0);

package/scripts/smoke-searchable-select.mjs

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+/**
+ * Pure-logic smoke for <select-ui searchable> filter behavior.
+ *
+ * Rather than shim full DOM/popover machinery (JSDOM path was 50KB of shims),
+ * this test constructs the filter directly by parsing select.js's logic
+ * and confirms the substring-match contract against a canned option list.
+ *
+ * Full browser behavior is verified via `npm run dev` + manual QA;
+ * this is the CI-able minimum.
+ */
+import { readFileSync } from 'node:fs';
+
+const src = readFileSync(new URL('../../../web-components/components/select/select.js', import.meta.url), 'utf8');
+
+// Assertions on source-level contract (what shipped) rather than runtime
+const checks = [
+  [/searchable:\s*\{\s*type:\s*Boolean/, 'searchable property declared'],
+  [/freeText:\s*\{\s*type:\s*Boolean/, 'freeText property declared'],
+  [/attribute:\s*'free-text'/, 'free-text attribute wiring'],
+  [/#query\s*=\s*''/, '#query state field initialized'],
+  [/#applyFilter\(\)/, '#applyFilter() method defined'],
+  [/#onSearchInput\s*=/, '#onSearchInput handler defined'],
+  [/data-filtered-out/, 'data-filtered-out attribute used for hidden options'],
+  [/toLowerCase\(\)/, 'case-insensitive match'],
+  [/input\.addEventListener\('input'/, 'input listener wired'],
+  [/e\.key\s*===\s*'Escape'[\s\S]{0,200}this\.#query/, 'Escape clears query first'],
+  [/this\.freeText\s*&&\s*this\.#query/, 'free-text commit branch on Enter'],
+  [/\[role="option"\]:not\(\[aria-disabled\]\):not\(\[data-filtered-out\]\)/, 'focusOption excludes filtered'],
+];
+
+let pass = 0, fail = 0;
+for (const [re, label] of checks) {
+  if (re.test(src)) { console.log(`  ✓ ${label}`); pass++; }
+  else              { console.log(`  ✗ ${label}`); fail++; }
+}
+
+console.log(`\n${pass} passed, ${fail} failed`);
+process.exit(fail === 0 ? 0 : 1);

package/scripts/smoke-synthesis.mjs

@@ -0,0 +1,59 @@
+// Direct test of zettel generator with LLM adapter — no HTTP server needed.
+import '../../../../scripts/load-env.mjs';
+import { generateZettel, clearSession, getTurns } from '../../compose/engines/zettel/generator-adapter.js';
+
+// Minimal Anthropic adapter inline (mirrors what server.js makes).
+function makeAdapter() {
+  const key = process.env.ANTHROPIC_API_KEY;
+  if (!key) return null;
+  return {
+    name: 'anthropic',
+    async complete({ messages, systemPrompt }) {
+      const res = await fetch('https://api.anthropic.com/v1/messages', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json', 'x-api-key': key, 'anthropic-version': '2023-06-01' },
+        body: JSON.stringify({
+          model: 'claude-haiku-4-5-20251001',
+          max_tokens: 4096,
+          system: systemPrompt,
+          messages,
+        }),
+      });
+      if (!res.ok) throw new Error(`Anthropic ${res.status}: ${await res.text()}`);
+      const data = await res.json();
+      return { content: data.content?.[0]?.text || '' };
+    },
+  };
+}
+
+const llm = makeAdapter();
+console.log('[smoke] llm adapter:', llm ? 'available' : 'missing');
+
+async function run(label, args) {
+  const t = Date.now();
+  const r = await generateZettel(args);
+  const ms = Date.now() - t;
+  console.log(`\n--- ${label} ---`);
+  console.log(`  strategy       : ${r.strategy}`);
+  console.log(`  score          : ${r.validation?.score ?? '-'}`);
+  console.log(`  msgs           : ${r.messages?.length || 0}`);
+  console.log(`  composition    : ${r.composition || '-'}`);
+  console.log(`  fragments_used : ${(r.fragments_used || []).join(', ') || '-'}`);
+  console.log(`  sessionTurns   : ${r.sessionTurns || '-'}`);
+  console.log(`  elapsed        : ${ms}ms`);
+  if (r.error) console.log(`  error          : ${r.error}`);
+  return r;
+}
+
+// Test 1: strong retrieval match (no LLM needed)
+await run('retrieval (login form)', { intent: 'login form', sessionId: 'smoke-1', llmAdapter: llm });
+
+// Test 2: novel intent → LLM synthesis (turn 1, fresh)
+clearSession('smoke-2');
+await run('synthesis (recipe timer)', { intent: 'recipe timer with ingredient steps', sessionId: 'smoke-2', llmAdapter: llm });
+
+// Test 3: iteration on prior turn
+await run('iteration (add a logo)', { intent: 'add a logo above the heading', sessionId: 'smoke-2', llmAdapter: llm });
+
+console.log('\n[smoke] turns recorded for smoke-2:', getTurns('smoke-2').length);
+console.log('[smoke] done');

package/scripts/smoke-zettel.mjs

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+/** Smoke test: load library, resolve login-form, print resolved template. */
+import { loadAll, getAllFragments, getAllCompositions, searchAll, getGraph, getComposition } from './fragment-library.js';
+import { resolveComposition } from './composer.js';
+
+const boot = loadAll();
+console.log('boot:', boot);
+
+console.log('\n=== Fragments ===');
+for (const f of getAllFragments()) console.log(` - ${f.name} [${f.semantic_role}]`);
+
+console.log('\n=== Compositions ===');
+for (const c of getAllCompositions()) console.log(` - ${c.name} (${c.domain})`);
+
+console.log('\n=== Search: "login" ===');
+console.log(searchAll('login form password', { limit: 5 }));
+
+console.log('\n=== Search: "card header title" ===');
+console.log(searchAll('card header title', { limit: 5 }));
+
+console.log('\n=== Resolve login-form ===');
+const comp = getComposition('login-form');
+const resolved = resolveComposition(comp);
+console.log(`resolved ${resolved.length} nodes:`);
+for (const n of resolved) {
+  const kids = n.children ? `→[${n.children.join(',')}]` : '';
+  const text = n.textContent ? ` "${n.textContent}"` : '';
+  const label = n.label ? ` label="${n.label}"` : '';
+  console.log(`  ${n.id.padEnd(20)} ${n.component}${label}${text} ${kids}`);
+}
+
+console.log('\n=== Graph ===');
+const g = getGraph();
+console.log('fragments with usage:');
+for (const f of g.fragments) {
+  if (f.used_by.length) console.log(`  ${f.name} ← ${f.used_by.map(u => u.name).join(', ')}`);
+}