gallery: flaky base reds made deterministic (changelog load hold, failed-step fixture, emoji popover height)

webviews/src/agent-session/acpmux/conversation/toolErrors.gallery.ts

@@ -183,9 +183,13 @@ const failedStep = chat(
   { harness: "claude", model: "claude-opus-5-5" },
 );
 
-/// Opens the run, to show its steps.
+/// Opens the run, to show its steps. A turn with no summary row draws as it came (turns.ts
+/// `shapeTurn`), so this group already starts open: a click then closed it, and the wait raced its
+/// close (it held only while the closing steps were still drawn; the reply under it rose as it shut).
+/// The play clicks only a closed group.
 const openRun = async (ctx: PlayContext) => {
-  await ctx.click({ role: "button", name: /Ran 4 commands/ });
+  const run = ctx.find({ role: "button", name: /Ran 4 commands/ });
+  if (run.getAttribute("aria-expanded") !== "true") await ctx.click({ role: "button", name: /Ran 4 commands/ });
   await ctx.waitFor(() => Boolean(ctx.document.querySelector(".cv-steps .cv-command__failed")));
 };
 

webviews/src/gallery/frame/pages.ts

@@ -13,6 +13,7 @@ import { CodeRouterOps } from "../../pages/coderouter/types";
 import { MockCodeRouterProvider } from "../../pages/coderouter/mockProvider";
 import { ACTION_RUN as CHANGELOG_ACTION_RUN, ChangelogOps } from "../../pages/changelog/types";
 import { MockChangelogProvider } from "../../pages/changelog/mockProvider";
+import { PAINT_AFTER_NAME } from "../../pages/shared/paintGate";
 import { diffViewerLabelsFor, diffViewerLanguage, loadDiffViewerLabels } from "../../labels";
 import type {
   AppsPageVariant,
@@ -425,7 +426,29 @@ export async function mountChangelogPage(state: ChangelogPageVariant, _context:
   if (state.route) history.replaceState(null, "", state.route);
   document.documentElement.dataset.cmuxPage = "changelog";
   document.documentElement.dataset.cmuxWebviewKind = "changelog";
-  await import("../../pages/changelog/main");
+  await showAfterPaintHold(() => import("../../pages/changelog/main"));
+}
+
+/**
+ * Mounts a page that holds its first frame (pages/shared/paintGate.ts `holdFirstPaint`) and shows
+ * it once that hold settles, as the app's host does (PagePaintProbe, PanePaintHold): the reader's
+ * first frame is the page with its first screen's data in. Without it the stage painted the
+ * loading placeholders whenever the mock host's replies (a timer each) came after the first
+ * frame, and the days under them moved as the notes arrived: pages.changelog#sheet scored 0 in one
+ * render and 0.248 in the next. Hidden with `display: none` (no boxes, so nothing it lays out
+ * meanwhile counts as a shift; a section sizes nothing, so each day near the viewport, and those
+ * under it, load their notes at once); the page's own 400 ms bound still shows a late page.
+ */
+async function showAfterPaintHold(mount: () => Promise<unknown>): Promise<void> {
+  const root = document.getElementById("root");
+  const display = root?.style.display ?? "";
+  if (root) root.style.display = "none";
+  try {
+    await mount();
+    await (window as unknown as Record<string, unknown>)[PAINT_AFTER_NAME];
+  } finally {
+    if (root) root.style.display = display;
+  }
 }
 
 const never = (): Promise<never> => new Promise(() => undefined);

webviews/src/pages/home-channels/styles.css

@@ -582,9 +582,13 @@ body,
 }
 
 /* Composer popovers (ui/Popover places them on the dropdown layer). */
+/* One size whatever the search leaves: the popover opens above the composer, so a list that
+   shrank as each letter filtered it pulled the search field and grid down under the caret. */
 .hc-emoji.ui-popover {
+  --hc-emoji-popover-height: 340px;
   width: 324px;
-  max-height: 340px;
+  height: var(--hc-emoji-popover-height);
+  max-height: var(--hc-emoji-popover-height);
   display: flex;
   flex-direction: column;
   padding: var(--ds-space-2);
@@ -614,7 +618,10 @@ body,
 }
 .hc-emoji-grid {
   display: grid;
+  flex: 1;
+  min-height: 0;
   grid-template-columns: repeat(8, 1fr);
+  align-content: start;
   gap: var(--grid-half-step);
   margin-top: var(--ds-space-2);
   overflow-y: auto;