fix(ai): model selector for free users (2063) (#4341)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: ehayes2000

js/app/packages/core/component/AI/component/input/ChatInput.tsx

@@ -1,8 +1,14 @@
 import { useAnalytics } from '@app/component/analytics-context';
+import { useHasPaidAccess } from '@core/auth/license';
 import type { ChatSendInput } from '@core/component/AI/component/input/buildRequest';
 import { ModelSelector } from '@core/component/AI/component/input/ModelSelector';
+import {
+  defaultModelForPlan,
+  FREE_MODELS,
+  PAID_MODELS,
+} from '@core/component/AI/constant';
 import { useChatInputContext } from '@core/component/AI/context';
-import { Model, type ToolSet } from '@core/component/AI/types';
+import type { Model, ToolSet } from '@core/component/AI/types';
 import type { EditorConfigBuilder } from '@core/component/LexicalMarkdown/builder/MarkdownConfigBuilder';
 import { MarkdownShell } from '@core/component/LexicalMarkdown/builder/MarkdownShell';
 import { toast } from '@core/component/Toast/Toast';
@@ -48,20 +54,26 @@ export function ChatInput(props: ChatInputComponentProps) {
   const model = input.model;
   const generating = input.isGenerating;
   const { showPaywall } = usePaywallState();
+  const hasPaidAccess = useHasPaidAccess();
 
-  // Every model is offered in the picker; the backend enforces plan
-  // entitlements on send (a free user picking a pro model is rejected there).
+  // Free and paid users see different selector lists. Free users get only the
+  // free models (Haiku); premium models aren't shown at all. The 403 -> paywall
+  // path is the backstop for anything that slips through to the backend.
   const modelOptions = createMemo(() =>
-    Object.values(Model).map((id) => ({ id, available: true }))
+    (hasPaidAccess() ? PAID_MODELS : FREE_MODELS).map((id) => ({
+      id,
+      available: true,
+    }))
   );
 
-  // If the selected model isn't a known id (e.g. a stale persisted value),
-  // fall back to the first one so we never send something unroutable.
+  // Keep the selected model valid for the current plan: if it isn't a known id
+  // (e.g. a stale persisted value) or isn't available to this user (e.g. a free
+  // user defaulted to Opus), fall back to the plan default so we never send
+  // something unroutable or something the backend rejects.
   createEffect(() => {
     const options = modelOptions();
-    if (options.some((o) => o.id === model())) return;
-    const [first] = options;
-    if (first) input.setModel(first.id);
+    if (options.some((o) => o.id === model() && o.available)) return;
+    input.setModel(defaultModelForPlan(hasPaidAccess()));
   });
 
   let containerRef!: HTMLDivElement;

js/app/packages/core/component/AI/constant/model.ts

@@ -41,4 +41,33 @@ export const MODEL_PROVIDER_ICON: ExhaustiveMap = {
   'openai/gpt-5-mini': OpenAiIcon,
 };
 
+/** Default model for paid users. */
 export const DEFAULT_MODEL: TModel = Model.opus48;
+
+/**
+ * Default model for free users. Free users aren't entitled to the premium
+ * "smart" models (which the backend rejects with a 403), so they start on the
+ * fast model instead of Opus.
+ */
+export const FREE_DEFAULT_MODEL: TModel = Model.haiku45;
+
+/** Models a paid user may select — the full set. */
+export const PAID_MODELS: readonly TModel[] = Object.values(Model);
+
+/**
+ * Models a free user may select. Free users only get the fast model
+ * (`FREE_DEFAULT_MODEL`); every other model is paid-only and shows locked in
+ * the selector, where selecting one opens the paywall instead of being sent
+ * and rejected by the backend.
+ */
+export const FREE_MODELS: readonly TModel[] = [FREE_DEFAULT_MODEL];
+
+/** The default model for a user given their paid entitlement. */
+export function defaultModelForPlan(hasPaidAccess: boolean): TModel {
+  return hasPaidAccess ? DEFAULT_MODEL : FREE_DEFAULT_MODEL;
+}
+
+/** The selectable models for a user given their paid entitlement. */
+export function modelsForPlan(hasPaidAccess: boolean): readonly TModel[] {
+  return hasPaidAccess ? PAID_MODELS : FREE_MODELS;
+}

js/app/packages/core/util/handlePaymentError.test.ts

@@ -0,0 +1,47 @@
+import { err, ok } from 'neverthrow';
+import { describe, expect, it } from 'vitest';
+import { isPaymentError } from './handlePaymentError';
+
+describe('isPaymentError', () => {
+  it('returns false for a success result', () => {
+    expect(isPaymentError(ok({ value: 1 }))).toBe(false);
+  });
+
+  it('detects a FORBIDDEN (403) error', () => {
+    expect(
+      isPaymentError(err([{ code: 'FORBIDDEN', message: 'Forbidden' }]))
+    ).toBe(true);
+  });
+
+  it('detects a 403 reported as HTTP_ERROR in the message', () => {
+    expect(
+      isPaymentError(
+        err([{ code: 'HTTP_ERROR', message: 'HTTP error! status: 403' }])
+      )
+    ).toBe(true);
+  });
+
+  it('detects a 402 / payment_required reported as HTTP_ERROR', () => {
+    expect(
+      isPaymentError(
+        err([{ code: 'HTTP_ERROR', message: 'HTTP error! status: 402' }])
+      )
+    ).toBe(true);
+    expect(
+      isPaymentError(err([{ code: 'HTTP_ERROR', message: 'payment_required' }]))
+    ).toBe(true);
+  });
+
+  it('ignores unrelated errors', () => {
+    expect(
+      isPaymentError(
+        err([{ code: 'NOT_FOUND', message: 'Resource not found' }])
+      )
+    ).toBe(false);
+    expect(
+      isPaymentError(
+        err([{ code: 'HTTP_ERROR', message: 'HTTP error! status: 500' }])
+      )
+    ).toBe(false);
+  });
+});

js/app/packages/core/util/handlePaymentError.ts

@@ -8,19 +8,21 @@ export function isPaymentError<T>(
     return false;
   }
 
-  if (
-    result.isErr() &&
-    result.error.some((error) => error.code === 'HTTP_ERROR')
-  ) {
-    const errorMessage = result.error[0].message;
-    if (
-      errorMessage.includes('402') ||
-      errorMessage.includes('payment_required') ||
-      errorMessage.includes('403')
-    ) {
+  // A 403 (entitlement) or 402 (payment required) means the user isn't allowed
+  // to do this on their plan — always surface the paywall. 403s come through as
+  // a `FORBIDDEN` code; older paths may still report them as `HTTP_ERROR` with
+  // the status/reason in the message, so check both.
+  return result.error.some((error) => {
+    if (error.code === 'FORBIDDEN') {
       return true;
     }
-  }
-
-  return false;
+    if (error.code === 'HTTP_ERROR') {
+      return (
+        error.message.includes('402') ||
+        error.message.includes('payment_required') ||
+        error.message.includes('403')
+      );
+    }
+    return false;
+  });
 }

js/app/packages/service-clients/service-auth/fetch.ts

@@ -106,6 +106,11 @@ export async function fetchWithAuth<
           code: 'UNAUTHORIZED',
           message: 'Unauthorized access',
         };
+      case 403:
+        return {
+          code: 'FORBIDDEN',
+          message: 'Forbidden',
+        };
       case 409:
         return {
           code: 'CONFLICT',