@motiadev/workbench 0.13.1-beta.163-660633 → 0.13.1-beta.163-584961

package/dist/src/components/ui/theme-toggle.tsx

@@ -1,54 +0,0 @@
-import { cn, type Theme, useThemeStore } from '@motiadev/ui'
-import { Moon, Sun } from 'lucide-react'
-import type React from 'react'
-import { useEffect } from 'react'
-
-export const ThemeToggle: React.FC = () => {
-  const theme = useThemeStore((state) => state.theme)
-  const setTheme = useThemeStore((state) => state.setTheme)
-
-  const toggleTheme = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light')
-  }
-
-  useEffect(() => {
-    const url = new URL(window.location.href)
-    const colorScheme = url.searchParams.get('color-scheme') as Theme
-    if (colorScheme) {
-      setTheme(colorScheme)
-    }
-  }, [setTheme])
-
-  return (
-    <button
-      onClick={toggleTheme}
-      className="relative flex items-center cursor-pointer w-16 h-8 border bg-muted-foreground/10 rounded-full p-1 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
-      aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
-    >
-      <div
-        className={cn(
-          'absolute w-6 h-6 bg-background border border-border rounded-full shadow-sm transition-transform duration-200 ease-in-out',
-          theme === 'dark' ? 'translate-x-8' : 'translate-x-0',
-        )}
-      />
-
-      <div className="flex items-center justify-center w-6 h-6 z-10">
-        <Sun
-          className={cn(
-            'h-3.5 w-3.5 transition-colors duration-200',
-            theme === 'light' ? 'text-foreground' : 'text-muted-foreground',
-          )}
-        />
-      </div>
-
-      <div className="flex items-center justify-center w-6 h-6 z-10 ml-2">
-        <Moon
-          className={cn(
-            'h-3.5 w-3.5 transition-colors duration-200',
-            theme === 'dark' ? 'text-foreground' : 'text-muted-foreground',
-          )}
-        />
-      </div>
-    </button>
-  )
-}

package/dist/src/components/ui/tooltip.tsx

@@ -1,26 +0,0 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
-import type { ReactNode } from 'react'
-
-export const Tooltip = ({
-  children,
-  content,
-  disabled,
-}: {
-  children: ReactNode
-  content: string | ReactNode
-  disabled?: boolean
-}) => (
-  <TooltipPrimitive.Provider disableHoverableContent={disabled}>
-    <TooltipPrimitive.Root>
-      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-      <TooltipPrimitive.Portal>
-        <TooltipPrimitive.Content className="TooltipContent" side="bottom">
-          <div className="p-2 bg-background text-popover-foreground text-sm rounded-lg border border-light-800">
-            {content}
-          </div>
-          <TooltipPrimitive.Arrow className="TooltipArrow" />
-        </TooltipPrimitive.Content>
-      </TooltipPrimitive.Portal>
-    </TooltipPrimitive.Root>
-  </TooltipPrimitive.Provider>
-)

package/dist/src/hooks/use-debounced.ts

@@ -1,22 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react'
-
-export const useDebounced = (fn: () => void, delay = 500) => {
-  const saveTimeoutRef = useRef<NodeJS.Timeout>(null)
-
-  const debouncedFn = useCallback(() => {
-    if (saveTimeoutRef.current) {
-      clearTimeout(saveTimeoutRef.current)
-    }
-    saveTimeoutRef.current = setTimeout(fn, delay)
-  }, [fn, delay])
-
-  useEffect(() => {
-    return () => {
-      if (saveTimeoutRef.current) {
-        clearTimeout(saveTimeoutRef.current)
-      }
-    }
-  }, [])
-
-  return debouncedFn
-}

package/dist/src/hooks/use-fetch-flows.ts

@@ -1,33 +0,0 @@
-import { useStreamGroup } from '@motiadev/stream-client-react'
-import { useEffect } from 'react'
-import { useFlowStore } from '../stores/use-flow-store'
-import type { FlowResponse } from '../types/flow'
-
-const streamGroupArgs = { streamName: '__motia.flows', groupId: 'default' }
-
-export const useFetchFlows = () => {
-  const setFlows = useFlowStore((state) => state.setFlows)
-  const selectFlowId = useFlowStore((state) => state.selectFlowId)
-  const clearSelectedFlowId = useFlowStore((state) => state.clearSelectedFlowId)
-  const selectedFlowId = useFlowStore((state) => state.selectedFlowId)
-
-  const { data: flows } = useStreamGroup<FlowResponse>(streamGroupArgs)
-
-  useEffect(() => {
-    if (flows) setFlows(flows.map((flow) => flow.id))
-  }, [flows, setFlows])
-
-  useEffect(() => {
-    const hasFlows = flows.length > 0
-    const isSelectedFlowValid = selectedFlowId && flows.some((flow) => flow.id === selectedFlowId)
-
-    if (!hasFlows && selectedFlowId) {
-      clearSelectedFlowId()
-      return
-    }
-
-    if (hasFlows && (!selectedFlowId || !isSelectedFlowValid)) {
-      selectFlowId(flows[0].id)
-    }
-  }, [flows, selectedFlowId, selectFlowId, clearSelectedFlowId])
-}

package/dist/src/hooks/use-mobile.ts

@@ -1,19 +0,0 @@
-import * as React from 'react'
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener('change', onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener('change', onChange)
-  }, [])
-
-  return !!isMobile
-}

package/dist/src/hooks/use-update-handle-positions.ts

@@ -1,42 +0,0 @@
-import { Position, useReactFlow, useUpdateNodeInternals } from '@xyflow/react'
-import type { BaseNodeProps } from '../publicComponents/node-props'
-
-export const useHandlePositions = (data: BaseNodeProps) => {
-  const reactFlow = useReactFlow()
-  const updateNodeInternals = useUpdateNodeInternals()
-  const sourcePosition = data.nodeConfig?.sourceHandlePosition === 'bottom' ? Position.Bottom : Position.Right
-  const targetPosition = data.nodeConfig?.targetHandlePosition === 'top' ? Position.Top : Position.Left
-
-  const updateSourcePosition = (position: 'bottom' | 'right') => {
-    reactFlow.updateNode(data.id, {
-      data: { ...data, nodeConfig: { ...data.nodeConfig, sourceHandlePosition: position } },
-    })
-    updateNodeInternals(data.id)
-  }
-
-  const updateTargetPosition = (position: 'top' | 'left') => {
-    reactFlow.updateNode(data.id, {
-      data: { ...data, nodeConfig: { ...data.nodeConfig, targetHandlePosition: position } },
-    })
-    updateNodeInternals(data.id)
-  }
-
-  const toggleTargetPosition = () => {
-    const newPosition = targetPosition === Position.Top ? Position.Left : Position.Top
-    updateTargetPosition(newPosition)
-  }
-
-  const toggleSourcePosition = () => {
-    const newPosition = sourcePosition === Position.Bottom ? Position.Right : Position.Bottom
-    updateSourcePosition(newPosition)
-  }
-
-  return {
-    sourcePosition,
-    targetPosition,
-    updateSourcePosition,
-    updateTargetPosition,
-    toggleTargetPosition,
-    toggleSourcePosition,
-  }
-}

package/dist/src/lib/__tests__/utils.test.ts

@@ -1,110 +0,0 @@
-import { formatDuration } from '../utils'
-
-describe('formatDuration', () => {
-  describe('milliseconds', () => {
-    it('should format values under 1 second as milliseconds', () => {
-      expect(formatDuration(0)).toBe('0ms')
-      expect(formatDuration(1)).toBe('1ms')
-      expect(formatDuration(250)).toBe('250ms')
-      expect(formatDuration(500)).toBe('500ms')
-      expect(formatDuration(999)).toBe('999ms')
-    })
-  })
-
-  describe('seconds', () => {
-    it('should format values between 1 second and 1 minute as seconds with 1 decimal', () => {
-      expect(formatDuration(1000)).toBe('1.0s')
-      expect(formatDuration(1500)).toBe('1.5s')
-      expect(formatDuration(15000)).toBe('15.0s')
-      expect(formatDuration(45500)).toBe('45.5s')
-      expect(formatDuration(59999)).toBe('60.0s')
-    })
-
-    it('should round to 1 decimal place', () => {
-      expect(formatDuration(1234)).toBe('1.2s')
-      expect(formatDuration(1567)).toBe('1.6s')
-      expect(formatDuration(12345)).toBe('12.3s')
-    })
-  })
-
-  describe('minutes', () => {
-    it('should format values between 1 minute and 1 hour as minutes with 1 decimal', () => {
-      expect(formatDuration(60000)).toBe('1.0min')
-      expect(formatDuration(90000)).toBe('1.5min')
-      expect(formatDuration(300000)).toBe('5.0min')
-      expect(formatDuration(1800000)).toBe('30.0min')
-      expect(formatDuration(3599999)).toBe('60.0min')
-    })
-
-    it('should round to 1 decimal place', () => {
-      expect(formatDuration(123456)).toBe('2.1min')
-      expect(formatDuration(567890)).toBe('9.5min')
-    })
-  })
-
-  describe('hours', () => {
-    it('should format values 1 hour or more as hours with 1 decimal', () => {
-      expect(formatDuration(3600000)).toBe('1.0h')
-      expect(formatDuration(5400000)).toBe('1.5h')
-      expect(formatDuration(7200000)).toBe('2.0h')
-      expect(formatDuration(36000000)).toBe('10.0h')
-    })
-
-    it('should round to 1 decimal place', () => {
-      expect(formatDuration(3661000)).toBe('1.0h')
-      expect(formatDuration(5432100)).toBe('1.5h')
-      expect(formatDuration(9000000)).toBe('2.5h')
-    })
-  })
-
-  describe('edge cases', () => {
-    it('should return "N/A" for undefined', () => {
-      expect(formatDuration(undefined)).toBe('N/A')
-    })
-
-    it('should return "N/A" for null', () => {
-      expect(formatDuration(null as any)).toBe('N/A')
-    })
-
-    it('should return "N/A" for 0 when treated as falsy', () => {
-      expect(formatDuration(0)).toBe('0ms')
-    })
-  })
-
-  describe('boundary values', () => {
-    it('should correctly handle millisecond-second boundary (999ms vs 1.0s)', () => {
-      expect(formatDuration(999)).toBe('999ms')
-      expect(formatDuration(1000)).toBe('1.0s')
-    })
-
-    it('should correctly handle second-minute boundary (59.9s vs 1.0min)', () => {
-      expect(formatDuration(59999)).toBe('60.0s')
-      expect(formatDuration(60000)).toBe('1.0min')
-    })
-
-    it('should correctly handle minute-hour boundary (59.9min vs 1.0h)', () => {
-      expect(formatDuration(3599999)).toBe('60.0min')
-      expect(formatDuration(3600000)).toBe('1.0h')
-    })
-  })
-
-  describe('real-world scenarios', () => {
-    it('should format typical API response times', () => {
-      expect(formatDuration(50)).toBe('50ms')
-      expect(formatDuration(150)).toBe('150ms')
-      expect(formatDuration(2500)).toBe('2.5s')
-    })
-
-    it('should format typical workflow execution times', () => {
-      expect(formatDuration(5000)).toBe('5.0s')
-      expect(formatDuration(30000)).toBe('30.0s')
-      expect(formatDuration(120000)).toBe('2.0min')
-    })
-
-    it('should format long-running tasks', () => {
-      expect(formatDuration(600000)).toBe('10.0min')
-      expect(formatDuration(1800000)).toBe('30.0min')
-      expect(formatDuration(7200000)).toBe('2.0h')
-    })
-  })
-})

package/dist/src/lib/motia-analytics.ts

@@ -1,140 +0,0 @@
-import { useCallback } from 'react'
-
-interface AmplitudeInstance {
-  setOptOut(optOut: boolean): void
-  track(eventName: string, eventProperties?: Record<string, any>): void
-  identify(userId: string, userProperties?: Record<string, any>): void
-  setUserId(userId: string): void
-  getUserId(): string | undefined
-}
-
-declare global {
-  interface Window {
-    amplitude: AmplitudeInstance
-  }
-}
-
-interface AnalyticsUserData {
-  userId: string
-  projectId: string
-  motiaVersion: string
-  analyticsEnabled: boolean
-}
-
-class WorkbenchAnalytics {
-  private isInitialized = false
-  private userIdCache: string | null = null
-  private projectIdCache: string | null = null
-  private motiaVersion: string | null = null
-
-  constructor() {
-    this.initialize()
-  }
-
-  private async initialize() {
-    if (typeof window !== 'undefined' && window.amplitude) {
-      await this.fetchUserData()
-      this.isInitialized = true
-      this.identifyUser()
-    }
-  }
-
-  private async fetchUserData(): Promise<void> {
-    try {
-      const response = await fetch('/motia/analytics/user')
-      if (response.ok) {
-        const data: AnalyticsUserData = await response.json()
-        this.userIdCache = data.userId
-        this.projectIdCache = data.projectId
-        this.motiaVersion = data.motiaVersion
-
-        window.amplitude.setOptOut(!data.analyticsEnabled)
-        // Set the user ID in Amplitude to match backend
-        if (window.amplitude && data.userId) {
-          window.amplitude.setUserId(data.userId)
-        }
-      } else {
-        console.warn('Failed to fetch user data from backend, using fallback')
-        this.userIdCache = this.generateFallbackUserId()
-      }
-    } catch (error) {
-      console.warn('Error fetching user data:', error)
-      this.userIdCache = this.generateFallbackUserId()
-    }
-  }
-
-  private generateFallbackUserId(): string {
-    let userId = localStorage.getItem('motia-user-id')
-    if (!userId) {
-      userId = `user-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-      localStorage.setItem('motia-user-id', userId)
-    }
-    return userId
-  }
-
-  private identifyUser() {
-    if (!this.isInitialized || !this.userIdCache) return
-
-    try {
-      window.amplitude.identify(this.userIdCache, {
-        project_id: this.projectIdCache,
-        browser: this.getBrowserInfo(),
-        screen_resolution: `${window.screen.width}x${window.screen.height}`,
-        workbench_version: this.motiaVersion,
-      })
-    } catch (error) {
-      console.warn('Analytics user identification failed:', error)
-    }
-  }
-
-  private getBrowserInfo(): string {
-    const ua = navigator.userAgent
-    if (ua.includes('Chrome')) return 'Chrome'
-    if (ua.includes('Firefox')) return 'Firefox'
-    if (ua.includes('Safari')) return 'Safari'
-    if (ua.includes('Edge')) return 'Edge'
-    return 'Unknown'
-  }
-
-  // Method to get current user and project IDs for external use
-  getAnalyticsIds() {
-    return {
-      userId: this.userIdCache,
-      projectId: this.projectIdCache,
-    }
-  }
-
-  // Simple track method that preserves the user binding
-  track(eventName: string, properties?: Record<string, any>) {
-    if (!this.isInitialized) return
-
-    const eventProperties = {
-      project_id: this.projectIdCache,
-      source: 'frontend',
-      ...properties,
-    }
-
-    try {
-      window.amplitude.track(eventName, eventProperties)
-    } catch (error) {
-      console.warn('Analytics tracking failed:', error)
-    }
-  }
-}
-
-export const motiaAnalytics = new WorkbenchAnalytics()
-
-export const useAnalytics = () => {
-  const track = useCallback((eventName: string, properties?: Record<string, any>) => {
-    motiaAnalytics.track(eventName, properties)
-  }, [])
-
-  const getAnalyticsIds = useCallback(() => {
-    return motiaAnalytics.getAnalyticsIds()
-  }, [])
-
-  return {
-    track,
-    getAnalyticsIds,
-  }
-}

package/dist/src/lib/plugins.tsx

@@ -1,132 +0,0 @@
-import { plugins } from 'virtual:motia-plugins'
-import { DynamicIcon, dynamicIconImports, type IconName } from 'lucide-react/dynamic'
-import { memo } from 'react'
-import { type AppTab, TabLocation, useAppTabsStore } from '../stores/use-app-tabs-store'
-import { isValidTabLocation } from './utils'
-
-export const registerPluginTabs = (addTab: (position: TabLocation, tab: AppTab) => void): void => {
-  if (!Array.isArray(plugins)) {
-    console.warn('[Motia] Invalid plugins configuration: expected array')
-    return
-  }
-
-  plugins.forEach((plugin, index) => {
-    try {
-      if (!plugin.label) {
-        console.warn(`[Motia] Plugin at index ${index} missing label, skipping`)
-        return
-      }
-
-      if (!plugin.component) {
-        console.warn(`[Motia] Plugin "${plugin.label}" missing component, skipping`)
-        return
-      }
-
-      const position = plugin.position || 'top'
-      if (!isValidTabLocation(position)) {
-        console.warn(`[Motia] Plugin "${plugin.label}" has invalid position "${position}", defaulting to "top"`)
-      }
-
-      const tabLocation = isValidTabLocation(position) ? position : TabLocation.TOP
-
-      const PluginTabLabel = memo(() => {
-        const hasIcon = Object.keys(dynamicIconImports).includes(plugin.labelIcon as IconName)
-        const iconName = hasIcon ? (plugin.labelIcon as IconName) : 'toy-brick'
-
-        if (!hasIcon) {
-          console.warn(
-            `[Motia] Plugin "${plugin.label}" has invalid icon "${plugin.labelIcon}", defaulting to "toy-brick"`,
-          )
-        }
-
-        return (
-          <>
-            <DynamicIcon name={iconName} />
-            <span>{plugin.label}</span>
-          </>
-        )
-      })
-      PluginTabLabel.displayName = `${plugin.label}TabLabel`
-
-      const PluginContent = memo(() => {
-        const Component = plugin.component
-        const props = plugin.props || {}
-
-        if (!Component) {
-          return <div>Error: Plugin component not found</div>
-        }
-
-        return <Component {...props} />
-      })
-      PluginContent.displayName = `${plugin.label}Content`
-
-      addTab(tabLocation, {
-        id: plugin.label.toLowerCase(),
-        tabLabel: PluginTabLabel,
-        content: PluginContent,
-      })
-    } catch (error) {
-      console.error(`[Motia] Error registering plugin "${plugin.label}":`, error)
-    }
-  })
-}
-
-const refreshPluginTabs = (nextPlugins: typeof plugins): void => {
-  try {
-    const state = useAppTabsStore.getState()
-    const { removeTab, addTab } = state
-
-    const idsToRefresh = new Set(nextPlugins.map((p) => (p.label || '').toLowerCase()))
-
-    idsToRefresh.forEach((id) => {
-      removeTab(TabLocation.TOP, id)
-      removeTab(TabLocation.BOTTOM, id)
-    })
-
-    nextPlugins.forEach((plugin, index) => {
-      try {
-        if (!plugin.label || !plugin.component) return
-
-        const position = plugin.position || 'top'
-        const tabLocation = isValidTabLocation(position) ? position : TabLocation.TOP
-
-        const PluginTabLabel = memo(() => {
-          const hasIcon = Object.keys(dynamicIconImports).includes(plugin.labelIcon as IconName)
-          const iconName: IconName = hasIcon ? (plugin.labelIcon as IconName) : 'toy-brick'
-          return (
-            <>
-              <DynamicIcon name={iconName} />
-              <span>{plugin.label}</span>
-            </>
-          )
-        })
-        PluginTabLabel.displayName = `${plugin.label}TabLabel_HMR_${index}`
-
-        const PluginContent = memo(() => {
-          const Component = plugin.component as React.ElementType
-          const props = plugin.props || {}
-          if (!Component) return <div>Error: Plugin component not found</div>
-          return <Component {...props} />
-        })
-        PluginContent.displayName = `${plugin.label}Content_HMR_${index}`
-
-        addTab(tabLocation, {
-          id: plugin.label.toLowerCase(),
-          tabLabel: PluginTabLabel,
-          content: PluginContent,
-        })
-      } catch (error) {
-        console.error(`[Motia] Error refreshing plugin "${plugin.label}":`, error)
-      }
-    })
-  } catch (err) {
-    console.error('[Motia] Failed to refresh plugin tabs via HMR:', err)
-  }
-}
-
-if (import.meta.hot) {
-  import.meta.hot.accept('virtual:motia-plugins', (mod) => {
-    const next = (mod as unknown as { plugins?: typeof plugins })?.plugins || []
-    refreshPluginTabs(next)
-  })
-}

package/dist/src/lib/utils.ts

@@ -1,37 +0,0 @@
-import { TabLocation } from '../stores/use-app-tabs-store'
-
-export const formatDuration = (duration?: number) => {
-  if (duration === undefined || duration === null) return 'N/A'
-  if (duration < 1000) return `${duration}ms`
-  if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`
-  if (duration < 3600000) return `${(duration / 60000).toFixed(1)}min`
-  return `${(duration / 3600000).toFixed(1)}h`
-}
-
-export const formatTimestamp = (time: number) => {
-  const date = new Date(Number(time))
-  return `${date.toLocaleDateString('en-US', { year: undefined, month: 'short', day: '2-digit' })}, ${date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h24' })}.${date.getMilliseconds().toString().padStart(3, '0')}`
-}
-
-export type ViewMode = 'project' | 'system'
-export const DEFAULT_VIEW_MODE: ViewMode = 'system'
-
-export const getViewModeFromURL = (): ViewMode => {
-  try {
-    const url = new URL(window.location.href)
-    const viewMode = url.searchParams.get('view-mode')
-
-    if (viewMode === 'project' || viewMode === 'system') {
-      return viewMode
-    }
-
-    return DEFAULT_VIEW_MODE
-  } catch (error) {
-    console.error('[Motia] Error parsing URL:', error)
-    return DEFAULT_VIEW_MODE
-  }
-}
-
-export const isValidTabLocation = (position: string): position is TabLocation => {
-  return Object.values(TabLocation).includes(position as TabLocation)
-}

package/dist/src/main.tsx

@@ -1,30 +0,0 @@
-import { MotiaStreamProvider } from '@motiadev/stream-client-react'
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { BrowserRouter, Route, Routes } from 'react-router-dom'
-import { App } from './App'
-import { NotFoundPage } from './components/NotFoundPage'
-import { RootMotia } from './components/root-motia'
-import './index.css'
-
-const rootElement = document.getElementById('root')!
-if (!rootElement.innerHTML) {
-  const basePath = workbenchBase
-  const root = createRoot(rootElement)
-  const address = window.location.origin.replace('http', 'ws')
-
-  root.render(
-    <StrictMode>
-      <MotiaStreamProvider address={address}>
-        <RootMotia>
-          <BrowserRouter>
-            <Routes>
-              <Route path={basePath} element={<App />} />
-              <Route path="*" element={<NotFoundPage />} />
-            </Routes>
-          </BrowserRouter>
-        </RootMotia>
-      </MotiaStreamProvider>
-    </StrictMode>,
-  )
-}

package/dist/src/project-view-mode.tsx

@@ -1,32 +0,0 @@
-import { APP_SIDEBAR_CONTAINER_ID, Panel } from '@motiadev/ui'
-import { memo } from 'react'
-import { useShallow } from 'zustand/react/shallow'
-import { type AppTabsState, TabLocation, useAppTabsStore } from './stores/use-app-tabs-store'
-
-const topTabs = (state: AppTabsState) => state.tabs[TabLocation.TOP]
-
-export const ProjectViewMode = memo(() => {
-  const tabs = useAppTabsStore(useShallow(topTabs))
-
-  return (
-    <div className="grid grid-rows-1 grid-cols-[1fr_auto] bg-background text-foreground h-screen ">
-      <main className="m-2 overflow-hidden">
-        <Panel
-          contentClassName={'p-0'}
-          tabs={tabs.map((tab) => {
-            const Element = tab.content
-            const LabelComponent = tab.tabLabel
-            return {
-              label: tab.id,
-              labelComponent: <LabelComponent />,
-              content: <Element />,
-              'data-testid': tab.id,
-            }
-          })}
-        />
-      </main>
-      <div id={APP_SIDEBAR_CONTAINER_ID} />
-    </div>
-  )
-})
-ProjectViewMode.displayName = 'ProjectViewMode'