fix: Update tetrate signup step (#6324)

2026-07-03 14:10:03 +02:00 · 2026-01-05 15:27:55 +11:00
parent 4aa6a176ea
commit 5027164e35
3 changed files with 125 additions and 54 deletions
@@ -325,6 +325,7 @@
      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.5",
@@ -694,6 +695,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=18"
      },
@@ -737,6 +739,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=18"
      }
@@ -1176,6 +1179,7 @@
      "integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "chalk": "^4.1.1",
        "fs-extra": "^9.0.1",
@@ -2724,6 +2728,7 @@
      "integrity": "sha512-yl43JD/86CIj3Mz5mvvLJqAOfIup7ncxfJ0Btnl0/v5TouVUyeEdcpknfgc+yMevS/48oH9WAkkw93m7otLb/A==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@inquirer/checkbox": "^3.0.1",
        "@inquirer/confirm": "^4.0.1",
@@ -6128,8 +6133,7 @@
      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/@types/babel__core": {
      "version": "7.20.5",
@@ -6417,6 +6421,7 @@
      "integrity": "sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "undici-types": "~7.16.0"
      }
@@ -6458,6 +6463,7 @@
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "csstype": "^3.2.2"
      }
@@ -6468,6 +6474,7 @@
      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
      "devOptional": true,
      "license": "MIT",
+      "peer": true,
      "peerDependencies": {
        "@types/react": "^19.2.0"
      }
@@ -6602,6 +6609,7 @@
      "integrity": "sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.48.1",
        "@typescript-eslint/types": "8.48.1",
@@ -6997,6 +7005,7 @@
      "integrity": "sha512-sxSyJMaKp45zI0u+lHrPuZM1ZJQ8FaVD35k+UxVrha1yyvQ+TZuUYllUixwvQXlB7ixoDc7skf3lQPopZIvaQw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@vitest/utils": "4.0.15",
        "fflate": "^0.8.2",
@@ -7245,6 +7254,7 @@
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -7889,6 +7899,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.8.19",
        "caniuse-lite": "^1.0.30001751",
@@ -9176,8 +9187,7 @@
      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/dom-helpers": {
      "version": "5.2.1",
@@ -9235,6 +9245,7 @@
      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@electron/get": "^2.0.0",
        "@types/node": "^22.7.7",
@@ -10249,6 +10260,7 @@
      "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -10708,6 +10720,7 @@
      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "accepts": "^2.0.0",
        "body-parser": "^2.2.1",
@@ -13004,6 +13017,7 @@
      "integrity": "sha512-454TI39PeRDW1LgpyLPyURtB4Zx1tklSr6+OFOipsxGUH1WMTvk6C65JQdrj455+DP2uJ1+veBEHTGFKWVLFoA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@acemir/cssom": "^0.9.23",
        "@asamuzakjp/dom-selector": "^6.7.4",
@@ -14247,7 +14261,6 @@
      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "bin": {
        "lz-string": "bin/bin.js"
      }
@@ -14268,6 +14281,7 @@
      "integrity": "sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/parser": "^7.28.5",
        "@babel/types": "^7.28.5",
@@ -16647,6 +16661,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -16748,7 +16763,6 @@
      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "ansi-regex": "^5.0.1",
        "ansi-styles": "^5.0.0",
@@ -16764,7 +16778,6 @@
      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=10"
      },
@@ -17120,6 +17133,7 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -17129,6 +17143,7 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
      "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@@ -17150,8 +17165,7 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/react-markdown": {
      "version": "10.1.0",
@@ -18132,6 +18146,7 @@
      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.3",
        "fast-uri": "^3.0.1",
@@ -19058,7 +19073,8 @@
      "version": "4.1.17",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
      "integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/tailwindcss-animate": {
      "version": "1.0.7",
@@ -19588,6 +19604,7 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "dev": true,
      "license": "Apache-2.0",
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -20002,6 +20019,7 @@
      "integrity": "sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "esbuild": "^0.25.0",
        "fdir": "^6.5.0",
@@ -20092,6 +20110,7 @@
      "integrity": "sha512-n1RxDp8UJm6N0IbJLQo+yzLZ2sQCDyl1o0LeugbPWf8+8Fttp29GghsQBjYJVmWq3gBFfe9Hs1spR44vovn2wA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@vitest/expect": "4.0.15",
        "@vitest/mocker": "4.0.15",
@@ -20777,6 +20796,7 @@
      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
      "license": "MIT",
+      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
@@ -69,7 +69,7 @@ export default function ApiKeyTester({ onSuccess, onStartTesting }: ApiKeyTester
      {/* Recommended pill */}
      <div className="absolute -top-2 -right-2 sm:-top-3 sm:-right-3 z-20">
        <span className="inline-block px-2 py-1 text-xs font-medium bg-blue-600 text-white rounded-full">
-          Recommended
+          Recommended if you have API access already
        </span>
      </div>

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo, useRef } from 'react';
+import { useEffect, useState, useMemo, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useConfig } from './ConfigContext';
 import { SetupModal } from './SetupModal';
@@ -37,6 +37,19 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
  const [showSwitchModelModal, setShowSwitchModelModal] = useState(false);
  const [switchModelProvider, setSwitchModelProvider] = useState<string | null>(null);
  const onboardingTracked = useRef(false);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [showScrollIndicator, setShowScrollIndicator] = useState(true);
+
+  const checkScrollPosition = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    const isNearBottom = scrollTop + clientHeight >= scrollHeight - 50;
+    const canScroll = scrollHeight > clientHeight;
+
+    setShowScrollIndicator(canScroll && !isNearBottom);
+  }, []);

  const setView = useMemo(() => createNavigationHandler(navigate), [navigate]);

@@ -209,6 +222,15 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
    }
  }, [isChecking, hasProvider, showFirstTimeSetup]);

+  useEffect(() => {
+    if (!isChecking && !hasProvider && showFirstTimeSetup) {
+      // Check scroll position after content renders
+      const timer = setTimeout(checkScrollPosition, 100);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [isChecking, hasProvider, showFirstTimeSetup, checkScrollPosition]);
+
  if (isChecking) {
    return (
      <div className="h-screen w-full bg-background-default flex items-center justify-center">
@@ -223,8 +245,12 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG

  if (!hasProvider && showFirstTimeSetup) {
    return (
-      <div className="h-screen w-full bg-background-default overflow-hidden">
-        <div className="h-full overflow-y-auto">
+      <div className="h-screen w-full bg-background-default overflow-hidden relative">
+        <div
+          ref={scrollContainerRef}
+          onScroll={checkScrollPosition}
+          className="h-full overflow-y-auto"
+        >
          <div className="min-h-full flex flex-col items-center justify-center p-4 py-8">
            <div className="max-w-2xl w-full mx-auto p-8">
              {/* Header section */}
@@ -248,18 +274,26 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
                }}
              />

-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-                {/* Tetrate Card */}
+              {/* Tetrate Card - Full Width */}
+              <div className="relative w-full mb-4">
+                {/* Recommended pill */}
+                <div className="absolute -top-2 -right-2 sm:-top-3 sm:-right-3 z-20">
+                  <span className="inline-block px-2 py-1 text-xs font-medium bg-blue-600 text-white rounded-full">
+                    Recommended for new users
+                  </span>
+                </div>
+
                <div
                  onClick={handleTetrateSetup}
                  className="w-full p-4 sm:p-6 bg-transparent border border-background-hover rounded-xl hover:border-text-muted transition-all duration-200 cursor-pointer group"
                >
                  <div className="flex items-start justify-between mb-3">
-                    <div className="flex-1">
-                      <Tetrate className="w-5 h-5 mb-3 text-text-standard" />
-                      <h3 className="font-medium text-text-standard text-sm sm:text-base">
-                        Tetrate Agent Router
-                      </h3>
+                    <div className="flex items-center gap-2">
+                      <Tetrate className="w-5 h-5 text-text-standard" />
+                      <span className="text-sm sm:text-base">
+                        <span className="font-medium text-text-standard">Agent Router</span>
+                        <span className="text-text-muted text-xs"> by Tetrate</span>
+                      </span>
                    </div>
                    <div className="text-text-muted group-hover:text-text-standard transition-colors">
                      <svg
@@ -278,45 +312,45 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
                    </div>
                  </div>
                  <p className="text-text-muted text-sm sm:text-base">
-                    Secure access to multiple AI models with automatic setup. Free tier available.
+                    Access multiple AI models with automatic setup. Sign up to receive $10 credit.
                  </p>
                </div>
+              </div>

-                {/* OpenRouter Card */}
-                <div
-                  onClick={handleOpenRouterSetup}
-                  className="relative w-full p-4 sm:p-6 bg-transparent border border-background-hover rounded-xl hover:border-text-muted transition-all duration-200 cursor-pointer group overflow-hidden"
-                >
-                  {/* Subtle shimmer effect */}
-                  <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/8 to-transparent"></div>
+              {/* OpenRouter Card - Full Width */}
+              <div
+                onClick={handleOpenRouterSetup}
+                className="relative w-full p-4 sm:p-6 bg-transparent border border-background-hover rounded-xl hover:border-text-muted transition-all duration-200 cursor-pointer group overflow-hidden mb-6"
+              >
+                {/* Subtle shimmer effect */}
+                <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/8 to-transparent"></div>

-                  <div className="relative flex items-start justify-between mb-3">
-                    <div className="flex-1">
-                      <OpenRouter className="w-5 h-5 mb-3 text-text-standard" />
-                      <h3 className="font-medium text-text-standard text-sm sm:text-base">
-                        OpenRouter
-                      </h3>
-                    </div>
-                    <div className="text-text-muted group-hover:text-text-standard transition-colors">
-                      <svg
-                        className="w-4 h-4 sm:w-5 sm:h-5"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M9 5l7 7-7 7"
-                        />
-                      </svg>
-                    </div>
+                <div className="relative flex items-start justify-between mb-3">
+                  <div className="flex items-center gap-2">
+                    <OpenRouter className="w-5 h-5 text-text-standard" />
+                    <span className="font-medium text-text-standard text-sm sm:text-base">
+                      OpenRouter
+                    </span>
+                  </div>
+                  <div className="text-text-muted group-hover:text-text-standard transition-colors">
+                    <svg
+                      className="w-4 h-4 sm:w-5 sm:h-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M9 5l7 7-7 7"
+                      />
+                    </svg>
                  </div>
-                  <p className="text-text-muted text-sm sm:text-base">
-                    Access 200+ models with one API. Pay-per-use pricing.
-                  </p>
                </div>
+                <p className="text-text-muted text-sm sm:text-base">
+                  Access 200+ models with one API. Pay-per-use pricing.
+                </p>
              </div>

              {/* Other providers section */}
@@ -341,6 +375,23 @@ export default function ProviderGuard({ didSelectProvider, children }: ProviderG
          </div>
        </div>

+        {/* Scroll indicator - fixed at bottom, hides when scrolled to bottom */}
+        {showScrollIndicator && (
+          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 pointer-events-none transition-opacity duration-300 opacity-60 animate-bounce">
+            <div className="flex flex-col items-center gap-1 text-text-muted">
+              <span className="text-xs">More options below</span>
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 9l-7 7-7-7"
+                />
+              </svg>
+            </div>
+          </div>
+        )}
+
        {/* Setup Modals */}
        {openRouterSetupState?.show && (
          <SetupModal