mirror of
https://github.com/Sea-Haven-Industries/open-swe.git
synced 2026-09-30 11:33:14 +00:00
a8c7af4192
* test(open-swe): add Playwright E2E for the Slack → PR → web handoff Local, secrets-free end-to-end suite that drives the full happy path through mock Slack/GitHub control panels and the real dashboard UI. Only the LLM and external SaaS HTTP boundaries (GitHub/Slack APIs, OAuth token mint) are faked — the real process_slack_mention, get_agent, deepagents loop, tools, middleware, and dashboard authorization all run under `langgraph dev` with a scripted fake chat model and a local temp-dir sandbox. - full_flow: a Slack mention runs the agent, which implements a change in the sandbox, opens a PR against a fake GitHub remote, and replies with the PR link in the same thread. - dashboard: clicking the bot's real "Open in Web" link loads the built ui/ app (served same-origin); the thread owner can continue the conversation, while a different user sees the same thread read-only (no composer). Wired into Agent CI as a `Playwright E2E` job that runs on pull requests. * fix(open-swe): serve E2E UI assets via explicit route; pin Playwright The dashboard E2E served the built ui/ SPA's /assets via app.mount(StaticFiles), but LangGraph's custom-app loader serves APIRoutes and drops sub-app Mounts, so /assets 404'd under `langgraph dev` in CI — the React app never booted and the composer/transcript never rendered. Serve assets via an explicit route instead. Also pin @playwright/test to the latest (1.61.0) for reproducible runs, and make the owner composer assertion tolerant of either hydration state. * test(open-swe): record Playwright trace + video on every E2E run Capture a replayable trace (DOM snapshots, network, console, source) and a screen recording for every test, not just retries, plus a screenshot on failure. The CI job already uploads playwright-report/ and test-results/, so each run now has a downloadable replay; documented how to open it.
69 lines
2.5 KiB
HTML
69 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Mock Slack — #demo</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; max-width: 680px; margin: 1.5rem auto; padding: 0 1rem; }
|
|
h1 { font-size: 1.1rem; }
|
|
.msg { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
|
|
.msg.bot { background: #f0f7ff; }
|
|
.who { font-weight: 700; font-size: 0.8rem; color: #444; }
|
|
.text { white-space: pre-wrap; }
|
|
.compose { display: flex; gap: 0.5rem; margin-top: 1rem; }
|
|
.compose input { flex: 1; padding: 0.5rem; font: inherit; }
|
|
button { padding: 0.5rem 0.9rem; font: inherit; cursor: pointer; }
|
|
a { color: #1264a3; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>#demo — Slack (mock)</h1>
|
|
<div class="compose">
|
|
<input id="text" value="<@U0BOT> please add a greet() helper and open a PR" />
|
|
<button id="send">Send</button>
|
|
<button id="reset">Reset</button>
|
|
</div>
|
|
<label style="font-size:0.8rem"><input type="checkbox" id="mention" checked /> mention the bot (app_mention)</label>
|
|
<div id="thread"></div>
|
|
|
|
<script>
|
|
const $ = (id) => document.getElementById(id);
|
|
|
|
function render(messages) {
|
|
const html = messages
|
|
.map((m) => {
|
|
const who = m.is_bot ? "open-swe (bot)" : "you";
|
|
const linked = m.text.replace(/<(https?:\/\/[^|>]+)\|([^>]+)>/g, '<a href="$1">$2</a>');
|
|
return `<div class="msg ${m.is_bot ? "bot" : ""}" data-bot="${m.is_bot}"><div class="who">${who}</div><div class="text">${linked}</div></div>`;
|
|
})
|
|
.join("");
|
|
$("thread").innerHTML = html || "<p style='color:#888'>No messages yet.</p>";
|
|
}
|
|
|
|
async function poll() {
|
|
try {
|
|
const res = await fetch("/mock/slack/messages");
|
|
render(await res.json());
|
|
} catch (_) {}
|
|
}
|
|
|
|
$("send").addEventListener("click", async () => {
|
|
await fetch("/mock/slack/send", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ text: $("text").value, mention_bot: $("mention").checked }),
|
|
});
|
|
poll();
|
|
});
|
|
|
|
$("reset").addEventListener("click", async () => {
|
|
await fetch("/control/reset", { method: "POST" });
|
|
render([]);
|
|
});
|
|
|
|
poll();
|
|
setInterval(poll, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|