@consilioweb/payload-support 2.0.1 → 4.0.0

package/src/collections/Tickets.ts

@@ -3,13 +3,13 @@ import type {
   CollectionBeforeChangeHook,
   CollectionAfterChangeHook,
   CollectionBeforeDeleteHook,
+  CollectionBeforeValidateHook,
   Field,
   Where,
 } from 'payload'
 import type { CollectionSlugs } from '../utils/slugs'
 import type { SupportCapabilities } from '../types'
 import { escapeHtml, emailWrapper, emailParagraph, emailButton } from '../utils/emailTemplate'
-import { fireWebhooks } from '../utils/fireWebhooks'
 import { createAdminNotification } from '../utils/adminNotification'
 import { dispatchWebhook } from '../utils/webhookDispatcher'
 import { readSupportSettings } from '../utils/readSettings'
@@ -96,13 +96,52 @@ function createAssignTicketNumber(
 
 function createAssignClientOnCreate(slugs: CollectionSlugs): CollectionBeforeChangeHook {
   return async ({ data, operation, req }) => {
-    if (operation === 'create' && req.user?.collection === slugs.supportClients && !data.client) {
+    // Unconditional, NOT `if (!data.client)`: a support-client posting an explicit
+    // `client` id would otherwise open a ticket in someone else's name.
+    if (operation === 'create' && req.user?.collection === slugs.supportClients) {
       data.client = req.user.id
     }
     return data
   }
 }
 
+/**
+ * Fields a support-client is allowed to submit when opening a ticket from the
+ * portal. Everything else (billing, SLA, assignment, counters, AI bookkeeping,
+ * `client`, `source`) is server-owned.
+ */
+const CLIENT_CREATABLE_TICKET_FIELDS = ['subject', 'category', 'priority', 'project'] as const
+
+/**
+ * Allow-list the payload of a client-initiated ticket creation.
+ *
+ * `access.create` grants any authenticated support-client the right to create a
+ * ticket, and Payload happily persists every field it is handed — including
+ * `paymentStatus: 'paid'`, `billable: false`, `assignedTo` or `slaPolicy`, all of
+ * which the billing endpoints read back as trusted input.
+ *
+ * Runs as `beforeValidate` so the later `beforeChange` hooks (ticket number
+ * allocation, round-robin assignment) can still set the server-owned fields they
+ * own. Update is already covered by `createRestrictClientUpdates`.
+ */
+function createRestrictClientCreate(slugs: CollectionSlugs): CollectionBeforeValidateHook {
+  return async ({ data, operation, req }) => {
+    if (operation !== 'create') return data
+    if (req.user?.collection !== slugs.supportClients) return data
+
+    const incoming = (data ?? {}) as Record<string, unknown>
+    const sanitized: Record<string, unknown> = {}
+    for (const field of CLIENT_CREATABLE_TICKET_FIELDS) {
+      if (incoming[field] !== undefined) sanitized[field] = incoming[field]
+    }
+    // Clients open tickets; they do not get to pick the initial workflow state.
+    sanitized.status = 'open'
+    sanitized.client = req.user.id
+    sanitized.source = 'portal'
+    return sanitized
+  }
+}
+
 const autoPaidAt: CollectionBeforeChangeHook = async ({ data, operation, originalDoc }) => {
   if (operation !== 'update') return data
   if (data.paymentStatus === 'paid' && originalDoc?.paymentStatus !== 'paid' && !data.paidAt) {
@@ -133,16 +172,10 @@ function createAutoAssignAdmin(slugs: CollectionSlugs): CollectionBeforeChangeHo
       const { payload } = req
       let roundRobinEnabled = false
       try {
-        const prefs = await payload.find({
-          collection: 'payload-preferences',
-          where: { key: { equals: 'support-round-robin' } },
-          limit: 1,
-          depth: 0,
-          overrideAccess: true,
-        })
-        if (prefs.docs.length > 0) {
-          roundRobinEnabled = (prefs.docs[0].value as { enabled?: boolean })?.enabled === true
-        }
+        // Single source of truth: the `features` block of the support settings,
+        // which also falls back to the legacy `support-round-robin` row.
+        const settings = await readSupportSettings(payload)
+        roundRobinEnabled = settings.features.roundRobin === true
       } catch (err) { console.warn('[support] Failed to read round-robin preferences:', err) }
 
       const admins = await payload.find({
@@ -384,62 +417,6 @@ function createNotifyClientOnResolve(slugs: CollectionSlugs): CollectionAfterCha
   }
 }
 
-function createFireTicketWebhooks(slugs: CollectionSlugs): CollectionAfterChangeHook {
-  return async ({ doc, previousDoc, operation, req }) => {
-    const { payload } = req
-
-    if (operation === 'create') {
-      // ticket_created
-      fireWebhooks(payload, slugs, 'ticket_created', {
-        id: doc.id,
-        ticketNumber: doc.ticketNumber,
-        subject: doc.subject,
-        status: doc.status,
-        priority: doc.priority,
-        category: doc.category,
-      })
-      return doc
-    }
-
-    if (operation === 'update' && previousDoc) {
-      // ticket_resolved
-      if (previousDoc.status !== doc.status && doc.status === 'resolved') {
-        fireWebhooks(payload, slugs, 'ticket_resolved', {
-          id: doc.id,
-          ticketNumber: doc.ticketNumber,
-          subject: doc.subject,
-          previousStatus: previousDoc.status,
-        })
-
-        // Invalidate client summary cache so it refreshes on next view
-        const clientId = typeof doc.client === 'object' ? doc.client?.id : doc.client
-        if (clientId) {
-          payload.update({
-            collection: 'client-summaries',
-            where: { client: { equals: clientId } },
-            data: { generatedAt: new Date(0).toISOString() }, // Force cache expiry
-            overrideAccess: true,
-          }).catch(() => { /* silent — collection might not exist yet */ })
-        }
-      }
-
-      // ticket_assigned
-      const oldAssigned = typeof previousDoc.assignedTo === 'object' ? previousDoc.assignedTo?.id : previousDoc.assignedTo
-      const newAssigned = typeof doc.assignedTo === 'object' ? doc.assignedTo?.id : doc.assignedTo
-      if (newAssigned && oldAssigned !== newAssigned) {
-        fireWebhooks(payload, slugs, 'ticket_assigned', {
-          id: doc.id,
-          ticketNumber: doc.ticketNumber,
-          subject: doc.subject,
-          assignedTo: newAssigned,
-        })
-      }
-    }
-
-    return doc
-  }
-}
-
 function createNotifyAdminOnNewTicket(slugs: CollectionSlugs, notificationSlug: string): CollectionAfterChangeHook {
   return async ({ doc, operation, req }) => {
     if (operation !== 'create') return doc
@@ -462,24 +439,82 @@ function createNotifyAdminOnNewTicket(slugs: CollectionSlugs, notificationSlug:
   }
 }
 
+/**
+ * Single outbound-webhook dispatcher for tickets.
+ *
+ * Until 2.x two dispatchers were registered side by side on these very hooks with
+ * identical guards, so every subscriber received TWO POSTs per event, with two
+ * incompatible body shapes and two auth schemes — the legacy one shipping the
+ * endpoint secret in clear in `X-Webhook-Secret`, which defeated the HMAC of the
+ * other. Only the HMAC path remains; its payloads absorb the legacy fields
+ * (`id`, `status`, `priority`, `category`, `previousStatus`, `assignedTo`) so
+ * consumers of either shape keep working.
+ */
 function createDispatchWebhookOnTicket(slugs: CollectionSlugs): CollectionAfterChangeHook {
   return async ({ doc, previousDoc, operation, req }) => {
+    const { payload } = req
+
     if (operation === 'create') {
       dispatchWebhook(
-        { ticketId: doc.id, ticketNumber: doc.ticketNumber, subject: doc.subject },
+        {
+          ticketId: doc.id,
+          id: doc.id,
+          ticketNumber: doc.ticketNumber,
+          subject: doc.subject,
+          status: doc.status,
+          priority: doc.priority,
+          category: doc.category,
+        },
         'ticket_created',
-        req.payload,
+        payload,
         slugs,
       )
+      return doc
     }
 
-    if (operation === 'update' && previousDoc?.status !== doc.status && doc.status === 'resolved') {
-      dispatchWebhook(
-        { ticketId: doc.id, ticketNumber: doc.ticketNumber, subject: doc.subject },
-        'ticket_resolved',
-        req.payload,
-        slugs,
-      )
+    if (operation === 'update' && previousDoc) {
+      if (previousDoc.status !== doc.status && doc.status === 'resolved') {
+        dispatchWebhook(
+          {
+            ticketId: doc.id,
+            id: doc.id,
+            ticketNumber: doc.ticketNumber,
+            subject: doc.subject,
+            previousStatus: previousDoc.status,
+          },
+          'ticket_resolved',
+          payload,
+          slugs,
+        )
+
+        // Invalidate client summary cache so it refreshes on next view
+        const clientId = typeof doc.client === 'object' ? doc.client?.id : doc.client
+        if (clientId) {
+          payload.update({
+            collection: 'client-summaries',
+            where: { client: { equals: clientId } },
+            data: { generatedAt: new Date(0).toISOString() }, // Force cache expiry
+            overrideAccess: true,
+          }).catch(() => { /* silent — collection might not exist yet */ })
+        }
+      }
+
+      const oldAssigned = typeof previousDoc.assignedTo === 'object' ? previousDoc.assignedTo?.id : previousDoc.assignedTo
+      const newAssigned = typeof doc.assignedTo === 'object' ? doc.assignedTo?.id : doc.assignedTo
+      if (newAssigned && oldAssigned !== newAssigned) {
+        dispatchWebhook(
+          {
+            ticketId: doc.id,
+            id: doc.id,
+            ticketNumber: doc.ticketNumber,
+            subject: doc.subject,
+            assignedTo: newAssigned,
+          },
+          'ticket_assigned',
+          payload,
+          slugs,
+        )
+      }
     }
 
     return doc
@@ -626,7 +661,10 @@ export function createTicketsCollection(slugs: CollectionSlugs, options?: {
             { label: 'Paiement partiel', value: 'partial' },
             { label: 'Payé', value: 'paid' },
           ],
-          access: { update: ({ req }) => req.user?.collection === 'users' },
+          // `slugs.users`, not the literal 'users': the users collection slug is
+          // configurable, and a hard-coded one silently opens this field to everybody
+          // on a host that renamed it.
+          access: { update: ({ req }) => req.user?.collection === slugs.users },
           admin: { width: '50%', condition: (data) => !!data?.invoice },
         },
         {
@@ -890,6 +928,7 @@ export function createTicketsCollection(slugs: CollectionSlugs, options?: {
       { name: 'totalTimeMinutes', type: 'number', defaultValue: 0, label: 'Temps total (minutes)', admin: { readOnly: true, position: 'sidebar' } },
     ],
     hooks: {
+      beforeValidate: [createRestrictClientCreate(slugs)],
       beforeChange: [
         createAssignTicketNumber(slugs, options?.ticketNumber),
         createAssignClientOnCreate(slugs),
@@ -910,7 +949,6 @@ export function createTicketsCollection(slugs: CollectionSlugs, options?: {
         createNotifyClientOnResolve(slugs),
         createTicketStatusEmail(slugs),
         createNotifyAdminOnNewTicket(slugs, notificationSlug),
-        createFireTicketWebhooks(slugs),
         createDispatchWebhookOnTicket(slugs),
         createApplyAutomationRules(slugs),
       ],

package/src/collections/TimeEntries.ts

@@ -1,45 +1,69 @@
-import type { CollectionConfig, CollectionAfterChangeHook } from 'payload'
+import type { CollectionConfig, CollectionAfterChangeHook, CollectionAfterDeleteHook } from 'payload'
+import type { Payload } from 'payload'
 import type { CollectionSlugs } from '../utils/slugs'
 
 // ─── Hooks ───────────────────────────────────────────────
 
-function createRecalculateTicketTime(slugs: CollectionSlugs): CollectionAfterChangeHook {
-  return async ({ doc, req }) => {
-    if (!doc.ticket) return
+async function recalculateTicketTime(
+  payload: Payload,
+  slugs: CollectionSlugs,
+  ticketId: number | string,
+): Promise<void> {
+  // Sum all time entries for this ticket, paginating to avoid loading all at once
+  let totalMinutes = 0
+  let page = 1
+  let hasMore = true
 
-    const { payload } = req
-    const ticketId = typeof doc.ticket === 'object' ? doc.ticket.id : doc.ticket
+  while (hasMore) {
+    const entries = await payload.find({
+      collection: slugs.timeEntries,
+      where: { ticket: { equals: ticketId } },
+      limit: 100,
+      page,
+      depth: 0,
+      overrideAccess: true,
+      select: { duration: true },
+    })
 
-    // Sum all time entries for this ticket, paginating to avoid loading all at once
-    let totalMinutes = 0
-    let page = 1
-    let hasMore = true
+    for (const entry of entries.docs) {
+      totalMinutes += ((entry.duration as number) || 0)
+    }
 
-    while (hasMore) {
-      const entries = await payload.find({
-        collection: slugs.timeEntries,
-        where: { ticket: { equals: ticketId } },
-        limit: 100,
-        page,
-        depth: 0,
-        overrideAccess: true,
-        select: { duration: true },
-      })
+    hasMore = entries.hasNextPage ?? false
+    page++
+  }
 
-      for (const entry of entries.docs) {
-        totalMinutes += ((entry.duration as number) || 0)
-      }
+  await payload.update({
+    collection: slugs.tickets,
+    id: ticketId,
+    data: { totalTimeMinutes: totalMinutes },
+    overrideAccess: true,
+  })
+}
 
-      hasMore = entries.hasNextPage ?? false
-      page++
-    }
+function createRecalculateTicketTime(slugs: CollectionSlugs): CollectionAfterChangeHook {
+  return async ({ doc, req }) => {
+    if (!doc.ticket) return
+    const ticketId = typeof doc.ticket === 'object' ? doc.ticket.id : doc.ticket
+    await recalculateTicketTime(req.payload, slugs, ticketId)
+  }
+}
 
-    await payload.update({
-      collection: slugs.tickets,
-      id: ticketId,
-      data: { totalTimeMinutes: totalMinutes },
-      overrideAccess: true,
-    })
+/**
+ * Deleting a time entry has to re-roll the ticket total too. Without this the
+ * rollup only ever grows: `tickets.totalTimeMinutes` is what the invoice endpoint
+ * and the CRM view bill on, so a removed entry stayed billed forever.
+ */
+function createRecalculateTicketTimeOnDelete(slugs: CollectionSlugs): CollectionAfterDeleteHook {
+  return async ({ doc, req }) => {
+    if (!doc?.ticket) return
+    const ticketId = typeof doc.ticket === 'object' ? doc.ticket.id : doc.ticket
+    try {
+      await recalculateTicketTime(req.payload, slugs, ticketId)
+    } catch (err) {
+      // The entry is already gone; never fail the delete on the rollup refresh.
+      console.error('[support] Failed to recalculate ticket time after delete:', err)
+    }
   }
 }
 
@@ -105,6 +129,7 @@ export function createTimeEntriesCollection(slugs: CollectionSlugs): CollectionC
     ],
     hooks: {
       afterChange: [createRecalculateTicketTime(slugs)],
+      afterDelete: [createRecalculateTicketTimeOnDelete(slugs)],
     },
     access: {
       create: ({ req }) => req.user?.collection === slugs.users,

package/src/collections/WebhookEndpoints.ts

@@ -1,5 +1,41 @@
-import type { CollectionConfig } from 'payload'
+import { APIError } from 'payload'
+import type { CollectionBeforeValidateHook, CollectionConfig } from 'payload'
 import type { CollectionSlugs } from '../utils/slugs'
+import { WEBHOOK_URL_MESSAGES, validateWebhookUrl } from '../utils/urlSafety'
+
+/**
+ * First SSRF layer: the value is fetched by the SERVER on every ticket event, so
+ * a loopback / private / link-local target (or a non-https scheme) must never be
+ * SAVED. The send path re-checks the resolved address and every redirect hop —
+ * see `utils/urlSafety.ts`.
+ *
+ * Why a collection hook rather than a field `validate`: Payload re-validates the
+ * MERGED document on every write, so a field-level guard also fires on partial
+ * updates that never mention `url`. A row saved before this guard existed (or
+ * seeded through `payload.db`, which runs no hooks) then became totally
+ * immutable — impossible to rename, to re-scope its events, even to set
+ * `active: false` — and the dispatcher's own bookkeeping write (`lastStatus: 0`,
+ * issued inside a `catch` that swallows errors) failed silently, leaving a dead
+ * endpoint looking healthy in the admin.
+ *
+ * So only a URL actually being SET or CHANGED is checked. Leaving an existing
+ * bad value alone costs nothing: the send path refuses to call it anyway.
+ */
+function createValidateWebhookUrl(): CollectionBeforeValidateHook {
+  return ({ data, operation, originalDoc }) => {
+    const incoming = (data as { url?: unknown } | undefined)?.url
+    if (incoming === undefined || incoming === null) return data
+
+    const previous = (originalDoc as { url?: unknown } | undefined)?.url
+    if (operation === 'update' && incoming === previous) return data
+
+    const result = validateWebhookUrl(incoming)
+    if (!result.ok) {
+      throw new APIError(WEBHOOK_URL_MESSAGES[result.reason || 'invalid_url'], 400)
+    }
+    return data
+  }
+}
 
 // ─── Collection factory ──────────────────────────────────
 
@@ -36,8 +72,11 @@ export function createWebhookEndpointsCollection(slugs: CollectionSlugs): Collec
         type: 'text',
         required: true,
         label: 'URL',
+        // The SSRF check lives in the collection `beforeValidate` above, NOT in a
+        // field `validate`: the latter re-runs on the merged document and would
+        // freeze every pre-existing row on any unrelated edit.
         admin: {
-          description: 'URL du webhook à appeler (POST)',
+          description: 'URL https:// du webhook à appeler (POST). Les adresses privées et loopback sont refusées.',
         },
       },
       {
@@ -91,6 +130,9 @@ export function createWebhookEndpointsCollection(slugs: CollectionSlugs): Collec
         },
       },
     ],
+    hooks: {
+      beforeValidate: [createValidateWebhookUrl()],
+    },
     timestamps: true,
   }
 }

package/src/components/TicketConversation/config.ts

@@ -1,82 +1,18 @@
 /**
- * Feature flags for the ticketing module.
- * Each feature can be enabled/disabled by the admin.
- * When disabled, the corresponding UI section is hidden entirely.
+ * Ticketing feature flags — re-export of the shared implementation.
+ *
+ * The flags used to be defined (twice, byte-for-byte) here and in
+ * `views/shared/config.ts`, each reading `localStorage` directly. The single
+ * implementation now lives in `utils/features.ts` and is backed by the server;
+ * both modules are kept as import sites so existing paths keep working.
  */
-export interface TicketingFeatures {
-  /** Time tracking: timer, manual entries, billing */
-  timeTracking: boolean
-  /** AI features: sentiment, synthesis, suggestion, rewrite */
-  ai: boolean
-/** Satisfaction surveys: CSAT rating after resolution */
-  satisfaction: boolean
-  /** Live chat integration: chat → ticket conversion */
-  chat: boolean
-  /** Email tracking: pixel tracking, open/sent status per message */
-  emailTracking: boolean
-  /** Canned responses: quick reply templates */
-  canned: boolean
-  /** Ticket merge: combine two tickets into one */
-  merge: boolean
-  /** Snooze: temporarily hide a ticket */
-  snooze: boolean
-  /** External messages: add messages received outside the system */
-  externalMessages: boolean
-  /** Client history: past tickets, projects, notes sidebar */
-  clientHistory: boolean
-  /** Activity log: audit trail of actions on the ticket */
-  activityLog: boolean
-  /** Split ticket: extract a message into a new ticket */
-  splitTicket: boolean
-  /** Scheduled replies: send a message at a future date */
-  scheduledReplies: boolean
-  /** Auto-close: automatically resolve inactive tickets */
-  autoClose: boolean
-  /** Auto-close delay in days (used by auto-close cron) */
-  autoCloseDays: number
-  /** Round-robin: distribute new tickets evenly among agents */
-  roundRobin: boolean
-}
-
-/** Default features — all enabled */
-export const DEFAULT_FEATURES: TicketingFeatures = {
-  timeTracking: true,
-  ai: true,
-satisfaction: true,
-  chat: true,
-  emailTracking: true,
-  canned: true,
-  merge: true,
-  snooze: true,
-  externalMessages: true,
-  clientHistory: true,
-  activityLog: true,
-  splitTicket: true,
-  scheduledReplies: true,
-  autoClose: true,
-  autoCloseDays: 7,
-  roundRobin: false,
-}
-
-const STORAGE_KEY = 'ticketing_features'
-
-/** Read features from localStorage (falls back to defaults) */
-export function getFeatures(): TicketingFeatures {
-  if (typeof window === 'undefined') return DEFAULT_FEATURES
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY)
-    if (stored) {
-      const parsed = JSON.parse(stored)
-      return { ...DEFAULT_FEATURES, ...parsed }
-    }
-  } catch { /* ignore */ }
-  return DEFAULT_FEATURES
-}
-
-/** Save features to localStorage */
-export function saveFeatures(features: TicketingFeatures): void {
-  if (typeof window === 'undefined') return
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(features))
-  } catch { /* ignore */ }
-}
+export {
+  DEFAULT_TICKETING_FEATURES,
+  DEFAULT_TICKETING_FEATURES as DEFAULT_FEATURES,
+  FEATURES_CACHE_KEY,
+  fetchFeatures,
+  getFeatures,
+  normalizeFeatures,
+  saveFeatures,
+} from '../../utils/features'
+export type { TicketingFeatures } from '../../utils/features'

package/src/components/TicketConversation/hooks/useFeatures.ts

@@ -0,0 +1,109 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  fetchFeatures,
+  getFeatures,
+  hasAdoptedLegacyFeatures,
+  markLegacyFeaturesAdopted,
+  readLegacyFeatures,
+  saveFeatures as persistFeatures,
+  writeFeaturesCache,
+  type TicketingFeatures,
+} from '../../../utils/features'
+
+export interface UseFeaturesResult {
+  /** Current flags — cached values on first paint, server values once loaded. */
+  features: TicketingFeatures
+  /** True until the first server round-trip settles. */
+  loading: boolean
+  /** True when the server could not be reached and cached/default values are shown. */
+  offline: boolean
+  /** Replace the flags locally without persisting (for a settings form). */
+  setFeatures: (features: TicketingFeatures) => void
+  /** Persist the flags server-side. Resolves to false when the write failed. */
+  save: (features: TicketingFeatures) => Promise<boolean>
+}
+
+/**
+ * Read the ticketing feature flags from the server, with the local cache as a
+ * fallback so a screen never blocks on the settings call.
+ *
+ * Also performs the one-shot migration of pre-2.1 installs: when this browser
+ * still holds flags in `localStorage` and the server has never had any saved,
+ * the local values are pushed up once and become the shared truth. Afterwards
+ * the server always wins and `localStorage` is only a cache.
+ */
+export function useFeatures(): UseFeaturesResult {
+  const [features, setFeatures] = useState<TicketingFeatures>(() => getFeatures())
+  const [loading, setLoading] = useState(true)
+  const [offline, setOffline] = useState(false)
+  // Migration must run once per mount at most, even under StrictMode double-effects.
+  const migrationAttempted = useRef(false)
+  // Set as soon as the caller edits the flags, so a slow first load cannot
+  // overwrite a toggle the admin just made in the settings form.
+  const dirty = useRef(false)
+
+  useEffect(() => {
+    const controller = new AbortController()
+    let cancelled = false
+
+    void (async () => {
+      const result = await fetchFeatures(controller.signal)
+      if (cancelled) return
+
+      // Fresh server + legacy browser values => adopt them instead of silently
+      // resetting the admin's configuration to the defaults.
+      if (!result.offline && !result.configured && !migrationAttempted.current && !dirty.current) {
+        migrationAttempted.current = true
+        const legacy = readLegacyFeatures()
+        if (legacy) {
+          const ok = await persistFeatures(legacy)
+          if (cancelled) return
+          if (ok) {
+            markLegacyFeaturesAdopted()
+            setFeatures(legacy)
+            setLoading(false)
+            return
+          }
+        }
+      }
+
+      if (!result.offline && !hasAdoptedLegacyFeatures()) {
+        // Server already configured (by this admin elsewhere, or another admin):
+        // the server wins, and there is nothing left to migrate here.
+        markLegacyFeaturesAdopted()
+      }
+
+      if (!dirty.current) setFeatures(result.features)
+      setOffline(result.offline)
+      setLoading(false)
+    })()
+
+    return () => {
+      cancelled = true
+      controller.abort()
+    }
+  }, [])
+
+  const setLocalFeatures = useCallback((next: TicketingFeatures) => {
+    dirty.current = true
+    setFeatures(next)
+    // Keep the cache aligned with what is on screen, so a reload before saving
+    // does not flash the previous values.
+    writeFeaturesCache(next)
+  }, [])
+
+  const save = useCallback(async (next: TicketingFeatures) => {
+    const ok = await persistFeatures(next)
+    if (ok) {
+      markLegacyFeaturesAdopted()
+      dirty.current = false
+      setFeatures(next)
+      setOffline(false)
+    }
+    return ok
+  }, [])
+
+  return { features, loading, offline, setFeatures: setLocalFeatures, save }
+}

package/src/components/TicketConversation/index.tsx

@@ -21,14 +21,14 @@ import { useTicketActions } from './hooks/useTicketActions'
 import { useReply } from './hooks/useReply'
 import { useAI } from './hooks/useAI'
 import { useDocumentIdFromUrl } from './hooks/useDocumentIdFromUrl'
-import { getFeatures, type TicketingFeatures } from './config'
+import { useFeatures } from './hooks/useFeatures'
 import { SkeletonText } from './SkeletonText'
 import { RewriteDropdown } from './RewriteDropdown'
 import '../../styles/theme.css'
 
 const TicketConversation: React.FC = () => {
   const { id } = useDocumentIdFromUrl()
-  const [features] = useState<TicketingFeatures>(() => getFeatures())
+  const { features } = useFeatures()
   const [messages, setMessages] = useState<Message[]>([])
   const [timeEntries, setTimeEntries] = useState<TimeEntry[]>([])
   const [client, setClient] = useState<ClientInfo | null>(null)