FilOzone · silent-cipher · May 26, 2026
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -26,6 +26,7 @@
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@tailwindcss/vite": "^4.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

diff --git a/apps/web/src/api/client.ts b/apps/web/src/api/client.ts
@@ -1,4 +1,4 @@
-import type { AppConfigResponse } from "@/types/config";
+import type { AppConfigResponse, Network } from "@/types/config";
 import type { PaginationOptions } from "@/types/pagination";
 import type { ProvidersListResponseWithoutMetrics } from "@/types/providers";
 
@@ -31,10 +31,12 @@ const buildQueryString = (params: Record<string, string | number | boolean | und
 // ============================================================================
 
 /**
- * Fetch simple providers list (without performance metrics)
- * Used for dropdowns and filters
+ * Fetch simple providers list (without performance metrics).
+ * Pass `network` to scope results to a specific network; omit to get all active networks.
  */
-export async function fetchProvidersList(options?: PaginationOptions): Promise<ProvidersListResponseWithoutMetrics> {
+export async function fetchProvidersList(
+  options?: PaginationOptions & { network?: Network },
+): Promise<ProvidersListResponseWithoutMetrics> {
   const queryString = options ? buildQueryString(options as Record<string, string | number | boolean | undefined>) : "";
   const url = `${getBaseUrl()}/api/v1/providers${queryString}`;
 

diff --git a/apps/web/src/components/shared/Header/index.tsx b/apps/web/src/components/shared/Header/index.tsx
@@ -1,4 +1,4 @@
-import { ModeToggle, NetworkSwitcher, UIVersionToggle } from "@/components/shared";
+import { EnvironmentSwitcher, ModeToggle, UIVersionToggle } from "@/components/shared";
 
 const Header = () => (
   <header className="sticky top-0 z-50 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -14,7 +14,7 @@ const Header = () => (
           </div>
         </div>
         <div className="flex items-center gap-2 sm:gap-4">
-          <NetworkSwitcher />
+          <EnvironmentSwitcher />
           <UIVersionToggle />
           <ModeToggle />
         </div>

diff --git a/apps/web/src/components/shared/Network/EnvironmentSwitcher.test.tsx b/apps/web/src/components/shared/Network/EnvironmentSwitcher.test.tsx
@@ -0,0 +1,117 @@
+import { server } from "@test/mocks/server";
+import { render, screen, waitFor } from "@testing-library/react";
+import { HttpResponse, http } from "msw";
+import { MemoryRouter } from "react-router-dom";
+import { describe, expect, it } from "vitest";
+import EnvironmentSwitcher from "./EnvironmentSwitcher";
+
+const configUrl = "/api/config";
+
+function makeConfig(network: "mainnet" | "calibration") {
+  return {
+    networks: [
+      {
+        network,
+        dealsPerSpPerHour: 4,
+        retrievalsPerSpPerHour: 4,
+        dataSetCreationsPerSpPerHour: 0,
+        pullChecksPerSpPerHour: 0,
+        dataRetentionPollIntervalSeconds: 3600,
+        providersRefreshIntervalSeconds: 3600,
+      },
+    ],
+  };
+}
+
+describe("EnvironmentSwitcher", () => {
+  it("links to Staging when current deployment monitors mainnet (Production)", async () => {
+    server.use(http.get(configUrl, () => HttpResponse.json(makeConfig("mainnet"))));
+
+    render(
+      <MemoryRouter>
+        <EnvironmentSwitcher />
+      </MemoryRouter>,
+    );
+
+    const link = await screen.findByRole("link", { name: /Switch to Staging/i });
+    expect(link).toHaveAttribute("href", "https://staging.dealbot.filoz.org");
+  });
+
+  it("links to Production when current deployment monitors calibration (Staging)", async () => {
+    server.use(http.get(configUrl, () => HttpResponse.json(makeConfig("calibration"))));
+
+    render(
+      <MemoryRouter>
+        <EnvironmentSwitcher />
+      </MemoryRouter>,
+    );
+
+    const link = await screen.findByRole("link", { name: /Switch to Production/i });
+    expect(link).toHaveAttribute("href", "https://dealbot.filoz.org");
+  });
+
+  it("shows loading skeleton initially", () => {
+    server.use(http.get(configUrl, () => new Promise(() => {})));
+
+    const { container } = render(
+      <MemoryRouter>
+        <EnvironmentSwitcher />
+      </MemoryRouter>,
+    );
+
+    expect(container.querySelector(".animate-pulse")).toBeInTheDocument();
+  });
+
+  it("hides component when config fails to load", async () => {
+    server.use(http.get(configUrl, () => new HttpResponse(null, { status: 500 })));
+
+    const { container } = render(
+      <MemoryRouter>
+        <EnvironmentSwitcher />
+      </MemoryRouter>,
+    );
+
+    await waitFor(() => {
+      expect(container.firstChild).toBeNull();
+    });
+  });
+
+  it("opens link with rel=noreferrer", async () => {
+    server.use(http.get(configUrl, () => HttpResponse.json(makeConfig("mainnet"))));
+
+    render(
+      <MemoryRouter>
+        <EnvironmentSwitcher />
+      </MemoryRouter>,
+    );
+
+    const link = await screen.findByRole("link", { name: /Switch to Staging/i });
+    expect(link).toHaveAttribute("rel", "noreferrer");
+  });
+
+  it("shows amber dot when linking to Staging (calibration)", async () => {
+    server.use(http.get(configUrl, () => HttpResponse.json(makeConfig("mainnet"))));
+
+    const { container } = render(
+      <MemoryRouter>
+        <EnvironmentSwitcher />
+      </MemoryRouter>,
+    );
+
+    await screen.findByRole("link", { name: /Switch to Staging/i });
+    expect(container.querySelector(".bg-amber-500")).toBeInTheDocument();
+  });
+
+  it("shows emerald dot when linking to Production (mainnet)", async () => {
+    server.use(http.get(configUrl, () => HttpResponse.json(makeConfig("calibration"))));
+
+    const { container } = render(
+      <MemoryRouter>
+        <EnvironmentSwitcher />
+      </MemoryRouter>,
+    );
+
+    await screen.findByRole("link", { name: /Switch to Production/i });
+    expect(container.querySelector(".bg-emerald-500")).toBeInTheDocument();
+  });
+});
diff --git a/apps/web/src/components/shared/Network/EnvironmentSwitcher.tsx b/apps/web/src/components/shared/Network/EnvironmentSwitcher.tsx
@@ -0,0 +1,35 @@
+import { ArrowLeftRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useActiveNetworks } from "@/hooks/useActiveNetworks";
+import { ENVIRONMENT_LABEL, NETWORK_DEPLOYMENT_URL, NETWORK_DOT_CLASS } from "./constants";
+
+/**
+ * Header control that links to the sibling deployment for the other environment.
+ *
+ * Environment is determined by which networks the current deployment monitors:
+ * - Active networks include mainnet → Production deployment → link to Staging
+ * - Active networks are calibration-only → Staging deployment → link to Production
+ */
+export default function EnvironmentSwitcher() {
+  const { activeNetworks, loading, error } = useActiveNetworks();
+
+  if (loading) {
+    return <div className="h-8 w-8 sm:w-40 animate-pulse rounded-md bg-muted" aria-hidden />;
+  }
+
+  if (error || activeNetworks.length === 0) return null;
+
+  const isProduction = activeNetworks.includes("mainnet");
+  const targetEnv = isProduction ? "calibration" : "mainnet";
+  const label = `Switch to ${ENVIRONMENT_LABEL[targetEnv]}`;
+
+  return (
+    <Button asChild variant="outline" size="sm" title={label} aria-label={label}>
+      <a href={NETWORK_DEPLOYMENT_URL[targetEnv]} rel="noreferrer">
+        <span className={`h-2 w-2 rounded-full ${NETWORK_DOT_CLASS[targetEnv]}`} aria-hidden />
+        <ArrowLeftRight className="h-3.5 w-3.5" />
+        <span className="hidden sm:inline">{ENVIRONMENT_LABEL[targetEnv]}</span>
+      </a>
+    </Button>
+  );
+}
diff --git a/apps/web/src/components/shared/Network/NetworkBadge.tsx b/apps/web/src/components/shared/Network/NetworkBadge.tsx
@@ -1,16 +1,20 @@
-import { useNetworkConfig } from "@/hooks/useNetworkConfig";
+import type { Network } from "@/types/config";
 import { NETWORK_DOT_CLASS, NETWORK_LABEL } from "./constants";
 
-function NetworkBadge({ className }: { className?: string }) {
-  const { network, loading, error } = useNetworkConfig();
+interface NetworkBadgeProps {
+  network: Network | null;
+  loading?: boolean;
+  className?: string;
+}
 
+function NetworkBadge({ network, loading = false, className }: NetworkBadgeProps) {
   if (loading) {
     return (
       <span className={`inline-block h-6 w-40 animate-pulse rounded-full bg-muted ${className ?? ""}`} aria-hidden />
     );
   }
 
-  if (error || network === null) return null;
+  if (network === null) return null;
 
   return (
     <span

diff --git a/apps/web/src/components/shared/Network/NetworkSwitcher.test.tsx b/apps/web/src/components/shared/Network/NetworkSwitcher.test.tsx
@@ -1,146 +1,50 @@
-import { server } from "@test/mocks/server";
-import { render, screen, waitFor } from "@testing-library/react";
-import { HttpResponse, http } from "msw";
-import { MemoryRouter } from "react-router-dom";
-import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
 import NetworkSwitcher from "./NetworkSwitcher";
 
-const configUrl = "/api/config";
-
 describe("NetworkSwitcher", () => {
-  it("shows current network and a link to switch to the other deployment (mainnet → calibration)", async () => {
-    server.use(
-      http.get(configUrl, () =>
-        HttpResponse.json({
-          network: "mainnet",
-          jobs: {},
-        }),
-      ),
-    );
-
-    render(
-      <MemoryRouter>
-        <NetworkSwitcher />
-      </MemoryRouter>,
-    );
-
-    const switchLink = await screen.findByRole("link", { name: /Switch to Calibration/i });
-    expect(switchLink).toHaveAttribute("href", "https://staging.dealbot.filoz.org");
+  it("renders nothing when only one network is active", () => {
+    const { container } = render(<NetworkSwitcher networks={["mainnet"]} selected="mainnet" onChange={vi.fn()} />);
+    expect(container.firstChild).toBeNull();
   });
 
-  it("offers switching to mainnet when current instance monitors calibration", async () => {
-    server.use(
-      http.get(configUrl, () =>
-        HttpResponse.json({
-          network: "calibration",
-          jobs: {},
-        }),
-      ),
-    );
-
-    render(
-      <MemoryRouter>
-        <NetworkSwitcher />
-      </MemoryRouter>,
-    );
-
-    const switchLink = await screen.findByRole("link", { name: /Switch to Mainnet/i });
-    expect(switchLink).toHaveAttribute("href", "https://dealbot.filoz.org");
+  it("renders a tab for each network when multiple are active", () => {
+    render(<NetworkSwitcher networks={["mainnet", "calibration"]} selected="mainnet" onChange={vi.fn()} />);
+    expect(screen.getByRole("tab", { name: /mainnet/i })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: /calibration/i })).toBeInTheDocument();
   });
 
-  it("shows loading state initially", () => {
-    server.use(http.get(configUrl, () => new Promise(() => {})));
-
-    const { container } = render(
-      <MemoryRouter>
-        <NetworkSwitcher />
-      </MemoryRouter>,
-    );
-
-    const loadingElement = container.querySelector(".animate-pulse");
-    expect(loadingElement).toBeInTheDocument();
-    expect(loadingElement).toHaveClass("bg-muted");
+  it("marks the selected network tab as aria-selected", () => {
+    render(<NetworkSwitcher networks={["mainnet", "calibration"]} selected="calibration" onChange={vi.fn()} />);
+    expect(screen.getByRole("tab", { name: /calibration/i })).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByRole("tab", { name: /mainnet/i })).toHaveAttribute("aria-selected", "false");
   });
 
-  it("hides component when network config fails to load", async () => {
-    server.use(
-      http.get(configUrl, () => {
-        return new HttpResponse(null, { status: 500 });
-      }),
-    );
+  it("calls onChange with the clicked network", async () => {
+    const onChange = vi.fn();
+    render(<NetworkSwitcher networks={["mainnet", "calibration"]} selected="mainnet" onChange={onChange} />);
 
-    const { container } = render(
-      <MemoryRouter>
-        <NetworkSwitcher />
-      </MemoryRouter>,
-    );
-
-    await waitFor(() => {
-      expect(container.firstChild).toBeNull();
-    });
-  });
-
-  it("opens link in new tab with proper security attributes", async () => {
-    server.use(
-      http.get(configUrl, () =>
-        HttpResponse.json({
-          network: "mainnet",
-          jobs: {},
-        }),
-      ),
-    );
-
-    render(
-      <MemoryRouter>
-        <NetworkSwitcher />
-      </MemoryRouter>,
-    );
-
-    const switchLink = await screen.findByRole("link", { name: /Switch to Calibration/i });
-    expect(switchLink).toHaveAttribute("rel", "noreferrer");
+    await userEvent.click(screen.getByRole("tab", { name: /calibration/i }));
+    expect(onChange).toHaveBeenCalledWith("calibration");
   });
 
-  it("displays correct network indicator color for calibration", async () => {
-    server.use(
-      http.get(configUrl, () =>
-        HttpResponse.json({
-          network: "calibration",
-          jobs: {},
-        }),
-      ),
-    );
-
+  it("shows emerald dot for mainnet tab", () => {
     const { container } = render(
-      <MemoryRouter>
-        <NetworkSwitcher />
-      </MemoryRouter>,
+      <NetworkSwitcher networks={["mainnet", "calibration"]} selected="mainnet" onChange={vi.fn()} />,
     );
-
-    await screen.findByRole("link", { name: /Switch to Mainnet/i });
-
-    const networkDot = container.querySelector(".bg-emerald-500");
-    expect(networkDot).toBeInTheDocument();
+    expect(container.querySelector(".bg-emerald-500")).toBeInTheDocument();
   });
 
-  it("displays correct network indicator color for mainnet", async () => {
-    server.use(
-      http.get(configUrl, () =>
-        HttpResponse.json({
-          network: "mainnet",
-          jobs: {},
-        }),
-      ),
-    );
-
+  it("shows amber dot for calibration tab", () => {
     const { container } = render(
-      <MemoryRouter>
-        <NetworkSwitcher />
-      </MemoryRouter>,
+      <NetworkSwitcher networks={["mainnet", "calibration"]} selected="mainnet" onChange={vi.fn()} />,
     );
+    expect(container.querySelector(".bg-amber-500")).toBeInTheDocument();
+  });
 
-    await screen.findByRole("link", { name: /Switch to Calibration/i });
-
-    const networkDot = container.querySelector(".bg-amber-500");
-    expect(networkDot).toBeInTheDocument();
+  it("has role=tablist on the container", () => {
+    render(<NetworkSwitcher networks={["mainnet", "calibration"]} selected="mainnet" onChange={vi.fn()} />);
+    expect(screen.getByRole("tablist")).toBeInTheDocument();
   });
 });