wehub-resource-sync
4912 lines
200 KiB
Python
4912 lines
200 KiB
Python
"""Opt-in real-browser chat surface e2e without provider spend."""
|
|
|
|
from __future__ import annotations
|
|
|
|
import json
|
|
import os
|
|
import socket
|
|
import subprocess
|
|
import sys
|
|
import textwrap
|
|
import time
|
|
from pathlib import Path
|
|
|
|
import httpx
|
|
import pytest
|
|
|
|
pytestmark = pytest.mark.webui_browser
|
|
|
|
|
|
def _free_port() -> int:
|
|
with socket.socket() as sock:
|
|
sock.bind(("127.0.0.1", 0))
|
|
return int(sock.getsockname()[1])
|
|
|
|
|
|
def _npm() -> str:
|
|
return "npm.cmd" if os.name == "nt" else "npm"
|
|
|
|
|
|
def _node() -> str:
|
|
return "node.exe" if os.name == "nt" else "node"
|
|
|
|
|
|
def _install_playwright(work_dir: Path) -> None:
|
|
result = subprocess.run(
|
|
[_npm(), "--prefix", str(work_dir), "install", "playwright"],
|
|
cwd=Path.cwd(),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=120,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
|
|
|
|
def _wait_for_health(port: int, server: subprocess.Popen[str]) -> None:
|
|
url = f"http://127.0.0.1:{port}/health"
|
|
deadline = time.monotonic() + 20.0
|
|
last_error = ""
|
|
while time.monotonic() < deadline:
|
|
if server.poll() is not None:
|
|
stdout = server.stdout.read() if server.stdout else ""
|
|
stderr = server.stderr.read() if server.stderr else ""
|
|
raise AssertionError(
|
|
f"gateway exited early code={server.returncode}\nstdout={stdout}\nstderr={stderr}"
|
|
)
|
|
try:
|
|
response = httpx.get(url, timeout=1.0)
|
|
if response.status_code == 200 and response.json().get("ok") is True:
|
|
return
|
|
except Exception as exc: # noqa: BLE001 - surfaced on timeout.
|
|
last_error = str(exc)
|
|
time.sleep(0.1)
|
|
raise AssertionError(f"gateway did not become healthy: {last_error}")
|
|
|
|
|
|
def _stop_process(process: subprocess.Popen[str]) -> None:
|
|
process.terminate()
|
|
try:
|
|
process.wait(timeout=8)
|
|
except subprocess.TimeoutExpired:
|
|
process.kill()
|
|
process.wait(timeout=8)
|
|
|
|
|
|
def test_per_turn_bubble_chip_differs_across_turns_in_real_browser(tmp_path: Path) -> None:
|
|
"""P4-AC6: per-turn .msg-meta__tokens chip reflects per-turn token counts.
|
|
|
|
Two synthetic turns are injected via the RPC event bus (no LLM spend).
|
|
Turn 1 uses input_tokens=11; turn 2 uses input_tokens=19. The test
|
|
asserts that:
|
|
- chip[0].input != chip[1].input (per-turn semantics, values differ)
|
|
- chip[1].input >= chip[0].input (monotonic across a session with growing
|
|
context, satisfied trivially because 19 > 11)
|
|
"""
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_bubble_server.py"
|
|
browser_script = tmp_path / "webui_bubble_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
// Inject a synthetic streaming turn into the chat JS event bus.
|
|
// text_delta fires through the named listener; done fires through the
|
|
// wildcard (*) listener which is how chat.js processes terminal events.
|
|
async function injectTurn(page, inputTokens, outputTokens) {
|
|
await page.evaluate(
|
|
({ inputTokens, outputTokens }) => {
|
|
const rpc = App.getRpc();
|
|
const ls = rpc._listeners;
|
|
|
|
// 1. text_delta — named listener — creates the stream bubble
|
|
const deltaHandlers = ls.get("session.event.text_delta");
|
|
if (deltaHandlers) {
|
|
deltaHandlers.forEach(h => h({ text: "hi" }));
|
|
}
|
|
|
|
// 2. session.event.done — wildcard (*) listener — attaches
|
|
// the .msg-meta__tokens chip to the finished bubble
|
|
const wildHandlers = ls.get("*");
|
|
if (wildHandlers) {
|
|
wildHandlers.forEach(h =>
|
|
h("session.event.done", {
|
|
input_tokens: inputTokens,
|
|
output_tokens: outputTokens,
|
|
text: "hi",
|
|
})
|
|
);
|
|
}
|
|
},
|
|
{ inputTokens, outputTokens }
|
|
);
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage();
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
|
|
// Wait for WebSocket RPC connection (chat.js needs it to register listeners)
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
|
|
// Turn 1: input=11, output=5
|
|
await injectTurn(page, 11, 5);
|
|
await page.waitForSelector(".msg-meta__tokens", { timeout: 5000 });
|
|
|
|
// Turn 2: input=19, output=7
|
|
await injectTurn(page, 19, 7);
|
|
// Wait for the second chip to appear
|
|
await page.waitForFunction(
|
|
() => document.querySelectorAll(".msg-meta__tokens").length >= 2,
|
|
null, { timeout: 5000 }
|
|
);
|
|
|
|
const chips = await page.evaluate(() =>
|
|
Array.from(document.querySelectorAll(".msg-meta__tokens")).map(el => el.textContent)
|
|
);
|
|
|
|
// Parse "↑X ↓Y" into { input: X, output: Y }
|
|
function parseChip(text) {
|
|
const m = text.match(/↑(\d+(?:\.\d+)?[KMk]?)\s*↓(\d+(?:\.\d+)?[KMk]?)/);
|
|
if (!m) return null;
|
|
function tok(s) {
|
|
const n = parseFloat(s);
|
|
if (s.endsWith("K") || s.endsWith("k")) return Math.round(n * 1000);
|
|
if (s.endsWith("M")) return Math.round(n * 1000000);
|
|
return n;
|
|
}
|
|
return { input: tok(m[1]), output: tok(m[2]) };
|
|
}
|
|
|
|
const parsed = chips.slice(0, 2).map(parseChip);
|
|
const result = {
|
|
chipCount: chips.length,
|
|
chip0: parsed[0],
|
|
chip1: parsed[1],
|
|
pageErrors: errors,
|
|
};
|
|
await browser.close();
|
|
console.log(JSON.stringify(result));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/chat"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=90,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload["pageErrors"] == [], payload["pageErrors"]
|
|
assert payload["chipCount"] >= 2, f"expected >=2 chips, got {payload['chipCount']}"
|
|
chip0 = payload["chip0"]
|
|
chip1 = payload["chip1"]
|
|
assert chip0 is not None, "chip0 did not parse"
|
|
assert chip1 is not None, "chip1 did not parse"
|
|
# Per-turn semantics: each bubble shows the tokens for that turn, not the
|
|
# session accumulator, so consecutive turns with different token counts must
|
|
# produce different chip values.
|
|
assert chip0["input"] != chip1["input"], (
|
|
f"chip input_tokens should differ between turns: chip0={chip0}, chip1={chip1}"
|
|
)
|
|
# Monotonic: second turn's per-turn input >= first turn's (19 > 11 by construction)
|
|
assert chip1["input"] >= chip0["input"], (
|
|
f"chip1.input ({chip1['input']}) should be >= chip0.input ({chip0['input']})"
|
|
)
|
|
|
|
|
|
def test_chat_view_loads_and_reaches_gateway_http_status_in_real_browser(tmp_path: Path) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_chat_server.py"
|
|
browser_script = tmp_path / "webui_chat_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
"""
|
|
const { chromium } = require("playwright");
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage();
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
const response = await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
const status = await page.evaluate(async () => {
|
|
const res = await fetch("/api/system/status");
|
|
return await res.json();
|
|
});
|
|
const bodyText = await page.locator("body").innerText();
|
|
const result = {
|
|
statusCode: response ? response.status() : 0,
|
|
title: await page.title(),
|
|
textareaCount: await page.locator("#chat-textarea").count(),
|
|
sendButtonCount: await page.locator("#chat-btn-send").count(),
|
|
activeChatNav: await page.locator('.nav-item.is-active[data-path="/chat"]').count(),
|
|
gatewayStatus: status.status,
|
|
authMode: status.auth_mode,
|
|
hasRemovedToolName:
|
|
bodyText.includes("generate_image") ||
|
|
bodyText.includes("spawn_subagent") ||
|
|
bodyText.includes("send_message"),
|
|
pageErrors: errors,
|
|
};
|
|
await browser.close();
|
|
console.log(JSON.stringify(result));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/chat"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=60,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload == {
|
|
"statusCode": 200,
|
|
"title": "OpenSquilla Control",
|
|
"textareaCount": 1,
|
|
"sendButtonCount": 1,
|
|
"activeChatNav": 1,
|
|
"gatewayStatus": "running",
|
|
"authMode": "none",
|
|
"hasRemovedToolName": False,
|
|
"pageErrors": [],
|
|
}
|
|
|
|
|
|
def test_replay_gap_history_refresh_preserves_scroll_in_real_browser(tmp_path: Path) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_gap_scroll_server.py"
|
|
browser_script = tmp_path / "webui_gap_scroll_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage({ viewport: { width: 1365, height: 768 } });
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
page.on("console", msg => {
|
|
if (msg.type() === "error") errors.push(msg.text());
|
|
});
|
|
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
|
|
await page.evaluate(() => {
|
|
const rpc = App.getRpc();
|
|
const originalCall = rpc.call.bind(rpc);
|
|
const messages = [];
|
|
for (let i = 1; i <= 70; i += 1) {
|
|
const label = i % 2 ? "User" : "Assistant";
|
|
messages.push({
|
|
role: i % 2 ? "user" : "assistant",
|
|
text: `${label} history row ${String(i).padStart(2, "0")} `.repeat(8),
|
|
timestamp: `2026-06-03T00:${String(i % 60).padStart(2, "0")}:00.000Z`,
|
|
message_id: `gap-probe-${i}`,
|
|
});
|
|
}
|
|
window.__gapProbe = { subscribeCount: 0, historyCount: 0, gapInjected: false };
|
|
rpc.call = async (method, params) => {
|
|
if (method === "chat.history") {
|
|
window.__gapProbe.historyCount += 1;
|
|
return {
|
|
messages,
|
|
has_more: false,
|
|
history_scope: "complete",
|
|
oldest_cursor: null,
|
|
newest_cursor: null,
|
|
compaction_summaries: [],
|
|
};
|
|
}
|
|
if (method === "sessions.messages.subscribe") {
|
|
window.__gapProbe.subscribeCount += 1;
|
|
if (window.__gapProbe.subscribeCount <= 1) {
|
|
return {
|
|
subscribed: true,
|
|
key: params && params.key,
|
|
current_stream_seq: 12,
|
|
replay_complete: true,
|
|
replayed_count: 0,
|
|
run_status: "idle",
|
|
};
|
|
}
|
|
window.__gapProbe.gapInjected = true;
|
|
return {
|
|
subscribed: true,
|
|
key: params && params.key,
|
|
current_stream_seq: 18,
|
|
replay_complete: false,
|
|
replay_gap_reason: "stream_buffer_empty",
|
|
replayed_count: 0,
|
|
run_status: "idle",
|
|
};
|
|
}
|
|
return originalCall(method, params);
|
|
};
|
|
});
|
|
|
|
await page.evaluate(() =>
|
|
Router.navigate(
|
|
"/chat?session=" +
|
|
encodeURIComponent("agent:main:webchat:gap-playwright-regression")
|
|
)
|
|
);
|
|
await page.waitForSelector("#chat-thread .msg", { timeout: 15000 });
|
|
await page.waitForFunction(
|
|
() => document.querySelectorAll("#chat-thread .msg").length >= 60,
|
|
{ timeout: 15000 }
|
|
);
|
|
|
|
const before = await page.evaluate(() => {
|
|
const thread = document.querySelector("#chat-thread");
|
|
thread.scrollTop = 120;
|
|
return {
|
|
scrollTop: thread.scrollTop,
|
|
scrollHeight: thread.scrollHeight,
|
|
clientHeight: thread.clientHeight,
|
|
bottomDistance: thread.scrollHeight - thread.clientHeight - thread.scrollTop,
|
|
messageCount: document.querySelectorAll("#chat-thread .msg").length,
|
|
};
|
|
});
|
|
|
|
await page.evaluate(() => {
|
|
const handlers = App.getRpc()._listeners.get("_state");
|
|
if (handlers) handlers.forEach(h => h("connected"));
|
|
});
|
|
await page.waitForFunction(
|
|
() => window.__gapProbe && window.__gapProbe.gapInjected === true,
|
|
{ timeout: 15000 }
|
|
);
|
|
await page.waitForFunction(
|
|
() => window.__gapProbe && window.__gapProbe.historyCount >= 3,
|
|
{ timeout: 15000 }
|
|
);
|
|
|
|
const after = await page.evaluate(() => {
|
|
const thread = document.querySelector("#chat-thread");
|
|
return {
|
|
scrollTop: thread.scrollTop,
|
|
scrollHeight: thread.scrollHeight,
|
|
clientHeight: thread.clientHeight,
|
|
bottomDistance: thread.scrollHeight - thread.clientHeight - thread.scrollTop,
|
|
messageCount: document.querySelectorAll("#chat-thread .msg").length,
|
|
toasts: Array.from(document.querySelectorAll(".toast")).map(el =>
|
|
el.textContent.trim()
|
|
),
|
|
probe: window.__gapProbe,
|
|
};
|
|
});
|
|
|
|
await browser.close();
|
|
console.log(JSON.stringify({ before, after, errors }));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/overview"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=90,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload["errors"] == [], payload["errors"]
|
|
assert payload["before"]["messageCount"] >= 60
|
|
assert payload["after"]["messageCount"] == payload["before"]["messageCount"]
|
|
assert payload["after"]["probe"]["gapInjected"] is True
|
|
assert payload["after"]["bottomDistance"] > 1000, payload
|
|
assert payload["after"]["scrollTop"] <= payload["before"]["scrollTop"] + 80, payload
|
|
assert "Session stream gap detected; reloading transcript." not in payload["after"]["toasts"]
|
|
|
|
|
|
def test_chat_topbar_one_row_layout_in_real_browser(tmp_path: Path) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_chat_topbar_server.py"
|
|
browser_script = tmp_path / "webui_chat_topbar_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
async function emit(page, event, payload, meta = {}) {
|
|
await page.evaluate(
|
|
({ event, payload, meta }) => {
|
|
const rpc = App.getRpc();
|
|
const handlers = rpc._listeners.get(event);
|
|
if (handlers) handlers.forEach(h => h(payload, meta));
|
|
const wild = rpc._listeners.get("*");
|
|
if (wild) wild.forEach(h => h(event, payload, meta));
|
|
},
|
|
{ event, payload, meta }
|
|
);
|
|
}
|
|
|
|
async function measure(page, viewport) {
|
|
await page.setViewportSize({ width: viewport.width, height: viewport.height });
|
|
const session =
|
|
"agent:main:webchat:very-long-session-key-with-extra-segments-1234567890";
|
|
await page.goto(process.env.TARGET_URL + "?session=" + encodeURIComponent(session), {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await page.waitForSelector("#topbar-center:not(.hidden)", { timeout: 5000 });
|
|
|
|
await emit(page, "session.event.done", {
|
|
text: "",
|
|
contextStatus: {
|
|
contextTokens: 90000,
|
|
contextWindowTokens: 100000,
|
|
pressure: 0.9,
|
|
},
|
|
});
|
|
await emit(page, "task.running", { task_id: "topbar-task", session_key: session });
|
|
await page.waitForFunction(() => {
|
|
const el = document.querySelector("#chat-run-status");
|
|
return el && el.textContent.trim() === "Running";
|
|
});
|
|
if (viewport.showApproval) {
|
|
await page.evaluate(() => {
|
|
const inline = document.querySelector("#approval-inline");
|
|
inline.textContent = "Approval required";
|
|
inline.setAttribute("aria-label", "Approval required");
|
|
inline.title = "Approval required";
|
|
inline.classList.remove("hidden");
|
|
});
|
|
}
|
|
await page.waitForTimeout(80);
|
|
|
|
const snapshot = await page.evaluate(() => {
|
|
const box = (selector) => {
|
|
const el = document.querySelector(selector);
|
|
if (!el) return null;
|
|
const r = el.getBoundingClientRect();
|
|
return {
|
|
left: r.left,
|
|
right: r.right,
|
|
top: r.top,
|
|
bottom: r.bottom,
|
|
width: r.width,
|
|
height: r.height,
|
|
visible:
|
|
r.width > 0 &&
|
|
r.height > 0 &&
|
|
getComputedStyle(el).display !== "none" &&
|
|
getComputedStyle(el).visibility !== "hidden",
|
|
};
|
|
};
|
|
const center = document.querySelector("#topbar-center");
|
|
const label = document.querySelector(".topbar-center .chat-label");
|
|
const warning = document.querySelector("#chat-ctx-warn");
|
|
const chipKey = document.querySelector("#chat-session-chip-key");
|
|
const centerBox = box("#topbar-center");
|
|
const topbarBox = box(".topbar");
|
|
const topbarRightBox = box(".topbar-right");
|
|
const childBoxes = Array.from(center ? center.children : []).map((el) => {
|
|
const r = el.getBoundingClientRect();
|
|
return {
|
|
id: el.id || el.className || el.tagName,
|
|
left: r.left,
|
|
right: r.right,
|
|
width: r.width,
|
|
display: getComputedStyle(el).display,
|
|
};
|
|
});
|
|
return {
|
|
width: window.innerWidth,
|
|
scrollWidth: document.documentElement.scrollWidth,
|
|
topbarCount: document.querySelectorAll(".topbar").length,
|
|
chatHeaderCount: document.querySelectorAll(".chat-header").length,
|
|
centerHidden: center ? center.classList.contains("hidden") : true,
|
|
centerBox,
|
|
topbarBox,
|
|
topbarRightBox,
|
|
chip: box("#chat-session-chip"),
|
|
chipKeyText: chipKey ? chipKey.textContent : "",
|
|
copy: box("#chat-session-copy"),
|
|
runStatus: box("#chat-run-status"),
|
|
runStatusText: document.querySelector("#chat-run-status")?.textContent || "",
|
|
warning: box("#chat-ctx-warn"),
|
|
warningText: warning ? warning.textContent : "",
|
|
labelDisplay: label ? getComputedStyle(label).display : "",
|
|
theme: box("#theme-toggle"),
|
|
approval: box("#approval-inline"),
|
|
approvalText: document.querySelector("#approval-inline")?.textContent || "",
|
|
approvalLabel:
|
|
document.querySelector("#approval-inline")?.getAttribute("aria-label") || "",
|
|
approvalCount: document.querySelectorAll("#approval-inline").length,
|
|
topbarChildren: childBoxes,
|
|
};
|
|
});
|
|
|
|
await page.locator("#theme-toggle").click();
|
|
const themeAfterClick = await page.evaluate(
|
|
() => document.documentElement.getAttribute("data-theme")
|
|
);
|
|
return { name: viewport.name, snapshot, themeAfterClick };
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage();
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
|
|
const viewports = [
|
|
{ name: "desktop", width: 1365, height: 768 },
|
|
{ name: "wide", width: 1600, height: 900 },
|
|
{ name: "tablet", width: 768, height: 900 },
|
|
{ name: "mobile", width: 390, height: 844, showApproval: true },
|
|
];
|
|
const layouts = [];
|
|
for (const viewport of viewports) layouts.push(await measure(page, viewport));
|
|
|
|
await page.setViewportSize({ width: 1365, height: 768 });
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await page.evaluate(() => Router.navigate("/overview"));
|
|
await page.waitForSelector(".ov-stage__title", { timeout: 5000 });
|
|
const cleanup = await page.evaluate(() => ({
|
|
centerHidden:
|
|
document.querySelector("#topbar-center")?.classList.contains("hidden"),
|
|
centerText: document.querySelector("#topbar-center")?.textContent.trim(),
|
|
chatIds:
|
|
document.querySelectorAll(
|
|
"#chat-session-chip, #chat-session-chip-key, " +
|
|
"#chat-session-copy, #chat-run-status, #chat-ctx-warn"
|
|
).length,
|
|
}));
|
|
|
|
await browser.close();
|
|
console.log(JSON.stringify({ layouts, cleanup, pageErrors: errors }));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/chat"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=120,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload["pageErrors"] == []
|
|
assert payload["cleanup"] == {"centerHidden": True, "centerText": "", "chatIds": 0}
|
|
|
|
layouts = {item["name"]: item["snapshot"] for item in payload["layouts"]}
|
|
for name, snap in layouts.items():
|
|
assert snap["scrollWidth"] <= snap["width"], (name, snap)
|
|
assert snap["topbarCount"] == 1, (name, snap)
|
|
assert snap["chatHeaderCount"] == 0, (name, snap)
|
|
assert snap["centerHidden"] is False, (name, snap)
|
|
assert snap["chip"]["visible"], (name, snap)
|
|
assert snap["copy"]["visible"], (name, snap)
|
|
assert snap["runStatus"]["visible"], (name, snap)
|
|
assert snap["runStatusText"] == "Running", (name, snap)
|
|
assert snap["theme"]["visible"], (name, snap)
|
|
assert snap["approvalCount"] == 1, (name, snap)
|
|
assert snap["chipKeyText"].startswith("agent:main:webchat:very-long-session-key")
|
|
assert snap["centerBox"]["right"] <= snap["topbarRightBox"]["left"] + 1, (name, snap)
|
|
center = snap["centerBox"]
|
|
for child in snap["topbarChildren"]:
|
|
if child["display"] == "none":
|
|
continue
|
|
assert child["left"] >= center["left"] - 1, (name, child, center)
|
|
assert child["right"] <= center["right"] + 1, (name, child, center)
|
|
|
|
for name in ("desktop", "wide"):
|
|
snap = layouts[name]
|
|
assert snap["labelDisplay"] != "none"
|
|
assert snap["warning"]["visible"], (name, snap)
|
|
assert snap["warningText"].startswith("Request ctx 90%"), (name, snap)
|
|
|
|
assert layouts["tablet"]["labelDisplay"] == "none"
|
|
assert layouts["mobile"]["labelDisplay"] == "none"
|
|
assert layouts["mobile"]["approval"]["visible"], layouts["mobile"]
|
|
assert layouts["mobile"]["approval"]["width"] <= 40, layouts["mobile"]
|
|
assert layouts["mobile"]["approvalText"] == "Approval required"
|
|
assert layouts["mobile"]["approvalLabel"] == "Approval required"
|
|
assert layouts["mobile"]["warning"]["visible"] is False
|
|
assert all(item["themeAfterClick"] in {"dark", "light"} for item in payload["layouts"])
|
|
|
|
|
|
def test_chat_slash_menu_aligns_with_composer_in_real_browser(tmp_path: Path) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_chat_slash_server.py"
|
|
browser_script = tmp_path / "webui_chat_slash_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
async function waitRpc(page) {
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
}
|
|
|
|
async function installMocks(page) {
|
|
await page.evaluate(() => {
|
|
const rpc = App.getRpc();
|
|
const originalCall = rpc.call.bind(rpc);
|
|
rpc.call = (method, params = {}) => {
|
|
if (method === "tools.search_provider") {
|
|
return Promise.resolve({ provider: "none" });
|
|
}
|
|
if (method === "config.get") {
|
|
return Promise.resolve({
|
|
permissions: { default_mode: "ask" },
|
|
squilla_router: { enabled: true, rollout_phase: "full", tiers: {} },
|
|
});
|
|
}
|
|
if (method === "chat.history") {
|
|
return Promise.resolve({
|
|
messages: [],
|
|
history_scope: "complete",
|
|
has_more: false,
|
|
});
|
|
}
|
|
if (method === "sessions.messages.subscribe") {
|
|
return Promise.resolve({
|
|
subscribed: true,
|
|
key: params.key,
|
|
current_stream_seq: 0,
|
|
replay_complete: true,
|
|
replayed_count: 0,
|
|
run_status: "idle",
|
|
});
|
|
}
|
|
if (method === "commands.list_for_surface") {
|
|
return Promise.resolve({
|
|
commands: [
|
|
{
|
|
name: "/compact",
|
|
description: [
|
|
"Compact older context in the current session with an intentionally",
|
|
"long command description that must truncate instead of stretching",
|
|
"the composer tray.",
|
|
].join(" "),
|
|
execution: { action: "sessions.contextCompact" },
|
|
},
|
|
],
|
|
});
|
|
}
|
|
if (method === "sessions.contextCompact") {
|
|
return Promise.resolve({ compacted: false, reason: "no_entries" });
|
|
}
|
|
return originalCall(method, params);
|
|
};
|
|
});
|
|
}
|
|
|
|
async function openChat(page, viewport) {
|
|
await page.setViewportSize({ width: viewport.width, height: viewport.height });
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await waitRpc(page);
|
|
await installMocks(page);
|
|
await page.evaluate(() =>
|
|
Router.navigate("/chat?session=agent:main:webchat:slash-layout")
|
|
);
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await page.locator("#chat-textarea").fill("/compact");
|
|
await page.waitForSelector(".chat-slash:not(.hidden)", { timeout: 5000 });
|
|
await page.waitForTimeout(80);
|
|
}
|
|
|
|
async function measure(page, viewport) {
|
|
await openChat(page, viewport);
|
|
const layout = await page.evaluate(() => {
|
|
const box = (selector) => {
|
|
const el = document.querySelector(selector);
|
|
const r = el.getBoundingClientRect();
|
|
return {
|
|
left: r.left,
|
|
right: r.right,
|
|
width: r.width,
|
|
height: r.height,
|
|
visible:
|
|
r.width > 0 &&
|
|
r.height > 0 &&
|
|
getComputedStyle(el).display !== "none" &&
|
|
getComputedStyle(el).visibility !== "hidden",
|
|
};
|
|
};
|
|
const desc = document.querySelector(".chat-slash-desc");
|
|
const slash = document.querySelector(".chat-slash");
|
|
const input = document.querySelector(".chat-input-bar");
|
|
return {
|
|
width: window.innerWidth,
|
|
scrollWidth: document.documentElement.scrollWidth,
|
|
slash: box(".chat-slash"),
|
|
input: box(".chat-input-bar"),
|
|
composer: box("#chat-composer"),
|
|
attach: box("#chat-btn-attach"),
|
|
newChat: box("#chat-btn-new"),
|
|
exportButton: box("#chat-btn-export"),
|
|
send: box("#chat-btn-send"),
|
|
slashParentId: slash?.parentElement?.id || "",
|
|
slashBeforeInput: !!(
|
|
slash &&
|
|
input &&
|
|
slash.compareDocumentPosition(input) &
|
|
Node.DOCUMENT_POSITION_FOLLOWING
|
|
),
|
|
descClientWidth: desc ? desc.clientWidth : 0,
|
|
descScrollWidth: desc ? desc.scrollWidth : 0,
|
|
};
|
|
});
|
|
|
|
await page.locator("#chat-textarea").press("ArrowDown");
|
|
const afterArrow = await page.locator(".chat-slash:not(.hidden)").count();
|
|
await page.locator("#chat-textarea").press("Escape");
|
|
const afterEscape = await page.locator(".chat-slash:not(.hidden)").count();
|
|
await page.locator("#chat-textarea").fill("/compact");
|
|
await page.waitForSelector(".chat-slash:not(.hidden)", { timeout: 5000 });
|
|
await page.locator("#chat-textarea").press("Enter");
|
|
await page.waitForFunction(
|
|
() => document.querySelector("#chat-textarea").value === ""
|
|
);
|
|
const afterEnterValue = await page.locator("#chat-textarea").inputValue();
|
|
|
|
return {
|
|
name: viewport.name,
|
|
layout,
|
|
afterArrow,
|
|
afterEscape,
|
|
afterEnterValue,
|
|
};
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage();
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
const viewports = [
|
|
{ name: "desktop", width: 1365, height: 768 },
|
|
{ name: "wide", width: 2048, height: 900 },
|
|
{ name: "mobile", width: 390, height: 844 },
|
|
];
|
|
const layouts = [];
|
|
for (const viewport of viewports) layouts.push(await measure(page, viewport));
|
|
await browser.close();
|
|
console.log(JSON.stringify({ layouts, pageErrors: errors }));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=120,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload["pageErrors"] == []
|
|
layouts = {item["name"]: item for item in payload["layouts"]}
|
|
for name, item in layouts.items():
|
|
layout = item["layout"]
|
|
assert layout["scrollWidth"] <= layout["width"], (name, layout)
|
|
assert layout["slash"]["visible"], (name, layout)
|
|
assert layout["slashParentId"] == "chat-composer", (name, layout)
|
|
assert layout["slashBeforeInput"] is True, (name, layout)
|
|
if name == "mobile":
|
|
assert layout["slash"]["left"] >= layout["composer"]["left"], (name, layout)
|
|
assert layout["slash"]["right"] <= layout["composer"]["right"], (name, layout)
|
|
else:
|
|
assert abs(layout["slash"]["left"] - layout["input"]["left"]) <= 1, (name, layout)
|
|
assert abs(layout["slash"]["right"] - layout["input"]["right"]) <= 1, (name, layout)
|
|
assert layout["descScrollWidth"] > layout["descClientWidth"], (name, layout)
|
|
assert item["afterArrow"] == 1, item
|
|
assert item["afterEscape"] == 0, item
|
|
assert item["afterEnterValue"] == "", item
|
|
assert layout["attach"]["visible"], (name, layout)
|
|
assert layout["newChat"]["visible"], (name, layout)
|
|
assert layout["send"]["visible"], (name, layout)
|
|
|
|
assert layouts["desktop"]["layout"]["slash"]["width"] < 1000
|
|
assert layouts["wide"]["layout"]["slash"]["width"] < 1000
|
|
assert layouts["mobile"]["layout"]["exportButton"]["visible"] is False
|
|
|
|
|
|
def test_chat_escape_in_composer_aborts_streaming_turn_in_real_browser(
|
|
tmp_path: Path,
|
|
) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_escape_abort_server.py"
|
|
browser_script = tmp_path / "webui_escape_abort_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
async function waitRpc(page) {
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage();
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await waitRpc(page);
|
|
|
|
await page.evaluate(() => {
|
|
const rpc = App.getRpc();
|
|
const originalCall = rpc.call.bind(rpc);
|
|
window.__escapeAbort = { sendCalls: [], abortCalls: [] };
|
|
rpc.call = (method, params = {}) => {
|
|
if (method === "tools.search_provider") {
|
|
return Promise.resolve({ provider: "none" });
|
|
}
|
|
if (method === "config.get") {
|
|
return Promise.resolve({
|
|
permissions: { default_mode: "ask" },
|
|
squilla_router: { enabled: true, rollout_phase: "full", tiers: {} },
|
|
});
|
|
}
|
|
if (method === "chat.history") {
|
|
return Promise.resolve({
|
|
messages: [],
|
|
history_scope: "complete",
|
|
has_more: false,
|
|
});
|
|
}
|
|
if (method === "sessions.messages.subscribe") {
|
|
return Promise.resolve({
|
|
subscribed: true,
|
|
key: params.key,
|
|
current_stream_seq: 0,
|
|
replay_complete: true,
|
|
replayed_count: 0,
|
|
run_status: "idle",
|
|
});
|
|
}
|
|
if (method === "chat.send") {
|
|
window.__escapeAbort.sendCalls.push(params);
|
|
return Promise.resolve({ task_id: "escape-abort-task" });
|
|
}
|
|
if (method === "chat.abort") {
|
|
window.__escapeAbort.abortCalls.push(params);
|
|
return Promise.resolve({ aborted: true, key: params.sessionKey });
|
|
}
|
|
return originalCall(method, params);
|
|
};
|
|
});
|
|
|
|
await page.evaluate(() =>
|
|
Router.navigate("/chat?session=agent:main:webchat:escape-abort")
|
|
);
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await page.fill("#chat-textarea", "turn to abort from textarea");
|
|
await page.click("#chat-btn-send");
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__escapeAbort.sendCalls.length === 1 &&
|
|
OpenSquillaChatDiag.snapshot().isStreaming === true,
|
|
null, { timeout: 5000 }
|
|
);
|
|
|
|
await page.focus("#chat-textarea");
|
|
const before = await page.evaluate(() => ({
|
|
focusId: document.activeElement?.id || "",
|
|
isStreaming: OpenSquillaChatDiag.snapshot().isStreaming,
|
|
stopVisible:
|
|
!document.querySelector("#chat-btn-stop")?.classList.contains("hidden"),
|
|
}));
|
|
await page.locator("#chat-textarea").press("Escape");
|
|
await page.waitForFunction(
|
|
() => window.__escapeAbort.abortCalls.length === 1,
|
|
null, { timeout: 5000 }
|
|
);
|
|
await page.waitForFunction(
|
|
() => OpenSquillaChatDiag.snapshot().isStreaming === false,
|
|
null, { timeout: 5000 }
|
|
);
|
|
const afterState = await page.evaluate(() => ({
|
|
isStreaming: OpenSquillaChatDiag.snapshot().isStreaming,
|
|
streamingCount: document.querySelectorAll(".msg.streaming").length,
|
|
thinkingCount: document.querySelectorAll(".msg.thinking").length,
|
|
stopVisible:
|
|
!document.querySelector("#chat-btn-stop")?.classList.contains("hidden"),
|
|
abortCalls: window.__escapeAbort.abortCalls,
|
|
}));
|
|
const after = { ...afterState, pageErrors: errors };
|
|
|
|
await browser.close();
|
|
console.log(JSON.stringify({ before, after }));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/chat"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=90,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
before = payload["before"]
|
|
after = payload["after"]
|
|
assert before["focusId"] == "chat-textarea", before
|
|
assert before["isStreaming"] is True, before
|
|
assert before["stopVisible"] is True, before
|
|
assert after["abortCalls"] == [
|
|
{
|
|
"sessionKey": "agent:main:webchat:escape-abort",
|
|
"source": "webui_escape",
|
|
}
|
|
], after
|
|
assert after["isStreaming"] is False, after
|
|
assert after["streamingCount"] == 0, after
|
|
assert after["thinkingCount"] == 0, after
|
|
assert after["stopVisible"] is False, after
|
|
assert after["pageErrors"] == [], after
|
|
|
|
|
|
def test_chat_tool_result_full_view_handles_large_payloads_in_real_browser(
|
|
tmp_path: Path,
|
|
) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_chat_tool_result_server.py"
|
|
browser_script = tmp_path / "webui_chat_tool_result_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
async function waitRpc(page) {
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
}
|
|
|
|
async function installMocks(page) {
|
|
await page.evaluate(() => {
|
|
const rpc = App.getRpc();
|
|
const originalCall = rpc.call.bind(rpc);
|
|
rpc.call = (method, params = {}) => {
|
|
if (method === "tools.search_provider") {
|
|
return Promise.resolve({ provider: "none" });
|
|
}
|
|
if (method === "config.get") {
|
|
return Promise.resolve({
|
|
permissions: { default_mode: "ask" },
|
|
squilla_router: { enabled: true, rollout_phase: "full", tiers: {} },
|
|
});
|
|
}
|
|
if (method === "chat.history") {
|
|
const longOutput = [
|
|
"labubu-1.jpg -> 1788872 chars base64",
|
|
"labubu-2.jpg -> 836304 chars base64",
|
|
"labubu-3.jpg -> 2109592 chars base64",
|
|
"single-unbroken-token-" + "x".repeat(1800),
|
|
].join("\\n");
|
|
return Promise.resolve({
|
|
messages: [
|
|
{
|
|
role: "assistant",
|
|
text: "",
|
|
timestamp: "2026-05-31T00:00:00Z",
|
|
tool_calls: [
|
|
{
|
|
type: "tool_use",
|
|
name: "execute_code",
|
|
tool_use_id: "tool-large-result",
|
|
input: { code: "print_large_payload()" },
|
|
},
|
|
{
|
|
type: "tool_result",
|
|
tool_use_id: "tool-large-result",
|
|
result: {
|
|
exit_code: 0,
|
|
stdout: longOutput,
|
|
stderr: "",
|
|
timed_out: false,
|
|
elapsed_ms: 213,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
history_scope: "complete",
|
|
has_more: false,
|
|
});
|
|
}
|
|
if (method === "sessions.messages.subscribe") {
|
|
return Promise.resolve({
|
|
subscribed: true,
|
|
key: params.key,
|
|
current_stream_seq: 0,
|
|
replay_complete: true,
|
|
replayed_count: 0,
|
|
run_status: "idle",
|
|
});
|
|
}
|
|
return originalCall(method, params);
|
|
};
|
|
});
|
|
}
|
|
|
|
async function measure(page, viewport) {
|
|
await page.setViewportSize({ width: viewport.width, height: viewport.height });
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await waitRpc(page);
|
|
await installMocks(page);
|
|
await page.evaluate(() =>
|
|
Router.navigate("/chat?session=agent:main:webchat:tool-result-full")
|
|
);
|
|
await page.waitForSelector(".chat-tools-summary", { timeout: 15000 });
|
|
await page.locator(".chat-tools-summary").first().click();
|
|
await page.waitForSelector(".chat-tool-view-btn", {
|
|
state: "visible",
|
|
timeout: 5000,
|
|
});
|
|
await page.locator(".chat-tool-view-btn").first().click();
|
|
await page.waitForSelector(".modal .chat-tool-result-full", { timeout: 5000 });
|
|
const layout = await page.evaluate(() => {
|
|
const rect = (selector) => {
|
|
const el = document.querySelector(selector);
|
|
const r = el.getBoundingClientRect();
|
|
return {
|
|
left: r.left,
|
|
right: r.right,
|
|
top: r.top,
|
|
bottom: r.bottom,
|
|
width: r.width,
|
|
height: r.height,
|
|
};
|
|
};
|
|
const pre = document.querySelector(".chat-tool-result-full");
|
|
const button = document.querySelector(".chat-tool-view-btn");
|
|
return {
|
|
width: window.innerWidth,
|
|
scrollWidth: document.documentElement.scrollWidth,
|
|
modal: rect(".modal"),
|
|
pre: rect(".chat-tool-result-full"),
|
|
preScrollWidth: pre.scrollWidth,
|
|
preClientWidth: pre.clientWidth,
|
|
buttonType: button ? button.getAttribute("type") : "",
|
|
text: pre ? pre.textContent.slice(0, 80) : "",
|
|
};
|
|
});
|
|
await page.locator(".modal-foot button", { hasText: "Close" }).click();
|
|
await page.waitForSelector(".modal-backdrop", { state: "detached", timeout: 5000 });
|
|
const afterClose = await page.locator(".modal-backdrop").count();
|
|
return { name: viewport.name, layout, afterClose };
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage();
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
const viewports = [
|
|
{ name: "desktop", width: 1365, height: 768 },
|
|
{ name: "mobile", width: 390, height: 844 },
|
|
];
|
|
const layouts = [];
|
|
for (const viewport of viewports) layouts.push(await measure(page, viewport));
|
|
await browser.close();
|
|
console.log(JSON.stringify({ layouts, pageErrors: errors }));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=120,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload["pageErrors"] == []
|
|
layouts = {item["name"]: item for item in payload["layouts"]}
|
|
for name, item in layouts.items():
|
|
layout = item["layout"]
|
|
assert item["afterClose"] == 0, item
|
|
assert layout["scrollWidth"] <= layout["width"], (name, layout)
|
|
assert layout["buttonType"] == "button", (name, layout)
|
|
assert "labubu-1.jpg" in layout["text"], (name, layout)
|
|
assert layout["modal"]["left"] >= 0, (name, layout)
|
|
assert layout["modal"]["right"] <= layout["width"], (name, layout)
|
|
assert layout["pre"]["right"] <= layout["modal"]["right"], (name, layout)
|
|
assert layout["preScrollWidth"] <= layout["preClientWidth"] + 2, (name, layout)
|
|
|
|
|
|
def test_chat_compaction_events_render_recoverable_toasts_in_real_browser(
|
|
tmp_path: Path,
|
|
) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_chat_compaction_server.py"
|
|
browser_script = tmp_path / "webui_chat_compaction_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
async function emitEvent(page, event, payload, meta = {}) {
|
|
await page.evaluate(
|
|
({ event, payload, meta }) => {
|
|
const rpc = App.getRpc();
|
|
const handlers = rpc._listeners.get(event);
|
|
if (handlers) {
|
|
handlers.forEach(h => h(payload, meta));
|
|
}
|
|
const wild = rpc._listeners.get("*");
|
|
if (wild) wild.forEach(h => h(event, payload, meta));
|
|
},
|
|
{ event, payload, meta }
|
|
);
|
|
}
|
|
|
|
async function emitCompaction(page, payload, meta = {}) {
|
|
return emitEvent(page, "session.event.compaction", payload, meta);
|
|
}
|
|
|
|
async function lastSeparatorText(page) {
|
|
return await page.evaluate(() => {
|
|
const separators = document.querySelectorAll(".chat-context-separator");
|
|
return separators.length
|
|
? separators[separators.length - 1].textContent
|
|
: "";
|
|
});
|
|
}
|
|
|
|
async function lastSeparatorPlacement(page) {
|
|
return await page.evaluate(() => {
|
|
const thread = document.querySelector("#chat-thread");
|
|
const separators = document.querySelectorAll(".chat-context-separator");
|
|
const separator = separators[separators.length - 1];
|
|
if (!thread || !separator) return null;
|
|
const threadBox = thread.getBoundingClientRect();
|
|
const separatorBox = separator.getBoundingClientRect();
|
|
return {
|
|
bottomGap: Math.round(threadBox.bottom - separatorBox.bottom),
|
|
topGap: Math.round(separatorBox.top - threadBox.top),
|
|
className: separator.className,
|
|
scrollTop: Math.round(thread.scrollTop),
|
|
scrollHeight: Math.round(thread.scrollHeight),
|
|
clientHeight: Math.round(thread.clientHeight),
|
|
};
|
|
});
|
|
}
|
|
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage();
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
await page.evaluate(() => {
|
|
const rpc = App.getRpc();
|
|
const originalCall = rpc.call.bind(rpc);
|
|
const originalToast = UI.toast.bind(UI);
|
|
window.__compactUx = { chatCalls: [], toastCalls: [] };
|
|
UI.toast = (message, type = "info", duration = 3000) => {
|
|
window.__compactUx.toastCalls.push({ message, type, duration });
|
|
return originalToast(message, type, duration);
|
|
};
|
|
rpc.call = (method, params = {}) => {
|
|
if (method === "chat.send") {
|
|
window.__compactUx.chatCalls.push({ method, params });
|
|
return Promise.resolve({
|
|
task_id: "compact-ux-" + window.__compactUx.chatCalls.length,
|
|
});
|
|
}
|
|
return originalCall(method, params);
|
|
};
|
|
});
|
|
|
|
await emitCompaction(page, { status: "started", source: "manual" });
|
|
await page.waitForSelector(".chat-context-separator", { timeout: 5000 });
|
|
await page.waitForTimeout(600);
|
|
const startedStatusVisible = await lastSeparatorText(page);
|
|
const manualSeparatorStarted = startedStatusVisible;
|
|
const manualSeparatorStartedPlacement = await lastSeparatorPlacement(page);
|
|
await emitCompaction(page, { status: "skipped", source: "manual" });
|
|
await page.waitForTimeout(250);
|
|
const skippedStatusVisible = await lastSeparatorText(page);
|
|
|
|
await emitCompaction(page, {
|
|
status: "completed",
|
|
source: "manual",
|
|
tokens_before: 3500,
|
|
tokens_after: 1300,
|
|
});
|
|
await page.waitForFunction(
|
|
() => document.body.textContent.includes("context compacted"),
|
|
null, { timeout: 5000 }
|
|
);
|
|
|
|
await emitCompaction(
|
|
page,
|
|
{ status: "failed", source: "manual", message: "old replay" },
|
|
{ replayed: true }
|
|
);
|
|
await page.waitForTimeout(250);
|
|
|
|
await emitCompaction(page, { status: "started", source: "manual" });
|
|
await page.fill("#chat-textarea", "queued during compact");
|
|
await page.click("#chat-btn-send");
|
|
await page.waitForTimeout(150);
|
|
const queuedBeforeSkipped = await page.evaluate(
|
|
() => window.__compactUx.chatCalls.length
|
|
);
|
|
await emitCompaction(page, { status: "skipped", source: "manual" });
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__compactUx.chatCalls
|
|
.some(c => c.params.message === "queued during compact"),
|
|
null, { timeout: 5000 }
|
|
);
|
|
await emitEvent(page, "session.event.done", { text: "compact queued answer" });
|
|
await page.waitForTimeout(150);
|
|
|
|
await page.fill("#chat-textarea", "seed automatic compact turn");
|
|
await page.click("#chat-btn-send");
|
|
await page.waitForTimeout(150);
|
|
const callsBeforeAutomaticCompact = await page.evaluate(
|
|
() => window.__compactUx.chatCalls.length
|
|
);
|
|
await emitCompaction(page, {
|
|
status: "started",
|
|
source: "automatic",
|
|
phase: "preflight",
|
|
});
|
|
await page.waitForTimeout(800);
|
|
const automaticStartedStatusVisible = await lastSeparatorText(page);
|
|
const automaticSeparatorStarted = automaticStartedStatusVisible;
|
|
const automaticSeparatorStartedPlacement = await lastSeparatorPlacement(page);
|
|
await page.fill("#chat-textarea", "queued during automatic compact");
|
|
await page.click("#chat-btn-send");
|
|
await page.waitForTimeout(150);
|
|
const automaticQueuedBeforeCompleted = await page.evaluate(
|
|
() => window.__compactUx.chatCalls.length
|
|
);
|
|
await emitCompaction(page, {
|
|
status: "observed",
|
|
source: "automatic",
|
|
event: "compaction.chunk_summarized",
|
|
tokens_before: 5000,
|
|
tokens_after: 2600,
|
|
});
|
|
await page.waitForTimeout(800);
|
|
const automaticObservedStatusVisible = await lastSeparatorText(page);
|
|
const automaticSeparatorObserved = automaticObservedStatusVisible;
|
|
await emitCompaction(page, {
|
|
status: "completed",
|
|
source: "automatic",
|
|
tokens_before: 5000,
|
|
tokens_after: 1800,
|
|
});
|
|
await page.waitForTimeout(800);
|
|
const automaticSeparatorCompleted = await lastSeparatorText(page);
|
|
const automaticDidNotDrainBeforeDone = await page.evaluate(
|
|
expected => window.__compactUx.chatCalls.length === expected,
|
|
callsBeforeAutomaticCompact
|
|
);
|
|
await emitEvent(page, "session.event.done", { text: "automatic compact answer" });
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__compactUx.chatCalls
|
|
.some(c => c.params.message === "queued during automatic compact"),
|
|
null, { timeout: 5000 }
|
|
);
|
|
|
|
// Wait >1500ms so the dedup guard resets before emitting another
|
|
// "started" event with the same source signature.
|
|
await page.waitForTimeout(1600);
|
|
await emitCompaction(page, {
|
|
status: "started",
|
|
source: "automatic",
|
|
phase: "preflight",
|
|
});
|
|
await page.waitForTimeout(800);
|
|
await emitCompaction(page, {
|
|
status: "skipped",
|
|
source: "automatic",
|
|
phase: "preflight",
|
|
reason: "structured_content_noop",
|
|
user_visible: false,
|
|
});
|
|
await page.waitForTimeout(300);
|
|
const automaticNoopSeparatorHidden = await page
|
|
.locator(".chat-context-separator")
|
|
.count();
|
|
const automaticNoopBodyText = await page.evaluate(
|
|
() => document.body.textContent
|
|
);
|
|
|
|
await page.waitForTimeout(1600);
|
|
await emitCompaction(page, {
|
|
status: "started",
|
|
source: "automatic",
|
|
phase: "preflight",
|
|
});
|
|
await page.waitForTimeout(800);
|
|
await emitCompaction(page, {
|
|
status: "skipped",
|
|
source: "automatic",
|
|
phase: "preflight",
|
|
reason: "empty_summary",
|
|
user_visible: true,
|
|
});
|
|
await page.waitForTimeout(800);
|
|
const automaticNonBenignSkipStatus = await lastSeparatorText(page);
|
|
|
|
await page.waitForTimeout(1600);
|
|
await emitCompaction(page, {
|
|
status: "started",
|
|
source: "automatic",
|
|
phase: "preflight",
|
|
});
|
|
await page.waitForTimeout(800);
|
|
await emitCompaction(page, {
|
|
status: "emergency_ephemeral",
|
|
source: "automatic",
|
|
phase: "preflight",
|
|
reason: "empty_summary",
|
|
tokens_before: 5000,
|
|
tokens_after: 2400,
|
|
});
|
|
await page.waitForTimeout(800);
|
|
const emergencyStatusVisible = await lastSeparatorText(page);
|
|
|
|
await page.waitForTimeout(1600);
|
|
await emitCompaction(page, { status: "started", source: "manual" });
|
|
await page.waitForTimeout(800);
|
|
await page.fill("#chat-textarea", "queued after blocking compact failure");
|
|
await page.click("#chat-btn-send");
|
|
await page.waitForTimeout(150);
|
|
await emitCompaction(page, {
|
|
status: "failed",
|
|
source: "manual",
|
|
reason: "compaction_insufficient",
|
|
message: "still over budget",
|
|
refused: true,
|
|
});
|
|
await page.waitForTimeout(800);
|
|
const failedStatusVisible = await lastSeparatorText(page);
|
|
|
|
const bodyText = await page.locator("body").innerText();
|
|
const toastMessages = await page.evaluate(
|
|
() => window.__compactUx.toastCalls.map(t => t.message)
|
|
);
|
|
// Diagnostic: log actual rail text for debugging
|
|
console.error("DIAG_EMERGENCY:", JSON.stringify(emergencyStatusVisible));
|
|
console.error("DIAG_FAILED:", JSON.stringify(failedStatusVisible));
|
|
const result = {
|
|
hasStartedToast: toastMessages.includes("Compacting context..."),
|
|
hasSkippedToast: toastMessages.includes(
|
|
"Already within context budget; no compact was applied."
|
|
),
|
|
hasCompletedToast: toastMessages.some(m => m.includes("Context compacted")),
|
|
hasEmergencyToast: toastMessages.includes(
|
|
"Continuing with temporary context compaction for this turn"
|
|
),
|
|
hasFailedToast: toastMessages.some(
|
|
m => m.includes("Compact failed: still over budget")
|
|
),
|
|
hasReplayedFailureToast: toastMessages.some(m => m.includes("old replay")),
|
|
startedStatusVisible: startedStatusVisible.includes("context compacting"),
|
|
manualRailStarted:
|
|
manualSeparatorStarted.includes("context compacting"),
|
|
manualRailBottomAnchored:
|
|
manualSeparatorStartedPlacement &&
|
|
manualSeparatorStartedPlacement.bottomGap <= 60 &&
|
|
manualSeparatorStartedPlacement.className
|
|
.includes("chat-context-separator--session"),
|
|
skippedStatusVisible: skippedStatusVisible.includes(
|
|
"no compaction needed"
|
|
),
|
|
failedStatusVisible:
|
|
failedStatusVisible.includes("compaction failed"),
|
|
queuedBeforeSkipped,
|
|
skippedDrainedQueuedSend: await page.evaluate(
|
|
() => window.__compactUx.chatCalls
|
|
.some(c => c.params.message === "queued during compact")
|
|
),
|
|
automaticStartedStatusVisible: automaticStartedStatusVisible.includes(
|
|
"context compacting"
|
|
),
|
|
automaticRailStarted:
|
|
automaticSeparatorStarted.includes("context compacting"),
|
|
automaticRailBottomAnchored:
|
|
automaticSeparatorStartedPlacement &&
|
|
automaticSeparatorStartedPlacement.bottomGap <= 60 &&
|
|
automaticSeparatorStartedPlacement.className
|
|
.includes("chat-context-separator--session"),
|
|
automaticObservedStatusVisible: automaticObservedStatusVisible.includes(
|
|
"context compacting"
|
|
),
|
|
automaticRailObserved:
|
|
automaticSeparatorObserved.includes("context compacting"),
|
|
automaticRailCompleted:
|
|
automaticSeparatorCompleted.includes("context compacted"),
|
|
automaticQueuedBeforeCompleted:
|
|
automaticQueuedBeforeCompleted === callsBeforeAutomaticCompact,
|
|
automaticDidNotDrainBeforeDone,
|
|
automaticDrainedAfterDone: await page.evaluate(
|
|
() => window.__compactUx.chatCalls
|
|
.some(c => c.params.message === "queued during automatic compact")
|
|
),
|
|
emergencyStatusVisible:
|
|
emergencyStatusVisible.includes("temporary compaction") &&
|
|
!emergencyStatusVisible.includes("empty summary"),
|
|
automaticNoopRailHidden: automaticNoopSeparatorHidden === 0,
|
|
automaticNoopSkippedHidden:
|
|
!automaticNoopBodyText.includes("Context compaction skipped") &&
|
|
!automaticNoopBodyText.includes("structured content noop"),
|
|
automaticNonBenignSkipVisible:
|
|
automaticNonBenignSkipStatus.includes("compaction skipped") &&
|
|
!automaticNonBenignSkipStatus.includes("empty summary"),
|
|
blockingFailureKeptPending:
|
|
(await page.locator("#chat-pending").innerText())
|
|
.includes("queued after blocking compact"),
|
|
blockingFailureDidNotDrain: await page.evaluate(
|
|
() => !window.__compactUx.chatCalls
|
|
.some(c => c.params.message === "queued after blocking compact failure")
|
|
),
|
|
blockingFailureDidNotRecoverComposer:
|
|
(await page.locator("#chat-textarea").inputValue()) === "",
|
|
pageErrors: errors,
|
|
};
|
|
await browser.close();
|
|
console.log(JSON.stringify(result));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/chat"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=90,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload == {
|
|
"hasStartedToast": False,
|
|
"hasSkippedToast": False,
|
|
"hasCompletedToast": False,
|
|
"hasEmergencyToast": True,
|
|
"hasFailedToast": True,
|
|
"hasReplayedFailureToast": False,
|
|
"startedStatusVisible": True,
|
|
"manualRailStarted": True,
|
|
"manualRailBottomAnchored": True,
|
|
"skippedStatusVisible": True,
|
|
"failedStatusVisible": True,
|
|
"queuedBeforeSkipped": 0,
|
|
"skippedDrainedQueuedSend": True,
|
|
"automaticStartedStatusVisible": True,
|
|
"automaticRailStarted": True,
|
|
"automaticRailBottomAnchored": True,
|
|
"automaticObservedStatusVisible": True,
|
|
"automaticRailObserved": True,
|
|
"automaticRailCompleted": True,
|
|
"automaticQueuedBeforeCompleted": True,
|
|
"automaticDidNotDrainBeforeDone": True,
|
|
"automaticDrainedAfterDone": True,
|
|
"emergencyStatusVisible": True,
|
|
"automaticNoopRailHidden": True,
|
|
"automaticNoopSkippedHidden": True,
|
|
"automaticNonBenignSkipVisible": True,
|
|
"blockingFailureKeptPending": True,
|
|
"blockingFailureDidNotDrain": True,
|
|
"blockingFailureDidNotRecoverComposer": True,
|
|
"pageErrors": [],
|
|
}
|
|
|
|
|
|
def test_router_fx_live_then_reopen_stays_settled_in_real_browser(tmp_path: Path) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_router_fx_server.py"
|
|
browser_script = tmp_path / "webui_router_fx_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
async function waitRpc(page) {
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
}
|
|
|
|
async function emit(page, event, payload, meta = {}) {
|
|
await page.evaluate(
|
|
({ event, payload, meta }) => {
|
|
const rpc = App.getRpc();
|
|
const named = rpc._listeners.get(event);
|
|
if (named) named.forEach(h => h(payload, meta));
|
|
const wild = rpc._listeners.get("*");
|
|
if (wild) wild.forEach(h => h(event, payload, meta));
|
|
},
|
|
{ event, payload, meta }
|
|
);
|
|
}
|
|
|
|
async function snapshot(page) {
|
|
return await page.evaluate(() => {
|
|
const strips = Array.from(document.querySelectorAll(".router-fx"));
|
|
const strip = strips[0] || null;
|
|
const cells = Array.from(document.querySelectorAll(".router-fx-cell .nm"));
|
|
const animations = strips.flatMap(el =>
|
|
el.getAnimations({ subtree: true })
|
|
.filter(anim => anim.playState !== "finished" && anim.playState !== "idle")
|
|
.map(anim => anim.animationName || "")
|
|
);
|
|
const overflows = cells.filter(el => el.scrollWidth > el.clientWidth + 1)
|
|
.map(el => el.textContent);
|
|
const grid = document.querySelector(".router-fx-grid");
|
|
const gridRect = grid ? grid.getBoundingClientRect() : null;
|
|
return {
|
|
count: strips.length,
|
|
state: strip?.dataset.state || "",
|
|
renderMode: strip?.dataset.renderMode || "",
|
|
liveCount: document.querySelectorAll(".router-fx[data-live='true']").length,
|
|
scanningCount: document.querySelectorAll(
|
|
".router-fx[data-scanning='true']"
|
|
).length,
|
|
selectorVisible: document.querySelectorAll(".router-fx-selector.visible").length,
|
|
bursts: document.querySelectorAll(".router-fx-burst").length,
|
|
pinging: document.querySelectorAll(".router-fx-cell.pinging").length,
|
|
animations,
|
|
aria: strip?.getAttribute("aria-label") || "",
|
|
winner: document.querySelector(".router-fx-cell.win .nm")?.textContent || "",
|
|
winners: strips.map(
|
|
el => el.querySelector(".router-fx-cell.win .nm")?.textContent || ""
|
|
),
|
|
cellCount: cells.length,
|
|
cellLabels: cells.map(el => el.textContent || ""),
|
|
hasLongLabel: cells.some(el => el.textContent === "gemini-3.1-flash-lite"),
|
|
overflows,
|
|
gridWithinViewport: gridRect
|
|
? gridRect.left >= -1 && gridRect.right <= window.innerWidth + 1
|
|
: false,
|
|
};
|
|
});
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await waitRpc(page);
|
|
|
|
await page.evaluate(() => {
|
|
localStorage.setItem(
|
|
"opensquilla-router-fx",
|
|
JSON.stringify({ enabled: true, variant: "default" })
|
|
);
|
|
window.__routerFxTest = {
|
|
sessionKey: "agent:main:webchat:router-fx-panel",
|
|
historyMessages: [],
|
|
chatCalls: [],
|
|
routerConfig: {
|
|
enabled: true,
|
|
rollout_phase: "full",
|
|
tiers: {
|
|
c1: { model: "openrouter/deepseek-v4-flash" },
|
|
c2: { model: "openrouter/gemini-3.1-flash-lite" },
|
|
c3: { model: "openrouter/qwen3.6-max" },
|
|
image_model: {
|
|
model: "openrouter/kimi-k2.6",
|
|
supports_image: true,
|
|
image_only: true,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
const rpc = App.getRpc();
|
|
const originalCall = rpc.call.bind(rpc);
|
|
rpc.call = (method, params = {}) => {
|
|
if (method === "tools.search_provider") {
|
|
return Promise.resolve({ provider: "none" });
|
|
}
|
|
if (method === "config.get") {
|
|
return Promise.resolve({
|
|
permissions: { default_mode: "ask" },
|
|
squilla_router: window.__routerFxTest.routerConfig,
|
|
});
|
|
}
|
|
if (method === "chat.history") {
|
|
if (window.__routerFxTest.deferHistory) {
|
|
return new Promise(resolve => {
|
|
window.__routerFxTest.resolveHistory = () => {
|
|
window.__routerFxTest.deferHistory = false;
|
|
resolve({
|
|
messages: window.__routerFxTest.historyMessages,
|
|
history_scope: "complete",
|
|
has_more: false,
|
|
});
|
|
};
|
|
});
|
|
}
|
|
return Promise.resolve({
|
|
messages: window.__routerFxTest.historyMessages,
|
|
history_scope: "complete",
|
|
has_more: false,
|
|
});
|
|
}
|
|
if (method === "sessions.messages.subscribe") {
|
|
return Promise.resolve({
|
|
subscribed: true,
|
|
key: params.key,
|
|
current_stream_seq: 100,
|
|
replay_complete: true,
|
|
replayed_count: 0,
|
|
run_status: "idle",
|
|
});
|
|
}
|
|
if (method === "chat.send") {
|
|
window.__routerFxTest.chatCalls.push({ method, params });
|
|
return Promise.resolve({ task_id: "router-fx-task" });
|
|
}
|
|
return originalCall(method, params);
|
|
};
|
|
});
|
|
|
|
await page.evaluate(() =>
|
|
Router.navigate("/chat?session=agent:main:webchat:router-fx-panel")
|
|
);
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await page.waitForFunction(
|
|
() => document.querySelector("#toggle-router")?.checked === true,
|
|
{ timeout: 15000 }
|
|
);
|
|
|
|
await page.fill("#chat-textarea", "route this with a long label");
|
|
await page.click("#chat-btn-send");
|
|
await page.waitForSelector(".router-fx[data-live='true'][data-scanning='true']", {
|
|
timeout: 5000,
|
|
});
|
|
const sessionKey = await page.locator("#chat-session-chip-key").innerText();
|
|
await emit(page, "session.event.router_decision", {
|
|
session_key: sessionKey,
|
|
stream_seq: 101,
|
|
tier: "c1",
|
|
model: "openrouter/deepseek-v4-flash",
|
|
routing_source: "squilla_router",
|
|
routing_applied: true,
|
|
});
|
|
await page.waitForSelector(".router-fx[data-state='settled'] .router-fx-cell.win", {
|
|
timeout: 5000,
|
|
});
|
|
const liveSettled = await snapshot(page);
|
|
|
|
await page.evaluate(() => {
|
|
window.__routerFxTest.historyMessages = [
|
|
{
|
|
role: "user",
|
|
text: "route this with a long label",
|
|
message_id: "router-fx-u1",
|
|
timestamp: "2026-05-30T00:00:00Z",
|
|
},
|
|
{
|
|
role: "assistant",
|
|
text: "done",
|
|
message_id: "router-fx-a1",
|
|
timestamp: "2026-05-30T00:00:01Z",
|
|
model: "openrouter/deepseek-v4-flash",
|
|
usage: {
|
|
model: "openrouter/deepseek-v4-flash",
|
|
routed_model: "openrouter/deepseek-v4-flash",
|
|
routed_tier: "c1",
|
|
routing_source: "squilla_router",
|
|
routing_applied: true,
|
|
input_tokens: 11,
|
|
output_tokens: 2,
|
|
},
|
|
},
|
|
];
|
|
Router.navigate("/overview");
|
|
Router.navigate("/chat?session=agent:main:webchat:router-fx-panel");
|
|
});
|
|
await page.waitForSelector(
|
|
".router-fx[data-render-mode='history'][data-state='settled']",
|
|
{ timeout: 15000 }
|
|
);
|
|
const reopened = await snapshot(page);
|
|
|
|
await emit(page, "session.event.router_decision", {
|
|
session_key: sessionKey,
|
|
stream_seq: 102,
|
|
tier: "c1",
|
|
model: "openrouter/deepseek-v4-flash",
|
|
routing_source: "squilla_router",
|
|
routing_applied: true,
|
|
}, { replayed: true });
|
|
await page.waitForTimeout(700);
|
|
const afterReplay = await snapshot(page);
|
|
|
|
await page.setViewportSize({ width: 520, height: 720 });
|
|
await page.waitForTimeout(300);
|
|
const narrow = await snapshot(page);
|
|
|
|
await page.setViewportSize({ width: 1280, height: 720 });
|
|
await page.evaluate(() => {
|
|
window.__routerFxTest.historyMessages = [
|
|
{
|
|
role: "user",
|
|
text: "first routed turn",
|
|
message_id: "router-fx-u-race-1",
|
|
timestamp: "2026-05-30T00:00:00Z",
|
|
},
|
|
{
|
|
role: "assistant",
|
|
text: "first done",
|
|
message_id: "router-fx-a-race-1",
|
|
timestamp: "2026-05-30T00:00:01Z",
|
|
model: "openrouter/deepseek-v4-flash",
|
|
usage: {
|
|
model: "openrouter/deepseek-v4-flash",
|
|
routed_model: "openrouter/deepseek-v4-flash",
|
|
routed_tier: "c1",
|
|
routing_source: "squilla_router",
|
|
routing_applied: true,
|
|
input_tokens: 11,
|
|
output_tokens: 2,
|
|
},
|
|
},
|
|
];
|
|
Router.navigate("/overview");
|
|
Router.navigate("/chat?session=agent:main:webchat:router-fx-panel");
|
|
});
|
|
await page.waitForFunction(
|
|
() =>
|
|
document.querySelectorAll(".router-fx").length === 1 &&
|
|
document.querySelector(".router-fx-cell.win .nm")?.textContent ===
|
|
"deepseek-v4-flash",
|
|
{ timeout: 15000 }
|
|
);
|
|
await page.evaluate(() => {
|
|
window.__routerFxTest.historyMessages = [
|
|
{
|
|
role: "user",
|
|
text: "first routed turn",
|
|
message_id: "router-fx-u-race-1",
|
|
timestamp: "2026-05-30T00:00:00Z",
|
|
},
|
|
{
|
|
role: "assistant",
|
|
text: "first done",
|
|
message_id: "router-fx-a-race-1",
|
|
timestamp: "2026-05-30T00:00:01Z",
|
|
model: "openrouter/deepseek-v4-flash",
|
|
usage: {
|
|
model: "openrouter/deepseek-v4-flash",
|
|
routed_model: "openrouter/deepseek-v4-flash",
|
|
routed_tier: "c1",
|
|
routing_source: "squilla_router",
|
|
routing_applied: true,
|
|
input_tokens: 11,
|
|
output_tokens: 2,
|
|
},
|
|
},
|
|
{
|
|
role: "user",
|
|
text: "second routed turn",
|
|
message_id: "router-fx-u-race-2",
|
|
timestamp: "2026-05-30T00:00:02Z",
|
|
},
|
|
{
|
|
role: "assistant",
|
|
text: "second done",
|
|
message_id: "router-fx-a-race-2",
|
|
timestamp: "2026-05-30T00:00:03Z",
|
|
model: "openrouter/gemini-3.1-flash-lite",
|
|
usage: {
|
|
model: "openrouter/gemini-3.1-flash-lite",
|
|
routed_model: "openrouter/gemini-3.1-flash-lite",
|
|
routed_tier: "c2",
|
|
routing_source: "squilla_router",
|
|
routing_applied: true,
|
|
input_tokens: 13,
|
|
output_tokens: 3,
|
|
},
|
|
},
|
|
];
|
|
window.__routerFxTest.deferHistory = true;
|
|
Router.navigate("/overview");
|
|
Router.navigate("/chat?session=agent:main:webchat:router-fx-panel");
|
|
});
|
|
await emit(page, "session.event.router_decision", {
|
|
session_key: sessionKey,
|
|
stream_seq: 103,
|
|
tier: "c2",
|
|
model: "openrouter/gemini-3.1-flash-lite",
|
|
routing_source: "squilla_router",
|
|
routing_applied: true,
|
|
}, { replayed: true });
|
|
await page.waitForTimeout(250);
|
|
const duringHistoryHydrationReplay = await snapshot(page);
|
|
await page.evaluate(() => window.__routerFxTest.resolveHistory());
|
|
await page.waitForFunction(
|
|
() => {
|
|
const winners = Array.from(document.querySelectorAll(".router-fx"))
|
|
.map(el => el.querySelector(".router-fx-cell.win .nm")?.textContent || "");
|
|
return winners.length === 2 &&
|
|
winners.includes("deepseek-v4-flash") &&
|
|
winners.includes("gemini-3.1-flash-lite");
|
|
},
|
|
{ timeout: 15000 }
|
|
);
|
|
await page.waitForTimeout(300);
|
|
const afterHistoryHydrationReplay = await snapshot(page);
|
|
|
|
await page.evaluate(() => {
|
|
window.__routerFxTest.historyMessages = [
|
|
{
|
|
role: "user",
|
|
text: "describe image",
|
|
message_id: "router-fx-u-image",
|
|
timestamp: "2026-05-30T00:00:04Z",
|
|
attachments: [{
|
|
mime: "image/png",
|
|
type: "image/png",
|
|
name: "preview.png",
|
|
data: "data:image/png;base64,iVBORw0KGgo=",
|
|
}],
|
|
},
|
|
{
|
|
role: "assistant",
|
|
text: "image done",
|
|
message_id: "router-fx-a-image",
|
|
timestamp: "2026-05-30T00:00:05Z",
|
|
model: "openrouter/kimi-k2.6",
|
|
usage: {
|
|
model: "openrouter/kimi-k2.6",
|
|
routed_model: "openrouter/kimi-k2.6",
|
|
routed_tier: "image_model",
|
|
routing_source: "image_route",
|
|
routing_applied: true,
|
|
input_tokens: 21,
|
|
output_tokens: 5,
|
|
},
|
|
},
|
|
];
|
|
Router.navigate("/overview");
|
|
Router.navigate("/chat?session=agent:main:webchat:router-fx-panel");
|
|
});
|
|
await page.waitForFunction(
|
|
() =>
|
|
document.querySelector(".msg.user .msg-attachments") &&
|
|
document.querySelectorAll(".router-fx").length === 0,
|
|
{ timeout: 15000 }
|
|
);
|
|
const singleImageCandidate = await snapshot(page);
|
|
|
|
await page.evaluate(() => {
|
|
window.__routerFxTest.routerConfig = {
|
|
enabled: true,
|
|
rollout_phase: "full",
|
|
tiers: {
|
|
t1: { model: "openrouter/shared-model" },
|
|
t2: { model: "other-provider/shared-model" },
|
|
},
|
|
};
|
|
window.__routerFxTest.historyMessages = [
|
|
{
|
|
role: "user",
|
|
text: "same model different provider",
|
|
message_id: "router-fx-u-same-display",
|
|
timestamp: "2026-05-30T00:00:06Z",
|
|
},
|
|
{
|
|
role: "assistant",
|
|
text: "same done",
|
|
message_id: "router-fx-a-same-display",
|
|
timestamp: "2026-05-30T00:00:07Z",
|
|
model: "openrouter/shared-model",
|
|
usage: {
|
|
model: "openrouter/shared-model",
|
|
routed_model: "openrouter/shared-model",
|
|
routed_tier: "t1",
|
|
routing_source: "squilla_router",
|
|
routing_applied: true,
|
|
input_tokens: 8,
|
|
output_tokens: 2,
|
|
},
|
|
},
|
|
];
|
|
Router.navigate("/overview");
|
|
Router.navigate("/chat?session=agent:main:webchat:router-fx-panel");
|
|
});
|
|
await page.waitForFunction(
|
|
() =>
|
|
document.querySelector(".msg.user")?.textContent.includes(
|
|
"same model different provider"
|
|
) &&
|
|
document.querySelectorAll(".router-fx").length === 0,
|
|
{ timeout: 15000 }
|
|
);
|
|
const sameDisplaySingleCandidate = await snapshot(page);
|
|
|
|
const result = {
|
|
liveSettled,
|
|
reopened,
|
|
afterReplay,
|
|
narrow,
|
|
duringHistoryHydrationReplay,
|
|
afterHistoryHydrationReplay,
|
|
singleImageCandidate,
|
|
sameDisplaySingleCandidate,
|
|
pageErrors: errors,
|
|
};
|
|
await browser.close();
|
|
console.log(JSON.stringify(result));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=90,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload["pageErrors"] == [], payload["pageErrors"]
|
|
assert payload["liveSettled"]["state"] == "settled"
|
|
assert payload["liveSettled"]["renderMode"] == "live"
|
|
assert payload["liveSettled"]["liveCount"] == 0
|
|
assert payload["liveSettled"]["scanningCount"] == 0
|
|
assert payload["liveSettled"]["selectorVisible"] == 0
|
|
assert payload["liveSettled"]["winner"] == "deepseek-v4-flash"
|
|
assert "Router selected deepseek-v4-flash" in payload["liveSettled"]["aria"]
|
|
assert payload["liveSettled"]["cellCount"] == 3
|
|
assert set(payload["liveSettled"]["cellLabels"]) == {
|
|
"deepseek-v4-flash",
|
|
"gemini-3.1-flash-lite",
|
|
"qwen3.6-max",
|
|
}
|
|
assert "kimi-k2.6" not in payload["liveSettled"]["cellLabels"]
|
|
|
|
for key in ("reopened", "afterReplay", "narrow"):
|
|
snap = payload[key]
|
|
assert snap["count"] == 1, snap
|
|
assert snap["state"] == "settled", snap
|
|
assert snap["renderMode"] == "history", snap
|
|
assert snap["liveCount"] == 0, snap
|
|
assert snap["scanningCount"] == 0, snap
|
|
assert snap["selectorVisible"] == 0, snap
|
|
assert snap["bursts"] == 0, snap
|
|
assert snap["pinging"] == 0, snap
|
|
assert snap["animations"] == [], snap
|
|
assert snap["winner"] == "deepseek-v4-flash", snap
|
|
assert snap["hasLongLabel"] is True, snap
|
|
assert snap["cellCount"] == 3, snap
|
|
assert "kimi-k2.6" not in snap["cellLabels"], snap
|
|
assert snap["overflows"] == [], snap
|
|
assert snap["gridWithinViewport"] is True, snap
|
|
|
|
during = payload["duringHistoryHydrationReplay"]
|
|
assert during["count"] in (0, 1), during
|
|
if during["count"] == 1:
|
|
assert during["winners"] == ["deepseek-v4-flash"], during
|
|
assert during["liveCount"] == 0, during
|
|
assert during["scanningCount"] == 0, during
|
|
assert during["selectorVisible"] == 0, during
|
|
assert during["animations"] == [], during
|
|
|
|
after_hydration = payload["afterHistoryHydrationReplay"]
|
|
assert after_hydration["count"] == 2, after_hydration
|
|
assert after_hydration["renderMode"] == "history", after_hydration
|
|
assert after_hydration["liveCount"] == 0, after_hydration
|
|
assert after_hydration["scanningCount"] == 0, after_hydration
|
|
assert after_hydration["selectorVisible"] == 0, after_hydration
|
|
assert after_hydration["bursts"] == 0, after_hydration
|
|
assert after_hydration["pinging"] == 0, after_hydration
|
|
assert after_hydration["animations"] == [], after_hydration
|
|
assert after_hydration["overflows"] == [], after_hydration
|
|
assert set(after_hydration["winners"]) == {
|
|
"deepseek-v4-flash",
|
|
"gemini-3.1-flash-lite",
|
|
}, after_hydration
|
|
|
|
image_single = payload["singleImageCandidate"]
|
|
assert image_single["count"] == 0, image_single
|
|
assert image_single["cellCount"] == 0, image_single
|
|
assert image_single["liveCount"] == 0, image_single
|
|
assert image_single["scanningCount"] == 0, image_single
|
|
|
|
same_display_single = payload["sameDisplaySingleCandidate"]
|
|
assert same_display_single["count"] == 0, same_display_single
|
|
assert same_display_single["cellCount"] == 0, same_display_single
|
|
assert same_display_single["liveCount"] == 0, same_display_single
|
|
assert same_display_single["scanningCount"] == 0, same_display_single
|
|
|
|
|
|
def test_webchat_large_paste_auto_attaches_text_in_real_browser(tmp_path: Path) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_large_paste_server.py"
|
|
browser_script = tmp_path / "webui_large_paste_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
async function waitRpc(page) {
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await waitRpc(page);
|
|
|
|
await page.evaluate(() => {
|
|
window.__largePaste = { calls: [] };
|
|
const rpc = App.getRpc();
|
|
const originalCall = rpc.call.bind(rpc);
|
|
rpc.call = (method, params = {}) => {
|
|
if (method === "tools.search_provider") {
|
|
return Promise.resolve({ provider: "none" });
|
|
}
|
|
if (method === "config.get") {
|
|
return Promise.resolve({
|
|
permissions: { default_mode: "ask" },
|
|
squilla_router: { enabled: false, rollout_phase: "off", tiers: {} },
|
|
});
|
|
}
|
|
if (method === "chat.history") {
|
|
return Promise.resolve({
|
|
messages: [],
|
|
history_scope: "complete",
|
|
has_more: false,
|
|
});
|
|
}
|
|
if (method === "sessions.messages.subscribe") {
|
|
return Promise.resolve({
|
|
subscribed: true,
|
|
key: params.key,
|
|
current_stream_seq: 0,
|
|
replay_complete: true,
|
|
replayed_count: 0,
|
|
run_status: "idle",
|
|
});
|
|
}
|
|
if (method === "chat.send") {
|
|
window.__largePaste.calls.push({ method, params });
|
|
return Promise.resolve({ task_id: "large-paste-task" });
|
|
}
|
|
return originalCall(method, params);
|
|
};
|
|
});
|
|
|
|
await page.fill("#chat-textarea", "x".repeat(20000));
|
|
await page.click("#chat-btn-send");
|
|
await page.waitForFunction(
|
|
() => window.__largePaste?.calls?.length === 1,
|
|
null, { timeout: 5000 }
|
|
);
|
|
|
|
const payload = await page.evaluate(() => {
|
|
const call = window.__largePaste.calls[0];
|
|
const params = call.params;
|
|
const attachment = params.attachments?.[0] || {};
|
|
const attachmentData = String(attachment.data || "");
|
|
const inputProvenance = params.inputProvenance || {};
|
|
const inputNormalization = inputProvenance.input_normalization || {};
|
|
let decodedAttachmentText = "";
|
|
try {
|
|
const bytes = Uint8Array.from(atob(attachmentData), char =>
|
|
char.charCodeAt(0)
|
|
);
|
|
decodedAttachmentText = new TextDecoder().decode(bytes);
|
|
} catch (_err) {
|
|
decodedAttachmentText = "";
|
|
}
|
|
const userBubbleText = document.querySelector(".msg.user")?.textContent || "";
|
|
const attachmentText =
|
|
document.querySelector(".msg.user .msg-attachments")?.textContent || "";
|
|
const attachmentChip = document.querySelector(".msg.user .msg-file-chip");
|
|
return {
|
|
callMethod: call.method,
|
|
message: params.message,
|
|
messageLength: String(params.message || "").length,
|
|
attachmentCount: Array.isArray(params.attachments)
|
|
? params.attachments.length
|
|
: 0,
|
|
attachmentName: attachment.name || "",
|
|
attachmentMime: attachment.mime || attachment.type || "",
|
|
attachmentDataLength: attachmentData.length,
|
|
attachmentDataLooksBase64: /^[A-Za-z0-9+/]+={0,2}$/.test(attachmentData),
|
|
attachmentDecodedLength: decodedAttachmentText.length,
|
|
attachmentDecodedMatchesPaste: decodedAttachmentText === "x".repeat(20000),
|
|
inputProvenanceKind: inputProvenance.kind || "",
|
|
inputProvenanceSource: inputProvenance.source || "",
|
|
inputNormalizationGuardAction: inputNormalization.guard_action || "",
|
|
inputNormalizationOriginalChars: inputNormalization.original_chars || 0,
|
|
inputNormalizationMaterialEstimatedTokens:
|
|
inputNormalization.material_estimated_tokens || 0,
|
|
inputNormalizationGeneratedAttachmentCount:
|
|
inputNormalization.generated_attachment_count || 0,
|
|
bubbleHasPlaceholder: userBubbleText.includes(
|
|
"Please process the attached pasted text."
|
|
),
|
|
bubbleHasLongRawPaste: userBubbleText.includes("x".repeat(500)),
|
|
attachmentChipHasGeneratedName: attachmentText.includes("webchat-paste-"),
|
|
attachmentChipTag: attachmentChip?.tagName || "",
|
|
attachmentChipDownload: attachmentChip?.getAttribute("download") || "",
|
|
attachmentChipHref: attachmentChip?.getAttribute("href") || "",
|
|
};
|
|
});
|
|
await page.evaluate((attachmentName) => {
|
|
const rpc = App.getRpc();
|
|
rpc.call = (method, params = {}) => {
|
|
if (method === "tools.search_provider") {
|
|
return Promise.resolve({ provider: "none" });
|
|
}
|
|
if (method === "config.get") {
|
|
return Promise.resolve({
|
|
permissions: { default_mode: "ask" },
|
|
squilla_router: { enabled: false, rollout_phase: "off", tiers: {} },
|
|
});
|
|
}
|
|
if (method === "sessions.messages.subscribe") {
|
|
return Promise.resolve({
|
|
subscribed: true,
|
|
key: params.key,
|
|
current_stream_seq: 0,
|
|
replay_complete: true,
|
|
replayed_count: 0,
|
|
run_status: "idle",
|
|
});
|
|
}
|
|
if (method === "chat.history") {
|
|
return Promise.resolve({
|
|
messages: [{
|
|
role: "user",
|
|
text: "Please process the attached pasted text.",
|
|
timestamp: new Date().toISOString(),
|
|
attachments: [{
|
|
sha256_ref: "d".repeat(64),
|
|
name: attachmentName,
|
|
mime: "text/plain",
|
|
size: 20000,
|
|
download_url:
|
|
`/api/v1/attachments/${"d".repeat(64)}`
|
|
+ "?sessionKey=agent%3Amain%3Awebchat%3Atest"
|
|
+ `&name=${encodeURIComponent(attachmentName)}`
|
|
+ "&mime=text%2Fplain",
|
|
}],
|
|
}],
|
|
history_scope: "complete",
|
|
has_more: false,
|
|
});
|
|
}
|
|
return Promise.resolve({});
|
|
};
|
|
ChatView.destroy();
|
|
ChatView.render(document.getElementById("content"));
|
|
}, payload.attachmentName);
|
|
await page.waitForSelector(".msg.user .msg-file-chip[href^='/api/v1/attachments/']", {
|
|
timeout: 5000,
|
|
});
|
|
const historyPayload = await page.evaluate(() => {
|
|
const chip = document.querySelector(".msg.user .msg-file-chip");
|
|
return {
|
|
tag: chip?.tagName || "",
|
|
download: chip?.getAttribute("download") || "",
|
|
href: chip?.getAttribute("href") || "",
|
|
};
|
|
});
|
|
Object.assign(payload, {
|
|
historyAttachmentChipTag: historyPayload.tag,
|
|
historyAttachmentChipDownload: historyPayload.download,
|
|
historyAttachmentChipHref: historyPayload.href,
|
|
});
|
|
payload.pageErrors = errors;
|
|
|
|
await browser.close();
|
|
console.log(JSON.stringify(payload));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/chat"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=90,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload["callMethod"] == "chat.send", payload
|
|
assert payload["message"] == "Please process the attached pasted text.", payload
|
|
assert payload["messageLength"] < 20000, payload
|
|
assert payload["attachmentCount"] == 1, payload
|
|
assert payload["attachmentName"].startswith("webchat-paste-"), payload
|
|
assert payload["attachmentName"].endswith(".txt"), payload
|
|
assert payload["attachmentMime"] == "text/plain", payload
|
|
assert payload["attachmentDataLength"] > 1000, payload
|
|
assert payload["attachmentDataLooksBase64"] is True, payload
|
|
assert payload["attachmentDecodedLength"] == 20000, payload
|
|
assert payload["attachmentDecodedMatchesPaste"] is True, payload
|
|
assert payload["inputProvenanceKind"] == "web_message", payload
|
|
assert payload["inputProvenanceSource"] == "WebChat", payload
|
|
assert payload["inputNormalizationGuardAction"] == "generated_text_attachment", payload
|
|
assert payload["inputNormalizationOriginalChars"] == 20000, payload
|
|
assert payload["inputNormalizationMaterialEstimatedTokens"] == 5000, payload
|
|
assert payload["inputNormalizationGeneratedAttachmentCount"] == 1, payload
|
|
assert payload["bubbleHasPlaceholder"] is True, payload
|
|
assert payload["bubbleHasLongRawPaste"] is False, payload
|
|
assert payload["attachmentChipHasGeneratedName"] is True, payload
|
|
assert payload["attachmentChipTag"] == "A", payload
|
|
assert payload["attachmentChipDownload"].startswith("webchat-paste-"), payload
|
|
assert payload["attachmentChipHref"].startswith("data:text/plain;base64,"), payload
|
|
assert payload["historyAttachmentChipTag"] == "A", payload
|
|
assert payload["historyAttachmentChipDownload"].startswith("webchat-paste-"), payload
|
|
assert payload["historyAttachmentChipHref"].startswith("/api/v1/attachments/"), payload
|
|
assert payload["pageErrors"] == [], payload
|
|
|
|
|
|
def test_image_paste_consumes_attachment_without_inserting_wsl_path_text_in_real_browser(
|
|
tmp_path: Path,
|
|
) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_image_paste_server.py"
|
|
browser_script = tmp_path / "webui_image_paste_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
async function waitRpc(page) {
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
}
|
|
|
|
async function dispatchSyntheticPaste(page, { includeImage, text }) {
|
|
return await page.evaluate(async ({ includeImage, text }) => {
|
|
const textarea = document.querySelector("#chat-textarea");
|
|
const items = [];
|
|
if (includeImage) {
|
|
const b64 =
|
|
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAFgwJ/lHE7+QAAAABJRU5ErkJggg==";
|
|
const bytes = Uint8Array.from(atob(b64), ch => ch.charCodeAt(0));
|
|
const file = new File([bytes], "361d381f.png", { type: "image/png" });
|
|
items.push({
|
|
type: "image/png",
|
|
getAsFile: () => file,
|
|
});
|
|
}
|
|
items.push({
|
|
type: "text/plain",
|
|
getAsFile: () => null,
|
|
});
|
|
const event = new Event("paste", { bubbles: true, cancelable: true });
|
|
Object.defineProperty(event, "clipboardData", {
|
|
value: {
|
|
items,
|
|
getData: type => (type === "text/plain" ? text : ""),
|
|
},
|
|
});
|
|
document.dispatchEvent(event);
|
|
if (!event.defaultPrevented) {
|
|
textarea.value += text;
|
|
textarea.dispatchEvent(new Event("input", { bubbles: true }));
|
|
}
|
|
await new Promise(resolve => setTimeout(resolve, 250));
|
|
return {
|
|
defaultPrevented: event.defaultPrevented,
|
|
textareaValue: textarea.value,
|
|
previewHidden: document
|
|
.querySelector("#chat-attach-preview")
|
|
?.classList.contains("hidden"),
|
|
attachmentThumbs: document
|
|
.querySelectorAll("#chat-attach-preview .attachment-thumb")
|
|
.length,
|
|
attachmentChips: document
|
|
.querySelectorAll("#chat-attach-preview .attachment-chip")
|
|
.length,
|
|
};
|
|
}, { includeImage, text });
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await waitRpc(page);
|
|
|
|
const wslPath = "/tmp/.wsl-screenshot-cli/"
|
|
+ "361d381f306061eb91d29b48ca876da8ab0ee3374a57bcfaa9212c3b7105858.png";
|
|
const imagePaste = await dispatchSyntheticPaste(page, {
|
|
includeImage: true,
|
|
text: wslPath,
|
|
});
|
|
|
|
await page.locator(".attachment-remove").click();
|
|
await page.fill("#chat-textarea", "");
|
|
|
|
const textOnlyPaste = await dispatchSyntheticPaste(page, {
|
|
includeImage: false,
|
|
text: wslPath,
|
|
});
|
|
|
|
await browser.close();
|
|
console.log(JSON.stringify({
|
|
imagePaste,
|
|
textOnlyPaste,
|
|
pageErrors: errors,
|
|
}));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/chat"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=90,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload["imagePaste"]["defaultPrevented"] is True, payload
|
|
assert payload["imagePaste"]["textareaValue"] == "", payload
|
|
assert payload["imagePaste"]["previewHidden"] is False, payload
|
|
assert payload["imagePaste"]["attachmentThumbs"] == 1, payload
|
|
assert payload["textOnlyPaste"]["defaultPrevented"] is False, payload
|
|
assert payload["textOnlyPaste"]["textareaValue"].startswith(
|
|
"/tmp/.wsl-screenshot-cli/"
|
|
), payload
|
|
assert payload["pageErrors"] == [], payload
|
|
|
|
|
|
def test_chat_image_attachment_layout_stays_aligned_in_real_browser(
|
|
tmp_path: Path,
|
|
) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_image_attachment_layout_server.py"
|
|
browser_script = tmp_path / "webui_image_attachment_layout_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
async function waitRpc(page) {
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
}
|
|
|
|
async function installMocks(page) {
|
|
await page.evaluate(() => {
|
|
window.__attachmentLayout = { sends: [] };
|
|
const rpc = App.getRpc();
|
|
const originalCall = rpc.call.bind(rpc);
|
|
rpc.call = (method, params = {}) => {
|
|
if (method === "tools.search_provider") {
|
|
return Promise.resolve({ provider: "none" });
|
|
}
|
|
if (method === "config.get") {
|
|
return Promise.resolve({
|
|
permissions: { default_mode: "ask" },
|
|
squilla_router: { enabled: false, rollout_phase: "off", tiers: {} },
|
|
});
|
|
}
|
|
if (method === "chat.history") {
|
|
return Promise.resolve({
|
|
messages: [],
|
|
history_scope: "complete",
|
|
has_more: false,
|
|
});
|
|
}
|
|
if (method === "sessions.messages.subscribe") {
|
|
return Promise.resolve({
|
|
subscribed: true,
|
|
key: params.key,
|
|
current_stream_seq: 0,
|
|
replay_complete: true,
|
|
replayed_count: 0,
|
|
run_status: "idle",
|
|
});
|
|
}
|
|
if (method === "chat.send") {
|
|
window.__attachmentLayout.sends.push(params);
|
|
return Promise.resolve({ task_id: "attachment-layout-task" });
|
|
}
|
|
return originalCall(method, params);
|
|
};
|
|
});
|
|
}
|
|
|
|
async function pasteWideImage(page) {
|
|
await page.evaluate(async () => {
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = 1600;
|
|
canvas.height = 120;
|
|
const ctx = canvas.getContext("2d");
|
|
ctx.fillStyle = "#101014";
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = "#ff6a00";
|
|
ctx.fillRect(0, 54, canvas.width, 12);
|
|
ctx.fillStyle = "#ffffff";
|
|
ctx.font = "28px sans-serif";
|
|
ctx.fillText("ultra wide screenshot", 40, 48);
|
|
const blob = await new Promise(resolve => canvas.toBlob(resolve, "image/png"));
|
|
const file = new File([blob], "wide-screenshot.png", { type: "image/png" });
|
|
const event = new Event("paste", { bubbles: true, cancelable: true });
|
|
Object.defineProperty(event, "clipboardData", {
|
|
value: {
|
|
items: [
|
|
{ type: "image/png", getAsFile: () => file },
|
|
],
|
|
getData: () => "",
|
|
},
|
|
});
|
|
document.dispatchEvent(event);
|
|
});
|
|
await page.waitForSelector("#chat-attach-preview:not(.hidden) .attachment-thumb", {
|
|
timeout: 5000,
|
|
});
|
|
}
|
|
|
|
async function measure(page, viewport) {
|
|
await page.setViewportSize({ width: viewport.width, height: viewport.height });
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await waitRpc(page);
|
|
await installMocks(page);
|
|
await page.evaluate(() =>
|
|
Router.navigate("/chat?session=agent:main:webchat:attachment-layout")
|
|
);
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await pasteWideImage(page);
|
|
const pending = await page.evaluate(() => {
|
|
const box = (selector) => {
|
|
const el = document.querySelector(selector);
|
|
const r = el.getBoundingClientRect();
|
|
return {
|
|
left: r.left,
|
|
right: r.right,
|
|
top: r.top,
|
|
bottom: r.bottom,
|
|
width: r.width,
|
|
height: r.height,
|
|
visible:
|
|
r.width > 0 &&
|
|
r.height > 0 &&
|
|
getComputedStyle(el).display !== "none" &&
|
|
getComputedStyle(el).visibility !== "hidden",
|
|
};
|
|
};
|
|
return {
|
|
width: window.innerWidth,
|
|
scrollWidth: document.documentElement.scrollWidth,
|
|
preview: box("#chat-attach-preview"),
|
|
input: box(".chat-input-bar"),
|
|
composer: box("#chat-composer"),
|
|
thumb: box("#chat-attach-preview .attachment-thumb"),
|
|
remove: box("#chat-attach-preview .attachment-remove"),
|
|
};
|
|
});
|
|
|
|
await page.locator("#chat-textarea").fill("这是什么");
|
|
await page.locator("#chat-btn-send").click();
|
|
await page.waitForFunction(
|
|
() => window.__attachmentLayout?.sends?.length === 1,
|
|
{ timeout: 5000 }
|
|
);
|
|
await page.waitForSelector(".msg.user .msg-thumb", { timeout: 5000 });
|
|
const sent = await page.evaluate(() => {
|
|
const box = (selector) => {
|
|
const el = document.querySelector(selector);
|
|
const r = el.getBoundingClientRect();
|
|
return {
|
|
left: r.left,
|
|
right: r.right,
|
|
top: r.top,
|
|
bottom: r.bottom,
|
|
width: r.width,
|
|
height: r.height,
|
|
visible:
|
|
r.width > 0 &&
|
|
r.height > 0 &&
|
|
getComputedStyle(el).display !== "none" &&
|
|
getComputedStyle(el).visibility !== "hidden",
|
|
};
|
|
};
|
|
return {
|
|
width: window.innerWidth,
|
|
scrollWidth: document.documentElement.scrollWidth,
|
|
body: box(".msg.user .msg-body--has-attachments"),
|
|
text: box(".msg.user .msg-attachment-text"),
|
|
attachments: box(".msg.user .msg-attachments"),
|
|
thumb: box(".msg.user .msg-thumb"),
|
|
sendAttachmentCount: window.__attachmentLayout.sends[0].attachments?.length || 0,
|
|
sendMessage: window.__attachmentLayout.sends[0].message || "",
|
|
};
|
|
});
|
|
return { name: viewport.name, pending, sent };
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage();
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
const viewports = [
|
|
{ name: "desktop", width: 1365, height: 768 },
|
|
{ name: "wide", width: 2048, height: 900 },
|
|
{ name: "mobile", width: 390, height: 844 },
|
|
];
|
|
const layouts = [];
|
|
for (const viewport of viewports) layouts.push(await measure(page, viewport));
|
|
await browser.close();
|
|
console.log(JSON.stringify({ layouts, pageErrors: errors }));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/chat"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=120,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload["pageErrors"] == []
|
|
layouts = {item["name"]: item for item in payload["layouts"]}
|
|
for name, item in layouts.items():
|
|
pending = item["pending"]
|
|
sent = item["sent"]
|
|
assert pending["scrollWidth"] <= pending["width"], (name, pending)
|
|
assert sent["scrollWidth"] <= sent["width"], (name, sent)
|
|
assert pending["preview"]["visible"], (name, pending)
|
|
assert pending["remove"]["visible"], (name, pending)
|
|
assert pending["preview"]["left"] >= 0, (name, pending)
|
|
assert pending["preview"]["right"] <= pending["width"], (name, pending)
|
|
assert pending["thumb"]["right"] <= pending["preview"]["right"], (name, pending)
|
|
assert sent["sendAttachmentCount"] == 1, (name, sent)
|
|
assert sent["sendMessage"] == "这是什么", (name, sent)
|
|
assert sent["text"]["right"] <= sent["body"]["right"] + 1, (name, sent)
|
|
assert sent["thumb"]["width"] <= 280, (name, sent)
|
|
assert sent["thumb"]["height"] <= 160, (name, sent)
|
|
assert sent["thumb"]["right"] <= sent["width"], (name, sent)
|
|
assert sent["attachments"]["right"] <= sent["body"]["right"] + 1, (name, sent)
|
|
if name == "mobile":
|
|
assert pending["preview"]["left"] >= pending["composer"]["left"], (name, pending)
|
|
assert pending["preview"]["right"] <= pending["composer"]["right"], (name, pending)
|
|
else:
|
|
assert abs(pending["preview"]["left"] - pending["input"]["left"]) <= 1, (
|
|
name,
|
|
pending,
|
|
)
|
|
assert abs(pending["preview"]["right"] - pending["input"]["right"]) <= 1, (
|
|
name,
|
|
pending,
|
|
)
|
|
|
|
|
|
def test_completed_reconnect_without_replay_refreshes_history_in_real_browser(
|
|
tmp_path: Path,
|
|
) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_completed_reconnect_server.py"
|
|
browser_script = tmp_path / "webui_completed_reconnect_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
async function waitRpc(page) {
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await waitRpc(page);
|
|
|
|
await page.evaluate(() => {
|
|
window.__completedReconnectTest = {
|
|
sessionKey: "agent:main:webchat:completed-reconnect",
|
|
subscribeCalls: 0,
|
|
historyCalls: 0,
|
|
historyMessages: [
|
|
{
|
|
role: "user",
|
|
text: "late single chunk",
|
|
message_id: "completed-reconnect-u1",
|
|
timestamp: "2026-05-31T00:38:14Z",
|
|
},
|
|
],
|
|
};
|
|
const rpc = App.getRpc();
|
|
const originalCall = rpc.call.bind(rpc);
|
|
rpc.call = (method, params = {}) => {
|
|
if (method === "tools.search_provider") {
|
|
return Promise.resolve({ provider: "none" });
|
|
}
|
|
if (method === "config.get") {
|
|
return Promise.resolve({
|
|
permissions: { default_mode: "ask" },
|
|
squilla_router: {
|
|
enabled: true,
|
|
rollout_phase: "full",
|
|
tiers: {
|
|
c1: { model: "openrouter/deepseek-v4-flash" },
|
|
},
|
|
},
|
|
});
|
|
}
|
|
if (method === "chat.history") {
|
|
window.__completedReconnectTest.historyCalls += 1;
|
|
return Promise.resolve({
|
|
messages: window.__completedReconnectTest.historyMessages,
|
|
history_scope: "complete",
|
|
has_more: false,
|
|
});
|
|
}
|
|
if (method === "sessions.messages.subscribe") {
|
|
window.__completedReconnectTest.subscribeCalls += 1;
|
|
return new Promise(resolve => {
|
|
setTimeout(() => {
|
|
window.__completedReconnectTest.historyMessages = [
|
|
{
|
|
role: "user",
|
|
text: "late single chunk",
|
|
message_id: "completed-reconnect-u1",
|
|
timestamp: "2026-05-31T00:38:14Z",
|
|
},
|
|
{
|
|
role: "assistant",
|
|
text:
|
|
"未能解析回复：\n - field 'intent': " +
|
|
"'不要用这个skill实施' not in choices",
|
|
message_id: "completed-reconnect-a1",
|
|
timestamp: "2026-05-31T00:38:28Z",
|
|
model: "openrouter/deepseek-v4-flash",
|
|
usage: {
|
|
model: "openrouter/deepseek-v4-flash",
|
|
routed_model: "openrouter/deepseek-v4-flash",
|
|
routed_tier: "c1",
|
|
routing_source: "squilla_router",
|
|
routing_applied: true,
|
|
input_tokens: 0,
|
|
output_tokens: 0,
|
|
},
|
|
},
|
|
];
|
|
resolve({
|
|
subscribed: true,
|
|
key: params.key,
|
|
current_stream_seq: 0,
|
|
replay_complete: true,
|
|
replayed_count: 0,
|
|
run_status: "idle",
|
|
last_task: {
|
|
task_id: "completed-reconnect-task",
|
|
status: "succeeded",
|
|
terminal_reason: "completed",
|
|
},
|
|
});
|
|
}, 800);
|
|
});
|
|
}
|
|
return originalCall(method, params);
|
|
};
|
|
});
|
|
|
|
await page.evaluate(() =>
|
|
Router.navigate("/chat?session=agent:main:webchat:completed-reconnect")
|
|
);
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await page.waitForFunction(
|
|
() =>
|
|
document.querySelector(".msg.user")?.textContent.includes(
|
|
"late single chunk"
|
|
),
|
|
null, { timeout: 5000 }
|
|
);
|
|
const userOnly = await page.evaluate(() => ({
|
|
assistantHasReply: Array.from(document.querySelectorAll(".msg.assistant"))
|
|
.some(el => el.textContent.includes("未能解析回复")),
|
|
historyCalls: window.__completedReconnectTest.historyCalls,
|
|
subscribeCalls: window.__completedReconnectTest.subscribeCalls,
|
|
}));
|
|
|
|
await page.waitForFunction(
|
|
() => Array.from(document.querySelectorAll(".msg.assistant"))
|
|
.some(el => el.textContent.includes("未能解析回复")),
|
|
null, { timeout: 5000 }
|
|
);
|
|
const afterTerminalSubscribe = await page.evaluate(() => ({
|
|
assistantHasReply: Array.from(document.querySelectorAll(".msg.assistant"))
|
|
.some(el => el.textContent.includes("未能解析回复")),
|
|
thinkingCount: document.querySelectorAll(".msg.thinking").length,
|
|
streamingCount: document.querySelectorAll(".msg.streaming").length,
|
|
routerWinner: document.querySelector(".router-fx-cell.win .nm")?.textContent || "",
|
|
historyCalls: window.__completedReconnectTest.historyCalls,
|
|
subscribeCalls: window.__completedReconnectTest.subscribeCalls,
|
|
}));
|
|
|
|
await browser.close();
|
|
console.log(JSON.stringify({
|
|
userOnly,
|
|
afterTerminalSubscribe: {
|
|
...afterTerminalSubscribe,
|
|
pageErrors: errors,
|
|
},
|
|
}));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=90,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload["userOnly"]["assistantHasReply"] is False, payload
|
|
after = payload["afterTerminalSubscribe"]
|
|
assert after["assistantHasReply"] is True, after
|
|
assert after["thinkingCount"] == 0, after
|
|
assert after["streamingCount"] == 0, after
|
|
assert after["routerWinner"] == "deepseek-v4-flash", after
|
|
assert after["historyCalls"] >= 2, after
|
|
assert after["pageErrors"] == [], after
|
|
|
|
|
|
def test_replayed_savings_done_restores_reply_without_replaying_popup_in_real_browser(
|
|
tmp_path: Path,
|
|
) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_savings_replay_server.py"
|
|
browser_script = tmp_path / "webui_savings_replay_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
async function waitRpc(page) {
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await waitRpc(page);
|
|
|
|
await page.evaluate(() => {
|
|
window.__savingsReplayTest = {
|
|
fireCalls: 0,
|
|
sessionKey: "agent:main:webchat:savings-replay",
|
|
};
|
|
const originalFire = window.SavingsFX.fire.bind(window.SavingsFX);
|
|
window.SavingsFX.fire = (...args) => {
|
|
window.__savingsReplayTest.fireCalls += 1;
|
|
return originalFire(...args);
|
|
};
|
|
const rpc = App.getRpc();
|
|
const originalCall = rpc.call.bind(rpc);
|
|
rpc.call = (method, params = {}) => {
|
|
if (method === "tools.search_provider") {
|
|
return Promise.resolve({ provider: "none" });
|
|
}
|
|
if (method === "config.get") {
|
|
return Promise.resolve({
|
|
permissions: { default_mode: "ask" },
|
|
squilla_router: {
|
|
enabled: true,
|
|
rollout_phase: "full",
|
|
tiers: {
|
|
c1: { model: "openrouter/deepseek-v4-flash" },
|
|
},
|
|
},
|
|
});
|
|
}
|
|
if (method === "chat.history") {
|
|
return Promise.resolve({
|
|
messages: [],
|
|
history_scope: "complete",
|
|
has_more: false,
|
|
});
|
|
}
|
|
if (method === "sessions.messages.subscribe") {
|
|
return Promise.resolve({
|
|
subscribed: true,
|
|
key: params.key,
|
|
current_stream_seq: 0,
|
|
replay_complete: true,
|
|
replayed_count: 0,
|
|
run_status: "idle",
|
|
});
|
|
}
|
|
return originalCall(method, params);
|
|
};
|
|
});
|
|
|
|
await page.evaluate(() =>
|
|
Router.navigate("/chat?session=agent:main:webchat:savings-replay")
|
|
);
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
|
|
await page.evaluate(() => {
|
|
const rpc = App.getRpc();
|
|
const ls = rpc._listeners;
|
|
const sessionKey = window.__savingsReplayTest.sessionKey;
|
|
const deltaHandlers = ls.get("session.event.text_delta");
|
|
if (deltaHandlers) {
|
|
deltaHandlers.forEach(h => h({
|
|
session_key: sessionKey,
|
|
stream_seq: 41,
|
|
text: "replayed savings answer",
|
|
}));
|
|
}
|
|
const wildHandlers = ls.get("*");
|
|
if (wildHandlers) {
|
|
wildHandlers.forEach(h => h("session.event.done", {
|
|
session_key: sessionKey,
|
|
stream_seq: 42,
|
|
text: "replayed savings answer",
|
|
input_tokens: 17800,
|
|
output_tokens: 661,
|
|
model: "openrouter/deepseek-v4-flash",
|
|
routed_model: "openrouter/deepseek-v4-flash",
|
|
routed_tier: "c1",
|
|
routing_source: "squilla_router",
|
|
routing_applied: true,
|
|
total_savings_pct: 97,
|
|
total_savings_usd: 0.01,
|
|
}, { replayed: true }));
|
|
}
|
|
});
|
|
|
|
await page.waitForFunction(
|
|
() => Array.from(document.querySelectorAll(".msg.assistant"))
|
|
.some(el => el.textContent.includes("replayed savings answer")),
|
|
null, { timeout: 5000 }
|
|
);
|
|
await page.waitForTimeout(300);
|
|
const payload = await page.evaluate(() => ({
|
|
assistantHasReply: Array.from(document.querySelectorAll(".msg.assistant"))
|
|
.some(el => el.textContent.includes("replayed savings answer")),
|
|
savedChipVisible: Array.from(document.querySelectorAll(".msg-meta__saved"))
|
|
.some(el => el.textContent.includes("Saved")),
|
|
fireCalls: window.__savingsReplayTest.fireCalls,
|
|
floatingLabels: document.querySelectorAll(".savings-float").length,
|
|
}));
|
|
|
|
await browser.close();
|
|
console.log(JSON.stringify({ ...payload, pageErrors: errors }));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=90,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload["assistantHasReply"] is True, payload
|
|
assert payload["savedChipVisible"] is True, payload
|
|
assert payload["fireCalls"] == 0, payload
|
|
assert payload["floatingLabels"] == 0, payload
|
|
assert payload["pageErrors"] == [], payload
|
|
|
|
|
|
def test_webui_edit_middle_message_forks_without_history_leak(tmp_path: Path) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_branch_edit_server.py"
|
|
browser_script = tmp_path / "webui_branch_edit_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
control_ui={{"frontend": "legacy"}},
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
async function waitRpc(page) {
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await waitRpc(page);
|
|
|
|
await page.evaluate(() => {
|
|
const parentKey = "agent:main:webchat:branch-edit-parent";
|
|
const childKey = "agent:main:webchat:branch-edit-child";
|
|
const parentMessages = [
|
|
{
|
|
role: "user",
|
|
text: "A marker",
|
|
timestamp: "2026-07-03T00:00:01.000Z",
|
|
message_id: "msg-A",
|
|
},
|
|
{
|
|
role: "assistant",
|
|
text: "ack A",
|
|
timestamp: "2026-07-03T00:00:02.000Z",
|
|
message_id: "msg-ack-A",
|
|
},
|
|
{
|
|
role: "user",
|
|
text: "B marker",
|
|
timestamp: "2026-07-03T00:00:03.000Z",
|
|
message_id: "msg-B",
|
|
},
|
|
{
|
|
role: "assistant",
|
|
text: "ack B",
|
|
timestamp: "2026-07-03T00:00:04.000Z",
|
|
message_id: "msg-ack-B",
|
|
},
|
|
{
|
|
role: "user",
|
|
text: "C marker must stay only on parent",
|
|
timestamp: "2026-07-03T00:00:05.000Z",
|
|
message_id: "msg-C",
|
|
},
|
|
];
|
|
const childMessages = [
|
|
{
|
|
role: "user",
|
|
text: "A marker",
|
|
timestamp: "2026-07-03T00:00:01.000Z",
|
|
message_id: "child-msg-A",
|
|
},
|
|
{
|
|
role: "assistant",
|
|
text: "ack A",
|
|
timestamp: "2026-07-03T00:00:02.000Z",
|
|
message_id: "child-msg-ack-A",
|
|
},
|
|
{
|
|
role: "user",
|
|
text: "B edited",
|
|
timestamp: "2026-07-03T00:00:06.000Z",
|
|
message_id: "child-msg-B-edited",
|
|
},
|
|
];
|
|
|
|
const rpc = App.getRpc();
|
|
const originalCall = rpc.call.bind(rpc);
|
|
window.__branchEdit = {
|
|
parentKey,
|
|
childKey,
|
|
parentMessages,
|
|
childMessages,
|
|
chatCalls: [],
|
|
historyCalls: [],
|
|
};
|
|
rpc.call = (method, params = {}) => {
|
|
if (method === "tools.search_provider") {
|
|
return Promise.resolve({ provider: "none" });
|
|
}
|
|
if (method === "config.get") {
|
|
return Promise.resolve({
|
|
permissions: { default_mode: "ask" },
|
|
squilla_router: { enabled: false, rollout_phase: "off", tiers: {} },
|
|
});
|
|
}
|
|
if (method === "sessions.messages.subscribe") {
|
|
return Promise.resolve({
|
|
subscribed: true,
|
|
key: params.key,
|
|
current_stream_seq: 0,
|
|
replay_complete: true,
|
|
replayed_count: 0,
|
|
run_status: "idle",
|
|
});
|
|
}
|
|
if (method === "chat.history") {
|
|
const key = params.sessionKey || parentKey;
|
|
window.__branchEdit.historyCalls.push(key);
|
|
return Promise.resolve({
|
|
messages: key === childKey ? childMessages : parentMessages,
|
|
history_scope: "complete",
|
|
has_more: false,
|
|
});
|
|
}
|
|
if (method === "chat.send") {
|
|
window.__branchEdit.chatCalls.push(params);
|
|
return Promise.resolve({
|
|
sessionKey: childKey,
|
|
key: childKey,
|
|
task_id: "branch-edit-task",
|
|
});
|
|
}
|
|
return originalCall(method, params);
|
|
};
|
|
});
|
|
|
|
await page.evaluate(() =>
|
|
Router.navigate(
|
|
"/chat?session=" +
|
|
encodeURIComponent(window.__branchEdit.parentKey)
|
|
)
|
|
);
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await page.waitForFunction(
|
|
() => document.querySelectorAll("#chat-thread .msg.user").length >= 3,
|
|
null, { timeout: 15000 }
|
|
);
|
|
|
|
await page.locator("#chat-thread .msg.user").nth(1).hover();
|
|
await page.locator("#chat-thread .msg.user")
|
|
.nth(1)
|
|
.locator('[data-action="edit"]')
|
|
.click();
|
|
await page.waitForFunction(
|
|
() => document.querySelector("#chat-textarea")?.value.includes("B marker"),
|
|
null, { timeout: 5000 }
|
|
);
|
|
await page.fill("#chat-textarea", "B edited");
|
|
await page.click("#chat-btn-send");
|
|
await page.waitForFunction(
|
|
() => window.__branchEdit.chatCalls.length === 1,
|
|
null, { timeout: 5000 }
|
|
);
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__branchEdit.chatCalls[0].forkBeforeMessageId === "msg-B",
|
|
null, { timeout: 5000 }
|
|
);
|
|
|
|
await page.evaluate(() => {
|
|
ChatView.destroy();
|
|
ChatView.render(document.getElementById("content"));
|
|
});
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__branchEdit.historyCalls
|
|
.some(key => key === window.__branchEdit.childKey),
|
|
null, { timeout: 15000 }
|
|
);
|
|
await page.waitForSelector("#chat-thread .msg.user", { timeout: 15000 });
|
|
|
|
const payload = await page.evaluate(() => {
|
|
const bodyText = document.querySelector("#chat-thread")?.innerText || "";
|
|
return {
|
|
chatSendPayload: window.__branchEdit.chatCalls[0],
|
|
historyCalls: window.__branchEdit.historyCalls,
|
|
parentHistoryHasC: window.__branchEdit.parentMessages
|
|
.some(msg => String(msg.text || "").includes("C marker")),
|
|
childHistoryHasC: window.__branchEdit.childMessages
|
|
.some(msg => String(msg.text || "").includes("C marker")),
|
|
childUiHasC: bodyText.includes("C marker"),
|
|
childUiHasEditedB: bodyText.includes("B edited"),
|
|
sessionChip: document.querySelector("#chat-session-chip-key")?.innerText || "",
|
|
};
|
|
});
|
|
payload.pageErrors = errors;
|
|
|
|
await browser.close();
|
|
console.log(JSON.stringify(payload));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=90,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload["pageErrors"] == [], payload["pageErrors"]
|
|
assert payload["chatSendPayload"]["message"] == "B edited"
|
|
assert payload["chatSendPayload"]["forkBeforeMessageId"] == "msg-B"
|
|
assert payload["parentHistoryHasC"] is True
|
|
assert payload["childHistoryHasC"] is False
|
|
assert payload["childUiHasC"] is False
|
|
assert payload["childUiHasEditedB"] is True
|
|
assert payload["sessionChip"] == "agent:main:webchat:branch-edit-child"
|
|
|
|
|
|
def test_webui_hotfix_flows_in_real_browser(tmp_path: Path) -> None:
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_hotfix_server.py"
|
|
browser_script = tmp_path / "webui_hotfix_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
async function waitRpc(page) {
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
}
|
|
|
|
async function emit(page, event, payload) {
|
|
await page.evaluate(
|
|
({ event, payload }) => {
|
|
const rpc = App.getRpc();
|
|
const named = rpc._listeners.get(event);
|
|
if (named) named.forEach(h => h(payload));
|
|
const wild = rpc._listeners.get("*");
|
|
if (wild) wild.forEach(h => h(event, payload));
|
|
},
|
|
{ event, payload }
|
|
);
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage();
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await waitRpc(page);
|
|
|
|
await page.evaluate(() => {
|
|
const rpc = App.getRpc();
|
|
const originalCall = rpc.call.bind(rpc);
|
|
window.__hotfix = {
|
|
chatCalls: [],
|
|
channelStatusCalls: 0,
|
|
delayNextWait: false,
|
|
logInFlight: 0,
|
|
logMaxInFlight: 0,
|
|
logTailCalls: 0,
|
|
};
|
|
const originalWait = rpc.waitForConnection.bind(rpc);
|
|
rpc.waitForConnection = () => {
|
|
if (!window.__hotfix.delayNextWait) return originalWait();
|
|
window.__hotfix.delayNextWait = false;
|
|
return new Promise(resolve => setTimeout(resolve, 300));
|
|
};
|
|
rpc.call = (method, params = {}) => {
|
|
if (method === "chat.send") {
|
|
window.__hotfix.chatCalls.push({ method, params });
|
|
return Promise.resolve({ task_id: "task-" + window.__hotfix.chatCalls.length });
|
|
}
|
|
if (method === "sessions.list") {
|
|
return Promise.resolve({
|
|
sessions: [{
|
|
key: "fake-session",
|
|
title: "Fake session",
|
|
updated_at: new Date().toISOString(),
|
|
message_count: 1,
|
|
}],
|
|
});
|
|
}
|
|
if (method === "agents.list") {
|
|
return Promise.resolve({ agents: [] });
|
|
}
|
|
if (method === "sessions.delete") {
|
|
return Promise.resolve({ deleted: [], errors: ["denied"] });
|
|
}
|
|
if (method === "channels.status") {
|
|
window.__hotfix.channelStatusCalls += 1;
|
|
return Promise.resolve({ channels: [] });
|
|
}
|
|
if (method === "logs.status") {
|
|
return Promise.resolve({ enabled: true, path: "debug.log" });
|
|
}
|
|
if (method === "logs.tail") {
|
|
const callNo = ++window.__hotfix.logTailCalls;
|
|
window.__hotfix.logInFlight += 1;
|
|
window.__hotfix.logMaxInFlight = Math.max(
|
|
window.__hotfix.logMaxInFlight,
|
|
window.__hotfix.logInFlight
|
|
);
|
|
return new Promise((resolve, reject) => {
|
|
const delay = callNo === 1 ? 200 : 4500;
|
|
setTimeout(() => {
|
|
window.__hotfix.logInFlight -= 1;
|
|
if (callNo === 1) {
|
|
reject(new Error("tail down"));
|
|
return;
|
|
}
|
|
resolve({
|
|
cursor: callNo,
|
|
lines: [{ level: "INFO", message: "log line " + callNo }],
|
|
});
|
|
}, delay);
|
|
});
|
|
}
|
|
return originalCall(method, params);
|
|
};
|
|
});
|
|
|
|
const sessionKey = await page.locator("#chat-session-chip-key").innerText();
|
|
await emit(
|
|
page,
|
|
"task.queued",
|
|
{ task_id: "old-task", session_key: "other-session" }
|
|
);
|
|
const statusAfterOtherTask = await page.locator("#chat-run-status").innerText();
|
|
await emit(page, "task.queued", { task_id: "current-task", session_key: sessionKey });
|
|
const statusAfterCurrentTask = await page.locator("#chat-run-status").innerText();
|
|
await emit(page, "sessions.changed", {
|
|
key: sessionKey,
|
|
run_status: "idle",
|
|
last_task: { status: "succeeded" },
|
|
reason: "turn_complete",
|
|
});
|
|
await emit(page, "sessions.changed", {
|
|
key: sessionKey,
|
|
run_status: "running",
|
|
active_task: { task_id: "running-task", status: "running" },
|
|
reason: "task_running",
|
|
});
|
|
await page.waitForFunction(
|
|
() => document.querySelector("#chat-run-status")?.innerText === "Running",
|
|
null, { timeout: 5000 }
|
|
);
|
|
await emit(page, "task.queued", {
|
|
task_id: "queued-behind-running",
|
|
session_key: sessionKey,
|
|
queue_depth: 1,
|
|
queue_position: 2,
|
|
});
|
|
await page.waitForTimeout(150);
|
|
const statusAfterQueuedBehindRunning =
|
|
await page.locator("#chat-run-status").innerText();
|
|
await emit(page, "sessions.changed", {
|
|
key: sessionKey,
|
|
run_status: "idle",
|
|
last_task: { status: "succeeded" },
|
|
reason: "turn_complete",
|
|
});
|
|
|
|
await page.fill("#chat-textarea", "first prompt");
|
|
await page.click("#chat-btn-send");
|
|
await page.waitForFunction(
|
|
() => window.__hotfix.chatCalls.some(c => c.params.message === "first prompt"),
|
|
null, { timeout: 5000 }
|
|
);
|
|
await emit(page, "session.event.done", { text: "first answer" });
|
|
await page.waitForFunction(
|
|
() => document.querySelectorAll(".msg.assistant").length >= 1,
|
|
null, { timeout: 5000 }
|
|
);
|
|
|
|
await page.fill("#chat-textarea", "second prompt");
|
|
await page.click("#chat-btn-send");
|
|
await page.waitForFunction(
|
|
() => window.__hotfix.chatCalls.some(c => c.params.message === "second prompt"),
|
|
null, { timeout: 5000 }
|
|
);
|
|
await emit(page, "session.event.done", { text: "second answer" });
|
|
await page.waitForFunction(
|
|
() => document.querySelectorAll(".msg.assistant").length >= 2,
|
|
null, { timeout: 5000 }
|
|
);
|
|
|
|
await page.locator(".msg.assistant").first().hover();
|
|
await page.locator(".msg.assistant")
|
|
.first()
|
|
.locator('[data-action="regenerate"]')
|
|
.click();
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__hotfix.chatCalls
|
|
.filter(c => c.params.message === "first prompt")
|
|
.length >= 2,
|
|
null, { timeout: 5000 }
|
|
);
|
|
const regenerateMessages = await page.evaluate(
|
|
() => window.__hotfix.chatCalls.map(c => c.params.message)
|
|
);
|
|
const bubblesAfterRegenerate = await page.locator(".msg").count();
|
|
|
|
await page.fill("#chat-textarea", "queued while streaming");
|
|
await page.click("#chat-btn-send");
|
|
await page.fill("#chat-textarea", "draft typed during stream");
|
|
await emit(page, "session.event.done", { text: "regenerated answer" });
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__hotfix.chatCalls
|
|
.some(c => c.params.message === "queued while streaming"),
|
|
null, { timeout: 5000 }
|
|
);
|
|
const draftAfterQueueDrain = await page.locator("#chat-textarea").inputValue();
|
|
|
|
await page.fill("#chat-textarea", "queued from terminal session change");
|
|
await page.click("#chat-btn-send");
|
|
await emit(page, "sessions.changed", {
|
|
key: sessionKey,
|
|
run_status: "idle",
|
|
last_task: { status: "succeeded" },
|
|
reason: "turn_complete",
|
|
});
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__hotfix.chatCalls
|
|
.some(c => c.params.message === "queued from terminal session change"),
|
|
null, { timeout: 5000 }
|
|
);
|
|
await emit(page, "session.event.done", { text: "terminal queued answer" });
|
|
await page.waitForFunction(
|
|
() => document.querySelector("#chat-run-status")?.innerText === "Idle",
|
|
null, { timeout: 5000 }
|
|
);
|
|
|
|
await page.fill("#chat-textarea", "first before error");
|
|
await page.click("#chat-btn-send");
|
|
await page.waitForFunction(
|
|
() => window.__hotfix.chatCalls
|
|
.some(c => c.params.message === "first before error"),
|
|
null, { timeout: 5000 }
|
|
);
|
|
await page.fill("#chat-textarea", "queued before error");
|
|
await page.click("#chat-btn-send");
|
|
await page.waitForFunction(
|
|
() => document.querySelector("#chat-pending")
|
|
?.innerText.includes("queued before error"),
|
|
null, { timeout: 5000 }
|
|
);
|
|
const queuedBeforeErrorSentPrematurely = await page.evaluate(
|
|
() => window.__hotfix.chatCalls
|
|
.some(c => c.params.message === "queued before error")
|
|
);
|
|
await emit(page, "session.event.error", {
|
|
session_key: sessionKey,
|
|
message: "synthetic failure",
|
|
code: "failed",
|
|
});
|
|
await page.waitForFunction(
|
|
() => document.querySelector("#chat-textarea")
|
|
?.value.includes("queued before error"),
|
|
null, { timeout: 5000 }
|
|
);
|
|
const errorRecoveredComposer = await page.locator("#chat-textarea").inputValue();
|
|
const queuedBeforeErrorSentAfterFailure = await page.evaluate(
|
|
() => window.__hotfix.chatCalls
|
|
.some(c => c.params.message === "queued before error")
|
|
);
|
|
await page.fill("#chat-textarea", "");
|
|
|
|
await page.fill("#chat-textarea", "approval turn");
|
|
await page.click("#chat-btn-send");
|
|
await page.waitForFunction(
|
|
() => window.__hotfix.chatCalls.some(c => c.params.message === "approval turn"),
|
|
null, { timeout: 5000 }
|
|
);
|
|
await page.evaluate((sessionKey) => {
|
|
window.dispatchEvent(new CustomEvent("opensquilla:approvals-pending", {
|
|
detail: {
|
|
pending: [{ id: "approval-1", namespace: "exec", sessionKey }],
|
|
count: 1,
|
|
},
|
|
}));
|
|
}, sessionKey);
|
|
await page.waitForFunction(
|
|
() => document.querySelector("#chat-run-status")
|
|
?.innerText === "Waiting for approval",
|
|
null, { timeout: 5000 }
|
|
);
|
|
const approvalStatusDuring = await page.locator("#chat-run-status").innerText();
|
|
await page.evaluate(() => {
|
|
window.dispatchEvent(new CustomEvent("opensquilla:approvals-pending", {
|
|
detail: { pending: [], count: 0 },
|
|
}));
|
|
});
|
|
await page.waitForFunction(
|
|
() => document.querySelector("#chat-run-status")?.innerText === "Running",
|
|
null, { timeout: 5000 }
|
|
);
|
|
const approvalStatusAfterResolve = await page.locator("#chat-run-status").innerText();
|
|
await emit(page, "session.event.done", { text: "approval answer" });
|
|
await page.waitForFunction(
|
|
() => document.querySelector("#chat-run-status")?.innerText === "Idle",
|
|
null, { timeout: 5000 }
|
|
);
|
|
|
|
await page.evaluate(() => Router.navigate("/config"));
|
|
await page.waitForSelector("#cfg-yaml-area", { state: "attached", timeout: 15000 });
|
|
await page.click('[data-cfg-mode="yaml"]');
|
|
const yamlBefore = await page.locator("#cfg-yaml-area").inputValue();
|
|
const yamlDraft = yamlBefore + "\n# hotfix draft";
|
|
await page.fill("#cfg-yaml-area", yamlDraft);
|
|
await page.click('[data-cfg-mode="form"]');
|
|
await page.click('[data-cfg-mode="yaml"]');
|
|
const yamlAfterToggle = await page.locator("#cfg-yaml-area").inputValue();
|
|
await page.evaluate(() => Router.navigate("/chat"));
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await page.evaluate(() => Router.navigate("/config"));
|
|
await page.waitForSelector("#cfg-yaml-area", { state: "attached", timeout: 15000 });
|
|
const configFormDisplay = await page
|
|
.locator("#cfg-form-view")
|
|
.evaluate(el => getComputedStyle(el).display);
|
|
const configYamlDisplay = await page
|
|
.locator("#cfg-yaml-view")
|
|
.evaluate(el => getComputedStyle(el).display);
|
|
const formButtonActive = await page
|
|
.locator('[data-cfg-mode="form"]')
|
|
.evaluate(el => el.classList.contains("is-active"));
|
|
|
|
await page.evaluate(() => {
|
|
window.__hotfix.delayNextWait = true;
|
|
window.__hotfix.channelGuardStartedAt = Date.now();
|
|
Router.navigate("/channels");
|
|
Router.navigate("/chat");
|
|
});
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__hotfix.channelStatusCalls === 0 &&
|
|
Date.now() - window.__hotfix.channelGuardStartedAt >= 600,
|
|
{ timeout: 2000 }
|
|
);
|
|
const channelStatusCallsAfterDestroyedWait = await page.evaluate(
|
|
() => window.__hotfix.channelStatusCalls
|
|
);
|
|
|
|
await page.evaluate(() => Router.navigate("/sessions"));
|
|
await page.waitForSelector('[data-del-key="fake-session"]', { timeout: 15000 });
|
|
await page.click('[data-del-key="fake-session"]');
|
|
await page.locator(".modal .btn-danger").click();
|
|
await page.waitForFunction(
|
|
() => document.body.innerText.includes("Delete failed: denied"),
|
|
null, { timeout: 5000 }
|
|
);
|
|
const sessionDeleteBody = await page.locator("body").innerText();
|
|
|
|
await page.evaluate(() => Router.navigate("/logs"));
|
|
await page.waitForSelector("#logs-display", { timeout: 15000 });
|
|
await page.waitForFunction(
|
|
() => document.body.innerText.includes("Log refresh failed"),
|
|
null, { timeout: 5000 }
|
|
);
|
|
await page.waitForFunction(
|
|
() => window.__hotfix.logTailCalls >= 2 && window.__hotfix.logInFlight === 0,
|
|
{ timeout: 10000 }
|
|
);
|
|
const logState = await page.evaluate(() => ({
|
|
maxInFlight: window.__hotfix.logMaxInFlight,
|
|
tailCalls: window.__hotfix.logTailCalls,
|
|
}));
|
|
|
|
const result = {
|
|
statusAfterOtherTask,
|
|
statusAfterCurrentTask,
|
|
statusAfterQueuedBehindRunning,
|
|
regenerateMessages,
|
|
bubblesAfterRegenerate,
|
|
draftAfterQueueDrain,
|
|
queuedBeforeErrorSentPrematurely,
|
|
errorRecoveredComposer,
|
|
queuedBeforeErrorSentAfterFailure,
|
|
approvalStatusDuring,
|
|
approvalStatusAfterResolve,
|
|
yamlDraftPreserved: yamlAfterToggle === yamlDraft,
|
|
configResetToForm:
|
|
configFormDisplay !== "none" &&
|
|
configYamlDisplay === "none" &&
|
|
formButtonActive,
|
|
channelStatusCallsAfterDestroyedWait,
|
|
sessionDeleteFailed: sessionDeleteBody.includes("Delete failed: denied"),
|
|
sessionDeleteFalseSuccess: sessionDeleteBody.includes("Session deleted"),
|
|
logState,
|
|
pageErrors: errors,
|
|
};
|
|
await browser.close();
|
|
console.log(JSON.stringify(result));
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/chat"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=120,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload["pageErrors"] == [], payload["pageErrors"]
|
|
assert payload["statusAfterOtherTask"] == "Idle"
|
|
assert payload["statusAfterCurrentTask"] == "Queued"
|
|
assert payload["statusAfterQueuedBehindRunning"] == "Running"
|
|
assert payload["regenerateMessages"].count("first prompt") >= 2
|
|
first_regenerate = payload["regenerateMessages"].index("first prompt")
|
|
second_send = payload["regenerateMessages"].index("second prompt")
|
|
assert first_regenerate < second_send
|
|
assert payload["bubblesAfterRegenerate"] <= 3
|
|
assert payload["draftAfterQueueDrain"] == "draft typed during stream"
|
|
assert payload["queuedBeforeErrorSentPrematurely"] is False
|
|
assert "queued before error" in payload["errorRecoveredComposer"]
|
|
assert payload["queuedBeforeErrorSentAfterFailure"] is False
|
|
assert payload["approvalStatusDuring"] == "Waiting for approval"
|
|
assert payload["approvalStatusAfterResolve"] == "Running"
|
|
assert payload["yamlDraftPreserved"] is True
|
|
assert payload["configResetToForm"] is True
|
|
assert payload["channelStatusCallsAfterDestroyedWait"] == 0
|
|
assert payload["sessionDeleteFailed"] is True
|
|
assert payload["sessionDeleteFalseSuccess"] is False
|
|
assert payload["logState"]["tailCalls"] >= 2
|
|
assert payload["logState"]["maxInFlight"] == 1
|
|
|
|
|
|
def test_meta_skill_ribbon_renders_and_progresses_in_real_browser(tmp_path: Path) -> None:
|
|
"""P0-1 ribbon: inject meta-skill events through the RPC bus and assert
|
|
the ribbon renders, chip states advance through running → succeeded, and
|
|
the counter reaches its declared total.
|
|
|
|
We bypass the meta-skill scheduler — the events are pushed directly to
|
|
chat.js's ``_rpc.on`` listeners. This isolates the front-end contract
|
|
(announce → state → completed) from scheduler timing.
|
|
"""
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "webui_meta_ribbon_server.py"
|
|
browser_script = tmp_path / "webui_meta_ribbon_browser.js"
|
|
out_path = tmp_path / "meta_ribbon_payload.json"
|
|
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
const fs = require("fs");
|
|
|
|
function fire(page, name, payload) {
|
|
return page.evaluate(
|
|
({ name, payload }) => {
|
|
const rpc = App.getRpc();
|
|
const ls = rpc._listeners;
|
|
const handlers = ls.get(name);
|
|
if (handlers) handlers.forEach(h => h(payload));
|
|
},
|
|
{ name, payload }
|
|
);
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage();
|
|
const errors = [];
|
|
page.on("pageerror", err => errors.push(String(err)));
|
|
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
|
|
const RUN_ID = "r-meta-1";
|
|
await fire(page, "session.event.meta_run_announced", {
|
|
run_id: RUN_ID,
|
|
meta_skill_name: "meta-stub-two-step",
|
|
steps: [
|
|
{ id: "intake", label: "意图提取", kind: "llm_chat", depends_on: [] },
|
|
{ id: "summary", label: "总结", kind: "llm_chat", depends_on: ["intake"] },
|
|
],
|
|
total: 2,
|
|
parent_run_id: null,
|
|
});
|
|
|
|
await page.waitForSelector(".meta-ribbon", { timeout: 5000 });
|
|
const chipsAfterAnnounce = await page.$$eval(
|
|
".meta-ribbon-chips .chip",
|
|
els => els.map(e => e.className)
|
|
);
|
|
|
|
await fire(page, "session.event.meta_step_state", {
|
|
run_id: RUN_ID, step_id: "intake", state: "running",
|
|
});
|
|
await fire(page, "session.event.meta_step_state", {
|
|
run_id: RUN_ID, step_id: "intake", state: "succeeded",
|
|
});
|
|
await fire(page, "session.event.meta_step_state", {
|
|
run_id: RUN_ID, step_id: "summary", state: "running",
|
|
});
|
|
await fire(page, "session.event.meta_step_state", {
|
|
run_id: RUN_ID, step_id: "summary", state: "succeeded",
|
|
});
|
|
await fire(page, "session.event.meta_run_completed", {
|
|
run_id: RUN_ID,
|
|
outcome: "ok",
|
|
completed_steps: ["intake", "summary"],
|
|
failed_steps: [],
|
|
skipped_steps: [],
|
|
});
|
|
|
|
await page.waitForFunction(
|
|
() =>
|
|
document.querySelector(".meta-ribbon-counter")?.textContent === "2/2",
|
|
{ timeout: 5000 }
|
|
);
|
|
|
|
const finalCounter = await page.$eval(
|
|
".meta-ribbon-counter",
|
|
el => el.textContent
|
|
);
|
|
const finalChips = await page.$$eval(
|
|
".meta-ribbon-chips .chip",
|
|
els => els.map(e => e.className)
|
|
);
|
|
const title = await page.$eval(
|
|
".meta-ribbon-title",
|
|
el => el.textContent
|
|
);
|
|
|
|
fs.writeFileSync(process.env.OUT_PATH, JSON.stringify({
|
|
chipsAfterAnnounce,
|
|
finalCounter,
|
|
finalChips,
|
|
title,
|
|
errors,
|
|
}));
|
|
|
|
await browser.close();
|
|
})();
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
proc = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
stdout=subprocess.DEVNULL,
|
|
stderr=subprocess.DEVNULL,
|
|
)
|
|
try:
|
|
deadline = time.time() + 30
|
|
ready = False
|
|
while time.time() < deadline:
|
|
try:
|
|
r = httpx.get(f"http://127.0.0.1:{port}/health", timeout=1.0)
|
|
if r.status_code < 500:
|
|
ready = True
|
|
break
|
|
except httpx.HTTPError:
|
|
pass
|
|
time.sleep(0.1)
|
|
if not ready:
|
|
pytest.skip("gateway did not start in time")
|
|
|
|
subprocess.run(
|
|
["node", str(browser_script)],
|
|
check=True,
|
|
env={
|
|
**os.environ,
|
|
"TARGET_URL": f"http://127.0.0.1:{port}/",
|
|
"OUT_PATH": str(out_path),
|
|
},
|
|
timeout=60,
|
|
)
|
|
finally:
|
|
proc.terminate()
|
|
try:
|
|
proc.wait(timeout=5)
|
|
except subprocess.TimeoutExpired:
|
|
proc.kill()
|
|
|
|
payload = json.loads(out_path.read_text(encoding="utf-8"))
|
|
|
|
assert not payload["errors"], f"page errors: {payload['errors']}"
|
|
assert payload["title"] == "meta-stub-two-step"
|
|
assert payload["finalCounter"] == "2/2"
|
|
# All chips landed in succeeded class on the success path.
|
|
assert len(payload["chipsAfterAnnounce"]) == 2
|
|
for cls in payload["finalChips"]:
|
|
assert "succeeded" in cls, f"chip class did not reach succeeded: {cls}"
|
|
|
|
|
|
def test_issue344_stale_task_events_do_not_leak_into_active_turn_in_real_browser(
|
|
tmp_path: Path,
|
|
) -> None:
|
|
"""issue 344: a stale task's late events must not leak into the active turn.
|
|
|
|
Legacy static chat UI (frontend=legacy, the surface hosting chat.js). task-B
|
|
owns the live stream; we then inject task-A's late tool_use_start and terminal
|
|
failure. With the task-id guard they are dropped (recorded as
|
|
``*.drop.foreign_task`` in the chat diagnostics log) and never render, while
|
|
task-B's own tool and an untagged legacy event still render. Without the guard
|
|
the stale tool card and "turn failed" error leaked into task-B's turn.
|
|
"""
|
|
if os.environ.get("OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E") != "1":
|
|
pytest.skip("set OPENSQUILLA_WEBUI_BROWSER_CHAT_E2E=1 to run chat browser e2e")
|
|
|
|
port = _free_port()
|
|
server_script = tmp_path / "issue344_server.py"
|
|
browser_script = tmp_path / "issue344_browser.js"
|
|
server_script.write_text(
|
|
textwrap.dedent(
|
|
f"""
|
|
import uvicorn
|
|
|
|
from opensquilla.gateway.app import create_gateway_app
|
|
from opensquilla.gateway.config import AuthConfig, GatewayConfig
|
|
|
|
config = GatewayConfig(
|
|
host="127.0.0.1",
|
|
port={port},
|
|
auth=AuthConfig(mode="none"),
|
|
)
|
|
app = create_gateway_app(config)
|
|
|
|
if __name__ == "__main__":
|
|
uvicorn.run(app, host="127.0.0.1", port={port}, log_level="warning")
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
browser_script.write_text(
|
|
textwrap.dedent(
|
|
r"""
|
|
const { chromium } = require("playwright");
|
|
|
|
// Dispatch an RPC frame through chat.js's own listeners: named events
|
|
// hit their dedicated handler; terminal events ride the wildcard (*)
|
|
// listener, exactly as the live RPC bus delivers them.
|
|
async function emit(page, event, payload, wild) {
|
|
await page.evaluate(({ event, payload, wild }) => {
|
|
const ls = App.getRpc()._listeners;
|
|
if (wild) {
|
|
const h = ls.get("*");
|
|
if (h) h.forEach(fn => fn(event, payload));
|
|
} else {
|
|
const h = ls.get(event);
|
|
if (h) h.forEach(fn => fn(payload));
|
|
}
|
|
}, { event, payload, wild: !!wild });
|
|
}
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch({ headless: true });
|
|
const page = await browser.newPage();
|
|
const pageErrors = [];
|
|
page.on("pageerror", e => pageErrors.push(String(e)));
|
|
|
|
await page.goto(process.env.TARGET_URL, {
|
|
waitUntil: "domcontentloaded",
|
|
timeout: 30000,
|
|
});
|
|
await page.waitForSelector("#chat-textarea", { timeout: 15000 });
|
|
await page.waitForFunction(
|
|
() =>
|
|
typeof App !== "undefined" &&
|
|
App.getRpc &&
|
|
App.getRpc()?.state === "connected",
|
|
{ timeout: 15000 }
|
|
);
|
|
|
|
// Record guard drops in the chat diagnostics log.
|
|
await page.evaluate(() =>
|
|
localStorage.setItem("opensquilla.chat.debug.enabled", "1")
|
|
);
|
|
|
|
// task-B takes over the live stream and renders its own work.
|
|
await emit(page, "task.running", { task_id: "task-B" });
|
|
await emit(page, "session.event.text_delta", {
|
|
text: "Generating HTML",
|
|
task_id: "task-B",
|
|
});
|
|
await emit(page, "session.event.tool_use_start", {
|
|
task_id: "task-B",
|
|
tool_use_id: "tb1",
|
|
tool_name: "write_html",
|
|
});
|
|
// Stale task-A tool — must be dropped.
|
|
await emit(page, "session.event.tool_use_start", {
|
|
task_id: "task-A",
|
|
tool_use_id: "ta1",
|
|
tool_name: "create_pdf_py_stale",
|
|
});
|
|
// Untagged legacy event — must still render (lenient guard).
|
|
await emit(page, "session.event.tool_use_start", {
|
|
tool_use_id: "leg1",
|
|
tool_name: "legacy_untagged_tool",
|
|
});
|
|
// Stale task-A terminal failure — must not end the stream or render.
|
|
await emit(
|
|
page,
|
|
"task.failed",
|
|
{ task_id: "task-A", terminal_message: "STALE_PPTX_FAILURE_MARKER" },
|
|
true
|
|
);
|
|
|
|
await page.waitForTimeout(300);
|
|
|
|
const result = await page.evaluate(() => {
|
|
const log = JSON.parse(
|
|
localStorage.getItem("opensquilla.chat.debugLog") || "[]"
|
|
);
|
|
const labels = log.map(e => e.label);
|
|
const appendNames = log
|
|
.filter(e => e.label === "tool_call.append.done")
|
|
.map(e => (e.data && e.data.name) || "");
|
|
const bodyText = document.body ? document.body.textContent : "";
|
|
return {
|
|
droppedStaleTool: labels.includes(
|
|
"event.tool_use_start.drop.foreign_task"
|
|
),
|
|
droppedStaleTerminal: labels.includes(
|
|
"event.terminal.drop.foreign_task"
|
|
),
|
|
appendNames,
|
|
bodyHasActiveTool: bodyText.includes("write_html"),
|
|
bodyHasUntaggedTool: bodyText.includes("legacy_untagged_tool"),
|
|
bodyHasStaleTool: bodyText.includes("create_pdf_py_stale"),
|
|
bodyHasStaleError: bodyText.includes("STALE_PPTX_FAILURE_MARKER"),
|
|
};
|
|
});
|
|
result.pageErrors = pageErrors;
|
|
console.log(JSON.stringify(result));
|
|
await browser.close();
|
|
})().catch(err => {
|
|
console.error(err && err.stack ? err.stack : String(err));
|
|
process.exit(1);
|
|
});
|
|
"""
|
|
),
|
|
encoding="utf-8",
|
|
)
|
|
|
|
env = os.environ.copy()
|
|
env["OPENSQUILLA_STATE_DIR"] = str(tmp_path / "state")
|
|
env["OPENSQUILLA_LOG_DIR"] = str(tmp_path / "logs")
|
|
# Serve the legacy static chat UI (the surface that hosts chat.js).
|
|
env["OPENSQUILLA_CONTROL_UI_FRONTEND"] = "legacy"
|
|
server = subprocess.Popen(
|
|
[sys.executable, str(server_script)],
|
|
cwd=Path.cwd(),
|
|
env=env,
|
|
stdout=subprocess.PIPE,
|
|
stderr=subprocess.PIPE,
|
|
text=True,
|
|
encoding="utf-8",
|
|
errors="replace",
|
|
)
|
|
try:
|
|
_wait_for_health(port, server)
|
|
_install_playwright(tmp_path)
|
|
result = subprocess.run(
|
|
[_node(), str(browser_script)],
|
|
cwd=tmp_path,
|
|
env=dict(env, TARGET_URL=f"http://127.0.0.1:{port}/control/chat"),
|
|
check=False,
|
|
capture_output=True,
|
|
text=True,
|
|
timeout=90,
|
|
)
|
|
assert result.returncode == 0, result.stderr or result.stdout
|
|
payload = json.loads(result.stdout.strip().splitlines()[-1])
|
|
finally:
|
|
_stop_process(server)
|
|
|
|
assert payload["pageErrors"] == [], payload["pageErrors"]
|
|
# Guard fired: the stale task's late tool + terminal were dropped.
|
|
assert payload["droppedStaleTool"], "stale task-A tool_use_start was not dropped"
|
|
assert payload["droppedStaleTerminal"], "stale task-A terminal was not dropped"
|
|
# Stale task-A artifacts never rendered into task-B's turn.
|
|
assert not payload["bodyHasStaleTool"], "stale tool card leaked into the turn"
|
|
assert not payload["bodyHasStaleError"], "stale terminal error leaked into the turn"
|
|
assert "create_pdf_py_stale" not in payload["appendNames"]
|
|
# task-B's own tool and untagged legacy events still flow.
|
|
assert payload["bodyHasActiveTool"], "active task tool did not render"
|
|
assert payload["bodyHasUntaggedTool"], "untagged legacy tool was wrongly dropped"
|
|
assert "write_html" in payload["appendNames"]
|
|
assert "legacy_untagged_tool" in payload["appendNames"]
|