fix(site): fix type errors in ModelsSection stories

Use canvasElement.querySelector instead of canvas.container which
does not exist on the within() return type.

site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelsSection.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type * as TypesGen from "api/typesGenerated";
 import { TooltipProvider } from "components/Tooltip/Tooltip";
-import { expect, fn, within } from "storybook/test";
+import { expect, fn, userEvent, within } from "storybook/test";
 import type { ProviderState } from "./ChatModelAdminPanel";
 import { ModelsSection } from "./ModelsSection";
 
@@ -73,10 +73,19 @@ type Story = StoryObj<typeof ModelsSection>;
 
 export const ShowsPricingWarning: Story = {
 	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			canvas.getByText("Model pricing is not defined"),
-		).toBeInTheDocument();
+		const body = within(canvasElement.ownerDocument.body);
+
+		// The warning icon should be visible in the subtitle line.
+		const warningIcon = canvasElement.querySelector(".text-content-warning");
+		expect(warningIcon).toBeTruthy();
+
+		// Hovering the icon reveals the tooltip text.
+		if (warningIcon) {
+			await userEvent.hover(warningIcon);
+			await expect(
+				await body.findByText("Model pricing is not defined"),
+			).toBeInTheDocument();
+		}
 	},
 };
 
@@ -95,9 +104,8 @@ export const HidesPricingWarningForExplicitZeroPricing: Story = {
 		],
 	},
 	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		expect(
-			canvas.queryByText("Model pricing is not defined"),
-		).not.toBeInTheDocument();
+		// No warning icon should be present.
+		const warningIcon = canvasElement.querySelector(".text-content-warning");
+		expect(warningIcon).toBeNull();
 	},
 };

site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelsSection.tsx

@@ -22,6 +22,7 @@ import {
 import type { FC, ReactNode } from "react";
 import { useLocation, useNavigate, useSearchParams } from "react-router";
 import { cn } from "utils/cn";
+import { formatProviderLabel } from "../../utils/modelOptions";
 import { SectionHeader } from "../SectionHeader";
 import type { ProviderState } from "./ChatModelAdminPanel";
 import { ModelForm } from "./ModelForm";
@@ -321,12 +322,20 @@ export const ModelsSection: FC<ModelsSectionProps> = ({
 										>
 											{modelConfig.display_name || modelConfig.model}
 										</span>
-										{showPricingWarning && (
-											<span className="mt-1 flex items-center gap-1 text-xs text-content-warning">
-												<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0" />
-												Model pricing is not defined
-											</span>
-										)}
+										<span className="flex items-center gap-1 truncate text-xs text-content-secondary">
+											{formatProviderLabel(modelConfig.provider)} &middot;{" "}
+											{modelConfig.model}
+											{showPricingWarning && (
+												<Tooltip>
+													<TooltipTrigger asChild>
+														<TriangleAlertIcon className="h-3.5 w-3.5 shrink-0 text-content-warning" />
+													</TooltipTrigger>
+													<TooltipContent>
+														Model pricing is not defined
+													</TooltipContent>
+												</Tooltip>
+											)}
+										</span>{" "}
 									</div>
 									{modelConfig.enabled === false && (
 										<Badge size="xs" variant="warning">