@agent-native/core 0.152.1 → 0.153.1

package/dist/client/settings/UsageSection.js

@@ -1,112 +1,206 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconLoader2, IconRefresh } from "@tabler/icons-react";
-import { useEffect, useState } from "react";
-import { agentNativePath } from "../api-path.js";
-const RANGES = [
-    { value: 1, label: "24h" },
+import { Skeleton } from "@agent-native/toolkit/design-system";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Checkbox } from "@agent-native/toolkit/ui/checkbox";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@agent-native/toolkit/ui/select";
+import { IconArrowUpRight, IconBell, IconChartLine, IconChevronDown, IconLoader2, IconMail, IconPencil, IconPlus, IconRefresh, IconUsers, IconX, } from "@tabler/icons-react";
+import { useState } from "react";
+import { Link } from "react-router";
+import { useActionMutation, useActionQuery } from "../use-action.js";
+const LOOKBACKS = [
     { value: 7, label: "7d" },
     { value: 30, label: "30d" },
     { value: 90, label: "90d" },
 ];
-const USD_BILLING = {
-    unit: "usd",
-    label: "Estimated spend",
-    shortLabel: "Cost",
-    source: "estimated-provider-cost",
-};
-function displayAmountFromCostCents(cents, billing) {
-    if (billing.unit !== "builder-credits")
-        return cents;
-    const margin = billing.hardCostMarginMultiplier ?? 1.25;
-    const creditsPerUsd = billing.creditsPerUsd ?? 20;
-    const credits = (cents / 100) * margin * creditsPerUsd;
-    return credits <= 0 ? 0 : Math.ceil(credits * 1000) / 1000;
+function asAlertRules(value) {
+    if (Array.isArray(value))
+        return value;
+    if (value && typeof value === "object") {
+        const rules = value.rules;
+        if (Array.isArray(rules))
+            return rules;
+    }
+    return [];
 }
-function formatCredits(credits) {
-    if (!Number.isFinite(credits) || credits === 0)
-        return "0 credits";
-    const maximumFractionDigits = credits < 1 ? 3 : credits < 10 ? 2 : 1;
-    const value = credits.toLocaleString(undefined, {
-        maximumFractionDigits,
-    });
-    return `${value} ${credits === 1 ? "credit" : "credits"}`;
+function compactNumber(value) {
+    if (!Number.isFinite(value) || value === 0)
+        return "0";
+    if (value >= 1_000_000)
+        return `${(value / 1_000_000).toFixed(1)}M`;
+    if (value >= 1_000)
+        return `${(value / 1_000).toFixed(1)}K`;
+    return Math.round(value).toLocaleString();
 }
-function formatSpend(cents, billing) {
+function formatCost(cents, billing) {
     if (billing.unit === "builder-credits") {
-        return formatCredits(displayAmountFromCostCents(cents, billing));
+        const credits = (cents / 100) *
+            (billing.hardCostMarginMultiplier ?? 1.25) *
+            (billing.creditsPerUsd ?? 20);
+        return `${credits.toLocaleString(undefined, { maximumFractionDigits: 1 })} credits`;
     }
-    // Sub-cent values (e.g. a single LLM call at $0.0045 = 0.45¢) — keep
-    // three decimals so tiny calls don't round to 0.00¢. The prior impl
-    // multiplied by 100 in this branch, overstating small costs 100×.
-    if (cents < 1)
-        return `${cents.toFixed(3)}¢`;
     if (cents < 100)
         return `${cents.toFixed(2)}¢`;
-    return `$${(cents / 100).toFixed(2)}`;
+    return `$${(cents / 100).toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    })}`;
 }
-function formatAggregateCost(cost, billing) {
-    if (cost.status === "known")
-        return formatSpend(cost.knownCents, billing);
-    if (cost.status === "unavailable")
-        return "Unknown";
-    return `${formatSpend(cost.knownCents, billing)} + ${cost.unavailableCalls} unpriced`;
+function formatAlertValue(rule, value) {
+    if (rule.unit === "usd") {
+        return value.toLocaleString(undefined, {
+            style: "currency",
+            currency: "USD",
+            maximumFractionDigits: 2,
+        });
+    }
+    return `${value.toLocaleString(undefined, {
+        maximumFractionDigits: rule.unit === "tokens" ? 0 : 2,
+    })} ${rule.unit === "builder-credits" ? "credits" : "tokens"}`;
 }
-function formatTokens(n) {
-    if (n >= 1_000_000)
-        return `${(n / 1_000_000).toFixed(1)}M`;
-    if (n >= 1_000)
-        return `${(n / 1_000).toFixed(1)}K`;
-    return String(n);
+function appLabel(value) {
+    if (!value)
+        return "All apps";
+    const normalized = value.replace(/^agent-native-/i, "").replaceAll("-", " ");
+    return normalized.replace(/\b\w/g, (letter) => letter.toUpperCase());
 }
-function BucketBars({ buckets, emptyMessage, billing, }) {
-    if (buckets.length === 0) {
-        return (_jsx("p", { className: "text-[10px] text-muted-foreground py-1.5", children: emptyMessage }));
+function Trend({ daily, billing, }) {
+    if (daily.length === 0) {
+        return (_jsx("div", { className: "flex h-32 items-center justify-center rounded-lg border border-dashed border-border/70 text-sm text-muted-foreground", children: "No usage recorded in this lookback." }));
     }
-    const max = Math.max(...buckets.map((b) => displayAmountFromCostCents(b.cents, billing)), 0.0001);
-    return (_jsx("div", { className: "space-y-1", children: buckets.map((b) => (_jsxs("div", { className: "text-[10px]", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 mb-0.5", children: [_jsx("span", { className: "truncate text-foreground", title: b.key || "(none)", children: b.key || "(none)" }), _jsxs("span", { className: "shrink-0 text-muted-foreground tabular-nums", children: [formatAggregateCost(b.cost, billing), _jsxs("span", { className: "ms-1 opacity-60", children: ["\u00B7 ", formatTokens(b.inputTokens + b.outputTokens), " tok"] })] })] }), _jsx("div", { className: "h-1 rounded-full bg-accent/40 overflow-hidden", children: _jsx("div", { className: "h-full bg-foreground/70", style: {
-                            width: `${(displayAmountFromCostCents(b.cents, billing) / max) * 100}%`,
-                        } }) })] }, b.key))) }));
+    const values = daily.map((day) => billing.unit === "builder-credits"
+        ? (day.costCents / 100) *
+            (billing.hardCostMarginMultiplier ?? 1.25) *
+            (billing.creditsPerUsd ?? 20)
+        : day.costCents);
+    const max = Math.max(...values, 0.01);
+    const points = values.map((value, index) => {
+        const x = daily.length === 1 ? 50 : (index / (daily.length - 1)) * 100;
+        const y = 88 - (value / max) * 72;
+        return `${x.toFixed(2)},${y.toFixed(2)}`;
+    });
+    const line = points
+        .map((point, index) => `${index === 0 ? "M" : "L"} ${point}`)
+        .join(" ");
+    const area = `${line} L 100,96 L 0,96 Z`;
+    return (_jsxs("div", { className: "overflow-hidden rounded-lg border border-border/70 bg-muted/20 px-3 pb-2 pt-3", children: [_jsxs("svg", { "aria-label": "Daily usage trend", className: "h-32 w-full text-primary", viewBox: "0 0 100 96", preserveAspectRatio: "none", role: "img", children: [_jsx("path", { d: area, className: "fill-current opacity-10" }), _jsx("path", { d: line, className: "fill-none stroke-current", strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" })] }), _jsxs("div", { className: "flex justify-between text-[11px] text-muted-foreground", children: [_jsx("span", { children: new Date(`${daily[0].date}T00:00:00`).toLocaleDateString(undefined, { month: "short", day: "numeric" }) }), _jsx("span", { children: new Date(`${daily.at(-1).date}T00:00:00`).toLocaleDateString(undefined, { month: "short", day: "numeric" }) })] })] }));
+}
+function MetricCard({ label, value, detail, accent = false, }) {
+    return (_jsxs("div", { className: "min-w-0 rounded-lg border border-border/70 bg-card px-4 py-4", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: label }), _jsx("div", { className: `mt-1 truncate text-xl font-semibold tracking-[-0.02em] tabular-nums ${accent ? "text-primary" : "text-foreground"}`, children: value }), _jsx("div", { className: "mt-1 truncate text-xs text-muted-foreground", children: detail })] }));
+}
+function DriverList({ title, rows, billing, }) {
+    const max = Math.max(...rows.map((row) => row.costCents), 1);
+    return (_jsxs("div", { children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }), _jsx("span", { className: "text-[11px] uppercase tracking-[0.08em] text-muted-foreground", children: "Spend" })] }), rows.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "No usage recorded yet." })) : (_jsx("div", { className: "space-y-3", children: rows.slice(0, 5).map((row) => (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between gap-3 text-sm", children: [_jsx("span", { className: "min-w-0 truncate text-foreground", title: row.label, children: row.label }), _jsx("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: formatCost(row.costCents, billing) })] }), _jsx("div", { className: "mt-1.5 h-1 overflow-hidden rounded-full bg-muted", children: _jsx("div", { className: "h-full rounded-full bg-primary/70", style: {
+                                    width: `${Math.max(4, (row.costCents / max) * 100)}%`,
+                                } }) })] }, row.key))) }))] }));
 }
-function DailySparkline({ days, billing, }) {
-    if (days.length === 0)
-        return null;
-    const max = Math.max(...days.map((d) => displayAmountFromCostCents(d.cents, billing)), 0.0001);
-    return (_jsx("div", { className: "flex items-end gap-[2px] h-8 pt-2", children: days.map((d) => (_jsx("div", { className: "flex-1 bg-foreground/60 rounded-sm min-h-[1px]", style: {
-                height: `${Math.max(2, (displayAmountFromCostCents(d.cents, billing) / max) * 100)}%`,
-            }, title: `${d.date}: ${formatAggregateCost(d.cost, billing)} (${d.calls} calls)` }, d.date))) }));
+function UsageLoadingState() {
+    return (_jsxs("div", { className: "space-y-5", role: "status", "aria-label": "Loading usage", children: [_jsx("div", { className: "grid gap-3 sm:grid-cols-3", children: ["w-24", "w-16", "w-20"].map((width) => (_jsxs("div", { className: "rounded-lg border border-border/70 p-4", children: [_jsx(Skeleton, { className: `h-3 ${width}` }), _jsx(Skeleton, { className: "mt-3 h-6 w-24" }), _jsx(Skeleton, { className: "mt-2 h-3 w-28" })] }, width))) }), _jsxs("div", { className: "rounded-lg border border-border/70 p-4", children: [_jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "mt-3 h-32 w-full" })] })] }));
 }
-export function UsageSection() {
-    const [days, setDays] = useState(30);
-    const [data, setData] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const billing = data?.billing ?? USD_BILLING;
-    const load = async (rangeDays) => {
-        setLoading(true);
-        setError(null);
-        try {
-            const res = await fetch(agentNativePath(`/_agent-native/usage?sinceDays=${rangeDays}`));
-            if (!res.ok) {
-                throw new Error(`Failed (${res.status})`);
-            }
-            const json = (await res.json());
-            setData(json);
-        }
-        catch (err) {
-            setError(err?.message || "Failed to load usage");
-        }
-        finally {
-            setLoading(false);
-        }
+function AlertEditor({ draft, onChange, onSave, onCancel, isPending, }) {
+    const channelCount = Number(draft.inApp) + Number(draft.email);
+    return (_jsxs("div", { className: "mt-3 rounded-lg border border-border/70 bg-muted/20 p-3", children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-[1fr_1fr_1fr]", children: [_jsxs("label", { className: "space-y-1.5 text-xs text-muted-foreground", children: [_jsx("span", { children: "Unit" }), _jsxs(Select, { value: draft.unit, onValueChange: (value) => onChange({ unit: value }), children: [_jsx(SelectTrigger, { className: "h-9 bg-background text-sm", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "usd", children: "Dollars" }), _jsx(SelectItem, { value: "builder-credits", children: "Builder credits" }), _jsx(SelectItem, { value: "tokens", children: "Tokens" })] })] })] }), _jsxs("label", { className: "space-y-1.5 text-xs text-muted-foreground", children: [_jsx("span", { children: "Threshold" }), _jsx(Input, { type: "number", min: "0.01", step: draft.unit === "tokens" ? "1" : "0.01", value: draft.limit, onChange: (event) => onChange({ limit: event.target.value }), className: "h-9 bg-background text-sm" })] }), _jsxs("label", { className: "space-y-1.5 text-xs text-muted-foreground", children: [_jsx("span", { children: "Window" }), _jsxs(Select, { value: draft.period, onValueChange: (value) => onChange({ period: value }), children: [_jsx(SelectTrigger, { className: "h-9 bg-background text-sm", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "day", children: "Per day" }), _jsx(SelectItem, { value: "month", children: "Per month" })] })] })] })] }), _jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-4 text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-foreground", children: "Deliver via" }), _jsxs("label", { className: "inline-flex items-center gap-2", children: [_jsx(Checkbox, { checked: draft.inApp, onCheckedChange: (checked) => onChange({ inApp: checked === true }) }), _jsx(IconBell, { className: "size-3.5" }), " In app"] }), _jsxs("label", { className: "inline-flex items-center gap-2", children: [_jsx(Checkbox, { checked: draft.email, onCheckedChange: (checked) => onChange({ email: checked === true }) }), _jsx(IconMail, { className: "size-3.5" }), " Email"] }), _jsxs("div", { className: "ms-auto flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancel, children: "Cancel" }), _jsxs(Button, { type: "button", size: "sm", onClick: onSave, disabled: isPending || channelCount === 0, children: [isPending ? _jsx(IconLoader2, { className: "animate-spin" }) : null, "Save alert"] })] })] })] }));
+}
+function UsageAlertsSection({ appId }) {
+    const query = useActionQuery("get-usage-alerts", {
+        scope: "user",
+        appId,
+    });
+    const mutation = useActionMutation("manage-usage-alert");
+    const [editing, setEditing] = useState(null);
+    const rules = asAlertRules(query.data);
+    function saveDraft() {
+        if (!editing)
+            return;
+        const limit = Number(editing.limit);
+        const channels = [];
+        if (editing.inApp)
+            channels.push("in-app");
+        if (editing.email)
+            channels.push("email");
+        if (!Number.isFinite(limit) || limit <= 0 || channels.length === 0)
+            return;
+        mutation.mutate({
+            operation: "save",
+            scope: "user",
+            ruleId: editing.ruleId,
+            appId: editing.appId,
+            unit: editing.unit,
+            period: editing.period,
+            limit,
+            channels,
+            enabled: true,
+        });
+        setEditing(null);
+    }
+    function editRule(rule) {
+        setEditing({
+            ruleId: rule.id,
+            appId: rule.appId,
+            unit: rule.unit,
+            period: rule.period,
+            limit: String(rule.limit),
+            inApp: rule.channels.includes("in-app"),
+            email: rule.channels.includes("email"),
+        });
+    }
+    return (_jsxs("section", { className: "rounded-lg border border-border/70 bg-card", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3 border-b border-border/70 px-4 py-4", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "mt-0.5 rounded-md bg-primary/10 p-2 text-primary", children: _jsx(IconBell, { className: "size-4" }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Usage alerts" }), _jsx("p", { className: "mt-1 max-w-xl text-xs leading-5 text-muted-foreground", children: "Inherited defaults and app-specific thresholds for this app." })] })] }), appId ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setEditing({
+                            appId,
+                            unit: "usd",
+                            period: "day",
+                            limit: "100",
+                            inApp: true,
+                            email: true,
+                        }), disabled: mutation.isPending, children: [_jsx(IconPlus, {}), " Add app alert"] })) : null] }), _jsxs("div", { className: "divide-y divide-border/70", children: [query.isLoading && rules.length === 0 ? (_jsxs("div", { className: "space-y-3 px-4 py-5", children: [_jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "h-3 w-72" })] })) : null, query.isError ? (_jsx("div", { className: "px-4 py-5 text-sm text-destructive", children: "Usage alerts are unavailable for this account." })) : null, !query.isLoading && !query.isError && rules.length === 0 ? (_jsx("div", { className: "px-4 py-5 text-sm text-muted-foreground", children: "No alert rules are configured." })) : null, rules.map((rule) => {
+                        const isEditing = editing?.ruleId === rule.id;
+                        const statusLabel = rule.status === "triggered"
+                            ? "Over limit"
+                            : rule.status === "dismissed"
+                                ? "Dismissed"
+                                : "On track";
+                        return (_jsxs("div", { className: "px-4 py-4", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium text-foreground", children: rule.isDefault ? "All apps" : appLabel(rule.appId) }), rule.isDefault ? (_jsx(Badge, { variant: "secondary", children: "Inherited default" })) : null, _jsx(Badge, { variant: rule.status === "triggered"
+                                                                ? "destructive"
+                                                                : rule.status === "dismissed"
+                                                                    ? "secondary"
+                                                                    : "outline", children: statusLabel })] }), _jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [formatAlertValue(rule, rule.current), " of", " ", formatAlertValue(rule, rule.limit), " \u00B7 per ", rule.period, rule.percent > 0 ? ` · ${rule.percent}%` : ""] }), _jsxs("div", { className: "mt-2 flex flex-wrap gap-3 text-[11px] text-muted-foreground", children: [rule.channels.includes("in-app") ? (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(IconBell, { className: "size-3.5" }), " In app"] })) : null, rule.channels.includes("email") ? (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(IconMail, { className: "size-3.5" }), " Email"] })) : null] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { checked: rule.enabled, onCheckedChange: (checked) => mutation.mutate({
+                                                        operation: "set-enabled",
+                                                        scope: "user",
+                                                        ruleId: rule.id,
+                                                        enabled: checked === true,
+                                                    }), "aria-label": `${rule.enabled ? "Disable" : "Enable"} usage alert`, disabled: mutation.isPending }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => editRule(rule), "aria-label": "Edit usage alert", disabled: mutation.isPending, children: _jsx(IconPencil, {}) }), rule.status === "triggered" ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => mutation.mutate({
+                                                        operation: "dismiss",
+                                                        scope: "user",
+                                                        ruleId: rule.id,
+                                                    }), "aria-label": "Dismiss usage alert", disabled: mutation.isPending, children: _jsx(IconX, {}) })) : null] })] }), isEditing && editing ? (_jsx(AlertEditor, { draft: editing, onChange: (patch) => setEditing((current) => current ? { ...current, ...patch } : current), onSave: saveDraft, onCancel: () => setEditing(null), isPending: mutation.isPending })) : null] }, rule.id));
+                    }), editing && !editing.ruleId ? (_jsxs("div", { className: "px-4 py-4", children: [_jsx("div", { className: "mb-2 text-xs font-medium text-muted-foreground", children: appLabel(editing.appId) }), _jsx(AlertEditor, { draft: editing, onChange: (patch) => setEditing((current) => current ? { ...current, ...patch } : current), onSave: saveDraft, onCancel: () => setEditing(null), isPending: mutation.isPending })] })) : null] })] }));
+}
+export function UsageSection({ appId = null, viewAllHref, }) {
+    const [sinceDays, setSinceDays] = useState(30);
+    const [scope, setScope] = useState("me");
+    const [selectedUserEmail, setSelectedUserEmail] = useState(null);
+    const query = useActionQuery("get-usage-metrics", {
+        sinceDays,
+        scope,
+        userEmail: scope === "workspace" ? (selectedUserEmail ?? undefined) : undefined,
+        appId: appId ?? undefined,
+    });
+    const data = query.data;
+    const billing = data?.billing ?? {
+        unit: "usd",
+        label: "Estimated spend",
     };
-    useEffect(() => {
-        load(days);
-    }, [days]);
-    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "flex gap-1 rounded-md border border-border p-0.5", children: RANGES.map((r) => (_jsx("button", { onClick: () => setDays(r.value), className: `px-2 py-0.5 text-[10px] rounded ${days === r.value
-                                ? "bg-accent text-foreground"
-                                : "text-muted-foreground hover:text-foreground"}`, children: r.label }, r.value))) }), _jsx("button", { onClick: () => load(days), className: "flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground", disabled: loading, children: loading ? (_jsx(IconLoader2, { size: 11, className: "animate-spin" })) : (_jsx(IconRefresh, { size: 11 })) })] }), error && _jsx("p", { className: "text-[10px] text-red-500", children: error }), data && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "rounded-md border border-border px-2.5 py-2", children: [_jsxs("div", { className: "flex items-baseline justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[10px] text-muted-foreground", children: billing.unit === "builder-credits"
-                                                    ? "Builder.io credit spend"
-                                                    : "Total spend" }), _jsx("div", { className: "text-[18px] font-semibold tabular-nums", children: formatAggregateCost(data.totalCost, billing) })] }), _jsxs("div", { className: "text-end", children: [_jsxs("div", { className: "text-[10px] text-muted-foreground", children: [data.totalCalls, " calls"] }), _jsxs("div", { className: "text-[10px] text-muted-foreground", children: [formatTokens(data.totalInputTokens), " in \u00B7", " ", formatTokens(data.totalOutputTokens), " out"] }), data.totalCacheReadTokens > 0 && (_jsxs("div", { className: "text-[10px] text-green-500/80", children: [formatTokens(data.totalCacheReadTokens), " cached"] }))] })] }), _jsx(DailySparkline, { days: data.byDay, billing: billing })] }), _jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-medium text-foreground mb-1", children: "By label" }), _jsx(BucketBars, { buckets: data.byLabel, emptyMessage: "No labeled calls yet.", billing: billing })] }), _jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-medium text-foreground mb-1", children: "By model" }), _jsx(BucketBars, { buckets: data.byModel, emptyMessage: "No calls recorded.", billing: billing })] }), data.byApp.filter((b) => b.key).length > 1 && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-medium text-foreground mb-1", children: "By app" }), _jsx(BucketBars, { buckets: data.byApp, emptyMessage: "", billing: billing })] })), data.recent.length > 0 && (_jsxs("details", { children: [_jsxs("summary", { className: "text-[10px] font-medium text-foreground cursor-pointer select-none hover:text-foreground/80", children: ["Recent calls (", data.recent.length, ")"] }), _jsx("div", { className: "mt-1.5 max-h-48 overflow-y-auto space-y-0.5 rounded border border-border", children: data.recent.map((r) => (_jsxs("div", { className: "flex items-center justify-between gap-2 px-2 py-1 text-[10px] border-b border-border last:border-b-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "truncate text-foreground", title: r.label, children: [r.label, r.app ? (_jsxs("span", { className: "text-muted-foreground", children: [" ", "\u00B7 ", r.app] })) : null] }), _jsxs("div", { className: "truncate text-muted-foreground", children: [new Date(r.createdAt).toLocaleString(), " \u00B7 ", r.model] })] }), _jsx("div", { className: "shrink-0 text-end tabular-nums text-muted-foreground", children: r.costSource === "unavailable"
-                                                ? "Unknown"
-                                                : formatSpend(r.cents, billing) })] }, r.id))) })] })), billing.unit === "builder-credits" ? (_jsxs("p", { className: "text-[10px] text-muted-foreground", children: ["Builder.io credits are estimated from hard token cost, a", " ", billing.hardCostMarginMultiplier ?? 1.25, "x margin, and", " ", billing.creditsPerUsd ?? 20, " credits per dollar."] })) : (_jsx("p", { className: "text-[10px] text-muted-foreground", children: "Spend is estimated from published Anthropic pricing and your own recorded token counts. Cached input is priced at ~10% of regular input. Calls without provider pricing are marked unknown and excluded from known-cost subtotals." }))] }))] }));
+    const totalTokens = data
+        ? data.totals.inputTokens +
+            data.totals.outputTokens +
+            (data.totals.cacheReadTokens ?? 0) +
+            (data.totals.cacheWriteTokens ?? 0)
+        : 0;
+    return (_jsxs("div", { className: "mx-auto w-full max-w-5xl space-y-6", children: [_jsxs("header", { className: "flex flex-col gap-4 border-b border-border/70 pb-5 lg:flex-row lg:items-end lg:justify-between", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-medium uppercase tracking-[0.1em] text-primary", children: [_jsx(IconChartLine, { className: "size-4" }), " Usage"] }), _jsxs("h1", { className: "mt-2 text-xl font-semibold tracking-[-0.02em] text-foreground", children: [appLabel(appId), " usage"] }), _jsx("p", { className: "mt-1 max-w-xl text-sm leading-6 text-muted-foreground", children: "A focused view of spend, capacity, and the prompts driving this app." })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [data?.access.canViewWorkspace ? (_jsxs(Select, { value: scope, onValueChange: (value) => {
+                                    setScope(value);
+                                    setSelectedUserEmail(null);
+                                }, children: [_jsx(SelectTrigger, { className: "h-9 w-32 text-xs", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "me", children: "My usage" }), _jsx(SelectItem, { value: "workspace", children: "Workspace" })] })] })) : null, scope === "workspace" && data ? (_jsxs(Select, { value: selectedUserEmail ?? "all", onValueChange: (value) => setSelectedUserEmail(value === "all" ? null : value), children: [_jsx(SelectTrigger, { className: "h-9 w-44 text-xs", children: _jsx(SelectValue, { placeholder: "All users" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All users" }), data.availableUsers.map((user) => (_jsx(SelectItem, { value: user.email, children: user.email }, user.email)))] })] })) : null, _jsx("div", { className: "flex items-center rounded-md border border-border/70 p-0.5", children: LOOKBACKS.map((range) => (_jsx(Button, { type: "button", variant: sinceDays === range.value ? "secondary" : "ghost", size: "sm", className: "h-8 px-2.5 text-xs", onClick: () => setSinceDays(range.value), children: range.label }, range.value))) }), _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => void query.refetch(), disabled: query.isFetching, "aria-label": "Refresh usage", title: "Refresh usage", children: query.isFetching ? (_jsx(IconLoader2, { className: "animate-spin" })) : (_jsx(IconRefresh, {})) })] })] }), query.isError && !data ? (_jsxs("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-4 text-sm", role: "alert", children: [_jsx("div", { className: "font-medium text-destructive", children: "Usage data couldn\u2019t be loaded." }), _jsx(Button, { type: "button", variant: "link", size: "sm", className: "mt-1 h-auto p-0", onClick: () => void query.refetch(), children: "Try again" })] })) : null, !data && query.isLoading ? _jsx(UsageLoadingState, {}) : null, data ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-3", children: [_jsx(MetricCard, { label: billing.label, value: formatCost(data.totals.costCents, billing), detail: `${sinceDays} day lookback`, accent: true }), _jsx(MetricCard, { label: "Calls", value: data.totals.calls.toLocaleString(), detail: `${data.currentDay.calls.toLocaleString()} today` }), _jsx(MetricCard, { label: "Tokens", value: compactNumber(totalTokens), detail: `${compactNumber(data.currentDay.tokens)} today` })] }), _jsxs("section", { className: "rounded-lg border border-border/70 bg-card p-4", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Daily trend" }), _jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [formatCost(data.currentDay.costCents, billing), " used today \u00B7", " ", data.currentDay.calls.toLocaleString(), " calls"] })] }), _jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [scope === "workspace" ? (_jsx(IconUsers, { className: "size-3.5" })) : null, scope === "workspace"
+                                                ? (selectedUserEmail ?? "All users")
+                                                : "Your usage"] })] }), _jsx("div", { className: "mt-4", children: _jsx(Trend, { daily: data.daily, billing: billing }) })] }), _jsxs("details", { className: "group rounded-lg border border-border/70 bg-card", children: [_jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-4 outline-none transition-colors hover:bg-accent/30 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset [&::-webkit-details-marker]:hidden", children: [_jsxs("span", { children: [_jsx("span", { className: "block text-sm font-semibold text-foreground", children: "Top usage drivers" }), _jsx("span", { className: "mt-1 block text-xs text-muted-foreground", children: "Breakdowns stay collapsed until you need them." })] }), _jsx(IconChevronDown, { className: "size-4 text-muted-foreground transition-transform group-open:rotate-180" })] }), _jsxs("div", { className: "grid gap-6 border-t border-border/70 px-4 py-4 md:grid-cols-2", children: [_jsx(DriverList, { title: "By workflow", rows: data.byLabel, billing: billing }), _jsx(DriverList, { title: "By model", rows: data.byModel, billing: billing })] })] }), _jsxs("details", { className: "group rounded-lg border border-border/70 bg-card", children: [_jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-4 outline-none transition-colors hover:bg-accent/30 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset [&::-webkit-details-marker]:hidden", children: [_jsxs("span", { children: [_jsx("span", { className: "block text-sm font-semibold text-foreground", children: "Recent prompts" }), _jsx("span", { className: "mt-1 block text-xs text-muted-foreground", children: "Latest recorded prompts for the selected app and user scope." })] }), _jsxs("span", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [data.recent.length, _jsx(IconChevronDown, { className: "size-4 transition-transform group-open:rotate-180" })] })] }), _jsx("div", { className: "border-t border-border/70", children: data.recent.length === 0 ? (_jsx("p", { className: "px-4 py-5 text-sm text-muted-foreground", children: "No recent prompts recorded." })) : (_jsx("div", { className: "divide-y divide-border/60", children: data.recent.map((entry) => (_jsxs("div", { className: "px-4 py-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-[11px] text-muted-foreground", children: [_jsxs("span", { children: [entry.label, " \u00B7 ", entry.model] }), _jsx("span", { children: entry.ownerEmail })] }), _jsx("p", { className: "mt-1 line-clamp-2 text-sm text-foreground", children: entry.prompt ??
+                                                    "Prompt text was not captured for this call." })] }, entry.id))) })) })] }), _jsx(UsageAlertsSection, { appId: appId }), viewAllHref ? (_jsx("div", { className: "flex justify-end", children: _jsx(Button, { asChild: true, variant: "link", size: "sm", className: "gap-1.5", children: _jsxs(Link, { to: viewAllHref, children: ["View all usage", _jsx(IconArrowUpRight, {})] }) }) })) : null] })) : null] }));
 }

package/dist/client/settings/agent-settings-search.js

@@ -51,7 +51,6 @@ export const INTEGRATION_SETTINGS_SECTIONS = [
     "secrets",
     "email",
     "browser",
-    "usage",
 ];
 export const WORKSPACE_SETTINGS_SECTIONS = [
     "demo-mode",
@@ -157,9 +156,14 @@ export function getAgentSettingsSearchTabs() {
         {
             id: "integrations",
             label: "Integrations",
-            keywords: "integrations agent integrations connections secrets email browser usage tools",
+            keywords: "integrations agent integrations connections secrets email browser tools",
             searchEntries: buildSectionSearchEntries(INTEGRATION_SETTINGS_SECTIONS),
         },
+        {
+            id: "usage",
+            label: "Usage",
+            keywords: "usage tokens cost spend billing consumption credits calls",
+        },
         {
             id: "organization",
             label: "Organization",

package/dist/client/setup-connections/useBuilderConnectCardController.d.ts

@@ -15,7 +15,7 @@ export type BuilderConnectCardStatus = {
     label: string;
 };
 export interface BuilderConnectCardAction {
-    label: "Connect Builder";
+    label: "Connect Builder.io";
     pending: boolean;
     disabled: boolean;
     onPress: () => void;

package/dist/client/setup-connections/useBuilderConnectCardController.js

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { useBuilderConnectFlow } from "../settings/useBuilderStatus.js";
 const DEFAULT_TITLE = "Builder connect";
-const DEFAULT_DESCRIPTION = "Connect Builder for managed model access, browser automation, and workspace identity. Free tier available.";
+const DEFAULT_DESCRIPTION = "Connect Builder.io for managed model access, browser automation, and workspace identity. Free tier available.";
 const DEFAULT_TRACKING_SOURCE = "setup_connections_page";
 export function useBuilderConnectCardController({ title = DEFAULT_TITLE, description = DEFAULT_DESCRIPTION, trackingSource = DEFAULT_TRACKING_SOURCE, onConnected, } = {}) {
     const handleConnected = useCallback(({ orgName }) => onConnected?.(orgName), [onConnected]);
@@ -29,7 +29,7 @@ export function useBuilderConnectCardController({ title = DEFAULT_TITLE, descrip
         action: flow.configured
             ? null
             : {
-                label: "Connect Builder",
+                label: "Connect Builder.io",
                 pending: flow.connecting,
                 disabled: flow.connecting,
                 onPress: handlePress,

package/dist/client/sharing/ShareButton.d.ts

@@ -29,8 +29,8 @@ export interface ShareButtonProps {
     shareUrlLabel?: string;
     /** Optional helper text for the primary copyable link section. */
     shareUrlDescription?: ReactNode;
-    /** Where to render share links in the popover. Defaults to the bottom,
-     *  matching the historical Google-Docs-style share dialog. */
+    /** Where to render share links in the popover. Defaults to the top,
+     *  keeping the copyable link as the primary share action. */
     shareUrlPlacement?: "top" | "bottom";
     /** Whether to render copyable share URL fields. Defaults to true. */
     showShareLinks?: boolean;
@@ -66,6 +66,8 @@ export interface ShareButtonProps {
         label?: string;
         description?: string;
     }>>;
+    /** Optional role capability boundary for resources without comment support. */
+    allowedRoles?: readonly Role[];
     /** Optional label for the explicit per-person access list. */
     peopleAccessLabel?: ReactNode;
     /** Optional label for the coarse visibility control. */

package/dist/client/sharing/ShareButton.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@agent-native/toolkit/ui";
 import * as Select from "@radix-ui/react-select";
 import { IconLock, IconWorld, IconTrash, IconCheck, IconChevronDown, IconCopy, IconLoader2, IconSearch, IconSearchOff, IconShare3, IconUsersGroup, } from "@tabler/icons-react";
 import { useEffect, useId, useRef, useState, } from "react";
@@ -43,6 +44,11 @@ function visibilityMeta(visibility, copy) {
 }
 const ROLE_OPTIONS = [
     { value: "viewer", label: "Viewer", description: "Can view" },
+    {
+        value: "commenter",
+        label: "Commenter",
+        description: "Can view and add comments",
+    },
     { value: "editor", label: "Editor", description: "Can edit" },
     {
         value: "admin",
@@ -83,6 +89,7 @@ export function ShareButton(props) {
         onOpenChange: props.onOpenChange,
         shareTabs: props.shareTabs,
         shareUrl: props.shareUrl,
+        allowedRoles: props.allowedRoles,
         hideInSearchControl: props.hideInSearchControl,
     });
     const triggerVisibility = controller.triggerVisibility;
@@ -108,25 +115,29 @@ function SharePanel(props) {
         (Boolean(props.shareUrl) ||
             Boolean(props.shareUrlPlaceholder) ||
             Boolean(props.secondaryShareUrl));
-    const shareUrlPlacement = props.shareUrlPlacement ?? "bottom";
+    const shareUrlPlacement = props.shareUrlPlacement ?? "top";
+    const [advancedOpen, setAdvancedOpen] = useState(!showShareLinks);
+    useEffect(() => {
+        setAdvancedOpen(!showShareLinks);
+    }, [props.resourceId, showShareLinks]);
     const extraTabs = props.shareTabs?.tabs ?? [];
     const hasTabs = extraTabs.length > 0;
     const shareTabLabel = props.shareTabs?.shareLabel ?? "Share link";
     const titleText = resourceTitle
         ? `Share "${resourceTitle}"`
         : `Share ${props.resourceType}`;
-    const sharePanel = isLoading ? (_jsxs("div", { children: [!hasTabs ? (_jsx("div", { className: "mb-3 truncate text-base font-semibold", title: titleText, children: titleText })) : null, _jsx("div", { className: "mb-4 h-9 rounded-md bg-muted animate-pulse" }), _jsx("div", { className: "mb-2 text-sm font-semibold", children: peopleAccessLabel }), _jsx("div", { className: "mb-4 h-7 rounded-md bg-muted animate-pulse" }), _jsx("div", { className: "mb-2 text-sm font-semibold", children: generalAccessLabel }), _jsx("div", { className: "mb-4 h-9 rounded-md bg-muted animate-pulse" })] })) : (_jsxs("div", { children: [!hasTabs ? (_jsx("div", { className: "mb-3 truncate text-base font-semibold", title: titleText, children: titleText })) : null, showShareLinks && shareUrlPlacement === "top" ? shareLinks : null, canManage ? (_jsxs("div", { className: "mb-4 space-y-2", children: [_jsxs("div", { className: "flex items-stretch gap-2", children: [_jsx(MemberAutocomplete, { value: inviteEmail, open: suggestionsOpen, onOpenChange: setSuggestionsOpen, onValueChange: (next) => {
-                                    onInviteEmailChange(next);
-                                    if (shareError)
-                                        setShareError(null);
-                                }, onSelectMember: (member) => {
-                                    onInviteEmailChange(member.email);
-                                    setSuggestionsOpen(false);
-                                    if (shareError)
-                                        setShareError(null);
-                                }, onSubmit: handleAdd, placeholder: policy.requireOrgMemberForUserShares
-                                    ? "Add people from your organization"
-                                    : "Add people by email", suggestions: memberSuggestions, search: memberSearch }), _jsx(RoleSelect, { value: role, onChange: setRole, roleCopy: props.roleCopy }), _jsx("button", { type: "button", onClick: handleAdd, disabled: !hasInviteEmail, className: BUTTON_PRIMARY_SM, children: "Add" })] }), shareError ? (_jsx("div", { role: "alert", className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: shareError })) : null, hasInviteEmail ? (_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-xs text-muted-foreground", children: [_jsxs("label", { className: "inline-flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: notifyPeople, onChange: (e) => setNotifyPeople(e.target.checked), className: "h-4 w-4 rounded border-input accent-primary" }), "Notify people"] }), notifyPeople ? (_jsx("button", { type: "button", "aria-expanded": messageOpen, onClick: () => setMessageOpen(!messageOpen), className: "rounded-sm px-1 py-0.5 font-medium text-foreground underline decoration-border underline-offset-2 transition-colors hover:bg-accent hover:text-accent-foreground", children: messageOpen ? "Hide message" : "Add a message" })) : null] })) : null, hasInviteEmail && notifyPeople && messageOpen ? (_jsx("div", { className: "rounded-md border border-border/70 bg-muted/20 p-2.5", children: _jsx("textarea", { "aria-label": "Message", placeholder: "Add a short note (optional)", value: shareMessage, onChange: (event) => setShareMessage(event.target.value), maxLength: 500, rows: 3, className: "w-full resize-y rounded-md border border-input bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background" }) })) : null] })) : null, _jsx("div", { className: "mb-2 text-sm font-semibold", children: peopleAccessLabel }), _jsxs("ul", { className: "mb-4 flex flex-col gap-1 list-none p-0 m-0", children: [data?.ownerEmail ? (_jsxs("li", { className: "flex items-center gap-3 px-1 py-1.5 text-sm", children: [_jsx(Avatar, { label: displayName(data.ownerEmail, knownMembers) }), _jsx("span", { className: "flex-1 min-w-0 truncate", children: displayName(data.ownerEmail, knownMembers) }), _jsx("span", { className: "text-xs text-muted-foreground", children: "Owner" })] })) : null, shares.map((s) => (_jsxs("li", { className: cn("flex items-center gap-3 px-1 py-1.5 text-sm", inFlight.has(keyOf(s)) && "opacity-60"), children: [_jsx(Avatar, { label: principalLabel(s, knownMembers), org: s.principalType === "org" }), _jsx("span", { className: "flex-1 min-w-0 truncate", children: principalLabel(s, knownMembers) }), canManage ? (_jsx(RoleSelect, { value: s.role, onChange: (r) => handleChangeRole(s, r), disabled: inFlight.has(keyOf(s)), plain: true, roleCopy: props.roleCopy })) : (_jsx("span", { className: "text-xs text-muted-foreground", children: roleMeta(s.role, props.roleCopy).label })), canManage ? (_jsx("button", { type: "button", "aria-label": "Remove", onClick: () => handleRemove(s), disabled: inFlight.has(keyOf(s)), className: BUTTON_GHOST_ICON, children: _jsx(IconTrash, { size: 14 }) })) : null] }, keyOf(s)))), !shares.length && !data?.ownerEmail ? (_jsx("li", { className: "px-1 py-1.5 text-sm text-muted-foreground", children: "No one has access yet." })) : null] }), _jsx("div", { className: "mb-2 text-sm font-semibold", children: generalAccessLabel }), _jsxs("div", { className: "mb-4 flex items-center gap-3", children: [_jsx("span", { "aria-hidden": true, className: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground", children: _jsx(meta.Icon, { size: 16, strokeWidth: 1.75 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(VisibilitySelect, { value: visibility, onChange: handleVisibility, disabled: !canManage, visibilityCopy: props.visibilityCopy, allowPublic: policy.allowPublic }), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground", children: [_jsx("span", { children: meta.description }), visibility === "org" && props.hideInSearchControl ? (_jsx(AdvancedAccessPopover, { control: props.hideInSearchControl, canManage: canManage, onToggle: handleHideInSearch })) : null] })] })] }), shareError && !canManage ? (_jsx("div", { role: "alert", className: "mb-4 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: shareError })) : null, props.accessNote ? (_jsx("div", { className: "mb-4 rounded-md border border-border bg-muted/35 p-3 text-xs text-muted-foreground", children: props.accessNote })) : null, showShareLinks && shareUrlPlacement === "bottom" ? shareLinks : null, props.shareFooterContent] }));
+    const sharePanel = isLoading ? (_jsxs("div", { children: [!hasTabs ? (_jsx("div", { className: "mb-3 truncate text-base font-semibold", title: titleText, children: titleText })) : null, _jsx("div", { className: "mb-4 h-9 rounded-md bg-muted animate-pulse" }), _jsx("div", { className: "mb-2 text-sm font-semibold", children: peopleAccessLabel }), _jsx("div", { className: "mb-4 h-7 rounded-md bg-muted animate-pulse" }), _jsx("div", { className: "mb-2 text-sm font-semibold", children: generalAccessLabel }), _jsx("div", { className: "mb-4 h-9 rounded-md bg-muted animate-pulse" })] })) : (_jsxs("div", { children: [!hasTabs ? (_jsx("div", { className: "mb-3 truncate text-base font-semibold", title: titleText, children: titleText })) : null, showShareLinks && shareUrlPlacement === "top" ? shareLinks : null, _jsxs(Collapsible, { open: advancedOpen, onOpenChange: setAdvancedOpen, className: "mb-4 overflow-hidden rounded-md border border-border", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex min-h-10 w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm font-medium transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2 truncate", children: [_jsx(IconUsersGroup, { "aria-hidden": true, size: 15, strokeWidth: 1.8, className: "shrink-0 text-muted-foreground" }), canManage ? "Manage access" : peopleAccessLabel] }), _jsx(IconChevronDown, { "aria-hidden": true, size: 16, strokeWidth: 1.8, className: cn("shrink-0 text-muted-foreground transition-transform", advancedOpen && "rotate-180") })] }) }), _jsx(CollapsibleContent, { className: "border-t border-border px-3 py-3", children: _jsxs("div", { className: "space-y-4", children: [canManage ? (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-stretch gap-2", children: [_jsx(MemberAutocomplete, { value: inviteEmail, open: suggestionsOpen, onOpenChange: setSuggestionsOpen, onValueChange: (next) => {
+                                                        onInviteEmailChange(next);
+                                                        if (shareError)
+                                                            setShareError(null);
+                                                    }, onSelectMember: (member) => {
+                                                        onInviteEmailChange(member.email);
+                                                        setSuggestionsOpen(false);
+                                                        if (shareError)
+                                                            setShareError(null);
+                                                    }, onSubmit: handleAdd, placeholder: policy.requireOrgMemberForUserShares
+                                                        ? "Add people from your organization"
+                                                        : "Add people by email", suggestions: memberSuggestions, search: memberSearch }), _jsx(RoleSelect, { value: role, onChange: setRole, roleCopy: props.roleCopy, allowedRoles: props.allowedRoles }), _jsx("button", { type: "button", onClick: handleAdd, disabled: !hasInviteEmail, className: BUTTON_PRIMARY_SM, children: "Add" })] }), shareError ? (_jsx("div", { role: "alert", className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: shareError })) : null, hasInviteEmail ? (_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-xs text-muted-foreground", children: [_jsxs("label", { className: "inline-flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: notifyPeople, onChange: (e) => setNotifyPeople(e.target.checked), className: "h-4 w-4 rounded border-input accent-primary" }), "Notify people"] }), notifyPeople ? (_jsx("button", { type: "button", "aria-expanded": messageOpen, onClick: () => setMessageOpen(!messageOpen), className: "rounded-sm px-1 py-0.5 font-medium text-foreground underline decoration-border underline-offset-2 transition-colors hover:bg-accent hover:text-accent-foreground", children: messageOpen ? "Hide message" : "Add a message" })) : null] })) : null, hasInviteEmail && notifyPeople && messageOpen ? (_jsx("div", { className: "rounded-md border border-border/70 bg-muted/20 p-2.5", children: _jsx("textarea", { "aria-label": "Message", placeholder: "Add a short note (optional)", value: shareMessage, onChange: (event) => setShareMessage(event.target.value), maxLength: 500, rows: 3, className: "w-full resize-y rounded-md border border-input bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background" }) })) : null] })) : null, _jsxs("div", { children: [_jsx("div", { className: "mb-2 text-sm font-semibold", children: peopleAccessLabel }), _jsxs("ul", { className: "flex flex-col gap-1 list-none p-0 m-0", children: [data?.ownerEmail ? (_jsxs("li", { className: "flex items-center gap-3 px-1 py-1.5 text-sm", children: [_jsx(Avatar, { label: displayName(data.ownerEmail, knownMembers) }), _jsx("span", { className: "flex-1 min-w-0 truncate", children: displayName(data.ownerEmail, knownMembers) }), _jsx("span", { className: "text-xs text-muted-foreground", children: "Owner" })] })) : null, shares.map((s) => (_jsxs("li", { className: cn("flex items-center gap-3 px-1 py-1.5 text-sm", inFlight.has(keyOf(s)) && "opacity-60"), children: [_jsx(Avatar, { label: principalLabel(s, knownMembers), org: s.principalType === "org" }), _jsx("span", { className: "flex-1 min-w-0 truncate", children: principalLabel(s, knownMembers) }), canManage ? (_jsx(RoleSelect, { value: s.role, onChange: (r) => handleChangeRole(s, r), disabled: inFlight.has(keyOf(s)), plain: true, roleCopy: props.roleCopy, allowedRoles: props.allowedRoles })) : (_jsx("span", { className: "text-xs text-muted-foreground", children: roleMeta(s.role, props.roleCopy).label })), canManage ? (_jsx("button", { type: "button", "aria-label": "Remove", onClick: () => handleRemove(s), disabled: inFlight.has(keyOf(s)), className: BUTTON_GHOST_ICON, children: _jsx(IconTrash, { size: 14 }) })) : null] }, keyOf(s)))), !shares.length && !data?.ownerEmail ? (_jsx("li", { className: "px-1 py-1.5 text-sm text-muted-foreground", children: "No one has access yet." })) : null] })] })] }) })] }), _jsx("div", { className: "mb-2 text-sm font-semibold", children: generalAccessLabel }), _jsxs("div", { className: "mb-4 flex items-center gap-3", children: [_jsx("span", { "aria-hidden": true, className: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground", children: _jsx(meta.Icon, { size: 16, strokeWidth: 1.75 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(VisibilitySelect, { value: visibility, onChange: handleVisibility, disabled: !canManage, visibilityCopy: props.visibilityCopy, allowPublic: policy.allowPublic }), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground", children: [_jsx("span", { className: "sr-only", children: meta.description }), visibility === "org" && props.hideInSearchControl ? (_jsx(AdvancedAccessPopover, { control: props.hideInSearchControl, canManage: canManage, onToggle: handleHideInSearch })) : null] })] })] }), shareError && !canManage ? (_jsx("div", { role: "alert", className: "mb-4 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: shareError })) : null, props.accessNote ? (_jsx("div", { className: "mb-4 rounded-md border border-border bg-muted/35 p-3 text-xs text-muted-foreground", children: props.accessNote })) : null, showShareLinks && shareUrlPlacement === "bottom" ? shareLinks : null, props.shareFooterContent] }));
     if (!hasTabs)
         return sharePanel;
     const tabs = [
@@ -281,7 +292,8 @@ function SelectItems({ items }) {
 }
 function RoleSelect(props) {
     const current = roleMeta(props.value, props.roleCopy);
-    const options = ROLE_OPTIONS.map((option) => roleMeta(option.value, props.roleCopy));
+    const allowedRoles = props.allowedRoles ?? ROLE_OPTIONS.map((item) => item.value);
+    const options = ROLE_OPTIONS.filter((option) => option.value === props.value || allowedRoles.includes(option.value)).map((option) => roleMeta(option.value, props.roleCopy));
     return (_jsxs(Select.Root, { value: props.value, onValueChange: (v) => props.onChange(v), disabled: props.disabled, children: [_jsxs(Select.Trigger, { className: props.plain
                     ? cn(BUTTON_BASE, "h-7 px-2 bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground")
                     : cn(BUTTON_BASE, "h-9 px-3 border border-input bg-card hover:bg-accent hover:text-accent-foreground"), "aria-label": "Role", children: [_jsx(Select.Value, { children: current.label }), _jsx(Select.Icon, { children: _jsx(IconChevronDown, { size: 14 }) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { "data-agent-native-share-overlay": "", className: selectContentClass, position: "popper", sideOffset: 4, children: _jsx(Select.Viewport, { children: _jsx(SelectItems, { items: options }) }) }) })] }));

package/dist/client/sharing/ShareDialog.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 export interface ShareDialogProps {
     open: boolean;
     onClose: () => void;