@skyhook-io/k8s-ui 1.8.9 → 1.8.11

package/src/components/resources/renderers/SecretRenderer.tsx

@@ -217,6 +217,8 @@ export function SecretRenderer({ data, certificateInfo, resourceData, onSaveSecr
                       ref={textareaRef}
                       value={editValue}
                       onChange={(e) => setEditValue(e.target.value)}
+                      autoCorrect="off"
+                      autoCapitalize="off"
                       className="w-full bg-theme-base rounded p-2 text-xs text-theme-text-secondary font-mono border border-blue-500/50 focus:border-blue-500 focus:outline-none resize-none overflow-hidden whitespace-pre-wrap"
                       style={{ minHeight: '60px' }}
                       disabled={isSaving}

package/src/components/resources/renderers/ServiceRenderer.tsx

@@ -3,6 +3,15 @@ import { Globe, Clock, Radio } from 'lucide-react'
 import { Section, PropertyList, Property, KeyValueBadgeList, CopyHandler, AlertBanner } from '../../ui/drawer-components'
 import type { ResourceRef } from '../../../types'
 
+export interface ServicePortRenderProps {
+  namespace: string
+  serviceName: string
+  port: number
+  protocol: string
+  name?: string
+  appProtocol?: string
+}
+
 interface ServiceRendererProps {
   data: any
   onCopy: CopyHandler
@@ -10,11 +19,8 @@ interface ServiceRendererProps {
   endpointSlices?: any[]
   endpointSlicesLoading?: boolean
   onNavigate?: (ref: ResourceRef) => void
-  renderPortAction?: (props: { namespace: string; serviceName: string; port: number; protocol: string; name?: string; appProtocol?: string }) => ReactNode
-  /** Optional full-width content rendered inside a port's card, below its header
-   *  (e.g. an inline probe panel). Lets a host attach a port-scoped panel in the
-   *  drawer flow rather than as a separate overlay. */
-  renderPortPanel?: (props: { namespace: string; serviceName: string; port: number; protocol: string; name?: string; appProtocol?: string }) => ReactNode
+  renderPortAction?: (props: ServicePortRenderProps) => ReactNode
+  renderPortPanel?: (props: ServicePortRenderProps) => ReactNode
 }
 
 function endpointSliceAddressCount(slice: any): number {
@@ -37,7 +43,6 @@ export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpoint
   const ports = spec.ports || []
   const lbIngress = data.status?.loadBalancer?.ingress || []
   const namespace = data.metadata?.namespace
-  const serviceName = data.metadata?.name
 
   const isLoadBalancer = spec.type === 'LoadBalancer'
   const isExternalName = spec.type === 'ExternalName'
@@ -96,40 +101,7 @@ export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpoint
 
       {ports.length > 0 && (
         <Section title="Ports" defaultExpanded>
-          <div className="space-y-2">
-            {ports.map((port: any, i: number) => (
-              <div key={`${port.port}-${port.protocol || 'TCP'}`} className="card-inner text-sm">
-                <div className="flex items-center justify-between gap-2">
-                  <div className="flex items-baseline gap-x-2 gap-y-0.5 min-w-0 flex-wrap">
-                    <span className="text-theme-text-primary font-medium">{port.name || `port-${i + 1}`}</span>
-                    <span className="text-xs text-theme-text-tertiary">{port.protocol || 'TCP'}</span>
-                    <span className="text-xs text-theme-text-secondary font-mono">
-                      {port.port}{port.targetPort != null && port.targetPort !== port.port ? ` → ${port.targetPort}` : ''}
-                      {port.nodePort ? ` (NodePort: ${port.nodePort})` : ''}
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-2 shrink-0">
-                    {renderPortAction?.({
-                      namespace,
-                      serviceName,
-                      port: port.port,
-                      protocol: port.protocol || 'TCP',
-                      name: port.name,
-                      appProtocol: port.appProtocol,
-                    })}
-                  </div>
-                </div>
-                {renderPortPanel?.({
-                  namespace,
-                  serviceName,
-                  port: port.port,
-                  protocol: port.protocol || 'TCP',
-                  name: port.name,
-                  appProtocol: port.appProtocol,
-                })}
-              </div>
-            ))}
-          </div>
+          <ServicePortCards service={data} renderPortAction={renderPortAction} renderPortPanel={renderPortPanel} />
         </Section>
       )}
 
@@ -184,3 +156,49 @@ export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpoint
     </>
   )
 }
+
+export function ServicePortCards({
+  service,
+  renderPortAction,
+  renderPortPanel,
+}: {
+  service: any
+  renderPortAction?: (props: ServicePortRenderProps) => ReactNode
+  renderPortPanel?: (props: ServicePortRenderProps) => ReactNode
+}) {
+  const ports = service?.spec?.ports || []
+  const namespace = service?.metadata?.namespace || ''
+  const serviceName = service?.metadata?.name || ''
+  return (
+    <div className="space-y-2">
+      {ports.map((port: any, i: number) => {
+        const props: ServicePortRenderProps = {
+          namespace,
+          serviceName,
+          port: port.port,
+          protocol: port.protocol || 'TCP',
+          name: port.name,
+          appProtocol: port.appProtocol,
+        }
+        return (
+          <div key={`${serviceName}-${port.name || i}-${port.port}-${port.protocol || 'TCP'}`} className="card-inner text-sm">
+            <div className="flex items-center justify-between gap-2">
+              <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
+                <span className="font-medium text-theme-text-primary">{port.name || `port-${i + 1}`}</span>
+                <span className="text-xs text-theme-text-tertiary">{port.protocol || 'TCP'}</span>
+                <span className="font-mono text-xs text-theme-text-secondary">
+                  {port.port}{port.targetPort != null && port.targetPort !== port.port ? ` → ${port.targetPort}` : ''}
+                  {port.nodePort ? ` (NodePort: ${port.nodePort})` : ''}
+                </span>
+              </div>
+              <div className="flex shrink-0 items-center gap-2">
+                {renderPortAction?.(props)}
+              </div>
+            </div>
+            {renderPortPanel?.(props)}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/resources/renderers/VulnerabilityReportRenderer.tsx

@@ -2,6 +2,7 @@ import { useState, useMemo } from 'react'
 import { Shield, Package, ChevronDown, ChevronRight, ChevronUp, ExternalLink, Search, ArrowUpDown, Wrench } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Input } from '../../ui/Input'
 import { formatAge } from '../resource-utils'
 import { SEVERITY_BADGE_COLORS, SEVERITY_BAR_COLORS, SEVERITY_TEXT_COLORS, SEVERITY_ORDER, TrivyAlertBanner, formatTrivyImage } from './trivy-shared'
 
@@ -222,8 +223,7 @@ export function VulnerabilityReportRenderer({ data }: VulnerabilityReportRendere
               <div className="flex items-center gap-2 mb-2 px-1">
                 <div className="relative flex-1">
                   <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-theme-text-tertiary" />
-                  <input
-                    type="text"
+                  <Input
                     placeholder="Filter by CVE or package..."
                     value={searchTerm}
                     onChange={(e) => { setSearchTerm(e.target.value); setShowAll(false) }}

package/src/components/resources/renderers/WorkflowRenderer.test.tsx

@@ -0,0 +1,43 @@
+import { renderToString } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+
+import { WorkflowRenderer } from './WorkflowRenderer'
+
+describe('WorkflowRenderer', () => {
+  it('does not turn retained failed attempts into a failed workflow', () => {
+    const html = renderToString(<WorkflowRenderer data={{
+      metadata: { name: 'retry-workflow' },
+      status: {
+        phase: 'Succeeded',
+        nodes: {
+          root: { name: 'retry-workflow', displayName: 'retry-workflow', templateName: 'main', type: 'Retry', phase: 'Succeeded', children: ['attempt'] },
+          attempt: { displayName: 'retry-workflow(0)', type: 'Pod', phase: 'Failed', message: 'first attempt failed' },
+        },
+      },
+    }} />)
+
+    expect(html).toContain('Workflow Completed Successfully')
+    expect(html).not.toContain('Workflow Issues')
+    expect(html).toContain('Execution (2 nodes)')
+  })
+
+  it('lists every failed node and bounds long problem summaries', () => {
+    const longMessage = 'x'.repeat(500)
+    const html = renderToString(<WorkflowRenderer data={{
+      metadata: { name: 'failed-workflow' },
+      status: {
+        phase: 'Failed',
+        message: 'workflow failed',
+        nodes: {
+          root: { name: 'failed-workflow', displayName: 'failed-workflow', templateName: 'main', type: 'DAG', phase: 'Failed', children: ['with-message', 'without-message'] },
+          'with-message': { displayName: 'prepare', type: 'Pod', phase: 'Failed', message: longMessage },
+          'without-message': { displayName: 'publish', type: 'Pod', phase: 'Failed' },
+        },
+      },
+    }} />)
+
+    expect(html).toContain('Workflow Issues')
+    expect(html).toContain('publish failed')
+    expect(html).toContain(`prepare: ${'x'.repeat(290)}…`)
+  })
+})

package/src/components/resources/renderers/WorkflowRenderer.tsx

@@ -1,23 +1,16 @@
 import { Play, Clock, CheckCircle, XCircle, Loader2, SkipForward, PauseCircle } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { formatAge, formatDuration } from '../resource-utils'
+import { buildWorkflowExecutionModel, flattenWorkflowExecution, WorkflowExecutionModel, WorkflowExecutionNode, WorkflowTemplateReference } from '../../../utils/workflow-execution'
+import { SEVERITY_TEXT } from '../../../utils/badge-colors'
 
 interface WorkflowRendererProps {
   data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
 }
 
-interface WorkflowStep {
-  id: string
-  displayName: string
-  phase: string
-  startedAt: string | null
-  finishedAt: string | null
-  message: string | null
-  nodeType: string
-}
-
-function getStepDuration(step: WorkflowStep): string | null {
+function getStepDuration(step: WorkflowExecutionNode): string | null {
   if (!step.startedAt) return null
   const start = new Date(step.startedAt)
   const end = step.finishedAt ? new Date(step.finishedAt) : new Date()
@@ -29,15 +22,16 @@ function StepStatusIcon({ phase, nodeType }: { phase: string; nodeType?: string
     return <SkipForward className="w-4 h-4 text-theme-text-tertiary shrink-0" />
   }
   if (nodeType === 'Suspend' && phase !== 'Succeeded') {
-    return <PauseCircle className="w-4 h-4 text-yellow-400 shrink-0" />
+    return <PauseCircle className={clsx('h-4 w-4 shrink-0', SEVERITY_TEXT.warning)} />
   }
   switch (phase) {
     case 'Succeeded':
-      return <CheckCircle className="w-4 h-4 text-green-400 shrink-0" />
+      return <CheckCircle className={clsx('h-4 w-4 shrink-0', SEVERITY_TEXT.success)} />
     case 'Failed':
-      return <XCircle className="w-4 h-4 text-red-400 shrink-0" />
+    case 'Error':
+      return <XCircle className={clsx('h-4 w-4 shrink-0', SEVERITY_TEXT.error)} />
     case 'Running':
-      return <Loader2 className="w-4 h-4 text-yellow-400 shrink-0 animate-spin" />
+      return <Loader2 className={clsx('h-4 w-4 shrink-0 animate-spin', SEVERITY_TEXT.warning)} />
     default:
       return <Clock className="w-4 h-4 text-theme-text-tertiary shrink-0" />
   }
@@ -74,66 +68,41 @@ function formatEstimatedDuration(seconds: number): string {
   return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours}h`
 }
 
-function getWorkflowProblems(data: any): string[] {
+function getWorkflowProblems(data: any, execution: WorkflowExecutionModel): string[] {
   const problems: string[] = []
   const status = data.status || {}
   const phase = status.phase
 
   if (phase === 'Failed') {
-    problems.push(status.message || 'Workflow failed')
+    problems.push(workflowProblemSummary(status.message || 'Workflow failed'))
   } else if (phase === 'Error') {
-    problems.push(status.message || 'Workflow error')
+    problems.push(workflowProblemSummary(status.message || 'Workflow error'))
   }
 
-  // Check for failed nodes — include error messages when available
-  const nodes = status.nodes || {}
-  const failedNodes = Object.values(nodes)
-    .filter((node: any) => (node.type === 'Pod' || node.type === 'Suspend' || node.type === 'Skipped') && (node.phase === 'Failed' || node.phase === 'Error'))
+  const failedNodes = phase === 'Failed' || phase === 'Error'
+    ? execution.focusPaths.map((path) => path.terminal).filter((node, index, nodes) =>
+        (node.phase === 'Failed' || node.phase === 'Error') && nodes.findIndex((candidate) => candidate.id === node.id) === index,
+      )
+    : []
 
-  if (failedNodes.length > 0) {
-    const withMessages = failedNodes.filter((node: any) => node.message)
-    if (withMessages.length > 0) {
-      for (const n of withMessages as any[]) {
-        problems.push(`${n.displayName}: ${n.message}`)
-      }
-    } else {
-      problems.push(`Failed steps: ${failedNodes.map((n: any) => n.displayName).join(', ')}`)
-    }
+  for (const node of failedNodes) {
+    problems.push(workflowProblemSummary(node.message ? `${node.displayLabel}: ${node.message}` : `${node.displayLabel} failed`))
   }
 
   return problems
 }
 
-const VISIBLE_NODE_TYPES = new Set(['Pod', 'Skipped', 'Suspend'])
-
-function extractSteps(data: any): WorkflowStep[] {
-  const nodes = data.status?.nodes || {}
-  const steps: WorkflowStep[] = Object.entries(nodes)
-    .filter(([, node]: [string, any]) => VISIBLE_NODE_TYPES.has(node.type))
-    .map(([id, node]: [string, any]) => ({
-      id,
-      displayName: node.displayName || id,
-      phase: node.phase || (node.type === 'Skipped' ? 'Skipped' : 'Pending'),
-      startedAt: node.startedAt || null,
-      finishedAt: node.finishedAt || null,
-      message: node.message || null,
-      nodeType: node.type,
-    }))
-
-  steps.sort((a, b) => {
-    if (!a.startedAt && !b.startedAt) return 0
-    if (!a.startedAt) return 1
-    if (!b.startedAt) return -1
-    return new Date(a.startedAt).getTime() - new Date(b.startedAt).getTime()
-  })
-
-  return steps
+function workflowProblemSummary(message: string): string {
+  return message.length > 300 ? `${message.slice(0, 299)}…` : message
 }
 
-export function WorkflowRenderer({ data }: WorkflowRendererProps) {
+export function WorkflowRenderer({ data, onNavigate }: WorkflowRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const phase = status.phase || 'Unknown'
+  const execution = buildWorkflowExecutionModel(data)
+  const executionNodes = execution.visibleSteps
+  const stepRows = flattenWorkflowExecution(execution)
 
   // Compute duration
   const startedAt = status.startedAt ? new Date(status.startedAt) : null
@@ -144,18 +113,13 @@ export function WorkflowRenderer({ data }: WorkflowRendererProps) {
     ? formatDuration(Date.now() - startedAt.getTime(), true) + ' (running)'
     : null
 
-  // Extract problems
-  const problems = getWorkflowProblems(data)
+  const problems = [...new Set(getWorkflowProblems(data, execution))]
   const hasProblems = problems.length > 0
 
-  // Extract steps
-  const steps = extractSteps(data)
-
   // Arguments
   const parameters = spec.arguments?.parameters || []
 
-  // Template reference
-  const templateName = spec.workflowTemplateRef?.name || null
+  const workflowTemplateRef = execution.templateRefs.find((ref) => ref.source === 'workflow')
 
   // Estimated duration
   const estimatedDuration = status.estimatedDuration
@@ -183,7 +147,7 @@ export function WorkflowRenderer({ data }: WorkflowRendererProps) {
           {duration && <Property label="Duration" value={duration} />}
           {status.startedAt && <Property label="Started" value={formatAge(status.startedAt)} />}
           <Property label="Finished" value={status.finishedAt ? formatAge(status.finishedAt) : 'Running...'} />
-          {templateName && <Property label="Template" value={templateName} />}
+          {workflowTemplateRef && <Property label="Definition" value={<TemplateRefLink refInfo={workflowTemplateRef} onNavigate={onNavigate} />} />}
           {status.progress && (
             <Property label="Progress" value={status.progress} />
           )}
@@ -203,33 +167,38 @@ export function WorkflowRenderer({ data }: WorkflowRendererProps) {
         </PropertyList>
       </Section>
 
-      {/* Steps section */}
-      {steps.length > 0 && (
-        <Section title={`Steps (${steps.length})`} defaultExpanded>
+      {executionNodes.length > 0 && (
+        <Section title={`Execution (${executionNodes.length} ${executionNodes.length === 1 ? 'node' : 'nodes'})`} defaultExpanded>
           <div className="space-y-1.5">
-            {steps.map(step => {
+            {stepRows.map(({ node: step, depth }) => {
               const isFailed = step.phase === 'Failed' || step.phase === 'Error'
-              const isSkipped = step.nodeType === 'Skipped' || step.phase === 'Skipped'
-              const isSuspend = step.nodeType === 'Suspend'
+              const isSkipped = step.type === 'Skipped' || step.phase === 'Skipped'
+              const isSuspend = step.type === 'Suspend'
               return (
                 <div key={step.id} className={clsx(
                   'text-sm card-inner px-3 py-2',
-                  isFailed && 'border-l-2 border-red-500'
-                )}>
+                  isFailed && 'border-l-2 border-l-[var(--color-error)]'
+                )} style={{ marginLeft: `${Math.min(depth, 6) * 12}px` }}>
                   <div className="flex items-center gap-2">
-                    <StepStatusIcon phase={step.phase} nodeType={step.nodeType} />
+                    <StepStatusIcon phase={step.phase} nodeType={step.type} />
                     <span className={clsx(
                       'flex-1',
-                      isSkipped ? 'text-theme-text-tertiary' : isSuspend ? 'text-yellow-400' : 'text-theme-text-primary'
+                      isSkipped ? 'text-theme-text-tertiary' : isSuspend ? SEVERITY_TEXT.warning : 'text-theme-text-primary'
                     )}>
-                      {step.displayName}
+                      {step.displayLabel}
                       {isSkipped && <span className="ml-1 text-xs text-theme-text-tertiary">(skipped)</span>}
-                      {isSuspend && <span className="ml-1 text-xs text-yellow-400/70">(suspend)</span>}
+                      {isSuspend && <span className={clsx('ml-1 text-xs opacity-70', SEVERITY_TEXT.warning)}>(suspend)</span>}
                     </span>
+                    <span className="text-xs text-theme-text-tertiary">{step.displayType}</span>
                     <span className="text-xs text-theme-text-secondary">{getStepDuration(step) || '-'}</span>
                   </div>
                   {isFailed && step.message && (
-                    <div className="text-xs text-red-400 mt-1 ml-6 break-all">{step.message}</div>
+                    <div className={clsx('mt-1 ml-6 line-clamp-2 break-all text-xs', SEVERITY_TEXT.error)} title={step.message}>{step.message}</div>
+                  )}
+                  {step.templateRef && (
+                    <div className="mt-1 ml-6 text-xs text-theme-text-tertiary">
+                      Uses <TemplateRefLink refInfo={step.templateRef} onNavigate={onNavigate} />
+                    </div>
                   )}
                 </div>
               )
@@ -254,3 +223,16 @@ export function WorkflowRenderer({ data }: WorkflowRendererProps) {
     </>
   )
 }
+
+function TemplateRefLink({ refInfo, onNavigate }: { refInfo: WorkflowTemplateReference; onNavigate?: WorkflowRendererProps['onNavigate'] }) {
+  return (
+    <ResourceLink
+      name={refInfo.name}
+      kind={refInfo.resourceKind}
+      namespace={refInfo.namespace}
+      group="argoproj.io"
+      label={refInfo.clusterScope ? `${refInfo.name} (cluster)` : refInfo.name}
+      onNavigate={onNavigate}
+    />
+  )
+}

package/src/components/resources/renderers/index.ts

@@ -23,6 +23,7 @@ export * from './CNPGScheduledBackupRenderer'
 export * from './ConfigAuditReportRenderer'
 export * from './ConfigMapRenderer'
 export * from './CronJobRenderer'
+export * from './CronWorkflowRenderer'
 export * from './eso-cells'
 export * from './EventRenderer'
 export * from './EndpointSliceRenderer'

package/src/components/resources/resource-utils-capi.ts

@@ -300,6 +300,6 @@ export function getClusterProvider(resource: any): string {
 /** Parse CAPI compound condition messages ("* Foo: bar * Baz: qux") into a structured list */
 export function parseCAPIConditionMessage(message: string): string[] | null {
   if (!message || !message.includes('*')) return null
-  const items = message.split(/\s*\*\s*/).filter(Boolean).map(s => s.trim())
+  const items = message.split('*').map(s => s.trim()).filter(Boolean)
   return items.length > 1 ? items : null
 }

package/src/components/resources/resource-utils.ts

@@ -1406,6 +1406,36 @@ export function getWorkflowTemplate(workflow: any): string | null {
   return workflow.spec?.workflowTemplateRef?.name || null
 }
 
+export function getCronWorkflowStatus(cwf: any): StatusBadge {
+  const spec = cwf.spec || {}
+  const status = cwf.status || {}
+  const active = Array.isArray(status.active) ? status.active.length : 0
+  if (spec.suspend === true) {
+    return { text: 'Suspended', color: healthColors.degraded, level: 'degraded' }
+  }
+  if (active > 0) {
+    return { text: `${active} active`, color: healthColors.neutral, level: 'neutral' }
+  }
+  if (status.lastScheduledTime) {
+    return { text: 'Idle', color: healthColors.neutral, level: 'neutral' }
+  }
+  return { text: 'Never run', color: healthColors.unknown, level: 'unknown' }
+}
+
+export function getCronWorkflowSchedule(cwf: any): string {
+  const schedules = cwf.spec?.schedules
+  if (Array.isArray(schedules) && schedules.length > 0) return schedules.join(', ')
+  return cwf.spec?.schedule || '-'
+}
+
+export function getCronWorkflowLastRun(cwf: any): string {
+  return cwf.status?.lastScheduledTime ? formatAge(cwf.status.lastScheduledTime) : 'Never'
+}
+
+export function getCronWorkflowTemplate(cwf: any): string {
+  return cwf.spec?.workflowSpec?.workflowTemplateRef?.name || cwf.spec?.workflowSpec?.entrypoint || '-'
+}
+
 // ============================================================================
 // CERT-MANAGER UTILITIES — re-exported from resource-utils-certmanager.ts
 // ============================================================================
@@ -1866,6 +1896,7 @@ export function getCellFilterValue(resource: any, column: string, kind: string):
       if (kindLower === 'persistentvolumes') return getPVStatus(resource).text
       if (kindLower === 'rollouts') return getRolloutStatus(resource).text
       if (kindLower === 'workflows') return getWorkflowStatus(resource).text
+      if (kindLower === 'cronworkflows') return getCronWorkflowStatus(resource).text
       if (kindLower === 'hpas' || kindLower === 'horizontalpodautoscalers') return getHPAStatus(resource).text
       if (kindLower === 'gateways') return getGatewayStatus(resource).text
       if (kindLower === 'gatewayclasses') return getGatewayClassStatus(resource).text

package/src/components/shared/DetailShell.tsx

@@ -52,9 +52,9 @@ export function DetailShell<TId extends string = string>({
   const visibleTabs = tabs.filter((t) => !t.hidden)
 
   return (
-    <div className="flex flex-col h-full w-full bg-theme-surface">
+    <div className="flex flex-col h-full w-full bg-theme-base">
       {/* Header */}
-      <div className="shrink-0 border-b border-theme-border bg-theme-surface">
+      <div className="shrink-0 border-b border-theme-border bg-theme-base">
         {!compactHeader && (
           <>
             {breadcrumb && <div className="px-6 pt-2.5">{breadcrumb}</div>}