From a9361b44bb1b2b9eb7d1bd009b893c8f8c4be69a Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Sun, 19 Apr 2026 00:54:59 -0700
Subject: [PATCH] fix(web): add feature flag gate to webhooks page for
 consistency with inbox/planner

---
 web/src/app/webhooks/page.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/web/src/app/webhooks/page.tsx b/web/src/app/webhooks/page.tsx
index cb086ea..f0f66a7 100644
--- a/web/src/app/webhooks/page.tsx
+++ b/web/src/app/webhooks/page.tsx
@@ -12,6 +12,7 @@ import {
   type WebhookSubscription,
   type EventType,
 } from '@/lib/webhook-client';
+import { isEnabled } from '@/lib/feature-flags';
 
 export default function WebhooksPage() {
   const [subs, setSubs] = useState<WebhookSubscription[]>([]);
@@ -23,6 +24,8 @@ export default function WebhooksPage() {
   const [newDesc, setNewDesc] = useState('');
   const [error, setError] = useState<string | null>(null);
 
+  const enabled = isEnabled('webhooks.enabled');
+
   const loadData = useCallback(async () => {
     setLoading(true);
     try {
@@ -35,7 +38,7 @@ export default function WebhooksPage() {
     setLoading(false);
   }, []);
 
-  useEffect(() => { loadData(); }, [loadData]);
+  useEffect(() => { if (enabled) loadData(); }, [enabled, loadData]);
 
   const handleCreate = async () => {
     if (!newUrl.trim() || newEvents.length === 0) {
@@ -76,6 +79,17 @@ export default function WebhooksPage() {
     setNewEvents(prev => prev.includes(type) ? prev.filter(t => t !== type) : [...prev, type]);
   };
 
+  if (!enabled) {
+    return (
+      <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: 'var(--cm-bg-canvas)' }}>
+        <div className="text-center">
+          <Globe size={48} style={{ color: 'var(--cm-text-tertiary)' }} className="mx-auto mb-4" />
+          <p className="text-sm" style={{ color: 'var(--cm-text-secondary)' }}>Webhooks are not enabled. Enable the <code>webhooks.enabled</code> flag.</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen" style={{ backgroundColor: 'var(--cm-bg-canvas)' }}>
       <div className="max-w-2xl mx-auto px-4 py-6">