@skyhook-io/k8s-ui 1.7.9 → 1.7.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.7.9",
+  "version": "1.7.11",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/gitops/GitOpsTableView.tsx

@@ -201,6 +201,14 @@ export interface GitOpsTableViewProps {
   // detected" copy. Hub passes "No GitOps resources across the fleet".
   emptyStateTitle?: string
   emptyStateBody?: string
+  /**
+   * Which side the filter rail sits on. Default 'left' (OSS Radar, which
+   * has no app sidebar). A host with its own left navigation rail (the
+   * Cloud hub) passes 'right' so the GitOps filters don't stack a second
+   * column against that nav and instead match the host's other faceted
+   * pages. Mobile stacking (filters above the table) is unaffected.
+   */
+  filtersSide?: 'left' | 'right'
   /**
    * Global namespace pick from the host's NamespaceSwitcher. Used to
    * surface "viewing in namespace: X" context and to power the Clear
@@ -249,6 +257,7 @@ export function GitOpsTableView({
   onClearNamespaces,
   onRowAction,
   pendingRowActions,
+  filtersSide = 'left',
 }: GitOpsTableViewProps) {
   const searchInputRef = useRef<HTMLInputElement>(null)
   const [mode, setMode] = useState<GitOpsMode>('applications')
@@ -492,8 +501,13 @@ export function GitOpsTableView({
   ]
 
   return (
-    <div className="flex h-full min-w-0 flex-1 overflow-hidden bg-theme-base max-lg:flex-col">
+    <div
+      className={`flex h-full min-w-0 flex-1 overflow-hidden bg-theme-base max-lg:flex-col ${
+        filtersSide === 'right' ? 'lg:flex-row-reverse' : ''
+      }`}
+    >
       <GitOpsFilterSidebar
+        side={filtersSide}
         mode={mode}
         onModeChange={setMode}
         modeCounts={modeCounts}
@@ -707,6 +721,7 @@ export function GitOpsTableView({
 // =============================================================================
 
 function GitOpsFilterSidebar({
+  side,
   mode,
   onModeChange,
   modeCounts,
@@ -729,6 +744,7 @@ function GitOpsFilterSidebar({
   onToggleNamespace,
   onClear,
 }: {
+  side: 'left' | 'right'
   mode: GitOpsMode
   onModeChange: (mode: GitOpsMode) => void
   modeCounts: Record<GitOpsMode, number>
@@ -752,7 +768,11 @@ function GitOpsFilterSidebar({
   onClear: () => void
 }) {
   return (
-    <aside className="flex w-72 shrink-0 flex-col overflow-hidden border-r border-theme-border bg-theme-surface/90 max-lg:max-h-72 max-lg:w-full max-lg:border-b max-lg:border-r-0">
+    <aside
+      className={`flex w-72 shrink-0 flex-col overflow-hidden border-theme-border bg-theme-surface/90 max-lg:max-h-72 max-lg:w-full max-lg:border-b ${
+        side === 'right' ? 'border-l max-lg:border-l-0' : 'border-r max-lg:border-r-0'
+      }`}
+    >
       <div className="flex items-center justify-between border-b border-theme-border px-3 py-2">
         <span className="text-sm font-medium text-theme-text-secondary">GitOps Filters</span>
         <button type="button" onClick={onClear} className="text-[10px] font-medium text-blue-500 hover:text-blue-400">

package/src/components/issues/IssuesView.tsx

@@ -215,6 +215,7 @@ function IssueRow({
             <div className="border-t border-theme-border bg-theme-base/40 px-4 py-4 pl-11">
               <div className="flex flex-col gap-4">
                 <Diagnosis issue={issue} />
+                <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} />
                 <div className="border-t border-theme-border/70 pt-3">
                   <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} />
                 </div>
@@ -249,6 +250,11 @@ function Diagnosis({ issue }: { issue: Issue }) {
           error) — so the precise message is never lost, just de-emphasized. */}
       {detail ? <p className="break-words font-mono text-xs leading-relaxed text-theme-text-tertiary">{detail}</p> : null}
       {crash ? <p className="text-xs text-theme-text-tertiary tabular-nums">{crash}</p> : null}
+      {issue.change_context ? (
+        <p className="text-xs text-theme-text-tertiary">
+          {changeContextText(issue.change_context)}
+        </p>
+      ) : null}
       {issue.first_seen ? (
         <p className="text-xs text-theme-text-tertiary tabular-nums">
           Started {formatRelativeAgeTime(issue.first_seen)}
@@ -259,6 +265,105 @@ function Diagnosis({ issue }: { issue: Issue }) {
   );
 }
 
+function changeContextText(change: NonNullable<Issue['change_context']>): string {
+  const parts = [change.when ? `Changed ${change.when} ago` : 'Changed', change.what ? change.what.replace(/_/g, ' ') : null, change.evidence].filter(Boolean);
+  return parts.join(' · ');
+}
+
+function DiagnosticContext({
+  issue,
+  resourceHref,
+  onResourceClick,
+}: {
+  issue: Issue;
+  resourceHref?: (ref: IssueResourceRef) => string;
+  onResourceClick?: (ref: IssueResourceRef) => void;
+}) {
+  const ctx = issue.diagnostic_context;
+  const facts = ctx?.facts?.filter((fact) => fact.message || fact.refs?.length || fact.related_issues?.length) ?? [];
+  if (!ctx || facts.length === 0) return null;
+
+  return (
+    <section className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Context</h4>
+        {ctx.role ? <span className="badge-sm text-[10px] text-theme-text-secondary">{diagnosticRoleLabel(ctx.role)}</span> : null}
+      </div>
+      <ul className="flex flex-col gap-2">
+        {facts.map((fact, idx) => (
+          <li key={`${fact.type}-${idx}`} className="flex flex-col gap-1.5 rounded-md border border-theme-border/70 px-2.5 py-2">
+            <div className="flex min-w-0 items-baseline gap-2">
+              <span className="shrink-0 text-xs font-medium text-theme-text-secondary">{diagnosticFactLabel(fact.type)}</span>
+              {fact.message ? <span className="min-w-0 break-words text-xs leading-relaxed text-theme-text-tertiary">{fact.message}</span> : null}
+            </div>
+            {fact.related_issues?.length ? (
+              <ul className="flex flex-col gap-px">
+                {fact.related_issues.map((related, relIdx) => (
+                  <ResourceLine
+                    key={`${related.ref.group ?? ''}/${related.ref.kind}/${related.ref.namespace ?? ''}/${related.ref.name}#${relIdx}`}
+                    label="Related"
+                    refForLink={memberRef(issue, related.ref)}
+                    resourceHref={resourceHref}
+                    onResourceClick={onResourceClick}
+                  />
+                ))}
+              </ul>
+            ) : null}
+            {fact.refs?.length ? (
+              <ul className="flex flex-col gap-px">
+                {fact.refs.map((ref, refIdx) => (
+                  <ResourceLine
+                    key={`${ref.group ?? ''}/${ref.kind}/${ref.namespace ?? ''}/${ref.name}#${refIdx}`}
+                    refForLink={memberRef(issue, ref)}
+                    resourceHref={resourceHref}
+                    onResourceClick={onResourceClick}
+                  />
+                ))}
+              </ul>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function diagnosticRoleLabel(role: string): string {
+  switch (role) {
+    case 'candidate':
+      return 'Candidate signal';
+    case 'affected':
+      return 'Affected signal';
+    case 'rollup':
+      return 'Rollup';
+    default:
+      return 'Context';
+  }
+}
+
+function diagnosticFactLabel(type: string): string {
+  switch (type) {
+    case 'explicit_reference':
+      return 'Explicit reference';
+    case 'owner_rollup':
+      return 'Owner rollup';
+    case 'selected_backend_issue':
+      return 'Selected backend';
+    case 'service_config_mismatch':
+      return 'Service config';
+    case 'service_env_reference':
+      return 'Service env';
+    case 'probe_target_mismatch':
+      return 'Probe target';
+    case 'blocked_init_container':
+      return 'Init container';
+    case 'restart_cause':
+      return 'Restart cause';
+    default:
+      return type.replace(/_/g, ' ');
+  }
+}
+
 // Native-tooltip detail for the collapsed-row age chip: absolute onset + last-seen
 // freshness, the two facts the compact "2h" hides.
 function ageTitle(issue: Issue): string {

package/src/components/issues/index.ts

@@ -11,7 +11,7 @@ export {
   subjectRef,
   memberRef,
 } from './types';
-export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef } from './types';
+export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueChangeContext } from './types';
 export {
   ISSUE_SEVERITY_LABEL,
   ISSUE_SEVERITY_BADGE_CLASS,

package/src/components/issues/types.ts

@@ -57,6 +57,34 @@ export interface IssueAffected {
   nodes?: number;
 }
 
+export type IssueDiagnosticRole = 'candidate' | 'affected' | 'rollup' | 'context';
+
+export interface IssueDiagnosticIssueRef {
+  ref: IssueResourceRef;
+  reason?: string;
+  category?: string;
+  severity?: IssueSeverity;
+}
+
+export interface IssueDiagnosticFact {
+  type: string;
+  message?: string;
+  refs?: IssueResourceRef[];
+  related_issues?: IssueDiagnosticIssueRef[];
+}
+
+export interface IssueDiagnosticContext {
+  role?: IssueDiagnosticRole;
+  facts?: IssueDiagnosticFact[];
+}
+
+export interface IssueChangeContext {
+  changed: boolean;
+  what?: string;
+  when?: string;
+  evidence?: string;
+}
+
 /**
  * A grouped live issue — one row of the triage queue. Subject (kind/group/
  * namespace/name) is the topmost owner when the rows folded under a workload,
@@ -98,8 +126,11 @@ export interface Issue {
   count?: number;
 
   affected?: IssueAffected;
+  owner?: IssueResourceRef;
   members?: IssueResourceRef[];
   members_truncated?: boolean;
+  diagnostic_context?: IssueDiagnosticContext;
+  change_context?: IssueChangeContext;
 
   // Pod crash context carried from the representative member.
   restart_count?: number;

package/src/components/resources/ResourcesView.tsx

@@ -310,6 +310,16 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'externalIP', label: 'External', width: 'w-40', hideOnMobile: true },
     { key: 'age', label: 'Age', width: 'w-24' },
   ],
+  endpointslices: [
+    { key: 'name', label: 'Name' },
+    { key: 'namespace', label: 'Namespace', width: 'w-48' },
+    { key: 'service', label: 'Service', width: 'w-48' },
+    { key: 'addressType', label: 'Address Type', width: 'w-28' },
+    { key: 'endpoints', label: 'Endpoints', width: 'w-32' },
+    { key: 'addresses', label: 'Addresses', width: 'w-24' },
+    { key: 'ports', label: 'Ports', width: 'w-40', hideOnMobile: true },
+    { key: 'age', label: 'Age', width: 'w-24' },
+  ],
   ingresses: [
     { key: 'name', label: 'Name', width: 'min-w-40' },
     { key: 'namespace', label: 'Namespace', width: 'w-36 shrink-0' },
@@ -4509,6 +4519,8 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
       return <ReplicaSetCell resource={resource} column={column} />
     case 'services':
       return <ServiceCell resource={resource} column={column} />
+    case 'endpointslices':
+      return <EndpointSliceCell resource={resource} column={column} />
     case 'ingresses':
       return <IngressCell resource={resource} column={column} />
     case 'configmaps':
@@ -5333,6 +5345,56 @@ function ServiceCell({ resource, column }: { resource: any; column: string }) {
   }
 }
 
+function getEndpointSliceReadyCount(resource: any): number {
+  return (resource.endpoints || []).filter((endpoint: any) => endpoint?.conditions?.ready !== false).length
+}
+
+function getEndpointSliceAddressCount(resource: any): number {
+  return (resource.endpoints || []).reduce((total: number, endpoint: any) => total + (endpoint.addresses?.length || 0), 0)
+}
+
+function getEndpointSlicePorts(resource: any): string {
+  const ports = resource.ports || []
+  if (ports.length === 0) return '-'
+  return ports.map((port: any) => {
+    const name = port.name || 'unnamed'
+    const protocol = port.protocol || 'TCP'
+    return `${name}:${port.port ?? '-'}${protocol !== 'TCP' ? `/${protocol}` : ''}`
+  }).join(', ')
+}
+
+function EndpointSliceCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'service': {
+      const service = resource.metadata?.labels?.['kubernetes.io/service-name']
+      return <span className="text-sm text-theme-text-secondary truncate">{service || '-'}</span>
+    }
+    case 'addressType':
+      return <span className="text-sm text-theme-text-secondary">{resource.addressType || '-'}</span>
+    case 'endpoints': {
+      const total = resource.endpoints?.length || 0
+      const ready = getEndpointSliceReadyCount(resource)
+      const color = total === 0 ? SEVERITY_BADGE.neutral :
+        ready === total ? SEVERITY_BADGE.success :
+        ready > 0 ? SEVERITY_BADGE.warning :
+        SEVERITY_BADGE.error
+      return <span className={clsx('badge', color)}>{ready}/{total}</span>
+    }
+    case 'addresses':
+      return <span className="text-sm text-theme-text-secondary">{getEndpointSliceAddressCount(resource)}</span>
+    case 'ports': {
+      const ports = getEndpointSlicePorts(resource)
+      return (
+        <Tooltip content={ports}>
+          <span className="text-sm text-theme-text-secondary truncate">{ports}</span>
+        </Tooltip>
+      )
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}
+
 function IngressCell({ resource, column }: { resource: any; column: string }) {
   switch (column) {
     case 'class': {

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

@@ -0,0 +1,141 @@
+import { Radio, Server, Waypoints } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import type { ResourceRef } from '../../../types'
+
+interface EndpointSliceRendererProps {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}
+
+function isEndpointReady(endpoint: any): boolean {
+  return endpoint?.conditions?.ready !== false
+}
+
+function endpointAddressCount(endpoints: any[]): number {
+  return endpoints.reduce((total, endpoint) => total + (endpoint.addresses?.length || 0), 0)
+}
+
+function endpointTargetLabel(endpoint: any): string | null {
+  const target = endpoint.targetRef
+  if (!target?.kind || !target?.name) return null
+  return target.namespace ? `${target.kind} ${target.namespace}/${target.name}` : `${target.kind} ${target.name}`
+}
+
+export function EndpointSliceRenderer({ data, onNavigate }: EndpointSliceRendererProps) {
+  const metadata = data.metadata || {}
+  const labels = metadata.labels || {}
+  const endpoints = data.endpoints || []
+  const ports = data.ports || []
+  const serviceName = labels['kubernetes.io/service-name']
+  const readyCount = endpoints.filter(isEndpointReady).length
+  const addresses = endpointAddressCount(endpoints)
+
+  return (
+    <>
+      <Section title="EndpointSlice" icon={Radio}>
+        <PropertyList>
+          <Property label="Address Type" value={data.addressType || '-'} />
+          <Property label="Endpoints" value={`${readyCount}/${endpoints.length} ready`} />
+          <Property label="Addresses" value={addresses} />
+          <Property label="Ports" value={ports.length} />
+          {serviceName && (
+            <Property
+              label="Service"
+              value={onNavigate ? (
+                <button
+                  type="button"
+                  className="text-sm text-accent-text hover:underline font-medium"
+                  onClick={() => onNavigate({ kind: 'Service', namespace: metadata.namespace, name: serviceName })}
+                >
+                  {serviceName}
+                </button>
+              ) : serviceName}
+            />
+          )}
+        </PropertyList>
+      </Section>
+
+      {ports.length > 0 && (
+        <Section title="Ports" icon={Waypoints}>
+          <div className="space-y-2">
+            {ports.map((port: any, index: number) => (
+              <div key={`${port.name || 'port'}-${port.port || index}-${port.protocol || 'TCP'}`} className="card-inner text-sm">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <div className="font-medium text-theme-text-primary truncate">{port.name || `port-${index + 1}`}</div>
+                    {port.appProtocol && (
+                      <div className="text-xs text-theme-text-tertiary mt-0.5">{port.appProtocol}</div>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 shrink-0">
+                    <span className="badge-sm bg-theme-elevated text-theme-text-secondary border border-theme-border">{port.protocol || 'TCP'}</span>
+                    <span className="font-mono text-theme-text-secondary">{port.port ?? '-'}</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {endpoints.length > 0 && (
+        <Section title="Endpoints" icon={Server}>
+          <div className="space-y-2">
+            {endpoints.map((endpoint: any, index: number) => {
+              const ready = isEndpointReady(endpoint)
+              const targetLabel = endpointTargetLabel(endpoint)
+              const target = endpoint.targetRef
+              return (
+                <div key={`${endpoint.addresses?.join(',') || 'endpoint'}-${index}`} className="card-inner text-sm space-y-3">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0 space-y-1">
+                      <div className="flex flex-wrap items-center gap-1.5">
+                        {(endpoint.addresses || []).map((address: string) => (
+                          <span key={address} className="badge-sm bg-theme-elevated text-theme-text-primary border border-theme-border font-mono">
+                            {address}
+                          </span>
+                        ))}
+                      </div>
+                      {targetLabel && (
+                        <button
+                          type="button"
+                          className="text-xs text-theme-text-secondary hover:text-accent-text"
+                          disabled={!onNavigate}
+                          onClick={() => onNavigate?.({
+                            kind: target.kind,
+                            namespace: target.namespace || metadata.namespace,
+                            name: target.name,
+                          })}
+                        >
+                          {targetLabel}
+                        </button>
+                      )}
+                    </div>
+                    <div className="flex flex-wrap justify-end gap-1.5 shrink-0">
+                      <span className={clsx('badge-sm', ready ? 'status-healthy' : 'status-unhealthy')}>
+                        {ready ? 'Ready' : 'Not Ready'}
+                      </span>
+                      {endpoint.conditions?.serving === false && (
+                        <span className="badge-sm status-degraded">Not Serving</span>
+                      )}
+                      {endpoint.conditions?.terminating === true && (
+                        <span className="badge-sm status-alert">Terminating</span>
+                      )}
+                    </div>
+                  </div>
+                  {(endpoint.nodeName || endpoint.zone) && (
+                    <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-theme-text-tertiary">
+                      {endpoint.nodeName && <span>Node: {endpoint.nodeName}</span>}
+                      {endpoint.zone && <span>Zone: {endpoint.zone}</span>}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -1,15 +1,34 @@
 import { type ReactNode } from 'react'
-import { Globe, Clock } from 'lucide-react'
+import { Globe, Clock, Radio } from 'lucide-react'
 import { Section, PropertyList, Property, KeyValueBadgeList, CopyHandler, AlertBanner } from '../../ui/drawer-components'
+import type { ResourceRef } from '../../../types'
 
 interface ServiceRendererProps {
   data: any
   onCopy: CopyHandler
   copied: string | null
+  endpointSlices?: any[]
+  endpointSlicesLoading?: boolean
+  onNavigate?: (ref: ResourceRef) => void
   renderPortAction?: (props: { namespace: string; serviceName: string; port: number; protocol: string }) => ReactNode
 }
 
-export function ServiceRenderer({ data, onCopy, copied, renderPortAction }: ServiceRendererProps) {
+function endpointSliceAddressCount(slice: any): number {
+  return (slice.endpoints || []).reduce((total: number, endpoint: any) => total + (endpoint.addresses?.length || 0), 0)
+}
+
+function endpointSliceReadyCount(slice: any): number {
+  return (slice.endpoints || []).filter((endpoint: any) => endpoint?.conditions?.ready !== false).length
+}
+
+function endpointSliceReadyClass(ready: number, total: number): string {
+  if (total === 0) return 'status-unknown'
+  if (ready === total) return 'status-healthy'
+  if (ready > 0) return 'status-degraded'
+  return 'status-unhealthy'
+}
+
+export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpointSlicesLoading, onNavigate, renderPortAction }: ServiceRendererProps) {
   const spec = data.spec || {}
   const ports = spec.ports || []
   const lbIngress = data.status?.loadBalancer?.ingress || []
@@ -105,6 +124,49 @@ export function ServiceRenderer({ data, onCopy, copied, renderPortAction }: Serv
           <KeyValueBadgeList items={spec.selector} />
         </Section>
       )}
+
+      {hasNoSelector && !isExternalName && (
+        <Section title="EndpointSlices" icon={Radio}>
+          {endpointSlicesLoading ? (
+            <div className="text-sm text-theme-text-tertiary">Loading EndpointSlices...</div>
+          ) : endpointSlices && endpointSlices.length > 0 ? (
+            <div className="space-y-2">
+              {endpointSlices.map((slice: any) => {
+                const sliceName = slice.metadata?.name
+                const endpoints = slice.endpoints || []
+                const ready = endpointSliceReadyCount(slice)
+                const addresses = endpointSliceAddressCount(slice)
+                return (
+                  <button
+                    key={slice.metadata?.uid || sliceName}
+                    type="button"
+                    className="card-inner w-full text-left hover:bg-theme-hover transition-colors"
+                    onClick={() => onNavigate?.({
+                      kind: 'EndpointSlice',
+                      group: 'discovery.k8s.io',
+                      namespace,
+                      name: sliceName,
+                    })}
+                  >
+                    <div className="flex items-center justify-between gap-3">
+                      <div className="min-w-0">
+                        <div className="text-sm font-medium text-theme-text-primary truncate">{sliceName}</div>
+                        <div className="text-xs text-theme-text-tertiary mt-0.5">{slice.addressType || 'Unknown'} address type</div>
+                      </div>
+                      <div className="flex flex-wrap items-center justify-end gap-1.5 shrink-0">
+                        <span className={`badge-sm ${endpointSliceReadyClass(ready, endpoints.length)}`}>{ready}/{endpoints.length} ready</span>
+                        <span className="badge-sm bg-theme-elevated text-theme-text-secondary border border-theme-border">{addresses} addresses</span>
+                      </div>
+                    </div>
+                  </button>
+                )
+              })}
+            </div>
+          ) : (
+            <div className="text-sm text-theme-text-tertiary">No EndpointSlices found for this Service.</div>
+          )}
+        </Section>
+      )}
     </>
   )
 }

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

@@ -25,6 +25,7 @@ export * from './ConfigMapRenderer'
 export * from './CronJobRenderer'
 export * from './eso-cells'
 export * from './EventRenderer'
+export * from './EndpointSliceRenderer'
 export * from './ExposedSecretReportRenderer'
 export * from './ExternalSecretRenderer'
 export * from './flux-cells'

package/src/components/shared/CreateResourceDialog.tsx

@@ -18,7 +18,7 @@ export interface CreateResourceDialogProps {
   initialYaml?: string
   title?: string
   // Injected by platform (decouples from data-fetching hooks)
-  onApply: (params: { yaml: string; mode: 'apply' | 'create'; dryRun: boolean }) => Promise<ApplyResult[]>
+  onApply: (params: { yaml: string; mode: 'apply' | 'create'; dryRun: boolean; force: boolean }) => Promise<ApplyResult[]>
   isApplying: boolean
   /** Called after a successful non-dry-run apply with the first created resource */
   onCreated?: (result: ApplyResult) => void
@@ -28,6 +28,7 @@ export function CreateResourceDialog({ open, onClose, initialYaml = '', title, o
   const [yaml, setYaml] = useState(initialYaml)
   const [mode, setMode] = useState<'apply' | 'create'>('apply')
   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)
@@ -38,6 +39,7 @@ export function CreateResourceDialog({ open, onClose, initialYaml = '', title, o
       setYaml(initialYaml)
       setMode('apply')
       setDryRun(false)
+      setForce(false)
       setError(null)
       setSuccess(null)
     }
@@ -64,7 +66,7 @@ export function CreateResourceDialog({ open, onClose, initialYaml = '', title, o
     setSuccess(null)
 
     try {
-      const results = await onApply({ yaml, mode, dryRun })
+      const results = await onApply({ yaml, mode, dryRun, force: mode === 'apply' && force })
       const action = mode === 'create' ? 'Created' : 'Applied'
       const dryRunLabel = dryRun ? ' (dry run)' : ''
 
@@ -87,7 +89,7 @@ export function CreateResourceDialog({ open, onClose, initialYaml = '', title, o
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Unknown error')
     }
-  }, [yaml, mode, dryRun, onApply, onCreated, handleClose])
+  }, [yaml, mode, dryRun, force, onApply, onCreated, handleClose])
 
   const dialogTitle = title || 'Create Resource'
   const submitLabel = mode === 'create' ? 'Create' : 'Apply'
@@ -171,6 +173,33 @@ export function CreateResourceDialog({ open, onClose, initialYaml = '', title, o
             Dry run
           </label>
           </Tooltip>
+
+          {/* Force checkbox — only meaningful for server-side apply */}
+          <Tooltip
+            content={
+              <div className="space-y-1.5 max-w-[19rem]">
+                <p>Override field ownership (server-side apply).</p>
+                <p>
+                  <span className="font-medium text-theme-text-primary">Off (default):</span> if a field is owned by Helm/Flux/Argo/kubectl, the whole apply is rejected with a conflict instead of overwriting.
+                </p>
+                <p>
+                  <span className="font-medium text-theme-text-primary">On:</span> your manifest overwrites those fields — but an active controller may reconcile them back on its next sync.
+                </p>
+              </div>
+            }
+            position="bottom"
+          >
+            <label className={`flex items-center gap-1.5 text-xs cursor-pointer ${mode === 'apply' ? 'text-theme-text-secondary' : 'text-theme-text-tertiary cursor-not-allowed'}`}>
+            <input
+              type="checkbox"
+              checked={mode === 'apply' && force}
+              disabled={mode !== 'apply'}
+              onChange={(e) => setForce(e.target.checked)}
+              className="w-3.5 h-3.5 rounded border-theme-border bg-theme-base"
+            />
+            Force
+          </label>
+          </Tooltip>
         </div>
 
         <div className="flex items-center gap-2">

package/src/components/shared/EditableYamlView.tsx

@@ -114,7 +114,7 @@ interface EditableYamlViewProps {
   /** Called after a successful save so the parent can refetch */
   onSaved?: () => void
   /** Save handler — injected by the platform wrapper */
-  onSave?: (params: { kind: string; namespace: string; name: string; yaml: string }) => Promise<void>
+  onSave?: (params: { kind: string; namespace: string; name: string; yaml: string; force: boolean }) => Promise<void>
   /** Whether a save is in progress */
   isSaving?: boolean
   /** Error message from the last save attempt */
@@ -139,6 +139,9 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
   const [editedYaml, setEditedYaml] = useState(savedDraft.current ?? '')
   const [yamlErrors, setYamlErrors] = useState<string[]>([])
   const [showErrorDetails, setShowErrorDetails] = useState(false)
+  // Default on: the editor resubmits the full live manifest, so an unforced
+  // save would conflict on every field owned by Helm/Flux/Argo/a controller.
+  const [force, setForce] = useState(true)
 
   // Clean up restored draft flag
   useEffect(() => {
@@ -187,6 +190,7 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
         namespace: resource.namespace,
         name: resource.name,
         yaml: editedYaml,
+        force,
       })
       setIsEditing(false)
       setEditedYaml('')
@@ -194,7 +198,7 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
     } catch {
       // Error handled by caller via saveError prop
     }
-  }, [onSave, resource, editedYaml, yamlErrors, onSaved])
+  }, [onSave, resource, editedYaml, yamlErrors, onSaved, force])
 
   const handleYamlValidate = useCallback((_isValid: boolean, errors: string[]) => {
     setYamlErrors(errors)
@@ -222,6 +226,31 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
               <XCircle className="w-3.5 h-3.5" />
               Cancel
             </button>
+            <Tooltip
+              content={
+                <div className="space-y-1.5 max-w-[19rem]">
+                  <p>Override field ownership (server-side apply).</p>
+                  <p>
+                    <span className="font-medium text-theme-text-primary">On (default):</span> your edits overwrite fields owned by Helm/Flux/Argo/kubectl — but an active controller may reconcile them back on its next sync.
+                  </p>
+                  <p>
+                    <span className="font-medium text-theme-text-primary">Off:</span> if another manager owns a field you changed, the whole save is rejected with a conflict (nothing is applied).
+                  </p>
+                </div>
+              }
+              position="bottom"
+            >
+              <label className="flex items-center gap-1.5 text-xs text-theme-text-secondary cursor-pointer select-none">
+                <input
+                  type="checkbox"
+                  checked={force}
+                  disabled={isPending}
+                  onChange={(e) => setForce(e.target.checked)}
+                  className="w-3.5 h-3.5 rounded border-theme-border bg-theme-base"
+                />
+                Force
+              </label>
+            </Tooltip>
             <button
               onClick={handleSaveEdit}
               disabled={isPending || yamlErrors.length > 0}

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -110,6 +110,7 @@ import {
   RoleBindingRenderer,
   WebhookConfigRenderer,
   EventRenderer,
+  EndpointSliceRenderer,
   GenericRenderer,
   GitRepositoryRenderer,
   OCIRepositoryRenderer,
@@ -242,6 +243,7 @@ export interface RendererOverrides {
   }>
   ServiceRenderer?: React.ComponentType<{
     data: any; onCopy: CopyHandler; copied: string | null
+    onNavigate?: (ref: ResourceRef) => void
   }>
   WorkloadRenderer?: React.ComponentType<{
     kind: string; data: any
@@ -299,7 +301,7 @@ export interface RendererOverrides {
 // Known resource types with specific renderers (module-level to avoid re-allocation)
 const KNOWN_KINDS = new Set([
   'pods', 'deployments', 'statefulsets', 'daemonsets', 'replicasets',
-  'services', 'ingresses', 'configmaps', 'secrets', 'jobs', 'cronjobs',
+  'services', 'endpointslices', 'ingresses', 'configmaps', 'secrets', 'jobs', 'cronjobs',
   'hpas', 'horizontalpodautoscalers', 'nodes', 'persistentvolumeclaims',
   'rollouts', 'certificates', 'workflows', 'persistentvolumes',
   'storageclasses', 'certificaterequests', 'clusterissuers', 'issuers',
@@ -494,7 +496,8 @@ export function ResourceRendererDispatch({
           />
         )}
         {kind === 'replicasets' && <ReplicaSetRenderer data={data} />}
-        {kind === 'services' && !data?.apiVersion?.includes('serving.knative.dev') && <ServiceComp data={data} onCopy={onCopy} copied={copied} />}
+        {kind === 'services' && !data?.apiVersion?.includes('serving.knative.dev') && <ServiceComp data={data} onCopy={onCopy} copied={copied} onNavigate={onNavigate} />}
+        {kind === 'endpointslices' && <EndpointSliceRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'ingresses' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <IngressRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'configmaps' && <ConfigMapRenderer data={data} />}
         {kind === 'secrets' && <SecretRenderer data={data} certificateInfo={certificateInfo} resourceData={data} onSaveSecretValue={onSaveSecretValue} isSaving={isSavingSecret} />}
@@ -697,6 +700,16 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
     }
     return getServiceStatus(data)
   }
+  if (k === 'endpointslices') {
+    const endpoints = data.endpoints || []
+    const ready = endpoints.filter((endpoint: any) => endpoint?.conditions?.ready !== false).length
+    const text = endpoints.length === 0 ? 'No endpoints' : `${ready}/${endpoints.length} ready`
+    const color = endpoints.length === 0 ? SEVERITY_BADGE.neutral :
+      ready === endpoints.length ? SEVERITY_BADGE.success :
+      ready > 0 ? SEVERITY_BADGE.warning :
+      SEVERITY_BADGE.error
+    return { text, color }
+  }
   if (k === 'jobs') return getJobStatus(data)
   if (k === 'cronjobs') return getCronJobStatus(data)
   if (k === 'hpas' || k === 'horizontalpodautoscalers') return getHPAStatus(data)

package/src/components/ui/Badge.tsx

@@ -54,6 +54,8 @@ const KIND: Record<string, string> = {
 
   // Networking
   Service:       'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  Endpoints:     'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
+  EndpointSlice: 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
   Internet:      'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
   Ingress:       'bg-violet-100 text-violet-700 border-violet-300 dark:bg-violet-950/50 dark:text-violet-400 dark:border-violet-700/40',
   Gateway:       'bg-violet-100 text-violet-700 border-violet-300 dark:bg-violet-950/50 dark:text-violet-400 dark:border-violet-700/40',

package/src/components/ui/MiddleEllipsis.tsx

@@ -64,8 +64,21 @@ export function MiddleEllipsis({ text, className, title, onTruncatedChange }: Mi
       // ctx.measureText says 173.4px and clientWidth rounds to 173 — the
       // integer comparison decides we don't fit and middle-truncates a
       // name that visually would have rendered fine.
-      const width = node.getBoundingClientRect().width
-      if (width <= 0) return
+      const rawWidth = node.getBoundingClientRect().width
+      if (rawWidth <= 0) return
+      // getBoundingClientRect() returns the *rendered* width, which a CSS
+      // transform on this node or any ancestor scales — e.g. the `scale()` in a
+      // menu/popup/dialog entry animation. Measuring during that animation
+      // compares a visually-shrunk container against unscaled canvas text
+      // (measureText is transform-independent) and middle-truncates a name that
+      // actually fits. Worse, a transform never changes the layout box, so the
+      // ResizeObserver below doesn't fire to re-measure once the animation
+      // settles — the wrong truncation then sticks. Divide out the cumulative
+      // ancestor scaleX to recover the unscaled (still subpixel) layout width.
+      // With no transform the scale is 1 and this is a no-op, so the just-fits
+      // subpixel precision noted above is preserved.
+      const scaleX = cumulativeScaleX(node)
+      const width = scaleX > 0 ? rawWidth / scaleX : rawWidth
       const cs = window.getComputedStyle(node)
       // Include fontStyle in the shorthand so italic faces measure correctly.
       // If the assignment ever silently fails (malformed family quoting,
@@ -128,6 +141,29 @@ export function MiddleEllipsis({ text, className, title, onTruncatedChange }: Mi
   )
 }
 
+// Cumulative horizontal scale applied to `el` by CSS transforms on it and its
+// ancestors. Used to convert a transform-scaled getBoundingClientRect() width
+// back to the unscaled layout width, so a `scale()` entry animation on an
+// ancestor (menu/popup/dialog) can't make text middle-truncate when it would
+// otherwise fit. Reads the computed transform matrix's scaleX (`a`) at each
+// level — exact for the scale()/translate() animations this guards against
+// (no rotation, where `a` would fold in cos θ). Returns 1 when nothing in the
+// chain is transformed, making the caller a no-op in the common case.
+function cumulativeScaleX(el: HTMLElement | null): number {
+  let scale = 1
+  for (let cur: HTMLElement | null = el; cur; cur = cur.parentElement) {
+    const t = window.getComputedStyle(cur).transform
+    if (t && t !== 'none') {
+      try {
+        scale *= new DOMMatrixReadOnly(t).a
+      } catch {
+        // Unparseable transform value — skip this level rather than throw.
+      }
+    }
+  }
+  return scale
+}
+
 // Binary-search the largest `n` such that `prefix(n) + … + suffix(n)` fits
 // in `width`. Symmetric on purpose — keeping prefix and suffix balanced is
 // the cheapest way to preserve the most identifying chars on both ends of

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

@@ -657,7 +657,7 @@ export function formatKindName(kind: string): string {
   const k = kind.toLowerCase()
   const names: Record<string, string> = {
     pods: 'Pod', deployments: 'Deployment', daemonsets: 'DaemonSet', statefulsets: 'StatefulSet',
-    replicasets: 'ReplicaSet', services: 'Service', ingresses: 'Ingress',
+    replicasets: 'ReplicaSet', services: 'Service', endpointslices: 'EndpointSlice', ingresses: 'Ingress',
     gateways: 'Gateway', httproutes: 'HTTPRoute', grpcroutes: 'GRPCRoute',
     tcproutes: 'TCPRoute', tlsroutes: 'TLSRoute', configmaps: 'ConfigMap',
     secrets: 'Secret', jobs: 'Job', cronjobs: 'CronJob', hpas: 'HPA',

package/src/utils/api-resources.ts

@@ -33,6 +33,7 @@ export const CORE_RESOURCES: APIResource[] = [
   { group: 'batch', version: 'v1', kind: 'CronJob', name: 'cronjobs', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: 'networking.k8s.io', version: 'v1', kind: 'Ingress', name: 'ingresses', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: 'networking.k8s.io', version: 'v1', kind: 'NetworkPolicy', name: 'networkpolicies', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'discovery.k8s.io', version: 'v1', kind: 'EndpointSlice', name: 'endpointslices', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: 'autoscaling', version: 'v2', kind: 'HorizontalPodAutoscaler', name: 'horizontalpodautoscalers', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: '', version: 'v1', kind: 'Event', name: 'events', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: 'rbac.authorization.k8s.io', version: 'v1', kind: 'Role', name: 'roles', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },

package/src/utils/navigation.test.ts

@@ -32,6 +32,11 @@ describe('kindToPlural', () => {
     expect(pluralToKind('endpoints')).toBe('Endpoints')
   })
 
+  test('handles EndpointSlice before discovery loads', () => {
+    expect(kindToPlural('EndpointSlice')).toBe('endpointslices')
+    expect(pluralToKind('endpointslices')).toBe('EndpointSlice')
+  })
+
   test('handles kinds ending in ss (Class-suffix)', () => {
     expect(kindToPlural('StorageClass')).toBe('storageclasses')
     expect(kindToPlural('IngressClass')).toBe('ingressclasses')

package/src/utils/navigation.ts

@@ -12,6 +12,7 @@ const BUILTIN_PLURAL_TO_KIND: Record<string, string> = {
   pods: 'Pod',
   services: 'Service',
   endpoints: 'Endpoints', // already-plural resource name; englishPlural would yield "endpointses"
+  endpointslices: 'EndpointSlice',
   deployments: 'Deployment',
   daemonsets: 'DaemonSet',
   statefulsets: 'StatefulSet',

package/src/utils/skeleton-yaml.ts

@@ -48,6 +48,25 @@ spec:
       targetPort: 80
   type: ClusterIP`,
 
+  EndpointSlice: `apiVersion: discovery.k8s.io/v1
+kind: EndpointSlice
+metadata:
+  name: my-service-1
+  namespace: default
+  labels:
+    kubernetes.io/service-name: my-service
+addressType: IPv4
+ports:
+  - name: http
+    protocol: TCP
+    port: 80
+endpoints:
+  - addresses:
+      - 10.0.0.10
+    conditions:
+      ready: true
+      serving: true`,
+
   ConfigMap: `apiVersion: v1
 kind: ConfigMap
 metadata: