Iterating With Agents in Orbs Using Portals

All right, here we are. I wanted to record a quick video on how I use portals in Amp to iterate with agents in orbs. Bunch of words here, but to recap: orbs are agents running in remote machines, right? And portals allow you to access any service that speaks HTTP and listens on a port in that orb. It's very powerful.

So yesterday I was adding a feature that when an orb runs out of memory, we now show this warning, right? But I noticed that after it shipped, and I tested it, and then it works, I kind of want to change the wording here. So I said, give me a storybook in an orb that shows all of the copy for all of these warnings. And then it did some stuff, created this storybook, and now it's running here in a portal, right? So now I can preview all of this and can see what it looks like, right? It even gives me the CLI status line. And now I can even use this. So this is built in, you can, you know, obviously comment on stuff, which is better than annotating screenshots, or more token efficient, right?

So then here, we can say: remove the workspace from all of these messages, it's enough to say the orb disk, right? And then we say Add, obviously, and then we can, you know, simulate this. Let's go through them here. Oops, disk space critically low. The workspace disk is now within... so this is a resource warning, right? This is disk space low, resource warning with memory. And then we have a resource warning for both of them. And then critical, right? And it's critically low. I think these are fine. So basically, if I send this now, it will send it to the agent, and it will work.

So here, I'm iterating on another page where I did something else, right? So this is, I'm building a page to explain what orbs are, right? And here I have it running in this storybook. I can even... sorry, not the storybook, so this is the actual thing. I think that kind of... maybe, I guess it looks like we have a multi-column layout, I didn't even know this. So I wrote all of this, then I added the demo video. So now you can go through this. I don't like the hierarchy of this.

But in this case, so what I did, right, so this is something that if you had asked me weeks ago, I would have said, I want to tweak this locally, right? So this background, I just took from another post that I wrote last week. So I added two more, I attached two more images. And I said, I want to see these two images as background in the header, and, say, maybe add a debug toggle, right? And what it did was it added the debug toggle. So now you can, you know, see what it looks like with these background images. And I don't know, I kind of like this. And then here, what is smooth? That's the other one. Let's take a look at this one.

There you go. I think we could make this better. So then we say: I think the backgrounds are too much in the background, it's hard to see the background. Let's make it show up more. And then, you know, obviously, it goes to work. I don't know what mode this is. High, so might not be fast. But now, you know, if I go back over here, you can see that it updated every disk warning to say the orb disk, the orb workspace disk. And then, yeah, looks good. So we go here, you know, and then we do this, we keep that button pressed, boom. And now it's going to ship this.

And then, you know, that's kind of how it worked. That's how I use portals to iterate on stuff in orbs. Because if we now go back, let's see, it already edited the page, or it's still editing it, we're loading the orb again. We can switch between these. I think, yeah, I kind of like this. What do you like? What is your favorite background? Let me know. All right, quick video over.