chore: format

frontend/app/src/components/hooks/use-toast.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
-
 import type { ToastActionElement, ToastProps } from '@/components/v1/ui/toast';
+import * as React from 'react';
 
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;

frontend/app/src/components/molecules/confirm-dialog.tsx

@@ -1,11 +1,11 @@
 import { Button, ButtonProps } from '@/components/v1/ui/button';
-import { Spinner } from '@/components/v1/ui/loading.tsx';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
 } from '@/components/v1/ui/dialog';
+import { Spinner } from '@/components/v1/ui/loading.tsx';
 
 interface ConfirmDialogProps {
   title: string;

frontend/app/src/components/molecules/nav-bar/nav-bar.tsx

@@ -1,4 +1,15 @@
-import React from 'react';
+import hatchet from '@/assets/hatchet_logo.png';
+import hatchetDark from '@/assets/hatchet_logo_dark.png';
+import { useSidebar } from '@/components/sidebar-provider';
+import { useTheme } from '@/components/theme-provider';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/v1/ui/breadcrumb';
 import { Button } from '@/components/v1/ui/button';
 import {
   DropdownMenu,
@@ -9,14 +20,17 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/components/v1/ui/dropdown-menu';
-
-import { useNavigate } from 'react-router-dom';
+import { useBreadcrumbs } from '@/hooks/use-breadcrumbs';
+import { usePendingInvites } from '@/hooks/use-pending-invites';
+import { useTenantDetails } from '@/hooks/use-tenant';
 import api, { TenantMember, User } from '@/lib/api';
 import { useApiError } from '@/lib/hooks';
+import useApiMeta from '@/pages/auth/hooks/use-api-meta';
+import { VersionInfo } from '@/pages/main/info/components/version-info';
 import { useMutation } from '@tanstack/react-query';
-import hatchet from '@/assets/hatchet_logo.png';
-import hatchetDark from '@/assets/hatchet_logo_dark.png';
-import { useSidebar } from '@/components/sidebar-provider';
+import { Menu } from 'lucide-react';
+import React from 'react';
+import { useMemo } from 'react';
 import {
   BiBook,
   BiCalendar,
@@ -27,22 +41,7 @@ import {
   BiUserCircle,
   BiEnvelope,
 } from 'react-icons/bi';
-import { Menu } from 'lucide-react';
-import { useTheme } from '@/components/theme-provider';
-import { useMemo } from 'react';
-import useApiMeta from '@/pages/auth/hooks/use-api-meta';
-import { VersionInfo } from '@/pages/main/info/components/version-info';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/v1/ui/breadcrumb';
-import { useBreadcrumbs } from '@/hooks/use-breadcrumbs';
-import { usePendingInvites } from '@/hooks/use-pending-invites';
-import { useTenantDetails } from '@/hooks/use-tenant';
+import { useNavigate } from 'react-router-dom';
 
 function HelpDropdown() {
   const meta = useApiMeta();

frontend/app/src/components/refetch-interval-dropdown.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { Button } from './v1/ui/button';
 import {
   Select,
   SelectContent,
@@ -6,10 +6,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/v1/ui/select';
+import { useRefetchInterval } from '@/contexts/refetch-interval-context';
 import { RefetchInterval, RefetchIntervalOption } from '@/lib/api/api';
 import { RefreshCw } from 'lucide-react';
-import { useRefetchInterval } from '@/contexts/refetch-interval-context';
-import { Button } from './v1/ui/button';
+import { useMemo } from 'react';
 
 type RefetchIntervalDropdownProps = {
   isRefetching: boolean;

frontend/app/src/components/side-panel.tsx

@@ -1,13 +1,13 @@
-import { useSidePanel } from '@/hooks/use-side-panel';
+import { Button } from './v1/ui/button';
 import { useLocalStorageState } from '@/hooks/use-local-storage-state';
+import { useSidePanel } from '@/hooks/use-side-panel';
+import { cn } from '@/lib/utils';
 import {
   Cross2Icon,
   ChevronLeftIcon,
   ChevronRightIcon,
 } from '@radix-ui/react-icons';
-import { Button } from './v1/ui/button';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { cn } from '@/lib/utils';
 
 const DEFAULT_PANEL_WIDTH = 650;
 const MIN_PANEL_WIDTH = 350;

frontend/app/src/components/v1/cloud/billing/payment-methods.tsx

@@ -1,4 +1,10 @@
 import { Button } from '@/components/v1/ui/button';
+import { Spinner } from '@/components/v1/ui/loading';
+import { useCurrentTenantId } from '@/hooks/use-tenant';
+import { cloudApi } from '@/lib/api/api';
+import { TenantPaymentMethod } from '@/lib/api/generated/cloud/data-contracts';
+import { useApiError } from '@/lib/hooks';
+import { useState } from 'react';
 import {
   FaCcAmex,
   FaCcDiscover,
@@ -8,16 +14,8 @@ import {
   FaCcDinersClub,
   FaCcJcb,
 } from 'react-icons/fa';
-
-import { LuBanknote } from 'react-icons/lu';
-
 import { IconType } from 'react-icons/lib';
-import { useApiError } from '@/lib/hooks';
-import { useState } from 'react';
-import { Spinner } from '@/components/v1/ui/loading';
-import { TenantPaymentMethod } from '@/lib/api/generated/cloud/data-contracts';
-import { cloudApi } from '@/lib/api/api';
-import { useCurrentTenantId } from '@/hooks/use-tenant';
+import { LuBanknote } from 'react-icons/lu';
 
 const ccIcons: Record<string, IconType> = {
   visa: FaCcVisa,

frontend/app/src/components/v1/cloud/logging/logs.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useRef, useState } from 'react';
 import AnsiToHtml from 'ansi-to-html';
 import DOMPurify from 'dompurify';
+import React, { useEffect, useRef, useState } from 'react';
 
 const convert = new AnsiToHtml({
   newline: true,

frontend/app/src/components/v1/hooks/use-toast.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
-
 import type { ToastActionElement, ToastProps } from '@/components/v1/ui/toast';
+import * as React from 'react';
 
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;

frontend/app/src/components/v1/molecules/charts/zoomable.tsx

@@ -1,3 +1,10 @@
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/v1/ui/chart';
+import { capitalize, cn } from '@/lib/utils';
 import { useState, useMemo, useRef } from 'react';
 import {
   CartesianGrid,
@@ -12,13 +19,6 @@ import {
   Area,
   AreaChart,
 } from 'recharts';
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from '@/components/v1/ui/chart';
-import { capitalize, cn } from '@/lib/utils';
 
 export type DataPoint<T extends string> = Record<T, number> & {
   date: string;

frontend/app/src/components/v1/molecules/combobox/combobox.tsx

@@ -1,7 +1,4 @@
-import * as React from 'react';
-import { CheckIcon, PlusCircledIcon } from '@radix-ui/react-icons';
-
-import { cn } from '@/lib/utils';
+import { ToolbarType } from '../data-table/data-table-toolbar';
 import { Badge } from '@/components/v1/ui/badge';
 import { Button } from '@/components/v1/ui/button';
 import {
@@ -13,18 +10,20 @@ import {
   CommandList,
   CommandSeparator,
 } from '@/components/v1/ui/command';
+import { Input } from '@/components/v1/ui/input';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/components/v1/ui/popover';
 import { Separator } from '@/components/v1/ui/separator';
-import { ToolbarType } from '../data-table/data-table-toolbar';
-import { Input } from '@/components/v1/ui/input';
-import { BiX } from 'react-icons/bi';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
+import { cn } from '@/lib/utils';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { CheckIcon, PlusCircledIcon } from '@radix-ui/react-icons';
+import * as React from 'react';
+import { useForm } from 'react-hook-form';
+import { BiX } from 'react-icons/bi';
+import { z } from 'zod';
 
 const keyValuePairSchema = z.object({
   key: z.string().min(1, 'Key is required'),

frontend/app/src/components/v1/molecules/confirm-dialog.tsx

@@ -1,11 +1,11 @@
 import { Button, ButtonProps } from '@/components/v1/ui/button';
-import { Spinner } from '@/components/v1/ui/loading.tsx';
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
 } from '@/components/v1/ui/dialog';
+import { Spinner } from '@/components/v1/ui/loading.tsx';
 
 interface ConfirmDialogProps {
   title: string;

frontend/app/src/components/v1/molecules/data-table/data-table-column-header.tsx

@@ -1,12 +1,3 @@
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  CaretSortIcon,
-  EyeNoneIcon,
-} from '@radix-ui/react-icons';
-import { Column } from '@tanstack/react-table';
-
-import { cn } from '@/lib/utils';
 import { Button } from '@/components/v1/ui/button';
 import {
   DropdownMenu,
@@ -15,6 +6,14 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/v1/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CaretSortIcon,
+  EyeNoneIcon,
+} from '@radix-ui/react-icons';
+import { Column } from '@tanstack/react-table';
 
 interface DataTableColumnHeaderProps<TData, TValue>
   extends React.HTMLAttributes<HTMLDivElement> {

frontend/app/src/components/v1/molecules/data-table/data-table-options.tsx

@@ -1,30 +1,20 @@
-import * as React from 'react';
-import { Cross2Icon, MixerHorizontalIcon } from '@radix-ui/react-icons';
-import { ColumnFiltersState, Table } from '@tanstack/react-table';
-import { Button } from '@/components/v1/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@/components/v1/ui/dropdown-menu';
-import { Badge } from '@/components/v1/ui/badge';
-import { ChevronDownIcon } from '@radix-ui/react-icons';
-import {
-  flattenDAGsKey,
-  createdAfterKey,
-  finishedBeforeKey,
-  statusKey,
-  isCustomTimeRangeKey,
-  timeWindowKey,
-} from '@/pages/main/v1/workflow-runs-v1/components/v1/task-runs-columns';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs';
 import { ToolbarFilters } from './data-table-toolbar';
 import {
   ToolbarType,
   FilterOption,
   TimeRangeConfig,
 } from './data-table-toolbar';
-import { Input } from '@/components/v1/ui/input';
+import { DateTimePicker } from '@/components/v1/molecules/time-picker/date-time-picker';
+import { Badge } from '@/components/v1/ui/badge';
+import { Button } from '@/components/v1/ui/button';
 import { Checkbox } from '@/components/v1/ui/checkbox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/components/v1/ui/dropdown-menu';
+import { Input } from '@/components/v1/ui/input';
 import { Label } from '@/components/v1/ui/label';
 import {
   Select,
@@ -33,11 +23,21 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/v1/ui/select';
-import { DateTimePicker } from '@/components/v1/molecules/time-picker/date-time-picker';
-import { XCircleIcon } from '@heroicons/react/24/outline';
-import { Column } from '@tanstack/react-table';
 import { V1TaskStatus } from '@/lib/api';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs';
+import {
+  flattenDAGsKey,
+  createdAfterKey,
+  finishedBeforeKey,
+  statusKey,
+  isCustomTimeRangeKey,
+  timeWindowKey,
+} from '@/pages/main/v1/workflow-runs-v1/components/v1/task-runs-columns';
+import { XCircleIcon } from '@heroicons/react/24/outline';
+import { Cross2Icon, MixerHorizontalIcon } from '@radix-ui/react-icons';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+import { ColumnFiltersState, Table } from '@tanstack/react-table';
+import { Column } from '@tanstack/react-table';
+import * as React from 'react';
 
 interface FilterControlProps<TData> {
   column?: Column<TData, any>;

frontend/app/src/components/v1/molecules/data-table/data-table-pagination.tsx

@@ -1,11 +1,3 @@
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DoubleArrowLeftIcon,
-  DoubleArrowRightIcon,
-} from '@radix-ui/react-icons';
-import { Table } from '@tanstack/react-table';
-
 import { Button } from '@/components/v1/ui/button';
 import {
   Select,
@@ -14,7 +6,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/v1/ui/select';
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon,
+} from '@radix-ui/react-icons';
 import { Label } from '@radix-ui/react-label';
+import { Table } from '@tanstack/react-table';
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;

frontend/app/src/components/v1/molecules/data-table/data-table-row-actions.tsx

@@ -1,6 +1,4 @@
-import { DotsVerticalIcon } from '@radix-ui/react-icons';
-import { Row } from '@tanstack/react-table';
-
+import { IDGetter } from './data-table';
 import { Button } from '@/components/v1/ui/button';
 import {
   DropdownMenu,
@@ -8,14 +6,14 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/v1/ui/dropdown-menu';
-
-import { IDGetter } from './data-table';
 import {
   Tooltip,
   TooltipProvider,
   TooltipTrigger,
   TooltipContent,
 } from '@/components/v1/ui/tooltip';
+import { DotsVerticalIcon } from '@radix-ui/react-icons';
+import { Row } from '@tanstack/react-table';
 
 interface DataTableRowActionsProps<TData extends IDGetter<TData>> {
   row: Row<TData>;

frontend/app/src/components/v1/molecules/data-table/data-table-toolbar.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { Table } from '@tanstack/react-table';
 import { DataTableOptions } from './data-table-options';
-import { Spinner } from '@/components/v1/ui/loading';
 import { RefetchIntervalDropdown } from '@/components/refetch-interval-dropdown';
-import { TableActions } from '@/pages/main/v1/workflow-runs-v1/components/task-runs-table/table-actions';
+import { Spinner } from '@/components/v1/ui/loading';
 import {
   ActionType,
   BaseTaskRunActionParams,
 } from '@/pages/main/v1/task-runs-v1/actions';
+import { TableActions } from '@/pages/main/v1/workflow-runs-v1/components/task-runs-table/table-actions';
+import { Table } from '@tanstack/react-table';
+import * as React from 'react';
 
 export interface FilterOption {
   label: string;

frontend/app/src/components/v1/molecules/data-table/data-table.tsx

@@ -1,4 +1,21 @@
-import * as React from 'react';
+import { DataTablePagination } from './data-table-pagination';
+import {
+  DataTableToolbar,
+  ShowTableActionsProps,
+  ToolbarFilters,
+} from './data-table-toolbar';
+import { Skeleton } from '@/components/v1/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/v1/ui/table';
+import { cn } from '@/lib/utils';
+import { ConfirmActionModal } from '@/pages/main/v1/task-runs-v1/actions';
+import { flattenDAGsKey } from '@/pages/main/v1/workflow-runs-v1/components/v1/task-runs-columns';
 import {
   ColumnDef,
   ColumnFiltersState,
@@ -18,26 +35,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/v1/ui/table';
-
-import { DataTablePagination } from './data-table-pagination';
-import {
-  DataTableToolbar,
-  ShowTableActionsProps,
-  ToolbarFilters,
-} from './data-table-toolbar';
-import { Skeleton } from '@/components/v1/ui/skeleton';
-import { cn } from '@/lib/utils';
-import { ConfirmActionModal } from '@/pages/main/v1/task-runs-v1/actions';
-import { flattenDAGsKey } from '@/pages/main/v1/workflow-runs-v1/components/v1/task-runs-columns';
+import * as React from 'react';
 
 export interface IDGetter<T> {
   metadata: {

frontend/app/src/components/v1/molecules/nav-bar/organization-selector.tsx

@@ -1,13 +1,4 @@
 import { Button } from '@/components/v1/ui/button';
-import { cn } from '@/lib/utils';
-import {
-  BuildingOffice2Icon,
-  Cog6ToothIcon,
-  PlusIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-} from '@heroicons/react/24/outline';
 import {
   Command,
   CommandEmpty,
@@ -15,14 +6,6 @@ import {
   CommandItem,
   CommandList,
 } from '@/components/v1/ui/command';
-import { Tenant, TenantMember } from '@/lib/api';
-import { OrganizationForUser } from '@/lib/api/generated/cloud/data-contracts';
-import { CaretSortIcon } from '@radix-ui/react-icons';
-import {
-  PopoverTrigger,
-  Popover,
-  PopoverContent,
-} from '@radix-ui/react-popover';
 import {
   Dialog,
   DialogContent,
@@ -32,10 +15,27 @@ import {
 } from '@/components/v1/ui/dialog';
 import { Input } from '@/components/v1/ui/input';
 import { TooltipProvider } from '@/components/v1/ui/tooltip';
+import { useOrganizations } from '@/hooks/use-organizations';
+import { useTenantDetails } from '@/hooks/use-tenant';
+import { Tenant, TenantMember } from '@/lib/api';
+import { OrganizationForUser } from '@/lib/api/generated/cloud/data-contracts';
+import { cn } from '@/lib/utils';
+import {
+  BuildingOffice2Icon,
+  Cog6ToothIcon,
+  PlusIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+} from '@heroicons/react/24/outline';
+import { CaretSortIcon } from '@radix-ui/react-icons';
+import {
+  PopoverTrigger,
+  Popover,
+  PopoverContent,
+} from '@radix-ui/react-popover';
 import { useState, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useTenantDetails } from '@/hooks/use-tenant';
-import { useOrganizations } from '@/hooks/use-organizations';
 import invariant from 'tiny-invariant';
 
 interface OrganizationGroupProps {

frontend/app/src/components/v1/molecules/nav-bar/tenant-switcher.tsx

@@ -1,11 +1,4 @@
 import { Button } from '@/components/v1/ui/button';
-import { cn } from '@/lib/utils';
-import {
-  BuildingOffice2Icon,
-  // ChartBarSquareIcon,
-  CheckIcon,
-} from '@heroicons/react/24/outline';
-import invariant from 'tiny-invariant';
 import {
   Command,
   CommandEmpty,
@@ -13,8 +6,17 @@ import {
   CommandList,
   CommandSeparator,
 } from '@/components/v1/ui/command';
-import { Link } from 'react-router-dom';
+import { Spinner } from '@/components/v1/ui/loading.tsx';
+import { useOrganizations } from '@/hooks/use-organizations';
+import { useTenantDetails } from '@/hooks/use-tenant';
 import { TenantMember } from '@/lib/api';
+import { cn } from '@/lib/utils';
+import useApiMeta from '@/pages/auth/hooks/use-api-meta';
+import {
+  BuildingOffice2Icon,
+  // ChartBarSquareIcon,
+  CheckIcon,
+} from '@heroicons/react/24/outline';
 import { CaretSortIcon, PlusCircledIcon } from '@radix-ui/react-icons';
 import {
   PopoverTrigger,
@@ -22,10 +24,8 @@ import {
   PopoverContent,
 } from '@radix-ui/react-popover';
 import React from 'react';
-import { Spinner } from '@/components/v1/ui/loading.tsx';
-import useApiMeta from '@/pages/auth/hooks/use-api-meta';
-import { useTenantDetails } from '@/hooks/use-tenant';
-import { useOrganizations } from '@/hooks/use-organizations';
+import { Link } from 'react-router-dom';
+import invariant from 'tiny-invariant';
 
 interface TenantSwitcherProps {
   className?: string;

frontend/app/src/components/v1/molecules/relative-date.tsx

@@ -1,5 +1,3 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import TimeAgo from 'timeago-react';
 import {
   PortalTooltip,
   PortalTooltipTrigger,
@@ -7,6 +5,8 @@ import {
   PortalTooltipProvider,
 } from '@/components/v1/ui/portal-tooltip';
 import { format, parseISO } from 'date-fns';
+import React, { useEffect, useMemo, useState } from 'react';
+import TimeAgo from 'timeago-react';
 
 interface RelativeDateProps {
   date?: Date | string;

frontend/app/src/components/v1/molecules/time-picker/date-time-picker.tsx

@@ -1,5 +1,4 @@
-import { add, format } from 'date-fns';
-import { cn } from '@/lib/utils';
+import { TimePicker } from './time-picker';
 import { Button } from '@/components/v1/ui/button';
 import { Calendar } from '@/components/v1/ui/calendar';
 import {
@@ -7,8 +6,9 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/v1/ui/popover';
-import { TimePicker } from './time-picker';
+import { cn } from '@/lib/utils';
 import { CalendarIcon } from '@radix-ui/react-icons';
+import { add, format } from 'date-fns';
 
 type DateTimePickerProps = {
   date: Date | undefined;

frontend/app/src/components/v1/molecules/time-picker/time-picker-input.tsx

@@ -1,7 +1,3 @@
-import { Input } from '@/components/v1/ui/input';
-
-import { cn } from '@/lib/utils';
-import React from 'react';
 import {
   Period,
   TimePickerType,
@@ -9,6 +5,9 @@ import {
   getDateByType,
   setDateByType,
 } from './time-picker-utils';
+import { Input } from '@/components/v1/ui/input';
+import { cn } from '@/lib/utils';
+import React from 'react';
 
 interface TimePickerInputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {

frontend/app/src/components/v1/molecules/time-picker/time-picker.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { Label } from '@/components/v1/ui/label';
 import { TimePickerInput } from './time-picker-input';
+import { Label } from '@/components/v1/ui/label';
+import * as React from 'react';
 
 interface TimePickerProps {
   date: Date | undefined;

frontend/app/src/components/v1/shared/copy-workflow-config.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
 import { Button } from '../ui/button';
 import { CheckIcon, CopyIcon } from 'lucide-react';
+import { useState } from 'react';
 
 export function CopyWorkflowConfigButton({
   workflowConfig,

frontend/app/src/components/v1/shared/duration.tsx

@@ -1,8 +1,3 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-import { intervalToDuration } from 'date-fns';
-import { Clock } from 'lucide-react';
 import {
   PortalTooltip,
   PortalTooltipTrigger,
@@ -10,7 +5,12 @@ import {
   PortalTooltipProvider,
 } from '@/components/v1/ui/portal-tooltip';
 import { V1TaskStatus } from '@/lib/api';
+import { cn } from '@/lib/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { intervalToDuration } from 'date-fns';
 import { Duration as DateFnsDuration } from 'date-fns';
+import { Clock } from 'lucide-react';
+import * as React from 'react';
 
 function formatDuration(duration: DateFnsDuration, rawTimeMs: number): string {
   const parts = [];

frontend/app/src/components/v1/ui/accordion.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import { cn } from '@/lib/utils';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 const Accordion = AccordionPrimitive.Root;
 

frontend/app/src/components/v1/ui/alert.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
 import { cn } from '@/lib/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
 const alertVariants = cva(
   'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',

frontend/app/src/components/v1/ui/avatar.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-
 import { cn } from '@/lib/utils';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,

frontend/app/src/components/v1/ui/badge.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
 import { cn } from '@/lib/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
 const badgeVariants = cva(
   'inline-flex items-center rounded-md border px-3 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',

frontend/app/src/components/v1/ui/breadcrumb.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import { cn } from '@/lib/utils';
 import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
 import { Slot } from '@radix-ui/react-slot';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,

frontend/app/src/components/v1/ui/button.tsx

@@ -1,14 +1,13 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from './tooltip';
+import { cn } from '@/lib/utils';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',

frontend/app/src/components/v1/ui/calendar.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
-import { DayPicker } from 'react-day-picker';
-
-import { cn } from '@/lib/utils';
 import { buttonVariants } from '@/components/v1/ui/button';
+import { cn } from '@/lib/utils';
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
 
 type CalendarProps = React.ComponentProps<typeof DayPicker>;
 

frontend/app/src/components/v1/ui/card.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react';
-
 import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 const Card = React.forwardRef<
   HTMLDivElement,

frontend/app/src/components/v1/ui/chart.tsx

@@ -1,8 +1,7 @@
+import { cn } from '@/lib/utils';
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
 
-import { cn } from '@/lib/utils';
-
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: '', dark: '.dark' } as const;
 

frontend/app/src/components/v1/ui/checkbox.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import { cn } from '@/lib/utils';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

frontend/app/src/components/v1/ui/code-editor.tsx

@@ -1,8 +1,8 @@
 import CopyToClipboard from './copy-to-clipboard';
+import { useTheme } from '@/components/theme-provider';
 import { cn } from '@/lib/utils';
 import Editor, { Monaco } from '@monaco-editor/react';
 import 'monaco-themes/themes/Pastels on Dark.json';
-import { useTheme } from '@/components/theme-provider';
 
 interface CodeEditorProps {
   code?: string;

frontend/app/src/components/v1/ui/code-highlighter.tsx

@@ -1,16 +1,14 @@
+import CopyToClipboard from './copy-to-clipboard';
+import { useTheme } from '@/components/theme-provider';
+import { cn } from '@/lib/utils';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
-
+import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
 import typescript from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript';
 import yaml from 'react-syntax-highlighter/dist/esm/languages/hljs/yaml';
-import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
-
 import {
   anOldHope,
   atomOneLight,
 } from 'react-syntax-highlighter/dist/esm/styles/hljs';
-import CopyToClipboard from './copy-to-clipboard';
-import { cn } from '@/lib/utils';
-import { useTheme } from '@/components/theme-provider';
 
 SyntaxHighlighter.registerLanguage('typescript', typescript);
 SyntaxHighlighter.registerLanguage('yaml', yaml);

frontend/app/src/components/v1/ui/command.tsx

@@ -1,10 +1,9 @@
-import * as React from 'react';
+import { Dialog, DialogContent } from '@/components/v1/ui/dialog';
+import { cn } from '@/lib/utils';
 import { type DialogProps } from '@radix-ui/react-dialog';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { Command as CommandPrimitive } from 'cmdk';
-
-import { cn } from '@/lib/utils';
-import { Dialog, DialogContent } from '@/components/v1/ui/dialog';
+import * as React from 'react';
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,

frontend/app/src/components/v1/ui/copy-to-clipboard.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
 import { Button } from './button';
-import { CopyIcon } from '@radix-ui/react-icons';
-import { CheckIcon } from '@heroicons/react/24/outline';
 import { cn } from '@/lib/utils';
+import { CheckIcon } from '@heroicons/react/24/outline';
+import { CopyIcon } from '@radix-ui/react-icons';
+import React, { useState } from 'react';
 
 type Props = {
   text: string;

frontend/app/src/components/v1/ui/dialog.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-
 import { cn } from '@/lib/utils';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as React from 'react';
 
 const Dialog = DialogPrimitive.Root;
 

frontend/app/src/components/v1/ui/dropdown-menu.tsx

@@ -1,12 +1,11 @@
-import * as React from 'react';
+import { cn } from '@/lib/utils';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import {
   CheckIcon,
   ChevronRightIcon,
   DotFilledIcon,
 } from '@radix-ui/react-icons';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

frontend/app/src/components/v1/ui/envvar.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect } from 'react';
-import { Input } from '@/components/v1/ui/input';
 import { Textarea } from './textarea';
 import { Button } from '@/components/v1/ui/button';
+import { Input } from '@/components/v1/ui/input';
 import { cn } from '@/lib/utils';
 import { TrashIcon } from '@radix-ui/react-icons';
+import React, { useEffect } from 'react';
 
 export type KeyValueType = {
   key: string;

frontend/app/src/components/v1/ui/hover-card.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
-
 import { cn } from '@/lib/utils';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as React from 'react';
 
 const HoverCard = HoverCardPrimitive.Root;
 

frontend/app/src/components/v1/ui/input.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react';
-
 import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 

frontend/app/src/components/v1/ui/label.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import { cn } from '@/lib/utils';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',

frontend/app/src/components/v1/ui/popover.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-
 import { cn } from '@/lib/utils';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
 
 const Popover = PopoverPrimitive.Root;
 

frontend/app/src/components/v1/ui/portal-tooltip.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cn } from '@/lib/utils';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import React from 'react';
 
 const PortalTooltipProvider = TooltipPrimitive.Provider;
 

frontend/app/src/components/v1/ui/radio-group.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { cn } from '@/lib/utils';
 import { DotFilledIcon } from '@radix-ui/react-icons';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as React from 'react';
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,

frontend/app/src/components/v1/ui/secret-copier.tsx

@@ -1,23 +1,23 @@
-import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
-import typescript from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript';
-import yaml from 'react-syntax-highlighter/dist/esm/languages/hljs/yaml';
-import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
-import {
-  anOldHope,
-  atomOneLight,
-} from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { Button } from './button';
 import CopyToClipboard from './copy-to-clipboard';
-import { useRef, useState } from 'react';
-import { cn } from '@/lib/utils';
+import { useTheme } from '@/components/theme-provider';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/v1/ui/dropdown-menu';
-import { Button } from './button';
+import { cn } from '@/lib/utils';
 import { CaretSortIcon } from '@radix-ui/react-icons';
-import { useTheme } from '@/components/theme-provider';
+import { useRef, useState } from 'react';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
+import typescript from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript';
+import yaml from 'react-syntax-highlighter/dist/esm/languages/hljs/yaml';
+import {
+  anOldHope,
+  atomOneLight,
+} from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 SyntaxHighlighter.registerLanguage('typescript', typescript);
 SyntaxHighlighter.registerLanguage('yaml', yaml);

frontend/app/src/components/v1/ui/select.tsx

@@ -1,12 +1,11 @@
-import * as React from 'react';
+import { cn } from '@/lib/utils';
 import {
   CheckIcon,
   ChevronDownIcon,
   ChevronUpIcon,
 } from '@radix-ui/react-icons';
 import * as SelectPrimitive from '@radix-ui/react-select';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 const Select = SelectPrimitive.Root;
 

frontend/app/src/components/v1/ui/separator.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-
 import { cn } from '@/lib/utils';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,

frontend/app/src/components/v1/ui/steps.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from './accordion';
+import { cn } from '@/lib/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
 const stepsVariants = cva(
   'ml-4 mb-12 border-l border-border pl-6 dark:border-border [counter-reset:step] flex flex-col gap-4',

frontend/app/src/components/v1/ui/switch.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-
 import { cn } from '@/lib/utils';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as React from 'react';
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,

frontend/app/src/components/v1/ui/table.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react';
-
 import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 const Table = React.forwardRef<
   HTMLTableElement,

frontend/app/src/components/v1/ui/tabs.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import { cn } from '@/lib/utils';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { cva } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 const Tabs = TabsPrimitive.Root;
 

frontend/app/src/components/v1/ui/textarea.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react';
-
 import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

frontend/app/src/components/v1/ui/toast.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
+import { cn } from '@/lib/utils';
 import { Cross2Icon } from '@radix-ui/react-icons';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 const ToastProvider = ToastPrimitives.Provider;
 

frontend/app/src/components/v1/ui/tooltip.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-
 import { cn } from '@/lib/utils';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
 
 const TooltipProvider = TooltipPrimitive.Provider;
 

frontend/app/src/contexts/refetch-interval-context.tsx

@@ -1,3 +1,9 @@
+import { useLocalStorageState } from '@/hooks/use-local-storage-state';
+import {
+  RefetchInterval,
+  RefetchIntervalOption,
+  LabeledRefetchInterval,
+} from '@/lib/api/api';
 import {
   createContext,
   useCallback,
@@ -5,12 +11,6 @@ import {
   useMemo,
   ReactNode,
 } from 'react';
-import {
-  RefetchInterval,
-  RefetchIntervalOption,
-  LabeledRefetchInterval,
-} from '@/lib/api/api';
-import { useLocalStorageState } from '@/hooks/use-local-storage-state';
 
 interface RefetchIntervalContextType {
   isFrozen: boolean;

frontend/app/src/hooks/use-analytics.tsx

@@ -1,6 +1,6 @@
-import { useCallback } from 'react';
-import { usePostHog } from 'posthog-js/react';
 import { useTenantDetails } from './use-tenant';
+import { usePostHog } from 'posthog-js/react';
+import { useCallback } from 'react';
 
 interface AnalyticsEvent {
   [key: string]: unknown;

frontend/app/src/hooks/use-breadcrumbs.ts

@@ -1,5 +1,5 @@
-import { useLocation, useParams } from 'react-router-dom';
 import { generateBreadcrumbs, BreadcrumbItem } from '@/lib/breadcrumbs';
+import { useLocation, useParams } from 'react-router-dom';
 
 export function useBreadcrumbs(): BreadcrumbItem[] {
   const location = useLocation();

frontend/app/src/hooks/use-organizations.ts

@@ -1,14 +1,14 @@
-import { useMemo, useCallback } from 'react';
-import { useQuery, useMutation } from '@tanstack/react-query';
 import { cloudApi } from '@/lib/api/api';
-import useCloudApiMeta from '@/pages/auth/hooks/use-cloud-api-meta';
-import { useApiError } from '@/lib/hooks';
 import {
   CreateManagementTokenResponse,
   ManagementTokenDuration,
   OrganizationMember,
   TenantStatusType,
 } from '@/lib/api/generated/cloud/data-contracts';
+import { useApiError } from '@/lib/hooks';
+import useCloudApiMeta from '@/pages/auth/hooks/use-cloud-api-meta';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { useMemo, useCallback } from 'react';
 
 export function useOrganizations() {
   const { isCloudEnabled } = useCloudApiMeta();

frontend/app/src/hooks/use-pending-invites.ts

@@ -1,7 +1,7 @@
-import { useQuery } from '@tanstack/react-query';
 import api from '@/lib/api';
 import { cloudApi } from '@/lib/api/api';
 import useCloudApiMeta from '@/pages/auth/hooks/use-cloud-api-meta';
+import { useQuery } from '@tanstack/react-query';
 
 export const usePendingInvites = () => {
   const { data: cloudMeta } = useCloudApiMeta();

frontend/app/src/hooks/use-side-panel.tsx

@@ -1,3 +1,13 @@
+import { useTheme } from '@/components/theme-provider';
+import { DocPage } from '@/components/v1/docs/docs-button';
+import { V1Event, V1Filter, ScheduledWorkflows } from '@/lib/api';
+import { ExpandedEventContent } from '@/pages/main/v1/events';
+import { FilterDetailView } from '@/pages/main/v1/filters/components/filter-detail-view';
+import { ExpandedScheduledRunContent } from '@/pages/main/v1/scheduled-runs/components/expanded-scheduled-run-content';
+import {
+  TaskRunDetail,
+  TabOption,
+} from '@/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/step-run-detail';
 import {
   createContext,
   useCallback,
@@ -7,16 +17,6 @@ import {
   useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import {
-  TaskRunDetail,
-  TabOption,
-} from '@/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/step-run-detail';
-import { DocPage } from '@/components/v1/docs/docs-button';
-import { V1Event, V1Filter, ScheduledWorkflows } from '@/lib/api';
-import { FilterDetailView } from '@/pages/main/v1/filters/components/filter-detail-view';
-import { ExpandedEventContent } from '@/pages/main/v1/events';
-import { ExpandedScheduledRunContent } from '@/pages/main/v1/scheduled-runs/components/expanded-scheduled-run-content';
-import { useTheme } from '@/components/theme-provider';
 
 type SidePanelContent =
   | {

frontend/app/src/hooks/use-tenant.tsx

@@ -1,17 +1,17 @@
-import { useCallback, useMemo, useState } from 'react';
 import api, {
   UpdateTenantRequest,
   Tenant,
   CreateTenantRequest,
   queries,
 } from '@/lib/api';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import invariant from 'tiny-invariant';
 import { BillingContext, lastTenantAtom } from '@/lib/atoms';
-import useCloudApiMeta from '@/pages/auth/hooks/use-cloud-api-meta';
 import { Evaluate } from '@/lib/can/shared/permission.base';
+import useCloudApiMeta from '@/pages/auth/hooks/use-cloud-api-meta';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useAtom } from 'jotai';
+import { useCallback, useMemo, useState } from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import invariant from 'tiny-invariant';
 
 type Plan = 'free' | 'starter' | 'growth';
 

frontend/app/src/hooks/use-zod-column-filters.ts

@@ -1,7 +1,7 @@
-import { z } from 'zod';
-import { useSearchParams } from 'react-router-dom';
-import { useCallback, useMemo } from 'react';
 import { ColumnFiltersState, Updater } from '@tanstack/react-table';
+import { useCallback, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { z } from 'zod';
 
 type FilterMapping<T> = {
   [K in keyof T]: string;

frontend/app/src/lib/api/index.ts

@@ -1,4 +1,5 @@
 import api from './api';
+
 export * from './generated/data-contracts';
 export { queries } from './queries';
 export default api;

frontend/app/src/lib/api/queries.ts

@@ -1,9 +1,8 @@
-import { createQueryKeyStore } from '@lukemorales/query-key-factory';
-
-import api, { cloudApi } from './api';
-import invariant from 'tiny-invariant';
 import { WebhookWorkerCreateRequest } from '.';
+import api, { cloudApi } from './api';
 import { TemplateOptions } from './generated/cloud/data-contracts';
+import { createQueryKeyStore } from '@lukemorales/query-key-factory';
+import invariant from 'tiny-invariant';
 
 type ListEventQuery = Parameters<typeof api.eventList>[1];
 type ListRateLimitsQuery = Parameters<typeof api.rateLimitList>[1];

frontend/app/src/lib/atoms.ts

@@ -1,7 +1,6 @@
-import { atom } from 'jotai';
 import { Tenant } from './api';
-
 import { TenantBillingState } from './api/generated/cloud/data-contracts';
+import { atom } from 'jotai';
 
 const getInitialValue = <T>(key: string, defaultValue?: T): T | undefined => {
   const item = localStorage.getItem(key);

frontend/app/src/lib/hooks.ts

@@ -1,9 +1,9 @@
-import { useToast } from '@/components/hooks/use-toast';
-import { AxiosError } from 'axios';
-import { Dispatch, SetStateAction } from 'react';
 import api, { APIErrors } from './api';
 import { getFieldErrors } from './utils';
+import { useToast } from '@/components/hooks/use-toast';
 import { useQuery } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { Dispatch, SetStateAction } from 'react';
 
 export function useApiError(props: {
   setFieldErrors?: Dispatch<SetStateAction<Record<string, string>>>;

frontend/app/src/lib/outlet.ts

@@ -1,5 +1,5 @@
-import { useOutletContext } from 'react-router-dom';
 import { TenantMember, User } from './api';
+import { useOutletContext } from 'react-router-dom';
 
 export type UserContextType = { user: User };
 

frontend/app/src/lib/utils.ts

@@ -1,7 +1,7 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { APIErrors } from './api/generated/data-contracts';
+import { type ClassValue, clsx } from 'clsx';
 import CronPrettifier from 'cronstrue';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));

frontend/app/src/main.tsx

@@ -1,10 +1,10 @@
-import ReactDOM from 'react-dom/client';
 import './index.css';
-import { QueryClientProvider } from '@tanstack/react-query';
 import queryClient from './query-client.tsx';
 import Router from './router.tsx';
 import * as Sentry from '@sentry/react';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import ReactDOM from 'react-dom/client';
 
 if (import.meta.env.VITE_SENTRY_DSN) {
   Sentry.init({

frontend/app/src/pages/auth/login/components/user-login-form.tsx

@@ -1,11 +1,11 @@
-import { cn } from '@/lib/utils';
 import { Button } from '@/components/v1/ui/button';
 import { Input } from '@/components/v1/ui/input';
 import { Label } from '@/components/v1/ui/label';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
 import { Spinner } from '@/components/v1/ui/loading.tsx';
+import { cn } from '@/lib/utils';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 const schema = z.object({
   email: z.string().email('Invalid email address'),

frontend/app/src/pages/auth/login/index.tsx

@@ -1,15 +1,15 @@
-import { Link, useNavigate } from 'react-router-dom';
+import useApiMeta from '../hooks/use-api-meta';
+import useErrorParam from '../hooks/use-error-param';
 import { UserLoginForm } from './components/user-login-form';
 import { Button } from '@/components/v1/ui/button';
-import { useMutation } from '@tanstack/react-query';
-import api, { UserLoginRequest } from '@/lib/api';
-import { useState } from 'react';
-import { useApiError } from '@/lib/hooks';
-import useApiMeta from '../hooks/use-api-meta';
-import { Loading } from '@/components/v1/ui/loading';
 import { Icons } from '@/components/v1/ui/icons';
-import useErrorParam from '../hooks/use-error-param';
+import { Loading } from '@/components/v1/ui/loading';
+import api, { UserLoginRequest } from '@/lib/api';
+import { useApiError } from '@/lib/hooks';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
 import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 
 export default function Login() {
   useErrorParam();

frontend/app/src/pages/auth/no-auth.tsx

@@ -1,7 +1,7 @@
-import { redirect } from 'react-router-dom';
 import api from '@/lib/api';
 import queryClient from '@/query-client';
 import { AxiosError, isAxiosError } from 'axios';
+import { redirect } from 'react-router-dom';
 
 const noAuthMiddleware = async () => {
   try {

frontend/app/src/pages/auth/register/components/user-register-form.tsx

@@ -1,11 +1,11 @@
-import { cn } from '@/lib/utils';
 import { Button } from '@/components/v1/ui/button';
 import { Input } from '@/components/v1/ui/input';
 import { Label } from '@/components/v1/ui/label';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
 import { Spinner } from '@/components/v1/ui/loading.tsx';
+import { cn } from '@/lib/utils';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 const schema = z.object({
   name: z.string().min(3, 'Name must be at least 3 characters long'),

frontend/app/src/pages/auth/register/index.tsx

@@ -1,18 +1,18 @@
-import { Link, useNavigate } from 'react-router-dom';
-import { UserRegisterForm } from './components/user-register-form';
-import { useMutation } from '@tanstack/react-query';
-import api, { UserRegisterRequest } from '@/lib/api';
-import { useEffect, useState } from 'react';
-import { useApiError } from '@/lib/hooks';
 import useApiMeta from '../hooks/use-api-meta';
-import { Loading } from '@/components/v1/ui/loading';
-import { GithubLogin, GoogleLogin, OrContinueWith } from '../login';
 import useErrorParam from '../hooks/use-error-param';
-import React from 'react';
+import { GithubLogin, GoogleLogin, OrContinueWith } from '../login';
+import { UserRegisterForm } from './components/user-register-form';
+import { Loading } from '@/components/v1/ui/loading';
 import {
   POSTHOG_DISTINCT_ID_LOCAL_STORAGE_KEY,
   POSTHOG_SESSION_ID_LOCAL_STORAGE_KEY,
 } from '@/hooks/use-analytics';
+import api, { UserRegisterRequest } from '@/lib/api';
+import { useApiError } from '@/lib/hooks';
+import { useMutation } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 
 export default function Register() {
   useErrorParam();

frontend/app/src/pages/authenticated.tsx

@@ -1,16 +1,16 @@
 import MainNav from '@/components/molecules/nav-bar/nav-bar';
-import { Outlet, useNavigate } from 'react-router-dom';
-import api, { queries, User } from '@/lib/api';
-import { Loading } from '@/components/v1/ui/loading.tsx';
-import { useMutation, useQuery } from '@tanstack/react-query';
 import SupportChat from '@/components/molecules/support-chat';
-import { PostHogProvider } from '@/providers/posthog';
-import { useEffect } from 'react';
-import { useContextFromParent } from '@/lib/outlet';
-import { AxiosError } from 'axios';
-import { useInactivityDetection } from '@/pages/auth/hooks/use-inactivity-detection';
-import { cloudApi } from '@/lib/api/api';
+import { Loading } from '@/components/v1/ui/loading.tsx';
 import { useTenantDetails } from '@/hooks/use-tenant';
+import api, { queries, User } from '@/lib/api';
+import { cloudApi } from '@/lib/api/api';
+import { useContextFromParent } from '@/lib/outlet';
+import { useInactivityDetection } from '@/pages/auth/hooks/use-inactivity-detection';
+import { PostHogProvider } from '@/providers/posthog';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { useEffect } from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
 
 export default function Authenticated() {
   const { tenant } = useTenantDetails();

frontend/app/src/pages/main/info/components/version-info.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { Spinner } from '@/components/v1/ui/loading';
 import { queries } from '@/lib/api';
 import { useQuery } from '@tanstack/react-query';
+import React from 'react';
 
 export const VersionInfo: React.FC = () => {
   const { data, isLoading, isError, error } = useQuery({

frontend/app/src/pages/main/v1/events/components/event-columns.tsx

@@ -1,11 +1,10 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { Badge } from '@/components/v1/ui/badge';
-import { V1Event } from '@/lib/api';
-import { Button } from '@/components/v1/ui/button';
-
 import { AdditionalMetadata } from './additional-metadata';
-import RelativeDate from '@/components/v1/molecules/relative-date';
 import { DataTableColumnHeader } from '@/components/v1/molecules/data-table/data-table-column-header';
+import RelativeDate from '@/components/v1/molecules/relative-date';
+import { Badge } from '@/components/v1/ui/badge';
+import { Button } from '@/components/v1/ui/button';
+import { V1Event } from '@/lib/api';
+import { ColumnDef } from '@tanstack/react-table';
 
 export const EventColumn = {
   id: 'Event ID',

frontend/app/src/pages/main/v1/events/hooks/use-events.tsx

@@ -1,9 +1,4 @@
-import { usePagination } from '@/hooks/use-pagination';
-import { useCurrentTenantId } from '@/hooks/use-tenant';
-import { useRefetchInterval } from '@/contexts/refetch-interval-context';
-import api, { queries, V1TaskStatus } from '@/lib/api';
-import { useQuery } from '@tanstack/react-query';
-import { useMemo } from 'react';
+import { workflowRunStatusFilters } from '../../workflow-runs-v1/hooks/use-toolbar-filters';
 import {
   keyKey,
   workflowKey,
@@ -13,9 +8,14 @@ import {
   scopeKey,
 } from '../components/event-columns';
 import { FilterOption } from '@/components/v1/molecules/data-table/data-table-toolbar';
+import { useRefetchInterval } from '@/contexts/refetch-interval-context';
+import { usePagination } from '@/hooks/use-pagination';
+import { useCurrentTenantId } from '@/hooks/use-tenant';
 import { useZodColumnFilters } from '@/hooks/use-zod-column-filters';
+import api, { queries, V1TaskStatus } from '@/lib/api';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
 import { z } from 'zod';
-import { workflowRunStatusFilters } from '../../workflow-runs-v1/hooks/use-toolbar-filters';
 
 type UseEventsProps = {
   key: string;

frontend/app/src/pages/main/v1/events/index.tsx

@@ -1,3 +1,10 @@
+import {
+  FilterColumn,
+  filterColumns,
+} from '../filters/components/filter-columns';
+import { useFilters } from '../filters/hooks/use-filters';
+import { RunsTable } from '../workflow-runs-v1/components/runs-table';
+import { RunsProvider } from '../workflow-runs-v1/hooks/runs-provider';
 import {
   columns,
   EventColumn,
@@ -8,26 +15,18 @@ import {
   statusKey,
   workflowKey,
 } from './components/event-columns';
-import { Separator } from '@/components/v1/ui/separator';
-import { useMemo, useState } from 'react';
-import { VisibilityState } from '@tanstack/react-table';
-import { V1Event, V1Filter } from '@/lib/api';
-import { ToolbarType } from '@/components/v1/molecules/data-table/data-table-toolbar';
-import RelativeDate from '@/components/v1/molecules/relative-date';
-import { DataTable } from '@/components/v1/molecules/data-table/data-table';
-import { RunsTable } from '../workflow-runs-v1/components/runs-table';
-import { RunsProvider } from '../workflow-runs-v1/hooks/runs-provider';
-import { CodeHighlighter } from '@/components/v1/ui/code-highlighter';
-
-import {
-  FilterColumn,
-  filterColumns,
-} from '../filters/components/filter-columns';
-import { useFilters } from '../filters/hooks/use-filters';
-import { useSidePanel } from '@/hooks/use-side-panel';
 import { useEvents } from './hooks/use-events';
 import { DocsButton } from '@/components/v1/docs/docs-button';
+import { DataTable } from '@/components/v1/molecules/data-table/data-table';
+import { ToolbarType } from '@/components/v1/molecules/data-table/data-table-toolbar';
+import RelativeDate from '@/components/v1/molecules/relative-date';
+import { CodeHighlighter } from '@/components/v1/ui/code-highlighter';
+import { Separator } from '@/components/v1/ui/separator';
+import { useSidePanel } from '@/hooks/use-side-panel';
+import { V1Event, V1Filter } from '@/lib/api';
 import { docsPages } from '@/lib/generated/docs';
+import { VisibilityState } from '@tanstack/react-table';
+import { useMemo, useState } from 'react';
 
 export default function Events() {
   const [openMetadataPopover, setOpenMetadataPopover] = useState<string | null>(

frontend/app/src/pages/main/v1/filters/components/filter-columns.tsx

@@ -1,9 +1,9 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { V1Filter } from '@/lib/api';
 import { DataTableColumnHeader } from '@/components/v1/molecules/data-table/data-table-column-header';
-import { CodeHighlighter } from '@/components/v1/ui/code-highlighter';
-import { CheckIcon } from 'lucide-react';
 import { Button } from '@/components/v1/ui/button';
+import { CodeHighlighter } from '@/components/v1/ui/code-highlighter';
+import { V1Filter } from '@/lib/api';
+import { ColumnDef } from '@tanstack/react-table';
+import { CheckIcon } from 'lucide-react';
 
 export const FilterColumn = {
   id: 'ID',

frontend/app/src/pages/main/v1/filters/components/filter-create-form.tsx

@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import { createFilterSchema, CreateFilterFormData } from '../schemas';
+import { FilterOption } from '@/components/v1/molecules/data-table/data-table-toolbar';
+import { Button } from '@/components/v1/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -6,10 +8,8 @@ import {
   DialogTitle,
   DialogFooter,
 } from '@/components/v1/ui/dialog';
-import { Button } from '@/components/v1/ui/button';
 import { Input } from '@/components/v1/ui/input';
 import { Label } from '@/components/v1/ui/label';
-import { Textarea } from '@/components/v1/ui/textarea';
 import {
   Select,
   SelectContent,
@@ -17,12 +17,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/v1/ui/select';
-import { Filter } from 'lucide-react';
-import { FilterOption } from '@/components/v1/molecules/data-table/data-table-toolbar';
-import { useForm, Controller } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { createFilterSchema, CreateFilterFormData } from '../schemas';
+import { Textarea } from '@/components/v1/ui/textarea';
 import { V1CreateFilterRequest } from '@/lib/api';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Filter } from 'lucide-react';
+import { useState } from 'react';
+import { useForm, Controller } from 'react-hook-form';
 
 interface FilterCreateFormProps {
   isOpen: boolean;

frontend/app/src/pages/main/v1/filters/components/filter-detail-view.tsx

@@ -1,8 +1,6 @@
-import { useCallback, useState } from 'react';
+import { useFilterDetails, useFilters } from '../hooks/use-filters';
+import { updateFilterSchema, UpdateFilterFormData } from '../schemas';
 import { Button } from '@/components/v1/ui/button';
-import { Input } from '@/components/v1/ui/input';
-import { Label } from '@/components/v1/ui/label';
-import { Textarea } from '@/components/v1/ui/textarea';
 import {
   Dialog,
   DialogContent,
@@ -11,12 +9,14 @@ import {
   DialogDescription,
   DialogFooter,
 } from '@/components/v1/ui/dialog';
-import { Trash2Icon, EditIcon, SaveIcon, XIcon } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useFilterDetails, useFilters } from '../hooks/use-filters';
-import { updateFilterSchema, UpdateFilterFormData } from '../schemas';
+import { Input } from '@/components/v1/ui/input';
+import { Label } from '@/components/v1/ui/label';
+import { Textarea } from '@/components/v1/ui/textarea';
 import { useSidePanel } from '@/hooks/use-side-panel';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trash2Icon, EditIcon, SaveIcon, XIcon } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { useForm } from 'react-hook-form';
 
 interface FilterDetailViewProps {
   filterId: string;

frontend/app/src/pages/main/v1/filters/hooks/use-filters.tsx

@@ -1,6 +1,8 @@
+import { scopeKey, workflowIdKey } from '../components/filter-columns';
+import { FilterOption } from '@/components/v1/molecules/data-table/data-table-toolbar';
+import { useRefetchInterval } from '@/contexts/refetch-interval-context';
 import { usePagination } from '@/hooks/use-pagination';
 import { useCurrentTenantId } from '@/hooks/use-tenant';
-import { useRefetchInterval } from '@/contexts/refetch-interval-context';
 import api, {
   queries,
   V1CreateFilterRequest,
@@ -10,8 +12,6 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { ColumnFiltersState, Updater } from '@tanstack/react-table';
 import { useCallback, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { scopeKey, workflowIdKey } from '../components/filter-columns';
-import { FilterOption } from '@/components/v1/molecules/data-table/data-table-toolbar';
 
 type UseFiltersProps = {
   key: string;

frontend/app/src/pages/main/v1/filters/index.tsx

@@ -6,15 +6,15 @@ import {
   workflowIdKey,
 } from './components/filter-columns';
 import { FilterCreateButton } from './components/filter-create-form';
-import { useState } from 'react';
-import { VisibilityState } from '@tanstack/react-table';
-import { ToolbarType } from '@/components/v1/molecules/data-table/data-table-toolbar';
-import { DataTable } from '@/components/v1/molecules/data-table/data-table';
 import { useFilters } from './hooks/use-filters';
-import { V1Filter } from '@/lib/api';
-import { useSidePanel } from '@/hooks/use-side-panel';
 import { DocsButton } from '@/components/v1/docs/docs-button';
+import { DataTable } from '@/components/v1/molecules/data-table/data-table';
+import { ToolbarType } from '@/components/v1/molecules/data-table/data-table-toolbar';
+import { useSidePanel } from '@/hooks/use-side-panel';
+import { V1Filter } from '@/lib/api';
 import { docsPages } from '@/lib/generated/docs';
+import { VisibilityState } from '@tanstack/react-table';
+import { useState } from 'react';
 
 export default function Filters() {
   const sidePanel = useSidePanel();

frontend/app/src/pages/main/v1/index.tsx

@@ -1,18 +1,8 @@
-import { Button } from '@/components/v1/ui/button';
-import { cn } from '@/lib/utils';
-import {
-  CalendarDaysIcon,
-  CpuChipIcon,
-  PlayIcon,
-  ScaleIcon,
-  ServerStackIcon,
-  Squares2X2Icon,
-} from '@heroicons/react/24/outline';
-
 import { SidePanel } from '@/components/side-panel';
 import { useSidebar } from '@/components/sidebar-provider';
 import { OrganizationSelector } from '@/components/v1/molecules/nav-bar/organization-selector';
 import { TenantSwitcher } from '@/components/v1/molecules/nav-bar/tenant-switcher';
+import { Button } from '@/components/v1/ui/button';
 import {
   Collapsible,
   CollapsibleContent,
@@ -26,8 +16,17 @@ import {
   UserContextType,
   useContextFromParent,
 } from '@/lib/outlet';
+import { cn } from '@/lib/utils';
 import useCloudApiMeta from '@/pages/auth/hooks/use-cloud-api-meta';
 import useCloudFeatureFlags from '@/pages/auth/hooks/use-cloud-feature-flags';
+import {
+  CalendarDaysIcon,
+  CpuChipIcon,
+  PlayIcon,
+  ScaleIcon,
+  ServerStackIcon,
+  Squares2X2Icon,
+} from '@heroicons/react/24/outline';
 import { ClockIcon, GearIcon } from '@radix-ui/react-icons';
 import { Filter, SquareActivityIcon, WebhookIcon } from 'lucide-react';
 import React, { useCallback } from 'react';

frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-activity.tsx

@@ -1,5 +1,8 @@
-import { queries } from '@/lib/api';
-import { useQuery } from '@tanstack/react-query';
+import GithubButton from './github-button';
+import { ManagedWorkerBuild } from './managed-worker-build';
+import { ManagedWorkerIaC } from './managed-worker-iac';
+import RelativeDate from '@/components/v1/molecules/relative-date';
+import { Button } from '@/components/v1/ui/button';
 import {
   Card,
   CardContent,
@@ -9,21 +12,18 @@ import {
   CardTitle,
 } from '@/components/v1/ui/card';
 import { Spinner } from '@/components/v1/ui/loading';
-import RelativeDate from '@/components/v1/molecules/relative-date';
-import { Button } from '@/components/v1/ui/button';
-import { ArrowRightIcon, ChevronLeftIcon } from '@radix-ui/react-icons';
-import { cn } from '@/lib/utils';
-import { useState } from 'react';
+import { Separator } from '@/components/v1/ui/separator';
+import { useRefetchInterval } from '@/contexts/refetch-interval-context';
+import { queries } from '@/lib/api';
 import {
   ManagedWorker,
   ManagedWorkerEvent,
   ManagedWorkerEventStatus,
 } from '@/lib/api/generated/cloud/data-contracts';
-import { Separator } from '@/components/v1/ui/separator';
-import { ManagedWorkerBuild } from './managed-worker-build';
-import GithubButton from './github-button';
-import { ManagedWorkerIaC } from './managed-worker-iac';
-import { useRefetchInterval } from '@/contexts/refetch-interval-context';
+import { cn } from '@/lib/utils';
+import { ArrowRightIcon, ChevronLeftIcon } from '@radix-ui/react-icons';
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
 
 export function ManagedWorkerActivity({
   managedWorker,

frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-build-logs.tsx

@@ -1,7 +1,7 @@
-import { queries } from '@/lib/api';
-import { useQuery } from '@tanstack/react-query';
 import LoggingComponent from '@/components/v1/cloud/logging/logs';
 import { useRefetchInterval } from '@/contexts/refetch-interval-context';
+import { queries } from '@/lib/api';
+import { useQuery } from '@tanstack/react-query';
 
 export function ManagedWorkerBuildLogs({ buildId }: { buildId: string }) {
   const { refetchInterval } = useRefetchInterval();

frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-build.tsx

@@ -1,8 +1,8 @@
-import { queries } from '@/lib/api';
-import { useQuery } from '@tanstack/react-query';
-import { Spinner } from '@/components/v1/ui/loading';
 import { ManagedWorkerBuildLogs } from './managed-worker-build-logs';
 import RelativeDate from '@/components/v1/molecules/relative-date';
+import { Spinner } from '@/components/v1/ui/loading';
+import { queries } from '@/lib/api';
+import { useQuery } from '@tanstack/react-query';
 
 export function ManagedWorkerBuild({ buildId }: { buildId: string }) {
   const getBuildQuery = useQuery({

frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-iac-logs.tsx

@@ -1,7 +1,7 @@
-import { queries } from '@/lib/api';
-import { useQuery } from '@tanstack/react-query';
 import LoggingComponent from '@/components/v1/cloud/logging/logs';
 import { useRefetchInterval } from '@/contexts/refetch-interval-context';
+import { queries } from '@/lib/api';
+import { useQuery } from '@tanstack/react-query';
 
 export function ManagedWorkerIaCLogs({
   managedWorkerId,

frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-instances-columns.tsx

@@ -1,6 +1,6 @@
-import { ColumnDef } from '@tanstack/react-table';
 import { DataTableColumnHeader } from '@/components/v1/molecules/data-table/data-table-column-header';
 import { Instance } from '@/lib/api/generated/cloud/data-contracts';
+import { ColumnDef } from '@tanstack/react-table';
 
 type InstanceWithMetadata = Instance & {
   metadata: {

frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-instances-table.tsx

@@ -1,9 +1,6 @@
-import { useMemo, useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { queries } from '@/lib/api';
-import { DataTable } from '@/components/v1/molecules/data-table/data-table.tsx';
 import { columns } from './managed-worker-instances-columns';
-import { Loading } from '@/components/v1/ui/loading.tsx';
+import { DataTable } from '@/components/v1/molecules/data-table/data-table.tsx';
+import { Badge } from '@/components/v1/ui/badge';
 import { Button } from '@/components/v1/ui/button';
 import {
   Card,
@@ -12,13 +9,16 @@ import {
   CardDescription,
   CardFooter,
 } from '@/components/v1/ui/card';
+import { Loading } from '@/components/v1/ui/loading.tsx';
+import { useRefetchInterval } from '@/contexts/refetch-interval-context';
+import { queries } from '@/lib/api';
+import { Instance } from '@/lib/api/generated/cloud/data-contracts';
 import { capitalize } from '@/lib/utils';
 import { ArrowPathIcon } from '@heroicons/react/24/outline';
+import { useQuery } from '@tanstack/react-query';
 import { VisibilityState } from '@tanstack/react-table';
+import { useMemo, useState } from 'react';
 import { BiCard, BiTable } from 'react-icons/bi';
-import { Instance } from '@/lib/api/generated/cloud/data-contracts';
-import { Badge } from '@/components/v1/ui/badge';
-import { useRefetchInterval } from '@/contexts/refetch-interval-context';
 
 export function ManagedWorkerInstancesTable({
   managedWorkerId,

frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-logs.tsx

@@ -1,17 +1,17 @@
+import LoggingComponent from '@/components/v1/cloud/logging/logs';
+import { DateTimePicker } from '@/components/v1/molecules/time-picker/date-time-picker';
+import { Button } from '@/components/v1/ui/button';
+import { Input } from '@/components/v1/ui/input';
+import { useRefetchInterval } from '@/contexts/refetch-interval-context';
 import { queries } from '@/lib/api';
-import { useQuery } from '@tanstack/react-query';
 import {
   LogLine,
   ManagedWorker,
 } from '@/lib/api/generated/cloud/data-contracts';
-import LoggingComponent from '@/components/v1/cloud/logging/logs';
-import { useState, useEffect } from 'react';
-import { Input } from '@/components/v1/ui/input';
-import { DateTimePicker } from '@/components/v1/molecules/time-picker/date-time-picker';
-import { Button } from '@/components/v1/ui/button';
-import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import { ListCloudLogsQuery } from '@/lib/api/queries';
-import { useRefetchInterval } from '@/contexts/refetch-interval-context';
+import { ArrowPathIcon } from '@heroicons/react/24/outline';
+import { useQuery } from '@tanstack/react-query';
+import { useState, useEffect } from 'react';
 
 export function ManagedWorkerLogs({
   managedWorker,

frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-metrics.tsx

@@ -1,22 +1,10 @@
-import { queries } from '@/lib/api';
-import { useQuery } from '@tanstack/react-query';
-import {
-  ManagedWorker,
-  Matrix,
-} from '@/lib/api/generated/cloud/data-contracts';
-import { Loading } from '@/components/v1/ui/loading';
-import { useEffect, useMemo, useState } from 'react';
-import { Separator } from '@/components/v1/ui/separator';
-import { DateTimePicker } from '@/components/v1/molecules/time-picker/date-time-picker';
-import { Button } from '@/components/v1/ui/button';
-import { XCircleIcon } from '@heroicons/react/24/outline';
 import {
   DataPoint,
   ZoomableChart,
 } from '@/components/v1/molecules/charts/zoomable';
-import { useAtom } from 'jotai';
-import { lastWorkerMetricsTimeRangeAtom } from '@/lib/atoms';
-import { getCreatedAfterFromTimeRange } from '@/pages/main/workflow-runs/components/workflow-runs-table';
+import { DateTimePicker } from '@/components/v1/molecules/time-picker/date-time-picker';
+import { Button } from '@/components/v1/ui/button';
+import { Loading } from '@/components/v1/ui/loading';
 import {
   Select,
   SelectContent,
@@ -24,7 +12,19 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/v1/ui/select';
+import { Separator } from '@/components/v1/ui/separator';
 import { useRefetchInterval } from '@/contexts/refetch-interval-context';
+import { queries } from '@/lib/api';
+import {
+  ManagedWorker,
+  Matrix,
+} from '@/lib/api/generated/cloud/data-contracts';
+import { lastWorkerMetricsTimeRangeAtom } from '@/lib/atoms';
+import { getCreatedAfterFromTimeRange } from '@/pages/main/workflow-runs/components/workflow-runs-table';
+import { XCircleIcon } from '@heroicons/react/24/outline';
+import { useQuery } from '@tanstack/react-query';
+import { useAtom } from 'jotai';
+import { useEffect, useMemo, useState } from 'react';
 
 export function ManagedWorkerMetrics({
   managedWorker,

frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/update-form.tsx

@@ -1,21 +1,3 @@
-import { queries } from '@/lib/api';
-import { useEffect, useMemo, useState } from 'react';
-import { Button } from '@/components/v1/ui/button';
-import { useQuery } from '@tanstack/react-query';
-import { ExclamationTriangleIcon, PlusIcon } from '@heroicons/react/24/outline';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/v1/ui/select';
-import { z } from 'zod';
-import { Controller, useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Label } from '@/components/v1/ui/label';
-import { Alert, AlertDescription, AlertTitle } from '@/components/v1/ui/alert';
-import { Input } from '@/components/v1/ui/input';
 import {
   getRepoName,
   getRepoOwner,
@@ -25,30 +7,48 @@ import {
   ScalingType,
   scalingTypes,
 } from '../../create/components/create-worker-form';
-import {
-  ManagedWorker,
-  ManagedWorkerRegion,
-} from '@/lib/api/generated/cloud/data-contracts';
+import { UpgradeMessage } from '../../create/components/create-worker-form';
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from '@/components/v1/ui/accordion';
+import { Alert, AlertDescription, AlertTitle } from '@/components/v1/ui/alert';
+import { Button } from '@/components/v1/ui/button';
+import { Checkbox } from '@/components/v1/ui/checkbox';
+import EnvGroupArray, { KeyValueType } from '@/components/v1/ui/envvar';
+import { Input } from '@/components/v1/ui/input';
+import { Label } from '@/components/v1/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/v1/ui/select';
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
 } from '@/components/v1/ui/tabs';
-import { Checkbox } from '@/components/v1/ui/checkbox';
-import { UpgradeMessage } from '../../create/components/create-worker-form';
+import { useCurrentTenantId, useTenantDetails } from '@/hooks/use-tenant';
+import { queries } from '@/lib/api';
+import {
+  ManagedWorker,
+  ManagedWorkerRegion,
+} from '@/lib/api/generated/cloud/data-contracts';
 import {
   ComputeType,
   managedCompute,
 } from '@/lib/can/features/managed-compute';
-import EnvGroupArray, { KeyValueType } from '@/components/v1/ui/envvar';
-import { useCurrentTenantId, useTenantDetails } from '@/hooks/use-tenant';
+import { ExclamationTriangleIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useMemo, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 interface UpdateWorkerFormProps {
   onSubmit: (opts: z.infer<typeof updateManagedWorkerSchema>) => void;

frontend/app/src/pages/main/v1/managed-workers/$managed-worker/index.tsx

@@ -1,31 +1,31 @@
-import { Separator } from '@/components/v1/ui/separator';
-import { queries } from '@/lib/api';
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { useNavigate, useParams } from 'react-router-dom';
-import invariant from 'tiny-invariant';
-import { relativeDate } from '@/lib/utils';
-import { CpuChipIcon } from '@heroicons/react/24/outline';
-import { Loading } from '@/components/v1/ui/loading.tsx';
-import { useState } from 'react';
+import GithubButton from './components/github-button';
+import { ManagedWorkerActivity } from './components/managed-worker-activity';
+import { ManagedWorkerInstancesTable } from './components/managed-worker-instances-table';
+import { ManagedWorkerLogs } from './components/managed-worker-logs';
+import { ManagedWorkerMetrics } from './components/managed-worker-metrics';
+import UpdateWorkerForm from './components/update-form';
+import { ConfirmDialog } from '@/components/v1/molecules/confirm-dialog';
 import { Button } from '@/components/v1/ui/button';
+import { Loading } from '@/components/v1/ui/loading.tsx';
+import { Separator } from '@/components/v1/ui/separator';
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
 } from '@/components/v1/ui/tabs';
-import { ConfirmDialog } from '@/components/v1/molecules/confirm-dialog';
-import { ManagedWorkerLogs } from './components/managed-worker-logs';
-import { ManagedWorkerMetrics } from './components/managed-worker-metrics';
-import { ManagedWorkerActivity } from './components/managed-worker-activity';
-import { UpdateManagedWorkerRequest } from '@/lib/api/generated/cloud/data-contracts';
-import { ManagedWorkerInstancesTable } from './components/managed-worker-instances-table';
-import UpdateWorkerForm from './components/update-form';
-import { cloudApi } from '@/lib/api/api';
-import { useApiError } from '@/lib/hooks';
-import GithubButton from './components/github-button';
-import { useCurrentTenantId } from '@/hooks/use-tenant';
 import { useRefetchInterval } from '@/contexts/refetch-interval-context';
+import { useCurrentTenantId } from '@/hooks/use-tenant';
+import { queries } from '@/lib/api';
+import { cloudApi } from '@/lib/api/api';
+import { UpdateManagedWorkerRequest } from '@/lib/api/generated/cloud/data-contracts';
+import { useApiError } from '@/lib/hooks';
+import { relativeDate } from '@/lib/utils';
+import { CpuChipIcon } from '@heroicons/react/24/outline';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import invariant from 'tiny-invariant';
 
 export default function ExpandedWorkflow() {
   const navigate = useNavigate();

frontend/app/src/pages/main/v1/managed-workers/components/billing-required.tsx

@@ -1,13 +1,13 @@
 import { Button } from '@/components/v1/ui/button';
-import { Link } from 'react-router-dom';
+import { useCurrentTenantId } from '@/hooks/use-tenant';
+import { queries } from '@/lib/api/queries';
 import {
   CalendarIcon,
   CpuChipIcon,
   CurrencyDollarIcon,
 } from '@heroicons/react/24/outline';
 import { useQuery } from '@tanstack/react-query';
-import { queries } from '@/lib/api/queries';
-import { useCurrentTenantId } from '@/hooks/use-tenant';
+import { Link } from 'react-router-dom';
 
 interface BillingRequiredProps {
   tenant: any;