Add a cloud agents section to the desktop page

[cleo-pleurodon]

Changes

The /desktop page covers local tasks and worktrees, but it says almost nothing about cloud runs. This PR adds a "Seven cloud agents, one closed laptop" box that pitches cloud agents and the three settings behind them: the environment a sandbox boots with, the access rules and secrets it gets, and a base image that removes the install step from every run.

Why: cloud runs are one of the strongest reasons to use PostHog Desktop, and the page did not sell them. You can start a set of agents, close the laptop, and find the branches finished when you come back. The box also points at the environments docs, so a reader can set one up.

It uses the same treatment as "Part of the self-driving loop" (sticker, heading, copy, one button, artwork) and sits between the model list and the MCP marketplace, so the two boxes do not touch.

🗺️ PR tour

One file changes: src/pages/desktop.tsx.

1. The three settings

src/pages/desktop.tsx:1838 adds cloudEnvironmentItems: an icon, a label, and one line each for environments, access, and base images. It has the same shape as skillsCalloutItems directly above it, and the lines are the same length as that section's.

2. The box

src/pages/desktop.tsx:1854 adds CloudAgentsCallout, built from the same parts as InboxCallout.

The layout keeps the box short. A top row holds the copy and the artwork side by side, then the three settings run across the full width as a 3-up grid, then the button. An earlier revision put the settings in a single column beside the artwork, which made the box about three times taller.

The artwork is the Katy Perry hog, with a cloud SVG on each side. Both are pointer-events-none and aria-hidden. They sit in the artwork column, not the box, because at the box level a cloud landed behind the heading in a narrow window.

3. Where it renders

src/pages/desktop.tsx:2530 puts <CloudAgentsCallout /> between <SupportedLLMs /> and <MCPMarketplace />.

4. Mechanical

src/pages/desktop.tsx:53 adds StickerCloud to the existing sticker import. Mechanical only.

🔍 Reviewer's guide

Testing done

Check	Command / method	Result
Formatting	npx prettier --write src/pages/desktop.tsx	Formatted, no further changes
Lint	npx eslint src/pages/desktop.tsx	0 errors, 3 warnings, all pre-existing and outside this diff
Types	npx tsc --noEmit	No errors in desktop.tsx
Dev server	pnpm start, loaded /desktop	Box renders, button links to the environments doc
Console errors	Captured the console on both sides of a git stash, compared the sets	Identical, no new errors
Window widths	Chrome 148 headless at 640px and 1440px, light and dark	Layout reflows, no overflow, see the grid below

Not tested: a production build (pnpm build), which the guidance for this repo says to leave to CI.

One note on the captures: the bundled puppeteer Chromium is from 2022 and has no container-query support, so it renders every @sm: and @2xl: layout as the fallback. The grid below comes from the Playwright Chrome 148 in this environment instead, which paints the container queries correctly.

Screenshots

Cloud agents box on /desktop

The before column shows the same scroll position, where the box now lands.

State	Before	After
Light, narrow window
Light, wide window
Dark, narrow window
Dark, wide window

Nothing in the box animates, so there is no GIF.

What to look at

1. src/pages/desktop.tsx:1838-1852 — the product claims. The copy says an environment holds repos, hosts, and a base image, that keys stay encrypted, and that images are built once and reused. The environments doc does not describe base images yet, so please confirm the wording against the product before merge. Wrong copy on a marketing page is the worst failure here.
2. src/pages/desktop.tsx:1862 — "Seven cloud agents, one closed laptop". Seven is below the nine-agent limit the Command Center tab quotes, but the number and the "Baby, you're a firewall" caption are both judgment calls. Say so if you want either one changed.
3. Placement. The box sits between the model list and the MCP marketplace, away from the self-driving box, which uses the same treatment. Move it if the page reads better with cloud next to the task modes.

Checklist

• I've read the docs and/or content style guides.
• Words are spelled using American English
• Use relative URLs for internal links
• I've checked the pages added or changed in the Vercel preview build
• If I moved a page, I added a redirect in vercel.json (no pages moved)

---

Created with PostHog from a Slack thread

[github-actions]

Deploy preview

Status	Details	Updated (UTC)
🟢 Ready	View preview	Sep 14, 2026 09:29PM

[github-actions]

Bundle report

Total JS (gzip)

8.78 MiB (+0.4 KiB / +0.0%)

Eager graph (modules shipped in each entrypoint's initial chunks)

Entrypoint	Eager size	Budget	Modules
✅ app	18.51 MiB (+5.2 KiB / +0.0%)	report-only	2062

Largest modules in the app closure

Module	Size
./src/data/mcp-tools.json	1137.8 KiB
css ./node_modules/.pnpm/css-loader@5.2.7_webpack@5.101.3/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[1]!./node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.5.6_webpack@5.101.3/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[2]!./src/styles/global.css	774.2 KiB
./src/components/Stickers/Stickers.tsx	696.4 KiB
./node_modules/.pnpm/@radix-ui+react-icons@1.3.2_react@18.3.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js	481.4 KiB
./node_modules/.pnpm/@posthog+brand@0.8.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/x-ray.mjs	480.8 KiB
./node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.js + 29 modules	395.1 KiB
./node_modules/.pnpm/@posthog+brand@0.8.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/im-the-driver.mjs	385.7 KiB
./src/hooks/useCustomers.tsx + 55 modules	370.0 KiB
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js	354.8 KiB
./node_modules/.pnpm/react-markdown@8.0.7_@types+react@16.14.66_react@18.3.1/node_modules/react-markdown/lib/react-markdown.js + 88 modules	351.4 KiB
./src/components/ProductComparisonTable/index.tsx + 126 modules	305.7 KiB
./node_modules/.pnpm/cloudinary-core@2.14.0_lodash@4.17.21/node_modules/cloudinary-core/cloudinary-core.js	281.9 KiB
./node_modules/.pnpm/@posthog+brand@0.8.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/doll-house.mjs	281.7 KiB
./node_modules/.pnpm/@posthog+brand@0.8.0_react@18.3.1/node_modules/@posthog/brand/dist/generated/hoggies/svg/director.mjs	275.6 KiB
./src/components/SearchUI/index.tsx + 87 modules	273.7 KiB

---

Eager-graph budgets are report-only until a baseline is established. Sizes are gzip of public/**/*.js; eager size is webpack module source bytes for the modules actually shipped in the entrypoint's initial chunks (post-tree-shake).

[charlescook-ph]

Nice! You could even move this higher up the page if you want, but in any case LGTM