asdasd

public/assets/desktop/desktop.css

@@ -1383,7 +1383,22 @@ h1 {
     font-size: 13px;
 }
 
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
 .tray-pill-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     border: 0;
     color: inherit;
     font: inherit;
@@ -1400,27 +1415,72 @@ h1 {
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
 }
 
+.tray-pill-account {
+    min-width: 40px;
+    padding: 6px;
+}
+
+.tray-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.16);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+}
+
+.tray-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+}
+
+.tray-icon svg {
+    width: 18px;
+    height: 18px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
 .tray-pill-status {
     min-width: 34px;
-    padding: 8px 9px;
+    padding: 8px;
     text-align: center;
-    font-size: 18px;
+    font-size: 16px;
     line-height: 1;
 }
 
-.tray-pill-status--idle {
+body .tray-pill.tray-pill-status--idle {
     color: #22c55e;
 }
 
-.tray-pill-status--running {
+body .tray-pill.tray-pill-status--running {
     color: #facc15;
 }
 
-.tray-pill-status--error,
-.tray-pill-status--unconfigured {
+body .tray-pill.tray-pill-status--error,
+body .tray-pill.tray-pill-status--unconfigured {
     color: #f97316;
 }
 
+.tray-status-dot {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 999px;
+    background: currentColor;
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 14px currentColor;
+}
+
 .tray-menu {
     position: absolute;
     right: 16px;

public/assets/desktop/desktop.js

@@ -177,9 +177,12 @@ if (payloadNode) {
 
             node.setAttribute('aria-expanded', String(debugState.open === true));
             node.classList.toggle('is-active', debugState.open === true);
-            node.textContent = debugState.open === true
-                ? `${String(debugShellApp?.label || 'Debug')} an`
-                : String(debugShellApp?.label || 'Debug');
+            node.setAttribute(
+                'title',
+                debugState.open === true
+                    ? `${String(debugShellApp?.label || 'Debug')} an`
+                    : String(debugShellApp?.label || 'Debug')
+            );
         });
     };
 
@@ -384,7 +387,12 @@ if (payloadNode) {
         const displayName = currentUserPreferences?.profile?.name || payload.session?.display_name;
 
         if (accountNode && typeof displayName === 'string' && displayName.trim() !== '') {
-            accountNode.textContent = displayName;
+            accountNode.setAttribute('title', displayName);
+
+            const avatarNode = accountNode.querySelector('.tray-avatar');
+            if (avatarNode instanceof HTMLElement) {
+                avatarNode.textContent = buildInitials(displayName);
+            }
         }
 
         if (startMenuUserName && typeof displayName === 'string' && displayName.trim() !== '') {