@skyhook-io/k8s-ui 1.16.3 → 1.17.1

package/src/utils/resource-hierarchy.test.ts

@@ -1528,3 +1528,72 @@ describe('structural app members survive the window filter', () => {
     expect(isChildVisibleInWindow(stray, 0, 1000, { pinned: false, userExpanded: false })).toBe(false)
   })
 })
+
+describe('uses edges in the timeline hierarchy', () => {
+  const node = (kind: string, apiVersion: string, name: string) => ({
+    id: `${kind.toLowerCase()}/team/${name}`, kind, name, status: 'healthy', data: { namespace: 'team', apiVersion },
+  })
+  const topology = {
+    nodes: [
+      node('HorizontalPodAutoscaler', 'autoscaling/v2', 'web'),
+      node('Deployment', 'apps/v1', 'web'),
+      node('Certificate', 'cert-manager.io/v1', 'tls'),
+      node('Issuer', 'cert-manager.io/v1', 'ca'),
+    ],
+    edges: [
+      { id: 'hpa', source: 'horizontalpodautoscaler/team/web', target: 'deployment/team/web', type: 'uses' },
+      { id: 'issuer', source: 'certificate/team/tls', target: 'issuer/team/ca', type: 'uses' },
+    ],
+  } as unknown as Topology
+  const events = [
+    changeEvent('HorizontalPodAutoscaler', 'team', 'web', { apiVersion: 'autoscaling/v2' }),
+    changeEvent('Deployment', 'team', 'web', { apiVersion: 'apps/v1' }),
+    changeEvent('Certificate', 'team', 'tls', { apiVersion: 'cert-manager.io/v1' }),
+    changeEvent('Issuer', 'team', 'ca', { apiVersion: 'cert-manager.io/v1' }),
+  ]
+
+  it('files an autoscaler under its workload but not a dependent under its dependency', () => {
+    const lanes = buildResourceHierarchy({ events, topology, grouping: 'owner' })
+    const top = lanes.map(lane => `${lane.kind}/${lane.name}`).sort()
+    expect(top).toEqual(['Certificate/tls', 'Deployment/web', 'Issuer/ca'])
+    const deployment = lanes.find(lane => lane.kind === 'Deployment')!
+    expect(deployment.children?.map(child => child.kind)).toEqual(['HorizontalPodAutoscaler'])
+  })
+})
+
+describe('buildResourceHierarchy Flux sources', () => {
+  it('keeps a shared Flux source as its own lane instead of nesting it under one consumer', () => {
+    const event = (kind: string, name: string, apiVersion: string): TimelineEvent => ({
+      id: `${kind}/flux-system/${name}`,
+      timestamp: '2024-01-01T00:00:00.000Z',
+      source: 'informer',
+      kind,
+      apiVersion,
+      namespace: 'flux-system',
+      name,
+      eventType: 'update',
+    } as TimelineEvent)
+    const events = [
+      event('GitRepository', 'podinfo', 'source.toolkit.fluxcd.io/v1'),
+      event('Kustomization', 'base', 'kustomize.toolkit.fluxcd.io/v1'),
+      event('Kustomization', 'overlay', 'kustomize.toolkit.fluxcd.io/v1'),
+    ]
+    const topology = {
+      nodes: [
+        { id: 'gitrepository/flux-system/podinfo', kind: 'GitRepository', name: 'podinfo', status: 'healthy', data: { namespace: 'flux-system', apiVersion: 'source.toolkit.fluxcd.io/v1' } },
+        { id: 'kustomization/flux-system/base', kind: 'Kustomization', name: 'base', status: 'healthy', data: { namespace: 'flux-system', apiVersion: 'kustomize.toolkit.fluxcd.io/v1' } },
+        { id: 'kustomization/flux-system/overlay', kind: 'Kustomization', name: 'overlay', status: 'healthy', data: { namespace: 'flux-system', apiVersion: 'kustomize.toolkit.fluxcd.io/v1' } },
+      ],
+      edges: [
+        { id: 'e1', source: 'gitrepository/flux-system/podinfo', target: 'kustomization/flux-system/base', type: 'configures' },
+        { id: 'e2', source: 'gitrepository/flux-system/podinfo', target: 'kustomization/flux-system/overlay', type: 'configures' },
+      ],
+    } as unknown as Topology
+    const lanes = buildResourceHierarchy({ events, topology, grouping: 'owner' })
+    expect(lanes.map((lane) => `${lane.kind}/${lane.name}`).sort()).toEqual([
+      'GitRepository/podinfo',
+      'Kustomization/base',
+      'Kustomization/overlay',
+    ])
+  })
+})

package/src/utils/resource-hierarchy.ts

@@ -466,7 +466,7 @@ function sortEventsForRendering(events: TimelineEvent[]): TimelineEvent[] {
 // then workloads, then their generated children (ReplicaSet/Pod), config last.
 // Applied at EVERY depth so a Job's Pods sort the same way a root's children do.
 const CHILD_SORT_KIND_PRIORITY: Record<string, number> = {
-  Service: 1, Gateway: 1, HTTPRoute: 2, GRPCRoute: 2, TCPRoute: 2, TLSRoute: 2,
+  Service: 1, Gateway: 1, HTTPRoute: 2, GRPCRoute: 2, TCPRoute: 2, TLSRoute: 2, UDPRoute: 2,
   Deployment: 2, Rollout: 2, StatefulSet: 2, DaemonSet: 2,
   Job: 3, CronJob: 3,
   ReplicaSet: 3, Pod: 4, ConfigMap: 5, Secret: 5,
@@ -699,6 +699,7 @@ export function buildResourceHierarchy(options: HierarchyOptions): ResourceLane[
 
   // Source 2: Topology edges (for Service→Deployment, Ingress→Service, ConfigMap→Deployment).
   if (topology?.edges) {
+    const topologyNodeById = new Map(topology.nodes?.map(node => [node.id, node]) ?? [])
     for (const edge of topology.edges) {
       const sourceId = topologyLaneIdByNodeId.get(edge.source)
       const targetId = topologyLaneIdByNodeId.get(edge.target)
@@ -760,11 +761,11 @@ export function buildResourceHierarchy(options: HierarchyOptions): ResourceLane[
         const targetKind = parseLaneId(targetId)!.kind
 
         // Gateway→Route: Gateway is parent of Route
-        if (sourceKind === 'Gateway' && (targetKind === 'HTTPRoute' || targetKind === 'GRPCRoute' || targetKind === 'TCPRoute' || targetKind === 'TLSRoute')) {
+        if (sourceKind === 'Gateway' && (targetKind === 'HTTPRoute' || targetKind === 'GRPCRoute' || targetKind === 'TCPRoute' || targetKind === 'TLSRoute' || targetKind === 'UDPRoute')) {
           link(targetId, sourceId, targetExists)
         }
         // Route→Service: reverse (Service is representative, like Ingress)
-        else if ((sourceKind === 'HTTPRoute' || sourceKind === 'GRPCRoute' || sourceKind === 'TCPRoute' || sourceKind === 'TLSRoute') && targetKind === 'Service') {
+        else if ((sourceKind === 'HTTPRoute' || sourceKind === 'GRPCRoute' || sourceKind === 'TCPRoute' || sourceKind === 'TLSRoute' || sourceKind === 'UDPRoute') && targetKind === 'Service') {
           link(sourceId, targetId, sourceExists)
         }
         // Ingress→Service: reverse relationship (Service is representative)
@@ -777,8 +778,17 @@ export function buildResourceHierarchy(options: HierarchyOptions): ResourceLane[
         }
       }
 
-      // configures/uses/protects: ConfigMap→Deployment, HPA→Deployment, PDB→Deployment (target is parent)
-      if (edge.type === 'configures' || edge.type === 'uses' || edge.type === 'protects') {
+      // configures/protects: ConfigMap→Deployment, PDB→Deployment (target is parent).
+      // A Flux source feeds many reconcilers and its timeline is its own, so it
+      // never nests under one of them.
+      if ((edge.type === 'configures' && !isFluxSource(topologyNodeById.get(edge.source))) || edge.type === 'protects') {
+        link(sourceId, targetId, sourceExists)
+      }
+      // uses: only an autoscaler or a mounted claim belongs under the workload it
+      // serves. Other uses edges point from a dependent to what it depends on
+      // (Certificate→Issuer, Gateway→GatewayClass); nesting there would file
+      // every dependent under one shared dependency.
+      if (edge.type === 'uses' && attachesToTarget(topologyNodeById.get(edge.source))) {
         link(sourceId, targetId, sourceExists)
       }
     }
@@ -805,7 +815,7 @@ export function buildResourceHierarchy(options: HierarchyOptions): ResourceLane[
     const appLabelEligibleKinds = new Set([
       'Service', 'Deployment', 'Rollout', 'StatefulSet', 'DaemonSet',
       'Job', 'CronJob', 'Ingress', 'Gateway', 'HTTPRoute', 'GRPCRoute',
-      'TCPRoute', 'TLSRoute', 'ConfigMap', 'Secret',
+      'TCPRoute', 'TLSRoute', 'UDPRoute', 'ConfigMap', 'Secret',
       'Application', 'Kustomization', 'HelmRelease', 'GitRepository',
       'Workflow', 'CronWorkflow',
       'KnativeService', 'KnativeConfiguration', 'KnativeRevision', 'KnativeRoute',
@@ -836,7 +846,7 @@ export function buildResourceHierarchy(options: HierarchyOptions): ResourceLane[
 
       const kindPriority: Record<string, number> = {
         Service: 1, Ingress: 2, Gateway: 2,
-        HTTPRoute: 2, GRPCRoute: 2, TCPRoute: 2, TLSRoute: 2,
+        HTTPRoute: 2, GRPCRoute: 2, TCPRoute: 2, TLSRoute: 2, UDPRoute: 2,
         Deployment: 3, Rollout: 3, StatefulSet: 3, DaemonSet: 3,
         Job: 4, CronJob: 4, Workflow: 4, CronWorkflow: 4,
         ConfigMap: 5, Secret: 5,
@@ -1468,3 +1478,27 @@ export function countEventsInHierarchy(lanes: ResourceLane[]): number {
   lanes.forEach(walk)
   return count
 }
+
+// The uses-edge sources that attach to their target workload: autoscalers and
+// PersistentVolumeClaims, matched on exact API group.
+const ATTACHED_USES_SOURCES = new Set([
+  'autoscaling/HorizontalPodAutoscaler',
+  'autoscaling.k8s.io/VerticalPodAutoscaler',
+  'keda.sh/ScaledObject',
+  'keda.sh/ScaledJob',
+  '/PersistentVolumeClaim',
+])
+
+function isFluxSource(node: Topology['nodes'][number] | undefined): boolean {
+  if (!node) return false
+  const apiVersion = typeof node.data?.apiVersion === 'string' ? node.data.apiVersion : ''
+  return apiVersionToGroup(apiVersion) === 'source.toolkit.fluxcd.io'
+}
+
+function attachesToTarget(node: Topology['nodes'][number] | undefined): boolean {
+  if (!node) return false
+  const kind = topologyNodeResourceKind(node)
+  const apiVersion = typeof node.data?.apiVersion === 'string' ? node.data.apiVersion : ''
+  const group = canonicalResourceGroup(kind, apiVersionToGroup(apiVersion)) ?? ''
+  return ATTACHED_USES_SOURCES.has(`${group}/${kind}`)
+}

package/src/utils/resource-icons.ts

@@ -111,6 +111,7 @@ const KIND_ICON_MAP: Record<string, LucideIcon> = {
   httproute: Globe,
   grpcroute: Globe,
   tcproute: Globe,
+  udproute: Globe,
   tlsroute: Globe,
 
   // Config
@@ -219,6 +220,7 @@ const KIND_ICON_MAP: Record<string, LucideIcon> = {
   // pseudo-kinds (cnpgcluster/…) belong here only once pkg/topology's
   // KindForGVK emits them — it has no CNPG case today.
   pooler: Waypoints,
+  databaserole: UserCog,
 
   // Cluster API
   capicluster: Server,

package/src/utils/resource-refs.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+import type { ResourceRef } from '../types/core'
+import { dedupeResourceRefs, omitResourceRefs, resourceRefKey } from './resource-refs'
+
+describe('resource reference identity', () => {
+  const core: ResourceRef = { kind: 'Service', namespace: 'team', name: 'app' }
+  const knative: ResourceRef = { ...core, group: 'serving.knative.dev' }
+
+  it('deduplicates core aliases while preserving an identically named custom resource', () => {
+    const refs = [core, { ...core, group: '' }, knative]
+    expect(dedupeResourceRefs(refs)).toEqual([core, knative])
+    expect(refs).toHaveLength(3)
+    expect(resourceRefKey(core)).not.toBe(resourceRefKey(knative))
+  })
+
+  it('omits only the exact mirrored identity without mutating either list', () => {
+    const refs = [core, knative]
+    const excluded = [{ ...core, group: '' }]
+    expect(omitResourceRefs(refs, excluded)).toEqual([knative])
+    expect(refs).toEqual([core, knative])
+    expect(excluded).toHaveLength(1)
+  })
+})

package/src/utils/resource-refs.ts

@@ -0,0 +1,30 @@
+import type { ResourceRef } from '../types/core'
+
+/**
+ * resourceKey mirrors Go `audit.ResourceKey(group, kind, namespace, name)`:
+ * `group|Kind|namespace|name`. Group first because group and namespace can each
+ * independently be empty; `|` is delimiter-safe (K8s API groups follow
+ * DNS-subdomain rules and can't contain it).
+ */
+export function resourceKey(group: string, kind: string, namespace: string, name: string): string {
+  return `${group}|${kind}|${namespace}|${name}`;
+}
+
+export function resourceRefKey(ref: ResourceRef): string {
+  return resourceKey(ref.group ?? '', ref.kind, ref.namespace, ref.name);
+}
+
+export function dedupeResourceRefs(refs: ResourceRef[]): ResourceRef[] {
+  const seen = new Set<string>()
+  return refs.filter(ref => {
+    const key = resourceRefKey(ref)
+    if (seen.has(key)) return false
+    seen.add(key)
+    return true
+  })
+}
+
+export function omitResourceRefs(refs: ResourceRef[], excluded: ResourceRef[]): ResourceRef[] {
+  const excludedKeys = new Set(excluded.map(resourceRefKey))
+  return refs.filter(ref => !excludedKeys.has(resourceRefKey(ref)))
+}

package/src/utils/skeleton-yaml.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest'
+import { getSkeletonYaml } from './skeleton-yaml'
+
+describe('getSkeletonYaml', () => {
+  it('starts a CloudNativePG Cluster from a spec the operator accepts', () => {
+    const yaml = getSkeletonYaml('Cluster', 'postgresql.cnpg.io')
+    expect(yaml).toContain('apiVersion: postgresql.cnpg.io/v1')
+    expect(yaml).toContain('instances: 3')
+    expect(yaml).toContain('size: 1Gi')
+  })
+
+  it('leaves a Cluster API Cluster on the generic template', () => {
+    const yaml = getSkeletonYaml('Cluster', 'cluster.x-k8s.io')
+    expect(yaml).toContain('apiVersion: cluster.x-k8s.io/v1')
+    expect(yaml).not.toContain('instances')
+  })
+
+  it('keeps core kinds on their own skeleton', () => {
+    expect(getSkeletonYaml('Pod')).toContain('containers:')
+  })
+})

package/src/utils/skeleton-yaml.ts

@@ -198,8 +198,24 @@ spec:
           image: nginx:latest`,
 }
 
+// Keyed by group as well as kind: CloudNativePG and Cluster API both name a
+// kind Cluster.
+const groupSkeletons: Record<string, string> = {
+  'postgresql.cnpg.io/Cluster': `apiVersion: postgresql.cnpg.io/v1
+kind: Cluster
+metadata:
+  name: my-cluster
+  namespace: default
+spec:
+  instances: 3
+  storage:
+    size: 1Gi`,
+}
+
 // Returns skeleton YAML for a known kind, or a generic template for unknown kinds.
 export function getSkeletonYaml(kind: string, group?: string): string {
+  const grouped = group ? groupSkeletons[`${group}/${kind}`] : undefined
+  if (grouped) return grouped
   const skeleton = skeletons[kind]
   if (skeleton) return skeleton
 

package/src/utils/url-path.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import { normalizeURLForComparison, stripTrailingSlashes } from './url-path'
+
+describe('stripTrailingSlashes', () => {
+  it.each([
+    ['', ''],
+    ['/', ''],
+    ['////', ''],
+    ['/api///', '/api'],
+    ['https://store.example//bucket///', 'https://store.example//bucket'],
+    ['https://store.example//bucket?prefix=/', 'https://store.example//bucket?prefix='],
+    ['/api//nested', '/api//nested'],
+  ])('preserves the existing path normalization for %s', (value, expected) => {
+    expect(stripTrailingSlashes(value)).toBe(expected)
+  })
+
+  it('handles long slash runs without scanning each possible start', () => {
+    const slashes = '/'.repeat(100_000)
+    expect(stripTrailingSlashes(`prefix${slashes}`)).toBe('prefix')
+    expect(stripTrailingSlashes(`prefix${slashes}suffix`)).toBe(`prefix${slashes}suffix`)
+  })
+})
+
+it('compares equivalent origins while retaining declared path semantics', () => {
+  expect(normalizeURLForComparison('https://STORE.example:443/prefix/')).toBe(normalizeURLForComparison('https://store.example/prefix'))
+  expect(normalizeURLForComparison('http://STORE.example:080/')).toBe(normalizeURLForComparison('http://store.example'))
+  expect(normalizeURLForComparison('s3://BUCKET/path/')).toBe(normalizeURLForComparison('s3://bucket/path'))
+  expect(normalizeURLForComparison('https://store.example/Prefix')).not.toBe(normalizeURLForComparison('https://store.example/prefix'))
+  expect(normalizeURLForComparison('https://store.example/a/../b')).not.toBe(normalizeURLForComparison('https://store.example/b'))
+  expect(normalizeURLForComparison('https://store.example:8443/path')).not.toBe(normalizeURLForComparison('https://store.example/path'))
+  expect(normalizeURLForComparison('')).toBe('')
+  expect(normalizeURLForComparison('invalid')).toBeNull()
+  expect(normalizeURLForComparison('https://host\\prefix')).toBeNull()
+  expect(normalizeURLForComparison('https://user:password@store.example')).toBeNull()
+})

package/src/utils/url-path.ts

@@ -0,0 +1,21 @@
+export function stripTrailingSlashes(value: string): string {
+  let end = value.length
+  while (end > 0 && value[end - 1] === '/') end--
+  return value.slice(0, end)
+}
+
+export function normalizeURLForComparison(value: string): string | null {
+  if (!value) return ''
+  if (value.includes('\\')) return null
+  try {
+    const url = new URL(value)
+    const authorityStart = value.indexOf('://')
+    if (authorityStart < 0 || !url.hostname || url.username || url.password || value.includes('?') || value.includes('#')) return null
+    const pathStart = value.indexOf('/', authorityStart + 3)
+    const path = pathStart < 0 ? '' : value.slice(pathStart)
+    const port = url.port || (url.protocol === 'https:' ? '443' : url.protocol === 'http:' ? '80' : '')
+    return `${url.protocol}//${url.hostname.toLowerCase()}:${port}${stripTrailingSlashes(path)}`
+  } catch {
+    return null
+  }
+}

package/src/utils/validators.test.ts

@@ -82,25 +82,16 @@ describe('validateRFC1123Subdomain', () => {
     if (!r.valid) expect(r.error).toMatch(/253/)
   })
 
-  it('rejects single labels longer than 63 chars even when total is under 253', () => {
-    // K8s' IsDNS1123Subdomain enforces ≤ 63 chars per dot-
-    // separated label on top of the 253-char total. Without the
-    // per-label check, a single 200-char label slipped through
-    // client-side and was rejected only server-side.
-    const huge = 'a'.repeat(200)
-    const r = validateRFC1123Subdomain(huge)
-    expect(r.valid).toBe(false)
-    if (!r.valid) expect(r.error).toMatch(/63/)
+  it('accepts long undotted names under the Kubernetes total limit', () => {
+    expect(validateRFC1123Subdomain('a'.repeat(200)).valid).toBe(true)
   })
 
   it('accepts a 63-char label at the boundary', () => {
     expect(validateRFC1123Subdomain('a'.repeat(63)).valid).toBe(true)
   })
 
-  it('rejects only the offending label when other labels are fine', () => {
-    const r = validateRFC1123Subdomain(`ok.${'a'.repeat(64)}.also-ok`)
-    expect(r.valid).toBe(false)
-    if (!r.valid) expect(r.error).toMatch(/63/)
+  it('accepts long dot-separated parts under the Kubernetes total limit', () => {
+    expect(validateRFC1123Subdomain(`ok.${'a'.repeat(64)}.also-ok`).valid).toBe(true)
   })
 })
 

package/src/utils/validators.ts

@@ -17,7 +17,7 @@ export type ValidationResult =
   | { valid: false; error: string }
 
 const RFC1123_LABEL_MAX = 63
-// Kubernetes namespace / pod / service names are RFC 1123 labels:
+// Kubernetes namespace names are RFC 1123 labels:
 // lowercase alphanumeric or '-', start and end alphanumeric, ≤63 chars.
 // Source: k8s.io/apimachinery/pkg/util/validation.IsDNS1123Label.
 const RFC1123_LABEL_RE = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/
@@ -34,9 +34,7 @@ const HELM_RELEASE_NAME_MAX = 53
 // https://helm.sh/docs/chart_best_practices/conventions/#chart-names
 
 /**
- * Validates a Kubernetes RFC 1123 label. Used for namespace names,
- * pod / service / configmap / secret names — anything Kubernetes
- * accepts as a single-segment identifier.
+ * Matches Kubernetes IsDNS1123Label, including namespace names.
  */
 export function validateRFC1123Label(input: string): ValidationResult {
   if (input.length === 0) {
@@ -64,9 +62,9 @@ export function validateRFC1123Label(input: string): ValidationResult {
 }
 
 /**
- * Validates a Kubernetes RFC 1123 subdomain (labels joined by dots).
- * Used for Helm chart names, image registries — anything that allows
- * dotted segments. NOT for pod/namespace names; use the label form.
+ * Matches Kubernetes IsDNS1123Subdomain: the whole name is capped at 253
+ * characters, without a separate 63-character cap on dot-separated parts.
+ * Namespace names use validateRFC1123Label instead.
  */
 export function validateRFC1123Subdomain(input: string): ValidationResult {
   if (input.length === 0) {
@@ -90,18 +88,6 @@ export function validateRFC1123Subdomain(input: string): ValidationResult {
       error: 'must contain only lowercase letters, numbers, hyphens, and dots, and each segment must start/end with a letter or number',
     }
   }
-  // Per-label cap: K8s' IsDNS1123Subdomain enforces ≤ 63 chars
-  // PER dot-separated label on top of the 253-char total. The
-  // regex above doesn't catch that; without this check a single
-  // 200-char label passes here and only fails server-side.
-  for (const label of input.split('.')) {
-    if (label.length > RFC1123_LABEL_MAX) {
-      return {
-        valid: false,
-        error: `each dot-separated label must be at most ${RFC1123_LABEL_MAX} characters (got ${label.length} for "${label}")`,
-      }
-    }
-  }
   return { valid: true }
 }
 

package/src/utils/view-transition.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from 'vitest'
-import { isInvalidStateError, startViewTransitionSafe } from './view-transition'
+import { isInvalidStateError, isWebKitGTK, startViewTransitionSafe } from './view-transition'
 
 // SKY-833 bug 49: rapid tab / route switches surfaced
 // "InvalidStateError: Transition was aborted because of invalid state"
@@ -79,3 +79,37 @@ describe('startViewTransitionSafe', () => {
     expect(isInvalidStateError(new TypeError('y'))).toBe(false)
   })
 })
+
+const WEBKITGTK_UA =
+  'Mozilla/5.0 (X11; Ubuntu; Linux x86_64) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Safari/605.1.15'
+
+describe('isWebKitGTK', () => {
+  it('matches WebKitGTK user agents', () => {
+    expect(isWebKitGTK(WEBKITGTK_UA)).toBe(true)
+    expect(isWebKitGTK('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/605.1.15 (KHTML, like Gecko)')).toBe(true)
+  })
+
+  it('does not match other engines on Linux, or Safari', () => {
+    expect(isWebKitGTK('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36')).toBe(false)
+    expect(isWebKitGTK('Mozilla/5.0 (X11; Linux x86_64; rv:140.0) Gecko/20100101 Firefox/140.0')).toBe(false)
+    expect(isWebKitGTK('Mozilla/5.0 (Linux; Android 15) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Mobile Safari/537.36')).toBe(false)
+    expect(isWebKitGTK('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Safari/605.1.15')).toBe(false)
+  })
+})
+
+describe('startViewTransitionSafe under WebKitGTK', () => {
+  it('applies the update directly instead of starting a transition', () => {
+    const originalDoc = (globalThis as { document?: unknown }).document
+    const startSpy = vi.fn()
+    ;(globalThis as { document: object }).document = { startViewTransition: startSpy }
+    const uaSpy = vi.spyOn(navigator, 'userAgent', 'get').mockReturnValue(WEBKITGTK_UA)
+
+    const update = vi.fn()
+    startViewTransitionSafe(update)
+    expect(update).toHaveBeenCalledTimes(1)
+    expect(startSpy).not.toHaveBeenCalled()
+
+    uaSpy.mockRestore()
+    ;(globalThis as { document?: unknown }).document = originalDoc
+  })
+})

package/src/utils/view-transition.ts

@@ -14,6 +14,13 @@
  *
  * Other rejection types (programming errors, unsupported configs)
  * are re-thrown so we don't accidentally hide real bugs.
+ *
+ * Under WebKitGTK (the Linux desktop app's webview) the update is applied
+ * without a transition: when WebKitGTK has no renderer buffer transport —
+ * WEBKIT_DISABLE_DMABUF_RENDERER or WEBKIT_DISABLE_COMPOSITING_MODE set, a
+ * distro patch, or an EGL stack without GBM/surfaceless platforms — starting
+ * a view transition segfaults the UI process. The page cannot tell which
+ * case it is in, so it skips the cross-fade on every WebKitGTK host.
  */
 export function startViewTransitionSafe(update: () => void): void {
   // Some lib.dom.d.ts versions don't yet expose `startViewTransition`
@@ -27,7 +34,7 @@ export function startViewTransitionSafe(update: () => void): void {
     }
   }
 
-  if (typeof doc.startViewTransition !== 'function') {
+  if (typeof doc.startViewTransition !== 'function' || isWebKitGTK(navigator.userAgent)) {
     update()
     return
   }
@@ -60,3 +67,11 @@ export function isInvalidStateError(err: unknown): boolean {
     (err as { name: unknown }).name === 'InvalidStateError'
   )
 }
+
+/**
+ * WebKitGTK identifies as AppleWebKit on Linux. Chromium-based browsers on
+ * Linux and Android carry AppleWebKit too, so they are excluded by name.
+ */
+export function isWebKitGTK(userAgent: string): boolean {
+  return /\bLinux\b/.test(userAgent) && /AppleWebKit/.test(userAgent) && !/Chrome|Chromium|Android/.test(userAgent)
+}