= {");
+ const ru = i18n.slice(0, enStart);
+ const en = i18n.slice(enStart);
+ const keys = ["canvasMenuTools", "canvasAutoSort", "canvasAutoSortTask", "canvasAutoSortStatus", "canvasAutoSortProject",
+ "canvasAutoSortGrid", "canvasAutoSortUnavailable", "canvasAutoSortUndo", "canvasAutoSortFailed"];
+ for (const key of keys) {
+ const ruValue = ru.match(new RegExp(`\\n ${key}: "([^"]+)"`))?.[1];
+ const enValue = en.match(new RegExp(`\\n ${key}: "([^"]+)"`))?.[1];
+ assert.ok(ruValue && enValue, `${key} is translated in ru and en`);
+ assert.match(ruValue, /[а-яё]/i, `${key} has a Russian value`);
+ assert.doesNotMatch(enValue, /[а-яё]/i, `${key} has an English value`);
+ }
+
+ const toolsBlock = menu.slice(menu.indexOf('icon="wrench"'), menu.indexOf('{kind === "region" && ('));
+ for (const code of [toolsBlock, tools, sorter, scope]) {
+ assert.doesNotMatch(code, /#[\da-f]{3,8}\b|rgba?\(/i);
+ assert.doesNotMatch(code, /[›▸▶→↶↺×✓✔]/u, "icons come from UiIcon, not literal glyphs");
+ }
+ const sortStyles = styles.split("\n").filter((line) => line.includes("auto-sorting") || line.includes("canvas-menu__check")
+ || line.includes("canvas-menu__row:disabled"));
+ assert.ok(sortStyles.length >= 4);
+ for (const line of sortStyles) assert.doesNotMatch(line, /#[\da-f]{3,8}\b|rgba?\(|\d+px/i, line);
+ assert.match(styles, /@media \(prefers-reduced-motion: reduce\) \{ \.workspace--auto-sorting [^}]*transition: none; \}/);
+ assert.doesNotMatch(styles, /\.workspace--auto-sorting :is\(\.terminal-card, \.plugin-canvas-card\) \{[^}]*\.browser-card/, "the native Browser view never glides");
+ // Zoomed out, the outline of the moved windows keeps its on-screen thickness: it grows with the summary scale.
+ assert.match(styles, /\.workspace--auto-sorting :is\(\.terminal-card--summary\.terminal-card--selected, \.plugin-canvas-card--summary\.plugin-canvas-card--selected, \.browser-card--summary\.browser-card--selected\) \{ box-shadow: 0 0 0 calc\([^)]*var\(--summary-scale, 1\)\) var\(--primary\)/);
+ // "Needs at least 2 windows" is a plain muted hint, not the uppercase group label.
+ assert.match(tools, /\{!available && \{t\(locale, "canvasAutoSortUnavailable"\)\}<\/p>\}/);
+ const hint = styles.match(/\.canvas-menu__hint \{[^}]*\}/)[0];
+ const disabledRow = styles.match(/\.canvas-menu__row:disabled \{[^}]*\}/)[0];
+ assert.match(hint, /padding: [^;]*calc\(1\.55em \/ \.92\)/, "the hint's text lines up with the indented rows despite its smaller font");
+ assert.match(hint, /color: var\(--text\); opacity: \.5;/, "as quiet as the disabled rows it explains");
+ assert.match(disabledRow, /opacity: \.5/);
+ assert.doesNotMatch(styles.match(/\.canvas-menu__hint \{[^}]*\}/)[0], /uppercase|font-mono/);
+
+ assert.match(icons, /import undoIcon from "\.\.\/assets\/icons\/lucide\/undo-2\.svg";/);
+ assert.match(icons, /import wrenchIcon from "\.\.\/assets\/icons\/lucide\/wrench\.svg";/);
+ assert.match(readme, /`wrench`, `undo-2`/);
+ for (const svg of [wrench, undo]) {
+ assert.match(svg, /^ {
+ const [en, ru, zh] = await Promise.all([
+ source("docs/UI_CONTRACT.md"),
+ source("docs/UI_CONTRACT.ru.md"),
+ source("docs/UI_CONTRACT.zh-CN.md")
+ ]);
+ assert.match(en, /a \*\*Tools\*\* submenu[\s\S]*\*\*Auto-sort\*\*[\s\S]*\*\*Undo auto-sort\*\*/);
+ assert.match(ru, /\*\*Инструменты\*\*[\s\S]*\*\*Автосортировка\*\*[\s\S]*\*\*Отменить автосортировку\*\*/);
+ assert.match(zh, /\*\*Tools\*\*[\s\S]*\*\*Auto-sort\*\*[\s\S]*\*\*Undo auto-sort\*\*/);
+});
diff --git a/tests/canvas-context-menu.test.mjs b/tests/canvas-context-menu.test.mjs
index f076506a5..beb5b38d3 100644
--- a/tests/canvas-context-menu.test.mjs
+++ b/tests/canvas-context-menu.test.mjs
@@ -2,10 +2,15 @@ import assert from "node:assert/strict";
import { readFile } from "node:fs/promises";
import test from "node:test";
import {
- chooseCanvasSubmenuSide,
clampCanvasMenuPosition,
routeCanvasContextMenu
} from "../src/renderer/src/features/workspace/canvasContextRouting.ts";
+import {
+ canvasMenuPlacementClearOfPanels,
+ canvasMenuTopClearOfPanels,
+ chooseCanvasSubmenuPlacement,
+ chooseCanvasSubmenuSide
+} from "../src/renderer/src/features/workspace/canvasMenuPlacement.ts";
const contextMenuComponentPath = new URL(
"../src/renderer/src/features/workspace/CanvasContextMenu.tsx",
@@ -46,3 +51,80 @@ test("context menus stay inside the canvas viewport", () => {
{ x: 12, y: 12 }
);
});
+
+test("a context menu opened near a corner panel moves up off it, and its submenu chevrons point where they open", async () => {
+ // Home/zoom controls in the bottom-left corner; the menu was clamped to the bottom of a 856 px canvas.
+ const controls = { left: 18, top: 838, right: 170, bottom: 882 };
+ const hints = { left: 1100, top: 615, right: 1420, bottom: 882 };
+ const menu = { left: 60, top: 531, right: 272, bottom: 856 };
+ assert.equal(canvasMenuTopClearOfPanels(menu, [controls, hints], 12, 8), 838 - 8 - 325);
+ assert.equal(canvasMenuTopClearOfPanels({ ...menu, left: 300, right: 512 }, [controls, hints], 12, 8), 531, "clear of every panel: unchanged");
+ assert.equal(canvasMenuTopClearOfPanels(menu, [controls], 600, 8), 531, "no room above: it keeps its place (drawn above the panel)");
+ // Up off one panel and then above a second one where it fits; when it cannot clear both it keeps its place.
+ assert.equal(canvasMenuTopClearOfPanels(menu, [controls, { left: 18, top: 480, right: 170, bottom: 520 }], 12, 8), 480 - 8 - 325);
+ assert.equal(canvasMenuTopClearOfPanels(menu, [controls, { left: 18, top: 300, right: 170, bottom: 520 }], 12, 8), 531);
+
+ const component = await readFile(contextMenuComponentPath, "utf8");
+ assert.match(component, /useLayoutEffect\(\(\) => \{[\s\S]*canvasMenuPlacementClearOfPanels\([\s\S]*\}, \[kind, position\.x, position\.y\]\);/);
+ assert.match(component, /useLayoutEffect\(\(\) => \{\n chooseSubmenuSide\(\);\n \}, \[kind, place\.left, place\.top\]\);/);
+ assert.match(component, /style=\{\{ left: place\.left, top: place\.top \}\}/);
+ assert.equal(component.match(/right=\{\}/g)?.length, 2, "Launch agent and Tools");
+ const styles = await readFile(new URL("../src/renderer/src/styles/app.css", import.meta.url), "utf8");
+ assert.match(styles, /\.canvas-menu__chevron--right \{ transform: rotate\(-90deg\); \}/);
+ assert.match(styles, /\.canvas-menu__chevron--left \{ transform: rotate\(90deg\); \}/);
+ // Menus (and their submenus, inside them) are drawn above the passive corner panels.
+ const z = (selector) => Number(styles.match(new RegExp(`\\n${selector.replace(".", "\\.")} \\{[^}]*z-index: (\\d+)`))?.[1]);
+ assert.ok(z(".canvas-menu") > z(".canvas-overlays"));
+});
+
+test("at a large UI scale a menu that cannot move up off the corner panels moves sideways instead", () => {
+ // 1.25: minimap top right, shortcut hints bottom right; the menu is too tall to fit between them.
+ const minimap = { left: 1232, top: 62, right: 1422, bottom: 184 };
+ const hints = { left: 1100, top: 615, right: 1420, bottom: 882 };
+ const menu = { left: 1055, top: 365, right: 1365, bottom: 845 };
+ const bounds = { minTop: 12, minLeft: 12, maxRight: 1428 };
+ assert.equal(canvasMenuTopClearOfPanels(menu, [minimap, hints], 12, 8), 365, "up is not possible");
+ assert.deepEqual(canvasMenuPlacementClearOfPanels(menu, [minimap, hints], bounds, 8), { left: 1100 - 8 - 310, top: 365 });
+ // Up still comes first when it works, and a menu clear of every panel stays put.
+ const low = { left: 60, top: 531, right: 272, bottom: 856 };
+ const controls = { left: 18, top: 838, right: 170, bottom: 882 };
+ assert.deepEqual(canvasMenuPlacementClearOfPanels(low, [controls, hints], bounds, 8), { left: 60, top: 838 - 8 - 325 });
+ assert.deepEqual(canvasMenuPlacementClearOfPanels({ ...low, left: 300, right: 512 }, [controls, hints], bounds, 8), { left: 300, top: 531 });
+ // No room on either side: it keeps its place.
+ assert.deepEqual(canvasMenuPlacementClearOfPanels(menu, [minimap, { ...hints, left: 20 }], bounds, 8), { left: 1055, top: 365 });
+});
+
+test("a submenu opens where it covers no corner panel, wherever Settings put the panels", async () => {
+ // UI scale 1.25 (16.25 px font) in a 1440 x 900 window: the menu was opened near the right edge, its Tools row is
+ // low, and the shortcut hints sit in the bottom-right corner, the minimap top right, Home/zoom bottom left.
+ const area = { left: 0, top: 44, right: 1440, bottom: 900 };
+ const hints = { left: 1035, top: 615, right: 1422, bottom: 882 };
+ const minimap = { left: 1232, top: 62, right: 1422, bottom: 184 };
+ const controls = { left: 18, top: 840, right: 168, bottom: 882 };
+ const tools = { left: 722, top: 722, right: 1014, bottom: 770 };
+ const size = { width: 309, height: 263 };
+ const metrics = { gap: 9, offset: 7, clearance: 10 };
+ // Room on the right, so the side rule alone opened it there, upward, over the hints panel.
+ assert.equal(chooseCanvasSubmenuSide(tools, area, size.width, metrics.gap), "right");
+ assert.deepEqual(chooseCanvasSubmenuPlacement(tools, size, area, [hints, minimap, controls], metrics, true),
+ { side: "left", up: true });
+ // Without panels in the way it keeps the side with room and goes up only when down runs off the canvas.
+ assert.deepEqual(chooseCanvasSubmenuPlacement(tools, size, area, [], metrics, true), { side: "right", up: true });
+ assert.deepEqual(chooseCanvasSubmenuPlacement({ ...tools, top: 300, bottom: 348 }, size, area, [hints], metrics, true),
+ { side: "right", up: false });
+ // Hints moved to the bottom-left corner: the right side is clear again.
+ const hintsLeft = { left: 18, top: 615, right: 405, bottom: 882 };
+ assert.deepEqual(chooseCanvasSubmenuPlacement(tools, size, area, [hintsLeft, minimap], metrics, true),
+ { side: "right", up: true });
+ // Up blocked by the panel but down fits: it opens down on the same side.
+ const tall = { left: 1035, top: 120, right: 1422, bottom: 420 };
+ assert.deepEqual(chooseCanvasSubmenuPlacement({ ...tools, top: 380, bottom: 428 }, size, area, [tall], metrics, true),
+ { side: "left", up: false });
+ // The launcher submenu never opens up; with no clear place at all the preferred place stays.
+ assert.deepEqual(chooseCanvasSubmenuPlacement(tools, size, area, [hints], metrics, false), { side: "right", up: false });
+ const everywhere = { left: 0, top: 44, right: 1440, bottom: 900 };
+ assert.deepEqual(chooseCanvasSubmenuPlacement(tools, size, area, [everywhere], metrics, true), { side: "right", up: true });
+
+ const component = await readFile(contextMenuComponentPath, "utf8");
+ assert.match(component, /chooseCanvasSubmenuPlacement\(anchor\.getBoundingClientRect\(\),[\s\S]*cornerPanelRects\(workspace\)[\s\S]*toolsOpen\);\n setSubmenuSide\(placement\.side\);\n if \(toolsOpen\) setToolsUp\(placement\.up\);\n \}, \[launcherOpen, toolsOpen, ToolsMenu, place\.left, place\.top\]\);/);
+});
diff --git a/tests/canvas-preloaded-surfaces.test.mjs b/tests/canvas-preloaded-surfaces.test.mjs
new file mode 100644
index 000000000..671b77f22
--- /dev/null
+++ b/tests/canvas-preloaded-surfaces.test.mjs
@@ -0,0 +1,126 @@
+import assert from "node:assert/strict";
+import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { build } from "esbuild";
+
+// The context menu and the command palette are kept out of the startup bundle (renderer-bundle-splitting), but a
+// lazy() behind made their first open wait about 300 ms (React holds a suspended boundary's reveal that
+// long). They are preloaded once the canvas is idle and rendered directly: once loaded, the very first render of an
+// open menu or palette already contains it. Rendered here with the real React and react-dom/server, through the real
+// dynamic imports of canvasOverlaySurfaces.
+const root = fileURLToPath(new URL("..", import.meta.url));
+
+async function loadBundle(t) {
+ const outdir = await mkdtemp(join(tmpdir(), "canvastty-surfaces-"));
+ t.after(() => rm(outdir, { recursive: true, force: true }));
+ await build({
+ stdin: {
+ contents: [
+ 'export { canvasContextMenuSurface, canvasCommandPaletteSurface } from "./src/renderer/src/features/workspace/canvasOverlaySurfaces";',
+ 'export { preloadedSurface, preloadWhenIdle, usePreloadedSurface } from "./src/renderer/src/lib/preloadedSurface";',
+ 'export { createElement } from "react";',
+ 'export { renderToStaticMarkup } from "react-dom/server";'
+ ].join("\n"),
+ resolveDir: root,
+ loader: "ts"
+ },
+ jsx: "automatic",
+ bundle: true,
+ platform: "node",
+ format: "cjs",
+ outfile: join(outdir, "surfaces.cjs"),
+ logLevel: "silent",
+ define: { "process.env.NODE_ENV": '"production"' },
+ loader: { ".svg": "text", ".css": "empty", ".png": "empty", ".ttf": "empty", ".woff2": "empty", ".ico": "empty" }
+ });
+ return createRequire(import.meta.url)(join(outdir, "surfaces.cjs"));
+}
+
+const noop = () => undefined;
+const menuProps = {
+ kind: "empty", position: { x: 40, y: 40 }, locale: "en", launcherItems: [], currentRegionColor: null,
+ materialHasLocation: false, onSendMaterial: null, onSendRemarks: null,
+ ...Object.fromEntries([
+ "onCreateRegion", "onCreateNote", "onLaunch", "onOpenBrowser", "onOpenFiles", "onOpenSettings", "onRenameRegion",
+ "onChangeRegionColor", "onDeleteRegion", "onEditNote", "onBringNoteToFront", "onDeleteNote", "onAddFiles",
+ "onPasteFiles", "onPinMaterial", "onRevealMaterial", "onCopyMaterialPath", "onBringMaterialToFront",
+ "onRemoveMaterial", "onClose"
+ ].map((name) => [name, noop]))
+};
+const paletteProps = {
+ locale: "en", sessions: [], launcherItems: [],
+ ...Object.fromEntries([
+ "onFocusSession", "onLaunch", "onCreateRegion", "onCreateNote", "onAddFiles", "onPasteFiles", "onFitCanvas",
+ "onOpenBrowser", "onOpenFiles", "onOpenSettings", "onClose"
+ ].map((name) => [name, noop]))
+};
+
+test("a preloaded context menu and command palette render on their first open, with no Suspense wait", async (t) => {
+ const previousWindow = globalThis.window;
+ globalThis.window = { canvasTTY: { window: { isMacOS: false } } };
+ t.after(() => { globalThis.window = previousWindow; });
+ const bundle = await loadBundle(t);
+ const { createElement, renderToStaticMarkup, usePreloadedSurface, canvasContextMenuSurface, canvasCommandPaletteSurface } = bundle;
+ // The canvas's own pattern: `{open && Surface && }`.
+ const Host = ({ surface, open, props }) => {
+ const Surface = usePreloadedSurface(surface, open);
+ return open && Surface ? createElement(Surface, props) : null;
+ };
+ const render = (surface, open, props) => renderToStaticMarkup(createElement(Host, { surface, open, props }));
+
+ assert.equal(canvasContextMenuSurface.loaded(), null, "nothing is loaded at startup");
+ assert.equal(render(canvasContextMenuSurface, true, menuProps), "", "an open before the preload renders nothing until its chunk arrives");
+
+ const [menuLoad, paletteLoad] = [canvasContextMenuSurface.load(), canvasCommandPaletteSurface.load()];
+ assert.equal(canvasContextMenuSurface.load(), menuLoad, "one load per surface");
+ await Promise.all([menuLoad, paletteLoad]);
+
+ const menu = render(canvasContextMenuSurface, true, menuProps);
+ assert.match(menu, /^]*class="canvas-menu"/u, "the first render of the open menu contains the menu");
+ assert.match(menu, /role="menuitem"/u);
+ const palette = render(canvasCommandPaletteSurface, true, paletteProps);
+ assert.match(palette, /canvas-command-palette/u, "the first render of the open palette contains the palette");
+ assert.equal(render(canvasContextMenuSurface, false, menuProps), "", "a closed menu renders nothing");
+});
+
+test("preloadWhenIdle loads after the first paint when the app is idle; a failed load is tried again", async (t) => {
+ const bundle = await loadBundle(t);
+ const { preloadedSurface, preloadWhenIdle } = bundle;
+ let calls = 0, fail = true;
+ const surface = preloadedSurface(async () => {
+ calls++;
+ if (fail) throw new Error("chunk failed");
+ return "loaded";
+ });
+ const idle = [];
+ const previousWindow = globalThis.window;
+ globalThis.window = { requestIdleCallback: (callback, options) => { idle.push({ callback, options }); return idle.length; }, cancelIdleCallback: noop };
+ t.after(() => { globalThis.window = previousWindow; });
+ preloadWhenIdle([surface]);
+ assert.equal(calls, 0, "nothing loads before the browser is idle");
+ assert.equal(idle.length, 1);
+ assert.ok(idle[0].options.timeout > 0, "bounded: it still loads on a busy start");
+ idle[0].callback();
+ await new Promise((resolve) => setImmediate(resolve));
+ assert.equal(calls, 1);
+ assert.equal(surface.loaded(), null, "a failed preload leaves nothing loaded");
+ fail = false;
+ assert.equal(await surface.load(), "loaded", "the next open loads it again");
+ assert.equal(calls, 2);
+ assert.equal(surface.loaded(), "loaded");
+});
+
+test("the canvas renders the menu and the palette through the preloaded surfaces, not lazy() and Suspense", async () => {
+ const source = await readFile(join(root, "src/renderer/src/features/workspace/WorkspaceCanvas.tsx"), "utf8");
+ assert.doesNotMatch(source, /lazy\(\(\) => import\("\.\/Canvas(ContextMenu|CommandPalette)"\)/u);
+ assert.doesNotMatch(source, /import \{ Canvas(ContextMenu|CommandPalette) \} from/u, "no static import either");
+ assert.match(source, /usePreloadedSurface\(canvasContextMenuSurface, contextMenu !== null\)/u);
+ assert.match(source, /usePreloadedSurface\(canvasCommandPaletteSurface, commandPaletteOpen\)/u);
+ assert.match(source, /preloadWhenIdle\(\[canvasContextMenuSurface, canvasCommandPaletteSurface\]\)/u);
+ assert.match(source, /\{contextMenu && CanvasContextMenu && \(\n\s* ({ path: "react", namespace: "fake-react" }));
builder.onLoad({ filter: /.*/, namespace: "fake-react" }, () => ({ contents: FAKE_REACT, loader: "js" }));
}
- }]
+ }, ...plugins]
});
return import(`data:text/javascript;base64,${Buffer.from(outputFiles[0].contents).toString("base64")}`);
}
diff --git a/tests/renderer-bundle-splitting.test.mjs b/tests/renderer-bundle-splitting.test.mjs
index 91a34d321..5b33674df 100644
--- a/tests/renderer-bundle-splitting.test.mjs
+++ b/tests/renderer-bundle-splitting.test.mjs
@@ -67,11 +67,17 @@ test("Settings and the launch/link dialogs are split out of the app's static imp
assert.ok(settingsPath, "SettingsPanel must be emitted as its own on-demand chunk");
assert.ok(launchDialogPath, "AgentLaunchDialog must be emitted as its own on-demand chunk");
assert.ok(linkDialogPath, "TerminalLinkDialog must be emitted as its own on-demand chunk");
+ const paletteChunk = Object.keys(metafile.outputs).find((p) => /CanvasCommandPalette-/.test(p));
+ assert.ok(paletteChunk, "the canvas command palette must be emitted as its own on-demand chunk");
+ const contextMenuChunk = Object.keys(metafile.outputs).find((p) => /CanvasContextMenu-/.test(p));
+ assert.ok(contextMenuChunk, "the canvas context menu must be emitted as its own on-demand chunk");
const { paths: eagerPaths, bytes: eagerBytes } = staticallyReachableBytes(metafile, appPath);
assert.ok(!eagerPaths.has(settingsPath), "SettingsPanel must only be reachable through a dynamic import()");
assert.ok(!eagerPaths.has(launchDialogPath), "AgentLaunchDialog must only be reachable through a dynamic import()");
assert.ok(!eagerPaths.has(linkDialogPath), "TerminalLinkDialog must only be reachable through a dynamic import()");
+ assert.ok(!eagerPaths.has(paletteChunk), "the command palette must only be reachable through a dynamic import()");
+ assert.ok(!eagerPaths.has(contextMenuChunk), "the canvas context menu must only be reachable through a dynamic import()");
const settingsBytes = metafile.outputs[settingsPath].bytes;
assert.ok(settingsBytes > 100_000, `SettingsPanel chunk should carry real weight, got ${settingsBytes} bytes`);
diff --git a/tests/settings-ui.test.mjs b/tests/settings-ui.test.mjs
index c33d31b22..b2f718149 100644
--- a/tests/settings-ui.test.mjs
+++ b/tests/settings-ui.test.mjs
@@ -293,6 +293,8 @@ test("the redesigned menus use shared tokens, em geometry, and the configured UI
const menuStyleEnd = styles.indexOf(".sticky-note-card", menuStyleStart);
const menuStyles = styles.slice(menuStyleStart, menuStyleEnd);
assert.doesNotMatch(menuStyles, /#[\da-f]{3,8}|rgba?\(/i);
+ assert.match(menuStyles, /\.canvas-menu__check \{[^}]*color: var\(--primary\)/);
+ assert.match(menuStyles, /\.canvas-menu__row:disabled \{/);
assert.match(styles, /\.launcher-dock \{[^}]*font-size: calc\(13px \* var\(--ui-scale, 1\)\)/);
assert.match(styles, /--card-header-height: calc\(54px \* var\(--ui-scale, 1\)\)/);
assert.match(styles, /\.terminal-card__header \{[^}]*font-size: calc\(13px \* var\(--ui-scale, 1\)\)/);