@entropy-softworks/ui 2026.7.31 → 2026.8.2

package/src/screens/auth/PasskeyEnrollScreen.tsx

@@ -70,7 +70,8 @@ export function PasskeyEnrollScreen({
           <CardFooter className="flex-col gap-3 border-t-0">
             <Button
               className="w-full"
-              onPress={onEnroll}
+              telemetryId="auth.passkey_enroll.enroll"
+        onPress={onEnroll}
               isLoading={isLoading}
               accessibilityLabel="Add a passkey"
               accessibilityRole="button"
@@ -80,7 +81,8 @@ export function PasskeyEnrollScreen({
             <Button
               className="w-full"
               variant="ghost"
-              onPress={onSkip}
+              telemetryId="auth.passkey_enroll.skip"
+        onPress={onSkip}
               accessibilityLabel="Not now"
               accessibilityRole="button"
             >

package/src/screens/auth/PrivacyPolicyScreen.tsx

@@ -1,3 +1,4 @@
+import { withClickTracking } from "../../services/telemetry";
 import React from "react";
 import { Linking, ScrollView, Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -61,7 +62,8 @@ export function PrivacyPolicyScreen({
       <View className="flex-1" style={{ backgroundColor: isDark ? "#000000" : "#FFFFFF" }}>
         <View className="px-6 pt-4 pb-6">
           <View className="flex-row items-center justify-between mb-6">
-            <IconButton variant="ghost" size="sm" onPress={() => router.back()}>
+            <IconButton variant="ghost" size="sm" telemetryId="auth.privacy_policy.back"
+        onPress={() => router.back()}>
               <Ionicons name="arrow-back" size={20} color={isDark ? "#FFFFFF" : "#000000"} />
             </IconButton>
 
@@ -189,7 +191,7 @@ export function PrivacyPolicyScreen({
                 <Text
                   className="font-mono text-sm underline"
                   style={{ color: isDark ? "#6BA3E5" : "#4A90E2" }}
-                  onPress={() => Linking.openURL(`mailto:${supportEmail}`)}
+                  onPress={withClickTracking("auth.privacy_policy.open_u_r_l", () => Linking.openURL(`mailto:${supportEmail}`))}
                 >
                   {supportEmail}
                 </Text>

package/src/screens/auth/RegisterScreen.tsx

@@ -1,3 +1,4 @@
+import { withClickTracking } from "../../services/telemetry";
 import React, { useEffect, useMemo, useState } from "react";
 import { KeyboardAvoidingView, Platform, ScrollView, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -232,7 +233,8 @@ export function RegisterScreen({
               <IconButton
                 variant="ghost"
                 size="sm"
-                onPress={() => router.push(routes.welcome)}
+                telemetryId="auth.register.push"
+        onPress={() => router.push(routes.welcome)}
                 accessibilityLabel="Go back"
                 accessibilityRole="button"
               >
@@ -361,7 +363,7 @@ export function RegisterScreen({
                         I agree to the{" "}
                         <Text
                           className="text-sm underline"
-                          onPress={() => router.push(routes.termsOfService)}
+                          onPress={withClickTracking("auth.register.push_2", () => router.push(routes.termsOfService))}
                           accessibilityRole="link"
                           accessibilityLabel="Terms of Service"
                         >
@@ -370,7 +372,7 @@ export function RegisterScreen({
                         and{" "}
                         <Text
                           className="text-sm underline"
-                          onPress={() => router.push(routes.privacyPolicy)}
+                          onPress={withClickTracking("auth.register.push_3", () => router.push(routes.privacyPolicy))}
                           accessibilityRole="link"
                           accessibilityLabel="Privacy Policy"
                         >
@@ -386,7 +388,7 @@ export function RegisterScreen({
                     Already have an account?{" "}
                     <Text
                       className="text-sm text-foreground underline"
-                      onPress={() => router.push(routes.login)}
+                      onPress={withClickTracking("auth.register.push_4", () => router.push(routes.login))}
                       accessibilityRole="link"
                       accessibilityLabel="Sign in"
                     >
@@ -399,7 +401,8 @@ export function RegisterScreen({
                   <Button
                     className="w-full"
                     isLoading={isLoading}
-                    onPress={handleRegister}
+                    telemetryId="auth.register.register"
+        onPress={handleRegister}
                     disabled={Platform.OS === "web" && !email && !password}
                     accessibilityLabel="Create account"
                     accessibilityRole="button"

package/src/screens/auth/ResetPasswordScreen.tsx

@@ -17,6 +17,7 @@ import {
   CardHeader,
   CardTitle,
 } from "../../components/card";
+import { withClickTracking } from "../../services/telemetry";
 import { Input, PasswordInput } from "../../components/input";
 import PasswordStrengthMeter from "../../components/auth/PasswordStrengthMeter";
 import PwnedPasswordWarning from "../../components/auth/PwnedPasswordWarning";
@@ -228,7 +229,8 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
         <View className="mt-4 self-start absolute top-4 left-6">
           <IconButton
             variant="ghost"
-            onPress={() => (step === "password" ? setStep("code") : router.back())}
+            telemetryId="auth.reset_password.step"
+        onPress={() => (step === "password" ? setStep("code") : router.back())}
             accessibilityLabel="Go back"
             accessibilityRole="button"
           >
@@ -270,7 +272,8 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
 
                 <Button
                   className="w-full"
-                  onPress={handleCodeSubmit}
+                  telemetryId="auth.reset_password.code_submit"
+        onPress={handleCodeSubmit}
                   isLoading={isLoading}
                   accessibilityLabel="Continue"
                   accessibilityRole="button"
@@ -282,7 +285,7 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
                   Back to{" "}
                   <Text
                     className="text-sm text-foreground underline"
-                    onPress={() => router.push(routes.login)}
+                    onPress={withClickTracking("auth.reset_password.push", () => router.push(routes.login))}
                     accessibilityRole="link"
                     accessibilityLabel="Sign in"
                   >
@@ -347,7 +350,8 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
 
                 <Button
                   className="w-full"
-                  onPress={handlePasswordSubmit}
+                  telemetryId="auth.reset_password.password_submit"
+        onPress={handlePasswordSubmit}
                   isLoading={isLoading}
                   accessibilityLabel="Reset password"
                   accessibilityRole="button"
@@ -358,7 +362,7 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
                 <MutedText className="text-center text-sm">
                   <Text
                     className="text-sm text-foreground underline"
-                    onPress={() => setStep("code")}
+                    onPress={withClickTracking("auth.reset_password.step_2", () => setStep("code"))}
                     accessibilityRole="link"
                     accessibilityLabel="Use a different code"
                   >

package/src/screens/auth/ServerConfigScreen.tsx

@@ -8,6 +8,7 @@ import {
   TextInput,
   View,
 } from "react-native";
+import { withClickTracking } from "../../services/telemetry";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useNavigation } from "../../context/NavigationContext";
 import { StatusBar } from "expo-status-bar";
@@ -243,7 +244,7 @@ export function ServerConfigScreen({
         <View className="px-6 py-6">
           <View className="mb-8 flex-row items-center justify-between">
             <Pressable
-              onPress={() => router.back()}
+              onPress={withClickTracking("auth.server_config.back", () => router.back())}
               accessibilityRole="button"
               accessibilityLabel="Go back"
               className="active:scale-98 h-10 w-10 items-center justify-center rounded-lg bg-secondary"
@@ -305,7 +306,7 @@ export function ServerConfigScreen({
           </View>
 
           <Pressable
-            onPress={testConnection}
+            onPress={withClickTracking("auth.server_config.test_connection", testConnection)}
             disabled={isTestingConnection}
             accessibilityRole="button"
             accessibilityLabel="Test connection"
@@ -330,7 +331,7 @@ export function ServerConfigScreen({
           </Pressable>
 
           <Pressable
-            onPress={handleUseDefault}
+            onPress={withClickTracking("auth.server_config.use_default", handleUseDefault)}
             accessibilityRole="button"
             accessibilityLabel="Use default server"
             className="active:scale-98 mb-3 w-full rounded-lg border border-border bg-background px-6 py-4"
@@ -344,7 +345,7 @@ export function ServerConfigScreen({
           </Pressable>
 
           <Pressable
-            onPress={handleClearConfiguration}
+            onPress={withClickTracking("auth.server_config.clear_configuration", handleClearConfiguration)}
             accessibilityRole="button"
             accessibilityLabel="Clear all settings"
             className="active:scale-98 mb-3 w-full rounded-lg border border-destructive bg-background px-6 py-3"
@@ -358,7 +359,7 @@ export function ServerConfigScreen({
           </Pressable>
 
           <Pressable
-            onPress={handleSave}
+            onPress={withClickTracking("auth.server_config.save", handleSave)}
             accessibilityRole="button"
             accessibilityLabel="Save configuration"
             className="active:scale-98 mb-6 w-full rounded-lg bg-primary px-6 py-4"

package/src/screens/auth/TermsOfServiceScreen.tsx

@@ -1,3 +1,4 @@
+import { withClickTracking } from "../../services/telemetry";
 import React from "react";
 import { Linking, ScrollView, Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -73,7 +74,8 @@ export function TermsOfServiceScreen({
       <View className="flex-1" style={{ backgroundColor: isDark ? "#000000" : "#FFFFFF" }}>
         <View className="px-6 pt-4 pb-6">
           <View className="flex-row items-center justify-between mb-6">
-            <IconButton variant="ghost" size="sm" onPress={() => router.back()}>
+            <IconButton variant="ghost" size="sm" telemetryId="auth.terms_of_service.back"
+        onPress={() => router.back()}>
               <Ionicons name="arrow-back" size={20} color={isDark ? "#FFFFFF" : "#000000"} />
             </IconButton>
 
@@ -166,7 +168,7 @@ export function TermsOfServiceScreen({
                 <Text
                   className="font-mono text-sm underline"
                   style={{ color: isDark ? "#6BA3E5" : "#4A90E2" }}
-                  onPress={() => Linking.openURL(`mailto:${supportEmail}`)}
+                  onPress={withClickTracking("auth.terms_of_service.open_u_r_l", () => Linking.openURL(`mailto:${supportEmail}`))}
                 >
                   {supportEmail}
                 </Text>

package/src/screens/auth/VerifyEmailScreen.tsx

@@ -18,6 +18,7 @@ import {
   CardHeader,
   CardTitle,
 } from "../../components/card";
+import { withClickTracking } from "../../services/telemetry";
 import { Input } from "../../components/input";
 import AuthService from "../../services/auth.service";
 import { useAuth } from "../../hooks/useAuth";
@@ -223,7 +224,8 @@ export function VerifyEmailScreen() {
         <View className="mt-4 self-start absolute top-4 left-6">
           <IconButton
             variant="ghost"
-            onPress={() => logout()}
+            telemetryId="auth.verify_email.logout"
+        onPress={() => logout()}
             accessibilityLabel="Sign out"
             accessibilityRole="button"
           >
@@ -268,7 +270,7 @@ export function VerifyEmailScreen() {
               ) : (
                 <Text
                   className="text-base text-foreground underline"
-                  onPress={handleResend}
+                  onPress={withClickTracking("auth.verify_email.resend", handleResend)}
                   accessibilityRole="button"
                   accessibilityLabel="Resend verification code"
                 >
@@ -281,7 +283,8 @@ export function VerifyEmailScreen() {
           <CardFooter className="flex-col items-center gap-1 border-t-0 pt-0">
             <Button
               className="h-14 w-full"
-              onPress={handleVerify}
+              telemetryId="auth.verify_email.verify"
+        onPress={handleVerify}
               isLoading={isLoading}
               accessibilityLabel="Continue"
               accessibilityRole="button"
@@ -294,7 +297,8 @@ export function VerifyEmailScreen() {
             <Button
               variant="ghost"
               className="w-full"
-              onPress={() => logout()}
+              telemetryId="auth.verify_email.logout_2"
+        onPress={() => logout()}
               accessibilityLabel="Sign out"
               accessibilityRole="button"
             >

package/src/screens/auth/WelcomeScreen.tsx

@@ -50,10 +50,12 @@ export function WelcomeScreen({ decoration, topAccessory }: WelcomeScreenProps)
         ) : null}
 
         <View className="w-full max-w-[360px] gap-3">
-          <Button className="w-full" onPress={() => router.push(routes.login)}>
+          <Button className="w-full" telemetryId="auth.welcome.push"
+        onPress={() => router.push(routes.login)}>
             Sign In
           </Button>
-          <Button variant="outline" className="w-full" onPress={() => router.push(routes.register)}>
+          <Button variant="outline" className="w-full" telemetryId="auth.welcome.push_2"
+        onPress={() => router.push(routes.register)}>
             Create Account
           </Button>
         </View>

package/src/services/__tests__/telemetry.test.ts

@@ -0,0 +1,81 @@
+import {
+  __resetTelemetryForTests,
+  registerTelemetry,
+  trackClick,
+  withClickTracking,
+} from "../telemetry";
+
+describe("telemetry registry", () => {
+  afterEach(() => __resetTelemetryForTests());
+
+  it("is a no-op until a sink is registered", () => {
+    // The whole point of the default: a consumer that never opts in must not
+    // have this throw, buffer, or reach the network.
+    expect(() => trackClick("login.submit")).not.toThrow();
+  });
+
+  it("forwards element and route to the registered sink", () => {
+    const sink = { trackClick: jest.fn() };
+    registerTelemetry(sink);
+
+    trackClick("login.submit", "/login");
+
+    expect(sink.trackClick).toHaveBeenCalledWith("login.submit", "/login");
+  });
+
+  it("swallows a sink that throws", () => {
+    // A failing sink must never take down the press handler it is observing.
+    registerTelemetry({
+      trackClick: () => {
+        throw new Error("collector unreachable");
+      },
+    });
+
+    expect(() => trackClick("login.submit")).not.toThrow();
+  });
+
+  it("stops reporting once the sink is removed", () => {
+    const sink = { trackClick: jest.fn() };
+    registerTelemetry(sink);
+    registerTelemetry(null);
+
+    trackClick("login.submit");
+
+    expect(sink.trackClick).not.toHaveBeenCalled();
+  });
+
+  describe("withClickTracking", () => {
+    it("returns the original handler when there is no id", () => {
+      // Identity, not a wrapper: an untagged control should not pay for a
+      // closure on every render.
+      const handler = jest.fn();
+      expect(withClickTracking(undefined, handler)).toBe(handler);
+    });
+
+    it("reports before invoking the handler", () => {
+      const order: string[] = [];
+      registerTelemetry({ trackClick: () => order.push("tracked") });
+      const wrapped = withClickTracking("login.submit", () => order.push("handled"));
+
+      wrapped?.();
+
+      expect(order).toEqual(["tracked", "handled"]);
+    });
+
+    it("still reports when there is no handler to call", () => {
+      const sink = { trackClick: jest.fn() };
+      registerTelemetry(sink);
+
+      withClickTracking("login.submit", undefined)?.();
+
+      expect(sink.trackClick).toHaveBeenCalledWith("login.submit", undefined);
+    });
+
+    it("passes arguments and the return value through", () => {
+      registerTelemetry({ trackClick: jest.fn() });
+      const wrapped = withClickTracking("row.select", (id: never) => `picked ${String(id)}`);
+
+      expect(wrapped?.("abc" as never)).toBe("picked abc");
+    });
+  });
+});

package/src/services/auth.service.ts

@@ -98,6 +98,15 @@ export interface User {
   mfa_enabled?: boolean;
   mfa_verified?: boolean;
   created_at?: string;
+  /**
+   * Tenant the account belongs to. Only the multi-tenant IdP (access) sends
+   * these two; the single-tenant products have no tenant and carry a single
+   * `role` rather than a role set.
+   */
+  tenant_id?: string;
+  tenant_slug?: string;
+  /** Effective role names, as resolved by the IdP (direct, assigned, or via a group). */
+  roles?: string[];
 }
 
 export interface AuthResponse {

package/src/services/index.ts

@@ -50,3 +50,12 @@ export {
   resolveIcon,
   type ResolvedIcon,
 } from "./favicon";
+
+// Telemetry registry. No-op until a host app calls registerTelemetry.
+export {
+  registerTelemetry,
+  trackClick,
+  withClickTracking,
+  __resetTelemetryForTests,
+  type TelemetrySink,
+} from "./telemetry";

package/src/services/telemetry.ts

@@ -0,0 +1,107 @@
+// Telemetry registry.
+//
+// This package deliberately knows nothing about how telemetry is collected,
+// batched, authenticated or shipped. It only knows that an interaction
+// happened and what it was called. The consuming app registers a sink at
+// startup — the same arrangement as `configureApi` for HTTP — so one app can
+// post to its own server, another to a collector, and a third to nothing at
+// all.
+//
+// Nothing is registered by default, and every entry point is a no-op until
+// something is. An app that never calls `registerTelemetry` behaves exactly as
+// it did before this existed, which is what makes it safe to ship in a package
+// that self-hosted deployments consume.
+
+/** What a host app must provide to receive interaction events. */
+export interface TelemetrySink {
+  /**
+   * An interactive element was activated.
+   *
+   * `element` is the author-assigned, stable id — not label text, which
+   * changes with copy and can carry user data.
+   */
+  trackClick(element: string, route?: string): void;
+}
+
+class TelemetryStore {
+  private sink: TelemetrySink | null = null;
+
+  register(sink: TelemetrySink | null): void {
+    this.sink = sink;
+  }
+
+  trackClick(element: string, route?: string): void {
+    // Never allowed to throw into a press handler. A telemetry sink that
+    // fails must not stop the button from doing its job.
+    try {
+      this.sink?.trackClick(element, route);
+    } catch {
+      // Intentionally swallowed.
+    }
+  }
+
+  reset(): void {
+    this.sink = null;
+  }
+}
+
+const store = new TelemetryStore();
+
+/**
+ * Install a telemetry sink. Call once at app startup; pass `null` to remove.
+ */
+export function registerTelemetry(sink: TelemetrySink | null): void {
+  store.register(sink);
+}
+
+/**
+ * Report an element activation. Safe to call unconditionally — it is a no-op
+ * when no sink is registered.
+ */
+export function trackClick(element: string, route?: string): void {
+  store.trackClick(element, route);
+}
+
+/**
+ * Wrap a press handler so activating the element is reported first.
+ *
+ * Used by the primitives to implement `telemetryId`, and exported so app code
+ * can tag anything the primitives do not cover.
+ */
+export function withClickTracking<F extends (...args: never[]) => unknown>(
+  element: string | undefined,
+  handler: F,
+): F;
+export function withClickTracking<F extends (...args: never[]) => unknown>(
+  element: string | undefined,
+  handler: F | null | undefined,
+): F | undefined;
+/**
+ * Wrap a press handler so activating the element is reported first.
+ *
+ * Used by the primitives to implement `telemetryId`, and exported so app code
+ * can tag anything the primitives do not cover.
+ *
+ * Overloaded so the wrapper is exactly as optional as the handler it wraps: a
+ * required `onPress` stays required, and React Native's nullable `onPress` is
+ * accepted without every call site having to coalesce it.
+ */
+export function withClickTracking(
+  element: string | undefined,
+  handler: ((...args: never[]) => unknown) | null | undefined,
+): ((...args: never[]) => unknown) | undefined {
+  // Untagged controls keep their original handler rather than gaining a
+  // closure per render for nothing.
+  if (element === undefined) {
+    return handler ?? undefined;
+  }
+  return (...args: never[]) => {
+    trackClick(element);
+    return handler?.(...args);
+  };
+}
+
+/** Test seam: drop the registered sink so cases cannot leak into each other. */
+export function __resetTelemetryForTests(): void {
+  store.reset();
+}