fix(ui): live usage indicator, child trace spans, cancel subscription modal z-index (#2044)

* cleanup

* show trace spans for child blocks that error

* fix z index for cancel subscription popup

* rotating digit live usage indicator

* fix

* remove unused code

* fix type

* fix(billing): fix team upgrade

* fix

* fix tests

---------

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

Author: icecrasher321

apps/sim/app/api/users/me/subscription/[id]/transfer/route.test.ts

@@ -81,9 +81,7 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
       .where(and(eq(member.userId, session.user.id), eq(member.organizationId, organizationId)))
       .then((rows) => rows[0])
 
-    const isPersonalTransfer = sub.referenceId === session.user.id
-
-    if (!isPersonalTransfer && (!mem || (mem.role !== 'owner' && mem.role !== 'admin'))) {
+    if (!mem || (mem.role !== 'owner' && mem.role !== 'admin')) {
       return NextResponse.json(
         { error: 'Unauthorized - user is not admin of organization' },
         { status: 403 }

apps/sim/app/api/users/me/subscription/[id]/transfer/route.ts

@@ -135,18 +135,22 @@ export function TraceSpans({ traceSpans, totalDuration = 0, onExpansionChange }:
         .filter(([, v]) => v)
         .map(([k]) => k)
     )
-    const filterTree = (spans: TraceSpan[]): TraceSpan[] =>
+    const filterTree = (spans: TraceSpan[], parentIsWorkflow = false): TraceSpan[] =>
       spans
-        .map((s) => ({ ...s }))
+        .map((s) => normalizeChildWorkflowSpan(s))
         .filter((s) => {
           const tl = s.type?.toLowerCase?.() || ''
           if (tl === 'workflow') return true
+          if (parentIsWorkflow) return true
           return allowed.has(tl)
         })
-        .map((s) => ({
-          ...s,
-          children: s.children ? filterTree(s.children) : undefined,
-        }))
+        .map((s) => {
+          const tl = s.type?.toLowerCase?.() || ''
+          return {
+            ...s,
+            children: s.children ? filterTree(s.children, tl === 'workflow') : undefined,
+          }
+        })
     return traceSpans ? filterTree(traceSpans) : []
   }, [traceSpans, effectiveTypeFilters])
 
@@ -181,7 +185,6 @@ export function TraceSpans({ traceSpans, totalDuration = 0, onExpansionChange }:
     return () => ro.disconnect()
   }, [])
 
-  // Early return after all hooks are declared to comply with React's Rules of Hooks
   if (!traceSpans || traceSpans.length === 0) {
     return <div className='text-muted-foreground text-sm'>No trace data available</div>
   }
@@ -217,21 +220,19 @@ export function TraceSpans({ traceSpans, totalDuration = 0, onExpansionChange }:
       </div>
       <div ref={containerRef} className='relative w-full overflow-hidden border shadow-sm'>
         {filtered.map((span, index) => {
-          const normalizedSpan = normalizeChildWorkflowSpan(span)
           const hasSubItems = Boolean(
-            (normalizedSpan.children && normalizedSpan.children.length > 0) ||
-              (normalizedSpan.toolCalls && normalizedSpan.toolCalls.length > 0) ||
-              normalizedSpan.input ||
-              normalizedSpan.output
+            (span.children && span.children.length > 0) ||
+              (span.toolCalls && span.toolCalls.length > 0) ||
+              span.input ||
+              span.output
           )
 
-          // Calculate gap from previous span (for sequential execution visualization)
           let gapMs = 0
           let gapPercent = 0
           if (index > 0) {
             const prevSpan = filtered[index - 1]
             const prevEndTime = new Date(prevSpan.endTime).getTime()
-            const currentStartTime = new Date(normalizedSpan.startTime).getTime()
+            const currentStartTime = new Date(span.startTime).getTime()
             gapMs = currentStartTime - prevEndTime
             if (gapMs > 0 && actualTotalDuration > 0) {
               gapPercent = (gapMs / actualTotalDuration) * 100
@@ -241,13 +242,13 @@ export function TraceSpans({ traceSpans, totalDuration = 0, onExpansionChange }:
           return (
             <TraceSpanItem
               key={index}
-              span={normalizedSpan}
+              span={span}
               depth={0}
               totalDuration={
                 actualTotalDuration !== undefined ? actualTotalDuration : totalDuration
               }
               isLast={index === traceSpans.length - 1}
-              parentStartTime={new Date(normalizedSpan.startTime).getTime()}
+              parentStartTime={new Date(span.startTime).getTime()}
               workflowStartTime={workflowStartTime}
               onToggle={handleSpanToggle}
               expandedSpans={expandedSpans}

apps/sim/app/workspace/[workspaceId]/logs/components/trace-spans/trace-spans.tsx

@@ -1,2 +1,2 @@
 export { usePanelResize } from './use-panel-resize'
-export { type UsageData, useUsageLimits } from './use-usage-limits'
+export { useUsageLimits } from './use-usage-limits'