@skyhook-io/radar-app 1.3.2 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",

package/src/App.tsx

@@ -6,7 +6,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useNavigate, useLocation, useSearchParams, useNavigationType, NavigationType } from 'react-router-dom'
 import { HomeView } from './components/home/HomeView'
 import { DebugOverlay } from './components/DebugOverlay'
-import { TopologyGraph, TopologyFilterSidebar, TopologyControls, gitOpsRouteForKind } from '@skyhook-io/k8s-ui'
+import { TopologyGraph, TopologySearch, TopologyFilterSidebar, TopologyControls, gitOpsRouteForKind } from '@skyhook-io/k8s-ui'
 import { TimelineView } from './components/timeline/TimelineView'
 import { ResourcesView } from './components/resources/ResourcesView'
 import { serializeColumnFilters } from './components/resources/resource-utils'
@@ -17,6 +17,7 @@ import { HelmView } from './components/helm/HelmView'
 import { TrafficView } from './components/traffic/TrafficView'
 import { CostView } from './components/cost/CostView'
 import { AuditView } from './components/audit/AuditView'
+import { IssuesPane } from './components/issues/IssuesPane'
 import { GitOpsView } from './components/gitops/GitOpsView'
 import { HelmReleaseDrawer } from './components/helm/HelmReleaseDrawer'
 import { PortForwardProvider, PortForwardIndicator, PortForwardPanel } from './components/portforward/PortForwardManager'
@@ -41,7 +42,7 @@ import { routePath, apiUrl, getAuthHeaders, getCredentialsMode } from './api/con
 import { KeyboardShortcutProvider, useRegisterShortcut, useRegisterShortcuts } from './hooks/useKeyboardShortcuts'
 import { useAnimatedUnmount } from './hooks/useAnimatedUnmount'
 import radarLoadingIcon from '@skyhook-io/k8s-ui/assets/radar/radar-icon-loading.svg'
-import { RefreshCw, Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, Settings, SquareTerminal, ShieldCheck, GitBranch, Shield as ShieldIcon } from 'lucide-react'
+import { RefreshCw, Network, List, Clock, Package, Sun, Moon, Activity, Home, Star, Search, Bug, Settings, SquareTerminal, ShieldCheck, GitBranch } from 'lucide-react'
 import { useTheme } from './context/ThemeContext'
 import { Tooltip } from './components/ui/Tooltip'
 import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNamespacePicker'
@@ -91,34 +92,8 @@ const FLEET_MODE_KINDS = new Set<NodeKind>([
 ])
 
 // Convert API resource name back to topology node ID prefix
-function apiResourceToNodeIdPrefix(apiResource: string): string {
-  const prefixMap: Record<string, string> = {
-    'pods': 'pod',
-    'services': 'service',
-    'deployments': 'deployment',
-    'daemonsets': 'daemonset',
-    'statefulsets': 'statefulset',
-    'replicasets': 'replicaset',
-    'ingresses': 'ingress',
-    'gateways': 'gateway',
-    'httproutes': 'httproute',
-    'grpcroutes': 'grpcroute',
-    'tcproutes': 'tcproute',
-    'tlsroutes': 'tlsroute',
-    'configmaps': 'configmap',
-    'secrets': 'secret',
-    'horizontalpodautoscalers': 'horizontalpodautoscaler',
-    'jobs': 'job',
-    'cronjobs': 'cronjob',
-    'persistentvolumeclaims': 'persistentvolumeclaim',
-    'namespaces': 'namespace',
-    'httpproxies': 'httpproxy', // Contour
-  }
-  return prefixMap[apiResource] || apiResource.replace(/s$/, '')
-}
-
 // Extended MainView type that includes traffic and cost
-type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'audit' | 'gitops' | 'compare'
+type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'audit' | 'gitops' | 'compare' | 'issues'
 
 // Extract view from URL path
 function getViewFromPath(pathname: string): ExtendedMainView {
@@ -134,6 +109,7 @@ function getViewFromPath(pathname: string): ExtendedMainView {
   if (path === 'audit') return 'audit'
   if (path === 'gitops') return 'gitops'
   if (path === 'compare') return 'compare'
+  if (path === 'issues') return 'issues'
   return 'home'
 }
 
@@ -301,6 +277,8 @@ function AppInner() {
   // Topology filter state
   const [visibleKinds, setVisibleKinds] = useState<Set<NodeKind>>(() => new Set(DEFAULT_VISIBLE_KINDS))
   const [filterSidebarCollapsed, setFilterSidebarCollapsed] = useState(false)
+  // Topology node-search → canvas focus request (nonce lets the same node re-focus)
+  const [topologyFocus, setTopologyFocus] = useState<{ id: string; nonce: number } | null>(null)
   // Track CRD kinds that have been auto-added to visibleKinds so we don't override user toggles
   const seededCRDKindsRef = useRef<Set<string>>(new Set())
 
@@ -344,6 +322,14 @@ function AppInner() {
   // Suppress the mainView-change clear effect during controlled expand/collapse transitions.
   const suppressViewClearRef = useRef(false)
 
+  // On a history Pop (back/forward) the URL is authoritative. The URL-write
+  // effect, running with not-yet-synced state, would otherwise write the stale
+  // state back and revert the Pop — and oscillate with the URL→state read
+  // effect (infinite re-render, React #185, blank page). Suppress the writer
+  // for the synchronous reconciliation burst after a Pop, then auto-clear (see
+  // the arming effect) so later user-driven writes are never affected.
+  const skipUrlWriteAfterPopRef = useRef(false)
+
   // Close resource drawer when the /resources route no longer matches the
   // selected drawer resource. This covers both in-view kind switches and
   // cross-kind navigations from expanded drawers (for example Node -> View Pods).
@@ -409,6 +395,27 @@ function AppInner() {
     }
   }, [selectedResource])
 
+  // Navigate from a detector finding (Audit / Issues) to the resources list for
+  // its kind, opening the resource. Shared by both queues — the body was
+  // duplicated verbatim at each render site. Encodes the opened resource in the
+  // URL (?resource=ns/name) — the same deep-link shape the resources view
+  // round-trips — so refresh/share keeps the drawer open instead of dropping it.
+  const navigateToResourceList = useCallback((resource: SelectedResource) => {
+    const pluralKind = kindToPlural(resource.kind)
+    setSelectedResource({ ...resource, kind: pluralKind })
+    const newParams = new URLSearchParams(searchParams)
+    newParams.delete('kind')
+    newParams.delete('mode')
+    newParams.delete('group')
+    newParams.set('resource', resource.namespace ? `${resource.namespace}/${resource.name}` : resource.name)
+    if (resource.group) {
+      newParams.set('apiGroup', resource.group)
+    } else {
+      newParams.delete('apiGroup')
+    }
+    navigate({ pathname: `/resources/${pluralKind}`, search: newParams.toString() })
+  }, [searchParams, navigate])
+
   // Collapse from expanded WorkloadView back to drawer
   const handleCollapseFromExpanded = useCallback(() => {
     suppressViewClearRef.current = true
@@ -843,10 +850,35 @@ function AppInner() {
   // eslint-disable-next-line react-hooks/exhaustive-deps -- namespaces and setActiveNamespace are intentionally excluded; we only react to server-side changes.
   }, [namespaceScope, namespaceScopeKey])
 
+  // Arm the skip on every history Pop (location.key changes per nav), then
+  // clear it on the next macrotask. The revert/oscillation is a synchronous
+  // re-render burst, so a macrotask-deferred clear covers it; clearing
+  // afterward means a stale arm can't survive into an unrelated later write
+  // (e.g. a Pop that changes none of the write effect's deps would otherwise
+  // leave the flag set and silently drop the next user-driven URL write).
+  useEffect(() => {
+    if (navigationType !== NavigationType.Pop) {
+      // Any non-Pop navigation clears the guard. Without this, a Push/Replace
+      // that lands before the macrotask fires would run this cleanup (cancelling
+      // the timeout) and re-run as a no-op, leaving the flag stuck true and
+      // silently suppressing all later URL writes.
+      skipUrlWriteAfterPopRef.current = false
+      return
+    }
+    skipUrlWriteAfterPopRef.current = true
+    const id = setTimeout(() => { skipUrlWriteAfterPopRef.current = false }, 0)
+    return () => clearTimeout(id)
+  }, [location.key, navigationType])
+
   // Update URL query params when state changes (path is handled by setMainView)
   // Read from window.location.search (not React Router's searchParams) to preserve
   // params set by child components via window.history.replaceState (e.g., kind from ResourcesView).
   useEffect(() => {
+    // Don't write (and revert) the URL while state is still catching up to a
+    // Pop — the read effect below owns syncing state from the popped URL. The
+    // flag auto-clears on the next macrotask, so this never blocks a later
+    // user-driven write.
+    if (skipUrlWriteAfterPopRef.current) return
     const currentSearch = window.location.search
     const params = new URLSearchParams(currentSearch)
 
@@ -1045,6 +1077,21 @@ function AppInner() {
     }
   }, [displayedTopology, visibleKinds, namespaces, topologyMode])
 
+  // The graph node id of the currently open resource, used to highlight it on
+  // the canvas. Looked up from the topology (not reconstructed) because node
+  // ids are `<lowercaseKind>/<ns>/<name>` with special prefixes for CRD
+  // collisions — rebuilding the string can't match those reliably.
+  const selectedNodeId = useMemo(() => {
+    if (!selectedResource) return undefined
+    const ns = selectedResource.namespace || ''
+    const match = topology?.nodes.find(n =>
+      ((n.data.namespace as string) || '') === ns &&
+      n.name === selectedResource.name &&
+      (kindToPlural(n.kind) === selectedResource.kind || n.kind === selectedResource.kind)
+    )
+    return match?.id
+  }, [selectedResource, topology])
+
   // Filter handlers
   const handleToggleKind = useCallback((kind: NodeKind) => {
     setVisibleKinds(prev => {
@@ -1253,18 +1300,6 @@ function AppInner() {
             </button>
           )}
 
-          {/* My Permissions — what the current user can do in the cluster,
-              computed live by the apiserver via SelfSubjectRulesReview.
-              Available in embedded mode too — Radar Hub users still benefit
-              from "why can't I do X" debugging. */}
-          <button
-            onClick={() => setShowMyPermissions(true)}
-            className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
-            title="My permissions in this cluster"
-          >
-            <ShieldIcon className="w-4 h-4" />
-          </button>
-
           {/* User menu (when auth enabled) — hidden in embedded mode;
               host app typically provides its own via rightExtras. */}
           {!navCustomization.embedded && <UserMenu />}
@@ -1497,13 +1532,27 @@ function AppInner() {
                     groupingMode={effectiveGroupingMode}
                     hideGroupHeader={hideGroupHeader}
                     onNodeClick={handleNodeClick}
-                    selectedNodeId={selectedResource ? `${apiResourceToNodeIdPrefix(selectedResource.kind)}-${selectedResource.namespace}-${selectedResource.name}` : undefined}
+                    selectedNodeId={selectedNodeId}
                     paused={topologyPaused}
                     onTogglePause={handleTogglePause}
                     onMaximizeNamespace={(ns) => setActiveNamespace.mutate({ namespaces: [ns] })}
                     namespaceBreadcrumb={namespaces.length === 1 ? namespaces[0] : undefined}
                     onClearNamespace={namespaces.length >= 1 ? () => setActiveNamespace.mutate({ namespaces: [] }) : undefined}
                     namespacesKey={namespaces.join(',')}
+                    focusNodeId={topologyFocus?.id}
+                    focusNonce={topologyFocus?.nonce}
+                  />
+
+                  {/* Topology node search overlay - top left */}
+                  <TopologySearch
+                    nodes={filteredTopology?.nodes ?? []}
+                    allNodes={topology?.nodes}
+                    viewModeLabel={topologyMode === 'fleet' ? 'Fleet' : topologyMode === 'traffic' ? 'Traffic' : 'Resources'}
+                    onNodeSelect={handleNodeClick}
+                    onZoomToNode={(id) => setTopologyFocus((prev) => ({ id, nonce: (prev?.nonce ?? 0) + 1 }))}
+                    // Stack below the namespace breadcrumb (shown only for a single
+                    // namespace) so the two don't overlap in the top-left corner.
+                    triggerClassName={namespaces.length === 1 ? 'top-12 left-3' : 'top-3 left-3'}
                   />
 
                   {/* Topology controls overlay - top right */}
@@ -1612,21 +1661,18 @@ function AppInner() {
           <AuditView
             namespaces={namespaces}
             onBack={() => setMainView('home')}
-            onNavigateToResource={(resource) => {
-              const pluralKind = kindToPlural(resource.kind)
-              setSelectedResource({ ...resource, kind: pluralKind })
-              const newParams = new URLSearchParams(searchParams)
-              newParams.delete('kind')
-              newParams.delete('mode')
-              newParams.delete('group')
-              newParams.delete('resource')
-              if (resource.group) {
-                newParams.set('apiGroup', resource.group)
-              } else {
-                newParams.delete('apiGroup')
-              }
-              navigate({ pathname: `/resources/${pluralKind}`, search: newParams.toString() })
-            }}
+            onNavigateToResource={navigateToResourceList}
+          />
+        )}
+
+        {/* Issues — per-cluster live triage queue (hidden route: not yet in the
+            nav `views` list; reachable at /issues). Same shared <IssuesView> the
+            Hub fleet uses; resource clicks open the standard resource drawer. */}
+        {mainView === 'issues' && (
+          <IssuesPane
+            namespaces={namespaces}
+            onBack={() => setMainView('home')}
+            onNavigateToResource={navigateToResourceList}
           />
         )}
 
@@ -1749,7 +1795,14 @@ function AppInner() {
       {diagnosticsOverlay.shouldRender && <DiagnosticsOverlay isOpen={diagnosticsOverlay.isOpen} onClose={() => setShowDiagnostics(false)} />}
 
       {/* Settings dialog */}
-      <SettingsDialog open={showSettings} onClose={() => setShowSettings(false)} />
+      <SettingsDialog
+        open={showSettings}
+        onClose={() => setShowSettings(false)}
+        onShowMyPermissions={() => {
+          setShowSettings(false)
+          setShowMyPermissions(true)
+        }}
+      />
       <MyPermissionsDialog open={showMyPermissions} onClose={() => setShowMyPermissions(false)} />
 
       {/* Debug overlay - only in dev mode */}

package/src/api/client.ts

@@ -237,7 +237,7 @@ export interface DashboardCRDCount {
 }
 
 // Re-export shared types from k8s-ui — single source of truth
-import type { AuditCardData, AuditFinding, ResourceGroup, CheckMeta, Check } from '@skyhook-io/k8s-ui'
+import type { AuditCardData, AuditFinding, ResourceGroup, CheckMeta, Check, Issue } from '@skyhook-io/k8s-ui'
 export type DashboardAudit = AuditCardData
 export type { AuditFinding, ResourceGroup, CheckMeta, Check }
 
@@ -338,6 +338,34 @@ export function useAudit(namespaces: string[] = []) {
   })
 }
 
+// Live cluster Issues — the grouped triage queue (radar's /api/issues =
+// internal/issues.Compose+Classify+Group). Single-cluster here; the Hub fleet
+// view fans the same shape across clusters. keepPreviousData semantics via
+// placeholderData so the queue doesn't flash empty on the 30s refresh.
+// total = rows returned (after the cap); total_matched = rows that matched
+// before the cap. total_matched > total means the queue was truncated — surface
+// that honestly rather than presenting a capped list as if it were complete.
+export interface IssuesResponse {
+  issues: Issue[]
+  total?: number
+  total_matched?: number
+  // Present only when RBAC visibility is incomplete (absent = full access).
+  // state 'degraded' means core workload reads are denied, so an empty list may
+  // mean "can't see" rather than "nothing broken" — the UI must say so.
+  visibility?: { state?: string; impact?: string }
+}
+
+export function useIssues(namespaces: string[] = []) {
+  const params = namespaces.length > 0 ? `?namespaces=${namespaces.join(',')}` : ''
+  return useQuery<IssuesResponse>({
+    queryKey: ['issues', namespaces],
+    queryFn: () => fetchJSON(`/issues${params}`),
+    staleTime: 30000,
+    refetchInterval: 30000,
+    placeholderData: (prev) => prev,
+  })
+}
+
 export function useResourceAudit(kind: string, namespace: string, name: string) {
   return useQuery<AuditFinding[]>({
     queryKey: ['audit', 'resource', kind, namespace, name],

package/src/components/ConnectionErrorView.tsx

@@ -197,13 +197,13 @@ export function ConnectionErrorView({ connection, onRetry, isRetrying }: Connect
             Context: {connection.context ? (
               <ClusterName name={connection.context} />
             ) : (
-              <span className="font-mono text-theme-text-primary">(none)</span>
+              <span className="inline-code">(none)</span>
             )}
           </p>
 
           {connection.clusterName && (
             <p className="text-sm text-theme-text-secondary mb-4">
-              Cluster: <span className="font-mono text-theme-text-primary">{connection.clusterName}</span>
+              Cluster: <span className="inline-code">{connection.clusterName}</span>
             </p>
           )}
 

package/src/components/helm/ChartBrowser.tsx

@@ -307,7 +307,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                   <div className="text-sm mt-1">
                     <p>No Helm repositories configured.</p>
                     <p className="mt-1">
-                      Add repositories using <code className="bg-theme-elevated px-1 rounded">helm repo add</code>
+                      Add repositories using <code className="inline-code">helm repo add</code>
                     </p>
                     <p className="mt-2">
                       Or try searching on <button onClick={() => setChartSource('artifacthub')} className="text-accent-text hover:underline">ArtifactHub</button>
@@ -476,7 +476,9 @@ function LocalChartCard({ chart, onSelect }: LocalChartCardProps) {
         )}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
-            <h4 className="text-sm font-medium text-theme-text-primary truncate">{chart.name}</h4>
+            <Tooltip content={chart.name} wrapperClassName="min-w-0 flex-1">
+              <h4 className="text-sm font-medium text-theme-text-primary truncate">{chart.name}</h4>
+            </Tooltip>
             {chart.deprecated && (
               <span className={clsx('px-1 py-0.5 text-[10px] rounded', SEVERITY_BADGE.warning)}>
                 deprecated
@@ -540,7 +542,9 @@ function ArtifactHubChartCard({ chart, onSelect }: ArtifactHubChartCardProps) {
 
         {/* Name and org */}
         <div className="flex-1 min-w-0">
-          <h4 className="text-sm font-medium text-theme-text-primary truncate">{chart.name}</h4>
+          <Tooltip content={chart.name} wrapperClassName="w-full">
+            <h4 className="text-sm font-medium text-theme-text-primary truncate">{chart.name}</h4>
+          </Tooltip>
           <div className="flex items-center gap-2 mt-0.5 text-xs text-theme-text-tertiary">
             <span className="flex items-center gap-1">
               <Building2 className="w-3 h-3" />

package/src/components/helm/InstallWizard.tsx

@@ -893,7 +893,7 @@ function ReviewStep({
           <div>
             <p className="text-sm font-medium text-amber-400">Installing from ArtifactHub</p>
             <p className="text-xs text-theme-text-secondary mt-1">
-              This chart will be installed from: <code className="bg-theme-elevated px-1 rounded">{artifactHubRepoUrl || repo}</code>
+              This chart will be installed from: <code className="inline-code">{artifactHubRepoUrl || repo}</code>
             </p>
           </div>
         </div>

package/src/components/helm/RoleGatedPanel.tsx

@@ -38,8 +38,8 @@ export function RoleGatedPanel({ min, feature, children }: RoleGatedPanelProps)
         Your role can't view {feature}
       </div>
       <div className="mt-1 max-w-md text-xs text-theme-text-secondary">
-        You're signed in as <span className="font-mono text-theme-text-primary">{role ?? 'viewer'}</span>.
-        This view requires <span className="font-mono text-theme-text-primary">{min}</span> or higher.
+        You're signed in as <span className="inline-code">{role ?? 'viewer'}</span>.
+        This view requires <span className="inline-code">{min}</span> or higher.
         Ask a {min} or owner if you need access.
       </div>
     </div>

package/src/components/home/ClusterHealthCard.tsx

@@ -52,7 +52,7 @@ function MetricsUnavailableHint({ platform, metricsServerAvailable }: { platform
       content={
         <div className="space-y-1">
           <div className="font-medium">How to fix</div>
-          <div>{isPreInstalled ? hint : <>Install by running:<br /><code className="text-[10px] opacity-80">{hint}</code></>}</div>
+          <div>{isPreInstalled ? hint : <>Install by running:<br /><code className="inline-code text-[10px] opacity-80">{hint}</code></>}</div>
         </div>
       }
       position="bottom"

package/src/components/home/HomeView.tsx

@@ -194,6 +194,7 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
           {hasProblems && (
             <ProblemsPanel
               problems={data.problems}
+              onNavigateToIssues={() => onNavigateToView('issues')}
               onResourceClick={onNavigateToResource}
             />
           )}
@@ -216,19 +217,29 @@ function BandItem({ children }: { children: ReactNode }) {
 
 interface ProblemsPanelProps {
   problems: DashboardResponse['problems']
+  onNavigateToIssues: () => void
   onResourceClick: (resource: SelectedResource) => void
 }
 
 
-function ProblemsPanel({ problems, onResourceClick }: ProblemsPanelProps) {
+function ProblemsPanel({ problems, onNavigateToIssues, onResourceClick }: ProblemsPanelProps) {
   return (
     <div className="rounded-xl bg-theme-surface shadow-theme-sm flex flex-col lg:max-h-[calc(100vh-280px)] lg:sticky lg:top-0">
       <div className="flex items-center justify-between px-5 py-3 border-b border-theme-border/50 shrink-0">
         <div className="flex items-center gap-2">
           <AlertTriangle className="w-4 h-4 text-red-500" />
-          <span className="text-xs font-semibold uppercase tracking-wider text-red-500">Unhealthy Workloads</span>
+          <span className="text-xs font-semibold uppercase tracking-wider text-red-500">Active Issues</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            className="rounded-md px-2 py-1 text-xs font-medium text-accent-text transition-colors hover:bg-accent-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40"
+            onClick={onNavigateToIssues}
+          >
+            View all
+          </button>
+          <span className="badge status-unhealthy rounded-full">{problems.length}</span>
         </div>
-        <span className="badge status-unhealthy rounded-full">{problems.length}</span>
       </div>
       <div className="overflow-y-auto flex-1 min-h-0">
         <div className="divide-y divide-theme-border">

package/src/components/home/MCPSetupDialog.tsx

@@ -221,7 +221,7 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
             <div className="relative">
               <div className="flex items-center gap-3 bg-theme-base rounded-md px-3 py-2.5">
                 <span className="badge text-purple-400 bg-purple-500/10">HTTP</span>
-                <code className="text-sm font-mono text-theme-text-primary">{mcpUrl}</code>
+                <code className="inline-code text-sm">{mcpUrl}</code>
               </div>
               <CopyButton text={mcpUrl} />
             </div>
@@ -306,7 +306,7 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
               {MCP_TOOL_CATALOG.map((tool) => (
                 <div key={tool.name} className="card-inner space-y-1.5">
                   <div className="flex items-center gap-2">
-                    <code className="text-[11px] font-mono text-purple-400">{tool.name}</code>
+                    <code className="inline-code text-[11px]">{tool.name}</code>
                     {tool.write && (
                       <span className="badge-sm bg-amber-500/10 text-amber-600 dark:text-amber-400" title="Write tool — annotated as destructive">
                         write
@@ -317,8 +317,8 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
                   {tool.params.length > 0 && (
                     <div className="flex flex-wrap gap-1.5 pt-0.5">
                       {tool.params.map((p) => (
-                        <span key={p.arg} className="badge-sm font-mono bg-theme-elevated text-theme-text-secondary" title={p.desc}>
-                          <span className="text-theme-text-secondary">{p.arg}</span>
+                        <span key={p.arg} className="inline-code text-[11px]" title={p.desc}>
+                          <span>{p.arg}</span>
                           {p.required && <span className="text-red-400">*</span>}
                         </span>
                       ))}

package/src/components/issues/IssuesPane.tsx

@@ -0,0 +1,78 @@
+import { useIssues } from '../../api/client'
+import type { SelectedResource } from '../../types'
+import { IssuesView, PaneLoader, type IssueResourceRef } from '@skyhook-io/k8s-ui'
+import { AlertTriangle, ArrowLeft } from 'lucide-react'
+
+interface IssuesPaneProps {
+  namespaces: string[]
+  onBack: () => void
+  onNavigateToResource: (resource: SelectedResource) => void
+}
+
+// The per-cluster Issues surface. Renders the same shared triage queue
+// (IssuesView) the Hub fleet view uses — single cluster here, so no cluster
+// label and in-app (client-side) resource navigation. Classification +
+// owner-grouping come pre-computed from radar's /api/issues
+// (internal/issues.Compose → Classify → Group).
+export function IssuesPane({ namespaces, onBack, onNavigateToResource }: IssuesPaneProps) {
+  const { data, isLoading, error } = useIssues(namespaces)
+
+  const onResourceClick = (ref: IssueResourceRef) =>
+    onNavigateToResource({ kind: ref.kind, namespace: ref.namespace ?? '', name: ref.name, group: ref.group ?? '' })
+
+  if (isLoading) {
+    return <PaneLoader label="Loading issues…" className="flex-1" />
+  }
+
+  if (error) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
+        <p>Failed to load issues</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0 p-6 gap-6 overflow-auto">
+      <div className="flex items-center gap-4">
+        <button
+          onClick={onBack}
+          className="p-1.5 rounded-lg hover:bg-theme-hover transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5 text-theme-text-secondary" />
+        </button>
+        <div className="flex-1">
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="w-5 h-5 text-theme-text-secondary" />
+            <h1 className="text-lg font-semibold text-theme-text-primary">Issues</h1>
+          </div>
+          <p className="text-sm text-theme-text-tertiary mt-1 ml-7">
+            Live cluster problems — crashes, scheduling failures, bad references — grouped by the resource they affect.
+          </p>
+        </div>
+      </div>
+
+      {/* Visibility honesty: when RBAC reads are incomplete, an empty queue may
+          mean "can't see" rather than "nothing broken" — say so up front so the
+          empty state isn't mistaken for a clean bill of health. */}
+      {data?.visibility?.impact && (
+        <div className="-mt-3 flex items-start gap-2 rounded-lg border border-theme-border bg-theme-elevated px-3 py-2 text-xs text-theme-text-secondary">
+          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
+          <span>Limited visibility — {data.visibility.impact} Results may be incomplete.</span>
+        </div>
+      )}
+
+      {/* Truncation honesty: when more issues matched than were returned, say
+          so — don't present a capped list as the complete picture. */}
+      {data?.total_matched != null && data.total_matched > (data.issues?.length ?? 0) && (
+        <p className="-mt-3 text-xs text-theme-text-tertiary">
+          Showing {data.issues?.length ?? 0} of {data.total_matched} issues (capped) — narrow by namespace to see the rest.
+        </p>
+      )}
+
+      {/* anyData = the query resolved, i.e. the cluster is reachable; an empty
+          list then means "nothing broken" rather than "not connected". */}
+      <IssuesView issues={data?.issues ?? []} anyData={!!data} onResourceClick={onResourceClick} />
+    </div>
+  )
+}

package/src/components/portforward/PortForwardButton.tsx

@@ -308,7 +308,7 @@ export function PortForwardButton({
                 className="w-full px-3 py-2 text-left text-sm text-theme-text-primary hover:bg-theme-elevated flex items-center justify-between"
               >
                 <span className="flex items-center gap-2 shrink-0">
-                  <code className="text-accent-text">{port.port}</code>
+                  <code className="inline-code">{port.port}</code>
                   <span className="text-theme-text-disabled">/{port.protocol || 'TCP'}</span>
                 </span>
                 {port.name && (

package/src/components/portforward/PortForwardManager.tsx

@@ -794,7 +794,7 @@ export function PortForwardPanel() {
                           <Tooltip content="Click to change local port" delay={300} position="bottom" disabled={!isPanelOpen}>
                           <code
                             className={clsx(
-                              'group/port text-xs bg-theme-base px-2 py-1 rounded text-accent-text transition-all inline-flex items-center gap-1',
+                              'inline-code group/port text-xs transition-all inline-flex items-center gap-1',
                               changingPortId === session.id
                                 ? 'opacity-50'
                                 : 'cursor-pointer hover:ring-1 hover:ring-blue-500/50'