@lowdefy/shell 3.23.2 → 7.2.0

package/src/dev/DevShell.js

@@ -0,0 +1,239 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Linking, LogBox, View } from 'react-native';
+import * as SplashScreen from 'expo-splash-screen';
+import { Accelerometer } from 'expo-sensors';
+import { installDevice } from '@lowdefy/blocks-native/device';
+import { installDictationSource } from '@lowdefy/blocks-native/dictation';
+
+import AppProvider from '../components/AppProvider.js';
+import ConfirmSheet from './connect/ConfirmSheet.js';
+import ConnectScreen from './connect/ConnectScreen.js';
+import createDevShellConfig from './connection/createDevShellConfig.js';
+import createDeviceInjections from './inject/createDeviceInjections.js';
+import createDeviceStore from '../host/createDeviceStore.js';
+import createLogBuffer from './menu/createLogBuffer.js';
+import createOfflineFetch from './inject/createOfflineFetch.js';
+import createServerList, { SERVERS_KEY } from './connection/createServerList.js';
+import DevMenu from './menu/DevMenu.js';
+import DevTabClient from './tab/DevTabClient.js';
+import Frame from '../components/Frame.js';
+import getShellConfig from '../config/getShellConfig.js';
+import device from '../device/device.js';
+import injected, { installInjector } from '../device/injected.js';
+import withInjectedDevice from './inject/withInjectedDevice.js';
+import isLoopbackHost from './connection/isLoopbackHost.js';
+import networkStatus from '../host/networkStatus.js';
+import parseDevLink from './connection/parseDevLink.js';
+import reloadApp from './tab/reloadApp.js';
+import watchShake from './menu/watchShake.js';
+
+// Lowdefy Dev reports errors in its own log (the dev menu) and to the dev server's build status.
+// React Native's LogBox toasts would cover the tab bar and every screenshot an agent takes.
+LogBox.ignoreAllLogs();
+
+/**
+ * Lowdefy Dev: the shell with developer features, in place of ShellRoot. It opens one app, the
+ * dev server it is connected to:
+ * - It connects to the last server it used, to a server a `lowdefy-dev://connect` link names, or
+ *   to one picked on the connect screen (a scanned code, a typed address, a recent server). It asks
+ *   "Connect to <host>?" first for any server not on this device: a simulator's or USB phone's
+ *   localhost connects at once, which is how `lowdefy dev --ios` and `--android` open it.
+ * - Shaking the phone (or a `lowdefy-dev://menu` link) opens the dev menu.
+ * - The open app joins the dev server's tab channel (DevTabClient), which records what is done in
+ *   it and takes device injections: the next scan, photo or NFC read, what the next dictation
+ *   session hears, a location, a permission answer, or no network, which fails the app's every
+ *   fetch and shows the NoConnection banner (createDeviceInjections).
+ *
+ * @param {Object} props
+ * @param {Object} [props.accelerometer] expo-sensors' Accelerometer.
+ * @param {Object} [props.kv] The device store.
+ * @param {Object} [props.linking] React Native's Linking.
+ * @param {Object} [props.shell] The shell config.
+ */
+function DevShell({
+  accelerometer = Accelerometer,
+  kv: kvProp,
+  linking = Linking,
+  shell: shellProp,
+}) {
+  const shell = useMemo(() => shellProp ?? getShellConfig(), [shellProp]);
+  const kv = useMemo(() => kvProp ?? createDeviceStore(), [kvProp]);
+  const servers = useMemo(() => createServerList({ kv }), [kv]);
+  const logs = useMemo(() => createLogBuffer({ console: globalThis.console }), []);
+  const injections = useMemo(() => createDeviceInjections({ networkStatus }), []);
+  const rootRef = useRef(null);
+  const openApp = useRef(null);
+  const [server, setServer] = useState(() => servers.last());
+  const [offered, setOffered] = useState(null);
+  const [message, setMessage] = useState(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [openings, setOpenings] = useState(0);
+
+  const connect = useCallback(
+    (target) => {
+      servers.remember(target);
+      setOffered(null);
+      setMessage(null);
+      setServer({ url: target.url, host: target.host, pair: target.pair ?? null });
+    },
+    [servers]
+  );
+
+  const offer = useCallback(
+    (target) => {
+      if (isLoopbackHost(target.host)) {
+        connect(target);
+        return;
+      }
+      setOffered(target);
+    },
+    [connect]
+  );
+
+  const handleLink = useCallback(
+    (link) => {
+      const parsed = parseDevLink({ link, scheme: shell.scheme });
+      if (parsed === null) return false;
+      if (parsed.kind === 'menu') setMenuOpen(true);
+      if (parsed.kind === 'invalid') setMessage(parsed.reason);
+      if (parsed.kind === 'connect') offer(parsed);
+      return true;
+    },
+    [offer, shell.scheme]
+  );
+
+  useEffect(() => logs.install(), [logs]);
+
+  useEffect(() => installInjector(injections), [injections]);
+
+  // The native inputs' dictation plays injected transcripts, and uses the microphone otherwise.
+  useEffect(() => installDictationSource(injected), []);
+
+  // ScanCode, QRScanner, PickImage, TakePhoto and ReadNfc answer injected results first.
+  useEffect(() => {
+    installDevice(withInjectedDevice({ features: device.features, read: injected }));
+    return () => {
+      installDevice(device.features);
+    };
+  }, []);
+
+  useEffect(() => {
+    linking.getInitialURL().then((link) => link && handleLink(link));
+    const subscription = linking.addEventListener('url', ({ url }) => handleLink(url));
+    return () => subscription.remove();
+  }, [handleLink, linking]);
+
+  useEffect(() => watchShake({ accelerometer, onShake: () => setMenuOpen(true) }), [accelerometer]);
+
+  useEffect(() => {
+    if (server === null) SplashScreen.hideAsync();
+  }, [server]);
+
+  const devShell = useMemo(
+    () =>
+      server === null
+        ? null
+        : createDevShellConfig({
+            fetch: createOfflineFetch({
+              fetch: globalThis.fetch,
+              isOffline: injections.isOffline,
+            }),
+            server,
+            shell,
+          }),
+    [injections, server, shell]
+  );
+
+  const onApp = useCallback((app) => {
+    openApp.current = app;
+  }, []);
+
+  // An app that could not open is opened again.
+  function reload() {
+    if (openApp.current === null) {
+      setOpenings((count) => count + 1);
+      return;
+    }
+    reloadApp({ session: openApp.current.session }).catch((error) => logs.add('error', error));
+  }
+
+  // Signs out, which removes the session token and every cached page of this server's app, then
+  // removes the rest of what the device store holds for apps (keeping Lowdefy Dev's server list)
+  // and opens the app afresh.
+  async function clearData() {
+    if (openApp.current !== null) {
+      await openApp.current.auth.signOut();
+    }
+    kv.keys()
+      .filter((key) => key !== SERVERS_KEY)
+      .forEach((key) => kv.remove(key));
+    setOpenings((count) => count + 1);
+  }
+
+  const sheet = (
+    <ConfirmSheet
+      onCancel={() => setOffered(null)}
+      onConfirm={() => connect(offered)}
+      server={offered}
+    />
+  );
+  const menu = (
+    <DevMenu
+      logs={logs}
+      onClearData={clearData}
+      onClose={() => setMenuOpen(false)}
+      onReload={reload}
+      onSwitchServer={() => setServer(null)}
+      server={server?.host ?? null}
+      shell={shell}
+      visible={menuOpen}
+    />
+  );
+
+  if (devShell === null) {
+    return (
+      <>
+        <ConnectScreen
+          message={message}
+          onOffer={offer}
+          onPick={connect}
+          onScanned={(text) => {
+            if (!handleLink(text)) setMessage('That code is not one lowdefy dev printed.');
+          }}
+          recent={servers.list()}
+          scheme={shell.scheme}
+        />
+        {sheet}
+        {menu}
+      </>
+    );
+  }
+  return (
+    <View collapsable={false} ref={rootRef} style={{ flex: 1 }}>
+      <AppProvider key={`${devShell.app.id}:${openings}`} shell={devShell}>
+        <Frame />
+        <DevTabClient injections={injections} kv={kv} logs={logs} onApp={onApp} rootRef={rootRef} />
+      </AppProvider>
+      {sheet}
+      {menu}
+    </View>
+  );
+}
+
+export default DevShell;

package/src/dev/DevShell.test.js

@@ -0,0 +1,233 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { jest } from '@jest/globals';
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+
+import createMemoryStore from '../host/createMemoryStore.js';
+import DevShell from './DevShell.js';
+
+// The opened app is recorded, not built: its auth, session and screens have their own tests.
+const mockOpened = [];
+jest.mock('../components/AppProvider.js', () => {
+  function AppProvider({ children, shell }) {
+    const { app } = shell;
+    mockOpened.push({ app, shell });
+    const { Text: MockText } = jest.requireActual('react-native');
+    return (
+      <>
+        <MockText testID="opened-app">{app.urls.dev}</MockText>
+        {children}
+      </>
+    );
+  }
+  return AppProvider;
+});
+jest.mock('../components/Frame.js', () => () => null);
+jest.mock('./tab/DevTabClient.js', () => () => null);
+jest.mock('../host/createDeviceStore.js', () => () => {
+  throw new Error('The tests pass a device store.');
+});
+jest.mock('../config/getShellConfig.js', () => () => {
+  throw new Error('The tests pass the shell config.');
+});
+jest.mock('expo-splash-screen', () => ({ hideAsync: jest.fn() }));
+jest.mock('expo-network', () => ({
+  addNetworkStateListener: () => ({ remove: () => undefined }),
+  getNetworkStateAsync: async () => ({ isConnected: true, isInternetReachable: true }),
+}));
+jest.mock('expo-sensors', () => ({ Accelerometer: {} }));
+jest.mock('expo-camera', () => ({
+  CameraView: () => null,
+  useCameraPermissions: () => [{ granted: true }, jest.fn()],
+}));
+jest.mock('react-native-safe-area-context', () => ({
+  useSafeAreaInsets: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+}));
+
+const shell = {
+  id: 'lowdefy-dev',
+  name: 'Lowdefy Dev',
+  environment: 'dev',
+  scheme: 'lowdefy-dev',
+  version: '7.0.0',
+  app: { id: 'dev', name: 'Lowdefy Dev', urls: { dev: 'http://localhost:3000' } },
+};
+
+function createLinking(initialUrl = null) {
+  const listeners = new Set();
+  return {
+    getInitialURL: jest.fn(async () => initialUrl),
+    addEventListener: (event, listener) => {
+      listeners.add(listener);
+      return { remove: () => listeners.delete(listener) };
+    },
+    open: (url) => listeners.forEach((listener) => listener({ url })),
+  };
+}
+
+function createAccelerometer() {
+  let listener = null;
+  return {
+    setUpdateInterval: jest.fn(),
+    addListener: (fn) => {
+      listener = fn;
+      return { remove: () => undefined };
+    },
+    shake: () => [0, 1, 2].forEach(() => listener({ x: 2, y: 2, z: 2 })),
+  };
+}
+
+async function renderDevShell({ initialUrl = null, kv = createMemoryStore() } = {}) {
+  const linking = createLinking(initialUrl);
+  const accelerometer = createAccelerometer();
+  await render(<DevShell accelerometer={accelerometer} kv={kv} linking={linking} shell={shell} />);
+  await act(async () => {});
+  return { accelerometer, kv, linking };
+}
+
+const lanLink = 'lowdefy-dev://connect?url=http%3A%2F%2F192.168.1.20%3A3000&pair=k3x9q';
+
+beforeEach(() => {
+  mockOpened.splice(0);
+});
+
+test('with no server, Lowdefy Dev shows the connect screen', async () => {
+  await renderDevShell();
+  expect(screen.getByTestId('dev-connect')).toBeTruthy();
+  expect(screen.queryByTestId('opened-app')).toBeNull();
+});
+
+test('a connect link asks "Connect to <host>?" and attaches only once confirmed', async () => {
+  const { kv } = await renderDevShell({ initialUrl: lanLink });
+  expect(screen.getByText('Connect to 192.168.1.20:3000?')).toBeTruthy();
+  expect(screen.queryByTestId('opened-app')).toBeNull();
+  await act(async () => {
+    fireEvent.press(screen.getByTestId('dev-confirm-connect'));
+  });
+  expect(screen.getByTestId('opened-app').props.children).toBe('http://192.168.1.20:3000');
+  expect(JSON.parse(kv.get('lowdefy-dev:servers'))).toEqual([
+    { url: 'http://192.168.1.20:3000', host: '192.168.1.20:3000', pair: 'k3x9q' },
+  ]);
+});
+
+test('the opened app sends the pairing token on every call', async () => {
+  await renderDevShell({ initialUrl: lanLink });
+  await act(async () => {
+    fireEvent.press(screen.getByTestId('dev-confirm-connect'));
+  });
+  const { app, shell: devShell } = mockOpened.at(-1);
+  expect(app.id).toBe('dev-192.168.1.20_3000');
+  const fetch = jest.fn(async () => ({ status: 200 }));
+  const pairedFetch = devShell.transport.wrapFetch(fetch);
+  await pairedFetch('http://192.168.1.20:3000/api/mobile/root');
+  expect(fetch.mock.calls[0][1].headers).toEqual({ 'x-lowdefy-pair': 'k3x9q' });
+});
+
+test('a cancelled link attaches to nothing', async () => {
+  const { kv } = await renderDevShell({ initialUrl: lanLink });
+  await act(async () => {
+    fireEvent.press(screen.getByTestId('dev-confirm-cancel'));
+  });
+  expect(screen.queryByText('Connect to 192.168.1.20:3000?')).toBeNull();
+  expect(screen.queryByTestId('opened-app')).toBeNull();
+  expect(kv.get('lowdefy-dev:servers')).toBeNull();
+});
+
+test('a typed address is confirmed before it is attached to', async () => {
+  await renderDevShell();
+  await act(async () => {
+    fireEvent.changeText(screen.getByTestId('dev-connect-url'), '192.168.1.20:3000');
+  });
+  await act(async () => {
+    fireEvent.press(screen.getByTestId('dev-connect-submit'));
+  });
+  expect(screen.getByText('Connect to 192.168.1.20:3000?')).toBeTruthy();
+  expect(screen.queryByTestId('opened-app')).toBeNull();
+});
+
+test('a simulator link to localhost connects at once', async () => {
+  await renderDevShell({
+    initialUrl: 'lowdefy-dev://connect?url=http%3A%2F%2Flocalhost%3A3000',
+  });
+  expect(screen.queryByTestId('dev-confirm-sheet')).toBeNull();
+  expect(screen.getByTestId('opened-app').props.children).toBe('http://localhost:3000');
+});
+
+test('the last server opens at launch, and a link to another one is confirmed first', async () => {
+  const kv = createMemoryStore();
+  kv.set(
+    'lowdefy-dev:servers',
+    JSON.stringify([{ url: 'http://10.0.0.5:3000', host: '10.0.0.5:3000', pair: 'old' }])
+  );
+  const { linking } = await renderDevShell({ kv });
+  expect(screen.getByTestId('opened-app').props.children).toBe('http://10.0.0.5:3000');
+  await act(async () => {
+    linking.open(lanLink);
+  });
+  expect(screen.getByText('Connect to 192.168.1.20:3000?')).toBeTruthy();
+  expect(screen.getByTestId('opened-app').props.children).toBe('http://10.0.0.5:3000');
+});
+
+test('shaking the phone opens the dev menu, with the shell version', async () => {
+  const { accelerometer } = await renderDevShell({
+    initialUrl: 'lowdefy-dev://connect?url=http%3A%2F%2Flocalhost%3A3000',
+  });
+  expect(screen.queryByTestId('dev-menu')).toBeNull();
+  await act(async () => {
+    accelerometer.shake();
+  });
+  expect(screen.getByTestId('dev-menu')).toBeTruthy();
+  expect(screen.getByTestId('dev-menu-version').props.children).toBe(
+    'Shell 7.0.0 · localhost:3000'
+  );
+});
+
+test('a menu link opens the dev menu, and switch server goes back to the connect screen', async () => {
+  const { linking } = await renderDevShell({
+    initialUrl: 'lowdefy-dev://connect?url=http%3A%2F%2Flocalhost%3A3000',
+  });
+  await act(async () => {
+    linking.open('lowdefy-dev://menu');
+  });
+  await act(async () => {
+    fireEvent.press(screen.getByTestId('dev-menu-switch'));
+  });
+  expect(screen.getByTestId('dev-connect')).toBeTruthy();
+  expect(screen.getByTestId('dev-recent-localhost:3000')).toBeTruthy();
+});
+
+test('the dev menu shows the shell logs and the block gallery entry', async () => {
+  jest.spyOn(console, 'info').mockImplementation(() => undefined);
+  const { linking } = await renderDevShell();
+  await act(async () => {
+    linking.open('lowdefy-dev://menu');
+  });
+  await act(async () => {
+    console.info('Dev tab: joined the dev server as tab phone.');
+    fireEvent.press(screen.getByTestId('dev-menu-logs'));
+    await new Promise((resolve) => setTimeout(resolve, 10));
+  });
+  expect(screen.getByText(/Dev tab: joined the dev server as tab phone\./)).toBeTruthy();
+  await act(async () => {
+    fireEvent.press(screen.getByTestId('dev-menu-close'));
+  });
+  await act(async () => {
+    fireEvent.press(screen.getByTestId('dev-menu-gallery'));
+  });
+  expect(screen.getByTestId('dev-block-gallery')).toBeTruthy();
+});

package/src/dev/connect/ConfirmSheet.js

@@ -0,0 +1,71 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { Modal, Pressable, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import devStyles from '../devStyles.js';
+
+/**
+ * "Connect to <host>?", asked before Lowdefy Dev attaches to a server from a link, a scanned code
+ * or a typed address: a link can come from anyone, and the server it names sends every page the
+ * app shows.
+ *
+ * @param {Object} props
+ * @param {{ url, host, pair }|null} props.server The server to ask about; null hides the sheet.
+ * @param {() => void} props.onConfirm
+ * @param {() => void} props.onCancel
+ */
+function ConfirmSheet({ onCancel, onConfirm, server }) {
+  const insets = useSafeAreaInsets();
+  return (
+    <Modal animationType="slide" onRequestClose={onCancel} transparent visible={server !== null}>
+      <View style={devStyles.backdrop}>
+        <View
+          style={[devStyles.sheet, { paddingBottom: insets.bottom + 24 }]}
+          testID="dev-confirm-sheet"
+        >
+          <Text style={devStyles.sheetTitle}>{`Connect to ${server?.host}?`}</Text>
+          <Text style={devStyles.hint}>{server?.url}</Text>
+          <Text style={devStyles.hint}>
+            {server?.pair
+              ? 'Paired with lowdefy dev --lan. Connect only to a server you started.'
+              : 'Connect only to a server you started.'}
+          </Text>
+          <Pressable
+            accessibilityRole="button"
+            onPress={onConfirm}
+            style={devStyles.button}
+            testID="dev-confirm-connect"
+          >
+            <Text style={devStyles.buttonText}>Connect</Text>
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            onPress={onCancel}
+            style={devStyles.secondaryButton}
+            testID="dev-confirm-cancel"
+          >
+            <Text style={devStyles.secondaryButtonText}>Cancel</Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+export default ConfirmSheet;

package/src/dev/connect/ConnectScreen.js

@@ -0,0 +1,117 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { useState } from 'react';
+import { Pressable, ScrollView, Text, TextInput } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import devStyles from '../devStyles.js';
+import parseServerInput from '../connection/parseServerInput.js';
+import QrScanner from './QrScanner.js';
+
+/**
+ * Lowdefy Dev with no server: scan the code `lowdefy dev --lan` prints, type or paste its address,
+ * or pick one of the last 5 servers.
+ *
+ * @param {Object} props
+ * @param {Array<{ url, host, pair }>} props.recent The servers connected to before, last first.
+ * @param {(server) => void} props.onOffer A server to confirm, from a code or a typed address.
+ * @param {(server) => void} props.onPick A server connected to before.
+ * @param {(text: string) => void} props.onScanned The text of a scanned code.
+ * @param {string} props.scheme The shell's URL scheme.
+ * @param {string|null} props.message A note to show, such as why a link could not be used.
+ */
+function ConnectScreen({ message, onOffer, onPick, onScanned, recent, scheme }) {
+  const insets = useSafeAreaInsets();
+  const [input, setInput] = useState('');
+  const [error, setError] = useState(null);
+  const [scanning, setScanning] = useState(false);
+
+  function submit() {
+    const parsed = parseServerInput({ input, scheme });
+    if (parsed.error) {
+      setError(parsed.error);
+      return;
+    }
+    setError(null);
+    onOffer(parsed);
+  }
+
+  return (
+    <ScrollView
+      contentContainerStyle={[devStyles.screen, { paddingTop: insets.top + 24 }]}
+      keyboardShouldPersistTaps="handled"
+      testID="dev-connect"
+    >
+      <Text style={devStyles.heading}>Lowdefy Dev</Text>
+      <Text style={devStyles.hint}>
+        Run lowdefy dev --lan and scan the code it prints, or enter the address it shows.
+      </Text>
+      {message ? <Text style={devStyles.error}>{message}</Text> : null}
+      <Pressable
+        accessibilityRole="button"
+        onPress={() => setScanning(true)}
+        style={devStyles.button}
+        testID="dev-connect-scan"
+      >
+        <Text style={devStyles.buttonText}>Scan code</Text>
+      </Pressable>
+      <TextInput
+        autoCapitalize="none"
+        autoCorrect={false}
+        inputMode="url"
+        onChangeText={setInput}
+        onSubmitEditing={submit}
+        placeholder="http://192.168.1.20:3000"
+        style={devStyles.input}
+        testID="dev-connect-url"
+        value={input}
+      />
+      {error ? <Text style={devStyles.error}>{error}</Text> : null}
+      <Pressable
+        accessibilityRole="button"
+        onPress={submit}
+        style={devStyles.secondaryButton}
+        testID="dev-connect-submit"
+      >
+        <Text style={devStyles.secondaryButtonText}>Connect</Text>
+      </Pressable>
+      {recent.length > 0 ? <Text style={devStyles.hint}>Recent servers</Text> : null}
+      {recent.map((server) => (
+        <Pressable
+          accessibilityRole="button"
+          key={server.url}
+          onPress={() => onPick(server)}
+          style={devStyles.row}
+          testID={`dev-recent-${server.host}`}
+        >
+          <Text style={devStyles.rowText}>{server.host}</Text>
+          <Text style={devStyles.hint}>{server.url}</Text>
+        </Pressable>
+      ))}
+      <QrScanner
+        onClose={() => setScanning(false)}
+        onScanned={(text) => {
+          setScanning(false);
+          onScanned(text);
+        }}
+        visible={scanning}
+      />
+    </ScrollView>
+  );
+}
+
+export default ConnectScreen;