@kentcdodds/invisible-software

Invisible software: a phone-only step-through demo plus a chart of AI agent benchmark progress.

README.md

84 lines · 4.9 KB · Markdown

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.

Step	Human action
`2.1`	(Opener) Grok Bot's notification arrives on Victoria's phone
`2.2`	Victoria taps the notification and types "Yes please!", which sends right away; Grok Bot replies with a link to her app
`2.3`	She opens the link, and her app loads
`3.1`	She taps "Due for a cut", and the due clients are selected
`3.2`	She taps the message template and edits it
`3.3`	She taps Send, and bookings and deposits roll in
`5.1`	Max types his request to ChatGPT and sends it, and ChatGPT replies with his app
`5.2`	Max opens the link to his app at schedule.maxbarber.example
`5.3`	He taps Book now, and the time picker fades in
`5.4`	He picks a time
`5.5`	He taps Confirm, and it rests on "Booked for Thursday 2:00"
`6.1`	(Opener) Victoria gets a Grok Bot notification
`6.2`	She taps the notification
`6.3`	She taps Yes, and Grok Bot works and posts a link
`6.4`	She opens the link, and her booking page loads
`6.5`	She taps Book now
`6.6`	She picks a time
`6.7`	She taps Pay, and the booking is confirmed
`7.1`	(Opener) Later, Max's empty Muse chat
`7.2`	He asks Muse to change his booking scheduler, and Muse says it can't, because it was built in ChatGPT
`7.3`	He types ☹️ and doesn't send it. The demo ends here

Controls

Action	Keys
Next step (plays it and its automatic follow-up, then holds)	Right Arrow, Space, Page Down, Enter, or a plain click
Back one step	Left Arrow, Page Up, or Backspace
Jump to the start / end	Home / End
Toggle fullscreen	F

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/