🧭 Epic
Title: Visual Picker for Associating Tools, Resources, and Prompts in Admin UI
Goal: Enhance the MCP Gateway Admin UI to allow users to visually select and associate Tools, Resources, and Prompts with Servers or other entities using a dynamic, searchable picker instead of raw CSV input.
Why now: The current CSV-based interface is functional but unintuitive for complex associations. A dynamic picker improves usability and reduces manual error, especially as the number of available objects grows.

📎 Depends on: mcp-context-forge#116: Composite Key & UUIDs for Tool Identity

🧭 Type of Feature

• Enhancement to existing functionality
• New feature or capability
• Security Related (requires review)

🙋‍♂️ User Story 1

As a: gateway admin
I want: to select tools, resources, and prompts via a UI picker
So that: I can easily associate them with a server during creation or edit

✅ Acceptance Criteria

Scenario: Add a new server via UI with visual selectors
  Given I open the "Add Server" form in the Admin UI
  When I click "Select Tools"
  Then I see a searchable multi-select dropdown with available tools

🙋‍♂️ User Story 2

As a: system operator
I want: to preview tool/resource/prompt metadata in the picker
So that: I can make informed selections based on descriptions or schema summaries

✅ Acceptance Criteria

Scenario: Preview tool details before selection
  Given I hover over or click on a tool in the picker
  Then I see its description, request type, and integration type

🙋‍♂️ User Story 3

As a: developer
I want: the backend to continue supporting CSV strings
So that: I can maintain API compatibility or support scripted integrations

✅ Acceptance Criteria

Scenario: Submit server form with UI-selected items
  Given I select resources via UI
  When I submit the form
  Then the form posts the associated resources as a CSV field (unchanged)

📐 Design Sketch

🖼️ UI Changes to /admin (HTMX + Alpine.js)

• Replace plain <input> for associatedTools, associatedResources, and associatedPrompts with a searchable <select multiple> enhanced via Alpine.js

• Populate each option using stub.tool, stub.resource, and stub.prompt values enabled by #116

• Use qualifiedName (e.g. ibm.google) for display clarity

• Tooltip/modal with details:

  • Tools: qualifiedName, request_type, integration_type
  • Resources: uri, mime_type, size
  • Prompts: name, args, template

🧩 Form Field Examples

Before:

<input name="associatedTools" value="1,2,3" />

After:

<select name="associatedTools" multiple>
  <option value="stub.tool:ibm.google">ibm.google – POST (REST)</option>
  <option value="stub.tool:acme.weather">acme.weather – SSE (MCP)</option>
</select>

🔄 Workflow

1. Admin opens Server create/edit form
2. Tools, Resources, and Prompts appear in dynamic searchable lists
3. Selections use stub references (stub.tool) (ex: mcpserver1.tool3)
4. Backend parses stubs and resolves UUID via lookup (requires [FEATURE]: Namespace composite key and UUIDs for tool identity #116)
5. CSV values submitted (legacy support)

🧭 Tasks

🔗 MCP Standards Check

• ✔️ No changes to MCP protocol
• ✔️ Backward-compatible Admin UI form inputs
• ✔️ Integrates directly with federation-safe qualifiedName

⚠️ Once #116 lands, picker stubs can safely identify remote objects across gateways. Until then, fallback to legacy name-based IDs is required.