@skyhook-io/k8s-ui 1.8.9 → 1.8.11

package/src/components/ui/SearchBox.tsx

@@ -1,6 +1,7 @@
-import { useRef } from 'react'
+import { useRef, type RefObject } from 'react'
 import { Search, X } from 'lucide-react'
 import { clsx } from 'clsx'
+import { Input } from './Input'
 import { useRegisterShortcut, type ShortcutScope } from '../../hooks/useKeyboardShortcuts'
 
 /** The standard list-view search box: themed input with a `/`-to-focus
@@ -17,6 +18,9 @@ export function SearchBox({
   className,
   onEnter,
   onArrowDown,
+  inputRef: externalRef,
+  shortcutEnabled = true,
+  onBlur,
 }: {
   value: string
   onChange: (value: string) => void
@@ -31,8 +35,17 @@ export function SearchBox({
   onEnter?: () => void
   /** ArrowDown in the box — hand focus off to list keyboard navigation. */
   onArrowDown?: () => void
+  /** Externally-owned input ref — lets a collapsible wrapper focus the box
+   *  after it mounts. Falls back to an internal ref when omitted. */
+  inputRef?: RefObject<HTMLInputElement | null>
+  /** Set false when a wrapper owns the `/` shortcut, so it isn't registered
+   *  twice under the same id. */
+  shortcutEnabled?: boolean
+  /** Blur handler — a collapsible wrapper uses it to fold back when empty. */
+  onBlur?: () => void
 }) {
-  const inputRef = useRef<HTMLInputElement>(null)
+  const internalRef = useRef<HTMLInputElement>(null)
+  const inputRef = externalRef ?? internalRef
 
   useRegisterShortcut({
     id: shortcutId,
@@ -40,18 +53,19 @@ export function SearchBox({
     description: 'Focus search',
     category: 'Search',
     scope,
+    enabled: shortcutEnabled,
     handler: () => inputRef.current?.focus(),
   })
 
   return (
     <div className={clsx('relative', className)}>
       <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-theme-text-tertiary" />
-      <input
+      <Input
         ref={inputRef}
-        type="text"
         value={value}
         placeholder={placeholder}
         onChange={(e) => onChange(e.target.value)}
+        onBlur={onBlur}
         onKeyDown={(e) => {
           if (e.key === 'Escape') {
             inputRef.current?.blur()

package/src/components/ui/SearchPillInput.tsx

@@ -2,6 +2,7 @@ import { useRef, useState, useMemo, useEffect, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import { X } from 'lucide-react'
 import { clsx } from 'clsx'
+import { Input } from './Input'
 
 // A structured search input: free-text plus removable `key:value` modifier
 // PILLS (ns:, kind:, label:, …). Typing a complete modifier token and pressing
@@ -236,9 +237,8 @@ export function SearchPillInput({
           less
         </button>
       )}
-      <input
+      <Input
         ref={inputRef}
-        type="text"
         value={text}
         onChange={(e) => { setDismissed(false); onChange({ text: e.target.value, pills }) }}
         onKeyDown={handleKeyDown}

package/src/components/ui/Toast.tsx

@@ -215,7 +215,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
             <button
               onClick={toast.onDetailClick}
               className={clsx(
-                'mt-1.5 block text-xs font-mono break-all text-left rounded px-1.5 py-1 -ml-1.5 transition-colors',
+                'mt-1.5 block text-xs font-mono break-words text-left rounded px-1.5 py-1 -ml-1.5 transition-colors',
                 isError
                   ? 'text-red-300 hover:bg-red-900/50'
                   : isSuccess

package/src/components/ui/drawer-components.tsx

@@ -1,4 +1,4 @@
-import { useState, createContext, useContext } from 'react'
+import { createContext, useContext, useState } from 'react'
 import { ChevronRight, Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLink, Layers, X, Minus } from 'lucide-react'
 import { clsx } from 'clsx'
 import { formatAge, formatDuration, formatResources } from '../resources/resource-utils'
@@ -532,9 +532,11 @@ function ContainerResourcesLine({ resources }: { resources: any }) {
   const effective = getEffectiveResources(resources)
   if (Object.keys(effective).length === 0) return null
   return (
-    <div className="text-xs text-theme-text-tertiary mt-1" title="Effective requests (requests, falling back to limits)">
-      Resources: {formatResources(effective)}
-    </div>
+    <Tooltip content="Effective requests (requests, falling back to limits)" delay={150}>
+      <div className="text-xs text-theme-text-tertiary mt-1">
+        Resources: {formatResources(effective)}
+      </div>
+    </Tooltip>
   )
 }
 
@@ -551,11 +553,15 @@ export function PodTemplateSection({ template }: { template: any }) {
           {initContainers.map((c: any) => (
             <div key={c.name} className="card-inner text-sm border-l-2 border-yellow-500/40">
               <div className="font-medium text-theme-text-primary">{c.name}</div>
-              <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
+              <Tooltip content={c.image} delay={300} wrapperClassName="block min-w-0">
+                <div className="text-xs text-theme-text-secondary truncate">{c.image}</div>
+              </Tooltip>
               {(c.command || c.args) && (
-                <div className="text-xs text-theme-text-tertiary font-mono mt-1 truncate" title={[...(c.command || []), ...(c.args || [])].join(' ')}>
-                  $ {[...(c.command || []), ...(c.args || [])].join(' ')}
-                </div>
+                <Tooltip content={[...(c.command || []), ...(c.args || [])].join(' ')} delay={300} wrapperClassName="block min-w-0">
+                  <div className="text-xs text-theme-text-tertiary font-mono mt-1 truncate">
+                    $ {[...(c.command || []), ...(c.args || [])].join(' ')}
+                  </div>
+                </Tooltip>
               )}
               <ContainerResourcesLine resources={c.resources} />
             </div>
@@ -566,7 +572,9 @@ export function PodTemplateSection({ template }: { template: any }) {
       {containers.map((c: any) => (
         <div key={c.name} className="card-inner text-sm">
           <div className="font-medium text-theme-text-primary">{c.name}</div>
-          <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
+          <Tooltip content={c.image} delay={300} wrapperClassName="block min-w-0">
+            <div className="text-xs text-theme-text-secondary truncate">{c.image}</div>
+          </Tooltip>
           {c.ports && (
             <div className="text-xs text-theme-text-tertiary mt-1">
               Ports: {c.ports.map((p: any) => `${p.name ? `${p.name}: ` : ''}${p.containerPort}/${p.protocol || 'TCP'}`).join(', ')}
@@ -786,6 +794,7 @@ export function RelatedResourcesSection({ relationships, onNavigate }: RelatedRe
     (relationships.configRefs && relationships.configRefs.length > 0) ||
     (relationships.consumers && relationships.consumers.length > 0) ||
     (relationships.scalers && relationships.scalers.length > 0) ||
+    (relationships.storageRefs && relationships.storageRefs.length > 0) ||
     (relationships.pdbs && relationships.pdbs.length > 0) ||
     (relationships.networkPolicies && relationships.networkPolicies.length > 0) ||
     (relationships.resourceClaims && relationships.resourceClaims.length > 0) ||
@@ -829,6 +838,9 @@ export function RelatedResourcesSection({ relationships, onNavigate }: RelatedRe
         {relationships.scalers && relationships.scalers.length > 0 && (
           <RelationshipGroup label="Autoscaler" refs={dedupeRefs(relationships.scalers)} onNavigate={onNavigate} />
         )}
+        {relationships.storageRefs && relationships.storageRefs.length > 0 && (
+          <RelationshipGroup label="Storage" refs={dedupeRefs(relationships.storageRefs)} onNavigate={onNavigate} />
+        )}
         {relationships.pdbs && relationships.pdbs.length > 0 && (
           <RelationshipGroup label="Disruption Budget" refs={dedupeRefs(relationships.pdbs)} onNavigate={onNavigate} />
         )}
@@ -905,30 +917,31 @@ export function ResourceRefBadge({ resourceRef, onClick, wrapAtSeparator }: Reso
   const layoutClass = wrapAtSeparator
     ? 'badge max-w-full min-w-0 flex-wrap items-center whitespace-normal text-left leading-tight'
     : 'badge'
+  const tooltip = `${resourceRef.kind}: ${resourceRef.namespace}/${resourceRef.name}`
 
   if (onClick) {
     return (
-      <button
-        onClick={() => onClick(resourceRef)}
-        className={clsx(
-          layoutClass,
-          'hover:brightness-[0.92] dark:hover:brightness-125 transition-[filter]',
-          kindClass
-        )}
-        title={`${resourceRef.kind}: ${resourceRef.namespace}/${resourceRef.name}`}
-      >
-        {content}
-      </button>
+      <Tooltip content={tooltip} delay={150}>
+        <button
+          onClick={() => onClick(resourceRef)}
+          className={clsx(
+            layoutClass,
+            'hover:brightness-[0.92] dark:hover:brightness-125 transition-[filter]',
+            kindClass
+          )}
+        >
+          {content}
+        </button>
+      </Tooltip>
     )
   }
 
   return (
-    <span
-      className={clsx(layoutClass, kindClass)}
-      title={`${resourceRef.kind}: ${resourceRef.namespace}/${resourceRef.name}`}
-    >
-      {content}
-    </span>
+    <Tooltip content={tooltip} delay={300}>
+      <span className={clsx(layoutClass, kindClass)}>
+        {content}
+      </span>
+    </Tooltip>
   )
 }
 

package/src/components/ui/index.ts

@@ -10,6 +10,7 @@ export type { EmptyStateTone, EmptyStateVariant } from './EmptyState'
 export { RestrictedState } from './RestrictedState'
 export { FetchResult } from './FetchResult'
 export { SearchBox } from './SearchBox'
+export { Input } from './Input'
 export { FilterPill } from './FilterPill'
 export type { FilterPillTone } from './FilterPill'
 export { StatusDot, mapHealthToTone } from './status-tone'
@@ -19,6 +20,7 @@ export { ConfirmDialog } from './ConfirmDialog'
 export { HealthRing } from './HealthRing'
 export { MetricsChart, MetricsSparkline } from './MetricsChart'
 export * from './drawer-components'
+export { Collapse, CollapseChevron } from './Collapse'
 export { ResourceBar } from './ResourceBar'
 export { ForceDeleteConfirmDialog } from './ForceDeleteConfirmDialog'
 export { ToastProvider, useToast, showApiError, showApiSuccess } from './Toast'
@@ -38,3 +40,7 @@ export { DistributionBar, DistributionLegendChip } from './DistributionBar'
 export type { DistributionSegment } from './DistributionBar'
 export { SearchPillInput } from './SearchPillInput'
 export type { SearchModifier, SearchPillInputProps } from './SearchPillInput'
+export { CardSection, CardBody, TerminalBlock, renderProse, NEUTRAL_CHIP_CLASS, KIND_CHIP_CLASS } from './CardSection'
+export type { CardSectionTone } from './CardSection'
+export { MultiSelectPicker } from './MultiSelectPicker'
+export type { MultiSelectPickerProps } from './MultiSelectPicker'

package/src/components/ui/severity-tone.ts

@@ -0,0 +1,63 @@
+// Shared severity color vocabulary. The Issue card (2-tier: critical/warning)
+// and the Check card (4-tier: critical/high/medium/low) are different severity
+// axes, but every tier resolves to one of four hues — so the color strings live
+// here once and each card maps its own severity enum onto a tone. A palette
+// change lands in one place instead of drifting between the two cards.
+//
+// Literal class strings (no template interpolation) so Tailwind's scanner sees
+// every utility.
+
+export type SeverityTone = 'red' | 'orange' | 'amber' | 'yellow' | 'slate'
+
+// Text color — leading severity glyph + emphasis text. Yellow takes the darker
+// -700 step in light mode: its low luminance is illegible at -600 on a light
+// surface, where red/orange/amber still clear.
+export const TONE_TEXT_CLASS: Record<SeverityTone, string> = {
+  red: 'text-red-600 dark:text-red-400',
+  orange: 'text-orange-600 dark:text-orange-400',
+  amber: 'text-amber-600 dark:text-amber-400',
+  yellow: 'text-yellow-700 dark:text-yellow-400',
+  slate: 'text-slate-500 dark:text-slate-400',
+}
+
+// Solid fill — dots + the proportional distribution-bar segments.
+export const TONE_FILL_CLASS: Record<SeverityTone, string> = {
+  red: 'bg-red-500',
+  orange: 'bg-orange-500',
+  amber: 'bg-amber-500',
+  yellow: 'bg-yellow-500',
+  slate: 'bg-slate-400',
+}
+
+// Left accent rail on a collapsed queue row — the scan-down severity cue + a
+// faint hover tint. The expanded row swaps this for the header band below.
+export const TONE_RAIL_CLASS: Record<SeverityTone, string> = {
+  red: 'border-l-red-500 hover:bg-red-50/40 dark:hover:bg-red-950/20',
+  orange: 'border-l-orange-500 hover:bg-orange-50/40 dark:hover:bg-orange-950/20',
+  amber: 'border-l-amber-500 hover:bg-amber-50/30 dark:hover:bg-amber-950/15',
+  yellow: 'border-l-yellow-500 hover:bg-yellow-50/30 dark:hover:bg-yellow-950/15',
+  slate: 'border-l-slate-300 dark:border-l-slate-600 hover:bg-theme-hover/40',
+}
+
+// Solid severity pill — the loud focus signal on an expanded card's header band
+// (collapsed cards keep the soft BADGE pill so a long queue stays calm).
+// The warm mid-tones (orange/amber/yellow) take dark text: white on them sits
+// below WCAG for the 12px pill text.
+export const TONE_SOLID_CLASS: Record<SeverityTone, string> = {
+  red: 'bg-red-600 text-white',
+  orange: 'bg-orange-500 text-orange-950',
+  amber: 'bg-amber-400 text-amber-950',
+  yellow: 'bg-yellow-400 text-yellow-950',
+  slate: 'bg-slate-500 text-white dark:bg-slate-600',
+}
+
+// Severity-tinted header band, shown only when a card is expanded. The left
+// rail keeps its color so the queue's scan-down severity rhythm doesn't break
+// at the focused row; no hover variant, so it doesn't lighten on hover.
+export const TONE_HEADER_BAND_CLASS: Record<SeverityTone, string> = {
+  red: 'border-l-red-500 bg-red-50 dark:bg-red-950/40',
+  orange: 'border-l-orange-500 bg-orange-50 dark:bg-orange-950/30',
+  amber: 'border-l-amber-500 bg-amber-50 dark:bg-amber-950/30',
+  yellow: 'border-l-yellow-500 bg-yellow-50 dark:bg-yellow-950/30',
+  slate: 'border-l-slate-300 dark:border-l-slate-600 bg-slate-50 dark:bg-slate-900/40',
+}

package/src/components/workload/ResourceDetailDrawer.tsx

@@ -32,6 +32,9 @@ interface ResourceDetailDrawerProps {
   headerHeight?: number
   /** Left offset to exclude (e.g. sidebar width) so expanded mode doesn't cover the sidebar (default: 0) */
   leftOffset?: number
+  /** Right inset in px to leave clear (e.g. a docked side panel) so the drawer sits
+   *  beside it instead of under it. Shared "right-side surface" contract (default: 0). */
+  rightInset?: number
   /** Render the content inside the drawer */
   children: (props: {
     resource: SelectedResource
@@ -81,7 +84,7 @@ function usePrefersReducedMotion(): boolean {
   return reduced
 }
 
-export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab, isOpen = true, expanded, onCollapse, onExpand, canCollapseToDrawer = true, onNavigateToResource, headerHeight: headerHeightProp, leftOffset = 0, children }: ResourceDetailDrawerProps) {
+export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab, isOpen = true, expanded, onCollapse, onExpand, canCollapseToDrawer = true, onNavigateToResource, headerHeight: headerHeightProp, leftOffset = 0, rightInset = 0, children }: ResourceDetailDrawerProps) {
   const [drawerWidth, setDrawerWidth] = useState(() => getDefaultWidth(resource.kind))
   const [isResizing, setIsResizing] = useState(false)
   const resizeStartX = useRef(0)
@@ -225,7 +228,7 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
   // During the pre-mount frames (transitioning but not yet armed) hold the frame
   // at its START width so the width transition fires only once the incoming
   // layer has painted; otherwise it snaps to the target.
-  const fullW = `calc(100% - ${leftOffset}px)`
+  const fullW = `calc(100% - ${leftOffset}px - ${rightInset}px)`
   const startWidth = settledExpanded.current ? fullW : drawerWidth
   const targetWidth = expanded ? fullW : drawerWidth
   const containerWidth = transitioning && !crossfadeArmed ? startWidth : targetWidth
@@ -274,6 +277,7 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
       style={{
         width: containerWidth,
         top: headerHeight,
+        right: rightInset, // leave room for a docked side panel (AI), else flush right
         height: `calc(100% - ${headerHeight}px - ${dockInset}px)`,
         // Inline so the morph duration/easing is controlled precisely (and stays
         // in lockstep with the crossfade + JS window). Width only animates when