From 7aafae021be980c8ee8a648734ad7a56b0451b2e Mon Sep 17 00:00:00 2001
From: Jordi Enric <jordi.err@gmail.com>
Date: Tue, 18 Aug 2026 13:39:19 +0200
Subject: [PATCH] fix(studio): stop rendering Edge Function logs on the worker
 Logs tab

The tab queried the functions log source with a worker_name filter that source
does not have. It now points at the CLI until the workers logs endpoint ships.
---
 .../Workers/WorkerDetail/WorkerDetail.tsx     | 15 +++----
 .../Workers/WorkerDetail/WorkerLogsTab.tsx    | 44 ++++++-------------
 .../Workers/WorkerDetail/workerCharts.ts      | 10 +----
 3 files changed, 22 insertions(+), 47 deletions(-)

diff --git a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx
index 31467299dfb..9243863f7b9 100644
--- a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx
+++ b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx
@@ -46,7 +46,6 @@ import { ensureProjectSeeded, useProjectWorkers } from '@/state/workers-mock-sta
 type WorkerTab = 'overview' | 'logs' | 'settings'
 const WORKER_TABS: WorkerTab[] = ['overview', 'logs', 'settings']
 
-// Display order for the nav — Terminal is a disabled placeholder second to last.
 const TAB_ORDER: Array<WorkerTab | 'terminal'> = ['overview', 'logs', 'terminal', 'settings']
 
 const TAB_LABEL: Record<WorkerTab, string> = {
@@ -56,9 +55,7 @@ const TAB_LABEL: Record<WorkerTab, string> = {
 }
 
 export const WorkerDetail = () => {
-  const { ref, name } = useParams()
-  const projectRef = ref as string
-  const workerName = name as string
+  const { ref: projectRef, name: workerName } = useParams()
 
   const [tab, setTab] = useQueryState(
     'tab',
@@ -68,12 +65,14 @@ export const WorkerDetail = () => {
   )
 
   useEffect(() => {
-    ensureProjectSeeded(ref)
-  }, [ref])
+    ensureProjectSeeded(projectRef)
+  }, [projectRef])
 
-  const workers = useProjectWorkers(ref)
+  const workers = useProjectWorkers(projectRef)
   const worker = workers.find((w) => w.name === workerName)
 
+  if (!projectRef) return null
+
   if (!worker) {
     return (
       <div className="flex flex-1 flex-col items-center justify-center gap-3 py-24 text-center">
@@ -174,7 +173,7 @@ export const WorkerDetail = () => {
       {tab === 'overview' && <WorkerOverviewTab projectRef={projectRef} worker={worker} />}
       {tab === 'logs' && (
         <PageContainer size="full" className="px-0 xl:px-0">
-          <WorkerLogsTab projectRef={projectRef} workerName={worker.name} />
+          <WorkerLogsTab workerName={worker.name} />
         </PageContainer>
       )}
       {tab === 'settings' && <WorkerSettingsTab worker={worker} />}
diff --git a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerLogsTab.tsx b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerLogsTab.tsx
index 65faf03297b..63e4fd917b8 100644
--- a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerLogsTab.tsx
+++ b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerLogsTab.tsx
@@ -1,38 +1,20 @@
-import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import { IS_PLATFORM } from '@/lib/constants'
+import { WorkerCommandLine } from '../WorkerCommandLine'
+import { CLI_NAME } from '@/lib/constants/workers'
 
 interface WorkerLogsTabProps {
-  projectRef: string
   workerName: string
 }
 
-/**
- * Reuses the Edge Functions Logs Explorer UI. Workers don't have a dedicated
- * log source in this prototype, so we point at the `functions` query type to
- * render the same explorer shell the demo audience already recognizes.
- */
-export const WorkerLogsTab = ({ projectRef, workerName }: WorkerLogsTabProps) => {
-  if (!IS_PLATFORM) {
-    return (
-      <div className="rounded-md border border-default bg-surface-100 px-6 py-10 text-center">
-        <p className="text-sm text-foreground-light">
-          Logs stream to Logflare on the hosted platform.
-        </p>
-        <p className="text-sm text-foreground-lighter">
-          Run this project on Supabase to view worker logs here.
-        </p>
+export const WorkerLogsTab = ({ workerName }: WorkerLogsTabProps) => (
+  <div className="flex-1 rounded-md border border-default bg-surface-100 px-6 py-10">
+    <div className="mx-auto max-w-md space-y-3 text-center">
+      <p className="text-sm text-foreground">Worker logs are not in the dashboard yet</p>
+      <p className="text-sm text-foreground-lighter">
+        Stream them from the Supabase CLI until the logs endpoint ships.
+      </p>
+      <div className="pt-1 text-left">
+        <WorkerCommandLine command={`supabase ${CLI_NAME} logs ${workerName} --follow`} />
       </div>
-    )
-  }
-
-  return (
-    <div className="flex-1">
-      <LogsPreviewer
-        condensedLayout
-        projectRef={projectRef}
-        queryType="functions"
-        filterOverride={{ 'metadata.worker_name': workerName }}
-      />
     </div>
-  )
-}
+  </div>
+)
diff --git a/apps/studio/components/interfaces/Workers/WorkerDetail/workerCharts.ts b/apps/studio/components/interfaces/Workers/WorkerDetail/workerCharts.ts
index b00d4013d56..2c3a344b774 100644
--- a/apps/studio/components/interfaces/Workers/WorkerDetail/workerCharts.ts
+++ b/apps/studio/components/interfaces/Workers/WorkerDetail/workerCharts.ts
@@ -2,13 +2,7 @@ import type { ChartConfig } from 'ui'
 
 import type { Worker } from '../Workers.types'
 
-/**
- * Deterministic mock time-series for the worker Overview tab.
- *
- * Mirrors the design-system "parent with mixed child widths" example, adapted
- * for workers. Timestamps are derived from a fixed base (not `new Date()`) so
- * the server and client renders match and React doesn't warn on hydration.
- */
+// Seeded time-series until the workers metrics endpoint ships.
 
 export const CHART_INTERVALS = [
   { key: '15min', label: '15 min', format: 'MMM D, h:mm:ssa', minutes: 15 },
@@ -59,7 +53,7 @@ const pseudoNoise = (seed: number, amplitude = 1) => {
 export const getIntervalMinutes = (intervalKey: string) =>
   CHART_INTERVALS.find((item) => item.key === intervalKey)?.minutes ?? 60
 
-/** States where the worker is not serving traffic — charts render empty. */
+// Not serving traffic, so the charts render empty rather than stale numbers.
 export const isIdleState = (worker: Pick<Worker, 'state'>) =>
   worker.state === 'suspended' ||
   worker.state === 'killed' ||