@agent-native/dispatch 0.0.0-beta-20260819155526

package/src/components/usage-alerts-panel.tsx

@@ -0,0 +1,445 @@
+import type { UsageAlertRule } from "@agent-native/core";
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { IconBell, IconMail, IconPencil, IconX } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { Checkbox } from "./ui/checkbox";
+import { Input } from "./ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import { Skeleton } from "./ui/skeleton";
+import { Switch } from "./ui/switch";
+
+export interface UsageAlertAppOption {
+  id: string;
+  label: string;
+}
+
+interface UsageAlertsPanelProps {
+  scope: "user" | "workspace";
+  appOptions?: UsageAlertAppOption[];
+}
+
+type AlertUnit = "usd" | "builder-credits" | "tokens";
+type AlertChannel = "in-app" | "email";
+
+interface AlertDraft {
+  ruleId?: string;
+  appId: string;
+  unit: AlertUnit;
+  period: "day" | "month";
+  limit: string;
+  inApp: boolean;
+  email: boolean;
+}
+
+function asRules(value: unknown): UsageAlertRule[] {
+  if (Array.isArray(value)) return value as UsageAlertRule[];
+  if (value && typeof value === "object") {
+    const rules = (value as { rules?: unknown }).rules;
+    if (Array.isArray(rules)) return rules as UsageAlertRule[];
+  }
+  return [];
+}
+
+function formatAlertValue(rule: UsageAlertRule, value: number): string {
+  if (rule.unit === "usd") {
+    return value.toLocaleString(undefined, {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 2,
+    });
+  }
+  return (
+    value.toLocaleString(undefined, {
+      maximumFractionDigits: rule.unit === "builder-credits" ? 2 : 0,
+    }) +
+    " " +
+    (rule.unit === "builder-credits" ? "credits" : "tokens")
+  );
+}
+
+function draftFromRule(rule: UsageAlertRule): AlertDraft {
+  return {
+    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"),
+  };
+}
+
+function defaultDraft(): AlertDraft {
+  return {
+    appId: "",
+    unit: "usd",
+    period: "day",
+    limit: "100",
+    inApp: true,
+    email: true,
+  };
+}
+
+function AlertEditor({
+  draft,
+  appOptions,
+  isExisting,
+  onChange,
+  onSave,
+  onCancel,
+  isPending,
+}: {
+  draft: AlertDraft;
+  appOptions: UsageAlertAppOption[];
+  isExisting: boolean;
+  onChange: (patch: Partial<AlertDraft>) => void;
+  onSave: () => void;
+  onCancel: () => void;
+  isPending: boolean;
+}) {
+  return (
+    <div className="grid gap-3 rounded-md border bg-background/60 p-3 sm:grid-cols-2 lg:grid-cols-5">
+      <label className="space-y-1.5 text-xs text-muted-foreground">
+        <span>App</span>
+        <Select
+          value={draft.appId || "all"}
+          onValueChange={(value) =>
+            onChange({ appId: value === "all" ? "" : value })
+          }
+          disabled={isExisting}
+        >
+          <SelectTrigger className="h-9 text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All apps</SelectItem>
+            {appOptions.map((app) => (
+              <SelectItem key={app.id} value={app.id}>
+                {app.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </label>
+      <label className="space-y-1.5 text-xs text-muted-foreground">
+        <span>Unit</span>
+        <Select
+          value={draft.unit}
+          onValueChange={(value) => onChange({ unit: value as AlertUnit })}
+        >
+          <SelectTrigger className="h-9 text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="usd">Dollars</SelectItem>
+            <SelectItem value="builder-credits">Credits</SelectItem>
+            <SelectItem value="tokens">Tokens</SelectItem>
+          </SelectContent>
+        </Select>
+      </label>
+      <label className="space-y-1.5 text-xs text-muted-foreground">
+        <span>Limit</span>
+        <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 text-sm"
+        />
+      </label>
+      <label className="space-y-1.5 text-xs text-muted-foreground">
+        <span>Period</span>
+        <Select
+          value={draft.period}
+          onValueChange={(value) =>
+            onChange({ period: value as "day" | "month" })
+          }
+        >
+          <SelectTrigger className="h-9 text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="day">Per day</SelectItem>
+            <SelectItem value="month">Per month</SelectItem>
+          </SelectContent>
+        </Select>
+      </label>
+      <div className="flex flex-wrap items-end gap-3 pb-1 text-xs text-muted-foreground">
+        <label className="inline-flex items-center gap-2">
+          <Checkbox
+            checked={draft.inApp}
+            onCheckedChange={(checked) => onChange({ inApp: checked === true })}
+          />
+          In app
+        </label>
+        <label className="inline-flex items-center gap-2">
+          <Checkbox
+            checked={draft.email}
+            onCheckedChange={(checked) => onChange({ email: checked === true })}
+          />
+          Email
+        </label>
+        <Button
+          type="button"
+          size="sm"
+          className="ms-auto h-8"
+          onClick={onSave}
+          disabled={isPending}
+        >
+          Save
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-8"
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function UsageAlertsPanel({
+  scope,
+  appOptions = [],
+}: UsageAlertsPanelProps) {
+  const query = useActionQuery("get-usage-alerts", { scope });
+  const mutation = useActionMutation("manage-usage-alert", {
+    onSuccess: () => {
+      setEditing(null);
+      toast.success("Usage alert updated");
+    },
+    onError: (error) => toast.error(String(error)),
+  });
+  const [editing, setEditing] = useState<AlertDraft | null>(null);
+  const rules = asRules(query.data);
+  const appLabels = useMemo(
+    () => new Map(appOptions.map((app) => [app.id, app.label])),
+    [appOptions],
+  );
+
+  function saveDraft() {
+    if (!editing) return;
+    const limit = Number(editing.limit);
+    const channels: AlertChannel[] = [];
+    if (editing.inApp) channels.push("in-app");
+    if (editing.email) channels.push("email");
+    if (!Number.isFinite(limit) || limit <= 0) {
+      toast.error("Enter a positive threshold.");
+      return;
+    }
+    if (channels.length === 0) {
+      toast.error("Choose at least one delivery channel.");
+      return;
+    }
+    mutation.mutate({
+      operation: "save",
+      scope,
+      ruleId: editing.ruleId,
+      appId: editing.appId || null,
+      unit: editing.unit,
+      period: editing.period,
+      limit,
+      channels,
+      enabled: true,
+    });
+  }
+
+  return (
+    <section className="rounded-lg bg-card">
+      <div className="flex items-start justify-between gap-3 border-b px-4 py-3">
+        <div>
+          <h2 className="text-sm font-semibold text-foreground">
+            Usage alerts
+          </h2>
+          <p className="mt-1 max-w-2xl text-xs leading-5 text-muted-foreground">
+            Get a quiet in-app and email notice when usage crosses a daily or
+            monthly limit.
+          </p>
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => setEditing(defaultDraft())}
+          disabled={mutation.isPending}
+        >
+          Add alert
+        </Button>
+      </div>
+
+      <div className="divide-y">
+        {query.isLoading && rules.length === 0 ? (
+          <div className="space-y-3 px-4 py-5">
+            {Array.from({ length: 3 }).map((_, index) => (
+              <div key={index} className="space-y-2">
+                <Skeleton className="h-4 w-2/3 max-w-sm" />
+                <Skeleton className="h-3 w-1/2 max-w-xs" />
+              </div>
+            ))}
+          </div>
+        ) : null}
+        {query.isError ? (
+          <div className="px-4 py-6 text-sm text-destructive">
+            Usage alerts are unavailable for this scope.{" "}
+            {query.error instanceof Error ? query.error.message : "Try again."}
+          </div>
+        ) : null}
+        {!query.isLoading && !query.isError && rules.length === 0 ? (
+          <div className="px-4 py-6 text-sm text-muted-foreground">
+            No alerts yet. The recommended default is $100 per day across all
+            apps.
+          </div>
+        ) : null}
+        {rules.map((rule) => {
+          const isEditing = editing?.ruleId === rule.id;
+          const target = rule.appId
+            ? appLabels.get(rule.appId) || rule.appId
+            : "All apps";
+          return (
+            <div key={rule.id} className="px-4 py-4">
+              <div className="flex flex-wrap items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-sm font-medium text-foreground">
+                      {target}
+                    </span>
+                    {rule.isDefault ? (
+                      <Badge variant="secondary">Default</Badge>
+                    ) : null}
+                    <Badge
+                      variant={
+                        rule.status === "triggered" ? "destructive" : "outline"
+                      }
+                    >
+                      {rule.status === "triggered"
+                        ? "Over limit"
+                        : rule.status === "dismissed"
+                          ? "Dismissed"
+                          : "On track"}
+                    </Badge>
+                  </div>
+                  <div className="mt-1 text-xs text-muted-foreground">
+                    {formatAlertValue(rule, rule.current)} of{" "}
+                    {formatAlertValue(rule, rule.limit)} · per {rule.period}
+                    {rule.percent > 0 ? " · " + rule.percent + "%" : ""}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Switch
+                    checked={rule.enabled}
+                    onCheckedChange={(checked) =>
+                      mutation.mutate({
+                        operation: "set-enabled",
+                        scope,
+                        ruleId: rule.id,
+                        enabled: checked,
+                      })
+                    }
+                    aria-label={
+                      (rule.enabled ? "Disable " : "Enable ") +
+                      target +
+                      " usage alert"
+                    }
+                    disabled={mutation.isPending}
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setEditing(draftFromRule(rule))}
+                    aria-label={"Edit " + target + " usage alert"}
+                    disabled={mutation.isPending}
+                  >
+                    <IconPencil className="size-4" />
+                  </Button>
+                  {rule.status === "triggered" ? (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      onClick={() =>
+                        mutation.mutate({
+                          operation: "dismiss",
+                          scope,
+                          ruleId: rule.id,
+                        })
+                      }
+                      aria-label={"Dismiss " + target + " usage alert"}
+                      disabled={mutation.isPending}
+                    >
+                      <IconX className="size-4" />
+                    </Button>
+                  ) : null}
+                </div>
+              </div>
+              <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+                {rule.channels.includes("in-app") ? (
+                  <span className="inline-flex items-center gap-1">
+                    <IconBell className="size-3.5" /> In app
+                  </span>
+                ) : null}
+                {rule.channels.includes("email") ? (
+                  <span className="inline-flex items-center gap-1">
+                    <IconMail className="size-3.5" /> Email
+                  </span>
+                ) : null}
+              </div>
+              {isEditing && editing ? (
+                <div className="mt-4">
+                  <AlertEditor
+                    draft={editing}
+                    appOptions={appOptions}
+                    isExisting
+                    onChange={(patch) =>
+                      setEditing((current) =>
+                        current ? { ...current, ...patch } : current,
+                      )
+                    }
+                    onSave={saveDraft}
+                    onCancel={() => setEditing(null)}
+                    isPending={mutation.isPending}
+                  />
+                </div>
+              ) : null}
+            </div>
+          );
+        })}
+        {editing && !editing.ruleId ? (
+          <div className="px-4 py-4">
+            <AlertEditor
+              draft={editing}
+              appOptions={appOptions}
+              isExisting={false}
+              onChange={(patch) =>
+                setEditing((current) =>
+                  current ? { ...current, ...patch } : current,
+                )
+              }
+              onSave={saveDraft}
+              onCancel={() => setEditing(null)}
+              isPending={mutation.isPending}
+            />
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}