@limrun/ui 0.9.0-rc.4 → 0.9.0-rc.5

package/src/components/device-install/device-install-dialog.tsx

@@ -1,513 +0,0 @@
-import { useEffect, useId, useState, type ChangeEvent, type ReactNode } from 'react';
-import { clsx } from 'clsx';
-import { useDeviceInstall, type UseDeviceInstallOptions } from '../../hooks/use-device-install';
-import type { DeviceInstallStep, DeviceInstallStepStatus } from '../../core/device-install';
-import './device-install-dialog.css';
-
-export type DeviceInstallDialogProps = UseDeviceInstallOptions & {
-  disabled?: boolean;
-};
-
-const steps: Array<{ id: DeviceInstallStep; title: string; description: string }> = [
-  {
-    id: 'signing',
-    title: 'Prepare signing',
-    description: 'Choose Apple ID login or upload certificates, then confirm the target developer device.',
-  },
-  {
-    id: 'connect',
-    title: 'Connect and pair',
-    description: 'Connect the iPhone with WebUSB, then pair this browser so installs can use the device.',
-  },
-  {
-    id: 'build',
-    title: 'Check and build',
-    description: 'Verify the device and provisioning profile are ready, then start the signed build.',
-  },
-  {
-    id: 'install',
-    title: 'Start installation',
-    description: 'Relay the last successful device build to the paired iPhone.',
-  },
-];
-
-type SigningSection = 'apple-id' | 'upload';
-
-export function DeviceInstallDialog({
-  disabled,
-  ...hookOptions
-}: DeviceInstallDialogProps) {
-  const [open, setOpen] = useState(false);
-  const [openStep, setOpenStep] = useState<DeviceInstallStep>('signing');
-  const [signingSection, setSigningSection] = useState<SigningSection>();
-  const [appleAccountName, setAppleAccountName] = useState('');
-  const [applePassword, setApplePassword] = useState('');
-  const [appleTwoFactorCode, setAppleTwoFactorCode] = useState('');
-  const dialogTitleId = useId();
-  const deviceInstall = useDeviceInstall(hookOptions);
-
-  useEffect(() => {
-    setOpenStep(deviceInstall.currentStep);
-  }, [deviceInstall.currentStep]);
-
-  const updateSigningFiles = (field: 'certificateFile' | 'provisioningProfileFile', event: ChangeEvent<HTMLInputElement>) => {
-    deviceInstall.setSigningFiles({
-      [field]: event.currentTarget.files?.[0],
-    });
-  };
-
-  return (
-    <div className="lr-device-install">
-      <button
-        type="button"
-        className="lr-device-install__trigger"
-        disabled={disabled || !hookOptions.apiUrl}
-        onClick={() => setOpen(true)}
-      >
-        Install to iPhone
-      </button>
-
-      {open && (
-        <div className="lr-device-install__backdrop" role="presentation">
-          <section
-            aria-labelledby={dialogTitleId}
-            aria-modal="true"
-            className="lr-device-install__dialog"
-            role="dialog"
-          >
-            <header className="lr-device-install__header">
-              <div>
-                <h2 id={dialogTitleId}>Install to a real iPhone</h2>
-                <p>Prepare signing, connect and pair the device, build, then install from this browser.</p>
-              </div>
-              <button type="button" className="lr-device-install__icon-button" onClick={() => setOpen(false)}>
-                Close
-              </button>
-            </header>
-
-            {deviceInstall.error && <div className="lr-device-install__error">{deviceInstall.error}</div>}
-
-            <div className="lr-device-install__steps">
-              {steps.map((step, index) => (
-                <StepCard
-                  key={step.id}
-                  index={index + 1}
-                  step={step}
-                  active={deviceInstall.currentStep === step.id}
-                  open={openStep === step.id}
-                  status={deviceInstall.stepStatuses[step.id]}
-                  onToggle={() => setOpenStep(step.id)}
-                >
-                  {step.id === 'signing' && (
-                    <div className="lr-device-install__step-body">
-                      <div className="lr-device-install__choice-grid">
-                        <button
-                          type="button"
-                          className={clsx(
-                            'lr-device-install__choice',
-                            signingSection === 'apple-id' && 'lr-device-install__choice--active',
-                          )}
-                          onClick={() => setSigningSection('apple-id')}
-                        >
-                          <strong>Apple ID login</strong>
-                          <span>Sign in, choose team, bundle ID, devices, then generate signing assets.</span>
-                        </button>
-                        <button
-                          type="button"
-                          className={clsx(
-                            'lr-device-install__choice',
-                            signingSection === 'upload' && 'lr-device-install__choice--active',
-                          )}
-                          onClick={() => setSigningSection('upload')}
-                        >
-                          <strong>Upload certificates</strong>
-                          <span>Use an existing .p12 certificate and provisioning profile.</span>
-                        </button>
-                      </div>
-
-                      {signingSection === 'apple-id' && (
-                        <div className="lr-device-install__section-panel">
-                          <div className="lr-device-install__grid">
-                            <label className="lr-device-install__field">
-                              <span>Apple ID</span>
-                              <input
-                                type="email"
-                                autoComplete="username"
-                                placeholder="name@example.com"
-                                value={appleAccountName}
-                                onChange={(event) => setAppleAccountName(event.currentTarget.value)}
-                              />
-                            </label>
-                            <label className="lr-device-install__field">
-                              <span>Apple ID password</span>
-                              <input
-                                type="password"
-                                autoComplete="current-password"
-                                placeholder="Password stays in this browser"
-                                value={applePassword}
-                                onChange={(event) => setApplePassword(event.currentTarget.value)}
-                              />
-                            </label>
-                            {!deviceInstall.hasReusableAppleCertificate && (
-                              <label className="lr-device-install__field">
-                                <span>Generated .p12 password</span>
-                                <input
-                                  type="password"
-                                  placeholder="Used when exporting Apple certificate"
-                                  onChange={(event) =>
-                                    deviceInstall.setSigningFiles({ certificatePassword: event.currentTarget.value })
-                                  }
-                                />
-                              </label>
-                            )}
-                          </div>
-                          <div className="lr-device-install__actions">
-                            <button
-                              type="button"
-                              className="lr-device-install__secondary"
-                              disabled={
-                                disabled ||
-                                !hookOptions.apiUrl ||
-                                !appleAccountName ||
-                                !applePassword ||
-                                deviceInstall.busyAction === 'signing'
-                              }
-                              onClick={() =>
-                                void deviceInstall.startAppleIDLogin({
-                                  accountName: appleAccountName,
-                                  password: applePassword,
-                                })
-                              }
-                            >
-                              {deviceInstall.appleSigningStatus === 'authenticating'
-                                ? 'Signing in...'
-                                : 'Sign in with Apple ID'}
-                            </button>
-                            <span className="lr-device-install__hint">
-                              Apple password is used only by browser-side SRP. Status: {deviceInstall.appleSigningStatus}
-                            </span>
-                          </div>
-                          {deviceInstall.appleSigningStatus === 'two-factor-required' && (
-                            <div className="lr-device-install__grid">
-                              <label className="lr-device-install__field">
-                                <span>Two-factor code</span>
-                                <input
-                                  type="text"
-                                  inputMode="numeric"
-                                  autoComplete="one-time-code"
-                                  value={appleTwoFactorCode}
-                                  onChange={(event) => setAppleTwoFactorCode(event.currentTarget.value)}
-                                />
-                              </label>
-                              <button
-                                type="button"
-                                className="lr-device-install__secondary"
-                                disabled={!appleTwoFactorCode || deviceInstall.busyAction === 'signing'}
-                                onClick={() => void deviceInstall.submitAppleTwoFactorCode(appleTwoFactorCode)}
-                              >
-                                Submit Apple ID code
-                              </button>
-                            </div>
-                          )}
-                          {deviceInstall.appleTeams.length > 0 && (
-                            <label className="lr-device-install__field">
-                              <span>Apple Developer team</span>
-                              <select
-                                value={deviceInstall.selectedAppleTeamID ?? ''}
-                                onChange={(event) =>
-                                  deviceInstall.setSelectedAppleTeamID(event.currentTarget.value || undefined)
-                                }
-                              >
-                                {deviceInstall.appleTeams.map((team, index) => {
-                                  const teamID =
-                                    team.teamId ??
-                                    (team.providerId === undefined ? undefined : String(team.providerId)) ??
-                                    team.publicProviderId ??
-                                    '';
-                                  return (
-                                    <option key={`${teamID}-${index}`} value={teamID}>
-                                      {team.name ?? 'Apple Developer Team'} {teamID ? `(${teamID})` : ''}
-                                    </option>
-                                  );
-                                })}
-                              </select>
-                            </label>
-                          )}
-                          {deviceInstall.appleDevices.length > 0 && (
-                            <label className="lr-device-install__field">
-                              <span>Apple Developer devices</span>
-                              <select
-                                multiple
-                                value={deviceInstall.selectedAppleDeviceIDs}
-                                onChange={(event) =>
-                                  deviceInstall.setSelectedAppleDeviceIDs(
-                                    Array.from(event.currentTarget.selectedOptions).map((option) => option.value),
-                                  )
-                                }
-                              >
-                                {deviceInstall.appleDevices.map((appleDevice) => (
-                                  <option
-                                    key={appleDevice.deviceId ?? appleDevice.deviceNumber}
-                                    value={appleDevice.deviceId ?? ''}
-                                  >
-                                    {appleDevice.name ?? appleDevice.model ?? 'Apple device'} {appleDevice.deviceNumber ?? ''}
-                                  </option>
-                                ))}
-                              </select>
-                            </label>
-                          )}
-                          {deviceInstall.applePortalSummary && (
-                            <p className="lr-device-install__hint">
-                              Found {deviceInstall.applePortalSummary.certificateCount} certificates and{' '}
-                              {deviceInstall.applePortalSummary.profileCount} provisioning profiles.
-                            </p>
-                          )}
-                          {deviceInstall.hasReusableAppleCertificate && (
-                            <p className="lr-device-install__hint">
-                              Reusing the certificate and private key stored in this browser.
-                            </p>
-                          )}
-                          <button
-                            type="button"
-                            className="lr-device-install__primary"
-                            disabled={disabled || !deviceInstall.canPrepareAppleSigningAssets}
-                            onClick={() => void deviceInstall.prepareAppleSigningAssets()}
-                          >
-                            {deviceInstall.appleSigningStatus === 'preparing-assets'
-                              ? 'Preparing signing assets...'
-                              : 'Generate certificate and profile'}
-                          </button>
-                        </div>
-                      )}
-
-                      {signingSection === 'upload' && (
-                        <div className="lr-device-install__section-panel">
-                          <div className="lr-device-install__grid">
-                            <label className="lr-device-install__field">
-                              <span>Certificate (.p12)</span>
-                              <input
-                                type="file"
-                                accept=".p12,application/x-pkcs12"
-                                onChange={(event) => updateSigningFiles('certificateFile', event)}
-                              />
-                            </label>
-                            <label className="lr-device-install__field">
-                              <span>Provisioning profile</span>
-                              <input
-                                type="file"
-                                accept=".mobileprovision"
-                                onChange={(event) => updateSigningFiles('provisioningProfileFile', event)}
-                              />
-                            </label>
-                            <label className="lr-device-install__field">
-                              <span>Uploaded .p12 password</span>
-                              <input
-                                type="password"
-                                placeholder="Export password"
-                                onChange={(event) =>
-                                  deviceInstall.setSigningFiles({ certificatePassword: event.currentTarget.value })
-                                }
-                              />
-                            </label>
-                          </div>
-                          <p className="lr-device-install__hint">
-                            The provisioning profile will be checked against the connected iPhone before the build starts.
-                          </p>
-                        </div>
-                      )}
-
-                      {deviceInstall.hasSigningAssets && (
-                        <p>Signing assets are stored in this browser for the selected bundle and device.</p>
-                      )}
-                    </div>
-                  )}
-
-                  {step.id === 'connect' && (
-                    <div className="lr-device-install__step-body">
-                      <p>
-                        WebUSB works in Chromium browsers on secure origins. Connect the iPhone over USB, approve the
-                        browser permission prompt, then pair this browser.
-                      </p>
-                      <div className="lr-device-install__actions">
-                        <button
-                          type="button"
-                          className="lr-device-install__primary"
-                          disabled={disabled || !deviceInstall.canRequestUSBAccess}
-                          onClick={() => void deviceInstall.requestUSBAccess()}
-                        >
-                          {deviceInstall.busyAction === 'usb' ? 'Selecting iPhone...' : 'Allow USB access'}
-                        </button>
-                        <button
-                          type="button"
-                          className="lr-device-install__secondary"
-                          disabled={disabled || !deviceInstall.canPairBrowser}
-                          onClick={() => void deviceInstall.pairBrowser()}
-                        >
-                          {deviceInstall.busyAction === 'pair'
-                            ? 'Pairing...'
-                            : deviceInstall.pairConfirmationRequired
-                              ? 'Confirm pair record'
-                              : 'Pair browser'}
-                        </button>
-                      </div>
-                      {deviceInstall.device && (
-                        <div className="lr-device-install__device">
-                          {`${deviceInstall.device.productName ?? 'iPhone'} ${
-                            deviceInstall.device.serialNumber ?? ''
-                          }`.trim()}
-                        </div>
-                      )}
-                      {deviceInstall.pairConfirmationRequired && (
-                        <p>
-                          Unlock the iPhone and tap <strong>Trust</strong> in the system dialog, then confirm the pair
-                          record.
-                        </p>
-                      )}
-                      <p>
-                        {deviceInstall.hasPairRecord
-                          ? 'Pair record is stored locally. Continue to the build check.'
-                          : 'Pair this browser once before building and installing.'}
-                      </p>
-                    </div>
-                  )}
-
-                  {step.id === 'build' && (
-                    <div className="lr-device-install__step-body">
-                      <div className="lr-device-install__checklist">
-                        <StatusLine label="Signing assets" ready={deviceInstall.hasSigningInputs} pendingText="Ready to verify" />
-                        <StatusLine label="USB device" ready={!!deviceInstall.device} />
-                        <StatusLine label="Pair record" ready={deviceInstall.hasPairRecord} />
-                        <StatusLine
-                          label="Profile includes connected device"
-                          ready={deviceInstall.connectedDeviceInProfile}
-                          pendingText="Checked when the build starts"
-                        />
-                      </div>
-                      {deviceInstall.device &&
-                        deviceInstall.appleTeams.length > 0 &&
-                        !deviceInstall.connectedAppleDeviceRegistered && (
-                        <button
-                          type="button"
-                          className="lr-device-install__secondary"
-                          disabled={disabled || !!deviceInstall.busyAction}
-                          onClick={() => void deviceInstall.registerConnectedAppleDevice()}
-                        >
-                          Register connected iPhone
-                        </button>
-                      )}
-                      <button
-                        type="button"
-                        className="lr-device-install__primary"
-                        disabled={disabled || !deviceInstall.canBuild}
-                        onClick={() => void deviceInstall.startDeviceBuild()}
-                      >
-                        {deviceInstall.busyAction === 'build' ? 'Starting build...' : 'Start device build'}
-                      </button>
-                      <details
-                        className="lr-device-install__build-logs"
-                        open={deviceInstall.buildLogPanelOpen}
-                        onToggle={(event) => deviceInstall.setBuildLogPanelOpen(event.currentTarget.open)}
-                      >
-                        <summary>Build logs ({deviceInstall.buildStatus})</summary>
-                        <pre>
-                          {deviceInstall.buildLogs.length > 0
-                            ? deviceInstall.buildLogs
-                                .filter((line) => line.type !== 'meta')
-                                .map((line) => line.data)
-                                .join('\n')
-                            : 'Build logs will appear here while the device build is running.'}
-                        </pre>
-                      </details>
-                    </div>
-                  )}
-
-                  {step.id === 'install' && (
-                    <div className="lr-device-install__step-body">
-                      <button
-                        type="button"
-                        className="lr-device-install__primary"
-                        disabled={disabled || !deviceInstall.canInstall}
-                        onClick={() => void deviceInstall.startInstallation()}
-                      >
-                        {deviceInstall.busyAction === 'install' ? 'Installing...' : 'Install last build'}
-                      </button>
-                      <button type="button" className="lr-device-install__secondary" onClick={deviceInstall.stopRelay}>
-                        Stop relay
-                      </button>
-                    </div>
-                  )}
-                </StepCard>
-              ))}
-            </div>
-
-            <footer className="lr-device-install__logs">
-              <h3>Progress</h3>
-              <ol>
-                {deviceInstall.logs.map((entry, index) => (
-                  <li key={`${index}-${entry.slice(0, 24)}`}>{entry}</li>
-                ))}
-              </ol>
-            </footer>
-          </section>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function StepCard({
-  index,
-  step,
-  active,
-  open,
-  status,
-  onToggle,
-  children,
-}: {
-  index: number;
-  step: { id: DeviceInstallStep; title: string; description: string };
-  active: boolean;
-  open: boolean;
-  status: DeviceInstallStepStatus;
-  onToggle: () => void;
-  children: ReactNode;
-}) {
-  return (
-    <article className={clsx('lr-device-install__step', active && 'lr-device-install__step--active')}>
-      <button
-        type="button"
-        className="lr-device-install__step-header"
-        aria-expanded={open}
-        onClick={onToggle}
-      >
-        <div className="lr-device-install__step-number">{index}</div>
-        <div>
-          <h3>{step.title}</h3>
-          <p>{step.description}</p>
-        </div>
-        <span className={clsx('lr-device-install__status', `lr-device-install__status--${status}`)}>
-          {status === 'complete' ? '✓ Completed' : status}
-        </span>
-      </button>
-      {open && children}
-    </article>
-  );
-}
-
-function StatusLine({
-  label,
-  ready,
-  pendingText = 'Not ready',
-}: {
-  label: string;
-  ready?: boolean;
-  pendingText?: string;
-}) {
-  const text = ready === undefined ? pendingText : ready ? 'Ready' : 'Needs attention';
-  return (
-    <div className="lr-device-install__check-row">
-      <span>{label}</span>
-      <strong>{text}</strong>
-    </div>
-  );
-}

package/src/components/device-install/index.ts

@@ -1,2 +0,0 @@
-export { DeviceInstallDialog, DeviceInstallDialog as DeviceInstallRelay } from './device-install-dialog';
-export type { DeviceInstallDialogProps } from './device-install-dialog';

package/src/core/device-install/apple/client.ts

@@ -1,152 +0,0 @@
-import { AppleGsaSrpClient } from './gsa-srp';
-import {
-  createAppleRelaySession,
-  deleteAppleRelaySession,
-  fetchAppleAccountSession,
-  proxyPhoneTwoFactorCode,
-  proxySrpComplete,
-  proxySrpInit,
-  proxyTwoFactorCode,
-  triggerPhoneTwoFactor,
-  triggerTrustedDeviceTwoFactor,
-  type AppleRelayResponse,
-} from './relay';
-
-export type AppleIDLoginInput = {
-  limbuildApiUrl: string;
-  accountName: string;
-  password: string;
-  token?: string;
-};
-
-export type AppleIDLoginResult = {
-  appleSessionId: string;
-  completeResponse: AppleRelayResponse;
-  twoFactorChallengeResponse?: AppleRelayResponse;
-  requiresTwoFactor: boolean;
-  finishTwoFactor: (code: string) => Promise<AppleRelayResponse>;
-  finalize: () => Promise<AppleRelayResponse>;
-  close: () => Promise<void>;
-};
-
-type TwoFactorMethod =
-  | { type: 'trustedDevice' }
-  | { type: 'phone'; phoneNumberId: number; mode: string };
-
-export async function startBrowserOwnedAppleIDLogin({
-  limbuildApiUrl,
-  accountName,
-  password,
-  token,
-}: AppleIDLoginInput): Promise<AppleIDLoginResult> {
-  const { appleSessionId } = await createAppleRelaySession(limbuildApiUrl, token);
-  try {
-    const srp = new AppleGsaSrpClient(accountName);
-    const initResponse = await proxySrpInit(limbuildApiUrl, appleSessionId, await srp.init(), token);
-    if (initResponse.status < 200 || initResponse.status >= 300) {
-      throw new Error(`Apple SRP init failed: HTTP ${initResponse.status} ${initResponse.rawBody ?? ''}`.trim());
-    }
-    if (!initResponse.body) {
-      throw new Error('Apple SRP init response did not include a body.');
-    }
-    const proof = await srp.complete(password, initResponse.body);
-    const completeResponse = await proxySrpComplete(
-      limbuildApiUrl,
-      appleSessionId,
-      {
-        ...proof,
-        rememberMe: false,
-        trustTokens: [],
-      },
-      token,
-    );
-    const requiresTwoFactor = completeResponse.status === 409;
-    let twoFactorChallengeResponse: AppleRelayResponse | undefined;
-    let twoFactorMethod: TwoFactorMethod = { type: 'trustedDevice' };
-    if (requiresTwoFactor) {
-      twoFactorChallengeResponse = await triggerTrustedDeviceTwoFactor(limbuildApiUrl, appleSessionId, token);
-      const phone = trustedPhoneNumberFromChallenge(twoFactorChallengeResponse.body);
-      if (phone) {
-        twoFactorMethod = {
-          type: 'phone',
-          phoneNumberId: phone.id,
-          mode: phone.pushMode ?? 'sms',
-        };
-      }
-      if (twoFactorChallengeResponse.status === 412) {
-        if (!phone) {
-          throw new Error('Apple requested phone verification but did not include a trusted phone number.');
-        }
-        twoFactorChallengeResponse = await triggerPhoneTwoFactor(
-          limbuildApiUrl,
-          appleSessionId,
-          phone.id,
-          phone.pushMode ?? 'sms',
-          token,
-        );
-      }
-      if (twoFactorChallengeResponse.status < 200 || twoFactorChallengeResponse.status >= 300) {
-        throw new Error(
-          `Apple two-factor challenge failed: HTTP ${twoFactorChallengeResponse.status} ${
-            twoFactorChallengeResponse.rawBody ?? ''
-          }`.trim(),
-        );
-      }
-    } else if (completeResponse.status < 200 || completeResponse.status >= 300) {
-      throw new Error(`Apple SRP complete failed: HTTP ${completeResponse.status} ${completeResponse.rawBody ?? ''}`.trim());
-    }
-    return {
-      appleSessionId,
-      completeResponse,
-      twoFactorChallengeResponse,
-      requiresTwoFactor,
-      finishTwoFactor: async (code) => {
-        const response =
-          twoFactorMethod.type === 'phone'
-            ? await proxyPhoneTwoFactorCode(
-                limbuildApiUrl,
-                appleSessionId,
-                twoFactorMethod.phoneNumberId,
-                code,
-                twoFactorMethod.mode,
-                token,
-              )
-            : await proxyTwoFactorCode(limbuildApiUrl, appleSessionId, code, token);
-        if (response.status < 200 || response.status >= 300) {
-          throw new Error(`Apple two-factor code failed: HTTP ${response.status} ${response.rawBody ?? ''}`.trim());
-        }
-        return response;
-      },
-      finalize: async () => fetchAppleAccountSession(limbuildApiUrl, appleSessionId, token),
-      close: () => deleteAppleRelaySession(limbuildApiUrl, appleSessionId, token),
-    };
-  } catch (error) {
-    await deleteAppleRelaySession(limbuildApiUrl, appleSessionId, token).catch(() => undefined);
-    throw error;
-  }
-}
-
-function trustedPhoneNumberFromChallenge(body: unknown) {
-  if (!isRecord(body)) return undefined;
-  const verification = isRecord(body.phoneNumberVerification) ? body.phoneNumberVerification : undefined;
-  const trustedPhoneNumber =
-    recordValue(verification?.trustedPhoneNumber) ??
-    recordValue(body.trustedPhoneNumber) ??
-    recordValue(body.phoneNumber);
-  if (!trustedPhoneNumber) return undefined;
-  const id = trustedPhoneNumber.id;
-  if (typeof id !== 'number') return undefined;
-  const pushMode =
-    typeof trustedPhoneNumber.pushMode === 'string' ? trustedPhoneNumber.pushMode
-    : typeof body.mode === 'string' ? body.mode
-    : undefined;
-  return { id, pushMode };
-}
-
-function recordValue(value: unknown) {
-  return isRecord(value) ? value : undefined;
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null && !Array.isArray(value);
-}