[Feature Request]: Enhance Handling of Long Tool Descriptions

[shoummu1]

✨Feature Summary

Improve the display of long tool descriptions in the admin UI by adding user-friendly features such as tooltips, configurable truncation length, better variable naming, and optional progressive disclosure. These changes aim to enhance readability, accessibility, and maintainability while keeping the layout clean.

🎯 Current State

• Descriptions longer than 120 characters are truncated with an ellipsis.
• No direct way to view the full description without inspecting the DOM.
• Truncation length is hardcoded.
• Variable name refactor_desc is not descriptive.

🔧Suggested Fix

1. Add Tooltip for Full Description

Users lose access to the complete description. Consider adding a tooltip:

{% if refactor_desc | length is greaterthan 120 %}
  <span title="{{ refactor_desc }}" class="cursor-help">
    {{ refactor_desc[:120] }}...
  </span>
{% else %}
  {{ refactor_desc }}
{% endif %}

2. Make Truncation Length Configurable

Instead of hardcoding 120, consider using a configuration variable:

{% set max_desc_length = config.UI_MAX_DESCRIPTION_LENGTH | default(120) %}
{% if refactor_desc | length is greaterthan max_desc_length %}
  {{ refactor_desc[:max_desc_length] }}...

3. Improve Variable Naming

The variable name refactor_desc doesn't clearly convey its purpose. Consider:

• sanitized_desc - emphasizes the security processing
• processed_desc - indicates transformation applied
• safe_desc - highlights it's safe for display

4. Consider Progressive Disclosure Pattern

For better UX, implement an expand/collapse mechanism:

<div x-data="{ expanded: false }">
  <span x-show="!expanded">
    {{ refactor_desc[:120] }}{% if refactor_desc | length > 120 %}...
    <button @click="expanded = true" class="text-blue-500 hover:underline">
      Show more
    </button>
    {% endif %}
  </span>
  <span x-show="expanded">
    {{ refactor_desc }}
    <button @click="expanded = false" class="text-blue-500 hover:underline">
      Show less
    </button>
  </span>
</div>

5. Add Visual Indicator for Truncation

Consider adding an icon or different styling to indicate truncated content:

{% if refactor_desc | length is greaterthan 120 %}
  <span class="truncated-description">
    {{ refactor_desc[:120] }}...
    <svg class="inline w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
      <!-- Info icon SVG path -->
    </svg>
  </span>
{% else %}

📅Priority

1. High: Add tooltip (minimal effort, high UX value)
2. Medium: Improve variable naming (code clarity)
3. Low: Make configurable, progressive disclosure (nice-to-have features)

🧩Additional Context

Relevant review comment

[vk-playground]

@shoummu1 Hi! I’d love to pick this up. Could you assign me to this issue?