Keystack · tenant app · matched to the live staging build

Keystack, as a new tenant actually finds it.

Every screen here was rebuilt against keystack-web-staging.vercel.app — I signed up, walked all seven surfaces, and copied the real labels, states and numbers out of the running app. Not the ideal product, not the old mocks. Where the build is blocked, the mock is blocked.

The honest first-run story is short: you sign up, you hire, and then you hit two walls. Those walls are the majority of a new tenant's experience right now, so they are designed here as first-class screens rather than error states.

The two walls
Wall 1 — pending_approval

Every agent you hire lands in pending_approval. Only an EmuBrain operator can clear it, on emubrain.com — a surface the workspace cannot reach. Nothing in the tenant app moves it.

Wall 2 — provider_not_connected

A brand-new org has both providers disconnected. Four of the five agents need Anthropic, one needs OpenAI. Chat fails until the right key is connected. This wall the workspace can clear themselves.

The flow, screen by screen
09 · WAR ROOM · THE 90% SURFACE

War Room — faces on one side, chat on the otherthe same flip as the EmuBrain wall

Every agent on one wall as a Tavus video tile. Tap a face and the tile turns around into the conversation; Flip all turns the whole wall at once. Agents without an approved video profile fall back to initials rather than a broken frame, and a tile that can't talk says why on its back instead of opening a dead composer. This replaces the standalone Chat page.

Open →
01 · SIGN UP

Sign uplight theme — the real signed-out screen

The five fields staging actually requires: organisation name, your name, email, password, confirm. Any one missing and it rejects. You are returned signed in immediately — email verification does not block use. Toggle the rejected state to see the validation.

Open →
02 · TEAM · WHERE YOU LAND

Team — now the War Roomfaces on one side, chat on the other

Service OK, 5 available agents, 0 hired, 0 work orders, and "No agents hired yet." Both walls are stated here up front, because a new owner should learn what stands between them and a working agent on the page they land on — not three clicks later.

Open →
03 · CATALOGUE · HIRE → WALL 1

Catalogue — the five archetypeshire one and watch the first wall appear

Exactly the five staging serves, with their real providers: Project Coordinator, Code Reviewer / QA, Researcher and Content & Marketing on anthropic; Software Engineer on openai. Press Hire and the agent lands in pending_approval, with the operator surface named.

Open →
08 · ACCOUNT · WALL 2

AI connectionsboth providers not_connected

The second wall, and the one the workspace can actually clear. Toggle "Anthropic connected" to see which agents come unblocked — and which still don't.

Open →
04 · TASKS

Tasks — the EmuBrain board, portedseven stages, holder on every item

The real form — title, request, priority, agent. The Agent select has nothing in it but "Unassigned", because nothing is hired or approved yet.

Open →
06 · GALLERY

Galleryoutputs

Nothing can appear here until a work order is completed by an approved agent — which needs both walls cleared first.

Open →
Round 4 — the attachments drawer

Agents hand you things; this is where they land

Ported from EmuBrain's task drawer (TaskRunPlanDrawer) rather than rebuilt — same geometry (min(720px, 100vw − 60px), full height, pinned head over a scrolling body), the same evidence-card grid grouped into sections, and the same lightbox so an image opens in place instead of navigating away.

It's shell furniture, not a page. The button sits in the shell corner on every screen and opens the same drawer, because an agent can attach something while you're anywhere. Esc closes; if the lightbox is open, Esc closes that first and leaves the drawer up.

It carries anything with a URL — images, notes, lessons, documents, a Google Doc, a Notion page, a GitHub PR. Cards that live outside Keystack say so and are marked external ↗, so it's always clear when a tap is about to leave the product.

How it differs from Files: Files is the full library you go to; the drawer is the recent view you pull open without losing your place. Same objects, two reaches.

Round 3 — earlier this pass

What changed

Team is the War Room. The stats that justified a separate Team page are now a strip above the wall, so the landing surface is the one you'll actually live in.

Tasks is the EmuBrain board, ported. Same seven stages (Captured → Ready → Delivery queued → Started → Waiting → Review → Done) and the same holder rule — every item always has exactly one holder, so "who has this right now" is never ambiguous. Built to port, not to be rebuilt.

Chat is gone and Gallery went with it. Chat lives in the War Room, so the page had no job. Rather than add a files page next to Gallery, I merged them: Files is one Drive-style list holding both directions — what you upload for the agents, and what they produce. Two lists of files would have meant two places to look for the same thing.

Blossom. A proper light-pink theme with a sun low behind the workspace, added alongside Rainbow rather than replacing it — so the vivid dark option is still there if you want it.

Earlier round — Khoa's feedback applied

What changed

All family / child language is gone. Keystack reads as a product for companies and professionals now — workspace, team, members. The separate Children surface is removed entirely and folded into Team, because a team can be a company, a family, or anything else; it doesn't need its own noun.

Agents have faces. The live build crops the Tavus stills into a short band, which is why you only saw eyebrows. They're now shown at their real 16:9 with the face in frame, on both the catalogue card and the War Room tile, with a TAVUS VIDEO badge — and an honest NO VIDEO PROFILE fallback for the two agents that don't have one yet.

The War Room is the centre. Built as the primary surface rather than a page you navigate to, ported from the real EmuBrain wall: a 3D tile flip, per tile or all at once.

The signed-out navbar is gone. It carried a wordmark, a tagline and a "Sign in required" status on a page that is visibly a sign-in page. It was telling you what you could already see.

Themes are token sets, not skins. Five of them — Keystack, Sand, Forest, Rainbow, Mist — switchable from Account. Every surface already reads from the same tokens, so a theme costs nothing per screen. Status colours are deliberately excluded: pending, blocked and connected must mean the same thing in every theme, so they never become decorative.

How this was grounded

Walked, not guessed

I opened staging behind the 2026 gate, created a real account, and toured all seven surfaces in the running app: Team, Catalogue, Tasks, People, Gallery, Chat, Account. Copy, field labels, empty-state sentences, status wording and the stat numbers are taken from what the app rendered, not from an earlier mock or a spec.

Two things worth knowing about the current build's own presentation, found while walking it: the signed-out screens are light and the signed-in app is dark — the body still computes the light token set while the shell paints dark, which is the theme-token mismatch flagged in the earlier visual audit. And on the live catalogue, all five agent cards reuse the same two stock portraits (three share one, two share the other), which reads as a bug rather than a roster. I've used neutral monograms here instead of repeating that.

Flags