/home/mrjunejune/zenbu: mrjunejune/test/theme_and_webp_test.js comparison

comparison mrjunejune/test/theme_and_webp_test.js @ 272:41a49c29a28f

polish JRPG conversation experience Integrate desktop conversations into the utility panel, simplify the mobile frame, add modal destinations and a reusable Zenbu composer lab, and preserve explicit conversation resume behavior. Co-authored-by: Copilot <[email protected]>

author	MrJuneJune <me@mrjunejune.com>
date	Fri, 07 Aug 2026 16:05:29 -0700
parents	056790c4fb0d
children	e02e2036ef84

comparison

equal deleted inserted replaced

-:13d61401c57d
+:41a49c29a28f
 false,
 );
 await page.close();
 }
+async function testComposerLab(browser) {
+const context = await browser.newContext({
+serviceWorkers: 'block',
+viewport: { width: 390, height: 844 },
+});
+const page = await context.newPage();
+await page.goto(`${baseUrl}/public/composer-lab.html`, {
+waitUntil: 'networkidle',
+});
+await page.waitForFunction(() =>
+customElements.get('mjj-composer') &&
+customElements.get('zen-field') &&
+customElements.get('zen-button')
+);
+const compact = page.locator('mjj-composer[compact]');
+const textarea = compact.locator('textarea');
+const submit = compact.locator('button[type="submit"]');
+await textarea.fill('Composer lab message');
+await textarea.press('Enter');
+await page.waitForFunction(() =>
+[...document.querySelectorAll('[data-output]')]
+.some(output => output.textContent.includes('Composer lab message'))
+);
+const geometry = await compact.evaluate(element => {
+const field = element.querySelector('zen-field');
+const button = element.querySelector('zen-button');
+const nativeButton = button.querySelector('button');
+const buttonBox = nativeButton.getBoundingClientRect();
+return {
+compactButton: Math.abs(buttonBox.width - buttonBox.height) < 1,
+fieldStyled: !field.hasAttribute('appearance'),
+oneButtonOwner: nativeButton.closest('zen-button') === button,
+textareaOwned: element.querySelector('textarea').closest('zen-field') === field,
+};
+});
+assert.deepEqual(geometry, {
+compactButton: true,
+fieldStyled: true,
+oneButtonOwner: true,
+textareaOwned: true,
+});
+assert.equal(await submit.getAttribute('aria-label'), 'Send message');
+await context.close();
+}
 async function testJrpgPage(browser) {
 const context = await browser.newContext({
 colorScheme: 'light',
 viewport: { width: 1280, height: 900 },
 });
 }
 });
 await page.goto(`${baseUrl}/jrpg`, { waitUntil: 'networkidle' });
 await page.waitForFunction(() =>
-customElements.get('mjj-jrpg-composer') &&
+customElements.get('mjj-composer') &&
 customElements.get('mjj-jrpg-menu') &&
 customElements.get('mjj-jrpg-chat') &&
 customElements.get('mjj-jrpg-preview')
 );
 await page.evaluate(() => document.fonts.ready);
 const desktop = await page.evaluate(() => {
 const scene = document.querySelector('.jrpg-scene').getBoundingClientRect();
 const utility = document.querySelector('.jrpg-utility').getBoundingClientRect();
-const composer = document.querySelector('mjj-jrpg-composer')
+const composer = document.querySelector('mjj-composer')
 .getBoundingClientRect();
 const composerField = document.querySelector('.jrpg-composer zen-field')
 .getBoundingClientRect();
 const composerFieldStyle = getComputedStyle(
 document.querySelector('.jrpg-composer zen-field'),
 );
 const composerLabel = document.querySelector('.jrpg-composer label')
 .getBoundingClientRect();
 const composerTextarea = document.querySelector('#jrpg-message')
 .getBoundingClientRect();
-const menu = document.querySelector('mjj-jrpg-menu').getBoundingClientRect();
+const menuElement = document.querySelector('mjj-jrpg-menu');
+const menu = menuElement.getBoundingClientRect();
 const character = document.querySelector('[data-character]');
+const epiAvatar = document.querySelector(
+'.jrpg-message[data-speaker="Epi"] .jrpg-message-avatar',
+);
 const characterBox = character.getBoundingClientRect();
 const sceneBarStyle = getComputedStyle(
 document.querySelector('.jrpg-scene'),
 '::before',
 );
 const borderless = [
 '.jrpg-shell',
 '.jrpg-scene',
 '.jrpg-utility',
 'mjj-jrpg-chat',
-'mjj-jrpg-composer',
+'mjj-composer',
 'mjj-jrpg-menu',
 '.jrpg-preview-panel',
 '.jrpg-message',
 '.jrpg-work-showcase a',
-'.jrpg-composer textarea',
-'.jrpg-composer button[type="submit"]',
 'mjj-jrpg-menu button',
 ].every(selector => {
 const style = getComputedStyle(document.querySelector(selector));
 return style.borderTopWidth === '0px' &&
 style.borderRightWidth === '0px' &&
 brand.left <= workspace.left + workspace.width * 0.062 &&
 brand.right >= workspace.left + workspace.width * 0.102 &&
 brand.top <= workspace.top + workspace.height * 0.03 &&
 brand.bottom >= workspace.top + workspace.height * 0.06,
 characterLoaded: character.complete && character.naturalWidth > 0,
+epiAvatarLoaded:
+epiAvatar?.complete &&
+epiAvatar.naturalWidth > 0 &&
+epiAvatar.getAttribute('aria-hidden') === 'true',
 colors,
 composerBelowScene: composer.top >= scene.bottom,
 composerTextareaFills: (
 Math.abs(composerTextarea.left - composerField.left) < 1 &&
 Math.abs(composerTextarea.right - composerField.right) < 1 &&
 Math.abs(composerTextarea.bottom - composerField.bottom) < 1 &&
 composerTextarea.height > 60
 ),
+composerUsesZenStyles:
+getComputedStyle(document.querySelector('.jrpg-composer textarea'))
+.borderTopWidth !== '0px' &&
+submitStyle.borderTopWidth !== '0px',
 composerTextareaGeometry: {
 fieldBottom: composerField.bottom,
 fieldDisplay: composerFieldStyle.display,
 fieldGridRows: composerFieldStyle.gridTemplateRows,
 fieldLeft: composerField.left,
 assert.match(desktop.art, /background-frame-2\.webp/);
 assert.equal(desktop.borderless, true);
 assert.equal(desktop.brandInSystemSlot, true);
 assert.equal(desktop.brandCoversSystemLabel, true);
 assert.equal(desktop.characterLoaded, true);
+assert.equal(desktop.epiAvatarLoaded, true);
 assert.equal(desktop.colors.page, desktop.colors.canvas);
 assert.equal(desktop.colors.conversation, 'rgba(0, 0, 0, 0)');
 assert.equal(desktop.colors.conversationText, desktop.colors.text);
 assert.equal(desktop.colors.menu, 'rgba(0, 0, 0, 0)');
 assert.equal(desktop.colors.primaryText, desktop.colors.primary);
 assert.equal(desktop.colors.submit, desktop.colors.primary);
+assert.equal(desktop.composerUsesZenStyles, true);
 assert.equal(desktop.colors.utility, 'rgba(0, 0, 0, 0)');
 assert.equal(desktop.composerBelowScene, true);
 assert.equal(
 desktop.composerTextareaFills,
 true,
 assert.equal(
 await page.locator('[data-toggle-archive]').count(),
 0,
 'redundant chat-heading archive shortcut is removed',
 );
+assert.equal(
+await page.locator('.jrpg-panel-heading').count(),
+0,
+'visible conversation heading is removed',
+);
 await page.locator('button[data-preview="conversations"]').click();
 await page.locator('.jrpg-utility mjj-conversation-archive').waitFor({ state: 'visible' });
 const archiveGeometry = await page.evaluate(() => {
-const utility = document.querySelector('.jrpg-utility').getBoundingClientRect();
+const utilityElement = document.querySelector('.jrpg-utility');
-const archive = document.querySelector(
+const archiveElement = utilityElement.querySelector('mjj-conversation-archive');
-'.jrpg-utility mjj-conversation-archive',
+const utility = utilityElement.getBoundingClientRect();
-).getBoundingClientRect();
+const archive = archiveElement.getBoundingClientRect();
+const archiveStyle = getComputedStyle(archiveElement);
+const previewPanel = utilityElement.querySelector('.jrpg-preview-panel');
+const panel = previewPanel.getBoundingClientRect();
+const previewPanelStyle = getComputedStyle(previewPanel);
+const panelPadding = {
+bottom: parseFloat(previewPanelStyle.paddingBottom),
+left: parseFloat(previewPanelStyle.paddingLeft),
+right: parseFloat(previewPanelStyle.paddingRight),
+top: parseFloat(previewPanelStyle.paddingTop),
+};
+const previewContent = previewPanel.querySelector('[data-preview-content]');
+const renderedPanelChildren = Array.from(previewPanel.children)
+.filter(element => getComputedStyle(element).display !== 'none')
+.map(element => element.localName);
 return {
 archive: {
 bottom: archive.bottom,
 height: archive.height,
 left: archive.left,
 right: archive.right,
 top: archive.top,
 width: archive.width,
 },
-fits: archive.left >= utility.left &&
+fits: Math.abs(archive.left - panel.left - panelPadding.left) < 1 &&
-archive.top >= utility.top &&
+Math.abs(archive.top - panel.top - panelPadding.top) < 1 &&
-archive.right <= utility.right + 1 &&
+Math.abs(panel.right - panelPadding.right - archive.right) < 1 &&
-archive.bottom <= utility.bottom + 1 &&
+Math.abs(panel.bottom - panelPadding.bottom - archive.bottom) < 1,
-archive.width / utility.width > 0.85 &&
+integrated: archiveStyle.position === 'static' &&
-archive.height / utility.height > 0.85,
+archiveStyle.zIndex === 'auto' &&
+archiveStyle.backgroundColor === 'rgba(0, 0, 0, 0)' &&
+archiveStyle.backgroundImage === 'none' &&
+archiveStyle.boxShadow === 'none' &&
+previewPanelStyle.display === 'block' &&
+archiveElement.parentElement === previewPanel &&
+previewContent.hidden &&
+renderedPanelChildren.length === 1 &&
+renderedPanelChildren[0] === 'mjj-conversation-archive',
+renderedPanelChildren,
+panel: {
+bottom: panel.bottom,
+height: panel.height,
+left: panel.left,
+right: panel.right,
+top: panel.top,
+width: panel.width,
+},
+panelPadding,
 utility: {
 bottom: utility.bottom,
 height: utility.height,
 left: utility.left,
 right: utility.right,
 };
 });
 assert.equal(
 archiveGeometry.fits,
 true,
-`conversation archive fills the top-right utility aperture: ${JSON.stringify(archiveGeometry)}`,
+`conversation archive fills the existing utility content panel: ${JSON.stringify(archiveGeometry)}`,
+);
+assert.equal(
+archiveGeometry.integrated,
+true,
+`conversation archive renders as utility content instead of an overlay: ${JSON.stringify(archiveGeometry)}`,
 );
 // Archive status or empty message should be visible
 await page.waitForFunction(() => {
 const status = document.querySelector('[data-archive-status]');
 return status && !status.hidden;
 await page.locator('.jrpg-message[data-speaker="June"]').last().waitFor();
 const streamingMessage = page.locator(
 '.jrpg-message[data-speaker="Epi"][data-streaming="true"]',
 ).last();
 await streamingMessage.waitFor();
-await page.locator('[data-cancel-control]').waitFor({ state: 'hidden' });
+await page.locator('[data-composer-cancel-owner]').waitFor({ state: 'hidden' });
 await streamingMessage.waitFor();
 assert.notEqual(
 await streamingMessage.locator('p').textContent(),
 'hello traveler',
 );
 assert.equal(
 await page.locator('.jrpg-message[data-speaker="June"]:visible').count(),
 0,
 );
 assert.equal(
-await page.locator('.jrpg-message[data-speaker="System"]:visible').count(),
+await page.locator('.jrpg-message[data-speaker="Epi"]:visible').count(),
 1,
 );
 await page.getByRole('button', { name: 'Next turn' }).click();
 assert.equal(
 await page.locator('[data-turn-position]').textContent(),
 viewport: { width: 360, height: 640 },
 });
 const mobilePage = await mobileContext.newPage();
 await mobilePage.goto(`${baseUrl}/jrpg`, { waitUntil: 'networkidle' });
 await mobilePage.waitForFunction(() =>
-customElements.get('mjj-jrpg-composer') &&
+customElements.get('mjj-composer') &&
 customElements.get('mjj-jrpg-menu')
 );
 const mobile = await mobilePage.evaluate(() => {
 const workspace = document.querySelector('.jrpg-workspace')
 .getBoundingClientRect();
 const scene = document.querySelector('.jrpg-scene').getBoundingClientRect();
 const utility = document.querySelector('.jrpg-utility').getBoundingClientRect();
-const composer = document.querySelector('mjj-jrpg-composer')
+const composer = document.querySelector('mjj-composer')
 .getBoundingClientRect();
-const menu = document.querySelector('mjj-jrpg-menu').getBoundingClientRect();
+const brand = document.querySelector('.jrpg-brand').getBoundingClientRect();
+const brandLink = document.querySelector('.jrpg-brand a').getBoundingClientRect();
+const turnNavigation = document.querySelector('.jrpg-turn-navigation');
+const previousTurn = turnNavigation.querySelector('[data-turn-previous]')
+.getBoundingClientRect();
+const turnPosition = turnNavigation.querySelector('[data-turn-position]')
+.getBoundingClientRect();
+const nextTurn = turnNavigation.querySelector('[data-turn-next]')
+.getBoundingClientRect();
+const composerForm = document.querySelector('.jrpg-composer')
+.getBoundingClientRect();
+const composerTextarea = document.querySelector('#jrpg-message')
+.getBoundingClientRect();
+const sendButton = document.querySelector(
+'.jrpg-composer button[type="submit"]',
+).getBoundingClientRect();
+const sendOwner = document.querySelector(
+'.jrpg-composer zen-button:has(button[type="submit"])',
+);
+const composerField = document.querySelector(
+'.jrpg-composer [data-composer-control] > zen-field',
+);
+const composerLabel = composerField.querySelector('label');
+const sendLabel = document.querySelector('[data-composer-action-label]');
+const menuElement = document.querySelector('mjj-jrpg-menu');
+const menu = menuElement.getBoundingClientRect();
 const shell = document.querySelector('.jrpg-shell').getBoundingClientRect();
 const hamburger = document.querySelector('[data-mobile-menu-toggle]');
 const hamburgerBox = hamburger?.getBoundingClientRect();
-const menuButtons = [...document.querySelectorAll(
+const dialog = document.querySelector('[data-mobile-destination-dialog]');
-'mjj-jrpg-menu button[data-preview]',
+const destinationContent = document.querySelector(
-)];
+'[data-mobile-destination-content]',
-const telemetryItems = [
+);
-...document.querySelectorAll('.jrpg-frame-telemetry > *'),
-];
 const closeTo = (value, expected, tol = 0.025) =>
 Math.abs(value - expected) < tol;
 const wsW = workspace.width;
 const wsH = workspace.height;
 const mobileArt = getComputedStyle(
 document.querySelector('.jrpg-workspace'),
 ).backgroundImage;
 const mobileArtIsCorrect = mobileArt.includes('background-frame-mobile.webp');
 const aperturesTolerance = [
-closeTo((scene.left - workspace.left) / wsW, 0.045),
+closeTo((scene.left - workspace.left) / wsW, 0.048),
-closeTo((scene.top - workspace.top) / wsH, 0.075),
+closeTo((scene.top - workspace.top) / wsH, 0.073),
-closeTo(scene.width / wsW, 0.91),
+closeTo(scene.width / wsW, 0.904),
-closeTo(scene.height / wsH, 0.455),
+closeTo(scene.height / wsH, 0.712),
-closeTo((utility.left - workspace.left) / wsW, 0.045),
+closeTo((composer.left - workspace.left) / wsW, 0.048),
-closeTo((utility.top - workspace.top) / wsH, 0.547),
+closeTo((composer.top - workspace.top) / wsH, 0.796),
-closeTo(utility.width / wsW, 0.91),
+closeTo(composer.width / wsW, 0.904),
-closeTo(utility.height / wsH, 0.171),
+closeTo(composer.height / wsH, 0.177),
-closeTo((composer.left - workspace.left) / wsW, 0.045),
+closeTo((hamburgerBox.left - workspace.left) / wsW, 0.872),
-closeTo((composer.top - workspace.top) / wsH, 0.728),
+closeTo((hamburgerBox.top - workspace.top) / wsH, 0.013),
-closeTo(composer.width / wsW, 0.603),
+closeTo(hamburgerBox.width / wsW, 0.094),
-closeTo(composer.height / wsH, 0.192),
+closeTo(hamburgerBox.height / wsH, 0.053),
-closeTo((menu.left - workspace.left) / wsW, 0.665),
-closeTo((menu.top - workspace.top) / wsH, 0.728),
-closeTo(menu.width / wsW, 0.29),
-closeTo(menu.height / wsH, 0.192),
 ].every(Boolean);
 const hamburgerPresent = hamburger !== null &&
-hamburger.getAttribute('aria-expanded') === 'true' &&
+hamburger.getAttribute('aria-expanded') === 'false' &&
 hamburgerBox !== null &&
 hamburgerBox.width > 0 &&
 hamburgerBox.height > 0;
-const telemetryCount = telemetryItems.length === 4;
 const composerVisible = composer.width > 0 && composer.height > 0;
-const menuVisible = menu.width > 0 && menu.height > 0;
-const conversationsButton = document.querySelector(
-'button[data-preview="conversations"]',
-);
 return {
 aperturesTolerance,
-conversationsButtonVisible: conversationsButton !== null &&
+brandAligned:
-conversationsButton.offsetParent !== null,
+closeTo((brand.top - workspace.top) / wsH, 0.013) &&
-buttonsFit: menuButtons.every(button =>
+closeTo(brand.height / wsH, 0.053) &&
-button.getBoundingClientRect().right <= innerWidth + 1
+Math.abs(
-),
+brandLink.left + brandLink.width / 2 -
+(workspace.left + workspace.width / 2)
+) < 2,
+brandVisible:
+getComputedStyle(document.querySelector('.jrpg-brand')).display ===
+'grid' &&
+document.querySelector('.jrpg-brand').textContent.includes('MrJuneJune'),
+composerContentAligned:
+composerForm.left >= composer.left &&
+composerForm.top >= composer.top &&
+composer.right - composerForm.right <= 8 &&
+composer.bottom - composerForm.bottom <= 8 &&
+composerForm.left - composer.left <= 8 &&
+composerForm.top - composer.top <= 8 &&
+sendButton.bottom < composerTextarea.bottom &&
+composerTextarea.bottom - sendButton.bottom <= 16,
+composerGeometry: {
+composer: {
+bottom: composer.bottom,
+left: composer.left,
+right: composer.right,
+top: composer.top,
+},
+form: {
+bottom: composerForm.bottom,
+left: composerForm.left,
+right: composerForm.right,
+top: composerForm.top,
+},
+send: {
+bottom: sendButton.bottom,
+left: sendButton.left,
+right: sendButton.right,
+top: sendButton.top,
+},
+textarea: {
+bottom: composerTextarea.bottom,
+left: composerTextarea.left,
+right: composerTextarea.right,
+top: composerTextarea.top,
+},
+},
+composerFieldUsesSpace:
+composerTextarea.left === composerForm.left &&
+composerTextarea.right === composerForm.right &&
+sendButton.left > composerTextarea.left &&
+sendButton.right < composerTextarea.right &&
+sendButton.top > composerTextarea.top &&
+sendButton.bottom < composerTextarea.bottom,
+composerLabelHidden:
+composerLabel.getBoundingClientRect().width <= 1 &&
+composerLabel.getBoundingClientRect().height <= 1,
 composerVisible,
+dialogClosed: !dialog.open,
 fillsViewport: shell.left === 0 &&
 shell.top === 0 &&
 Math.abs(shell.right - innerWidth) < 1 &&
 Math.abs(shell.bottom - innerHeight) < 1,
 fillsWidth: shell.left === 0 &&
 Math.abs(shell.right - innerWidth) < 1,
 hamburgerPresent,
 initialScroll: scrollY,
+mediaMatches: matchMedia(
+'(max-width: 52rem) and (orientation: portrait)',
+).matches,
+menuInModal: menuElement.parentElement === destinationContent,
+menuHidden: menu.width === 0 && menu.height === 0,
 mobileArtIsCorrect,
-menuVisible,
 noOverflow: document.documentElement.scrollWidth <= innerWidth,
-telemetryCount,
+sendButtonCompact:
-utilityBelowScene: utility.top >= scene.bottom - 1,
+Math.abs(sendButton.width - sendButton.height) < 1 &&
+sendButton.width <= 44 &&
+getComputedStyle(sendLabel).display === 'none',
+telemetryHidden: getComputedStyle(
+document.querySelector('.jrpg-frame-telemetry'),
+).display === 'none',
+turnNavigationAligned:
+Math.abs(
+turnPosition.left + turnPosition.width / 2 -
+(workspace.left + workspace.width / 2)
+) < 2 &&
+Math.abs(
+previousTurn.top + previousTurn.height / 2 -
+(nextTurn.top + nextTurn.height / 2)
+) < 1 &&
+previousTurn.left < turnPosition.left &&
+nextTurn.right > turnPosition.right,
+turnNavigationGeometry: {
+nextCenter: nextTurn.left + nextTurn.width / 2,
+positionCenter: turnPosition.left + turnPosition.width / 2,
+previousCenter: previousTurn.left + previousTurn.width / 2,
+workspaceCenter: workspace.left + workspace.width / 2,
+},
+topLeftClear: document.elementFromPoint(10, 10)?.classList
+.contains('jrpg-workspace'),
+utilityHidden: utility.width === 0 && utility.height === 0,
+utilityInModal: document.querySelector('.jrpg-utility').parentElement ===
+destinationContent,
+usesDesignSystemControls:
+!composerField.hasAttribute('appearance') &&
+!sendOwner.hasAttribute('appearance'),
 workspaceFills: Math.abs(workspace.left) < 1 &&
 Math.abs(workspace.top) < 1 &&
 Math.abs(workspace.right - innerWidth) < 1 &&
 Math.abs(workspace.bottom - innerHeight) < 1,
 };
 });
 assert.equal(mobile.aperturesTolerance, true, 'mobile apertures within tolerance at 360x640');
-assert.equal(
+assert.equal(mobile.brandAligned, true, 'MrJuneJune aligns in the mobile top bar');
-mobile.conversationsButtonVisible,
+assert.equal(mobile.brandVisible, true, 'MrJuneJune is visible on mobile');
+assert.equal(
+mobile.composerContentAligned,
 true,
-'Conversations destination visible on mobile',
+`composer content aligns inside frame aperture: ${JSON.stringify(mobile.composerGeometry)}`,
 );
-assert.equal(mobile.buttonsFit, true, 'menu buttons fit within viewport width');
+assert.equal(mobile.composerFieldUsesSpace, true, 'composer field fills space beside send control');
+assert.equal(mobile.composerLabelHidden, true, 'Message label remains accessible but not visible');
 assert.equal(mobile.composerVisible, true, 'composer visible');
+assert.equal(mobile.dialogClosed, true, 'destination modal starts closed');
 assert.equal(mobile.fillsViewport, true, 'shell fills viewport');
 assert.equal(mobile.fillsWidth, true, 'shell fills width');
-assert.equal(mobile.hamburgerPresent, true, 'hamburger button present and has aria-expanded=true');
+assert.equal(mobile.hamburgerPresent, true, 'top-right menu trigger starts collapsed');
 assert.equal(mobile.initialScroll, 0, 'no initial scroll');
 assert.equal(mobile.mobileArtIsCorrect, true, 'mobile background URL is background-frame-mobile.webp');
-assert.equal(mobile.menuVisible, true, 'menu visible');
+assert.equal(mobile.menuHidden, true, 'menu stays out of the two-aperture frame');
+assert.equal(
+mobile.menuInModal,
+true,
+`menu is hosted by the mobile modal: ${JSON.stringify(mobile)}`,
+);
 assert.equal(mobile.noOverflow, true, 'no horizontal overflow at 360x640');
-assert.equal(mobile.telemetryCount, true, 'four telemetry items present');
+assert.equal(mobile.sendButtonCompact, true, 'mobile send control is a compact square icon button');
-assert.equal(mobile.utilityBelowScene, true, 'utility aperture below scene');
+assert.equal(mobile.telemetryHidden, true, 'mobile frame omits desktop telemetry');
+assert.equal(
+mobile.turnNavigationAligned,
+true,
+`turn navigation is centered and level: ${JSON.stringify(mobile.turnNavigationGeometry)}`,
+);
+assert.equal(mobile.utilityHidden, true, 'destination view stays out of the frame');
+assert.equal(mobile.utilityInModal, true, 'destination view is hosted by the mobile modal');
+assert.equal(mobile.usesDesignSystemControls, true, 'composer uses styled Zenbu controls');
 assert.equal(mobile.workspaceFills, true, 'workspace fills full viewport');
+assert.equal(mobile.topLeftClear, true, 'hidden dialog triggers do not cover frame art');
-// Test hamburger disclosure behavior.
+// The top-right trigger opens the modal menu.
 await mobilePage.locator('[data-mobile-menu-toggle]').click();
-assert.equal(
+await mobilePage.locator('[data-mobile-destination-dialog]').waitFor({
-await mobilePage.locator('[data-mobile-menu-toggle]')
+state: 'visible',
-.getAttribute('aria-expanded'),
+});
-'false',
-'hamburger collapses the destination menu',
-);
-assert.equal(
-await mobilePage.locator('mjj-jrpg-menu')
-.getAttribute('data-mobile-menu-collapsed'),
-'',
-'menu exposes its collapsed state',
-);
-// Second click expands.
-await mobilePage.locator('[data-mobile-menu-toggle]').click();
 assert.equal(
 await mobilePage.locator('[data-mobile-menu-toggle]')
 .getAttribute('aria-expanded'),
 'true',
-'hamburger expands the destination menu',
+'menu trigger reflects the open modal',
 );
-// Hamburger keyboard accessible
+assert.equal(
+await mobilePage.locator('mjj-jrpg-menu').isVisible(),
+true,
+'destination menu is visible inside the modal',
+);
+// Every destination replaces the menu inside the same modal.
+await mobilePage.locator('button[data-preview="conversations"]').click();
+await mobilePage.locator('mjj-conversation-archive').waitFor({
+state: 'visible',
+});
+assert.equal(
+await mobilePage.locator('[data-mobile-destination-title]').textContent(),
+'Conversations',
+'conversation archive is a named modal destination',
+);
+assert.equal(
+await mobilePage.locator('[data-mobile-destination-dialog]').isVisible(),
+true,
+'conversation archive remains in the modal',
+);
+assert.equal(
+await mobilePage.locator('.jrpg-mobile-destination-header').evaluate(
+header => {
+const items = [...header.children].filter(
+item => getComputedStyle(item).display !== 'none',
+);
+const centers = items.map(item => {
+const rect = item.getBoundingClientRect();
+return rect.top + rect.height / 2;
+});
+return Math.max(...centers) - Math.min(...centers) < 2;
+},
+),
+true,
+'mobile modal header controls share one row',
+);
+await mobilePage.locator('[data-mobile-destination-back]').click();
+assert.equal(
+await mobilePage.locator('mjj-jrpg-menu').isVisible(),
+true,
+'modal back action returns to destinations',
+);
+await mobilePage.locator('button[data-preview="resume"]').click();
+assert.equal(
+await mobilePage.locator('[data-preview-content]').isVisible(),
+true,
+'resume view renders in the mobile modal',
+);
+assert.equal(
+await mobilePage.locator('[data-mobile-destination-title]').textContent(),
+'Resume',
+'modal title follows the selected destination',
+);
+await mobilePage.getByRole('button', {
+name: 'Close destination menu',
+}).click();
+await mobilePage.locator('[data-mobile-destination-dialog]').waitFor({
+state: 'hidden',
+});
 assert.ok(
 await mobilePage.locator('[data-mobile-menu-toggle]').evaluate(el =>
-el.tabIndex >= 0 || el.tabIndex === -1
+el.tabIndex >= 0
 ),
-'hamburger button is in document',
+'mobile menu trigger remains keyboard accessible',
 );
 await mobileContext.close();
 // Test at 390x844
 const mobile390Context = await browser.newContext({
 await mobile320Page.goto(`${baseUrl}/jrpg`, { waitUntil: 'networkidle' });
 const mobile320 = await mobile320Page.evaluate(() => {
 const workspace = document.querySelector('.jrpg-workspace')
 .getBoundingClientRect();
 const shell = document.querySelector('.jrpg-shell').getBoundingClientRect();
-const composer = document.querySelector('mjj-jrpg-composer')
+const composer = document.querySelector('mjj-composer')
 .getBoundingClientRect();
 const menu = document.querySelector('mjj-jrpg-menu').getBoundingClientRect();
 const mobileArt = getComputedStyle(
 document.querySelector('.jrpg-workspace'),
 ).backgroundImage;
 composerPresent: composer.width > 0 && composer.height > 0,
 fillsViewport: shell.left === 0 &&
 shell.top === 0 &&
 Math.abs(shell.right - innerWidth) < 1 &&
 Math.abs(shell.bottom - innerHeight) < 1,
-menuPresent: menu.width > 0 && menu.height > 0,
+menuHidden: menu.width === 0 && menu.height === 0,
 mobileArtIsCorrect: mobileArt.includes('background-frame-mobile.webp'),
 noOverflow: document.documentElement.scrollWidth <= innerWidth,
 workspaceFills: Math.abs(workspace.left) < 1 &&
 Math.abs(workspace.top) < 1 &&
 Math.abs(workspace.right - innerWidth) < 1 &&
 Math.abs(workspace.bottom - innerHeight) < 1,
 };
 });
 assert.equal(mobile320.composerPresent, true, 'composer present at 320x568');
 assert.equal(mobile320.fillsViewport, true, 'fills viewport at 320x568');
-assert.equal(mobile320.menuPresent, true, 'menu present at 320x568');
+assert.equal(mobile320.menuHidden, true, 'menu remains modal-only at 320x568');
 assert.equal(mobile320.mobileArtIsCorrect, true, 'mobile art at 320x568');
 assert.equal(mobile320.noOverflow, true, 'no overflow at 320x568');
 assert.equal(mobile320.workspaceFills, true, 'workspace fills at 320x568');
 await mobile320Context.close();
 outputTokensLimit: 10000, outputTokensUsed: 0,
 outputTokensReserved: 0, outputTokensRemaining: 10000,
 resetsAt: Math.floor(Date.now() / 1000) + 86400,
 },
 };
+/* Returning without a conversation URL stays fresh until the user chooses one. */
+{
+const context = await browser.newContext({ serviceWorkers: 'block' });
+await context.addInitScript(id => {
+sessionStorage.setItem('mjj-jrpg-conversation-id', id);
+}, CONV_A);
+const page = await context.newPage();
+let detailRequestCount = 0;
+await page.route('**/api/auth/session', route => route.fulfill({
+status: 200, contentType: 'application/json',
+body: JSON.stringify(GUEST_SESSION),
+}));
+await page.route('**/api/conversations**', route => {
+const url = new URL(route.request().url());
+if (url.pathname === '/api/conversations') {
+return route.fulfill({
+status: 200, contentType: 'application/json',
+body: JSON.stringify({
+conversations: [{
+id: CONV_A,
+title: 'Earlier quest',
+turn_count: 2,
+}],
+cursor: null,
+}),
+});
+}
+return route.fulfill({
+status: 404, contentType: 'application/json',
+body: JSON.stringify({ error: { message: 'Not found' } }),
+});
+});
+await page.route(`**/api/conversations/${CONV_A}`, route => {
+detailRequestCount += 1;
+return route.fulfill({
+status: 200, contentType: 'application/json',
+body: JSON.stringify({
+id: CONV_A,
+title: 'Earlier quest',
+turns: [{ role: 'assistant', content: 'Welcome back.' }],
+}),
+});
+});
+await page.goto(`${baseUrl}/jrpg`, { waitUntil: 'networkidle' });
+assert.equal(detailRequestCount, 0, 'latest conversation is not opened automatically');
+assert.equal(
+new URL(page.url()).searchParams.has('conversation'),
+false,
+'returning visit remains a fresh conversation URL',
+);
+await page.waitForFunction(() => {
+const greeting = document.querySelector('[data-greeting] p');
+return greeting?.textContent.includes('Open Conversations');
+});
+assert.equal(
+await page.evaluate(() =>
+sessionStorage.getItem('mjj-jrpg-conversation-id')),
+null,
+'stale active conversation state is cleared',
+);
+await page.locator('button[data-preview="conversations"]').click();
+const selectedConversation = page.waitForResponse(response =>
+new URL(response.url()).pathname === `/api/conversations/${CONV_A}`);
+await page.locator('[data-conv-open]').click();
+assert.equal((await selectedConversation).status(), 200);
+assert.ok(detailRequestCount >= 1, 'conversation opens after explicit selection');
+await page.waitForFunction(id =>
+new URL(window.location.href).searchParams.get('conversation') === id,
+CONV_A);
+assert.equal(
+new URL(page.url()).searchParams.get('conversation'),
+CONV_A,
+'explicit selection writes the conversation URL',
+);
+await context.close();
+}
 /* ---- Fix 3: malformed ?conversation param must not fall back to sessionStorage ---- */
 {
 const storedId = 'cccccccc-cccc-4ccc-8ccc-cccccccccccc';
 const context = await browser.newContext({ serviceWorkers: 'block' });
 });
 });
 await page.goto(`${baseUrl}/jrpg`, { waitUntil: 'networkidle' });
 await page.waitForFunction(
-() => !document.querySelector('mjj-jrpg-composer textarea')?.disabled,
+() => !document.querySelector('mjj-composer textarea')?.disabled,
 );
 /* Submit — creates conversation via pushState and starts stream */
 await page.locator('#jrpg-message').fill('routing race test');
 await page.locator('#jrpg-message').press('Enter');
 /* Stream is now active */
-await page.locator('[data-cancel-control]').waitFor({ state: 'visible' });
+await page.locator('[data-composer-cancel-owner]').waitFor({ state: 'visible' });
 const urlDuringStream = page.url();
 assert.ok(
 urlDuringStream.includes('conversation='),
 `Fix 1: URL must have ?conversation during stream: ${urlDuringStream}`,
 /* Navigate back while stream is active — URL already changes here */
 await page.goBack();
 /* Stream abort + pending-popstate application: cancel control disappears */
-await page.locator('[data-cancel-control]').waitFor({ state: 'hidden' });
+await page.locator('[data-composer-cancel-owner]').waitFor({ state: 'hidden' });
 /* URL and UI must converge to the pre-stream state */
 const finalUrl = page.url();
 assert.ok(
 !finalUrl.includes('conversation='),
 await testThemeCycle(browser);
 await testPlainField(browser);
 await testButtonScale(browser);
 await testDynamicButtonOwnership(browser);
 await testResumePrint(browser);
+await testComposerLab(browser);
 }
 if (runsSuite('jrpg')) await testJrpgPage(browser);
 if (runsSuite('routing')) await testConversationRouting(browser);
 if (runsSuite('greeting')) await testRoleGreetings(browser);
 if (runsSuite('hls')) await testHlsPlayer(browser, siteRoot);