@kentcdodds/invisible-software

Invisible software

Three pages under one package app:

• / links to the other two.
• /demo is the phone-only, step-through product demo described below. The step lives in the URL hash, e.g. /demo#5.5.
• /graph is a chart, "AI agents keep getting better at engineering work": six agent benchmarks (SWE-bench Verified, Terminal-Bench 2.0, OSWorld, Aider Polyglot, Cybench, TheAgentCompany) as faded best-score-to-date lines, with their smoothed median in bold (about 14% in June 2024 to 84% in June 2026). Data: Epoch AI benchmark data and METR, kept in data/ with data/make_trend.py.

Intent

Give Kent a presentable, offline-safe pair of visuals for talks about invisible software: a phone demo that shows the experience with no architecture, and a chart that shows agents improving fast.

The phone demo

A step-through product demo that shows only a phone. Every arrow press plays the next moment on the phone and then holds it, so a presenter can talk over each one.

The story

• Grok Bot pings Victoria (slide 2). Grok Bot notices open chairs and sends Victoria, a barber, a link to her new client-finder app.
• Victoria's app (slide 3). Her client finder at victoria.kody.run finds who's due for a cut, lets her edit a message template and send it in one tap, and shows paid deposits as they arrive.
• Max wants what Victoria has (slide 5). Max, another barber, asks ChatGPT for an app like Victoria's. It opens on his own site, schedule.maxbarber.example.
• Two wishes, one app (slide 6). In the Grok Bot app, Grok Bot brings in Max's Book now link, keeps Victoria's deposits, and posts a link to her client booking page.
• Max switches assistants (slide 7). Max now uses Muse, a different assistant. It can't change his scheduler because it was built in ChatGPT, and he'd have to rebuild it, integrations and all.

The photos of Victoria, Max and their clients are part of the demo.

How steps work

Each press plays one human action, such as a tap, a typed or sent message, or opening a link. Everything the phone does next plays by itself with natural timing: Grok Bot and ChatGPT replying, apps opening, notifications arriving. The demo then waits for the next press. The exceptions are the scene openers, 2.1, 6.1 and 7.1, where a press brings in a new scene (a notification, or Max's empty Muse chat). Moving between slides holds the last frame for a beat, then cross-fades.

Pressing next while a step is still playing settles it at its end and starts the next one. Back goes to the previous step's settled end.

Controls

Link to a step

The URL hash follows the demo:

• #3.2 is slide 3, step 2. Steps count from 1.
• A link always lands on the settled end of that step's automatic sequence.
• #6 opens the first step of slide 6.
• No hash, or one the demo doesn't recognize, opens on the first frame.

A link opens held on that step. Editing the hash jumps there too. Each step is added to browser history, so Back and Forward move between steps.

There are 21 steps, and every one visibly changes the phone.

Run it locally

npm run build    # compose the page into app/assets.generated.ts
npm run serve    # http://localhost:4310/packages/invisible-software/ (/demo, /graph)
npm run verify   # headless step-through check, screenshots in verify-shots/