hermes-krates-connector/design/top_bar.md

Top Bar Feature

Purpose: Persistent UI overlay providing cluster status, krate count, sync indicator, admin controls, and user roster.

Layout:

• display: flex; align-items: center; padding: 13px 18px; transparent over canvas.
• Left side:
  • Logo pill (krates / yard): background rgba(14,18,25,.82), border 1px solid rgba(140,165,200,.18), border‑radius 9px, padding 7px 12px, backdrop‑filter blur(6px). Diamond glyph with clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%) in accent color.
  • Cluster pill: shows cluster name, green health dot (#4ad07a) with box-shadow: 0 0 8px #4ad07a.
  • Krate count pill: visible when krates exist.
• Right side:
  • Synced pill: pulsing accent dot + text "synced".
  • Admin button: ◉ admin – outlined when active, muted otherwise.
  • Roster avatars: overlapping circles (margin-left: -7px), 30×30 px, colored per user, initials (★ for self).

Behavior:

• Stays fixed at top; does not scroll with canvas.
• Clicking Admin button toggles the Admin Drawer.
• Avatars show presence via Yjs awareness; hovering shows tooltip with username.