feat: webhooks — outbound HMAC-signed dispatch + admin UI · palette icon

Schema (migrate.ts + db/schema.ts)
  - vaultbase_webhooks: id, name, url, events (JSON), secret, enabled,
    retry_max, retry_backoff (exponential|fixed), retry_delay_ms,
    timeout_ms, custom_headers (JSON map), created_at, updated_at
  - vaultbase_webhook_deliveries: append-only delivery log with status
    (pending|succeeded|failed|dead), attempt counter, response code +
    body (truncated 2 KB), error msg, scheduled_at, delivered_at
  - indexes on (status, scheduled_at) for hot dispatcher claim path

Core dispatcher (core/webhooks.ts)
  - dispatchEvent({ event, data }) inserts a delivery row per matching
    webhook (events match `*`, `coll.*`, or exact event string)
  - 2 s tick claims due pending rows, POSTs them with:
      X-Vaultbase-Event       <event>
      X-Vaultbase-Delivery    <delivery-id>
      X-Vaultbase-Timestamp   <unix-seconds>
      X-Vaultbase-Signature   sha256=<hmac of "ts.body" using webhook.secret>
  - Outbound URL passes through the existing egress CIDR filter so a
    webhook can't be (ab)used for SSRF probes against private RFC1918
    space — same envelope as helpers.http
  - Failures: bump attempt + reschedule with exponential or fixed
    backoff until retry_max → status=dead

Wired
  - Record CRUD in core/records.ts fires `<collection>.create/update/delete`
    after the existing realtime broadcast (fire-and-forget; never blocks
    the response)
  - server.ts boots startWebhookDispatcher alongside other schedulers
  - ctx.helpers.webhooks.dispatch(event, data) lets hooks/routes/cron
    emit custom events (e.g. "billing.invoice_paid")

Admin API (api/webhooks.ts)
  - GET/POST/PATCH/DELETE /api/admin/webhooks
  - GET /api/admin/webhooks/:id/deliveries (paginated + since filter)
  - POST /api/admin/webhooks/:id/test fires a synthetic event scoped
    only to that webhook (event-list temporarily augmented during the
    dispatch call so other webhooks don't receive the test traffic)

Admin UI (admin/src/pages/Webhooks.tsx + sidebar entry under Logic)
  - Two-pane editor: list left, full editor + recent deliveries right
  - Event chips, custom headers editor, retry config, timeout
  - HMAC secret with regenerate button + receiver verification snippet
  - Delivery row click opens detail drawer (payload, response body,
    error, attempts, timestamps)
  - Fire-test button enqueues a synthetic delivery to validate wiring

Misc
  - palette icon added to Icon.tsx for the Theme Settings tab (was
    pointing at the non-existent "fill" icon)

Bumps version 0.4.0 → 0.5.0 (minor — new public surface).

Author: khalidsheet

admin/src/App.tsx

@@ -23,6 +23,7 @@ const Records = lazy(() => import("./pages/Records.tsx"));
 const CollectionEdit = lazy(() => import("./pages/CollectionEdit.tsx"));
 const HooksPage = lazy(() => import("./pages/Hooks.tsx"));
 const FlagsPage = lazy(() => import("./pages/Flags.tsx"));
+const WebhooksPage = lazy(() => import("./pages/Webhooks.tsx"));
 
 function RequireAuth({ children }: { children: React.ReactNode }) {
   const isAuthed = useAuth((s) => s.isAuthed);
@@ -131,6 +132,7 @@ export default function App() {
             <Route path="users" element={<Superusers />} />
             <Route path="hooks" element={<HooksPage />} />
             <Route path="flags" element={<FlagsPage />} />
+            <Route path="webhooks" element={<WebhooksPage />} />
             <Route path="*" element={<NotFound />} />
           </Route>
           <Route path="*" element={<Navigate to="/_/" replace />} />

admin/src/components/Icon.tsx

@@ -51,6 +51,7 @@ const Icon: React.FC<IconProps> = ({ name, size = 14, stroke = 1.5, style, class
     activity: <><path d="M22 12h-4l-3 9-6-18-3 9H2"/></>,
     server: <><rect x="3" y="3" width="18" height="7" rx="1"/><rect x="3" y="14" width="18" height="7" rx="1"/><circle cx="7" cy="6.5" r="0.5" fill="currentColor"/><circle cx="7" cy="17.5" r="0.5" fill="currentColor"/></>,
     shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></>,
+    palette: <><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></>,
     alert: <><path d="M12 2L2 20h20z"/><path d="M12 9v5M12 17v0"/></>,
     zap: <><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></>,
     globe: <><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></>,

admin/src/components/Shell.tsx

@@ -22,6 +22,7 @@ const SECTIONS: NavSection[] = [
     items: [
       { to: "/_/hooks",        label: "Hooks",        icon: "webhook" },
       { to: "/_/flags",        label: "Feature flags", icon: "zap" },
+      { to: "/_/webhooks",     label: "Webhooks",     icon: "upload" },
     ],
   },
   {
@@ -46,7 +47,7 @@ export const Sidebar: React.FC = () => {
           <VaultbaseLogo size={22} />
         </span>
         <div className="sb-brand-name">vaultbase</div>
-        <div className="sb-brand-version mono">v0.4.0</div>
+        <div className="sb-brand-version mono">v0.5.0</div>
       </div>
       {SECTIONS.map((sec) => (
         <div className="sb-section" key={sec.label}>

admin/src/pages/Settings.tsx

@@ -39,7 +39,7 @@ interface SettingsTab {
 
 const SETTINGS_TABS: SettingsTab[] = [
   { id: "application", label: "Application", icon: "settings", subtitle: "runtime configuration" },
-  { id: "theme",       label: "Theme",       icon: "fill",     subtitle: "admin UI accent + surface colors" },
+  { id: "theme",       label: "Theme",       icon: "palette",  subtitle: "admin UI accent + surface colors" },
   { id: "rate-limit",  label: "Rate limiting", icon: "shield", subtitle: "per-IP token bucket" },
   { id: "egress",      label: "Hook egress",   icon: "globe",  subtitle: "outbound HTTP allow / deny CIDRs" },
   { id: "cors",        label: "CORS",          icon: "globe",  subtitle: "cross-origin allow-list for the HTTP API" },