refactor(webhooks): add proper typing to webhook API and frontend components

- Add OpenAPI response decorators to WebhooksAdminController
- Regenerate backend client types
- Use @shipsec/shared types (WebhookConfiguration, WebhookDelivery) in frontend API service
- Fix type mismatches and remove 'any' casts in WebhookEditorPage

Signed-off-by: betterclever <[email protected]>

Author: betterclever

backend/src/webhooks/webhooks.admin.controller.ts

@@ -35,18 +35,21 @@ export class WebhooksAdminController {
 
   @Get()
   @ApiOperation({ summary: 'List all webhook configurations' })
+  @ApiOkResponse({ type: [WebhookConfigurationResponseDto] })
   async list(@CurrentAuth() auth: AuthContext) {
     return this.webhooksService.list(auth);
   }
 
   @Get(':id')
   @ApiOperation({ summary: 'Get a webhook configuration by ID' })
+  @ApiOkResponse({ type: WebhookConfigurationResponseDto })
   async get(@CurrentAuth() auth: AuthContext, @Param('id') id: string) {
     return this.webhooksService.get(auth, id);
   }
 
   @Post()
   @ApiOperation({ summary: 'Create a new webhook configuration' })
+  @ApiOkResponse({ type: WebhookConfigurationResponseDto })
   async create(
     @CurrentAuth() auth: AuthContext,
     @Body(new ZodValidationPipe(CreateWebhookRequestDto.schema)) dto: CreateWebhookRequestDto,
@@ -56,6 +59,7 @@ export class WebhooksAdminController {
 
   @Put(':id')
   @ApiOperation({ summary: 'Update a webhook configuration' })
+  @ApiOkResponse({ type: WebhookConfigurationResponseDto })
   async update(
     @CurrentAuth() auth: AuthContext,
     @Param('id') id: string,
@@ -73,12 +77,14 @@ export class WebhooksAdminController {
 
   @Post(':id/regenerate-path')
   @ApiOperation({ summary: 'Regenerate webhook path (creates new URL)' })
+  @ApiOkResponse({ type: RegeneratePathResponseDto })
   async regeneratePath(@CurrentAuth() auth: AuthContext, @Param('id') id: string) {
     return this.webhooksService.regeneratePath(auth, id);
   }
 
   @Get(':id/url')
   @ApiOperation({ summary: 'Get the webhook URL for a configuration' })
+  @ApiOkResponse({ type: GetWebhookUrlResponseDto })
   async getUrl(@CurrentAuth() auth: AuthContext, @Param('id') id: string) {
     return this.webhooksService.getUrl(auth, id);
   }
@@ -95,12 +101,14 @@ export class WebhooksAdminController {
 
   @Get(':id/deliveries')
   @ApiOperation({ summary: 'List delivery history for a webhook' })
+  @ApiOkResponse({ type: [WebhookDeliveryResponseDto] })
   async listDeliveries(@CurrentAuth() auth: AuthContext, @Param('id') id: string) {
     return this.webhooksService.listDeliveries(auth, id);
   }
 
   @Get(':id/deliveries/:deliveryId')
   @ApiOperation({ summary: 'Get details of a specific delivery' })
+  @ApiOkResponse({ type: WebhookDeliveryResponseDto })
   async getDelivery(@CurrentAuth() auth: AuthContext, @Param('deliveryId') deliveryId: string) {
     return this.webhooksService.getDelivery(auth, deliveryId);
   }

frontend/src/pages/WebhookEditorPage.tsx

@@ -25,7 +25,7 @@ import { useToast } from '@/components/ui/use-toast'
 import Editor, { loader } from '@monaco-editor/react'
 import { cn } from '@/lib/utils'
 import { SaveButton } from '@/components/ui/save-button'
-import type { WebhookConfiguration } from '@shipsec/shared'
+import type { WebhookConfiguration, WebhookDelivery, WebhookInputDefinition } from '@shipsec/shared'
 
 // Configure Monaco
 loader.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs' } })
@@ -35,13 +35,7 @@ interface WebhookFormState {
     name: string
     description: string
     parsingScript: string
-    expectedInputs: Array<{
-        id: string
-        label: string
-        type: string
-        required: boolean
-        description?: string
-    }>
+    expectedInputs: WebhookInputDefinition[]
 }
 
 const DEFAULT_PARSING_SCRIPT = `// Transform the incoming webhook payload into workflow inputs
@@ -125,7 +119,7 @@ export function WebhookEditorPage() {
     // Resources
     const [workflows, setWorkflows] = useState<Array<{ id: string; name: string }>>([])
     const [workflowRuntimeInputs, setWorkflowRuntimeInputs] = useState<Array<any>>([])
-    const [deliveries, setDeliveries] = useState<Array<any>>([])
+    const [deliveries, setDeliveries] = useState<WebhookDelivery[]>([])
     const [isLoadingDeliveries, setIsLoadingDeliveries] = useState(false)
 
     // Load Initial Data
@@ -180,15 +174,15 @@ export function WebhookEditorPage() {
 
         api.workflows.getRuntimeInputs(form.workflowId)
             .then(res => {
-                const inputs = res.inputs || []
-                setWorkflowRuntimeInputs(inputs)
+                const runtimeInputs = res.inputs || []
+                setWorkflowRuntimeInputs(runtimeInputs)
 
                 // Automatically populate expectedInputs from workflow runtime inputs
                 // This ensures the backend validation passes
-                const mappedInputs = inputs.map((input: any) => ({
+                const mappedInputs: WebhookInputDefinition[] = runtimeInputs.map((input: any) => ({
                     id: input.id,
                     label: input.label || input.id,
-                    type: input.type || 'string',
+                    type: (input.type === 'string' ? 'text' : input.type) || 'text',
                     required: input.required !== false,
                     description: input.description || '',
                 }))
@@ -202,7 +196,7 @@ export function WebhookEditorPage() {
         if (isNew || !id) return
         setIsLoadingDeliveries(true)
         api.webhooks.listDeliveries(id)
-            .then(data => setDeliveries((data as any) || []))
+            .then(data => setDeliveries(data || []))
             .catch(console.error)
             .finally(() => setIsLoadingDeliveries(false))
     }, [id, isNew])
@@ -540,7 +534,7 @@ export function WebhookEditorPage() {
                                     <div>Timestamp</div>
                                     <div className="text-right">Action</div>
                                 </div>
-                                {deliveries.map((delivery: any) => (
+                                {deliveries.map((delivery) => (
                                     <div key={delivery.id} className="grid grid-cols-4 gap-4 p-4 border-b last:border-0 items-center text-sm">
                                         <div className="flex items-center gap-2">
                                             {delivery.status === 'delivered' ?

frontend/src/services/api.ts

@@ -4,6 +4,9 @@ import type {
   RunArtifactsResponse,
   WorkflowSchedule,
   ScheduleStatus,
+  WebhookConfiguration,
+  WebhookDelivery,
+  TestWebhookScriptResponse,
 } from '@shipsec/shared'
 import { useAuthStore } from '@/store/authStore'
 import { getFreshClerkToken } from '@/utils/clerk-token'
@@ -795,72 +798,49 @@ export const api = {
   },
 
   webhooks: {
-    list: async () => {
+    list: async (): Promise<WebhookConfiguration[]> => {
       const response = await apiClient.listWebhookConfigurations()
       if (response.error) throw new Error('Failed to fetch webhook configurations')
-      return response.data || []
+      return (response.data || []) as WebhookConfiguration[]
     },
 
-    get: async (id: string) => {
+    get: async (id: string): Promise<WebhookConfiguration> => {
       const response = await apiClient.getWebhookConfiguration(id)
       if (response.error || !response.data) throw new Error('Failed to fetch webhook configuration')
-      return response.data
+      return response.data as WebhookConfiguration
     },
 
-    create: async (payload: {
-      workflowId: string
-      name: string
-      description?: string
-      parsingScript: string
-      expectedInputs: Array<{
-        id: string
-        label: string
-        type: string
-        required: boolean
-        description?: string
-      }>
-    }) => {
+    create: async (payload: Partial<WebhookConfiguration>): Promise<WebhookConfiguration> => {
       const response = await apiClient.createWebhookConfiguration(payload as any)
       if (response.error) throw new Error('Failed to create webhook configuration')
-      return response.data
+      return response.data as WebhookConfiguration
     },
 
-    update: async (id: string, payload: {
-      name?: string
-      description?: string
-      parsingScript?: string
-      expectedInputs?: Array<{
-        id: string
-        label: string
-        type: string
-        required: boolean
-        description?: string
-      }>
-    }) => {
+    update: async (id: string, payload: Partial<WebhookConfiguration>): Promise<WebhookConfiguration> => {
       const response = await apiClient.updateWebhookConfiguration(id, payload as any)
       if (response.error) throw new Error('Failed to update webhook configuration')
-      return response.data
+      return response.data as WebhookConfiguration
     },
 
     delete: async (id: string) => {
       const response = await apiClient.deleteWebhookConfiguration(id)
       if (response.error) throw new Error('Failed to delete webhook configuration')
     },
 
-    testScript: async (payload: { script: string; payload: any; headers: Record<string, string> }) => {
+    testScript: async (payload: { script: string; payload: any; headers: Record<string, string> }): Promise<TestWebhookScriptResponse> => {
       const response = await apiClient.testWebhookScript({
         parsingScript: payload.script,
         testPayload: payload.payload,
         testHeaders: payload.headers,
       })
       if (response.error) throw new Error('Failed to test webhook script')
-      return response.data
+      return response.data as TestWebhookScriptResponse
     },
 
-    listDeliveries: async (id: string) => {
+    listDeliveries: async (id: string): Promise<WebhookDelivery[]> => {
       const response = await apiClient.listDeliveries(id)
       if (response.error) throw new Error('Failed to fetch webhook deliveries')
-      return response.data
+      return (response.data || []) as WebhookDelivery[]
     },
   },