co-presence

Have a go first. It’s the real component, replaying a pretend incident.

Checkout is slow

#inc-2291 · a replay

The war room needs JavaScript to run the real component.

The real co-presence, v0.1.0 straight from npm, as the strip above a war room’s message box.

See the full war room, on a phone or a desktop

Backstory

A skill test that grew a room

The first real test of craft-component: how far does it take me on an actual build?
Something small, yet unique. Arc’s Presence stack was the spark, but I wanted it for the multiplayer agent space.
I strongly feel agents talking to us, and to each other, to get a goal done will soon be everywhere. Hence co-presence: present together, person or agent.

Presence stack

Who is here
Faces and names
The spark

co-presencethe test

Who is on it, people and agents
What each is doing right now
Anything waiting on you, first

Same faces. A different question: who’s on it, and what needs you?

Design call · placement

Earn the space, or leave it out

First playground: the strip on top of a shared doc. I found it overkill, since a chat trace already shows streamed work.
The placement was wrong, not the component. Presence earns its place with more agents than you can read, more than one person, or your eyes on the doc.
An incident war room hits all three. That’s where the idea came from.

Just you and one agent

The thread already says it all
The strip only repeats it
So leave it out

A war roomearns it

More agents than you can read
More than one person
Your eyes on the doc, not the thread

The README says when to leave it out, too.

Process

The look is mine to call

“Go with your recommendations” on twelve calls got read as every gate. The agent picked the sketch direction itself.
The sketch is where I judge the look. The skill now names the gates that are never handed over.

1 Brief Scope, name, the one story gate
2 Plan The what, then the how gate
3 Sketch Directions side by side my gate, always
4 Milestones Model, element, integration gate
5 Playground and demo Played with until I freeze it my gate, always
6 Audits Only on the frozen version gate
7 Review, simplify Fresh eyes on what ships gate
8 Release On my go, every time my gate, always

“Go with your recommendations” answers the calls on the table. Not the gates after them.

The agent proposes, builds and verifies. The look is mine to call.

Process

Play first, audit after

Five audits ran before I’d played with it. Every change after that meant auditing again.
New order: play, freeze, then audit. Audits make it smoother, not different.

Built first · 15 Oct · rounds 1 to 14

Rounds 1 to 5

Brief, plan, sketch

Arc’s Presence stack taken apart, twelve calls on what it is, two directions side by side
Rounds 6 to 9

The build

Model, element and integration, a fake network that reorders and drops, then a playground
Rounds 10 to 14

Five audits

All before I’d played with it

Played with · 16 Oct · rounds 15 to 23

Round 15

Play first, audit after

My process change, written into the skill
Rounds 16 to 19

From a trace to a war room

The overkill call, Arc’s look, a chat, faces for the agents
Rounds 22 and 23

Green for working, a quieter host

A plain playground and a demo that tells one story

Smoothed and shipped · rounds 20 to 26

Rounds 20, 24 and 25

Audits on the frozen version

Five skills at once, twice, then break-ui on the final state
Round 26

Review, simplify, release

A reviewer that wrote none of it, then v0.1.0 on npm

Grey ran ahead of me. Coral is where I played with it, and where most of the calls got made.

Design call · taste

The host is quieter than the component

The component looked good. The pages around it looked too vibe-coded.
So: a quiet host, a plain playground apart, and a rule in the skill: the host never out-talks the thing it hosts.

Eleven controls in the header
A three-colour logo, blue and violet tags
The thread at 9:32, the doc at 14:02

Same component. The page around it stopped talking over it.

Design call · colour

Each mark means one thing

Grey meant working, so the busiest agents looked the quietest.
Four directions rendered side by side, not a third guess in prose. I kept the colours and made working green.

Green Doing something: working, editing, commenting
Amber Waiting on someone. On you, it reads “Needs you”
A red square Failed. Square, so it differs by shape, not hue alone
Nothing Just here

Before · round 21

A grey dot for working, a black pill for editing. The busiest agents looked the quietest.

Each mark means one thing, so nothing has to be learnt twice.

Design details

Quiet until it needs you

By a message box all day, it can’t be noisy. Motion only says what changed.
Timings come from reading, not taste: a 300ms agent stays 1.2s to be seen, and the status line holds 2s for one full read.

Motion

Quiet joins 0.85 → 1 · 240ms Agents arrive in bursts. A pop for each is noise.
Keys move instantly 0ms on Tab and arrows Motion on keyboard actions slows the hands.
Hover intent 120ms A pointer crossing to the doc doesn’t fan the stack.

Needs you skips the queue 2s hold, skipped The hold is for one full read. It never delays bad news.
The name gives way first name ≤ 40% What you wait on wraps. It’s never cut.
Offline in words “Reconnecting…” A dim alone was 2:1, and invisible when collapsed.

Access & performance

Failed is square 2px corners In light mode, amber and red differ by hue alone.
Announcements batched 1s batch A burst of joins reads as one. Needs you, at once.
Roster renders only when open 41ms → 4.7ms Per event, with 1,284 actors.

Every value has a written reason. If it doesn’t, it’s a guess, and guesses get fixed.

With agents

The build was a war room too

Every round: my brief, options with a recommendation, my call, then a build verified before I saw it.
Around it, a crew: audits as parallel sub-agents, each report frozen before a fix. A helper kept to the playground, a reviewer wrote none of it, and another session shared the repo.

hover the faces, or click +N to meet the crew

Me, Claude and a crew of agents, in the component they were building. Not one moment, the whole build.

Craft

No corners cut

Under the strip, a pure model: one snapshot, six event types, late and duplicate events dropped, and the element owns the clock.
Keyboard all the way, batched announcements, forced colours, reduced motion, right-to-left.
Every claim checked: a replay caught what 100% coverage missed, and a fake network caught a race.

15.3 KB Gzipped, zero dependencies Any framework or none. Guarded on every commit
173 Tests, proven to bite Bugs put in on purpose, a replay, a fake network
1,284 Actors on the worst-case page Roster render 41ms → 4.7ms. 320px, 200% zoom
16 Audit runs, from five skills Keyboard, forced colours, reduced motion, RTL

The skill

A test that sharpened the skill

Every step logged a note: 24 of them, each a step, what happened and a fix.
Two rewrites of craft-component, on 15 and 16 Oct. More rounds than I expected, all for the better.

“Go with your recommendations” stretched over every gate. The agent picked the sketch itself.

Now in the skillThose words answer the calls on the table. The sketch, the playground and the demo are never handed over.
The audits ran before I’d played with it, so my feedback meant auditing again.

Now in the skillPlay, freeze, then audit. Audits polish the frozen version, they don’t redesign it.
One page did the demo’s job and the playground’s, with eleven controls in the header.

Now in the skillTwo pages, one engine: a plain playground and a story demo.
“Looks too vibe-coded.” The page around the component used more hues than the component.

Now in the skillThe host is quieter than the component, and a slop check runs before every hand-over.

24 notes from one build. The next component starts where this one ended.

Misses & lessons

What I’d tell day-zero me

MissSaid “go with your recommendations” to twelve calls. The agent took it as every gate up to the playground, the sketch too.

LessonDelegate calls, not gates. The look stays with me.
MissLet five audits run before I’d played with it. Every change I asked for after that meant auditing again.

LessonPlay, freeze, then audit. Audits polish what’s settled.
MissTrusted 100% coverage and every planted bug caught. An agent that had already left still took over the strip’s line.

LessonWatch it run. A replay of a real scenario sees what tests don’t.
MissTested the source for 25 rounds. The npm build would have shipped with no colours at all.

LessonTest what ships. Build it, install it, then look.

What’s next

A skill to wire it in

agent-clarifier has ask-clarifier. co-presence now has show-co-presence: when to show it, how to feed it, and how agents say what they’re doing.
Every build tests the skill, and every miss becomes a rule.

The skills

show-co-presenceHow to use co-presence. When it earns its place, feeding it events, and a set_activity tool so agents say what they’re doing.
craft-componentThe framework. Brief, plan, sketch, milestones, playground and demo, audits, release on a go.

See all the skills

For the component itselfA real screen-reader pass, and a real phone.

Show who’s on it, and what needs you. That’s the strip. Keep the calls, share the legwork, and let every miss sharpen the skill. That’s the framework.

npm install @marigameo/co-presence npm GitHub War room Playground

Every round, with my feedback in my words and the calls, is in the journal on GitHub

At a glance

The aim

My part

Considered