mptyl/ThothII
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(ui): improve knowledge reading and add isolated formatting examples

Browse Source
This commit is contained in:
Codex
2026-09-13 16:52:53 +02:00
parent 2953f6b608
commit 3535fda958
14 changed files with 362 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/e2e/ui-visual-review.spec.ts
+53
View File
@@ -1,5 +1,6 @@
import { expect, test, type Page } from "@playwright/test";
import { canonicalWorkspaceFixture, workspaceRevisionFixture, workspaceSummaryFixture } from "../src/test/workspace-fixtures";
import { memoryFormattingExamples } from "../src/shell/memoryFormattingExamples";
// These tests never forward API requests to an installation or invoke a real model.
const workspace = "visual-fixture";
@@ -102,6 +103,58 @@ async function inspect(page: Page) {
});
}
for (const width of [390, 1280, 2400]) {
test(`knowledge readers use available width and readable paragraphs at ${width}px`, async ({ page }, testInfo) => {
await page.setViewportSize({ width, height: 1100 });
const writes = await fixtures(page);
const sample = memoryFormattingExamples[0];
const longEvidence = { ...evidence, applies_to: { concepts: ["Esempio simulato"], tables: ["demo_visuale.identificatore_lungo_per_la_verifica_della_formattazione"], columns: [] },
payload: { rule: sample.detail }, provenance: { source_file: "source/demo.md", supporting_excerpts: ["**Esempio simulato** con `codice_inline` e un collegamento alla regola.\n\nSecondo paragrafo di provenienza."] } };
await page.route(`**/api/workspaces/${workspace}/evidence/*`, route => route.fulfill({ json: { ...evidencePage, item: longEvidence } }));
await page.goto("/");
await admin(page, "Evidence");
await page.getByRole("button", { name: evidence.title, exact: true }).click();
const evidenceDetail = page.getByRole("region", { name: "Evidence detail" });
const article = evidenceDetail.locator("article");
await expect(article).toHaveCSS("max-width", "none");
const rule = article.locator(".thot-knowledge-prose").first();
await expect(rule.locator(":scope > p")).not.toHaveCount(1);
await expect(rule.locator("p").first()).toHaveCSS("max-width", "none");
expect(await article.evaluate(el => {
const parent = el.parentElement!;
const css = getComputedStyle(parent);
return Math.abs(el.getBoundingClientRect().width - (parent.clientWidth - parseFloat(css.paddingLeft) - parseFloat(css.paddingRight)));
})).toBeLessThan(2);
const copy = article.getByRole("button", { name: "Copy Evidence file path", exact: true });
await expect(copy).toHaveText("");
await expect(copy.locator("svg")).toHaveCount(1);
await expect(article.locator("strong").filter({ hasText: "Esempio simulato" })).toBeVisible();
await article.locator("h2").scrollIntoViewIfNeeded();
await page.screenshot({ path: testInfo.outputPath("evidence-readable.png"), animations: "disabled" });
expect((await inspect(page)).overflow).toBe(0);
await admin(page, "Memory");
await page.getByRole("button", { name: sample.subject, exact: true }).click();
const memoryDetail = page.getByRole("region", { name: "Memory detail" });
await expect(memoryDetail.getByRole("note")).toContainText("Not saved, indexed or sent to the model.");
const content = memoryDetail.locator(".thot-knowledge-prose").first();
await expect(content.locator(":scope > p")).not.toHaveCount(1);
await expect(content.locator("p").first()).toHaveCSS("max-width", "none");
await expect(content.locator("p").nth(1)).toHaveCSS("margin-top", "20px");
expect(await content.evaluate(el => Math.abs(el.getBoundingClientRect().width - el.parentElement!.clientWidth))).toBeLessThan(2);
await memoryDetail.getByRole("heading", { name: sample.subject, exact: true }).scrollIntoViewIfNeeded();
await page.screenshot({ path: testInfo.outputPath("memory-readable.png"), animations: "disabled" });
await expect(memoryDetail.getByRole("button", { name: "Edit card", exact: true })).toHaveCount(0);
expect((await inspect(page)).overflow).toBe(0);
await page.getByRole("button", { name: "Use dark theme", exact: true }).click();
await expect(page.locator(".thot-host")).toHaveAttribute("data-theme", "dark");
await memoryDetail.getByRole("heading", { name: sample.subject, exact: true }).scrollIntoViewIfNeeded();
await page.screenshot({ path: testInfo.outputPath("memory-readable-dark.png"), animations: "disabled" });
expect((await inspect(page)).overflow).toBe(0);
expect(writes).toEqual([]);
});
}
for (const width of [390, 1280]) {
test(`full shell keeps the visual revision across language and theme changes at ${width}px`, async ({ page }, testInfo) => {
await page.setViewportSize({ width, height: 1000 });