feat: add feature flag (#379)

Palashio · web-flow · commit 003d6a0aad7d · 2025-09-10T16:33:58.000-04:00
diff --git a/apps/web-v2/.env.example b/apps/web-v2/.env.example
@@ -30,3 +30,6 @@ NEXT_PUBLIC_DEBUG_MODE="false"
 
 # JWT secret for auth
 SUPABASE_JWT_SECRET=""
+
+# Client side id for feature flags
+NEXT_PUBLIC_LD_CLIENT_SIDE_ID=""
diff --git a/apps/web-v2/package.json b/apps/web-v2/package.json
@@ -54,6 +54,7 @@
     "jsonwebtoken": "^9.0.2",
     "katex": "latest",
     "langgraph-nextjs-api-passthrough": "^0.1.0",
+    "launchdarkly-react-client-sdk": "^3.8.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.488.0",
     "next-themes": "^0.4.6",
diff --git a/apps/web-v2/src/app/(app)/chat/page.tsx b/apps/web-v2/src/app/(app)/chat/page.tsx
@@ -22,6 +22,7 @@ function DeepAgentChatPageInner(): React.ReactNode {
         view={view}
         setView={setView}
         assistantName={selectedAgent?.name}
+        showToggle={!!agentId}
       />
       <div className="flex min-h-0 flex-1 overflow-hidden">
         <DeepAgentChatPageContent
diff --git a/apps/web-v2/src/app/(app)/layout.tsx b/apps/web-v2/src/app/(app)/layout.tsx
@@ -2,8 +2,8 @@ import type { Metadata } from "next";
 import "../globals.css";
 import React from "react";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
-import { SidebarLayout } from "@/components/sidebar";
 import { AuthProvider } from "@/providers/Auth";
+import { AuthenticatedApp } from "@/components/AuthenticatedApp";
 
 export const metadata: Metadata = {
   title: "Open Agent Platform",
@@ -29,7 +29,7 @@ export default function RootLayout({
       <body>
         <NuqsAdapter>
           <AuthProvider>
-            <SidebarLayout>{children}</SidebarLayout>
+            <AuthenticatedApp>{children}</AuthenticatedApp>
           </AuthProvider>
         </NuqsAdapter>
       </body>
diff --git a/apps/web-v2/src/components/AuthenticatedApp.tsx b/apps/web-v2/src/components/AuthenticatedApp.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+import { useAuthContext } from "@/providers/Auth";
+import { SidebarLayout } from "@/components/sidebar";
+import LaunchDarklyProvider from "@/providers/LaunchDarkly";
+import Loading from "@/components/ui/loading";
+
+export function AuthenticatedApp({ children }: { children: React.ReactNode }) {
+  const { isLoading } = useAuthContext();
+
+  // Show loading until auth is complete
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center p-8">
+        <Loading label="Preparing your workspace" />
+      </div>
+    );
+  }
+
+  // Only render the app with LaunchDarkly after auth is complete
+  return (
+    <LaunchDarklyProvider>
+      <SidebarLayout>{children}</SidebarLayout>
+    </LaunchDarklyProvider>
+  );
+}
diff --git a/apps/web-v2/src/components/sidebar/app-sidebar.tsx b/apps/web-v2/src/components/sidebar/app-sidebar.tsx
@@ -43,6 +43,7 @@ const data = {
       url: "/inbox",
       icon: Inbox,
     },
+
     {
       title: "Triggers",
       url: "/triggers",
diff --git a/apps/web-v2/src/components/ui/loading.tsx b/apps/web-v2/src/components/ui/loading.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import React from "react";
+import { LoaderCircle } from "lucide-react";
+
+export default function Loading({
+  label = "Preparing your workspace",
+}: {
+  label?: string;
+}) {
+  return (
+    <div className="flex min-h-[220px] w-full flex-col items-center justify-center gap-3 p-8 text-center">
+      <LoaderCircle className="h-8 w-8 animate-spin" />
+      <div className="text-sm text-black">{label}…</div>
+    </div>
+  );
+}
diff --git a/apps/web-v2/src/features/agents/components/create-edit-agent-dialogs/agent-form.tsx b/apps/web-v2/src/features/agents/components/create-edit-agent-dialogs/agent-form.tsx
@@ -17,13 +17,16 @@ import { useMCPContext } from "@/providers/MCP";
 import { useFetchPreselectedTools } from "@/hooks/use-fetch-preselected-tools";
 import { Controller, useFormContext } from "react-hook-form";
 import { AgentFormValues } from "./types";
+import { useFlags } from "launchdarkly-react-client-sdk";
+import { LaunchDarklyFeatureFlags } from "@/types/launch-darkly";
 
 interface AgentFieldsFormProps {
   agentId: string;
 }
 
 export function AgentFieldsForm({ agentId }: AgentFieldsFormProps) {
   const form = useFormContext<AgentFormValues>();
+  const { showTriggersTab } = useFlags<LaunchDarklyFeatureFlags>();
 
   const { tools, setTools, getTools, cursor, loading } = useMCPContext();
   const { toolSearchTerm, debouncedSetSearchTerm, displayTools } =
@@ -185,20 +188,26 @@ export function AgentFieldsForm({ agentId }: AgentFieldsFormProps) {
           )}
         />
       </div>
-      <Separator />
-      <div className="flex w-full flex-col items-start justify-start gap-2">
-        <p className="text-lg font-semibold tracking-tight">Agent Triggers</p>
-        <Controller
-          control={form.control}
-          name="config.triggers"
-          render={({ field: { value, onChange } }) => (
-            <ConfigFieldTriggers
-              value={value}
-              setValue={onChange}
+      {showTriggersTab !== false && (
+        <>
+          <Separator />
+          <div className="flex w-full flex-col items-start justify-start gap-2">
+            <p className="text-lg font-semibold tracking-tight">
+              Agent Triggers
+            </p>
+            <Controller
+              control={form.control}
+              name="config.triggers"
+              render={({ field: { value, onChange } }) => (
+                <ConfigFieldTriggers
+                  value={value}
+                  setValue={onChange}
+                />
+              )}
             />
-          )}
-        />
-      </div>
+          </div>
+        </>
+      )}
     </div>
   );
 }
diff --git a/apps/web-v2/src/features/chat/components/page-header.tsx b/apps/web-v2/src/features/chat/components/page-header.tsx
@@ -2,60 +2,75 @@
 
 import React from "react";
 import { SidebarTrigger } from "@/components/ui/sidebar";
+import { useFlags } from "launchdarkly-react-client-sdk";
+import { toast } from "sonner";
+import { LaunchDarklyFeatureFlags } from "@/types/launch-darkly";
+import { cn } from "@/lib/utils";
 
 interface PageHeaderProps {
   view: "chat" | "workflow";
   setView: (v: "chat" | "workflow") => void;
   assistantName?: string;
+  showToggle?: boolean;
 }
 
-export function PageHeader({ view, setView, assistantName }: PageHeaderProps) {
+export function PageHeader({
+  view,
+  setView,
+  assistantName,
+  showToggle = false,
+}: PageHeaderProps) {
+  const { showAgentVisualizerUi } = useFlags<LaunchDarklyFeatureFlags>();
+  const isWorkflowEnabled = showAgentVisualizerUi !== false;
+
+  const handleViewChange = (newView: "chat" | "workflow") => {
+    if (newView === "workflow" && !isWorkflowEnabled) {
+      toast.info("Workflow view is coming soon!", {
+        richColors: true,
+      });
+      return;
+    }
+    setView(newView);
+  };
+
   return (
     <header className="relative flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-      <div className="flex items-center gap-2 px-4">
-        <SidebarTrigger className="-ml-1" />
-        <span className="text-muted-foreground">›</span>
-        <span className="text-sm font-medium">
-          {assistantName || "main agent"}
-        </span>
-      </div>
-      <div className="absolute left-1/2 -translate-x-1/2">
-        <div
-          className="flex h-[24px] w-[134px] items-center gap-0 overflow-hidden rounded border bg-white p-[3px] text-[12px] shadow-sm"
-          style={{
-            borderColor: "D1D1D6",
-          }}
-        >
-          <button
-            type="button"
-            onClick={() => setView("chat")}
-            className="flex h-full flex-1 items-center justify-center truncate rounded p-[3px]"
-            style={
-              view === "chat"
-                ? {
-                    background: "#F4F3FF",
-                  }
-                : undefined
-            }
-          >
-            Chat
-          </button>
-          <button
-            type="button"
-            onClick={() => setView("workflow")}
-            className="flex h-full flex-1 items-center justify-center truncate rounded p-[3px]"
-            style={
-              view === "workflow"
-                ? {
-                    background: "#F4F3FF",
-                  }
-                : undefined
-            }
-          >
-            Workflow
-          </button>
+      {showToggle && (
+        <div className="flex items-center gap-2 px-4">
+          <SidebarTrigger className="-ml-1" />
+          <span className="text-muted-foreground">›</span>
+          <span className="text-sm font-medium">
+            {assistantName || "main agent"}
+          </span>
+        </div>
+      )}
+      {showToggle && (
+        <div className="absolute left-1/2 -translate-x-1/2">
+          <div className="flex h-[24px] w-[134px] items-center gap-0 overflow-hidden rounded border border-[#D1D1D6] bg-white p-[3px] text-[12px] shadow-sm">
+            <button
+              type="button"
+              onClick={() => handleViewChange("chat")}
+              className={cn(
+                "flex h-full flex-1 items-center justify-center truncate rounded p-[3px]",
+                view === "chat" && "bg-[#F4F3FF]",
+              )}
+            >
+              Chat
+            </button>
+            <button
+              type="button"
+              onClick={() => handleViewChange("workflow")}
+              className={cn(
+                "flex h-full flex-1 items-center justify-center truncate rounded p-[3px]",
+                view === "workflow" && "bg-[#F4F3FF]",
+                !isWorkflowEnabled && "cursor-not-allowed opacity-50",
+              )}
+            >
+              Workflow
+            </button>
+          </div>
         </div>
-      </div>
+      )}
     </header>
   );
 }
diff --git a/apps/web-v2/src/features/triggers/index.tsx b/apps/web-v2/src/features/triggers/index.tsx
@@ -18,6 +18,9 @@ import { useEffect, useState } from "react";
 import type { Trigger } from "@/types/triggers";
 import { toast } from "sonner";
 import { groupUserRegisteredTriggersByProvider } from "@/lib/triggers";
+import Loading from "@/components/ui/loading";
+import { useFlags } from "launchdarkly-react-client-sdk";
+import { LaunchDarklyFeatureFlags } from "@/types/launch-darkly";
 
 export default function TriggersInterface() {
   const [triggersLoading, setTriggersLoading] = useState(true);
@@ -27,8 +30,18 @@ export default function TriggersInterface() {
   >([]);
   const auth = useAuthContext();
   const { listTriggers, listUserTriggers } = useTriggers();
+  const { showTriggersTab } = useFlags<LaunchDarklyFeatureFlags>();
 
   useEffect(() => {
+    if (showTriggersTab === false) {
+      // Do not fetch when disabled
+      setTriggersLoading(false);
+      return;
+    }
+    if (showTriggersTab === undefined) {
+      setTriggersLoading(false);
+      return;
+    }
     if (!auth.session?.accessToken) return;
     setTriggersLoading(true);
     listTriggers(auth.session?.accessToken)
@@ -55,7 +68,7 @@ export default function TriggersInterface() {
       .finally(() => {
         setTriggersLoading(false);
       });
-  }, [auth.session?.accessToken]);
+  }, [auth.session?.accessToken, showTriggersTab]);
 
   if (triggersLoading) {
     return (
@@ -75,20 +88,45 @@ export default function TriggersInterface() {
               <Zap className="h-5 w-5" />
               Loading Triggers
             </CardTitle>
-            <CardDescription>Loading triggers...</CardDescription>
+            <CardDescription>Loading triggers…</CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="rounded-lg border border-dashed p-8 text-center">
-              <Zap className="text-muted-foreground mx-auto h-12 w-12" />
-              <h3 className="mt-4 text-lg font-semibold">Loading Triggers</h3>
-              <p className="text-muted-foreground mt-2">Loading triggers...</p>
-            </div>
+            <Loading label="Loading triggers" />
           </CardContent>
         </Card>
       </div>
     );
   }
 
+  // Feature disabled: show coming soon (tab still visible per UX)
+  if (showTriggersTab === false) {
+    return (
+      <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
+        <div className="flex items-center justify-between space-y-2">
+          <div>
+            <h2 className="text-3xl font-bold tracking-tight">Triggers</h2>
+            <p className="text-muted-foreground">
+              Set up triggers to automatically activate your agents
+            </p>
+          </div>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Zap className="h-5 w-5" />
+              Coming soon
+            </CardTitle>
+            <CardDescription>
+              This feature is under development and will be released soon. Stay
+              tuned!
+            </CardDescription>
+          </CardHeader>
+        </Card>
+      </div>
+    );
+  }
+
   if (triggers.length === 0) {
     return (
       <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
diff --git a/apps/web-v2/src/providers/LaunchDarkly.tsx b/apps/web-v2/src/providers/LaunchDarkly.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import React from "react";
+import { LDProvider } from "launchdarkly-react-client-sdk";
+import { useAuthContext } from "@/providers/Auth";
+
+export default function LaunchDarklyProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { user } = useAuthContext();
+
+  const context = {
+    kind: "user",
+    key: user?.id || "anonymous",
+    anonymous: !user?.id,
+    email: user?.email,
+  };
+
+  const clientSideID = process.env.NEXT_PUBLIC_LD_CLIENT_SIDE_ID;
+  if (!clientSideID) {
+    throw new Error("Missing NEXT_PUBLIC_LD_CLIENT_SIDE_ID.");
+  }
+
+  return (
+    <LDProvider
+      key={user?.id}
+      clientSideID={clientSideID}
+      context={context}
+      reactOptions={{ useCamelCaseFlagKeys: true }}
+    >
+      {children}
+    </LDProvider>
+  );
+}
diff --git a/apps/web-v2/src/types/launch-darkly.ts b/apps/web-v2/src/types/launch-darkly.ts
diff --git a/apps/web/src/features/tools/index.tsx b/apps/web/src/features/tools/index.tsx
diff --git a/packages/deep-agent-chat/package.json b/packages/deep-agent-chat/package.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,7 @@ const data = {`
`43`	`43`	`url: "/inbox",`
`44`	`44`	`icon: Inbox,`
`45`	`45`	`},`
	`46`	`+`
`46`	`47`	`{`
`47`	`48`	`title: "Triggers",`
`48`	`49`	`url: "/triggers",`