@skyhook-io/radar-app 0.1.1

package/src/components/ContextSwitcher.tsx

@@ -0,0 +1,481 @@
+import { useState, useRef, useEffect, useMemo } from 'react'
+import { ChevronDown, Check, Loader2, Server, AlertTriangle, Search, X } from 'lucide-react'
+import { useContexts, useSwitchContext, useClusterInfo, fetchSessionCounts, type SessionCounts } from '../api/client'
+import { useContextSwitch } from '../context/ContextSwitchContext'
+import { useToast } from '../components/ui/Toast'
+import { useDock } from '../components/dock'
+import type { ContextInfo } from '../types'
+import { parseContextName, type ParsedContextName } from '../utils/context-name'
+
+interface ContextSwitcherProps {
+  className?: string
+}
+
+interface ParsedContext extends ParsedContextName {
+  context: ContextInfo
+}
+
+// Group contexts by provider, then by account
+interface ContextGroup {
+  provider: string | null
+  account: string | null
+  items: ParsedContext[]
+}
+
+export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const [highlightedIndex, setHighlightedIndex] = useState(-1)
+  const [showConfirm, setShowConfirm] = useState(false)
+  const [pendingSwitch, setPendingSwitch] = useState<ParsedContext | null>(null)
+  const [sessionCounts, setSessionCounts] = useState<SessionCounts | null>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+
+  const { data: contexts, isLoading: contextsLoading } = useContexts()
+  const { data: clusterInfo } = useClusterInfo()
+  const switchContext = useSwitchContext()
+  const { startSwitch, endSwitch } = useContextSwitch()
+  const { showError } = useToast()
+  const { tabs } = useDock()
+
+  // Parse, group, and sort contexts
+  const { groups, hasMultipleAccounts } = useMemo(() => {
+    if (!contexts) return { groups: [], hasMultipleProviders: false, hasMultipleAccounts: false }
+
+    // Parse all contexts
+    const parsed: ParsedContext[] = contexts.map(ctx => ({
+      context: ctx,
+      ...parseContextName(ctx.name),
+    }))
+
+    // Check if we have multiple accounts (to decide whether to show group headers)
+    const accounts = new Set(parsed.map(p => `${p.provider}:${p.account}`))
+    const hasMultipleAccounts = accounts.size > 1
+
+    // Group by provider + account
+    const groupMap = new Map<string, ContextGroup>()
+    for (const p of parsed) {
+      const key = `${p.provider || 'other'}:${p.account || 'default'}`
+      if (!groupMap.has(key)) {
+        groupMap.set(key, { provider: p.provider, account: p.account, items: [] })
+      }
+      groupMap.get(key)!.items.push(p)
+    }
+
+    // Sort groups: GKE first, then EKS, then AKS, then Other
+    // Within provider, sort by account name
+    const providerOrder: Record<string, number> = { 'GKE': 0, 'EKS': 1, 'AKS': 2 }
+    const groups = Array.from(groupMap.values()).sort((a, b) => {
+      const orderA = providerOrder[a.provider || ''] ?? 3
+      const orderB = providerOrder[b.provider || ''] ?? 3
+      if (orderA !== orderB) return orderA - orderB
+      return (a.account || '').localeCompare(b.account || '')
+    })
+
+    // Sort items within each group by cluster name
+    for (const group of groups) {
+      group.items.sort((a, b) => a.clusterName.localeCompare(b.clusterName))
+    }
+
+    return { groups, hasMultipleAccounts }
+  }, [contexts])
+
+  // Filter groups by search query
+  const { filteredGroups, flatItems, itemIndexMap } = useMemo(() => {
+    const filteredGroups = search.trim()
+      ? groups
+          .map(group => ({
+            ...group,
+            items: group.items.filter(item => {
+              const searchLower = search.toLowerCase()
+              return (
+                item.clusterName.toLowerCase().includes(searchLower) ||
+                item.raw.toLowerCase().includes(searchLower) ||
+                (item.region && item.region.toLowerCase().includes(searchLower)) ||
+                (item.account && item.account.toLowerCase().includes(searchLower))
+              )
+            }),
+          }))
+          .filter(group => group.items.length > 0)
+      : groups
+
+    const flatItems = filteredGroups.flatMap(g => g.items)
+    const itemIndexMap = new Map<string, number>()
+    flatItems.forEach((item, i) => itemIndexMap.set(item.context.name, i))
+
+    return { filteredGroups, flatItems, itemIndexMap }
+  }, [groups, search])
+
+  // Reset search and highlight when dropdown opens/closes
+  useEffect(() => {
+    if (isOpen) {
+      setSearch('')
+      setHighlightedIndex(-1)
+      requestAnimationFrame(() => {
+        searchInputRef.current?.focus()
+      })
+    }
+  }, [isOpen])
+
+  // Reset highlighted index when filtered results change
+  useEffect(() => {
+    setHighlightedIndex(-1)
+  }, [search])
+
+  // Keyboard navigation for search
+  const handleSearchKeyDown = (e: React.KeyboardEvent) => {
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault()
+        setHighlightedIndex(prev => (prev < flatItems.length - 1 ? prev + 1 : prev))
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        setHighlightedIndex(prev => (prev > 0 ? prev - 1 : 0))
+        break
+      case 'Enter':
+        e.preventDefault()
+        if (highlightedIndex >= 0 && flatItems[highlightedIndex]) {
+          handleContextSwitch(flatItems[highlightedIndex])
+        } else if (flatItems.length > 0) {
+          setHighlightedIndex(0)
+        }
+        break
+      case 'Escape':
+        e.preventDefault()
+        setIsOpen(false)
+        break
+    }
+  }
+
+  // Scroll highlighted item into view
+  useEffect(() => {
+    if (!isOpen || highlightedIndex < 0 || !dropdownRef.current) return
+    const highlighted = dropdownRef.current.querySelector('[data-highlighted="true"]')
+    if (highlighted) {
+      highlighted.scrollIntoView({ block: 'nearest' })
+    }
+  }, [highlightedIndex, isOpen])
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  // Close dropdown on escape
+  useEffect(() => {
+    function handleEscape(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [])
+
+  // Check for active sessions and show confirmation if needed
+  const handleContextSwitch = async (parsed: ParsedContext) => {
+    if (parsed.context.isCurrent || switchContext.isPending) return
+
+    setIsOpen(false)
+
+    // Check for active sessions (port forwards from API + terminal tabs from dock)
+    try {
+      const counts = await fetchSessionCounts()
+      const terminalTabs = tabs.filter(t => t.type === 'terminal').length
+      const totalSessions = counts.portForwards + terminalTabs
+
+      if (totalSessions > 0) {
+        // Show confirmation dialog
+        setSessionCounts({ ...counts, execSessions: terminalTabs, total: totalSessions })
+        setPendingSwitch(parsed)
+        setShowConfirm(true)
+        return
+      }
+    } catch (error) {
+      console.error('Failed to check sessions:', error)
+      // Continue with switch even if check fails
+    }
+
+    // No active sessions, proceed with switch
+    performSwitch(parsed)
+  }
+
+  // Actually perform the context switch
+  const performSwitch = async (parsed: ParsedContext) => {
+    startSwitch({
+      raw: parsed.raw,
+      provider: parsed.provider,
+      account: parsed.account,
+      region: parsed.region,
+      clusterName: parsed.clusterName,
+    })
+    try {
+      await switchContext.mutateAsync({ name: parsed.context.name })
+      // Success - endSwitch is called by the overlay when it detects success
+    } catch (error) {
+      console.error('Failed to switch context:', error)
+      endSwitch()
+      // Show toast as fallback — if the backend set StateDisconnected,
+      // ConnectionErrorView will render with provider-specific hints.
+      // But if the request never reached the backend (network error,
+      // client timeout), connection.state stays 'connected' and the
+      // toast is the only error feedback the user gets.
+      const message = error instanceof Error ? error.message : 'Unknown error'
+      showError('Failed to switch context', message)
+    }
+  }
+
+  // Handle confirmation dialog actions
+  const handleConfirmSwitch = () => {
+    setShowConfirm(false)
+    if (pendingSwitch) {
+      performSwitch(pendingSwitch)
+      setPendingSwitch(null)
+    }
+  }
+
+  const handleCancelSwitch = () => {
+    setShowConfirm(false)
+    setPendingSwitch(null)
+    setSessionCounts(null)
+  }
+
+  // Get current context info - parse it to extract cluster name
+  const currentContextRaw = clusterInfo?.context || contexts?.find(c => c.isCurrent)?.name || 'Unknown'
+  const currentParsed = useMemo(() => parseContextName(currentContextRaw), [currentContextRaw])
+  const currentDisplayName = currentParsed.clusterName
+
+  // Check if in-cluster mode (only one context named "in-cluster")
+  const isInClusterMode = contexts?.length === 1 && contexts[0].name === 'in-cluster'
+
+  // If in-cluster mode, just show a static badge
+  if (isInClusterMode) {
+    return (
+      <div className={`flex items-center gap-2 ${className}`}>
+        <span className="px-2 py-1 bg-theme-elevated rounded text-sm font-medium text-blue-300">
+          in-cluster
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`relative ${className}`} ref={dropdownRef}>
+      {/* Trigger button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        disabled={switchContext.isPending || contextsLoading}
+        className={`
+          flex items-center gap-1.5 px-2.5 py-1.5
+          bg-theme-elevated border border-theme-border rounded text-sm font-medium
+          text-theme-text-primary hover:bg-theme-hover hover:border-theme-border-light
+          transition-colors cursor-pointer
+          disabled:opacity-50 disabled:cursor-not-allowed
+        `}
+        title={currentContextRaw}
+      >
+        {switchContext.isPending ? (
+          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+        ) : (
+          <Server className="w-3.5 h-3.5 text-theme-text-secondary" />
+        )}
+        <span className="max-w-[120px] sm:max-w-[220px] truncate">
+          {switchContext.isPending ? 'Switching...' : currentDisplayName}
+        </span>
+        <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      {/* Dropdown menu */}
+      {isOpen && !contextsLoading && contexts && (
+        <div className="absolute top-full left-0 mt-1 z-50 min-w-[280px] max-w-[420px] bg-theme-surface border border-theme-border-light rounded-lg shadow-xl overflow-hidden">
+          {/* Search input */}
+          {contexts.length > 1 && (
+            <div className="p-2 border-b border-theme-border">
+              <div className="relative">
+                <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-text-tertiary" />
+                <input
+                  ref={searchInputRef}
+                  type="text"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  onKeyDown={handleSearchKeyDown}
+                  placeholder="Search clusters..."
+                  className="w-full bg-theme-base text-theme-text-primary text-xs rounded px-2 py-1.5 pl-7 pr-7 border border-theme-border-light focus:outline-none focus:ring-1 focus:ring-blue-500 placeholder:text-theme-text-tertiary"
+                />
+                {search && (
+                  <button
+                    type="button"
+                    onClick={() => setSearch('')}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-theme-text-tertiary hover:text-theme-text-secondary"
+                  >
+                    <X className="w-3.5 h-3.5" />
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+
+          <div className="max-h-[400px] overflow-y-auto">
+            {flatItems.length === 0 ? (
+              <div className="px-3 py-6 text-center text-xs text-theme-text-tertiary">
+                No clusters match "{search}"
+              </div>
+            ) : (
+              filteredGroups.map((group, groupIndex) => {
+                const showHeader = hasMultipleAccounts
+                const headerLabel = group.provider
+                  ? `${group.provider}${group.account ? ` · ${group.account}` : ''}`
+                  : 'Other'
+
+                return (
+                  <div key={`${group.provider}:${group.account}`}>
+                    {groupIndex > 0 && (
+                      <div className="border-t border-theme-border-light my-1" />
+                    )}
+                    {showHeader && (
+                      <div className="px-3 py-1.5 bg-theme-elevated/30">
+                        <span className="text-[10px] text-theme-text-tertiary font-medium">
+                          {headerLabel}
+                        </span>
+                      </div>
+                    )}
+                    {group.items.map((item) => {
+                      const itemIndex = itemIndexMap.get(item.context.name) ?? -1
+                      return (
+                        <button
+                          key={item.context.name}
+                          data-highlighted={itemIndex === highlightedIndex}
+                          onClick={() => handleContextSwitch(item)}
+                          onMouseEnter={() => setHighlightedIndex(itemIndex)}
+                          disabled={item.context.isCurrent || switchContext.isPending}
+                          className={`
+                            w-full flex items-center gap-2 px-3 py-2 text-left
+                            transition-colors
+                            ${item.context.isCurrent
+                              ? 'bg-blue-500/10'
+                              : itemIndex === highlightedIndex
+                                ? 'bg-theme-hover cursor-pointer'
+                                : 'hover:bg-theme-hover cursor-pointer'
+                            }
+                            disabled:opacity-50
+                          `}
+                        >
+                          <div className="shrink-0 w-4 h-4 flex items-center justify-center">
+                            {item.context.isCurrent ? (
+                              <Check className="w-3.5 h-3.5 text-blue-600 dark:text-blue-400" />
+                            ) : (
+                              <div className="w-1.5 h-1.5 rounded-full bg-theme-text-tertiary/30" />
+                            )}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-1.5">
+                              <span className={`text-sm font-medium truncate ${item.context.isCurrent ? 'text-blue-600 dark:text-blue-400' : 'text-theme-text-primary'}`}>
+                                {item.clusterName}
+                              </span>
+                              {item.region && (
+                                <span className="shrink-0 text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 rounded">
+                                  {item.region}
+                                </span>
+                              )}
+                              {item.context.isCurrent && (
+                                <span className="shrink-0 text-[9px] text-blue-600 dark:text-blue-400">
+                                  ●
+                                </span>
+                              )}
+                            </div>
+                            {item.provider && (
+                              <div className="text-[10px] text-theme-text-tertiary truncate mt-0.5" title={item.raw}>
+                                {item.raw}
+                              </div>
+                            )}
+                          </div>
+                        </button>
+                      )
+                    })}
+                  </div>
+                )
+              })
+            )}
+          </div>
+
+          {/* Footer with count */}
+          {contexts.length > 1 && search && flatItems.length > 0 && (
+            <div className="px-3 py-1.5 text-[10px] text-theme-text-tertiary border-t border-theme-border bg-theme-base">
+              {flatItems.length === contexts.length
+                ? `${contexts.length} clusters`
+                : `${flatItems.length} of ${contexts.length} clusters`}
+            </div>
+          )}
+
+          {/* Error message if switch failed */}
+          {switchContext.isError && (
+            <div className="px-3 py-2 bg-red-500/10 border-t border-red-500/20">
+              <span className="text-xs text-red-400">
+                {switchContext.error?.message}
+              </span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Confirmation modal */}
+      {showConfirm && sessionCounts && pendingSwitch && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50">
+          <div className="bg-theme-surface border border-theme-border rounded-lg shadow-xl max-w-md mx-4 overflow-hidden">
+            <div className="px-4 py-3 border-b border-theme-border flex items-center gap-2">
+              <AlertTriangle className="w-5 h-5 text-amber-400" />
+              <span className="font-medium text-theme-text-primary">Active Sessions</span>
+            </div>
+            <div className="px-4 py-4">
+              <p className="text-sm text-theme-text-secondary mb-3">
+                Switching contexts will terminate active sessions:
+              </p>
+              <ul className="text-sm text-theme-text-primary space-y-1 mb-4">
+                {sessionCounts.portForwards > 0 && (
+                  <li className="flex items-center gap-2">
+                    <span className="w-1.5 h-1.5 rounded-full bg-blue-400" />
+                    {sessionCounts.portForwards} port forward{sessionCounts.portForwards !== 1 ? 's' : ''}
+                  </li>
+                )}
+                {sessionCounts.execSessions > 0 && (
+                  <li className="flex items-center gap-2">
+                    <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
+                    {sessionCounts.execSessions} terminal session{sessionCounts.execSessions !== 1 ? 's' : ''}
+                  </li>
+                )}
+              </ul>
+              <p className="text-xs text-theme-text-tertiary">
+                Switch to: <span className="text-theme-text-secondary">{pendingSwitch.clusterName}</span>
+              </p>
+            </div>
+            <div className="px-4 py-3 border-t border-theme-border flex justify-end gap-2">
+              <button
+                onClick={handleCancelSwitch}
+                className="px-3 py-1.5 text-sm rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleConfirmSwitch}
+                className="px-3 py-1.5 text-sm rounded-md bg-amber-500 hover:bg-amber-600 text-white transition-colors"
+              >
+                Switch Anyway
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+    </div>
+  )
+}

package/src/components/DebugOverlay.tsx

@@ -0,0 +1,94 @@
+import { useState } from 'react'
+import { Bug, X, ChevronDown, ChevronUp } from 'lucide-react'
+import { useRuntimeStats } from '../api/client'
+
+function formatUptime(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`
+  const hours = Math.floor(seconds / 3600)
+  const mins = Math.floor((seconds % 3600) / 60)
+  return `${hours}h ${mins}m`
+}
+
+export function DebugOverlay() {
+  const [visible, setVisible] = useState(true)
+  const [expanded, setExpanded] = useState(false)
+  const { data } = useRuntimeStats(visible)
+
+  if (!visible) {
+    return (
+      <button
+        onClick={() => setVisible(true)}
+        className="fixed bottom-3 right-3 z-50 p-2 bg-theme-surface/90 border border-theme-border rounded-lg text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
+        title="Show debug stats"
+      >
+        <Bug className="w-4 h-4" />
+      </button>
+    )
+  }
+
+  const runtime = data?.runtime
+
+  return (
+    <div className="fixed bottom-3 right-3 z-50 bg-theme-surface/95 border border-theme-border rounded-lg shadow-lg backdrop-blur-sm text-xs font-mono">
+      {/* Header */}
+      <div className="flex items-center gap-2 px-2 py-1.5 border-b border-theme-border/50">
+        <Bug className="w-3 h-3 text-theme-text-tertiary" />
+        <span className="text-theme-text-secondary">Debug</span>
+        <div className="flex-1" />
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="p-0.5 text-theme-text-tertiary hover:text-theme-text-secondary"
+        >
+          {expanded ? <ChevronDown className="w-3 h-3" /> : <ChevronUp className="w-3 h-3" />}
+        </button>
+        <button
+          onClick={() => setVisible(false)}
+          className="p-0.5 text-theme-text-tertiary hover:text-theme-text-secondary"
+        >
+          <X className="w-3 h-3" />
+        </button>
+      </div>
+
+      {/* Stats */}
+      <div className="px-2 py-1.5 space-y-0.5">
+        {runtime ? (
+          <>
+            <div className="flex justify-between gap-4">
+              <span className="text-theme-text-tertiary">Heap</span>
+              <span className="text-theme-text-primary">{runtime.heapMB.toFixed(1)} MB</span>
+            </div>
+            {expanded && (
+              <>
+                <div className="flex justify-between gap-4">
+                  <span className="text-theme-text-tertiary">Objects</span>
+                  <span className="text-theme-text-primary">{runtime.heapObjectsK.toFixed(1)}K</span>
+                </div>
+                <div className="flex justify-between gap-4">
+                  <span className="text-theme-text-tertiary">Goroutines</span>
+                  <span className="text-theme-text-primary">{runtime.goroutines}</span>
+                </div>
+                <div className="flex justify-between gap-4">
+                  <span className="text-theme-text-tertiary">Informers</span>
+                  <span className="text-theme-text-primary">
+                    {runtime.typedInformers ?? 16}+{runtime.dynamicInformers ?? 0}
+                  </span>
+                </div>
+                <div className="flex justify-between gap-4">
+                  <span className="text-theme-text-tertiary">Uptime</span>
+                  <span className="text-theme-text-primary">{formatUptime(runtime.uptimeSeconds)}</span>
+                </div>
+                <div className="flex justify-between gap-4">
+                  <span className="text-theme-text-tertiary">Resources</span>
+                  <span className="text-theme-text-primary">{data?.resourceCount ?? '-'}</span>
+                </div>
+              </>
+            )}
+          </>
+        ) : (
+          <span className="text-theme-text-tertiary">Loading...</span>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/UserMenu.tsx

@@ -0,0 +1,87 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { User, LogOut } from 'lucide-react'
+import { useAuthMe } from '../api/client'
+import { useQueryClient } from '@tanstack/react-query'
+
+export function UserMenu() {
+  const { data: authMe } = useAuthMe()
+  const [isOpen, setIsOpen] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const queryClient = useQueryClient()
+
+  // Close on click outside
+  useEffect(() => {
+    if (!isOpen) return
+    function handleClick(e: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [isOpen])
+
+  const handleLogout = useCallback(async () => {
+    let redirectTo = '/'
+    try {
+      const res = await fetch('/auth/logout', { credentials: 'same-origin' })
+      const data = await res.json()
+      if (data.redirectTo) {
+        redirectTo = data.redirectTo
+      }
+    } catch (err) {
+      console.error('[logout] Failed to complete server-side logout:', err)
+    }
+    queryClient.clear()
+    window.location.href = redirectTo
+  }, [queryClient])
+
+  if (!authMe?.authEnabled || !authMe?.username) {
+    return null
+  }
+
+  const initials = authMe.username
+    .split('@')[0]
+    .split(/[._-]/)
+    .slice(0, 2)
+    .map(s => s[0]?.toUpperCase() || '')
+    .join('')
+
+  return (
+    <div ref={menuRef} className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-7 h-7 rounded-full bg-blue-500/15 text-blue-500 flex items-center justify-center text-xs font-medium hover:bg-blue-500/25 transition-colors"
+        title={authMe.username}
+      >
+        {initials || <User className="w-3.5 h-3.5" />}
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 top-full mt-1.5 w-56 bg-theme-surface border border-theme-border rounded-lg shadow-lg z-50 py-1">
+          <div className="px-3 py-2 border-b border-theme-border">
+            <p className="text-sm font-medium text-theme-text-primary truncate">{authMe.username}</p>
+            {authMe.groups && authMe.groups.length > 0 && (
+              <p className="text-[11px] text-theme-text-tertiary mt-0.5 truncate">
+                {authMe.groups.join(', ')}
+              </p>
+            )}
+          </div>
+          {authMe.authMode === 'proxy' ? (
+            <p className="px-3 py-1.5 text-[11px] text-theme-text-tertiary">
+              Session managed by auth proxy
+            </p>
+          ) : (
+            <button
+              onClick={handleLogout}
+              className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-theme-text-secondary hover:bg-theme-hover transition-colors"
+            >
+              <LogOut className="w-3.5 h-3.5" />
+              Logout
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}