The chat stacks above the editor's panels, so an expanded code editor no longer covers it; chat lines are keyed by an id given when each is made instead of their index; make verify captures the chat on both tabs, over the expanded editor, and as a phone's sheet, with the assistant's status and transcript answered by the script

frontend/scripts/capture-screenshots.mjs

@@ -87,7 +87,8 @@ for (const theme of ["light", "dark"]) {
     await page.waitForTimeout(1500)
     await page.screenshot({ path: `${dir}/app-dashboard.png` })
 
-    await captureFlows(page, dir)
+    const flow = await captureFlows(page, dir)
+    await captureChat(page, dir, flow)
     await captureDashboards(page, dir)
     await captureDevices(page, dir)
     await captureMedia(page, dir)
@@ -97,7 +98,7 @@ for (const theme of ["light", "dark"]) {
 
     await context.close()
     console.log(
-      `  wrote ${dir}/{website-hero,app-login,app-dashboard,app-flows,app-flow-panel,app-panel,app-devices,app-device,app-round,app-runs,app-run,app-run-context,app-workers}.png`,
+      `  wrote ${dir}/{website-hero,app-login,app-dashboard,app-flows,app-flow-panel,app-chat*,app-panel,app-devices,app-device,app-round,app-runs,app-run,app-run-context,app-workers}.png`,
     )
   }
 }
@@ -344,4 +345,51 @@ async function captureFlows(page, dir) {
   })
   await page.waitForTimeout(1500)
   await page.screenshot({ path: `${dir}/app-flow-panel.png` })
+  return page.url()
+}
+
+/**
+ * The chat panel, with no model behind it: the assistant's status and its
+ * stored conversation are answered here, and nothing is sent. On a desktop,
+ * the Build and Control tabs under a node panel, then over the expanded code
+ * editor; on a phone, the sheet the header opens on Home. The Control tab is
+ * there when a flow has a wren or assistant node, as the Demo does.
+ */
+async function captureChat(page, dir, flow) {
+  await page.route("**/api/v1/ai/status", (route) =>
+    route.fulfill({ json: { available: true, model: "llama3.2" } }),
+  )
+  await page.route("**/api/v1/ai/chat", (route) => route.fulfill({ json: [] }))
+  const chat = page.getByTestId("chat-panel")
+
+  if (page.viewportSize().width < 768) {
+    await page.goto(`${APP_URL}/`, { waitUntil: "networkidle" })
+    await page.getByTestId("chat-trigger").click()
+    await chat.waitFor({ timeout: 15000 })
+    await page.waitForTimeout(1000)
+    await page.screenshot({ path: `${dir}/app-chat.png` })
+  } else {
+    await page.goto(flow, { waitUntil: "networkidle" })
+    await page.locator(".react-flow__node").first().click()
+    await page.getByTestId("node-panel").waitFor({ timeout: 15000 })
+    await page.getByRole("button", { name: "Assistant" }).click()
+    await chat.waitFor({ timeout: 15000 })
+    await page.waitForTimeout(1000)
+    await page.screenshot({ path: `${dir}/app-chat-build.png` })
+
+    const control = page.getByTestId("chat-tabs").getByText("Control")
+    if (await control.count()) {
+      await control.click()
+      await page.waitForTimeout(500)
+      await page.screenshot({ path: `${dir}/app-chat-control.png` })
+    }
+
+    const expand = page.getByRole("button", { name: "Expand the editor" })
+    if (await expand.count()) {
+      await expand.click()
+      await page.waitForTimeout(1000)
+      await page.screenshot({ path: `${dir}/app-chat-editor.png` })
+    }
+  }
+  await page.unrouteAll()
 }