@skyhook-io/k8s-ui 1.8.14 → 1.9.0

package/src/components/shared/EditableYamlView.tsx

@@ -6,6 +6,7 @@ import {
   RefreshCw,
   Pencil,
   Save,
+  Eye,
   XCircle,
   AlertTriangle,
 } from 'lucide-react'
@@ -13,6 +14,8 @@ import { Download } from 'lucide-react'
 import { stringify as yamlStringify } from 'yaml'
 import { CodeViewer } from '../ui/CodeViewer'
 import { YamlEditor } from '../ui/YamlEditor'
+import type { YamlSchemaLoader } from '../ui/YamlEditor'
+import { YamlReview, type YamlPreviewResult } from '../ui/YamlReview'
 import { Tooltip } from '../ui/Tooltip'
 import type { SelectedResource } from '../../types'
 import { resourceToYaml } from '../../utils/yaml'
@@ -40,20 +43,23 @@ export function SaveSuccessAnimation() {
 // ============================================================================
 
 // Get edit warning for resource types with limited editability
-function getEditWarning(kind: string): { message: string; tip: string; learnMoreUrl?: string } | null {
+function getEditWarning(
+  kind: string,
+): { message: string; tip: string; learnMoreUrl?: string } | null {
   const k = kind.toLowerCase()
   if (k === 'pods' || k === 'pod') {
     return {
       message: 'Pods have limited editability.',
       tip: 'Green highlighted lines can be changed. Edit the parent Deployment instead for other fields.',
-      learnMoreUrl: 'https://kubernetes.io/docs/concepts/workloads/pods/#pod-update-and-replacement'
+      learnMoreUrl:
+        'https://kubernetes.io/docs/concepts/workloads/pods/#pod-update-and-replacement',
     }
   }
   if (k === 'jobs' || k === 'job') {
     return {
       message: 'Jobs cannot be modified after creation.',
       tip: 'Delete and recreate the Job to make changes.',
-      learnMoreUrl: 'https://kubernetes.io/docs/concepts/workloads/controllers/job/'
+      learnMoreUrl: 'https://kubernetes.io/docs/concepts/workloads/controllers/job/',
     }
   }
   return null
@@ -77,7 +83,7 @@ function formatSaveError(error: string): { summary: string; details?: string } {
         const message = errorPart.slice(messageStart, messageEnd).trim()
         return {
           summary: `Cannot update ${target}: ${message}`,
-          details: error.length > 200 ? error : undefined
+          details: error.length > 200 ? error : undefined,
         }
       }
     }
@@ -87,7 +93,7 @@ function formatSaveError(error: string): { summary: string; details?: string } {
     if (summary) {
       return {
         summary,
-        details: error.length > 200 ? error : undefined
+        details: error.length > 200 ? error : undefined,
       }
     }
   }
@@ -95,7 +101,7 @@ function formatSaveError(error: string): { summary: string; details?: string } {
   if (error.length > 150) {
     return {
       summary: error.substring(0, 150) + '...',
-      details: error
+      details: error,
     }
   }
 
@@ -105,16 +111,28 @@ function formatSaveError(error: string): { summary: string; details?: string } {
 // Safe sessionStorage wrappers — storage can throw QuotaExceededError or be
 // blocked by browser security policies. Draft persistence is best-effort.
 function safeSessionGet(key: string): string | null {
-  try { return sessionStorage.getItem(key) } catch { return null }
+  try {
+    return sessionStorage.getItem(key)
+  } catch {
+    return null
+  }
 }
 function safeSessionSet(key: string, value: string): void {
-  try { sessionStorage.setItem(key, value) } catch { /* best-effort */ }
+  try {
+    sessionStorage.setItem(key, value)
+  } catch {
+    /* best-effort */
+  }
 }
 function safeSessionRemove(key: string): void {
-  try { sessionStorage.removeItem(key) } catch { /* best-effort */ }
+  try {
+    sessionStorage.removeItem(key)
+  } catch {
+    /* best-effort */
+  }
 }
 
-interface EditableYamlViewProps {
+export interface EditableYamlViewProps {
   resource: SelectedResource
   data: any
   onCopy: (text: string) => void
@@ -124,11 +142,32 @@ 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; force: boolean }) => Promise<void>
+  onSave?: (params: {
+    kind: string
+    namespace: string
+    name: string
+    yaml: string
+    force: boolean
+    reviewedResourceVersion?: string
+    reviewedContext?: string
+  }) => Promise<void>
   /** Whether a save is in progress */
   isSaving?: boolean
   /** Error message from the last save attempt */
   saveError?: string | null
+  onPreview?: (params: {
+    yaml: string
+    mode: 'update'
+    force: boolean
+    target: { kind: string; namespace: string; name: string }
+  }) => Promise<{
+    documents: YamlPreviewResult[]
+    nonAtomic: boolean
+    context?: string
+  }>
+  isPreviewing?: boolean
+  previewError?: string | null
+  schemaLoader?: YamlSchemaLoader
   /** Duplicate handler — opens create dialog with this resource's YAML */
   onDuplicate?: (params: { kind: string; namespace: string; name: string; yaml: string }) => void
   /**
@@ -138,7 +177,23 @@ interface EditableYamlViewProps {
   onDownload?: (content: string, mime: string, filename: string) => void
 }
 
-export function EditableYamlView({ resource, data, onCopy, copied, readOnly = false, onSaved, onSave, isSaving, saveError, onDuplicate, onDownload }: EditableYamlViewProps) {
+export function EditableYamlView({
+  resource,
+  data,
+  onCopy,
+  copied,
+  readOnly = false,
+  onSaved,
+  onSave,
+  isSaving,
+  saveError,
+  onPreview,
+  isPreviewing,
+  previewError,
+  schemaLoader,
+  onDuplicate,
+  onDownload,
+}: EditableYamlViewProps) {
   const draftKey = `radar_yaml_draft:${resource.kind}/${resource.namespace}/${resource.name}`
 
   // Restore draft from sessionStorage (e.g., after session-expiry redirect).
@@ -152,6 +207,14 @@ export function EditableYamlView({ resource, data, onCopy, copied, readOnly = fa
   // 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)
+  const [preview, setPreview] = useState<{
+    yaml: string
+    force: boolean
+    originalYaml: string
+    documents: YamlPreviewResult[]
+    nonAtomic: boolean
+    context?: string
+  } | null>(null)
 
   // Clean up restored draft flag
   useEffect(() => {
@@ -190,6 +253,7 @@ export function EditableYamlView({ resource, data, onCopy, copied, readOnly = fa
     if (readOnly) return
     setEditedYaml(resourceToYaml(data))
     setYamlErrors([])
+    setPreview(null)
     setIsEditing(true)
   }, [data, readOnly])
 
@@ -197,12 +261,34 @@ export function EditableYamlView({ resource, data, onCopy, copied, readOnly = fa
     setIsEditing(false)
     setEditedYaml('')
     setYamlErrors([])
+    setPreview(null)
   }, [])
 
   const handleSaveEdit = useCallback(async () => {
     if (yamlErrors.length > 0 || !onSave) return
 
     try {
+      if (onPreview) {
+        const result = await onPreview({
+          yaml: editedYaml,
+          mode: 'update',
+          force,
+          target: {
+            kind: resource.kind,
+            namespace: resource.namespace,
+            name: resource.name,
+          },
+        })
+        setPreview({
+          yaml: editedYaml,
+          force,
+          originalYaml: resourceToYaml(data),
+          documents: result.documents,
+          nonAtomic: result.nonAtomic,
+          context: result.context,
+        })
+        return
+      }
       await onSave({
         kind: resource.kind,
         namespace: resource.namespace,
@@ -216,7 +302,49 @@ export function EditableYamlView({ resource, data, onCopy, copied, readOnly = fa
     } catch {
       // Error handled by caller via saveError prop
     }
-  }, [onSave, resource, editedYaml, yamlErrors, onSaved, force])
+  }, [onSave, onPreview, resource, data, editedYaml, yamlErrors, onSaved, force])
+
+  const handleApplyReviewed = useCallback(async () => {
+    if (!preview || !onSave) return
+    try {
+      await onSave({
+        kind: resource.kind,
+        namespace: resource.namespace,
+        name: resource.name,
+        yaml: preview.yaml,
+        force: preview.force,
+        reviewedResourceVersion: preview.documents[0]?.reviewedResourceVersion,
+        reviewedContext: preview.context,
+      })
+      setPreview(null)
+      setIsEditing(false)
+      setEditedYaml('')
+      setTimeout(() => onSaved?.(), 1000)
+    } catch {
+      if (onPreview) {
+        try {
+          const refreshed = await onPreview({
+            yaml: preview.yaml,
+            mode: 'update',
+            force: preview.force,
+            target: {
+              kind: resource.kind,
+              namespace: resource.namespace,
+              name: resource.name,
+            },
+          })
+          setPreview({
+            ...preview,
+            documents: refreshed.documents,
+            nonAtomic: refreshed.nonAtomic,
+            context: refreshed.context,
+          })
+        } catch {
+          // Keep the last review visible when refresh is unavailable.
+        }
+      }
+    }
+  }, [preview, onSave, onPreview, resource, onSaved])
 
   const handleYamlValidate = useCallback((_isValid: boolean, errors: string[]) => {
     setYamlErrors(errors)
@@ -225,9 +353,24 @@ export function EditableYamlView({ resource, data, onCopy, copied, readOnly = fa
   const yamlContent = yamlStringify(data, { lineWidth: 0, indent: 2 })
   const editWarning = getEditWarning(resource.kind)
   const formattedError = saveError ? formatSaveError(saveError) : null
-  const isPending = isSaving ?? false
+  const isPending = (isSaving ?? false) || (isPreviewing ?? false)
 
   if (isEditing) {
+    if (preview) {
+      return (
+        <YamlReview
+          submittedYaml={preview.yaml}
+          originalYaml={preview.originalYaml}
+          documents={preview.documents}
+          nonAtomic={preview.nonAtomic}
+          force={preview.force}
+          isApplying={isSaving}
+          applyError={saveError}
+          onBack={() => setPreview(null)}
+          onApply={handleApplyReviewed}
+        />
+      )
+    }
     return (
       <div className="flex flex-col h-full">
         <div className="flex items-center justify-between px-4 py-2 border-b border-theme-border bg-theme-elevated/50">
@@ -249,10 +392,14 @@ export function EditableYamlView({ resource, data, onCopy, copied, readOnly = fa
                 <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.
+                    <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).
+                    <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>
               }
@@ -276,10 +423,18 @@ export function EditableYamlView({ resource, data, onCopy, copied, readOnly = fa
             >
               {isPending ? (
                 <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+              ) : onPreview ? (
+                <Eye className="w-3.5 h-3.5" />
               ) : (
                 <Save className="w-3.5 h-3.5" />
               )}
-              {isPending ? 'Saving...' : 'Save'}
+              {isPreviewing
+                ? 'Preparing review…'
+                : isSaving
+                  ? 'Saving…'
+                  : onPreview
+                    ? 'Review changes'
+                    : 'Save'}
             </button>
           </div>
         </div>
@@ -289,8 +444,12 @@ export function EditableYamlView({ resource, data, onCopy, copied, readOnly = fa
             <div className="flex items-start gap-2">
               <AlertTriangle className="w-4 h-4 text-amber-600 dark:text-yellow-300 mt-0.5 shrink-0" />
               <div className="text-xs">
-                <span className="font-medium text-amber-700 dark:text-yellow-300">{editWarning.message}</span>
-                <span className="text-amber-600 dark:text-yellow-300/80 ml-1">{editWarning.tip}</span>
+                <span className="font-medium text-amber-700 dark:text-yellow-300">
+                  {editWarning.message}
+                </span>
+                <span className="text-amber-600 dark:text-yellow-300/80 ml-1">
+                  {editWarning.tip}
+                </span>
                 {editWarning.learnMoreUrl && (
                   <a
                     href={editWarning.learnMoreUrl}
@@ -319,14 +478,14 @@ export function EditableYamlView({ resource, data, onCopy, copied, readOnly = fa
           </div>
         )}
 
-        {formattedError && (
+        {(formattedError || previewError) && (
           <div className="px-4 py-2 bg-red-500/10 border-b border-red-300 dark:border-red-500/30">
             <div className="flex items-start gap-2">
               <AlertTriangle className="w-4 h-4 text-red-600 dark:text-red-300 mt-0.5 shrink-0" />
               <div className="text-xs text-red-600 dark:text-red-300 flex-1">
-                <div className="font-medium">Save failed</div>
-                <div className="mt-1">{formattedError.summary}</div>
-                {formattedError.details && (
+                <div className="font-medium">{previewError ? 'Preview failed' : 'Save failed'}</div>
+                <div className="mt-1">{previewError || formattedError?.summary}</div>
+                {formattedError?.details && (
                   <button
                     onClick={() => setShowErrorDetails(!showErrorDetails)}
                     className="mt-1 text-red-500 dark:text-red-300 hover:text-red-700 dark:hover:text-red-200 underline"
@@ -334,7 +493,7 @@ export function EditableYamlView({ resource, data, onCopy, copied, readOnly = fa
                     {showErrorDetails ? 'Hide details' : 'Show details'}
                   </button>
                 )}
-                {showErrorDetails && formattedError.details && (
+                {showErrorDetails && formattedError?.details && (
                   <pre className="mt-2 p-2 bg-red-500/10 rounded text-[10px] whitespace-pre-wrap break-all max-h-40 overflow-auto">
                     {formattedError.details}
                   </pre>
@@ -349,6 +508,7 @@ export function EditableYamlView({ resource, data, onCopy, copied, readOnly = fa
             value={editedYaml}
             onChange={setEditedYaml}
             onValidate={handleYamlValidate}
+            schemaLoader={schemaLoader}
             height="100%"
             kind={resource.kind}
           />
@@ -376,7 +536,11 @@ export function EditableYamlView({ resource, data, onCopy, copied, readOnly = fa
             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"
           >
-            {copied ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
+            {copied ? (
+              <Check className="w-3.5 h-3.5 text-green-400" />
+            ) : (
+              <Copy className="w-3.5 h-3.5" />
+            )}
             Copy
           </button>
           <Tooltip content="Download manifest as YAML (server-generated fields stripped)">
@@ -391,7 +555,14 @@ export function EditableYamlView({ resource, data, onCopy, copied, readOnly = fa
           {onDuplicate && (
             <Tooltip content="Duplicate as new resource">
               <button
-                onClick={() => onDuplicate({ kind: resource.kind, namespace: resource.namespace, name: resource.name, yaml: yamlContent })}
+                onClick={() =>
+                  onDuplicate({
+                    kind: resource.kind,
+                    namespace: resource.namespace,
+                    name: resource.name,
+                    yaml: 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"
               >
                 <CopyPlus className="w-3.5 h-3.5" />

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -1077,16 +1077,29 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
     return { start, end, windowMs, now: effectiveNow }
   }, [zoom, panOffset, effectiveNow, viewWindow])
 
+  // The visible window WITHOUT the live-`now` field. Keyed on the primitive
+  // bounds so its identity changes only when the window actually moves — a live
+  // `now` tick (30s) advances `visibleTimeRange.now` for the now-line but must
+  // NOT invalidate the lane-ordering / window-clip memos below, which only care
+  // about [start,end]. This stops the heavy build from re-running on each tick
+  // while the window is static — the controlled retained lens or a paused view.
+  // (In uncontrolled live mode start/end track `effectiveNow`, so they advance
+  // every tick regardless; the win is for the static-window cases this targets.)
+  const visibleWindow = useMemo(
+    () => ({ start: visibleTimeRange.start, end: visibleTimeRange.end, windowMs: visibleTimeRange.windowMs }),
+    [visibleTimeRange.start, visibleTimeRange.end, visibleTimeRange.windowMs],
+  )
+
   // Apply the chosen ordering to the top-level lanes. 'recent' needs the visible
   // window (newest-in-view first), so this lives after visibleTimeRange. The
   // pinned section is ordered separately (strict pin order) and never flows here.
   const orderedLanes = useMemo(
     () => sortTimelineLanes(lanes, sort, {
-      windowStart: visibleTimeRange.start,
-      windowEnd: visibleTimeRange.end,
+      windowStart: visibleWindow.start,
+      windowEnd: visibleWindow.end,
       scoreOf: (lane) => lane.scoreBreakdown?.total ?? calculateInterestingness(lane),
     }),
-    [lanes, sort, visibleTimeRange],
+    [lanes, sort, visibleWindow],
   )
 
   // Live-mode order hysteresis. The importance rank recomputes every poll (recency
@@ -1147,17 +1160,17 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
   // "events" count so it's view-scoped like "resources" — a lens sitting in a
   // recording gap reads "0 resources · 0 events", not "0 resources · N events".
   const eventsInWindow = useMemo(() => {
-    const { start, end } = visibleTimeRange
+    const { start, end } = visibleWindow
     return filteredEvents.filter((e) => {
       const t = new Date(e.timestamp).getTime()
       return t >= start && t <= end
     })
-  }, [filteredEvents, visibleTimeRange])
+  }, [filteredEvents, visibleWindow])
 
   // Recording gaps clipped to the visible window, for the hatched lane bands.
   const visibleGaps = useMemo(() => {
     if (!gaps || gaps.length === 0) return []
-    const { start, end } = visibleTimeRange
+    const { start, end } = visibleWindow
     const out: TimeWindow[] = []
     for (const g of gaps) {
       const fromMs = Math.max(g.fromMs, start)
@@ -1165,7 +1178,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
       if (toMs > fromMs) out.push({ fromMs, toMs })
     }
     return out
-  }, [gaps, visibleTimeRange])
+  }, [gaps, visibleWindow])
 
   // Pin MOVES a row: pinned lanes (and pinned children inside groups) leave
   // the regular list entirely — the pinned section is their only home.
@@ -1181,7 +1194,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
 
   // Filter out lanes with no events in the visible time window
   const visibleLanes = useMemo(() => {
-    const { start, end } = visibleTimeRange
+    const { start, end } = visibleWindow
     return unpinnedLanes.filter(lane => {
       const allLaneEvents = lane.allEventsSorted || []
       return allLaneEvents.some(e => {
@@ -1189,7 +1202,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
         return t >= start && t <= end
       })
     })
-  }, [unpinnedLanes, visibleTimeRange])
+  }, [unpinnedLanes, visibleWindow])
 
   // Pinned rows: resolved from the FULL lane list (pre-window-filter, any
   // grouping) so they stay put while the lens moves and even when they have no
@@ -1203,7 +1216,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
   // Honest counts while filtered to pins: only pinned rows' in-window events.
   const pinnedEventsInWindow = useMemo(() => {
     if (pinnedLaneRows.length === 0) return 0
-    const { start, end } = visibleTimeRange
+    const { start, end } = visibleWindow
     let n = 0
     for (const lane of pinnedLaneRows) {
       for (const e of lane.allEventsSorted || []) {
@@ -1212,7 +1225,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
       }
     }
     return n
-  }, [pinnedLaneRows, visibleTimeRange])
+  }, [pinnedLaneRows, visibleWindow])
 
   const pinnedIdSet = useMemo(() => new Set((pinnedLanes ?? []).map((p) => p.id)), [pinnedLanes])
   // A pin button for a lane, or null when the host wired no pin handler. A pinned
@@ -1236,7 +1249,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
 
   // Generate time axis ticks
   const axisTicks = useMemo(() => {
-    const { start, end } = visibleTimeRange
+    const { start, end } = visibleWindow
     const ticks: { time: number; label: string }[] = []
     const span = end - start
     if (span <= 0) return ticks
@@ -1262,18 +1275,18 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
     }
 
     return ticks
-  }, [visibleTimeRange])
+  }, [visibleWindow])
 
   // Convert timestamp to X position (0-100%)
   const timeToX = useCallback(
     (timestamp: number): number => {
-      const { start, windowMs } = visibleTimeRange
+      const { start, windowMs } = visibleWindow
       // A zero-width window (host bounds with fromMs === toMs) would divide by
       // zero and emit NaN into `left:` CSS — pin everything to the left edge.
       if (windowMs <= 0) return 0
       return ((timestamp - start) / windowMs) * 100
     },
-    [visibleTimeRange]
+    [visibleWindow]
   )
 
   // Vertical grid line positions (x-percent) shared by every lane backdrop.

package/src/components/timeline/index.ts

@@ -20,8 +20,6 @@ export {
   advanceLatchedLens,
   deriveLiveSelection,
   isLensLatched,
-  quantizeBaseWindow,
   LIVE_TICK_MS,
-  BASE_QUANTIZE_STEP_MS,
   type TimelineLiveState,
 } from './timeline-live'

package/src/components/timeline/timeline-live.test.ts

@@ -1,12 +1,10 @@
 import { describe, expect, it } from 'vitest'
 import {
-  BASE_QUANTIZE_STEP_MS,
   LENS_LATCH_EPSILON_MS,
   STALE_AMBER_AFTER_MS,
   advanceLatchedLens,
   deriveLiveSelection,
   isLensLatched,
-  quantizeBaseWindow,
 } from './timeline-live'
 import { clampSelection, type ScrubberRange } from './scrubber-math'
 
@@ -20,41 +18,6 @@ describe('deriveLiveSelection', () => {
   })
 })
 
-describe('quantizeBaseWindow', () => {
-  it('floors both edges to the step', () => {
-    const step = BASE_QUANTIZE_STEP_MS
-    const q = quantizeBaseWindow(step * 3 + 12_345, step * 10 + 4_000, step)
-    expect(q).toEqual({ fromMs: step * 3, toMs: step * 10 })
-  })
-
-  it('is stable across two ticks inside the same step', () => {
-    const step = BASE_QUANTIZE_STEP_MS
-    const base = step * 100
-    // Two "now" values 30s apart but inside the same 5-minute step.
-    const a = quantizeBaseWindow(base - HOUR + 10_000, base + 10_000, step)
-    const b = quantizeBaseWindow(base - HOUR + 40_000, base + 40_000, step)
-    expect(a).toEqual(b)
-  })
-
-  it('advances once the edge crosses a step boundary', () => {
-    const step = BASE_QUANTIZE_STEP_MS
-    const before = quantizeBaseWindow(0, step - 1, step)
-    const after = quantizeBaseWindow(0, step + 1, step)
-    expect(before.toMs).toBe(0)
-    expect(after.toMs).toBe(step)
-  })
-
-  it('trailing seam never exceeds one step (covered by the 10-min live poll)', () => {
-    const step = BASE_QUANTIZE_STEP_MS
-    const now = step * 42 + 137_000
-    const q = quantizeBaseWindow(now - HOUR, now, step)
-    // Gap between the quantized right edge and now is < one step, and one step
-    // (5min) is well inside the 10-min live poll window ⇒ no data hole.
-    expect(now - q.toMs).toBeLessThan(step)
-    expect(step).toBeLessThan(10 * MIN)
-  })
-})
-
 describe('isLensLatched', () => {
   const sel: ScrubberRange = { fromMs: 0, toMs: 100 * HOUR }
 

package/src/components/timeline/timeline-live.ts

@@ -18,8 +18,8 @@ export type TimelineLiveState =
   | { kind: 'frozen'; asOfMs: number; newEventCount?: number }
 
 // Cadence the host slides a live selection at. Coarse on purpose: the precise
-// [from,to] is re-derived every tick, but the base fetch is quantized so the
-// query key only churns every QUANTIZE step (see quantizeBaseWindow).
+// [from,to] is re-derived every tick without refetching — data arrives via the
+// source's own delta polling, so the tick only moves the visible window.
 export const LIVE_TICK_MS = 30_000
 
 // A frozen selection older than this reads as stale — the chip turns amber.
@@ -30,33 +30,11 @@ export const STALE_AMBER_AFTER_MS = 15 * 60_000
 // LIVE_TICK_MS so a lens that just slid with the tick still reads as latched.
 export const LENS_LATCH_EPSILON_MS = 60_000
 
-// Base-fetch quantization step. The react-query key is keyed on the quantized
-// window, so it only changes when the live edge crosses a 5-minute boundary —
-// the seam between the quantized edge and now is covered by the 10-minute live
-// poll (5min quantization lag < 10min poll window ⇒ no hole).
-export const BASE_QUANTIZE_STEP_MS = 5 * 60_000
-
 /** LIVE selection: a width pinned to now. */
 export function deriveLiveSelection(widthMs: number, nowMs: number): ScrubberRange {
   return { fromMs: nowMs - widthMs, toMs: nowMs }
 }
 
-/**
- * Quantize a sliding [from,to] down to fixed steps so the value is stable across
- * ticks within one step (identical output ⇒ stable react-query key). Both edges
- * floor to the step; the trailing seam to `now` is filled by the live poll.
- */
-export function quantizeBaseWindow(
-  fromMs: number,
-  toMs: number,
-  stepMs: number = BASE_QUANTIZE_STEP_MS,
-): ScrubberRange {
-  return {
-    fromMs: Math.floor(fromMs / stepMs) * stepMs,
-    toMs: Math.floor(toMs / stepMs) * stepMs,
-  }
-}
-
 /**
  * True when the lens rides the selection's live edge (so it should slide with
  * the tick). A lens the user dragged into the past sits further than epsilon