@skyhook-io/k8s-ui 1.17.0 → 1.17.1

package/src/components/shared/CreateResourceDialog.tsx

@@ -28,12 +28,16 @@ export interface ApplyResult {
   namespace: string
   kind: string
   apiVersion?: string
+  uid?: string
   created: boolean
 }
 
 export interface CreateResourceDialogProps {
   open: boolean
   onClose: () => void
+  /** Return the current draft to a parent flow without closing that flow. */
+  onBack?: (yaml: string) => void
+  backLabel?: string
   initialYaml?: string
   title?: string
   onApply: (params: {
@@ -53,12 +57,19 @@ export interface CreateResourceDialogProps {
   isPreviewing?: boolean
   previewError?: string | null
   schemaLoader?: YamlSchemaLoader
-  onCreated?: (result: ApplyResult) => void
+  /** Receives the first result and the exact submitted manifest, after a successful write. */
+  onCreated?: (result: ApplyResult, submittedYaml: string) => void
+  /** Start in strict create mode (e.g. a prefilled manifest that must not update an existing object). */
+  initialMode?: 'apply' | 'create'
+  /** Stay in `initialMode` with the Apply/Create choice and Force hidden, even after a partial create (e.g. a new object that must only be created). */
+  lockMode?: boolean
 }
 
 export function CreateResourceDialog({
   open,
   onClose,
+  onBack,
+  backLabel = 'Back',
   initialYaml = '',
   title,
   onApply,
@@ -68,15 +79,18 @@ export function CreateResourceDialog({
   previewError,
   schemaLoader,
   onCreated,
+  initialMode = 'apply',
+  lockMode = false,
 }: CreateResourceDialogProps) {
   const titleId = useId()
   const [yaml, setYaml] = useState(initialYaml)
-  const [mode, setMode] = useState<'apply' | 'create'>('apply')
+  const [mode, setMode] = useState<'apply' | 'create'>(initialMode)
   const [dryRun, setDryRun] = useState(false)
   const [force, setForce] = useState(false)
   const [yamlValid, setYamlValid] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [success, setSuccess] = useState<string | null>(null)
+  const [partialCreates, setPartialCreates] = useState<ApplyResult[]>([])
   const [preview, setPreview] = useState<{
     yaml: string
     mode: 'apply' | 'create'
@@ -85,6 +99,7 @@ export function CreateResourceDialog({
     nonAtomic: boolean
     context?: string
   } | null>(null)
+  const closeTimer = useRef<number | undefined>(undefined)
   const [drag, setDrag] = useState<FileDragState>('none')
   const [pendingImport, setPendingImport] = useState<{ fileName: string; yaml: string } | null>(null)
   const [importing, setImporting] = useState<string | null>(null)
@@ -110,7 +125,11 @@ export function CreateResourceDialog({
     scheduledFrames.current.clear()
   }, [])
 
-  useEffect(() => retireDeferredImports, [retireDeferredImports])
+  const cancelScheduledClose = useCallback(() => {
+    window.clearTimeout(closeTimer.current)
+    closeTimer.current = undefined
+  }, [])
+  useEffect(() => () => { retireDeferredImports(); cancelScheduledClose() }, [retireDeferredImports, cancelScheduledClose])
 
   const scheduleFrame = useCallback((generation: number, run: () => void) => {
     const id = requestAnimationFrame(() => {
@@ -123,12 +142,14 @@ export function CreateResourceDialog({
 
   useEffect(() => {
     if (!open) return
+    cancelScheduledClose()
     setYaml(initialYaml)
-    setMode('apply')
+    setMode(initialMode)
     setDryRun(false)
     setForce(false)
     setYamlValid(true)
     setError(null)
+    setPartialCreates([])
     setSuccess(null)
     setPreview(null)
     setDrag('none')
@@ -136,19 +157,21 @@ export function CreateResourceDialog({
     setImporting(null)
     dragDepth.current = 0
     retireDeferredImports()
-  }, [open, initialYaml, retireDeferredImports])
+  }, [open, initialYaml, initialMode, retireDeferredImports, cancelScheduledClose])
 
   const pending = isApplying || isPreviewing
   const closeNow = useCallback(() => {
+    cancelScheduledClose()
     retireDeferredImports()
     setError(null)
+    setPartialCreates([])
     setSuccess(null)
     setPreview(null)
     setPendingImport(null)
     setImporting(null)
     setYaml('')
     onClose()
-  }, [onClose, retireDeferredImports])
+  }, [onClose, retireDeferredImports, cancelScheduledClose])
   const handleClose = useCallback(() => {
     if (!pending) closeNow()
   }, [closeNow, pending])
@@ -158,7 +181,7 @@ export function CreateResourceDialog({
   }, [])
 
   const finishApply = useCallback(
-    (results: ApplyResult[], appliedMode: 'apply' | 'create', wasDryRun: boolean) => {
+    (results: ApplyResult[], appliedMode: 'apply' | 'create', wasDryRun: boolean, submittedYaml: string) => {
       const action = appliedMode === 'create' ? 'Created' : 'Applied'
       const dryRunLabel = wasDryRun ? ' (dry run)' : ''
       if (results.length === 1) {
@@ -170,11 +193,12 @@ export function CreateResourceDialog({
         setSuccess(`${action} ${results.length} resources${dryRunLabel}`)
       }
       if (wasDryRun) return
+      setPartialCreates([])
       if (onCreated && results.length > 0) {
         closeNow()
-        onCreated(results[0])
+        onCreated(results[0], submittedYaml)
       } else {
-        window.setTimeout(closeNow, 1200)
+        closeTimer.current = window.setTimeout(closeNow, 1200)
       }
     },
     [closeNow, onCreated],
@@ -274,6 +298,17 @@ export function CreateResourceDialog({
     [loadFiles],
   )
 
+  const recoverPartialCreate = useCallback((caught: unknown, submittedYaml: string, appliedMode: 'apply' | 'create', wasDryRun: boolean) => {
+    const appliedResults = caught instanceof Error && 'appliedResults' in caught && Array.isArray(caught.appliedResults) ? caught.appliedResults : []
+    const createdResults = appliedMode === 'create' ? appliedResults : appliedResults.filter(result => result.created)
+    if (wasDryRun || createdResults.length === 0) return false
+    setYaml(submittedYaml)
+    if (!lockMode && onPreview) setMode('apply')
+    setPreview(null)
+    setPartialCreates(previous => [...previous, ...createdResults])
+    return true
+  }, [lockMode, onPreview])
+
   const handleSubmit = useCallback(async () => {
     if (!yaml.trim()) {
       setError('YAML content is required')
@@ -301,11 +336,12 @@ export function CreateResourceDialog({
         dryRun,
         force: mode === 'apply' && force,
       })
-      finishApply(results, mode, dryRun)
+      finishApply(results, mode, dryRun, yaml)
     } catch (caught) {
       setError(caught instanceof Error ? caught.message : 'Unknown error')
+      if (!onPreview) recoverPartialCreate(caught, yaml, mode, dryRun)
     }
-  }, [yaml, mode, dryRun, force, onApply, onPreview, finishApply])
+  }, [yaml, mode, dryRun, force, onApply, onPreview, finishApply, recoverPartialCreate])
 
   const handleApplyReviewed = useCallback(async () => {
     if (!preview) return
@@ -320,25 +356,11 @@ export function CreateResourceDialog({
         reviewedResourceVersions,
         reviewedContext: preview.context,
       })
-      finishApply(results, preview.mode, false)
+      finishApply(results, preview.mode, false, preview.yaml)
     } catch (caught) {
       const message = caught instanceof Error ? caught.message : 'Unknown error'
-      const appliedResults =
-        caught instanceof Error &&
-        'appliedResults' in caught &&
-        Array.isArray(caught.appliedResults)
-          ? caught.appliedResults
-          : []
-      if (preview.mode === 'create' && appliedResults.length > 0) {
-        setYaml(preview.yaml)
-        setMode('apply')
-        setPreview(null)
-        setError(
-          `${message} Radar switched to Apply mode so you can review and continue from the current cluster state.`,
-        )
-        return
-      }
       setError(message)
+      if (recoverPartialCreate(caught, preview.yaml, preview.mode, false)) return
       if (onPreview) {
         try {
           const refreshed = await onPreview({
@@ -357,9 +379,10 @@ export function CreateResourceDialog({
         }
       }
     }
-  }, [preview, onApply, onPreview, finishApply])
+  }, [preview, onApply, onPreview, finishApply, recoverPartialCreate])
 
   const dialogTitle = title || 'Create Resource'
+  const showModeControls = !lockMode
   const submitLabel = onPreview ? 'Review' : mode === 'create' ? 'Create' : 'Apply'
 
   return (
@@ -409,8 +432,8 @@ export function CreateResourceDialog({
             </Tooltip>
           </div>
 
-          <div className="min-h-0 flex-1 px-5 py-3">
-            <div className="mb-2 flex items-center gap-2">
+          <div className="flex min-h-0 flex-1 flex-col px-5 py-3">
+            <div className="mb-2 flex shrink-0 items-center gap-2">
               <button
                 type="button"
                 onClick={() => fileInputRef.current?.click()}
@@ -437,7 +460,7 @@ export function CreateResourceDialog({
             </div>
 
             <div
-              className="relative h-[400px]"
+              className="relative h-[400px] min-h-0"
               onDragEnter={handleDragEnter}
               onDragOver={handleDragOver}
               onDragLeave={handleDragLeave}
@@ -446,7 +469,7 @@ export function CreateResourceDialog({
               <YamlEditor
                 value={yaml}
                 onChange={setYaml}
-                height="400px"
+                height="100%"
                 onValidate={handleValidate}
                 schemaLoader={schemaLoader}
               />
@@ -470,8 +493,8 @@ export function CreateResourceDialog({
             </div>
           </div>
 
-          {(error || previewError) && (
-            <ApplyErrorBanner error={error || previewError || 'Preview failed'} />
+          {(error || previewError || partialCreates.length > 0) && (
+            <ApplyErrorBanner error={error || previewError || 'Resources were created before the previous attempt stopped.'} partialCreates={partialCreates} strictCreate={lockMode && mode === 'create'} hasPreview={Boolean(onPreview)} />
           )}
           {success && (
             <div className="mx-5 mb-2 flex items-center gap-2 rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-xs text-emerald-600 dark:text-emerald-400">
@@ -482,33 +505,35 @@ export function CreateResourceDialog({
 
           <div className="flex shrink-0 items-center justify-between border-t border-theme-border px-5 py-3">
             <div className="flex items-center gap-3">
-              <Tooltip
-                content="Apply: create or update (idempotent). Create: fail if exists."
-                position="bottom"
-              >
-                <div
-                  className="flex items-center rounded-md border border-theme-border bg-theme-base p-0.5"
-                  role="radiogroup"
-                  aria-label="Apply mode"
+              {showModeControls && (
+                <Tooltip
+                  content="Apply: create or update (idempotent). Create: fail if exists."
+                  position="bottom"
                 >
-                  {(['apply', 'create'] as const).map((option) => (
-                    <button
-                      type="button"
-                      key={option}
-                      onClick={() => setMode(option)}
-                      role="radio"
-                      aria-checked={mode === option}
-                      className={`rounded px-2.5 py-1 text-xs font-medium capitalize transition-colors ${
-                        mode === option
-                          ? 'bg-theme-elevated text-theme-text-primary shadow-theme-sm'
-                          : 'text-theme-text-tertiary hover:text-theme-text-secondary'
-                      }`}
-                    >
-                      {option}
-                    </button>
-                  ))}
-                </div>
-              </Tooltip>
+                  <div
+                    className="flex items-center rounded-md border border-theme-border bg-theme-base p-0.5"
+                    role="radiogroup"
+                    aria-label="Apply mode"
+                  >
+                    {(['apply', 'create'] as const).map((option) => (
+                      <button
+                        type="button"
+                        key={option}
+                        onClick={() => setMode(option)}
+                        role="radio"
+                        aria-checked={mode === option}
+                        className={`rounded px-2.5 py-1 text-xs font-medium capitalize transition-colors ${
+                          mode === option
+                            ? 'bg-theme-elevated text-theme-text-primary shadow-theme-sm'
+                            : 'text-theme-text-tertiary hover:text-theme-text-secondary'
+                        }`}
+                      >
+                        {option}
+                      </button>
+                    ))}
+                  </div>
+                </Tooltip>
+              )}
 
               {!onPreview && (
                 <Tooltip
@@ -527,26 +552,42 @@ export function CreateResourceDialog({
                 </Tooltip>
               )}
 
-              <Tooltip
-                content="Override field ownership conflicts. An active controller may reconcile those fields back."
-                position="bottom"
-              >
-                <label
-                  className={`flex items-center gap-1.5 text-xs ${mode === 'apply' ? 'cursor-pointer text-theme-text-secondary' : 'cursor-not-allowed text-theme-text-tertiary'}`}
+              {showModeControls && (
+                <Tooltip
+                  content="Override field ownership conflicts. An active controller may reconcile those fields back."
+                  position="bottom"
                 >
-                  <input
-                    type="checkbox"
-                    checked={mode === 'apply' && force}
-                    disabled={mode !== 'apply'}
-                    onChange={(event) => setForce(event.target.checked)}
-                    className="h-3.5 w-3.5 rounded border-theme-border bg-theme-base"
-                  />
-                  Force
-                </label>
-              </Tooltip>
+                  <label
+                    className={`flex items-center gap-1.5 text-xs ${mode === 'apply' ? 'cursor-pointer text-theme-text-secondary' : 'cursor-not-allowed text-theme-text-tertiary'}`}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={mode === 'apply' && force}
+                      disabled={mode !== 'apply'}
+                      onChange={(event) => setForce(event.target.checked)}
+                      className="h-3.5 w-3.5 rounded border-theme-border bg-theme-base"
+                    />
+                    Force
+                  </label>
+                </Tooltip>
+              )}
             </div>
 
             <div className="flex items-center gap-2">
+              {onBack && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    cancelScheduledClose()
+                    retireDeferredImports()
+                    onBack(yamlRef.current)
+                  }}
+                  disabled={pending || importing !== null}
+                  className="btn-secondary rounded-lg px-3 py-1.5 text-xs"
+                >
+                  {backLabel}
+                </button>
+              )}
               <button
                 type="button"
                 onClick={handleClose}
@@ -591,18 +632,23 @@ export function CreateResourceDialog({
   )
 }
 
-function ApplyErrorBanner({ error }: { error: string }) {
+function ApplyErrorBanner({ error, partialCreates, strictCreate, hasPreview }: { error: string; partialCreates: ApplyResult[]; strictCreate: boolean; hasPreview: boolean }) {
   const [expanded, setExpanded] = useState(false)
   const { panelId, buttonProps } = useDisclosure(expanded)
-  const parsed = formatApplyError(error)
+  const parsed = formatApplyError(error, { allowApply: !strictCreate && partialCreates.length === 0 })
   const hasFriendly = Boolean(parsed.suggestion)
+  const recoveringWithReview = partialCreates.length > 0 && !strictCreate && hasPreview
   return (
-    <div className="mx-5 mb-2 rounded-md border border-red-500/30 bg-red-500/10 text-xs">
+    <div className="mx-5 mb-2 max-h-[30vh] shrink-0 overflow-y-auto rounded-md border border-red-500/30 bg-red-500/10 text-xs">
       <div className="flex items-start gap-2 px-3 py-2 text-red-600 dark:text-red-400">
         <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
         <div className="min-w-0 flex-1">
           <span className="font-medium">{parsed.summary}</span>
-          {parsed.suggestion && (
+          {partialCreates.length > 0 && <p className="mt-1">
+            Created before it stopped: {partialCreates.map(result => `${result.kind} ${result.namespace ? `${result.namespace}/` : ''}${result.name}`).join(', ')}.
+            {' '}{recoveringWithReview ? 'Radar switched to Apply mode so you can review and continue from the current cluster state.' : `${strictCreate ? 'This dialog only creates. ' : ''}Remove the created objects from the manifest before retrying Create.`}
+          </p>}
+          {parsed.suggestion && !recoveringWithReview && (
             <p className="mt-1 text-red-500/80 dark:text-red-400/80">{parsed.suggestion}</p>
           )}
         </div>

package/src/components/shared/DetailShell.test.tsx

@@ -0,0 +1,80 @@
+// @vitest-environment jsdom
+import { act, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, expect, it, vi } from 'vitest'
+import { DetailShell } from './DetailShell'
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+afterEach(() => { vi.restoreAllMocks(); vi.unstubAllGlobals() })
+it('re-measures asynchronously loaded tab badges and keeps the active tab visible', () => {
+  const observers = new Set<{ callback: () => void; elements: Element[] }>()
+  vi.stubGlobal('ResizeObserver', class {
+    record: { callback: () => void; elements: Element[] }
+    constructor(callback: () => void) { this.record = { callback, elements: [] }; observers.add(this.record) }
+    observe(element: Element) { this.record.elements.push(element) }
+    disconnect() { observers.delete(this.record) }
+  })
+  const width = (el: HTMLElement): number => el.getAttribute('role') === 'tab' ? (el.classList.contains('px-3') ? 100 : 70) + (el.textContent?.includes('mark') ? 40 : 0) : 260
+  vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function(this: HTMLElement) { return { width: width(this), height: 20, top: 0, bottom: 20, left: 0, right: width(this), x: 0, y: 0, toJSON: () => ({}) } })
+  vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 260)
+  vi.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockImplementation(function(this: HTMLElement) { return [...this.children].reduce((sum, child) => sum + width(child as HTMLElement), 0) })
+  vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockImplementation(function(this: HTMLElement) { return width(this) })
+  vi.spyOn(HTMLElement.prototype, 'offsetLeft', 'get').mockImplementation(function(this: HTMLElement) { return this.getAttribute('role') === 'tab' ? [...this.parentElement!.children].slice(0, [...this.parentElement!.children].indexOf(this)).reduce((sum, child) => sum + width(child as HTMLElement), 0) : 0 })
+  let setBadge!: (value: boolean) => void
+  function Badge() { const [loaded, set] = useState(false); setBadge = set; return loaded ? <span>mark</span> : null }
+  const tabs = [{ id: 'overview', label: 'Overview', icon: <span>icon</span>, badge: <Badge /> }, { id: 'replication', label: 'Replication', icon: <span>icon</span> }, { id: 'yaml', label: 'YAML', icon: <span>icon</span> }]
+  const host = document.createElement('div'); const root = createRoot(host)
+  act(() => root.render(<DetailShell identity="Cluster" tabs={tabs} activeTab="yaml" onTabChange={() => {}}>content</DetailShell>))
+  const strip = host.querySelector<HTMLElement>('[role="tablist"]')!
+  expect(host.textContent).not.toContain('icon')
+  expect([...observers].some((o) => o.elements.includes(strip.children[0]))).toBe(true)
+  act(() => setBadge(true))
+  act(() => { for (const observer of [...observers]) observer.callback() })
+  // The compact strip grows from 210 to 250 px, still fitting 260 px.
+  expect(host.textContent).not.toContain('icon')
+  // A second mark makes the compact strip overflow; the active YAML tab remains in view.
+  act(() => { strip.children[1].appendChild(document.createTextNode('mark')); for (const observer of [...observers]) observer.callback() })
+  const active = strip.querySelector<HTMLElement>('[aria-selected="true"]')!
+  expect(strip.scrollLeft).toBeGreaterThan(0)
+  expect(active.offsetLeft + active.offsetWidth).toBeLessThanOrEqual(strip.scrollLeft + strip.clientWidth)
+  strip.scrollLeft = 0
+  strip.dispatchEvent(new Event('scroll'))
+  act(() => root.render(<DetailShell identity="Cluster" tabs={[...tabs]} activeTab="yaml" onTabChange={() => {}}>refreshed content</DetailShell>))
+  expect(strip.scrollLeft).toBe(0)
+  act(() => { for (const observer of [...observers]) observer.callback() })
+  expect(strip.scrollLeft).toBe(0)
+  act(() => root.unmount())
+})
+it('switches to compact spacing when badge content grows after the initial fit', () => {
+  let callback = () => {}; let badgeLoaded = false
+  vi.stubGlobal('ResizeObserver', class { constructor(cb: () => void) { callback = cb } observe() {} disconnect() {} })
+  vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 220)
+  vi.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockImplementation(() => badgeLoaded ? 250 : 200)
+  const host = document.createElement('div'); const root = createRoot(host)
+  const tabs = [{ id: 'overview', label: 'Overview', icon: <span>icon</span> }, { id: 'yaml', label: 'YAML', icon: <span>icon</span>, badge: <span /> }]
+  act(() => root.render(<DetailShell identity="Cluster" tabs={tabs} activeTab="yaml" onTabChange={() => {}}>content</DetailShell>))
+  expect(host.textContent).toContain('icon')
+  act(() => { badgeLoaded = true; callback() })
+  expect(host.textContent).not.toContain('icon')
+  act(() => root.unmount())
+})
+
+
+it('lets the actions shrink and wrap while tab focus stays inside the scroll strip', () => {
+  const host = document.createElement('div'); const root = createRoot(host)
+  act(() => root.render(<DetailShell identity="Deployment" tabs={[{ id: 'overview', label: 'Overview' }, { id: 'yaml', label: 'YAML' }]} activeTab="overview" onTabChange={() => {}} tabStripEnd={<div data-actions>Set image Restart Rollback Port-forward Compare Delete</div>}>content</DetailShell>))
+  const actions = host.querySelector('[data-actions]')!.parentElement!
+  expect(actions.classList.contains('shrink-0')).toBe(false)
+  expect(actions.classList.contains('min-w-0')).toBe(true)
+  expect(actions.classList.contains('flex-wrap')).toBe(true)
+  const strip = host.querySelector('[role="tablist"]')!
+  expect(strip.classList.contains('min-w-0')).toBe(true)
+  expect(strip.classList.contains('flex-auto')).toBe(true)
+  expect(strip.classList.contains('flex-1')).toBe(false)
+  for (const tab of strip.querySelectorAll('[role="tab"]')) {
+    expect(tab.classList.contains('focus-visible:outline-none')).toBe(true)
+    expect(tab.classList.contains('focus-visible:ring-2')).toBe(true)
+    expect(tab.classList.contains('focus-visible:ring-inset')).toBe(true)
+    expect(tab.classList.contains('focus-visible:ring-accent')).toBe(true)
+  }
+  act(() => root.unmount())
+})

package/src/components/shared/DetailShell.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import { useLayoutEffect, useRef, useState, type ReactNode } from 'react'
 import { clsx } from 'clsx'
 
 // Shared tabbed detail chrome. Hosts provide all data-aware pieces; this owns
@@ -24,6 +24,8 @@ export interface DetailShellProps<TId extends string = string> {
   nav?: ReactNode
   identity: ReactNode
   headerActions?: ReactNode
+  /** A line under the identity row, above the tabs — e.g. a status summary that holds on every tab. */
+  subheader?: ReactNode
   scopeControls?: ReactNode
   tabs: DetailShellTab<TId>[]
   activeTab: TId
@@ -32,6 +34,11 @@ export interface DetailShellProps<TId extends string = string> {
   overlay?: ReactNode
   /** Hide breadcrumb/identity/header actions when a host page already owns that chrome. */
   compactHeader?: boolean
+  /**
+   * Let the header actions wrap below the identity, as one group, when both
+   * do not fit — for an identity that packs a lot onto its title line.
+   */
+  wrapHeader?: boolean
   children: ReactNode
 }
 
@@ -40,6 +47,7 @@ export function DetailShell<TId extends string = string>({
   nav,
   identity,
   headerActions,
+  subheader,
   scopeControls,
   tabs,
   activeTab,
@@ -47,9 +55,21 @@ export function DetailShell<TId extends string = string>({
   tabStripEnd,
   overlay,
   compactHeader = false,
+  wrapHeader = false,
   children,
 }: DetailShellProps<TId>) {
   const visibleTabs = tabs.filter((t) => !t.hidden)
+  const { stripRef, compact } = useCompactTabs(visibleTabs.map((t) => `${t.id}:${t.label}:${!!t.badge}`).join('|'))
+
+  useLayoutEffect(() => {
+    const strip = stripRef.current
+    const active = strip?.querySelector<HTMLElement>('[aria-selected="true"]')
+    if (strip && active) {
+      const left = active.offsetLeft - strip.offsetLeft
+      if (left < strip.scrollLeft) strip.scrollLeft = left
+      else if (left + active.offsetWidth > strip.scrollLeft + strip.clientWidth) strip.scrollLeft = left + active.offsetWidth - strip.clientWidth
+    }
+  }, [activeTab, compact])
 
   return (
     <div className="flex flex-col h-full w-full bg-theme-base">
@@ -58,27 +78,31 @@ export function DetailShell<TId extends string = string>({
         {!compactHeader && (
           <>
             {breadcrumb && <div className="px-6 pt-2.5">{breadcrumb}</div>}
-            <div className={clsx('px-6 flex items-start gap-4', breadcrumb ? 'pb-3 pt-1.5' : 'py-3')}>
+            <div className={clsx('px-6 flex items-start gap-4', wrapHeader && 'flex-wrap gap-y-2', breadcrumb ? 'pb-3 pt-1.5' : 'py-3')}>
               {nav}
-              <div className="flex-1 min-w-0">{identity}</div>
-              {headerActions}
+              {/* Wrapping on, the identity's basis is its one-line width, so the
+                  actions move below whenever the whole title line would not fit
+                  beside them — never squeezing the name to keep them up. */}
+              <div className={clsx('min-w-0', wrapHeader ? 'flex-auto' : 'flex-1')}>{identity}</div>
+              {wrapHeader ? <div className="ml-auto flex shrink-0 items-start gap-4">{headerActions}</div> : headerActions}
             </div>
+            {subheader && <div className="-mt-1 px-6 pb-3">{subheader}</div>}
           </>
         )}
 
         {/* Tabs (left) + scope controls / actions (right) */}
         <div className={clsx('flex items-center', compactHeader ? 'px-0' : 'border-t border-theme-border px-6')}>
-          <div className="flex gap-1" role="tablist">
+          <div ref={stripRef} className={clsx('flex min-w-0 flex-auto overflow-x-auto', compact ? 'gap-0' : 'gap-1')} role="tablist">
             {visibleTabs.map((t) => (
-              <DetailShellTabButton key={t.id} active={activeTab === t.id} onClick={() => onTabChange(t.id)}>
-                {t.icon}
+              <DetailShellTabButton key={t.id} active={activeTab === t.id} compact={compact} onClick={() => onTabChange(t.id)}>
+                {!compact && t.icon}
                 {t.label}
                 {t.badge}
               </DetailShellTabButton>
             ))}
           </div>
           {(scopeControls || tabStripEnd) && (
-            <div className="ml-auto flex items-center gap-2">
+            <div className="ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2 pl-2">
               {scopeControls}
               {tabStripEnd}
             </div>
@@ -94,7 +118,57 @@ export function DetailShell<TId extends string = string>({
   )
 }
 
-function DetailShellTabButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: ReactNode }) {
+/**
+ * Drops the tab icons and tightens spacing only while the full strip does not
+ * fit, so a page with many tabs stays on one line at laptop widths and others
+ * keep their look. The width the strip needs with icons is measured while it
+ * shows them, so toggling cannot oscillate.
+ */
+function useCompactTabs(tabsKey: string) {
+  const stripRef = useRef<HTMLDivElement>(null)
+  const needed = useRef(0)
+  const [compact, setCompact] = useState(false)
+  useLayoutEffect(() => {
+    needed.current = 0
+    setCompact(false)
+  }, [tabsKey])
+  useLayoutEffect(() => {
+    const el = stripRef.current
+    if (!el || typeof ResizeObserver === 'undefined') return
+    const childWidth = () => [...el.children].reduce((sum, child) => sum + child.getBoundingClientRect().width, 0)
+    let previousWidth = childWidth()
+    let followActive = true
+    const onScroll = () => {
+      const active = el.querySelector<HTMLElement>('[aria-selected="true"]')
+      if (!active) return
+      const left = active.offsetLeft - el.offsetLeft
+      followActive = left >= el.scrollLeft && left + active.offsetWidth <= el.scrollLeft + el.clientWidth
+    }
+    const measure = () => {
+      const width = childWidth()
+      if (compact) needed.current += width - previousWidth
+      previousWidth = width
+      if (!compact) needed.current = el.scrollWidth
+      const next = needed.current > el.clientWidth + 1
+      setCompact((prev) => (prev === next ? prev : next))
+      const active = el.querySelector<HTMLElement>('[aria-selected="true"]')
+      if (active && followActive) {
+        const left = active.offsetLeft - el.offsetLeft
+        if (left < el.scrollLeft) el.scrollLeft = left
+        else if (left + active.offsetWidth > el.scrollLeft + el.clientWidth) el.scrollLeft = left + active.offsetWidth - el.clientWidth
+      }
+    }
+    measure()
+    const ro = new ResizeObserver(measure)
+    ro.observe(el)
+    for (const child of el.children) ro.observe(child)
+    el.addEventListener('scroll', onScroll)
+    return () => { ro.disconnect(); el.removeEventListener('scroll', onScroll) }
+  }, [compact, tabsKey])
+  return { stripRef, compact }
+}
+
+function DetailShellTabButton({ active, compact, onClick, children }: { active: boolean; compact: boolean; onClick: () => void; children: ReactNode }) {
   return (
     <button
       type="button"
@@ -102,7 +176,8 @@ function DetailShellTabButton({ active, onClick, children }: { active: boolean;
       aria-selected={active}
       onClick={onClick}
       className={clsx(
-        'flex items-center gap-1.5 px-3 py-2 text-sm font-medium border-b-2 transition-colors',
+        'flex shrink-0 items-center gap-1.5 whitespace-nowrap py-2 text-sm font-medium border-b-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent',
+        compact ? 'px-2' : 'px-3',
         active
           ? 'text-theme-text-primary border-skyhook-500'
           : 'text-theme-text-secondary border-transparent hover:text-theme-text-primary hover:border-theme-border-light',

package/src/components/shared/EditableYamlView.test.tsx

@@ -266,3 +266,10 @@ it("drops a refresh from an apply made before going back to a newer review", asy
     expect.objectContaining({ reviewedResourceVersion: "3" }),
   );
 });
+
+it("uses the accent token for a generic ConfigMap Edit control", () => {
+  render({ onSave: async () => {}, onPreview: async () => reviewed("1") });
+  const edit = [...host.querySelectorAll("button")].find((b) => b.textContent?.trim() === "Edit")!;
+  expect(edit.classList.contains("text-accent-text")).toBe(true);
+  expect(edit.className).not.toContain("text-blue-");
+});