Skip to content

fix(gateways): use the prompt preview chips for the source selector #195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vishu-bh merged 3 commits into from
Oct 21, 2026
Merged

fix(gateways): use the prompt preview chips for the source selector #195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c02bf6d
fix(gateways): use the prompt preview chips for the source selector
a-effort Oct 19, 2026
c3fd7d6
Merge branch 'main' into 6445-source-selector-chips
marekdano Oct 20, 2026
f71b6ef
Merge branch 'main' into 6445-source-selector-chips
a-effort Oct 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions e2e/virtual-servers.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1236,13 +1236,18 @@ test.describe("Virtual Servers page", () => {
const panel = page.getByRole("region", { name: "testVS details" });
await panel.getByRole("tab", { name: "Components" }).click();

await expect(panel.getByRole("tab", { name: "All sources" })).toBeVisible();
await expect(panel.getByRole("tab", { name: "github-mcp" })).toBeVisible();
await expect(panel.getByRole("tab", { name: "slack-mcp" })).toBeVisible();
await expect(panel.getByRole("heading", { name: "Sources" })).toBeVisible();
await expect(panel.getByRole("button", { name: "All sources" })).toBeVisible();
await expect(panel.getByRole("button", { name: "github-mcp" })).toBeVisible();
await expect(panel.getByRole("button", { name: "slack-mcp" })).toBeVisible();
await expect(panel.getByText("search_issues")).toBeVisible();
await expect(panel.getByText("post_message")).toBeVisible();

await panel.getByRole("tab", { name: "slack-mcp" }).click();
await panel.getByRole("button", { name: "slack-mcp" }).click();
await expect(panel.getByRole("button", { name: "slack-mcp" })).toHaveAttribute(
"aria-pressed",
"true",
);
await expect(panel.getByText("post_message")).toBeVisible();
await expect(panel.getByText("search_issues")).toHaveCount(0);
});
Expand Down
39 changes: 25 additions & 14 deletions src/components/gateways/VirtualServerDetailsPanel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,9 +241,9 @@ describe("VirtualServerDetailsPanel components list", () => {
expect(searchBox).toHaveValue("Titled");
});

it("renders source tabs and filters components by source", async () => {
it("renders source chips and filters components by source", async () => {
const user = userEvent.setup();
// Fetched components carry a gateway_id, which drives the source tabs.
// Fetched components carry a gateway_id, which drives the source chips.
mswServer.use(
http.get("*/v1/virtual-servers/:id/tools", () =>
HttpResponse.json({
Expand Down Expand Up @@ -275,24 +275,33 @@ describe("VirtualServerDetailsPanel components list", () => {

await user.click(await screen.findByRole("tab", { name: "Components" }));

// Source tabs resolve from the gateways response.
expect(await screen.findByRole("tab", { name: "Gateway A" })).toBeInTheDocument();
expect(screen.getByRole("tab", { name: "Gateway B" })).toBeInTheDocument();
// Source chips resolve from the gateways response.
expect(await screen.findByRole("button", { name: "Gateway A" })).toBeInTheDocument();
expect(screen.getByRole("heading", { name: "Sources" })).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Gateway B" })).toBeInTheDocument();
expect(screen.getByText("tool_one")).toBeInTheDocument();
expect(screen.getByText("tool_two")).toBeInTheDocument();

// All sources is pressed until another chip is chosen.
expect(screen.getByRole("button", { name: "All sources" })).toHaveAttribute(
"aria-pressed",
"true",
);

// Selecting a source filters the component list to that gateway.
await user.click(screen.getByRole("tab", { name: "Gateway A" }));
await user.click(screen.getByRole("button", { name: "Gateway A" }));
await waitFor(() => {
expect(screen.queryByText("tool_two")).not.toBeInTheDocument();
});
expect(screen.getByText("tool_one")).toBeInTheDocument();

// Arrow keys move focus across the source tablist.
const allSources = screen.getByRole("tab", { name: "All sources" });
allSources.focus();
await user.keyboard("{ArrowRight}");
expect(screen.getByRole("tab", { name: "Gateway A" })).toHaveFocus();
expect(screen.getByRole("button", { name: "Gateway A" })).toHaveAttribute(
"aria-pressed",
"true",
);
expect(screen.getByRole("button", { name: "All sources" })).toHaveAttribute(
"aria-pressed",
"false",
);
});

it("hides the source selector when the server has a single source", async () => {
Expand Down Expand Up @@ -321,8 +330,10 @@ describe("VirtualServerDetailsPanel components list", () => {
await user.click(await screen.findByRole("tab", { name: "Components" }));
expect(await screen.findByText("tool_one")).toBeInTheDocument();

expect(screen.queryByRole("tab", { name: "All sources" })).not.toBeInTheDocument();
expect(screen.queryByRole("tab", { name: "Gateway A" })).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: "All sources" })).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Gateway A" })).not.toBeInTheDocument();
expect(screen.queryByRole("group", { name: "Filter sources" })).not.toBeInTheDocument();
expect(screen.queryByRole("heading", { name: "Sources" })).not.toBeInTheDocument();
});

it("moves the active tab with arrow keys", async () => {
Expand Down
110 changes: 50 additions & 60 deletions src/components/gateways/VirtualServerDetailsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,19 +226,6 @@ export function VirtualServerDetailsPanel({
[],
);

const handleSourceTabKeyDown = useCallback(
(e: KeyboardEvent<HTMLButtonElement>, currentIndex: number, sourceCount: number) => {
if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
e.preventDefault();
const nextIndex =
e.key === "ArrowRight"
? (currentIndex + 1) % sourceCount
: (currentIndex - 1 + sourceCount) % sourceCount;
document.getElementById(`source-tab-${nextIndex}`)?.focus();
},
[],
);

// Build API paths - only when server exists
const toolsPath = useMemo(() => {
if (!server?.id) return "";
Expand Down Expand Up @@ -636,54 +623,57 @@ export function VirtualServerDetailsPanel({
) : (
<>
{sourceTabs.length > 1 && (
<div
role="tablist"
aria-label={intl.formatMessage({ id: "gateways.details.filterSources" })}
className="flex max-w-full items-center overflow-x-auto rounded-md bg-muted p-1"
>
{[
{
id: "all",
label: intl.formatMessage({
id: "gateways.details.filter.allSources",
}),
isTruncated: false,
fullValue: undefined as string | undefined,
},
...sourceTabs,
].map((source, index, sources) => {
const isSelected = sourceFilter === source.id;
const tabButton = (
<Button
id={`source-tab-${index}`}
type="button"
variant="ghost"
size="sm"
role="tab"
aria-selected={isSelected}
tabIndex={isSelected ? 0 : -1}
className={cn(
"h-8 shrink-0 rounded-sm px-4 text-sm font-medium transition-colors",
isSelected
? "bg-background text-foreground shadow-sm"
: "text-muted-foreground hover:text-foreground",
)}
onClick={() => setSourceFilter(source.id)}
onKeyDown={(e) => handleSourceTabKeyDown(e, index, sources.length)}
>
{source.label}
</Button>
);
<div className="space-y-6">
<h3 className="text-sm font-semibold text-foreground">
{intl.formatMessage({ id: "gateways.details.sources" })}
</h3>
<div
role="group"
aria-label={intl.formatMessage({
id: "gateways.details.filterSources",
})}
className="flex flex-wrap items-center gap-2"
>
{[
{
id: "all",
label: intl.formatMessage({
id: "gateways.details.filter.allSources",
}),
isTruncated: false,
fullValue: undefined as string | undefined,
},
...sourceTabs,
].map((source) => {
const isSelected = sourceFilter === source.id;
const sourceButton = (
<Button
type="button"
variant={isSelected ? "secondary" : "outline"}
size="sm"
aria-pressed={isSelected}
className={cn(
"rounded-full font-mono text-[12px] shadow-none",
isSelected
? "border-transparent bg-muted text-foreground"
: "text-muted-foreground",
)}
onClick={() => setSourceFilter(source.id)}
>
{source.label}
</Button>
);

return (
<Tooltip key={source.id}>
<TooltipTrigger asChild>{tabButton}</TooltipTrigger>
{source.isTruncated && (
<TooltipContent>{source.fullValue}</TooltipContent>
)}
</Tooltip>
);
})}
return (
<Tooltip key={source.id}>
<TooltipTrigger asChild>{sourceButton}</TooltipTrigger>
{source.isTruncated && (
<TooltipContent>{source.fullValue}</TooltipContent>
)}
</Tooltip>
);
})}
</div>
</div>
)}

Expand Down
1 change: 1 addition & 0 deletions src/i18n/locales/en-US/gateways.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@
"gateways.details.filter.tools": "Tools",
"gateways.details.filter.resources": "Resources",
"gateways.details.filter.prompts": "Prompts",
"gateways.details.sources": "Sources",
"gateways.details.filterSources": "Filter sources",
"gateways.details.searchComponents": "Search components",
"gateways.details.filterComponents": "Filter components",
Expand Down
1 change: 1 addition & 0 deletions src/i18n/locales/es-ES/gateways.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@
"gateways.details.filter.tools": "Herramientas",
"gateways.details.filter.resources": "Recursos",
"gateways.details.filter.prompts": "Prompts",
"gateways.details.sources": "Fuentes",
"gateways.details.filterSources": "Filtrar fuentes",
"gateways.details.searchComponents": "Buscar componentes",
"gateways.details.filterComponents": "Filtrar componentes",
Expand Down
1 change: 1 addition & 0 deletions src/i18n/locales/pt-BR/gateways.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@
"gateways.details.filter.tools": "Ferramentas",
"gateways.details.filter.resources": "Recursos",
"gateways.details.filter.prompts": "Prompts",
"gateways.details.sources": "Fontes",
"gateways.details.filterSources": "Filtrar fontes",
"gateways.details.searchComponents": "Buscar componentes",
"gateways.details.filterComponents": "Filtrar componentes",
Expand Down
Loading