@skyhook-io/k8s-ui 1.7.12 → 1.7.14

package/src/components/issues/IssuesView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import { useEffect, useMemo, useState, type ComponentType, type ReactNode } from 'react';
 import { ChevronRight, CircleCheck, Clock, ExternalLink } from 'lucide-react';
 import { ClusterName, EmptyState } from '../ui';
 import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format';
@@ -90,25 +90,48 @@ export function IssuesView({ issues, anyData, resourceHref, onResourceClick, clu
   );
 }
 
-function IssueRow({
-  issue,
-  clusterLabel,
-  open,
-  onToggle,
-  resourceHref,
-  onResourceClick,
-}: {
+export interface IssueRowSlotContext {
+  issue: Issue;
+  open: boolean;
+}
+
+export interface IssueRowProps {
   issue: Issue;
   clusterLabel?: (issue: Issue) => string | undefined;
   open: boolean;
   onToggle: () => void;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
-}) {
+  as?: 'li' | 'div';
+  className?: string;
+  dimmed?: boolean;
+  renderBadges?: (ctx: IssueRowSlotContext) => ReactNode;
+  renderMeta?: (ctx: IssueRowSlotContext) => ReactNode;
+  renderActions?: (ctx: IssueRowSlotContext) => ReactNode;
+  ResourceLinkIcon?: ComponentType<{ className?: string }>;
+}
+
+export function IssueRow({
+  issue,
+  clusterLabel,
+  open,
+  onToggle,
+  resourceHref,
+  onResourceClick,
+  as = 'li',
+  className,
+  dimmed,
+  renderBadges,
+  renderMeta,
+  renderActions,
+  ResourceLinkIcon = ExternalLink,
+}: IssueRowProps) {
   const cluster = clusterLabel?.(issue);
   const affected = affectedSummary(issue.affected);
   const { headline } = issueMessageParts(issue);
   const [renderDetails, setRenderDetails] = useState(open);
+  const Container = as;
+  const slotCtx = { issue, open };
 
   useEffect(() => {
     if (open) {
@@ -122,8 +145,12 @@ function IssueRow({
   }, [open, renderDetails]);
 
   return (
-    <li
-      className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm"
+    <Container
+      className={[
+        'overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm',
+        dimmed ? 'opacity-60' : '',
+        className ?? '',
+      ].filter(Boolean).join(' ')}
       style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 72px' }}
     >
       {/* The whole header is the single toggle target — chevron is just the
@@ -149,6 +176,7 @@ function IssueRow({
           <div className="flex min-w-0 items-baseline gap-2">
             <span className="shrink-0 text-sm font-medium text-theme-text-primary">{categoryLabel(issue.category)}</span>
             <span className={`badge-sm shrink-0 self-center text-[10px] ${groupBadgeClass(issue.category_group)}`}>{groupLabel(issue.category_group)}</span>
+            {renderBadges?.(slotCtx)}
             {/* The detector reason/message rides the title row so the most
                 useful triage signal is visible without expanding — it fills
                 the otherwise-empty band between the title and the severity
@@ -180,6 +208,7 @@ function IssueRow({
                 <span className="shrink-0 tabular-nums">{affected}</span>
               </>
             ) : null}
+            {renderMeta?.(slotCtx)}
           </div>
         </div>
 
@@ -203,6 +232,7 @@ function IssueRow({
         <span className={`badge-sm shrink-0 text-[10px] font-semibold ${ISSUE_SEVERITY_BADGE_CLASS[issue.severity]}`}>
           {ISSUE_SEVERITY_LABEL[issue.severity]}
         </span>
+        {renderActions?.(slotCtx)}
       </div>
 
       {renderDetails ? (
@@ -218,16 +248,16 @@ 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} />
+                <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
                 <div className="border-t border-theme-border/70 pt-3">
-                  <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} />
+                  <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
                 </div>
               </div>
             </div>
           </div>
         </div>
       ) : null}
-    </li>
+    </Container>
   );
 }
 
@@ -316,10 +346,12 @@ function DiagnosticContext({
   issue,
   resourceHref,
   onResourceClick,
+  ResourceLinkIcon,
 }: {
   issue: Issue;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
+  ResourceLinkIcon: ComponentType<{ className?: string }>;
 }) {
   const ctx = issue.diagnostic_context;
   const facts = ctx?.facts?.filter((fact) => fact.message || fact.refs?.length || fact.related_issues?.length) ?? [];
@@ -347,6 +379,7 @@ function DiagnosticContext({
                     refForLink={memberRef(issue, related.ref)}
                     resourceHref={resourceHref}
                     onResourceClick={onResourceClick}
+                    ResourceLinkIcon={ResourceLinkIcon}
                   />
                 ))}
               </ul>
@@ -359,6 +392,7 @@ function DiagnosticContext({
                     refForLink={memberRef(issue, ref)}
                     resourceHref={resourceHref}
                     onResourceClick={onResourceClick}
+                    ResourceLinkIcon={ResourceLinkIcon}
                   />
                 ))}
               </ul>
@@ -424,10 +458,12 @@ function AffectedResources({
   issue,
   resourceHref,
   onResourceClick,
+  ResourceLinkIcon,
 }: {
   issue: Issue;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
+  ResourceLinkIcon: ComponentType<{ className?: string }>;
 }) {
   const members = issue.members ?? [];
   // count is the backend fan-out size (members, subject excluded — see
@@ -439,7 +475,7 @@ function AffectedResources({
           first deep-link; members (the folded pods) follow. ResourceLine emits
           an <li>, so it needs a list parent of its own. */}
       <ul className="flex flex-col gap-px">
-        <ResourceLine label="Subject" refForLink={subjectRef(issue)} resourceHref={resourceHref} onResourceClick={onResourceClick} />
+        <ResourceLine label="Subject" refForLink={subjectRef(issue)} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
       </ul>
       {members.length > 0 && (
         <>
@@ -453,6 +489,7 @@ function AffectedResources({
                 refForLink={memberRef(issue, m)}
                 resourceHref={resourceHref}
                 onResourceClick={onResourceClick}
+                ResourceLinkIcon={ResourceLinkIcon}
               />
             ))}
           </ul>
@@ -472,11 +509,13 @@ function ResourceLine({
   refForLink,
   resourceHref,
   onResourceClick,
+  ResourceLinkIcon,
 }: {
   label?: string;
   refForLink: IssueResourceRef;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
+  ResourceLinkIcon: ComponentType<{ className?: string }>;
 }) {
   const r = refForLink;
   const linkable = !!(onResourceClick || resourceHref);
@@ -488,7 +527,7 @@ function ResourceLine({
         {r.namespace ? `${r.namespace} / ` : ''}
         {r.name}
       </span>
-      {linkable && <ExternalLink className="h-3 w-3 shrink-0 text-theme-text-tertiary opacity-0 transition-opacity group-hover/r:opacity-100" />}
+      {linkable && <ResourceLinkIcon className="h-3 w-3 shrink-0 text-theme-text-tertiary opacity-0 transition-opacity group-hover/r:opacity-100" />}
     </>
   );
   const cls = 'group/r flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-sm transition-colors hover:bg-theme-hover/60';

package/src/components/issues/index.ts

@@ -2,8 +2,8 @@
 // module-internal and don't collide at the top-level barrel with the Checks
 // queue's identically-named helpers when both land. Issue-prefixed public
 // names are safe to surface.
-export { IssuesView } from './IssuesView';
-export type { IssuesViewProps } from './IssuesView';
+export { IssueRow, IssuesView } from './IssuesView';
+export type { IssueRowProps, IssueRowSlotContext, IssuesViewProps } from './IssuesView';
 export {
   ISSUE_SEVERITIES,
   ISSUE_SEVERITY_RANK,

package/src/components/issues/issues.test.ts

@@ -28,6 +28,13 @@ describe('compareIssues', () => {
     expect([older, newer].sort(compareIssues).map((i) => i.id)).toEqual(['n', 'o'])
   })
 
+  it('orders direct startup blockers before generic problem rows at same severity', () => {
+    const generic = mk({ id: 'generic', source: 'problem', first_seen: '2026-05-01T00:00:00Z' })
+    const blocker = mk({ id: 'blocker', source: 'scheduling', first_seen: '2026-01-01T00:00:00Z' })
+    const missing = mk({ id: 'missing', source: 'missing_ref', first_seen: '2026-03-01T00:00:00Z' })
+    expect([generic, blocker, missing].sort(compareIssues).map((i) => i.id)).toEqual(['blocker', 'missing', 'generic'])
+  })
+
   it('does NOT reshuffle same-severity rows when only last_seen changes (anti-churn)', () => {
     // Two same-severity rows, same first_seen — order is the deterministic name tiebreak.
     const a = mk({ id: 'id-a', name: 'a', first_seen: '2026-01-01T00:00:00Z', last_seen: '2026-05-01T00:00:00Z' })

package/src/components/issues/types.ts

@@ -24,6 +24,13 @@ export const ISSUE_SEVERITY_RANK: Record<IssueSeverity, number> = {
   warning: 1,
 };
 
+const ISSUE_SOURCE_RANK: Record<string, number> = {
+  scheduling: 4,
+  missing_ref: 3,
+  condition: 2,
+  problem: 1,
+};
+
 export function isIssueSeverity(s: string): s is IssueSeverity {
   return s === 'critical' || s === 'warning';
 }
@@ -209,15 +216,18 @@ export function memberRef(issue: Issue, member: IssueResourceRef): IssueResource
 
 /**
  * compareIssues is the queue's stable sort order (extracted from IssuesView so
- * it can be unit-tested). Severity first (critical before warning), then ONSET
- * — first_seen DESC, deliberately NOT last_seen: last_seen bumps to compose-time
- * on every poll, so sorting by it would reshuffle same-severity rows on each
- * refetch. The remaining keys (cluster → namespace → name → id) are a fully
- * deterministic tiebreak so the order never churns under auto-refresh.
+ * it can be unit-tested). Severity first (critical before warning), then
+ * direct-blocker source priority, then ONSET — first_seen DESC, deliberately
+ * NOT last_seen: last_seen bumps to compose-time on every poll, so sorting by
+ * it would reshuffle same-severity rows on each refetch. The remaining keys
+ * (cluster → namespace → name → id) are a fully deterministic tiebreak so the
+ * order never churns under auto-refresh.
  */
 export function compareIssues(a: Issue, b: Issue): number {
   const r = ISSUE_SEVERITY_RANK[b.severity] - ISSUE_SEVERITY_RANK[a.severity];
   if (r !== 0) return r;
+  const sr = (ISSUE_SOURCE_RANK[b.source] ?? 0) - (ISSUE_SOURCE_RANK[a.source] ?? 0);
+  if (sr !== 0) return sr;
   const fa = a.first_seen ?? '';
   const fb = b.first_seen ?? '';
   if (fa !== fb) return fb.localeCompare(fa);

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -90,18 +90,21 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     setFetchError(null)
     try {
       const result = await fetchAll({ container: selectedContainer || undefined, tailLines, sinceSeconds })
+      // Older backends marshal empty results as null rather than [].
+      const resultPods = result.pods ?? []
+      const resultLogs = result.logs ?? []
 
-      setPods(result.pods)
+      setPods(resultPods)
 
-      if (!podsInitialized.current && result.pods.length > 0) {
+      if (!podsInitialized.current && resultPods.length > 0) {
         podsInitialized.current = true
-        setSelectedPods(new Set(result.pods.map(p => p.name)))
+        setSelectedPods(new Set(resultPods.map(p => p.name)))
       }
 
       const indexByPod = new Map<string, number>()
-      result.pods.forEach((pod, i) => indexByPod.set(pod.name, i))
+      resultPods.forEach((pod, i) => indexByPod.set(pod.name, i))
 
-      set(result.logs.map(log => ({
+      set(resultLogs.map(log => ({
         timestamp: log.timestamp,
         content: log.content,
         container: log.container,

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

@@ -174,12 +174,13 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
 
   return (
     <>
-      {/* Scaling in progress banner */}
+      {/* Scaling in progress banner — amber: replicas short of desired is an
+          attention state, not an info note (it may be a stuck rollout). */}
       {(scaledTo !== null || progressMessage) && !hasProblems && (
-        <div className="mb-4 p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg">
+        <div className="mb-4 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
           <div className="flex items-center gap-2">
-            <Loader2 className="w-4 h-4 text-blue-400 animate-spin shrink-0" />
-            <div className="text-sm text-blue-300">
+            <Loader2 className="w-4 h-4 text-amber-500 animate-spin shrink-0" />
+            <div className="text-sm text-amber-700 dark:text-amber-300">
               {progressMessage || `Scaling to ${scaledTo} replicas...`}
             </div>
           </div>

package/src/components/shared/DetailShell.tsx

@@ -30,6 +30,8 @@ export interface DetailShellProps<TId extends string = string> {
   onTabChange: (id: TId) => void
   tabStripEnd?: ReactNode
   overlay?: ReactNode
+  /** Hide breadcrumb/identity/header actions when a host page already owns that chrome. */
+  compactHeader?: boolean
   children: ReactNode
 }
 
@@ -44,6 +46,7 @@ export function DetailShell<TId extends string = string>({
   onTabChange,
   tabStripEnd,
   overlay,
+  compactHeader = false,
   children,
 }: DetailShellProps<TId>) {
   const visibleTabs = tabs.filter((t) => !t.hidden)
@@ -52,15 +55,19 @@ export function DetailShell<TId extends string = string>({
     <div className="flex flex-col h-full w-full bg-theme-surface">
       {/* Header */}
       <div className="shrink-0 border-b border-theme-border bg-theme-surface">
-        {breadcrumb && <div className="px-6 pt-2.5">{breadcrumb}</div>}
-        <div className={clsx('px-6 flex items-start gap-4', breadcrumb ? 'pb-3 pt-1.5' : 'py-3')}>
-          {nav}
-          <div className="flex-1 min-w-0">{identity}</div>
-          {headerActions}
-        </div>
+        {!compactHeader && (
+          <>
+            {breadcrumb && <div className="px-6 pt-2.5">{breadcrumb}</div>}
+            <div className={clsx('px-6 flex items-start gap-4', breadcrumb ? 'pb-3 pt-1.5' : 'py-3')}>
+              {nav}
+              <div className="flex-1 min-w-0">{identity}</div>
+              {headerActions}
+            </div>
+          </>
+        )}
 
         {/* Tabs (left) + scope controls / actions (right) */}
-        <div className="px-6 flex items-center border-t border-theme-border">
+        <div className={clsx('flex items-center', compactHeader ? 'px-0' : 'border-t border-theme-border px-6')}>
           <div className="flex gap-1" role="tablist">
             {visibleTabs.map((t) => (
               <DetailShellTabButton key={t.id} active={activeTab === t.id} onClick={() => onTabChange(t.id)}>

package/src/components/shared/EditableYamlView.tsx

@@ -66,19 +66,27 @@ function formatSaveError(error: string): { summary: string; details?: string } {
     const errorPart = parts[1]?.trim() || ''
 
     if (errorPart.includes('Forbidden:')) {
-      const forbiddenMatch = errorPart.match(/([^:]+):\s*Forbidden:\s*([^.{]+)/)
-      if (forbiddenMatch) {
+      const forbiddenAt = errorPart.indexOf(': Forbidden:')
+      if (forbiddenAt > 0) {
+        const target = errorPart.slice(0, forbiddenAt).trim()
+        const messageStart = forbiddenAt + ': Forbidden:'.length
+        const dotAt = errorPart.indexOf('.', messageStart)
+        const braceAt = errorPart.indexOf('{', messageStart)
+        const endCandidates = [dotAt, braceAt].filter((i) => i >= 0)
+        const messageEnd = endCandidates.length ? Math.min(...endCandidates) : errorPart.length
+        const message = errorPart.slice(messageStart, messageEnd).trim()
         return {
-          summary: `Cannot update ${forbiddenMatch[1]}: ${forbiddenMatch[2].trim()}`,
+          summary: `Cannot update ${target}: ${message}`,
           details: error.length > 200 ? error : undefined
         }
       }
     }
 
-    const summaryMatch = errorPart.match(/^([^{]+)/)
-    if (summaryMatch) {
+    const braceAt = errorPart.indexOf('{')
+    const summary = (braceAt >= 0 ? errorPart.slice(0, braceAt) : errorPart).trim()
+    if (summary) {
       return {
-        summary: summaryMatch[1].trim(),
+        summary,
         details: error.length > 200 ? error : undefined
       }
     }
@@ -111,6 +119,8 @@ interface EditableYamlViewProps {
   data: any
   onCopy: (text: string) => void
   copied: boolean
+  /** Hide edit affordances when the host surface is read-only. */
+  readOnly?: boolean
   /** Called after a successful save so the parent can refetch */
   onSaved?: () => void
   /** Save handler — injected by the platform wrapper */
@@ -128,13 +138,13 @@ interface EditableYamlViewProps {
   onDownload?: (content: string, mime: string, filename: string) => void
 }
 
-export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSave, isSaving, saveError, onDuplicate, onDownload }: EditableYamlViewProps) {
+export function EditableYamlView({ resource, data, onCopy, copied, readOnly = false, onSaved, onSave, isSaving, saveError, onDuplicate, onDownload }: EditableYamlViewProps) {
   const draftKey = `radar_yaml_draft:${resource.kind}/${resource.namespace}/${resource.name}`
 
   // Restore draft from sessionStorage (e.g., after session-expiry redirect).
   // All sessionStorage calls are wrapped in try-catch — storage can throw
   // QuotaExceededError or be blocked by browser security policies.
-  const savedDraft = useRef(safeSessionGet(draftKey))
+  const savedDraft = useRef(readOnly ? null : safeSessionGet(draftKey))
   const [isEditing, setIsEditing] = useState(savedDraft.current !== null)
   const [editedYaml, setEditedYaml] = useState(savedDraft.current ?? '')
   const [yamlErrors, setYamlErrors] = useState<string[]>([])
@@ -153,12 +163,19 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
 
   // Autosave draft to sessionStorage while editing (best-effort)
   useEffect(() => {
+    if (readOnly) {
+      setIsEditing(false)
+      setEditedYaml('')
+      setYamlErrors([])
+      safeSessionRemove(draftKey)
+      return
+    }
     if (isEditing && editedYaml) {
       safeSessionSet(draftKey, editedYaml)
     } else {
       safeSessionRemove(draftKey)
     }
-  }, [isEditing, editedYaml, draftKey])
+  }, [isEditing, editedYaml, draftKey, readOnly])
 
   const handleDownload = useCallback(() => {
     const yaml = resourceToYaml(data)
@@ -170,10 +187,11 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
   }, [data, resource.kind, resource.name, onDownload])
 
   const handleStartEdit = useCallback(() => {
+    if (readOnly) return
     setEditedYaml(resourceToYaml(data))
     setYamlErrors([])
     setIsEditing(true)
-  }, [data])
+  }, [data, readOnly])
 
   const handleCancelEdit = useCallback(() => {
     setIsEditing(false)
@@ -345,13 +363,15 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
       <div className="flex items-center justify-between mb-2">
         <span className="text-sm font-medium text-theme-text-secondary">YAML</span>
         <div className="flex items-center gap-2">
-          <button
-            onClick={handleStartEdit}
-            className="flex items-center gap-1 px-2 py-1 text-xs text-blue-400 hover:text-blue-300 hover:bg-theme-elevated rounded"
-          >
-            <Pencil className="w-3.5 h-3.5" />
-            Edit
-          </button>
+          {!readOnly && (
+            <button
+              onClick={handleStartEdit}
+              className="flex items-center gap-1 px-2 py-1 text-xs text-blue-400 hover:text-blue-300 hover:bg-theme-elevated rounded"
+            >
+              <Pencil className="w-3.5 h-3.5" />
+              Edit
+            </button>
+          )}
           <button
             onClick={() => onCopy(yamlContent)}
             className="flex items-center gap-1 px-2 py-1 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"

package/src/components/shared/ResourceActionsBar.tsx

@@ -23,7 +23,7 @@ import { ForceDeleteConfirmDialog, type CascadeDependent } from '../ui/ForceDele
 import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { DialogPortal } from '../ui/DialogPortal'
 import type { SelectedResource, WorkloadRevision } from '../../types'
-import { formatKindName } from '../ui/drawer-components'
+import { displayKindName } from '../ui/drawer-components'
 import { getDefaultContainerName } from '../resources/resource-utils'
 
 // ============================================================================
@@ -517,20 +517,20 @@ export function ResourceActionsBar({
           <Tooltip
             content={
               onCompareTo && onCompareAcrossClusters
-                ? `Compare ${formatKindName(resource.kind).toLowerCase()}`
+                ? `Compare ${displayKindName(resource.kind, data?.kind).toLowerCase()}`
                 : onCompareAcrossClusters
                   ? `Compare across clusters`
-                  : `Compare to another ${formatKindName(resource.kind).toLowerCase()}`
+                  : `Compare to another ${displayKindName(resource.kind, data?.kind).toLowerCase()}`
             }
           >
             <button
               onClick={onCompareTo ?? onCompareAcrossClusters}
               aria-label={
                 onCompareTo && onCompareAcrossClusters
-                  ? `Compare ${formatKindName(resource.kind).toLowerCase()}`
+                  ? `Compare ${displayKindName(resource.kind, data?.kind).toLowerCase()}`
                   : onCompareAcrossClusters
                     ? `Compare across clusters`
-                    : `Compare to another ${formatKindName(resource.kind).toLowerCase()}`
+                    : `Compare to another ${displayKindName(resource.kind, data?.kind).toLowerCase()}`
               }
               className="p-1.5 text-theme-text-secondary border border-theme-border-light rounded-lg hover:text-theme-text-primary hover:bg-theme-elevated transition-colors flex items-center"
             >
@@ -577,7 +577,7 @@ export function ResourceActionsBar({
         onClose={() => setShowDeleteConfirm(false)}
         onConfirm={handleDeleteConfirm}
         resourceName={resource.name}
-        resourceKind={formatKindName(resource.kind)}
+        resourceKind={displayKindName(resource.kind, data?.kind)}
         namespaceName={resource.namespace}
         isLoading={isDeleting ?? false}
         cascadeDependents={cascadeDependents}

package/src/components/timeline/TimelineList.tsx

@@ -1,11 +1,11 @@
-import { useState, useMemo, useRef, useEffect } from 'react'
+import { useState, useMemo, useEffect } from 'react'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { PaneLoader } from '../ui/PaneLoader'
+import { SearchBox } from '../ui/SearchBox'
 import {
   AlertCircle,
   CheckCircle,
   Clock,
-  Search,
   RefreshCw,
   ChevronRight,
   Filter,
@@ -24,7 +24,6 @@ import { ResourceRefBadge } from '../ui/drawer-components'
 import type { NavigateToResource } from '../../utils/navigation'
 import { kindToPlural, refToSelectedResource, apiVersionToGroup } from '../../utils/navigation'
 import { pluralize } from '../../utils/pluralize'
-import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
 
 /** Format resource age (e.g., "3d", "5h", "10m") */
 function formatResourceAge(createdAt: string): string {
@@ -87,29 +86,11 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
   const [timeRange, setTimeRange] = useState<TimeRange>(initialTimeRange ?? '1h')
   const [kindFilter, setKindFilter] = useState<string>('')
   const [expandedItem, setExpandedItem] = useState<string | null>(null)
-  const searchInputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     onQueryChange?.({ timeRange, kind: kindFilter || undefined })
   }, [timeRange, kindFilter, onQueryChange])
 
-  // Keyboard shortcut: / to focus search
-  useRegisterShortcut({
-    id: 'timeline-list-search',
-    keys: '/',
-    description: 'Focus search',
-    category: 'Search',
-    scope: 'timeline',
-    handler: () => searchInputRef.current?.focus(),
-  })
-  useRegisterShortcut({
-    id: 'timeline-list-escape',
-    keys: 'Escape',
-    description: 'Blur search',
-    category: 'Search',
-    scope: 'timeline',
-    handler: () => searchInputRef.current?.blur(),
-  })
 
   const [handleRefresh, isRefreshAnimating] = useRefreshAnimation(onRefresh ?? (() => {}))
 
@@ -278,17 +259,7 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
       {/* Toolbar */}
       <div className="flex items-center gap-4 px-4 py-3 border-b border-theme-border bg-theme-surface/50 flex-wrap">
         {/* Search */}
-        <div className="flex-1 relative min-w-[200px]">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
-          <input
-            ref={searchInputRef}
-            type="text"
-            placeholder="Search... (press /)"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full max-w-md pl-10 pr-4 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
-        </div>
+        <SearchBox value={searchTerm} onChange={setSearchTerm} scope="timeline" shortcutId="timeline-list-search" className="flex-1 min-w-[200px] max-w-md" />
 
         {/* Activity type filter */}
         <div className="flex items-center gap-1 bg-theme-elevated rounded-lg p-1">

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -7,7 +7,6 @@ import {
   ZoomIn,
   ZoomOut,
   ChevronRight,
-  Search,
   X,
   List,
   GanttChart,
@@ -27,6 +26,7 @@ import type { TimelineEvent, Topology } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
 import { kindToPlural, apiVersionToGroup } from '../../utils/navigation'
 import { PaneLoader } from '../ui/PaneLoader'
+import { SearchBox } from '../ui/SearchBox'
 import { pluralize } from '../../utils/pluralize'
 import { gitOpsRouteForKind } from '../../utils/gitops-route'
 import { isChangeEvent, isHistoricalEvent, isOperation, displayKind } from '../../types'
@@ -194,7 +194,6 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
     onResourceClick?.({ kind: kindToPlural(kind), namespace, name, group })
   }, [onNavigatePath, onResourceClick])
   const containerRef = useRef<HTMLDivElement>(null)
-  const searchInputRef = useRef<HTMLInputElement>(null)
   const [zoom, setZoom] = useState(1)
   const [panOffset, setPanOffset] = useState(0)
   const [selectedEvent, setSelectedEvent] = useState<TimelineEvent | null>(null)
@@ -241,23 +240,14 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
   }, [events, hasAutoZoomed])
 
   // Keyboard shortcuts
-  useRegisterShortcut({
-    id: 'swimlane-search',
-    keys: '/',
-    description: 'Focus search',
-    category: 'Search',
-    scope: 'timeline',
-    handler: () => searchInputRef.current?.focus(),
-  })
   useRegisterShortcut({
     id: 'swimlane-escape',
     keys: 'Escape',
-    description: 'Close detail / blur search',
+    description: 'Close event detail',
     category: 'Timeline',
     scope: 'timeline',
     handler: () => {
       if (selectedEvent) setSelectedEvent(null)
-      else searchInputRef.current?.blur()
     },
   })
 
@@ -467,25 +457,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
         <div className="flex items-center justify-between px-4 py-2">
           <div className="flex items-center gap-4">
             {/* Search */}
-            <div className="relative">
-              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
-              <input
-                ref={searchInputRef}
-                type="text"
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                placeholder="Search... (press /)"
-                className="w-80 pl-9 pr-8 py-1.5 text-sm bg-theme-elevated border border-theme-border-light rounded-lg text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
-              />
-              {searchTerm && (
-                <button
-                  onClick={() => setSearchTerm('')}
-                  className="absolute right-2 top-1/2 -translate-y-1/2 text-theme-text-tertiary hover:text-theme-text-primary"
-                >
-                  <X className="w-4 h-4" />
-                </button>
-              )}
-            </div>
+            <SearchBox value={searchTerm} onChange={setSearchTerm} scope="timeline" shortcutId="swimlane-search" className="w-80" />
             {/* Zoom controls */}
             <div className="flex items-center gap-2">
               <button