@wallarm-org/gen-ui 0.0.0-stage → 0.1.0

package/dist/fixtures/apiInventory.js

@@ -0,0 +1,287 @@
+import { bind, node } from "./stream.js";
+const DAYS = Array.from({
+    length: 7
+}, (_, i)=>new Date(Date.UTC(2026, 10, 6 + i)).toISOString());
+const API_INVENTORY_DATA = {
+    kpi: {
+        endpoints: 1842,
+        sensitive: 327,
+        unauthenticated: 46,
+        newThisWeek: 58
+    },
+    dataTypes: [
+        {
+            label: 'PII',
+            value: 168,
+            color: 'purple'
+        },
+        {
+            label: 'Credentials',
+            value: 74,
+            color: 'red'
+        },
+        {
+            label: 'Payment cards',
+            value: 52,
+            color: 'amber'
+        },
+        {
+            label: 'Health records',
+            value: 33,
+            color: 'blue'
+        }
+    ],
+    newEndpoints: DAYS.map((x, i)=>{
+        const sensitive = 1 + 3 * i % 4;
+        return {
+            x,
+            sensitive,
+            other: 4 + 5 * i % 6
+        };
+    }),
+    endpoints: [
+        {
+            id: 'ep-1',
+            method: 'GET',
+            path: '/api/v1/users/{id}/profile',
+            status: 200,
+            dataType: 'PII',
+            hits: 184220,
+            last: '2026-11-12T21:47:00Z'
+        },
+        {
+            id: 'ep-2',
+            method: 'POST',
+            path: '/api/v1/payments/charge',
+            status: 201,
+            dataType: 'Payment cards',
+            hits: 92415,
+            last: '2026-11-12T21:52:00Z'
+        },
+        {
+            id: 'ep-3',
+            method: 'POST',
+            path: '/internal/auth/token',
+            status: 200,
+            dataType: 'Credentials',
+            hits: 61038,
+            last: '2026-11-12T20:15:00Z'
+        },
+        {
+            id: 'ep-4',
+            method: 'GET',
+            path: '/api/v2/patients/{id}/records',
+            status: 200,
+            dataType: 'Health records',
+            hits: 8771,
+            last: '2026-11-12T18:03:00Z'
+        },
+        {
+            id: 'ep-5',
+            method: 'PUT',
+            path: '/api/v1/accounts/{id}/email',
+            status: 204,
+            dataType: 'PII',
+            hits: 3402,
+            last: '2026-11-11T09:30:00Z'
+        }
+    ]
+};
+const API_INVENTORY_ACTIONS = [
+    {
+        name: 'open_api_inventory',
+        description: 'Open the API Inventory page with the given filter.'
+    },
+    {
+        name: 'export_endpoints',
+        description: 'Download the listed endpoints as a CSV file.'
+    }
+];
+const LAYOUT = [
+    [
+        node('root', 'Section', {
+            title: 'Sensitive data exposure',
+            subtitle: 'API Discovery · last 7 days'
+        }, [
+            'kpis',
+            'charts',
+            'endpoints',
+            'actions'
+        ]),
+        node('kpis', 'Grid', {
+            columns: '4'
+        }, [
+            'm_endpoints',
+            'm_sensitive',
+            'm_unauth',
+            'm_new'
+        ]),
+        node('charts', 'Grid', {
+            columns: '2'
+        }, [
+            'data_types',
+            'new_endpoints'
+        ])
+    ],
+    [
+        node('m_endpoints', 'Metric', {
+            title: 'Endpoints',
+            value: bind('/kpi/endpoints'),
+            caption: 'Discovered across all hosts'
+        }),
+        node('m_sensitive', 'Metric', {
+            title: 'With sensitive data',
+            value: bind('/kpi/sensitive'),
+            caption: 'Return or accept PII, credentials, cards'
+        }),
+        node('m_unauth', 'Metric', {
+            title: 'Unauthenticated',
+            value: bind('/kpi/unauthenticated'),
+            caption: 'Sensitive and reachable without auth'
+        }),
+        node('m_new', 'Metric', {
+            title: 'New this week',
+            value: bind('/kpi/newThisWeek'),
+            caption: 'First seen in the last 7 days'
+        })
+    ],
+    [
+        node('data_types', 'PieChart', {
+            title: 'Sensitive data types',
+            items: bind('/dataTypes'),
+            centerLabel: 'endpoints'
+        }),
+        node('new_endpoints', 'ColumnChart', {
+            title: 'New endpoints per day',
+            series: [
+                {
+                    key: 'sensitive',
+                    label: 'With sensitive data',
+                    color: 'red'
+                },
+                {
+                    key: 'other',
+                    label: 'Other',
+                    color: 'slate'
+                }
+            ],
+            points: bind('/newEndpoints'),
+            xFormat: 'date'
+        })
+    ],
+    [
+        node('endpoints', 'Table', {
+            title: 'Most used endpoints with sensitive data',
+            rowKey: 'id',
+            columns: [
+                {
+                    key: 'method',
+                    header: 'Method',
+                    type: 'method'
+                },
+                {
+                    key: 'path',
+                    header: 'Path',
+                    type: 'code'
+                },
+                {
+                    key: 'status',
+                    header: 'Status',
+                    type: 'status'
+                },
+                {
+                    key: 'dataType',
+                    header: 'Data type',
+                    type: 'badge'
+                },
+                {
+                    key: 'hits',
+                    header: 'Hits',
+                    type: 'number'
+                },
+                {
+                    key: 'last',
+                    header: 'Last seen',
+                    type: 'datetime',
+                    format: 'datetime'
+                }
+            ],
+            rows: bind('/endpoints')
+        })
+    ],
+    [
+        node('actions', 'Stack', {
+            direction: 'row',
+            gap: '8'
+        }, [
+            'open',
+            'export'
+        ]),
+        {
+            ...node('open', 'Button', {
+                label: 'Open in API Inventory',
+                variant: 'primary'
+            }),
+            press: {
+                action: 'open_api_inventory',
+                params: {
+                    filter: 'sensitive_data:any'
+                }
+            }
+        },
+        {
+            ...node('export', 'Button', {
+                label: 'Export CSV',
+                variant: 'outline'
+            }),
+            press: {
+                action: 'export_endpoints',
+                params: {
+                    filter: 'sensitive_data:any'
+                }
+            }
+        }
+    ]
+];
+const API_INVENTORY_SCENARIO = {
+    id: 'api-inventory',
+    prompt: 'Which API endpoints expose sensitive data?',
+    summary: 'Endpoint KPIs, sensitive data types, new endpoints per day, a table of exposed endpoints',
+    surfaceId: 'api_inventory',
+    actions: API_INVENTORY_ACTIONS,
+    layout: LAYOUT,
+    data: [
+        {
+            after: 1,
+            values: [
+                {
+                    path: '/kpi',
+                    value: API_INVENTORY_DATA.kpi
+                }
+            ]
+        },
+        {
+            after: 2,
+            values: [
+                {
+                    path: '/dataTypes',
+                    value: API_INVENTORY_DATA.dataTypes
+                },
+                {
+                    path: '/newEndpoints',
+                    value: API_INVENTORY_DATA.newEndpoints
+                }
+            ]
+        },
+        {
+            after: 3,
+            values: [
+                {
+                    path: '/endpoints',
+                    value: API_INVENTORY_DATA.endpoints
+                }
+            ]
+        }
+    ]
+};
+export { API_INVENTORY_ACTIONS, API_INVENTORY_DATA, API_INVENTORY_SCENARIO };

package/dist/fixtures/attackSummary.d.ts

@@ -0,0 +1,13 @@
+/**
+ * One answer, "attacks in the last 24 hours", as an agent would stream it in each format.
+ * Both describe the same tree and the same data model, so a renderer swap is the only difference.
+ * Every array is in arrival order: feed it item by item to emulate streaming.
+ */
+import type { SpecStreamLine } from '@json-render/core';
+import type { A2uiMessage } from '../a2ui/index.js';
+import type { GenUiAction } from '../core/define.js';
+export declare const ATTACK_SUMMARY_ACTIONS: readonly GenUiAction[];
+export declare const ATTACK_SUMMARY_SURFACE = "attack_summary";
+export declare const ATTACK_SUMMARY_A2UI: readonly A2uiMessage[];
+/** `state` goes first: the provider reads it when the part mounts. */
+export declare const ATTACK_SUMMARY_JSON_RENDER: readonly SpecStreamLine[];

package/dist/fixtures/attackSummary.js

@@ -0,0 +1,329 @@
+import { WALLARM_A2UI_CATALOG_ID } from "../a2ui/index.js";
+const ATTACK_SUMMARY_ACTIONS = [
+    {
+        name: 'block_ips',
+        description: 'Block the given source IPs (asks the user to approve first).'
+    },
+    {
+        name: 'open_attacks',
+        description: 'Open the Attacks page with the given filter.'
+    }
+];
+const STATS = {
+    attacks: 1240,
+    blocked: 1187,
+    sourceIps: [
+        '203.0.113.7',
+        '203.0.113.12',
+        '198.51.100.40'
+    ],
+    endpoints: [
+        {
+            label: '/api/v1/auth/login',
+            value: 612,
+            color: 'red'
+        },
+        {
+            label: '/api/v1/users',
+            value: 318,
+            color: 'amber'
+        },
+        {
+            label: '/api/v1/orders',
+            value: 174,
+            color: 'blue'
+        },
+        {
+            label: '/api/v1/search',
+            value: 136,
+            color: 'slate'
+        }
+    ]
+};
+const ALERT = {
+    title: 'SQLi spike on /api/v1/auth/login',
+    description: '412 of the 612 hits came from 3 IPs in one hosting network over the last 2 hours.'
+};
+const ATTACK_SUMMARY_SURFACE = 'attack_summary';
+const SURFACE = ATTACK_SUMMARY_SURFACE;
+const ATTACK_SUMMARY_A2UI = [
+    {
+        version: '1.0',
+        createSurface: {
+            surfaceId: SURFACE,
+            catalogId: WALLARM_A2UI_CATALOG_ID
+        }
+    },
+    {
+        version: '1.0',
+        updateDataModel: {
+            surfaceId: SURFACE,
+            path: '/stats',
+            value: STATS
+        }
+    },
+    {
+        version: '1.0',
+        updateComponents: {
+            surfaceId: SURFACE,
+            components: [
+                {
+                    id: 'root',
+                    component: 'Stack',
+                    children: [
+                        'title',
+                        'metrics',
+                        'endpoints',
+                        'alert',
+                        'actions'
+                    ]
+                },
+                {
+                    id: 'title',
+                    component: 'Heading',
+                    text: 'Attacks in the last 24 hours'
+                },
+                {
+                    id: 'metrics',
+                    component: 'Stack',
+                    direction: 'row',
+                    children: [
+                        'm_attacks',
+                        'm_blocked'
+                    ]
+                },
+                {
+                    id: 'm_attacks',
+                    component: 'Metric',
+                    title: 'Attacks',
+                    value: {
+                        '@path': '/stats/attacks'
+                    },
+                    delta: {
+                        value: 12,
+                        trend: 'up',
+                        sentiment: 'negative'
+                    },
+                    caption: 'vs the previous 24 hours'
+                },
+                {
+                    id: 'm_blocked',
+                    component: 'Metric',
+                    title: 'Blocked',
+                    value: {
+                        '@path': '/stats/blocked'
+                    },
+                    caption: '95.7% of attacks'
+                }
+            ]
+        }
+    },
+    {
+        version: '1.0',
+        updateComponents: {
+            surfaceId: SURFACE,
+            components: [
+                {
+                    id: 'endpoints',
+                    component: 'BarList',
+                    title: 'Top attacked endpoints',
+                    items: {
+                        '@path': '/stats/endpoints'
+                    }
+                }
+            ]
+        }
+    },
+    {
+        version: '1.0',
+        updateComponents: {
+            surfaceId: SURFACE,
+            components: [
+                {
+                    id: 'alert',
+                    component: 'Alert',
+                    tone: 'warning',
+                    ...ALERT
+                },
+                {
+                    id: 'actions',
+                    component: 'Stack',
+                    direction: 'row',
+                    gap: '8',
+                    children: [
+                        'block',
+                        'open'
+                    ]
+                },
+                {
+                    id: 'block',
+                    component: 'Button',
+                    label: 'Block 3 source IPs',
+                    variant: 'primary',
+                    destructive: true,
+                    press: {
+                        event: {
+                            name: 'block_ips',
+                            context: {
+                                ips: {
+                                    '@path': '/stats/sourceIps'
+                                }
+                            }
+                        }
+                    }
+                },
+                {
+                    id: 'open',
+                    component: 'Button',
+                    label: 'Open in Attacks',
+                    press: {
+                        event: {
+                            name: 'open_attacks',
+                            context: {
+                                filter: 'type:sqli'
+                            }
+                        }
+                    }
+                }
+            ]
+        }
+    }
+];
+const el = (path, value)=>({
+        op: 'add',
+        path: `/elements/${path}`,
+        value
+    });
+const ATTACK_SUMMARY_JSON_RENDER = [
+    {
+        op: 'add',
+        path: '/state',
+        value: {
+            stats: STATS
+        }
+    },
+    {
+        op: 'add',
+        path: '/root',
+        value: 'root'
+    },
+    el('root', {
+        type: 'Stack',
+        props: {},
+        children: [
+            'title',
+            'metrics',
+            'endpoints',
+            'alert',
+            'actions'
+        ]
+    }),
+    el('title', {
+        type: 'Heading',
+        props: {
+            text: 'Attacks in the last 24 hours'
+        },
+        children: []
+    }),
+    el('metrics', {
+        type: 'Stack',
+        props: {
+            direction: 'row'
+        },
+        children: [
+            'm_attacks',
+            'm_blocked'
+        ]
+    }),
+    el('m_attacks', {
+        type: 'Metric',
+        props: {
+            title: 'Attacks',
+            value: {
+                $state: '/stats/attacks'
+            },
+            delta: {
+                value: 12,
+                trend: 'up',
+                sentiment: 'negative'
+            },
+            caption: 'vs the previous 24 hours'
+        },
+        children: []
+    }),
+    el('m_blocked', {
+        type: 'Metric',
+        props: {
+            title: 'Blocked',
+            value: {
+                $state: '/stats/blocked'
+            },
+            caption: '95.7% of attacks'
+        },
+        children: []
+    }),
+    el('endpoints', {
+        type: 'BarList',
+        props: {
+            title: 'Top attacked endpoints',
+            items: {
+                $state: '/stats/endpoints'
+            }
+        },
+        children: []
+    }),
+    el('alert', {
+        type: 'Alert',
+        props: {
+            tone: 'warning',
+            ...ALERT
+        },
+        children: []
+    }),
+    el('actions', {
+        type: 'Stack',
+        props: {
+            direction: 'row',
+            gap: '8'
+        },
+        children: [
+            'block',
+            'open'
+        ]
+    }),
+    el('block', {
+        type: 'Button',
+        props: {
+            label: 'Block 3 source IPs',
+            variant: 'primary',
+            destructive: true
+        },
+        on: {
+            press: {
+                action: 'block_ips',
+                params: {
+                    ips: {
+                        $state: '/stats/sourceIps'
+                    }
+                }
+            }
+        },
+        children: []
+    }),
+    el('open', {
+        type: 'Button',
+        props: {
+            label: 'Open in Attacks'
+        },
+        on: {
+            press: {
+                action: 'open_attacks',
+                params: {
+                    filter: 'type:sqli'
+                }
+            }
+        },
+        children: []
+    })
+];
+export { ATTACK_SUMMARY_A2UI, ATTACK_SUMMARY_ACTIONS, ATTACK_SUMMARY_JSON_RENDER, ATTACK_SUMMARY_SURFACE };