@skyhook-io/k8s-ui 1.8.10 → 1.8.12

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 (

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/SelectMenu.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from 'react'
+import { Check, ChevronDown } from 'lucide-react'
+import { clsx } from 'clsx'
+
+export interface SelectMenuOption {
+  value: string
+  label: string
+}
+
+export function SelectMenu({
+  value,
+  options,
+  onChange,
+  ariaLabel,
+  className,
+}: {
+  value: string
+  options: SelectMenuOption[]
+  onChange: (value: string) => void
+  ariaLabel: string
+  className?: string
+}) {
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const selected = options.find((option) => option.value === value) ?? options[0]
+
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false)
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open])
+
+  return (
+    <div ref={rootRef} className={clsx('relative', className)}>
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => setOpen((current) => !current)}
+        className="flex h-8 w-full items-center justify-between gap-2 rounded-md border border-theme-border bg-theme-elevated px-2.5 text-xs text-theme-text-primary transition-colors hover:bg-theme-hover"
+      >
+        <span className="truncate">{selected?.label}</span>
+        <ChevronDown className={clsx('h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform', open && 'rotate-180')} />
+      </button>
+      {open && (
+        <div role="listbox" className="absolute right-0 top-full z-50 mt-1 min-w-full overflow-hidden rounded-md border border-theme-border bg-theme-surface py-1 shadow-theme-lg">
+          {options.map((option) => {
+            const active = option.value === value
+            return (
+              <button
+                key={option.value}
+                type="button"
+                role="option"
+                aria-selected={active}
+                onClick={() => {
+                  onChange(option.value)
+                  setOpen(false)
+                }}
+                className="flex w-full items-center gap-2 whitespace-nowrap px-2.5 py-1.5 text-left text-xs text-theme-text-secondary transition-colors hover:bg-theme-hover hover:text-theme-text-primary"
+              >
+                <Check className={clsx('h-3.5 w-3.5 shrink-0 text-accent', !active && 'opacity-0')} />
+                {option.label}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

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'
@@ -410,7 +410,7 @@ export function AlertBanner({ variant, icon, title, message, items, children }:
         {hasBody ? (
           <div className="flex-1 min-w-0">
             <div className={clsx('text-sm font-medium', colors.title, items && 'mb-1')}>{title}</div>
-            {message && <div className={clsx('text-xs mt-1 break-all', colors.message)}>{message}</div>}
+            {message && <div className={clsx('text-xs mt-1 break-words', colors.message)}>{message}</div>}
             {items && items.length > 0 && (
               <ul className={clsx('text-xs space-y-1', colors.list)}>
                 {items.map((item, i) => (
@@ -446,11 +446,14 @@ export interface Problem {
 }
 
 /** Displays a list of problem alerts (warnings and errors) */
-// True when the resource detail is already rendering a dedicated, authoritative
-// "Operational Issues" section (the Issues pipeline — richer cause/action). Only
-// renderers whose problems the pipeline COMPREHENSIVELY covers read this and drop
-// their own problem array so the same failure isn't shown twice — today that's
-// PodRenderer and WorkloadRenderer (workload + pod runtime). It is deliberately
+// True when the resource detail is rendering (or still fetching) a dedicated,
+// authoritative "Operational Issues" section (the Issues pipeline — richer
+// cause/action). Renderers whose problems the pipeline COMPREHENSIVELY covers read
+// this and drop their own condition banner so the same failure isn't shown twice.
+// It stays true WHILE the live-issues fetch is pending: a banner the pipeline will
+// cover would otherwise flash on first paint before the issues arrive and hide it;
+// once the fetch settles with no issues (e.g. a CRD the pipeline doesn't watch),
+// it flips false and the renderer's banner appears cleanly. It is deliberately
 // NOT wired into ProblemAlerts: that component is used only by GitOps renderers
 // (Argo/Flux), whose Degraded/OutOfSync/revision-mismatch banners the pipeline
 // does not fully emit (e.g. OutOfSync only for automated Argo apps) — suppressing
@@ -532,9 +535,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 +556,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 +575,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 +797,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 +841,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 +920,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,9 @@ export type { EmptyStateTone, EmptyStateVariant } from './EmptyState'
 export { RestrictedState } from './RestrictedState'
 export { FetchResult } from './FetchResult'
 export { SearchBox } from './SearchBox'
+export { SelectMenu } from './SelectMenu'
+export type { SelectMenuOption } from './SelectMenu'
+export { Input } from './Input'
 export { FilterPill } from './FilterPill'
 export type { FilterPillTone } from './FilterPill'
 export { StatusDot, mapHealthToTone } from './status-tone'
@@ -19,6 +22,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'
@@ -40,3 +44,5 @@ 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

@@ -7,13 +7,16 @@
 // Literal class strings (no template interpolation) so Tailwind's scanner sees
 // every utility.
 
-export type SeverityTone = 'red' | 'orange' | 'amber' | 'slate'
+export type SeverityTone = 'red' | 'orange' | 'amber' | 'yellow' | 'slate'
 
-// Text color — leading severity glyph + emphasis text.
+// 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',
 }
 
@@ -22,6 +25,7 @@ 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',
 }
 
@@ -31,17 +35,19 @@ 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) take dark text: white on orange-600/amber-500
-// sits at ~3.5:1/~2.1:1, below WCAG for the 12px pill text.
+// 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',
 }
 
@@ -52,5 +58,6 @@ 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