Transcription: OpenAgents Episode 034 - Agent Inspection UX Design

Source: https://twitter.com/OpenAgentsInc/status/1731733390641050106 Wiki source: https://raw.githubusercontent.com/wiki/OpenAgentsInc/openagents/Video-Series.md Media title: OpenAgents - Episode 034: Agent Inspection UX Design We review our basic inspectio... Upload date: 20231204 Transcription model: mlx-whisper/mlx-community/whisper-tiny Generated at: 2026-06-01T20:31:04Z

Machine-generated transcript. Review speaker labels and wording before using this as quote-grade source material.

[00:00] Christopher David: Happy Bitcoin 41k. Let's keep going. So we have this interface. We have like an ugly version built.

[00:11] Christopher David: And let's show you what we did here. We did these tests. So a guest can visit the inspection dashboard.

[00:21] Christopher David: And right now if you go to the homepage, just click the comments you invited. It'll pop up in inspect.

[00:28] Christopher David: And then you've got, this isn't really formatted very well. If you click on task, you can see the steps that it takes. Starting to record things like the duration that each step takes.

[00:37] Christopher David: The model will put tokens on the details here. And then if you click on each step, it pops open the kind of raw output. So we've got guest can visit inspection dashboard and see all agents.

[00:49] Christopher David: Test can visit task run page and see all steps taken.

[00:53] Christopher David: Can click on any step to see what the output method is.

[00:57] Christopher David: And then some of the particular assertions for like specific fields. We still got to kind of massage exactly what we expect to see per step.

[01:05] Christopher David: Because there are differences between for example, some of the GitHub API fetches.

[01:13] Christopher David: Let's just go to take one more look at what we're doing here. We're recording tasks or recording steps every time we make it.

[01:20] Christopher David: I'm call or make an API call. I haven't implemented the vector database query yet.

[01:26] Christopher David: At least the logging of it.

[01:29] Christopher David: But this is good. And then we started refactoring instead of this, you know, stuffing out all the logic is this one ugly artisan command.

[01:37] Christopher David: We are instead. Let's make this bigger.

[01:42] Christopher David: Putting it in a very, a class called fairy.

[01:48] Christopher David: And that has tests in fairy test.

[01:56] Christopher David: Okay, so the refactor is almost done. Like this almost works. I put over most of the code from the ugly artisan command into the fairy service class.

[02:11] Christopher David: A little bit of work left there to do, but we're at the point now where I really need to decide exactly what information we show on the interface.

[02:23] Christopher David: So we're going to get into some kind of UI design here. How do I actually want to interact with this?

[02:29] Christopher David: There's a little clunky to kind of see that and then click to that. I'm happy that we have some kind of hierarchy of step on screen.

[02:37] Christopher David: But now it's like we want to surface the most relevant information.

[02:42] Christopher David: And only the most relevant information and have a nice experience with how to like drilling down, drilling down.

[02:48] Christopher David: So let's think about this a little bit.

[02:56] Christopher David: Let's see, should we use a scale of draw?

[03:07] Christopher David: Let's see.

[03:10] Christopher David: Where did we put? Okay, so this was our last time we did some, as we were doing the kind of chat over docs stuff.

[03:24] Christopher David: And maybe what we'll do is kind of copy this idea.

[03:41] Christopher David: We'll call this inspection UI.

[03:53] Christopher David: And what do we want to see here? Right now we've just got like it loops through all of the agents.

[04:08] Christopher David: You can envision that later on.

[04:13] Christopher David: So we're distinguishing between like public and private agents for now.

[04:18] Christopher David: I'll just going to be public.

[04:24] Christopher David: And then probably want to start composing the actual interfaces out of components.

[04:32] Christopher David: We're probably going to use the Shad UI components.

[04:38] Christopher David: And so we've been using in the GP top your website thus far.

[04:42] Christopher David: I've got it manually switched to light mode here. I'm usually a dark mode back seat, but I think we might start with kind of a light mode.

[04:51] Christopher David: Well, the beautiful thing about Shad Composes has got light and dark support, but open agents.

[04:59] Christopher David: Light mode seems to be one first class for that.

[05:09] Christopher David: So this will be live at openagents.com slash inspect.

[05:23] Christopher David: And what do we want to be there?

[05:26] Christopher David: Maybe at the top we're going to want some

[05:36] Christopher David: stats.

[05:41] Christopher David: Like.

[05:51] Christopher David: Kind of like.

[05:58] Christopher David: Kind of like.

[06:07] Christopher David: Kind of like this here.

[06:15] Christopher David: I want to start measuring what I get pretty close.

[06:21] Christopher David: I want to get revenue measured soon here.

[06:27] Christopher David: Like how much compute or tokens is each thing using.

[06:32] Christopher David: So we can have people starting to pay for this and then have our computer providers.

[06:36] Christopher David: Now that people get starting to earn some revs share on that.

[06:38] Christopher David: So we're going to definitely think about monetization.

[06:41] Christopher David: But maybe let's put four of these here.

[06:48] Christopher David: Some stats.

[06:58] Christopher David: And this might be.

[07:12] Christopher David: Something about something representative of usage like the number of agents.

[07:37] Christopher David: Task.

[07:54] Christopher David: Users.

[07:59] Christopher David: Transparency.

[08:09] Christopher David: And then what do we want to see here?

[08:14] Christopher David: Maybe like a data table.

[08:23] Christopher David: And then what do we want to see here?

[08:33] Christopher David: And then what do we want to see here?

[08:41] Christopher David: And then what do we want to see here?

[08:48] Christopher David: And then what do we want to see here?

[08:58] Christopher David: And then what do we want to see here?

[09:04] Christopher David: And then what do we want to see here?

[09:09] Christopher David: And then we might want like a summary here.

[09:27] Christopher David: And then what do we want to see here?

[09:37] Christopher David: And then what do we want to see here?

[09:52] Christopher David: Oh, I guess.

[10:21] Christopher David: So my go description.

[10:43] Christopher David: I should do user ID.

[10:53] Christopher David: Description.

[11:07] Christopher David: Maybe like status.

[11:23] Christopher David: And then usage.

[11:33] Christopher David: Compute slash tokens with me by usage.

[11:45] Christopher David: And then you can see here.

[11:59] Christopher David: Open PR blah blah blah.

[12:20] Christopher David: Oops.

[12:55] Christopher David: How is usage measure?

[13:05] Christopher David: There's compute tokens.

[13:12] Christopher David: And then what do we want to see here?

[13:28] Christopher David: Something like that.

[13:58] Christopher David: Marketer bot tried to send a tweet.

[14:26] Christopher David: And then what do we want to see here?

[14:54] Christopher David: Okay.

[15:04] Christopher David: And then we click on one of the rows.

[15:19] Christopher David: I think I want this to be run.

[15:31] Christopher David: And I think I want this to be network stats.

[15:37] Christopher David: And then on the other one we'll do agent stats or runs stats rather.

[16:07] Christopher David: And then the run.

[16:28] Christopher David: And then the run.

[16:42] Christopher David: And then the run.

[16:52] Christopher David: And then the run.

[17:15] Christopher David: Let's see.

[17:45] Christopher David: Test.

[18:11] Christopher David: And then we run slash ID.

[18:41] Christopher David: And then the run.

[19:11] Christopher David: Okay.

[19:26] Christopher David: And then in here.

[19:34] Christopher David: And then we run slash ID.

[19:59] Christopher David: And it'll be this kind of stuff like one.

[20:23] Christopher David: And PR.

[20:53] Christopher David: And we just want to put some reddit data here like succeeded.

[21:11] Christopher David: And maybe a little bit to visit other the whole thing.

[21:17] Christopher David: Probably click more.

[21:47] Christopher David: Scall draws on some.

[22:17] Christopher David: Okay.

[22:41] Christopher David: And then one more of these.

[23:03] Christopher David: Steps, steps, steps, steps.

[23:11] Christopher David: And then one more of these.

[23:40] Christopher David: And then we just dump the response data.

[23:55] Christopher David: Just a formatted.

[24:25] Christopher David: Okay.

[24:32] Christopher David: I think this is a great start.

[24:34] Christopher David: So we've got our basic horrible UI with some of the raw data being put there.

[24:42] Christopher David: We're going to change it.

[24:48] Christopher David: So it looks like this using Shad Components.

[24:50] Christopher David: And we will do that offline.