@skyhook-io/k8s-ui 1.16.2 → 1.17.0

package/src/components/shared/SetImageDialog.tsx

@@ -1,11 +1,5 @@
 import { useEffect, useMemo, useRef, useState, useId } from 'react'
-import {
-  AlertTriangle,
-  ExternalLink,
-  Loader2,
-  RefreshCw,
-  X,
-} from 'lucide-react'
+import { Loader2, RefreshCw, X } from 'lucide-react'
 import { clsx } from 'clsx'
 
 import type {
@@ -16,11 +10,33 @@ import type {
 } from '../../types/core'
 import { DialogPortal } from '../ui/DialogPortal'
 import { Badge } from '../ui/Badge'
+import {
+  canConfirmGitOpsWrite,
+  gitOpsWriteGuardKey,
+  type GitOpsWrite,
+  type GitOpsWriteGuard,
+} from '../../utils/gitops-write-guard'
+import { GitOpsWriteWarning } from './GitOpsWriteWarning'
 
-export interface ManagedImageSource {
-  type: 'GitOps' | 'Helm'
-  label: string
-  onOpen?: () => void
+/** The GitOps write guard for the object whose Pod template the dialog
+ *  writes, evaluated by the host: for {@link SET_IMAGE_WRITES} until the
+ *  containers are known, then for {@link setImageWrites} of the containers
+ *  {@link onSelectionChange} reports. */
+export interface SetImageOwnership {
+  guard: GitOpsWriteGuard
+  onOpenOwner?: () => void
+  /** The containers the dialog lists and the ones being changed, so the
+   *  guard can judge exactly those (null until the containers load). */
+  onSelectionChange?: (selection: SetImageSelection | null) => void
+  /** {@link setImageSelectionKey} of the selection `guard` was evaluated
+   *  for. When set, Update waits until it matches the dialog's current
+   *  selection. */
+  selectionKey?: string
+}
+
+export interface SetImageSelection {
+  containers: Pick<WorkloadContainerImage, 'type' | 'name'>[]
+  changed: Pick<WorkloadContainerImage, 'type' | 'name'>[]
 }
 
 export interface SetImageDialogProps {
@@ -28,7 +44,8 @@ export interface SetImageDialogProps {
   workloadLabel: string
   workloadName: string
   workloadResource: string
-  managedSources?: ManagedImageSource[]
+  /** Undefined while the host can't verify ownership; the dialog then blocks. */
+  ownership?: SetImageOwnership
   pending?: boolean
   onClose: () => void
   onLoad: () => Promise<WorkloadImageInventory>
@@ -83,31 +100,49 @@ export function reconcileRefreshedImageDrafts(
   return { drafts: nextDrafts, changedCurrentKeys }
 }
 
+export function setImageSelectionKey(selection: SetImageSelection | null): string {
+  if (!selection) return ''
+  const rows = (refs: SetImageSelection['containers']) => refs.map((c) => [c.type, c.name])
+  return JSON.stringify([rows(selection.containers), rows(selection.changed)])
+}
+
+/** One write per container, by name: the guard's verdict for exactly the
+ *  images being changed. */
+export function setImageWrites(containers: Pick<WorkloadContainerImage, 'type' | 'name'>[]): GitOpsWrite[] {
+  return containers.map((container) => ({
+    scope: 'spec',
+    paths: [`spec.template.spec.${container.type === 'initContainer' ? 'initContainers' : 'containers'}[name=${container.name}].image`],
+    description: container.name,
+  }))
+}
+
+// Before the containers load, the guard covers every container image.
+export const SET_IMAGE_WRITES: GitOpsWrite[] = [
+  {
+    scope: 'spec',
+    paths: [
+      'spec.template.spec.containers[*].image',
+      'spec.template.spec.initContainers[*].image',
+    ],
+    description: 'Container images',
+  },
+]
+
 export function canSubmitImageUpdates({
   updateCount,
   hasEmptyImage,
-  managed,
-  ownershipResolved,
-  acknowledged,
+  ownershipConfirmable,
   busy,
   loadFailed = false,
 }: {
   updateCount: number
   hasEmptyImage: boolean
-  managed: boolean
-  ownershipResolved: boolean
-  acknowledged: boolean
+  /** Ownership resolved and, when it's managed, acknowledged. */
+  ownershipConfirmable: boolean
   busy: boolean
   loadFailed?: boolean
 }): boolean {
-  return (
-    updateCount > 0 &&
-    !hasEmptyImage &&
-    ownershipResolved &&
-    (!managed || acknowledged) &&
-    !busy &&
-    !loadFailed
-  )
+  return updateCount > 0 && !hasEmptyImage && ownershipConfirmable && !busy && !loadFailed
 }
 
 export function describeImageUpdateBehavior(
@@ -140,7 +175,7 @@ export function SetImageDialog({
   workloadLabel,
   workloadName,
   workloadResource,
-  managedSources,
+  ownership,
   pending = false,
   onClose,
   onLoad,
@@ -155,7 +190,9 @@ export function SetImageDialog({
   const [submitting, setSubmitting] = useState(false)
   const [loadError, setLoadError] = useState<string | null>(null)
   const [submitError, setSubmitError] = useState<string | null>(null)
-  const [acknowledged, setAcknowledged] = useState(false)
+  // The guard key the acknowledgment was given for: a different verdict
+  // (fresh evidence, other containers, a changed policy) asks again.
+  const [ackedKey, setAckedKey] = useState('')
   const [changedCurrentKeys, setChangedCurrentKeys] = useState<string[]>([])
   const onLoadRef = useRef(onLoad)
   const loadRequestRef = useRef(0)
@@ -216,7 +253,7 @@ export function SetImageDialog({
     setDrafts({})
     setChangedCurrentKeys([])
     setSubmitError(null)
-    setAcknowledged(false)
+    setAckedKey('')
     void loadInventory()
   }, [open, workloadLabel, workloadName, workloadResource])
 
@@ -229,13 +266,27 @@ export function SetImageDialog({
       (container) => !(drafts[containerKey(container)] ?? '').trim(),
     ) ?? false
   const busy = pending || submitting
-  const ownershipResolved = managedSources !== undefined
+  const ownershipResolved = ownership !== undefined
+  const onSelectionChange = ownership?.onSelectionChange
+  const selectionKey = setImageSelectionKey(
+    inventory ? { containers: inventory.containers, changed: updates } : null,
+  )
+  useEffect(() => {
+    if (!onSelectionChange) return
+    const [containers, changed] = selectionKey ? (JSON.parse(selectionKey) as [string[][], string[][]]) : [null, null]
+    const toRefs = (rows: string[][]) => rows.map(([type, name]) => ({ type: type as WorkloadContainerImage['type'], name }))
+    onSelectionChange(containers && changed ? { containers: toRefs(containers), changed: toRefs(changed) } : null)
+  }, [onSelectionChange, selectionKey])
+  const guard = ownership?.guard
+  // The host evaluates the guard after it hears of an edit; until then the
+  // verdict on screen is for other containers.
+  const guardCurrent = ownership?.selectionKey === undefined || ownership.selectionKey === selectionKey
+  const guardKey = gitOpsWriteGuardKey(guard)
+  const acknowledged = Boolean(guardKey) && ackedKey === guardKey
   const canSubmit = canSubmitImageUpdates({
     updateCount: updates.length,
     hasEmptyImage,
-    managed: (managedSources?.length ?? 0) > 0,
-    ownershipResolved,
-    acknowledged,
+    ownershipConfirmable: guardCurrent && canConfirmGitOpsWrite(guard, acknowledged),
     busy,
     loadFailed: Boolean(loadError),
   })
@@ -378,57 +429,14 @@ export function SetImageDialog({
               {describeImageUpdateBehavior(inventory.behavior)}
             </div>
 
-            {managedSources && managedSources.length > 0 && (
-              <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-3">
-                <div className="flex items-start gap-2">
-                  <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
-                  <div className="min-w-0 flex-1">
-                    <p className="text-xs font-medium text-amber-800 dark:text-amber-300">
-                      The declared source may overwrite this live change
-                    </p>
-                    <p className="mt-1 text-xs text-theme-text-secondary">
-                      Managed by{' '}
-                      {managedSources
-                        .map((source) => `${source.type} ${source.label}`)
-                        .join(' and ')}
-                      . Update the declared source for a durable change; use
-                      this action only as a break-glass operation.
-                    </p>
-                    <div className="mt-2 flex flex-wrap gap-2">
-                      {managedSources
-                        .filter((source) => source.onOpen)
-                        .map((source) => (
-                          <button
-                            key={`${source.type}-${source.label}`}
-                            type="button"
-                            onClick={source.onOpen}
-                            className="inline-flex items-center gap-1 text-xs font-medium text-skyhook-600 hover:underline dark:text-skyhook-400"
-                          >
-                            {source.type === 'GitOps'
-                              ? 'View GitOps owner'
-                              : 'View Helm release'}
-                            <ExternalLink className="h-3 w-3" />
-                          </button>
-                        ))}
-                    </div>
-                    <label className="mt-3 flex cursor-pointer items-start gap-2 text-xs text-theme-text-primary">
-                      <input
-                        type="checkbox"
-                        checked={acknowledged}
-                        onChange={(event) =>
-                          setAcknowledged(event.target.checked)
-                        }
-                        disabled={busy}
-                        className="mt-0.5 h-3.5 w-3.5 accent-skyhook-500"
-                      />
-                      <span>
-                        I understand the declared source may overwrite this live
-                        change.
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              </div>
+            {guard && (
+              <GitOpsWriteWarning
+                guard={guard}
+                acknowledged={acknowledged}
+                onAcknowledgedChange={(value) => setAckedKey(value ? guardKey : '')}
+                onOpenOwner={ownership?.onOpenOwner}
+                disabled={busy}
+              />
             )}
 
             <ContainerImageGroup

package/src/components/shared/index.ts

@@ -5,7 +5,8 @@ export {
   DrainPlanDialog, DrainPlanContent, canConfirmDrain, planMatches, emptyDirPodsAtRisk, DEFAULT_DRAIN_DIALOG_OPTIONS,
   type DrainPlan, type DrainPlanPod, type DrainOutcome, type DrainDialogOptions,
 } from './DrainPlanDialog'
-export { SetImageDialog, type ManagedImageSource, type SetImageDialogProps } from './SetImageDialog'
+export { SetImageDialog, SET_IMAGE_WRITES, setImageWrites, setImageSelectionKey, type SetImageOwnership, type SetImageSelection, type SetImageDialogProps } from './SetImageDialog'
+export { GitOpsWriteWarning, type GitOpsWriteWarningProps } from './GitOpsWriteWarning'
 export { CreateResourceDialog, type CreateResourceDialogProps, type ApplyResult } from './CreateResourceDialog'
 export { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from './ManagedByChip'
 export { DetailShell, type DetailShellProps, type DetailShellTab } from './DetailShell'

package/src/components/timeline/TimelineList.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useCallback, useRef } from 'react'
+import { useState, useMemo, useEffect, useCallback, useRef, type ReactNode } from 'react'
 import { useDebouncedValue } from '../../hooks/useDebouncedValue'
 import { PaneLoader } from '../ui/PaneLoader'
 import { Tooltip } from '../ui/Tooltip'
@@ -6,6 +6,8 @@ import {
   AlertCircle,
   CheckCircle,
   Clock,
+  Eye,
+  Info,
   RefreshCw,
   Plus,
   Trash2,
@@ -33,20 +35,7 @@ import type { NavigateToResource } from '../../utils/navigation'
 import { builtinGroupForKind } from '../../utils/api-resources'
 import { kindToPluralWithGroup, refToSelectedResource, apiVersionToGroup } from '../../utils/navigation'
 import { pluralize } from '../../utils/pluralize'
-
-/** Format resource age (e.g., "3d", "5h", "10m") */
-function formatResourceAge(createdAt: string): string {
-  const diff = Date.now() - new Date(createdAt).getTime()
-  const mins = Math.floor(diff / 60000)
-  if (mins < 1) return '<1m'
-  if (mins < 60) return `${mins}m`
-  const hours = Math.floor(mins / 60)
-  if (hours < 24) return `${hours}h`
-  const days = Math.floor(hours / 24)
-  if (days < 30) return `${days}d`
-  const months = Math.floor(days / 30)
-  return `${months}mo`
-}
+import { formatCompactAge } from '../../utils/format'
 
 export type { ActivityTypeFilter, ActivityFilterKey }
 
@@ -104,6 +93,16 @@ export interface TimelineListProps {
   // explicitly because the visible row count no longer reflects the source cap.
   isTruncated?: boolean
   truncationMessage?: string
+  // Routine activity toggle, shown when `onShowRoutineChange` is set.
+  // `routineEvents` are the routine rows the host holds: left out of `events`
+  // while hidden, included while shown. Counted here through the active filters.
+  showRoutine?: boolean
+  onShowRoutineChange?: (show: boolean) => void
+  routineEvents?: TimelineEvent[]
+  // Rows for which this returns true fold into one card per resource per time
+  // group, whatever their reason. The host uses it for problems on pods and
+  // other child resources, so a crash-looping pod is one card, not dozens.
+  foldPerResource?: (event: TimelineEvent) => boolean
 }
 
 const TIME_RANGES: { value: TimeRange; label: string }[] = [
@@ -115,7 +114,7 @@ const TIME_RANGES: { value: TimeRange; label: string }[] = [
   { value: 'all', label: 'All' },
 ]
 
-export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasLimitedAccess, namespaces, onViewChange, currentView = 'list', onResourceClick, initialFilter, initialTimeRange, rangeOptions = TIME_RANGES, hideRangeSelector = false, showDeleted: showDeletedProp, onShowDeletedChange, search: searchProp, onSearchChange, activityFilter: activityFilterProp, onActivityFilterChange, kindFilter: kindFilterProp, onKindFilterChange, onVisibleWindowChange, scrollToMs, compact = false, selectedEventId, onSelectEvent, truncatedAt, isTruncated, truncationMessage }: TimelineListProps) {
+export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasLimitedAccess, namespaces, onViewChange, currentView = 'list', onResourceClick, initialFilter, initialTimeRange, rangeOptions = TIME_RANGES, hideRangeSelector = false, showDeleted: showDeletedProp, onShowDeletedChange, search: searchProp, onSearchChange, activityFilter: activityFilterProp, onActivityFilterChange, kindFilter: kindFilterProp, onKindFilterChange, onVisibleWindowChange, scrollToMs, compact = false, selectedEventId, onSelectEvent, truncatedAt, isTruncated, truncationMessage, showRoutine = false, onShowRoutineChange, routineEvents, foldPerResource }: TimelineListProps) {
   const [searchInternal, setSearchInternal] = useState('')
   const searchTerm = searchProp ?? searchInternal
   const setSearchTerm = onSearchChange ?? setSearchInternal
@@ -174,16 +173,20 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
   const kindOptions = useMemo(() => mergeKindOptions(seenKinds), [seenKinds])
 
   // Filter activity through the shared predicates so list + swimlane can't drift.
-  const filteredActivity = useMemo(() => {
-    if (!events) return []
-    return events.filter((item) => {
-      if (!matchesActivityFilter(item, activityTypeFilter)) return false
-      if (kindFilter.length > 0 && !kindFilter.includes(item.kind)) return false
-      if (!showDeleted && item.eventType === 'delete') return false
-      if (!matchesTimelineSearch(item, debouncedSearchTerm)) return false
-      return true
-    })
-  }, [events, activityTypeFilter, kindFilter, debouncedSearchTerm, showDeleted])
+  const matchesListFilters = useCallback((item: TimelineEvent) => {
+    if (!matchesActivityFilter(item, activityTypeFilter)) return false
+    if (kindFilter.length > 0 && !kindFilter.includes(item.kind)) return false
+    if (!showDeleted && item.eventType === 'delete') return false
+    if (!matchesTimelineSearch(item, debouncedSearchTerm)) return false
+    return true
+  }, [activityTypeFilter, kindFilter, debouncedSearchTerm, showDeleted])
+  const filteredActivity = useMemo(() => (events ? events.filter(matchesListFilters) : []), [events, matchesListFilters])
+  // Counted through the same filters, so the number is exactly what the toggle adds or removes.
+  const routineCount = useMemo(
+    () => (routineEvents ? routineEvents.filter(matchesListFilters).length : 0),
+    [routineEvents, matchesListFilters],
+  )
+  const canShowRoutine = !showRoutine && routineCount > 0 && !!onShowRoutineChange
 
   // Aggregated event group type
   type AggregatedItem = {
@@ -195,6 +198,13 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
     last: TimelineEvent
     count: number
     reason: string
+  } | {
+    type: 'folded'
+    // Stable across live updates, so an opened fold stays open as rows arrive.
+    key: string
+    latest: TimelineEvent
+    // Newest first.
+    others: TimelineEvent[]
   }
 
   // Aggregate repeated events for the same resource with the same reason
@@ -206,6 +216,13 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
     const singleEvents: TimelineEvent[] = []
 
     for (const item of items) {
+      if (foldPerResource?.(item)) {
+        const key = `fold:${item.kind}:${item.namespace}:${item.name}`
+        const existing = groups.get(key) || []
+        existing.push(item)
+        groups.set(key, existing)
+        continue
+      }
       // Only aggregate K8s Warning events or changes with a specific reason
       const reason = item.reason || ''
       const shouldAggregate = (
@@ -227,8 +244,11 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
     const result: AggregatedItem[] = []
 
     // Process aggregated groups
-    for (const events of groups.values()) {
-      if (events.length >= 2) {
+    for (const [key, events] of groups.entries()) {
+      if (events.length >= 2 && key.startsWith('fold:')) {
+        events.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+        result.push({ type: 'folded', key, latest: events[0], others: events.slice(1) })
+      } else if (events.length >= 2) {
         // Sort by time (oldest first)
         events.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())
         result.push({
@@ -250,8 +270,9 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
 
     // Sort all by most recent (last event time)
     result.sort((a, b) => {
-      const timeA = a.type === 'aggregated' ? new Date(a.last.timestamp).getTime() : new Date(a.item.timestamp).getTime()
-      const timeB = b.type === 'aggregated' ? new Date(b.last.timestamp).getTime() : new Date(b.item.timestamp).getTime()
+      const newest = (x: AggregatedItem) => x.type === 'aggregated' ? x.last : x.type === 'folded' ? x.latest : x.item
+      const timeA = new Date(newest(a).timestamp).getTime()
+      const timeB = new Date(newest(b).timestamp).getTime()
       return timeB - timeA
     })
 
@@ -323,7 +344,7 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
     if (older.length > 0) groups.push({ label: 'Older', items: aggregateEvents(older) })
 
     return groups
-  }, [filteredActivity, compact])
+  }, [filteredActivity, compact, foldPerResource])
 
   // Visible-window reporting: rows carry their time span in data attributes;
   // on scroll (rAF-throttled) and whenever the row set changes, the span of
@@ -397,6 +418,18 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
     card?.scrollIntoView({ behavior: 'smooth', block: 'center' })
   }, [selectedEventId, groupedActivity])
 
+  const renderActivityCard = (item: TimelineEvent) => (
+    <ActivityCard
+      item={item}
+      expanded={expandedItem === item.id}
+      onToggle={() => setExpandedItem(expandedItem === item.id ? null : item.id)}
+      onResourceClick={onResourceClick}
+      compact={compact}
+      selected={selectedEventId === item.id}
+      onSelect={() => onSelectEvent?.(selectedEventId === item.id ? null : item.id)}
+    />
+  )
+
   return (
     <div className="flex flex-col h-full w-full">
       {!compact && (
@@ -422,6 +455,11 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
         />
       )}
 
+
+      {onShowRoutineChange && (
+        <RoutineActivityToggle shown={showRoutine} count={routineCount} onChange={onShowRoutineChange} />
+      )}
+
       {/* Timeline content */}
       <div className="flex-1 overflow-auto" ref={scrollRef} onScroll={onVisibleWindowChange ? handleListScroll : undefined}>
         {isLoading ? (
@@ -433,11 +471,42 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
               const activeFilters = describeActiveFilters({ search: searchTerm, activityFilter: activityTypeFilter, kindFilter, showDeleted })
               return (
                 <>
-                  <p className="text-lg">No activity found</p>
-                  <p className="text-sm mt-2">
-                    {activeFilters || 'Activity will appear here when cluster changes occur'}
-                  </p>
-                  {activeFilters && (
+                  {canShowRoutine ? (
+                    <>
+                      <p className="text-lg">All matching activity is routine</p>
+                      <p className="text-sm mt-2 max-w-md text-center">
+                        {pluralize(routineCount, 'routine event')} {routineCount === 1 ? 'matches' : 'match'}. Warnings and failures would show here.
+                      </p>
+                      <div className="mt-4 flex items-center gap-2">
+                        <button
+                          type="button"
+                          onClick={() => onShowRoutineChange?.(true)}
+                          className="btn-brand flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm"
+                        >
+                          <Eye className="w-3.5 h-3.5" />
+                          Show routine activity
+                        </button>
+                        {activeFilters && (
+                          <button
+                            type="button"
+                            onClick={clearAllFilters}
+                            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-theme-elevated border border-theme-border rounded-lg text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary transition-colors"
+                          >
+                            <X className="w-3.5 h-3.5" />
+                            Clear filters
+                          </button>
+                        )}
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <p className="text-lg">No activity found</p>
+                      <p className="text-sm mt-2">
+                        {activeFilters || 'Activity will appear here when cluster changes occur'}
+                      </p>
+                    </>
+                  )}
+                  {activeFilters && !canShowRoutine && (
                     <button
                       type="button"
                       onClick={clearAllFilters}
@@ -478,7 +547,17 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
                 {/* Activity list */}
                 <div className="space-y-2 ml-6 border-l-2 border-theme-border pl-4">
                   {group.items.map((aggItem) => (
-                    aggItem.type === 'aggregated' ? (
+                    aggItem.type === 'folded' ? (
+                      <div
+                        key={aggItem.key}
+                        data-event-id={aggItem.latest.id}
+                        data-ts-from={new Date(aggItem.others[aggItem.others.length - 1].timestamp).getTime()}
+                        data-ts-to={new Date(aggItem.latest.timestamp).getTime()}
+                      >
+                        {renderActivityCard(aggItem.latest)}
+                        <FoldedProblems latest={aggItem.latest} others={aggItem.others} renderCard={renderActivityCard} />
+                      </div>
+                    ) : aggItem.type === 'aggregated' ? (
                       <div
                         key={`agg-${aggItem.first.id}-${aggItem.last.id}`}
                         data-event-id={aggItem.first.id}
@@ -644,7 +723,7 @@ function ActivityCard({ item, expanded, onToggle, onResourceClick, compact, sele
               {item.createdAt && (
                 <Tooltip content={`Created: ${new Date(item.createdAt).toLocaleString()}`}>
                   <span className="text-xs text-theme-text-quaternary">
-                    • {formatResourceAge(item.createdAt)} old
+                    • {formatCompactAge(item.createdAt)} old
                   </span>
                 </Tooltip>
               )}
@@ -719,6 +798,76 @@ function ActivityCard({ item, expanded, onToggle, onResourceClick, compact, sele
   )
 }
 
+const ROUTINE_ACTIVITY_INFO =
+  'The everyday steps Kubernetes takes on its own: pods being created, scheduled and started, replica sets scaling, and jobs that a CronJob ran successfully. Hidden by default to keep the list short. Warnings, failures and changes to your deployments, cron jobs and other top-level resources always show.'
+
+// Its own row under the toolbar: the filter row has no width to spare, and the
+// hide must stay visible at every width.
+function RoutineActivityToggle({ shown, count, onChange }: { shown: boolean; count: number; onChange: (shown: boolean) => void }) {
+  return (
+    <div className="flex items-center gap-1.5 border-b border-theme-border px-4 py-1.5 text-xs text-theme-text-secondary">
+      <label className="flex cursor-pointer items-center gap-1.5">
+        <input
+          type="checkbox"
+          checked={shown}
+          onChange={(e) => onChange(e.target.checked)}
+          className="h-3.5 w-3.5 rounded border-theme-border bg-theme-base"
+        />
+        Show routine activity
+      </label>
+      <Tooltip content={ROUTINE_ACTIVITY_INFO} delay={150} position="bottom" wrapperClassName="shrink-0">
+        <button type="button" aria-label="About routine activity" className="flex cursor-default rounded text-theme-text-tertiary/70 hover:text-theme-text-secondary">
+          <Info className="h-3.5 w-3.5" />
+        </button>
+      </Tooltip>
+      <span className="tabular-nums text-theme-text-tertiary">
+        · {count > 0 ? `${count.toLocaleString()} ${shown ? 'shown' : 'hidden'}` : shown ? 'none match' : 'none hidden'}
+      </span>
+    </div>
+  )
+}
+
+// What the rest of a folded group holds, in the words its rows use: each K8s
+// event reason with its count (BackOff ×8), then the status changes.
+function describeFolded(others: TimelineEvent[]): string {
+  const reasons = new Map<string, number>()
+  let changes = 0
+  for (const e of others) {
+    // A K8s event row already stands for `count` occurrences.
+    if (e.source === 'k8s_event' && e.reason) reasons.set(e.reason, (reasons.get(e.reason) ?? 0) + (e.count ?? 1))
+    else changes++
+  }
+  const parts = [...reasons.entries()].sort((a, b) => b[1] - a[1]).map(([r, n]) => (n > 1 ? `${r} ×${n}` : r))
+  if (changes > 0) parts.push(pluralize(changes, 'status change'))
+  return parts.join(', ')
+}
+
+// The rest of a child resource's problems in one time group, behind one line
+// under its newest card, so a crash-looping pod doesn't fill the list.
+function FoldedProblems({ latest, others, renderCard }: { latest: TimelineEvent; others: TimelineEvent[]; renderCard: (item: TimelineEvent) => ReactNode }) {
+  const [open, setOpen] = useState(false)
+  return (
+    <div className="pl-3">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+        className="flex items-center gap-1 rounded px-1 py-0.5 text-xs text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary"
+      >
+        <CollapseChevron open={open} inheritColor className="h-3.5 w-3.5" />
+        {others.length} more on this {latest.kind}: {describeFolded(others)}
+      </button>
+      <Collapse open={open} unmountOnExit>
+        <div className="mt-2 space-y-2 border-l-2 border-theme-border pl-3">{others.map((e) => (
+          <div key={e.id} data-event-id={e.id} data-ts-from={new Date(e.timestamp).getTime()} data-ts-to={new Date(e.timestamp).getTime()}>
+            {renderCard(e)}
+          </div>
+        ))}</div>
+      </Collapse>
+    </div>
+  )
+}
+
 // Component for aggregated repeated events (e.g., multiple OOMKilled)
 interface AggregatedActivityCardProps {
   first: TimelineEvent

package/src/components/timeline/TimelineListFold.test.tsx

@@ -0,0 +1,56 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, expect, it } from 'vitest'
+import type { TimelineEvent } from '../../types'
+import { TimelineList } from './TimelineList'
+
+const NOW = Date.now()
+const crash = (id: string, secondsAgo: number, over: Partial<TimelineEvent> = {}): TimelineEvent => ({
+  id,
+  timestamp: new Date(NOW - secondsAgo * 1000).toISOString(),
+  source: 'informer',
+  kind: 'Pod',
+  namespace: 'default',
+  name: 'api-1',
+  eventType: 'update',
+  healthState: 'unhealthy',
+  ...over,
+})
+const ROWS = [crash('newest', 10), crash('older-1', 20), crash('older-2', 30)]
+const foldAll = () => true
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+  container = document.createElement('div')
+  root = createRoot(container)
+})
+afterEach(() => {
+  act(() => root.unmount())
+})
+
+const render = (events: TimelineEvent[]) =>
+  act(async () => root.render(<TimelineList events={events} isLoading={false} foldPerResource={foldAll} />))
+const foldButton = () => [...container.querySelectorAll('button')].find((b) => /more on this Pod/.test(b.textContent ?? ''))!
+const isOpen = () => foldButton().getAttribute('aria-expanded') === 'true'
+const click = () => act(async () => foldButton().click())
+
+it('starts closed and toggles on click', async () => {
+  await render(ROWS)
+  expect(isOpen()).toBe(false)
+  await click()
+  expect(isOpen()).toBe(true)
+  await click()
+  expect(isOpen()).toBe(false)
+})
+
+it('stays open as newer rows for the same resource arrive', async () => {
+  await render(ROWS)
+  await click()
+  await render([crash('even-newer', 1), ...ROWS])
+  expect(isOpen()).toBe(true)
+  expect(foldButton().textContent).toContain('3 more on this Pod')
+})