hermes-agent/apps/desktop/src/app/chat/sidebar/version-menu.tsx

import { useStore } from '@nanostores/react'

import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'
import { Tip } from '@/components/ui/tooltip'
import { useI18n } from '@/i18n'
import { ChevronDown, Download, Loader2, RefreshCw } from '@/lib/icons'
import { useStoreSelector } from '@/lib/use-session-slice'
import { cn } from '@/lib/utils'
import { resolveVersionStatus } from '@/lib/version-status'
import { $connection } from '@/store/session'
import {
  $backendUpdateApply,
  $backendUpdateChecking,
  $backendUpdateStatus,
  $desktopVersion,
  $updateApply,
  $updateChecking,
  $updateStatus,
  openUpdateOverlayFor
} from '@/store/updates'

export interface SidebarVersionMenuProps {
  compact?: boolean
}

/** One entry for the existing desktop and remote-backend update flows. */
export function SidebarVersionMenu({ compact = false }: SidebarVersionMenuProps) {
  const { t } = useI18n()
  const copy = t.shell.statusbar
  const version = useStore($desktopVersion)?.appVersion
  const remote = useStoreSelector($connection, connection => connection?.mode === 'remote')
  const clientCheck = useStore($updateChecking)
  const clientApply = useStore($updateApply)
  const clientUpdate = useStore($updateStatus)
  const backendCheck = useStore($backendUpdateChecking)
  const backendApply = useStore($backendUpdateApply)
  const backendUpdate = useStore($backendUpdateStatus)

  const targets = [
    { target: 'client' as const, version, checking: clientCheck, apply: clientApply, update: clientUpdate },
    ...(remote
      ? [
          {
            target: 'backend' as const,
            version: backendUpdate?.currentVersion,
            checking: backendCheck,
            apply: backendApply,
            update: backendUpdate
          }
        ]
      : [])
  ].map(entry => {
    const applying = entry.apply.applying || entry.apply.stage === 'restart'

    return {
      ...entry,
      applying,
      status: resolveVersionStatus({
        applying,
        applyMessage: entry.apply.message,
        behind: entry.update?.behind ?? 0,
        branch: entry.update?.branch,
        copy,
        remote,
        restarting: entry.apply.stage === 'restart',
        sha: entry.update?.currentSha?.slice(0, 7),
        target: entry.target,
        updateAvailable: entry.update?.updateAvailable,
        version: entry.version
      })
    }
  })

  const busy = targets.some(entry => entry.applying || entry.checking)
  const available = targets.some(entry => entry.status.hasUpdate)

  return (
    <DropdownMenu>
      <Tip label={t.settings.about.updates} side={compact ? 'right' : 'bottom'}>
        <DropdownMenuTrigger asChild>
          <Button
            aria-label={t.settings.about.updates}
            className={cn('min-w-0 max-w-full [-webkit-app-region:no-drag]', available && 'text-primary')}
            data-slot="sidebar-version-menu"
            size={compact ? 'icon-sm' : 'inline'}
            variant={compact ? 'ghost' : 'text'}
          >
            {compact ? (
              busy ? (
                <Loader2 aria-hidden className="animate-spin" />
              ) : (
                <Download aria-hidden />
              )
            ) : (
              <>
                <span className="truncate text-[0.6875rem]">
                  {version ? `v${version}` : t.settings.about.versionUnavailable}
                </span>
                {busy ? (
                  <Loader2 aria-hidden className="animate-spin" />
                ) : available ? (
                  <Download aria-hidden />
                ) : (
                  <ChevronDown aria-hidden />
                )}
              </>
            )}
          </Button>
        </DropdownMenuTrigger>
      </Tip>
      <DropdownMenuContent align="start" className="w-64 min-w-0 max-w-[calc(100vw-1rem)]" side="bottom">
        {targets.map((entry, index) => (
          <div key={entry.target}>
            {index > 0 && <DropdownMenuSeparator />}
            <DropdownMenuLabel className="truncate">
              {entry.target === 'client'
                ? copy.desktopVersion(entry.version ?? copy.unknown)
                : copy.backendVersion(entry.version ?? copy.unknown)}
            </DropdownMenuLabel>
            {entry.target === 'client' && entry.status.detail && (
              <DropdownMenuLabel className="truncate font-normal text-(--ui-text-tertiary)">
                {copy.commit(entry.status.detail)}
              </DropdownMenuLabel>
            )}
            <DropdownMenuItem onSelect={() => openUpdateOverlayFor(entry.target)}>
              {entry.applying || entry.checking ? (
                <Loader2 aria-hidden className="animate-spin" />
              ) : entry.status.hasUpdate ? (
                <Download aria-hidden />
              ) : (
                <RefreshCw aria-hidden />
              )}
              <span className="truncate">
                {entry.applying
                  ? copy.updateInProgress
                  : entry.checking
                    ? t.updates.checking
                    : entry.status.hasUpdate
                      ? t.updates.updateNow
                      : t.settings.about.checkNow}
              </span>
            </DropdownMenuItem>
          </div>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}