refactor(studio): read the worker detail through React Query and drop section-marker comments

apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx

@@ -1,9 +1,9 @@
+import { useQuery } from '@tanstack/react-query'
 import { useParams } from 'common'
 import dayjs from 'dayjs'
 import { Clock, Container, Copy, Info } from 'lucide-react'
 import Link from 'next/link'
 import { parseAsStringEnum, useQueryState } from 'nuqs'
-import { useEffect } from 'react'
 import {
   BreadcrumbItem,
   BreadcrumbLink,
@@ -33,6 +33,7 @@ import {
   PageHeaderTitle,
 } from 'ui-patterns/PageHeader'
 import { PageNav } from 'ui-patterns/PageNav'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { RuntimeBadge } from '../RuntimeBadge'
 import { WorkerSnippetTabs } from '../WorkerSnippetTabs'
@@ -40,8 +41,9 @@ import { WorkerStatePill } from '../WorkerStatePill'
 import { WorkerLogsTab } from './WorkerLogsTab'
 import { WorkerOverviewTab } from './WorkerOverviewTab'
 import { WorkerSettingsTab } from './WorkerSettingsTab'
+import { AlertError } from '@/components/ui/AlertError'
+import { workerQueryOptions } from '@/data/workers/worker-query'
 import { PRODUCT_NAME } from '@/lib/constants/workers'
-import { ensureProjectSeeded, useProjectWorkers } from '@/state/workers-mock-state'
 
 type WorkerTab = 'overview' | 'logs' | 'settings'
 const WORKER_TABS: WorkerTab[] = ['overview', 'logs', 'settings']
@@ -64,15 +66,19 @@ export const WorkerDetail = () => {
       .withOptions({ history: 'push' })
   )
 
-  useEffect(() => {
-    ensureProjectSeeded(projectRef)
-  }, [projectRef])
-
-  const workers = useProjectWorkers(projectRef)
-  const worker = workers.find((w) => w.name === workerName)
+  const {
+    data: worker,
+    error,
+    isPending,
+    isError,
+  } = useQuery(workerQueryOptions({ projectRef, name: workerName }))
 
   if (!projectRef) return null
 
+  if (isPending) return <GenericSkeletonLoader className="p-6" />
+
+  if (isError) return <AlertError error={error} subject="Failed to retrieve worker" />
+
   if (!worker) {
     return (
       <div className="flex flex-1 flex-col items-center justify-center gap-3 py-24 text-center">
@@ -102,7 +108,6 @@ export const WorkerDetail = () => {
         </BreadcrumbList>
       </PageBreadcrumbs>
 
-      {/* Worker title + summary, aligned with the breadcrumb/nav gutters */}
       <PageHeader className="py-4 [&>div]:px-4 [&>div]:xl:px-4">
         <PageHeaderMeta className="px-0 xl:px-0">
           <PageHeaderIcon>

apps/studio/components/interfaces/Workers/WorkerDetail/WorkerOverviewTab.tsx

@@ -98,7 +98,6 @@ export const WorkerOverviewTab = ({ projectRef, worker }: WorkerOverviewTabProps
 
   return (
     <>
-      {/* Metrics breakdown band */}
       <PageSection className="border-b bg-surface-100/50 pb-8 pt-0">
         <PageContainer size="full">
           <div className="flex flex-col gap-5">
@@ -155,7 +154,6 @@ export const WorkerOverviewTab = ({ projectRef, worker }: WorkerOverviewTabProps
       </PageSection>
 
       <PageContainer size="full">
-        {/* Errors */}
         <PageSection>
           <PageSectionMeta>
             <PageSectionSummary>
@@ -203,7 +201,6 @@ export const WorkerOverviewTab = ({ projectRef, worker }: WorkerOverviewTabProps
           </PageSectionContent>
         </PageSection>
 
-        {/* Performance */}
         <PageSection>
           <PageSectionMeta>
             <PageSectionSummary>
@@ -261,7 +258,6 @@ export const WorkerOverviewTab = ({ projectRef, worker }: WorkerOverviewTabProps
           </PageSectionContent>
         </PageSection>
 
-        {/* Usage */}
         <PageSection>
           <PageSectionMeta>
             <PageSectionSummary>

apps/studio/components/interfaces/Workers/WorkerDetail/WorkerSettingsTab.tsx

@@ -64,7 +64,6 @@ export const WorkerSettingsTab = ({ worker }: WorkerSettingsTabProps) => {
   return (
     <>
       <PageContainer size="small">
-        {/* Container */}
         <PageSection>
           <PageSectionMeta>
             <PageSectionSummary>
@@ -96,7 +95,6 @@ export const WorkerSettingsTab = ({ worker }: WorkerSettingsTabProps) => {
           </PageSectionContent>
         </PageSection>
 
-        {/* Resources */}
         <PageSection>
           <PageSectionMeta>
             <PageSectionSummary>
@@ -125,7 +123,6 @@ export const WorkerSettingsTab = ({ worker }: WorkerSettingsTabProps) => {
           </PageSectionContent>
         </PageSection>
 
-        {/* Invoke worker */}
         <PageSection>
           <PageSectionMeta>
             <PageSectionSummary>
@@ -140,7 +137,6 @@ export const WorkerSettingsTab = ({ worker }: WorkerSettingsTabProps) => {
           </PageSectionContent>
         </PageSection>
 
-        {/* Develop locally */}
         <PageSection>
           <PageSectionMeta>
             <PageSectionSummary>
@@ -163,7 +159,6 @@ export const WorkerSettingsTab = ({ worker }: WorkerSettingsTabProps) => {
           </PageSectionContent>
         </PageSection>
 
-        {/* Agents & skills */}
         <PageSection>
           <PageSectionMeta>
             <PageSectionSummary>