add started sandboxes count

Author: drankou

src/features/dashboard/templates/detail/overview/index.tsx

@@ -3,6 +3,7 @@
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { useTRPC } from '@/trpc/client'
 import { LatestBuildSection } from './latest-build-section'
+import { SandboxesStartedSection } from './sandboxes-started-section'
 import { TemplateSection } from './template-section'
 
 interface TemplateOverviewProps {
@@ -26,6 +27,7 @@ export default function TemplateOverview({
     <div className="flex flex-col gap-8">
       <TemplateSection template={template} teamSlug={teamSlug} />
       <LatestBuildSection templateId={templateId} teamSlug={teamSlug} />
+      <SandboxesStartedSection spawnCount={template.spawnCount} />
     </div>
   )
 }

src/features/dashboard/templates/detail/overview/sandboxes-started-section.tsx

@@ -0,0 +1,18 @@
+import { formatNumber } from '@/lib/utils/formatting'
+import { OverviewSection } from './section'
+
+interface SandboxesStartedSectionProps {
+  spawnCount: number
+}
+
+export function SandboxesStartedSection({
+  spawnCount,
+}: SandboxesStartedSectionProps) {
+  return (
+    <OverviewSection label="Sandboxes started">
+      <span className="prose-value-big font-mono uppercase text-fg whitespace-nowrap">
+        {formatNumber(spawnCount)}
+      </span>
+    </OverviewSection>
+  )
+}

src/features/dashboard/templates/detail/overview/section.tsx

@@ -25,7 +25,7 @@ export function OverviewSection({
       )}
     >
       <div className="flex items-center gap-2">
-        <span className="text-fg-tertiary prose-label uppercase">{label}</span>
+        <span className="text-fg prose-label-highlight uppercase">{label}</span>
         {labelBadge}
       </div>
       <div className="flex flex-col gap-3">{children}</div>

src/features/dashboard/templates/detail/overview/skeleton.tsx

@@ -19,6 +19,10 @@ export function TemplateOverviewSkeleton() {
         </div>
         <Skeleton className="h-5 w-80 mt-2 max-w-full" />
       </OverviewSection>
+
+      <OverviewSection label="Sandboxes started">
+        <Skeleton className="h-8 w-20" />
+      </OverviewSection>
     </div>
   )
 }

src/features/dashboard/templates/detail/overview/template-specs.tsx

@@ -1,9 +1,9 @@
 import { formatNumber } from '@/lib/utils/formatting'
 import { cn } from '@/lib/utils/ui'
 import {
-  CodeChevronIcon,
   CpuIcon,
   MemoryIcon,
+  MetadataIcon,
   StorageIcon,
 } from '@/ui/primitives/icons'
 
@@ -54,7 +54,7 @@ export function TemplateSpecs({ build, className }: TemplateSpecsProps) {
       {build.envdVersion && (
         <>
           <Separator />
-          <SpecItem icon={<CodeChevronIcon className="size-3.5" />}>
+          <SpecItem icon={<MetadataIcon className="size-3.5" />}>
             <span className="prose-body-numeric-highlight font-mono">
               {build.envdVersion}
             </span>