@aprovan/mcp-app-server 0.1.0-dev.4d82df8

package/src/__tests__/shim.test.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect } from "vitest";
+import { generateBridgeShim } from "../shim.js";
+
+describe("generateBridgeShim", () => {
+  it("exposes window.patchwork with subscribe/updateContext/fireEvent", () => {
+    const shim = generateBridgeShim({ namespaces: [] });
+    expect(shim).toContain("window.patchwork");
+    expect(shim).toContain("subscribe:");
+    expect(shim).toContain("updateContext:");
+    expect(shim).toContain("fireEvent:");
+  });
+
+  it("forwards calls to the parent shell over postMessage", () => {
+    const shim = generateBridgeShim({ namespaces: ["weather"] });
+    expect(shim).toContain("window.parent.postMessage");
+    expect(shim).toContain("'patchwork'");
+  });
+
+  it("creates a proxy for each service namespace", () => {
+    const shim = generateBridgeShim({ namespaces: ["weather", "stripe"] });
+    expect(shim).toContain('"weather"');
+    expect(shim).toContain('"stripe"');
+    expect(shim).toContain("new Proxy");
+    expect(shim).toContain("kind: 'service'");
+  });
+
+  it("sends a fire event for fireEvent calls", () => {
+    const shim = generateBridgeShim({ namespaces: [] });
+    expect(shim).toContain("kind: 'fire'");
+  });
+
+  it("sends a subscribe message for subscribe calls", () => {
+    const shim = generateBridgeShim({ namespaces: [] });
+    expect(shim).toContain("kind: 'subscribe'");
+  });
+
+  it("sends a context message for updateContext calls", () => {
+    const shim = generateBridgeShim({ namespaces: [] });
+    expect(shim).toContain("kind: 'context'");
+  });
+
+  it("listens for host messages and resolves pending requests", () => {
+    const shim = generateBridgeShim({ namespaces: ["weather"] });
+    expect(shim).toContain("'patchwork-host'");
+    expect(shim).toContain("stream-event");
+    expect(shim).toContain("p.resolve");
+    expect(shim).toContain("p.reject");
+  });
+
+  it("guards against double-injection", () => {
+    const shim = generateBridgeShim({ namespaces: [] });
+    expect(shim).toContain("if (window.patchwork) return");
+  });
+
+  it("is valid, evaluable JavaScript", () => {
+    const shim = generateBridgeShim({ namespaces: ["weather"] });
+    // Should parse without throwing.
+    expect(() => new Function(shim)).not.toThrow();
+  });
+});

package/src/__tests__/widget-store.test.ts

@@ -0,0 +1,188 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { WidgetStore, resetWidgetStore } from "../widget-store/store.js";
+import { MemoryBackend } from "./memory-backend.js";
+import type { Manifest, VirtualFile } from "@aprovan/patchwork-compiler";
+
+const TEST_MANIFEST: Manifest = {
+  name: "test-widget",
+  version: "0.1.0",
+  platform: "browser",
+  image: "@aprovan/patchwork-image-shadcn",
+};
+
+const SINGLE_FILE: VirtualFile[] = [
+  { path: "main.tsx", content: "export default () => <div>test</div>;" },
+];
+
+function createStore(): WidgetStore {
+  resetWidgetStore();
+  return new WidgetStore({ backend: new MemoryBackend() });
+}
+
+describe("WidgetStore", () => {
+  let store: WidgetStore;
+
+  beforeEach(() => {
+    store = createStore();
+  });
+
+  describe("saveWidget", () => {
+    it("persists raw widget files and returns stored metadata", async () => {
+      const result = await store.saveWidget("abc123", SINGLE_FILE, TEST_MANIFEST, "main.tsx");
+
+      expect(result.path).toBe("widgets/test-widget/abc123");
+      expect(result.resourceUri).toBe("ui://widgets/test-widget/abc123/view.html");
+      expect(result.files).toEqual(SINGLE_FILE);
+      expect(result.entry).toBe("main.tsx");
+      expect(result.manifest.name).toBe("test-widget");
+      expect(result.createdAt).toBeTypeOf("number");
+    });
+
+    it("persists multi-file projects with nested paths", async () => {
+      const files: VirtualFile[] = [
+        { path: "main.tsx", content: "import './ui/card';" },
+        { path: "ui/card.tsx", content: "export const Card = () => null;" },
+      ];
+      await store.saveWidget("def456", files, { ...TEST_MANIFEST, name: "multi" }, "main.tsx");
+
+      const widget = await store.getWidget("multi", "def456");
+      expect(widget!.files).toHaveLength(2);
+      expect(widget!.files.map((f) => f.path).sort()).toEqual(["main.tsx", "ui/card.tsx"]);
+    });
+
+    it("stores manifest with services metadata", async () => {
+      const manifest: Manifest = { ...TEST_MANIFEST, services: ["weather", "github"] };
+      const result = await store.saveWidget("svc123", SINGLE_FILE, manifest, "main.tsx");
+
+      expect(result.manifest.services).toEqual(["weather", "github"]);
+    });
+  });
+
+  describe("getWidget", () => {
+    it("retrieves stored raw files by name and hash", async () => {
+      await store.saveWidget("abc123", SINGLE_FILE, TEST_MANIFEST, "main.tsx");
+      const widget = await store.getWidget("test-widget", "abc123");
+
+      expect(widget).not.toBeNull();
+      expect(widget!.files).toEqual(SINGLE_FILE);
+      expect(widget!.manifest.name).toBe("test-widget");
+      expect(widget!.resourceUri).toBe("ui://widgets/test-widget/abc123/view.html");
+    });
+
+    it("returns null for non-existent widget", async () => {
+      const widget = await store.getWidget("nonexistent", "nothash");
+      expect(widget).toBeNull();
+    });
+
+    it("retrieves entry point from manifest", async () => {
+      await store.saveWidget("ent123", SINGLE_FILE, TEST_MANIFEST, "app.tsx");
+      const widget = await store.getWidget("test-widget", "ent123");
+
+      expect(widget!.entry).toBe("app.tsx");
+    });
+  });
+
+  describe("listWidgets", () => {
+    it("returns empty list when no widgets stored", async () => {
+      const widgets = await store.listWidgets();
+      expect(widgets).toEqual([]);
+    });
+
+    it("lists all stored widgets with metadata", async () => {
+      await store.saveWidget("abc123", SINGLE_FILE, TEST_MANIFEST, "main.tsx");
+      await store.saveWidget(
+        "def456",
+        SINGLE_FILE,
+        { ...TEST_MANIFEST, name: "other-widget", description: "Another widget" },
+        "main.tsx",
+      );
+
+      const widgets = await store.listWidgets();
+      expect(widgets).toHaveLength(2);
+      expect(widgets.map((w) => w.name)).toContain("test-widget");
+      expect(widgets.map((w) => w.name)).toContain("other-widget");
+    });
+
+    it("includes services and entry in listing", async () => {
+      await store.saveWidget(
+        "svc123",
+        SINGLE_FILE,
+        { ...TEST_MANIFEST, services: ["stripe"] },
+        "main.tsx",
+      );
+
+      const widgets = await store.listWidgets();
+      const entry = widgets.find((w) => w.name === "test-widget");
+      expect(entry!.services).toEqual(["stripe"]);
+      expect(entry!.entry).toBe("main.tsx");
+    });
+
+    it("returns widgets sorted by most recent first", async () => {
+      const store = createStore();
+      await store.saveWidget("old", SINGLE_FILE, { ...TEST_MANIFEST, name: "old-widget" }, "main.tsx");
+
+      await new Promise((r) => setTimeout(r, 10));
+
+      await store.saveWidget("new", SINGLE_FILE, { ...TEST_MANIFEST, name: "new-widget" }, "main.tsx");
+
+      const widgets = await store.listWidgets();
+      expect(widgets[0]!.name).toBe("new-widget");
+    });
+  });
+
+  describe("deleteWidget", () => {
+    it("deletes a stored widget", async () => {
+      await store.saveWidget("del123", SINGLE_FILE, TEST_MANIFEST, "main.tsx");
+      const deleted = await store.deleteWidget("test-widget", "del123");
+      expect(deleted).toBe(true);
+
+      const widget = await store.getWidget("test-widget", "del123");
+      expect(widget).toBeNull();
+    });
+
+    it("returns false for non-existent widget", async () => {
+      const deleted = await store.deleteWidget("nonexistent", "nothash");
+      expect(deleted).toBe(false);
+    });
+  });
+
+  describe("hasWidget", () => {
+    it("returns true for stored widget", async () => {
+      await store.saveWidget("has123", SINGLE_FILE, TEST_MANIFEST, "main.tsx");
+      expect(await store.hasWidget("test-widget", "has123")).toBe(true);
+    });
+
+    it("returns false for non-existent widget", async () => {
+      expect(await store.hasWidget("nonexistent", "nothash")).toBe(false);
+    });
+  });
+
+  describe("resourceUriFor", () => {
+    it("generates correct resource URI", () => {
+      const uri = store.resourceUriFor("my-widget", "abc123");
+      expect(uri).toBe("ui://widgets/my-widget/abc123/view.html");
+    });
+  });
+
+  describe("loadAll", () => {
+    it("loads all stored widgets", async () => {
+      await store.saveWidget("abc123", SINGLE_FILE, TEST_MANIFEST, "main.tsx");
+      await store.saveWidget(
+        "def456",
+        SINGLE_FILE,
+        { ...TEST_MANIFEST, name: "other-widget" },
+        "main.tsx",
+      );
+
+      const widgets = await store.loadAll();
+      expect(widgets).toHaveLength(2);
+      expect(widgets.map((w) => w.manifest.name)).toContain("test-widget");
+      expect(widgets.map((w) => w.manifest.name)).toContain("other-widget");
+    });
+
+    it("returns empty array when no widgets stored", async () => {
+      const widgets = await store.loadAll();
+      expect(widgets).toEqual([]);
+    });
+  });
+});

package/src/e2e-visual.ts

@@ -0,0 +1,148 @@
+import { mkdir, writeFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import cors from "cors";
+import express from "express";
+import { log, error } from "./logger.js";
+import {
+  REFERENCE_WIDGET_FILES,
+  REFERENCE_WIDGET_MANIFEST,
+} from "./reference-widgets/live-dashboard.js";
+import { startTunnel, stopTunnel } from "./tunnel.js";
+import { getWidgetStore, resetWidgetStore } from "./widget-store/index.js";
+
+const WIDGET_PORT = Number(process.env["WIDGET_PORT"] ?? 3002);
+const ARTIFACTS_DIR = resolve(process.cwd(), ".artifacts");
+const RUNTIME_DIR = fileURLToPath(new URL("../dist/runtime", import.meta.url));
+
+interface WidgetPreviewEntry {
+  name: string;
+  hash: string;
+  url: string;
+}
+
+function parseArgs(): { tunnel: boolean } {
+  return {
+    tunnel: process.argv.includes("--tunnel"),
+  };
+}
+
+async function saveReferenceWidgets(): Promise<Array<{ name: string; hash: string }>> {
+  resetWidgetStore();
+  const store = getWidgetStore();
+
+  const hash = "reference";
+  await store.saveWidget(hash, REFERENCE_WIDGET_FILES, REFERENCE_WIDGET_MANIFEST, "main.tsx");
+
+  return [{ name: REFERENCE_WIDGET_MANIFEST.name, hash }];
+}
+
+async function startWidgetServer(): Promise<void> {
+  if (!existsSync(RUNTIME_DIR)) {
+    throw new Error(`Runtime bundle missing at ${RUNTIME_DIR}. Run \`pnpm build:runtime\` first.`);
+  }
+
+  const app = express();
+  app.use(cors());
+  app.use("/runtime", express.static(RUNTIME_DIR));
+
+  const store = getWidgetStore();
+
+  app.get("/widget/:name/:hash/files", async (req, res) => {
+    const { name, hash } = req.params;
+    try {
+      const widget = await store.getWidget(name, hash);
+      if (!widget) {
+        res.status(404).json({ error: "Widget not found" });
+        return;
+      }
+      res.json({ files: widget.files, entry: widget.entry, manifest: widget.manifest });
+    } catch (err) {
+      error("e2e-visual", "Error serving widget files:", err);
+      res.status(500).json({ error: "Internal server error" });
+    }
+  });
+
+  app.get("/health", (_req, res) => {
+    res.json({ status: "ok", service: "patchwork-e2e-visual" });
+  });
+
+  await new Promise<void>((resolve) => {
+    app.listen(WIDGET_PORT, "0.0.0.0", () => {
+      log("e2e-visual", `Widget server listening on http://0.0.0.0:${WIDGET_PORT}`);
+      resolve();
+    });
+  });
+}
+
+function printSummaryTable(entries: WidgetPreviewEntry[]): void {
+  console.log("\n┌─────────────────────┬─────────────────────────────────────────────────┐");
+  console.log("│ Widget              │ Preview URL                                     │");
+  console.log("├─────────────────────┼─────────────────────────────────────────────────┤");
+  for (const entry of entries) {
+    const namePad = entry.name.padEnd(19);
+    const urlPad = entry.url.length > 47 ? entry.url : entry.url.padEnd(47);
+    console.log(`│ ${namePad} │ ${urlPad} │`);
+  }
+  console.log("└─────────────────────┴─────────────────────────────────────────────────┘\n");
+}
+
+async function savePreviewManifest(entries: WidgetPreviewEntry[]): Promise<void> {
+  await mkdir(ARTIFACTS_DIR, { recursive: true });
+  const manifestPath = resolve(ARTIFACTS_DIR, "preview-urls.json");
+  await writeFile(manifestPath, JSON.stringify({ generatedAt: new Date().toISOString(), widgets: entries }, null, 2));
+  log("e2e-visual", `Preview manifest saved to ${manifestPath}`);
+}
+
+async function main(): Promise<void> {
+  const { tunnel } = parseArgs();
+
+  log("e2e-visual", "Saving reference widgets...");
+  const widgets = await saveReferenceWidgets();
+  log("e2e-visual", `Saved ${widgets.length} widget(s)`);
+
+  log("e2e-visual", "Starting widget server...");
+  await startWidgetServer();
+
+  let baseUrl = `http://localhost:${WIDGET_PORT}`;
+
+  if (tunnel) {
+    log("e2e-visual", "Starting Cloudflare tunnel...");
+    try {
+      baseUrl = await startTunnel(WIDGET_PORT);
+      log("e2e-visual", `Tunnel established: ${baseUrl}`);
+    } catch (err) {
+      error("e2e-visual", "Failed to start tunnel, using localhost:", err);
+    }
+  }
+
+  const entries: WidgetPreviewEntry[] = widgets.map((w) => ({
+    name: w.name,
+    hash: w.hash,
+    url: `${baseUrl}/runtime/?widget=${w.name}/${w.hash}`,
+  }));
+
+  printSummaryTable(entries);
+  await savePreviewManifest(entries);
+
+  if (tunnel) {
+    log("e2e-visual", "Tunnel mode active. Press Ctrl+C to shut down cleanly.");
+    const shutdown = () => {
+      log("e2e-visual", "Shutting down...");
+      stopTunnel();
+      process.exit(0);
+    };
+    process.on("SIGINT", shutdown);
+    process.on("SIGTERM", shutdown);
+  } else {
+    log("e2e-visual", "Done (no tunnel). Use --tunnel for live preview URLs.");
+    process.exit(0);
+  }
+}
+
+main().catch((err: unknown) => {
+  error("e2e-visual", "Fatal error:", err);
+  stopTunnel();
+  process.exit(1);
+});