Skip to content

feat: Custom Smart Webhooks with Transformation Scripts #195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
betterclever merged 19 commits into from
Jan 2, 2026
Merged

feat: Custom Smart Webhooks with Transformation Scripts #195

betterclever merged 19 commits into from
Jan 2, 2026

Conversation

@betterclever
Copy link
Contributor

@betterclever betterclever commented Jan 2, 2026

Description

This PR introduces Smart Webhooks, a powerful new feature that allows users to create custom HTTP endpoints for triggering workflows. Unlike standard webhooks that require a specific payload format, Smart Webhooks can receive any raw JSON payload (e.g., from GitHub, Slack, or custom internal services) and transform it into workflow-compatible inputs using a built-in TypeScript parsing script.

Key Features

  • Custom Transformation Scripts: Use a Monaco-powered TypeScript editor to write logic that maps arbitrary incoming payloads and headers to workflow parameters.
  • Workflow Sidebar Integration: Manage webhooks directly from the workflow canvas. Click the entrypoint node's Webhooks button to open a dedicated sidebar.
  • Delivery History: Track every incoming request, showing the raw payload, the resulting transformed inputs, and the associated workflow run status.
  • Integration Code Snippets: Automatically generates cURL, TypeScript, Python, and Go snippets. Custom webhooks are optimized for "push-only" scenarios (like GitHub) by removing API key requirements and adding helpful documentation comments.
  • Stateful Navigation: Smooth transitions between the workflow designer and the webhook editor, maintaining the sidebar state for better UX.

Use Cases

  • GitHub/GitLab Integration: Receive a push event payload and parse the branch name or commit hash to trigger a security scan workflow.
  • Third-Party Service Integrations: Easily connect tools like Sentry, PagerDuty, or Slack by writing a small transformation script to extract relevant alert data.
  • Internal Microservices: Create "drop-in" endpoints that accept your existing internal service payloads without needing to modify the caller's code.

Technical Implementation

  • Frontend: New `WorkflowWebhooksSidebar` and `WebhookEditorPage` components.
  • Editor: integrated `@monaco-editor/react` for a first-class script-writing experience.
  • API: Added dedicated endpoints for webhook management, delivery tracking, and script testing.
  • State: Optimized URL-driven routing for the webhook editor to support sub-tabs (Editor, Deliveries, Settings).

@chatgpt-codex-connector
Copy link

chatgpt-codex-connector bot commented Jan 2, 2026

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

@betterclever betterclever force-pushed the betterclever/smart-webhooks branch from 80431c8 to 1a37501 Compare January 2, 2026 08:10
betterclever and others added 19 commits January 2, 2026 13:45
@betterclever
feat(webhooks): add smart webhooks with parsing scripts
0f08df3 
- Add webhook configuration and delivery tables
- Implement webhook admin API for CRUD operations
- Add inbound webhook controller for external webhooks
- Create webhook UI for managing webhooks and viewing deliveries
- Implement parsing script execution in Docker with Bun
- Add webhook path regeneration and URL display
- Support script testing with sample payloads
- Integrate with workflow entry point runtime inputs

Co-authored-by: Claude AI <assistant@opencode.ai>
Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
feat(frontend): add Smart Webhook Manager to sidebar navigation
eaa1405 
- Add Webhooks navigation item to AppLayout sidebar
- Add /webhooks route in App.tsx mapped to WebhooksPage
- Fix process.env usage in WebhooksPage (use Vite's env config)
- Add VITE_API_URL to centralized env config
- Fix entry point detection in WebhookEditorDrawer to use node.type
- Fix runtime inputs extraction from node.data.config.runtimeInputs
- Improve auto-populate logic to sync inputs when workflow changes
- Add PlayCircle icon import, remove duplicate import

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
refactor: add dedicated runtime-inputs endpoint for cleaner API design
f8d768c 
Backend:
- Add GET /api/v1/workflows/:id/runtime-inputs endpoint
- Add RuntimeInputSchema and WorkflowRuntimeInputsResponseDto DTOs
- Add ENTRY_POINT_COMPONENT_IDS constant for consistent identification
- Endpoint extracts and normalizes Entry Point inputs from graph

Backend Client:
- Add getWorkflowRuntimeInputs method to ShipSecApiClient

Frontend:
- Add getRuntimeInputs wrapper in api.ts
- Refactor WebhookEditorDrawer to use new endpoint instead of parsing graph
- Remove debug console.log statements

This provides a clean API contract so consumers don't need to understand
the internal graph structure to get workflow inputs.

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
feat: use Monaco editor for webhook script and clean up API usage
ade98ef 
- Replaced Textarea with Monaco Editor for parsing script
- Implemented strongly-typed API client methods for webhooks
- Fixed incorrect save URL by using the generated API client
- Cleaned up WebhookEditorDrawer logic

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
feat(webhooks): valid implementation of webhook editor and delivery h…
ae84e97 
…istory

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
feat(webhooks): fix save button state, input mapping, and auto-popula…
b581ac9 
…te expected inputs

- Fix save button not changing to 'pending' state when editing webhook
- Initialize initialForm correctly for new webhooks to enable dirty tracking
- Add useMemo for isDirty calculation for better reactivity
- Fix input mapping display to correctly access parsedData from test results
- Auto-populate expectedInputs from workflow runtime inputs when selecting a workflow
- This ensures backend validation passes for required inputs

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
feat(webhooks): make webhook editor URL-driven with tab routes
a9ccdb9 
- Add routes for /webhooks/:id/deliveries and /webhooks/:id/settings
- Derive active tab from URL path using useLocation
- Navigate to tabs via URL when clicking tab triggers
- Disable deliveries/settings tabs for new webhooks
- Update History button in WebhooksPage to link directly to deliveries tab

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
feat(webhooks): improve webhooks list page UX
be88039 
- Make entire table row clickable to navigate to webhook editor
- Remove redundant Test and Edit buttons (row click handles this)
- Fix duplicate search bars - consolidate into single filters row
- Fix vertical alignment of filters and buttons
- Add hover effect on table rows
- Add stopPropagation to action buttons to prevent row click

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
feat(webhooks): add webhooks sidebar to workflow editor
e161262 
- Create WorkflowWebhooksPanel component showing default and custom webhooks
- Add webhooks sidebar integration to WorkflowDesignerPane
- Update ConfigPanel entrypoint to show 'Manage' button that opens webhooks sidebar
- Add onOpenWebhooksSidebar to WorkflowSchedulesContext
- Default webhook URL shown at top, followed by list of custom webhooks for the workflow

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
feat(webhooks): open webhooks sidebar from entrypoint node button
3bfbe42 
- Add onOpenWebhooksSidebar to EntryPointActionsContext
- Wire up the Webhooks button on entrypoint node to open sidebar
- Change button label from 'Webhook' to 'Webhooks' to match sidebar

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
feat(webhooks): add stateful back navigation from webhook editor
04b45fd 
- Pass returnTo state when navigating from webhooks sidebar to editor
- Back button in webhook editor returns to workflow with sidebar open
- Auto-open webhooks sidebar when navigating back via query param
- Clean URL by removing query param after processing

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
feat(webhooks): add view code button to webhooks sidebar entries
4ddc6fb 
- Integrate WebhookDetails dialog into Default and Custom Webhook entries
- Calculate sample payload from entrypoint runtime inputs for Default Webhook
- Generate sample payload from expectedInputs for Custom Webhooks
- Add 'returnTo' state support when navigating to webhook editor from sidebar

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
feat(webhooks): allow custom webhooks without API key auth in snippets
b5cbc51 
- Add hideAuth prop to WebhookDetails to remove Authorization headers from snippets
- Update WebhookDetails to show 'Receive Webhook' title when hideAuth is true
- Update WorkflowWebhooksPanel to use hideAuth={true} for custom webhooks
- Add generic fields to custom webhook sample payloads

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
feat(webhooks): add comment to custom webhook snippets about payload …
e127da7 
…transformation

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
feat(webhooks): enable public inbound webhooks and fix triggering con…
28f7bc9 
…text

- Add @public() decorator to bypass AuthGuard for specific endpoints
- Update AuthGuard to respect @public() metadata using Reflector
- Apply @public() to InboundWebhookController.receive
- Provide organization context when triggering workflows from webhooks
- Add comprehensive E2E test for Smart Webhooks

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
fix(webhooks): correct delivery status badge logic in frontend
a0af100 
- Change 'delivery.success' to 'delivery.status === "delivered"' in WebhookEditorPage
- This fixes the UI showing deliveries as failed when they were actually delivered successfully

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
fix(webhooks): use correct property name for workflow run id in frontend
977baaf 
- Change 'delivery.runId' to 'delivery.workflowRunId' to match backend API response
- This ensures Run IDs are correctly displayed in the delivery history table

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever
refactor(webhooks): add proper typing to webhook API and frontend com…
87cdf01 
…ponents

- 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 <paliwal.pranjal83@gmail.com>
@betterclever
fix(auth): fix AuthGuard unit tests after Public decorator implementa…
d5483aa 
…tion

- Inject and mock Reflector in AuthGuard unit tests
- Fix NestJS context mocks in tests to include getHandler and getClass
- Add test cases for Public decorator behavior in AuthGuard

Signed-off-by: betterclever <paliwal.pranjal83@gmail.com>
@betterclever betterclever force-pushed the betterclever/smart-webhooks branch from 70e3c04 to d5483aa Compare January 2, 2026 08:16
@betterclever betterclever merged commit 4171703 into main Jan 2, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@betterclever