@skyhook-io/k8s-ui 1.8.5 → 1.8.7

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

@@ -1,7 +1,7 @@
 import { useState, type ReactNode, type JSX } from 'react'
 import { Server, HardDrive, Terminal as TerminalIcon, FileText, Activity, CirclePlay, FolderOpen, List, Eye, EyeOff, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR, getDefaultContainerName } from '../resource-utils'
 import { getResourceStatusColor, SEVERITY_BADGE_BORDERED } from '../../../utils/badge-colors'
 import {
@@ -274,9 +274,12 @@ export function PodRenderer({
   const podName = data.metadata?.name
   const isRunning = data.status?.phase === 'Running'
 
-  // Check for problems
+  // Check for problems. Suppressed when the detail already shows the dedicated
+  // Operational Issues section (the Issues pipeline covers the same pod failures,
+  // richer) — avoids showing the same crashloop twice.
+  const operationalIssuesShown = useOperationalIssuesShown()
   const podProblems = getPodProblems(data)
-  const hasProblems = podProblems.length > 0
+  const hasProblems = podProblems.length > 0 && !operationalIssuesShown
 
   // Image filesystem modal state
   const [selectedImage, setSelectedImage] = useState<string | null>(null)
@@ -548,6 +551,10 @@ export function PodRenderer({
             const lastTermination = status?.lastState?.terminated
             const currentWaiting = status?.state?.waiting
             const currentTerminated = status?.state?.terminated
+            // A container that exited 0 (a completed Job pod) is a success, not a
+            // failure — tone its badges/text sky, not red, so the drawer agrees
+            // with the calm "Completed" table badge instead of screaming red.
+            const terminatedOk = currentTerminated?.exitCode === 0
 
             return (
               <div key={container.name} className="card-inner-lg">
@@ -586,14 +593,17 @@ export function PodRenderer({
                     )}
                     <span className={clsx(
                       'badge',
-                      isReady ? SEVERITY_BADGE_BORDERED.success : SEVERITY_BADGE_BORDERED.error
+                      isReady ? SEVERITY_BADGE_BORDERED.success :
+                      terminatedOk ? SEVERITY_BADGE_BORDERED.info :
+                      SEVERITY_BADGE_BORDERED.error
                     )}>
-                      {isReady ? 'Ready' : 'Not Ready'}
+                      {isReady ? 'Ready' : terminatedOk ? 'Completed' : 'Not Ready'}
                     </span>
                     <span className={clsx(
                       'badge',
                       stateKey === 'running' ? SEVERITY_BADGE_BORDERED.success :
                       stateKey === 'waiting' ? SEVERITY_BADGE_BORDERED.warning :
+                      terminatedOk ? SEVERITY_BADGE_BORDERED.info :
                       SEVERITY_BADGE_BORDERED.error
                     )}>
                       {stateKey}
@@ -621,9 +631,10 @@ export function PodRenderer({
                       )}
                     </div>
                   )}
-                  {/* Show current terminated reason */}
+                  {/* Show current terminated reason — sky for a clean exit-0
+                      completion, red only for a genuine failure. */}
                   {currentTerminated?.reason && (
-                    <div className="text-red-400 flex items-center gap-1">
+                    <div className={clsx('flex items-center gap-1', terminatedOk ? 'text-sky-500 dark:text-sky-400' : 'text-red-400')}>
                       <span className="font-medium">Terminated: {currentTerminated.reason}</span>
                       {currentTerminated.exitCode !== undefined && currentTerminated.exitCode !== 0 && (
                         <span className="text-theme-text-tertiary">(exit code {currentTerminated.exitCode})</span>
@@ -795,8 +806,16 @@ export function PodRenderer({
         </Section>
       )}
 
-      {/* Conditions */}
-      <ConditionsSection conditions={data.status?.conditions} />
+      {/* Conditions. A completed pod's Ready/ContainersReady flip to False with
+          reason "PodCompleted" — that's expected for a finished pod, not a failure,
+          so tone it neutral (gray) instead of red. Gated on the PodCompleted reason
+          so a genuinely not-ready pod (any other reason) still reads red. */}
+      <ConditionsSection
+        conditions={data.status?.conditions}
+        getConditionTone={(cond) =>
+          cond?.status === 'False' && cond?.reason === 'PodCompleted' ? 'unknown' : undefined
+        }
+      />
 
       {/* Permissions (via ServiceAccount) — placed below the diagnostic-
        *  signal sections (status, containers, resource usage, conditions)

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

@@ -10,7 +10,11 @@ interface ServiceRendererProps {
   endpointSlices?: any[]
   endpointSlicesLoading?: boolean
   onNavigate?: (ref: ResourceRef) => void
-  renderPortAction?: (props: { namespace: string; serviceName: string; port: number; protocol: string }) => ReactNode
+  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
 }
 
 function endpointSliceAddressCount(slice: any): number {
@@ -28,7 +32,7 @@ function endpointSliceReadyClass(ready: number, total: number): string {
   return 'status-unhealthy'
 }
 
-export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpointSlicesLoading, onNavigate, renderPortAction }: ServiceRendererProps) {
+export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpointSlicesLoading, onNavigate, renderPortAction, renderPortPanel }: ServiceRendererProps) {
   const spec = data.spec || {}
   const ports = spec.ports || []
   const lbIngress = data.status?.loadBalancer?.ingress || []
@@ -95,24 +99,34 @@ export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpoint
           <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">
-                  <div className="flex items-center gap-2">
+                <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">
+                  <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>
-                <div className="text-xs text-theme-text-secondary mt-1">
-                  {port.port}{port.targetPort != null && port.targetPort !== port.port ? ` → ${port.targetPort}` : ''}
-                  {port.nodePort ? ` (NodePort: ${port.nodePort})` : ''}
-                </div>
+                {renderPortPanel?.({
+                  namespace,
+                  serviceName,
+                  port: port.port,
+                  protocol: port.protocol || 'TCP',
+                  name: port.name,
+                  appProtocol: port.appProtocol,
+                })}
               </div>
             ))}
           </div>

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

@@ -1,6 +1,6 @@
 import { Globe, ArrowRight, Network } from 'lucide-react'
-import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
 
 interface SimpleRouteRendererProps {
@@ -81,7 +81,7 @@ export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRende
                 hostnames.length > 0 ? (
                   <div className="flex flex-wrap gap-1">
                     {hostnames.map((h: string) => (
-                      <span key={h} className="badge bg-theme-elevated text-theme-text-secondary">{h}</span>
+                      <Badge key={h} tone="structural">{h}</Badge>
                     ))}
                   </div>
                 ) : (
@@ -163,20 +163,14 @@ export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRende
                   </div>
                   <div className="flex flex-wrap gap-2">
                     {accepted && (
-                      <span className={clsx(
-                        'badge',
-                        accepted.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
-                      )}>
+                      <Badge severity={accepted.status === 'True' ? 'success' : 'error'}>
                         {accepted.status === 'True' ? 'Accepted' : 'Not Accepted'}
-                      </span>
+                      </Badge>
                     )}
                     {resolved && (
-                      <span className={clsx(
-                        'badge',
-                        resolved.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
-                      )}>
+                      <Badge severity={resolved.status === 'True' ? 'success' : 'warning'}>
                         {resolved.status === 'True' ? 'Refs Resolved' : 'Unresolved Refs'}
-                      </span>
+                      </Badge>
                     )}
                   </div>
                   {accepted?.message && accepted.status === 'False' && (

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

@@ -1,5 +1,6 @@
 import { Globe, Route, Layers, Lock } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
 
 interface TraefikIngressRouteRendererProps {
   data: any
@@ -84,14 +85,14 @@ export function TraefikIngressRouteRenderer({ data, onNavigate }: TraefikIngress
                     {route.match || 'No match rule'}
                   </span>
                   {route.priority && (
-                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-[10px] text-theme-text-secondary shrink-0">
+                    <Badge tone="structural" size="sm" className="shrink-0">
                       priority: {route.priority}
-                    </span>
+                    </Badge>
                   )}
                   {route.kind && route.kind !== 'Rule' && (
-                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-[10px] text-theme-text-secondary shrink-0">
+                    <Badge tone="structural" size="sm" className="shrink-0">
                       {route.kind}
-                    </span>
+                    </Badge>
                   )}
                 </div>
 
@@ -110,9 +111,9 @@ export function TraefikIngressRouteRenderer({ data, onNavigate }: TraefikIngress
                         return (
                           <div key={si} className="flex items-center gap-2 text-xs">
                             {isTraefikSvc && (
-                              <span className="px-1.5 py-0.5 bg-cyan-500/10 text-cyan-400 rounded text-[10px]">
+                              <Badge kind="TraefikService" size="sm">
                                 TraefikService
-                              </span>
+                              </Badge>
                             )}
                             <ResourceLink
                               name={svc.name}
@@ -152,9 +153,9 @@ export function TraefikIngressRouteRenderer({ data, onNavigate }: TraefikIngress
                             kind="middlewares"
                             namespace={mwNs}
                             label={
-                              <span className="px-1.5 py-0.5 bg-purple-500/10 text-purple-400 rounded text-[10px] inline-block">
+                              <Badge tone="accent1" size="sm" className="inline-block">
                                 {mw.namespace && mw.namespace !== ns ? `${mw.namespace}/` : ''}{mw.name}
-                              </span>
+                              </Badge>
                             }
                             onNavigate={onNavigate}
                           />
@@ -242,9 +243,9 @@ export function TraefikIngressRouteRenderer({ data, onNavigate }: TraefikIngress
                     onNavigate={onNavigate}
                   />
                   {isCrossNs && (
-                    <span className="px-1.5 py-0.5 bg-yellow-500/10 text-yellow-400 rounded text-[10px]">
+                    <Badge tone="note" size="sm">
                       {mw.namespace}
-                    </span>
+                    </Badge>
                   )}
                 </div>
               )

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

@@ -0,0 +1,185 @@
+import { SlidersHorizontal, Layers, ShieldCheck } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
+import { getMiddlewareType } from '../resource-utils-traefik'
+
+interface TraefikMiddlewareRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+// Keys whose value is inline credential MATERIAL — redacted in the generic
+// config view. Mirrors the backend's value-key set (pkg/ai/context/redact.go)
+// plus `users` (basicAuth htpasswd). Deliberately excludes reference keys like
+// `secret`/`secretName` (the NAME of a Secret, which is safe and useful to show).
+const SECRET_VALUE_KEYS = new Set([
+  'password', 'passwd', 'passphrase', 'token', 'clientsecret', 'privatekey',
+  'apikey', 'apitoken', 'accesstoken', 'sessiontoken', 'secretaccesskey',
+  'secretkey', 'authtoken', 'bearertoken', 'users',
+])
+
+function isSecretKey(key: string): boolean {
+  return SECRET_VALUE_KEYS.has(key.toLowerCase().replace(/[-_]/g, ''))
+}
+
+function formatScalar(v: any): string {
+  if (Array.isArray(v)) return v.length === 0 ? '[]' : v.join(', ')
+  if (typeof v === 'object' && v !== null) return JSON.stringify(v)
+  return String(v)
+}
+
+// Deep-redact: replace any credential-keyed value with "(hidden)" at EVERY
+// depth, so a secret under e.g. plugin.config.clientSecret can't survive a
+// later JSON.stringify of a nested object. Non-secret values are kept — the
+// drawer is not a secrecy boundary (the YAML tab shows the full spec the user
+// already has RBAC to read); hiding only credential KEYS keeps the generic
+// config legible for unknown/plugin middleware types.
+function redactConfig(v: any): any {
+  if (Array.isArray(v)) return v.map(redactConfig)
+  if (v && typeof v === 'object') {
+    const out: Record<string, any> = {}
+    for (const [k, val] of Object.entries(v)) {
+      out[k] = isSecretKey(k) ? '(hidden)' : redactConfig(val)
+    }
+    return out
+  }
+  return v
+}
+
+// Renders a middleware config object as a property list, collapsing nested
+// objects/arrays to a compact one-line summary. Credential keys are redacted
+// at every depth (redactConfig) before rendering.
+function ConfigProperties({ config }: { config: Record<string, any> }) {
+  const safe = redactConfig(config) as Record<string, any>
+  const entries = Object.entries(safe)
+  if (entries.length === 0) {
+    return <Property label="Config" value="(empty)" />
+  }
+  return (
+    <>
+      {entries.map(([key, value]) => {
+        if (Array.isArray(value)) {
+          return <Property key={key} label={key} value={value.length === 0 ? '[]' : value.map(formatScalar).join(', ')} />
+        }
+        if (typeof value === 'object' && value !== null) {
+          const inner = Object.entries(value)
+            .map(([k, v]) => `${k}: ${formatScalar(v)}`)
+            .join('  ·  ')
+          return <Property key={key} label={key} value={inner || '{}'} />
+        }
+        return <Property key={key} label={key} value={formatScalar(value)} />
+      })}
+    </>
+  )
+}
+
+export function TraefikMiddlewareRenderer({ data, onNavigate }: TraefikMiddlewareRendererProps) {
+  const spec = data.spec || {}
+  const type = getMiddlewareType(data)
+  const ns = data.metadata?.namespace || ''
+  const kindLabel = data.kind || 'Middleware'
+  // A middleware spec carries exactly one top-level key (its type). For known
+  // types that's `type`; for unrecognized ones fall back to whatever key the
+  // spec actually has, so the generic config section isn't rendered empty.
+  const typeKey = type === 'unknown' ? Object.keys(spec)[0] : type
+  const config = (typeKey && spec[typeKey]) || {}
+
+  const isChain = type === 'chain'
+  // A MiddlewareTCP chain references MiddlewareTCP members, not Middleware.
+  const chainMemberKind = data.kind === 'MiddlewareTCP' ? 'middlewaretcps' : 'middlewares'
+  const isAuth = type === 'basicAuth' || type === 'digestAuth'
+  const isForwardAuth = type === 'forwardAuth'
+  const isErrors = type === 'errors'
+
+  return (
+    <>
+      {type === 'unknown' && (
+        <AlertBanner
+          variant="info"
+          title="Unrecognized middleware type"
+          message="This middleware uses a type Radar doesn't render specially (e.g. a plugin or a newer/commercial middleware). The raw configuration is shown below."
+        />
+      )}
+
+      <Section title={kindLabel} icon={SlidersHorizontal} defaultExpanded>
+        <PropertyList>
+          <Property label="Type" value={type === 'unknown' ? Object.keys(spec)[0] || 'unknown' : type} />
+        </PropertyList>
+      </Section>
+
+      {isChain ? (
+        <Section title="Chain" icon={Layers} defaultExpanded>
+          <div className="space-y-1">
+            {(config.middlewares || []).map((m: any, i: number) => (
+              <div key={i} className="flex items-center gap-2 text-xs">
+                <span className="text-theme-text-tertiary w-4 text-right">{i + 1}.</span>
+                <ResourceLink
+                  name={m.name}
+                  kind={chainMemberKind}
+                  namespace={m.namespace || ns}
+                  onNavigate={onNavigate}
+                />
+                {m.namespace && m.namespace !== ns && (
+                  <Badge tone="note" size="sm">{m.namespace}</Badge>
+                )}
+              </div>
+            ))}
+            {(config.middlewares || []).length === 0 && (
+              <span className="text-xs text-theme-text-tertiary">No middlewares in chain</span>
+            )}
+          </div>
+        </Section>
+      ) : isAuth ? (
+        <Section title="Authentication" icon={ShieldCheck} defaultExpanded>
+          <PropertyList>
+            {config.secret && (
+              <Property label="Secret" value={
+                <ResourceLink name={config.secret} kind="secrets" namespace={ns} onNavigate={onNavigate} />
+              } />
+            )}
+            {Array.isArray(config.users) && (
+              <Property label="Inline users" value={<span className="text-theme-text-tertiary italic">{config.users.length} — hidden</span>} />
+            )}
+            {config.usersFile && <Property label="Users file" value={config.usersFile} />}
+            {config.realm && <Property label="Realm" value={config.realm} />}
+            {config.removeHeader !== undefined && <Property label="Remove header" value={String(config.removeHeader)} />}
+          </PropertyList>
+        </Section>
+      ) : isForwardAuth ? (
+        <Section title="Forward Auth" icon={ShieldCheck} defaultExpanded>
+          <PropertyList>
+            {config.address && <Property label="Address" value={config.address} />}
+            {config.trustForwardHeader !== undefined && <Property label="Trust forward header" value={String(config.trustForwardHeader)} />}
+            {Array.isArray(config.authResponseHeaders) && config.authResponseHeaders.length > 0 && (
+              <Property label="Auth response headers" value={config.authResponseHeaders.join(', ')} />
+            )}
+            {config.authResponseHeadersRegex && <Property label="Headers regex" value={config.authResponseHeadersRegex} />}
+            {config.tls?.caSecret && (
+              <Property label="CA secret" value={
+                <ResourceLink name={config.tls.caSecret} kind="secrets" namespace={ns} onNavigate={onNavigate} />
+              } />
+            )}
+          </PropertyList>
+        </Section>
+      ) : isErrors ? (
+        <Section title="Errors" defaultExpanded>
+          <PropertyList>
+            {config.status && <Property label="Status" value={Array.isArray(config.status) ? config.status.join(', ') : String(config.status)} />}
+            {config.service?.name && (
+              <Property label="Service" value={
+                <ResourceLink name={config.service.name} kind="services" namespace={config.service.namespace || ns} onNavigate={onNavigate} />
+              } />
+            )}
+            {config.query && <Property label="Query" value={config.query} />}
+          </PropertyList>
+        </Section>
+      ) : (
+        <Section title="Configuration" defaultExpanded>
+          <PropertyList>
+            <ConfigProperties config={config} />
+          </PropertyList>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,84 @@
+import { ArrowRightLeft } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+
+interface TraefikServersTransportRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+// Covers ServersTransport (HTTP) and ServersTransportTCP — overlapping shapes;
+// fields absent on one kind simply don't render.
+export function TraefikServersTransportRenderer({ data, onNavigate }: TraefikServersTransportRendererProps) {
+  const spec = data.spec || {}
+  const ns = data.metadata?.namespace || ''
+  const kindLabel = data.kind || 'ServersTransport'
+  const insecure = !!spec.insecureSkipVerify
+  const rootCAs: any[] = spec.rootCAsSecrets || []
+  const certs: any[] = spec.certificatesSecrets || []
+  const timeouts = spec.forwardingTimeouts
+
+  return (
+    <>
+      {insecure && (
+        <AlertBanner
+          variant="warning"
+          title="TLS verification disabled"
+          message="insecureSkipVerify is enabled — Traefik will not validate the upstream's certificate. Connections to the backend are vulnerable to interception."
+        />
+      )}
+
+      <Section title={kindLabel} icon={ArrowRightLeft} defaultExpanded>
+        <PropertyList>
+          {spec.serverName && <Property label="Server Name (SNI)" value={spec.serverName} />}
+          <Property
+            label="Insecure Skip Verify"
+            value={<span className={insecure ? 'text-orange-400' : undefined}>{String(insecure)}</span>}
+          />
+          {spec.peerCertURI && <Property label="Peer Cert URI" value={spec.peerCertURI} />}
+          {spec.maxIdleConnsPerHost !== undefined && <Property label="Max Idle Conns / Host" value={String(spec.maxIdleConnsPerHost)} />}
+          {spec.disableHTTP2 !== undefined && <Property label="Disable HTTP/2" value={String(spec.disableHTTP2)} />}
+          {spec.terminationDelay !== undefined && <Property label="Termination Delay" value={String(spec.terminationDelay)} />}
+        </PropertyList>
+      </Section>
+
+      {(rootCAs.length > 0 || certs.length > 0) && (
+        <Section title="Certificates" defaultExpanded>
+          <PropertyList>
+            {rootCAs.length > 0 && (
+              <Property label="Root CA Secrets" value={
+                <div className="flex flex-wrap gap-1">
+                  {rootCAs.map((s: any, i: number) => {
+                    const name = typeof s === 'string' ? s : s?.secret || s?.name
+                    return name ? <ResourceLink key={i} name={name} kind="secrets" namespace={ns} onNavigate={onNavigate} /> : null
+                  })}
+                </div>
+              } />
+            )}
+            {certs.length > 0 && (
+              <Property label="Client Cert Secrets" value={
+                <div className="flex flex-wrap gap-1">
+                  {certs.map((s: any, i: number) => {
+                    const name = typeof s === 'string' ? s : s?.secret || s?.name
+                    return name ? <ResourceLink key={i} name={name} kind="secrets" namespace={ns} onNavigate={onNavigate} /> : null
+                  })}
+                </div>
+              } />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {timeouts && (
+        <Section title="Forwarding Timeouts">
+          <PropertyList>
+            {timeouts.dialTimeout !== undefined && <Property label="Dial" value={String(timeouts.dialTimeout)} />}
+            {timeouts.responseHeaderTimeout !== undefined && <Property label="Response Header" value={String(timeouts.responseHeaderTimeout)} />}
+            {timeouts.idleConnTimeout !== undefined && <Property label="Idle Conn" value={String(timeouts.idleConnTimeout)} />}
+            {timeouts.readIdleTimeout !== undefined && <Property label="Read Idle" value={String(timeouts.readIdleTimeout)} />}
+            {timeouts.pingTimeout !== undefined && <Property label="Ping" value={String(timeouts.pingTimeout)} />}
+          </PropertyList>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,118 @@
+import { Split, Copy } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Badge } from '../../ui/Badge'
+import { getTraefikServiceType } from '../resource-utils-traefik'
+
+interface TraefikServiceRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+function ServiceRow({ svc, ns, weightPct, onNavigate }: {
+  svc: any
+  ns: string
+  weightPct?: number
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}) {
+  const isTraefik = svc.kind === 'TraefikService'
+  const port = svc.port ? `:${svc.port}` : ''
+  return (
+    <div className="flex items-center gap-2 text-xs">
+      {isTraefik && <Badge kind="TraefikService" size="sm">TraefikService</Badge>}
+      <ResourceLink
+        name={svc.name}
+        kind={isTraefik ? 'traefikservices' : 'services'}
+        namespace={svc.namespace || ns}
+        label={<span className="text-blue-400">{svc.name}{port}</span>}
+        onNavigate={onNavigate}
+      />
+      {weightPct !== undefined && (
+        <div className="flex items-center gap-1.5 ml-auto">
+          <div className="w-20 h-1.5 bg-theme-hover rounded-full overflow-hidden">
+            <div className="h-full bg-skyhook-500" style={{ width: `${Math.min(100, weightPct)}%` }} />
+          </div>
+          <span className="text-theme-text-tertiary tabular-nums w-10 text-right">{weightPct.toFixed(0)}%</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function TraefikServiceRenderer({ data, onNavigate }: TraefikServiceRendererProps) {
+  const spec = data.spec || {}
+  const ns = data.metadata?.namespace || ''
+  const type = getTraefikServiceType(data)
+
+  const weighted = spec.weighted?.services || []
+  const totalWeight = weighted.reduce((sum: number, s: any) => sum + (typeof s.weight === 'number' ? s.weight : 0), 0)
+  const mirroring = spec.mirroring
+  const hrw = spec.highestRandomWeight?.services || []
+
+  const noBackends = weighted.length === 0 && !mirroring && hrw.length === 0
+
+  return (
+    <>
+      {noBackends && (
+        <AlertBanner variant="warning" title="No backend services" message="This TraefikService defines no weighted, mirroring, or HRW backends." />
+      )}
+
+      <Section title="TraefikService" icon={Split} defaultExpanded>
+        <PropertyList>
+          <Property label="Type" value={type} />
+        </PropertyList>
+      </Section>
+
+      {weighted.length > 0 && (
+        <Section title={`Weighted Services (${weighted.length})`} defaultExpanded>
+          <div className="space-y-1.5">
+            {weighted.map((s: any, i: number) => (
+              <ServiceRow
+                key={i}
+                svc={s}
+                ns={ns}
+                weightPct={typeof s.weight === 'number' && totalWeight > 0 ? (s.weight / totalWeight) * 100 : undefined}
+                onNavigate={onNavigate}
+              />
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {mirroring && (
+        <Section title="Mirroring" icon={Copy} defaultExpanded>
+          <div className="space-y-2">
+            <div>
+              <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-1">Primary</div>
+              <ServiceRow svc={mirroring} ns={ns} onNavigate={onNavigate} />
+            </div>
+            {(mirroring.mirrors || []).length > 0 && (
+              <div>
+                <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-1">Mirrors</div>
+                <div className="space-y-1">
+                  {mirroring.mirrors.map((m: any, i: number) => (
+                    <div key={i} className="flex items-center gap-2 text-xs">
+                      <ServiceRow svc={m} ns={ns} onNavigate={onNavigate} />
+                      {m.percent !== undefined && (
+                        <span className="text-theme-text-tertiary">{m.percent}%</span>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </Section>
+      )}
+
+      {hrw.length > 0 && (
+        <Section title={`Highest Random Weight (${hrw.length})`} defaultExpanded>
+          <div className="space-y-1">
+            {hrw.map((s: any, i: number) => (
+              <ServiceRow key={i} svc={s} ns={ns} onNavigate={onNavigate} />
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}