@hanzo/iam 0.1.0 → 0.3.0

package/src/react.ts

@@ -46,7 +46,7 @@ import type { ReactNode } from "react";
 import { BrowserIamSdk } from "./browser.js";
 import type { BrowserIamConfig } from "./browser.js";
 import { IamClient } from "./client.js";
-import type { IamUser, IamOrganization, TokenResponse } from "./types.js";
+import type { IamUser, IamOrganization, IamProject, TokenResponse } from "./types.js";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -96,6 +96,10 @@ export interface OrgState {
   currentOrgId: string | null;
   /** Switch to a different organization. */
   switchOrg: (orgId: string) => void;
+  /** All projects for the current organization. */
+  projects: IamProject[];
+  /** Currently selected project. */
+  currentProject: IamProject | null;
   /** Currently selected project ID within the org. */
   currentProjectId: string | null;
   /** Switch to a different project (null to clear). */
@@ -367,6 +371,7 @@ export function useIam(): IamContextValue {
 export function useOrganizations(): OrgState {
   const { config, isAuthenticated, accessToken } = useIam();
   const [organizations, setOrganizations] = useState<IamOrganization[]>([]);
+  const [projects, setProjects] = useState<IamProject[]>([]);
   const [isLoading, setIsLoading] = useState(false);
 
   const [currentOrgId, setCurrentOrgId] = useState<string | null>(() => {
@@ -391,6 +396,7 @@ export function useOrganizations(): OrgState {
   useEffect(() => {
     if (!isAuthenticated || !accessToken) {
       setOrganizations([]);
+      setProjects([]);
       return;
     }
 
@@ -459,14 +465,66 @@ export function useOrganizations(): OrgState {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAuthenticated, accessToken, config.serverUrl, config.clientId]);
 
+  // Fetch projects when currentOrgId changes
+  useEffect(() => {
+    if (!isAuthenticated || !accessToken || !currentOrgId) {
+      setProjects([]);
+      return;
+    }
+
+    let cancelled = false;
+
+    const fetchProjects = async () => {
+      try {
+        const client = new IamClient({
+          serverUrl: config.serverUrl,
+          clientId: config.clientId,
+        });
+        const orgProjects = await client.getOrganizationProjects(
+          currentOrgId,
+          accessToken,
+        );
+        if (!cancelled) {
+          setProjects(orgProjects);
+          // Auto-select default project if none selected
+          if (!currentProjectId && orgProjects.length > 0) {
+            const defaultProject =
+              orgProjects.find((p) => p.isDefault) ?? orgProjects[0];
+            setCurrentProjectId(defaultProject.name);
+            try {
+              localStorage.setItem(STORAGE_PROJECT_KEY, defaultProject.name);
+            } catch {
+              /* ok */
+            }
+          }
+        }
+      } catch {
+        // Projects API may not be available yet — that's ok
+        if (!cancelled) setProjects([]);
+      }
+    };
+
+    fetchProjects();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isAuthenticated, accessToken, currentOrgId, config.serverUrl, config.clientId]);
+
   const currentOrg = useMemo(
     () => organizations.find((o) => o.name === currentOrgId) ?? null,
     [organizations, currentOrgId],
   );
 
+  const currentProject = useMemo(
+    () => projects.find((p) => p.name === currentProjectId) ?? null,
+    [projects, currentProjectId],
+  );
+
   const switchOrg = useCallback((orgId: string) => {
     setCurrentOrgId(orgId);
     setCurrentProjectId(null);
+    setProjects([]);
     try {
       localStorage.setItem(STORAGE_ORG_KEY, orgId);
       localStorage.removeItem(STORAGE_PROJECT_KEY);
@@ -493,6 +551,8 @@ export function useOrganizations(): OrgState {
     currentOrg,
     currentOrgId,
     switchOrg,
+    projects,
+    currentProject,
     currentProjectId,
     switchProject,
     isLoading,
@@ -531,3 +591,129 @@ export function useIamToken(): {
 
 // Re-export context for advanced use
 export { IamContext };
+
+// ---------------------------------------------------------------------------
+// OrgProjectSwitcher component
+// ---------------------------------------------------------------------------
+
+export interface OrgProjectSwitcherProps {
+  organizations: Array<{ name: string; displayName?: string; owner?: string }>;
+  currentOrgId: string | null;
+  switchOrg: (orgId: string) => void;
+  projects?: Array<{ name: string; displayName?: string; organization?: string; isDefault?: boolean }>;
+  currentProjectId?: string | null;
+  switchProject?: (projectId: string | null) => void;
+  onTenantChange?: (orgId: string | null, projectId: string | null) => void;
+  environment?: string | null;
+  className?: string;
+  alwaysShow?: boolean;
+}
+
+/**
+ * Organization and project switcher component.
+ *
+ * @example
+ * ```tsx
+ * import { useOrganizations, OrgProjectSwitcher } from '@hanzo/iam/react'
+ *
+ * function Nav() {
+ *   const orgState = useOrganizations()
+ *   return <OrgProjectSwitcher {...orgState} />
+ * }
+ * ```
+ */
+export function OrgProjectSwitcher({
+  organizations,
+  currentOrgId,
+  switchOrg,
+  projects = [],
+  currentProjectId = null,
+  switchProject,
+  onTenantChange,
+  environment,
+  className = "",
+  alwaysShow = false,
+}: OrgProjectSwitcherProps) {
+  useEffect(() => {
+    onTenantChange?.(currentOrgId, currentProjectId ?? null);
+  }, [currentOrgId, currentProjectId, onTenantChange]);
+
+  const handleOrgChange = useCallback(
+    (e: { target: { value: string } }) => switchOrg(e.target.value),
+    [switchOrg],
+  );
+
+  const handleProjectChange = useCallback(
+    (e: { target: { value: string } }) => switchProject?.(e.target.value || null),
+    [switchProject],
+  );
+
+  if (!alwaysShow && organizations.length <= 1 && projects.length <= 1) {
+    if (organizations.length === 1) {
+      const org = organizations[0];
+      return createElement(
+        "div",
+        { className: `flex items-center gap-2 text-sm ${className}` },
+        createElement("span", { className: "font-medium" }, org.displayName || org.name),
+        projects.length === 1
+          ? [
+              createElement("span", { className: "text-muted-foreground", key: "sep" }, "/"),
+              createElement("span", { key: "proj" }, projects[0].displayName || projects[0].name),
+            ]
+          : null,
+        environment
+          ? createElement(
+              "span",
+              { className: "rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground" },
+              environment,
+            )
+          : null,
+      );
+    }
+    return null;
+  }
+
+  return createElement(
+    "div",
+    { className: `flex items-center gap-2 ${className}` },
+    createElement(
+      "select",
+      {
+        value: currentOrgId ?? "",
+        onChange: handleOrgChange,
+        className:
+          "h-8 rounded-md border border-border bg-background px-2 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring",
+        "aria-label": "Switch organization",
+      },
+      ...organizations.map((org) =>
+        createElement("option", { key: org.name, value: org.name }, org.displayName || org.name),
+      ),
+    ),
+    projects.length > 0 && switchProject
+      ? [
+          createElement("span", { className: "text-muted-foreground", key: "sep" }, "/"),
+          createElement(
+            "select",
+            {
+              key: "proj-select",
+              value: currentProjectId ?? "",
+              onChange: handleProjectChange,
+              className:
+                "h-8 rounded-md border border-border bg-background px-2 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring",
+              "aria-label": "Switch project",
+            },
+            ...projects.map((proj) =>
+              createElement("option", { key: proj.name, value: proj.name }, proj.displayName || proj.name),
+            ),
+          ),
+        ]
+      : null,
+    environment
+      ? createElement(
+          "span",
+          { className: "rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground" },
+          environment,
+        )
+      : null,
+  );
+}

package/src/types.ts

@@ -115,10 +115,10 @@ export type IamOrganization = {
 };
 
 // ---------------------------------------------------------------------------
-// Subscription / Plan / Pricing
+// Billing (canonical types — backed by Commerce service)
 // ---------------------------------------------------------------------------
 
-export type IamSubscription = {
+export type Subscription = {
   owner: string;
   name: string;
   displayName?: string;
@@ -133,7 +133,7 @@ export type IamSubscription = {
   description?: string;
 };
 
-export type IamPlan = {
+export type Plan = {
   owner: string;
   name: string;
   displayName?: string;
@@ -147,7 +147,7 @@ export type IamPlan = {
   role?: string;
 };
 
-export type IamPricing = {
+export type Pricing = {
   owner: string;
   name: string;
   displayName?: string;
@@ -159,11 +159,7 @@ export type IamPricing = {
   trialDuration?: number;
 };
 
-// ---------------------------------------------------------------------------
-// Payment / Order
-// ---------------------------------------------------------------------------
-
-export type IamPayment = {
+export type Payment = {
   owner: string;
   name: string;
   displayName?: string;
@@ -177,7 +173,7 @@ export type IamPayment = {
   message?: string;
 };
 
-export type IamOrder = {
+export type Order = {
   owner: string;
   name: string;
   displayName?: string;
@@ -190,6 +186,62 @@ export type IamOrder = {
   message?: string;
 };
 
+export type UsageRecord = {
+  owner: string;
+  name: string;
+  user?: string;
+  application?: string;
+  organization?: string;
+  project?: string;
+  model?: string;
+  provider?: string;
+  promptTokens?: number;
+  completionTokens?: number;
+  totalTokens?: number;
+  cost?: number;
+  currency?: string;
+  premium?: boolean;
+  stream?: boolean;
+  status?: string;
+  errorMsg?: string;
+  clientIp?: string;
+  requestId?: string;
+  createdTime?: string;
+};
+
+export type UsageSummary = {
+  totalRequests: number;
+  totalTokens: number;
+  totalCost: number;
+  promptTokens: number;
+  completionTokens: number;
+};
+
+// Backwards-compatible aliases
+export type IamSubscription = Subscription;
+export type IamPlan = Plan;
+export type IamPricing = Pricing;
+export type IamPayment = Payment;
+export type IamOrder = Order;
+export type IamUsageRecord = UsageRecord;
+export type IamUsageSummary = UsageSummary;
+
+// ---------------------------------------------------------------------------
+// Project
+// ---------------------------------------------------------------------------
+
+export type IamProject = {
+  owner: string;
+  name: string;
+  displayName?: string;
+  description?: string;
+  organization: string;
+  tags?: string[];
+  metadata?: Record<string, unknown>;
+  isDefault?: boolean;
+  createdTime?: string;
+};
+
 // ---------------------------------------------------------------------------
 // Auth result
 // ---------------------------------------------------------------------------