fix(kno-11552): remove undefined breadcrumbs from docs

[cellomatt]

Description

This PR resolves the issue of "undefined" appearing in breadcrumbs on certain nested documentation pages, particularly within the /in-app-ui section.

Why:
The problem stemmed from two main issues:

1. Incorrect Breadcrumb Generation: The getInAppSidebar function in lib/content.ts was unconditionally generating breadcrumb items, leading to undefined values being converted to the string "undefined" when a matching section or page was not found.
2. State Synchronization Timing Issue: In layouts/InAppUILayout.tsx, the selectedSdk React state was not reliably syncing with the Next.js router's path after client-side hydration. This caused the breadcrumb logic to use an outdated SDK context, resulting in failed lookups.

How:

1. lib/content.ts: The getInAppSidebar function now conditionally adds breadcrumb items only when valid slug and title properties exist for the section or page.
2. layouts/InAppUILayout.tsx:
   • A useEffect hook was added to synchronize the selectedSdk state with the SDK value extracted from the URL path, ensuring the correct SDK context is always available.
   • The breadcrumb computation logic was updated to prioritize the SDK derived directly from the URL path (validSdkFromPath) over the selectedSdk state, mitigating timing issues.
   • The InAppSidebar component now uses an effectiveSdk prop to ensure the dropdown consistently reflects the current page's SDK.

Todos

• None

Tasks

• KNO-11552

Screenshots

Old:

New:

Linear Issue: KNO-11552

  

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[linear]

KNO-11552 [Docs] Breadcrumbs are broken in certain nested pages

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	Mar 10, 2026 4:55pm

[cursor]

Risk HIGH: Fixes "undefined" appearing in breadcrumbs on nested in-app UI pages by adding conditional breadcrumb generation and syncing SDK state with the URL path.

Reasons

• layouts/InAppUILayout.tsx (a .tsx file in layouts/) is modified — triggers HIGH risk per classification rules
• lib/content.ts (a .ts file in lib/) is modified — triggers HIGH risk per classification rules
• Changes affect breadcrumb generation logic used across all in-app UI pages, making this a shared/reusable code path
• A new useEffect hook is introduced in the layout component, altering React lifecycle behavior
• State derivation logic is changed (new effectiveSdk variable replaces direct selectedSdk usage), which could affect rendering across multiple pages

Notes

• Verify the useEffect dependency array ([paths, selectedSdk]) does not cause unnecessary re-renders or infinite loops — selectedSdk is set inside the effect and is also a dependency
• Confirm breadcrumbs render correctly on all in-app UI nested pages (e.g., /in-app-ui/react/overview, /in-app-ui/react/feed/components) after the conditional push logic in lib/content.ts
• Check that the effectiveSdk derivation handles edge cases such as direct navigation, browser back/forward, and initial SSR hydration
• The Vercel preview deployment is live — recommend manually testing breadcrumb rendering on several nested paths before merging

  

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[cursor]

useEffect reverts SDK state during SDK switch

Medium Severity

The useEffect includes selectedSdk in its dependency array, causing it to fire when handleSdkChange updates state. Since router.push() is async, the URL path still reflects the old SDK at that point, so sdkFromPath !== selectedSdk evaluates to true and the effect calls setSelectedSdk(sdkFromPath), reverting the user's selection. Combined with effectiveSdk always prioritizing the path-derived SDK, the dropdown visibly snaps back to the previous SDK until the route transition completes, causing unnecessary re-renders and a brief UI flicker.

Additional Locations (1)

• layouts/InAppUILayout.tsx#L165-L170

 

[cellomatt]

This is a simple fix that doesn't include nested sections (like SDK and UI Components), but I think that ok and it removes the erroneous undefinedundefined that displays currently