From 2bf37733c09cb5188f6a10652957605f629a265e Mon Sep 17 00:00:00 2001
From: Roomote <roomote@roomote.dev>
Date: Wed, 5 Aug 2026 08:34:08 +0000
Subject: [PATCH] feat(web): add model recommendations callout

---
 .../src/components/settings/SettingsShell.tsx |  3 ++
 .../pages/AutomationsSettingsPage.tsx         | 27 +++++-----------
 .../settings/pages/TaskModelSettingsPage.tsx  | 18 ++++++++++-
 .../system/custom/header-callout.tsx          | 31 +++++++++++++++++++
 .../web/src/components/system/custom/index.ts |  1 +
 .../src/components/system/primitives/icons.ts |  2 ++
 6 files changed, 62 insertions(+), 20 deletions(-)
 create mode 100644 apps/web/src/components/system/custom/header-callout.tsx

diff --git a/apps/web/src/components/settings/SettingsShell.tsx b/apps/web/src/components/settings/SettingsShell.tsx
index 1aad3fcc4..d19dc859c 100644
--- a/apps/web/src/components/settings/SettingsShell.tsx
+++ b/apps/web/src/components/settings/SettingsShell.tsx
@@ -17,12 +17,14 @@ import { PageNavigationShell } from './PageNavigationShell';
 type SettingsShellProps = {
   pageId: SettingsPageId;
   adminOnly?: boolean;
+  headerAction?: ReactNode;
   children: ReactNode;
 };
 
 export function SettingsShell({
   pageId,
   adminOnly = false,
+  headerAction,
   children,
 }: SettingsShellProps) {
   const router = useRouter();
@@ -49,6 +51,7 @@ export function SettingsShell({
       title={navigationItem.title}
       description={navigationItem.description}
       mobileLabel="Settings page"
+      headerAction={headerAction}
       onItemSelect={(value) => {
         const nextItem = accessibleItems.find((item) => item.id === value);
         if (nextItem) {
diff --git a/apps/web/src/components/settings/pages/AutomationsSettingsPage.tsx b/apps/web/src/components/settings/pages/AutomationsSettingsPage.tsx
index 0f28ae353..cbd92552c 100644
--- a/apps/web/src/components/settings/pages/AutomationsSettingsPage.tsx
+++ b/apps/web/src/components/settings/pages/AutomationsSettingsPage.tsx
@@ -10,10 +10,9 @@ import {
   Alert,
   AlertCircle,
   AlertDescription,
-  Button,
-  Lightbulb,
+  BookOpenText,
+  HeaderCallout,
 } from '@/components/system';
-import { BookOpenText } from 'lucide-react';
 
 export function AutomationsSettingsPage() {
   const { isAdmin } = useAuthorizedUser();
@@ -30,22 +29,12 @@ export function AutomationsSettingsPage() {
               Get {PRODUCT_NAME} automatically working on your behalf.
             </p>
           </div>
-          <div className="flex flex-wrap shrink-0 -mt-4 md:mt-3 items-center gap-2 text-sm animate-[enter-down_1s_1_2000ms_backwards]">
-            <Lightbulb className="size-4 shrink-0 text-muted-foreground hidden lg:block" />
-            <div>
-              <span className="mr-1">Unsure how automations can help?</span>
-              <Button asChild variant="link" className="inline" size="sm">
-                <a
-                  href={DOCS_COOKBOOK_URL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <BookOpenText className="hidden md:inline mr-1" />
-                  Explore recipes
-                </a>
-              </Button>
-            </div>
-          </div>
+          <HeaderCallout
+            icon={BookOpenText}
+            text="Unsure how automations can help?"
+            action={DOCS_COOKBOOK_URL}
+            buttonLabel="Explore recipes"
+          />
         </header>
 
         {isAdmin ? (
diff --git a/apps/web/src/components/settings/pages/TaskModelSettingsPage.tsx b/apps/web/src/components/settings/pages/TaskModelSettingsPage.tsx
index 4c51b08d6..0421ddd6e 100644
--- a/apps/web/src/components/settings/pages/TaskModelSettingsPage.tsx
+++ b/apps/web/src/components/settings/pages/TaskModelSettingsPage.tsx
@@ -7,8 +7,11 @@ import { InferenceProviderSection } from '@/components/settings/InferenceProvide
 import { ModelSettingsSection } from '@/components/settings/ModelSettingsSection';
 import { SettingsShell } from '@/components/settings/SettingsShell';
 import { splitInferenceProviders } from '@/components/settings/taskModelProviderSetup';
+import { HeaderCallout, Medal } from '@/components/system';
 import { useTRPC } from '@/trpc/client';
 
+const MODEL_RECOMMENDATIONS_URL = 'https://roomote.dev/evals';
+
 export function TaskModelSettingsPage() {
   const trpc = useTRPC();
   const providerSetupQuery = useQuery(
@@ -18,10 +21,23 @@ export function TaskModelSettingsPage() {
   const { connectedProviders, availableProviders } =
     splitInferenceProviders(providerSetup);
   const modelSectionRef = useRef<HTMLDivElement | null>(null);
+  const recommendationsCallout = (
+    <HeaderCallout
+      icon={Medal}
+      text="Need help picking the best model?"
+      action={MODEL_RECOMMENDATIONS_URL}
+      buttonLabel="View Recs"
+    />
+  );
 
   return (
-    <SettingsShell pageId="models" adminOnly={true}>
+    <SettingsShell
+      pageId="models"
+      adminOnly={true}
+      headerAction={recommendationsCallout}
+    >
       <div className="space-y-6">
+        <div className="md:hidden">{recommendationsCallout}</div>
         <InferenceProviderSection
           providerSetup={providerSetup}
           providerSetupPending={providerSetupQuery.isPending}
diff --git a/apps/web/src/components/system/custom/header-callout.tsx b/apps/web/src/components/system/custom/header-callout.tsx
new file mode 100644
index 000000000..7e6372f8a
--- /dev/null
+++ b/apps/web/src/components/system/custom/header-callout.tsx
@@ -0,0 +1,31 @@
+import { Button } from '../primitives/button';
+import { Lightbulb, type LucideIcon } from '../primitives/icons';
+
+type HeaderCalloutProps = {
+  icon: LucideIcon;
+  text: string;
+  action: string;
+  buttonLabel: string;
+};
+
+export function HeaderCallout({
+  icon: Icon,
+  text,
+  action,
+  buttonLabel,
+}: HeaderCalloutProps) {
+  return (
+    <div className="flex flex-wrap shrink-0 -mt-4 md:mt-3 items-center gap-2 text-sm animate-[enter-down_1s_1_2000ms_backwards]">
+      <Lightbulb className="size-4 shrink-0 text-muted-foreground hidden lg:block" />
+      <div>
+        <span className="mr-1">{text}</span>
+        <Button asChild variant="link" className="inline" size="sm">
+          <a href={action} target="_blank" rel="noopener noreferrer">
+            <Icon className="hidden md:inline mr-1" />
+            {buttonLabel}
+          </a>
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/system/custom/index.ts b/apps/web/src/components/system/custom/index.ts
index 1bfa1d8d1..305eed46e 100644
--- a/apps/web/src/components/system/custom/index.ts
+++ b/apps/web/src/components/system/custom/index.ts
@@ -1,5 +1,6 @@
 export * from './ascii-spinner';
 export * from './cursor-pagination';
+export * from './header-callout';
 export * from './MediaViewer';
 export * from './icons';
 export * from './logos';
diff --git a/apps/web/src/components/system/primitives/icons.ts b/apps/web/src/components/system/primitives/icons.ts
index 1209e6c5d..3010d2a5b 100644
--- a/apps/web/src/components/system/primitives/icons.ts
+++ b/apps/web/src/components/system/primitives/icons.ts
@@ -16,6 +16,7 @@ export {
   ArrowUpFromLine,
   ArrowUpRightIcon,
   AtSignIcon,
+  BookOpenText,
   BookCopy,
   BookMarked,
   Brain,
@@ -117,6 +118,7 @@ export {
   MailIcon,
   Mails,
   Maximize2,
+  Medal,
   Menu,
   Megaphone,
   MessageCircleQuestionMark,