-
I asked my coding agent for one small thing:
-
give the top bar a bit more room.
-
It changed two lines of CSS.
-
Looks fine, right?
-
So the agent runs selfie review.
-
That renders every story in our Storybook,
-
124 of them, in a pinned container,
-
right here on this MacBook Air.
-
Twenty-five seconds, with no cloud and no bill per image.
-
What comes back is one JSON document and an exit code,
-
so any agent can read it.
-
Exit 1, because that two-line
-
change touched all 124 stories.
-
Now it’s my turn.
-
The selfie ui command opens the same review for a person:
-
124 changed, and nothing decided yet.
-
That’s a lot to look at,
-
but Selfie works out what kind of change each one is.
-
48 of them only moved or gained spacing,
-
with nothing new in the image.
-
Here’s one.
-
Yellow is spacing that grew.
-
Press F, and the two images flip in place,
-
so you can see exactly what moved.
-
That looks right, so I approve those 48 together.
-
But what about dark mode?
-
I search for dark, and there it is:
-
85,000 changed pixels.
-
The agent hard-coded a light color,
-
and the top bar went white.
-
I don’t have to describe where.
-
I click the change, write what’s wrong,
-
and send it to the agent, which has been waiting.
-
The agent gets my words, the story, the exact box,
-
and a picture of what I saw.
-
It puts the theme’s color back,
-
renders again, and answers my note.
-
Selfie tells me there’s a newer batch,
-
and the reply is right there on the story.
-
The bar is dark again, and 85,000
-
changed pixels are down to 13.
-
I resolve the note, and approve the rest.
-
The 48 I already approved are simply unchanged now,
-
because an approval follows your Git history.
-
The agent commits and reviews once more.
-
It’s the exact same build, so nothing renders.
-
A third of a second, and exit 0.
-
Push it, and Selfie renders in CI
-
and puts a status on the commit.
-
Click through, and it’s the same review, in the cloud.
-
Selfie works with any coding agent.
-
If you have a Storybook,
-
start locally today at selfie.dev,
-
and join the waitlist for the cloud.
+
I asked my coding agent to give
+
the top bar a bit more room.
+
Two lines of CSS.
+
Then it runs selfie render.
+
That renders all 142 stories in a pinned container,
+
right here on this MacBook Air, in under 30 seconds,
+
with no cloud and no bill per image.
+
Now it’s my turn.
+
The selfie ui command shows me what changed:
+
those two lines touched every story.
+
But Selfie has already found the
+
changes repeated across them.
+
I look through them, accept them,
+
and 63 of the 142 are done.
+
But what about dark mode?
+
I search for dark, and there it is:
+
85,000 changed pixels.
+
Press F, and the images swap in place.
+
The top bar went white.
+
Selfie can tell me exactly which
+
pixels changed, but not why.
+
The commit is on GitHub,
+
so I open the same story in the cloud,
+
and ask Muse Spark what caused it.
+
It reads the before, the after, the diff,
+
and the code, and it finds the line.
+
Then it spots what I never asked for:
+
a fixed light color, where the theme’s color used to be.
+
It even tells me to check dark mode.
+
So back in my review, I click the change, write a note,
+
and send it to the agent, which has been waiting.
+
It gets my words, the exact box,
+
and a picture of what I saw.
+
It puts the theme’s color back,
+
renders again, and answers my note.
+
The bar is dark again, and 85,000
+
changed pixels are down to 13.
+
I approve the rest, and the agent
+
commits and reviews once more.
+
It’s the exact same build, so nothing renders.
+
Under half a second, and exit 0.
+
Selfie works with any coding agent.
+
If you have a Storybook,
+
you can start locally today,
+
and the link’s in the description.
|
+| From Storybook to Chromatic to Selfie: why snapshot testing has to change for coding agents. | The real app: two lines of CSS touch all 142 stories, and Muse Spark finds what broke dark mode. |
You can also look around the hosted review pages without signing in: here's [Selfie reviewing itself](https://hackathon.selfie.dev/diffplug/selfie-hackathon).
## What it does
- **Fits an agent's loop.** `selfie review` prints one JSON document naming the diff images, with an exit code that says whether anything blocks.
-- **Runs where the agent runs.** On an M4 MacBook Air, Selfie's own 124 stories render in about 25 seconds, with no cloud and no bill per image. A larger Storybook of 541 stories takes about 70 seconds. Reviewing a build that's already rendered takes under half a second.
-- **Says what kind of change it is.** Selfie separates what moved or gained spacing from what really changed, so you can approve the harmless ones together.
+- **Runs where the agent runs.** On an M4 MacBook Air, Selfie's own Storybook of about 140 stories renders in under 30 seconds, with no cloud and no bill per image. A larger Storybook of 541 stories takes about 70 seconds. Reviewing a build that's already rendered takes under half a second.
+- **Says what kind of change it is.** Selfie separates what moved or gained spacing from what really changed, and finds one change repeated across stories, so you can accept it once.
+- **Tells you why, with Muse Spark.** On a changed story in the cloud, ask what caused it. Muse Spark reads the before, after, and diff images and the code from GitHub, and it can point out what nobody asked for.
- **Lets you point at the problem.** Write a note on an image, and your agent gets your words, the exact box, and a picture of what you saw. It answers on the same note, and you flip between before and after.
- **Follows Git.** An approval counts wherever history reaches it, so it isn't repeated after a commit, a rebase, or a merge.
-- **Gives the same pixels everywhere.** Stories render in a pinned container, and `selfie flakes` finds any that still vary between renders.
+- **Keeps the pixels reproducible.** Stories render in a container pinned by digest, and `selfie flakes` finds any that still vary between renders.
- **Reports on every commit.** A GitHub Action renders each push, and the commit gets a `selfie` status that links to its review.
## Quickstart
@@ -47,7 +50,7 @@ You'll need Node 26 or later, pnpm, and Docker. Selfie isn't on npm yet, which i
**To work together,** a person leaves notes on any story in `selfie ui`, and either copies them into any agent, or presses Send while the agent runs `selfie agent-await-feedback`. The agent acts on them, runs `selfie render`, and answers each with `selfie reply`. The person flips against the image they commented on, and resolves the note or answers back.
-**In the cloud,** a GitHub Action renders every pushed branch and uploads its batch. Each commit gets a `selfie` status: red if a story failed or a person rejected a change, yellow if a change is undecided, and green if everything matches what's approved.
+**In the cloud,** a GitHub Action renders every pushed branch and uploads its batch. Each commit gets a `selfie` status: red if a story failed or a person rejected a change, yellow if a change is undecided, and green if everything matches what's approved. On a changed story's page, anyone can ask Muse Spark about the change.
A project needs a `selfie.config.json` at its Git top level, which says where its built Storybook is and how to build it, and may also set its environment, init script, and how close changed hunks join.
@@ -65,6 +68,7 @@ From a checkout, `pnpm selfie