feat: badges, usage limit; fix(note): iframe security; improvement(s-modal): sizing

Author: emir-karabeg

apps/sim/app/api/billing/route.ts

@@ -93,6 +93,7 @@ export async function GET(request: NextRequest) {
     const { searchParams } = new URL(request.url)
     const context = searchParams.get('context') || 'user'
     const contextId = searchParams.get('id')
+    const includeOrg = searchParams.get('includeOrg') === 'true'
 
     // Validate context parameter
     if (!['user', 'organization'].includes(context)) {
@@ -115,14 +116,38 @@ export async function GET(request: NextRequest) {
     if (context === 'user') {
       // Get user billing (may include organization if they're part of one)
       billingData = await getSimplifiedBillingSummary(session.user.id, contextId || undefined)
+
       // Attach effective billing blocked status (includes org owner check)
       const billingStatus = await getEffectiveBillingStatus(session.user.id)
+
       billingData = {
         ...billingData,
         billingBlocked: billingStatus.billingBlocked,
         billingBlockedReason: billingStatus.billingBlockedReason,
         blockedByOrgOwner: billingStatus.blockedByOrgOwner,
       }
+
+      // Optionally include organization membership and role
+      if (includeOrg) {
+        const userMembership = await db
+          .select({
+            organizationId: member.organizationId,
+            role: member.role,
+          })
+          .from(member)
+          .where(eq(member.userId, session.user.id))
+          .limit(1)
+
+        if (userMembership.length > 0) {
+          billingData = {
+            ...billingData,
+            organization: {
+              id: userMembership[0].organizationId,
+              role: userMembership[0].role as 'owner' | 'admin' | 'member',
+            },
+          }
+        }
+      }
     } else {
       // Get user role in organization for permission checks first
       const memberRecord = await db

apps/sim/app/workspace/[workspaceId]/logs/utils.ts

@@ -5,10 +5,15 @@ import { getIntegrationMetadata } from '@/lib/logs/get-trigger-options'
 import { getBlock } from '@/blocks/registry'
 
 const CORE_TRIGGER_TYPES = ['manual', 'api', 'schedule', 'chat', 'webhook'] as const
-const RUNNING_COLOR = '#22c55e' as const
-const PENDING_COLOR = '#f59e0b' as const
+
+/** Possible execution status values for workflow logs */
 export type LogStatus = 'error' | 'pending' | 'running' | 'info' | 'cancelled'
 
+/**
+ * Maps raw status string to LogStatus for display.
+ * @param status - Raw status from API
+ * @returns Normalized LogStatus value
+ */
 export function getDisplayStatus(status: string | null | undefined): LogStatus {
   switch (status) {
     case 'running':
@@ -24,146 +29,75 @@ export function getDisplayStatus(status: string | null | undefined): LogStatus {
   }
 }
 
-/**
- * Checks if a hex color is gray/neutral (low saturation) or too light/dark
- */
-export function isGrayOrNeutral(hex: string): boolean {
-  const r = Number.parseInt(hex.slice(1, 3), 16)
-  const g = Number.parseInt(hex.slice(3, 5), 16)
-  const b = Number.parseInt(hex.slice(5, 7), 16)
-
-  const max = Math.max(r, g, b)
-  const min = Math.min(r, g, b)
-  const lightness = (max + min) / 2 / 255
-
-  const delta = max - min
-  const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1)) / 255
-
-  return saturation < 0.2 || lightness > 0.8 || lightness < 0.25
+/** Configuration mapping log status to Badge variant and display label */
+const STATUS_VARIANT_MAP: Record<
+  LogStatus,
+  { variant: React.ComponentProps<typeof Badge>['variant']; label: string }
+> = {
+  error: { variant: 'red', label: 'Error' },
+  pending: { variant: 'amber', label: 'Pending' },
+  running: { variant: 'green', label: 'Running' },
+  cancelled: { variant: 'gray', label: 'Cancelled' },
+  info: { variant: 'gray', label: 'Info' },
 }
 
-/**
- * Converts a hex color to a background variant with appropriate opacity
- */
-export function hexToBackground(hex: string): string {
-  const r = Number.parseInt(hex.slice(1, 3), 16)
-  const g = Number.parseInt(hex.slice(3, 5), 16)
-  const b = Number.parseInt(hex.slice(5, 7), 16)
-  return `rgba(${r}, ${g}, ${b}, 0.2)`
-}
-
-/**
- * Lightens a hex color to make it more vibrant for text
- */
-export function lightenColor(hex: string, percent = 30): string {
-  const r = Number.parseInt(hex.slice(1, 3), 16)
-  const g = Number.parseInt(hex.slice(3, 5), 16)
-  const b = Number.parseInt(hex.slice(5, 7), 16)
-
-  const newR = Math.min(255, Math.round(r + (255 - r) * (percent / 100)))
-  const newG = Math.min(255, Math.round(g + (255 - g) * (percent / 100)))
-  const newB = Math.min(255, Math.round(b + (255 - b) * (percent / 100)))
-
-  return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`
+/** Configuration mapping core trigger types to Badge color variants */
+const TRIGGER_VARIANT_MAP: Record<string, React.ComponentProps<typeof Badge>['variant']> = {
+  manual: 'gray-secondary',
+  api: 'blue',
+  schedule: 'teal',
+  chat: 'purple',
+  webhook: 'orange',
 }
 
 interface StatusBadgeProps {
+  /** The execution status to display */
   status: LogStatus
 }
 
 /**
- * Displays a styled badge for a log execution status
+ * Renders a colored badge indicating log execution status.
+ * @param props - Component props containing the status
+ * @returns A Badge with dot indicator and status label
  */
 export const StatusBadge = React.memo(({ status }: StatusBadgeProps) => {
-  const config = {
-    error: {
-      bg: 'var(--terminal-status-error-bg)',
-      color: 'var(--text-error)',
-      label: 'Error',
-    },
-    pending: {
-      bg: hexToBackground(PENDING_COLOR),
-      color: lightenColor(PENDING_COLOR, 65),
-      label: 'Pending',
-    },
-    running: {
-      bg: hexToBackground(RUNNING_COLOR),
-      color: lightenColor(RUNNING_COLOR, 65),
-      label: 'Running',
-    },
-    cancelled: {
-      bg: 'var(--terminal-status-info-bg)',
-      color: 'var(--terminal-status-info-color)',
-      label: 'Cancelled',
-    },
-    info: {
-      bg: 'var(--terminal-status-info-bg)',
-      color: 'var(--terminal-status-info-color)',
-      label: 'Info',
-    },
-  }[status]
-
-  return React.createElement(
-    'div',
-    {
-      className:
-        'inline-flex items-center gap-[6px] rounded-[6px] px-[9px] py-[2px] font-medium text-[12px]',
-      style: { backgroundColor: config.bg, color: config.color },
-    },
-    React.createElement('div', {
-      className: 'h-[6px] w-[6px] rounded-[2px]',
-      style: { backgroundColor: config.color },
-    }),
-    config.label
-  )
+  const config = STATUS_VARIANT_MAP[status]
+  return React.createElement(Badge, { variant: config.variant, dot: true }, config.label)
 })
 
 StatusBadge.displayName = 'StatusBadge'
 
 interface TriggerBadgeProps {
+  /** The trigger type identifier (e.g., 'manual', 'api', or integration block type) */
   trigger: string
 }
 
 /**
- * Displays a styled badge for a workflow trigger type
+ * Renders a colored badge indicating the workflow trigger type.
+ * Core triggers display with their designated colors; integrations show with icons.
+ * @param props - Component props containing the trigger type
+ * @returns A Badge with appropriate styling for the trigger type
  */
 export const TriggerBadge = React.memo(({ trigger }: TriggerBadgeProps) => {
   const metadata = getIntegrationMetadata(trigger)
   const isIntegration = !(CORE_TRIGGER_TYPES as readonly string[]).includes(trigger)
   const block = isIntegration ? getBlock(trigger) : null
   const IconComponent = block?.icon
 
-  const isUnknownIntegration = isIntegration && trigger !== 'generic' && !block
-  if (
-    trigger === 'manual' ||
-    trigger === 'generic' ||
-    isUnknownIntegration ||
-    isGrayOrNeutral(metadata.color)
-  ) {
+  const coreVariant = TRIGGER_VARIANT_MAP[trigger]
+  if (coreVariant) {
+    return React.createElement(Badge, { variant: coreVariant }, metadata.label)
+  }
+
+  if (IconComponent) {
     return React.createElement(
       Badge,
-      {
-        variant: 'default',
-        className:
-          'inline-flex items-center gap-[6px] rounded-[6px] px-[9px] py-[2px] font-medium text-[12px]',
-      },
-      IconComponent && React.createElement(IconComponent, { className: 'h-[12px] w-[12px]' }),
+      { variant: 'gray-secondary', icon: IconComponent },
       metadata.label
     )
   }
 
-  const textColor = lightenColor(metadata.color, 65)
-
-  return React.createElement(
-    'div',
-    {
-      className:
-        'inline-flex items-center gap-[6px] rounded-[6px] px-[9px] py-[2px] font-medium text-[12px]',
-      style: { backgroundColor: hexToBackground(metadata.color), color: textColor },
-    },
-    IconComponent && React.createElement(IconComponent, { className: 'h-[12px] w-[12px]' }),
-    metadata.label
-  )
+  return React.createElement(Badge, { variant: 'gray-secondary' }, metadata.label)
 })
 
 TriggerBadge.displayName = 'TriggerBadge'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx

@@ -126,8 +126,11 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
                   <iframe
                     src={`https://www.youtube.com/embed/${videoId}`}
                     title='YouTube video'
-                    allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+                    allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share'
                     allowFullScreen
+                    loading='lazy'
+                    referrerPolicy='strict-origin-when-cross-origin'
+                    sandbox='allow-scripts allow-same-origin allow-presentation allow-popups'
                     className='aspect-video w-full'
                   />
                 </span>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx

@@ -2,8 +2,8 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import clsx from 'clsx'
 import {
+  Badge,
   Button,
   Modal,
   ModalBody,
@@ -729,29 +729,10 @@ interface StatusBadgeProps {
 
 function StatusBadge({ isWarning }: StatusBadgeProps) {
   const label = isWarning ? 'Update deployment' : 'Live'
-
   return (
-    <div
-      className={clsx(
-        'flex h-[24px] items-center justify-start gap-[8px] rounded-[6px] border px-[9px]',
-        isWarning ? 'border-[#A16207] bg-[#452C0F]' : 'border-[#22703D] bg-[#14291B]'
-      )}
-    >
-      <div
-        className='h-[6px] w-[6px] rounded-[2px]'
-        style={{
-          backgroundColor: isWarning ? '#EAB308' : '#4ADE80',
-        }}
-      />
-      <span
-        className='font-medium text-[11.5px]'
-        style={{
-          color: isWarning ? '#EAB308' : '#86EFAC',
-        }}
-      >
-        {label}
-      </span>
-    </div>
+    <Badge variant={isWarning ? 'amber' : 'green'} size='lg' dot>
+      {label}
+    </Badge>
   )
 }
 
@@ -771,35 +752,10 @@ function TemplateStatusBadge({ status, views, stars }: TemplateStatusBadgeProps)
       : null
 
   return (
-    <div
-      className={clsx(
-        'flex h-[24px] items-center justify-start gap-[8px] rounded-[6px] border px-[9px]',
-        isPending ? 'border-[#A16207] bg-[#452C0F]' : 'border-[#22703D] bg-[#14291B]'
-      )}
-    >
-      <div
-        className='h-[6px] w-[6px] rounded-[2px]'
-        style={{
-          backgroundColor: isPending ? '#EAB308' : '#4ADE80',
-        }}
-      />
-      <span
-        className='font-medium text-[11.5px]'
-        style={{
-          color: isPending ? '#EAB308' : '#86EFAC',
-        }}
-      >
-        {label}
-      </span>
-      {statsText && (
-        <span
-          className='font-medium text-[11.5px]'
-          style={{ color: isPending ? '#EAB308' : '#86EFAC' }}
-        >
-          • {statsText}
-        </span>
-      )}
-    </div>
+    <Badge variant={isPending ? 'amber' : 'green'} size='lg' dot>
+      {label}
+      {statsText && <span>• {statsText}</span>}
+    </Badge>
   )
 }
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx

@@ -24,6 +24,7 @@ import {
 import Link from 'next/link'
 import { useShallow } from 'zustand/react/shallow'
 import {
+  Badge,
   Button,
   Code,
   Input,
@@ -1327,33 +1328,9 @@ export function Terminal() {
                       {/* Status */}
                       <div className={clsx(COLUMN_WIDTHS.STATUS, COLUMN_BASE_CLASS)}>
                         {statusInfo ? (
-                          <div
-                            className={clsx(
-                              'flex h-[24px] w-[56px] items-center justify-start rounded-[6px] border pl-[9px]',
-                              statusInfo.isError
-                                ? 'gap-[5px] border-[var(--terminal-status-error-border)] bg-[var(--terminal-status-error-bg)]'
-                                : 'gap-[8px] border-[var(--terminal-status-info-border)] bg-[var(--terminal-status-info-bg)]'
-                            )}
-                          >
-                            <div
-                              className='h-[6px] w-[6px] rounded-[2px]'
-                              style={{
-                                backgroundColor: statusInfo.isError
-                                  ? 'var(--text-error)'
-                                  : 'var(--terminal-status-info-color)',
-                              }}
-                            />
-                            <span
-                              className='font-medium text-[11.5px]'
-                              style={{
-                                color: statusInfo.isError
-                                  ? 'var(--text-error)'
-                                  : 'var(--terminal-status-info-color)',
-                              }}
-                            >
-                              {statusInfo.label}
-                            </span>
-                          </div>
+                          <Badge variant={statusInfo.isError ? 'red' : 'gray'} dot>
+                            {statusInfo.label}
+                          </Badge>
                         ) : (
                           <span className={ROW_TEXT_CLASS}>-</span>
                         )}