@aexol/spectral 0.2.5 → 0.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/cli.js +10 -47
  2. package/dist/mcp/agent-dir.js +18 -0
  3. package/dist/mcp/app-bridge.bundle.js +67 -0
  4. package/dist/mcp/commands.js +263 -0
  5. package/dist/mcp/config.js +532 -0
  6. package/dist/mcp/consent-manager.js +59 -0
  7. package/dist/mcp/direct-tools.js +354 -0
  8. package/dist/mcp/errors.js +165 -0
  9. package/dist/mcp/glimpse-ui.js +67 -0
  10. package/dist/mcp/host-html-template.js +412 -0
  11. package/dist/mcp/index.js +291 -0
  12. package/dist/mcp/init.js +280 -0
  13. package/dist/mcp/lifecycle.js +79 -0
  14. package/dist/mcp/logger.js +130 -0
  15. package/dist/mcp/mcp-auth-flow.js +283 -0
  16. package/dist/mcp/mcp-auth.js +226 -0
  17. package/dist/mcp/mcp-callback-server.js +225 -0
  18. package/dist/mcp/mcp-oauth-provider.js +243 -0
  19. package/dist/mcp/mcp-panel.js +646 -0
  20. package/dist/mcp/mcp-setup-panel.js +485 -0
  21. package/dist/mcp/metadata-cache.js +158 -0
  22. package/dist/mcp/npx-resolver.js +385 -0
  23. package/dist/mcp/oauth-handler.js +54 -0
  24. package/dist/mcp/onboarding-state.js +56 -0
  25. package/dist/mcp/proxy-modes.js +714 -0
  26. package/dist/mcp/resource-tools.js +14 -0
  27. package/dist/mcp/sampling-handler.js +206 -0
  28. package/dist/mcp/server-manager.js +301 -0
  29. package/dist/mcp/state.js +1 -0
  30. package/dist/mcp/tool-metadata.js +128 -0
  31. package/dist/mcp/tool-registrar.js +43 -0
  32. package/dist/mcp/types.js +93 -0
  33. package/dist/mcp/ui-resource-handler.js +113 -0
  34. package/dist/mcp/ui-server.js +522 -0
  35. package/dist/mcp/ui-session.js +306 -0
  36. package/dist/mcp/ui-stream-types.js +58 -0
  37. package/dist/mcp/utils.js +104 -0
  38. package/dist/mcp/vitest.config.js +13 -0
  39. package/package.json +6 -3
package/dist/mcp/host-html-template.js ADDED
@@ -0,0 +1,412 @@
1
+ // Use locally bundled AppBridge to avoid CDN Zod bundling issues
2
+ const DEFAULT_APP_BRIDGE_MODULE_URL = "/app-bridge.bundle.js";
3
+ export function buildHostHtmlTemplate(input) {
4
+ const cspContent = buildCspMetaContent(input.resource.meta.csp);
5
+ const resourceHtml = applyCspMeta(input.resource.html, cspContent);
6
+ const hostContext = input.hostContext ?? {};
7
+ const sessionToken = safeInlineJSON(input.sessionToken);
8
+ const toolArgs = safeInlineJSON(input.toolArgs);
9
+ const uiHtml = safeInlineJSON(resourceHtml);
10
+ const serverName = safeInlineJSON(input.serverName);
11
+ const toolName = safeInlineJSON(input.toolName);
12
+ const hostContextJson = safeInlineJSON(hostContext);
13
+ const allowAttribute = safeInlineJSON(input.allowAttribute);
14
+ const requireToolConsent = safeInlineJSON(input.requireToolConsent);
15
+ const cacheToolConsent = safeInlineJSON(input.cacheToolConsent);
16
+ const moduleUrl = safeInlineJSON(input.appBridgeModuleUrl ?? DEFAULT_APP_BRIDGE_MODULE_URL);
17
+ return `<!doctype html>
18
+ <html lang="en">
19
+ <head>
20
+ <meta charset="utf-8" />
21
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
22
+ <title>MCP UI - ${escapeHtml(input.serverName)} / ${escapeHtml(input.toolName)}</title>
23
+ <style>
24
+ :root {
25
+ color-scheme: light dark;
26
+ --bg: #0f1115;
27
+ --surface: #181c22;
28
+ --text: #ecf0f5;
29
+ --muted: #a9b2bf;
30
+ --accent: #43c0ff;
31
+ --border: rgba(255, 255, 255, 0.12);
32
+ --good: #34d399;
33
+ --warn: #fbbf24;
34
+ --bad: #f87171;
35
+ }
36
+ @media (prefers-color-scheme: light) {
37
+ :root {
38
+ --bg: #f6f7fb;
39
+ --surface: #ffffff;
40
+ --text: #1d2939;
41
+ --muted: #667085;
42
+ --accent: #0ea5e9;
43
+ --border: rgba(15, 23, 42, 0.14);
44
+ --good: #059669;
45
+ --warn: #b45309;
46
+ --bad: #b91c1c;
47
+ }
48
+ }
49
+ * { box-sizing: border-box; }
50
+ html, body { margin: 0; padding: 0; height: 100%; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
51
+ body { display: flex; flex-direction: column; min-height: 100vh; }
52
+ header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
53
+ .title { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
54
+ .server { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
55
+ .tool { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
56
+ .badge { border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; font-size: 11px; color: var(--muted); white-space: nowrap; }
57
+ .controls { display: flex; gap: 8px; align-items: center; }
58
+ .status { font-size: 12px; color: var(--muted); white-space: nowrap; }
59
+ button { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 12px; }
60
+ button.primary { border-color: color-mix(in srgb, var(--good) 40%, var(--border) 60%); color: var(--good); }
61
+ button.danger { border-color: color-mix(in srgb, var(--bad) 40%, var(--border) 60%); color: var(--bad); }
62
+ button:hover { background: color-mix(in srgb, var(--surface) 75%, var(--accent) 25%); }
63
+ main { flex: 1; min-height: 0; padding: 10px; display: flex; }
64
+ iframe { width: 100%; height: 100%; border: 1px solid var(--border); border-radius: 10px; background: white; }
65
+ .overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 90%, black 10%); display: none; align-items: center; justify-content: center; z-index: 2; }
66
+ .overlay.visible { display: flex; }
67
+ .panel { width: min(680px, calc(100vw - 40px)); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
68
+ .panel h2 { margin: 0 0 8px; font-size: 16px; }
69
+ .panel p { margin: 0; color: var(--muted); line-height: 1.4; font-size: 14px; white-space: pre-wrap; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <header>
74
+ <div class="title">
75
+ <span class="server">MCP · <span id="server-name"></span></span>
76
+ <span class="tool" id="tool-name"></span>
77
+ <span class="badge">Sandboxed</span>
78
+ </div>
79
+ <div class="controls">
80
+ <span class="status" id="status">Loading UI...</span>
81
+ <button class="primary" id="done-btn" title="Cmd/Ctrl+Enter">Done</button>
82
+ <button class="danger" id="cancel-btn" title="Escape">Cancel</button>
83
+ </div>
84
+ </header>
85
+ <main>
86
+ <iframe id="mcp-app" referrerpolicy="no-referrer"></iframe>
87
+ </main>
88
+ <div class="overlay" id="error-overlay">
89
+ <div class="panel">
90
+ <h2>UI Error</h2>
91
+ <p id="error-message"></p>
92
+ </div>
93
+ </div>
94
+ <script type="module">
95
+ import { AppBridge, PostMessageTransport } from ${moduleUrl};
96
+
97
+ const SESSION_TOKEN = ${sessionToken};
98
+ const SERVER_NAME = ${serverName};
99
+ const TOOL_NAME = ${toolName};
100
+ const TOOL_ARGS = ${toolArgs};
101
+ const HOST_CONTEXT = ${hostContextJson};
102
+ const ALLOW_ATTRIBUTE = ${allowAttribute};
103
+ const REQUIRE_TOOL_CONSENT = ${requireToolConsent};
104
+ const CACHE_TOOL_CONSENT = ${cacheToolConsent};
105
+ const STREAM_CONTEXT_KEY = "pi-mcp-adapter/stream";
106
+ const STREAM_PATCH_METHOD = "notifications/pi-mcp-adapter/ui-result-patch";
107
+
108
+ const iframe = document.getElementById("mcp-app");
109
+ const statusNode = document.getElementById("status");
110
+ const doneBtn = document.getElementById("done-btn");
111
+ const cancelBtn = document.getElementById("cancel-btn");
112
+ const errorOverlay = document.getElementById("error-overlay");
113
+ const errorMessage = document.getElementById("error-message");
114
+
115
+ document.getElementById("server-name").textContent = SERVER_NAME;
116
+ document.getElementById("tool-name").textContent = TOOL_NAME;
117
+
118
+ const setStatus = (text, isError = false) => {
119
+ statusNode.textContent = text;
120
+ statusNode.style.color = isError ? "var(--bad)" : "var(--muted)";
121
+ };
122
+
123
+ const showError = (message) => {
124
+ errorMessage.textContent = message;
125
+ errorOverlay.classList.add("visible");
126
+ setStatus("Error", true);
127
+ };
128
+
129
+ const post = async (endpoint, params) => {
130
+ const response = await fetch(endpoint, {
131
+ method: "POST",
132
+ headers: { "Content-Type": "application/json" },
133
+ body: JSON.stringify({ token: SESSION_TOKEN, params }),
134
+ });
135
+
136
+ const body = await response.json().catch(() => ({ ok: false, error: "Invalid JSON response" }));
137
+ if (!response.ok || !body.ok) {
138
+ const message = body.error || ("HTTP " + response.status);
139
+ throw new Error(message);
140
+ }
141
+ return body.result ?? {};
142
+ };
143
+
144
+ let consentGranted = !REQUIRE_TOOL_CONSENT;
145
+ const initialStreamContext = HOST_CONTEXT?.[STREAM_CONTEXT_KEY];
146
+ const streamMode = initialStreamContext?.mode === "stream-first" ? "stream-first" : "eager";
147
+
148
+ const bridge = new AppBridge(
149
+ null,
150
+ { name: "pi", version: "1.0.0" },
151
+ { serverTools: {}, openLinks: {}, logging: {}, updateModelContext: {}, message: {} },
152
+ { hostContext: HOST_CONTEXT }
153
+ );
154
+
155
+ bridge.oncalltool = async (params) => {
156
+ if (!consentGranted) {
157
+ const accepted = window.confirm("Allow this UI to call server tools for this session?");
158
+ if (!accepted) {
159
+ await post("/proxy/ui/consent", { approved: false }).catch(() => {});
160
+ return {
161
+ isError: true,
162
+ content: [{ type: "text", text: "Tool call denied by user." }],
163
+ };
164
+ }
165
+ await post("/proxy/ui/consent", { approved: true });
166
+ if (CACHE_TOOL_CONSENT) {
167
+ consentGranted = true;
168
+ }
169
+ }
170
+ const result = await post("/proxy/tools/call", params);
171
+ // Notify agent about the tool call
172
+ await post("/proxy/ui/message", {
173
+ type: "intent",
174
+ intent: "call_tool",
175
+ params: { tool: params.name, arguments: params.arguments, isError: result.isError }
176
+ }).catch(() => {});
177
+ return result;
178
+ };
179
+
180
+ bridge.onmessage = async (params) => post("/proxy/ui/message", params);
181
+ bridge.onupdatemodelcontext = async (params) => post("/proxy/ui/context", params);
182
+
183
+ // Also listen for raw postMessage events with custom types (notify, prompt, intent, etc.)
184
+ // These bypass the AppBridge protocol but are used by some MCP UI implementations
185
+ window.addEventListener("message", async (event) => {
186
+ const data = event.data;
187
+ if (!data || typeof data !== "object") return;
188
+
189
+ // Skip AppBridge protocol messages (handled by bridge)
190
+ if (data.jsonrpc || (typeof data.method === "string" && (data.method.startsWith("app/") || data.method.startsWith("host/")))) return;
191
+
192
+ // Handle raw UI action messages
193
+ const msgType = data.type;
194
+ if (typeof msgType !== "string") return;
195
+
196
+ if (msgType === "notify" || msgType === "prompt" || msgType === "intent" || msgType === "message") {
197
+ // Standard MCP-UI types - preserve their semantics
198
+ // Support both { type, payload: {...} } and { type, field: value } formats
199
+ const { type: _, payload, ...directFields } = data;
200
+ await post("/proxy/ui/message", { type: msgType, ...directFields, ...(payload || {}) }).catch(() => {});
201
+ } else if (!msgType.startsWith("ui-lifecycle-") && !msgType.startsWith("ui-message-")) {
202
+ // Any other custom type - forward as intent with type as intent name
203
+ // (Skip internal lifecycle/ack messages)
204
+ const payload = data.payload || {};
205
+ await post("/proxy/ui/message", {
206
+ type: "intent",
207
+ intent: msgType,
208
+ params: payload,
209
+ }).catch(() => {});
210
+ }
211
+ });
212
+ bridge.ondownloadfile = async (params) => post("/proxy/ui/download-file", params);
213
+ bridge.onrequestdisplaymode = async (params) => post("/proxy/ui/request-display-mode", params);
214
+ bridge.onopenlink = async (params) => {
215
+ const result = await post("/proxy/ui/open-link", params);
216
+ if (!result.isError) {
217
+ window.open(params.url, "_blank", "noopener,noreferrer");
218
+ // Notify agent about the link open
219
+ await post("/proxy/ui/message", {
220
+ type: "intent",
221
+ intent: "open_link",
222
+ params: { url: params.url }
223
+ }).catch(() => {});
224
+ }
225
+ return result;
226
+ };
227
+
228
+ bridge.oninitialized = () => {
229
+ if (streamMode !== "stream-first") {
230
+ bridge.sendToolInput({ arguments: TOOL_ARGS });
231
+ }
232
+ setStatus(streamMode === "stream-first" ? "Streaming…" : "Connected");
233
+ };
234
+
235
+ bridge.onsizechange = ({ width, height }) => {
236
+ if (typeof width === "number" && width > 0) {
237
+ iframe.style.minWidth = Math.min(width, window.innerWidth - 24) + "px";
238
+ }
239
+ if (typeof height === "number" && height > 0) {
240
+ iframe.style.height = Math.max(height, 320) + "px";
241
+ }
242
+ };
243
+
244
+ if (ALLOW_ATTRIBUTE) {
245
+ iframe.setAttribute("allow", ALLOW_ATTRIBUTE);
246
+ }
247
+
248
+ // Connect bridge BEFORE loading iframe to ensure we're listening when the app sends ui/initialize
249
+ try {
250
+ const transport = new PostMessageTransport(iframe.contentWindow, null);
251
+ await bridge.connect(transport);
252
+ } catch (error) {
253
+ console.error("[host] Bridge connection failed:", error);
254
+ showError("Failed to initialize AppBridge: " + String(error));
255
+ }
256
+
257
+ const iframeLoaded = new Promise((resolve) => {
258
+ iframe.onload = resolve;
259
+ });
260
+ iframe.src = "/ui-app?session=" + encodeURIComponent(SESSION_TOKEN);
261
+ await iframeLoaded;
262
+
263
+ const eventSource = new EventSource("/events?session=" + encodeURIComponent(SESSION_TOKEN));
264
+ eventSource.addEventListener("tool-input", (event) => {
265
+ try {
266
+ bridge.sendToolInput(JSON.parse(event.data));
267
+ } catch (error) {
268
+ showError("Failed to forward tool input: " + String(error));
269
+ }
270
+ });
271
+ eventSource.addEventListener("tool-result", (event) => {
272
+ try {
273
+ bridge.sendToolResult(JSON.parse(event.data));
274
+ } catch (error) {
275
+ showError("Failed to forward tool result: " + String(error));
276
+ }
277
+ });
278
+ eventSource.addEventListener("tool-cancelled", (event) => {
279
+ try {
280
+ bridge.sendToolCancelled(JSON.parse(event.data));
281
+ } catch (error) {
282
+ showError("Failed to forward cancellation: " + String(error));
283
+ }
284
+ });
285
+ eventSource.addEventListener("result-patch", async (event) => {
286
+ try {
287
+ await bridge.notification({
288
+ method: STREAM_PATCH_METHOD,
289
+ params: JSON.parse(event.data),
290
+ });
291
+ } catch (error) {
292
+ showError("Failed to forward stream patch: " + String(error));
293
+ }
294
+ });
295
+ eventSource.addEventListener("host-context", (event) => {
296
+ try {
297
+ bridge.setHostContext(JSON.parse(event.data));
298
+ } catch {}
299
+ });
300
+ eventSource.addEventListener("session-complete", async () => {
301
+ await bridge.teardownResource({}).catch(() => {});
302
+ eventSource.close();
303
+ window.close();
304
+ });
305
+ eventSource.onerror = () => {
306
+ setStatus("Connection lost", true);
307
+ };
308
+
309
+ const heartbeat = setInterval(() => {
310
+ post("/proxy/ui/heartbeat", {}).catch(() => {});
311
+ }, 10000);
312
+
313
+ const complete = async (reason) => {
314
+ try {
315
+ await post("/proxy/ui/complete", { reason });
316
+ } catch {}
317
+ try {
318
+ await bridge.teardownResource({});
319
+ } catch {}
320
+ clearInterval(heartbeat);
321
+ eventSource.close();
322
+ window.close();
323
+ };
324
+
325
+ doneBtn.addEventListener("click", () => complete("done"));
326
+ cancelBtn.addEventListener("click", () => complete("cancel"));
327
+ window.addEventListener("keydown", (event) => {
328
+ if (event.key === "Escape") {
329
+ event.preventDefault();
330
+ complete("cancel");
331
+ } else if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
332
+ event.preventDefault();
333
+ complete("done");
334
+ }
335
+ });
336
+ </script>
337
+ </body>
338
+ </html>`;
339
+ }
340
+ export function buildCspMetaContent(csp) {
341
+ if (!csp)
342
+ return undefined;
343
+ const directives = [];
344
+ directives.push("default-src 'none'");
345
+ const scriptSrc = toDirective("script-src", csp.scriptDomains);
346
+ const styleSrc = toDirective("style-src", csp.styleDomains);
347
+ const fontSrc = toDirective("font-src", csp.fontDomains);
348
+ const imgSrc = toDirective("img-src", csp.imgDomains);
349
+ const mediaSrc = toDirective("media-src", csp.mediaDomains);
350
+ const connectSrc = toDirective("connect-src", csp.connectDomains);
351
+ const frameSrc = toDirective("frame-src", csp.frameDomains);
352
+ const workerSrc = toDirective("worker-src", csp.workerDomains);
353
+ const baseUri = toDirective("base-uri", csp.baseUriDomains);
354
+ if (scriptSrc)
355
+ directives.push(scriptSrc);
356
+ if (styleSrc)
357
+ directives.push(styleSrc);
358
+ if (fontSrc)
359
+ directives.push(fontSrc);
360
+ if (imgSrc)
361
+ directives.push(imgSrc);
362
+ if (mediaSrc)
363
+ directives.push(mediaSrc);
364
+ if (connectSrc)
365
+ directives.push(connectSrc);
366
+ if (frameSrc)
367
+ directives.push(frameSrc);
368
+ if (workerSrc)
369
+ directives.push(workerSrc);
370
+ if (baseUri)
371
+ directives.push(baseUri);
372
+ return directives.join("; ");
373
+ }
374
+ function toDirective(name, domains) {
375
+ if (!domains || domains.length === 0)
376
+ return null;
377
+ return `${name} ${domains.join(" ")}`;
378
+ }
379
+ export function applyCspMeta(html, cspContent) {
380
+ if (!cspContent)
381
+ return html;
382
+ if (/http-equiv=["']Content-Security-Policy["']/i.test(html))
383
+ return html;
384
+ const metaTag = `<meta http-equiv="Content-Security-Policy" content="${escapeHtmlAttribute(cspContent)}">`;
385
+ if (/<head[^>]*>/i.test(html)) {
386
+ return html.replace(/<head[^>]*>/i, (match) => `${match}\n${metaTag}`);
387
+ }
388
+ return `${metaTag}\n${html}`;
389
+ }
390
+ function safeInlineJSON(value) {
391
+ return JSON.stringify(value)
392
+ .replace(/</g, "\\u003c")
393
+ .replace(/>/g, "\\u003e")
394
+ .replace(/&/g, "\\u0026")
395
+ .replace(/\u2028/g, "\\u2028")
396
+ .replace(/\u2029/g, "\\u2029");
397
+ }
398
+ function escapeHtml(value) {
399
+ return value
400
+ .replace(/&/g, "&amp;")
401
+ .replace(/</g, "&lt;")
402
+ .replace(/>/g, "&gt;")
403
+ .replace(/"/g, "&quot;")
404
+ .replace(/'/g, "&#39;");
405
+ }
406
+ function escapeHtmlAttribute(value) {
407
+ return value
408
+ .replace(/&/g, "&amp;")
409
+ .replace(/"/g, "&quot;")
410
+ .replace(/</g, "&lt;")
411
+ .replace(/>/g, "&gt;");
412
+ }