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

package/dist/fixtures/incident.js

@@ -0,0 +1,331 @@
+import { bind, node } from "./stream.js";
+const HOURS = Array.from({
+    length: 12
+}, (_, i)=>new Date(Date.UTC(2026, 10, 12, 10 + i)).toISOString());
+const ATTEMPTS = [
+    140,
+    152,
+    168,
+    1920,
+    4860,
+    7340,
+    9410,
+    10280,
+    6120,
+    3540,
+    2310,
+    1972
+];
+const INCIDENT_DATA = {
+    incident: {
+        summary: 'Credential stuffing against POST /oauth/token since 13:00 UTC from a rotating pool of IPs. Most attempts were blocked; 6 logins succeeded and need review.'
+    },
+    kpi: {
+        attempts: ATTEMPTS.reduce((sum, v)=>sum + v, 0),
+        uniqueIps: 1284,
+        successfulLogins: 6,
+        blockedPercent: 97.4,
+        attemptsDelta: {
+            value: 3120,
+            trend: 'up',
+            sentiment: 'negative'
+        }
+    },
+    attempts: HOURS.map((x, i)=>({
+            x,
+            attempts: ATTEMPTS[i] ?? 0,
+            baseline: 150 + i % 3 * 10
+        })),
+    sourceIps: [
+        {
+            label: '203.0.113.77',
+            value: 8940,
+            color: 'red'
+        },
+        {
+            label: '198.51.100.14',
+            value: 6215,
+            color: 'red'
+        },
+        {
+            label: '192.0.2.201',
+            value: 4870,
+            color: 'amber'
+        },
+        {
+            label: '203.0.113.150',
+            value: 3302,
+            color: 'amber'
+        },
+        {
+            label: '198.51.100.88',
+            value: 2164,
+            color: 'slate'
+        }
+    ],
+    requests: [
+        {
+            id: 'r1',
+            time: '2026-11-12T21:58:12Z',
+            ip: '203.0.113.77',
+            method: 'POST',
+            path: '/oauth/token',
+            status: 429
+        },
+        {
+            id: 'r2',
+            time: '2026-11-12T21:58:09Z',
+            ip: '198.51.100.14',
+            method: 'POST',
+            path: '/oauth/token',
+            status: 401
+        },
+        {
+            id: 'r3',
+            time: '2026-11-12T21:57:55Z',
+            ip: '192.0.2.201',
+            method: 'POST',
+            path: '/oauth/token',
+            status: 403
+        },
+        {
+            id: 'r4',
+            time: '2026-11-12T21:57:41Z',
+            ip: '198.51.100.23',
+            method: 'POST',
+            path: '/oauth/token',
+            status: 200
+        },
+        {
+            id: 'r5',
+            time: '2026-11-12T21:57:30Z',
+            ip: '203.0.113.150',
+            method: 'POST',
+            path: '/oauth/token',
+            status: 401
+        }
+    ],
+    blockIps: [
+        '203.0.113.77',
+        '198.51.100.14',
+        '192.0.2.201',
+        '203.0.113.150',
+        '198.51.100.88'
+    ]
+};
+const INCIDENT_ACTIONS = [
+    {
+        name: 'block_ips',
+        description: 'Block the given source IPs (asks the user to approve first).'
+    },
+    {
+        name: 'create_rule',
+        description: 'Open the rule editor with a draft rule for the given endpoint and rule type.'
+    }
+];
+const LAYOUT = [
+    [
+        node('root', 'Section', {
+            title: 'Brute force on /oauth/token',
+            subtitle: 'Incident · started 13:00 UTC'
+        }, [
+            'summary',
+            'kpis',
+            'charts',
+            'requests',
+            'actions'
+        ]),
+        node('kpis', 'Grid', {
+            columns: '4'
+        }, [
+            'm_attempts',
+            'm_ips',
+            'm_logins',
+            'm_blocked'
+        ]),
+        node('charts', 'Grid', {
+            columns: '2'
+        }, [
+            'attempts',
+            'source_ips'
+        ])
+    ],
+    [
+        node('summary', 'Alert', {
+            title: 'Active brute force attack',
+            description: bind('/incident/summary'),
+            tone: 'destructive'
+        }),
+        node('m_attempts', 'Metric', {
+            title: 'Login attempts',
+            value: bind('/kpi/attempts'),
+            format: 'compact',
+            delta: bind('/kpi/attemptsDelta'),
+            caption: 'vs the previous hour'
+        }),
+        node('m_ips', 'Metric', {
+            title: 'Unique IPs',
+            value: bind('/kpi/uniqueIps')
+        }),
+        node('m_logins', 'Metric', {
+            title: 'Successful logins',
+            value: bind('/kpi/successfulLogins'),
+            caption: 'need review'
+        }),
+        node('m_blocked', 'Metric', {
+            title: 'Blocked',
+            value: bind('/kpi/blockedPercent'),
+            format: 'percent',
+            caption: 'of attempts'
+        })
+    ],
+    [
+        node('attempts', 'LineChart', {
+            title: 'Attempts per hour',
+            series: [
+                {
+                    key: 'attempts',
+                    label: 'Attempts',
+                    color: 'red'
+                },
+                {
+                    key: 'baseline',
+                    label: 'Baseline',
+                    color: 'slate',
+                    variant: 'dashed'
+                }
+            ],
+            points: bind('/attempts'),
+            xFormat: 'time',
+            yFormat: 'compact'
+        }),
+        node('source_ips', 'BarList', {
+            title: 'Top source IPs',
+            items: bind('/sourceIps')
+        })
+    ],
+    [
+        node('requests', 'Table', {
+            title: 'Recent requests',
+            rowKey: 'id',
+            columns: [
+                {
+                    key: 'time',
+                    header: 'Time',
+                    type: 'datetime',
+                    format: 'datetime'
+                },
+                {
+                    key: 'ip',
+                    header: 'Source IP',
+                    type: 'ip'
+                },
+                {
+                    key: 'method',
+                    header: 'Method',
+                    type: 'method'
+                },
+                {
+                    key: 'path',
+                    header: 'Path',
+                    type: 'code'
+                },
+                {
+                    key: 'status',
+                    header: 'Status',
+                    type: 'status'
+                }
+            ],
+            rows: bind('/requests')
+        })
+    ],
+    [
+        node('actions', 'Stack', {
+            direction: 'row',
+            gap: '8'
+        }, [
+            'block',
+            'rule'
+        ]),
+        {
+            ...node('block', 'Button', {
+                label: 'Block the top 5 IPs',
+                variant: 'primary',
+                destructive: true
+            }),
+            press: {
+                action: 'block_ips',
+                params: {
+                    ips: bind('/blockIps')
+                }
+            }
+        },
+        {
+            ...node('rule', 'Button', {
+                label: 'Create a rate limit rule'
+            }),
+            press: {
+                action: 'create_rule',
+                params: {
+                    path: '/oauth/token',
+                    type: 'rate_limit'
+                }
+            }
+        }
+    ]
+];
+const INCIDENT_SCENARIO = {
+    id: 'incident',
+    prompt: 'Investigate the brute force incident on /oauth/token',
+    summary: 'An alert, KPI tiles, attempts per hour vs baseline, top source IPs, recent requests',
+    surfaceId: 'incident',
+    actions: INCIDENT_ACTIONS,
+    layout: LAYOUT,
+    data: [
+        {
+            after: 1,
+            values: [
+                {
+                    path: '/incident',
+                    value: INCIDENT_DATA.incident
+                },
+                {
+                    path: '/kpi',
+                    value: INCIDENT_DATA.kpi
+                }
+            ]
+        },
+        {
+            after: 2,
+            values: [
+                {
+                    path: '/attempts',
+                    value: INCIDENT_DATA.attempts
+                },
+                {
+                    path: '/sourceIps',
+                    value: INCIDENT_DATA.sourceIps
+                }
+            ]
+        },
+        {
+            after: 3,
+            values: [
+                {
+                    path: '/requests',
+                    value: INCIDENT_DATA.requests
+                }
+            ]
+        },
+        {
+            after: 4,
+            values: [
+                {
+                    path: '/blockIps',
+                    value: INCIDENT_DATA.blockIps
+                }
+            ]
+        }
+    ]
+};
+export { INCIDENT_ACTIONS, INCIDENT_DATA, INCIDENT_SCENARIO };

package/dist/fixtures/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * `@wallarm-org/gen-ui/fixtures`: recorded agent answers to replay in tests and demos, in both
+ * formats and in arrival order, and the scenario builder that writes them.
+ */
+export * from './apiInventory.js';
+export * from './attackSummary.js';
+export * from './dashboard.js';
+export * from './incident.js';
+export * from './liveMonitor.js';
+export * from './openui.js';
+export * from './scenarios.js';
+export * from './stream.js';
+export * from './weeklyReport.js';

package/dist/fixtures/index.js

@@ -0,0 +1,9 @@
+export * from "./apiInventory.js";
+export * from "./attackSummary.js";
+export * from "./dashboard.js";
+export * from "./incident.js";
+export * from "./liveMonitor.js";
+export * from "./openui.js";
+export * from "./scenarios.js";
+export * from "./stream.js";
+export * from "./weeklyReport.js";

package/dist/fixtures/liveMonitor.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Live traffic: the agent lays the page out once, then the app keeps it current on its own,
+ * sending new values for the same bound paths every 2 s. No agent call per update.
+ */
+import type { GenUiAction } from '../core/define.js';
+import { type Scenario } from './stream.js';
+export declare const LIVE_MONITOR_ACTIONS: readonly GenUiAction[];
+/** Live traffic monitor: per-minute KPIs, a moving chart and top endpoints, kept current by the app. */
+export declare const LIVE_MONITOR_SCENARIO: Scenario;

package/dist/fixtures/liveMonitor.js

@@ -0,0 +1,180 @@
+import { bind, node } from "./stream.js";
+const wave = (m, base, amp, phase = 0)=>Math.round(base + amp * Math.sin((m + phase) / 4) + 0.4 * amp * Math.sin(1.3 * m));
+const minutes = (shift)=>Array.from({
+        length: 30
+    }, (_, i)=>{
+        const m = i + shift;
+        return {
+            x: new Date(Date.UTC(2026, 10, 12, 14, m)).toISOString(),
+            requests: wave(m, 9000, 1500),
+            baseline: 9000,
+            attacks: wave(m, 40, 15, 3)
+        };
+    });
+const ENDPOINTS = [
+    'POST /api/v2/auth/login',
+    'GET /api/v2/orders/{id}',
+    'POST /graphql',
+    'GET /search'
+];
+const COLORS = [
+    'red',
+    'amber',
+    'blue',
+    'slate'
+];
+const snapshot = (shift)=>{
+    const window = minutes(shift);
+    const last = window[window.length - 1];
+    return [
+        {
+            path: '/now',
+            value: {
+                requests: last?.requests ?? 0,
+                attacks: last?.attacks ?? 0,
+                blocked: Math.round((96 + 2 * Math.sin(shift / 5)) * 10) / 10
+            }
+        },
+        {
+            path: '/minutes',
+            value: window.map(({ x, requests, baseline })=>({
+                    x,
+                    requests,
+                    baseline
+                }))
+        },
+        {
+            path: '/attacksSpark',
+            value: window.map(({ x, attacks })=>({
+                    x,
+                    y: attacks
+                }))
+        },
+        {
+            path: '/top',
+            value: ENDPOINTS.map((label, i)=>({
+                    label,
+                    value: wave(shift + 7 * i, 2400 - 500 * i, 300 - 50 * i),
+                    color: COLORS[i]
+                })).sort((a, b)=>b.value - a.value)
+        }
+    ];
+};
+const LIVE_MONITOR_ACTIONS = [
+    {
+        name: 'open_traffic',
+        description: 'Open the traffic page for the last hour.'
+    }
+];
+const LIVE_MONITOR_SCENARIO = {
+    id: 'live-monitor',
+    prompt: 'Watch traffic live for the next few minutes',
+    summary: 'Per-minute KPIs, a moving requests chart and top endpoints, refreshed by the app every 2 s',
+    surfaceId: 'live_monitor',
+    actions: LIVE_MONITOR_ACTIONS,
+    layout: [
+        [
+            node('root', 'Section', {
+                title: 'Live traffic',
+                subtitle: 'Per minute · the app refreshes it every 2 s'
+            }, [
+                'kpis',
+                'charts',
+                'actions'
+            ]),
+            node('kpis', 'Grid', {
+                columns: '3'
+            }, [
+                'rpm',
+                'apm',
+                'blocked'
+            ])
+        ],
+        [
+            node('rpm', 'Metric', {
+                title: 'Requests / min',
+                value: bind('/now/requests'),
+                format: 'compact',
+                caption: 'right now'
+            }),
+            node('apm', 'Metric', {
+                title: 'Attacks / min',
+                value: bind('/now/attacks'),
+                caption: 'last 30 minutes',
+                sparkline: bind('/attacksSpark'),
+                sparklineColor: 'negative'
+            }),
+            node('blocked', 'Metric', {
+                title: 'Blocked',
+                value: bind('/now/blocked'),
+                format: 'percent',
+                caption: 'of attacks this minute'
+            })
+        ],
+        [
+            node('charts', 'Grid', {
+                columns: '2'
+            }, [
+                'traffic',
+                'top'
+            ]),
+            node('traffic', 'LineChart', {
+                title: 'Requests per minute',
+                series: [
+                    {
+                        key: 'requests',
+                        label: 'Requests',
+                        color: 'brand'
+                    },
+                    {
+                        key: 'baseline',
+                        label: 'Usual',
+                        color: 'slate',
+                        variant: 'dashed'
+                    }
+                ],
+                points: bind('/minutes'),
+                xFormat: 'time',
+                yFormat: 'compact'
+            }),
+            node('top', 'BarList', {
+                title: 'Most requested right now',
+                items: bind('/top')
+            })
+        ],
+        [
+            node('actions', 'Stack', {
+                direction: 'row',
+                gap: '8'
+            }, [
+                'open'
+            ]),
+            {
+                ...node('open', 'Button', {
+                    label: 'Open traffic'
+                }),
+                press: {
+                    action: 'open_traffic',
+                    params: {
+                        range: 'last:1h'
+                    }
+                }
+            }
+        ]
+    ],
+    data: [
+        {
+            after: 1,
+            values: snapshot(0).filter((d)=>'/now' === d.path || '/attacksSpark' === d.path)
+        },
+        {
+            after: 2,
+            values: snapshot(0).filter((d)=>'/minutes' === d.path || '/top' === d.path)
+        }
+    ],
+    live: {
+        every: 2000,
+        update: (tick)=>snapshot(tick)
+    }
+};
+export { LIVE_MONITOR_ACTIONS, LIVE_MONITOR_SCENARIO };

package/dist/fixtures/openui.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A recorded A2UI answer as the OpenUI Lang a model would write: a statement per component, the
+ * arguments in the entry's prop order, bindings as `$variables`. The app's data stays out of the
+ * program: its lines are data writes the surface gets as `data`. Data the agent sends itself
+ * becomes a `$variable` declaration.
+ */
+import type { A2uiMessage } from '../a2ui/catalog.js';
+import type { DataValue, StreamLine } from './stream.js';
+/** One line of an OpenUI answer: a statement from the agent, or a data write from the app. */
+export type OpenUiLine = string | DataValue;
+export declare const toOpenUiLines: (lines: readonly StreamLine<A2uiMessage>[]) => StreamLine<OpenUiLine>[];
+/** The program and the app's data so far, as `OpenUiSurface` takes them. */
+export declare const openUiAnswer: (lines: readonly StreamLine<OpenUiLine>[]) => {
+    program: string;
+    data: Record<string, unknown>;
+};

package/dist/fixtures/openui.js

@@ -0,0 +1,74 @@
+import { wallarmComponents } from "../components/index.js";
+import { isRecord } from "../core/guards.js";
+const toOpenUiLines = (lines)=>lines.flatMap(({ origin, line })=>{
+        if ('updateDataModel' in line) {
+            const { path = '/', value } = line.updateDataModel;
+            return 'app' === origin ? [
+                {
+                    origin,
+                    line: {
+                        path,
+                        value
+                    }
+                }
+            ] : [
+                {
+                    origin,
+                    line: `${variable(path)} = ${literal(value)}`
+                }
+            ];
+        }
+        const components = 'createSurface' in line ? line.createSurface.components : 'updateComponents' in line ? line.updateComponents.components : void 0;
+        return (components ?? []).map((c)=>({
+                origin,
+                line: statement(c)
+            }));
+    });
+const openUiAnswer = (lines)=>{
+    const program = [];
+    let data = {};
+    for (const { line } of lines)if ('string' == typeof line) program.push(line);
+    else data = setAt(data, line.path.split('/').filter(Boolean), line.value);
+    return {
+        program: program.join('\n'),
+        data
+    };
+};
+const statement = ({ id, component, children, ...props })=>{
+    const entry = wallarmComponents.find((c)=>c.name === component);
+    if (!entry) throw new Error(`no catalog entry "${component}"`);
+    const keys = [
+        ...Object.keys(entry.props.shape),
+        ...entry.events ?? [],
+        ...entry.hasChildren ? [
+            'children'
+        ] : []
+    ];
+    const args = keys.map((key)=>'children' === key ? Array.isArray(children) && `[${children.join(', ')}]` : (entry.events ?? []).includes(key) ? step(props[key]) : void 0 !== props[key] && literal(props[key]));
+    while(args.length && !args[args.length - 1])args.pop();
+    return `${id} = ${component}(${args.map((arg)=>arg || 'null').join(', ')})`;
+};
+const step = (value)=>{
+    if (!isRecord(value) || !isRecord(value.event)) return false;
+    const { name, context } = value.event;
+    return `@${String(name)}(${isRecord(context) && Object.keys(context).length ? literal(context) : ''})`;
+};
+const literal = (value)=>{
+    if (isRecord(value) && 'string' == typeof value['@path']) return variable(value['@path']);
+    if (Array.isArray(value)) return `[${value.map(literal).join(', ')}]`;
+    if (isRecord(value)) return `{${Object.entries(value).map(([k, v])=>`${/^[A-Za-z_]\w*$/.test(k) ? k : JSON.stringify(k)}: ${literal(v)}`).join(', ')}}`;
+    return JSON.stringify(value);
+};
+const variable = (path)=>{
+    const [first, ...rest] = path.split('/').filter(Boolean);
+    return `$${first}${rest.map((s)=>/^\d+$/.test(s) ? `[${s}]` : `.${s}`).join('')}`;
+};
+const setAt = (target, [key, ...rest], value)=>{
+    if (void 0 === key) return isRecord(value) ? value : target;
+    const current = target[key];
+    return {
+        ...target,
+        [key]: rest.length ? setAt(isRecord(current) ? current : {}, rest, value) : value
+    };
+};
+export { openUiAnswer, toOpenUiLines };

package/dist/fixtures/scenarios.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Every recorded answer a demo can replay, in picker order: what the user asked, a line about what
+ * the answer shows, and its streams in every format.
+ */
+import type { GenUiAction } from '../core/define.js';
+import { type ScenarioStreams } from './stream.js';
+export interface ReplayScenario extends ScenarioStreams {
+    id: string;
+    prompt: string;
+    summary: string;
+    actions: readonly GenUiAction[];
+}
+export declare const SCENARIOS: readonly ReplayScenario[];

package/dist/fixtures/scenarios.js

@@ -0,0 +1,39 @@
+import { API_INVENTORY_SCENARIO } from "./apiInventory.js";
+import { ATTACK_SUMMARY_A2UI, ATTACK_SUMMARY_ACTIONS, ATTACK_SUMMARY_JSON_RENDER } from "./attackSummary.js";
+import { DASHBOARD_SCENARIO } from "./dashboard.js";
+import { INCIDENT_SCENARIO } from "./incident.js";
+import { LIVE_MONITOR_SCENARIO } from "./liveMonitor.js";
+import { toOpenUiLines } from "./openui.js";
+import { toStreams } from "./stream.js";
+import { WEEKLY_REPORT_SCENARIO } from "./weeklyReport.js";
+const SCENARIOS = [
+    {
+        id: 'attack-summary',
+        prompt: 'Show attacks for the last 24 hours',
+        summary: 'Two metrics, the top attacked endpoints, an alert and two actions',
+        actions: ATTACK_SUMMARY_ACTIONS,
+        a2ui: ATTACK_SUMMARY_A2UI.map((line)=>({
+                origin: 'agent',
+                line
+            })),
+        openui: toOpenUiLines(ATTACK_SUMMARY_A2UI.map((line)=>({
+                origin: 'agent',
+                line
+            }))),
+        jsonRender: ATTACK_SUMMARY_JSON_RENDER.map((line)=>({
+                origin: 'agent',
+                line
+            }))
+    },
+    ...[
+        DASHBOARD_SCENARIO,
+        LIVE_MONITOR_SCENARIO,
+        INCIDENT_SCENARIO,
+        API_INVENTORY_SCENARIO,
+        WEEKLY_REPORT_SCENARIO
+    ].map((scenario)=>({
+            ...scenario,
+            ...toStreams(scenario)
+        }))
+];
+export { SCENARIOS };