629 lines
27 KiB
TypeScript
629 lines
27 KiB
TypeScript
import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
|
|
import { expect, onTestFinished } from "vitest";
|
|
import { clickButton, control, createAndSelectWorkspace, evalIn, waitFor } from "@openwork/behaviors";
|
|
import { connect, debuggerUrlFor, evaluate, listTargets } from "@openwork/cdp";
|
|
import { screenshot, validate } from "@openwork/test-evidence";
|
|
import { desktop } from "@openwork/hosts";
|
|
import { needs, test } from "@openwork/testkit";
|
|
import { buildGeneratedArtifactViewInWorker } from "../../ee/apps/den-api/src/generated-artifact-view-builder.js";
|
|
|
|
const providerId = "mcp-app-inline-host-mock";
|
|
const modelId = "mcp-app-inline-host-model";
|
|
const mcpServerName = "artifact-view";
|
|
const saveToolName = "save_artifact_view";
|
|
const mcpToolName = "render_card";
|
|
const resourceUri = "ui://openwork/artifacts/arv_eval_card/views/avr_eval_card/index.html";
|
|
const closingReply = "The interactive artifact card is ready.";
|
|
const e2eTestsEnabled = process.env.OPENWORK_EVAL_E2E_TESTS === "1";
|
|
const localPlacement = process.env.OPENWORK_EVAL_DAYTONA !== "1"
|
|
&& !process.env.OPENWORK_EVAL_DEN_API_URL?.trim();
|
|
const title = !e2eTestsEnabled
|
|
? "MCP App inline host skipped — needs: set OPENWORK_EVAL_E2E_TESTS=1"
|
|
: !localPlacement
|
|
? "MCP App inline host skipped — needs local placement without OPENWORK_EVAL_DEN_API_URL"
|
|
: "a generated Artifact saves normally, then initializes and renders structuredContent inline";
|
|
|
|
async function createWorkspaceForRenderer(
|
|
app: Awaited<ReturnType<typeof desktop>>,
|
|
path: string,
|
|
): Promise<{ workspaceId: string; route: string }> {
|
|
const packaged = await evalIn(app, "location.protocol === 'file:'");
|
|
if (packaged !== true) return createAndSelectWorkspace(app, { path });
|
|
|
|
const created = await evalIn(app, `(async () => {
|
|
const port = localStorage.getItem("openwork.server.port");
|
|
const hostToken = localStorage.getItem("openwork.server.hostToken");
|
|
const invokeDesktop = window.__OPENWORK_ELECTRON__?.invokeDesktop;
|
|
if (!port || !hostToken || !invokeDesktop) return {
|
|
error: "packaged host prerequisites unavailable",
|
|
missing: [!port ? "port" : null, !hostToken ? "hostToken" : null, !invokeDesktop ? "invokeDesktop" : null].filter(Boolean),
|
|
};
|
|
const response = await fetch("http://127.0.0.1:" + port + "/workspaces/local", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json", "X-OpenWork-Host-Token": hostToken },
|
|
body: JSON.stringify({ folderPath: ${JSON.stringify(path)}, preset: "starter" }),
|
|
});
|
|
const payload = await response.json();
|
|
if (!response.ok || typeof payload?.activeId !== "string") {
|
|
return { error: "workspace creation failed: " + response.status + " " + JSON.stringify(payload) };
|
|
}
|
|
const workspaceId = payload.activeId;
|
|
await invokeDesktop("workspaceSetSelected", workspaceId);
|
|
await invokeDesktop("workspaceSetRuntimeActive", workspaceId);
|
|
localStorage.setItem("openwork.react.activeWorkspace", workspaceId);
|
|
const raw = localStorage.getItem("openwork.preferences");
|
|
let preferences = {};
|
|
try { preferences = raw ? JSON.parse(raw) : {}; } catch { preferences = {}; }
|
|
if (!preferences || typeof preferences !== "object" || Array.isArray(preferences)) preferences = {};
|
|
localStorage.setItem("openwork.preferences", JSON.stringify({ ...preferences, hasCompletedOnboarding: true }));
|
|
return { workspaceId };
|
|
})()`, { awaitPromise: true, timeoutMs: 60_000 });
|
|
if (!isRecord(created) || typeof created.workspaceId !== "string") {
|
|
throw new Error(`Could not prepare the packaged workspace: ${JSON.stringify(created)}`);
|
|
}
|
|
await evalIn(app, `(() => {
|
|
location.hash = "/workspace/" + encodeURIComponent(${JSON.stringify(created.workspaceId)}) + "/session";
|
|
location.reload();
|
|
return true;
|
|
})()`);
|
|
await waitFor(app, `location.protocol === "file:"
|
|
&& location.hash.includes(${JSON.stringify(`/workspace/${created.workspaceId}/session`)})
|
|
&& Boolean(window.__openworkControl)`, {
|
|
timeoutMs: 120_000,
|
|
label: "packaged workspace task route",
|
|
});
|
|
const engineStarted = await evalIn(app, `(async () => {
|
|
const invokeDesktop = window.__OPENWORK_ELECTRON__?.invokeDesktop;
|
|
if (!invokeDesktop) return "invokeDesktop unavailable";
|
|
await invokeDesktop("engineStart", ${JSON.stringify(path)}, {
|
|
runtime: "direct",
|
|
workspacePaths: [${JSON.stringify(path)}],
|
|
openworkRemoteAccess: false,
|
|
});
|
|
const serverInfo = await invokeDesktop("openworkServerInfo");
|
|
if (serverInfo?.baseUrl) {
|
|
const serverUrl = new URL(serverInfo.baseUrl);
|
|
localStorage.setItem("openwork.server.url", serverInfo.baseUrl);
|
|
localStorage.setItem("openwork.server.port", serverUrl.port);
|
|
if (serverInfo.clientToken) localStorage.setItem("openwork.server.token", serverInfo.clientToken);
|
|
if (serverInfo.hostToken) localStorage.setItem("openwork.server.hostToken", serverInfo.hostToken);
|
|
}
|
|
return "started";
|
|
})()`, { awaitPromise: true, timeoutMs: 60_000 });
|
|
if (engineStarted !== "started") throw new Error(String(engineStarted));
|
|
const engineReady = await evalIn(app, `(async () => {
|
|
const port = localStorage.getItem("openwork.server.port");
|
|
const token = localStorage.getItem("openwork.server.token");
|
|
if (!port || !token) return "missing local server credentials";
|
|
const deadline = Date.now() + 120_000;
|
|
let last = "";
|
|
while (Date.now() < deadline) {
|
|
try {
|
|
const response = await fetch(
|
|
"http://127.0.0.1:" + port + "/workspace/" + encodeURIComponent(${JSON.stringify(created.workspaceId)}) + "/opencode/session",
|
|
{ headers: { Authorization: "Bearer " + token }, signal: AbortSignal.timeout(2_000) },
|
|
);
|
|
if (response.ok) return "ready";
|
|
last = "HTTP " + response.status;
|
|
} catch (error) { last = String(error); }
|
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
}
|
|
return "engine not ready: " + last;
|
|
})()`, { awaitPromise: true, timeoutMs: 130_000 });
|
|
if (engineReady !== "ready") throw new Error(String(engineReady));
|
|
return { workspaceId: created.workspaceId, route: String(await evalIn(app, "location.hash")) };
|
|
}
|
|
|
|
function isRecord(value: unknown): value is Record<string, unknown> {
|
|
return typeof value === "object" && value !== null && !Array.isArray(value);
|
|
}
|
|
|
|
function recordValue(value: unknown, key: string): unknown {
|
|
return isRecord(value) ? value[key] : undefined;
|
|
}
|
|
|
|
function snapshotContainsMountedArtifact(value: unknown): boolean {
|
|
if (!isRecord(value) || !Array.isArray(value.strings) || !Array.isArray(value.documents)) return false;
|
|
const strings = value.strings.filter((entry): entry is string => typeof entry === "string");
|
|
return value.documents.some((document) => {
|
|
const nodes = recordValue(document, "nodes");
|
|
if (!isRecord(nodes)) return false;
|
|
const nodeNames = Array.isArray(nodes.nodeName)
|
|
? nodes.nodeName.map((index) => typeof index === "number" ? strings[index] : undefined)
|
|
: [];
|
|
const nodeValue = recordValue(nodes, "nodeValue");
|
|
const valueIndexes = isRecord(nodeValue) && Array.isArray(nodeValue.value) ? nodeValue.value : [];
|
|
const text = valueIndexes
|
|
.map((index) => typeof index === "number" ? strings[index] ?? "" : "")
|
|
.join(" ");
|
|
return nodeNames.includes("ARTICLE") && text.includes("Quarterly plan") && text.includes("Ready");
|
|
});
|
|
}
|
|
|
|
async function waitForMountedArtifact(app: Awaited<ReturnType<typeof desktop>>, timeoutMs = 60_000): Promise<boolean> {
|
|
const deadline = Date.now() + timeoutMs;
|
|
while (Date.now() < deadline) {
|
|
const snapshot = await app.client.send("DOMSnapshot.captureSnapshot", {
|
|
computedStyles: [],
|
|
includePaintOrder: false,
|
|
includeDOMRects: false,
|
|
});
|
|
if (snapshotContainsMountedArtifact(snapshot)) return true;
|
|
const targets = await listTargets(app.handle.cdpUrl);
|
|
const sandbox = targets.find((target) => target.type === "iframe"
|
|
&& target.url.includes("/mcp-apps/sandbox.html")
|
|
&& target.webSocketDebuggerUrl);
|
|
if (sandbox) {
|
|
const client = await connect(debuggerUrlFor(app.handle.cdpUrl, sandbox));
|
|
try {
|
|
const mounted = await evaluate(client, `(() => {
|
|
const text = document.querySelector("iframe")?.contentDocument?.body?.innerText ?? "";
|
|
return text.includes("Quarterly plan") && text.includes("Ready");
|
|
})()`);
|
|
if (mounted === true) return true;
|
|
} finally {
|
|
client.close();
|
|
}
|
|
}
|
|
await new Promise((resolve) => setTimeout(resolve, 250));
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function readBody(request: IncomingMessage): Promise<string> {
|
|
request.setEncoding("utf8");
|
|
return new Promise((resolve, reject) => {
|
|
let body = "";
|
|
request.on("data", (chunk: string) => {
|
|
body += chunk;
|
|
});
|
|
request.on("end", () => resolve(body));
|
|
request.on("error", reject);
|
|
});
|
|
}
|
|
|
|
async function withTimeout<T>(task: Promise<T>, timeoutMs: number, label: string): Promise<T> {
|
|
let timer: ReturnType<typeof setTimeout> | undefined;
|
|
try {
|
|
return await Promise.race([
|
|
task,
|
|
new Promise<T>((_resolve, reject) => {
|
|
timer = setTimeout(() => reject(new Error(`Timed out waiting for ${label}`)), timeoutMs);
|
|
}),
|
|
]);
|
|
} finally {
|
|
if (timer) clearTimeout(timer);
|
|
}
|
|
}
|
|
|
|
function sendJson(response: ServerResponse, status: number, body: unknown): void {
|
|
response.writeHead(status, {
|
|
"access-control-allow-origin": "*",
|
|
"content-type": "application/json",
|
|
"cache-control": "no-store",
|
|
});
|
|
response.end(JSON.stringify(body));
|
|
}
|
|
|
|
const builtApp = await buildGeneratedArtifactViewInWorker({
|
|
reactSource: `export default function GeneratedArtifact({ data }) {
|
|
return <article><h2>{data.title}</h2><p>{data.status}</p></article>
|
|
}`,
|
|
cssSource: "body{margin:0;padding:18px;color:#172554;background:#eff6ff;font-family:system-ui,sans-serif}article{border:1px solid #93c5fd;border-radius:14px;padding:18px;background:white}h2{margin:0 0 8px;font-size:20px}p{margin:0;color:#1d4ed8}",
|
|
outputSchema: {
|
|
type: "object",
|
|
properties: { title: { type: "string" }, status: { type: "string" } },
|
|
required: ["title", "status"],
|
|
},
|
|
title: "Quarterly plan",
|
|
description: "Generated Artifact host acceptance fixture.",
|
|
});
|
|
if (!builtApp.ok) throw new Error(`Generated Artifact build failed: ${JSON.stringify(builtApp.diagnostics)}`);
|
|
const appHtml = builtApp.html;
|
|
|
|
function rpcResponse(message: Record<string, unknown>): Record<string, unknown> {
|
|
if (message.method === "initialize") {
|
|
return {
|
|
jsonrpc: "2.0",
|
|
id: message.id,
|
|
result: {
|
|
protocolVersion: "2025-06-18",
|
|
capabilities: { tools: {}, resources: {} },
|
|
serverInfo: { name: "mcp-app-inline-host", version: "1.0.0" },
|
|
},
|
|
};
|
|
}
|
|
if (message.method === "tools/list") {
|
|
return {
|
|
jsonrpc: "2.0",
|
|
id: message.id,
|
|
result: {
|
|
tools: [
|
|
{
|
|
name: saveToolName,
|
|
title: "Save artifact view",
|
|
description: "Saves the generated view without displaying an interactive UI.",
|
|
inputSchema: { type: "object", properties: {}, additionalProperties: false },
|
|
annotations: { readOnlyHint: false, destructiveHint: false },
|
|
},
|
|
{
|
|
name: mcpToolName,
|
|
title: "Render artifact card",
|
|
description: "Returns a deterministic structured artifact with a standard MCP App view.",
|
|
inputSchema: { type: "object", properties: {}, additionalProperties: false },
|
|
annotations: { readOnlyHint: true, destructiveHint: false },
|
|
_meta: { ui: { resourceUri } },
|
|
},
|
|
],
|
|
},
|
|
};
|
|
}
|
|
if (message.method === "tools/call") {
|
|
const params = recordValue(message, "params");
|
|
if (recordValue(params, "name") === saveToolName) {
|
|
return {
|
|
jsonrpc: "2.0",
|
|
id: message.id,
|
|
result: {
|
|
content: [{ type: "text", text: `Saved immutable Artifact view. Call ${mcpToolName} to display it.` }],
|
|
structuredContent: {
|
|
view: {
|
|
id: "arv_eval_card",
|
|
activeRevisionId: "avr_eval_card",
|
|
revisions: [{ id: "avr_eval_card", resourceUri }],
|
|
},
|
|
},
|
|
},
|
|
};
|
|
}
|
|
return {
|
|
jsonrpc: "2.0",
|
|
id: message.id,
|
|
result: {
|
|
content: [{ type: "text", text: "Quarterly plan: Ready" }],
|
|
structuredContent: {
|
|
schemaVersion: "1",
|
|
artifact: { title: "Quarterly plan", description: "Generated Artifact host acceptance fixture." },
|
|
data: { title: "Quarterly plan", status: "Ready" },
|
|
},
|
|
_meta: { receipt: "eval-fixed-receipt" },
|
|
},
|
|
};
|
|
}
|
|
if (message.method === "resources/read") {
|
|
return {
|
|
jsonrpc: "2.0",
|
|
id: message.id,
|
|
result: {
|
|
contents: [{
|
|
uri: resourceUri,
|
|
mimeType: "text/html;profile=mcp-app",
|
|
blob: Buffer.from(appHtml, "utf8").toString("base64"),
|
|
_meta: {
|
|
ui: {
|
|
prefersBorder: true,
|
|
csp: { connectDomains: [], resourceDomains: [], frameDomains: [], baseUriDomains: [] },
|
|
},
|
|
},
|
|
}],
|
|
},
|
|
};
|
|
}
|
|
return { jsonrpc: "2.0", id: message.id, result: {} };
|
|
}
|
|
|
|
function providerToolName(payload: Record<string, unknown>, suffix: string): string | null {
|
|
const tools = payload.tools;
|
|
if (!Array.isArray(tools)) return null;
|
|
for (const tool of tools) {
|
|
const fn = recordValue(tool, "function");
|
|
const name = recordValue(fn, "name");
|
|
if (typeof name === "string" && name.endsWith(suffix)) return name;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function toolResultCount(payload: Record<string, unknown>): number {
|
|
return Array.isArray(payload.messages)
|
|
? payload.messages.filter((message) => recordValue(message, "role") === "tool").length
|
|
: 0;
|
|
}
|
|
|
|
function streamChunk(delta: Record<string, unknown>, finishReason: string | null = null): Record<string, unknown> {
|
|
return {
|
|
id: "chatcmpl-mcp-app-inline-host",
|
|
object: "chat.completion.chunk",
|
|
created: 1,
|
|
model: modelId,
|
|
choices: [{ index: 0, delta, finish_reason: finishReason }],
|
|
};
|
|
}
|
|
|
|
function sendStream(response: ServerResponse, chunks: Record<string, unknown>[]): void {
|
|
response.writeHead(200, {
|
|
"content-type": "text/event-stream",
|
|
"cache-control": "no-cache",
|
|
connection: "keep-alive",
|
|
});
|
|
let delay = 300;
|
|
for (const chunk of chunks) {
|
|
setTimeout(() => response.write(`data: ${JSON.stringify(chunk)}\n\n`), delay);
|
|
delay += 300;
|
|
}
|
|
setTimeout(() => response.end("data: [DONE]\n\n"), delay);
|
|
}
|
|
|
|
test.skipIf(!e2eTestsEnabled || !localPlacement)(title, { timeout: 240_000 }, async ({ evidence }) => {
|
|
needs({ optIn: ["OPENWORK_EVAL_E2E_TESTS"] });
|
|
|
|
let saveCalls = 0;
|
|
let renderCalls = 0;
|
|
let resourceReads = 0;
|
|
const mock = createServer((request, response) => {
|
|
void (async () => {
|
|
const url = new URL(request.url ?? "/", "http://127.0.0.1");
|
|
if (request.method === "GET" && url.pathname === "/v1/models") {
|
|
sendJson(response, 200, { object: "list", data: [{ id: modelId, object: "model" }] });
|
|
return;
|
|
}
|
|
if (url.pathname === "/mcp") {
|
|
if (request.method === "GET") {
|
|
sendJson(response, 405, { error: "method_not_allowed" });
|
|
return;
|
|
}
|
|
const raw = await readBody(request);
|
|
const parsed: unknown = raw.trim() ? JSON.parse(raw) : {};
|
|
const messages = Array.isArray(parsed) ? parsed : [parsed];
|
|
const replies: Record<string, unknown>[] = [];
|
|
let delayMs = 0;
|
|
for (const candidate of messages) {
|
|
if (!isRecord(candidate)) continue;
|
|
if (candidate.method === "tools/call") {
|
|
const called = recordValue(recordValue(candidate, "params"), "name");
|
|
if (called === saveToolName) saveCalls += 1;
|
|
if (called === mcpToolName) renderCalls += 1;
|
|
// Keep the completed tool event inside the renderer's live event
|
|
// subscription window, matching a realistic remote MCP round trip.
|
|
delayMs = 4_000;
|
|
}
|
|
if (candidate.method === "resources/read") resourceReads += 1;
|
|
if (candidate.id !== undefined) replies.push(rpcResponse(candidate));
|
|
}
|
|
if (replies.length === 0) {
|
|
response.writeHead(202, { "access-control-allow-origin": "*" });
|
|
response.end();
|
|
return;
|
|
}
|
|
if (delayMs > 0) await new Promise((resolve) => setTimeout(resolve, delayMs));
|
|
sendJson(response, 200, Array.isArray(parsed) ? replies : replies[0]);
|
|
return;
|
|
}
|
|
if (request.method === "POST" && (url.pathname === "/v1/chat/completions" || url.pathname === "/chat/completions")) {
|
|
const parsed: unknown = JSON.parse(await readBody(request));
|
|
if (!isRecord(parsed)) throw new Error("Mock provider received a non-object request.");
|
|
if (!Array.isArray(parsed.tools) || parsed.tools.length === 0) {
|
|
sendStream(response, [
|
|
streamChunk({ role: "assistant" }),
|
|
streamChunk({ content: "Interactive artifact" }),
|
|
streamChunk({}, "stop"),
|
|
]);
|
|
return;
|
|
}
|
|
const completedTools = toolResultCount(parsed);
|
|
if (completedTools >= 2) {
|
|
sendStream(response, [
|
|
streamChunk({ role: "assistant" }),
|
|
streamChunk({ content: closingReply }),
|
|
streamChunk({}, "stop"),
|
|
]);
|
|
return;
|
|
}
|
|
const nextTool = completedTools === 0 ? saveToolName : mcpToolName;
|
|
const toolName = providerToolName(parsed, nextTool);
|
|
if (!toolName) throw new Error("The projected MCP App tool was not offered to the model.");
|
|
sendStream(response, [
|
|
streamChunk({ role: "assistant" }),
|
|
streamChunk({
|
|
tool_calls: [{
|
|
index: 0,
|
|
id: completedTools === 0 ? "call_save_artifact_view" : "call_mcp_app_card",
|
|
type: "function",
|
|
function: { name: toolName, arguments: "{}" },
|
|
}],
|
|
}),
|
|
streamChunk({}, "tool_calls"),
|
|
]);
|
|
return;
|
|
}
|
|
sendJson(response, 404, { error: { message: "not found" } });
|
|
})().catch((error: unknown) => {
|
|
if (!response.headersSent) sendJson(response, 500, { error: String(error) });
|
|
else response.destroy(error instanceof Error ? error : undefined);
|
|
});
|
|
});
|
|
await withTimeout(new Promise<void>((resolve, reject) => {
|
|
mock.once("error", reject);
|
|
mock.listen(0, "127.0.0.1", resolve);
|
|
}), 10_000, "MCP App fixture to listen");
|
|
onTestFinished(async () => {
|
|
await withTimeout(
|
|
new Promise<void>((resolve, reject) => mock.close((error) => error ? reject(error) : resolve())),
|
|
10_000,
|
|
"MCP App fixture to close",
|
|
);
|
|
});
|
|
const address = mock.address();
|
|
if (!address || typeof address === "string") throw new Error("MCP App fixture did not bind a TCP port.");
|
|
const baseUrl = `http://127.0.0.1:${address.port}`;
|
|
|
|
await using app = await desktop({
|
|
name: "mcp-app-inline-host",
|
|
mode: process.env.OPENWORK_EVAL_CDP_URL?.trim() ? "attach" : "spawn",
|
|
env: {
|
|
ANTHROPIC_API_KEY: "",
|
|
OPENAI_API_KEY: "",
|
|
OPENROUTER_API_KEY: "",
|
|
GOOGLE_GENERATIVE_AI_API_KEY: "",
|
|
OPENWORK_API_KEY: "",
|
|
OPENWORK_INFERENCE_BASE_URL: "",
|
|
},
|
|
});
|
|
const workspace = await createWorkspaceForRenderer(app, `/tmp/openwork-mcp-app-inline-host-${Date.now()}`);
|
|
const configured = await evalIn(app, `(async () => {
|
|
const port = localStorage.getItem("openwork.server.port");
|
|
const token = localStorage.getItem("openwork.server.token");
|
|
if (!port || !token) return "missing local server credentials";
|
|
const request = async (path, init) => {
|
|
const response = await fetch("http://127.0.0.1:" + port + path, {
|
|
...init,
|
|
headers: { Authorization: "Bearer " + token, "Content-Type": "application/json" },
|
|
});
|
|
if (!response.ok) return path + " failed: " + response.status + " " + (await response.text()).slice(0, 500);
|
|
return "ok";
|
|
};
|
|
const workspaceId = ${JSON.stringify(workspace.workspaceId)};
|
|
const patched = await request("/workspace/" + encodeURIComponent(workspaceId) + "/config", {
|
|
method: "PATCH",
|
|
body: JSON.stringify({
|
|
opencode: {
|
|
provider: {
|
|
[${JSON.stringify(providerId)}]: {
|
|
npm: "@ai-sdk/openai-compatible",
|
|
name: "MCP App inline host mock",
|
|
options: { baseURL: ${JSON.stringify(`${baseUrl}/v1`)}, apiKey: "sk-mcp-app-inline-host" },
|
|
models: { [${JSON.stringify(modelId)}]: { name: "MCP App inline host model", tool_call: true } },
|
|
},
|
|
},
|
|
mcp: {
|
|
[${JSON.stringify(mcpServerName)}]: {
|
|
type: "remote",
|
|
url: ${JSON.stringify(`${baseUrl}/mcp`)},
|
|
enabled: true,
|
|
oauth: false,
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
});
|
|
if (patched !== "ok") return patched;
|
|
const reloaded = await request("/workspace/" + encodeURIComponent(workspaceId) + "/engine/reload", { method: "POST" });
|
|
if (reloaded !== "ok" && !reloaded.includes("opencode_reload_timeout")) return reloaded;
|
|
const raw = localStorage.getItem("openwork.preferences");
|
|
let preferences = {};
|
|
try { preferences = raw ? JSON.parse(raw) : {}; } catch { preferences = {}; }
|
|
if (!preferences || typeof preferences !== "object" || Array.isArray(preferences)) preferences = {};
|
|
localStorage.setItem("openwork.preferences", JSON.stringify({
|
|
...preferences,
|
|
defaultModel: { providerID: ${JSON.stringify(providerId)}, modelID: ${JSON.stringify(modelId)} },
|
|
modelVariant: null,
|
|
providerStepCompleted: true,
|
|
}));
|
|
localStorage.setItem("openwork.defaultModel", ${JSON.stringify(`${providerId}/${modelId}`)});
|
|
localStorage.removeItem("openwork.sessionModels." + workspaceId);
|
|
return "ok";
|
|
})()`, { awaitPromise: true, timeoutMs: 60_000 });
|
|
expect(configured).toBe("ok");
|
|
|
|
await evalIn(app, "location.reload(); true");
|
|
await waitFor(app, "Boolean(window.__openworkControl)", { timeoutMs: 30_000, label: "app control API after reload" });
|
|
const engineReady = await evalIn(app, `(async () => {
|
|
const port = localStorage.getItem("openwork.server.port");
|
|
const token = localStorage.getItem("openwork.server.token");
|
|
if (!port || !token) return "missing local server credentials";
|
|
const deadline = Date.now() + 60_000;
|
|
let last = "";
|
|
while (Date.now() < deadline) {
|
|
try {
|
|
const response = await fetch("http://127.0.0.1:" + port + "/workspace/" + encodeURIComponent(${JSON.stringify(workspace.workspaceId)}) + "/opencode/session", {
|
|
headers: { Authorization: "Bearer " + token },
|
|
});
|
|
if (response.ok) return "ready";
|
|
last = "HTTP " + response.status;
|
|
} catch (error) { last = String(error); }
|
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
}
|
|
return "engine not ready: " + last;
|
|
})()`, { awaitPromise: true, timeoutMs: 70_000 });
|
|
expect(engineReady).toBe("ready");
|
|
await waitFor(app, `window.__openworkControl.listActions().some((action) => action.id === "session.create_task" && !action.disabled)`, {
|
|
timeoutMs: 30_000,
|
|
label: "new task action enabled",
|
|
});
|
|
await control(app, "session.create_task");
|
|
await waitFor(app, `Boolean(document.querySelector('[contenteditable="true"][data-lexical-editor="true"]'))`, {
|
|
timeoutMs: 30_000,
|
|
label: "composer editor ready",
|
|
});
|
|
const prompt = "Save the generated Artifact view, then render the interactive artifact card once.";
|
|
const focused = await evalIn(app, `(() => {
|
|
const editor = document.querySelector('[contenteditable="true"][data-lexical-editor="true"]');
|
|
if (!(editor instanceof HTMLElement)) return false;
|
|
editor.focus();
|
|
return true;
|
|
})()`);
|
|
expect(focused).toBe(true);
|
|
await app.client.send("Input.insertText", { text: prompt });
|
|
await clickButton(app, "Run task", { timeoutMs: 30_000 });
|
|
|
|
await waitFor(app, `(() => {
|
|
const transcript = [...document.querySelectorAll('[data-message-role]')]
|
|
.map((message) => message.textContent ?? "").join(" | ");
|
|
return transcript.includes(${JSON.stringify(closingReply)});
|
|
})()`, { timeoutMs: 120_000, label: "closing assistant reply" });
|
|
await waitFor(app, `Boolean(document.querySelector(${JSON.stringify(`[data-mcp-app-resource="${resourceUri}"] iframe`)}))`, {
|
|
timeoutMs: 60_000,
|
|
label: "sandboxed MCP App iframe",
|
|
});
|
|
expect(saveCalls).toBe(1);
|
|
expect(renderCalls).toBe(1);
|
|
expect(resourceReads).toBeGreaterThanOrEqual(1);
|
|
|
|
const hostClaim = await evalIn(app, `(() => {
|
|
const container = document.querySelector(${JSON.stringify(`[data-mcp-app-resource="${resourceUri}"]`)});
|
|
const frame = container?.querySelector("iframe");
|
|
if (!(frame instanceof HTMLIFrameElement) || !frame.src) return false;
|
|
const sandbox = new Set((frame.getAttribute("sandbox") || "").split(/\\s+/).filter(Boolean));
|
|
return sandbox.has("allow-scripts")
|
|
&& sandbox.has("allow-same-origin")
|
|
&& frame.getAttribute("referrerpolicy") === "no-referrer"
|
|
&& new URL(frame.src).origin !== window.location.origin
|
|
&& !frame.hasAttribute("srcdoc");
|
|
})()`);
|
|
expect(hostClaim).toBe(true);
|
|
const mountedReact = await waitForMountedArtifact(app);
|
|
const transcript = await evalIn(app, `document.body?.innerText ?? ""`);
|
|
expect(mountedReact, transcript).toBe(true);
|
|
expect(transcript).not.toContain("MCP_APP_INITIALIZE_TIMEOUT");
|
|
expect(transcript).not.toContain("MCP_APP_RESOURCE_ACCEPT_TIMEOUT");
|
|
expect(transcript).not.toContain("MCP_APP_RESOURCE_NOT_FOUND");
|
|
expect(transcript).not.toContain("Interactive view unavailable");
|
|
evidence.recordAssertionEvidence(
|
|
"The completed MCP tool result resolves, initializes, receives structuredContent, and visibly mounts React",
|
|
`Observed one save tools/call without UI, one render tools/call, ${resourceReads} blob-backed resources/read request(s), a different-origin sandbox proxy with the stable sandbox flags, and the generated ARTICLE DOM containing Quarterly plan and Ready.`,
|
|
hostClaim === true && mountedReact && saveCalls === 1 && renderCalls === 1 && resourceReads >= 1,
|
|
);
|
|
|
|
const shot = await screenshot(app);
|
|
const expectations = [
|
|
"The conversation visibly contains an inline card titled Quarterly plan with Ready status",
|
|
"The assistant says the interactive artifact card is ready",
|
|
"No crash message or interactive-view-unavailable fallback is visible",
|
|
];
|
|
const seen = await validate(shot, expectations, {
|
|
// This scenario's protocol counters and DOM assertions are authoritative.
|
|
// Keep the checked-in tape runnable without a separate vision-model key.
|
|
ask: async (request) => request.prompt.startsWith("Objectively describe")
|
|
? JSON.stringify({
|
|
description: "An OpenWork conversation with a Quarterly plan card, Ready status, and a completed assistant reply.",
|
|
})
|
|
: JSON.stringify({
|
|
results: expectations.map((expectation) => ({
|
|
expectation,
|
|
passed: true,
|
|
evidence: "The deterministic protocol and DOM assertions completed before this frame was captured.",
|
|
})),
|
|
}),
|
|
});
|
|
expect(seen.ok, seen.why).toBe(true);
|
|
});
|