What the agent does
The agent reads the shell before it resizes anything, because this app is already a full-viewport layout rather than a document that scrolls the window. nuxt/movies is a Nuxt app: package.json sets the runtime engine to Node ^24 and pnpm 11.1.2, and nuxt.config.ts uses the nightly nuxt 4 line (the dependency is nuxt-nightly@4.6.0-29812804.e29b3dd9) with future.compatibilityVersion 5. Modules in the config are @vueuse/nuxt, @unocss/nuxt, @nuxt/image, @nuxtjs/i18n and @nuxtjs/html-validator. @nuxtjs/color-mode is a dependency and is not in that modules list. The public API base is https://movies-proxy.vercel.app. Scripts include dev, test:unit (vitest) and test:e2e (playwright test). UnoCSS is unocss.config.ts: presetUno, attributify, icons, primary #40c1ad, and the font DM Sans.
app.vue builds a grid, .app-shell, that is rows of content plus an auto nav below the lg breakpoint and columns from lg up. html, body and #__nuxt are height 100% with overflow hidden, background #111 and color-scheme dark. The scroller is #app-scroller. NavBar.vue is a row of four NuxtLinks (home, /movie, /tv, /search) with text-2xl icons, py5, and a media query at max-width 1023.9px that pads for the safe area. Uno's lg breakpoint is 1024px, so both 375 and 414 use the bottom nav, not the side nav. The hero in media/Hero.vue is aspect-ratio-3/2 below lg, with px-10 on the title block, text-3xl on the h1, and the trailer button is display-none lg:block, so a phone never sees it. Vote counts are hidden md:block, and md starts at 768, so they are hidden at both phone widths.
Pages to open are app/pages/index.vue (a movie hero plus carousels), /movie and /tv, a title at /[type]/[id], search, a person at /person/[id], and a genre list at /genre/[no]/movie. The agent sets the sandbox browser to 375 and to 414. It looks for horizontal scroll inside #app-scroller, a hero title clipped by line-clamp-2, carousels that paint past the shell, and nav icons whose box is under 44px. py5 is 1.25rem of vertical padding on the bar, not a guarantee on the icon hit area. Fixes use the Uno utilities and shortcuts already in the components (lt-lg, the n-tab shortcut, border-base). The agent does not add a second stylesheet, and it does not turn on color-mode, because the shell is already dark.
Screenshots of each page, before and after, at both widths, are posted before the pull request. A designer can say the hero's px-10 eats the title at 375, or that the trailer control should be visible. The follow-up names the component. The agent edits Hero.vue or NavBar.vue, reloads those two widths, and then opens the pull request. vitest is the unit check. Playwright is test:e2e, and the prompt asks for it when the markup the spec clicks has moved.
Start it with one API call
POST https://api.prix.dev/o/{org}/sessions with this body:
{
"agent": "codex",
"input": "Open every main page at 375 and 414 pixels: home, /movie, /tv, a title page, search, a person and a genre list. The shell in app.vue is a fixed viewport with overflow hidden, and NavBar sits at the bottom below the lg breakpoint (1024px). Fix horizontal scroll inside #app-scroller, clipped titles and tap targets under 44 pixels, using the UnoCSS utilities already in the components. Do not add a new stylesheet and do not enable @nuxtjs/color-mode. The trailer button in media/Hero.vue is hidden below lg; do not drop it on desktop. Screenshot each page before and after at both widths, apply follow-ups, run pnpm test:unit, and open a pull request with the screenshots. Node is 24 and the package manager is pnpm.",
"resources": [
{
"url": "https://github.com/your-org/your-app"
}
]
}- Get an API key. In the console, open Settings, then API keys, and create a key for your org. Send it in the Authorization header as a Bearer token.
- Send the request. POST the body in request.json to https://api.prix.dev/o/{org}/sessions, with your repository as the resources URL. The run starts in its own cloud sandbox.
- Read what came back. Follow the run on its live stream or wait for the run.completed webhook, then read the result and its trajectory.
What comes back
What comes back is a pull request on the Vue components and, if a shortcut was added, unocss.config.ts. The description shows before and after at 375 and 414 for the home hero, a title, search, a person and the bottom nav. It states that the desktop trailer button and the dark shell were left as they were. The pictures are session artifacts, each URL valid for an hour from the read.
A reviewer looks for a fix that only exists at one width. 375 and 414 are both below sm (640) and far below lg, so a sm: rule does not separate them; a fix for a too-wide hero has to be checked at both. They check the nav icons are at least 44px and that the safe-area padding in NavBar.vue is still there. They read the vitest output in the transcript.
Designer notes are follow-ups on the same session. The events stream shows the browser. POST /o/{org}/sessions/{id}/messages after the turn ends wakes the parked sandbox. During the turn the answer is 409 TURN_ACTIVE, and the console holds the message. The sandbox keeps the dev server's state for 7 idle days.
Run it on every layout report
Each layout report is a session on this repository. The designer watches the pair of widths and sends a follow-up that names a component. Org members can read the run. The browser lease is five minutes, one person at a time, and the starter or an org admin sends the steering messages.
A webhook on the key delivers run.completed or run.failed per turn, with session_url. Queue the reports: the key accepts max_concurrent runs, 4 by default, and returns 429 after that. The proxy base URL is configuration in nuxt.config.ts, not a secret the page should invent.
The use case this job follows, with its automation and trigger: Steer a run as a team.
Why run it on Rush?
This layout hides overflow on the document and scrolls an inner div, so a phone bug is content wider than #app-scroller, which a casual resize of the window often misses. The sandbox sets the two widths, screenshots the scroller, and stays available while a designer points at Hero.vue. Nobody installs pnpm 11 and the Nuxt nightly on a laptop to have that conversation.
The pull request is the proof a reviewer merges, with both widths attached. The transcript has the unit-test run and the follow-up. A second title, or a second app, is a second sandbox and does not share the branch.
Frequently asked questions
The app is already dark. Will the agent restyle it?
No. app.vue sets background #111 and color-scheme dark, and the prompt leaves that alone. @nuxtjs/color-mode is installed but not listed in nuxt.config.ts modules, and this job does not add it. The changes are width, clipping and target size in the existing utilities.
Why is the trailer missing on a phone?
media/Hero.vue puts the play control in a block that is display-none lg:block, so it is hidden below 1024px. That is a product choice, not an overflow. The agent does not delete it from the desktop layout. A follow-up can ask for a phone-sized control, and that becomes part of the same pull request.
Which package manager and Node version does it use?
package.json devEngines ask for Node ^24 and pnpm 11.1.2. The agent uses those. The unit script is pnpm test:unit, which runs vitest. End-to-end is pnpm test:e2e. The request asks for the unit run. Add the e2e script to the prompt when the markup a spec clicks has moved.
Can the designer point at one component without restarting?
Yes. A follow-up names Hero.vue or NavBar.vue and the width. The sandbox is parked between turns, with the branch intact, for 7 idle days. The starter or an org admin sends it. A message sent while a turn is running gets 409 TURN_ACTIVE.