Skip to content

do not render tooltips for sidebar menu items#2811

Merged
dimaMachina merged 5 commits intomainfrom
tooltip-sidebar
Mar 25, 2026
Merged

do not render tooltips for sidebar menu items#2811
dimaMachina merged 5 commits intomainfrom
tooltip-sidebar

Conversation

@dimaMachina
Copy link
Copy Markdown
Collaborator

We previously had tooltips for sidebar items in collapsed mode

image

But in current design sidebar is expanded on hover and tooltip are never shown

This improve react-scan performance to eliminate 84 Tooltip and TooltipTrigger component render

before

image

after

image

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Mar 24, 2026

🦋 Changeset detected

Latest commit: 464b1be

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

This PR includes changesets to release 10 packages
Name Type
@inkeep/agents-manage-ui Patch
@inkeep/agents-api Patch
@inkeep/agents-cli Patch
@inkeep/agents-core Patch
@inkeep/agents-email Patch
@inkeep/agents-mcp Patch
@inkeep/agents-sdk Patch
@inkeep/agents-work-apps 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

@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 24, 2026

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

Project Deployment Actions Updated (UTC)
agents-api Ready Ready Preview, Comment Mar 25, 2026 0:08am
agents-manage-ui Ready Ready Preview, Comment Mar 25, 2026 0:08am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
agents-docs Skipped Skipped Mar 25, 2026 0:08am

Request Review

@claude
Copy link
Copy Markdown
Contributor

claude Bot commented Mar 24, 2026

PR Review Complete

  • Analyze PR context and diff
  • Dispatch domain-specific reviewers
  • Consolidate findings and submit review

Result: ✅ Approved — Clean performance optimization that removes dead code (tooltip was never visible due to hover-expand behavior). One minor suggestion posted as inline comment.

View job run

@pullfrog
Copy link
Copy Markdown
Contributor

pullfrog Bot commented Mar 24, 2026

TL;DR — Removes tooltip rendering from sidebar menu items and simplifies the NavItem component by dropping unused props (isExternal, optional icon) and inlining the isActive check.

Key changes

  • Remove tooltip prop from SidebarMenuButton — sidebar menu items no longer render tooltips on hover, which were redundant since the item titles are always visible.
  • Simplify NavItem props and markup — removes isExternal prop (and its target/rel attributes), makes icon required, and inlines the isActive computation. The <span> around the title is retained to prevent layout issues during sidebar collapse.
  • Convert .map() to expression body in NavGroup — replaces the block-body arrow with implicit return for cleaner iteration.
  • Add changeset for @inkeep/agents-manage-ui — patch-level changeset documenting the tooltip removal.

Summary | 3 files | 5 commits | base: maintooltip-sidebar


Before: NavItem accepted optional icon and isExternal props, stored isActive in a variable, and passed tooltip={title} to SidebarMenuButton.
After: icon is required, isExternal is removed entirely, isActive is inlined, and tooltips are no longer emitted. The title <span> is preserved with an explanatory comment to avoid layout shifts when the sidebar collapses.

The sidebar nav items always display their label inline — the tooltip was duplicating already-visible text. Removing isExternal reflects that no sidebar links currently point outside the app.

nav-item.tsx · nav-group.tsx · remove-sidebar-tooltips.md

Pullfrog  | View workflow run | Triggered by Pullfrogpullfrog.com𝕏

Copy link
Copy Markdown
Contributor

@pullfrog pullfrog Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clean performance win — removing unused tooltip wrappers from sidebar items is a straightforward improvement. No issues found.

Pullfrog  | View workflow runpullfrog.com𝕏

Comment thread agents-manage-ui/src/components/sidebar-nav/nav-item.tsx Outdated
Co-authored-by: pullfrog[bot] <226033991+pullfrog[bot]@users.noreply.github.com>
@vercel vercel Bot temporarily deployed to Preview – agents-docs March 24, 2026 14:51 Inactive
Copy link
Copy Markdown
Contributor

@claude claude Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Review Summary

(0) Total Issues | Risk: Low

🔴❗ Critical (0) ❗🔴

None.

🟠⚠️ Major (0) 🟠⚠️

None.

🟡 Minor (0) 🟡

None.

💭 Consider (1) 💭

Inline Comments:

  • 💭 Consider: nav-item.tsx:21 Redundant Icon && check since icon prop is now required

✅ APPROVE

Summary: Clean performance optimization that removes dead code. The tooltip removal is valid since the sidebar auto-expands on hover (via handleHover in app-sidebar.tsx), making tooltips unreachable by design — the TooltipContent is explicitly hidden when state !== 'collapsed'. The removal of isExternal prop is also safe as it was never used by any caller. Making icon required is appropriate since all 21+ nav items in app-sidebar.tsx provide icons. Nice catch on eliminating unnecessary component renders! 🎉

Discarded (1)
Location Issue Reason Discarded
nav-item.tsx:12 Breaking interface change: icon now required Not a breaking change — verified all callers in app-sidebar.tsx provide icons. The component is internal-only, not exported for external consumption.
Reviewers (2)
Reviewer Returned Main Findings Consider While You're Here Inline Comments Pending Recs Discarded
pr-review-standards 0 0 0 0 0 0 0
pr-review-frontend 2 0 0 0 1 0 1
Total 2 0 0 0 1 0 1

Comment thread agents-manage-ui/src/components/sidebar-nav/nav-item.tsx
Copy link
Copy Markdown
Contributor

@claude claude Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Review Summary

(0) Total Issues | Risk: Low

🔴❗ Critical (0) ❗🔴

None.

🟠⚠️ Major (0) 🟠⚠️

None.

🟡 Minor (0) 🟡

None.

💭 Consider (0) 💭

None.


Re-Review Delta

Previous Finding Status
💭 nav-item.tsx:21 — Redundant Icon && check since icon prop is now required Addressed in eff23f11

✅ APPROVE

Summary: Clean performance optimization that removes dead code. The prior review's suggestion (removing the redundant Icon && guard) has been addressed. The tooltip removal is valid since the sidebar auto-expands on hover (via handleHover in app-sidebar.tsx), making tooltips unreachable by design — the TooltipContent is explicitly hidden when state !== 'collapsed'. Nice work eliminating 84 unnecessary component renders! 🎉

Reviewers (1)
Reviewer Returned Main Findings Consider While You're Here Inline Comments Pending Recs Discarded
orchestrator 1 0 0 0 0 0 0
Total 1 0 0 0 0 0 0

Note: Re-review — prior finding addressed, no new findings.

@github-actions github-actions Bot deleted a comment from claude Bot Mar 24, 2026
@dimaMachina
Copy link
Copy Markdown
Collaborator Author

@claude add a changeset based on changes in this PR

@inkeep-internal-ci
Copy link
Copy Markdown
Contributor

inkeep-internal-ci Bot commented Mar 24, 2026

Claude finished @dimaMachina's task in 1m 1s —— View job


Adding Changeset

  • Analyze PR changes
  • Create changeset

Added changeset remove-sidebar-tooltips.md for @inkeep/agents-manage-ui (patch): "Remove unused tooltip rendering from sidebar nav items to improve performance"
|

Co-authored-by: Dimitri POSTOLOV <[email protected]>
Co-Authored-By: Claude Opus 4.6 <[email protected]>
@RajuGangitla
Copy link
Copy Markdown

@dimaMachina This is amazing!

I’ve been trying a lot of ways since morning to reduce the tooltip renders in the sidebar, but I couldn’t find a proper solution.

I think the best approach is to remove them, since the sidebar expands on hover, so tooltips aren’t needed.

Sometimes the best optimization is simply removing things.

target={isExternal ? '_blank' : undefined}
>
{Icon && <Icon />}
<span>{title}</span>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we may need to keep this span here, I noticed that without it, long titles (like API keys (Deprecated) ) do a weird wrapping thing on hover (https://www.loom.com/share/23e08edfb53f4f15b33dff99ba6997d8)

Comment thread agents-manage-ui/src/components/sidebar-nav/nav-item.tsx Outdated
@vercel vercel Bot temporarily deployed to Preview – agents-docs March 25, 2026 00:06 Inactive
Copy link
Copy Markdown
Contributor

@claude claude Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Review Summary

(0) Total Issues | Risk: Low

🔴❗ Critical (0) ❗🔴

None.

🟠⚠️ Major (0) 🟠⚠️

None.

🟡 Minor (0) 🟡

None.

💭 Consider (0) 💭

None.


Re-Review Delta

Previous Feedback Status
🟠 nav-item.tsx:28 — sarah-inkeep flagged that removing <span> causes layout issues with long titles Addressed in 464b1be8 — restored <span> with explanatory comment
📝 Changeset requested for @inkeep/agents-manage-ui Addressed in 0301891f

✅ APPROVE

Summary: All prior feedback has been addressed. The <span> wrapper is correctly restored with a helpful comment explaining the layout constraint, and the changeset is properly added. This PR is ready to ship — enjoy the 84 fewer component renders! 🚀

Reviewers (1)
Reviewer Returned Main Findings Consider While You're Here Inline Comments Pending Recs Discarded
orchestrator 0 0 0 0 0 0 0
Total 0 0 0 0 0 0 0

Note: Delta-scoped re-review — changes since last review are limited to addressing prior feedback (restoring <span> wrapper and adding changeset). No sub-reviewers dispatched for this minimal delta.

@github-actions github-actions Bot deleted a comment from claude Bot Mar 25, 2026
@dimaMachina dimaMachina added this pull request to the merge queue Mar 25, 2026
Merged via the queue into main with commit 296c79a Mar 25, 2026
20 checks passed
@dimaMachina dimaMachina deleted the tooltip-sidebar branch March 25, 2026 00:40
@itoqa
Copy link
Copy Markdown

itoqa Bot commented Mar 25, 2026

Ito Test Report ❌

19 test cases ran. 2 failed, 17 passed.

Overall, 19 sidebar/navigation test cases were executed with 17 passing and 2 failing, showing broad stability across org and project route transitions, nested deep-link active-state consistency, tooltip-free behavior in collapsed/expanded/mobile contexts, icon rendering without runtime errors, auth-proxy protection of unauthorized deep links, cross-tab project isolation, and clean Work Apps feature-flag toggling. The two confirmed pre-existing defects are a high-severity URL-safety issue where unsanitized tenant/project params can produce protocol-relative cross-origin sidebar links, and a medium-severity hover-collapse race where a throttled enter/leave handler can drop the final mouseleave and leave the project sidebar incorrectly expanded.

❌ Failed (2)
Category Summary Screenshot
Adversarial ⚠️ Malformed tenant/project segments can produce protocol-relative sidebar hrefs that allow cross-origin navigation. ADV-4
Edge 🟠 Rapid hover enter/leave can drop the terminal mouseleave update, leaving sidebar open in content area. EDGE-2
⚠️ Malformed tenant/project segments can generate cross-origin sidebar links
  • What failed: Sidebar URLs are built directly from route params without normalization, so malformed encoded segments can yield protocol-relative hrefs that navigate off-origin instead of staying on app-local paths.
  • Impact: A crafted malformed route can turn internal nav links into cross-origin navigations. This breaks path safety expectations and can redirect users away from the trusted app origin.
  • Introduced by this PR: No – pre-existing bug (code not changed in this PR)
  • Steps to reproduce:
    1. Navigate to a tenant or project route where the decoded tenantId or projectId begins with a leading slash.
    2. Open the sidebar and inspect generated nav href values.
    3. Observe that interpolated URLs can become protocol-relative (for example //evil.example/...).
    4. Click a generated link and observe navigation leaves the expected same-origin app path.
  • Code analysis: I reviewed sidebar item URL construction and confirmed route params from useParams() are interpolated directly into link targets with no leading-slash stripping or canonicalization before rendering links.
  • Why this is likely a bug: Building hrefs from unsanitized dynamic path segments allows //... protocol-relative outputs, which is an unsafe and incorrect navigation outcome for internal sidebar routes.

Relevant code:

agents-manage-ui/src/components/sidebar-nav/app-sidebar.tsx (lines 52-63)

const topNavItems: NavItemProps[] = projectId
  ? []
  : [
      {
        title: STATIC_LABELS.projects,
        url: `/${tenantId}/projects`,
        icon: Layers,
      },
      {
        title: STATIC_LABELS.stats,
        url: `/${tenantId}/stats`,
        icon: BarChart3,
      },

agents-manage-ui/src/components/sidebar-nav/app-sidebar.tsx (lines 89-98)

const configureNavItems: NavItemProps[] = projectId
  ? [
      {
        title: STATIC_LABELS.agents,
        url: `/${tenantId}/projects/${projectId}/agents`,
        icon: Workflow,
      },
      {
        title: STATIC_LABELS.skills,
        url: `/${tenantId}/projects/${projectId}/skills`,
🟠 Rapid hover enter/leave can leave sidebar expanded in content area
  • What failed: The sidebar can remain expanded after pointer rest in main content; expected behavior is collapse once pointer leaves sidebar into #main-content.
  • Impact: Users can end up with inconsistent sidebar state during rapid pointer movement, which creates a misleading UI state and increases misclick risk. This degrades navigation predictability in dense project menus.
  • Introduced by this PR: No – pre-existing bug (code not changed in this PR)
  • Steps to reproduce:
    1. Open /default/projects/projecta/agents with the collapsible sidebar visible.
    2. Rapidly move the pointer in and out of the sidebar boundary 20+ times.
    3. Stop with pointer in #main-content and observe sidebar remains expanded instead of collapsing.
  • Code analysis: I inspected the sidebar hover handler and throttle utility and found collapse/expand is controlled by a single throttled handler for both mouseenter and mouseleave, with no trailing execution. When rapid transitions occur inside the throttle window, the final leave event can be dropped, so setOpen(false) is never applied.
  • Why this is likely a bug: The production hover state machine depends on every relevant leave event being processed, but the current leading-edge throttle intentionally drops intermediate/final events, which can deterministically prevent required collapse updates.

Relevant code:

agents-manage-ui/src/components/sidebar-nav/app-sidebar.tsx (lines 185-203)

const handleHover: NonNullable<ComponentProps<'div'>['onMouseEnter']> = useCallback(
  throttle(200, (event) => {
    const isBlur = event.type === 'mouseleave';

    if (isBlur) {
      const blurToElement = event.relatedTarget;
      const insideMainContent =
        blurToElement &&
        blurToElement instanceof HTMLElement &&
        !!blurToElement.closest('#main-content');

      if (!insideMainContent) {
        return;
      }
    }
    setOpen(!isBlur);
  }),
  []
);

agents-manage-ui/src/lib/utils/throttle.ts (lines 4-12)

export function throttle<F extends (...args: any[]) => any>(delay: number, fn: F) {
  let last = 0;
  return ((...args: any[]) => {
    const now = Date.now();
    if (now - last >= delay) {
      fn(...args);
      last = now;
    }
  }) as F;
}

agents-manage-ui/src/app/[tenantId]/layout.tsx (lines 25-27)

<main
  id="main-content"
  className={cn(
✅ Passed (17)
Category Summary Screenshot
Adversarial With explicit logged-out marker set, protected deep links redirected to /login with returnUrl and did not render sidebar-protected content, matching intended development auth-proxy behavior. ADV-1
Adversarial Rapid alternating nav clicks preserved responsiveness, final route correctness, and active-state sync. ADV-2
Adversarial Concurrent tabs preserved isolated project-scoped links and active navigation state during rapid switching. ADV-3
Adversarial Work Apps appeared when enabled and disappeared cleanly when disabled, with adjacent links and active states still correct. ADV-5
Edge Long labels in collapsed and expanded sidebar states stayed aligned without overlap into main content. EDGE-1
Edge Double-click and repeated mixed navigation clicks ended on the intended route with one active nav item. EDGE-3
Edge Mobile sidebar and follow-up desktop navigation remained usable with correct route transitions. EDGE-4
Edge Verified deep-link entry into nested routes preserves correct single active sidebar state across reload and back/forward navigation. EDGE-5
Logic Verified no sidebar tooltips appear in collapsed/expanded org and project contexts during hover and keyboard focus interactions. LOGIC-1
Logic Verified nested project routes keep exactly one correct active sidebar item across traces, skills edit, credentials new, refresh, and history navigation. LOGIC-2
Logic All project sidebar items rendered with icons and no runtime console errors were observed. LOGIC-3
Happy-path Org sidebar links (Projects, Statistics, Members, Settings) navigated correctly with one active item and no tooltips in expanded state. ROUTE-1
Happy-path Organization sidebar links remained functional: sequence Projects -> Statistics -> Projects and Organization group Members -> Settings navigated to correct tenant-scoped URLs with proper active-state transitions. ROUTE-2
Happy-path Configure links routed correctly within project scope and maintained a single active nav item. ROUTE-3
Happy-path Register links (MCP Servers, Credentials, External Agents) navigated correctly with no tooltip appearing on hover/focus. ROUTE-4
Happy-path UI/Monitor links (Components, Artifacts, Traces, Evaluations) navigated to expected project routes with correct active state. ROUTE-5
Happy-path Back to org correctly returned from project context to /default/projects and exited project-only sidebar mode. ROUTE-6

Commit: 464b1be

View Full Run


Tell us how we did: Give Ito Feedback

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants