feat: add a preview experience to the resource details panel

[marekdano]

Closes IBM/mcp-context-forge#5593

Summary

• Adds a "Try it" tab to the Resources details panel — a chip picker to select a resource, a required-argument form for any uriTemplate placeholders, curl/JSON-RPC/Python/TypeScript request snippets, and a render-only Preview that hits GET /v1/resources/test/{uri} and shows the status, timing, and rendered content (text/JSON/XML/image/PDF/binary). Mirrors the existing Prompts preview pattern; the panel now opens on "Try it" by default, with the previous list-detail table moved to a new "Definition" tab (row actions — Edit/Delete/Activate — live there).
• Adds resourcesApi.test and api.getWithMeta to support the preview call, including percent-encoding ?/# in the resource URI so it survives as a full path segment instead of being parsed as a query string/fragment.
• Preview is disabled until every uriTemplate placeholder is filled, since an unfilled placeholder can't produce a resolvable URI.
• The generated curl snippet emits the resource URI as its own single-quoted bash literal (instead of splicing it into a double-quoted string), so $, backticks, and " in the URI can't be interpreted as shell syntax if the snippet is pasted into a terminal.
• Minor consistency fixes picked up along the way: ToolsTable and PromptDefinitionTable now truncate long names with a native tooltip (title attr) instead of line-clamp-1, matching ResourcesTable.

Test plan

• npx vitest run — 2993 tests passing, including new unit coverage for useResourcePreview, buildResourceSnippets, parseUriTemplate, ResourceArgsForm/ResourceTryItTab/ResourcePreviewResult, and expanded ResourcesTable coverage (keyboard selection, toggle menu)
• npx playwright test e2e/resources.spec.ts — 20/20 passing, including new e2e coverage for the Try it preview flow and placeholder gating
• npx tsc --noEmit — clean

---

[gcgoncalves]

Issue: Images use empty alt text (alt=""), making them decorative. For content images, this may not be appropriate.

Current Code:

// ❌ POTENTIALLY PROBLEMATIC - Empty alt for content images
<img
  src={dataUrl}
  alt=""
  className="max-h-[420px] max-w-full rounded-md border border-border object-contain"
/>

Recommendation:

// ✅ BETTER - Descriptive alt text
<img
  src={dataUrl}
  alt={intl.formatMessage(
    { id: "resources.details.preview.imageAlt" },
    { mimeType, size: sizeLabel }
  )}
  className="max-h-[420px] max-w-full rounded-md border border-border object-contain"
/>

[gcgoncalves]

Issue: When switching between "Try it" and "Definition" tabs, focus is not managed, potentially disorienting keyboard users.

Risk: Screen reader users may lose context when tabs change.

Recommendation:

// Add focus management to tab change handler
const tabContentRef = useRef<HTMLDivElement>(null);

useEffect(() => {
  if (open && tabContentRef.current) {
    // Focus the tab content when switching tabs
    tabContentRef.current.focus();
  }
}, [activeTab, open]);

// In TabsContent:
<TabsContent 
  value="tryIt" 
  className="mt-8"
  ref={tabContentRef}
  tabIndex={-1}
>

[gcgoncalves]

Issue: The preview hook allows rapid-fire requests without client-side throttling.

Risk: Users could accidentally trigger many concurrent requests by rapidly clicking Preview or switching resources.

Recommendation:
Add a debouncer to this function, and memoise the debounced version with useMemo