@skyhook-io/radar-app 0.2.2 → 1.0.1

package/src/components/ContextSwitcher.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useMemo, useState, forwardRef } from 'react'
 import { AlertTriangle } from 'lucide-react'
 import {
   ClusterSwitcher,
@@ -16,11 +16,15 @@ interface ContextSwitcherProps {
   className?: string
 }
 
+export interface ContextSwitcherHandle {
+  open: () => void
+}
+
 interface ParsedContext extends ParsedContextName {
   context: ContextInfo
 }
 
-export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
+export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcherProps>(({ className = '' }, ref) => {
   const [showConfirm, setShowConfirm] = useState(false)
   const [pendingSwitch, setPendingSwitch] = useState<ParsedContext | null>(null)
   const [sessionCounts, setSessionCounts] = useState<SessionCounts | null>(null)
@@ -33,13 +37,37 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
   const { tabs } = useDock()
 
   // Parse contexts and decide whether to render group headers (multi-account only).
-  const { parsedById, hasMultipleAccounts } = useMemo(() => {
-    if (!contexts) return { parsedById: new Map<string, ParsedContext>(), hasMultipleAccounts: false }
-    const parsed: ParsedContext[] = contexts.map(ctx => ({ context: ctx, ...parseContextName(ctx.name) }))
+  // hasMultipleSources gates the kubeconfig-source chip — only useful when 2+
+  // distinct kubeconfig files are in play. Single-source setups (the common
+  // case) skip the chip entirely so the dropdown stays clean.
+  const { parsedById, hasMultipleAccounts, hasMultipleSources } = useMemo(() => {
+    if (!contexts) return {
+      parsedById: new Map<string, ParsedContext>(),
+      hasMultipleAccounts: false,
+      hasMultipleSources: false,
+    }
+    // Strip the disambiguation suffix (" (<source>)" or " (<source> #N)")
+    // before parsing — qualified names won't match the GKE/EKS/AKS regexes
+    // otherwise, and the suffix is redundant with the source chip we
+    // render separately.
+    const stripSourceSuffix = (name: string, source?: string): string => {
+      if (!source) return name
+      const escaped = source.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      return name.replace(new RegExp(`\\s+\\(${escaped}(?:\\s+#\\d+)?\\)$`), '')
+    }
+    const parsed: ParsedContext[] = contexts.map(ctx => ({
+      context: ctx,
+      ...parseContextName(stripSourceSuffix(ctx.name, ctx.source)),
+    }))
     const accounts = new Set(parsed.map(p => `${p.provider}:${p.account}`))
+    const sources = new Set(contexts.map(c => c.source).filter(Boolean))
     const byId = new Map<string, ParsedContext>()
     for (const p of parsed) byId.set(p.context.name, p)
-    return { parsedById: byId, hasMultipleAccounts: accounts.size > 1 }
+    return {
+      parsedById: byId,
+      hasMultipleAccounts: accounts.size > 1,
+      hasMultipleSources: sources.size > 1,
+    }
   }, [contexts])
 
   // Map parsed contexts → generic ClusterSwitcher items, sorted GKE/EKS/AKS/Other → account → name.
@@ -61,20 +89,16 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
         : hasMultipleAccounts
           ? 'Other'
           : undefined
-      // `name` is the raw context — ClusterSwitcher renders it through
-      // ClusterName, which collapses GKE/EKS/AKS shapes to the meaningful
-      // tail. `secondary` shows the original raw when we collapsed it,
-      // so users always see the full context at a glance (rather than
-      // having to hover to reveal it).
       return {
         id: p.context.name,
-        name: p.context.name,
+        name: p.raw,
         secondary: p.provider ? p.raw : undefined,
         badge: p.region || undefined,
+        sourceLabel: hasMultipleSources ? p.context.source : undefined,
         group: { key: groupKey, label: groupLabel },
       }
     })
-  }, [parsedById, hasMultipleAccounts])
+  }, [parsedById, hasMultipleAccounts, hasMultipleSources])
 
   const performSwitch = async (parsed: ParsedContext) => {
     startSwitch({
@@ -152,15 +176,24 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
     )
   }
 
-  const currentRaw = clusterInfo?.context || contexts?.find(c => c.isCurrent)?.name || 'Unknown'
-  const currentId = contexts?.find(c => c.isCurrent)?.name
+  const currentCtx = contexts?.find(c => c.isCurrent)
+  const currentId = currentCtx?.name
+  // Use parsed.raw (the source-stripped form) for the trigger so the
+  // disambiguation suffix doesn't double up with the source chip.
+  // Fall back to clusterInfo.context for the very-early window before
+  // /api/contexts has resolved.
+  const currentParsed = currentId ? parsedById.get(currentId) : undefined
+  const currentRaw = currentParsed?.raw || clusterInfo?.context || currentCtx?.name || 'Unknown'
+  const currentSourceLabel = hasMultipleSources ? currentCtx?.source || undefined : undefined
 
   return (
     <>
       <ClusterSwitcher
+        ref={ref}
         className={className}
         currentId={currentId}
         currentName={currentRaw}
+        currentSourceLabel={currentSourceLabel}
         items={items}
         onSelect={handleSelect}
         loading={switchContext.isPending}
@@ -222,4 +255,4 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
       )}
     </>
   )
-}
+})

package/src/components/NamespaceSwitcher.tsx

@@ -0,0 +1,298 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { ChevronDown, Globe, Search, AlertTriangle, X } from 'lucide-react'
+import { useNamespaceScope, useSetActiveNamespace } from '../api/client'
+import { Tooltip } from './ui/Tooltip'
+
+export interface NamespaceSwitcherHandle {
+  open: () => void
+}
+
+interface NamespaceSwitcherProps {
+  className?: string
+  disabled?: boolean
+  disabledTooltip?: string
+}
+
+/**
+ * NamespaceSwitcher is a per-user multi-select view filter for the cluster
+ * view. It does NOT reshape the shared informer cache — picks are saved
+ * server-side per user and intersected with the user's RBAC-allowed
+ * namespaces on each read.
+ *
+ * Three states reflect what the backend reports:
+ *   - cluster-wide: empty trigger label "All namespaces", picker lets the
+ *     user narrow the view; otherwise informational.
+ *   - namespace:    label shows the namespace count (or single name); picker
+ *     offers other accessible namespaces and a clear-all reset.
+ *   - restricted:   user can't list namespaces and isn't pinned; picker
+ *     surfaces only the kubeconfig context's namespace + any saved picks.
+ *
+ * Selection model: the dropdown keeps a draft Set<string>; toggling rows
+ * mutates the draft locally; closing the dropdown applies the draft in a
+ * single mutation. "Clear all" applies immediately and closes; "Select all
+ * visible" / "Clear visible" mutate the draft only and wait for close.
+ */
+export const NamespaceSwitcher = forwardRef<NamespaceSwitcherHandle, NamespaceSwitcherProps>(function NamespaceSwitcher(
+  { className = '', disabled = false, disabledTooltip },
+  ref,
+) {
+  const { data: scope, isLoading } = useNamespaceScope()
+  const setActive = useSetActiveNamespace()
+
+  const [isOpen, setIsOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 })
+  const [draft, setDraft] = useState<Set<string>>(() => new Set())
+
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  const scopeActives = useMemo(() => scope?.actives ?? [], [scope?.actives])
+  const activesKey = useMemo(() => [...scopeActives].sort().join(','), [scopeActives])
+
+  // Sync the draft with the server's view whenever it changes (initial load,
+  // post-mutation refetch, eviction after RBAC drift).
+  useEffect(() => {
+    setDraft(new Set(scopeActives))
+  }, [activesKey, scopeActives])
+
+  const items = useMemo(() => {
+    if (!scope) return [] as string[]
+    return [...(scope.accessibleNamespaces ?? [])].sort((a, b) => a.localeCompare(b))
+  }, [scope])
+
+  const filteredItems = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    if (!q) return items
+    return items.filter(n => n.toLowerCase().includes(q))
+  }, [items, search])
+
+  const applySelection = useCallback((next: Set<string>) => {
+    if (!scope) return
+    const nextArr = Array.from(next).sort()
+    if (nextArr.join(',') === activesKey) return
+    setActive.mutate({ namespaces: nextArr })
+  }, [activesKey, scope, setActive])
+
+  const closeAndApply = useCallback(() => {
+    setIsOpen(false)
+    setSearch('')
+    applySelection(draft)
+  }, [applySelection, draft])
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      if (disabled || isLoading || setActive.isPending) return
+      setIsOpen(true)
+    },
+  }), [disabled, isLoading, setActive.isPending])
+
+  useEffect(() => {
+    if (!isOpen) return
+    const trigger = triggerRef.current
+    if (!trigger) return
+    const r = trigger.getBoundingClientRect()
+    setPos({ top: r.bottom + 4, left: r.left, width: Math.max(r.width, 240) })
+  }, [isOpen])
+
+  useEffect(() => {
+    if (!isOpen) return
+    function onClick(e: MouseEvent) {
+      if (
+        !dropdownRef.current?.contains(e.target as Node) &&
+        !triggerRef.current?.contains(e.target as Node)
+      ) {
+        closeAndApply()
+      }
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') closeAndApply()
+    }
+    document.addEventListener('mousedown', onClick)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onClick)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [isOpen, closeAndApply])
+
+  if (!scope) return null
+
+  const toggle = (ns: string) => {
+    const next = new Set(draft)
+    if (next.has(ns)) next.delete(ns)
+    else next.add(ns)
+    setDraft(next)
+  }
+
+  const clearAll = () => {
+    setDraft(new Set())
+    setIsOpen(false)
+    setSearch('')
+    applySelection(new Set())
+  }
+
+  const selectAllVisible = () => {
+    const next = new Set(draft)
+    for (const ns of filteredItems) next.add(ns)
+    setDraft(next)
+  }
+
+  const clearVisible = () => {
+    const next = new Set(draft)
+    for (const ns of filteredItems) next.delete(ns)
+    setDraft(next)
+  }
+
+  const activeCount = scopeActives.length
+  const triggerLabel =
+    activeCount === 0 ? 'All namespaces' : activeCount === 1 ? scopeActives[0] : `${activeCount} namespaces`
+  const isClusterWide = activeCount === 0
+  const restrictedHint = scope.mode === 'restricted'
+  const isDisabled = disabled || isLoading || setActive.isPending
+  const canClearAll = scope.canClearNamespace || activeCount === 0
+  const tooltipContent = disabled && disabledTooltip
+    ? disabledTooltip
+    : restrictedHint
+      ? 'Limited namespace visibility — only namespaces granted by your RBAC are shown.'
+      : isClusterWide
+        ? 'Currently viewing all namespaces. Click to narrow the view.'
+        : activeCount === 1
+          ? `View is filtered to namespace ${scopeActives[0]}. Click to switch or reset.`
+          : `View is filtered to ${activeCount} namespaces. Click to adjust or reset.`
+
+  // Counts used to label the bulk-action buttons; computed against the visible
+  // (filtered) set so the labels match what the action will affect.
+  const visibleSelectedCount = filteredItems.reduce((n, ns) => n + (draft.has(ns) ? 1 : 0), 0)
+  const allVisibleSelected = filteredItems.length > 0 && visibleSelectedCount === filteredItems.length
+
+  return (
+    <>
+      <Tooltip
+        content={tooltipContent}
+        delay={300}
+        position="bottom"
+      >
+        <button
+          ref={triggerRef}
+          onClick={() => !isDisabled && (isOpen ? closeAndApply() : setIsOpen(true))}
+          disabled={isDisabled}
+          className={`flex items-center gap-1.5 px-2 py-1 rounded text-sm bg-theme-elevated hover:bg-theme-hover text-theme-text-primary disabled:opacity-60 transition-colors ${className}`}
+          aria-label="Switch active namespaces"
+        >
+          {isClusterWide ? (
+            <Globe className="w-3.5 h-3.5 text-theme-text-tertiary" />
+          ) : restrictedHint ? (
+            <AlertTriangle className="w-3.5 h-3.5 text-theme-text-tertiary" />
+          ) : null}
+          <span className="font-medium max-w-[180px] truncate">
+            {setActive.isPending ? 'Switching…' : triggerLabel}
+          </span>
+          <ChevronDown className="w-3 h-3 opacity-60" />
+        </button>
+      </Tooltip>
+
+      {isOpen &&
+        createPortal(
+          <div
+            ref={dropdownRef}
+            style={{ position: 'fixed', top: pos.top, left: pos.left, minWidth: pos.width, zIndex: 100 }}
+            className="bg-theme-surface border border-theme-border rounded-md shadow-theme-lg overflow-hidden"
+          >
+            {items.length > 6 && (
+              <div className="flex items-center gap-2 px-2 py-1.5 border-b border-theme-border">
+                <Search className="w-3.5 h-3.5 text-theme-text-tertiary" />
+                <input
+                  autoFocus
+                  value={search}
+                  onChange={e => setSearch(e.target.value)}
+                  placeholder="Filter namespaces"
+                  className="flex-1 bg-transparent text-sm outline-none text-theme-text-primary placeholder:text-theme-text-tertiary"
+                />
+              </div>
+            )}
+
+            <div className="flex items-center justify-between px-2 py-1.5 border-b border-theme-border text-xs text-theme-text-secondary">
+              <button
+                onClick={canClearAll ? clearAll : undefined}
+                disabled={!canClearAll || activeCount === 0}
+                className="flex items-center gap-1 px-1.5 py-0.5 rounded hover:bg-theme-hover disabled:opacity-50 disabled:hover:bg-transparent"
+                aria-label="Clear namespace selection"
+              >
+                <X className="w-3 h-3" />
+                Clear all
+              </button>
+              <button
+                onClick={allVisibleSelected ? clearVisible : selectAllVisible}
+                disabled={filteredItems.length === 0}
+                className="px-1.5 py-0.5 rounded hover:bg-theme-hover disabled:opacity-50 disabled:hover:bg-transparent"
+              >
+                {allVisibleSelected
+                  ? `Clear ${filteredItems.length} visible`
+                  : search.trim()
+                    ? `Select ${filteredItems.length} visible`
+                    : 'Select all'}
+              </button>
+            </div>
+
+            <ul className="max-h-80 overflow-y-auto py-1">
+              {filteredItems.length === 0 && (
+                <li className="px-3 py-2 text-xs text-theme-text-tertiary">
+                  {search ? 'No matches.' : 'No namespaces available.'}
+                </li>
+              )}
+
+              {filteredItems.map(ns => {
+                const isChecked = draft.has(ns)
+                const isContextDefault = ns === scope.kubeconfigNamespace && ns !== ''
+                return (
+                  <li key={ns}>
+                    <label
+                      className="w-full flex items-center justify-between px-3 py-1.5 text-sm hover:bg-theme-hover text-left text-theme-text-primary cursor-pointer"
+                    >
+                      <span className="flex items-center gap-2 min-w-0">
+                        <input
+                          type="checkbox"
+                          checked={isChecked}
+                          onChange={() => toggle(ns)}
+                          className="shrink-0 accent-current"
+                        />
+                        <span className="truncate">{ns}</span>
+                        {isContextDefault && (
+                          <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary shrink-0">
+                            kubeconfig
+                          </span>
+                        )}
+                      </span>
+                    </label>
+                  </li>
+                )
+              })}
+            </ul>
+
+            <div className="flex items-center justify-between px-3 py-1.5 border-t border-theme-border text-[11px] text-theme-text-tertiary">
+              <span>
+                {draft.size === 0 ? 'All namespaces' : `${draft.size} selected`}
+              </span>
+              <button
+                onClick={closeAndApply}
+                className="px-2 py-0.5 rounded bg-theme-elevated hover:bg-theme-hover text-theme-text-primary"
+              >
+                Done
+              </button>
+            </div>
+
+            {!scope.authoritative && (
+              <div className="px-3 py-2 border-t border-theme-border text-[11px] status-degraded">
+                Limited list — your RBAC doesn&rsquo;t allow listing all
+                namespaces. Other namespaces may be accessible but won&rsquo;t
+                appear here until you switch context.
+              </div>
+            )}
+          </div>,
+          document.body,
+        )}
+    </>
+  )
+})

package/src/components/audit/AuditSettingsDialog.tsx

@@ -1,7 +1,9 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { X, Plus, Trash2 } from 'lucide-react'
+import { clsx } from 'clsx'
 import { useAuditSettings, useUpdateAuditSettings, useAudit } from '../../api/client'
 import type { CheckMeta } from '@skyhook-io/k8s-ui'
+import { validateRFC1123Label, type ValidationResult } from '@skyhook-io/k8s-ui/utils/validators'
 
 interface AuditSettingsDialogProps {
   namespaces: string[]
@@ -28,12 +30,23 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
     ? Object.values(auditData.checks).sort((a, b) => a.title.localeCompare(b.title))
     : []
 
+  // Validate the staged namespace input against RFC 1123. Saving a bogus
+  // entry would silently never match anything in the audit pipeline,
+  // leaving the user thinking the ignore filter doesn't work.
+  const newNsTrimmed = newNs.trim()
+  const newNsValidation = useMemo<ValidationResult>(
+    () => (newNsTrimmed === '' ? { valid: true } : validateRFC1123Label(newNsTrimmed)),
+    [newNsTrimmed],
+  )
+  const newNsError = newNsValidation.valid ? null : newNsValidation.error
+  const newNsDuplicate = newNsTrimmed !== '' && ignoredNs.includes(newNsTrimmed)
+  const canAddNamespace =
+    newNsTrimmed !== '' && newNsValidation.valid && !newNsDuplicate
+
   const addNamespace = () => {
-    const ns = newNs.trim()
-    if (ns && !ignoredNs.includes(ns)) {
-      setIgnoredNs([...ignoredNs, ns])
-      setNewNs('')
-    }
+    if (!canAddNamespace) return
+    setIgnoredNs([...ignoredNs, newNsTrimmed])
+    setNewNs('')
   }
 
   const toggleCheck = (checkID: string) => {
@@ -95,16 +108,30 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
                 onChange={e => setNewNs(e.target.value)}
                 onKeyDown={e => { if (e.key === 'Enter') addNamespace() }}
                 placeholder="Add namespace..."
-                className="flex-1 px-3 py-1.5 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-skyhook-500"
+                aria-invalid={newNsError ? true : undefined}
+                aria-describedby="new-ns-help"
+                className={clsx(
+                  'flex-1 px-3 py-1.5 bg-theme-elevated border rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2',
+                  newNsError || newNsDuplicate
+                    ? 'border-red-500/60 focus:ring-red-500'
+                    : 'border-theme-border-light focus:ring-skyhook-500',
+                )}
               />
               <button
                 onClick={addNamespace}
-                disabled={!newNs.trim()}
+                disabled={!canAddNamespace}
                 className="px-3 py-1.5 text-sm btn-brand rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <Plus className="w-4 h-4" />
               </button>
             </div>
+            {(newNsError || newNsDuplicate) && (
+              <p id="new-ns-help" className="mt-1.5 text-xs text-red-400">
+                {newNsDuplicate
+                  ? `"${newNsTrimmed}" is already in the list.`
+                  : `Namespace ${newNsError}.`}
+              </p>
+            )}
           </div>
 
           {/* Disabled Checks */}
@@ -150,8 +177,20 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
           </button>
           <button
             onClick={handleSave}
-            disabled={updateSettings.isPending}
-            className="px-4 py-1.5 text-sm btn-brand rounded-lg disabled:opacity-50"
+            // Block save while the namespace input has unfixed pending
+            // text — otherwise the user clicks Save expecting their
+            // entry to be included and it's silently dropped.
+            disabled={
+              updateSettings.isPending || newNsError !== null || newNsDuplicate
+            }
+            title={
+              newNsError
+                ? 'Fix or clear the pending namespace input before saving'
+                : newNsDuplicate
+                  ? 'Clear the duplicate pending input before saving'
+                  : undefined
+            }
+            className="px-4 py-1.5 text-sm btn-brand rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {updateSettings.isPending ? 'Saving...' : 'Save'}
           </button>

package/src/components/helm/ChartBrowser.tsx

@@ -148,7 +148,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                   onClick={() => { setSelectedRepo('all'); setRepoDropdownOpen(false) }}
                   className={clsx(
                     'w-full px-3 py-2 text-left text-sm hover:bg-theme-hover flex items-center justify-between',
-                    selectedRepo === 'all' ? 'text-blue-400' : 'text-theme-text-primary'
+                    selectedRepo === 'all' ? 'text-accent' : 'text-theme-text-primary'
                   )}
                 >
                   <span>All Repositories</span>
@@ -186,9 +186,9 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                 type="checkbox"
                 checked={showOfficialOnly}
                 onChange={(e) => setShowOfficialOnly(e.target.checked)}
-                className="rounded border-theme-border text-blue-500 focus:ring-blue-500"
+                className="rounded border-theme-border text-accent focus:ring-accent"
               />
-              <BadgeCheck className="w-3.5 h-3.5 text-blue-400" />
+              <BadgeCheck className="w-3.5 h-3.5 text-accent" />
               Official
             </label>
             <label className="flex items-center gap-1.5 text-sm text-theme-text-secondary">
@@ -196,7 +196,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                 type="checkbox"
                 checked={showVerifiedOnly}
                 onChange={(e) => setShowVerifiedOnly(e.target.checked)}
-                className="rounded border-theme-border text-blue-500 focus:ring-blue-500"
+                className="rounded border-theme-border text-accent focus:ring-accent"
               />
               <Shield className="w-3.5 h-3.5 text-green-400" />
               Verified
@@ -207,7 +207,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
               <select
                 value={artifactHubSort}
                 onChange={(e) => setArtifactHubSort(e.target.value as ArtifactHubSortOption)}
-                className="bg-theme-elevated border border-theme-border-light rounded px-2 py-1 text-sm text-theme-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="bg-theme-elevated border border-theme-border-light rounded px-2 py-1 text-sm text-theme-text-primary focus:outline-none focus:ring-2 focus:ring-accent"
               >
                 <option value="relevance">Relevance</option>
                 <option value="stars">Stars</option>
@@ -225,7 +225,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
             placeholder={chartSource === 'local' ? "Search charts..." : "Search ArtifactHub..."}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full max-w-md pl-10 pr-4 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full max-w-md pl-10 pr-4 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-accent"
           />
         </div>
 
@@ -237,7 +237,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                 type="checkbox"
                 checked={showAllVersions}
                 onChange={(e) => setShowAllVersions(e.target.checked)}
-                className="rounded border-theme-border text-blue-500 focus:ring-blue-500"
+                className="rounded border-theme-border text-accent focus:ring-accent"
               />
               All versions
             </label>
@@ -276,7 +276,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                       Add repositories using <code className="bg-theme-elevated px-1 rounded">helm repo add</code>
                     </p>
                     <p className="mt-2">
-                      Or try searching on <button onClick={() => setChartSource('artifacthub')} className="text-blue-400 hover:underline">ArtifactHub</button>
+                      Or try searching on <button onClick={() => setChartSource('artifacthub')} className="text-accent-text hover:underline">ArtifactHub</button>
                     </p>
                   </div>
                 ) : (
@@ -375,7 +375,7 @@ function RepoDropdownItem({ repo, isSelected, onSelect, onUpdate, isUpdating, ca
         onClick={onSelect}
         className={clsx(
           'flex-1 text-left text-sm truncate',
-          isSelected ? 'text-blue-400' : 'text-theme-text-primary'
+          isSelected ? 'text-accent' : 'text-theme-text-primary'
         )}
       >
         {repo.name}
@@ -413,7 +413,7 @@ function LocalChartCard({ chart, onSelect }: LocalChartCardProps) {
           <img
             src={chart.icon}
             alt=""
-            className="w-10 h-10 rounded object-contain bg-white/10 p-1"
+            className="w-10 h-10 rounded object-contain bg-theme-elevated p-1"
             onError={(e) => {
               (e.target as HTMLImageElement).style.display = 'none'
             }}
@@ -476,7 +476,7 @@ function ArtifactHubChartCard({ chart, onSelect }: ArtifactHubChartCardProps) {
           <img
             src={chart.logoUrl}
             alt=""
-            className="w-12 h-12 rounded object-contain bg-white/10 p-1 shrink-0"
+            className="w-12 h-12 rounded object-contain bg-theme-elevated p-1 shrink-0"
             onError={(e) => {
               (e.target as HTMLImageElement).style.display = 'none'
             }}