Skip to content

Conversation

@LordMelkor
Copy link
Contributor

@LordMelkor LordMelkor commented Jul 3, 2025

Add Extension Name Tooltips to Tool Banners

⚠️ DEPENDENCY: This PR depends on #3231 being merged first. Please review and merge #3231 before this PR.

Overview

Adds hover tooltips to tool banners showing extension names (e.g., "developer extension") without cluttering the UI. This builds on the clean tool descriptions from #3231 by providing extension information on demand through tooltips.

Features

  • Extension Name Tooltips: Hover over tool descriptions to see which extension provides that tool
  • Left-Aligned Positioning: Tooltips align with text start for natural reading flow
  • Smart Detection: Extracts extension names from tool patterns (developer__shell → "developer extension")
  • Graceful Fallback: Tools without __ separator show no tooltip

Screenshot

Screenshot 2025-07-03 at 4 54 53 PM

Implementation

  • Modified ui/desktop/src/components/ToolCallWithResponse.tsx
  • Added getExtensionTooltip() helper function
  • Uses existing TooltipWrapper component with align="start"
  • Zero performance impact, fully backward compatible

Testing

  • ✅ TypeScript compilation passes
  • ✅ ESLint checks pass
  • ✅ All existing functionality preserved
  • ✅ Accessibility maintained

Provides extension information on demand while maintaining a clean interface.

@LordMelkor LordMelkor force-pushed the feature/extension-name-tooltips branch 2 times, most recently from efdda3b to 02de8a2 Compare July 4, 2025 03:12
@DOsinga DOsinga requested a review from jamadeo July 16, 2025 16:26
return `capturing window "${truncate(getStringValue(args.window_title))}"`;
}
return 'capturing screen';
return `capturing screen`;
Copy link
Collaborator

Choose a reason for hiding this comment

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

nit: unnecessary backtick quotes

{extensionTooltip ? (
<TooltipWrapper tooltipContent={extensionTooltip} side="top" align="start">
<span className="ml-[10px] cursor-pointer hover:opacity-80">
{(() => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

You could avoid duplication by extracting the inner part like:

const toolLabel = (
      <span className="ml-[10px]">
        {(() => {
          const description = getToolDescription();
          if (description) {
            return description;
          }
          // Fallback tool name formatting
          return snakeToTitleCase(toolCall.name.substring(toolCall.name.lastIndexOf('__') + 2));
        })()}
      </span>
);


return (
    <ToolCallExpandable
        ...
        {extensionTooltip ? (
            <TooltipWrapper ... >{toolLabel}</TooltipWrapper>
        ) : (
            {toolLabel}
        )
...

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@jamadeo have addressed this in the latest version of the code! Please take a look.

Implements extension name tooltips on tool banners, combining the best of both
the original feature and the latest main branch improvements:

Features:
- Extension name tooltips (e.g., "memory extension") appear on hover for tools
  that belong to extensions (identified by __ separator in tool names)
- Enhanced loading indicators with LoaderCircle animation and improved layout
- DRY code implementation that eliminates duplication in tool label rendering

Implementation:
- Add TooltipWrapper import for tooltip functionality
- Add getExtensionTooltip() helper to extract extension names from tool names
- Add getToolLabelContent() helper to eliminate code duplication
- Use conditional styling with cn() utility for tooltip-specific classes
- Preserve all main branch UI improvements (LoaderCircle, layout structure)
- Conditionally wrap tool labels with TooltipWrapper when extension detected

The tooltip appears with "top" positioning and "start" alignment, providing
contextual information about which extension provides each tool without
cluttering the interface.
@LordMelkor LordMelkor force-pushed the feature/extension-name-tooltips branch from 02de8a2 to 8c510a3 Compare July 17, 2025 17:53
Copy link
Collaborator

@jamadeo jamadeo left a comment

Choose a reason for hiding this comment

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

Looks great! Thanks for doing this.

@jamadeo jamadeo merged commit e0b3b0f into block:main Jul 17, 2025
7 checks passed
@LordMelkor LordMelkor deleted the feature/extension-name-tooltips branch July 17, 2025 21:08
s-soroosh pushed a commit to s-soroosh/goose that referenced this pull request Jul 18, 2025
Signed-off-by: Soroosh <soroosh.sarabadani@gmail.com>
kwsantiago pushed a commit to kwsantiago/goose that referenced this pull request Jul 19, 2025
Signed-off-by: Kyle Santiago <kyle@privkey.io>
kwsantiago pushed a commit to kwsantiago/goose that referenced this pull request Jul 19, 2025
Signed-off-by: Kyle Santiago <kyle@privkey.io>
kwsantiago pushed a commit to kwsantiago/goose that referenced this pull request Jul 19, 2025
Signed-off-by: Kyle Santiago <kyle@privkey.io>
cbruyndoncx pushed a commit to cbruyndoncx/goose that referenced this pull request Jul 20, 2025
atarantino pushed a commit to atarantino/goose that referenced this pull request Aug 5, 2025
Signed-off-by: Adam Tarantino <tarantino.adam@hey.com>
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.

2 participants