@@ -44,6 +44,37 @@ export const stories: Record<string, Story> = {
 			</AppProviders>
 		)
 	},
+	"bedrock-custom-arn": async ({ baseModelId = "" }) => {
+		const [{ AppProviders }, { BedrockCustomArn }, { providerIdentifiers }] = await Promise.all([
+			import("../AppProviders"),
+			import("@/components/settings/providers/BedrockCustomArn"),
+			import("@roo-code/types"),
+		])
+		function CustomArn() {
+			const [config, setConfig] = useState<import("@roo-code/types").ProviderSettings>({
+				apiProvider: providerIdentifiers.bedrock,
+				apiModelId: "custom-arn",
+				awsRegion: "us-west-2",
+				awsCustomArn: "arn:aws:bedrock:us-west-2:123456789012:application-inference-profile/abcd1234efgh",
+				awsCustomArnBaseModelId: String(baseModelId),
+			})
+			return (
+				<div className="w-[480px] p-4 flex flex-col gap-3 bg-vscode-editor-background text-vscode-foreground">
+					<BedrockCustomArn
+						apiConfiguration={config}
+						setApiConfigurationField={(field, value) =>
+							setConfig((previous) => ({ ...previous, [field]: value }))
+						}
+					/>
+				</div>
+			)
+		}
+		return (
+			<AppProviders>
+				<CustomArn />
+			</AppProviders>
+		)
+	},
 	"accessibility-contrast": async () => {
 		const { AccessibilityContrastGallery } =
 			await import("@/components/ui/__tests__/AccessibilityContrast.visual.fixture")
 
@@ -0,0 +1,43 @@
+import type { Page } from "@playwright/test"
+
+import { expect, test } from "../../../../../playwright/coverage-fixture"
+import { applyVisualTheme, visualThemes } from "../../../../../playwright/themes"
+
+const mountCustomArn = async (page: Page, props: { baseModelId?: string } = {}) => {
+	await page.goto("/")
+	await page.waitForFunction(() => typeof window.mount === "function")
+	await page.evaluate((storyProps) => window.mount({ story: "bedrock-custom-arn", props: storyProps }), props)
+	const component = page.locator("[data-playwright-mounted]")
+	await expect(component.getByTestId("custom-arn-base-model")).toBeVisible()
+	return component
+}
+
+const settleRendering = (page: Page) =>
+	page.evaluate(async () => {
+		await document.fonts.ready
+		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+	})
+
+for (const theme of visualThemes.filter(({ name }) => name === "dark" || name === "light")) {
+	test(`renders the custom ARN underlying model with Other limits in the VS Code ${theme.name} theme`, async ({
+		page,
+	}) => {
+		const component = await mountCustomArn(page)
+		await applyVisualTheme(page, theme)
+
+		await expect(component.getByTestId("custom-arn-context-window")).toBeVisible()
+		await settleRendering(page)
+
+		await expect(component).toHaveScreenshot(`bedrock-custom-arn-other-${theme.name}.png`)
+	})
+}
+
+test("renders a custom ARN with a listed underlying model and no manual limits", async ({ page }) => {
+	const component = await mountCustomArn(page, { baseModelId: "anthropic.claude-opus-5-5" })
+	await applyVisualTheme(page, visualThemes[0])
+
+	await expect(component.getByTestId("custom-arn-context-window")).toHaveCount(0)
+	await settleRendering(page)
+
+	await expect(component).toHaveScreenshot("bedrock-custom-arn-opus-5-5-dark.png")
+})