@skyhook-io/k8s-ui 1.8.9 → 1.8.11

package/src/components/ui/Collapse.tsx

@@ -0,0 +1,59 @@
+import { useState, type ReactNode } from 'react'
+import { ChevronRight } from 'lucide-react'
+import { clsx } from 'clsx'
+
+// Animated show/hide using the grid-template-rows 0fr→1fr technique — the
+// app-wide standard for expand/collapse (drawers, checks, audit, resources
+// sidebar, port-forward). The inner overflow-hidden wrapper is load-bearing:
+// it clips the content while the grid row animates between 0 and its natural
+// height, so nothing spills before the row is fully open.
+//
+// Content stays mounted while closed (clipped to zero height) — that's what
+// lets it animate. `inert` when closed keeps that clipped content out of the
+// tab order and the accessibility tree, so keyboard/screen-reader users don't
+// land on invisible rows (matching ChecksView's collapse).
+//
+// `mountLazily` defers rendering the children until the first open, then keeps
+// them mounted so both the open and close animations still run. Use it when the
+// collapsed content is heavy and there are many instances (e.g. hundreds of
+// resource rows, each with a drift panel) — otherwise every collapsed instance
+// pays its render cost up front. Off by default so the common single-instance
+// case keeps the simplest behavior.
+export function Collapse({
+  open,
+  children,
+  className,
+  mountLazily = false,
+}: {
+  open: boolean
+  children: ReactNode
+  className?: string
+  mountLazily?: boolean
+}) {
+  // Latch: once opened, stay mounted. Conditional setState-in-render is the
+  // supported pattern for deriving state from props without an extra commit.
+  const [hasOpened, setHasOpened] = useState(open)
+  if (mountLazily && open && !hasOpened) setHasOpened(true)
+  const render = !mountLazily || hasOpened
+  return (
+    <div
+      className={clsx('grid transition-[grid-template-rows] duration-200 ease-out', className)}
+      style={{ gridTemplateRows: open ? '1fr' : '0fr' }}
+    >
+      <div className="overflow-hidden" inert={!open || undefined}>{render ? children : null}</div>
+    </div>
+  )
+}
+
+// CollapseChevron is the disclosure caret that pairs with <Collapse>: a single
+// ChevronRight that rotates 90° when open, rather than swapping between two
+// icons. Matches the drawer Section / ExpandableSection affordance so every
+// collapsible surface animates the same way.
+export function CollapseChevron({ open, className }: { open: boolean; className?: string }) {
+  return (
+    <ChevronRight
+      aria-hidden="true"
+      className={clsx('shrink-0 text-theme-text-tertiary transition-transform duration-200', open && 'rotate-90', className)}
+    />
+  )
+}

package/src/components/ui/ConfirmDialog.tsx

@@ -17,6 +17,8 @@ interface ConfirmDialogProps {
   variant?: 'danger' | 'warning'
   isLoading?: boolean
   isClosable?: boolean // Allow closing even when isLoading (e.g., for long-running ops the user can dismiss)
+  confirmDisabled?: boolean // Block the confirm action while custom content is invalid (e.g., bad YAML)
+  className?: string
   children?: ReactNode // Optional custom content (e.g., checkboxes)
 }
 
@@ -32,6 +34,8 @@ export function ConfirmDialog({
   variant = 'danger',
   isLoading = false,
   isClosable = false,
+  confirmDisabled = false,
+  className,
   children,
 }: ConfirmDialogProps) {
   const canClose = !isLoading || isClosable
@@ -39,7 +43,7 @@ export function ConfirmDialog({
   const severity = isDanger ? 'error' : 'warning'
 
   return (
-    <DialogPortal open={open} onClose={onClose} closable={canClose} className="max-w-md w-full">
+    <DialogPortal open={open} onClose={onClose} closable={canClose} className={clsx('w-full', className ?? 'max-w-md')}>
       {/* Header */}
       <div className="flex items-start gap-3 p-4 border-b border-theme-border">
         <div
@@ -109,9 +113,9 @@ export function ConfirmDialog({
         </button>
         <button
           onClick={onConfirm}
-          disabled={isLoading}
+          disabled={isLoading || confirmDisabled}
           className={clsx(
-            'px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2',
+            'px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2',
             isDanger
               ? 'bg-red-600 hover:bg-red-700 text-theme-text-primary'
               : 'bg-amber-600 hover:bg-amber-700 text-theme-text-primary'

package/src/components/ui/DialogPortal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, type ReactNode } from 'react'
+import { useEffect, useRef, type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { clsx } from 'clsx'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
@@ -29,19 +29,40 @@ export function DialogPortal({ open, onClose, children, className, closable = tr
   const dialogRef = useRef<HTMLDivElement>(null)
   const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
 
-  // Capture-phase ESC handler — stops event before it reaches document listeners (e.g. drawer shortcuts)
+  // Bubble phase lets nested editors and menus consume Escape before the dialog closes.
+  const handleDialogKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {
+    if (e.key !== 'Escape') return
+
+    e.stopPropagation()
+    e.preventDefault()
+
+    if (closable) {
+      onClose()
+    }
+  }
+
   useEffect(() => {
     if (!open) return
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && closable) {
-        e.stopPropagation()
-        e.preventDefault()
+
+    const handleDocumentKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      const modalDialogs = Array.from(document.querySelectorAll<HTMLElement>('[role="dialog"][aria-modal="true"]'))
+      const topDialog = modalDialogs[modalDialogs.length - 1]
+      if (topDialog !== dialogRef.current) return
+
+      if (dialogRef.current?.contains(e.target as Node)) return
+
+      e.stopPropagation()
+      e.preventDefault()
+
+      if (closable) {
         onClose()
       }
     }
-    document.addEventListener('keydown', handleKeyDown, true)
-    return () => document.removeEventListener('keydown', handleKeyDown, true)
-  }, [open, onClose, closable])
+
+    document.addEventListener('keydown', handleDocumentKeyDown, true)
+    return () => document.removeEventListener('keydown', handleDocumentKeyDown, true)
+  }, [open, closable, onClose])
 
   // Move focus into the dialog for accessibility and tab navigation
   useEffect(() => {
@@ -67,6 +88,7 @@ export function DialogPortal({ open, onClose, children, className, closable = tr
         role="dialog"
         aria-modal="true"
         tabIndex={-1}
+        onKeyDown={handleDialogKeyDown}
         className={clsx(
           'relative bg-theme-surface border border-theme-border rounded-lg shadow-2xl mx-4 outline-none',
           TRANSITION_PANEL,

package/src/components/ui/Input.tsx

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react'
+
+/** The shared text-input primitive. A minimal pass-through over a native
+ *  `<input>` that bakes in autocorrect/autocapitalize OFF — in a Kubernetes
+ *  tool every text field is an identifier, selector, or number, never prose,
+ *  so browser text-mangling (e.g. macOS Safari turning `aws-node` into
+ *  `Was-node`) only ever corrupts input. Spellcheck is deliberately left
+ *  untouched — its red squiggle is a passive hint, not a mutation, and stays
+ *  useful. Carries no styling of its own: callers keep their own `className`.
+ *  Non-text inputs (checkbox, number, password) stay raw `<input>` — this
+ *  defaults to `type="text"`. */
+export const Input = forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  function Input({ type = 'text', ...props }, ref) {
+    return (
+      <input
+        ref={ref}
+        type={type}
+        autoCorrect="off"
+        autoCapitalize="off"
+        {...props}
+      />
+    )
+  },
+)

package/src/components/ui/MultiSelectPicker.test.tsx

@@ -0,0 +1,101 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { MultiSelectPicker } from './MultiSelectPicker'
+
+// 8 items so the list clears the default search threshold (6) and the filter
+// input renders.
+const KINDS = ['ConfigMap', 'Deployment', 'Ingress', 'Job', 'Pod', 'ReplicaSet', 'Service', 'StatefulSet']
+
+function render(props: Partial<Parameters<typeof MultiSelectPicker>[0]> = {}) {
+  return renderToString(
+    <MultiSelectPicker
+      items={KINDS}
+      selected={new Set()}
+      onSelectionChange={() => {}}
+      onClearAll={() => {}}
+      onDone={() => {}}
+      search=""
+      onSearchChange={() => {}}
+      searchPlaceholder="Filter kinds"
+      summaryEmptyLabel="All kinds"
+      noItemsLabel="No kinds available."
+      clearAllDisabled
+      clearAllAriaLabel="Clear kind selection"
+      {...props}
+    />,
+  )
+}
+
+describe('MultiSelectPicker', () => {
+  it('renders each item as a checkbox row with Clear all / Select all and Done', () => {
+    const html = render()
+    expect(html).toContain('type="checkbox"')
+    for (const kind of KINDS) expect(html).toContain(`>${kind}</span>`)
+    expect(html).toContain('Clear all')
+    expect(html).toContain('Select all')
+    expect(html).toContain('>Done</button>')
+  })
+
+  it('shows the filter input above the threshold and hides it below', () => {
+    const shown = render()
+    expect(shown).toContain('placeholder="Filter kinds"')
+
+    const hidden = render({ items: ['Pod', 'Service'] })
+    expect(hidden).not.toContain('placeholder="Filter kinds"')
+  })
+
+  it('filters the list by the controlled search term', () => {
+    const html = render({ search: 'dep' })
+    expect(html).toContain('>Deployment</span>')
+    expect(html).not.toContain('>Pod</span>')
+    expect(html).not.toContain('>Service</span>')
+  })
+
+  it('shows a no-matches message when the search excludes everything', () => {
+    const html = render({ search: 'zzz' })
+    expect(html).toContain('No matches.')
+    expect(html).not.toContain('>Pod</span>')
+  })
+
+  it('shows the empty-items label when there are no items and no search', () => {
+    const html = render({ items: [], search: '' })
+    expect(html).toContain('No kinds available.')
+  })
+
+  it('summarises the empty selection as the empty label, else "N selected"', () => {
+    expect(render({ selected: new Set() })).toContain('All kinds')
+
+    const some = render({ selected: new Set(['Pod', 'Service']), clearAllDisabled: false })
+    expect(some).toContain('2 selected')
+    expect(some).not.toContain('All kinds')
+  })
+
+  it('reflects the selected items via checked checkboxes', () => {
+    const html = render({ selected: new Set(['Pod']), clearAllDisabled: false })
+    // The checked checkbox renders with the `checked` attribute in SSR markup.
+    expect(html).toContain('checked=""')
+  })
+
+  it('disables Clear all when clearAllDisabled and enables it otherwise', () => {
+    expect(render({ clearAllDisabled: true })).toContain('aria-label="Clear kind selection"')
+    // Disabled state present when nothing is selected.
+    expect(render({ clearAllDisabled: true })).toMatch(/Clear all[\s\S]*?disabled|disabled[\s\S]*?Clear all/)
+
+    const enabled = render({ selected: new Set(['Pod']), clearAllDisabled: false })
+    // The bulk row's Clear all button is not disabled here (the list checkboxes carry no disabled attr either).
+    expect(enabled).toContain('aria-label="Clear kind selection"')
+  })
+
+  it('labels the visible-bulk button by search + selection state', () => {
+    // No search, nothing selected -> plain "Select all".
+    expect(render({ search: '' })).toContain('Select all')
+
+    // Search active, nothing of the visible set selected -> "Select N visible".
+    const searching = render({ search: 'e' })
+    expect(searching).toMatch(/Select \d+ visible/)
+
+    // All visible selected -> "Clear N visible".
+    const allSelected = render({ selected: new Set(KINDS), clearAllDisabled: false })
+    expect(allSelected).toMatch(/Clear \d+ visible/)
+  })
+})

package/src/components/ui/MultiSelectPicker.tsx

@@ -0,0 +1,167 @@
+import { useMemo } from 'react'
+import type { ReactNode } from 'react'
+import { Search, X } from 'lucide-react'
+
+export interface MultiSelectPickerProps {
+  /** Full option list. The host sorts/orders it; the picker filters by search only. */
+  items: string[]
+  /** Currently-selected values. Empty = no filter (summary shows {@link summaryEmptyLabel}). */
+  selected: ReadonlySet<string>
+  /** Called with the next selection whenever a row or the visible-bulk button toggles. */
+  onSelectionChange: (next: Set<string>) => void
+  /**
+   * The left "Clear all" button. Separate from {@link onSelectionChange} so the
+   * host can attach side effects (e.g. commit + close) rather than only clearing.
+   */
+  onClearAll: () => void
+  /** Footer "Done" button. */
+  onDone: () => void
+
+  /** Controlled search term (kept in the host so the body stays SSR-testable). */
+  search: string
+  onSearchChange: (value: string) => void
+
+  /** Placeholder for the filter input, e.g. "Filter kinds". */
+  searchPlaceholder: string
+  /** Footer summary when nothing is selected, e.g. "All kinds". */
+  summaryEmptyLabel: string
+  /** List message when there are no items at all, e.g. "No kinds available." */
+  noItemsLabel: string
+
+  /** Disables the left "Clear all" button (nothing to clear / not permitted). */
+  clearAllDisabled?: boolean
+  clearAllAriaLabel?: string
+  /** Trailing per-item content (e.g. a "kubeconfig" tag). */
+  renderItemMeta?: (item: string) => ReactNode
+  /** Show the filter input only once the list is longer than this. Default 6. */
+  searchThreshold?: number
+}
+
+/**
+ * Presentational multi-select picker body: filter input, Clear all / Select all
+ * row, a scrollable checkbox list, and a summary + Done footer. The shared core
+ * behind the namespace scope picker and the timeline Kinds filter — controlled
+ * (selection + search injected) so both hosts drive it their own way and it
+ * stays SSR-testable.
+ */
+export function MultiSelectPicker({
+  items,
+  selected,
+  onSelectionChange,
+  onClearAll,
+  onDone,
+  search,
+  onSearchChange,
+  searchPlaceholder,
+  summaryEmptyLabel,
+  noItemsLabel,
+  clearAllDisabled = false,
+  clearAllAriaLabel = 'Clear selection',
+  renderItemMeta,
+  searchThreshold = 6,
+}: MultiSelectPickerProps) {
+  const filteredItems = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    if (!q) return items
+    return items.filter(item => item.toLowerCase().includes(q))
+  }, [items, search])
+
+  const toggle = (item: string) => {
+    const next = new Set(selected)
+    if (next.has(item)) next.delete(item)
+    else next.add(item)
+    onSelectionChange(next)
+  }
+
+  const selectVisible = () => {
+    const next = new Set(selected)
+    for (const item of filteredItems) next.add(item)
+    onSelectionChange(next)
+  }
+
+  const clearVisible = () => {
+    const next = new Set(selected)
+    for (const item of filteredItems) next.delete(item)
+    onSelectionChange(next)
+  }
+
+  // Counts computed against the visible (filtered) set so the bulk-action label
+  // matches what the button will affect.
+  const visibleSelectedCount = filteredItems.reduce((n, item) => n + (selected.has(item) ? 1 : 0), 0)
+  const allVisibleSelected = filteredItems.length > 0 && visibleSelectedCount === filteredItems.length
+
+  return (
+    <>
+      {items.length > searchThreshold && (
+        <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 => onSearchChange(e.target.value)}
+            placeholder={searchPlaceholder}
+            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={clearAllDisabled ? undefined : onClearAll}
+          disabled={clearAllDisabled}
+          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={clearAllAriaLabel}
+        >
+          <X className="w-3 h-3" />
+          Clear all
+        </button>
+        <button
+          onClick={allVisibleSelected ? clearVisible : selectVisible}
+          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.' : noItemsLabel}
+          </li>
+        )}
+
+        {filteredItems.map(item => (
+          <li key={item}>
+            <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={selected.has(item)}
+                  onChange={() => toggle(item)}
+                  className="shrink-0 accent-current"
+                />
+                <span className="truncate">{item}</span>
+                {renderItemMeta?.(item)}
+              </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>{selected.size === 0 ? summaryEmptyLabel : `${selected.size} selected`}</span>
+        <button
+          onClick={onDone}
+          className="px-2 py-0.5 rounded bg-theme-elevated hover:bg-theme-hover text-theme-text-primary"
+        >
+          Done
+        </button>
+      </div>
+    </>
+  )
+}

package/src/components/ui/PaneLoader.tsx

@@ -1,5 +1,6 @@
 import { assetUrl } from '../../utils/asset-url'
 import radarLoadingIconAsset from '../../assets/radar/radar-icon-loading.svg'
+import type { ReactNode } from 'react'
 
 // assetUrl normalizes the bundler-specific asset-import type (string under Vite,
 // StaticImageData under webpack/Next) to a URL string usable in `<img src>`.
@@ -18,9 +19,11 @@ const radarLoadingIcon = assetUrl(radarLoadingIconAsset)
 export function PaneLoader({
   label = 'Loading…',
   className = '',
+  children,
 }: {
   label?: string
   className?: string
+  children?: ReactNode
 }) {
   // No `relative` on the root: the label anchors to the inner `relative` span
   // below, and callers may pass a positioning class (e.g. `absolute inset-0`,
@@ -35,8 +38,13 @@ export function PaneLoader({
             primary) so the whole loading family — boot splash, connect splash,
             PaneLoader — reads as one continuous state, not a font change at the
             hand-off. */}
-        <span className="absolute left-1/2 top-full mt-3 -translate-x-1/2 whitespace-nowrap text-[17px] font-semibold tracking-tight text-theme-text-primary">
-          {label}
+        <span className="absolute left-1/2 top-full mt-3 w-[min(24rem,calc(100vw-2rem))] -translate-x-1/2 text-center text-[17px] font-semibold tracking-tight text-theme-text-primary">
+          <span className="block whitespace-nowrap">{label}</span>
+          {children && (
+            <span className="block whitespace-normal">
+              {children}
+            </span>
+          )}
         </span>
       </span>
     </div>

package/src/components/ui/ResourceBar.tsx

@@ -2,7 +2,7 @@ import { clsx } from 'clsx'
 import { type ReactNode } from 'react'
 import { Tooltip } from './Tooltip'
 
-type ColorScheme = 'utilization' | 'count'
+type ColorScheme = 'utilization' | 'count' | 'quiet'
 
 interface ResourceBarProps {
   /** Formatted usage string (e.g., "847m", "2.1Gi", "17") */
@@ -11,50 +11,93 @@ interface ResourceBarProps {
   total: string
   /** Usage percentage (0–100) */
   percent: number
-  /** Color scheme: "utilization" (green/yellow/red) or "count" (blue/yellow) */
+  /** Color scheme:
+   *  - "utilization": green/yellow/red — node/workload detail surfaces
+   *  - "count": blue/yellow
+   *  - "quiet": dashboard-calibrated — brand fill, amber only at genuine
+   *    scheduling-pressure levels (≥90%), never red. High utilization is a
+   *    bin-packing goal, not an incident; alarming it trains amber-blindness. */
   colorScheme?: ColorScheme
-  /** Optional marker line position (0–100), e.g., request as % of limit */
+  /** Optional marker line position (0–100), e.g., requests as % of allocatable.
+   *  Under "quiet" the marker itself turns amber at ≥95% — a cluster whose
+   *  requests are at capacity is full to the scheduler even when usage is low. */
   markerPercent?: number
   /** Optional tooltip content shown on hover */
   tooltip?: ReactNode
+  /** Layout: "stacked" (default — numbers row above the track) or "inline"
+   *  (one row: label · track · percent) for dense cards. Inline requires
+   *  `label` and omits the used/total numbers row — put them in `tooltip`. */
+  layout?: 'stacked' | 'inline'
+  /** Short leading label for the inline layout (e.g. "CPU", "MEM"). */
+  label?: string
 }
 
 function getBarColor(percent: number, scheme: ColorScheme): string {
   if (scheme === 'count') {
     return percent > 90 ? 'bg-yellow-500' : 'bg-blue-500'
   }
+  if (scheme === 'quiet') {
+    return percent >= 90 ? 'bg-amber-500' : 'bg-emerald-400'
+  }
   if (percent > 85) return 'bg-red-500'
   if (percent > 60) return 'bg-yellow-500'
   return 'bg-green-500'
 }
 
-export function ResourceBar({ used, total, percent, colorScheme = 'utilization', markerPercent, tooltip }: ResourceBarProps) {
-  const bar = (
-    <div className="flex flex-col gap-0.5 min-w-0">
-      <div className="flex items-baseline justify-between gap-1">
-        <span className="text-xs font-mono text-theme-text-secondary truncate">
-          {used} / {total}
-        </span>
-        <span className="text-[10px] font-mono text-theme-text-tertiary shrink-0">
+function getMarkerColor(markerPercent: number, scheme: ColorScheme): string {
+  if (scheme === 'quiet' && markerPercent >= 95) return 'bg-amber-500'
+  return 'bg-theme-text-primary/70'
+}
+
+export function ResourceBar({
+  used,
+  total,
+  percent,
+  colorScheme = 'utilization',
+  markerPercent,
+  tooltip,
+  layout = 'stacked',
+  label,
+}: ResourceBarProps) {
+  const track = (
+    <div className={clsx('relative', layout === 'inline' && 'min-w-0 flex-1')}>
+      <div className={clsx('rounded-full border border-theme-border bg-theme-elevated overflow-hidden', layout === 'inline' ? 'h-1' : 'h-1.5')}>
+        <div
+          className={clsx('h-full rounded-full transition-[width] duration-300 ease-out', getBarColor(percent, colorScheme))}
+          style={{ width: `${Math.min(percent, 100)}%` }}
+        />
+      </div>
+      {markerPercent != null && markerPercent > 0 && markerPercent <= 100 && (
+        <div
+          className={clsx('absolute -top-[1px] h-[calc(100%+2px)] w-[2px]', getMarkerColor(markerPercent, colorScheme))}
+          style={{ left: `${markerPercent}%` }}
+        />
+      )}
+    </div>
+  )
+
+  const bar =
+    layout === 'inline' ? (
+      <div className="flex items-center gap-1.5 min-w-0">
+        <span className="w-7 shrink-0 text-[10px] font-medium uppercase tracking-wide text-theme-text-tertiary">{label}</span>
+        {track}
+        <span className="w-8 shrink-0 text-right text-[10.5px] font-mono tabular-nums text-theme-text-secondary">
           {Math.round(percent)}%
         </span>
       </div>
-      <div className="relative">
-        <div className="h-1.5 rounded-full border border-theme-border bg-theme-elevated overflow-hidden">
-          <div
-            className={clsx('h-full rounded-full transition-[width] duration-300 ease-out', getBarColor(percent, colorScheme))}
-            style={{ width: `${Math.min(percent, 100)}%` }}
-          />
+    ) : (
+      <div className="flex flex-col gap-0.5 min-w-0">
+        <div className="flex items-baseline justify-between gap-1">
+          <span className="text-xs font-mono text-theme-text-secondary truncate">
+            {used} / {total}
+          </span>
+          <span className="text-[10px] font-mono text-theme-text-tertiary shrink-0">
+            {Math.round(percent)}%
+          </span>
         </div>
-        {markerPercent != null && markerPercent > 0 && markerPercent <= 100 && (
-          <div
-            className="absolute -top-[1px] h-[calc(100%+2px)] w-[2px] bg-theme-text-primary/70"
-            style={{ left: `${markerPercent}%` }}
-          />
-        )}
+        {track}
       </div>
-    </div>
-  )
+    )
 
   if (tooltip) {
     return (