Skip to content
BSWEN
Blog

How to Browse and Edit Files in Hermes WebUI Workspace Browser

Cowrie
Cowrie
Dev @ Bswen

Problem

Context-switching between a chat interface and a code editor breaks flow. I wanted to reference files, preview images, and make quick edits without leaving the conversation. Most AI chat tools force you to copy-paste code snippets or open a separate IDE.

What Is the Workspace Browser?

Hermes WebUI includes a right-panel workspace file browser. It opens on demand and gives you directory tree navigation, breadcrumb paths, inline preview for text, code, Markdown, and images, plus full file operations.

The directory tree supports expand and collapse with single-click toggles. Double-clicking a folder navigates into it. A breadcrumb trail at the top shows clickable path segments, so you can jump back up the hierarchy quickly.

Preview and Edit

I use the preview pane to view files without opening another app. It handles:

  • Text and code files with syntax highlighting via Prism.js
  • Markdown rendered inline
  • Images displayed directly
  • Binary files offered as downloads (auto-detected from the server)

You can also create, edit, delete, rename files, and create folders from the browser.

One feature I use often is linking to files directly in chat. If I type:

Chat file link
Open workspace://src/main.py and review the handle function.

The link opens the file in the right-side preview pane. This keeps the conversation and file context in the same view.

Git Integration

The workspace header shows the current Git branch name and a dirty file count badge. This gives you context about the repository state without running git status separately.

Panel Behavior

The right panel is drag-resizable and closes by default on desktop. It opens only when you actively use it — for example, by clicking a workspace:// link or opening the workspace tab. If you have unsaved edits in the preview pane, a guard warns you before closing.

Common Mistakes

I initially forgot two things:

  1. Not using workspace:// links in chat — I was copy-pasting file paths as plain text instead of using clickable links.
  2. Forgetting the panel is resizable — I left it at the default width even when I needed more space for code review.

Summary

In this post, I showed how to browse and edit files in the Hermes WebUI workspace browser. The key point is that the right panel turns the chat interface into a lightweight IDE. You can reference files in chat, preview them inline, and make edits without leaving your AI conversation.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!

Comments

Tags: