@agent-native/toolkit 0.23.1 → 0.198.1

package/src/app/org/RequireActiveOrg.tsx

@@ -0,0 +1,323 @@
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  useAcceptInvitation,
+  useCreateOrg,
+  useJoinByDomain,
+  useOrg,
+} from "@agent-native/core/client/org";
+import {
+  IconAlertTriangle,
+  IconKey,
+  IconLoader2,
+  IconUserPlus,
+  IconAt,
+  IconUsersGroup,
+} from "@tabler/icons-react";
+import { ReactNode, useState } from "react";
+
+import { ErrorReportActions } from "../feedback/index.js";
+
+export interface RequireActiveOrgProps {
+  children: ReactNode;
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+export function RequireActiveOrg({
+  children,
+  title,
+  description,
+  className,
+}: RequireActiveOrgProps) {
+  const t = useT();
+  const { data: org, isLoading, isError, error, refetch } = useOrg();
+
+  if (isLoading) return null;
+
+  if (isError) {
+    return (
+      <ErrorPane
+        message={(error as Error)?.message ?? t("org.loadErrorFallback")}
+        onRetry={() => void refetch()}
+        className={className}
+      />
+    );
+  }
+
+  if (org?.orgId) return <>{children}</>;
+
+  return (
+    <CreateOrgPane
+      pendingInvitations={org?.pendingInvitations ?? []}
+      domainMatches={org?.domainMatches ?? []}
+      email={org?.email ?? ""}
+      allowCreateOrg={org?.access?.orgCreation !== "closed"}
+      title={title ?? t("org.createTitle")}
+      description={description ?? t("org.createDescription")}
+      className={className}
+    />
+  );
+}
+
+function ErrorPane({
+  message,
+  onRetry,
+  className,
+}: {
+  message: string;
+  onRetry: () => void;
+  className?: string;
+}) {
+  const t = useT();
+  return (
+    <div
+      className={
+        "flex h-full w-full items-center justify-center overflow-y-auto bg-background p-8 " +
+        (className ?? "")
+      }
+    >
+      <div className="w-full max-w-md rounded-2xl border border-border bg-card p-8 shadow-lg">
+        <div className="mb-4 flex items-center gap-2">
+          <IconAlertTriangle className="h-5 w-5 text-muted-foreground" />
+          <h1 className="text-lg font-semibold">{t("org.loadErrorTitle")}</h1>
+        </div>
+        <p className="mb-5 text-sm text-muted-foreground">{message}</p>
+        <button
+          type="button"
+          onClick={onRetry}
+          className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+        >
+          {t("org.tryAgain")}
+        </button>
+        <ErrorReportActions
+          appName="Organization"
+          title={t("org.loadErrorTitle")}
+          details={message}
+          issueTitle="Organization load error"
+          feedbackLabel={t("org.sendFeedback")}
+          feedbackPlaceholder={t("org.feedbackPlaceholder")}
+          githubLabel={t("org.openGitHubIssue")}
+          className="mt-4 justify-start"
+          align="start"
+        />
+      </div>
+    </div>
+  );
+}
+
+function CreateOrgPane({
+  pendingInvitations,
+  domainMatches,
+  email,
+  allowCreateOrg,
+  title,
+  description,
+  className,
+}: {
+  pendingInvitations: Array<{
+    id: string;
+    orgId: string;
+    orgName: string;
+    invitedBy: string;
+  }>;
+  domainMatches: Array<{ orgId: string; orgName: string }>;
+  email: string;
+  allowCreateOrg: boolean;
+  title: string;
+  description: string;
+  className?: string;
+}) {
+  const t = useT();
+  const createOrg = useCreateOrg();
+  const acceptInvitation = useAcceptInvitation();
+  const joinByDomain = useJoinByDomain();
+  const [name, setName] = useState("");
+
+  const hasInvites = pendingInvitations.length > 0;
+  const hasDomainMatches = domainMatches.length > 0;
+  const userDomain = email.split("@")[1] ?? "";
+  const [showCreateForm, setShowCreateForm] = useState(
+    allowCreateOrg && !hasDomainMatches && !hasInvites,
+  );
+  const paneTitle = allowCreateOrg ? title : t("org.askAdminTitle");
+  const paneDescription = allowCreateOrg
+    ? description
+    : t("org.askAdminDescription");
+
+  const busy =
+    createOrg.isPending || acceptInvitation.isPending || joinByDomain.isPending;
+
+  return (
+    <div
+      className={
+        "flex h-full w-full items-center justify-center overflow-y-auto bg-background p-8 " +
+        (className ?? "")
+      }
+    >
+      <div className="my-auto w-full max-w-md rounded-2xl border border-border bg-card p-8 shadow-lg">
+        <div className="mb-6 flex items-center gap-2">
+          <IconUsersGroup className="h-5 w-5 text-muted-foreground" />
+          <h1 className="text-lg font-semibold">{paneTitle}</h1>
+        </div>
+        <p className="mb-6 text-sm text-muted-foreground">{paneDescription}</p>
+
+        {hasDomainMatches && (
+          <div className="mb-4">
+            <div className="mb-2 text-[10px] uppercase tracking-wide text-muted-foreground">
+              {domainMatches.length === 1
+                ? t("org.yourOrganization")
+                : t("org.joinYourTeam")}
+            </div>
+            <ul className="space-y-2">
+              {domainMatches.map((match) => (
+                <li
+                  key={match.orgId}
+                  className="flex items-center gap-3 rounded-lg border border-primary/50 bg-primary/5 px-4 py-3"
+                >
+                  <IconAt className="h-4 w-4 shrink-0 text-muted-foreground" />
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-sm font-medium">
+                      {match.orgName}
+                    </div>
+                    <div className="truncate text-xs text-muted-foreground">
+                      {t("org.openToDomainEmails", { domain: userDomain })}
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    disabled={busy}
+                    onClick={() => joinByDomain.mutate(match.orgId)}
+                    className="shrink-0 rounded-md bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+                  >
+                    {joinByDomain.isPending ? (
+                      <IconLoader2 className="h-3 w-3 animate-spin" />
+                    ) : (
+                      t("org.joinOrg", { name: match.orgName })
+                    )}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {hasInvites && (
+          <div className="mb-4">
+            <div className="mb-2 text-[10px] uppercase tracking-wide text-muted-foreground">
+              {t("org.pendingInvitations")}
+            </div>
+            <ul className="space-y-2">
+              {pendingInvitations.map((inv) => (
+                <li
+                  key={inv.id}
+                  className="flex items-center gap-3 rounded-lg border border-border bg-background px-3 py-2"
+                >
+                  <IconUserPlus className="h-4 w-4 shrink-0 text-muted-foreground" />
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-sm font-medium">
+                      {inv.orgName}
+                    </div>
+                    <div className="truncate text-xs text-muted-foreground">
+                      {t("org.invitedBy", { name: inv.invitedBy })}
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    disabled={busy}
+                    onClick={() => acceptInvitation.mutate(inv.id)}
+                    className="shrink-0 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+                  >
+                    {acceptInvitation.isPending ? (
+                      <IconLoader2 className="h-3 w-3 animate-spin" />
+                    ) : (
+                      t("org.accept")
+                    )}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {allowCreateOrg && (hasDomainMatches || hasInvites) && (
+          <button
+            type="button"
+            onClick={() => setShowCreateForm((v) => !v)}
+            className="mb-4 flex w-full cursor-pointer items-center gap-3"
+          >
+            <div className="h-px flex-1 bg-border" />
+            <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
+              {t("org.createSeparate")}
+            </span>
+            <div className="h-px flex-1 bg-border" />
+          </button>
+        )}
+
+        {allowCreateOrg && showCreateForm && (
+          <form
+            onSubmit={async (e) => {
+              e.preventDefault();
+              const trimmed = name.trim();
+              if (!trimmed) return;
+              try {
+                await createOrg.mutateAsync(trimmed);
+              } catch {
+                /* surfaced below */
+              }
+            }}
+            className="space-y-3"
+          >
+            {(hasDomainMatches || hasInvites) && (
+              <p className="flex items-start gap-2 text-xs text-muted-foreground">
+                <IconKey className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                <span>{t("org.createOrgVaultNotice")}</span>
+              </p>
+            )}
+            <label className="block">
+              <span className="mb-1 block text-xs font-medium text-foreground">
+                {t("org.organizationName")}
+              </span>
+              <input
+                autoFocus={!hasDomainMatches && !hasInvites}
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder={t("org.organizationPlaceholder")}
+                disabled={busy}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
+              />
+            </label>
+            {createOrg.error && (
+              <div className="text-xs text-red-600">
+                {(createOrg.error as Error).message}
+              </div>
+            )}
+            {acceptInvitation.error && (
+              <div className="text-xs text-red-600">
+                {(acceptInvitation.error as Error).message}
+              </div>
+            )}
+            {joinByDomain.error && (
+              <div className="text-xs text-red-600">
+                {(joinByDomain.error as Error).message}
+              </div>
+            )}
+            <button
+              type="submit"
+              disabled={busy || !name.trim()}
+              className={
+                hasDomainMatches
+                  ? "w-full rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-accent disabled:opacity-50"
+                  : "w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+              }
+            >
+              {createOrg.isPending
+                ? t("org.creating")
+                : t("org.createOrganization")}
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/app/org/RequirePermission.tsx

@@ -0,0 +1,17 @@
+import { useAppPermissions } from "@agent-native/core/client/org";
+import type { ReactNode } from "react";
+
+export function RequirePermission({
+  appId,
+  permission,
+  children,
+  fallback = null,
+}: {
+  appId: string | undefined;
+  permission: string;
+  children: ReactNode;
+  fallback?: ReactNode;
+}) {
+  const access = useAppPermissions(appId);
+  return access.can(permission) ? children : fallback;
+}

package/src/app/org/SuccessorPicker.spec.tsx

@@ -0,0 +1,101 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  search: vi.fn(),
+}));
+
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string) => key,
+}));
+
+vi.mock("@agent-native/core/client/sharing/share-controller-helpers", () => ({
+  useShareOrgMemberSearch: (query: string, enabled: boolean) =>
+    mocks.search(query, enabled),
+}));
+
+import { SuccessorPicker } from "./SuccessorPicker.js";
+
+describe("SuccessorPicker", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    // cmdk measures with ResizeObserver and scrolls the active item into view.
+    vi.stubGlobal(
+      "ResizeObserver",
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      },
+    );
+    Element.prototype.scrollIntoView = vi.fn();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    mocks.search.mockReturnValue({
+      members: [
+        { email: "leaving@example.test" },
+        { email: "far-page@example.test", name: "Far Page" },
+      ],
+      isLoading: false,
+      isLoadingMore: false,
+      hasMore: false,
+      error: false,
+      loadMore: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    document.body.innerHTML = "";
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it("searches the whole organization and never offers the member being removed", async () => {
+    const onChange = vi.fn();
+    act(() =>
+      root.render(
+        <SuccessorPicker
+          value={{ email: "me@example.test" }}
+          onChange={onChange}
+          excludeEmail="leaving@example.test"
+          currentUser={{ email: "me@example.test" }}
+        />,
+      ),
+    );
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      'button[role="combobox"]',
+    )!;
+    await act(async () => {
+      trigger.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, button: 0 }),
+      );
+      trigger.click();
+    });
+
+    expect(mocks.search).toHaveBeenLastCalledWith("", true);
+    const options = Array.from(
+      document.body.querySelectorAll('[role="option"]'),
+    ).map((option) => option.textContent);
+    expect(options).toEqual(["me@example.test", "Far Page"]);
+
+    const farPage = Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="option"]'),
+    ).find((option) => option.textContent === "Far Page")!;
+    await act(async () => farPage.click());
+
+    expect(onChange).toHaveBeenCalledWith({
+      email: "far-page@example.test",
+      name: "Far Page",
+    });
+  });
+});

package/src/app/org/SuccessorPicker.tsx

@@ -0,0 +1,156 @@
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  useShareOrgMemberSearch,
+  type ShareOrgMember,
+} from "@agent-native/core/client/sharing/share-controller-helpers";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@agent-native/toolkit/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@agent-native/toolkit/ui/popover";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+import { cn } from "@agent-native/toolkit/utils";
+import { IconCheck, IconSelector } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+
+/**
+ * Picks who receives a removed member's data. It searches the whole
+ * organization on the server: a page of the member list would leave anyone
+ * past that page impossible to choose.
+ */
+export function SuccessorPicker({
+  id,
+  value,
+  onChange,
+  excludeEmail,
+  currentUser,
+  disabled,
+  size = "default",
+  className,
+}: {
+  id?: string;
+  value: ShareOrgMember | null;
+  onChange: (member: ShareOrgMember) => void;
+  /** The member being removed, who can't receive their own data. */
+  excludeEmail: string;
+  /** Offered first, so the default choice is always available. */
+  currentUser: ShareOrgMember;
+  disabled?: boolean;
+  size?: "sm" | "default";
+  className?: string;
+}) {
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const search = useShareOrgMemberSearch(query, open, { limit: 50 });
+  const excluded = excludeEmail.toLowerCase();
+
+  const options = useMemo(() => {
+    const seen = new Set<string>([excluded]);
+    const list: ShareOrgMember[] = [];
+    const add = (member: ShareOrgMember) => {
+      const key = member.email.toLowerCase();
+      if (seen.has(key)) return;
+      seen.add(key);
+      list.push(member);
+    };
+    if (!query.trim()) add(currentUser);
+    for (const member of search.members) add(member);
+    return list;
+  }, [currentUser, excluded, query, search.members]);
+
+  const label = (member: ShareOrgMember) => member.name?.trim() || member.email;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          size={size}
+          role="combobox"
+          aria-expanded={open}
+          aria-label={t("org.transferTo")}
+          disabled={disabled}
+          className={cn("justify-between font-normal", className)}
+        >
+          <span className="truncate">
+            {value ? label(value) : t("org.transferTo")}
+          </span>
+          <IconSelector aria-hidden="true" className="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-[var(--radix-popover-trigger-width)] min-w-64 p-0"
+      >
+        <Command shouldFilter={false}>
+          <CommandInput
+            value={query}
+            onValueChange={setQuery}
+            placeholder={t("org.searchPeople", {
+              defaultValue: "Search people",
+            })}
+          />
+          <CommandList aria-busy={search.isLoading}>
+            {search.isLoading && options.length === 0 ? (
+              <div className="flex justify-center py-6">
+                <Spinner />
+              </div>
+            ) : (
+              <CommandEmpty>
+                {t("org.noPeopleFound", { defaultValue: "No people found" })}
+              </CommandEmpty>
+            )}
+            <CommandGroup>
+              {options.map((member) => (
+                <CommandItem
+                  key={member.email}
+                  value={member.email}
+                  onSelect={() => {
+                    onChange(member);
+                    setOpen(false);
+                  }}
+                >
+                  <span className="min-w-0 flex-1 truncate">
+                    {label(member)}
+                  </span>
+                  <IconCheck
+                    aria-hidden="true"
+                    className={cn(
+                      "ms-auto",
+                      value?.email.toLowerCase() === member.email.toLowerCase()
+                        ? "opacity-100"
+                        : "opacity-0",
+                    )}
+                  />
+                </CommandItem>
+              ))}
+              {search.hasMore ? (
+                <CommandItem
+                  value="__load-more__"
+                  disabled={search.isLoadingMore}
+                  onSelect={() => search.loadMore()}
+                  className="justify-center text-muted-foreground"
+                >
+                  {search.isLoadingMore ? <Spinner /> : null}
+                  {t("org.loadMorePeople", { defaultValue: "Load more" })}
+                </CommandItem>
+              ) : null}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}