fix(#338): Gate mock data behind NODE_ENV check

- Create ComingSoon component for production placeholders
- Federation connections page shows Coming Soon in production
- Workspaces settings page shows Coming Soon in production
- Teams page shows Coming Soon in production
- Add comprehensive tests for environment-based rendering

Refs #338

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/web/src/app/(authenticated)/federation/connections/page.test.tsx

@@ -0,0 +1,51 @@
+/**
+ * Federation Connections Page Tests
+ * Tests for page structure and component integration
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+// Mock the federation components
+vi.mock("@/components/federation/ConnectionList", () => ({
+  ConnectionList: (): React.JSX.Element => <div data-testid="connection-list">ConnectionList</div>,
+}));
+
+vi.mock("@/components/federation/InitiateConnectionDialog", () => ({
+  InitiateConnectionDialog: (): React.JSX.Element => (
+    <div data-testid="initiate-dialog">Dialog</div>
+  ),
+}));
+
+describe("ConnectionsPage", (): void => {
+  // Note: NODE_ENV is "test" during test runs, which triggers the Coming Soon view
+  // This tests the production-like behavior where mock data is hidden
+
+  it("should render the Coming Soon view in non-development environments", async (): Promise<void> => {
+    // Dynamic import to ensure fresh module state
+    const { default: ConnectionsPage } = await import("./page");
+    render(<ConnectionsPage />);
+
+    // In test mode (non-development), should show Coming Soon
+    expect(screen.getByText("Coming Soon")).toBeInTheDocument();
+    expect(screen.getByText("Federation Connections")).toBeInTheDocument();
+  });
+
+  it("should display appropriate description for federation feature", async (): Promise<void> => {
+    const { default: ConnectionsPage } = await import("./page");
+    render(<ConnectionsPage />);
+
+    expect(
+      screen.getByText(/connect and manage relationships with other mosaic stack instances/i)
+    ).toBeInTheDocument();
+  });
+
+  it("should not render mock data in Coming Soon view", async (): Promise<void> => {
+    const { default: ConnectionsPage } = await import("./page");
+    render(<ConnectionsPage />);
+
+    // Should not show the connection list or dialog in non-development mode
+    expect(screen.queryByTestId("connection-list")).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /connect to instance/i })).not.toBeInTheDocument();
+  });
+});

apps/web/src/app/(authenticated)/federation/connections/page.tsx

@@ -8,6 +8,7 @@
 import { useState, useEffect } from "react";
 import { ConnectionList } from "@/components/federation/ConnectionList";
 import { InitiateConnectionDialog } from "@/components/federation/InitiateConnectionDialog";
+import { ComingSoon } from "@/components/ui/ComingSoon";
 import {
   mockConnections,
   FederationConnectionStatus,
@@ -23,7 +24,14 @@ import {
 //   disconnectConnection,
 // } from "@/lib/api/federation";
 
-export default function ConnectionsPage(): React.JSX.Element {
+// Check if we're in development mode
+const isDevelopment = process.env.NODE_ENV === "development";
+
+/**
+ * Federation Connections Page - Development Only
+ * Shows mock data in development, Coming Soon in production
+ */
+function ConnectionsPageContent(): React.JSX.Element {
   const [connections, setConnections] = useState<ConnectionDetails[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [showDialog, setShowDialog] = useState(false);
@@ -44,7 +52,7 @@ export default function ConnectionsPage(): React.JSX.Element {
       // TODO: Replace with real API call when backend is integrated
       // const data = await fetchConnections();
 
-      // Using mock data for now
+      // Using mock data for now (development only)
       await new Promise((resolve) => setTimeout(resolve, 500)); // Simulate network delay
       setConnections(mockConnections);
     } catch (err) {
@@ -218,3 +226,22 @@ export default function ConnectionsPage(): React.JSX.Element {
     </main>
   );
 }
+
+/**
+ * Federation Connections Page Entry Point
+ * Shows development content or Coming Soon based on environment
+ */
+export default function ConnectionsPage(): React.JSX.Element {
+  // In production, show Coming Soon placeholder
+  if (!isDevelopment) {
+    return (
+      <ComingSoon
+        feature="Federation Connections"
+        description="Connect and manage relationships with other Mosaic Stack instances. Federation support is currently under development."
+      />
+    );
+  }
+
+  // In development, show the full page with mock data
+  return <ConnectionsPageContent />;
+}