Designing a Screen for Watching AI Agents Work

In my last post I talked about building an automation that turns Markdown notes into task requests. There was one more thing I spent almost as long on as the backend flow. While an agent works on my behalf, what screen should I be looking at?

I ended up shelving the project, and this screen survived only as a design note. Before deleting the note, I want to write down the core of it. When you hand work to an agent, what you want to know boils down to three questions.

One document, one card#

The basic unit of the dashboard is not a ticket. It's a document. A Markdown file written in Obsidian shows up on the kanban board as a card, as is. You don't copy your spec, QA report, or deployment doc into a separate ticket.

The card's properties come from the document's frontmatter. type decides what kind of card it is, and status decides where it sits on the board.

The type changes the card's color and icon, and it decides which agent group picks it up. Status flows through five columns: Backlog, Ready, In Progress, Review, Done. When you change status in the document, the card moves to that column. When the agent finishes, the card moves again.

The frontmatter execution conditions from the last post become the card's status here. The backend and the screen read the same metadata.

Opening a card answers three questions#

Click a card and a side panel or modal opens with three tabs. This tab layout was the heart of the design note. Each tab answers one question.

What did I hand over? — The Document tab#

The first tab is the original Markdown you wrote. Spec or requirements, it shows exactly what you authored in Obsidian.

There's an Approve button here. Reread the document, and when you're confident it's ready to go, press it. That's the moment the agent gets dispatched. It's one last check before handing the work off.

What is it doing right now? — The Agent Terminal tab#

The second tab is the streaming terminal log of the agent holding this card. You see in real time which files an agent like Codex or Claude Code is editing and which commands it's running.

This part borrows from Vibe Kanban's work view. Often, once you hand a task to an agent, you see nothing until the result comes back. When the process is visible, you notice right away if it drifts off course.

Can I trust the result? — The Diff & Preview tab#

The third tab is for review. When the agent finishes writing code, the Git diff lands here.

A diff alone isn't always enough, so the tab also shows a preview of the working branch. That idea comes from Vibe Kanban's built-in browser too. A PM can click through the screen directly and leave inline feedback on anything that looks wrong. If it looks good, you approve the merge right there.

The life of a card#

Here's how the three tabs connect in a real scenario.

1. Write — In Obsidian, write [Feature] Login screen redesign.md and save it with type: Task and status: Ready
2. Appear — The card shows up in the Ready column of the kanban board
3. Dispatch — Open the card, check the content in the Document tab, and press Dispatch. The card moves to In Progress
4. Assign — The system allocates a coding agent in an isolated work environment
5. Watch — In the Agent Terminal tab, watch the agent write the code
6. Review — When the work is done, a notification lands in the Diff & Preview tab. Check the code and the preview, approve the merge, and you're done

Apart from writing the document in step 1, the only places a human touches inside the dashboard are steps 3 and 6. The principle from the last post, "humans step in only at the start and the end," holds on the screen as well.

Why I'm turning a note into a post#

This design tried to absorb what Vibe Kanban does well, namely work isolation, preview, and fine-grained feedback, while putting the idea that "the document is the center of the system" onto a screen. I never finished the dashboard, but I still think splitting the screen by three questions holds up.

Next time you evaluate an agent tool, try applying it. What did I hand over, what is it doing now, and can I trust the result? Just checking whether all three are visible on one screen filters out quite a lot.

Kind words do not cost much. Yet they accomplish much.

— Blaise Pascal