Phone Link Sign-in Redesign

Lead: The iPhone is done, on helper .7, with live view starting with no tap. The sign-in screen needs one pick from you. I recommend Option A.

A

What is wrong today and what Apple does

Today	Apple's way	The change
The fields stay while it loads	The screen changes to one spinner	Fields leave on submit
Apple ID and password on one screen	One question per screen	Apple ID, then password
Small uppercase code-font labels	Plain large title and short sentence	Large title, one sentence
Step tabs, orb and side text compete	One task and one button	Dots and one button
Errors show in a separate stopped card	Red text under the field	Same screen, Apple ID kept
Success leaves the form on screen	A check, then the next screen	Check, then Done

B

Option A: Setup Assistant

One centered task, as on a new iPhone. Progress dots replace the step tabs and the A:// animation.

React · Option A

C

Option B: Same flow with an A:// banner

The same steps under a short A:// banner. It keeps more brand and leaves less room on a phone.

React · Option B

D

Decisions

Which sign-in design do I build?Option A: Setup Assistant suggestedOption B: A:// banner

How much of the onboarding do I redo now?Every Phone Link screen, including the Android steps and the first-run panel suggestedAlso the whole first-run setup, as a second PROnly the Apple sign-in screens

E

Keychain prompts

Who	Fix	State
Your Mac	Local builds sign with your Apple Development cert	In PR. One last prompt on the next build, then Always Allow lasts
Your customers	Developer ID ($99 a year)	Waits on your Apple Developer enrollment and cert. Steps are in BUILD.md
A self-signed cert does not fix this. macOS ties Always Allow to a team ID, and a self-signed cert has none.

---
title: Phone Link Sign-in Redesign
---
Lead: The iPhone is done, on helper `.7`, with live view starting with no tap. The sign-in screen needs one pick from you. I recommend Option A.

## A What is wrong today and what Apple does
| Today | Apple's way | The change |
| --- | --- | --- |
| The fields stay while it loads | The screen changes to one spinner | Fields leave on submit |
| Apple ID and password on one screen | One question per screen | Apple ID, then password |
| Small uppercase code-font labels | Plain large title and short sentence | Large title, one sentence |
| Step tabs, orb and side text compete | One task and one button | Dots and one button |
| Errors show in a separate stopped card | Red text under the field | Same screen, Apple ID kept |
| Success leaves the form on screen | A check, then the next screen | Check, then Done |

## B Option A: Setup Assistant
One centered task, as on a new iPhone. Progress dots replace the step tabs and the A:// animation.

```react css=src/components/onboarding/setup/setup.css title="Option A" h=680

import { useState, useEffect } from 'react';
const STEPS = ['Apple ID', 'Password', 'Signing in', 'Wrong password', 'Code', 'Checking code', 'Installing', 'Done'];
const inputStyle = { width: '100%', height: 48, borderRadius: 12, border: '1px solid var(--as-line)', background: 'var(--as-bg)', color: 'var(--as-ink)', padding: '0 14px', fontSize: 16, boxSizing: 'border-box', outline: 'none' };
const primary = (off) => ({ width: '100%', height: 46, borderRadius: 12, border: 0, background: 'var(--as-ink)', color: 'var(--as-bg)', fontSize: 15, fontWeight: 600, opacity: off ? 0.35 : 1, cursor: off ? 'default' : 'pointer' });
function Spinner() {
  return <div style={{ width: 28, height: 28, borderRadius: '50%', border: '3px solid var(--as-line)', borderTopColor: 'var(--as-ink)', animation: 'mk-spin .8s linear infinite' }} />;
}
function Mock({ width }) {
  const [i, setI] = useState(0);
  const [id, setId] = useState('you@icloud.com');
  useEffect(() => {
    if (i === 2) { const t = setTimeout(() => setI(3), 1600); return () => clearTimeout(t); }
    if (i === 5) { const t = setTimeout(() => setI(6), 1400); return () => clearTimeout(t); }
    if (i === 6) { const t = setTimeout(() => setI(7), 1800); return () => clearTimeout(t); }
  }, [i]);
  const copy = [
    ['Sign in with your Apple ID', 'A free Apple ID signs the helper for your own iPhone.'],
    ['Enter your password', id],
    ['Signing in to Apple', ''],
    ['Enter your password', id],
    ['Enter the 6-digit code', 'Apple sent it to your other devices.'],
    ['Checking the code', ''],
    ['Installing on your iPhone', 'Keep it plugged in and unlocked.'],
    ['Your iPhone is linked', 'You can unplug the cable. Your bots can use it over Wi-Fi.'],
  ][i];
  const working = i === 2 || i === 5 || i === 6;
  return (
    <div className="as-setup" style={{ width, maxWidth: '100%', minHeight: 560, borderRadius: 18, border: '1px solid var(--as-line)', background: 'var(--as-bg)', color: 'var(--as-ink)', display: 'flex', flexDirection: 'column', overflow: 'hidden', fontFamily: '-apple-system, system-ui, sans-serif' }}>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 6, paddingTop: 22 }}>{[0,1,2,3].map((d) => <span key={d} style={{ width: 7, height: 7, borderRadius: '50%', background: d <= (i < 5 ? 1 : i < 7 ? 2 : 3) ? 'var(--as-ink)' : 'var(--as-line)' }} />)}</div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', padding: '28px 28px 8px' }}>
        <h3 style={{ margin: 0, fontSize: 26, lineHeight: 1.15, fontWeight: 650, letterSpacing: '-0.02em' }}>{copy[0]}</h3>
        {copy[1] && <p style={{ margin: '10px 0 0', fontSize: 14, lineHeight: 1.45, color: 'var(--as-sub)' }}>{copy[1]}</p>}
        <div style={{ width: '100%', maxWidth: 340, marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
          {i === 0 && <input aria-label="Apple ID" style={inputStyle} value={id} onChange={(e) => setId(e.target.value)} />}
          {(i === 1 || i === 3) && <input aria-label="Password" type="password" autoFocus placeholder="Password" style={{ ...inputStyle, borderColor: i === 3 ? 'var(--as-err-fg, #c0392b)' : 'var(--as-line)' }} />}
          {i === 3 && <p role="alert" style={{ margin: 0, fontSize: 13, color: 'var(--as-err-fg, #c0392b)' }}>That password didn’t work. Try again.</p>}
          {i === 4 && <input aria-label="Code" inputMode="numeric" defaultValue="" placeholder="000000" style={{ ...inputStyle, textAlign: 'center', fontSize: 24, letterSpacing: '0.3em' }} />}
          {working && <div role="status" style={{ display: 'flex', justifyContent: 'center', paddingTop: 34 }}><Spinner /></div>}
          {i === 7 && <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 24 }}><div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--as-ink)', color: 'var(--as-bg)', display: 'grid', placeItems: 'center', fontSize: 28 }}>✓</div></div>}
        </div>
      </div>
      <div style={{ padding: '12px 28px 22px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
        <div style={{ width: '100%', maxWidth: 340, minHeight: 46 }}>
          {!working && <button style={primary(false)} onClick={() => setI(i === 7 ? 0 : i === 3 ? 4 : i + 1)}>{i === 7 ? 'Done' : i === 1 || i === 3 ? 'Sign in' : 'Continue'}</button>}
        </div>
        <p style={{ margin: 0, fontSize: 12, color: 'var(--as-mut)' }}>{i < 2 || i === 3 ? 'Your password goes to Apple only.' : '\u00a0'}</p>
      </div>
    </div>
  );
}
export default function App() {
  const [w, setW] = useState(520);
  return (
    <div style={{ padding: 12, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
      <style>{'@keyframes mk-spin{to{transform:rotate(360deg)}}'}</style>
      <div style={{ display: 'flex', gap: 6, fontSize: 12 }}>
        <button onClick={() => setW(520)} style={{ padding: '4px 10px', borderRadius: 8, border: '1px solid #ccc', fontWeight: w === 520 ? 700 : 400 }}>Desktop</button>
        <button onClick={() => setW(375)} style={{ padding: '4px 10px', borderRadius: 8, border: '1px solid #ccc', fontWeight: w === 375 ? 700 : 400 }}>Phone</button>
      </div>
      <Mock key={w} width={w} />
      <p style={{ margin: 0, fontSize: 12, color: '#777' }}>Click the button to walk the flow. {STEPS.length} screens, one task each.</p>
    </div>
  );
}

```

## C Option B: Same flow with an A:// banner
The same steps under a short A:// banner. It keeps more brand and leaves less room on a phone.

```react css=src/components/onboarding/setup/setup.css title="Option B" h=680

import { useState, useEffect } from 'react';
const STEPS = ['Apple ID', 'Password', 'Signing in', 'Wrong password', 'Code', 'Checking code', 'Installing', 'Done'];
const inputStyle = { width: '100%', height: 48, borderRadius: 12, border: '1px solid var(--as-line)', background: 'var(--as-bg)', color: 'var(--as-ink)', padding: '0 14px', fontSize: 16, boxSizing: 'border-box', outline: 'none' };
const primary = (off) => ({ width: '100%', height: 46, borderRadius: 12, border: 0, background: 'var(--as-ink)', color: 'var(--as-bg)', fontSize: 15, fontWeight: 600, opacity: off ? 0.35 : 1, cursor: off ? 'default' : 'pointer' });
function Spinner() {
  return <div style={{ width: 28, height: 28, borderRadius: '50%', border: '3px solid var(--as-line)', borderTopColor: 'var(--as-ink)', animation: 'mk-spin .8s linear infinite' }} />;
}
function Mock({ width }) {
  const [i, setI] = useState(0);
  const [id, setId] = useState('you@icloud.com');
  useEffect(() => {
    if (i === 2) { const t = setTimeout(() => setI(3), 1600); return () => clearTimeout(t); }
    if (i === 5) { const t = setTimeout(() => setI(6), 1400); return () => clearTimeout(t); }
    if (i === 6) { const t = setTimeout(() => setI(7), 1800); return () => clearTimeout(t); }
  }, [i]);
  const copy = [
    ['Sign in with your Apple ID', 'A free Apple ID signs the helper for your own iPhone.'],
    ['Enter your password', id],
    ['Signing in to Apple', ''],
    ['Enter your password', id],
    ['Enter the 6-digit code', 'Apple sent it to your other devices.'],
    ['Checking the code', ''],
    ['Installing on your iPhone', 'Keep it plugged in and unlocked.'],
    ['Your iPhone is linked', 'You can unplug the cable. Your bots can use it over Wi-Fi.'],
  ][i];
  const working = i === 2 || i === 5 || i === 6;
  return (
    <div className="as-setup" style={{ width, maxWidth: '100%', minHeight: 560, borderRadius: 18, border: '1px solid var(--as-line)', background: 'var(--as-bg)', color: 'var(--as-ink)', display: 'flex', flexDirection: 'column', overflow: 'hidden', fontFamily: '-apple-system, system-ui, sans-serif' }}>
      <div style={{ height: 120, background: '#141413', display: 'grid', placeItems: 'center', color: '#f0eee6', fontFamily: 'monospace', fontSize: 15 }}><span>A://<span style={{ color: '#c8553d' }}> ▪</span></span></div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', padding: '28px 28px 8px' }}>
        <h3 style={{ margin: 0, fontSize: 26, lineHeight: 1.15, fontWeight: 650, letterSpacing: '-0.02em' }}>{copy[0]}</h3>
        {copy[1] && <p style={{ margin: '10px 0 0', fontSize: 14, lineHeight: 1.45, color: 'var(--as-sub)' }}>{copy[1]}</p>}
        <div style={{ width: '100%', maxWidth: 340, marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
          {i === 0 && <input aria-label="Apple ID" style={inputStyle} value={id} onChange={(e) => setId(e.target.value)} />}
          {(i === 1 || i === 3) && <input aria-label="Password" type="password" autoFocus placeholder="Password" style={{ ...inputStyle, borderColor: i === 3 ? 'var(--as-err-fg, #c0392b)' : 'var(--as-line)' }} />}
          {i === 3 && <p role="alert" style={{ margin: 0, fontSize: 13, color: 'var(--as-err-fg, #c0392b)' }}>That password didn’t work. Try again.</p>}
          {i === 4 && <input aria-label="Code" inputMode="numeric" defaultValue="" placeholder="000000" style={{ ...inputStyle, textAlign: 'center', fontSize: 24, letterSpacing: '0.3em' }} />}
          {working && <div role="status" style={{ display: 'flex', justifyContent: 'center', paddingTop: 34 }}><Spinner /></div>}
          {i === 7 && <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 24 }}><div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--as-ink)', color: 'var(--as-bg)', display: 'grid', placeItems: 'center', fontSize: 28 }}>✓</div></div>}
        </div>
      </div>
      <div style={{ padding: '12px 28px 22px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
        <div style={{ width: '100%', maxWidth: 340, minHeight: 46 }}>
          {!working && <button style={primary(false)} onClick={() => setI(i === 7 ? 0 : i === 3 ? 4 : i + 1)}>{i === 7 ? 'Done' : i === 1 || i === 3 ? 'Sign in' : 'Continue'}</button>}
        </div>
        <p style={{ margin: 0, fontSize: 12, color: 'var(--as-mut)' }}>{i < 2 || i === 3 ? 'Your password goes to Apple only.' : '\u00a0'}</p>
      </div>
    </div>
  );
}
export default function App() {
  const [w, setW] = useState(520);
  return (
    <div style={{ padding: 12, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
      <style>{'@keyframes mk-spin{to{transform:rotate(360deg)}}'}</style>
      <div style={{ display: 'flex', gap: 6, fontSize: 12 }}>
        <button onClick={() => setW(520)} style={{ padding: '4px 10px', borderRadius: 8, border: '1px solid #ccc', fontWeight: w === 520 ? 700 : 400 }}>Desktop</button>
        <button onClick={() => setW(375)} style={{ padding: '4px 10px', borderRadius: 8, border: '1px solid #ccc', fontWeight: w === 375 ? 700 : 400 }}>Phone</button>
      </div>
      <Mock key={w} width={w} />
      <p style={{ margin: 0, fontSize: 12, color: '#777' }}>Click the button to walk the flow. {STEPS.length} screens, one task each.</p>
    </div>
  );
}

```

## D Decisions
```ask
Which sign-in design do I build?
* Option A: Setup Assistant
- Option B: A:// banner
```

```ask
How much of the onboarding do I redo now?
* Every Phone Link screen, including the Android steps and the first-run panel
- Also the whole first-run setup, as a second PR
- Only the Apple sign-in screens
```

## E Keychain prompts
| Who | Fix | State |
| --- | --- | --- |
| Your Mac | Local builds sign with your Apple Development cert | In PR. One last prompt on the next build, then Always Allow lasts |
| Your customers | Developer ID ($99 a year) | Waits on your Apple Developer enrollment and cert. Steps are in BUILD.md |
A self-signed cert does not fix this. macOS ties Always Allow to a team ID, and a self-signed cert has none.