invite, billing, home

Author: emir-karabeg

apps/sim/app/api/organizations/[id]/members/route.ts

@@ -243,7 +243,7 @@ export const POST = withRouteHandler(
       if (!seatValidation.canInvite) {
         return NextResponse.json(
           {
-            error: `Cannot invite member. Using ${seatValidation.currentSeats} of ${seatValidation.maxSeats} seats.`,
+            error: `Cannot invite teammate. Using ${seatValidation.currentSeats} of ${seatValidation.maxSeats} seats.`,
             details: seatValidation,
           },
           { status: 400 }

apps/sim/app/playground/page.tsx

@@ -402,7 +402,6 @@ export default function PlaygroundPage() {
                   onRemove={() => {}}
                   placeholder='Add tags'
                   placeholderWithTags='Add another'
-                  tagVariant='secondary'
                   triggerKeys={['Enter', ',']}
                 />
               </div>

apps/sim/app/workspace/[workspaceId]/home/components/chat-context-kind-registry/chat-context-kind-registry.tsx

@@ -11,6 +11,7 @@ import { getDocumentIcon } from '@/components/icons/document-icons'
 import { cn } from '@/lib/core/utils/cn'
 import { workflowBorderColor } from '@/lib/workspaces/colors'
 import type { ChatContextKind, ChatMessageContext } from '@/app/workspace/[workspaceId]/home/types'
+import { getBareIconStyle } from '@/blocks/icon-color'
 import { registry as blockRegistry } from '@/blocks/registry'
 
 interface RenderIconArgs {
@@ -52,7 +53,7 @@ function renderIntegrationTile({ context, className }: RenderIconArgs): ReactNod
   const block = blockRegistry[context.blockType]
   if (!block) return null
   const Icon = block.icon
-  return <Icon className={className} />
+  return <Icon className={className} style={getBareIconStyle(Icon)} />
 }
 
 /**

apps/sim/app/workspace/[workspaceId]/home/components/credits-chip/credits-chip.tsx

@@ -8,6 +8,7 @@ import { Credit } from '@/components/emcn/icons'
 import { ON_DEMAND_UNLIMITED } from '@/lib/billing/constants'
 import { formatCredits } from '@/lib/billing/credits/conversion'
 import { isBillingEnabled } from '@/app/workspace/[workspaceId]/settings/navigation'
+import { usePlanView } from '@/hooks/queries/plan-view'
 import { prefetchUpgradeBillingData, useSubscriptionData } from '@/hooks/queries/subscription'
 import { prefetchWorkspaceSettings } from '@/hooks/queries/workspace'
 
@@ -18,28 +19,40 @@ export function CreditsChip() {
 }
 
 function CreditsChipInner() {
-  const { data, isLoading } = useSubscriptionData()
+  const { planView, isLoading, hasData } = usePlanView()
+  /**
+   * `usePlanView` is built on top of `useSubscriptionData`, so the second call
+   * dedups against the same React Query cache entry. We read the raw usage
+   * fields here because `planView` intentionally only exposes plan-derived
+   * decisions, not display math.
+   */
+  const { data } = useSubscriptionData()
   const router = useRouter()
   const queryClient = useQueryClient()
   const { workspaceId } = useParams<{ workspaceId: string }>()
 
   const upgradeHref = `/workspace/${workspaceId}/upgrade`
 
-  // Warm the route bundle and the exact queries the Upgrade page gates on, so
-  // the click navigates into already-cached data instead of a blank, loading page.
+  /**
+   * Warm the route bundle and the exact queries the Upgrade page gates on, so
+   * the click navigates into already-cached data instead of a blank, loading page.
+   */
   const prefetchUpgrade = useCallback(() => {
     router.prefetch(upgradeHref)
     prefetchUpgradeBillingData(queryClient)
     prefetchWorkspaceSettings(queryClient, workspaceId)
   }, [router, queryClient, upgradeHref, workspaceId])
 
-  if (isLoading || !data?.data) return null
+  if (isLoading || !hasData || !data?.data) return null
+  if (!planView.showCredits) return null
 
   const { usageLimit, currentUsage, creditBalance } = data.data
 
-  // Credits remaining = unused plan allowance plus any purchased credit balance.
-  // Uncapped plans (limit at/above the on-demand threshold) render as ∞ via
-  // `formatCredits`, so short-circuit instead of subtracting usage from it.
+  /**
+   * Credits remaining = unused plan allowance plus any purchased credit balance.
+   * Uncapped plans (limit at/above the on-demand threshold) render as ∞ via
+   * `formatCredits`, so short-circuit instead of subtracting usage from it.
+   */
   const remainingCredits =
     usageLimit >= ON_DEMAND_UNLIMITED
       ? ON_DEMAND_UNLIMITED

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx

@@ -21,6 +21,7 @@ import type {
   MothershipResource,
   MothershipResourceType,
 } from '@/app/workspace/[workspaceId]/home/types'
+import { getBareIconStyle, type StyleableIcon } from '@/blocks/icon-color'
 import { knowledgeKeys } from '@/hooks/queries/kb/knowledge'
 import { logKeys } from '@/hooks/queries/logs'
 import { tableKeys } from '@/hooks/queries/tables'
@@ -103,16 +104,20 @@ function IconDropdownItem({ item, icon: Icon }: DropdownItemRenderProps & { icon
 }
 
 /**
- * Renders an integration mention candidate using the block's own brand icon
- * (the SVG carries its own brand colors and renders at the standard 14px
- * icon size used elsewhere in the dropdown).
+ * Renders an integration mention candidate using the block's own brand icon at
+ * the standard 14px dropdown size. Single-fill icons drawn with
+ * `fill='currentColor'` (e.g. HubSpot) are tinted with the block's brand
+ * {@link BlockConfig.iconColor}; multi-color brand icons keep their own SVG fills.
  */
 function IntegrationDropdownItem({ item }: DropdownItemRenderProps) {
-  const Icon = item.iconComponent as ElementType | undefined
+  const Icon = item.iconComponent as StyleableIcon | undefined
   if (!Icon) return <span className='truncate'>{item.name}</span>
   return (
     <>
-      <Icon className='size-[14px] flex-shrink-0' />
+      <Icon
+        className='size-[14px] flex-shrink-0 text-[var(--text-icon)]'
+        style={getBareIconStyle(Icon)}
+      />
       <span className='truncate'>{item.name}</span>
     </>
   )

apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx

@@ -1,9 +1,22 @@
 'use client'
 
-import { type ComponentType, useEffect, useMemo, useState } from 'react'
+import {
+  type ComponentType,
+  type CSSProperties,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 import { useParams } from 'next/navigation'
-import { ArrowRight, ChevronDown, Expandable, ExpandableContent } from '@/components/emcn'
-import { Table } from '@/components/emcn/icons'
+import {
+  ArrowRight,
+  ChevronDown,
+  chipVariants,
+  Expandable,
+  ExpandableContent,
+} from '@/components/emcn'
+import { Shuffle, Table } from '@/components/emcn/icons'
 import {
   GithubIcon,
   GmailIcon,
@@ -22,10 +35,11 @@ import {
   resolveOAuthServiceForSlug,
 } from '@/lib/integrations'
 import { ConnectOAuthModal } from '@/app/workspace/[workspaceId]/components/connect-oauth-modal'
+import { getBareIconStyle } from '@/blocks/icon-color'
 import { useWorkspaceCredentials } from '@/hooks/queries/credentials'
 import { useOAuthConnections } from '@/hooks/queries/oauth/oauth-connections'
 
-type Icon = ComponentType<{ className?: string }>
+type Icon = ComponentType<{ className?: string; style?: CSSProperties }>
 
 type Action =
   | { kind: 'prompt'; id: string; label: string; prompt: string; icon: Icon }
@@ -195,6 +209,41 @@ function toIntegrationAction(service: ServiceInfo, slug: string): Action {
   }
 }
 
+/**
+ * Builds a fresh randomized set of suggested actions. Because it samples via
+ * {@link sample}, each call yields a new ordering — this powers both the initial
+ * personalization effect and the shuffle control. Users with connected services
+ * get integration suggestions for services they have not yet connected; everyone
+ * else falls back to sampling the table and integration prompt pools so the set
+ * still changes on shuffle.
+ */
+function computeActions(
+  services: readonly ServiceInfo[],
+  connectedProviders: ReadonlySet<string>
+): Action[] {
+  const candidates = services.flatMap((s) => {
+    if (connectedProviders.has(s.providerId)) return []
+    const slug = SLUG_BY_LOWER_NAME.get(s.name.toLowerCase())
+    return slug ? [{ service: s, slug }] : []
+  })
+  const integrations = sample(candidates, 2).map(({ service, slug }) =>
+    toIntegrationAction(service, slug)
+  )
+
+  const integrationPool = INTEGRATION_PROMPTS.filter(
+    (p) => !p.providerId || !connectedProviders.has(p.providerId)
+  )
+  const promptCount = 4 - integrations.length
+  const [tablePick] = sample(TABLE_PROMPTS, 1)
+  const integrationPicks = sample(
+    integrationPool.length > 0 ? integrationPool : INTEGRATION_PROMPTS,
+    promptCount - 1
+  )
+  const prompts = sample([tablePick, ...integrationPicks].map(toPromptAction), promptCount)
+
+  return [...integrations, ...prompts]
+}
+
 /**
  * Initial actions rendered on first paint, before OAuth/credentials queries resolve.
  * For users with no connections this is also the final result, so the section never
@@ -259,28 +308,13 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
 
   useEffect(() => {
     if (services.length === 0 || connectedProviders.size === 0) return
-
-    const candidates = services.flatMap((s) => {
-      if (connectedProviders.has(s.providerId)) return []
-      const slug = SLUG_BY_LOWER_NAME.get(s.name.toLowerCase())
-      return slug ? [{ service: s, slug }] : []
-    })
-    const integrations = sample(candidates, 2).map(({ service, slug }) =>
-      toIntegrationAction(service, slug)
-    )
-
-    const integrationPool = INTEGRATION_PROMPTS.filter(
-      (p) => !p.providerId || !connectedProviders.has(p.providerId)
-    )
-    const [tablePick] = sample(TABLE_PROMPTS, 1)
-    const [integrationPick] = sample(
-      integrationPool.length > 0 ? integrationPool : INTEGRATION_PROMPTS,
-      1
-    )
-
-    setActions([...integrations, toPromptAction(tablePick), toPromptAction(integrationPick)])
+    setActions(computeActions(services, connectedProviders))
   }, [connectedProviders, services])
 
+  const handleShuffle = useCallback(() => {
+    setActions(computeActions(services, connectedProviders))
+  }, [services, connectedProviders])
+
   const handleSelect = (action: Action) => {
     if (action.kind === 'prompt') {
       onSelectPrompt(action.prompt)
@@ -292,23 +326,40 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
 
   return (
     <div className='mx-auto mt-7 w-full max-w-[48rem]'>
-      <button
-        type='button'
-        onClick={() => {
-          setAnimationsEnabled(true)
-          setExpanded((prev) => !prev)
-        }}
-        aria-expanded={expanded}
-        className='flex items-center gap-2'
-      >
-        <span className='text-[var(--text-muted)] text-small'>Suggested actions</span>
-        <ChevronDown
+      <div className='flex items-center justify-between'>
+        <button
+          type='button'
+          onClick={() => {
+            setAnimationsEnabled(true)
+            setExpanded((prev) => !prev)
+          }}
+          aria-expanded={expanded}
+          className='flex items-center gap-2'
+        >
+          <span className='text-[var(--text-muted)] text-small'>Suggested actions</span>
+          <ChevronDown
+            className={cn(
+              'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
+              !expanded && '-rotate-90'
+            )}
+          />
+        </button>
+        <button
+          type='button'
+          onClick={handleShuffle}
+          aria-label='Shuffle suggested actions'
+          aria-hidden={!expanded}
+          tabIndex={expanded ? undefined : -1}
           className={cn(
-            'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
-            !expanded && '-rotate-90'
+            chipVariants({ variant: 'ghost', flush: true }),
+            '-mr-2 gap-1.5 transition-opacity duration-150 ease-out motion-reduce:transition-none',
+            expanded ? 'opacity-100' : 'pointer-events-none opacity-0'
           )}
-        />
-      </button>
+        >
+          <span className='-mt-px text-[var(--text-muted)] text-small'>Shuffle</span>
+          <Shuffle className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+        </button>
+      </div>
       <Expandable expanded={expanded}>
         <ExpandableContent className={cn('mt-2', !animationsEnabled && '!animate-none')}>
           <div className='flex flex-col'>
@@ -324,7 +375,10 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
                     i > 0 && 'border-t'
                   )}
                 >
-                  <Icon className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+                  <Icon
+                    className='size-[16px] flex-shrink-0 text-[var(--text-icon)]'
+                    style={getBareIconStyle(Icon)}
+                  />
                   <span className='flex-1 truncate text-[var(--text-body)] text-sm'>
                     {action.label}
                   </span>