Add agent metadata statusbar to monitor resource usage #555

EhabY · 2025-07-16T20:38:14Z

Looks like the following:

The statusbar creation happens in remote.ts#setup which AFAIK seems to be called only once per session/extension activation. The creation of this statusbar happens at the very end when everything goes smoothly.

code-asher

Awesome! Left some minor thoughts. We should add a changelog entry as well, and it might make sense to mention that if they want to change which shows in the toolbar, they can reorder the metadata in the Terraform since we show the first one.

src/workspacesProvider.ts

src/remote.ts

code-asher · 2025-07-17T19:50:14Z

src/remote.ts

+					this.storage.writeToCoderOutputChannel(
+						formatMetadataError(agentWatcher.error),
+					);
+					statusBarItem.hide();


Would it make sense to show the error here? Or just a warning icon or something with the error in the tooltip maybe?

Hmmm tbh I am not entirely sure how frequent an error like this can happen.

If we show an error, it could be annoying if it keeps popping up frequently. Perhaps adding an error icon with some label and the tooltip can include the error message is good (while still logging of course). Though I don't love having a "useless" status bar item since the status bar is already crowded 🤔

Which is why I favor the current approach, what do you think?

My thinking is that if we think it is important enough to show metadata in the status bar, it is important enough to show errors getting that metadata.

Definitely agree there should be no popups or anything like that, that would be super annoying.

Thinking about it from the original request, the user wanted to be able to see disk space in the status bar. Suppose one day there was an error and we could not fetch the metadata, likely the user wants to be aware of that (I am projecting of course lol)

Hmmm yeah I see your point now. In that case, I think I can show the something like a warning logo with a label then when hovering we show the error details (the same one that is logged). We can even change the background color so it's yellow-ish for example.

So my proposal is something like

statusBarItem.text = "$(warning) Agent Status Unavailable"; statusBarItem.tooltip = errMessage; statusBarItem.color = new vscode.ThemeColor( "statusBarItem.warningForeground", ); statusBarItem.backgroundColor = new vscode.ThemeColor( "statusBarItem.warningBackground", );

Ah I almost forgot, we still hide the status bar if there is no metadata. Do we want that still?

Oh good point hmmm...I wonder if it would make sense to show "no metadata" and in the popup explain that if you want metadata you have to add it to your workspace template?

But on the other hand, maybe if the template has no metadata it is because the user explicitly did not want to see metadata, and this could be annoying to them.

Honestly not sure, maybe the best move is to add a toggle to hide/disable the metadata?

You mean always show the status bar item, and if there are no data then we simply say "No metadata available" and the user can toggle the status bar item in a setting 🤔 ?

Yeah not sure as well... For reference, in the tree view, if there is no metadata then nothing is shown to the user about that

Yup that was what I was thinking.

I think for now we just hide it, like you say we hide it in the sidebar as well. It could be nice to show a message for discoverability reasons; users may not even realize they can have metadata to show. But, I think it would make sense to revisit that together with the sidebar at a later point.

EhabY · 2025-07-18T17:41:39Z

One extra improvement here is that we can use Coders icon right next to the text. This would require creating a custom font with all the extensions logos in it so might be out of scope here 🤔

For example the Git extension adds this which gives context to what the text after it means:

--

Currently in this PR, it just shows whatever the first item is which is not intuitive for users to recognize as being related to Coder

EhabY · 2025-07-19T20:17:32Z

This is just using the logo SVG:

It seems a bit big tbh, maybe the C alone or the dash can be smaller?

matifali · 2025-07-20T11:06:14Z

I prefer the no logo, or if we can make the logo smaller, such as 70% of its original size.

EhabY · 2025-07-20T14:34:38Z

I prefer the no logo, or if we can make the logo smaller, such as 70% of its original size.

Agreed, the logo is a bit too big, here's how it looks if the logo is scaled down to 60% of its original size:

Ideally there should be a more "square" form of the Coder logo that would fit the VS Code environment more. Here it just means that the logo is made smaller and so there are invisible spaces around it. For example, if you point to the left of it you get the hover due to the invisible padding:

matifali · 2025-07-20T18:24:12Z

@rachelmullenax can we have a square logo for use cases like this?

code-asher · 2025-07-21T18:57:22Z

I wonder if some generic icon indicating a remote resource would work better than the logo? Like a cloud icon or something.

EhabY · 2025-07-22T18:29:17Z

I wonder if some generic icon indicating a remote resource would work better than the logo? Like a cloud icon or something.

I think this could work well since the VS Code codions fit well within the ecosystem.

The only worry here is that just having an icon won't give enough of an indication that this is Coder's stats but could be fine since other extensions use those so it's consistent 🤔

code-asher · 2025-07-24T00:37:29Z

The only worry here is that just having an icon won't give enough of an indication that this is Coder's stats but could be fine since other extensions use those so it's consistent

True! But yeah I like the idea of consistent-looking icons in the status bar. I think mostly the logo being so thick and bold compared to the other icons is what throws me off. But I will defer to what you and @matifali think.

matifali · 2025-07-24T09:48:53Z

Let's keep using the Coder logo. We can update when @rachelmullenax gets back.

EhabY · 2025-07-24T11:38:13Z

Alright, I'll keep the 70% one but I did have to write a fantasticon script to generate the font from the logo. Should I push everything there and possibly make it part of the script? Or just push the font that contains the logo?. (There is no way to use custom logos in the statusbar without adding a custom font...)

The former will make sure we can easily add more icons but requires some discussion since it should be added to the build workflow, while the latter is just a single woff2 file that contains the scaled down logo 🤔

Alternatively, we can just use one of the default VS Code logos above (for now)

matifali · 2025-07-24T14:12:17Z

Alternatively, we can just use one of the default VS Code logos above (for now)

I am not familiar with the complexities of custom fonts, so let's use the Dashboard logo, specifically the round gauge.

EhabY · 2025-07-24T21:39:24Z

Alternatively, we can just use one of the default VS Code logos above (for now)

I am not familiar with the complexities of custom fonts, so let's use the Dashboard logo, specifically the round gauge.

Alright, will do, adding a custom font is not difficult but requires some thought and makes sense to do after we have the logo

EhabY · 2025-07-24T22:09:59Z

This is how it looks like when it is failing (but with an error message):

When it works it looks like this:

If there are no errors but the metadata is empty, then we simply hide the status bar item.

code-asher · 2025-07-24T23:05:18Z

Looks awesome thank you!

matifali · 2025-07-25T05:12:54Z

If there is a template with no metadata block in coder_agent, how do we handle it? Do we hide it completely or show an error? If it's the latter, then we should probably look into hiding it from the status bar.

code-asher approved these changes Jul 17, 2025

View reviewed changes

EhabY added 2 commits July 22, 2025 21:49

Add agent metadata statusbar to monitor resource usage

4ba5773

Review comment: return a disposables array when creating the statusbar

9d0d610

EhabY force-pushed the add-agent-metadata-statusbar branch from 39c307d to f5c8b9f Compare July 22, 2025 18:53

matifali approved these changes Jul 24, 2025

View reviewed changes

Show the statusbar even when fetching metadata fails

dfc1a3a

EhabY force-pushed the add-agent-metadata-statusbar branch from f5c8b9f to dfc1a3a Compare July 24, 2025 22:09

Merge branch 'main' into add-agent-metadata-statusbar

3415626

code-asher merged commit cb2a4ec into coder:main Jul 24, 2025
2 checks passed

Add agent metadata statusbar to monitor resource usage #555

Add agent metadata statusbar to monitor resource usage #555

Conversation

EhabY commented Jul 16, 2025

Uh oh!

code-asher left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

code-asher Jul 17, 2025

Choose a reason for hiding this comment

Uh oh!

EhabY Jul 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

code-asher Jul 21, 2025

Choose a reason for hiding this comment

Uh oh!

EhabY Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

code-asher Jul 24, 2025

Choose a reason for hiding this comment

Uh oh!

EhabY Jul 24, 2025

Choose a reason for hiding this comment

Uh oh!

code-asher Jul 24, 2025

Choose a reason for hiding this comment

Uh oh!

EhabY Jul 24, 2025

Choose a reason for hiding this comment

Uh oh!

code-asher Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

EhabY commented Jul 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

EhabY commented Jul 19, 2025

Uh oh!

matifali commented Jul 20, 2025

Uh oh!

EhabY commented Jul 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matifali commented Jul 20, 2025

Uh oh!

code-asher commented Jul 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

EhabY commented Jul 22, 2025

Uh oh!

code-asher commented Jul 24, 2025

Uh oh!

matifali commented Jul 24, 2025

Uh oh!

EhabY commented Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matifali commented Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

EhabY commented Jul 24, 2025

Uh oh!

EhabY commented Jul 24, 2025

Uh oh!

code-asher commented Jul 24, 2025

Uh oh!

Uh oh!

matifali commented Jul 25, 2025

Uh oh!

Uh oh!

code-asher left a comment •

edited

Loading

EhabY Jul 18, 2025 •

edited

Loading

EhabY Jul 22, 2025 •

edited

Loading

code-asher Jul 24, 2025 •

edited

Loading

EhabY commented Jul 18, 2025 •

edited

Loading

EhabY commented Jul 20, 2025 •

edited

Loading

code-asher commented Jul 21, 2025 •

edited

Loading

EhabY commented Jul 24, 2025 •

edited

Loading

matifali commented Jul 24, 2025 •

edited

Loading