@oxy.so/services 13.7.0 → 13.9.0

package/src/ui/components/OxyDeviceSignIn.tsx

@@ -0,0 +1,172 @@
+/**
+ * Sign-in for a device with no keyboard — a TV, a photo frame, a kiosk: a large
+ * QR that any phone camera opens, and the code to compare on the phone.
+ *
+ * The QR encodes the request's https approval page
+ * (`signIn.approvalUrl`, `auth.oxy.so/device?user_code=…`), not the
+ * `oxycommons://` deep link the account dialog shows: whoever scans a frame may
+ * not have Commons, and the page works in any phone browser. It prints the same
+ * code this surface shows, so the person can check they are approving THIS
+ * screen before they press Allow there.
+ *
+ * It owns one QR-only request (`controller.startInlineQr()`), exactly like the
+ * sign-in entry's embedded QR (`signIn/InlineCommonsQr.tsx`): started on mount,
+ * renewed when it expires, withdrawn on unmount while it is still approvable.
+ * It never pushes to a phone or opens Commons. On approval the controller
+ * claims the session and `OxyProvider` signs the app in, so the host simply
+ * stops rendering this.
+ *
+ * Anti-phishing: the plate encodes `signIn.approvalUrl` and the code line shows
+ * `signIn.authorizeCode`, both PUBLIC; nothing about the application is read out
+ * of either here. The secret `sessionToken` never leaves the controller.
+ */
+
+import type React from 'react';
+import { useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+import { Button } from '@oxy.so/bloom/button';
+import { Code } from '@oxy.so/bloom/code';
+import { RiCheckboxCircleLine } from '@oxy.so/bloom/icons/RiCheckboxCircleLine';
+import { RiRefreshLine } from '@oxy.so/bloom/icons/RiRefreshLine';
+import { SpinnerIcon } from '@oxy.so/bloom/loading';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Text } from '@oxy.so/bloom/typography';
+import { useOxy } from '../context/oxyRuntimeContext';
+import { useI18n } from '../hooks/useI18n';
+import { useAccountDialogSnapshot } from '../hooks/accountDialogSnapshot';
+
+/** High-contrast, un-themed on purpose: scan reliability. */
+const QR_PLATE_BG = '#FFFFFF';
+const QR_FOREGROUND = '#000000';
+/** Big enough to scan from across a room at the default size. */
+const DEFAULT_QR_SIZE = 280;
+/** The quiet zone around the symbol, as a fraction of its size. */
+const PLATE_PADDING_RATIO = 0.06;
+
+export interface OxyDeviceSignInProps {
+  /** Edge of the QR symbol in points. Defaults to 280. */
+  size?: number;
+}
+
+export const OxyDeviceSignIn: React.FC<OxyDeviceSignInProps> = ({ size = DEFAULT_QR_SIZE }) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { accountDialogController: controller } = useOxy();
+  const { signIn } = useAccountDialogSnapshot(controller);
+  const live = signIn.inline && (signIn.phase === 'starting' || signIn.phase === 'waiting');
+  const expired = signIn.inline && signIn.phase === 'error' && signIn.failure === 'expired';
+
+  // One request for as long as this is on screen. Withdrawn on the way out only
+  // while it is still ours and still approvable.
+  useEffect(() => {
+    if (!controller) return;
+    const { signIn: current } = controller.getSnapshot();
+    if (!(current.inline && (current.phase === 'starting' || current.phase === 'waiting'))) {
+      void controller.startInlineQr();
+    }
+    return () => {
+      const { signIn: last } = controller.getSnapshot();
+      if (last.inline && (last.phase === 'starting' || last.phase === 'waiting'))
+        controller.cancelSignIn();
+    };
+  }, [controller]);
+
+  // A code only lives a few minutes; an expired one is replaced, not reported.
+  useEffect(() => {
+    if (controller && expired) void controller.startInlineQr();
+  }, [controller, expired]);
+
+  const padding = Math.round(size * PLATE_PADDING_RATIO);
+  const showsCode = live && signIn.approvalUrl && signIn.progress !== 'confirming-identity';
+
+  let plate: React.ReactNode;
+  if (signIn.inline && signIn.progress === 'identity-confirmed') {
+    plate = <RiCheckboxCircleLine size="3xl" fill={theme.colors.success} />;
+  } else if (showsCode && signIn.approvalUrl) {
+    plate = (
+      <QRCode
+        value={signIn.approvalUrl}
+        size={size}
+        backgroundColor={QR_PLATE_BG}
+        color={QR_FOREGROUND}
+      />
+    );
+  } else if (live || expired || (signIn.inline && signIn.phase === 'completed')) {
+    plate = <SpinnerIcon size={Math.round(size / 6)} color={QR_FOREGROUND} />;
+  } else {
+    // Failed for a reason renewing will not fix by itself, or superseded and
+    // then withdrawn: one press for a new code.
+    plate = (
+      <Button
+        appearance="plain"
+        tone="neutral"
+        leadingIcon={RiRefreshLine}
+        onPress={() => void controller?.startInlineQr()}
+        testID="device-sign-in-renew"
+      >
+        {t('signin.qr.renew')}
+      </Button>
+    );
+  }
+
+  return (
+    <View style={styles.block} testID="oxy-device-sign-in">
+      <Text style={[styles.title, { color: theme.colors.text }]}>{t('signin.device.title')}</Text>
+      <Text style={[styles.caption, { color: theme.colors.textSecondary }]}>
+        {t('signin.device.caption')}
+      </Text>
+      <View
+        style={[styles.plate, { width: size + padding * 2, height: size + padding * 2, padding }]}
+      >
+        {plate}
+      </View>
+      {showsCode && signIn.authorizeCode ? (
+        <View style={styles.codeBlock}>
+          <Text style={[styles.codeHint, { color: theme.colors.textSecondary }]}>
+            {t('signin.device.codeHint')}
+          </Text>
+          <Code testID="device-sign-in-code" style={styles.code}>
+            {signIn.authorizeCode}
+          </Code>
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  block: {
+    alignItems: 'center',
+    gap: 16,
+  },
+  title: {
+    fontSize: 28,
+    lineHeight: 34,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  caption: {
+    fontSize: 16,
+    lineHeight: 22,
+    textAlign: 'center',
+  },
+  plate: {
+    borderRadius: 16,
+    backgroundColor: QR_PLATE_BG,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  codeBlock: {
+    alignItems: 'center',
+    gap: 4,
+  },
+  codeHint: {
+    fontSize: 13,
+    lineHeight: 18,
+    textAlign: 'center',
+  },
+  code: {
+    fontSize: 14,
+  },
+});

package/src/ui/context/OxyContext.tsx

@@ -1,3 +1,4 @@
+import { installNativeAssetFiles } from '../utils/nativeAssetFiles';
 import {
   startNativeOAuthSignIn,
   type StartNativeOAuthSignInOptions,
@@ -9,7 +10,15 @@ import {
   setIsolatedOAuthSession,
 } from './isolatedOAuthSession';
 import type React from 'react';
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
 import { AppState, Linking, Platform } from 'react-native';
 import { OxyServices } from '@oxy.so/core';
 import type { LoginSessionResult } from '@oxy.so/contracts';
@@ -182,6 +191,9 @@ export const OxyRuntimeProvider: React.FC<OxyRuntimeProviderProps> = ({
     }
   }
   const oxyServices = oxyServicesRef.current;
+  // Child passive effects may upload immediately on mount. Configure transport
+  // during commit, before those effects, without mutating the client in render.
+  useLayoutEffect(() => installNativeAssetFiles(oxyServices), [oxyServices]);
 
   // The device-first persisted auth-state store (per-origin device credential on
   // web; SecureStore session blob on native). Built ONCE per provider mount.

package/src/ui/hooks/accountDialogSnapshot.ts

@@ -28,6 +28,7 @@ export const EMPTY_ACCOUNT_DIALOG_SNAPSHOT: AccountDialogSnapshot = {
     phase: 'idle',
     authorizeCode: null,
     qrPayload: null,
+    approvalUrl: null,
     expiresAt: null,
     error: null,
     failure: null,

package/src/ui/index.ts

@@ -27,6 +27,8 @@ import '../registerPlatform';
 // Components
 export { default as OxyProvider } from './components/OxyProvider';
 export { default as OxySignInButton } from './components/OxySignInButton';
+export { OxyDeviceSignIn } from './components/OxyDeviceSignIn';
+export type { OxyDeviceSignInProps } from './components/OxyDeviceSignIn';
 export { default as OxyAuthPrompt } from './components/OxyAuthPrompt';
 export type { OxyAuthPromptProps } from './components/OxyAuthPrompt';
 export { LogoIcon } from './components/logo/LogoIcon';

package/src/ui/utils/__tests__/nativeAssetFiles.test.ts

@@ -0,0 +1,270 @@
+import type { AssetFileAdapter, OxyServices } from '@oxy.so/core';
+import { installNativeAssetFiles } from '../nativeAssetFiles.native';
+
+const originalUri = 'file:///capture.mp4';
+const mockFiles = new Map<string, { size: number; written: number }>();
+const mockReads: number[] = [];
+const mockDeleted: string[] = [];
+let mockNativeHasher: unknown = null;
+jest.mock('expo-modules-core', () => ({ requireOptionalNativeModule: () => mockNativeHasher }));
+let mockUpload: jest.Mock;
+let mockCancel: jest.Mock;
+let mockRequest: { url: string; uri: string; options: unknown } | undefined;
+
+jest.mock('expo-file-system', () => {
+  const uriOf = (value: string | { uri: string }) =>
+    typeof value === 'string' ? value : value.uri;
+  class Directory {
+    uri: string;
+    constructor(base: string, name: string) {
+      this.uri = `${base}/${name}`;
+    }
+    get exists() {
+      return false;
+    }
+    create() {}
+    delete() {}
+  }
+  class File {
+    uri: string;
+    constructor(base: string | { uri: string }, name?: string) {
+      this.uri = name ? `${uriOf(base)}/${name}` : uriOf(base);
+    }
+    get exists() {
+      return mockFiles.has(this.uri);
+    }
+    get size() {
+      return mockFiles.get(this.uri)?.size ?? 0;
+    }
+    create() {
+      mockFiles.set(this.uri, { size: 0, written: 0 });
+    }
+    delete() {
+      mockDeleted.push(this.uri);
+      mockFiles.delete(this.uri);
+    }
+    open() {
+      const uri = this.uri;
+      let offset = 0;
+      let closed = false;
+      return {
+        get offset() {
+          return offset;
+        },
+        set offset(next: number) {
+          offset = next;
+        },
+        readBytes(length: number) {
+          if (closed) throw new Error('Closed');
+          mockReads.push(length);
+          const size = mockFiles.get(uri)?.size ?? 0;
+          const bytes = new Uint8Array(Math.max(0, Math.min(length, size - offset))).fill(7);
+          offset += bytes.length;
+          return bytes;
+        },
+        writeBytes(bytes: Uint8Array) {
+          if (closed) throw new Error('Closed');
+          const file = mockFiles.get(uri);
+          if (!file) throw new Error('Missing target');
+          file.written += bytes.length;
+          file.size += bytes.length;
+        },
+        close() {
+          closed = true;
+        },
+      };
+    }
+  }
+  return { File, Directory, Paths: { cache: 'file:///cache' } };
+});
+jest.mock('expo-file-system/legacy', () => ({
+  FileSystemUploadType: { BINARY_CONTENT: 0 },
+  FileSystemSessionType: { FOREGROUND: 0 },
+  createUploadTask: (
+    url: string,
+    uri: string,
+    options: unknown,
+    progress: (event: { totalBytesSent: number }) => void,
+  ) => {
+    mockRequest = { url, uri, options };
+    return { uploadAsync: () => mockUpload(uri, progress), cancelAsync: () => mockCancel() };
+  },
+}));
+
+function adapter(): AssetFileAdapter {
+  let installed: AssetFileAdapter | undefined;
+  const oxy = {
+    assets: {
+      installFileAdapter: (value: AssetFileAdapter) => {
+        installed = value;
+        return () => {};
+      },
+    },
+  } as unknown as OxyServices;
+  installNativeAssetFiles(oxy);
+  if (!installed) throw new Error('Adapter was not installed');
+  return installed;
+}
+
+beforeEach(() => {
+  mockNativeHasher = null;
+  mockFiles.clear();
+  mockFiles.set(originalUri, { size: 370 * 1024 * 1024, written: 0 });
+  mockReads.length = 0;
+  mockDeleted.length = 0;
+  mockRequest = undefined;
+  mockCancel = jest.fn(async () => undefined);
+  mockUpload = jest.fn(
+    async (uri: string, progress: (event: { totalBytesSent: number }) => void) => {
+      progress({ totalBytesSent: mockFiles.get(uri)?.size ?? 0 });
+      return { status: 200 };
+    },
+  );
+});
+
+test('reads bounded ranges and streams only a temporary part of a larger-than-heap file', async () => {
+  const source = await adapter()(originalUri);
+  expect(source.size).toBe(370 * 1024 * 1024);
+  const bytes = await source.readRange(16 * 1024 * 1024, 24 * 1024 * 1024);
+  expect(bytes.length).toBe(8 * 1024 * 1024);
+  expect(bytes[bytes.length - 1]).toBe(7);
+  const onProgress = jest.fn();
+  await expect(
+    source.putPart({
+      url: 'https://storage.example/part?signed=1',
+      start: 32 * 1024 * 1024,
+      end: 40 * 1024 * 1024,
+      timeoutMs: 1000,
+      onProgress,
+    }),
+  ).resolves.toEqual({ ok: true });
+  expect(Math.max(...mockReads)).toBe(1024 * 1024);
+  expect(mockReads.reduce((sum, size) => sum + size, 0)).toBe(16 * 1024 * 1024);
+  expect(mockRequest).toMatchObject({
+    url: 'https://storage.example/part?signed=1',
+    options: { httpMethod: 'PUT', uploadType: 0, sessionType: 0, headers: {} },
+  });
+  expect(onProgress).toHaveBeenCalledWith(8 * 1024 * 1024);
+  expect(mockFiles.has(originalUri)).toBe(true);
+  expect(mockFiles.size).toBe(1);
+  expect(mockDeleted).toHaveLength(1);
+});
+
+test('abort cancels the native transfer and deletes its part while preserving the capture', async () => {
+  const source = await adapter()(originalUri);
+  const controller = new AbortController();
+  mockUpload.mockImplementation(() => new Promise(() => {}));
+  const pending = source.putPart({
+    url: 'https://storage.example/part',
+    start: 0,
+    end: 2 * 1024 * 1024,
+    timeoutMs: 1000,
+    signal: controller.signal,
+    onProgress: jest.fn(),
+  });
+  while (!mockRequest) await new Promise((resolve) => setTimeout(resolve, 0));
+  controller.abort();
+  await expect(pending).rejects.toMatchObject({ name: 'AbortError' });
+  expect(mockCancel).toHaveBeenCalledTimes(1);
+  expect(mockFiles.size).toBe(1);
+  expect(mockFiles.has(originalUri)).toBe(true);
+});
+
+test('a stalled native PUT times out and cleans its temporary part', async () => {
+  const source = await adapter()(originalUri);
+  mockUpload.mockImplementation(() => new Promise(() => {}));
+  await expect(
+    source.putPart({
+      url: 'https://storage.example/part',
+      start: 0,
+      end: 1024,
+      timeoutMs: 5,
+      onProgress: jest.fn(),
+    }),
+  ).resolves.toEqual({ ok: false, status: 0 });
+  expect(mockCancel).toHaveBeenCalledTimes(1);
+  expect(mockFiles.size).toBe(1);
+});
+
+test('hash reads let scheduled UI work run before the complete range is read', async () => {
+  const source = await adapter()(originalUri);
+  let readsAtTick = -1;
+  const tick = new Promise<void>((resolve) =>
+    setTimeout(() => {
+      readsAtTick = mockReads.length;
+      resolve();
+    }, 0),
+  );
+  await source.readRange(0, 8 * 1024 * 1024);
+  await tick;
+  expect(readsAtTick).toBeGreaterThan(0);
+  expect(readsAtTick).toBeLessThan(8);
+});
+
+test('an abort timer interrupts part preparation before copying the complete range', async () => {
+  const source = await adapter()(originalUri);
+  const controller = new AbortController();
+  setTimeout(() => controller.abort(), 0);
+  await expect(
+    source.putPart({
+      url: 'https://storage.example/part',
+      start: 0,
+      end: 8 * 1024 * 1024,
+      timeoutMs: 1000,
+      signal: controller.signal,
+      onProgress: jest.fn(),
+    }),
+  ).rejects.toMatchObject({ name: 'AbortError' });
+  expect(mockReads.length).toBeLessThan(8);
+  expect(mockUpload).not.toHaveBeenCalled();
+  expect(mockFiles.size).toBe(1);
+  expect(mockFiles.has(originalUri)).toBe(true);
+});
+
+test('uses the native streaming hash without reading bytes into JavaScript', async () => {
+  let progress: (event: { id: string; loaded: number }) => void;
+  const remove = jest.fn();
+  const digest = 'ab'.repeat(32);
+  mockNativeHasher = {
+    createHash: jest.fn(),
+    cancelHash: jest.fn(),
+    addListener: jest.fn((_event, callback) => {
+      progress = callback;
+      return { remove };
+    }),
+    hashAsync: jest.fn(async (id, _uri, size) => {
+      progress({ id: 'another-upload', loaded: 1 });
+      progress({ id, loaded: size });
+      return digest;
+    }),
+  };
+  const source = await adapter()(originalUri);
+  const onProgress = jest.fn();
+  await expect(source.hash?.(onProgress)).resolves.toBe(digest);
+  expect(mockReads).toHaveLength(0);
+  expect(onProgress).toHaveBeenCalledTimes(1);
+  expect(onProgress).toHaveBeenCalledWith(source.size);
+  expect(remove).toHaveBeenCalledTimes(1);
+});
+
+test('native hash cancellation waits for worker cleanup and removes its listener', async () => {
+  const controller = new AbortController();
+  const remove = jest.fn();
+  let finish: (value: string) => void;
+  const cancelHash = jest.fn(() => finish('ab'.repeat(32)));
+  mockNativeHasher = {
+    createHash: jest.fn(),
+    cancelHash,
+    addListener: () => ({ remove }),
+    hashAsync: () =>
+      new Promise<string>((resolve) => {
+        finish = resolve;
+      }),
+  };
+  const source = await adapter()(originalUri);
+  const pending = source.hash?.(undefined, controller.signal);
+  controller.abort();
+  await expect(pending).rejects.toMatchObject({ name: 'AbortError' });
+  expect(cancelHash).toHaveBeenCalledTimes(1);
+  expect(remove).toHaveBeenCalledTimes(1);
+});

package/src/ui/utils/nativeAssetFiles.macos.ts

@@ -0,0 +1,6 @@
+import type { OxyServices } from '@oxy.so/core';
+
+/** Web/Node use their existing Blob transport. Metro selects the native adapter. */
+export function installNativeAssetFiles(_oxy: OxyServices): undefined {
+  return undefined;
+}