fix: restore componentized download options styling

The parent had been overwritten with a pre-componentization version,
dropping the shared quant toggles, the download button/command
components and the section's frosted surface styling. Restores the
componentized version and merges the manual refinements into the child
components: primary-tinted quant selects, taller CTA with press scale,
command box accent bar with an absolutely positioned copy button.

Assisted-by: pi:GLM-5.3-Flash

tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptions.svelte

@@ -237,7 +237,9 @@
 	);
 
 	/** True when the picked draft is the shared (target-borrowing) variant. */
-	let draftShared = $derived(draftEntry ? (HuggingFaceService.extractQuantMeta(draftEntry.path)?.shared ?? false) : false);
+	let draftShared = $derived(
+		draftEntry ? (HuggingFaceService.extractQuantMeta(draftEntry.path)?.shared ?? false) : false
+	);
 
 	// LLAMA-APP-REUSE: --spec-type value for each draft sidecar
 	const SPEC_TYPE: Record<ModelSidecar, string> = {
@@ -344,7 +346,9 @@
 	 */
 	let downloadLabel = $derived.by(() => {
 		const main = mainEntry ?? commandMain;
-		const draftLabel = draftSidecar ? `${draftSidecar.toUpperCase()}${draftShared ? ' shared' : ''}` : undefined;
+		const draftLabel = draftSidecar
+			? `${draftSidecar.toUpperCase()}${draftShared ? ' shared' : ''}`
+			: undefined;
 
 		let label = 'Download';
 

tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsDownloadButton.svelte

@@ -11,7 +11,11 @@
 	let { label, disabled, onclick }: Props = $props();
 </script>
 
-<Button class="w-full transition-transform active:scale-[0.98]" {disabled} {onclick}>
+<Button
+	class="h-10 w-full rounded-lg transition-transform active:scale-[0.97]"
+	{disabled}
+	{onclick}
+>
 	<Download class="h-4 w-4" />
 
 	{label}

tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand.svelte

@@ -51,9 +51,16 @@
 </script>
 
 <div
-	class="flex items-center gap-2 overflow-hidden rounded-md border border-border/40 bg-background py-2 pr-2 pl-3 shadow-xs dark:border-border/35 dark:bg-background/50"
+	class="relative flex items-center gap-2 overflow-hidden rounded-lg border border-border/40 bg-background py-2.5 pl-4 pr-10 shadow-xs dark:border-border/35 dark:bg-background/50"
 >
-	<span aria-hidden="true" class="shrink-0 font-mono text-xs text-muted-foreground/50">$</span>
+	<div
+		aria-hidden="true"
+		class="pointer-events-none absolute inset-y-0 left-0 w-px bg-primary/20"
+	></div>
+
+	<span aria-hidden="true" class="shrink-0 select-none font-mono text-xs text-muted-foreground/40"
+		>$</span
+	>
 
 	<!-- Single line: long commands scroll horizontally instead of wrapping. -->
 	<div
@@ -112,7 +119,7 @@
 
 	<button
 		aria-label="Copy command"
-		class="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-accent/60 hover:text-foreground"
+		class="absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-primary/10 hover:text-foreground"
 		onclick={copy}
 		type="button"
 	>

tools/ui/src/lib/components/app/models/discover/download-options.utils.ts

@@ -48,4 +48,4 @@ export function labelFor(path: string): string {
 // to its widest option, so an exactly-as-wide value would otherwise let the
 // chevron overlap the text (draft selects are all same-width quants).
 export const SELECT_CLASS =
-	'h-7 min-w-18 max-w-40 shrink-0 cursor-pointer rounded-md border border-input bg-transparent py-0 pr-3 pl-2 font-mono text-xs outline-none transition-colors hover:bg-accent/40 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]';
+	'h-6 min-w-18 max-w-40 shrink-0 cursor-pointer rounded border border-primary/15 bg-primary/[0.07] py-0 pr-3 pl-2 font-mono text-xs text-foreground outline-none transition-colors hover:bg-primary/15 focus-visible:border-primary/40 focus-visible:ring-0';