@skyhook-io/radar-app 1.10.0 → 1.12.2

package/src/components/ConnectionErrorView.test.tsx

@@ -1,15 +1,21 @@
 import { renderToStaticMarkup } from 'react-dom/server'
 import type { ReactNode } from 'react'
 import { describe, expect, it, vi } from 'vitest'
+import type { ContextInfo } from '../types'
 
 vi.stubGlobal('window', { location: { host: 'localhost:9280' } })
 
+const useContextsMock = vi.hoisted(() => vi.fn(
+  (): { data: ContextInfo[] | undefined } => ({ data: undefined }),
+))
+
 vi.mock('@skyhook-io/k8s-ui', () => ({
   ClusterName: ({ name }: { name: string }) => <span>{name}</span>,
   useOpenLocalTerminal: () => vi.fn(),
 }))
 vi.mock('../api/client', () => ({
   useAuthMe: () => ({ data: { authEnabled: false } }),
+  useContexts: useContextsMock,
 }))
 vi.mock('./ContextSwitcher', () => ({
   ContextSwitcher: () => <button>Switch context</button>,
@@ -72,6 +78,34 @@ describe('ConnectionErrorView authentication guidance', () => {
     expect(markup).not.toContain('aws sso login')
   })
 
+  it('uses the original context for collision-qualified auth guidance', () => {
+    const original = 'arn:aws:eks:us-east-1:123456789012:cluster/prod'
+    const hints = selectConnectionHints('auth', `${original} (secondary)`, original)
+
+    expect(hints?.title).toBe('EKS Authentication Failed')
+    expect(hints?.fallbackCommand?.command).toBe(
+      'aws eks update-kubeconfig --name prod --region us-east-1',
+    )
+  })
+
+  it('wires the current context original name into auth guidance', () => {
+    const original = 'arn:aws:eks:us-east-1:123456789012:cluster/prod'
+    useContextsMock.mockReturnValueOnce({
+      data: [{
+        name: `${original} (secondary)`,
+        originalName: original,
+        cluster: original,
+        user: 'prod',
+        namespace: '',
+        isCurrent: true,
+      }],
+    })
+
+    const markup = renderError('auth', `${original} (secondary)`)
+    expect(markup).toContain('update-kubeconfig')
+    expect(markup).toContain('us-east-1')
+  })
+
   it('renders placeholder AKS commands without a run affordance', () => {
     const markup = renderError('auth-rejected', 'clusterUser_platform_prod')
 
@@ -86,3 +120,22 @@ describe('ConnectionErrorView authentication guidance', () => {
     expect(markup).not.toContain('aria-label="Run command in terminal"')
   })
 })
+
+describe('ConnectionErrorView kubeconfig guidance', () => {
+  it('keeps the actionable error and context switch visible for a broken context', () => {
+    const markup = renderError('config', 'prod')
+
+    expect(markup).toContain('Cannot Load Cluster Configuration')
+    expect(markup).toContain('Kubeconfig Problem')
+    expect(markup).toContain('aria-expanded="false"')
+    expect(markup).toContain('id="connection-raw-error"')
+    expect(markup).toContain('safe error')
+    expect(markup).toContain('Switch context')
+  })
+
+  it('does not offer context switching when no context was loaded', () => {
+    const markup = renderError('config', '')
+
+    expect(markup).not.toContain('Switch context')
+  })
+})

package/src/components/ConnectionErrorView.tsx

@@ -4,7 +4,7 @@ import type { ConnectionState } from '../context/ConnectionContext'
 import { ContextSwitcher } from './ContextSwitcher'
 import { parseContextName } from '../utils/context-name'
 import { useOpenLocalTerminal, ClusterName } from '@skyhook-io/k8s-ui'
-import { useAuthMe } from '../api/client'
+import { useAuthMe, useContexts } from '../api/client'
 import { Tooltip } from './ui/Tooltip'
 import { allShellSafe } from '../utils/shell-safe'
 import { apiUrl } from '../api/config'
@@ -218,11 +218,11 @@ function getTimeoutHints(context: string): AuthHints | null {
 
 const errorHints: Record<string, { title: string; hints: string[] }> = {
   config: {
-    title: 'No Kubeconfig Found',
+    title: 'Kubeconfig Problem',
     hints: [
-      'Radar could not find a kubeconfig file at ~/.kube/config',
-      'If your kubeconfig is at a custom path, set the KUBECONFIG environment variable in your shell profile (~/.zshrc or ~/.bashrc)',
-      'You can also pass --kubeconfig <path> when launching from the terminal',
+      'Radar could not load a usable kubeconfig for this context',
+      'If the file exists, check the local Radar logs for the exact parse or load failure',
+      'If no kubeconfig is configured, Radar checks ~/.kube/config; set KUBECONFIG or pass --kubeconfig <path> for another location',
     ],
   },
   rbac: {
@@ -321,16 +321,17 @@ export function CopyableCommand({ command, onRunInTerminal }: { command: string;
   )
 }
 
-export function selectConnectionHints(errorType: string | undefined, context: string): AuthHints | null {
+export function selectConnectionHints(errorType: string | undefined, context: string, originalContext?: string): AuthHints | null {
+  const parsedContext = originalContext || context
   switch (errorType) {
     case 'auth':
-      return getAuthHints(context)
+      return getAuthHints(parsedContext)
     case 'auth-rejected':
-      return getAuthRejectedHints(context)
+      return getAuthRejectedHints(parsedContext)
     case 'auth-plugin-stuck':
       return getAuthPluginStuckHints()
     case 'timeout':
-      return getTimeoutHints(context)
+      return getTimeoutHints(parsedContext)
     default:
       return null
   }
@@ -342,7 +343,9 @@ export function ConnectionErrorView({ connection, onRetry, isRetrying }: Connect
   const isAuthRejected = connection.errorType === 'auth-rejected'
   const isAuthPluginStuck = connection.errorType === 'auth-plugin-stuck'
   const isAuthError = isAuth || isAuthRejected || isAuthPluginStuck
-  const commandInfo = selectConnectionHints(connection.errorType, connection.context || '')
+  const { data: contexts } = useContexts()
+  const originalContext = contexts?.find((context) => context.name === connection.context)?.originalName
+  const commandInfo = selectConnectionHints(connection.errorType, connection.context || '', originalContext)
   const errorInfo = commandInfo || errorHints[connection.errorType || 'unknown'] || errorHints.unknown
   const openLocalTerminal = useOpenLocalTerminal()
   const { data: authMe } = useAuthMe()
@@ -384,7 +387,7 @@ export function ConnectionErrorView({ connection, onRetry, isRetrying }: Connect
           </div>
 
           <h2 className="text-xl font-semibold text-theme-text-primary mb-2">
-            {connection.errorType === 'config' ? 'No Cluster Configuration' : 'Cannot Connect to Cluster'}
+            {connection.errorType === 'config' ? 'Cannot Load Cluster Configuration' : 'Cannot Connect to Cluster'}
           </h2>
 
           <div className="mb-6 space-y-1">
@@ -480,7 +483,7 @@ export function ConnectionErrorView({ connection, onRetry, isRetrying }: Connect
               )}
             </button>
 
-            {connection.errorType !== 'config' && <ContextSwitcher triggerName="Switch context" />}
+            {connection.context && <ContextSwitcher triggerName="Switch context" />}
           </div>
 
           {isAuthError && (

package/src/components/ContextSwitcher.tsx

@@ -10,7 +10,7 @@ import { useContextSwitch } from '../context/ContextSwitchContext'
 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 { parseContextForSwitcher, visibleContextQualifier, type ParsedContextName } from '../utils/context-name'
 
 interface ContextSwitcherProps {
   className?: string
@@ -25,6 +25,7 @@ export interface ContextSwitcherHandle {
 
 interface ParsedContext extends ParsedContextName {
   context: ContextInfo
+  nameQualifier?: string
 }
 
 function shouldSuppressSwitchErrorToast(error: unknown): boolean {
@@ -54,18 +55,9 @@ export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcher
       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)),
+      ...parseContextForSwitcher(ctx),
     }))
     const accounts = new Set(parsed.map(p => `${p.provider}:${p.account}`))
     const sources = new Set(contexts.map(c => c.source).filter(Boolean))
@@ -100,6 +92,7 @@ export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcher
       return {
         id: p.context.name,
         name: p.raw,
+        nameQualifier: visibleContextQualifier(p.nameQualifier, p.context.source, hasMultipleSources),
         secondary: p.provider ? p.raw : undefined,
         badge: p.region || undefined,
         sourceLabel: hasMultipleSources ? p.context.source : undefined,
@@ -188,12 +181,15 @@ export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcher
 
   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.
+  // Keep the trigger name parseable and render any collision qualifier as a
+  // separate suffix so cloud-provider metadata remains intact.
   // Fall back to clusterInfo.context for the very-early window before
   // /api/contexts has resolved.
   const currentParsed = currentId ? parsedById.get(currentId) : undefined
   const currentRaw = triggerName || currentParsed?.raw || clusterInfo?.context || currentCtx?.name || 'Unknown'
+  const currentNameQualifier = triggerName
+    ? undefined
+    : visibleContextQualifier(currentParsed?.nameQualifier, currentCtx?.source, hasMultipleSources)
   const currentSourceLabel = triggerName ? undefined : hasMultipleSources ? currentCtx?.source || undefined : undefined
 
   return (
@@ -205,6 +201,7 @@ export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcher
         label={label}
         currentId={currentId}
         currentName={currentRaw}
+        currentNameQualifier={currentNameQualifier}
         currentSourceLabel={currentSourceLabel}
         items={items}
         onSelect={handleSelect}

package/src/components/audit/UpgradeReadinessView.tsx

@@ -76,7 +76,7 @@ export function UpgradeReadinessView({ namespaces, onNavigateToResource }: Upgra
   const location = useLocation()
   const navigate = useNavigate()
   const requestedTarget = new URLSearchParams(location.search).get('target') ?? undefined
-  const { data, isLoading, isFetching, isPlaceholderData, error, dataUpdatedAt, refetch } = useUpgradeReadiness(requestedTarget)
+  const { data, isLoading, isFetching, isPlaceholderData, error, dataUpdatedAt, refreshScan } = useUpgradeReadiness(requestedTarget)
   const { connection } = useConnection()
   const targetOptions = useMemo(
     () => buildTargetOptions(data?.currentVersion, data?.reviewedThrough, requestedTarget ?? data?.targetVersion),
@@ -153,8 +153,8 @@ export function UpgradeReadinessView({ namespaces, onNavigateToResource }: Upgra
             )}
             <FreshnessControl
               mode="snapshot"
-              dataUpdatedAt={dataUpdatedAt}
-              onRefresh={() => refetch()}
+              dataUpdatedAt={data.observedAt ? Date.parse(data.observedAt) : dataUpdatedAt}
+              onRefresh={() => refreshScan()}
               connectionState={connection.state}
               isFetching={isFetching}
             />

package/src/components/capacity/ClusterSchedulingCard.tsx

@@ -7,7 +7,7 @@ import {
 import { Badge } from "@skyhook-io/k8s-ui/components/ui/Badge";
 import {
   parseCPUToNanocores,
-  parseMemoryToBytes,
+  parseQuantityToNumber,
 } from "@skyhook-io/k8s-ui/utils/format";
 import {
   CertaintyGlyph,
@@ -96,16 +96,15 @@ export function quantityToNumber(
     }
     return null;
   }
-  // Milli quantities before the byte parser — it ignores the `m` suffix and
-  // would read 3000m as 3000, a 1000× distortion.
-  const milli = /^(-?\d+(?:\.\d+)?)m$/.exec(value);
-  if (milli) return Number(milli[1]) / 1000;
-  const parsed = parseMemoryToBytes(value);
-  if (Number.isFinite(parsed) && (parsed !== 0 || /^[0.]+\D*$/.test(value))) {
+  // The shared parser knows the full suffix table — the byte parser stops at
+  // Ti, so a 1PiB aggregate would read as 1 byte. It returns 0 for input it
+  // cannot parse, so distinguish a real zero to preserve the null (= unknown,
+  // not zero) contract of this card.
+  const parsed = parseQuantityToNumber(value);
+  if (parsed !== 0 || /^[+-]?[0.]+\D*$/.test(value)) {
     return parsed;
   }
-  const plain = Number(value);
-  return Number.isFinite(plain) ? plain : null;
+  return null;
 }
 
 function worstCertainty(

package/src/components/capacity/schedulingBar.test.ts

@@ -202,6 +202,16 @@ describe("quantityToNumber", () => {
     expect(quantityToNumber("example.com/widget", "3000m")).toBe(3);
     expect(quantityToNumber("cpu", "1500m")).toBe(1.5e9);
   });
+
+  // Aggregate memory on a large cluster reaches suffixes the byte parser
+  // never knew (its table stops at Ti) — "1Pi" must not read as 1 byte.
+  it("parses the large suffixes an aggregate capacity can carry", () => {
+    expect(quantityToNumber("memory", "1Pi")).toBe(1024 ** 5);
+    expect(quantityToNumber("memory", "1Ei")).toBe(1024 ** 6);
+    expect(quantityToNumber("pods", "1k")).toBe(1000);
+    expect(quantityToNumber("pods", "1e3")).toBe(1000);
+    expect(quantityToNumber("memory", "0Gi")).toBe(0);
+  });
 });
 
 describe("claimStagesDetail", () => {

package/src/components/cost/ApplicationCostTab.test.ts

@@ -11,6 +11,7 @@ describe('getApplicationCostState', () => {
   it('keeps current app cost visible when historical owner metrics are missing', () => {
     const current: OpenCostApplicationCostResponse = {
       available: true,
+      currency: 'USD',
       partial: true,
       totals: {
         hourlyCost: 0.4,
@@ -38,6 +39,7 @@ describe('getApplicationCostState', () => {
     }
     const trend: OpenCostApplicationCostTrendResponse = {
       available: false,
+      currency: 'USD',
       reason: 'no_metrics',
       range: '24h',
       coverage: { total: 3, included: 0 },
@@ -54,6 +56,7 @@ describe('getApplicationCostState', () => {
   it('uses historical data when current app metrics are absent but history exists', () => {
     const current: OpenCostApplicationCostResponse = {
       available: false,
+      currency: 'USD',
       reason: 'no_metrics',
       totals: {
         hourlyCost: 0,
@@ -69,6 +72,7 @@ describe('getApplicationCostState', () => {
     }
     const trend: OpenCostApplicationCostTrendResponse = {
       available: true,
+      currency: 'USD',
       range: '7d',
       windowTotalCost: 2,
       dataPoints: [
@@ -89,6 +93,7 @@ describe('getApplicationCostState', () => {
   it('treats all tracked workloads scaled to zero as valid zero state', () => {
     const current: OpenCostApplicationCostResponse = {
       available: true,
+      currency: 'USD',
       totals: {
         hourlyCost: 0,
         cpuCost: 0,
@@ -168,6 +173,7 @@ describe('getApplicationCostState', () => {
   it('surfaces app workload access and existence failures', () => {
     const current: OpenCostApplicationCostResponse = {
       available: false,
+      currency: 'USD',
       reason: 'access_denied',
       totals: {
         hourlyCost: 0,

package/src/components/cost/ApplicationCostTab.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
-import { AlertCircle, DollarSign, HelpCircle, Loader2, TrendingUp } from 'lucide-react'
+import { AlertCircle, Coins, HelpCircle, Loader2, TrendingUp } from 'lucide-react'
 import type { AppRow, AppWorkload } from '@skyhook-io/k8s-ui'
 import {
   COST_DISCOVERY_GRACE_MS,
@@ -15,6 +15,7 @@ import {
 import { Tooltip } from '../ui/Tooltip'
 import { ChartLegend, CostTimeRangeSelector, StackedAreaChart } from './CostTrendChart'
 import {
+  DEFAULT_COST_CURRENCY,
   formatCostPerHour,
   formatHistoricalSpend,
   formatProjectedDailyRate,
@@ -148,6 +149,8 @@ export function ApplicationCostTab({
   const hasTrend = points.length >= 2 && points.some((p) => p.value > 0)
   const rows = current?.workloads ?? []
   const maxCost = Math.max(...rows.map((row) => row.current?.hourlyCost ?? 0), 0)
+  const currentCurrency = current?.currency ?? trend?.currency ?? DEFAULT_COST_CURRENCY
+  const trendCurrency = trend?.currency ?? current?.currency ?? DEFAULT_COST_CURRENCY
 
   return (
     <div className="mx-auto w-full max-w-[1600px] space-y-4">
@@ -182,11 +185,11 @@ export function ApplicationCostTab({
                 <div className="text-sm font-semibold text-theme-text-primary">
                   Application compute cost
                 </div>
-                <CostInfoTooltip content="Dollars are based on OpenCost CPU and memory allocation over time, grouped by the workloads in this application. OpenCost allocation uses the greater of requested or observed resources." />
+                <CostInfoTooltip content="Values are based on OpenCost CPU and memory allocation over time, grouped by the workloads in this application. OpenCost allocation uses the greater of requested or observed resources." />
               </div>
               <div className="text-xs text-theme-text-tertiary">
-                OpenCost CPU and memory allocation rate ($/hr) for Deployment, StatefulSet, and
-                DaemonSet workloads
+                OpenCost CPU and memory allocation rate ({trendCurrency}/hr) for Deployment,
+                StatefulSet, and DaemonSet workloads
               </div>
             </div>
           </div>
@@ -201,6 +204,7 @@ export function ApplicationCostTab({
                 points.length,
                 trend?.windowTotalCost ?? 0,
                 trendLoading || state === 'partial_missing_history',
+                trendCurrency,
               )}
               subvalue={
                 state === 'partial_missing_history'
@@ -210,10 +214,10 @@ export function ApplicationCostTab({
             />
             <CostMetricBlock
               label="Projected monthly"
-              value={totals ? formatProjectedMonthlyCost(hourly) : '—'}
+              value={totals ? formatProjectedMonthlyCost(hourly, currentCurrency) : '—'}
               subvalue={
                 totals
-                  ? `${formatCostPerHour(hourly)} current rate`
+                  ? `${formatCostPerHour(hourly, currentCurrency)} current rate`
                   : 'Current allocation unavailable'
               }
             />
@@ -226,7 +230,7 @@ export function ApplicationCostTab({
               </div>
             ) : hasTrend && chartSeries.length > 0 ? (
               <div className="min-w-0">
-                <StackedAreaChart series={chartSeries} />
+                <StackedAreaChart series={chartSeries} currency={trendCurrency} />
                 <ChartLegend series={chartSeries} />
               </div>
             ) : (
@@ -250,16 +254,17 @@ export function ApplicationCostTab({
         />
         <CostMetricTile
           label="Projected daily"
-          value={totals ? formatProjectedDailyRate(hourly) : '—'}
+          value={totals ? formatProjectedDailyRate(hourly, currentCurrency) : '—'}
           subvalue={
             totals
-              ? `${formatCostPerHour(hourly)} current hourly rate`
+              ? `${formatCostPerHour(hourly, currentCurrency)} current hourly rate`
               : 'Current allocation unavailable'
           }
         />
       </div>
 
       <CurrentAllocationUse
+        currency={currentCurrency}
         dataAvailable={Boolean(totals)}
         cpuCost={totals?.cpuCost ?? 0}
         memoryCost={totals?.memoryCost ?? 0}
@@ -296,6 +301,7 @@ export function ApplicationCostTab({
                   key={applicationCostKey(row)}
                   row={row}
                   maxCost={maxCost}
+                  currency={currentCurrency}
                   onOpen={
                     appWorkload && onSelectWorkloadCost
                       ? () => onSelectWorkloadCost(appWorkload)
@@ -309,9 +315,13 @@ export function ApplicationCostTab({
       </section>
 
       <div className="text-xs text-theme-text-tertiary">
-        Powered by OpenCost via Prometheus. Historical spend uses the selected range; projected
-        monthly values multiply current hourly allocation. Batch/job cost is separate; storage/PVC
-        and network costs remain at namespace and cluster level.
+        Powered by OpenCost via Prometheus.{' '}
+        {currentCurrency !== DEFAULT_COST_CURRENCY && (
+          <>Labeled {currentCurrency}; no conversion. </>
+        )}
+        Historical spend uses the selected range; projected monthly values multiply current hourly
+        allocation. Batch/job cost is separate; storage/PVC and network costs remain at namespace
+        and cluster level.
       </div>
     </div>
   )
@@ -361,10 +371,12 @@ export function applicationCostWorkloads(workloads: AppWorkload[]): AppWorkload[
 function ApplicationWorkloadCostRow({
   row,
   maxCost,
+  currency,
   onOpen,
 }: {
   row: OpenCostApplicationWorkloadCost
   maxCost: number
+  currency: string
   onOpen?: () => void
 }) {
   const current = row.current
@@ -392,10 +404,10 @@ function ApplicationWorkloadCostRow({
         )}
       </div>
       <div className="text-right text-sm font-medium tabular-nums text-theme-text-primary">
-        {current ? formatProjectedMonthlyRate(hourly) : '—'}
+        {current ? formatProjectedMonthlyRate(hourly, currency) : '—'}
       </div>
       <div className="hidden text-right text-xs tabular-nums text-theme-text-tertiary sm:block">
-        {current ? formatCostPerHour(hourly) : '—'}
+        {current ? formatCostPerHour(hourly, currency) : '—'}
       </div>
       <div className="hidden min-w-0 items-center gap-2 md:flex">
         <div
@@ -410,7 +422,7 @@ function ApplicationWorkloadCostRow({
       </div>
       <div className="hidden text-right text-xs tabular-nums text-theme-text-tertiary lg:block">
         {current
-          ? `${formatProjectedMonthlyCost(current.cpuCost)} / ${formatProjectedMonthlyCost(current.memoryCost)}`
+          ? `${formatProjectedMonthlyCost(current.cpuCost, currency)} / ${formatProjectedMonthlyCost(current.memoryCost, currency)}`
           : '—'}
       </div>
     </>
@@ -512,7 +524,7 @@ function ApplicationCostUnavailable({
   return (
     <div className="flex h-full min-h-[320px] items-center justify-center">
       <div className="flex max-w-md flex-col items-center gap-3 text-center text-theme-text-secondary">
-        <DollarSign className="h-8 w-8 text-theme-text-tertiary/50" />
+        <Coins className="h-8 w-8 text-theme-text-tertiary/50" />
         <div className="text-sm">{text}</div>
       </div>
     </div>

package/src/components/cost/CostTrendChart.tsx

@@ -2,7 +2,7 @@ import { useState, useMemo, useRef, useCallback } from 'react'
 import { clsx } from 'clsx'
 import { Loader2, TrendingUp } from 'lucide-react'
 import { useOpenCostTrend, type CostTimeRange, type OpenCostTrendSeries } from '../../api/client'
-import { formatCostAxis, formatCostPerHour } from './format'
+import { DEFAULT_COST_CURRENCY, formatCostAxis, formatCostPerHour } from './format'
 
 const SERIES_COLORS = [
   '#3b82f6', // blue-500
@@ -41,6 +41,8 @@ export function CostTrendChart() {
     return null
   }
 
+  const currency = data.currency ?? DEFAULT_COST_CURRENCY
+
   return (
     <div className="rounded-lg border border-theme-border bg-theme-surface/50">
       <div className="flex items-center justify-between px-4 py-2.5 border-b border-theme-border">
@@ -48,20 +50,28 @@ export function CostTrendChart() {
           <TrendingUp className="w-4 h-4 text-theme-text-tertiary" />
           <div>
             <div className="text-xs font-medium text-theme-text-secondary">Cost rate trend</div>
-            <div className="text-[10px] text-theme-text-tertiary">Historical OpenCost allocation rate ($/hr)</div>
+            <div className="text-[10px] text-theme-text-tertiary">
+              Historical OpenCost allocation rate ({currency}/hr)
+            </div>
           </div>
         </div>
         <CostTimeRangeSelector value={timeRange} onChange={setTimeRange} />
       </div>
       <div className="p-4">
-        <StackedAreaChart series={data.series} />
+        <StackedAreaChart series={data.series} currency={currency} />
         <ChartLegend series={data.series} />
       </div>
     </div>
   )
 }
 
-export function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] }) {
+export function StackedAreaChart({
+  series,
+  currency,
+}: {
+  series: OpenCostTrendSeries[]
+  currency: string
+}) {
   const svgRef = useRef<SVGSVGElement>(null)
   const [hoverX, setHoverX] = useState<number | null>(null)
 
@@ -123,7 +133,7 @@ export function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] })
     const tickCount = 4
     const yTicks = Array.from({ length: tickCount + 1 }, (_, i) => {
       const val = (yMax / tickCount) * i
-      return { val, y: toY(val), label: formatCostAxis(val) }
+      return { val, y: toY(val), label: formatCostAxis(val, currency) }
     })
 
     // X axis ticks
@@ -175,7 +185,7 @@ export function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] })
       xTicks,
       paths,
     }
-  }, [series, plotHeight, plotWidth])
+  }, [series, currency, plotHeight, plotWidth])
 
   // Hover data — depends on hoverX + chartData, must be a separate hook (called unconditionally)
   const hoverData = useMemo(() => {
@@ -341,14 +351,14 @@ export function StackedAreaChart({ series }: { series: OpenCostTrendSeries[] })
                   <div className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: p.color }} />
                   <span className="text-theme-text-secondary">{p.namespace}</span>
                   <span className="text-theme-text-primary font-semibold ml-auto pl-3 tabular-nums">
-                    {formatCostTooltip(p.value)}
+                    {formatCostTooltip(p.value, currency)}
                   </span>
                 </div>
               ))}
             {series.length > 1 && (
               <div className="border-t border-theme-border/50 mt-1 pt-1 flex justify-between text-theme-text-primary font-semibold">
                 <span>Total</span>
-                <span className="tabular-nums">{formatCostTooltip(hoverData.total)}</span>
+                <span className="tabular-nums">{formatCostTooltip(hoverData.total, currency)}</span>
               </div>
             )}
           </div>
@@ -403,8 +413,8 @@ export function CostTimeRangeSelector({
   )
 }
 
-function formatCostTooltip(value: number): string {
-  return formatCostPerHour(value)
+function formatCostTooltip(value: number, currency: string): string {
+  return formatCostPerHour(value, currency)
 }
 
 function formatTimestamp(unix: number): string {