fix: use medium badges and shorter shared key label on agent API keys page (#28557)

On `/agents/settings/api-keys`, bumps the provider key status badge and
the enabled model badges from `sm`/`xs` to the medium (`md`) size, and
shortens the status label "Using shared key" to "Shared key". Updates
the matching Storybook assertion and the status indicator name in
`docs/ai-coder/agents/models.md`.

Verified with `tsc` and the page's Storybook tests (15 passing).

---

*Created by Coder Agents on behalf of @tracyjohnsonux.*

docs/ai-coder/agents/models.md

@@ -367,7 +367,7 @@ from the Agents settings page.
 1. Each enabled provider is listed with a status indicator:
    - **Key saved**, your personal key is active and will be used for requests to
      that provider.
-   - **Using shared key**, no personal key is set and Coder is using
+   - **Shared key**, no personal key is set and Coder is using
      deployment-managed credentials for that provider.
    - **No key**, no personal key or deployment-managed credential is available.
      Add a personal key before you use models from this provider.

site/src/pages/AgentsPage/AgentSettingsAPIKeysPage.stories.tsx

@@ -365,7 +365,7 @@ export const ShowsProviderStatuses: Story = {
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 		await expect(await canvas.findByText("Key saved")).toBeVisible();
-		await expect(canvas.getByText("Using shared key")).toBeVisible();
+		await expect(canvas.getByText("Shared key")).toBeVisible();
 		await expect(canvas.getByText("No key")).toBeVisible();
 		await expect(
 			canvas.getByText(

site/src/pages/AgentsPage/AgentSettingsAPIKeysPageView.tsx

@@ -38,7 +38,7 @@ const getProviderStatus = (
 
 	if (provider.has_central_api_key_fallback) {
 		return {
-			label: "Using shared key",
+			label: "Shared key",
 			variant: "default",
 			note: "The shared deployment key is being used. Add a personal key to use your own.",
 		};
@@ -133,7 +133,7 @@ const ProviderKeyPanel: FC<ProviderKeyPanelProps> = ({
 						<p className="m-0 text-sm text-content-secondary">{status.note}</p>
 					)}
 				</div>
-				<Badge size="sm" variant={status.variant} className="w-fit">
+				<Badge size="md" variant={status.variant} className="w-fit">
 					{status.label}
 				</Badge>
 			</div>
@@ -207,7 +207,7 @@ const ProviderKeyPanel: FC<ProviderKeyPanelProps> = ({
 				) : enabledModels.length > 0 ? (
 					<div className="flex flex-wrap gap-2">
 						{enabledModels.map((model) => (
-							<Badge key={model.id} size="xs" variant="default">
+							<Badge key={model.id} size="md" variant="default">
 								{model.display_name || model.model}
 							</Badge>
 						))}