feat(app): keep narrow desktop windows in the desktop layout

Author: kitlangton

packages/app/component-tests/composer.spec.ts

@@ -402,14 +402,8 @@ for (const direction of ["ltr", "rtl"]) {
           Math.abs((direction === "ltr" ? action.x - last.x - last.width : last.x - action.x - action.width) - 12),
         ).toBeLessThan(1)
         await page.keyboard.press("Enter")
-        // Below the mobile breakpoint the variant picker opens in a bottom drawer instead of a menu.
-        await expect(
-          width < 768
-            ? page
-                .getByRole("dialog", { name: "Choose model variant", exact: true })
-                .getByRole("button", { name: "high", exact: true })
-            : page.getByRole("menuitemradio", { name: "high", exact: true }),
-        ).toBeVisible()
+        // A narrow window with a mouse keeps the menu; only a touch screen gets the bottom drawer.
+        await expect(page.getByRole("menuitemradio", { name: "high", exact: true })).toBeVisible()
         await page.keyboard.press("Escape")
         await expect(variant).toBeFocused()
         await expect(submit).toBeInViewport()
@@ -708,7 +702,7 @@ story("keeps default thinking accessible by keyboard without composer hover", as
 })
 
 story.describe("mobile variant drawer", () => {
-  story.use({ viewport: { width: 360, height: 720 } })
+  story.use({ hasTouch: true, isMobile: true, viewport: { width: 360, height: 720 } })
 
   // Guards patches/@corvu%2Fdrawer@0.2.4.patch. The drawer starts its opening transition two frames after it opens.
   // Dismissing it before then used to slide it open anyway, and dismissing it in that frame left it closing off screen

packages/app/component-tests/timeline-virtualizer.spec.ts

@@ -7,31 +7,35 @@ story.beforeEach(async ({ mount }) => {
   await expect(component.getByRole("textbox", { name: "Prompt", exact: true })).toBeVisible()
 })
 
-story("spaces the first mobile message without changing desktop spacing", async ({ page }) => {
-  await page.setViewportSize({ width: 390, height: 844 })
-  await page.evaluate(async (fixture) => {
-    const { mountTimelineVirtualizer } = await import(fixture)
-    mountTimelineVirtualizer({ count: 1, rowHeight: 60, immediate: true })
-  }, fixture)
-  const root = page.getByTestId("timeline-virtualizer-fixture")
-  await root.getByRole("button", { name: "Complete Markdown", exact: true }).click()
-  const content = root.locator("[data-timeline-virtual-content]")
-  await expect(content).toHaveCSS("visibility", "visible")
+story.describe("touch", () => {
+  story.use({ hasTouch: true, isMobile: true })
 
-  const gap = () =>
-    root.locator('[data-timeline-key="user-message:message-0"]').evaluate((element) => {
-      const viewport = element.closest("[data-scrollable]")!
+  story("spaces the first mobile message without changing desktop spacing", async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 })
+    await page.evaluate(async (fixture) => {
+      const { mountTimelineVirtualizer } = await import(fixture)
+      mountTimelineVirtualizer({ count: 1, rowHeight: 60, immediate: true })
+    }, fixture)
+    const root = page.getByTestId("timeline-virtualizer-fixture")
+    await root.getByRole("button", { name: "Complete Markdown", exact: true }).click()
+    const content = root.locator("[data-timeline-virtual-content]")
+    await expect(content).toHaveCSS("visibility", "visible")
 
-      return element.getBoundingClientRect().top - viewport.getBoundingClientRect().top
-    })
+    const gap = () =>
+      root.locator('[data-timeline-key="user-message:message-0"]').evaluate((element) => {
+        const viewport = element.closest("[data-scrollable]")!
 
-  await expect.poll(gap).toBe(16)
-  await root.evaluate((element) => element.setAttribute("dir", "rtl"))
-  await expect.poll(gap).toBe(16)
-  await page.setViewportSize({ width: 1280, height: 900 })
-  await expect.poll(gap).toBe(0)
-  await page.setViewportSize({ width: 390, height: 844 })
-  await expect.poll(gap).toBe(16)
+        return element.getBoundingClientRect().top - viewport.getBoundingClientRect().top
+      })
+
+    await expect.poll(gap).toBe(16)
+    await root.evaluate((element) => element.setAttribute("dir", "rtl"))
+    await expect.poll(gap).toBe(16)
+    await page.setViewportSize({ width: 1280, height: 900 })
+    await expect.poll(gap).toBe(0)
+    await page.setViewportSize({ width: 390, height: 844 })
+    await expect.poll(gap).toBe(16)
+  })
 })
 
 story("bounds the cheap suffix and reveals only ready measured rows", async ({ page }) => {

packages/app/e2e/regression/command-palette.spec.ts

@@ -296,63 +296,67 @@ test("keeps a keyboard-selected file when session results arrive later", async (
   expect(warnings).toEqual([])
 })
 
-test("navigation replaces commands without retaining disposed owners", async ({ page }) => {
-  const warnings = captureConsoleWarnings(page)
-  const palette = await openCommandPalette(page, true)
-  await palette.input.press("Escape")
-  await expect(palette.dialog).toHaveCount(0)
-  await page
-    .getByRole("region", { name: "Recent sessions" })
-    .getByRole("button", { name: /Palette fixture session/ })
-    .click()
-  const editor = page.locator('[data-component="composer-editor"]')
-  await expect(editor).toBeEditable()
-  await page.keyboard.press("ControlOrMeta+t")
-  await expect(page).toHaveURL(/\/new-session\?/)
-  await expect(editor).toBeEditable()
-  await editor.blur()
-  await page.keyboard.press("Control+l")
-  await expect(editor).toBeFocused()
-  await page.keyboard.press("ControlOrMeta+Shift+P")
-  const dialog = page.getByRole("dialog")
-  await expect(dialog.getByRole("combobox")).toBeFocused()
-  await expect(dialog.getByRole("combobox")).toHaveAttribute("placeholder", "Search files, commands, and sessions")
-  await dialog.getByRole("combobox").fill("copy session")
-  await expect(dialog.getByRole("option", { name: "Copy Session ID", exact: true })).toHaveCount(0)
-  await dialog.getByRole("combobox").press("Escape")
-  await expect(dialog).toHaveCount(0)
-  const tabs = page.locator("[data-titlebar-tab-link]")
-  await tabs.filter({ hasText: paletteSession.title }).click()
-  await expect(page.getByRole("heading", { name: paletteSession.title, exact: true })).toBeVisible()
-
-  for (const count of [3, 4]) {
-    await page.getByRole("button", { name: "New session", exact: true }).click()
-    await expect(tabs).toHaveCount(count)
+test.describe("touch", () => {
+  test.use({ hasTouch: true, isMobile: true })
+
+  test("navigation replaces commands without retaining disposed owners", async ({ page }) => {
+    const warnings = captureConsoleWarnings(page)
+    const palette = await openCommandPalette(page, true)
+    await palette.input.press("Escape")
+    await expect(palette.dialog).toHaveCount(0)
+    await page
+      .getByRole("region", { name: "Recent sessions" })
+      .getByRole("button", { name: /Palette fixture session/ })
+      .click()
+    const editor = page.locator('[data-component="composer-editor"]')
     await expect(editor).toBeEditable()
-  }
+    await page.keyboard.press("ControlOrMeta+t")
+    await expect(page).toHaveURL(/\/new-session\?/)
+    await expect(editor).toBeEditable()
+    await editor.blur()
+    await page.keyboard.press("Control+l")
+    await expect(editor).toBeFocused()
+    await page.keyboard.press("ControlOrMeta+Shift+P")
+    const dialog = page.getByRole("dialog")
+    await expect(dialog.getByRole("combobox")).toBeFocused()
+    await expect(dialog.getByRole("combobox")).toHaveAttribute("placeholder", "Search files, commands, and sessions")
+    await dialog.getByRole("combobox").fill("copy session")
+    await expect(dialog.getByRole("option", { name: "Copy Session ID", exact: true })).toHaveCount(0)
+    await dialog.getByRole("combobox").press("Escape")
+    await expect(dialog).toHaveCount(0)
+    const tabs = page.locator("[data-titlebar-tab-link]")
+    await tabs.filter({ hasText: paletteSession.title }).click()
+    await expect(page.getByRole("heading", { name: paletteSession.title, exact: true })).toBeVisible()
+
+    for (const count of [3, 4]) {
+      await page.getByRole("button", { name: "New session", exact: true }).click()
+      await expect(tabs).toHaveCount(count)
+      await expect(editor).toBeEditable()
+    }
 
-  await page.setViewportSize({ width: 600, height: 800 })
-  await page.locator('[data-slot="mobile-tabs-trigger"]').click()
-  await expect(page.locator('[data-slot="mobile-tabs-drawer"] [data-titlebar-tab-link]')).toHaveCount(4)
-  await page.setViewportSize({ width: 1280, height: 800 })
-  await expect(page.locator('[data-slot="titlebar-tabs"] [data-titlebar-tab-link]')).toHaveCount(4)
-  const active = new URL(page.url())
-  const closing = page.locator(`[data-titlebar-tab-link][href="${active.pathname}${active.search}"]`)
-  await expect(closing).toHaveCount(1)
-  await page.keyboard.press("ControlOrMeta+w")
-  await expect(tabs).toHaveCount(3)
-  await expect(closing).toHaveCount(0)
-  await expect(tabs.filter({ hasText: paletteSession.title })).toHaveCount(1)
-  await tabs.filter({ hasText: paletteSession.title }).click()
-  await expect(page.getByRole("heading", { name: paletteSession.title, exact: true })).toBeVisible()
-  await page.keyboard.press("ControlOrMeta+Shift+P")
-  await expect(dialog.getByRole("combobox")).toBeFocused()
-  await dialog.getByRole("combobox").fill("copy session")
-  await expect(dialog.getByRole("option", { name: "Copy Session ID", exact: true })).toHaveAttribute(
-    "aria-selected",
-    "true",
-  )
-  expect(warnings).toEqual([])
+    await page.setViewportSize({ width: 600, height: 800 })
+    await page.locator('[data-slot="mobile-tabs-trigger"]').click()
+    await expect(page.locator('[data-slot="mobile-tabs-drawer"] [data-titlebar-tab-link]')).toHaveCount(4)
+    await page.setViewportSize({ width: 1280, height: 800 })
+    await expect(page.locator('[data-slot="titlebar-tabs"] [data-titlebar-tab-link]')).toHaveCount(4)
+    const active = new URL(page.url())
+    const closing = page.locator(`[data-titlebar-tab-link][href="${active.pathname}${active.search}"]`)
+    await expect(closing).toHaveCount(1)
+    await page.keyboard.press("ControlOrMeta+w")
+    await expect(tabs).toHaveCount(3)
+    await expect(closing).toHaveCount(0)
+    await expect(tabs.filter({ hasText: paletteSession.title })).toHaveCount(1)
+    await tabs.filter({ hasText: paletteSession.title }).click()
+    await expect(page.getByRole("heading", { name: paletteSession.title, exact: true })).toBeVisible()
+    await page.keyboard.press("ControlOrMeta+Shift+P")
+    await expect(dialog.getByRole("combobox")).toBeFocused()
+    await dialog.getByRole("combobox").fill("copy session")
+    await expect(dialog.getByRole("option", { name: "Copy Session ID", exact: true })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    )
+    expect(warnings).toEqual([])
+  })
 })
 
 test("keeps matching session and file results steady across keystrokes while searches are pending", async ({

packages/app/e2e/regression/mobile-composer-submit-focus.spec.ts

@@ -4,6 +4,9 @@ import { sessionHref } from "../utils/app"
 import { openWithDirection } from "../utils/direction"
 import { mockOpenCodeServer } from "../utils/mock-server"
 
+// The mobile layout is for touch screens; a narrow window with a mouse keeps the desktop layout.
+test.use({ hasTouch: true, isMobile: true })
+
 for (const { width, direction } of [
   { width: 390, direction: "ltr" },
   { width: 390, direction: "rtl" },

packages/app/e2e/regression/mobile-extension-drawers.spec.ts

@@ -3,6 +3,9 @@ import { fixture, mockStressTimeline } from "../utils/session-fixture"
 import { sessionHref } from "../utils/app"
 import { openWithDirection } from "../utils/direction"
 
+// The mobile layout is for touch screens; a narrow window with a mouse keeps the desktop layout.
+test.use({ hasTouch: true, isMobile: true })
+
 for (const scheme of ["light", "dark"] as const) {
   for (const direction of ["ltr", "rtl"] as const) {
     test(`mobile extensions reuse the session drawer in ${scheme} ${direction}`, async ({ page }, testInfo) => {

packages/app/e2e/regression/mobile-extensions.spec.ts

@@ -3,7 +3,7 @@ import { sessionHref } from "../utils/app"
 import { fixture, mockStressTimeline } from "../utils/session-fixture"
 import { fileNode } from "../utils/workspace"
 
-test.use({ viewport: { width: 390, height: 844 } })
+test.use({ viewport: { width: 390, height: 844 }, hasTouch: true, isMobile: true })
 
 async function openFiles(page: Page) {
   await page