@oxy.so/services 1.0.2 → 1.1.0

package/src/ui/components/ProfileButton.tsx

@@ -30,6 +30,7 @@ const isWeb = Platform.OS === 'web';
  */
 const BG_TRANSITION_MS = 150;
 const AVATAR_TRANSITION_MS = 250;
+const OPACITY_TRANSITION_MS = 150;
 const LEAVE_DELAY_MS = 50;
 
 /** Shrunk-avatar scale on hover, matching Bluesky's `scale: 2/3`. */
@@ -266,13 +267,10 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
 
     // ── Expanded row animation ──────────────────────────────────────────────
     // On native everything is statically visible (no hover exists). On web we
-    // reproduce Bluesky's reveal: the row fills with a subtle contrast bg and
-    // the avatar shrinks + slides left. Bluesky also tucks the identity block
-    // under the avatar with a negative margin, because there the name is
-    // revealed only on hover and slides out from behind the shrinking avatar.
-    // Here the identity is ALWAYS visible in the expanded row, so that tuck
-    // was a permanent overlap: at the default 40px avatar the name started 8px
-    // under it (OxyHQ/Alia#546). The row's own gap is the whole spacing now.
+    // reproduce Bluesky's reveal: the row fills with a subtle contrast bg, the
+    // avatar shrinks + slides left, and the name/handle/actions fade in from
+    // behind it. Keeping the identity hidden while inactive is what makes the
+    // negative margin intentional instead of an overlap.
     const reducedMotion = isWeb && prefersReducedMotion();
 
     // Slide the shrunk avatar left so its visual left edge stays put as it
@@ -307,8 +305,24 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         }
         : undefined;
 
-    // Expanded mode always shows identity + chevron (console/inbox wide sidebar).
-    // Hover only animates the row background and avatar shrink — not text visibility.
+    const identityStyle: ViewStyle | undefined = isWeb
+        ? {
+            marginLeft: -resolvedAvatarSize / 2,
+            opacity: active ? 1 : 0,
+            transitionProperty: 'opacity',
+            transitionDuration: `${OPACITY_TRANSITION_MS}ms`,
+            transitionDelay: active ? '0ms' : `${LEAVE_DELAY_MS}ms`,
+        }
+        : undefined;
+
+    const actionStyle: ViewStyle | undefined = isWeb
+        ? {
+            opacity: active ? 1 : 0,
+            transitionProperty: 'opacity',
+            transitionDuration: `${OPACITY_TRANSITION_MS}ms`,
+            transitionDelay: active ? '0ms' : `${LEAVE_DELAY_MS}ms`,
+        }
+        : undefined;
 
     return (
         <View className={className} style={[styles.fullWidth, style]}>
@@ -320,7 +334,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
                 {...webInteractionProps}
             >
                 <View style={avatarWrapperStyle}>{avatarNode}</View>
-                <View style={styles.identity}>
+                <View style={[styles.identity, identityStyle]}>
                     <Text
                         style={[styles.displayName, { color: colors.text }]}
                         numberOfLines={1}
@@ -336,7 +350,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
                         </Text>
                     ) : null}
                 </View>
-                <View>
+                <View style={actionStyle}>
                     <MaterialCommunityIcons
                         name="dots-horizontal"
                         size={18}

package/src/ui/components/__tests__/LanguageBridge.test.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { LanguageBridge } from '../LanguageBridge';
+
+/**
+ * `OxyProvider`'s language config prop, realized: the one place Oxy's
+ * resolved language reaches a host app's own i18n library. `useOxy` is mocked here —
+ * it is the SDK's own well-tested context — so these tests exercise exactly
+ * what this component adds: coercion to the caller's catalog, and calling
+ * back only when the RESOLVED locale actually changes.
+ */
+
+let mockCurrentLanguage = 'en-US';
+jest.mock('../../context/OxyContext', () => ({
+  useOxy: () => ({ currentLanguage: mockCurrentLanguage }),
+}));
+
+const HOST_CATALOG = ['en-US', 'es-ES', 'fr-FR'] as const;
+
+beforeEach(() => {
+  mockCurrentLanguage = 'en-US';
+});
+
+it('resolves and reports the account language on mount', () => {
+  mockCurrentLanguage = 'es-ES';
+  const onChange = jest.fn();
+  render(<LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={onChange} />);
+
+  expect(onChange).toHaveBeenCalledWith('es-ES');
+});
+
+it('coerces a locale the host never shipped a catalog for, by base language', () => {
+  mockCurrentLanguage = 'es-MX';
+  const onChange = jest.fn();
+  render(<LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={onChange} />);
+
+  expect(onChange).toHaveBeenCalledWith('es-ES');
+});
+
+it('falls back to the caller default when nothing matches, even by base', () => {
+  mockCurrentLanguage = 'ja-JP';
+  const onChange = jest.fn();
+  render(<LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={onChange} />);
+
+  expect(onChange).toHaveBeenCalledWith('en-US');
+});
+
+it('calls back again only when the RESOLVED locale changes', () => {
+  const onChange = jest.fn();
+  const { rerender } = render(
+    <LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={onChange} />,
+  );
+  expect(onChange).toHaveBeenCalledTimes(1);
+
+  // Same resolved locale, brand-new callback identity (the common case for an
+  // inline arrow function) — must not re-fire.
+  rerender(<LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={() => {}} />);
+  expect(onChange).toHaveBeenCalledTimes(1);
+
+  mockCurrentLanguage = 'fr-FR';
+  rerender(<LanguageBridge supportedLocales={HOST_CATALOG} fallbackLocale="en-US" onChange={onChange} />);
+  expect(onChange).toHaveBeenCalledTimes(2);
+  expect(onChange).toHaveBeenLastCalledWith('fr-FR');
+});
+
+it('reports a rejected onChange to onError instead of throwing', async () => {
+  const failure = new Error('catalog failed to load');
+  const onChange = jest.fn().mockRejectedValue(failure);
+  const onError = jest.fn();
+  render(
+    <LanguageBridge
+      supportedLocales={HOST_CATALOG}
+      fallbackLocale="en-US"
+      onChange={onChange}
+      onError={onError}
+    />,
+  );
+
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  expect(onError).toHaveBeenCalledWith(failure, 'en-US');
+});

package/src/ui/components/__tests__/OxyConsentScreen.test.tsx

@@ -24,6 +24,7 @@ function renderScreen(props: Partial<OxyConsentScreenProps> = {}) {
       application={props.application ?? baseApp}
       scopes={props.scopes ?? ['openid', 'profile']}
       user={props.user}
+      resource={props.resource}
       onAllow={props.onAllow ?? onAllow}
       onDeny={props.onDeny ?? onDeny}
       busy={props.busy}
@@ -138,6 +139,37 @@ describe('OxyConsentScreen', () => {
     expect(getByTestId('consent-account-name').textContent).toBe('Alice A');
   });
 
+  it('renders the exact MCP app, protected resource, account id and catalog-derived write actions', () => {
+    const { getByTestId } = renderScreen({
+      scopes: ['email.read', 'email.send'],
+      user: {
+        accountId: 'account-mail-1',
+        displayName: 'Oxy Mail',
+        handle: 'oxy-mail-account',
+      },
+      resource: {
+        application: { name: 'Inbox', iconUrl: 'inbox-icon' },
+        uri: 'https://mcp.inbox.oxy.so',
+        writeActions: [{
+          name: 'sendEmail',
+          version: '1.0.0',
+          description: 'Send an email from the selected mailbox.',
+          requiredCapabilities: ['email.send'],
+          effect: 'external',
+        }],
+      },
+    });
+
+    expect(getByTestId('consent-resource-app').textContent).toBe('Inbox');
+    expect(getByTestId('consent-resource-uri').textContent).toBe('https://mcp.inbox.oxy.so');
+    expect(getByTestId('consent-account-id').textContent).toContain('account-mail-1');
+    expect(getByTestId('consent-scope-email.send').textContent).toContain('email.send');
+    expect(getByTestId('consent-write-action-sendEmail').textContent).toContain(
+      'Send an email from the selected mailbox.',
+    );
+    expect(getByTestId('consent-write-action-sendEmail').textContent).toContain('External');
+  });
+
   it('falls back to the handle when the account has no display name (D5)', () => {
     const { getByTestId } = renderScreen({ user: { handle: 'bob' } });
     expect(getByTestId('consent-account-name').textContent).toBe('bob');

package/src/ui/types/navigation.ts

@@ -172,4 +172,34 @@ export interface OxyProviderProps {
      * @default 'persistent'
      */
     deviceCredentialStorage?: 'persistent' | 'ephemeral';
+    /**
+     * Wires the app's OWN i18n library to Oxy's resolved language, so the
+     * account (or, signed out, the device/guest locale) drives the app's
+     * translated UI directly — no app-local effect or "sync" component to
+     * remember to mount. Oxy decides WHICH language; the app keeps owning its
+     * own translation catalogs and library (i18next, FormatJS, or anything
+     * else) and is told through `onChange` when to switch.
+     *
+     * Omitted entirely (the default) when an app has no i18n of its own, or
+     * manages it independently of the account/device locale.
+     */
+    language?: OxyLanguageConfig;
+}
+
+export interface OxyLanguageConfig {
+    /** The exact locales this app ships a translation catalog for. */
+    supportedLocales: readonly string[];
+    /**
+     * Used when Oxy's resolved language matches none of `supportedLocales`,
+     * not even by base language (Oxy's account-locale catalog is broader
+     * than any one app's translations).
+     */
+    fallbackLocale: string;
+    /**
+     * Called whenever the resolved locale changes, coerced to the closest
+     * one in `supportedLocales`. May return a promise; a rejection is
+     * reported to `onError` instead of throwing into the app tree.
+     */
+    onChange: (locale: string) => void | Promise<void>;
+    onError?: (error: unknown, locale: string) => void;
 }