@stigmer/react 0.0.98 → 0.0.100

package/src/settings/MembersSection.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { OrgMembersPanel } from "../iam-policy/OrgMembersPanel";
+import { useResourceAvailable, ApiResourceKind } from "../deployment-mode";
+import { CloudFeatureNotice } from "../internal/CloudFeatureNotice";
+import { useOrg } from "../organization/OrgProvider";
+
+/** Settings section for organization membership and role management. */
+export function MembersSection() {
+  const { activeOrg } = useOrg();
+  const membersAvailable = useResourceAvailable(ApiResourceKind.iam_policy);
+  const orgId = activeOrg?.metadata?.id ?? "";
+
+  return (
+    <section aria-labelledby="members-heading">
+      <h2
+        id="members-heading"
+        className="text-foreground mb-1 text-sm font-semibold"
+      >
+        Members
+      </h2>
+      <p className="text-muted-foreground mb-4 text-xs">
+        Manage who has access to this organization and what they can do.
+        Members can be granted owner, admin, member, or viewer roles.
+      </p>
+
+      {!membersAvailable ? (
+        <CloudFeatureNotice>
+          Members management is not available in local mode. IAM policies
+          require Stigmer Cloud.
+        </CloudFeatureNotice>
+      ) : !orgId ? (
+        <p className="text-muted-foreground py-4 text-center text-xs">
+          Select an organization to manage members.
+        </p>
+      ) : (
+        <OrgMembersPanel orgId={orgId} />
+      )}
+    </section>
+  );
+}

package/src/settings/OAuthAppsSection.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import type { OAuthApp } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/api_pb";
+import { OAuthAppListPanel } from "../oauth-app/OAuthAppListPanel";
+import { CreateOAuthAppForm } from "../oauth-app/CreateOAuthAppForm";
+import { OAuthAppDetailPanel } from "../oauth-app/OAuthAppDetailPanel";
+import { useResourceAvailable, ApiResourceKind } from "../deployment-mode";
+import { CloudFeatureNotice } from "../internal/CloudFeatureNotice";
+import { useActiveOrgSlug } from "../organization/OrgProvider";
+
+type FlowState =
+  | { phase: "idle" }
+  | { phase: "creating" }
+  | { phase: "editing"; oauthApp: OAuthApp };
+
+/** Settings section for organization OAuth app credentials. */
+export function OAuthAppsSection() {
+  const org = useActiveOrgSlug();
+  const oauthAppsAvailable = useResourceAvailable(ApiResourceKind.oauth_app);
+
+  const [flow, setFlow] = useState<FlowState>({ phase: "idle" });
+  const listRefetchRef = useRef<(() => void) | null>(null);
+
+  const handleRefetchRef = useCallback((refetch: () => void) => {
+    listRefetchRef.current = refetch;
+  }, []);
+
+  const handleCreated = useCallback(() => {
+    listRefetchRef.current?.();
+    setFlow({ phase: "idle" });
+  }, []);
+
+  const handleUpdated = useCallback(() => {
+    listRefetchRef.current?.();
+    setFlow({ phase: "idle" });
+  }, []);
+
+  const handleDeleted = useCallback(() => {
+    listRefetchRef.current?.();
+    setFlow({ phase: "idle" });
+  }, []);
+
+  return (
+    <section aria-labelledby="oauth-apps-heading">
+      <div className="mb-3 flex items-center justify-between">
+        <h2
+          id="oauth-apps-heading"
+          className="text-foreground text-sm font-semibold"
+        >
+          OAuth Apps
+        </h2>
+
+        {oauthAppsAvailable && org && flow.phase === "idle" && (
+          <button
+            type="button"
+            onClick={() => setFlow({ phase: "creating" })}
+            className="text-primary hover:text-foreground text-xs font-medium transition-colors"
+          >
+            + New OAuth app
+          </button>
+        )}
+      </div>
+      <p className="text-muted-foreground mb-4 text-xs">
+        OAuth app credentials configured for your organization. Create new
+        apps here or bring your own from an MCP server&apos;s detail page.
+      </p>
+
+      {!oauthAppsAvailable ? (
+        <CloudFeatureNotice>
+          OAuth apps are not available in local mode. Bring-your-own-app
+          OAuth requires the cloud platform.
+        </CloudFeatureNotice>
+      ) : flow.phase === "creating" ? (
+        <div className="border-border bg-card rounded-lg border p-4">
+          <CreateOAuthAppForm
+            org={org}
+            onCreated={handleCreated}
+            onCancel={() => setFlow({ phase: "idle" })}
+          />
+        </div>
+      ) : flow.phase === "editing" ? (
+        <div className="border-border bg-card rounded-lg border p-4">
+          <OAuthAppDetailPanel
+            oauthApp={flow.oauthApp}
+            onUpdated={handleUpdated}
+            onDeleted={handleDeleted}
+            onBack={() => setFlow({ phase: "idle" })}
+          />
+        </div>
+      ) : (
+        <OAuthAppListPanel
+          org={org}
+          onEdit={(app) => setFlow({ phase: "editing", oauthApp: app })}
+          onRefetchRef={handleRefetchRef}
+        />
+      )}
+    </section>
+  );
+}

package/src/settings/OrgProfileSection.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useCallback } from "react";
+import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
+import { OrgProfilePanel } from "../organization/OrgProfilePanel";
+import { useOrg } from "../organization/OrgProvider";
+
+/** Settings section for editing the active organization profile. */
+export function OrgProfileSection() {
+  const { activeOrg, refresh } = useOrg();
+  const orgId = activeOrg?.metadata?.id ?? "";
+
+  const handleUpdated = useCallback(
+    (org: Organization) => {
+      refresh(org.metadata?.slug);
+    },
+    [refresh],
+  );
+
+  return (
+    <section aria-labelledby="org-profile-heading">
+      <h2
+        id="org-profile-heading"
+        className="text-foreground mb-1 text-sm font-semibold"
+      >
+        Organization Profile
+      </h2>
+      <p className="text-muted-foreground mb-6 text-xs">
+        Manage your organization&apos;s display name, description, and logo.
+      </p>
+
+      {!orgId ? (
+        <p className="text-muted-foreground py-4 text-center text-xs">
+          Select an organization to view its profile.
+        </p>
+      ) : (
+        <OrgProfilePanel orgId={orgId} onUpdated={handleUpdated} />
+      )}
+    </section>
+  );
+}

package/src/settings/PlatformClientsSection.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import type { PlatformClient } from "@stigmer/protos/ai/stigmer/iam/platformclient/v1/api_pb";
+import type { PlatformClientCreateResponse } from "@stigmer/protos/ai/stigmer/iam/platformclient/v1/io_pb";
+import { PlatformClientListPanel } from "../platform-client/PlatformClientListPanel";
+import { CreatePlatformClientForm } from "../platform-client/CreatePlatformClientForm";
+import { PlatformClientDetailPanel } from "../platform-client/PlatformClientDetailPanel";
+import { PlatformClientSecretAlert } from "../platform-client/PlatformClientSecretAlert";
+import { useResourceAvailable, ApiResourceKind } from "../deployment-mode";
+import { CloudFeatureNotice } from "../internal/CloudFeatureNotice";
+import { useActiveOrgSlug } from "../organization/OrgProvider";
+
+type FlowState =
+  | { phase: "idle" }
+  | { phase: "creating" }
+  | {
+      phase: "revealing";
+      clientId: string;
+      clientSecret: string;
+      context: "created" | "rotated";
+    }
+  | { phase: "editing"; platformClient: PlatformClient };
+
+/** Settings section for creating and maintaining platform clients. */
+export function PlatformClientsSection() {
+  const org = useActiveOrgSlug();
+  const pcAvailable = useResourceAvailable(ApiResourceKind.platform_client);
+
+  const [flow, setFlow] = useState<FlowState>({ phase: "idle" });
+  const listRefetchRef = useRef<(() => void) | null>(null);
+
+  const handleRefetchRef = useCallback((refetch: () => void) => {
+    listRefetchRef.current = refetch;
+  }, []);
+
+  const handleCreated = useCallback(
+    (response: PlatformClientCreateResponse) => {
+      listRefetchRef.current?.();
+      setFlow({
+        phase: "revealing",
+        clientId: response.platformClient?.spec?.clientId ?? "",
+        clientSecret: response.clientSecret,
+        context: "created",
+      });
+    },
+    [],
+  );
+
+  const handleSecretRotated = useCallback(
+    (response: PlatformClientCreateResponse) => {
+      listRefetchRef.current?.();
+      setFlow({
+        phase: "revealing",
+        clientId: response.platformClient?.spec?.clientId ?? "",
+        clientSecret: response.clientSecret,
+        context: "rotated",
+      });
+    },
+    [],
+  );
+
+  const handleUpdated = useCallback(() => {
+    listRefetchRef.current?.();
+    setFlow({ phase: "idle" });
+  }, []);
+
+  const handleDeleted = useCallback(() => {
+    listRefetchRef.current?.();
+    setFlow({ phase: "idle" });
+  }, []);
+
+  return (
+    <section aria-labelledby="platform-clients-heading">
+      <div className="mb-3 flex items-center justify-between">
+        <h2
+          id="platform-clients-heading"
+          className="text-foreground text-sm font-semibold"
+        >
+          Platform Clients
+        </h2>
+
+        {pcAvailable && org && flow.phase === "idle" && (
+          <button
+            type="button"
+            onClick={() => setFlow({ phase: "creating" })}
+            className="text-primary hover:text-foreground text-xs font-medium transition-colors"
+          >
+            + New platform client
+          </button>
+        )}
+      </div>
+      <p className="text-muted-foreground mb-4 text-xs">
+        Platform clients let your backend mint Stigmer user tokens so you
+        can embed Stigmer components in your application without requiring
+        OIDC federation.
+      </p>
+
+      {!pcAvailable ? (
+        <CloudFeatureNotice>
+          Platform clients are not available in local mode. Token minting
+          requires Stigmer Cloud.
+        </CloudFeatureNotice>
+      ) : flow.phase === "creating" ? (
+        <div className="border-border bg-card rounded-lg border p-4">
+          <CreatePlatformClientForm
+            org={org}
+            onCreated={handleCreated}
+            onCancel={() => setFlow({ phase: "idle" })}
+          />
+        </div>
+      ) : flow.phase === "revealing" ? (
+        <div className="space-y-4">
+          <PlatformClientSecretAlert
+            clientId={flow.clientId}
+            clientSecret={flow.clientSecret}
+            context={flow.context}
+            onDismiss={() => setFlow({ phase: "idle" })}
+          />
+          <PlatformClientListPanel
+            org={org}
+            onEdit={(pc) =>
+              setFlow({ phase: "editing", platformClient: pc })
+            }
+            onRefetchRef={handleRefetchRef}
+          />
+        </div>
+      ) : flow.phase === "editing" ? (
+        <div className="border-border bg-card rounded-lg border p-4">
+          <PlatformClientDetailPanel
+            platformClient={flow.platformClient}
+            onUpdated={handleUpdated}
+            onSecretRotated={handleSecretRotated}
+            onDeleted={handleDeleted}
+            onBack={() => setFlow({ phase: "idle" })}
+          />
+        </div>
+      ) : (
+        <PlatformClientListPanel
+          org={org}
+          onEdit={(pc) =>
+            setFlow({ phase: "editing", platformClient: pc })
+          }
+          onRefetchRef={handleRefetchRef}
+        />
+      )}
+    </section>
+  );
+}

package/src/settings/UsageSection.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { OrgUsagePanel } from "../usage/OrgUsagePanel";
+import { useDeploymentMode } from "../deployment-mode";
+import { CloudFeatureNotice } from "../internal/CloudFeatureNotice";
+import { useOrg } from "../organization/OrgProvider";
+
+/** Settings section for organization usage and cost reporting. */
+export function UsageSection() {
+  const { activeOrg } = useOrg();
+  const mode = useDeploymentMode();
+  const orgId = activeOrg?.metadata?.id ?? "";
+
+  return (
+    <section aria-labelledby="usage-heading">
+      <h2
+        id="usage-heading"
+        className="text-foreground mb-1 text-sm font-semibold"
+      >
+        Usage
+      </h2>
+      <p className="text-muted-foreground mb-4 text-xs">
+        Monitor token consumption, cost, and execution activity across
+        your organization.
+      </p>
+
+      {mode === "local" ? (
+        <CloudFeatureNotice>
+          Usage reports are not available in local mode. Connect to Stigmer
+          Cloud to view organization-level cost and token analytics.
+        </CloudFeatureNotice>
+      ) : !orgId ? (
+        <p className="text-muted-foreground py-4 text-center text-xs">
+          Select an organization to view usage.
+        </p>
+      ) : (
+        <OrgUsagePanel orgId={orgId} />
+      )}
+    </section>
+  );
+}

package/src/settings/index.ts

@@ -0,0 +1,13 @@
+export { SETTINGS_NAV_GROUPS } from "./settings-nav";
+export type { SettingsNavItem, SettingsNavGroup } from "./settings-nav";
+
+export { ApiKeysSection } from "./ApiKeysSection";
+export { MembersSection } from "./MembersSection";
+export { OrgProfileSection } from "./OrgProfileSection";
+export { EnvironmentsSection } from "./EnvironmentsSection";
+export { InvitationsSection } from "./InvitationsSection";
+export { IdentityProvidersSection } from "./IdentityProvidersSection";
+export type { IdentityProvidersSectionProps } from "./IdentityProvidersSection";
+export { PlatformClientsSection } from "./PlatformClientsSection";
+export { OAuthAppsSection } from "./OAuthAppsSection";
+export { UsageSection } from "./UsageSection";

package/src/settings/settings-nav.ts

@@ -0,0 +1,78 @@
+import type { ComponentType } from "react";
+import {
+  AppWindow,
+  BarChart3,
+  Box,
+  Building2,
+  CreditCard,
+  KeyRound,
+  Link,
+  Plug,
+  ShieldCheck,
+  Users,
+} from "lucide-react";
+
+/** Single navigable entry in the settings sidebar. */
+export interface SettingsNavItem {
+  /** Route for the settings page entry. */
+  readonly href: string;
+  /** Short, user-facing label shown in navigation. */
+  readonly label: string;
+  /** Lucide icon component rendered next to the label. */
+  readonly icon: ComponentType<{
+    /** Optional CSS class name applied to the icon. */
+    className?: string;
+  }>;
+}
+
+/** Grouping model used to render settings navigation sections. */
+export interface SettingsNavGroup {
+  /** Group heading shown in the settings navigation. */
+  readonly label: string;
+  /** Helper text describing the group purpose. */
+  readonly description: string;
+  /** Entries that belong to this group. */
+  readonly items: readonly SettingsNavItem[];
+}
+
+/** Canonical settings sidebar/grouped navigation model. */
+export const SETTINGS_NAV_GROUPS: readonly SettingsNavGroup[] = [
+  {
+    label: "Organization",
+    description:
+      "Manage your team, organization identity, and identity providers.",
+    items: [
+      { href: "/settings/org-profile", label: "Org Profile", icon: Building2 },
+      { href: "/settings/members", label: "Members", icon: Users },
+      { href: "/settings/invitations", label: "Invitations", icon: Link },
+      {
+        href: "/settings/identity-providers",
+        label: "Identity Providers",
+        icon: ShieldCheck,
+      },
+    ],
+  },
+  {
+    label: "Configuration",
+    description:
+      "API keys, environment variables, and OAuth app credentials for your integrations.",
+    items: [
+      { href: "/settings/api-keys", label: "API Keys", icon: KeyRound },
+      {
+        href: "/settings/platform-clients",
+        label: "Platform Clients",
+        icon: Plug,
+      },
+      { href: "/settings/environments", label: "Environments", icon: Box },
+      { href: "/settings/oauth-apps", label: "OAuth Apps", icon: AppWindow },
+    ],
+  },
+  {
+    label: "Billing & Usage",
+    description: "Subscription management and usage metrics.",
+    items: [
+      { href: "/settings/billing", label: "Billing", icon: CreditCard },
+      { href: "/settings/usage", label: "Usage", icon: BarChart3 },
+    ],
+  },
+];