feat(usage-indicator): added ability to see current usage (#925)

* feat(usage-indicator): added ability to see current usage

* feat(billing): added billing ennabled flag for usage indicator, enforcement of billing usage

---------

Co-authored-by: waleedlatif1 <walif6@gmail.com>

Author: emir-karabeg

apps/sim/app/api/chat/route.test.ts

@@ -245,6 +245,8 @@ describe('Chat API Route', () => {
           NODE_ENV: 'development',
           NEXT_PUBLIC_APP_URL: 'http://localhost:3000',
         },
+        isTruthy: (value: string | boolean | number | undefined) =>
+          typeof value === 'string' ? value === 'true' || value === '1' : Boolean(value),
       }))
 
       const validData = {
@@ -287,6 +289,8 @@ describe('Chat API Route', () => {
           NODE_ENV: 'development',
           NEXT_PUBLIC_APP_URL: 'http://localhost:3000',
         },
+        isTruthy: (value: string | boolean | number | undefined) =>
+          typeof value === 'string' ? value === 'true' || value === '1' : Boolean(value),
       }))
 
       const validData = {

apps/sim/app/api/knowledge/search/route.test.ts

@@ -30,6 +30,8 @@ vi.mock('@/lib/env', () => ({
   env: {
     OPENAI_API_KEY: 'test-api-key',
   },
+  isTruthy: (value: string | boolean | number | undefined) =>
+    typeof value === 'string' ? value === 'true' || value === '1' : Boolean(value),
 }))
 
 vi.mock('@/lib/documents/utils', () => ({

apps/sim/app/api/knowledge/utils.test.ts

@@ -15,7 +15,11 @@ vi.mock('drizzle-orm', () => ({
   sql: (strings: TemplateStringsArray, ...expr: any[]) => ({ strings, expr }),
 }))
 
-vi.mock('@/lib/env', () => ({ env: { OPENAI_API_KEY: 'test-key' } }))
+vi.mock('@/lib/env', () => ({
+  env: { OPENAI_API_KEY: 'test-key' },
+  isTruthy: (value: string | boolean | number | undefined) =>
+    typeof value === 'string' ? value === 'true' || value === '1' : Boolean(value),
+}))
 
 vi.mock('@/lib/documents/utils', () => ({
   retryWithExponentialBackoff: (fn: any) => fn(),

apps/sim/app/globals.css

@@ -89,6 +89,10 @@
 
     /* Base Component Properties */
     --base-muted-foreground: #737373;
+
+    /* Gradient Colors */
+    --gradient-primary: 263 85% 70%; /* More vibrant purple */
+    --gradient-secondary: 336 95% 65%; /* More vibrant pink */
   }
 
   /* Dark Mode Theme */
@@ -145,6 +149,10 @@
 
     /* Base Component Properties */
     --base-muted-foreground: #a3a3a3;
+
+    /* Gradient Colors - Adjusted for dark mode */
+    --gradient-primary: 263 90% 75%; /* More vibrant purple for dark mode */
+    --gradient-secondary: 336 100% 72%; /* More vibrant pink for dark mode */
   }
 }
 
@@ -325,6 +333,13 @@ input[type="search"]::-ms-clear {
     background: transparent;
   }
 
+  /* Gradient Text Utility - Use with Tailwind gradient directions */
+  .gradient-text {
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
   /* Animation Classes */
   .animate-pulse-ring {
     animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/index.ts

@@ -3,7 +3,9 @@ export { FolderTree } from './folder-tree/folder-tree'
 export { HelpModal } from './help-modal/help-modal'
 export { LogsFilters } from './logs-filters/logs-filters'
 export { SettingsModal } from './settings-modal/settings-modal'
+export { SubscriptionModal } from './subscription-modal/subscription-modal'
 export { Toolbar } from './toolbar/toolbar'
+export { UsageIndicator } from './usage-indicator/usage-indicator'
 export { WorkflowContextMenu } from './workflow-context-menu/workflow-context-menu'
 export { WorkflowList } from './workflow-list/workflow-list'
 export { WorkspaceHeader } from './workspace-header/workspace-header'

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/settings-navigation/settings-navigation.tsx

@@ -8,7 +8,7 @@ import {
   UserCircle,
   Users,
 } from 'lucide-react'
-import { isDev } from '@/lib/environment'
+import { isBillingEnabled } from '@/lib/environment'
 import { cn } from '@/lib/utils'
 import { useSubscriptionStore } from '@/stores/subscription/store'
 
@@ -40,7 +40,7 @@ type NavigationItem = {
     | 'privacy'
   label: string
   icon: React.ComponentType<{ className?: string }>
-  hideInDev?: boolean
+  hideWhenBillingDisabled?: boolean
   requiresTeam?: boolean
 }
 
@@ -79,13 +79,13 @@ const allNavigationItems: NavigationItem[] = [
     id: 'subscription',
     label: 'Subscription',
     icon: CreditCard,
-    hideInDev: true,
+    hideWhenBillingDisabled: true,
   },
   {
     id: 'team',
     label: 'Team',
     icon: Users,
-    hideInDev: true,
+    hideWhenBillingDisabled: true,
     requiresTeam: true,
   },
 ]
@@ -99,7 +99,7 @@ export function SettingsNavigation({
   const subscription = getSubscriptionStatus()
 
   const navigationItems = allNavigationItems.filter((item) => {
-    if (item.hideInDev && isDev) {
+    if (item.hideWhenBillingDisabled && !isBillingEnabled) {
       return false
     }
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { X } from 'lucide-react'
 import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui'
-import { client } from '@/lib/auth-client'
+import { isBillingEnabled } from '@/lib/environment'
 import { createLogger } from '@/lib/logs/console/logger'
 import { cn } from '@/lib/utils'
 import {
@@ -82,7 +82,14 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
     }
   }, [onOpenChange])
 
-  const isSubscriptionEnabled = !!client.subscription
+  // Redirect away from billing tabs if billing is disabled
+  useEffect(() => {
+    if (!isBillingEnabled && (activeSection === 'subscription' || activeSection === 'team')) {
+      setActiveSection('general')
+    }
+  }, [activeSection])
+
+  const isSubscriptionEnabled = isBillingEnabled
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -134,9 +141,11 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
                 <Subscription onOpenChange={onOpenChange} />
               </div>
             )}
-            <div className={cn('h-full', activeSection === 'team' ? 'block' : 'hidden')}>
-              <TeamManagement />
-            </div>
+            {isBillingEnabled && (
+              <div className={cn('h-full', activeSection === 'team' ? 'block' : 'hidden')}>
+                <TeamManagement />
+              </div>
+            )}
             <div className={cn('h-full', activeSection === 'privacy' ? 'block' : 'hidden')}>
               <Privacy />
             </div>