Case study01 / 11

Atrium

One canvas for everything a company knows: chats, documents, issue boards, pull requests, charts, and web pages sit side by side as cards on a Trellis canvas, linked to each other, with people and AI agents working on the same surface.

Year
2026
Role
Solo: product, design, and engineering
Walkthrough of a local demo buildRecorded with an automated browser

Overview

Atrium puts a company's information in one place and shows how the pieces relate. The hierarchy is Workspace, Space, Surface, and Card: each surface is a canvas, and its cards are chats, documents, issue boards, pull requests, charts, videos, web pages, images, sticky notes, sketches, and small live dashboards. Cards link to each other, hang under the chat or document that produced them, and open full size in place, so a document becomes a rich text editor and a board becomes a Linear-style issue view. The canvas is Trellis, my own React Flow-style library, and every card is a Trellis node type. A Claude agent built on Mastra works on the surface alongside people, and an MCP endpoint gives any outside agent the same tools. Pull requests and boards are mocks today, with no repository or Linear behind them, and the workspace lives in an in-memory store designed to be swapped for a real one.

What I learned

Atrium was the first real consumer of Trellis, and building a dense, interactive app on it showed me which parts of a canvas library matter: controlled nodes, a typed change stream, and stable coordinates under zoom. I learned to keep layout pure and testable, so Arrange (grouping linked cards into clusters and packing them into rows) is a plain function the store, the client, and agents all share. Multiplayer taught me Server-Sent Events end to end: one stream per open surface, versions hashed per surface so unrelated changes don't reload anyone, presence, and draining streams cleanly on shutdown. Documents are stored as Portable Text but agents read and write Markdown, which meant writing converters both ways, including tables and references to other cards. Running the same tools through Mastra for the in-app agent and through MCP for outside agents made me design the store's functions as the single API everyone goes through.

People and agents should read and write the same cards, through the same functions, and see each other's changes as they happen.

Why it matters

Atrium shows I can design a product model and the interaction work that makes it feel fast: drag, resize, link, lock, arrange, focus, search with ⌘K, and keyboard paths for each. It is a real test of Trellis, since every card type, link, and layout runs on the library I published. The agent work is practical rather than a chat bolted on: the agent creates documents, boards, charts, and UI cards on the canvas, and every viewer watches them appear. The app is covered by 44 Vitest files and 15 Playwright specs, including one that drives two signed-in people on the same surface.

Screens

07 images, select to enlarge
Next projectFresh VisitName a task and a start page, and Fresh Visit clicks through the site like a first-time visitor would, then comes back with a video of the run, every screen and click, and a verdict: Found, Stuck, or Out of steps.

Hiring a senior frontend engineer?

I'm looking for my next role on a product team, building design systems and AI tooling. The resume has the details, and my inbox is open.