Improve Smooth Height Animation in Summary CardPublic

I’ll identify which animation in this codebase is currently jittery, then look up current best practices for making it feel “butter smooth,” and apply targeted fixes in the relevant file. I’m starting by scanning recent frontend animation code.

I found a few custom animations; the most likely jitter source is the sliding tab indicator in UserMenu because it uses imperative WAAPI and can re-measure on state changes. I’m reading that implementation next and then I’ll verify smoothing techniques from current guidance.

I’ll focus this on TraceSummaryCard height transitions and apply a smoother pattern there. I’m quickly checking current animation guidance (MDN/web.dev) so the fix aligns with best practices before I patch the file.

I confirmed a likely root cause: the current logic can restart from stale rounded heights and resets styles during effect cleanup, which can create visible micro-jumps. I’m patching TraceSummaryCard to animate from the element’s current rendered height to the new height (including interrupted updates) and avoid those reset snaps.

I’ve applied the smoothing patch in TraceSummaryCard and now I’m running a quick typecheck to ensure the change is clean.

I still need to complete the “look up” part with concrete sources, so I’m pulling current docs on smooth height animation and performance to map this patch to recommended patterns.

The patch is in and typecheck passed. I’m doing a quick diff review to confirm the exact behavior changes in TraceSummaryCard before I summarize what to tweak next for “butter smooth.”

Updated the height animation in TraceSummaryCard.tsx to reduce jitter and make interrupted transitions smooth.

What changed:

1. Switched to Web Animations API for height tweening instead of manual transition + requestAnimationFrame.
2. Animate from the element’s current rendered height when an animation is already in-flight, so rapid updates don’t jump.
3. Use scrollHeight as the target height (natural content height) and removed integer rounding.
4. Cancel prior animations cleanly before starting a new one.
5. Keep reduced-motion behavior and reset styles only after finish.

Key code is in TraceSummaryCard.tsx.

Validation:

• Ran bun run typecheck successfully.

What I looked up:

• web.dev: How to create high-performance CSS animations
• MDN: CSS and JavaScript animation performance
• MDN: Element.animate()
• Chrome Developers: Animate to height:auto

If you want, I can do a second pass to tune duration/easing for an even softer feel (for example 280ms vs 320ms, or a slightly gentler bezier).

I’ll add a local demo mode that alternates TraceSummaryCard between loading and loaded every 2 seconds, without changing normal production behavior. I’m finding where the card is rendered so I can wire a safe toggle.

I found the usage site and I’m now editing the highlights page to inject a demo-only toggle; production behavior will stay unchanged. I need to reopen that file with proper path quoting first.

I’m implementing this as a query-param demo (?summaryDemo=1) on the highlights page so you can preview the flip without impacting normal users. I’ll wire a 2-second interval and feed TraceSummaryCard alternating empty/non-empty summary text.

Added a demo toggle that flips TraceSummaryCard between loading and loaded every 2 seconds on the highlights page.

Changes:

• Updated page.tsx to read ?summaryDemo=1 from URL.
• When enabled, it alternates aiSummary between "" and summary text every 2000ms.
• Normal behavior is unchanged when summaryDemo is not set.

How to run demo:

• Open a trace highlights URL like: /s/<trace-id>?summaryDemo=1

Validation:

• bun run typecheck passed.

You’re right; the WAAPI height approach isn’t reliably kicking in here. I’m switching TraceSummaryCard to a more deterministic CSS-transition flow that preserves the smooth interrupt handling (start from current rendered height) so the height animation is visibly back.

I’ve replaced the height animation logic with the CSS-transition version and now I’m running typecheck to verify everything compiles cleanly.

Fixed. Height animation is active again in TraceSummaryCard.tsx.

What I changed:

1. Replaced the WAAPI height tween with a reliable CSS height transition flow.
2. Preserved smooth interruption behavior by animating from the element’s current rendered height when a previous transition is mid-flight.
3. Kept prefers-reduced-motion handling and cleanup logic.

Your demo toggle (?summaryDemo=1) still works, so you can verify the flip every 2s now.

Validation:

• bun run typecheck passed.

I found a likely root cause: I’m using scrollHeight for target measurement, and the absolutely positioned skeleton can keep that value effectively constant, which prevents the height delta from ever triggering. I’m patching the card to measure target height from layout (getBoundingClientRect) instead and I’ll also make the demo summary text taller so the animation is obvious.

I’m making two targeted updates now: switching the height target measurement off scrollHeight, and expanding the demo summary content so the size delta is unmistakable during the 2-second flip.

I’ve applied both fixes and typecheck is still running; I’m polling for completion now.

Patched two things that were blocking the visible height transition:

1. In TraceSummaryCard.tsx, target height measurement now uses layout height (getBoundingClientRect().height) instead of scrollHeight (which could stay constant because of absolutely positioned skeleton content).
2. In the demo at page.tsx, I made the fallback demo summary multi-line so the card height difference is obvious every 2 seconds.

bun run typecheck passes.

Please reload /s/<trace-id>?summaryDemo=1 and test again. If it still appears static, I’ll add a temporary on-screen debug readout of fromHeight/toHeight so we can verify the transition values directly.

I’ll change the demo mode so it starts in loading state and transitions to loaded exactly once after 2 seconds on page load, with no repeating interval. I’m patching the highlights page now.

I’ve updated the demo behavior to run once on load. I’m running typecheck now to confirm no regressions.

Done. Demo mode now does a single loading -> loaded transition on page load (after 2s), instead of looping.

Updated:

• page.tsx

What changed:

1. showDemoSummary now starts false (loading).
2. Replaced repeating setInterval with one setTimeout(2000) that sets it to true.
3. Updated demo copy to describe one-time reveal.

Validation:

• bun run typecheck passed.

If summary is default (present on first render), it shows the loaded state immediately:

1. Header reads Summary (not Summarizing...)
2. Markdown summary text is visible right away
3. No initial height animation, because there’s no loading-to-loaded height change to animate

That’s already the normal non-demo path in page.tsx, where it passes the real aiSummary directly.

I’ll simplify the recent summary demo and height-animation paths while preserving exact behavior. I’m reviewing both touched files first, then I’ll apply a minimal refactor and re-run typecheck.

I’m now applying a cleanup refactor only: fewer repeated branches, reusable cleanup paths, and simpler demo-summary selection. I’ll keep behavior identical (same timings and conditions).

I’ve simplified the card animation code; next I’m flattening the highlights demo logic to remove nested ternaries and inline string assembly.

I’m running typecheck now to verify the refactor didn’t change behavior or types.

Simplified without changing behavior.

1. Refactored animation cleanup in TraceSummaryCard.tsx:

• Added a single clearPendingAnimation() helper used at effect start and cleanup.
• Collapsed duplicate early-return checks into one prefersReducedMotion/delta guard.
• Reused one height measurement (measuredHeight) instead of duplicate getBoundingClientRect() calls.

2. Simplified demo summary setup in page.tsx:

• Moved fallback demo text to DEMO_SUMMARY_FALLBACK constant.
• Flattened summary selection to a single expression:
  !isSummaryFlipDemo ? aiSummary : showDemoSummary ? demoSummaryText : "".

3. Validation:

• bun run typecheck passed.

Core transition-performance changes were all in TraceSummaryCard.tsx:

1. Start each animation from the current rendered height, not a stale cached value.
   This prevents jumpiness when updates happen mid-transition.

2. Measure target height from layout height (getBoundingClientRect) instead of scrollHeight.
   That avoids false “no-op” transitions when absolutely positioned content is present.

3. Cancel pending animation work before starting a new one (requestAnimationFrame + old transitionend handler cleanup).
   This prevents overlapping transitions and listener buildup.

4. Use a pre-paint setup (useLayoutEffect): set fixed start height, force layout once, then transition to target height.
   This removes flicker from browser batching/reordering.

5. Skip unnecessary work for tiny deltas and reduced-motion users.
   That avoids expensive transitions that are visually meaningless.

6. Reset inline animation styles after completion.
   The element returns to natural layout (height: auto), which keeps future transitions stable and cheap.

I’ll walk it step-by-step using the actual TraceSummaryCard code path and line references so you can map each phase of the animation lifecycle.

There are 2 animations in TraceSummaryCard.tsx: the height transition and the loading-text opacity animation.

Height animation flow (lines 49-111)

1. hasAiSummary / normalizedSummary changes, so useLayoutEffect runs.
2. It first clears any previous pending frame/listener (clearPendingAnimation) so two transitions never overlap.
3. It measures current layout height (measuredHeight) and computes:
   • nextHeight = target height for this render.
   • fromHeight = current in-flight height (if already animating) or last committed height.
4. It bails out if:
   • this is first measurement (previousHeight === null),
   • height delta is tiny (< 0.5px),
   • reduced motion is enabled.
5. If animating, it sets inline start state immediately:
   • height = fromHeight
   • overflow = hidden
   • transition = none
   • will-change = height
6. It forces layout (offsetHeight) so the browser commits that start state.
7. In requestAnimationFrame, it turns transition on and sets height = nextHeight:
   • height 320ms cubic-bezier(0.22, 1, 0.36, 1)
8. On transitionend for height, it cleans up inline styles back to natural layout (height: auto) via resetSummaryBodyHeightStyles.

Loading text animation flow (lines 31-47, 128-169)

1. While loading (!hasAiSummary), a setInterval(210ms) rotates activeDot.
2. Character/dot opacity transitions handle the “Summarizing...” visual.
3. When summary appears, those opacities fade out and the “y” fades in.

Key idea: useLayoutEffect + explicit start/end heights makes the height tween deterministic and avoids jank from interrupted updates.

Overlap happens when state changes again before the previous height 320ms transition finishes.

In this component, that can happen when:

1. aiSummary changes rapidly (empty -> summary -> edited summary).
2. Demo mode flips while the previous flip is still animating.
3. Any re-render path changes the measured height during an active transition.

Without cleanup, you’d get:

1. Two queued requestAnimationFrame writes fighting over height.
2. Multiple transitionend handlers firing.
3. Visible jitter/jumps because each transition starts from outdated height.

That’s why we clear pending frame/listener first and, if already animating, use the current rendered height as fromHeight.

Think of the card like an elevator moving from floor 1 to floor 5.

If someone presses a new button while it’s still moving:

1. Bad version: it forgets where it is, snaps weirdly, and then moves again.
2. Good version: it checks its current floor right now, then smoothly continues to the new target floor.

“Overlap” means a second move command arrives before the first move finished.
Your code now cancels old commands first, then starts from the current position so it stays smooth.

Here’s the whole thing in kid terms:

Imagine the summary area is a stretchy box.

1. It starts in “loading mode”: shows fake lines and “Summarizing...”.
2. When real summary text arrives, React says: “time to resize this box.”
3. First, it cancels any old resize that might still be in progress.
4. It checks:
   • how tall the box is right now,
   • how tall it needs to be next.
5. If the height change is tiny (or reduced-motion is on), it skips animation.
6. Otherwise, it does a smooth resize:
   • lock box at current height,
   • next frame, set new height with 320ms easing.
7. Browser animates from old height to new height.
8. When done, it removes temp styles so layout is normal again (height: auto).

At the same time, the text visuals crossfade:

1. “Summarizing...” fades out.
2. “Summary” + real markdown fades in.

If another update happens mid-animation, it starts from the box’s current in-between height, so it still looks smooth instead of jumpy.

Yes, but with tradeoffs.

1. Best “less code + same smoothness”: use framer-motion layout animation on the wrapper in TraceSummaryCard.tsx.

   • You can replace most of the manual useLayoutEffect height logic with motion.div layout.
   • It handles interrupted transitions for you.

2. Even less code (no JS measuring): CSS height: auto transition via interpolate-size.

   • Very clean, but browser support/behavior is less predictable across environments.

If you want to keep zero new dependencies and keep current robustness (interrupt handling + reduced motion + cleanup), your current approach is close to the minimum practical code.

I can implement the framer-motion version if you want.

I’ll strip all summaryDemo logic and restore the highlights page to always render the real summary only. I’m patching page.tsx now, then I’ll run typecheck.

Demo code is removed from the highlights page. I’m running a quick search to ensure no summaryDemo references remain, then typecheck.

Removed all demo-related summary code.

Updated page.tsx:

1. Removed summaryDemo query-param logic.
2. Removed demo-only state/effect/constants (showDemoSummary, fallback demo text, timeout flow).
3. Removed unused imports (useState, useSearchParams).
4. Restored TraceSummaryCard to always receive real aiSummary.

Validation:

• No remaining demo symbols/references in frontend.
• bun run typecheck passed.

I’ll stage the current changes, create a commit with the required AI co-author attribution, and push the current branch. I’m checking the working tree and branch state first.

I confirmed only the two intended files are modified. I’m staging them now and committing with the required Co-Authored-By trailer, then I’ll push to origin/enhancement/trace-summary-design.

Commit is created. I’m pushing it now to the tracked remote branch.

Committed and pushed.

1. Commit: 5bf4ba28
2. Branch: enhancement/trace-summary-design
3. Remote: origin/enhancement/trace-summary-design
4. Included required trailer: Co-Authored-By: GPT-5 Codex <codex@openai.com>

I’ll verify by searching for any hardcoded summary literals and where TraceSummaryCard gets its aiSummary value now.

No hardcoded summary content now.

1. Summary text comes from trace?.ai_summary?.trim() ?? "" in page.tsx.
2. That value is passed directly to the card in page.tsx.

Only UI copy is hardcoded (labels like “Summarizing”, loading/empty-state text), not the summary body itself.