test/clay-primary-agent.test.js
Rama main · réplica de lectura del repositorio original.
var test = require('node:test');
var assert = require('node:assert/strict');
var childProcess = require('node:child_process');
var path = require('node:path');
function loadPlaywright() { try { return require('playwright'); } catch (error) { return null; } }
async function iconFace(page) {
return page.locator('.icon-strip-brand').evaluate(function (el) {
var face = getComputedStyle(el, '::before');
var logo = el.querySelector('img');
var box = logo.getBoundingClientRect();
return { background: face.backgroundColor, shadow: face.boxShadow, border: face.border, image: logo.getAttribute('src'), width: box.width, height: box.height };
});
}
async function geometry(page) {
return page.evaluate(function () {
return ['#main-area', '#sidebar-column', '.title-bar-content', '.header-worker-history-btn'].map(function (selector) {
var box = document.querySelector(selector).getBoundingClientRect();
return {selector: selector, x: box.x, y: box.y, width: box.width, height: box.height};
});
});
}
async function readingGeometry(page) {
return page.evaluate(function () {
return ['.msg-assistant .md-content', '#input', '#input-row', '#session-list .session-item-title'].map(function (selector) {
var style = getComputedStyle(document.querySelector(selector));
return {selector: selector, font: style.fontSize, line: style.lineHeight, padding: style.padding};
});
});
}
async function assertUserAlignment(page) {
var rows = await page.locator('#messages > .msg-user:not(.msg-user-other)').evaluateAll(function (elements) {
return elements.map(function (el) {
var row = el.getBoundingClientRect();
var bubble = el.querySelector('.bubble').getBoundingClientRect();
var actions = el.querySelector('.msg-actions').getBoundingClientRect();
var inset = parseFloat(getComputedStyle(el).paddingRight);
return {rightGap: row.right - inset - bubble.right, actionsGap: row.right - inset - actions.right,
actionsBelow: actions.top >= bubble.bottom, contained: bubble.left >= row.left && bubble.right <= row.right};
});
});
assert.ok(rows.length > 0);
rows.forEach(function (row) {
assert.ok(Math.abs(row.rightGap) <= 1, 'user bubble reaches the right text edge');
assert.ok(Math.abs(row.actionsGap) <= 1, 'message toolbar shares the right edge');
assert.equal(row.actionsBelow, true, 'message toolbar sits below the bubble');
assert.equal(row.contained, true);
});
}
async function toolGrid(page) {
return page.locator('#session-actions .palette-tile').evaluateAll(function (elements) {
return elements.filter(function (element) { return element.getBoundingClientRect().width > 0; }).map(function (element) {
var box = element.getBoundingClientRect();
var label = element.querySelector('.tool-btn-label');
var caption = label.getBoundingClientRect();
var style = getComputedStyle(label);
var icon = element.querySelector('.lucide').getBoundingClientRect();
var text = document.createRange();
text.selectNodeContents(label);
return {
label: label.textContent, x: box.x, y: box.y,
iconWidth: icon.width, iconHeight: icon.height, font: style.fontSize,
lines: caption.height / parseFloat(style.lineHeight),
textFits: text.getBoundingClientRect().width <= caption.width + 0.5
};
});
});
}
async function assertCanvasInset(page) {
var inset = await page.evaluate(function () {
var column = document.querySelector('#main-column').getBoundingClientRect();
var canvas = document.querySelector('#main-panels').getBoundingClientRect();
var header = document.querySelector('.title-bar-content').getBoundingClientRect();
return {left: canvas.left - column.left, right: column.right - canvas.right, top: canvas.top - header.bottom, bottom: column.bottom - canvas.bottom, mobile: innerWidth <= 768};
});
assert.deepEqual(inset, {left: inset.mobile ? 4 : 0, right: inset.mobile ? 4 : 6, top: 0, bottom: inset.mobile ? 4 : 6, mobile: inset.mobile});
}
async function surface(page, selector) {
return page.locator(selector).evaluate(function (el) {
while (el) {
var background = getComputedStyle(el).backgroundColor;
if (background !== 'rgba(0, 0, 0, 0)') return background;
el = el.parentElement;
}
return 'transparent';
});
}
async function assertReachable(page, selector) {
var visible = await page.locator(selector).evaluate(function (el) {
var box = el.getBoundingClientRect();
var target = document.elementFromPoint(box.x + box.width / 2, box.y + box.height / 2);
return box.width > 0 && box.height > 0 && box.x >= 0 && box.right <= innerWidth && box.y >= 0 && box.bottom <= innerHeight && (target === el || el.contains(target));
});
assert.equal(visible, true, selector + ' must remain visible and unobscured');
}
async function chromeContrast(page) {
return page.evaluate(function () {
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 1;
var context = canvas.getContext('2d', {willReadFrequently: true});
function luminance(color) {
context.fillStyle = color;
context.fillRect(0, 0, 1, 1);
var rgb = Array.from(context.getImageData(0, 0, 1, 1).data).slice(0, 3).map(function (value) {
value /= 255;
return value <= 0.04045 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4);
});
return rgb[0] * 0.2126 + rgb[1] * 0.7152 + rgb[2] * 0.0722;
}
return ['.title-bar-project-name', '.title-bar-project-default', '#session-list .session-item-title', '#header-title'].map(function (selector) {
var element = document.querySelector(selector);
var style = getComputedStyle(element);
var elementBackground = style.backgroundColor;
if (elementBackground === 'rgba(0, 0, 0, 0)') elementBackground = getComputedStyle(document.querySelector('#sidebar-column')).backgroundColor;
var background = luminance(elementBackground);
var foreground = luminance(style.color);
return {selector: selector, ratio: (Math.max(background, foreground) + 0.05) / (Math.min(background, foreground) + 0.05)};
});
});
}
async function roleLabelContrast(page) {
return page.locator('.clay-role-label').evaluate(function (element) {
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 1;
var context = canvas.getContext('2d', {willReadFrequently: true});
function luminance(color) {
context.fillStyle = color;
context.fillRect(0, 0, 1, 1);
var rgb = Array.from(context.getImageData(0, 0, 1, 1).data).slice(0, 3).map(function (value) {
value /= 255;
return value <= 0.04045 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4);
});
return rgb[0] * 0.2126 + rgb[1] * 0.7152 + rgb[2] * 0.0722;
}
var style = getComputedStyle(element);
var background = style.backgroundColor;
var ancestor = element.parentElement;
while (background === 'rgba(0, 0, 0, 0)' && ancestor) {
background = getComputedStyle(ancestor).backgroundColor;
ancestor = ancestor.parentElement;
}
var foreground = style.color;
var backgroundLuminance = luminance(background);
var foregroundLuminance = luminance(foreground);
return {background: background, foreground: foreground, ratio: (Math.max(backgroundLuminance, foregroundLuminance) + 0.05) / (Math.min(backgroundLuminance, foregroundLuminance) + 0.05)};
});
}
test('production Clay workspace DOM: identity, native button access, scoped surfaces and compact geometry', async function (t) {
var playwright = loadPlaywright();
if (!playwright) { t.skip('Playwright is not installed'); return; }
var port = 33000 + process.pid % 10000;
var server = childProcess.spawn(process.execPath, [path.join(__dirname, 'fixtures/session-folders-dom/serve.js'), String(port)], {stdio: ['ignore', 'pipe', 'pipe']});
t.after(function () { if (!server.killed) server.kill('SIGTERM'); });
await new Promise(function (resolve, reject) {
var timer = setTimeout(function () { reject(new Error('fixture server did not start')); }, 5000);
server.stdout.on('data', function (chunk) { if (String(chunk).indexOf('DOM harness on') !== -1) { clearTimeout(timer); resolve(); } });
server.on('exit', function (code) { clearTimeout(timer); reject(new Error('fixture server exited ' + code)); });
});
var browser;
try { browser = await playwright.chromium.launch(); } catch (error) { t.skip('Chromium is not available: ' + error.message); return; }
t.after(async function () { await browser.close(); });
var page = await browser.newPage({viewport: {width: 1280, height: 900}, reducedMotion: 'reduce'});
page.setDefaultTimeout(10000);
var pageErrors = [];
page.on('pageerror', function (error) { pageErrors.push(error.message); });
var base = 'http://127.0.0.1:' + port + '/clay-primary.html';
async function open(query) {
await page.goto(base + (query || ''), {waitUntil: 'networkidle'});
await page.waitForSelector('body[data-ready="true"]');
}
// This identity fixture has no live conversation server. Native routing is
// exercised directly; contextual handoff uses the authenticated browser fixture.
async function enterWorkspace(selector) {
var mateId = selector === '.icon-strip-brand' ? 'clay-built-in' : selector.match(/data-mate-id="([^"]+)"/)[1];
await page.evaluate(function (id) { return window.__openMateWorkspace(id); }, mateId);
}
await open();
var entry = page.locator('.icon-strip-brand');
await t.test('click, Enter and Space open the popover; native entry uses the exact built-in artwork', async function () {
var face = await iconFace(page);
await entry.click();
assert.deepEqual(await page.evaluate(function () { return window.__opened; }), [], 'first click keeps the current workspace');
assert.equal(await page.locator('#contextual-clay').isVisible(), true);
await entry.click();
assert.deepEqual(await page.evaluate(function () { return window.__opened; }), [], 'an unready conversation cannot hand off');
await page.keyboard.press('Escape');
await enterWorkspace('.icon-strip-brand');
assert.deepEqual(await page.evaluate(function () { return window.__opened; }), ['mate-clay-built-in']);
assert.deepEqual(await page.evaluate(function () { return window.__panelCloses; }), ['terminal', 'files']);
assert.equal(await entry.getAttribute('aria-current'), 'page');
var activeFace = await iconFace(page);
assert.notEqual(activeFace.background, face.background);
assert.notEqual(activeFace.shadow, face.shadow);
assert.equal(activeFace.border, face.border);
assert.equal(activeFace.image, face.image);
assert.equal(face.image, 'clay-studio-symbol.png');
assert.equal(face.width, 38);
assert.equal(await page.locator('button[data-mate-id="clay-built-in"]').count(), 0);
assert.equal(await page.locator('#clay-primary-agent-label').count(), 0);
assert.equal(await page.locator('.title-bar-mate-avatar').count(), 0);
assert.equal(await page.locator('.title-bar-project-icon').evaluate(function (el) { return getComputedStyle(el).display; }), 'none');
var roleBadge = page.locator('#title-bar-project-default');
assert.equal(await roleBadge.textContent(), 'Lead Mate');
assert.equal(parseFloat(await roleBadge.evaluate(function (el) { return getComputedStyle(el).fontSize; })), 10);
assert.equal((await roleBadge.boundingBox()).height, 18);
assert.equal(await roleBadge.evaluate(function (el) { return getComputedStyle(el).borderRadius; }), '5px');
assert.equal(await roleBadge.locator('.clay-role-insignia').count(), 1);
assert.equal((await roleBadge.locator('.clay-role-insignia').boundingBox()).width, 12);
assert.equal(parseFloat(await roleBadge.locator('.clay-role-insignia').evaluate(function (el) { return getComputedStyle(el).paddingLeft; })), 0);
for (var part of ['.clay-role-insignia', '.clay-role-label']) {
assert.equal(await roleBadge.locator(part).evaluate(function (el) { return getComputedStyle(el).backgroundColor; }), 'rgba(0, 0, 0, 0)', 'Badge contents share one surface');
}
assert.equal(await roleBadge.locator('.clay-role-insignia').evaluate(function (el) { return getComputedStyle(el).color; }), 'rgb(224, 180, 91)');
assert.equal(await roleBadge.locator('.clay-role-label').evaluate(function (el) { return getComputedStyle(el).color; }), 'rgb(255, 255, 255)');
assert.equal(await roleBadge.locator('.clay-role-label').count(), 1);
await roleBadge.locator('svg').waitFor({state: 'attached'});
assert.equal(await roleBadge.locator('svg').count(), 1);
assert.equal(await page.locator('#title-bar-project-default').isVisible(), true);
for (var key of ['Enter', 'Space']) {
await page.getByRole('button', {name: 'Open Studio project', exact: true}).click();
await entry.focus();
await page.keyboard.press('Tab');
await page.keyboard.press('Shift+Tab');
assert.equal(await entry.evaluate(function (el) { return el === document.activeElement && el.matches(':focus-visible'); }), true);
await page.keyboard.press(key);
assert.equal(await page.locator('#contextual-clay').isVisible(), true);
await page.keyboard.press(key);
assert.equal(await entry.getAttribute('aria-current'), null);
await page.keyboard.press('Escape');
await enterWorkspace('.icon-strip-brand');
assert.equal(await entry.getAttribute('aria-current'), 'page');
}
assert.deepEqual(await page.evaluate(function () { return window.__opened; }), ['mate-clay-built-in', 'mate-clay-built-in', 'mate-clay-built-in']);
});
await t.test('Mate canvases share geometry and the pale mint default in both themes', async function () {
for (var theme of ['light-theme', 'dark-theme']) {
await open('?workspace=clay&theme=' + (theme === 'light-theme' ? 'light' : 'dark'));
await enterWorkspace('[data-mate-id="designer"]');
await assertCanvasInset(page);
assert.equal(await surface(page, '.title-bar-content'), await surface(page, '#sidebar-column'));
var green = await page.locator('#sidebar-column').evaluate(function (el) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.fillStyle = getComputedStyle(el).backgroundColor;
context.fillRect(0, 0, 1, 1);
return Array.from(context.getImageData(0, 0, 1, 1).data);
});
assert.ok(green[1] > green[0] && green[1] > green[2], 'ordinary Mate surround has a green tint');
assert.ok(Math.max.apply(Math, green.slice(0, 3)) - Math.min.apply(Math, green.slice(0, 3)) < 20, 'surround tint stays restrained');
var mateContrasts = await chromeContrast(page);
mateContrasts.forEach(function (result) { assert.ok(result.ratio >= 4.5, result.selector + ' Mate contrast'); });
await page.screenshot({path: '/tmp/mate-canvas-' + theme + '.png'});
var normal = await surface(page, '#sidebar-column');
var reading = await surface(page, '#main-panels');
var composer = await surface(page, '#input-row');
var before = await geometry(page);
var typography = await readingGeometry(page);
var face = await iconFace(page);
await enterWorkspace('.icon-strip-brand');
assert.equal(await surface(page, '#sidebar-column'), normal);
assert.equal(await surface(page, '.title-bar-content'), await surface(page, '#sidebar-column'));
assert.equal(await surface(page, '#main-panels'), reading);
assert.equal(await surface(page, '#input-row'), composer, 'Clay and other Mates share the restored Home writing surface');
assert.deepEqual(await geometry(page), before);
assert.deepEqual(await readingGeometry(page), typography);
await assertCanvasInset(page);
var activeFace = await iconFace(page);
assert.notEqual(activeFace.background, face.background);
assert.notEqual(activeFace.shadow, face.shadow);
assert.equal(activeFace.image, face.image);
var contrasts = await chromeContrast(page);
contrasts.forEach(function (result) { assert.ok(result.ratio >= 4.5, result.selector + ' contrast ' + result.ratio); });
var labelContrast = await roleLabelContrast(page);
assert.notEqual(labelContrast.background, 'rgba(0, 0, 0, 0)', 'Lead Mate label background is composited');
assert.ok(labelContrast.ratio >= 4.5, 'Lead Mate label contrast ' + labelContrast.ratio);
await page.locator('.header-worker-history-btn').click();
assert.equal(await page.getByRole('menu', {name: /Worker history for/}).isVisible(), true);
await page.keyboard.press('Escape');
assert.equal(await page.locator('.header-worker-history-btn').evaluate(function (el) { return el === document.activeElement; }), true);
await enterWorkspace('[data-mate-id="designer"]');
assert.equal(await surface(page, '#sidebar-column'), normal);
assert.equal(await surface(page, '#input-row'), composer);
assert.equal(await entry.getAttribute('aria-current'), null);
assert.equal(await page.locator('.title-bar-mate-avatar').count(), 1);
assert.equal(await page.locator('.title-bar-project-icon.is-clay-identity').count(), 0);
assert.match(await page.locator('#title-bar-project-default').textContent(), /Product design/);
}
});
await t.test('direct Clay transitions clear mutually exclusive identity styling', async function () {
await open('?workspace=clay');
await enterWorkspace('[data-mate-id="designer"]');
assert.equal(await page.locator('#title-bar-project-dropdown').getAttribute('data-clay-identity'), null);
assert.equal(await page.locator('#title-bar-project-dropdown').getAttribute('data-mate-bio'), 'true');
assert.equal(await page.locator('#title-bar-project-default').evaluate(function (el) { return getComputedStyle(el).display; }), 'block');
assert.equal(await page.locator('.title-bar-mate-avatar').count(), 1);
await enterWorkspace('.icon-strip-brand');
await enterWorkspace('[data-mate-id="quiet"]');
assert.equal(await page.locator('#title-bar-project-dropdown').getAttribute('data-clay-identity'), null);
assert.equal(await page.locator('#title-bar-project-dropdown').getAttribute('data-mate-bio'), null);
assert.equal(await page.locator('#title-bar-project-default').evaluate(function (el) { return getComputedStyle(el).display; }), 'none');
assert.equal(await page.locator('#title-bar-project-default').textContent(), '');
assert.equal(await page.locator('.title-bar-mate-avatar').count(), 1);
await enterWorkspace('.icon-strip-brand');
await enterWorkspace('[data-mate-id="named-clay"]');
assert.equal(await page.locator('#title-bar-project-dropdown').getAttribute('data-clay-identity'), null);
assert.equal(await page.locator('#title-bar-project-dropdown').getAttribute('data-mate-bio'), 'true');
assert.equal(await page.locator('.title-bar-mate-avatar').count(), 1);
assert.equal(await page.locator('.title-bar-project-icon.is-clay-identity').count(), 0);
});
await t.test('settled Clay identity screenshots', async function () {
await page.setViewportSize({width: 1280, height: 800});
await open('?workspace=clay&theme=light');
await page.screenshot({path: '/tmp/clay-identity-desktop-light.png'});
await open('?workspace=clay&theme=dark');
await page.screenshot({path: '/tmp/clay-identity-desktop-dark.png'});
await page.setViewportSize({width: 1280, height: 800});
await open('?workspace=clay&theme=light&sidebar=192');
var sidebarBadge = page.locator('#title-bar-project-default');
var sidebarBadgeBox = await sidebarBadge.boundingBox();
assert.equal(sidebarBadgeBox.height, 18);
assert.ok(sidebarBadgeBox.x >= 0 && sidebarBadgeBox.x + sidebarBadgeBox.width <= 192, 'Lead Mate badge fits the 192px sidebar');
assert.equal((await page.locator('.title-bar-sidebar').boundingBox()).height, 48);
await page.screenshot({path: '/tmp/clay-identity-sidebar-192-light.png'});
await page.setViewportSize({width: 390, height: 800});
await open('?workspace=clay&theme=light');
await page.screenshot({path: '/tmp/clay-identity-narrow-light.png'});
await page.setViewportSize({width: 1280, height: 800});
});
await t.test('late metadata, renaming, archived and unavailable built-ins cannot misidentify Clay', async function () {
await open('?workspace=clay&late=1');
assert.equal(await entry.isDisabled(), true);
assert.equal(await page.locator('body').evaluate(function (el) { return el.classList.contains('clay-workspace-active'); }), false);
await page.evaluate(function () { window.__loadMates(); });
assert.equal(await entry.isEnabled(), true);
assert.equal(await entry.getAttribute('aria-current'), 'page');
await page.evaluate(function () {
window.__store.set({cachedMatesList: [{id: 'clay-built-in', builtinKey: 'clay', name: 'Renamed', profile: {bio: 'A renamed companion'}}, {id: 'fake', name: 'Clay'}]});
});
assert.equal(await page.locator('#title-bar-project-name').textContent(), 'Renamed');
assert.equal(await entry.getAttribute('aria-current'), 'page');
await enterWorkspace('[data-mate-id="fake"]');
assert.equal(await entry.getAttribute('aria-current'), null);
await enterWorkspace('.icon-strip-brand');
assert.equal(await page.evaluate(function () { return window.__store.get('currentSlug'); }), 'mate-clay-built-in');
for (var unavailable of [[], [{id: 'clay-built-in', builtinKey: 'clay', archived: true}], [{id: 'fake', name: 'Clay'}]]) {
await page.evaluate(function (mates) { window.__store.set({cachedMatesList: mates}); }, unavailable);
assert.equal(await entry.isDisabled(), true);
assert.equal(await entry.getAttribute('aria-current'), null);
assert.equal(await entry.getAttribute('aria-label'), 'Clay is unavailable');
assert.equal(await page.locator('body').evaluate(function (el) { return el.classList.contains('clay-workspace-active'); }), false);
}
await page.evaluate(function () { window.__loadMates(); });
for (var state of [{homeShellVisible: true}, {homeShellVisible: false, dmMode: true}]) {
await page.evaluate(function (next) { window.__store.set(next); }, state);
assert.equal(await entry.getAttribute('aria-current'), null);
assert.equal(await page.locator('body').evaluate(function (el) { return el.classList.contains('clay-workspace-active'); }), false);
}
});
await t.test('desktop, narrow sidebar and mobile keep input and header controls reachable', async function () {
for (var theme of ['light', 'dark']) {
await open('?workspace=clay&theme=' + theme);
for (var width of [1280, 980, 769, 390, 320]) {
await page.setViewportSize({width: width, height: 900});
if (width === 980) {
await page.locator('#sidebar-column').evaluate(function (el) { el.style.width = '192px'; });
await page.waitForFunction(function () { return document.querySelector('#sidebar-column').getBoundingClientRect().width === 192; });
}
assert.equal(await page.evaluate(function () { return document.documentElement.scrollWidth <= innerWidth; }), true, 'no horizontal overflow at ' + width);
await assertReachable(page, '#send-btn');
await assertReachable(page, '#input');
await assertReachable(page, '.header-worker-history-btn');
await assertReachable(page, '#find-in-session-btn');
if (width > 768) await assertReachable(page, '.icon-strip-brand');
await assertCanvasInset(page);
var before = await geometry(page);
await page.evaluate(function () { window.__store.set({currentSlug: 'mate-designer'}); });
await assertCanvasInset(page);
assert.deepEqual(await geometry(page), before, 'surface switching preserves layout at ' + width);
await page.evaluate(function () { window.__store.set({currentSlug: 'mate-clay-built-in'}); });
}
}
});
await t.test('Mate tools keep two compact rows, with four columns for Clay and three for other Mates', async function () {
await page.setViewportSize({width: 1280, height: 900});
await open('?workspace=project&sidebar=192');
var projectTools = await toolGrid(page);
assert.equal(new Set(projectTools.map(function (tool) { return tool.x; })).size, 4);
for (var mate of ['.icon-strip-brand', '[data-mate-id="designer"]']) {
await enterWorkspace(mate);
var mateTools = await toolGrid(page);
assert.equal(mateTools.length, mate === '.icon-strip-brand' ? 7 : 6);
assert.equal(new Set(mateTools.map(function (tool) { return tool.x; })).size, mate === '.icon-strip-brand' ? 4 : 3);
assert.equal(new Set(mateTools.map(function (tool) { return tool.y; })).size, 2);
mateTools.forEach(function (tool) {
assert.equal(tool.iconWidth, 28, tool.label + ' keeps its compact icon face');
assert.equal(tool.iconHeight, 28);
assert.equal(tool.font, '10.5px');
if (['Knowledge', 'Scheduled', 'Browser', 'Debates'].indexOf(tool.label) !== -1) {
assert.ok(tool.lines <= 1.1, tool.label + ' stays on one line');
if (mate !== '.icon-strip-brand') assert.equal(tool.textFits, true, tool.label + ' is not clipped');
}
});
}
await page.getByRole('button', {name: 'Open Studio project', exact: true}).click();
assert.deepEqual(await toolGrid(page), projectTools, 'ordinary project tools retain their original layout');
await enterWorkspace('.icon-strip-brand');
var sidebar = page.locator('#sidebar-column');
var width = (await sidebar.boundingBox()).width;
await page.locator('#sidebar-toggle-btn').click();
await page.waitForFunction(function () { return document.querySelector('#sidebar-column').getBoundingClientRect().width === 0; });
await assertReachable(page, '#sidebar-expand-btn');
await page.locator('#sidebar-expand-btn').click();
await page.waitForFunction(function (expected) { return document.querySelector('#sidebar-column').getBoundingClientRect().width === expected; }, width);
var row = page.locator('#session-list .session-item.active');
assert.equal((await row.boundingBox()).height, 36);
await row.hover();
var star = row.locator('.session-folder-star-btn');
await assertReachable(page, '#session-list .session-item.active .session-folder-star-btn');
await star.focus();
assert.equal(await star.evaluate(function (el) { return el === document.activeElement; }), true);
await page.locator('.header-worker-history-btn').click();
assert.equal(await page.getByRole('menu', {name: /Worker history for/}).getByRole('menuitem').count(), 2);
await page.keyboard.press('Escape');
});
await t.test('Home-style Mate conversation preserves the real composer and resets for projects', async function () {
await page.setViewportSize({width: 1280, height: 900});
await open('?workspace=clay&composer&ghost');
var input = page.locator('#input');
var restored = await page.evaluate(function () {
var reply = document.querySelector('.msg-assistant');
var row = document.querySelector('#input-row');
var field = document.querySelector('#input').getBoundingClientRect();
var voice = document.querySelector('.stt-controls').getBoundingClientRect();
var send = document.querySelector('#send-btn').getBoundingClientRect();
var tools = document.querySelector('#attach-wrap').getBoundingClientRect();
return { replyWidth: reply.getBoundingClientRect().width, replyLayout: getComputedStyle(reply).display,
userHeader: getComputedStyle(document.querySelector('.msg-user .dm-bubble-header')).display,
radius: getComputedStyle(row, '::before').borderRadius,
aligned: Math.abs((voice.top + voice.bottom - field.top - field.bottom) / 2) <= 1 && Math.abs((send.top + send.bottom - field.top - field.bottom) / 2) <= 1,
toolsBelow: tools.top >= field.bottom };
});
assert.equal(restored.replyWidth, 860);
assert.equal(restored.replyLayout, 'grid');
assert.equal(restored.userHeader, 'none');
assert.equal(restored.radius, '22px');
assert.equal(restored.aligned, true, 'voice and send belong to the writing row');
assert.equal(restored.toolsBelow, true);
await assertUserAlignment(page);
var chooser = page.waitForEvent('filechooser');
await page.locator('#attach-file-btn').click();
assert.equal((await chooser).isMultiple(), true);
for (var control of ['#ask-mate-btn', '#composer-add-worker-btn', '#schedule-btn']) {
assert.equal(await page.locator(control).isVisible(), false, control + ' is absent from the Mate composer');
}
await page.evaluate(function () { document.activeElement.blur(); });
await page.waitForTimeout(180);
var restingFace = await page.locator('#input-row').evaluate(function (el) {
var face = getComputedStyle(el, '::before');
return {edge: face.borderColor, background: face.backgroundColor};
});
await input.focus();
await page.waitForTimeout(180);
assert.notEqual(await page.locator('#input-row').evaluate(function (el) { return getComputedStyle(el, '::before').borderColor; }), restingFace.edge);
assert.equal(await page.locator('#input-row').evaluate(function (el) { return getComputedStyle(el, '::before').backgroundColor; }), restingFace.background, 'focus keeps the normal writing surface');
var focused = await page.locator('#input-row').evaluate(function (el) {
var outer = getComputedStyle(el);
var face = getComputedStyle(el, '::before');
var inputStyle = getComputedStyle(document.getElementById('input'));
var ghostStyle = getComputedStyle(document.getElementById('ghost-suggestion'));
return {outerShadow: outer.boxShadow, outerBackground: outer.backgroundColor,
faceShadow: face.boxShadow, inputPadding: inputStyle.padding, ghostPadding: ghostStyle.padding,
inputLine: inputStyle.lineHeight, ghostLine: ghostStyle.lineHeight};
});
assert.equal(focused.outerShadow, 'none', 'no square focus ring outside the rounded field');
assert.equal(focused.outerBackground, 'rgba(0, 0, 0, 0)');
assert.notEqual(focused.faceShadow, 'none', 'rounded writing surface retains subtle depth');
assert.equal(focused.inputPadding, focused.ghostPadding, 'suggestions align with the caret');
assert.equal(focused.inputLine, focused.ghostLine);
assert.equal(await page.locator('#ghost-suggestion').isVisible(), true);
await page.screenshot({path: '/tmp/mate-composer-focused.png'});
await input.fill('First line');
assert.equal(await page.locator('#ghost-suggestion').isVisible(), false);
await input.press('Shift+Enter');
await input.press('End');
await input.press('x');
assert.equal(await input.inputValue(), 'First line\nx');
await input.press('Enter');
await page.waitForFunction(function () { return window.__sent.some(function (message) { return message.type === 'message' && message.text === 'First line\nx'; }); });
assert.equal(await input.inputValue(), '');
await input.fill('Button send');
await page.locator('#send-btn').click();
assert.equal(await page.evaluate(function () { return window.__sent.filter(function (message) { return message.type === 'message'; }).length; }), 2);
await page.evaluate(function () { window.__store.set({processing: true}); });
await page.locator('#send-btn').click();
assert.equal(await page.evaluate(function () { return window.__sent.slice(-1)[0].type; }), 'stop');
await input.fill('Keep this draft');
await page.evaluate(function () { window.__store.set({connected: false, processing: false}); });
await page.locator('#send-btn').click();
assert.equal(await input.inputValue(), 'Keep this draft');
assert.match(await page.evaluate(function () { return window.__inputErrors[0]; }), /Not connected/);
await page.locator('[data-slug="project"]').click();
assert.equal(await page.locator('body').evaluate(function (el) { return el.classList.contains('mate-workspace-active'); }), false);
assert.equal(await page.locator('#input-row').evaluate(function (el) { return getComputedStyle(el).display; }), 'flex');
for (var wide of [false, true]) {
await page.evaluate(function (enabled) { document.body.classList.toggle('wide-view', enabled); }, wide);
for (var width of [1600, 1100, 390]) {
await page.setViewportSize({width: width, height: 800});
var composerWidth = await page.evaluate(function () {
var area = document.getElementById('input-area');
var style = getComputedStyle(area);
return {
available: area.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight),
actual: document.getElementById('input-wrapper').getBoundingClientRect().width
};
});
assert.ok(Math.abs(composerWidth.available - composerWidth.actual) <= 1, 'project composer fills its pane in both transcript layouts');
}
}
await page.setViewportSize({width: 1280, height: 800});
assert.equal(await page.locator('.msg-assistant').first().evaluate(function (el) { return getComputedStyle(el).display; }), 'flex');
assert.equal(await input.inputValue(), 'Keep this draft');
await enterWorkspace('[data-mate-id="designer"]');
assert.equal(await page.locator('#input-row').evaluate(function (el) { return getComputedStyle(el).display; }), 'grid');
await page.setViewportSize({width: 320, height: 700});
await assertUserAlignment(page);
await assertReachable(page, '#input');
await assertReachable(page, '#stt-btn-picker');
await page.locator('#input-more-btn').click();
assert.equal(await page.locator('#input-more-sheet').isVisible(), true);
await page.locator('.input-more-backdrop').click({position: {x: 5, y: 5}});
await page.waitForFunction(function () { return document.getElementById('input-more-sheet').classList.contains('hidden'); });
await page.screenshot({path: '/tmp/mate-conversation-mobile.png'});
await page.setViewportSize({width: 1280, height: 900});
});
await t.test('Mate actions use collapsed identity rows for running, completed and failed tools', async function () {
await page.setViewportSize({width: 1280, height: 900});
await open('?workspace=clay&actions&layout=bubble');
var group = page.locator('.mate-tool-group');
assert.equal(await group.count(), 1);
assert.equal(await group.getAttribute('data-session-mate-id'), 'clay-built-in');
assert.equal(await group.locator('.dm-bubble-avatar').isVisible(), false, 'action summaries do not repeat the Mate avatar');
assert.equal(await group.evaluate(function (el) { return getComputedStyle(el).display; }), 'flex');
assert.equal(await group.locator('.tool-group-header').isVisible(), true, 'a single Mate tool has a summary');
assert.equal(await group.locator('.tool-item').isVisible(), false, 'details start collapsed');
await group.locator('.tool-group-header').click();
assert.equal(await group.locator('.tool-item').isVisible(), true);
await page.evaluate(function () { window.__actions.finish('action-1', false); });
assert.equal(await group.evaluate(function (el) { return el.classList.contains('done'); }), true);
assert.equal(await group.locator('.tool-item').isVisible(), true, 'completion respects an opened group');
await group.locator('.tool-group-header').click();
await page.screenshot({path: '/tmp/mate-actions-light.png'});
await page.evaluate(function () { window.__actions.reset(); window.__actions.start('action-2'); window.__actions.finish('action-2', true); });
var failed = page.locator('.mate-tool-group').last();
await failed.locator('.tool-group-status-icon .err-icon svg').waitFor({state: 'visible'});
assert.equal(await failed.locator('.err-icon').first().isVisible(), true);
await failed.locator('.tool-group-header').click();
await failed.locator('.tool-header').click();
assert.equal(await failed.locator('.tool-result-block').isVisible(), true);
assert.match(await failed.locator('.tool-result-block').textContent(), /Search unavailable/);
await page.evaluate(function () { document.documentElement.classList.remove('light-theme'); });
await page.setViewportSize({width: 390, height: 800});
await failed.scrollIntoViewIfNeeded();
assert.equal(await page.evaluate(function () { return document.documentElement.scrollWidth <= innerWidth; }), true);
await page.screenshot({path: '/tmp/mate-actions-dark-mobile.png'});
await page.setViewportSize({width: 1280, height: 900});
await page.locator('[data-slug="project"]').click();
await page.evaluate(function () { window.__store.set({activeSessionMateId: null, activeSessionMateName: null}); window.__actions.reset(); window.__actions.start('project-action'); });
var projectGroup = page.locator('.tool-group').last();
assert.equal(await projectGroup.evaluate(function (el) { return el.classList.contains('mate-tool-group'); }), false);
assert.equal(await projectGroup.locator('.tool-item').isVisible(), true, 'ordinary project single tools retain their presentation');
});
await t.test('split preview keeps both production canvases and the Worker status clear', async function () {
await page.setViewportSize({width: 1440, height: 1000});
for (var theme of ['light', 'dark']) {
await open('?workspace=clay&theme=' + theme + '&split=1');
await page.frameLocator('iframe').locator('body[data-ready="true"]').waitFor();
assert.equal(await page.locator('.split-pane').count(), 2);
assert.equal(await page.frameLocator('iframe').locator('#input-wrapper').isVisible(), false);
assert.equal(await page.frameLocator('iframe').locator('.worker-pane-status').isVisible(), true);
assert.equal(await page.frameLocator('iframe').locator('#input').isDisabled(), true);
assert.equal(await page.locator('#input').isEnabled(), true);
assert.equal(await page.locator('#input').inputValue(), 'Let’s start with the workspace.');
await assertReachable(page, '#send-btn');
await assertReachable(page, '.header-worker-history-btn');
await page.locator('.header-worker-history-btn').click();
assert.equal(await page.getByRole('menu', {name: /Worker history for/}).getByRole('menuitem').count(), 2);
await page.keyboard.press('Escape');
}
await page.getByRole('button', {name: 'Close Worker preview'}).click();
assert.equal(await page.locator('.split-pane').count(), 1);
await assertReachable(page, '#send-btn');
});
assert.deepEqual(pageErrors, []);
});