@burdenoff/microfe-vibecontrols 2026.623.1 → 2026.623.2

package/dist/pages/WebhooksPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"WebhooksPage.js","names":[],"sources":["../../src/pages/WebhooksPage.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  Plus,\n  Webhook,\n  Grid,\n  List,\n  Check,\n  X,\n  RefreshCw,\n  AlertTriangle,\n  Play,\n  Trash2,\n  Eye,\n  EyeOff,\n  Bot,\n} from 'lucide-react';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { isNative, nativeImpact, nativeNotify } from '../utils/nativeBridge';\nimport { AnimatePresence } from 'framer-motion';\nimport {\n  PageHeader,\n  SearchInput,\n  FilterDropdown,\n  EmptyState,\n  Card,\n  ErrorState,\n  ConfirmDialog,\n  QuotaExhaustedDialog,\n  SelectionCheckbox,\n  GetHelpButton,\n} from '@/components/shared';\nimport { useVibeControls, useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport {\n  useListWebhooksQuery,\n  useCreateWebhookMutation,\n  useUpdateWebhookMutation,\n  useTestWebhookMutation,\n  useDeleteWebhookMutation,\n} from '@/generated/wspace-operations';\nimport type { Webhook as WebhookType } from '@/components/webhooks/types';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { WEBHOOK_EVENTS, isCustomEvent } from '@/components/webhooks/types';\nimport { PermissionButton, AccessDenied } from '@burdenoff/fe-libs/shared/components';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { VIBE_PERMISSIONS } from '@/constants/permissions';\nimport { isQuotaExhaustedError } from '@/utils/quotaUtils';\n\ntype ViewMode = 'grid' | 'list';\n\nconst statusOptions = [\n  { value: 'all', label: 'All Statuses' },\n  { value: 'active', label: 'Active' },\n  { value: 'inactive', label: 'Inactive' },\n  { value: 'error', label: 'Has Errors' },\n];\n\n/**\n * Webhooks management page\n */\nexport function WebhooksPage() {\n  useVibeControls();\n  const navigate = useVibeNavigate();\n  const { t } = useI18n();\n  const { hasPermission, isLoading: permissionsLoading, permissions } = usePermissions();\n\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  // Check permissions\n  const canListWebhooks = hasPermission(VIBE_PERMISSIONS.WEBHOOK_LIST);\n  const canCreateWebhook = hasPermission(VIBE_PERMISSIONS.WEBHOOK_CREATE);\n\n  // Skip queries until permissions are loaded and user has permission\n  // This prevents FORBIDDEN errors from triggering auth error handlers\n  const shouldSkipQueries = permissionsLoading || !canListWebhooks;\n\n  const [searchQuery, setSearchQuery] = useState('');\n  const [statusFilter, setStatusFilter] = useState('all');\n  const [viewMode, setViewMode] = useState<ViewMode>('list');\n  const [showCreateForm, setShowCreateForm] = useState(false);\n  const [testingWebhook, setTestingWebhook] = useState<string | null>(null);\n  const [createError, setCreateError] = useState<string | null>(null);\n  const [createLoading, setCreateLoading] = useState(false);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [pageError, setPageError] = useState<string | null>(null);\n  const [selectedEvents, setSelectedEvents] = useState<string[]>([]);\n  const [selectedAgentIds, setSelectedAgentIds] = useState<string[]>([]);\n  const [showSigningKey, setShowSigningKey] = useState(false);\n  const [customEventInput, setCustomEventInput] = useState('');\n  const [selectedWebhookIds, setSelectedWebhookIds] = useState<Set<string>>(new Set());\n  const [bulkAction, setBulkAction] = useState<'enable' | 'disable' | 'delete' | null>(null);\n  const [quotaDialog, setQuotaDialog] = useState<{ title: string; message: string } | null>(null);\n\n  useEffect(() => {\n    if (!successMessage) {\n      return undefined;\n    }\n\n    const timeoutId = window.setTimeout(() => setSuccessMessage(null), 4000);\n    return () => window.clearTimeout(timeoutId);\n  }, [successMessage]);\n\n  useEffect(() => {\n    if (!showCreateForm) {\n      return undefined;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && !createLoading) {\n        setShowCreateForm(false);\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [createLoading, showCreateForm]);\n\n  // Form refs\n  const webhookNameRef = useRef<HTMLInputElement>(null);\n  const webhookUrlRef = useRef<HTMLInputElement>(null);\n  const webhookSecretRef = useRef<HTMLInputElement>(null);\n  const webhookSigningKeyRef = useRef<HTMLInputElement>(null);\n\n  const [createWebhook] = useCreateWebhookMutation({ refetchQueries: ['ListWebhooks'] });\n  const [updateWebhook] = useUpdateWebhookMutation({ refetchQueries: ['ListWebhooks'] });\n  const [testWebhook] = useTestWebhookMutation({ refetchQueries: ['ListWebhooks'] });\n  const [deleteWebhookMutation] = useDeleteWebhookMutation({ refetchQueries: ['ListWebhooks'] });\n\n  // Use cached initial data for agents dropdown\n  const { agents: cachedAgents } = useCachedInitialData();\n  const agents: Array<{ id: string; name: string }> = useMemo(\n    () =>\n      cachedAgents.map((a) => ({\n        id: a.id,\n        name: a.name,\n      })),\n    [cachedAgents]\n  );\n\n  // Fetch webhooks from GraphQL API\n  const { data, loading, error, refetch } = useListWebhooksQuery({\n    variables: {\n      filter: {\n        isActive:\n          statusFilter === 'active' ? true : statusFilter === 'inactive' ? false : undefined,\n      },\n      pagination: { limit: 50 },\n    },\n    fetchPolicy: 'cache-and-network',\n    skip: shouldSkipQueries,\n  });\n\n  // Map GraphQL response to Webhook type\n  const webhooks: WebhookType[] = useMemo(() => {\n    const rawWebhooks = data?.webhooks?.items ?? [];\n    return rawWebhooks.map((webhook: NonNullable<typeof rawWebhooks>[number]) => ({\n      id: webhook.id,\n      workspaceId: webhook.workspaceId,\n      name: webhook.name,\n      url: webhook.url,\n      events: webhook.events || [],\n      agentIds: webhook.agentIds || [],\n      secret: null,\n      signingKey: webhook.signingKey || null,\n      isActive: webhook.isActive,\n      lastDelivery: webhook.lastDelivery || null,\n      lastError: webhook.lastError || null,\n      deliveryCount: webhook.deliveryCount || 0,\n      failureCount: webhook.failureCount || 0,\n      metadata: {},\n      createdAt: webhook.createdAt,\n      updatedAt: webhook.updatedAt,\n    }));\n  }, [data?.webhooks?.items]);\n\n  // Filter webhooks based on search and error status (client-side filtering)\n  const filteredWebhooks = useMemo(() => {\n    return webhooks.filter((webhook) => {\n      // Search filter\n      if (searchQuery) {\n        const query = searchQuery.toLowerCase();\n        const matchesSearch =\n          webhook.name.toLowerCase().includes(query) ||\n          webhook.url.toLowerCase().includes(query) ||\n          webhook.events.some((e) => e.toLowerCase().includes(query));\n        if (!matchesSearch) return false;\n      }\n\n      // Error filter (additional client-side filter)\n      if (statusFilter === 'error' && !webhook.lastError) return false;\n\n      return true;\n    });\n  }, [webhooks, searchQuery, statusFilter]);\n\n  const selectedWebhooks = useMemo(\n    () => webhooks.filter((webhook) => selectedWebhookIds.has(webhook.id)),\n    [webhooks, selectedWebhookIds]\n  );\n  const activeSelectedWebhooks = selectedWebhooks.filter((webhook) => webhook.isActive);\n  const inactiveSelectedWebhooks = selectedWebhooks.filter((webhook) => !webhook.isActive);\n  const allVisibleSelected =\n    filteredWebhooks.length > 0 &&\n    filteredWebhooks.every((webhook) => selectedWebhookIds.has(webhook.id));\n  const partiallySelected =\n    filteredWebhooks.some((webhook) => selectedWebhookIds.has(webhook.id)) && !allVisibleSelected;\n\n  const handleCreateWebhook = () => {\n    setCreateError(null);\n    setPageError(null);\n    setSelectedEvents([]);\n    setSelectedAgentIds([]);\n    setShowSigningKey(false);\n    setCustomEventInput('');\n    setShowCreateForm(true);\n  };\n\n  const handleToggleEvent = (event: string) => {\n    setSelectedEvents((prev) =>\n      prev.includes(event) ? prev.filter((e) => e !== event) : [...prev, event]\n    );\n  };\n\n  const handleSubmitCreateWebhook = async () => {\n    const name = webhookNameRef.current?.value?.trim();\n    const url = webhookUrlRef.current?.value?.trim();\n    const secret = webhookSecretRef.current?.value?.trim() || undefined;\n    const signingKey = webhookSigningKeyRef.current?.value?.trim() || undefined;\n\n    if (!name) {\n      setCreateError(tr('webhooks.nameRequired', 'Name is required'));\n      return;\n    }\n    if (!url) {\n      setCreateError(tr('webhooks.urlRequired', 'URL is required'));\n      return;\n    }\n    // Validate URL format\n    try {\n      const parsedUrl = new URL(url);\n      if (!['http:', 'https:'].includes(parsedUrl.protocol)) {\n        setCreateError(\n          tr('webhooks.urlProtocolRequired', 'URL must use http:// or https:// protocol')\n        );\n        return;\n      }\n    } catch {\n      setCreateError(\n        tr('webhooks.urlInvalid', 'Please enter a valid URL (e.g., https://example.com/webhook)')\n      );\n      return;\n    }\n    if (selectedEvents.length === 0) {\n      setCreateError(tr('webhooks.eventRequired', 'At least one event must be selected'));\n      return;\n    }\n\n    setCreateLoading(true);\n    setCreateError(null);\n    setPageError(null);\n    try {\n      await createWebhook({\n        variables: {\n          input: {\n            name,\n            url,\n            events: selectedEvents,\n            secret,\n            ...(signingKey ? { signingKey } : {}),\n            ...(selectedAgentIds.length > 0 ? { agentIds: selectedAgentIds } : {}),\n          },\n        },\n      });\n      setShowCreateForm(false);\n      setSuccessMessage(tr('webhooks.createdSuccess', 'Webhook created successfully'));\n      setTimeout(() => setSuccessMessage(null), 3000);\n    } catch (err) {\n      if (isQuotaExhaustedError(err)) {\n        setShowCreateForm(false);\n        setQuotaDialog({\n          title: 'Webhook Quota Reached',\n          message:\n            'You have reached the webhook limit for your current plan. Upgrade to create more webhooks.',\n        });\n        return;\n      }\n\n      setCreateError(\n        err instanceof Error ? err.message : tr('webhooks.failedCreate', 'Failed to create webhook')\n      );\n    } finally {\n      setCreateLoading(false);\n    }\n  };\n\n  const handleToggleWebhook = async (webhook: WebhookType) => {\n    try {\n      setPageError(null);\n      await updateWebhook({\n        variables: { id: webhook.id, input: { isActive: !webhook.isActive } },\n      });\n      setSuccessMessage(\n        webhook.isActive\n          ? tr('webhooks.disabledSuccess', 'Webhook disabled successfully')\n          : tr('webhooks.enabledSuccess', 'Webhook enabled successfully')\n      );\n    } catch (err) {\n      console.error('Failed to toggle webhook:', err);\n      setPageError(\n        err instanceof Error\n          ? err.message\n          : tr('webhooks.failedToggle', 'Failed to update webhook state')\n      );\n    }\n  };\n\n  const handleTestWebhook = async (webhook: WebhookType) => {\n    setTestingWebhook(webhook.id);\n    try {\n      setPageError(null);\n      await testWebhook({ variables: { id: webhook.id } });\n      setSuccessMessage(tr('webhooks.testSuccess', 'Webhook test delivery completed'));\n    } catch (err) {\n      if (isQuotaExhaustedError(err)) {\n        setQuotaDialog({\n          title: 'Webhook Test Quota Reached',\n          message:\n            'You have used the webhook test quota for your current plan. Upgrade to continue testing deliveries.',\n        });\n        return;\n      }\n\n      console.error('Failed to test webhook:', err);\n      setPageError(\n        err instanceof Error ? err.message : tr('webhooks.failedTest', 'Failed to test webhook')\n      );\n    } finally {\n      setTestingWebhook(null);\n    }\n  };\n\n  const handleDeleteWebhook = async (webhook: WebhookType) => {\n    try {\n      setPageError(null);\n      await deleteWebhookMutation({ variables: { id: webhook.id } });\n      setSuccessMessage(tr('webhooks.deletedSuccess', 'Webhook deleted successfully'));\n      if (isNative()) void nativeNotify('success');\n    } catch (err) {\n      console.error('Failed to delete webhook:', err);\n      setPageError(\n        err instanceof Error ? err.message : tr('webhooks.failedDelete', 'Failed to delete webhook')\n      );\n      if (isNative()) void nativeNotify('error');\n    }\n  };\n\n  const toggleWebhookSelection = (webhookId: string, checked: boolean) => {\n    setSelectedWebhookIds((prev) => {\n      const next = new Set(prev);\n      if (checked) {\n        next.add(webhookId);\n      } else {\n        next.delete(webhookId);\n      }\n      return next;\n    });\n  };\n\n  const toggleAllVisibleWebhooks = (checked: boolean) => {\n    setSelectedWebhookIds((prev) => {\n      const next = new Set(prev);\n      filteredWebhooks.forEach((webhook) => {\n        if (checked) {\n          next.add(webhook.id);\n        } else {\n          next.delete(webhook.id);\n        }\n      });\n      return next;\n    });\n  };\n\n  const clearSelection = () => setSelectedWebhookIds(new Set());\n\n  const handleBulkToggleWebhooks = async (enable: boolean) => {\n    const targets = enable ? inactiveSelectedWebhooks : activeSelectedWebhooks;\n    if (targets.length === 0) return;\n\n    const results = await Promise.allSettled(\n      targets.map((webhook) =>\n        updateWebhook({ variables: { id: webhook.id, input: { isActive: enable } } })\n      )\n    );\n\n    const succeeded = results.filter((result) => result.status === 'fulfilled').length;\n    const failed = results.length - succeeded;\n\n    setSuccessMessage(\n      `${enable ? 'Enabled' : 'Disabled'} ${succeeded} webhook${succeeded === 1 ? '' : 's'}${failed > 0 ? ` • ${failed} failed` : ''}`\n    );\n    setTimeout(() => setSuccessMessage(null), 4000);\n    setBulkAction(null);\n    clearSelection();\n    await refetch();\n  };\n\n  const handleBulkDeleteWebhooks = async () => {\n    if (selectedWebhooks.length === 0) return;\n\n    const results = await Promise.allSettled(\n      selectedWebhooks.map((webhook) => deleteWebhookMutation({ variables: { id: webhook.id } }))\n    );\n\n    const succeeded = results.filter((result) => result.status === 'fulfilled').length;\n    const failed = results.length - succeeded;\n\n    setSuccessMessage(\n      `Deleted ${succeeded} webhook${succeeded === 1 ? '' : 's'}${failed > 0 ? ` • ${failed} failed` : ''}`\n    );\n    setTimeout(() => setSuccessMessage(null), 4000);\n    setBulkAction(null);\n    clearSelection();\n    await refetch();\n  };\n\n  // Stats\n  const stats = {\n    total: webhooks.length,\n    active: webhooks.filter((w) => w.isActive).length,\n    withErrors: webhooks.filter((w) => w.lastError).length,\n  };\n\n  const formatTimestamp = (timestamp: string | null) => {\n    if (!timestamp) return tr('webhooks.never', 'Never');\n    const diff = Date.now() - new Date(timestamp).getTime();\n    if (diff < 60000) return tr('webhooks.justNow', 'Just now');\n    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;\n    if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;\n    return `${Math.floor(diff / 86400000)}d ago`;\n  };\n\n  // Guard states rendered inside MotionPage to prevent unmount/remount animation replay\n  // Gate full render until permissions resolve — avoids flashing the page\n  // before the AccessDenied check can run.\n  if (permissionsLoading) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <PageSkeleton variant=\"rows\" count={6} />\n      </MotionPage>\n    );\n  }\n\n  if (permissions && permissions.permissionStrings?.length > 0 && !canListWebhooks) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <AccessDenied\n          title={tr('common.accessDeniedTitle', 'Access Denied')}\n          description={tr(\n            'webhooks.accessDeniedDescription',\n            \"You don't have permission to view webhooks.\"\n          )}\n          details=\"Required permission: webhook:list\"\n        />\n      </MotionPage>\n    );\n  }\n\n  if (error && webhooks.length === 0) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <ErrorState\n          title={tr('webhooks.failedLoad', 'Failed to load webhooks')}\n          message={error.message}\n          onRetry={() => refetch()}\n        />\n      </MotionPage>\n    );\n  }\n\n  return (\n    <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n      {/* Success Toast */}\n      {successMessage && (\n        <div className=\"fixed top-4 left-4 right-4 sm:left-auto z-50 bg-status-success-bg text-status-success-text px-4 py-3 rounded-md shadow-lg\">\n          {successMessage}\n        </div>\n      )}\n\n      {pageError && (\n        <div\n          role=\"alert\"\n          className=\"rounded-lg border border-status-error-border bg-status-error-bg/10 px-4 py-3 text-sm text-status-error-text\"\n        >\n          {pageError}\n        </div>\n      )}\n\n      <PageHeader\n        title={tr('nav.webhooks', 'Webhooks')}\n        description={`${stats.active} of ${stats.total} webhooks active`}\n        actions={\n          <div className=\"flex items-center gap-2\">\n            <button\n              type=\"button\"\n              onClick={() => refetch()}\n              disabled={loading}\n              className=\"flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n              title={tr('webhooks.refreshTitle', 'Refresh webhooks')}\n            >\n              <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />\n            </button>\n            <PermissionButton permission={VIBE_PERMISSIONS.WEBHOOK_CREATE}>\n              <button\n                type=\"button\"\n                onClick={handleCreateWebhook}\n                className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n              >\n                <Plus className=\"size-4\" />\n                {tr('webhooks.newWebhook', 'New Webhook')}\n              </button>\n            </PermissionButton>\n          </div>\n        }\n      />\n\n      {/* Filters Bar */}\n      <div className=\"space-y-3\">\n        {/* Row 1: Search + View Toggle */}\n        <div className=\"flex items-center gap-2\">\n          <SearchInput\n            value={searchQuery}\n            onChange={setSearchQuery}\n            placeholder={tr('webhooks.searchPlaceholder', 'Search webhooks...')}\n            className=\"flex-1 sm:w-64 sm:flex-none\"\n          />\n          {/* View Toggle */}\n          <div className=\"flex items-center gap-1 bg-bg-sunken rounded-md p-1 flex-shrink-0\">\n            <button\n              type=\"button\"\n              onClick={() => setViewMode('grid')}\n              className={`p-1.5 sm:p-2 rounded ${viewMode === 'grid' ? 'bg-bg-surface shadow-sm' : 'hover:bg-bg-surface/50'}`}\n              title={tr('webhooks.gridViewTitle', 'Grid view')}\n            >\n              <Grid className=\"size-4 text-text-secondary\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => setViewMode('list')}\n              className={`p-1.5 sm:p-2 rounded ${viewMode === 'list' ? 'bg-bg-surface shadow-sm' : 'hover:bg-bg-surface/50'}`}\n              title={tr('webhooks.listViewTitle', 'List view')}\n            >\n              <List className=\"size-4 text-text-secondary\" />\n            </button>\n          </div>\n        </div>\n\n        {/* Row 2: Filters */}\n        <div className=\"flex items-center gap-2 sm:gap-3\">\n          <FilterDropdown\n            label={tr('webhooks.status', 'Status')}\n            value={statusFilter}\n            options={statusOptions}\n            onChange={setStatusFilter}\n          />\n        </div>\n      </div>\n\n      {/* Quick Actions */}\n      {stats.withErrors > 0 && (\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => setStatusFilter('error')}\n            className={`flex items-center gap-2 px-3 py-1.5 text-sm rounded-full transition-colors ${\n              statusFilter === 'error'\n                ? 'bg-status-error-bg text-status-error-text'\n                : 'bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80'\n            }`}\n          >\n            <AlertTriangle className=\"size-3\" />\n            {tr('webhooks.withErrors', 'With Errors')} ({stats.withErrors})\n          </button>\n        </div>\n      )}\n\n      {/* Results Count */}\n      {(searchQuery || statusFilter !== 'all') && (\n        <p className=\"text-sm text-text-secondary\">\n          {tr('webhooks.showingResults', 'Showing')} {filteredWebhooks.length}{' '}\n          {tr('webhooks.of', 'of')} {webhooks.length} {tr('nav.webhooks', 'webhooks')}\n          {loading && (\n            <span className=\"ml-2 text-text-muted\">\n              ({tr('webhooks.refreshing', 'refreshing...')})\n            </span>\n          )}\n        </p>\n      )}\n\n      {filteredWebhooks.length > 0 && (\n        <div className=\"rounded-lg border border-border-default bg-bg-surface p-4\">\n          <div className=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n            <div className=\"flex flex-wrap items-center gap-3\">\n              <div className=\"flex items-center gap-2\">\n                <SelectionCheckbox\n                  checked={allVisibleSelected}\n                  indeterminate={partiallySelected}\n                  onChange={toggleAllVisibleWebhooks}\n                  ariaLabel=\"Select all visible webhooks\"\n                />\n                <span className=\"text-sm font-medium text-text-primary\">Select all visible</span>\n              </div>\n              {selectedWebhookIds.size > 0 && (\n                <button\n                  type=\"button\"\n                  onClick={clearSelection}\n                  className=\"text-sm text-text-secondary hover:text-text-primary\"\n                >\n                  Clear selection\n                </button>\n              )}\n            </div>\n\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <span className=\"rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary\">\n                {selectedWebhookIds.size} selected\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setBulkAction('enable')}\n                disabled={inactiveSelectedWebhooks.length === 0}\n                className=\"rounded-md border border-status-success-border px-3 py-2 text-sm font-medium text-status-success-text hover:bg-status-success-bg disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                Enable Selected\n                {inactiveSelectedWebhooks.length > 0 ? ` (${inactiveSelectedWebhooks.length})` : ''}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => setBulkAction('disable')}\n                disabled={activeSelectedWebhooks.length === 0}\n                className=\"rounded-md border border-status-warning-border px-3 py-2 text-sm font-medium text-status-warning-text hover:bg-status-warning-bg disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                Disable Selected\n                {activeSelectedWebhooks.length > 0 ? ` (${activeSelectedWebhooks.length})` : ''}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => setBulkAction('delete')}\n                disabled={selectedWebhooks.length === 0}\n                className=\"rounded-md border border-status-error-bg px-3 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                Delete Selected\n                {selectedWebhooks.length > 0 ? ` (${selectedWebhooks.length})` : ''}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* Webhooks Display */}\n      <AnimatePresence mode=\"wait\">\n        {loading && webhooks.length === 0 ? (\n          <PageSkeleton variant=\"rows\" count={6} />\n        ) : filteredWebhooks.length > 0 ? (\n          <MotionList\n            key={`webhook-list-${viewMode}`}\n            className={viewMode === 'grid' ? 'grid grid-cols-1 gap-4 xl:grid-cols-2' : 'space-y-4'}\n          >\n            {filteredWebhooks.map((webhook) => (\n              <MotionItem key={webhook.id} variant=\"fadeRight\">\n                <Card className=\"p-4\">\n                  <div className=\"flex flex-col sm:flex-row sm:items-start justify-between gap-4\">\n                    <div className=\"flex items-start gap-4 flex-1 min-w-0\">\n                      <div onClick={(event) => event.stopPropagation()}>\n                        <SelectionCheckbox\n                          checked={selectedWebhookIds.has(webhook.id)}\n                          onChange={(checked) => toggleWebhookSelection(webhook.id, checked)}\n                          ariaLabel={`Select webhook ${webhook.name}`}\n                          className=\"mt-2\"\n                        />\n                      </div>\n                      <div\n                        className={`size-10 rounded-lg flex items-center justify-center flex-shrink-0 ${\n                          webhook.isActive\n                            ? 'bg-status-success-bg text-status-success-text'\n                            : 'bg-bg-sunken text-text-secondary'\n                        }`}\n                      >\n                        <Webhook className=\"size-5\" />\n                      </div>\n                      <div className=\"flex-1 min-w-0\">\n                        <div className=\"flex items-center gap-2 flex-wrap\">\n                          <h3 className=\"font-semibold text-text-primary\">{webhook.name}</h3>\n                          <span\n                            className={`px-2 py-0.5 text-xs rounded-full ${\n                              webhook.isActive\n                                ? 'bg-status-success-bg text-status-success-text'\n                                : 'bg-bg-sunken text-text-secondary'\n                            }`}\n                          >\n                            {webhook.isActive\n                              ? tr('webhooks.active', 'Active')\n                              : tr('webhooks.inactive', 'Inactive')}\n                          </span>\n                          {webhook.lastError && (\n                            <span className=\"px-2 py-0.5 text-xs rounded-full bg-status-error-bg text-status-error-text\">\n                              {tr('webhooks.error', 'Error')}\n                            </span>\n                          )}\n                        </div>\n                        <p className=\"text-sm text-text-secondary mt-1 font-mono truncate\">\n                          {webhook.url}\n                        </p>\n                        <div className=\"flex flex-wrap gap-1 mt-2\">\n                          {webhook.events.map((event) => (\n                            <span\n                              key={event}\n                              className={`px-2 py-0.5 text-xs rounded ${\n                                isCustomEvent(event)\n                                  ? 'bg-action-primary-bg/10 text-action-primary-bg border border-dashed border-action-primary-bg/30'\n                                  : 'bg-bg-sunken text-text-secondary'\n                              }`}\n                            >\n                              {event}\n                            </span>\n                          ))}\n                        </div>\n                        {webhook.agentIds.length > 0 && (\n                          <div className=\"flex items-center gap-1 mt-2\">\n                            <Bot className=\"size-3 text-text-muted\" />\n                            <span className=\"text-xs text-text-muted\">\n                              {tr('webhooks.scopedTo', 'Scoped to')} {webhook.agentIds.length}{' '}\n                              {tr('webhooks.agent', 'agent')}\n                              {webhook.agentIds.length !== 1 ? 's' : ''}\n                            </span>\n                          </div>\n                        )}\n                        {webhook.lastError && (\n                          <p className=\"text-sm text-status-error-text mt-2\">\n                            {tr('webhooks.lastError', 'Last error')}: {webhook.lastError}\n                          </p>\n                        )}\n                        <div className=\"flex items-center gap-4 mt-3 text-xs text-text-secondary flex-wrap\">\n                          <span>\n                            {tr('webhooks.lastDelivery', 'Last delivery')}:{' '}\n                            {formatTimestamp(webhook.lastDelivery)}\n                          </span>\n                          <span>\n                            {webhook.deliveryCount} {tr('webhooks.deliveries', 'deliveries')},{' '}\n                            {webhook.failureCount} {tr('webhooks.failures', 'failures')}\n                          </span>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-2 flex-shrink-0\">\n                      <button\n                        type=\"button\"\n                        onClick={() => handleTestWebhook(webhook)}\n                        disabled={testingWebhook === webhook.id}\n                        className=\"flex items-center gap-1 px-3 py-1.5 text-sm bg-bg-sunken text-text-primary hover:bg-bg-sunken/80 rounded-md transition-colors disabled:opacity-50\"\n                      >\n                        {testingWebhook === webhook.id ? (\n                          <RefreshCw className=\"size-4 animate-spin\" />\n                        ) : (\n                          <Play className=\"size-4\" />\n                        )}\n                        {tr('webhooks.test', 'Test')}\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={() => handleToggleWebhook(webhook)}\n                        className={`p-2 rounded-md transition-colors ${\n                          webhook.isActive\n                            ? 'bg-status-success-bg text-status-success-text hover:bg-status-success-bg/80'\n                            : 'bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80'\n                        }`}\n                        title={\n                          webhook.isActive\n                            ? tr('webhooks.disable', 'Disable')\n                            : tr('webhooks.enable', 'Enable')\n                        }\n                      >\n                        {webhook.isActive ? <Check className=\"size-4\" /> : <X className=\"size-4\" />}\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={() => {\n                          nativeImpact('medium');\n                          void handleDeleteWebhook(webhook);\n                        }}\n                        className=\"p-2 text-status-error-text hover:bg-status-error-bg rounded-md transition-colors\"\n                        title={tr('common.delete', 'Delete')}\n                      >\n                        <Trash2 className=\"size-4\" />\n                      </button>\n                    </div>\n                  </div>\n                </Card>\n              </MotionItem>\n            ))}\n          </MotionList>\n        ) : (\n          <EmptyState\n            icon={<Webhook className=\"size-8 text-text-secondary\" />}\n            title={\n              searchQuery || statusFilter !== 'all'\n                ? tr('webhooks.emptyFound', 'No webhooks found')\n                : tr('webhooks.emptyConfigured', 'No webhooks configured')\n            }\n            description={\n              searchQuery || statusFilter !== 'all'\n                ? tr('webhooks.emptyAdjustSearch', 'Try adjusting your search or filters')\n                : tr(\n                    'webhooks.emptyDescription',\n                    'Create a webhook to receive notifications about events in your workspace'\n                  )\n            }\n            action={\n              !searchQuery && statusFilter === 'all' ? (\n                <div className=\"flex items-center gap-2\">\n                  {canCreateWebhook && (\n                    <button\n                      type=\"button\"\n                      onClick={handleCreateWebhook}\n                      className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n                    >\n                      <Plus className=\"size-4\" />\n                      {tr('webhooks.newWebhook', 'New Webhook')}\n                    </button>\n                  )}\n                  <GetHelpButton prompt=\"What is a Webhook in VibeControls and how do I configure one?\" />\n                </div>\n              ) : undefined\n            }\n          />\n        )}\n      </AnimatePresence>\n\n      {/* Create Webhook Modal */}\n      {showCreateForm && (\n        <div className=\"fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4\">\n          <div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby=\"create-webhook-title\"\n            className=\"bg-bg-surface rounded-lg p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto\"\n          >\n            <h2 id=\"create-webhook-title\" className=\"text-lg font-semibold text-text-primary mb-4\">\n              {tr('webhooks.newWebhook', 'New Webhook')}\n            </h2>\n            {createError && (\n              <div className=\"mb-4 p-3 bg-status-error-bg text-status-error-text rounded-md text-sm\">\n                {createError}\n              </div>\n            )}\n            <div className=\"space-y-4\">\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('webhooks.name', 'Name')}\n                </label>\n                <input\n                  aria-label=\"control\"\n                  ref={webhookNameRef}\n                  type=\"text\"\n                  placeholder={tr('webhooks.namePlaceholder', 'Slack Notifications')}\n                  className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder\"\n                />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('webhooks.url', 'URL')}\n                </label>\n                <input\n                  aria-label=\"control\"\n                  ref={webhookUrlRef}\n                  type=\"url\"\n                  placeholder={tr(\n                    'webhooks.urlPlaceholder',\n                    'https://hooks.slack.com/services/...'\n                  )}\n                  className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder\"\n                />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('webhooks.secret', 'Secret')}\n                </label>\n                <input\n                  aria-label=\"control\"\n                  ref={webhookSecretRef}\n                  type=\"password\"\n                  placeholder={tr('webhooks.secretPlaceholder', 'Optional signing secret')}\n                  className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder\"\n                />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-2\">\n                  {tr('webhooks.events', 'Events')}\n                </label>\n                <div className=\"space-y-2 max-h-40 overflow-y-auto\">\n                  {WEBHOOK_EVENTS.map((event) => (\n                    <label key={event} className=\"flex items-center gap-2\">\n                      <input\n                        aria-label=\"control\"\n                        type=\"checkbox\"\n                        checked={selectedEvents.includes(event)}\n                        onChange={() => handleToggleEvent(event)}\n                        className=\"size-4 rounded border-border-default\"\n                      />\n                      <span className=\"text-sm text-text-primary\">{event}</span>\n                    </label>\n                  ))}\n                </div>\n                {/* Custom events already selected */}\n                {selectedEvents.filter(isCustomEvent).length > 0 && (\n                  <div className=\"flex flex-wrap gap-1 mt-2\">\n                    {selectedEvents.filter(isCustomEvent).map((event) => (\n                      <span\n                        key={event}\n                        className=\"inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-action-primary-bg/10 text-action-primary-bg border border-dashed border-action-primary-bg rounded\"\n                      >\n                        {event}\n                        <button\n                          type=\"button\"\n                          onClick={() =>\n                            setSelectedEvents((prev) => prev.filter((e) => e !== event))\n                          }\n                          className=\"hover:text-status-error-text\"\n                        >\n                          <X className=\"size-3\" />\n                        </button>\n                      </span>\n                    ))}\n                  </div>\n                )}\n                {/* Custom event input */}\n                <div className=\"flex items-center gap-2 mt-2\">\n                  <input\n                    aria-label=\"control\"\n                    type=\"text\"\n                    value={customEventInput}\n                    onChange={(e) => setCustomEventInput(e.target.value)}\n                    placeholder={tr('webhooks.customEventPlaceholder', 'custom:event-name')}\n                    className=\"flex-1 px-3 py-1.5 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder font-mono\"\n                    onKeyDown={(e) => {\n                      if (e.key === 'Enter') {\n                        e.preventDefault();\n                        const val = customEventInput.trim();\n                        if (\n                          /^[a-z][a-z0-9_-]*:[a-z][a-z0-9_.-]*$/.test(val) &&\n                          !selectedEvents.includes(val)\n                        ) {\n                          setSelectedEvents((prev) => [...prev, val]);\n                          setCustomEventInput('');\n                        }\n                      }\n                    }}\n                  />\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      const val = customEventInput.trim();\n                      if (\n                        /^[a-z][a-z0-9_-]*:[a-z][a-z0-9_.-]*$/.test(val) &&\n                        !selectedEvents.includes(val)\n                      ) {\n                        setSelectedEvents((prev) => [...prev, val]);\n                        setCustomEventInput('');\n                      }\n                    }}\n                    className=\"px-3 py-1.5 text-sm bg-bg-sunken text-text-primary hover:bg-bg-sunken/80 rounded-md transition-colors\"\n                  >\n                    <Plus className=\"size-4\" />\n                  </button>\n                </div>\n                <p className=\"text-xs text-text-muted mt-1\">\n                  {tr(\n                    'webhooks.customEventHint',\n                    'Add custom events using namespace:event format (e.g., deploy:started)'\n                  )}\n                </p>\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('webhooks.signingKey', 'Signing Key')}\n                </label>\n                <div className=\"relative\">\n                  <input\n                    aria-label=\"control\"\n                    ref={webhookSigningKeyRef}\n                    type={showSigningKey ? 'text' : 'password'}\n                    placeholder={tr(\n                      'webhooks.signingKeyPlaceholder',\n                      'HMAC signing key for delivery verification'\n                    )}\n                    className=\"w-full px-3 py-2 pr-10 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder font-mono text-sm\"\n                  />\n                  <button\n                    type=\"button\"\n                    onClick={() => setShowSigningKey(!showSigningKey)}\n                    className=\"absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-bg-elevated transition-colors\"\n                  >\n                    {showSigningKey ? (\n                      <EyeOff className=\"size-4 text-text-secondary\" />\n                    ) : (\n                      <Eye className=\"size-4 text-text-secondary\" />\n                    )}\n                  </button>\n                </div>\n                <p className=\"text-xs text-text-muted mt-1\">\n                  {tr(\n                    'webhooks.signingKeyHint',\n                    'Used to sign payloads with HMAC-SHA256. Header: X-Webhook-Signature'\n                  )}\n                </p>\n              </div>\n              {agents.length > 0 && (\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-2\">\n                    {tr('webhooks.agentScope', 'Agent Scope')}\n                  </label>\n                  <p className=\"text-xs text-text-muted mb-2\">\n                    {tr(\n                      'webhooks.agentScopeHint',\n                      'Only fire for events from selected agents. Leave empty for all agents.'\n                    )}\n                  </p>\n                  <div className=\"space-y-2 max-h-32 overflow-y-auto\">\n                    {agents.map((agent: { id: string; name: string }) => (\n                      <label key={agent.id} className=\"flex items-center gap-2\">\n                        <input\n                          aria-label=\"control\"\n                          type=\"checkbox\"\n                          checked={selectedAgentIds.includes(agent.id)}\n                          onChange={() =>\n                            setSelectedAgentIds((prev) =>\n                              prev.includes(agent.id)\n                                ? prev.filter((id) => id !== agent.id)\n                                : [...prev, agent.id]\n                            )\n                          }\n                          className=\"size-4 rounded border-border-default\"\n                        />\n                        <Bot className=\"size-3.5 text-text-secondary\" />\n                        <span className=\"text-sm text-text-primary\">{agent.name}</span>\n                      </label>\n                    ))}\n                  </div>\n                </div>\n              )}\n            </div>\n            <div className=\"flex flex-col-reverse sm:flex-row justify-end gap-3 mt-6\">\n              <button\n                type=\"button\"\n                onClick={() => setShowCreateForm(false)}\n                disabled={createLoading}\n                className=\"px-4 py-2 text-text-primary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n              >\n                {tr('common.cancel', 'Cancel')}\n              </button>\n              <button\n                type=\"button\"\n                onClick={handleSubmitCreateWebhook}\n                disabled={createLoading}\n                className=\"px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n              >\n                {createLoading\n                  ? tr('webhooks.creating', 'Creating...')\n                  : tr('webhooks.createWebhook', 'Create Webhook')}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n\n      <ConfirmDialog\n        isOpen={bulkAction === 'enable'}\n        onClose={() => setBulkAction(null)}\n        onConfirm={() => handleBulkToggleWebhooks(true)}\n        title=\"Enable selected webhooks\"\n        message={`Enable ${inactiveSelectedWebhooks.length} selected webhook${inactiveSelectedWebhooks.length === 1 ? '' : 's'}?`}\n        confirmLabel=\"Enable\"\n        variant=\"default\"\n      />\n\n      <ConfirmDialog\n        isOpen={bulkAction === 'disable'}\n        onClose={() => setBulkAction(null)}\n        onConfirm={() => handleBulkToggleWebhooks(false)}\n        title=\"Disable selected webhooks\"\n        message={`Disable ${activeSelectedWebhooks.length} selected webhook${activeSelectedWebhooks.length === 1 ? '' : 's'}?`}\n        confirmLabel=\"Disable\"\n        variant=\"warning\"\n      />\n\n      <ConfirmDialog\n        isOpen={bulkAction === 'delete'}\n        onClose={() => setBulkAction(null)}\n        onConfirm={handleBulkDeleteWebhooks}\n        title=\"Delete selected webhooks\"\n        message={`Delete ${selectedWebhooks.length} selected webhook${selectedWebhooks.length === 1 ? '' : 's'}? This cannot be undone.`}\n        confirmLabel=\"Delete\"\n        variant=\"danger\"\n      />\n\n      <QuotaExhaustedDialog\n        isOpen={quotaDialog !== null}\n        onClose={() => setQuotaDialog(null)}\n        onConfirm={() => {\n          setQuotaDialog(null);\n          navigate('/billing/plans');\n        }}\n        title={quotaDialog?.title || 'Quota Reached'}\n        message={quotaDialog?.message || 'Upgrade your plan to continue.'}\n      />\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"WebhooksPage.js","names":[],"sources":["../../src/pages/WebhooksPage.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  Plus,\n  Webhook,\n  Grid,\n  List,\n  Check,\n  X,\n  RefreshCw,\n  AlertTriangle,\n  Play,\n  Trash2,\n  Eye,\n  EyeOff,\n  Bot,\n} from 'lucide-react';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { isNative, nativeImpact, nativeNotify } from '../utils/nativeBridge';\nimport { AnimatePresence } from 'framer-motion';\nimport {\n  PageHeader,\n  SearchInput,\n  FilterDropdown,\n  EmptyState,\n  Card,\n  ErrorState,\n  ConfirmDialog,\n  QuotaExhaustedDialog,\n  SelectionCheckbox,\n  GetHelpButton,\n} from '@/components/shared';\nimport { useVibeControls, useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport {\n  useListWebhooksQuery,\n  useCreateWebhookMutation,\n  useUpdateWebhookMutation,\n  useTestWebhookMutation,\n  useDeleteWebhookMutation,\n} from '@/generated/wspace-operations';\nimport type { Webhook as WebhookType } from '@/components/webhooks/types';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { WEBHOOK_EVENTS, isCustomEvent } from '@/components/webhooks/types';\nimport { PermissionButton, AccessDenied } from '@burdenoff/fe-libs/shared/components';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { VIBE_PERMISSIONS } from '@/constants/permissions';\nimport { isQuotaExhaustedError } from '@/utils/quotaUtils';\n\ntype ViewMode = 'grid' | 'list';\n\nconst statusOptions = [\n  { value: 'all', label: 'All Statuses' },\n  { value: 'active', label: 'Active' },\n  { value: 'inactive', label: 'Inactive' },\n  { value: 'error', label: 'Has Errors' },\n];\n\n/**\n * Webhooks management page\n */\nexport function WebhooksPage() {\n  useVibeControls();\n  const navigate = useVibeNavigate();\n  const { t } = useI18n();\n  const { hasPermission, isLoading: permissionsLoading, permissions } = usePermissions();\n\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  // Check permissions\n  const canListWebhooks = hasPermission(VIBE_PERMISSIONS.WEBHOOK_LIST);\n  const canCreateWebhook = hasPermission(VIBE_PERMISSIONS.WEBHOOK_CREATE);\n\n  // Skip queries until permissions are loaded and user has permission\n  // This prevents FORBIDDEN errors from triggering auth error handlers\n  const shouldSkipQueries = permissionsLoading || !canListWebhooks;\n\n  const [searchQuery, setSearchQuery] = useState('');\n  const [statusFilter, setStatusFilter] = useState('all');\n  const [viewMode, setViewMode] = useState<ViewMode>('list');\n  const [showCreateForm, setShowCreateForm] = useState(false);\n  const [testingWebhook, setTestingWebhook] = useState<string | null>(null);\n  const [createError, setCreateError] = useState<string | null>(null);\n  const [createLoading, setCreateLoading] = useState(false);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [pageError, setPageError] = useState<string | null>(null);\n  const [selectedEvents, setSelectedEvents] = useState<string[]>([]);\n  const [selectedAgentIds, setSelectedAgentIds] = useState<string[]>([]);\n  const [showSigningKey, setShowSigningKey] = useState(false);\n  const [customEventInput, setCustomEventInput] = useState('');\n  const [selectedWebhookIds, setSelectedWebhookIds] = useState<Set<string>>(new Set());\n  const [bulkAction, setBulkAction] = useState<'enable' | 'disable' | 'delete' | null>(null);\n  const [quotaDialog, setQuotaDialog] = useState<{ title: string; message: string } | null>(null);\n\n  useEffect(() => {\n    if (!successMessage) {\n      return undefined;\n    }\n\n    const timeoutId = window.setTimeout(() => setSuccessMessage(null), 4000);\n    return () => window.clearTimeout(timeoutId);\n  }, [successMessage]);\n\n  useEffect(() => {\n    if (!showCreateForm) {\n      return undefined;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && !createLoading) {\n        setShowCreateForm(false);\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [createLoading, showCreateForm]);\n\n  // Form refs\n  const webhookNameRef = useRef<HTMLInputElement>(null);\n  const webhookUrlRef = useRef<HTMLInputElement>(null);\n  const webhookSecretRef = useRef<HTMLInputElement>(null);\n  const webhookSigningKeyRef = useRef<HTMLInputElement>(null);\n\n  const [createWebhook] = useCreateWebhookMutation({ refetchQueries: ['ListWebhooks'] });\n  const [updateWebhook] = useUpdateWebhookMutation({ refetchQueries: ['ListWebhooks'] });\n  const [testWebhook] = useTestWebhookMutation({ refetchQueries: ['ListWebhooks'] });\n  const [deleteWebhookMutation] = useDeleteWebhookMutation({ refetchQueries: ['ListWebhooks'] });\n\n  // Use cached initial data for agents dropdown\n  const { agents: cachedAgents } = useCachedInitialData();\n  const agents: Array<{ id: string; name: string }> = useMemo(\n    () =>\n      cachedAgents.map((a) => ({\n        id: a.id,\n        name: a.name,\n      })),\n    [cachedAgents]\n  );\n\n  // Fetch webhooks from GraphQL API\n  const { data, loading, error, refetch } = useListWebhooksQuery({\n    variables: {\n      filter: {\n        isActive:\n          statusFilter === 'active' ? true : statusFilter === 'inactive' ? false : undefined,\n      },\n      pagination: { limit: 50 },\n    },\n    fetchPolicy: 'cache-and-network',\n    skip: shouldSkipQueries,\n  });\n\n  // Map GraphQL response to Webhook type\n  const webhooks: WebhookType[] = useMemo(() => {\n    const rawWebhooks = data?.webhooks?.items ?? [];\n    return rawWebhooks.map((webhook: NonNullable<typeof rawWebhooks>[number]) => ({\n      id: webhook.id,\n      workspaceId: webhook.workspaceId,\n      name: webhook.name,\n      url: webhook.url,\n      events: webhook.events || [],\n      agentIds: webhook.agentIds || [],\n      secret: null,\n      signingKey: webhook.signingKey || null,\n      isActive: webhook.isActive,\n      lastDelivery: webhook.lastDelivery || null,\n      lastError: webhook.lastError || null,\n      deliveryCount: webhook.deliveryCount || 0,\n      failureCount: webhook.failureCount || 0,\n      metadata: {},\n      createdAt: webhook.createdAt,\n      updatedAt: webhook.updatedAt,\n    }));\n  }, [data?.webhooks?.items]);\n\n  // Filter webhooks based on search and error status (client-side filtering)\n  const filteredWebhooks = useMemo(() => {\n    return webhooks.filter((webhook) => {\n      // Search filter\n      if (searchQuery) {\n        const query = searchQuery.toLowerCase();\n        const matchesSearch =\n          webhook.name.toLowerCase().includes(query) ||\n          webhook.url.toLowerCase().includes(query) ||\n          webhook.events.some((e) => e.toLowerCase().includes(query));\n        if (!matchesSearch) return false;\n      }\n\n      // Error filter (additional client-side filter)\n      if (statusFilter === 'error' && !webhook.lastError) return false;\n\n      return true;\n    });\n  }, [webhooks, searchQuery, statusFilter]);\n\n  const selectedWebhooks = useMemo(\n    () => webhooks.filter((webhook) => selectedWebhookIds.has(webhook.id)),\n    [webhooks, selectedWebhookIds]\n  );\n  const activeSelectedWebhooks = selectedWebhooks.filter((webhook) => webhook.isActive);\n  const inactiveSelectedWebhooks = selectedWebhooks.filter((webhook) => !webhook.isActive);\n  const allVisibleSelected =\n    filteredWebhooks.length > 0 &&\n    filteredWebhooks.every((webhook) => selectedWebhookIds.has(webhook.id));\n  const partiallySelected =\n    filteredWebhooks.some((webhook) => selectedWebhookIds.has(webhook.id)) && !allVisibleSelected;\n\n  const handleCreateWebhook = () => {\n    setCreateError(null);\n    setPageError(null);\n    setSelectedEvents([]);\n    setSelectedAgentIds([]);\n    setShowSigningKey(false);\n    setCustomEventInput('');\n    setShowCreateForm(true);\n  };\n\n  const handleToggleEvent = (event: string) => {\n    setSelectedEvents((prev) =>\n      prev.includes(event) ? prev.filter((e) => e !== event) : [...prev, event]\n    );\n  };\n\n  const handleSubmitCreateWebhook = async () => {\n    const name = webhookNameRef.current?.value?.trim();\n    const url = webhookUrlRef.current?.value?.trim();\n    const secret = webhookSecretRef.current?.value?.trim() || undefined;\n    const signingKey = webhookSigningKeyRef.current?.value?.trim() || undefined;\n\n    if (!name) {\n      setCreateError(tr('webhooks.nameRequired', 'Name is required'));\n      return;\n    }\n    if (!url) {\n      setCreateError(tr('webhooks.urlRequired', 'URL is required'));\n      return;\n    }\n    // Validate URL format\n    try {\n      const parsedUrl = new URL(url);\n      if (!['http:', 'https:'].includes(parsedUrl.protocol)) {\n        setCreateError(\n          tr('webhooks.urlProtocolRequired', 'URL must use http:// or https:// protocol')\n        );\n        return;\n      }\n    } catch {\n      setCreateError(\n        tr('webhooks.urlInvalid', 'Please enter a valid URL (e.g., https://example.com/webhook)')\n      );\n      return;\n    }\n    if (selectedEvents.length === 0) {\n      setCreateError(tr('webhooks.eventRequired', 'At least one event must be selected'));\n      return;\n    }\n\n    setCreateLoading(true);\n    setCreateError(null);\n    setPageError(null);\n    try {\n      await createWebhook({\n        variables: {\n          input: {\n            name,\n            url,\n            events: selectedEvents,\n            secret,\n            ...(signingKey ? { signingKey } : {}),\n            ...(selectedAgentIds.length > 0 ? { agentIds: selectedAgentIds } : {}),\n          },\n        },\n      });\n      setShowCreateForm(false);\n      setSuccessMessage(tr('webhooks.createdSuccess', 'Webhook created successfully'));\n      setTimeout(() => setSuccessMessage(null), 3000);\n    } catch (err) {\n      if (isQuotaExhaustedError(err)) {\n        setShowCreateForm(false);\n        setQuotaDialog({\n          title: 'Webhook Quota Reached',\n          message:\n            'You have reached the webhook limit for your current plan. Upgrade to create more webhooks.',\n        });\n        return;\n      }\n\n      setCreateError(\n        err instanceof Error ? err.message : tr('webhooks.failedCreate', 'Failed to create webhook')\n      );\n    } finally {\n      setCreateLoading(false);\n    }\n  };\n\n  const handleToggleWebhook = async (webhook: WebhookType) => {\n    try {\n      setPageError(null);\n      await updateWebhook({\n        variables: { id: webhook.id, input: { isActive: !webhook.isActive } },\n      });\n      setSuccessMessage(\n        webhook.isActive\n          ? tr('webhooks.disabledSuccess', 'Webhook disabled successfully')\n          : tr('webhooks.enabledSuccess', 'Webhook enabled successfully')\n      );\n    } catch (err) {\n      console.error('Failed to toggle webhook:', err);\n      setPageError(\n        err instanceof Error\n          ? err.message\n          : tr('webhooks.failedToggle', 'Failed to update webhook state')\n      );\n    }\n  };\n\n  const handleTestWebhook = async (webhook: WebhookType) => {\n    setTestingWebhook(webhook.id);\n    try {\n      setPageError(null);\n      await testWebhook({ variables: { id: webhook.id } });\n      setSuccessMessage(tr('webhooks.testSuccess', 'Webhook test delivery completed'));\n    } catch (err) {\n      if (isQuotaExhaustedError(err)) {\n        setQuotaDialog({\n          title: 'Webhook Test Quota Reached',\n          message:\n            'You have used the webhook test quota for your current plan. Upgrade to continue testing deliveries.',\n        });\n        return;\n      }\n\n      console.error('Failed to test webhook:', err);\n      setPageError(\n        err instanceof Error ? err.message : tr('webhooks.failedTest', 'Failed to test webhook')\n      );\n    } finally {\n      setTestingWebhook(null);\n    }\n  };\n\n  const handleDeleteWebhook = async (webhook: WebhookType) => {\n    try {\n      setPageError(null);\n      await deleteWebhookMutation({ variables: { id: webhook.id } });\n      setSuccessMessage(tr('webhooks.deletedSuccess', 'Webhook deleted successfully'));\n      if (isNative()) void nativeNotify('success');\n    } catch (err) {\n      console.error('Failed to delete webhook:', err);\n      setPageError(\n        err instanceof Error ? err.message : tr('webhooks.failedDelete', 'Failed to delete webhook')\n      );\n      if (isNative()) void nativeNotify('error');\n    }\n  };\n\n  const toggleWebhookSelection = (webhookId: string, checked: boolean) => {\n    setSelectedWebhookIds((prev) => {\n      const next = new Set(prev);\n      if (checked) {\n        next.add(webhookId);\n      } else {\n        next.delete(webhookId);\n      }\n      return next;\n    });\n  };\n\n  const toggleAllVisibleWebhooks = (checked: boolean) => {\n    setSelectedWebhookIds((prev) => {\n      const next = new Set(prev);\n      filteredWebhooks.forEach((webhook) => {\n        if (checked) {\n          next.add(webhook.id);\n        } else {\n          next.delete(webhook.id);\n        }\n      });\n      return next;\n    });\n  };\n\n  const clearSelection = () => setSelectedWebhookIds(new Set());\n\n  const handleBulkToggleWebhooks = async (enable: boolean) => {\n    const targets = enable ? inactiveSelectedWebhooks : activeSelectedWebhooks;\n    if (targets.length === 0) return;\n\n    const results = await Promise.allSettled(\n      targets.map((webhook) =>\n        updateWebhook({ variables: { id: webhook.id, input: { isActive: enable } } })\n      )\n    );\n\n    const succeeded = results.filter((result) => result.status === 'fulfilled').length;\n    const failed = results.length - succeeded;\n\n    setSuccessMessage(\n      `${enable ? 'Enabled' : 'Disabled'} ${succeeded} webhook${succeeded === 1 ? '' : 's'}${failed > 0 ? ` • ${failed} failed` : ''}`\n    );\n    setTimeout(() => setSuccessMessage(null), 4000);\n    setBulkAction(null);\n    clearSelection();\n    await refetch();\n  };\n\n  const handleBulkDeleteWebhooks = async () => {\n    if (selectedWebhooks.length === 0) return;\n\n    const results = await Promise.allSettled(\n      selectedWebhooks.map((webhook) => deleteWebhookMutation({ variables: { id: webhook.id } }))\n    );\n\n    const succeeded = results.filter((result) => result.status === 'fulfilled').length;\n    const failed = results.length - succeeded;\n\n    setSuccessMessage(\n      `Deleted ${succeeded} webhook${succeeded === 1 ? '' : 's'}${failed > 0 ? ` • ${failed} failed` : ''}`\n    );\n    setTimeout(() => setSuccessMessage(null), 4000);\n    setBulkAction(null);\n    clearSelection();\n    await refetch();\n  };\n\n  // Stats\n  const stats = {\n    total: webhooks.length,\n    active: webhooks.filter((w) => w.isActive).length,\n    withErrors: webhooks.filter((w) => w.lastError).length,\n  };\n\n  const formatTimestamp = (timestamp: string | null) => {\n    if (!timestamp) return tr('webhooks.never', 'Never');\n    const diff = Date.now() - new Date(timestamp).getTime();\n    if (diff < 60000) return tr('webhooks.justNow', 'Just now');\n    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;\n    if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;\n    return `${Math.floor(diff / 86400000)}d ago`;\n  };\n\n  // Guard states rendered inside MotionPage to prevent unmount/remount animation replay\n  // Gate full render until permissions resolve — avoids flashing the page\n  // before the AccessDenied check can run.\n  if (permissionsLoading) {\n    return (\n      <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen\">\n        <PageSkeleton variant=\"rows\" count={6} />\n      </MotionPage>\n    );\n  }\n\n  if (permissions && permissions.permissionStrings?.length > 0 && !canListWebhooks) {\n    return (\n      <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen\">\n        <AccessDenied\n          title={tr('common.accessDeniedTitle', 'Access Denied')}\n          description={tr(\n            'webhooks.accessDeniedDescription',\n            \"You don't have permission to view webhooks.\"\n          )}\n          details=\"Required permission: webhook:list\"\n        />\n      </MotionPage>\n    );\n  }\n\n  if (error && webhooks.length === 0) {\n    return (\n      <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen\">\n        <ErrorState\n          title={tr('webhooks.failedLoad', 'Failed to load webhooks')}\n          message={error.message}\n          onRetry={() => refetch()}\n        />\n      </MotionPage>\n    );\n  }\n\n  return (\n    <MotionPage className=\"space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen\">\n      {/* Success Toast */}\n      {successMessage && (\n        <div className=\"fixed top-4 left-4 right-4 sm:left-auto z-50 bg-status-success-bg text-status-success-text px-4 py-3 rounded-md shadow-lg\">\n          {successMessage}\n        </div>\n      )}\n\n      {pageError && (\n        <div\n          role=\"alert\"\n          className=\"rounded-card border border-status-error-border bg-status-error-bg-subtle px-4 py-3 text-sm text-status-error-text\"\n        >\n          {pageError}\n        </div>\n      )}\n\n      <PageHeader\n        title={tr('nav.webhooks', 'Webhooks')}\n        description={`${stats.active} of ${stats.total} webhooks active`}\n        actions={\n          <div className=\"flex items-center gap-2\">\n            <button\n              type=\"button\"\n              onClick={() => refetch()}\n              disabled={loading}\n              className=\"flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n              title={tr('webhooks.refreshTitle', 'Refresh webhooks')}\n            >\n              <RefreshCw className={`size-4 ${loading ? 'animate-spin' : ''}`} />\n            </button>\n            <PermissionButton permission={VIBE_PERMISSIONS.WEBHOOK_CREATE}>\n              <button\n                type=\"button\"\n                onClick={handleCreateWebhook}\n                className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n              >\n                <Plus className=\"size-4\" />\n                {tr('webhooks.newWebhook', 'New Webhook')}\n              </button>\n            </PermissionButton>\n          </div>\n        }\n      />\n\n      {/* Filters Bar */}\n      <div className=\"space-y-3\">\n        {/* Row 1: Search + View Toggle */}\n        <div className=\"flex items-center gap-2\">\n          <SearchInput\n            value={searchQuery}\n            onChange={setSearchQuery}\n            placeholder={tr('webhooks.searchPlaceholder', 'Search webhooks...')}\n            className=\"flex-1 sm:w-64 sm:flex-none\"\n          />\n          {/* View Toggle */}\n          <div className=\"flex items-center gap-1 bg-bg-sunken rounded-md p-1 flex-shrink-0\">\n            <button\n              type=\"button\"\n              onClick={() => setViewMode('grid')}\n              className={`p-1.5 sm:p-2 rounded ${viewMode === 'grid' ? 'bg-bg-surface shadow-sm' : 'hover:bg-bg-surface/50'}`}\n              title={tr('webhooks.gridViewTitle', 'Grid view')}\n            >\n              <Grid className=\"size-4 text-text-secondary\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => setViewMode('list')}\n              className={`p-1.5 sm:p-2 rounded ${viewMode === 'list' ? 'bg-bg-surface shadow-sm' : 'hover:bg-bg-surface/50'}`}\n              title={tr('webhooks.listViewTitle', 'List view')}\n            >\n              <List className=\"size-4 text-text-secondary\" />\n            </button>\n          </div>\n        </div>\n\n        {/* Row 2: Filters */}\n        <div className=\"flex items-center gap-2 sm:gap-3\">\n          <FilterDropdown\n            label={tr('webhooks.status', 'Status')}\n            value={statusFilter}\n            options={statusOptions}\n            onChange={setStatusFilter}\n          />\n        </div>\n      </div>\n\n      {/* Quick Actions */}\n      {stats.withErrors > 0 && (\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => setStatusFilter('error')}\n            className={`flex items-center gap-2 px-3 py-1.5 text-sm rounded-full transition-colors ${\n              statusFilter === 'error'\n                ? 'bg-status-error-bg text-status-error-text'\n                : 'bg-bg-sunken text-text-secondary hover:bg-action-secondary-bg-hover'\n            }`}\n          >\n            <AlertTriangle className=\"size-3\" />\n            {tr('webhooks.withErrors', 'With Errors')} ({stats.withErrors})\n          </button>\n        </div>\n      )}\n\n      {/* Results Count */}\n      {(searchQuery || statusFilter !== 'all') && (\n        <p className=\"text-sm text-text-secondary\">\n          {tr('webhooks.showingResults', 'Showing')} {filteredWebhooks.length}{' '}\n          {tr('webhooks.of', 'of')} {webhooks.length} {tr('nav.webhooks', 'webhooks')}\n          {loading && (\n            <span className=\"ml-2 text-text-muted\">\n              ({tr('webhooks.refreshing', 'refreshing...')})\n            </span>\n          )}\n        </p>\n      )}\n\n      {filteredWebhooks.length > 0 && (\n        <div className=\"rounded-lg border border-border-default bg-bg-surface p-4\">\n          <div className=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n            <div className=\"flex flex-wrap items-center gap-3\">\n              <div className=\"flex items-center gap-2\">\n                <SelectionCheckbox\n                  checked={allVisibleSelected}\n                  indeterminate={partiallySelected}\n                  onChange={toggleAllVisibleWebhooks}\n                  ariaLabel=\"Select all visible webhooks\"\n                />\n                <span className=\"text-sm font-medium text-text-primary\">Select all visible</span>\n              </div>\n              {selectedWebhookIds.size > 0 && (\n                <button\n                  type=\"button\"\n                  onClick={clearSelection}\n                  className=\"text-sm text-text-secondary hover:text-text-primary\"\n                >\n                  Clear selection\n                </button>\n              )}\n            </div>\n\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <span className=\"rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary\">\n                {selectedWebhookIds.size} selected\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setBulkAction('enable')}\n                disabled={inactiveSelectedWebhooks.length === 0}\n                className=\"rounded-md border border-status-success-border px-3 py-2 text-sm font-medium text-status-success-text hover:bg-status-success-bg disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                Enable Selected\n                {inactiveSelectedWebhooks.length > 0 ? ` (${inactiveSelectedWebhooks.length})` : ''}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => setBulkAction('disable')}\n                disabled={activeSelectedWebhooks.length === 0}\n                className=\"rounded-md border border-status-warning-border px-3 py-2 text-sm font-medium text-status-warning-text hover:bg-status-warning-bg disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                Disable Selected\n                {activeSelectedWebhooks.length > 0 ? ` (${activeSelectedWebhooks.length})` : ''}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => setBulkAction('delete')}\n                disabled={selectedWebhooks.length === 0}\n                className=\"rounded-md border border-status-error-bg px-3 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg disabled:cursor-not-allowed disabled:opacity-50\"\n              >\n                Delete Selected\n                {selectedWebhooks.length > 0 ? ` (${selectedWebhooks.length})` : ''}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* Webhooks Display */}\n      <AnimatePresence mode=\"wait\">\n        {loading && webhooks.length === 0 ? (\n          <PageSkeleton variant=\"rows\" count={6} />\n        ) : filteredWebhooks.length > 0 ? (\n          <MotionList\n            key={`webhook-list-${viewMode}`}\n            className={viewMode === 'grid' ? 'grid grid-cols-1 gap-4 xl:grid-cols-2' : 'space-y-4'}\n          >\n            {filteredWebhooks.map((webhook) => (\n              <MotionItem key={webhook.id} variant=\"fadeRight\">\n                <Card className=\"p-4\">\n                  <div className=\"flex flex-col sm:flex-row sm:items-start justify-between gap-4\">\n                    <div className=\"flex items-start gap-4 flex-1 min-w-0\">\n                      <div onClick={(event) => event.stopPropagation()}>\n                        <SelectionCheckbox\n                          checked={selectedWebhookIds.has(webhook.id)}\n                          onChange={(checked) => toggleWebhookSelection(webhook.id, checked)}\n                          ariaLabel={`Select webhook ${webhook.name}`}\n                          className=\"mt-2\"\n                        />\n                      </div>\n                      <div\n                        className={`size-10 rounded-lg flex items-center justify-center flex-shrink-0 ${\n                          webhook.isActive\n                            ? 'bg-status-success-bg text-status-success-text'\n                            : 'bg-bg-sunken text-text-secondary'\n                        }`}\n                      >\n                        <Webhook className=\"size-5\" />\n                      </div>\n                      <div className=\"flex-1 min-w-0\">\n                        <div className=\"flex items-center gap-2 flex-wrap\">\n                          <h3 className=\"font-semibold text-text-primary\">{webhook.name}</h3>\n                          <span\n                            className={`px-2 py-0.5 text-xs rounded-full ${\n                              webhook.isActive\n                                ? 'bg-status-success-bg text-status-success-text'\n                                : 'bg-bg-sunken text-text-secondary'\n                            }`}\n                          >\n                            {webhook.isActive\n                              ? tr('webhooks.active', 'Active')\n                              : tr('webhooks.inactive', 'Inactive')}\n                          </span>\n                          {webhook.lastError && (\n                            <span className=\"px-2 py-0.5 text-xs rounded-full bg-status-error-bg text-status-error-text\">\n                              {tr('webhooks.error', 'Error')}\n                            </span>\n                          )}\n                        </div>\n                        <p className=\"text-sm text-text-secondary mt-1 font-mono truncate\">\n                          {webhook.url}\n                        </p>\n                        <div className=\"flex flex-wrap gap-1 mt-2\">\n                          {webhook.events.map((event) => (\n                            <span\n                              key={event}\n                              className={`px-2 py-0.5 text-xs rounded ${\n                                isCustomEvent(event)\n                                  ? 'bg-[var(--color-accent-soft)] text-action-primary-bg border border-dashed border-border-strong'\n                                  : 'bg-bg-sunken text-text-secondary'\n                              }`}\n                            >\n                              {event}\n                            </span>\n                          ))}\n                        </div>\n                        {webhook.agentIds.length > 0 && (\n                          <div className=\"flex items-center gap-1 mt-2\">\n                            <Bot className=\"size-3 text-text-muted\" />\n                            <span className=\"text-xs text-text-muted\">\n                              {tr('webhooks.scopedTo', 'Scoped to')} {webhook.agentIds.length}{' '}\n                              {tr('webhooks.agent', 'agent')}\n                              {webhook.agentIds.length !== 1 ? 's' : ''}\n                            </span>\n                          </div>\n                        )}\n                        {webhook.lastError && (\n                          <p className=\"text-sm text-status-error-text mt-2\">\n                            {tr('webhooks.lastError', 'Last error')}: {webhook.lastError}\n                          </p>\n                        )}\n                        <div className=\"flex items-center gap-4 mt-3 text-xs text-text-secondary flex-wrap\">\n                          <span>\n                            {tr('webhooks.lastDelivery', 'Last delivery')}:{' '}\n                            {formatTimestamp(webhook.lastDelivery)}\n                          </span>\n                          <span>\n                            {webhook.deliveryCount} {tr('webhooks.deliveries', 'deliveries')},{' '}\n                            {webhook.failureCount} {tr('webhooks.failures', 'failures')}\n                          </span>\n                        </div>\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-2 flex-shrink-0\">\n                      <button\n                        type=\"button\"\n                        onClick={() => handleTestWebhook(webhook)}\n                        disabled={testingWebhook === webhook.id}\n                        className=\"flex items-center gap-1 px-3 py-1.5 text-sm bg-bg-sunken text-text-primary hover:bg-action-secondary-bg-hover rounded-md transition-colors disabled:opacity-50\"\n                      >\n                        {testingWebhook === webhook.id ? (\n                          <RefreshCw className=\"size-4 animate-spin\" />\n                        ) : (\n                          <Play className=\"size-4\" />\n                        )}\n                        {tr('webhooks.test', 'Test')}\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={() => handleToggleWebhook(webhook)}\n                        className={`p-2 rounded-button transition-colors ${\n                          webhook.isActive\n                            ? 'bg-status-success-bg-subtle text-status-success-text hover:bg-bg-sunken'\n                            : 'bg-bg-sunken text-text-secondary hover:bg-action-secondary-bg-hover'\n                        }`}\n                        title={\n                          webhook.isActive\n                            ? tr('webhooks.disable', 'Disable')\n                            : tr('webhooks.enable', 'Enable')\n                        }\n                      >\n                        {webhook.isActive ? <Check className=\"size-4\" /> : <X className=\"size-4\" />}\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={() => {\n                          nativeImpact('medium');\n                          void handleDeleteWebhook(webhook);\n                        }}\n                        className=\"p-2 text-status-error-text hover:bg-status-error-bg rounded-md transition-colors\"\n                        title={tr('common.delete', 'Delete')}\n                      >\n                        <Trash2 className=\"size-4\" />\n                      </button>\n                    </div>\n                  </div>\n                </Card>\n              </MotionItem>\n            ))}\n          </MotionList>\n        ) : (\n          <EmptyState\n            icon={<Webhook className=\"size-8 text-text-secondary\" />}\n            title={\n              searchQuery || statusFilter !== 'all'\n                ? tr('webhooks.emptyFound', 'No webhooks found')\n                : tr('webhooks.emptyConfigured', 'No webhooks configured')\n            }\n            description={\n              searchQuery || statusFilter !== 'all'\n                ? tr('webhooks.emptyAdjustSearch', 'Try adjusting your search or filters')\n                : tr(\n                    'webhooks.emptyDescription',\n                    'Create a webhook to receive notifications about events in your workspace'\n                  )\n            }\n            action={\n              !searchQuery && statusFilter === 'all' ? (\n                <div className=\"flex items-center gap-2\">\n                  {canCreateWebhook && (\n                    <button\n                      type=\"button\"\n                      onClick={handleCreateWebhook}\n                      className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n                    >\n                      <Plus className=\"size-4\" />\n                      {tr('webhooks.newWebhook', 'New Webhook')}\n                    </button>\n                  )}\n                  <GetHelpButton prompt=\"What is a Webhook in VibeControls and how do I configure one?\" />\n                </div>\n              ) : undefined\n            }\n          />\n        )}\n      </AnimatePresence>\n\n      {/* Create Webhook Modal */}\n      {showCreateForm && (\n        <div className=\"fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4\">\n          <div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby=\"create-webhook-title\"\n            className=\"bg-bg-surface rounded-lg p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto\"\n          >\n            <h2 id=\"create-webhook-title\" className=\"text-lg font-semibold text-text-primary mb-4\">\n              {tr('webhooks.newWebhook', 'New Webhook')}\n            </h2>\n            {createError && (\n              <div className=\"mb-4 p-3 bg-status-error-bg text-status-error-text rounded-md text-sm\">\n                {createError}\n              </div>\n            )}\n            <div className=\"space-y-4\">\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('webhooks.name', 'Name')}\n                </label>\n                <input\n                  aria-label=\"control\"\n                  ref={webhookNameRef}\n                  type=\"text\"\n                  placeholder={tr('webhooks.namePlaceholder', 'Slack Notifications')}\n                  className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder\"\n                />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('webhooks.url', 'URL')}\n                </label>\n                <input\n                  aria-label=\"control\"\n                  ref={webhookUrlRef}\n                  type=\"url\"\n                  placeholder={tr(\n                    'webhooks.urlPlaceholder',\n                    'https://hooks.slack.com/services/...'\n                  )}\n                  className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder\"\n                />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('webhooks.secret', 'Secret')}\n                </label>\n                <input\n                  aria-label=\"control\"\n                  ref={webhookSecretRef}\n                  type=\"password\"\n                  placeholder={tr('webhooks.secretPlaceholder', 'Optional signing secret')}\n                  className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder\"\n                />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-2\">\n                  {tr('webhooks.events', 'Events')}\n                </label>\n                <div className=\"space-y-2 max-h-40 overflow-y-auto\">\n                  {WEBHOOK_EVENTS.map((event) => (\n                    <label key={event} className=\"flex items-center gap-2\">\n                      <input\n                        aria-label=\"control\"\n                        type=\"checkbox\"\n                        checked={selectedEvents.includes(event)}\n                        onChange={() => handleToggleEvent(event)}\n                        className=\"size-4 rounded border-border-default\"\n                      />\n                      <span className=\"text-sm text-text-primary\">{event}</span>\n                    </label>\n                  ))}\n                </div>\n                {/* Custom events already selected */}\n                {selectedEvents.filter(isCustomEvent).length > 0 && (\n                  <div className=\"flex flex-wrap gap-1 mt-2\">\n                    {selectedEvents.filter(isCustomEvent).map((event) => (\n                      <span\n                        key={event}\n                        className=\"inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-[var(--color-accent-soft)] text-action-primary-bg border border-dashed border-border-strong rounded\"\n                      >\n                        {event}\n                        <button\n                          type=\"button\"\n                          onClick={() =>\n                            setSelectedEvents((prev) => prev.filter((e) => e !== event))\n                          }\n                          className=\"hover:text-status-error-text\"\n                        >\n                          <X className=\"size-3\" />\n                        </button>\n                      </span>\n                    ))}\n                  </div>\n                )}\n                {/* Custom event input */}\n                <div className=\"flex items-center gap-2 mt-2\">\n                  <input\n                    aria-label=\"control\"\n                    type=\"text\"\n                    value={customEventInput}\n                    onChange={(e) => setCustomEventInput(e.target.value)}\n                    placeholder={tr('webhooks.customEventPlaceholder', 'custom:event-name')}\n                    className=\"flex-1 px-3 py-1.5 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder font-mono\"\n                    onKeyDown={(e) => {\n                      if (e.key === 'Enter') {\n                        e.preventDefault();\n                        const val = customEventInput.trim();\n                        if (\n                          /^[a-z][a-z0-9_-]*:[a-z][a-z0-9_.-]*$/.test(val) &&\n                          !selectedEvents.includes(val)\n                        ) {\n                          setSelectedEvents((prev) => [...prev, val]);\n                          setCustomEventInput('');\n                        }\n                      }\n                    }}\n                  />\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      const val = customEventInput.trim();\n                      if (\n                        /^[a-z][a-z0-9_-]*:[a-z][a-z0-9_.-]*$/.test(val) &&\n                        !selectedEvents.includes(val)\n                      ) {\n                        setSelectedEvents((prev) => [...prev, val]);\n                        setCustomEventInput('');\n                      }\n                    }}\n                    className=\"px-3 py-1.5 text-sm bg-bg-sunken text-text-primary hover:bg-action-secondary-bg-hover rounded-md transition-colors\"\n                  >\n                    <Plus className=\"size-4\" />\n                  </button>\n                </div>\n                <p className=\"text-xs text-text-muted mt-1\">\n                  {tr(\n                    'webhooks.customEventHint',\n                    'Add custom events using namespace:event format (e.g., deploy:started)'\n                  )}\n                </p>\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                  {tr('webhooks.signingKey', 'Signing Key')}\n                </label>\n                <div className=\"relative\">\n                  <input\n                    aria-label=\"control\"\n                    ref={webhookSigningKeyRef}\n                    type={showSigningKey ? 'text' : 'password'}\n                    placeholder={tr(\n                      'webhooks.signingKeyPlaceholder',\n                      'HMAC signing key for delivery verification'\n                    )}\n                    className=\"w-full px-3 py-2 pr-10 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder font-mono text-sm\"\n                  />\n                  <button\n                    type=\"button\"\n                    onClick={() => setShowSigningKey(!showSigningKey)}\n                    className=\"absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-bg-elevated transition-colors\"\n                  >\n                    {showSigningKey ? (\n                      <EyeOff className=\"size-4 text-text-secondary\" />\n                    ) : (\n                      <Eye className=\"size-4 text-text-secondary\" />\n                    )}\n                  </button>\n                </div>\n                <p className=\"text-xs text-text-muted mt-1\">\n                  {tr(\n                    'webhooks.signingKeyHint',\n                    'Used to sign payloads with HMAC-SHA256. Header: X-Webhook-Signature'\n                  )}\n                </p>\n              </div>\n              {agents.length > 0 && (\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-2\">\n                    {tr('webhooks.agentScope', 'Agent Scope')}\n                  </label>\n                  <p className=\"text-xs text-text-muted mb-2\">\n                    {tr(\n                      'webhooks.agentScopeHint',\n                      'Only fire for events from selected agents. Leave empty for all agents.'\n                    )}\n                  </p>\n                  <div className=\"space-y-2 max-h-32 overflow-y-auto\">\n                    {agents.map((agent: { id: string; name: string }) => (\n                      <label key={agent.id} className=\"flex items-center gap-2\">\n                        <input\n                          aria-label=\"control\"\n                          type=\"checkbox\"\n                          checked={selectedAgentIds.includes(agent.id)}\n                          onChange={() =>\n                            setSelectedAgentIds((prev) =>\n                              prev.includes(agent.id)\n                                ? prev.filter((id) => id !== agent.id)\n                                : [...prev, agent.id]\n                            )\n                          }\n                          className=\"size-4 rounded border-border-default\"\n                        />\n                        <Bot className=\"size-3.5 text-text-secondary\" />\n                        <span className=\"text-sm text-text-primary\">{agent.name}</span>\n                      </label>\n                    ))}\n                  </div>\n                </div>\n              )}\n            </div>\n            <div className=\"flex flex-col-reverse sm:flex-row justify-end gap-3 mt-6\">\n              <button\n                type=\"button\"\n                onClick={() => setShowCreateForm(false)}\n                disabled={createLoading}\n                className=\"px-4 py-2 text-text-primary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n              >\n                {tr('common.cancel', 'Cancel')}\n              </button>\n              <button\n                type=\"button\"\n                onClick={handleSubmitCreateWebhook}\n                disabled={createLoading}\n                className=\"px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n              >\n                {createLoading\n                  ? tr('webhooks.creating', 'Creating...')\n                  : tr('webhooks.createWebhook', 'Create Webhook')}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n\n      <ConfirmDialog\n        isOpen={bulkAction === 'enable'}\n        onClose={() => setBulkAction(null)}\n        onConfirm={() => handleBulkToggleWebhooks(true)}\n        title=\"Enable selected webhooks\"\n        message={`Enable ${inactiveSelectedWebhooks.length} selected webhook${inactiveSelectedWebhooks.length === 1 ? '' : 's'}?`}\n        confirmLabel=\"Enable\"\n        variant=\"default\"\n      />\n\n      <ConfirmDialog\n        isOpen={bulkAction === 'disable'}\n        onClose={() => setBulkAction(null)}\n        onConfirm={() => handleBulkToggleWebhooks(false)}\n        title=\"Disable selected webhooks\"\n        message={`Disable ${activeSelectedWebhooks.length} selected webhook${activeSelectedWebhooks.length === 1 ? '' : 's'}?`}\n        confirmLabel=\"Disable\"\n        variant=\"warning\"\n      />\n\n      <ConfirmDialog\n        isOpen={bulkAction === 'delete'}\n        onClose={() => setBulkAction(null)}\n        onConfirm={handleBulkDeleteWebhooks}\n        title=\"Delete selected webhooks\"\n        message={`Delete ${selectedWebhooks.length} selected webhook${selectedWebhooks.length === 1 ? '' : 's'}? This cannot be undone.`}\n        confirmLabel=\"Delete\"\n        variant=\"danger\"\n      />\n\n      <QuotaExhaustedDialog\n        isOpen={quotaDialog !== null}\n        onClose={() => setQuotaDialog(null)}\n        onConfirm={() => {\n          setQuotaDialog(null);\n          navigate('/billing/plans');\n        }}\n        title={quotaDialog?.title || 'Quota Reached'}\n        message={quotaDialog?.message || 'Upgrade your plan to continue.'}\n      />\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/ai/AIBookmarksPage.js

@@ -116,7 +116,7 @@ var S = 100, C = () => {
 									children: t.map((e) => {
 										let t = I === e.id;
 										return /* @__PURE__ */ y("li", {
-											className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 hover:border-action-primary-bg/30 transition-colors",
+											className: "rounded-card border border-border-subtle bg-bg-surface px-3 py-2 hover:border-border-strong transition-colors",
 											children: /* @__PURE__ */ b("div", {
 												className: "flex items-start gap-2",
 												children: [/* @__PURE__ */ b("div", {

package/dist/pages/ai/AIBookmarksPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AIBookmarksPage.js","names":[],"sources":["../../../src/pages/ai/AIBookmarksPage.tsx"],"sourcesContent":["/**\n * Cross-session bookmarks view: lists every message the user has bookmarked\n * across all AI Chat sessions. Clicking a row navigates to the session and\n * the chat pane scrolls to the message via ?messageId=...\n */\n\nimport { useMemo, useState, type FC } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { Bookmark, ChevronRight, Pencil, Trash2, Check, X as XIcon } from 'lucide-react';\nimport { AccessDenied } from '@burdenoff/fe-libs/shared/components';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { relativeTime } from '@/utils/relativeTime';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { VIBE_PERMISSIONS } from '@/constants/permissions';\nimport {\n  useDeleteAgentMessageBookmarkMutation,\n  useMyAgentMessageBookmarksQuery,\n  useUpdateAgentMessageBookmarkMutation,\n} from '../../generated/wspace-operations';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { AiSectionTabs } from '@/components/ai/AiSectionTabs';\n\nconst PAGE_SIZE = 100;\n\ninterface BookmarkRow {\n  id: string;\n  agentId: string;\n  sessionId: string;\n  messageId: string;\n  label: string | null | undefined;\n  createdAt: string | Date;\n}\n\nexport const AIBookmarksPage: FC = () => {\n  const navigate = useNavigate();\n  const tr = useTr();\n  const { agents } = useCachedInitialData();\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const canReadBookmarks = hasPermission(VIBE_PERMISSIONS.AGENT_MESSAGE_BOOKMARK_READ);\n  const canUpdateBookmarks = hasPermission(VIBE_PERMISSIONS.AGENT_MESSAGE_BOOKMARK_UPDATE);\n  const canDeleteBookmarks = hasPermission(VIBE_PERMISSIONS.AGENT_MESSAGE_BOOKMARK_DELETE);\n  const agentNameById = useMemo(() => new Map(agents.map((a) => [a.id, a.name ?? a.id])), [agents]);\n\n  const { data, loading } = useMyAgentMessageBookmarksQuery({\n    variables: { pagination: { limit: PAGE_SIZE, offset: 0 } },\n    fetchPolicy: 'cache-and-network',\n    skip: permissionsLoading || !canReadBookmarks,\n  });\n\n  const [updateMutation] = useUpdateAgentMessageBookmarkMutation({\n    refetchQueries: ['MyAgentMessageBookmarks'],\n  });\n  const [deleteMutation] = useDeleteAgentMessageBookmarkMutation({\n    refetchQueries: ['MyAgentMessageBookmarks'],\n  });\n\n  const [editingId, setEditingId] = useState<string | null>(null);\n  const [labelDraft, setLabelDraft] = useState('');\n\n  const items = useMemo(\n    () => (data?.myAgentMessageBookmarks.items ?? []) as BookmarkRow[],\n    [data?.myAgentMessageBookmarks.items]\n  );\n\n  const grouped = useMemo(() => {\n    const map = new Map<string, BookmarkRow[]>();\n    for (const bm of items) {\n      const arr = map.get(bm.sessionId) ?? [];\n      arr.push(bm);\n      map.set(bm.sessionId, arr);\n    }\n    return Array.from(map.entries());\n  }, [items]);\n\n  const startEdit = (id: string, current: string | null | undefined) => {\n    setEditingId(id);\n    setLabelDraft(current ?? '');\n  };\n\n  const saveEdit = async (id: string) => {\n    if (!canUpdateBookmarks) return;\n    await updateMutation({ variables: { id, input: { label: labelDraft || null } } });\n    setEditingId(null);\n    setLabelDraft('');\n  };\n\n  const removeBookmark = async (id: string) => {\n    if (!canDeleteBookmarks) return;\n    await deleteMutation({ variables: { id } });\n  };\n\n  const openInSession = (sessionId: string, messageId: string) => {\n    navigate(`/vibecontrols/ai/sessions/${sessionId}?messageId=${messageId}`);\n  };\n\n  return (\n    <div className=\"flex flex-col h-full min-h-0\" data-testid=\"ai-bookmarks-page\">\n      <AiSectionTabs active=\"bookmarks\" />\n      <header className=\"px-6 py-4 border-b border-border-default flex-shrink-0\">\n        <div className=\"flex items-center gap-2\">\n          <Bookmark className=\"size-5 text-text-secondary\" />\n          <h1 className=\"text-lg font-semibold text-text-primary\">\n            {tr('vibecontrols.bookmarks.pageTitle', 'Saved messages')}\n          </h1>\n        </div>\n        <p className=\"text-xs text-text-secondary mt-1\">\n          {tr(\n            'vibecontrols.bookmarks.pageSubtitle',\n            'Every AI Chat message you have bookmarked across all sessions.'\n          )}\n        </p>\n      </header>\n\n      <div className=\"flex-1 min-h-0 overflow-y-auto\">\n        {permissionsLoading && (\n          <div className=\"px-6 py-8 text-sm text-text-tertiary\">\n            {tr('common.loadingPermissions', 'Loading permissions…')}\n          </div>\n        )}\n\n        {!permissionsLoading && !canReadBookmarks && (\n          <div className=\"px-6 py-8\">\n            <AccessDenied\n              title={tr('vibecontrols.bookmarks.denied.title', 'Access Denied')}\n              description={tr(\n                'vibecontrols.bookmarks.denied.message',\n                'You do not have permission to view saved messages.'\n              )}\n            />\n          </div>\n        )}\n\n        {loading && items.length === 0 && (\n          <div className=\"px-6 py-8 text-sm text-text-tertiary\">\n            {tr('vibecontrols.common.loading', 'Loading...')}\n          </div>\n        )}\n\n        {!permissionsLoading && canReadBookmarks && !loading && items.length === 0 && (\n          <div className=\"px-6 py-16 flex flex-col items-center text-center gap-2\">\n            <Bookmark className=\"size-10 text-text-muted\" />\n            <p className=\"text-base font-medium text-text-primary\">\n              {tr('vibecontrols.bookmarks.empty', \"You haven't bookmarked any messages yet\")}\n            </p>\n            <p className=\"text-xs text-text-secondary max-w-md\">\n              {tr(\n                'vibecontrols.bookmarks.emptyHint',\n                'Open any AI Chat session and click the bookmark icon on a message to save it here.'\n              )}\n            </p>\n          </div>\n        )}\n\n        <div className=\"divide-y divide-border-subtle\">\n          {grouped.map(([sessionId, sessionBookmarks]) => {\n            const agentId = sessionBookmarks[0]?.agentId ?? '';\n            const agentName = agentNameById.get(agentId) ?? agentId;\n\n            return (\n              <section key={sessionId} className=\"px-6 py-4\">\n                <div className=\"flex items-center justify-between mb-2\">\n                  <div className=\"min-w-0\">\n                    <p className=\"text-xs font-mono text-text-tertiary truncate\">{sessionId}</p>\n                    <p className=\"text-sm font-medium text-text-primary\">{agentName}</p>\n                  </div>\n                  <button\n                    type=\"button\"\n                    onClick={() => navigate(`/vibecontrols/ai/sessions/${sessionId}`)}\n                    className=\"text-xs text-action-primary-text hover:underline\"\n                  >\n                    {tr('vibecontrols.bookmarks.openInSession', 'Open session')}\n                  </button>\n                </div>\n\n                <ul className=\"space-y-1\">\n                  {sessionBookmarks.map((bm) => {\n                    const isEditing = editingId === bm.id;\n                    return (\n                      <li\n                        key={bm.id}\n                        className=\"rounded-md border border-border-subtle bg-bg-surface px-3 py-2 hover:border-action-primary-bg/30 transition-colors\"\n                      >\n                        <div className=\"flex items-start gap-2\">\n                          <div className=\"flex-1 min-w-0\">\n                            {canUpdateBookmarks && isEditing ? (\n                              <input\n                                aria-label=\"control\"\n                                value={labelDraft}\n                                onChange={(e) => setLabelDraft(e.target.value)}\n                                onKeyDown={(e) => {\n                                  if (e.key === 'Enter') void saveEdit(bm.id);\n                                  if (e.key === 'Escape') {\n                                    setEditingId(null);\n                                    setLabelDraft('');\n                                  }\n                                }}\n                                placeholder={tr(\n                                  'vibecontrols.agentManager.bookmarksDrawer.labelPlaceholder',\n                                  'Add a label (optional)'\n                                )}\n                                className=\"w-full bg-bg-sunken border border-border-subtle rounded px-2 py-1 text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none focus:border-action-primary-bg\"\n                              />\n                            ) : (\n                              <p className=\"text-sm text-text-primary truncate\">\n                                {bm.label || (\n                                  <span className=\"text-text-tertiary italic\">\n                                    {tr('vibecontrols.bookmarks.unlabeled', 'Unlabeled bookmark')}\n                                  </span>\n                                )}\n                              </p>\n                            )}\n                            <p className=\"text-[10px] text-text-tertiary mt-1 font-mono truncate\">\n                              msg:{bm.messageId} · {relativeTime(bm.createdAt)}\n                            </p>\n                          </div>\n\n                          <div className=\"flex items-center gap-0.5 shrink-0\">\n                            {!isEditing && (\n                              <button\n                                type=\"button\"\n                                onClick={() => openInSession(bm.sessionId, bm.messageId)}\n                                className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n                                title={tr(\n                                  'vibecontrols.bookmarks.jumpToMessage',\n                                  'Jump to message in session'\n                                )}\n                                aria-label={tr(\n                                  'vibecontrols.bookmarks.jumpToMessage',\n                                  'Jump to message'\n                                )}\n                              >\n                                <ChevronRight className=\"size-3.5 text-text-secondary\" />\n                              </button>\n                            )}\n\n                            {isEditing ? (\n                              <>\n                                <button\n                                  type=\"button\"\n                                  onClick={() => void saveEdit(bm.id)}\n                                  className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n                                  aria-label={tr('vibecontrols.common.save', 'Save')}\n                                >\n                                  <Check className=\"size-3.5 text-status-success-text\" />\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  onClick={() => {\n                                    setEditingId(null);\n                                    setLabelDraft('');\n                                  }}\n                                  className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n                                  aria-label={tr('vibecontrols.common.cancel', 'Cancel')}\n                                >\n                                  <XIcon className=\"size-3.5 text-text-secondary\" />\n                                </button>\n                              </>\n                            ) : canUpdateBookmarks ? (\n                              <button\n                                type=\"button\"\n                                onClick={() => startEdit(bm.id, bm.label)}\n                                className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n                                aria-label={tr(\n                                  'vibecontrols.agentManager.bookmarksDrawer.editLabel',\n                                  'Edit label'\n                                )}\n                              >\n                                <Pencil className=\"size-3.5 text-text-secondary\" />\n                              </button>\n                            ) : null}\n\n                            {canDeleteBookmarks && (\n                              <button\n                                type=\"button\"\n                                onClick={() => void removeBookmark(bm.id)}\n                                className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n                                aria-label={tr(\n                                  'vibecontrols.agentManager.messageItem.removeBookmark',\n                                  'Remove bookmark'\n                                )}\n                              >\n                                <Trash2 className=\"size-3.5 text-status-error-text\" />\n                              </button>\n                            )}\n                          </div>\n                        </div>\n                      </li>\n                    );\n                  })}\n                </ul>\n              </section>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AIBookmarksPage.js","names":[],"sources":["../../../src/pages/ai/AIBookmarksPage.tsx"],"sourcesContent":["/**\n * Cross-session bookmarks view: lists every message the user has bookmarked\n * across all AI Chat sessions. Clicking a row navigates to the session and\n * the chat pane scrolls to the message via ?messageId=...\n */\n\nimport { useMemo, useState, type FC } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { Bookmark, ChevronRight, Pencil, Trash2, Check, X as XIcon } from 'lucide-react';\nimport { AccessDenied } from '@burdenoff/fe-libs/shared/components';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { relativeTime } from '@/utils/relativeTime';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { VIBE_PERMISSIONS } from '@/constants/permissions';\nimport {\n  useDeleteAgentMessageBookmarkMutation,\n  useMyAgentMessageBookmarksQuery,\n  useUpdateAgentMessageBookmarkMutation,\n} from '../../generated/wspace-operations';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { AiSectionTabs } from '@/components/ai/AiSectionTabs';\n\nconst PAGE_SIZE = 100;\n\ninterface BookmarkRow {\n  id: string;\n  agentId: string;\n  sessionId: string;\n  messageId: string;\n  label: string | null | undefined;\n  createdAt: string | Date;\n}\n\nexport const AIBookmarksPage: FC = () => {\n  const navigate = useNavigate();\n  const tr = useTr();\n  const { agents } = useCachedInitialData();\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const canReadBookmarks = hasPermission(VIBE_PERMISSIONS.AGENT_MESSAGE_BOOKMARK_READ);\n  const canUpdateBookmarks = hasPermission(VIBE_PERMISSIONS.AGENT_MESSAGE_BOOKMARK_UPDATE);\n  const canDeleteBookmarks = hasPermission(VIBE_PERMISSIONS.AGENT_MESSAGE_BOOKMARK_DELETE);\n  const agentNameById = useMemo(() => new Map(agents.map((a) => [a.id, a.name ?? a.id])), [agents]);\n\n  const { data, loading } = useMyAgentMessageBookmarksQuery({\n    variables: { pagination: { limit: PAGE_SIZE, offset: 0 } },\n    fetchPolicy: 'cache-and-network',\n    skip: permissionsLoading || !canReadBookmarks,\n  });\n\n  const [updateMutation] = useUpdateAgentMessageBookmarkMutation({\n    refetchQueries: ['MyAgentMessageBookmarks'],\n  });\n  const [deleteMutation] = useDeleteAgentMessageBookmarkMutation({\n    refetchQueries: ['MyAgentMessageBookmarks'],\n  });\n\n  const [editingId, setEditingId] = useState<string | null>(null);\n  const [labelDraft, setLabelDraft] = useState('');\n\n  const items = useMemo(\n    () => (data?.myAgentMessageBookmarks.items ?? []) as BookmarkRow[],\n    [data?.myAgentMessageBookmarks.items]\n  );\n\n  const grouped = useMemo(() => {\n    const map = new Map<string, BookmarkRow[]>();\n    for (const bm of items) {\n      const arr = map.get(bm.sessionId) ?? [];\n      arr.push(bm);\n      map.set(bm.sessionId, arr);\n    }\n    return Array.from(map.entries());\n  }, [items]);\n\n  const startEdit = (id: string, current: string | null | undefined) => {\n    setEditingId(id);\n    setLabelDraft(current ?? '');\n  };\n\n  const saveEdit = async (id: string) => {\n    if (!canUpdateBookmarks) return;\n    await updateMutation({ variables: { id, input: { label: labelDraft || null } } });\n    setEditingId(null);\n    setLabelDraft('');\n  };\n\n  const removeBookmark = async (id: string) => {\n    if (!canDeleteBookmarks) return;\n    await deleteMutation({ variables: { id } });\n  };\n\n  const openInSession = (sessionId: string, messageId: string) => {\n    navigate(`/vibecontrols/ai/sessions/${sessionId}?messageId=${messageId}`);\n  };\n\n  return (\n    <div className=\"flex flex-col h-full min-h-0\" data-testid=\"ai-bookmarks-page\">\n      <AiSectionTabs active=\"bookmarks\" />\n      <header className=\"px-6 py-4 border-b border-border-default flex-shrink-0\">\n        <div className=\"flex items-center gap-2\">\n          <Bookmark className=\"size-5 text-text-secondary\" />\n          <h1 className=\"text-lg font-semibold text-text-primary\">\n            {tr('vibecontrols.bookmarks.pageTitle', 'Saved messages')}\n          </h1>\n        </div>\n        <p className=\"text-xs text-text-secondary mt-1\">\n          {tr(\n            'vibecontrols.bookmarks.pageSubtitle',\n            'Every AI Chat message you have bookmarked across all sessions.'\n          )}\n        </p>\n      </header>\n\n      <div className=\"flex-1 min-h-0 overflow-y-auto\">\n        {permissionsLoading && (\n          <div className=\"px-6 py-8 text-sm text-text-tertiary\">\n            {tr('common.loadingPermissions', 'Loading permissions…')}\n          </div>\n        )}\n\n        {!permissionsLoading && !canReadBookmarks && (\n          <div className=\"px-6 py-8\">\n            <AccessDenied\n              title={tr('vibecontrols.bookmarks.denied.title', 'Access Denied')}\n              description={tr(\n                'vibecontrols.bookmarks.denied.message',\n                'You do not have permission to view saved messages.'\n              )}\n            />\n          </div>\n        )}\n\n        {loading && items.length === 0 && (\n          <div className=\"px-6 py-8 text-sm text-text-tertiary\">\n            {tr('vibecontrols.common.loading', 'Loading...')}\n          </div>\n        )}\n\n        {!permissionsLoading && canReadBookmarks && !loading && items.length === 0 && (\n          <div className=\"px-6 py-16 flex flex-col items-center text-center gap-2\">\n            <Bookmark className=\"size-10 text-text-muted\" />\n            <p className=\"text-base font-medium text-text-primary\">\n              {tr('vibecontrols.bookmarks.empty', \"You haven't bookmarked any messages yet\")}\n            </p>\n            <p className=\"text-xs text-text-secondary max-w-md\">\n              {tr(\n                'vibecontrols.bookmarks.emptyHint',\n                'Open any AI Chat session and click the bookmark icon on a message to save it here.'\n              )}\n            </p>\n          </div>\n        )}\n\n        <div className=\"divide-y divide-border-subtle\">\n          {grouped.map(([sessionId, sessionBookmarks]) => {\n            const agentId = sessionBookmarks[0]?.agentId ?? '';\n            const agentName = agentNameById.get(agentId) ?? agentId;\n\n            return (\n              <section key={sessionId} className=\"px-6 py-4\">\n                <div className=\"flex items-center justify-between mb-2\">\n                  <div className=\"min-w-0\">\n                    <p className=\"text-xs font-mono text-text-tertiary truncate\">{sessionId}</p>\n                    <p className=\"text-sm font-medium text-text-primary\">{agentName}</p>\n                  </div>\n                  <button\n                    type=\"button\"\n                    onClick={() => navigate(`/vibecontrols/ai/sessions/${sessionId}`)}\n                    className=\"text-xs text-action-primary-text hover:underline\"\n                  >\n                    {tr('vibecontrols.bookmarks.openInSession', 'Open session')}\n                  </button>\n                </div>\n\n                <ul className=\"space-y-1\">\n                  {sessionBookmarks.map((bm) => {\n                    const isEditing = editingId === bm.id;\n                    return (\n                      <li\n                        key={bm.id}\n                        className=\"rounded-card border border-border-subtle bg-bg-surface px-3 py-2 hover:border-border-strong transition-colors\"\n                      >\n                        <div className=\"flex items-start gap-2\">\n                          <div className=\"flex-1 min-w-0\">\n                            {canUpdateBookmarks && isEditing ? (\n                              <input\n                                aria-label=\"control\"\n                                value={labelDraft}\n                                onChange={(e) => setLabelDraft(e.target.value)}\n                                onKeyDown={(e) => {\n                                  if (e.key === 'Enter') void saveEdit(bm.id);\n                                  if (e.key === 'Escape') {\n                                    setEditingId(null);\n                                    setLabelDraft('');\n                                  }\n                                }}\n                                placeholder={tr(\n                                  'vibecontrols.agentManager.bookmarksDrawer.labelPlaceholder',\n                                  'Add a label (optional)'\n                                )}\n                                className=\"w-full bg-bg-sunken border border-border-subtle rounded px-2 py-1 text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none focus:border-action-primary-bg\"\n                              />\n                            ) : (\n                              <p className=\"text-sm text-text-primary truncate\">\n                                {bm.label || (\n                                  <span className=\"text-text-tertiary italic\">\n                                    {tr('vibecontrols.bookmarks.unlabeled', 'Unlabeled bookmark')}\n                                  </span>\n                                )}\n                              </p>\n                            )}\n                            <p className=\"text-[10px] text-text-tertiary mt-1 font-mono truncate\">\n                              msg:{bm.messageId} · {relativeTime(bm.createdAt)}\n                            </p>\n                          </div>\n\n                          <div className=\"flex items-center gap-0.5 shrink-0\">\n                            {!isEditing && (\n                              <button\n                                type=\"button\"\n                                onClick={() => openInSession(bm.sessionId, bm.messageId)}\n                                className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n                                title={tr(\n                                  'vibecontrols.bookmarks.jumpToMessage',\n                                  'Jump to message in session'\n                                )}\n                                aria-label={tr(\n                                  'vibecontrols.bookmarks.jumpToMessage',\n                                  'Jump to message'\n                                )}\n                              >\n                                <ChevronRight className=\"size-3.5 text-text-secondary\" />\n                              </button>\n                            )}\n\n                            {isEditing ? (\n                              <>\n                                <button\n                                  type=\"button\"\n                                  onClick={() => void saveEdit(bm.id)}\n                                  className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n                                  aria-label={tr('vibecontrols.common.save', 'Save')}\n                                >\n                                  <Check className=\"size-3.5 text-status-success-text\" />\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  onClick={() => {\n                                    setEditingId(null);\n                                    setLabelDraft('');\n                                  }}\n                                  className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n                                  aria-label={tr('vibecontrols.common.cancel', 'Cancel')}\n                                >\n                                  <XIcon className=\"size-3.5 text-text-secondary\" />\n                                </button>\n                              </>\n                            ) : canUpdateBookmarks ? (\n                              <button\n                                type=\"button\"\n                                onClick={() => startEdit(bm.id, bm.label)}\n                                className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n                                aria-label={tr(\n                                  'vibecontrols.agentManager.bookmarksDrawer.editLabel',\n                                  'Edit label'\n                                )}\n                              >\n                                <Pencil className=\"size-3.5 text-text-secondary\" />\n                              </button>\n                            ) : null}\n\n                            {canDeleteBookmarks && (\n                              <button\n                                type=\"button\"\n                                onClick={() => void removeBookmark(bm.id)}\n                                className=\"p-1 rounded hover:bg-bg-sunken transition-colors\"\n                                aria-label={tr(\n                                  'vibecontrols.agentManager.messageItem.removeBookmark',\n                                  'Remove bookmark'\n                                )}\n                              >\n                                <Trash2 className=\"size-3.5 text-status-error-text\" />\n                              </button>\n                            )}\n                          </div>\n                        </div>\n                      </li>\n                    );\n                  })}\n                </ul>\n              </section>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/pages/ai/AISessionDetailPage.js

@@ -49,12 +49,12 @@ var he = [
 		icon: v
 	}
 ], _e = {
-	info: "bg-action-primary-bg/10 text-action-primary-bg",
-	warn: "bg-status-warning-bg text-status-warning-text",
-	error: "bg-status-error-bg text-status-error-text",
+	info: "bg-[var(--color-accent-soft)] text-action-primary-bg",
+	warn: "bg-status-warning-bg-subtle text-status-warning-text",
+	error: "bg-status-error-bg-subtle text-status-error-text",
 	debug: "bg-bg-sunken text-text-secondary",
-	prompt: "bg-status-success-bg text-status-success-text",
-	response: "bg-action-primary-bg/20 text-action-primary-bg"
+	prompt: "bg-status-success-bg-subtle text-status-success-text",
+	response: "bg-[var(--color-accent-soft)] text-action-primary-bg"
 };
 function S() {
 	let S = e(), { hasPermission: ve, isLoading: ye } = pe(), be = ve(ne.AGENT_READ), { sessionId: C } = fe(), w = t(), { agents: T, loading: xe } = n(), E = f(() => T.find((e) => e.isActive && e.tunnelUrl) ?? null, [T]), D = E?.id ?? "", O = !!D, { active: k } = te(E?.id ?? null), A = f(() => ({
@@ -430,7 +430,7 @@ function S() {
 										}
 									},
 									disabled: je,
-									className: "flex items-center gap-2 px-4 py-2 bg-status-error-bg text-status-error-text border border-status-error-text/20 rounded-md hover:bg-status-error-bg/80 transition-colors disabled:opacity-50 text-sm",
+									className: "flex items-center gap-2 px-4 py-2 bg-action-danger-bg text-action-danger-text border border-status-error-border rounded-button hover:bg-action-danger-bg-hover transition-colors disabled:opacity-50 text-sm",
 									children: [/* @__PURE__ */ y(de, { className: "size-4" }), je ? S("vibecontrols.pages.ai.terminating", "Terminating...") : S("vibecontrols.pages.ai.terminateSession", "Terminate Session")]
 								})
 							]