Fix billing cost attribution and extract hexToRgba utility

- Fix copilot billing counters to only increment for copilot/mcp_copilot sources
  Previously, workspace-chat and mothership_block sources were incorrectly
  attributed to copilot-specific counters (totalCopilotCost, etc.)

- Extract hexToRgba utility from features.tsx and templates.tsx to shared
  lib/core/utils/color.ts to eliminate duplication

Author: cursoragent

apps/sim/app/(home)/components/features/features.tsx

@@ -3,13 +3,7 @@
 import { useState } from 'react'
 import Image from 'next/image'
 import { Badge } from '@/components/emcn'
-
-function hexToRgba(hex: string, alpha: number): 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},${alpha})`
-}
+import { hexToRgba } from '@/lib/core/utils/color'
 
 const FEATURE_TABS = [
   {

apps/sim/app/(home)/components/templates/templates.tsx

@@ -6,6 +6,7 @@ import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { Badge, ChevronDown } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
+import { hexToRgba } from '@/lib/core/utils/color'
 import { TEMPLATE_WORKFLOWS } from '@/app/(home)/components/templates/template-workflows'
 
 const LandingPreviewWorkflow = dynamic(
@@ -19,13 +20,6 @@ const LandingPreviewWorkflow = dynamic(
   }
 )
 
-function hexToRgba(hex: string, alpha: number): 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},${alpha})`
-}
-
 const LEFT_WALL_CLIP = 'polygon(0 8px, 100% 0, 100% 100%, 0 100%)'
 const BOTTOM_WALL_CLIP = 'polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%)'
 

apps/sim/app/api/billing/update-cost/route.ts

@@ -78,6 +78,7 @@ export async function POST(req: NextRequest) {
     }
 
     const { userId, cost, model, inputTokens, outputTokens, source } = validation.data
+    const isCopilot = source === 'copilot' || source === 'mcp_copilot'
     const isMcp = source === 'mcp_copilot'
 
     logger.info(`[${requestId}] Processing cost update`, {
@@ -105,13 +106,16 @@ export async function POST(req: NextRequest) {
     const updateFields: Record<string, unknown> = {
       totalCost: sql`total_cost + ${cost}`,
       currentPeriodCost: sql`current_period_cost + ${cost}`,
-      totalCopilotCost: sql`total_copilot_cost + ${cost}`,
-      currentPeriodCopilotCost: sql`current_period_copilot_cost + ${cost}`,
-      totalCopilotCalls: sql`total_copilot_calls + 1`,
-      totalCopilotTokens: sql`total_copilot_tokens + ${totalTokens}`,
       lastActive: new Date(),
     }
 
+    if (isCopilot) {
+      updateFields.totalCopilotCost = sql`total_copilot_cost + ${cost}`
+      updateFields.currentPeriodCopilotCost = sql`current_period_copilot_cost + ${cost}`
+      updateFields.totalCopilotCalls = sql`total_copilot_calls + 1`
+      updateFields.totalCopilotTokens = sql`total_copilot_tokens + ${totalTokens}`
+    }
+
     if (isMcp) {
       updateFields.totalMcpCopilotCost = sql`total_mcp_copilot_cost + ${cost}`
       updateFields.currentPeriodMcpCopilotCost = sql`current_period_mcp_copilot_cost + ${cost}`

apps/sim/lib/core/utils/color.ts

@@ -0,0 +1,12 @@
+/**
+ * Converts a hex color string to an rgba string with the specified alpha.
+ * @param hex - Hex color string (e.g., '#FF0000')
+ * @param alpha - Alpha value between 0 and 1
+ * @returns An rgba color string (e.g., 'rgba(255,0,0,0.5)')
+ */
+export function hexToRgba(hex: string, alpha: number): 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},${alpha})`
+}