@aglyn/plugins-ai 1.0.0-beta.143

package/src/lib/components/staff-org-ai-card.component.js

@@ -0,0 +1,739 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { aiAddonName } from "@aglyn/aglyn";
+import { buildRoute, Route } from "@aglyn/aglyn/app-utils/console-routes";
+import { pluginDocsHelp } from "@aglyn/aglyn/app-utils/docs-help";
+import { mdiOpenInNew } from "@aglyn/shared-data-mdi";
+import { AppLink, CardDisplay } from "@aglyn/shared-ui-jsx";
+import { ListRowActions, ListTable, listActionsColumn } from "@aglyn/shared-ui-jsx/components/list-table.component";
+import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { TABLE_ROW_HEIGHT } from "@aglyn/shared-ui-jsx/const/table-pagination";
+import { useUser } from "@aglyn/tenant-feature-instance";
+import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
+import { Alert, Chip, Stack, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useRef, useState } from "react";
+/**
+ * THE STAFF AI CARD (AGL-2930): everything about one org's AI usage on the
+ * page staff already open to look at that org.
+ *
+ * Read through `/api/ai/admin/org`, one request on mount. Every figure on it
+ * is the route's, and every figure the route serves is composed from the
+ * same helpers the meter refuses with — see `usage/staff-org-ai.ts`. This
+ * file only lays them out.
+ *
+ * ## What each section is for
+ *
+ *  - **Add-on** — is the org paying for AI, at what, since when.
+ *  - **Credit pool** — the band as three NAMED parts, because "why does
+ *    this org have 13,000 credits" has three answers (the plan, an override,
+ *    the add-on) and a single total cannot say which.
+ *  - **Overage** — what is past the band, what it is sold at, and the two
+ *    controls the org itself holds over it.
+ *  - **Refusals** — how often, and why, the gate said no this month.
+ *  - **Jobs** and **Top users** — the generative and per-person halves,
+ *    each of which says plainly when its rollup has nothing yet.
+ *  - **Tokens** — what each kind of request costs per request, what it
+ *    sends and generates, and how much of its prompt the cache served.
+ *  - **Margin** — spend against what AI brings in, red when it is over.
+ *  - **Actions** — where the override editor and the AI pause live.
+ */ const credits = (value)=>value == null ? '—' : Math.round(value).toLocaleString();
+/**
+ * Four decimals under a dollar, two above (the assist-signals page's rule):
+ * a month that really cost eight cents must not read as `$0.00`.
+ */ const usd = (value)=>{
+    if (value == null) return '—';
+    const amount = Number(value) || 0;
+    return `$${amount.toFixed(Math.abs(amount) < 1 ? 4 : 2)}`;
+};
+const when = (iso)=>iso ? new Date(iso).toLocaleDateString() : '—';
+/** The pool as one sentence naming every part that is non-zero. */ export function poolPartsSentence(pool) {
+    const parts = [];
+    if (pool.overrideCredits !== null) {
+        parts.push(`${credits(pool.overrideCredits)} staff override`);
+    } else {
+        parts.push(`${credits(pool.planCredits)} plan band`);
+    }
+    if (pool.addonCredits > 0) {
+        parts.push(`${credits(pool.addonCredits)} ${aiAddonName()} add-on`);
+    }
+    return parts.join(' + ');
+}
+/**
+ * The overage's state as one line: sold, walled, or capped — or, for an
+ * uncapped staff comp (AGL-3049), nothing to sell past at all.
+ */ export function overageStateSentence(overage, uncapped = false) {
+    if (uncapped) {
+        return 'Nothing is sold past a band: an uncapped staff comp has none, and bills nothing.';
+    }
+    if (overage.hardCap) return 'Stopped at the band — the org’s band switch is on.';
+    if (!overage.sellsOverage) return 'Not sold past the band on this plan.';
+    const rate = overage.rateUsdPer1k === null ? '' : ` at ${usd(overage.rateUsdPer1k)} per 1,000`;
+    if (overage.capUsd !== null) {
+        return overage.capReached ? `Stopped — the org’s ${usd(overage.capUsd)} overage ceiling is reached.` : `Sold${rate}, up to the org’s ${usd(overage.capUsd)} ceiling.`;
+    }
+    return `Sold${rate}, no ceiling set.`;
+}
+/** Whether the margin section renders red. */ export function marginTone(margin) {
+    if (margin.underwater) return 'error';
+    if (margin.multiple >= 1) return 'warning';
+    return 'success';
+}
+function RefusalsRow({ refusals }) {
+    const labels = {
+        band: 'band',
+        cap: 'ceiling',
+        messages: 'messages',
+        budget: 'operator backstop',
+        // A hard allotment a manager set on a member, a collaborator or a site
+        // (AGL-2942).
+        allotment: 'allotments',
+        // The Free taste's rungs (AGL-2925): only a Free workspace collects these.
+        account: 'free account',
+        requests: 'free requests/day',
+        refusals: 'free refusals/day',
+        platform: 'platform ceiling'
+    };
+    return /*#__PURE__*/ _jsx(Stack, {
+        direction: "row",
+        spacing: 1,
+        useFlexGap: true,
+        sx: {
+            flexWrap: 'wrap'
+        },
+        children: Object.keys(labels).map((reason)=>{
+            var _refusals_reason;
+            // A reason the answering server does not yet count reads as zero,
+            // so a console newer than its route draws the row rather than
+            // failing the card.
+            const count = Number((_refusals_reason = refusals[reason]) != null ? _refusals_reason : 0);
+            return /*#__PURE__*/ _jsx(Chip, {
+                size: "small",
+                variant: count > 0 ? 'filled' : 'outlined',
+                color: count > 0 ? 'warning' : 'default',
+                label: `${labels[reason]} ${count.toLocaleString()}`
+            }, reason);
+        })
+    });
+}
+function JobsSection({ jobs }) {
+    if (jobs === null) {
+        return /*#__PURE__*/ _jsx(Alert, {
+            severity: "warning",
+            children: 'Could not read the generation jobs — a failed read, not an idle org.'
+        });
+    }
+    const total = Object.values(jobs.counts).reduce((sum, n)=>sum + n, 0);
+    if (total === 0) {
+        return /*#__PURE__*/ _jsx(Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            children: 'No generation jobs yet.'
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                useFlexGap: true,
+                sx: {
+                    flexWrap: 'wrap'
+                },
+                children: [
+                    [
+                        'queued',
+                        'running',
+                        'needs_input',
+                        'needs_review',
+                        'failed'
+                    ].map((status)=>/*#__PURE__*/ _jsx(Chip, {
+                            size: "small",
+                            color: status === 'failed' && jobs.counts[status] > 0 ? 'error' : (status === 'needs_input' || status === 'needs_review') && jobs.counts[status] > 0 ? 'warning' : 'default',
+                            label: `${status.replace('_', ' ')} ${jobs.counts[status]}`
+                        }, status)),
+                    /*#__PURE__*/ _jsx(Chip, {
+                        size: "small",
+                        variant: "outlined",
+                        label: `done ${jobs.counts.done}`
+                    })
+                ]
+            }),
+            jobs.truncated ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: 'Counted from the newest jobs only — these counts are a floor.'
+            }) : null,
+            /*#__PURE__*/ _jsx(ListTable, {
+                rows: jobs.recent,
+                columns: JOB_COLUMNS,
+                getRowId: (job)=>job.id,
+                rowHeight: TABLE_ROW_HEIGHT,
+                noRowsLabel: "No recent jobs"
+            })
+        ]
+    });
+}
+/**
+ * The recent jobs, one column per fact. Who started a job is a column of
+ * its own rather than a link tucked beside the date, so it sorts and filters
+ * like the rest; the credits sort by what was SPENT, which is the figure the
+ * pool was charged.
+ */ const JOB_COLUMNS = [
+    {
+        field: 'id',
+        headerName: 'Job',
+        flex: 1,
+        minWidth: 200,
+        renderCell: ({ row })=>/*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                noWrap: true,
+                title: row.id,
+                sx: {
+                    fontFamily: 'monospace'
+                },
+                children: row.id
+            })
+    },
+    {
+        field: 'kind',
+        headerName: 'Kind',
+        width: 120,
+        valueFormatter: (value)=>value || '—'
+    },
+    {
+        field: 'status',
+        headerName: 'Status',
+        width: 130,
+        valueFormatter: (value)=>String(value != null ? value : '').replace('_', ' ')
+    },
+    {
+        field: 'creditsSpent',
+        headerName: 'Credits',
+        type: 'number',
+        align: 'right',
+        headerAlign: 'right',
+        width: 140,
+        valueFormatter: (value, row)=>`${credits(value)} / ${credits(row.creditsReserved)}`
+    },
+    {
+        field: 'createdAt',
+        headerName: 'Started',
+        width: 120,
+        valueFormatter: (value)=>when(value)
+    },
+    {
+        field: 'createdBy',
+        headerName: 'Started by',
+        flex: 1,
+        minWidth: 240,
+        renderCell: ({ row })=>row.createdBy ? /*#__PURE__*/ _jsx(AppLink, {
+                href: buildRoute(Route.ADMIN_USER_DETAIL, {
+                    uid: row.createdBy
+                }),
+                variant: "body2",
+                underline: "hover",
+                noWrap: true,
+                sx: {
+                    fontFamily: 'monospace'
+                },
+                children: row.createdBy
+            }) : '—'
+    }
+];
+const tokenCount = (value)=>Math.round(value).toLocaleString();
+const rate = (value)=>value == null ? '—' : `${Math.round(value * 100)}%`;
+/** The month's tokens, and what each kind of request spends of them (AGL-2937). */ function TokensSection({ tokens }) {
+    const { total } = tokens;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                useFlexGap: true,
+                sx: {
+                    alignItems: 'center',
+                    flexWrap: 'wrap'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        children: `${tokenCount(total.input)} sent · ${tokenCount(total.cached)} read from cache · ${tokenCount(total.cacheWrite)} written to cache · ${tokenCount(total.output)} generated`
+                    }),
+                    /*#__PURE__*/ _jsx(Chip, {
+                        size: "small",
+                        color: tokens.cacheHitRate != null && tokens.cacheHitRate >= 0.5 ? 'success' : 'default',
+                        label: `cache hit rate ${rate(tokens.cacheHitRate)}`
+                    })
+                ]
+            }),
+            tokens.kinds.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'No model requests recorded by kind this month.'
+            }) : /*#__PURE__*/ _jsxs(ScrollTable, {
+                size: "small",
+                children: [
+                    /*#__PURE__*/ _jsx(TableHead, {
+                        children: /*#__PURE__*/ _jsxs(TableRow, {
+                            children: [
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    children: 'Kind'
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    align: "right",
+                                    children: 'Requests'
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    align: "right",
+                                    children: 'Per request'
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    align: "right",
+                                    children: 'Sent'
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    align: "right",
+                                    children: 'From cache'
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    align: "right",
+                                    children: 'Generated'
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    align: "right",
+                                    children: 'Cache hit'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(TableBody, {
+                        children: tokens.kinds.map((row)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        children: row.kind
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        align: "right",
+                                        children: row.requests.toLocaleString()
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        align: "right",
+                                        children: usd(row.costPerRequestUsd)
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        align: "right",
+                                        children: tokenCount(row.tokens.input)
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        align: "right",
+                                        children: tokenCount(row.tokens.cached)
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        align: "right",
+                                        children: tokenCount(row.tokens.output)
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        align: "right",
+                                        children: rate(row.cacheHitRate)
+                                    })
+                                ]
+                            }, row.kind))
+                    })
+                ]
+            })
+        ]
+    });
+}
+/**
+ * The month's top spenders, one row per person. The row opens the account;
+ * the uid rides beneath the roster's name because two people can share one.
+ */ function TopUsersSection({ users }) {
+    const router = useRouter();
+    const columns = useMemo(()=>[
+            {
+                field: 'name',
+                headerName: 'Person',
+                flex: 1,
+                minWidth: 220,
+                renderCell: ({ row })=>/*#__PURE__*/ _jsxs(Stack, {
+                        sx: {
+                            minWidth: 0
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                noWrap: true,
+                                title: row.name,
+                                children: row.name
+                            }),
+                            row.name !== row.uid ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                noWrap: true,
+                                sx: {
+                                    fontFamily: 'monospace'
+                                },
+                                children: row.uid
+                            }) : null
+                        ]
+                    })
+            },
+            {
+                field: 'credits',
+                headerName: 'Credits',
+                type: 'number',
+                align: 'right',
+                headerAlign: 'right',
+                width: 110,
+                valueFormatter: (value)=>credits(value)
+            },
+            {
+                field: 'share',
+                headerName: 'Share',
+                type: 'number',
+                align: 'right',
+                headerAlign: 'right',
+                width: 90,
+                valueFormatter: (value)=>`${Math.round(value * 100)}%`
+            },
+            {
+                field: 'estCostUsd',
+                headerName: 'Provider $',
+                type: 'number',
+                align: 'right',
+                headerAlign: 'right',
+                width: 120,
+                valueFormatter: (value)=>usd(value)
+            },
+            {
+                field: 'requests',
+                headerName: 'Requests',
+                type: 'number',
+                align: 'right',
+                headerAlign: 'right',
+                width: 110,
+                valueFormatter: (value)=>value.toLocaleString()
+            },
+            {
+                field: 'refusals',
+                headerName: 'Refusals',
+                type: 'number',
+                align: 'right',
+                headerAlign: 'right',
+                width: 110,
+                valueFormatter: (value)=>value.toLocaleString()
+            },
+            listActionsColumn((row)=>/*#__PURE__*/ _jsx(ListRowActions, {
+                    label: row.name,
+                    quick: {
+                        icon: mdiOpenInNew.path,
+                        label: 'View account',
+                        to: buildRoute(Route.ADMIN_USER_DETAIL, {
+                            uid: row.uid
+                        })
+                    },
+                    items: []
+                }))
+        ], []);
+    return /*#__PURE__*/ _jsx(ListTable, {
+        rows: users,
+        columns: columns,
+        getRowId: (row)=>row.uid,
+        rowHeight: TABLE_ROW_HEIGHT,
+        onOpen: (uid)=>router.push(buildRoute(Route.ADMIN_USER_DETAIL, {
+                uid
+            }))
+    });
+}
+const StaffOrgAiCard = ({ orgId })=>{
+    var _ref;
+    const { data: user } = useUser();
+    // Keyed on who is signed in, not on the user object's identity.
+    const signedInUid = (_ref = user == null ? void 0 : user.uid) != null ? _ref : null;
+    const userRef = useRef(user);
+    userRef.current = user;
+    const [data, setData] = useState(null);
+    const [ready, setReady] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(()=>{
+        // Mounted only for a confirmed staff reader — the `staffOrg` zone sits
+        // inside the page's `StaffOnly`, which renders nothing while the claim
+        // loads — because the route records an access row on every successful
+        // open, and an open the page did not mean to make would be an access
+        // nobody made.
+        const user = userRef.current;
+        if (!orgId || !signedInUid || !user) return undefined;
+        let active = true;
+        setReady(false);
+        setError(null);
+        void (async ()=>{
+            try {
+                const response = await authorizedFetch(user, `/api/ai/admin/org?orgId=${encodeURIComponent(orgId)}`);
+                const payload = await response.json().catch(()=>null);
+                if (!active) return;
+                if (!response.ok) {
+                    var _ref;
+                    setError((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'AI lookup failed');
+                    setData(null);
+                } else {
+                    setData(payload);
+                }
+            } catch (unused) {
+                if (active) {
+                    setError('AI lookup failed');
+                    setData(null);
+                }
+            } finally{
+                if (active) setReady(true);
+            }
+        })();
+        return ()=>{
+            active = false;
+        };
+    }, [
+        orgId,
+        signedInUid
+    ]);
+    const name = aiAddonName();
+    return /*#__PURE__*/ _jsx(CardDisplay, {
+        header: name,
+        help: pluginDocsHelp('aiMonitoring', {
+            anchor: '#the-ai-card',
+            excerpt: 'The add-on, the credit pool and its parts, this month’s overage and refusals, generation jobs, tokens and the cache hit rate by kind, the people spending the most, and the margin — for this organization.'
+        }),
+        contentGutterX: true,
+        contentGutterY: true,
+        children: !ready ? /*#__PURE__*/ _jsx(Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            children: 'Loading…'
+        }) : error || !data ? /*#__PURE__*/ _jsx(Alert, {
+            severity: "warning",
+            children: `Could not read this organization’s AI usage — ${error != null ? error : 'a failed read'}, not zero usage.`
+        }) : /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.5,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "overline",
+                            color: "text.secondary",
+                            children: 'Add-on'
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            sx: {
+                                alignItems: 'center',
+                                flexWrap: 'wrap'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Chip, {
+                                    size: "small",
+                                    color: data.addon.on ? 'primary' : 'default',
+                                    label: data.addon.on ? `${name} on` : `${name} off`
+                                }),
+                                data.addon.priceUsd !== null ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    children: `${usd(data.addon.priceUsd)}/mo on this plan`
+                                }) : /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    color: "text.secondary",
+                                    children: 'Not sold on this plan'
+                                }),
+                                data.addon.on ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    color: "text.secondary",
+                                    children: data.addon.since ? `since ${when(data.addon.since)}` : data.addon.sinceSource === 'unavailable' ? 'since — (Stripe not reachable)' : 'since — (no subscription item)'
+                                }) : null
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.5,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "overline",
+                            color: "text.secondary",
+                            children: `Credit pool · ${data.month}`
+                        }),
+                        data.pool.totalCredits === null && data.pool.uncapped ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: 'Uncapped staff comp — no AI credit band. Bounded only by the message cap and an operator’s explicit spend ceiling.'
+                        }) : data.pool.totalCredits === null ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: 'No AI credit band on this plan — bounded by the message cap and the operator backstop.'
+                        }) : /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            children: `${credits(data.pool.totalCredits)} credits = ${poolPartsSentence(data.pool)}`
+                        }),
+                        /*#__PURE__*/ _jsxs(Typography, {
+                            variant: "body2",
+                            children: [
+                                `Used ${credits(data.pool.usedCredits)} credits (${usd(data.pool.providerUsd)} provider spend)`,
+                                data.pool.remainingCredits !== null ? ` · ${credits(data.pool.remainingCredits)} remaining` : ''
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: `Projected month-end at this pace: ${credits(data.pool.projectedCredits)} credits (${usd(data.pool.projectedUsd)}) · ${data.pool.messages.toLocaleString()} model turns, ${data.pool.deflected.toLocaleString()} answered from the docs`
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.5,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "overline",
+                            color: "text.secondary",
+                            children: 'Overage'
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            children: `${credits(data.overage.overageCredits)} credits over the band · ${usd(data.overage.accruedUsd)} accrued`
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: overageStateSentence(data.overage, data.pool.uncapped === true)
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.5,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "overline",
+                            color: "text.secondary",
+                            children: `Refusals this month · ${data.refusals.total.toLocaleString()}`
+                        }),
+                        /*#__PURE__*/ _jsx(RefusalsRow, {
+                            refusals: data.refusals
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.5,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "overline",
+                            color: "text.secondary",
+                            children: 'Generation jobs'
+                        }),
+                        /*#__PURE__*/ _jsx(JobsSection, {
+                            jobs: data.jobs
+                        })
+                    ]
+                }),
+                data.tokens ? /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.5,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "overline",
+                            color: "text.secondary",
+                            children: `Tokens · ${data.month}`
+                        }),
+                        /*#__PURE__*/ _jsx(TokensSection, {
+                            tokens: data.tokens
+                        })
+                    ]
+                }) : null,
+                /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.5,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "overline",
+                            color: "text.secondary",
+                            children: 'Top users this month'
+                        }),
+                        data.users.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: 'No AI usage attributed to a person this month.'
+                        }) : /*#__PURE__*/ _jsx(TopUsersSection, {
+                            users: data.users
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.5,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "overline",
+                            color: "text.secondary",
+                            children: 'Margin'
+                        }),
+                        /*#__PURE__*/ _jsxs(Alert, {
+                            severity: marginTone(data.margin),
+                            children: [
+                                `Spend ${usd(data.margin.spendUsd)} against ${usd(data.margin.revenueUsd)} in — ` + `${usd(data.margin.addonRevenueUsd)} add-on, ${usd(data.margin.planAssistShareUsd)} plan assist share, ` + `${usd(data.margin.overageRevenueUsd)} overage.`,
+                                data.margin.underwater ? ' Spend exceeds the add-on plus the plan’s assist share.' : '',
+                                data.margin.multiple >= 1 ? ` ${data.margin.multiple}× the ${usd(data.margin.thresholdUsd)} staff review threshold.` : ''
+                            ]
+                        }),
+                        data.margin.contribution.marginPct !== null ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: `Whole-org contribution margin ${Math.round(data.margin.contribution.marginPct * 100)}% on the ${data.margin.contribution.month} rollup with this month’s AI spend.`
+                        }) : null
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.5,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "overline",
+                            color: "text.secondary",
+                            children: 'Actions'
+                        }),
+                        /*#__PURE__*/ _jsxs(Typography, {
+                            variant: "body2",
+                            children: [
+                                'Credit override and feature toggles: ',
+                                /*#__PURE__*/ _jsx(AppLink, {
+                                    href: buildRoute(Route.ADMIN_ORGS),
+                                    underline: "hover",
+                                    children: 'the entitlement override editor'
+                                }),
+                                ' (also under Staff actions above). Pause AI for this org: ',
+                                /*#__PURE__*/ _jsx(AppLink, {
+                                    href: buildRoute(Route.ADMIN_LOCKDOWN),
+                                    underline: "hover",
+                                    children: 'Lockdown'
+                                }),
+                                ', feature keys ai-assist and ai-generate scoped to the org.'
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+StaffOrgAiCard.displayName = 'StaffOrgAiCard';
+export default StaffOrgAiCard;
+
+//# sourceMappingURL=staff-org-ai-card.component.js.map