Merge pull request #36 from InstaNode-dev/slice-1-env-filter-2026-05-12

dashboard: env switcher actually filters resources + deployments (slice 1)

Author: mastermanas805

src/api/index.ts

@@ -284,8 +284,10 @@ function adaptResource(r: any): Resource {
   }
 }
 
-export async function listResources(): Promise<{ ok: true; items: Resource[]; total: number }> {
-  const r = await call<ResourceListResp>('/api/v1/resources')
+export async function listResources(env?: string): Promise<{ ok: true; items: Resource[]; total: number }> {
+  // ?env= filters server-side. Omit for all envs (the legacy behavior).
+  const path = env ? `/api/v1/resources?env=${encodeURIComponent(env)}` : '/api/v1/resources'
+  const r = await call<ResourceListResp>(path)
   const items = (r.items ?? []).map(adaptResource)
   return { ok: true, items, total: r.total ?? items.length }
 }
@@ -458,11 +460,13 @@ function adaptDeployment(d: DeploymentRespItem): DashboardDeployment {
   }
 }
 
-export async function listDeployments(): Promise<{ ok: true; items: DashboardDeployment[]; total: number }> {
+export async function listDeployments(env?: string): Promise<{ ok: true; items: DashboardDeployment[]; total: number }> {
   // No try/catch fallback to empty — errors propagate so DeploymentsPage
   // can render a real error state instead of silently lying. The list
   // endpoint requires auth; 401 still triggers the AuthGate redirect.
-  const r = await call<DeploymentsListResp>('/api/v1/deployments')
+  // ?env= filters server-side; omitting returns all envs (legacy behavior).
+  const path = env ? `/api/v1/deployments?env=${encodeURIComponent(env)}` : '/api/v1/deployments'
+  const r = await call<DeploymentsListResp>(path)
   const items = (r.items ?? []).map(adaptDeployment)
   return { ok: true, items, total: r.total ?? items.length }
 }

src/pages/DeploymentsPage.tsx

@@ -5,22 +5,20 @@ import {
 } from '../components/Common'
 import * as api from '../api'
 import type { DashboardDeployment } from '../api'
+import { useDashboardCtx } from '../hooks/useDashboardCtx'
 
 export function DeploymentsPage() {
+  const ctx = useDashboardCtx()
   const [items, setItems] = useState<DashboardDeployment[]>([])
   const [loading, setLoading] = useState(true)
 
   // Source of truth: GET /api/v1/deployments (single-container apps via
-  // POST /deploy/new). This replaces the previous listStacks() call,
-  // which only returned multi-service stacks and therefore showed an
-  // empty list for any team that had only ever used /deploy/new — even
-  // when they had a live deployment. We keep falling back to listStacks
-  // implicitly on DeployDetailPage so legacy stack-mode deploys still
-  // open, but the primary surface is the deployments list.
+  // POST /deploy/new). The env switcher in the sidebar drives the ?env=
+  // query param; switching envs triggers a refetch via the dep array.
   useEffect(() => {
     let cancelled = false
     api
-      .listDeployments()
+      .listDeployments(ctx.env)
       .then((r) => {
         if (cancelled) return
         setItems(r.items)
@@ -37,7 +35,7 @@ export function DeploymentsPage() {
     return () => {
       cancelled = true
     }
-  }, [])
+  }, [ctx.env])
 
   return (
     <>

src/pages/OverviewPage.tsx

@@ -75,7 +75,7 @@ export function OverviewPage() {
 
   useEffect(() => {
     let alive = true
-    Promise.all([api.listResources(), api.fetchActivity()]).then(([r, a]) => {
+    Promise.all([api.listResources(ctx.env), api.fetchActivity()]).then(([r, a]) => {
       if (!alive) return
       setResources(r.items)
       setActivity(a.items)
@@ -84,7 +84,7 @@ export function OverviewPage() {
     return () => {
       alive = false
     }
-  }, [])
+  }, [ctx.env])
 
   // computed stats — no /overview endpoint exists, derived client-side
   const totalStorageMB = Math.round(resources.reduce((s, r) => s + r.storage_bytes, 0) / 1_000_000)

src/pages/ResourcesPage.tsx

@@ -11,10 +11,6 @@ import { useDashboardCtx } from '../hooks/useDashboardCtx'
 const TYPES: (ResourceType | 'all')[] = ['all', 'postgres', 'redis', 'mongodb', 'queue', 'storage', 'webhook']
 
 export function ResourcesPage() {
-  // We still read team tier from ctx for the prompt cards — env, however,
-  // is intentionally NOT consumed here. The backend doesn't honor a multi-env
-  // filter (no GET /api/v1/resources?env=…), so surfacing chips would be a lie.
-  // Env stays scoped to VaultPage where it's genuinely backed by per-env rows.
   const ctx = useDashboardCtx()
   const [items, setItems] = useState<Resource[]>([])
   const [loading, setLoading] = useState(true)
@@ -28,7 +24,7 @@ export function ResourcesPage() {
     let alive = true
     setLoading(true)
     setErr(null)
-    api.listResources()
+    api.listResources(ctx.env)
       .then((r) => {
         if (!alive) return
         setItems(r.items)
@@ -40,7 +36,7 @@ export function ResourcesPage() {
         setLoading(false)
       })
     return () => { alive = false }
-  }, [])
+  }, [ctx.env])
 
   const filtered = useMemo(
     () => items.filter((r) => type === 'all' || r.resource_type === type),