skybridge 0.0.0-dev.f03017e → 0.0.0-dev.f0394fc

package/dist/test/view.test.js

@@ -1,19 +1,34 @@
 import crypto from "node:crypto";
+import { Client, InMemoryTransport } from "@modelcontextprotocol/client";
 import { afterEach, beforeEach, describe, expect, it, vi, } from "vitest";
+import { TOOL_OUTPUT_WARNING_TOKENS } from "../context-warnings.js";
+import { Skybridge } from "../server/app.js";
 import { createMockExtra, createMockMcpServer, resetTestEnv, setTestEnv, } from "./utils.js";
 const mockManifest = {
-    "skybridge:view:my-widget": {
-        file: "assets/my-widget-abc123.js",
-        name: "my-widget",
+    "skybridge:view:my-view": {
+        file: "assets/my-view-abc123.js",
+        name: "my-view",
         isEntry: true,
     },
-    "skybridge:view:folder-widget": {
-        file: "assets/folder-widget-def456.js",
-        name: "folder-widget",
+    "skybridge:view:folder-view": {
+        file: "assets/folder-view-def456.js",
+        name: "folder-view",
         isEntry: true,
     },
     "style.css": { file: "style.css" },
 };
+// Mirrors `McpServer.computeViewVersionParam`. Tests recompute the expected
+// hash from the mocked manifest so they don't hardcode digest output.
+function expectedVersionParam(viewFile, styleFile) {
+    const hash = crypto
+        .createHash("sha256")
+        .update(viewFile)
+        .update("\0")
+        .update(styleFile)
+        .digest("hex")
+        .slice(0, 8);
+    return `?v=${hash}`;
+}
 const actual = vi.hoisted(() => require("node:fs"));
 vi.mock("node:fs", () => {
     const readFileSyncImpl = (path, ...args) => {
@@ -45,10 +60,10 @@ describe("McpServer.registerTool (unified API)", () => {
     it("should generate correct HTML for development mode", async () => {
         setTestEnv({ NODE_ENV: "development" });
         server.registerTool({
-            name: "my-widget",
+            name: "my-view",
             description: "Test tool",
             view: {
-                component: "my-widget",
+                component: "my-view",
                 description: "Test view",
             },
         }, vi.fn());
@@ -59,20 +74,24 @@ describe("McpServer.registerTool (unified API)", () => {
         const serverUrl = `http://${host}`;
         const hmrUrl = `ws://${host}`;
         const mockExtra = createMockExtra(host);
-        const result = await appsSdkResourceCallback(new URL("ui://widgets/apps-sdk/my-widget.html"), mockExtra);
+        const result = await appsSdkResourceCallback(new URL("ui://views/ext-apps/my-view.html"), mockExtra);
         expect(mockRegisterTool).toHaveBeenCalled();
         expect(result).toEqual({
             contents: [
                 {
-                    uri: "ui://widgets/apps-sdk/my-widget.html",
-                    mimeType: "text/html+skybridge",
+                    uri: "ui://views/ext-apps/my-view.html",
+                    mimeType: "text/html;profile=mcp-app",
                     text: expect.stringContaining('<div id="root"></div>'),
                     _meta: {
-                        "openai/widgetCSP": {
-                            resource_domains: [serverUrl],
-                            connect_domains: [serverUrl, hmrUrl],
+                        ui: {
+                            csp: {
+                                resourceDomains: [serverUrl],
+                                connectDomains: [serverUrl, hmrUrl],
+                                baseUriDomains: [serverUrl],
+                            },
+                            domain: serverUrl,
+                            description: "Test view",
                         },
-                        "openai/widgetDomain": serverUrl,
                         "openai/widgetDescription": "Test view",
                     },
                 },
@@ -80,15 +99,15 @@ describe("McpServer.registerTool (unified API)", () => {
         });
         expect(result.contents[0]?.text).toContain(`${serverUrl}/assets/@react-refresh`);
         expect(result.contents[0]?.text).toContain(`${serverUrl}/@vite/client`);
-        expect(result.contents[0]?.text).toContain(`${serverUrl}/_skybridge/view/my-widget`);
+        expect(result.contents[0]?.text).toContain(`${serverUrl}/_skybridge/view/my-view`);
     });
     it("should generate correct HTML for production mode", async () => {
         setTestEnv({ NODE_ENV: "production" });
         server.registerTool({
-            name: "my-widget",
+            name: "my-view",
             description: "Test tool",
             view: {
-                component: "my-widget",
+                component: "my-view",
                 description: "Test view",
             },
         }, vi.fn());
@@ -98,19 +117,24 @@ describe("McpServer.registerTool (unified API)", () => {
         const host = "myapp.com";
         const serverUrl = `https://${host}`;
         const mockExtra = createMockExtra(host);
-        const result = await appsSdkResourceCallback(new URL("ui://widgets/apps-sdk/my-widget.html"), mockExtra);
+        const versionedUri = `ui://views/ext-apps/my-view.html${expectedVersionParam("assets/my-view-abc123.js", "style.css")}`;
+        const result = await appsSdkResourceCallback(new URL(versionedUri), mockExtra);
         expect(result).toEqual({
             contents: [
                 {
-                    uri: "ui://widgets/apps-sdk/my-widget.html",
-                    mimeType: "text/html+skybridge",
+                    uri: versionedUri,
+                    mimeType: "text/html;profile=mcp-app",
                     text: expect.stringContaining('<div id="root"></div>'),
                     _meta: {
-                        "openai/widgetCSP": {
-                            resource_domains: [serverUrl],
-                            connect_domains: [serverUrl],
+                        ui: {
+                            csp: {
+                                resourceDomains: [serverUrl],
+                                connectDomains: [serverUrl],
+                                baseUriDomains: [serverUrl],
+                            },
+                            domain: serverUrl,
+                            description: "Test view",
                         },
-                        "openai/widgetDomain": serverUrl,
                         "openai/widgetDescription": "Test view",
                     },
                 },
@@ -118,18 +142,18 @@ describe("McpServer.registerTool (unified API)", () => {
         });
         expect(result.contents[0]?.text).not.toContain(`${serverUrl}/assets/@react-refresh`);
         expect(result.contents[0]?.text).not.toContain(`${serverUrl}@vite/client`);
-        expect(result.contents[0]?.text).toContain(`${serverUrl}/assets/assets/my-widget-abc123.js`);
+        expect(result.contents[0]?.text).toContain(`${serverUrl}/assets/assets/my-view-abc123.js`);
         expect(result.contents[0]?.text).toContain(`${serverUrl}/assets/style.css`);
     });
     it("should prefer x-alpic-forwarded-url when hashing Claude view domains", async () => {
         setTestEnv({ NODE_ENV: "production" });
         server.registerTool({
-            name: "my-widget",
+            name: "my-view",
             description: "Test tool",
-            view: { component: "my-widget", description: "Test view" },
+            view: { component: "my-view", description: "Test view" },
         }, vi.fn());
         const extAppsResourceCallback = mockRegisterResource.mock
-            .calls[1]?.[3];
+            .calls[0]?.[3];
         expect(extAppsResourceCallback).toBeDefined();
         const forwardedUrl = "https://everything-3a2c1264.staging.alpic.live/mcp?foo=bar";
         const expectedDomain = `${crypto
@@ -137,7 +161,7 @@ describe("McpServer.registerTool (unified API)", () => {
             .update(forwardedUrl)
             .digest("hex")
             .slice(0, 32)}.claudemcpcontent.com`;
-        const result = await extAppsResourceCallback(new URL("ui://widgets/ext-apps/my-widget.html"), createMockExtra("localhost:3000", {
+        const result = await extAppsResourceCallback(new URL(`ui://views/ext-apps/my-view.html${expectedVersionParam("assets/my-view-abc123.js", "style.css")}`), createMockExtra("localhost:3000", {
             headers: {
                 "user-agent": "Claude-User",
                 "x-alpic-forwarded-url": forwardedUrl,
@@ -154,52 +178,30 @@ describe("McpServer.registerTool (unified API)", () => {
                 description: "Test view",
                 domain: expectedDomain,
             },
+            "openai/widgetDescription": "Test view",
         });
     });
-    it("should register resources with correct hostType for both apps-sdk and ext-apps", async () => {
+    it("should register a single ext-apps resource", async () => {
         server.registerTool({
-            name: "my-widget",
+            name: "my-view",
             description: "Test tool",
             view: {
-                component: "my-widget",
+                component: "my-view",
                 description: "Test view",
                 prefersBorder: true,
             },
         }, vi.fn());
-        expect(mockRegisterResource).toHaveBeenCalledTimes(2);
-        const appsSdkCallback = mockRegisterResource.mock
+        expect(mockRegisterResource).toHaveBeenCalledTimes(1);
+        const resourceCallback = mockRegisterResource.mock
             .calls[0]?.[3];
         const host = "localhost:3000";
         const serverUrl = `http://${host}`;
         const hmrUrl = `ws://${host}`;
-        const appsSdkResult = await appsSdkCallback(new URL("ui://widgets/apps-sdk/my-widget.html"), createMockExtra(host));
-        expect(appsSdkResult).toEqual({
-            contents: [
-                {
-                    uri: "ui://widgets/apps-sdk/my-widget.html",
-                    mimeType: "text/html+skybridge",
-                    text: expect.stringContaining('<div id="root"></div>'),
-                    _meta: {
-                        "openai/widgetCSP": {
-                            resource_domains: [serverUrl],
-                            connect_domains: [serverUrl, hmrUrl],
-                        },
-                        "openai/widgetDomain": serverUrl,
-                        "openai/widgetDescription": "Test view",
-                        "openai/widgetPrefersBorder": true,
-                    },
-                },
-            ],
-        });
-        expect(appsSdkResult.contents[0]?.text).toContain('window.skybridge = { hostType: "apps-sdk", serverUrl: "http://localhost:3000" };');
-        const extAppsResourceCallback = mockRegisterResource.mock
-            .calls[1]?.[3];
-        expect(extAppsResourceCallback).toBeDefined();
-        const extAppsResult = await extAppsResourceCallback(new URL("ui://widgets/ext-apps/my-widget.html"), createMockExtra(host));
-        expect(extAppsResult).toEqual({
+        const result = await resourceCallback(new URL("ui://views/ext-apps/my-view.html"), createMockExtra(host));
+        expect(result).toEqual({
             contents: [
                 {
-                    uri: "ui://widgets/ext-apps/my-widget.html",
+                    uri: "ui://views/ext-apps/my-view.html",
                     mimeType: "text/html;profile=mcp-app",
                     text: expect.stringContaining('<div id="root"></div>'),
                     _meta: {
@@ -213,60 +215,78 @@ describe("McpServer.registerTool (unified API)", () => {
                             description: "Test view",
                             prefersBorder: true,
                         },
+                        "openai/widgetDescription": "Test view",
                     },
                 },
             ],
         });
-        expect(extAppsResult.contents[0]?.text).toContain('window.skybridge = { hostType: "mcp-app", serverUrl: "http://localhost:3000" };');
+        expect(result.contents[0]?.text).toContain('window.skybridge = { serverUrl: "http://localhost:3000" };');
     });
-    it("should register tool with ui.resourceUri metadata", async () => {
+    it("should advertise the single resource via ui.resourceUri only (no openai/outputTemplate)", async () => {
         server.registerTool({
-            name: "my-widget",
+            name: "my-view",
             description: "Test tool",
-            view: { component: "my-widget", description: "Test view" },
+            view: { component: "my-view", description: "Test view" },
         }, vi.fn());
-        expect(mockRegisterTool).toHaveBeenCalledTimes(1);
-        const toolCallArgs = mockRegisterTool.mock.calls[0];
-        const toolConfig = toolCallArgs?.[1];
-        expect(toolConfig._meta).toHaveProperty("ui");
-        expect(toolConfig._meta?.ui).toEqual({
-            resourceUri: "ui://widgets/ext-apps/my-widget.html",
-        });
+        const toolConfig = mockRegisterTool.mock.calls[0]?.[1];
+        const uri = "ui://views/ext-apps/my-view.html";
+        expect(toolConfig._meta?.ui?.resourceUri).toBe(uri);
+        expect(toolConfig._meta?.["ui/resourceUri"]).toBe(uri);
+        expect(toolConfig._meta?.["openai/outputTemplate"]).toBeUndefined();
     });
-    it("should register tool with openai/outputTemplate when apps-sdk only", async () => {
+    it("should not version view URIs in development", () => {
         server.registerTool({
-            name: "my-widget",
+            name: "my-view",
             description: "Test tool",
-            view: {
-                component: "my-widget",
-                description: "Test view",
-                hosts: ["apps-sdk"],
-            },
+            view: { component: "my-view", description: "Test view" },
         }, vi.fn());
-        expect(mockRegisterTool).toHaveBeenCalledTimes(1);
-        const toolCallArgs = mockRegisterTool.mock.calls[0];
-        const toolConfig = toolCallArgs?.[1];
-        expect(toolConfig._meta).not.toHaveProperty("ui");
-        expect(toolConfig._meta?.["openai/outputTemplate"]).toBe("ui://widgets/apps-sdk/my-widget.html");
+        const toolConfig = mockRegisterTool.mock.calls[0]?.[1];
+        expect(toolConfig._meta?.["openai/outputTemplate"]).toBeUndefined();
+        expect(toolConfig._meta?.ui?.resourceUri).toBe("ui://views/ext-apps/my-view.html");
+        // The URI registered with the resource handler must match ui.resourceUri
+        // exactly so the SDK can resolve `resources/read` requests.
+        expect(mockRegisterResource.mock.calls[0]?.[1]).toBe("ui://views/ext-apps/my-view.html");
     });
-    it("should register tool with ui.resourceUri only when mcp-app only", async () => {
+    it("should append a stable content hash to view URIs in production", () => {
+        setTestEnv({ NODE_ENV: "production" });
         server.registerTool({
-            name: "my-widget",
+            name: "my-view",
             description: "Test tool",
-            view: {
-                component: "my-widget",
-                description: "Test view",
-                hosts: ["mcp-app"],
-            },
+            view: { component: "my-view", description: "Test view" },
         }, vi.fn());
-        expect(mockRegisterTool).toHaveBeenCalledTimes(1);
-        const toolCallArgs = mockRegisterTool.mock.calls[0];
-        const toolConfig = toolCallArgs?.[1];
-        expect(toolConfig._meta).toHaveProperty("ui");
-        expect(toolConfig._meta?.ui).toEqual({
-            resourceUri: "ui://widgets/ext-apps/my-widget.html",
-        });
+        const expected = expectedVersionParam("assets/my-view-abc123.js", "style.css");
+        const toolConfig = mockRegisterTool.mock.calls[0]?.[1];
         expect(toolConfig._meta?.["openai/outputTemplate"]).toBeUndefined();
+        expect(toolConfig._meta?.ui?.resourceUri).toBe(`ui://views/ext-apps/my-view.html${expected}`);
+        expect(mockRegisterResource.mock.calls[0]?.[1]).toBe(`ui://views/ext-apps/my-view.html${expected}`);
+    });
+    it("should produce different version params for views with different bundles", () => {
+        setTestEnv({ NODE_ENV: "production" });
+        server.registerTool({
+            name: "my-view",
+            description: "First tool",
+            view: { component: "my-view" },
+        }, vi.fn());
+        server.registerTool({
+            name: "folder-view",
+            description: "Second tool",
+            view: { component: "folder-view" },
+        }, vi.fn());
+        const myviewTemplate = mockRegisterTool.mock.calls[0][1]._meta?.ui?.resourceUri;
+        const folderviewTemplate = mockRegisterTool.mock.calls[1][1]._meta?.ui?.resourceUri;
+        expect(myviewTemplate).not.toEqual(folderviewTemplate);
+        expect(myviewTemplate).toMatch(/\?v=[0-9a-f]{8}$/);
+        expect(folderviewTemplate).toMatch(/\?v=[0-9a-f]{8}$/);
+    });
+    it("should fall back to bare URI in production when manifest is missing", () => {
+        setTestEnv({ NODE_ENV: "production" });
+        server.registerTool({
+            name: "unknown-view",
+            description: "Test tool",
+            view: { component: "unknown-view" },
+        }, vi.fn());
+        const toolConfig = mockRegisterTool.mock.calls[0]?.[1];
+        expect(toolConfig._meta?.ui?.resourceUri).toBe("ui://views/ext-apps/unknown-view.html");
     });
     it("should inject viewUUID into _meta of tool callback results", async () => {
         const mockToolCallback = vi.fn().mockResolvedValue({
@@ -274,9 +294,9 @@ describe("McpServer.registerTool (unified API)", () => {
             structuredContent: { data: "test" },
         });
         server.registerTool({
-            name: "my-widget",
+            name: "my-view",
             description: "Test tool",
-            view: { component: "my-widget", description: "Test view" },
+            view: { component: "my-view", description: "Test view" },
         }, mockToolCallback);
         const wrappedCallback = mockRegisterTool.mock.calls[0]?.[2];
         expect(wrappedCallback).toBeDefined();
@@ -286,6 +306,21 @@ describe("McpServer.registerTool (unified API)", () => {
         expect(typeof result._meta?.viewUUID).toBe("string");
         expect(result._meta?.viewUUID).toMatch(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/);
     });
+    it("warns when a tool callback returns large model-visible output", async () => {
+        const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => { });
+        server.registerTool({ name: "large-output", description: "Test tool" }, vi.fn().mockResolvedValue({
+            content: [
+                {
+                    type: "text",
+                    text: "x".repeat(TOOL_OUTPUT_WARNING_TOKENS * 4),
+                },
+            ],
+        }));
+        const wrappedCallback = mockRegisterTool.mock.calls[0]?.[2];
+        await wrappedCallback({}, {});
+        expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('Tool "large-output" returned'));
+        warnSpy.mockRestore();
+    });
     it("should preserve existing _meta when injecting viewUUID", async () => {
         const mockToolCallback = vi.fn().mockResolvedValue({
             content: [{ type: "text", text: "result" }],
@@ -293,9 +328,9 @@ describe("McpServer.registerTool (unified API)", () => {
             _meta: { requestId: "req-123", cached: true },
         });
         server.registerTool({
-            name: "my-widget",
+            name: "my-view",
             description: "Test tool",
-            view: { component: "my-widget", description: "Test view" },
+            view: { component: "my-view", description: "Test view" },
         }, mockToolCallback);
         const wrappedCallback = mockRegisterTool.mock.calls[0]?.[2];
         const result = await wrappedCallback({}, {});
@@ -309,9 +344,9 @@ describe("McpServer.registerTool (unified API)", () => {
             structuredContent: {},
         });
         server.registerTool({
-            name: "my-widget",
+            name: "my-view",
             description: "Test tool",
-            view: { component: "my-widget", description: "Test view" },
+            view: { component: "my-view", description: "Test view" },
         }, mockToolCallback);
         const wrappedCallback = mockRegisterTool.mock.calls[0]?.[2];
         const result1 = await wrappedCallback({}, {});
@@ -404,11 +439,12 @@ describe("McpServer.registerTool (unified API)", () => {
         const host = "localhost:3000";
         const serverUrl = `http://${host}`;
         const hmrUrl = `ws://${host}`;
-        const result = await appsSdkCallback(new URL("ui://widgets/apps-sdk/csp-tool.html"), createMockExtra(host));
+        const result = await appsSdkCallback(new URL("ui://views/ext-apps/csp-tool.html"), createMockExtra(host));
         const meta = result.contents[0]?._meta;
-        expect(meta["openai/widgetCSP"]).toEqual({
-            resource_domains: [serverUrl, "https://cdn.example.com"],
-            connect_domains: [serverUrl, hmrUrl, "https://api.example.com"],
+        expect(meta.ui?.csp).toEqual({
+            resourceDomains: [serverUrl, "https://cdn.example.com"],
+            connectDomains: [serverUrl, hmrUrl, "https://api.example.com"],
+            baseUriDomains: [serverUrl],
         });
     });
     it("should let view._meta override framework-computed keys", async () => {
@@ -420,18 +456,20 @@ describe("McpServer.registerTool (unified API)", () => {
                 description: "Test view",
                 csp: { connectDomains: ["https://api.x.com"] },
                 _meta: {
-                    "openai/widgetCSP": {
-                        connect_domains: ["https://api.y.com"],
+                    ui: {
+                        csp: {
+                            connectDomains: ["https://api.y.com"],
+                        },
                     },
                 },
             },
         }, vi.fn());
         const appsSdkCallback = mockRegisterResource.mock
             .calls[0]?.[3];
-        const result = await appsSdkCallback(new URL("ui://widgets/apps-sdk/override-tool.html"), createMockExtra("localhost:3000"));
+        const result = await appsSdkCallback(new URL("ui://views/ext-apps/override-tool.html"), createMockExtra("localhost:3000"));
         const meta = result.contents[0]?._meta;
-        expect(meta["openai/widgetCSP"]).toEqual({
-            connect_domains: ["https://api.y.com"],
+        expect(meta.ui?.csp).toEqual({
+            connectDomains: ["https://api.y.com"],
         });
     });
     it("should pass user _meta keys through to tool config", () => {
@@ -451,4 +489,52 @@ describe("McpServer.registerTool (unified API)", () => {
         expect(toolConfig._meta?.["acme.com/category"]).toBe("utility");
     });
 });
+describe("resources/list view _meta injection", () => {
+    afterEach(() => resetTestEnv());
+    it("attaches CSP, domain, and connectDomains _meta to view resources at list time", async () => {
+        setTestEnv({ NODE_ENV: "production" });
+        const app = new Skybridge({
+            name: "test",
+            version: "1.0.0",
+            handler: (server) => server.registerTool({
+                name: "start",
+                description: "Start",
+                view: {
+                    component: "my-view",
+                    description: "Onboarding deck",
+                    domain: "skybridge.tech",
+                    csp: {
+                        resourceDomains: ["https://fonts.googleapis.com"],
+                        redirectDomains: ["https://docs.skybridge.tech"],
+                    },
+                },
+            }, vi.fn().mockResolvedValue({
+                content: [{ type: "text", text: "ok" }],
+                structuredContent: {},
+            })),
+        });
+        const instance = await app.createServerInstance();
+        const client = new Client({ name: "test-client", version: "1.0.0" });
+        const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair();
+        await instance.connect(serverTransport);
+        await client.connect(clientTransport);
+        const { resources } = await client.listResources();
+        await client.close();
+        await instance.close();
+        const appsSdk = resources.find((r) => r.uri.includes("apps-sdk"));
+        const extApps = resources.find((r) => r.uri.includes("ext-apps"));
+        expect(appsSdk).toBeUndefined();
+        expect(extApps?._meta).toBeDefined();
+        const extUi = extApps._meta?.ui;
+        expect(extUi?.csp?.connectDomains?.length).toBeGreaterThan(0);
+        expect(extUi?.csp?.resourceDomains).toContain("https://fonts.googleapis.com");
+        expect(extUi?.domain).toBe("skybridge.tech");
+        const meta = extApps?._meta;
+        expect(meta["openai/widgetDescription"]).toBe("Onboarding deck");
+        expect(meta["openai/widgetCSP"]?.redirect_domains).toEqual([
+            "https://docs.skybridge.tech",
+        ]);
+        expect(meta.ui?.csp).not.toHaveProperty("redirectDomains");
+    });
+});
 //# sourceMappingURL=view.test.js.map