@skyhook-io/radar-app 1.0.2 → 1.1.0

package/src/components/portforward/PortForwardManager.tsx

@@ -42,11 +42,44 @@ interface PortForwardSession {
   localPort: number
   listenAddress: string
   serviceName?: string
+  servicePort?: number
+  scheme?: 'http' | 'https'
   startedAt: string
   status: 'running' | 'stopped' | 'error'
   error?: string
 }
 
+function sessionUrl(session: PortForwardSession): string {
+  return `${session.scheme || 'http'}://localhost:${session.localPort}`
+}
+
+function formatPortLabel(session: PortForwardSession): string {
+  if (session.servicePort && session.servicePort !== session.podPort) {
+    return `${session.servicePort} → ${session.podPort}`
+  }
+  return String(session.podPort)
+}
+
+// Build the recreate request body for toggle-listen / change-port flows.
+// When the original session was service-resolved, the recreate must also go
+// through the service path (servicePort + serviceName). Sending podName+podPort
+// would skip resolution and validate against the pod's declared containerPorts,
+// which can fail even though the original session worked: services can route to
+// any port the container actually listens on, regardless of containerPort
+// declarations. Going through service also re-resolves to a currently-running
+// pod if the original has since been replaced.
+function buildRecreateBody(session: PortForwardSession, overrides: { localPort: number; listenAddress: string }) {
+  const base = {
+    namespace: session.namespace,
+    localPort: overrides.localPort,
+    listenAddress: overrides.listenAddress,
+  }
+  if (session.serviceName && session.servicePort) {
+    return { ...base, serviceName: session.serviceName, podPort: session.servicePort }
+  }
+  return { ...base, podName: session.podName, podPort: session.podPort }
+}
+
 // --- Shared query ------------------------------------------------------------
 
 function usePortForwardQuery() {
@@ -430,14 +463,7 @@ export function PortForwardPanel() {
       const res = await fetch(apiUrl('/portforwards'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          namespace: session.namespace,
-          podName: session.podName || undefined,
-          serviceName: session.serviceName || undefined,
-          podPort: session.podPort,
-          localPort: session.localPort,
-          listenAddress: newAddress,
-        }),
+        body: JSON.stringify(buildRecreateBody(session, { localPort: session.localPort, listenAddress: newAddress })),
       })
       if (!res.ok) {
         const error = await res.json().catch(() => ({}))
@@ -484,14 +510,7 @@ export function PortForwardPanel() {
       const res = await fetch(apiUrl('/portforwards'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          namespace: session.namespace,
-          podName: session.podName || undefined,
-          serviceName: session.serviceName || undefined,
-          podPort: session.podPort,
-          localPort: newPort,
-          listenAddress: session.listenAddress,
-        }),
+        body: JSON.stringify(buildRecreateBody(session, { localPort: newPort, listenAddress: session.listenAddress })),
       })
       if (!res.ok) {
         const error = await res.json().catch(() => ({}))
@@ -521,7 +540,7 @@ export function PortForwardPanel() {
     async (session: PortForwardSession) => {
       commitInteraction()
       try {
-        await navigator.clipboard.writeText(`http://localhost:${session.localPort}`)
+        await navigator.clipboard.writeText(sessionUrl(session))
       } catch (err) {
         // Clipboard API can reject in non-secure contexts, denied permissions, or
         // when the document isn't focused. Surface the failure — the checkmark
@@ -544,7 +563,7 @@ export function PortForwardPanel() {
   const handleOpenUrl = useCallback(
     (session: PortForwardSession) => {
       commitInteraction()
-      openExternal(`http://localhost:${session.localPort}`)
+      openExternal(sessionUrl(session))
     },
     [commitInteraction]
   )
@@ -626,7 +645,7 @@ export function PortForwardPanel() {
       </div>
 
       {/* Sessions list */}
-      <div className="max-h-64 overflow-y-auto">
+      <div className="max-h-[28rem] overflow-y-auto">
         {isQueryError ? (
           <div className="p-3 text-xs bg-red-500/10 border-b border-theme-border">
             <div className={clsx('badge-sm mb-1 inline-block', SEVERITY_BADGE.error)}>
@@ -651,37 +670,84 @@ export function PortForwardPanel() {
               <div
                 key={session.id}
                 className={clsx(
-                  'p-3',
+                  'p-3 space-y-1',
                   session.status === 'error' ? 'bg-red-500/10' : 'hover:bg-theme-elevated'
                 )}
               >
+                {/* Row 1: status dot + name | stop button */}
                 <div className="flex items-start justify-between gap-2">
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      <span
-                        className={clsx(
-                          'w-2 h-2 rounded-full shrink-0',
-                          session.status === 'running' ? 'bg-green-500' : 'bg-red-500'
-                        )}
-                      />
-                      <span className="text-sm text-theme-text-primary font-medium truncate">
-                        {session.serviceName || session.podName}
-                      </span>
-                      {session.status === 'error' && (
-                        <span className={clsx('badge-sm', SEVERITY_BADGE.error)}>Failed</span>
+                  <div className="flex items-start gap-2 min-w-0 flex-1">
+                    <span
+                      className={clsx(
+                        'w-2 h-2 rounded-full shrink-0 mt-[7px]',
+                        session.status === 'running' ? 'bg-green-500' : 'bg-red-500'
                       )}
-                    </div>
-                    <div className="mt-1 text-xs text-theme-text-disabled">
-                      {session.namespace} · Port {session.podPort}
-                    </div>
-                    {session.status === 'error' && session.error && (
-                      <div className="mt-1.5 text-xs text-red-400 bg-red-500/10 px-2 py-1 rounded">
-                        {session.error}
-                      </div>
+                    />
+                    <span className="text-sm text-theme-text-primary font-medium break-all line-clamp-2">
+                      {session.serviceName || session.podName}
+                    </span>
+                    {session.status === 'error' && (
+                      <span className={clsx('badge-sm shrink-0', SEVERITY_BADGE.error)}>Failed</span>
                     )}
+                  </div>
+                  <div className="flex items-center gap-0.5 shrink-0">
                     {session.status === 'running' && (
-                      <div className="mt-1.5 flex items-center gap-2">
-                        {editingPortId === session.id ? (
+                      <Tooltip
+                        content={session.listenAddress === '0.0.0.0' ? 'Switch to localhost only' : 'Allow access from other machines'}
+                        delay={300} position="bottom" disabled={!isPanelOpen}
+                      >
+                      <button
+                        onClick={() => toggleListenAddress(session)}
+                        disabled={togglingId === session.id || changingPortId === session.id}
+                        className={clsx(
+                          'flex items-center justify-center p-1.5 rounded transition-colors',
+                          session.listenAddress === '0.0.0.0'
+                            ? `${SEVERITY_BADGE.warning} hover:bg-amber-500/30`
+                            : 'text-theme-text-disabled hover:text-theme-text-primary hover:bg-theme-hover'
+                        )}
+                      >
+                        {togglingId === session.id ? (
+                          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                        ) : session.listenAddress === '0.0.0.0' ? (
+                          <Globe className="w-3.5 h-3.5" />
+                        ) : (
+                          <Monitor className="w-3.5 h-3.5" />
+                        )}
+                      </button>
+                      </Tooltip>
+                    )}
+                    <Tooltip content={session.status === 'error' ? 'Dismiss' : 'Stop'} delay={300} position="bottom" disabled={!isPanelOpen}>
+                    <button
+                      onClick={() => {
+                        commitInteraction()
+                        stopPortForward(session.id)
+                      }}
+                      disabled={stoppingIds.has(session.id)}
+                      className="p-1.5 text-theme-text-tertiary hover:text-red-400 hover:bg-theme-hover rounded disabled:opacity-50"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                    </Tooltip>
+                  </div>
+                </div>
+
+                {/* Row 2: namespace · port translation */}
+                <div className="text-xs text-theme-text-disabled">
+                  {session.namespace} · {formatPortLabel(session)}
+                </div>
+
+                {/* Row 2.5: error message */}
+                {session.status === 'error' && session.error && (
+                  <div className="text-xs text-red-400 bg-red-500/10 px-2 py-1 rounded">
+                    {session.error}
+                  </div>
+                )}
+
+                {/* Row 3: URL (+ optional toggle) | copy + open */}
+                {session.status === 'running' && (
+                  <div className="pt-0.5 flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-1.5 min-w-0">
+                      {editingPortId === session.id ? (
                           <div className="flex items-center text-xs bg-theme-base rounded text-accent-text font-mono">
                             <span className="pl-2 py-1 text-theme-text-disabled select-none">
                               {session.listenAddress === '0.0.0.0' ? '0.0.0.0' : 'localhost'}:
@@ -724,6 +790,7 @@ export function PortForwardPanel() {
                             />
                           </div>
                         ) : (
+                          <>
                           <Tooltip content="Click to change local port" delay={300} position="bottom" disabled={!isPanelOpen}>
                           <code
                             className={clsx(
@@ -747,74 +814,33 @@ export function PortForwardPanel() {
                             <PenLine className="w-3 h-3 text-theme-text-disabled opacity-0 group-hover/port:opacity-100 transition-opacity" />
                           </code>
                           </Tooltip>
+                          </>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-0.5 shrink-0">
+                      <Tooltip content={copiedId === session.id ? 'Copied!' : 'Copy URL'} delay={300} position="bottom" disabled={!isPanelOpen}>
+                      <button
+                        onClick={() => handleCopyUrl(session)}
+                        className="p-1 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-hover rounded"
+                      >
+                        {copiedId === session.id ? (
+                          <Check className="w-3.5 h-3.5 text-green-400" />
+                        ) : (
+                          <Copy className="w-3.5 h-3.5" />
                         )}
-                        <Tooltip
-                          content={session.listenAddress === '0.0.0.0' ? 'Switch to localhost only' : 'Allow access from other machines'}
-                          delay={300} position="bottom" disabled={!isPanelOpen}
-                        >
-                        <button
-                          onClick={() => toggleListenAddress(session)}
-                          disabled={togglingId === session.id || changingPortId === session.id}
-                          className={clsx(
-                            'flex items-center gap-1 px-1.5 py-0.5 text-xs rounded transition-colors',
-                            session.listenAddress === '0.0.0.0'
-                              ? `${SEVERITY_BADGE.warning} hover:bg-amber-500/30`
-                              : 'bg-theme-elevated text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-primary'
-                          )}
-                        >
-                          {togglingId === session.id ? (
-                            <Loader2 className="w-3 h-3 animate-spin" />
-                          ) : session.listenAddress === '0.0.0.0' ? (
-                            <Globe className="w-3 h-3" />
-                          ) : (
-                            <Monitor className="w-3 h-3" />
-                          )}
-                          {session.listenAddress === '0.0.0.0' ? 'network' : 'local'}
-                        </button>
-                        </Tooltip>
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="flex items-center gap-1 shrink-0">
-                    {session.status === 'running' && (
-                      <>
-                        <Tooltip content={copiedId === session.id ? 'Copied!' : 'Copy URL'} delay={300} position="bottom" disabled={!isPanelOpen}>
-                        <button
-                          onClick={() => handleCopyUrl(session)}
-                          className="p-1.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-hover rounded"
-                        >
-                          {copiedId === session.id ? (
-                            <Check className="w-3.5 h-3.5 text-green-400" />
-                          ) : (
-                            <Copy className="w-3.5 h-3.5" />
-                          )}
-                        </button>
-                        </Tooltip>
-                        <Tooltip content="Open in browser" delay={300} position="bottom" disabled={!isPanelOpen}>
-                        <button
-                          onClick={() => handleOpenUrl(session)}
-                          className="p-1.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-hover rounded"
-                        >
-                          <ExternalLink className="w-3.5 h-3.5" />
-                        </button>
-                        </Tooltip>
-                      </>
-                    )}
-                    <Tooltip content={session.status === 'error' ? 'Dismiss' : 'Stop'} delay={300} position="bottom" disabled={!isPanelOpen}>
-                    <button
-                      onClick={() => {
-                        commitInteraction()
-                        stopPortForward(session.id)
-                      }}
-                      disabled={stoppingIds.has(session.id)}
-                      className="p-1.5 text-theme-text-tertiary hover:text-red-400 hover:bg-theme-hover rounded disabled:opacity-50"
-                    >
-                      <Trash2 className="w-3.5 h-3.5" />
-                    </button>
-                    </Tooltip>
+                      </button>
+                      </Tooltip>
+                      <Tooltip content="Open in browser" delay={300} position="bottom" disabled={!isPanelOpen}>
+                      <button
+                        onClick={() => handleOpenUrl(session)}
+                        className="p-1 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-hover rounded"
+                      >
+                        <ExternalLink className="w-3.5 h-3.5" />
+                      </button>
+                      </Tooltip>
+                    </div>
                   </div>
-                </div>
+                )}
               </div>
             ))}
           </div>

package/src/components/resources/ResourcesView.tsx

@@ -1,7 +1,7 @@
 import { useState, useMemo, useCallback, useEffect } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
-import { ApiError, fetchJSON, isForbiddenError, useSecretCertExpiry, useTopPodMetrics, useTopNodeMetrics } from '../../api/client'
+import { ApiError, debugNamespaceLog, fetchJSON, isForbiddenError, useSecretCertExpiry, useTopPodMetrics, useTopNodeMetrics } from '../../api/client'
 import { apiUrl, getAuthHeaders, getCredentialsMode, getBasename } from '../../api/config'
 import { useAPIResources } from '../../api/apiResources'
 import { initNavigationMap } from '@skyhook-io/k8s-ui'
@@ -52,7 +52,17 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
     queryFn: async () => {
       const params = new URLSearchParams()
       if (namespaces.length > 0) params.set('namespaces', namespacesParam)
-      return fetchJSON<ResourceCountsResponse>(`/resource-counts?${params}`)
+      const startedAt = performance.now()
+      debugNamespaceLog('resources:counts-fetch-start', { namespaces, params: params.toString() })
+      try {
+        return await fetchJSON<ResourceCountsResponse>(`/resource-counts?${params}`)
+      } finally {
+        debugNamespaceLog('resources:counts-fetch-end', {
+          namespaces,
+          params: params.toString(),
+          durationMs: Math.round(performance.now() - startedAt),
+        })
+      }
     },
     staleTime: 10000,
     refetchInterval: 60000, // Safety net — SSE k8s_event drives near-real-time invalidation
@@ -75,10 +85,25 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       const params = new URLSearchParams()
       if (namespaces.length > 0) params.set('namespaces', namespacesParam)
       if (isSelectedCrd && selectedKind.group) params.set('group', selectedKind.group)
+      const startedAt = performance.now()
+      debugNamespaceLog('resources:selected-kind-fetch-start', {
+        kind: selectedKind.name,
+        group: isSelectedCrd ? selectedKind.group : '',
+        namespaces,
+        params: params.toString(),
+      })
       const res = await fetch(apiUrl(`/resources/${selectedKind.name}?${params}`), {
         credentials: getCredentialsMode(),
         headers: getAuthHeaders(),
       })
+      debugNamespaceLog('resources:selected-kind-fetch-response', {
+        kind: selectedKind.name,
+        group: isSelectedCrd ? selectedKind.group : '',
+        namespaces,
+        params: params.toString(),
+        status: res.status,
+        durationMs: Math.round(performance.now() - startedAt),
+      })
       if (!res.ok) {
         const errorData = await res.json().catch(() => ({ error: `HTTP ${res.status}` }))
         throw new ApiError(errorData.error || `Failed to fetch ${selectedKind.name}`, res.status, errorData)

package/src/components/resources/resource-utils.ts

@@ -1,5 +1,6 @@
 // Re-export all resource utilities from the shared @skyhook-io/k8s-ui package.
 export * from '@skyhook-io/k8s-ui/components/resources/resource-utils'
 
-// Backward compatibility: re-export formatBytes (previously re-exported here)
+// formatBytes lives in utils/format but is re-exported here so consumers
+// can import it from the same module as the rest of the resource utilities.
 export { formatBytes } from '@skyhook-io/k8s-ui/utils/format'

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -26,8 +26,9 @@ import {
 import { useHasLimitedAccess } from '../../contexts/CapabilitiesContext'
 import type { TimelineEvent, Topology } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
-import { kindToPlural } from '../../utils/navigation'
-import { PaneLoader, pluralize } from '@skyhook-io/k8s-ui'
+import { kindToPlural, apiVersionToGroup } from '../../utils/navigation'
+import { PaneLoader, pluralize, gitOpsRouteForKind } from '@skyhook-io/k8s-ui'
+import { useNavigate } from 'react-router-dom'
 import { isChangeEvent, isHistoricalEvent, isOperation, displayKind } from '../../types'
 import { DiffViewer } from './DiffViewer'
 import { getOperationColor, getHealthBadgeColor, getEventTypeColor } from '../../utils/badge-colors'
@@ -174,7 +175,20 @@ function calculateInterestingnessWithBreakdown(lane: ResourceLane): ScoreBreakdo
 }
 
 export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode, onViewModeChange, topology, namespaces }: TimelineSwimlanesProps) {
+  const navigate = useNavigate()
   const hasLimitedAccess = useHasLimitedAccess()
+  // Timeline lane labels for GitOps CRs (Application/Kustomization/HelmRelease)
+  // deep-link to GitOps detail rather than the resource drawer — the lane is
+  // already telling the user "this controller had changes/events"; the GitOps
+  // tab is the right place to investigate further.
+  const handleLaneOpen = useCallback((kind: string, namespace: string, name: string, group?: string) => {
+    const gitOpsPath = gitOpsRouteForKind(kind, namespace, name)
+    if (gitOpsPath) {
+      navigate(gitOpsPath)
+      return
+    }
+    onResourceClick?.({ kind: kindToPlural(kind), namespace, name, group })
+  }, [navigate, onResourceClick])
   const containerRef = useRef<HTMLDivElement>(null)
   const searchInputRef = useRef<HTMLInputElement>(null)
   const [zoom, setZoom] = useState(1)
@@ -682,7 +696,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                         )}
                         <div
                           className="flex-1 min-w-0 cursor-pointer hover:bg-theme-surface/30 rounded px-1 -mx-1 group"
-                          onClick={() => onResourceClick?.({ kind: kindToPlural(lane.kind), namespace: lane.namespace, name: lane.name })}
+                          onClick={() => handleLaneOpen(lane.kind, lane.namespace, lane.name, lane.group)}
                         >
                           <div className="flex items-center gap-1">
                             <span className={clsx(
@@ -760,7 +774,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                           <div className="flex">
                             <div
                               className="w-[19.25rem] shrink-0 border-r border-theme-border/50 pl-4 pr-3 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-theme-elevated/30 group"
-                              onClick={() => onResourceClick?.({ kind: kindToPlural(lane.kind), namespace: lane.namespace, name: lane.name })}
+                              onClick={() => handleLaneOpen(lane.kind, lane.namespace, lane.name, lane.group)}
                             >
                               <div className="flex-1 min-w-0">
                                 <div className="flex items-center gap-1">
@@ -812,7 +826,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                             {/* Child lane label - indented */}
                             <div
                               className="w-[19.25rem] shrink-0 border-r border-theme-border/50 pl-4 pr-3 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-theme-elevated/30 group"
-                              onClick={() => onResourceClick?.({ kind: kindToPlural(child.kind), namespace: child.namespace, name: child.name })}
+                              onClick={() => handleLaneOpen(child.kind, child.namespace, child.name, child.group)}
                             >
                               <div className="flex-1 min-w-0">
                                 <div className="flex items-center gap-1">
@@ -1234,7 +1248,7 @@ function EventDetailPanel({ event, onClose, onResourceClick }: EventDetailPanelP
               {displayKind(event.kind)}
             </span>
             <button
-              onClick={() => onResourceClick?.({ kind: kindToPlural(event.kind), namespace: event.namespace, name: event.name })}
+              onClick={() => onResourceClick?.({ kind: kindToPlural(event.kind), namespace: event.namespace, name: event.name, group: apiVersionToGroup(event.apiVersion) })}
               className="text-theme-text-primary font-medium hover:text-accent-text"
             >
               {event.name}

package/src/components/ui/CommandPalette.tsx

@@ -2,11 +2,12 @@ import { useState, useMemo, useRef, useEffect, useCallback } from 'react'
 import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
 import { Search, X, ChevronRight } from 'lucide-react'
 import { Home, Network, List, Clock, Package, Activity, Sun, Stethoscope, DollarSign, ShieldCheck } from 'lucide-react'
+import { GitBranch } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useNamespaces, useContexts } from '../../api/client'
 import { CORE_RESOURCES, useAPIResources } from '../../api/apiResources'
 import { getResourceIcon } from '../../utils/resource-icons'
-type MainView = 'home' | 'topology' | 'resources' | 'timeline' | 'helm' | 'traffic' | 'cost' | 'audit'
+type MainView = 'home' | 'topology' | 'resources' | 'timeline' | 'helm' | 'traffic' | 'cost' | 'audit' | 'gitops'
 
 interface CommandPaletteProps {
   onClose: () => void
@@ -154,9 +155,10 @@ export function CommandPalette({
       { view: 'resources', label: 'Resources', icon: List, shortcut: '3' },
       { view: 'timeline', label: 'Timeline', icon: Clock, shortcut: '4' },
       { view: 'helm', label: 'Helm', icon: Package, shortcut: '5' },
-      { view: 'traffic', label: 'Traffic', icon: Activity, shortcut: '6' },
-      { view: 'cost', label: 'Cost', icon: DollarSign, shortcut: '7' },
-      { view: 'audit', label: 'Audit', icon: ShieldCheck, shortcut: '8' },
+      { view: 'gitops', label: 'GitOps', icon: GitBranch, shortcut: '6' },
+      { view: 'traffic', label: 'Traffic', icon: Activity, shortcut: '7' },
+      { view: 'cost', label: 'Cost', icon: DollarSign, shortcut: '8' },
+      { view: 'audit', label: 'Audit', icon: ShieldCheck, shortcut: '9' },
     ]
     for (const v of viewEntries) {
       result.push({

package/src/components/ui/ShortcutHelpOverlay.tsx

@@ -19,7 +19,7 @@ const CONTEXT_CATEGORIES: ShortcutCategory[] = ['Drawer', 'Dock']
 
 // Preferred ordering within the view section
 const VIEW_CATEGORY_ORDER: ShortcutCategory[] = [
-  'Search', 'Table', 'Resource Actions', 'Topology', 'Timeline', 'Helm',
+  'Search', 'Table', 'Resource Actions', 'Topology', 'Timeline', 'Helm', 'GitOps',
 ]
 
 const VIEW_LABELS: Record<string, string> = {
@@ -28,6 +28,7 @@ const VIEW_LABELS: Record<string, string> = {
   resources: 'Resources',
   timeline: 'Timeline',
   helm: 'Helm',
+  gitops: 'GitOps',
   traffic: 'Traffic',
 }
 

package/src/components/ui/UpdateNotification.tsx

@@ -8,6 +8,7 @@ import {
   useApplyDesktopUpdate,
 } from '../../api/client'
 import type { DesktopUpdateState } from '../../api/client'
+import { WithTooltip } from './Tooltip'
 
 const DISMISSED_KEY = 'radar-update-dismissed'
 
@@ -117,7 +118,7 @@ export function UpdateNotification() {
           <UpdateIcon state={effectiveState} />
         </div>
         <div className="flex-1 min-w-0">
-          <h4 className="text-sm font-medium text-theme-text-primary">
+          <h4 className="text-sm font-medium text-theme-text-primary pr-6">
             <UpdateTitle state={effectiveState} />
           </h4>
           <p className="text-xs text-theme-text-secondary mt-1">
@@ -140,15 +141,30 @@ export function UpdateNotification() {
 
           {/* CLI: show update command with copy button for package managers */}
           {!isDesktop && versionInfo.updateCommand ? (
-            <button
-              onClick={handleCopyCommand}
-              className="flex items-center gap-2 mt-2 px-2 py-1.5 bg-theme-elevated rounded text-xs font-mono text-theme-text-primary hover:bg-theme-surface-hover transition-colors w-full"
-            >
-              <code className="flex-1 text-left truncate">{versionInfo.updateCommand}</code>
-              <CopyIcon copied={copied} failed={copyFailed} />
-            </button>
+            <>
+              <WithTooltip tip={versionInfo.updateCommand} delay={100}>
+                <button
+                  onClick={handleCopyCommand}
+                  className="flex items-center gap-2 mt-2 px-2 py-1.5 bg-theme-elevated rounded font-mono text-theme-text-primary hover:bg-theme-surface-hover transition-colors w-full"
+                >
+                  <code className="flex-1 text-left truncate text-[11px]">{versionInfo.updateCommand}</code>
+                  <CopyIcon copied={copied} failed={copyFailed} />
+                </button>
+              </WithTooltip>
+              {/* Direct installs may have placed the binary somewhere the install
+                  script won't touch — surface a download link as a fallback. */}
+              {versionInfo.installMethod === 'direct' && versionInfo.releaseUrl && (
+                <a
+                  href={versionInfo.releaseUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1 mt-1.5 text-xs text-theme-text-tertiary hover:text-theme-text-secondary hover:underline"
+                >
+                  or download from GitHub →
+                </a>
+              )}
+            </>
           ) : (
-            /* Direct download - show release link */
             !isDesktop && versionInfo.releaseUrl && (
               <a
                 href={versionInfo.releaseUrl}
@@ -161,17 +177,18 @@ export function UpdateNotification() {
             )
           )}
         </div>
-        {/* Don't show dismiss during active update */}
-        {effectiveState !== 'downloading' && effectiveState !== 'applying' && (
-          <button
-            onClick={handleDismiss}
-            className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded shrink-0"
-            aria-label="Dismiss"
-          >
-            <X className="w-4 h-4" />
-          </button>
-        )}
       </div>
+      {/* Dismiss is absolute so it doesn't compress the chip's width.
+          fixed on the parent already establishes the positioning context. */}
+      {effectiveState !== 'downloading' && effectiveState !== 'applying' && (
+        <button
+          onClick={handleDismiss}
+          className="absolute top-2 right-2 p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+          aria-label="Dismiss"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
     </div>
   )
 }