feat: edge-bar state indicator, stacked sidebar header, × crossfade on hover

muxplex/frontend/style.css

@@ -171,13 +171,14 @@ body {
   height: var(--tile-height);
   background: var(--bg-tile);
   border: 1px solid var(--border);
+  border-left: 3px solid transparent;  /* edge bar — always present, transparent by default */
   border-radius: 4px;
   display: flex;
   flex-direction: column;
   cursor: pointer;
   overflow: hidden;
   position: relative;
-  transition: border-color var(--t-fast), box-shadow var(--t-fast);
+  transition: border-color var(--t-fast), border-left-color var(--t-fast), box-shadow var(--t-fast);
 }
 
 .session-tile:hover,
@@ -191,6 +192,11 @@ body {
   box-shadow: 0 0 0 1px var(--bell-border), inset 0 0 12px var(--bell-glow);
 }
 
+/* Edge-bar only (dot mode): amber left border, no glow */
+.session-tile--edge-bell {
+  border-left-color: var(--bell);
+}
+
 /* ============================================================
    Tile header
    ============================================================ */
@@ -221,6 +227,16 @@ body {
   margin-left: 8px;
 }
 
+/* × crossfade with timestamp on hover */
+.tile-time {
+  transition: opacity 150ms ease;
+}
+
+.session-tile:hover .tile-time,
+.session-tile:focus-within .tile-time {
+  opacity: 0;
+}
+
 /* Bell notification badge */
 .tile-bell {
   display: inline-flex;
@@ -521,8 +537,9 @@ body {
   flex-direction: column;
   position: relative;
   border: 1px solid var(--border);
+  border-left: 3px solid transparent;  /* edge bar — always present, transparent by default */
   border-radius: 4px;
-  transition: border-color var(--t-fast), box-shadow var(--t-fast);
+  transition: border-color var(--t-fast), border-left-color var(--t-fast), box-shadow var(--t-fast);
 }
 
 .sidebar-item:hover,
@@ -542,6 +559,11 @@ body {
   box-shadow: 0 0 0 1px var(--bell-border), inset 0 0 12px var(--bell-glow);
 }
 
+/* Edge-bar only (dot mode): amber left border, no glow */
+.sidebar-item--edge-bell {
+  border-left-color: var(--bell);
+}
+
 .sidebar-item-header {
   display: flex;
   flex-direction: row;
@@ -587,6 +609,21 @@ body {
   margin: 0;
 }
 
+/* Sidebar meta line — device badge + separator + timestamp */
+.sidebar-item-meta {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 8px 4px;
+  font-size: 10px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.sidebar-meta-sep {
+  opacity: 0.4;
+}
+
 .sidebar-empty {
   padding: 16px 12px;
   color: var(--text-muted);
@@ -647,31 +684,11 @@ body {
   transition: opacity var(--t-fade);
 }
 
-/* ============================================================
-   Activity dot — absolute positioned in upper-right corner of tile
-   ============================================================ */
-
-.tile-bell-dot {
-  position: absolute;
-  bottom: 6px;
-  right: 6px;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--bell);
-  animation: bell-pulse 1.4s ease-in-out infinite;
-  z-index: 1;
-  pointer-events: none;
-}
-
-/* Sidebar variant: inline (not absolute), fits within header row */
-.sidebar-bell-dot {
-  position: static;
-  display: inline-block;
-  flex-shrink: 0;
-  width: 7px;
-  height: 7px;
-}
+/* Activity dot removed — edge bar (border-left-color) is now the state indicator.
+   .tile-bell-dot and .sidebar-bell-dot have been replaced by:
+     .session-tile--edge-bell  { border-left-color: var(--bell); }
+     .sidebar-item--edge-bell  { border-left-color: var(--bell); }
+*/
 
 /* ============================================================
    Connection status indicator states
@@ -1046,8 +1063,8 @@ body {
 
 .tile-delete {
   position: absolute;
-  top: 4px;
-  right: 6px;
+  top: 8px;
+  right: 8px;
   background: none;
   border: none;
   color: var(--text-dim);
@@ -1057,6 +1074,7 @@ body {
   border-radius: 4px;
   opacity: 0;
   transition: opacity 150ms ease;
+  pointer-events: none;
   z-index: 2;
   line-height: 1;
 }
@@ -1064,6 +1082,7 @@ body {
 .session-tile:hover .tile-delete,
 .session-tile:focus-within .tile-delete {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .tile-delete:hover {
@@ -1082,6 +1101,7 @@ body {
   border-radius: 3px;
   opacity: 0;
   transition: opacity 150ms ease;
+  pointer-events: none;
   flex-shrink: 0;
   line-height: 1;
 }
@@ -1089,6 +1109,7 @@ body {
 .sidebar-item:hover .sidebar-delete,
 .sidebar-item:focus-within .sidebar-delete {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .sidebar-delete:hover {