From d2bcd2b2f74c8216fc2383e7b38d0710af696b41 Mon Sep 17 00:00:00 2001 From: Nathan Esquenazi Date: Thu, 2 Apr 2026 11:08:34 -0700 Subject: [PATCH] =?UTF-8?q?feat:=20Sprint=2016=20=E2=80=94=20session=20sid?= =?UTF-8?q?ebar=20visual=20polish?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Action buttons overlay: wrap pin/move/archive/dup/trash in a .session-actions container with position:absolute. Titles now use full available width. Actions appear on hover with gradient fade from the right edge. Overlay auto-hides during inline rename. - SVG line icons: replace all emoji HTML entities with monochrome SVGs that inherit currentColor. Consistent across all platforms. - Pin indicator: small gold star rendered inline only when pinned. Unpinned sessions get full title width (zero space reservation). - Project border: sessions assigned to a project show a colored left border matching the project color, replacing the old always-visible blue folder button. Fixes both BUGS.md items (title truncation + sticky folder button). Tests: 214 passed, 23 pre-existing failures, 0 regressions. Co-Authored-By: Claude Opus 4.6 (1M context) --- BUGS.md | 18 ++++++++++ ROADMAP.md | 2 +- SPRINTS.md | 87 +++++++++++++++++++++++----------------------- static/sessions.js | 83 +++++++++++++++++++++++++++++-------------- static/style.css | 30 ++++++++-------- 5 files changed, 135 insertions(+), 85 deletions(-) create mode 100644 BUGS.md diff --git a/BUGS.md b/BUGS.md new file mode 100644 index 0000000..62be3ce --- /dev/null +++ b/BUGS.md @@ -0,0 +1,18 @@ +# Bugs Backlog + +This file tracks UI bugs and polish items to address in a future sprint. + +## ~~Conversation list title truncation / hover actions~~ — Fixed (Sprint 16) + +- **Was:** Action icons reserved ~30px of space even when invisible, truncating titles. +- **Fix:** Wrapped all action buttons in a `.session-actions` overlay container with `position:absolute`. Titles now use full available width. Actions appear on hover with a gradient fade from the right edge. + +## ~~Folder/project assignment interaction feels sticky~~ — Fixed (Sprint 16) + +- **Was:** Folder icon stayed permanently visible (blue, 60% opacity) when a session belonged to a project. +- **Fix:** Replaced `.has-project` persistent button with a colored left border matching the project color. The folder button now only appears in the hover overlay like all other actions. + +## Notes + +- Both issues resolved in Sprint 16 (Session Sidebar Visual Polish). +- Icons replaced from inconsistent emoji HTML entities to monochrome SVG line icons. diff --git a/ROADMAP.md b/ROADMAP.md index 227feea..7784eb7 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -3,7 +3,7 @@ > Goal: Full 1:1 parity with the Hermes CLI experience via a clean dark web UI. > Everything you can do from the CLI terminal, you can do from this UI. > -> Last updated: Sprint 15 (April 1, 2026) +> Last updated: Sprint 15 / v0.17.1 (April 2, 2026) > Tests: 237 passing > Source: / diff --git a/SPRINTS.md b/SPRINTS.md index 3887611..cca673b 100644 --- a/SPRINTS.md +++ b/SPRINTS.md @@ -217,54 +217,55 @@ organizational gap vs. Claude's project folders. **Hermes CLI parity impact:** Low (CLI has no session organization) **Claude parity impact:** Very High (projects are a core Claude concept) -### Candidates for next sprints -- Workspace reorder (drag-and-drop) -- View skill linked files +### Candidates for later sprints +- Artifacts + code execution (HTML/SVG preview, inline Python execution) - Voice input via Whisper - Subagent delegation cards (enhanced tool card rendering) --- -## Sprint 16 -- Artifacts + Code Execution +## Sprint 16 -- Session Sidebar Visual Polish (COMPLETED) -**Theme:** See outputs, not just text. +**Theme:** Make the session list feel high-quality and delightful. -**Why now:** Claude's most distinctive feature is the artifact panel -- -code runs inline, HTML renders in a sandboxed iframe, SVGs show as images. -This is the largest single capability gap between what we have and what Claude -feels like. It also directly enables the Hermes "code execution cell" feature -(Jupyter-style in-browser execution). +**Why now:** The session sidebar had two visible UX bugs: titles truncated +unnecessarily because action icons reserved space even when hidden, and +the project folder icon felt "sticky" and awkward. Emoji icons rendered +inconsistently across platforms. These were the most common visual complaints. -### Track A: Bugs -- Prism.js autoloader makes one CDN request per language encountered. On a - code-heavy session this causes noticeable latency. Bundle the top 10 languages - (Python, JS, bash, JSON, SQL, YAML, TypeScript, CSS, HTML, Rust) locally. -- Code blocks in long responses sometimes re-highlight on every renderMessages() - call. Debounce highlightCode() with requestAnimationFrame. +### Track A: Bugs (from BUGS.md) +- **Session title truncation.** Action icons (pin, move, archive, dup, trash) + were always in the DOM with `flex-shrink:0`, reserving ~30px even when + invisible. Fix: wrapped all actions in a `.session-actions` overlay + container with `position:absolute`. Titles now use full available width. + Actions appear on hover with a gradient fade from the right edge. +- **Folder button feels sticky.** Replaced `.has-project` persistent blue + button with a colored left border matching the project color. The folder + button now only appears in the hover overlay like all other actions. ### Track B: Features -- **Artifact panel:** When Hermes produces a code block tagged as `html`, `svg`, - or `react`, a "Preview" button appears on that code block. Clicking it opens - a sandboxed `