Skip to content

[00]Case study · Built by Asrar

Designing agent work people can trust.

Asrar designed and built Dispatch to answer one question: how do you let AI agents do real work for a team, without asking that team to trust a black box?

Product
Dispatch, agent board
Built by
Asrar, end to end
Scope
Product design, full-stack, AI
Stack
Next.js 16 · Postgres · Prisma 7

[01]The problem

Agents were powerful, and impossible to supervise.

Operators told us the same three things about the agent tools they had tried.

  • Chat hides the work

    An agent in a chat window answers, but you cannot see which pages it read, which tools it called or what it cost.

  • Nobody can stop a send

    Once an agent can email or post, one wrong run is a real-world mistake. Most tools ask for trust instead of a decision.

  • No shared record

    Teams cannot review, compare or hand over agent work when it lives in private threads with no history.

[02]The approach

Not a chat. A board.

Work is a card that moves through columns everyone already understands. Agents are workers you can watch, and a person keeps every decision that matters. Four principles shaped every screen.

  1. [01]

    Nothing hidden.

    Every step, tool call, source and cent is in the trace, streamed while it happens.

  2. [02]

    Nothing irreversible without a human.

    Side effects pause the run. Approving is one key: A, E or R.

  3. [03]

    The board is the truth.

    State lives on the card. The inspector adds depth and never contradicts it.

  4. [04]

    Optimistic, but honest.

    Moves feel instant; a failure rolls back immediately and says why.

[03]Architecture

One app, one database, one worker.

A single Next.js app is both the API and the interface. Postgres is the source of truth and the realtime bus; a worker runs the agents.

Dispatch architectureThe browser talks to a single Next.js 16 app over HTTPS and receives live updates over server-sent events. Requests pass the proxy, the route wrapper and the services, which read and write PostgreSQL. A worker runs agents, calls the model and tools, and sends email through Resend. Files live in private MinIO storage.Next.js 16 appone deployableHTTPSSSENOTIFYproxy.tsoptimistic session gateroute()auth · role · Zod · rate limitsServicesbusiness rules · workspace scopeServer Componentsmarketing, SEO, layoutsSSE streamsrun, board and inbox eventsBrowserReact 19 · React Querylive updates over SSEMinIOprivate files · signed URLsPostgreSQLPrisma 7 · LISTEN / NOTIFYWorkerrun engine · jobs · locksResendemail, every send loggedModelClaude, or built-in engineToolsweb, files, tablesside effects → approval
  1. [01]EnqueueCard → run row, concurrency checked against the plan
  2. [02]PrepareTask type, inputs, file text, allowed tools, policy
  3. [03]PlanA short plan, shown as a summarized first step
  4. [04]ActTool calls; side effects create an approval and pause
  5. [05]ProduceArtifact validated against the output schema, citations extracted
  6. [06]FinishUsage recorded, notifications, signed webhooks

[04]Screens

The moments that earn trust.

Live components, not screenshots. Press A, E or R on the approval sheet.

Open the design system

Approval needed

Draft a follow-up email for Jane · run 1 · step 4

Awaiting approval
Tool
send_emailside effect
To
jane@northwind.example
Subject
Following up on the Northwind pilot

Hi Jane,

Thanks again for Tuesday. As promised, here is a two-week pilot for the ops team: three boards, forty runs and a short review every Friday. Would Thursday at 10:00 work for a 20-minute kickoff?

Best, Nadia

The run is paused until someone decides.

Approval sheet. The exact email, the diff of your edit, one key to decide.
Artifact viewer. Every claim carries a numbered source, down to the table cell.

[05]Stack

Boring where it counts.

Proven, typed tools, one convention per layer: one model, one file per layer, the same name everywhere.

  • Next.js 16App Router, one deployable
  • React 19Server + client components
  • TypeScriptStrict, end to end
  • Tailwind v4Tokens in one file
  • shadcn/uiRadix primitives
  • TanStack QueryServer state, optimistic UI
  • Zod 4One schema, both ends
  • Prisma 7PostgreSQL, driver adapter
  • Better AuthSessions, magic links, OAuth
  • Postgres NOTIFYRealtime bus → SSE
  • MinIOPrivate files, signed URLs
  • ResendEmail, logged
  • Anthropic SDKWith a built-in fallback engine
  • motionSprings, layout animation
  • VitestUnit tests
  • PlaywrightEnd-to-end tests

[06]What we measure

Targets we designed against.

Set before the first line of code, checked on every release.

  • Activation target
    60 %of new workspaces finish a first run within ten minutes
  • Reliability target
    > 95 %of runs succeed, with a readable reason when they do not
  • Speed target
    < 90 sfor a standard-depth run, from Running to Review
  • Guarantee
    0side effects executed without a recorded human decision

Want agents like these in your product? Build it with Asrar.

We design and build agent systems that do real work safely: orchestration, tools, streaming and a human in the loop.

Talk to AsrarTry the demo