What should an AI agent's screen look like?

Key points

• An AI agent's screen has three jobs: take the task, show the work, and ask before anything important.
• A chat window hides the one line you need to act on. A dashboard shows everything and leaves you to sort it out.
• When Nox stops for your OK, that card sits above the rest of the page, with a dark outline and a shadow.
• Your words sit in a bubble. The agent's words are set like a page. What it hands back is set in a different font.
• Every title is 40 pixels on a computer and 32 on a phone, on every page. We tried bigger first, and it was worse.
• We compared the rebuilt screens with the old ones, feature by feature. One thing moved, on purpose.

An AI agent's screen has three jobs: take the task, show the work, and ask before anything important. Most of what goes wrong on these screens comes from treating them as something else, usually a chat window or a dashboard. We rebuilt every screen of nox.cool around those three jobs, and this is what we changed and why.

nox.cool gives each AI agent its own computer. You tell Nox what you want, it does the work, and it stops to ask before anything goes out in your name. So the screen isn't decoration. It's the place you decide what happens to your email, your money and your name.

#Why doesn't a chat window work for an AI agent?

A chat window assumes you're talking, and that the answer is the point. An agent isn't only answering. It's working: opening pages, reading files, writing things, running for minutes or hours, and sometimes stopping to ask. Lay all of that out in matching bubbles, and the one line you need to act on looks like every other line.

A dashboard fails the other way. It shows everything at once and leaves you to work out what matters today.

nox.cool had drifted somewhere between the two. It grew one feature at a time: routines, projects, a marketplace of more than a hundred agents, documents, wallets. Each feature found a place on a page, and each page was fine by itself. Taken together it looked basic, and what mattered didn't stand out. So we stopped building features for a while and went through all of it.

#What should you see first when you open an AI agent?

What's waiting for you, and where to type.

Home now has Nox's face, a greeting, and one short line: Waiting for you, with the name of the task. Under that sits one card, with anything else folded behind a "more" line, and then the message box.

One card is a deliberate choice. A stack of cards asks you to read them all before you've done anything, and most mornings you came to give the agent something to do, not to go through its suggestions.

#How should an AI agent show its work?

By making it obvious who's speaking, and what's talk and what's the work.

• Your words sit in a bubble on the right, the way they do in any messaging app.
• The agent's words are set straight on the page, like a document, because you're reading them, not chatting with them.
• Its steps are small grey lines under its name, each with how long it took. Click one to open it. You can follow along or ignore them.
• What it hands back gets its own font. Code and an agent's exact output are set in a fixed-width font, Geist Mono. Everything else is in Geist.

That last one sounds minor, and it does a lot. When Nox writes "here's the draft" and then the draft, the font tells you where its talk ends and the thing you asked for begins. The marketplace uses the same idea to play what an agent hands back before you add it.

#How should an AI agent ask for your permission?

So you can't miss it, and you can't misread it.

An agent that asks on a card you skim is barely safer than one that doesn't ask at all. So this card gets the strongest treatment on the page: a dark outline and a shadow that lift it above everything else. A heading says what will happen and where. Below it are Approve and Decline, and a line that says Nox is paused until you decide.

In that picture, Nox was asked to summarise a hotel's reviews, and a page offered to unlock them for €9.99 a month. There's a rule that would normally let it go ahead. A second check compared the step with what was asked, saw they didn't match, and stopped to ask. The card says all of that in plain words, in a box of its own, so the reason is there when you need it.

The redesign changed how that card looks and nothing about when it appears. Every check runs as it did before.

#How do you keep settings simple when a product does a lot?

Split them by what they're about, and show one part at a time.

Settings was one long page. It's now six short parts, with the names across the top:

Each row follows one pattern: what it is on the left, a line saying what it does, and the control on the right. Once you've read one, you've read them all.

#Why is nox.cool black and white?

Because the face should be the loudest thing on the page.

Nox's face is a spray-painted, X-eyed smile. It reacts as the agent works, and it's the one thing on the screen with any noise in it. Everything around it is quiet: a white sheet on pale grey in light mode, and a dark sheet on near-black in dark mode.

Colour usually does the job of saying "look here". We use outline, weight and space for that instead. It also means you don't have to tell red from green to see what needs you.

#What fonts and sizes does nox.cool use?

Geist, a free, open-source typeface, for reading, and its sister Geist Mono for code and output. We serve both ourselves, so opening nox.cool doesn't tell a font service you were there.

Sizes come from one short list, and they're the same on every page:

We got this wrong first. The first version of the public website had big headlines, 76 to 112 pixels, and each section picked its own size. It looked like a marketing page, and moving from one section to the next made no sense. One of us said so, plainly. Now every title on the site is the same compact size, the home page's included, and if the size changes, it changes everywhere at once.

#Where does movement help, and where does it get in the way?

Movement helps when it explains that something changed. Numbers count up to their value, so you notice them. The website's demo plays a job from start to finish, because a moving picture of the work says more than a paragraph about it.

It gets in the way when it delays you, so pages arrive quickly and nothing makes you wait for it to finish. Turn on reduced motion on your device and the animations stop. The website's demo then shows each finished job, still, and you can pick through them all the same.

#How did we know we hadn't broken anything?

We wanted a new look, not a smaller product. So we checked in three ways.

1. Feature by feature. We compared 33 of the rebuilt screens with the old ones, looking for anything that had gone missing. One thing had, on purpose: the marketplace block on the Agents page, because the marketplace has its own page now.
2. Phone width. All 29 pages of the app and every part of Settings were checked at phone width for anything wider than the screen. So were the public website's pages, in light, dark and phone.
3. Playing it through. Each of the seven examples on the website was played to the end in light, dark and phone, and we looked at each one.

Not everything was caught that way. Late in the work, one misplaced style rule squeezed every page on a phone into a narrow column. One of us found it the simple way, by opening the app on a phone and sending a screenshot. It was fixed the same day. Automatic checks are good at what you think to ask them. Using the thing is still how you find the rest.

#How can I try the new look?

If you have an invite, it's already there. Nothing to install, on the web or on the Mac.

1. Open Home and find the line that says what's waiting for you.
2. Ask for something that goes out in your name, like "Draft a reply to my last email and send it". Watch the steps, then see the card that stops it.
3. Open Settings, then This device, then Appearance, and try light and dark.
4. Open Marketplace, pick an agent, and see what it hands back before you add it.

If you don't have an invite yet, the public home page plays seven kinds of work, and you can pick any of them.

The short version is in the announcement. You can ask for early access at nox.cool.

#Questions and answers

What should an AI agent's interface show?

Three things: where to give it a task, what it's doing right now, and anything it's waiting on you for. What it's waiting on should be the easiest thing on the screen to see.

Is a chat window a good interface for an AI agent?

For talking, yes. For watching work, not on its own. An agent opens pages, reads files and stops to ask, and in identical bubbles the one line you need to act on looks like all the others. nox.cool keeps the conversation but draws work, questions and results differently.

How should an AI agent ask for permission?

So you can't miss it or misread it. In nox.cool, a card sits above the page and says what will happen and where. It offers Approve and Decline, and the agent stays paused until you decide.

Did the redesign change when Nox asks for an OK?

No. Only the look changed. Every check runs as it did before, including the second check that compares a risky step with what you asked for.

What fonts does nox.cool use?

Geist for reading, and Geist Mono for code and for what an agent hands back. nox.cool serves both itself, so opening the app doesn't tell a font service you were there.

Why is nox.cool black and white?

Because Nox's spray-painted face should be the loudest thing on the page. Outline, weight and space do the job colour usually does, so you don't have to tell red from green to see what needs you.

Can I switch off the movement?

Yes. Turn on reduced motion on your device, and the animations stop.