usb: add USB support

Initial working USB support.

Author: dlech

src/alerts.ts

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2025 The Pybricks Authors
 
 import { ToastProps } from '@blueprintjs/core';
 import alerts from './alerts/alerts';
@@ -11,6 +11,7 @@ import hub from './hub/alerts';
 import mpy from './mpy/alerts';
 import sponsor from './sponsor/alerts';
 import type { CreateToast } from './toasterTypes';
+import usb from './usb/alerts';
 
 /** This collects alerts from all of the subsystems of the app */
 const alertDomains = {
@@ -22,6 +23,7 @@ const alertDomains = {
     hub,
     mpy,
     sponsor,
+    usb,
 };
 
 /** Gets the type of available alert domains. */

src/ble-device-info-service/protocol.ts

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
+// Copyright (c) 2021-2025 The Pybricks Authors
 //
 // Pybricks uses the standard Device Info service.
 // Refer to Device Information Service (DIS) at https://www.bluetooth.com/specifications/specs/
@@ -15,6 +15,14 @@ import {
 /** Device Information service UUID. */
 export const deviceInformationServiceUUID = 0x180a;
 
+/**
+ * Device Name characteristic UUID.
+ *
+ * NB: Some OSes block this, so we just get the device name from the BLE
+ * advertisement data instead. But we need this UUID for USB support.
+ */
+export const deviceNameUUID = 0x2a00;
+
 /** Firmware Revision String characteristic UUID. */
 export const firmwareRevisionStringUUID = 0x2a26;
 

src/hub/reducers.ts

@@ -26,6 +26,13 @@ import {
     Status,
     statusToFlag,
 } from '../ble-pybricks-service/protocol';
+import {
+    usbDidConnectPybricks,
+    usbDidDisconnectPybricks,
+    usbDidReceiveDeviceName,
+    usbDidReceiveFirmwareRevision,
+    usbDisconnectPybricks,
+} from '../usb/actions';
 import { pythonVersionToSemver } from '../utils/version';
 import {
     didFailToFinishDownload,
@@ -68,21 +75,31 @@ const runtime: Reducer<HubRuntimeState> = (
     // can't possibly be in any other state until we get a connect event.
     if (
         state === HubRuntimeState.Disconnected &&
-        !bleDidConnectPybricks.matches(action)
+        !bleDidConnectPybricks.matches(action) &&
+        !usbDidConnectPybricks.matches(action)
     ) {
         return state;
     }
 
-    if (bleDidConnectPybricks.matches(action)) {
+    if (
+        bleDidConnectPybricks.matches(action) ||
+        usbDidConnectPybricks.matches(action)
+    ) {
         return HubRuntimeState.Unknown;
     }
 
-    if (bleDisconnectPybricks.matches(action)) {
+    if (
+        bleDisconnectPybricks.matches(action) ||
+        usbDisconnectPybricks.matches(action)
+    ) {
         // disconnecting
         return HubRuntimeState.Unknown;
     }
 
-    if (bleDidDisconnectPybricks.matches(action)) {
+    if (
+        bleDidDisconnectPybricks.matches(action) ||
+        usbDidDisconnectPybricks.matches(action)
+    ) {
         return HubRuntimeState.Disconnected;
     }
 
@@ -149,43 +166,67 @@ const runtime: Reducer<HubRuntimeState> = (
 };
 
 const deviceName: Reducer<string> = (state = '', action) => {
-    if (bleDidDisconnectPybricks.matches(action)) {
+    if (
+        bleDidDisconnectPybricks.matches(action) ||
+        usbDidDisconnectPybricks.matches(action)
+    ) {
         return '';
     }
 
     if (bleDidConnectPybricks.matches(action)) {
         return action.name;
     }
 
+    if (usbDidReceiveDeviceName.matches(action)) {
+        return action.deviceName;
+    }
+
     return state;
 };
 
 const deviceType: Reducer<string> = (state = '', action) => {
-    if (bleDidDisconnectPybricks.matches(action)) {
+    if (
+        bleDidDisconnectPybricks.matches(action) ||
+        usbDidDisconnectPybricks.matches(action)
+    ) {
         return '';
     }
 
     if (bleDIServiceDidReceivePnPId.matches(action)) {
         return getHubTypeName(action.pnpId);
     }
 
+    if (usbDidConnectPybricks.matches(action)) {
+        return getHubTypeName(action.pnpId);
+    }
+
     return state;
 };
 
 const deviceFirmwareVersion: Reducer<string> = (state = '', action) => {
-    if (bleDidDisconnectPybricks.matches(action)) {
+    if (
+        bleDidDisconnectPybricks.matches(action) ||
+        usbDidDisconnectPybricks.matches(action)
+    ) {
         return '';
     }
 
     if (bleDIServiceDidReceiveFirmwareRevision.matches(action)) {
         return action.version;
     }
 
+    if (usbDidReceiveFirmwareRevision.matches(action)) {
+        return action.version;
+    }
+
     return state;
 };
 
 const deviceLowBatteryWarning: Reducer<boolean> = (state = false, action) => {
-    if (bleDidDisconnectPybricks.matches(action)) {
+    if (
+        bleDidDisconnectPybricks.matches(action) ||
+        usbDidDisconnectPybricks.matches(action)
+    ) {
         return false;
     }
 

src/reducers.ts

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2025 The Pybricks Authors
 
 import { TypedUseSelectorHook, useSelector as useReduxSelector } from 'react-redux';
 import { Reducer, combineReducers } from 'redux';
@@ -13,6 +13,7 @@ import hub from './hub/reducers';
 import bootloader from './lwp3-bootloader/reducers';
 import sponsor from './sponsor/reducers';
 import tour from './tour/reducers';
+import usb from './usb/reducers';
 
 /**
  * Root reducer for redux store.
@@ -28,6 +29,7 @@ export const rootReducer = combineReducers({
     hub,
     tour,
     sponsor,
+    usb,
 });
 
 /**

src/sagas.ts

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2025 The Pybricks Authors
 
 import { eventChannel } from 'redux-saga';
 import { all, spawn, take } from 'typed-redux-saga/macro';
@@ -17,6 +17,7 @@ import lwp3BootloaderBle from './lwp3-bootloader/sagas-ble';
 import mpy from './mpy/sagas';
 import notifications from './notifications/sagas';
 import type { TerminalSagaContext } from './terminal/sagas';
+import usb from './usb/sagas';
 
 /**
  * Listens to the 'pb-lazy-saga' event to spawn sagas from a React.lazy() initializer.
@@ -53,6 +54,7 @@ export default function* (): Generator {
         hub(),
         mpy(),
         notifications(),
+        usb(),
         lazySagas(),
     ]);
 }

src/toolbar/Toolbar.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2023 The Pybricks Authors
+// Copyright (c) 2020-2025 The Pybricks Authors
 
 import { ButtonGroup } from '@blueprintjs/core';
 import React from 'react';
@@ -10,11 +10,13 @@ import ReplButton from './buttons/repl/ReplButton';
 import RunButton from './buttons/run/RunButton';
 import SponsorButton from './buttons/sponsor/SponsorButton';
 import StopButton from './buttons/stop/StopButton';
+import UsbButton from './buttons/usb/UsbButton';
 import { useI18n } from './i18n';
 
 import './toolbar.scss';
 
 // matches ID in tour component
+const usbButtonId = 'pb-toolbar-usb-button';
 const bluetoothButtonId = 'pb-toolbar-bluetooth-button';
 const runButtonId = 'pb-toolbar-run-button';
 const sponsorButtonId = 'pb-toolbar-sponsor-button';
@@ -31,6 +33,7 @@ const Toolbar: React.FunctionComponent = () => {
             firstFocusableItemId={bluetoothButtonId}
         >
             <ButtonGroup className="pb-toolbar-group pb-align-left">
+                <UsbButton id={usbButtonId} />
                 <BluetoothButton id={bluetoothButtonId} />
             </ButtonGroup>
             <ButtonGroup className="pb-toolbar-group pb-align-left">

src/toolbar/buttons/bluetooth/BluetoothButton.tsx

@@ -1,12 +1,13 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2023 The Pybricks Authors
+// Copyright (c) 2020-2025 The Pybricks Authors
 
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { toggleBluetooth } from '../../../ble/actions';
 import { BleConnectionState } from '../../../ble/reducers';
 import { BootloaderConnectionState } from '../../../lwp3-bootloader/reducers';
 import { useSelector } from '../../../reducers';
+import { UsbConnectionState } from '../../../usb/reducers';
 import ActionButton, { ActionButtonProps } from '../../ActionButton';
 import connectedIcon from './connected.svg';
 import disconnectedIcon from './disconnected.svg';
@@ -17,10 +18,13 @@ type BluetoothButtonProps = Pick<ActionButtonProps, 'id'>;
 const BluetoothButton: React.FunctionComponent<BluetoothButtonProps> = ({ id }) => {
     const bootloaderConnection = useSelector((s) => s.bootloader.connection);
     const bleConnection = useSelector((s) => s.ble.connection);
+    const usbConnection = useSelector((s) => s.usb.connection);
 
-    const isDisconnected =
+    const isBluetoothDisconnected =
         bootloaderConnection === BootloaderConnectionState.Disconnected &&
         bleConnection === BleConnectionState.Disconnected;
+    const isEverythingDisconnected =
+        isBluetoothDisconnected && usbConnection === UsbConnectionState.Disconnected;
 
     const i18n = useI18n();
     const dispatch = useDispatch();
@@ -30,10 +34,17 @@ const BluetoothButton: React.FunctionComponent<BluetoothButtonProps> = ({ id })
             id={id}
             label={i18n.translate('label')}
             tooltip={i18n.translate(
-                isDisconnected ? 'tooltip.connect' : 'tooltip.disconnect',
+                usbConnection !== UsbConnectionState.Disconnected
+                    ? 'tooltip.usbConnected'
+                    : isBluetoothDisconnected
+                      ? 'tooltip.connect'
+                      : 'tooltip.disconnect',
             )}
-            icon={isDisconnected ? disconnectedIcon : connectedIcon}
-            enabled={isDisconnected || bleConnection === BleConnectionState.Connected}
+            icon={isBluetoothDisconnected ? disconnectedIcon : connectedIcon}
+            enabled={
+                isEverythingDisconnected ||
+                bleConnection === BleConnectionState.Connected
+            }
             showProgress={
                 bleConnection === BleConnectionState.Connecting ||
                 bleConnection === BleConnectionState.Disconnecting

src/toolbar/buttons/bluetooth/translations/en.json

@@ -2,6 +2,7 @@
     "label": "Bluetooth",
     "tooltip": {
         "connect": "Connect using Bluetooth",
-        "disconnect": "Disconnect Bluetooth"
+        "disconnect": "Disconnect Bluetooth",
+        "usbConnected": "USB is connected, disconnect to use Bluetooth"
     }
 }

src/toolbar/buttons/usb/UsbButton.test.tsx

@@ -0,0 +1,25 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2025 The Pybricks Authors
+
+import { act, cleanup } from '@testing-library/react';
+import React from 'react';
+import { FocusScope } from 'react-aria';
+import { testRender } from '../../../../test';
+import { usbToggle } from '../../../usb/actions';
+import UsbButton from './UsbButton';
+
+afterEach(() => {
+    cleanup();
+});
+
+it('should dispatch action when clicked', async () => {
+    const [user, button, dispatch] = testRender(
+        <FocusScope>
+            <UsbButton id="test-usb-button" />
+        </FocusScope>,
+    );
+
+    await act(() => user.click(button.getByRole('button', { name: 'USB' })));
+
+    expect(dispatch).toHaveBeenCalledWith(usbToggle());
+});

src/toolbar/buttons/usb/UsbButton.tsx

@@ -0,0 +1,57 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2025 The Pybricks Authors
+
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { BleConnectionState } from '../../../ble/reducers';
+import { BootloaderConnectionState } from '../../../lwp3-bootloader/reducers';
+import { useSelector } from '../../../reducers';
+import { usbToggle } from '../../../usb/actions';
+import { UsbConnectionState } from '../../../usb/reducers';
+import ActionButton, { ActionButtonProps } from '../../ActionButton';
+import connectedIcon from './connected.svg';
+import disconnectedIcon from './disconnected.svg';
+import { useI18n } from './i18n';
+
+type UsbButtonProps = Pick<ActionButtonProps, 'id'>;
+
+const UsbButton: React.FunctionComponent<UsbButtonProps> = ({ id }) => {
+    const bootloaderConnection = useSelector((s) => s.bootloader.connection);
+    const bleConnection = useSelector((s) => s.ble.connection);
+    const usbConnection = useSelector((s) => s.usb.connection);
+
+    const isUsbDisconnected = usbConnection === UsbConnectionState.Disconnected;
+    const isEverythingDisconnected =
+        isUsbDisconnected &&
+        bootloaderConnection === BootloaderConnectionState.Disconnected &&
+        bleConnection === BleConnectionState.Disconnected;
+
+    const i18n = useI18n();
+    const dispatch = useDispatch();
+
+    return (
+        <ActionButton
+            id={id}
+            label={i18n.translate('label')}
+            tooltip={i18n.translate(
+                bleConnection !== BleConnectionState.Disconnected
+                    ? 'tooltip.bluetoothConnected'
+                    : isUsbDisconnected
+                      ? 'tooltip.connect'
+                      : 'tooltip.disconnect',
+            )}
+            icon={isUsbDisconnected ? disconnectedIcon : connectedIcon}
+            enabled={
+                isEverythingDisconnected ||
+                usbConnection === UsbConnectionState.Connected
+            }
+            showProgress={
+                usbConnection === UsbConnectionState.Connecting ||
+                usbConnection === UsbConnectionState.Disconnecting
+            }
+            onAction={() => dispatch(usbToggle())}
+        />
+    );
+};
+
+export default UsbButton;