From 5d1ce6b6d42d8bec44682d4522b9d8bcf2949dc7 Mon Sep 17 00:00:00 2001
From: Tegan Churchill <tegan.churchill@temporal.io>
Date: Thu, 25 Jun 2026 13:32:38 -0700
Subject: [PATCH 1/2] feat(timeline): collapse idle event timespans (DT-3929)

Squash-rebase of the collapse-idle-time feature onto SharedHistoryBuffer's
timeline performance rewrite (window virtualization, grouped-event-buffer,
sticky-canvas scroll compositing, imperative panel-shift transforms).

The collapse feature is layered onto SHB's architecture in the
timeline-graph/ directory layout:
- X-axis time->pixel projection flows through the collapse-aware
  TimelineScale/Viewport (projectX); SHB's Y-axis row virtualization and
  imperative active-panel transform are preserved. The two axes are
  orthogonal so they compose cleanly.
- validTimeToDate routes its parse through SHB's cachedParseJSON, keeping the
  session parse cache inside the feature's abstraction.

Reconciliations where the two approaches were mutually exclusive:
- Dropped the per-row position cache: it keyed on (width,y,len) and would
  serve stale points when collapse toggles; its parseJSON cost is now
  covered by cachedParseJSON.
- Kept SHB's CSS grid background and label-only axis (the axis ticks are no
  longer collapse-aware; collapsed regions are still marked by the overlay).
- group-details-row uses SHB's ResizeObserver/onHeight panel-height path
  instead of the $activeGroupHeight store.

Includes one fix to a pre-existing SHB type error in
svg/timeline-graph-row-rendering.test.ts (literal-narrowed comparison).
---
 .../lines-and-dots/end-time-interval.svelte   |   2 +-
 .../components/lines-and-dots/svg/dot.svelte  |   2 +-
 .../svg/timeline-graph-row-rendering.test.ts  |   2 +-
 .../graph-widget.svelte                       |  18 +-
 .../group-details-row.svelte                  |  22 ++-
 .../timeline-axis.svelte                      |  19 +-
 .../timeline-collapsed-layer.svelte           | 183 ++++++++++++++++++
 .../timeline-graph-row.svelte                 | 108 ++++-------
 .../timeline-graph.svelte                     |  74 +++++--
 .../timeline-graph/timeline-scale.svelte.ts   | 160 +++++++++++++++
 .../timeline-graph/timeline.svelte.test.ts    | 119 ++++++++++++
 .../timeline-graph/timeline.svelte.ts         | 182 +++++++++++++++++
 .../lines-and-dots/timeline-graph/timespan.ts |  80 ++++++++
 .../lines-and-dots/timeline-graph/types.ts    |   8 +
 .../utils/build-time-segments.ts              | 109 +++++++++++
 .../timeline-graph/viewport.svelte.ts         |  33 ++++
 .../workflow-row.svelte                       |   7 +-
 src/lib/holocene/icon/paths.ts                |   6 +
 src/lib/holocene/icon/svg/minus.svelte        |   8 +
 src/lib/holocene/icon/svg/plus.svelte         |   8 +
 .../icon/svg/timeline-collapse.svelte         |  23 +++
 src/lib/holocene/tooltip.svelte               |   8 +-
 src/lib/i18n/locales/en/workflows.ts          |   4 +
 .../layouts/workflow-timeline-layout.svelte   |  37 +++-
 src/lib/stores/event-view.ts                  |   5 +
 src/lib/utilities/format-time.test.ts         | 162 ++++++++++++++++
 src/lib/utilities/format-time.ts              | 107 +++++++---
 src/lib/utilities/type-predicates.ts          |   5 +
 .../timeline-collapse-idle-time.spec.ts       |  98 ++++++++++
 29 files changed, 1450 insertions(+), 149 deletions(-)
 rename src/lib/components/lines-and-dots/{svg => timeline-graph}/graph-widget.svelte (84%)
 rename src/lib/components/lines-and-dots/{svg => timeline-graph}/group-details-row.svelte (88%)
 rename src/lib/components/lines-and-dots/{svg => timeline-graph}/timeline-axis.svelte (71%)
 create mode 100644 src/lib/components/lines-and-dots/timeline-graph/timeline-collapsed-layer.svelte
 rename src/lib/components/lines-and-dots/{svg => timeline-graph}/timeline-graph-row.svelte (75%)
 rename src/lib/components/lines-and-dots/{svg => timeline-graph}/timeline-graph.svelte (91%)
 create mode 100644 src/lib/components/lines-and-dots/timeline-graph/timeline-scale.svelte.ts
 create mode 100644 src/lib/components/lines-and-dots/timeline-graph/timeline.svelte.test.ts
 create mode 100644 src/lib/components/lines-and-dots/timeline-graph/timeline.svelte.ts
 create mode 100644 src/lib/components/lines-and-dots/timeline-graph/timespan.ts
 create mode 100644 src/lib/components/lines-and-dots/timeline-graph/types.ts
 create mode 100644 src/lib/components/lines-and-dots/timeline-graph/utils/build-time-segments.ts
 create mode 100644 src/lib/components/lines-and-dots/timeline-graph/viewport.svelte.ts
 rename src/lib/components/lines-and-dots/{svg => timeline-graph}/workflow-row.svelte (92%)
 create mode 100644 src/lib/holocene/icon/svg/minus.svelte
 create mode 100644 src/lib/holocene/icon/svg/plus.svelte
 create mode 100644 src/lib/holocene/icon/svg/timeline-collapse.svelte
 create mode 100644 src/lib/utilities/type-predicates.ts
 create mode 100644 tests/integration/timeline-collapse-idle-time.spec.ts

diff --git a/src/lib/components/lines-and-dots/end-time-interval.svelte b/src/lib/components/lines-and-dots/end-time-interval.svelte
index 6f92d452ea..aa7ca0776b 100644
--- a/src/lib/components/lines-and-dots/end-time-interval.svelte
+++ b/src/lib/components/lines-and-dots/end-time-interval.svelte
@@ -9,7 +9,7 @@
   export let workflow: WorkflowExecution;
   export let startTime: string | Timestamp;
 
-  let currentTime = Date.now();
+  export let currentTime = Date.now();
 
   const rightNow = () => {
     currentTime = Date.now();
diff --git a/src/lib/components/lines-and-dots/svg/dot.svelte b/src/lib/components/lines-and-dots/svg/dot.svelte
index eed730914a..7c65fe233a 100644
--- a/src/lib/components/lines-and-dots/svg/dot.svelte
+++ b/src/lib/components/lines-and-dots/svg/dot.svelte
@@ -10,7 +10,7 @@
   type Props = {
     point: [number, number];
     category?: string;
-    classification?: string;
+    classification?: string | null;
     r?: number;
     icon?: TimelineIconName;
     strokeWidth?: number;
diff --git a/src/lib/components/lines-and-dots/svg/timeline-graph-row-rendering.test.ts b/src/lib/components/lines-and-dots/svg/timeline-graph-row-rendering.test.ts
index 6cf1217a85..94049d266e 100644
--- a/src/lib/components/lines-and-dots/svg/timeline-graph-row-rendering.test.ts
+++ b/src/lib/components/lines-and-dots/svg/timeline-graph-row-rendering.test.ts
@@ -371,7 +371,7 @@ describe('category → dot icon selection', () => {
   it('paused state overrides to "pause" icon (second dot)', () => {
     const pauseTime = '2024-01-01T00:00:10Z';
     // index !== 0 && pauseTime → 'pause'
-    const index = 1;
+    const index: number = 1;
     const icon = pauseTime && index !== 0 ? 'pause' : 'activity';
     expect(icon).toBe('pause');
   });
diff --git a/src/lib/components/lines-and-dots/svg/graph-widget.svelte b/src/lib/components/lines-and-dots/timeline-graph/graph-widget.svelte
similarity index 84%
rename from src/lib/components/lines-and-dots/svg/graph-widget.svelte
rename to src/lib/components/lines-and-dots/timeline-graph/graph-widget.svelte
index b2f898db0e..8fcdcfcd52 100644
--- a/src/lib/components/lines-and-dots/svg/graph-widget.svelte
+++ b/src/lib/components/lines-and-dots/timeline-graph/graph-widget.svelte
@@ -44,12 +44,14 @@
 </script>
 
 {#await getWorkflowAndEventHistory() then { workflow, history }}
-  <div class="cursor-pointer overflow-auto {className}">
-    <TimelineGraph
-      {viewportHeight}
-      {workflow}
-      groups={createGroups(workflow, history)}
-      readOnly
-    />
-  </div>
+  {#if workflow}
+    <div class="cursor-pointer overflow-auto {className}">
+      <TimelineGraph
+        {viewportHeight}
+        {workflow}
+        groups={createGroups(workflow, history)}
+        readOnly
+      />
+    </div>
+  {/if}
 {/await}
diff --git a/src/lib/components/lines-and-dots/svg/group-details-row.svelte b/src/lib/components/lines-and-dots/timeline-graph/group-details-row.svelte
similarity index 88%
rename from src/lib/components/lines-and-dots/svg/group-details-row.svelte
rename to src/lib/components/lines-and-dots/timeline-graph/group-details-row.svelte
index 7380fbfcef..14ad57d9f6 100644
--- a/src/lib/components/lines-and-dots/svg/group-details-row.svelte
+++ b/src/lib/components/lines-and-dots/timeline-graph/group-details-row.svelte
@@ -67,7 +67,7 @@
     if (group?.pendingActivity) {
       if (group.pendingActivity.paused) {
         status = translate('workflows.paused');
-      } else if (group.pendingActivity.attempt > 1) {
+      } else if ((group.pendingActivity.attempt ?? 0) > 1) {
         status = translate('events.event-classification.retrying');
       } else {
         status = translate('events.event-classification.pending');
@@ -114,15 +114,17 @@
         <div class="surface-primary p-4">
           <div class="font-medium leading-4 text-secondary">Child Workflow</div>
           {#key group.eventList.length}
-            <GraphWidget
-              {namespace}
-              workflowId={childWorkflowStartedEvent.attributes.workflowExecution
-                .workflowId}
-              runId={childWorkflowStartedEvent.attributes.workflowExecution
-                .runId}
-              viewportHeight={320}
-              class="surface-primary overflow-x-hidden border-t border-subtle"
-            />
+            {#if childWorkflowStartedEvent.attributes.workflowExecution?.workflowId}
+              <GraphWidget
+                {namespace}
+                workflowId={childWorkflowStartedEvent.attributes
+                  .workflowExecution.workflowId}
+                runId={childWorkflowStartedEvent.attributes.workflowExecution
+                  .runId ?? undefined}
+                viewportHeight={320}
+                class="surface-primary overflow-x-hidden border-t border-subtle"
+              />
+            {/if}
           {/key}
         </div>
       {/if}
diff --git a/src/lib/components/lines-and-dots/svg/timeline-axis.svelte b/src/lib/components/lines-and-dots/timeline-graph/timeline-axis.svelte
similarity index 71%
rename from src/lib/components/lines-and-dots/svg/timeline-axis.svelte
rename to src/lib/components/lines-and-dots/timeline-graph/timeline-axis.svelte
index 201db002c1..64955bed01 100644
--- a/src/lib/components/lines-and-dots/svg/timeline-axis.svelte
+++ b/src/lib/components/lines-and-dots/timeline-graph/timeline-axis.svelte
@@ -3,22 +3,25 @@
   import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
 
   import { TimelineConfig } from '../constants';
+  import Line from '../svg/line.svelte';
 
-  import Line from './line.svelte';
+  import type { TimelineScale } from './timeline-scale.svelte';
 
   type Props = {
     x1: number;
     x2: number;
+    gutter: number;
     timelineHeight: number;
     startTime: string | Timestamp;
-    duration: number;
+    scale: TimelineScale;
   };
   let {
     x1 = 0,
     x2 = 1000,
+    gutter = 0,
     timelineHeight = 1000,
     startTime,
-    duration,
+    scale,
   }: Props = $props();
 
   const { radius } = TimelineConfig;
@@ -26,6 +29,10 @@
 
   const distance = $derived(x2 - x1);
   const tickDistance = $derived(distance / ticks);
+
+  const startMs = $derived(scale.unproject(x1 - gutter));
+  const endMs = $derived(scale.unproject(x2 - gutter));
+  const includeMilliseconds = $derived((endMs - startMs) / ticks < 1000);
 </script>
 
 <Line
@@ -46,10 +53,8 @@
     >
       {formatDistanceAbbreviated({
         start: startTime,
-        end: new Date(
-          new Date(startTime.toString()).getTime() + (duration / ticks) * i,
-        ),
-        includeMilliseconds: duration / ticks < 1000,
+        end: new Date(scale.unproject(tickX - gutter)),
+        includeMilliseconds,
       })}
     </text>
   {/if}
diff --git a/src/lib/components/lines-and-dots/timeline-graph/timeline-collapsed-layer.svelte b/src/lib/components/lines-and-dots/timeline-graph/timeline-collapsed-layer.svelte
new file mode 100644
index 0000000000..bd70b028e1
--- /dev/null
+++ b/src/lib/components/lines-and-dots/timeline-graph/timeline-collapsed-layer.svelte
@@ -0,0 +1,183 @@
+<script lang="ts">
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
+
+  import { TimelineConfig } from '../constants';
+
+  import type { TimelineScale } from './timeline-scale.svelte';
+
+  type Props = {
+    scale: TimelineScale;
+    timelineHeight: number;
+    readOnly?: boolean;
+    onToggle: (segmentKey: string) => void;
+  };
+  let { scale, timelineHeight, readOnly = false, onToggle }: Props = $props();
+
+  const { radius, height } = TimelineConfig;
+
+  const AXIS_STROKE_WIDTH = radius / 2;
+
+  const ZIGZAG_HALF_WIDTH = 4;
+
+  const HIT_HALF_WIDTH = Math.max(radius, 12);
+  const HIT_WIDTH = HIT_HALF_WIDTH * 2;
+
+  const collapsibleSegments = $derived(
+    scale.segments.filter((s) => s.isCollapsible),
+  );
+
+  const zigzagPath = (xStart: number, xEnd: number, height: number) => {
+    const step = 8;
+    let d = `M ${xStart} 0`;
+    let y = 0;
+    let toRight = true;
+    while (y < height) {
+      const nextY = Math.min(y + step, height);
+      d += ` L ${toRight ? xEnd : xStart} ${nextY}`;
+      toRight = !toRight;
+      y = nextY;
+    }
+    return d;
+  };
+
+  let activeSegmentKey = $state<string | null>(null);
+
+  const handleToggle = (segmentKey: string) => {
+    if (readOnly) return;
+    onToggle(segmentKey);
+  };
+
+  const handleKeydown = (e: KeyboardEvent, segmentKey: string) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleToggle(segmentKey);
+    }
+  };
+</script>
+
+{#each collapsibleSegments as seg (seg.key)}
+  {@const labelX = (seg.startPx + seg.endPx) / 2}
+  {@const labelY = timelineHeight + radius * 2}
+  {@const distance = formatDistanceAbbreviated({
+    start: new Date(seg.startTimeMs),
+    end: new Date(seg.endTimeMs),
+  })}
+  {#if seg.isCollapsed}
+    {@const half = Math.min(ZIGZAG_HALF_WIDTH, (seg.endPx - seg.startPx) / 4)}
+    <path
+      class="zigzag"
+      d={zigzagPath(labelX - half, labelX + half, timelineHeight)}
+      fill="none"
+      stroke-width="0.5"
+      stroke-dasharray="2"
+    />
+    {@render marker(labelX, height, {
+      text: translate('workflows.show-idle-time-segment', {
+        distance,
+      }),
+      show: activeSegmentKey === seg.key,
+    })}
+    {@render marker(labelX, timelineHeight)}
+    <text
+      class="zigzag-label"
+      font-size="10"
+      transform="rotate(90, {labelX}, {labelY})"
+      x={labelX - radius}
+      y={labelY + 3}
+    >
+      {distance}
+    </text>
+  {/if}
+  {#if !readOnly}
+    <rect
+      role="button"
+      tabindex="0"
+      aria-pressed={seg.isCollapsed}
+      aria-label={translate('workflows.hide-idle-time-segment', {
+        distance,
+      })}
+      class="toggle-handle"
+      x={seg.isCollapsed ? labelX - HIT_HALF_WIDTH : seg.startPx}
+      y={0}
+      width={seg.isCollapsed ? HIT_WIDTH : seg.endPx - seg.startPx}
+      height={seg.isCollapsed
+        ? timelineHeight + AXIS_STROKE_WIDTH * 2
+        : timelineHeight - AXIS_STROKE_WIDTH / 2}
+      onmouseenter={() => (activeSegmentKey = seg.key)}
+      onmouseleave={() => (activeSegmentKey = null)}
+      onfocus={() => (activeSegmentKey = seg.key)}
+      onblur={() => (activeSegmentKey = null)}
+      onclick={() => handleToggle(seg.key)}
+      onkeydown={(e) => handleKeydown(e, seg.key)}
+    />
+  {/if}
+{/each}
+
+{#snippet marker(
+  cx: number,
+  cy: number,
+  tooltip?: {
+    text?: string;
+    show?: boolean;
+  },
+)}
+  {@const iconSize = radius * 2}
+  <rect
+    class="marker"
+    x={cx - HIT_HALF_WIDTH}
+    y={cy - radius}
+    width={HIT_WIDTH}
+    height={radius * 2}
+  />
+  <foreignObject
+    x={cx - iconSize / 2}
+    y={cy - iconSize / 2}
+    width={iconSize}
+    height={iconSize}
+  >
+    <Tooltip
+      text={tooltip?.text}
+      usePortal
+      right
+      portalOffset={{ x: 8 }}
+      show={tooltip?.show ?? false}
+    >
+      <Icon
+        class="text-secondary"
+        name="timeline-collapse"
+        width={iconSize}
+        height={iconSize}
+      />
+    </Tooltip>
+  </foreignObject>
+{/snippet}
+
+<style lang="postcss">
+  .zigzag {
+    stroke: rgb(var(--color-text-secondary));
+  }
+
+  .zigzag-label {
+    fill: rgb(var(--color-text-secondary));
+  }
+
+  .marker {
+    fill: rgb(var(--color-surface-primary));
+  }
+
+  .toggle-handle {
+    fill: currentColor;
+    cursor: pointer;
+    opacity: 0;
+    outline: none;
+    transition: opacity 0.1s ease-in-out;
+  }
+
+  .toggle-handle:hover,
+  .toggle-handle:focus-visible {
+    opacity: 0.2;
+  }
+</style>
diff --git a/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte b/src/lib/components/lines-and-dots/timeline-graph/timeline-graph-row.svelte
similarity index 75%
rename from src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte
rename to src/lib/components/lines-and-dots/timeline-graph/timeline-graph-row.svelte
index 4b32262d52..c74f29667f 100644
--- a/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte
+++ b/src/lib/components/lines-and-dots/timeline-graph/timeline-graph-row.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
-  import type { Timestamp } from '@temporalio/common';
   import { cva } from 'class-variance-authority';
   import { onMount, untrack } from 'svelte';
 
-  import { page } from '$app/state';
-
   import PayloadSummary from '$lib/components/payload/payload-summary.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
@@ -13,7 +10,7 @@
     decodeLocalActivity,
     getLocalActivityMarkerEvent,
   } from '$lib/utilities/decode-local-activity';
-  import { getMillisecondDuration } from '$lib/utilities/format-time';
+  import type { ValidTime } from '$lib/utilities/format-time';
   import type { SummaryAttribute } from '$lib/utilities/get-single-attribute-for-event';
   import { getEventClassificationLabel } from '$lib/utilities/get-status-label';
   import {
@@ -26,32 +23,30 @@
     TimelineConfig,
     timelineTextPosition,
   } from '../constants';
-
-  import Dot from './dot.svelte';
-  import Line from './line.svelte';
-  import Text from './text.svelte';
+  import Dot from '../svg/dot.svelte';
+  import Line from '../svg/line.svelte';
+  import Text from '../svg/text.svelte';
 
   type Props = {
     y: number;
     group: EventGroup;
-    startTime: string | Timestamp;
-    endTime: string | Date | number;
     canvasWidth: number;
+    project: (time: ValidTime | undefined | null) => number;
     readOnly: boolean;
   };
 
   let {
     y = 0,
     group,
-    startTime,
-    endTime,
     canvasWidth,
+    project,
     readOnly = false,
   }: Props = $props();
 
   const { height, gutter, radius } = TimelineConfig;
 
   let hovering = $state(false);
+  let focused = $state(false);
 
   const timelineWidth = $derived(canvasWidth - 2 * gutter);
   const pendingActivity = $derived(group?.pendingActivity);
@@ -92,60 +87,13 @@
     }
   });
 
-  // PERF HIGH: getDistancePointsAndPositions calls getMillisecondDuration
-  // (date-fns parseJSON → Date allocation) for every event in the group, plus
-  // timelineTextPosition. On a canvas resize, Svelte's $derived re-runs this for
-  // every visible row simultaneously. With 4k+ rows that means 4k × N Date
-  // allocations in a single microtask flush. The closure-level cache below skips
-  // the recompute when the three inputs that actually affect pixel positions have
-  // not changed. events.size is included so the cache busts if new events arrive
-  // while the workflow is still running.
-  let _posCache:
-    | {
-        points: number[];
-        textAnchor: string;
-        textIndex: number;
-        textPosition: [number, number];
-        backdrop: boolean;
-      }
-    | undefined;
-  let _posCacheKey = '';
-
-  const getDistancePointsAndPositions = (
-    endTime: string | Date | number,
-    timelineWidth: number,
-    y: number,
-  ) => {
-    const cacheKey = `${endTime}|${timelineWidth}|${y}|${group.eventList.length}`;
-    if (_posCache && cacheKey === _posCacheKey) return _posCache;
-
-    const workflowDistance = getMillisecondDuration({
-      start: startTime,
-      end: endTime,
-      onlyUnderSecond: false,
-    });
-
-    const points = group.eventList.map((event) => {
-      const distance = getMillisecondDuration({
-        start: startTime,
-        end: event.eventTime,
-        onlyUnderSecond: false,
-      });
-
-      const ratio = distance / workflowDistance;
-      return Math.round(ratio * timelineWidth) + gutter;
-    });
+  const getDistancePointsAndPositions = (timelineWidth: number, y: number) => {
+    const points = group.eventList.map((event) =>
+      Math.round(project(event.eventTime)),
+    );
 
     if (pauseTime) {
-      const distance = getMillisecondDuration({
-        start: startTime,
-        end: pauseTime,
-        onlyUnderSecond: false,
-      });
-
-      const ratio = distance / workflowDistance;
-      const pausePoint = Math.round(ratio * timelineWidth) + gutter;
-      points.push(pausePoint);
+      points.push(Math.round(project(pauseTime)));
     }
 
     const { textAnchor, textIndex, textPosition, backdrop } =
@@ -157,13 +105,11 @@
         TimelineConfig,
       );
 
-    _posCache = { points, textAnchor, textIndex, textPosition, backdrop };
-    _posCacheKey = cacheKey;
-    return _posCache;
+    return { points, textAnchor, textIndex, textPosition, backdrop };
   };
 
   const { points, textAnchor, textIndex, textPosition, backdrop } = $derived(
-    getDistancePointsAndPositions(endTime, timelineWidth, y),
+    getDistancePointsAndPositions(timelineWidth, y),
   );
 
   const onClick = () => {
@@ -171,6 +117,13 @@
     setActiveGroup(group);
   };
 
+  const onKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
   const onMouseEnter = () => {
     if (readOnly) return;
     hovering = true;
@@ -181,6 +134,15 @@
     hovering = false;
   };
 
+  const onFocus = (event: FocusEvent) => {
+    if (readOnly) return;
+    focused = (event.currentTarget as Element)?.matches(':focus-visible');
+  };
+
+  const onBlur = () => {
+    focused = false;
+  };
+
   const activityTaskScheduled = $derived(
     group.eventList.find(isActivityTaskStartedEvent),
   );
@@ -208,7 +170,7 @@
   });
 </script>
 
-{#if hovering}
+{#if hovering || focused}
   {@const multiEventHoverWidth =
     points.length >= 2 && points[points.length - 1] - points[0] + radius * 3}
   {@const hoverWidth =
@@ -233,9 +195,11 @@
   tabindex="0"
   aria-label={accessibleName}
   onclick={onClick}
-  onkeypress={onClick}
+  onkeydown={onKeydown}
   onmouseenter={onMouseEnter}
   onmouseleave={onMouseLeave}
+  onfocus={onFocus}
+  onblur={onBlur}
   class="relative cursor-pointer"
   {height}
 >
@@ -252,7 +216,7 @@
       pointer-events="all"
     />
   {/if}
-  {#each points as x, index}
+  {#each points as x, index (index)}
     {@const nextPoint = points[index + 1]}
     {@const showText = textIndex === index}
     {#if nextPoint}
@@ -274,7 +238,7 @@
         startPoint={[x, y]}
         endPoint={[canvasWidth - gutter, y]}
         category={pendingActivity
-          ? pendingActivity.attempt > 1
+          ? (pendingActivity.attempt ?? 0) > 1
             ? 'retry'
             : 'pending'
           : group.category}
diff --git a/src/lib/components/lines-and-dots/svg/timeline-graph.svelte b/src/lib/components/lines-and-dots/timeline-graph/timeline-graph.svelte
similarity index 91%
rename from src/lib/components/lines-and-dots/svg/timeline-graph.svelte
rename to src/lib/components/lines-and-dots/timeline-graph/timeline-graph.svelte
index b89eacbdf0..7a47891cee 100644
--- a/src/lib/components/lines-and-dots/svg/timeline-graph.svelte
+++ b/src/lib/components/lines-and-dots/timeline-graph/timeline-graph.svelte
@@ -6,22 +6,27 @@
   import { eventStatusFilter } from '$lib/stores/filters';
   import type { WorkflowExecution } from '$lib/types/workflows';
   import { isWorkflowDelayed } from '$lib/utilities/delayed-workflows';
+  import { type ValidTime, validTimeToDate } from '$lib/utilities/format-time';
   import { getFailedOrPendingGroups } from '$lib/utilities/get-failed-or-pending';
 
   import { TimelineConfig } from '../constants';
   import EndTimeInterval from '../end-time-interval.svelte';
+  import Line from '../svg/line.svelte';
+  import TimelineIconDefs from '../svg/timeline-icon-defs.svelte';
   import {
     getDescStart,
     getPendingBlockY,
     getRowY,
     getTotalForY,
-  } from './timeline-positioning';
+  } from '../svg/timeline-positioning';
 
   import GroupDetailsRow from './group-details-row.svelte';
-  import Line from './line.svelte';
   import TimelineAxis from './timeline-axis.svelte';
+  import TimelineCollapsedLayer from './timeline-collapsed-layer.svelte';
   import TimelineGraphRow from './timeline-graph-row.svelte';
-  import TimelineIconDefs from './timeline-icon-defs.svelte';
+  import { TimelineScale } from './timeline-scale.svelte';
+  import { Timeline } from './timeline.svelte';
+  import { Viewport } from './viewport.svelte';
   import WorkflowRow from './workflow-row.svelte';
 
   interface Props {
@@ -40,6 +45,7 @@
     totalExpectedEvents?: number;
     descMinId?: number;
     panelHeight?: number;
+    onTimelineInit?: (timeline: Timeline) => void;
   }
 
   let {
@@ -56,6 +62,7 @@
     totalExpectedEvents = 0,
     descMinId = 0,
     panelHeight = $bindable(0),
+    onTimelineInit,
   }: Props = $props();
 
   const { height, gutter, radius } = TimelineConfig;
@@ -144,6 +151,42 @@
     };
   });
 
+  const timelineWidth = $derived(canvasWidth - 2 * gutter);
+
+  let nowMs = $state(Date.now());
+
+  const timeline = new Timeline({
+    getFullEventHistory: () => $fullEventHistory,
+    getWorkflow: () => workflow,
+    getEventGroups: () => groups,
+    getCurrentTimeMs: () => nowMs,
+  });
+
+  const viewport = new Viewport({ startTimeMs: 0, endTimeMs: 0 });
+  const scale = new TimelineScale({ timeline, viewport });
+
+  $effect(() => {
+    onTimelineInit?.(timeline);
+  });
+
+  $effect(() => {
+    viewport.setSize(timelineWidth, 0);
+  });
+
+  const projectX = (time: ValidTime | undefined | null): number => {
+    if (!time) return gutter;
+    return scale.project(validTimeToDate(time).getTime()) + gutter;
+  };
+
+  const toggleSegment = (segmentKey: string) => {
+    const segment = timeline.segments.find(
+      (s) => s.timespan.key === segmentKey,
+    );
+    if (segment) {
+      timeline.toggleTimeSegment(segment);
+    }
+  };
+
   const filteredGroups = $derived(
     getFailedOrPendingGroups(groups, $eventStatusFilter),
   );
@@ -374,13 +417,7 @@
     class="pointer-events-none absolute inset-0 opacity-30"
     style={gridBackgroundStyle}
   ></div>
-  <EndTimeInterval
-    {workflow}
-    {startTime}
-    let:endTime
-    let:duration
-    let:currentTime
-  >
+  <EndTimeInterval {workflow} {startTime} bind:currentTime={nowMs} let:endTime>
     <div
       class="pointer-events-none sticky top-[120px]"
       class:invisible={!!$activeGroups.length}
@@ -446,11 +483,21 @@
       <TimelineAxis
         x1={gutter - radius / 4}
         x2={canvasWidth - gutter + radius / 4}
+        {gutter}
         {timelineHeight}
         {startTime}
-        duration={duration ?? 0}
+        {scale}
       />
       <WorkflowRow {workflow} y={height} length={canvasWidth} />
+      <g transform="translate({gutter}, 0)">
+        <TimelineCollapsedLayer
+          {scale}
+          {timelineHeight}
+          {readOnly}
+          onToggle={toggleSegment}
+        />
+      </g>
+
       <!--
         PERF IMPERATIVE TRANSFORM APPROACH:
         Single {#each} loop — rows are never destroyed/recreated on click.
@@ -488,8 +535,7 @@
               {y}
               {group}
               {canvasWidth}
-              {startTime}
-              {endTime}
+              project={projectX}
               {readOnly}
             />
           {/key}
@@ -528,7 +574,7 @@
             y={panelY}
             group={grp}
             {canvasWidth}
-            endTime={workflow?.endTime ? endTime : currentTime}
+            endTime={workflow?.endTime ? endTime : nowMs}
             onHeight={(h) => {
               panelHeight = h;
             }}
diff --git a/src/lib/components/lines-and-dots/timeline-graph/timeline-scale.svelte.ts b/src/lib/components/lines-and-dots/timeline-graph/timeline-scale.svelte.ts
new file mode 100644
index 0000000000..bdb7ddbe78
--- /dev/null
+++ b/src/lib/components/lines-and-dots/timeline-graph/timeline-scale.svelte.ts
@@ -0,0 +1,160 @@
+import type { Timeline } from './timeline.svelte';
+import type { Viewport } from './viewport.svelte';
+
+export interface ScaledSegment {
+  key: string;
+  startTimeMs: number;
+  endTimeMs: number;
+  startPx: number;
+  endPx: number;
+  isCollapsed: boolean;
+  isCollapsible: boolean;
+}
+
+const DEFAULT_COLLAPSED_WIDTH_PX = 48;
+
+export class TimelineScale {
+  #timeline: Timeline;
+  #viewport: Viewport;
+  #getCollapsedPx: () => number;
+
+  constructor(init: {
+    timeline: Timeline;
+    viewport: Viewport;
+    getCollapsedPx?: () => number;
+  }) {
+    this.#timeline = init.timeline;
+    this.#viewport = init.viewport;
+    this.#getCollapsedPx =
+      init.getCollapsedPx ?? (() => DEFAULT_COLLAPSED_WIDTH_PX);
+  }
+
+  readonly segments = $derived.by<ScaledSegment[]>(() =>
+    buildScaledSegments({
+      timeline: this.#timeline,
+      widthPx: this.#viewport.widthPx,
+      collapsedPx: this.#getCollapsedPx(),
+    }),
+  );
+
+  project(timeMs: number): number {
+    const segments = this.segments;
+    if (!segments.length) {
+      return 0;
+    }
+
+    const first = segments[0];
+    const last = segments[segments.length - 1];
+
+    if (timeMs <= first.startTimeMs) {
+      return first.startPx;
+    }
+
+    if (timeMs >= last.endTimeMs) {
+      return last.endPx;
+    }
+
+    for (const segment of segments) {
+      if (timeMs > segment.endTimeMs) {
+        continue;
+      }
+
+      const durationMs = segment.endTimeMs - segment.startTimeMs || 1;
+      const ratio = (timeMs - segment.startTimeMs) / durationMs;
+      return segment.startPx + ratio * (segment.endPx - segment.startPx);
+    }
+
+    return last.endPx;
+  }
+
+  unproject(px: number): number {
+    const segments = this.segments;
+    if (!segments.length) {
+      return 0;
+    }
+
+    const first = segments[0];
+    const last = segments[segments.length - 1];
+
+    if (px <= first.startPx) {
+      return first.startTimeMs;
+    }
+
+    if (px >= last.endPx) {
+      return last.endTimeMs;
+    }
+
+    for (const segment of segments) {
+      if (px > segment.endPx) {
+        continue;
+      }
+
+      const widthPx = segment.endPx - segment.startPx || 1;
+      const ratio = (px - segment.startPx) / widthPx;
+      return (
+        segment.startTimeMs + ratio * (segment.endTimeMs - segment.startTimeMs)
+      );
+    }
+
+    return last.endTimeMs;
+  }
+}
+
+function buildScaledSegments({
+  timeline,
+  widthPx,
+  collapsedPx,
+}: {
+  timeline: Timeline;
+  widthPx: number;
+  collapsedPx: number;
+}): ScaledSegment[] {
+  const segments = timeline.segments;
+  if (!segments.length) {
+    return [];
+  }
+
+  let collapsedTotalPx = 0;
+  let expandedDurationMs = 0;
+  const collapsedBySegmentKey: Record<string, boolean> = {};
+
+  for (const segment of segments) {
+    const isCollapsed = timeline.isTimeSegmentCollapsed(segment);
+    collapsedBySegmentKey[segment.timespan.key] = isCollapsed;
+
+    if (isCollapsed) {
+      collapsedTotalPx += collapsedPx;
+    } else {
+      expandedDurationMs += segment.timespan.durationMs;
+    }
+  }
+
+  const availablePx = Math.max(widthPx - collapsedTotalPx, 0);
+
+  const scaled: ScaledSegment[] = [];
+  let cursorPx = 0;
+
+  for (const segment of segments) {
+    const isCollapsed = collapsedBySegmentKey[segment.timespan.key];
+
+    const segmentWidthPx = isCollapsed
+      ? collapsedPx
+      : expandedDurationMs > 0
+        ? (segment.timespan.durationMs / expandedDurationMs) * availablePx
+        : 0;
+
+    scaled.push({
+      key: segment.timespan.key,
+      startTimeMs: segment.timespan.startTimeMs,
+      endTimeMs: segment.timespan.endTimeMs,
+      startPx: cursorPx,
+      endPx: cursorPx + segmentWidthPx,
+      isCollapsed,
+      isCollapsible: timeline.isTimeSegmentCollapsible(segment),
+    });
+
+    cursorPx += segmentWidthPx;
+  }
+
+  return scaled;
+}
diff --git a/src/lib/components/lines-and-dots/timeline-graph/timeline.svelte.test.ts b/src/lib/components/lines-and-dots/timeline-graph/timeline.svelte.test.ts
new file mode 100644
index 0000000000..e3a87af9c4
--- /dev/null
+++ b/src/lib/components/lines-and-dots/timeline-graph/timeline.svelte.test.ts
@@ -0,0 +1,119 @@
+import { describe, expect, it } from 'vitest';
+
+import type { WorkflowEvents } from '$lib/types/events';
+import type { WorkflowExecution } from '$lib/types/workflows';
+
+import { Timeline } from './timeline.svelte';
+
+const T0 = Date.UTC(2022, 0, 1, 0, 0, 0);
+const iso = (offsetMs: number): string => new Date(T0 + offsetMs).toISOString();
+
+function makeTimeline({
+  fullEventHistory = [],
+  currentTimeMs = T0 + 100_000,
+  workflow,
+}: {
+  fullEventHistory?: WorkflowEvents;
+  currentTimeMs?: number;
+  workflow?: Partial<WorkflowExecution>;
+} = {}): Timeline {
+  const resolvedWorkflow = {
+    executionTime: iso(0),
+    startTime: iso(0),
+    endTime: iso(100_000),
+    ...workflow,
+  } as unknown as WorkflowExecution;
+
+  return new Timeline({
+    getFullEventHistory: () => fullEventHistory,
+    getWorkflow: () => resolvedWorkflow,
+    getEventGroups: () => [],
+    getCurrentTimeMs: () => currentTimeMs,
+  });
+}
+
+const eventAt = (offsetMs: number) =>
+  ({ eventTime: iso(offsetMs) }) as unknown as WorkflowEvents[number];
+
+describe('Timeline.workflowTimespan', () => {
+  it('starts at the earliest of the event history and executionTime', () => {
+    const cleanup = $effect.root(() => {
+      const timeline = makeTimeline({
+        fullEventHistory: [eventAt(5_000), eventAt(20_000)],
+        workflow: { executionTime: iso(2_000) },
+      });
+      expect(timeline.workflowTimespan.startTimeMs).toBe(T0 + 2_000);
+      expect(timeline.workflowTimespan.endTimeMs).toBe(T0 + 100_000);
+    });
+    cleanup();
+  });
+
+  it('does not throw and falls back to startTime when executionTime is missing', () => {
+    const cleanup = $effect.root(() => {
+      const timeline = makeTimeline({
+        fullEventHistory: [],
+        workflow: { executionTime: undefined, startTime: iso(3_000) },
+      });
+      expect(() => timeline.workflowTimespan).not.toThrow();
+      expect(timeline.workflowTimespan.startTimeMs).toBe(T0 + 3_000);
+    });
+    cleanup();
+  });
+
+  it('uses event times when executionTime is missing but history exists', () => {
+    const cleanup = $effect.root(() => {
+      const timeline = makeTimeline({
+        fullEventHistory: [eventAt(4_000), eventAt(9_000)],
+        workflow: { executionTime: undefined, startTime: iso(8_000) },
+      });
+      // earliest event (4s) precedes startTime (8s)
+      expect(timeline.workflowTimespan.startTimeMs).toBe(T0 + 4_000);
+    });
+    cleanup();
+  });
+
+  it('falls back to the end time when no start time can be derived', () => {
+    const cleanup = $effect.root(() => {
+      const timeline = makeTimeline({
+        fullEventHistory: [],
+        currentTimeMs: T0 + 50_000,
+        workflow: {
+          executionTime: undefined,
+          startTime: undefined,
+          endTime: undefined,
+        },
+      });
+      expect(() => timeline.workflowTimespan).not.toThrow();
+      // end falls back to the current time, and start falls back to end
+      expect(timeline.workflowTimespan.startTimeMs).toBe(T0 + 50_000);
+      expect(timeline.workflowTimespan.endTimeMs).toBe(T0 + 50_000);
+      expect(timeline.workflowTimespan.endUnbounded).toBe(true);
+    });
+    cleanup();
+  });
+
+  it('is endUnbounded and ends at the current time when the workflow has no end time', () => {
+    const cleanup = $effect.root(() => {
+      const timeline = makeTimeline({
+        currentTimeMs: T0 + 75_000,
+        workflow: { endTime: undefined },
+      });
+      expect(timeline.workflowTimespan.endTimeMs).toBe(T0 + 75_000);
+      expect(timeline.workflowTimespan.endUnbounded).toBe(true);
+    });
+    cleanup();
+  });
+
+  it('clamps start to end instead of throwing when an event precedes no valid bound but follows the end', () => {
+    const cleanup = $effect.root(() => {
+      const timeline = makeTimeline({
+        fullEventHistory: [eventAt(120_000)],
+        workflow: { executionTime: iso(110_000), endTime: iso(100_000) },
+      });
+      expect(() => timeline.workflowTimespan).not.toThrow();
+      expect(timeline.workflowTimespan.startTimeMs).toBe(T0 + 100_000);
+      expect(timeline.workflowTimespan.endTimeMs).toBe(T0 + 100_000);
+    });
+    cleanup();
+  });
+});
diff --git a/src/lib/components/lines-and-dots/timeline-graph/timeline.svelte.ts b/src/lib/components/lines-and-dots/timeline-graph/timeline.svelte.ts
new file mode 100644
index 0000000000..39a2600899
--- /dev/null
+++ b/src/lib/components/lines-and-dots/timeline-graph/timeline.svelte.ts
@@ -0,0 +1,182 @@
+import { SvelteSet } from 'svelte/reactivity';
+
+import type { EventGroups } from '$lib/models/event-groups/event-groups';
+import type { WorkflowEvents } from '$lib/types/events';
+import type { WorkflowExecution } from '$lib/types/workflows';
+import { isWorkflowDelayed } from '$lib/utilities/delayed-workflows';
+import { minDate, validTimeToDate } from '$lib/utilities/format-time';
+import { isNotNullish } from '$lib/utilities/type-predicates';
+
+import { Timespan } from './timespan';
+import type { TimeSegment, TimeSegmentKey } from './types';
+import { buildTimeSegments } from './utils/build-time-segments';
+
+const DEFAULT_DURATION_THRESHOLD_RATIO = 0.1;
+
+interface TimelineInit {
+  getFullEventHistory: () => WorkflowEvents;
+  getWorkflow: () => WorkflowExecution;
+  getEventGroups: () => EventGroups;
+  getCurrentTimeMs: () => number;
+  getDurationThresholdRatio?: () => number;
+}
+
+export class Timeline {
+  #collapsedSegmentKeys = new SvelteSet<TimeSegmentKey>();
+  #hasUserToggled = false;
+
+  #getFullEventHistory: () => WorkflowEvents;
+  #getWorkflow: () => WorkflowExecution;
+  #getEventGroups: () => EventGroups;
+  #getCurrentTimeMs: () => number;
+  #getDurationThresholdRatio: () => number;
+
+  constructor({
+    getFullEventHistory,
+    getWorkflow,
+    getEventGroups,
+    getCurrentTimeMs,
+    getDurationThresholdRatio,
+  }: TimelineInit) {
+    this.#getFullEventHistory = getFullEventHistory;
+    this.#getWorkflow = getWorkflow;
+    this.#getEventGroups = getEventGroups;
+    this.#getCurrentTimeMs = getCurrentTimeMs;
+    this.#getDurationThresholdRatio =
+      getDurationThresholdRatio ?? (() => DEFAULT_DURATION_THRESHOLD_RATIO);
+  }
+
+  readonly workflow = $derived.by(() => this.#getWorkflow());
+  readonly eventGroups = $derived.by(() => this.#getEventGroups());
+  readonly workflowTimespan = $derived.by(() => {
+    const fullEventHistory = this.#getFullEventHistory();
+    const end = this.workflow.endTime ?? this.#getCurrentTimeMs();
+
+    const startCandidates = [
+      ...fullEventHistory.map((wfEvent) => wfEvent?.eventTime),
+      this.workflow.executionTime,
+    ].filter(isNotNullish);
+
+    const earliestStartTime = startCandidates.length
+      ? minDate(...startCandidates)
+      : undefined;
+
+    const start =
+      (isWorkflowDelayed(this.workflow) && this.workflow.startTime
+        ? this.workflow.startTime
+        : earliestStartTime) ??
+      this.workflow.startTime ??
+      end;
+
+    const endMs = validTimeToDate(end).getTime();
+    const startMs = Math.min(validTimeToDate(start).getTime(), endMs);
+
+    return new Timespan(startMs, endMs, {
+      endUnbounded: !this.workflow.endTime,
+    });
+  });
+
+  readonly segments = $derived.by<TimeSegment[]>(() => {
+    return buildTimeSegments({
+      workflowTimespan: this.workflowTimespan,
+      eventGroups: this.eventGroups,
+    });
+  });
+
+  // Uses raw set membership, not isTimeSegmentCollapsed, for two reasons:
+  // isTimeSegmentCollapsible reads expandedDurationMs, so the guarded check
+  // would be circular; and excluding every intended-collapsed segment (even
+  // ones temporarily too small to collapse) keeps the denominator stable so
+  // expanding one large gap can't cascade borderline gaps open.
+  readonly expandedDurationMs = $derived.by(() =>
+    this.segments.reduce(
+      (sum, segment) =>
+        this.#isSegmentCollapsedRaw(segment)
+          ? sum
+          : sum + segment.timespan.durationMs,
+      0,
+    ),
+  );
+
+  #isSegmentCollapsedRaw(segment: TimeSegment): boolean {
+    return this.#collapsedSegmentKeys.has(segment.timespan.key);
+  }
+
+  isTimeSegmentCollapsible(segment: TimeSegment): boolean {
+    if (segment.kind !== 'inactive') return false;
+    if (this.segments.length <= 1) return false;
+    if (this.expandedDurationMs <= 0) return false;
+
+    return (
+      segment.timespan.durationMs / this.expandedDurationMs >=
+      this.#getDurationThresholdRatio()
+    );
+  }
+
+  isTimeSegmentCollapsed(segment: TimeSegment): boolean {
+    return (
+      this.#isSegmentCollapsedRaw(segment) &&
+      this.isTimeSegmentCollapsible(segment)
+    );
+  }
+
+  readonly collapsibleSegments = $derived(
+    this.segments.filter((segment) => this.isTimeSegmentCollapsible(segment)),
+  );
+
+  readonly hasCollapsibleSegments = $derived(
+    this.collapsibleSegments.length > 0,
+  );
+
+  readonly allCollapsibleSegmentsCollapsed = $derived(
+    this.hasCollapsibleSegments &&
+      this.collapsibleSegments.every((segment) =>
+        this.isTimeSegmentCollapsed(segment),
+      ),
+  );
+
+  toggleTimeSegment(segment: TimeSegment): void {
+    this.#hasUserToggled = true;
+    const key = segment.timespan.key;
+    if (this.#collapsedSegmentKeys.has(key)) {
+      this.#collapsedSegmentKeys.delete(key);
+    } else {
+      this.#collapsedSegmentKeys.add(key);
+    }
+  }
+
+  expandAllSegments(): void {
+    this.#hasUserToggled = true;
+    this.#collapsedSegmentKeys.clear();
+  }
+
+  collapseAllSegments(): void {
+    this.#hasUserToggled = true;
+    this.#collapseAllSegments();
+  }
+
+  collapseAllSegmentsByDefault(): void {
+    if (this.#hasUserToggled) return;
+    this.#collapseAllSegments();
+  }
+
+  #collapseAllSegments(): void {
+    // purposefully not setting this.#hasUserToggled = true
+    // here. Only public facing methods should set flag.
+    let collapsed = true;
+
+    // This is a while loop because collapsing segments shrinks the expanded
+    // duration, which can push additional segments past the threshold.
+    while (collapsed) {
+      collapsed = false;
+      for (const segment of this.segments) {
+        const key = segment.timespan.key;
+        if (this.#collapsedSegmentKeys.has(key)) continue;
+        if (this.isTimeSegmentCollapsible(segment)) {
+          this.#collapsedSegmentKeys.add(key);
+          collapsed = true;
+        }
+      }
+    }
+  }
+}
diff --git a/src/lib/components/lines-and-dots/timeline-graph/timespan.ts b/src/lib/components/lines-and-dots/timeline-graph/timespan.ts
new file mode 100644
index 0000000000..8856ecedc6
--- /dev/null
+++ b/src/lib/components/lines-and-dots/timeline-graph/timespan.ts
@@ -0,0 +1,80 @@
+const UNBOUNDED_KEY = 'unbounded';
+
+export interface TimespanBounds {
+  startUnbounded?: boolean;
+  endUnbounded?: boolean;
+}
+
+export class Timespan {
+  #startTimeMs: number;
+  #endTimeMs: number;
+  #startUnbounded: boolean;
+  #endUnbounded: boolean;
+
+  constructor(
+    startTimeMs: number,
+    endTimeMs: number,
+    bounds: TimespanBounds = {},
+  ) {
+    if (startTimeMs > endTimeMs) {
+      throw new RangeError('Start time cannot come after end time');
+    }
+
+    this.#startTimeMs = startTimeMs;
+    this.#endTimeMs = endTimeMs;
+    this.#startUnbounded = bounds.startUnbounded ?? false;
+    this.#endUnbounded = bounds.endUnbounded ?? false;
+  }
+
+  get key(): string {
+    const start = this.#startUnbounded
+      ? UNBOUNDED_KEY
+      : String(this.#startTimeMs);
+    const end = this.#endUnbounded ? UNBOUNDED_KEY : String(this.#endTimeMs);
+    return `${start}-${end}`;
+  }
+
+  get startUnbounded(): boolean {
+    return this.#startUnbounded;
+  }
+
+  get endUnbounded(): boolean {
+    return this.#endUnbounded;
+  }
+
+  get durationMs(): number {
+    return this.endTimeMs - this.startTimeMs;
+  }
+
+  get startTimeMs() {
+    return this.#startTimeMs;
+  }
+
+  set startTimeMs(startMs: number) {
+    if (startMs > this.#endTimeMs) {
+      throw new RangeError('Start time cannot come after end time');
+    }
+
+    this.#startTimeMs = startMs;
+  }
+
+  get endTimeMs() {
+    return this.#endTimeMs;
+  }
+
+  set endTimeMs(endMs: number) {
+    if (this.startTimeMs > endMs) {
+      throw new RangeError('Start time cannot come after end time');
+    }
+
+    this.#endTimeMs = endMs;
+  }
+
+  contains(timeMs: number): boolean {
+    return timeMs >= this.startTimeMs && timeMs <= this.endTimeMs;
+  }
+
+  clamp(timeMs: number): number {
+    return Math.min(Math.max(timeMs, this.startTimeMs), this.endTimeMs);
+  }
+}
diff --git a/src/lib/components/lines-and-dots/timeline-graph/types.ts b/src/lib/components/lines-and-dots/timeline-graph/types.ts
new file mode 100644
index 0000000000..3e3fb49ea9
--- /dev/null
+++ b/src/lib/components/lines-and-dots/timeline-graph/types.ts
@@ -0,0 +1,8 @@
+import type { Timespan } from './timespan';
+
+export type TimeSegmentKey = string;
+
+export interface TimeSegment {
+  kind: 'active' | 'inactive';
+  timespan: Timespan;
+}
diff --git a/src/lib/components/lines-and-dots/timeline-graph/utils/build-time-segments.ts b/src/lib/components/lines-and-dots/timeline-graph/utils/build-time-segments.ts
new file mode 100644
index 0000000000..f764748845
--- /dev/null
+++ b/src/lib/components/lines-and-dots/timeline-graph/utils/build-time-segments.ts
@@ -0,0 +1,109 @@
+import type {
+  EventGroup,
+  EventGroups,
+} from '$lib/models/event-groups/event-groups';
+import { maxDate, validTimeToDate } from '$lib/utilities/format-time';
+import { isNotNullish, isNullish } from '$lib/utilities/type-predicates';
+
+import { Timespan } from '../timespan';
+import type { TimeSegment } from '../types';
+
+function getGroupStartMs(group: EventGroup): number | null {
+  const { eventTime } = group.initialEvent;
+
+  if (isNullish(eventTime)) {
+    return null;
+  }
+
+  return validTimeToDate(eventTime).getTime();
+}
+
+function getGroupEndMs(group: EventGroup, pendingTimestampMs: number): number {
+  const { eventTime } = group.lastEvent;
+
+  if (isNullish(eventTime)) {
+    return pendingTimestampMs;
+  }
+
+  if (group.isPending) {
+    return maxDate(pendingTimestampMs, eventTime).getTime();
+  }
+
+  return validTimeToDate(eventTime).getTime();
+}
+
+export function buildTimeSegments({
+  workflowTimespan,
+  eventGroups,
+}: {
+  workflowTimespan: Timespan;
+  eventGroups: EventGroups;
+}): TimeSegment[] {
+  const sortedGroupTimespans: Timespan[] = eventGroups
+    .map((group) => {
+      const startMs = getGroupStartMs(group);
+      if (isNullish(startMs)) {
+        return null;
+      }
+
+      return new Timespan(
+        startMs,
+        getGroupEndMs(group, workflowTimespan.endTimeMs),
+      );
+    })
+    .filter(isNotNullish)
+    .sort((a, b) => a.startTimeMs - b.startTimeMs);
+
+  const timeSegments: TimeSegment[] = [];
+
+  let cursorMs: number = workflowTimespan.startTimeMs;
+
+  for (const groupTimespan of sortedGroupTimespans) {
+    const groupStart = workflowTimespan.clamp(groupTimespan.startTimeMs);
+    const groupEnd = workflowTimespan.clamp(groupTimespan.endTimeMs);
+
+    if (groupEnd <= groupStart) continue;
+
+    const currentSegment = timeSegments.at(-1);
+
+    if (
+      currentSegment?.kind === 'active' &&
+      groupStart <= currentSegment.timespan.endTimeMs
+    ) {
+      // Overlapping or touching the current active span → extend if needed
+      if (groupEnd > currentSegment.timespan.endTimeMs) {
+        currentSegment.timespan = new Timespan(
+          currentSegment.timespan.startTimeMs,
+          groupEnd,
+        );
+        cursorMs = groupEnd;
+      }
+      continue;
+    }
+
+    if (cursorMs < groupStart) {
+      timeSegments.push({
+        kind: 'inactive',
+        timespan: new Timespan(cursorMs, groupStart),
+      });
+    }
+
+    timeSegments.push({
+      kind: 'active',
+      timespan: new Timespan(groupStart, groupEnd),
+    });
+
+    cursorMs = groupEnd;
+  }
+
+  if (cursorMs < workflowTimespan.endTimeMs) {
+    timeSegments.push({
+      kind: 'inactive',
+      timespan: new Timespan(cursorMs, workflowTimespan.endTimeMs, {
+        endUnbounded: workflowTimespan.endUnbounded,
+      }),
+    });
+  }
+
+  return timeSegments;
+}
diff --git a/src/lib/components/lines-and-dots/timeline-graph/viewport.svelte.ts b/src/lib/components/lines-and-dots/timeline-graph/viewport.svelte.ts
new file mode 100644
index 0000000000..cb9d8bff6a
--- /dev/null
+++ b/src/lib/components/lines-and-dots/timeline-graph/viewport.svelte.ts
@@ -0,0 +1,33 @@
+import { Timespan } from './timespan';
+
+export class Viewport {
+  startTimeMs = $state(0);
+  endTimeMs = $state(0);
+  widthPx = $state(0);
+  heightPx = $state(0);
+
+  readonly timespan = $derived(new Timespan(this.startTimeMs, this.endTimeMs));
+  readonly durationMs = $derived(Math.max(this.timespan.durationMs, 1));
+
+  constructor(init: {
+    startTimeMs: number;
+    endTimeMs: number;
+    widthPx?: number;
+    heightPx?: number;
+  }) {
+    this.startTimeMs = init.startTimeMs;
+    this.endTimeMs = init.endTimeMs;
+    this.widthPx = init.widthPx ?? 0;
+    this.heightPx = init.heightPx ?? 0;
+  }
+
+  setSize(widthPx: number, heightPx: number) {
+    this.widthPx = widthPx;
+    this.heightPx = heightPx;
+  }
+
+  setTimespan(startTimeMs: number, endTimeMs: number) {
+    this.startTimeMs = startTimeMs;
+    this.endTimeMs = endTimeMs;
+  }
+}
diff --git a/src/lib/components/lines-and-dots/svg/workflow-row.svelte b/src/lib/components/lines-and-dots/timeline-graph/workflow-row.svelte
similarity index 92%
rename from src/lib/components/lines-and-dots/svg/workflow-row.svelte
rename to src/lib/components/lines-and-dots/timeline-graph/workflow-row.svelte
index 26202d5c7a..8069848c9e 100644
--- a/src/lib/components/lines-and-dots/svg/workflow-row.svelte
+++ b/src/lib/components/lines-and-dots/timeline-graph/workflow-row.svelte
@@ -5,10 +5,9 @@
   import { getWorkflowStatusLabel } from '$lib/utilities/get-status-label';
 
   import { TimelineConfig } from '../constants';
-
-  import Dot from './dot.svelte';
-  import Line from './line.svelte';
-  import TimelineIcon from './timeline-icon.svelte';
+  import Dot from '../svg/dot.svelte';
+  import Line from '../svg/line.svelte';
+  import TimelineIcon from '../svg/timeline-icon.svelte';
 
   interface Props {
     workflow: WorkflowExecution;
diff --git a/src/lib/holocene/icon/paths.ts b/src/lib/holocene/icon/paths.ts
index d92b45ef13..49cf141267 100644
--- a/src/lib/holocene/icon/paths.ts
+++ b/src/lib/holocene/icon/paths.ts
@@ -91,6 +91,7 @@ import merge from './svg/merge.svelte';
 import microchip from './svg/microchip.svelte';
 import microsoft from './svg/microsoft.svelte';
 import minimize from './svg/minimize.svelte';
+import minus from './svg/minus.svelte';
 import moon from './svg/moon.svelte';
 import namespaceSwitcher from './svg/namespace-switcher.svelte';
 import namespace from './svg/namespace.svelte';
@@ -102,6 +103,7 @@ import pencil from './svg/pencil.svelte';
 import pinFilled from './svg/pin-filled.svelte';
 import pin from './svg/pin.svelte';
 import play from './svg/play.svelte';
+import plus from './svg/plus.svelte';
 import regions from './svg/regions.svelte';
 import relationship from './svg/relationship.svelte';
 import retention from './svg/retention.svelte';
@@ -133,6 +135,7 @@ import tag from './svg/tag.svelte';
 import target from './svg/target.svelte';
 import temporalLogo from './svg/temporal-logo.svelte';
 import terminal from './svg/terminal.svelte';
+import timelineCollapse from './svg/timeline-collapse.svelte';
 import timeline from './svg/timeline.svelte';
 import toolbox from './svg/toolbox.svelte';
 import transcoderError from './svg/transcoder-error.svelte';
@@ -249,6 +252,7 @@ export const icons = {
   microchip,
   microsoft,
   minimize,
+  minus,
   moon,
   'namespace-switcher': namespaceSwitcher,
   namespace,
@@ -256,6 +260,7 @@ export const icons = {
   'office-buildings': officeBuildings,
   overview,
   play,
+  plus,
   pause,
   pencil,
   'pin-filled': pinFilled,
@@ -292,6 +297,7 @@ export const icons = {
   'temporal-logo': temporalLogo,
   terminal,
   timeline,
+  'timeline-collapse': timelineCollapse,
   toolbox,
   'transcoder-error': transcoderError,
   'transcoder-on': transcoderOn,
diff --git a/src/lib/holocene/icon/svg/minus.svelte b/src/lib/holocene/icon/svg/minus.svelte
new file mode 100644
index 0000000000..46ebb1453f
--- /dev/null
+++ b/src/lib/holocene/icon/svg/minus.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+  let props = $props();
+</script>
+
+<Svg {...props}>
+  <path d="M19 13H5V11H19V13Z" fill="currentcolor" />
+</Svg>
diff --git a/src/lib/holocene/icon/svg/plus.svelte b/src/lib/holocene/icon/svg/plus.svelte
new file mode 100644
index 0000000000..c840b281f3
--- /dev/null
+++ b/src/lib/holocene/icon/svg/plus.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+  let props = $props();
+</script>
+
+<Svg {...props}>
+  <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="currentcolor" />
+</Svg>
diff --git a/src/lib/holocene/icon/svg/timeline-collapse.svelte b/src/lib/holocene/icon/svg/timeline-collapse.svelte
new file mode 100644
index 0000000000..434bae537c
--- /dev/null
+++ b/src/lib/holocene/icon/svg/timeline-collapse.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+
+  import Svg from '../svg.svelte';
+
+  type Props = Omit<ComponentProps<typeof Svg>, 'viewBox' | 'fill'>;
+
+  let props: Props = $props();
+</script>
+
+<Svg viewBox="0 0 18 18" fill="none" {...props}>
+  <path
+    d="M2.125 12V6L6.125 9.3913L2.125 12Z"
+    stroke="currentColor"
+    stroke-width="1.5"
+  />
+  <path
+    d="M15.875 12V6L11.875 9.3913L15.875 12Z"
+    stroke="currentColor"
+    stroke-width="1.5"
+  />
+  <path d="M9 5L9 13" stroke="currentColor" stroke-width="1.5" />
+</Svg>
diff --git a/src/lib/holocene/tooltip.svelte b/src/lib/holocene/tooltip.svelte
index c97b26ae36..8e5f28796f 100644
--- a/src/lib/holocene/tooltip.svelte
+++ b/src/lib/holocene/tooltip.svelte
@@ -5,7 +5,10 @@
   import type { IconName } from '$lib/holocene/icon';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Portal from '$lib/holocene/portal/portal.svelte';
-  import type { PortalPosition } from '$lib/holocene/portal/types';
+  import type {
+    PortalOffset,
+    PortalPosition,
+  } from '$lib/holocene/portal/types';
   import type { Only } from '$lib/types/global';
 
   const HOVER_HIDE_DELAY_MS = 120;
@@ -20,6 +23,7 @@
     show?: boolean;
     usePortal?: boolean;
     scrollContainer?: string;
+    portalOffset?: PortalOffset;
   };
 
   type BasePositionProps = {
@@ -80,6 +84,7 @@
   export let show = false;
   export let usePortal = false;
   export let scrollContainer: string | undefined = undefined;
+  export let portalOffset: PortalOffset = {};
 
   let wrapperElement: HTMLElement | null = null;
   let isHovered = false;
@@ -169,6 +174,7 @@
         anchor={wrapperElement}
         open={isOpen}
         position={portalPosition}
+        offset={portalOffset}
         {scrollContainer}
       >
         <div
diff --git a/src/lib/i18n/locales/en/workflows.ts b/src/lib/i18n/locales/en/workflows.ts
index ae561baa9a..b3ba977b9d 100644
--- a/src/lib/i18n/locales/en/workflows.ts
+++ b/src/lib/i18n/locales/en/workflows.ts
@@ -141,6 +141,10 @@ export const Strings = {
   'pause-success': 'Workflow paused',
   'unpause-success': 'Workflow unpaused',
   'timeline-tab': 'Timeline',
+  'hide-idle-time': 'Hide idle time',
+  'show-idle-time': 'Show idle time',
+  'hide-idle-time-segment': 'Hide {{distance}} time segment',
+  'show-idle-time-segment': 'Show {{distance}} time segment',
   'history-tab': 'Event History',
   'workflow-history': 'Workflow History',
   'workers-tab': 'Workers',
diff --git a/src/lib/layouts/workflow-timeline-layout.svelte b/src/lib/layouts/workflow-timeline-layout.svelte
index 8a1e73c0fa..8d88e8510a 100644
--- a/src/lib/layouts/workflow-timeline-layout.svelte
+++ b/src/lib/layouts/workflow-timeline-layout.svelte
@@ -6,7 +6,8 @@
 
   import EventHistoryLegend from '$lib/components/lines-and-dots/event-history-legend.svelte';
   import EventTypeFilter from '$lib/components/lines-and-dots/event-type-filter.svelte';
-  import TimelineGraph from '$lib/components/lines-and-dots/svg/timeline-graph.svelte';
+  import TimelineGraph from '$lib/components/lines-and-dots/timeline-graph/timeline-graph.svelte';
+  import type { Timeline } from '$lib/components/lines-and-dots/timeline-graph/timeline.svelte';
   import WorkflowError from '$lib/components/lines-and-dots/workflow-error.svelte';
   import DownloadEventHistoryModal from '$lib/components/workflow/download-event-history-modal.svelte';
   import InputAndResults from '$lib/components/workflow/input-and-results.svelte';
@@ -26,7 +27,7 @@
     onLatestGroup,
   } from '$lib/services/grouped-event-buffer';
   import { clearActives } from '$lib/stores/active-events';
-  import { eventFilterSort } from '$lib/stores/event-view';
+  import { collapseIdleTime, eventFilterSort } from '$lib/stores/event-view';
   import { pauseLiveUpdates } from '$lib/stores/events';
   import { eventTypeFilter } from '$lib/stores/filters';
   import { workflowRun } from '$lib/stores/workflow-run';
@@ -253,6 +254,26 @@
       bufferGroups = getGroupArray({ excludeWorkflowTasks: true });
     }
   });
+
+  let timeline = $state<Timeline>();
+
+  const handleTimelineInit = (t: Timeline) => {
+    timeline = t;
+    if ($collapseIdleTime === 'on') {
+      timeline.collapseAllSegmentsByDefault();
+    }
+  };
+
+  const onToggleIdleTime = () => {
+    if (!timeline) return;
+    if (timeline.allCollapsibleSegmentsCollapsed) {
+      timeline.expandAllSegments();
+      $collapseIdleTime = 'off';
+    } else {
+      timeline.collapseAllSegments();
+      $collapseIdleTime = 'on';
+    }
+  };
 </script>
 
 <InputAndResults />
@@ -291,6 +312,17 @@
           on:click={onSort}
           size="sm">{reverseSort ? 'Descending' : 'Ascending'}</ToggleButton
         >
+        <ToggleButton
+          leadingIcon="timeline-collapse"
+          data-testid="toggle-idle-time"
+          disabled={!timeline?.hasCollapsibleSegments}
+          on:click={onToggleIdleTime}
+          size="sm"
+        >
+          {timeline?.allCollapsibleSegmentsCollapsed
+            ? translate('workflows.show-idle-time')
+            : translate('workflows.hide-idle-time')}
+        </ToggleButton>
         <EventTypeFilter compact={false} />
         <ToggleButton
           disabled={isNotPending}
@@ -350,6 +382,7 @@
         descMinId={historyCtx.descMinId}
         error={Boolean(workflowTaskFailedError)}
         bind:panelHeight={graphPanelHeight}
+        onTimelineInit={handleTimelineInit}
       />
     {/if}
   </div>
diff --git a/src/lib/stores/event-view.ts b/src/lib/stores/event-view.ts
index 25cff2a468..3536564e7f 100644
--- a/src/lib/stores/event-view.ts
+++ b/src/lib/stores/event-view.ts
@@ -13,6 +13,11 @@ export const autoRefreshWorkflow = persistStore<'on' | 'off'>(
   'off',
 );
 
+export const collapseIdleTime = persistStore<'on' | 'off'>(
+  'collapseIdleTime',
+  'on',
+);
+
 export const eventViewType = persistStore<EventView>('eventView', 'feed', true);
 
 export const eventFilterSort = persistStore<EventSortOrder>(
diff --git a/src/lib/utilities/format-time.test.ts b/src/lib/utilities/format-time.test.ts
index 89d4f0cbfa..1799b91459 100644
--- a/src/lib/utilities/format-time.test.ts
+++ b/src/lib/utilities/format-time.test.ts
@@ -9,6 +9,9 @@ import {
   fromSecondsToMinutesAndSeconds,
   getDuration,
   getTimestampDifference,
+  maxDate,
+  minDate,
+  validTimeToDate,
 } from './format-time';
 
 describe('getDuration', () => {
@@ -370,3 +373,162 @@ describe('formatSecondsAbbreviated', () => {
     expect(formatSecondsAbbreviated('0.001')).toBe('1ms');
   });
 });
+
+describe('minDate', () => {
+  it('should return the earliest date from a list of ISO strings', () => {
+    const result = minDate(
+      '2022-04-13T16:29:35.630Z',
+      '2022-04-13T16:29:33.630Z',
+      '2022-04-13T16:29:41.630Z',
+    );
+    expect(result).toBeInstanceOf(Date);
+    expect(result.toISOString()).toBe('2022-04-13T16:29:33.630Z');
+  });
+
+  it('should return the earliest date from a list of Timestamp objects', () => {
+    const result = minDate(
+      { seconds: '1649866175', nanos: 0 },
+      { seconds: '1649866170', nanos: 0 },
+      { seconds: '1649866180', nanos: 0 },
+    );
+    expect(result).toBeInstanceOf(Date);
+    expect(result.toISOString()).toBe('2022-04-13T16:09:30.000Z');
+  });
+
+  it('should return the earliest date when mixing Timestamps, strings, and Date instances', () => {
+    const result = minDate(
+      '2022-04-13T16:29:35.630Z',
+      { seconds: '1649866175', nanos: 630000000 },
+      new Date('2022-04-13T16:29:41.000Z'),
+    );
+    expect(result).toBeInstanceOf(Date);
+    expect(result.toISOString()).toBe('2022-04-13T16:09:35.630Z');
+  });
+
+  it('should return the only date when given a single argument', () => {
+    const result = minDate('2022-04-13T16:29:35.630Z');
+    expect(result.toISOString()).toBe('2022-04-13T16:29:35.630Z');
+  });
+
+  it('should differentiate between Timestamps with different nanos in the same second', () => {
+    const result = minDate(
+      { seconds: '1649866175', nanos: 500000000 },
+      { seconds: '1649866175', nanos: 100000000 },
+      { seconds: '1649866175', nanos: 900000000 },
+    );
+    expect(result.toISOString()).toBe('2022-04-13T16:09:35.100Z');
+  });
+
+  it('should throw RangeError when given no arguments', () => {
+    expect(() => minDate()).toThrow(RangeError);
+  });
+});
+
+describe('maxDate', () => {
+  it('should return the latest date from a list of ISO strings', () => {
+    const result = maxDate(
+      '2022-04-13T16:29:35.630Z',
+      '2022-04-13T16:29:33.630Z',
+      '2022-04-13T16:29:41.630Z',
+    );
+    expect(result).toBeInstanceOf(Date);
+    expect(result.toISOString()).toBe('2022-04-13T16:29:41.630Z');
+  });
+
+  it('should return the latest date from a list of Timestamp objects', () => {
+    const result = maxDate(
+      { seconds: '1649866175', nanos: 0 },
+      { seconds: '1649866170', nanos: 0 },
+      { seconds: '1649866180', nanos: 0 },
+    );
+    expect(result).toBeInstanceOf(Date);
+    expect(result.toISOString()).toBe('2022-04-13T16:09:40.000Z');
+  });
+
+  it('should return the latest date when mixing Timestamps, strings, and Date instances', () => {
+    const result = maxDate(
+      '2022-04-13T16:29:35.630Z',
+      { seconds: '1649866175', nanos: 630000000 },
+      new Date('2022-04-13T16:29:41.000Z'),
+    );
+    expect(result).toBeInstanceOf(Date);
+    expect(result.toISOString()).toBe('2022-04-13T16:29:41.000Z');
+  });
+
+  it('should return the only date when given a single argument', () => {
+    const result = maxDate('2022-04-13T16:29:35.630Z');
+    expect(result.toISOString()).toBe('2022-04-13T16:29:35.630Z');
+  });
+
+  it('should differentiate between Timestamps with different nanos in the same second', () => {
+    const result = maxDate(
+      { seconds: '1649866175', nanos: 500000000 },
+      { seconds: '1649866175', nanos: 100000000 },
+      { seconds: '1649866175', nanos: 900000000 },
+    );
+    expect(result.toISOString()).toBe('2022-04-13T16:09:35.900Z');
+  });
+
+  it('should throw RangeError when given no arguments', () => {
+    expect(() => minDate()).toThrow(RangeError);
+  });
+});
+
+describe('validTimeToDate', () => {
+  it('should convert a Timestamp object with seconds and nanos to a Date', () => {
+    const timestamp = { seconds: '1649866175', nanos: 630571000 };
+    const result = validTimeToDate(timestamp);
+    expect(result).toBeInstanceOf(Date);
+    expect(result.toISOString()).toBe('2022-04-13T16:09:35.630Z');
+  });
+
+  it('should convert a Timestamp object with numeric seconds to a Date', () => {
+    const timestamp = { seconds: 1649866175, nanos: 630571000 };
+    const result = validTimeToDate(timestamp);
+    expect(result).toBeInstanceOf(Date);
+    expect(result.toISOString()).toBe('2022-04-13T16:09:35.630Z');
+  });
+
+  it('should convert a Timestamp object with zero nanos to a Date', () => {
+    const timestamp = { seconds: '1649866175', nanos: 0 };
+    const result = validTimeToDate(timestamp);
+    expect(result).toBeInstanceOf(Date);
+    expect(result.toISOString()).toBe('2022-04-13T16:09:35.000Z');
+  });
+
+  it('should convert a Timestamp object with null nanos to a Date', () => {
+    const timestamp = { seconds: '1649866175', nanos: null };
+    const result = validTimeToDate(timestamp);
+    expect(result).toBeInstanceOf(Date);
+    expect(result.toISOString()).toBe('2022-04-13T16:09:35.000Z');
+  });
+
+  it('should convert an ISO date string to a Date', () => {
+    const isoString = '2022-04-13T16:29:35.630Z';
+    const result = validTimeToDate(isoString);
+    expect(result).toBeInstanceOf(Date);
+    expect(result.toISOString()).toBe('2022-04-13T16:29:35.630Z');
+  });
+
+  it('should convert an ISO date string with nanosecond precision to a Date', () => {
+    const isoString = '2022-04-13T16:29:35.630571Z';
+    const result = validTimeToDate(isoString);
+    expect(result).toBeInstanceOf(Date);
+    expect(result.toISOString()).toBe('2022-04-13T16:29:35.630Z');
+  });
+
+  it('should return a Date when passed a Date instance', () => {
+    const date = new Date('2022-04-13T16:29:35.630Z');
+    const result = validTimeToDate(date);
+    expect(result).toBeInstanceOf(Date);
+    expect(result.toISOString()).toBe('2022-04-13T16:29:35.630Z');
+  });
+
+  it('should throw a TypeError if given unparsable string', () => {
+    expect(() => validTimeToDate('not-a-date')).toThrow(TypeError);
+  });
+
+  it('should throw on an empty string', () => {
+    expect(() => validTimeToDate('')).toThrow(TypeError);
+  });
+});
diff --git a/src/lib/utilities/format-time.ts b/src/lib/utilities/format-time.ts
index d37769283c..4da7fc1653 100644
--- a/src/lib/utilities/format-time.ts
+++ b/src/lib/utilities/format-time.ts
@@ -1,4 +1,6 @@
 import {
+  max as dateFnsMax,
+  min as dateFnsMin,
   differenceInDays,
   formatDuration as durationToString,
   getMilliseconds as getSecondAsMilliseconds,
@@ -49,8 +51,78 @@ export function isTimestamp(arg: unknown): arg is Timestamp {
   return false;
 }
 
+/**
+ * Converts a {@link ValidTime} (a {@link Timestamp} object, ISO 8601 string,
+ * epoch number, or `Date`) into a `Date` instance.
+ *
+ * If the input is a {@link Timestamp}, its `seconds` and `nanos` fields are
+ * combined into a millisecond-precision `Date`. Otherwise the value is parsed
+ * via `date-fns`'s `parseJSON`.
+ *
+ * @param validTime - The time value to convert.
+ * @returns A `Date` representing `validTime`. The returned `Date` is
+ *   guaranteed to be valid (i.e. its time value is never `NaN`).
+ * @throws {TypeError} If `validTime` is a string/number that cannot be parsed
+ *   into a valid date.
+ */
+export function validTimeToDate(validTime: ValidTime): Date {
+  if (isTimestamp(validTime)) {
+    return timestampToDate(validTime);
+  }
+
+  const parsedDate = cachedParseJSON(validTime);
+
+  if (Number.isNaN(parsedDate.getTime())) {
+    throw new TypeError(`Invalid time: ${String(validTime)}`);
+  }
+
+  return parsedDate;
+}
+
+/**
+ * Returns the earliest `Date` from the given times.
+ *
+ * Each argument is normalized via {@link validTimeToDate} before comparison,
+ * so a mix of {@link Timestamp} objects, ISO 8601 strings, epoch numbers, and
+ * `Date` instances is accepted.
+ *
+ * @param validTimes - One or more times to compare.
+ * @returns The earliest time as a `Date`.
+ * @throws {RangeError} If called with no arguments.
+ * @throws {TypeError} If any argument cannot be converted to a valid `Date`
+ *   (propagated from {@link validTimeToDate}).
+ */
+export function minDate(...validTimes: ValidTime[]): Date {
+  if (!validTimes.length) {
+    throw new RangeError('Requires at least one time');
+  }
+
+  return dateFnsMin(validTimes.map((validTime) => validTimeToDate(validTime)));
+}
+
+/**
+ * Returns the latest `Date` from the given times.
+ *
+ * Each argument is normalized via {@link validTimeToDate} before comparison,
+ * so a mix of {@link Timestamp} objects, ISO 8601 strings, epoch numbers, and
+ * `Date` instances is accepted.
+ *
+ * @param validTimes - One or more times to compare.
+ * @returns The latest time as a `Date`.
+ * @throws {RangeError} If called with no arguments.
+ * @throws {TypeError} If any argument cannot be converted to a valid `Date`
+ *   (propagated from {@link validTimeToDate}).
+ */
+export function maxDate(...validTimes: ValidTime[]): Date {
+  if (!validTimes.length) {
+    throw new RangeError('Requires at least one time');
+  }
+
+  return dateFnsMax(validTimes.map((validTime) => validTimeToDate(validTime)));
+}
+
 export function formatDuration(
-  duration: Duration | string,
+  duration: Duration | string | null,
   delimiter = ', ',
 ): string {
   if (duration === null || !duration) return '';
@@ -105,16 +177,8 @@ export function getDuration({
   if (!start || !end) return null;
 
   try {
-    if (isTimestamp(start)) {
-      start = timestampToDate(start);
-    }
-
-    if (isTimestamp(end)) {
-      end = timestampToDate(end);
-    }
-
-    const parsedStart = cachedParseJSON(start);
-    const parsedEnd = cachedParseJSON(end);
+    const parsedStart = validTimeToDate(start);
+    const parsedEnd = validTimeToDate(end);
 
     const duration = intervalToDuration({ start: parsedStart, end: parsedEnd });
     return flexibleUnits
@@ -144,16 +208,8 @@ export function getMillisecondDuration({
   if (!start || !end) return null;
 
   try {
-    if (isTimestamp(start)) {
-      start = timestampToDate(start);
-    }
-
-    if (isTimestamp(end)) {
-      end = timestampToDate(end);
-    }
-
-    const parsedStart = cachedParseJSON(start);
-    const parsedEnd = cachedParseJSON(end);
+    const parsedStart = validTimeToDate(start);
+    const parsedEnd = validTimeToDate(end);
     const ms = parsedEnd.getTime() - parsedStart.getTime();
     return onlyUnderSecond ? Math.abs(ms % 1000) : Math.abs(ms);
   } catch {
@@ -216,12 +272,7 @@ export function formatDistanceAbbreviated({
 
 export function getMilliseconds(date: ValidTime | undefined | null): number {
   if (!date) return 0;
-  if (isTimestamp(date)) {
-    date = timestampToDate(date);
-  }
-  const parsedDate = parseJSON(date);
-
-  return getSecondAsMilliseconds(parsedDate);
+  return getSecondAsMilliseconds(validTimeToDate(date));
 }
 
 export function fromSecondsToMinutesAndSeconds(seconds: number): string {
@@ -281,7 +332,7 @@ export const fromDurationToNumber = (duration: string): string => {
   return duration?.replace('s', '');
 };
 
-export const fromNumberToDuration = (duration: string): string => {
+export const fromNumberToDuration = (duration: string): string | undefined => {
   if (!duration) return undefined;
   return duration + 's';
 };
diff --git a/src/lib/utilities/type-predicates.ts b/src/lib/utilities/type-predicates.ts
new file mode 100644
index 0000000000..06ad236bf4
--- /dev/null
+++ b/src/lib/utilities/type-predicates.ts
@@ -0,0 +1,5 @@
+export const isNotNullish = <T>(value: T): value is NonNullable<T> =>
+  value !== null && value !== undefined;
+
+export const isNullish = (value: unknown): value is undefined | null =>
+  value == null;
diff --git a/tests/integration/timeline-collapse-idle-time.spec.ts b/tests/integration/timeline-collapse-idle-time.spec.ts
new file mode 100644
index 0000000000..15e18b9323
--- /dev/null
+++ b/tests/integration/timeline-collapse-idle-time.spec.ts
@@ -0,0 +1,98 @@
+import { expect, type Page, test } from '@playwright/test';
+
+import completedEvents from '~/fixtures/completed-event-history.json' with { type: 'json' };
+import { mockWorkflowApis } from '~/test-utilities/mock-apis';
+import {
+  EVENT_HISTORY_API,
+  EVENT_HISTORY_API_REVERSE,
+} from '~/test-utilities/mocks/event-history';
+import { mockWorkflow } from '~/test-utilities/mocks/workflow';
+
+const { workflowId, runId } = mockWorkflow.workflowExecutionInfo.execution;
+const timelineUrl = `/namespaces/default/workflows/${workflowId}/${runId}/timeline`;
+
+// A running workflow whose work finished long before "now" leaves large idle
+// gaps around its single short activity, which the timeline can collapse. The
+// default mock keeps an activity pending so its span fills the timeline and
+// nothing is collapsible — that drives the disabled-state test.
+const events = Object.values(completedEvents);
+const idleHistory = {
+  history: { events },
+  rawHistory: [],
+  nextPageToken: null,
+  archived: false,
+};
+const runningWorkflow = {
+  ...mockWorkflow,
+  pendingActivities: [],
+  pendingChildren: [],
+};
+
+const mockIdleTimeline = async (page: Page) => {
+  await mockWorkflowApis(page, runningWorkflow);
+  await page.route(EVENT_HISTORY_API, (route) =>
+    route.fulfill({ json: idleHistory }),
+  );
+  await page.route(EVENT_HISTORY_API_REVERSE, (route) =>
+    route.fulfill({
+      json: { ...idleHistory, history: { events: [...events].reverse() } },
+    }),
+  );
+};
+
+test.describe('Timeline collapse idle time', () => {
+  test.describe('with collapsible idle gaps', () => {
+    test.beforeEach(async ({ page }) => {
+      await mockIdleTimeline(page);
+      await page.goto(timelineUrl);
+    });
+
+    test('collapses idle time by default and offers to expand it', async ({
+      page,
+    }) => {
+      const toggle = page.getByTestId('toggle-idle-time');
+      await expect(toggle).toBeEnabled();
+      await expect(toggle).toContainText('Show idle time');
+    });
+
+    test('expands and re-collapses idle time from the header toggle', async ({
+      page,
+    }) => {
+      const toggle = page.getByTestId('toggle-idle-time');
+
+      await toggle.click();
+      await expect(toggle).toContainText('Hide idle time');
+
+      await toggle.click();
+      await expect(toggle).toContainText('Show idle time');
+    });
+
+    test('exposes an accessible per-segment toggle reflecting pressed state', async ({
+      page,
+    }) => {
+      const handle = page.getByRole('button', { name: /time segment/ }).first();
+
+      // Collapsed by default -> pressed.
+      await expect(handle).toHaveAttribute('aria-pressed', 'true');
+
+      await handle.click();
+      await expect(handle).toHaveAttribute('aria-pressed', 'false');
+
+      await handle.click();
+      await expect(handle).toHaveAttribute('aria-pressed', 'true');
+    });
+  });
+
+  test.describe('without collapsible idle gaps', () => {
+    test.beforeEach(async ({ page }) => {
+      await mockWorkflowApis(page);
+      await page.goto(timelineUrl);
+    });
+
+    test('disables the idle-time toggle when nothing is collapsible', async ({
+      page,
+    }) => {
+      await expect(page.getByTestId('toggle-idle-time')).toBeDisabled();
+    });
+  });
+});

From 6f0ffa8aec130a9e60fd075550298ec9b8f80d9b Mon Sep 17 00:00:00 2001
From: Tegan Churchill <tegan.churchill@temporal.io>
Date: Thu, 25 Jun 2026 15:45:48 -0700
Subject: [PATCH 2/2] fix(timeline): defer idle-time collapse and gate its
 toggle on load

Timeline segments are $derived from the streaming event list, so applying
the default collapse on init (mid-stream) made the idle-time zigzag appear
and shift as partial-data gaps resolved during initial load.

- Apply collapseAllSegmentsByDefault() from an $effect gated on
  historyCtx.fetchComplete instead of in onTimelineInit, so the default
  collapse runs once against the final, stable segment set.
- Hide TimelineCollapsedLayer while loading so no zigzag/handles render on
  unstable segments.
- Disable the show/hide idle-time toggle until fetchComplete and show the
  Button's loading spinner in place of its icon while the history streams in.
---
 .../timeline-graph/timeline-graph.svelte       | 18 ++++++++++--------
 .../layouts/workflow-timeline-layout.svelte    | 15 ++++++++++++---
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/lines-and-dots/timeline-graph/timeline-graph.svelte b/src/lib/components/lines-and-dots/timeline-graph/timeline-graph.svelte
index 7a47891cee..4902d4fdfe 100644
--- a/src/lib/components/lines-and-dots/timeline-graph/timeline-graph.svelte
+++ b/src/lib/components/lines-and-dots/timeline-graph/timeline-graph.svelte
@@ -489,14 +489,16 @@
         {scale}
       />
       <WorkflowRow {workflow} y={height} length={canvasWidth} />
-      <g transform="translate({gutter}, 0)">
-        <TimelineCollapsedLayer
-          {scale}
-          {timelineHeight}
-          {readOnly}
-          onToggle={toggleSegment}
-        />
-      </g>
+      {#if !loading}
+        <g transform="translate({gutter}, 0)">
+          <TimelineCollapsedLayer
+            {scale}
+            {timelineHeight}
+            {readOnly}
+            onToggle={toggleSegment}
+          />
+        </g>
+      {/if}
 
       <!--
         PERF IMPERATIVE TRANSFORM APPROACH:
diff --git a/src/lib/layouts/workflow-timeline-layout.svelte b/src/lib/layouts/workflow-timeline-layout.svelte
index 8d88e8510a..fc69d96c6d 100644
--- a/src/lib/layouts/workflow-timeline-layout.svelte
+++ b/src/lib/layouts/workflow-timeline-layout.svelte
@@ -259,10 +259,17 @@
 
   const handleTimelineInit = (t: Timeline) => {
     timeline = t;
-    if ($collapseIdleTime === 'on') {
+  };
+
+  // Defer the default collapse until the history fetch finishes. Segments are
+  // derived from the streaming event list, so collapsing mid-stream makes the
+  // idle-time zigzag appear and shift as partial-data gaps resolve. Waiting for
+  // fetchComplete collapses once against the final, stable segment set.
+  $effect(() => {
+    if (timeline && historyCtx.fetchComplete && $collapseIdleTime === 'on') {
       timeline.collapseAllSegmentsByDefault();
     }
-  };
+  });
 
   const onToggleIdleTime = () => {
     if (!timeline) return;
@@ -315,7 +322,9 @@
         <ToggleButton
           leadingIcon="timeline-collapse"
           data-testid="toggle-idle-time"
-          disabled={!timeline?.hasCollapsibleSegments}
+          loading={!historyCtx.fetchComplete}
+          disabled={!historyCtx.fetchComplete ||
+            !timeline?.hasCollapsibleSegments}
           on:click={onToggleIdleTime}
           size="sm"
         >