Hermes Switch UI — File Operations Flow

Read / preview / edit / save — plus right-click context menu operations

FilesScreen two-column layout Files tree (left) FilePanel (right) FILES SCREEN click FilePanel GET /api/files breadcrumb + actions copy path • open tab • download FILE PANEL 3 tabs Preview md → formatted HTML images inline • code highlighted Raw plain textarea editable text files Metadata path • kind • size modified • editability click Edit (pencil) Editor mode textarea with current content user makes changes EDIT click Save Re-fetch on-disk compare mtime / content concurrent change detected? DIFF CHECK changed? no yes Review changes dialog split before/after diff view additions/removals count Save anyway · Cancel Save anyway Write to disk via agent API PUT /api/files PERSIST RIGHT-CLICK CONTEXT MENU (Files tree) Context Menu Rename Download (files) New folder inside Delete Upload button native file picker multi-select supported New folder tree header button or context menu Search "Search workspace…" live filter + auto-expand Legend FilesScreen / FilePanel (frontend) edit / save flow write to disk via agent concurrent change detected

FilePanel tabs

  • · Preview — rendered HTML, images inline, syntax-highlighted code
  • · Raw — plain textarea for editable text files
  • · Metadata — path, kind, size, modified, editability

Edit / save flow

  • · Click pencil icon or Raw tab to enter edit mode
  • · On save: re-fetches on-disk version to detect concurrent changes
  • · If changed: Review changes diff dialog (split before/after)
  • · "Save anyway" overwrites; "Cancel" discards your edit

Tree context menu

  • · Right-click any entry: Rename, Download, New folder, Delete
  • · Upload button: native picker, multi-select supported
  • · Search: live filter with auto-expand of matched subtrees
  • · Tree hides: node_modules, .git, dist, __pycache__, .venv
Hermes Switch UI · File Operations Flow · FilesScreen → FilePanel → /api/files → agent write