Add logout menu under the user pill

index.html

@@ -111,6 +111,7 @@ body {
 }
 
 .user-pill {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -120,7 +121,10 @@ body {
   border-radius: 20px;
   font-size: 13px;
   color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.1s;
 }
+.user-pill:hover { border-color: var(--border-hover); color: var(--text); }
 
 .user-pill img {
   width: 24px;
@@ -128,6 +132,22 @@ body {
   border-radius: 50%;
 }
 
+.user-menu {
+  position: absolute; top: calc(100% + 6px); right: 0;
+  min-width: 160px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
+  box-shadow: 0 8px 24px var(--shadow-color); padding: 4px; z-index: 50;
+  display: none;
+}
+.user-menu.visible { display: block; }
+.user-menu-item {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  padding: 8px 10px; border: none; background: transparent;
+  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text);
+  text-align: left; border-radius: 6px; cursor: pointer;
+}
+.user-menu-item:hover { background: var(--surface2); }
+.user-menu-item svg { width: 14px; height: 14px; flex-shrink: 0; }
+
 .sidebar {
   background: var(--surface);
   border-right: 1px solid var(--border);
@@ -780,9 +800,15 @@ pre {
       <button class="theme-btn" onclick="cycleTheme()" title="Toggle theme" id="theme-btn-app">
         <svg id="theme-icon-app" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
       </button>
-      <div class="user-pill" id="user-pill">
+      <div class="user-pill" id="user-pill" onclick="toggleUserMenu(event)">
         <img id="user-avatar" src="" alt="">
         <span id="user-name"></span>
+        <div class="user-menu" id="user-menu">
+          <button class="user-menu-item" type="button" onclick="event.stopPropagation();logout()">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+            Log out
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -2257,6 +2283,25 @@ window.login = async function() {
   window.location.href = await oauthLoginUrl({ scopes: "openid profile read-billing" });
 };
 
+window.toggleUserMenu = function(e) {
+  e.stopPropagation();
+  document.getElementById("user-menu").classList.toggle("visible");
+};
+
+window.logout = function() {
+  sessionStorage.removeItem("zl_token");
+  sessionStorage.removeItem("zl_user");
+  sessionStorage.removeItem("zl_expires");
+  // Clean OAuth params from URL if present, then reload
+  const url = new URL(window.location.href);
+  ["code", "state", "oauth_redirect", "id_token", "access_token"].forEach(k => url.searchParams.delete(k));
+  window.location.replace(url.toString().replace(/\?$/, ""));
+};
+
+document.addEventListener("click", () => {
+  document.getElementById("user-menu")?.classList.remove("visible");
+});
+
 function showApp() {
   document.getElementById("landing").style.display = "none";
   document.getElementById("app").style.display = "grid";