fix: align workspace tree file icons

[Michaelyklam]

Thinking Path

Issue #2554 identifies a narrow workspace-tree alignment bug: directory rows reserve a 10px expand/collapse toggle slot, while file rows skip that slot, so file icons appear one column to the left of sibling folders at the same depth.

What Changed

• Added an aria-hidden .file-tree-toggle-placeholder before file icons in _renderTreeItems().
• Styled the placeholder to reserve the same 10px flex slot as .file-tree-toggle.
• Added source-level regression coverage for the placeholder insertion and matching slot width.
• Added before/after visual evidence under docs/pr-media/2554/.
• Updated the unreleased changelog.

Why It Matters

Expanded directories now keep child files and child folders visually aligned, so files no longer look like they belong to the parent/grandparent level. Directory arrows, click handlers, rename behavior, drag/drop, and delete controls are unchanged.

UI Media

Before:

After:

Verification

• env -u HERMES_CONFIG_PATH -u HERMES_WEBUI_HOST /home/michael/.hermes/hermes-agent/venv/bin/python -m pytest tests/test_issue2554_workspace_tree_file_indent.py tests/test_workspace_tree_rename.py tests/test_1707_workspace_filename_click.py tests/test_1710_folder_tooltip.py -q — 17 passed
• node --check static/ui.js
• git diff --check origin/master...HEAD
• Raw media URLs verified HTTP 200 for both PNGs

Risks / Follow-ups

Low risk. The change only reserves an invisible flex slot for file rows in the workspace tree. It does not alter tree depth calculation or directory expansion behavior.

Model Used

AI-assisted change with repository inspection, targeted editing, screenshot capture, and shell-based test verification.

Closes #2554

[nesquena-hermes]

Phase 0 review — narrow CSS-flex placeholder; ready for batch

Pulled the PR head (b473b21a) and read the diff against origin/master for static/ui.js and static/style.css. The fix matches the bug.

Root cause

_renderTreeItems at static/ui.js:7553-7569 (post-PR) prepends a .file-tree-toggle span to the directory branch:

if(item.type==='dir'){
  const arrow=document.createElement('span');
  arrow.className='file-tree-toggle';
  ...
  el.appendChild(arrow);
}

That toggle is styled flex-shrink:0; width:10px; (static/style.css:1425). Files never appended a span at all — so the icon for a file row started 10px to the left of a sibling directory's icon at the same depth, exactly matching the visual report in #2554. The paddingLeft: 8 + depth*16 only handles depth, not the per-row reserved toggle slot.

Fix

}else{
  // Keep file icons aligned with sibling directories that occupy this
  // slot with the expand/collapse toggle. #2554
  const spacer=document.createElement('span');
  spacer.className='file-tree-toggle-placeholder';
  spacer.setAttribute('aria-hidden','true');
  el.appendChild(spacer);
}

CSS:

.file-tree-toggle-placeholder{display:inline-block;flex:0 0 10px;width:10px;line-height:1;}

flex:0 0 10px mirrors the implicit flex-shrink:0;width:10px the toggle has — important because the .file-item parent is display:flex, so without flex:0 0 the placeholder could collapse below 10px on tight rows.

Why aria-hidden

Right call — the toggle on directory rows has no aria-label either (it's a presentational arrow), and screen readers should not announce an empty cell on every file row. The placeholder is purely visual.

Tests + verification

tests/test_issue2554_workspace_tree_file_indent.py (39 lines) is the right shape for a JS/CSS layout fix without a Selenium harness — it pins the placeholder class name, the aria-hidden="true", the source-level insertion point in the else branch of _renderTreeItems, and matches the 10px slot width across both rules. Looks robust against incidental refactors.

CI green on all three shards (3.11/3.12/3.13). node --check static/ui.js clean.

Two notes on shape

1. The before/after PNGs under docs/pr-media/2554/ make the regression unambiguous — easier to review than a textual description. Good practice for layout fixes.
2. There's a related row interaction the PR correctly does not touch: the directory click handlers (nameEl.onclick, nameEl.ondblclick) at static/ui.js:7594-7604 are unchanged, so the existing v0.51.4 — 10-PR full-sweep batch #1707 single-click open + bug(workspace): can't rename files from tree — first click of dblclick opens preview, dblclick handler unreachable #1698 double-click rename debounce keeps working. The placeholder is aria-hidden and has no event listeners, so it can't catch a click meant for the file icon.

LGTM for batch — closes #2554 cleanly.