From 0888148d45e47d932872fea69645b4247939f245 Mon Sep 17 00:00:00 2001
From: maanavd <maanavdalal@gmail.com>
Date: Thu, 21 May 2026 12:43:06 -0700
Subject: [PATCH 1/5] feat(www): add boilerplate code generation to model cards
 and detail modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add model-boilerplate.ts: generates language-specific starter code
  (Python/JS/C#/Rust) for chat, audio, and embedding model types
- Add ModelStarterCode.svelte: compact card strip (Py/JS/C#/Rs pills +
  Copy) and full modal panel (tabs + scrollable code block + Copy code)
- ModelCard: replace cluttered variant grid with single run command row
  + compact starter code strip; audio models show SDK-only badge
- ModelDetailsModal: add Get started panel near top; simplify Available
  Variants to a clean list with Copy ID buttons; remove per-variant
  run command blocks and violet gradient SDK callout
- Audio models show 'SDK only — not available via foundry model run'
  in both card and modal surfaces

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 www/src/routes/models/+page.svelte            |   1 -
 .../routes/models/components/ModelCard.svelte | 253 +++---------
 .../components/ModelDetailsModal.svelte       | 338 +++-------------
 .../models/components/ModelStarterCode.svelte | 140 +++++++
 www/src/routes/models/model-boilerplate.ts    | 370 ++++++++++++++++++
 5 files changed, 612 insertions(+), 490 deletions(-)
 create mode 100644 www/src/routes/models/components/ModelStarterCode.svelte
 create mode 100644 www/src/routes/models/model-boilerplate.ts

diff --git a/www/src/routes/models/+page.svelte b/www/src/routes/models/+page.svelte
index e4b108ce3..f646b26b3 100644
--- a/www/src/routes/models/+page.svelte
+++ b/www/src/routes/models/+page.svelte
@@ -646,7 +646,6 @@
 		bind:isOpen={isModalOpen}
 		{copiedModelId}
 		onCopyModelId={copyModelId}
-		onCopyCommand={copyRunCommand}
 		onCopyShareUrl={copyModelShareUrl}
 	/>
 
diff --git a/www/src/routes/models/components/ModelCard.svelte b/www/src/routes/models/components/ModelCard.svelte
index 7d309a272..688203ace 100644
--- a/www/src/routes/models/components/ModelCard.svelte
+++ b/www/src/routes/models/components/ModelCard.svelte
@@ -1,87 +1,39 @@
 <script lang="ts">
 	import type { GroupedFoundryModel } from '../types';
-	import { Button } from '$lib/components/ui/button';
 	import { Badge } from '$lib/components/ui/badge';
-	import { Calendar, Check } from 'lucide-svelte';
+	import { Calendar, Copy, Check } from 'lucide-svelte';
 	import * as Card from '$lib/components/ui/card';
-	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { animate } from '$lib/utils/animations';
+	import { foundryModelService } from '../service';
+	import { generateModelDescription } from '$lib/utils/model-description';
+	import ModelStarterCode from './ModelStarterCode.svelte';
 
 	export let model: GroupedFoundryModel;
 	export let copiedModelId: string | null = null;
 	export let onCardClick: (model: GroupedFoundryModel) => void;
 	export let onCopyCommand: (modelId: string) => void;
 
-	import { foundryModelService } from '../service';
-
-	import {
-		getDeviceIcon,
-		getAcceleratorLogo,
-		getAcceleratorColor,
-		getVariantLabel
-	} from '$lib/utils/model-helpers';
-	import { generateModelDescription } from '$lib/utils/model-description';
-
-	function getUniqueVariants() {
-		if (!model.variants || model.variants.length === 0) return [];
-
-		const uniqueMap = new Map();
-		for (const variant of model.variants) {
-			if (!uniqueMap.has(variant.name)) {
-				uniqueMap.set(variant.name, variant);
-			}
-		}
-		return Array.from(uniqueMap.values());
-	}
-
-	function sortVariantsByDevice(variants: any[]) {
-		const devicePriority: Record<string, number> = {
-			cpu: 1,
-			gpu: 2,
-			npu: 3
-		};
-
-		return [...variants].sort((a, b) => {
-			const aDevice = a.deviceSupport[0]?.toLowerCase() || 'zzz';
-			const bDevice = b.deviceSupport[0]?.toLowerCase() || 'zzz';
-
-			const aPriority = devicePriority[aDevice] || 99;
-			const bPriority = devicePriority[bDevice] || 99;
-
-			return aPriority - bPriority;
-		});
-	}
-
-	function formatModelCommand(modelId: string): string {
-		return `foundry model run ${modelId}`;
-	}
-
-	// Device suffix pattern for cleaning model names
 	const DEVICE_SUFFIX_PATTERN = /-(generic|cuda|qnn|openvino|vitis)-(cpu|gpu|npu)$|-(cpu|gpu|npu)$/i;
 
-	// Get the generic model name for auto-selection
 	function getGenericModelName(): string {
 		const baseName = model.alias || model.variants[0]?.name || model.displayName;
-		const withoutVersion = baseName.split(':')[0];
-		return withoutVersion.replace(DEVICE_SUFFIX_PATTERN, '');
+		return baseName.split(':')[0].replace(DEVICE_SUFFIX_PATTERN, '');
 	}
 
-	$: uniqueVariants = sortVariantsByDevice(getUniqueVariants());
-	$: displayDescription = generateModelDescription(model);
-	$: genericModelName = getGenericModelName();
-	
-	// Check if model is speech-to-text
 	function isSpeechToTextModel(): boolean {
 		const taskType = model.taskType?.toLowerCase() || '';
 		const alias = model.alias?.toLowerCase() || '';
 		const displayName = model.displayName?.toLowerCase() || '';
-		
-		return taskType.includes('automatic-speech-recognition') || 
+		return (
+			taskType.includes('automatic-speech-recognition') ||
 			taskType.includes('speech-to-text') ||
 			alias.includes('whisper') ||
-			displayName.includes('whisper');
+			displayName.includes('whisper')
+		);
 	}
-	
+
+	$: displayDescription = generateModelDescription(model);
+	$: genericModelName = getGenericModelName();
 	$: isSpeechToText = isSpeechToTextModel();
 </script>
 
@@ -183,157 +135,49 @@
 				{/if}
 			</div>
 
-			<!-- Copy Run Command Section -->
-			<div class="border-border/40 border-t pt-3">
+			<!-- Run command + starter code strip -->
+			<div class="border-border/40 space-y-2.5 border-t pt-3">
 				{#if isSpeechToText}
-					<!-- SDK Only Notice for Speech-to-Text Models -->
-					<div class="space-y-2">
-						<div class="bg-gradient-to-r from-violet-500/10 to-purple-500/10 rounded-lg p-3 border border-violet-500/20">
-							<div class="flex items-center gap-2 mb-2">
-								<svg class="size-4 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
-								</svg>
-								<span class="text-xs font-semibold text-violet-600 dark:text-violet-400">SDK Only</span>
-							</div>
-							<div class="font-mono text-xs text-muted-foreground mb-2">
-								Model ID: <span class="text-foreground font-medium">{genericModelName}</span>
-							</div>
-							<a
-								href="https://learn.microsoft.com/en-us/azure/ai-foundry/foundry-local/how-to/how-to-transcribe-audio?view=foundry-classic&tabs=windows"
-								target="_blank"
-								rel="noopener noreferrer"
-								onclick={(e) => e.stopPropagation()}
-								class="inline-flex items-center gap-1.5 text-xs font-medium text-violet-600 dark:text-violet-400 hover:text-violet-700 dark:hover:text-violet-300 transition-colors"
-								aria-label="View SDK Documentation (opens in new tab)"
-							>
-								<svg class="size-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-								</svg>
-								View SDK Documentation
-								<svg class="size-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-								</svg>
-							</a>
-						</div>
+					<div class="flex items-center gap-1.5">
+						<span
+							class="bg-primary/10 text-primary rounded px-1.5 py-0.5 text-[10px] font-semibold"
+						>SDK only</span>
+						<span class="text-muted-foreground text-[11px]">Not available via CLI</span>
 					</div>
-				{:else if uniqueVariants.length > 0}
-					<div class="space-y-1.5">
-						<div class="text-xs font-medium text-gray-600 dark:text-gray-400">
-							Copy Run Command:
-						</div>
-
-						<!-- Default/Generic Run Command -->
-						<Tooltip.Root>
-							<Tooltip.Trigger>
-								{#snippet child({ props })}
-									<Button
-										{...props}
-										variant="outline"
-										size="sm"
-										onclick={(e) => {
-											e.stopPropagation();
-											onCopyCommand(genericModelName);
-										}}
-										class="border-primary text-primary hover:bg-primary/10 group relative h-8 w-full justify-start gap-2 overflow-hidden border-2 px-3 text-xs font-semibold"
-									>
-										{#if copiedModelId === `run-${genericModelName}`}
-											<!-- Success State -->
-											<div
-												class="animate-in fade-in absolute inset-0 bg-gradient-to-r from-purple-500/20 to-violet-500/20 duration-300"
-											></div>
-											<Check class="relative z-10 size-4 shrink-0 text-green-500" />
-											<span class="relative z-10 min-w-0 truncate">Copied!</span>
-										{:else}
-											<!-- Animated gradient overlay on hover/click -->
-											<div
-												class="from-primary/0 via-primary/20 to-primary/0 absolute inset-0 translate-x-[-100%] bg-gradient-to-r transition-transform duration-700 ease-in-out group-hover:translate-x-[100%]"
-											></div>
-											<svg
-												class="relative z-10 size-4 shrink-0"
-												fill="currentColor"
-												viewBox="0 0 20 20"
-											>
-												<path
-													fill-rule="evenodd"
-													d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
-													clip-rule="evenodd"
-												/>
-											</svg>
-											<span class="relative z-10 min-w-0 truncate">Auto-select Best Variant</span>
-										{/if}
-									</Button>
-								{/snippet}
-							</Tooltip.Trigger>
-							<Tooltip.Portal>
-								<Tooltip.Content side="top" align="center" sideOffset={6}>
-									<code class="tooltip-code">{formatModelCommand(genericModelName)}</code>
-								</Tooltip.Content>
-							</Tooltip.Portal>
-						</Tooltip.Root>
-
-						<!-- Specific Variant Commands -->
-						<div class="grid grid-cols-2 gap-1.5">
-							{#each uniqueVariants as variant (variant.name)}
-								<Tooltip.Root>
-									<Tooltip.Trigger>
-										{#snippet child({ props })}
-											<Button
-												{...props}
-												variant="outline"
-												size="sm"
-												onclick={(e) => {
-													e.stopPropagation();
-													onCopyCommand(variant.name);
-												}}
-												class="h-7 w-full justify-start gap-1.5 px-2.5 text-xs"
-											>
-												{#if copiedModelId === `run-${variant.name}`}
-													<Check class="size-4 shrink-0 text-green-500" />
-													<span class="min-w-0 truncate">Copied!</span>
-												{:else}
-													{@const acceleratorLogo = getAcceleratorLogo(variant.name)}
-													{@const acceleratorColor = getAcceleratorColor(variant.name)}
-													{#if acceleratorLogo}
-														<span
-															class="accelerator-logo-mask size-4 shrink-0"
-															style="--logo-color: {acceleratorColor}; --logo-url: url({acceleratorLogo});"
-															role="img"
-															aria-label="Accelerator logo"
-														></span>
-													{:else}
-														<span class="shrink-0"
-															>{getDeviceIcon(variant.deviceSupport[0] || '')}</span
-														>
-													{/if}
-													<span class="min-w-0 truncate">{getVariantLabel(variant)}</span>
-												{/if}
-											</Button>
-										{/snippet}
-									</Tooltip.Trigger>
-									<Tooltip.Portal>
-										<Tooltip.Content side="top" align="center" sideOffset={6}>
-											<code class="tooltip-code">{formatModelCommand(variant.name)}</code>
-										</Tooltip.Content>
-									</Tooltip.Portal>
-								</Tooltip.Root>
-							{/each}
-						</div>
+				{:else}
+					<div class="flex min-w-0 items-center gap-2">
+						<code
+							class="text-muted-foreground min-w-0 flex-1 truncate font-mono text-[11px]"
+							title="foundry model run {genericModelName}"
+						>
+							foundry model run {genericModelName}
+						</code>
+						<button
+							type="button"
+							onclick={(e) => {
+								e.stopPropagation();
+								onCopyCommand(genericModelName);
+							}}
+							class="border-border text-muted-foreground hover:text-foreground hover:border-primary/50 hover:bg-primary/5 flex shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs transition-colors"
+							aria-label="Copy run command for {genericModelName}"
+						>
+							{#if copiedModelId === `run-${genericModelName}`}
+								<Check class="size-3 text-green-500" aria-hidden="true" />
+								<span>Copied</span>
+							{:else}
+								<Copy class="size-3" aria-hidden="true" />
+								<span>Run</span>
+							{/if}
+						</button>
 					</div>
 				{/if}
+				<ModelStarterCode {model} compact />
 			</div>
 		</Card.Content>
 	</Card.Root>
 </div>
 
 <style>
-	:root {
-		--amd-color: #000000; /* Black in light mode */
-	}
-
-	:global(.dark) {
-		--amd-color: #ffffff; /* White in dark mode */
-	}
-
 	:global(.line-clamp-1) {
 		display: -webkit-box;
 		-webkit-line-clamp: 1;
@@ -358,13 +202,6 @@
 		overflow: hidden;
 	}
 
-	.tooltip-code {
-		display: inline-block;
-		font-family:
-			ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-		white-space: nowrap;
-	}
-
 	:global(.accelerator-logo-mask) {
 		display: inline-block;
 		background-color: var(--logo-color, currentColor);
diff --git a/www/src/routes/models/components/ModelDetailsModal.svelte b/www/src/routes/models/components/ModelDetailsModal.svelte
index a6c31a518..20e09d3e5 100644
--- a/www/src/routes/models/components/ModelDetailsModal.svelte
+++ b/www/src/routes/models/components/ModelDetailsModal.svelte
@@ -5,15 +5,14 @@
 	import { Calendar, Package, Copy, Check, ExternalLink } from 'lucide-svelte';
 	import * as Dialog from '$lib/components/ui/dialog';
 	import { foundryModelService } from '../service';
+	import ModelStarterCode from './ModelStarterCode.svelte';
 
 	export let model: GroupedFoundryModel | null;
 	export let isOpen = false;
 	export let copiedModelId: string | null = null;
 	export let onCopyModelId: (modelId: string) => void;
-	export let onCopyCommand: (modelId: string) => void;
 	export let onCopyShareUrl: (modelAlias: string) => void;
 
-	// Tags to hide from the details view (internal/system metadata)
 	const HIDDEN_TAG_SUBSTRINGS = [
 		':licensedescription',
 		'prompttemplate',
@@ -27,10 +26,8 @@
 		'invisiblelatest'
 	];
 
-	// Compute generic model name reactively
 	$: genericModelName = model ? getGenericModelName(model) : '';
 
-	// Filter tags for display in the details modal
 	$: visibleTags =
 		model?.tags.filter((tag) => {
 			const lower = tag.toLowerCase();
@@ -96,10 +93,6 @@
 		});
 	}
 
-	function formatModelCommand(modelId: string): string {
-		return `foundry model run ${modelId}`;
-	}
-
 	function renderMarkdown(text: string): string {
 		if (!text) return '';
 
@@ -184,25 +177,9 @@
 	// Device suffix pattern for cleaning model names
 	const DEVICE_SUFFIX_PATTERN = /-(generic|cuda|qnn|openvino|vitis)-(cpu|gpu|npu)$|-(cpu|gpu|npu)$/i;
 
-	// Get the generic model name for auto-selection
 	function getGenericModelName(model: GroupedFoundryModel): string {
 		const baseName = model.alias || model.variants[0]?.name || model.displayName;
-		const withoutVersion = baseName.split(':')[0];
-		return withoutVersion.replace(DEVICE_SUFFIX_PATTERN, '');
-	}
-
-	// Check if model is a speech-to-text model
-	function isSpeechToTextModel(model: GroupedFoundryModel | null): boolean {
-		if (!model) return false;
-		
-		const taskType = model.taskType?.toLowerCase() || '';
-		const alias = model.alias?.toLowerCase() || '';
-		const displayName = model.displayName?.toLowerCase() || '';
-		
-		return taskType.includes('automatic-speech-recognition') || 
-			taskType.includes('speech-to-text') ||
-			alias.includes('whisper') || 
-			displayName.includes('whisper');
+		return baseName.split(':')[0].replace(DEVICE_SUFFIX_PATTERN, '');
 	}
 </script>
 
@@ -258,6 +235,11 @@
 					</div>
 				</div>
 
+				<!-- Get started / boilerplate code -->
+				{#if model}
+					<ModelStarterCode {model} />
+				{/if}
+
 				<!-- Description -->
 				<div>
 					<h3 class="mb-2 text-lg font-semibold">Description</h3>
@@ -361,139 +343,10 @@
 
 				<!-- Available Variants -->
 				<div>
-					<h3 class="mb-3 text-lg font-semibold">Available Model Variants</h3>
-
-					{#if isSpeechToTextModel(model)}
-						<!-- SDK Only Notice for Speech-to-Text Models -->
-						<div class="bg-gradient-to-r from-violet-500/10 to-purple-500/10 mb-4 rounded-lg border-2 border-violet-500/20 p-4">
-							<div class="flex items-start gap-3">
-								<div class="rounded-full bg-violet-500/20 p-2">
-									<svg class="size-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
-									</svg>
-								</div>
-								<div class="flex-1">
-									<div class="text-sm font-semibold text-violet-600 dark:text-violet-400">SDK Only - Audio Transcription Model</div>
-									<div class="text-muted-foreground mt-1 text-sm">
-										This model transcribes audio to text and must be used via the Foundry Local SDK.
-									</div>
-								</div>
-							</div>
-							<div class="bg-background/50 mt-3 rounded-md p-3">
-								<div class="flex items-center justify-between">
-									<div>
-										<div class="text-muted-foreground text-xs font-medium">Model ID for SDK</div>
-										<div class="font-mono text-sm font-medium">{genericModelName}</div>
-									</div>
-									<Button
-										variant="outline"
-										size="sm"
-										onclick={(e) => {
-											e.stopPropagation();
-											onCopyModelId(genericModelName);
-										}}
-										class="shrink-0 gap-2"
-									>
-										{#if copiedModelId === genericModelName}
-											<Check class="size-4 text-green-500" />
-											Copied
-										{:else}
-											<Copy class="size-4" />
-											Copy ID
-										{/if}
-									</Button>
-								</div>
-							</div>
-							<div class="mt-3 pt-3 border-t border-violet-500/20">
-								<a
-									href="https://learn.microsoft.com/en-us/azure/ai-foundry/foundry-local/how-to/how-to-transcribe-audio?view=foundry-classic&tabs=windows"
-									target="_blank"
-									rel="noopener noreferrer"
-									class="inline-flex items-center gap-2 text-sm font-medium text-violet-600 dark:text-violet-400 hover:text-violet-700 dark:hover:text-violet-300 transition-colors"
-									aria-label="View Audio Transcription Documentation (opens in new tab)"
-								>
-									<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-									</svg>
-									View Audio Transcription Documentation
-									<ExternalLink class="size-3.5" />
-								</a>
-							</div>
-						</div>
-
-						<!-- Show variants info without run commands -->
-						<div class="space-y-3">
-							{#each getUniqueVariants(model) as variant}
-								<div class="bg-card hover:border-primary/50 rounded-lg border p-4 transition-all">
-									<div class="flex items-start justify-between">
-										<div class="flex-1">
-											<div class="font-mono text-sm font-medium">{variant.name}</div>
-											<div class="text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-xs">
-												<span>Device:</span>
-												{#each variant.deviceSupport as device}
-													{@const acceleratorLogo = getAcceleratorLogo(variant.name)}
-													{@const acceleratorColor = getAcceleratorColor(variant.name)}
-													<Badge variant="secondary" class="text-xs">
-														{#if acceleratorLogo}
-															<span
-																class="accelerator-logo-mask mr-1 inline-block size-3.5"
-																style="--logo-color: {acceleratorColor}; --logo-url: url({acceleratorLogo});"
-																role="img"
-																aria-label="Accelerator logo"
-															></span>
-														{:else}
-															{getDeviceIcon(device)}
-														{/if}
-														{getVariantLabel(variant)}
-													</Badge>
-												{/each}
-												{#if variant.fileSizeBytes}
-													<Badge variant="outline" class="text-xs">
-														{foundryModelService.formatFileSize(variant.fileSizeBytes)}
-													</Badge>
-												{/if}
-											</div>
-										</div>
-										<Button
-											variant="outline"
-											size="sm"
-											onclick={(e) => {
-												e.stopPropagation();
-												onCopyModelId(variant.name);
-											}}
-											class="gap-2"
-										>
-											{#if copiedModelId === variant.name}
-												<Check class="size-4 text-green-500" />
-												Copied
-											{:else}
-												<Copy class="size-4" />
-												Copy ID
-											{/if}
-										</Button>
-									</div>
-								</div>
-							{/each}
-						</div>
-					{:else}
-						<!-- Default/Generic Run Command -->
-						<div class="border-primary/20 bg-primary/5 mb-3 rounded-lg border-2 p-4">
-						<div class="mb-3 flex items-center justify-between gap-3">
-							<div class="flex items-center gap-2">
-								<svg class="text-primary size-5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
-									<path
-										fill-rule="evenodd"
-										d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
-										clip-rule="evenodd"
-									/>
-								</svg>
-								<div>
-									<div class="text-sm font-semibold">Recommended: Auto-select Best Variant</div>
-									<div class="text-muted-foreground text-xs">
-										Foundry Local will choose the optimal variant for your device
-									</div>
-								</div>
-							</div>
+					<div class="mb-3 flex items-center justify-between gap-3">
+						<h3 class="text-lg font-semibold">Available Variants</h3>
+						<div class="flex items-center gap-2">
+							<span class="text-muted-foreground font-mono text-xs">{genericModelName}</span>
 							<Button
 								variant="outline"
 								size="sm"
@@ -501,141 +354,72 @@
 									e.stopPropagation();
 									onCopyModelId(genericModelName);
 								}}
-								class="shrink-0 gap-2"
+								class="h-7 gap-1.5 px-2.5 text-xs"
 							>
 								{#if copiedModelId === genericModelName}
-									<Check class="size-4 text-green-500" />
+									<Check class="size-3.5 text-green-500" />
 									Copied
 								{:else}
-									<Copy class="size-4" />
+									<Copy class="size-3.5" />
 									Copy ID
 								{/if}
 							</Button>
 						</div>
-
-						<div class="bg-muted/50 rounded-md p-3">
-							<div class="mb-2 font-mono text-sm font-medium">{genericModelName}</div>
-							<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-								<code class="text-muted-foreground text-xs break-all sm:flex-1">
-									foundry model run {genericModelName}
-								</code>
+					</div>
+					<div class="space-y-2">
+						{#each getUniqueVariants(model) as variant}
+							<div
+								class="bg-card hover:border-primary/50 flex items-center justify-between rounded-lg border p-3 transition-colors"
+							>
+								<div class="min-w-0 flex-1">
+									<div class="font-mono text-xs font-medium">{variant.name}</div>
+									<div
+										class="text-muted-foreground mt-1 flex flex-wrap items-center gap-1.5 text-xs"
+									>
+										{#each variant.deviceSupport as device}
+											{@const acceleratorLogo = getAcceleratorLogo(variant.name)}
+											{@const acceleratorColor = getAcceleratorColor(variant.name)}
+											<Badge variant="secondary" class="gap-1 text-xs">
+												{#if acceleratorLogo}
+													<span
+														class="accelerator-logo-mask inline-block size-3"
+														style="--logo-color: {acceleratorColor}; --logo-url: url({acceleratorLogo});"
+														role="img"
+														aria-label="Accelerator logo"
+													></span>
+												{:else}
+													{getDeviceIcon(device)}
+												{/if}
+												{getVariantLabel(variant)}
+											</Badge>
+										{/each}
+										{#if variant.fileSizeBytes}
+											<Badge variant="outline" class="text-xs">
+												{foundryModelService.formatFileSize(variant.fileSizeBytes)}
+											</Badge>
+										{/if}
+									</div>
+								</div>
 								<Button
-									variant="outline"
+									variant="ghost"
 									size="sm"
 									onclick={(e) => {
 										e.stopPropagation();
-										onCopyCommand(genericModelName);
+										onCopyModelId(variant.name);
 									}}
-									class="group border-primary text-primary hover:bg-primary/10 relative h-7 shrink-0 gap-1.5 overflow-hidden border-2 px-2.5 text-xs"
+									class="ml-3 h-7 shrink-0 gap-1.5 px-2.5 text-xs"
 								>
-									{#if copiedModelId === `run-${genericModelName}`}
-										<!-- Success State -->
-										<div
-											class="animate-in fade-in absolute inset-0 bg-gradient-to-r from-purple-500/20 to-violet-500/20 duration-300"
-										></div>
-										<Check class="relative z-10 size-3.5 text-green-500" />
-										<span class="relative z-10">Copied</span>
+									{#if copiedModelId === variant.name}
+										<Check class="size-3.5 text-green-500" />
+										Copied
 									{:else}
-										<!-- Animated gradient overlay on hover/click -->
-										<div
-											class="from-primary/0 via-primary/20 to-primary/0 absolute inset-0 translate-x-[-100%] bg-gradient-to-r transition-transform duration-700 ease-in-out group-hover:translate-x-[100%]"
-										></div>
-										<Copy class="relative z-10 size-3.5" />
-										<span class="relative z-10">Copy</span>
+										<Copy class="size-3.5" />
+										Copy ID
 									{/if}
 								</Button>
 							</div>
-						</div>
-					</div>
-
-					<div class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
-						Or choose a specific variant:
-					</div>
-					<div class="space-y-3">
-						{#each getUniqueVariants(model) as variant}
-							<div class="bg-card hover:border-primary/50 rounded-lg border p-4 transition-all">
-								<div class="mb-3 flex items-start justify-between">
-									<div class="flex-1">
-										<div class="font-mono text-sm font-medium">{variant.name}</div>
-										<div
-											class="text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-xs"
-										>
-											<span>Device:</span>
-											{#each variant.deviceSupport as device}
-												{@const acceleratorLogo = getAcceleratorLogo(variant.name)}
-												{@const acceleratorColor = getAcceleratorColor(variant.name)}
-												<Badge variant="secondary" class="text-xs">
-													{#if acceleratorLogo}
-														<span
-															class="accelerator-logo-mask mr-1 inline-block size-3.5"
-															style="--logo-color: {acceleratorColor}; --logo-url: url({acceleratorLogo});"
-															role="img"
-															aria-label="Accelerator logo"
-														></span>
-													{:else}
-														{getDeviceIcon(device)}
-													{/if}
-													{getVariantLabel(variant)}
-												</Badge>
-											{/each}
-											{#if variant.fileSizeBytes}
-												<Badge variant="outline" class="text-xs">
-													{foundryModelService.formatFileSize(variant.fileSizeBytes)}
-												</Badge>
-											{/if}
-										</div>
-									</div>
-									<Button
-										variant="outline"
-										size="sm"
-										onclick={(e) => {
-											e.stopPropagation();
-											onCopyModelId(variant.name);
-										}}
-										class="gap-2"
-									>
-										{#if copiedModelId === variant.name}
-											<Check class="size-4 text-green-500" />
-											Copied
-										{:else}
-											<Copy class="size-4" />
-											Copy ID
-										{/if}
-									</Button>
-								</div>
-
-								<!-- Command to run -->
-								<div class="bg-muted/50 rounded-md p-3">
-									<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-										<div class="text-muted-foreground text-xs font-medium sm:w-32">
-											Run Command:
-										</div>
-										<code class="font-mono text-xs break-all sm:flex-1">
-											{formatModelCommand(variant.name)}
-										</code>
-										<Button
-											variant="ghost"
-											size="sm"
-											onclick={(e) => {
-												e.stopPropagation();
-												onCopyCommand(variant.name);
-											}}
-											class="h-6 gap-1.5 px-2 text-xs"
-										>
-											{#if copiedModelId === `run-${variant.name}`}
-												<Check class="size-3 text-green-500" />
-												Copied
-											{:else}
-												<Copy class="size-3" />
-												Copy
-											{/if}
-										</Button>
-									</div>
-								</div>
-							</div>
 						{/each}
 					</div>
-					{/if}
 				</div>
 
 				<!-- Links Section -->
@@ -704,14 +488,6 @@
 </Dialog.Root>
 
 <style>
-	:root {
-		--amd-color: #000000; /* Black in light mode */
-	}
-
-	:global(.dark) {
-		--amd-color: #ffffff; /* White in dark mode */
-	}
-
 	.prose :global(code) {
 		background-color: hsl(var(--muted));
 		padding: 0.125rem 0.25rem;
diff --git a/www/src/routes/models/components/ModelStarterCode.svelte b/www/src/routes/models/components/ModelStarterCode.svelte
new file mode 100644
index 000000000..bed526747
--- /dev/null
+++ b/www/src/routes/models/components/ModelStarterCode.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { Copy, Check, Code2 } from 'lucide-svelte';
+	import { toast } from 'svelte-sonner';
+	import type { GroupedFoundryModel } from '../types';
+	import type { StarterLanguage } from '../model-boilerplate';
+	import {
+		STARTER_LANGUAGES,
+		getStarterSnippet,
+		getStarterKindLabel,
+		getStarterHint
+	} from '../model-boilerplate';
+
+	export let model: GroupedFoundryModel;
+	/** true → card-mode: language picker + single copy button, no code preview */
+	export let compact: boolean = false;
+
+	let activeLanguage: StarterLanguage = 'python';
+	let copied = false;
+
+	$: snippet = getStarterSnippet(model, activeLanguage);
+	$: kindLabel = getStarterKindLabel(snippet.kind);
+	$: hint = getStarterHint(snippet.kind);
+
+	async function copySnippet() {
+		try {
+			await navigator.clipboard.writeText(snippet.code);
+			copied = true;
+			toast.success('Starter code copied');
+			setTimeout(() => {
+				copied = false;
+			}, 2000);
+		} catch {
+			toast.error('Failed to copy');
+		}
+	}
+</script>
+
+{#if compact}
+	<!-- Card-mode: one row with language pills + copy button -->
+	<div class="flex items-center gap-2">
+		<Code2 class="text-muted-foreground size-3.5 shrink-0" aria-hidden="true" />
+		<span class="text-muted-foreground text-xs">Code:</span>
+		<div class="flex min-w-0 flex-1 flex-wrap gap-1">
+			{#each STARTER_LANGUAGES as lang}
+				<button
+					type="button"
+					class="rounded px-2 py-0.5 text-[11px] font-medium transition-colors duration-150 {activeLanguage ===
+					lang.id
+						? 'bg-primary text-primary-foreground'
+						: 'text-muted-foreground hover:text-foreground hover:bg-muted'}"
+					onclick={(e) => {
+						e.stopPropagation();
+						activeLanguage = lang.id;
+					}}
+					aria-label="Select {lang.label}"
+				>
+					{lang.shortLabel}
+				</button>
+			{/each}
+		</div>
+		<button
+			type="button"
+			class="border-border text-muted-foreground hover:text-foreground hover:border-primary/50 hover:bg-primary/5 flex shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs transition-colors"
+			onclick={(e) => {
+				e.stopPropagation();
+				copySnippet();
+			}}
+			aria-label="Copy {activeLanguage} starter code"
+		>
+			{#if copied}
+				<Check class="size-3 text-green-500" aria-hidden="true" />
+				<span>Copied</span>
+			{:else}
+				<Copy class="size-3" aria-hidden="true" />
+				<span>Copy</span>
+			{/if}
+		</button>
+	</div>
+{:else}
+	<!-- Modal-mode: full panel with language tabs, code block, and copy -->
+	<div class="space-y-3">
+		<div class="flex items-center justify-between gap-3">
+			<div>
+				<h3 class="text-base font-semibold">Get started — {kindLabel}</h3>
+				<p class="text-muted-foreground mt-0.5 text-xs">{hint}</p>
+				{#if snippet.kind === 'audio'}
+					<p class="text-primary mt-1 text-[11px] font-medium">
+						SDK only — not available via <code class="font-mono">foundry model run</code>
+					</p>
+				{/if}
+			</div>
+			<button
+				type="button"
+				class="bg-primary/10 text-primary hover:bg-primary/20 focus:ring-primary flex shrink-0 items-center gap-1.5 rounded px-3 py-1.5 text-xs font-medium transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none"
+				onclick={copySnippet}
+				aria-label="Copy {activeLanguage} starter code for {model.displayName}"
+			>
+				{#if copied}
+					<Check class="size-3.5 text-green-500" aria-hidden="true" />
+					Copied
+				{:else}
+					<Copy class="size-3.5" aria-hidden="true" />
+					Copy code
+				{/if}
+			</button>
+		</div>
+
+		<!-- Language tabs -->
+		<div
+			class="border-border -mx-1 flex gap-0.5 border-b px-1"
+			role="tablist"
+			aria-label="Starter code language"
+		>
+			{#each STARTER_LANGUAGES as lang}
+				<button
+					type="button"
+					role="tab"
+					aria-selected={activeLanguage === lang.id}
+					class="relative -mb-px rounded-t px-3 py-1.5 text-xs font-medium transition-colors {activeLanguage ===
+					lang.id
+						? 'border-border border-x border-t text-foreground bg-background'
+						: 'text-muted-foreground hover:text-foreground'}"
+					onclick={() => (activeLanguage = lang.id)}
+				>
+					{lang.label}
+				</button>
+			{/each}
+		</div>
+
+		<!-- Code block -->
+		<div class="border-border bg-muted/40 relative overflow-hidden rounded-lg border">
+			<div class="text-muted-foreground border-border flex items-center justify-between border-b px-3 py-1.5 text-[11px]">
+				<span class="font-mono">{snippet.fileName}</span>
+				<span class="font-mono text-[10px] opacity-60">{snippet.installCommand}</span>
+			</div>
+			<pre
+				class="max-h-64 overflow-auto p-4 font-mono text-[11px] leading-relaxed sm:text-xs"><code class="text-foreground">{snippet.code}</code></pre>
+		</div>
+	</div>
+{/if}
diff --git a/www/src/routes/models/model-boilerplate.ts b/www/src/routes/models/model-boilerplate.ts
new file mode 100644
index 000000000..beca5317c
--- /dev/null
+++ b/www/src/routes/models/model-boilerplate.ts
@@ -0,0 +1,370 @@
+import type { GroupedFoundryModel } from './types';
+
+export type StarterLanguage = 'python' | 'javascript' | 'csharp' | 'rust';
+export type StarterKind = 'chat' | 'audio' | 'embedding';
+
+export type StarterLanguageOption = {
+	id: StarterLanguage;
+	label: string;
+	shortLabel: string;
+	fileName: string;
+	installCommand: string;
+};
+
+export type StarterSnippet = StarterLanguageOption & {
+	code: string;
+	kind: StarterKind;
+};
+
+export const STARTER_LANGUAGES: StarterLanguageOption[] = [
+	{
+		id: 'python',
+		label: 'Python',
+		shortLabel: 'Py',
+		fileName: 'app.py',
+		installCommand: 'pip install foundry-local-sdk'
+	},
+	{
+		id: 'javascript',
+		label: 'JavaScript',
+		shortLabel: 'JS',
+		fileName: 'app.js',
+		installCommand: 'npm install foundry-local-sdk'
+	},
+	{
+		id: 'csharp',
+		label: 'C#',
+		shortLabel: 'C#',
+		fileName: 'Program.cs',
+		installCommand: 'dotnet add package Microsoft.AI.Foundry.Local'
+	},
+	{
+		id: 'rust',
+		label: 'Rust',
+		shortLabel: 'Rs',
+		fileName: 'main.rs',
+		installCommand: 'cargo add foundry-local-sdk'
+	}
+];
+
+const DEVICE_SUFFIX_PATTERN = /-(generic|cuda|qnn|openvino|vitis)-(cpu|gpu|npu)$|-(cpu|gpu|npu)$/i;
+
+export function getGenericModelName(model: GroupedFoundryModel): string {
+	const baseName = model.alias || model.variants[0]?.name || model.displayName;
+	const withoutVersion = baseName.split(':')[0];
+	return withoutVersion.replace(DEVICE_SUFFIX_PATTERN, '');
+}
+
+export function getModelStarterKind(model: GroupedFoundryModel): StarterKind {
+	const searchable = [
+		model.taskType,
+		model.alias,
+		model.displayName,
+		...(model.tags ?? [])
+	]
+		.filter(Boolean)
+		.join(' ')
+		.toLowerCase();
+
+	if (
+		searchable.includes('automatic-speech-recognition') ||
+		searchable.includes('speech-to-text') ||
+		searchable.includes('whisper')
+	) {
+		return 'audio';
+	}
+
+	if (searchable.includes('embedding') || searchable.includes('embeddings')) {
+		return 'embedding';
+	}
+
+	return 'chat';
+}
+
+export function getStarterKindLabel(kind: StarterKind): string {
+	switch (kind) {
+		case 'audio':
+			return 'Audio transcription';
+		case 'embedding':
+			return 'Embeddings';
+		default:
+			return 'Chat completion';
+	}
+}
+
+export function getStarterHint(kind: StarterKind): string {
+	switch (kind) {
+		case 'audio':
+			return 'Pass an audio file path as the first argument.';
+		case 'embedding':
+			return 'Generates one text embedding and prints its dimensions.';
+		default:
+			return 'Sends one prompt to the local chat client.';
+	}
+}
+
+export function getStarterSnippet(
+	model: GroupedFoundryModel,
+	language: StarterLanguage
+): StarterSnippet {
+	const languageOption = STARTER_LANGUAGES.find((item) => item.id === language) ?? STARTER_LANGUAGES[0];
+	const modelId = getGenericModelName(model);
+	const kind = getModelStarterKind(model);
+
+	return {
+		...languageOption,
+		kind,
+		code: createStarterCode(languageOption.id, kind, modelId)
+	};
+}
+
+function createStarterCode(language: StarterLanguage, kind: StarterKind, modelId: string): string {
+	switch (language) {
+		case 'javascript':
+			return createJavaScriptStarter(kind, modelId);
+		case 'csharp':
+			return createCSharpStarter(kind, modelId);
+		case 'rust':
+			return createRustStarter(kind, modelId);
+		default:
+			return createPythonStarter(kind, modelId);
+	}
+}
+
+function createPythonStarter(kind: StarterKind, modelId: string): string {
+	const shared = [
+		'from foundry_local_sdk import Configuration, FoundryLocalManager',
+		'',
+		'FoundryLocalManager.initialize(Configuration(app_name="model_starter"))',
+		'manager = FoundryLocalManager.instance',
+		`model = manager.catalog.get_model("${modelId}")`,
+		'model.download()',
+		'model.load()',
+		''
+	];
+
+	if (kind === 'audio') {
+		return [
+			'import sys',
+			...shared,
+			'audio_file = sys.argv[1] if len(sys.argv) > 1 else "Recording.mp3"',
+			'client = model.get_audio_client()',
+			'result = client.transcribe(audio_file)',
+			'print(result.text)',
+			'',
+			'model.unload()'
+		].join('\n');
+	}
+
+	if (kind === 'embedding') {
+		return [
+			...shared,
+			'client = model.get_embedding_client()',
+			'response = client.generate_embedding("The quick brown fox jumps over the lazy dog")',
+			'print(f"Dimensions: {len(response.data[0].embedding)}")',
+			'',
+			'model.unload()'
+		].join('\n');
+	}
+
+	return [
+		...shared,
+		'client = model.get_chat_client()',
+		'response = client.complete_chat([',
+		'    {"role": "user", "content": "What can you help me build?"}',
+		'])',
+		'print(response.choices[0].message.content)',
+		'',
+		'model.unload()'
+	].join('\n');
+}
+
+function createJavaScriptStarter(kind: StarterKind, modelId: string): string {
+	const shared = [
+		"import { FoundryLocalManager } from 'foundry-local-sdk';",
+		'',
+		"const manager = FoundryLocalManager.create({ appName: 'model_starter' });",
+		`const model = await manager.catalog.getModel('${modelId}');`,
+		'await model.download();',
+		'await model.load();',
+		''
+	];
+
+	if (kind === 'audio') {
+		return [
+			...shared,
+			'const audioFile = process.argv[2] || "Recording.mp3";',
+			'const client = model.createAudioClient();',
+			'const result = await client.transcribe(audioFile);',
+			'console.log(result.text);',
+			'',
+			'await model.unload();'
+		].join('\n');
+	}
+
+	if (kind === 'embedding') {
+		return [
+			...shared,
+			'const client = model.createEmbeddingClient();',
+			"const response = await client.generateEmbedding('The quick brown fox jumps over the lazy dog');",
+			'console.log(`Dimensions: ${response.data[0].embedding.length}`);',
+			'',
+			'await model.unload();'
+		].join('\n');
+	}
+
+	return [
+		...shared,
+		'const client = model.createChatClient();',
+		'const response = await client.completeChat([',
+		"  { role: 'user', content: 'What can you help me build?' }",
+		']);',
+		'console.log(response.choices[0]?.message?.content);',
+		'',
+		'await model.unload();'
+	].join('\n');
+}
+
+function createCSharpStarter(kind: StarterKind, modelId: string): string {
+	const imports =
+		kind === 'chat'
+			? [
+					'using Microsoft.AI.Foundry.Local;',
+					'using Microsoft.Extensions.Logging.Abstractions;',
+					'using Betalgo.Ranul.OpenAI.ObjectModels.RequestModels;'
+				]
+			: ['using Microsoft.AI.Foundry.Local;', 'using Microsoft.Extensions.Logging.Abstractions;'];
+
+	const shared = [
+		...imports,
+		'',
+		'await FoundryLocalManager.CreateAsync(',
+		'    new Configuration { AppName = "model_starter" },',
+		'    NullLogger.Instance);',
+		'',
+		'var catalog = await FoundryLocalManager.Instance.GetCatalogAsync();',
+		`var model = await catalog.GetModelAsync("${modelId}")`,
+		'    ?? throw new Exception("Model not found.");',
+		'',
+		'await model.DownloadAsync();',
+		'await model.LoadAsync();',
+		''
+	];
+
+	if (kind === 'audio') {
+		return [
+			...shared,
+			'var audioFile = args.Length > 0 ? args[0] : "Recording.mp3";',
+			'var client = await model.GetAudioClientAsync();',
+			'var stream = client.TranscribeAudioStreamingAsync(audioFile, CancellationToken.None);',
+			'await foreach (var chunk in stream)',
+			'{',
+			'    Console.Write(chunk.Text);',
+			'}',
+			'Console.WriteLine();',
+			'',
+			'await model.UnloadAsync();'
+		].join('\n');
+	}
+
+	if (kind === 'embedding') {
+		return [
+			...shared,
+			'var client = await model.GetEmbeddingClientAsync();',
+			'var response = await client.GenerateEmbeddingAsync(',
+			'    "The quick brown fox jumps over the lazy dog");',
+			'Console.WriteLine($"Dimensions: {response.Data[0].Embedding.Count}");',
+			'',
+			'await model.UnloadAsync();'
+		].join('\n');
+	}
+
+	return [
+		...shared,
+		'var client = await model.GetChatClientAsync();',
+		'var response = await client.CompleteChatAsync(new[]',
+		'{',
+		'    new ChatMessage { Role = "user", Content = "What can you help me build?" }',
+		'});',
+		'Console.WriteLine(response.Choices![0].Message.Content);',
+		'',
+		'await model.UnloadAsync();'
+	].join('\n');
+}
+
+function createRustStarter(kind: StarterKind, modelId: string): string {
+	if (kind === 'audio') {
+		return [
+			'use std::env;',
+			'use foundry_local_sdk::{FoundryLocalConfig, FoundryLocalManager};',
+			'',
+			'#[tokio::main]',
+			'async fn main() -> Result<(), Box<dyn std::error::Error>> {',
+			'    let manager = FoundryLocalManager::create(FoundryLocalConfig::new("model_starter"))?;',
+			`    let model = manager.catalog().get_model("${modelId}").await?;`,
+			'    model.download(None::<fn(f64)>).await?;',
+			'    model.load().await?;',
+			'',
+			'    let audio_path = env::args().nth(1).unwrap_or_else(|| "Recording.mp3".to_string());',
+			'    let client = model.create_audio_client();',
+			'    let result = client.transcribe(&audio_path).await?;',
+			'    println!("{}", result.text);',
+			'',
+			'    model.unload().await?;',
+			'    Ok(())',
+			'}'
+		].join('\n');
+	}
+
+	if (kind === 'embedding') {
+		return [
+			'use foundry_local_sdk::{FoundryLocalConfig, FoundryLocalManager};',
+			'',
+			'#[tokio::main]',
+			'async fn main() -> Result<(), Box<dyn std::error::Error>> {',
+			'    let manager = FoundryLocalManager::create(FoundryLocalConfig::new("model_starter"))?;',
+			`    let model = manager.catalog().get_model("${modelId}").await?;`,
+			'    model.download(None::<fn(f64)>).await?;',
+			'    model.load().await?;',
+			'',
+			'    let client = model.create_embedding_client();',
+			'    let response = client',
+			'        .generate_embedding("The quick brown fox jumps over the lazy dog")',
+			'        .await?;',
+			'    println!("Dimensions: {}", response.data[0].embedding.len());',
+			'',
+			'    model.unload().await?;',
+			'    Ok(())',
+			'}'
+		].join('\n');
+	}
+
+	return [
+		'use foundry_local_sdk::{',
+		'    ChatCompletionRequestMessage, ChatCompletionRequestUserMessage, FoundryLocalConfig,',
+		'    FoundryLocalManager,',
+		'};',
+		'',
+		'#[tokio::main]',
+		'async fn main() -> Result<(), Box<dyn std::error::Error>> {',
+		'    let manager = FoundryLocalManager::create(FoundryLocalConfig::new("model_starter"))?;',
+		`    let model = manager.catalog().get_model("${modelId}").await?;`,
+		'    model.download(None::<fn(f64)>).await?;',
+		'    model.load().await?;',
+		'',
+		'    let client = model.create_chat_client();',
+		'    let messages: Vec<ChatCompletionRequestMessage> = vec![',
+		'        ChatCompletionRequestUserMessage::from("What can you help me build?").into(),',
+		'    ];',
+		'    let response = client.complete_chat(&messages, None).await?;',
+		'    if let Some(choice) = response.choices.first() {',
+		'        if let Some(content) = &choice.message.content {',
+		'            println!("{content}");',
+		'        }',
+		'    }',
+		'',
+		'    model.unload().await?;',
+		'    Ok(())',
+		'}'
+	].join('\n');
+}

From 7c33dc94a8c05390549a18528c5098e89fdcc5d3 Mon Sep 17 00:00:00 2001
From: maanavd <maanavdalal@gmail.com>
Date: Thu, 21 May 2026 12:49:52 -0700
Subject: [PATCH 2/5] fix(www): restore CLI run command in model detail modal

Add 'foundry model run {alias}' row above the SDK boilerplate panel in
ModelDetailsModal for non-audio models, matching what the model card
already shows. Audio/STT models continue to show SDK-only note only.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../components/ModelDetailsModal.svelte       | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/www/src/routes/models/components/ModelDetailsModal.svelte b/www/src/routes/models/components/ModelDetailsModal.svelte
index 20e09d3e5..d9a3b3091 100644
--- a/www/src/routes/models/components/ModelDetailsModal.svelte
+++ b/www/src/routes/models/components/ModelDetailsModal.svelte
@@ -6,6 +6,7 @@
 	import * as Dialog from '$lib/components/ui/dialog';
 	import { foundryModelService } from '../service';
 	import ModelStarterCode from './ModelStarterCode.svelte';
+	import { getModelStarterKind } from '../model-boilerplate';
 
 	export let model: GroupedFoundryModel | null;
 	export let isOpen = false;
@@ -237,6 +238,27 @@
 
 				<!-- Get started / boilerplate code -->
 				{#if model}
+					{#if getModelStarterKind(model) !== 'audio'}
+						<div class="border-border/40 flex items-center gap-2 rounded-lg border px-3 py-2">
+							<code class="text-muted-foreground min-w-0 flex-1 font-mono text-sm">
+								foundry model run {genericModelName}
+							</code>
+							<button
+								type="button"
+								onclick={() => onCopyModelId(`run-${genericModelName}`)}
+								class="border-border text-muted-foreground hover:text-foreground hover:border-primary/50 hover:bg-primary/5 flex shrink-0 items-center gap-1.5 rounded border px-2.5 py-1 text-xs transition-colors"
+								aria-label="Copy run command for {genericModelName}"
+							>
+								{#if copiedModelId === `run-${genericModelName}`}
+									<Check class="size-3.5 text-green-500" aria-hidden="true" />
+									<span>Copied</span>
+								{:else}
+									<Copy class="size-3.5" aria-hidden="true" />
+									<span>Copy</span>
+								{/if}
+							</button>
+						</div>
+					{/if}
 					<ModelStarterCode {model} />
 				{/if}
 

From 09c724d912a1f9fa8a765b3b8547d208fe0b1072 Mon Sep 17 00:00:00 2001
From: maanavd <maanavdalal@gmail.com>
Date: Thu, 21 May 2026 17:48:15 -0700
Subject: [PATCH 3/5] feat(www): OS-aware install panel + clearer model card
 sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CLI install panel detects current OS via userAgent and shows only the
  matching install button (Windows or macOS) by default, with a small
  'All platforms' toggle to reveal the other. Unknown OS still sees all.
- Single-OS layout uses a 2-column grid (install | run) instead of 3,
  giving the run command more breathing room.
- Model card bottom now uses small uppercase section labels ('Run with
  CLI' and 'Starter code') with extra spacing between them so the two
  actions read as distinct rows — like the old variant-button card had.
- Removed redundant 'Code:' inline label from compact ModelStarterCode
  since the section now has its own heading.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 www/src/routes/models/+page.svelte            | 58 ++++++++++++++---
 .../routes/models/components/ModelCard.svelte | 62 +++++++++++--------
 .../models/components/ModelStarterCode.svelte |  4 +-
 3 files changed, 86 insertions(+), 38 deletions(-)

diff --git a/www/src/routes/models/+page.svelte b/www/src/routes/models/+page.svelte
index f646b26b3..4db2549c7 100644
--- a/www/src/routes/models/+page.svelte
+++ b/www/src/routes/models/+page.svelte
@@ -42,6 +42,16 @@
 	let error = '';
 	let copiedModelId: string | null = null;
 	let copiedCliCommandId: string | null = null;
+	let detectedOs: 'windows' | 'macos' | 'other' = 'other';
+	let showAllPlatforms = false;
+
+	$: visibleInstallCommands = showAllPlatforms
+		? CLI_INSTALL_COMMANDS
+		: detectedOs === 'windows'
+			? CLI_INSTALL_COMMANDS.filter((i) => i.id === 'windows-cli')
+			: detectedOs === 'macos'
+				? CLI_INSTALL_COMMANDS.filter((i) => i.id === 'macos-cli')
+				: CLI_INSTALL_COMMANDS;
 
 	// Modal state
 	let selectedModel: GroupedFoundryModel | null = null;
@@ -466,6 +476,13 @@
 	}
 
 	onMount(() => {
+		// Detect OS for the CLI install panel
+		if (typeof navigator !== 'undefined') {
+			const ua = navigator.userAgent;
+			if (/Win/i.test(ua)) detectedOs = 'windows';
+			else if (/Mac/i.test(ua)) detectedOs = 'macos';
+		}
+
 		// Read initial filter state from URL before fetching
 		suppressUrlUpdate = true;
 		readFiltersFromUrl();
@@ -506,21 +523,34 @@
 				class="border-border/50 bg-muted/30 mb-4 rounded-lg border px-3 py-2.5 sm:px-4"
 				aria-label="CLI quick test"
 			>
-				<div class="flex flex-col gap-2 xl:flex-row xl:items-center">
-					<div class="flex shrink-0 items-center gap-2">
-						<Terminal class="text-primary size-4" aria-hidden="true" />
-						<div class="leading-tight">
-							<div class="text-sm font-medium">Test with the CLI</div>
-							<div class="text-muted-foreground text-xs">
-								Copy a command, then swap in any model alias.
+				<div class="flex flex-col gap-2 lg:flex-row lg:items-center">
+					<div class="flex shrink-0 items-center justify-between gap-2">
+						<div class="flex items-center gap-2">
+							<Terminal class="text-primary size-4" aria-hidden="true" />
+							<div class="leading-tight">
+								<div class="text-sm font-medium">Test with the CLI</div>
+								<div class="text-muted-foreground text-xs">
+									Copy a command, then swap in any model alias.
+								</div>
 							</div>
 						</div>
+						{#if detectedOs !== 'other'}
+							<button
+								type="button"
+								class="text-muted-foreground hover:text-foreground text-xs underline-offset-2 hover:underline lg:hidden"
+								onclick={() => (showAllPlatforms = !showAllPlatforms)}
+							>
+								{showAllPlatforms ? 'Hide' : 'All platforms'}
+							</button>
+						{/if}
 					</div>
 
 					<div
-						class="grid min-w-0 flex-1 gap-2 md:grid-cols-[minmax(11rem,0.9fr)_minmax(11rem,0.9fr)_minmax(21rem,1.1fr)]"
+						class="grid min-w-0 flex-1 gap-2 {visibleInstallCommands.length === 1
+							? 'md:grid-cols-[minmax(11rem,0.7fr)_minmax(21rem,1.3fr)]'
+							: 'md:grid-cols-[minmax(11rem,0.9fr)_minmax(11rem,0.9fr)_minmax(21rem,1.1fr)]'}"
 					>
-						{#each CLI_INSTALL_COMMANDS as item}
+						{#each visibleInstallCommands as item}
 							<button
 								type="button"
 								class="border-border/60 bg-background/60 hover:bg-background focus:ring-primary flex min-h-11 min-w-0 items-center justify-between gap-3 rounded-md border px-3 py-2 text-left transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none"
@@ -564,6 +594,16 @@
 							{/if}
 						</button>
 					</div>
+
+					{#if detectedOs !== 'other'}
+						<button
+							type="button"
+							class="text-muted-foreground hover:text-foreground hidden shrink-0 text-xs underline-offset-2 hover:underline lg:inline-block"
+							onclick={() => (showAllPlatforms = !showAllPlatforms)}
+						>
+							{showAllPlatforms ? 'Hide other' : 'All platforms'}
+						</button>
+					{/if}
 				</div>
 			</section>
 
diff --git a/www/src/routes/models/components/ModelCard.svelte b/www/src/routes/models/components/ModelCard.svelte
index 688203ace..f61c4f079 100644
--- a/www/src/routes/models/components/ModelCard.svelte
+++ b/www/src/routes/models/components/ModelCard.svelte
@@ -136,7 +136,7 @@
 			</div>
 
 			<!-- Run command + starter code strip -->
-			<div class="border-border/40 space-y-2.5 border-t pt-3">
+			<div class="border-border/40 space-y-3 border-t pt-3">
 				{#if isSpeechToText}
 					<div class="flex items-center gap-1.5">
 						<span
@@ -145,33 +145,43 @@
 						<span class="text-muted-foreground text-[11px]">Not available via CLI</span>
 					</div>
 				{:else}
-					<div class="flex min-w-0 items-center gap-2">
-						<code
-							class="text-muted-foreground min-w-0 flex-1 truncate font-mono text-[11px]"
-							title="foundry model run {genericModelName}"
-						>
-							foundry model run {genericModelName}
-						</code>
-						<button
-							type="button"
-							onclick={(e) => {
-								e.stopPropagation();
-								onCopyCommand(genericModelName);
-							}}
-							class="border-border text-muted-foreground hover:text-foreground hover:border-primary/50 hover:bg-primary/5 flex shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs transition-colors"
-							aria-label="Copy run command for {genericModelName}"
-						>
-							{#if copiedModelId === `run-${genericModelName}`}
-								<Check class="size-3 text-green-500" aria-hidden="true" />
-								<span>Copied</span>
-							{:else}
-								<Copy class="size-3" aria-hidden="true" />
-								<span>Run</span>
-							{/if}
-						</button>
+					<div>
+						<div class="text-muted-foreground mb-1 text-[10px] font-semibold tracking-wide uppercase">
+							Run with CLI
+						</div>
+						<div class="flex min-w-0 items-center gap-2">
+							<code
+								class="text-muted-foreground min-w-0 flex-1 truncate font-mono text-[11px]"
+								title="foundry model run {genericModelName}"
+							>
+								foundry model run {genericModelName}
+							</code>
+							<button
+								type="button"
+								onclick={(e) => {
+									e.stopPropagation();
+									onCopyCommand(genericModelName);
+								}}
+								class="border-border text-muted-foreground hover:text-foreground hover:border-primary/50 hover:bg-primary/5 flex shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs transition-colors"
+								aria-label="Copy run command for {genericModelName}"
+							>
+								{#if copiedModelId === `run-${genericModelName}`}
+									<Check class="size-3 text-green-500" aria-hidden="true" />
+									<span>Copied</span>
+								{:else}
+									<Copy class="size-3" aria-hidden="true" />
+									<span>Run</span>
+								{/if}
+							</button>
+						</div>
 					</div>
 				{/if}
-				<ModelStarterCode {model} compact />
+				<div>
+					<div class="text-muted-foreground mb-1 text-[10px] font-semibold tracking-wide uppercase">
+						Starter code
+					</div>
+					<ModelStarterCode {model} compact />
+				</div>
 			</div>
 		</Card.Content>
 	</Card.Root>
diff --git a/www/src/routes/models/components/ModelStarterCode.svelte b/www/src/routes/models/components/ModelStarterCode.svelte
index bed526747..70a21c464 100644
--- a/www/src/routes/models/components/ModelStarterCode.svelte
+++ b/www/src/routes/models/components/ModelStarterCode.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Copy, Check, Code2 } from 'lucide-svelte';
+	import { Copy, Check } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import type { GroupedFoundryModel } from '../types';
 	import type { StarterLanguage } from '../model-boilerplate';
@@ -38,8 +38,6 @@
 {#if compact}
 	<!-- Card-mode: one row with language pills + copy button -->
 	<div class="flex items-center gap-2">
-		<Code2 class="text-muted-foreground size-3.5 shrink-0" aria-hidden="true" />
-		<span class="text-muted-foreground text-xs">Code:</span>
 		<div class="flex min-w-0 flex-1 flex-wrap gap-1">
 			{#each STARTER_LANGUAGES as lang}
 				<button

From 17408849fffb935a9c99680f1daa68e78b5017dd Mon Sep 17 00:00:00 2001
From: maanavd <maanavdalal@gmail.com>
Date: Thu, 21 May 2026 17:50:54 -0700
Subject: [PATCH 4/5] fix(www): move 'Show all platforms' toggle inline with
 description

Avoids the toggle overlapping the Run command box when the panel
expands. The link now sits naturally beside the helper copy.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 www/src/routes/models/+page.svelte | 41 ++++++++++--------------------
 1 file changed, 14 insertions(+), 27 deletions(-)

diff --git a/www/src/routes/models/+page.svelte b/www/src/routes/models/+page.svelte
index 4db2549c7..5cccca3ef 100644
--- a/www/src/routes/models/+page.svelte
+++ b/www/src/routes/models/+page.svelte
@@ -524,25 +524,22 @@
 				aria-label="CLI quick test"
 			>
 				<div class="flex flex-col gap-2 lg:flex-row lg:items-center">
-					<div class="flex shrink-0 items-center justify-between gap-2">
-						<div class="flex items-center gap-2">
-							<Terminal class="text-primary size-4" aria-hidden="true" />
-							<div class="leading-tight">
-								<div class="text-sm font-medium">Test with the CLI</div>
-								<div class="text-muted-foreground text-xs">
-									Copy a command, then swap in any model alias.
-								</div>
+					<div class="flex shrink-0 items-center gap-2">
+						<Terminal class="text-primary size-4" aria-hidden="true" />
+						<div class="leading-tight">
+							<div class="text-sm font-medium">Test with the CLI</div>
+							<div class="text-muted-foreground text-xs">
+								Copy a command, then swap in any model alias.{#if detectedOs !== 'other'}
+									<button
+										type="button"
+										class="text-primary hover:text-primary/80 ml-1.5 underline-offset-2 hover:underline"
+										onclick={() => (showAllPlatforms = !showAllPlatforms)}
+									>
+										{showAllPlatforms ? 'Show fewer' : 'Show all platforms'}
+									</button>
+								{/if}
 							</div>
 						</div>
-						{#if detectedOs !== 'other'}
-							<button
-								type="button"
-								class="text-muted-foreground hover:text-foreground text-xs underline-offset-2 hover:underline lg:hidden"
-								onclick={() => (showAllPlatforms = !showAllPlatforms)}
-							>
-								{showAllPlatforms ? 'Hide' : 'All platforms'}
-							</button>
-						{/if}
 					</div>
 
 					<div
@@ -594,16 +591,6 @@
 							{/if}
 						</button>
 					</div>
-
-					{#if detectedOs !== 'other'}
-						<button
-							type="button"
-							class="text-muted-foreground hover:text-foreground hidden shrink-0 text-xs underline-offset-2 hover:underline lg:inline-block"
-							onclick={() => (showAllPlatforms = !showAllPlatforms)}
-						>
-							{showAllPlatforms ? 'Hide other' : 'All platforms'}
-						</button>
-					{/if}
 				</div>
 			</section>
 

From 4d73bd7193d9e97401472e51ecdb943b10dba618 Mon Sep 17 00:00:00 2001
From: maanavd <maanavdalal@gmail.com>
Date: Mon, 8 Jun 2026 13:21:26 -0700
Subject: [PATCH 5/5] fix(www): expose starter-code language selection via
 aria-pressed

Address accessibility review on ModelStarterCode.svelte. The language pill buttons conveyed the active selection only visually, and the modal selector used a partial tab pattern (role=tablist/role=tab/aria-selected) with no tabpanel, aria-controls, or keyboard navigation, which misleads assistive technology.

Switch both the compact card strip and the modal language selector to plain buttons that expose state with aria-pressed; drop the tab-specific roles/attributes. Visuals and behavior are unchanged.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../routes/models/components/ModelStarterCode.svelte   | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/www/src/routes/models/components/ModelStarterCode.svelte b/www/src/routes/models/components/ModelStarterCode.svelte
index 70a21c464..2def51e14 100644
--- a/www/src/routes/models/components/ModelStarterCode.svelte
+++ b/www/src/routes/models/components/ModelStarterCode.svelte
@@ -51,6 +51,7 @@
 						activeLanguage = lang.id;
 					}}
 					aria-label="Select {lang.label}"
+					aria-pressed={activeLanguage === lang.id}
 				>
 					{lang.shortLabel}
 				</button>
@@ -104,16 +105,11 @@
 		</div>
 
 		<!-- Language tabs -->
-		<div
-			class="border-border -mx-1 flex gap-0.5 border-b px-1"
-			role="tablist"
-			aria-label="Starter code language"
-		>
+		<div class="border-border -mx-1 flex gap-0.5 border-b px-1">
 			{#each STARTER_LANGUAGES as lang}
 				<button
 					type="button"
-					role="tab"
-					aria-selected={activeLanguage === lang.id}
+					aria-pressed={activeLanguage === lang.id}
 					class="relative -mb-px rounded-t px-3 py-1.5 text-xs font-medium transition-colors {activeLanguage ===
 					lang.id
 						? 'border-border border-x border-t text-foreground bg-background'