Branch restrictions — fully enforced:

CRUD rules with pattern (exact or glob like release/*), requirePR, blockForcePush, bypass user list
Enforcement via pkt-line parsing inside the git HTTP handler — before any data reaches git http-backend, each ref update is extracted and checked against stored rules
Direct push to main with requirePR: true → 403 with message; push to unprotected branches still works
Inline checkboxes in the UI update rules immediately
Branching model — stored config:

GET/PUT per repo, defaults to feature/bugfix/release/hotfix prefixes
Toggle enabled/disabled, custom prefix per type with live preview
No enforcement (naming guide only, as Bitbucket does)
Merge strategies — enforced in PR merge endpoint:

GET/PUT per repo, defaults all three allowed
Merge handler now accepts strategy: "merge"|"squash"|"rebase" in request body, checks against stored policy
Disallowed strategy → 409 with clear error; allowed strategy → merges and fires pull_request webhook
Must have at least one strategy enabled (validated server-side)
Webhooks — full delivery with HMAC:

CRUD with title, URL, secret (optional), events (push/pull_request/issue), active toggle
Test button sends live HTTP POST to the configured URL and shows status code in UI
FireWebhooks() fires asynchronously from PR merge and can be called from any handler
X-ForgeBucket-Signature-256: sha256=<hmac> header when secret is set
Last delivery status and timestamp stored on webhook record and shown in list

frontend/src/pages/RepoSettingsPage.tsx

@@ -3,6 +3,12 @@ import { useParams, Link, useNavigate, useSearchParams } from 'react-router-dom'
 import { useRepo, useUpdateRepo, useDeleteRepo, useUploadRepoAvatar } from '../api/queries/repos'
 import { useRepoMembers, useAddMember, useUpdateMember, useRemoveMember } from '../api/queries/members'
 import { useDeployKeys, useCreateDeployKey, useDeleteDeployKey, useAccessTokens, useCreateAccessToken, useDeleteAccessToken } from '../api/queries/keys'
+import {
+  useBranchProtections, useCreateBranchProtection, useUpdateBranchProtection, useDeleteBranchProtection,
+  useBranchingModel, useUpdateBranchingModel,
+  useMergeStrategies, useUpdateMergeStrategies,
+  useWebhooks, useCreateWebhook, useUpdateWebhook, useDeleteWebhook, useTestWebhook,
+} from '../api/queries/workflow'
 import { useRecentRepos } from '../hooks/useRecentRepos'
 import { useAuth } from '../contexts/AuthContext'
 import { Skeleton } from '../ui/Skeleton'
@@ -135,7 +141,12 @@ export default function RepoSettingsPage() {
         {section === 'repository-permissions' && <RepositoryPermissionsSection owner={owner} repo={repoName} />}
         {section === 'access-keys' && <AccessKeysSection owner={owner} repo={repoName} />}
         {section === 'access-tokens' && <AccessTokensSection owner={owner} repo={repoName} />}
-        {!['repository-details','repository-permissions','access-keys','access-tokens'].includes(section) && <ComingSoon sectionId={section} />}
+        {section === 'branch-restrictions' && <BranchRestrictionsSection owner={owner} repo={repoName} />}
+        {section === 'branching-model' && <BranchingModelSection owner={owner} repo={repoName} />}
+        {section === 'merge-strategies' && <MergeStrategiesSection owner={owner} repo={repoName} />}
+        {section === 'webhooks' && <WebhooksSection owner={owner} repo={repoName} />}
+        {!['repository-details','repository-permissions','access-keys','access-tokens',
+            'branch-restrictions','branching-model','merge-strategies','webhooks'].includes(section) && <ComingSoon sectionId={section} />}
       </main>
     </div>
   )
@@ -1024,6 +1035,447 @@ function AccessTokensSection({ owner, repo }: { owner: string; repo: string }) {
   )
 }
 
+// ─── Branch restrictions ──────────────────────────────────────────────────────
+
+function BranchRestrictionsSection({ owner, repo }: { owner: string; repo: string }) {
+  const { data: rules, isLoading } = useBranchProtections(owner, repo)
+  const createRule = useCreateBranchProtection(owner, repo)
+  const updateRule = useUpdateBranchProtection(owner, repo)
+  const deleteRule = useDeleteBranchProtection(owner, repo)
+
+  const [pattern, setPattern] = useState('')
+  const [requirePR, setRequirePR] = useState(true)
+  const [blockForcePush, setBlockForcePush] = useState(true)
+  const [allowedUsers, setAllowedUsers] = useState('')
+  const [error, setError] = useState('')
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    try {
+      await createRule.mutateAsync({ pattern: pattern.trim(), requirePR, blockForcePush, allowedUsers: allowedUsers.trim() })
+      setPattern('')
+    } catch (err) { setError((err as Error).message) }
+  }
+
+  return (
+    <div className="max-w-2xl px-6 py-6 space-y-6">
+      <div>
+        <h1 className="text-xl font-semibold text-[var(--c-text)]">Branch restrictions</h1>
+        <p className="text-sm text-[var(--c-muted)] mt-1">
+          Protect branches from direct pushes. Matched branches can only be updated via pull requests.
+        </p>
+      </div>
+      <div className="border-t border-[var(--c-border)]" />
+
+      {/* Rule list */}
+      <div className="border border-[var(--c-border)] rounded-lg overflow-hidden bg-[var(--c-surface)]">
+        <div className="px-4 py-3 border-b border-[var(--c-border)] bg-[var(--c-surface-raised)] flex justify-between">
+          <h2 className="text-sm font-semibold text-[var(--c-text)]">Protected branches</h2>
+          <span className="text-xs text-[var(--c-muted)]">{rules?.length ?? 0} rule{rules?.length !== 1 ? 's' : ''}</span>
+        </div>
+        {isLoading ? (
+          <div className="p-4"><Skeleton className="h-4 w-full" /></div>
+        ) : !rules?.length ? (
+          <div className="px-4 py-8 text-center text-sm text-[var(--c-muted)]">No branch protection rules yet.</div>
+        ) : (
+          <ul className="divide-y divide-[var(--c-border)]">
+            {rules.map(rule => (
+              <li key={rule.id} className="px-4 py-3 space-y-2">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="flex items-center gap-2">
+                    <svg width="14" height="14" fill="none" stroke="var(--c-brand)" strokeWidth="2" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
+                    </svg>
+                    <code className="text-sm font-mono font-semibold text-[var(--c-text)]">{rule.pattern}</code>
+                  </div>
+                  <button onClick={() => deleteRule.mutate(rule.id)} disabled={deleteRule.isPending}
+                    className="text-[var(--c-danger)] hover:text-[var(--c-danger-dark)] p-1 rounded hover:bg-[var(--c-danger-tint)] disabled:opacity-40">
+                    <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+                <div className="flex gap-4 text-xs text-[var(--c-muted)] ml-6">
+                  <label className="flex items-center gap-1.5 cursor-pointer">
+                    <input type="checkbox" checked={rule.requirePR} className="w-3 h-3 accent-[var(--c-brand)]"
+                      onChange={e => updateRule.mutate({ id: rule.id, requirePR: e.target.checked, blockForcePush: rule.blockForcePush, allowedUsers: rule.allowedUsers })} />
+                    Require PR
+                  </label>
+                  <label className="flex items-center gap-1.5 cursor-pointer">
+                    <input type="checkbox" checked={rule.blockForcePush} className="w-3 h-3 accent-[var(--c-brand)]"
+                      onChange={e => updateRule.mutate({ id: rule.id, requirePR: rule.requirePR, blockForcePush: e.target.checked, allowedUsers: rule.allowedUsers })} />
+                    Block force push
+                  </label>
+                  {rule.allowedUsers && <span>Bypass: <code className="text-[var(--c-text)]">{rule.allowedUsers}</code></span>}
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {/* Create rule form */}
+      <div className="border border-[var(--c-border)] rounded-lg overflow-hidden bg-[var(--c-surface)]">
+        <div className="px-4 py-3 border-b border-[var(--c-border)] bg-[var(--c-surface-raised)]">
+          <h2 className="text-sm font-semibold text-[var(--c-text)]">Add a rule</h2>
+        </div>
+        <form onSubmit={handleCreate} className="p-4 space-y-4">
+          <div>
+            <label className="block text-xs font-medium text-[var(--c-muted)] mb-1">Branch pattern</label>
+            <input value={pattern} onChange={e => setPattern(e.target.value)} placeholder="main, release/*, v*"
+              className="w-full border border-[var(--c-border)] rounded px-3 py-2 text-sm bg-[var(--c-surface)] text-[var(--c-text)] font-mono focus:outline-none focus:border-[var(--c-brand-focus)] focus:ring-1 focus:ring-[var(--c-brand-focus)]" />
+            <p className="text-xs text-[var(--c-muted)] mt-1">Glob patterns supported: <code className="font-mono">release/*</code> matches all release branches.</p>
+          </div>
+          <div className="flex gap-6">
+            <label className="flex items-center gap-2 cursor-pointer text-sm text-[var(--c-text)]">
+              <input type="checkbox" checked={requirePR} onChange={e => setRequirePR(e.target.checked)} className="w-4 h-4 accent-[var(--c-brand)]" />
+              Require pull request
+            </label>
+            <label className="flex items-center gap-2 cursor-pointer text-sm text-[var(--c-text)]">
+              <input type="checkbox" checked={blockForcePush} onChange={e => setBlockForcePush(e.target.checked)} className="w-4 h-4 accent-[var(--c-brand)]" />
+              Block force push
+            </label>
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-[var(--c-muted)] mb-1">Bypass list <span className="text-[var(--c-subtle)]">(optional — comma-separated usernames)</span></label>
+            <input value={allowedUsers} onChange={e => setAllowedUsers(e.target.value)} placeholder="alice, bob"
+              className="w-full border border-[var(--c-border)] rounded px-3 py-2 text-sm bg-[var(--c-surface)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)]" />
+          </div>
+          {error && <p className="text-xs text-[var(--c-danger)]">{error}</p>}
+          <button type="submit" disabled={createRule.isPending || !pattern.trim()}
+            className="px-4 py-2 rounded bg-[var(--c-brand)] text-white text-sm font-medium hover:bg-[var(--c-brand-hover)] disabled:opacity-50">
+            {createRule.isPending ? 'Adding…' : 'Add rule'}
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+// ─── Branching model ──────────────────────────────────────────────────────────
+
+function BranchingModelSection({ owner, repo }: { owner: string; repo: string }) {
+  const { data, isLoading } = useBranchingModel(owner, repo)
+  const updateModel = useUpdateBranchingModel(owner, repo)
+  const [form, setForm] = useState({ enabled: false, featurePrefix: 'feature/', bugfixPrefix: 'bugfix/', releasePrefix: 'release/', hotfixPrefix: 'hotfix/' })
+  const [saved, setSaved] = useState(false)
+
+  useEffect(() => { if (data) setForm(data) }, [data])
+
+  async function handleSave(e: React.FormEvent) {
+    e.preventDefault()
+    await updateModel.mutateAsync(form)
+    setSaved(true)
+    setTimeout(() => setSaved(false), 3000)
+  }
+
+  const branches = [
+    { key: 'featurePrefix' as const, label: 'Feature', example: 'feature/my-feature', color: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' },
+    { key: 'bugfixPrefix' as const, label: 'Bugfix', example: 'bugfix/fix-login', color: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300' },
+    { key: 'releasePrefix' as const, label: 'Release', example: 'release/1.0.0', color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300' },
+    { key: 'hotfixPrefix' as const, label: 'Hotfix', example: 'hotfix/critical-fix', color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300' },
+  ]
+
+  return (
+    <div className="max-w-2xl px-6 py-6 space-y-6">
+      <div>
+        <h1 className="text-xl font-semibold text-[var(--c-text)]">Branching model</h1>
+        <p className="text-sm text-[var(--c-muted)] mt-1">Define naming conventions for branch types to keep your team consistent.</p>
+      </div>
+      <div className="border-t border-[var(--c-border)]" />
+
+      {isLoading ? <Skeleton className="h-48 w-full" /> : (
+        <form onSubmit={handleSave} className="space-y-5">
+          <label className="flex items-center gap-3 p-4 border border-[var(--c-border)] rounded-lg cursor-pointer bg-[var(--c-surface)] hover:bg-[var(--c-surface-raised)]">
+            <input type="checkbox" checked={form.enabled} onChange={e => setForm(f => ({ ...f, enabled: e.target.checked }))}
+              className="w-4 h-4 accent-[var(--c-brand)]" />
+            <div>
+              <span className="text-sm font-medium text-[var(--c-text)]">Enable branching model</span>
+              <p className="text-xs text-[var(--c-muted)] mt-0.5">Apply the naming conventions below to this repository.</p>
+            </div>
+          </label>
+
+          <div className={`space-y-3 transition-opacity ${form.enabled ? '' : 'opacity-40 pointer-events-none'}`}>
+            {branches.map(b => (
+              <div key={b.key} className="flex items-center gap-3 p-3 border border-[var(--c-border)] rounded-lg bg-[var(--c-surface)]">
+                <span className={`text-[10px] font-bold uppercase tracking-wide px-2 py-1 rounded w-20 text-center shrink-0 ${b.color}`}>{b.label}</span>
+                <input value={form[b.key]} onChange={e => setForm(f => ({ ...f, [b.key]: e.target.value }))}
+                  className="flex-1 border border-[var(--c-border)] rounded px-3 py-1.5 text-sm font-mono bg-[var(--c-surface)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)]" />
+                <span className="text-xs text-[var(--c-muted)] font-mono hidden sm:block">{form[b.key] || '…'}my-branch</span>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex items-center gap-3 pt-2 border-t border-[var(--c-border)]">
+            {saved && <span className="text-xs text-[var(--c-success)] font-medium">Saved!</span>}
+            <button type="submit" disabled={updateModel.isPending}
+              className="px-4 py-2 rounded bg-[var(--c-brand)] text-white text-sm font-medium hover:bg-[var(--c-brand-hover)] disabled:opacity-50 ml-auto">
+              {updateModel.isPending ? 'Saving…' : 'Save changes'}
+            </button>
+          </div>
+        </form>
+      )}
+    </div>
+  )
+}
+
+// ─── Merge strategies ─────────────────────────────────────────────────────────
+
+function MergeStrategiesSection({ owner, repo }: { owner: string; repo: string }) {
+  const { data, isLoading } = useMergeStrategies(owner, repo)
+  const updateStrategies = useUpdateMergeStrategies(owner, repo)
+  const [form, setForm] = useState({ allowMergeCommit: true, allowSquash: true, allowRebase: true })
+  const [saved, setSaved] = useState(false)
+  const [error, setError] = useState('')
+
+  useEffect(() => { if (data) setForm(data) }, [data])
+
+  async function handleSave(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    try {
+      await updateStrategies.mutateAsync(form)
+      setSaved(true)
+      setTimeout(() => setSaved(false), 3000)
+    } catch (err) { setError((err as Error).message) }
+  }
+
+  const strategies = [
+    { key: 'allowMergeCommit' as const, label: 'Merge commit', description: 'Combines all commits from the branch into a merge commit on the target branch.', icon: 'M' },
+    { key: 'allowSquash' as const, label: 'Squash', description: 'Squashes all branch commits into a single commit on the target branch.', icon: 'S' },
+    { key: 'allowRebase' as const, label: 'Rebase', description: 'Replays each branch commit on top of the target branch without a merge commit.', icon: 'R' },
+  ]
+
+  return (
+    <div className="max-w-2xl px-6 py-6 space-y-6">
+      <div>
+        <h1 className="text-xl font-semibold text-[var(--c-text)]">Merge strategies</h1>
+        <p className="text-sm text-[var(--c-muted)] mt-1">Control which merge strategies collaborators can use when closing pull requests.</p>
+      </div>
+      <div className="border-t border-[var(--c-border)]" />
+
+      {isLoading ? <Skeleton className="h-48 w-full" /> : (
+        <form onSubmit={handleSave} className="space-y-4">
+          {strategies.map(s => (
+            <label key={s.key} className="flex items-start gap-4 p-4 border border-[var(--c-border)] rounded-lg cursor-pointer hover:bg-[var(--c-surface-raised)] bg-[var(--c-surface)]">
+              <input type="checkbox" checked={form[s.key]} onChange={e => setForm(f => ({ ...f, [s.key]: e.target.checked }))}
+                className="mt-0.5 w-4 h-4 accent-[var(--c-brand)]" />
+              <div className="flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="w-6 h-6 rounded bg-[var(--c-brand-tint)] text-[var(--c-brand)] text-xs font-bold flex items-center justify-center">{s.icon}</span>
+                  <span className="text-sm font-medium text-[var(--c-text)]">{s.label}</span>
+                </div>
+                <p className="text-xs text-[var(--c-muted)] mt-1">{s.description}</p>
+              </div>
+            </label>
+          ))}
+
+          {error && <p className="text-xs text-[var(--c-danger)]">{error}</p>}
+          <div className="flex items-center gap-3 pt-2 border-t border-[var(--c-border)]">
+            {saved && <span className="text-xs text-[var(--c-success)] font-medium">Saved!</span>}
+            <button type="submit" disabled={updateStrategies.isPending}
+              className="px-4 py-2 rounded bg-[var(--c-brand)] text-white text-sm font-medium hover:bg-[var(--c-brand-hover)] disabled:opacity-50 ml-auto">
+              {updateStrategies.isPending ? 'Saving…' : 'Save changes'}
+            </button>
+          </div>
+        </form>
+      )}
+    </div>
+  )
+}
+
+// ─── Webhooks ─────────────────────────────────────────────────────────────────
+
+const ALL_EVENTS = ['push', 'pull_request', 'issue']
+
+function WebhooksSection({ owner, repo }: { owner: string; repo: string }) {
+  const { data: hooks, isLoading } = useWebhooks(owner, repo)
+  const createHook = useCreateWebhook(owner, repo)
+  const updateHook = useUpdateWebhook(owner, repo)
+  const deleteHook = useDeleteWebhook(owner, repo)
+  const testHook = useTestWebhook(owner, repo)
+
+  const [showForm, setShowForm] = useState(false)
+  const [editId, setEditId] = useState<number | null>(null)
+  const [title, setTitle] = useState('')
+  const [url, setUrl] = useState('')
+  const [secret, setSecret] = useState('')
+  const [events, setEvents] = useState<string[]>(['push'])
+  const [active, setActive] = useState(true)
+  const [formError, setFormError] = useState('')
+  const [testResult, setTestResult] = useState<Record<number, { ok: boolean; status: number }>>({})
+
+  function resetForm() {
+    setTitle(''); setUrl(''); setSecret(''); setEvents(['push']); setActive(true)
+    setFormError(''); setEditId(null); setShowForm(false)
+  }
+
+  function startEdit(wh: { id: number; title: string; url: string; events: string; active: boolean }) {
+    setEditId(wh.id); setTitle(wh.title); setUrl(wh.url)
+    setEvents(wh.events.split(',')); setActive(wh.active); setSecret('')
+    setShowForm(true)
+  }
+
+  function toggleEvent(ev: string) {
+    setEvents(prev => prev.includes(ev) ? prev.filter(e => e !== ev) : [...prev, ev])
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setFormError('')
+    if (!url.trim()) return setFormError('URL is required')
+    if (events.length === 0) return setFormError('Select at least one event')
+    try {
+      const payload = { title: title.trim(), url: url.trim(), secret: secret || undefined, events: events.join(','), active }
+      if (editId) {
+        await updateHook.mutateAsync({ id: editId, ...payload })
+      } else {
+        await createHook.mutateAsync(payload)
+      }
+      resetForm()
+    } catch (err) { setFormError((err as Error).message) }
+  }
+
+  async function handleTest(id: number) {
+    const result = await testHook.mutateAsync(id)
+    setTestResult(prev => ({ ...prev, [id]: result }))
+    setTimeout(() => setTestResult(prev => { const n = { ...prev }; delete n[id]; return n }), 5000)
+  }
+
+  function statusBadge(status: number) {
+    if (status === 0) return <span className="text-[10px] text-[var(--c-muted)]">Never delivered</span>
+    const ok = status >= 200 && status < 300
+    return (
+      <span className={`text-[10px] font-semibold px-1.5 py-0.5 rounded-full ${ok ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' : 'bg-[var(--c-danger-tint)] text-[var(--c-danger)]'}`}>
+        {status}
+      </span>
+    )
+  }
+
+  return (
+    <div className="max-w-2xl px-6 py-6 space-y-6">
+      <div className="flex items-start justify-between">
+        <div>
+          <h1 className="text-xl font-semibold text-[var(--c-text)]">Webhooks</h1>
+          <p className="text-sm text-[var(--c-muted)] mt-1">Send HTTP POST notifications to external services when events occur.</p>
+        </div>
+        {!showForm && (
+          <button onClick={() => setShowForm(true)}
+            className="px-3 py-1.5 rounded bg-[var(--c-brand)] text-white text-sm font-medium hover:bg-[var(--c-brand-hover)] shrink-0">
+            Add webhook
+          </button>
+        )}
+      </div>
+      <div className="border-t border-[var(--c-border)]" />
+
+      {/* Webhook list */}
+      <div className="border border-[var(--c-border)] rounded-lg overflow-hidden bg-[var(--c-surface)]">
+        {isLoading ? (
+          <div className="p-4 space-y-3">{[1,2].map(i => <Skeleton key={i} className="h-10 w-full" />)}</div>
+        ) : !hooks?.length ? (
+          <div className="px-4 py-8 text-center text-sm text-[var(--c-muted)]">No webhooks yet.</div>
+        ) : (
+          <ul className="divide-y divide-[var(--c-border)]">
+            {hooks.map(wh => (
+              <li key={wh.id} className="px-4 py-3 space-y-2">
+                <div className="flex items-center gap-3">
+                  <div className={`w-2 h-2 rounded-full shrink-0 ${wh.active ? 'bg-[var(--c-success)]' : 'bg-[var(--c-subtle)]'}`} />
+                  <div className="flex-1 min-w-0">
+                    {wh.title && <p className="text-sm font-medium text-[var(--c-text)]">{wh.title}</p>}
+                    <p className="text-xs text-[var(--c-muted)] font-mono truncate">{wh.url}</p>
+                  </div>
+                  {statusBadge(wh.lastStatus)}
+                  {testResult[wh.id] && (
+                    <span className={`text-[10px] font-semibold ${testResult[wh.id].ok ? 'text-[var(--c-success)]' : 'text-[var(--c-danger)]'}`}>
+                      Test: {testResult[wh.id].status || 'failed'}
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2 ml-5">
+                  <div className="flex gap-1 flex-wrap">
+                    {wh.events.split(',').map(ev => (
+                      <span key={ev} className="text-[9px] font-semibold uppercase px-1.5 py-0.5 rounded bg-[var(--c-surface-muted)] text-[var(--c-muted)]">{ev}</span>
+                    ))}
+                  </div>
+                  <div className="ml-auto flex items-center gap-1">
+                    <button onClick={() => handleTest(wh.id)} disabled={testHook.isPending}
+                      className="text-xs text-[var(--c-muted)] hover:text-[var(--c-text)] px-2 py-1 rounded hover:bg-[var(--c-surface-muted)] disabled:opacity-40">
+                      Test
+                    </button>
+                    <button onClick={() => startEdit(wh)}
+                      className="text-xs text-[var(--c-muted)] hover:text-[var(--c-text)] px-2 py-1 rounded hover:bg-[var(--c-surface-muted)]">
+                      Edit
+                    </button>
+                    <button onClick={() => deleteHook.mutate(wh.id)} disabled={deleteHook.isPending}
+                      className="text-[var(--c-danger)] hover:text-[var(--c-danger-dark)] p-1 rounded hover:bg-[var(--c-danger-tint)] disabled:opacity-40">
+                      <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {/* Add / Edit form */}
+      {showForm && (
+        <div className="border border-[var(--c-brand-focus)] rounded-lg overflow-hidden bg-[var(--c-surface)]">
+          <div className="px-4 py-3 border-b border-[var(--c-border)] bg-[var(--c-surface-raised)]">
+            <h2 className="text-sm font-semibold text-[var(--c-text)]">{editId ? 'Edit webhook' : 'Add webhook'}</h2>
+          </div>
+          <form onSubmit={handleSubmit} className="p-4 space-y-4">
+            <div>
+              <label className="block text-xs font-medium text-[var(--c-muted)] mb-1">Title <span className="text-[var(--c-subtle)]">(optional)</span></label>
+              <input value={title} onChange={e => setTitle(e.target.value)} placeholder="e.g. Slack notifications"
+                className="w-full border border-[var(--c-border)] rounded px-3 py-2 text-sm bg-[var(--c-surface)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)]" />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-[var(--c-muted)] mb-1">Payload URL <span className="text-[var(--c-danger)]">*</span></label>
+              <input value={url} onChange={e => setUrl(e.target.value)} placeholder="https://example.com/webhook"
+                className="w-full border border-[var(--c-border)] rounded px-3 py-2 text-sm bg-[var(--c-surface)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)]" />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-[var(--c-muted)] mb-1">Secret <span className="text-[var(--c-subtle)]">(optional — used for HMAC-SHA256 signature)</span></label>
+              <input type="password" value={secret} onChange={e => setSecret(e.target.value)} placeholder={editId ? 'Leave blank to keep existing' : ''}
+                className="w-full border border-[var(--c-border)] rounded px-3 py-2 text-sm bg-[var(--c-surface)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)]" />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-[var(--c-muted)] mb-2">Events</label>
+              <div className="flex gap-3 flex-wrap">
+                {ALL_EVENTS.map(ev => (
+                  <label key={ev} className="flex items-center gap-1.5 cursor-pointer text-sm text-[var(--c-text)]">
+                    <input type="checkbox" checked={events.includes(ev)} onChange={() => toggleEvent(ev)} className="w-4 h-4 accent-[var(--c-brand)]" />
+                    {ev}
+                  </label>
+                ))}
+              </div>
+            </div>
+            <label className="flex items-center gap-2 cursor-pointer text-sm text-[var(--c-text)]">
+              <input type="checkbox" checked={active} onChange={e => setActive(e.target.checked)} className="w-4 h-4 accent-[var(--c-brand)]" />
+              Active
+            </label>
+            {formError && <p className="text-xs text-[var(--c-danger)]">{formError}</p>}
+            <div className="flex gap-2">
+              <button type="submit" disabled={createHook.isPending || updateHook.isPending}
+                className="px-4 py-2 rounded bg-[var(--c-brand)] text-white text-sm font-medium hover:bg-[var(--c-brand-hover)] disabled:opacity-50">
+                {(createHook.isPending || updateHook.isPending) ? 'Saving…' : editId ? 'Update webhook' : 'Add webhook'}
+              </button>
+              <button type="button" onClick={resetForm}
+                className="px-4 py-2 rounded border border-[var(--c-border)] text-sm text-[var(--c-text)] hover:bg-[var(--c-surface-muted)]">
+                Cancel
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+    </div>
+  )
+}
+
 // ─── Coming soon ──────────────────────────────────────────────────────────────
 
 function ComingSoon({ sectionId }: { sectionId: SectionId }) {