@agent-native/dispatch 0.24.0 → 0.24.2

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>
+  );
+}

package/src/components/workspace-app-card.spec.tsx

@@ -22,7 +22,8 @@ vi.mock("@agent-native/core/client/i18n", () => ({
   useFormatters: () => ({
     formatDate: (value: string) => value,
   }),
-  useT: () => (key: string) => key,
+  useT: () => (key: string, values?: Record<string, unknown>) =>
+    String(values?.defaultValue ?? key),
 }));
 
 describe("WorkspaceAppCard", () => {
@@ -42,7 +43,7 @@ describe("WorkspaceAppCard", () => {
     vi.unstubAllGlobals();
   });
 
-  it("uses one explicit open action and one settings control", async () => {
+  it("opens ready apps inline and keeps new-tab opening in the chevron menu", async () => {
     await act(async () => {
       root.render(
         <MemoryRouter>
@@ -61,14 +62,12 @@ describe("WorkspaceAppCard", () => {
       );
     });
 
-    const appLink = container.querySelector<HTMLAnchorElement>(
-      'a[href="/analytics"]',
+    const openButton = container.querySelector<HTMLButtonElement>(
+      ".app-open-actions__primary",
     );
-    expect(appLink).not.toBeNull();
-    expect(appLink?.textContent).toContain("Open app");
-    expect(appLink?.getAttribute("target")).toBe("_blank");
-    expect(appLink?.getAttribute("rel")).toBe("noreferrer");
-    expect(appLink?.querySelector("svg")).toBeNull();
+    expect(openButton).not.toBeNull();
+    expect(openButton?.textContent).toContain("Open app");
+    expect(container.querySelector('a[href="/analytics"]')).toBeNull();
 
     expect(
       container.querySelector(
@@ -78,6 +77,27 @@ describe("WorkspaceAppCard", () => {
     expect(document.body.textContent).not.toContain("Open in new tab");
     expect(document.body.textContent).not.toContain("Add app");
 
+    await act(async () => {
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Open options for Analytics"]',
+        )
+        ?.dispatchEvent(
+          new MouseEvent("pointerdown", { bubbles: true, button: 0 }),
+        );
+    });
+    const newTabItem = Array.from(
+      document.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((item) => item.textContent?.includes("Open in new tab"));
+    expect(newTabItem).not.toBeUndefined();
+    expect(newTabItem?.getAttribute("href")).toBe("/analytics");
+    expect(newTabItem?.getAttribute("target")).toBe("_blank");
+    const openMenu = document.querySelector<HTMLElement>('[role="menu"]');
+    expect(openMenu?.className).toContain("w-48");
+    expect(openMenu?.className).toContain("bg-popover");
+    expect(openMenu?.className).toContain("shadow-md");
+    expect(newTabItem?.querySelector("svg")).not.toBeNull();
+
     const settingsButton = container.querySelector<HTMLButtonElement>(
       'button[aria-label="Settings for Analytics"]',
     );
@@ -95,6 +115,47 @@ describe("WorkspaceAppCard", () => {
     ).toBeNull();
   });
 
+  it("keeps pinning in the app open menu", async () => {
+    const onTogglePinned = vi.fn();
+    await act(async () => {
+      root.render(
+        <MemoryRouter>
+          <TooltipProvider>
+            <WorkspaceAppCard
+              app={{
+                id: "analytics",
+                name: "Analytics",
+                path: "/analytics",
+                status: "ready",
+              }}
+              isPinned
+              onTogglePinned={onTogglePinned}
+            />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    const optionsButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Open options for Analytics"]',
+    );
+    expect(optionsButton).not.toBeNull();
+
+    await act(async () => {
+      optionsButton?.dispatchEvent(
+        new MouseEvent("pointerdown", { bubbles: true, button: 0 }),
+      );
+    });
+
+    const pinItem = Array.from(
+      document.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((item) => item.textContent?.includes("Unpin Analytics"));
+    expect(pinItem).not.toBeUndefined();
+
+    await act(async () => pinItem?.click());
+    expect(onTogglePinned).toHaveBeenCalledOnce();
+  });
+
   it("labels per-app context as agent resources while preserving workspace scope", async () => {
     await act(async () => {
       root.render(
@@ -127,6 +188,11 @@ describe("WorkspaceAppCard", () => {
       document.querySelectorAll<HTMLElement>('[role="menuitem"]'),
     ).find((item) => item.textContent?.includes("Agent resources"));
     expect(resourcesItem).not.toBeUndefined();
+    const settingsMenu = document.querySelector<HTMLElement>('[role="menu"]');
+    expect(settingsMenu?.className).toContain("w-48");
+    expect(settingsMenu?.className).toContain("bg-popover");
+    expect(settingsMenu?.className).toContain("shadow-md");
+    expect(document.querySelectorAll('[role="menuitem"] svg').length).toBe(4);
 
     await act(async () => resourcesItem?.click());
 
@@ -150,6 +216,7 @@ describe("WorkspaceAppCard", () => {
                 name: "New app",
                 path: "/new-app",
                 builderUrl: "https://builder.example.com/projects/new-app",
+                branchName: "pending-branch-id",
                 status: "pending",
               }}
             />
@@ -167,6 +234,12 @@ describe("WorkspaceAppCard", () => {
     );
     expect(appLink?.getAttribute("target")).toBe("_blank");
     expect(appLink?.getAttribute("rel")).toBe("noreferrer");
+    expect(container.textContent).toContain("Open in Builder");
+    expect(container.textContent).not.toContain("pending-branch-id");
+    expect(container.querySelector(".app-open-actions")).toBeNull();
+    expect(
+      container.querySelector('button[aria-label="Open options for New app"]'),
+    ).toBeNull();
   });
 
   it("shows ownership metadata in the settings menu", async () => {
@@ -205,5 +278,53 @@ describe("WorkspaceAppCard", () => {
     expect(document.body.textContent).toContain("creator@example.com");
     expect(document.body.textContent).toContain("owner@example.com");
     expect(document.body.textContent).toContain("Growth, Operations");
+    const renderedLabels = Array.from(
+      document.querySelectorAll("span"),
+      (span) => span.textContent,
+    );
+    expect(renderedLabels).not.toContain("agents.dashboardMetadataCreated");
+    expect(renderedLabels).not.toContain("agents.notTracked");
+  });
+
+  it("hides metadata rows without tracked values", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter>
+          <TooltipProvider>
+            <WorkspaceAppCard
+              app={{
+                id: "analytics",
+                name: "Analytics",
+                path: "/analytics",
+                createdAt: "2026-07-28T12:00:00.000Z",
+                createdBy: "Not tracked",
+                teams: ["Not tracked"],
+                status: "ready",
+              }}
+            />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    const settingsButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Settings for Analytics"]',
+    );
+    expect(settingsButton).not.toBeNull();
+
+    await act(async () => {
+      settingsButton?.dispatchEvent(
+        new MouseEvent("pointerdown", { bubbles: true, button: 0 }),
+      );
+    });
+
+    const renderedLabels = Array.from(
+      document.querySelectorAll("span"),
+      (span) => span.textContent,
+    );
+    expect(renderedLabels).not.toContain("agents.notTracked");
+    expect(renderedLabels).not.toContain("agents.dashboardMetadataCreated");
+    expect(renderedLabels).not.toContain("dispatch.pages.appMetadataOwner");
+    expect(renderedLabels).not.toContain("dispatch.pages.appMetadataTeams");
   });
 });