fix(dashboaard): update react-resizable-panels and next to fix Previous layout not found for panel index 2 error

[dimaMachina]

No description provided.

[vercel]

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

Project	Deployment	Review	Updated (UTC)
agents-api	Ready	Preview, Comment	Jan 29, 2026 11:33am
agents-docs	Ready	Preview, Comment	Jan 29, 2026 11:33am
agents-manage-ui	Ready	Preview, Comment	Jan 29, 2026 11:33am

[changeset-bot]

🦋 Changeset detected

Latest commit: 40b584d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@inkeep/agents-manage-ui	Patch
@inkeep/agents-api	Patch
@inkeep/agents-cli	Patch
@inkeep/agents-core	Patch
@inkeep/agents-manage-mcp	Patch
@inkeep/agents-mcp	Patch
@inkeep/agents-sdk	Patch
@inkeep/ai-sdk-provider	Patch
@inkeep/create-agents	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[claude]

Claude finished @dimaMachina's task —— View job

---

Code Review Complete ✅

Conducted a thorough TypeScript Staff Engineer / System Architect review of this PR that updates react-resizable-panels and next to fix panel layout issues.

Summary

This PR addresses the "Previous layout not found for panel index 2" error by:

1. Updating dependencies: react-resizable-panels from ^3.0.6 → ^4.5.4 and next from 16.1.0 → 16.1.6
2. Introducing useDefaultLayout hook: A new utility for managing resizable panel layouts with persistent storage
3. Adding dynamic imports: New pattern for better code splitting in the agent page
4. Migrating 4 components: Systematic adoption of the new layout management pattern

Technical Analysis

✅ Strengths

Dependency Management:

• Major version jump handled correctly: The react-resizable-panels upgrade from v3 to v4 is a significant change that's being managed systematically across all usage points
• Next.js patch update: The incremental update to 16.1.6 is appropriate for bug fixes

Architecture & Design:

• Consistent API design: The useDefaultLayout hook provides a clean, reusable interface with proper TypeScript typing
• Separation of concerns: Layout state management is properly abstracted from component logic
• Graceful storage handling: SSR-safe localStorage handling with fallbacks prevents hydration mismatches

Migration Strategy:

• Systematic approach: All 4 components using resizable panels have been consistently updated
• Backwards compatibility: Changes maintain existing functionality while fixing the underlying issue

⚠️ Areas for Consideration

1. Breaking Changes & API Surface (Medium Priority)

The major version bump in react-resizable-panels likely contains breaking changes that should be explicitly documented:

// Before (v3):
<ResizablePanelGroup defaultLayout={[30, 70]}>
  {/* panels */}
</ResizablePanelGroup>

// After (v4 with new hook):
const { defaultLayout, onLayoutChange } = useDefaultLayout({ groupId: '...' });
<ResizablePanelGroup defaultLayout={defaultLayout} onLayoutChange={onLayoutChange}>
  {/* panels */}
</ResizablePanelGroup>

Questions to consider:

• Are there other breaking changes in v4 that haven't been addressed?
• Should existing layouts in localStorage be migrated to the new format?

2. Error Handling & Resilience (Medium Priority)

The useDefaultLayout implementation could benefit from more robust error handling:

// Current implementation lacks error boundaries
export function useDefaultLayout({ groupId, storage = localStorage }) {
  // What happens if storage.getItem throws?
  // What if JSON.parse fails with corrupted data?
}

Recommendations:

• Add try-catch blocks around storage operations
• Provide fallback behavior for corrupted localStorage data
• Consider logging storage-related errors for debugging

3. Performance Considerations (Low Priority)

Storage Pattern: Each component instance calls storage.getItem on every render via the hook. Consider:

• Memoization of storage reads
• Debounced writes to prevent excessive localStorage updates during active resizing

4. Type Safety (Medium Priority)

The changeset title has a typo ("dashboaard" instead of "dashboard") and should be corrected:

-fix(dashboaard): update `react-resizable-panels` and `next` to fix `Previous layout not found for panel index 2` error
+fix(dashboard): update `react-resizable-panels` and `next` to fix `Previous layout not found for panel index 2` error

📋 Implementation Quality

Code Quality: ⭐⭐⭐⭐⭐

• Clean, readable implementation following existing patterns
• Proper TypeScript usage with good type safety
• Consistent code style matching the codebase

Testing: ⚠️

• No new tests added for the useDefaultLayout hook
• Consider adding unit tests for:
  • Storage persistence behavior
  • SSR safety
  • Error handling edge cases

Documentation: ⚠️

• Missing JSDoc comments for the new useDefaultLayout hook
• No migration notes for the breaking change

System-Level Considerations

Cross-Component Impact: ✅ Well Managed

The systematic migration across all 4 resizable panel components shows good attention to consistency. The pattern is applied uniformly to:

• Agent configuration pages
• Playground components
• Timeline wrappers
• Conversation detail pages

User Experience: ✅ Improved

• Fixes the "Previous layout not found" error that was likely causing poor UX
• Maintains user layout preferences across sessions
• Prevents layout shifts during SSR/hydration

Future Extensibility: ✅ Good Foundation

The useDefaultLayout hook provides a solid foundation for:

• Adding more layout persistence options
• Implementing layout presets
• Supporting different storage backends

Recommendations

Immediate (Before Merge)

1. Fix the typo in the changeset filename and message
2. Add error handling to the useDefaultLayout hook for storage operations
3. Add JSDoc documentation for the new hook explaining its purpose and usage

Follow-up (Nice to Have)

1. Add unit tests for the useDefaultLayout hook
2. Consider performance optimizations for storage operations if needed at scale
3. Document the migration pattern for future similar updates

Overall Assessment

This is a well-executed technical debt fix that addresses a specific user-facing issue through systematic dependency updates and architectural improvements. The implementation is clean, consistent, and maintains backwards compatibility while introducing better layout state management.

The PR demonstrates good engineering practices:

• Systematic approach to breaking changes
• Consistent patterns applied across the codebase
• Proper separation of concerns with the new hook
• SSR considerations handled appropriately

Recommendation: ✅ Approve with minor fixes (address the typo and add basic error handling)

---

[dimaMachina]

Suggested change

	fix(dashboaard): update `react-resizable-panels` and `next` to fix `Previous layout not found for panel index 2` error
	fix(dashboard): update `react-resizable-panels` and `next` to fix `Previous layout not found for panel index 2` error

[sarah-inkeep]

1. I noticed on this branch when the try now chat is in debug mode the input is really tall but I don't see this behavior on the main branch.

2. I'm seeing this error in the console that I don't see on the main branch
   installHook.js:1 [React Flow]: The React Flow parent container needs a width and a height to render the graph.

3. I noticed on the traces page there seems to be a flicker in the details pane now that I don't see on the main branch when clicking through the timeline:
   example