fix: auto-switch to ERD tab on realtime schema update by MH4GF · Pull Request #3978 · liam-hq/liam

MH4GF · 2025-11-04T06:30:11Z

Summary

Fixes #5940

Fix the issue where ERD tab doesn't automatically switch when a new schema version is created via realtime update.

Root Causes

Duplicate state update: handleChangeSelectedVersion was calling setSelectedVersion, but it's already called in useRealtimeVersionsWithSchema
Missing effect dependency: Without a useEffect tracking versions and selectedVersion, React's rendering cycle wasn't properly triggered

Changes

Remove setSelectedVersion call from handleChangeSelectedVersion (frontend/apps/app/components/SessionDetailPage/SessionDetailPageClient.tsx:76-78)
Add empty useEffect with [versions, selectedVersion] dependencies to ensure proper state synchronization

Technical Details

During debugging, we discovered that:

Debug logs with useEffect worked, but removing them caused the issue to reappear
The key was not the console.log, but the useEffect's dependency array
Even an empty useEffect body ensures React properly schedules re-renders when dependencies change

Test Plan

Manual test: Create new session, send message to generate schema, verify ERD tab auto-switches
Manual test: Verify existing behavior (page reload with versions) still works
Manual test: Verify analyzedRequirements auto-switch still works

🤖 Generated with Claude Code

Summary by CodeRabbit

Improvements
- Session version selection now automatically activates the ERD tab view.

Fix the issue where ERD tab doesn't automatically switch when a new schema version is created via realtime update. Root causes: 1. Duplicate state update: handleChangeSelectedVersion was calling setSelectedVersion, but it's already called in useRealtimeVersionsWithSchema 2. Missing effect dependency: Without a useEffect tracking versions and selectedVersion, React's rendering cycle wasn't properly triggered Changes: - Remove setSelectedVersion call from handleChangeSelectedVersion - Add empty useEffect with [versions, selectedVersion] dependencies to ensure proper state synchronization Resolves: #5940 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

giselles-ai · 2025-11-04T06:30:15Z

Finished running flow.

Step 1
🟢	On Pull Request Opened Status: Success Updated: Nov 4, 2025 6:30am
Step 2
🟢	gpt-5 Status: Success Updated: Nov 4, 2025 6:31am
Step 3
🟢	Create Pull Request Comment Status: Success Updated: Nov 4, 2025 6:31am

vercel · 2025-11-04T06:30:17Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
liam-app	Ready	Preview	Comment	Nov 4, 2025 6:40am
liam-assets	Ready	Preview	Comment	Nov 4, 2025 6:40am
liam-storybook	Ready	Preview	Comment	Nov 4, 2025 6:40am

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
liam-docs	Ignored	Preview		Nov 4, 2025 6:40am
liam-erd-sample	Skipped			Nov 4, 2025 6:40am

supabase · 2025-11-04T06:30:24Z

Updates to Preview Branch (fix-erd-tab-switch) ↗︎

Deployments	Status	Updated
Database	✅	Tue, 04 Nov 2025 06:32:17 UTC
Services	✅	Tue, 04 Nov 2025 06:32:17 UTC
APIs	✅	Tue, 04 Nov 2025 06:32:17 UTC

Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.

Tasks	Status	Updated
Configurations	✅	Tue, 04 Nov 2025 06:32:24 UTC
Migrations	✅	Tue, 04 Nov 2025 06:32:29 UTC
Seeding	✅	Tue, 04 Nov 2025 06:32:30 UTC
Edge Functions	✅	Tue, 04 Nov 2025 06:32:30 UTC

View logs for this Workflow Run ↗︎.
Learn more about Supabase for Git ↗︎.

coderabbitai · 2025-11-04T06:30:25Z

Walkthrough

A callback function handleChangeSelectedVersion was introduced to centralize the side-effect of switching the active tab to ERD when the selected version changes. The inline handler passed to useRealtimeVersionsWithSchema was replaced with this callback.

Changes

Cohort / File(s)	Change Summary
Version Selection Handler Centralization `frontend/apps/app/components/SessionDetailPage/SessionDetailPageClient.tsx`	Extracted inline `onChangeSelectedVersion` handler into a named callback that sets the active tab to ERD when the selected version changes

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Single file affected with straightforward refactoring
Logic extraction with added side effect (tab switching on version change)
Verify the callback is correctly integrated with useRealtimeVersionsWithSchema

Possibly related PRs

✨ Connect VersionMessage onView to version selection handler #2734: Wires version message clicks to setSelectedVersion in the same handler flow
✨ Show initial_schema_snapshot as Version 0 in VersionDropdown #3860: Modifies tab selection behavior and initial activeTab determination in SessionDetailPageClient.tsx
🐛 Fix tab reset issue when versions update via realtime #3599: Changes the hook callback invocation logic for realtime version updates in the same flow

Suggested reviewers

NoritakaIkeda
hoshinotsuyoshi
FunamaYukina

Poem

🐰 A version picker hops with care,
ERD tabs switch through the air,
Side effects bundled, clean and tight,
Handlers dancing left and right,
Refactored flows feel just right! ✨

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly describes the main change: auto-switching to the ERD tab on realtime schema updates, which aligns with the core fix in the changeset.
Description check	✅ Passed	The description includes a summary, root causes, specific changes, technical details, and test plan; however, it does not follow the required template structure with 'Issue' and 'Why is this change needed?' sections.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix-erd-tab-switch

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9f0945e and 1208887.

📒 Files selected for processing (1)

frontend/apps/app/components/SessionDetailPage/SessionDetailPageClient.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Name React component files in PascalCase and use TSX (e.g., App.tsx)

Files:

frontend/apps/app/components/SessionDetailPage/SessionDetailPageClient.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript/TSX across the codebase

Files:

frontend/apps/app/components/SessionDetailPage/SessionDetailPageClient.tsx

frontend/apps/**

📄 CodeRabbit inference engine (AGENTS.md)

Next.js apps live under frontend/apps; target app-specific scripts and configs there

Files:

frontend/apps/app/components/SessionDetailPage/SessionDetailPageClient.tsx

frontend/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

frontend/**/*.{ts,tsx}: Use named exports only (no default exports)
Import UI components from @liam-hq/ui when available
Import icons from @liam-hq/ui
Follow existing import patterns and tsconfig path aliases
Use consts instead of function declarations for simple utilities (e.g., const toggle = () => {})
Use runtime type validation with valibot for external data validation
Use early returns for readability

Files:

frontend/apps/app/components/SessionDetailPage/SessionDetailPageClient.tsx

🧬 Code graph analysis (1)

frontend/apps/app/components/SessionDetailPage/SessionDetailPageClient.tsx (1)

frontend/apps/app/components/SessionDetailPage/hooks/useRealtimeVersionsWithSchema/useRealtimeVersionsWithSchema.ts (1)

useRealtimeVersionsWithSchema (19-151)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: frontend-lint
GitHub Check: frontend-ci
GitHub Check: security-review
GitHub Check: Supabase Preview

🔇 Additional comments (2)

frontend/apps/app/components/SessionDetailPage/SessionDetailPageClient.tsx (2)

76-78: LGTM! Clean separation of concerns.

The callback correctly centralizes the tab-switching side effect. By removing the setSelectedVersion call (which useRealtimeVersionsWithSchema already handles internally), this eliminates the duplicate state update mentioned in the PR objectives.

Also applies to: 85-85

118-123: Remove or replace this empty useEffect with a proper fix.

The empty useEffect is a code smell that appears nowhere else in the codebase. Its dependencies [versions, selectedVersion] don't match the state being set (activeTab), suggesting it's a timing workaround rather than a logical dependency.

The comment claims it fixes activeTab updates from handleChangeSelectedVersion, but:

handleChangeSelectedVersion has empty deps and directly calls setActiveTab

The effect itself does nothing—it only exists for its dependencies to trigger re-renders

Before merging, verify:

Does removing this effect break the tab-switching behavior?

If so, the root cause is likely in React's batching order or callback closure timing—document that specifically

Consider if the real fix should be in how handleChangeSelectedVersion is called or how activeTab is managed

This pattern indicates a deeper issue that deserves proper investigation rather than a silent workaround.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

giselles-ai · 2025-11-04T06:31:24Z

Check changeset necessity

Status: NOT REQUIRED

Reason:

Changes are confined to the app code at frontend/apps/app/… which maps to the ignored package "@liam-hq/app".
No modifications to target, publishable packages: @liam-hq/cli, @liam-hq/erd-core, @liam-hq/schema, or @liam-hq/ui.
While the fix is user-facing (tab auto-switch behavior), it affects only the application, not a distributed library API.
No API, performance, or behavioral changes in any releasable package.

Changeset (copy & paste):

# Not required — changes are in ignored package(s); do not create a changeset.

github-actions Bot assigned MH4GF Nov 4, 2025

vercel Bot deployed to Preview – liam-assets November 4, 2025 06:32 View deployment

vercel Bot deployed to Preview – liam-storybook November 4, 2025 06:34 View deployment

MH4GF mentioned this pull request Nov 4, 2025

(miss) #3979

Closed

vercel Bot deployed to Preview – liam-app November 4, 2025 06:38 View deployment

MH4GF closed this Nov 5, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: auto-switch to ERD tab on realtime schema update#3978

fix: auto-switch to ERD tab on realtime schema update#3978
MH4GF wants to merge 1 commit into
mainfrom
fix-erd-tab-switch

MH4GF commented Nov 4, 2025 •

edited by coderabbitai Bot

Loading

Uh oh!

giselles-ai Bot commented Nov 4, 2025 •

edited

Loading

Uh oh!

vercel Bot commented Nov 4, 2025 •

edited

Loading

Uh oh!

supabase Bot commented Nov 4, 2025 •

edited

Loading

Uh oh!

coderabbitai Bot commented Nov 4, 2025 •

edited

Loading

Uh oh!

giselles-ai Bot commented Nov 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

MH4GF commented Nov 4, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Root Causes

Changes

Technical Details

Test Plan

Summary by CodeRabbit

Uh oh!

giselles-ai Bot commented Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

supabase Bot commented Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

giselles-ai Bot commented Nov 4, 2025

Check changeset necessity

Reason:

Changeset (copy & paste):

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

MH4GF commented Nov 4, 2025 •

edited by coderabbitai Bot

Loading

giselles-ai Bot commented Nov 4, 2025 •

edited

Loading

vercel Bot commented Nov 4, 2025 •

edited

Loading

supabase Bot commented Nov 4, 2025 •

edited

Loading

coderabbitai Bot commented Nov 4, 2025 •

edited

Loading