@chargebee/chargebee-apps-libs 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/LICENSE +24 -0
  2. package/README.md +270 -0
  3. package/SECURITY.md +8 -0
  4. package/config/README.md +83 -0
  5. package/config/allowed-modules.json +24 -0
  6. package/dist/config/config-loader.d.ts +24 -0
  7. package/dist/config/config-loader.js +95 -0
  8. package/dist/index.d.ts +4 -0
  9. package/dist/index.js +21 -0
  10. package/dist/libs/port-service.d.ts +18 -0
  11. package/dist/libs/port-service.js +27 -0
  12. package/dist/logger/cb-public-logger.d.ts +59 -0
  13. package/dist/logger/cb-public-logger.js +158 -0
  14. package/dist/sandbox/public-sandbox-wrapper.d.ts +41 -0
  15. package/dist/sandbox/public-sandbox-wrapper.js +208 -0
  16. package/package.json +44 -0
  17. package/templates/serverless-node-starter-app/.env +4 -0
  18. package/templates/serverless-node-starter-app/README.md +290 -0
  19. package/templates/serverless-node-starter-app/handler/handler.js +34 -0
  20. package/templates/serverless-node-starter-app/jsconfig.json +35 -0
  21. package/templates/serverless-node-starter-app/manifest.json +15 -0
  22. package/templates/serverless-node-starter-app/test_data/customer_created.json +51 -0
  23. package/templates/serverless-node-starter-app/test_data/invoice_generated.json +112 -0
  24. package/templates/serverless-node-starter-app/test_data/subscription_created.json +173 -0
  25. package/templates/serverless-node-starter-app/types/types.d.ts +45 -0
  26. package/templates/serverless-node-starter-app-with-iparams/.env +4 -0
  27. package/templates/serverless-node-starter-app-with-iparams/README.md +717 -0
  28. package/templates/serverless-node-starter-app-with-iparams/handler/handler.js +39 -0
  29. package/templates/serverless-node-starter-app-with-iparams/iparams.json +41 -0
  30. package/templates/serverless-node-starter-app-with-iparams/iparams.local.json +9 -0
  31. package/templates/serverless-node-starter-app-with-iparams/jsconfig.json +35 -0
  32. package/templates/serverless-node-starter-app-with-iparams/manifest.json +15 -0
  33. package/templates/serverless-node-starter-app-with-iparams/test_data/customer_created.json +51 -0
  34. package/templates/serverless-node-starter-app-with-iparams/test_data/invoice_generated.json +112 -0
  35. package/templates/serverless-node-starter-app-with-iparams/test_data/subscription_created.json +173 -0
  36. package/templates/serverless-node-starter-app-with-iparams/types/types.d.ts +63 -0
  37. package/ui/README.md +118 -0
  38. package/ui/web/assets/css/main.css +1121 -0
  39. package/ui/web/assets/images/Chargebee-logo.png +0 -0
  40. package/ui/web/assets/js/main.js +61 -0
  41. package/ui/web/assets/js/modules/api.js +97 -0
  42. package/ui/web/assets/js/modules/constants.js +33 -0
  43. package/ui/web/assets/js/modules/editors.js +41 -0
  44. package/ui/web/assets/js/modules/events.js +195 -0
  45. package/ui/web/assets/js/modules/form-utils.js +70 -0
  46. package/ui/web/assets/js/modules/iparams-inputs.js +495 -0
  47. package/ui/web/assets/js/modules/iparams.js +82 -0
  48. package/ui/web/assets/js/modules/ui-utils.js +87 -0
  49. package/ui/web/index.html +164 -0
@@ -0,0 +1,39 @@
1
+ /**
2
+ * Serverless function handlers
3
+ * Each handler receives a single payload argument with payload.event and payload.iparams.<section>.<param>
4
+ */
5
+ module.exports = {
6
+
7
+ /**
8
+ * Handles customer_created event
9
+ * @param {import('../types/types.d.ts').HandlerPayload} payload - Event and iparams
10
+ */
11
+ customerCreateHandler: function(/** @type {import('../types/types.d.ts').HandlerPayload} */payload) {
12
+ console.log('Processing customer_created event');
13
+ console.log('Customer created for email: ', payload.event.content.customer.email);
14
+ console.log('Processing fee (%): ', payload.iparams.processing_fee_configuration.fee_percentage);
15
+ console.log('Processing fee limit: ', payload.iparams.processing_fee_configuration.fee_limit);
16
+ },
17
+
18
+ /**
19
+ * Handles subscription_created events
20
+ * @param {import('../types/types.d.ts').HandlerPayload} payload - Event and iparams
21
+ */
22
+ subscriptionCreatedHandler: function(/** @type {import('../types/types.d.ts').HandlerPayload} */payload) {
23
+ console.log('Processing subscription_created event');
24
+ console.log('Subscription created for email: ', payload.event.content.customer.email);
25
+ console.log('Late payment fee (%): ', payload.iparams.late_payment_fee_configuration.fee_percentage);
26
+ },
27
+
28
+ /**
29
+ * Handles invoice_generated events
30
+ * @param {import('../types/types.d.ts').HandlerPayload} payload - Event and iparams
31
+ */
32
+ invoiceGeneratedHandler: function(/** @type {import('../types/types.d.ts').HandlerPayload} */payload) {
33
+ console.log('Processing invoice_generated event');
34
+ console.log('Invoice status: ', payload.event.content.invoice.status);
35
+ console.log('Processing fee (%): ', payload.iparams.processing_fee_configuration.fee_percentage);
36
+ console.log('Late payment fee (%): ', payload.iparams.late_payment_fee_configuration.fee_percentage);
37
+ }
38
+
39
+ };
@@ -0,0 +1,41 @@
1
+ {
2
+ "installation_parameters": {
3
+ "sections": [
4
+ {
5
+ "name": "processing_fee_configuration",
6
+ "display_name": "Processing Fee Configuration",
7
+ "description": "Provide the fields below to proceed.",
8
+ "parameters": [
9
+ {
10
+ "name": "fee_percentage",
11
+ "display_name": "Processing Fee (%)",
12
+ "description": "Percentage fee applied to each transaction",
13
+ "type": "NUMBER",
14
+ "required": true
15
+ },
16
+ {
17
+ "name": "fee_limit",
18
+ "display_name": "Processing Fee Limit",
19
+ "description": "Maximum processing fee amount to charge (in minor currency units, e.g. cents)",
20
+ "type": "NUMBER",
21
+ "default": 100
22
+ }
23
+ ]
24
+ },
25
+ {
26
+ "name": "late_payment_fee_configuration",
27
+ "display_name": "Late Payment Fee Configuration",
28
+ "description": "Configure penalties when invoices are paid after the due date.",
29
+ "parameters": [
30
+ {
31
+ "name": "fee_percentage",
32
+ "display_name": "Late Payment Fee (%)",
33
+ "description": "Penalty percentage added to overdue invoice balances",
34
+ "type": "NUMBER",
35
+ "required": true
36
+ }
37
+ ]
38
+ }
39
+ ]
40
+ }
41
+ }
@@ -0,0 +1,9 @@
1
+ {
2
+ "processing_fee_configuration": {
3
+ "fee_percentage": 3,
4
+ "fee_limit": 100
5
+ },
6
+ "late_payment_fee_configuration": {
7
+ "fee_percentage": 5
8
+ }
9
+ }
@@ -0,0 +1,35 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2020",
4
+ "module": "commonjs",
5
+ "allowSyntheticDefaultImports": true,
6
+ "esModuleInterop": true,
7
+ "allowJs": true,
8
+ "checkJs": true,
9
+ "resolveJsonModule": true,
10
+ "strict": false,
11
+ "noImplicitAny": false,
12
+ "noImplicitReturns": true,
13
+ "noImplicitThis": false,
14
+ "noUnusedLocals": true,
15
+ "noUnusedParameters": false,
16
+ "baseUrl": ".",
17
+ "paths": {
18
+ "@/*": ["./*"],
19
+ "@handler/*": ["./handler/*"],
20
+ "@types/*": ["./types/*"],
21
+ "@test_data/*": ["./test_data/*"]
22
+ },
23
+ "typeRoots": ["./types", "./node_modules/@types"]
24
+ },
25
+ "include": [
26
+ "**/*.js",
27
+ "**/*.d.ts",
28
+ "**/*.json"
29
+ ],
30
+ "exclude": [
31
+ "node_modules",
32
+ "dist",
33
+ "*.min.js"
34
+ ]
35
+ }
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "<your-app-name>",
3
+ "description": "<your-app-description>",
4
+ "events": {
5
+ "customer_created": {
6
+ "handler": "customerCreateHandler"
7
+ },
8
+ "subscription_created": {
9
+ "handler": "subscriptionCreatedHandler"
10
+ },
11
+ "invoice_generated": {
12
+ "handler": "invoiceGeneratedHandler"
13
+ }
14
+ }
15
+ }
@@ -0,0 +1,51 @@
1
+ {
2
+ "api_version": "v2",
3
+ "content": {
4
+ "customer": {
5
+ "allow_direct_debit": false,
6
+ "auto_collection": "on",
7
+ "billing_address": {
8
+ "country": "US",
9
+ "object": "billing_address",
10
+ "validation_status": "not_validated"
11
+ },
12
+ "card_status": "no_card",
13
+ "channel": "web",
14
+ "company": "Example",
15
+ "created_at": 1755783294,
16
+ "created_from_ip": "54.88.235.200",
17
+ "deleted": false,
18
+ "email": "johndoe@example.com",
19
+ "excess_payments": 0,
20
+ "first_name": "John",
21
+ "id": "AzqUAXUuVzllT3Zr",
22
+ "last_name": "Doe",
23
+ "mrr": 0,
24
+ "net_term_days": 0,
25
+ "object": "customer",
26
+ "phone": "123 456 7890",
27
+ "pii_cleared": "active",
28
+ "preferred_currency_code": "USD",
29
+ "promotional_credits": 0,
30
+ "refundable_credits": 0,
31
+ "resource_version": 1755783294193,
32
+ "taxability": "taxable",
33
+ "unbilled_charges": 0,
34
+ "updated_at": 1755783294
35
+ }
36
+ },
37
+ "event_type": "customer_created",
38
+ "id": "ev_AzqUAXUuVzlmf3Zs",
39
+ "object": "event",
40
+ "occurred_at": 1755783294,
41
+ "source": "admin_console",
42
+ "user": "foo@bar.com",
43
+ "webhook_status": "scheduled",
44
+ "webhooks": [
45
+ {
46
+ "id": "whv2_169zTyUkn2tgg2fOQ",
47
+ "object": "webhook",
48
+ "webhook_status": "scheduled"
49
+ }
50
+ ]
51
+ }
@@ -0,0 +1,112 @@
1
+ {
2
+ "api_version": "v2",
3
+ "content": {
4
+ "invoice": {
5
+ "adjustment_credit_notes": [],
6
+ "amount_adjusted": 0,
7
+ "amount_due": 0,
8
+ "amount_paid": 0,
9
+ "amount_to_collect": 0,
10
+ "applied_credits": [],
11
+ "base_currency_code": "USD",
12
+ "billing_address": {
13
+ "company": "Example",
14
+ "country": "US",
15
+ "first_name": "John",
16
+ "last_name": "Doe",
17
+ "object": "billing_address",
18
+ "validation_status": "not_validated"
19
+ },
20
+ "channel": "web",
21
+ "credits_applied": 0,
22
+ "currency_code": "USD",
23
+ "customer_id": "AzqUAXUuVzllT3Zr",
24
+ "date": 1755783502,
25
+ "deleted": false,
26
+ "due_date": 1755783502,
27
+ "dunning_attempts": [],
28
+ "exchange_rate": 1,
29
+ "first_invoice": true,
30
+ "generated_at": 1755783502,
31
+ "has_advance_charges": false,
32
+ "id": "93",
33
+ "is_gifted": false,
34
+ "issued_credit_notes": [],
35
+ "line_items": [
36
+ {
37
+ "amount": 0,
38
+ "customer_id": "AzqUAXUuVzllT3Zr",
39
+ "date_from": 1755783502,
40
+ "date_to": 1758461902,
41
+ "description": "Plan-Free",
42
+ "discount_amount": 0,
43
+ "entity_id": "cbdemo_free",
44
+ "entity_type": "plan",
45
+ "id": "li_AzZTN3UuW0e4m3il",
46
+ "is_taxed": false,
47
+ "item_level_discount_amount": 0,
48
+ "object": "line_item",
49
+ "pricing_model": "flat_fee",
50
+ "quantity": 1,
51
+ "subscription_id": "AzZTN3UuW0e4B3ij",
52
+ "tax_amount": 0,
53
+ "tax_exempt_reason": "tax_not_configured",
54
+ "unit_amount": 0
55
+ }
56
+ ],
57
+ "linked_orders": [],
58
+ "linked_payments": [],
59
+ "net_term_days": 0,
60
+ "new_sales_amount": 0,
61
+ "object": "invoice",
62
+ "paid_at": 1755783502,
63
+ "price_type": "tax_exclusive",
64
+ "recurring": true,
65
+ "resource_version": 1755783502991,
66
+ "round_off_amount": 0,
67
+ "site_details_at_creation": {
68
+ "organization_address": {
69
+ "city": "Hyderabad",
70
+ "country_code": "IN",
71
+ "line1": "asfdgdhfjgfgf",
72
+ "organization_name": "Chargebee",
73
+ "phone": "01234565543",
74
+ "state": "Andaman and Nicobar Islands",
75
+ "state_code": "AN",
76
+ "zip": "500028"
77
+ },
78
+ "timezone": "Universal"
79
+ },
80
+ "status": "paid",
81
+ "sub_total": 0,
82
+ "subscription_id": "AzZTN3UuW0e4B3ij",
83
+ "tax": 0,
84
+ "tax_origin": {
85
+ "country": "IN"
86
+ },
87
+ "term_finalized": true,
88
+ "total": 0,
89
+ "updated_at": 1755783502,
90
+ "write_off_amount": 0
91
+ }
92
+ },
93
+ "event_type": "invoice_generated",
94
+ "id": "ev_AzZTN3UuW0e7G3in",
95
+ "object": "event",
96
+ "occurred_at": 1755783503,
97
+ "source": "admin_console",
98
+ "user": "manideep@chargebee.com",
99
+ "webhook_status": "scheduled",
100
+ "webhooks": [
101
+ {
102
+ "id": "whv2_AzZX7CUVnj5rB1ZHq",
103
+ "object": "webhook",
104
+ "webhook_status": "disabled"
105
+ },
106
+ {
107
+ "id": "whv2_169zTyUkn2tgg2fOQ",
108
+ "object": "webhook",
109
+ "webhook_status": "scheduled"
110
+ }
111
+ ]
112
+ }
@@ -0,0 +1,173 @@
1
+ {
2
+ "api_version": "v2",
3
+ "content": {
4
+ "customer": {
5
+ "allow_direct_debit": false,
6
+ "auto_collection": "on",
7
+ "billing_address": {
8
+ "country": "US",
9
+ "object": "billing_address",
10
+ "validation_status": "not_validated"
11
+ },
12
+ "card_status": "no_card",
13
+ "channel": "web",
14
+ "company": "Example",
15
+ "created_at": 1755783294,
16
+ "created_from_ip": "54.88.235.200",
17
+ "deleted": false,
18
+ "email": "johndoe@example.com",
19
+ "excess_payments": 0,
20
+ "first_name": "John",
21
+ "id": "AzqUAXUuVzllT3Zr",
22
+ "last_name": "Doe",
23
+ "mrr": 0,
24
+ "net_term_days": 0,
25
+ "object": "customer",
26
+ "phone": "123 456 7890",
27
+ "pii_cleared": "active",
28
+ "preferred_currency_code": "USD",
29
+ "promotional_credits": 0,
30
+ "refundable_credits": 0,
31
+ "resource_version": 1755783294193,
32
+ "taxability": "taxable",
33
+ "unbilled_charges": 0,
34
+ "updated_at": 1755783294
35
+ },
36
+ "invoice": {
37
+ "adjustment_credit_notes": [],
38
+ "amount_adjusted": 0,
39
+ "amount_due": 0,
40
+ "amount_paid": 0,
41
+ "amount_to_collect": 0,
42
+ "applied_credits": [],
43
+ "base_currency_code": "USD",
44
+ "billing_address": {
45
+ "company": "Example",
46
+ "country": "US",
47
+ "first_name": "John",
48
+ "last_name": "Doe",
49
+ "object": "billing_address",
50
+ "validation_status": "not_validated"
51
+ },
52
+ "channel": "web",
53
+ "credits_applied": 0,
54
+ "currency_code": "USD",
55
+ "customer_id": "AzqUAXUuVzllT3Zr",
56
+ "date": 1755783502,
57
+ "deleted": false,
58
+ "due_date": 1755783502,
59
+ "dunning_attempts": [],
60
+ "exchange_rate": 1,
61
+ "first_invoice": true,
62
+ "generated_at": 1755783502,
63
+ "has_advance_charges": false,
64
+ "id": "93",
65
+ "is_gifted": false,
66
+ "issued_credit_notes": [],
67
+ "line_items": [
68
+ {
69
+ "amount": 0,
70
+ "customer_id": "AzqUAXUuVzllT3Zr",
71
+ "date_from": 1755783502,
72
+ "date_to": 1758461902,
73
+ "description": "Plan-Free",
74
+ "discount_amount": 0,
75
+ "entity_id": "cbdemo_free",
76
+ "entity_type": "plan",
77
+ "id": "li_AzZTN3UuW0e4m3il",
78
+ "is_taxed": false,
79
+ "item_level_discount_amount": 0,
80
+ "object": "line_item",
81
+ "pricing_model": "flat_fee",
82
+ "quantity": 1,
83
+ "subscription_id": "AzZTN3UuW0e4B3ij",
84
+ "tax_amount": 0,
85
+ "tax_exempt_reason": "tax_not_configured",
86
+ "unit_amount": 0
87
+ }
88
+ ],
89
+ "linked_orders": [],
90
+ "linked_payments": [],
91
+ "net_term_days": 0,
92
+ "new_sales_amount": 0,
93
+ "object": "invoice",
94
+ "paid_at": 1755783502,
95
+ "price_type": "tax_exclusive",
96
+ "recurring": true,
97
+ "resource_version": 1755783502991,
98
+ "round_off_amount": 0,
99
+ "site_details_at_creation": {
100
+ "organization_address": {
101
+ "city": "Hyderabad",
102
+ "country_code": "IN",
103
+ "line1": "asfdgdhfjgfgf",
104
+ "organization_name": "Chargebee",
105
+ "phone": "01234565543",
106
+ "state": "Andaman and Nicobar Islands",
107
+ "state_code": "AN",
108
+ "zip": "500028"
109
+ },
110
+ "timezone": "Universal"
111
+ },
112
+ "status": "paid",
113
+ "sub_total": 0,
114
+ "subscription_id": "AzZTN3UuW0e4B3ij",
115
+ "tax": 0,
116
+ "tax_origin": {
117
+ "country": "IN"
118
+ },
119
+ "term_finalized": true,
120
+ "total": 0,
121
+ "updated_at": 1755783502,
122
+ "write_off_amount": 0
123
+ },
124
+ "subscription": {
125
+ "activated_at": 1755783502,
126
+ "billing_period": 1,
127
+ "billing_period_unit": "month",
128
+ "channel": "web",
129
+ "created_at": 1755783502,
130
+ "created_from_ip": "54.88.235.200",
131
+ "currency_code": "USD",
132
+ "current_term_end": 1758461902,
133
+ "current_term_start": 1755783502,
134
+ "customer_id": "AzqUAXUuVzllT3Zr",
135
+ "deleted": false,
136
+ "due_invoices_count": 0,
137
+ "has_scheduled_advance_invoices": false,
138
+ "has_scheduled_changes": false,
139
+ "id": "AzZTN3UuW0e4B3ij",
140
+ "mrr": 0,
141
+ "next_billing_at": 1758461902,
142
+ "object": "subscription",
143
+ "plan_amount": 0,
144
+ "plan_free_quantity": 0,
145
+ "plan_id": "cbdemo_free",
146
+ "plan_quantity": 1,
147
+ "plan_unit_price": 0,
148
+ "resource_version": 1755783503004,
149
+ "started_at": 1755783502,
150
+ "status": "active",
151
+ "updated_at": 1755783503
152
+ }
153
+ },
154
+ "event_type": "subscription_created",
155
+ "id": "ev_AzZTN3UuW0e7V3io",
156
+ "object": "event",
157
+ "occurred_at": 1755783503,
158
+ "source": "admin_console",
159
+ "user": "manideep@chargebee.com",
160
+ "webhook_status": "scheduled",
161
+ "webhooks": [
162
+ {
163
+ "id": "whv2_AzZX7CUVnj5rB1ZHq",
164
+ "object": "webhook",
165
+ "webhook_status": "scheduled"
166
+ },
167
+ {
168
+ "id": "whv2_169zTyUkn2tgg2fOQ",
169
+ "object": "webhook",
170
+ "webhook_status": "scheduled"
171
+ }
172
+ ]
173
+ }
@@ -0,0 +1,63 @@
1
+ /**
2
+ * Type definitions for Chargebee Apps applications
3
+ * This file provides TypeScript types for common structures used in Chargebee apps
4
+ */
5
+
6
+ /**
7
+ * Event record structure for Chargebee webhook events
8
+ * This represents the actual structure of Chargebee webhook events
9
+ * Note: Event types are dynamically generated by Chargebee
10
+ * Examples include: 'customer_created', 'subscription_created', 'subscription_renewed', etc.
11
+ */
12
+ export interface EventRecord {
13
+ /** API version */
14
+ api_version: string;
15
+ /** Event content containing the actual data */
16
+ content: Record<string, any>;
17
+ /** Type of the event (e.g., 'customer_created', 'subscription_created') */
18
+ event_type: string;
19
+ /** Unique identifier for the event */
20
+ id: string;
21
+ /** Object type */
22
+ object: string;
23
+ /** Timestamp when the event occurred */
24
+ occurred_at: number;
25
+ /** Source of the event */
26
+ source: string;
27
+ /** Webhook status */
28
+ webhook_status: string;
29
+ /** Array of webhook configurations */
30
+ webhooks: Array<{
31
+ id: string;
32
+ object: string;
33
+ webhook_status: string;
34
+ }>;
35
+ }
36
+
37
+ /** Union of every value an iparam can hold */
38
+ export type IparamValue = string | number | boolean | string[];
39
+
40
+ /** Parameter values for a single section */
41
+ export interface SectionObject {
42
+ [key: string]: IparamValue;
43
+ }
44
+
45
+ /**
46
+ * Installation parameter values keyed by section name.
47
+ * Access: payload.iparams.<section_name>.<param_name>
48
+ * Example: { "offline_payment_sync": { "sync_mode": "Manual Sync" } }
49
+ */
50
+ export interface IparamInputs {
51
+ [sectionName: string]: SectionObject;
52
+ }
53
+
54
+ /**
55
+ * Single argument passed to every event handler.
56
+ * Use payload.event for the webhook event and payload.iparams.<section>.<param> for installation parameters.
57
+ */
58
+ export interface HandlerPayload {
59
+ /** The webhook event record */
60
+ event: EventRecord;
61
+ /** Installation parameter values grouped by section */
62
+ iparams: IparamInputs;
63
+ }
package/ui/README.md ADDED
@@ -0,0 +1,118 @@
1
+ # Web UI
2
+
3
+ Interactive web interface for testing serverless applications in the Chargebee Apps CLI.
4
+
5
+ ## Overview
6
+
7
+ The web UI provides a user-friendly interface for testing serverless function handlers locally. It includes:
8
+ - **Interactive Testing**: Visual interface for testing event handlers
9
+ - **JSON Editor**: Syntax-highlighted editor for event data
10
+ - **Developer Guide**: Built-in instructions for adding new events
11
+ - **Real-time Feedback**: Immediate execution results and error messages
12
+
13
+ ## Structure
14
+
15
+ ```
16
+ packages/public-libs/ui/
17
+ └── web/
18
+ ├── assets/
19
+ │ ├── css/
20
+ │ │ └── main.css # Styling and layout
21
+ │ ├── js/
22
+ │ │ └── main.js # Interactive functionality
23
+ │ └── images/
24
+ │ └── Chargebee-logo.png # Brand assets
25
+ └── index.html # Main application interface
26
+ ```
27
+
28
+ ## Features
29
+
30
+ ### Interactive Interface
31
+ - **Event Selection**: Dropdown populated from `manifest.json`
32
+ - **JSON Editor**: Ace editor with syntax highlighting and autocompletion
33
+ - **Test Execution**: One-click handler testing with custom data
34
+ - **Status Display**: Real-time feedback on execution results
35
+
36
+ ### Developer Guide
37
+ Built-in documentation panel with:
38
+ - **Event Setup**: Step-by-step instructions for adding new events
39
+ - **Testing Guide**: How to test handlers using the interface
40
+
41
+ ### User Experience
42
+ - **Auto-loading**: Sample data loads automatically for each event
43
+ - **Keyboard Shortcuts**: Ctrl+Enter to test, Ctrl+R to reset
44
+ - **Error Handling**: Clear error messages for missing handlers or files
45
+
46
+ ## Technical Implementation
47
+
48
+ ### Frontend Technologies
49
+ - **HTML5**: Semantic markup structure
50
+ - **CSS3**: Modern styling with gradients and animations
51
+ - **Vanilla JavaScript**: No framework dependencies
52
+ - **Ace Editor**: Professional code editor for JSON editing
53
+
54
+ ### API Integration
55
+ The UI communicates with the CLI's API endpoints:
56
+ - `GET /api/manifest` - Loads available events
57
+ - `GET /api/test-data/:eventType` - Loads sample data
58
+ - `POST /api/invoke` - Executes handlers
59
+
60
+ ## Usage
61
+
62
+ ### Starting the Interface
63
+ 1. Run the CLI: `npm start -- run my-app`
64
+ 2. Open browser: `http://localhost:15000`
65
+ 3. The web interface loads automatically
66
+
67
+ ### Testing Workflow
68
+ 1. **Select Event**: Choose from dropdown (populated from manifest.json)
69
+ 2. **Edit Data**: Modify JSON in the syntax-highlighted editor
70
+ 3. **Test Handler**: Click "Test Data" to execute
71
+ 4. **View Results**: Check status and terminal output
72
+
73
+ ### Adding New Events
74
+ 1. **Update manifest.json**: Add event type and handler mapping
75
+ 2. **Create handler function**: Implement in handler.js
76
+ 3. **Add sample data**: Create `<event_type>.json` in test_data/
77
+ 4. **Test via UI**: New event appears in dropdown automatically
78
+
79
+ ## Development
80
+
81
+ ### No Build Process
82
+ The UI is designed for simplicity:
83
+ - **Static Assets**: Served directly by Express
84
+ - **No Bundling**: No build tools or preprocessing required
85
+ - **Direct Editing**: Modify files and refresh browser
86
+
87
+ ### Customization
88
+ The UI can be customized by:
89
+ - **Styling**: Modify `main.css` for visual changes
90
+ - **Functionality**: Update `main.js` for behavior changes
91
+ - **Content**: Edit `index.html` for structural changes
92
+
93
+ ## Integration
94
+
95
+ ### CLI Integration
96
+ - **Express Server**: Served by the CLI's API server
97
+ - **Static Middleware**: Assets served from `packages/public-libs/ui/web/` directory
98
+ - **API Communication**: Uses CLI's REST endpoints
99
+
100
+ ### Sandbox Integration
101
+ - **Handler Execution**: UI triggers sandbox execution
102
+ - **Logging**: User code output appears in terminal
103
+ - **Error Reporting**: Sandbox errors displayed in UI
104
+
105
+ ## Browser Support
106
+
107
+ ### Supported Browsers
108
+ - **Chrome**: Full support (recommended)
109
+ - **Firefox**: Full support
110
+ - **Safari**: Full support
111
+ - **Edge**: Full support
112
+
113
+ ### Requirements
114
+ - **JavaScript**: Must be enabled
115
+ - **ES6 Support**: Modern JavaScript features used
116
+ - **Fetch API**: For API communication
117
+
118
+ For detailed API integration, see the [API Module Documentation](../src/api/README.md).