chore: generate

packages/stats/app/src/routes/[lab]/index.tsx

@@ -144,7 +144,11 @@ export default function StatsLab() {
                   <LabOverview lab={data()} data={stats() ?? null} />
                   <LabUsageSection lab={data()} data={stats() ?? null} />
                   <LabModelsSection lab={data()} usage={stats()?.models ?? []} />
-                  <LabRelatedSection lab={data()} labs={catalog()?.labs ?? []} market={homeStats()?.market["2M"] ?? []} />
+                  <LabRelatedSection
+                    lab={data()}
+                    labs={catalog()?.labs ?? []}
+                    market={homeStats()?.market["2M"] ?? []}
+                  />
                 </>
               )}
             </Show>
@@ -338,11 +342,7 @@ function LabUsageSection(props: { lab: ModelCatalogLab; data: StatsLabData | nul
 
   return (
     <section id="usage" data-section="model-panel">
-      <SectionHeading
+      <SectionHeading href="#usage" title={i18n.t("nav.usage")} description={i18n.t("lab.usageDescription")} />
-        href="#usage"
-        title={i18n.t("nav.usage")}
-        description={i18n.t("lab.usageDescription")}
-      />
       <Show
         when={usage().some((item) => item.tokens > 0)}
         fallback={<LabEmptyState title={i18n.t("lab.noUsageTitle")} description={i18n.t("lab.noUsageDescription")} />}
@@ -370,10 +370,7 @@ function LabUsageSection(props: { lab: ModelCatalogLab; data: StatsLabData | nul
                     preserveAspectRatio="none"
                     aria-hidden="true"
                   >
-                    <Show
+                    <Show when={activeLineBreak()} fallback={<path data-slot="lab-usage-line-base" d={path()} />}>
-                      when={activeLineBreak()}
-                      fallback={<path data-slot="lab-usage-line-base" d={path()} />}
-                    >
                       {(lineBreak) => (
                         <>
                           <defs>
@@ -509,7 +506,11 @@ function LabModelsSection(props: { lab: ModelCatalogLab; usage: LabUsageModelEnt
         </button>
       </div>
       <div data-slot="lab-model-pattern" aria-hidden="true" />
-      <div data-component="lab-model-table" role="table" aria-label={i18n.t("lab.modelsTitle", { lab: props.lab.name })}>
+      <div
+        data-component="lab-model-table"
+        role="table"
+        aria-label={i18n.t("lab.modelsTitle", { lab: props.lab.name })}
+      >
         <div data-slot="lab-model-table-track">
           <div data-slot="lab-model-table-head" role="row">
             <span data-column="model" role="columnheader">
@@ -533,11 +534,7 @@ function LabModelsSection(props: { lab: ModelCatalogLab; usage: LabUsageModelEnt
           </div>
           <For each={props.lab.models}>
             {(model) => (
-              <LabModelRow
+              <LabModelRow model={model} usage={usageBySlug().get(model.slug)} onTooltipChange={setActiveTooltip} />
-                model={model}
-                usage={usageBySlug().get(model.slug)}
-                onTooltipChange={setActiveTooltip}
-              />
             )}
           </For>
         </div>
@@ -635,9 +632,7 @@ function LabModelTooltip(props: { state: LabModelTooltipState }) {
           </span>
           <strong>{props.state.model.name}</strong>
         </div>
-        <p>
+        <p>{props.state.model.description ?? "Recent OpenCode Go usage, share, context, and output limits."}</p>
-          {props.state.model.description ?? "Recent OpenCode Go usage, share, context, and output limits."}
-        </p>
       </div>
       <div data-slot="tooltip-divider" />
       <div data-slot="lab-model-tooltip-metrics">
@@ -668,9 +663,7 @@ function LabRelatedSection(props: { lab: ModelCatalogLab; labs: ModelCatalogLab[
     <section id="related-labs" data-section="model-panel" data-variant="lab-related">
       <SectionHeading href="#related-labs" title="Related labs" description="Explore more." />
       <div data-component="lab-related-list">
-        <For each={related()}>
+        <For each={related()}>{(entry) => <LabRelatedCard entry={entry} />}</For>
-          {(entry) => <LabRelatedCard entry={entry} />}
-        </For>
       </div>
     </section>
   )

packages/stats/app/src/routes/index.css

@@ -3827,15 +3827,24 @@
   background: var(--stats-bar-idle);
 }
 
-[data-page="stats"] [data-component="lab-related-card"][data-tone="high"] [data-slot="lab-related-usage"] b[data-active="true"] {
+[data-page="stats"]
+  [data-component="lab-related-card"][data-tone="high"]
+  [data-slot="lab-related-usage"]
+  b[data-active="true"] {
   background: #198b43;
 }
 
-[data-page="stats"] [data-component="lab-related-card"][data-tone="mid"] [data-slot="lab-related-usage"] b[data-active="true"] {
+[data-page="stats"]
+  [data-component="lab-related-card"][data-tone="mid"]
+  [data-slot="lab-related-usage"]
+  b[data-active="true"] {
   background: #d69a00;
 }
 
-[data-page="stats"] [data-component="lab-related-card"][data-tone="low"] [data-slot="lab-related-usage"] b[data-active="true"] {
+[data-page="stats"]
+  [data-component="lab-related-card"][data-tone="low"]
+  [data-slot="lab-related-usage"]
+  b[data-active="true"] {
   background: #b82d35;
 }