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

package/dist/fixtures/dashboard.d.ts

@@ -0,0 +1,119 @@
+/**
+ * A security dashboard as an agent would build it: the agent sends the layout, with every number
+ * bound to a path, and the app fills those paths from its own API. The tree is written once and
+ * emitted in both formats, chunk by chunk, so a renderer shows placeholders until a part arrives.
+ */
+import type { GenUiAction } from '../core/define.js';
+import { type Scenario } from './stream.js';
+export declare const DASHBOARD_DATA: {
+    traffic: {
+        x: string;
+        requests: number;
+    }[];
+    attacks: {
+        x: string;
+        attacks: number;
+        blocked: number;
+    }[];
+    requestsSpark: {
+        x: string;
+        y: number;
+    }[];
+    attacksSpark: {
+        x: string;
+        y: number;
+    }[];
+    kpi: {
+        requests: number;
+        attacks: number;
+        blockedPercent: number;
+        incidents: number;
+        attacksDelta: {
+            value: number;
+            trend: string;
+            sentiment: string;
+        };
+        incidentsDelta: {
+            value: number;
+            trend: string;
+            sentiment: string;
+        };
+    };
+    attackTypes: {
+        label: string;
+        value: number;
+        color: string;
+    }[];
+    endpoints: {
+        label: string;
+        value: number;
+        color: string;
+    }[];
+    severity: {
+        name: string;
+        value: number;
+        color: string;
+    }[];
+    threats: {
+        ip: string;
+        attack: string;
+        method: string;
+        path: string;
+        status: number;
+        hits: number;
+        last: string;
+    }[];
+    topIps: string[];
+};
+export declare const DASHBOARD_ACTIONS: readonly GenUiAction[];
+/** Security dashboard: KPI tiles, traffic and attack charts, breakdowns and a threats table. */
+export declare const DASHBOARD_SCENARIO: Scenario;
+export declare const DASHBOARD_A2UI: import("./stream.js").StreamLine<{
+    createSurface: {
+        surfaceId: string;
+        catalogId?: string | undefined;
+        metadata?: {
+            extensions?: Record<string, unknown> | undefined;
+        } | undefined;
+        dataModel?: Record<string, any> | undefined;
+        components?: any[] | undefined;
+        sendDataModel?: boolean | undefined;
+    };
+    version: "1.0";
+} | {
+    updateComponents: {
+        surfaceId: string;
+        components: any[];
+    };
+    version: "1.0";
+} | {
+    updateDataModel: {
+        surfaceId: string;
+        path?: string | undefined;
+        value?: any;
+    };
+    version: "1.0";
+} | {
+    deleteSurface: {
+        surfaceId: string;
+    };
+    version: "1.0";
+} | {
+    callRendererFunction: {
+        functionCallId: string;
+        surfaceId?: string | undefined;
+        callFunction?: any;
+    };
+    version: "1.0";
+} | {
+    agentFunctionResponse: {
+        functionCallId: string;
+        value?: any;
+        error?: {
+            code: string;
+            message: string;
+        } | undefined;
+    };
+    version: "1.0";
+}>[];
+export declare const DASHBOARD_JSON_RENDER: import("./stream.js").StreamLine<import("@json-render/core").JsonPatch>[];

package/dist/fixtures/dashboard.js

@@ -0,0 +1,428 @@
+import { bind, node, toStreams } from "./stream.js";
+const wave = (i, base, amp, phase = 0)=>Math.round(base + amp * Math.sin((i + phase) / 3.2) + 0.35 * amp * Math.sin(1.7 * i));
+const window24 = (shift)=>Array.from({
+        length: 24
+    }, (_, i)=>{
+        const hour = i + shift;
+        const x = new Date(Date.UTC(2026, 10, 12, hour)).toISOString();
+        const requests = wave(hour, 550000, 90000);
+        const attacks = wave(hour, 2700, 900, 2);
+        return {
+            x,
+            requests,
+            attacks,
+            blocked: Math.round(0.957 * attacks)
+        };
+    });
+const series = (shift)=>{
+    const points = window24(shift);
+    return {
+        traffic: points.map(({ x, requests })=>({
+                x,
+                requests
+            })),
+        attacks: points.map(({ x, attacks, blocked })=>({
+                x,
+                attacks,
+                blocked
+            })),
+        requestsSpark: points.map(({ x, requests })=>({
+                x,
+                y: requests
+            })),
+        attacksSpark: points.map(({ x, attacks })=>({
+                x,
+                y: attacks
+            }))
+    };
+};
+const DASHBOARD_DATA = {
+    kpi: {
+        requests: 13204118,
+        attacks: 64204,
+        blockedPercent: 95.7,
+        incidents: 3,
+        attacksDelta: {
+            value: 12,
+            trend: 'up',
+            sentiment: 'negative'
+        },
+        incidentsDelta: {
+            value: 2,
+            trend: 'down',
+            sentiment: 'positive'
+        }
+    },
+    ...series(0),
+    attackTypes: [
+        {
+            label: 'SQL injection',
+            value: 14820,
+            color: 'red'
+        },
+        {
+            label: "Cross-site scripting",
+            value: 9410,
+            color: 'amber'
+        },
+        {
+            label: 'BOLA',
+            value: 6205,
+            color: 'purple'
+        },
+        {
+            label: 'Brute force',
+            value: 4930,
+            color: 'blue'
+        }
+    ],
+    endpoints: [
+        {
+            label: 'POST /api/v2/auth/login',
+            value: 11204,
+            color: 'red'
+        },
+        {
+            label: 'GET /api/v2/orders/{id}',
+            value: 7386,
+            color: 'amber'
+        },
+        {
+            label: 'POST /graphql',
+            value: 5142,
+            color: 'blue'
+        },
+        {
+            label: 'GET /api/v2/users/{id}',
+            value: 3920,
+            color: 'slate'
+        }
+    ],
+    severity: [
+        {
+            name: 'Critical',
+            value: 1,
+            color: 'red'
+        },
+        {
+            name: 'High',
+            value: 1,
+            color: 'amber'
+        },
+        {
+            name: 'Medium',
+            value: 1,
+            color: 'blue'
+        }
+    ],
+    threats: [
+        {
+            ip: '203.0.113.24',
+            attack: 'SQL injection',
+            method: 'POST',
+            path: '/api/v2/auth/login',
+            status: 403,
+            hits: 4120,
+            last: '2026-11-12T22:41:00Z'
+        },
+        {
+            ip: '198.51.100.160',
+            attack: 'BOLA',
+            method: 'GET',
+            path: '/api/v2/orders/100482',
+            status: 200,
+            hits: 2870,
+            last: '2026-11-12T22:36:00Z'
+        },
+        {
+            ip: '198.51.100.212',
+            attack: "Cross-site scripting",
+            method: 'POST',
+            path: '/search',
+            status: 403,
+            hits: 1940,
+            last: '2026-11-12T22:12:00Z'
+        },
+        {
+            ip: '203.0.113.5',
+            attack: 'Brute force',
+            method: 'POST',
+            path: '/oauth/token',
+            status: 429,
+            hits: 1310,
+            last: '2026-11-12T21:58:00Z'
+        }
+    ],
+    topIps: [
+        '203.0.113.24',
+        '198.51.100.160',
+        '198.51.100.212'
+    ]
+};
+const DASHBOARD_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 LAYOUT = [
+    [
+        node('root', 'Section', {
+            title: 'Security dashboard',
+            subtitle: 'Last 24 hours · all applications'
+        }, [
+            'kpis',
+            'charts',
+            'breakdowns',
+            'threats',
+            'actions'
+        ]),
+        node('kpis', 'Grid', {
+            columns: '4'
+        }, [
+            'm_requests',
+            'm_attacks',
+            'm_blocked',
+            'm_incidents'
+        ])
+    ],
+    [
+        node('m_requests', 'Metric', {
+            title: 'Requests',
+            value: bind('/kpi/requests'),
+            format: 'compact',
+            caption: 'All applications',
+            sparkline: bind('/requestsSpark')
+        }),
+        node('m_attacks', 'Metric', {
+            title: 'Attacks',
+            value: bind('/kpi/attacks'),
+            format: 'compact',
+            delta: bind('/kpi/attacksDelta'),
+            caption: 'vs the previous 24 hours',
+            sparkline: bind('/attacksSpark'),
+            sparklineColor: 'negative'
+        }),
+        node('m_blocked', 'Metric', {
+            title: 'Blocked',
+            value: bind('/kpi/blockedPercent'),
+            format: 'percent',
+            caption: 'of attacks'
+        }),
+        node('m_incidents', 'Metric', {
+            title: 'Open incidents',
+            value: bind('/kpi/incidents'),
+            delta: bind('/kpi/incidentsDelta'),
+            caption: 'vs the previous 24 hours'
+        })
+    ],
+    [
+        node('charts', 'Grid', {
+            columns: '2'
+        }, [
+            'traffic',
+            'attack_trend'
+        ]),
+        node('traffic', 'LineChart', {
+            title: 'Traffic',
+            series: [
+                {
+                    key: 'requests',
+                    label: 'Requests',
+                    color: 'brand'
+                }
+            ],
+            points: bind('/traffic'),
+            xFormat: 'time',
+            yFormat: 'compact'
+        }),
+        node('attack_trend', 'AreaChart', {
+            title: 'Attacks',
+            variant: 'standard',
+            series: [
+                {
+                    key: 'attacks',
+                    label: 'Attacks',
+                    color: 'red'
+                },
+                {
+                    key: 'blocked',
+                    label: 'Blocked',
+                    color: 'green'
+                }
+            ],
+            points: bind('/attacks'),
+            xFormat: 'time',
+            yFormat: 'compact'
+        })
+    ],
+    [
+        node('breakdowns', 'Grid', {
+            columns: '3'
+        }, [
+            'attack_types',
+            'endpoints',
+            'severity'
+        ]),
+        node('attack_types', 'PieChart', {
+            title: 'Attack types',
+            items: bind('/attackTypes'),
+            centerLabel: 'attacks',
+            format: 'compact'
+        }),
+        node('endpoints', 'BarList', {
+            title: 'Most attacked endpoints',
+            items: bind('/endpoints')
+        }),
+        node('severity', 'HorizontalBarStack', {
+            title: 'Incidents by severity',
+            value: bind('/kpi/incidents'),
+            items: bind('/severity'),
+            legend: true
+        })
+    ],
+    [
+        node('threats', 'Table', {
+            title: 'Top threats',
+            rowKey: 'ip',
+            columns: [
+                {
+                    key: 'ip',
+                    header: 'Source IP',
+                    type: 'ip'
+                },
+                {
+                    key: 'attack',
+                    header: 'Attack',
+                    type: 'badge'
+                },
+                {
+                    key: 'method',
+                    header: 'Method',
+                    type: 'method'
+                },
+                {
+                    key: 'path',
+                    header: 'Path',
+                    type: 'code'
+                },
+                {
+                    key: 'status',
+                    header: 'Status',
+                    type: 'status'
+                },
+                {
+                    key: 'hits',
+                    header: 'Hits',
+                    type: 'number'
+                },
+                {
+                    key: 'last',
+                    header: 'Last seen',
+                    type: 'datetime',
+                    format: 'datetime'
+                }
+            ],
+            rows: bind('/threats')
+        }),
+        node('actions', 'Stack', {
+            direction: 'row',
+            gap: '8'
+        }, [
+            'block',
+            'open'
+        ]),
+        {
+            ...node('block', 'Button', {
+                label: 'Block the top 3 IPs',
+                variant: 'primary',
+                destructive: true
+            }),
+            press: {
+                action: 'block_ips',
+                params: {
+                    ips: bind('/topIps')
+                }
+            }
+        },
+        {
+            ...node('open', 'Button', {
+                label: 'Open in Attacks'
+            }),
+            press: {
+                action: 'open_attacks',
+                params: {
+                    filter: 'last:24h'
+                }
+            }
+        }
+    ]
+];
+const DASHBOARD_SCENARIO = {
+    id: 'security-dashboard',
+    prompt: 'Build a security dashboard for the last 24 hours',
+    summary: 'KPI tiles with sparklines, traffic and attack charts, breakdowns, a threats table',
+    surfaceId: 'security_dashboard',
+    actions: DASHBOARD_ACTIONS,
+    layout: LAYOUT,
+    data: [
+        {
+            after: 1,
+            values: [
+                {
+                    path: '/kpi',
+                    value: DASHBOARD_DATA.kpi
+                },
+                {
+                    path: '/requestsSpark',
+                    value: DASHBOARD_DATA.requestsSpark
+                },
+                {
+                    path: '/attacksSpark',
+                    value: DASHBOARD_DATA.attacksSpark
+                },
+                {
+                    path: '/traffic',
+                    value: DASHBOARD_DATA.traffic
+                },
+                {
+                    path: '/attacks',
+                    value: DASHBOARD_DATA.attacks
+                }
+            ]
+        },
+        {
+            after: 3,
+            values: [
+                {
+                    path: '/attackTypes',
+                    value: DASHBOARD_DATA.attackTypes
+                },
+                {
+                    path: '/endpoints',
+                    value: DASHBOARD_DATA.endpoints
+                },
+                {
+                    path: '/severity',
+                    value: DASHBOARD_DATA.severity
+                },
+                {
+                    path: '/threats',
+                    value: DASHBOARD_DATA.threats
+                },
+                {
+                    path: '/topIps',
+                    value: DASHBOARD_DATA.topIps
+                }
+            ]
+        }
+    ]
+};
+const streams = toStreams(DASHBOARD_SCENARIO);
+const DASHBOARD_A2UI = streams.a2ui;
+const DASHBOARD_JSON_RENDER = streams.jsonRender;
+export { DASHBOARD_A2UI, DASHBOARD_ACTIONS, DASHBOARD_DATA, DASHBOARD_JSON_RENDER, DASHBOARD_SCENARIO };

package/dist/fixtures/incident.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Investigating one incident: the agent lays out an alert, KPI tiles, the attempts trend, the
+ * top source IPs and the latest requests, every figure bound; the app fills them from its API.
+ */
+import type { GenUiAction } from '../core/define.js';
+import { type Scenario } from './stream.js';
+export declare const INCIDENT_DATA: {
+    incident: {
+        summary: string;
+    };
+    kpi: {
+        attempts: number;
+        uniqueIps: number;
+        successfulLogins: number;
+        blockedPercent: number;
+        attemptsDelta: {
+            value: number;
+            trend: string;
+            sentiment: string;
+        };
+    };
+    attempts: {
+        x: string;
+        attempts: number;
+        baseline: number;
+    }[];
+    sourceIps: {
+        label: string;
+        value: number;
+        color: string;
+    }[];
+    requests: {
+        id: string;
+        time: string;
+        ip: string;
+        method: string;
+        path: string;
+        status: number;
+    }[];
+    blockIps: string[];
+};
+export declare const INCIDENT_ACTIONS: readonly GenUiAction[];
+/** Incident investigation: an alert, KPI tiles, the attempts trend, top IPs, recent requests. */
+export declare const INCIDENT_SCENARIO: Scenario;