@skyhook-io/radar-app 0.1.2 → 0.1.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "0.1.2",
-  "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Hub.",
+  "version": "0.1.5",
+  "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",
     "url": "https://github.com/skyhook-io/radar",
@@ -53,7 +53,7 @@
     "@playwright/test": "^1.59.1",
     "@skyhook-io/k8s-ui": "*",
     "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.2.1",
+    "@tailwindcss/vite": "^4.2.4",
     "@tanstack/react-query": "^5.99.0",
     "@types/diff": "^8.0.0",
     "@types/node": "^25.5.0",
@@ -68,11 +68,11 @@
     "prettier": "^3.8.1",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "react-router-dom": "^7.13.1",
+    "react-router-dom": "^7.14.2",
     "tailwind-merge": "^3.5.0",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.2.4",
     "typescript": "^6.0.2",
-    "vite": "^8.0.5"
+    "vite": "^8.0.9"
   },
   "sideEffects": [
     "*.css"

package/src/App.tsx

@@ -881,19 +881,35 @@ function AppInner() {
             </button>
           )}
 
-          {/* Theme toggle */}
-          <div className="hidden md:block">
-            <ThemeToggle />
-          </div>
+          {/* Theme toggle — hidden in embedded mode. Host apps (e.g. Radar
+              Cloud) own the user-theme preference and mount their own picker
+              in the account menu; a second toggle in Radar's topbar would
+              fight them (one writes to Radar's localStorage key, the other
+              to the host's cookie/backend) and the user would see the theme
+              bounce on every navigation between host routes and /c/:id. */}
+          {!navCustomization.embedded && (
+            <div className="hidden md:block">
+              <ThemeToggle />
+            </div>
+          )}
 
-          {/* Settings */}
-          <button
-            onClick={() => setShowSettings(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="Settings"
-          >
-            <Settings className="w-4 h-4" />
-          </button>
+          {/* Settings — hidden in embedded mode. The standalone dialog
+              exposes local-binary controls (kubeconfig paths, server port,
+              "open browser on start", "Stop and restart the radar command
+              to apply") that don't apply to a hosted user who doesn't SSH
+              into the cluster. The audit view still opens the dialog via
+              its "N namespaces hidden" link for the narrow audit-ignores
+              setting — that's a deliberate escape hatch, not a general
+              surface. */}
+          {!navCustomization.embedded && (
+            <button
+              onClick={() => setShowSettings(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="Settings"
+            >
+              <Settings className="w-4 h-4" />
+            </button>
+          )}
 
           {/* User menu (when auth enabled) — hidden in embedded mode;
               host app typically provides its own via rightExtras. */}

package/src/RadarApp.tsx

@@ -8,7 +8,7 @@
 // Config model:
 //   - apiBase  — base URL for REST/SSE/WS. Default '/api' (same-origin,
 //                Radar's own binary). Hub passes a cluster-scoped URL
-//                like '/c/abc/api' or 'https://api.radar.skyhook.io/c/abc/api'.
+//                like '/c/abc/api' or 'https://api.radarhq.io/c/abc/api'.
 //   - basename — router basename. Default '' (mounted at root). Hub
 //                passes '/c/abc' when embedding, so Radar's internal
 //                paths (/topology, /resources/...) resolve correctly.

package/src/api/config.ts

@@ -28,7 +28,7 @@ export function getApiBase(): string {
  *
  * Accepts either:
  *   - A relative path: `/api`, `/c/abc/api` (URLs derive scheme + host from window.location)
- *   - An absolute URL: `https://api.radar.skyhook.io/c/abc/api` (URLs use that origin)
+ *   - An absolute URL: `https://api.radarhq.io/c/abc/api` (URLs use that origin)
  */
 export function setApiBase(url: string): void {
   apiBase = url.replace(/\/+$/, '');

package/src/components/ConnectionErrorView.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import type { ConnectionState } from '../context/ConnectionContext'
 import { ContextSwitcher } from './ContextSwitcher'
 import { parseContextName } from '../utils/context-name'
-import { useOpenLocalTerminal } from '@skyhook-io/k8s-ui'
+import { useOpenLocalTerminal, ClusterName } from '@skyhook-io/k8s-ui'
 
 interface ConnectionErrorViewProps {
   connection: ConnectionState
@@ -193,8 +193,12 @@ export function ConnectionErrorView({ connection, onRetry, isRetrying }: Connect
             {connection.errorType === 'config' ? 'No Cluster Configuration' : 'Cannot Connect to Cluster'}
           </h2>
 
-          <p className="text-sm text-theme-text-secondary mb-1">
-            Context: <span className="font-mono text-theme-text-primary">{connection.context || '(none)'}</span>
+          <p className="text-sm text-theme-text-secondary mb-1 inline-flex items-center gap-1.5">
+            Context: {connection.context ? (
+              <ClusterName name={connection.context} />
+            ) : (
+              <span className="font-mono text-theme-text-primary">(none)</span>
+            )}
           </p>
 
           {connection.clusterName && (

package/src/components/ContextSwitcher.tsx

@@ -6,6 +6,7 @@ import { useToast } from '../components/ui/Toast'
 import { useDock } from '../components/dock'
 import type { ContextInfo } from '../types'
 import { parseContextName, type ParsedContextName } from '../utils/context-name'
+import { pluralize } from '@skyhook-io/k8s-ui'
 
 interface ContextSwitcherProps {
   className?: string
@@ -343,8 +344,8 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
                       <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">
+                      <div className="px-3 py-1 bg-theme-elevated/60 border-b border-theme-border/60">
+                        <span className="text-[11px] text-theme-text-secondary font-semibold">
                           {headerLabel}
                         </span>
                       </div>
@@ -382,19 +383,19 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
                               <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>
                               )}
+                              {item.region && (
+                                <span className="shrink-0 ml-auto text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 rounded">
+                                  {item.region}
+                                </span>
+                              )}
                             </div>
                             {item.provider && (
-                              <div className="text-[10px] text-theme-text-tertiary truncate mt-0.5" title={item.raw}>
+                              <div className="text-[10px] text-theme-text-tertiary opacity-70 truncate mt-0.5" title={item.raw}>
                                 {item.raw}
                               </div>
                             )}
@@ -444,13 +445,13 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
                 {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' : ''}
+                    {pluralize(sessionCounts.portForwards, 'port forward')}
                   </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' : ''}
+                    {pluralize(sessionCounts.execSessions, 'terminal session')}
                   </li>
                 )}
               </ul>

package/src/components/helm/OwnedResources.tsx

@@ -12,6 +12,7 @@ import { useStartPortForward } from '../portforward/PortForwardManager'
 import { useAvailablePorts } from '../../api/client'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
 import { useNamespacedCapabilities } from '../../contexts/CapabilitiesContext'
+import { pluralize } from '@skyhook-io/k8s-ui'
 
 interface OwnedResourcesProps {
   resources: HelmOwnedResource[]
@@ -98,7 +99,7 @@ export function OwnedResources({ resources, onNavigate }: OwnedResourcesProps) {
       <div className="flex items-center justify-between">
         <div className="text-sm text-theme-text-secondary">
           {healthFilter === 'all' ? (
-            <>{resources.length} resource{resources.length !== 1 ? 's' : ''} created by this release</>
+            <>{pluralize(resources.length, 'resource')} created by this release</>
           ) : (
             <span className="flex items-center gap-2">
               Showing {filteredResources.length} of {resources.length} resources

package/src/components/home/CertificateHealthCard.tsx

@@ -1,6 +1,7 @@
 import type { DashboardCertificateHealth } from '../../api/client'
 import { Shield, ArrowRight } from 'lucide-react'
 import { clsx } from 'clsx'
+import { StatusDot, type StatusTone } from '@skyhook-io/k8s-ui'
 
 interface CertificateHealthCardProps {
   data: DashboardCertificateHealth
@@ -34,25 +35,25 @@ export function CertificateHealthCard({ data, onNavigate }: CertificateHealthCar
         <div className="flex items-center gap-3 w-full">
           {/* Color bar showing distribution */}
           <div className="flex-1 h-3 rounded-full overflow-hidden bg-theme-hover flex">
-            {data.healthy > 0 && (
+            {data.total > 0 && data.healthy > 0 && (
               <div
                 className="h-full bg-green-500"
                 style={{ width: `${(data.healthy / data.total) * 100}%` }}
               />
             )}
-            {data.warning > 0 && (
+            {data.total > 0 && data.warning > 0 && (
               <div
                 className="h-full bg-yellow-500"
                 style={{ width: `${(data.warning / data.total) * 100}%` }}
               />
             )}
-            {data.critical > 0 && (
+            {data.total > 0 && data.critical > 0 && (
               <div
                 className="h-full bg-orange-500"
                 style={{ width: `${(data.critical / data.total) * 100}%` }}
               />
             )}
-            {data.expired > 0 && (
+            {data.total > 0 && data.expired > 0 && (
               <div
                 className="h-full bg-red-500"
                 style={{ width: `${(data.expired / data.total) * 100}%` }}
@@ -63,10 +64,10 @@ export function CertificateHealthCard({ data, onNavigate }: CertificateHealthCar
 
         {/* Breakdown */}
         <div className="grid grid-cols-2 gap-x-6 gap-y-2 mt-4 w-full">
-          <BucketRow label="Healthy" count={data.healthy} color="text-green-400" dotColor="bg-green-500" />
-          <BucketRow label="Warning" subtitle="< 30d" count={data.warning} color="text-yellow-400" dotColor="bg-yellow-500" />
-          <BucketRow label="Critical" subtitle="< 7d" count={data.critical} color="text-orange-400" dotColor="bg-orange-500" />
-          <BucketRow label="Expired" count={data.expired} color="text-red-400" dotColor="bg-red-500" />
+          <BucketRow label="Healthy" count={data.healthy} tone="healthy" />
+          <BucketRow label="Warning" subtitle="< 30d" count={data.warning} tone="degraded" />
+          <BucketRow label="Critical" subtitle="< 7d" count={data.critical} tone="alert" />
+          <BucketRow label="Expired" count={data.expired} tone="unhealthy" />
         </div>
       </div>
 
@@ -85,21 +86,29 @@ export function CertificateHealthCard({ data, onNavigate }: CertificateHealthCar
   )
 }
 
-function BucketRow({ label, subtitle, count, color, dotColor }: {
+const COUNT_TEXT_COLOR: Record<StatusTone, string> = {
+  healthy: 'text-emerald-400',
+  degraded: 'text-amber-400',
+  alert: 'text-orange-400',
+  unhealthy: 'text-rose-400',
+  neutral: 'text-sky-400',
+  unknown: 'text-slate-400',
+}
+
+function BucketRow({ label, subtitle, count, tone }: {
   label: string
   subtitle?: string
   count: number
-  color: string
-  dotColor: string
+  tone: StatusTone
 }) {
   return (
     <div className="flex items-center gap-2">
-      <span className={clsx('w-2 h-2 rounded-full shrink-0', dotColor)} />
+      <StatusDot tone={tone} size="md" className="shrink-0" />
       <span className="text-xs text-theme-text-secondary flex-1">
         {label}
         {subtitle && <span className="text-theme-text-tertiary ml-1">{subtitle}</span>}
       </span>
-      <span className={clsx('text-sm font-semibold tabular-nums', count > 0 ? color : 'text-theme-text-tertiary')}>{count}</span>
+      <span className={clsx('text-sm font-semibold tabular-nums', count > 0 ? COUNT_TEXT_COLOR[tone] : 'text-theme-text-tertiary')}>{count}</span>
     </div>
   )
 }

package/src/components/home/ClusterHealthCard.tsx

@@ -10,6 +10,7 @@ import { clsx } from 'clsx'
 import { formatCPUMillicores, formatMemoryMiB } from '../../utils/format'
 import { useCapabilitiesContext } from '../../contexts/CapabilitiesContext'
 import { MCPSetupDialog } from './MCPSetupDialog'
+import { pluralize, parseContextName } from '@skyhook-io/k8s-ui'
 import { Tooltip } from '../ui/Tooltip'
 
 interface ClusterHealthCardProps {
@@ -157,6 +158,13 @@ export function ClusterHealthCard({
     { kind: 'cronjobs', label: 'CronJobs', icon: Clock, total: counts.cronJobs.total, subtitle: `${counts.cronJobs.active} active` },
   ]
   const platformInfo = getPlatformInfo(cluster.platform)
+  // The raw cluster.name is the kubeconfig context (e.g.
+  // `gke_koalabackend_us-east1-b_nonprod-cluster-us-east1`). That string
+  // is the user's primary orientation cue, but the bit they actually
+  // recognize is the short clusterName. We promote that, push the raw
+  // path into a tooltip, and surface project/region as muted metadata.
+  const parsedContext = parseContextName(cluster.name || '')
+  const headlineName = parsedContext.clusterName || cluster.name || 'Cluster'
 
   return (
     <div className="rounded-xl bg-theme-surface shadow-theme-sm overflow-hidden">
@@ -165,22 +173,38 @@ export function ClusterHealthCard({
         <div className="flex items-stretch gap-8">
           {/* Left: Cluster info */}
           <div className="flex flex-col justify-center w-[300px] shrink-0 pr-8 border-r border-theme-border/50">
-            <div className="flex items-center gap-2 mb-2">
+            <div className="flex items-center gap-2 mb-1.5">
               {platformInfo.icon ? (
                 <img src={platformInfo.icon} alt={platformInfo.name} className="w-5 h-5 object-contain" />
               ) : (
                 <Server className="w-4 h-4 text-theme-text-tertiary" />
               )}
-              <span className="text-xs text-theme-text-secondary">{platformInfo.name}</span>
+              <span className="text-xs text-theme-text-secondary truncate">{platformInfo.name}</span>
             </div>
-            <h2 className="text-sm font-semibold text-theme-text-primary break-all mb-1" title={cluster.name}>
-              {cluster.name || 'Cluster'}
+            <h2
+              className="text-xl font-semibold text-theme-text-primary truncate mb-1.5 leading-tight"
+              title={cluster.name}
+            >
+              {headlineName}
             </h2>
-            <div className="flex flex-col gap-1 text-xs text-theme-text-tertiary">
+            <div className="flex flex-col gap-0.5 text-xs text-theme-text-tertiary">
+              {(parsedContext.account || parsedContext.region) && (
+                <span className="truncate font-mono" title={[parsedContext.account, parsedContext.region].filter(Boolean).join(' · ')}>
+                  {[parsedContext.account, parsedContext.region].filter(Boolean).join(' · ')}
+                </span>
+              )}
               {cluster.version && (
                 <span>Kubernetes {cluster.version}</span>
               )}
               <span><span className="font-mono">{counts.namespaces}</span> namespaces</span>
+              {cluster.name && cluster.name !== headlineName && (
+                <span
+                  className="font-mono text-[10px] text-theme-text-disabled break-all leading-snug pt-0.5"
+                  title={cluster.name}
+                >
+                  {cluster.name}
+                </span>
+              )}
             </div>
             {nodeVersionSkew && (
               <Tooltip
@@ -190,7 +214,7 @@ export function ClusterHealthCard({
                     {Object.entries(nodeVersionSkew.versions).map(([version, nodes]) => (
                       <div key={version}>
                         <span className="font-mono font-medium">v{version}</span>
-                        <span className="text-theme-text-tertiary"> — {nodes.length} node{nodes.length > 1 ? 's' : ''}</span>
+                        <span className="text-theme-text-tertiary"> — {pluralize(nodes.length, 'node')}</span>
                         <div className="text-[10px] text-theme-text-tertiary pl-2">{nodes.join(', ')}</div>
                       </div>
                     ))}

package/src/components/home/HomeView.tsx

@@ -9,7 +9,7 @@ import { TrafficSummary } from './TrafficSummary'
 import { CertificateHealthCard } from './CertificateHealthCard'
 import { NetworkPolicyCoverageCard } from './NetworkPolicyCoverageCard'
 import { CostCard } from './CostCard'
-import { AuditCard } from '@skyhook-io/k8s-ui'
+import { AuditCard, StatusDot, mapHealthToTone } from '@skyhook-io/k8s-ui'
 import { ClusterHealthCard } from './ClusterHealthCard'
 import { AlertTriangle, Loader2, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
@@ -197,10 +197,7 @@ function ProblemsPanel({ problems, onResourceClick }: ProblemsPanelProps) {
                 group: p.group,
               })}
             >
-              <span className={clsx(
-                'w-1.5 h-1.5 rounded-full shrink-0',
-                p.severity === 'critical' ? 'bg-red-400' : p.severity === 'high' ? 'bg-orange-400' : 'bg-yellow-400'
-              )} />
+              <StatusDot tone={mapHealthToTone(p.severity)} className="shrink-0" />
               <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-1.5">
                   <span className="text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 py-0.5 rounded">{p.kind}</span>

package/src/components/logs/LogsViewer.tsx

@@ -3,6 +3,7 @@ import { fetchJSON, createLogStream } from '../../api/client'
 import { LogsViewer as SharedLogsViewer } from '@skyhook-io/k8s-ui'
 import type { LogsFetchParams } from '@skyhook-io/k8s-ui'
 import { useDesktopDownload } from '../../hooks/useDesktopDownload'
+import { useTheme } from '../../context/ThemeContext'
 
 interface LogsViewerProps {
   namespace: string
@@ -13,6 +14,7 @@ interface LogsViewerProps {
 
 export function LogsViewer({ namespace, podName, containers, initialContainer }: LogsViewerProps) {
   const desktopDownload = useDesktopDownload()
+  const { theme } = useTheme()
 
   const fetchLogs = useCallback(async (params: LogsFetchParams) => {
     const query = new URLSearchParams()
@@ -39,6 +41,7 @@ export function LogsViewer({ namespace, podName, containers, initialContainer }:
       fetchLogs={fetchLogs}
       createStream={makeStream}
       overrideDownload={desktopDownload}
+      forceDark={theme === 'dark' ? true : undefined}
     />
   )
 }

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -3,6 +3,7 @@ import { fetchJSON, createWorkloadLogStream } from '../../api/client'
 import { WorkloadLogsViewer as SharedWorkloadLogsViewer } from '@skyhook-io/k8s-ui'
 import type { WorkloadLogsFetchParams, WorkloadLogsResult } from '@skyhook-io/k8s-ui'
 import { useDesktopDownload } from '../../hooks/useDesktopDownload'
+import { useTheme } from '../../context/ThemeContext'
 
 interface WorkloadLogsViewerProps {
   kind: string
@@ -12,6 +13,7 @@ interface WorkloadLogsViewerProps {
 
 export function WorkloadLogsViewer({ kind, namespace, name }: WorkloadLogsViewerProps) {
   const desktopDownload = useDesktopDownload()
+  const { theme } = useTheme()
 
   const fetchAll = useCallback(async (params: WorkloadLogsFetchParams): Promise<WorkloadLogsResult> => {
     const query = new URLSearchParams()
@@ -35,6 +37,7 @@ export function WorkloadLogsViewer({ kind, namespace, name }: WorkloadLogsViewer
       fetchAll={fetchAll}
       createStream={makeStream}
       overrideDownload={desktopDownload}
+      forceDark={theme === 'dark' ? true : undefined}
     />
   )
 }

package/src/components/portforward/PortForwardManager.tsx

@@ -30,6 +30,7 @@ import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
 import { openExternal } from '../../utils/navigation'
 import { apiUrl } from '../../api/config'
+import { pluralize } from '@skyhook-io/k8s-ui'
 
 // --- Types -------------------------------------------------------------------
 
@@ -279,8 +280,8 @@ export function PortForwardIndicator() {
 
   const hasErrors = errorSessions.length > 0
   const tooltipText = hasErrors
-    ? `${count} port forward${count !== 1 ? 's' : ''} — ${errorSessions.length} failed`
-    : `${count} active port forward${count !== 1 ? 's' : ''}`
+    ? `${pluralize(count, 'port forward')} — ${errorSessions.length} failed`
+    : `${pluralize(count, 'active port forward')}`
 
   return (
     <Tooltip content={tooltipText} delay={150} position="bottom" disabled={isPanelOpen}>

package/src/components/resources/ResourcesView.tsx

@@ -2,7 +2,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 { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { apiUrl, getAuthHeaders, getCredentialsMode, getBasename } from '../../api/config'
 import { useAPIResources } from '../../api/apiResources'
 import { initNavigationMap } from '@skyhook-io/k8s-ui'
 import { usePinnedKinds } from '../../hooks/useFavorites'
@@ -166,7 +166,15 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       pinned={pinned}
       togglePin={togglePin}
       isPinned={(kind: string, group?: string) => isPinned(kind, group ?? '')}
-      // Navigation
+      // Navigation. basePath is the full URL prefix where the Resources view
+      // lives — '/resources' for standalone Radar, '/c/{cluster}/resources'
+      // when embedded in a host app that mounts RadarApp under a basename.
+      // k8s-ui's ResourcesView uses this to read the current kind out of
+      // window.location.pathname and to write URL updates (drawer open/close,
+      // filter changes) back via history.replaceState. Without the basename
+      // prefix, those writes would drop the host-app route context and the
+      // URL would no longer be reloadable.
+      basePath={getBasename() + '/resources'}
       locationSearch={location.search}
       locationPathname={location.pathname}
       onNavigate={handleNavigate}

package/src/components/settings/SettingsDialog.tsx

@@ -242,13 +242,13 @@ function StartupConfigTab({
         onChange={(v) => onChange('kubeconfig', v || undefined)}
       />
 
-      <ConfigField
+      <ConfigArrayField
         label="Kubeconfig Directories"
         help="Comma-separated directories containing kubeconfig files"
-        value={config.kubeconfigDirs?.join(', ') ?? ''}
-        effectiveValue={effectiveConfig?.kubeconfigDirs?.join(', ')}
+        value={config.kubeconfigDirs}
+        effectiveValue={effectiveConfig?.kubeconfigDirs}
         placeholder="/path/to/dir1, /path/to/dir2"
-        onChange={(v) => onChange('kubeconfigDirs', v ? v.split(',').map(s => s.trim()).filter(Boolean) : undefined)}
+        onChange={(v) => onChange('kubeconfigDirs', v)}
       />
 
       <ConfigField
@@ -452,6 +452,66 @@ function ConfigField({
   )
 }
 
+// Comma-separated list input. Keeps a local string buffer so intermediate states
+// like "foo," or "foo,," survive — parsing into an array on every keystroke
+// (split/trim/filter) would otherwise strip trailing commas before they re-render.
+// The focus flag is load-bearing: without it, every parent re-render during typing
+// would overwrite `text` with the canonical joined form and wipe the keystroke.
+// On blur the buffer resyncs to the canonical "a, b" form.
+function ConfigArrayField({
+  label,
+  help,
+  value,
+  effectiveValue,
+  placeholder,
+  onChange,
+}: {
+  label: string
+  help?: string
+  value?: string[]
+  effectiveValue?: string[]
+  placeholder?: string
+  onChange: (value: string[] | undefined) => void
+}) {
+  const canonical = (v?: string[]) => v?.join(', ') ?? ''
+  const [text, setText] = useState(() => canonical(value))
+  const focusedRef = useRef(false)
+
+  useEffect(() => {
+    if (!focusedRef.current) setText(canonical(value))
+  }, [value])
+
+  const commit = (raw: string) => {
+    const parts = raw.split(',').map(s => s.trim()).filter(Boolean)
+    onChange(parts.length > 0 ? parts : undefined)
+  }
+
+  return (
+    <div>
+      <label className="block text-sm font-medium text-theme-text-primary mb-1">
+        {label}
+      </label>
+      {help && <p className="text-xs text-theme-text-tertiary mb-1">{help}</p>}
+      <input
+        type="text"
+        value={text}
+        onFocus={() => { focusedRef.current = true }}
+        onBlur={() => {
+          focusedRef.current = false
+          setText(canonical(value))
+        }}
+        onChange={(e) => {
+          setText(e.target.value)
+          commit(e.target.value)
+        }}
+        placeholder={placeholder}
+        className="w-full px-3 py-1.5 text-sm bg-theme-elevated border border-theme-border rounded-md text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:border-blue-500"
+      />
+      <EffectiveHint current={canonical(value) || undefined} effective={canonical(effectiveValue) || undefined} />
+    </div>
+  )
+}
+
 function ConfigNumberField({
   label,
   help,

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -27,6 +27,7 @@ import { useHasLimitedAccess } from '../../contexts/CapabilitiesContext'
 import type { TimelineEvent, Topology } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
 import { kindToPlural } from '../../utils/navigation'
+import { pluralize } from '@skyhook-io/k8s-ui'
 import { isChangeEvent, isHistoricalEvent, isOperation, displayKind } from '../../types'
 import { DiffViewer } from './DiffViewer'
 import { getOperationColor, getHealthBadgeColor, getEventTypeColor } from '../../utils/badge-colors'
@@ -513,8 +514,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
           </div>
           <div className="flex items-center gap-4">
             <span className="text-xs text-theme-text-tertiary">
-              {visibleLanes.length} resource{visibleLanes.length !== 1 ? 's' : ''} · {filteredEvents.length} event
-              {filteredEvents.length !== 1 ? 's' : ''}
+              {pluralize(visibleLanes.length, 'resource')} · {pluralize(filteredEvents.length, 'event')}
               {searchTerm && ` (filtered)`}
             </span>
             {/* Group by app toggle */}
@@ -707,7 +707,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                               const issueCount = allEvents.filter(e => isCriticalIssue(e)).length
                               if (issueCount === 0) return null
                               return (
-                                <Tooltip content={`${issueCount} critical issue${issueCount > 1 ? 's' : ''} (OOMKilled, CrashLoopBackOff, etc.)`} position="top">
+                                <Tooltip content={`${pluralize(issueCount, 'critical issue')} (OOMKilled, CrashLoopBackOff, etc.)`} position="top">
                                   <span className="flex items-center gap-0.5 text-xs px-1 py-0.5 rounded bg-red-500/15 text-red-600 dark:text-red-300">
                                     <AlertTriangle className="w-3 h-3" />
                                     {issueCount}

package/src/components/traffic/TrafficFlowList.tsx

@@ -3,6 +3,7 @@ import type { TrafficFlow } from '../../types'
 import { clsx } from 'clsx'
 import { ChevronDown, ChevronUp, ShieldCheck } from 'lucide-react'
 import { SEVERITY_BADGE, SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
+import { pluralize } from '@skyhook-io/k8s-ui'
 import { useFlowSearch } from './TrafficFlowListContext'
 import { useQuery } from '@tanstack/react-query'
 import { fetchJSON } from '../../api/client'
@@ -321,7 +322,7 @@ export function TrafficFlowList({ flows }: TrafficFlowListProps) {
 
       {/* Footer */}
       <div className="px-3 py-1.5 border-t border-theme-border text-[10px] text-theme-text-tertiary">
-        {sorted.length} flow{sorted.length !== 1 ? 's' : ''}
+        {pluralize(sorted.length, 'flow')}
         {search && ` (filtered from ${flows.length})`}
       </div>
     </div>

package/src/components/traffic/TrafficView.tsx

@@ -7,10 +7,11 @@ import { TrafficWizard } from './TrafficWizard'
 import { TrafficGraph, type TrafficGraphSelection } from './TrafficGraph'
 import { TrafficFilterSidebar } from './TrafficFilterSidebar'
 import { TrafficFlowListProvider } from './TrafficFlowListContext'
-import { Loader2, RefreshCw, Filter, Plug, ChevronDown, List } from 'lucide-react'
+import { Loader2, RefreshCw, Filter, Plug, ChevronDown, List, Activity, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useQueryClient } from '@tanstack/react-query'
 import { useDock } from '../dock'
+import { EmptyState } from '@skyhook-io/k8s-ui'
 
 // Addon types for filtering
 export type AddonMode = 'show' | 'group' | 'hide'
@@ -1168,42 +1169,52 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
               </div>
             </div>
           ) : (
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="text-center space-y-2">
-                <Filter className="h-12 w-12 text-theme-text-tertiary mx-auto" />
-                {flowStats.total > 0 && flowStats.shown === 0 ? (
-                  <>
-                    <p className="text-theme-text-secondary">All traffic is filtered out</p>
-                    <p className="text-xs text-theme-text-tertiary">
-                      {flowStats.total} flows hidden by current filters.
-                      <button
-                        onClick={() => {
-                          setHideSystem(false)
-                          setHideExternal(false)
-                          setMinConnections(0)
-                        }}
-                        className="ml-1 text-blue-400 hover:underline"
-                      >
-                        Show all
-                      </button>
-                    </p>
-                  </>
-                ) : flowsData?.warning ? (
-                  <>
-                    <p className="text-theme-text-secondary">Unable to fetch traffic data</p>
-                    <p className="text-xs text-yellow-500 max-w-md">
-                      {flowsData.warning}
-                    </p>
-                  </>
-                ) : (
-                  <>
-                    <p className="text-theme-text-secondary">No traffic observed</p>
-                    <p className="text-xs text-theme-text-tertiary">
-                      Traffic will appear here once connections are made between services
-                    </p>
-                  </>
-                )}
-              </div>
+            <div className="absolute inset-0 flex items-center justify-center px-4">
+              {flowStats.total > 0 && flowStats.shown === 0 ? (
+                <EmptyState
+                  tone="filtered"
+                  variant="card"
+                  icon={Filter}
+                  headline="All traffic is filtered out"
+                  body={`${flowStats.total} ${flowStats.total === 1 ? 'flow' : 'flows'} hidden by current filters.`}
+                  action={
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setHideSystem(false)
+                        setHideExternal(false)
+                        setMinConnections(0)
+                      }}
+                      className="badge badge-sm border border-theme-border bg-theme-elevated text-theme-text-primary hover:bg-theme-hover transition-colors"
+                    >
+                      Show all
+                    </button>
+                  }
+                  className="max-w-md"
+                />
+              ) : flowsData?.warning ? (
+                <EmptyState
+                  tone="neutral"
+                  variant="card"
+                  icon={AlertTriangle}
+                  headline="Unable to fetch traffic data"
+                  body={flowsData.warning}
+                  className="max-w-md"
+                />
+              ) : (
+                <EmptyState
+                  tone="neutral"
+                  variant="card"
+                  icon={Activity}
+                  headline={
+                    sourcesData?.active
+                      ? `Observing via ${sourcesData.active} — no traffic yet`
+                      : 'No traffic observed yet'
+                  }
+                  body="Traffic will appear here once services start communicating."
+                  className="max-w-md"
+                />
+              )}
             </div>
           )}
       </div>

package/src/index.css

@@ -1,4 +1,12 @@
 @import "tailwindcss";
+/*
+ * Tailwind v4 JIT scans only sources under this CSS file's package (web/).
+ * k8s-ui is a workspace package whose TSX files also use Tailwind classes;
+ * without this @source, any class used *only* in k8s-ui/ (not also in web/)
+ * is silently dropped — e.g. `top-8` in TerminalTab, which collapsed the
+ * terminal to zero height and caused issue #518 (blank terminal).
+ */
+@source "../../packages/k8s-ui/src/**/*.{ts,tsx}";
 @variant dark (&:where(.dark, .dark *));
 @import "@skyhook-io/k8s-ui/theme/variables.css";
 @import "@skyhook-io/k8s-ui/theme/tailwind-theme.css";

package/src/index.ts

@@ -15,3 +15,4 @@ export {
   getCredentialsMode,
 } from './api/config';
 export type { NavCustomization } from './context/NavCustomization';
+export { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay';