v0.6.7: kb improvements, edge z index fix, captcha, new trust center, block classifications

.claude/commands/add-block.md

@@ -19,7 +19,7 @@ When the user asks you to create a block:
 ```typescript
 import { {ServiceName}Icon } from '@/components/icons'
 import type { BlockConfig } from '@/blocks/types'
-import { AuthMode } from '@/blocks/types'
+import { AuthMode, IntegrationType } from '@/blocks/types'
 import { getScopesForService } from '@/lib/oauth/utils'
 
 export const {ServiceName}Block: BlockConfig = {
@@ -29,6 +29,8 @@ export const {ServiceName}Block: BlockConfig = {
   longDescription: 'Detailed description for docs',
   docsLink: 'https://docs.sim.ai/tools/{service}',
   category: 'tools',                    // 'tools' | 'blocks' | 'triggers'
+  integrationType: IntegrationType.X,   // Primary category (see IntegrationType enum)
+  tags: ['oauth', 'api'],              // Cross-cutting tags (see IntegrationTag type)
   bgColor: '#HEXCOLOR',                 // Brand color
   icon: {ServiceName}Icon,
 
@@ -629,7 +631,7 @@ export const registry: Record<string, BlockConfig> = {
 ```typescript
 import { ServiceIcon } from '@/components/icons'
 import type { BlockConfig } from '@/blocks/types'
-import { AuthMode } from '@/blocks/types'
+import { AuthMode, IntegrationType } from '@/blocks/types'
 import { getScopesForService } from '@/lib/oauth/utils'
 
 export const ServiceBlock: BlockConfig = {
@@ -639,6 +641,8 @@ export const ServiceBlock: BlockConfig = {
   longDescription: 'Full description for documentation...',
   docsLink: 'https://docs.sim.ai/tools/service',
   category: 'tools',
+  integrationType: IntegrationType.DeveloperTools,
+  tags: ['oauth', 'api'],
   bgColor: '#FF6B6B',
   icon: ServiceIcon,
   authMode: AuthMode.OAuth,
@@ -796,6 +800,8 @@ All tool IDs referenced in `tools.access` and returned by `tools.config.tool` MU
 
 ## Checklist Before Finishing
 
+- [ ] `integrationType` is set to the correct `IntegrationType` enum value
+- [ ] `tags` array includes all applicable `IntegrationTag` values
 - [ ] All subBlocks have `id`, `title` (except switch), and `type`
 - [ ] Conditions use correct syntax (field, value, not, and)
 - [ ] DependsOn set for fields that need other values

.claude/commands/add-integration.md

@@ -113,7 +113,7 @@ export const {service}{Action}Tool: ToolConfig<Params, Response> = {
 ```typescript
 import { {Service}Icon } from '@/components/icons'
 import type { BlockConfig } from '@/blocks/types'
-import { AuthMode } from '@/blocks/types'
+import { AuthMode, IntegrationType } from '@/blocks/types'
 import { getScopesForService } from '@/lib/oauth/utils'
 
 export const {Service}Block: BlockConfig = {
@@ -123,6 +123,8 @@ export const {Service}Block: BlockConfig = {
   longDescription: '...',
   docsLink: 'https://docs.sim.ai/tools/{service}',
   category: 'tools',
+  integrationType: IntegrationType.X,   // Primary category (see IntegrationType enum)
+  tags: ['oauth', 'api'],              // Cross-cutting tags (see IntegrationTag type)
   bgColor: '#HEXCOLOR',
   icon: {Service}Icon,
   authMode: AuthMode.OAuth,  // or AuthMode.ApiKey
@@ -410,6 +412,8 @@ If creating V2 versions (API-aligned outputs):
 
 ### Block
 - [ ] Created `blocks/blocks/{service}.ts`
+- [ ] Set `integrationType` to the correct `IntegrationType` enum value
+- [ ] Set `tags` array with all applicable `IntegrationTag` values
 - [ ] Defined operation dropdown with all operations
 - [ ] Added credential field with `requiredScopes: getScopesForService('{service}')`
 - [ ] Added conditional fields per operation

apps/sim/app/(auth)/login/loading.tsx

@@ -0,0 +1,24 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function LoginLoading() {
+  return (
+    <div className='flex flex-col items-center'>
+      <Skeleton className='h-[38px] w-[80px] rounded-[4px]' />
+      <div className='mt-[32px] w-full space-y-[8px]'>
+        <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <div className='mt-[16px] w-full space-y-[8px]'>
+        <Skeleton className='h-[14px] w-[64px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <Skeleton className='mt-[24px] h-[44px] w-full rounded-[10px]' />
+      <Skeleton className='mt-[24px] h-[1px] w-full rounded-[1px]' />
+      <div className='mt-[24px] flex w-full gap-[12px]'>
+        <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
+        <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
+      </div>
+      <Skeleton className='mt-[24px] h-[14px] w-[200px] rounded-[4px]' />
+    </div>
+  )
+}

apps/sim/app/(auth)/login/login-form.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
+import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile'
 import { createLogger } from '@sim/logger'
 import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
@@ -86,6 +87,9 @@ export default function LoginPage({
   const [password, setPassword] = useState('')
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
   const [showValidationError, setShowValidationError] = useState(false)
+  const [formError, setFormError] = useState<string | null>(null)
+  const turnstileRef = useRef<TurnstileInstance>(null)
+  const turnstileSiteKey = useMemo(() => getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY'), [])
   const buttonClass = useBrandedButtonClass()
 
   const callbackUrlParam = searchParams?.get('callbackUrl')
@@ -115,19 +119,6 @@ export default function LoginPage({
       : null
   )
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Enter' && forgotPasswordOpen) {
-        handleForgotPassword()
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [forgotPasswordEmail, forgotPasswordOpen])
-
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newEmail = e.target.value
     setEmail(newEmail)
@@ -178,13 +169,33 @@ export default function LoginPage({
       const safeCallbackUrl = callbackUrl
       let errorHandled = false
 
+      // Execute Turnstile challenge on submit and get a fresh token
+      let token: string | undefined
+      if (turnstileSiteKey && turnstileRef.current) {
+        try {
+          turnstileRef.current.reset()
+          turnstileRef.current.execute()
+          token = await turnstileRef.current.getResponsePromise(15_000)
+        } catch {
+          setFormError('Captcha verification failed. Please try again.')
+          setIsLoading(false)
+          return
+        }
+      }
+
+      setFormError(null)
       const result = await client.signIn.email(
         {
           email,
           password,
           callbackURL: safeCallbackUrl,
         },
         {
+          fetchOptions: {
+            headers: {
+              ...(token ? { 'x-captcha-response': token } : {}),
+            },
+          },
           onError: (ctx) => {
             logger.error('Login error:', ctx.error)
 
@@ -460,6 +471,20 @@ export default function LoginPage({
             </div>
           </div>
 
+          {turnstileSiteKey && (
+            <Turnstile
+              ref={turnstileRef}
+              siteKey={turnstileSiteKey}
+              options={{ size: 'invisible', execution: 'execute' }}
+            />
+          )}
+
+          {formError && (
+            <div className='text-red-400 text-xs'>
+              <p>{formError}</p>
+            </div>
+          )}
+
           <BrandedButton
             type='submit'
             disabled={isLoading}
@@ -540,45 +565,51 @@ export default function LoginPage({
         <ModalContent className='dark' size='sm'>
           <ModalHeader>Reset Password</ModalHeader>
           <ModalBody>
-            <ModalDescription className='mb-4 text-[var(--text-muted)] text-sm'>
-              Enter your email address and we'll send you a link to reset your password if your
-              account exists.
-            </ModalDescription>
-            <div className='space-y-4'>
-              <div className='space-y-2'>
-                <Label htmlFor='reset-email'>Email</Label>
-                <Input
-                  id='reset-email'
-                  value={forgotPasswordEmail}
-                  onChange={(e) => setForgotPasswordEmail(e.target.value)}
-                  placeholder='Enter your email'
-                  required
-                  type='email'
-                  className={cn(
-                    resetStatus.type === 'error' && 'border-red-500 focus:border-red-500'
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                handleForgotPassword()
+              }}
+            >
+              <ModalDescription className='mb-4 text-[var(--text-muted)] text-sm'>
+                Enter your email address and we'll send you a link to reset your password if your
+                account exists.
+              </ModalDescription>
+              <div className='space-y-4'>
+                <div className='space-y-2'>
+                  <Label htmlFor='reset-email'>Email</Label>
+                  <Input
+                    id='reset-email'
+                    value={forgotPasswordEmail}
+                    onChange={(e) => setForgotPasswordEmail(e.target.value)}
+                    placeholder='Enter your email'
+                    required
+                    type='email'
+                    className={cn(
+                      resetStatus.type === 'error' && 'border-red-500 focus:border-red-500'
+                    )}
+                  />
+                  {resetStatus.type === 'error' && (
+                    <div className='mt-1 text-red-400 text-xs'>
+                      <p>{resetStatus.message}</p>
+                    </div>
                   )}
-                />
-                {resetStatus.type === 'error' && (
-                  <div className='mt-1 text-red-400 text-xs'>
+                </div>
+                {resetStatus.type === 'success' && (
+                  <div className='mt-1 text-[#4CAF50] text-xs'>
                     <p>{resetStatus.message}</p>
                   </div>
                 )}
+                <BrandedButton
+                  type='submit'
+                  disabled={isSubmittingReset}
+                  loading={isSubmittingReset}
+                  loadingText='Sending'
+                >
+                  Send Reset Link
+                </BrandedButton>
               </div>
-              {resetStatus.type === 'success' && (
-                <div className='mt-1 text-[#4CAF50] text-xs'>
-                  <p>{resetStatus.message}</p>
-                </div>
-              )}
-              <BrandedButton
-                type='button'
-                onClick={handleForgotPassword}
-                disabled={isSubmittingReset}
-                loading={isSubmittingReset}
-                loadingText='Sending'
-              >
-                Send Reset Link
-              </BrandedButton>
-            </div>
+            </form>
           </ModalBody>
         </ModalContent>
       </Modal>

apps/sim/app/(auth)/oauth/consent/loading.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function OAuthConsentLoading() {
+  return (
+    <div className='flex flex-col items-center'>
+      <div className='flex items-center gap-[16px]'>
+        <Skeleton className='h-[48px] w-[48px] rounded-[12px]' />
+        <Skeleton className='h-[20px] w-[20px] rounded-[4px]' />
+        <Skeleton className='h-[48px] w-[48px] rounded-[12px]' />
+      </div>
+      <Skeleton className='mt-[24px] h-[38px] w-[220px] rounded-[4px]' />
+      <Skeleton className='mt-[8px] h-[14px] w-[280px] rounded-[4px]' />
+      <Skeleton className='mt-[24px] h-[56px] w-full rounded-[8px]' />
+      <Skeleton className='mt-[16px] h-[120px] w-full rounded-[8px]' />
+      <div className='mt-[24px] flex w-full max-w-[410px] gap-[12px]'>
+        <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
+        <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
+      </div>
+    </div>
+  )
+}

apps/sim/app/(auth)/reset-password/loading.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function ResetPasswordLoading() {
+  return (
+    <div className='flex flex-col items-center'>
+      <Skeleton className='h-[38px] w-[160px] rounded-[4px]' />
+      <Skeleton className='mt-[12px] h-[14px] w-[280px] rounded-[4px]' />
+      <div className='mt-[32px] w-full space-y-[8px]'>
+        <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <Skeleton className='mt-[24px] h-[44px] w-full rounded-[10px]' />
+      <Skeleton className='mt-[24px] h-[14px] w-[120px] rounded-[4px]' />
+    </div>
+  )
+}

apps/sim/app/(auth)/signup/loading.tsx

@@ -0,0 +1,28 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function SignupLoading() {
+  return (
+    <div className='flex flex-col items-center'>
+      <Skeleton className='h-[38px] w-[100px] rounded-[4px]' />
+      <div className='mt-[32px] w-full space-y-[8px]'>
+        <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <div className='mt-[16px] w-full space-y-[8px]'>
+        <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <div className='mt-[16px] w-full space-y-[8px]'>
+        <Skeleton className='h-[14px] w-[64px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <Skeleton className='mt-[24px] h-[44px] w-full rounded-[10px]' />
+      <Skeleton className='mt-[24px] h-[1px] w-full rounded-[1px]' />
+      <div className='mt-[24px] flex w-full gap-[12px]'>
+        <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
+        <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
+      </div>
+      <Skeleton className='mt-[24px] h-[14px] w-[220px] rounded-[4px]' />
+    </div>
+  )
+}