fix(models): leave evaluation models out of prompt tools; landing page structure

- Context windows, the pricing tools, and comparisons skip evaluation-only models (native state and questions, not prompts)
- Token counter labels an OpenAI count as an estimate when exact encoding fails
- New model pages: desktop-first breakpoints, named props interfaces, section ids and labels, sr-only hero summaries; TSDoc on exported comparison helpers

Author: waleedlatif1

apps/sim/app/(landing)/models/(shell)/[provider]/[model]/page.tsx

@@ -282,7 +282,7 @@ export default async function ModelPage({
                 <nav aria-labelledby='model-comparisons-heading' className='px-6 py-10'>
                   <h2
                     id='model-comparisons-heading'
-                    className='mb-6 text-[20px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[24px]'
+                    className='mb-6 text-[24px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] max-lg:text-[20px]'
                   >
                     Compare {model.displayName}
                   </h2>

apps/sim/app/(landing)/models/(shell)/compare/[pair]/page.tsx

@@ -49,11 +49,11 @@ export async function generateStaticParams() {
   return MODEL_COMPARISONS.map((comparison) => ({ pair: comparison.slug }))
 }
 
-export async function generateMetadata({
-  params,
-}: {
+interface ModelComparisonPageProps {
   params: Promise<{ pair: string }>
-}): Promise<Metadata> {
+}
+
+export async function generateMetadata({ params }: ModelComparisonPageProps): Promise<Metadata> {
   const { pair } = await params
   const comparison = getModelComparisonBySlug(pair)
 
@@ -95,11 +95,7 @@ export async function generateMetadata({
   }
 }
 
-export default async function ModelComparisonPage({
-  params,
-}: {
-  params: Promise<{ pair: string }>
-}) {
+export default async function ModelComparisonPage({ params }: ModelComparisonPageProps) {
   const { pair } = await params
   const comparison = getModelComparisonBySlug(pair)
 
@@ -181,8 +177,18 @@ export default async function ModelComparisonPage({
       <JsonLd data={itemListJsonLd} />
       <JsonLd data={faqJsonLd} />
 
-      <section className='bg-[var(--bg)]'>
+      <section
+        id='model-comparison'
+        aria-labelledby='comparison-heading'
+        className='bg-[var(--bg)]'
+      >
         <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
+          <p className='sr-only'>
+            Sim is the open-source AI workspace where teams build, deploy, and manage AI agents.
+            This page compares {a.model.displayName} and {b.model.displayName} on API pricing per 1M
+            tokens, context window, max output, and capabilities. Both models are available in the
+            Sim Agent block, and each Agent block in a Sim agent can use a different model.
+          </p>
           <div className='mb-6'>
             <BackLink href='/models' label='Back to Models' />
           </div>
@@ -206,7 +212,7 @@ export default async function ModelComparisonPage({
               </p>
               <h1
                 id='comparison-heading'
-                className='text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] sm:text-[36px] lg:text-[44px]'
+                className='text-[44px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] max-sm:text-[28px] max-lg:text-[36px]'
               >
                 {comparison.title}
               </h1>
@@ -236,11 +242,11 @@ export default async function ModelComparisonPage({
 
         <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
           <div className='border-[var(--border)] border-x'>
-            <section aria-labelledby='comparison-specs-heading'>
+            <section id='comparison-specs' aria-labelledby='comparison-specs-heading'>
               <div className='px-6 pt-10 pb-4'>
                 <h2
                   id='comparison-specs-heading'
-                  className='mb-2 text-[20px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[24px]'
+                  className='mb-2 text-[24px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] max-lg:text-[20px]'
                 >
                   Pricing, context window, and capabilities
                 </h2>
@@ -257,10 +263,14 @@ export default async function ModelComparisonPage({
 
             <div className='h-px w-full bg-[var(--border)]' />
 
-            <section aria-labelledby='comparison-build-heading' className='px-6 py-10'>
+            <section
+              id='comparison-build'
+              aria-labelledby='comparison-build-heading'
+              className='px-6 py-10'
+            >
               <h2
                 id='comparison-build-heading'
-                className='mb-2 text-[20px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[24px]'
+                className='mb-2 text-[24px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] max-lg:text-[20px]'
               >
                 Use {a.model.displayName} or {b.model.displayName} in a Sim agent
               </h2>
@@ -297,7 +307,7 @@ export default async function ModelComparisonPage({
                 <nav aria-labelledby='related-comparisons-heading' className='px-6 py-10'>
                   <h2
                     id='related-comparisons-heading'
-                    className='mb-6 text-[20px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[24px]'
+                    className='mb-6 text-[24px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] max-lg:text-[20px]'
                   >
                     Related comparisons
                   </h2>
@@ -308,10 +318,14 @@ export default async function ModelComparisonPage({
 
             <div className='h-px w-full bg-[var(--border)]' />
 
-            <section aria-labelledby='comparison-faq-heading' className='px-6 py-10'>
+            <section
+              id='comparison-faq'
+              aria-labelledby='comparison-faq-heading'
+              className='px-6 py-10'
+            >
               <h2
                 id='comparison-faq-heading'
-                className='mb-8 text-[20px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[24px]'
+                className='mb-8 text-[24px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] max-lg:text-[20px]'
               >
                 Frequently asked questions
               </h2>

apps/sim/app/(landing)/models/(shell)/context-windows/page.tsx

@@ -117,15 +117,26 @@ export default function ContextWindowsPage() {
       <JsonLd data={itemListJsonLd} />
       <JsonLd data={faqJsonLd} />
 
-      <section className='bg-[var(--bg)]'>
+      <section
+        id='context-windows'
+        aria-labelledby='context-windows-heading'
+        className='bg-[var(--bg)]'
+      >
         <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
+          <p className='sr-only'>
+            Sim is the open-source AI workspace where teams build, deploy, and manage AI agents.
+            This page ranks the context windows and max output tokens of{' '}
+            {CONTEXT_WINDOW_MODELS.length} models from {CONTEXT_WINDOW_PROVIDER_COUNT} providers,
+            including Claude, GPT, Gemini, and Grok, with API prices per 1M tokens. Every model
+            listed is available in the Sim Agent block.
+          </p>
           <div className='mb-6'>
             <BackLink href='/models' label='Back to Models' />
           </div>
 
           <h1
             id='context-windows-heading'
-            className='mb-6 text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'
+            className='mb-6 text-[40px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] max-lg:text-[28px]'
           >
             LLM context window comparison
           </h1>
@@ -145,11 +156,11 @@ export default function ContextWindowsPage() {
 
         <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
           <div className='border-[var(--border)] border-x'>
-            <section aria-labelledby='largest-by-provider-heading'>
+            <section id='largest-by-provider' aria-labelledby='largest-by-provider-heading'>
               <div className='px-6 pt-10 pb-4'>
                 <h2
                   id='largest-by-provider-heading'
-                  className='mb-2 text-[20px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[24px]'
+                  className='mb-2 text-[24px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] max-lg:text-[20px]'
                 >
                   Largest context window by provider
                 </h2>
@@ -175,11 +186,11 @@ export default function ContextWindowsPage() {
 
             <div className='h-px w-full bg-[var(--border)]' />
 
-            <section aria-labelledby='all-context-windows-heading'>
+            <section id='all-context-windows' aria-labelledby='all-context-windows-heading'>
               <div className='px-6 pt-10 pb-4'>
                 <h2
                   id='all-context-windows-heading'
-                  className='mb-2 text-[20px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[24px]'
+                  className='mb-2 text-[24px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] max-lg:text-[20px]'
                 >
                   Every model by context window
                 </h2>
@@ -193,10 +204,14 @@ export default function ContextWindowsPage() {
 
             <div className='h-px w-full bg-[var(--border)]' />
 
-            <section aria-labelledby='context-windows-faq-heading' className='px-6 py-10'>
+            <section
+              id='context-windows-faq'
+              aria-labelledby='context-windows-faq-heading'
+              className='px-6 py-10'
+            >
               <h2
                 id='context-windows-faq-heading'
-                className='mb-8 text-[20px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[24px]'
+                className='mb-8 text-[24px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] max-lg:text-[20px]'
               >
                 Frequently asked questions
               </h2>

apps/sim/app/(landing)/models/(shell)/page.tsx

@@ -228,7 +228,7 @@ export default async function ModelsPage({
               </>
             )}
 
-            <nav aria-label='Free tools' className='flex flex-col sm:flex-row'>
+            <nav aria-label='Free tools' className='flex max-sm:flex-col'>
               {Object.values(MODEL_TOOLS).map((tool) => (
                 <ModelToolLink
                   key={tool.href}
@@ -244,10 +244,14 @@ export default async function ModelsPage({
 
             <div className='h-px w-full bg-[var(--border)]' />
 
-            <section aria-labelledby='head-to-head-heading' className='px-6 py-10'>
+            <section
+              id='head-to-head'
+              aria-labelledby='head-to-head-heading'
+              className='px-6 py-10'
+            >
               <h2
                 id='head-to-head-heading'
-                className='mb-2 text-[20px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[24px]'
+                className='mb-2 text-[24px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] max-lg:text-[20px]'
               >
                 Head-to-head comparisons
               </h2>

apps/sim/app/(landing)/models/(shell)/pricing-calculator/page.tsx

@@ -112,11 +112,11 @@ export async function generateMetadata(): Promise<Metadata> {
   }
 }
 
-export default async function PricingCalculatorPage({
-  searchParams,
-}: {
+interface PricingCalculatorPageProps {
   searchParams: Promise<SearchParams>
-}) {
+}
+
+export default async function PricingCalculatorPage({ searchParams }: PricingCalculatorPageProps) {
   await pricingCalculatorSearchParamsCache.parse(searchParams)
 
   const breadcrumbJsonLd = {
@@ -167,8 +167,19 @@ export default async function PricingCalculatorPage({
       <JsonLd data={applicationJsonLd} />
       <JsonLd data={faqJsonLd} />
 
-      <section className='bg-[var(--bg)]' aria-labelledby='pricing-calculator-heading'>
+      <section
+        id='pricing-calculator'
+        aria-labelledby='pricing-calculator-heading'
+        className='bg-[var(--bg)]'
+      >
         <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER, 'pt-[112px] max-sm:pt-20')}>
+          <p className='sr-only'>
+            Sim is the open-source AI workspace where teams build, deploy, and manage AI agents. The
+            free Sim LLM API pricing calculator estimates cost per request, per day, and per month
+            for {TOOL_MODELS.length} OpenAI, Anthropic Claude, Google Gemini, and other models,
+            using the same rates and long-context tier rules Sim uses to cost model calls in its
+            execution logs.
+          </p>
           <div className='mb-6'>
             <BackLink href='/models' label='Back to models' />
           </div>
@@ -177,7 +188,7 @@ export default async function PricingCalculatorPage({
           </p>
           <h1
             id='pricing-calculator-heading'
-            className='text-balance text-[28px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[40px]'
+            className='text-balance text-[40px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] max-lg:text-[28px]'
           >
             LLM API pricing calculator
           </h1>
@@ -203,10 +214,14 @@ export default async function PricingCalculatorPage({
 
             <div className='h-px w-full bg-[var(--border)]' />
 
-            <section aria-labelledby='cost-drivers-heading' className='px-6 py-10'>
+            <section
+              id='cost-drivers'
+              aria-labelledby='cost-drivers-heading'
+              className='px-6 py-10'
+            >
               <h2
                 id='cost-drivers-heading'
-                className='mb-3 text-[20px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[24px]'
+                className='mb-3 text-[24px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] max-lg:text-[20px]'
               >
                 What drives LLM API cost
               </h2>
@@ -227,7 +242,7 @@ export default async function PricingCalculatorPage({
 
             <div className='h-px w-full bg-[var(--border)]' />
 
-            <nav aria-label='Related resources' className='flex flex-col sm:flex-row'>
+            <nav aria-label='Related resources' className='flex max-sm:flex-col'>
               <ModelToolLink
                 href={MODEL_TOOLS.tokenCounter.href}
                 title={MODEL_TOOLS.tokenCounter.name}
@@ -247,10 +262,10 @@ export default async function PricingCalculatorPage({
 
             <div className='h-px w-full bg-[var(--border)]' />
 
-            <section aria-labelledby='faq-heading' className='px-6 py-10'>
+            <section id='faq' aria-labelledby='faq-heading' className='px-6 py-10'>
               <h2
                 id='faq-heading'
-                className='mb-8 text-[20px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] lg:text-[24px]'
+                className='mb-8 text-[24px] text-[var(--text-primary)] leading-[100%] tracking-[-0.02em] max-lg:text-[20px]'
               >
                 Frequently asked questions
               </h2>

apps/sim/app/(landing)/models/(shell)/token-counter/components/token-counter/token-counter.tsx

@@ -47,22 +47,25 @@ export function TokenCounter() {
   const selectedModels = useMemo(() => resolveToolModels(modelIds), [modelIds])
 
   const rows = useMemo(() => {
-    const exactCountByEncoding = new Map<string, number>()
+    const exactCountByEncoding = new Map<string, number | null>()
     const countExact = (activeTokenizer: AccurateTokenizer, modelId: string) => {
       const encodingName = activeTokenizer.resolveEncodingName(modelId)
-      let count = exactCountByEncoding.get(encodingName)
-      if (count === undefined) {
-        count = activeTokenizer.getAccurateTokenCount(deferredText, modelId)
-        exactCountByEncoding.set(encodingName, count)
+      if (!exactCountByEncoding.has(encodingName)) {
+        exactCountByEncoding.set(
+          encodingName,
+          activeTokenizer.getExactTokenCount(deferredText, modelId)
+        )
       }
-      return count
+      return exactCountByEncoding.get(encodingName) ?? null
     }
 
     return selectedModels.map((model) => {
-      const exact = tokenizer !== null && EXACT_TOKENIZER_PROVIDER_IDS.has(model.providerId)
-      const tokens = exact
-        ? countExact(tokenizer, model.id)
-        : estimateTokenCount(deferredText, model.providerId).count
+      const exactTokens =
+        tokenizer !== null && EXACT_TOKENIZER_PROVIDER_IDS.has(model.providerId)
+          ? countExact(tokenizer, model.id)
+          : null
+      const exact = exactTokens !== null
+      const tokens = exactTokens ?? estimateTokenCount(deferredText, model.providerId).count
       const inputCost = priceTokenUsage(model.pricing, { input: tokens, output: 0 }).total
       return { model, exact, tokens, inputCost }
     })