From dc7b02d9251e2e01b4fd4f93dc0ad59de78e3b42 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Fri, 13 Dec 2024 23:38:11 +1000
Subject: [PATCH 01/15] Move some dashboard utility files to `common` package

---
 app/common/package.json                       |  15 +-
 app/common/src/detect.ts                      |  16 -
 app/common/src/services/Backend.ts            |  64 +-
 .../src}/utilities/__tests__/error.test.ts    |  10 +-
 .../src}/utilities/convertCSSUnits.ts         |   2 -
 .../utilities/data/__tests__/array.test.ts    |  28 +-
 .../data}/__tests__/dateTime.test.ts          |  18 +-
 .../utilities/data/__tests__/email.test.ts}   |  12 +-
 .../utilities/data/__tests__/fileInfo.test.ts |  10 +
 .../utilities/data/__tests__/iterator.test.ts |  48 +-
 app/common/src/utilities/data/dateTime.ts     |   8 -
 .../src/utilities/data/email.ts}              |   6 +-
 .../src/utilities/data}/fileInfo.ts           |   4 -
 app/common/src/utilities/data/newtype.ts      |   4 -
 .../src/utilities/data}/path.ts               |  28 +-
 app/common/src/utilities/data/string.ts       |  46 ++
 .../src}/utilities/download.ts                |   8 -
 app/common/src/utilities/error.ts             | 147 ++++
 app/common/src/utilities/functions.ts         |   4 +
 .../src}/utilities/github.ts                  |  22 +-
 app/common/src/utilities/permissions.ts       |  12 -
 .../integration-test/dashboard/actions/api.ts |  12 +-
 .../dashboard/assetPanel.spec.ts              |   5 +-
 .../dashboard/assetSearchBar.spec.ts          |   2 +-
 .../integration-test/dashboard/labels.spec.ts |   2 +-
 .../integration-test/dashboard/sort.spec.ts   |   2 +-
 app/gui/src/dashboard/App.tsx                 | 279 ++++----
 .../src/dashboard/authentication/cognito.ts   | 166 +++--
 .../AriaComponents/Checkbox/CheckboxGroup.tsx |  29 +-
 .../AriaComponents/Radio/RadioGroup.tsx       |  66 +-
 .../src/dashboard/components/ColorPicker.tsx  |  57 +-
 .../components/Devtools/EnsoDevtools.tsx      | 122 ++--
 .../Devtools/EnsoDevtoolsProvider.tsx         |  41 +-
 .../dashboard/components/JSONSchemaInput.tsx  |  12 +-
 .../src/dashboard/components/SubmitButton.tsx |  40 --
 .../components/dashboard/AssetIcon.tsx        |  28 +-
 .../components/dashboard/AssetRow.tsx         | 183 +++--
 .../components/dashboard/AssetSummary.tsx     |  35 +-
 .../dashboard/DatalinkNameColumn.tsx          |  42 +-
 .../dashboard/DirectoryNameColumn.tsx         |  70 +-
 .../components/dashboard/FileNameColumn.tsx   |  50 +-
 .../dashboard/components/dashboard/Label.tsx  |   8 +-
 .../components/dashboard/Permission.tsx       |  91 ++-
 .../dashboard/PermissionSelector.tsx          | 106 ++-
 .../dashboard/PermissionTypeSelector.tsx      | 105 ++-
 .../components/dashboard/ProjectIcon.tsx      | 154 ++--
 .../dashboard/ProjectNameColumn.tsx           |  89 ++-
 .../components/dashboard/SecretNameColumn.tsx |  65 +-
 .../dashboard/components/dashboard/column.ts  |  11 +-
 .../dashboard/column/LabelsColumn.tsx         |  52 +-
 .../dashboard/column/ModifiedColumn.tsx       |   3 +-
 .../dashboard/column/NameColumn.tsx           |  32 +-
 .../dashboard/column/SharedWithColumn.tsx     |  11 +-
 .../dashboard/column/columnUtils.ts           |  27 +-
 app/gui/src/dashboard/events/assetEvent.ts    |  38 +-
 .../src/dashboard/events/assetListEvent.ts    |  46 +-
 app/gui/src/dashboard/hooks/backendHooks.tsx  | 266 ++++---
 .../hooks/billing/FeaturesConfiguration.ts    |  38 +-
 .../dashboard/hooks/billing/paywallHooks.ts   |  55 +-
 app/gui/src/dashboard/hooks/projectHooks.ts   | 120 ++--
 app/gui/src/dashboard/hooks/setAssetHooks.ts  |  21 +-
 .../src/dashboard/hooks/spotlightHooks.tsx    |   3 +-
 .../dashboard/layouts/AssetContextMenu.tsx    | 208 +++---
 .../layouts/AssetDiffView/AssetDiffView.tsx   |  17 +-
 .../AssetDiffView/useFetchVersionContent.ts   |  26 +-
 .../dashboard/layouts/AssetDocs/AssetDocs.tsx |  20 +-
 .../layouts/AssetPanel/AssetPanelState.ts     |  39 +-
 .../dashboard/layouts/AssetProjectSession.tsx |   8 +-
 .../layouts/AssetProjectSessions.tsx          |  11 +-
 .../src/dashboard/layouts/AssetProperties.tsx |  25 +-
 .../src/dashboard/layouts/AssetSearchBar.tsx  | 246 +++----
 .../layouts/AssetVersions/AssetVersion.tsx    |  33 +-
 .../layouts/AssetVersions/AssetVersions.tsx   |  69 +-
 .../layouts/AssetVersions/useAssetVersions.ts |  18 +-
 app/gui/src/dashboard/layouts/AssetsTable.tsx |  38 +-
 .../layouts/AssetsTableContextMenu.tsx        |  56 +-
 .../dashboard/layouts/CategorySwitcher.tsx    | 142 ++--
 .../layouts/CategorySwitcher/Category.ts      |  15 +-
 app/gui/src/dashboard/layouts/Chat.tsx        | 274 ++++----
 app/gui/src/dashboard/layouts/Drive.tsx       | 119 ++--
 .../layouts/Drive/assetsTableItemsHooks.tsx   |   9 +-
 app/gui/src/dashboard/layouts/DriveBar.tsx    |  21 +-
 app/gui/src/dashboard/layouts/Editor.tsx      | 125 ++--
 .../dashboard/layouts/GlobalContextMenu.tsx   |  10 +-
 app/gui/src/dashboard/layouts/Labels.tsx      |  52 +-
 .../Settings/ActivityLogSettingsSection.tsx   |  26 +-
 .../KeyboardShortcutsSettingsSection.tsx      |  17 +-
 .../Settings/MembersSettingsSection.tsx       |  97 ++-
 .../layouts/Settings/MembersTable.tsx         |   5 +-
 .../OrganizationProfilePictureInput.tsx       |  37 +-
 .../layouts/Settings/ProfilePictureInput.tsx  |  37 +-
 .../layouts/Settings/UserGroupRow.tsx         |  57 +-
 .../layouts/Settings/UserGroupUserRow.tsx     |  59 +-
 .../Settings/UserGroupsSettingsSection.tsx    |  19 +-
 .../dashboard/layouts/Settings/UserRow.tsx    |  82 +--
 .../src/dashboard/layouts/Settings/data.tsx   |  28 +-
 .../src/dashboard/layouts/Settings/index.tsx  |  11 +-
 app/gui/src/dashboard/layouts/TabBar.tsx      |  85 +--
 app/gui/src/dashboard/layouts/UserBar.tsx     |   3 +-
 app/gui/src/dashboard/layouts/UserMenu.tsx    |   7 +-
 .../src/dashboard/layouts/VersionChecker.tsx  |  22 +-
 .../dashboard/modals/DuplicateAssetsModal.tsx | 149 ++--
 .../InviteUsersModal/InviteUsersForm.tsx      |  77 +-
 .../InviteUsersModal/InviteUsersModal.tsx     |  58 +-
 .../dashboard/modals/ManageLabelsModal.tsx    |  16 +-
 .../modals/ManagePermissionsModal.tsx         |  37 +-
 .../src/dashboard/modals/NewLabelModal.tsx    |   9 +-
 .../dashboard/modals/NewUserGroupModal.tsx    |  72 +-
 .../src/dashboard/modals/ProjectLogsModal.tsx |  32 +-
 .../SetupOrganizationAfterSubscribe.tsx       |  72 +-
 .../dashboard/modals/UpsertSecretModal.tsx    |   7 +-
 .../payments/api/useSubscriptionPrice.ts      |   9 +-
 .../components/PlanSelector/PlanSelector.tsx  |   3 +-
 .../components/PlanSelectorDialog.tsx         |  16 +-
 .../PlanSelector/getComponentForPlan.tsx      |  75 +-
 .../dashboard/modules/payments/constants.ts   |  51 +-
 .../pages/authentication/Setup/Setup.tsx      | 165 ++---
 .../dashboard/pages/dashboard/Dashboard.tsx   | 156 ++---
 .../pages/dashboard/DashboardTabBar.tsx       |   7 +-
 .../pages/dashboard/DashboardTabPanels.tsx    |   6 +-
 .../pages/subscribe/Subscribe/Subscribe.tsx   |   3 +-
 .../pages/subscribe/SubscribeSuccess.tsx      |  41 +-
 .../src/dashboard/providers/AuthProvider.tsx  | 259 ++++---
 .../dashboard/providers/BackendProvider.tsx   |  22 +-
 .../dashboard/providers/ProjectsProvider.tsx  |  62 +-
 .../src/dashboard/providers/TextProvider.tsx  |  61 +-
 .../__test__/SessionProvider.test.tsx         |   9 +-
 app/gui/src/dashboard/services/Backend.ts     |   3 -
 app/gui/src/dashboard/services/Chat.ts        |  15 +-
 .../src/dashboard/services/LocalBackend.ts    | 330 +++++----
 .../src/dashboard/services/ProjectManager.ts  |  61 +-
 .../src/dashboard/services/RemoteBackend.ts   | 662 ++++++++++--------
 .../dashboard/services/remoteBackendPaths.ts  |  74 +-
 .../src/dashboard/utilities/AssetTreeNode.ts  |  49 +-
 .../src/dashboard/utilities/LocalStorage.ts   |  11 +-
 .../src/dashboard/utilities/Navigator2D.ts    |   2 +-
 app/gui/src/dashboard/utilities/Visibility.ts |   4 -
 .../utilities/__tests__/array.test.ts         |  30 -
 .../utilities/__tests__/fileInfo.test.ts      |  14 -
 app/gui/src/dashboard/utilities/array.ts      |   3 -
 app/gui/src/dashboard/utilities/dateTime.ts   |   3 -
 app/gui/src/dashboard/utilities/drag.ts       |  29 +-
 app/gui/src/dashboard/utilities/error.ts      | 162 +----
 app/gui/src/dashboard/utilities/event.ts      |  37 +-
 app/gui/src/dashboard/utilities/functions.ts  |   8 -
 app/gui/src/dashboard/utilities/indent.ts     |   4 -
 app/gui/src/dashboard/utilities/input.ts      |   4 +-
 .../src/dashboard/utilities/inputBindings.ts  |  43 +-
 app/gui/src/dashboard/utilities/jsonSchema.ts |  21 +-
 app/gui/src/dashboard/utilities/newtype.ts    |   2 -
 app/gui/src/dashboard/utilities/object.ts     |   3 -
 .../src/dashboard/utilities/permissions.ts    |  35 +-
 .../dashboard/utilities/preventNavigation.tsx |   3 +-
 app/gui/src/dashboard/utilities/sorting.ts    |   8 -
 app/gui/src/dashboard/utilities/string.ts     |  69 --
 app/gui/src/dashboard/utilities/style.ts      |   4 -
 .../src/dashboard/utilities/tailwindMerge.ts  |  14 +-
 .../dashboard/utilities/tailwindVariants.ts   |   4 -
 app/gui/src/dashboard/utilities/validation.ts |   4 -
 pnpm-lock.yaml                                |   4 +
 160 files changed, 3873 insertions(+), 4589 deletions(-)
 rename app/{gui/src/dashboard => common/src}/utilities/__tests__/error.test.ts (79%)
 rename app/{gui/src/dashboard => common/src}/utilities/convertCSSUnits.ts (93%)
 rename app/{gui/src/dashboard/utilities => common/src/utilities/data}/__tests__/dateTime.test.ts (78%)
 rename app/{gui/src/dashboard/utilities/__tests__/parseUserEmails.test.ts => common/src/utilities/data/__tests__/email.test.ts} (88%)
 create mode 100644 app/common/src/utilities/data/__tests__/fileInfo.test.ts
 rename app/{gui/src/dashboard/utilities/parseUserEmails.ts => common/src/utilities/data/email.ts} (89%)
 rename app/{gui/src/dashboard/utilities => common/src/utilities/data}/fileInfo.ts (92%)
 rename app/{gui/src/dashboard/utilities => common/src/utilities/data}/path.ts (58%)
 rename app/{gui/src/dashboard => common/src}/utilities/download.ts (86%)
 create mode 100644 app/common/src/utilities/error.ts
 create mode 100644 app/common/src/utilities/functions.ts
 rename app/{gui/src/dashboard => common/src}/utilities/github.ts (87%)
 delete mode 100644 app/gui/src/dashboard/components/SubmitButton.tsx
 delete mode 100644 app/gui/src/dashboard/services/Backend.ts
 delete mode 100644 app/gui/src/dashboard/utilities/__tests__/array.test.ts
 delete mode 100644 app/gui/src/dashboard/utilities/__tests__/fileInfo.test.ts
 delete mode 100644 app/gui/src/dashboard/utilities/array.ts
 delete mode 100644 app/gui/src/dashboard/utilities/dateTime.ts
 delete mode 100644 app/gui/src/dashboard/utilities/functions.ts
 delete mode 100644 app/gui/src/dashboard/utilities/newtype.ts
 delete mode 100644 app/gui/src/dashboard/utilities/object.ts
 delete mode 100644 app/gui/src/dashboard/utilities/string.ts

diff --git a/app/common/package.json b/app/common/package.json
index a3bda304841a..5cbc28aa45d9 100644
--- a/app/common/package.json
+++ b/app/common/package.json
@@ -14,17 +14,25 @@
     "./src/load": "./src/load.ts",
     "./src/backendQuery": "./src/backendQuery.ts",
     "./src/queryClient": "./src/queryClient.ts",
+    "./src/utilities/convertCSSUnits": "./src/utilities/convertCSSUnits.ts",
     "./src/utilities/data/array": "./src/utilities/data/array.ts",
     "./src/utilities/data/dateTime": "./src/utilities/data/dateTime.ts",
+    "./src/utilities/data/email": "./src/utilities/data/email.ts",
+    "./src/utilities/data/fileInfo": "./src/utilities/data/fileInfo.ts",
     "./src/utilities/data/newtype": "./src/utilities/data/newtype.ts",
     "./src/utilities/data/object": "./src/utilities/data/object.ts",
+    "./src/utilities/data/path": "./src/utilities/data/path.ts",
     "./src/utilities/data/string": "./src/utilities/data/string.ts",
     "./src/utilities/data/iter": "./src/utilities/data/iter.ts",
+    "./src/utilities/download": "./src/utilities/download.ts",
+    "./src/utilities/error": "./src/utilities/error.ts",
+    "./src/utilities/functions": "./src/utilities/functions.ts",
+    "./src/utilities/github": "./src/utilities/github.ts",
+    "./src/utilities/permissions": "./src/utilities/permissions.ts",
     "./src/utilities/style/tabBar": "./src/utilities/style/tabBar.ts",
     "./src/utilities/uniqueString": "./src/utilities/uniqueString.ts",
-    "./src/text": "./src/text/index.ts",
-    "./src/utilities/permissions": "./src/utilities/permissions.ts",
     "./src/services/Backend": "./src/services/Backend.ts",
+    "./src/text": "./src/text/index.ts",
     "./src/types": "./src/types.d.ts"
   },
   "scripts": {
@@ -42,5 +50,8 @@
     "react": "^18.3.1",
     "vitest": "^1.3.1",
     "vue": "^3.5.2"
+  },
+  "devDependencies": {
+    "@fast-check/vitest": "^0.0.8"
   }
 }
diff --git a/app/common/src/detect.ts b/app/common/src/detect.ts
index 7dbd00aa2a5d..f56c2418291e 100644
--- a/app/common/src/detect.ts
+++ b/app/common/src/detect.ts
@@ -1,16 +1,8 @@
 /** @file Helper functions for environment detection. */
 
-// ===================
-// === IS_DEV_MODE ===
-// ===================
-
 /** Return whether the current build is in development mode */
 export const IS_DEV_MODE = process.env.NODE_ENV === 'development'
 
-// ================
-// === Platform ===
-// ================
-
 /** Possible platforms that the app may run on. */
 export enum Platform {
   unknown = 'Unknown platform',
@@ -82,10 +74,6 @@ export function isOnUnknownOS() {
   return platform() === Platform.unknown
 }
 
-// ===============
-// === Browser ===
-// ===============
-
 /** Possible browsers that the app may run on. */
 export enum Browser {
   unknown = 'Unknown browser',
@@ -160,10 +148,6 @@ export function isOnUnknownBrowser() {
   return browser() === Browser.unknown
 }
 
-// ====================
-// === Architecture ===
-// ====================
-
 let detectedArchitecture: string | null = null
 // Only implemented by Chromium.
 // @ts-expect-error This API exists, but no typings exist for it yet.
diff --git a/app/common/src/services/Backend.ts b/app/common/src/services/Backend.ts
index 118b795c5567..a065b78c7562 100644
--- a/app/common/src/services/Backend.ts
+++ b/app/common/src/services/Backend.ts
@@ -1,5 +1,4 @@
 /** @file Type definitions common between all backends. */
-
 import * as array from '../utilities/data/array'
 import * as dateTime from '../utilities/data/dateTime'
 import * as newtype from '../utilities/data/newtype'
@@ -9,10 +8,6 @@ import * as uniqueString from '../utilities/uniqueString'
 /** The size, in bytes, of the chunks which the backend accepts. */
 export const S3_CHUNK_SIZE_BYTES = 10_000_000
 
-// ================
-// === Newtypes ===
-// ================
-
 /** Unique identifier for an organization. */
 export type OrganizationId = newtype.Newtype<string, 'OrganizationId'>
 export const OrganizationId = newtype.newtypeConstructor<OrganizationId>()
@@ -145,10 +140,6 @@ export function newPlaceholderUserGroupId() {
   return UserGroupId(`${PLACEHOLDER_USER_GROUP_PREFIX}${uniqueString.uniqueString()}`)
 }
 
-// =============
-// === Types ===
-// =============
-
 /** The {@link Backend} variant. If a new variant is created, it should be added to this enum. */
 export enum BackendType {
   local = 'local',
@@ -685,10 +676,6 @@ export function findLeastUsedColor(labels: Iterable<Label>) {
   return minColor == null ? COLORS[0] : COLOR_STRING_TO_COLOR.get(minColor) ?? COLORS[0]
 }
 
-// =================
-// === AssetType ===
-// =================
-
 export enum SpecialAssetType {
   loading = 'specialLoading',
   empty = 'specialEmpty',
@@ -747,10 +734,6 @@ export const ASSET_TYPE_ORDER: Readonly<Record<AssetType, number>> = {
   [AssetType.specialError]: 1000,
 }
 
-// =============
-// === Asset ===
-// =============
-
 /**
  * Metadata uniquely identifying a directory entry.
  * These can be Projects, Files, Secrets, or other directories.
@@ -1136,10 +1119,6 @@ export interface AssetVersions {
   readonly versions: S3ObjectVersion[]
 }
 
-// ===============================
-// === compareAssetPermissions ===
-// ===============================
-
 /**
  * Return a positive number when `a > b`, a negative number when `a < b`, and `0`
  * when `a === b`.
@@ -1167,10 +1146,6 @@ export function compareAssetPermissions(a: AssetPermission, b: AssetPermission)
   }
 }
 
-// =================
-// === Endpoints ===
-// =================
-
 /** HTTP request body for the "set username" endpoint. */
 export interface CreateUserRequestBody {
   readonly userName: string
@@ -1380,10 +1355,6 @@ export interface UploadPictureRequestParams {
   readonly fileName: string | null
 }
 
-// ==============================
-// === detectVersionLifecycle ===
-// ==============================
-
 /** Extract the {@link VersionLifecycle} from a version string. */
 export function detectVersionLifecycle(version: string) {
   if (/rc/i.test(version)) {
@@ -1397,10 +1368,6 @@ export function detectVersionLifecycle(version: string) {
   }
 }
 
-// =====================
-// === compareAssets ===
-// =====================
-
 /** Return a positive number if `a > b`, a negative number if `a < b`, and zero if `a === b`. */
 export function compareAssets(a: AnyAsset, b: AnyAsset) {
   const relativeTypeOrder = ASSET_TYPE_ORDER[a.type] - ASSET_TYPE_ORDER[b.type]
@@ -1430,10 +1397,6 @@ export function compareAssets(a: AnyAsset, b: AnyAsset) {
   }
 }
 
-// ==================
-// === getAssetId ===
-// ==================
-
 /**
  * A convenience function to get the `id` of an {@link Asset}.
  * This is useful to avoid React re-renders as it is not re-created on each function call.
@@ -1442,10 +1405,6 @@ export function getAssetId<Type extends AssetType>(asset: Asset<Type>) {
   return asset.id
 }
 
-// ================================
-// === userHasUserAndTeamSpaces ===
-// ================================
-
 /** Whether a user's root directory has the "Users" and "Teams" subdirectories. */
 export function userHasUserAndTeamSpaces(user: User | null) {
   switch (user?.plan ?? null) {
@@ -1461,10 +1420,6 @@ export function userHasUserAndTeamSpaces(user: User | null) {
   }
 }
 
-// =====================
-// === fileIsProject ===
-// =====================
-
 /** A subset of properties of the JS `File` type. */
 interface JSFile {
   readonly name: string
@@ -1484,10 +1439,6 @@ export function fileIsNotProject(file: JSFile) {
   return !fileIsProject(file)
 }
 
-// =============================
-// === stripProjectExtension ===
-// =============================
-
 /** Remove the extension of the project file name (if any). */
 export function stripProjectExtension(name: string) {
   return name.replace(/[.](?:tar[.]gz|zip|enso-project)$/, '')
@@ -1531,7 +1482,7 @@ export function isNewTitleValid(
 /** Network error class. */
 export class NetworkError extends Error {
   /**
-   * Create a new instance of the {@link NetworkError} class.
+   * Create a new {@link NetworkError}.
    * @param message - The error message.
    * @param status - The HTTP status code.
    */
@@ -1542,13 +1493,10 @@ export class NetworkError extends Error {
     super(message)
   }
 }
+
 /** Error class for when the user is not authorized to access a resource. */
 export class NotAuthorizedError extends NetworkError {}
 
-// ===============
-// === Backend ===
-// ===============
-
 /** Interface for sending requests to a backend that manages assets and runs projects. */
 export default abstract class Backend {
   abstract readonly type: BackendType
@@ -1765,15 +1713,11 @@ export default abstract class Backend {
   abstract resolveProjectAssetPath(projectId: ProjectId, relativePath: string): Promise<string>
 }
 
-// ==============================
-// ====== Custom Errors =========
-// ==============================
+export { Backend }
 
 /** Error thrown when a directory does not exist. */
 export class DirectoryDoesNotExistError extends Error {
-  /**
-   * Create a new instance of the {@link DirectoryDoesNotExistError} class.
-   */
+  /** Create a new {@link DirectoryDoesNotExistError}. */
   constructor() {
     super('Directory does not exist.')
   }
diff --git a/app/gui/src/dashboard/utilities/__tests__/error.test.ts b/app/common/src/utilities/__tests__/error.test.ts
similarity index 79%
rename from app/gui/src/dashboard/utilities/__tests__/error.test.ts
rename to app/common/src/utilities/__tests__/error.test.ts
index a5431219e714..89c37aab1c4d 100644
--- a/app/gui/src/dashboard/utilities/__tests__/error.test.ts
+++ b/app/common/src/utilities/__tests__/error.test.ts
@@ -1,11 +1,7 @@
 /** @file Tests for `error.ts`. */
 import * as v from 'vitest'
 
-import * as error from '#/utilities/error'
-
-// =============
-// === Tests ===
-// =============
+import { tryGetMessage } from '../error'
 
 const MESSAGE = 'A custom error message.'
 
@@ -17,7 +13,7 @@ v.describe('`error.tryGetMessage`', () => {
     { errorObject: {}, message: null },
     { errorObject: null, message: null },
   ])('should correctly parse error objects', ({ errorObject, message }) => {
-    v.expect(error.tryGetMessage<unknown>(errorObject)).toBe(message)
+    v.expect(tryGetMessage<unknown>(errorObject)).toBe(message)
   })
 
   v.test.each([
@@ -29,7 +25,7 @@ v.describe('`error.tryGetMessage`', () => {
   ])(
     'should return default message if failed to extract it from the error object',
     ({ errorObject, message, defaultMessage }) => {
-      v.expect(error.tryGetMessage<unknown, string>(errorObject, defaultMessage)).toBe(message)
+      v.expect(tryGetMessage<unknown, string>(errorObject, defaultMessage)).toBe(message)
     },
   )
 })
diff --git a/app/gui/src/dashboard/utilities/convertCSSUnits.ts b/app/common/src/utilities/convertCSSUnits.ts
similarity index 93%
rename from app/gui/src/dashboard/utilities/convertCSSUnits.ts
rename to app/common/src/utilities/convertCSSUnits.ts
index e2e333e4ef5f..ba05b0d38932 100644
--- a/app/gui/src/dashboard/utilities/convertCSSUnits.ts
+++ b/app/common/src/utilities/convertCSSUnits.ts
@@ -4,7 +4,6 @@
 const DUMMY_RECT = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
 const WIDTH = DUMMY_RECT.width.baseVal
 const MODES = {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
   '%': WIDTH.SVG_LENGTHTYPE_PERCENTAGE,
   em: WIDTH.SVG_LENGTHTYPE_EMS,
   ex: WIDTH.SVG_LENGTHTYPE_EXS,
@@ -55,7 +54,6 @@ export function convertCSSUnitString(
       }
       default: {
         // This is SAFE, as the regex ensures that the only valid values are CSS units.
-        // eslint-disable-next-line no-restricted-syntax
         return convertCSSUnits(numericValue, from as CSSUnit, to, parent)
       }
     }
diff --git a/app/common/src/utilities/data/__tests__/array.test.ts b/app/common/src/utilities/data/__tests__/array.test.ts
index ac236d8c67e1..70108c13e513 100644
--- a/app/common/src/utilities/data/__tests__/array.test.ts
+++ b/app/common/src/utilities/data/__tests__/array.test.ts
@@ -1,5 +1,7 @@
+import * as fc from '@fast-check/vitest'
 import { expect, test } from 'vitest'
-import * as array from '../array'
+
+import { includesPredicate, shallowEqual, transpose } from '../array'
 
 interface TransposeCase {
   matrix: number[][]
@@ -26,6 +28,28 @@ const transposeCases: TransposeCase[] = [
 ]
 
 test.each(transposeCases)('transpose: case %#', ({ matrix, expected }) => {
-  const transposed = array.transpose(matrix)
+  const transposed = transpose(matrix)
   expect(transposed).toStrictEqual(expected)
 })
+
+fc.test.prop({ theArray: fc.fc.array(fc.fc.anything()) })(
+  '`array.shallowEqual`',
+  ({ theArray }) => {
+    expect(shallowEqual(theArray, [...theArray]))
+  },
+)
+
+fc.test.prop({
+  theArray: fc.fc.array(fc.fc.anything(), { minLength: 1 }).chain(theArray =>
+    fc.fc.record({
+      theArray: fc.fc.constant(theArray),
+      i: fc.fc.nat(theArray.length - 1),
+    }),
+  ),
+})('`array.includesPredicate`', ({ theArray: { theArray, i } }) => {
+  expect(
+    includesPredicate(theArray)(theArray[i]),
+    `'${JSON.stringify(theArray)}' should include '${JSON.stringify(theArray[i])}'`,
+  ).toBe(true)
+  expect(includesPredicate(theArray)({}), 'unique object should not be in array').toBe(false)
+})
diff --git a/app/gui/src/dashboard/utilities/__tests__/dateTime.test.ts b/app/common/src/utilities/data/__tests__/dateTime.test.ts
similarity index 78%
rename from app/gui/src/dashboard/utilities/__tests__/dateTime.test.ts
rename to app/common/src/utilities/data/__tests__/dateTime.test.ts
index 4a01148e6dfd..a7e7a6c4385b 100644
--- a/app/gui/src/dashboard/utilities/__tests__/dateTime.test.ts
+++ b/app/common/src/utilities/data/__tests__/dateTime.test.ts
@@ -1,36 +1,34 @@
 /** @file Tests for `dateTime.ts`. */
-import * as v from 'vitest'
+import { expect, test } from 'vitest'
 
-import * as dateTime from '#/utilities/dateTime'
-
-// =============
-// === Tests ===
-// =============
+import { formatDateTimeChatFriendly, toRfc3339 } from '../dateTime'
 
 /** The number of milliseconds in a minute. */
 const MIN_MS = 60_000
+
 /** Remove all UTC offset from a {@link Date}. Daylight savings-aware. */
 function convertUTCToLocal(date: Date) {
   const offsetMins = date.getTimezoneOffset()
   return new Date(Number(date) + offsetMins * MIN_MS)
 }
+
 /** Adds a UTC offset to a {@link Date}. Daylight savings-aware. */
 function convertLocalToUTC(date: Date) {
   const offsetMins = date.getTimezoneOffset()
   return new Date(Number(date) - offsetMins * MIN_MS)
 }
 
-v.test.each([
+test.each([
   { date: new Date(0), string: '1970-01-01T00:00:00.000Z' },
   {
     date: convertLocalToUTC(new Date(2001, 1, 3)),
     string: '2001-02-03T00:00:00.000Z',
   },
 ])('Date and time serialization', ({ date, string }) => {
-  v.expect(dateTime.toRfc3339(date)).toBe(string)
+  expect(toRfc3339(date)).toBe(string)
 })
 
-v.test.each([
+test.each([
   {
     date: convertUTCToLocal(new Date(0)),
     chatString: `01/01/1970 00:00 AM`,
@@ -40,5 +38,5 @@ v.test.each([
     chatString: `03/02/2001 00:00 AM`,
   },
 ])('Date and time serialization', ({ date, chatString }) => {
-  v.expect(dateTime.formatDateTimeChatFriendly(date)).toBe(chatString)
+  expect(formatDateTimeChatFriendly(date)).toBe(chatString)
 })
diff --git a/app/gui/src/dashboard/utilities/__tests__/parseUserEmails.test.ts b/app/common/src/utilities/data/__tests__/email.test.ts
similarity index 88%
rename from app/gui/src/dashboard/utilities/__tests__/parseUserEmails.test.ts
rename to app/common/src/utilities/data/__tests__/email.test.ts
index 3bd99e15ed8c..847395d8ef50 100644
--- a/app/gui/src/dashboard/utilities/__tests__/parseUserEmails.test.ts
+++ b/app/common/src/utilities/data/__tests__/email.test.ts
@@ -1,10 +1,10 @@
 /** @file Tests for the `parseUserEmails` function. */
-import * as vitest from 'vitest'
+import { describe, expect, it } from 'vitest'
 
-import * as parseUserEmails from '#/utilities/parseUserEmails'
+import { parseUserEmails } from '../email'
 
-vitest.describe('parseUserEmails', () => {
-  vitest.it.each([
+describe('parseUserEmails', () => {
+  it.each([
     ['john.doe@domain.com', { entries: [{ email: 'john.doe@domain.com' }] }],
     [
       'john.doe@domain.com, jane.doe@domain.com',
@@ -50,7 +50,7 @@ vitest.describe('parseUserEmails', () => {
       { entries: [{ email: 'john.doe@domain.com' }, { email: 'jane.doe@domain.com' }] },
     ],
   ])('should correctly parse email addresses in different formats', (given, expected) => {
-    const result = parseUserEmails.parseUserEmails(given)
-    vitest.expect(result).toEqual(expected)
+    const result = parseUserEmails(given)
+    expect(result).toEqual(expected)
   })
 })
diff --git a/app/common/src/utilities/data/__tests__/fileInfo.test.ts b/app/common/src/utilities/data/__tests__/fileInfo.test.ts
new file mode 100644
index 000000000000..0c6e2a2fc778
--- /dev/null
+++ b/app/common/src/utilities/data/__tests__/fileInfo.test.ts
@@ -0,0 +1,10 @@
+/** @file Tests for `fileInfo.ts`. */
+import { expect, test } from 'vitest'
+
+import { fileExtension } from '../fileInfo'
+
+test('fileExtension', () => {
+  expect(fileExtension('image.png')).toBe('png')
+  expect(fileExtension('.gif')).toBe('gif')
+  expect(fileExtension('fileInfo.spec.js')).toBe('js')
+})
diff --git a/app/common/src/utilities/data/__tests__/iterator.test.ts b/app/common/src/utilities/data/__tests__/iterator.test.ts
index 6bf76baff14b..9fd5ba9398bb 100644
--- a/app/common/src/utilities/data/__tests__/iterator.test.ts
+++ b/app/common/src/utilities/data/__tests__/iterator.test.ts
@@ -1,5 +1,17 @@
 import { expect, test } from 'vitest'
-import * as iter from '../iter'
+
+import {
+  chain,
+  count as countFn,
+  empty,
+  filter,
+  filterDefined,
+  last as lastFn,
+  range,
+  tryGetSoleValue,
+  zip,
+  zipLongest,
+} from '../iter'
 
 interface IteratorCase<T> {
   iterable: Iterable<T>
@@ -12,42 +24,42 @@ interface IteratorCase<T> {
 function makeCases(): IteratorCase<unknown>[] {
   return [
     {
-      iterable: iter.empty(),
+      iterable: empty(),
       soleValue: undefined,
       first: undefined,
       last: undefined,
       count: 0,
     },
     {
-      iterable: iter.chain(iter.empty(), iter.empty()),
+      iterable: chain(empty(), empty()),
       soleValue: undefined,
       first: undefined,
       last: undefined,
       count: 0,
     },
     {
-      iterable: iter.chain(iter.empty(), ['a'], iter.empty()),
+      iterable: chain(empty(), ['a'], empty()),
       soleValue: 'a',
       first: 'a',
       last: 'a',
       count: 1,
     },
     {
-      iterable: iter.range(10, 11),
+      iterable: range(10, 11),
       soleValue: 10,
       first: 10,
       last: 10,
       count: 1,
     },
     {
-      iterable: iter.range(10, 20),
+      iterable: range(10, 20),
       soleValue: undefined,
       first: 10,
       last: 19,
       count: 10,
     },
     {
-      iterable: iter.range(20, 10),
+      iterable: range(20, 10),
       soleValue: undefined,
       first: 20,
       last: 11,
@@ -75,56 +87,56 @@ function makeCases(): IteratorCase<unknown>[] {
       count: 2,
     },
     {
-      iterable: iter.filterDefined([undefined, 'a', undefined, 'b', undefined]),
+      iterable: filterDefined([undefined, 'a', undefined, 'b', undefined]),
       soleValue: undefined,
       first: 'a',
       last: 'b',
       count: 2,
     },
     {
-      iterable: iter.filter([7, 'a', 8, 'b', 9], el => typeof el === 'string'),
+      iterable: filter([7, 'a', 8, 'b', 9], el => typeof el === 'string'),
       soleValue: undefined,
       first: 'a',
       last: 'b',
       count: 2,
     },
     {
-      iterable: iter.zip(['a', 'b'], iter.range(1, 2)),
+      iterable: zip(['a', 'b'], range(1, 2)),
       soleValue: ['a', 1],
       first: ['a', 1],
       last: ['a', 1],
       count: 1,
     },
     {
-      iterable: iter.zip(['a', 'b'], iter.range(1, 3)),
+      iterable: zip(['a', 'b'], range(1, 3)),
       soleValue: undefined,
       first: ['a', 1],
       last: ['b', 2],
       count: 2,
     },
     {
-      iterable: iter.zip(['a', 'b'], iter.range(1, 4)),
+      iterable: zip(['a', 'b'], range(1, 4)),
       soleValue: undefined,
       first: ['a', 1],
       last: ['b', 2],
       count: 2,
     },
     {
-      iterable: iter.zipLongest(['a', 'b'], iter.range(1, 2)),
+      iterable: zipLongest(['a', 'b'], range(1, 2)),
       soleValue: undefined,
       first: ['a', 1],
       last: ['b', undefined],
       count: 2,
     },
     {
-      iterable: iter.zipLongest(['a', 'b'], iter.range(1, 3)),
+      iterable: zipLongest(['a', 'b'], range(1, 3)),
       soleValue: undefined,
       first: ['a', 1],
       last: ['b', 2],
       count: 2,
     },
     {
-      iterable: iter.zipLongest(['a', 'b'], iter.range(1, 4)),
+      iterable: zipLongest(['a', 'b'], range(1, 4)),
       soleValue: undefined,
       first: ['a', 1],
       last: [undefined, 3],
@@ -134,13 +146,13 @@ function makeCases(): IteratorCase<unknown>[] {
 }
 
 test.each(makeCases())('tryGetSoleValue: case %#', ({ iterable, soleValue }) => {
-  expect(iter.tryGetSoleValue(iterable)).toEqual(soleValue)
+  expect(tryGetSoleValue(iterable)).toEqual(soleValue)
 })
 
 test.each(makeCases())('last: case %#', ({ iterable, last }) => {
-  expect(iter.last(iterable)).toEqual(last)
+  expect(lastFn(iterable)).toEqual(last)
 })
 
 test.each(makeCases())('count: case %#', ({ iterable, count }) => {
-  expect(iter.count(iterable)).toEqual(count)
+  expect(countFn(iterable)).toEqual(count)
 })
diff --git a/app/common/src/utilities/data/dateTime.ts b/app/common/src/utilities/data/dateTime.ts
index 1653fb145c14..a20341b0f827 100644
--- a/app/common/src/utilities/data/dateTime.ts
+++ b/app/common/src/utilities/data/dateTime.ts
@@ -1,10 +1,6 @@
 /** @file Utilities for manipulating and displaying dates and times. */
 import * as newtype from './newtype'
 
-// =================
-// === Constants ===
-// =================
-
 /** The number of hours in half a day. This is used to get the number of hours for AM/PM time. */
 const HALF_DAY_HOURS = 12
 
@@ -24,10 +20,6 @@ export const MONTH_NAMES = [
   'December',
 ]
 
-// ================
-// === DateTime ===
-// ================
-
 /** A string with date and time, following the RFC3339 specification. */
 export type Rfc3339DateTime = newtype.Newtype<string, 'Rfc3339DateTime'>
 /** Create a {@link Rfc3339DateTime}. */
diff --git a/app/gui/src/dashboard/utilities/parseUserEmails.ts b/app/common/src/utilities/data/email.ts
similarity index 89%
rename from app/gui/src/dashboard/utilities/parseUserEmails.ts
rename to app/common/src/utilities/data/email.ts
index 330e4c6d630f..ee2e9c112bfc 100644
--- a/app/gui/src/dashboard/utilities/parseUserEmails.ts
+++ b/app/common/src/utilities/data/email.ts
@@ -21,8 +21,8 @@ export interface ParseUserEmailsEntry {
 export function parseUserEmails(emailsString: string): ParseUserEmailsResult {
   const entries = emailsString
     .split(/[,;\s\n]+/)
-    .map((entry) => entry.trim())
-    .filter((entry) => entry.length > 0)
-    .map((email) => ({ email }))
+    .map(entry => entry.trim())
+    .filter(entry => entry.length > 0)
+    .map(email => ({ email }))
   return { entries }
 }
diff --git a/app/gui/src/dashboard/utilities/fileInfo.ts b/app/common/src/utilities/data/fileInfo.ts
similarity index 92%
rename from app/gui/src/dashboard/utilities/fileInfo.ts
rename to app/common/src/utilities/data/fileInfo.ts
index d5415a1d4cd1..6d053248fc89 100644
--- a/app/gui/src/dashboard/utilities/fileInfo.ts
+++ b/app/common/src/utilities/data/fileInfo.ts
@@ -1,9 +1,5 @@
 /** @file Utility functions for extracting and manipulating file information. */
 
-// ================================
-// === Extract file information ===
-// ================================
-
 /** Return just the file name, including the extension. */
 export function getFileName(filePath: string) {
   return filePath.match(/(?:[/\\]|^)([^/\\]+)[/\\]?$/)?.[1] ?? filePath
diff --git a/app/common/src/utilities/data/newtype.ts b/app/common/src/utilities/data/newtype.ts
index 5510a552616a..1b3a768f996d 100644
--- a/app/common/src/utilities/data/newtype.ts
+++ b/app/common/src/utilities/data/newtype.ts
@@ -1,9 +1,5 @@
 /** @file Emulates `newtype`s in TypeScript. */
 
-// ===============
-// === Newtype ===
-// ===============
-
 /** An interface specifying the variant of a newtype. */
 type NewtypeVariant<TypeName extends string> = {
   readonly _$type: TypeName
diff --git a/app/gui/src/dashboard/utilities/path.ts b/app/common/src/utilities/data/path.ts
similarity index 58%
rename from app/gui/src/dashboard/utilities/path.ts
rename to app/common/src/utilities/data/path.ts
index d3d5638fa126..b1e2dccc1cd5 100644
--- a/app/gui/src/dashboard/utilities/path.ts
+++ b/app/common/src/utilities/data/path.ts
@@ -1,44 +1,26 @@
 /** @file Functions for manipulating and querying paths. */
-import * as detect from 'enso-common/src/detect'
-
-import * as newtype from '#/utilities/newtype'
-
-// ============
-// === Path ===
-// ============
+import { isOnWindows } from '../../detect'
+import { newtypeConstructor, type Newtype } from './newtype'
 
 /** A filesystem path. */
-export type Path = newtype.Newtype<string, 'Path'>
+export type Path = Newtype<string, 'Path'>
 /** Create a {@link Path}. */
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export const Path = newtype.newtypeConstructor<Path>()
-
-// ================
-// === joinPath ===
-// ================
+export const Path = newtypeConstructor<Path>()
 
 /** Construct a {@link Path} from an existing {@link Path} of the parent directory. */
 export function joinPath(directoryPath: Path, fileName: string) {
   return Path(`${directoryPath}/${fileName}`)
 }
 
-// ========================
-// === normalizeSlashes ===
-// ========================
-
 /** Return the path, with backslashes (on Windows only) normalized to forward slashes. */
 export function normalizeSlashes(path: string): Path {
-  if (detect.isOnWindows()) {
+  if (isOnWindows()) {
     return Path(path.replace(/\\/g, '/'))
   } else {
     return Path(path)
   }
 }
 
-// ===========================
-// === getDirectoryAndName ===
-// ===========================
-
 /** Split a {@link Path} inito the path of its parent directory, and its file name. */
 export function getDirectoryAndName(path: Path) {
   const [, directoryPath = '', fileName = ''] = path.match(/^(.+)[/]([^/]+)$/) ?? []
diff --git a/app/common/src/utilities/data/string.ts b/app/common/src/utilities/data/string.ts
index c2aeebbc7db6..e59ebc15bd1c 100644
--- a/app/common/src/utilities/data/string.ts
+++ b/app/common/src/utilities/data/string.ts
@@ -1,2 +1,48 @@
+/** @file Utilities for manipulating strings. */
+
 /** See http://www.unicode.org/reports/tr18/#Line_Boundaries */
 export const LINE_BOUNDARIES = /\r\n|[\n\v\f\r\x85\u2028\u2029]/g
+
+/** Return the given string, but with the first letter uppercased. */
+export function capitalizeFirst(string: string) {
+  return string.replace(/^./, match => match.toUpperCase())
+}
+
+/** Sanitizes a string for use as a regex. */
+export function regexEscape(string: string) {
+  return string.replace(/[\\^$.|?*+()[{]/g, '\\$&')
+}
+
+/** Whether a string consists only of whitespace, meaning that the string will not be visible. */
+export function isWhitespaceOnly(string: string) {
+  return /^\s*$/.test(string)
+}
+
+/**
+ * Inserts spaces between every word, and capitalizes the first word.
+ * DOES NOT make particles lowercase.
+ */
+export function camelCaseToTitleCase(string: string) {
+  return string.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/^./, c => c.toUpperCase())
+}
+
+/**
+ * Return `1` if `a > b`, `-1` if `a < b`, and `0` if `a === b`.
+ * Falls back to a case-sensitive comparison if the case-insensitive comparison returns `0`.
+ */
+export function compareCaseInsensitive(a: string, b: string) {
+  const aLower = a.toLowerCase()
+  const bLower = b.toLowerCase()
+  return (
+    aLower > bLower ? 1
+    : aLower < bLower ? -1
+    : a > b ? 1
+    : a < b ? -1
+    : 0
+  )
+}
+
+/** Return a normalized name to check for duplicates. */
+export function normalizeName(name: string) {
+  return name.trim().replace(/\s+/g, ' ').toLowerCase()
+}
diff --git a/app/gui/src/dashboard/utilities/download.ts b/app/common/src/utilities/download.ts
similarity index 86%
rename from app/gui/src/dashboard/utilities/download.ts
rename to app/common/src/utilities/download.ts
index 767c44f71e31..f422c79d1a8d 100644
--- a/app/gui/src/dashboard/utilities/download.ts
+++ b/app/common/src/utilities/download.ts
@@ -1,9 +1,5 @@
 /** @file A function to initiate a download. */
 
-// ================
-// === download ===
-// ================
-
 /** Initiate a download for the specified url. */
 export function download(url: string, name?: string | null) {
   url = new URL(url, location.toString()).toString()
@@ -16,10 +12,6 @@ export function download(url: string, name?: string | null) {
   document.body.removeChild(link)
 }
 
-// ===========================
-// === downloadWithHeaders ===
-// ===========================
-
 /** Initiate a download with the specified headers, for the specified url. */
 export async function downloadWithHeaders(
   url: string,
diff --git a/app/common/src/utilities/error.ts b/app/common/src/utilities/error.ts
new file mode 100644
index 000000000000..562d35fd36a9
--- /dev/null
+++ b/app/common/src/utilities/error.ts
@@ -0,0 +1,147 @@
+/** @file Contains useful error types common across the module. */
+
+/** Evaluates the given type only if it the exact same type as `Expected`. */
+type MustBe<T, Expected> =
+  (<U>() => U extends T ? 1 : 2) extends <U>() => U extends Expected ? 1 : 2 ? T : never
+
+/**
+ * Used to enforce a parameter must be `any`. This is useful to verify that the value comes
+ * from an API that returns `any`.
+ */
+type MustBeAny<T> =
+  never extends T ?
+    0 extends T & 1 ?
+      T
+    : never
+  : never
+
+/**
+ * Enforces that a parameter must not have a known type. This means the only types allowed are
+ * `{}`, `object`, `unknown` and `any`.
+ */
+export type MustNotBeKnown<T> =
+  | MustBe<T, NonNullable<unknown>>
+  | MustBe<T, object>
+  | MustBe<T, unknown>
+  | MustBeAny<T>
+
+/**
+ * Extracts the `message` property of a value if it is a string. Intended to be used on
+ * {@link Error}s.
+ */
+export function tryGetMessage<T, DefaultMessage extends string | null = null>(
+  error: MustNotBeKnown<T>,
+  defaultMessage: DefaultMessage = null as DefaultMessage,
+): DefaultMessage | string {
+  const unknownError: unknown = error
+  return (
+      unknownError != null &&
+        typeof unknownError === 'object' &&
+        'message' in unknownError &&
+        typeof unknownError.message === 'string'
+    ) ?
+      unknownError.message
+    : defaultMessage
+}
+
+/** Extracts the `error` property of a value if it is a string. */
+export function tryGetError<T>(error: MustNotBeKnown<T>): string | null {
+  const unknownError: unknown = error
+  return (
+      unknownError != null &&
+        typeof unknownError === 'object' &&
+        'error' in unknownError &&
+        typeof unknownError.error === 'string'
+    ) ?
+      unknownError.error
+    : null
+}
+
+/** Extracts the `stack` property of a value if it is a string. Intended to be used on {@link Error}s. */
+export function tryGetStack<T, DefaultMessage extends string | null = null>(
+  error: MustNotBeKnown<T>,
+  defaultMessage: DefaultMessage = null as DefaultMessage,
+): DefaultMessage | string {
+  const unknownError: unknown = error
+  return (
+      unknownError != null &&
+        typeof unknownError === 'object' &&
+        'stack' in unknownError &&
+        typeof unknownError.stack === 'string'
+    ) ?
+      unknownError.stack
+    : defaultMessage
+}
+
+/**
+ * Like {@link tryGetMessage} but return the string representation of the value if it is not an
+ * {@link Error}.
+ */
+export function getMessageOrToString<T>(error: MustNotBeKnown<T>) {
+  return tryGetMessage(error) ?? String(error)
+}
+
+/**
+ * An error used to indicate when an unreachable case is hit in a `switch` or `if` statement.
+ *
+ * TypeScript is sometimes unable to determine if we're exhaustively matching in a `switch` or `if`
+ * statement, so we introduce this error in the `default` case (or equivalent) to ensure that we at
+ * least find out at runtime if we've missed a case, or forgotten to update the code when we add a
+ * new case.
+ */
+export class UnreachableCaseError extends Error {
+  /**
+   * Creates an `UnreachableCaseError`.
+   * The parameter should be `never` since it is unreachable assuming all logic is sound.
+   */
+  constructor(value: never) {
+    super(`Unreachable case: ${JSON.stringify(value)}`)
+  }
+}
+
+/**
+ * A function that throws an {@link UnreachableCaseError} so that it can be used
+ * in an expression.
+ * @throws {UnreachableCaseError} Always.
+ */
+export function unreachable(value: never): never {
+  throw new UnreachableCaseError(value)
+}
+
+/**
+ * Assert that a value is truthy.
+ * @throws {Error} when the value is not truthy.
+ */
+// These literals are REQUIRED, as they are falsy.
+export function assert<T>(makeValue: () => T | '' | 0 | 0n | false | null | undefined): T {
+  const result = makeValue()
+  // This function explicitly checks for truthiness.
+  if (!result) {
+    throw new Error(
+      'Assertion failed: `' +
+        makeValue.toString().replace(/^\s*[(].*?[)]\s*=>\s*/, '') +
+        '` should not be `null`.',
+    )
+  } else {
+    return result
+  }
+}
+
+/** Checks if the given error is a JavaScript execution error. */
+export function isJSError(error: unknown): boolean {
+  if (error instanceof TypeError) {
+    return true
+  } else if (error instanceof ReferenceError) {
+    return true
+  } else if (error instanceof SyntaxError) {
+    return true
+  } else if (error instanceof RangeError) {
+    return true
+  } else if (error instanceof URIError) {
+    return true
+  } else if (error instanceof EvalError) {
+    return true
+  } else {
+    return false
+  }
+}
diff --git a/app/common/src/utilities/functions.ts b/app/common/src/utilities/functions.ts
new file mode 100644
index 000000000000..02cc3f9e2619
--- /dev/null
+++ b/app/common/src/utilities/functions.ts
@@ -0,0 +1,4 @@
+/** @file A collection of utilities that work with functions. */
+
+/** A stable reference to a function that does nothing. */
+export const noop: (...args: any[]) => void = () => {}
diff --git a/app/gui/src/dashboard/utilities/github.ts b/app/common/src/utilities/github.ts
similarity index 87%
rename from app/gui/src/dashboard/utilities/github.ts
rename to app/common/src/utilities/github.ts
index c40cd30c7628..5e0f68f2fcf4 100644
--- a/app/gui/src/dashboard/utilities/github.ts
+++ b/app/common/src/utilities/github.ts
@@ -1,20 +1,10 @@
 /** @file Utilities getting various metadata about the app. */
-import * as common from 'enso-common'
-import * as detect from 'enso-common/src/detect'
-
-/* eslint-disable @typescript-eslint/naming-convention */
-
-// =================
-// === Constants ===
-// =================
+import * as common from '../'
+import * as detect from '../detect'
 
 const ONE_HOUR_MS = 3_600_000
 export const LATEST_RELEASE_PAGE_URL = 'https://github.com/enso-org/enso/releases/latest'
 
-// ==================
-// === GitHub API ===
-// ==================
-
 /** Metadata for a GitHub user. */
 interface GitHubSimpleUser {
   readonly name?: string
@@ -89,10 +79,6 @@ interface GitHubRelease {
   readonly assets: GitHubReleaseAsset[]
 }
 
-// =====================
-// === CachedRelease ===
-// =====================
-
 /** Metadata for a GitHub release, plus metadata for caching purposes. */
 interface CachedRelease {
   readonly lastFetchEpochMs: number
@@ -104,7 +90,6 @@ const LOCAL_STORAGE_KEY = `${common.PRODUCT_NAME.toLowerCase()}-cached-release`
 /** Gets the metadata for the latest release of the app. */
 export async function getLatestRelease() {
   const savedCachedRelease = localStorage.getItem(LOCAL_STORAGE_KEY)
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const cachedRelease: CachedRelease | null =
     savedCachedRelease != null ? JSON.parse(savedCachedRelease) : null
   if (cachedRelease != null && Number(new Date()) - cachedRelease.lastFetchEpochMs < ONE_HOUR_MS) {
@@ -116,7 +101,6 @@ export async function getLatestRelease() {
         ['X-GitHub-Api-Version', '2022-11-28'],
       ],
     })
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const data: GitHubRelease = await response.json()
     localStorage.setItem(
       LOCAL_STORAGE_KEY,
@@ -145,7 +129,7 @@ const appExtension = (() => {
 export async function getDownloadUrl() {
   const assets = (await getLatestRelease()).assets
   return (
-    assets.find((item) => item.browser_download_url.endsWith(appExtension))?.browser_download_url ??
+    assets.find(item => item.browser_download_url.endsWith(appExtension))?.browser_download_url ??
     null
   )
 }
diff --git a/app/common/src/utilities/permissions.ts b/app/common/src/utilities/permissions.ts
index bbdb0b5309a1..a722705a6dfc 100644
--- a/app/common/src/utilities/permissions.ts
+++ b/app/common/src/utilities/permissions.ts
@@ -1,10 +1,6 @@
 /** @file Utilities for working with permissions. */
 import type * as text from 'enso-common/src/text'
 
-// ========================
-// === PermissionAction ===
-// ========================
-
 /** Backend representation of user permission types. */
 export enum PermissionAction {
   own = 'Own',
@@ -31,10 +27,6 @@ export const PERMISSION_ACTION_CAN_EXECUTE: Readonly<Record<PermissionAction, bo
   [PermissionAction.viewAndExec]: true,
 }
 
-// ==================
-// === Permission ===
-// ==================
-
 /** Type of permission. This determines what kind of border is displayed. */
 export enum Permission {
   owner = 'owner',
@@ -169,10 +161,6 @@ export function toPermissionAction(permissions: Permissions): PermissionAction {
   }
 }
 
-// ===================
-// === Permissions ===
-// ===================
-
 /** Properties common to all permissions. */
 interface BasePermissions<T extends Permission> {
   readonly type: T
diff --git a/app/gui/integration-test/dashboard/actions/api.ts b/app/gui/integration-test/dashboard/actions/api.ts
index 9944c8bbc14f..899200cbff52 100644
--- a/app/gui/integration-test/dashboard/actions/api.ts
+++ b/app/gui/integration-test/dashboard/actions/api.ts
@@ -1,15 +1,15 @@
 /** @file The mock API. */
 import * as test from '@playwright/test'
 
-import * as backend from '#/services/Backend'
+import * as backend from 'enso-common/src/services/Backend'
+import * as dateTime from 'enso-common/src/utilities/data/dateTime'
+import * as object from 'enso-common/src/utilities/data/object'
+import * as permissions from 'enso-common/src/utilities/permissions'
+import * as uniqueString from 'enso-common/src/utilities/uniqueString'
+
 import type * as remoteBackend from '#/services/RemoteBackend'
 import * as remoteBackendPaths from '#/services/remoteBackendPaths'
 
-import * as dateTime from '#/utilities/dateTime'
-import * as object from '#/utilities/object'
-import * as permissions from '#/utilities/permissions'
-import * as uniqueString from 'enso-common/src/utilities/uniqueString'
-
 import * as actions from '.'
 
 import { readFileSync } from 'node:fs'
diff --git a/app/gui/integration-test/dashboard/assetPanel.spec.ts b/app/gui/integration-test/dashboard/assetPanel.spec.ts
index 9282cf573724..dbb419a92567 100644
--- a/app/gui/integration-test/dashboard/assetPanel.spec.ts
+++ b/app/gui/integration-test/dashboard/assetPanel.spec.ts
@@ -1,9 +1,8 @@
 /** @file Tests for the asset panel. */
 import { expect, test, type Page } from '@playwright/test'
 
-import { EmailAddress, UserId } from '#/services/Backend'
-
-import { PermissionAction } from '#/utilities/permissions'
+import { EmailAddress, UserId } from 'enso-common/src/services/Backend'
+import { PermissionAction } from 'enso-common/src/utilities/permissions'
 
 import { mockAllAndLogin } from './actions'
 
diff --git a/app/gui/integration-test/dashboard/assetSearchBar.spec.ts b/app/gui/integration-test/dashboard/assetSearchBar.spec.ts
index 5ca65d355957..22bd035a7ba5 100644
--- a/app/gui/integration-test/dashboard/assetSearchBar.spec.ts
+++ b/app/gui/integration-test/dashboard/assetSearchBar.spec.ts
@@ -1,7 +1,7 @@
 /** @file Test the search bar and its suggestions. */
 import { expect, test, type Page } from '@playwright/test'
 
-import { COLORS } from '#/services/Backend'
+import { COLORS } from 'enso-common/src/services/Backend'
 
 import { mockAllAndLogin } from './actions'
 
diff --git a/app/gui/integration-test/dashboard/labels.spec.ts b/app/gui/integration-test/dashboard/labels.spec.ts
index 00c15d1e8bcf..fba6bee0ed1c 100644
--- a/app/gui/integration-test/dashboard/labels.spec.ts
+++ b/app/gui/integration-test/dashboard/labels.spec.ts
@@ -1,7 +1,7 @@
 /** @file Test dragging of labels. */
 import { expect, test, type Locator, type Page } from '@playwright/test'
 
-import { COLORS } from '#/services/Backend'
+import { COLORS } from 'enso-common/src/services/Backend'
 
 import { mockAllAndLogin } from './actions'
 
diff --git a/app/gui/integration-test/dashboard/sort.spec.ts b/app/gui/integration-test/dashboard/sort.spec.ts
index ebcfdbdac550..f639e0b35976 100644
--- a/app/gui/integration-test/dashboard/sort.spec.ts
+++ b/app/gui/integration-test/dashboard/sort.spec.ts
@@ -1,7 +1,7 @@
 /** @file Test sorting of assets columns. */
 import { expect, test, type Locator } from '@playwright/test'
 
-import { toRfc3339 } from '#/utilities/dateTime'
+import { toRfc3339 } from 'enso-common/src/utilities/data/dateTime'
 
 import { mockAllAndLogin } from './actions'
 
diff --git a/app/gui/src/dashboard/App.tsx b/app/gui/src/dashboard/App.tsx
index fe8d68ee04e0..eea85381a63f 100644
--- a/app/gui/src/dashboard/App.tsx
+++ b/app/gui/src/dashboard/App.tsx
@@ -5,16 +5,16 @@
  * # Providers
  *
  * The {@link App} component is responsible for defining the global context used by child
- * components. For example, it defines a {@link toastify.ToastContainer}, which is used to display temporary
+ * components. For example, it defines a {@link ToastContainer}, which is used to display temporary
  * notifications to the user. These global components are defined at the top of the {@link App} so
  * that they are available to all of the child components.
  *
- * The {@link App} also defines various providers (e.g., {@link authProvider.AuthProvider}).
+ * The {@link App} also defines various providers (e.g., {@link AuthProvider}).
  * Providers are a React-specific concept that allows components to access global state without
  * having to pass it down through the component tree. For example, the
- * {@link authProvider.AuthProvider} wraps the entire application, and provides the context
- * necessary for child components to use the {@link authProvider.useAuth} hook. The
- * {@link authProvider.useAuth} hook lets child components access the user's authentication session
+ * {@link AuthProvider} wraps the entire application, and provides the context
+ * necessary for child components to use the {@link useAuth} hook. The
+ * {@link useAuth} hook lets child components access the user's authentication session
  * (i.e., email, username, etc.) and it also provides methods for signing the user in, etc.
  *
  * Providers consist of a provider component that wraps the application, a context object defined
@@ -25,40 +25,65 @@
  * # Routes and Authentication
  *
  * The {@link AppRouter} component defines the layout of the application, in terms of navigation. It
- * consists of a list of {@link router.Route}s, as well as the HTTP pathnames that the
- * {@link router.Route}s can be accessed by.
+ * consists of a list of {@link Route}s, as well as the HTTP pathnames that the
+ * {@link Route}s can be accessed by.
  *
- * The {@link router.Route}s are grouped by authorization level. Some routes are
+ * The {@link Route}s are grouped by authorization level. Some routes are
  * accessed by unauthenticated (i.e., not signed in) users. Some routes are accessed by partially
- * authenticated users (c.f. {@link authProvider.PartialUserSession}). That is, users who have
+ * authenticated users (c.f. {@link PartialUserSession}). That is, users who have
  * signed up but who have not completed email verification or set a username. The remaining
- * {@link router.Route}s require fully authenticated users (c.f.
- * {@link authProvider.FullUserSession}).
+ * {@link Route}s require fully authenticated users (c.f.
+ * {@link FullUserSession}).
  */
-import * as React from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
-import * as reactQuery from '@tanstack/react-query'
-import * as router from 'react-router-dom'
-import * as toastify from 'react-toastify'
+import { QueryClient, useQuery, useSuspenseQuery } from '@tanstack/react-query'
+import { BrowserRouter, Navigate, Route, Routes, useNavigate } from 'react-router-dom'
+import { Slide, ToastContainer } from 'react-toastify'
 import * as z from 'zod'
 
-import * as detect from 'enso-common/src/detect'
-
-import * as appUtils from '#/appUtils'
-
-import * as inputBindingsModule from '#/configurations/inputBindings'
-
-import AuthProvider, * as authProvider from '#/providers/AuthProvider'
+import { IS_DEV_MODE } from 'enso-common/src/detect'
+import { mapEntries, unsafeEntries } from 'enso-common/src/utilities/data/object'
+import { Path } from 'enso-common/src/utilities/data/path'
+
+import {
+  ALL_PATHS_REGEX,
+  CONFIRM_REGISTRATION_PATH,
+  DASHBOARD_PATH,
+  FORGOT_PASSWORD_PATH,
+  LOGIN_PATH,
+  REGISTRATION_PATH,
+  RESET_PASSWORD_PATH,
+  RESTORE_USER_PATH,
+  SETUP_PATH,
+  SUBSCRIBE_PATH,
+  SUBSCRIBE_SUCCESS_PATH,
+} from '#/appUtils'
+
+import { createBindings, type DashboardBindingKey } from '#/configurations/inputBindings'
+
+import AuthProvider, {
+  FullUserSession,
+  GuestLayout,
+  NotDeletedUserLayout,
+  PartialUserSession,
+  ProtectedLayout,
+  SoftDeletedUserLayout,
+  useAuth,
+} from '#/providers/AuthProvider'
 import BackendProvider, { useLocalBackend } from '#/providers/BackendProvider'
 import DriveProvider from '#/providers/DriveProvider'
 import { useHttpClientStrict } from '#/providers/HttpClientProvider'
 import InputBindingsProvider from '#/providers/InputBindingsProvider'
-import LocalStorageProvider, * as localStorageProvider from '#/providers/LocalStorageProvider'
+import LocalStorageProvider, {
+  useLocalStorage,
+  useLocalStorageState,
+} from '#/providers/LocalStorageProvider'
 import { useLogger } from '#/providers/LoggerProvider'
-import ModalProvider, * as modalProvider from '#/providers/ModalProvider'
-import * as navigator2DProvider from '#/providers/Navigator2DProvider'
+import ModalProvider, { useSetModal } from '#/providers/ModalProvider'
+import { useNavigator2D } from '#/providers/Navigator2DProvider'
 import SessionProvider from '#/providers/SessionProvider'
-import * as textProvider from '#/providers/TextProvider'
+import { useText } from '#/providers/TextProvider'
 
 import ConfirmRegistration from '#/pages/authentication/ConfirmRegistration'
 import ForgotPassword from '#/pages/authentication/ForgotPassword'
@@ -66,19 +91,19 @@ import Login from '#/pages/authentication/Login'
 import Registration from '#/pages/authentication/Registration'
 import ResetPassword from '#/pages/authentication/ResetPassword'
 import RestoreAccount from '#/pages/authentication/RestoreAccount'
-import * as setup from '#/pages/authentication/Setup'
+import { Setup } from '#/pages/authentication/Setup'
 import Dashboard from '#/pages/dashboard/Dashboard'
-import * as subscribe from '#/pages/subscribe/Subscribe'
-import * as subscribeSuccess from '#/pages/subscribe/SubscribeSuccess'
+import { Subscribe } from '#/pages/subscribe/Subscribe'
+import { SubscribeSuccess } from '#/pages/subscribe/SubscribeSuccess'
 
-import type * as editor from '#/layouts/Editor'
-import * as openAppWatcher from '#/layouts/OpenAppWatcher'
+import type { GraphEditorRunner } from '#/layouts/Editor'
+import { OpenAppWatcher } from '#/layouts/OpenAppWatcher'
 import VersionChecker from '#/layouts/VersionChecker'
 
 import { RouterProvider } from '#/components/aria'
-import * as devtools from '#/components/Devtools'
-import * as errorBoundary from '#/components/ErrorBoundary'
-import * as suspense from '#/components/Suspense'
+import { EnsoDevtools } from '#/components/Devtools'
+import { ErrorBoundary } from '#/components/ErrorBoundary'
+import { Suspense } from '#/components/Suspense'
 
 import AboutModal from '#/modals/AboutModal'
 import { AgreementsModal } from '#/modals/AgreementsModal'
@@ -89,20 +114,14 @@ import ProjectManager, * as projectManager from '#/services/ProjectManager'
 import RemoteBackend from '#/services/RemoteBackend'
 
 import { FeatureFlagsProvider } from '#/providers/FeatureFlagsProvider'
-import * as appBaseUrl from '#/utilities/appBaseUrl'
-import * as eventModule from '#/utilities/event'
+import { APP_BASE_URL } from '#/utilities/appBaseUrl'
+import { isElementPartOfMonaco, isElementTextInput } from '#/utilities/event'
 import LocalStorage from '#/utilities/LocalStorage'
-import * as object from '#/utilities/object'
-import { Path } from '#/utilities/path'
 import { STATIC_QUERY_OPTIONS } from '#/utilities/reactQuery'
 
 import { useInitAuthService } from '#/authentication/service'
 import { InvitedToOrganizationModal } from '#/modals/InvitedToOrganizationModal'
 
-// ============================
-// === Global configuration ===
-// ============================
-
 declare module '#/utilities/LocalStorage' {
   /** */
   interface LocalStorageData {
@@ -133,7 +152,7 @@ LocalStorage.registerKey('localRootDirectory', { schema: z.string() })
 /** Returns the URL to the main page. This is the current URL, with the current route removed. */
 function getMainPageUrl() {
   const mainPageUrl = new URL(window.location.href)
-  mainPageUrl.pathname = mainPageUrl.pathname.replace(appUtils.ALL_PATHS_REGEX, '')
+  mainPageUrl.pathname = mainPageUrl.pathname.replace(ALL_PATHS_REGEX, '')
   return mainPageUrl
 }
 
@@ -160,8 +179,8 @@ export interface AppProps {
   readonly onAuthenticated: (accessToken: string | null) => void
   readonly projectManagerUrl: string | null
   readonly ydocUrl: string | null
-  readonly appRunner: editor.GraphEditorRunner | null
-  readonly queryClient: reactQuery.QueryClient
+  readonly appRunner: GraphEditorRunner | null
+  readonly queryClient: QueryClient
 }
 
 /**
@@ -174,7 +193,7 @@ export interface AppProps {
 export default function App(props: AppProps) {
   const {
     data: { projectManagerRootDirectory, projectManagerInstance },
-  } = reactQuery.useSuspenseQuery<{
+  } = useSuspenseQuery<{
     projectManagerInstance: ProjectManager | null
     projectManagerRootDirectory: projectManager.Path | null
   }>({
@@ -198,7 +217,7 @@ export default function App(props: AppProps) {
     },
     queryFn: async () => {
       if (props.supportsLocalBackend && props.projectManagerUrl != null) {
-        const response = await fetch(`${appBaseUrl.APP_BASE_URL}/api/root-directory`)
+        const response = await fetch(`${APP_BASE_URL}/api/root-directory`)
         const text = await response.text()
         const rootDirectory = projectManager.Path(text)
 
@@ -220,7 +239,7 @@ export default function App(props: AppProps) {
   // Force all queries to be stale
   // We don't use the `staleTime` option because it's not performant
   // and triggers unnecessary setTimeouts.
-  reactQuery.useQuery({
+  useQuery({
     queryKey: ['refresh'],
     queryFn: () => {
       queryClient
@@ -241,16 +260,16 @@ export default function App(props: AppProps) {
   // will redirect the user between the login/register pages and the dashboard.
   return (
     <>
-      <toastify.ToastContainer
+      <ToastContainer
         position="top-center"
         theme="light"
         closeOnClick={false}
         draggable={false}
         toastClassName="text-sm leading-cozy bg-selected-frame rounded-lg backdrop-blur-default"
-        transition={toastify.Slide}
+        transition={Slide}
         limit={3}
       />
-      <router.BrowserRouter basename={getMainPageUrl().pathname}>
+      <BrowserRouter basename={getMainPageUrl().pathname}>
         <LocalStorageProvider>
           <ModalProvider>
             <AppRouter
@@ -260,7 +279,7 @@ export default function App(props: AppProps) {
             />
           </ModalProvider>
         </LocalStorageProvider>
-      </router.BrowserRouter>
+      </BrowserRouter>
     </>
   )
 }
@@ -287,39 +306,39 @@ function AppRouter(props: AppRouterProps) {
   const { onAuthenticated, projectManagerInstance } = props
   const httpClient = useHttpClientStrict()
   const logger = useLogger()
-  const navigate = router.useNavigate()
+  const navigate = useNavigate()
 
-  const { getText } = textProvider.useText()
-  const { localStorage } = localStorageProvider.useLocalStorage()
-  const { setModal } = modalProvider.useSetModal()
+  const { getText } = useText()
+  const { localStorage } = useLocalStorage()
+  const { setModal } = useSetModal()
 
-  const navigator2D = navigator2DProvider.useNavigator2D()
+  const navigator2D = useNavigator2D()
 
-  const localBackend = React.useMemo(
+  const localBackend = useMemo(
     () => (projectManagerInstance != null ? new LocalBackend(projectManagerInstance) : null),
     [projectManagerInstance],
   )
 
-  const remoteBackend = React.useMemo(
+  const remoteBackend = useMemo(
     () => new RemoteBackend(httpClient, logger, getText),
     [httpClient, logger, getText],
   )
 
-  if (detect.IS_DEV_MODE) {
+  if (IS_DEV_MODE) {
     // @ts-expect-error This is used exclusively for debugging.
     window.navigate = navigate
   }
 
-  const [inputBindingsRaw] = React.useState(() => inputBindingsModule.createBindings())
+  const [inputBindingsRaw] = useState(() => createBindings())
 
-  React.useEffect(() => {
+  useEffect(() => {
     const savedInputBindings = localStorage.get('inputBindings')
     if (savedInputBindings != null) {
-      const filteredInputBindings = object.mapEntries(
+      const filteredInputBindings = mapEntries(
         inputBindingsRaw.metadata,
         (k) => savedInputBindings[k],
       )
-      for (const [bindingKey, newBindings] of object.unsafeEntries(filteredInputBindings)) {
+      for (const [bindingKey, newBindings] of unsafeEntries(filteredInputBindings)) {
         for (const oldBinding of inputBindingsRaw.metadata[bindingKey].bindings) {
           inputBindingsRaw.delete(bindingKey, oldBinding)
         }
@@ -330,7 +349,7 @@ function AppRouter(props: AppRouterProps) {
     }
   }, [localStorage, inputBindingsRaw])
 
-  const inputBindings = React.useMemo(() => {
+  const inputBindings = useMemo(() => {
     const updateLocalStorage = () => {
       localStorage.set(
         'inputBindings',
@@ -351,15 +370,15 @@ function AppRouter(props: AppRouterProps) {
       get attach() {
         return inputBindingsRaw.attach.bind(inputBindingsRaw)
       },
-      reset: (bindingKey: inputBindingsModule.DashboardBindingKey) => {
+      reset: (bindingKey: DashboardBindingKey) => {
         inputBindingsRaw.reset(bindingKey)
         updateLocalStorage()
       },
-      add: (bindingKey: inputBindingsModule.DashboardBindingKey, binding: string) => {
+      add: (bindingKey: DashboardBindingKey, binding: string) => {
         inputBindingsRaw.add(bindingKey, binding)
         updateLocalStorage()
       },
-      delete: (bindingKey: inputBindingsModule.DashboardBindingKey, binding: string) => {
+      delete: (bindingKey: DashboardBindingKey, binding: string) => {
         inputBindingsRaw.delete(bindingKey, binding)
         updateLocalStorage()
       },
@@ -382,8 +401,8 @@ function AppRouter(props: AppRouterProps) {
 
   // Subscribe to `localStorage` updates to trigger a rerender when the terms of service
   // or privacy policy have been accepted.
-  localStorageProvider.useLocalStorageState('termsOfService')
-  localStorageProvider.useLocalStorageState('privacyPolicy')
+  useLocalStorageState('termsOfService')
+  useLocalStorageState('privacyPolicy')
 
   const authService = useInitAuthService(props)
 
@@ -391,7 +410,7 @@ function AppRouter(props: AppRouterProps) {
   const refreshUserSession = authService.cognito.refreshUserSession.bind(authService.cognito)
   const registerAuthEventListener = authService.registerAuthEventListener
 
-  React.useEffect(() => {
+  useEffect(() => {
     if ('menuApi' in window) {
       window.menuApi.setShowAboutModalHandler(() => {
         setModal(<AboutModal />)
@@ -399,7 +418,7 @@ function AppRouter(props: AppRouterProps) {
     }
   }, [setModal])
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = navigator2D.onKeyDown.bind(navigator2D)
     document.addEventListener('keydown', onKeyDown)
     return () => {
@@ -407,7 +426,7 @@ function AppRouter(props: AppRouterProps) {
     }
   }, [navigator2D])
 
-  React.useEffect(() => {
+  useEffect(() => {
     let isClick = false
     const onMouseDown = () => {
       isClick = true
@@ -415,9 +434,9 @@ function AppRouter(props: AppRouterProps) {
     const onMouseUp = (event: MouseEvent) => {
       if (
         isClick &&
-        !eventModule.isElementTextInput(event.target) &&
-        !eventModule.isElementPartOfMonaco(event.target) &&
-        !eventModule.isElementTextInput(document.activeElement)
+        !isElementTextInput(event.target) &&
+        !isElementPartOfMonaco(event.target) &&
+        !isElementTextInput(document.activeElement)
       ) {
         const selection = document.getSelection()
         const app = document.getElementById('app')
@@ -448,74 +467,74 @@ function AppRouter(props: AppRouterProps) {
   }, [])
 
   const routes = (
-    <router.Routes>
+    <Routes>
       {/* Login & registration pages are visible to unauthenticated users. */}
-      <router.Route element={<authProvider.GuestLayout />}>
-        <router.Route path={appUtils.REGISTRATION_PATH} element={<Registration />} />
-        <router.Route path={appUtils.LOGIN_PATH} element={<Login />} />
-      </router.Route>
+      <Route element={<GuestLayout />}>
+        <Route path={REGISTRATION_PATH} element={<Registration />} />
+        <Route path={LOGIN_PATH} element={<Login />} />
+      </Route>
 
       {/* Protected pages are visible to authenticated users. */}
-      <router.Route element={<authProvider.NotDeletedUserLayout />}>
-        <router.Route element={<authProvider.ProtectedLayout />}>
-          <router.Route element={<AgreementsModal />}>
-            <router.Route element={<SetupOrganizationAfterSubscribe />}>
-              <router.Route element={<InvitedToOrganizationModal />}>
-                <router.Route element={<openAppWatcher.OpenAppWatcher />}>
-                  <router.Route
-                    path={appUtils.DASHBOARD_PATH}
+      <Route element={<NotDeletedUserLayout />}>
+        <Route element={<ProtectedLayout />}>
+          <Route element={<AgreementsModal />}>
+            <Route element={<SetupOrganizationAfterSubscribe />}>
+              <Route element={<InvitedToOrganizationModal />}>
+                <Route element={<OpenAppWatcher />}>
+                  <Route
+                    path={DASHBOARD_PATH}
                     element={shouldShowDashboard && <Dashboard {...props} />}
                   />
 
-                  <router.Route
-                    path={appUtils.SUBSCRIBE_PATH}
+                  <Route
+                    path={SUBSCRIBE_PATH}
                     element={
-                      <errorBoundary.ErrorBoundary>
-                        <suspense.Suspense>
-                          <subscribe.Subscribe />
-                        </suspense.Suspense>
-                      </errorBoundary.ErrorBoundary>
+                      <ErrorBoundary>
+                        <Suspense>
+                          <Subscribe />
+                        </Suspense>
+                      </ErrorBoundary>
                     }
                   />
-                </router.Route>
-              </router.Route>
-            </router.Route>
-          </router.Route>
+                </Route>
+              </Route>
+            </Route>
+          </Route>
 
-          <router.Route
-            path={appUtils.SUBSCRIBE_SUCCESS_PATH}
+          <Route
+            path={SUBSCRIBE_SUCCESS_PATH}
             element={
-              <errorBoundary.ErrorBoundary>
-                <suspense.Suspense>
-                  <subscribeSuccess.SubscribeSuccess />
-                </suspense.Suspense>
-              </errorBoundary.ErrorBoundary>
+              <ErrorBoundary>
+                <Suspense>
+                  <SubscribeSuccess />
+                </Suspense>
+              </ErrorBoundary>
             }
           />
-        </router.Route>
-      </router.Route>
+        </Route>
+      </Route>
 
-      <router.Route element={<AgreementsModal />}>
-        <router.Route element={<authProvider.NotDeletedUserLayout />}>
-          <router.Route path={appUtils.SETUP_PATH} element={<setup.Setup />} />
-        </router.Route>
-      </router.Route>
+      <Route element={<AgreementsModal />}>
+        <Route element={<NotDeletedUserLayout />}>
+          <Route path={SETUP_PATH} element={<Setup />} />
+        </Route>
+      </Route>
 
       {/* Other pages are visible to unauthenticated and authenticated users. */}
-      <router.Route path={appUtils.CONFIRM_REGISTRATION_PATH} element={<ConfirmRegistration />} />
-      <router.Route path={appUtils.FORGOT_PASSWORD_PATH} element={<ForgotPassword />} />
-      <router.Route path={appUtils.RESET_PASSWORD_PATH} element={<ResetPassword />} />
+      <Route path={CONFIRM_REGISTRATION_PATH} element={<ConfirmRegistration />} />
+      <Route path={FORGOT_PASSWORD_PATH} element={<ForgotPassword />} />
+      <Route path={RESET_PASSWORD_PATH} element={<ResetPassword />} />
 
       {/* Soft-deleted user pages are visible to users who have been soft-deleted. */}
-      <router.Route element={<authProvider.ProtectedLayout />}>
-        <router.Route element={<authProvider.SoftDeletedUserLayout />}>
-          <router.Route path={appUtils.RESTORE_USER_PATH} element={<RestoreAccount />} />
-        </router.Route>
-      </router.Route>
+      <Route element={<ProtectedLayout />}>
+        <Route element={<SoftDeletedUserLayout />}>
+          <Route path={RESTORE_USER_PATH} element={<RestoreAccount />} />
+        </Route>
+      </Route>
 
       {/* 404 page */}
-      <router.Route path="*" element={<router.Navigate to="/" replace />} />
-    </router.Routes>
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
   )
 
   return (
@@ -541,11 +560,11 @@ function AppRouter(props: AppRouterProps) {
                   <LocalBackendPathSynchronizer />
                   <VersionChecker />
                   {routes}
-                  <suspense.Suspense>
-                    <errorBoundary.ErrorBoundary>
-                      <devtools.EnsoDevtools />
-                    </errorBoundary.ErrorBoundary>
-                  </suspense.Suspense>
+                  <Suspense>
+                    <ErrorBoundary>
+                      <EnsoDevtools />
+                    </ErrorBoundary>
+                  </Suspense>
                 </DriveProvider>
               </InputBindingsProvider>
             </AuthProvider>
@@ -562,7 +581,7 @@ function AppRouter(props: AppRouterProps) {
 
 /** Keep `localBackend.rootPath` in sync with the saved root path state. */
 function LocalBackendPathSynchronizer() {
-  const [localRootDirectory] = localStorageProvider.useLocalStorageState('localRootDirectory')
+  const [localRootDirectory] = useLocalStorageState('localRootDirectory')
   const localBackend = useLocalBackend()
   if (localBackend) {
     if (localRootDirectory != null) {
diff --git a/app/gui/src/dashboard/authentication/cognito.ts b/app/gui/src/dashboard/authentication/cognito.ts
index 3a5daf7a45ff..019461914496 100644
--- a/app/gui/src/dashboard/authentication/cognito.ts
+++ b/app/gui/src/dashboard/authentication/cognito.ts
@@ -31,22 +31,20 @@
  * `kind` field provides a unique string that can be used to brand the error in place of the
  * `internalCode`, when rethrowing the error.
  */
-import * as amplify from '@aws-amplify/auth'
-import * as cognito from 'amazon-cognito-identity-js'
-import * as results from 'ts-results'
+import { Auth, CognitoHostedUIIdentityProvider, type SignUpParams } from '@aws-amplify/auth'
+import {
+  CognitoUser,
+  type ChallengeName,
+  type CognitoUserSession,
+} from 'amazon-cognito-identity-js'
+import { Err, Result } from 'ts-results'
 
-import * as detect from 'enso-common/src/detect'
+import type { AccessToken } from 'enso-common/src/accessToken'
+import { isOnElectron } from 'enso-common/src/detect'
+import { toRfc3339, type Rfc3339DateTime } from 'enso-common/src/utilities/data/dateTime'
 
-import type * as loggerProvider from '#/providers/LoggerProvider'
-
-import * as dateTime from '#/utilities/dateTime'
-import type * as saveAccessToken from 'enso-common/src/accessToken'
-
-import * as service from '#/authentication/service'
-
-// =================
-// === Constants ===
-// =================
+import { AmplifyConfig, toNestedAmplifyConfig } from '#/authentication/service'
+import type { Logger } from '#/providers/LoggerProvider'
 
 /**
  * String used to identify the GitHub federated identity provider in AWS Amplify.
@@ -64,7 +62,7 @@ const SEC_MS = 1_000
 
 // The names come from a third-party API and cannot be changed.
 /* eslint-disable @typescript-eslint/naming-convention */
-/** Attributes returned from {@link amplify.Auth.currentUserInfo}. */
+/** Attributes returned from {@link Auth.currentUserInfo}. */
 interface UserAttributes {
   readonly email: string
   readonly email_verified: boolean
@@ -82,9 +80,9 @@ export type MfaType = 'NOMFA' | 'SMS_MFA' | 'SOFTWARE_TOKEN_MFA' | 'TOTP'
  *
  * The `NO_CHALLENGE` value is used when the user is not currently facing any challenge.
  */
-export type UserSessionChallenge = cognito.ChallengeName | 'NO_CHALLENGE'
+export type UserSessionChallenge = ChallengeName | 'NO_CHALLENGE'
 
-/** User information returned from {@link amplify.Auth.currentUserInfo}. */
+/** User information returned from {@link Auth.currentUserInfo}. */
 interface UserInfo {
   readonly username: string
   readonly id: undefined
@@ -191,14 +189,14 @@ interface CognitoError {
 /**
  * Thin wrapper around Cognito endpoints from the AWS Amplify library with error handling added.
  * This way, the methods don't throw all errors, but define exactly which errors they return.
- * The caller can then handle them via pattern matching on the {@link results.Result} type.
+ * The caller can then handle them via pattern matching on the {@link Result} type.
  */
 export class Cognito {
   /** Create a new Cognito wrapper. */
   constructor(
-    private readonly logger: loggerProvider.Logger,
+    private readonly logger: Logger,
     private readonly supportsDeepLinks: boolean,
-    private readonly amplifyConfig: service.AmplifyConfig,
+    private readonly amplifyConfig: AmplifyConfig,
   ) {
     /**
      * Amplify expects `Auth.configure` to be called before any other `Auth` methods are
@@ -206,12 +204,12 @@ export class Cognito {
      * object containing them, we ensure that `Auth.configure` is called before any other `Auth`
      * methods are called.
      */
-    const nestedAmplifyConfig = service.toNestedAmplifyConfig(amplifyConfig)
-    amplify.Auth.configure(nestedAmplifyConfig)
+    const nestedAmplifyConfig = toNestedAmplifyConfig(amplifyConfig)
+    Auth.configure(nestedAmplifyConfig)
   }
 
   /** Save the access token to a file for further reuse. */
-  saveAccessToken(accessTokenPayload: saveAccessToken.AccessToken | null) {
+  saveAccessToken(accessTokenPayload: AccessToken | null) {
     this.amplifyConfig.saveAccessToken?.(accessTokenPayload)
   }
 
@@ -221,7 +219,7 @@ export class Cognito {
    * Will refresh the {@link UserSession} if it has expired.
    */
   async userSession() {
-    return amplify.Auth.currentSession()
+    return Auth.currentSession()
       .then((result) => parseUserSession(result, this.amplifyConfig.userPoolWebClientId))
       .catch(() => null)
   }
@@ -233,7 +231,7 @@ export class Cognito {
   async organizationId() {
     // This `any` comes from a third-party API and cannot be avoided.
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    const userInfo: UserInfo = await amplify.Auth.currentUserInfo()
+    const userInfo: UserInfo = await Auth.currentUserInfo()
     return userInfo.attributes['custom:organizationId'] ?? null
   }
 
@@ -241,7 +239,7 @@ export class Cognito {
   async email() {
     // This `any` comes from a third-party API and cannot be avoided.
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    const userInfo: UserInfo = await amplify.Auth.currentUserInfo()
+    const userInfo: UserInfo = await Auth.currentUserInfo()
     return userInfo.attributes.email
   }
 
@@ -251,9 +249,9 @@ export class Cognito {
    * Does not rely on federated identity providers (e.g., Google or GitHub).
    */
   async signUp(username: string, password: string, organizationId: string | null) {
-    const result = await results.Result.wrapAsync(async () => {
+    const result = await Result.wrapAsync(async () => {
       const params = intoSignUpParams(this.supportsDeepLinks, username, password, organizationId)
-      await amplify.Auth.signUp(params)
+      await Auth.signUp(params)
     })
     return result.mapErr(intoAmplifyErrorOrThrow).mapErr(intoSignUpErrorOrThrow)
   }
@@ -267,8 +265,8 @@ export class Cognito {
    * address is verified, the user can sign in.
    */
   async confirmSignUp(email: string, code: string) {
-    const result = await results.Result.wrapAsync(async () => {
-      await amplify.Auth.confirmSignUp(email, code)
+    const result = await Result.wrapAsync(async () => {
+      await Auth.confirmSignUp(email, code)
     })
     return result.mapErr(intoAmplifyErrorOrThrow).mapErr(intoConfirmSignUpErrorOrThrow)
   }
@@ -282,8 +280,8 @@ export class Cognito {
    */
   async signInWithGoogle() {
     const customState = this.customState()
-    const provider = amplify.CognitoHostedUIIdentityProvider.Google
-    await amplify.Auth.federatedSignIn({
+    const provider = CognitoHostedUIIdentityProvider.Google
+    await Auth.federatedSignIn({
       provider,
       ...(customState != null ? { customState } : {}),
     })
@@ -297,7 +295,7 @@ export class Cognito {
    * After the user has granted access, the browser will be redirected to the application.
    */
   async signInWithGitHub() {
-    await amplify.Auth.federatedSignIn({
+    await Auth.federatedSignIn({
       customProvider: GITHUB_PROVIDER,
     })
   }
@@ -308,12 +306,12 @@ export class Cognito {
    * Does not rely on external identity providers (e.g., Google or GitHub).
    */
   async signInWithPassword(username: string, password: string) {
-    const result = await results.Result.wrapAsync(async () => {
+    const result = await Result.wrapAsync(async () => {
       // This `any` comes from a third-party API and cannot be avoided.
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      const maybeUser = await amplify.Auth.signIn(username, password)
+      const maybeUser = await Auth.signIn(username, password)
 
-      if (maybeUser instanceof cognito.CognitoUser) {
+      if (maybeUser instanceof CognitoUser) {
         return maybeUser
       } else {
         // eslint-disable-next-line no-restricted-properties
@@ -330,24 +328,22 @@ export class Cognito {
 
   /** Refresh the current user session. */
   async refreshUserSession() {
-    const result = await results.Result.wrapAsync(async () => {
+    const result = await Result.wrapAsync(async () => {
       const currentUser = await currentAuthenticatedUser()
-      const refreshToken = (await amplify.Auth.currentSession()).getRefreshToken()
+      const refreshToken = (await Auth.currentSession()).getRefreshToken()
 
       if (refreshToken.getToken() === '') {
         throw new Error('Refresh token is empty, cannot refresh session, Please sign in again.')
       }
 
-      return await new Promise<cognito.CognitoUserSession>((resolve, reject) => {
-        currentUser
-          .unwrap()
-          .refreshSession(refreshToken, (error, session: cognito.CognitoUserSession) => {
-            if (error instanceof Error) {
-              reject(error)
-            } else {
-              resolve(session)
-            }
-          })
+      return await new Promise<CognitoUserSession>((resolve, reject) => {
+        currentUser.unwrap().refreshSession(refreshToken, (error, session: CognitoUserSession) => {
+          if (error instanceof Error) {
+            reject(error)
+          } else {
+            resolve(session)
+          }
+        })
       })
     })
 
@@ -368,11 +364,11 @@ export class Cognito {
     // also has the unintended consequence of delaying the sign out process by a few seconds (until
     // the timeout occurs).
     try {
-      await amplify.Auth.signOut()
+      await Auth.signOut()
     } catch (error) {
       this.logger.error('Sign out failed', error)
     } finally {
-      await amplify.Auth.signOut()
+      await Auth.signOut()
     }
   }
 
@@ -384,8 +380,8 @@ export class Cognito {
    * automatically.
    */
   async forgotPassword(email: string) {
-    const result = await results.Result.wrapAsync(async () => {
-      await amplify.Auth.forgotPassword(email)
+    const result = await Result.wrapAsync(async () => {
+      await Auth.forgotPassword(email)
     })
     return result.mapErr(intoAmplifyErrorOrThrow).mapErr(intoForgotPasswordErrorOrThrow)
   }
@@ -398,8 +394,8 @@ export class Cognito {
    * along with the verification code, changing the user's password.
    */
   async forgotPasswordSubmit(email: string, code: string, password: string) {
-    const result = await results.Result.wrapAsync(async () => {
-      await amplify.Auth.forgotPasswordSubmit(email, code, password)
+    const result = await Result.wrapAsync(async () => {
+      await Auth.forgotPasswordSubmit(email, code, password)
     })
     return result.mapErr(intoForgotPasswordSubmitErrorOrThrow)
   }
@@ -416,12 +412,12 @@ export class Cognito {
     const cognitoUserResult = await currentAuthenticatedUser()
     if (cognitoUserResult.ok) {
       const cognitoUser = cognitoUserResult.unwrap()
-      const result = await results.Result.wrapAsync(async () => {
-        await amplify.Auth.changePassword(cognitoUser, oldPassword, newPassword)
+      const result = await Result.wrapAsync(async () => {
+        await Auth.changePassword(cognitoUser, oldPassword, newPassword)
       })
       return result.mapErr(intoAmplifyErrorOrThrow)
     } else {
-      return results.Err(cognitoUserResult.val)
+      return Err(cognitoUserResult.val)
     }
   }
 
@@ -432,9 +428,7 @@ export class Cognito {
     if (cognitoUserResult.ok) {
       const cognitoUser = cognitoUserResult.unwrap()
 
-      const result = (
-        await results.Result.wrapAsync(() => amplify.Auth.setupTOTP(cognitoUser))
-      ).map((data) => {
+      const result = (await Result.wrapAsync(() => Auth.setupTOTP(cognitoUser))).map((data) => {
         const str = 'otpauth://totp/AWSCognito:' + email + '?secret=' + data + '&issuer=' + 'Enso'
 
         return { secret: data, url: str } as const
@@ -442,7 +436,7 @@ export class Cognito {
 
       return result.mapErr(intoAmplifyErrorOrThrow)
     } else {
-      return results.Err(cognitoUserResult.val)
+      return Err(cognitoUserResult.val)
     }
   }
 
@@ -454,12 +448,12 @@ export class Cognito {
     const cognitoUserResult = await currentAuthenticatedUser()
     if (cognitoUserResult.ok) {
       const cognitoUser = cognitoUserResult.unwrap()
-      const result = await results.Result.wrapAsync(async () => {
-        await amplify.Auth.verifyTotpToken(cognitoUser, totpToken)
+      const result = await Result.wrapAsync(async () => {
+        await Auth.verifyTotpToken(cognitoUser, totpToken)
       })
       return result.mapErr(intoAmplifyErrorOrThrow)
     } else {
-      return results.Err(cognitoUserResult.val)
+      return Err(cognitoUserResult.val)
     }
   }
 
@@ -468,12 +462,12 @@ export class Cognito {
     const cognitoUserResult = await currentAuthenticatedUser()
     if (cognitoUserResult.ok) {
       const cognitoUser = cognitoUserResult.unwrap()
-      const result = await results.Result.wrapAsync(
-        async () => await amplify.Auth.setPreferredMFA(cognitoUser, mfaMethod),
+      const result = await Result.wrapAsync(
+        async () => await Auth.setPreferredMFA(cognitoUser, mfaMethod),
       )
       return result.mapErr(intoAmplifyErrorOrThrow)
     } else {
-      return results.Err(cognitoUserResult.val)
+      return Err(cognitoUserResult.val)
     }
   }
 
@@ -482,13 +476,13 @@ export class Cognito {
     const cognitoUserResult = await currentAuthenticatedUser()
     if (cognitoUserResult.ok) {
       const cognitoUser = cognitoUserResult.unwrap()
-      const result = await results.Result.wrapAsync(async () => {
+      const result = await Result.wrapAsync(async () => {
         // eslint-disable-next-line no-restricted-syntax
-        return (await amplify.Auth.getPreferredMFA(cognitoUser)) as MfaType
+        return (await Auth.getPreferredMFA(cognitoUser)) as MfaType
       })
       return result.mapErr(intoAmplifyErrorOrThrow)
     } else {
-      return results.Err(cognitoUserResult.val)
+      return Err(cognitoUserResult.val)
     }
   }
 
@@ -502,23 +496,21 @@ export class Cognito {
     if (cognitoUserResult.ok) {
       const cognitoUser = cognitoUserResult.unwrap()
 
-      return (
-        await results.Result.wrapAsync(() => amplify.Auth.verifyTotpToken(cognitoUser, totpToken))
-      ).mapErr(intoAmplifyErrorOrThrow)
+      return (await Result.wrapAsync(() => Auth.verifyTotpToken(cognitoUser, totpToken))).mapErr(
+        intoAmplifyErrorOrThrow,
+      )
     } else {
-      return results.Err(cognitoUserResult.val)
+      return Err(cognitoUserResult.val)
     }
   }
 
   /** Confirm the sign in with the MFA token. */
   async confirmSignIn(
-    user: amplify.CognitoUser,
+    user: CognitoUser,
     confirmationCode: string,
     mfaType: 'SMS_MFA' | 'SOFTWARE_TOKEN_MFA',
   ) {
-    const result = await results.Result.wrapAsync(() =>
-      amplify.Auth.confirmSignIn(user, confirmationCode, mfaType),
-    )
+    const result = await Result.wrapAsync(() => Auth.confirmSignIn(user, confirmationCode, mfaType))
 
     return result.mapErr(intoAmplifyErrorOrThrow)
   }
@@ -544,7 +536,7 @@ export class Cognito {
    * See: https://github.com/aws-amplify/amplify-js/issues/3391#issuecomment-756473970
    */
   private customState() {
-    return detect.isOnElectron() ? window.location.pathname : null
+    return isOnElectron() ? window.location.pathname : null
   }
 }
 
@@ -571,7 +563,7 @@ export interface UserSession {
   /** URL to refresh the access token. */
   readonly refreshUrl: string
   /** Time when the access token will expire, date and time in ISO 8601 format (UTC timezone). */
-  readonly expireAt: dateTime.Rfc3339DateTime
+  readonly expireAt: Rfc3339DateTime
   /** Cognito app integration client ID. */
   readonly clientId: string
 }
@@ -580,7 +572,7 @@ export interface UserSession {
  * Parse a `CognitoUserSession` into a {@link UserSession}.
  * @throws If the `email` field of the payload is not a string.
  */
-function parseUserSession(session: cognito.CognitoUserSession, clientId: string): UserSession {
+function parseUserSession(session: CognitoUserSession, clientId: string): UserSession {
   const payload: Readonly<Record<string, unknown>> = session.getIdToken().payload
   const email = payload.email
   const refreshUrl = extractRefreshUrlFromSession(session)
@@ -590,7 +582,7 @@ function parseUserSession(session: cognito.CognitoUserSession, clientId: string)
   } else {
     const expirationTimestamp = session.getAccessToken().getExpiration()
 
-    const expireAt = dateTime.toRfc3339(new Date(expirationTimestamp * SEC_MS))
+    const expireAt = toRfc3339(new Date(expirationTimestamp * SEC_MS))
 
     return {
       email,
@@ -608,7 +600,7 @@ function parseUserSession(session: cognito.CognitoUserSession, clientId: string)
  * @see https://docs.aws.amazon.com/cognito/latest/developerguide/amazon-cognito-user-pools-using-the-access-token.html
  * @throws Error if the `iss` field of the payload is not a valid URL.
  */
-function extractRefreshUrlFromSession(session: cognito.CognitoUserSession): string {
+function extractRefreshUrlFromSession(session: CognitoUserSession): string {
   const { iss } = session.getAccessToken().payload
 
   if (typeof iss !== 'string') {
@@ -639,13 +631,13 @@ export function intoCurrentSessionErrorType(error: unknown): CognitoErrorType.no
 // === SignUp ===
 // ==============
 
-/** Format a username and password as an {@link amplify.SignUpParams}. */
+/** Format a username and password as an {@link SignUpParams}. */
 function intoSignUpParams(
   supportsDeepLinks: boolean,
   username: string,
   password: string,
   organizationId: string | null,
-): amplify.SignUpParams {
+): SignUpParams {
   return {
     username,
     password,
@@ -881,7 +873,7 @@ export function intoForgotPasswordSubmitErrorOrThrow(error: unknown): ForgotPass
  * to {@link AmplifyError}s.
  */
 async function currentAuthenticatedUser() {
-  const result = await results.Result.wrapAsync(
+  const result = await Result.wrapAsync(
     /**
      * The interface provided by Amplify declares that the return type is
      * `Promise<CognitoUser | any>`, but TypeScript automatically converts it to `Promise<any>`.
@@ -889,7 +881,7 @@ async function currentAuthenticatedUser() {
      * `Promise<CognitoUser>`.
      */
     // eslint-disable-next-line no-restricted-syntax
-    () => amplify.Auth.currentAuthenticatedUser() as Promise<amplify.CognitoUser>,
+    () => Auth.currentAuthenticatedUser() as Promise<CognitoUser>,
   )
   return result.mapErr(intoAmplifyErrorOrThrow)
 }
diff --git a/app/gui/src/dashboard/components/AriaComponents/Checkbox/CheckboxGroup.tsx b/app/gui/src/dashboard/components/AriaComponents/Checkbox/CheckboxGroup.tsx
index dd5ff4047090..f934114eceb4 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Checkbox/CheckboxGroup.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Checkbox/CheckboxGroup.tsx
@@ -1,18 +1,25 @@
-/**
- * @file
- *
- * A CheckboxGroup allows users to select one or more items from a list of choices.
- */
-import type { CheckboxGroupProps as AriaCheckboxGroupProps } from '#/components/aria'
-import { CheckboxGroup as AriaCheckboxGroup, mergeProps } from '#/components/aria'
+/** @file Allow users to select one or more items from a list of choices. */
+import type { CSSProperties, ForwardedRef, ReactElement } from 'react'
+
+import { omit } from 'enso-common/src/utilities/data/object'
+
+import {
+  CheckboxGroup as AriaCheckboxGroup,
+  mergeProps,
+  type CheckboxGroupProps as AriaCheckboxGroupProps,
+} from '#/components/aria'
 import { mergeRefs } from '#/utilities/mergeRefs'
-import { omit } from '#/utilities/object'
 import { forwardRef } from '#/utilities/react'
 import type { VariantProps } from '#/utilities/tailwindVariants'
 import { tv } from '#/utilities/tailwindVariants'
-import type { CSSProperties, ForwardedRef, ReactElement } from 'react'
-import type { FieldVariantProps } from '../Form'
-import { Form, type FieldPath, type FieldProps, type FieldStateProps, type TSchema } from '../Form'
+import {
+  Form,
+  type FieldPath,
+  type FieldProps,
+  type FieldStateProps,
+  type FieldVariantProps,
+  type TSchema,
+} from '../Form'
 import type { TestIdProps } from '../types'
 import { CheckboxGroupProvider } from './CheckboxContext'
 
diff --git a/app/gui/src/dashboard/components/AriaComponents/Radio/RadioGroup.tsx b/app/gui/src/dashboard/components/AriaComponents/Radio/RadioGroup.tsx
index f836aedb0dd4..88757e6b4b91 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Radio/RadioGroup.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Radio/RadioGroup.tsx
@@ -1,38 +1,36 @@
-/**
- * @file
- *
- * A radio group component.
- */
-import * as React from 'react'
+/** @file A radio group. */
+import type { ForwardedRef, ReactNode } from 'react'
 
-import * as aria from '#/components/aria'
+import { omit } from 'enso-common/src/utilities/data/object'
 
-import * as mergeRefs from '#/utilities/mergeRefs'
-import * as twv from '#/utilities/tailwindVariants'
-
-import { omit } from '#/utilities/object'
+import {
+  RadioGroup as AriaRadioGroup,
+  mergeProps,
+  type AriaRadioGroupProps as AriaAriaRadioGroupProps,
+  type RadioGroupProps as AriaRadioGroupProps,
+} from '#/components/aria'
+import { mergeRefs } from '#/utilities/mergeRefs'
 import { forwardRef } from '#/utilities/react'
+import { tv, type VariantProps } from '#/utilities/tailwindVariants'
 import type { FieldVariantProps } from '../Form'
-import * as formComponent from '../Form'
-import * as radioGroupContext from './RadioGroupContext'
+import { Form, type FieldPath, type FieldProps, type FieldStateProps, type TSchema } from '../Form'
+import { RadioGroupProvider } from './RadioGroupContext'
 
 /** Props for {@link RadioGroup}. */
-export interface RadioGroupProps<
-  Schema extends formComponent.TSchema,
-  TFieldName extends formComponent.FieldPath<Schema>,
-> extends formComponent.FieldStateProps<
-      Omit<aria.AriaRadioGroupProps, 'description' | 'label'>,
+export interface RadioGroupProps<Schema extends TSchema, TFieldName extends FieldPath<Schema>>
+  extends FieldStateProps<
+      Omit<AriaAriaRadioGroupProps, 'description' | 'label'>,
       Schema,
       TFieldName
     >,
-    twv.VariantProps<typeof RADIO_GROUP_STYLES>,
-    formComponent.FieldProps,
+    VariantProps<typeof RADIO_GROUP_STYLES>,
+    FieldProps,
     FieldVariantProps {
-  readonly children?: React.ReactNode
+  readonly children?: ReactNode
   readonly className?: string
 }
 
-export const RADIO_GROUP_STYLES = twv.tv({
+export const RADIO_GROUP_STYLES = tv({
   base: 'flex flex-col gap-0.5 items-start',
   variants: { fullWidth: { true: 'w-full' } },
 })
@@ -40,9 +38,9 @@ export const RADIO_GROUP_STYLES = twv.tv({
 /** A radio group component. */
 
 export const RadioGroup = forwardRef(function RadioGroup<
-  Schema extends formComponent.TSchema,
-  TFieldName extends formComponent.FieldPath<Schema>,
->(props: RadioGroupProps<Schema, TFieldName>, ref: React.ForwardedRef<HTMLDivElement>) {
+  Schema extends TSchema,
+  TFieldName extends FieldPath<Schema>,
+>(props: RadioGroupProps<Schema, TFieldName>, ref: ForwardedRef<HTMLDivElement>) {
   const {
     children,
     isRequired = false,
@@ -61,7 +59,7 @@ export const RadioGroup = forwardRef(function RadioGroup<
     ...radioGroupProps
   } = props
 
-  const { field, fieldState, formInstance } = formComponent.Form.useField({
+  const { field, fieldState, formInstance } = Form.useField({
     name,
     isDisabled,
     form,
@@ -73,11 +71,11 @@ export const RadioGroup = forwardRef(function RadioGroup<
   const base = variants({ fullWidth, className })
 
   return (
-    <aria.RadioGroup
+    <AriaRadioGroup
       ref={(el) => {
-        mergeRefs.mergeRefs(ref, field.ref)(el)
+        mergeRefs(ref, field.ref)(el)
       }}
-      {...aria.mergeProps<aria.RadioGroupProps>()(omit(radioGroupProps, 'validate'), {
+      {...mergeProps<AriaRadioGroupProps>()(omit(radioGroupProps, 'validate'), {
         name: field.name,
         value: field.value,
         isDisabled: field.disabled ?? isDisabled,
@@ -89,8 +87,8 @@ export const RadioGroup = forwardRef(function RadioGroup<
         isInvalid: invalid,
       })}
     >
-      <radioGroupContext.RadioGroupProvider>
-        <formComponent.Form.Field
+      <RadioGroupProvider>
+        <Form.Field
           name={name}
           form={formInstance}
           label={label}
@@ -101,8 +99,8 @@ export const RadioGroup = forwardRef(function RadioGroup<
           {...radioGroupProps}
         >
           {children}
-        </formComponent.Form.Field>
-      </radioGroupContext.RadioGroupProvider>
-    </aria.RadioGroup>
+        </Form.Field>
+      </RadioGroupProvider>
+    </AriaRadioGroup>
   )
 })
diff --git a/app/gui/src/dashboard/components/ColorPicker.tsx b/app/gui/src/dashboard/components/ColorPicker.tsx
index 013cda8403e2..23a646762a1c 100644
--- a/app/gui/src/dashboard/components/ColorPicker.tsx
+++ b/app/gui/src/dashboard/components/ColorPicker.tsx
@@ -1,36 +1,38 @@
 /** @file A color picker to select from a predetermined list of colors. */
-import * as React from 'react'
+import { ForwardedRef, ReactNode } from 'react'
 
-import * as focusHooks from '#/hooks/focusHooks'
+import {
+  COLOR_STRING_TO_COLOR,
+  COLORS,
+  LChColor,
+  lChColorToCssColor,
+} from 'enso-common/src/services/Backend'
 
-import * as focusClassProvider from '#/providers/FocusClassProvider'
-import * as focusDirectionProvider from '#/providers/FocusDirectionProvider'
-
-import * as aria from '#/components/aria'
+import { Radio, RadioGroupProps } from '#/components/aria'
 import FocusRing from '#/components/styled/FocusRing'
 import RadioGroup from '#/components/styled/RadioGroup'
-
-import * as backend from '#/services/Backend'
-
+import { useHandleFocusMove } from '#/hooks/focusHooks'
+import { useFocusClasses } from '#/providers/FocusClassProvider'
+import { useFocusDirection } from '#/providers/FocusDirectionProvider'
 import { forwardRef } from '#/utilities/react'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
+import { twMerge } from '#/utilities/tailwindMerge'
 
 /** Props for a {@link ColorPickerItem}. */
 export interface InternalColorPickerItemProps {
-  readonly color: backend.LChColor
+  readonly color: LChColor
 }
 
 /** An input in a {@link ColorPicker}. */
 function ColorPickerItem(props: InternalColorPickerItemProps) {
   const { color } = props
-  const { focusChildClass } = focusClassProvider.useFocusClasses()
-  const focusDirection = focusDirectionProvider.useFocusDirection()
-  const handleFocusMove = focusHooks.useHandleFocusMove(focusDirection)
-  const cssColor = backend.lChColorToCssColor(color)
+  const { focusChildClass } = useFocusClasses()
+  const focusDirection = useFocusDirection()
+  const handleFocusMove = useHandleFocusMove(focusDirection)
+  const cssColor = lChColorToCssColor(color)
 
   return (
     <FocusRing within>
-      <aria.Radio
+      <Radio
         ref={(element) => {
           element?.querySelector('input')?.classList.add(focusChildClass)
         }}
@@ -40,7 +42,7 @@ function ColorPickerItem(props: InternalColorPickerItemProps) {
         onKeyDown={handleFocusMove}
       >
         <div className="hidden size-radio-button-dot rounded-full bg-selected-frame group-selected:block" />
-      </aria.Radio>
+      </Radio>
     </FocusRing>
   )
 }
@@ -50,40 +52,35 @@ function ColorPickerItem(props: InternalColorPickerItemProps) {
 // ===================
 
 /** Props for a {@link ColorPicker}. */
-export interface ColorPickerProps extends Readonly<Omit<aria.RadioGroupProps, 'className'>> {
-  readonly children?: React.ReactNode
+export interface ColorPickerProps extends Readonly<Omit<RadioGroupProps, 'className'>> {
+  readonly children?: ReactNode
   readonly className?: string
   readonly pickerClassName?: string
-  readonly setColor: (color: backend.LChColor) => void
+  readonly setColor: (color: LChColor) => void
 }
 
 /** A color picker to select from a predetermined list of colors. */
 export default forwardRef(ColorPicker)
 
 /** A color picker to select from a predetermined list of colors. */
-function ColorPicker(props: ColorPickerProps, ref: React.ForwardedRef<HTMLDivElement>) {
+function ColorPicker(props: ColorPickerProps, ref: ForwardedRef<HTMLDivElement>) {
   const { className, pickerClassName = '', children, setColor, ...radioGroupProps } = props
   return (
     <RadioGroup
       ref={ref}
       {...radioGroupProps}
       orientation="horizontal"
-      className={tailwindMerge.twMerge('flex flex-col', className)}
+      className={twMerge('flex flex-col', className)}
       onChange={(value) => {
-        const color = backend.COLOR_STRING_TO_COLOR.get(value)
+        const color = COLOR_STRING_TO_COLOR.get(value)
         if (color != null) {
           setColor(color)
         }
       }}
     >
       {children}
-      <div
-        className={tailwindMerge.twMerge(
-          'flex items-center justify-between gap-colors',
-          pickerClassName,
-        )}
-      >
-        {backend.COLORS.map((currentColor, i) => (
+      <div className={twMerge('flex items-center justify-between gap-colors', pickerClassName)}>
+        {COLORS.map((currentColor, i) => (
           <ColorPickerItem key={i} color={currentColor} />
         ))}
       </div>
diff --git a/app/gui/src/dashboard/components/Devtools/EnsoDevtools.tsx b/app/gui/src/dashboard/components/Devtools/EnsoDevtools.tsx
index e41c813d5522..3d080a23ee41 100644
--- a/app/gui/src/dashboard/components/Devtools/EnsoDevtools.tsx
+++ b/app/gui/src/dashboard/components/Devtools/EnsoDevtools.tsx
@@ -1,61 +1,53 @@
-/**
- * @file
- *
- * A component that provides a UI for toggling paywall features.
- */
-import * as React from 'react'
+/** @file UI for manipulating application state. */
+import { useEffect, useState } from 'react'
 
-import * as reactQuery from '@tanstack/react-query'
+import { useQueryClient } from '@tanstack/react-query'
 
 import { IS_DEV_MODE } from 'enso-common/src/detect'
+import { Plan } from 'enso-common/src/services/Backend'
 
+import { SETUP_PATH } from '#/appUtils'
 import CrossIcon from '#/assets/cross.svg'
 import DevtoolsLogo from '#/assets/enso_logo.svg'
 import TrashIcon from '#/assets/trash.svg'
-
-import { SETUP_PATH } from '#/appUtils'
-
-import * as billing from '#/hooks/billing'
-
-import * as authProvider from '#/providers/AuthProvider'
-import { UserSessionType } from '#/providers/AuthProvider'
-import * as textProvider from '#/providers/TextProvider'
-import {
-  useAnimationsDisabled,
-  useEnableVersionChecker,
-  usePaywallDevtools,
-  useSetAnimationsDisabled,
-  useSetEnableVersionChecker,
-  useShowDevtools,
-} from './EnsoDevtoolsProvider'
-
-import * as ariaComponents from '#/components/AriaComponents'
-import Portal from '#/components/Portal'
-
 import {
   Button,
+  DialogTrigger,
   Form,
+  Input,
   Popover,
   Radio,
   RadioGroup,
   Separator,
+  Switch,
   Text,
 } from '#/components/AriaComponents'
+import Portal from '#/components/Portal'
+import { usePaywallFeatures, type PaywallFeatureName } from '#/hooks/billing'
+import { useAuth, UserSessionType } from '#/providers/AuthProvider'
 import {
   FEATURE_FLAGS_SCHEMA,
   useFeatureFlags,
   useSetFeatureFlags,
 } from '#/providers/FeatureFlagsProvider'
 import { useLocalStorage } from '#/providers/LocalStorageProvider'
-import * as backend from '#/services/Backend'
+import { useText } from '#/providers/TextProvider'
 import LocalStorage, { type LocalStorageData } from '#/utilities/LocalStorage'
+import {
+  useAnimationsDisabled,
+  useEnableVersionChecker,
+  usePaywallDevtools,
+  useSetAnimationsDisabled,
+  useSetEnableVersionChecker,
+  useShowDevtools,
+} from './EnsoDevtoolsProvider'
 
 /** A component that provides a UI for toggling paywall features. */
 export function EnsoDevtools() {
-  const { getText } = textProvider.useText()
-  const { authQueryKey, session } = authProvider.useAuth()
-  const queryClient = reactQuery.useQueryClient()
-  const { getFeature } = billing.usePaywallFeatures()
+  const { getText } = useText()
+  const { authQueryKey, session } = useAuth()
+  const queryClient = useQueryClient()
+  const { getFeature } = usePaywallFeatures()
 
   const showDevtools = useShowDevtools()
 
@@ -67,10 +59,10 @@ export function EnsoDevtools() {
   const setAnimationsDisabled = useSetAnimationsDisabled()
 
   const { localStorage } = useLocalStorage()
-  const [localStorageState, setLocalStorageState] = React.useState<Partial<LocalStorageData>>({})
+  const [localStorageState, setLocalStorageState] = useState<Partial<LocalStorageData>>({})
 
   // Re-render when localStorage changes.
-  React.useEffect(() => localStorage.subscribeAll(setLocalStorageState), [localStorage])
+  useEffect(() => localStorage.subscribeAll(setLocalStorageState), [localStorage])
 
   const featureFlags = useFeatureFlags()
   const setFeatureFlags = useSetFeatureFlags()
@@ -81,8 +73,8 @@ export function EnsoDevtools() {
 
   return (
     <Portal>
-      <ariaComponents.DialogTrigger>
-        <ariaComponents.Button
+      <DialogTrigger>
+        <Button
           icon={DevtoolsLogo}
           aria-label={getText('ensoDevtoolsButtonLabel')}
           variant="icon"
@@ -105,8 +97,8 @@ export function EnsoDevtools() {
 
               <Form
                 gap="small"
-                schema={(schema) => schema.object({ plan: schema.nativeEnum(backend.Plan) })}
-                defaultValues={{ plan: session.user.plan ?? backend.Plan.free }}
+                schema={(schema) => schema.object({ plan: schema.nativeEnum(Plan) })}
+                defaultValues={{ plan: session.user.plan ?? Plan.free }}
               >
                 {({ form }) => (
                   <>
@@ -119,10 +111,10 @@ export function EnsoDevtools() {
                         })
                       }}
                     >
-                      <Radio label={getText('free')} value={backend.Plan.free} />
-                      <Radio label={getText('solo')} value={backend.Plan.solo} />
-                      <Radio label={getText('team')} value={backend.Plan.team} />
-                      <Radio label={getText('enterprise')} value={backend.Plan.enterprise} />
+                      <Radio label={getText('free')} value={Plan.free} />
+                      <Radio label={getText('solo')} value={Plan.solo} />
+                      <Radio label={getText('team')} value={Plan.team} />
+                      <Radio label={getText('enterprise')} value={Plan.enterprise} />
                     </RadioGroup>
 
                     <Button
@@ -151,11 +143,11 @@ export function EnsoDevtools() {
             </>
           )}
 
-          <ariaComponents.Text variant="subtitle" className="mb-2">
+          <Text variant="subtitle" className="mb-2">
             {getText('productionOnlyFeatures')}
-          </ariaComponents.Text>
+          </Text>
 
-          <ariaComponents.Form
+          <Form
             schema={(z) =>
               z.object({ enableVersionChecker: z.boolean(), disableAnimations: z.boolean() })
             }
@@ -166,7 +158,7 @@ export function EnsoDevtools() {
           >
             {({ form }) => (
               <>
-                <ariaComponents.Switch
+                <Switch
                   form={form}
                   name="disableAnimations"
                   label={getText('disableAnimations')}
@@ -176,7 +168,7 @@ export function EnsoDevtools() {
                   }}
                 />
 
-                <ariaComponents.Switch
+                <Switch
                   form={form}
                   name="enableVersionChecker"
                   label={getText('enableVersionChecker')}
@@ -187,14 +179,14 @@ export function EnsoDevtools() {
                 />
               </>
             )}
-          </ariaComponents.Form>
+          </Form>
 
-          <ariaComponents.Separator orientation="horizontal" className="my-3" />
+          <Separator orientation="horizontal" className="my-3" />
 
-          <ariaComponents.Text variant="subtitle" className="mb-2">
+          <Text variant="subtitle" className="mb-2">
             {getText('ensoDevtoolsFeatureFlags')}
 
-            <ariaComponents.Form
+            <Form
               gap="small"
               schema={FEATURE_FLAGS_SCHEMA}
               formOptions={{ mode: 'onChange' }}
@@ -207,7 +199,7 @@ export function EnsoDevtools() {
             >
               {(form) => (
                 <>
-                  <ariaComponents.Switch
+                  <Switch
                     form={form}
                     name="enableMultitabs"
                     label={getText('ensoDevtoolsFeatureFlags.enableMultitabs')}
@@ -218,7 +210,7 @@ export function EnsoDevtools() {
                   />
 
                   <div>
-                    <ariaComponents.Switch
+                    <Switch
                       form={form}
                       name="enableAssetsTableBackgroundRefresh"
                       label={getText('ensoDevtoolsFeatureFlags.enableAssetsTableBackgroundRefresh')}
@@ -229,7 +221,7 @@ export function EnsoDevtools() {
                         setFeatureFlags('enableAssetsTableBackgroundRefresh', value)
                       }}
                     />
-                    <ariaComponents.Input
+                    <Input
                       form={form}
                       type="number"
                       inputMode="numeric"
@@ -250,16 +242,16 @@ export function EnsoDevtools() {
                   </div>
                 </>
               )}
-            </ariaComponents.Form>
-          </ariaComponents.Text>
+            </Form>
+          </Text>
 
-          <ariaComponents.Separator orientation="horizontal" className="my-3" />
+          <Separator orientation="horizontal" className="my-3" />
 
-          <ariaComponents.Text variant="subtitle" className="mb-2">
+          <Text variant="subtitle" className="mb-2">
             {getText('ensoDevtoolsPaywallFeaturesToggles')}
-          </ariaComponents.Text>
+          </Text>
 
-          <ariaComponents.Form
+          <Form
             gap="small"
             schema={(z) =>
               z.object(Object.fromEntries(Object.keys(features).map((key) => [key, z.boolean()])))
@@ -267,18 +259,18 @@ export function EnsoDevtools() {
             defaultValues={Object.fromEntries(
               Object.keys(features).map((feature) => {
                 // eslint-disable-next-line no-restricted-syntax
-                const featureName = feature as billing.PaywallFeatureName
+                const featureName = feature as PaywallFeatureName
                 return [featureName, features[featureName].isForceEnabled ?? true]
               }),
             )}
           >
             {Object.keys(features).map((feature) => {
               // eslint-disable-next-line no-restricted-syntax
-              const featureName = feature as billing.PaywallFeatureName
+              const featureName = feature as PaywallFeatureName
               const { label, descriptionTextId } = getFeature(featureName)
 
               return (
-                <ariaComponents.Switch
+                <Switch
                   key={feature}
                   name={featureName}
                   label={getText(label)}
@@ -289,7 +281,7 @@ export function EnsoDevtools() {
                 />
               )
             })}
-          </ariaComponents.Form>
+          </Form>
 
           <Separator orientation="horizontal" className="my-3" />
 
@@ -332,7 +324,7 @@ export function EnsoDevtools() {
             ))}
           </div>
         </Popover>
-      </ariaComponents.DialogTrigger>
+      </DialogTrigger>
     </Portal>
   )
 }
diff --git a/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsProvider.tsx b/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsProvider.tsx
index 734cc2f50457..5bb3602c951c 100644
--- a/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsProvider.tsx
+++ b/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsProvider.tsx
@@ -1,23 +1,18 @@
-/**
- * @file
- * This file provides a zustand store that contains the state of the Enso devtools.
- */
-import { type PaywallFeatureName, PAYWALL_FEATURES } from '#/hooks/billing'
-import { unsafeEntries, unsafeFromEntries } from '#/utilities/object'
-import * as zustand from '#/utilities/zustand'
-import { IS_DEV_MODE } from 'enso-common/src/detect'
+/** @file This file provides a zustand store that contains the state of the Enso devtools. */
 import { MotionGlobalConfig } from 'framer-motion'
 import { persist } from 'zustand/middleware'
 
+import { IS_DEV_MODE } from 'enso-common/src/detect'
+import { unsafeEntries, unsafeFromEntries } from 'enso-common/src/utilities/data/object'
+
+import { type PaywallFeatureName, PAYWALL_FEATURES } from '#/hooks/billing'
+import { createStore, useStore } from '#/utilities/zustand'
+
 /** Configuration for a paywall feature. */
 export interface PaywallDevtoolsFeatureConfiguration {
   readonly isForceEnabled: boolean | null
 }
 
-// =========================
-// === EnsoDevtoolsStore ===
-// =========================
-
 /** The state of this zustand store. */
 interface EnsoDevtoolsStore {
   readonly showDevtools: boolean
@@ -31,7 +26,7 @@ interface EnsoDevtoolsStore {
   readonly setAnimationsDisabled: (animationsDisabled: boolean) => void
 }
 
-export const ensoDevtoolsStore = zustand.createStore<EnsoDevtoolsStore>()(
+export const ensoDevtoolsStore = createStore<EnsoDevtoolsStore>()(
   persist(
     (set) => ({
       showDevtools: IS_DEV_MODE,
@@ -78,45 +73,37 @@ export const ensoDevtoolsStore = zustand.createStore<EnsoDevtoolsStore>()(
   ),
 )
 
-// ===============================
-// === useEnableVersionChecker ===
-// ===============================
-
 /** A function to set whether the version checker is forcibly shown/hidden. */
 export function useEnableVersionChecker() {
-  return zustand.useStore(ensoDevtoolsStore, (state) => state.showVersionChecker, {
+  return useStore(ensoDevtoolsStore, (state) => state.showVersionChecker, {
     unsafeEnableTransition: true,
   })
 }
 
-// ==================================
-// === useSetEnableVersionChecker ===
-// ==================================
-
 /** A function to set whether the version checker is forcibly shown/hidden. */
 export function useSetEnableVersionChecker() {
-  return zustand.useStore(ensoDevtoolsStore, (state) => state.setEnableVersionChecker, {
+  return useStore(ensoDevtoolsStore, (state) => state.setEnableVersionChecker, {
     unsafeEnableTransition: true,
   })
 }
 
 /** A function to get whether animations are disabled. */
 export function useAnimationsDisabled() {
-  return zustand.useStore(ensoDevtoolsStore, (state) => state.animationsDisabled, {
+  return useStore(ensoDevtoolsStore, (state) => state.animationsDisabled, {
     unsafeEnableTransition: true,
   })
 }
 
 /** A function to set whether animations are disabled. */
 export function useSetAnimationsDisabled() {
-  return zustand.useStore(ensoDevtoolsStore, (state) => state.setAnimationsDisabled, {
+  return useStore(ensoDevtoolsStore, (state) => state.setAnimationsDisabled, {
     unsafeEnableTransition: true,
   })
 }
 
 /** A hook that provides access to the paywall devtools. */
 export function usePaywallDevtools() {
-  return zustand.useStore(
+  return useStore(
     ensoDevtoolsStore,
     (state) => ({
       features: state.paywallFeatures,
@@ -128,7 +115,7 @@ export function usePaywallDevtools() {
 
 /** A hook that provides access to the show devtools state. */
 export function useShowDevtools() {
-  return zustand.useStore(ensoDevtoolsStore, (state) => state.showDevtools, {
+  return useStore(ensoDevtoolsStore, (state) => state.showDevtools, {
     unsafeEnableTransition: true,
   })
 }
diff --git a/app/gui/src/dashboard/components/JSONSchemaInput.tsx b/app/gui/src/dashboard/components/JSONSchemaInput.tsx
index fb95215ed84a..d94f00b24bba 100644
--- a/app/gui/src/dashboard/components/JSONSchemaInput.tsx
+++ b/app/gui/src/dashboard/components/JSONSchemaInput.tsx
@@ -1,5 +1,7 @@
 /** @file A dynamic wizard for creating an arbitrary type of Datalink. */
-import { Fragment, type JSX, useState } from 'react'
+import { Fragment, useState, type JSX } from 'react'
+
+import { asObject, singletonObjectOrNull } from 'enso-common/src/utilities/data/object'
 
 import { Input } from '#/components/aria'
 import { Button, Checkbox, Dropdown, Text } from '#/components/AriaComponents'
@@ -9,13 +11,7 @@ import { useBackendQuery } from '#/hooks/backendHooks'
 import { useRemoteBackend } from '#/providers/BackendProvider'
 import { useText } from '#/providers/TextProvider'
 import { constantValueOfSchema, getSchemaName, lookupDef } from '#/utilities/jsonSchema'
-import { asObject, singletonObjectOrNull } from '#/utilities/object'
-import { twMerge } from '#/utilities/tailwindMerge'
-import { twJoin } from 'tailwind-merge'
-
-// =======================
-// === JSONSchemaInput ===
-// =======================
+import { twJoin, twMerge } from '#/utilities/tailwindMerge'
 
 /** Props for a {@link JSONSchemaInput}. */
 export interface JSONSchemaInputProps {
diff --git a/app/gui/src/dashboard/components/SubmitButton.tsx b/app/gui/src/dashboard/components/SubmitButton.tsx
deleted file mode 100644
index 5a1ba7c5ed0f..000000000000
--- a/app/gui/src/dashboard/components/SubmitButton.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/** @file A styled submit button. */
-import * as React from 'react'
-
-import { Button } from '#/components/AriaComponents'
-import { submitForm } from '#/utilities/event'
-
-// ====================
-// === SubmitButton ===
-// ====================
-
-/** Props for a {@link SubmitButton}. */
-export interface SubmitButtonProps {
-  readonly isLoading?: boolean
-  readonly isDisabled?: boolean
-  readonly text: string
-  readonly icon: string
-}
-
-/** A styled submit button. */
-export default function SubmitButton(props: SubmitButtonProps) {
-  const { isDisabled = false, text, icon, isLoading } = props
-
-  return (
-    <Button
-      size="large"
-      fullWidth
-      variant="submit"
-      isDisabled={isDisabled}
-      loading={isLoading}
-      isActive={!isDisabled}
-      type="submit"
-      icon={icon}
-      iconPosition="end"
-      rounded="full"
-      onPress={submitForm}
-    >
-      {text}
-    </Button>
-  )
-}
diff --git a/app/gui/src/dashboard/components/dashboard/AssetIcon.tsx b/app/gui/src/dashboard/components/dashboard/AssetIcon.tsx
index b2d9bec546cf..ff174f1f9a8a 100644
--- a/app/gui/src/dashboard/components/dashboard/AssetIcon.tsx
+++ b/app/gui/src/dashboard/components/dashboard/AssetIcon.tsx
@@ -1,21 +1,17 @@
 /** @file Displays a non-interactable icon for an asset based on its type and name. */
-import * as React from 'react'
+import { AssetType, type AnyAsset } from 'enso-common/src/services/Backend'
 
 import BlankIcon from '#/assets/blank.svg'
 import DatalinkIcon from '#/assets/datalink.svg'
 import FolderIcon from '#/assets/folder.svg'
 import KeyIcon from '#/assets/key.svg'
 import NetworkIcon from '#/assets/network.svg'
-
 import SvgMask from '#/components/SvgMask'
-
-import * as backend from '#/services/Backend'
-
-import * as fileIcon from '#/utilities/fileIcon'
+import { fileIcon } from '#/utilities/fileIcon'
 
 /** Props for an {@link AssetIcon}. */
 export interface AssetIconProps {
-  readonly asset: backend.AnyAsset
+  readonly asset: AnyAsset
   readonly className?: string
 }
 
@@ -23,24 +19,24 @@ export interface AssetIconProps {
 export default function AssetIcon(props: AssetIconProps) {
   const { asset, className } = props
   switch (asset.type) {
-    case backend.AssetType.directory: {
+    case AssetType.directory: {
       return <SvgMask src={FolderIcon} className={className} />
     }
-    case backend.AssetType.project: {
+    case AssetType.project: {
       return <SvgMask src={NetworkIcon} className={className} />
     }
-    case backend.AssetType.file: {
-      return <SvgMask src={fileIcon.fileIcon()} className={className} />
+    case AssetType.file: {
+      return <SvgMask src={fileIcon()} className={className} />
     }
-    case backend.AssetType.datalink: {
+    case AssetType.datalink: {
       return <SvgMask src={DatalinkIcon} className={className} />
     }
-    case backend.AssetType.secret: {
+    case AssetType.secret: {
       return <SvgMask src={KeyIcon} className={className} />
     }
-    case backend.AssetType.specialLoading:
-    case backend.AssetType.specialEmpty:
-    case backend.AssetType.specialError: {
+    case AssetType.specialLoading:
+    case AssetType.specialEmpty:
+    case AssetType.specialError: {
       // It should not be possible for these to be displayed, but return something anyway.
       return <SvgMask src={BlankIcon} className={className} />
     }
diff --git a/app/gui/src/dashboard/components/dashboard/AssetRow.tsx b/app/gui/src/dashboard/components/dashboard/AssetRow.tsx
index 98e42717cf18..cdd7f54e231c 100644
--- a/app/gui/src/dashboard/components/dashboard/AssetRow.tsx
+++ b/app/gui/src/dashboard/components/dashboard/AssetRow.tsx
@@ -1,10 +1,33 @@
 /** @file A table row for an arbitrary asset. */
-import * as React from 'react'
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type DragEvent,
+  type MouseEvent,
+  type SetStateAction,
+} from 'react'
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import invariant from 'tiny-invariant'
 import { useStore } from 'zustand'
 
+import {
+  AssetType,
+  ProjectState,
+  type AnyAsset,
+  type AssetId,
+  type DirectoryId,
+  type ProjectId,
+  type RealAssetId,
+} from 'enso-common/src/services/Backend'
+import { merge } from 'enso-common/src/utilities/data/object'
+import { download } from 'enso-common/src/utilities/download'
+
 import BlankIcon from '#/assets/blank.svg'
 
 import * as dragAndDropHooks from '#/hooks/dragAndDropHooks'
@@ -31,8 +54,6 @@ import { isCloudCategory, isLocalCategory } from '#/layouts/CategorySwitcher/Cat
 import * as eventListProvider from '#/layouts/Drive/EventListProvider'
 import * as localBackend from '#/services/LocalBackend'
 
-import * as backendModule from '#/services/Backend'
-
 import { Text } from '#/components/AriaComponents'
 import { IndefiniteSpinner } from '#/components/Spinner'
 import type { AssetEvent } from '#/events/assetEvent'
@@ -49,11 +70,9 @@ import { useToastAndLog } from '#/hooks/toastAndLogHooks'
 import { useAsset } from '#/layouts/Drive/assetsTableItemsHooks'
 import { useFullUserSession } from '#/providers/AuthProvider'
 import type * as assetTreeNode from '#/utilities/AssetTreeNode'
-import { download } from '#/utilities/download'
 import * as drag from '#/utilities/drag'
 import * as eventModule from '#/utilities/event'
 import * as indent from '#/utilities/indent'
-import * as object from '#/utilities/object'
 import * as permissions from '#/utilities/permissions'
 import * as set from '#/utilities/set'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
@@ -69,17 +88,13 @@ import Visibility from '#/utilities/Visibility'
  */
 const DRAG_EXPAND_DELAY_MS = 500
 
-// ================
-// === AssetRow ===
-// ================
-
 /** Common properties for state and setters passed to event handlers on an {@link AssetRow}. */
 export interface AssetRowInnerProps {
-  readonly asset: backendModule.AnyAsset
+  readonly asset: AnyAsset
   readonly path: string
   readonly state: assetsTable.AssetsTableState
   readonly rowState: assetsTable.AssetRowState
-  readonly setRowState: React.Dispatch<React.SetStateAction<assetsTable.AssetRowState>>
+  readonly setRowState: Dispatch<SetStateAction<assetsTable.AssetRowState>>
 }
 
 /** Props for an {@link AssetRow}. */
@@ -88,9 +103,9 @@ export interface AssetRowProps {
 
   readonly isPlaceholder: boolean
   readonly visibility: Visibility | undefined
-  readonly id: backendModule.AssetId
-  readonly parentId: backendModule.DirectoryId
-  readonly type: backendModule.AssetType
+  readonly id: AssetId
+  readonly parentId: DirectoryId
+  readonly type: AssetType
   readonly hidden: boolean
   readonly path: string
   readonly initialAssetEvents: readonly AssetEvent[] | null
@@ -98,53 +113,38 @@ export interface AssetRowProps {
   readonly state: assetsTable.AssetsTableState
   readonly columns: columnUtils.Column[]
   readonly isKeyboardSelected: boolean
-  readonly grabKeyboardFocus: (item: backendModule.AnyAsset) => void
-  readonly onClick: (props: AssetRowInnerProps, event: React.MouseEvent) => void
-  readonly select: (item: backendModule.AnyAsset) => void
+  readonly grabKeyboardFocus: (item: AnyAsset) => void
+  readonly onClick: (props: AssetRowInnerProps, event: MouseEvent) => void
+  readonly select: (item: AnyAsset) => void
   readonly isExpanded: boolean
-  readonly onDragStart?: (
-    event: React.DragEvent<HTMLTableRowElement>,
-    item: backendModule.AnyAsset,
-  ) => void
-  readonly onDragOver?: (
-    event: React.DragEvent<HTMLTableRowElement>,
-    item: backendModule.AnyAsset,
-  ) => void
-  readonly onDragLeave?: (
-    event: React.DragEvent<HTMLTableRowElement>,
-    item: backendModule.AnyAsset,
-  ) => void
-  readonly onDragEnd?: (
-    event: React.DragEvent<HTMLTableRowElement>,
-    item: backendModule.AnyAsset,
-  ) => void
-  readonly onDrop?: (
-    event: React.DragEvent<HTMLTableRowElement>,
-    item: backendModule.AnyAsset,
-  ) => void
+  readonly onDragStart?: (event: DragEvent<HTMLTableRowElement>, item: AnyAsset) => void
+  readonly onDragOver?: (event: DragEvent<HTMLTableRowElement>, item: AnyAsset) => void
+  readonly onDragLeave?: (event: DragEvent<HTMLTableRowElement>, item: AnyAsset) => void
+  readonly onDragEnd?: (event: DragEvent<HTMLTableRowElement>, item: AnyAsset) => void
+  readonly onDrop?: (event: DragEvent<HTMLTableRowElement>, item: AnyAsset) => void
   readonly onCutAndPaste?: (
-    newParentKey: backendModule.DirectoryId,
-    newParentId: backendModule.DirectoryId,
+    newParentKey: DirectoryId,
+    newParentId: DirectoryId,
     pasteData: DrivePastePayload,
-    nodeMap: ReadonlyMap<backendModule.AssetId, assetTreeNode.AnyAssetTreeNode>,
+    nodeMap: ReadonlyMap<AssetId, assetTreeNode.AnyAssetTreeNode>,
   ) => void
 }
 
-/** A row containing an {@link backendModule.AnyAsset}. */
+/** A row containing an {@link AnyAsset}. */
 // eslint-disable-next-line no-restricted-syntax
-export const AssetRow = React.memo(function AssetRow(props: AssetRowProps) {
+export const AssetRow = memo(function AssetRow(props: AssetRowProps) {
   const { type, columns, depth, id } = props
 
   switch (type) {
-    case backendModule.AssetType.specialLoading:
-    case backendModule.AssetType.specialEmpty:
-    case backendModule.AssetType.specialError: {
+    case AssetType.specialLoading:
+    case AssetType.specialEmpty:
+    case AssetType.specialError: {
       return <AssetSpecialRow columnsLength={columns.length} depth={depth} type={type} />
     }
     default: {
       // This is safe because we filter out special asset types in the switch statement above.
       // eslint-disable-next-line no-restricted-syntax
-      return <RealAssetRow {...props} id={id as backendModule.RealAssetId} />
+      return <RealAssetRow {...props} id={id as RealAssetId} />
     }
   }
 })
@@ -153,7 +153,7 @@ export const AssetRow = React.memo(function AssetRow(props: AssetRowProps) {
  * Props for a {@link AssetSpecialRow}.
  */
 export interface AssetSpecialRowProps {
-  readonly type: backendModule.AssetType
+  readonly type: AssetType
   readonly columnsLength: number
   readonly depth: number
 }
@@ -162,13 +162,13 @@ export interface AssetSpecialRowProps {
  * Renders a special asset row.
  */
 // eslint-disable-next-line no-restricted-syntax
-const AssetSpecialRow = React.memo(function AssetSpecialRow(props: AssetSpecialRowProps) {
+const AssetSpecialRow = memo(function AssetSpecialRow(props: AssetSpecialRowProps) {
   const { type, columnsLength, depth } = props
 
   const { getText } = textProvider.useText()
 
   switch (type) {
-    case backendModule.AssetType.specialLoading: {
+    case AssetType.specialLoading: {
       return (
         <tr>
           <td colSpan={columnsLength} className="border-r p-0 rounded-rows-skip-level">
@@ -184,7 +184,7 @@ const AssetSpecialRow = React.memo(function AssetSpecialRow(props: AssetSpecialR
         </tr>
       )
     }
-    case backendModule.AssetType.specialEmpty: {
+    case AssetType.specialEmpty: {
       return (
         <tr>
           <td colSpan={columnsLength} className="border-r p-0 rounded-rows-skip-level">
@@ -203,7 +203,7 @@ const AssetSpecialRow = React.memo(function AssetSpecialRow(props: AssetSpecialR
         </tr>
       )
     }
-    case backendModule.AssetType.specialError: {
+    case AssetType.specialError: {
       return (
         <tr>
           <td colSpan={columnsLength} className="border-r p-0 rounded-rows-skip-level">
@@ -234,13 +234,13 @@ const AssetSpecialRow = React.memo(function AssetSpecialRow(props: AssetSpecialR
 /**
  * Props for a {@link RealAssetRow}.
  */
-type RealAssetRowProps = AssetRowProps & { readonly id: backendModule.RealAssetId }
+type RealAssetRowProps = AssetRowProps & { readonly id: RealAssetId }
 
 /**
  * Renders a real asset row.
  */
 // eslint-disable-next-line no-restricted-syntax
-const RealAssetRow = React.memo(function RealAssetRow(props: RealAssetRowProps) {
+const RealAssetRow = memo(function RealAssetRow(props: RealAssetRowProps) {
   const { id } = props
 
   const asset = useAsset(id)
@@ -257,7 +257,7 @@ const RealAssetRow = React.memo(function RealAssetRow(props: RealAssetRowProps)
  * Internal props for a {@link RealAssetRow}.
  */
 export interface RealAssetRowInternalProps extends AssetRowProps {
-  readonly asset: backendModule.AnyAsset
+  readonly asset: AnyAsset
 }
 
 /**
@@ -302,11 +302,11 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
   const { setModal, unsetModal } = modalProvider.useSetModal()
   const { getText } = textProvider.useText()
   const dispatchAssetListEvent = eventListProvider.useDispatchAssetListEvent()
-  const [isDraggedOver, setIsDraggedOver] = React.useState(false)
-  const rootRef = React.useRef<HTMLElement | null>(null)
-  const dragOverTimeoutHandle = React.useRef<number | null>(null)
+  const [isDraggedOver, setIsDraggedOver] = useState(false)
+  const rootRef = useRef<HTMLElement | null>(null)
+  const dragOverTimeoutHandle = useRef<number | null>(null)
   const grabKeyboardFocusRef = useSyncRef(grabKeyboardFocus)
-  const [innerRowState, setRowState] = React.useState<assetsTable.AssetRowState>(
+  const [innerRowState, setRowState] = useState<assetsTable.AssetRowState>(
     assetRowUtils.INITIAL_ROW_STATE,
   )
   const cutAndPaste = useCutAndPaste(category)
@@ -315,13 +315,13 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
   const isNewlyCreated = useStore(driveStore, ({ newestFolderId }) => newestFolderId === asset.id)
   const isEditingName = innerRowState.isEditingName || isNewlyCreated
 
-  const rowState = React.useMemo(() => {
-    return object.merge(innerRowState, { isEditingName })
+  const rowState = useMemo(() => {
+    return merge(innerRowState, { isEditingName })
   }, [isEditingName, innerRowState])
 
-  const nodeParentKeysRef = React.useRef<{
-    readonly nodeMap: WeakRef<ReadonlyMap<backendModule.AssetId, assetTreeNode.AnyAssetTreeNode>>
-    readonly parentKeys: Map<backendModule.AssetId, backendModule.DirectoryId>
+  const nodeParentKeysRef = useRef<{
+    readonly nodeMap: WeakRef<ReadonlyMap<AssetId, assetTreeNode.AnyAssetTreeNode>>
+    readonly parentKeys: Map<AssetId, DirectoryId>
   } | null>(null)
 
   const isDeleting =
@@ -340,12 +340,12 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
       // This is safe because we disable the query when the asset is not a project.
       // see `enabled` property below.
       // eslint-disable-next-line no-restricted-syntax
-      assetId: asset.id as backendModule.ProjectId,
+      assetId: asset.id as ProjectId,
       parentId: asset.parentId,
       backend,
     }),
     select: (data) => data.state.type,
-    enabled: asset.type === backendModule.AssetType.project && !isPlaceholder && isOpened,
+    enabled: asset.type === AssetType.project && !isPlaceholder && isOpened,
   })
 
   const toastAndLog = useToastAndLog()
@@ -375,37 +375,37 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
     setSelectedKeys(set.withPresence(selectedKeys, id, newSelected))
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (selected && insertionVisibility !== Visibility.visible) {
       setSelected(false)
     }
   }, [selected, insertionVisibility, setSelected])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isKeyboardSelected) {
       rootRef.current?.focus()
       grabKeyboardFocusRef.current(asset)
     }
   }, [grabKeyboardFocusRef, isKeyboardSelected, asset])
 
-  const doDelete = React.useCallback(
+  const doDelete = useCallback(
     (forever = false) => {
       void doDeleteRaw(asset, forever)
     },
     [doDeleteRaw, asset],
   )
 
-  const clearDragState = React.useCallback(() => {
+  const clearDragState = useCallback(() => {
     setIsDraggedOver(false)
     setRowState((oldRowState) =>
       oldRowState.temporarilyAddedLabels === set.EMPTY_SET ?
         oldRowState
-      : object.merge(oldRowState, { temporarilyAddedLabels: set.EMPTY_SET }),
+      : merge(oldRowState, { temporarilyAddedLabels: set.EMPTY_SET }),
     )
   }, [])
 
-  const onDragOver = (event: React.DragEvent<Element>) => {
-    const directoryKey = asset.type === backendModule.AssetType.directory ? id : parentId
+  const onDragOver = (event: DragEvent<Element>) => {
+    const directoryKey = asset.type === AssetType.directory ? id : parentId
     const payload = drag.ASSET_ROWS.lookup(event)
     const isPayloadMatch =
       payload != null && payload.every((innerItem) => innerItem.key !== directoryKey)
@@ -448,7 +448,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
 
     if ((isPayloadMatch && canPaste) || event.dataTransfer.types.includes('Files')) {
       event.preventDefault()
-      if (asset.type === backendModule.AssetType.directory && state.category.type !== 'trash') {
+      if (asset.type === AssetType.directory && state.category.type !== 'trash') {
         setIsDraggedOver(true)
       }
     }
@@ -485,7 +485,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
         if (event.type === AssetEventType.downloadSelected ? selected : event.ids.has(asset.id)) {
           if (isCloud) {
             switch (asset.type) {
-              case backendModule.AssetType.project: {
+              case AssetType.project: {
                 try {
                   const details = await queryClient.fetchQuery(
                     backendQueryOptions(
@@ -506,7 +506,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
                 }
                 break
               }
-              case backendModule.AssetType.file: {
+              case AssetType.file: {
                 try {
                   const details = await queryClient.fetchQuery(
                     backendQueryOptions(backend, 'getFileDetails', [asset.id, asset.title, true], {
@@ -524,7 +524,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
                 }
                 break
               }
-              case backendModule.AssetType.datalink: {
+              case AssetType.datalink: {
                 try {
                   const value = await queryClient.fetchQuery(
                     backendQueryOptions(backend, 'getDatalink', [asset.id, asset.title]),
@@ -549,7 +549,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
               }
             }
           } else {
-            if (asset.type === backendModule.AssetType.project) {
+            if (asset.type === AssetType.project) {
               const projectsDirectory = localBackend.extractTypeAndId(asset.parentId).id
               const uuid = localBackend.extractTypeAndId(asset.id).id
               const queryString = new URLSearchParams({ projectsDirectory }).toString()
@@ -588,7 +588,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
             oldRowState.temporarilyRemovedLabels === set.EMPTY_SET
           ) ?
             oldRowState
-          : object.merge(oldRowState, {
+          : merge(oldRowState, {
               temporarilyAddedLabels: labels,
               temporarilyRemovedLabels: set.EMPTY_SET,
             }),
@@ -603,7 +603,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
             oldRowState.temporarilyRemovedLabels === labels
           ) ?
             oldRowState
-          : object.merge(oldRowState, {
+          : merge(oldRowState, {
               temporarilyAddedLabels: set.EMPTY_SET,
               temporarilyRemovedLabels: labels,
             }),
@@ -614,7 +614,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
         setRowState((oldRowState) =>
           oldRowState.temporarilyAddedLabels === set.EMPTY_SET ?
             oldRowState
-          : object.merge(oldRowState, { temporarilyAddedLabels: set.EMPTY_SET }),
+          : merge(oldRowState, { temporarilyAddedLabels: set.EMPTY_SET }),
         )
         const labels = asset.labels
         if (
@@ -637,7 +637,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
         setRowState((oldRowState) =>
           oldRowState.temporarilyAddedLabels === set.EMPTY_SET ?
             oldRowState
-          : object.merge(oldRowState, { temporarilyAddedLabels: set.EMPTY_SET }),
+          : merge(oldRowState, { temporarilyAddedLabels: set.EMPTY_SET }),
         )
         const labels = asset.labels
         if (
@@ -661,11 +661,11 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
   }, initialAssetEvents)
 
   switch (type) {
-    case backendModule.AssetType.directory:
-    case backendModule.AssetType.project:
-    case backendModule.AssetType.file:
-    case backendModule.AssetType.datalink:
-    case backendModule.AssetType.secret: {
+    case AssetType.directory:
+    case AssetType.project:
+    case AssetType.file:
+    case AssetType.datalink:
+    case AssetType.secret: {
       const innerProps: AssetRowInnerProps = {
         asset,
         path,
@@ -698,7 +698,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
                   unsetModal()
                   onClick(innerProps, event)
                   if (
-                    asset.type === backendModule.AssetType.directory &&
+                    asset.type === AssetType.directory &&
                     eventModule.isDoubleClick(event) &&
                     !rowState.isEditingName
                   ) {
@@ -737,8 +737,8 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
                 onDragStart={(event) => {
                   if (
                     rowState.isEditingName ||
-                    (projectState !== backendModule.ProjectState.closed &&
-                      projectState !== backendModule.ProjectState.created &&
+                    (projectState !== ProjectState.closed &&
+                      projectState !== ProjectState.created &&
                       projectState != null)
                   ) {
                     event.preventDefault()
@@ -750,7 +750,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
                   if (dragOverTimeoutHandle.current != null) {
                     window.clearTimeout(dragOverTimeoutHandle.current)
                   }
-                  if (asset.type === backendModule.AssetType.directory) {
+                  if (asset.type === AssetType.directory) {
                     dragOverTimeoutHandle.current = window.setTimeout(() => {
                       toggleDirectoryExpansion(asset.id, true)
                     }, DRAG_EXPAND_DELAY_MS)
@@ -790,8 +790,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
                   if (state.category.type !== 'trash') {
                     props.onDrop?.(event, asset)
                     clearDragState()
-                    const directoryId =
-                      asset.type === backendModule.AssetType.directory ? asset.id : parentId
+                    const directoryId = asset.type === AssetType.directory ? asset.id : parentId
                     const payload = drag.ASSET_ROWS.lookup(event)
                     if (
                       payload != null &&
diff --git a/app/gui/src/dashboard/components/dashboard/AssetSummary.tsx b/app/gui/src/dashboard/components/dashboard/AssetSummary.tsx
index 512bf1e8cdff..f2d0fc41f35c 100644
--- a/app/gui/src/dashboard/components/dashboard/AssetSummary.tsx
+++ b/app/gui/src/dashboard/components/dashboard/AssetSummary.tsx
@@ -1,25 +1,16 @@
 /** @file Displays a few details of an asset. */
-import * as React from 'react'
+import type { AnyAsset } from 'enso-common/src/services/Backend'
+import { formatDateTime } from 'enso-common/src/utilities/data/dateTime'
 
 import BreadcrumbArrowIcon from '#/assets/breadcrumb_arrow.svg'
-
-import * as textProvider from '#/providers/TextProvider'
-
-import * as aria from '#/components/aria'
+import { Text } from '#/components/aria'
 import AssetIcon from '#/components/dashboard/AssetIcon'
-
-import type * as backend from '#/services/Backend'
-
-import * as dateTime from '#/utilities/dateTime'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
-
-// ====================
-// === AssetSummary ===
-// ====================
+import { useText } from '#/providers/TextProvider'
+import { twMerge } from '#/utilities/tailwindMerge'
 
 /** Props for an {@link AssetSummary}. */
 export interface AssetSummaryProps {
-  readonly asset: backend.AnyAsset
+  readonly asset: AnyAsset
   /** If `true`, `lastModified` will be hidden, as it is not relevant. */
   readonly new?: boolean
   readonly newName?: string
@@ -29,10 +20,10 @@ export interface AssetSummaryProps {
 /** Displays a few details of an asset. */
 export default function AssetSummary(props: AssetSummaryProps) {
   const { asset, new: isNew = false, newName, className } = props
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
   return (
     <div
-      className={tailwindMerge.twMerge(
+      className={twMerge(
         'flex min-h-row items-center gap-icon-with-text rounded-default bg-frame px-button-x',
         className,
       )}
@@ -41,7 +32,7 @@ export default function AssetSummary(props: AssetSummaryProps) {
         <AssetIcon asset={asset} />
       </div>
       <div className="flex flex-col">
-        <aria.Text className="flex items-center gap-icon-with-text font-semibold">
+        <Text className="flex items-center gap-icon-with-text font-semibold">
           {asset.title}
           {newName != null && (
             <>
@@ -49,13 +40,11 @@ export default function AssetSummary(props: AssetSummaryProps) {
               {newName}
             </>
           )}
-        </aria.Text>
+        </Text>
         {!isNew && (
-          <aria.Text>
-            {getText('lastModifiedOn', dateTime.formatDateTime(new Date(asset.modifiedAt)))}
-          </aria.Text>
+          <Text>{getText('lastModifiedOn', formatDateTime(new Date(asset.modifiedAt)))}</Text>
         )}
-        <aria.Text>{asset.labels}</aria.Text>
+        <Text>{asset.labels}</Text>
       </div>
     </div>
   )
diff --git a/app/gui/src/dashboard/components/dashboard/DatalinkNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/DatalinkNameColumn.tsx
index 6da620af6452..f10ae5665d0d 100644
--- a/app/gui/src/dashboard/components/dashboard/DatalinkNameColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/DatalinkNameColumn.tsx
@@ -1,38 +1,28 @@
-/** @file The icon and name of a {@link backendModule.SecretAsset}. */
-import DatalinkIcon from '#/assets/datalink.svg'
+/** @file The icon and name of a {@link DatalinkAsset}. */
+import type { DatalinkAsset } from 'enso-common/src/services/Backend'
+import { merger } from 'enso-common/src/utilities/data/object'
 
-import type * as column from '#/components/dashboard/column'
+import DatalinkIcon from '#/assets/datalink.svg'
+import type { AssetColumnProps } from '#/components/dashboard/column'
 import EditableSpan from '#/components/EditableSpan'
-
-import type * as backendModule from '#/services/Backend'
-
 import { useSetIsAssetPanelTemporarilyVisible } from '#/layouts/AssetPanel'
-import * as eventModule from '#/utilities/event'
-import * as indent from '#/utilities/indent'
-import * as object from '#/utilities/object'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
-
-// ====================
-// === DatalinkName ===
-// ====================
+import { isDoubleClick, isSingleClick } from '#/utilities/event'
+import { indentClass } from '#/utilities/indent'
+import { twJoin } from '#/utilities/tailwindMerge'
 
 /** Props for a {@link DatalinkNameColumn}. */
-export interface DatalinkNameColumnProps extends column.AssetColumnProps {
-  readonly item: backendModule.DatalinkAsset
+export interface DatalinkNameColumnProps extends AssetColumnProps {
+  readonly item: DatalinkAsset
 }
 
-/**
- * The icon and name of a {@link backendModule.DatalinkAsset}.
- * @throws {Error} when the asset is not a {@link backendModule.DatalinkAsset}.
- * This should never happen.
- */
+/** The icon and name of a {@link DatalinkAsset}. */
 export default function DatalinkNameColumn(props: DatalinkNameColumnProps) {
   const { item, selected, rowState, setRowState, isEditable, depth } = props
   const setIsAssetPanelTemporarilyVisible = useSetIsAssetPanelTemporarilyVisible()
 
   const setIsEditing = (isEditingName: boolean) => {
     if (isEditable) {
-      setRowState(object.merger({ isEditingName }))
+      setRowState(merger({ isEditingName }))
     }
   }
 
@@ -43,9 +33,9 @@ export default function DatalinkNameColumn(props: DatalinkNameColumnProps) {
 
   return (
     <div
-      className={tailwindMerge.twJoin(
+      className={twJoin(
         'flex h-table-row w-auto min-w-48 max-w-96 items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y contain-strict rounded-rows-child [contain-intrinsic-size:37px] [content-visibility:auto]',
-        indent.indentClass(depth),
+        indentClass(depth),
       )}
       onKeyDown={(event) => {
         if (rowState.isEditingName && event.key === 'Enter') {
@@ -53,9 +43,9 @@ export default function DatalinkNameColumn(props: DatalinkNameColumnProps) {
         }
       }}
       onClick={(event) => {
-        if (eventModule.isSingleClick(event) && selected) {
+        if (isSingleClick(event) && selected) {
           setIsEditing(true)
-        } else if (eventModule.isDoubleClick(event)) {
+        } else if (isDoubleClick(event)) {
           event.stopPropagation()
           setIsAssetPanelTemporarilyVisible(true)
         }
diff --git a/app/gui/src/dashboard/components/dashboard/DirectoryNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/DirectoryNameColumn.tsx
index 97523e49a5c4..418f995f8829 100644
--- a/app/gui/src/dashboard/components/dashboard/DirectoryNameColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/DirectoryNameColumn.tsx
@@ -1,47 +1,39 @@
-/** @file The icon and name of a {@link backendModule.DirectoryAsset}. */
+/** @file The icon and name of a {@link DirectoryAsset}. */
 import { useMutation } from '@tanstack/react-query'
 
+import { isNewTitleValid, type DirectoryAsset } from 'enso-common/src/services/Backend'
+import { merger } from 'enso-common/src/utilities/data/object'
+import { isWhitespaceOnly } from 'enso-common/src/utilities/data/string'
+
 import FolderIcon from '#/assets/folder.svg'
 import FolderArrowIcon from '#/assets/folder_arrow.svg'
-
-import { backendMutationOptions } from '#/hooks/backendHooks'
-
-import { useDriveStore, useToggleDirectoryExpansion } from '#/providers/DriveProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import * as ariaComponents from '#/components/AriaComponents'
-import type * as column from '#/components/dashboard/column'
+import { Button } from '#/components/AriaComponents'
+import type { AssetColumnProps } from '#/components/dashboard/column'
 import EditableSpan from '#/components/EditableSpan'
 import SvgMask from '#/components/SvgMask'
-
-import * as backendModule from '#/services/Backend'
-
+import { backendMutationOptions } from '#/hooks/backendHooks'
 import { useStore } from '#/hooks/storeHooks'
-import * as eventModule from '#/utilities/event'
-import * as indent from '#/utilities/indent'
-import * as object from '#/utilities/object'
-import * as string from '#/utilities/string'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
-import * as validation from '#/utilities/validation'
-
-// =====================
-// === DirectoryName ===
-// =====================
+import { useDriveStore, useToggleDirectoryExpansion } from '#/providers/DriveProvider'
+import { useText } from '#/providers/TextProvider'
+import { isSingleClick } from '#/utilities/event'
+import { indentClass } from '#/utilities/indent'
+import { twJoin, twMerge } from '#/utilities/tailwindMerge'
+import { DIRECTORY_NAME_REGEX } from '#/utilities/validation'
 
 /** Props for a {@link DirectoryNameColumn}. */
-export interface DirectoryNameColumnProps extends column.AssetColumnProps {
-  readonly item: backendModule.DirectoryAsset
+export interface DirectoryNameColumnProps extends AssetColumnProps {
+  readonly item: DirectoryAsset
 }
 
 /**
- * The icon and name of a {@link backendModule.DirectoryAsset}.
- * @throws {Error} when the asset is not a {@link backendModule.DirectoryAsset}.
+ * The icon and name of a {@link DirectoryAsset}.
+ * @throws {Error} when the asset is not a {@link DirectoryAsset}.
  * This should never happen.
  */
 export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
   const { item, depth, selected, state, rowState, setRowState, isEditable } = props
   const { backend, nodeMap } = state
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
   const driveStore = useDriveStore()
   const toggleDirectoryExpansion = useToggleDirectoryExpansion()
   const isExpanded = useStore(driveStore, (storeState) =>
@@ -52,7 +44,7 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
 
   const setIsEditing = (isEditingName: boolean) => {
     if (isEditable) {
-      setRowState(object.merger({ isEditingName }))
+      setRowState(merger({ isEditingName }))
     }
 
     if (!isEditingName) {
@@ -63,7 +55,7 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
   const doRename = async (newTitle: string) => {
     if (isEditable) {
       setIsEditing(false)
-      if (!string.isWhitespaceOnly(newTitle) && newTitle !== item.title) {
+      if (!isWhitespaceOnly(newTitle) && newTitle !== item.title) {
         await updateDirectoryMutation.mutateAsync([item.id, { title: newTitle }, item.title])
       }
     }
@@ -71,9 +63,9 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
 
   return (
     <div
-      className={tailwindMerge.twJoin(
+      className={twJoin(
         'group flex h-table-row w-auto min-w-48 max-w-96 items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y contain-strict rounded-rows-child [contain-intrinsic-size:37px] [content-visibility:auto]',
-        indent.indentClass(depth),
+        indentClass(depth),
       )}
       onKeyDown={(event) => {
         if (rowState.isEditingName && event.key === 'Enter') {
@@ -81,23 +73,19 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
         }
       }}
       onClick={(event) => {
-        if (
-          eventModule.isSingleClick(event) &&
-          selected &&
-          driveStore.getState().selectedKeys.size === 1
-        ) {
+        if (isSingleClick(event) && selected && driveStore.getState().selectedKeys.size === 1) {
           event.stopPropagation()
           setIsEditing(true)
         }
       }}
     >
-      <ariaComponents.Button
+      <Button
         icon={FolderArrowIcon}
         size="medium"
         variant="custom"
         aria-label={isExpanded ? getText('collapse') : getText('expand')}
         tooltipPlacement="left"
-        className={tailwindMerge.twJoin(
+        className={twJoin(
           'm-0 hidden cursor-pointer border-0 transition-transform duration-arrow group-hover:m-name-column-icon group-hover:inline-block',
           isExpanded && 'rotate-90',
         )}
@@ -109,13 +97,13 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
       <EditableSpan
         data-testid="asset-row-name"
         editable={rowState.isEditingName}
-        className={tailwindMerge.twMerge(
+        className={twMerge(
           'cursor-pointer bg-transparent font-naming',
           rowState.isEditingName ? 'cursor-text' : 'cursor-pointer',
         )}
         checkSubmittable={(newTitle) =>
-          validation.DIRECTORY_NAME_REGEX.test(newTitle) &&
-          backendModule.isNewTitleValid(
+          DIRECTORY_NAME_REGEX.test(newTitle) &&
+          isNewTitleValid(
             item,
             newTitle,
             nodeMap.current.get(item.parentId)?.children?.map((child) => child.item),
diff --git a/app/gui/src/dashboard/components/dashboard/FileNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/FileNameColumn.tsx
index 249c7f971f02..58d1165b95e1 100644
--- a/app/gui/src/dashboard/components/dashboard/FileNameColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/FileNameColumn.tsx
@@ -1,45 +1,39 @@
-/** @file The icon and name of a {@link backendModule.FileAsset}. */
+/** @file The icon and name of a {@link FileAsset}. */
 import { useMutation } from '@tanstack/react-query'
 
-import { backendMutationOptions } from '#/hooks/backendHooks'
+import { BackendType, isNewTitleValid, type FileAsset } from 'enso-common/src/services/Backend'
+import { merger } from 'enso-common/src/utilities/data/object'
+import { isWhitespaceOnly } from 'enso-common/src/utilities/data/string'
 
-import type * as column from '#/components/dashboard/column'
+import type { AssetColumnProps } from '#/components/dashboard/column'
 import EditableSpan from '#/components/EditableSpan'
 import SvgMask from '#/components/SvgMask'
-
-import * as backendModule from '#/services/Backend'
-
-import * as eventModule from '#/utilities/event'
-import * as fileIcon from '#/utilities/fileIcon'
-import * as indent from '#/utilities/indent'
-import * as object from '#/utilities/object'
-import * as string from '#/utilities/string'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
-
-// ================
-// === FileName ===
-// ================
+import { backendMutationOptions } from '#/hooks/backendHooks'
+import { isSingleClick } from '#/utilities/event'
+import { fileIcon } from '#/utilities/fileIcon'
+import { indentClass } from '#/utilities/indent'
+import { twJoin } from '#/utilities/tailwindMerge'
 
 /** Props for a {@link FileNameColumn}. */
-export interface FileNameColumnProps extends column.AssetColumnProps {
-  readonly item: backendModule.FileAsset
+export interface FileNameColumnProps extends AssetColumnProps {
+  readonly item: FileAsset
 }
 
 /**
- * The icon and name of a {@link backendModule.FileAsset}.
- * @throws {Error} when the asset is not a {@link backendModule.FileAsset}.
+ * The icon and name of a {@link FileAsset}.
+ * @throws {Error} when the asset is not a {@link FileAsset}.
  * This should never happen.
  */
 export default function FileNameColumn(props: FileNameColumnProps) {
   const { item, selected, state, rowState, setRowState, isEditable, depth } = props
   const { backend, nodeMap } = state
-  const isCloud = backend.type === backendModule.BackendType.remote
+  const isCloud = backend.type === BackendType.remote
 
   const updateFileMutation = useMutation(backendMutationOptions(backend, 'updateFile'))
 
   const setIsEditing = (isEditingName: boolean) => {
     if (isEditable) {
-      setRowState(object.merger({ isEditingName }))
+      setRowState(merger({ isEditingName }))
     }
   }
 
@@ -49,7 +43,7 @@ export default function FileNameColumn(props: FileNameColumnProps) {
   const doRename = async (newTitle: string) => {
     if (isEditable) {
       setIsEditing(false)
-      if (string.isWhitespaceOnly(newTitle)) {
+      if (isWhitespaceOnly(newTitle)) {
         // Do nothing.
       } else if (!isCloud && newTitle !== item.title) {
         await updateFileMutation.mutateAsync([item.id, { title: newTitle }, item.title])
@@ -59,9 +53,9 @@ export default function FileNameColumn(props: FileNameColumnProps) {
 
   return (
     <div
-      className={tailwindMerge.twJoin(
+      className={twJoin(
         'flex h-table-row w-auto min-w-48 max-w-96 items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y contain-strict rounded-rows-child [contain-intrinsic-size:37px] [content-visibility:auto]',
-        indent.indentClass(depth),
+        indentClass(depth),
       )}
       onKeyDown={(event) => {
         if (rowState.isEditingName && event.key === 'Enter') {
@@ -69,20 +63,20 @@ export default function FileNameColumn(props: FileNameColumnProps) {
         }
       }}
       onClick={(event) => {
-        if (eventModule.isSingleClick(event) && selected) {
+        if (isSingleClick(event) && selected) {
           if (!isCloud) {
             setIsEditing(true)
           }
         }
       }}
     >
-      <SvgMask src={fileIcon.fileIcon()} className="m-name-column-icon size-4" />
+      <SvgMask src={fileIcon()} className="m-name-column-icon size-4" />
       <EditableSpan
         data-testid="asset-row-name"
         editable={rowState.isEditingName}
         className="grow bg-transparent font-naming"
         checkSubmittable={(newTitle) =>
-          backendModule.isNewTitleValid(
+          isNewTitleValid(
             item,
             newTitle,
             nodeMap.current.get(item.parentId)?.children?.map((child) => child.item),
diff --git a/app/gui/src/dashboard/components/dashboard/Label.tsx b/app/gui/src/dashboard/components/dashboard/Label.tsx
index 7420a08b7ec0..7a67943fbbfb 100644
--- a/app/gui/src/dashboard/components/dashboard/Label.tsx
+++ b/app/gui/src/dashboard/components/dashboard/Label.tsx
@@ -1,13 +1,17 @@
 /** @file An label that can be applied to an asset. */
 import type { DragEvent, MouseEvent, PropsWithChildren } from 'react'
 
+import {
+  lChColorToCssColor,
+  type Label as BackendLabel,
+  type LChColor,
+} from 'enso-common/src/services/Backend'
+
 import type { PressEvent } from '#/components/aria'
 import { Text } from '#/components/AriaComponents'
 import FocusRing from '#/components/styled/FocusRing'
 import { useHandleFocusMove } from '#/hooks/focusHooks'
 import { useFocusDirection } from '#/providers/FocusDirectionProvider'
-import type { Label as BackendLabel } from '#/services/Backend'
-import { lChColorToCssColor, type LChColor } from '#/services/Backend'
 import { twMerge } from '#/utilities/tailwindMerge'
 
 // =============
diff --git a/app/gui/src/dashboard/components/dashboard/Permission.tsx b/app/gui/src/dashboard/components/dashboard/Permission.tsx
index cae94cf12d21..85c5b207e81e 100644
--- a/app/gui/src/dashboard/components/dashboard/Permission.tsx
+++ b/app/gui/src/dashboard/components/dashboard/Permission.tsx
@@ -1,81 +1,76 @@
 /** @file Permissions for a specific user or user group on a specific asset. */
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
-import type * as text from 'enso-common/src/text'
-
-import { backendMutationOptions } from '#/hooks/backendHooks'
-import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
-
-import * as textProvider from '#/providers/TextProvider'
+import type Backend from 'enso-common/src/services/Backend'
+import {
+  AssetType,
+  getAssetPermissionId,
+  getAssetPermissionName,
+  type Asset,
+  type AssetPermission,
+  type UserPermissionIdentifier,
+} from 'enso-common/src/services/Backend'
+import type { TextId } from 'enso-common/src/text'
+import { merge } from 'enso-common/src/utilities/data/object'
 
+import { Text } from '#/components/AriaComponents'
 import PermissionSelector from '#/components/dashboard/PermissionSelector'
 import FocusArea from '#/components/styled/FocusArea'
-
-import type Backend from '#/services/Backend'
-import * as backendModule from '#/services/Backend'
-
-import { Text } from '#/components/AriaComponents'
-import * as object from '#/utilities/object'
-
-// =================
-// === Constants ===
-// =================
-
-const ASSET_TYPE_TO_TEXT_ID: Readonly<Record<backendModule.AssetType, text.TextId>> = {
-  [backendModule.AssetType.directory]: 'directoryAssetType',
-  [backendModule.AssetType.project]: 'projectAssetType',
-  [backendModule.AssetType.file]: 'fileAssetType',
-  [backendModule.AssetType.secret]: 'secretAssetType',
-  [backendModule.AssetType.specialEmpty]: 'specialEmptyAssetType',
-  [backendModule.AssetType.specialError]: 'specialErrorAssetType',
-  [backendModule.AssetType.specialLoading]: 'specialLoadingAssetType',
-  [backendModule.AssetType.datalink]: 'datalinkAssetType',
-} satisfies { [Type in backendModule.AssetType]: `${Type}AssetType` }
-
-// ==================
-// === Permission ===
-// ==================
+import { backendMutationOptions } from '#/hooks/backendHooks'
+import { useToastAndLog } from '#/hooks/toastAndLogHooks'
+import { useText } from '#/providers/TextProvider'
+
+const ASSET_TYPE_TO_TEXT_ID: Readonly<Record<AssetType, TextId>> = {
+  [AssetType.directory]: 'directoryAssetType',
+  [AssetType.project]: 'projectAssetType',
+  [AssetType.file]: 'fileAssetType',
+  [AssetType.secret]: 'secretAssetType',
+  [AssetType.specialEmpty]: 'specialEmptyAssetType',
+  [AssetType.specialError]: 'specialErrorAssetType',
+  [AssetType.specialLoading]: 'specialLoadingAssetType',
+  [AssetType.datalink]: 'datalinkAssetType',
+} satisfies { [Type in AssetType]: `${Type}AssetType` }
 
 /** Props for a {@link Permission}. */
 export interface PermissionProps {
   readonly backend: Backend
-  readonly asset: Pick<backendModule.Asset, 'id' | 'permissions' | 'type'>
+  readonly asset: Pick<Asset, 'id' | 'permissions' | 'type'>
 
-  readonly self: backendModule.AssetPermission
+  readonly self: AssetPermission
   readonly isOnlyOwner: boolean
-  readonly permission: backendModule.AssetPermission
-  readonly setPermission: (userPermissions: backendModule.AssetPermission) => void
-  readonly doDelete: (user: backendModule.UserPermissionIdentifier) => void
+  readonly permission: AssetPermission
+  readonly setPermission: (userPermissions: AssetPermission) => void
+  readonly doDelete: (user: UserPermissionIdentifier) => void
 }
 
 /** A user or group, and their permissions for a specific asset. */
 export default function Permission(props: PermissionProps) {
   const { backend, asset, self, isOnlyOwner, doDelete } = props
   const { permission: initialPermission, setPermission: outerSetPermission } = props
-  const { getText } = textProvider.useText()
-  const toastAndLog = toastAndLogHooks.useToastAndLog()
-  const [permission, setPermission] = React.useState(initialPermission)
-  const permissionId = backendModule.getAssetPermissionId(permission)
-  const isDisabled = isOnlyOwner && backendModule.getAssetPermissionId(self) === permissionId
+  const { getText } = useText()
+  const toastAndLog = useToastAndLog()
+  const [permission, setPermission] = useState(initialPermission)
+  const permissionId = getAssetPermissionId(permission)
+  const isDisabled = isOnlyOwner && getAssetPermissionId(self) === permissionId
   const assetTypeName = getText(ASSET_TYPE_TO_TEXT_ID[asset.type])
 
   const createPermission = useMutation(
     backendMutationOptions(backend, 'createPermission'),
   ).mutateAsync
 
-  React.useEffect(() => {
+  useEffect(() => {
     setPermission(initialPermission)
   }, [initialPermission])
 
-  const doSetPermission = async (newPermission: backendModule.AssetPermission) => {
+  const doSetPermission = async (newPermission: AssetPermission) => {
     try {
       setPermission(newPermission)
       outerSetPermission(newPermission)
       await createPermission([
         {
-          actorsIds: [backendModule.getAssetPermissionId(newPermission)],
+          actorsIds: [getAssetPermissionId(newPermission)],
           resourceId: asset.id,
           action: newPermission.permission,
         },
@@ -99,13 +94,13 @@ export default function Permission(props: PermissionProps) {
             action={permission.permission}
             assetType={asset.type}
             onChange={async (permissions) => {
-              await doSetPermission(object.merge(permission, { permission: permissions }))
+              await doSetPermission(merge(permission, { permission: permissions }))
             }}
             doDelete={() => {
-              doDelete(backendModule.getAssetPermissionId(permission))
+              doDelete(getAssetPermissionId(permission))
             }}
           />
-          <Text truncate="1">{backendModule.getAssetPermissionName(permission)}</Text>
+          <Text truncate="1">{getAssetPermissionName(permission)}</Text>
         </div>
       )}
     </FocusArea>
diff --git a/app/gui/src/dashboard/components/dashboard/PermissionSelector.tsx b/app/gui/src/dashboard/components/dashboard/PermissionSelector.tsx
index e87ad357a7f1..4789eec4c874 100644
--- a/app/gui/src/dashboard/components/dashboard/PermissionSelector.tsx
+++ b/app/gui/src/dashboard/components/dashboard/PermissionSelector.tsx
@@ -1,20 +1,24 @@
 /** @file A selector for all possible permissions. */
-import * as React from 'react'
+import { useRef, useState, type JSX } from 'react'
 
-import * as textProvider from '#/providers/TextProvider'
+import type { AssetType } from 'enso-common/src/services/Backend'
 
-import * as ariaComponents from '#/components/AriaComponents'
+import { Button } from '#/components/AriaComponents'
 import PermissionTypeSelector from '#/components/dashboard/PermissionTypeSelector'
 import Modal from '#/components/Modal'
-
-import type * as backend from '#/services/Backend'
-
-import * as permissions from '#/utilities/permissions'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
-
-// =================
-// === Constants ===
-// =================
+import { useText } from '#/providers/TextProvider'
+import {
+  DOCS_CLASS_NAME,
+  EXEC_CLASS_NAME,
+  FROM_PERMISSION_ACTION,
+  PERMISSION_CLASS_NAME,
+  Permission,
+  TYPE_TO_PERMISSION_ACTION,
+  TYPE_TO_TEXT_ID,
+  toPermissionAction,
+  type PermissionAction,
+} from '#/utilities/permissions'
+import { twJoin } from '#/utilities/tailwindMerge'
 
 /** The horizontal offset of the {@link PermissionTypeSelector} from its parent element. */
 const TYPE_SELECTOR_X_OFFSET_PX = -8
@@ -30,10 +34,6 @@ const LABEL_BORDER_RADIUS_PX = 12
 /** The width of the straight section of the permission label. */
 const LABEL_STRAIGHT_WIDTH_PX = 97
 
-// ==========================
-// === PermissionSelector ===
-// ==========================
-
 /** Props for a {@link PermissionSelector}. */
 export interface PermissionSelectorProps {
   readonly showDelete?: boolean
@@ -44,12 +44,12 @@ export interface PermissionSelectorProps {
   /** Overrides the vertical offset of the {@link PermissionTypeSelector}. */
   readonly typeSelectorYOffsetPx?: number
   readonly error?: string | null
-  readonly selfPermission: permissions.PermissionAction
+  readonly selfPermission: PermissionAction
   /** If this prop changes, the internal state will be updated too. */
-  readonly action: permissions.PermissionAction
-  readonly assetType: backend.AssetType
+  readonly action: PermissionAction
+  readonly assetType: AssetType
   readonly className?: string
-  readonly onChange: (action: permissions.PermissionAction) => void
+  readonly onChange: (action: PermissionAction) => void
   readonly doDelete?: () => void
 }
 
@@ -58,13 +58,13 @@ export default function PermissionSelector(props: PermissionSelectorProps) {
   const { showDelete = false, isDisabled = false, isInput = false, typeSelectorYOffsetPx } = props
   const { error, selfPermission, action: actionRaw, assetType, className } = props
   const { onChange, doDelete } = props
-  const { getText } = textProvider.useText()
-  const [action, setActionRaw] = React.useState(actionRaw)
-  const [TheChild, setTheChild] = React.useState<(() => React.JSX.Element) | null>()
-  const permissionSelectorButtonRef = React.useRef<HTMLButtonElement>(null)
-  const permission = permissions.FROM_PERMISSION_ACTION[action]
+  const { getText } = useText()
+  const [action, setActionRaw] = useState(actionRaw)
+  const [TheChild, setTheChild] = useState<(() => JSX.Element) | null>()
+  const permissionSelectorButtonRef = useRef<HTMLButtonElement>(null)
+  const permission = FROM_PERMISSION_ACTION[action]
 
-  const setAction = (newAction: permissions.PermissionAction) => {
+  const setAction = (newAction: PermissionAction) => {
     setActionRaw(newAction)
     onChange(newAction)
   }
@@ -110,15 +110,15 @@ export default function PermissionSelector(props: PermissionSelectorProps) {
                   style={{ left, top }}
                   onChange={(type) => {
                     setTheChild(null)
-                    if (type === permissions.Permission.delete) {
+                    if (type === Permission.delete) {
                       doDelete?.()
                     } else {
-                      const newAction = permissions.TYPE_TO_PERMISSION_ACTION[type]
-                      const newPermissions = permissions.FROM_PERMISSION_ACTION[newAction]
+                      const newAction = TYPE_TO_PERMISSION_ACTION[type]
+                      const newPermissions = FROM_PERMISSION_ACTION[newAction]
                       if ('docs' in permission && 'docs' in newPermissions) {
-                        setAction(permissions.toPermissionAction({ ...permission, type }))
+                        setAction(toPermissionAction({ ...permission, type }))
                       } else {
-                        setAction(permissions.TYPE_TO_PERMISSION_ACTION[type])
+                        setAction(TYPE_TO_PERMISSION_ACTION[type])
                       }
                     }
                   }}
@@ -131,14 +131,14 @@ export default function PermissionSelector(props: PermissionSelectorProps) {
     }
   }
 
-  let permissionDisplay: React.JSX.Element
+  let permissionDisplay: JSX.Element
 
   switch (permission.type) {
-    case permissions.Permission.read:
-    case permissions.Permission.view: {
+    case Permission.read:
+    case Permission.view: {
       permissionDisplay = (
         <div className="flex w-[121px] gap-px">
-          <ariaComponents.Button
+          <Button
             size="xsmall"
             variant="custom"
             rounded="none"
@@ -146,25 +146,22 @@ export default function PermissionSelector(props: PermissionSelectorProps) {
             isDisabled={isDisabled}
             isActive={!isDisabled || !isInput}
             {...(isDisabled && error != null ? { title: error } : {})}
-            className={tailwindMerge.twJoin(
-              'flex-1 rounded-l-full',
-              permissions.PERMISSION_CLASS_NAME[permission.type],
-            )}
+            className={twJoin('flex-1 rounded-l-full', PERMISSION_CLASS_NAME[permission.type])}
             onPress={doShowPermissionTypeSelector}
           >
-            {getText(permissions.TYPE_TO_TEXT_ID[permission.type])}
-          </ariaComponents.Button>
-          <ariaComponents.Button
+            {getText(TYPE_TO_TEXT_ID[permission.type])}
+          </Button>
+          <Button
             size="xsmall"
             variant="custom"
             rounded="none"
             isDisabled={isDisabled}
             isActive={permission.docs && (!isDisabled || !isInput)}
             {...(isDisabled && error != null ? { title: error } : {})}
-            className={tailwindMerge.twJoin('flex-1', permissions.DOCS_CLASS_NAME)}
+            className={twJoin('flex-1', DOCS_CLASS_NAME)}
             onPress={() => {
               setAction(
-                permissions.toPermissionAction({
+                toPermissionAction({
                   type: permission.type,
                   execute: false,
                   docs: !permission.docs,
@@ -173,18 +170,18 @@ export default function PermissionSelector(props: PermissionSelectorProps) {
             }}
           >
             {getText('docsPermissionModifier')}
-          </ariaComponents.Button>
-          <ariaComponents.Button
+          </Button>
+          <Button
             size="xsmall"
             variant="custom"
             rounded="none"
             isDisabled={isDisabled}
             isActive={permission.execute && (!isDisabled || !isInput)}
             {...(isDisabled && error != null ? { title: error } : {})}
-            className={tailwindMerge.twJoin('flex-1 rounded-r-full', permissions.EXEC_CLASS_NAME)}
+            className={twJoin('flex-1 rounded-r-full', EXEC_CLASS_NAME)}
             onPress={() => {
               setAction(
-                permissions.toPermissionAction({
+                toPermissionAction({
                   type: permission.type,
                   execute: !permission.execute,
                   docs: false,
@@ -193,14 +190,14 @@ export default function PermissionSelector(props: PermissionSelectorProps) {
             }}
           >
             {getText('execPermissionModifier')}
-          </ariaComponents.Button>
+          </Button>
         </div>
       )
       break
     }
     default: {
       permissionDisplay = (
-        <ariaComponents.Button
+        <Button
           size="xsmall"
           variant="custom"
           ref={permissionSelectorButtonRef}
@@ -208,14 +205,11 @@ export default function PermissionSelector(props: PermissionSelectorProps) {
           rounded="full"
           isActive={!isDisabled || !isInput}
           {...(isDisabled && error != null ? { title: error } : {})}
-          className={tailwindMerge.twJoin(
-            'w-[121px]',
-            permissions.PERMISSION_CLASS_NAME[permission.type],
-          )}
+          className={twJoin('w-[121px]', PERMISSION_CLASS_NAME[permission.type])}
           onPress={doShowPermissionTypeSelector}
         >
-          {getText(permissions.TYPE_TO_TEXT_ID[permission.type])}
-        </ariaComponents.Button>
+          {getText(TYPE_TO_TEXT_ID[permission.type])}
+        </Button>
       )
       break
     }
diff --git a/app/gui/src/dashboard/components/dashboard/PermissionTypeSelector.tsx b/app/gui/src/dashboard/components/dashboard/PermissionTypeSelector.tsx
index 89cc85419965..9652d4166d3b 100644
--- a/app/gui/src/dashboard/components/dashboard/PermissionTypeSelector.tsx
+++ b/app/gui/src/dashboard/components/dashboard/PermissionTypeSelector.tsx
@@ -1,88 +1,79 @@
 /** @file A selector for all possible permission types. */
-import * as React from 'react'
+import type { CSSProperties } from 'react'
 
-import * as aria from '#/components/aria'
-import * as ariaComponents from '#/components/AriaComponents'
-import FocusArea from '#/components/styled/FocusArea'
-
-import * as backend from '#/services/Backend'
-
-import * as permissions from '#/utilities/permissions'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
+import { AssetType } from 'enso-common/src/services/Backend'
 
-// =================
-// === Constants ===
-// =================
+import { Label, Text } from '#/components/aria'
+import { Button } from '#/components/AriaComponents'
+import FocusArea from '#/components/styled/FocusArea'
+import { Permission, PERMISSION_CLASS_NAME, PermissionAction } from '#/utilities/permissions'
+import { twMerge } from '#/utilities/tailwindMerge'
 
-const CAPITALIZED_ASSET_TYPE: Readonly<Record<backend.AssetType, string>> = {
-  [backend.AssetType.directory]: 'Folder',
-  [backend.AssetType.project]: 'Project',
-  [backend.AssetType.file]: 'File',
-  [backend.AssetType.datalink]: 'Datalink',
-  [backend.AssetType.secret]: 'Secret',
+const CAPITALIZED_ASSET_TYPE: Readonly<Record<AssetType, string>> = {
+  [AssetType.directory]: 'Folder',
+  [AssetType.project]: 'Project',
+  [AssetType.file]: 'File',
+  [AssetType.datalink]: 'Datalink',
+  [AssetType.secret]: 'Secret',
   // These assets should never be visible, since they don't appear in the UI at all.
-  [backend.AssetType.specialEmpty]: '',
-  [backend.AssetType.specialError]: '',
-  [backend.AssetType.specialLoading]: '',
+  [AssetType.specialEmpty]: '',
+  [AssetType.specialError]: '',
+  [AssetType.specialLoading]: '',
 }
 
 /** Data needed to display a single permission type. */
 interface PermissionTypeData {
-  readonly type: permissions.Permission
-  readonly previous: permissions.Permission | null
-  readonly description: (type: backend.AssetType) => string
+  readonly type: Permission
+  readonly previous: Permission | null
+  readonly description: (type: AssetType) => string
 }
 
 /** Data needed to display each permission type. */
 const PERMISSION_TYPE_DATA: readonly PermissionTypeData[] = [
   {
-    type: permissions.Permission.view,
+    type: Permission.view,
     previous: null,
     description: (type) =>
       CAPITALIZED_ASSET_TYPE[type] +
       ` visibility only. Optionally, edit docs${
-        type === backend.AssetType.project ? ' and execute project' : ''
+        type === AssetType.project ? ' and execute project' : ''
       }.`,
   },
   {
-    type: permissions.Permission.read,
-    previous: permissions.Permission.view,
+    type: Permission.read,
+    previous: Permission.view,
     description: (type) => CAPITALIZED_ASSET_TYPE[type] + ' content reading.',
   },
   {
-    type: permissions.Permission.edit,
-    previous: permissions.Permission.read,
+    type: Permission.edit,
+    previous: Permission.read,
     description: (type) => CAPITALIZED_ASSET_TYPE[type] + ' editing.',
   },
   {
-    type: permissions.Permission.admin,
-    previous: permissions.Permission.edit,
+    type: Permission.admin,
+    previous: Permission.edit,
     description: () => 'Sharing management.',
   },
   {
-    type: permissions.Permission.owner,
-    previous: permissions.Permission.admin,
+    type: Permission.owner,
+    previous: Permission.admin,
     description: (type) => CAPITALIZED_ASSET_TYPE[type] + ' removal permission.',
   },
   {
-    type: permissions.Permission.delete,
+    type: Permission.delete,
     previous: null,
     description: () => 'Remove all permissions from this user.',
   },
 ]
 
-// ==============================
-// === PermissionTypeSelector ===
-// ==============================
-
 /** Props for a {@link PermissionTypeSelector}. */
 export interface PermissionTypeSelectorProps {
   readonly showDelete?: boolean
-  readonly selfPermission: permissions.PermissionAction
-  readonly type: permissions.Permission
-  readonly assetType: backend.AssetType
-  readonly style?: React.CSSProperties
-  readonly onChange: (permission: permissions.Permission) => void
+  readonly selfPermission: PermissionAction
+  readonly type: Permission
+  readonly assetType: AssetType
+  readonly style?: CSSProperties
+  readonly onChange: (permission: Permission) => void
 }
 
 /** A selector for all possible permission types. */
@@ -102,16 +93,14 @@ export default function PermissionTypeSelector(props: PermissionTypeSelectorProp
           <div className="group relative flex w-permission-type-selector flex-col p-permission-type-selector">
             {PERMISSION_TYPE_DATA.filter(
               (data) =>
-                (showDelete ? true : data.type !== permissions.Permission.delete) &&
-                (selfPermission === permissions.PermissionAction.own ?
-                  true
-                : data.type !== permissions.Permission.owner),
+                (showDelete ? true : data.type !== Permission.delete) &&
+                (selfPermission === PermissionAction.own ? true : data.type !== Permission.owner),
             ).map((data) => (
-              <ariaComponents.Button
+              <Button
                 size="custom"
                 variant="custom"
                 key={data.type}
-                className={tailwindMerge.twMerge(
+                className={twMerge(
                   'flex h-row items-start justify-stretch gap-permission-type-button rounded-full p-permission-type-button hover:bg-black/5',
                   type === data.type && 'bg-black/5 hover:!bg-black/5 group-hover:bg-transparent',
                 )}
@@ -120,9 +109,9 @@ export default function PermissionTypeSelector(props: PermissionTypeSelectorProp
                 }}
               >
                 <div
-                  className={tailwindMerge.twMerge(
+                  className={twMerge(
                     'h-text w-permission-type rounded-full py-permission-type-y',
-                    permissions.PERMISSION_CLASS_NAME[data.type],
+                    PERMISSION_CLASS_NAME[data.type],
                   )}
                 >
                   {data.type}
@@ -130,13 +119,13 @@ export default function PermissionTypeSelector(props: PermissionTypeSelectorProp
                 {/* This is a symbol that should never need to be localized, since it is effectively
                  * an icon. */}
                 {/* eslint-disable-next-line no-restricted-syntax */}
-                <aria.Text className="text font-normal">=</aria.Text>
+                <Text className="text font-normal">=</Text>
                 {data.previous != null && (
                   <>
                     <div
-                      className={tailwindMerge.twMerge(
+                      className={twMerge(
                         'h-text w-permission-type rounded-full py-permission-type-y text-center',
-                        permissions.PERMISSION_CLASS_NAME[data.previous],
+                        PERMISSION_CLASS_NAME[data.previous],
                       )}
                     >
                       {data.previous}
@@ -144,11 +133,11 @@ export default function PermissionTypeSelector(props: PermissionTypeSelectorProp
                     {/* This is a symbol that should never need to be localized, since it is effectively
                      * an icon. */}
                     {/* eslint-disable-next-line no-restricted-syntax */}
-                    <aria.Text className="text font-normal">+</aria.Text>
+                    <Text className="text font-normal">+</Text>
                   </>
                 )}
-                <aria.Label className="text">{data.description(assetType)}</aria.Label>
-              </ariaComponents.Button>
+                <Label className="text">{data.description(assetType)}</Label>
+              </Button>
             ))}
           </div>
         </div>
diff --git a/app/gui/src/dashboard/components/dashboard/ProjectIcon.tsx b/app/gui/src/dashboard/components/dashboard/ProjectIcon.tsx
index dccfd3cdf7bc..51ebc1ecb90a 100644
--- a/app/gui/src/dashboard/components/dashboard/ProjectIcon.tsx
+++ b/app/gui/src/dashboard/components/dashboard/ProjectIcon.tsx
@@ -1,95 +1,89 @@
 /** @file An interactive button indicating the status of a project. */
-import * as reactQuery from '@tanstack/react-query'
+import { useMemo } from 'react'
+
+import { useQuery } from '@tanstack/react-query'
+
+import type Backend from 'enso-common/src/services/Backend'
+import { BackendType, ProjectState, type ProjectAsset } from 'enso-common/src/services/Backend'
 
 import ArrowUpIcon from '#/assets/arrow_up.svg'
 import PlayIcon from '#/assets/play.svg'
 import StopIcon from '#/assets/stop.svg'
-
-import * as projectHooks from '#/hooks/projectHooks'
-
-import * as authProvider from '#/providers/AuthProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import * as ariaComponents from '#/components/AriaComponents'
+import { Button } from '#/components/AriaComponents'
 import { Spinner } from '#/components/Spinner'
 import { StatelessSpinner, type SpinnerState } from '#/components/StatelessSpinner'
-
-import type Backend from '#/services/Backend'
-import * as backendModule from '#/services/Backend'
-
 import { useBackendQuery } from '#/hooks/backendHooks'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
-import { useMemo } from 'react'
-
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-
-// =================
-// === Constants ===
-// =================
-
-export const CLOSED_PROJECT_STATE = { type: backendModule.ProjectState.closed } as const
+import {
+  createGetProjectDetailsQuery,
+  useCanOpenProjects,
+  useCloseProject,
+  useOpenEditor,
+  useOpenProject,
+} from '#/hooks/projectHooks'
+import { useFullUserSession } from '#/providers/AuthProvider'
+import { useText } from '#/providers/TextProvider'
+import { twJoin, twMerge } from '#/utilities/tailwindMerge'
+
+export const CLOSED_PROJECT_STATE = { type: ProjectState.closed } as const
 
 /**
- * The corresponding {@link SpinnerState} for each {@link backendModule.ProjectState},
+ * The corresponding {@link SpinnerState} for each {@link ProjectState},
  * when using the remote backend.
  */
-const REMOTE_SPINNER_STATE: Readonly<Record<backendModule.ProjectState, SpinnerState>> = {
-  [backendModule.ProjectState.closed]: 'loading-slow',
-  [backendModule.ProjectState.closing]: 'loading-medium',
-  [backendModule.ProjectState.created]: 'loading-slow',
-  [backendModule.ProjectState.new]: 'loading-slow',
-  [backendModule.ProjectState.placeholder]: 'loading-slow',
-  [backendModule.ProjectState.openInProgress]: 'loading-slow',
-  [backendModule.ProjectState.provisioned]: 'loading-slow',
-  [backendModule.ProjectState.scheduled]: 'loading-slow',
-  [backendModule.ProjectState.opened]: 'done',
+const REMOTE_SPINNER_STATE: Readonly<Record<ProjectState, SpinnerState>> = {
+  [ProjectState.closed]: 'loading-slow',
+  [ProjectState.closing]: 'loading-medium',
+  [ProjectState.created]: 'loading-slow',
+  [ProjectState.new]: 'loading-slow',
+  [ProjectState.placeholder]: 'loading-slow',
+  [ProjectState.openInProgress]: 'loading-slow',
+  [ProjectState.provisioned]: 'loading-slow',
+  [ProjectState.scheduled]: 'loading-slow',
+  [ProjectState.opened]: 'done',
 }
 /**
- * The corresponding {@link SpinnerState} for each {@link backendModule.ProjectState},
+ * The corresponding {@link SpinnerState} for each {@link ProjectState},
  * when using the local backend.
  */
-const LOCAL_SPINNER_STATE: Readonly<Record<backendModule.ProjectState, SpinnerState>> = {
-  [backendModule.ProjectState.closed]: 'loading-slow',
-  [backendModule.ProjectState.closing]: 'loading-medium',
-  [backendModule.ProjectState.created]: 'loading-slow',
-  [backendModule.ProjectState.new]: 'loading-slow',
-  [backendModule.ProjectState.placeholder]: 'loading-medium',
-  [backendModule.ProjectState.openInProgress]: 'loading-slow',
-  [backendModule.ProjectState.provisioned]: 'loading-medium',
-  [backendModule.ProjectState.scheduled]: 'loading-medium',
-  [backendModule.ProjectState.opened]: 'done',
+const LOCAL_SPINNER_STATE: Readonly<Record<ProjectState, SpinnerState>> = {
+  [ProjectState.closed]: 'loading-slow',
+  [ProjectState.closing]: 'loading-medium',
+  [ProjectState.created]: 'loading-slow',
+  [ProjectState.new]: 'loading-slow',
+  [ProjectState.placeholder]: 'loading-medium',
+  [ProjectState.openInProgress]: 'loading-slow',
+  [ProjectState.provisioned]: 'loading-medium',
+  [ProjectState.scheduled]: 'loading-medium',
+  [ProjectState.opened]: 'done',
 }
 
-// ===================
-// === ProjectIcon ===
-// ===================
-
 /** Props for a {@link ProjectIcon}. */
 export interface ProjectIconProps {
   readonly isPlaceholder: boolean
   readonly backend: Backend
   readonly isDisabled: boolean
   readonly isOpened: boolean
-  readonly item: backendModule.ProjectAsset
+  readonly item: ProjectAsset
 }
 
 /** An interactive icon indicating the status of a project. */
 export default function ProjectIcon(props: ProjectIconProps) {
   const { backend, item, isOpened, isDisabled: isDisabledRaw, isPlaceholder } = props
-  const isUnconditionallyDisabled = !projectHooks.useCanOpenProjects()
+  const isUnconditionallyDisabled = !useCanOpenProjects()
   const isDisabled = isDisabledRaw || isUnconditionallyDisabled
 
-  const openProject = projectHooks.useOpenProject()
-  const closeProject = projectHooks.useCloseProject()
-  const openProjectTab = projectHooks.useOpenEditor()
+  const openProject = useOpenProject()
+  const closeProject = useCloseProject()
+  const openProjectTab = useOpenEditor()
 
-  const { user } = authProvider.useFullUserSession()
-  const { getText } = textProvider.useText()
+  const { user } = useFullUserSession()
+  const { getText } = useText()
 
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   const itemProjectState = item.projectState ?? CLOSED_PROJECT_STATE
-  const { data: projectState, isError } = reactQuery.useQuery({
-    ...projectHooks.createGetProjectDetailsQuery({
+  const { data: projectState, isError } = useQuery({
+    ...createGetProjectDetailsQuery({
       assetId: item.id,
       parentId: item.parentId,
       backend,
@@ -101,7 +95,7 @@ export default function ProjectIcon(props: ProjectIconProps) {
   const status = projectState?.type
   const isRunningInBackground = projectState?.executeAsync ?? false
 
-  const isCloud = backend.type === backendModule.BackendType.remote
+  const isCloud = backend.type === BackendType.remote
 
   const isOtherUserUsingProject =
     isCloud && itemProjectState.openedBy != null && itemProjectState.openedBy !== user.email
@@ -124,7 +118,7 @@ export default function ProjectIcon(props: ProjectIconProps) {
 
   const state = (() => {
     if (!isOpened && !isPlaceholder) {
-      return backendModule.ProjectState.closed
+      return ProjectState.closed
     }
     // Project is closed, show open button
     if (!isOpened) {
@@ -133,11 +127,11 @@ export default function ProjectIcon(props: ProjectIconProps) {
 
     if (status == null) {
       // Project is opened, but not yet queried.
-      return backendModule.ProjectState.openInProgress
+      return ProjectState.openInProgress
     }
-    if (status === backendModule.ProjectState.closed) {
+    if (status === ProjectState.closed) {
       // Project is opened locally, but not on the backend yet.
-      return backendModule.ProjectState.openInProgress
+      return ProjectState.openInProgress
     }
     return status
   })()
@@ -150,7 +144,7 @@ export default function ProjectIcon(props: ProjectIconProps) {
     } else if (status == null) {
       return 'loading-slow'
     } else {
-      return backend.type === backendModule.BackendType.remote ?
+      return backend.type === BackendType.remote ?
           REMOTE_SPINNER_STATE[status]
         : LOCAL_SPINNER_STATE[status]
     }
@@ -167,29 +161,29 @@ export default function ProjectIcon(props: ProjectIconProps) {
   })
 
   switch (state) {
-    case backendModule.ProjectState.new:
-    case backendModule.ProjectState.closing:
-    case backendModule.ProjectState.closed:
-    case backendModule.ProjectState.created:
+    case ProjectState.new:
+    case ProjectState.closing:
+    case ProjectState.closed:
+    case ProjectState.created:
       return (
-        <ariaComponents.Button
+        <Button
           size="custom"
           variant="icon"
           icon={PlayIcon}
           aria-label={disabledTooltip ?? getText('openInEditor')}
           tooltipPlacement="left"
           extraClickZone="xsmall"
-          isDisabled={isDisabled || projectState?.type === backendModule.ProjectState.closing}
+          isDisabled={isDisabled || projectState?.type === ProjectState.closing}
           onPress={doOpenProject}
         />
       )
-    case backendModule.ProjectState.openInProgress:
-    case backendModule.ProjectState.scheduled:
-    case backendModule.ProjectState.provisioned:
-    case backendModule.ProjectState.placeholder:
+    case ProjectState.openInProgress:
+    case ProjectState.scheduled:
+    case ProjectState.provisioned:
+    case ProjectState.placeholder:
       return (
         <div className="relative flex">
-          <ariaComponents.Button
+          <Button
             size="large"
             variant="icon"
             extraClickZone="xsmall"
@@ -197,24 +191,24 @@ export default function ProjectIcon(props: ProjectIconProps) {
             icon={StopIcon}
             aria-label={userOpeningProjectTooltip ?? getText('stopExecution')}
             tooltipPlacement="left"
-            className={tailwindMerge.twJoin(isRunningInBackground && 'text-green')}
+            className={twJoin(isRunningInBackground && 'text-green')}
             {...(isOtherUserUsingProject ? { title: getText('otherUserIsUsingProjectError') } : {})}
             onPress={doCloseProject}
           />
           <StatelessSpinner
             state={spinnerState}
-            className={tailwindMerge.twJoin(
+            className={twJoin(
               'pointer-events-none absolute inset-0',
               isRunningInBackground && 'text-green',
             )}
           />
         </div>
       )
-    case backendModule.ProjectState.opened:
+    case ProjectState.opened:
       return (
         <div className="flex flex-row gap-0.5">
           <div className="relative flex">
-            <ariaComponents.Button
+            <Button
               size="large"
               variant="icon"
               extraClickZone="xsmall"
@@ -222,12 +216,12 @@ export default function ProjectIcon(props: ProjectIconProps) {
               icon={StopIcon}
               aria-label={userOpeningProjectTooltip ?? getText('stopExecution')}
               tooltipPlacement="left"
-              className={tailwindMerge.twJoin(isRunningInBackground && 'text-green')}
+              className={twJoin(isRunningInBackground && 'text-green')}
               onPress={doCloseProject}
             />
             <Spinner
               state="done"
-              className={tailwindMerge.twMerge(
+              className={twMerge(
                 'pointer-events-none absolute inset-0',
                 isRunningInBackground && 'text-green',
               )}
@@ -235,7 +229,7 @@ export default function ProjectIcon(props: ProjectIconProps) {
           </div>
 
           {!isOtherUserUsingProject && !isRunningInBackground && (
-            <ariaComponents.Button
+            <Button
               size="large"
               variant="icon"
               extraClickZone="xsmall"
diff --git a/app/gui/src/dashboard/components/dashboard/ProjectNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/ProjectNameColumn.tsx
index a6b73369556b..e19eca47ffc6 100644
--- a/app/gui/src/dashboard/components/dashboard/ProjectNameColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/ProjectNameColumn.tsx
@@ -1,40 +1,38 @@
-/** @file The icon and name of a {@link backendModule.ProjectAsset}. */
+/** @file The icon and name of a {@link ProjectAsset}. */
 import { useMutation } from '@tanstack/react-query'
 
-import { backendMutationOptions } from '#/hooks/backendHooks'
-import * as projectHooks from '#/hooks/projectHooks'
-
-import * as authProvider from '#/providers/AuthProvider'
-import { useDriveStore } from '#/providers/DriveProvider'
-import * as textProvider from '#/providers/TextProvider'
+import { isOnMacOS } from 'enso-common/src/detect'
+import {
+  BackendType,
+  IS_OPENING_OR_OPENED,
+  isNewTitleValid,
+  type ProjectAsset,
+} from 'enso-common/src/services/Backend'
+import { merger } from 'enso-common/src/utilities/data/object'
+import { isWhitespaceOnly } from 'enso-common/src/utilities/data/string'
 
-import type * as column from '#/components/dashboard/column'
+import type { AssetColumnProps } from '#/components/dashboard/column'
 import ProjectIcon, { CLOSED_PROJECT_STATE } from '#/components/dashboard/ProjectIcon'
 import EditableSpan from '#/components/EditableSpan'
-
-import * as backendModule from '#/services/Backend'
-
-import * as eventModule from '#/utilities/event'
-import * as indent from '#/utilities/indent'
-import * as object from '#/utilities/object'
-import * as permissions from '#/utilities/permissions'
-import * as string from '#/utilities/string'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
-import * as validation from '#/utilities/validation'
-import { isOnMacOS } from 'enso-common/src/detect'
-
-// ===================
-// === ProjectName ===
-// ===================
+import { backendMutationOptions } from '#/hooks/backendHooks'
+import { useOpenProject } from '#/hooks/projectHooks'
+import { useFullUserSession } from '#/providers/AuthProvider'
+import { useDriveStore } from '#/providers/DriveProvider'
+import { useText } from '#/providers/TextProvider'
+import { isDoubleClick, isSingleClick } from '#/utilities/event'
+import { indentClass } from '#/utilities/indent'
+import { PERMISSION_ACTION_CAN_EXECUTE, tryFindSelfPermission } from '#/utilities/permissions'
+import { twJoin, twMerge } from '#/utilities/tailwindMerge'
+import { LOCAL_PROJECT_NAME_PATTERN } from '#/utilities/validation'
 
 /** Props for a {@link ProjectNameColumn}. */
-export interface ProjectNameColumnProps extends column.AssetColumnProps {
-  readonly item: backendModule.ProjectAsset
+export interface ProjectNameColumnProps extends AssetColumnProps {
+  readonly item: ProjectAsset
 }
 
 /**
- * The icon and name of a {@link backendModule.ProjectAsset}.
- * @throws {Error} when the asset is not a {@link backendModule.ProjectAsset}.
+ * The icon and name of a {@link ProjectAsset}.
+ * @throws {Error} when the asset is not a {@link ProjectAsset}.
  * This should never happen.
  */
 export default function ProjectNameColumn(props: ProjectNameColumnProps) {
@@ -52,22 +50,21 @@ export default function ProjectNameColumn(props: ProjectNameColumnProps) {
   const { depth } = props
   const { backend, nodeMap } = state
 
-  const { user } = authProvider.useFullUserSession()
-  const { getText } = textProvider.useText()
+  const { user } = useFullUserSession()
+  const { getText } = useText()
   const driveStore = useDriveStore()
-  const doOpenProject = projectHooks.useOpenProject()
-  const ownPermission = permissions.tryFindSelfPermission(user, item.permissions)
+  const doOpenProject = useOpenProject()
+  const ownPermission = tryFindSelfPermission(user, item.permissions)
   // This is a workaround for a temporary bad state in the backend causing the `projectState` key
   // to be absent.
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   const projectState = item.projectState ?? CLOSED_PROJECT_STATE
-  const isRunning = backendModule.IS_OPENING_OR_OPENED[projectState.type]
+  const isRunning = IS_OPENING_OR_OPENED[projectState.type]
   const canExecute =
     isEditable &&
-    (backend.type === backendModule.BackendType.local ||
-      (ownPermission != null &&
-        permissions.PERMISSION_ACTION_CAN_EXECUTE[ownPermission.permission]))
-  const isCloud = backend.type === backendModule.BackendType.remote
+    (backend.type === BackendType.local ||
+      (ownPermission != null && PERMISSION_ACTION_CAN_EXECUTE[ownPermission.permission]))
+  const isCloud = backend.type === BackendType.remote
   const isOtherUserUsingProject =
     isCloud && projectState.openedBy != null && projectState.openedBy !== user.email
 
@@ -75,14 +72,14 @@ export default function ProjectNameColumn(props: ProjectNameColumnProps) {
 
   const setIsEditing = (isEditingName: boolean) => {
     if (isEditable) {
-      setRowState(object.merger({ isEditingName }))
+      setRowState(merger({ isEditingName }))
     }
   }
 
   const doRename = async (newTitle: string) => {
     setIsEditing(false)
 
-    if (string.isWhitespaceOnly(newTitle)) {
+    if (isWhitespaceOnly(newTitle)) {
       // Do nothing.
     } else if (newTitle !== item.title) {
       await updateProjectMutation.mutateAsync([
@@ -95,9 +92,9 @@ export default function ProjectNameColumn(props: ProjectNameColumnProps) {
 
   return (
     <div
-      className={tailwindMerge.twJoin(
+      className={twJoin(
         'flex h-table-row w-auto min-w-48 max-w-96 items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y contain-strict rounded-rows-child [contain-intrinsic-size:37px] [content-visibility:auto]',
-        indent.indentClass(depth),
+        indentClass(depth),
       )}
       onKeyDown={(event) => {
         if (rowState.isEditingName && isOnMacOS() && event.key === 'Enter') {
@@ -109,12 +106,12 @@ export default function ProjectNameColumn(props: ProjectNameColumnProps) {
           // The project should neither be edited nor opened in these cases.
         } else if (
           !isRunning &&
-          eventModule.isSingleClick(event) &&
+          isSingleClick(event) &&
           selected &&
           driveStore.getState().selectedKeys.size === 1
         ) {
           setIsEditing(true)
-        } else if (eventModule.isDoubleClick(event) && canExecute) {
+        } else if (isDoubleClick(event) && canExecute) {
           doOpenProject({
             id: item.id,
             type: backendType,
@@ -135,13 +132,13 @@ export default function ProjectNameColumn(props: ProjectNameColumnProps) {
       <EditableSpan
         data-testid="asset-row-name"
         editable={rowState.isEditingName}
-        className={tailwindMerge.twMerge(
+        className={twMerge(
           'grow bg-transparent font-naming',
           canExecute && !isOtherUserUsingProject && 'cursor-pointer',
           rowState.isEditingName && 'cursor-text',
         )}
         checkSubmittable={(newTitle) =>
-          backendModule.isNewTitleValid(
+          isNewTitleValid(
             item,
             newTitle,
             nodeMap.current.get(item.parentId)?.children?.map((child) => child.item),
@@ -151,9 +148,9 @@ export default function ProjectNameColumn(props: ProjectNameColumnProps) {
         onCancel={() => {
           setIsEditing(false)
         }}
-        {...(backend.type === backendModule.BackendType.local ?
+        {...(backend.type === BackendType.local ?
           {
-            inputPattern: validation.LOCAL_PROJECT_NAME_PATTERN,
+            inputPattern: LOCAL_PROJECT_NAME_PATTERN,
             inputTitle: getText('projectNameCannotBeEmpty'),
           }
         : {})}
diff --git a/app/gui/src/dashboard/components/dashboard/SecretNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/SecretNameColumn.tsx
index 3f4dc2352fba..fb2e9921a07c 100644
--- a/app/gui/src/dashboard/components/dashboard/SecretNameColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/SecretNameColumn.tsx
@@ -1,59 +1,46 @@
-/** @file The icon and name of a {@link backendModule.SecretAsset}. */
+/** @file The icon and name of a {@link SecretAsset}. */
 import { useMutation } from '@tanstack/react-query'
 
-import KeyIcon from '#/assets/key.svg'
-
-import { backendMutationOptions } from '#/hooks/backendHooks'
-import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
+import type { SecretAsset } from 'enso-common/src/services/Backend'
+import { merger } from 'enso-common/src/utilities/data/object'
 
-import * as modalProvider from '#/providers/ModalProvider'
-
-import * as ariaComponents from '#/components/AriaComponents'
-import type * as column from '#/components/dashboard/column'
+import KeyIcon from '#/assets/key.svg'
+import { Text } from '#/components/AriaComponents'
+import type { AssetColumnProps } from '#/components/dashboard/column'
 import SvgMask from '#/components/SvgMask'
-
+import { backendMutationOptions } from '#/hooks/backendHooks'
+import { useToastAndLog } from '#/hooks/toastAndLogHooks'
 import UpsertSecretModal from '#/modals/UpsertSecretModal'
-
-import type * as backendModule from '#/services/Backend'
-
-import * as eventModule from '#/utilities/event'
-import * as indent from '#/utilities/indent'
-import * as object from '#/utilities/object'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
-
-// =====================
-// === ConnectorName ===
-// =====================
+import { useSetModal } from '#/providers/ModalProvider'
+import { isDoubleClick, isSingleClick } from '#/utilities/event'
+import { indentClass } from '#/utilities/indent'
+import { twMerge } from '#/utilities/tailwindMerge'
 
 /** Props for a {@link SecretNameColumn}. */
-export interface SecretNameColumnProps extends column.AssetColumnProps {
-  readonly item: backendModule.SecretAsset
+export interface SecretNameColumnProps extends AssetColumnProps {
+  readonly item: SecretAsset
 }
 
-/**
- * The icon and name of a {@link backendModule.SecretAsset}.
- * @throws {Error} when the asset is not a {@link backendModule.SecretAsset}.
- * This should never happen.
- */
+/** The icon and name of a {@link SecretAsset}. */
 export default function SecretNameColumn(props: SecretNameColumnProps) {
   const { item, selected, state, rowState, setRowState, isEditable, depth } = props
   const { backend } = state
-  const toastAndLog = toastAndLogHooks.useToastAndLog()
-  const { setModal } = modalProvider.useSetModal()
+  const toastAndLog = useToastAndLog()
+  const { setModal } = useSetModal()
 
   const updateSecretMutation = useMutation(backendMutationOptions(backend, 'updateSecret'))
 
   const setIsEditing = (isEditingName: boolean) => {
     if (isEditable) {
-      setRowState(object.merger({ isEditingName }))
+      setRowState(merger({ isEditingName }))
     }
   }
 
   return (
     <div
-      className={tailwindMerge.twMerge(
+      className={twMerge(
         'flex h-table-row w-auto min-w-48 max-w-96 items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y contain-strict rounded-rows-child [contain-intrinsic-size:37px] [content-visibility:auto]',
-        indent.indentClass(depth),
+        indentClass(depth),
       )}
       onKeyDown={(event) => {
         if (rowState.isEditingName && event.key === 'Enter') {
@@ -61,9 +48,9 @@ export default function SecretNameColumn(props: SecretNameColumnProps) {
         }
       }}
       onClick={(event) => {
-        if (eventModule.isSingleClick(event) && selected) {
+        if (isSingleClick(event) && selected) {
           setIsEditing(true)
-        } else if (eventModule.isDoubleClick(event) && isEditable) {
+        } else if (isDoubleClick(event) && isEditable) {
           event.stopPropagation()
           setModal(
             <UpsertSecretModal
@@ -83,13 +70,9 @@ export default function SecretNameColumn(props: SecretNameColumnProps) {
     >
       <SvgMask src={KeyIcon} className="m-name-column-icon size-4" />
       {/* Secrets cannot be renamed. */}
-      <ariaComponents.Text
-        data-testid="asset-row-name"
-        font="naming"
-        className="grow bg-transparent"
-      >
+      <Text data-testid="asset-row-name" font="naming" className="grow bg-transparent">
         {item.title}
-      </ariaComponents.Text>
+      </Text>
     </div>
   )
 }
diff --git a/app/gui/src/dashboard/components/dashboard/column.ts b/app/gui/src/dashboard/components/dashboard/column.ts
index 0394a3c6f974..40cb11d49af9 100644
--- a/app/gui/src/dashboard/components/dashboard/column.ts
+++ b/app/gui/src/dashboard/components/dashboard/column.ts
@@ -1,6 +1,8 @@
 /** @file Column types and column display modes. */
 import { memo, type Dispatch, type JSX, type SetStateAction } from 'react'
 
+import type { AnyAsset, Asset, AssetId, BackendType } from 'enso-common/src/services/Backend'
+
 import type { SortableColumn } from '#/components/dashboard/column/columnUtils'
 import { Column } from '#/components/dashboard/column/columnUtils'
 import DocsColumn from '#/components/dashboard/column/DocsColumn'
@@ -11,13 +13,8 @@ import PlaceholderColumn from '#/components/dashboard/column/PlaceholderColumn'
 import SharedWithColumn from '#/components/dashboard/column/SharedWithColumn'
 import type { AssetRowState, AssetsTableState } from '#/layouts/AssetsTable'
 import type { Category } from '#/layouts/CategorySwitcher/Category'
-import type { AnyAsset, Asset, AssetId, BackendType } from '#/services/Backend'
 import type { SortInfo } from '#/utilities/sorting'
 
-// ===================
-// === AssetColumn ===
-// ===================
-
 /** Props for an arbitrary variant of {@link Asset}. */
 export interface AssetColumnProps {
   readonly keyProp: AssetId
@@ -52,10 +49,6 @@ export interface AssetColumn {
   readonly render: (props: AssetColumnProps) => JSX.Element
 }
 
-// =======================
-// === COLUMN_RENDERER ===
-// =======================
-
 /** React components for every column. */
 export const COLUMN_RENDERER: Readonly<
   Record<Column, React.MemoExoticComponent<(props: AssetColumnProps) => React.JSX.Element>>
diff --git a/app/gui/src/dashboard/components/dashboard/column/LabelsColumn.tsx b/app/gui/src/dashboard/components/dashboard/column/LabelsColumn.tsx
index 3953059eb70b..fe4b51afd897 100644
--- a/app/gui/src/dashboard/components/dashboard/column/LabelsColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/column/LabelsColumn.tsx
@@ -1,47 +1,37 @@
 /** @file A column listing the labels on this asset. */
-import * as React from 'react'
+import { useMemo } from 'react'
 
-import Plus2Icon from '#/assets/plus2.svg'
-
-import * as backendHooks from '#/hooks/backendHooks'
-
-import * as authProvider from '#/providers/AuthProvider'
-import * as modalProvider from '#/providers/ModalProvider'
-import * as textProvider from '#/providers/TextProvider'
+import { COLORS } from 'enso-common/src/services/Backend'
 
+import Plus2Icon from '#/assets/plus2.svg'
 import { Button, DialogTrigger } from '#/components/AriaComponents'
 import ContextMenu from '#/components/ContextMenu'
-import type * as column from '#/components/dashboard/column'
+import type { AssetColumnProps } from '#/components/dashboard/column'
 import Label from '#/components/dashboard/Label'
 import MenuEntry from '#/components/MenuEntry'
-
+import { useBackendQuery } from '#/hooks/backendHooks'
 import ManageLabelsModal from '#/modals/ManageLabelsModal'
-
-import * as backendModule from '#/services/Backend'
-
-import * as permissions from '#/utilities/permissions'
-
-// ====================
-// === LabelsColumn ===
-// ====================
+import { useFullUserSession } from '#/providers/AuthProvider'
+import { useSetModal } from '#/providers/ModalProvider'
+import { useText } from '#/providers/TextProvider'
+import { PermissionAction, tryFindSelfPermission } from '#/utilities/permissions'
 
 /** A column listing the labels on this asset. */
-export default function LabelsColumn(props: column.AssetColumnProps) {
+export default function LabelsColumn(props: AssetColumnProps) {
   const { item, state, rowState } = props
   const { backend, category, setQuery } = state
   const { temporarilyAddedLabels, temporarilyRemovedLabels } = rowState
-  const { user } = authProvider.useFullUserSession()
-  const { setModal, unsetModal } = modalProvider.useSetModal()
-  const { getText } = textProvider.useText()
-  const { data: labels } = backendHooks.useBackendQuery(backend, 'listTags', [])
-  const labelsByName = React.useMemo(() => {
+  const { user } = useFullUserSession()
+  const { setModal, unsetModal } = useSetModal()
+  const { getText } = useText()
+  const { data: labels } = useBackendQuery(backend, 'listTags', [])
+  const labelsByName = useMemo(() => {
     return new Map(labels?.map((label) => [label.value, label]))
   }, [labels])
-  const self = permissions.tryFindSelfPermission(user, item.permissions)
+  const self = tryFindSelfPermission(user, item.permissions)
   const managesThisAsset =
     category.type !== 'trash' &&
-    (self?.permission === permissions.PermissionAction.own ||
-      self?.permission === permissions.PermissionAction.admin)
+    (self?.permission === PermissionAction.own || self?.permission === PermissionAction.admin)
 
   return (
     <div className="group flex items-center gap-column-items contain-strict [contain-intrinsic-size:37px] [content-visibility:auto]">
@@ -52,7 +42,7 @@ export default function LabelsColumn(props: column.AssetColumnProps) {
             key={label}
             data-testid="asset-label"
             title={getText('rightClickToRemoveLabel')}
-            color={labelsByName.get(label)?.color ?? backendModule.COLORS[0]}
+            color={labelsByName.get(label)?.color ?? COLORS[0]}
             active={!temporarilyRemovedLabels.has(label)}
             isDisabled={temporarilyRemovedLabels.has(label)}
             negated={temporarilyRemovedLabels.has(label)}
@@ -86,11 +76,7 @@ export default function LabelsColumn(props: column.AssetColumnProps) {
       {...[...temporarilyAddedLabels]
         .filter((label) => item.labels?.includes(label) !== true)
         .map((label) => (
-          <Label
-            isDisabled
-            key={label}
-            color={labelsByName.get(label)?.color ?? backendModule.COLORS[0]}
-          >
+          <Label isDisabled key={label} color={labelsByName.get(label)?.color ?? COLORS[0]}>
             {label}
           </Label>
         ))}
diff --git a/app/gui/src/dashboard/components/dashboard/column/ModifiedColumn.tsx b/app/gui/src/dashboard/components/dashboard/column/ModifiedColumn.tsx
index 3a6b86a5a25c..8b15b80539ff 100644
--- a/app/gui/src/dashboard/components/dashboard/column/ModifiedColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/column/ModifiedColumn.tsx
@@ -1,7 +1,8 @@
 /** @file A column displaying the time at which the asset was last modified. */
+import { formatDateTime } from 'enso-common/src/utilities/data/dateTime'
+
 import { Text } from '#/components/AriaComponents'
 import type { AssetColumnProps } from '#/components/dashboard/column'
-import { formatDateTime } from '#/utilities/dateTime'
 
 /** A column displaying the time at which the asset was last modified. */
 export default function ModifiedColumn(props: AssetColumnProps) {
diff --git a/app/gui/src/dashboard/components/dashboard/column/NameColumn.tsx b/app/gui/src/dashboard/components/dashboard/column/NameColumn.tsx
index d510a00508a8..c638c5fb1080 100644
--- a/app/gui/src/dashboard/components/dashboard/column/NameColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/column/NameColumn.tsx
@@ -1,45 +1,39 @@
-/** @file The icon and name of an {@link backendModule.Asset}. */
-import * as React from 'react'
+/** @file The icon and name of an {@link Asset}. */
+import { AssetType, type Asset } from 'enso-common/src/services/Backend'
 
-import type * as column from '#/components/dashboard/column'
+import type { AssetColumnProps } from '#/components/dashboard/column'
 import DatalinkNameColumn from '#/components/dashboard/DatalinkNameColumn'
 import DirectoryNameColumn from '#/components/dashboard/DirectoryNameColumn'
 import FileNameColumn from '#/components/dashboard/FileNameColumn'
 import ProjectNameColumn from '#/components/dashboard/ProjectNameColumn'
 import SecretNameColumn from '#/components/dashboard/SecretNameColumn'
 
-import * as backendModule from '#/services/Backend'
-
-// =================
-// === AssetName ===
-// =================
-
 /** Props for a {@link AssetNameColumn}. */
-export type AssetNameColumnProps = column.AssetColumnProps
+export type AssetNameColumnProps = AssetColumnProps
 
-/** The icon and name of an {@link backendModule.Asset}. */
+/** The icon and name of an {@link Asset}. */
 export default function AssetNameColumn(props: AssetNameColumnProps) {
   const { item } = props
 
   switch (item.type) {
-    case backendModule.AssetType.directory: {
+    case AssetType.directory: {
       return <DirectoryNameColumn {...props} item={item} />
     }
-    case backendModule.AssetType.project: {
+    case AssetType.project: {
       return <ProjectNameColumn {...props} item={item} />
     }
-    case backendModule.AssetType.file: {
+    case AssetType.file: {
       return <FileNameColumn {...props} item={item} />
     }
-    case backendModule.AssetType.datalink: {
+    case AssetType.datalink: {
       return <DatalinkNameColumn {...props} item={item} />
     }
-    case backendModule.AssetType.secret: {
+    case AssetType.secret: {
       return <SecretNameColumn {...props} item={item} />
     }
-    case backendModule.AssetType.specialLoading:
-    case backendModule.AssetType.specialEmpty:
-    case backendModule.AssetType.specialError: {
+    case AssetType.specialLoading:
+    case AssetType.specialEmpty:
+    case AssetType.specialError: {
       // Special rows do not display columns at all.
       return <></>
     }
diff --git a/app/gui/src/dashboard/components/dashboard/column/SharedWithColumn.tsx b/app/gui/src/dashboard/components/dashboard/column/SharedWithColumn.tsx
index f04f2747e77a..3e3cbe213cea 100644
--- a/app/gui/src/dashboard/components/dashboard/column/SharedWithColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/column/SharedWithColumn.tsx
@@ -1,5 +1,7 @@
 /** @file A column listing the users with which this asset is shared. */
-import * as React from 'react'
+import { useRef } from 'react'
+
+import { getAssetPermissionId, getAssetPermissionName } from 'enso-common/src/services/Backend'
 
 import Plus2Icon from '#/assets/plus2.svg'
 import { Button } from '#/components/AriaComponents'
@@ -10,13 +12,8 @@ import { useDispatchAssetEvent } from '#/layouts/Drive/EventListProvider'
 import ManagePermissionsModal from '#/modals/ManagePermissionsModal'
 import { useFullUserSession } from '#/providers/AuthProvider'
 import { useSetModal } from '#/providers/ModalProvider'
-import { getAssetPermissionId, getAssetPermissionName } from '#/services/Backend'
 import { PermissionAction, tryFindSelfPermission } from '#/utilities/permissions'
 
-// ========================
-// === SharedWithColumn ===
-// ========================
-
 /** The type of the `state` prop of a {@link SharedWithColumn}. */
 interface SharedWithColumnStateProp
   extends Pick<AssetColumnProps['state'], 'backend' | 'category'> {
@@ -41,7 +38,7 @@ export default function SharedWithColumn(props: SharedWithColumnPropsInternal) {
   const assetPermissions = item.permissions ?? []
   const { setModal } = useSetModal()
   const self = tryFindSelfPermission(user, item.permissions)
-  const plusButtonRef = React.useRef<HTMLButtonElement>(null)
+  const plusButtonRef = useRef<HTMLButtonElement>(null)
   const managesThisAsset =
     !isReadonly &&
     category.type !== 'trash' &&
diff --git a/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts b/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts
index 7c78549b3261..d6d54add26ca 100644
--- a/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts
+++ b/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts
@@ -1,5 +1,6 @@
 /** @file Types and constants related to `Column`s. */
-import type * as text from 'enso-common/src/text'
+import { BackendType, Plan, type User } from 'enso-common/src/services/Backend'
+import type { TextId } from 'enso-common/src/text'
 
 import AccessedByProjectsIcon from '#/assets/accessed_by_projects.svg'
 import AccessedDataIcon from '#/assets/accessed_data.svg'
@@ -8,13 +9,7 @@ import DocsIcon from '#/assets/docs.svg'
 import PeopleIcon from '#/assets/people.svg'
 import TagIcon from '#/assets/tag.svg'
 import TimeIcon from '#/assets/time.svg'
-
 import type { Category } from '#/layouts/CategorySwitcher/Category'
-import * as backend from '#/services/Backend'
-
-// =============
-// === Types ===
-// =============
 
 /** Column type. */
 export enum Column {
@@ -30,10 +25,6 @@ export enum Column {
 /** Columns that can be used as a sort column. */
 export type SortableColumn = Column.modified | Column.name
 
-// =================
-// === Constants ===
-// =================
-
 export const DEFAULT_ENABLED_COLUMNS: ReadonlySet<Column> = new Set([
   Column.name,
   Column.modified,
@@ -53,7 +44,7 @@ export const COLUMN_ICONS: Readonly<Record<Column, string>> = {
   [Column.docs]: DocsIcon,
 }
 
-export const COLUMN_SHOW_TEXT_ID: Readonly<Record<Column, text.TextId>> = {
+export const COLUMN_SHOW_TEXT_ID: Readonly<Record<Column, TextId>> = {
   [Column.name]: 'nameColumnShow',
   [Column.modified]: 'modifiedColumnShow',
   [Column.sharedWith]: 'sharedWithColumnShow',
@@ -78,18 +69,14 @@ export const COLUMN_CSS_CLASS: Readonly<Record<Column, string>> = {
   [Column.docs]: `min-w-drive-docs-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
 }
 
-// =====================
-// === getColumnList ===
-// =====================
-
 /** Return the full list of columns given the relevant current state. */
 export function getColumnList(
-  user: backend.User,
-  backendType: backend.BackendType,
+  user: User,
+  backendType: BackendType,
   category: Category,
 ): readonly Column[] {
-  const isCloud = backendType === backend.BackendType.remote
-  const isEnterprise = user.plan === backend.Plan.enterprise
+  const isCloud = backendType === BackendType.remote
+  const isEnterprise = user.plan === Plan.enterprise
 
   const isTrash = category.type === 'trash'
   const isRecent = category.type === 'recent'
diff --git a/app/gui/src/dashboard/events/assetEvent.ts b/app/gui/src/dashboard/events/assetEvent.ts
index 3d503d6389b2..d9fcd2f2b48d 100644
--- a/app/gui/src/dashboard/events/assetEvent.ts
+++ b/app/gui/src/dashboard/events/assetEvent.ts
@@ -1,11 +1,7 @@
 /** @file Events related to changes in asset state. */
 import type AssetEventType from '#/events/AssetEventType'
 
-import type * as backend from '#/services/Backend'
-
-// ==================
-// === AssetEvent ===
-// ==================
+import type { AssetId, DirectoryId, LabelName } from 'enso-common/src/services/Backend'
 
 /** Properties common to all asset state change events. */
 interface AssetBaseEvent<Type extends AssetEventType> {
@@ -38,29 +34,29 @@ type SanityCheck<
 
 /** A signal to move multiple assets. */
 export interface AssetMoveEvent extends AssetBaseEvent<AssetEventType.move> {
-  readonly ids: ReadonlySet<backend.AssetId>
-  readonly newParentKey: backend.DirectoryId
-  readonly newParentId: backend.DirectoryId
+  readonly ids: ReadonlySet<AssetId>
+  readonly newParentKey: DirectoryId
+  readonly newParentId: DirectoryId
 }
 
 /** A signal to delete assets. */
 export interface AssetDeleteEvent extends AssetBaseEvent<AssetEventType.delete> {
-  readonly ids: ReadonlySet<backend.AssetId>
+  readonly ids: ReadonlySet<AssetId>
 }
 
 /** A signal to delete assets forever. */
 export interface AssetDeleteForeverEvent extends AssetBaseEvent<AssetEventType.deleteForever> {
-  readonly ids: ReadonlySet<backend.AssetId>
+  readonly ids: ReadonlySet<AssetId>
 }
 
 /** A signal to restore assets from trash. */
 export interface AssetRestoreEvent extends AssetBaseEvent<AssetEventType.restore> {
-  readonly ids: ReadonlySet<backend.AssetId>
+  readonly ids: ReadonlySet<AssetId>
 }
 
 /** A signal to download assets. */
 export interface AssetDownloadEvent extends AssetBaseEvent<AssetEventType.download> {
-  readonly ids: ReadonlySet<backend.AssetId>
+  readonly ids: ReadonlySet<AssetId>
 }
 
 /** A signal to download the currently selected assets. */
@@ -68,33 +64,33 @@ export type AssetDownloadSelectedEvent = AssetBaseEvent<AssetEventType.downloadS
 
 /** A signal to remove the current user's permissions for an asset. */
 export interface AssetRemoveSelfEvent extends AssetBaseEvent<AssetEventType.removeSelf> {
-  readonly id: backend.AssetId
+  readonly id: AssetId
 }
 
 /** A signal to temporarily add labels to the selected assets. */
 export interface AssetTemporarilyAddLabelsEvent
   extends AssetBaseEvent<AssetEventType.temporarilyAddLabels> {
-  readonly ids: ReadonlySet<backend.AssetId>
-  readonly labelNames: ReadonlySet<backend.LabelName>
+  readonly ids: ReadonlySet<AssetId>
+  readonly labelNames: ReadonlySet<LabelName>
 }
 
 /** A signal to temporarily remove labels from the selected assets. */
 export interface AssetTemporarilyRemoveLabelsEvent
   extends AssetBaseEvent<AssetEventType.temporarilyRemoveLabels> {
-  readonly ids: ReadonlySet<backend.AssetId>
-  readonly labelNames: ReadonlySet<backend.LabelName>
+  readonly ids: ReadonlySet<AssetId>
+  readonly labelNames: ReadonlySet<LabelName>
 }
 
 /** A signal to add labels to the selected assets. */
 export interface AssetAddLabelsEvent extends AssetBaseEvent<AssetEventType.addLabels> {
-  readonly ids: ReadonlySet<backend.AssetId>
-  readonly labelNames: ReadonlySet<backend.LabelName>
+  readonly ids: ReadonlySet<AssetId>
+  readonly labelNames: ReadonlySet<LabelName>
 }
 
 /** A signal to remove labels from the selected assets. */
 export interface AssetRemoveLabelsEvent extends AssetBaseEvent<AssetEventType.removeLabels> {
-  readonly ids: ReadonlySet<backend.AssetId>
-  readonly labelNames: ReadonlySet<backend.LabelName>
+  readonly ids: ReadonlySet<AssetId>
+  readonly labelNames: ReadonlySet<LabelName>
 }
 
 /** Every possible type of asset event. */
diff --git a/app/gui/src/dashboard/events/assetListEvent.ts b/app/gui/src/dashboard/events/assetListEvent.ts
index b7a374ffbb2f..01ea28f21185 100644
--- a/app/gui/src/dashboard/events/assetListEvent.ts
+++ b/app/gui/src/dashboard/events/assetListEvent.ts
@@ -1,18 +1,20 @@
 /** @file Events related to changes in the asset list. */
+import type {
+  AnyAsset,
+  AssetId,
+  DirectoryId,
+  ProjectAsset,
+  S3ObjectVersionId,
+} from 'enso-common/src/services/Backend'
+
 import AssetListEventType from '#/events/AssetListEventType'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useTransferBetweenCategories, type Category } from '#/layouts/CategorySwitcher/Category'
 import { useDispatchAssetListEvent } from '#/layouts/Drive/EventListProvider'
 import type { DrivePastePayload } from '#/providers/DriveProvider'
-
-import type * as backend from '#/services/Backend'
 import type { AnyAssetTreeNode } from '#/utilities/AssetTreeNode'
 import { isTeamPath, isUserPath } from '#/utilities/permissions'
 
-// ======================
-// === AssetListEvent ===
-// ======================
-
 /** Properties common to all asset list events. */
 interface AssetListBaseEvent<Type extends AssetListEventType> {
   readonly type: Type
@@ -42,25 +44,25 @@ type SanityCheck<
 /** A signal to duplicate a project. */
 interface AssetListDuplicateProjectEvent
   extends AssetListBaseEvent<AssetListEventType.duplicateProject> {
-  readonly parentKey: backend.DirectoryId
-  readonly parentId: backend.DirectoryId
-  readonly original: backend.ProjectAsset
-  readonly versionId: backend.S3ObjectVersionId
+  readonly parentKey: DirectoryId
+  readonly parentId: DirectoryId
+  readonly original: ProjectAsset
+  readonly versionId: S3ObjectVersionId
 }
 
 /** A signal that files should be copied. */
 interface AssetListCopyEvent extends AssetListBaseEvent<AssetListEventType.copy> {
-  readonly newParentKey: backend.DirectoryId
-  readonly newParentId: backend.DirectoryId
-  readonly items: backend.AnyAsset[]
+  readonly newParentKey: DirectoryId
+  readonly newParentId: DirectoryId
+  readonly items: AnyAsset[]
 }
 
 /** A signal that a file has been moved. */
 interface AssetListMoveEvent extends AssetListBaseEvent<AssetListEventType.move> {
-  readonly key: backend.AssetId
-  readonly newParentKey: backend.DirectoryId
-  readonly newParentId: backend.DirectoryId
-  readonly items: backend.AnyAsset[]
+  readonly key: AssetId
+  readonly newParentKey: DirectoryId
+  readonly newParentId: DirectoryId
+  readonly items: AnyAsset[]
 }
 
 /**
@@ -68,7 +70,7 @@ interface AssetListMoveEvent extends AssetListBaseEvent<AssetListEventType.move>
  * finished.
  */
 interface AssetListDeleteEvent extends AssetListBaseEvent<AssetListEventType.delete> {
-  readonly key: backend.AssetId
+  readonly key: AssetId
 }
 
 /** A signal to permanently delete all files in Trash. */
@@ -76,7 +78,7 @@ type AssetListEmptyTrashEvent = AssetListBaseEvent<AssetListEventType.emptyTrash
 
 /** A signal for a file to remove itself from the asset list, without being deleted. */
 interface AssetListRemoveSelfEvent extends AssetListBaseEvent<AssetListEventType.removeSelf> {
-  readonly id: backend.AssetId
+  readonly id: AssetId
 }
 
 /** Every possible type of asset list event. */
@@ -91,10 +93,10 @@ export function useCutAndPaste(category: Category) {
   const dispatchAssetListEvent = useDispatchAssetListEvent()
   return useEventCallback(
     (
-      newParentKey: backend.DirectoryId,
-      newParentId: backend.DirectoryId,
+      newParentKey: DirectoryId,
+      newParentId: DirectoryId,
       pasteData: DrivePastePayload,
-      nodeMap: ReadonlyMap<backend.AssetId, AnyAssetTreeNode>,
+      nodeMap: ReadonlyMap<AssetId, AnyAssetTreeNode>,
     ) => {
       const ids = Array.from(pasteData.ids)
       const nodes = ids.flatMap((id) => {
diff --git a/app/gui/src/dashboard/hooks/backendHooks.tsx b/app/gui/src/dashboard/hooks/backendHooks.tsx
index fbed7fb15f63..a1ccbe3c3f9c 100644
--- a/app/gui/src/dashboard/hooks/backendHooks.tsx
+++ b/app/gui/src/dashboard/hooks/backendHooks.tsx
@@ -21,6 +21,42 @@ import {
   backendQueryOptions as backendQueryOptionsBase,
   type BackendMethods,
 } from 'enso-common/src/backendQuery'
+import type Backend from 'enso-common/src/services/Backend'
+import {
+  assetIsDirectory,
+  assetIsFile,
+  assetIsProject,
+  AssetType,
+  BackendType,
+  createPlaceholderDatalinkAsset,
+  createPlaceholderDirectoryAsset,
+  createPlaceholderFileAsset,
+  createPlaceholderProjectAsset,
+  createPlaceholderSecretAsset,
+  DatalinkId,
+  escapeSpecialCharacters,
+  extractProjectExtension,
+  fileIsNotProject,
+  fileIsProject,
+  isEmptyAssetId,
+  isErrorAssetId,
+  isLoadingAssetId,
+  Path,
+  S3_CHUNK_SIZE_BYTES,
+  S3MultipartPart,
+  SpecialEmptyAsset,
+  SpecialErrorAsset,
+  SpecialLoadingAsset,
+  stripProjectExtension,
+  UploadFileRequestParams,
+  type AnyAsset,
+  type AssetId,
+  type DirectoryAsset,
+  type DirectoryId,
+  type User,
+  type UserGroupInfo,
+} from 'enso-common/src/services/Backend'
+import { toRfc3339 } from 'enso-common/src/utilities/data/dateTime'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useOpenProject } from '#/hooks/projectHooks'
@@ -36,39 +72,18 @@ import {
 import { useLocalStorageState } from '#/providers/LocalStorageProvider'
 import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import * as backendModule from '#/services/Backend'
-import {
-  AssetType,
-  BackendType,
-  type AnyAsset,
-  type AssetId,
-  type DirectoryAsset,
-  type DirectoryId,
-  type User,
-  type UserGroupInfo,
-} from '#/services/Backend'
 import LocalBackend from '#/services/LocalBackend'
 import { TEAMS_DIRECTORY_ID, USERS_DIRECTORY_ID } from '#/services/remoteBackendPaths'
 import { tryCreateOwnerPermission } from '#/utilities/permissions'
 import { usePreventNavigation } from '#/utilities/preventNavigation'
-import { toRfc3339 } from 'enso-common/src/utilities/data/dateTime'
 
 // The number of bytes in 1 megabyte.
 const MB_BYTES = 1_000_000
-const S3_CHUNK_SIZE_MB = Math.round(backendModule.S3_CHUNK_SIZE_BYTES / MB_BYTES)
-
-// ============================
-// === DefineBackendMethods ===
-// ============================
+const S3_CHUNK_SIZE_MB = Math.round(S3_CHUNK_SIZE_BYTES / MB_BYTES)
 
 /** Ensure that the given type contains only names of backend methods. */
 type DefineBackendMethods<T extends keyof Backend> = T
 
-// ======================
-// === MutationMethod ===
-// ======================
-
 /** Names of methods corresponding to mutations. */
 export type MutationMethod = DefineBackendMethods<
   | 'acceptInvitation'
@@ -114,10 +129,6 @@ export type MutationMethod = DefineBackendMethods<
   | 'uploadUserPicture'
 >
 
-// =======================
-// === useBackendQuery ===
-// =======================
-
 export function backendQueryOptions<Method extends BackendMethods>(
   backend: Backend,
   method: Method,
@@ -174,10 +185,6 @@ export function useBackendQuery<Method extends BackendMethods>(
   return useQuery(backendQueryOptions(backend, method, args, options))
 }
 
-// ==========================
-// === useBackendMutation ===
-// ==========================
-
 const INVALIDATE_ALL_QUERIES = Symbol('invalidate all queries')
 const INVALIDATION_MAP: Partial<
   Record<MutationMethod, readonly (BackendMethods | typeof INVALIDATE_ALL_QUERIES)[]>
@@ -267,10 +274,6 @@ export function backendMutationOptions<Method extends MutationMethod>(
   }
 }
 
-// ==================================
-// === useListUserGroupsWithUsers ===
-// ==================================
-
 /** A user group, as well as the users that are a part of the user group. */
 export interface UserGroupInfoWithUsers extends UserGroupInfo {
   readonly users: readonly User[]
@@ -402,29 +405,29 @@ export function useAssetPassiveListener(
         type: AssetType.directory,
       } satisfies DirectoryAsset
     }
-    case backendModule.isLoadingAssetId(assetId): {
+    case isLoadingAssetId(assetId): {
       return {
         ...shared,
         id: assetId,
         title: '',
         type: AssetType.specialLoading,
-      } satisfies backendModule.SpecialLoadingAsset
+      } satisfies SpecialLoadingAsset
     }
-    case backendModule.isEmptyAssetId(assetId): {
+    case isEmptyAssetId(assetId): {
       return {
         ...shared,
         id: assetId,
         title: '',
         type: AssetType.specialEmpty,
-      } satisfies backendModule.SpecialEmptyAsset
+      } satisfies SpecialEmptyAsset
     }
-    case backendModule.isErrorAssetId(assetId): {
+    case isErrorAssetId(assetId): {
       return {
         ...shared,
         id: assetId,
         title: '',
         type: AssetType.specialError,
-      } satisfies backendModule.SpecialErrorAsset
+      } satisfies SpecialErrorAsset
     }
     default: {
       return
@@ -490,29 +493,29 @@ export function useAsset(options: UseAssetOptions) {
         type: AssetType.directory,
       } satisfies DirectoryAsset
     }
-    case backendModule.isLoadingAssetId(assetId): {
+    case isLoadingAssetId(assetId): {
       return {
         ...shared,
         id: assetId,
         title: '',
         type: AssetType.specialLoading,
-      } satisfies backendModule.SpecialLoadingAsset
+      } satisfies SpecialLoadingAsset
     }
-    case backendModule.isEmptyAssetId(assetId): {
+    case isEmptyAssetId(assetId): {
       return {
         ...shared,
         id: assetId,
         title: '',
         type: AssetType.specialEmpty,
-      } satisfies backendModule.SpecialEmptyAsset
+      } satisfies SpecialEmptyAsset
     }
-    case backendModule.isErrorAssetId(assetId): {
+    case isErrorAssetId(assetId): {
       return {
         ...shared,
         id: assetId,
         title: '',
         type: AssetType.specialError,
-      } satisfies backendModule.SpecialErrorAsset
+      } satisfies SpecialErrorAsset
     }
     default: {
       return
@@ -566,7 +569,7 @@ export function useRootDirectoryId(backend: Backend, category: Category) {
   const [localRootDirectory] = useLocalStorageState('localRootDirectory')
 
   return useMemo(() => {
-    const localRootPath = localRootDirectory != null ? backendModule.Path(localRootDirectory) : null
+    const localRootPath = localRootDirectory != null ? Path(localRootDirectory) : null
     const id =
       'homeDirectoryId' in category ?
         category.homeDirectoryId
@@ -643,12 +646,12 @@ export function useNewFolder(backend: Backend, category: Category) {
     toggleDirectoryExpansion(parentId, true)
     const siblings = await ensureListDirectory(parentId)
     const directoryIndices = siblings
-      .filter(backendModule.assetIsDirectory)
+      .filter(assetIsDirectory)
       .map((item) => /^New Folder (?<directoryIndex>\d+)$/.exec(item.title))
       .map((match) => match?.groups?.directoryIndex)
       .map((maybeIndex) => (maybeIndex != null ? parseInt(maybeIndex, 10) : 0))
     const title = `New Folder ${Math.max(0, ...directoryIndices) + 1}`
-    const placeholderItem = backendModule.createPlaceholderDirectoryAsset(
+    const placeholderItem = createPlaceholderDirectoryAsset(
       title,
       parentId,
       tryCreateOwnerPermission(
@@ -693,7 +696,7 @@ export function useNewProject(backend: Backend, category: Category) {
       }: {
         templateName: string | null | undefined
         templateId?: string | null | undefined
-        datalinkId?: backendModule.DatalinkId | null | undefined
+        datalinkId?: DatalinkId | null | undefined
       },
       parentId: DirectoryId,
       parentPath: string | null | undefined,
@@ -705,7 +708,7 @@ export function useNewProject(backend: Backend, category: Category) {
         const prefix = `${templateName ?? 'New Project'} `
         const projectNameTemplate = new RegExp(`^${prefix}(?<projectIndex>\\d+)$`)
         const projectIndices = siblings
-          .filter(backendModule.assetIsProject)
+          .filter(assetIsProject)
           .map((item) => projectNameTemplate.exec(item.title)?.groups?.projectIndex)
           .map((maybeIndex) => (maybeIndex != null ? parseInt(maybeIndex, 10) : 0))
         return `${prefix}${Math.max(0, ...projectIndices) + 1}`
@@ -713,7 +716,7 @@ export function useNewProject(backend: Backend, category: Category) {
 
       const path = backend instanceof LocalBackend ? backend.joinPath(parentId, projectName) : null
 
-      const placeholderItem = backendModule.createPlaceholderProjectAsset(
+      const placeholderItem = createPlaceholderProjectAsset(
         projectName,
         parentId,
         tryCreateOwnerPermission(
@@ -771,7 +774,7 @@ export function useNewSecret(backend: Backend, category: Category) {
       parentPath: string | null | undefined,
     ) => {
       toggleDirectoryExpansion(parentId, true)
-      const placeholderItem = backendModule.createPlaceholderSecretAsset(
+      const placeholderItem = createPlaceholderSecretAsset(
         name,
         parentId,
         tryCreateOwnerPermission(
@@ -810,7 +813,7 @@ export function useNewDatalink(backend: Backend, category: Category) {
       parentPath: string | null | undefined,
     ) => {
       toggleDirectoryExpansion(parentId, true)
-      const placeholderItem = backendModule.createPlaceholderDatalinkAsset(
+      const placeholderItem = createPlaceholderDatalinkAsset(
         name,
         parentId,
         tryCreateOwnerPermission(
@@ -855,8 +858,8 @@ export function useUploadFiles(backend: Backend, category: Category) {
       const localBackend = backend instanceof LocalBackend ? backend : null
       const reversedFiles = Array.from(filesToUpload).reverse()
       const siblings = await ensureListDirectory(parentId)
-      const siblingFiles = siblings.filter(backendModule.assetIsFile)
-      const siblingProjects = siblings.filter(backendModule.assetIsProject)
+      const siblingFiles = siblings.filter(assetIsFile)
+      const siblingProjects = siblings.filter(assetIsProject)
       const siblingFileTitles = new Set(siblingFiles.map((asset) => asset.title))
       const siblingProjectTitles = new Set(siblingProjects.map((asset) => asset.title))
       const ownerPermission = tryCreateOwnerPermission(
@@ -866,19 +869,17 @@ export function useUploadFiles(backend: Backend, category: Category) {
         users ?? [],
         userGroups ?? [],
       )
-      const files = reversedFiles.filter(backendModule.fileIsNotProject).map((file) => {
-        const asset = backendModule.createPlaceholderFileAsset(
-          backendModule.escapeSpecialCharacters(file.name),
+      const files = reversedFiles.filter(fileIsNotProject).map((file) => {
+        const asset = createPlaceholderFileAsset(
+          escapeSpecialCharacters(file.name),
           parentId,
           ownerPermission,
         )
         return { asset, file }
       })
-      const projects = reversedFiles.filter(backendModule.fileIsProject).map((file) => {
-        const basename = backendModule.escapeSpecialCharacters(
-          backendModule.stripProjectExtension(file.name),
-        )
-        const asset = backendModule.createPlaceholderProjectAsset(
+      const projects = reversedFiles.filter(fileIsProject).map((file) => {
+        const basename = escapeSpecialCharacters(stripProjectExtension(file.name))
+        const asset = createPlaceholderProjectAsset(
           basename,
           parentId,
           ownerPermission,
@@ -889,7 +890,7 @@ export function useUploadFiles(backend: Backend, category: Category) {
       })
       const duplicateFiles = files.filter((file) => siblingFileTitles.has(file.asset.title))
       const duplicateProjects = projects.filter((project) =>
-        siblingProjectTitles.has(backendModule.stripProjectExtension(project.asset.title)),
+        siblingProjectTitles.has(stripProjectExtension(project.asset.title)),
       )
       const fileMap = new Map<AssetId, File>([
         ...files.map(({ asset, file }) => [asset.id, file] as const),
@@ -909,11 +910,9 @@ export function useUploadFiles(backend: Backend, category: Category) {
           const fileId = method === 'new' ? null : asset.id
 
           switch (true) {
-            case backendModule.assetIsProject(asset): {
-              const { extension } = backendModule.extractProjectExtension(file.name)
-              const title = backendModule.escapeSpecialCharacters(
-                backendModule.stripProjectExtension(asset.title),
-              )
+            case assetIsProject(asset): {
+              const { extension } = extractProjectExtension(file.name)
+              const title = escapeSpecialCharacters(stripProjectExtension(asset.title))
 
               await uploadFileMutation
                 .mutateAsync(
@@ -933,8 +932,8 @@ export function useUploadFiles(backend: Backend, category: Category) {
 
               break
             }
-            case backendModule.assetIsFile(asset): {
-              const title = backendModule.escapeSpecialCharacters(asset.title)
+            case assetIsFile(asset): {
+              const title = escapeSpecialCharacters(asset.title)
               await uploadFileMutation
                 .mutateAsync({ fileId, fileName: title, parentDirectoryId: asset.parentId }, file)
                 .then(({ id }) => {
@@ -963,21 +962,17 @@ export function useUploadFiles(backend: Backend, category: Category) {
           // with the same name.
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           current: siblingFilesByName.get(file.asset.title)!,
-          new: backendModule.createPlaceholderFileAsset(
-            file.asset.title,
-            parentId,
-            ownerPermission,
-          ),
+          new: createPlaceholderFileAsset(file.asset.title, parentId, ownerPermission),
           file: file.file,
         }))
         const conflictingProjects = duplicateProjects.map((project) => {
-          const basename = backendModule.stripProjectExtension(project.asset.title)
+          const basename = stripProjectExtension(project.asset.title)
           return {
             // This is SAFE, as `duplicateProjects` only contains projects that have
             // siblings with the same name.
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             current: siblingProjectsByName.get(basename)!,
-            new: backendModule.createPlaceholderProjectAsset(
+            new: createPlaceholderProjectAsset(
               basename,
               parentId,
               ownerPermission,
@@ -1015,7 +1010,7 @@ export function useUploadFiles(backend: Backend, category: Category) {
               const newFiles = files
                 .filter((file) => !siblingFileTitles.has(file.asset.title))
                 .map((file) => {
-                  const asset = backendModule.createPlaceholderFileAsset(
+                  const asset = createPlaceholderFileAsset(
                     file.asset.title,
                     parentId,
                     ownerPermission,
@@ -1027,13 +1022,11 @@ export function useUploadFiles(backend: Backend, category: Category) {
               const newProjects = projects
                 .filter(
                   (project) =>
-                    !siblingProjectTitles.has(
-                      backendModule.stripProjectExtension(project.asset.title),
-                    ),
+                    !siblingProjectTitles.has(stripProjectExtension(project.asset.title)),
                 )
                 .map((project) => {
-                  const basename = backendModule.stripProjectExtension(project.asset.title)
-                  const asset = backendModule.createPlaceholderProjectAsset(
+                  const basename = stripProjectExtension(project.asset.title)
+                  const asset = createPlaceholderProjectAsset(
                     basename,
                     parentId,
                     ownerPermission,
@@ -1171,63 +1164,60 @@ export function useUploadFileMutation(backend: Backend, options: UploadFileMutat
       [backend, endRetries],
     ),
   )
-  const [variables, setVariables] =
-    useState<[params: backendModule.UploadFileRequestParams, file: File]>()
+  const [variables, setVariables] = useState<[params: UploadFileRequestParams, file: File]>()
   const [sentMb, setSentMb] = useState(0)
   const [totalMb, setTotalMb] = useState(0)
-  const mutateAsync = useEventCallback(
-    async (body: backendModule.UploadFileRequestParams, file: File) => {
-      setVariables([body, file])
-      const fileSizeMb = Math.ceil(file.size / MB_BYTES)
-      options.onBegin?.({ event: 'begin', sentMb: 0, totalMb: fileSizeMb })
-      setSentMb(0)
-      setTotalMb(fileSizeMb)
-      try {
-        const { sourcePath, uploadId, presignedUrls } = await uploadFileStartMutation.mutateAsync([
-          body,
-          file,
-        ])
-        const parts: backendModule.S3MultipartPart[] = []
-        for (const [url, i] of Array.from(
-          presignedUrls,
-          (presignedUrl, index) => [presignedUrl, index] as const,
-        )) {
-          parts.push(await uploadFileChunkMutation.mutateAsync([url, file, i]))
-          const newSentMb = Math.min((i + 1) * S3_CHUNK_SIZE_MB, fileSizeMb)
-          setSentMb(newSentMb)
-          options.onChunkSuccess?.({
-            event: 'chunk',
-            sentMb: newSentMb,
-            totalMb: fileSizeMb,
-          })
-        }
-        const result = await uploadFileEndMutation.mutateAsync([
-          {
-            parentDirectoryId: body.parentDirectoryId,
-            parts,
-            sourcePath: sourcePath,
-            uploadId: uploadId,
-            assetId: body.fileId,
-            fileName: body.fileName,
-          },
-        ])
-        setSentMb(fileSizeMb)
-        const progress: UploadFileMutationProgress = {
-          event: 'end',
-          sentMb: fileSizeMb,
+  const mutateAsync = useEventCallback(async (body: UploadFileRequestParams, file: File) => {
+    setVariables([body, file])
+    const fileSizeMb = Math.ceil(file.size / MB_BYTES)
+    options.onBegin?.({ event: 'begin', sentMb: 0, totalMb: fileSizeMb })
+    setSentMb(0)
+    setTotalMb(fileSizeMb)
+    try {
+      const { sourcePath, uploadId, presignedUrls } = await uploadFileStartMutation.mutateAsync([
+        body,
+        file,
+      ])
+      const parts: S3MultipartPart[] = []
+      for (const [url, i] of Array.from(
+        presignedUrls,
+        (presignedUrl, index) => [presignedUrl, index] as const,
+      )) {
+        parts.push(await uploadFileChunkMutation.mutateAsync([url, file, i]))
+        const newSentMb = Math.min((i + 1) * S3_CHUNK_SIZE_MB, fileSizeMb)
+        setSentMb(newSentMb)
+        options.onChunkSuccess?.({
+          event: 'chunk',
+          sentMb: newSentMb,
           totalMb: fileSizeMb,
-        }
-        options.onSuccess?.(progress)
-        options.onSettled?.(progress, null)
-        return result
-      } catch (error) {
-        onError(error)
-        options.onSettled?.(null, error)
-        throw error
+        })
       }
-    },
-  )
-  const mutate = useEventCallback((params: backendModule.UploadFileRequestParams, file: File) => {
+      const result = await uploadFileEndMutation.mutateAsync([
+        {
+          parentDirectoryId: body.parentDirectoryId,
+          parts,
+          sourcePath: sourcePath,
+          uploadId: uploadId,
+          assetId: body.fileId,
+          fileName: body.fileName,
+        },
+      ])
+      setSentMb(fileSizeMb)
+      const progress: UploadFileMutationProgress = {
+        event: 'end',
+        sentMb: fileSizeMb,
+        totalMb: fileSizeMb,
+      }
+      options.onSuccess?.(progress)
+      options.onSettled?.(progress, null)
+      return result
+    } catch (error) {
+      onError(error)
+      options.onSettled?.(null, error)
+      throw error
+    }
+  })
+  const mutate = useEventCallback((params: UploadFileRequestParams, file: File) => {
     void mutateAsync(params, file)
   })
 
diff --git a/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts b/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts
index 2f823d8bd3fe..87cede9a5f28 100644
--- a/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts
+++ b/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts
@@ -1,12 +1,6 @@
-/**
- * @file
- *
- * Paywall configuration for different plans.
- */
-
-import type * as text from 'enso-common/src/text'
-
-import * as backend from '#/services/Backend'
+/** @file Paywall configuration for different plans. */
+import { Plan } from 'enso-common/src/services/Backend'
+import type { TextId } from 'enso-common/src/text'
 
 /** Registered paywall features. */
 export const PAYWALL_FEATURES = {
@@ -23,7 +17,7 @@ export const PAYWALL_FEATURES = {
 export type PaywallFeatureName = keyof typeof PAYWALL_FEATURES
 
 /** Paywall level names */
-export type PaywallLevelName = backend.Plan | 'free'
+export type PaywallLevelName = Plan | 'free'
 
 /**
  * Paywall level values.
@@ -32,24 +26,24 @@ export type PaywallLevelName = backend.Plan | 'free'
  * Because the paywall levels are ordered and inclusive, the value is used to compare the levels.
  */
 export type PaywallLevelValue =
-  | (0 & { readonly name: PaywallLevelName; readonly label: text.TextId })
-  | (1 & { readonly name: PaywallLevelName; readonly label: text.TextId })
-  | (2 & { readonly name: PaywallLevelName; readonly label: text.TextId })
-  | (3 & { readonly name: PaywallLevelName; readonly label: text.TextId })
+  | (0 & { readonly name: PaywallLevelName; readonly label: TextId })
+  | (1 & { readonly name: PaywallLevelName; readonly label: TextId })
+  | (2 & { readonly name: PaywallLevelName; readonly label: TextId })
+  | (3 & { readonly name: PaywallLevelName; readonly label: TextId })
 
 /** Paywall levels configuration. */
 export const PAYWALL_LEVELS: Record<PaywallLevelName, PaywallLevelValue> = {
   free: Object.assign(0, { name: 'free', label: 'freePlanName' } as const),
-  [backend.Plan.solo]: Object.assign(1, {
-    name: backend.Plan.solo,
+  [Plan.solo]: Object.assign(1, {
+    name: Plan.solo,
     label: 'soloPlanName',
   } as const),
-  [backend.Plan.team]: Object.assign(2, {
-    name: backend.Plan.team,
+  [Plan.team]: Object.assign(2, {
+    name: Plan.team,
     label: 'teamPlanName',
   } as const),
-  [backend.Plan.enterprise]: Object.assign(3, {
-    name: backend.Plan.enterprise,
+  [Plan.enterprise]: Object.assign(3, {
+    name: Plan.enterprise,
     label: 'enterprisePlanName',
   } as const),
 }
@@ -58,7 +52,7 @@ export const PAYWALL_LEVELS: Record<PaywallLevelName, PaywallLevelValue> = {
 export type PaywallLevel = (typeof PAYWALL_LEVELS)[keyof typeof PAYWALL_LEVELS]
 
 /** Paywall feature labels. */
-const PAYWALL_FEATURES_LABELS: Record<PaywallFeatureName, text.TextId> = {
+const PAYWALL_FEATURES_LABELS: Record<PaywallFeatureName, TextId> = {
   userGroups: 'userGroupsFeatureLabel',
   userGroupsFull: 'userGroupsFullFeatureLabel',
   inviteUser: 'inviteUserFeatureLabel',
@@ -133,7 +127,7 @@ const PAYWALL_CONFIGURATION: Record<PaywallFeatureName, BasicFeatureConfiguratio
 }
 
 /** Map a plan to a paywall level. */
-export function mapPlanOnPaywall(plan: backend.Plan | undefined): PaywallLevel {
+export function mapPlanOnPaywall(plan: Plan | undefined): PaywallLevel {
   return plan != null ? PAYWALL_LEVELS[plan] : PAYWALL_LEVELS.free
 }
 
diff --git a/app/gui/src/dashboard/hooks/billing/paywallHooks.ts b/app/gui/src/dashboard/hooks/billing/paywallHooks.ts
index 475c07936e84..6e1114f5585c 100644
--- a/app/gui/src/dashboard/hooks/billing/paywallHooks.ts
+++ b/app/gui/src/dashboard/hooks/billing/paywallHooks.ts
@@ -1,48 +1,39 @@
-/**
- * @file
- *
- * Hooks for paywall-related functionality.
- */
-import * as eventCallbackHooks from '#/hooks/eventCallbackHooks'
+/** @file Hooks for paywall-related functionality. */
+import type { Plan } from 'enso-common/src/services/Backend'
 
-import * as devtools from '#/components/Devtools'
-
-import type * as backend from '#/services/Backend'
-
-import * as paywallConfiguration from './FeaturesConfiguration'
-import * as paywallFeatures from './paywallFeaturesHooks'
+import { usePaywallDevtools } from '#/components/Devtools'
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import { mapPlanOnPaywall, type PaywallFeatureName } from './FeaturesConfiguration'
+import { usePaywallFeatures } from './paywallFeaturesHooks'
 
 /** Props for the {@link usePaywall} hook. */
 export interface UsePaywallProps {
-  readonly plan?: backend.Plan | undefined
+  readonly plan?: Plan | undefined
 }
 
 /** A hook that provides paywall-related functionality. */
 export function usePaywall(props: UsePaywallProps) {
   const { plan } = props
 
-  const { getFeature } = paywallFeatures.usePaywallFeatures()
-  const { features } = devtools.usePaywallDevtools()
-  const paywallLevel = paywallConfiguration.mapPlanOnPaywall(plan)
+  const { getFeature } = usePaywallFeatures()
+  const { features } = usePaywallDevtools()
+  const paywallLevel = mapPlanOnPaywall(plan)
 
-  const getPaywallLevel = eventCallbackHooks.useEventCallback(
-    (specifiedPlan: backend.Plan | undefined) =>
-      paywallConfiguration.mapPlanOnPaywall(specifiedPlan),
+  const getPaywallLevel = useEventCallback((specifiedPlan: Plan | undefined) =>
+    mapPlanOnPaywall(specifiedPlan),
   )
 
-  const isFeatureUnderPaywall = eventCallbackHooks.useEventCallback(
-    (feature: paywallConfiguration.PaywallFeatureName) => {
-      const featureConfig = getFeature(feature)
-      const { isForceEnabled } = features[feature]
-      const { level } = featureConfig
-
-      if (isForceEnabled == null) {
-        return level > paywallLevel
-      } else {
-        return !isForceEnabled
-      }
-    },
-  )
+  const isFeatureUnderPaywall = useEventCallback((feature: PaywallFeatureName) => {
+    const featureConfig = getFeature(feature)
+    const { isForceEnabled } = features[feature]
+    const { level } = featureConfig
+
+    if (isForceEnabled == null) {
+      return level > paywallLevel
+    } else {
+      return !isForceEnabled
+    }
+  })
 
   return {
     paywallLevel,
diff --git a/app/gui/src/dashboard/hooks/projectHooks.ts b/app/gui/src/dashboard/hooks/projectHooks.ts
index 8448adf02037..e764e0592b7f 100644
--- a/app/gui/src/dashboard/hooks/projectHooks.ts
+++ b/app/gui/src/dashboard/hooks/projectHooks.ts
@@ -1,13 +1,25 @@
 /** @file Mutations related to project management. */
-import * as reactQuery from '@tanstack/react-query'
+import { queryOptions, useMutation, useQueryClient } from '@tanstack/react-query'
 import invariant from 'tiny-invariant'
 
+import type Backend from 'enso-common/src/services/Backend'
+import {
+  AssetType,
+  BackendType,
+  ProjectState,
+  type AnyAsset,
+  type Asset,
+  type AssetId,
+  type DirectoryId,
+  type ProjectAsset,
+} from 'enso-common/src/services/Backend'
 import { merge } from 'enso-common/src/utilities/data/object'
 
-import * as eventCallbacks from '#/hooks/eventCallbackHooks'
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
 
-import * as authProvider from '#/providers/AuthProvider'
-import * as backendProvider from '#/providers/BackendProvider'
+import { useFullUserSession } from '#/providers/AuthProvider'
+import { useLocalBackend, useRemoteBackend } from '#/providers/BackendProvider'
+import { useFeatureFlag } from '#/providers/FeatureFlagsProvider'
 import {
   TabType,
   useAddLaunchedProject,
@@ -19,10 +31,6 @@ import {
   type LaunchedProjectId,
 } from '#/providers/ProjectsProvider'
 
-import { useFeatureFlag } from '#/providers/FeatureFlagsProvider'
-import type Backend from '#/services/Backend'
-import * as backendModule from '#/services/Backend'
-
 /** Default interval for refetching project status when the project is opened. */
 const OPENED_INTERVAL_MS = 30_000
 /**
@@ -40,30 +48,30 @@ const DEFAULT_INTERVAL_MS = 120_000
 
 /** Options for {@link createGetProjectDetailsQuery}. */
 export interface CreateOpenedProjectQueryOptions {
-  readonly assetId: backendModule.Asset<backendModule.AssetType.project>['id']
-  readonly parentId: backendModule.Asset<backendModule.AssetType.project>['parentId']
+  readonly assetId: Asset<AssetType.project>['id']
+  readonly parentId: Asset<AssetType.project>['parentId']
   readonly backend: Backend
 }
 
 /** Whether the user can open projects. */
 export function useCanOpenProjects() {
-  const localBackend = backendProvider.useLocalBackend()
+  const localBackend = useLocalBackend()
   return localBackend != null
 }
 
 /** Return a function to update a project asset in the TanStack Query cache. */
 function useSetProjectAsset() {
-  const queryClient = reactQuery.useQueryClient()
-  return eventCallbacks.useEventCallback(
+  const queryClient = useQueryClient()
+  return useEventCallback(
     (
-      backendType: backendModule.BackendType,
-      assetId: backendModule.AssetId,
-      parentId: backendModule.DirectoryId,
-      transform: (asset: backendModule.ProjectAsset) => backendModule.ProjectAsset,
+      backendType: BackendType,
+      assetId: AssetId,
+      parentId: DirectoryId,
+      transform: (asset: ProjectAsset) => ProjectAsset,
     ) => {
       const listDirectoryQuery = queryClient
         .getQueryCache()
-        .find<readonly backendModule.AnyAsset<backendModule.AssetType>[] | undefined>({
+        .find<readonly AnyAsset<AssetType>[] | undefined>({
           queryKey: [backendType, 'listDirectory', parentId],
           exact: false,
         })
@@ -71,9 +79,7 @@ function useSetProjectAsset() {
       if (listDirectoryQuery?.state.data) {
         listDirectoryQuery.setData(
           listDirectoryQuery.state.data.map((child) =>
-            child.id === assetId && child.type === backendModule.AssetType.project ?
-              transform(child)
-            : child,
+            child.id === assetId && child.type === AssetType.project ? transform(child) : child,
           ),
         )
       }
@@ -85,27 +91,27 @@ function useSetProjectAsset() {
 export function createGetProjectDetailsQuery(options: CreateOpenedProjectQueryOptions) {
   const { assetId, parentId, backend } = options
 
-  const isLocal = backend.type === backendModule.BackendType.local
+  const isLocal = backend.type === BackendType.local
 
-  return reactQuery.queryOptions({
+  return queryOptions({
     queryKey: createGetProjectDetailsQuery.getQueryKey(assetId),
     queryFn: () => backend.getProjectDetails(assetId, parentId),
     meta: { persist: false },
     refetchIntervalInBackground: true,
     refetchOnWindowFocus: true,
     refetchOnMount: true,
-    networkMode: backend.type === backendModule.BackendType.remote ? 'online' : 'always',
+    networkMode: backend.type === BackendType.remote ? 'online' : 'always',
     refetchInterval: ({ state }): number | false => {
-      const staticStates = [backendModule.ProjectState.opened, backendModule.ProjectState.closed]
+      const staticStates = [ProjectState.opened, ProjectState.closed]
 
       const openingStates = [
-        backendModule.ProjectState.provisioned,
-        backendModule.ProjectState.scheduled,
-        backendModule.ProjectState.openInProgress,
-        backendModule.ProjectState.closing,
+        ProjectState.provisioned,
+        ProjectState.scheduled,
+        ProjectState.openInProgress,
+        ProjectState.closing,
       ]
 
-      const createdStates = [backendModule.ProjectState.created, backendModule.ProjectState.new]
+      const createdStates = [ProjectState.created, ProjectState.new]
 
       if (state.status === 'error') {
         return false
@@ -151,13 +157,13 @@ createGetProjectDetailsQuery.getQueryKey = (id: LaunchedProjectId) => ['project'
 
 /** A mutation to open a project. */
 export function useOpenProjectMutation() {
-  const client = reactQuery.useQueryClient()
-  const session = authProvider.useFullUserSession()
-  const remoteBackend = backendProvider.useRemoteBackend()
-  const localBackend = backendProvider.useLocalBackend()
+  const client = useQueryClient()
+  const session = useFullUserSession()
+  const remoteBackend = useRemoteBackend()
+  const localBackend = useLocalBackend()
   const setProjectAsset = useSetProjectAsset()
 
-  return reactQuery.useMutation({
+  return useMutation({
     mutationKey: ['openProject'],
     networkMode: 'always',
     mutationFn: ({
@@ -167,7 +173,7 @@ export function useOpenProjectMutation() {
       parentId,
       inBackground = false,
     }: LaunchedProject & { inBackground?: boolean }) => {
-      const backend = type === backendModule.BackendType.remote ? remoteBackend : localBackend
+      const backend = type === BackendType.remote ? remoteBackend : localBackend
 
       invariant(backend != null, 'Backend is null')
 
@@ -190,10 +196,10 @@ export function useOpenProjectMutation() {
     onMutate: ({ type, id, parentId }) => {
       const queryKey = createGetProjectDetailsQuery.getQueryKey(id)
 
-      client.setQueryData(queryKey, { state: { type: backendModule.ProjectState.openInProgress } })
+      client.setQueryData(queryKey, { state: { type: ProjectState.openInProgress } })
       setProjectAsset(type, id, parentId, (asset) => ({
         ...asset,
-        projectState: { ...asset.projectState, type: backendModule.ProjectState.openInProgress },
+        projectState: { ...asset.projectState, type: ProjectState.openInProgress },
       }))
 
       void client.cancelQueries({ queryKey })
@@ -211,15 +217,15 @@ export function useOpenProjectMutation() {
 
 /** Mutation to close a project. */
 export function useCloseProjectMutation() {
-  const client = reactQuery.useQueryClient()
-  const remoteBackend = backendProvider.useRemoteBackend()
-  const localBackend = backendProvider.useLocalBackend()
+  const client = useQueryClient()
+  const remoteBackend = useRemoteBackend()
+  const localBackend = useLocalBackend()
   const setProjectAsset = useSetProjectAsset()
 
-  return reactQuery.useMutation({
+  return useMutation({
     mutationKey: ['closeProject'],
     mutationFn: ({ type, id, title }: LaunchedProject) => {
-      const backend = type === backendModule.BackendType.remote ? remoteBackend : localBackend
+      const backend = type === BackendType.remote ? remoteBackend : localBackend
 
       invariant(backend != null, 'Backend is null')
 
@@ -228,10 +234,10 @@ export function useCloseProjectMutation() {
     onMutate: ({ type, id, parentId }) => {
       const queryKey = createGetProjectDetailsQuery.getQueryKey(id)
 
-      client.setQueryData(queryKey, { state: { type: backendModule.ProjectState.closing } })
+      client.setQueryData(queryKey, { state: { type: ProjectState.closing } })
       setProjectAsset(type, id, parentId, (asset) => ({
         ...asset,
-        projectState: { ...asset.projectState, type: backendModule.ProjectState.closing },
+        projectState: { ...asset.projectState, type: ProjectState.closing },
       }))
 
       void client.cancelQueries({ queryKey })
@@ -240,7 +246,7 @@ export function useCloseProjectMutation() {
       await client.resetQueries({ queryKey: createGetProjectDetailsQuery.getQueryKey(id) })
       setProjectAsset(type, id, parentId, (asset) => ({
         ...asset,
-        projectState: { ...asset.projectState, type: backendModule.ProjectState.closed },
+        projectState: { ...asset.projectState, type: ProjectState.closed },
       }))
     },
     onError: async (_, { type, id, parentId }) => {
@@ -252,16 +258,16 @@ export function useCloseProjectMutation() {
 
 /** Mutation to rename a project. */
 export function useRenameProjectMutation() {
-  const client = reactQuery.useQueryClient()
-  const remoteBackend = backendProvider.useRemoteBackend()
-  const localBackend = backendProvider.useLocalBackend()
+  const client = useQueryClient()
+  const remoteBackend = useRemoteBackend()
+  const localBackend = useLocalBackend()
   const updateLaunchedProjects = useUpdateLaunchedProjects()
 
-  return reactQuery.useMutation({
+  return useMutation({
     mutationKey: ['renameProject'],
     mutationFn: ({ newName, project }: { newName: string; project: LaunchedProject }) => {
       const { type, id, title } = project
-      const backend = type === backendModule.BackendType.remote ? remoteBackend : localBackend
+      const backend = type === BackendType.remote ? remoteBackend : localBackend
 
       invariant(backend != null, 'Backend is null')
 
@@ -282,7 +288,7 @@ export function useRenameProjectMutation() {
 
 /** A callback to open a project. */
 export function useOpenProject() {
-  const client = reactQuery.useQueryClient()
+  const client = useQueryClient()
   const canOpenProjects = useCanOpenProjects()
   const projectsStore = useProjectsStore()
   const addLaunchedProject = useAddLaunchedProject()
@@ -291,7 +297,7 @@ export function useOpenProject() {
 
   const enableMultitabs = useFeatureFlag('enableMultitabs')
 
-  return eventCallbacks.useEventCallback((project: LaunchedProject) => {
+  return useEventCallback((project: LaunchedProject) => {
     if (!canOpenProjects) {
       return
     }
@@ -330,19 +336,19 @@ export function useOpenProject() {
 /** A function to open the editor. */
 export function useOpenEditor() {
   const setPage = useSetPage()
-  return eventCallbacks.useEventCallback((projectId: LaunchedProjectId) => {
+  return useEventCallback((projectId: LaunchedProjectId) => {
     setPage(projectId)
   })
 }
 
 /** A function to close a project. */
 export function useCloseProject() {
-  const client = reactQuery.useQueryClient()
+  const client = useQueryClient()
   const closeProjectMutation = useCloseProjectMutation()
   const removeLaunchedProject = useRemoveLaunchedProject()
   const setPage = useSetPage()
 
-  return eventCallbacks.useEventCallback((project: LaunchedProject) => {
+  return useEventCallback((project: LaunchedProject) => {
     client
       .getMutationCache()
       .findAll({
@@ -379,7 +385,7 @@ export function useCloseAllProjects() {
   const closeProject = useCloseProject()
   const projectsStore = useProjectsStore()
 
-  return eventCallbacks.useEventCallback(() => {
+  return useEventCallback(() => {
     const launchedProjects = projectsStore.getState().launchedProjects
 
     for (const launchedProject of launchedProjects) {
diff --git a/app/gui/src/dashboard/hooks/setAssetHooks.ts b/app/gui/src/dashboard/hooks/setAssetHooks.ts
index 19eedcd337c5..0a7930acdb0e 100644
--- a/app/gui/src/dashboard/hooks/setAssetHooks.ts
+++ b/app/gui/src/dashboard/hooks/setAssetHooks.ts
@@ -2,30 +2,25 @@
  * @file A hook that turns a `set` function for an {@link AssetTreeNode} to a `set` function
  * on its item, for a specific type of item.
  */
-import * as React from 'react'
+import { Dispatch, SetStateAction, useCallback } from 'react'
 
-import type * as backend from '#/services/Backend'
+import type { AnyAsset } from 'enso-common/src/services/Backend'
 
-import type * as assetTreeNode from '#/utilities/AssetTreeNode'
-import AssetTreeNode from '#/utilities/AssetTreeNode'
-
-// ===================
-// === useSetAsset ===
-// ===================
+import AssetTreeNode, { type AnyAssetTreeNode } from '#/utilities/AssetTreeNode'
 
 /**
  * Converts a React set state action for an {@link AssetTreeNode} to a set state action for any
- * subset of {@link backend.AnyAsset}. This is unsafe when `T` does not match the type of the
+ * subset of {@link AnyAsset}. This is unsafe when `T` does not match the type of the
  * item contained in the `AssetTreeNode`, so this MUST be guarded by checking that the item is of
  * the correct type. A value of type `T` must be provided as the first parameter to ensure that this
  * has been done.
  */
-export function useSetAsset<T extends backend.AnyAsset>(
+export function useSetAsset<T extends AnyAsset>(
   _value: T,
-  setNode: React.Dispatch<React.SetStateAction<assetTreeNode.AnyAssetTreeNode>>,
+  setNode: Dispatch<SetStateAction<AnyAssetTreeNode>>,
 ) {
-  return React.useCallback(
-    (valueOrUpdater: React.SetStateAction<T>) => {
+  return useCallback(
+    (valueOrUpdater: SetStateAction<T>) => {
       setNode((oldNode) => {
         const item =
           typeof valueOrUpdater === 'function' ?
diff --git a/app/gui/src/dashboard/hooks/spotlightHooks.tsx b/app/gui/src/dashboard/hooks/spotlightHooks.tsx
index ace25d30daab..38c269d2db9b 100644
--- a/app/gui/src/dashboard/hooks/spotlightHooks.tsx
+++ b/app/gui/src/dashboard/hooks/spotlightHooks.tsx
@@ -1,8 +1,9 @@
 /** @file Hooks for showing an overlay with a cutout for a rectangular element. */
 import { startTransition, useEffect, useLayoutEffect, useState, type CSSProperties } from 'react'
 
+import { convertCSSUnitString } from 'enso-common/src/utilities/convertCSSUnits'
+
 import Portal from '#/components/Portal'
-import { convertCSSUnitString } from '#/utilities/convertCSSUnits'
 import { useEventCallback } from './eventCallbackHooks'
 import type { RectReadOnly } from './measureHooks'
 import { useMeasure } from './measureHooks'
diff --git a/app/gui/src/dashboard/layouts/AssetContextMenu.tsx b/app/gui/src/dashboard/layouts/AssetContextMenu.tsx
index 440ac70788e3..91e8634607d4 100644
--- a/app/gui/src/dashboard/layouts/AssetContextMenu.tsx
+++ b/app/gui/src/dashboard/layouts/AssetContextMenu.tsx
@@ -1,121 +1,125 @@
-/** @file The context menu for an arbitrary {@link backendModule.Asset}. */
-import * as React from 'react'
+/** @file The context menu for an arbitrary {@link Asset}. */
+import type { MouseEvent, MutableRefObject } from 'react'
 
-import * as reactQuery from '@tanstack/react-query'
-import * as toast from 'react-toastify'
+import { useQuery } from '@tanstack/react-query'
+import { toast } from 'react-toastify'
 
-import * as billingHooks from '#/hooks/billing'
-import * as copyHooks from '#/hooks/copyHooks'
-import * as projectHooks from '#/hooks/projectHooks'
-import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
-
-import * as authProvider from '#/providers/AuthProvider'
-import * as backendProvider from '#/providers/BackendProvider'
-import * as modalProvider from '#/providers/ModalProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import AssetEventType from '#/events/AssetEventType'
-import AssetListEventType from '#/events/AssetListEventType'
-
-import * as categoryModule from '#/layouts/CategorySwitcher/Category'
-import * as eventListProvider from '#/layouts/Drive/EventListProvider'
-import { GlobalContextMenu } from '#/layouts/GlobalContextMenu'
+import {
+  assetIsProject,
+  AssetType,
+  IS_OPENING_OR_OPENED,
+  Plan,
+  type Asset,
+  type DirectoryId,
+  type ProjectId,
+} from 'enso-common/src/services/Backend'
+import { normalizePath } from 'enso-common/src/utilities/data/fileInfo'
+import { merger } from 'enso-common/src/utilities/data/object'
 
 import ContextMenu from '#/components/ContextMenu'
 import ContextMenuEntry from '#/components/ContextMenuEntry'
 import type * as assetRow from '#/components/dashboard/AssetRow'
+import { ContextMenuEntry as PaywallContextMenuEntry } from '#/components/Paywall'
 import Separator from '#/components/styled/Separator'
-
+import AssetEventType from '#/events/AssetEventType'
+import AssetListEventType from '#/events/AssetListEventType'
+import { useNewProject, useUploadFileWithToastMutation } from '#/hooks/backendHooks'
+import { usePaywall } from '#/hooks/billing'
+import { useCopy } from '#/hooks/copyHooks'
+import {
+  createGetProjectDetailsQuery,
+  useCanOpenProjects,
+  useCloseProject,
+  useOpenProject,
+  useOpenProjectMutation,
+} from '#/hooks/projectHooks'
+import { useToastAndLog } from '#/hooks/toastAndLogHooks'
+import { isCloudCategory } from '#/layouts/CategorySwitcher/Category'
+import { useDispatchAssetEvent, useDispatchAssetListEvent } from '#/layouts/Drive/EventListProvider'
+import { GlobalContextMenu } from '#/layouts/GlobalContextMenu'
 import ConfirmDeleteModal from '#/modals/ConfirmDeleteModal'
 import ManageLabelsModal from '#/modals/ManageLabelsModal'
 import ManagePermissionsModal from '#/modals/ManagePermissionsModal'
-
-import * as backendModule from '#/services/Backend'
-import * as localBackendModule from '#/services/LocalBackend'
-
-import { ContextMenuEntry as PaywallContextMenuEntry } from '#/components/Paywall'
-import { useNewProject, useUploadFileWithToastMutation } from '#/hooks/backendHooks'
+import { useFullUserSession } from '#/providers/AuthProvider'
+import { useLocalBackend, useRemoteBackend } from '#/providers/BackendProvider'
 import { usePasteData } from '#/providers/DriveProvider'
+import { useSetModal } from '#/providers/ModalProvider'
+import { useText } from '#/providers/TextProvider'
+import { extractTypeAndId } from '#/services/LocalBackend'
 import { TEAMS_DIRECTORY_ID, USERS_DIRECTORY_ID } from '#/services/remoteBackendPaths'
-import { normalizePath } from '#/utilities/fileInfo'
 import { mapNonNullish } from '#/utilities/nullable'
-import * as object from '#/utilities/object'
-import * as permissions from '#/utilities/permissions'
+import {
+  canPermissionModifyDirectoryContents,
+  isTeamPath,
+  PERMISSION_ACTION_CAN_EXECUTE,
+  PermissionAction,
+  tryFindSelfPermission,
+} from '#/utilities/permissions'
 import { useSetAssetPanelProps, useSetIsAssetPanelTemporarilyVisible } from './AssetPanel'
 
-// ========================
-// === AssetContextMenu ===
-// ========================
-
 /** Props for a {@link AssetContextMenu}. */
 export interface AssetContextMenuProps {
   readonly hidden?: boolean
   readonly innerProps: assetRow.AssetRowInnerProps
-  readonly rootDirectoryId: backendModule.DirectoryId
-  readonly triggerRef: React.MutableRefObject<HTMLElement | null>
-  readonly event: Pick<React.MouseEvent, 'pageX' | 'pageY'>
+  readonly rootDirectoryId: DirectoryId
+  readonly triggerRef: MutableRefObject<HTMLElement | null>
+  readonly event: Pick<MouseEvent, 'pageX' | 'pageY'>
   readonly eventTarget: HTMLElement | null
   readonly doDelete: () => void
   readonly doCopy: () => void
   readonly doCut: () => void
-  readonly doPaste: (
-    newParentKey: backendModule.DirectoryId,
-    newParentId: backendModule.DirectoryId,
-  ) => void
+  readonly doPaste: (newParentKey: DirectoryId, newParentId: DirectoryId) => void
 }
 
-/** The context menu for an arbitrary {@link backendModule.Asset}. */
+/** The context menu for an arbitrary {@link Asset}. */
 export default function AssetContextMenu(props: AssetContextMenuProps) {
   const { innerProps, rootDirectoryId, event, eventTarget, hidden = false, triggerRef } = props
   const { doCopy, doCut, doPaste, doDelete } = props
   const { asset, path: pathRaw, state, setRowState } = innerProps
   const { backend, category, nodeMap } = state
 
-  const canOpenProjects = projectHooks.useCanOpenProjects()
-  const { user } = authProvider.useFullUserSession()
-  const { setModal } = modalProvider.useSetModal()
-  const remoteBackend = backendProvider.useRemoteBackend()
-  const localBackend = backendProvider.useLocalBackend()
-  const { getText } = textProvider.useText()
-  const toastAndLog = toastAndLogHooks.useToastAndLog()
-  const dispatchAssetEvent = eventListProvider.useDispatchAssetEvent()
-  const dispatchAssetListEvent = eventListProvider.useDispatchAssetListEvent()
+  const canOpenProjects = useCanOpenProjects()
+  const { user } = useFullUserSession()
+  const { setModal } = useSetModal()
+  const remoteBackend = useRemoteBackend()
+  const localBackend = useLocalBackend()
+  const { getText } = useText()
+  const toastAndLog = useToastAndLog()
+  const dispatchAssetEvent = useDispatchAssetEvent()
+  const dispatchAssetListEvent = useDispatchAssetListEvent()
   const setIsAssetPanelTemporarilyVisible = useSetIsAssetPanelTemporarilyVisible()
   const setAssetPanelProps = useSetAssetPanelProps()
-  const openProject = projectHooks.useOpenProject()
-  const closeProject = projectHooks.useCloseProject()
-  const openProjectMutation = projectHooks.useOpenProjectMutation()
-  const self = permissions.tryFindSelfPermission(user, asset.permissions)
-  const isCloud = categoryModule.isCloudCategory(category)
+  const openProject = useOpenProject()
+  const closeProject = useCloseProject()
+  const openProjectMutation = useOpenProjectMutation()
+  const self = tryFindSelfPermission(user, asset.permissions)
+  const isCloud = isCloudCategory(category)
   const pathComputed =
     category.type === 'recent' || category.type === 'trash' ? null
-    : isCloud ? `${pathRaw}${asset.type === backendModule.AssetType.datalink ? '.datalink' : ''}`
-    : asset.type === backendModule.AssetType.project ?
+    : isCloud ? `${pathRaw}${asset.type === AssetType.datalink ? '.datalink' : ''}`
+    : asset.type === AssetType.project ?
       mapNonNullish(localBackend?.getProjectPath(asset.id) ?? null, normalizePath)
-    : normalizePath(localBackendModule.extractTypeAndId(asset.id).id)
+    : normalizePath(extractTypeAndId(asset.id).id)
   const path =
     pathComputed == null ? null
     : isCloud ? encodeURI(pathComputed)
     : pathComputed
-  const copyMutation = copyHooks.useCopy({ copyText: path ?? '' })
+  const copyMutation = useCopy({ copyText: path ?? '' })
   const uploadFileToCloudMutation = useUploadFileWithToastMutation(remoteBackend)
   const disabledTooltip = !canOpenProjects ? getText('downloadToOpenWorkflow') : undefined
 
-  const { isFeatureUnderPaywall } = billingHooks.usePaywall({ plan: user.plan })
+  const { isFeatureUnderPaywall } = usePaywall({ plan: user.plan })
   const isUnderPaywall = isFeatureUnderPaywall('share')
 
   const newProject = useNewProject(backend, category)
 
   const systemApi = window.systemApi
-  const ownsThisAsset = !isCloud || self?.permission === permissions.PermissionAction.own
+  const ownsThisAsset = !isCloud || self?.permission === PermissionAction.own
   const canManageThisAsset = asset.id !== USERS_DIRECTORY_ID && asset.id !== TEAMS_DIRECTORY_ID
-  const managesThisAsset = ownsThisAsset || self?.permission === permissions.PermissionAction.admin
-  const canEditThisAsset =
-    managesThisAsset || self?.permission === permissions.PermissionAction.edit
+  const managesThisAsset = ownsThisAsset || self?.permission === PermissionAction.admin
+  const canEditThisAsset = managesThisAsset || self?.permission === PermissionAction.edit
   const canAddToThisDirectory =
-    category.type !== 'recent' &&
-    asset.type === backendModule.AssetType.directory &&
-    canEditThisAsset
+    category.type !== 'recent' && asset.type === AssetType.directory && canEditThisAsset
   const pasteData = usePasteData()
   const hasPasteData = (pasteData?.data.ids.size ?? 0) > 0
   const pasteDataParentKeys =
@@ -135,43 +139,37 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
         const parent = parentKey == null ? null : nodeMap.current.get(parentKey)
         if (!parent) {
           return false
-        } else if (permissions.isTeamPath(parent.path)) {
+        } else if (isTeamPath(parent.path)) {
           return true
         } else {
           // Assume user path; check permissions
-          const permission = permissions.tryFindSelfPermission(user, asset.permissions)
-          return (
-            permission != null &&
-            permissions.canPermissionModifyDirectoryContents(permission.permission)
-          )
+          const permission = tryFindSelfPermission(user, asset.permissions)
+          return permission != null && canPermissionModifyDirectoryContents(permission.permission)
         }
       })
 
-  const { data } = reactQuery.useQuery({
-    ...projectHooks.createGetProjectDetailsQuery({
+  const { data } = useQuery({
+    ...createGetProjectDetailsQuery({
       // This is safe because we disable the query when the asset is not a project.
       // see `enabled` property below.
       // eslint-disable-next-line no-restricted-syntax
-      assetId: asset.id as backendModule.ProjectId,
+      assetId: asset.id as ProjectId,
       parentId: asset.parentId,
       backend,
     }),
-    enabled: asset.type === backendModule.AssetType.project && canOpenProjects,
+    enabled: asset.type === AssetType.project && canOpenProjects,
   })
 
   const isRunningProject =
-    (asset.type === backendModule.AssetType.project &&
-      data &&
-      backendModule.IS_OPENING_OR_OPENED[data.state.type]) ??
-    false
+    (asset.type === AssetType.project && data && IS_OPENING_OR_OPENED[data.state.type]) ?? false
 
   const canExecute =
     category.type !== 'trash' &&
-    (!isCloud || (self != null && permissions.PERMISSION_ACTION_CAN_EXECUTE[self.permission]))
+    (!isCloud || (self != null && PERMISSION_ACTION_CAN_EXECUTE[self.permission]))
 
   const isOtherUserUsingProject =
     isCloud &&
-    backendModule.assetIsProject(asset) &&
+    assetIsProject(asset) &&
     asset.projectState.openedBy != null &&
     asset.projectState.openedBy !== user.email
 
@@ -180,14 +178,13 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
       hidden={hidden}
       action="paste"
       doAction={() => {
-        const directoryId =
-          asset.type === backendModule.AssetType.directory ? asset.id : asset.parentId
+        const directoryId = asset.type === AssetType.directory ? asset.id : asset.parentId
         doPaste(directoryId, directoryId)
       }}
     />
   )
 
-  const canUploadToCloud = user.plan !== backendModule.Plan.free
+  const canUploadToCloud = user.plan !== Plan.free
 
   return (
     category.type === 'trash' ?
@@ -222,7 +219,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
         </ContextMenu>
     : !canManageThisAsset ? null
     : <ContextMenu aria-label={getText('assetContextMenuLabel')} hidden={hidden} event={event}>
-        {asset.type === backendModule.AssetType.datalink && (
+        {asset.type === AssetType.datalink && (
           <ContextMenuEntry
             hidden={hidden}
             action="useInNewProject"
@@ -235,7 +232,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
             }}
           />
         )}
-        {asset.type === backendModule.AssetType.project &&
+        {asset.type === AssetType.project &&
           canExecute &&
           !isRunningProject &&
           !isOtherUserUsingProject && (
@@ -254,7 +251,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
               }}
             />
           )}
-        {asset.type === backendModule.AssetType.project && isCloud && (
+        {asset.type === AssetType.project && isCloud && (
           <ContextMenuEntry
             hidden={hidden}
             action="run"
@@ -280,7 +277,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
             }}
           />
         )}
-        {asset.type === backendModule.AssetType.project &&
+        {asset.type === AssetType.project &&
           canExecute &&
           isRunningProject &&
           !isOtherUserUsingProject && (
@@ -297,7 +294,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
               }}
             />
           )}
-        {asset.type === backendModule.AssetType.project && !isCloud && (
+        {asset.type === AssetType.project && !isCloud && (
           <PaywallContextMenuEntry
             hidden={hidden}
             isUnderPaywall={!canUploadToCloud}
@@ -306,7 +303,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
             doAction={async () => {
               try {
                 const projectResponse = await fetch(
-                  `./api/project-manager/projects/${localBackendModule.extractTypeAndId(asset.id).id}/enso-project`,
+                  `./api/project-manager/projects/${extractTypeAndId(asset.id).id}/enso-project`,
                 )
                 // This DOES NOT update the cloud assets list when it
                 // completes, as the current backend is not the remote
@@ -322,7 +319,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
                   },
                   new File([await projectResponse.blob()], fileName),
                 )
-                toast.toast.success(getText('uploadProjectToCloudSuccess'))
+                toast.success(getText('uploadProjectToCloudSuccess'))
               } catch (error) {
                 toastAndLog('uploadProjectToCloudError', error)
               }
@@ -332,19 +329,16 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
         {canExecute &&
           !isRunningProject &&
           !isOtherUserUsingProject &&
-          (!isCloud ||
-            asset.type === backendModule.AssetType.project ||
-            asset.type === backendModule.AssetType.directory) && (
+          (!isCloud || asset.type === AssetType.project || asset.type === AssetType.directory) && (
             <ContextMenuEntry
               hidden={hidden}
               action="rename"
               doAction={() => {
-                setRowState(object.merger({ isEditingName: true }))
+                setRowState(merger({ isEditingName: true }))
               }}
             />
           )}
-        {(asset.type === backendModule.AssetType.secret ||
-          asset.type === backendModule.AssetType.datalink) &&
+        {(asset.type === AssetType.secret || asset.type === AssetType.datalink) &&
           canEditThisAsset && (
             <ContextMenuEntry
               hidden={hidden}
@@ -353,7 +347,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
                 setIsAssetPanelTemporarilyVisible(true)
                 const assetPanelProps = { backend, item: asset }
                 switch (asset.type) {
-                  case backendModule.AssetType.secret: {
+                  case AssetType.secret: {
                     setAssetPanelProps({
                       ...assetPanelProps,
                       path: pathRaw,
@@ -361,7 +355,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
                     })
                     break
                   }
-                  case backendModule.AssetType.datalink: {
+                  case AssetType.datalink: {
                     setAssetPanelProps({
                       ...assetPanelProps,
                       path: pathRaw,
@@ -406,7 +400,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
             label={isCloud ? getText('moveToTrashShortcut') : getText('deleteShortcut')}
             doAction={() => {
               if (isCloud) {
-                if (asset.type === backendModule.AssetType.directory) {
+                if (asset.type === AssetType.directory) {
                   setModal(
                     <ConfirmDeleteModal
                       defaultOpen
@@ -467,7 +461,7 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
           />
         )}
         {isCloud && managesThisAsset && self != null && <Separator hidden={hidden} />}
-        {asset.type === backendModule.AssetType.project && (
+        {asset.type === AssetType.project && (
           <ContextMenuEntry
             hidden={hidden}
             action="duplicate"
@@ -492,12 +486,10 @@ export default function AssetContextMenu(props: AssetContextMenuProps) {
         {!isRunningProject && !isOtherUserUsingProject && (
           <ContextMenuEntry hidden={hidden} action="cut" doAction={doCut} />
         )}
-        {(isCloud ?
-          asset.type !== backendModule.AssetType.directory
-        : asset.type === backendModule.AssetType.project) && (
+        {(isCloud ? asset.type !== AssetType.directory : asset.type === AssetType.project) && (
           <ContextMenuEntry
             hidden={hidden}
-            isDisabled={asset.type === backendModule.AssetType.secret}
+            isDisabled={asset.type === AssetType.secret}
             action="download"
             doAction={() => {
               dispatchAssetEvent({ type: AssetEventType.download, ids: new Set([asset.id]) })
diff --git a/app/gui/src/dashboard/layouts/AssetDiffView/AssetDiffView.tsx b/app/gui/src/dashboard/layouts/AssetDiffView/AssetDiffView.tsx
index 00dabd95d666..3a68498ed974 100644
--- a/app/gui/src/dashboard/layouts/AssetDiffView/AssetDiffView.tsx
+++ b/app/gui/src/dashboard/layouts/AssetDiffView/AssetDiffView.tsx
@@ -2,20 +2,17 @@
 import { DiffEditor } from '@monaco-editor/react'
 import { useSuspenseQueries } from '@tanstack/react-query'
 
-import { versionContentQueryOptions } from '#/layouts/AssetDiffView/useFetchVersionContent'
-import type * as backendService from '#/services/Backend'
-import type Backend from '#/services/Backend'
-import { StatelessSpinner } from '../../components/StatelessSpinner'
+import type Backend from 'enso-common/src/services/Backend'
+import type { ProjectAsset, S3ObjectVersionId } from 'enso-common/src/services/Backend'
 
-// =====================
-// === AssetDiffView ===
-// =====================
+import { StatelessSpinner } from '#/components/StatelessSpinner'
+import { versionContentQueryOptions } from '#/layouts/AssetDiffView/useFetchVersionContent'
 
 /** Props for an {@link AssetDiffView}. */
 export interface AssetDiffViewProps {
-  readonly versionId: backendService.S3ObjectVersionId
-  readonly latestVersionId: backendService.S3ObjectVersionId
-  readonly project: backendService.ProjectAsset
+  readonly versionId: S3ObjectVersionId
+  readonly latestVersionId: S3ObjectVersionId
+  readonly project: ProjectAsset
   readonly backend: Backend
 }
 
diff --git a/app/gui/src/dashboard/layouts/AssetDiffView/useFetchVersionContent.ts b/app/gui/src/dashboard/layouts/AssetDiffView/useFetchVersionContent.ts
index 737a7238018e..654feac6069a 100644
--- a/app/gui/src/dashboard/layouts/AssetDiffView/useFetchVersionContent.ts
+++ b/app/gui/src/dashboard/layouts/AssetDiffView/useFetchVersionContent.ts
@@ -1,35 +1,25 @@
 /** @file Fetches the content of a project’s Main.enso file with specified version. */
+import { queryOptions, useQuery } from '@tanstack/react-query'
 
-import * as reactQuery from '@tanstack/react-query'
-
-import type * as backendService from '#/services/Backend'
-import type Backend from '#/services/Backend'
 import { splitFileContents } from 'ydoc-shared/ensoFile'
 
-// =================
-// === Constants ===
-// =================
+import type Backend from 'enso-common/src/services/Backend'
+import type { ProjectId, S3ObjectVersionId } from 'enso-common/src/services/Backend'
 
 const TWO_MINUTES_MS = 120_000
 
-// ==============================
-// === useFetchVersionContent ===
-// ==============================
-
 /** Options for {@link useFetchVersionContent}. */
 export interface FetchVersionContentOptions {
-  readonly projectId: backendService.ProjectId
-  readonly versionId?: backendService.S3ObjectVersionId
+  readonly projectId: ProjectId
+  readonly versionId?: S3ObjectVersionId
   readonly backend: Backend
   /** If `false`, the metadata is stripped out. Defaults to `false`. */
   readonly metadata?: boolean
 }
 
-/**
- * Return the query options for fetching the content of a version.
- */
+/** Return the query options for fetching the content of a version. */
 export function versionContentQueryOptions(params: FetchVersionContentOptions) {
-  return reactQuery.queryOptions({
+  return queryOptions({
     queryKey: [
       params.backend.type,
       {
@@ -49,7 +39,7 @@ export function versionContentQueryOptions(params: FetchVersionContentOptions) {
 
 /** Fetch the content of a version. */
 export function useFetchVersionContent(params: FetchVersionContentOptions) {
-  return reactQuery.useQuery(versionContentQueryOptions(params))
+  return useQuery(versionContentQueryOptions(params))
 }
 
 /** Remove the metadata from the content of a version. */
diff --git a/app/gui/src/dashboard/layouts/AssetDocs/AssetDocs.tsx b/app/gui/src/dashboard/layouts/AssetDocs/AssetDocs.tsx
index cdfe66a47fa1..e47e5d58ab30 100644
--- a/app/gui/src/dashboard/layouts/AssetDocs/AssetDocs.tsx
+++ b/app/gui/src/dashboard/layouts/AssetDocs/AssetDocs.tsx
@@ -1,19 +1,21 @@
 /** @file Documentation display for an asset. */
+import { useCallback } from 'react'
+
+import type Backend from 'enso-common/src/services/Backend'
+import { AssetType, type Asset } from 'enso-common/src/services/Backend'
+
 import { MarkdownViewer } from '#/components/MarkdownViewer'
 import { Result } from '#/components/Result'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import type { Asset } from '#/services/Backend'
-import { AssetType } from '#/services/Backend'
 import { useStore } from '#/utilities/zustand'
 import { useSuspenseQuery } from '@tanstack/react-query'
-import { useCallback } from 'react'
-import * as ast from 'ydoc-shared/ast'
-import { splitFileContents } from 'ydoc-shared/ensoFile'
 import { versionContentQueryOptions } from '../AssetDiffView/useFetchVersionContent'
 import { assetPanelStore } from '../AssetPanel'
 
-/** Props for a {@link AssetDocs}. */
+import { MutableFunctionDef, parseModule } from 'ydoc-shared/ast'
+import { splitFileContents } from 'ydoc-shared/ensoFile'
+
+/** Props for an {@link AssetDocs}. */
 export interface AssetDocsProps {
   readonly backend: Backend
 }
@@ -49,10 +51,10 @@ export function AssetDocsContent(props: AssetDocsContentProps) {
     ...versionContentQueryOptions({ backend, projectId: item.id, metadata: false }),
     select: (data) => {
       const { code } = splitFileContents(data)
-      const module = ast.parseModule(code)
+      const module = parseModule(code)
 
       for (const statement of module.statements()) {
-        if (statement instanceof ast.MutableFunctionDef && statement.name.code() === 'main') {
+        if (statement instanceof MutableFunctionDef && statement.name.code() === 'main') {
           return statement.mutableDocumentationMarkdown().toJSON()
         }
       }
diff --git a/app/gui/src/dashboard/layouts/AssetPanel/AssetPanelState.ts b/app/gui/src/dashboard/layouts/AssetPanel/AssetPanelState.ts
index 25f6ed4b67f7..6ae012f4bdf2 100644
--- a/app/gui/src/dashboard/layouts/AssetPanel/AssetPanelState.ts
+++ b/app/gui/src/dashboard/layouts/AssetPanel/AssetPanelState.ts
@@ -3,14 +3,17 @@
  * The state of the asset panel. Can be used to control the asset panel's visibility,
  * selected tab, and other properties from outside the component.
  */
+import { startTransition } from 'react'
+
+import * as z from 'zod'
+
+import type Backend from 'enso-common/src/services/Backend'
+import type { AnyAsset } from 'enso-common/src/services/Backend'
+
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import type Backend from '#/services/Backend'
-import type { AnyAsset } from '#/services/Backend'
+import type { AssetPropertiesSpotlight } from '#/layouts/AssetProperties'
 import LocalStorage from '#/utilities/LocalStorage'
-import * as zustand from '#/utilities/zustand'
-import { startTransition } from 'react'
-import { z } from 'zod'
-import type { AssetPropertiesSpotlight } from '../AssetProperties'
+import { createStore, useStore } from '#/utilities/zustand'
 import { ASSET_PANEL_TABS, type AssetPanelTab } from './types'
 
 declare module '#/utilities/LocalStorage' {
@@ -49,7 +52,7 @@ export interface AssetPanelState {
   readonly setIsAssetPanelHidden: (isAssetPanelHidden: boolean) => void
 }
 
-export const assetPanelStore = zustand.createStore<AssetPanelState>((set, get) => {
+export const assetPanelStore = createStore<AssetPanelState>((set, get) => {
   const localStorage = LocalStorage.getInstance()
   return {
     selectedTab: localStorage.get('assetPanelTab') ?? 'settings',
@@ -131,28 +134,28 @@ export interface AssetPanelContextProps {
 
 /** Whether the Asset Panel is toggled on. */
 export function useIsAssetPanelPermanentlyVisible() {
-  return zustand.useStore(assetPanelStore, (state) => state.isAssetPanelPermanentlyVisible, {
+  return useStore(assetPanelStore, (state) => state.isAssetPanelPermanentlyVisible, {
     unsafeEnableTransition: true,
   })
 }
 
 /** A function to set whether the Asset Panel is toggled on. */
 export function useSetIsAssetPanelPermanentlyVisible() {
-  return zustand.useStore(assetPanelStore, (state) => state.setIsAssetPanelPermanentlyVisible, {
+  return useStore(assetPanelStore, (state) => state.setIsAssetPanelPermanentlyVisible, {
     unsafeEnableTransition: true,
   })
 }
 
 /** Whether the Asset Panel is currently visible (e.g. for editing a Datalink). */
 export function useIsAssetPanelTemporarilyVisible() {
-  return zustand.useStore(assetPanelStore, (state) => state.isAssetPanelTemporarilyVisible, {
+  return useStore(assetPanelStore, (state) => state.isAssetPanelTemporarilyVisible, {
     unsafeEnableTransition: true,
   })
 }
 
 /** A function to set whether the Asset Panel is currently visible (e.g. for editing a Datalink). */
 export function useSetIsAssetPanelTemporarilyVisible() {
-  return zustand.useStore(assetPanelStore, (state) => state.setIsAssetPanelTemporarilyVisible, {
+  return useStore(assetPanelStore, (state) => state.setIsAssetPanelTemporarilyVisible, {
     unsafeEnableTransition: true,
   })
 }
@@ -166,7 +169,7 @@ export function useIsAssetPanelVisible() {
 
 /** Whether the Asset Panel is expanded. */
 export function useIsAssetPanelExpanded() {
-  return zustand.useStore(
+  return useStore(
     assetPanelStore,
     ({ isAssetPanelPermanentlyVisible, isAssetPanelTemporarilyVisible }) =>
       isAssetPanelPermanentlyVisible || isAssetPanelTemporarilyVisible,
@@ -176,14 +179,14 @@ export function useIsAssetPanelExpanded() {
 
 /** A function to set whether the Asset Panel is expanded. */
 export function useSetIsAssetPanelExpanded() {
-  return zustand.useStore(assetPanelStore, (state) => state.setIsAssetPanelExpanded, {
+  return useStore(assetPanelStore, (state) => state.setIsAssetPanelExpanded, {
     unsafeEnableTransition: true,
   })
 }
 
 /** Props for the Asset Panel. */
 export function useAssetPanelProps() {
-  return zustand.useStore(assetPanelStore, (state) => state.assetPanelProps, {
+  return useStore(assetPanelStore, (state) => state.assetPanelProps, {
     unsafeEnableTransition: true,
     areEqual: 'shallow',
   })
@@ -191,14 +194,14 @@ export function useAssetPanelProps() {
 
 /** The selected tab of the Asset Panel. */
 export function useAssetPanelSelectedTab() {
-  return zustand.useStore(assetPanelStore, (state) => state.assetPanelProps.selectedTab, {
+  return useStore(assetPanelStore, (state) => state.assetPanelProps.selectedTab, {
     unsafeEnableTransition: true,
   })
 }
 
 /** A function to set props for the Asset Panel. */
 export function useSetAssetPanelProps() {
-  return zustand.useStore(assetPanelStore, (state) => state.setAssetPanelProps, {
+  return useStore(assetPanelStore, (state) => state.setAssetPanelProps, {
     unsafeEnableTransition: true,
   })
 }
@@ -237,14 +240,14 @@ export function useSetAssetPanelSelectedTab() {
 
 /** Whether the Asset Panel is hidden. */
 export function useIsAssetPanelHidden() {
-  return zustand.useStore(assetPanelStore, (state) => state.isAssetPanelHidden, {
+  return useStore(assetPanelStore, (state) => state.isAssetPanelHidden, {
     unsafeEnableTransition: true,
   })
 }
 
 /** A function to set whether the Asset Panel is hidden. */
 export function useSetIsAssetPanelHidden() {
-  return zustand.useStore(assetPanelStore, (state) => state.setIsAssetPanelHidden, {
+  return useStore(assetPanelStore, (state) => state.setIsAssetPanelHidden, {
     unsafeEnableTransition: true,
   })
 }
diff --git a/app/gui/src/dashboard/layouts/AssetProjectSession.tsx b/app/gui/src/dashboard/layouts/AssetProjectSession.tsx
index ae8eccbad163..cc67fc1dfb6e 100644
--- a/app/gui/src/dashboard/layouts/AssetProjectSession.tsx
+++ b/app/gui/src/dashboard/layouts/AssetProjectSession.tsx
@@ -1,12 +1,12 @@
 /** @file Displays information describing a specific version of an asset. */
-import LogsIcon from '#/assets/logs.svg'
+import type Backend from 'enso-common/src/services/Backend'
+import type { ProjectAsset, ProjectSession } from 'enso-common/src/services/Backend'
+import { formatDateTime } from 'enso-common/src/utilities/data/dateTime'
 
+import LogsIcon from '#/assets/logs.svg'
 import { Button, DialogTrigger } from '#/components/AriaComponents'
 import ProjectLogsModal from '#/modals/ProjectLogsModal'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import type { ProjectAsset, ProjectSession } from '#/services/Backend'
-import { formatDateTime } from '#/utilities/dateTime'
 
 /** Props for a {@link AssetProjectSession}. */
 export interface AssetProjectSessionProps {
diff --git a/app/gui/src/dashboard/layouts/AssetProjectSessions.tsx b/app/gui/src/dashboard/layouts/AssetProjectSessions.tsx
index 49877ce682f5..7859d4c44dc6 100644
--- a/app/gui/src/dashboard/layouts/AssetProjectSessions.tsx
+++ b/app/gui/src/dashboard/layouts/AssetProjectSessions.tsx
@@ -1,13 +1,12 @@
 /** @file A list of previous versions of an asset. */
-import * as reactQuery from '@tanstack/react-query'
+import { useSuspenseQuery } from '@tanstack/react-query'
 
-import AssetProjectSession from '#/layouts/AssetProjectSession'
-
-import type Backend from '#/services/Backend'
+import type Backend from 'enso-common/src/services/Backend'
+import { AssetType, BackendType, type ProjectAsset } from 'enso-common/src/services/Backend'
 
 import { Result } from '#/components/Result'
+import AssetProjectSession from '#/layouts/AssetProjectSession'
 import { useText } from '#/providers/TextProvider'
-import { AssetType, BackendType, type ProjectAsset } from '#/services/Backend'
 import { useStore } from '#/utilities/zustand'
 import { assetPanelStore } from './AssetPanel'
 
@@ -51,7 +50,7 @@ function AssetProjectSessionsInternal(props: AssetProjectSessionsInternalProps)
   const { backend, item } = props
   const { getText } = useText()
 
-  const projectSessionsQuery = reactQuery.useSuspenseQuery({
+  const projectSessionsQuery = useSuspenseQuery({
     queryKey: ['getProjectSessions', item.id, item.title],
     queryFn: async () => {
       const sessions = await backend.listProjectSessions(item.id, item.title)
diff --git a/app/gui/src/dashboard/layouts/AssetProperties.tsx b/app/gui/src/dashboard/layouts/AssetProperties.tsx
index 1ebcf95ea778..91339f92bec7 100644
--- a/app/gui/src/dashboard/layouts/AssetProperties.tsx
+++ b/app/gui/src/dashboard/layouts/AssetProperties.tsx
@@ -3,6 +3,16 @@ import * as React from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
+import type Backend from 'enso-common/src/services/Backend'
+import {
+  AssetType,
+  BackendType,
+  Plan,
+  type AnyAsset,
+  type DatalinkId,
+} from 'enso-common/src/services/Backend'
+import { normalizePath } from 'enso-common/src/utilities/data/fileInfo'
+
 import PenIcon from '#/assets/pen.svg'
 import { Heading } from '#/components/aria'
 import {
@@ -30,14 +40,11 @@ import { useFullUserSession } from '#/providers/AuthProvider'
 import { useLocalBackend } from '#/providers/BackendProvider'
 import { useFeatureFlags } from '#/providers/FeatureFlagsProvider'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import { AssetType, BackendType, Plan, type AnyAsset, type DatalinkId } from '#/services/Backend'
 import { extractTypeAndId } from '#/services/LocalBackend'
-import { normalizePath } from '#/utilities/fileInfo'
 import { mapNonNullish } from '#/utilities/nullable'
-import * as permissions from '#/utilities/permissions'
+import { PermissionAction, tryFindSelfPermission } from '#/utilities/permissions'
 import { tv } from '#/utilities/tailwindVariants'
-import { useStore } from '../utilities/zustand'
+import { useStore } from '#/utilities/zustand'
 
 const ASSET_PROPERTIES_VARIANTS = tv({
   base: '',
@@ -162,12 +169,12 @@ function AssetPropertiesInternal(props: AssetPropertiesInternalProps) {
   })
 
   const labels = useBackendQuery(backend, 'listTags', []).data ?? []
-  const self = permissions.tryFindSelfPermission(user, item.permissions)
-  const ownsThisAsset = self?.permission === permissions.PermissionAction.own
+  const self = tryFindSelfPermission(user, item.permissions)
+  const ownsThisAsset = self?.permission === PermissionAction.own
   const canEditThisAsset =
     ownsThisAsset ||
-    self?.permission === permissions.PermissionAction.admin ||
-    self?.permission === permissions.PermissionAction.edit
+    self?.permission === PermissionAction.admin ||
+    self?.permission === PermissionAction.edit
   const isSecret = item.type === AssetType.secret
   const isDatalink = item.type === AssetType.datalink
   const isCloud = backend.type === BackendType.remote
diff --git a/app/gui/src/dashboard/layouts/AssetSearchBar.tsx b/app/gui/src/dashboard/layouts/AssetSearchBar.tsx
index 1e66728507c6..ce191285bf84 100644
--- a/app/gui/src/dashboard/layouts/AssetSearchBar.tsx
+++ b/app/gui/src/dashboard/layouts/AssetSearchBar.tsx
@@ -1,38 +1,55 @@
 /** @file A search bar containing a text input, and a list of suggestions. */
-import * as React from 'react'
+import {
+  memo,
+  startTransition,
+  useDeferredValue,
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type Dispatch,
+  type MutableRefObject,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type MouseEvent as ReactMouseEvent,
+  type ReactNode,
+  type RefAttributes,
+  type RefObject,
+  type SetStateAction,
+} from 'react'
 
-import * as detect from 'enso-common/src/detect'
-
-import FindIcon from '#/assets/find.svg'
-import { unsafeWriteValue } from '#/utilities/write'
-
-import * as backendHooks from '#/hooks/backendHooks'
+import { AnimatePresence, motion } from 'framer-motion'
 
-import * as modalProvider from '#/providers/ModalProvider'
-import * as textProvider from '#/providers/TextProvider'
+import { isOnMacOS } from 'enso-common/src/detect'
+import type { Backend, Label as BackendLabel } from 'enso-common/src/services/Backend'
+import { shallowEqual } from 'enso-common/src/utilities/data/array'
+import { compareCaseInsensitive } from 'enso-common/src/utilities/data/string'
 
-import * as aria from '#/components/aria'
-import * as ariaComponents from '#/components/AriaComponents'
+import FindIcon from '#/assets/find.svg'
+import {
+  Button as AriaButton,
+  Label as AriaLabel,
+  Input,
+  mergeProps,
+  SearchField,
+  type KeyboardEvent as AriaKeyboardEvent,
+  type LabelProps,
+  type PressEvent,
+} from '#/components/aria'
+import { Button, DIALOG_BACKGROUND, Text } from '#/components/AriaComponents'
 import Label from '#/components/dashboard/Label'
 import FocusArea from '#/components/styled/FocusArea'
 import FocusRing from '#/components/styled/FocusRing'
 import SvgMask from '#/components/SvgMask'
-
+import { useBackendQuery } from '#/hooks/backendHooks'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useSyncRef } from '#/hooks/syncRefHooks'
-import type Backend from '#/services/Backend'
-import type { Label as BackendLabel } from '#/services/Backend'
-import * as array from '#/utilities/array'
+import { useModalRef } from '#/providers/ModalProvider'
+import { useText } from '#/providers/TextProvider'
 import AssetQuery from '#/utilities/AssetQuery'
-import * as eventModule from '#/utilities/event'
-import * as string from '#/utilities/string'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
+import { isElementTextInput, isPotentiallyShortcut, isTextInputEvent } from '#/utilities/event'
+import { twMerge } from '#/utilities/tailwindMerge'
+import { unsafeWriteValue } from '#/utilities/write'
 import { createStore, useStore } from '#/utilities/zustand'
-import { AnimatePresence, motion } from 'framer-motion'
-
-// =============
-// === Types ===
-// =============
 
 /** The reason behind a new query. */
 enum QuerySource {
@@ -52,21 +69,17 @@ enum QuerySource {
 /** A suggested query. */
 export interface Suggestion {
   readonly key: string
-  readonly render: () => React.ReactNode
+  readonly render: () => ReactNode
   readonly addToQuery: (query: AssetQuery) => AssetQuery
   readonly deleteFromQuery: (query: AssetQuery) => AssetQuery
 }
 
-// ============
-// === Tags ===
-// ============
-
 /** Props for a {@link Tags}. */
 interface InternalTagsProps {
   readonly isCloud: boolean
-  readonly querySource: React.MutableRefObject<QuerySource>
+  readonly querySource: MutableRefObject<QuerySource>
   readonly query: AssetQuery
-  readonly setQuery: React.Dispatch<React.SetStateAction<AssetQuery>>
+  readonly setQuery: Dispatch<SetStateAction<AssetQuery>>
 }
 
 export const searchbarSuggestionsStore = createStore<{
@@ -91,9 +104,9 @@ export function useSetSuggestions() {
 /** Tags (`name:`, `modified:`, etc.) */
 function Tags(props: InternalTagsProps) {
   const { isCloud, querySource, query, setQuery } = props
-  const [isShiftPressed, setIsShiftPressed] = React.useState(false)
+  const [isShiftPressed, setIsShiftPressed] = useState(false)
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
       setIsShiftPressed(event.shiftKey)
     }
@@ -119,7 +132,7 @@ function Tags(props: InternalTagsProps) {
             []
           : [
               <FocusRing key={key}>
-                <ariaComponents.Button
+                <Button
                   variant="outline"
                   size="xsmall"
                   className="min-w-12"
@@ -129,7 +142,7 @@ function Tags(props: InternalTagsProps) {
                   }}
                 >
                   {tag + ':'}
-                </ariaComponents.Button>
+                </Button>
               </FocusRing>,
             ]
       })}
@@ -146,53 +159,53 @@ export interface AssetSearchBarProps {
   readonly backend: Backend | null
   readonly isCloud: boolean
   readonly query: AssetQuery
-  readonly setQuery: React.Dispatch<React.SetStateAction<AssetQuery>>
+  readonly setQuery: Dispatch<SetStateAction<AssetQuery>>
 }
 
 /** A search bar containing a text input, and a list of suggestions. */
 function AssetSearchBar(props: AssetSearchBarProps) {
   const { backend, isCloud, query, setQuery } = props
-  const { modalRef } = modalProvider.useModalRef()
+  const { modalRef } = useModalRef()
   /** A cached query as of the start of tabbing. */
-  const baseQuery = React.useRef(query)
+  const baseQuery = useRef(query)
 
   const rawSuggestions = useStore(searchbarSuggestionsStore, (state) => state.suggestions, {
     unsafeEnableTransition: true,
   })
 
-  const [suggestions, setSuggestions] = React.useState(rawSuggestions)
+  const [suggestions, setSuggestions] = useState(rawSuggestions)
 
   const suggestionsRef = useSyncRef(suggestions)
 
-  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(null)
-  const [areSuggestionsVisible, privateSetAreSuggestionsVisible] = React.useState(false)
-  const areSuggestionsVisibleRef = React.useRef(areSuggestionsVisible)
-  const querySource = React.useRef(QuerySource.external)
-  const rootRef = React.useRef<HTMLLabelElement | null>(null)
-  const searchRef = React.useRef<HTMLInputElement | null>(null)
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
+  const [areSuggestionsVisible, privateSetAreSuggestionsVisible] = useState(false)
+  const areSuggestionsVisibleRef = useRef(areSuggestionsVisible)
+  const querySource = useRef(QuerySource.external)
+  const rootRef = useRef<HTMLLabelElement | null>(null)
+  const searchRef = useRef<HTMLInputElement | null>(null)
 
   const setAreSuggestionsVisible = useEventCallback((value: boolean) => {
-    React.startTransition(() => {
+    startTransition(() => {
       privateSetAreSuggestionsVisible(value)
       areSuggestionsVisibleRef.current = value
     })
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (querySource.current !== QuerySource.tabbing) {
       setSuggestions(rawSuggestions)
       unsafeWriteValue(suggestionsRef, 'current', rawSuggestions)
     }
   }, [rawSuggestions, suggestionsRef])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (querySource.current !== QuerySource.tabbing) {
       baseQuery.current = query
     }
     // This effect MUST only run when `query` changes.
   }, [query])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (querySource.current !== QuerySource.tabbing) {
       setSelectedIndex(null)
     }
@@ -208,7 +221,7 @@ function AssetSearchBar(props: AssetSearchBarProps) {
 
   const selectedIndexDeps = useSyncRef({ query, setQuery, suggestions })
 
-  React.useEffect(() => {
+  useEffect(() => {
     const deps = selectedIndexDeps.current
     if (
       querySource.current === QuerySource.internal ||
@@ -229,7 +242,7 @@ function AssetSearchBar(props: AssetSearchBarProps) {
     }
   }, [selectedIndex, selectedIndexDeps])
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onSearchKeyDown = (event: KeyboardEvent) => {
       if (areSuggestionsVisibleRef.current) {
         if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
@@ -274,11 +287,11 @@ function AssetSearchBar(props: AssetSearchBarProps) {
     const onKeyDown = (event: KeyboardEvent) => {
       // Allow `alt` key to be pressed in case it is being used to enter special characters.
       if (
-        !eventModule.isElementTextInput(event.target) &&
+        !isElementTextInput(event.target) &&
         (!(event.target instanceof Node) || rootRef.current?.contains(event.target) !== true) &&
-        eventModule.isTextInputEvent(event) &&
+        isTextInputEvent(event) &&
         event.key !== ' ' &&
-        (!detect.isOnMacOS() || event.key !== 'Delete') &&
+        (!isOnMacOS() || event.key !== 'Delete') &&
         modalRef.current == null
       ) {
         searchRef.current?.focus()
@@ -286,7 +299,7 @@ function AssetSearchBar(props: AssetSearchBarProps) {
       if (
         event.target instanceof Node &&
         rootRef.current?.contains(event.target) === true &&
-        eventModule.isPotentiallyShortcut(event)
+        isPotentiallyShortcut(event)
       ) {
         searchRef.current?.focus()
       }
@@ -301,7 +314,7 @@ function AssetSearchBar(props: AssetSearchBarProps) {
   }, [setQuery, modalRef, setAreSuggestionsVisible, suggestionsRef])
 
   // Reset `querySource` after all other effects have run.
-  React.useEffect(() => {
+  useEffect(() => {
     if (querySource.current !== QuerySource.typing && searchRef.current != null) {
       searchRef.current.value = query.toString()
     }
@@ -311,18 +324,18 @@ function AssetSearchBar(props: AssetSearchBarProps) {
     }
   }, [query, setQuery])
 
-  const onSearchFieldKeyDown = useEventCallback((event: aria.KeyboardEvent) => {
+  const onSearchFieldKeyDown = useEventCallback((event: AriaKeyboardEvent) => {
     event.continuePropagation()
   })
 
-  const searchFieldOnChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+  const searchFieldOnChange = useEventCallback((event: ChangeEvent<HTMLInputElement>) => {
     if (querySource.current !== QuerySource.internal) {
       querySource.current = QuerySource.typing
       setQuery(AssetQuery.fromString(event.target.value))
     }
   })
 
-  const searchInputOnKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+  const searchInputOnKeyDown = useEventCallback((event: ReactKeyboardEvent<HTMLInputElement>) => {
     if (
       event.key === 'Enter' &&
       !event.shiftKey &&
@@ -335,33 +348,30 @@ function AssetSearchBar(props: AssetSearchBarProps) {
     }
   })
 
-  const deferredSuggestions = React.useDeferredValue(suggestions)
+  const deferredSuggestions = useDeferredValue(suggestions)
 
   return (
     <FocusArea direction="horizontal">
       {(innerProps) => (
         <div className="relative w-full max-w-[60em]">
-          <aria.Label
+          <AriaLabel
             data-testid="asset-search-bar"
-            {...aria.mergeProps<aria.LabelProps & React.RefAttributes<HTMLLabelElement>>()(
-              innerProps,
-              {
-                className:
-                  'z-1 group flex grow items-center gap-asset-search-bar rounded-full px-1.5 py-1 text-primary border-0.5 border-primary/20',
-                ref: rootRef,
-                onFocus: () => {
-                  setAreSuggestionsVisible(true)
-                },
-                onBlur: (event) => {
-                  if (!event.currentTarget.contains(event.relatedTarget)) {
-                    if (querySource.current === QuerySource.tabbing) {
-                      querySource.current = QuerySource.external
-                    }
-                    setAreSuggestionsVisible(false)
+            {...mergeProps<LabelProps & RefAttributes<HTMLLabelElement>>()(innerProps, {
+              className:
+                'z-1 group flex grow items-center gap-asset-search-bar rounded-full px-1.5 py-1 text-primary border-0.5 border-primary/20',
+              ref: rootRef,
+              onFocus: () => {
+                setAreSuggestionsVisible(true)
+              },
+              onBlur: (event) => {
+                if (!event.currentTarget.contains(event.relatedTarget)) {
+                  if (querySource.current === QuerySource.tabbing) {
+                    querySource.current = QuerySource.external
                   }
-                },
+                  setAreSuggestionsVisible(false)
+                }
               },
-            )}
+            })}
           >
             <div className="relative size-4 placeholder" />
 
@@ -391,7 +401,7 @@ function AssetSearchBar(props: AssetSearchBarProps) {
               searchFieldOnChange={searchFieldOnChange}
               searchInputOnKeyDown={searchInputOnKeyDown}
             />
-          </aria.Label>
+          </AriaLabel>
         </div>
       )}
     </FocusArea>
@@ -402,19 +412,17 @@ function AssetSearchBar(props: AssetSearchBarProps) {
 interface AssetSearchBarInputProps {
   readonly query: AssetQuery
   readonly isCloud: boolean
-  readonly onSearchFieldKeyDown: (event: aria.KeyboardEvent) => void
-  readonly searchRef: React.RefObject<HTMLInputElement>
-  readonly searchFieldOnChange: (event: React.ChangeEvent<HTMLInputElement>) => void
-  readonly searchInputOnKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
+  readonly onSearchFieldKeyDown: (event: AriaKeyboardEvent) => void
+  readonly searchRef: RefObject<HTMLInputElement>
+  readonly searchFieldOnChange: (event: ChangeEvent<HTMLInputElement>) => void
+  readonly searchInputOnKeyDown: (event: ReactKeyboardEvent<HTMLInputElement>) => void
 }
 
 /**
  * Renders the search field.
  */
 // eslint-disable-next-line no-restricted-syntax
-const AssetSearchBarInput = React.memo(function AssetSearchBarInput(
-  props: AssetSearchBarInputProps,
-) {
+const AssetSearchBarInput = memo(function AssetSearchBarInput(props: AssetSearchBarInputProps) {
   const {
     query,
     isCloud,
@@ -423,23 +431,23 @@ const AssetSearchBarInput = React.memo(function AssetSearchBarInput(
     searchFieldOnChange,
     searchInputOnKeyDown,
   } = props
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
   return (
     <>
       <FocusRing placement="before">
-        <aria.SearchField
+        <SearchField
           aria-label={getText('assetSearchFieldLabel')}
           className="relative grow before:text before:absolute before:-inset-x-1 before:my-auto before:rounded-full before:transition-all"
           value={query.query}
           onKeyDown={onSearchFieldKeyDown}
         >
-          <aria.Input
+          <Input
             type="search"
             ref={searchRef}
             size={1}
             placeholder={
               isCloud ?
-                detect.isOnMacOS() ?
+                isOnMacOS() ?
                   getText('remoteBackendSearchPlaceholderMacOs')
                 : getText('remoteBackendSearchPlaceholder')
               : getText('localBackendSearchPlaceholder')
@@ -448,7 +456,7 @@ const AssetSearchBarInput = React.memo(function AssetSearchBarInput(
             onChange={searchFieldOnChange}
             onKeyDown={searchInputOnKeyDown}
           />
-        </aria.SearchField>
+        </SearchField>
       </FocusRing>
     </>
   )
@@ -460,20 +468,20 @@ const AssetSearchBarInput = React.memo(function AssetSearchBarInput(
 interface AssetSearchBarPopoverProps {
   readonly areSuggestionsVisible: boolean
   readonly isCloud: boolean
-  readonly querySource: React.MutableRefObject<QuerySource>
+  readonly querySource: MutableRefObject<QuerySource>
   readonly query: AssetQuery
-  readonly setQuery: React.Dispatch<React.SetStateAction<AssetQuery>>
+  readonly setQuery: Dispatch<SetStateAction<AssetQuery>>
   readonly suggestions: readonly Suggestion[]
   readonly selectedIndex: number | null
   readonly setAreSuggestionsVisible: (value: boolean) => void
-  readonly baseQuery: React.MutableRefObject<AssetQuery>
+  readonly baseQuery: MutableRefObject<AssetQuery>
   readonly backend: Backend | null
 }
 
 /**
  * Renders the popover containing suggestions.
  */
-const AssetSearchBarPopover = React.memo(function AssetSearchBarPopover(
+const AssetSearchBarPopover = memo(function AssetSearchBarPopover(
   props: AssetSearchBarPopoverProps,
 ) {
   const {
@@ -489,9 +497,7 @@ const AssetSearchBarPopover = React.memo(function AssetSearchBarPopover(
     backend,
   } = props
 
-  const [selectedIndices, setSelectedIndices] = React.useState<ReadonlySet<number>>(
-    new Set<number>(),
-  )
+  const [selectedIndices, setSelectedIndices] = useState<ReadonlySet<number>>(new Set<number>())
 
   return (
     <>
@@ -501,7 +507,7 @@ const AssetSearchBarPopover = React.memo(function AssetSearchBarPopover(
             initial={{ height: 0, opacity: 0 }}
             animate={{ height: 'auto', opacity: 1 }}
             exit={{ height: 0, opacity: 0 }}
-            className={ariaComponents.DIALOG_BACKGROUND({
+            className={DIALOG_BACKGROUND({
               className:
                 'absolute left-0 right-0 top-0 z-1 grid w-full overflow-hidden rounded-default border-0.5 border-primary/20 -outline-offset-1 outline-primary',
             })}
@@ -558,19 +564,19 @@ interface SuggestionRendererProps {
   readonly index: number
   readonly suggestion: Suggestion
   readonly query: AssetQuery
-  readonly baseQuery: React.MutableRefObject<AssetQuery>
+  readonly baseQuery: MutableRefObject<AssetQuery>
   readonly selectedIndex: number | null
   readonly selectedIndices: ReadonlySet<number>
-  readonly setSelectedIndices: React.Dispatch<React.SetStateAction<ReadonlySet<number>>>
-  readonly querySource: React.MutableRefObject<QuerySource>
-  readonly setQuery: React.Dispatch<React.SetStateAction<AssetQuery>>
+  readonly setSelectedIndices: Dispatch<SetStateAction<ReadonlySet<number>>>
+  readonly querySource: MutableRefObject<QuerySource>
+  readonly setQuery: Dispatch<SetStateAction<AssetQuery>>
   readonly setAreSuggestionsVisible: (value: boolean) => void
 }
 
 /**
  * Renders a suggestion.
  */
-const SuggestionRenderer = React.memo(function SuggestionRenderer(props: SuggestionRendererProps) {
+const SuggestionRenderer = memo(function SuggestionRenderer(props: SuggestionRendererProps) {
   const {
     index,
     selectedIndex,
@@ -585,7 +591,7 @@ const SuggestionRenderer = React.memo(function SuggestionRenderer(props: Suggest
   } = props
 
   return (
-    <aria.Button
+    <AriaButton
       data-testid="asset-search-suggestion"
       key={index}
       ref={(el) => {
@@ -593,7 +599,7 @@ const SuggestionRenderer = React.memo(function SuggestionRenderer(props: Suggest
           el?.focus()
         }
       }}
-      className={tailwindMerge.twMerge(
+      className={twMerge(
         'flex w-full cursor-pointer rounded-l-default rounded-r-sm px-[7px] py-0.5 text-left transition-[background-color] hover:bg-primary/5',
         selectedIndices.has(index) && 'bg-primary/10',
         index === selectedIndex && 'bg-selected-frame',
@@ -618,10 +624,10 @@ const SuggestionRenderer = React.memo(function SuggestionRenderer(props: Suggest
         }
       }}
     >
-      <ariaComponents.Text variant="body" truncate="1" className="w-full">
+      <Text variant="body" truncate="1" className="w-full">
         {suggestion.render()}
-      </ariaComponents.Text>
-    </aria.Button>
+      </Text>
+    </AriaButton>
   )
 })
 
@@ -631,22 +637,22 @@ const SuggestionRenderer = React.memo(function SuggestionRenderer(props: Suggest
 interface LabelsProps {
   readonly isCloud: boolean
   readonly query: AssetQuery
-  readonly setQuery: React.Dispatch<React.SetStateAction<AssetQuery>>
+  readonly setQuery: Dispatch<SetStateAction<AssetQuery>>
   readonly backend: Backend | null
-  readonly querySource: React.MutableRefObject<QuerySource>
-  readonly baseQuery: React.MutableRefObject<AssetQuery>
+  readonly querySource: MutableRefObject<QuerySource>
+  readonly baseQuery: MutableRefObject<AssetQuery>
 }
 
 /**
  * Renders labels.
  */
-const Labels = React.memo(function Labels(props: LabelsProps) {
+const Labels = memo(function Labels(props: LabelsProps) {
   const { isCloud, query, setQuery, backend, querySource, baseQuery } = props
 
-  const labels = backendHooks.useBackendQuery(backend, 'listTags', []).data ?? []
+  const labels = useBackendQuery(backend, 'listTags', []).data ?? []
 
   const labelOnPress = useEventCallback(
-    (event: aria.PressEvent | React.MouseEvent<HTMLButtonElement>, label?: BackendLabel) => {
+    (event: PressEvent | ReactMouseEvent<HTMLButtonElement>, label?: BackendLabel) => {
       if (label == null) {
         return
       }
@@ -669,19 +675,15 @@ const Labels = React.memo(function Labels(props: LabelsProps) {
       {isCloud && labels.length !== 0 && (
         <div data-testid="asset-search-labels" className="pointer-events-auto flex gap-2 px-1.5">
           {[...labels]
-            .sort((a, b) => string.compareCaseInsensitive(a.value, b.value))
+            .sort((a, b) => compareCaseInsensitive(a.value, b.value))
             .map((label) => {
-              const negated = query.negativeLabels.some((term) =>
-                array.shallowEqual(term, [label.value]),
-              )
+              const negated = query.negativeLabels.some((term) => shallowEqual(term, [label.value]))
               return (
                 <Label
                   key={label.id}
                   color={label.color}
                   label={label}
-                  active={
-                    negated || query.labels.some((term) => array.shallowEqual(term, [label.value]))
-                  }
+                  active={negated || query.labels.some((term) => shallowEqual(term, [label.value]))}
                   negated={negated}
                   onPress={labelOnPress}
                 >
@@ -695,4 +697,4 @@ const Labels = React.memo(function Labels(props: LabelsProps) {
   )
 })
 
-export default React.memo(AssetSearchBar)
+export default memo(AssetSearchBar)
diff --git a/app/gui/src/dashboard/layouts/AssetVersions/AssetVersion.tsx b/app/gui/src/dashboard/layouts/AssetVersions/AssetVersion.tsx
index a435fd0a5f73..6653c10c82b3 100644
--- a/app/gui/src/dashboard/layouts/AssetVersions/AssetVersion.tsx
+++ b/app/gui/src/dashboard/layouts/AssetVersions/AssetVersion.tsx
@@ -1,37 +1,26 @@
 /** @file Displays information describing a specific version of an asset. */
-import * as React from 'react'
+import type Backend from 'enso-common/src/services/Backend'
+import { AssetType, type AnyAsset, type S3ObjectVersion } from 'enso-common/src/services/Backend'
+import { formatDateTime } from 'enso-common/src/utilities/data/dateTime'
 
 import CompareIcon from '#/assets/compare.svg'
 import DuplicateIcon from '#/assets/duplicate.svg'
 import RestoreIcon from '#/assets/restore.svg'
-
-import * as textProvider from '#/providers/TextProvider'
-
+import * as ariaComponents from '#/components/AriaComponents'
 import AssetListEventType from '#/events/AssetListEventType'
-
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import * as assetDiffView from '#/layouts/AssetDiffView'
 import * as eventListProvider from '#/layouts/Drive/EventListProvider'
-
-import * as ariaComponents from '#/components/AriaComponents'
-
-import type Backend from '#/services/Backend'
-import * as backendService from '#/services/Backend'
-
-import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import * as dateTime from '#/utilities/dateTime'
+import * as textProvider from '#/providers/TextProvider'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
 
-// ====================
-// === AssetVersion ===
-// ====================
-
 /** Props for a {@link AssetVersion}. */
 export interface AssetVersionProps {
   readonly placeholder?: boolean
-  readonly item: backendService.AnyAsset
+  readonly item: AnyAsset
   readonly number: number
-  readonly version: backendService.S3ObjectVersion
-  readonly latestVersion: backendService.S3ObjectVersion
+  readonly version: S3ObjectVersion
+  readonly latestVersion: S3ObjectVersion
   readonly backend: Backend
   readonly doRestore: () => Promise<void> | void
 }
@@ -41,7 +30,7 @@ export default function AssetVersion(props: AssetVersionProps) {
   const { placeholder = false, number, version, item, backend, latestVersion, doRestore } = props
   const { getText } = textProvider.useText()
   const dispatchAssetListEvent = eventListProvider.useDispatchAssetListEvent()
-  const isProject = item.type === backendService.AssetType.project
+  const isProject = item.type === AssetType.project
 
   const doDuplicate = useEventCallback(() => {
     if (isProject) {
@@ -68,7 +57,7 @@ export default function AssetVersion(props: AssetVersionProps) {
         </div>
 
         <time className="text-xs text-not-selected">
-          {getText('onDateX', dateTime.formatDateTime(new Date(version.lastModified)))}
+          {getText('onDateX', formatDateTime(new Date(version.lastModified)))}
         </time>
       </div>
 
diff --git a/app/gui/src/dashboard/layouts/AssetVersions/AssetVersions.tsx b/app/gui/src/dashboard/layouts/AssetVersions/AssetVersions.tsx
index a3ff7ad56660..27d9dffd6b8a 100644
--- a/app/gui/src/dashboard/layouts/AssetVersions/AssetVersions.tsx
+++ b/app/gui/src/dashboard/layouts/AssetVersions/AssetVersions.tsx
@@ -3,43 +3,38 @@ import * as React from 'react'
 
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
 
-import * as uniqueString from 'enso-common/src/utilities/uniqueString'
+import type Backend from 'enso-common/src/services/Backend'
+import {
+  AssetType,
+  BackendType,
+  S3ObjectVersionId,
+  type AnyAsset,
+  type S3ObjectVersion,
+} from 'enso-common/src/services/Backend'
+import { toRfc3339 } from 'enso-common/src/utilities/data/dateTime'
+import { noop } from 'enso-common/src/utilities/functions'
+import { uniqueString } from 'enso-common/src/utilities/uniqueString'
 
 import { Result } from '#/components/Result'
-import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
+import { useToastAndLog } from '#/hooks/toastAndLogHooks'
+import { assetPanelStore } from '#/layouts/AssetPanel/AssetPanelState'
 import AssetVersion from '#/layouts/AssetVersions/AssetVersion'
-import * as textProvider from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import type { AnyAsset } from '#/services/Backend'
-import * as backendService from '#/services/Backend'
-import * as dateTime from '#/utilities/dateTime'
-import { noop } from '#/utilities/functions'
+import { useText } from '#/providers/TextProvider'
 import { useStore } from '#/utilities/zustand'
-import { assetPanelStore } from '../AssetPanel/AssetPanelState'
 import { assetVersionsQueryOptions } from './useAssetVersions'
 
-// ==============================
-// === AddNewVersionVariables ===
-// ==============================
-
 /** Variables for the "add new version" mutation. */
 interface AddNewVersionVariables {
-  readonly versionId: backendService.S3ObjectVersionId
-  readonly placeholderId: backendService.S3ObjectVersionId
+  readonly versionId: S3ObjectVersionId
+  readonly placeholderId: S3ObjectVersionId
 }
 
-// =====================
-// === AssetVersions ===
-// =====================
-
 /** Props for a {@link AssetVersions}. */
 export interface AssetVersionsProps {
   readonly backend: Backend
 }
 
-/**
- * Display a list of previous versions of an asset.
- */
+/** Display a list of previous versions of an asset. */
 export default function AssetVersions(props: AssetVersionsProps) {
   const { backend } = props
 
@@ -47,9 +42,9 @@ export default function AssetVersions(props: AssetVersionsProps) {
     unsafeEnableTransition: true,
   })
 
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
 
-  if (backend.type === backendService.BackendType.local) {
+  if (backend.type === BackendType.local) {
     return (
       <Result
         status="info"
@@ -66,25 +61,21 @@ export default function AssetVersions(props: AssetVersionsProps) {
   return <AssetVersionsInternal {...props} item={item} />
 }
 
-/**
- * Props for a {@link AssetVersionsInternal}.
- */
+/** Props for an {@link AssetVersionsInternal}. */
 interface AssetVersionsInternalProps extends AssetVersionsProps {
   readonly item: AnyAsset
 }
 
-/**
- * Internal implementation of {@link AssetVersions}.
- */
+/** Internal implementation of {@link AssetVersions}. */
 function AssetVersionsInternal(props: AssetVersionsInternalProps) {
   const { backend, item } = props
 
-  const { getText } = textProvider.useText()
-  const toastAndLog = toastAndLogHooks.useToastAndLog()
+  const { getText } = useText()
+  const toastAndLog = useToastAndLog()
 
-  const [placeholderVersions, setPlaceholderVersions] = React.useState<
-    readonly backendService.S3ObjectVersion[]
-  >([])
+  const [placeholderVersions, setPlaceholderVersions] = React.useState<readonly S3ObjectVersion[]>(
+    [],
+  )
 
   const versionsQuery = useSuspenseQuery(assetVersionsQueryOptions({ assetId: item.id, backend }))
 
@@ -92,7 +83,7 @@ function AssetVersionsInternal(props: AssetVersionsInternalProps) {
 
   const restoreMutation = useMutation({
     mutationFn: async (variables: AddNewVersionVariables) => {
-      if (item.type === backendService.AssetType.project) {
+      if (item.type === AssetType.project) {
         await backend.restoreProject(item.id, variables.versionId, item.title)
       }
     },
@@ -100,8 +91,8 @@ function AssetVersionsInternal(props: AssetVersionsInternalProps) {
       setPlaceholderVersions((oldVersions) => [
         {
           isLatest: false,
-          key: uniqueString.uniqueString(),
-          lastModified: dateTime.toRfc3339(new Date()),
+          key: uniqueString(),
+          lastModified: toRfc3339(new Date()),
           versionId: variables.placeholderId,
         },
         ...oldVersions,
@@ -152,7 +143,7 @@ function AssetVersionsInternal(props: AssetVersionsInternalProps) {
               doRestore={() =>
                 restoreMutation.mutateAsync({
                   versionId: version.versionId,
-                  placeholderId: backendService.S3ObjectVersionId(uniqueString.uniqueString()),
+                  placeholderId: S3ObjectVersionId(uniqueString()),
                 })
               }
             />
diff --git a/app/gui/src/dashboard/layouts/AssetVersions/useAssetVersions.ts b/app/gui/src/dashboard/layouts/AssetVersions/useAssetVersions.ts
index 69483f6b2f2d..b8ebf467ad6a 100644
--- a/app/gui/src/dashboard/layouts/AssetVersions/useAssetVersions.ts
+++ b/app/gui/src/dashboard/layouts/AssetVersions/useAssetVersions.ts
@@ -1,14 +1,10 @@
-/**
- * @file
- * Fetches the versions of the selected project asset
- */
-import type Backend from '#/services/Backend'
-import type { AssetId } from '#/services/Backend'
+/** @file Fetches the versions of the selected project asset. */
 import { queryOptions, useQuery } from '@tanstack/react-query'
 
-/**
- *
- */
+import type Backend from 'enso-common/src/services/Backend'
+import type { AssetId } from 'enso-common/src/services/Backend'
+
+/** Options for {@link useAssetVersions}. */
 export interface AssetVersionsQueryOptions {
   readonly assetId: AssetId
   readonly backend: Backend
@@ -23,9 +19,7 @@ export function useAssetVersions(params: AssetVersionsQueryOptions) {
   return useQuery(assetVersionsQueryOptions({ assetId, backend, enabled, onError }))
 }
 
-/**
- * Options for a query that fetches the versions of an asset.
- */
+/** Options for a query that fetches the versions of an asset. */
 export function assetVersionsQueryOptions(params: AssetVersionsQueryOptions) {
   const { enabled = true, assetId, backend, onError } = params
 
diff --git a/app/gui/src/dashboard/layouts/AssetsTable.tsx b/app/gui/src/dashboard/layouts/AssetsTable.tsx
index 7e7d0bf7052b..8fb5e5519e22 100644
--- a/app/gui/src/dashboard/layouts/AssetsTable.tsx
+++ b/app/gui/src/dashboard/layouts/AssetsTable.tsx
@@ -21,6 +21,25 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'react-toastify'
 import * as z from 'zod'
 
+import type Backend from 'enso-common/src/services/Backend'
+import {
+  assetIsProject,
+  AssetType,
+  BackendType,
+  getAssetPermissionName,
+  Plan,
+  ProjectId,
+  ProjectState,
+  type AnyAsset,
+  type AssetId,
+  type DirectoryAsset,
+  type DirectoryId,
+  type LabelName,
+  type ProjectAsset,
+} from 'enso-common/src/services/Backend'
+import { toRfc3339 } from 'enso-common/src/utilities/data/dateTime'
+import { fileExtension } from 'enso-common/src/utilities/data/fileInfo'
+import { noop } from 'enso-common/src/utilities/functions'
 import { uniqueString } from 'enso-common/src/utilities/uniqueString'
 
 import DropFilesImage from '#/assets/drop_files.svg'
@@ -101,32 +120,13 @@ import { useSetModal } from '#/providers/ModalProvider'
 import { useNavigator2D } from '#/providers/Navigator2DProvider'
 import { useLaunchedProjects } from '#/providers/ProjectsProvider'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import {
-  assetIsProject,
-  AssetType,
-  BackendType,
-  getAssetPermissionName,
-  Plan,
-  ProjectId,
-  ProjectState,
-  type AnyAsset,
-  type AssetId,
-  type DirectoryAsset,
-  type DirectoryId,
-  type LabelName,
-  type ProjectAsset,
-} from '#/services/Backend'
 import { isSpecialReadonlyDirectoryId } from '#/services/RemoteBackend'
 import type { AssetQueryKey } from '#/utilities/AssetQuery'
 import AssetQuery from '#/utilities/AssetQuery'
 import type AssetTreeNode from '#/utilities/AssetTreeNode'
 import type { AnyAssetTreeNode } from '#/utilities/AssetTreeNode'
-import { toRfc3339 } from '#/utilities/dateTime'
 import type { AssetRowsDragPayload } from '#/utilities/drag'
 import { ASSET_ROWS, LABELS, setDragImageToBlank } from '#/utilities/drag'
-import { fileExtension } from '#/utilities/fileInfo'
-import { noop } from '#/utilities/functions'
 import type { DetailedRectangle } from '#/utilities/geometry'
 import { DEFAULT_HANDLER } from '#/utilities/inputBindings'
 import LocalStorage from '#/utilities/LocalStorage'
diff --git a/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx b/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx
index 09c5496f9bd5..f8d2b7f80738 100644
--- a/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx
+++ b/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx
@@ -2,59 +2,45 @@
  * @file A context menu for an `AssetsTable`, when no row is selected, or multiple rows
  * are selected.
  */
-import * as React from 'react'
+import type { MouseEvent, MutableRefObject } from 'react'
 
 import { useStore } from 'zustand'
 
-import { useDriveStore, useSelectedKeys, useSetSelectedKeys } from '#/providers/DriveProvider'
+import type Backend from 'enso-common/src/services/Backend'
+import { AssetType, Plan, type AssetId, type DirectoryId } from 'enso-common/src/services/Backend'
 
+import ContextMenu from '#/components/ContextMenu'
+import ContextMenuEntry from '#/components/ContextMenuEntry'
+import Separator from '#/components/styled/Separator'
 import AssetEventType from '#/events/AssetEventType'
-
 import {
   canTransferBetweenCategories,
-  type Category,
   isCloudCategory,
+  type Category,
 } from '#/layouts/CategorySwitcher/Category'
+import { useDispatchAssetEvent } from '#/layouts/Drive/EventListProvider'
 import { GlobalContextMenu } from '#/layouts/GlobalContextMenu'
-
-import ContextMenu from '#/components/ContextMenu'
-import ContextMenuEntry from '#/components/ContextMenuEntry'
-
 import ConfirmDeleteModal from '#/modals/ConfirmDeleteModal'
-
-import type Backend from '#/services/Backend'
-import * as backendModule from '#/services/Backend'
-
-import Separator from '#/components/styled/Separator'
-import { useDispatchAssetEvent } from '#/layouts/Drive/EventListProvider'
 import { useFullUserSession } from '#/providers/AuthProvider'
+import { useDriveStore, useSelectedKeys, useSetSelectedKeys } from '#/providers/DriveProvider'
 import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
-import type * as assetTreeNode from '#/utilities/AssetTreeNode'
-import * as permissions from '#/utilities/permissions'
+import type { AnyAssetTreeNode } from '#/utilities/AssetTreeNode'
+import { PermissionAction, tryFindSelfPermission } from '#/utilities/permissions'
 import { EMPTY_SET } from '#/utilities/set'
 
-// =================
-// === Constants ===
-// =================
-
 /** Props for an {@link AssetsTableContextMenu}. */
 export interface AssetsTableContextMenuProps {
   readonly hidden?: boolean
   readonly backend: Backend
   readonly category: Category
-  readonly rootDirectoryId: backendModule.DirectoryId
-  readonly nodeMapRef: React.MutableRefObject<
-    ReadonlyMap<backendModule.AssetId, assetTreeNode.AnyAssetTreeNode>
-  >
-  readonly event: Pick<React.MouseEvent<Element, MouseEvent>, 'pageX' | 'pageY'>
+  readonly rootDirectoryId: DirectoryId
+  readonly nodeMapRef: MutableRefObject<ReadonlyMap<AssetId, AnyAssetTreeNode>>
+  readonly event: Pick<MouseEvent<Element, MouseEvent>, 'pageX' | 'pageY'>
   readonly doCopy: () => void
   readonly doCut: () => void
-  readonly doPaste: (
-    newParentKey: backendModule.DirectoryId,
-    newParentId: backendModule.DirectoryId,
-  ) => void
-  readonly doDelete: (assetId: backendModule.AssetId, forever?: boolean) => Promise<void>
+  readonly doPaste: (newParentKey: DirectoryId, newParentId: DirectoryId) => void
+  readonly doDelete: (assetId: AssetId, forever?: boolean) => Promise<void>
 }
 
 /**
@@ -95,8 +81,8 @@ export default function AssetsTableContextMenu(props: AssetsTableContextMenuProp
     !isCloud ||
     Array.from(selectedKeys).every(
       (key) =>
-        permissions.tryFindSelfPermission(user, nodeMapRef.current.get(key)?.item.permissions)
-          ?.permission === permissions.PermissionAction.own,
+        tryFindSelfPermission(user, nodeMapRef.current.get(key)?.item.permissions)?.permission ===
+        PermissionAction.own,
     )
 
   // This is not a React component even though it contains JSX.
@@ -112,7 +98,7 @@ export default function AssetsTableContextMenu(props: AssetsTableContextMenuProp
     if (
       isCloud &&
       [...selectedKeys].every(
-        (key) => nodeMapRef.current.get(key)?.item.type !== backendModule.AssetType.directory,
+        (key) => nodeMapRef.current.get(key)?.item.type !== AssetType.directory,
       )
     ) {
       deleteAll()
@@ -144,7 +130,7 @@ export default function AssetsTableContextMenu(props: AssetsTableContextMenuProp
         const selectedNode =
           selectedKeys.size === 1 && firstKey != null ? nodeMapRef.current.get(firstKey) : null
 
-        if (selectedNode?.type === backendModule.AssetType.directory) {
+        if (selectedNode?.type === AssetType.directory) {
           doPaste(selectedNode.key, selectedNode.item.id)
         } else {
           doPaste(rootDirectoryId, rootDirectoryId)
@@ -210,7 +196,7 @@ export default function AssetsTableContextMenu(props: AssetsTableContextMenuProp
   } else {
     const shouldShowAssetMenu = selectedKeys.size !== 0 || pasteAllMenuEntry !== false
     const shouldShowGlobalMenu =
-      category.type !== 'cloud' || user.plan == null || user.plan === backendModule.Plan.solo
+      category.type !== 'cloud' || user.plan == null || user.plan === Plan.solo
     if (!shouldShowAssetMenu && !shouldShowGlobalMenu) {
       return null
     } else {
diff --git a/app/gui/src/dashboard/layouts/CategorySwitcher.tsx b/app/gui/src/dashboard/layouts/CategorySwitcher.tsx
index b1aaa138b6c6..a663824da7af 100644
--- a/app/gui/src/dashboard/layouts/CategorySwitcher.tsx
+++ b/app/gui/src/dashboard/layouts/CategorySwitcher.tsx
@@ -1,9 +1,23 @@
 /** @file Switcher to choose the currently visible assets table category. */
-import * as React from 'react'
+import { memo, useMemo, useTransition, type ReactNode } from 'react'
 
 import { useSearchParams } from 'react-router-dom'
+import { twJoin } from 'tailwind-merge'
 import * as z from 'zod'
 
+import {
+  AssetType,
+  DirectoryId,
+  FilterBy,
+  Path,
+  Plan,
+  userHasUserAndTeamSpaces,
+  type AssetId,
+  type User,
+  type UserGroupInfo,
+} from 'enso-common/src/services/Backend'
+import { getFileName } from 'enso-common/src/utilities/data/fileInfo'
+
 import { SEARCH_PARAMS_PREFIX } from '#/appUtils'
 import CloudIcon from '#/assets/cloud.svg'
 import ComputerIcon from '#/assets/computer.svg'
@@ -15,35 +29,32 @@ import PersonIcon from '#/assets/person.svg'
 import RecentIcon from '#/assets/recent.svg'
 import SettingsIcon from '#/assets/settings.svg'
 import Trash2Icon from '#/assets/trash2.svg'
-import * as aria from '#/components/aria'
-import * as ariaComponents from '#/components/AriaComponents'
+import { AnimatedBackground } from '#/components/AnimatedBackground'
+import { DropZone, type DropEvent } from '#/components/aria'
+import { BUTTON_STYLES, Button, DialogTrigger, Text } from '#/components/AriaComponents'
 import { Badge } from '#/components/Badge'
-import * as mimeTypes from '#/data/mimeTypes'
+import { ASSETS_MIME_TYPE } from '#/data/mimeTypes'
 import { useBackendQuery } from '#/hooks/backendHooks'
-import * as offlineHooks from '#/hooks/offlineHooks'
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import { useOffline } from '#/hooks/offlineHooks'
 import {
   areCategoriesEqual,
   canTransferBetweenCategories,
   useTransferBetweenCategories,
   type Category,
 } from '#/layouts/CategorySwitcher/Category'
-import * as eventListProvider from '#/layouts/Drive/EventListProvider'
+import { useDispatchAssetEvent } from '#/layouts/Drive/EventListProvider'
 import ConfirmDeleteModal from '#/modals/ConfirmDeleteModal'
-import * as authProvider from '#/providers/AuthProvider'
-import * as backendProvider from '#/providers/BackendProvider'
+import { useFullUserSession } from '#/providers/AuthProvider'
+import { useLocalBackend, useRemoteBackend } from '#/providers/BackendProvider'
 import { useLocalStorageState } from '#/providers/LocalStorageProvider'
-import * as modalProvider from '#/providers/ModalProvider'
+import { useSetModal } from '#/providers/ModalProvider'
 import { TabType } from '#/providers/ProjectsProvider'
-import * as textProvider from '#/providers/TextProvider'
-import * as backend from '#/services/Backend'
+import { useText } from '#/providers/TextProvider'
 import { newDirectoryId } from '#/services/LocalBackend'
 import { TEAMS_DIRECTORY_ID, USERS_DIRECTORY_ID } from '#/services/remoteBackendPaths'
-import { getFileName } from '#/utilities/fileInfo'
 import LocalStorage from '#/utilities/LocalStorage'
 import { tv } from '#/utilities/tailwindVariants'
-import { twJoin } from 'tailwind-merge'
-import { AnimatedBackground } from '../components/AnimatedBackground'
-import { useEventCallback } from '../hooks/eventCallbackHooks'
 
 // ============================
 // === Global configuration ===
@@ -82,11 +93,11 @@ interface CategoryMetadata {
 interface InternalCategorySwitcherItemProps extends CategoryMetadata {
   readonly currentCategory: Category
   readonly setCategory: (category: Category) => void
-  readonly badgeContent?: React.ReactNode
+  readonly badgeContent?: ReactNode
 }
 
 const CATEGORY_SWITCHER_VARIANTS = tv({
-  extend: ariaComponents.BUTTON_STYLES,
+  extend: BUTTON_STYLES,
   base: 'group opacity-50 transition-opacity group-hover:opacity-100 w-auto max-w-full',
   slots: {
     wrapper: 'w-full',
@@ -99,13 +110,13 @@ function CategorySwitcherItem(props: InternalCategorySwitcherItemProps) {
   const { currentCategory, setCategory, badgeContent } = props
   const { isNested = false, category, icon, label, buttonLabel, dropZoneLabel } = props
 
-  const [isTransitioning, startTransition] = React.useTransition()
+  const [isTransitioning, startTransition] = useTransition()
 
-  const { user } = authProvider.useFullUserSession()
-  const { unsetModal } = modalProvider.useSetModal()
-  const { getText } = textProvider.useText()
-  const localBackend = backendProvider.useLocalBackend()
-  const { isOffline } = offlineHooks.useOffline()
+  const { user } = useFullUserSession()
+  const { unsetModal } = useSetModal()
+  const { getText } = useText()
+  const localBackend = useLocalBackend()
+  const { isOffline } = useOffline()
   const isCurrent = areCategoriesEqual(currentCategory, category)
   const transferBetweenCategories = useTransferBetweenCategories(currentCategory)
   const getCategoryError = useEventCallback((otherCategory: Category) => {
@@ -140,7 +151,7 @@ function CategorySwitcherItem(props: InternalCategorySwitcherItemProps) {
   const isDropTarget =
     !areCategoriesEqual(currentCategory, category) &&
     canTransferBetweenCategories(currentCategory, category, user)
-  const acceptedDragTypes = isDropTarget ? [mimeTypes.ASSETS_MIME_TYPE] : []
+  const acceptedDragTypes = isDropTarget ? [ASSETS_MIME_TYPE] : []
 
   const onPress = useEventCallback(() => {
     if (error == null && !areCategoriesEqual(category, currentCategory)) {
@@ -153,19 +164,19 @@ function CategorySwitcherItem(props: InternalCategorySwitcherItemProps) {
     }
   })
 
-  const onDrop = useEventCallback((event: aria.DropEvent) => {
+  const onDrop = useEventCallback((event: DropEvent) => {
     unsetModal()
     void Promise.all(
       event.items.flatMap(async (item) => {
         if (item.kind === 'text') {
-          const text = await item.getText(mimeTypes.ASSETS_MIME_TYPE)
+          const text = await item.getText(ASSETS_MIME_TYPE)
           const payload: unknown = JSON.parse(text)
           return Array.isArray(payload) ?
               payload.flatMap((key) =>
                 // This is SAFE, assuming only this app creates payloads with
                 // the specific mimetype above.
                 // eslint-disable-next-line no-restricted-syntax
-                typeof key === 'string' ? [key as backend.AssetId] : [],
+                typeof key === 'string' ? [key as AssetId] : [],
               )
             : []
         } else {
@@ -178,7 +189,7 @@ function CategorySwitcherItem(props: InternalCategorySwitcherItemProps) {
   })
 
   const element = (
-    <aria.DropZone
+    <DropZone
       aria-label={dropZoneLabel}
       getDropOperation={(types) =>
         acceptedDragTypes.some((type) => types.has(type)) ? 'move' : 'cancel'
@@ -191,7 +202,7 @@ function CategorySwitcherItem(props: InternalCategorySwitcherItemProps) {
         className="w-auto max-w-[calc(100%-24px)]"
         animationClassName="bg-invert rounded-full"
       >
-        <ariaComponents.Button
+        <Button
           size="medium"
           variant="custom"
           tooltip={tooltip}
@@ -212,20 +223,15 @@ function CategorySwitcherItem(props: InternalCategorySwitcherItemProps) {
             )
           }
         >
-          <ariaComponents.Text
-            disableLineHeightCompensation
-            weight="semibold"
-            color="current"
-            truncate="1"
-          >
+          <Text disableLineHeightCompensation weight="semibold" color="current" truncate="1">
             {label}
-          </ariaComponents.Text>
-        </ariaComponents.Button>
+          </Text>
+        </Button>
       </AnimatedBackground.Item>
       <div className="absolute left-full ml-2 hidden group-focus-visible:block">
         {getText('drop')}
       </div>
-    </aria.DropZone>
+    </DropZone>
   )
 
   return isNested ?
@@ -249,36 +255,36 @@ export interface CategorySwitcherProps {
 /** A switcher to choose the currently visible assets table categoryModule.categoryType. */
 function CategorySwitcher(props: CategorySwitcherProps) {
   const { category, setCategory } = props
-  const { user } = authProvider.useFullUserSession()
-  const { getText } = textProvider.useText()
-  const remoteBackend = backendProvider.useRemoteBackend()
-  const dispatchAssetEvent = eventListProvider.useDispatchAssetEvent()
+  const { user } = useFullUserSession()
+  const { getText } = useText()
+  const remoteBackend = useRemoteBackend()
+  const dispatchAssetEvent = useDispatchAssetEvent()
   const [, setSearchParams] = useSearchParams()
   const [localRootDirectories, setLocalRootDirectories] =
     useLocalStorageState('localRootDirectories')
-  const hasUserAndTeamSpaces = backend.userHasUserAndTeamSpaces(user)
+  const hasUserAndTeamSpaces = userHasUserAndTeamSpaces(user)
 
-  const localBackend = backendProvider.useLocalBackend()
+  const localBackend = useLocalBackend()
   const itemProps = { currentCategory: category, setCategory, dispatchAssetEvent }
-  const selfDirectoryId = backend.DirectoryId(`directory-${user.userId.replace(/^user-/, '')}`)
+  const selfDirectoryId = DirectoryId(`directory-${user.userId.replace(/^user-/, '')}`)
 
   const { data: users } = useBackendQuery(remoteBackend, 'listUsers', [])
   const { data: teams } = useBackendQuery(remoteBackend, 'listUserGroups', [])
-  const usersById = React.useMemo<ReadonlyMap<backend.DirectoryId, backend.User>>(
+  const usersById = useMemo<ReadonlyMap<DirectoryId, User>>(
     () =>
       new Map(
         (users ?? []).map((otherUser) => [
-          backend.DirectoryId(`directory-${otherUser.userId.replace(/^user-/, '')}`),
+          DirectoryId(`directory-${otherUser.userId.replace(/^user-/, '')}`),
           otherUser,
         ]),
       ),
     [users],
   )
-  const teamsById = React.useMemo<ReadonlyMap<backend.DirectoryId, backend.UserGroupInfo>>(
+  const teamsById = useMemo<ReadonlyMap<DirectoryId, UserGroupInfo>>(
     () =>
       new Map(
         (teams ?? []).map((team) => [
-          backend.DirectoryId(`directory-${team.id.replace(/^usergroup-/, '')}`),
+          DirectoryId(`directory-${team.id.replace(/^usergroup-/, '')}`),
           team,
         ]),
       ),
@@ -290,7 +296,7 @@ function CategorySwitcher(props: CategorySwitcherProps) {
     [
       {
         parentId: USERS_DIRECTORY_ID,
-        filterBy: backend.FilterBy.active,
+        filterBy: FilterBy.active,
         labels: null,
         recentProjects: false,
       },
@@ -304,7 +310,7 @@ function CategorySwitcher(props: CategorySwitcherProps) {
     [
       {
         parentId: TEAMS_DIRECTORY_ID,
-        filterBy: backend.FilterBy.active,
+        filterBy: FilterBy.active,
         labels: null,
         recentProjects: false,
       },
@@ -316,9 +322,9 @@ function CategorySwitcher(props: CategorySwitcherProps) {
   return (
     <div className="flex flex-col gap-2 py-1">
       <AnimatedBackground>
-        <ariaComponents.Text variant="subtitle" weight="semibold" className="px-2">
+        <Text variant="subtitle" weight="semibold" className="px-2">
           {getText('category')}
-        </ariaComponents.Text>
+        </Text>
 
         <div
           aria-label={getText('categorySwitcherMenuLabel')}
@@ -334,13 +340,13 @@ function CategorySwitcher(props: CategorySwitcherProps) {
             dropZoneLabel={getText('cloudCategoryDropZoneLabel')}
             badgeContent={getText('cloudCategoryBadgeContent')}
           />
-          {(user.plan === backend.Plan.team || user.plan === backend.Plan.enterprise) && (
+          {(user.plan === Plan.team || user.plan === Plan.enterprise) && (
             <CategorySwitcherItem
               {...itemProps}
               isNested
               category={{
                 type: 'user',
-                rootPath: backend.Path(`enso://Users/${user.name}`),
+                rootPath: Path(`enso://Users/${user.name}`),
                 homeDirectoryId: selfDirectoryId,
               }}
               icon={PersonIcon}
@@ -350,7 +356,7 @@ function CategorySwitcher(props: CategorySwitcherProps) {
             />
           )}
           {usersDirectoryQuery.data?.map((userDirectory) => {
-            if (userDirectory.type !== backend.AssetType.directory) {
+            if (userDirectory.type !== AssetType.directory) {
               return null
             } else {
               const otherUser = usersById.get(userDirectory.id)
@@ -362,7 +368,7 @@ function CategorySwitcher(props: CategorySwitcherProps) {
                     isNested
                     category={{
                       type: 'user',
-                      rootPath: backend.Path(`enso://Users/${otherUser.name}`),
+                      rootPath: Path(`enso://Users/${otherUser.name}`),
                       homeDirectoryId: userDirectory.id,
                     }}
                     icon={PersonIcon}
@@ -373,7 +379,7 @@ function CategorySwitcher(props: CategorySwitcherProps) {
             }
           })}
           {teamsDirectoryQuery.data?.map((teamDirectory) => {
-            if (teamDirectory.type !== backend.AssetType.directory) {
+            if (teamDirectory.type !== AssetType.directory) {
               return null
             } else {
               const team = teamsById.get(teamDirectory.id)
@@ -385,7 +391,7 @@ function CategorySwitcher(props: CategorySwitcherProps) {
                     category={{
                       type: 'team',
                       team,
-                      rootPath: backend.Path(`enso://Teams/${team.groupName}`),
+                      rootPath: Path(`enso://Teams/${team.groupName}`),
                       homeDirectoryId: teamDirectory.id,
                     }}
                     icon={PeopleIcon}
@@ -426,7 +432,7 @@ function CategorySwitcher(props: CategorySwitcherProps) {
                 dropZoneLabel={getText('localCategoryDropZoneLabel')}
               />
 
-              <ariaComponents.Button
+              <Button
                 size="medium"
                 variant="icon"
                 extraClickZone="small"
@@ -450,16 +456,16 @@ function CategorySwitcher(props: CategorySwitcherProps) {
                   isNested
                   category={{
                     type: 'local-directory',
-                    rootPath: backend.Path(directory),
-                    homeDirectoryId: newDirectoryId(backend.Path(directory)),
+                    rootPath: Path(directory),
+                    homeDirectoryId: newDirectoryId(Path(directory)),
                   }}
                   icon={FolderFilledIcon}
                   label={getFileName(directory)}
                   buttonLabel={getText('localCategoryButtonLabel')}
                   dropZoneLabel={getText('localCategoryDropZoneLabel')}
                 />
-                <ariaComponents.DialogTrigger>
-                  <ariaComponents.Button
+                <DialogTrigger>
+                  <Button
                     size="medium"
                     variant="icon"
                     extraClickZone={false}
@@ -481,13 +487,13 @@ function CategorySwitcher(props: CategorySwitcherProps) {
                       )
                     }}
                   />
-                </ariaComponents.DialogTrigger>
+                </DialogTrigger>
               </div>
             ))}
           {localBackend && window.fileBrowserApi && (
             <div className="flex">
               <div className="ml-[15px] mr-1.5 rounded-full border-r border-primary/20" />
-              <ariaComponents.Button
+              <Button
                 size="medium"
                 variant="icon"
                 icon={FolderAddIcon}
@@ -501,7 +507,7 @@ function CategorySwitcher(props: CategorySwitcherProps) {
                 }}
               >
                 {getText('addLocalDirectory')}
-              </ariaComponents.Button>
+              </Button>
             </div>
           )}
         </div>
@@ -510,4 +516,4 @@ function CategorySwitcher(props: CategorySwitcherProps) {
   )
 }
 
-export default React.memo(CategorySwitcher)
+export default memo(CategorySwitcher)
diff --git a/app/gui/src/dashboard/layouts/CategorySwitcher/Category.ts b/app/gui/src/dashboard/layouts/CategorySwitcher/Category.ts
index c94f68c06bae..4e59e6066c00 100644
--- a/app/gui/src/dashboard/layouts/CategorySwitcher/Category.ts
+++ b/app/gui/src/dashboard/layouts/CategorySwitcher/Category.ts
@@ -3,12 +3,6 @@ import { useMutation } from '@tanstack/react-query'
 import invariant from 'tiny-invariant'
 import * as z from 'zod'
 
-import AssetEventType from '#/events/AssetEventType'
-import { backendMutationOptions, useBackendQuery } from '#/hooks/backendHooks'
-import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import { useDispatchAssetEvent } from '#/layouts/Drive/EventListProvider'
-import { useFullUserSession } from '#/providers/AuthProvider'
-import { useBackend, useLocalBackend, useRemoteBackend } from '#/providers/BackendProvider'
 import {
   FilterBy,
   Plan,
@@ -17,7 +11,14 @@ import {
   type Path,
   type User,
   type UserGroupInfo,
-} from '#/services/Backend'
+} from 'enso-common/src/services/Backend'
+
+import AssetEventType from '#/events/AssetEventType'
+import { backendMutationOptions, useBackendQuery } from '#/hooks/backendHooks'
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import { useDispatchAssetEvent } from '#/layouts/Drive/EventListProvider'
+import { useFullUserSession } from '#/providers/AuthProvider'
+import { useBackend, useLocalBackend, useRemoteBackend } from '#/providers/BackendProvider'
 import { newDirectoryId } from '#/services/LocalBackend'
 
 const PATH_SCHEMA = z.string().refine((s): s is Path => true)
diff --git a/app/gui/src/dashboard/layouts/Chat.tsx b/app/gui/src/dashboard/layouts/Chat.tsx
index d0806d96addb..a559bb1cc898 100644
--- a/app/gui/src/dashboard/layouts/Chat.tsx
+++ b/app/gui/src/dashboard/layouts/Chat.tsx
@@ -1,42 +1,47 @@
 /** @file A WebSocket-based chat directly to official support on the official Discord server. */
-import * as React from 'react'
-
-import * as reactDom from 'react-dom'
-
-import * as chat from '#/services/Chat'
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from 'react'
+
+import { createPortal } from 'react-dom'
+
+import { formatDateTimeChatFriendly } from 'enso-common/src/utilities/data/dateTime'
+import { newtypeConstructor } from 'enso-common/src/utilities/data/newtype'
+import { merge } from 'enso-common/src/utilities/data/object'
 
 import CloseLargeIcon from '#/assets/close_large.svg'
 import DefaultUserIcon from '#/assets/default_user.svg'
 import FolderArrowIcon from '#/assets/folder_arrow.svg'
-
-import * as gtagHooks from '#/hooks/gtagHooks'
-import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
-
-import * as authProvider from '#/providers/AuthProvider'
-import * as loggerProvider from '#/providers/LoggerProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import * as aria from '#/components/aria'
-import * as ariaComponents from '#/components/AriaComponents'
+import { Input, useFocusVisible, useFocusWithin } from '#/components/aria'
+import { Button } from '#/components/AriaComponents'
 import SvgMask from '#/components/SvgMask'
 import Twemoji from '#/components/Twemoji'
-
+import { gtagOpenCloseCallback, useGtagEvent } from '#/hooks/gtagHooks'
 import { useSyncRef } from '#/hooks/syncRefHooks'
-import * as dateTime from '#/utilities/dateTime'
-import * as newtype from '#/utilities/newtype'
-import * as object from '#/utilities/object'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
-
-// ================
-// === Newtypes ===
-// ================
-
-/** Create a {@link chat.MessageId}. */
-const MessageId = newtype.newtypeConstructor<chat.MessageId>()
-
-// =================
-// === Constants ===
-// =================
+import { useToastAndLog } from '#/hooks/toastAndLogHooks'
+import { useFullUserSession } from '#/providers/AuthProvider'
+import { useLogger } from '#/providers/LoggerProvider'
+import { useText } from '#/providers/TextProvider'
+import {
+  ChatMessageDataType,
+  type ChatClientMessageData,
+  type MessageId as ChatMessageId,
+  type ChatServerMessageData,
+  type ReactionSymbol,
+  type ThreadData,
+  type ThreadId,
+} from '#/services/Chat'
+import { twMerge } from '#/utilities/tailwindMerge'
+
+/** Create a {@link ChatMessageId}. */
+// eslint-disable-next-line no-restricted-syntax
+const MessageId = newtypeConstructor<ChatMessageId>()
 
 // TODO[sb]: Consider associating a project with a thread
 // (and providing a button to jump to the relevant project).
@@ -49,7 +54,7 @@ const REACTION_BUTTON_SIZE = 20
 /** The size (both width and height) of each reaction on a message. */
 const REACTION_SIZE = 16
 /** The list of reaction emojis, in order. */
-const REACTION_EMOJIS: chat.ReactionSymbol[] = ['❤️', '👍', '👎', '😀', '🙁', '👀', '🎉']
+const REACTION_EMOJIS: ReactionSymbol[] = ['❤️', '👍', '👎', '😀', '🙁', '👀', '🎉']
 /** The initial title of the thread. */
 const DEFAULT_THREAD_TITLE = 'New chat thread'
 /** A {@link RegExp} matching any non-whitespace character. */
@@ -71,7 +76,7 @@ const MAX_MESSAGE_HISTORY = 25
 
 /** Information needed to display a chat message. */
 interface ChatDisplayMessage {
-  readonly id: chat.MessageId
+  readonly id: ChatMessageId
   /**
    * If `true`, this is a message from the staff to the user.
    * If `false`, this is a message from the user to the staff.
@@ -81,7 +86,7 @@ interface ChatDisplayMessage {
   /** Name of the author of the message. */
   readonly name: string
   readonly content: string
-  readonly reactions: chat.ReactionSymbol[]
+  readonly reactions: ReactionSymbol[]
   /** Given in milliseconds since the unix epoch. */
   readonly timestamp: number
   /** Given in milliseconds since the unix epoch. */
@@ -93,7 +98,7 @@ interface ChatDisplayMessage {
 // ==========================
 
 /** Returns an auto-generated thread title. */
-function makeNewThreadTitle(threads: chat.ThreadData[]) {
+function makeNewThreadTitle(threads: ThreadData[]) {
   const threadTitleNumbers = threads
     .map((thread) => thread.title.match(AUTOGENERATED_THREAD_TITLE_REGEX))
     .flatMap((match) => (match != null ? parseInt(match[1] ?? '0', 10) : []))
@@ -106,9 +111,9 @@ function makeNewThreadTitle(threads: chat.ThreadData[]) {
 
 /** Props for a {@link ReactionBar}. */
 export interface ReactionBarProps {
-  readonly selectedReactions: Set<chat.ReactionSymbol>
-  readonly doReact: (reaction: chat.ReactionSymbol) => void
-  readonly doRemoveReaction: (reaction: chat.ReactionSymbol) => void
+  readonly selectedReactions: Set<ReactionSymbol>
+  readonly doReact: (reaction: ReactionSymbol) => void
+  readonly doRemoveReaction: (reaction: ReactionSymbol) => void
   readonly className?: string
 }
 
@@ -117,19 +122,14 @@ function ReactionBar(props: ReactionBarProps) {
   const { selectedReactions, doReact, doRemoveReaction, className } = props
 
   return (
-    <div
-      className={tailwindMerge.twMerge(
-        'm-chat-reaction-bar inline-block rounded-full bg-frame',
-        className,
-      )}
-    >
+    <div className={twMerge('m-chat-reaction-bar inline-block rounded-full bg-frame', className)}>
       {REACTION_EMOJIS.map((emoji) => (
-        <ariaComponents.Button
+        <Button
           size="custom"
           variant="custom"
           key={emoji}
           isActive={selectedReactions.has(emoji)}
-          className={tailwindMerge.twMerge(
+          className={twMerge(
             'm-chat-reaction rounded-full p-chat-reaction hover:bg-hover-bg hover:grayscale-0',
             !selectedReactions.has(emoji) && 'grayscale',
           )}
@@ -142,7 +142,7 @@ function ReactionBar(props: ReactionBarProps) {
           }}
         >
           <Twemoji key={emoji} emoji={emoji} size={REACTION_BUTTON_SIZE} />
-        </ariaComponents.Button>
+        </Button>
       ))}
     </div>
   )
@@ -154,7 +154,7 @@ function ReactionBar(props: ReactionBarProps) {
 
 /** Props for a {@link Reactions}. */
 export interface ReactionsProps {
-  readonly reactions: chat.ReactionSymbol[]
+  readonly reactions: ReactionSymbol[]
 }
 
 /** A list of emoji reactions that have been on a message. */
@@ -181,16 +181,16 @@ function Reactions(props: ReactionsProps) {
 /** Props for a {@link ChatMessage}. */
 export interface ChatMessageProps {
   readonly message: ChatDisplayMessage
-  readonly reactions: chat.ReactionSymbol[]
+  readonly reactions: ReactionSymbol[]
   readonly shouldShowReactionBar: boolean
-  readonly doReact: (reaction: chat.ReactionSymbol) => void
-  readonly doRemoveReaction: (reaction: chat.ReactionSymbol) => void
+  readonly doReact: (reaction: ReactionSymbol) => void
+  readonly doRemoveReaction: (reaction: ReactionSymbol) => void
 }
 
 /** A chat message, including user info, sent date, and reactions (if any). */
 function ChatMessage(props: ChatMessageProps) {
   const { message, reactions, shouldShowReactionBar, doReact, doRemoveReaction } = props
-  const [isHovered, setIsHovered] = React.useState(false)
+  const [isHovered, setIsHovered] = useState(false)
   return (
     <div
       className="mx-chat-message-x my-chat-message-y"
@@ -210,7 +210,7 @@ function ChatMessage(props: ChatMessageProps) {
         <div className="mx-chat-message-info-x leading-cozy">
           <div className="font-bold">{message.name}</div>
           <div className="text-primary text-opacity-unimportant">
-            {dateTime.formatDateTimeChatFriendly(new Date(message.timestamp))}
+            {formatDateTimeChatFriendly(new Date(message.timestamp))}
           </div>
         </div>
       </div>
@@ -245,13 +245,13 @@ function ChatMessage(props: ChatMessageProps) {
 
 /** Props for a {@Link ChatHeader}. */
 interface InternalChatHeaderProps {
-  readonly threads: chat.ThreadData[]
-  readonly setThreads: React.Dispatch<React.SetStateAction<chat.ThreadData[]>>
-  readonly threadId: chat.ThreadId | null
+  readonly threads: ThreadData[]
+  readonly setThreads: Dispatch<SetStateAction<ThreadData[]>>
+  readonly threadId: ThreadId | null
   readonly threadTitle: string
   readonly setThreadTitle: (threadTitle: string) => void
-  readonly switchThread: (threadId: chat.ThreadId) => void
-  readonly sendMessage: (message: chat.ChatClientMessageData) => void
+  readonly switchThread: (threadId: ThreadId) => void
+  readonly sendMessage: (message: ChatClientMessageData) => void
   readonly doClose: () => void
 }
 
@@ -259,16 +259,16 @@ interface InternalChatHeaderProps {
 function ChatHeader(props: InternalChatHeaderProps) {
   const { threads, setThreads, threadId, threadTitle, setThreadTitle } = props
   const { switchThread, sendMessage, doClose } = props
-  const [isThreadListVisible, setIsThreadListVisible] = React.useState(false)
+  const [isThreadListVisible, setIsThreadListVisible] = useState(false)
   // These will never be `null` as their values are set immediately.
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const titleInputRef = React.useRef<HTMLInputElement>(null!)
+  const titleInputRef = useRef<HTMLInputElement>(null!)
 
-  React.useEffect(() => {
+  useEffect(() => {
     titleInputRef.current.value = threadTitle
   }, [threadTitle])
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onClick = () => {
       setIsThreadListVisible(false)
     }
@@ -281,7 +281,7 @@ function ChatHeader(props: InternalChatHeaderProps) {
   return (
     <>
       <div className="mx-chat-header-x mt-chat-header-t flex text-sm font-semibold">
-        <ariaComponents.Button
+        <Button
           size="custom"
           variant="custom"
           className="flex grow items-center gap-icon-with-text"
@@ -290,14 +290,14 @@ function ChatHeader(props: InternalChatHeaderProps) {
           }}
         >
           <SvgMask
-            className={tailwindMerge.twMerge(
+            className={twMerge(
               'shrink-0 transition-transform duration-arrow',
               isThreadListVisible ? '-rotate-90' : 'rotate-90',
             )}
             src={FolderArrowIcon}
           />
           <div className="grow">
-            <aria.Input
+            <Input
               type="text"
               ref={titleInputRef}
               defaultValue={threadTitle}
@@ -323,11 +323,11 @@ function ChatHeader(props: InternalChatHeaderProps) {
                 if (threadId != null) {
                   setThreads((oldThreads) =>
                     oldThreads.map((thread) =>
-                      thread.id !== threadId ? thread : object.merge(thread, { title: newTitle }),
+                      thread.id !== threadId ? thread : merge(thread, { title: newTitle }),
                     ),
                   )
                   sendMessage({
-                    type: chat.ChatMessageDataType.renameThread,
+                    type: ChatMessageDataType.renameThread,
                     title: newTitle,
                     threadId: threadId,
                   })
@@ -335,19 +335,14 @@ function ChatHeader(props: InternalChatHeaderProps) {
               }}
             />
           </div>
-        </ariaComponents.Button>
-        <ariaComponents.Button
-          size="custom"
-          variant="custom"
-          className="mx-close-icon"
-          onPress={doClose}
-        >
+        </Button>
+        <Button size="custom" variant="custom" className="mx-close-icon" onPress={doClose}>
           <img src={CloseLargeIcon} />
-        </ariaComponents.Button>
+        </Button>
       </div>
       <div className="relative text-sm font-semibold">
         <div
-          className={tailwindMerge.twMerge(
+          className={twMerge(
             'absolute z-1 grid w-full overflow-hidden bg-frame shadow-soft backdrop-blur-default transition-grid-template-rows clip-path-bottom-shadow',
             isThreadListVisible ? 'grid-rows-1fr' : 'grid-rows-0fr',
           )}
@@ -356,7 +351,7 @@ function ChatHeader(props: InternalChatHeaderProps) {
             {threads.map((thread) => (
               <div
                 key={thread.id}
-                className={tailwindMerge.twMerge(
+                className={twMerge(
                   'flex p-chat-thread-button',
                   thread.id === threadId ?
                     'cursor-default bg-selected-frame'
@@ -398,12 +393,12 @@ export interface ChatProps {
 /** Chat sidebar. */
 export default function Chat(props: ChatProps) {
   const { isOpen, doClose, endpoint } = props
-  const { accessToken: rawAccessToken } = authProvider.useFullUserSession()
-  const { getText } = textProvider.useText()
-  const logger = loggerProvider.useLogger()
-  const toastAndLog = toastAndLogHooks.useToastAndLog()
-  const { isFocusVisible } = aria.useFocusVisible()
-  const { focusWithinProps } = aria.useFocusWithin({
+  const { accessToken: rawAccessToken } = useFullUserSession()
+  const { getText } = useText()
+  const logger = useLogger()
+  const toastAndLog = useToastAndLog()
+  const { isFocusVisible } = useFocusVisible()
+  const { focusWithinProps } = useFocusWithin({
     onFocusWithin: (event) => {
       if (
         isFocusVisible &&
@@ -417,13 +412,13 @@ export default function Chat(props: ChatProps) {
       }
     },
   })
-  const gtagEvent = gtagHooks.useGtagEvent()
+  const gtagEvent = useGtagEvent()
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isOpen) {
       return
     } else {
-      return gtagHooks.gtagOpenCloseCallback(gtagEvent, 'cloud_open_chat', 'cloud_close_chat')
+      return gtagOpenCloseCallback(gtagEvent, 'cloud_open_chat', 'cloud_close_chat')
     }
   }, [isOpen, gtagEvent])
 
@@ -433,28 +428,29 @@ export default function Chat(props: ChatProps) {
    */
   const accessToken = rawAccessToken
 
-  const [isPaidUser, setIsPaidUser] = React.useState(true)
-  const [isReplyEnabled, setIsReplyEnabled] = React.useState(false)
+  const [isPaidUser, setIsPaidUser] = useState(true)
+  const [isReplyEnabled, setIsReplyEnabled] = useState(false)
   // `true` if and only if scrollback was triggered for the current thread.
-  const [shouldIgnoreMessageLimit, setShouldIgnoreMessageLimit] = React.useState(false)
-  const [isAtBeginning, setIsAtBeginning] = React.useState(false)
-  const [threads, setThreads] = React.useState<chat.ThreadData[]>([])
-  const [messages, setMessages] = React.useState<ChatDisplayMessage[]>([])
-  const [threadId, setThreadId] = React.useState<chat.ThreadId | null>(null)
-  const [threadTitle, setThreadTitle] = React.useState(DEFAULT_THREAD_TITLE)
-  const [isAtTop, setIsAtTop] = React.useState(false)
-  const [isAtBottom, setIsAtBottom] = React.useState(true)
-  const [messagesHeightBeforeMessageHistory, setMessagesHeightBeforeMessageHistory] =
-    React.useState<number | null>(null)
-  const [webSocket, setWebsocket] = React.useState<WebSocket | null>(null)
-  const messageInputRef = React.useRef<HTMLTextAreaElement>(null)
-  const messagesRef = React.useRef<HTMLDivElement>(null)
-
-  React.useEffect(() => {
+  const [shouldIgnoreMessageLimit, setShouldIgnoreMessageLimit] = useState(false)
+  const [isAtBeginning, setIsAtBeginning] = useState(false)
+  const [threads, setThreads] = useState<ThreadData[]>([])
+  const [messages, setMessages] = useState<ChatDisplayMessage[]>([])
+  const [threadId, setThreadId] = useState<ThreadId | null>(null)
+  const [threadTitle, setThreadTitle] = useState(DEFAULT_THREAD_TITLE)
+  const [isAtTop, setIsAtTop] = useState(false)
+  const [isAtBottom, setIsAtBottom] = useState(true)
+  const [messagesHeightBeforeMessageHistory, setMessagesHeightBeforeMessageHistory] = useState<
+    number | null
+  >(null)
+  const [webSocket, setWebsocket] = useState<WebSocket | null>(null)
+  const messageInputRef = useRef<HTMLTextAreaElement>(null)
+  const messagesRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
     setIsPaidUser(false)
   }, [])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isOpen) {
       const newWebSocket = new WebSocket(endpoint)
       setWebsocket(newWebSocket)
@@ -473,7 +469,7 @@ export default function Chat(props: ChatProps) {
   }, [isOpen, endpoint])
 
   const autoScrollDeps = useSyncRef({ isAtBottom, isAtTop, messagesHeightBeforeMessageHistory })
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     const deps = autoScrollDeps.current
     const element = messagesRef.current
     if (element != null && deps.isAtTop && deps.messagesHeightBeforeMessageHistory != null) {
@@ -484,27 +480,27 @@ export default function Chat(props: ChatProps) {
     }
   }, [messages, autoScrollDeps])
 
-  const sendMessage = React.useCallback(
-    (message: chat.ChatClientMessageData) => {
+  const sendMessage = useCallback(
+    (message: ChatClientMessageData) => {
       webSocket?.send(JSON.stringify(message))
     },
     [webSocket],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onMessage = (data: MessageEvent) => {
       if (typeof data.data !== 'string') {
         logger.error('Chat cannot handle binary messages.')
       } else {
         // This is SAFE, as the format of server messages is known.
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        const message: chat.ChatServerMessageData = JSON.parse(data.data)
+        const message: ChatServerMessageData = JSON.parse(data.data)
         switch (message.type) {
-          case chat.ChatMessageDataType.serverThreads: {
+          case ChatMessageDataType.serverThreads: {
             setThreads(message.threads)
             break
           }
-          case chat.ChatMessageDataType.serverThread: {
+          case ChatMessageDataType.serverThread: {
             if (!threads.some((thread) => thread.id === message.id)) {
               setThreads((oldThreads) => {
                 const newThread = {
@@ -527,7 +523,7 @@ export default function Chat(props: ChatProps) {
             setIsAtBeginning(message.isAtBeginning)
             const newMessages = message.messages.flatMap((innerMessage) => {
               switch (innerMessage.type) {
-                case chat.ChatMessageDataType.serverMessage: {
+                case ChatMessageDataType.serverMessage: {
                   const displayMessage: ChatDisplayMessage = {
                     id: innerMessage.id,
                     isStaffMessage: true,
@@ -540,7 +536,7 @@ export default function Chat(props: ChatProps) {
                   }
                   return displayMessage
                 }
-                case chat.ChatMessageDataType.serverReplayedMessage: {
+                case ChatMessageDataType.serverReplayedMessage: {
                   const displayMessage: ChatDisplayMessage = {
                     id: innerMessage.id,
                     isStaffMessage: false,
@@ -556,7 +552,7 @@ export default function Chat(props: ChatProps) {
               }
             })
             switch (message.requestType) {
-              case chat.ChatMessageDataType.historyBefore: {
+              case ChatMessageDataType.historyBefore: {
                 setMessages((oldMessages) => [...newMessages, ...oldMessages])
                 break
               }
@@ -567,7 +563,7 @@ export default function Chat(props: ChatProps) {
             }
             break
           }
-          case chat.ChatMessageDataType.serverMessage: {
+          case ChatMessageDataType.serverMessage: {
             const newMessage: ChatDisplayMessage = {
               id: message.id,
               isStaffMessage: true,
@@ -586,12 +582,12 @@ export default function Chat(props: ChatProps) {
             })
             break
           }
-          case chat.ChatMessageDataType.serverEditedMessage: {
+          case ChatMessageDataType.serverEditedMessage: {
             setMessages(
               messages.map((otherMessage) =>
                 otherMessage.id !== message.id ?
                   otherMessage
-                : object.merge(otherMessage, {
+                : merge(otherMessage, {
                     content: message.content,
                     editedTimestamp: message.timestamp,
                   }),
@@ -599,7 +595,7 @@ export default function Chat(props: ChatProps) {
             )
             break
           }
-          case chat.ChatMessageDataType.serverReplayedMessage: {
+          case ChatMessageDataType.serverReplayedMessage: {
             // This message is only sent as part of the `serverThread` message and
             // can safely be ignored.
             break
@@ -609,7 +605,7 @@ export default function Chat(props: ChatProps) {
     }
     const onOpen = () => {
       sendMessage({
-        type: chat.ChatMessageDataType.authenticate,
+        type: ChatMessageDataType.authenticate,
         accessToken,
       })
     }
@@ -623,14 +619,14 @@ export default function Chat(props: ChatProps) {
 
   const container = document.getElementById(HELP_CHAT_ID)
 
-  const switchThread = React.useCallback(
-    (newThreadId: chat.ThreadId) => {
+  const switchThread = useCallback(
+    (newThreadId: ThreadId) => {
       const threadData = threads.find((thread) => thread.id === newThreadId)
       if (threadData == null) {
         toastAndLog('unknownThreadIdError', null, newThreadId)
       } else {
         sendMessage({
-          type: chat.ChatMessageDataType.switchThread,
+          type: ChatMessageDataType.switchThread,
           threadId: newThreadId,
         })
       }
@@ -638,7 +634,7 @@ export default function Chat(props: ChatProps) {
     [threads, toastAndLog, sendMessage],
   )
 
-  const sendCurrentMessage = React.useCallback(
+  const sendCurrentMessage = useCallback(
     (createNewThread?: boolean) => {
       const element = messageInputRef.current
       if (element != null) {
@@ -662,7 +658,7 @@ export default function Chat(props: ChatProps) {
           if (threadId == null || createNewThread === true) {
             const newThreadTitle = threadId == null ? threadTitle : makeNewThreadTitle(threads)
             sendMessage({
-              type: chat.ChatMessageDataType.newThread,
+              type: ChatMessageDataType.newThread,
               title: newThreadTitle,
               content,
             })
@@ -671,7 +667,7 @@ export default function Chat(props: ChatProps) {
             setMessages([newMessage])
           } else {
             sendMessage({
-              type: chat.ChatMessageDataType.message,
+              type: ChatMessageDataType.message,
               threadId,
               content,
             })
@@ -699,9 +695,9 @@ export default function Chat(props: ChatProps) {
     // This should be `findLast`, but that requires ES2023.
     const lastStaffMessage = [...messages].reverse().find((message) => message.isStaffMessage)
 
-    return reactDom.createPortal(
+    return createPortal(
       <div
-        className={tailwindMerge.twMerge(
+        className={twMerge(
           'fixed right top z-1 flex h-screen w-chat flex-col py-chat-y text-xs text-primary shadow-soft backdrop-blur-default transition-[transform,opacity]',
           isOpen ? 'opacity-1' : 'translate-x-full opacity-0',
         )}
@@ -728,7 +724,7 @@ export default function Chat(props: ChatProps) {
             if (isNowAtTop && !isAtBeginning && firstMessage != null) {
               setShouldIgnoreMessageLimit(true)
               sendMessage({
-                type: chat.ChatMessageDataType.historyBefore,
+                type: ChatMessageDataType.historyBefore,
                 messageId: firstMessage.id,
               })
               setMessagesHeightBeforeMessageHistory(element.scrollHeight)
@@ -748,14 +744,14 @@ export default function Chat(props: ChatProps) {
               reactions={[]}
               doReact={(reaction) => {
                 sendMessage({
-                  type: chat.ChatMessageDataType.reaction,
+                  type: ChatMessageDataType.reaction,
                   messageId: message.id,
                   reaction,
                 })
                 setMessages((oldMessages) =>
                   oldMessages.map((oldMessage) =>
                     oldMessage.id === message.id ?
-                      object.merge(message, {
+                      merge(message, {
                         reactions: [...oldMessage.reactions, reaction],
                       })
                     : oldMessage,
@@ -764,14 +760,14 @@ export default function Chat(props: ChatProps) {
               }}
               doRemoveReaction={(reaction) => {
                 sendMessage({
-                  type: chat.ChatMessageDataType.removeReaction,
+                  type: ChatMessageDataType.removeReaction,
                   messageId: message.id,
                   reaction,
                 })
                 setMessages((oldMessages) =>
                   oldMessages.map((oldMessage) =>
                     oldMessage.id === message.id ?
-                      object.merge(message, {
+                      merge(message, {
                         reactions: oldMessage.reactions.filter(
                           (oldReaction) => oldReaction !== reaction,
                         ),
@@ -821,11 +817,11 @@ export default function Chat(props: ChatProps) {
             }}
           />
           <div className="flex gap-chat-buttons">
-            <ariaComponents.Button
+            <Button
               size="custom"
               variant="custom"
               isDisabled={!isReplyEnabled}
-              className={tailwindMerge.twMerge(
+              className={twMerge(
                 'text-xxs grow rounded-full px-chat-button-x py-chat-button-y text-left text-white',
                 isReplyEnabled ? 'bg-gray-400' : 'bg-gray-300',
               )}
@@ -834,8 +830,8 @@ export default function Chat(props: ChatProps) {
               }}
             >
               {getText('clickForNewQuestion')}
-            </ariaComponents.Button>
-            <ariaComponents.Button
+            </Button>
+            <Button
               size="custom"
               variant="custom"
               isDisabled={!isReplyEnabled}
@@ -845,18 +841,18 @@ export default function Chat(props: ChatProps) {
               }}
             >
               {getText('replyExclamation')}
-            </ariaComponents.Button>
+            </Button>
           </div>
         </form>
         {!isPaidUser && (
-          <ariaComponents.Button
+          <Button
             size="custom"
             variant="custom"
             className="mx-2 my-1 text-wrap rounded-2xl bg-call-to-action/90 p-2 text-center leading-cozy text-white hover:bg-call-to-action"
             onPress={upgradeToPro}
           >
             {getText('upgradeToProNag')}
-          </ariaComponents.Button>
+          </Button>
         )}
       </div>,
       container,
diff --git a/app/gui/src/dashboard/layouts/Drive.tsx b/app/gui/src/dashboard/layouts/Drive.tsx
index 87a10d4bb2ec..4d778af00ce7 100644
--- a/app/gui/src/dashboard/layouts/Drive.tsx
+++ b/app/gui/src/dashboard/layouts/Drive.tsx
@@ -1,57 +1,48 @@
 /** @file The directory header bar and directory item listing. */
-import * as React from 'react'
+import { memo, useDeferredValue, useEffect, useState, type Ref } from 'react'
 
-import * as appUtils from '#/appUtils'
-
-import * as offlineHooks from '#/hooks/offlineHooks'
-import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
+import { toast } from 'react-toastify'
 
-import * as authProvider from '#/providers/AuthProvider'
-import * as backendProvider from '#/providers/BackendProvider'
-import * as textProvider from '#/providers/TextProvider'
+import { DirectoryDoesNotExistError, Plan } from 'enso-common/src/services/Backend'
+import { download } from 'enso-common/src/utilities/download'
+import { getDownloadUrl } from 'enso-common/src/utilities/github'
 
+import { SUBSCRIBE_PATH } from '#/appUtils'
+import { Button, ButtonGroup } from '#/components/AriaComponents'
+import { ErrorBoundary, useErrorBoundary } from '#/components/ErrorBoundary'
+import { Result } from '#/components/Result'
+import { Suspense } from '#/components/Suspense'
 import AssetListEventType from '#/events/AssetListEventType'
-
+import { listDirectoryQueryOptions } from '#/hooks/backendHooks'
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import { useOffline } from '#/hooks/offlineHooks'
+import { useToastAndLog } from '#/hooks/toastAndLogHooks'
 import { AssetPanel } from '#/layouts/AssetPanel'
-import type * as assetsTable from '#/layouts/AssetsTable'
+import type { AssetManagementApi } from '#/layouts/AssetsTable'
 import AssetsTable from '#/layouts/AssetsTable'
 import CategorySwitcher from '#/layouts/CategorySwitcher'
-import * as categoryModule from '#/layouts/CategorySwitcher/Category'
-import * as eventListProvider from '#/layouts/Drive/EventListProvider'
+import { isCloudCategory, type Category } from '#/layouts/CategorySwitcher/Category'
+import { useDispatchAssetListEvent } from '#/layouts/Drive/EventListProvider'
 import DriveBar from '#/layouts/DriveBar'
 import Labels from '#/layouts/Labels'
-
-import * as ariaComponents from '#/components/AriaComponents'
-import * as result from '#/components/Result'
-
-import { ErrorBoundary, useErrorBoundary } from '#/components/ErrorBoundary'
-import { listDirectoryQueryOptions } from '#/hooks/backendHooks'
-import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import { useFullUserSession } from '#/providers/AuthProvider'
+import { useBackend, useLocalBackend } from '#/providers/BackendProvider'
 import { useTargetDirectory } from '#/providers/DriveProvider'
-import { DirectoryDoesNotExistError, Plan } from '#/services/Backend'
+import { useText } from '#/providers/TextProvider'
 import AssetQuery from '#/utilities/AssetQuery'
-import * as download from '#/utilities/download'
-import * as github from '#/utilities/github'
 import { tryFindSelfPermission } from '#/utilities/permissions'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
+import { twMerge } from '#/utilities/tailwindMerge'
 import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
-import { useDeferredValue, useEffect } from 'react'
-import { toast } from 'react-toastify'
-import { Suspense } from '../components/Suspense'
 import { useDirectoryIds } from './Drive/directoryIdsHooks'
 
-// =============
-// === Drive ===
-// =============
-
 /** Props for a {@link Drive}. */
 export interface DriveProps {
-  readonly category: categoryModule.Category
-  readonly setCategory: (category: categoryModule.Category) => void
+  readonly category: Category
+  readonly setCategory: (category: Category) => void
   readonly resetCategory: () => void
   readonly hidden: boolean
   readonly initialProjectName: string | null
-  readonly assetsManagementApiRef: React.Ref<assetsTable.AssetManagementApi>
+  readonly assetsManagementApiRef: Ref<AssetManagementApi>
 }
 
 const CATEGORIES_TO_DISPLAY_START_MODAL = ['cloud', 'local', 'local-directory']
@@ -60,12 +51,12 @@ const CATEGORIES_TO_DISPLAY_START_MODAL = ['cloud', 'local', 'local-directory']
 function Drive(props: DriveProps) {
   const { category, resetCategory } = props
 
-  const { isOffline } = offlineHooks.useOffline()
-  const toastAndLog = toastAndLogHooks.useToastAndLog()
-  const { user } = authProvider.useFullUserSession()
-  const localBackend = backendProvider.useLocalBackend()
-  const { getText } = textProvider.useText()
-  const isCloud = categoryModule.isCloudCategory(category)
+  const { isOffline } = useOffline()
+  const toastAndLog = useToastAndLog()
+  const { user } = useFullUserSession()
+  const localBackend = useLocalBackend()
+  const { getText } = useText()
+  const isCloud = isCloudCategory(category)
 
   const supportLocalBackend = localBackend != null
 
@@ -77,36 +68,36 @@ function Drive(props: DriveProps) {
   switch (status) {
     case 'not-enabled': {
       return (
-        <result.Result
+        <Result
           status="error"
           title={getText('notEnabledTitle')}
           testId="not-enabled-stub"
           subtitle={`${getText('notEnabledSubtitle')}${localBackend == null ? ' ' + getText('downloadFreeEditionMessage') : ''}`}
         >
-          <ariaComponents.ButtonGroup align="center">
-            <ariaComponents.Button variant="primary" size="medium" href={appUtils.SUBSCRIBE_PATH}>
+          <ButtonGroup align="center">
+            <Button variant="primary" size="medium" href={SUBSCRIBE_PATH}>
               {getText('upgrade')}
-            </ariaComponents.Button>
+            </Button>
 
             {!supportLocalBackend && (
-              <ariaComponents.Button
+              <Button
                 data-testid="download-free-edition"
                 size="medium"
                 variant="accent"
                 onPress={async () => {
-                  const downloadUrl = await github.getDownloadUrl()
+                  const downloadUrl = await getDownloadUrl()
                   if (downloadUrl == null) {
                     toastAndLog('noAppDownloadError')
                   } else {
-                    download.download(downloadUrl)
+                    download(downloadUrl)
                   }
                 }}
               >
                 {getText('downloadFreeEdition')}
-              </ariaComponents.Button>
+              </Button>
             )}
-          </ariaComponents.ButtonGroup>
-        </result.Result>
+          </ButtonGroup>
+        </Result>
       )
     }
     case 'offline':
@@ -148,17 +139,17 @@ function DriveAssetsView(props: DriveProps) {
   const deferredCategory = useDeferredValue(category)
   const { showBoundary } = useErrorBoundary()
 
-  const { isOffline } = offlineHooks.useOffline()
-  const { user } = authProvider.useFullUserSession()
-  const localBackend = backendProvider.useLocalBackend()
-  const backend = backendProvider.useBackend(category)
-  const { getText } = textProvider.useText()
-  const dispatchAssetListEvent = eventListProvider.useDispatchAssetListEvent()
+  const { isOffline } = useOffline()
+  const { user } = useFullUserSession()
+  const localBackend = useLocalBackend()
+  const backend = useBackend(category)
+  const { getText } = useText()
+  const dispatchAssetListEvent = useDispatchAssetListEvent()
 
-  const [query, setQuery] = React.useState(() => AssetQuery.fromString(''))
-  const [shouldForceHideStartModal, setShouldForceHideStartModal] = React.useState(false)
+  const [query, setQuery] = useState(() => AssetQuery.fromString(''))
+  const [shouldForceHideStartModal, setShouldForceHideStartModal] = useState(false)
 
-  const isCloud = categoryModule.isCloudCategory(category)
+  const isCloud = isCloudCategory(category)
   const supportLocalBackend = localBackend != null
 
   const targetDirectory = useTargetDirectory()
@@ -231,7 +222,7 @@ function DriveAssetsView(props: DriveProps) {
     !hasPermissionToCreateAssets
 
   return (
-    <div className={tailwindMerge.twMerge('relative flex grow', hidden && 'hidden')}>
+    <div className={twMerge('relative flex grow', hidden && 'hidden')}>
       <div
         data-testid="drive-view"
         className="mt-4 flex flex-1 flex-col gap-4 overflow-visible px-page-x"
@@ -263,7 +254,7 @@ function DriveAssetsView(props: DriveProps) {
           </div>
 
           {status === 'offline' ?
-            <result.Result
+            <Result
               status="info"
               className="my-12"
               centered="horizontal"
@@ -271,7 +262,7 @@ function DriveAssetsView(props: DriveProps) {
               subtitle={`${getText('cloudUnavailableOfflineDescription')} ${supportLocalBackend ? getText('cloudUnavailableOfflineDescriptionOfferLocal') : ''}`}
             >
               {supportLocalBackend && (
-                <ariaComponents.Button
+                <Button
                   variant="primary"
                   size="small"
                   className="mx-auto"
@@ -280,9 +271,9 @@ function DriveAssetsView(props: DriveProps) {
                   }}
                 >
                   {getText('switchToLocal')}
-                </ariaComponents.Button>
+                </Button>
               )}
-            </result.Result>
+            </Result>
           : <AssetsTable
               assetManagementApiRef={assetsManagementApiRef}
               hidden={hidden}
@@ -300,4 +291,4 @@ function DriveAssetsView(props: DriveProps) {
   )
 }
 
-export default React.memo(Drive)
+export default memo(Drive)
diff --git a/app/gui/src/dashboard/layouts/Drive/assetsTableItemsHooks.tsx b/app/gui/src/dashboard/layouts/Drive/assetsTableItemsHooks.tsx
index 3f5cafcb119d..3b11be79d87a 100644
--- a/app/gui/src/dashboard/layouts/Drive/assetsTableItemsHooks.tsx
+++ b/app/gui/src/dashboard/layouts/Drive/assetsTableItemsHooks.tsx
@@ -3,6 +3,8 @@ import { startTransition, useMemo } from 'react'
 
 import type { AnyAsset, AssetId } from 'enso-common/src/services/Backend'
 import { AssetType, getAssetPermissionName } from 'enso-common/src/services/Backend'
+import { fileExtension } from 'enso-common/src/utilities/data/fileInfo'
+import { regexEscape } from 'enso-common/src/utilities/data/string'
 import { PermissionAction } from 'enso-common/src/utilities/permissions'
 
 import type { SortableColumn } from '#/components/dashboard/column/columnUtils'
@@ -11,11 +13,8 @@ import type { DirectoryId } from '#/services/ProjectManager'
 import type AssetQuery from '#/utilities/AssetQuery'
 import type { AnyAssetTreeNode } from '#/utilities/AssetTreeNode'
 import Visibility from '#/utilities/Visibility'
-import { fileExtension } from '#/utilities/fileInfo'
-import type { SortInfo } from '#/utilities/sorting'
-import { SortDirection } from '#/utilities/sorting'
-import { regexEscape } from '#/utilities/string'
-import { createStore, useStore } from '#/utilities/zustand.ts'
+import { SortDirection, type SortInfo } from '#/utilities/sorting'
+import { createStore, useStore } from '#/utilities/zustand'
 import invariant from 'tiny-invariant'
 
 /** Options for {@link useAssetsTableItems}. */
diff --git a/app/gui/src/dashboard/layouts/DriveBar.tsx b/app/gui/src/dashboard/layouts/DriveBar.tsx
index b94ee9d954fd..9d7d33810405 100644
--- a/app/gui/src/dashboard/layouts/DriveBar.tsx
+++ b/app/gui/src/dashboard/layouts/DriveBar.tsx
@@ -2,10 +2,12 @@
  * @file Header menubar for the directory listing, containing information about
  * the current directory and some configuration options.
  */
-import * as React from 'react'
+import { useEffect, useRef, type Dispatch, type SetStateAction } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
+import type { Backend } from 'enso-common/src/services/Backend'
+
 import AddDatalinkIcon from '#/assets/add_datalink.svg'
 import AddFolderIcon from '#/assets/add_folder.svg'
 import AddKeyIcon from '#/assets/add_key.svg'
@@ -41,6 +43,7 @@ import StartModal from '#/layouts/StartModal'
 import ConfirmDeleteModal from '#/modals/ConfirmDeleteModal'
 import UpsertDatalinkModal from '#/modals/UpsertDatalinkModal'
 import UpsertSecretModal from '#/modals/UpsertSecretModal'
+import { useFullUserSession } from '#/providers/AuthProvider'
 import {
   useCanCreateAssets,
   useCanDownload,
@@ -50,22 +53,16 @@ import {
 import { useInputBindings } from '#/providers/InputBindingsProvider'
 import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
 import type AssetQuery from '#/utilities/AssetQuery'
 import { inputFiles } from '#/utilities/input'
-import * as sanitizedEventTargets from '#/utilities/sanitizedEventTargets'
-import { useFullUserSession } from '../providers/AuthProvider'
+import { document } from '#/utilities/sanitizedEventTargets'
 import { AssetPanelToggle } from './AssetPanel'
 
-// ================
-// === DriveBar ===
-// ================
-
 /** Props for a {@link DriveBar}. */
 export interface DriveBarProps {
   readonly backend: Backend
   readonly query: AssetQuery
-  readonly setQuery: React.Dispatch<React.SetStateAction<AssetQuery>>
+  readonly setQuery: Dispatch<SetStateAction<AssetQuery>>
   readonly category: Category
   readonly doEmptyTrash: () => void
   readonly isEmpty: boolean
@@ -95,7 +92,7 @@ export default function DriveBar(props: DriveBarProps) {
   const inputBindings = useInputBindings()
   const dispatchAssetEvent = useDispatchAssetEvent()
   const canCreateAssets = useCanCreateAssets()
-  const createAssetButtonsRef = React.useRef<HTMLDivElement>(null)
+  const createAssetButtonsRef = useRef<HTMLDivElement>(null)
   const isCloud = isCloudCategory(category)
   const { isOffline } = useOffline()
   const { user } = useFullUserSession()
@@ -163,8 +160,8 @@ export default function DriveBar(props: DriveBarProps) {
   const newProject = newProjectMutation.mutateAsync
   const isCreatingProject = newProjectMutation.isPending
 
-  React.useEffect(() => {
-    return inputBindings.attach(sanitizedEventTargets.document.body, 'keydown', {
+  useEffect(() => {
+    return inputBindings.attach(document.body, 'keydown', {
       ...(isCloud ?
         {
           newFolder: () => {
diff --git a/app/gui/src/dashboard/layouts/Editor.tsx b/app/gui/src/dashboard/layouts/Editor.tsx
index dc41ac689926..57b2338a8ffb 100644
--- a/app/gui/src/dashboard/layouts/Editor.tsx
+++ b/app/gui/src/dashboard/layouts/Editor.tsx
@@ -1,39 +1,36 @@
 /** @file The container that launches the IDE. */
-import * as React from 'react'
+import { memo, useCallback, useEffect, useMemo, type ComponentType } from 'react'
 
-import * as reactQuery from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 
-import * as appUtils from '#/appUtils'
-
-import * as gtagHooks from '#/hooks/gtagHooks'
-import * as projectHooks from '#/hooks/projectHooks'
-
-import * as backendProvider from '#/providers/BackendProvider'
-import type { LaunchedProject } from '#/providers/ProjectsProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import * as errorBoundary from '#/components/ErrorBoundary'
-import * as suspense from '#/components/Suspense'
-
-import type Backend from '#/services/Backend'
-import * as backendModule from '#/services/Backend'
+import {
+  BackendType,
+  ProjectState,
+  type Backend,
+  type Project,
+  type ProjectId,
+} from 'enso-common/src/services/Backend'
 
+import { SEARCH_PARAMS_PREFIX } from '#/appUtils'
+import { ErrorBoundary, ErrorDisplay } from '#/components/ErrorBoundary'
+import { Loader, Suspense } from '#/components/Suspense'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import * as twMerge from '#/utilities/tailwindMerge'
-
-// ====================
-// === StringConfig ===
-// ====================
+import { gtagOpenCloseCallback, useGtagEvent } from '#/hooks/gtagHooks'
+import { createGetProjectDetailsQuery } from '#/hooks/projectHooks'
+import {
+  useBackendForProjectType,
+  useLocalBackend,
+  useRemoteBackend,
+} from '#/providers/BackendProvider'
+import type { LaunchedProject } from '#/providers/ProjectsProvider'
+import { useText } from '#/providers/TextProvider'
+import { twJoin } from '#/utilities/tailwindMerge'
 
 /** A configuration in which values may be strings or nested configurations. */
 interface StringConfig {
   readonly [key: string]: StringConfig | string
 }
 
-// ========================
-// === GraphEditorProps ===
-// ========================
-
 /** Props for the GUI editor root component. */
 export interface GraphEditorProps {
   readonly config: StringConfig | null
@@ -46,25 +43,13 @@ export interface GraphEditorProps {
   readonly remoteBackend: Backend | null
 }
 
-// =========================
-// === GraphEditorRunner ===
-// =========================
-
 /**
  * The value passed from the entrypoint to the dashboard, which enables the dashboard to
  * open a new IDE instance.
  */
-export type GraphEditorRunner = React.ComponentType<GraphEditorProps>
+export type GraphEditorRunner = ComponentType<GraphEditorProps>
 
-// =================
-// === Constants ===
-// =================
-
-const IGNORE_PARAMS_REGEX = new RegExp(`^${appUtils.SEARCH_PARAMS_PREFIX}(.+)$`)
-
-// ==============
-// === Editor ===
-// ==============
+const IGNORE_PARAMS_REGEX = new RegExp(`^${SEARCH_PARAMS_PREFIX}(.+)$`)
 
 /** Props for an {@link Editor}. */
 export interface EditorProps {
@@ -75,27 +60,27 @@ export interface EditorProps {
   readonly hidden: boolean
   readonly ydocUrl: string | null
   readonly appRunner: GraphEditorRunner | null
-  readonly renameProject: (newName: string, projectId: backendModule.ProjectId) => void
-  readonly projectId: backendModule.ProjectId
+  readonly renameProject: (newName: string, projectId: ProjectId) => void
+  readonly projectId: ProjectId
 }
 
 /** The container that launches the IDE. */
 function Editor(props: EditorProps) {
   const { project, hidden, startProject, isOpeningFailed, openingError } = props
 
-  const backend = backendProvider.useBackendForProjectType(project.type)
+  const backend = useBackendForProjectType(project.type)
 
-  const projectStatusQuery = projectHooks.createGetProjectDetailsQuery({
+  const projectStatusQuery = createGetProjectDetailsQuery({
     assetId: project.id,
     parentId: project.parentId,
     backend,
   })
 
-  const projectQuery = reactQuery.useQuery(projectStatusQuery)
+  const projectQuery = useQuery(projectStatusQuery)
 
-  const isProjectClosed = projectQuery.data?.state.type === backendModule.ProjectState.closed
+  const isProjectClosed = projectQuery.data?.state.type === ProjectState.closed
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isProjectClosed) {
       startProject(project)
     }
@@ -103,7 +88,7 @@ function Editor(props: EditorProps) {
 
   if (isOpeningFailed) {
     return (
-      <errorBoundary.ErrorDisplay
+      <ErrorDisplay
         error={openingError}
         resetErrorBoundary={() => {
           startProject(project)
@@ -114,7 +99,7 @@ function Editor(props: EditorProps) {
 
   return (
     <div
-      className={twMerge.twJoin('contents', hidden && 'hidden')}
+      className={twJoin('contents', hidden && 'hidden')}
       data-testvalue={project.id}
       data-testid="editor"
     >
@@ -122,27 +107,26 @@ function Editor(props: EditorProps) {
         switch (true) {
           case projectQuery.isError:
             return (
-              <errorBoundary.ErrorDisplay
+              <ErrorDisplay
                 error={projectQuery.error}
                 resetErrorBoundary={() => projectQuery.refetch()}
               />
             )
 
-          case projectQuery.isLoading ||
-            projectQuery.data?.state.type !== backendModule.ProjectState.opened:
-            return <suspense.Loader minHeight="full" />
+          case projectQuery.isLoading || projectQuery.data?.state.type !== ProjectState.opened:
+            return <Loader minHeight="full" />
 
           default:
             return (
-              <errorBoundary.ErrorBoundary>
-                <suspense.Suspense>
+              <ErrorBoundary>
+                <Suspense>
                   <EditorInternal
                     {...props}
                     openedProject={projectQuery.data}
                     backendType={project.type}
                   />
-                </suspense.Suspense>
-              </errorBoundary.ErrorBoundary>
+                </Suspense>
+              </ErrorBoundary>
             )
         }
       })()}
@@ -150,38 +134,34 @@ function Editor(props: EditorProps) {
   )
 }
 
-// ======================
-// === EditorInternal ===
-// ======================
-
 /** Props for an {@link EditorInternal}. */
 interface EditorInternalProps extends Omit<EditorProps, 'project'> {
-  readonly openedProject: backendModule.Project
-  readonly backendType: backendModule.BackendType
+  readonly openedProject: Project
+  readonly backendType: BackendType
 }
 
 /** An internal editor. */
 function EditorInternal(props: EditorInternalProps) {
   const { hidden, ydocUrl, appRunner: AppRunner, renameProject, openedProject, backendType } = props
 
-  const { getText } = textProvider.useText()
-  const gtagEvent = gtagHooks.useGtagEvent()
+  const { getText } = useText()
+  const gtagEvent = useGtagEvent()
 
-  const localBackend = backendProvider.useLocalBackend()
-  const remoteBackend = backendProvider.useRemoteBackend()
+  const localBackend = useLocalBackend()
+  const remoteBackend = useRemoteBackend()
 
-  const logEvent = React.useCallback(
+  const logEvent = useCallback(
     (message: string, projectId?: string | null, metadata?: object | null) => {
       void remoteBackend.logEvent(message, projectId, metadata)
     },
     [remoteBackend],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (hidden) {
       return
     } else {
-      return gtagHooks.gtagOpenCloseCallback(gtagEvent, 'open_workflow', 'close_workflow')
+      return gtagOpenCloseCallback(gtagEvent, 'open_workflow', 'close_workflow')
     }
   }, [hidden, gtagEvent])
 
@@ -189,12 +169,11 @@ function EditorInternal(props: EditorInternalProps) {
     renameProject(newName, openedProject.projectId)
   })
 
-  const appProps = React.useMemo<GraphEditorProps>(() => {
+  const appProps = useMemo<GraphEditorProps>(() => {
     const jsonAddress = openedProject.jsonAddress
     const binaryAddress = openedProject.binaryAddress
     const ydocAddress = openedProject.ydocAddress ?? ydocUrl ?? ''
-    const projectBackend =
-      backendType === backendModule.BackendType.remote ? remoteBackend : localBackend
+    const projectBackend = backendType === BackendType.remote ? remoteBackend : localBackend
 
     if (jsonAddress == null) {
       throw new Error(getText('noJSONEndpointError'))
@@ -233,4 +212,4 @@ function EditorInternal(props: EditorInternalProps) {
   return AppRunner == null ? null : <AppRunner key={appProps.projectId} {...appProps} />
 }
 
-export default React.memo(Editor)
+export default memo(Editor)
diff --git a/app/gui/src/dashboard/layouts/GlobalContextMenu.tsx b/app/gui/src/dashboard/layouts/GlobalContextMenu.tsx
index 67c3eb8ae9ac..cd8ef81eb22f 100644
--- a/app/gui/src/dashboard/layouts/GlobalContextMenu.tsx
+++ b/app/gui/src/dashboard/layouts/GlobalContextMenu.tsx
@@ -1,12 +1,10 @@
 /** @file A context menu available everywhere in the directory. */
 import { useStore } from 'zustand'
 
+import { BackendType, type Backend, type DirectoryId } from 'enso-common/src/services/Backend'
+
 import ContextMenu from '#/components/ContextMenu'
 import ContextMenuEntry from '#/components/ContextMenuEntry'
-
-import UpsertDatalinkModal from '#/modals/UpsertDatalinkModal'
-import UpsertSecretModal from '#/modals/UpsertSecretModal'
-
 import {
   useNewDatalink,
   useNewFolder,
@@ -16,11 +14,11 @@ import {
 } from '#/hooks/backendHooks'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import type { Category } from '#/layouts/CategorySwitcher/Category'
+import UpsertDatalinkModal from '#/modals/UpsertDatalinkModal'
+import UpsertSecretModal from '#/modals/UpsertSecretModal'
 import { useDriveStore } from '#/providers/DriveProvider'
 import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import { BackendType, type DirectoryId } from '#/services/Backend'
 import { inputFiles } from '#/utilities/input'
 
 /** Props for a {@link GlobalContextMenu}. */
diff --git a/app/gui/src/dashboard/layouts/Labels.tsx b/app/gui/src/dashboard/layouts/Labels.tsx
index d5d738ba8d02..44f8e856e68a 100644
--- a/app/gui/src/dashboard/layouts/Labels.tsx
+++ b/app/gui/src/dashboard/layouts/Labels.tsx
@@ -1,11 +1,14 @@
 /** @file A list of selectable labels. */
-import * as React from 'react'
+import type { Dispatch, SetStateAction } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
+import type { Backend } from 'enso-common/src/services/Backend'
+import { shallowEqual } from 'enso-common/src/utilities/data/array'
+
 import PlusIcon from '#/assets/plus.svg'
 import Trash2Icon from '#/assets/trash2.svg'
-import * as ariaComponents from '#/components/AriaComponents'
+import { Button, DialogTrigger, Text } from '#/components/AriaComponents'
 import Label from '#/components/dashboard/Label'
 import FocusArea from '#/components/styled/FocusArea'
 import FocusRing from '#/components/styled/FocusRing'
@@ -13,19 +16,17 @@ import { backendMutationOptions, useBackendQuery } from '#/hooks/backendHooks'
 import ConfirmDeleteModal from '#/modals/ConfirmDeleteModal'
 import DragModal from '#/modals/DragModal'
 import NewLabelModal from '#/modals/NewLabelModal'
-import * as modalProvider from '#/providers/ModalProvider'
-import * as textProvider from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import * as array from '#/utilities/array'
+import { useSetModal } from '#/providers/ModalProvider'
+import { useText } from '#/providers/TextProvider'
 import type AssetQuery from '#/utilities/AssetQuery'
-import * as drag from '#/utilities/drag'
+import { LABELS, setDragImageToBlank, type LabelsDragPayload } from '#/utilities/drag'
 
 /** Props for a {@link Labels}. */
 export interface LabelsProps {
   readonly backend: Backend
   readonly draggable: boolean
   readonly query: AssetQuery
-  readonly setQuery: React.Dispatch<React.SetStateAction<AssetQuery>>
+  readonly setQuery: Dispatch<SetStateAction<AssetQuery>>
 }
 
 /** A list of selectable labels. */
@@ -33,8 +34,8 @@ export default function Labels(props: LabelsProps) {
   const { backend, query, setQuery, draggable = true } = props
   const currentLabels = query.labels
   const currentNegativeLabels = query.negativeLabels
-  const { setModal } = modalProvider.useSetModal()
-  const { getText } = textProvider.useText()
+  const { setModal } = useSetModal()
+  const { getText } = useText()
   const labels = useBackendQuery(backend, 'listTags', []).data ?? []
   const deleteTag = useMutation(backendMutationOptions(backend, 'deleteTag')).mutate
 
@@ -47,9 +48,9 @@ export default function Labels(props: LabelsProps) {
             className="flex flex-col items-start gap-4 overflow-auto"
             {...innerProps}
           >
-            <ariaComponents.Text variant="subtitle" className="px-2 font-bold">
+            <Text variant="subtitle" className="px-2 font-bold">
               {getText('labels')}
-            </ariaComponents.Text>
+            </Text>
             <div
               data-testid="labels-list"
               aria-label={getText('labelsListLabel')}
@@ -57,7 +58,7 @@ export default function Labels(props: LabelsProps) {
             >
               {labels.map((label) => {
                 const negated = currentNegativeLabels.some((term) =>
-                  array.shallowEqual(term, [label.value]),
+                  shallowEqual(term, [label.value]),
                 )
                 return (
                   <div key={label.id} className="group relative flex items-center gap-label-icons">
@@ -65,8 +66,7 @@ export default function Labels(props: LabelsProps) {
                       draggable={draggable}
                       color={label.color}
                       active={
-                        negated ||
-                        currentLabels.some((term) => array.shallowEqual(term, [label.value]))
+                        negated || currentLabels.some((term) => shallowEqual(term, [label.value]))
                       }
                       negated={negated}
                       onPress={(event) => {
@@ -80,14 +80,14 @@ export default function Labels(props: LabelsProps) {
                         )
                       }}
                       onDragStart={(event) => {
-                        drag.setDragImageToBlank(event)
-                        const payload: drag.LabelsDragPayload = new Set([label.value])
-                        drag.LABELS.bind(event, payload)
+                        setDragImageToBlank(event)
+                        const payload: LabelsDragPayload = new Set([label.value])
+                        LABELS.bind(event, payload)
                         setModal(
                           <DragModal
                             event={event}
                             onDragEnd={() => {
-                              drag.LABELS.unbind(payload)
+                              LABELS.unbind(payload)
                             }}
                           >
                             <Label active color={label.color} onPress={() => {}}>
@@ -100,8 +100,8 @@ export default function Labels(props: LabelsProps) {
                       {label.value}
                     </Label>
                     <FocusRing placement="after">
-                      <ariaComponents.DialogTrigger>
-                        <ariaComponents.Button
+                      <DialogTrigger>
+                        <Button
                           variant="icon"
                           icon={Trash2Icon}
                           extraClickZone={false}
@@ -115,24 +115,24 @@ export default function Labels(props: LabelsProps) {
                             deleteTag([label.id, label.value])
                           }}
                         />
-                      </ariaComponents.DialogTrigger>
+                      </DialogTrigger>
                     </FocusRing>
                   </div>
                 )
               })}
             </div>
           </div>
-          <ariaComponents.DialogTrigger>
-            <ariaComponents.Button
+          <DialogTrigger>
+            <Button
               size="xsmall"
               variant="outline"
               className="mt-1 self-start pl-1 pr-2"
               icon={PlusIcon}
             >
               {getText('newLabelButtonLabel')}
-            </ariaComponents.Button>
+            </Button>
             <NewLabelModal backend={backend} />
-          </ariaComponents.DialogTrigger>
+          </DialogTrigger>
         </div>
       )}
     </FocusArea>
diff --git a/app/gui/src/dashboard/layouts/Settings/ActivityLogSettingsSection.tsx b/app/gui/src/dashboard/layouts/Settings/ActivityLogSettingsSection.tsx
index 66afd9437a51..192e064496d5 100644
--- a/app/gui/src/dashboard/layouts/Settings/ActivityLogSettingsSection.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/ActivityLogSettingsSection.tsx
@@ -15,15 +15,11 @@ import FocusArea from '#/components/styled/FocusArea'
 import SvgMask from '#/components/SvgMask'
 import { useBackendQuery } from '#/hooks/backendHooks'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import { EVENT_TYPES, EventType, type Event } from '#/services/Backend'
-import { formatDateTime } from '#/utilities/dateTime'
 import { nextSortDirection, SortDirection, type SortInfo } from '#/utilities/sorting'
 import { twMerge } from '#/utilities/tailwindMerge'
-
-// =================
-// === Constants ===
-// =================
+import type Backend from 'enso-common/src/services/Backend'
+import { EVENT_TYPES, EventType, type Event } from 'enso-common/src/services/Backend'
+import { formatDateTime } from 'enso-common/src/utilities/data/dateTime'
 
 const EVENT_TYPE_ICON: Record<EventType, string> = {
   [EventType.GetSecret]: KeyIcon,
@@ -49,10 +45,6 @@ function createActivityLogSchema() {
   })
 }
 
-// =================================
-// === ActivityLogSortableColumn ===
-// =================================
-
 /** Sortable columns in an activity log table. */
 enum ActivityLogSortableColumn {
   type = 'type',
@@ -60,10 +52,6 @@ enum ActivityLogSortableColumn {
   timestamp = 'timestamp',
 }
 
-// ==================================
-// === ActivityLogSettingsSection ===
-// ==================================
-
 /** Props for a {@link ActivityLogSettingsSection}. */
 export interface ActivityLogSettingsSectionProps {
   readonly backend: Backend
@@ -383,10 +371,6 @@ export default function ActivityLogSettingsSection(props: ActivityLogSettingsSec
   )
 }
 
-// =============================
-// === ActivityLogHeaderCell ===
-// =============================
-
 /** Props for a {@link ActivityLogHeaderCell}. */
 export interface ActivityLogHeaderCellProps extends Readonly<React.PropsWithChildren> {
   readonly className?: string
@@ -408,10 +392,6 @@ function ActivityLogHeaderCell(props: ActivityLogHeaderCellProps) {
   )
 }
 
-// ============================
-// === ActivityLogTableCell ===
-// ============================
-
 /** Props for a {@link ActivityLogTableCell}. */
 export type ActivityLogTableCellProps = Readonly<React.PropsWithChildren>
 
diff --git a/app/gui/src/dashboard/layouts/Settings/KeyboardShortcutsSettingsSection.tsx b/app/gui/src/dashboard/layouts/Settings/KeyboardShortcutsSettingsSection.tsx
index e7ae0c6b5d10..e66a20c22943 100644
--- a/app/gui/src/dashboard/layouts/Settings/KeyboardShortcutsSettingsSection.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/KeyboardShortcutsSettingsSection.tsx
@@ -1,5 +1,7 @@
 /** @file Settings tab for viewing and editing keyboard shortcuts. */
-import * as React from 'react'
+import { useMemo, useRef } from 'react'
+
+import { unsafeEntries } from 'enso-common/src/utilities/data/object'
 
 import BlankIcon from '#/assets/blank.svg'
 import CrossIcon from '#/assets/cross.svg'
@@ -17,26 +19,21 @@ import CaptureKeyboardShortcutModal from '#/modals/CaptureKeyboardShortcutModal'
 import ConfirmDeleteModal from '#/modals/ConfirmDeleteModal'
 import { useInputBindings } from '#/providers/InputBindingsProvider'
 import { useText } from '#/providers/TextProvider'
-import { unsafeEntries } from '#/utilities/object'
-
-// ========================================
-// === KeyboardShortcutsSettingsSection ===
-// ========================================
 
 /** Settings tab for viewing and editing keyboard shortcuts. */
 export default function KeyboardShortcutsSettingsSection() {
   const [refresh, doRefresh] = useRefresh()
   const inputBindings = useInputBindings()
   const { getText } = useText()
-  const rootRef = React.useRef<HTMLDivElement>(null)
-  const bodyRef = React.useRef<HTMLTableSectionElement>(null)
-  const allShortcuts = React.useMemo(() => {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const bodyRef = useRef<HTMLTableSectionElement>(null)
+  const allShortcuts = useMemo(() => {
     // This is REQUIRED, in order to avoid disabling the `react-hooks/exhaustive-deps` lint.
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     refresh
     return new Set(Object.values(inputBindings.metadata).flatMap((value) => value.bindings))
   }, [inputBindings.metadata, refresh])
-  const visibleBindings = React.useMemo(
+  const visibleBindings = useMemo(
     () => unsafeEntries(inputBindings.metadata).filter((kv) => kv[1].rebindable !== false),
     [inputBindings.metadata],
   )
diff --git a/app/gui/src/dashboard/layouts/Settings/MembersSettingsSection.tsx b/app/gui/src/dashboard/layouts/Settings/MembersSettingsSection.tsx
index b16c06955559..fee1cd8dbd71 100644
--- a/app/gui/src/dashboard/layouts/Settings/MembersSettingsSection.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/MembersSettingsSection.tsx
@@ -1,30 +1,27 @@
 /** @file Settings tab for viewing and editing organization members. */
 import { useMutation, useSuspenseQueries } from '@tanstack/react-query'
 
-import { backendMutationOptions } from '#/hooks/backendHooks'
-import * as billingHooks from '#/hooks/billing'
-
-import * as authProvider from '#/providers/AuthProvider'
-import * as backendProvider from '#/providers/BackendProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import * as ariaComponents from '#/components/AriaComponents'
-import * as paywall from '#/components/Paywall'
+import type { EmailAddress, Invitation, UserId } from 'enso-common/src/services/Backend'
 
+import { Button, ButtonGroup, CopyButton, DialogTrigger, Text } from '#/components/AriaComponents'
+import { PaywallDialogButton } from '#/components/Paywall'
+import { backendMutationOptions } from '#/hooks/backendHooks'
+import { usePaywall } from '#/hooks/billing'
 import InviteUsersModal from '#/modals/InviteUsersModal'
-
-import type * as backendModule from '#/services/Backend'
+import { useFullUserSession } from '#/providers/AuthProvider'
+import { useRemoteBackend } from '#/providers/BackendProvider'
+import { useText } from '#/providers/TextProvider'
 import type RemoteBackend from '#/services/RemoteBackend'
 
 const LIST_USERS_STALE_TIME_MS = 60_000
 
 /** Settings tab for viewing and editing organization members. */
 export default function MembersSettingsSection() {
-  const { getText } = textProvider.useText()
-  const backend = backendProvider.useRemoteBackend()
-  const { user } = authProvider.useFullUserSession()
+  const { getText } = useText()
+  const backend = useRemoteBackend()
+  const { user } = useFullUserSession()
 
-  const { isFeatureUnderPaywall, getFeature } = billingHooks.usePaywall({ plan: user.plan })
+  const { isFeatureUnderPaywall, getFeature } = usePaywall({ plan: user.plan })
 
   const [{ data: members }, { data: invitations }] = useSuspenseQueries({
     queries: [
@@ -52,31 +49,27 @@ export default function MembersSettingsSection() {
   return (
     <>
       {isAdmin && (
-        <ariaComponents.ButtonGroup>
-          <ariaComponents.DialogTrigger>
-            <ariaComponents.Button variant="outline" rounded="full" size="medium">
+        <ButtonGroup>
+          <DialogTrigger>
+            <Button variant="outline" rounded="full" size="medium">
               {getText('inviteMembers')}
-            </ariaComponents.Button>
+            </Button>
 
             <InviteUsersModal />
-          </ariaComponents.DialogTrigger>
+          </DialogTrigger>
 
           {seatsLeft != null && (
             <div className="flex items-center gap-1">
-              <ariaComponents.Text>
+              <Text>
                 {seatsLeft <= 0 ?
                   getText('noSeatsLeft')
                 : getText('seatsLeft', seatsLeft, seatsTotal)}
-              </ariaComponents.Text>
+              </Text>
 
-              <paywall.PaywallDialogButton
-                feature="inviteUserFull"
-                variant="link"
-                showIcon={false}
-              />
+              <PaywallDialogButton feature="inviteUserFull" variant="link" showIcon={false} />
             </div>
           )}
-        </ariaComponents.ButtonGroup>
+        </ButtonGroup>
       )}
 
       <div className="min-h-0 flex-1 overflow-auto">
@@ -95,20 +88,20 @@ export default function MembersSettingsSection() {
             {members.map((member) => (
               <tr key={member.email} className="group h-row rounded-rows-child">
                 <td className="min-w-48 max-w-80 border-x-2 border-transparent bg-clip-padding px-4 py-1 first:rounded-l-full last:rounded-r-full last:border-r-0">
-                  <ariaComponents.Text truncate="1" className="block">
+                  <Text truncate="1" className="block">
                     {member.email}
-                  </ariaComponents.Text>
-                  <ariaComponents.Text truncate="1" className="block text-2xs text-primary/40">
+                  </Text>
+                  <Text truncate="1" className="block text-2xs text-primary/40">
                     {member.name}
-                  </ariaComponents.Text>
+                  </Text>
                 </td>
                 <td className="border-x-2 border-transparent bg-clip-padding px-cell-x first:rounded-l-full last:rounded-r-full last:border-r-0">
                   <div className="flex flex-col">
                     {getText('active')}
                     {member.email !== user.email && isAdmin && (
-                      <ariaComponents.ButtonGroup gap="small" className="mt-0.5">
+                      <ButtonGroup gap="small" className="mt-0.5">
                         <RemoveMemberButton backend={backend} userId={member.userId} />
-                      </ariaComponents.ButtonGroup>
+                      </ButtonGroup>
                     )}
                   </div>
                 </td>
@@ -123,8 +116,8 @@ export default function MembersSettingsSection() {
                   <div className="flex flex-col">
                     {getText('pendingInvitation')}
                     {isAdmin && (
-                      <ariaComponents.ButtonGroup gap="small" className="mt-0.5">
-                        <ariaComponents.CopyButton
+                      <ButtonGroup gap="small" className="mt-0.5">
+                        <CopyButton
                           size="custom"
                           // eslint-disable-next-line @typescript-eslint/naming-convention, camelcase
                           copyText={`enso://auth/registration?=${new URLSearchParams({ organization_id: invitation.organizationId }).toString()}`}
@@ -132,12 +125,12 @@ export default function MembersSettingsSection() {
                           copyIcon={false}
                         >
                           {getText('copyInviteLink')}
-                        </ariaComponents.CopyButton>
+                        </CopyButton>
 
                         <ResendInvitationButton invitation={invitation} backend={backend} />
 
                         <RemoveInvitationButton backend={backend} email={invitation.userEmail} />
-                      </ariaComponents.ButtonGroup>
+                      </ButtonGroup>
                     )}
                   </div>
                 </td>
@@ -156,7 +149,7 @@ export default function MembersSettingsSection() {
 
 /** Props for the ResendInvitationButton component. */
 interface ResendInvitationButtonProps {
-  readonly invitation: backendModule.Invitation
+  readonly invitation: Invitation
   readonly backend: RemoteBackend
 }
 
@@ -164,7 +157,7 @@ interface ResendInvitationButtonProps {
 function ResendInvitationButton(props: ResendInvitationButtonProps) {
   const { invitation, backend } = props
 
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
   const resendMutation = useMutation(
     backendMutationOptions(backend, 'resendInvitation', {
       mutationKey: [invitation.userEmail],
@@ -172,7 +165,7 @@ function ResendInvitationButton(props: ResendInvitationButtonProps) {
   )
 
   return (
-    <ariaComponents.Button
+    <Button
       variant="icon"
       size="custom"
       loading={resendMutation.isPending}
@@ -181,7 +174,7 @@ function ResendInvitationButton(props: ResendInvitationButtonProps) {
       }}
     >
       {getText('resend')}
-    </ariaComponents.Button>
+    </Button>
   )
 }
 
@@ -192,13 +185,13 @@ function ResendInvitationButton(props: ResendInvitationButtonProps) {
 /** Props for a {@link RemoveMemberButton}. */
 interface RemoveMemberButtonProps {
   readonly backend: RemoteBackend
-  readonly userId: backendModule.UserId
+  readonly userId: UserId
 }
 
 /** Action button for removing a member. */
 function RemoveMemberButton(props: RemoveMemberButtonProps) {
   const { backend, userId } = props
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
 
   const removeMutation = useMutation(
     backendMutationOptions(backend, 'removeUser', {
@@ -208,13 +201,9 @@ function RemoveMemberButton(props: RemoveMemberButtonProps) {
   )
 
   return (
-    <ariaComponents.Button
-      variant="icon"
-      size="custom"
-      onPress={() => removeMutation.mutateAsync([userId])}
-    >
+    <Button variant="icon" size="custom" onPress={() => removeMutation.mutateAsync([userId])}>
       {getText('remove')}
-    </ariaComponents.Button>
+    </Button>
   )
 }
 
@@ -225,14 +214,14 @@ function RemoveMemberButton(props: RemoveMemberButtonProps) {
 /** Props for a {@link RemoveInvitationButton}. */
 interface RemoveInvitationButtonProps {
   readonly backend: RemoteBackend
-  readonly email: backendModule.EmailAddress
+  readonly email: EmailAddress
 }
 
 /** Action button for removing an invitation. */
 function RemoveInvitationButton(props: RemoveInvitationButtonProps) {
   const { backend, email } = props
 
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
 
   const removeMutation = useMutation(
     backendMutationOptions(backend, 'deleteInvitation', {
@@ -242,13 +231,13 @@ function RemoveInvitationButton(props: RemoveInvitationButtonProps) {
   )
 
   return (
-    <ariaComponents.Button
+    <Button
       variant="icon"
       size="custom"
       loading={removeMutation.isPending}
       onPress={() => removeMutation.mutateAsync([email])}
     >
       {getText('remove')}
-    </ariaComponents.Button>
+    </Button>
   )
 }
diff --git a/app/gui/src/dashboard/layouts/Settings/MembersTable.tsx b/app/gui/src/dashboard/layouts/Settings/MembersTable.tsx
index 012c05ab352a..c698f4f64bf3 100644
--- a/app/gui/src/dashboard/layouts/Settings/MembersTable.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/MembersTable.tsx
@@ -1,6 +1,9 @@
 /** @file A list of members in the organization. */
 import { useEffect, useMemo, useRef, useState } from 'react'
 
+import type Backend from 'enso-common/src/services/Backend'
+import { UserId, type User } from 'enso-common/src/services/Backend'
+
 import {
   Column,
   Table,
@@ -16,8 +19,6 @@ import { useStickyTableHeaderOnScroll } from '#/hooks/scrollHooks'
 import { useToastAndLog } from '#/hooks/toastAndLogHooks'
 import { useFullUserSession } from '#/providers/AuthProvider'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import { UserId, type User } from '#/services/Backend'
 import { twMerge } from '#/utilities/tailwindMerge'
 import UserRow from './UserRow'
 
diff --git a/app/gui/src/dashboard/layouts/Settings/OrganizationProfilePictureInput.tsx b/app/gui/src/dashboard/layouts/Settings/OrganizationProfilePictureInput.tsx
index d94d8a81407f..89fc4b7bf455 100644
--- a/app/gui/src/dashboard/layouts/Settings/OrganizationProfilePictureInput.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/OrganizationProfilePictureInput.tsx
@@ -1,23 +1,16 @@
 /** @file The input for viewing and changing the organization's profile picture. */
-import * as React from 'react'
+import type { ChangeEvent } from 'react'
+
+import type Backend from 'enso-common/src/services/Backend'
 
 import { useMutation } from '@tanstack/react-query'
 
 import DefaultUserIcon from '#/assets/default_user.svg'
-
-import { backendMutationOptions, useBackendQuery } from '#/hooks/backendHooks'
-import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
-
-import * as textProvider from '#/providers/TextProvider'
-
-import * as aria from '#/components/aria'
+import { Input, Label, Text } from '#/components/aria'
 import FocusRing from '#/components/styled/FocusRing'
-
-import type Backend from '#/services/Backend'
-
-// =======================================
-// === OrganizationProfilePictureInput ===
-// =======================================
+import { backendMutationOptions, useBackendQuery } from '#/hooks/backendHooks'
+import { useToastAndLog } from '#/hooks/toastAndLogHooks'
+import { useText } from '#/providers/TextProvider'
 
 /** Props for a {@link OrganizationProfilePictureInput}. */
 export interface OrganizationProfilePictureInputProps {
@@ -29,15 +22,15 @@ export default function OrganizationProfilePictureInput(
   props: OrganizationProfilePictureInputProps,
 ) {
   const { backend } = props
-  const toastAndLog = toastAndLogHooks.useToastAndLog()
-  const { getText } = textProvider.useText()
+  const toastAndLog = useToastAndLog()
+  const { getText } = useText()
   const { data: organization } = useBackendQuery(backend, 'getOrganization', [])
 
   const uploadOrganizationPicture = useMutation(
     backendMutationOptions(backend, 'uploadOrganizationPicture'),
   ).mutate
 
-  const doUploadOrganizationPicture = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const doUploadOrganizationPicture = (event: ChangeEvent<HTMLInputElement>) => {
     const image = event.target.files?.[0]
     if (image == null) {
       toastAndLog('noNewProfilePictureError')
@@ -52,7 +45,7 @@ export default function OrganizationProfilePictureInput(
   return (
     <>
       <FocusRing within>
-        <aria.Label
+        <Label
           data-testid="organization-profile-picture-input"
           className="flex h-profile-picture-large w-profile-picture-large cursor-pointer items-center overflow-clip rounded-full transition-colors hover:bg-frame"
         >
@@ -60,17 +53,17 @@ export default function OrganizationProfilePictureInput(
             src={organization?.picture ?? DefaultUserIcon}
             className="pointer-events-none h-full w-full"
           />
-          <aria.Input
+          <Input
             type="file"
             className="focus-child w-0"
             accept="image/*"
             onChange={doUploadOrganizationPicture}
           />
-        </aria.Label>
+        </Label>
       </FocusRing>
-      <aria.Text className="w-profile-picture-caption py-profile-picture-caption-y">
+      <Text className="w-profile-picture-caption py-profile-picture-caption-y">
         {getText('organizationProfilePictureWarning')}
-      </aria.Text>
+      </Text>
     </>
   )
 }
diff --git a/app/gui/src/dashboard/layouts/Settings/ProfilePictureInput.tsx b/app/gui/src/dashboard/layouts/Settings/ProfilePictureInput.tsx
index 2ed6b0cf9d82..f928a8a32bd4 100644
--- a/app/gui/src/dashboard/layouts/Settings/ProfilePictureInput.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/ProfilePictureInput.tsx
@@ -1,23 +1,16 @@
 /** @file The input for viewing and changing the user's profile picture. */
-import * as React from 'react'
+import { ChangeEvent } from 'react'
+
+import type Backend from 'enso-common/src/services/Backend'
 
 import { useMutation } from '@tanstack/react-query'
 
 import DefaultUserIcon from '#/assets/default_user.svg'
-
-import { backendMutationOptions, useBackendQuery } from '#/hooks/backendHooks'
-import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
-
-import * as textProvider from '#/providers/TextProvider'
-
-import * as aria from '#/components/aria'
+import { Input, Label, Text } from '#/components/aria'
 import FocusRing from '#/components/styled/FocusRing'
-
-import type Backend from '#/services/Backend'
-
-// ===========================
-// === ProfilePictureInput ===
-// ===========================
+import { backendMutationOptions, useBackendQuery } from '#/hooks/backendHooks'
+import { useToastAndLog } from '#/hooks/toastAndLogHooks'
+import { useText } from '#/providers/TextProvider'
 
 /** Props for a {@link ProfilePictureInput}. */
 export interface ProfilePictureInputProps {
@@ -27,13 +20,13 @@ export interface ProfilePictureInputProps {
 /** The input for viewing and changing the user's profile picture. */
 export default function ProfilePictureInput(props: ProfilePictureInputProps) {
   const { backend } = props
-  const toastAndLog = toastAndLogHooks.useToastAndLog()
+  const toastAndLog = useToastAndLog()
   const { data: user } = useBackendQuery(backend, 'usersMe', [])
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
 
   const uploadUserPicture = useMutation(backendMutationOptions(backend, 'uploadUserPicture')).mutate
 
-  const doUploadUserPicture = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const doUploadUserPicture = (event: ChangeEvent<HTMLInputElement>) => {
     const image = event.target.files?.[0]
     if (image == null) {
       toastAndLog('noNewProfilePictureError')
@@ -48,7 +41,7 @@ export default function ProfilePictureInput(props: ProfilePictureInputProps) {
   return (
     <>
       <FocusRing within>
-        <aria.Label
+        <Label
           data-testid="user-profile-picture-input"
           className="flex h-profile-picture-large w-profile-picture-large cursor-pointer items-center overflow-clip rounded-full transition-colors hover:bg-frame"
         >
@@ -56,17 +49,17 @@ export default function ProfilePictureInput(props: ProfilePictureInputProps) {
             src={user?.profilePicture ?? DefaultUserIcon}
             className="pointer-events-none h-full w-full"
           />
-          <aria.Input
+          <Input
             type="file"
             className="focus-child w-0"
             accept="image/*"
             onChange={doUploadUserPicture}
           />
-        </aria.Label>
+        </Label>
       </FocusRing>
-      <aria.Text className="w-profile-picture-caption py-profile-picture-caption-y">
+      <Text className="w-profile-picture-caption py-profile-picture-caption-y">
         {getText('profilePictureWarning')}
-      </aria.Text>
+      </Text>
     </>
   )
 }
diff --git a/app/gui/src/dashboard/layouts/Settings/UserGroupRow.tsx b/app/gui/src/dashboard/layouts/Settings/UserGroupRow.tsx
index b27c0eb75f18..9d33d4a4bab8 100644
--- a/app/gui/src/dashboard/layouts/Settings/UserGroupRow.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/UserGroupRow.tsx
@@ -1,39 +1,30 @@
 /** @file A row representing a user group. */
-import Cross2 from '#/assets/cross2.svg'
-
-import * as contextMenuHooks from '#/hooks/contextMenuHooks'
+import type { UserGroupInfo } from 'enso-common/src/services/Backend'
 
-import * as modalProvider from '#/providers/ModalProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import * as aria from '#/components/aria'
-import * as ariaComponents from '#/components/AriaComponents'
+import Cross2 from '#/assets/cross2.svg'
+import { Cell, Row } from '#/components/aria'
+import { Button, DialogTrigger, Text } from '#/components/AriaComponents'
 import ContextMenuEntry from '#/components/ContextMenuEntry'
-
+import { useContextMenuRef } from '#/hooks/contextMenuHooks'
 import ConfirmDeleteModal from '#/modals/ConfirmDeleteModal'
-
-import type * as backend from '#/services/Backend'
-
 import { useFullUserSession } from '#/providers/AuthProvider'
-
-// ====================
-// === UserGroupRow ===
-// ====================
+import { useSetModal } from '#/providers/ModalProvider'
+import { useText } from '#/providers/TextProvider'
 
 /** Props for a {@link UserGroupRow}. */
 export interface UserGroupRowProps {
-  readonly userGroup: backend.UserGroupInfo
-  readonly doDeleteUserGroup: (userGroup: backend.UserGroupInfo) => void
+  readonly userGroup: UserGroupInfo
+  readonly doDeleteUserGroup: (userGroup: UserGroupInfo) => void
 }
 
 /** A row representing a user group. */
 export default function UserGroupRow(props: UserGroupRowProps) {
   const { userGroup, doDeleteUserGroup } = props
   const { user } = useFullUserSession()
-  const { setModal } = modalProvider.useSetModal()
-  const { getText } = textProvider.useText()
+  const { setModal } = useSetModal()
+  const { getText } = useText()
   const isAdmin = user.isOrganizationAdmin
-  const contextMenuRef = contextMenuHooks.useContextMenuRef(
+  const contextMenuRef = useContextMenuRef(
     getText('userGroupContextMenuLabel'),
     () => (
       <ContextMenuEntry
@@ -55,37 +46,37 @@ export default function UserGroupRow(props: UserGroupRowProps) {
   )
 
   return (
-    <aria.Row
+    <Row
       id={userGroup.id}
       className="group h-row select-none rounded-rows-child"
       ref={contextMenuRef}
     >
-      <aria.Cell className="rounded-r-full border-x-2 border-transparent bg-clip-padding px-cell-x first:rounded-l-full last:border-r-0">
+      <Cell className="rounded-r-full border-x-2 border-transparent bg-clip-padding px-cell-x first:rounded-l-full last:border-r-0">
         <div className="flex justify-center">
-          <ariaComponents.Text nowrap truncate="1" weight="semibold">
+          <Text nowrap truncate="1" weight="semibold">
             {userGroup.groupName}
-          </ariaComponents.Text>
+          </Text>
         </div>
-      </aria.Cell>
-      <aria.Cell className="relative bg-transparent p-0 opacity-0 group-hover-2:opacity-100">
+      </Cell>
+      <Cell className="relative bg-transparent p-0 opacity-0 group-hover-2:opacity-100">
         {isAdmin && (
-          <ariaComponents.DialogTrigger>
-            <ariaComponents.Button
+          <DialogTrigger>
+            <Button
               size="custom"
               variant="custom"
               className="absolute right-full mr-4 size-4 -translate-y-1/2"
             >
               <img src={Cross2} className="size-4" />
-            </ariaComponents.Button>
+            </Button>
             <ConfirmDeleteModal
               actionText={getText('deleteUserGroupActionText', userGroup.groupName)}
               doDelete={() => {
                 doDeleteUserGroup(userGroup)
               }}
             />
-          </ariaComponents.DialogTrigger>
+          </DialogTrigger>
         )}
-      </aria.Cell>
-    </aria.Row>
+      </Cell>
+    </Row>
   )
 }
diff --git a/app/gui/src/dashboard/layouts/Settings/UserGroupUserRow.tsx b/app/gui/src/dashboard/layouts/Settings/UserGroupUserRow.tsx
index a469b777cdf1..189aca1a446c 100644
--- a/app/gui/src/dashboard/layouts/Settings/UserGroupUserRow.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/UserGroupUserRow.tsx
@@ -1,40 +1,31 @@
 /** @file A row of the user groups table representing a user. */
-import Cross2 from '#/assets/cross2.svg'
-
-import * as contextMenuHooks from '#/hooks/contextMenuHooks'
+import type { User, UserGroupInfo } from 'enso-common/src/services/Backend'
 
-import * as modalProvider from '#/providers/ModalProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import * as aria from '#/components/aria'
-import * as ariaComponents from '#/components/AriaComponents'
+import Cross2 from '#/assets/cross2.svg'
+import { Cell, Row } from '#/components/aria'
+import { Button, DialogTrigger, Text } from '#/components/AriaComponents'
 import ContextMenuEntry from '#/components/ContextMenuEntry'
-
+import { useContextMenuRef } from '#/hooks/contextMenuHooks'
 import ConfirmDeleteModal from '#/modals/ConfirmDeleteModal'
-
-import type * as backend from '#/services/Backend'
-
 import { useFullUserSession } from '#/providers/AuthProvider'
-
-// ========================
-// === UserGroupUserRow ===
-// ========================
+import { useSetModal } from '#/providers/ModalProvider'
+import { useText } from '#/providers/TextProvider'
 
 /** Props for a {@link UserGroupUserRow}. */
 export interface UserGroupUserRowProps {
-  readonly user: backend.User
-  readonly userGroup: backend.UserGroupInfo
-  readonly doRemoveUserFromUserGroup: (user: backend.User, userGroup: backend.UserGroupInfo) => void
+  readonly user: User
+  readonly userGroup: UserGroupInfo
+  readonly doRemoveUserFromUserGroup: (user: User, userGroup: UserGroupInfo) => void
 }
 
 /** A row of the user groups table representing a user. */
 export default function UserGroupUserRow(props: UserGroupUserRowProps) {
   const { user, userGroup, doRemoveUserFromUserGroup } = props
   const { user: currentUser } = useFullUserSession()
-  const { setModal } = modalProvider.useSetModal()
-  const { getText } = textProvider.useText()
+  const { setModal } = useSetModal()
+  const { getText } = useText()
   const isAdmin = currentUser.isOrganizationAdmin
-  const contextMenuRef = contextMenuHooks.useContextMenuRef(
+  const contextMenuRef = useContextMenuRef(
     getText('userGroupUserContextMenuLabel'),
     () => (
       <ContextMenuEntry
@@ -60,28 +51,28 @@ export default function UserGroupUserRow(props: UserGroupUserRowProps) {
   )
 
   return (
-    <aria.Row
+    <Row
       id={`_key-${userGroup.id}-${user.userId}`}
       className="group h-row select-none rounded-rows-child"
       ref={contextMenuRef}
     >
-      <aria.Cell className="border-x-2 border-transparent bg-clip-padding py-0 rounded-rows-skip-level last:border-r-0">
+      <Cell className="border-x-2 border-transparent bg-clip-padding py-0 rounded-rows-skip-level last:border-r-0">
         <div className="ml-6 flex h-row items-center justify-center rounded-full px-cell-x">
-          <ariaComponents.Text nowrap truncate="1" weight="semibold">
+          <Text nowrap truncate="1" weight="semibold">
             {user.name}
-          </ariaComponents.Text>
+          </Text>
         </div>
-      </aria.Cell>
-      <aria.Cell className="relative bg-transparent p-0 opacity-0 rounded-rows-have-level group-hover-2:opacity-100">
+      </Cell>
+      <Cell className="relative bg-transparent p-0 opacity-0 rounded-rows-have-level group-hover-2:opacity-100">
         {isAdmin && (
-          <ariaComponents.DialogTrigger>
-            <ariaComponents.Button
+          <DialogTrigger>
+            <Button
               size="custom"
               variant="custom"
               className="absolute right-full mr-4 size-4 -translate-y-1/2"
             >
               <img src={Cross2} className="size-4" />
-            </ariaComponents.Button>
+            </Button>
             <ConfirmDeleteModal
               actionText={getText(
                 'removeUserFromUserGroupActionText',
@@ -93,9 +84,9 @@ export default function UserGroupUserRow(props: UserGroupUserRowProps) {
                 doRemoveUserFromUserGroup(user, userGroup)
               }}
             />
-          </ariaComponents.DialogTrigger>
+          </DialogTrigger>
         )}
-      </aria.Cell>
-    </aria.Row>
+      </Cell>
+    </Row>
   )
 }
diff --git a/app/gui/src/dashboard/layouts/Settings/UserGroupsSettingsSection.tsx b/app/gui/src/dashboard/layouts/Settings/UserGroupsSettingsSection.tsx
index 10ef6e593481..cc02269875d8 100644
--- a/app/gui/src/dashboard/layouts/Settings/UserGroupsSettingsSection.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/UserGroupsSettingsSection.tsx
@@ -3,6 +3,14 @@ import { useMemo, useRef } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
+import type Backend from 'enso-common/src/services/Backend'
+import {
+  isPlaceholderUserGroupId,
+  isUserGroupId,
+  type User,
+  type UserGroupInfo,
+} from 'enso-common/src/services/Backend'
+
 import { Cell, Column, Row, Table, TableBody, TableHeader, useDragAndDrop } from '#/components/aria'
 import { Button, ButtonGroup } from '#/components/AriaComponents'
 import { PaywallDialogButton } from '#/components/Paywall'
@@ -20,21 +28,10 @@ import NewUserGroupModal from '#/modals/NewUserGroupModal'
 import { useFullUserSession } from '#/providers/AuthProvider'
 import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import {
-  isPlaceholderUserGroupId,
-  isUserGroupId,
-  type User,
-  type UserGroupInfo,
-} from '#/services/Backend'
 import { twMerge } from '#/utilities/tailwindMerge'
 import UserGroupRow from './UserGroupRow'
 import UserGroupUserRow from './UserGroupUserRow'
 
-// =================================
-// === UserGroupsSettingsSection ===
-// =================================
-
 /** Props for a {@link UserGroupsSettingsSection}. */
 export interface UserGroupsSettingsSectionProps {
   readonly backend: Backend
diff --git a/app/gui/src/dashboard/layouts/Settings/UserRow.tsx b/app/gui/src/dashboard/layouts/Settings/UserRow.tsx
index d1877e1d0a53..4c139bba67b0 100644
--- a/app/gui/src/dashboard/layouts/Settings/UserRow.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/UserRow.tsx
@@ -1,45 +1,36 @@
 /** @file A row representing a user in a table of users. */
-import Cross2 from '#/assets/cross2.svg'
-
-import * as contextMenuHooks from '#/hooks/contextMenuHooks'
+import type { User } from 'enso-common/src/services/Backend'
 
-import * as authProvider from '#/providers/AuthProvider'
-import * as modalProvider from '#/providers/ModalProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import * as aria from '#/components/aria'
-import * as ariaComponents from '#/components/AriaComponents'
+import Cross2 from '#/assets/cross2.svg'
+import { Button as AriaButton, Cell, FocusRing, Row } from '#/components/aria'
+import { Button, DialogTrigger, Text } from '#/components/AriaComponents'
 import ContextMenuEntry from '#/components/ContextMenuEntry'
-
+import { useContextMenuRef } from '#/hooks/contextMenuHooks'
 import ConfirmDeleteModal from '#/modals/ConfirmDeleteModal'
-
-import type * as backend from '#/services/Backend'
-
-import * as tailwindMerge from '#/utilities/tailwindMerge'
-
-// ===============
-// === UserRow ===
-// ===============
+import { useFullUserSession } from '#/providers/AuthProvider'
+import { useSetModal } from '#/providers/ModalProvider'
+import { useText } from '#/providers/TextProvider'
+import { twMerge } from '#/utilities/tailwindMerge'
 
 /** Props for a {@link UserRow}. */
 export interface UserRowProps {
   readonly id: string
   readonly draggable?: boolean
-  readonly user: backend.User
-  readonly doDeleteUser?: ((user: backend.User) => void) | null
+  readonly user: User
+  readonly doDeleteUser?: ((user: User) => void) | null
 }
 
 /** A row representing a user in a table of users. */
 export default function UserRow(props: UserRowProps) {
   const { draggable = false, user, doDeleteUser: doDeleteUserRaw } = props
-  const { user: self } = authProvider.useFullUserSession()
-  const { setModal } = modalProvider.useSetModal()
-  const { getText } = textProvider.useText()
+  const { user: self } = useFullUserSession()
+  const { setModal } = useSetModal()
+  const { getText } = useText()
   const isAdmin = self.isOrganizationAdmin
   const isSelf = user.userId === self.userId
   const doDeleteUser = isSelf ? null : doDeleteUserRaw
 
-  const contextMenuRef = contextMenuHooks.useContextMenuRef(
+  const contextMenuRef = useContextMenuRef(
     getText('userContextMenuLabel'),
     () =>
       doDeleteUser == null ? null : (
@@ -62,57 +53,54 @@ export default function UserRow(props: UserRowProps) {
   )
 
   return (
-    <aria.Row
+    <Row
       id={user.userId}
-      className={tailwindMerge.twMerge(
-        'group h-row rounded-rows-child',
-        draggable && 'cursor-grab',
-      )}
+      className={twMerge('group h-row rounded-rows-child', draggable && 'cursor-grab')}
       ref={contextMenuRef}
     >
-      <aria.Cell className="text relative overflow-hidden whitespace-nowrap border-x-2 border-transparent bg-clip-padding px-cell-x first:rounded-l-full last:rounded-r-full last:border-r-0 group-selected:bg-selected-frame">
+      <Cell className="text relative overflow-hidden whitespace-nowrap border-x-2 border-transparent bg-clip-padding px-cell-x first:rounded-l-full last:rounded-r-full last:border-r-0 group-selected:bg-selected-frame">
         {draggable && (
-          <aria.FocusRing>
-            <aria.Button
+          <FocusRing>
+            <AriaButton
               slot="drag"
               className="absolute left top-1/2 ml-1 h-2 w-2 -translate-y-1/2 rounded-sm"
             />
-          </aria.FocusRing>
+          </FocusRing>
         )}
 
         <div className="flex justify-center">
-          <ariaComponents.Text nowrap truncate="1" weight="semibold">
+          <Text nowrap truncate="1" weight="semibold">
             {user.name}
-          </ariaComponents.Text>
+          </Text>
         </div>
-      </aria.Cell>
-      <aria.Cell className="text whitespace-nowrap rounded-r-full border-x-2 border-transparent bg-clip-padding px-cell-x first:rounded-l-full last:border-r-0 group-selected:bg-selected-frame">
-        <ariaComponents.Text nowrap truncate="1" className="block">
+      </Cell>
+      <Cell className="text whitespace-nowrap rounded-r-full border-x-2 border-transparent bg-clip-padding px-cell-x first:rounded-l-full last:border-r-0 group-selected:bg-selected-frame">
+        <Text nowrap truncate="1" className="block">
           {user.email}
-        </ariaComponents.Text>
-      </aria.Cell>
+        </Text>
+      </Cell>
       {doDeleteUserRaw == null ?
         null
       : doDeleteUser == null ?
         <></>
-      : <aria.Cell className="relative bg-transparent p-0 opacity-0 group-hover-2:opacity-100">
-          <ariaComponents.DialogTrigger>
-            <ariaComponents.Button
+      : <Cell className="relative bg-transparent p-0 opacity-0 group-hover-2:opacity-100">
+          <DialogTrigger>
+            <Button
               size="custom"
               variant="custom"
               className="absolute right-full mr-4 size-4 -translate-y-1/2"
             >
               <img src={Cross2} className="size-4" />
-            </ariaComponents.Button>
+            </Button>
             <ConfirmDeleteModal
               actionText={getText('deleteUserActionText', user.name)}
               doDelete={() => {
                 doDeleteUser(user)
               }}
             />
-          </ariaComponents.DialogTrigger>
-        </aria.Cell>
+          </DialogTrigger>
+        </Cell>
       }
-    </aria.Row>
+    </Row>
   )
 }
diff --git a/app/gui/src/dashboard/layouts/Settings/data.tsx b/app/gui/src/dashboard/layouts/Settings/data.tsx
index 9d1fed132b46..0728ea3d846f 100644
--- a/app/gui/src/dashboard/layouts/Settings/data.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/data.tsx
@@ -4,7 +4,17 @@ import type { HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactNode
 import type { QueryClient } from '@tanstack/react-query'
 import * as z from 'zod'
 
+import type Backend from 'enso-common/src/services/Backend'
+import {
+  EmailAddress,
+  HttpsUrl,
+  isUserOnPlanWithOrganization,
+  type OrganizationInfo,
+  type User,
+} from 'enso-common/src/services/Backend'
 import type { TextId } from 'enso-common/src/text'
+import { normalizePath } from 'enso-common/src/utilities/data/fileInfo'
+import { pick, unsafeEntries } from 'enso-common/src/utilities/data/object'
 
 import ComputerIcon from '#/assets/computer.svg'
 import CreditCardIcon from '#/assets/credit_card.svg'
@@ -20,18 +30,8 @@ import type { PaywallFeatureName } from '#/hooks/billing'
 import type { ToastAndLogCallback } from '#/hooks/toastAndLogHooks'
 import { passwordWithPatternSchema } from '#/pages/authentication/schemas'
 import type { GetText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import {
-  EmailAddress,
-  HttpsUrl,
-  isUserOnPlanWithOrganization,
-  type OrganizationInfo,
-  type User,
-} from '#/services/Backend'
 import type LocalBackend from '#/services/LocalBackend'
 import type RemoteBackend from '#/services/RemoteBackend'
-import { normalizePath } from '#/utilities/fileInfo'
-import { pick, unsafeEntries } from '#/utilities/object'
 import { PASSWORD_REGEX } from '#/utilities/validation'
 import ActivityLogSettingsSection from './ActivityLogSettingsSection'
 import DeleteUserAccountSettingsSection from './DeleteUserAccountSettingsSection'
@@ -44,14 +44,6 @@ import { SetupTwoFaForm } from './SetupTwoFaForm'
 import SettingsTabType from './TabType'
 import UserGroupsSettingsSection from './UserGroupsSettingsSection'
 
-// =========================
-// === SettingsEntryType ===
-// =========================
-
-// =================
-// === Constants ===
-// =================
-
 export const SETTINGS_NO_RESULTS_SECTION_DATA: SettingsSectionData = {
   nameId: 'noResultsSettingsSection',
   heading: false,
diff --git a/app/gui/src/dashboard/layouts/Settings/index.tsx b/app/gui/src/dashboard/layouts/Settings/index.tsx
index 32650c6e68a5..02801b231851 100644
--- a/app/gui/src/dashboard/layouts/Settings/index.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/index.tsx
@@ -3,6 +3,10 @@ import * as React from 'react'
 
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import type Backend from 'enso-common/src/services/Backend'
+import { includesPredicate } from 'enso-common/src/utilities/data/array'
+import { regexEscape } from 'enso-common/src/utilities/data/string'
+
 import BurgerMenuIcon from '#/assets/burger_menu.svg'
 import { Heading, MenuTrigger } from '#/components/aria'
 import { Button, Popover, Text } from '#/components/AriaComponents'
@@ -16,10 +20,7 @@ import { useAuth, useFullUserSession } from '#/providers/AuthProvider'
 import { useLocalBackend, useRemoteBackend } from '#/providers/BackendProvider'
 import { useLocalStorageState } from '#/providers/LocalStorageProvider'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
 import { Path } from '#/services/ProjectManager'
-import { includesPredicate } from '#/utilities/array'
-import { regexEscape } from '#/utilities/string'
 import {
   ALL_SETTINGS_TABS,
   SETTINGS_DATA,
@@ -33,10 +34,6 @@ import SettingsSidebar from './Sidebar'
 import SettingsTab from './Tab'
 import SettingsTabType from './TabType'
 
-// ================
-// === Settings ===
-// ================
-
 /** Props for a {@link Settings}. */
 export interface SettingsProps {
   readonly backend: Backend | null
diff --git a/app/gui/src/dashboard/layouts/TabBar.tsx b/app/gui/src/dashboard/layouts/TabBar.tsx
index 422b3977db2e..a28060068f16 100644
--- a/app/gui/src/dashboard/layouts/TabBar.tsx
+++ b/app/gui/src/dashboard/layouts/TabBar.tsx
@@ -1,31 +1,28 @@
 /** @file Switcher to choose the currently visible full-screen page. */
-import * as React from 'react'
+import { useEffect, useMemo, useRef, type PropsWithChildren, type ReactNode } from 'react'
 
-import * as reactQuery from '@tanstack/react-query'
-
-import type * as text from 'enso-common/src/text'
+import { useQuery } from '@tanstack/react-query'
+import { motion } from 'framer-motion'
 
-import * as projectHooks from '#/hooks/projectHooks'
+import { ProjectState } from 'enso-common/src/services/Backend'
+import type { TextId } from 'enso-common/src/text'
 
-import type { LaunchedProject } from '#/providers/ProjectsProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import * as aria from '#/components/aria'
-import * as ariaComponents from '#/components/AriaComponents'
+import { AnimatedBackground } from '#/components/AnimatedBackground'
+import { Tab as AriaTab, TabList, type TabListProps } from '#/components/aria'
+import { CloseButton, Text } from '#/components/AriaComponents'
 import { StatelessSpinner } from '#/components/StatelessSpinner'
 import SvgMask from '#/components/SvgMask'
-
-import { AnimatedBackground } from '#/components/AnimatedBackground'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import { createGetProjectDetailsQuery } from '#/hooks/projectHooks'
 import { useBackendForProjectType } from '#/providers/BackendProvider'
 import { useInputBindings } from '#/providers/InputBindingsProvider'
-import { ProjectState } from '#/services/Backend'
-import * as sanitizedEventTargets from '#/utilities/sanitizedEventTargets'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
-import { motion } from 'framer-motion'
+import type { LaunchedProject } from '#/providers/ProjectsProvider'
+import { useText } from '#/providers/TextProvider'
+import { document } from '#/utilities/sanitizedEventTargets'
+import { twJoin } from '#/utilities/tailwindMerge'
 
 /** Props for a {@link TabBar}. */
-export interface TabBarProps<T extends object> extends aria.TabListProps<T> {
+export interface TabBarProps<T extends object> extends TabListProps<T> {
   readonly className?: string
 }
 
@@ -33,29 +30,25 @@ export interface TabBarProps<T extends object> extends aria.TabListProps<T> {
 export default function TabBar<T extends object>(props: TabBarProps<T>) {
   const { className, ...rest } = props
 
-  const classes = React.useMemo(() => tailwindMerge.twJoin('flex grow', className), [className])
+  const classes = useMemo(() => twJoin('flex grow', className), [className])
 
   return (
     <AnimatedBackground>
       <div className={classes}>
-        <aria.TabList<T> className="flex h-12 shrink-0 grow" {...rest} />
+        <TabList<T> className="flex h-12 shrink-0 grow" {...rest} />
       </div>
     </AnimatedBackground>
   )
 }
 
-// ===========
-// === Tab ===
-// ===========
-
 /** Props for a {@link Tab}. */
-export interface TabProps extends Readonly<React.PropsWithChildren> {
+export interface TabProps extends Readonly<PropsWithChildren> {
   readonly 'data-testid'?: string
   readonly id: string
   readonly isActive: boolean
   readonly isHidden?: boolean
-  readonly icon: React.ReactNode | string | null
-  readonly labelId: text.TextId
+  readonly icon: ReactNode | string | null
+  readonly labelId: TextId
   readonly onClose?: () => void
 }
 
@@ -70,27 +63,27 @@ const UNDERLAY_ELEMENT = (
 /** A tab in a {@link TabBar}. */
 export function Tab(props: TabProps) {
   const { id, isActive, isHidden = false, icon, labelId, children, onClose } = props
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
   const inputBindings = useInputBindings()
 
   const stableOnClose = useEventCallback(() => {
     onClose?.()
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isActive) {
-      return inputBindings.attach(sanitizedEventTargets.document.body, 'keydown', {
+      return inputBindings.attach(document.body, 'keydown', {
         closeTab: stableOnClose,
       })
     }
   }, [inputBindings, isActive, stableOnClose])
 
   return (
-    <aria.Tab
+    <AriaTab
       data-testid={props['data-testid']}
       id={id}
       aria-label={getText(labelId)}
-      className={tailwindMerge.twJoin(
+      className={twJoin(
         'disabled:cursor-not-allowed disabled:opacity-30 [&.disabled]:cursor-not-allowed [&.disabled]:opacity-30',
         !isActive && 'cursor-pointer',
         isHidden && 'hidden',
@@ -113,31 +106,27 @@ export function Tab(props: TabProps) {
             {typeof icon === 'string' ?
               <SvgMask
                 src={icon}
-                className={tailwindMerge.twJoin(
-                  onClose && 'group-hover:hidden focus-visible:hidden',
-                )}
+                className={twJoin(onClose && 'group-hover:hidden focus-visible:hidden')}
               />
             : icon}
 
-            <ariaComponents.Text truncate="1" className="max-w-40">
+            <Text truncate="1" className="max-w-40">
               {children}
-            </ariaComponents.Text>
+            </Text>
 
             {onClose && (
               <div className="relative">
-                <ariaComponents.CloseButton onPress={onClose} />
+                <CloseButton onPress={onClose} />
               </div>
             )}
           </div>
         </AnimatedBackground.Item>
       )}
-    </aria.Tab>
+    </AriaTab>
   )
 }
 
-/**
- * Props for a {@link ProjectTab}.
- */
+/** Props for a {@link ProjectTab}. */
 export interface ProjectTabProps extends Omit<TabProps, 'onClose'> {
   readonly project: LaunchedProject
   readonly onLoadEnd?: (project: LaunchedProject) => void
@@ -146,13 +135,11 @@ export interface ProjectTabProps extends Omit<TabProps, 'onClose'> {
 
 const SPINNER = <StatelessSpinner state="loading-medium" size={16} />
 
-/**
- * Project Tab is a {@link Tab} that displays the name of the project.
- */
+/** Project Tab is a {@link Tab} that displays the name of the project. */
 export function ProjectTab(props: ProjectTabProps) {
   const { project, onLoadEnd, onClose, icon: iconRaw, ...rest } = props
 
-  const didNotifyOnLoadEnd = React.useRef(false)
+  const didNotifyOnLoadEnd = useRef(false)
   const backend = useBackendForProjectType(project.type)
 
   const stableOnLoadEnd = useEventCallback(() => {
@@ -163,8 +150,8 @@ export function ProjectTab(props: ProjectTabProps) {
     onClose?.(project)
   })
 
-  const { data: isOpened, isSuccess } = reactQuery.useQuery({
-    ...projectHooks.createGetProjectDetailsQuery({
+  const { data: isOpened, isSuccess } = useQuery({
+    ...createGetProjectDetailsQuery({
       assetId: project.id,
       parentId: project.parentId,
       backend,
@@ -174,14 +161,14 @@ export function ProjectTab(props: ProjectTabProps) {
 
   const isReady = isSuccess && isOpened
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isReady && !didNotifyOnLoadEnd.current) {
       didNotifyOnLoadEnd.current = true
       stableOnLoadEnd()
     }
   }, [isReady, stableOnLoadEnd])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isReady) {
       didNotifyOnLoadEnd.current = false
     }
diff --git a/app/gui/src/dashboard/layouts/UserBar.tsx b/app/gui/src/dashboard/layouts/UserBar.tsx
index 1fc32609c4ae..81d20e852cb7 100644
--- a/app/gui/src/dashboard/layouts/UserBar.tsx
+++ b/app/gui/src/dashboard/layouts/UserBar.tsx
@@ -1,4 +1,6 @@
 /** @file A toolbar containing chat and the user menu. */
+import { Plan } from 'enso-common/src/services/Backend'
+
 import { SUBSCRIBE_PATH } from '#/appUtils'
 import ChatIcon from '#/assets/chat.svg'
 import DefaultUserIcon from '#/assets/default_user.svg'
@@ -10,7 +12,6 @@ import UserMenu from '#/layouts/UserMenu'
 import InviteUsersModal from '#/modals/InviteUsersModal'
 import { useFullUserSession } from '#/providers/AuthProvider'
 import { useText } from '#/providers/TextProvider'
-import { Plan } from '#/services/Backend'
 
 /** Whether the chat button should be visible. Temporarily disabled. */
 const SHOULD_SHOW_CHAT_BUTTON: boolean = false
diff --git a/app/gui/src/dashboard/layouts/UserMenu.tsx b/app/gui/src/dashboard/layouts/UserMenu.tsx
index 1057a0d00226..abd76a2cbf26 100644
--- a/app/gui/src/dashboard/layouts/UserMenu.tsx
+++ b/app/gui/src/dashboard/layouts/UserMenu.tsx
@@ -1,4 +1,8 @@
 /** @file A dropdown menu of user actions and settings. */
+import { Plan } from 'enso-common/src/services/Backend'
+import { download } from 'enso-common/src/utilities/download'
+import { getDownloadUrl } from 'enso-common/src/utilities/github'
+
 import DefaultUserIcon from '#/assets/default_user.svg'
 import { Popover, Text } from '#/components/AriaComponents'
 import MenuEntry from '#/components/MenuEntry'
@@ -9,9 +13,6 @@ import { useAuth, useFullUserSession } from '#/providers/AuthProvider'
 import { useLocalBackend } from '#/providers/BackendProvider'
 import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
-import { Plan } from '#/services/Backend'
-import { download } from '#/utilities/download'
-import { getDownloadUrl } from '#/utilities/github'
 
 /** Props for a {@link UserMenu}. */
 export interface UserMenuProps {
diff --git a/app/gui/src/dashboard/layouts/VersionChecker.tsx b/app/gui/src/dashboard/layouts/VersionChecker.tsx
index 18fb5873e114..84d820354406 100644
--- a/app/gui/src/dashboard/layouts/VersionChecker.tsx
+++ b/app/gui/src/dashboard/layouts/VersionChecker.tsx
@@ -1,24 +1,22 @@
 /** @file Check the version. */
+import { startTransition, useState } from 'react'
+
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
+import { IS_DEV_MODE } from 'enso-common/src/detect'
+import { download } from 'enso-common/src/utilities/download'
+import { getDownloadUrl, getLatestRelease } from 'enso-common/src/utilities/github'
+
 import DownloadIcon from '#/assets/download.svg'
 import NewTabIcon from '#/assets/new_tab.svg'
 import SnoozeIcon from '#/assets/snooze.svg'
-import { IS_DEV_MODE } from 'enso-common/src/detect'
-
-import { useToastAndLog } from '#/hooks/toastAndLogHooks'
-
-import { useEnableVersionChecker, useSetEnableVersionChecker } from '#/components/Devtools'
-import { useLocalBackend } from '#/providers/BackendProvider'
-import { useText } from '#/providers/TextProvider'
-
 import { Button, ButtonGroup, Dialog, Text } from '#/components/AriaComponents'
-
+import { useEnableVersionChecker, useSetEnableVersionChecker } from '#/components/Devtools'
 import { Stepper } from '#/components/Stepper'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import { download } from '#/utilities/download'
-import { getDownloadUrl, getLatestRelease } from '#/utilities/github'
-import { startTransition, useState } from 'react'
+import { useToastAndLog } from '#/hooks/toastAndLogHooks'
+import { useLocalBackend } from '#/providers/BackendProvider'
+import { useText } from '#/providers/TextProvider'
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const CURRENT_VERSION: string = import.meta.env.ENSO_IDE_VERSION ?? 'unknown-dev'
diff --git a/app/gui/src/dashboard/modals/DuplicateAssetsModal.tsx b/app/gui/src/dashboard/modals/DuplicateAssetsModal.tsx
index 9c583543ae7e..c4123e4024da 100644
--- a/app/gui/src/dashboard/modals/DuplicateAssetsModal.tsx
+++ b/app/gui/src/dashboard/modals/DuplicateAssetsModal.tsx
@@ -1,48 +1,45 @@
 /** @file A modal opened when uploaded assets. */
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 
-import * as modalProvider from '#/providers/ModalProvider'
-import * as textProvider from '#/providers/TextProvider'
+import { useMutation } from '@tanstack/react-query'
+
+import {
+  AssetType,
+  extractProjectExtension,
+  stripProjectExtension,
+  type AnyAsset,
+  type DirectoryId,
+  type FileAsset,
+  type ProjectAsset,
+} from 'enso-common/src/services/Backend'
+import { basenameAndExtension } from 'enso-common/src/utilities/data/fileInfo'
+import { unsafeMutable } from 'enso-common/src/utilities/data/object'
 
-import * as aria from '#/components/aria'
-import * as ariaComponents from '#/components/AriaComponents'
+import { Heading, Text } from '#/components/aria'
+import { Button, ButtonGroup } from '#/components/AriaComponents'
 import AssetSummary from '#/components/dashboard/AssetSummary'
 import Modal from '#/components/Modal'
-
-import * as backendModule from '#/services/Backend'
-
-import * as fileInfo from '#/utilities/fileInfo'
-import * as object from '#/utilities/object'
-import { useMutation } from '@tanstack/react-query'
-
-// =============
-// === Types ===
-// =============
+import { useSetModal } from '#/providers/ModalProvider'
+import { useText } from '#/providers/TextProvider'
 
 /**
  * An object containing the current asset, and the asset that is about to be uploaded,
  * that will conflict with the existing asset.
  */
 export interface ConflictingAsset<
-  Asset extends backendModule.FileAsset | backendModule.ProjectAsset =
-    | backendModule.FileAsset
-    | backendModule.ProjectAsset,
+  Asset extends FileAsset | ProjectAsset = FileAsset | ProjectAsset,
 > {
-  readonly current: backendModule.AnyAsset
+  readonly current: AnyAsset
   readonly new: Asset
   readonly file: File
 }
 
-// =================================
-// === UpdateOrRenameAssetsModal ===
-// =================================
-
 /** Props for a {@link DuplicateAssetsModal}. */
 export interface DuplicateAssetsModalProps {
-  readonly parentKey: backendModule.DirectoryId
-  readonly parentId: backendModule.DirectoryId
-  readonly conflictingFiles: readonly ConflictingAsset<backendModule.FileAsset>[]
-  readonly conflictingProjects: readonly ConflictingAsset<backendModule.ProjectAsset>[]
+  readonly parentKey: DirectoryId
+  readonly parentId: DirectoryId
+  readonly conflictingFiles: readonly ConflictingAsset<FileAsset>[]
+  readonly conflictingProjects: readonly ConflictingAsset<ProjectAsset>[]
   readonly siblingFileNames: Iterable<string>
   readonly siblingProjectNames: Iterable<string>
   readonly nonConflictingFileCount: number
@@ -58,13 +55,13 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
   const { siblingFileNames: siblingFileNamesRaw } = props
   const { siblingProjectNames: siblingProjectNamesRaw } = props
   const { nonConflictingFileCount, nonConflictingProjectCount, doUploadNonConflicting } = props
-  const { unsetModal } = modalProvider.useSetModal()
-  const { getText } = textProvider.useText()
-  const [conflictingFiles, setConflictingFiles] = React.useState(conflictingFilesRaw)
-  const [conflictingProjects, setConflictingProjects] = React.useState(conflictingProjectsRaw)
-  const [didUploadNonConflicting, setDidUploadNonConflicting] = React.useState(false)
-  const [siblingFileNames] = React.useState(new Set<string>())
-  const [siblingProjectNames] = React.useState(new Set<string>())
+  const { unsetModal } = useSetModal()
+  const { getText } = useText()
+  const [conflictingFiles, setConflictingFiles] = useState(conflictingFilesRaw)
+  const [conflictingProjects, setConflictingProjects] = useState(conflictingProjectsRaw)
+  const [didUploadNonConflicting, setDidUploadNonConflicting] = useState(false)
+  const [siblingFileNames] = useState(new Set<string>())
+  const [siblingProjectNames] = useState(new Set<string>())
   const count = conflictingFiles.length + conflictingProjects.length
   const firstConflict = conflictingFiles[0] ?? conflictingProjects[0]
   const otherFilesCount = Math.max(0, conflictingFiles.length - 1)
@@ -83,7 +80,7 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
   })
   const isLoading = uploadNonConflictingMutation.isPending || updateConflictingMutation.isPending
 
-  React.useEffect(() => {
+  useEffect(() => {
     for (const name of siblingFileNamesRaw) {
       siblingFileNames.add(name)
     }
@@ -98,8 +95,8 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
   const findNewName = (conflict: ConflictingAsset, commit = true) => {
     let title = conflict.file.name
     switch (conflict.new.type) {
-      case backendModule.AssetType.file: {
-        const { basename, extension } = fileInfo.basenameAndExtension(title)
+      case AssetType.file: {
+        const { basename, extension } = basenameAndExtension(title)
         let i = 1
         while (true) {
           i += 1
@@ -114,8 +111,8 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
         }
         break
       }
-      case backendModule.AssetType.project: {
-        const { basename, extension } = backendModule.extractProjectExtension(title)
+      case AssetType.project: {
+        const { basename, extension } = extractProjectExtension(title)
         title = basename
         let i = 1
         while (true) {
@@ -140,7 +137,7 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
 
     for (const conflict of clonedConflicts) {
       // This is SAFE, as it is a shallow mutation of a freshly cloned object.
-      object.unsafeMutable(conflict.new).title = findNewName(conflict)
+      unsafeMutable(conflict.new).title = findNewName(conflict)
     }
 
     return clonedConflicts
@@ -159,31 +156,31 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
           event.preventDefault()
         }}
       >
-        <aria.Heading level={2} className="relative text-sm font-semibold">
+        <Heading level={2} className="relative text-sm font-semibold">
           {conflictingFiles.length > 0 ?
             conflictingProjects.length > 0 ?
               getText('duplicateFilesAndProjectsFound')
             : getText('duplicateFilesFound')
           : getText('duplicateProjectsFound')}
-        </aria.Heading>
+        </Heading>
         {nonConflictingFileCount > 0 ||
           (nonConflictingProjectCount > 0 && (
             <div className="relative flex flex-col">
               {nonConflictingFileCount > 0 && (
-                <aria.Text className="text">
+                <Text className="text">
                   {nonConflictingFileCount === 1 ?
                     getText('fileWithoutConflicts')
                   : getText('filesWithoutConflicts', nonConflictingFileCount)}
-                </aria.Text>
+                </Text>
               )}
               {nonConflictingProjectCount > 0 && (
-                <aria.Text className="text">
+                <Text className="text">
                   {nonConflictingProjectCount === 1 ?
                     getText('projectWithoutConflicts')
                   : getText('projectsWithoutConflicts', nonConflictingFileCount)}
-                </aria.Text>
+                </Text>
               )}
-              <ariaComponents.Button
+              <Button
                 variant="outline"
                 isDisabled={didUploadNonConflicting}
                 onPress={async () => {
@@ -192,35 +189,35 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
                 }}
               >
                 {didUploadNonConflicting ? getText('uploaded') : getText('upload')}
-              </ariaComponents.Button>
+              </Button>
             </div>
           ))}
         {firstConflict && (
           <>
             <div className="flex flex-col">
-              <aria.Text className="relative">{getText('currentColon')}</aria.Text>
+              <Text className="relative">{getText('currentColon')}</Text>
               <AssetSummary asset={firstConflict.current} className="relative" />
             </div>
             <div className="flex flex-col">
-              <aria.Text className="relative">{getText('newColon')}</aria.Text>
+              <Text className="relative">{getText('newColon')}</Text>
               <AssetSummary
                 new
-                newName={backendModule.stripProjectExtension(findNewName(firstConflict, false))}
+                newName={stripProjectExtension(findNewName(firstConflict, false))}
                 asset={firstConflict.new}
                 className="relative"
               />
             </div>
             {count > 1 && (
-              <ariaComponents.ButtonGroup>
-                <ariaComponents.Button
+              <ButtonGroup>
+                <Button
                   variant="outline"
                   onPress={async () => {
                     switch (firstConflict.new.type) {
-                      case backendModule.AssetType.file: {
+                      case AssetType.file: {
                         setConflictingFiles((oldConflicts) => oldConflicts.slice(1))
                         break
                       }
-                      case backendModule.AssetType.project: {
+                      case AssetType.project: {
                         setConflictingProjects((oldConflicts) => oldConflicts.slice(1))
                         break
                       }
@@ -229,49 +226,49 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
                   }}
                 >
                   {getText('update')}
-                </ariaComponents.Button>
+                </Button>
 
-                <ariaComponents.Button
+                <Button
                   variant="outline"
                   onPress={() => {
                     doRename([firstConflict])
                     switch (firstConflict.new.type) {
-                      case backendModule.AssetType.file: {
+                      case AssetType.file: {
                         setConflictingFiles((oldConflicts) => oldConflicts.slice(1))
                         break
                       }
-                      case backendModule.AssetType.project: {
+                      case AssetType.project: {
                         setConflictingProjects((oldConflicts) => oldConflicts.slice(1))
                         break
                       }
                     }
                   }}
                 >
-                  {firstConflict.new.type === backendModule.AssetType.file ?
+                  {firstConflict.new.type === AssetType.file ?
                     getText('renameNewFile')
                   : getText('renameNewProject')}
-                </ariaComponents.Button>
-              </ariaComponents.ButtonGroup>
+                </Button>
+              </ButtonGroup>
             )}
           </>
         )}
         {otherFilesCount > 0 && (
-          <aria.Text className="relative">
+          <Text className="relative">
             {otherFilesCount === 1 ?
               getText('andOtherFile')
             : getText('andOtherFiles', otherFilesCount)}
-          </aria.Text>
+          </Text>
         )}
         {otherProjectsCount > 0 && (
-          <aria.Text className="relative">
+          <Text className="relative">
             {otherProjectsCount === 1 ?
               getText('andOtherProject')
             : getText('andOtherProjects', otherProjectsCount)}
-          </aria.Text>
+          </Text>
         )}
 
-        <ariaComponents.ButtonGroup className="relative">
-          <ariaComponents.Button
+        <ButtonGroup className="relative">
+          <Button
             variant="submit"
             loading={isLoading}
             onPress={async () => {
@@ -286,9 +283,9 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
             }}
           >
             {count === 1 ? getText('update') : getText('updateAll')}
-          </ariaComponents.Button>
+          </Button>
 
-          <ariaComponents.Button
+          <Button
             variant="accent"
             loading={isLoading}
             onPress={async () => {
@@ -301,17 +298,17 @@ export default function DuplicateAssetsModal(props: DuplicateAssetsModalProps) {
             }}
           >
             {count === 1 ?
-              firstConflict?.new.type === backendModule.AssetType.file ?
+              firstConflict?.new.type === AssetType.file ?
                 getText('renameNewFile')
               : getText('renameNewProject')
-            : firstConflict?.new.type === backendModule.AssetType.file ?
+            : firstConflict?.new.type === AssetType.file ?
               getText('renameNewFiles')
             : getText('renameNewProjects')}
-          </ariaComponents.Button>
-          <ariaComponents.Button variant="outline" loading={isLoading} onPress={unsetModal}>
+          </Button>
+          <Button variant="outline" loading={isLoading} onPress={unsetModal}>
             {getText('cancel')}
-          </ariaComponents.Button>
-        </ariaComponents.ButtonGroup>
+          </Button>
+        </ButtonGroup>
       </form>
     </Modal>
   )
diff --git a/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersForm.tsx b/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersForm.tsx
index 100c43e3691e..f34a4b6701f2 100644
--- a/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersForm.tsx
+++ b/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersForm.tsx
@@ -1,42 +1,35 @@
 /** @file A modal with inputs for user email and permission level. */
-import * as React from 'react'
+import { useRef } from 'react'
 
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
 import isEmail from 'validator/es/lib/isEmail'
 
-import { backendMutationOptions } from '#/hooks/backendHooks'
-import * as billingHooks from '#/hooks/billing'
-import * as eventCallbackHooks from '#/hooks/eventCallbackHooks'
-
-import * as authProvider from '#/providers/AuthProvider'
-import * as backendProvider from '#/providers/BackendProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import * as ariaComponents from '#/components/AriaComponents'
-import * as paywallComponents from '#/components/Paywall'
-
-import type * as backendModule from '#/services/Backend'
+import type { EmailAddress } from 'enso-common/src/services/Backend'
+import { parseUserEmails } from 'enso-common/src/utilities/data/email'
 
-import * as parserUserEmails from '#/utilities/parseUserEmails'
-
-// =======================
-// === InviteUsersForm ===
-// =======================
+import { Form, ResizableContentEditableInput } from '#/components/AriaComponents'
+import { PaywallAlert } from '#/components/Paywall'
+import { backendMutationOptions } from '#/hooks/backendHooks'
+import { usePaywall } from '#/hooks/billing'
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import { useFullUserSession } from '#/providers/AuthProvider'
+import { useRemoteBackend } from '#/providers/BackendProvider'
+import { useText } from '#/providers/TextProvider'
 
 /** Props for an {@link InviteUsersForm}. */
 export interface InviteUsersFormProps {
-  readonly onSubmitted: (emails: backendModule.EmailAddress[]) => void
+  readonly onSubmitted: (emails: EmailAddress[]) => void
 }
 
 /** A modal with inputs for user email and permission level. */
 export function InviteUsersForm(props: InviteUsersFormProps) {
   const { onSubmitted } = props
-  const { getText } = textProvider.useText()
-  const backend = backendProvider.useRemoteBackend()
-  const inputRef = React.useRef<HTMLDivElement>(null)
+  const { getText } = useText()
+  const backend = useRemoteBackend()
+  const inputRef = useRef<HTMLDivElement>(null)
 
-  const { user } = authProvider.useFullUserSession()
-  const { isFeatureUnderPaywall } = billingHooks.usePaywall({ plan: user.plan })
+  const { user } = useFullUserSession()
+  const { isFeatureUnderPaywall } = usePaywall({ plan: user.plan })
 
   const inviteUserMutation = useMutation(
     backendMutationOptions(backend, 'inviteUser', {
@@ -56,11 +49,9 @@ export function InviteUsersForm(props: InviteUsersFormProps) {
   const isUnderPaywall = isFeatureUnderPaywall('inviteUserFull')
   const seatsLeft = invitations.availableLicenses
 
-  const getEmailsFromInput = eventCallbackHooks.useEventCallback((value: string) =>
-    parserUserEmails.parseUserEmails(value),
-  )
+  const getEmailsFromInput = useEventCallback((value: string) => parseUserEmails(value))
 
-  const highlightEmails = eventCallbackHooks.useEventCallback((value: string): void => {
+  const highlightEmails = useEventCallback((value: string): void => {
     if (inputRef.current?.firstChild != null) {
       const trimValue = value.trim()
       const { entries } = getEmailsFromInput(value)
@@ -93,7 +84,7 @@ export function InviteUsersForm(props: InviteUsersFormProps) {
     }
   })
 
-  const validateEmailField = eventCallbackHooks.useEventCallback((value: string): string | null => {
+  const validateEmailField = useEventCallback((value: string): string | null => {
     const { entries } = getEmailsFromInput(value)
 
     if (entries.length > seatsLeft) {
@@ -110,10 +101,10 @@ export function InviteUsersForm(props: InviteUsersFormProps) {
   })
 
   return (
-    <ariaComponents.Form
+    <Form
       formOptions={{ mode: 'onSubmit' }}
-      schema={ariaComponents.Form.schema.object({
-        emails: ariaComponents.Form.schema
+      schema={Form.schema.object({
+        emails: Form.schema
           .string()
           .min(1, { message: getText('emailIsRequired') })
           .refine(
@@ -134,7 +125,7 @@ export function InviteUsersForm(props: InviteUsersFormProps) {
         // Add the email from the input field to the list of emails.
         const emailsToSubmit = Array.from(new Set(getEmailsFromInput(emails).entries))
           .map(({ email }) => email)
-          .filter((value): value is backendModule.EmailAddress => isEmail(value))
+          .filter((value): value is EmailAddress => isEmail(value))
 
         await Promise.all(
           emailsToSubmit.map((userEmail) => inviteUserMutation.mutateAsync([{ userEmail }])),
@@ -143,7 +134,7 @@ export function InviteUsersForm(props: InviteUsersFormProps) {
         })
       }}
     >
-      <ariaComponents.ResizableContentEditableInput
+      <ResizableContentEditableInput
         ref={inputRef}
         name="emails"
         label={getText('inviteEmailFieldLabel')}
@@ -152,22 +143,14 @@ export function InviteUsersForm(props: InviteUsersFormProps) {
       />
 
       {isUnderPaywall && (
-        <paywallComponents.PaywallAlert
-          feature="inviteUserFull"
-          label={getText('inviteFormSeatsLeft', seatsLeft)}
-        />
+        <PaywallAlert feature="inviteUserFull" label={getText('inviteFormSeatsLeft', seatsLeft)} />
       )}
 
-      <ariaComponents.Form.Submit
-        variant="accent"
-        size="medium"
-        fullWidth
-        isDisabled={seatsLeft <= 0}
-      >
+      <Form.Submit variant="accent" size="medium" fullWidth isDisabled={seatsLeft <= 0}>
         {getText('inviteSubmit')}
-      </ariaComponents.Form.Submit>
+      </Form.Submit>
 
-      <ariaComponents.Form.FormError />
-    </ariaComponents.Form>
+      <Form.FormError />
+    </Form>
   )
 }
diff --git a/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersModal.tsx b/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersModal.tsx
index 07efa3818113..57a5251d4b8d 100644
--- a/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersModal.tsx
+++ b/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersModal.tsx
@@ -1,21 +1,15 @@
 /** @file A modal with inputs for user email and permission level. */
-import * as React from 'react'
+import { useState } from 'react'
 
-import * as authProvider from '#/providers/AuthProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import * as ariaComponents from '#/components/AriaComponents'
-
-import * as inviteUsersForm from '#/modals/InviteUsersModal/InviteUsersForm'
-import * as inviteUsersSuccess from '#/modals/InviteUsersModal/InviteUsersSuccess'
+import type { EmailAddress, OrganizationId } from 'enso-common/src/services/Backend'
 
+import { Dialog, Popover } from '#/components/AriaComponents'
 import { Stepper } from '#/components/Stepper'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import type * as backendModule from '#/services/Backend'
-
-// ========================
-// === InviteUsersModal ===
-// ========================
+import { InviteUsersForm } from '#/modals/InviteUsersModal/InviteUsersForm'
+import { InviteUsersSuccess } from '#/modals/InviteUsersModal/InviteUsersSuccess'
+import { useFullUserSession } from '#/providers/AuthProvider'
+import { useText } from '#/providers/TextProvider'
 
 /** Props for an {@link InviteUsersModal}. */
 export interface InviteUsersModalProps {
@@ -25,34 +19,30 @@ export interface InviteUsersModalProps {
 /** A modal for inviting one or more users. */
 export default function InviteUsersModal(props: InviteUsersModalProps) {
   const { relativeToTrigger = false } = props
-  const { getText } = textProvider.useText()
-  const { user } = authProvider.useFullUserSession()
+  const { getText } = useText()
+  const { user } = useFullUserSession()
 
   if (relativeToTrigger) {
     return (
-      <ariaComponents.Popover>
+      <Popover>
         <InviteUsersModalContent organizationId={user.organizationId} />
-      </ariaComponents.Popover>
+      </Popover>
     )
   } else {
     return (
-      <ariaComponents.Dialog title={getText('invite')}>
+      <Dialog title={getText('invite')}>
         {({ close }) => (
           <InviteUsersModalContent organizationId={user.organizationId} onClose={close} />
         )}
-      </ariaComponents.Dialog>
+      </Dialog>
     )
   }
 }
 
-// ===============================
-// === InviteUsersModalContent ===
-// ===============================
-
 /** Props for the content of an {@link InviteUsersModal}. */
 interface InviteUsersModalContentProps {
   readonly onClose?: () => void
-  readonly organizationId: backendModule.OrganizationId
+  readonly organizationId: OrganizationId
 }
 
 /** The content of an {@link InviteUsersModal}. */
@@ -63,13 +53,11 @@ function InviteUsersModalContent(props: InviteUsersModalContentProps) {
     steps: 2,
   })
 
-  const [submittedEmails, setSubmittedEmails] = React.useState<string[]>([])
-  const onInviteUsersFormInviteUsersFormSubmitted = useEventCallback(
-    (emails: backendModule.EmailAddress[]) => {
-      nextStep()
-      setSubmittedEmails(emails)
-    },
-  )
+  const [submittedEmails, setSubmittedEmails] = useState<string[]>([])
+  const onInviteUsersFormInviteUsersFormSubmitted = useEventCallback((emails: EmailAddress[]) => {
+    nextStep()
+    setSubmittedEmails(emails)
+  })
 
   const invitationParams = new URLSearchParams({
     // eslint-disable-next-line @typescript-eslint/naming-convention, camelcase
@@ -80,15 +68,11 @@ function InviteUsersModalContent(props: InviteUsersModalContentProps) {
   return (
     <Stepper state={stepperState} renderStep={() => null}>
       <Stepper.StepContent index={0}>
-        <inviteUsersForm.InviteUsersForm onSubmitted={onInviteUsersFormInviteUsersFormSubmitted} />
+        <InviteUsersForm onSubmitted={onInviteUsersFormInviteUsersFormSubmitted} />
       </Stepper.StepContent>
 
       <Stepper.StepContent index={1}>
-        <inviteUsersSuccess.InviteUsersSuccess
-          {...props}
-          invitationLink={invitationLink}
-          emails={submittedEmails}
-        />
+        <InviteUsersSuccess {...props} invitationLink={invitationLink} emails={submittedEmails} />
       </Stepper.StepContent>
     </Stepper>
   )
diff --git a/app/gui/src/dashboard/modals/ManageLabelsModal.tsx b/app/gui/src/dashboard/modals/ManageLabelsModal.tsx
index fc37abe88b4d..2d351c437d3a 100644
--- a/app/gui/src/dashboard/modals/ManageLabelsModal.tsx
+++ b/app/gui/src/dashboard/modals/ManageLabelsModal.tsx
@@ -3,6 +3,15 @@ import { useEffect, useMemo, useState } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
+import type Backend from 'enso-common/src/services/Backend'
+import {
+  findLeastUsedColor,
+  LabelName,
+  type AnyAsset,
+  type LChColor,
+} from 'enso-common/src/services/Backend'
+import { regexEscape } from 'enso-common/src/utilities/data/string'
+
 import { ButtonGroup, Checkbox, Form, Input, Popover, Text } from '#/components/AriaComponents'
 import ColorPicker from '#/components/ColorPicker'
 import Label from '#/components/dashboard/Label'
@@ -12,13 +21,6 @@ import { useSyncRef } from '#/hooks/syncRefHooks'
 import { useToastAndLog } from '#/hooks/toastAndLogHooks'
 import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import { findLeastUsedColor, LabelName, type AnyAsset, type LChColor } from '#/services/Backend'
-import { regexEscape } from '#/utilities/string'
-
-// =========================
-// === ManageLabelsModal ===
-// =========================
 
 /** Props for a {@link ManageLabelsModal}. */
 export interface ManageLabelsModalProps<Asset extends AnyAsset = AnyAsset> {
diff --git a/app/gui/src/dashboard/modals/ManagePermissionsModal.tsx b/app/gui/src/dashboard/modals/ManagePermissionsModal.tsx
index fffd2447edcc..4a8e20fb3203 100644
--- a/app/gui/src/dashboard/modals/ManagePermissionsModal.tsx
+++ b/app/gui/src/dashboard/modals/ManagePermissionsModal.tsx
@@ -5,6 +5,21 @@ import { useMutation, useQuery } from '@tanstack/react-query'
 import { toast } from 'react-toastify'
 import isEmail from 'validator/es/lib/isEmail'
 
+import type Backend from 'enso-common/src/services/Backend'
+import {
+  compareAssetPermissions,
+  EmailAddress,
+  getAssetPermissionId,
+  getAssetPermissionName,
+  isUserGroupPermission,
+  isUserPermission,
+  type AnyAsset,
+  type AssetPermission,
+  type UserGroupInfo,
+  type UserInfo,
+  type UserPermissionIdentifier,
+} from 'enso-common/src/services/Backend'
+
 import { Heading } from '#/components/aria'
 import { Button } from '#/components/AriaComponents'
 import Autocomplete from '#/components/Autocomplete'
@@ -21,36 +36,14 @@ import { useFullUserSession } from '#/providers/AuthProvider'
 import { useRemoteBackend } from '#/providers/BackendProvider'
 import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import {
-  compareAssetPermissions,
-  EmailAddress,
-  getAssetPermissionId,
-  getAssetPermissionName,
-  isUserGroupPermission,
-  isUserPermission,
-  type AnyAsset,
-  type AssetPermission,
-  type UserGroupInfo,
-  type UserInfo,
-  type UserPermissionIdentifier,
-} from '#/services/Backend'
 import { PermissionAction } from '#/utilities/permissions'
 
-// =================
-// === Constants ===
-// =================
-
 /**
  * The vertical offset of the `PermissionTypeSelector` from its parent element, for the
  * input to invite new users.
  */
 const TYPE_SELECTOR_Y_OFFSET_PX = 32
 
-// ==============================
-// === ManagePermissionsModal ===
-// ==============================
-
 /** Props for a {@link ManagePermissionsModal}. */
 export interface ManagePermissionsModalProps<Asset extends AnyAsset = AnyAsset> {
   readonly backend: Backend
diff --git a/app/gui/src/dashboard/modals/NewLabelModal.tsx b/app/gui/src/dashboard/modals/NewLabelModal.tsx
index 5a515273fbba..4c25bd821eba 100644
--- a/app/gui/src/dashboard/modals/NewLabelModal.tsx
+++ b/app/gui/src/dashboard/modals/NewLabelModal.tsx
@@ -4,20 +4,17 @@ import * as React from 'react'
 import { useMutation } from '@tanstack/react-query'
 import * as z from 'zod'
 
+import type Backend from 'enso-common/src/services/Backend'
+import { findLeastUsedColor } from 'enso-common/src/services/Backend'
+
 import { ButtonGroup, DialogDismiss, Form, Input, Popover, Text } from '#/components/AriaComponents'
 import ColorPicker from '#/components/ColorPicker'
 import FocusArea from '#/components/styled/FocusArea'
 import { backendMutationOptions, useBackendQuery } from '#/hooks/backendHooks'
 import { useSyncRef } from '#/hooks/syncRefHooks'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
-import { findLeastUsedColor } from '#/services/Backend'
 import { EMPTY_ARRAY } from 'enso-common/src/utilities/data/array'
 
-// =====================
-// === NewLabelModal ===
-// =====================
-
 /** Props for a {@link NewLabelModal}. */
 export interface NewLabelModalProps {
   readonly backend: Backend
diff --git a/app/gui/src/dashboard/modals/NewUserGroupModal.tsx b/app/gui/src/dashboard/modals/NewUserGroupModal.tsx
index 3ce80ba22879..077a053b7cab 100644
--- a/app/gui/src/dashboard/modals/NewUserGroupModal.tsx
+++ b/app/gui/src/dashboard/modals/NewUserGroupModal.tsx
@@ -1,52 +1,55 @@
 /** @file A modal to create a user group. */
-import * as React from 'react'
+import { useMemo, useState, type MouseEvent } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
-import { backendMutationOptions, useBackendQuery } from '#/hooks/backendHooks'
-import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
-
-import * as modalProvider from '#/providers/ModalProvider'
-import * as textProvider from '#/providers/TextProvider'
+import type Backend from 'enso-common/src/services/Backend'
+import { normalizeName } from 'enso-common/src/utilities/data/string'
 
-import * as aria from '#/components/aria'
+import { FieldError, Heading, Input, Label, TextField } from '#/components/aria'
 import { Button, ButtonGroup } from '#/components/AriaComponents'
 import Modal from '#/components/Modal'
+import { backendMutationOptions, useBackendQuery } from '#/hooks/backendHooks'
+import { useToastAndLog } from '#/hooks/toastAndLogHooks'
+import { useSetModal } from '#/providers/ModalProvider'
+import { useText } from '#/providers/TextProvider'
+import { twMerge } from '#/utilities/tailwindMerge'
 
-import type Backend from '#/services/Backend'
-
-import * as eventModule from '#/utilities/event'
-import * as string from '#/utilities/string'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
-
-// =========================
-// === NewUserGroupModal ===
-// =========================
+/**
+ * Search for an ancestor `form` element and try to submit it.
+ * @deprecated
+ */
+function submitForm(event: { readonly target: Element }) {
+  const closestForm = event.target.closest('form')
+  if (closestForm != null) {
+    closestForm.requestSubmit()
+  }
+}
 
 /** Props for a {@link NewUserGroupModal}. */
 export interface NewUserGroupModalProps {
   readonly backend: Backend
-  readonly event?: Pick<React.MouseEvent, 'pageX' | 'pageY'>
+  readonly event?: Pick<MouseEvent, 'pageX' | 'pageY'>
 }
 
 /** A modal to create a user group. */
 export default function NewUserGroupModal(props: NewUserGroupModalProps) {
   const { backend, event: positionEvent } = props
-  const { unsetModal } = modalProvider.useSetModal()
-  const { getText } = textProvider.useText()
-  const toastAndLog = toastAndLogHooks.useToastAndLog()
-  const [name, setName] = React.useState('')
+  const { unsetModal } = useSetModal()
+  const { getText } = useText()
+  const toastAndLog = useToastAndLog()
+  const [name, setName] = useState('')
   const listUserGroupsQuery = useBackendQuery(backend, 'listUserGroups', [])
   const userGroups = listUserGroupsQuery.data ?? null
-  const userGroupNames = React.useMemo(
+  const userGroupNames = useMemo(
     () =>
       userGroups == null ? null : (
-        new Set(userGroups.map((group) => string.normalizeName(group.groupName)))
+        new Set(userGroups.map((group) => normalizeName(group.groupName)))
       ),
     [userGroups],
   )
   const nameError =
-    userGroupNames != null && userGroupNames.has(string.normalizeName(name)) ?
+    userGroupNames != null && userGroupNames.has(normalizeName(name)) ?
       getText('duplicateUserGroupError')
     : null
   const createUserGroup = useMutation(
@@ -68,10 +71,7 @@ export default function NewUserGroupModal(props: NewUserGroupModalProps) {
   return (
     <Modal
       centered={positionEvent == null}
-      className={tailwindMerge.twMerge(
-        'bg-dim',
-        positionEvent != null && 'absolute size-full overflow-hidden',
-      )}
+      className={twMerge('bg-dim', positionEvent != null && 'absolute size-full overflow-hidden')}
     >
       <form
         tabIndex={-1}
@@ -90,28 +90,26 @@ export default function NewUserGroupModal(props: NewUserGroupModalProps) {
           void onSubmit()
         }}
       >
-        <aria.Heading className="relative text-sm font-semibold">
-          {getText('newUserGroup')}
-        </aria.Heading>
-        <aria.TextField
+        <Heading className="relative text-sm font-semibold">{getText('newUserGroup')}</Heading>
+        <TextField
           className="relative flex flex-col"
           value={name}
           onChange={setName}
           isInvalid={nameError != null}
         >
           <div className="flex items-center">
-            <aria.Label className="text w-modal-label">{getText('name')}</aria.Label>
-            <aria.Input
+            <Label className="text w-modal-label">{getText('name')}</Label>
+            <Input
               autoFocus
               size={1}
               placeholder={getText('userGroupNamePlaceholder')}
               className="text grow rounded-full border border-primary/10 bg-transparent px-input-x invalid:border-red-700/60"
             />
           </div>
-          <aria.FieldError className="text-red-700/90">{nameError}</aria.FieldError>
-        </aria.TextField>
+          <FieldError className="text-red-700/90">{nameError}</FieldError>
+        </TextField>
         <ButtonGroup className="relative">
-          <Button variant="submit" isDisabled={!canSubmit} onPress={eventModule.submitForm}>
+          <Button variant="submit" isDisabled={!canSubmit} onPress={submitForm}>
             {getText('create')}
           </Button>
           <Button variant="outline" onPress={unsetModal}>
diff --git a/app/gui/src/dashboard/modals/ProjectLogsModal.tsx b/app/gui/src/dashboard/modals/ProjectLogsModal.tsx
index 0deab138dc3b..6fb3de43cbd4 100644
--- a/app/gui/src/dashboard/modals/ProjectLogsModal.tsx
+++ b/app/gui/src/dashboard/modals/ProjectLogsModal.tsx
@@ -1,45 +1,37 @@
 /** @file A modal for showing logs for a project. */
-import * as React from 'react'
+import { useSuspenseQuery } from '@tanstack/react-query'
 
-import * as reactQuery from '@tanstack/react-query'
+import type Backend from 'enso-common/src/services/Backend'
+import type { ProjectSessionId } from 'enso-common/src/services/Backend'
 
 import ReloadIcon from '#/assets/reload.svg'
-
-import * as textProvider from '#/providers/TextProvider'
-
-import * as ariaComponents from '#/components/AriaComponents'
-
-import type * as backendModule from '#/services/Backend'
-import type Backend from '#/services/Backend'
-
-// ========================
-// === ProjectLogsModal ===
-// ========================
+import { Button, Dialog } from '#/components/AriaComponents'
+import { useText } from '#/providers/TextProvider'
 
 /** Props for a {@link ProjectLogsModal}. */
 export interface ProjectLogsModalProps {
   readonly backend: Backend
-  readonly projectSessionId: backendModule.ProjectSessionId
+  readonly projectSessionId: ProjectSessionId
   readonly projectTitle: string
 }
 
 /** A modal for showing logs for a project. */
 export default function ProjectLogsModal(props: ProjectLogsModalProps) {
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
 
   return (
-    <ariaComponents.Dialog title={getText('logs')} type="fullscreen">
+    <Dialog title={getText('logs')} type="fullscreen">
       {() => <ProjectLogsModalInternal {...props} />}
-    </ariaComponents.Dialog>
+    </Dialog>
   )
 }
 
 /** A modal for showing logs for a project. */
 function ProjectLogsModalInternal(props: ProjectLogsModalProps) {
   const { backend, projectSessionId, projectTitle } = props
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
 
-  const logsQuery = reactQuery.useSuspenseQuery({
+  const logsQuery = useSuspenseQuery({
     queryKey: ['projectLogs', { projectSessionId, projectTitle }],
     queryFn: async () => {
       const logs = await backend.getProjectSessionLogs(projectSessionId, projectTitle)
@@ -50,7 +42,7 @@ function ProjectLogsModalInternal(props: ProjectLogsModalProps) {
   return (
     <div className="flex flex-col">
       <div className="flex items-center gap-4 self-start rounded-full border-0.5 border-primary/20 px-[11px] py-2">
-        <ariaComponents.Button
+        <Button
           size="medium"
           variant="icon"
           icon={ReloadIcon}
diff --git a/app/gui/src/dashboard/modals/SetupOrganizationAfterSubscribe.tsx b/app/gui/src/dashboard/modals/SetupOrganizationAfterSubscribe.tsx
index cd3396e52653..11a407d51df8 100644
--- a/app/gui/src/dashboard/modals/SetupOrganizationAfterSubscribe.tsx
+++ b/app/gui/src/dashboard/modals/SetupOrganizationAfterSubscribe.tsx
@@ -1,47 +1,35 @@
 /** @file Modal for setting the organization name. */
-import * as React from 'react'
+import { useState } from 'react'
 
 import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
-import * as router from 'react-router'
+import { Outlet } from 'react-router'
 
-import { backendMutationOptions } from '#/hooks/backendHooks'
-
-import * as authProvider from '#/providers/AuthProvider'
-import * as backendProvider from '#/providers/BackendProvider'
-import type { GetText } from '#/providers/TextProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import * as ariaComponents from '#/components/AriaComponents'
+import { Plan } from 'enso-common/src/services/Backend'
 
-import { Button } from '#/components/AriaComponents'
+import { Button, Dialog, Form, Input } from '#/components/AriaComponents'
 import { Result } from '#/components/Result'
 import { Stepper } from '#/components/Stepper'
-import * as backendModule from '#/services/Backend'
-
-// =================
-// === Constants ===
-// =================
-
-const PLANS_TO_SPECIFY_ORG_NAME = [backendModule.Plan.team, backendModule.Plan.enterprise]
+import { backendMutationOptions } from '#/hooks/backendHooks'
+import { useAuth } from '#/providers/AuthProvider'
+import { useRemoteBackend } from '#/providers/BackendProvider'
+import { useText, type GetText } from '#/providers/TextProvider'
 
-// ================================
-// === SetOrganizationNameModal ===
-// ================================
+const PLANS_TO_SPECIFY_ORG_NAME = [Plan.team, Plan.enterprise]
 
 /**
  * Modal for setting the organization name.
  * Shows up when the user is on the team plan and the organization name is the default.
  */
 export function SetupOrganizationAfterSubscribe() {
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
 
-  const backend = backendProvider.useRemoteBackend()
-  const { session } = authProvider.useAuth()
+  const backend = useRemoteBackend()
+  const { session } = useAuth()
 
   const user = session != null && 'user' in session ? session.user : null
   const userIsAdmin = user?.isOrganizationAdmin ?? false
   const userId = user?.userId ?? null
-  const userPlan = user?.plan ?? backendModule.Plan.free
+  const userPlan = user?.plan ?? Plan.free
 
   const { data: organizationName } = useSuspenseQuery({
     queryKey: ['organization', userId],
@@ -57,7 +45,7 @@ export function SetupOrganizationAfterSubscribe() {
     select: (data) => data?.length ?? 0,
   })
 
-  const [hideModal, setHideModal] = React.useState(false)
+  const [hideModal, setHideModal] = useState(false)
 
   const queryClient = useQueryClient()
   const updateOrganization = useMutation(backendMutationOptions(backend, 'updateOrganization'))
@@ -126,7 +114,7 @@ export function SetupOrganizationAfterSubscribe() {
 
   return (
     <>
-      <ariaComponents.Dialog
+      <Dialog
         title={getText('setupOrganization')}
         isDismissable={false}
         isKeyboardDismissDisabled
@@ -143,9 +131,9 @@ export function SetupOrganizationAfterSubscribe() {
         >
           {({ currentStep, nextStep }) => <>{steps[currentStep]?.component({ nextStep })}</>}
         </Stepper>
-      </ariaComponents.Dialog>
+      </Dialog>
 
-      <router.Outlet context={session} />
+      <Outlet context={session} />
     </>
   )
 }
@@ -159,8 +147,8 @@ export const ORGANIZATION_NAME_MAX_LENGTH = 64
 
 // eslint-disable-next-line no-restricted-syntax
 export const SET_ORGANIZATION_NAME_FORM_SCHEMA = (getText: GetText) =>
-  ariaComponents.Form.schema.object({
-    name: ariaComponents.Form.schema
+  Form.schema.object({
+    name: Form.schema
       .string()
       .min(1, getText('arbitraryFieldRequired'))
       .max(ORGANIZATION_NAME_MAX_LENGTH, getText('arbitraryFieldTooLong')),
@@ -169,17 +157,17 @@ export const SET_ORGANIZATION_NAME_FORM_SCHEMA = (getText: GetText) =>
 /** Form for setting the organization name. */
 export function SetOrganizationNameForm(props: SetOrganizationNameFormProps) {
   const { onSubmit } = props
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
 
   return (
-    <ariaComponents.Form
+    <Form
       gap="medium"
       className="max-w-96"
       defaultValues={{ name: '' }}
       schema={SET_ORGANIZATION_NAME_FORM_SCHEMA(getText)}
       onSubmit={({ name }) => onSubmit(name)}
     >
-      <ariaComponents.Input
+      <Input
         name="name"
         autoFocus
         inputMode="text"
@@ -191,10 +179,10 @@ export function SetOrganizationNameForm(props: SetOrganizationNameFormProps) {
         )}
       />
 
-      <ariaComponents.Form.FormError />
+      <Form.FormError />
 
-      <ariaComponents.Form.Submit />
-    </ariaComponents.Form>
+      <Form.Submit />
+    </Form>
   )
 }
 
@@ -206,26 +194,26 @@ export interface CreateUserGroupFormProps {
 /** Form for creating a user group. */
 export function CreateUserGroupForm(props: CreateUserGroupFormProps) {
   const { onSubmit } = props
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
 
   const defaultUserGroupMaxLength = 64
 
   return (
-    <ariaComponents.Form
+    <Form
       schema={(z) => z.object({ groupName: z.string().min(1).max(defaultUserGroupMaxLength) })}
       gap="medium"
       className="max-w-96"
       defaultValues={{ groupName: '' }}
       onSubmit={({ groupName }) => onSubmit(groupName)}
     >
-      <ariaComponents.Input
+      <Input
         name="groupName"
         autoComplete="off"
         label={getText('groupNameSettingsInput')}
         description={getText('groupNameSettingsInputDescription', defaultUserGroupMaxLength)}
       />
 
-      <ariaComponents.Form.Submit />
-    </ariaComponents.Form>
+      <Form.Submit />
+    </Form>
   )
 }
diff --git a/app/gui/src/dashboard/modals/UpsertSecretModal.tsx b/app/gui/src/dashboard/modals/UpsertSecretModal.tsx
index cfd150460a3d..a110ab2a412f 100644
--- a/app/gui/src/dashboard/modals/UpsertSecretModal.tsx
+++ b/app/gui/src/dashboard/modals/UpsertSecretModal.tsx
@@ -1,11 +1,8 @@
 /** @file Modal for confirming delete of any type of asset. */
+import type { SecretId } from 'enso-common/src/services/Backend'
+
 import { ButtonGroup, Dialog, DialogDismiss, Form, Input } from '#/components/AriaComponents'
 import { useText } from '#/providers/TextProvider'
-import type { SecretId } from '#/services/Backend'
-
-// =========================
-// === UpsertSecretModal ===
-// =========================
 
 /** Props for a {@link UpsertSecretModal}. */
 export interface UpsertSecretModalProps {
diff --git a/app/gui/src/dashboard/modules/payments/api/useSubscriptionPrice.ts b/app/gui/src/dashboard/modules/payments/api/useSubscriptionPrice.ts
index fa8d2b98356a..fa11a1cfc24f 100644
--- a/app/gui/src/dashboard/modules/payments/api/useSubscriptionPrice.ts
+++ b/app/gui/src/dashboard/modules/payments/api/useSubscriptionPrice.ts
@@ -1,12 +1,7 @@
-/**
- * @file
- *
- * The `useSubscriptionPrice` hook that is used to fetch the subscription price
- * based on the provided parameters.
- */
+/** @file A hook to fetch the subscription price based on the provided parameters. */
 import { queryOptions, useQuery } from '@tanstack/react-query'
 
-import type { Plan } from '#/services/Backend'
+import type { Plan } from 'enso-common/src/services/Backend'
 
 import { DISCOUNT_MULTIPLIER_BY_DURATION, PRICE_BY_PLAN } from '../constants'
 
diff --git a/app/gui/src/dashboard/modules/payments/components/PlanSelector/PlanSelector.tsx b/app/gui/src/dashboard/modules/payments/components/PlanSelector/PlanSelector.tsx
index db8eadf648af..e13ca938625e 100644
--- a/app/gui/src/dashboard/modules/payments/components/PlanSelector/PlanSelector.tsx
+++ b/app/gui/src/dashboard/modules/payments/components/PlanSelector/PlanSelector.tsx
@@ -1,12 +1,13 @@
 /** @file Plan selector component. */
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
+import { Plan, PLANS } from 'enso-common/src/services/Backend'
+
 import { DIALOG_BACKGROUND } from '#/components/AriaComponents'
 import { usePaywall } from '#/hooks/billing'
 import { useAuth } from '#/providers/AuthProvider'
 import { useRemoteBackend } from '#/providers/BackendProvider'
 import { useText } from '#/providers/TextProvider'
-import { Plan, PLANS } from '#/services/Backend'
 import type { VariantProps } from '#/utilities/tailwindVariants'
 import { tv } from '#/utilities/tailwindVariants'
 import { Card } from './components'
diff --git a/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx b/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx
index 7bc3af09d08c..67ead678337c 100644
--- a/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx
+++ b/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx
@@ -1,14 +1,10 @@
-/**
- * @file
- *
- * Dialog that shows the plan details, price, and the payment form.
- */
-import * as React from 'react'
+/** @file Dialog that shows the plan details, price, and the payment form. */
+import { useMemo } from 'react'
 
 import type { PaymentMethod } from '@stripe/stripe-js'
 import { useQuery } from '@tanstack/react-query'
 
-import { type GetText, useText } from '#/providers/TextProvider'
+import type { Plan } from 'enso-common/src/services/Backend'
 
 import {
   Button,
@@ -22,9 +18,7 @@ import {
 } from '#/components/AriaComponents'
 import { ErrorDisplay } from '#/components/ErrorBoundary'
 import { Suspense } from '#/components/Suspense'
-
-import type { Plan } from '#/services/Backend'
-
+import { type GetText, useText } from '#/providers/TextProvider'
 import { twMerge } from '#/utilities/tailwindMerge'
 
 import { createSubscriptionPriceQuery, useCreatePaymentMethodMutation } from '../../../api'
@@ -104,7 +98,7 @@ export function PlanSelectorDialog(props: PlanSelectorDialogProps) {
   const seats = Form.useWatch({ name: 'seats', control: form.control })
   const period = Form.useWatch({ name: 'period', control: form.control })
 
-  const formatter = React.useMemo(
+  const formatter = useMemo(
     () => new Intl.NumberFormat(locale, { style: 'currency', currency: PRICE_CURRENCY }),
     [locale],
   )
diff --git a/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx b/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
index 5a4fb091b428..f0bd9a8a6f61 100644
--- a/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
+++ b/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
@@ -1,33 +1,26 @@
-/**
- * @file
- *
- * This file contains the logic to get the component for a given plan.
- */
-import * as React from 'react'
+/** @file This file contains the logic to get the component for a given plan. */
+import type { ReactNode } from 'react'
 
 import invariant from 'tiny-invariant'
 
-import type * as text from 'enso-common/src/text'
+import { Plan } from 'enso-common/src/services/Backend'
+import type { TextId } from 'enso-common/src/text'
 
 import OpenInNewTabIcon from '#/assets/open.svg'
+import { Button } from '#/components/AriaComponents'
+import { useText, type GetText } from '#/providers/TextProvider'
 
-import * as textProvider from '#/providers/TextProvider'
-
-import * as ariaComponents from '#/components/AriaComponents'
-
-import * as backendModule from '#/services/Backend'
-
-import * as constants from '../../constants'
+import { PLAN_TO_TEXT_ID } from '../../constants'
 import { SubscribeButton, type SubscribeButtonProps } from './components'
 
 /** The component for a plan. */
 export interface ComponentForPlan {
-  readonly pricing: text.TextId
-  readonly features: text.TextId
-  readonly title: text.TextId
-  readonly subtitle: text.TextId
-  readonly learnMore: () => React.ReactNode
-  readonly submitButton: (props: SubscribeButtonProps) => React.ReactNode
+  readonly pricing: TextId
+  readonly features: TextId
+  readonly title: TextId
+  readonly subtitle: TextId
+  readonly learnMore: () => ReactNode
+  readonly submitButton: (props: SubscribeButtonProps) => ReactNode
   readonly elevated?: boolean
 }
 
@@ -35,7 +28,7 @@ export interface ComponentForPlan {
  * Get the component for a given plan.
  * @throws Error if the plan is invalid.
  */
-export function getComponentPerPlan(plan: backendModule.Plan, getText: textProvider.GetText) {
+export function getComponentPerPlan(plan: Plan, getText: GetText) {
   const result = COMPONENT_PER_PLAN[plan]
 
   // We double-check that the plan exists in the map.
@@ -48,21 +41,21 @@ export function getComponentPerPlan(plan: backendModule.Plan, getText: textProvi
   }
 }
 
-const COMPONENT_PER_PLAN: Record<backendModule.Plan, ComponentForPlan> = {
+const COMPONENT_PER_PLAN: Record<Plan, ComponentForPlan> = {
   free: {
     learnMore: () => null,
     pricing: 'freePlanPricing',
     features: 'freePlanFeatures',
-    title: constants.PLAN_TO_TEXT_ID['free'],
+    title: PLAN_TO_TEXT_ID['free'],
     subtitle: 'freePlanSubtitle',
     submitButton: (props) => <SubscribeButton {...props} isDisabled={true} />,
   },
-  [backendModule.Plan.solo]: {
+  [Plan.solo]: {
     learnMore: () => {
-      const { getText } = textProvider.useText()
+      const { getText } = useText()
 
       return (
-        <ariaComponents.Button
+        <Button
           variant="link"
           href="https://enso.org/pricing"
           target="_blank"
@@ -71,21 +64,21 @@ const COMPONENT_PER_PLAN: Record<backendModule.Plan, ComponentForPlan> = {
           size="medium"
         >
           {getText('learnMore')}
-        </ariaComponents.Button>
+        </Button>
       )
     },
     pricing: 'soloPlanPricing',
     submitButton: SubscribeButton,
     features: 'soloPlanFeatures',
     subtitle: 'soloPlanSubtitle',
-    title: constants.PLAN_TO_TEXT_ID['solo'],
+    title: PLAN_TO_TEXT_ID['solo'],
   },
-  [backendModule.Plan.team]: {
+  [Plan.team]: {
     learnMore: () => {
-      const { getText } = textProvider.useText()
+      const { getText } = useText()
 
       return (
-        <ariaComponents.Button
+        <Button
           variant="link"
           href="https://enso.org/pricing"
           target="_blank"
@@ -94,22 +87,22 @@ const COMPONENT_PER_PLAN: Record<backendModule.Plan, ComponentForPlan> = {
           size="medium"
         >
           {getText('learnMore')}
-        </ariaComponents.Button>
+        </Button>
       )
     },
     pricing: 'teamPlanPricing',
     features: 'teamPlanFeatures',
-    title: constants.PLAN_TO_TEXT_ID['team'],
+    title: PLAN_TO_TEXT_ID['team'],
     subtitle: 'teamPlanSubtitle',
     elevated: true,
     submitButton: SubscribeButton,
   },
-  [backendModule.Plan.enterprise]: {
+  [Plan.enterprise]: {
     learnMore: () => {
-      const { getText } = textProvider.useText()
+      const { getText } = useText()
 
       return (
-        <ariaComponents.Button
+        <Button
           variant="link"
           href="https://enso.org/pricing"
           target="_blank"
@@ -118,20 +111,20 @@ const COMPONENT_PER_PLAN: Record<backendModule.Plan, ComponentForPlan> = {
           size="medium"
         >
           {getText('learnMore')}
-        </ariaComponents.Button>
+        </Button>
       )
     },
     pricing: 'enterprisePlanPricing',
     features: 'enterprisePlanFeatures',
-    title: constants.PLAN_TO_TEXT_ID['enterprise'],
+    title: PLAN_TO_TEXT_ID['enterprise'],
     subtitle: 'enterprisePlanSubtitle',
     submitButton: () => {
-      const { getText } = textProvider.useText()
+      const { getText } = useText()
 
       return (
-        <ariaComponents.Button fullWidth isDisabled variant="outline" size="medium" rounded="full">
+        <Button fullWidth isDisabled variant="outline" size="medium" rounded="full">
           {getText('comingSoon')}
-        </ariaComponents.Button>
+        </Button>
       )
     },
   },
diff --git a/app/gui/src/dashboard/modules/payments/constants.ts b/app/gui/src/dashboard/modules/payments/constants.ts
index f6fc064abfe9..ae04181d48d9 100644
--- a/app/gui/src/dashboard/modules/payments/constants.ts
+++ b/app/gui/src/dashboard/modules/payments/constants.ts
@@ -1,32 +1,31 @@
 /** @file Constants for the subscribe page. */
-import type * as text from 'enso-common/src/text'
-
-import * as backendModule from '#/services/Backend'
+import { Plan } from 'enso-common/src/services/Backend'
+import type { TextId } from 'enso-common/src/text'
 
 /* eslint-disable @typescript-eslint/no-magic-numbers, @typescript-eslint/naming-convention */
 
 /** The text id for the plan name. */
-export const PLAN_TO_TEXT_ID: Readonly<Record<backendModule.Plan, text.TextId>> = {
-  [backendModule.Plan.free]: 'freePlanName',
-  [backendModule.Plan.solo]: 'soloPlanName',
-  [backendModule.Plan.team]: 'teamPlanName',
-  [backendModule.Plan.enterprise]: 'enterprisePlanName',
-} satisfies { [Plan in backendModule.Plan]: `${Plan}PlanName` }
+export const PLAN_TO_TEXT_ID: Readonly<Record<Plan, TextId>> = {
+  [Plan.free]: 'freePlanName',
+  [Plan.solo]: 'soloPlanName',
+  [Plan.team]: 'teamPlanName',
+  [Plan.enterprise]: 'enterprisePlanName',
+} satisfies { [PlanType in Plan]: `${PlanType}PlanName` }
 /** The text id for the plan name. */
-export const PLAN_TO_UPGRADE_LABEL_ID: Readonly<Record<backendModule.Plan, text.TextId>> = {
-  [backendModule.Plan.free]: 'freePlanUpgradeLabel',
-  [backendModule.Plan.solo]: 'soloPlanUpgradeLabel',
-  [backendModule.Plan.team]: 'teamPlanUpgradeLabel',
-  [backendModule.Plan.enterprise]: 'enterprisePlanUpgradeLabel',
-} satisfies { [Plan in backendModule.Plan]: `${Plan}PlanUpgradeLabel` }
+export const PLAN_TO_UPGRADE_LABEL_ID: Readonly<Record<Plan, TextId>> = {
+  [Plan.free]: 'freePlanUpgradeLabel',
+  [Plan.solo]: 'soloPlanUpgradeLabel',
+  [Plan.team]: 'teamPlanUpgradeLabel',
+  [Plan.enterprise]: 'enterprisePlanUpgradeLabel',
+} satisfies { [PlanType in Plan]: `${PlanType}PlanUpgradeLabel` }
 
 export const PRICE_CURRENCY = 'USD'
-export const PRICE_BY_PLAN: Readonly<Record<backendModule.Plan, number>> = {
-  [backendModule.Plan.free]: 0,
-  [backendModule.Plan.solo]: 60,
-  [backendModule.Plan.team]: 150,
-  [backendModule.Plan.enterprise]: 250,
-} satisfies { [Plan in backendModule.Plan]: number }
+export const PRICE_BY_PLAN: Readonly<Record<Plan, number>> = {
+  [Plan.free]: 0,
+  [Plan.solo]: 60,
+  [Plan.team]: 150,
+  [Plan.enterprise]: 250,
+} satisfies { [PlanType in Plan]: number }
 
 export const DISCOUNT_MULTIPLIER_BY_DURATION: Record<number, number> = {
   1: 1,
@@ -37,9 +36,9 @@ export const DISCOUNT_MULTIPLIER_BY_DURATION: Record<number, number> = {
 export const TRIAL_DURATION_DAYS = 30
 
 const TEAM_PLAN_MAX_SEATS = 10
-export const MAX_SEATS_BY_PLAN: Record<backendModule.Plan, number> = {
-  [backendModule.Plan.enterprise]: Infinity,
-  [backendModule.Plan.team]: TEAM_PLAN_MAX_SEATS,
-  [backendModule.Plan.solo]: 1,
-  [backendModule.Plan.free]: 1,
+export const MAX_SEATS_BY_PLAN: Record<Plan, number> = {
+  [Plan.enterprise]: Infinity,
+  [Plan.team]: TEAM_PLAN_MAX_SEATS,
+  [Plan.solo]: 1,
+  [Plan.free]: 1,
 }
diff --git a/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx b/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx
index b9218f4376c0..94e3dc9a1ec6 100644
--- a/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx
+++ b/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx
@@ -1,42 +1,33 @@
-/**
- * @file
- * Setup page
- */
-import * as React from 'react'
+/** @file Setup page. */
+import type { ComponentType } from 'react'
 
 import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom'
 import invariant from 'tiny-invariant'
 
-import type * as text from 'enso-common/src/text'
-
-import ArrowRight from '#/assets/arrow_right.svg'
+import { Plan } from 'enso-common/src/services/Backend'
+import type { TextId } from 'enso-common/src/text'
 
 import { DASHBOARD_PATH, LOGIN_PATH } from '#/appUtils'
-
-import { useIsFirstRender } from '#/hooks/mountHooks'
-
-import { useAuth, UserSessionType, useUserSession } from '#/providers/AuthProvider'
-import { useRemoteBackend } from '#/providers/BackendProvider'
-import * as textProvider from '#/providers/TextProvider'
-
-import * as ariaComponents from '#/components/AriaComponents'
+import ArrowRight from '#/assets/arrow_right.svg'
+import { Button, ButtonGroup, Form, Input, Separator, Text } from '#/components/AriaComponents'
 import Page from '#/components/Page'
-import * as stepper from '#/components/Stepper'
-
-import { ORGANIZATION_NAME_MAX_LENGTH } from '#/modals/SetupOrganizationAfterSubscribe'
-
+import { Stepper, useStepperState } from '#/components/Stepper'
 import { backendMutationOptions } from '#/hooks/backendHooks'
+import { useIsFirstRender } from '#/hooks/mountHooks'
 import { InviteUsersForm } from '#/modals/InviteUsersModal'
+import { ORGANIZATION_NAME_MAX_LENGTH } from '#/modals/SetupOrganizationAfterSubscribe'
 import { PlanSelector } from '#/modules/payments'
-import { Plan } from '#/services/Backend'
+import { useAuth, UserSessionType, useUserSession } from '#/providers/AuthProvider'
+import { useRemoteBackend } from '#/providers/BackendProvider'
+import { useText } from '#/providers/TextProvider'
 
 /** Step in the setup process */
 interface Step {
-  readonly title: text.TextId
-  readonly description?: text.TextId
-  readonly text?: text.TextId
-  readonly component?: React.ComponentType<Context>
+  readonly title: TextId
+  readonly description?: TextId
+  readonly text?: TextId
+  readonly component?: ComponentType<Context>
   readonly canSkip?: boolean | ((context: Context) => boolean)
   readonly hideNext?: boolean | ((context: Context) => boolean)
   readonly hidePrevious?: boolean | ((context: Context) => boolean)
@@ -60,14 +51,14 @@ const BASE_STEPS: Step[] = [
     component: function SetUsernameStep({ session, goToNextStep }) {
       const { setUsername } = useAuth()
       const userSession = useUserSession()
-      const { getText } = textProvider.useText()
+      const { getText } = useText()
 
       const isUserCreated = userSession?.type === UserSessionType.full
       const defaultName =
         session && 'user' in session ? session.user.name : userSession?.email ?? ''
 
       return (
-        <ariaComponents.Form
+        <Form
           className="max-w-96"
           schema={(z) =>
             z.object({
@@ -88,19 +79,17 @@ const BASE_STEPS: Step[] = [
             goToNextStep()
           }}
         >
-          <ariaComponents.Input
+          <Input
             name="username"
             label={getText('userNameSettingsInput')}
             placeholder={getText('usernamePlaceholder')}
             description="Minimum 3 characters, maximum 48 characters"
           />
 
-          <ariaComponents.Form.Submit variant="primary">
-            {getText('next')}
-          </ariaComponents.Form.Submit>
+          <Form.Submit variant="primary">{getText('next')}</Form.Submit>
 
-          <ariaComponents.Form.FormError />
-        </ariaComponents.Form>
+          <Form.FormError />
+        </Form>
       )
     },
   },
@@ -141,7 +130,7 @@ const BASE_STEPS: Step[] = [
     hidePrevious: true,
     /** Setup step for setting organization name. */
     component: function SetOrganizationNameStep({ goToNextStep, goToPreviousStep, session }) {
-      const { getText } = textProvider.useText()
+      const { getText } = useText()
       const remoteBackend = useRemoteBackend()
       const userId = session && 'user' in session ? session.user.userId : null
 
@@ -160,7 +149,7 @@ const BASE_STEPS: Step[] = [
       )
 
       return (
-        <ariaComponents.Form
+        <Form
           schema={(z) =>
             z.object({ organizationName: z.string().min(1).max(ORGANIZATION_NAME_MAX_LENGTH) })
           }
@@ -172,7 +161,7 @@ const BASE_STEPS: Step[] = [
             }
           }}
         >
-          <ariaComponents.Input
+          <Input
             name="organizationName"
             autoComplete="off"
             label={getText('organizationNameSettingsInput')}
@@ -182,18 +171,16 @@ const BASE_STEPS: Step[] = [
             )}
           />
 
-          <ariaComponents.ButtonGroup align="start">
-            <ariaComponents.Button variant="outline" onPress={goToPreviousStep}>
+          <ButtonGroup align="start">
+            <Button variant="outline" onPress={goToPreviousStep}>
               {getText('back')}
-            </ariaComponents.Button>
+            </Button>
 
-            <ariaComponents.Form.Submit variant="primary">
-              {getText('next')}
-            </ariaComponents.Form.Submit>
-          </ariaComponents.ButtonGroup>
+            <Form.Submit variant="primary">{getText('next')}</Form.Submit>
+          </ButtonGroup>
 
-          <ariaComponents.Form.FormError />
-        </ariaComponents.Form>
+          <Form.FormError />
+        </Form>
       )
     },
   },
@@ -212,21 +199,21 @@ const BASE_STEPS: Step[] = [
     hidePrevious: true,
     /** Setup step for inviting users to the organization. */
     component: function InviteUsersStep({ goToNextStep, goToPreviousStep }) {
-      const { getText } = textProvider.useText()
+      const { getText } = useText()
 
       return (
         <div className="max-w-96">
           <InviteUsersForm onSubmitted={goToNextStep} />
 
-          <ariaComponents.ButtonGroup align="start" className="mt-4">
-            <ariaComponents.Button variant="outline" onPress={goToPreviousStep}>
+          <ButtonGroup align="start" className="mt-4">
+            <Button variant="outline" onPress={goToPreviousStep}>
               {getText('back')}
-            </ariaComponents.Button>
+            </Button>
 
-            <ariaComponents.Button variant="ghost-fading" onPress={goToNextStep}>
+            <Button variant="ghost-fading" onPress={goToNextStep}>
               {getText('skip')}
-            </ariaComponents.Button>
-          </ariaComponents.ButtonGroup>
+            </Button>
+          </ButtonGroup>
         </div>
       )
     },
@@ -246,7 +233,7 @@ const BASE_STEPS: Step[] = [
     hidePrevious: true,
     /** Setup step for creating the first user group. */
     component: function CreateUserGroupStep({ goToNextStep, goToPreviousStep }) {
-      const { getText } = textProvider.useText()
+      const { getText } = useText()
       const remoteBackend = useRemoteBackend()
 
       const defaultUserGroupMaxLength = 64
@@ -279,30 +266,28 @@ const BASE_STEPS: Step[] = [
       )
 
       return (
-        <ariaComponents.Form
+        <Form
           schema={(z) => z.object({ groupName: z.string().min(1).max(defaultUserGroupMaxLength) })}
           className="max-w-96"
           onSubmit={({ groupName }) => createUserGroupMutation.mutateAsync([{ name: groupName }])}
         >
-          <ariaComponents.Input
+          <Input
             name="groupName"
             autoComplete="off"
             label={getText('groupNameSettingsInput')}
             description={getText('groupNameSettingsInputDescription', defaultUserGroupMaxLength)}
           />
 
-          <ariaComponents.ButtonGroup align="start">
-            <ariaComponents.Button variant="outline" onPress={goToPreviousStep}>
+          <ButtonGroup align="start">
+            <Button variant="outline" onPress={goToPreviousStep}>
               {getText('back')}
-            </ariaComponents.Button>
+            </Button>
 
-            <ariaComponents.Form.Submit variant="primary">
-              {getText('next')}
-            </ariaComponents.Form.Submit>
-          </ariaComponents.ButtonGroup>
+            <Form.Submit variant="primary">{getText('next')}</Form.Submit>
+          </ButtonGroup>
 
-          <ariaComponents.Form.FormError />
-        </ariaComponents.Form>
+          <Form.FormError />
+        </Form>
       )
     },
   },
@@ -313,18 +298,18 @@ const BASE_STEPS: Step[] = [
     hidePrevious: true,
     /** Final setup step. */
     component: function AllSetStep({ goToPreviousStep }) {
-      const { getText } = textProvider.useText()
+      const { getText } = useText()
 
       const navigate = useNavigate()
       const queryClient = useQueryClient()
 
       return (
-        <ariaComponents.ButtonGroup align="start">
-          <ariaComponents.Button variant="outline" onPress={goToPreviousStep}>
+        <ButtonGroup align="start">
+          <Button variant="outline" onPress={goToPreviousStep}>
             {getText('back')}
-          </ariaComponents.Button>
+          </Button>
 
-          <ariaComponents.Button
+          <Button
             variant="primary"
             size="medium"
             icon={ArrowRight}
@@ -340,8 +325,8 @@ const BASE_STEPS: Step[] = [
             }
           >
             {getText('goToDashboard')}
-          </ariaComponents.Button>
-        </ariaComponents.ButtonGroup>
+          </Button>
+        </ButtonGroup>
       )
     },
   },
@@ -349,7 +334,7 @@ const BASE_STEPS: Step[] = [
 
 /** Setup page */
 export function Setup() {
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
   const { session } = useAuth()
   const isFirstRender = useIsFirstRender()
 
@@ -360,7 +345,7 @@ export function Setup() {
   const steps = BASE_STEPS
   const isDebug = searchParams.get('__qd-debg__') === 'true'
 
-  const { stepperState, nextStep, previousStep, currentStep } = stepper.useStepperState({
+  const { stepperState, nextStep, previousStep, currentStep } = useStepperState({
     steps: steps.length,
     onStepChange: (step, direction) => {
       const screen = steps[step]
@@ -422,11 +407,11 @@ export function Setup() {
     <Page>
       <div className="flex flex-1 flex-col overflow-y-auto">
         <div className="mx-auto my-24 w-full max-w-screen-xl px-8 py-6">
-          <ariaComponents.Text.Heading level="1" className="mb-4">
+          <Text.Heading level="1" className="mb-4">
             {getText('setupEnso')}
-          </ariaComponents.Text.Heading>
+          </Text.Heading>
 
-          <stepper.Stepper
+          <Stepper
             state={stepperState}
             renderStep={(stepProps) => {
               const step = steps[stepProps.index]
@@ -434,47 +419,45 @@ export function Setup() {
               invariant(step != null, 'Step not found')
 
               return (
-                <stepper.Stepper.Step
+                <Stepper.Step
                   {...stepProps}
                   title={getText(step.title)}
                   description={step.description && getText(step.description)}
                   isDisabled={step.ignore?.(context) ?? false}
                 >
-                  {!stepProps.isLast && <ariaComponents.Separator variant="current" />}
-                </stepper.Stepper.Step>
+                  {!stepProps.isLast && <Separator variant="current" />}
+                </Stepper.Step>
               )
             }}
           >
             {({ isLast, isFirst }) => (
               <div className="flex w-full flex-col gap-6">
-                {currentScreen.text && (
-                  <ariaComponents.Text>{getText(currentScreen.text)}</ariaComponents.Text>
-                )}
+                {currentScreen.text && <Text>{getText(currentScreen.text)}</Text>}
 
                 {currentScreen.component && <currentScreen.component {...context} />}
 
-                <ariaComponents.ButtonGroup align="start">
+                <ButtonGroup align="start">
                   {isFirst || hidePrevious ? null : (
-                    <ariaComponents.Button variant="outline" onPress={previousStep}>
+                    <Button variant="outline" onPress={previousStep}>
                       {getText('back')}
-                    </ariaComponents.Button>
+                    </Button>
                   )}
 
                   {canSkip && (
-                    <ariaComponents.Button variant="ghost" onPress={nextStep}>
+                    <Button variant="ghost" onPress={nextStep}>
                       {getText('skip')}
-                    </ariaComponents.Button>
+                    </Button>
                   )}
 
                   {!hideNext && !isLast && (
-                    <ariaComponents.Button variant="primary" onPress={nextStep}>
+                    <Button variant="primary" onPress={nextStep}>
                       {getText('next')}
-                    </ariaComponents.Button>
+                    </Button>
                   )}
-                </ariaComponents.ButtonGroup>
+                </ButtonGroup>
               </div>
             )}
-          </stepper.Stepper>
+          </Stepper>
         </div>
       </div>
     </Page>
diff --git a/app/gui/src/dashboard/pages/dashboard/Dashboard.tsx b/app/gui/src/dashboard/pages/dashboard/Dashboard.tsx
index 05054a6deac3..7ef1ff6a50b8 100644
--- a/app/gui/src/dashboard/pages/dashboard/Dashboard.tsx
+++ b/app/gui/src/dashboard/pages/dashboard/Dashboard.tsx
@@ -2,20 +2,38 @@
  * @file Main dashboard component, responsible for listing user's projects as well as other
  * interactive components.
  */
-import * as React from 'react'
+import { useEffect, useRef, useState } from 'react'
 
-import * as detect from 'enso-common/src/detect'
-
-import { DashboardTabBar } from './DashboardTabBar'
+import { usePrefetchQuery } from '@tanstack/react-query'
 
-import * as eventCallbacks from '#/hooks/eventCallbackHooks'
-import * as projectHooks from '#/hooks/projectHooks'
-import * as searchParamsState from '#/hooks/searchParamsStateHooks'
+import { isOnElectron, platform, Platform } from 'enso-common/src/detect'
+import { BackendType, Path } from 'enso-common/src/services/Backend'
+import { baseName } from 'enso-common/src/utilities/data/fileInfo'
 
-import * as authProvider from '#/providers/AuthProvider'
-import * as backendProvider from '#/providers/BackendProvider'
-import * as inputBindingsProvider from '#/providers/InputBindingsProvider'
-import * as modalProvider from '#/providers/ModalProvider'
+import { Tabs } from '#/components/aria'
+import Page from '#/components/Page'
+import AssetListEventType from '#/events/AssetListEventType'
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import {
+  useCloseAllProjects,
+  useCloseProject,
+  useOpenEditor,
+  useOpenProject,
+} from '#/hooks/projectHooks'
+import { useSearchParamsState } from '#/hooks/searchParamsStateHooks'
+import type { AssetManagementApi } from '#/layouts/AssetsTable'
+import { Category, CATEGORY_SCHEMA } from '#/layouts/CategorySwitcher/Category'
+import Chat from '#/layouts/Chat'
+import ChatPlaceholder from '#/layouts/ChatPlaceholder'
+import EventListProvider, { useDispatchAssetListEvent } from '#/layouts/Drive/EventListProvider'
+import type { GraphEditorRunner } from '#/layouts/Editor'
+import UserBar from '#/layouts/UserBar'
+import ManagePermissionsModal from '#/modals/ManagePermissionsModal'
+import { useFullUserSession } from '#/providers/AuthProvider'
+import { useBackend, useLocalBackend } from '#/providers/BackendProvider'
+import { useSetCategory } from '#/providers/DriveProvider'
+import { useInputBindings } from '#/providers/InputBindingsProvider'
+import { useModalRef, useSetModal } from '#/providers/ModalProvider'
 import ProjectsProvider, {
   TabType,
   useClearLaunchedProjects,
@@ -25,43 +43,19 @@ import ProjectsProvider, {
   useSetPage,
   type LaunchedProject,
 } from '#/providers/ProjectsProvider'
-
-import AssetListEventType from '#/events/AssetListEventType'
-
-import type * as assetTable from '#/layouts/AssetsTable'
-import * as categoryModule from '#/layouts/CategorySwitcher/Category'
-import Chat from '#/layouts/Chat'
-import ChatPlaceholder from '#/layouts/ChatPlaceholder'
-import EventListProvider, * as eventListProvider from '#/layouts/Drive/EventListProvider'
-import type * as editor from '#/layouts/Editor'
-import UserBar from '#/layouts/UserBar'
-
-import * as aria from '#/components/aria'
-import Page from '#/components/Page'
-
-import ManagePermissionsModal from '#/modals/ManagePermissionsModal'
-
-import * as backendModule from '#/services/Backend'
-import * as localBackendModule from '#/services/LocalBackend'
-import * as projectManager from '#/services/ProjectManager'
-
-import { useSetCategory } from '#/providers/DriveProvider'
-import { baseName } from '#/utilities/fileInfo'
+import { newDirectoryId, newProjectId } from '#/services/LocalBackend'
+import { UUID } from '#/services/ProjectManager'
 import { tryFindSelfPermission } from '#/utilities/permissions'
 import { STATIC_QUERY_OPTIONS } from '#/utilities/reactQuery'
-import * as sanitizedEventTargets from '#/utilities/sanitizedEventTargets'
-import { usePrefetchQuery } from '@tanstack/react-query'
+import { document } from '#/utilities/sanitizedEventTargets'
+import { DashboardTabBar } from './DashboardTabBar'
 import { DashboardTabPanels } from './DashboardTabPanels'
 
-// =================
-// === Dashboard ===
-// =================
-
 /** Props for {@link Dashboard}s that are common to all platforms. */
 export interface DashboardProps {
   /** Whether the application may have the local backend running. */
   readonly supportsLocalBackend: boolean
-  readonly appRunner: editor.GraphEditorRunner | null
+  readonly appRunner: GraphEditorRunner | null
   readonly initialProjectName: string | null
   readonly ydocUrl: string | null
 }
@@ -83,7 +77,7 @@ function fileURLToPath(url: string): string | null {
     const parsed = new URL(url)
     if (parsed.protocol === 'file:') {
       return decodeURIComponent(
-        detect.platform() === detect.Platform.windows ?
+        platform() === Platform.windows ?
           // On Windows, we must remove leading `/` from URL.
           parsed.pathname.slice(1)
         : parsed.pathname,
@@ -99,39 +93,37 @@ function fileURLToPath(url: string): string | null {
 /** The component that contains the entire UI. */
 function DashboardInner(props: DashboardProps) {
   const { appRunner, initialProjectName: initialProjectNameRaw, ydocUrl } = props
-  const { user } = authProvider.useFullUserSession()
-  const localBackend = backendProvider.useLocalBackend()
-  const { modalRef } = modalProvider.useModalRef()
-  const { updateModal, unsetModal, setModal } = modalProvider.useSetModal()
-  const inputBindings = inputBindingsProvider.useInputBindings()
-  const [isHelpChatOpen, setIsHelpChatOpen] = React.useState(false)
+  const { user } = useFullUserSession()
+  const localBackend = useLocalBackend()
+  const { modalRef } = useModalRef()
+  const { updateModal, unsetModal, setModal } = useSetModal()
+  const inputBindings = useInputBindings()
+  const [isHelpChatOpen, setIsHelpChatOpen] = useState(false)
 
-  const dispatchAssetListEvent = eventListProvider.useDispatchAssetListEvent()
-  const assetManagementApiRef = React.useRef<assetTable.AssetManagementApi | null>(null)
+  const dispatchAssetListEvent = useDispatchAssetListEvent()
+  const assetManagementApiRef = useRef<AssetManagementApi | null>(null)
 
   const initialLocalProjectPath =
     initialProjectNameRaw != null ? fileURLToPath(initialProjectNameRaw) : null
   const initialProjectName = initialLocalProjectPath != null ? null : initialProjectNameRaw
 
-  const [category, setCategoryRaw, resetCategory] =
-    searchParamsState.useSearchParamsState<categoryModule.Category>(
-      'driveCategory',
-      () => (localBackend != null ? { type: 'local' } : { type: 'cloud' }),
-      (value): value is categoryModule.Category =>
-        categoryModule.CATEGORY_SCHEMA.safeParse(value).success,
-    )
+  const [category, setCategoryRaw, resetCategory] = useSearchParamsState<Category>(
+    'driveCategory',
+    () => (localBackend != null ? { type: 'local' } : { type: 'cloud' }),
+    (value): value is Category => CATEGORY_SCHEMA.safeParse(value).success,
+  )
 
-  const initialCategory = React.useRef(category)
+  const initialCategory = useRef(category)
   const setStoreCategory = useSetCategory()
-  React.useEffect(() => {
+  useEffect(() => {
     setStoreCategory(initialCategory.current)
   }, [setStoreCategory])
 
-  const setCategory = eventCallbacks.useEventCallback((newCategory: categoryModule.Category) => {
+  const setCategory = useEventCallback((newCategory: Category) => {
     setCategoryRaw(newCategory)
     setStoreCategory(newCategory)
   })
-  const backend = backendProvider.useBackend(category)
+  const backend = useBackend(category)
 
   const projectsStore = useProjectsStore()
   const page = usePage()
@@ -141,10 +133,10 @@ function DashboardInner(props: DashboardProps) {
   const selectedProject = launchedProjects.find((p) => p.id === page) ?? null
 
   const setPage = useSetPage()
-  const openEditor = projectHooks.useOpenEditor()
-  const openProject = projectHooks.useOpenProject()
-  const closeProject = projectHooks.useCloseProject()
-  const closeAllProjects = projectHooks.useCloseAllProjects()
+  const openEditor = useOpenEditor()
+  const openProject = useOpenProject()
+  const closeProject = useCloseProject()
+  const closeAllProjects = useCloseAllProjects()
   const clearLaunchedProjects = useClearLaunchedProjects()
 
   usePrefetchQuery({
@@ -160,10 +152,10 @@ function DashboardInner(props: DashboardProps) {
           projectName,
         )
         openProject({
-          type: backendModule.BackendType.local,
-          id: localBackendModule.newProjectId(projectManager.UUID(id)),
+          type: BackendType.local,
+          id: newProjectId(UUID(id)),
           title: projectName,
-          parentId: localBackendModule.newDirectoryId(localBackend.rootPath()),
+          parentId: newDirectoryId(localBackend.rootPath()),
         })
       }
       return null
@@ -171,15 +163,15 @@ function DashboardInner(props: DashboardProps) {
     staleTime: Infinity,
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.projectManagementApi?.setOpenProjectHandler((project) => {
       setCategory({ type: 'local' })
-      const projectId = localBackendModule.newProjectId(projectManager.UUID(project.id))
+      const projectId = newProjectId(UUID(project.id))
       openProject({
-        type: backendModule.BackendType.local,
+        type: BackendType.local,
         id: projectId,
         title: project.name,
-        parentId: localBackendModule.newDirectoryId(backendModule.Path(project.parentDirectory)),
+        parentId: newDirectoryId(Path(project.parentDirectory)),
       })
     })
     return () => {
@@ -187,9 +179,9 @@ function DashboardInner(props: DashboardProps) {
     }
   }, [dispatchAssetListEvent, openEditor, openProject, setCategory])
 
-  React.useEffect(
+  useEffect(
     () =>
-      inputBindings.attach(sanitizedEventTargets.document.body, 'keydown', {
+      inputBindings.attach(document.body, 'keydown', {
         closeModal: () => {
           updateModal((oldModal) => {
             if (oldModal == null) {
@@ -208,10 +200,10 @@ function DashboardInner(props: DashboardProps) {
     [inputBindings, modalRef, updateModal, setPage, projectsStore],
   )
 
-  React.useEffect(() => {
-    if (detect.isOnElectron()) {
+  useEffect(() => {
+    if (isOnElectron()) {
       // We want to handle the back and forward buttons in electron the same way as in the browser.
-      return inputBindings.attach(sanitizedEventTargets.document.body, 'keydown', {
+      return inputBindings.attach(document.body, 'keydown', {
         goBack: () => {
           window.navigationApi.goBack()
         },
@@ -222,18 +214,18 @@ function DashboardInner(props: DashboardProps) {
     }
   }, [inputBindings])
 
-  const doRemoveSelf = eventCallbacks.useEventCallback((project: LaunchedProject) => {
+  const doRemoveSelf = useEventCallback((project: LaunchedProject) => {
     dispatchAssetListEvent({ type: AssetListEventType.removeSelf, id: project.id })
     closeProject(project)
   })
 
-  const onSignOut = eventCallbacks.useEventCallback(() => {
+  const onSignOut = useEventCallback(() => {
     setPage(TabType.drive)
     closeAllProjects()
     clearLaunchedProjects()
   })
 
-  const doOpenShareModal = eventCallbacks.useEventCallback(() => {
+  const doOpenShareModal = useEventCallback(() => {
     if (assetManagementApiRef.current != null && selectedProject != null) {
       const asset = assetManagementApiRef.current.getAsset(selectedProject.id)
       const self = tryFindSelfPermission(user, asset?.permissions)
@@ -255,7 +247,7 @@ function DashboardInner(props: DashboardProps) {
     }
   })
 
-  const goToSettings = eventCallbacks.useEventCallback(() => {
+  const goToSettings = useEventCallback(() => {
     setPage(TabType.settings)
   })
 
@@ -268,7 +260,7 @@ function DashboardInner(props: DashboardProps) {
           unsetModal()
         }}
       >
-        <aria.Tabs
+        <Tabs
           className="relative flex min-h-full grow select-none flex-col container-size"
           selectedKey={page}
           onSelectionChange={(newPage) => {
@@ -297,7 +289,7 @@ function DashboardInner(props: DashboardProps) {
             setCategory={setCategory}
             resetCategory={resetCategory}
           />
-        </aria.Tabs>
+        </Tabs>
 
         {process.env.ENSO_CLOUD_CHAT_URL != null ?
           <Chat
diff --git a/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx b/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx
index 81911cbc5a40..54ea4b04acbc 100644
--- a/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx
+++ b/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx
@@ -1,11 +1,12 @@
 /** @file The tab bar for the dashboard page. */
+import type { ProjectId } from 'enso-common/src/services/Backend'
+import type { TextId } from 'enso-common/src/text'
+
 import DriveIcon from '#/assets/drive.svg'
 import NetworkIcon from '#/assets/network.svg'
 import SettingsIcon from '#/assets/settings.svg'
-
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import TabBar from '#/layouts/TabBar'
-
 import {
   TabType,
   useLaunchedProjects,
@@ -14,8 +15,6 @@ import {
   type LaunchedProject,
 } from '#/providers/ProjectsProvider'
 import { useText } from '#/providers/TextProvider'
-import type { ProjectId } from '#/services/Backend'
-import type { TextId } from 'enso-common/src/text'
 
 /** The props for the {@link DashboardTabBar} component. */
 export interface DashboardTabBarProps {
diff --git a/app/gui/src/dashboard/pages/dashboard/DashboardTabPanels.tsx b/app/gui/src/dashboard/pages/dashboard/DashboardTabPanels.tsx
index 8ddf9130a14c..5951c142ed29 100644
--- a/app/gui/src/dashboard/pages/dashboard/DashboardTabPanels.tsx
+++ b/app/gui/src/dashboard/pages/dashboard/DashboardTabPanels.tsx
@@ -1,7 +1,9 @@
 /** @file The tab panels for the dashboard page. */
+import { Collection } from 'react-aria-components'
 
-import * as aria from '#/components/aria'
+import type { ProjectId } from 'enso-common/src/services/Backend'
 
+import * as aria from '#/components/aria'
 import { ErrorBoundary } from '#/components/ErrorBoundary'
 import { Suspense } from '#/components/Suspense'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
@@ -13,8 +15,6 @@ import type { GraphEditorRunner } from '#/layouts/Editor'
 import Editor from '#/layouts/Editor'
 import Settings from '#/layouts/Settings'
 import { TabType, useLaunchedProjects, usePage } from '#/providers/ProjectsProvider'
-import type { ProjectId } from '#/services/Backend'
-import { Collection } from 'react-aria-components'
 
 /** The props for the {@link DashboardTabPanels} component. */
 export interface DashboardTabPanelsProps {
diff --git a/app/gui/src/dashboard/pages/subscribe/Subscribe/Subscribe.tsx b/app/gui/src/dashboard/pages/subscribe/Subscribe/Subscribe.tsx
index c66a86b2c319..dd5c9eb44960 100644
--- a/app/gui/src/dashboard/pages/subscribe/Subscribe/Subscribe.tsx
+++ b/app/gui/src/dashboard/pages/subscribe/Subscribe/Subscribe.tsx
@@ -1,13 +1,14 @@
 /** @file A page in which the currently active payment plan can be changed. */
 import { useNavigate, useSearchParams } from 'react-router-dom'
 
+import { isPlan } from 'enso-common/src/services/Backend'
+
 import { DASHBOARD_PATH, SUBSCRIBE_SUCCESS_PATH } from '#/appUtils'
 import Back from '#/assets/arrow_left.svg'
 import { Button, Text } from '#/components/AriaComponents'
 import { PlanSelector } from '#/modules/payments'
 import { useFullUserSession } from '#/providers/AuthProvider'
 import { useText } from '#/providers/TextProvider'
-import { isPlan } from '#/services/Backend'
 
 /**
  * A page in which the currently active payment plan can be changed.
diff --git a/app/gui/src/dashboard/pages/subscribe/SubscribeSuccess.tsx b/app/gui/src/dashboard/pages/subscribe/SubscribeSuccess.tsx
index 151705a2799d..1a9bcff0cf16 100644
--- a/app/gui/src/dashboard/pages/subscribe/SubscribeSuccess.tsx
+++ b/app/gui/src/dashboard/pages/subscribe/SubscribeSuccess.tsx
@@ -1,50 +1,47 @@
 /** @file A page to show when a user successfully subscribes to a plan. */
-import * as router from 'react-router'
-import * as routerDom from 'react-router-dom'
+import { Navigate } from 'react-router'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 
-import * as appUtils from '#/appUtils'
+import { Plan, isPlan } from 'enso-common/src/services/Backend'
 
-import * as textProvider from '#/providers/TextProvider'
+import { DASHBOARD_PATH } from '#/appUtils'
 
-import * as ariaComponents from '#/components/AriaComponents'
-import * as result from '#/components/Result'
+import { useText } from '#/providers/TextProvider'
 
-import { PLAN_TO_TEXT_ID } from '#/modules/payments'
-import { Plan, isPlan } from '#/services/Backend'
+import { Button, ButtonGroup } from '#/components/AriaComponents'
+import { Result } from '#/components/Result'
 
-// ========================
-// === SubscribeSuccess ===
-// ========================
+import { PLAN_TO_TEXT_ID } from '#/modules/payments'
 
 /** A page to show when a user successfully subscribes to a plan. */
 export function SubscribeSuccess() {
-  const { getText } = textProvider.useText()
-  const [searchParams] = routerDom.useSearchParams()
-  const navigate = routerDom.useNavigate()
+  const { getText } = useText()
+  const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
   const plan = searchParams.get('plan') ?? Plan.solo
 
   if (!isPlan(plan)) {
-    return <router.Navigate to={appUtils.DASHBOARD_PATH} replace />
+    return <Navigate to={DASHBOARD_PATH} replace />
   } else {
     return (
-      <result.Result
+      <Result
         className="h-full"
         title={getText('subscribeSuccessTitle')}
         subtitle={getText('subscribeSuccessSubtitle', getText(PLAN_TO_TEXT_ID[plan]))}
         status="success"
       >
-        <ariaComponents.ButtonGroup align="center">
-          <ariaComponents.Button
+        <ButtonGroup align="center">
+          <Button
             variant="submit"
             size="large"
             onPress={() => {
-              navigate(appUtils.DASHBOARD_PATH)
+              navigate(DASHBOARD_PATH)
             }}
           >
             {getText('subscribeSuccessSubmit')}
-          </ariaComponents.Button>
-        </ariaComponents.ButtonGroup>
-      </result.Result>
+          </Button>
+        </ButtonGroup>
+      </Result>
     )
   }
 }
diff --git a/app/gui/src/dashboard/providers/AuthProvider.tsx b/app/gui/src/dashboard/providers/AuthProvider.tsx
index 52904c585e2c..b1e634ce12e1 100644
--- a/app/gui/src/dashboard/providers/AuthProvider.tsx
+++ b/app/gui/src/dashboard/providers/AuthProvider.tsx
@@ -5,44 +5,60 @@
  * can be used from any React component to access the currently logged-in user's session data. The
  * hook also provides methods for registering a user, logging in, logging out, etc.
  */
-import * as React from 'react'
-
-import * as sentry from '@sentry/react'
-import * as reactQuery from '@tanstack/react-query'
-import * as router from 'react-router-dom'
-import * as toast from 'react-toastify'
+import { createContext, useCallback, useContext, useEffect, useId, type ReactNode } from 'react'
+
+import { setUser as sentrySetUser } from '@sentry/react'
+import {
+  queryOptions,
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+  type QueryKey,
+  type QueryObserverResult,
+  type RefetchOptions,
+} from '@tanstack/react-query'
+import { Navigate, Outlet, useNavigate } from 'react-router-dom'
+import { toast } from 'react-toastify'
 import invariant from 'tiny-invariant'
 
-import * as detect from 'enso-common/src/detect'
-import * as gtag from 'enso-common/src/gtag'
+import { architecture, platform } from 'enso-common/src/detect'
+import { event, gtag } from 'enso-common/src/gtag'
+import {
+  EmailAddress,
+  NotAuthorizedError,
+  OrganizationId,
+  type CreateUserRequestBody,
+  type UpdateUserRequestBody,
+  type User,
+} from 'enso-common/src/services/Backend'
+import { UnreachableCaseError } from 'enso-common/src/utilities/error'
 
-import * as appUtils from '#/appUtils'
+import { DASHBOARD_PATH, LOGIN_PATH, RESTORE_USER_PATH, SETUP_PATH } from '#/appUtils'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import * as gtagHooks from '#/hooks/gtagHooks'
+import { gtagOpenCloseCallback } from '#/hooks/gtagHooks'
 
-import * as backendProvider from '#/providers/BackendProvider'
-import * as localStorageProvider from '#/providers/LocalStorageProvider'
-import * as modalProvider from '#/providers/ModalProvider'
-import * as sessionProvider from '#/providers/SessionProvider'
-import * as textProvider from '#/providers/TextProvider'
+import { useRemoteBackend } from '#/providers/BackendProvider'
+import { useLocalStorage } from '#/providers/LocalStorageProvider'
+import { useSetModal } from '#/providers/ModalProvider'
+import { useSession } from '#/providers/SessionProvider'
+import { useText } from '#/providers/TextProvider'
 
-import * as ariaComponents from '#/components/AriaComponents'
-import * as resultComponent from '#/components/Result'
+import { Dialog } from '#/components/AriaComponents'
+import { Result } from '#/components/Result'
 
-import * as backendModule from '#/services/Backend'
 import type RemoteBackend from '#/services/RemoteBackend'
 
-import * as errorModule from '#/utilities/error'
-
-import * as cognitoModule from '#/authentication/cognito'
-import type * as authServiceModule from '#/authentication/service'
+import {
+  CognitoErrorType,
+  type Cognito,
+  type CognitoUser,
+  type UserSession as CognitoUserSession,
+  type UserSessionChallenge,
+} from '#/authentication/cognito'
+import type { AuthService } from '#/authentication/service'
 import { unsafeWriteValue } from '#/utilities/write'
 
-// ===================
-// === UserSession ===
-// ===================
-
 /** Possible types of {@link BaseUserSession}. */
 export enum UserSessionType {
   offline = 'offline',
@@ -51,7 +67,7 @@ export enum UserSessionType {
 }
 
 /** Properties common to all {@link UserSession}s. */
-interface BaseUserSession extends cognitoModule.UserSession {
+interface BaseUserSession extends CognitoUserSession {
   /** A discriminator for TypeScript to be able to disambiguate between `UserSession` variants. */
   readonly type: UserSessionType
 }
@@ -72,7 +88,7 @@ export interface PartialUserSession extends BaseUserSession {
 export interface FullUserSession extends BaseUserSession {
   /** User's organization information. */
   readonly type: UserSessionType.full
-  readonly user: backendModule.User
+  readonly user: User
 }
 
 /**
@@ -81,10 +97,6 @@ export interface FullUserSession extends BaseUserSession {
  */
 export type UserSession = FullUserSession | PartialUserSession
 
-// ===================
-// === AuthContext ===
-// ===================
-
 /**
  * Interface returned by the `useAuth` hook.
  *
@@ -96,7 +108,7 @@ export type UserSession = FullUserSession | PartialUserSession
  */
 interface AuthContextType {
   readonly signUp: (email: string, password: string, organizationId: string | null) => Promise<void>
-  readonly authQueryKey: reactQuery.QueryKey
+  readonly authQueryKey: QueryKey
   readonly confirmSignUp: (email: string, code: string) => Promise<void>
   readonly setUsername: (username: string) => Promise<boolean>
   readonly signInWithGoogle: () => Promise<boolean>
@@ -105,20 +117,20 @@ interface AuthContextType {
     email: string,
     password: string,
   ) => Promise<{
-    readonly challenge: cognitoModule.UserSessionChallenge
-    readonly user: cognitoModule.CognitoUser
+    readonly challenge: UserSessionChallenge
+    readonly user: CognitoUser
   }>
   readonly forgotPassword: (email: string) => Promise<void>
   readonly changePassword: (oldPassword: string, newPassword: string) => Promise<boolean>
   readonly resetPassword: (email: string, code: string, password: string) => Promise<void>
   readonly signOut: () => Promise<void>
   /** @deprecated Never use this function. Prefer particular functions like `setUsername` or `deleteUser`. */
-  readonly setUser: (user: Partial<backendModule.User>) => void
+  readonly setUser: (user: Partial<User>) => void
   readonly deleteUser: () => Promise<boolean>
   readonly restoreUser: () => Promise<boolean>
   readonly refetchSession: (
-    options?: reactQuery.RefetchOptions,
-  ) => Promise<reactQuery.QueryObserverResult<UserSession | null>>
+    options?: RefetchOptions,
+  ) => Promise<QueryObserverResult<UserSession | null>>
   /**
    * Session containing the currently authenticated user's authentication information.
    *
@@ -131,22 +143,18 @@ interface AuthContextType {
   readonly isUserDeleted: () => boolean
   /** Return `true` if the user is soft deleted. */
   readonly isUserSoftDeleted: () => boolean
-  readonly cognito: cognitoModule.Cognito
+  readonly cognito: Cognito
 }
 
-const AuthContext = React.createContext<AuthContextType | null>(null)
-
-// ====================
-// === AuthProvider ===
-// ====================
+const AuthContext = createContext<AuthContextType | null>(null)
 
 /** Query to fetch the user's session data from the backend. */
 function createUsersMeQuery(
-  session: cognitoModule.UserSession | null,
+  session: CognitoUserSession | null,
   remoteBackend: RemoteBackend,
   performLogout: () => Promise<void>,
 ) {
-  return reactQuery.queryOptions({
+  return queryOptions({
     queryKey: [remoteBackend.type, 'usersMe', session?.clientId] as const,
     queryFn: async () => {
       if (session == null) {
@@ -161,7 +169,7 @@ function createUsersMeQuery(
             : ({ type: UserSessionType.full, user, ...session } satisfies FullUserSession)
         })
         .catch((error) => {
-          if (error instanceof backendModule.NotAuthorizedError) {
+          if (error instanceof NotAuthorizedError) {
             return performLogout().then(() => null)
           }
 
@@ -174,31 +182,31 @@ function createUsersMeQuery(
 /** Props for an {@link AuthProvider}. */
 export interface AuthProviderProps {
   readonly shouldStartInOfflineMode: boolean
-  readonly authService: authServiceModule.AuthService
+  readonly authService: AuthService
   /** Callback to execute once the user has authenticated successfully. */
   readonly onAuthenticated: (accessToken: string | null) => void
-  readonly children: React.ReactNode
+  readonly children: ReactNode
 }
 
 /** A React provider for the Cognito API. */
 export default function AuthProvider(props: AuthProviderProps) {
   const { authService, onAuthenticated } = props
   const { children } = props
-  const remoteBackend = backendProvider.useRemoteBackend()
+  const remoteBackend = useRemoteBackend()
   const { cognito } = authService
-  const { session, sessionQueryKey } = sessionProvider.useSession()
-  const { localStorage } = localStorageProvider.useLocalStorage()
-  const { getText } = textProvider.useText()
-  const { unsetModal } = modalProvider.useSetModal()
-  const navigate = router.useNavigate()
-  const toastId = React.useId()
+  const { session, sessionQueryKey } = useSession()
+  const { localStorage } = useLocalStorage()
+  const { getText } = useText()
+  const { unsetModal } = useSetModal()
+  const navigate = useNavigate()
+  const toastId = useId()
 
-  const queryClient = reactQuery.useQueryClient()
+  const queryClient = useQueryClient()
 
   // This component cannot use `useGtagEvent` because `useGtagEvent` depends on the React Context
   // defined by this component.
-  const gtagEvent = React.useCallback((name: string, params?: object) => {
-    gtag.event(name, params)
+  const gtagEvent = useCallback((name: string, params?: object) => {
+    event(name, params)
   }, [])
 
   const performLogout = useEventCallback(async () => {
@@ -209,7 +217,7 @@ export default function AuthProvider(props: AuthProviderProps) {
     gtagEvent('cloud_sign_out')
     cognito.saveAccessToken(null)
     localStorage.clearUserSpecificEntries()
-    sentry.setUser(null)
+    sentrySetUser(null)
 
     await queryClient.invalidateQueries({ queryKey: sessionQueryKey })
     await queryClient.clearWithPersister()
@@ -217,52 +225,52 @@ export default function AuthProvider(props: AuthProviderProps) {
     return Promise.resolve()
   })
 
-  const logoutMutation = reactQuery.useMutation({
+  const logoutMutation = useMutation({
     mutationKey: [remoteBackend.type, 'usersMe', 'logout', session?.clientId] as const,
     mutationFn: performLogout,
     // If the User Menu is still visible, it breaks when `userSession` is set to `null`.
     onMutate: unsetModal,
-    onSuccess: () => toast.toast.success(getText('signOutSuccess')),
-    onError: () => toast.toast.error(getText('signOutError')),
+    onSuccess: () => toast.success(getText('signOutSuccess')),
+    onError: () => toast.error(getText('signOutError')),
     meta: { invalidates: [sessionQueryKey], awaitInvalidates: true },
   })
 
   const usersMeQueryOptions = createUsersMeQuery(session, remoteBackend, async () => {
     await performLogout()
-    toast.toast.info(getText('userNotAuthorizedError'))
+    toast.info(getText('userNotAuthorizedError'))
   })
 
-  const usersMeQuery = reactQuery.useSuspenseQuery(usersMeQueryOptions)
+  const usersMeQuery = useSuspenseQuery(usersMeQueryOptions)
   const userData = usersMeQuery.data
 
-  const createUserMutation = reactQuery.useMutation({
-    mutationFn: (user: backendModule.CreateUserRequestBody) => remoteBackend.createUser(user),
+  const createUserMutation = useMutation({
+    mutationFn: (user: CreateUserRequestBody) => remoteBackend.createUser(user),
     meta: { invalidates: [usersMeQueryOptions.queryKey], awaitInvalidates: true },
   })
 
-  const deleteUserMutation = reactQuery.useMutation({
+  const deleteUserMutation = useMutation({
     mutationFn: () => remoteBackend.deleteUser(),
     meta: { invalidates: [usersMeQueryOptions.queryKey], awaitInvalidates: true },
   })
 
-  const restoreUserMutation = reactQuery.useMutation({
+  const restoreUserMutation = useMutation({
     mutationFn: () => remoteBackend.restoreUser(),
     meta: { invalidates: [usersMeQueryOptions.queryKey], awaitInvalidates: true },
   })
 
-  const updateUserMutation = reactQuery.useMutation({
-    mutationFn: (user: backendModule.UpdateUserRequestBody) => remoteBackend.updateUser(user),
+  const updateUserMutation = useMutation({
+    mutationFn: (user: UpdateUserRequestBody) => remoteBackend.updateUser(user),
     meta: { invalidates: [usersMeQueryOptions.queryKey], awaitInvalidates: true },
   })
 
   const toastSuccess = (message: string) => {
-    toast.toast.update(toastId, {
+    toast.update(toastId, {
       isLoading: null,
       autoClose: null,
       closeOnClick: null,
       closeButton: null,
       draggable: null,
-      type: toast.toast.TYPE.SUCCESS,
+      type: toast.TYPE.SUCCESS,
       render: message,
     })
   }
@@ -286,12 +294,12 @@ export default function AuthProvider(props: AuthProviderProps) {
 
     if (result.err) {
       switch (result.val.type) {
-        case cognitoModule.CognitoErrorType.userAlreadyConfirmed:
-        case cognitoModule.CognitoErrorType.userNotFound: {
+        case CognitoErrorType.userAlreadyConfirmed:
+        case CognitoErrorType.userNotFound: {
           return
         }
         default: {
-          throw new errorModule.UnreachableCaseError(result.val.type)
+          throw new UnreachableCaseError(result.val.type)
         }
       }
     }
@@ -332,9 +340,8 @@ export default function AuthProvider(props: AuthProviderProps) {
 
       await createUserMutation.mutateAsync({
         userName: username,
-        userEmail: backendModule.EmailAddress(email),
-        organizationId:
-          organizationId != null ? backendModule.OrganizationId(organizationId) : null,
+        userEmail: EmailAddress(email),
+        organizationId: organizationId != null ? OrganizationId(organizationId) : null,
       })
     }
     // Wait until the backend returns a value from `users/me`,
@@ -368,12 +375,12 @@ export default function AuthProvider(props: AuthProviderProps) {
    * This only works for full user sessions.
    * @deprecated Never use this function. Prefer particular functions like `setUsername` or `deleteUser`.
    */
-  const setUser = useEventCallback((user: Partial<backendModule.User>) => {
+  const setUser = useEventCallback((user: Partial<User>) => {
     const currentUser = queryClient.getQueryData(usersMeQueryOptions.queryKey)
 
     if (currentUser != null && currentUser.type === UserSessionType.full) {
       const currentUserData = currentUser.user
-      const nextUserData: backendModule.User = Object.assign(currentUserData, user)
+      const nextUserData: User = Object.assign(currentUserData, user)
 
       queryClient.setQueryData(usersMeQueryOptions.queryKey, { ...currentUser, user: nextUserData })
     }
@@ -382,7 +389,7 @@ export default function AuthProvider(props: AuthProviderProps) {
   const forgotPassword = useEventCallback(async (email: string) => {
     const result = await cognito.forgotPassword(email)
     if (result.ok) {
-      navigate(appUtils.LOGIN_PATH)
+      navigate(LOGIN_PATH)
       return
     } else {
       throw new Error(result.val.message)
@@ -393,7 +400,7 @@ export default function AuthProvider(props: AuthProviderProps) {
     const result = await cognito.forgotPasswordSubmit(email, code, password)
 
     if (result.ok) {
-      navigate(appUtils.LOGIN_PATH)
+      navigate(LOGIN_PATH)
       return
     } else {
       throw new Error(result.val.message)
@@ -436,9 +443,9 @@ export default function AuthProvider(props: AuthProviderProps) {
     }
   })
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (userData?.type === UserSessionType.full) {
-      sentry.setUser({
+      sentrySetUser({
         id: userData.user.userId,
         email: userData.email,
         username: userData.user.name,
@@ -448,18 +455,18 @@ export default function AuthProvider(props: AuthProviderProps) {
     }
   }, [userData])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (userData?.type === UserSessionType.partial) {
-      sentry.setUser({ email: userData.email })
+      sentrySetUser({ email: userData.email })
     }
   }, [userData])
 
-  React.useEffect(() => {
-    gtag.gtag('set', { platform: detect.platform(), architecture: detect.architecture() })
-    return gtagHooks.gtagOpenCloseCallback(gtagEvent, 'open_app', 'close_app')
+  useEffect(() => {
+    gtag('set', { platform: platform(), architecture: architecture() })
+    return gtagOpenCloseCallback(gtagEvent, 'open_app', 'close_app')
   }, [gtagEvent])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (userData?.type === UserSessionType.full) {
       onAuthenticated(userData.accessToken)
     }
@@ -512,23 +519,19 @@ export default function AuthProvider(props: AuthProviderProps) {
     <AuthContext.Provider value={value}>
       {children}
 
-      <ariaComponents.Dialog
+      <Dialog
         aria-label={getText('loggingOut')}
         isDismissable={false}
         isKeyboardDismissDisabled
         hideCloseButton
         modalProps={{ isOpen: logoutMutation.isPending }}
       >
-        <resultComponent.Result status="loading" title={getText('loggingOut')} />
-      </ariaComponents.Dialog>
+        <Result status="loading" title={getText('loggingOut')} />
+      </Dialog>
     </AuthContext.Provider>
   )
 }
 
-// ===============
-// === useAuth ===
-// ===============
-
 /**
  * A React hook that provides access to the authentication context.
  *
@@ -537,76 +540,64 @@ export default function AuthProvider(props: AuthProviderProps) {
  * @throws {Error} when used outside a {@link AuthProvider}.
  */
 export function useAuth() {
-  const context = React.useContext(AuthContext)
+  const context = useContext(AuthContext)
 
   invariant(context != null, '`useAuth` must be used within an `<AuthProvider />`.')
 
   return context
 }
 
-// =======================
-// === ProtectedLayout ===
-// =======================
-
 /** A React Router layout route containing routes only accessible by users that are logged in. */
 export function ProtectedLayout() {
   const { session } = useAuth()
 
   if (session == null) {
-    return <router.Navigate to={appUtils.LOGIN_PATH} />
+    return <Navigate to={LOGIN_PATH} />
   } else if (session.type === UserSessionType.partial) {
-    return <router.Navigate to={appUtils.SETUP_PATH} />
+    return <Navigate to={SETUP_PATH} />
   } else {
     return (
       <>
         {/* This div is used as a flag to indicate that the dashboard has been loaded and the user is authenticated. */}
         {/* also it guarantees that the top-level suspense boundary is already resolved */}
         <div data-testid="after-auth-layout" aria-hidden />
-        <router.Outlet context={session} />
+        <Outlet context={session} />
       </>
     )
   }
 }
 
-// ===========================
-// === SemiProtectedLayout ===
-// ===========================
-
 /**
  * A React Router layout route containing routes only accessible by users that are
  * in the process of registering.
  */
 export function SemiProtectedLayout() {
   const { session } = useAuth()
-  const { localStorage } = localStorageProvider.useLocalStorage()
+  const { localStorage } = useLocalStorage()
 
   // The user is not logged in - redirect to the login page.
   if (session == null) {
-    return <router.Navigate to={appUtils.LOGIN_PATH} replace />
+    return <Navigate to={LOGIN_PATH} replace />
     // User is registered, redirect to dashboard or to the redirect path specified during the registration / login.
   } else if (session.type === UserSessionType.full) {
-    const redirectTo = localStorage.delete('loginRedirect') ?? appUtils.DASHBOARD_PATH
-    return <router.Navigate to={redirectTo} replace />
+    const redirectTo = localStorage.delete('loginRedirect') ?? DASHBOARD_PATH
+    return <Navigate to={redirectTo} replace />
     // User is in the process of registration, allow them to complete the registration.
   } else {
-    return <router.Outlet context={session} />
+    return <Outlet context={session} />
   }
 }
 
-// ===================
-// === GuestLayout ===
-// ===================
-
 /**
  * A React Router layout route containing routes only accessible by users that are
  * not logged in.
  */
 export function GuestLayout() {
   const { session } = useAuth()
-  const { localStorage } = localStorageProvider.useLocalStorage()
+  const { localStorage } = useLocalStorage()
 
   if (session?.type === UserSessionType.partial) {
-    return <router.Navigate to={appUtils.SETUP_PATH} />
+    return <Navigate to={SETUP_PATH} />
   } else if (session?.type === UserSessionType.full) {
     const redirectTo = localStorage.get('loginRedirect')
     if (redirectTo != null) {
@@ -614,7 +605,7 @@ export function GuestLayout() {
       location.href = redirectTo
       return
     } else {
-      return <router.Navigate to={appUtils.DASHBOARD_PATH} />
+      return <Navigate to={DASHBOARD_PATH} />
     }
   } else {
     return (
@@ -622,7 +613,7 @@ export function GuestLayout() {
         {/* This div is used as a flag to indicate that the user is not logged in. */}
         {/* also it guarantees that the top-level suspense boundary is already resolved */}
         <div data-testid="before-auth-layout" aria-hidden />
-        <router.Outlet />
+        <Outlet />
       </>
     )
   }
@@ -633,9 +624,9 @@ export function NotDeletedUserLayout() {
   const { session, isUserMarkedForDeletion } = useAuth()
 
   if (isUserMarkedForDeletion()) {
-    return <router.Navigate to={appUtils.RESTORE_USER_PATH} />
+    return <Navigate to={RESTORE_USER_PATH} />
   } else {
-    return <router.Outlet context={session} />
+    return <Outlet context={session} />
   }
 }
 
@@ -647,19 +638,15 @@ export function SoftDeletedUserLayout() {
     const isSoftDeleted = isUserSoftDeleted()
     const isDeleted = isUserDeleted()
     if (isSoftDeleted) {
-      return <router.Outlet context={session} />
+      return <Outlet context={session} />
     } else if (isDeleted) {
-      return <router.Navigate to={appUtils.LOGIN_PATH} />
+      return <Navigate to={LOGIN_PATH} />
     } else {
-      return <router.Navigate to={appUtils.DASHBOARD_PATH} />
+      return <Navigate to={DASHBOARD_PATH} />
     }
   }
 }
 
-// =============================
-// === usePartialUserSession ===
-// =============================
-
 /**
  * A React context hook returning the user session
  * for a user that has not yet completed registration.
@@ -672,19 +659,11 @@ export function usePartialUserSession() {
   return session
 }
 
-// ======================
-// === useUserSession ===
-// ======================
-
 /** A React context hook returning the user session for a user that may or may not be logged in. */
 export function useUserSession() {
   return useAuth().session
 }
 
-// ==========================
-// === useFullUserSession ===
-// ==========================
-
 /** A React context hook returning the user session for a user that is fully logged in. */
 export function useFullUserSession(): FullUserSession {
   const { session } = useAuth()
diff --git a/app/gui/src/dashboard/providers/BackendProvider.tsx b/app/gui/src/dashboard/providers/BackendProvider.tsx
index 8bb73f63053e..6a4564309120 100644
--- a/app/gui/src/dashboard/providers/BackendProvider.tsx
+++ b/app/gui/src/dashboard/providers/BackendProvider.tsx
@@ -7,19 +7,15 @@ import * as React from 'react'
 import invariant from 'tiny-invariant'
 
 import * as common from 'enso-common'
+import { BackendType } from 'enso-common/src/services/Backend'
 
 import { type Category, isCloudCategory } from '#/layouts/CategorySwitcher/Category'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import { BackendType } from '#/services/Backend'
 import type LocalBackend from '#/services/LocalBackend'
 import { ProjectManagerEvents } from '#/services/ProjectManager'
 import type RemoteBackend from '#/services/RemoteBackend'
 
-// ======================
-// === BackendContext ===
-// ======================
-
 /** State contained in a `BackendContext`. */
 export interface BackendContextType {
   readonly remoteBackend: RemoteBackend | null
@@ -48,10 +44,6 @@ export interface BackendProviderProps extends Readonly<React.PropsWithChildren>
   readonly localBackend: LocalBackend | null
 }
 
-// =======================
-// === BackendProvider ===
-// =======================
-
 /** A React Provider that lets components get and set the current backend. */
 export default function BackendProvider(props: BackendProviderProps) {
   const { remoteBackend, localBackend, children } = props
@@ -87,10 +79,6 @@ export default function BackendProvider(props: BackendProviderProps) {
   )
 }
 
-// ========================
-// === useRemoteBackend ===
-// ========================
-
 /**
  * Get the Remote Backend.
  * @throws {Error} when no Remote Backend exists. This should never happen.
@@ -103,19 +91,11 @@ export function useRemoteBackend() {
   return remoteBackend
 }
 
-// =======================
-// === useLocalBackend ===
-// =======================
-
 /** Get the Local Backend. */
 export function useLocalBackend() {
   return React.useContext(BackendContext).localBackend
 }
 
-// ==================
-// === useBackend ===
-// ==================
-
 /**
  * Get the corresponding backend for the given property.
  * @throws {Error} when neither the Remote Backend nor the Local Backend are supported.
diff --git a/app/gui/src/dashboard/providers/ProjectsProvider.tsx b/app/gui/src/dashboard/providers/ProjectsProvider.tsx
index 50aa8cae9358..5f7fb897297a 100644
--- a/app/gui/src/dashboard/providers/ProjectsProvider.tsx
+++ b/app/gui/src/dashboard/providers/ProjectsProvider.tsx
@@ -1,14 +1,15 @@
 /** @file The React provider (and associated hooks) for providing reactive events. */
-import * as React from 'react'
+import { createContext, useContext, useMemo, type PropsWithChildren } from 'react'
 
 import invariant from 'tiny-invariant'
 import * as z from 'zod'
 
-import * as eventCallbacks from '#/hooks/eventCallbackHooks'
-import * as searchParamsState from '#/hooks/searchParamsStateHooks'
-import * as localStorageProvider from '#/providers/LocalStorageProvider'
-import * as backendModule from '#/services/Backend'
-import * as array from '#/utilities/array'
+import { BackendType, type DirectoryId, type ProjectId } from 'enso-common/src/services/Backend'
+import { EMPTY_ARRAY, includes } from 'enso-common/src/utilities/data/array'
+
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import { useSearchParamsState } from '#/hooks/searchParamsStateHooks'
+import { useLocalStorageState } from '#/providers/LocalStorageProvider'
 import LocalStorage from '#/utilities/LocalStorage'
 
 /** Main content of the screen. Only one should be visible at a time. */
@@ -28,12 +29,10 @@ declare module '#/utilities/LocalStorage' {
 
 const PROJECT_SCHEMA = z
   .object({
-    id: z.custom<backendModule.ProjectId>((x) => typeof x === 'string' && x.startsWith('project-')),
-    parentId: z.custom<backendModule.DirectoryId>(
-      (x) => typeof x === 'string' && x.startsWith('directory-'),
-    ),
+    id: z.custom<ProjectId>((x) => typeof x === 'string' && x.startsWith('project-')),
+    parentId: z.custom<DirectoryId>((x) => typeof x === 'string' && x.startsWith('directory-')),
     title: z.string(),
-    type: z.nativeEnum(backendModule.BackendType),
+    type: z.nativeEnum(BackendType),
   })
   .readonly()
 const LAUNCHED_PROJECT_SCHEMA = z.array(PROJECT_SCHEMA).readonly()
@@ -41,7 +40,7 @@ const LAUNCHED_PROJECT_SCHEMA = z.array(PROJECT_SCHEMA).readonly()
 /** Launched project information. */
 export type LaunchedProject = z.infer<typeof PROJECT_SCHEMA>
 /** Launched project ID. */
-export type LaunchedProjectId = backendModule.ProjectId
+export type LaunchedProjectId = ProjectId
 
 LocalStorage.registerKey('launchedProjects', {
   isUserSpecific: true,
@@ -73,12 +72,12 @@ export interface ProjectsContextType {
   readonly setPage: (page: LaunchedProjectId | TabType) => void
 }
 
-const ProjectsContext = React.createContext<ProjectsContextType | null>(null)
-const PageContext = React.createContext<LaunchedProjectId | TabType | null>(null)
-const LaunchedProjectsContext = React.createContext<readonly LaunchedProject[] | null>(null)
+const ProjectsContext = createContext<ProjectsContextType | null>(null)
+const PageContext = createContext<LaunchedProjectId | TabType | null>(null)
+const LaunchedProjectsContext = createContext<readonly LaunchedProject[] | null>(null)
 
 /** Props for a {@link ProjectsProvider}. */
-export type ProjectsProviderProps = Readonly<React.PropsWithChildren>
+export type ProjectsProviderProps = Readonly<PropsWithChildren>
 
 /**
  * A React provider (and associated hooks) for determining whether the current area
@@ -87,39 +86,36 @@ export type ProjectsProviderProps = Readonly<React.PropsWithChildren>
 export default function ProjectsProvider(props: ProjectsProviderProps) {
   const { children } = props
 
-  const [launchedProjects, setLaunchedProjects] = localStorageProvider.useLocalStorageState(
+  const [launchedProjects, setLaunchedProjects] = useLocalStorageState(
     'launchedProjects',
-    array.EMPTY_ARRAY,
+    EMPTY_ARRAY,
   )
-  const [page, setPage] = searchParamsState.useSearchParamsState(
+  const [page, setPage] = useSearchParamsState(
     'page',
     () => TabType.drive,
     (value: unknown): value is LaunchedProjectId | TabType => {
-      return (
-        array.includes(Object.values(TabType), value) ||
-        launchedProjects.some((p) => p.id === value)
-      )
+      return includes(Object.values(TabType), value) || launchedProjects.some((p) => p.id === value)
     },
   )
 
-  const addLaunchedProject = eventCallbacks.useEventCallback((project: LaunchedProject) => {
+  const addLaunchedProject = useEventCallback((project: LaunchedProject) => {
     setLaunchedProjects((current) => [...current, project])
   })
-  const removeLaunchedProject = eventCallbacks.useEventCallback((projectId: LaunchedProjectId) => {
+  const removeLaunchedProject = useEventCallback((projectId: LaunchedProjectId) => {
     setLaunchedProjects((current) => current.filter(({ id }) => id !== projectId))
   })
-  const updateLaunchedProjects = eventCallbacks.useEventCallback(
+  const updateLaunchedProjects = useEventCallback(
     (update: (projects: readonly LaunchedProject[]) => readonly LaunchedProject[]) => {
       setLaunchedProjects((current) => update(current))
     },
   )
 
-  const getState = eventCallbacks.useEventCallback(() => ({
+  const getState = useEventCallback(() => ({
     launchedProjects,
     page,
   }))
 
-  const projectsContextValue = React.useMemo(
+  const projectsContextValue = useMemo(
     () => ({
       updateLaunchedProjects,
       addLaunchedProject,
@@ -151,7 +147,7 @@ export default function ProjectsProvider(props: ProjectsProviderProps) {
 
 /** The projects store. */
 export function useProjectsStore() {
-  const context = React.useContext(ProjectsContext)
+  const context = useContext(ProjectsContext)
 
   invariant(context != null, 'Projects store can only be used inside an `ProjectsProvider`.')
 
@@ -160,7 +156,7 @@ export function useProjectsStore() {
 
 /** The page context. */
 export function usePage() {
-  const context = React.useContext(PageContext)
+  const context = useContext(PageContext)
 
   invariant(context != null, 'Page context can only be used inside an `ProjectsProvider`.')
 
@@ -170,14 +166,14 @@ export function usePage() {
 /** A function to set the current page. */
 export function useSetPage() {
   const { setPage } = useProjectsStore()
-  return eventCallbacks.useEventCallback((page: LaunchedProjectId | TabType) => {
+  return useEventCallback((page: LaunchedProjectId | TabType) => {
     setPage(page)
   })
 }
 
 /** Returns the launched projects context. */
 export function useLaunchedProjects() {
-  const context = React.useContext(LaunchedProjectsContext)
+  const context = useContext(LaunchedProjectsContext)
 
   invariant(
     context != null,
@@ -209,7 +205,7 @@ export function useRemoveLaunchedProject() {
 export function useClearLaunchedProjects() {
   const { setLaunchedProjects } = useProjectsStore()
 
-  return eventCallbacks.useEventCallback(() => {
+  return useEventCallback(() => {
     setLaunchedProjects([])
   })
 }
diff --git a/app/gui/src/dashboard/providers/TextProvider.tsx b/app/gui/src/dashboard/providers/TextProvider.tsx
index a8b1344c7027..20266fa8fe37 100644
--- a/app/gui/src/dashboard/providers/TextProvider.tsx
+++ b/app/gui/src/dashboard/providers/TextProvider.tsx
@@ -2,21 +2,29 @@
  * @file The React provider for localized, along with hooks to use the provider via the shared
  * React context.
  */
-import * as React from 'react'
-
-import * as text from 'enso-common/src/text'
-
-import * as object from '#/utilities/object'
-
-// ===================
-// === TextContext ===
-// ===================
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type PropsWithChildren,
+} from 'react'
+
+import {
+  Language,
+  LANGUAGE_TO_LOCALE,
+  Replacements,
+  TEXTS,
+  type TextId,
+} from 'enso-common/src/text'
+import { unsafeMutable } from 'enso-common/src/utilities/data/object'
 
 /** State contained in a `TextContext`. */
 export interface TextContextType {
-  readonly language: text.Language
+  readonly language: Language
   readonly locale: string
-  readonly setLanguage: (newLanguage: text.Language) => void
+  readonly setLanguage: (newLanguage: Language) => void
 }
 
 /**
@@ -26,40 +34,33 @@ export interface TextContextType {
  * If the text contains placeholders like `$0`, `$1`, etc.,
  * they will be replaced with the corresponding replacement.
  */
-export type GetText = <K extends text.TextId>(
-  key: K,
-  ...replacements: text.Replacements[K]
-) => string
+export type GetText = <K extends TextId>(key: K, ...replacements: Replacements[K]) => string
 
-const DEFAULT_LANGUAGE = text.Language.english
+const DEFAULT_LANGUAGE = Language.english
 
-const TextContext = React.createContext<TextContextType>({
+const TextContext = createContext<TextContextType>({
   language: DEFAULT_LANGUAGE,
-  locale: text.LANGUAGE_TO_LOCALE[DEFAULT_LANGUAGE],
+  locale: LANGUAGE_TO_LOCALE[DEFAULT_LANGUAGE],
   /**
    * Set `this.language`. It is NOT RECOMMENDED to use the default value, as this does not trigger
    * reactive updates.
    */
   setLanguage(language) {
-    object.unsafeMutable(this).language = language
+    unsafeMutable(this).language = language
   },
 })
 
 /** Props for a {@link TextProvider}. */
-export type TextProviderProps = Readonly<React.PropsWithChildren>
-
-// ====================
-// === TextProvider ===
-// ====================
+export type TextProviderProps = Readonly<PropsWithChildren>
 
 /** A React Provider that lets components get the current language. */
 export default function TextProvider(props: TextProviderProps) {
   const { children } = props
 
-  const [language, setLanguage] = React.useState(text.Language.english)
-  const locale = text.LANGUAGE_TO_LOCALE[language]
+  const [language, setLanguage] = useState(Language.english)
+  const locale = LANGUAGE_TO_LOCALE[language]
 
-  const contextValue = React.useMemo<TextContextType>(
+  const contextValue = useMemo<TextContextType>(
     () => ({ language, setLanguage, locale }),
     [language, locale],
   )
@@ -69,10 +70,10 @@ export default function TextProvider(props: TextProviderProps) {
 
 /** Exposes a property to get localized text, and get and set the current language. */
 export function useText() {
-  const { language, setLanguage, locale } = React.useContext(TextContext)
-  const localizedText = text.TEXTS[language]
+  const { language, setLanguage, locale } = useContext(TextContext)
+  const localizedText = TEXTS[language]
 
-  const getText = React.useCallback<GetText>(
+  const getText = useCallback<GetText>(
     (key, ...replacements) => {
       const template = localizedText[key]
       return replacements.length === 0 ?
diff --git a/app/gui/src/dashboard/providers/__test__/SessionProvider.test.tsx b/app/gui/src/dashboard/providers/__test__/SessionProvider.test.tsx
index 7869349cf630..5e98cdabe903 100644
--- a/app/gui/src/dashboard/providers/__test__/SessionProvider.test.tsx
+++ b/app/gui/src/dashboard/providers/__test__/SessionProvider.test.tsx
@@ -1,9 +1,12 @@
+import { Suspense } from 'react'
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { Rfc3339DateTime } from 'enso-common/src/utilities/data/dateTime'
+
 import type { UserSession } from '#/authentication/cognito'
 import { render, screen, waitFor } from '#/test'
-import { Rfc3339DateTime } from '#/utilities/dateTime'
 import HttpClient from '#/utilities/HttpClient'
-import { Suspense } from 'react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { HttpClientProvider } from '../HttpClientProvider'
 import SessionProvider from '../SessionProvider'
 
diff --git a/app/gui/src/dashboard/services/Backend.ts b/app/gui/src/dashboard/services/Backend.ts
deleted file mode 100644
index 0d85882d1973..000000000000
--- a/app/gui/src/dashboard/services/Backend.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-/** @file Type definitions common between all backends. */
-export * from 'enso-common/src/services/Backend'
-export { default } from 'enso-common/src/services/Backend'
diff --git a/app/gui/src/dashboard/services/Chat.ts b/app/gui/src/dashboard/services/Chat.ts
index 308cdf864e10..db5daad48f91 100644
--- a/app/gui/src/dashboard/services/Chat.ts
+++ b/app/gui/src/dashboard/services/Chat.ts
@@ -3,21 +3,16 @@
  * Types copied from the enso-bot server implementation:
  * https://github.com/enso-org/enso-bot/blob/aa903b6e639a31930ee4fff55c5639e4471fa48d/chat.ts
  */
-
-import type * as newtype from '#/utilities/newtype'
-
-// =====================
-// === Message Types ===
-// =====================
+import type { Newtype } from 'enso-common/src/utilities/data/newtype'
 
 /** Identifier for a chat Thread. */
-export type ThreadId = newtype.Newtype<string, 'ThreadId'>
+export type ThreadId = Newtype<string, 'ThreadId'>
 /** Identifier for a chat message. */
-export type MessageId = newtype.Newtype<string, 'MessageId'>
+export type MessageId = Newtype<string, 'MessageId'>
 /** Identifier for a chat user. */
-export type UserId = newtype.Newtype<string, 'UserId'>
+export type UserId = Newtype<string, 'UserId'>
 /** Chat user's email addresss. */
-export type EmailAddress = newtype.Newtype<string, 'EmailAddress'>
+export type EmailAddress = Newtype<string, 'EmailAddress'>
 
 /** Enumeration of all message types exchanged with the chat server. */
 export enum ChatMessageDataType {
diff --git a/app/gui/src/dashboard/services/LocalBackend.ts b/app/gui/src/dashboard/services/LocalBackend.ts
index ea3099b657d6..0541e76cf7db 100644
--- a/app/gui/src/dashboard/services/LocalBackend.ts
+++ b/app/gui/src/dashboard/services/LocalBackend.ts
@@ -5,85 +5,129 @@
  * The functions are asynchronous and return a {@link Promise} that resolves to the response from
  * the API.
  */
-import Backend, * as backend from '#/services/Backend'
-import type ProjectManager from '#/services/ProjectManager'
-import * as projectManager from '#/services/ProjectManager'
-import { APP_BASE_URL } from '#/utilities/appBaseUrl'
-import { download } from '#/utilities/download'
-import { tryGetMessage } from '#/utilities/error'
-import { fileExtension, getFileName, getFolderPath } from '#/utilities/fileInfo'
-import { getDirectoryAndName, joinPath } from '#/utilities/path'
-import { uniqueString } from 'enso-common/src/utilities/uniqueString'
 import invariant from 'tiny-invariant'
 
-// =============================
-// === ipWithSocketToAddress ===
-// =============================
+import Backend, {
+  Address,
+  AssetType,
+  BackendType,
+  DirectoryDoesNotExistError,
+  DirectoryId,
+  FileId,
+  OrganizationId,
+  ProjectId,
+  ProjectState,
+  S3FilePath,
+  compareAssets,
+  detectVersionLifecycle,
+  fileIsNotProject,
+  stripProjectExtension,
+  type AnyAsset,
+  type AssetId,
+  type CopyAssetResponse,
+  type CreateDirectoryRequestBody,
+  type CreateProjectRequestBody,
+  type CreatedDirectory,
+  type CreatedProject,
+  type DeleteAssetRequestBody,
+  type DirectoryAsset,
+  type FileAsset,
+  type ListDirectoryRequestParams,
+  type ListedProject,
+  type OpenProjectRequestBody,
+  type OrganizationInfo,
+  type Project,
+  type ProjectAsset,
+  type S3MultipartPart,
+  type UpdateAssetRequestBody,
+  type UpdateDirectoryRequestBody,
+  type UpdateFileRequestBody,
+  type UpdateProjectRequestBody,
+  type UpdatedDirectory,
+  type UpdatedProject,
+  type UploadFileEndRequestBody,
+  type UploadFileRequestParams,
+  type UploadLargeFileMetadata,
+  type UploadedLargeAsset,
+  type User,
+} from 'enso-common/src/services/Backend'
+import { fileExtension, getFileName, getFolderPath } from 'enso-common/src/utilities/data/fileInfo'
+import { getDirectoryAndName, joinPath } from 'enso-common/src/utilities/data/path'
+import { download } from 'enso-common/src/utilities/download'
+import { tryGetMessage } from 'enso-common/src/utilities/error'
+import { uniqueString } from 'enso-common/src/utilities/uniqueString'
 
-/** Convert a {@link projectManager.IpWithSocket} to a {@link backend.Address}. */
-function ipWithSocketToAddress(ipWithSocket: projectManager.IpWithSocket) {
-  return backend.Address(`ws://${ipWithSocket.host}:${ipWithSocket.port}`)
-}
+import type ProjectManager from '#/services/ProjectManager'
+import {
+  FileSystemEntryType,
+  MissingComponentAction,
+  Path,
+  ProjectName,
+  UUID,
+  type IpWithSocket,
+} from '#/services/ProjectManager'
+import { APP_BASE_URL } from '#/utilities/appBaseUrl'
 
-// ======================================
-// === Functions for manipulating ids ===
-// ======================================
+/** Convert a {@link IpWithSocket} to a {@link Address}. */
+function ipWithSocketToAddress(ipWithSocket: IpWithSocket) {
+  return Address(`ws://${ipWithSocket.host}:${ipWithSocket.port}`)
+}
 
-/** Create a {@link backend.DirectoryId} from a path. */
-export function newDirectoryId(path: projectManager.Path) {
-  return backend.DirectoryId(`${backend.AssetType.directory}-${path}`)
+/** Create a {@link DirectoryId} from a path. */
+export function newDirectoryId(path: Path) {
+  return DirectoryId(`${AssetType.directory}-${path}`)
 }
 
-/** Create a {@link backend.ProjectId} from a UUID. */
-export function newProjectId(uuid: projectManager.UUID) {
-  return backend.ProjectId(`${backend.AssetType.project}-${uuid}`)
+/** Create a {@link ProjectId} from a UUID. */
+export function newProjectId(uuid: UUID) {
+  return ProjectId(`${AssetType.project}-${uuid}`)
 }
 
-/** Create a {@link backend.FileId} from a path. */
-export function newFileId(path: projectManager.Path) {
-  return backend.FileId(`${backend.AssetType.file}-${path}`)
+/** Create a {@link FileId} from a path. */
+export function newFileId(path: Path) {
+  return FileId(`${AssetType.file}-${path}`)
 }
 
 /** The internal asset type and properly typed corresponding internal ID of a directory. */
 interface DirectoryTypeAndId {
-  readonly type: backend.AssetType.directory
-  readonly id: projectManager.Path
+  readonly type: AssetType.directory
+  readonly id: Path
 }
 
 /** The internal asset type and properly typed corresponding internal ID of a project. */
 interface ProjectTypeAndId {
-  readonly type: backend.AssetType.project
-  readonly id: projectManager.UUID
+  readonly type: AssetType.project
+  readonly id: UUID
 }
 
 /** The internal asset type and properly typed corresponding internal ID of a file. */
 interface FileTypeAndId {
-  readonly type: backend.AssetType.file
-  readonly id: projectManager.Path
+  readonly type: AssetType.file
+  readonly id: Path
 }
 
 /** The internal asset type and properly typed corresponding internal ID of an arbitrary asset. */
-type AssetTypeAndId<Id extends backend.AssetId = backend.AssetId> =
-  | (backend.DirectoryId extends Id ? DirectoryTypeAndId : never)
-  | (backend.FileId extends Id ? FileTypeAndId : never)
-  | (backend.ProjectId extends Id ? ProjectTypeAndId : never)
+type AssetTypeAndId<Id extends AssetId = AssetId> =
+  | (DirectoryId extends Id ? DirectoryTypeAndId : never)
+  | (FileId extends Id ? FileTypeAndId : never)
+  | (ProjectId extends Id ? ProjectTypeAndId : never)
 
-export function extractTypeAndId<Id extends backend.AssetId>(id: Id): AssetTypeAndId<Id>
+export function extractTypeAndId<Id extends AssetId>(id: Id): AssetTypeAndId<Id>
 /**
- * Extracts the asset type and its corresponding internal ID from a {@link backend.AssetId}.
+ * Extracts the asset type and its corresponding internal ID from a {@link AssetId}.
  * @throws {Error} if the id has an unknown type.
  */
-export function extractTypeAndId<Id extends backend.AssetId>(id: Id): AssetTypeAndId {
+export function extractTypeAndId<Id extends AssetId>(id: Id): AssetTypeAndId {
   const [, typeRaw, idRaw = ''] = id.match(/(.+?)-(.+)/) ?? []
   switch (typeRaw) {
-    case backend.AssetType.directory: {
-      return { type: backend.AssetType.directory, id: projectManager.Path(idRaw) }
+    case AssetType.directory: {
+      return { type: AssetType.directory, id: Path(idRaw) }
     }
-    case backend.AssetType.project: {
-      return { type: backend.AssetType.project, id: projectManager.UUID(idRaw) }
+    case AssetType.project: {
+      return { type: AssetType.project, id: UUID(idRaw) }
     }
-    case backend.AssetType.file: {
-      return { type: backend.AssetType.file, id: projectManager.Path(idRaw) }
+    case AssetType.file: {
+      return { type: AssetType.file, id: Path(idRaw) }
     }
     default: {
       throw new Error(`Invalid type '${typeRaw}'`)
@@ -91,18 +135,14 @@ export function extractTypeAndId<Id extends backend.AssetId>(id: Id): AssetTypeA
   }
 }
 
-// ====================
-// === LocalBackend ===
-// ====================
-
 /**
  * Class for sending requests to the Project Manager API endpoints.
  * This is used instead of the cloud backend API when managing local projects from the dashboard.
  */
 export default class LocalBackend extends Backend {
-  readonly type = backend.BackendType.local
+  readonly type = BackendType.local
   /** All files that have been uploaded to the Project Manager. */
-  uploadedFiles: Map<string, backend.UploadedLargeAsset> = new Map()
+  uploadedFiles: Map<string, UploadedLargeAsset> = new Map()
   private readonly projectManager: ProjectManager
 
   /** Create a {@link LocalBackend}. */
@@ -118,7 +158,7 @@ export default class LocalBackend extends Backend {
   }
 
   /** Set the root directory of this Backend. */
-  setRootPath(value: projectManager.Path) {
+  setRootPath(value: Path) {
     this.projectManager.rootDirectory = value
   }
 
@@ -134,10 +174,10 @@ export default class LocalBackend extends Backend {
 
   /** Return the ID of the root directory. */
   override rootDirectoryId(
-    _user: backend.User,
-    _organization: backend.OrganizationInfo | null,
-    rootDirectory: backend.Path | null | undefined,
-  ): backend.DirectoryId {
+    _user: User,
+    _organization: OrganizationInfo | null,
+    rootDirectory: Path | null | undefined,
+  ): DirectoryId {
     return newDirectoryId(rootDirectory ?? this.projectManager.rootDirectory)
   }
 
@@ -145,22 +185,20 @@ export default class LocalBackend extends Backend {
    * Return a list of assets in a directory.
    * @throws An error if the JSON-RPC call fails.
    */
-  override async listDirectory(
-    query: backend.ListDirectoryRequestParams,
-  ): Promise<readonly backend.AnyAsset[]> {
+  override async listDirectory(query: ListDirectoryRequestParams): Promise<readonly AnyAsset[]> {
     const parentIdRaw = query.parentId == null ? null : extractTypeAndId(query.parentId).id
     const parentId = query.parentId ?? newDirectoryId(this.projectManager.rootDirectory)
 
     // Catch the case where the directory does not exist.
-    let result: backend.AnyAsset[] = []
+    let result: AnyAsset[] = []
     try {
       const entries = await this.projectManager.listDirectory(parentIdRaw)
       result = entries
         .map((entry) => {
           switch (entry.type) {
-            case projectManager.FileSystemEntryType.DirectoryEntry: {
+            case FileSystemEntryType.DirectoryEntry: {
               return {
-                type: backend.AssetType.directory,
+                type: AssetType.directory,
                 id: newDirectoryId(entry.path),
                 modifiedAt: entry.attributes.lastModifiedTime,
                 parentId,
@@ -172,11 +210,11 @@ export default class LocalBackend extends Backend {
                 description: null,
                 parentsPath: '',
                 virtualParentsPath: '',
-              } satisfies backend.DirectoryAsset
+              } satisfies DirectoryAsset
             }
-            case projectManager.FileSystemEntryType.ProjectEntry: {
+            case FileSystemEntryType.ProjectEntry: {
               return {
-                type: backend.AssetType.project,
+                type: AssetType.project,
                 id: newProjectId(entry.metadata.id),
                 title: entry.metadata.name,
                 modifiedAt: entry.metadata.lastOpened ?? entry.metadata.created,
@@ -185,7 +223,7 @@ export default class LocalBackend extends Backend {
                 projectState: {
                   type:
                     this.projectManager.projects.get(entry.metadata.id)?.state ??
-                    backend.ProjectState.closed,
+                    ProjectState.closed,
                   volumeId: '',
                 },
                 extension: null,
@@ -193,11 +231,11 @@ export default class LocalBackend extends Backend {
                 description: null,
                 parentsPath: '',
                 virtualParentsPath: '',
-              } satisfies backend.ProjectAsset
+              } satisfies ProjectAsset
             }
-            case projectManager.FileSystemEntryType.FileEntry: {
+            case FileSystemEntryType.FileEntry: {
               return {
-                type: backend.AssetType.file,
+                type: AssetType.file,
                 id: newFileId(entry.path),
                 title: getFileName(entry.path),
                 modifiedAt: entry.attributes.lastModifiedTime,
@@ -209,11 +247,11 @@ export default class LocalBackend extends Backend {
                 description: null,
                 parentsPath: '',
                 virtualParentsPath: '',
-              } satisfies backend.FileAsset
+              } satisfies FileAsset
             }
           }
         })
-        .sort(backend.compareAssets)
+        .sort(compareAssets)
     } catch {
       // Failed so check if exists
       if (!(await this.projectManager.exists(parentIdRaw))) {
@@ -223,7 +261,7 @@ export default class LocalBackend extends Backend {
 
           result = []
         } else {
-          throw new backend.DirectoryDoesNotExistError()
+          throw new DirectoryDoesNotExistError()
         }
       }
     }
@@ -235,15 +273,15 @@ export default class LocalBackend extends Backend {
    * Return a list of projects belonging to the current user.
    * @throws An error if the JSON-RPC call fails.
    */
-  override async listProjects(): Promise<readonly backend.ListedProject[]> {
+  override async listProjects(): Promise<readonly ListedProject[]> {
     const result = await this.projectManager.listProjects({})
     return result.projects.map((project) => ({
       name: project.name,
-      organizationId: backend.OrganizationId(''),
+      organizationId: OrganizationId(''),
       projectId: newProjectId(project.id),
       packageName: project.name,
       state: {
-        type: backend.ProjectState.closed,
+        type: ProjectState.closed,
         volumeId: '',
       },
       jsonAddress: null,
@@ -256,23 +294,21 @@ export default class LocalBackend extends Backend {
    * Create a project.
    * @throws An error if the JSON-RPC call fails.
    */
-  override async createProject(
-    body: backend.CreateProjectRequestBody,
-  ): Promise<backend.CreatedProject> {
+  override async createProject(body: CreateProjectRequestBody): Promise<CreatedProject> {
     const projectsDirectory =
       body.parentDirectoryId == null ? null : extractTypeAndId(body.parentDirectoryId).id
     const project = await this.projectManager.createProject({
-      name: projectManager.ProjectName(body.projectName),
+      name: ProjectName(body.projectName),
       ...(body.projectTemplateName != null ? { projectTemplate: body.projectTemplateName } : {}),
-      missingComponentAction: projectManager.MissingComponentAction.install,
+      missingComponentAction: MissingComponentAction.install,
       ...(projectsDirectory == null ? {} : { projectsDirectory }),
     })
     return {
       name: project.projectName,
-      organizationId: backend.OrganizationId(''),
+      organizationId: OrganizationId(''),
       projectId: newProjectId(project.projectId),
       packageName: project.projectName,
-      state: { type: backend.ProjectState.closed, volumeId: '' },
+      state: { type: ProjectState.closed, volumeId: '' },
     }
   }
 
@@ -280,16 +316,16 @@ export default class LocalBackend extends Backend {
    * Close the project identified by the given project ID.
    * @throws An error if the JSON-RPC call fails.
    */
-  override async closeProject(projectId: backend.ProjectId, title: string | null): Promise<void> {
+  override async closeProject(projectId: ProjectId, title: string | null): Promise<void> {
     const { id } = extractTypeAndId(projectId)
     try {
       const state = this.projectManager.projects.get(id)
-      if (state?.state === backend.ProjectState.openInProgress) {
+      if (state?.state === ProjectState.openInProgress) {
         // Projects that are not opened cannot be closed.
         // This is the only way to wait until the project is open.
         await this.projectManager.openProject({
           projectId: id,
-          missingComponentAction: projectManager.MissingComponentAction.install,
+          missingComponentAction: MissingComponentAction.install,
         })
       }
       await this.projectManager.closeProject({ projectId: id })
@@ -308,9 +344,9 @@ export default class LocalBackend extends Backend {
    * @throws An error if the JSON-RPC call fails.
    */
   override async getProjectDetails(
-    projectId: backend.ProjectId,
-    directory: backend.DirectoryId | null,
-  ): Promise<backend.Project> {
+    projectId: ProjectId,
+    directory: DirectoryId | null,
+  ): Promise<Project> {
     const { id } = extractTypeAndId(projectId)
     const state = this.projectManager.projects.get(id)
     if (state == null) {
@@ -318,7 +354,7 @@ export default class LocalBackend extends Backend {
       const entries = await this.projectManager.listDirectory(directoryId)
       const project = entries
         .flatMap((entry) =>
-          entry.type === projectManager.FileSystemEntryType.ProjectEntry ? [entry.metadata] : [],
+          entry.type === FileSystemEntryType.ProjectEntry ? [entry.metadata] : [],
         )
         .find((metadata) => metadata.id === id)
       if (project == null) {
@@ -328,7 +364,7 @@ export default class LocalBackend extends Backend {
           project.engineVersion == null ?
             null
           : {
-              lifecycle: backend.detectVersionLifecycle(project.engineVersion),
+              lifecycle: detectVersionLifecycle(project.engineVersion),
               value: project.engineVersion,
             }
         return {
@@ -338,10 +374,10 @@ export default class LocalBackend extends Backend {
           jsonAddress: null,
           binaryAddress: null,
           ydocAddress: null,
-          organizationId: backend.OrganizationId(''),
+          organizationId: OrganizationId(''),
           packageName: project.name,
           projectId,
-          state: { type: backend.ProjectState.closed, volumeId: '' },
+          state: { type: ProjectState.closed, volumeId: '' },
         }
       }
     } else {
@@ -349,21 +385,21 @@ export default class LocalBackend extends Backend {
       return {
         name: cachedProject.projectName,
         engineVersion: {
-          lifecycle: backend.detectVersionLifecycle(cachedProject.engineVersion),
+          lifecycle: detectVersionLifecycle(cachedProject.engineVersion),
           value: cachedProject.engineVersion,
         },
         ideVersion: {
-          lifecycle: backend.detectVersionLifecycle(cachedProject.engineVersion),
+          lifecycle: detectVersionLifecycle(cachedProject.engineVersion),
           value: cachedProject.engineVersion,
         },
         jsonAddress: ipWithSocketToAddress(cachedProject.languageServerJsonAddress),
         binaryAddress: ipWithSocketToAddress(cachedProject.languageServerBinaryAddress),
         ydocAddress: null,
-        organizationId: backend.OrganizationId(''),
+        organizationId: OrganizationId(''),
         packageName: cachedProject.projectNormalizedName,
         projectId,
         state: {
-          type: backend.ProjectState.opened,
+          type: ProjectState.opened,
           volumeId: '',
         },
       }
@@ -375,15 +411,15 @@ export default class LocalBackend extends Backend {
    * @throws An error if the JSON-RPC call fails.
    */
   override async openProject(
-    projectId: backend.ProjectId,
-    body: backend.OpenProjectRequestBody | null,
+    projectId: ProjectId,
+    body: OpenProjectRequestBody | null,
     title: string | null,
   ): Promise<void> {
     const { id } = extractTypeAndId(projectId)
     try {
       await this.projectManager.openProject({
         projectId: id,
-        missingComponentAction: projectManager.MissingComponentAction.install,
+        missingComponentAction: MissingComponentAction.install,
         ...(body?.parentId != null ?
           { projectsDirectory: extractTypeAndId(body.parentId).id }
         : {}),
@@ -403,9 +439,9 @@ export default class LocalBackend extends Backend {
    * @throws An error if the JSON-RPC call fails.
    */
   override async updateProject(
-    projectId: backend.ProjectId,
-    body: backend.UpdateProjectRequestBody,
-  ): Promise<backend.UpdatedProject> {
+    projectId: ProjectId,
+    body: UpdateProjectRequestBody,
+  ): Promise<UpdatedProject> {
     if (body.ami != null) {
       throw new Error('Cannot change project AMI on local backend.')
     } else {
@@ -413,14 +449,14 @@ export default class LocalBackend extends Backend {
       if (body.projectName != null) {
         await this.projectManager.renameProject({
           projectId: id,
-          name: projectManager.ProjectName(body.projectName),
+          name: ProjectName(body.projectName),
         })
       }
       const parentPath = getDirectoryAndName(this.projectManager.getProjectPath(id)).directoryPath
       const result = await this.projectManager.listDirectory(parentPath)
       const project = result.flatMap((listedProject) =>
         (
-          listedProject.type === projectManager.FileSystemEntryType.ProjectEntry &&
+          listedProject.type === FileSystemEntryType.ProjectEntry &&
           listedProject.metadata.id === id
         ) ?
           [listedProject.metadata]
@@ -430,7 +466,7 @@ export default class LocalBackend extends Backend {
         project?.engineVersion == null ?
           null
         : {
-            lifecycle: backend.detectVersionLifecycle(project.engineVersion),
+            lifecycle: detectVersionLifecycle(project.engineVersion),
             value: project.engineVersion,
           }
       if (project == null) {
@@ -441,7 +477,7 @@ export default class LocalBackend extends Backend {
           engineVersion: version,
           ideVersion: version,
           name: project.name,
-          organizationId: backend.OrganizationId(''),
+          organizationId: OrganizationId(''),
           projectId,
         }
       }
@@ -449,15 +485,15 @@ export default class LocalBackend extends Backend {
   }
 
   /** Duplicate a specific version of a project. */
-  override async duplicateProject(projectId: backend.ProjectId): Promise<backend.CreatedProject> {
+  override async duplicateProject(projectId: ProjectId): Promise<CreatedProject> {
     const id = extractTypeAndId(projectId).id
     const project = await this.projectManager.duplicateProject({ projectId: id })
     return {
       projectId: newProjectId(project.projectId),
       name: project.projectName,
       packageName: project.projectNormalizedName,
-      organizationId: backend.OrganizationId(''),
-      state: { type: backend.ProjectState.closed, volumeId: '' },
+      organizationId: OrganizationId(''),
+      state: { type: ProjectState.closed, volumeId: '' },
     }
   }
 
@@ -466,18 +502,18 @@ export default class LocalBackend extends Backend {
    * @throws An error if the JSON-RPC call fails.
    */
   override async deleteAsset(
-    assetId: backend.AssetId,
-    _body: backend.DeleteAssetRequestBody,
+    assetId: AssetId,
+    _body: DeleteAssetRequestBody,
     title: string | null,
   ): Promise<void> {
     const typeAndId = extractTypeAndId(assetId)
     switch (typeAndId.type) {
-      case backend.AssetType.directory:
-      case backend.AssetType.file: {
+      case AssetType.directory:
+      case AssetType.file: {
         await this.projectManager.deleteFile(typeAndId.id)
         return
       }
-      case backend.AssetType.project: {
+      case AssetType.project: {
         try {
           await this.projectManager.deleteProject({ projectId: typeAndId.id })
           return
@@ -494,11 +530,11 @@ export default class LocalBackend extends Backend {
 
   /** Copy an arbitrary asset to another directory. */
   override async copyAsset(
-    assetId: backend.AssetId,
-    parentDirectoryId: backend.DirectoryId,
-  ): Promise<backend.CopyAssetResponse> {
+    assetId: AssetId,
+    parentDirectoryId: DirectoryId,
+  ): Promise<CopyAssetResponse> {
     const typeAndId = extractTypeAndId(assetId)
-    if (typeAndId.type !== backend.AssetType.project) {
+    if (typeAndId.type !== AssetType.project) {
       throw new Error('Only projects can be copied on the Local Backend.')
     } else {
       const project = await this.projectManager.duplicateProject({ projectId: typeAndId.id })
@@ -577,7 +613,7 @@ export default class LocalBackend extends Backend {
    * Get the current organization. Returns `null` because organizations do not exist on the
    * Local Backend. This is required for `rootDiretoryId` to work.
    */
-  override async getOrganization(): Promise<backend.OrganizationInfo | null> {
+  override async getOrganization(): Promise<OrganizationInfo | null> {
     return Promise.resolve(null)
   }
 
@@ -607,9 +643,7 @@ export default class LocalBackend extends Backend {
   }
 
   /** Create a directory. */
-  override async createDirectory(
-    body: backend.CreateDirectoryRequestBody,
-  ): Promise<backend.CreatedDirectory> {
+  override async createDirectory(body: CreateDirectoryRequestBody): Promise<CreatedDirectory> {
     const parentDirectoryPath =
       body.parentId == null ? this.projectManager.rootDirectory : extractTypeAndId(body.parentId).id
     const path = joinPath(parentDirectoryPath, body.title)
@@ -625,14 +659,11 @@ export default class LocalBackend extends Backend {
    * Change the parent directory of an asset.
    * Changing the description is NOT supported.
    */
-  override async updateAsset(
-    assetId: backend.AssetId,
-    body: backend.UpdateAssetRequestBody,
-  ): Promise<void> {
+  override async updateAsset(assetId: AssetId, body: UpdateAssetRequestBody): Promise<void> {
     if (body.parentDirectoryId != null) {
       const typeAndId = extractTypeAndId(assetId)
       const from =
-        typeAndId.type !== backend.AssetType.project ?
+        typeAndId.type !== AssetType.project ?
           typeAndId.id
         : this.projectManager.getProjectPath(typeAndId.id)
       const fileName = getFileName(from)
@@ -645,16 +676,16 @@ export default class LocalBackend extends Backend {
    * Begin uploading a large file.
    */
   override async uploadFileStart(
-    body: backend.UploadFileRequestParams,
+    body: UploadFileRequestParams,
     file: File,
-  ): Promise<backend.UploadLargeFileMetadata> {
+  ): Promise<UploadLargeFileMetadata> {
     const parentPath =
       body.parentDirectoryId == null ?
         this.projectManager.rootDirectory
       : extractTypeAndId(body.parentDirectoryId).id
     const filePath = joinPath(parentPath, body.fileName)
     const uploadId = uniqueString()
-    if (backend.fileIsNotProject(file)) {
+    if (fileIsNotProject(file)) {
       const searchParams = new URLSearchParams([
         ['file_name', body.fileName],
         ...(body.parentDirectoryId == null ? [] : [['directory', parentPath]]),
@@ -663,7 +694,7 @@ export default class LocalBackend extends Backend {
       await fetch(path, { method: 'POST', body: file })
       this.uploadedFiles.set(uploadId, { id: newFileId(filePath), project: null })
     } else {
-      const title = backend.stripProjectExtension(body.fileName)
+      const title = stripProjectExtension(body.fileName)
       let id: string
       if (
         'backendApi' in window &&
@@ -686,23 +717,21 @@ export default class LocalBackend extends Backend {
         const response = await fetch(path, { method: 'POST', body: file })
         id = await response.text()
       }
-      const projectId = newProjectId(projectManager.UUID(id))
+      const projectId = newProjectId(UUID(id))
       const project = await this.getProjectDetails(projectId, body.parentDirectoryId)
       this.uploadedFiles.set(uploadId, { id: projectId, project })
     }
-    return { presignedUrls: [], uploadId, sourcePath: backend.S3FilePath('') }
+    return { presignedUrls: [], uploadId, sourcePath: S3FilePath('') }
   }
 
   /** Upload a chunk of a large file. */
-  override uploadFileChunk(): Promise<backend.S3MultipartPart> {
+  override uploadFileChunk(): Promise<S3MultipartPart> {
     // Do nothing, the entire file has already been uploaded in `uploadFileStart`.
     return Promise.resolve({ eTag: '', partNumber: 0 })
   }
 
   /** Finish uploading a large file. */
-  override uploadFileEnd(
-    body: backend.UploadFileEndRequestBody,
-  ): Promise<backend.UploadedLargeAsset> {
+  override uploadFileEnd(body: UploadFileEndRequestBody): Promise<UploadedLargeAsset> {
     // Do nothing, the entire file has already been uploaded in `uploadFileStart`.
     const file = this.uploadedFiles.get(body.uploadId)
     invariant(file, 'Uploaded file not found')
@@ -710,34 +739,31 @@ export default class LocalBackend extends Backend {
   }
 
   /** Change the name of a file. */
-  override async updateFile(
-    fileId: backend.FileId,
-    body: backend.UpdateFileRequestBody,
-  ): Promise<void> {
+  override async updateFile(fileId: FileId, body: UpdateFileRequestBody): Promise<void> {
     const typeAndId = extractTypeAndId(fileId)
     const from = typeAndId.id
     const folderPath = getFolderPath(from)
-    const to = joinPath(projectManager.Path(folderPath), body.title)
+    const to = joinPath(Path(folderPath), body.title)
     await this.projectManager.moveFile(from, to)
   }
 
   /** Get the path of a project. */
-  getProjectPath(id: backend.ProjectId) {
+  getProjectPath(id: ProjectId) {
     return this.projectManager.getProjectPath(extractTypeAndId(id).id)
   }
 
   /** Construct a new path using the given parent directory and a file name. */
-  joinPath(parentId: backend.DirectoryId, fileName: string) {
+  joinPath(parentId: DirectoryId, fileName: string) {
     return joinPath(extractTypeAndId(parentId).id, fileName)
   }
 
   /** Change the name of a directory. */
   override async updateDirectory(
-    directoryId: backend.DirectoryId,
-    body: backend.UpdateDirectoryRequestBody,
-  ): Promise<backend.UpdatedDirectory> {
+    directoryId: DirectoryId,
+    body: UpdateDirectoryRequestBody,
+  ): Promise<UpdatedDirectory> {
     const from = extractTypeAndId(directoryId).id
-    const folderPath = projectManager.Path(getFolderPath(from))
+    const folderPath = Path(getFolderPath(from))
     const to = joinPath(folderPath, body.title)
     await this.projectManager.moveFile(from, to)
     return {
@@ -793,14 +819,14 @@ export default class LocalBackend extends Backend {
    *
    * Versioning is not supported on the Local Backend, thus the `versionId` parameter is ignored.
    */
-  override getFileContent(projectId: backend.ProjectId) {
+  override getFileContent(projectId: ProjectId) {
     return this.projectManager.getFileContent(extractTypeAndId(projectId).id)
   }
 
   /**
    * Resolve the path of a project asset relative to the project `src` directory.
    */
-  override resolveProjectAssetPath(projectId: backend.ProjectId, relativePath: string) {
+  override resolveProjectAssetPath(projectId: ProjectId, relativePath: string) {
     const projectPath = this.getProjectPath(projectId)
 
     return Promise.resolve(`enso://${projectPath}/src/${relativePath.replace('./', '')}`)
diff --git a/app/gui/src/dashboard/services/ProjectManager.ts b/app/gui/src/dashboard/services/ProjectManager.ts
index 8b1677d24925..934cf15edd54 100644
--- a/app/gui/src/dashboard/services/ProjectManager.ts
+++ b/app/gui/src/dashboard/services/ProjectManager.ts
@@ -5,11 +5,12 @@
  */
 import invariant from 'tiny-invariant'
 
-import * as backend from '#/services/Backend'
-import * as appBaseUrl from '#/utilities/appBaseUrl'
-import * as dateTime from '#/utilities/dateTime'
-import * as newtype from '#/utilities/newtype'
-import { getDirectoryAndName, normalizeSlashes } from '#/utilities/path'
+import { ProjectState as BackendProjectState } from 'enso-common/src/services/Backend'
+import { toRfc3339, type Rfc3339DateTime } from 'enso-common/src/utilities/data/dateTime'
+import { newtypeConstructor, type Newtype } from 'enso-common/src/utilities/data/newtype'
+import { getDirectoryAndName, normalizeSlashes } from 'enso-common/src/utilities/data/path'
+
+import { APP_BASE_URL } from '#/utilities/appBaseUrl'
 
 // =================
 // === Constants ===
@@ -61,28 +62,28 @@ export type JSONRPCResponse<T> = JSONRPCErrorResponse | JSONRPCSuccessResponse<T
 /* eslint-disable @typescript-eslint/no-redeclare */
 
 /** A UUID. */
-export type UUID = newtype.Newtype<string, 'UUID'>
+export type UUID = Newtype<string, 'UUID'>
 /** Create a {@link UUID}. */
-export const UUID = newtype.newtypeConstructor<UUID>()
+export const UUID = newtypeConstructor<UUID>()
 /** A filesystem path. */
-export type Path = newtype.Newtype<string, 'Path'>
+export type Path = Newtype<string, 'Path'>
 /** Create a {@link Path}. */
-export const Path = newtype.newtypeConstructor<Path>()
+export const Path = newtypeConstructor<Path>()
 /** An ID of a directory. */
-export type DirectoryId = newtype.Newtype<string, 'DirectoryId'>
+export type DirectoryId = Newtype<string, 'DirectoryId'>
 /** Create a {@link DirectoryId}. */
-export const DirectoryId = newtype.newtypeConstructor<DirectoryId>()
+export const DirectoryId = newtypeConstructor<DirectoryId>()
 /** A name of a project. */
-export type ProjectName = newtype.Newtype<string, 'ProjectName'>
+export type ProjectName = Newtype<string, 'ProjectName'>
 /** Create a {@link ProjectName}. */
-export const ProjectName = newtype.newtypeConstructor<ProjectName>()
+export const ProjectName = newtypeConstructor<ProjectName>()
 /**
  * The newtype's `TypeName` is intentionally different from the name of this type alias,
  * to match the backend's newtype.
  */
-export type UTCDateTime = dateTime.Rfc3339DateTime
+export type UTCDateTime = Rfc3339DateTime
 /** Create a {@link UTCDateTime}. */
-export const UTCDateTime = newtype.newtypeConstructor<UTCDateTime>()
+export const UTCDateTime = newtypeConstructor<UTCDateTime>()
 
 /* eslint-enable @typescript-eslint/no-redeclare */
 
@@ -103,16 +104,16 @@ interface ProjectMetadata {
    */
   readonly engineVersion?: string
   /** The project creation time. */
-  readonly created: dateTime.Rfc3339DateTime
+  readonly created: Rfc3339DateTime
   /** The last opened datetime. */
-  readonly lastOpened?: dateTime.Rfc3339DateTime
+  readonly lastOpened?: Rfc3339DateTime
 }
 
 /** Attributes of a file or folder. */
 interface Attributes {
-  readonly creationTime: dateTime.Rfc3339DateTime
-  readonly lastAccessTime: dateTime.Rfc3339DateTime
-  readonly lastModifiedTime: dateTime.Rfc3339DateTime
+  readonly creationTime: Rfc3339DateTime
+  readonly lastAccessTime: Rfc3339DateTime
+  readonly lastModifiedTime: Rfc3339DateTime
   readonly byteSize: number
 }
 
@@ -194,19 +195,15 @@ export interface DuplicatedProject {
   readonly projectNormalizedName: string
 }
 
-// ====================
-// === ProjectState ===
-// ====================
-
 /** A project that is currently opening. */
 interface OpenInProgressProjectState {
-  readonly state: backend.ProjectState.openInProgress
+  readonly state: BackendProjectState.openInProgress
   readonly data: Promise<OpenProject>
 }
 
 /** A project that is currently opened. */
 interface OpenedProjectState {
-  readonly state: backend.ProjectState.opened
+  readonly state: BackendProjectState.opened
   readonly data: OpenProject
 }
 
@@ -405,13 +402,13 @@ export default class ProjectManager {
     } else {
       const promise = this.sendRequest<OpenProject>('project/open', params)
       this.internalProjects.set(params.projectId, {
-        state: backend.ProjectState.openInProgress,
+        state: BackendProjectState.openInProgress,
         data: promise,
       })
       try {
         const result = await promise
         this.internalProjects.set(params.projectId, {
-          state: backend.ProjectState.opened,
+          state: BackendProjectState.opened,
           data: result,
         })
         return result
@@ -473,7 +470,7 @@ export default class ProjectManager {
     const fullParams: RenameProjectParams = { ...params, projectsDirectory: directoryPath }
     await this.sendRequest('project/rename', fullParams)
     const state = this.internalProjects.get(params.projectId)
-    if (state?.state === backend.ProjectState.opened) {
+    if (state?.state === BackendProjectState.opened) {
       this.internalProjects.set(params.projectId, {
         state: state.state,
         data: { ...state.data, projectName: params.name },
@@ -583,7 +580,7 @@ export default class ProjectManager {
     const directoryPath = getDirectoryAndName(path).directoryPath
     const siblings = this.internalDirectories.get(directoryPath)
     if (siblings) {
-      const now = dateTime.toRfc3339(new Date())
+      const now = toRfc3339(new Date())
       this.internalDirectories.set(directoryPath, [
         ...siblings.filter((sibling) => sibling.type === FileSystemEntryType.DirectoryEntry),
         {
@@ -607,7 +604,7 @@ export default class ProjectManager {
     const directoryPath = getDirectoryAndName(path).directoryPath
     const siblings = this.internalDirectories.get(directoryPath)
     if (siblings) {
-      const now = dateTime.toRfc3339(new Date())
+      const now = toRfc3339(new Date())
       this.internalDirectories.set(directoryPath, [
         ...siblings.filter((sibling) => sibling.type !== FileSystemEntryType.FileEntry),
         {
@@ -756,7 +753,7 @@ export default class ProjectManager {
       'cli-arguments': JSON.stringify([`--${name}`, ...cliArguments]),
     }).toString()
     const response = await fetch(
-      `${appBaseUrl.APP_BASE_URL}/api/run-project-manager-command?${searchParams}`,
+      `${APP_BASE_URL}/api/run-project-manager-command?${searchParams}`,
       {
         method: 'POST',
         body,
diff --git a/app/gui/src/dashboard/services/RemoteBackend.ts b/app/gui/src/dashboard/services/RemoteBackend.ts
index f14f56ff43e5..52941419d5a9 100644
--- a/app/gui/src/dashboard/services/RemoteBackend.ts
+++ b/app/gui/src/dashboard/services/RemoteBackend.ts
@@ -5,22 +5,158 @@
  * an API endpoint. The functions are asynchronous and return a {@link Promise} that resolves to
  * the response from the API.
  */
-import * as detect from 'enso-common/src/detect'
-import type * as text from 'enso-common/src/text'
+import { IS_DEV_MODE } from 'enso-common/src/detect'
+import Backend, {
+  Address,
+  BackendType,
+  DirectoryId,
+  NetworkError,
+  NotAuthorizedError,
+  Plan,
+  S3_CHUNK_SIZE_BYTES,
+  compareAssetPermissions,
+  type AnyAsset,
+  type AssetId,
+  type AssetType,
+  type AssetVersions,
+  type ChangeUserGroupRequestBody,
+  type CheckoutSession,
+  type CheckoutSessionId,
+  type CheckoutSessionStatus,
+  type CognitoCredentials,
+  type CopyAssetResponse,
+  type CreateCheckoutSessionRequestBody,
+  type CreateCustomerPortalSessionResponse,
+  type CreateDatalinkRequestBody,
+  type CreateDirectoryRequestBody,
+  type CreatePermissionRequestBody,
+  type CreateProjectRequestBody,
+  type CreateSecretRequestBody,
+  type CreateTagRequestBody,
+  type CreateUserGroupRequestBody,
+  type CreateUserRequestBody,
+  type CreatedDirectory,
+  type CreatedProject,
+  type Datalink,
+  type DatalinkId,
+  type DatalinkInfo,
+  type DeleteAssetRequestBody,
+  type EmailAddress,
+  type Event,
+  type FileDetails,
+  type FileId,
+  type FileLocator,
+  type HttpsUrl,
+  type InviteUserRequestBody,
+  type Label,
+  type LabelName,
+  type ListDirectoryRequestParams,
+  type ListInvitationsResponseBody,
+  type ListedProject,
+  type ListedProjectRaw,
+  type OpenProjectRequestBody,
+  type OrganizationInfo,
+  type Project,
+  type ProjectId,
+  type ProjectRaw,
+  type ProjectSession,
+  type ProjectSessionId,
+  type ResourceUsage,
+  type S3MultipartPart,
+  type S3ObjectVersionId,
+  type Secret,
+  type SecretId,
+  type SecretInfo,
+  type TagId,
+  type UpdateAssetRequestBody,
+  type UpdateDirectoryRequestBody,
+  type UpdateOrganizationRequestBody,
+  type UpdateProjectRequestBody,
+  type UpdateSecretRequestBody,
+  type UpdateUserRequestBody,
+  type UpdatedDirectory,
+  type UpdatedProject,
+  type UploadFileEndRequestBody,
+  type UploadFileRequestParams,
+  type UploadFileStartRequestBody,
+  type UploadLargeFileMetadata,
+  type UploadPictureRequestParams,
+  type UploadedLargeAsset,
+  type User,
+  type UserGroupId,
+  type UserGroupInfo,
+  type UserId,
+} from 'enso-common/src/services/Backend'
+import type { Replacements, TextId } from 'enso-common/src/text'
+import { merge, omit, type Mutable } from 'enso-common/src/utilities/data/object'
+import { download } from 'enso-common/src/utilities/download'
+
+import type { Logger } from '#/providers/LoggerProvider'
+import type { GetText } from '#/providers/TextProvider'
+
+import {
+  ACCEPT_INVITATION_PATH,
+  CREATE_CHECKOUT_SESSION_PATH,
+  CREATE_DATALINK_PATH,
+  CREATE_DIRECTORY_PATH,
+  CREATE_PERMISSION_PATH,
+  CREATE_PROJECT_PATH,
+  CREATE_SECRET_PATH,
+  CREATE_TAG_PATH,
+  CREATE_USER_GROUP_PATH,
+  CREATE_USER_PATH,
+  DELETE_USER_PATH,
+  GET_LOG_EVENTS_PATH,
+  GET_ORGANIZATION_PATH,
+  INVITATION_PATH,
+  INVITE_USER_PATH,
+  LIST_DIRECTORY_PATH,
+  LIST_FILES_PATH,
+  LIST_PROJECTS_PATH,
+  LIST_PROJECT_SESSIONS_PATH,
+  LIST_SECRETS_PATH,
+  LIST_TAGS_PATH,
+  LIST_USERS_PATH,
+  LIST_USER_GROUPS_PATH,
+  POST_LOG_EVENT_PATH,
+  TEAMS_DIRECTORY_ID,
+  UNDO_DELETE_ASSET_PATH,
+  UPDATE_CURRENT_USER_PATH,
+  UPDATE_ORGANIZATION_PATH,
+  UPLOAD_FILE_END_PATH,
+  UPLOAD_FILE_START_PATH,
+  UPLOAD_ORGANIZATION_PICTURE_PATH,
+  UPLOAD_USER_PICTURE_PATH,
+  USERS_DIRECTORY_ID,
+  USERS_ME_PATH,
+  associateTagPath,
+  changeUserGroupPath,
+  checkResourcesPath,
+  closeProjectPath,
+  copyAssetPath,
+  deleteAssetPath,
+  deleteTagPath,
+  deleteUserGroupPath,
+  duplicateProjectPath,
+  getCheckoutSessionPath,
+  getCustomerPortalSessionPath,
+  getDatalinkPath,
+  getFileDetailsPath,
+  getProjectAssetPath,
+  getProjectContentPath,
+  getProjectDetailsPath,
+  getProjectSessionLogsPath,
+  getSecretPath,
+  listAssetVersionsPath,
+  openProjectPath,
+  projectUpdatePath,
+  restoreProjectPath,
+  updateAssetPath,
+  updateDirectoryPath,
+  updateSecretPath,
+} from '#/services/remoteBackendPaths'
 
-import type * as loggerProvider from '#/providers/LoggerProvider'
-import type * as textProvider from '#/providers/TextProvider'
-
-import Backend, * as backend from '#/services/Backend'
-import * as remoteBackendPaths from '#/services/remoteBackendPaths'
-
-import * as download from '#/utilities/download'
 import type HttpClient from '#/utilities/HttpClient'
-import * as object from '#/utilities/object'
-
-// =================
-// === Constants ===
-// =================
 
 /** HTTP status indicating that the request was successful. */
 const STATUS_SUCCESS_FIRST = 200
@@ -48,61 +184,41 @@ function responseIsSuccessful(response: Response) {
   return response.status >= STATUS_SUCCESS_FIRST && response.status <= STATUS_SUCCESS_LAST
 }
 
-// ====================================
-// === isSpecialReadonlyDirectoryId ===
-// ====================================
-
 /** Whether the given directory is a special directory that cannot be written to. */
-export function isSpecialReadonlyDirectoryId(id: backend.AssetId) {
-  return (
-    id === remoteBackendPaths.USERS_DIRECTORY_ID || id === remoteBackendPaths.TEAMS_DIRECTORY_ID
-  )
+export function isSpecialReadonlyDirectoryId(id: AssetId) {
+  return id === USERS_DIRECTORY_ID || id === TEAMS_DIRECTORY_ID
 }
 
-// =============
-// === Types ===
-// =============
-
 /** HTTP response body for the "list users" endpoint. */
 export interface ListUsersResponseBody {
-  readonly users: readonly backend.User[]
+  readonly users: readonly User[]
 }
 
 /** HTTP response body for the "list projects" endpoint. */
 export interface ListDirectoryResponseBody {
-  readonly assets: readonly backend.AnyAsset[]
+  readonly assets: readonly AnyAsset[]
 }
 
 /** HTTP response body for the "list projects" endpoint. */
 export interface ListProjectsResponseBody {
-  readonly projects: readonly backend.ListedProjectRaw[]
+  readonly projects: readonly ListedProjectRaw[]
 }
 
 /** HTTP response body for the "list files" endpoint. */
 export interface ListFilesResponseBody {
-  readonly files: readonly backend.FileLocator[]
+  readonly files: readonly FileLocator[]
 }
 
 /** HTTP response body for the "list secrets" endpoint. */
 export interface ListSecretsResponseBody {
-  readonly secrets: readonly backend.SecretInfo[]
+  readonly secrets: readonly SecretInfo[]
 }
 
 /** HTTP response body for the "list tag" endpoint. */
 export interface ListTagsResponseBody {
-  readonly tags: readonly backend.Label[]
+  readonly tags: readonly Label[]
 }
 
-// =====================
-// === RemoteBackend ===
-// =====================
-
-/**
- * A function that turns a text ID (and a list of replacements, if required) to
- * human-readable text.
- */
-type GetText = ReturnType<typeof textProvider.useText>['getText']
-
 /** Options for {@link RemoteBackend.post} private method. */
 interface RemoteBackendPostOptions {
   readonly keepalive?: boolean
@@ -110,8 +226,8 @@ interface RemoteBackendPostOptions {
 
 /** Class for sending requests to the Cloud backend API endpoints. */
 export default class RemoteBackend extends Backend {
-  readonly type = backend.BackendType.remote
-  private user: object.Mutable<backend.User> | null = null
+  readonly type = BackendType.remote
+  private user: Mutable<User> | null = null
 
   /**
    * Create a new instance of the {@link RemoteBackend} API client.
@@ -119,8 +235,8 @@ export default class RemoteBackend extends Backend {
    */
   constructor(
     private readonly client: HttpClient,
-    private readonly logger: loggerProvider.Logger,
-    private getText: ReturnType<typeof textProvider.useText>['getText'],
+    private readonly logger: Logger,
+    private getText: GetText,
   ) {
     super()
   }
@@ -137,12 +253,12 @@ export default class RemoteBackend extends Backend {
    * Log an error message and throws an {@link Error} with the specified message.
    * @throws {Error} Always.
    */
-  async throw<K extends Extract<text.TextId, `${string}BackendError`>>(
+  async throw<K extends Extract<TextId, `${string}BackendError`>>(
     response: Response | null,
-    textId: backend.NetworkError | K,
-    ...replacements: text.Replacements[K]
+    textId: NetworkError | K,
+    ...replacements: Replacements[K]
   ): Promise<never> {
-    if (textId instanceof backend.NetworkError) {
+    if (textId instanceof NetworkError) {
       this.logger.error(textId.message)
 
       throw textId
@@ -158,48 +274,45 @@ export default class RemoteBackend extends Backend {
 
       const status = response?.status
 
-      throw new backend.NetworkError(message, status)
+      throw new NetworkError(message, status)
     }
   }
 
   /** The path to the root directory of this {@link Backend}. */
-  override rootPath(user: backend.User) {
+  override rootPath(user: User) {
     switch (user.plan) {
       case undefined:
-      case backend.Plan.free:
-      case backend.Plan.solo: {
+      case Plan.free:
+      case Plan.solo: {
         return `enso://Users/${user.name}`
       }
-      case backend.Plan.team:
-      case backend.Plan.enterprise: {
+      case Plan.team:
+      case Plan.enterprise: {
         return 'enso://'
       }
     }
   }
 
   /** Return the ID of the root directory. */
-  override rootDirectoryId(
-    user: backend.User,
-    organization: backend.OrganizationInfo | null,
-  ): backend.DirectoryId | null {
+  override rootDirectoryId(user: User, organization: OrganizationInfo | null): DirectoryId | null {
     switch (user.plan) {
       case undefined:
-      case backend.Plan.free:
-      case backend.Plan.solo: {
+      case Plan.free:
+      case Plan.solo: {
         return user.rootDirectoryId
       }
-      case backend.Plan.team:
-      case backend.Plan.enterprise: {
+      case Plan.team:
+      case Plan.enterprise: {
         return organization == null ? null : (
-            backend.DirectoryId(`directory-${organization.id.replace(/^organization-/, '')}`)
+            DirectoryId(`directory-${organization.id.replace(/^organization-/, '')}`)
           )
       }
     }
   }
 
   /** Return a list of all users in the same organization. */
-  override async listUsers(): Promise<readonly backend.User[]> {
-    const path = remoteBackendPaths.LIST_USERS_PATH
+  override async listUsers(): Promise<readonly User[]> {
+    const path = LIST_USERS_PATH
     const response = await this.get<ListUsersResponseBody>(path)
     if (response.status === STATUS_NOT_ALLOWED) {
       return []
@@ -211,9 +324,9 @@ export default class RemoteBackend extends Backend {
   }
 
   /** Set the username and parent organization of the current user. */
-  override async createUser(body: backend.CreateUserRequestBody): Promise<backend.User> {
-    const path = remoteBackendPaths.CREATE_USER_PATH
-    const response = await this.post<backend.User>(path, body)
+  override async createUser(body: CreateUserRequestBody): Promise<User> {
+    const path = CREATE_USER_PATH
+    const response = await this.post<User>(path, body)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'createUserBackendError')
     } else {
@@ -222,8 +335,8 @@ export default class RemoteBackend extends Backend {
   }
 
   /** Change the username of the current user. */
-  override async updateUser(body: backend.UpdateUserRequestBody): Promise<void> {
-    const path = remoteBackendPaths.UPDATE_CURRENT_USER_PATH
+  override async updateUser(body: UpdateUserRequestBody): Promise<void> {
+    const path = UPDATE_CURRENT_USER_PATH
     const response = await this.put(path, body)
     if (!responseIsSuccessful(response)) {
       return body.username != null ?
@@ -239,7 +352,7 @@ export default class RemoteBackend extends Backend {
 
   /** Restore a user that has been soft-deleted. */
   async restoreUser(): Promise<void> {
-    const response = await this.put(remoteBackendPaths.UPDATE_CURRENT_USER_PATH, {
+    const response = await this.put(UPDATE_CURRENT_USER_PATH, {
       clearRemoveAt: true,
     })
     if (!responseIsSuccessful(response)) {
@@ -251,7 +364,7 @@ export default class RemoteBackend extends Backend {
 
   /** Delete the current user. */
   override async deleteUser(): Promise<void> {
-    const response = await this.delete(remoteBackendPaths.DELETE_USER_PATH)
+    const response = await this.delete(DELETE_USER_PATH)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'deleteUserBackendError')
     } else {
@@ -268,8 +381,8 @@ export default class RemoteBackend extends Backend {
   }
 
   /** Invite a new user to the organization by email. */
-  override async inviteUser(body: backend.InviteUserRequestBody): Promise<void> {
-    const response = await this.post(remoteBackendPaths.INVITE_USER_PATH, body)
+  override async inviteUser(body: InviteUserRequestBody): Promise<void> {
+    const response = await this.post(INVITE_USER_PATH, body)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'inviteUserBackendError', body.userEmail)
     } else {
@@ -279,9 +392,7 @@ export default class RemoteBackend extends Backend {
 
   /** List all invitations. */
   override async listInvitations() {
-    const response = await this.get<backend.ListInvitationsResponseBody>(
-      remoteBackendPaths.INVITATION_PATH,
-    )
+    const response = await this.get<ListInvitationsResponseBody>(INVITATION_PATH)
 
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'listInvitationsBackendError')
@@ -291,8 +402,8 @@ export default class RemoteBackend extends Backend {
   }
 
   /** Delete an outgoing invitation. */
-  override async deleteInvitation(userEmail: backend.EmailAddress): Promise<void> {
-    const response = await this.delete(remoteBackendPaths.INVITATION_PATH, { userEmail })
+  override async deleteInvitation(userEmail: EmailAddress): Promise<void> {
+    const response = await this.delete(INVITATION_PATH, { userEmail })
 
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'deleteInvitationBackendError')
@@ -302,13 +413,13 @@ export default class RemoteBackend extends Backend {
   }
 
   /** Resend an outgoing invitation to a user. */
-  override async resendInvitation(userEmail: backend.EmailAddress): Promise<void> {
+  override async resendInvitation(userEmail: EmailAddress): Promise<void> {
     await this.inviteUser({ userEmail, resend: true })
   }
 
   /** Accept an invitation to a new organization. */
   override async acceptInvitation(): Promise<void> {
-    const response = await this.patch(remoteBackendPaths.ACCEPT_INVITATION_PATH, {})
+    const response = await this.patch(ACCEPT_INVITATION_PATH, {})
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'acceptInvitationBackendError')
     } else {
@@ -317,21 +428,18 @@ export default class RemoteBackend extends Backend {
   }
 
   /** Decline an invitation to a new organization. */
-  override async declineInvitation(userEmail: backend.EmailAddress): Promise<void> {
+  override async declineInvitation(userEmail: EmailAddress): Promise<void> {
     await this.deleteInvitation(userEmail)
   }
 
   /** Upload a new profile picture for the current user. */
-  override async uploadUserPicture(
-    params: backend.UploadPictureRequestParams,
-    file: Blob,
-  ): Promise<backend.User> {
+  override async uploadUserPicture(params: UploadPictureRequestParams, file: Blob): Promise<User> {
     const paramsString = new URLSearchParams({
       // eslint-disable-next-line @typescript-eslint/naming-convention, camelcase
       ...(params.fileName != null ? { file_name: params.fileName } : {}),
     }).toString()
-    const path = `${remoteBackendPaths.UPLOAD_USER_PICTURE_PATH}?${paramsString}`
-    const response = await this.putBinary<backend.User>(path, file)
+    const path = `${UPLOAD_USER_PICTURE_PATH}?${paramsString}`
+    const response = await this.putBinary<User>(path, file)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'uploadUserPictureBackendError')
     } else {
@@ -341,12 +449,12 @@ export default class RemoteBackend extends Backend {
 
   /** Set the list of groups a user is in. */
   override async changeUserGroup(
-    userId: backend.UserId,
-    userGroups: backend.ChangeUserGroupRequestBody,
+    userId: UserId,
+    userGroups: ChangeUserGroupRequestBody,
     name: string,
-  ): Promise<backend.User> {
-    const path = remoteBackendPaths.changeUserGroupPath(userId)
-    const response = await this.put<backend.User>(path, userGroups)
+  ): Promise<User> {
+    const path = changeUserGroupPath(userId)
+    const response = await this.put<User>(path, userGroups)
     if (!responseIsSuccessful(response)) {
       return this.throw(response, 'changeUserGroupsBackendError', name)
     } else {
@@ -358,9 +466,9 @@ export default class RemoteBackend extends Backend {
    * Return details for the current organization.
    * @returns `null` if a non-successful status code (not 200-299) was received.
    */
-  override async getOrganization(): Promise<backend.OrganizationInfo | null> {
-    const path = remoteBackendPaths.GET_ORGANIZATION_PATH
-    const response = await this.get<backend.OrganizationInfo>(path)
+  override async getOrganization(): Promise<OrganizationInfo | null> {
+    const path = GET_ORGANIZATION_PATH
+    const response = await this.get<OrganizationInfo>(path)
     if ([STATUS_NOT_ALLOWED, STATUS_NOT_FOUND].includes(response.status)) {
       // Organization info has not yet been created.
       // or the user is not eligible to create an organization.
@@ -374,10 +482,10 @@ export default class RemoteBackend extends Backend {
 
   /** Update details for the current organization. */
   override async updateOrganization(
-    body: backend.UpdateOrganizationRequestBody,
-  ): Promise<backend.OrganizationInfo | null> {
-    const path = remoteBackendPaths.UPDATE_ORGANIZATION_PATH
-    const response = await this.patch<backend.OrganizationInfo>(path, body)
+    body: UpdateOrganizationRequestBody,
+  ): Promise<OrganizationInfo | null> {
+    const path = UPDATE_ORGANIZATION_PATH
+    const response = await this.patch<OrganizationInfo>(path, body)
 
     if (response.status === STATUS_NOT_FOUND) {
       // Organization info has not yet been created.
@@ -391,15 +499,15 @@ export default class RemoteBackend extends Backend {
 
   /** Upload a new profile picture for the current organization. */
   override async uploadOrganizationPicture(
-    params: backend.UploadPictureRequestParams,
+    params: UploadPictureRequestParams,
     file: Blob,
-  ): Promise<backend.OrganizationInfo> {
+  ): Promise<OrganizationInfo> {
     const paramsString = new URLSearchParams({
       // eslint-disable-next-line @typescript-eslint/naming-convention, camelcase
       ...(params.fileName != null ? { file_name: params.fileName } : {}),
     }).toString()
-    const path = `${remoteBackendPaths.UPLOAD_ORGANIZATION_PICTURE_PATH}?${paramsString}`
-    const response = await this.putBinary<backend.OrganizationInfo>(path, file)
+    const path = `${UPLOAD_ORGANIZATION_PICTURE_PATH}?${paramsString}`
+    const response = await this.putBinary<OrganizationInfo>(path, file)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'uploadOrganizationPictureBackendError')
     } else {
@@ -408,8 +516,8 @@ export default class RemoteBackend extends Backend {
   }
 
   /** Adds a permission for a specific user on a specific asset. */
-  override async createPermission(body: backend.CreatePermissionRequestBody): Promise<void> {
-    const path = remoteBackendPaths.CREATE_PERMISSION_PATH
+  override async createPermission(body: CreatePermissionRequestBody): Promise<void> {
+    const path = CREATE_PERMISSION_PATH
     const response = await this.post(path, body)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'createPermissionBackendError')
@@ -422,8 +530,8 @@ export default class RemoteBackend extends Backend {
    * Return details for the current user.
    * @returns `null` if a non-successful status code (not 200-299) was received.
    */
-  override async usersMe(): Promise<backend.User | null> {
-    const response = await this.get<backend.User>(remoteBackendPaths.USERS_ME_PATH)
+  override async usersMe(): Promise<User | null> {
+    const response = await this.get<User>(USERS_ME_PATH)
 
     if (response.status === STATUS_NOT_FOUND) {
       // User info has not yet been created, we should redirect to the onboarding page.
@@ -432,7 +540,7 @@ export default class RemoteBackend extends Backend {
       // User is not authorized, we should redirect to the login page.
       return await this.throw(
         response,
-        new backend.NotAuthorizedError(this.getText('notAuthorizedBackendError')),
+        new NotAuthorizedError(this.getText('notAuthorizedBackendError')),
       )
     } else if (!responseIsSuccessful(response)) {
       // Arbitrary error, might be a server error or a network error.
@@ -450,10 +558,10 @@ export default class RemoteBackend extends Backend {
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
   override async listDirectory(
-    query: backend.ListDirectoryRequestParams,
+    query: ListDirectoryRequestParams,
     title: string,
-  ): Promise<readonly backend.AnyAsset[]> {
-    const path = remoteBackendPaths.LIST_DIRECTORY_PATH
+  ): Promise<readonly AnyAsset[]> {
+    const path = LIST_DIRECTORY_PATH
     const response = await this.get<ListDirectoryResponseBody>(
       path +
         '?' +
@@ -484,17 +592,17 @@ export default class RemoteBackend extends Backend {
     } else {
       const ret = (await response.json()).assets
         .map((asset) =>
-          object.merge(asset, {
+          merge(asset, {
             // eslint-disable-next-line no-restricted-syntax
-            type: asset.id.match(/^(.+?)-/)?.[1] as backend.AssetType,
+            type: asset.id.match(/^(.+?)-/)?.[1] as AssetType,
             // `Users` and `Teams` folders are virtual, so their children incorrectly have
             // the organization root id as their parent id.
             parentId: query.parentId ?? asset.parentId,
           }),
         )
         .map((asset) =>
-          object.merge(asset, {
-            permissions: [...(asset.permissions ?? [])].sort(backend.compareAssetPermissions),
+          merge(asset, {
+            permissions: [...(asset.permissions ?? [])].sort(compareAssetPermissions),
           }),
         )
         .map((asset) => this.dynamicAssetUser(asset))
@@ -506,16 +614,14 @@ export default class RemoteBackend extends Backend {
    * Create a directory.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async createDirectory(
-    body: backend.CreateDirectoryRequestBody,
-  ): Promise<backend.CreatedDirectory> {
-    const path = remoteBackendPaths.CREATE_DIRECTORY_PATH
+  override async createDirectory(body: CreateDirectoryRequestBody): Promise<CreatedDirectory> {
+    const path = CREATE_DIRECTORY_PATH
 
     // Remote backend doesn't need the title in the body.
     // It's generated on the server side.
     const { title, ...rest } = body
 
-    const response = await this.post<backend.CreatedDirectory>(path, rest)
+    const response = await this.post<CreatedDirectory>(path, rest)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'createFolderBackendError', title)
     } else {
@@ -528,12 +634,12 @@ export default class RemoteBackend extends Backend {
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
   override async updateDirectory(
-    directoryId: backend.DirectoryId,
-    body: backend.UpdateDirectoryRequestBody,
+    directoryId: DirectoryId,
+    body: UpdateDirectoryRequestBody,
     title: string,
   ) {
-    const path = remoteBackendPaths.updateDirectoryPath(directoryId)
-    const response = await this.put<backend.UpdatedDirectory>(path, body)
+    const path = updateDirectoryPath(directoryId)
+    const response = await this.put<UpdatedDirectory>(path, body)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'updateFolderBackendError', title)
     } else {
@@ -542,9 +648,9 @@ export default class RemoteBackend extends Backend {
   }
 
   /** List all previous versions of an asset. */
-  override async listAssetVersions(assetId: backend.AssetId): Promise<backend.AssetVersions> {
-    const path = remoteBackendPaths.listAssetVersionsPath(assetId)
-    const response = await this.get<backend.AssetVersions>(path)
+  override async listAssetVersions(assetId: AssetId): Promise<AssetVersions> {
+    const path = listAssetVersionsPath(assetId)
+    const response = await this.get<AssetVersions>(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'listAssetVersionsBackendError')
     } else {
@@ -554,10 +660,10 @@ export default class RemoteBackend extends Backend {
 
   /** Fetch the content of the `Main.enso` file of a project. */
   override async getFileContent(
-    projectId: backend.ProjectId,
-    versionId?: backend.S3ObjectVersionId,
+    projectId: ProjectId,
+    versionId?: S3ObjectVersionId,
   ): Promise<string> {
-    const path = remoteBackendPaths.getProjectContentPath(projectId, versionId)
+    const path = getProjectContentPath(projectId, versionId)
     const response = await this.get<string>(path)
 
     if (!responseIsSuccessful(response)) {
@@ -571,12 +677,8 @@ export default class RemoteBackend extends Backend {
    * Change the parent directory or description of an asset.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async updateAsset(
-    assetId: backend.AssetId,
-    body: backend.UpdateAssetRequestBody,
-    title: string,
-  ) {
-    const path = remoteBackendPaths.updateAssetPath(assetId)
+  override async updateAsset(assetId: AssetId, body: UpdateAssetRequestBody, title: string) {
+    const path = updateAssetPath(assetId)
     const response = await this.patch(path, body)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'updateAssetBackendError', title)
@@ -589,13 +691,9 @@ export default class RemoteBackend extends Backend {
    * Delete an arbitrary asset.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async deleteAsset(
-    assetId: backend.AssetId,
-    body: backend.DeleteAssetRequestBody,
-    title: string,
-  ) {
+  override async deleteAsset(assetId: AssetId, body: DeleteAssetRequestBody, title: string) {
     const paramsString = new URLSearchParams([['force', String(body.force)]]).toString()
-    const path = remoteBackendPaths.deleteAssetPath(assetId) + '?' + paramsString
+    const path = deleteAssetPath(assetId) + '?' + paramsString
     const response = await this.delete(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'deleteAssetBackendError', title)
@@ -608,8 +706,8 @@ export default class RemoteBackend extends Backend {
    * Restore an arbitrary asset from the trash.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async undoDeleteAsset(assetId: backend.AssetId, title: string): Promise<void> {
-    const path = remoteBackendPaths.UNDO_DELETE_ASSET_PATH
+  override async undoDeleteAsset(assetId: AssetId, title: string): Promise<void> {
+    const path = UNDO_DELETE_ASSET_PATH
     const response = await this.patch(path, { assetId })
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'undoDeleteAssetBackendError', title)
@@ -623,15 +721,14 @@ export default class RemoteBackend extends Backend {
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
   override async copyAsset(
-    assetId: backend.AssetId,
-    parentDirectoryId: backend.DirectoryId,
+    assetId: AssetId,
+    parentDirectoryId: DirectoryId,
     title: string,
     parentDirectoryTitle: string,
-  ): Promise<backend.CopyAssetResponse> {
-    const response = await this.post<backend.CopyAssetResponse>(
-      remoteBackendPaths.copyAssetPath(assetId),
-      { parentDirectoryId },
-    )
+  ): Promise<CopyAssetResponse> {
+    const response = await this.post<CopyAssetResponse>(copyAssetPath(assetId), {
+      parentDirectoryId,
+    })
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'copyAssetBackendError', title, parentDirectoryTitle)
     } else {
@@ -643,17 +740,17 @@ export default class RemoteBackend extends Backend {
    * Return a list of projects belonging to the current user.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async listProjects(): Promise<backend.ListedProject[]> {
-    const path = remoteBackendPaths.LIST_PROJECTS_PATH
+  override async listProjects(): Promise<ListedProject[]> {
+    const path = LIST_PROJECTS_PATH
     const response = await this.get<ListProjectsResponseBody>(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'listProjectsBackendError')
     } else {
       return (await response.json()).projects.map((project) => ({
         ...project,
-        jsonAddress: project.address != null ? backend.Address(`${project.address}json`) : null,
-        binaryAddress: project.address != null ? backend.Address(`${project.address}binary`) : null,
-        ydocAddress: project.address != null ? backend.Address(`${project.address}project`) : null,
+        jsonAddress: project.address != null ? Address(`${project.address}json`) : null,
+        binaryAddress: project.address != null ? Address(`${project.address}binary`) : null,
+        ydocAddress: project.address != null ? Address(`${project.address}project`) : null,
       }))
     }
   }
@@ -662,15 +759,13 @@ export default class RemoteBackend extends Backend {
    * Create a project.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async createProject(
-    body: backend.CreateProjectRequestBody,
-  ): Promise<backend.CreatedProject> {
-    const path = remoteBackendPaths.CREATE_PROJECT_PATH
+  override async createProject(body: CreateProjectRequestBody): Promise<CreatedProject> {
+    const path = CREATE_PROJECT_PATH
     // Remote backend doesn't need the project name in the body.
     // It's generated on the server side.
     const { projectName, ...rest } = body
 
-    const response = await this.post<backend.CreatedProject>(path, rest)
+    const response = await this.post<CreatedProject>(path, rest)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'createProjectBackendError', projectName)
     } else {
@@ -680,11 +775,11 @@ export default class RemoteBackend extends Backend {
 
   /** Restore a project from a different version. */
   override async restoreProject(
-    projectId: backend.ProjectId,
-    versionId: backend.S3ObjectVersionId,
+    projectId: ProjectId,
+    versionId: S3ObjectVersionId,
     title: string,
   ): Promise<void> {
-    const path = remoteBackendPaths.restoreProjectPath(projectId)
+    const path = restoreProjectPath(projectId)
     const response = await this.post(path, { versionId })
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'restoreProjectBackendError', title)
@@ -695,12 +790,12 @@ export default class RemoteBackend extends Backend {
 
   /** Duplicate a specific version of a project. */
   override async duplicateProject(
-    projectId: backend.ProjectId,
-    versionId: backend.S3ObjectVersionId,
+    projectId: ProjectId,
+    versionId: S3ObjectVersionId,
     title: string,
-  ): Promise<backend.CreatedProject> {
-    const path = remoteBackendPaths.duplicateProjectPath(projectId)
-    const response = await this.post<backend.CreatedProject>(path, { versionId })
+  ): Promise<CreatedProject> {
+    const path = duplicateProjectPath(projectId)
+    const response = await this.post<CreatedProject>(path, { versionId })
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'duplicateProjectBackendError', title)
     } else {
@@ -712,8 +807,8 @@ export default class RemoteBackend extends Backend {
    * Close a project.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async closeProject(projectId: backend.ProjectId, title: string): Promise<void> {
-    const path = remoteBackendPaths.closeProjectPath(projectId)
+  override async closeProject(projectId: ProjectId, title: string): Promise<void> {
+    const path = closeProjectPath(projectId)
     const response = await this.post(path, {})
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'closeProjectBackendError', title)
@@ -727,12 +822,12 @@ export default class RemoteBackend extends Backend {
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
   override async listProjectSessions(
-    projectId: backend.ProjectId,
+    projectId: ProjectId,
     title: string,
-  ): Promise<backend.ProjectSession[]> {
+  ): Promise<ProjectSession[]> {
     const paramsString = new URLSearchParams({ projectId }).toString()
-    const path = `${remoteBackendPaths.LIST_PROJECT_SESSIONS_PATH}?${paramsString}`
-    const response = await this.get<backend.ProjectSession[]>(path)
+    const path = `${LIST_PROJECT_SESSIONS_PATH}?${paramsString}`
+    const response = await this.get<ProjectSession[]>(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'listProjectSessionsBackendError', title)
     } else {
@@ -745,15 +840,15 @@ export default class RemoteBackend extends Backend {
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
   override async getProjectDetails(
-    projectId: backend.ProjectId,
+    projectId: ProjectId,
     _directoryId: null,
     getPresignedUrl = false,
-  ): Promise<backend.Project> {
+  ): Promise<Project> {
     const paramsString = new URLSearchParams({
       presigned: `${getPresignedUrl}`,
     }).toString()
-    const path = `${remoteBackendPaths.getProjectDetailsPath(projectId)}?${paramsString}`
-    const response = await this.get<backend.ProjectRaw>(path)
+    const path = `${getProjectDetailsPath(projectId)}?${paramsString}`
+    const response = await this.get<ProjectRaw>(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'getProjectDetailsBackendError')
     } else {
@@ -762,9 +857,9 @@ export default class RemoteBackend extends Backend {
         ...project,
         ideVersion: project.ide_version,
         engineVersion: project.engine_version,
-        jsonAddress: project.address != null ? backend.Address(`${project.address}json`) : null,
-        binaryAddress: project.address != null ? backend.Address(`${project.address}binary`) : null,
-        ydocAddress: project.address != null ? backend.Address(`${project.address}project`) : null,
+        jsonAddress: project.address != null ? Address(`${project.address}json`) : null,
+        binaryAddress: project.address != null ? Address(`${project.address}binary`) : null,
+        ydocAddress: project.address != null ? Address(`${project.address}project`) : null,
       }
     }
   }
@@ -774,10 +869,10 @@ export default class RemoteBackend extends Backend {
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
   override async getProjectSessionLogs(
-    projectSessionId: backend.ProjectSessionId,
+    projectSessionId: ProjectSessionId,
     title: string,
   ): Promise<string[]> {
-    const path = remoteBackendPaths.getProjectSessionLogsPath(projectSessionId)
+    const path = getProjectSessionLogsPath(projectSessionId)
     const response = await this.get<string[]>(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'getProjectLogsBackendError', title)
@@ -791,24 +886,24 @@ export default class RemoteBackend extends Backend {
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
   override async openProject(
-    projectId: backend.ProjectId,
-    bodyRaw: backend.OpenProjectRequestBody,
+    projectId: ProjectId,
+    bodyRaw: OpenProjectRequestBody,
     title: string,
   ): Promise<void> {
-    const body = object.omit(bodyRaw, 'parentId')
-    const path = remoteBackendPaths.openProjectPath(projectId)
+    const body = omit(bodyRaw, 'parentId')
+    const path = openProjectPath(projectId)
     if (body.cognitoCredentials == null) {
       return this.throw(null, 'openProjectMissingCredentialsBackendError', title)
     } else {
       const credentials = body.cognitoCredentials
-      const exactCredentials: backend.CognitoCredentials = {
+      const exactCredentials: CognitoCredentials = {
         accessToken: credentials.accessToken,
         clientId: credentials.clientId,
         expireAt: credentials.expireAt,
         refreshToken: credentials.refreshToken,
         refreshUrl: credentials.refreshUrl,
       }
-      const filteredBody: Omit<backend.OpenProjectRequestBody, 'parentId'> = {
+      const filteredBody: Omit<OpenProjectRequestBody, 'parentId'> = {
         ...body,
         cognitoCredentials: exactCredentials,
       }
@@ -827,12 +922,12 @@ export default class RemoteBackend extends Backend {
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
   override async updateProject(
-    projectId: backend.ProjectId,
-    body: backend.UpdateProjectRequestBody,
+    projectId: ProjectId,
+    body: UpdateProjectRequestBody,
     title: string,
-  ): Promise<backend.UpdatedProject> {
-    const path = remoteBackendPaths.projectUpdatePath(projectId)
-    const response = await this.put<backend.UpdatedProject>(path, body)
+  ): Promise<UpdatedProject> {
+    const path = projectUpdatePath(projectId)
+    const response = await this.put<UpdatedProject>(path, body)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'updateProjectBackendError', title)
     } else {
@@ -844,12 +939,9 @@ export default class RemoteBackend extends Backend {
    * Return the resource usage of a project.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async checkResources(
-    projectId: backend.ProjectId,
-    title: string,
-  ): Promise<backend.ResourceUsage> {
-    const path = remoteBackendPaths.checkResourcesPath(projectId)
-    const response = await this.get<backend.ResourceUsage>(path)
+  override async checkResources(projectId: ProjectId, title: string): Promise<ResourceUsage> {
+    const path = checkResourcesPath(projectId)
+    const response = await this.get<ResourceUsage>(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'checkResourcesBackendError', title)
     } else {
@@ -861,8 +953,8 @@ export default class RemoteBackend extends Backend {
    * Return a list of files accessible by the current user.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async listFiles(): Promise<readonly backend.FileLocator[]> {
-    const path = remoteBackendPaths.LIST_FILES_PATH
+  override async listFiles(): Promise<readonly FileLocator[]> {
+    const path = LIST_FILES_PATH
     const response = await this.get<ListFilesResponseBody>(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'listFilesBackendError')
@@ -876,15 +968,15 @@ export default class RemoteBackend extends Backend {
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
   override async uploadFileStart(
-    body: backend.UploadFileRequestParams,
+    body: UploadFileRequestParams,
     file: File,
-  ): Promise<backend.UploadLargeFileMetadata> {
-    const path = remoteBackendPaths.UPLOAD_FILE_START_PATH
-    const requestBody: backend.UploadFileStartRequestBody = {
+  ): Promise<UploadLargeFileMetadata> {
+    const path = UPLOAD_FILE_START_PATH
+    const requestBody: UploadFileStartRequestBody = {
       fileName: body.fileName,
       size: file.size,
     }
-    const response = await this.post<backend.UploadLargeFileMetadata>(path, requestBody)
+    const response = await this.post<UploadLargeFileMetadata>(path, requestBody)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'uploadFileStartBackendError')
     } else {
@@ -897,12 +989,12 @@ export default class RemoteBackend extends Backend {
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
   override async uploadFileChunk(
-    url: backend.HttpsUrl,
+    url: HttpsUrl,
     file: Blob,
     index: number,
-  ): Promise<backend.S3MultipartPart> {
-    const start = index * backend.S3_CHUNK_SIZE_BYTES
-    const end = Math.min(start + backend.S3_CHUNK_SIZE_BYTES, file.size)
+  ): Promise<S3MultipartPart> {
+    const start = index * S3_CHUNK_SIZE_BYTES
+    const end = Math.min(start + S3_CHUNK_SIZE_BYTES, file.size)
     const body = file.slice(start, end)
     const response = await fetch(url, { method: 'PUT', body })
     const eTag = response.headers.get('ETag')
@@ -917,11 +1009,9 @@ export default class RemoteBackend extends Backend {
    * Finish uploading a large file.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async uploadFileEnd(
-    body: backend.UploadFileEndRequestBody,
-  ): Promise<backend.UploadedLargeAsset> {
-    const path = remoteBackendPaths.UPLOAD_FILE_END_PATH
-    const response = await this.post<backend.UploadedLargeAsset>(path, body)
+  override async uploadFileEnd(body: UploadFileEndRequestBody): Promise<UploadedLargeAsset> {
+    const path = UPLOAD_FILE_END_PATH
+    const response = await this.post<UploadedLargeAsset>(path, body)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'uploadFileEndBackendError')
     } else {
@@ -939,15 +1029,15 @@ export default class RemoteBackend extends Backend {
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
   override async getFileDetails(
-    fileId: backend.FileId,
+    fileId: FileId,
     title: string,
     getPresignedUrl = false,
-  ): Promise<backend.FileDetails> {
+  ): Promise<FileDetails> {
     const searchParams = new URLSearchParams({
       presigned: `${getPresignedUrl}`,
     }).toString()
-    const path = `${remoteBackendPaths.getFileDetailsPath(fileId)}?${searchParams}`
-    const response = await this.get<backend.FileDetails>(path)
+    const path = `${getFileDetailsPath(fileId)}?${searchParams}`
+    const response = await this.get<FileDetails>(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'getFileDetailsBackendError', title)
     } else {
@@ -959,11 +1049,9 @@ export default class RemoteBackend extends Backend {
    * Return a Datalink.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async createDatalink(
-    body: backend.CreateDatalinkRequestBody,
-  ): Promise<backend.DatalinkInfo> {
-    const path = remoteBackendPaths.CREATE_DATALINK_PATH
-    const response = await this.post<backend.DatalinkInfo>(path, body)
+  override async createDatalink(body: CreateDatalinkRequestBody): Promise<DatalinkInfo> {
+    const path = CREATE_DATALINK_PATH
+    const response = await this.post<DatalinkInfo>(path, body)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'createDatalinkBackendError', body.name)
     } else {
@@ -975,12 +1063,9 @@ export default class RemoteBackend extends Backend {
    * Return a Datalink.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async getDatalink(
-    datalinkId: backend.DatalinkId,
-    title: string,
-  ): Promise<backend.Datalink> {
-    const path = remoteBackendPaths.getDatalinkPath(datalinkId)
-    const response = await this.get<backend.Datalink>(path)
+  override async getDatalink(datalinkId: DatalinkId, title: string): Promise<Datalink> {
+    const path = getDatalinkPath(datalinkId)
+    const response = await this.get<Datalink>(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'getDatalinkBackendError', title)
     } else {
@@ -992,8 +1077,8 @@ export default class RemoteBackend extends Backend {
    * Delete a Datalink.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async deleteDatalink(datalinkId: backend.DatalinkId, title: string): Promise<void> {
-    const path = remoteBackendPaths.getDatalinkPath(datalinkId)
+  override async deleteDatalink(datalinkId: DatalinkId, title: string): Promise<void> {
+    const path = getDatalinkPath(datalinkId)
     const response = await this.delete(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'deleteDatalinkBackendError', title)
@@ -1006,9 +1091,9 @@ export default class RemoteBackend extends Backend {
    * Create a secret environment variable.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async createSecret(body: backend.CreateSecretRequestBody): Promise<backend.SecretId> {
-    const path = remoteBackendPaths.CREATE_SECRET_PATH
-    const response = await this.post<backend.SecretId>(path, body)
+  override async createSecret(body: CreateSecretRequestBody): Promise<SecretId> {
+    const path = CREATE_SECRET_PATH
+    const response = await this.post<SecretId>(path, body)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'createSecretBackendError', body.name)
     } else {
@@ -1020,9 +1105,9 @@ export default class RemoteBackend extends Backend {
    * Return a secret environment variable.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async getSecret(secretId: backend.SecretId, title: string): Promise<backend.Secret> {
-    const path = remoteBackendPaths.getSecretPath(secretId)
-    const response = await this.get<backend.Secret>(path)
+  override async getSecret(secretId: SecretId, title: string): Promise<Secret> {
+    const path = getSecretPath(secretId)
+    const response = await this.get<Secret>(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'getSecretBackendError', title)
     } else {
@@ -1035,11 +1120,11 @@ export default class RemoteBackend extends Backend {
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
   override async updateSecret(
-    secretId: backend.SecretId,
-    body: backend.UpdateSecretRequestBody,
+    secretId: SecretId,
+    body: UpdateSecretRequestBody,
     title: string,
   ): Promise<void> {
-    const path = remoteBackendPaths.updateSecretPath(secretId)
+    const path = updateSecretPath(secretId)
     const response = await this.put(path, body)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'updateSecretBackendError', title)
@@ -1052,8 +1137,8 @@ export default class RemoteBackend extends Backend {
    * Return the secret environment variables accessible by the user.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async listSecrets(): Promise<readonly backend.SecretInfo[]> {
-    const path = remoteBackendPaths.LIST_SECRETS_PATH
+  override async listSecrets(): Promise<readonly SecretInfo[]> {
+    const path = LIST_SECRETS_PATH
     const response = await this.get<ListSecretsResponseBody>(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'listSecretsBackendError')
@@ -1066,9 +1151,9 @@ export default class RemoteBackend extends Backend {
    * Create a label used for categorizing assets.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async createTag(body: backend.CreateTagRequestBody): Promise<backend.Label> {
-    const path = remoteBackendPaths.CREATE_TAG_PATH
-    const response = await this.post<backend.Label>(path, body)
+  override async createTag(body: CreateTagRequestBody): Promise<Label> {
+    const path = CREATE_TAG_PATH
+    const response = await this.post<Label>(path, body)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'createLabelBackendError', body.value)
     } else {
@@ -1080,8 +1165,8 @@ export default class RemoteBackend extends Backend {
    * Return all labels accessible by the user.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async listTags(): Promise<readonly backend.Label[]> {
-    const path = remoteBackendPaths.LIST_TAGS_PATH
+  override async listTags(): Promise<readonly Label[]> {
+    const path = LIST_TAGS_PATH
     const response = await this.get<ListTagsResponseBody>(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'listLabelsBackendError')
@@ -1094,12 +1179,8 @@ export default class RemoteBackend extends Backend {
    * Set the full list of labels for a specific asset.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async associateTag(
-    assetId: backend.AssetId,
-    labels: backend.LabelName[],
-    title: string,
-  ) {
-    const path = remoteBackendPaths.associateTagPath(assetId)
+  override async associateTag(assetId: AssetId, labels: LabelName[], title: string) {
+    const path = associateTagPath(assetId)
     const response = await this.patch<ListTagsResponseBody>(path, { labels })
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'associateLabelsBackendError', title)
@@ -1112,8 +1193,8 @@ export default class RemoteBackend extends Backend {
    * Delete a label.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async deleteTag(tagId: backend.TagId, value: backend.LabelName): Promise<void> {
-    const path = remoteBackendPaths.deleteTagPath(tagId)
+  override async deleteTag(tagId: TagId, value: LabelName): Promise<void> {
+    const path = deleteTagPath(tagId)
     const response = await this.delete(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'deleteLabelBackendError', value)
@@ -1123,11 +1204,9 @@ export default class RemoteBackend extends Backend {
   }
 
   /** Create a user group. */
-  override async createUserGroup(
-    body: backend.CreateUserGroupRequestBody,
-  ): Promise<backend.UserGroupInfo> {
-    const path = remoteBackendPaths.CREATE_USER_GROUP_PATH
-    const response = await this.post<backend.UserGroupInfo>(path, body)
+  override async createUserGroup(body: CreateUserGroupRequestBody): Promise<UserGroupInfo> {
+    const path = CREATE_USER_GROUP_PATH
+    const response = await this.post<UserGroupInfo>(path, body)
     if (!responseIsSuccessful(response)) {
       return this.throw(response, 'createUserGroupBackendError', body.name)
     } else {
@@ -1136,8 +1215,8 @@ export default class RemoteBackend extends Backend {
   }
 
   /** Delete a user group. */
-  override async deleteUserGroup(userGroupId: backend.UserGroupId, name: string): Promise<void> {
-    const path = remoteBackendPaths.deleteUserGroupPath(userGroupId)
+  override async deleteUserGroup(userGroupId: UserGroupId, name: string): Promise<void> {
+    const path = deleteUserGroupPath(userGroupId)
     const response = await this.delete(path)
     if (!responseIsSuccessful(response)) {
       return this.throw(response, 'deleteUserGroupBackendError', name)
@@ -1150,9 +1229,9 @@ export default class RemoteBackend extends Backend {
    * List all roles in the organization.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async listUserGroups(): Promise<backend.UserGroupInfo[]> {
-    const path = remoteBackendPaths.LIST_USER_GROUPS_PATH
-    const response = await this.get<backend.UserGroupInfo[]>(path)
+  override async listUserGroups(): Promise<UserGroupInfo[]> {
+    const path = LIST_USER_GROUPS_PATH
+    const response = await this.get<UserGroupInfo[]>(path)
     if (response.status === STATUS_NOT_ALLOWED) {
       return [] as const
     } else if (!responseIsSuccessful(response)) {
@@ -1167,12 +1246,9 @@ export default class RemoteBackend extends Backend {
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
   override async createCheckoutSession(
-    params: backend.CreateCheckoutSessionRequestBody,
-  ): Promise<backend.CheckoutSession> {
-    const response = await this.post<backend.CheckoutSession>(
-      remoteBackendPaths.CREATE_CHECKOUT_SESSION_PATH,
-      params,
-    )
+    params: CreateCheckoutSessionRequestBody,
+  ): Promise<CheckoutSession> {
+    const response = await this.post<CheckoutSession>(CREATE_CHECKOUT_SESSION_PATH, params)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'createCheckoutSessionBackendError', params.plan)
     } else {
@@ -1184,11 +1260,9 @@ export default class RemoteBackend extends Backend {
    * Gets the status of a payment checkout session.
    * @throws An error if a non-successful status code (not 200-299) was received.
    */
-  override async getCheckoutSession(
-    sessionId: backend.CheckoutSessionId,
-  ): Promise<backend.CheckoutSessionStatus> {
-    const path = remoteBackendPaths.getCheckoutSessionPath(sessionId)
-    const response = await this.get<backend.CheckoutSessionStatus>(path)
+  override async getCheckoutSession(sessionId: CheckoutSessionId): Promise<CheckoutSessionStatus> {
+    const path = getCheckoutSessionPath(sessionId)
+    const response = await this.get<CheckoutSessionStatus>(path)
     if (!responseIsSuccessful(response)) {
       return await this.throw(response, 'getCheckoutSessionBackendError', sessionId)
     } else {
@@ -1197,13 +1271,13 @@ export default class RemoteBackend extends Backend {
   }
 
   /** List events in the organization's audit log. */
-  override async getLogEvents(): Promise<backend.Event[]> {
+  override async getLogEvents(): Promise<Event[]> {
     /** The type of the response body of this endpoint. */
     interface ResponseBody {
-      readonly events: backend.Event[]
+      readonly events: Event[]
     }
 
-    const path = remoteBackendPaths.GET_LOG_EVENTS_PATH
+    const path = GET_LOG_EVENTS_PATH
     const response = await this.get<ResponseBody>(path)
     if (!responseIsSuccessful(response)) {
       return this.throw(response, 'getLogEventsBackendError')
@@ -1217,11 +1291,11 @@ export default class RemoteBackend extends Backend {
   async logEvent(message: string, projectId?: string | null, metadata?: object | null) {
     // Prevent events from being logged in dev mode, since we are often using production environment
     // and are polluting real logs.
-    if (detect.IS_DEV_MODE && process.env.ENSO_CLOUD_ENVIRONMENT === 'production') {
+    if (IS_DEV_MODE && process.env.ENSO_CLOUD_ENVIRONMENT === 'production') {
       return
     }
 
-    const path = remoteBackendPaths.POST_LOG_EVENT_PATH
+    const path = POST_LOG_EVENT_PATH
     const response = await this.post(
       path,
       {
@@ -1243,14 +1317,14 @@ export default class RemoteBackend extends Backend {
 
   /** Download from an arbitrary URL that is assumed to originate from this backend. */
   override async download(url: string, name?: string) {
-    download.download(url, name)
+    download(url, name)
     return Promise.resolve()
   }
 
   /** Fetch the URL of the customer portal. */
   override async createCustomerPortalSession() {
-    const response = await this.post<backend.CreateCustomerPortalSessionResponse>(
-      remoteBackendPaths.getCustomerPortalSessionPath(),
+    const response = await this.post<CreateCustomerPortalSessionResponse>(
+      getCustomerPortalSessionPath(),
       {},
     )
 
@@ -1265,12 +1339,10 @@ export default class RemoteBackend extends Backend {
    * Resolve the path of a project asset relative to the project `src` directory.
    */
   override async resolveProjectAssetPath(
-    projectId: backend.ProjectId,
+    projectId: ProjectId,
     relativePath: string,
   ): Promise<string> {
-    const response = await this.get<string>(
-      remoteBackendPaths.getProjectAssetPath(projectId, relativePath),
-    )
+    const response = await this.get<string>(getProjectAssetPath(projectId, relativePath))
 
     if (!responseIsSuccessful(response)) {
       return Promise.reject(new Error('Not implemented.'))
@@ -1283,7 +1355,7 @@ export default class RemoteBackend extends Backend {
    * Replaces the `user` of all permissions for the current user on an asset, so that they always
    * return the up-to-date user.
    */
-  private dynamicAssetUser<Asset extends backend.AnyAsset>(asset: Asset) {
+  private dynamicAssetUser<Asset extends AnyAsset>(asset: Asset) {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const self = this
     let foundSelfPermission = (() => false)()
diff --git a/app/gui/src/dashboard/services/remoteBackendPaths.ts b/app/gui/src/dashboard/services/remoteBackendPaths.ts
index f2685407245e..dbfa4dd9b438 100644
--- a/app/gui/src/dashboard/services/remoteBackendPaths.ts
+++ b/app/gui/src/dashboard/services/remoteBackendPaths.ts
@@ -1,11 +1,20 @@
 /** @file Paths used by the `RemoteBackend`. */
-import type * as backend from '#/services/Backend'
+import type {
+  AssetId,
+  CheckoutSessionId,
+  DatalinkId,
+  DirectoryId as DirectoryId_1,
+  FileId,
+  ProjectId,
+  ProjectSessionId,
+  S3ObjectVersionId,
+  SecretId,
+  TagId,
+  UserGroupId,
+  UserId,
+} from 'enso-common/src/services/Backend'
 import { newtypeConstructor, type Newtype } from 'enso-common/src/utilities/data/newtype'
 
-// =============
-// === Paths ===
-// =============
-
 /** Relative HTTP path to the "list users" endpoint of the Cloud backend API. */
 export const LIST_USERS_PATH = 'users'
 /** Relative HTTP path to the "create user" endpoint of the Cloud backend API. */
@@ -90,18 +99,15 @@ export function getCustomerPortalSessionPath(returnUrl?: string) {
 }
 
 /** Relative HTTP path to the "change user groups" endpoint of the Cloud backend API. */
-export function changeUserGroupPath(userId: backend.UserId) {
+export function changeUserGroupPath(userId: UserId) {
   return `users/${userId}/usergroups`
 }
 /** Relative HTTP path to the "list asset versions" endpoint of the Cloud backend API. */
-export function listAssetVersionsPath(assetId: backend.AssetId) {
+export function listAssetVersionsPath(assetId: AssetId) {
   return `assets/${assetId}/versions`
 }
 /** Relative HTTP path to the "get Main.enso file" endpoint of the Cloud backend API. */
-export function getProjectContentPath(
-  projectId: backend.ProjectId,
-  versionId?: backend.S3ObjectVersionId,
-) {
+export function getProjectContentPath(projectId: ProjectId, versionId?: S3ObjectVersionId) {
   const searchParams = new URLSearchParams()
   if (versionId !== undefined) {
     searchParams.set('versionId', versionId)
@@ -110,96 +116,92 @@ export function getProjectContentPath(
 }
 
 /** Relative HTTP path to the "get project asset" endpoint of the Cloud backend API. */
-export function getProjectAssetPath(projectId: backend.ProjectId, relativePath: string) {
+export function getProjectAssetPath(projectId: ProjectId, relativePath: string) {
   return `projects/${projectId}/files/${relativePath.replace('./', '')}`
 }
 
 /** Relative HTTP path to the "update asset" endpoint of the Cloud backend API. */
-export function updateAssetPath(assetId: backend.AssetId) {
+export function updateAssetPath(assetId: AssetId) {
   return `assets/${assetId}`
 }
 /** Relative HTTP path to the "delete asset" endpoint of the Cloud backend API. */
-export function deleteAssetPath(assetId: backend.AssetId) {
+export function deleteAssetPath(assetId: AssetId) {
   return `assets/${assetId}`
 }
 /** Relative HTTP path to the "copy asset" endpoint of the Cloud backend API. */
-export function copyAssetPath(assetId: backend.AssetId) {
+export function copyAssetPath(assetId: AssetId) {
   return `assets/${assetId}/copy`
 }
 /** Relative HTTP path to the "update directory" endpoint of the Cloud backend API. */
-export function updateDirectoryPath(directoryId: backend.DirectoryId) {
+export function updateDirectoryPath(directoryId: DirectoryId_1) {
   return `directories/${directoryId}`
 }
 /** Relative HTTP path to the "close project" endpoint of the Cloud backend API. */
-export function closeProjectPath(projectId: backend.ProjectId) {
+export function closeProjectPath(projectId: ProjectId) {
   return `projects/${projectId}/close`
 }
 /** Relative HTTP path to the "get project details" endpoint of the Cloud backend API. */
-export function getProjectDetailsPath(projectId: backend.ProjectId) {
+export function getProjectDetailsPath(projectId: ProjectId) {
   return `projects/${projectId}`
 }
 
 /** Relative HTTP path to the "get project logs" endpoint of the Cloud backend API. */
-export function getProjectSessionLogsPath(projectSessionId: backend.ProjectSessionId) {
+export function getProjectSessionLogsPath(projectSessionId: ProjectSessionId) {
   return `project-sessions/${projectSessionId}/logs`
 }
 /** Relative HTTP path to the "duplicate project" endpoint of the Cloud backend API. */
-export function duplicateProjectPath(projectId: backend.ProjectId) {
+export function duplicateProjectPath(projectId: ProjectId) {
   return `projects/${projectId}/versions/clone`
 }
 /** Relative HTTP path to the "restore project" endpoint of the Cloud backend API. */
-export function restoreProjectPath(projectId: backend.ProjectId) {
+export function restoreProjectPath(projectId: ProjectId) {
   return `projects/${projectId}/versions/restore`
 }
 /** Relative HTTP path to the "open project" endpoint of the Cloud backend API. */
-export function openProjectPath(projectId: backend.ProjectId) {
+export function openProjectPath(projectId: ProjectId) {
   return `projects/${projectId}/open`
 }
 /** Relative HTTP path to the "project update" endpoint of the Cloud backend API. */
-export function projectUpdatePath(projectId: backend.ProjectId) {
+export function projectUpdatePath(projectId: ProjectId) {
   return `projects/${projectId}`
 }
 /** Relative HTTP path to the "get file details" endpoint of the Cloud backend API. */
-export function getFileDetailsPath(fileId: backend.FileId) {
+export function getFileDetailsPath(fileId: FileId) {
   return `files/${fileId}`
 }
 /** Relative HTTP path to the "check resources" endpoint of the Cloud backend API. */
-export function checkResourcesPath(projectId: backend.ProjectId) {
+export function checkResourcesPath(projectId: ProjectId) {
   return `projects/${projectId}/resources`
 }
 /** Relative HTTP path to the "update secret" endpoint of the Cloud backend API. */
-export function updateSecretPath(secretId: backend.SecretId) {
+export function updateSecretPath(secretId: SecretId) {
   return `secrets/${secretId}`
 }
 /** Relative HTTP path to the "get secret" endpoint of the Cloud backend API. */
-export function getSecretPath(secretId: backend.SecretId) {
+export function getSecretPath(secretId: SecretId) {
   return `secrets/${secretId}`
 }
 /** Relative HTTP path to the "get datalink" endpoint of the Cloud backend API. */
-export function getDatalinkPath(datalinkId: backend.DatalinkId) {
+export function getDatalinkPath(datalinkId: DatalinkId) {
   return `datalinks/${datalinkId}`
 }
 /** Relative HTTP path to the "associate tag" endpoint of the Cloud backend API. */
-export function associateTagPath(assetId: backend.AssetId) {
+export function associateTagPath(assetId: AssetId) {
   return `assets/${assetId}/labels`
 }
 /** Relative HTTP path to the "delete tag" endpoint of the Cloud backend API. */
-export function deleteTagPath(tagId: backend.TagId) {
+export function deleteTagPath(tagId: TagId) {
   return `tags/${tagId}`
 }
 /** Relative HTTP path to the "delete user group" endpoint of the Cloud backend API. */
-export function deleteUserGroupPath(groupId: backend.UserGroupId) {
+export function deleteUserGroupPath(groupId: UserGroupId) {
   return `usergroups/${groupId}`
 }
 /** Relative HTTP path to the "get checkout session" endpoint of the Cloud backend API. */
-export function getCheckoutSessionPath(checkoutSessionId: backend.CheckoutSessionId) {
+export function getCheckoutSessionPath(checkoutSessionId: CheckoutSessionId) {
   return `${GET_CHECKOUT_SESSION_PATH}/${checkoutSessionId}`
 }
 
-// ===========
-// === IDs ===
-// ===========
-
 /** Unique identifier for a directory. */
 type DirectoryId = Newtype<string, 'DirectoryId'>
 // eslint-disable-next-line no-restricted-syntax, @typescript-eslint/no-redeclare
diff --git a/app/gui/src/dashboard/utilities/AssetTreeNode.ts b/app/gui/src/dashboard/utilities/AssetTreeNode.ts
index bcc9aae1e532..9c0f1e82ec5e 100644
--- a/app/gui/src/dashboard/utilities/AssetTreeNode.ts
+++ b/app/gui/src/dashboard/utilities/AssetTreeNode.ts
@@ -1,11 +1,14 @@
 /** @file A node in the drive's item tree. */
-import type * as assetEvent from '#/events/assetEvent'
+import type { AssetEvent } from '#/events/assetEvent'
 
-import * as backendModule from '#/services/Backend'
-
-// =====================
-// === AssetTreeNode ===
-// =====================
+import {
+  assetIsType,
+  AssetType,
+  compareAssets,
+  isPlaceholderId,
+  type AnyAsset,
+  type DirectoryId,
+} from 'enso-common/src/services/Backend'
 
 /** An {@link AssetTreeNode}, but excluding its methods. */
 export type AssetTreeNodeData = Pick<
@@ -23,11 +26,11 @@ export type AssetTreeNodeData = Pick<
 /** All possible variants of {@link AssetTreeNode}s. */
 // The `Item extends Item` is required to trigger distributive conditional types:
 // https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types
-export type AnyAssetTreeNode<Item extends backendModule.AnyAsset = backendModule.AnyAsset> =
+export type AnyAssetTreeNode<Item extends AnyAsset = AnyAsset> =
   Item extends Item ? AssetTreeNode<Item> : never
 
 /** A node in the drive's item tree. */
-export default class AssetTreeNode<Item extends backendModule.AnyAsset = backendModule.AnyAsset> {
+export default class AssetTreeNode<Item extends AnyAsset = AnyAsset> {
   readonly type: Item['type']
   /** Create a {@link AssetTreeNode}. */
   constructor(
@@ -40,9 +43,9 @@ export default class AssetTreeNode<Item extends backendModule.AnyAsset = backend
      * The id of the asset's parent directory (or the placeholder id for new assets).
      * This must never change.
      */
-    public readonly directoryKey: backendModule.DirectoryId,
+    public readonly directoryKey: DirectoryId,
     /** The actual id of the asset's parent directory (or the placeholder id for new assets). */
-    public readonly directoryId: backendModule.DirectoryId,
+    public readonly directoryId: DirectoryId,
     /**
      * This is `null` if the asset is not a directory asset, OR a directory asset whose contents
      * have not yet been fetched.
@@ -50,7 +53,7 @@ export default class AssetTreeNode<Item extends backendModule.AnyAsset = backend
     public readonly children: AnyAssetTreeNode[] | null,
     public readonly depth: number,
     public readonly path: string,
-    public readonly initialAssetEvents: readonly assetEvent.AssetEvent[] | null,
+    public readonly initialAssetEvents: readonly AssetEvent[] | null,
     /**
      * The internal (to the frontend) id of the asset (or the placeholder id for new assets).
      * This must never change, otherwise the component's state is lost when receiving the real id
@@ -63,21 +66,21 @@ export default class AssetTreeNode<Item extends backendModule.AnyAsset = backend
 
   /**
    * Return a positive number if `a > b`, a negative number if `a < b`, and zero if `a === b`.
-   * Uses {@link backendModule.compareAssets} internally.
+   * Uses {@link compareAssets} internally.
    */
   static compare(this: void, a: AssetTreeNode, b: AssetTreeNode) {
-    return backendModule.compareAssets(a.item, b.item)
+    return compareAssets(a.item, b.item)
   }
 
-  /** Creates an {@link AssetTreeNode} from a {@link backendModule.AnyAsset}. */
-  static fromAsset<Asset extends backendModule.AnyAsset>(
+  /** Creates an {@link AssetTreeNode} from a {@link AnyAsset}. */
+  static fromAsset<Asset extends AnyAsset>(
     this: void,
     asset: Asset,
-    directoryKey: backendModule.DirectoryId,
-    directoryId: backendModule.DirectoryId,
+    directoryKey: DirectoryId,
+    directoryId: DirectoryId,
     depth: number,
     path: string,
-    initialAssetEvents: readonly assetEvent.AssetEvent[] | null = null,
+    initialAssetEvents: readonly AssetEvent[] | null = null,
     key: Asset['id'] = asset.id,
   ): AnyAssetTreeNode {
     return new AssetTreeNode(
@@ -101,10 +104,8 @@ export default class AssetTreeNode<Item extends backendModule.AnyAsset = backend
   }
 
   /** Whether this node contains a specific type of asset. */
-  isType<Type extends backendModule.AssetType>(
-    type: Type,
-  ): this is AssetTreeNode<backendModule.AnyAsset<Type>> {
-    return backendModule.assetIsType(type)(this.item)
+  isType<Type extends AssetType>(type: Type): this is AssetTreeNode<AnyAsset<Type>> {
+    return assetIsType(type)(this.item)
   }
 
   /** Create a new {@link AssetTreeNode} with the specified properties updated. */
@@ -205,12 +206,12 @@ export default class AssetTreeNode<Item extends backendModule.AnyAsset = backend
    * Checks whenever the asset is a placeholder.
    */
   isPlaceholder() {
-    return backendModule.isPlaceholderId(this.item.id)
+    return isPlaceholderId(this.item.id)
   }
 
   /** Check whether the asset doesn't have any children. */
   isEmpty(): boolean {
-    if (this.item.type === backendModule.AssetType.directory) {
+    if (this.item.type === AssetType.directory) {
       if (this.children == null) {
         return true
       }
diff --git a/app/gui/src/dashboard/utilities/LocalStorage.ts b/app/gui/src/dashboard/utilities/LocalStorage.ts
index 22831c02b25c..a5b8fd388630 100644
--- a/app/gui/src/dashboard/utilities/LocalStorage.ts
+++ b/app/gui/src/dashboard/utilities/LocalStorage.ts
@@ -1,11 +1,12 @@
 /** @file A LocalStorage data manager. */
 import type * as z from 'zod'
 
-import * as common from 'enso-common'
+import invariant from 'tiny-invariant'
+
+import { PRODUCT_NAME } from 'enso-common'
 
-import * as object from '#/utilities/object'
 import { IS_DEV_MODE } from 'enso-common/src/detect'
-import invariant from 'tiny-invariant'
+import { unsafeEntries } from 'enso-common/src/utilities/data/object'
 
 const KEY_DEFINITION_STACK_TRACES = new Map<string, string>()
 
@@ -66,7 +67,7 @@ export default class LocalStorage {
     LocalStorageKeyMetadata<LocalStorageKey>
   >
   private static instance: LocalStorage | null = null
-  localStorageKey = common.PRODUCT_NAME.toLowerCase()
+  localStorageKey = PRODUCT_NAME.toLowerCase()
   protected values: Partial<LocalStorageData>
   private readonly eventTarget = new EventTarget()
 
@@ -157,7 +158,7 @@ export default class LocalStorage {
 
   /** Delete user-specific entries from the stored data, and save. */
   clearUserSpecificEntries() {
-    for (const [key, metadata] of object.unsafeEntries(LocalStorage.keyMetadata)) {
+    for (const [key, metadata] of unsafeEntries(LocalStorage.keyMetadata)) {
       if (metadata.isUserSpecific === true) {
         this.delete(key)
       }
diff --git a/app/gui/src/dashboard/utilities/Navigator2D.ts b/app/gui/src/dashboard/utilities/Navigator2D.ts
index 3aabb7d86ee3..1635a7687401 100644
--- a/app/gui/src/dashboard/utilities/Navigator2D.ts
+++ b/app/gui/src/dashboard/utilities/Navigator2D.ts
@@ -2,9 +2,9 @@
 import type * as React from 'react'
 
 import * as detect from 'enso-common/src/detect'
+import * as object from 'enso-common/src/utilities/data/object'
 
 import * as eventModule from '#/utilities/event'
-import * as object from '#/utilities/object'
 
 // =================
 // === Constants ===
diff --git a/app/gui/src/dashboard/utilities/Visibility.ts b/app/gui/src/dashboard/utilities/Visibility.ts
index 7525f8386f4f..848142fbf033 100644
--- a/app/gui/src/dashboard/utilities/Visibility.ts
+++ b/app/gui/src/dashboard/utilities/Visibility.ts
@@ -1,9 +1,5 @@
 /** @file The state of an item that needs to be synced with a remote server. */
 
-// ==================
-// === Visibility ===
-// ==================
-
 /** The state of an item that that needs to be synced with a remote server. */
 enum Visibility {
   /** The item is present. */
diff --git a/app/gui/src/dashboard/utilities/__tests__/array.test.ts b/app/gui/src/dashboard/utilities/__tests__/array.test.ts
deleted file mode 100644
index 7ae9025e7e88..000000000000
--- a/app/gui/src/dashboard/utilities/__tests__/array.test.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/** @file Tests for `error.ts`. */
-import * as fc from '@fast-check/vitest'
-import * as v from 'vitest'
-
-import * as arrayModule from '#/utilities/array'
-
-// =============
-// === Tests ===
-// =============
-
-fc.test.prop({ array: fc.fc.array(fc.fc.anything()) })('`array.shallowEqual`', ({ array }) => {
-  v.expect(arrayModule.shallowEqual(array, [...array]))
-})
-
-fc.test.prop({
-  array: fc.fc.array(fc.fc.anything(), { minLength: 1 }).chain((array) =>
-    fc.fc.record({
-      array: fc.fc.constant(array),
-      i: fc.fc.nat(array.length - 1),
-    }),
-  ),
-})('`array.includesPredicate`', ({ array: { array, i } }) => {
-  v.expect(
-    arrayModule.includesPredicate(array)(array[i]),
-    `'${JSON.stringify(array)}' should include '${JSON.stringify(array[i])}'`,
-  ).toBe(true)
-  v.expect(arrayModule.includesPredicate(array)({}), 'unique object should not be in array').toBe(
-    false,
-  )
-})
diff --git a/app/gui/src/dashboard/utilities/__tests__/fileInfo.test.ts b/app/gui/src/dashboard/utilities/__tests__/fileInfo.test.ts
deleted file mode 100644
index 8777e0193fc2..000000000000
--- a/app/gui/src/dashboard/utilities/__tests__/fileInfo.test.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/** @file Tests for `fileInfo.ts`. */
-import * as v from 'vitest'
-
-import * as fileInfo from '#/utilities/fileInfo'
-
-// =============
-// === Tests ===
-// =============
-
-v.test('fileExtension', () => {
-  v.expect(fileInfo.fileExtension('image.png')).toBe('png')
-  v.expect(fileInfo.fileExtension('.gif')).toBe('gif')
-  v.expect(fileInfo.fileExtension('fileInfo.spec.js')).toBe('js')
-})
diff --git a/app/gui/src/dashboard/utilities/array.ts b/app/gui/src/dashboard/utilities/array.ts
deleted file mode 100644
index ddce463edb33..000000000000
--- a/app/gui/src/dashboard/utilities/array.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-/** @file Utilities for manipulating arrays. */
-
-export * from 'enso-common/src/utilities/data/array'
diff --git a/app/gui/src/dashboard/utilities/dateTime.ts b/app/gui/src/dashboard/utilities/dateTime.ts
deleted file mode 100644
index 7c87e93b3d67..000000000000
--- a/app/gui/src/dashboard/utilities/dateTime.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-/** @file Utilities for manipulating and displaying dates and times. */
-
-export * from 'enso-common/src/utilities/data/dateTime'
diff --git a/app/gui/src/dashboard/utilities/drag.ts b/app/gui/src/dashboard/utilities/drag.ts
index 30815a8b3e9a..b57a2bb23634 100644
--- a/app/gui/src/dashboard/utilities/drag.ts
+++ b/app/gui/src/dashboard/utilities/drag.ts
@@ -1,16 +1,15 @@
 /** @file Various types of drag event payloads. */
-import type * as React from 'react'
+import type { DragEvent } from 'react'
 
-import type * as backend from '#/services/Backend'
-
-import * as uniqueString from 'enso-common/src/utilities/uniqueString'
+import type { AnyAsset, AssetId, LabelName } from 'enso-common/src/services/Backend'
+import { uniqueString } from 'enso-common/src/utilities/uniqueString'
 
 // ===========================
 // === setDragImageToBlank ===
 // ===========================
 
 /** Set the drag image to blank, so a custom div can be used instead. */
-export function setDragImageToBlank(event: React.DragEvent) {
+export function setDragImageToBlank(event: DragEvent) {
   const blankElement = document.createElement('div')
   const image = new Image()
   // Blank GIF
@@ -33,8 +32,8 @@ class DragPayloadManager<Payload> {
     this.regex = new RegExp('^' + mimetype + '; id=(.+)$')
   }
 
-  /** Tries to get the payload associated with a {@link React.DragEvent}. */
-  lookup(event: React.DragEvent) {
+  /** Tries to get the payload associated with a {@link DragEvent}. */
+  lookup(event: DragEvent) {
     const item = Array.from(event.dataTransfer.items).find((dataTransferItem) =>
       dataTransferItem.type.startsWith(this.mimetype),
     )
@@ -42,15 +41,15 @@ class DragPayloadManager<Payload> {
     return id != null ? this.map.get(id) ?? null : null
   }
 
-  /** Associate data with a {@link React.DragEvent}. */
-  bind(event: React.DragEvent, payload: Payload) {
-    const id = uniqueString.uniqueString()
+  /** Associate data with a {@link DragEvent}. */
+  bind(event: DragEvent, payload: Payload) {
+    const id = uniqueString()
     event.dataTransfer.setData(`${this.mimetype}; id=${id}`, JSON.stringify(payload))
     this.map.set(id, payload)
     this.reverseMap.set(payload, id)
   }
 
-  /** Dissociate data from its associated {@link React.DragEvent}. */
+  /** Dissociate data from its associated {@link DragEvent}. */
   unbind(payload: Payload) {
     const id = this.reverseMap.get(payload)
     this.reverseMap.delete(payload)
@@ -70,8 +69,8 @@ export const ASSET_ROWS = new DragPayloadManager<AssetRowsDragPayload>(
 
 /** Metadata for an asset row. */
 interface AssetRowsDragPayloadItem {
-  readonly key: backend.AssetId
-  readonly asset: backend.AnyAsset
+  readonly key: AssetId
+  readonly asset: AnyAsset
 }
 
 /** Data for a {@link DragEvent} started from an `AssetsTable`. */
@@ -83,5 +82,5 @@ export type AssetRowsDragPayload = readonly AssetRowsDragPayloadItem[]
 
 export const LABELS = new DragPayloadManager<LabelsDragPayload>('application/x-enso-label')
 
-/** Data for a {@link DragEvent} started from an {@link backend.LabelName}. */
-export type LabelsDragPayload = ReadonlySet<backend.LabelName>
+/** Data for a {@link DragEvent} started from an {@link LabelName}. */
+export type LabelsDragPayload = ReadonlySet<LabelName>
diff --git a/app/gui/src/dashboard/utilities/error.ts b/app/gui/src/dashboard/utilities/error.ts
index 1f9ee12384b2..57762ea8fcc8 100644
--- a/app/gui/src/dashboard/utilities/error.ts
+++ b/app/gui/src/dashboard/utilities/error.ts
@@ -2,173 +2,13 @@
 import isNetworkErrorLib from 'is-network-error'
 import type * as toastify from 'react-toastify'
 
-// =====================
-// === tryGetMessage ===
-// =====================
-
-/** Evaluates the given type only if it the exact same type as `Expected`. */
-type MustBe<T, Expected> =
-  (<U>() => U extends T ? 1 : 2) extends <U>() => U extends Expected ? 1 : 2 ? T : never
-
-/**
- * Used to enforce a parameter must be `any`. This is useful to verify that the value comes
- * from an API that returns `any`.
- */
-type MustBeAny<T> =
-  never extends T ?
-    0 extends T & 1 ?
-      T
-    : never
-  : never
-
-/**
- * Enforces that a parameter must not have a known type. This means the only types allowed are
- * `{}`, `object`, `unknown` and `any`.
- */
-export type MustNotBeKnown<T> =
-  | MustBe<T, NonNullable<unknown>>
-  | MustBe<T, object>
-  | MustBe<T, unknown>
-  | MustBeAny<T>
-
-/**
- * Extracts the `message` property of a value if it is a string. Intended to be used on
- * {@link Error}s.
- */
-export function tryGetMessage<T, DefaultMessage extends string | null = null>(
-  error: MustNotBeKnown<T>,
-  // eslint-disable-next-line no-restricted-syntax
-  defaultMessage: DefaultMessage = null as DefaultMessage,
-): DefaultMessage | string {
-  const unknownError: unknown = error
-  return (
-      unknownError != null &&
-        typeof unknownError === 'object' &&
-        'message' in unknownError &&
-        typeof unknownError.message === 'string'
-    ) ?
-      unknownError.message
-    : defaultMessage
-}
-
-/** Extracts the `error` property of a value if it is a string. */
-export function tryGetError<T>(error: MustNotBeKnown<T>): string | null {
-  const unknownError: unknown = error
-  return (
-      unknownError != null &&
-        typeof unknownError === 'object' &&
-        'error' in unknownError &&
-        typeof unknownError.error === 'string'
-    ) ?
-      unknownError.error
-    : null
-}
-
-/** Extracts the `stack` property of a value if it is a string. Intended to be used on {@link Error}s. */
-export function tryGetStack<T, DefaultMessage extends string | null = null>(
-  error: MustNotBeKnown<T>,
-  // eslint-disable-next-line no-restricted-syntax
-  defaultMessage: DefaultMessage = null as DefaultMessage,
-): DefaultMessage | string {
-  const unknownError: unknown = error
-  return (
-      unknownError != null &&
-        typeof unknownError === 'object' &&
-        'stack' in unknownError &&
-        typeof unknownError.stack === 'string'
-    ) ?
-      unknownError.stack
-    : defaultMessage
-}
-
-/**
- * Like {@link tryGetMessage} but return the string representation of the value if it is not an
- * {@link Error}.
- */
-export function getMessageOrToString<T>(error: MustNotBeKnown<T>) {
-  return tryGetMessage(error) ?? String(error)
-}
+import { getMessageOrToString } from 'enso-common/src/utilities/error'
 
 /** Return a toastify option object that renders an error message. */
 export function render(f: (message: string) => string): toastify.UpdateOptions {
   return { render: ({ data }) => f(getMessageOrToString(data)) }
 }
 
-// ============================
-// === UnreachableCaseError ===
-// ============================
-
-/**
- * An error used to indicate when an unreachable case is hit in a `switch` or `if` statement.
- *
- * TypeScript is sometimes unable to determine if we're exhaustively matching in a `switch` or `if`
- * statement, so we introduce this error in the `default` case (or equivalent) to ensure that we at
- * least find out at runtime if we've missed a case, or forgotten to update the code when we add a
- * new case.
- */
-export class UnreachableCaseError extends Error {
-  /**
-   * Creates an `UnreachableCaseError`.
-   * The parameter should be `never` since it is unreachable assuming all logic is sound.
-   */
-  constructor(value: never) {
-    super(`Unreachable case: ${JSON.stringify(value)}`)
-  }
-}
-
-/**
- * A function that throws an {@link UnreachableCaseError} so that it can be used
- * in an expression.
- * @throws {UnreachableCaseError} Always.
- */
-export function unreachable(value: never): never {
-  throw new UnreachableCaseError(value)
-}
-
-// ==============
-// === assert ===
-// ==============
-
-/**
- * Assert that a value is truthy.
- * @throws {Error} when the value is not truthy.
- */
-// These literals are REQUIRED, as they are falsy.
-// eslint-disable-next-line @typescript-eslint/no-magic-numbers
-export function assert<T>(makeValue: () => T | '' | 0 | 0n | false | null | undefined): T {
-  const result = makeValue()
-  // This function explicitly checks for truthiness.
-  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-  if (!result) {
-    throw new Error(
-      'Assertion failed: `' +
-        makeValue.toString().replace(/^\s*[(].*?[)]\s*=>\s*/, '') +
-        '` should not be `null`.',
-    )
-  } else {
-    return result
-  }
-}
-
-/** Checks if the given error is a JavaScript execution error. */
-export function isJSError(error: unknown): boolean {
-  if (error instanceof TypeError) {
-    return true
-  } else if (error instanceof ReferenceError) {
-    return true
-  } else if (error instanceof SyntaxError) {
-    return true
-  } else if (error instanceof RangeError) {
-    return true
-  } else if (error instanceof URIError) {
-    return true
-  } else if (error instanceof EvalError) {
-    return true
-  } else {
-    return false
-  }
-}
-
 /**
  * Checks if the given error is a network error.
  * Wraps the `is-network-error` library to add additional network errors to the check.
diff --git a/app/gui/src/dashboard/utilities/event.ts b/app/gui/src/dashboard/utilities/event.ts
index 8590279ace39..efde1f9ac501 100644
--- a/app/gui/src/dashboard/utilities/event.ts
+++ b/app/gui/src/dashboard/utilities/event.ts
@@ -1,11 +1,7 @@
 /** @file Utility functions related to event handling. */
 import type * as React from 'react'
 
-import * as detect from 'enso-common/src/detect'
-
-// =============================
-// === Mouse event utilities ===
-// =============================
+import { isOnMacOS } from 'enso-common/src/detect'
 
 /** Returns `true` if and only if the event is a single click event. */
 export function isSingleClick(event: React.MouseEvent) {
@@ -22,13 +18,9 @@ export function isDoubleClick(event: React.MouseEvent) {
  * (`Ctrl` on Windows/Linux; `Cmd` on macOS).
  */
 export function isModKey(event: React.KeyboardEvent | React.MouseEvent) {
-  return detect.isOnMacOS() ? event.metaKey : event.ctrlKey
+  return isOnMacOS() ? event.metaKey : event.ctrlKey
 }
 
-// ================================
-// === Keyboard event utilities ===
-// ================================
-
 /**
  * A {@link RegExp} that matches {@link KeyboardEvent.code}s corresponding to non-printable
  * keys.
@@ -106,10 +98,6 @@ export function isElementSingleLineTextInput(
   )
 }
 
-// =============================
-// === isElementPartOfMonaco ===
-// =============================
-
 /** Whether the element is part of a Monaco editor. */
 export function isElementPartOfMonaco(element: EventTarget | null) {
   const recursiveCheck = (htmlElement: HTMLElement | null): boolean => {
@@ -127,10 +115,6 @@ export function isElementPartOfMonaco(element: EventTarget | null) {
   return element != null && element instanceof HTMLElement && recursiveCheck(element)
 }
 
-// =========================
-// === isElementInBounds ===
-// =========================
-
 /** Whether the event occurred within the given {@link DOMRect}. */
 export function isElementInBounds(
   event: Pick<MouseEvent, 'clientX' | 'clientY'>,
@@ -144,20 +128,3 @@ export function isElementInBounds(
     event.clientY <= bounds.bottom + margin
   )
 }
-
-// ==================
-// === submitForm ===
-// ==================
-
-/** An event with an {@link Element} as its target. */
-interface EventWithElementTarget {
-  readonly target: Element
-}
-
-/** Search for an ancestor `form` element and try to submit it. */
-export function submitForm(event: EventWithElementTarget) {
-  const closestForm = event.target.closest('form')
-  if (closestForm != null) {
-    closestForm.requestSubmit()
-  }
-}
diff --git a/app/gui/src/dashboard/utilities/functions.ts b/app/gui/src/dashboard/utilities/functions.ts
deleted file mode 100644
index f53b116afea7..000000000000
--- a/app/gui/src/dashboard/utilities/functions.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @file
- * A collection of utilities that work with functions.
- */
-
-/** A function that does nothing, except stable reference. */
-// eslint-disable-next-line no-restricted-syntax, @typescript-eslint/no-explicit-any
-export const noop: (...args: any[]) => void = () => {}
diff --git a/app/gui/src/dashboard/utilities/indent.ts b/app/gui/src/dashboard/utilities/indent.ts
index 2d2cb4495d0b..298b327e85db 100644
--- a/app/gui/src/dashboard/utilities/indent.ts
+++ b/app/gui/src/dashboard/utilities/indent.ts
@@ -1,9 +1,5 @@
 /** @file Utilities for indenting elements. */
 
-// =================
-// === Constants ===
-// =================
-
 /**
  * An explicit list of classes  used for indentation. This is required so that Tailwind includes
  * the classes in the final CSS file.
diff --git a/app/gui/src/dashboard/utilities/input.ts b/app/gui/src/dashboard/utilities/input.ts
index fc07ee6ab218..ba9fab2fd884 100644
--- a/app/gui/src/dashboard/utilities/input.ts
+++ b/app/gui/src/dashboard/utilities/input.ts
@@ -1,8 +1,6 @@
 /** @file Functions related to inputs. */
 
-/**
- * Trigger a file input.
- */
+/** Trigger a file input. */
 export function inputFiles() {
   return new Promise<FileList>((resolve, reject) => {
     const input = document.createElement('input')
diff --git a/app/gui/src/dashboard/utilities/inputBindings.ts b/app/gui/src/dashboard/utilities/inputBindings.ts
index 6b9066576e31..731d7d3c8369 100644
--- a/app/gui/src/dashboard/utilities/inputBindings.ts
+++ b/app/gui/src/dashboard/utilities/inputBindings.ts
@@ -2,29 +2,29 @@
  * @file Exports `defineKeybinds`, a function to define a namespace containing keyboard and mouse
  * shortcuts.
  */
-import * as detect from 'enso-common/src/detect'
+import { isOnMacOS } from 'enso-common/src/detect'
+import { newtypeConstructor, type Newtype } from 'enso-common/src/utilities/data/newtype'
+import { unsafeMutable } from 'enso-common/src/utilities/data/object'
+import { camelCaseToTitleCase } from 'enso-common/src/utilities/data/string'
 
-import * as eventModule from '#/utilities/event'
-import * as newtype from '#/utilities/newtype'
-import * as object from '#/utilities/object'
-import * as string from '#/utilities/string'
+import { isElementTextInput, isTextInputEvent } from '#/utilities/event'
 
 // ================
 // === Newtypes ===
 // ================
 
 /** A keyboard key obtained from `KeyboardEvent.key`. */
-type KeyName = newtype.Newtype<string, 'keyboard key'>
+type KeyName = Newtype<string, 'keyboard key'>
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-const KeyName = newtype.newtypeConstructor<KeyName>()
+const KeyName = newtypeConstructor<KeyName>()
 /** A bitset of flags representing each keyboard modifier key. */
-type ModifierFlags = newtype.Newtype<number, 'modifier flags'>
+type ModifierFlags = Newtype<number, 'modifier flags'>
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-const ModifierFlags = newtype.newtypeConstructor<ModifierFlags>()
+const ModifierFlags = newtypeConstructor<ModifierFlags>()
 /** A bitset of flags representing each mouse pointer. */
-type PointerButtonFlags = newtype.Newtype<number, 'pointer button flags'>
+type PointerButtonFlags = Newtype<number, 'pointer button flags'>
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-const PointerButtonFlags = newtype.newtypeConstructor<PointerButtonFlags>()
+const PointerButtonFlags = newtypeConstructor<PointerButtonFlags>()
 
 // =============
 // === Types ===
@@ -84,7 +84,7 @@ const RAW_MODIFIER_FLAG = {
 } as const
 
 const MODIFIER_FLAG_NAME: Readonly<Record<Modifier, ModifierKey>> = {
-  Mod: detect.isOnMacOS() ? 'Meta' : 'Ctrl',
+  Mod: isOnMacOS() ? 'Meta' : 'Ctrl',
   Ctrl: 'Ctrl',
   Alt: 'Alt',
   Shift: 'Shift',
@@ -192,7 +192,7 @@ function buttonToPointerButtonFlags(button: number) {
 // ==========================
 
 const ALL_MODIFIERS =
-  detect.isOnMacOS() ?
+  isOnMacOS() ?
     (['Ctrl', 'Shift', 'Alt', 'Mod'] as const)
   : (['Mod', 'Shift', 'Alt', 'Meta'] as const)
 /** All valid keyboard modifier keys. */
@@ -321,7 +321,7 @@ export const normalizedKeyboardSegmentLookup = Object.fromEntries<string>(
 )
 normalizedKeyboardSegmentLookup[''] = '+'
 normalizedKeyboardSegmentLookup['space'] = ' '
-normalizedKeyboardSegmentLookup['osdelete'] = detect.isOnMacOS() ? 'Backspace' : 'Delete'
+normalizedKeyboardSegmentLookup['osdelete'] = isOnMacOS() ? 'Backspace' : 'Delete'
 /**
  * A mapping between the lowercased segment of a keyboard shortcut to its properly capitalized
  * normalized form.
@@ -494,10 +494,7 @@ export function defineBindingNamespace<T extends Record<keyof T, KeybindValue>>(
       Object.entries(bindingsAsRecord).map((kv) => {
         const [name, info] = kv
         if (Array.isArray(info)) {
-          return [
-            name,
-            { name: string.camelCaseToTitleCase(name), bindings: structuredClone(info) },
-          ]
+          return [name, { name: camelCaseToTitleCase(name), bindings: structuredClone(info) }]
         } else {
           return [name, structuredClone(info)]
         }
@@ -562,9 +559,9 @@ export function defineBindingNamespace<T extends Record<keyof T, KeybindValue>>(
             : buttonToPointerButtonFlags(event.button)
           ]?.[eventModifierFlags]
       let handle = handlers[DEFAULT_HANDLER]
-      const isTextInputFocused = eventModule.isElementTextInput(document.activeElement)
-      const isTextInputEvent = 'key' in event && eventModule.isTextInputEvent(event)
-      const shouldIgnoreEvent = isTextInputFocused && isTextInputEvent
+      const isTextInputFocused = isElementTextInput(document.activeElement)
+      const isEventTextInputEvent = 'key' in event && isTextInputEvent(event)
+      const shouldIgnoreEvent = isTextInputFocused && isEventTextInputEvent
       if (matchingBindings != null && !shouldIgnoreEvent) {
         for (const bindingNameRaw in handlers) {
           // This is SAFE, because `handlers` is an object with identical keys to `T`,
@@ -633,7 +630,7 @@ export function defineBindingNamespace<T extends Record<keyof T, KeybindValue>>(
         bindingsOrInfo.bindings
       : bindingsOrInfo
     if (bindingsList != null) {
-      object.unsafeMutable(bindingsList).splice(bindingsList.indexOf(binding), 1)
+      unsafeMutable(bindingsList).splice(bindingsList.indexOf(binding), 1)
       rebuildLookups()
     }
   }
@@ -645,7 +642,7 @@ export function defineBindingNamespace<T extends Record<keyof T, KeybindValue>>(
         bindingsOrInfo.bindings
       : bindingsOrInfo
     if (bindingsList != null) {
-      object.unsafeMutable(bindingsList).push(binding)
+      unsafeMutable(bindingsList).push(binding)
       rebuildLookups()
     }
   }
diff --git a/app/gui/src/dashboard/utilities/jsonSchema.ts b/app/gui/src/dashboard/utilities/jsonSchema.ts
index 64d6eeb48a87..96aef9948565 100644
--- a/app/gui/src/dashboard/utilities/jsonSchema.ts
+++ b/app/gui/src/dashboard/utilities/jsonSchema.ts
@@ -1,5 +1,5 @@
 /** @file Utilities for using JSON schemas. */
-import * as objectModule from '#/utilities/object'
+import { asObject, singletonObjectOrNull } from 'enso-common/src/utilities/data/object'
 
 // =================
 // === lookupDef ===
@@ -9,7 +9,7 @@ import * as objectModule from '#/utilities/object'
 export function lookupDef(defs: Record<string, object>, schema: object) {
   const ref = '$ref' in schema && typeof schema.$ref === 'string' ? schema.$ref : null
   const [, name] = ref?.match(/^#[/][$]defs[/](.+)$/) ?? ''
-  return name == null ? null : objectModule.asObject(defs[name])
+  return name == null ? null : asObject(defs[name])
 }
 
 // =====================
@@ -31,7 +31,7 @@ function getSchemaNameHelper(defs: Record<string, object>, schema: object): stri
     const members = Array.isArray(schema.anyOf) ? schema.anyOf : []
     return (
       members
-        .flatMap(objectModule.singletonObjectOrNull)
+        .flatMap(singletonObjectOrNull)
         .map((childSchema) => getSchemaName(defs, childSchema))
         .join(' | ') || '(unknown)'
     )
@@ -39,7 +39,7 @@ function getSchemaNameHelper(defs: Record<string, object>, schema: object): stri
     const members = Array.isArray(schema.allOf) ? schema.allOf : []
     return (
       members
-        .flatMap(objectModule.singletonObjectOrNull)
+        .flatMap(singletonObjectOrNull)
         .map((childSchema) => getSchemaName(defs, childSchema))
         .join(' & ') || '(unknown)'
     )
@@ -170,8 +170,7 @@ function constantValueOfSchemaHelper(
           break
         }
         case 'object': {
-          const propertiesObject =
-            'properties' in schema ? objectModule.asObject(schema.properties) ?? {} : {}
+          const propertiesObject = 'properties' in schema ? asObject(schema.properties) ?? {} : {}
           const required = new Set(
             'required' in schema && Array.isArray(schema.required) ?
               schema.required.map(String)
@@ -180,7 +179,7 @@ function constantValueOfSchemaHelper(
           const object: Record<string, unknown> = {}
           results.push(object)
           for (const [key, child] of Object.entries(propertiesObject)) {
-            const childSchema = objectModule.asObject(child)
+            const childSchema = asObject(child)
             if (childSchema == null || (partial && !required.has(key))) {
               continue
             }
@@ -204,7 +203,7 @@ function constantValueOfSchemaHelper(
             const array: unknown[] = []
             results.push(array)
             for (const childSchema of schema.prefixItems) {
-              const childSchemaObject = objectModule.asObject(childSchema)
+              const childSchemaObject = asObject(childSchema)
               const childValue =
                 childSchemaObject == null ?
                   []
@@ -235,7 +234,7 @@ function constantValueOfSchemaHelper(
       if (!Array.isArray(schema.anyOf) || (!partial && schema.anyOf.length !== 1)) {
         return invalid
       } else {
-        const firstMember = objectModule.asObject(schema.anyOf[0])
+        const firstMember = asObject(schema.anyOf[0])
         if (firstMember == null) {
           return invalid
         } else {
@@ -254,7 +253,7 @@ function constantValueOfSchemaHelper(
         return invalid
       } else {
         for (const childSchema of schema.allOf) {
-          const schemaObject = objectModule.asObject(childSchema)
+          const schemaObject = asObject(childSchema)
           const value =
             schemaObject == null ? [] : constantValueOfSchema(defs, schemaObject, partial)
           if (!partial && value.length === 0) {
@@ -292,7 +291,7 @@ function constantValueOfSchemaHelper(
       const result = results[0] ?? null
       let resultArray: readonly [] | readonly [NonNullable<unknown> | null] = [result]
       for (const child of results.slice(1)) {
-        const childSchema = objectModule.asObject(child)
+        const childSchema = asObject(child)
         if (childSchema == null) {
           continue
         }
diff --git a/app/gui/src/dashboard/utilities/newtype.ts b/app/gui/src/dashboard/utilities/newtype.ts
deleted file mode 100644
index e6265f015b67..000000000000
--- a/app/gui/src/dashboard/utilities/newtype.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-/** @file Emulates `newtype`s in TypeScript. */
-export * from 'enso-common/src/utilities/data/newtype'
diff --git a/app/gui/src/dashboard/utilities/object.ts b/app/gui/src/dashboard/utilities/object.ts
deleted file mode 100644
index fc95c7f30f67..000000000000
--- a/app/gui/src/dashboard/utilities/object.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-/** @file Functions related to manipulating objects. */
-
-export * from 'enso-common/src/utilities/data/object'
diff --git a/app/gui/src/dashboard/utilities/permissions.ts b/app/gui/src/dashboard/utilities/permissions.ts
index 5346d4f76f42..a5d22fb7a9d5 100644
--- a/app/gui/src/dashboard/utilities/permissions.ts
+++ b/app/gui/src/dashboard/utilities/permissions.ts
@@ -1,15 +1,20 @@
 /** @file Utilities for working with permissions. */
-import type { Category } from '#/layouts/CategorySwitcher/Category'
-import * as backend from '#/services/Backend'
 import {
-  type AssetPermission,
   compareAssetPermissions,
+  Plan,
+  type AnyAsset,
+  type AssetPermission,
   type User,
+  type UserGroupInfo,
+  type UserGroupPermission,
+  type UserPermission,
 } from 'enso-common/src/services/Backend'
 import { merge } from 'enso-common/src/utilities/data/object'
 import { Permission, PermissionAction } from 'enso-common/src/utilities/permissions'
 export * from 'enso-common/src/utilities/permissions'
 
+import type { Category } from '#/layouts/CategorySwitcher/Category'
+
 /** CSS classes for each permission. */
 export const PERMISSION_CLASS_NAME: Readonly<Record<Permission, string>> = {
   [Permission.owner]: 'text-tag-text bg-permission-owner',
@@ -36,17 +41,16 @@ export const EXEC_CLASS_NAME = 'text-tag-text bg-permission-exec'
 export function tryCreateOwnerPermission(
   path: string,
   category: Category,
-  user: backend.User,
-  users: readonly backend.User[],
-  userGroups: readonly backend.UserGroupInfo[],
-): readonly backend.AssetPermission[] {
+  user: User,
+  users: readonly User[],
+  userGroups: readonly UserGroupInfo[],
+): readonly AssetPermission[] {
   switch (category.type) {
     case 'team': {
       return [{ userGroup: category.team, permission: PermissionAction.own }]
     }
     default: {
-      const isFreeOrSolo =
-        user.plan == null || user.plan === backend.Plan.free || user.plan === backend.Plan.solo
+      const isFreeOrSolo = user.plan == null || user.plan === Plan.free || user.plan === Plan.solo
       const owner = isFreeOrSolo ? user : newOwnerFromPath(path, users, userGroups) ?? user
       if ('userId' in owner) {
         const { organizationId, userId, name, email } = owner
@@ -105,10 +109,7 @@ export function canPermissionModifyDirectoryContents(permission: PermissionActio
 // ==============================
 
 /** Replace the first owner permission with the permission of a new user or team. */
-export function replaceOwnerPermission(
-  asset: backend.AnyAsset,
-  newOwner: backend.User | backend.UserGroupInfo,
-) {
+export function replaceOwnerPermission(asset: AnyAsset, newOwner: User | UserGroupInfo) {
   let found = false
   const newPermissions =
     asset.permissions?.map((permission) => {
@@ -117,13 +118,13 @@ export function replaceOwnerPermission(
       } else {
         found = true
         if ('userId' in newOwner) {
-          const newPermission: backend.UserPermission = {
+          const newPermission: UserPermission = {
             user: newOwner,
             permission: PermissionAction.own,
           }
           return newPermission
         } else {
-          const newPermission: backend.UserGroupPermission = {
+          const newPermission: UserGroupPermission = {
             userGroup: newOwner,
             permission: PermissionAction.own,
           }
@@ -150,8 +151,8 @@ export function isTeamPath(path: string) {
 /** Find the new owner of an asset based on the path of its new parent directory. */
 export function newOwnerFromPath(
   path: string,
-  users: readonly backend.User[],
-  userGroups: readonly backend.UserGroupInfo[],
+  users: readonly User[],
+  userGroups: readonly UserGroupInfo[],
 ) {
   const [, userName] = path.match(USER_PATH_REGEX) ?? []
   if (userName != null) {
diff --git a/app/gui/src/dashboard/utilities/preventNavigation.tsx b/app/gui/src/dashboard/utilities/preventNavigation.tsx
index b4f70666ecb4..49710655d685 100644
--- a/app/gui/src/dashboard/utilities/preventNavigation.tsx
+++ b/app/gui/src/dashboard/utilities/preventNavigation.tsx
@@ -1,11 +1,12 @@
 /** @file A React hook to prevent navigation. */
 import { useEffect } from 'react'
 
+import { isOnElectron } from 'enso-common/src/detect'
+
 import { Button, ButtonGroup, Dialog, Text } from '#/components/AriaComponents'
 import { useSyncRef } from '#/hooks/syncRefHooks'
 import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
-import { isOnElectron } from 'enso-common/src/detect'
 
 let shouldClose = false
 
diff --git a/app/gui/src/dashboard/utilities/sorting.ts b/app/gui/src/dashboard/utilities/sorting.ts
index abfb309a7859..6bf4533ffb77 100644
--- a/app/gui/src/dashboard/utilities/sorting.ts
+++ b/app/gui/src/dashboard/utilities/sorting.ts
@@ -1,9 +1,5 @@
 /** @file Utilities related to sorting. */
 
-// =====================
-// === SortDirection ===
-// =====================
-
 /** Sort direction. */
 export enum SortDirection {
   ascending = 'ascending',
@@ -28,10 +24,6 @@ export function nextSortDirection(sortDirection: SortDirection | null) {
   }
 }
 
-// ================
-// === SortInfo ===
-// ================
-
 /** Sort information. */
 export interface SortInfo<Field> {
   readonly field: Field
diff --git a/app/gui/src/dashboard/utilities/string.ts b/app/gui/src/dashboard/utilities/string.ts
deleted file mode 100644
index c4fd162dd3a9..000000000000
--- a/app/gui/src/dashboard/utilities/string.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-/** @file Utilities for manipulating strings. */
-
-// =======================
-// === capitalizeFirst ===
-// =======================
-
-/** Return the given string, but with the first letter uppercased. */
-export function capitalizeFirst(string: string) {
-  return string.replace(/^./, (match) => match.toUpperCase())
-}
-
-// ===================
-// === regexEscape ===
-// ===================
-
-/** Sanitizes a string for use as a regex. */
-export function regexEscape(string: string) {
-  return string.replace(/[\\^$.|?*+()[{]/g, '\\$&')
-}
-
-// ========================
-// === isWhitespaceOnly ===
-// ========================
-
-/** Whether a string consists only of whitespace, meaning that the string will not be visible. */
-export function isWhitespaceOnly(string: string) {
-  return /^\s*$/.test(string)
-}
-
-// ============================
-// === camelCaseToTitleCase ===
-// ============================
-
-/**
- * Inserts spaces between every word, and capitalizes the first word.
- * DOES NOT make particles lowercase.
- */
-export function camelCaseToTitleCase(string: string) {
-  return string.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/^./, (c) => c.toUpperCase())
-}
-
-// ==============================
-// === compareCaseInsensitive ===
-// ==============================
-
-/**
- * Return `1` if `a > b`, `-1` if `a < b`, and `0` if `a === b`.
- * Falls back to a case-sensitive comparison if the case-insensitive comparison returns `0`.
- */
-export function compareCaseInsensitive(a: string, b: string) {
-  const aLower = a.toLowerCase()
-  const bLower = b.toLowerCase()
-  return (
-    aLower > bLower ? 1
-    : aLower < bLower ? -1
-    : a > b ? 1
-    : a < b ? -1
-    : 0
-  )
-}
-
-// =====================
-// === normalizeName ===
-// =====================
-
-/** Return a normalized name to check for duplicates. */
-export function normalizeName(name: string) {
-  return name.trim().replace(/\s+/g, ' ').toLowerCase()
-}
diff --git a/app/gui/src/dashboard/utilities/style.ts b/app/gui/src/dashboard/utilities/style.ts
index 881881bd2eb1..74fdc0ba5cfa 100644
--- a/app/gui/src/dashboard/utilities/style.ts
+++ b/app/gui/src/dashboard/utilities/style.ts
@@ -1,9 +1,5 @@
 /** @file Constants related to styles. */
 
-// =================
-// === Constants ===
-// =================
-
 /** The width of a vertical scrollbar on a scrollable element. */
 export const SCROLLBAR_WIDTH_PX = 11
 /** The height of a horizontal scrollbar on a scrollable element. */
diff --git a/app/gui/src/dashboard/utilities/tailwindMerge.ts b/app/gui/src/dashboard/utilities/tailwindMerge.ts
index 8eafa74a5ac9..dc015b8fa8b2 100644
--- a/app/gui/src/dashboard/utilities/tailwindMerge.ts
+++ b/app/gui/src/dashboard/utilities/tailwindMerge.ts
@@ -1,9 +1,5 @@
 /** @file `tailwind-merge` with a custom configuration. */
-import * as tailwindMerge from 'tailwind-merge'
-
-// =================
-// === Constants ===
-// =================
+import { extendTailwindMerge, twJoin as originalTwJoin } from 'tailwind-merge'
 
 export const TAILWIND_MERGE_CONFIG = {
   extend: {
@@ -20,14 +16,10 @@ export const TAILWIND_MERGE_CONFIG = {
   },
 }
 
-// ===============
-// === twMerge ===
-// ===============
-
 /** `twMerge` with a custom configuration. */
 // This is a function, even though it does not contain function syntax.
 // eslint-disable-next-line no-restricted-syntax
-export const twMerge = tailwindMerge.extendTailwindMerge(TAILWIND_MERGE_CONFIG)
+export const twMerge = extendTailwindMerge(TAILWIND_MERGE_CONFIG)
 // reexporting twJoin from the original library for convenience.
 // eslint-disable-next-line no-restricted-syntax
-export const twJoin = tailwindMerge.twJoin
+export const twJoin = originalTwJoin
diff --git a/app/gui/src/dashboard/utilities/tailwindVariants.ts b/app/gui/src/dashboard/utilities/tailwindVariants.ts
index 08d26f452a58..d59856625842 100644
--- a/app/gui/src/dashboard/utilities/tailwindVariants.ts
+++ b/app/gui/src/dashboard/utilities/tailwindVariants.ts
@@ -6,10 +6,6 @@ import { TAILWIND_MERGE_CONFIG } from '#/utilities/tailwindMerge'
 
 export * from 'tailwind-variants'
 
-// ==========
-// === tv ===
-// ==========
-
 // This is a function, even though it does not contain function syntax.
 // eslint-disable-next-line no-restricted-syntax
 export const tv = createTV({ twMergeConfig: TAILWIND_MERGE_CONFIG })
diff --git a/app/gui/src/dashboard/utilities/validation.ts b/app/gui/src/dashboard/utilities/validation.ts
index 12134b1e2352..0c41ecf65f44 100644
--- a/app/gui/src/dashboard/utilities/validation.ts
+++ b/app/gui/src/dashboard/utilities/validation.ts
@@ -1,9 +1,5 @@
 /** @file Validation patterns for text inputs. */
 
-// ==================
-// === Validation ===
-// ==================
-
 /**
  * Regex pattern for valid AWS Cognito passwords.
  * A fully correct regex is here: https://stackoverflow.com/a/58767981/3323231.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 972b3378b195..bb04da00c086 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -97,6 +97,10 @@ importers:
       vue:
         specifier: ^3.5.2
         version: 3.5.2(typescript@5.5.3)
+    devDependencies:
+      '@fast-check/vitest':
+        specifier: ^0.0.8
+        version: 0.0.8(vitest@1.6.0(@types/node@22.9.0)(jsdom@24.1.0)(lightningcss@1.25.1))
 
   app/gui:
     dependencies:

From 8aef1ea1fe5af5d10d24bc2c2d6e35c6e30525f7 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Fri, 13 Dec 2024 23:45:30 +1000
Subject: [PATCH 02/15] Use named import in dashboard code for `Backend`
 (project view code not changed)

---
 .../dashboard/components/dashboard/Permission.tsx  |  2 +-
 .../dashboard/components/dashboard/ProjectIcon.tsx |  8 ++++++--
 app/gui/src/dashboard/data/datalinkValidator.ts    |  6 +++---
 app/gui/src/dashboard/hooks/backendHooks.tsx       | 14 +++++++-------
 app/gui/src/dashboard/hooks/projectHooks.ts        |  2 +-
 .../layouts/AssetDiffView/AssetDiffView.tsx        |  3 +--
 .../AssetDiffView/useFetchVersionContent.ts        |  3 +--
 .../src/dashboard/layouts/AssetDocs/AssetDocs.tsx  | 10 +++++-----
 .../layouts/AssetPanel/AssetPanelState.ts          |  3 +--
 .../src/dashboard/layouts/AssetProjectSession.tsx  |  3 +--
 .../src/dashboard/layouts/AssetProjectSessions.tsx |  8 ++++++--
 app/gui/src/dashboard/layouts/AssetProperties.tsx  |  2 +-
 .../layouts/AssetVersions/AssetVersion.tsx         |  8 ++++++--
 .../layouts/AssetVersions/AssetVersions.tsx        |  8 +++-----
 .../layouts/AssetVersions/useAssetVersions.ts      |  3 +--
 app/gui/src/dashboard/layouts/AssetsTable.tsx      |  2 +-
 .../dashboard/layouts/AssetsTableContextMenu.tsx   |  9 +++++++--
 .../Settings/ActivityLogSettingsSection.tsx        |  3 +--
 .../dashboard/layouts/Settings/MembersTable.tsx    |  3 +--
 .../Settings/OrganizationProfilePictureInput.tsx   |  2 +-
 .../layouts/Settings/ProfilePictureInput.tsx       |  6 +++---
 .../layouts/Settings/UserGroupsSettingsSection.tsx |  2 +-
 app/gui/src/dashboard/layouts/Settings/data.tsx    |  2 +-
 app/gui/src/dashboard/layouts/Settings/index.tsx   |  2 +-
 app/gui/src/dashboard/modals/ManageLabelsModal.tsx |  2 +-
 .../dashboard/modals/ManagePermissionsModal.tsx    |  2 +-
 app/gui/src/dashboard/modals/NewLabelModal.tsx     |  5 ++---
 app/gui/src/dashboard/modals/NewUserGroupModal.tsx |  2 +-
 app/gui/src/dashboard/modals/ProjectLogsModal.tsx  |  3 +--
 app/gui/src/dashboard/services/LocalBackend.ts     |  3 ++-
 app/gui/src/dashboard/services/RemoteBackend.ts    |  5 +++--
 31 files changed, 72 insertions(+), 64 deletions(-)

diff --git a/app/gui/src/dashboard/components/dashboard/Permission.tsx b/app/gui/src/dashboard/components/dashboard/Permission.tsx
index 85c5b207e81e..4b81f295398b 100644
--- a/app/gui/src/dashboard/components/dashboard/Permission.tsx
+++ b/app/gui/src/dashboard/components/dashboard/Permission.tsx
@@ -3,13 +3,13 @@ import { useEffect, useState } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
-import type Backend from 'enso-common/src/services/Backend'
 import {
   AssetType,
   getAssetPermissionId,
   getAssetPermissionName,
   type Asset,
   type AssetPermission,
+  type Backend,
   type UserPermissionIdentifier,
 } from 'enso-common/src/services/Backend'
 import type { TextId } from 'enso-common/src/text'
diff --git a/app/gui/src/dashboard/components/dashboard/ProjectIcon.tsx b/app/gui/src/dashboard/components/dashboard/ProjectIcon.tsx
index 51ebc1ecb90a..5fa88512ae22 100644
--- a/app/gui/src/dashboard/components/dashboard/ProjectIcon.tsx
+++ b/app/gui/src/dashboard/components/dashboard/ProjectIcon.tsx
@@ -3,8 +3,12 @@ import { useMemo } from 'react'
 
 import { useQuery } from '@tanstack/react-query'
 
-import type Backend from 'enso-common/src/services/Backend'
-import { BackendType, ProjectState, type ProjectAsset } from 'enso-common/src/services/Backend'
+import {
+  BackendType,
+  ProjectState,
+  type Backend,
+  type ProjectAsset,
+} from 'enso-common/src/services/Backend'
 
 import ArrowUpIcon from '#/assets/arrow_up.svg'
 import PlayIcon from '#/assets/play.svg'
diff --git a/app/gui/src/dashboard/data/datalinkValidator.ts b/app/gui/src/dashboard/data/datalinkValidator.ts
index f053e4713452..c12890c02846 100644
--- a/app/gui/src/dashboard/data/datalinkValidator.ts
+++ b/app/gui/src/dashboard/data/datalinkValidator.ts
@@ -2,9 +2,9 @@
 import type * as ajv from 'ajv/dist/2020'
 import Ajv from 'ajv/dist/2020'
 
-import SCHEMA from '#/data/datalinkSchema.json' with { type: 'json' }
+import { assert } from 'enso-common/src/utilities/error'
 
-import * as error from '#/utilities/error'
+import SCHEMA from '#/data/datalinkSchema.json' with { type: 'json' }
 
 export const AJV = new Ajv({
   formats: {
@@ -16,6 +16,6 @@ export const AJV = new Ajv({
 })
 AJV.addSchema(SCHEMA)
 
-export const validateDatalink = error.assert<ajv.ValidateFunction>(() =>
+export const validateDatalink = assert<ajv.ValidateFunction>(() =>
   AJV.getSchema('#/$defs/DataLink'),
 )
diff --git a/app/gui/src/dashboard/hooks/backendHooks.tsx b/app/gui/src/dashboard/hooks/backendHooks.tsx
index a1ccbe3c3f9c..4e2577754e23 100644
--- a/app/gui/src/dashboard/hooks/backendHooks.tsx
+++ b/app/gui/src/dashboard/hooks/backendHooks.tsx
@@ -21,7 +21,6 @@ import {
   backendQueryOptions as backendQueryOptionsBase,
   type BackendMethods,
 } from 'enso-common/src/backendQuery'
-import type Backend from 'enso-common/src/services/Backend'
 import {
   assetIsDirectory,
   assetIsFile,
@@ -33,7 +32,6 @@ import {
   createPlaceholderFileAsset,
   createPlaceholderProjectAsset,
   createPlaceholderSecretAsset,
-  DatalinkId,
   escapeSpecialCharacters,
   extractProjectExtension,
   fileIsNotProject,
@@ -43,16 +41,18 @@ import {
   isLoadingAssetId,
   Path,
   S3_CHUNK_SIZE_BYTES,
-  S3MultipartPart,
-  SpecialEmptyAsset,
-  SpecialErrorAsset,
-  SpecialLoadingAsset,
   stripProjectExtension,
-  UploadFileRequestParams,
   type AnyAsset,
   type AssetId,
+  type Backend,
+  type DatalinkId,
   type DirectoryAsset,
   type DirectoryId,
+  type S3MultipartPart,
+  type SpecialEmptyAsset,
+  type SpecialErrorAsset,
+  type SpecialLoadingAsset,
+  type UploadFileRequestParams,
   type User,
   type UserGroupInfo,
 } from 'enso-common/src/services/Backend'
diff --git a/app/gui/src/dashboard/hooks/projectHooks.ts b/app/gui/src/dashboard/hooks/projectHooks.ts
index e764e0592b7f..1ebb24e70314 100644
--- a/app/gui/src/dashboard/hooks/projectHooks.ts
+++ b/app/gui/src/dashboard/hooks/projectHooks.ts
@@ -2,7 +2,6 @@
 import { queryOptions, useMutation, useQueryClient } from '@tanstack/react-query'
 import invariant from 'tiny-invariant'
 
-import type Backend from 'enso-common/src/services/Backend'
 import {
   AssetType,
   BackendType,
@@ -10,6 +9,7 @@ import {
   type AnyAsset,
   type Asset,
   type AssetId,
+  type Backend,
   type DirectoryId,
   type ProjectAsset,
 } from 'enso-common/src/services/Backend'
diff --git a/app/gui/src/dashboard/layouts/AssetDiffView/AssetDiffView.tsx b/app/gui/src/dashboard/layouts/AssetDiffView/AssetDiffView.tsx
index 3a68498ed974..82fb1326f831 100644
--- a/app/gui/src/dashboard/layouts/AssetDiffView/AssetDiffView.tsx
+++ b/app/gui/src/dashboard/layouts/AssetDiffView/AssetDiffView.tsx
@@ -2,8 +2,7 @@
 import { DiffEditor } from '@monaco-editor/react'
 import { useSuspenseQueries } from '@tanstack/react-query'
 
-import type Backend from 'enso-common/src/services/Backend'
-import type { ProjectAsset, S3ObjectVersionId } from 'enso-common/src/services/Backend'
+import type { Backend, ProjectAsset, S3ObjectVersionId } from 'enso-common/src/services/Backend'
 
 import { StatelessSpinner } from '#/components/StatelessSpinner'
 import { versionContentQueryOptions } from '#/layouts/AssetDiffView/useFetchVersionContent'
diff --git a/app/gui/src/dashboard/layouts/AssetDiffView/useFetchVersionContent.ts b/app/gui/src/dashboard/layouts/AssetDiffView/useFetchVersionContent.ts
index 654feac6069a..1cd3637b789b 100644
--- a/app/gui/src/dashboard/layouts/AssetDiffView/useFetchVersionContent.ts
+++ b/app/gui/src/dashboard/layouts/AssetDiffView/useFetchVersionContent.ts
@@ -3,8 +3,7 @@ import { queryOptions, useQuery } from '@tanstack/react-query'
 
 import { splitFileContents } from 'ydoc-shared/ensoFile'
 
-import type Backend from 'enso-common/src/services/Backend'
-import type { ProjectId, S3ObjectVersionId } from 'enso-common/src/services/Backend'
+import type { Backend, ProjectId, S3ObjectVersionId } from 'enso-common/src/services/Backend'
 
 const TWO_MINUTES_MS = 120_000
 
diff --git a/app/gui/src/dashboard/layouts/AssetDocs/AssetDocs.tsx b/app/gui/src/dashboard/layouts/AssetDocs/AssetDocs.tsx
index e47e5d58ab30..abb7812ff202 100644
--- a/app/gui/src/dashboard/layouts/AssetDocs/AssetDocs.tsx
+++ b/app/gui/src/dashboard/layouts/AssetDocs/AssetDocs.tsx
@@ -1,16 +1,16 @@
 /** @file Documentation display for an asset. */
 import { useCallback } from 'react'
 
-import type Backend from 'enso-common/src/services/Backend'
-import { AssetType, type Asset } from 'enso-common/src/services/Backend'
+import { useSuspenseQuery } from '@tanstack/react-query'
+
+import { AssetType, type Asset, type Backend } from 'enso-common/src/services/Backend'
 
 import { MarkdownViewer } from '#/components/MarkdownViewer'
 import { Result } from '#/components/Result'
+import { versionContentQueryOptions } from '#/layouts/AssetDiffView/useFetchVersionContent'
+import { assetPanelStore } from '#/layouts/AssetPanel'
 import { useText } from '#/providers/TextProvider'
 import { useStore } from '#/utilities/zustand'
-import { useSuspenseQuery } from '@tanstack/react-query'
-import { versionContentQueryOptions } from '../AssetDiffView/useFetchVersionContent'
-import { assetPanelStore } from '../AssetPanel'
 
 import { MutableFunctionDef, parseModule } from 'ydoc-shared/ast'
 import { splitFileContents } from 'ydoc-shared/ensoFile'
diff --git a/app/gui/src/dashboard/layouts/AssetPanel/AssetPanelState.ts b/app/gui/src/dashboard/layouts/AssetPanel/AssetPanelState.ts
index 6ae012f4bdf2..55d2c5c58a95 100644
--- a/app/gui/src/dashboard/layouts/AssetPanel/AssetPanelState.ts
+++ b/app/gui/src/dashboard/layouts/AssetPanel/AssetPanelState.ts
@@ -7,8 +7,7 @@ import { startTransition } from 'react'
 
 import * as z from 'zod'
 
-import type Backend from 'enso-common/src/services/Backend'
-import type { AnyAsset } from 'enso-common/src/services/Backend'
+import type { AnyAsset, Backend } from 'enso-common/src/services/Backend'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import type { AssetPropertiesSpotlight } from '#/layouts/AssetProperties'
diff --git a/app/gui/src/dashboard/layouts/AssetProjectSession.tsx b/app/gui/src/dashboard/layouts/AssetProjectSession.tsx
index cc67fc1dfb6e..31430b6c8d25 100644
--- a/app/gui/src/dashboard/layouts/AssetProjectSession.tsx
+++ b/app/gui/src/dashboard/layouts/AssetProjectSession.tsx
@@ -1,6 +1,5 @@
 /** @file Displays information describing a specific version of an asset. */
-import type Backend from 'enso-common/src/services/Backend'
-import type { ProjectAsset, ProjectSession } from 'enso-common/src/services/Backend'
+import type { Backend, ProjectAsset, ProjectSession } from 'enso-common/src/services/Backend'
 import { formatDateTime } from 'enso-common/src/utilities/data/dateTime'
 
 import LogsIcon from '#/assets/logs.svg'
diff --git a/app/gui/src/dashboard/layouts/AssetProjectSessions.tsx b/app/gui/src/dashboard/layouts/AssetProjectSessions.tsx
index 7859d4c44dc6..0c861ca99030 100644
--- a/app/gui/src/dashboard/layouts/AssetProjectSessions.tsx
+++ b/app/gui/src/dashboard/layouts/AssetProjectSessions.tsx
@@ -1,8 +1,12 @@
 /** @file A list of previous versions of an asset. */
 import { useSuspenseQuery } from '@tanstack/react-query'
 
-import type Backend from 'enso-common/src/services/Backend'
-import { AssetType, BackendType, type ProjectAsset } from 'enso-common/src/services/Backend'
+import {
+  AssetType,
+  BackendType,
+  type Backend,
+  type ProjectAsset,
+} from 'enso-common/src/services/Backend'
 
 import { Result } from '#/components/Result'
 import AssetProjectSession from '#/layouts/AssetProjectSession'
diff --git a/app/gui/src/dashboard/layouts/AssetProperties.tsx b/app/gui/src/dashboard/layouts/AssetProperties.tsx
index 91339f92bec7..f9e70757aa7f 100644
--- a/app/gui/src/dashboard/layouts/AssetProperties.tsx
+++ b/app/gui/src/dashboard/layouts/AssetProperties.tsx
@@ -3,12 +3,12 @@ import * as React from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
-import type Backend from 'enso-common/src/services/Backend'
 import {
   AssetType,
   BackendType,
   Plan,
   type AnyAsset,
+  type Backend,
   type DatalinkId,
 } from 'enso-common/src/services/Backend'
 import { normalizePath } from 'enso-common/src/utilities/data/fileInfo'
diff --git a/app/gui/src/dashboard/layouts/AssetVersions/AssetVersion.tsx b/app/gui/src/dashboard/layouts/AssetVersions/AssetVersion.tsx
index 6653c10c82b3..f5f8cbfe21cb 100644
--- a/app/gui/src/dashboard/layouts/AssetVersions/AssetVersion.tsx
+++ b/app/gui/src/dashboard/layouts/AssetVersions/AssetVersion.tsx
@@ -1,6 +1,10 @@
 /** @file Displays information describing a specific version of an asset. */
-import type Backend from 'enso-common/src/services/Backend'
-import { AssetType, type AnyAsset, type S3ObjectVersion } from 'enso-common/src/services/Backend'
+import {
+  AssetType,
+  type AnyAsset,
+  type Backend,
+  type S3ObjectVersion,
+} from 'enso-common/src/services/Backend'
 import { formatDateTime } from 'enso-common/src/utilities/data/dateTime'
 
 import CompareIcon from '#/assets/compare.svg'
diff --git a/app/gui/src/dashboard/layouts/AssetVersions/AssetVersions.tsx b/app/gui/src/dashboard/layouts/AssetVersions/AssetVersions.tsx
index 27d9dffd6b8a..f1c99d15bd9a 100644
--- a/app/gui/src/dashboard/layouts/AssetVersions/AssetVersions.tsx
+++ b/app/gui/src/dashboard/layouts/AssetVersions/AssetVersions.tsx
@@ -1,14 +1,14 @@
 /** @file A list of previous versions of an asset. */
-import * as React from 'react'
+import { useState } from 'react'
 
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
 
-import type Backend from 'enso-common/src/services/Backend'
 import {
   AssetType,
   BackendType,
   S3ObjectVersionId,
   type AnyAsset,
+  type Backend,
   type S3ObjectVersion,
 } from 'enso-common/src/services/Backend'
 import { toRfc3339 } from 'enso-common/src/utilities/data/dateTime'
@@ -73,9 +73,7 @@ function AssetVersionsInternal(props: AssetVersionsInternalProps) {
   const { getText } = useText()
   const toastAndLog = useToastAndLog()
 
-  const [placeholderVersions, setPlaceholderVersions] = React.useState<readonly S3ObjectVersion[]>(
-    [],
-  )
+  const [placeholderVersions, setPlaceholderVersions] = useState<readonly S3ObjectVersion[]>([])
 
   const versionsQuery = useSuspenseQuery(assetVersionsQueryOptions({ assetId: item.id, backend }))
 
diff --git a/app/gui/src/dashboard/layouts/AssetVersions/useAssetVersions.ts b/app/gui/src/dashboard/layouts/AssetVersions/useAssetVersions.ts
index b8ebf467ad6a..a4c2b85734a7 100644
--- a/app/gui/src/dashboard/layouts/AssetVersions/useAssetVersions.ts
+++ b/app/gui/src/dashboard/layouts/AssetVersions/useAssetVersions.ts
@@ -1,8 +1,7 @@
 /** @file Fetches the versions of the selected project asset. */
 import { queryOptions, useQuery } from '@tanstack/react-query'
 
-import type Backend from 'enso-common/src/services/Backend'
-import type { AssetId } from 'enso-common/src/services/Backend'
+import type { AssetId, Backend } from 'enso-common/src/services/Backend'
 
 /** Options for {@link useAssetVersions}. */
 export interface AssetVersionsQueryOptions {
diff --git a/app/gui/src/dashboard/layouts/AssetsTable.tsx b/app/gui/src/dashboard/layouts/AssetsTable.tsx
index 8fb5e5519e22..a519b8ec02c7 100644
--- a/app/gui/src/dashboard/layouts/AssetsTable.tsx
+++ b/app/gui/src/dashboard/layouts/AssetsTable.tsx
@@ -21,7 +21,6 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'react-toastify'
 import * as z from 'zod'
 
-import type Backend from 'enso-common/src/services/Backend'
 import {
   assetIsProject,
   AssetType,
@@ -32,6 +31,7 @@ import {
   ProjectState,
   type AnyAsset,
   type AssetId,
+  type Backend,
   type DirectoryAsset,
   type DirectoryId,
   type LabelName,
diff --git a/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx b/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx
index f8d2b7f80738..c127d7e12d87 100644
--- a/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx
+++ b/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx
@@ -6,8 +6,13 @@ import type { MouseEvent, MutableRefObject } from 'react'
 
 import { useStore } from 'zustand'
 
-import type Backend from 'enso-common/src/services/Backend'
-import { AssetType, Plan, type AssetId, type DirectoryId } from 'enso-common/src/services/Backend'
+import {
+  AssetType,
+  Plan,
+  type AssetId,
+  type Backend,
+  type DirectoryId,
+} from 'enso-common/src/services/Backend'
 
 import ContextMenu from '#/components/ContextMenu'
 import ContextMenuEntry from '#/components/ContextMenuEntry'
diff --git a/app/gui/src/dashboard/layouts/Settings/ActivityLogSettingsSection.tsx b/app/gui/src/dashboard/layouts/Settings/ActivityLogSettingsSection.tsx
index 192e064496d5..4f1c7eff0325 100644
--- a/app/gui/src/dashboard/layouts/Settings/ActivityLogSettingsSection.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/ActivityLogSettingsSection.tsx
@@ -17,8 +17,7 @@ import { useBackendQuery } from '#/hooks/backendHooks'
 import { useText } from '#/providers/TextProvider'
 import { nextSortDirection, SortDirection, type SortInfo } from '#/utilities/sorting'
 import { twMerge } from '#/utilities/tailwindMerge'
-import type Backend from 'enso-common/src/services/Backend'
-import { EVENT_TYPES, EventType, type Event } from 'enso-common/src/services/Backend'
+import { EVENT_TYPES, EventType, type Backend, type Event } from 'enso-common/src/services/Backend'
 import { formatDateTime } from 'enso-common/src/utilities/data/dateTime'
 
 const EVENT_TYPE_ICON: Record<EventType, string> = {
diff --git a/app/gui/src/dashboard/layouts/Settings/MembersTable.tsx b/app/gui/src/dashboard/layouts/Settings/MembersTable.tsx
index c698f4f64bf3..43d71a6a4a40 100644
--- a/app/gui/src/dashboard/layouts/Settings/MembersTable.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/MembersTable.tsx
@@ -1,8 +1,7 @@
 /** @file A list of members in the organization. */
 import { useEffect, useMemo, useRef, useState } from 'react'
 
-import type Backend from 'enso-common/src/services/Backend'
-import { UserId, type User } from 'enso-common/src/services/Backend'
+import { UserId, type Backend, type User } from 'enso-common/src/services/Backend'
 
 import {
   Column,
diff --git a/app/gui/src/dashboard/layouts/Settings/OrganizationProfilePictureInput.tsx b/app/gui/src/dashboard/layouts/Settings/OrganizationProfilePictureInput.tsx
index 89fc4b7bf455..2d3a48f855b5 100644
--- a/app/gui/src/dashboard/layouts/Settings/OrganizationProfilePictureInput.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/OrganizationProfilePictureInput.tsx
@@ -1,7 +1,7 @@
 /** @file The input for viewing and changing the organization's profile picture. */
 import type { ChangeEvent } from 'react'
 
-import type Backend from 'enso-common/src/services/Backend'
+import type { Backend } from 'enso-common/src/services/Backend'
 
 import { useMutation } from '@tanstack/react-query'
 
diff --git a/app/gui/src/dashboard/layouts/Settings/ProfilePictureInput.tsx b/app/gui/src/dashboard/layouts/Settings/ProfilePictureInput.tsx
index f928a8a32bd4..ab2c09d6c1c8 100644
--- a/app/gui/src/dashboard/layouts/Settings/ProfilePictureInput.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/ProfilePictureInput.tsx
@@ -1,10 +1,10 @@
 /** @file The input for viewing and changing the user's profile picture. */
-import { ChangeEvent } from 'react'
-
-import type Backend from 'enso-common/src/services/Backend'
+import type { ChangeEvent } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
+import type { Backend } from 'enso-common/src/services/Backend'
+
 import DefaultUserIcon from '#/assets/default_user.svg'
 import { Input, Label, Text } from '#/components/aria'
 import FocusRing from '#/components/styled/FocusRing'
diff --git a/app/gui/src/dashboard/layouts/Settings/UserGroupsSettingsSection.tsx b/app/gui/src/dashboard/layouts/Settings/UserGroupsSettingsSection.tsx
index cc02269875d8..ebb971c8b010 100644
--- a/app/gui/src/dashboard/layouts/Settings/UserGroupsSettingsSection.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/UserGroupsSettingsSection.tsx
@@ -3,10 +3,10 @@ import { useMemo, useRef } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
-import type Backend from 'enso-common/src/services/Backend'
 import {
   isPlaceholderUserGroupId,
   isUserGroupId,
+  type Backend,
   type User,
   type UserGroupInfo,
 } from 'enso-common/src/services/Backend'
diff --git a/app/gui/src/dashboard/layouts/Settings/data.tsx b/app/gui/src/dashboard/layouts/Settings/data.tsx
index 0728ea3d846f..bc40535ed622 100644
--- a/app/gui/src/dashboard/layouts/Settings/data.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/data.tsx
@@ -4,11 +4,11 @@ import type { HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactNode
 import type { QueryClient } from '@tanstack/react-query'
 import * as z from 'zod'
 
-import type Backend from 'enso-common/src/services/Backend'
 import {
   EmailAddress,
   HttpsUrl,
   isUserOnPlanWithOrganization,
+  type Backend,
   type OrganizationInfo,
   type User,
 } from 'enso-common/src/services/Backend'
diff --git a/app/gui/src/dashboard/layouts/Settings/index.tsx b/app/gui/src/dashboard/layouts/Settings/index.tsx
index 02801b231851..6838afc152b3 100644
--- a/app/gui/src/dashboard/layouts/Settings/index.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
-import type Backend from 'enso-common/src/services/Backend'
+import type { Backend } from 'enso-common/src/services/Backend'
 import { includesPredicate } from 'enso-common/src/utilities/data/array'
 import { regexEscape } from 'enso-common/src/utilities/data/string'
 
diff --git a/app/gui/src/dashboard/modals/ManageLabelsModal.tsx b/app/gui/src/dashboard/modals/ManageLabelsModal.tsx
index 2d351c437d3a..e569381bb138 100644
--- a/app/gui/src/dashboard/modals/ManageLabelsModal.tsx
+++ b/app/gui/src/dashboard/modals/ManageLabelsModal.tsx
@@ -3,11 +3,11 @@ import { useEffect, useMemo, useState } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
-import type Backend from 'enso-common/src/services/Backend'
 import {
   findLeastUsedColor,
   LabelName,
   type AnyAsset,
+  type Backend,
   type LChColor,
 } from 'enso-common/src/services/Backend'
 import { regexEscape } from 'enso-common/src/utilities/data/string'
diff --git a/app/gui/src/dashboard/modals/ManagePermissionsModal.tsx b/app/gui/src/dashboard/modals/ManagePermissionsModal.tsx
index 4a8e20fb3203..a98711e47ca1 100644
--- a/app/gui/src/dashboard/modals/ManagePermissionsModal.tsx
+++ b/app/gui/src/dashboard/modals/ManagePermissionsModal.tsx
@@ -5,7 +5,6 @@ import { useMutation, useQuery } from '@tanstack/react-query'
 import { toast } from 'react-toastify'
 import isEmail from 'validator/es/lib/isEmail'
 
-import type Backend from 'enso-common/src/services/Backend'
 import {
   compareAssetPermissions,
   EmailAddress,
@@ -15,6 +14,7 @@ import {
   isUserPermission,
   type AnyAsset,
   type AssetPermission,
+  type Backend,
   type UserGroupInfo,
   type UserInfo,
   type UserPermissionIdentifier,
diff --git a/app/gui/src/dashboard/modals/NewLabelModal.tsx b/app/gui/src/dashboard/modals/NewLabelModal.tsx
index 4c25bd821eba..1e623eea8442 100644
--- a/app/gui/src/dashboard/modals/NewLabelModal.tsx
+++ b/app/gui/src/dashboard/modals/NewLabelModal.tsx
@@ -4,8 +4,8 @@ import * as React from 'react'
 import { useMutation } from '@tanstack/react-query'
 import * as z from 'zod'
 
-import type Backend from 'enso-common/src/services/Backend'
-import { findLeastUsedColor } from 'enso-common/src/services/Backend'
+import { findLeastUsedColor, type Backend } from 'enso-common/src/services/Backend'
+import { EMPTY_ARRAY } from 'enso-common/src/utilities/data/array'
 
 import { ButtonGroup, DialogDismiss, Form, Input, Popover, Text } from '#/components/AriaComponents'
 import ColorPicker from '#/components/ColorPicker'
@@ -13,7 +13,6 @@ import FocusArea from '#/components/styled/FocusArea'
 import { backendMutationOptions, useBackendQuery } from '#/hooks/backendHooks'
 import { useSyncRef } from '#/hooks/syncRefHooks'
 import { useText } from '#/providers/TextProvider'
-import { EMPTY_ARRAY } from 'enso-common/src/utilities/data/array'
 
 /** Props for a {@link NewLabelModal}. */
 export interface NewLabelModalProps {
diff --git a/app/gui/src/dashboard/modals/NewUserGroupModal.tsx b/app/gui/src/dashboard/modals/NewUserGroupModal.tsx
index 077a053b7cab..20a2a5755348 100644
--- a/app/gui/src/dashboard/modals/NewUserGroupModal.tsx
+++ b/app/gui/src/dashboard/modals/NewUserGroupModal.tsx
@@ -3,7 +3,7 @@ import { useMemo, useState, type MouseEvent } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
-import type Backend from 'enso-common/src/services/Backend'
+import { type Backend } from 'enso-common/src/services/Backend'
 import { normalizeName } from 'enso-common/src/utilities/data/string'
 
 import { FieldError, Heading, Input, Label, TextField } from '#/components/aria'
diff --git a/app/gui/src/dashboard/modals/ProjectLogsModal.tsx b/app/gui/src/dashboard/modals/ProjectLogsModal.tsx
index 6fb3de43cbd4..0228c0b74307 100644
--- a/app/gui/src/dashboard/modals/ProjectLogsModal.tsx
+++ b/app/gui/src/dashboard/modals/ProjectLogsModal.tsx
@@ -1,8 +1,7 @@
 /** @file A modal for showing logs for a project. */
 import { useSuspenseQuery } from '@tanstack/react-query'
 
-import type Backend from 'enso-common/src/services/Backend'
-import type { ProjectSessionId } from 'enso-common/src/services/Backend'
+import type { Backend, ProjectSessionId } from 'enso-common/src/services/Backend'
 
 import ReloadIcon from '#/assets/reload.svg'
 import { Button, Dialog } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/services/LocalBackend.ts b/app/gui/src/dashboard/services/LocalBackend.ts
index 0541e76cf7db..f354db2de44e 100644
--- a/app/gui/src/dashboard/services/LocalBackend.ts
+++ b/app/gui/src/dashboard/services/LocalBackend.ts
@@ -7,9 +7,10 @@
  */
 import invariant from 'tiny-invariant'
 
-import Backend, {
+import {
   Address,
   AssetType,
+  Backend,
   BackendType,
   DirectoryDoesNotExistError,
   DirectoryId,
diff --git a/app/gui/src/dashboard/services/RemoteBackend.ts b/app/gui/src/dashboard/services/RemoteBackend.ts
index 52941419d5a9..7829b788bd40 100644
--- a/app/gui/src/dashboard/services/RemoteBackend.ts
+++ b/app/gui/src/dashboard/services/RemoteBackend.ts
@@ -6,8 +6,9 @@
  * the response from the API.
  */
 import { IS_DEV_MODE } from 'enso-common/src/detect'
-import Backend, {
+import {
   Address,
+  Backend,
   BackendType,
   DirectoryId,
   NetworkError,
@@ -255,7 +256,7 @@ export default class RemoteBackend extends Backend {
    */
   async throw<K extends Extract<TextId, `${string}BackendError`>>(
     response: Response | null,
-    textId: NetworkError | K,
+    textId: K | NetworkError,
     ...replacements: Replacements[K]
   ): Promise<never> {
     if (textId instanceof NetworkError) {

From ec73a5229a7114b348d4c27db11aa6ac0ed20d32 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Fri, 13 Dec 2024 23:58:24 +1000
Subject: [PATCH 03/15] Move more dashboard utility files to common package

---
 app/common/package.json                       |  6 +-
 .../src/utilities/data/__tests__/set.test.ts  | 15 ++++
 .../src/utilities/data}/nullable.ts           |  0
 .../src/utilities/data}/set.ts                |  4 -
 .../src}/utilities/equalities.ts              | 20 ++---
 .../src}/utilities/input.ts                   |  1 -
 .../components/dashboard/AssetRow.tsx         | 28 +++----
 .../dashboard/AssetRow/assetRowUtils.tsx      |  6 +-
 .../dashboard/layouts/AssetContextMenu.tsx    |  2 +-
 .../src/dashboard/layouts/AssetProperties.tsx |  2 +-
 app/gui/src/dashboard/layouts/AssetsTable.tsx |  2 +-
 .../layouts/AssetsTableContextMenu.tsx        |  2 +-
 app/gui/src/dashboard/layouts/DriveBar.tsx    |  2 +-
 .../dashboard/layouts/GlobalContextMenu.tsx   |  2 +-
 .../src/dashboard/providers/DriveProvider.tsx | 75 +++++++++----------
 .../utilities/__tests__/AssetQuery.test.ts    | 44 +++++------
 .../utilities/__tests__/jsonSchema.test.ts    |  8 --
 .../dashboard/utilities/__tests__/set.test.ts | 19 -----
 .../utilities/__tests__/shortcuts.test.ts     |  4 -
 .../utilities/__tests__/validation.test.ts    | 42 +++++------
 app/gui/src/dashboard/utilities/drag.ts       | 16 ----
 21 files changed, 123 insertions(+), 177 deletions(-)
 create mode 100644 app/common/src/utilities/data/__tests__/set.test.ts
 rename app/{gui/src/dashboard/utilities => common/src/utilities/data}/nullable.ts (100%)
 rename app/{gui/src/dashboard/utilities => common/src/utilities/data}/set.ts (93%)
 rename app/{gui/src/dashboard => common/src}/utilities/equalities.ts (79%)
 rename app/{gui/src/dashboard => common/src}/utilities/input.ts (87%)
 delete mode 100644 app/gui/src/dashboard/utilities/__tests__/set.test.ts

diff --git a/app/common/package.json b/app/common/package.json
index 5cbc28aa45d9..24f2e889e1f7 100644
--- a/app/common/package.json
+++ b/app/common/package.json
@@ -19,15 +19,19 @@
     "./src/utilities/data/dateTime": "./src/utilities/data/dateTime.ts",
     "./src/utilities/data/email": "./src/utilities/data/email.ts",
     "./src/utilities/data/fileInfo": "./src/utilities/data/fileInfo.ts",
+    "./src/utilities/data/iter": "./src/utilities/data/iter.ts",
     "./src/utilities/data/newtype": "./src/utilities/data/newtype.ts",
+    "./src/utilities/data/nullable": "./src/utilities/data/nullable.ts",
     "./src/utilities/data/object": "./src/utilities/data/object.ts",
     "./src/utilities/data/path": "./src/utilities/data/path.ts",
+    "./src/utilities/data/set": "./src/utilities/data/set.ts",
     "./src/utilities/data/string": "./src/utilities/data/string.ts",
-    "./src/utilities/data/iter": "./src/utilities/data/iter.ts",
     "./src/utilities/download": "./src/utilities/download.ts",
+    "./src/utilities/equalities": "./src/utilities/equalities.ts",
     "./src/utilities/error": "./src/utilities/error.ts",
     "./src/utilities/functions": "./src/utilities/functions.ts",
     "./src/utilities/github": "./src/utilities/github.ts",
+    "./src/utilities/input": "./src/utilities/input.ts",
     "./src/utilities/permissions": "./src/utilities/permissions.ts",
     "./src/utilities/style/tabBar": "./src/utilities/style/tabBar.ts",
     "./src/utilities/uniqueString": "./src/utilities/uniqueString.ts",
diff --git a/app/common/src/utilities/data/__tests__/set.test.ts b/app/common/src/utilities/data/__tests__/set.test.ts
new file mode 100644
index 000000000000..7d874a6dfbf7
--- /dev/null
+++ b/app/common/src/utilities/data/__tests__/set.test.ts
@@ -0,0 +1,15 @@
+/** @file Tests for `set.ts`. */
+import * as fc from '@fast-check/vitest'
+import { expect } from 'vitest'
+
+import { setPresence, withPresence } from '../set'
+
+fc.test.prop({
+  set: fc.fc.array(fc.fc.anything(), { minLength: 1 }).map(array => new Set(array)),
+  item: fc.fc.anything(),
+})('Manipulating `Set` presence', ({ set, item }) => {
+  expect(withPresence(set, item, true).has(item)).toBe(true)
+  expect(withPresence(set, item, false).has(item)).toBe(false)
+  expect(setPresence(set, item, true).has(item)).toBe(true)
+  expect(setPresence(set, item, false).has(item)).toBe(false)
+})
diff --git a/app/gui/src/dashboard/utilities/nullable.ts b/app/common/src/utilities/data/nullable.ts
similarity index 100%
rename from app/gui/src/dashboard/utilities/nullable.ts
rename to app/common/src/utilities/data/nullable.ts
diff --git a/app/gui/src/dashboard/utilities/set.ts b/app/common/src/utilities/data/set.ts
similarity index 93%
rename from app/gui/src/dashboard/utilities/set.ts
rename to app/common/src/utilities/data/set.ts
index 657d38f7b331..172bfa38aa70 100644
--- a/app/gui/src/dashboard/utilities/set.ts
+++ b/app/common/src/utilities/data/set.ts
@@ -3,10 +3,6 @@
  * related to {@link Set}s.
  */
 
-// =================
-// === Constants ===
-// =================
-
 export const EMPTY_SET: ReadonlySet<never> = new Set<never>()
 
 /**
diff --git a/app/gui/src/dashboard/utilities/equalities.ts b/app/common/src/utilities/equalities.ts
similarity index 79%
rename from app/gui/src/dashboard/utilities/equalities.ts
rename to app/common/src/utilities/equalities.ts
index ef34b7fcff61..0a29c4c1e9d3 100644
--- a/app/gui/src/dashboard/utilities/equalities.ts
+++ b/app/common/src/utilities/equalities.ts
@@ -1,26 +1,16 @@
-/**
- * @file
- *
- * This file contains functions for checking equality between values.
- */
-
-/**
- * Strict equality check.
- */
+/** @file Functions for checking equality between values. */
+
+/** Strict equality check. */
 export function refEquality<T>(a: T, b: T) {
   return a === b
 }
 
-/**
- * Object.is equality check.
- */
+/** `Object.is` equality check. */
 export function objectEquality<T>(a: T, b: T) {
   return Object.is(a, b)
 }
 
-/**
- * Shallow equality check.
- */
+/** Shallow equality check. */
 export function shallowEquality<T>(a: T, b: T) {
   if (Object.is(a, b)) {
     return true
diff --git a/app/gui/src/dashboard/utilities/input.ts b/app/common/src/utilities/input.ts
similarity index 87%
rename from app/gui/src/dashboard/utilities/input.ts
rename to app/common/src/utilities/input.ts
index ba9fab2fd884..aeb53ce6f289 100644
--- a/app/gui/src/dashboard/utilities/input.ts
+++ b/app/common/src/utilities/input.ts
@@ -8,7 +8,6 @@ export function inputFiles() {
     input.style.display = 'none'
     document.body.appendChild(input)
     input.addEventListener('input', () => {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       resolve(input.files!)
     })
     input.addEventListener('cancel', () => {
diff --git a/app/gui/src/dashboard/components/dashboard/AssetRow.tsx b/app/gui/src/dashboard/components/dashboard/AssetRow.tsx
index cdd7f54e231c..7f847d53cb87 100644
--- a/app/gui/src/dashboard/components/dashboard/AssetRow.tsx
+++ b/app/gui/src/dashboard/components/dashboard/AssetRow.tsx
@@ -26,6 +26,7 @@ import {
   type RealAssetId,
 } from 'enso-common/src/services/Backend'
 import { merge } from 'enso-common/src/utilities/data/object'
+import { EMPTY_SET, withPresence } from 'enso-common/src/utilities/data/set'
 import { download } from 'enso-common/src/utilities/download'
 
 import BlankIcon from '#/assets/blank.svg'
@@ -74,7 +75,6 @@ import * as drag from '#/utilities/drag'
 import * as eventModule from '#/utilities/event'
 import * as indent from '#/utilities/indent'
 import * as permissions from '#/utilities/permissions'
-import * as set from '#/utilities/set'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
 import Visibility from '#/utilities/Visibility'
 
@@ -372,7 +372,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
 
   const setSelected = useEventCallback((newSelected: boolean) => {
     const { selectedKeys } = driveStore.getState()
-    setSelectedKeys(set.withPresence(selectedKeys, id, newSelected))
+    setSelectedKeys(withPresence(selectedKeys, id, newSelected))
   })
 
   useEffect(() => {
@@ -398,9 +398,9 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
   const clearDragState = useCallback(() => {
     setIsDraggedOver(false)
     setRowState((oldRowState) =>
-      oldRowState.temporarilyAddedLabels === set.EMPTY_SET ?
+      oldRowState.temporarilyAddedLabels === EMPTY_SET ?
         oldRowState
-      : merge(oldRowState, { temporarilyAddedLabels: set.EMPTY_SET }),
+      : merge(oldRowState, { temporarilyAddedLabels: EMPTY_SET }),
     )
   }, [])
 
@@ -581,30 +581,30 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
         break
       }
       case AssetEventType.temporarilyAddLabels: {
-        const labels = event.ids.has(id) ? event.labelNames : set.EMPTY_SET
+        const labels = event.ids.has(id) ? event.labelNames : EMPTY_SET
         setRowState((oldRowState) =>
           (
             oldRowState.temporarilyAddedLabels === labels &&
-            oldRowState.temporarilyRemovedLabels === set.EMPTY_SET
+            oldRowState.temporarilyRemovedLabels === EMPTY_SET
           ) ?
             oldRowState
           : merge(oldRowState, {
               temporarilyAddedLabels: labels,
-              temporarilyRemovedLabels: set.EMPTY_SET,
+              temporarilyRemovedLabels: EMPTY_SET,
             }),
         )
         break
       }
       case AssetEventType.temporarilyRemoveLabels: {
-        const labels = event.ids.has(id) ? event.labelNames : set.EMPTY_SET
+        const labels = event.ids.has(id) ? event.labelNames : EMPTY_SET
         setRowState((oldRowState) =>
           (
-            oldRowState.temporarilyAddedLabels === set.EMPTY_SET &&
+            oldRowState.temporarilyAddedLabels === EMPTY_SET &&
             oldRowState.temporarilyRemovedLabels === labels
           ) ?
             oldRowState
           : merge(oldRowState, {
-              temporarilyAddedLabels: set.EMPTY_SET,
+              temporarilyAddedLabels: EMPTY_SET,
               temporarilyRemovedLabels: labels,
             }),
         )
@@ -612,9 +612,9 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
       }
       case AssetEventType.addLabels: {
         setRowState((oldRowState) =>
-          oldRowState.temporarilyAddedLabels === set.EMPTY_SET ?
+          oldRowState.temporarilyAddedLabels === EMPTY_SET ?
             oldRowState
-          : merge(oldRowState, { temporarilyAddedLabels: set.EMPTY_SET }),
+          : merge(oldRowState, { temporarilyAddedLabels: EMPTY_SET }),
         )
         const labels = asset.labels
         if (
@@ -635,9 +635,9 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
       }
       case AssetEventType.removeLabels: {
         setRowState((oldRowState) =>
-          oldRowState.temporarilyAddedLabels === set.EMPTY_SET ?
+          oldRowState.temporarilyAddedLabels === EMPTY_SET ?
             oldRowState
-          : merge(oldRowState, { temporarilyAddedLabels: set.EMPTY_SET }),
+          : merge(oldRowState, { temporarilyAddedLabels: EMPTY_SET }),
         )
         const labels = asset.labels
         if (
diff --git a/app/gui/src/dashboard/components/dashboard/AssetRow/assetRowUtils.tsx b/app/gui/src/dashboard/components/dashboard/AssetRow/assetRowUtils.tsx
index 1c2105dc2ccb..c9908725ebc2 100644
--- a/app/gui/src/dashboard/components/dashboard/AssetRow/assetRowUtils.tsx
+++ b/app/gui/src/dashboard/components/dashboard/AssetRow/assetRowUtils.tsx
@@ -1,7 +1,7 @@
 /** @file Utilities related to `AssetRow`s. */
 import type * as assetsTable from '#/layouts/AssetsTable'
 
-import * as set from '#/utilities/set'
+import { EMPTY_SET } from 'enso-common/src/utilities/data/set'
 
 /** The default {@link assetsTable.AssetRowState} associated with an `AssetRow`. */
 export const INITIAL_ROW_STATE: assetsTable.AssetRowState = Object.freeze({
@@ -9,6 +9,6 @@ export const INITIAL_ROW_STATE: assetsTable.AssetRowState = Object.freeze({
     // Ignored. This MUST be replaced by the row component. It should also update `visibility`.
   },
   isEditingName: false,
-  temporarilyAddedLabels: set.EMPTY_SET,
-  temporarilyRemovedLabels: set.EMPTY_SET,
+  temporarilyAddedLabels: EMPTY_SET,
+  temporarilyRemovedLabels: EMPTY_SET,
 })
diff --git a/app/gui/src/dashboard/layouts/AssetContextMenu.tsx b/app/gui/src/dashboard/layouts/AssetContextMenu.tsx
index 91e8634607d4..5d1410537723 100644
--- a/app/gui/src/dashboard/layouts/AssetContextMenu.tsx
+++ b/app/gui/src/dashboard/layouts/AssetContextMenu.tsx
@@ -14,6 +14,7 @@ import {
   type ProjectId,
 } from 'enso-common/src/services/Backend'
 import { normalizePath } from 'enso-common/src/utilities/data/fileInfo'
+import { mapNonNullish } from 'enso-common/src/utilities/data/nullable'
 import { merger } from 'enso-common/src/utilities/data/object'
 
 import ContextMenu from '#/components/ContextMenu'
@@ -47,7 +48,6 @@ import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
 import { extractTypeAndId } from '#/services/LocalBackend'
 import { TEAMS_DIRECTORY_ID, USERS_DIRECTORY_ID } from '#/services/remoteBackendPaths'
-import { mapNonNullish } from '#/utilities/nullable'
 import {
   canPermissionModifyDirectoryContents,
   isTeamPath,
diff --git a/app/gui/src/dashboard/layouts/AssetProperties.tsx b/app/gui/src/dashboard/layouts/AssetProperties.tsx
index f9e70757aa7f..4a6e057f9279 100644
--- a/app/gui/src/dashboard/layouts/AssetProperties.tsx
+++ b/app/gui/src/dashboard/layouts/AssetProperties.tsx
@@ -12,6 +12,7 @@ import {
   type DatalinkId,
 } from 'enso-common/src/services/Backend'
 import { normalizePath } from 'enso-common/src/utilities/data/fileInfo'
+import { mapNonNullish } from 'enso-common/src/utilities/data/nullable'
 
 import PenIcon from '#/assets/pen.svg'
 import { Heading } from '#/components/aria'
@@ -41,7 +42,6 @@ import { useLocalBackend } from '#/providers/BackendProvider'
 import { useFeatureFlags } from '#/providers/FeatureFlagsProvider'
 import { useText } from '#/providers/TextProvider'
 import { extractTypeAndId } from '#/services/LocalBackend'
-import { mapNonNullish } from '#/utilities/nullable'
 import { PermissionAction, tryFindSelfPermission } from '#/utilities/permissions'
 import { tv } from '#/utilities/tailwindVariants'
 import { useStore } from '#/utilities/zustand'
diff --git a/app/gui/src/dashboard/layouts/AssetsTable.tsx b/app/gui/src/dashboard/layouts/AssetsTable.tsx
index a519b8ec02c7..b5562b07422c 100644
--- a/app/gui/src/dashboard/layouts/AssetsTable.tsx
+++ b/app/gui/src/dashboard/layouts/AssetsTable.tsx
@@ -39,6 +39,7 @@ import {
 } from 'enso-common/src/services/Backend'
 import { toRfc3339 } from 'enso-common/src/utilities/data/dateTime'
 import { fileExtension } from 'enso-common/src/utilities/data/fileInfo'
+import { EMPTY_SET, setPresence, withPresence } from 'enso-common/src/utilities/data/set'
 import { noop } from 'enso-common/src/utilities/functions'
 import { uniqueString } from 'enso-common/src/utilities/uniqueString'
 
@@ -137,7 +138,6 @@ import {
   tryFindSelfPermission,
 } from '#/utilities/permissions'
 import { document } from '#/utilities/sanitizedEventTargets'
-import { EMPTY_SET, setPresence, withPresence } from '#/utilities/set'
 import type { SortInfo } from '#/utilities/sorting'
 import { twJoin, twMerge } from '#/utilities/tailwindMerge'
 import Visibility from '#/utilities/Visibility'
diff --git a/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx b/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx
index c127d7e12d87..13cedeaff0d8 100644
--- a/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx
+++ b/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx
@@ -13,6 +13,7 @@ import {
   type Backend,
   type DirectoryId,
 } from 'enso-common/src/services/Backend'
+import { EMPTY_SET } from 'enso-common/src/utilities/data/set'
 
 import ContextMenu from '#/components/ContextMenu'
 import ContextMenuEntry from '#/components/ContextMenuEntry'
@@ -32,7 +33,6 @@ import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
 import type { AnyAssetTreeNode } from '#/utilities/AssetTreeNode'
 import { PermissionAction, tryFindSelfPermission } from '#/utilities/permissions'
-import { EMPTY_SET } from '#/utilities/set'
 
 /** Props for an {@link AssetsTableContextMenu}. */
 export interface AssetsTableContextMenuProps {
diff --git a/app/gui/src/dashboard/layouts/DriveBar.tsx b/app/gui/src/dashboard/layouts/DriveBar.tsx
index 9d7d33810405..2f6b9ef7f2bd 100644
--- a/app/gui/src/dashboard/layouts/DriveBar.tsx
+++ b/app/gui/src/dashboard/layouts/DriveBar.tsx
@@ -7,6 +7,7 @@ import { useEffect, useRef, type Dispatch, type SetStateAction } from 'react'
 import { useMutation } from '@tanstack/react-query'
 
 import type { Backend } from 'enso-common/src/services/Backend'
+import { inputFiles } from 'enso-common/src/utilities/input'
 
 import AddDatalinkIcon from '#/assets/add_datalink.svg'
 import AddFolderIcon from '#/assets/add_folder.svg'
@@ -54,7 +55,6 @@ import { useInputBindings } from '#/providers/InputBindingsProvider'
 import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
 import type AssetQuery from '#/utilities/AssetQuery'
-import { inputFiles } from '#/utilities/input'
 import { document } from '#/utilities/sanitizedEventTargets'
 import { AssetPanelToggle } from './AssetPanel'
 
diff --git a/app/gui/src/dashboard/layouts/GlobalContextMenu.tsx b/app/gui/src/dashboard/layouts/GlobalContextMenu.tsx
index cd8ef81eb22f..0b2e06d40bee 100644
--- a/app/gui/src/dashboard/layouts/GlobalContextMenu.tsx
+++ b/app/gui/src/dashboard/layouts/GlobalContextMenu.tsx
@@ -2,6 +2,7 @@
 import { useStore } from 'zustand'
 
 import { BackendType, type Backend, type DirectoryId } from 'enso-common/src/services/Backend'
+import { inputFiles } from 'enso-common/src/utilities/input'
 
 import ContextMenu from '#/components/ContextMenu'
 import ContextMenuEntry from '#/components/ContextMenuEntry'
@@ -19,7 +20,6 @@ import UpsertSecretModal from '#/modals/UpsertSecretModal'
 import { useDriveStore } from '#/providers/DriveProvider'
 import { useSetModal } from '#/providers/ModalProvider'
 import { useText } from '#/providers/TextProvider'
-import { inputFiles } from '#/utilities/input'
 
 /** Props for a {@link GlobalContextMenu}. */
 export interface GlobalContextMenuProps {
diff --git a/app/gui/src/dashboard/providers/DriveProvider.tsx b/app/gui/src/dashboard/providers/DriveProvider.tsx
index e4f55407db1d..a3bdae1229a5 100644
--- a/app/gui/src/dashboard/providers/DriveProvider.tsx
+++ b/app/gui/src/dashboard/providers/DriveProvider.tsx
@@ -1,14 +1,8 @@
 /** @file The React provider (and associated hooks) for Data Catalog state. */
-import * as React from 'react'
+import { createContext, startTransition, useContext, useState, type PropsWithChildren } from 'react'
 
-import * as zustand from '#/utilities/zustand'
 import invariant from 'tiny-invariant'
 
-import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import type { Category } from '#/layouts/CategorySwitcher/Category'
-import type AssetTreeNode from '#/utilities/AssetTreeNode'
-import type { PasteData } from '#/utilities/pasteData'
-import { EMPTY_SET } from '#/utilities/set'
 import type {
   AssetId,
   BackendType,
@@ -16,10 +10,13 @@ import type {
   DirectoryId,
 } from 'enso-common/src/services/Backend'
 import { EMPTY_ARRAY } from 'enso-common/src/utilities/data/array'
+import { EMPTY_SET } from 'enso-common/src/utilities/data/set'
 
-// ==================
-// === DriveStore ===
-// ==================
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import type { Category } from '#/layouts/CategorySwitcher/Category'
+import type AssetTreeNode from '#/utilities/AssetTreeNode'
+import type { PasteData } from '#/utilities/pasteData'
+import { createStore, useStore, type StoreApi } from '#/utilities/zustand'
 
 /** Attached data for a paste payload. */
 export interface DrivePastePayload {
@@ -55,12 +52,12 @@ interface DriveStore {
 // =======================
 
 /** State contained in a `ProjectsContext`. */
-export type ProjectsContextType = zustand.StoreApi<DriveStore>
+export type ProjectsContextType = StoreApi<DriveStore>
 
-const DriveContext = React.createContext<ProjectsContextType | null>(null)
+const DriveContext = createContext<ProjectsContextType | null>(null)
 
 /** Props for a {@link DriveProvider}. */
-export type ProjectsProviderProps = Readonly<React.PropsWithChildren>
+export type ProjectsProviderProps = Readonly<PropsWithChildren>
 
 // ========================
 // === ProjectsProvider ===
@@ -73,8 +70,8 @@ export type ProjectsProviderProps = Readonly<React.PropsWithChildren>
 export default function DriveProvider(props: ProjectsProviderProps) {
   const { children } = props
 
-  const [store] = React.useState(() =>
-    zustand.createStore<DriveStore>((set, get) => ({
+  const [store] = useState(() =>
+    createStore<DriveStore>((set, get) => ({
       category: { type: 'cloud' },
       setCategory: (category) => {
         if (get().category !== category) {
@@ -143,7 +140,7 @@ export default function DriveProvider(props: ProjectsProviderProps) {
 
 /** The drive store. */
 export function useDriveStore() {
-  const store = React.useContext(DriveContext)
+  const store = useContext(DriveContext)
 
   invariant(store, 'Drive store can only be used inside an `DriveProvider`.')
 
@@ -153,91 +150,89 @@ export function useDriveStore() {
 /** The category of the Asset Table. */
 export function useCategory() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.category, { unsafeEnableTransition: true })
+  return useStore(store, (state) => state.category, { unsafeEnableTransition: true })
 }
 
 /** A function to set the category of the Asset Table. */
 export function useSetCategory() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.setCategory, { unsafeEnableTransition: true })
+  return useStore(store, (state) => state.setCategory, { unsafeEnableTransition: true })
 }
 
 /** The target directory of the Asset Table selection. */
 export function useTargetDirectory() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.targetDirectory)
+  return useStore(store, (state) => state.targetDirectory)
 }
 
 /** A function to set the target directory of the Asset Table selection. */
 export function useSetTargetDirectory() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.setTargetDirectory)
+  return useStore(store, (state) => state.setTargetDirectory)
 }
 
 /** The ID of the most newly created folder. */
 export function useNewestFolderId() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.newestFolderId)
+  return useStore(store, (state) => state.newestFolderId)
 }
 
 /** A function to set the ID of the most newly created folder. */
 export function useSetNewestFolderId() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.setNewestFolderId)
+  return useStore(store, (state) => state.setNewestFolderId)
 }
 
 /** Whether assets can be created in the current directory. */
 export function useCanCreateAssets() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.canCreateAssets)
+  return useStore(store, (state) => state.canCreateAssets)
 }
 
 /** A function to set whether assets can be created in the current directory. */
 export function useSetCanCreateAssets() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.setCanCreateAssets)
+  return useStore(store, (state) => state.setCanCreateAssets)
 }
 
 /** Whether the current Asset Table selection is downloadble. */
 export function useCanDownload() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.canDownload)
+  return useStore(store, (state) => state.canDownload)
 }
 
 /** A function to set whether the current Asset Table selection is downloadble. */
 export function useSetCanDownload() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.setCanDownload)
+  return useStore(store, (state) => state.setCanDownload)
 }
 
 /** The paste data for the Asset Table. */
 export function usePasteData() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.pasteData)
+  return useStore(store, (state) => state.pasteData)
 }
 
 /** A function to set the paste data for the Asset Table. */
 export function useSetPasteData() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.setPasteData)
+  return useStore(store, (state) => state.setPasteData)
 }
 
 /** The expanded directories in the Asset Table. */
 export function useExpandedDirectoryIds() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.expandedDirectoryIds)
+  return useStore(store, (state) => state.expandedDirectoryIds)
 }
 
 /** A function to set the expanded directoyIds in the Asset Table. */
 export function useSetExpandedDirectoryIds() {
   const store = useDriveStore()
-  const privateSetExpandedDirectoryIds = zustand.useStore(
-    store,
-    (state) => state.setExpandedDirectoryIds,
-    { unsafeEnableTransition: true },
-  )
+  const privateSetExpandedDirectoryIds = useStore(store, (state) => state.setExpandedDirectoryIds, {
+    unsafeEnableTransition: true,
+  })
   return useEventCallback((expandedDirectoryIds: readonly DirectoryId[]) => {
-    React.startTransition(() => {
+    startTransition(() => {
       privateSetExpandedDirectoryIds(expandedDirectoryIds)
     })
   })
@@ -246,19 +241,19 @@ export function useSetExpandedDirectoryIds() {
 /** The selected keys in the Asset Table. */
 export function useSelectedKeys() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.selectedKeys)
+  return useStore(store, (state) => state.selectedKeys)
 }
 
 /** A function to set the selected keys in the Asset Table. */
 export function useSetSelectedKeys() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.setSelectedKeys)
+  return useStore(store, (state) => state.setSelectedKeys)
 }
 
 /** The visually selected keys in the Asset Table. */
 export function useVisuallySelectedKeys() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.selectedKeys, {
+  return useStore(store, (state) => state.selectedKeys, {
     unsafeEnableTransition: true,
   })
 }
@@ -266,7 +261,7 @@ export function useVisuallySelectedKeys() {
 /** A function to set the visually selected keys in the Asset Table. */
 export function useSetVisuallySelectedKeys() {
   const store = useDriveStore()
-  return zustand.useStore(store, (state) => state.setVisuallySelectedKeys, {
+  return useStore(store, (state) => state.setVisuallySelectedKeys, {
     unsafeEnableTransition: true,
   })
 }
@@ -282,7 +277,7 @@ export function useToggleDirectoryExpansion() {
     const shouldExpand = override ?? !isExpanded
 
     if (shouldExpand !== isExpanded) {
-      React.startTransition(() => {
+      startTransition(() => {
         if (shouldExpand) {
           setExpandedDirectoryIds([...expandedDirectoryIds, directoryId])
         } else {
diff --git a/app/gui/src/dashboard/utilities/__tests__/AssetQuery.test.ts b/app/gui/src/dashboard/utilities/__tests__/AssetQuery.test.ts
index e276f7aa7880..e141244908d9 100644
--- a/app/gui/src/dashboard/utilities/__tests__/AssetQuery.test.ts
+++ b/app/gui/src/dashboard/utilities/__tests__/AssetQuery.test.ts
@@ -1,9 +1,9 @@
 /** @file Tests for {@link AssetQuery}. */
-import * as v from 'vitest'
+import { expect, test } from 'vitest'
 
 import AssetQuery from '#/utilities/AssetQuery'
 
-v.test.each([
+test.each([
   { query: '' },
   { query: 'name:', names: [[]] },
   { query: '-name:', negativeNames: [[]] },
@@ -54,57 +54,57 @@ v.test.each([
     negativeNos,
   }) => {
     const parsed = AssetQuery.fromString(query)
-    v.expect(parsed.keywords, `Keywords in '${query}'`).toEqual(keywords ?? [])
-    v.expect(parsed.negativeKeywords, `Negative keywords in '${query}'`).toEqual(
+    expect(parsed.keywords, `Keywords in '${query}'`).toEqual(keywords ?? [])
+    expect(parsed.negativeKeywords, `Negative keywords in '${query}'`).toEqual(
       negativeKeywords ?? [],
     )
-    v.expect(parsed.names, `Names in '${query}'`).toEqual(names ?? [])
-    v.expect(parsed.negativeNames, `Negative names in '${query}'`).toEqual(negativeNames ?? [])
-    v.expect(parsed.labels, `Labels in '${query}'`).toEqual(labels ?? [])
-    v.expect(parsed.negativeLabels, `Negative labels in '${query}'`).toEqual(negativeLabels ?? [])
-    v.expect(parsed.owners, `Owners in '${query}'`).toEqual(owners ?? [])
-    v.expect(parsed.negativeOwners, `Negative owners in '${query}'`).toEqual(negativeOwners ?? [])
-    v.expect(parsed.nos, `Nos in '${query}'`).toEqual(nos ?? [])
-    v.expect(parsed.negativeNos, `Negative nos in '${query}'`).toEqual(negativeNos ?? [])
+    expect(parsed.names, `Names in '${query}'`).toEqual(names ?? [])
+    expect(parsed.negativeNames, `Negative names in '${query}'`).toEqual(negativeNames ?? [])
+    expect(parsed.labels, `Labels in '${query}'`).toEqual(labels ?? [])
+    expect(parsed.negativeLabels, `Negative labels in '${query}'`).toEqual(negativeLabels ?? [])
+    expect(parsed.owners, `Owners in '${query}'`).toEqual(owners ?? [])
+    expect(parsed.negativeOwners, `Negative owners in '${query}'`).toEqual(negativeOwners ?? [])
+    expect(parsed.nos, `Nos in '${query}'`).toEqual(nos ?? [])
+    expect(parsed.negativeNos, `Negative nos in '${query}'`).toEqual(negativeNos ?? [])
   },
 )
 
-v.test.each([{ query: 'a', updates: { keywords: [['b']] }, newQuery: 'a b' }])(
+test.each([{ query: 'a', updates: { keywords: [['b']] }, newQuery: 'a b' }])(
   'AssetQuery#add',
   ({ query, updates, newQuery }) => {
     const parsed = AssetQuery.fromString(query)
-    v.expect(
+    expect(
       parsed.add(updates).toString(),
       `'${query}' with ${JSON.stringify(updates)} added should be '${newQuery}'`,
     ).toBe(newQuery)
   },
 )
 
-v.test.each([
+test.each([
   { query: 'a b', updates: { keywords: [['b']] }, newQuery: 'a' },
   { query: 'a', updates: { keywords: [['a']] }, newQuery: '' },
   // Edge cases. The exact result should not matter, as long as it is reasonable.
   { query: 'a a', updates: { keywords: [['a']] }, newQuery: '' },
 ])('AssetQuery#delete', ({ query, updates, newQuery }) => {
   const parsed = AssetQuery.fromString(query)
-  v.expect(
+  expect(
     parsed.delete(updates).toString(),
     `'${query}' with ${JSON.stringify(updates)} deleted should be '${newQuery}'`,
   ).toBe(newQuery)
 })
 
-v.test.each([{ query: 'a', updates: { keywords: ['b'] }, newQuery: 'a,b' }])(
+test.each([{ query: 'a', updates: { keywords: ['b'] }, newQuery: 'a,b' }])(
   'AssetQuery#addToLastTerm',
   ({ query, updates, newQuery }) => {
     const parsed = AssetQuery.fromString(query)
-    v.expect(
+    expect(
       parsed.addToLastTerm(updates).toString(),
       `'${query}' with ${JSON.stringify(updates)} added should be '${newQuery}'`,
     ).toBe(newQuery)
   },
 )
 
-v.test.each([
+test.each([
   { query: 'a b', updates: { keywords: ['b'] }, newQuery: 'a' },
   { query: 'a b', updates: { keywords: ['a'] }, newQuery: 'a b' },
   { query: 'a b,c', updates: { keywords: ['c'] }, newQuery: 'a b' },
@@ -114,13 +114,13 @@ v.test.each([
   { query: 'a b c', updates: { keywords: ['b', 'c'] }, newQuery: 'a b' },
 ])('AssetQuery#deleteFromLastTerm', ({ query, updates, newQuery }) => {
   const parsed = AssetQuery.fromString(query)
-  v.expect(
+  expect(
     parsed.deleteFromLastTerm(updates).toString(),
     `'${query}' with ${JSON.stringify(updates)} deleted should be '${newQuery}'`,
   ).toBe(newQuery)
 })
 
-v.test.each([
+test.each([
   { query: 'a b a', updates: { keywords: ['b'] }, newQuery: 'a a' },
   { query: 'a b a', updates: { keywords: ['a'] }, newQuery: 'b' },
   { query: 'a b,c', updates: { keywords: ['c'] }, newQuery: 'a b' },
@@ -131,7 +131,7 @@ v.test.each([
   { query: 'a b c', updates: { keywords: ['b', 'c'] }, newQuery: 'a' },
 ])('AssetQuery#deleteFromEveryTerm', ({ query, updates, newQuery }) => {
   const parsed = AssetQuery.fromString(query)
-  v.expect(
+  expect(
     parsed.deleteFromEveryTerm(updates).toString(),
     `'${query}' with ${JSON.stringify(updates)} deleted should be '${newQuery}'`,
   ).toBe(newQuery)
diff --git a/app/gui/src/dashboard/utilities/__tests__/jsonSchema.test.ts b/app/gui/src/dashboard/utilities/__tests__/jsonSchema.test.ts
index f73203ab89cb..97e607c0df3a 100644
--- a/app/gui/src/dashboard/utilities/__tests__/jsonSchema.test.ts
+++ b/app/gui/src/dashboard/utilities/__tests__/jsonSchema.test.ts
@@ -5,16 +5,8 @@ import * as v from 'vitest'
 
 import * as jsonSchema from '#/utilities/jsonSchema'
 
-// =================
-// === Constants ===
-// =================
-
 const AJV = new Ajv()
 
-// =============
-// === Tests ===
-// =============
-
 fc.test.prop({
   value: fc.fc.anything({ withNullPrototype: true }),
 })('converting between constant value and schema', ({ value }) => {
diff --git a/app/gui/src/dashboard/utilities/__tests__/set.test.ts b/app/gui/src/dashboard/utilities/__tests__/set.test.ts
deleted file mode 100644
index 9d31a81f12a7..000000000000
--- a/app/gui/src/dashboard/utilities/__tests__/set.test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/** @file Tests for `error.ts`. */
-import * as fc from '@fast-check/vitest'
-import * as v from 'vitest'
-
-import * as setModule from '#/utilities/set'
-
-// =============
-// === Tests ===
-// =============
-
-fc.test.prop({
-  set: fc.fc.array(fc.fc.anything(), { minLength: 1 }).map((array) => new Set(array)),
-  item: fc.fc.anything(),
-})('Manipulating `Set` presence', ({ set, item }) => {
-  v.expect(setModule.withPresence(set, item, true).has(item)).toBe(true)
-  v.expect(setModule.withPresence(set, item, false).has(item)).toBe(false)
-  v.expect(setModule.setPresence(set, item, true).has(item)).toBe(true)
-  v.expect(setModule.setPresence(set, item, false).has(item)).toBe(false)
-})
diff --git a/app/gui/src/dashboard/utilities/__tests__/shortcuts.test.ts b/app/gui/src/dashboard/utilities/__tests__/shortcuts.test.ts
index d501e4b6e9ce..b6fe6f58cfc9 100644
--- a/app/gui/src/dashboard/utilities/__tests__/shortcuts.test.ts
+++ b/app/gui/src/dashboard/utilities/__tests__/shortcuts.test.ts
@@ -5,10 +5,6 @@ import * as detect from 'enso-common/src/detect'
 
 import * as shortcutsModule from '#/utilities/inputBindings'
 
-// =============
-// === Tests ===
-// =============
-
 // NOTE: macOS using the meta key has not been tested, as it is not possible to override
 // `navigator.userAgent`.
 
diff --git a/app/gui/src/dashboard/utilities/__tests__/validation.test.ts b/app/gui/src/dashboard/utilities/__tests__/validation.test.ts
index 6d970930447d..d83bcff555ab 100644
--- a/app/gui/src/dashboard/utilities/__tests__/validation.test.ts
+++ b/app/gui/src/dashboard/utilities/__tests__/validation.test.ts
@@ -1,44 +1,38 @@
-/** @file Basic tests for this */
-import * as v from 'vitest'
+/** @file Tests for password validation. */
+import { expect, test } from 'vitest'
 
-import * as validation from '#/utilities/validation'
-
-// =============
-// === Tests ===
-// =============
+import { DIRECTORY_NAME_REGEX, PASSWORD_REGEX } from '#/utilities/validation'
 
 /** Runs all tests. */
-v.test('password validation', () => {
-  const regex = validation.PASSWORD_REGEX
+test('password validation', () => {
+  const regex = PASSWORD_REGEX
   const emptyPassword = ''
-  v.expect(emptyPassword, `'${emptyPassword}' fails validation`).not.toMatch(regex)
+  expect(emptyPassword, `'${emptyPassword}' fails validation`).not.toMatch(regex)
   const shortPassword = 'Aa0!'
-  v.expect(shortPassword, `'${shortPassword}' is too short`).not.toMatch(regex)
+  expect(shortPassword, `'${shortPassword}' is too short`).not.toMatch(regex)
   const passwordMissingDigit = 'Aa!Aa!Aa!'
-  v.expect(passwordMissingDigit, `'${passwordMissingDigit}' is missing a digit`).not.toMatch(regex)
+  expect(passwordMissingDigit, `'${passwordMissingDigit}' is missing a digit`).not.toMatch(regex)
   const passwordMissingLowercase = 'A0!A0!A0!'
-  v.expect(
+  expect(
     passwordMissingLowercase,
     `'${passwordMissingLowercase}' is missing a lowercase letter`,
   ).not.toMatch(regex)
   const passwordMissingUppercase = 'a0!a0!a0!'
-  v.expect(
+  expect(
     passwordMissingUppercase,
     `'${passwordMissingUppercase}' is missing an uppercase letter`,
   ).not.toMatch(regex)
   const passwordMissingSymbol = 'Aa0Aa0Aa0'
-  v.expect(passwordMissingSymbol, `'${passwordMissingSymbol}' is missing a symbol`).not.toMatch(
-    regex,
-  )
+  expect(passwordMissingSymbol, `'${passwordMissingSymbol}' is missing a symbol`).not.toMatch(regex)
   const validPassword = 'Aa0!Aa0!'
-  v.expect(validPassword, `'${validPassword}' passes validation`).toMatch(regex)
+  expect(validPassword, `'${validPassword}' passes validation`).toMatch(regex)
   const basicPassword = 'Password0!'
-  v.expect(basicPassword, `'${basicPassword}' passes validation`).toMatch(regex)
+  expect(basicPassword, `'${basicPassword}' passes validation`).toMatch(regex)
   const issue7498Password = 'ÑéFÛÅÐåÒ.ú¿¼\u00b4N@aö¶U¹jÙÇ3'
-  v.expect(issue7498Password, `'${issue7498Password}' passes validation`).toMatch(regex)
+  expect(issue7498Password, `'${issue7498Password}' passes validation`).toMatch(regex)
 })
 
-v.test.each([
+test.each([
   { name: 'foo', valid: true },
   { name: 'foo/', valid: false },
   { name: 'foo\\', valid: false },
@@ -61,10 +55,10 @@ v.test.each([
   { name: '\\/', valid: false },
 ])('directory name validation', (args) => {
   const { name, valid } = args
-  const regex = validation.DIRECTORY_NAME_REGEX
+  const regex = DIRECTORY_NAME_REGEX
   if (valid) {
-    v.expect(name, `'${name}' is a valid directory name`).toMatch(regex)
+    expect(name, `'${name}' is a valid directory name`).toMatch(regex)
   } else {
-    v.expect(name, `'${name}' is not a valid directory name`).not.toMatch(regex)
+    expect(name, `'${name}' is not a valid directory name`).not.toMatch(regex)
   }
 })
diff --git a/app/gui/src/dashboard/utilities/drag.ts b/app/gui/src/dashboard/utilities/drag.ts
index b57a2bb23634..5365ff645bbe 100644
--- a/app/gui/src/dashboard/utilities/drag.ts
+++ b/app/gui/src/dashboard/utilities/drag.ts
@@ -4,10 +4,6 @@ import type { DragEvent } from 'react'
 import type { AnyAsset, AssetId, LabelName } from 'enso-common/src/services/Backend'
 import { uniqueString } from 'enso-common/src/utilities/uniqueString'
 
-// ===========================
-// === setDragImageToBlank ===
-// ===========================
-
 /** Set the drag image to blank, so a custom div can be used instead. */
 export function setDragImageToBlank(event: DragEvent) {
   const blankElement = document.createElement('div')
@@ -18,10 +14,6 @@ export function setDragImageToBlank(event: DragEvent) {
   blankElement.remove()
 }
 
-// ==========================
-// === DragPayloadManager ===
-// ==========================
-
 /** Associates drag events with payload data. */
 class DragPayloadManager<Payload> {
   readonly regex: RegExp
@@ -59,10 +51,6 @@ class DragPayloadManager<Payload> {
   }
 }
 
-// ============================
-// === AssetRowsDragPayload ===
-// ============================
-
 export const ASSET_ROWS = new DragPayloadManager<AssetRowsDragPayload>(
   'application/x-enso-asset-list',
 )
@@ -76,10 +64,6 @@ interface AssetRowsDragPayloadItem {
 /** Data for a {@link DragEvent} started from an `AssetsTable`. */
 export type AssetRowsDragPayload = readonly AssetRowsDragPayloadItem[]
 
-// ========================
-// === LabelDragPayload ===
-// ========================
-
 export const LABELS = new DragPayloadManager<LabelsDragPayload>('application/x-enso-label')
 
 /** Data for a {@link DragEvent} started from an {@link LabelName}. */

From 2b25e90c3fd83c828089cc38d06ee459a31f12da Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Sat, 14 Dec 2024 00:10:42 +1000
Subject: [PATCH 04/15] Fix errors

---
 .../src/services/__tests__}/Backend.test.ts   |  3 +-
 app/gui/src/dashboard/layouts/Chat.tsx        |  1 -
 .../PlanSelector/getComponentForPlan.tsx      |  4 +
 .../pages/authentication/ErrorScreen.tsx      | 21 ++---
 .../dashboard/pages/dashboard/Dashboard.tsx   |  2 +-
 .../dashboard/providers/SessionProvider.tsx   | 83 ++++++++++---------
 .../src/dashboard/providers/TextProvider.tsx  |  2 +-
 .../providers/__test__/DriveProvider.test.tsx |  8 +-
 .../dashboard/services/remoteBackendPaths.ts  |  5 +-
 app/gui/src/dashboard/utilities/AssetQuery.ts | 10 +--
 .../src/dashboard/utilities/inputBindings.ts  |  8 --
 eslint.config.mjs                             |  2 +-
 12 files changed, 66 insertions(+), 83 deletions(-)
 rename app/{gui/src/dashboard/services/__test__ => common/src/services/__tests__}/Backend.test.ts (99%)

diff --git a/app/gui/src/dashboard/services/__test__/Backend.test.ts b/app/common/src/services/__tests__/Backend.test.ts
similarity index 99%
rename from app/gui/src/dashboard/services/__test__/Backend.test.ts
rename to app/common/src/services/__tests__/Backend.test.ts
index b9f17b39bec6..bfa2cb3e258e 100644
--- a/app/gui/src/dashboard/services/__test__/Backend.test.ts
+++ b/app/common/src/services/__tests__/Backend.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest'
-import { Rfc3339DateTime } from '../../utilities/dateTime'
+
+import { Rfc3339DateTime } from '../../utilities/data/dateTime'
 import { AssetType, compareAssets, type AnyAsset } from '../Backend'
 
 describe('Backend', () => {
diff --git a/app/gui/src/dashboard/layouts/Chat.tsx b/app/gui/src/dashboard/layouts/Chat.tsx
index a559bb1cc898..d1985d2a93ee 100644
--- a/app/gui/src/dashboard/layouts/Chat.tsx
+++ b/app/gui/src/dashboard/layouts/Chat.tsx
@@ -40,7 +40,6 @@ import {
 import { twMerge } from '#/utilities/tailwindMerge'
 
 /** Create a {@link ChatMessageId}. */
-// eslint-disable-next-line no-restricted-syntax
 const MessageId = newtypeConstructor<ChatMessageId>()
 
 // TODO[sb]: Consider associating a project with a thread
diff --git a/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx b/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
index f0bd9a8a6f61..51824ceb0736 100644
--- a/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
+++ b/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
@@ -52,6 +52,7 @@ const COMPONENT_PER_PLAN: Record<Plan, ComponentForPlan> = {
   },
   [Plan.solo]: {
     learnMore: () => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       const { getText } = useText()
 
       return (
@@ -75,6 +76,7 @@ const COMPONENT_PER_PLAN: Record<Plan, ComponentForPlan> = {
   },
   [Plan.team]: {
     learnMore: () => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       const { getText } = useText()
 
       return (
@@ -99,6 +101,7 @@ const COMPONENT_PER_PLAN: Record<Plan, ComponentForPlan> = {
   },
   [Plan.enterprise]: {
     learnMore: () => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       const { getText } = useText()
 
       return (
@@ -119,6 +122,7 @@ const COMPONENT_PER_PLAN: Record<Plan, ComponentForPlan> = {
     title: PLAN_TO_TEXT_ID['enterprise'],
     subtitle: 'enterprisePlanSubtitle',
     submitButton: () => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       const { getText } = useText()
 
       return (
diff --git a/app/gui/src/dashboard/pages/authentication/ErrorScreen.tsx b/app/gui/src/dashboard/pages/authentication/ErrorScreen.tsx
index 49128367149e..79f1cfd360c1 100644
--- a/app/gui/src/dashboard/pages/authentication/ErrorScreen.tsx
+++ b/app/gui/src/dashboard/pages/authentication/ErrorScreen.tsx
@@ -1,15 +1,8 @@
 /** @file A screen displaying an error. */
-import * as React from 'react'
+import { getMessageOrToString } from 'enso-common/src/utilities/error'
 
-import * as textProvider from '#/providers/TextProvider'
-
-import * as aria from '#/components/aria'
-
-import * as errorModule from '#/utilities/error'
-
-// ===================
-// === ErrorScreen ===
-// ===================
+import { Text } from '#/components/aria'
+import { useText } from '#/providers/TextProvider'
 
 /** Props for an {@link ErrorScreen}. */
 export interface ErrorScreenProps {
@@ -19,13 +12,13 @@ export interface ErrorScreenProps {
 /** A screen displaying an error. */
 export default function ErrorScreen(props: ErrorScreenProps) {
   const { error } = props
-  const { getText } = textProvider.useText()
+  const { getText } = useText()
   return (
     <div className="grid h-screen w-screen place-items-center text-primary">
       <div className="flex flex-col items-center gap-status-page text-center text-base">
-        <aria.Text>{getText('appErroredMessage')}</aria.Text>
-        <aria.Text>{getText('appErroredPrompt')}</aria.Text>
-        <aria.Text className="text-delete">{errorModule.getMessageOrToString(error)}</aria.Text>
+        <Text>{getText('appErroredMessage')}</Text>
+        <Text>{getText('appErroredPrompt')}</Text>
+        <Text className="text-delete">{getMessageOrToString(error)}</Text>
       </div>
     </div>
   )
diff --git a/app/gui/src/dashboard/pages/dashboard/Dashboard.tsx b/app/gui/src/dashboard/pages/dashboard/Dashboard.tsx
index 7ef1ff6a50b8..e6e2e2c7edb5 100644
--- a/app/gui/src/dashboard/pages/dashboard/Dashboard.tsx
+++ b/app/gui/src/dashboard/pages/dashboard/Dashboard.tsx
@@ -22,7 +22,7 @@ import {
 } from '#/hooks/projectHooks'
 import { useSearchParamsState } from '#/hooks/searchParamsStateHooks'
 import type { AssetManagementApi } from '#/layouts/AssetsTable'
-import { Category, CATEGORY_SCHEMA } from '#/layouts/CategorySwitcher/Category'
+import { CATEGORY_SCHEMA, type Category } from '#/layouts/CategorySwitcher/Category'
 import Chat from '#/layouts/Chat'
 import ChatPlaceholder from '#/layouts/ChatPlaceholder'
 import EventListProvider, { useDispatchAssetListEvent } from '#/layouts/Drive/EventListProvider'
diff --git a/app/gui/src/dashboard/providers/SessionProvider.tsx b/app/gui/src/dashboard/providers/SessionProvider.tsx
index edb984da3d92..e7128007ac45 100644
--- a/app/gui/src/dashboard/providers/SessionProvider.tsx
+++ b/app/gui/src/dashboard/providers/SessionProvider.tsx
@@ -2,32 +2,33 @@
  * @file Provider for the {@link SessionContextType}, which contains information about the
  * currently authenticated user's session.
  */
-import * as React from 'react'
-
-import * as reactQuery from '@tanstack/react-query'
+import { createContext, useContext, useEffect, type ReactNode } from 'react'
+
+import {
+  queryOptions,
+  useMutation,
+  useQuery,
+  useQueryClient,
+  useSuspenseQuery,
+  type QueryKey,
+} from '@tanstack/react-query'
 import invariant from 'tiny-invariant'
 
-import * as eventCallback from '#/hooks/eventCallbackHooks'
-
-import * as httpClientProvider from '#/providers/HttpClientProvider'
+import { UnreachableCaseError } from 'enso-common/src/utilities/error'
 
-import * as errorModule from '#/utilities/error'
-
-import type * as cognito from '#/authentication/cognito'
-import * as listen from '#/authentication/listen'
+import type { UserSession } from '#/authentication/cognito'
+import { AuthEvent, type ListenFunction } from '#/authentication/listen'
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useToastAndLog } from '#/hooks/toastAndLogHooks'
-
-// ======================
-// === SessionContext ===
-// ======================
+import { useHttpClient } from '#/providers/HttpClientProvider'
 
 /** State contained in a {@link SessionContext}. */
 interface SessionContextType {
-  readonly session: cognito.UserSession | null
-  readonly sessionQueryKey: reactQuery.QueryKey
+  readonly session: UserSession | null
+  readonly sessionQueryKey: QueryKey
 }
 
-const SessionContext = React.createContext<SessionContextType | null>(null)
+const SessionContext = createContext<SessionContextType | null>(null)
 
 // =======================
 // === SessionProvider ===
@@ -49,16 +50,16 @@ export interface SessionProviderProps {
    * is initially served.
    */
   readonly mainPageUrl: URL
-  readonly registerAuthEventListener: listen.ListenFunction | null
-  readonly userSession: (() => Promise<cognito.UserSession | null>) | null
-  readonly saveAccessToken?: ((accessToken: cognito.UserSession) => void) | null
-  readonly refreshUserSession: (() => Promise<cognito.UserSession | null>) | null
-  readonly children: React.ReactNode | ((props: SessionContextType) => React.ReactNode)
+  readonly registerAuthEventListener: ListenFunction | null
+  readonly userSession: (() => Promise<UserSession | null>) | null
+  readonly saveAccessToken?: ((accessToken: UserSession) => void) | null
+  readonly refreshUserSession: (() => Promise<UserSession | null>) | null
+  readonly children: ReactNode | ((props: SessionContextType) => ReactNode)
 }
 
 /** Create a query for the user session. */
-function createSessionQuery(userSession: (() => Promise<cognito.UserSession | null>) | null) {
-  return reactQuery.queryOptions({
+function createSessionQuery(userSession: (() => Promise<UserSession | null>) | null) {
+  return queryOptions({
     queryKey: ['userSession'],
     queryFn: async () => {
       const session = (await userSession?.().catch(() => null)) ?? null
@@ -82,19 +83,19 @@ export default function SessionProvider(props: SessionProviderProps) {
   } = props
 
   // stabilize the callback so that it doesn't change on every render
-  const saveAccessTokenEventCallback = eventCallback.useEventCallback(
-    (accessToken: cognito.UserSession) => saveAccessToken?.(accessToken),
+  const saveAccessTokenEventCallback = useEventCallback((accessToken: UserSession) =>
+    saveAccessToken?.(accessToken),
   )
 
-  const httpClient = httpClientProvider.useHttpClient()
-  const queryClient = reactQuery.useQueryClient()
+  const httpClient = useHttpClient()
+  const queryClient = useQueryClient()
   const toastAndLog = useToastAndLog()
 
   const sessionQuery = createSessionQuery(userSession)
 
-  const session = reactQuery.useSuspenseQuery(sessionQuery)
+  const session = useSuspenseQuery(sessionQuery)
 
-  const refreshUserSessionMutation = reactQuery.useMutation({
+  const refreshUserSessionMutation = useMutation({
     mutationKey: ['refreshUserSession', { expireAt: session.data?.expireAt }],
     mutationFn: async () => refreshUserSession?.() ?? null,
     onSuccess: (data) => {
@@ -119,17 +120,17 @@ export default function SessionProvider(props: SessionProviderProps) {
   // session.
   // For example, if a user clicks the "sign out" button, this will clear the user's session, which
   // means the login screen (which is a child of this provider) should render.
-  React.useEffect(
+  useEffect(
     () =>
       registerAuthEventListener?.((event) => {
         switch (event) {
-          case listen.AuthEvent.signIn:
-          case listen.AuthEvent.signOut: {
+          case AuthEvent.signIn:
+          case AuthEvent.signOut: {
             void queryClient.invalidateQueries({ queryKey: sessionQuery.queryKey })
             break
           }
-          case listen.AuthEvent.customOAuthState:
-          case listen.AuthEvent.cognitoHostedUi: {
+          case AuthEvent.customOAuthState:
+          case AuthEvent.cognitoHostedUi: {
             // AWS Amplify doesn't provide a way to set the redirect URL for the OAuth flow, so
             // we have to hack it by replacing the URL in the browser's history. This is done
             // because otherwise the user will be redirected to a URL like `enso://auth`, which
@@ -140,14 +141,14 @@ export default function SessionProvider(props: SessionProviderProps) {
             break
           }
           default: {
-            throw new errorModule.UnreachableCaseError(event)
+            throw new UnreachableCaseError(event)
           }
         }
       }),
     [registerAuthEventListener, mainPageUrl, queryClient, sessionQuery.queryKey],
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (session.data) {
       // Save access token so can it be reused by backend services
       saveAccessTokenEventCallback(session.data)
@@ -175,8 +176,8 @@ export default function SessionProvider(props: SessionProviderProps) {
 
 /** Props for a {@link SessionRefresher}. */
 interface SessionRefresherProps {
-  readonly session: cognito.UserSession
-  readonly refreshUserSession: () => Promise<cognito.UserSession | null>
+  readonly session: UserSession
+  readonly refreshUserSession: () => Promise<UserSession | null>
 }
 
 const TEN_SECONDS_MS = 10_000
@@ -188,7 +189,7 @@ const SIX_HOURS_MS = 21_600_000
 function SessionRefresher(props: SessionRefresherProps) {
   const { refreshUserSession, session } = props
 
-  reactQuery.useQuery({
+  useQuery({
     queryKey: ['refreshUserSession', { refreshToken: session.refreshToken }] as const,
     queryFn: () => refreshUserSession(),
     meta: { persist: false },
@@ -224,7 +225,7 @@ function SessionRefresher(props: SessionRefresherProps) {
  * @throws {Error} when used outside a {@link SessionProvider}.
  */
 export function useSession() {
-  const context = React.useContext(SessionContext)
+  const context = useContext(SessionContext)
 
   invariant(context != null, '`useSession` can only be used inside an `<SessionProvider />`.')
 
diff --git a/app/gui/src/dashboard/providers/TextProvider.tsx b/app/gui/src/dashboard/providers/TextProvider.tsx
index 20266fa8fe37..160a505e2dbb 100644
--- a/app/gui/src/dashboard/providers/TextProvider.tsx
+++ b/app/gui/src/dashboard/providers/TextProvider.tsx
@@ -14,8 +14,8 @@ import {
 import {
   Language,
   LANGUAGE_TO_LOCALE,
-  Replacements,
   TEXTS,
+  type Replacements,
   type TextId,
 } from 'enso-common/src/text'
 import { unsafeMutable } from 'enso-common/src/utilities/data/object'
diff --git a/app/gui/src/dashboard/providers/__test__/DriveProvider.test.tsx b/app/gui/src/dashboard/providers/__test__/DriveProvider.test.tsx
index 5be3a0dfd247..4a74017ca2d5 100644
--- a/app/gui/src/dashboard/providers/__test__/DriveProvider.test.tsx
+++ b/app/gui/src/dashboard/providers/__test__/DriveProvider.test.tsx
@@ -1,8 +1,10 @@
-import type { Category } from '#/layouts/CategorySwitcher/Category'
-import { act, renderHook, type RenderHookOptions, type RenderHookResult } from '#/test'
 import { describe, expect, it } from 'vitest'
 import { useStore } from 'zustand'
-import { DirectoryId } from '../../services/Backend'
+
+import { DirectoryId } from 'enso-common/src/services/Backend'
+
+import type { Category } from '#/layouts/CategorySwitcher/Category'
+import { act, renderHook, type RenderHookOptions, type RenderHookResult } from '#/test'
 import DriveProvider, { useDriveStore } from '../DriveProvider'
 
 function renderDriveProviderHook<Result, Props>(
diff --git a/app/gui/src/dashboard/services/remoteBackendPaths.ts b/app/gui/src/dashboard/services/remoteBackendPaths.ts
index dbfa4dd9b438..817fe0f85f25 100644
--- a/app/gui/src/dashboard/services/remoteBackendPaths.ts
+++ b/app/gui/src/dashboard/services/remoteBackendPaths.ts
@@ -3,7 +3,6 @@ import type {
   AssetId,
   CheckoutSessionId,
   DatalinkId,
-  DirectoryId as DirectoryId_1,
   FileId,
   ProjectId,
   ProjectSessionId,
@@ -133,7 +132,7 @@ export function copyAssetPath(assetId: AssetId) {
   return `assets/${assetId}/copy`
 }
 /** Relative HTTP path to the "update directory" endpoint of the Cloud backend API. */
-export function updateDirectoryPath(directoryId: DirectoryId_1) {
+export function updateDirectoryPath(directoryId: DirectoryId) {
   return `directories/${directoryId}`
 }
 /** Relative HTTP path to the "close project" endpoint of the Cloud backend API. */
@@ -204,7 +203,7 @@ export function getCheckoutSessionPath(checkoutSessionId: CheckoutSessionId) {
 
 /** Unique identifier for a directory. */
 type DirectoryId = Newtype<string, 'DirectoryId'>
-// eslint-disable-next-line no-restricted-syntax, @typescript-eslint/no-redeclare
+// eslint-disable-next-line @typescript-eslint/no-redeclare
 const DirectoryId = newtypeConstructor<DirectoryId>()
 export const ROOT_PARENT_DIRECTORY_ID = DirectoryId('')
 /** The ID of the directory containing the home directories of all users. */
diff --git a/app/gui/src/dashboard/utilities/AssetQuery.ts b/app/gui/src/dashboard/utilities/AssetQuery.ts
index 5f354bc4db26..a271d572831f 100644
--- a/app/gui/src/dashboard/utilities/AssetQuery.ts
+++ b/app/gui/src/dashboard/utilities/AssetQuery.ts
@@ -1,9 +1,5 @@
 /** @file Parsing and representation of the search query. */
-import * as array from './array'
-
-// =====================
-// === Regex Helpers ===
-// =====================
+import * as array from 'enso-common/src/utilities/data/array'
 
 // Control characters must be handled, in order to follow the JSON spec.
 // eslint-disable-next-line no-control-regex
@@ -17,10 +13,6 @@ function interpolateRegex(regex: RegExp) {
   return new RegExp(regex.source.replace(/<json>/g, JSON_VALUE_REGEX), regex.flags)
 }
 
-// ==================
-// === AssetQuery ===
-// ==================
-
 /** Keys of an {@Link AssetQuery} which correspond to tags. */
 export type AssetQueryKey = Exclude<keyof AssetQuery & `${string}s`, 'withUpdates'>
 
diff --git a/app/gui/src/dashboard/utilities/inputBindings.ts b/app/gui/src/dashboard/utilities/inputBindings.ts
index 731d7d3c8369..cae7904b013c 100644
--- a/app/gui/src/dashboard/utilities/inputBindings.ts
+++ b/app/gui/src/dashboard/utilities/inputBindings.ts
@@ -9,10 +9,6 @@ import { camelCaseToTitleCase } from 'enso-common/src/utilities/data/string'
 
 import { isElementTextInput, isTextInputEvent } from '#/utilities/event'
 
-// ================
-// === Newtypes ===
-// ================
-
 /** A keyboard key obtained from `KeyboardEvent.key`. */
 type KeyName = Newtype<string, 'keyboard key'>
 // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -26,10 +22,6 @@ type PointerButtonFlags = Newtype<number, 'pointer button flags'>
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 const PointerButtonFlags = newtypeConstructor<PointerButtonFlags>()
 
-// =============
-// === Types ===
-// =============
-
 /** All possible modifier keys. */
 export type ModifierKey = keyof typeof RAW_MODIFIER_FLAG
 
diff --git a/eslint.config.mjs b/eslint.config.mjs
index fe6ba0167d58..014f799d8656 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -102,7 +102,7 @@ const RESTRICTED_SYNTAXES = [
   },
   {
     // Matches non-functions.
-    selector: `:matches(Program, ExportNamedDeclaration, TSModuleBlock) > VariableDeclaration[kind=const] > VariableDeclarator[id.name=${NOT_CONSTANT_CASE}]:not(:matches([init.callee.object.name=React][init.callee.property.name=forwardRef], :has(ArrowFunctionExpression), :has(CallExpression[callee.object.name=newtype][callee.property.name=newtypeConstructor])))`,
+    selector: `:matches(Program, ExportNamedDeclaration, TSModuleBlock) > VariableDeclaration[kind=const] > VariableDeclarator[id.name=${NOT_CONSTANT_CASE}]:not(:matches([init.callee.object.name=React][init.callee.property.name=forwardRef], :has(ArrowFunctionExpression), :has(CallExpression[callee.name=newtypeConstructor])))`,
     message: 'Use `CONSTANT_CASE` for top-level constants that are not functions',
   },
   {

From 9a7aeb367d01c87c3c470081605bef346f04948d Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Sat, 14 Dec 2024 00:32:17 +1000
Subject: [PATCH 05/15] Fix errors

---
 app/gui/src/dashboard/App.tsx                 | 57 +++++------
 .../src/dashboard/authentication/cognito.ts   |  2 +-
 .../AriaComponents/Form/components/useForm.ts | 21 ++--
 .../src/dashboard/components/ColorPicker.tsx  |  6 +-
 .../src/dashboard/components/EditableSpan.tsx | 20 ++--
 .../dashboard/components/ErrorBoundary.tsx    | 98 ++++++++-----------
 .../components/dashboard/DatalinkInput.tsx    | 25 ++---
 app/gui/src/dashboard/hooks/measureHooks.ts   |  6 +-
 app/gui/src/dashboard/hooks/setAssetHooks.ts  |  2 +-
 app/gui/src/dashboard/hooks/storeHooks.ts     | 23 +++--
 .../src/dashboard/hooks/toastAndLogHooks.ts   | 56 +++++------
 11 files changed, 139 insertions(+), 177 deletions(-)

diff --git a/app/gui/src/dashboard/App.tsx b/app/gui/src/dashboard/App.tsx
index eea85381a63f..7f1f8f1da429 100644
--- a/app/gui/src/dashboard/App.tsx
+++ b/app/gui/src/dashboard/App.tsx
@@ -37,7 +37,7 @@
  */
 import { useEffect, useMemo, useState } from 'react'
 
-import { QueryClient, useQuery, useSuspenseQuery } from '@tanstack/react-query'
+import { useQuery, useSuspenseQuery, type QueryClient } from '@tanstack/react-query'
 import { BrowserRouter, Navigate, Route, Routes, useNavigate } from 'react-router-dom'
 import { Slide, ToastContainer } from 'react-toastify'
 import * as z from 'zod'
@@ -59,9 +59,29 @@ import {
   SUBSCRIBE_PATH,
   SUBSCRIBE_SUCCESS_PATH,
 } from '#/appUtils'
-
+import { useInitAuthService } from '#/authentication/service'
+import { RouterProvider } from '#/components/aria'
+import { EnsoDevtools } from '#/components/Devtools'
+import { ErrorBoundary } from '#/components/ErrorBoundary'
+import { Suspense } from '#/components/Suspense'
 import { createBindings, type DashboardBindingKey } from '#/configurations/inputBindings'
-
+import type { GraphEditorRunner } from '#/layouts/Editor'
+import { OpenAppWatcher } from '#/layouts/OpenAppWatcher'
+import VersionChecker from '#/layouts/VersionChecker'
+import AboutModal from '#/modals/AboutModal'
+import { AgreementsModal } from '#/modals/AgreementsModal'
+import { InvitedToOrganizationModal } from '#/modals/InvitedToOrganizationModal'
+import { SetupOrganizationAfterSubscribe } from '#/modals/SetupOrganizationAfterSubscribe'
+import ConfirmRegistration from '#/pages/authentication/ConfirmRegistration'
+import ForgotPassword from '#/pages/authentication/ForgotPassword'
+import Login from '#/pages/authentication/Login'
+import Registration from '#/pages/authentication/Registration'
+import ResetPassword from '#/pages/authentication/ResetPassword'
+import RestoreAccount from '#/pages/authentication/RestoreAccount'
+import { Setup } from '#/pages/authentication/Setup'
+import Dashboard from '#/pages/dashboard/Dashboard'
+import { Subscribe } from '#/pages/subscribe/Subscribe'
+import { SubscribeSuccess } from '#/pages/subscribe/SubscribeSuccess'
 import AuthProvider, {
   FullUserSession,
   GuestLayout,
@@ -73,6 +93,7 @@ import AuthProvider, {
 } from '#/providers/AuthProvider'
 import BackendProvider, { useLocalBackend } from '#/providers/BackendProvider'
 import DriveProvider from '#/providers/DriveProvider'
+import { FeatureFlagsProvider } from '#/providers/FeatureFlagsProvider'
 import { useHttpClientStrict } from '#/providers/HttpClientProvider'
 import InputBindingsProvider from '#/providers/InputBindingsProvider'
 import LocalStorageProvider, {
@@ -84,44 +105,14 @@ import ModalProvider, { useSetModal } from '#/providers/ModalProvider'
 import { useNavigator2D } from '#/providers/Navigator2DProvider'
 import SessionProvider from '#/providers/SessionProvider'
 import { useText } from '#/providers/TextProvider'
-
-import ConfirmRegistration from '#/pages/authentication/ConfirmRegistration'
-import ForgotPassword from '#/pages/authentication/ForgotPassword'
-import Login from '#/pages/authentication/Login'
-import Registration from '#/pages/authentication/Registration'
-import ResetPassword from '#/pages/authentication/ResetPassword'
-import RestoreAccount from '#/pages/authentication/RestoreAccount'
-import { Setup } from '#/pages/authentication/Setup'
-import Dashboard from '#/pages/dashboard/Dashboard'
-import { Subscribe } from '#/pages/subscribe/Subscribe'
-import { SubscribeSuccess } from '#/pages/subscribe/SubscribeSuccess'
-
-import type { GraphEditorRunner } from '#/layouts/Editor'
-import { OpenAppWatcher } from '#/layouts/OpenAppWatcher'
-import VersionChecker from '#/layouts/VersionChecker'
-
-import { RouterProvider } from '#/components/aria'
-import { EnsoDevtools } from '#/components/Devtools'
-import { ErrorBoundary } from '#/components/ErrorBoundary'
-import { Suspense } from '#/components/Suspense'
-
-import AboutModal from '#/modals/AboutModal'
-import { AgreementsModal } from '#/modals/AgreementsModal'
-import { SetupOrganizationAfterSubscribe } from '#/modals/SetupOrganizationAfterSubscribe'
-
 import LocalBackend from '#/services/LocalBackend'
 import ProjectManager, * as projectManager from '#/services/ProjectManager'
 import RemoteBackend from '#/services/RemoteBackend'
-
-import { FeatureFlagsProvider } from '#/providers/FeatureFlagsProvider'
 import { APP_BASE_URL } from '#/utilities/appBaseUrl'
 import { isElementPartOfMonaco, isElementTextInput } from '#/utilities/event'
 import LocalStorage from '#/utilities/LocalStorage'
 import { STATIC_QUERY_OPTIONS } from '#/utilities/reactQuery'
 
-import { useInitAuthService } from '#/authentication/service'
-import { InvitedToOrganizationModal } from '#/modals/InvitedToOrganizationModal'
-
 declare module '#/utilities/LocalStorage' {
   /** */
   interface LocalStorageData {
diff --git a/app/gui/src/dashboard/authentication/cognito.ts b/app/gui/src/dashboard/authentication/cognito.ts
index 019461914496..937e76dbb2d9 100644
--- a/app/gui/src/dashboard/authentication/cognito.ts
+++ b/app/gui/src/dashboard/authentication/cognito.ts
@@ -43,7 +43,7 @@ import type { AccessToken } from 'enso-common/src/accessToken'
 import { isOnElectron } from 'enso-common/src/detect'
 import { toRfc3339, type Rfc3339DateTime } from 'enso-common/src/utilities/data/dateTime'
 
-import { AmplifyConfig, toNestedAmplifyConfig } from '#/authentication/service'
+import { toNestedAmplifyConfig, type AmplifyConfig } from '#/authentication/service'
 import type { Logger } from '#/providers/LoggerProvider'
 
 /**
diff --git a/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts b/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts
index a3dca199d5e4..247e3f0f22c5 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts
+++ b/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts
@@ -1,20 +1,17 @@
-/**
- * @file
- *
- * A hook that returns a form instance.
- */
-import * as sentry from '@sentry/react'
+/** @file A hook that returns a form instance. */
 import * as React from 'react'
 
 import * as zodResolver from '@hookform/resolvers/zod'
+import * as sentry from '@sentry/react'
+import { useMutation } from '@tanstack/react-query'
 import * as reactHookForm from 'react-hook-form'
 import invariant from 'tiny-invariant'
 
+import { isJSError, tryGetMessage } from 'enso-common/src/utilities/error'
+
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useOffline, useOfflineChange } from '#/hooks/offlineHooks'
 import { useText } from '#/providers/TextProvider'
-import * as errorUtils from '#/utilities/error'
-import { useMutation } from '@tanstack/react-query'
 import * as schemaModule from './schema'
 import type * as types from './types'
 
@@ -163,18 +160,18 @@ export function useForm<Schema extends types.TSchema, SubmitResult = void>(
 
           return result
         } catch (error) {
-          const isJSError = errorUtils.isJSError(error)
+          const errorIsJSError = isJSError(error)
 
-          if (isJSError) {
+          if (errorIsJSError) {
             sentry.captureException(error, {
               contexts: { form: { values: fieldValues } },
             })
           }
 
           const message =
-            isJSError ?
+            errorIsJSError ?
               getText('arbitraryFormErrorMessage')
-            : errorUtils.tryGetMessage(error, getText('arbitraryFormErrorMessage'))
+            : tryGetMessage(error, getText('arbitraryFormErrorMessage'))
 
           setFormError(message)
           // We need to throw the error to make the mutation fail
diff --git a/app/gui/src/dashboard/components/ColorPicker.tsx b/app/gui/src/dashboard/components/ColorPicker.tsx
index 23a646762a1c..47679395f32c 100644
--- a/app/gui/src/dashboard/components/ColorPicker.tsx
+++ b/app/gui/src/dashboard/components/ColorPicker.tsx
@@ -1,14 +1,14 @@
 /** @file A color picker to select from a predetermined list of colors. */
-import { ForwardedRef, ReactNode } from 'react'
+import type { ForwardedRef, ReactNode } from 'react'
 
 import {
   COLOR_STRING_TO_COLOR,
   COLORS,
-  LChColor,
   lChColorToCssColor,
+  type LChColor,
 } from 'enso-common/src/services/Backend'
 
-import { Radio, RadioGroupProps } from '#/components/aria'
+import { Radio, type RadioGroupProps } from '#/components/aria'
 import FocusRing from '#/components/styled/FocusRing'
 import RadioGroup from '#/components/styled/RadioGroup'
 import { useHandleFocusMove } from '#/hooks/focusHooks'
diff --git a/app/gui/src/dashboard/components/EditableSpan.tsx b/app/gui/src/dashboard/components/EditableSpan.tsx
index 39e486abbc39..d6c50482c39f 100644
--- a/app/gui/src/dashboard/components/EditableSpan.tsx
+++ b/app/gui/src/dashboard/components/EditableSpan.tsx
@@ -12,23 +12,25 @@ import * as textProvider from '#/providers/TextProvider'
 import * as aria from '#/components/aria'
 import * as ariaComponents from '#/components/AriaComponents'
 
-import * as eventModule from '#/utilities/event'
 import * as sanitizedEventTargets from '#/utilities/sanitizedEventTargets'
 import * as tailwindMerge from '#/utilities/tailwindMerge'
 
 import { useAutoFocus } from '#/hooks/autoFocusHooks'
 import { useSyncRef } from '#/hooks/syncRefHooks'
 
-// =================
-// === Constants ===
-// =================
+/**
+ * Search for an ancestor `form` element and try to submit it.
+ * @deprecated
+ */
+function submitForm(event: { readonly target: Element }) {
+  const closestForm = event.target.closest('form')
+  if (closestForm != null) {
+    closestForm.requestSubmit()
+  }
+}
 
 const WIDTH_CLASS_NAME = 'max-w-60'
 
-// ====================
-// === EditableSpan ===
-// ====================
-
 /** Props for an {@link EditableSpan}. */
 export interface EditableSpanProps {
   readonly 'data-testid'?: string
@@ -145,7 +147,7 @@ export default function EditableSpan(props: EditableSpanProps) {
                 variant="ghost"
                 icon={TickIcon}
                 aria-label={getText('confirmEdit')}
-                onPress={eventModule.submitForm}
+                onPress={submitForm}
               />
             )}
             <ariaComponents.Button
diff --git a/app/gui/src/dashboard/components/ErrorBoundary.tsx b/app/gui/src/dashboard/components/ErrorBoundary.tsx
index ee5dc324d4dc..7e27b1b36f7b 100644
--- a/app/gui/src/dashboard/components/ErrorBoundary.tsx
+++ b/app/gui/src/dashboard/components/ErrorBoundary.tsx
@@ -1,25 +1,22 @@
 /** @file Catches errors in child components. */
-import * as React from 'react'
+import type { JSX, PropsWithChildren } from 'react'
 
-import * as sentry from '@sentry/react'
-import * as reactQuery from '@tanstack/react-query'
-import * as errorBoundary from 'react-error-boundary'
+import { captureException } from '@sentry/react'
+import { QueryErrorResetBoundary } from '@tanstack/react-query'
+import {
+  ErrorBoundary as ReactErrorBoundary,
+  type FallbackProps,
+  type ErrorBoundaryProps as ReactErrorBoundaryProps,
+} from 'react-error-boundary'
 
-import * as detect from 'enso-common/src/detect'
-
-import * as offlineHooks from '#/hooks/offlineHooks'
-
-import * as textProvider from '#/providers/TextProvider'
-
-import * as ariaComponents from '#/components/AriaComponents'
-import * as result from '#/components/Result'
+import { IS_DEV_MODE } from 'enso-common/src/detect'
+import { getMessageOrToString, tryGetStack } from 'enso-common/src/utilities/error'
 
+import { Alert, Button, ButtonGroup, Separator, Text } from '#/components/AriaComponents'
+import { Result, type ResultProps } from '#/components/Result'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import * as errorUtils from '#/utilities/error'
-
-// =====================
-// === ErrorBoundary ===
-// =====================
+import { useOffline } from '#/hooks/offlineHooks'
+import { useText } from '#/providers/TextProvider'
 
 /** Arguments for the {@link ErrorBoundaryProps.onBeforeFallbackShown} callback. */
 export interface OnBeforeFallbackShownArgs {
@@ -30,12 +27,9 @@ export interface OnBeforeFallbackShownArgs {
 
 /** Props for an {@link ErrorBoundary}. */
 export interface ErrorBoundaryProps
-  extends Readonly<React.PropsWithChildren>,
+  extends Readonly<PropsWithChildren>,
     Readonly<
-      Pick<
-        errorBoundary.ErrorBoundaryProps,
-        'FallbackComponent' | 'onError' | 'onReset' | 'resetKeys'
-      >
+      Pick<ReactErrorBoundaryProps, 'FallbackComponent' | 'onError' | 'onReset' | 'resetKeys'>
     > {
   /** Called before the fallback is shown. */
   readonly onBeforeFallbackShown?: (args: OnBeforeFallbackShownArgs) => void
@@ -60,9 +54,9 @@ export function ErrorBoundary(props: ErrorBoundaryProps) {
   } = props
 
   return (
-    <reactQuery.QueryErrorResetBoundary>
+    <QueryErrorResetBoundary>
       {({ reset }) => (
-        <errorBoundary.ErrorBoundary
+        <ReactErrorBoundary
           FallbackComponent={(fallbackProps) => (
             <FallbackComponent
               {...fallbackProps}
@@ -73,7 +67,7 @@ export function ErrorBoundary(props: ErrorBoundaryProps) {
             />
           )}
           onError={(error, info) => {
-            sentry.captureException(error, { extra: { info } })
+            captureException(error, { extra: { info } })
             onError(error, info)
           }}
           onReset={(details) => {
@@ -83,13 +77,13 @@ export function ErrorBoundary(props: ErrorBoundaryProps) {
           {...rest}
         />
       )}
-    </reactQuery.QueryErrorResetBoundary>
+    </QueryErrorResetBoundary>
   )
 }
 
 /** Props for a {@link ErrorDisplay}. */
-export interface ErrorDisplayProps extends errorBoundary.FallbackProps {
-  readonly status?: result.ResultProps['status']
+export interface ErrorDisplayProps extends FallbackProps {
+  readonly status?: ResultProps['status']
   readonly onBeforeFallbackShown?: (args: OnBeforeFallbackShownArgs) => void
   readonly resetQueries?: () => void
   readonly title?: string | undefined
@@ -98,9 +92,9 @@ export interface ErrorDisplayProps extends errorBoundary.FallbackProps {
 }
 
 /** Default fallback component to show when there is an error. */
-export function ErrorDisplay(props: ErrorDisplayProps): React.JSX.Element {
-  const { getText } = textProvider.useText()
-  const { isOffline } = offlineHooks.useOffline()
+export function ErrorDisplay(props: ErrorDisplayProps): JSX.Element {
+  const { getText } = useText()
+  const { isOffline } = useOffline()
 
   const {
     error,
@@ -112,8 +106,8 @@ export function ErrorDisplay(props: ErrorDisplayProps): React.JSX.Element {
     resetQueries = () => {},
   } = props
 
-  const message = errorUtils.getMessageOrToString(error)
-  const stack = errorUtils.tryGetStack(error)
+  const message = getMessageOrToString(error)
+  const stack = tryGetStack(error)
 
   onBeforeFallbackShown?.({ error, resetErrorBoundary, resetQueries })
 
@@ -122,48 +116,42 @@ export function ErrorDisplay(props: ErrorDisplayProps): React.JSX.Element {
   })
 
   return (
-    <result.Result className="h-full" status={status} title={title} subtitle={subtitle}>
-      <ariaComponents.ButtonGroup align="center">
-        <ariaComponents.Button
-          variant="submit"
-          size="small"
-          rounded="full"
-          className="w-24"
-          onPress={onReset}
-        >
+    <Result className="h-full" status={status} title={title} subtitle={subtitle}>
+      <ButtonGroup align="center">
+        <Button variant="submit" size="small" rounded="full" className="w-24" onPress={onReset}>
           {getText('tryAgain')}
-        </ariaComponents.Button>
-      </ariaComponents.ButtonGroup>
+        </Button>
+      </ButtonGroup>
 
-      {detect.IS_DEV_MODE && stack != null && (
+      {IS_DEV_MODE && stack != null && (
         <div className="mt-6">
-          <ariaComponents.Separator className="my-2" />
+          <Separator className="my-2" />
 
-          <ariaComponents.Text color="primary" variant="h1" className="text-start">
+          <Text color="primary" variant="h1" className="text-start">
             {getText('developerInfo')}
-          </ariaComponents.Text>
+          </Text>
 
-          <ariaComponents.Text color="danger" variant="body">
+          <Text color="danger" variant="body">
             {getText('errorColon')}
             {message}
-          </ariaComponents.Text>
+          </Text>
 
-          <ariaComponents.Alert
+          <Alert
             className="mx-auto mt-2 max-h-[80vh] max-w-screen-lg overflow-auto"
             variant="neutral"
           >
-            <ariaComponents.Text
+            <Text
               elementType="pre"
               className="whitespace-pre-wrap text-left"
               color="primary"
               variant="body"
             >
               {stack}
-            </ariaComponents.Text>
-          </ariaComponents.Alert>
+            </Text>
+          </Alert>
         </div>
       )}
-    </result.Result>
+    </Result>
   )
 }
 
diff --git a/app/gui/src/dashboard/components/dashboard/DatalinkInput.tsx b/app/gui/src/dashboard/components/dashboard/DatalinkInput.tsx
index 89605b4ee2ef..0ad8c86bbd8f 100644
--- a/app/gui/src/dashboard/components/dashboard/DatalinkInput.tsx
+++ b/app/gui/src/dashboard/components/dashboard/DatalinkInput.tsx
@@ -1,37 +1,24 @@
 /** @file A dynamic wizard for creating an arbitrary type of Datalink. */
-import SCHEMA from '#/data/datalinkSchema.json' with { type: 'json' }
-import * as datalinkValidator from '#/data/datalinkValidator'
-
-import type * as jsonSchemaInput from '#/components/JSONSchemaInput'
-import JSONSchemaInput from '#/components/JSONSchemaInput'
+import { assert } from 'enso-common/src/utilities/error'
 
 import { FieldError } from '#/components/aria'
 import type { FieldPath, FormInstance, TSchema } from '#/components/AriaComponents'
 import { Form } from '#/components/AriaComponents'
-import * as error from '#/utilities/error'
-
-// =================
-// === Constants ===
-// =================
+import type * as jsonSchemaInput from '#/components/JSONSchemaInput'
+import JSONSchemaInput from '#/components/JSONSchemaInput'
+import SCHEMA from '#/data/datalinkSchema.json' with { type: 'json' }
+import * as datalinkValidator from '#/data/datalinkValidator'
 
 const DEFS: Record<string, object> = SCHEMA.$defs
 
-// ====================
-// === getValidator ===
-// ====================
-
 /**
  * Get a known schema using a path.
  * @throws {Error} when there is no schema present at the given path.
  */
 function getValidator(path: string) {
-  return error.assert<(value: unknown) => boolean>(() => datalinkValidator.AJV.getSchema(path))
+  return assert<(value: unknown) => boolean>(() => datalinkValidator.AJV.getSchema(path))
 }
 
-// =====================
-// === DataLinkInput ===
-// =====================
-
 /** Props for a {@link DatalinkInput}. */
 export type DatalinkInputProps = Omit<
   jsonSchemaInput.JSONSchemaInputProps,
diff --git a/app/gui/src/dashboard/hooks/measureHooks.ts b/app/gui/src/dashboard/hooks/measureHooks.ts
index 26f6f8296418..23587a56be65 100644
--- a/app/gui/src/dashboard/hooks/measureHooks.ts
+++ b/app/gui/src/dashboard/hooks/measureHooks.ts
@@ -3,10 +3,12 @@
  *
  * This file contains the useMeasure hook, which is used to measure the size and position of an element.
  */
+import { useEffect, useRef, useState } from 'react'
+
 import { frame, useMotionValue } from 'framer-motion'
 
-import { useEffect, useRef, useState } from 'react'
-import { unsafeMutable } from '../utilities/object'
+import { unsafeMutable } from 'enso-common/src/utilities/data/object'
+
 import { useDebouncedCallback } from './debounceCallbackHooks'
 import { useEventCallback } from './eventCallbackHooks'
 import { useUnmount } from './unmountHooks'
diff --git a/app/gui/src/dashboard/hooks/setAssetHooks.ts b/app/gui/src/dashboard/hooks/setAssetHooks.ts
index 0a7930acdb0e..75f169eeff92 100644
--- a/app/gui/src/dashboard/hooks/setAssetHooks.ts
+++ b/app/gui/src/dashboard/hooks/setAssetHooks.ts
@@ -2,7 +2,7 @@
  * @file A hook that turns a `set` function for an {@link AssetTreeNode} to a `set` function
  * on its item, for a specific type of item.
  */
-import { Dispatch, SetStateAction, useCallback } from 'react'
+import { useCallback, type Dispatch, type SetStateAction } from 'react'
 
 import type { AnyAsset } from 'enso-common/src/services/Backend'
 
diff --git a/app/gui/src/dashboard/hooks/storeHooks.ts b/app/gui/src/dashboard/hooks/storeHooks.ts
index da9298e84978..c2e8b9845713 100644
--- a/app/gui/src/dashboard/hooks/storeHooks.ts
+++ b/app/gui/src/dashboard/hooks/storeHooks.ts
@@ -3,23 +3,26 @@
  *
  * This file contains hooks for using Zustand store with tearing transitions.
  */
-import type { DispatchWithoutAction, Reducer, RefObject } from 'react'
-import { useEffect, useReducer, useRef } from 'react'
-import { type StoreApi } from 'zustand'
+import {
+  useEffect,
+  useReducer,
+  useRef,
+  type DispatchWithoutAction,
+  type Reducer,
+  type RefObject,
+} from 'react'
+import type { StoreApi } from 'zustand'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
-import { objectEquality, refEquality, shallowEquality } from '../utilities/equalities'
+
+import { objectEquality, refEquality, shallowEquality } from 'enso-common/src/utilities/equalities'
 
 /**
  * A type that allows to choose between different equality functions.
  */
 export type AreEqual<T> = EqualityFunction<T> | EqualityFunctionName
-/**
- * Custom equality function.
- */
+/** Custom equality function. */
 export type EqualityFunction<T> = (a: T, b: T) => boolean
-/**
- * Equality function name from a list of predefined ones.
- */
+/** Equality function name from a list of predefined ones. */
 export type EqualityFunctionName = 'object' | 'shallow' | 'strict'
 
 const EQUALITY_FUNCTIONS: Record<EqualityFunctionName, (a: unknown, b: unknown) => boolean> = {
diff --git a/app/gui/src/dashboard/hooks/toastAndLogHooks.ts b/app/gui/src/dashboard/hooks/toastAndLogHooks.ts
index af684ba3651c..322c87903476 100644
--- a/app/gui/src/dashboard/hooks/toastAndLogHooks.ts
+++ b/app/gui/src/dashboard/hooks/toastAndLogHooks.ts
@@ -1,47 +1,39 @@
 /** @file */
-import * as toastify from 'react-toastify'
+import { toast, type Id } from 'react-toastify'
 
-import type * as text from 'enso-common/src/text'
+import type { Replacements, TextId } from 'enso-common/src/text'
 
-import * as loggerProvider from '#/providers/LoggerProvider'
-import * as textProvider from '#/providers/TextProvider'
+import { useLogger } from '#/providers/LoggerProvider'
+import { useText } from '#/providers/TextProvider'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import * as errorModule from '#/utilities/error'
-
-// ===========================
-// === ToastAndLogCallback ===
-// ===========================
+import { getMessageOrToString, type MustNotBeKnown } from 'enso-common/src/utilities/error'
 
 /** The type of the `toastAndLog` function returned by {@link useToastAndLog}. */
 export type ToastAndLogCallback = ReturnType<typeof useToastAndLog>
 
-// ======================
-// === useToastAndLog ===
-// ======================
-
 /**
  * Return a function to send a toast with rendered error message. The same message is also logged
  * as an error.
  */
 export function useToastAndLogWithId() {
-  const { getText } = textProvider.useText()
-  const logger = loggerProvider.useLogger()
+  const { getText } = useText()
+  const logger = useLogger()
 
   return useEventCallback(
-    <K extends text.TextId, T>(
-      toastId: toastify.Id,
+    <K extends TextId, T>(
+      toastId: Id,
       textId: K | null,
-      ...[error, ...replacements]: text.Replacements[K] extends readonly [] ?
-        [error?: Error | errorModule.MustNotBeKnown<T>]
-      : [error: Error | errorModule.MustNotBeKnown<T> | null, ...replacements: text.Replacements[K]]
+      ...[error, ...replacements]: Replacements[K] extends readonly [] ?
+        [error?: Error | MustNotBeKnown<T>]
+      : [error: Error | MustNotBeKnown<T> | null, ...replacements: Replacements[K]]
     ) => {
       const messagePrefix =
         textId == null ? null
           // This is SAFE, as `replacements` is only `[]` if it was already `[]`.
           // See the above conditional type.
           // eslint-disable-next-line no-restricted-syntax
-        : getText(textId, ...(replacements as text.Replacements[K]))
+        : getText(textId, ...(replacements as Replacements[K]))
       const message =
         error == null ?
           `${messagePrefix ?? ''}.`
@@ -50,8 +42,8 @@ export function useToastAndLogWithId() {
           // `MustNotBeKnown<T>`.
         : `${
             messagePrefix != null ? messagePrefix + ': ' : ''
-          }${errorModule.getMessageOrToString<unknown>(error)}`
-      toastify.toast.update(toastId, {
+          }${getMessageOrToString<unknown>(error)}`
+      toast.update(toastId, {
         type: 'error',
         render: message,
         isLoading: false,
@@ -67,22 +59,22 @@ export function useToastAndLogWithId() {
  * as an error.
  */
 export function useToastAndLog() {
-  const { getText } = textProvider.useText()
-  const logger = loggerProvider.useLogger()
+  const { getText } = useText()
+  const logger = useLogger()
 
   return useEventCallback(
-    <K extends text.TextId, T>(
+    <K extends TextId, T>(
       textId: K | null,
-      ...[error, ...replacements]: text.Replacements[K] extends readonly [] ?
-        [error?: Error | errorModule.MustNotBeKnown<T>]
-      : [error: Error | errorModule.MustNotBeKnown<T> | null, ...replacements: text.Replacements[K]]
+      ...[error, ...replacements]: Replacements[K] extends readonly [] ?
+        [error?: Error | MustNotBeKnown<T>]
+      : [error: Error | MustNotBeKnown<T> | null, ...replacements: Replacements[K]]
     ) => {
       const messagePrefix =
         textId == null ? null
           // This is SAFE, as `replacements` is only `[]` if it was already `[]`.
           // See the above conditional type.
           // eslint-disable-next-line no-restricted-syntax
-        : getText(textId, ...(replacements as text.Replacements[K]))
+        : getText(textId, ...(replacements as Replacements[K]))
       const message =
         error == null ?
           `${messagePrefix ?? ''}.`
@@ -91,8 +83,8 @@ export function useToastAndLog() {
           // `MustNotBeKnown<T>`.
         : `${
             messagePrefix != null ? messagePrefix + ': ' : ''
-          }${errorModule.getMessageOrToString<unknown>(error)}`
-      const id = toastify.toast.error(message)
+          }${getMessageOrToString<unknown>(error)}`
+      const id = toast.error(message)
       logger.error(message)
       return id
     },

From cfe0306221b95367aa6f8a4a9518b3eaaa0b4c06 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Sat, 14 Dec 2024 03:17:57 +1000
Subject: [PATCH 06/15] Switch back to namespace import for `iter`

---
 .../utilities/data/__tests__/iterator.test.ts | 47 +++++++------------
 1 file changed, 18 insertions(+), 29 deletions(-)

diff --git a/app/common/src/utilities/data/__tests__/iterator.test.ts b/app/common/src/utilities/data/__tests__/iterator.test.ts
index 9fd5ba9398bb..2e686c58243f 100644
--- a/app/common/src/utilities/data/__tests__/iterator.test.ts
+++ b/app/common/src/utilities/data/__tests__/iterator.test.ts
@@ -1,17 +1,6 @@
 import { expect, test } from 'vitest'
 
-import {
-  chain,
-  count as countFn,
-  empty,
-  filter,
-  filterDefined,
-  last as lastFn,
-  range,
-  tryGetSoleValue,
-  zip,
-  zipLongest,
-} from '../iter'
+import * as iter from '../iter'
 
 interface IteratorCase<T> {
   iterable: Iterable<T>
@@ -24,42 +13,42 @@ interface IteratorCase<T> {
 function makeCases(): IteratorCase<unknown>[] {
   return [
     {
-      iterable: empty(),
+      iterable: iter.empty(),
       soleValue: undefined,
       first: undefined,
       last: undefined,
       count: 0,
     },
     {
-      iterable: chain(empty(), empty()),
+      iterable: iter.chain(iter.empty(), iter.empty()),
       soleValue: undefined,
       first: undefined,
       last: undefined,
       count: 0,
     },
     {
-      iterable: chain(empty(), ['a'], empty()),
+      iterable: iter.chain(iter.empty(), ['a'], iter.empty()),
       soleValue: 'a',
       first: 'a',
       last: 'a',
       count: 1,
     },
     {
-      iterable: range(10, 11),
+      iterable: iter.range(10, 11),
       soleValue: 10,
       first: 10,
       last: 10,
       count: 1,
     },
     {
-      iterable: range(10, 20),
+      iterable: iter.range(10, 20),
       soleValue: undefined,
       first: 10,
       last: 19,
       count: 10,
     },
     {
-      iterable: range(20, 10),
+      iterable: iter.range(20, 10),
       soleValue: undefined,
       first: 20,
       last: 11,
@@ -87,56 +76,56 @@ function makeCases(): IteratorCase<unknown>[] {
       count: 2,
     },
     {
-      iterable: filterDefined([undefined, 'a', undefined, 'b', undefined]),
+      iterable: iter.filterDefined([undefined, 'a', undefined, 'b', undefined]),
       soleValue: undefined,
       first: 'a',
       last: 'b',
       count: 2,
     },
     {
-      iterable: filter([7, 'a', 8, 'b', 9], el => typeof el === 'string'),
+      iterable: iter.filter([7, 'a', 8, 'b', 9], el => typeof el === 'string'),
       soleValue: undefined,
       first: 'a',
       last: 'b',
       count: 2,
     },
     {
-      iterable: zip(['a', 'b'], range(1, 2)),
+      iterable: iter.zip(['a', 'b'], iter.range(1, 2)),
       soleValue: ['a', 1],
       first: ['a', 1],
       last: ['a', 1],
       count: 1,
     },
     {
-      iterable: zip(['a', 'b'], range(1, 3)),
+      iterable: iter.zip(['a', 'b'], iter.range(1, 3)),
       soleValue: undefined,
       first: ['a', 1],
       last: ['b', 2],
       count: 2,
     },
     {
-      iterable: zip(['a', 'b'], range(1, 4)),
+      iterable: iter.zip(['a', 'b'], iter.range(1, 4)),
       soleValue: undefined,
       first: ['a', 1],
       last: ['b', 2],
       count: 2,
     },
     {
-      iterable: zipLongest(['a', 'b'], range(1, 2)),
+      iterable: iter.zipLongest(['a', 'b'], iter.range(1, 2)),
       soleValue: undefined,
       first: ['a', 1],
       last: ['b', undefined],
       count: 2,
     },
     {
-      iterable: zipLongest(['a', 'b'], range(1, 3)),
+      iterable: iter.zipLongest(['a', 'b'], iter.range(1, 3)),
       soleValue: undefined,
       first: ['a', 1],
       last: ['b', 2],
       count: 2,
     },
     {
-      iterable: zipLongest(['a', 'b'], range(1, 4)),
+      iterable: iter.zipLongest(['a', 'b'], iter.range(1, 4)),
       soleValue: undefined,
       first: ['a', 1],
       last: [undefined, 3],
@@ -146,13 +135,13 @@ function makeCases(): IteratorCase<unknown>[] {
 }
 
 test.each(makeCases())('tryGetSoleValue: case %#', ({ iterable, soleValue }) => {
-  expect(tryGetSoleValue(iterable)).toEqual(soleValue)
+  expect(iter.tryGetSoleValue(iterable)).toEqual(soleValue)
 })
 
 test.each(makeCases())('last: case %#', ({ iterable, last }) => {
-  expect(lastFn(iterable)).toEqual(last)
+  expect(iter.last(iterable)).toEqual(last)
 })
 
 test.each(makeCases())('count: case %#', ({ iterable, count }) => {
-  expect(countFn(iterable)).toEqual(count)
+  expect(iter.count(iterable)).toEqual(count)
 })

From 78822e3ee7b1d8e465955b5b9d5dce6b0df8a928 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Sat, 14 Dec 2024 04:02:54 +1000
Subject: [PATCH 07/15] Move GUI-internal code to `@common`

---
 app/common/package.json                       | 44 --------------
 app/common/tsconfig.json                      |  8 ++-
 app/gui/.storybook/preview.tsx                |  2 +-
 app/gui/env.d.ts                              | 42 +------------
 .../dashboard/actions/SetupPlanPageActions.ts |  2 +-
 .../integration-test/dashboard/actions/api.ts | 10 ++--
 .../dashboard/actions/index.ts                |  2 +-
 .../dashboard/assetPanel.spec.ts              |  4 +-
 .../dashboard/assetSearchBar.spec.ts          |  2 +-
 .../dashboard/contextMenus.spec.ts            |  2 +-
 .../integration-test/dashboard/labels.spec.ts |  2 +-
 .../dashboard/organizationSettings.spec.ts    |  2 +-
 .../integration-test/dashboard/setup.spec.ts  |  2 +-
 .../integration-test/dashboard/sort.spec.ts   |  2 +-
 app/gui/package.json                          |  5 +-
 .../src/common}/services/Backend.ts           |  8 +--
 .../services/__tests__/Backend.test.ts        |  0
 .../common/services/tanstackQuery/client.ts}  | 17 ++----
 .../common/services/tanstackQuery/query.ts}   |  6 +-
 .../src => gui/src/common}/text/english.json  |  0
 .../src => gui/src/common}/text/index.ts      |  0
 .../common}/utilities/__tests__/error.test.ts |  0
 .../src/common}/utilities/convertCSSUnits.ts  |  0
 .../utilities/data/__tests__/array.test.ts    |  0
 .../utilities/data/__tests__/dateTime.test.ts |  0
 .../utilities/data/__tests__/email.test.ts    |  0
 .../utilities/data/__tests__/fileInfo.test.ts |  0
 .../utilities/data/__tests__/iter.test.ts}    |  2 +-
 .../utilities/data/__tests__/set.test.ts      |  0
 .../src/common}/utilities/data/array.ts       | 14 +----
 .../src/common}/utilities/data/dateTime.ts    |  2 +-
 .../src/common}/utilities/data/email.ts       |  0
 .../src/common}/utilities/data/fileInfo.ts    |  0
 .../src/common}/utilities/data/iter.ts        |  0
 .../src/common}/utilities/data/newtype.ts     |  0
 .../src/common}/utilities/data/nullable.ts    |  0
 .../src/common}/utilities/data/object.ts      | 60 +------------------
 .../src/common}/utilities/data/path.ts        |  2 +-
 .../src/common}/utilities/data/set.ts         |  0
 .../src/common}/utilities/data/string.ts      |  0
 .../src/common/utilities}/detect.ts           |  0
 .../src/common}/utilities/download.ts         |  0
 .../src/common}/utilities/equalities.ts       |  0
 .../src => gui/src/common}/utilities/error.ts |  0
 .../src/common}/utilities/functions.ts        |  0
 .../src/common}/utilities/github.ts           |  6 +-
 .../src => gui/src/common/utilities}/gtag.ts  |  0
 .../src => gui/src/common}/utilities/input.ts |  0
 .../src => gui/src/common/utilities}/load.ts  |  0
 .../src/common}/utilities/permissions.ts      |  2 +-
 .../utilities/style/__tests__/tabBar.test.ts  |  0
 .../src/common}/utilities/style/tabBar.ts     |  0
 .../src/common}/utilities/uniqueString.ts     |  0
 app/gui/src/dashboard/App.tsx                 |  6 +-
 .../src/dashboard/authentication/cognito.ts   |  4 +-
 .../src/dashboard/authentication/service.ts   |  2 +-
 .../AriaComponents/Button/CloseButton.tsx     |  2 +-
 .../AriaComponents/Checkbox/CheckboxGroup.tsx |  2 +-
 .../AriaComponents/Form/components/useForm.ts |  2 +-
 .../AriaComponents/Inputs/Input/Input.tsx     |  2 +-
 .../Inputs/MultiSelector/MultiSelector.tsx    |  2 +-
 .../Inputs/OTPInput/OTPInput.tsx              |  2 +-
 .../AriaComponents/Radio/RadioGroup.tsx       |  2 +-
 .../src/dashboard/components/ColorPicker.tsx  |  2 +-
 .../src/dashboard/components/ContextMenu.tsx  |  2 +-
 .../components/Devtools/EnsoDevtools.tsx      |  4 +-
 .../Devtools/EnsoDevtoolsProvider.tsx         |  4 +-
 .../dashboard/components/ErrorBoundary.tsx    |  4 +-
 .../dashboard/components/JSONSchemaInput.tsx  |  2 +-
 .../src/dashboard/components/MenuEntry.tsx    |  4 +-
 .../components/PaywallBulletPoints.tsx        |  2 +-
 app/gui/src/dashboard/components/aria.tsx     |  2 +-
 .../components/dashboard/AssetIcon.tsx        |  2 +-
 .../components/dashboard/AssetRow.tsx         |  8 +--
 .../dashboard/AssetRow/assetRowUtils.tsx      |  2 +-
 .../components/dashboard/AssetSummary.tsx     |  4 +-
 .../components/dashboard/DatalinkInput.tsx    |  2 +-
 .../dashboard/DatalinkNameColumn.tsx          |  4 +-
 .../dashboard/DirectoryNameColumn.tsx         |  6 +-
 .../components/dashboard/FileNameColumn.tsx   |  6 +-
 .../components/dashboard/KeyboardShortcut.tsx |  4 +-
 .../dashboard/components/dashboard/Label.tsx  |  2 +-
 .../components/dashboard/Permission.tsx       |  6 +-
 .../dashboard/PermissionSelector.tsx          |  2 +-
 .../dashboard/PermissionTypeSelector.tsx      |  2 +-
 .../components/dashboard/ProjectIcon.tsx      |  2 +-
 .../dashboard/ProjectNameColumn.tsx           |  8 +--
 .../components/dashboard/SecretNameColumn.tsx |  4 +-
 .../dashboard/components/dashboard/column.ts  |  2 +-
 .../dashboard/column/LabelsColumn.tsx         |  2 +-
 .../dashboard/column/ModifiedColumn.tsx       |  2 +-
 .../dashboard/column/NameColumn.tsx           |  2 +-
 .../dashboard/column/SharedWithColumn.tsx     |  2 +-
 .../dashboard/column/columnUtils.ts           |  4 +-
 .../dashboard/components/styled/FocusArea.tsx |  2 +-
 .../dashboard/components/styled/FocusRoot.tsx |  2 +-
 .../dashboard/configurations/inputBindings.ts |  2 +-
 .../src/dashboard/data/datalinkValidator.ts   |  2 +-
 app/gui/src/dashboard/events/assetEvent.ts    |  2 +-
 .../src/dashboard/events/assetListEvent.ts    |  2 +-
 app/gui/src/dashboard/hooks/backendHooks.tsx  | 12 ++--
 .../hooks/billing/FeaturesConfiguration.ts    |  4 +-
 .../dashboard/hooks/billing/paywallHooks.ts   |  2 +-
 app/gui/src/dashboard/hooks/gtagHooks.ts      |  2 +-
 app/gui/src/dashboard/hooks/measureHooks.ts   |  2 +-
 app/gui/src/dashboard/hooks/projectHooks.ts   |  4 +-
 app/gui/src/dashboard/hooks/setAssetHooks.ts  |  2 +-
 .../src/dashboard/hooks/spotlightHooks.tsx    |  2 +-
 app/gui/src/dashboard/hooks/storeHooks.ts     |  2 +-
 .../src/dashboard/hooks/toastAndLogHooks.ts   |  4 +-
 app/gui/src/dashboard/index.tsx               |  2 +-
 .../dashboard/layouts/AssetContextMenu.tsx    |  8 +--
 .../layouts/AssetDiffView/AssetDiffView.tsx   |  2 +-
 .../AssetDiffView/useFetchVersionContent.ts   |  2 +-
 .../dashboard/layouts/AssetDocs/AssetDocs.tsx |  2 +-
 .../layouts/AssetPanel/AssetPanel.tsx         |  2 +-
 .../layouts/AssetPanel/AssetPanelState.ts     |  2 +-
 .../dashboard/layouts/AssetProjectSession.tsx |  4 +-
 .../layouts/AssetProjectSessions.tsx          |  7 +--
 .../src/dashboard/layouts/AssetProperties.tsx |  6 +-
 .../src/dashboard/layouts/AssetSearchBar.tsx  |  8 +--
 .../layouts/AssetVersions/AssetVersion.tsx    |  4 +-
 .../layouts/AssetVersions/AssetVersions.tsx   |  8 +--
 .../layouts/AssetVersions/useAssetVersions.ts |  2 +-
 app/gui/src/dashboard/layouts/AssetsTable.tsx | 12 ++--
 .../layouts/AssetsTableContextMenu.tsx        |  4 +-
 .../dashboard/layouts/CategorySwitcher.tsx    |  4 +-
 .../layouts/CategorySwitcher/Category.ts      |  2 +-
 app/gui/src/dashboard/layouts/Chat.tsx        |  6 +-
 app/gui/src/dashboard/layouts/Drive.tsx       |  6 +-
 .../layouts/Drive/assetTreeHooks.tsx          |  4 +-
 .../layouts/Drive/assetsTableItemsHooks.tsx   | 10 ++--
 .../layouts/Drive/directoryIdsHooks.tsx       |  2 +-
 app/gui/src/dashboard/layouts/DriveBar.tsx    |  4 +-
 app/gui/src/dashboard/layouts/Editor.tsx      |  2 +-
 .../dashboard/layouts/GlobalContextMenu.tsx   |  4 +-
 app/gui/src/dashboard/layouts/Labels.tsx      |  4 +-
 .../Settings/ActivityLogSettingsSection.tsx   |  4 +-
 .../KeyboardShortcutsSettingsSection.tsx      |  2 +-
 .../Settings/MembersSettingsSection.tsx       |  2 +-
 .../layouts/Settings/MembersTable.tsx         |  2 +-
 .../OrganizationProfilePictureInput.tsx       |  2 +-
 .../layouts/Settings/ProfilePictureInput.tsx  |  2 +-
 .../layouts/Settings/UserGroupRow.tsx         |  2 +-
 .../layouts/Settings/UserGroupUserRow.tsx     |  2 +-
 .../Settings/UserGroupsSettingsSection.tsx    |  2 +-
 .../dashboard/layouts/Settings/UserRow.tsx    |  2 +-
 .../src/dashboard/layouts/Settings/data.tsx   |  8 +--
 .../src/dashboard/layouts/Settings/index.tsx  |  6 +-
 app/gui/src/dashboard/layouts/TabBar.tsx      |  4 +-
 app/gui/src/dashboard/layouts/UserBar.tsx     |  2 +-
 app/gui/src/dashboard/layouts/UserMenu.tsx    |  6 +-
 .../src/dashboard/layouts/VersionChecker.tsx  |  6 +-
 app/gui/src/dashboard/modals/AboutModal.tsx   |  2 +-
 .../modals/CaptureKeyboardShortcutModal.tsx   |  2 +-
 .../dashboard/modals/DuplicateAssetsModal.tsx |  6 +-
 .../InviteUsersModal/InviteUsersForm.tsx      |  4 +-
 .../InviteUsersModal/InviteUsersModal.tsx     |  2 +-
 .../dashboard/modals/ManageLabelsModal.tsx    |  4 +-
 .../modals/ManagePermissionsModal.tsx         |  2 +-
 .../src/dashboard/modals/NewLabelModal.tsx    |  4 +-
 .../dashboard/modals/NewUserGroupModal.tsx    |  4 +-
 .../src/dashboard/modals/ProjectLogsModal.tsx |  2 +-
 .../SetupOrganizationAfterSubscribe.tsx       |  2 +-
 .../dashboard/modals/UpsertSecretModal.tsx    |  2 +-
 .../payments/api/useSubscriptionPrice.ts      |  2 +-
 .../components/PlanSelector/PlanSelector.tsx  |  2 +-
 .../PlanSelector/components/Card.tsx          |  2 +-
 .../components/PlanSelectorDialog.tsx         |  2 +-
 .../PlanSelector/getComponentForPlan.tsx      |  4 +-
 .../dashboard/modules/payments/constants.ts   |  4 +-
 .../pages/authentication/ErrorScreen.tsx      |  2 +-
 .../dashboard/pages/authentication/Login.tsx  |  2 +-
 .../pages/authentication/Setup/Setup.tsx      |  4 +-
 .../dashboard/pages/dashboard/Dashboard.tsx   |  6 +-
 .../pages/dashboard/DashboardTabBar.tsx       |  4 +-
 .../pages/dashboard/DashboardTabPanels.tsx    |  2 +-
 .../pages/subscribe/Subscribe/Subscribe.tsx   |  2 +-
 .../pages/subscribe/SubscribeSuccess.tsx      |  2 +-
 .../src/dashboard/providers/AuthProvider.tsx  |  8 +--
 .../dashboard/providers/BackendProvider.tsx   |  2 +-
 .../src/dashboard/providers/DriveProvider.tsx | 11 +---
 .../dashboard/providers/ProjectsProvider.tsx  |  4 +-
 .../dashboard/providers/SessionProvider.tsx   |  2 +-
 .../src/dashboard/providers/TextProvider.tsx  | 10 +---
 .../providers/__test__/DriveProvider.test.tsx |  2 +-
 .../__test__/SessionProvider.test.tsx         |  2 +-
 app/gui/src/dashboard/services/Chat.ts        |  2 +-
 .../src/dashboard/services/LocalBackend.ts    | 12 ++--
 .../src/dashboard/services/ProjectManager.ts  |  8 +--
 .../src/dashboard/services/RemoteBackend.ts   | 10 ++--
 .../dashboard/services/remoteBackendPaths.ts  |  4 +-
 app/gui/src/dashboard/test/testUtils.tsx      |  2 +-
 app/gui/src/dashboard/utilities/AssetQuery.ts |  2 +-
 .../src/dashboard/utilities/AssetTreeNode.ts  |  2 +-
 .../src/dashboard/utilities/LocalStorage.ts   |  4 +-
 .../src/dashboard/utilities/Navigator2D.ts    |  4 +-
 .../utilities/__tests__/shortcuts.test.ts     |  2 +-
 app/gui/src/dashboard/utilities/drag.ts       |  4 +-
 app/gui/src/dashboard/utilities/error.ts      |  2 +-
 app/gui/src/dashboard/utilities/event.ts      |  2 +-
 .../src/dashboard/utilities/inputBindings.ts  |  8 +--
 app/gui/src/dashboard/utilities/jsonSchema.ts |  2 +-
 .../src/dashboard/utilities/permissions.ts    |  8 +--
 .../dashboard/utilities/preventNavigation.tsx |  2 +-
 app/gui/src/entrypoint.ts                     |  4 +-
 app/gui/src/project-view/App.vue              |  2 +-
 .../components/CodeEditor/diagnostics.ts      |  2 +-
 .../components/CodeEditor/ensoSyntax.ts       |  2 +-
 .../components/ColorPickerMenu.vue            |  2 +-
 .../components/ColorRing/gradient.ts          |  2 +-
 .../__tests__/placement.test.ts               |  2 +-
 .../src/project-view/components/DockPanel.vue |  2 +-
 .../components/DocumentationPanel/ir.ts       |  2 +-
 .../project-view/components/GraphEditor.vue   |  2 +-
 .../GraphEditor/__tests__/collapsing.test.ts  |  2 +-
 .../components/GraphEditor/clipboard.ts       |  2 +-
 .../components/GraphEditor/dragging.ts        |  2 +-
 .../WidgetTableEditor/tableInputArgument.ts   |  2 +-
 .../widgets/WidgetTableEditor/tableParsing.ts |  4 +-
 .../components/VueComponentHost.vue           |  2 +-
 .../components/shared/AgGridTableView.vue     |  4 +-
 .../components/widgets/FileBrowserWidget.vue  |  9 +--
 .../src/project-view/composables/backend.ts   |  6 +-
 .../project-view/composables/nodeCreation.ts  |  2 +-
 .../src/project-view/composables/selection.ts |  2 +-
 app/gui/src/project-view/providers/backend.ts |  2 +-
 .../providers/selectionButtons.ts             |  4 +-
 .../project-view/providers/tooltipRegistry.ts |  2 +-
 .../graph/__tests__/graphDatabase.test.ts     |  2 +-
 .../stores/graph/graphDatabase.ts             |  2 +-
 .../src/project-view/stores/graph/index.ts    |  2 +-
 .../stores/graph/unconnectedEdges.ts          |  2 +-
 .../util/ast/__tests__/raw.test.ts            |  2 +-
 .../util/ast/__tests__/reactive.test.ts       |  2 +-
 app/gui/src/project-view/util/ast/extended.ts |  2 +-
 app/gui/src/project-view/util/ast/match.ts    |  2 +-
 .../src/project-view/util/codemirror/index.ts |  2 +-
 app/gui/src/project-view/util/containers.ts   |  2 +-
 app/gui/tsconfig.app.json                     |  6 +-
 app/gui/vite.config.ts                        |  1 +
 app/ide-desktop/client/tests/electronTest.ts  |  2 +-
 .../src/ast/__tests__/documentation.test.ts   |  2 +-
 app/ydoc-shared/src/ast/documentation.ts      |  2 +-
 app/ydoc-shared/src/ast/parse.ts              |  2 +-
 app/ydoc-shared/src/ast/syncToCode.ts         |  2 +-
 app/ydoc-shared/src/util/data/text.ts         |  2 +-
 pnpm-lock.yaml                                | 12 +++-
 248 files changed, 381 insertions(+), 539 deletions(-)
 rename app/{common/src => gui/src/common}/services/Backend.ts (99%)
 rename app/{common/src => gui/src/common}/services/__tests__/Backend.test.ts (100%)
 rename app/{common/src/queryClient.ts => gui/src/common/services/tanstackQuery/client.ts} (93%)
 rename app/{common/src/backendQuery.ts => gui/src/common/services/tanstackQuery/query.ts} (92%)
 rename app/{common/src => gui/src/common}/text/english.json (100%)
 rename app/{common/src => gui/src/common}/text/index.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/__tests__/error.test.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/convertCSSUnits.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/data/__tests__/array.test.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/data/__tests__/dateTime.test.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/data/__tests__/email.test.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/data/__tests__/fileInfo.test.ts (100%)
 rename app/{common/src/utilities/data/__tests__/iterator.test.ts => gui/src/common/utilities/data/__tests__/iter.test.ts} (97%)
 rename app/{common/src => gui/src/common}/utilities/data/__tests__/set.test.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/data/array.ts (90%)
 rename app/{common/src => gui/src/common}/utilities/data/dateTime.ts (97%)
 rename app/{common/src => gui/src/common}/utilities/data/email.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/data/fileInfo.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/data/iter.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/data/newtype.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/data/nullable.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/data/object.ts (85%)
 rename app/{common/src => gui/src/common}/utilities/data/path.ts (95%)
 rename app/{common/src => gui/src/common}/utilities/data/set.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/data/string.ts (100%)
 rename app/{common/src => gui/src/common/utilities}/detect.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/download.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/equalities.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/error.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/functions.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/github.ts (95%)
 rename app/{common/src => gui/src/common/utilities}/gtag.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/input.ts (100%)
 rename app/{common/src => gui/src/common/utilities}/load.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/permissions.ts (99%)
 rename app/{common/src => gui/src/common}/utilities/style/__tests__/tabBar.test.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/style/tabBar.ts (100%)
 rename app/{common/src => gui/src/common}/utilities/uniqueString.ts (100%)

diff --git a/app/common/package.json b/app/common/package.json
index 24f2e889e1f7..88ad78606892 100644
--- a/app/common/package.json
+++ b/app/common/package.json
@@ -9,53 +9,9 @@
     "./src/accessToken": "./src/accessToken.ts",
     "./src/appConfig": "./src/appConfig.js",
     "./src/buildUtils": "./src/buildUtils.js",
-    "./src/detect": "./src/detect.ts",
-    "./src/gtag": "./src/gtag.ts",
-    "./src/load": "./src/load.ts",
-    "./src/backendQuery": "./src/backendQuery.ts",
-    "./src/queryClient": "./src/queryClient.ts",
-    "./src/utilities/convertCSSUnits": "./src/utilities/convertCSSUnits.ts",
-    "./src/utilities/data/array": "./src/utilities/data/array.ts",
-    "./src/utilities/data/dateTime": "./src/utilities/data/dateTime.ts",
-    "./src/utilities/data/email": "./src/utilities/data/email.ts",
-    "./src/utilities/data/fileInfo": "./src/utilities/data/fileInfo.ts",
-    "./src/utilities/data/iter": "./src/utilities/data/iter.ts",
-    "./src/utilities/data/newtype": "./src/utilities/data/newtype.ts",
-    "./src/utilities/data/nullable": "./src/utilities/data/nullable.ts",
-    "./src/utilities/data/object": "./src/utilities/data/object.ts",
-    "./src/utilities/data/path": "./src/utilities/data/path.ts",
-    "./src/utilities/data/set": "./src/utilities/data/set.ts",
-    "./src/utilities/data/string": "./src/utilities/data/string.ts",
-    "./src/utilities/download": "./src/utilities/download.ts",
-    "./src/utilities/equalities": "./src/utilities/equalities.ts",
-    "./src/utilities/error": "./src/utilities/error.ts",
-    "./src/utilities/functions": "./src/utilities/functions.ts",
-    "./src/utilities/github": "./src/utilities/github.ts",
-    "./src/utilities/input": "./src/utilities/input.ts",
-    "./src/utilities/permissions": "./src/utilities/permissions.ts",
-    "./src/utilities/style/tabBar": "./src/utilities/style/tabBar.ts",
-    "./src/utilities/uniqueString": "./src/utilities/uniqueString.ts",
-    "./src/services/Backend": "./src/services/Backend.ts",
-    "./src/text": "./src/text/index.ts",
     "./src/types": "./src/types.d.ts"
   },
   "scripts": {
-    "test": "vitest run",
     "lint": "eslint ./src --cache --max-warnings=0"
-  },
-  "peerDependencies": {
-    "@tanstack/query-core": "5.54.1",
-    "@tanstack/vue-query": ">= 5.54.0 < 5.56.0"
-  },
-  "dependencies": {
-    "@tanstack/query-persist-client-core": "^5.54.0",
-    "@tanstack/vue-query": ">= 5.54.0 < 5.56.0",
-    "lib0": "^0.2.85",
-    "react": "^18.3.1",
-    "vitest": "^1.3.1",
-    "vue": "^3.5.2"
-  },
-  "devDependencies": {
-    "@fast-check/vitest": "^0.0.8"
   }
 }
diff --git a/app/common/tsconfig.json b/app/common/tsconfig.json
index 4837545253f3..f94fc2792ff5 100644
--- a/app/common/tsconfig.json
+++ b/app/common/tsconfig.json
@@ -6,5 +6,11 @@
     "checkJs": true,
     "skipLibCheck": false
   },
-  "include": ["./src/", "./src/text/english.json", "../types/"]
+  "include": [
+    "./src/",
+    "./src/text/english.json",
+    "../types/",
+    "../gui/src/common/services/tanstackQueryClient.ts",
+    "../gui/src/common/services/backendQuery.ts"
+  ]
 }
diff --git a/app/gui/.storybook/preview.tsx b/app/gui/.storybook/preview.tsx
index a984a548119e..b7e4b77c8035 100644
--- a/app/gui/.storybook/preview.tsx
+++ b/app/gui/.storybook/preview.tsx
@@ -9,8 +9,8 @@ import { StrictMode, useLayoutEffect, useState } from 'react'
 import invariant from 'tiny-invariant'
 import UIProviders from '../src/dashboard/components/UIProviders'
 
+import { createQueryClient } from '@common/services/tanstackQuery/client'
 import { QueryClientProvider } from '@tanstack/react-query'
-import { createQueryClient } from 'enso-common/src/queryClient'
 import { MotionGlobalConfig } from 'framer-motion'
 import z from 'zod'
 import '../src/dashboard/tailwind.css'
diff --git a/app/gui/env.d.ts b/app/gui/env.d.ts
index f7095e04d189..96cb2bfa210f 100644
--- a/app/gui/env.d.ts
+++ b/app/gui/env.d.ts
@@ -7,11 +7,7 @@
 import type * as saveAccessToken from 'enso-common/src/accessToken'
 
 // prettier-ignore
-import * as buildJson from '../../build.json' with { type: 'json' };
-
-// =============
-// === Types ===
-// =============
+import * as buildJson from '../../build.json' with { type: 'json' }
 
 /** Nested configuration options with `string` values. */
 interface StringConfig {
@@ -23,10 +19,6 @@ interface Enso {
   readonly main: (inputConfig?: StringConfig) => Promise<void>
 }
 
-// ===================
-// === Backend API ===
-// ===================
-
 /**
  * `window.backendApi` is a context bridge to the main process, when we're running in an
  * Electron context. It contains non-authentication-related functionality.
@@ -40,10 +32,6 @@ interface BackendApi {
   ) => Promise<ProjectInfo>
 }
 
-// ==========================
-// === Authentication API ===
-// ==========================
-
 /**
  * `window.authenticationApi` is a context bridge to the main process, when we're running in an
  * Electron context.
@@ -67,10 +55,6 @@ interface AuthenticationApi {
   readonly saveAccessToken: (accessToken: saveAccessToken.AccessToken | null) => void
 }
 
-// ======================
-// === Navigation API ===
-// ======================
-
 /**
  * `window.navigationApi` is a context bridge to the main process, when we're running in an
  * Electron context. It contains navigation-related functionality.
@@ -82,30 +66,18 @@ interface NavigationApi {
   readonly goForward: () => void
 }
 
-// ================
-// === Menu API ===
-// ================
-
 /** `window.menuApi` exposes functionality related to the system menu. */
 interface MenuApi {
   /** Set the callback to be called when the "about" entry is clicked in the "help" menu. */
   readonly setShowAboutModalHandler: (callback: () => void) => void
 }
 
-// ==================
-// === System API ===
-// ==================
-
 /** `window.systemApi` exposes functionality related to the operating system. */
 interface SystemApi {
   readonly downloadURL: (url: string, headers?: Record<string, string>) => void
   readonly showItemInFolder: (fullPath: string) => void
 }
 
-// ==============================
-// === Project Management API ===
-// ==============================
-
 /** Metadata for a newly imported project. */
 interface ProjectInfo {
   readonly id: string
@@ -121,10 +93,6 @@ interface ProjectManagementApi {
   readonly setOpenProjectHandler: (handler: (projectInfo: ProjectInfo) => void) => void
 }
 
-// ========================
-// === File Browser API ===
-// ========================
-
 /**
  * `window.fileBrowserApi` is a context bridge to the main process, when we're running in an
  * Electron context.
@@ -146,10 +114,6 @@ interface FileBrowserApi {
   ) => Promise<string[] | undefined>
 }
 
-// ====================
-// === Version Info ===
-// ====================
-
 /** Versions of the app, and selected software bundled with Electron. */
 interface VersionInfo {
   readonly version: string
@@ -158,10 +122,6 @@ interface VersionInfo {
   readonly chrome: string
 }
 
-// =====================================
-// === Global namespace augmentation ===
-// =====================================
-
 // JSDocs here are intentionally empty as these interfaces originate from elsewhere.
 declare global {
   // Documentation is already inherited.
diff --git a/app/gui/integration-test/dashboard/actions/SetupPlanPageActions.ts b/app/gui/integration-test/dashboard/actions/SetupPlanPageActions.ts
index cb6d9f9e6325..387f560256c1 100644
--- a/app/gui/integration-test/dashboard/actions/SetupPlanPageActions.ts
+++ b/app/gui/integration-test/dashboard/actions/SetupPlanPageActions.ts
@@ -1,6 +1,6 @@
 /** @file Actions for the second step of the "setup" page. */
 import { PLAN_TO_UPGRADE_LABEL_ID } from '#/modules/payments/constants'
-import { Plan } from 'enso-common/src/services/Backend'
+import { Plan } from '@common/services/Backend'
 import { TEXT } from '.'
 import BaseActions from './BaseActions'
 import SetupDonePageActions from './SetupDonePageActions'
diff --git a/app/gui/integration-test/dashboard/actions/api.ts b/app/gui/integration-test/dashboard/actions/api.ts
index 899200cbff52..a93984a8a46a 100644
--- a/app/gui/integration-test/dashboard/actions/api.ts
+++ b/app/gui/integration-test/dashboard/actions/api.ts
@@ -1,11 +1,11 @@
 /** @file The mock API. */
 import * as test from '@playwright/test'
 
-import * as backend from 'enso-common/src/services/Backend'
-import * as dateTime from 'enso-common/src/utilities/data/dateTime'
-import * as object from 'enso-common/src/utilities/data/object'
-import * as permissions from 'enso-common/src/utilities/permissions'
-import * as uniqueString from 'enso-common/src/utilities/uniqueString'
+import * as backend from '@common/services/Backend'
+import * as dateTime from '@common/utilities/data/dateTime'
+import * as object from '@common/utilities/data/object'
+import * as permissions from '@common/utilities/permissions'
+import * as uniqueString from '@common/utilities/uniqueString'
 
 import type * as remoteBackend from '#/services/RemoteBackend'
 import * as remoteBackendPaths from '#/services/remoteBackendPaths'
diff --git a/app/gui/integration-test/dashboard/actions/index.ts b/app/gui/integration-test/dashboard/actions/index.ts
index cda9f1a49627..bf528a06fec6 100644
--- a/app/gui/integration-test/dashboard/actions/index.ts
+++ b/app/gui/integration-test/dashboard/actions/index.ts
@@ -3,7 +3,7 @@ import path from 'node:path'
 
 import { expect, test, type Page } from '@playwright/test'
 
-import { TEXTS } from 'enso-common/src/text'
+import { TEXTS } from '@common/text'
 
 import {
   INITIAL_CALLS_OBJECT,
diff --git a/app/gui/integration-test/dashboard/assetPanel.spec.ts b/app/gui/integration-test/dashboard/assetPanel.spec.ts
index dbb419a92567..db82baae83da 100644
--- a/app/gui/integration-test/dashboard/assetPanel.spec.ts
+++ b/app/gui/integration-test/dashboard/assetPanel.spec.ts
@@ -1,8 +1,8 @@
 /** @file Tests for the asset panel. */
 import { expect, test, type Page } from '@playwright/test'
 
-import { EmailAddress, UserId } from 'enso-common/src/services/Backend'
-import { PermissionAction } from 'enso-common/src/utilities/permissions'
+import { EmailAddress, UserId } from '@common/services/Backend'
+import { PermissionAction } from '@common/utilities/permissions'
 
 import { mockAllAndLogin } from './actions'
 
diff --git a/app/gui/integration-test/dashboard/assetSearchBar.spec.ts b/app/gui/integration-test/dashboard/assetSearchBar.spec.ts
index 22bd035a7ba5..3fdc19f8c135 100644
--- a/app/gui/integration-test/dashboard/assetSearchBar.spec.ts
+++ b/app/gui/integration-test/dashboard/assetSearchBar.spec.ts
@@ -1,7 +1,7 @@
 /** @file Test the search bar and its suggestions. */
 import { expect, test, type Page } from '@playwright/test'
 
-import { COLORS } from 'enso-common/src/services/Backend'
+import { COLORS } from '@common/services/Backend'
 
 import { mockAllAndLogin } from './actions'
 
diff --git a/app/gui/integration-test/dashboard/contextMenus.spec.ts b/app/gui/integration-test/dashboard/contextMenus.spec.ts
index b752fb064ab2..8c230e76f201 100644
--- a/app/gui/integration-test/dashboard/contextMenus.spec.ts
+++ b/app/gui/integration-test/dashboard/contextMenus.spec.ts
@@ -1,7 +1,7 @@
 /** @file Test the drive view. */
 import { expect, test, type Page } from '@playwright/test'
 
-import { COLORS } from 'enso-common/src/services/Backend'
+import { COLORS } from '@common/services/Backend'
 import { mockAllAndLogin } from './actions'
 
 const LABEL_NAME = 'aaaa'
diff --git a/app/gui/integration-test/dashboard/labels.spec.ts b/app/gui/integration-test/dashboard/labels.spec.ts
index fba6bee0ed1c..44c8bfff0182 100644
--- a/app/gui/integration-test/dashboard/labels.spec.ts
+++ b/app/gui/integration-test/dashboard/labels.spec.ts
@@ -1,7 +1,7 @@
 /** @file Test dragging of labels. */
 import { expect, test, type Locator, type Page } from '@playwright/test'
 
-import { COLORS } from 'enso-common/src/services/Backend'
+import { COLORS } from '@common/services/Backend'
 
 import { mockAllAndLogin } from './actions'
 
diff --git a/app/gui/integration-test/dashboard/organizationSettings.spec.ts b/app/gui/integration-test/dashboard/organizationSettings.spec.ts
index bc14b55744e8..d69ca5592f99 100644
--- a/app/gui/integration-test/dashboard/organizationSettings.spec.ts
+++ b/app/gui/integration-test/dashboard/organizationSettings.spec.ts
@@ -1,7 +1,7 @@
 /** @file Test the organization settings tab. */
 import { expect, test } from '@playwright/test'
 
-import { Plan } from 'enso-common/src/services/Backend'
+import { Plan } from '@common/services/Backend'
 import { mockAllAndLogin } from './actions'
 
 const NEW_NAME = 'another organization-name'
diff --git a/app/gui/integration-test/dashboard/setup.spec.ts b/app/gui/integration-test/dashboard/setup.spec.ts
index 1ef76f9af1a5..89674a605c46 100644
--- a/app/gui/integration-test/dashboard/setup.spec.ts
+++ b/app/gui/integration-test/dashboard/setup.spec.ts
@@ -1,7 +1,7 @@
 /** @file Test the setup flow. */
 import { expect, test } from '@playwright/test'
 
-import { Plan } from 'enso-common/src/services/Backend'
+import { Plan } from '@common/services/Backend'
 import { mockAll } from './actions'
 
 // Reset storage state for this file to avoid being authenticated
diff --git a/app/gui/integration-test/dashboard/sort.spec.ts b/app/gui/integration-test/dashboard/sort.spec.ts
index f639e0b35976..0b32533e5ff2 100644
--- a/app/gui/integration-test/dashboard/sort.spec.ts
+++ b/app/gui/integration-test/dashboard/sort.spec.ts
@@ -1,7 +1,7 @@
 /** @file Test sorting of assets columns. */
 import { expect, test, type Locator } from '@playwright/test'
 
-import { toRfc3339 } from 'enso-common/src/utilities/data/dateTime'
+import { toRfc3339 } from '@common/utilities/data/dateTime'
 
 import { mockAllAndLogin } from './actions'
 
diff --git a/app/gui/package.json b/app/gui/package.json
index 389e9b83fcd9..42740655f32a 100644
--- a/app/gui/package.json
+++ b/app/gui/package.json
@@ -129,7 +129,10 @@
     "y-websocket": "^1.5.0",
     "ydoc-shared": "workspace:*",
     "yjs": "^13.6.7",
-    "marked": "14.1.3"
+    "marked": "14.1.3",
+    "@tanstack/query-core": "5.54.1",
+    "@tanstack/query-persist-client-core": "^5.54.0",
+    "vitest": "^1.3.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
diff --git a/app/common/src/services/Backend.ts b/app/gui/src/common/services/Backend.ts
similarity index 99%
rename from app/common/src/services/Backend.ts
rename to app/gui/src/common/services/Backend.ts
index a065b78c7562..7ad63b03e0d0 100644
--- a/app/common/src/services/Backend.ts
+++ b/app/gui/src/common/services/Backend.ts
@@ -659,10 +659,10 @@ export function lChColorToCssColor(color: LChColor): string {
 }
 
 export const COLOR_STRING_TO_COLOR = new Map(
-  COLORS.map(color => [lChColorToCssColor(color), color]),
+  COLORS.map((color) => [lChColorToCssColor(color), color]),
 )
 
-export const INITIAL_COLOR_COUNTS = new Map(COLORS.map(color => [lChColorToCssColor(color), 0]))
+export const INITIAL_COLOR_COUNTS = new Map(COLORS.map((color) => [lChColorToCssColor(color), 0]))
 
 /** The color that is used for the least labels. Ties are broken by order. */
 export function findLeastUsedColor(labels: Iterable<Label>) {
@@ -672,7 +672,7 @@ export function findLeastUsedColor(labels: Iterable<Label>) {
     colorCounts.set(colorString, (colorCounts.get(colorString) ?? 0) + 1)
   }
   const min = Math.min(...colorCounts.values())
-  const [minColor] = [...colorCounts.entries()].find(kv => kv[1] === min) ?? []
+  const [minColor] = [...colorCounts.entries()].find((kv) => kv[1] === min) ?? []
   return minColor == null ? COLORS[0] : COLOR_STRING_TO_COLOR.get(minColor) ?? COLORS[0]
 }
 
@@ -1470,7 +1470,7 @@ export function isNewTitleValid(
   return (
     newTitle !== '' &&
     newTitle !== item.title &&
-    siblings.every(sibling => {
+    siblings.every((sibling) => {
       const isSelf = sibling.id === item.id
       const hasSameType = sibling.type === item.type
       const hasSameTitle = sibling.title === newTitle
diff --git a/app/common/src/services/__tests__/Backend.test.ts b/app/gui/src/common/services/__tests__/Backend.test.ts
similarity index 100%
rename from app/common/src/services/__tests__/Backend.test.ts
rename to app/gui/src/common/services/__tests__/Backend.test.ts
diff --git a/app/common/src/queryClient.ts b/app/gui/src/common/services/tanstackQuery/client.ts
similarity index 93%
rename from app/common/src/queryClient.ts
rename to app/gui/src/common/services/tanstackQuery/client.ts
index ab69795436d0..7cb1a4d75b48 100644
--- a/app/common/src/queryClient.ts
+++ b/app/gui/src/common/services/tanstackQuery/client.ts
@@ -1,9 +1,4 @@
-/**
- * @file
- *
- * Tanstack Query client for Enso IDE and dashboard.
- */
-
+/** @file Tanstack Query client for Enso IDE and dashboard. */
 import * as queryCore from '@tanstack/query-core'
 import type { AsyncStorage, StoragePersisterOptions } from '@tanstack/query-persist-client-core'
 import { experimental_createPersister as createPersister } from '@tanstack/query-persist-client-core'
@@ -85,7 +80,7 @@ export function createQueryClient<TStorageValue = string>(
       // fallback to the local cache only if the user is offline
       maxAge: queryCore.onlineManager.isOnline() ? -1 : DEFAULT_QUERY_PERSIST_TIME_MS,
       buster: DEFAULT_BUSTER,
-      filters: { predicate: query => query.meta?.persist !== false },
+      filters: { predicate: (query) => query.meta?.persist !== false },
       prefix: 'enso:query-persist:',
       ...(persisterStorage.serialize != null ? { serialize: persisterStorage.serialize } : {}),
       ...(persisterStorage.deserialize != null ?
@@ -107,20 +102,20 @@ export function createQueryClient<TStorageValue = string>(
           }
         })()
         const invalidatesToIgnore = invalidates.filter(
-          queryKey => !invalidatesToAwait.includes(queryKey),
+          (queryKey) => !invalidatesToAwait.includes(queryKey),
         )
 
         for (const queryKey of invalidatesToIgnore) {
           void queryClient.invalidateQueries({
-            predicate: query => queryCore.matchQuery({ queryKey }, query),
+            predicate: (query) => queryCore.matchQuery({ queryKey }, query),
           })
         }
 
         if (invalidatesToAwait.length > 0) {
           return Promise.all(
-            invalidatesToAwait.map(queryKey =>
+            invalidatesToAwait.map((queryKey) =>
               queryClient.invalidateQueries({
-                predicate: query => queryCore.matchQuery({ queryKey }, query),
+                predicate: (query) => queryCore.matchQuery({ queryKey }, query),
               }),
             ),
           )
diff --git a/app/common/src/backendQuery.ts b/app/gui/src/common/services/tanstackQuery/query.ts
similarity index 92%
rename from app/common/src/backendQuery.ts
rename to app/gui/src/common/services/tanstackQuery/query.ts
index 1c1ae7fafcaf..b59de5287334 100644
--- a/app/common/src/backendQuery.ts
+++ b/app/gui/src/common/services/tanstackQuery/query.ts
@@ -2,9 +2,9 @@
 
 import type * as queryCore from '@tanstack/query-core'
 
+import * as object from '../../utilities/data/object'
 import type Backend from './services/Backend'
 import * as backendModule from './services/Backend'
-import * as object from './utilities/data/object'
 
 /** The properties of the Backend type that are methods. */
 export type BackendMethods = object.ExtractKeys<Backend, object.MethodOf<Backend>>
@@ -15,8 +15,8 @@ type BackendQueryNormalizers = {
 }
 
 const NORMALIZE_METHOD_QUERY: BackendQueryNormalizers = {
-  listDirectory: query => [query.parentId, object.omit(query, 'parentId')],
-  getFileDetails: fileId => [fileId],
+  listDirectory: (query) => [query.parentId, object.omit(query, 'parentId')],
+  getFileDetails: (fileId) => [fileId],
 }
 
 /** Creates a partial query key representing the given method and arguments. */
diff --git a/app/common/src/text/english.json b/app/gui/src/common/text/english.json
similarity index 100%
rename from app/common/src/text/english.json
rename to app/gui/src/common/text/english.json
diff --git a/app/common/src/text/index.ts b/app/gui/src/common/text/index.ts
similarity index 100%
rename from app/common/src/text/index.ts
rename to app/gui/src/common/text/index.ts
diff --git a/app/common/src/utilities/__tests__/error.test.ts b/app/gui/src/common/utilities/__tests__/error.test.ts
similarity index 100%
rename from app/common/src/utilities/__tests__/error.test.ts
rename to app/gui/src/common/utilities/__tests__/error.test.ts
diff --git a/app/common/src/utilities/convertCSSUnits.ts b/app/gui/src/common/utilities/convertCSSUnits.ts
similarity index 100%
rename from app/common/src/utilities/convertCSSUnits.ts
rename to app/gui/src/common/utilities/convertCSSUnits.ts
diff --git a/app/common/src/utilities/data/__tests__/array.test.ts b/app/gui/src/common/utilities/data/__tests__/array.test.ts
similarity index 100%
rename from app/common/src/utilities/data/__tests__/array.test.ts
rename to app/gui/src/common/utilities/data/__tests__/array.test.ts
diff --git a/app/common/src/utilities/data/__tests__/dateTime.test.ts b/app/gui/src/common/utilities/data/__tests__/dateTime.test.ts
similarity index 100%
rename from app/common/src/utilities/data/__tests__/dateTime.test.ts
rename to app/gui/src/common/utilities/data/__tests__/dateTime.test.ts
diff --git a/app/common/src/utilities/data/__tests__/email.test.ts b/app/gui/src/common/utilities/data/__tests__/email.test.ts
similarity index 100%
rename from app/common/src/utilities/data/__tests__/email.test.ts
rename to app/gui/src/common/utilities/data/__tests__/email.test.ts
diff --git a/app/common/src/utilities/data/__tests__/fileInfo.test.ts b/app/gui/src/common/utilities/data/__tests__/fileInfo.test.ts
similarity index 100%
rename from app/common/src/utilities/data/__tests__/fileInfo.test.ts
rename to app/gui/src/common/utilities/data/__tests__/fileInfo.test.ts
diff --git a/app/common/src/utilities/data/__tests__/iterator.test.ts b/app/gui/src/common/utilities/data/__tests__/iter.test.ts
similarity index 97%
rename from app/common/src/utilities/data/__tests__/iterator.test.ts
rename to app/gui/src/common/utilities/data/__tests__/iter.test.ts
index 2e686c58243f..e831b21bf6de 100644
--- a/app/common/src/utilities/data/__tests__/iterator.test.ts
+++ b/app/gui/src/common/utilities/data/__tests__/iter.test.ts
@@ -83,7 +83,7 @@ function makeCases(): IteratorCase<unknown>[] {
       count: 2,
     },
     {
-      iterable: iter.filter([7, 'a', 8, 'b', 9], el => typeof el === 'string'),
+      iterable: iter.filter([7, 'a', 8, 'b', 9], (el) => typeof el === 'string'),
       soleValue: undefined,
       first: 'a',
       last: 'b',
diff --git a/app/common/src/utilities/data/__tests__/set.test.ts b/app/gui/src/common/utilities/data/__tests__/set.test.ts
similarity index 100%
rename from app/common/src/utilities/data/__tests__/set.test.ts
rename to app/gui/src/common/utilities/data/__tests__/set.test.ts
diff --git a/app/common/src/utilities/data/array.ts b/app/gui/src/common/utilities/data/array.ts
similarity index 90%
rename from app/common/src/utilities/data/array.ts
rename to app/gui/src/common/utilities/data/array.ts
index 032937f468de..c5cae2e7f652 100644
--- a/app/common/src/utilities/data/array.ts
+++ b/app/gui/src/common/utilities/data/array.ts
@@ -2,19 +2,11 @@
 
 export const EMPTY_ARRAY: readonly never[] = []
 
-// ====================
-// === shallowEqual ===
-// ====================
-
 /** Whether both arrays contain the same items. Does not recurse into the items. */
 export function shallowEqual<T>(a: readonly T[], b: readonly T[]) {
   return a.length === b.length && a.every((item, i) => item === b[i])
 }
 
-// ================
-// === includes ===
-// ================
-
 /**
  * Returns a type predicate that returns true if and only if the value is in the array.
  * The array MUST contain every element of `T`.
@@ -33,10 +25,6 @@ export function includesPredicate<T>(array: Iterable<T>) {
   return (item: unknown): item is T => set.has(item)
 }
 
-// ======================
-// === splice helpers ===
-// ======================
-
 /** The value returned when {@link Array.findIndex} fails. */
 const NOT_FOUND = -1
 
@@ -82,5 +70,5 @@ export function splicedAfter<T>(array: T[], items: T[], predicate: (value: T) =>
 export function transpose<T>(matrix: T[][]): T[][] {
   if (matrix.length === 0) return []
   if (matrix[0] && matrix[0].length === 0) return [[]]
-  return matrix[0]!.map((_, colIndex) => matrix.map(row => row[colIndex]!))
+  return matrix[0]!.map((_, colIndex) => matrix.map((row) => row[colIndex]!))
 }
diff --git a/app/common/src/utilities/data/dateTime.ts b/app/gui/src/common/utilities/data/dateTime.ts
similarity index 97%
rename from app/common/src/utilities/data/dateTime.ts
rename to app/gui/src/common/utilities/data/dateTime.ts
index a20341b0f827..902373dbb916 100644
--- a/app/common/src/utilities/data/dateTime.ts
+++ b/app/gui/src/common/utilities/data/dateTime.ts
@@ -1,5 +1,5 @@
 /** @file Utilities for manipulating and displaying dates and times. */
-import * as newtype from './newtype'
+import * as newtype from '@common/utilities/data/newtype'
 
 /** The number of hours in half a day. This is used to get the number of hours for AM/PM time. */
 const HALF_DAY_HOURS = 12
diff --git a/app/common/src/utilities/data/email.ts b/app/gui/src/common/utilities/data/email.ts
similarity index 100%
rename from app/common/src/utilities/data/email.ts
rename to app/gui/src/common/utilities/data/email.ts
diff --git a/app/common/src/utilities/data/fileInfo.ts b/app/gui/src/common/utilities/data/fileInfo.ts
similarity index 100%
rename from app/common/src/utilities/data/fileInfo.ts
rename to app/gui/src/common/utilities/data/fileInfo.ts
diff --git a/app/common/src/utilities/data/iter.ts b/app/gui/src/common/utilities/data/iter.ts
similarity index 100%
rename from app/common/src/utilities/data/iter.ts
rename to app/gui/src/common/utilities/data/iter.ts
diff --git a/app/common/src/utilities/data/newtype.ts b/app/gui/src/common/utilities/data/newtype.ts
similarity index 100%
rename from app/common/src/utilities/data/newtype.ts
rename to app/gui/src/common/utilities/data/newtype.ts
diff --git a/app/common/src/utilities/data/nullable.ts b/app/gui/src/common/utilities/data/nullable.ts
similarity index 100%
rename from app/common/src/utilities/data/nullable.ts
rename to app/gui/src/common/utilities/data/nullable.ts
diff --git a/app/common/src/utilities/data/object.ts b/app/gui/src/common/utilities/data/object.ts
similarity index 85%
rename from app/common/src/utilities/data/object.ts
rename to app/gui/src/common/utilities/data/object.ts
index 963cafed7b4e..7ed7163d1056 100644
--- a/app/common/src/utilities/data/object.ts
+++ b/app/gui/src/common/utilities/data/object.ts
@@ -1,18 +1,10 @@
 /** @file Functions related to manipulating objects. */
 
-// ===============
-// === Mutable ===
-// ===============
-
 /** Remove the `readonly` modifier from all fields in a type. */
 export type Mutable<T> = {
   -readonly [K in keyof T]: T[K]
 }
 
-// =============
-// === merge ===
-// =============
-
 /** Prevents generic parameter inference by hiding the type parameter behind a conditional type. */
 type NoInfer<T> = [T][T extends T ? 0 : never]
 
@@ -32,31 +24,19 @@ export function merge<T extends object>(object: T, update: Partial<T>): T {
 
 /** Return a function to update an object with the given partial update. */
 export function merger<T extends object>(update: Partial<NoInfer<T>>): (object: T) => T {
-  return object => merge(object, update)
+  return (object) => merge(object, update)
 }
 
-// ================
-// === readonly ===
-// ================
-
 /** Makes all properties readonly at the type level. They are still mutable at the runtime level. */
 export function readonly<T extends object>(object: T): Readonly<T> {
   return object
 }
 
-// =====================
-// === unsafeMutable ===
-// =====================
-
 /** Removes the readonly modifier from all properties on the object. UNSAFE. */
 export function unsafeMutable<T extends object>(object: T): { -readonly [K in keyof T]: T[K] } {
   return object
 }
 
-// =====================
-// === unsafeEntries ===
-// =====================
-
 /**
  * Return the entries of an object. UNSAFE only when it is possible for an object to have
  * extra keys.
@@ -93,10 +73,6 @@ export function unsafeFromEntries<T extends object>(
   return Object.fromEntries(entries)
 }
 
-// =============================
-// === unsafeRemoveUndefined ===
-// =============================
-
 /** A the object with `undefined` unsafely removed from the value types of all of its keys. */
 export function unsafeRemoveUndefined<T extends object>(
   object: T,
@@ -105,10 +81,6 @@ export function unsafeRemoveUndefined<T extends object>(
   return object as never
 }
 
-// ==================
-// === mapEntries ===
-// ==================
-
 /**
  * Return the entries of an object. UNSAFE only when it is possible for an object to have
  * extra keys.
@@ -120,35 +92,23 @@ export function mapEntries<K extends PropertyKey, V, W>(
   // @ts-expect-error It is known that the set of keys is the same for the input and the output,
   // because the output is dynamically generated based on the input.
   return Object.fromEntries(
-    unsafeEntries(object).map<[K, W]>(kv => {
+    unsafeEntries(object).map<[K, W]>((kv) => {
       const [k, v] = kv
       return [k, map(k, v)]
     }),
   )
 }
 
-// ================
-// === asObject ===
-// ================
-
 /** Either return the object unchanged, if the input was an object, or `null`. */
 export function asObject(value: unknown): object | null {
   return typeof value === 'object' && value != null ? value : null
 }
 
-// =============================
-// === singletonObjectOrNull ===
-// =============================
-
 /** Either return a singleton object, if the input was an object, or an empty array. */
 export function singletonObjectOrNull(value: unknown): [] | [object] {
   return typeof value === 'object' && value != null ? [value] : []
 }
 
-// ============
-// === omit ===
-// ============
-
 /** UNSAFE when `Ks` contains strings that are not in the runtime array. */
 export function omit<T, Ks extends readonly [string & keyof T, ...(string & keyof T)[]]>(
   object: T,
@@ -161,10 +121,6 @@ export function omit<T, Ks extends readonly [string & keyof T, ...(string & keyo
   ) as Omit<T, Ks[number]>
 }
 
-// ============
-// === pick ===
-// ============
-
 /** UNSAFE when `Ks` contains strings that are not in the runtime array. */
 export function pick<T, Ks extends readonly [string & keyof T, ...(string & keyof T)[]]>(
   object: T,
@@ -177,26 +133,14 @@ export function pick<T, Ks extends readonly [string & keyof T, ...(string & keyo
   ) as Pick<T, Ks[number]>
 }
 
-// ===================
-// === ExtractKeys ===
-// ===================
-
 /** Filter a type `T` to include only the properties extending the given type `U`. */
 export type ExtractKeys<T, U> = {
   [K in keyof T]: T[K] extends U ? K : never
 }[keyof T]
 
-// ================
-// === MethodOf ===
-// ================
-
 /** An instance method of the given type. */
 export type MethodOf<T> = (this: T, ...args: never) => unknown
 
-// ===================
-// === useObjectId ===
-// ===================
-
 /** Composable providing support for managing object identities. */
 export function useObjectId() {
   let lastId = 0
diff --git a/app/common/src/utilities/data/path.ts b/app/gui/src/common/utilities/data/path.ts
similarity index 95%
rename from app/common/src/utilities/data/path.ts
rename to app/gui/src/common/utilities/data/path.ts
index b1e2dccc1cd5..8124f510cbc7 100644
--- a/app/common/src/utilities/data/path.ts
+++ b/app/gui/src/common/utilities/data/path.ts
@@ -1,5 +1,5 @@
 /** @file Functions for manipulating and querying paths. */
-import { isOnWindows } from '../../detect'
+import { isOnWindows } from '../detect'
 import { newtypeConstructor, type Newtype } from './newtype'
 
 /** A filesystem path. */
diff --git a/app/common/src/utilities/data/set.ts b/app/gui/src/common/utilities/data/set.ts
similarity index 100%
rename from app/common/src/utilities/data/set.ts
rename to app/gui/src/common/utilities/data/set.ts
diff --git a/app/common/src/utilities/data/string.ts b/app/gui/src/common/utilities/data/string.ts
similarity index 100%
rename from app/common/src/utilities/data/string.ts
rename to app/gui/src/common/utilities/data/string.ts
diff --git a/app/common/src/detect.ts b/app/gui/src/common/utilities/detect.ts
similarity index 100%
rename from app/common/src/detect.ts
rename to app/gui/src/common/utilities/detect.ts
diff --git a/app/common/src/utilities/download.ts b/app/gui/src/common/utilities/download.ts
similarity index 100%
rename from app/common/src/utilities/download.ts
rename to app/gui/src/common/utilities/download.ts
diff --git a/app/common/src/utilities/equalities.ts b/app/gui/src/common/utilities/equalities.ts
similarity index 100%
rename from app/common/src/utilities/equalities.ts
rename to app/gui/src/common/utilities/equalities.ts
diff --git a/app/common/src/utilities/error.ts b/app/gui/src/common/utilities/error.ts
similarity index 100%
rename from app/common/src/utilities/error.ts
rename to app/gui/src/common/utilities/error.ts
diff --git a/app/common/src/utilities/functions.ts b/app/gui/src/common/utilities/functions.ts
similarity index 100%
rename from app/common/src/utilities/functions.ts
rename to app/gui/src/common/utilities/functions.ts
diff --git a/app/common/src/utilities/github.ts b/app/gui/src/common/utilities/github.ts
similarity index 95%
rename from app/common/src/utilities/github.ts
rename to app/gui/src/common/utilities/github.ts
index 5e0f68f2fcf4..ddf812d55101 100644
--- a/app/common/src/utilities/github.ts
+++ b/app/gui/src/common/utilities/github.ts
@@ -1,6 +1,6 @@
 /** @file Utilities getting various metadata about the app. */
-import * as common from '../'
-import * as detect from '../detect'
+import * as common from 'enso-common'
+import * as detect from './detect'
 
 const ONE_HOUR_MS = 3_600_000
 export const LATEST_RELEASE_PAGE_URL = 'https://github.com/enso-org/enso/releases/latest'
@@ -129,7 +129,7 @@ const appExtension = (() => {
 export async function getDownloadUrl() {
   const assets = (await getLatestRelease()).assets
   return (
-    assets.find(item => item.browser_download_url.endsWith(appExtension))?.browser_download_url ??
+    assets.find((item) => item.browser_download_url.endsWith(appExtension))?.browser_download_url ??
     null
   )
 }
diff --git a/app/common/src/gtag.ts b/app/gui/src/common/utilities/gtag.ts
similarity index 100%
rename from app/common/src/gtag.ts
rename to app/gui/src/common/utilities/gtag.ts
diff --git a/app/common/src/utilities/input.ts b/app/gui/src/common/utilities/input.ts
similarity index 100%
rename from app/common/src/utilities/input.ts
rename to app/gui/src/common/utilities/input.ts
diff --git a/app/common/src/load.ts b/app/gui/src/common/utilities/load.ts
similarity index 100%
rename from app/common/src/load.ts
rename to app/gui/src/common/utilities/load.ts
diff --git a/app/common/src/utilities/permissions.ts b/app/gui/src/common/utilities/permissions.ts
similarity index 99%
rename from app/common/src/utilities/permissions.ts
rename to app/gui/src/common/utilities/permissions.ts
index a722705a6dfc..4a56c1ea0f47 100644
--- a/app/common/src/utilities/permissions.ts
+++ b/app/gui/src/common/utilities/permissions.ts
@@ -1,5 +1,5 @@
 /** @file Utilities for working with permissions. */
-import type * as text from 'enso-common/src/text'
+import type * as text from '@common/text'
 
 /** Backend representation of user permission types. */
 export enum PermissionAction {
diff --git a/app/common/src/utilities/style/__tests__/tabBar.test.ts b/app/gui/src/common/utilities/style/__tests__/tabBar.test.ts
similarity index 100%
rename from app/common/src/utilities/style/__tests__/tabBar.test.ts
rename to app/gui/src/common/utilities/style/__tests__/tabBar.test.ts
diff --git a/app/common/src/utilities/style/tabBar.ts b/app/gui/src/common/utilities/style/tabBar.ts
similarity index 100%
rename from app/common/src/utilities/style/tabBar.ts
rename to app/gui/src/common/utilities/style/tabBar.ts
diff --git a/app/common/src/utilities/uniqueString.ts b/app/gui/src/common/utilities/uniqueString.ts
similarity index 100%
rename from app/common/src/utilities/uniqueString.ts
rename to app/gui/src/common/utilities/uniqueString.ts
diff --git a/app/gui/src/dashboard/App.tsx b/app/gui/src/dashboard/App.tsx
index 7f1f8f1da429..c038bb11c0bd 100644
--- a/app/gui/src/dashboard/App.tsx
+++ b/app/gui/src/dashboard/App.tsx
@@ -42,9 +42,9 @@ import { BrowserRouter, Navigate, Route, Routes, useNavigate } from 'react-route
 import { Slide, ToastContainer } from 'react-toastify'
 import * as z from 'zod'
 
-import { IS_DEV_MODE } from 'enso-common/src/detect'
-import { mapEntries, unsafeEntries } from 'enso-common/src/utilities/data/object'
-import { Path } from 'enso-common/src/utilities/data/path'
+import { mapEntries, unsafeEntries } from '@common/utilities/data/object'
+import { Path } from '@common/utilities/data/path'
+import { IS_DEV_MODE } from '@common/utilities/detect'
 
 import {
   ALL_PATHS_REGEX,
diff --git a/app/gui/src/dashboard/authentication/cognito.ts b/app/gui/src/dashboard/authentication/cognito.ts
index 937e76dbb2d9..a1759989ceb9 100644
--- a/app/gui/src/dashboard/authentication/cognito.ts
+++ b/app/gui/src/dashboard/authentication/cognito.ts
@@ -39,9 +39,9 @@ import {
 } from 'amazon-cognito-identity-js'
 import { Err, Result } from 'ts-results'
 
+import { toRfc3339, type Rfc3339DateTime } from '@common/utilities/data/dateTime'
+import { isOnElectron } from '@common/utilities/detect'
 import type { AccessToken } from 'enso-common/src/accessToken'
-import { isOnElectron } from 'enso-common/src/detect'
-import { toRfc3339, type Rfc3339DateTime } from 'enso-common/src/utilities/data/dateTime'
 
 import { toNestedAmplifyConfig, type AmplifyConfig } from '#/authentication/service'
 import type { Logger } from '#/providers/LoggerProvider'
diff --git a/app/gui/src/dashboard/authentication/service.ts b/app/gui/src/dashboard/authentication/service.ts
index 806328a2395a..db312698d989 100644
--- a/app/gui/src/dashboard/authentication/service.ts
+++ b/app/gui/src/dashboard/authentication/service.ts
@@ -8,8 +8,8 @@ import * as React from 'react'
 import * as amplify from '@aws-amplify/auth'
 import { useNavigate } from 'react-router'
 
+import * as detect from '@common/utilities/detect'
 import * as common from 'enso-common'
-import * as detect from 'enso-common/src/detect'
 
 import * as appUtils from '#/appUtils'
 
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/CloseButton.tsx b/app/gui/src/dashboard/components/AriaComponents/Button/CloseButton.tsx
index 529e5072b9ee..daf2d11c2f47 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Button/CloseButton.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/CloseButton.tsx
@@ -3,7 +3,7 @@ import DismissIcon from '#/assets/dismiss.svg'
 import { Button, type ButtonProps } from '#/components/AriaComponents/Button'
 import { useText } from '#/providers/TextProvider'
 import { twMerge } from '#/utilities/tailwindMerge'
-import { isOnMacOS } from 'enso-common/src/detect'
+import { isOnMacOS } from '@common/utilities/detect'
 import { memo } from 'react'
 
 // ===================
diff --git a/app/gui/src/dashboard/components/AriaComponents/Checkbox/CheckboxGroup.tsx b/app/gui/src/dashboard/components/AriaComponents/Checkbox/CheckboxGroup.tsx
index f934114eceb4..34193f929c16 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Checkbox/CheckboxGroup.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Checkbox/CheckboxGroup.tsx
@@ -1,7 +1,7 @@
 /** @file Allow users to select one or more items from a list of choices. */
 import type { CSSProperties, ForwardedRef, ReactElement } from 'react'
 
-import { omit } from 'enso-common/src/utilities/data/object'
+import { omit } from '@common/utilities/data/object'
 
 import {
   CheckboxGroup as AriaCheckboxGroup,
diff --git a/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts b/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts
index 247e3f0f22c5..345bd10db9d5 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts
+++ b/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts
@@ -7,7 +7,7 @@ import { useMutation } from '@tanstack/react-query'
 import * as reactHookForm from 'react-hook-form'
 import invariant from 'tiny-invariant'
 
-import { isJSError, tryGetMessage } from 'enso-common/src/utilities/error'
+import { isJSError, tryGetMessage } from '@common/utilities/error'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useOffline, useOfflineChange } from '#/hooks/offlineHooks'
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/Input/Input.tsx b/app/gui/src/dashboard/components/AriaComponents/Inputs/Input/Input.tsx
index fa60bc34ee8b..9ca2b2026e08 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Inputs/Input/Input.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/Input/Input.tsx
@@ -29,7 +29,7 @@ import { useAutoFocus } from '#/hooks/autoFocusHooks'
 import { mergeRefs } from '#/utilities/mergeRefs'
 import { forwardRef } from '#/utilities/react'
 import type { ExtractFunction, VariantProps } from '#/utilities/tailwindVariants'
-import { omit } from 'enso-common/src/utilities/data/object'
+import { omit } from '@common/utilities/data/object'
 import { INPUT_STYLES } from '../variants'
 
 /** Props for the Input component. */
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelector.tsx b/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelector.tsx
index e644aece20a2..f46d5fb70f49 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelector.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/MultiSelector/MultiSelector.tsx
@@ -1,7 +1,7 @@
 /** @file A horizontal selector supporting multiple input. */
 import { useRef, type CSSProperties, type ForwardedRef, type Ref } from 'react'
 
-import { omit, unsafeRemoveUndefined } from 'enso-common/src/utilities/data/object'
+import { omit, unsafeRemoveUndefined } from '@common/utilities/data/object'
 
 import {
   FieldError,
diff --git a/app/gui/src/dashboard/components/AriaComponents/Inputs/OTPInput/OTPInput.tsx b/app/gui/src/dashboard/components/AriaComponents/Inputs/OTPInput/OTPInput.tsx
index bfaa74ae1b75..3707dbe54312 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Inputs/OTPInput/OTPInput.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Inputs/OTPInput/OTPInput.tsx
@@ -3,7 +3,7 @@ import { mergeProps } from '#/components/aria'
 import { mergeRefs } from '#/utilities/mergeRefs'
 import type { VariantProps } from '#/utilities/tailwindVariants'
 import { tv } from '#/utilities/tailwindVariants'
-import { omit } from 'enso-common/src/utilities/data/object'
+import { omit } from '@common/utilities/data/object'
 import type { OTPInputProps } from 'input-otp'
 import { OTPInput as BaseOTPInput, type SlotProps as OTPInputSlotProps } from 'input-otp'
 import type { ForwardedRef, Ref } from 'react'
diff --git a/app/gui/src/dashboard/components/AriaComponents/Radio/RadioGroup.tsx b/app/gui/src/dashboard/components/AriaComponents/Radio/RadioGroup.tsx
index 88757e6b4b91..edc431e9019b 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Radio/RadioGroup.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Radio/RadioGroup.tsx
@@ -1,7 +1,7 @@
 /** @file A radio group. */
 import type { ForwardedRef, ReactNode } from 'react'
 
-import { omit } from 'enso-common/src/utilities/data/object'
+import { omit } from '@common/utilities/data/object'
 
 import {
   RadioGroup as AriaRadioGroup,
diff --git a/app/gui/src/dashboard/components/ColorPicker.tsx b/app/gui/src/dashboard/components/ColorPicker.tsx
index 47679395f32c..43489c9aae07 100644
--- a/app/gui/src/dashboard/components/ColorPicker.tsx
+++ b/app/gui/src/dashboard/components/ColorPicker.tsx
@@ -6,7 +6,7 @@ import {
   COLORS,
   lChColorToCssColor,
   type LChColor,
-} from 'enso-common/src/services/Backend'
+} from '@common/services/Backend'
 
 import { Radio, type RadioGroupProps } from '#/components/aria'
 import FocusRing from '#/components/styled/FocusRing'
diff --git a/app/gui/src/dashboard/components/ContextMenu.tsx b/app/gui/src/dashboard/components/ContextMenu.tsx
index 036468d0cc4f..179af937723c 100644
--- a/app/gui/src/dashboard/components/ContextMenu.tsx
+++ b/app/gui/src/dashboard/components/ContextMenu.tsx
@@ -1,7 +1,7 @@
 /** @file A context menu. */
 import * as React from 'react'
 
-import * as detect from 'enso-common/src/detect'
+import * as detect from '@common/utilities/detect'
 
 import FocusArea from '#/components/styled/FocusArea'
 
diff --git a/app/gui/src/dashboard/components/Devtools/EnsoDevtools.tsx b/app/gui/src/dashboard/components/Devtools/EnsoDevtools.tsx
index 3d080a23ee41..1d5efc376538 100644
--- a/app/gui/src/dashboard/components/Devtools/EnsoDevtools.tsx
+++ b/app/gui/src/dashboard/components/Devtools/EnsoDevtools.tsx
@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react'
 
 import { useQueryClient } from '@tanstack/react-query'
 
-import { IS_DEV_MODE } from 'enso-common/src/detect'
-import { Plan } from 'enso-common/src/services/Backend'
+import { Plan } from '@common/services/Backend'
+import { IS_DEV_MODE } from '@common/utilities/detect'
 
 import { SETUP_PATH } from '#/appUtils'
 import CrossIcon from '#/assets/cross.svg'
diff --git a/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsProvider.tsx b/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsProvider.tsx
index 5bb3602c951c..d5640c83d228 100644
--- a/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsProvider.tsx
+++ b/app/gui/src/dashboard/components/Devtools/EnsoDevtoolsProvider.tsx
@@ -2,8 +2,8 @@
 import { MotionGlobalConfig } from 'framer-motion'
 import { persist } from 'zustand/middleware'
 
-import { IS_DEV_MODE } from 'enso-common/src/detect'
-import { unsafeEntries, unsafeFromEntries } from 'enso-common/src/utilities/data/object'
+import { unsafeEntries, unsafeFromEntries } from '@common/utilities/data/object'
+import { IS_DEV_MODE } from '@common/utilities/detect'
 
 import { type PaywallFeatureName, PAYWALL_FEATURES } from '#/hooks/billing'
 import { createStore, useStore } from '#/utilities/zustand'
diff --git a/app/gui/src/dashboard/components/ErrorBoundary.tsx b/app/gui/src/dashboard/components/ErrorBoundary.tsx
index 7e27b1b36f7b..ca9f2ee77ff0 100644
--- a/app/gui/src/dashboard/components/ErrorBoundary.tsx
+++ b/app/gui/src/dashboard/components/ErrorBoundary.tsx
@@ -9,8 +9,8 @@ import {
   type ErrorBoundaryProps as ReactErrorBoundaryProps,
 } from 'react-error-boundary'
 
-import { IS_DEV_MODE } from 'enso-common/src/detect'
-import { getMessageOrToString, tryGetStack } from 'enso-common/src/utilities/error'
+import { IS_DEV_MODE } from '@common/utilities/detect'
+import { getMessageOrToString, tryGetStack } from '@common/utilities/error'
 
 import { Alert, Button, ButtonGroup, Separator, Text } from '#/components/AriaComponents'
 import { Result, type ResultProps } from '#/components/Result'
diff --git a/app/gui/src/dashboard/components/JSONSchemaInput.tsx b/app/gui/src/dashboard/components/JSONSchemaInput.tsx
index d94f00b24bba..0194fc94926f 100644
--- a/app/gui/src/dashboard/components/JSONSchemaInput.tsx
+++ b/app/gui/src/dashboard/components/JSONSchemaInput.tsx
@@ -1,7 +1,7 @@
 /** @file A dynamic wizard for creating an arbitrary type of Datalink. */
 import { Fragment, useState, type JSX } from 'react'
 
-import { asObject, singletonObjectOrNull } from 'enso-common/src/utilities/data/object'
+import { asObject, singletonObjectOrNull } from '@common/utilities/data/object'
 
 import { Input } from '#/components/aria'
 import { Button, Checkbox, Dropdown, Text } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/components/MenuEntry.tsx b/app/gui/src/dashboard/components/MenuEntry.tsx
index 86e0b2445992..9e3bcfa77ee3 100644
--- a/app/gui/src/dashboard/components/MenuEntry.tsx
+++ b/app/gui/src/dashboard/components/MenuEntry.tsx
@@ -1,8 +1,8 @@
 /** @file An entry in a menu. */
 import * as React from 'react'
 
-import * as detect from 'enso-common/src/detect'
-import type * as text from 'enso-common/src/text'
+import type * as text from '@common/text'
+import * as detect from '@common/utilities/detect'
 
 import BlankIcon from '#/assets/blank.svg'
 
diff --git a/app/gui/src/dashboard/components/Paywall/components/PaywallBulletPoints.tsx b/app/gui/src/dashboard/components/Paywall/components/PaywallBulletPoints.tsx
index cae54ed1100d..8c0cc7b70c93 100644
--- a/app/gui/src/dashboard/components/Paywall/components/PaywallBulletPoints.tsx
+++ b/app/gui/src/dashboard/components/Paywall/components/PaywallBulletPoints.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
 
 import * as tw from 'tailwind-merge'
 
-import type * as text from 'enso-common/src/text'
+import type * as text from '@common/text'
 
 import Check from '#/assets/check_mark.svg'
 
diff --git a/app/gui/src/dashboard/components/aria.tsx b/app/gui/src/dashboard/components/aria.tsx
index bd5cf5e30fbd..4be55292725d 100644
--- a/app/gui/src/dashboard/components/aria.tsx
+++ b/app/gui/src/dashboard/components/aria.tsx
@@ -1,5 +1,5 @@
 /** @file Barrel re-export of `react-aria` and `react-aria-components`. */
-import type { Mutable } from 'enso-common/src/utilities/data/object'
+import type { Mutable } from '@common/utilities/data/object'
 import * as aria from 'react-aria'
 
 export * from '@react-aria/interactions'
diff --git a/app/gui/src/dashboard/components/dashboard/AssetIcon.tsx b/app/gui/src/dashboard/components/dashboard/AssetIcon.tsx
index ff174f1f9a8a..e26ce56c7788 100644
--- a/app/gui/src/dashboard/components/dashboard/AssetIcon.tsx
+++ b/app/gui/src/dashboard/components/dashboard/AssetIcon.tsx
@@ -1,5 +1,5 @@
 /** @file Displays a non-interactable icon for an asset based on its type and name. */
-import { AssetType, type AnyAsset } from 'enso-common/src/services/Backend'
+import { AssetType, type AnyAsset } from '@common/services/Backend'
 
 import BlankIcon from '#/assets/blank.svg'
 import DatalinkIcon from '#/assets/datalink.svg'
diff --git a/app/gui/src/dashboard/components/dashboard/AssetRow.tsx b/app/gui/src/dashboard/components/dashboard/AssetRow.tsx
index 7f847d53cb87..2884b0416e34 100644
--- a/app/gui/src/dashboard/components/dashboard/AssetRow.tsx
+++ b/app/gui/src/dashboard/components/dashboard/AssetRow.tsx
@@ -24,10 +24,10 @@ import {
   type DirectoryId,
   type ProjectId,
   type RealAssetId,
-} from 'enso-common/src/services/Backend'
-import { merge } from 'enso-common/src/utilities/data/object'
-import { EMPTY_SET, withPresence } from 'enso-common/src/utilities/data/set'
-import { download } from 'enso-common/src/utilities/download'
+} from '@common/services/Backend'
+import { merge } from '@common/utilities/data/object'
+import { EMPTY_SET, withPresence } from '@common/utilities/data/set'
+import { download } from '@common/utilities/download'
 
 import BlankIcon from '#/assets/blank.svg'
 
diff --git a/app/gui/src/dashboard/components/dashboard/AssetRow/assetRowUtils.tsx b/app/gui/src/dashboard/components/dashboard/AssetRow/assetRowUtils.tsx
index c9908725ebc2..6a8bde9bf151 100644
--- a/app/gui/src/dashboard/components/dashboard/AssetRow/assetRowUtils.tsx
+++ b/app/gui/src/dashboard/components/dashboard/AssetRow/assetRowUtils.tsx
@@ -1,7 +1,7 @@
 /** @file Utilities related to `AssetRow`s. */
 import type * as assetsTable from '#/layouts/AssetsTable'
 
-import { EMPTY_SET } from 'enso-common/src/utilities/data/set'
+import { EMPTY_SET } from '@common/utilities/data/set'
 
 /** The default {@link assetsTable.AssetRowState} associated with an `AssetRow`. */
 export const INITIAL_ROW_STATE: assetsTable.AssetRowState = Object.freeze({
diff --git a/app/gui/src/dashboard/components/dashboard/AssetSummary.tsx b/app/gui/src/dashboard/components/dashboard/AssetSummary.tsx
index f2d0fc41f35c..b246d436b3b0 100644
--- a/app/gui/src/dashboard/components/dashboard/AssetSummary.tsx
+++ b/app/gui/src/dashboard/components/dashboard/AssetSummary.tsx
@@ -1,6 +1,6 @@
 /** @file Displays a few details of an asset. */
-import type { AnyAsset } from 'enso-common/src/services/Backend'
-import { formatDateTime } from 'enso-common/src/utilities/data/dateTime'
+import type { AnyAsset } from '@common/services/Backend'
+import { formatDateTime } from '@common/utilities/data/dateTime'
 
 import BreadcrumbArrowIcon from '#/assets/breadcrumb_arrow.svg'
 import { Text } from '#/components/aria'
diff --git a/app/gui/src/dashboard/components/dashboard/DatalinkInput.tsx b/app/gui/src/dashboard/components/dashboard/DatalinkInput.tsx
index 0ad8c86bbd8f..c2e109356cf4 100644
--- a/app/gui/src/dashboard/components/dashboard/DatalinkInput.tsx
+++ b/app/gui/src/dashboard/components/dashboard/DatalinkInput.tsx
@@ -1,5 +1,5 @@
 /** @file A dynamic wizard for creating an arbitrary type of Datalink. */
-import { assert } from 'enso-common/src/utilities/error'
+import { assert } from '@common/utilities/error'
 
 import { FieldError } from '#/components/aria'
 import type { FieldPath, FormInstance, TSchema } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/components/dashboard/DatalinkNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/DatalinkNameColumn.tsx
index f10ae5665d0d..d5113ad9de19 100644
--- a/app/gui/src/dashboard/components/dashboard/DatalinkNameColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/DatalinkNameColumn.tsx
@@ -1,6 +1,6 @@
 /** @file The icon and name of a {@link DatalinkAsset}. */
-import type { DatalinkAsset } from 'enso-common/src/services/Backend'
-import { merger } from 'enso-common/src/utilities/data/object'
+import type { DatalinkAsset } from '@common/services/Backend'
+import { merger } from '@common/utilities/data/object'
 
 import DatalinkIcon from '#/assets/datalink.svg'
 import type { AssetColumnProps } from '#/components/dashboard/column'
diff --git a/app/gui/src/dashboard/components/dashboard/DirectoryNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/DirectoryNameColumn.tsx
index 418f995f8829..6b8eaf34b567 100644
--- a/app/gui/src/dashboard/components/dashboard/DirectoryNameColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/DirectoryNameColumn.tsx
@@ -1,9 +1,9 @@
 /** @file The icon and name of a {@link DirectoryAsset}. */
 import { useMutation } from '@tanstack/react-query'
 
-import { isNewTitleValid, type DirectoryAsset } from 'enso-common/src/services/Backend'
-import { merger } from 'enso-common/src/utilities/data/object'
-import { isWhitespaceOnly } from 'enso-common/src/utilities/data/string'
+import { isNewTitleValid, type DirectoryAsset } from '@common/services/Backend'
+import { merger } from '@common/utilities/data/object'
+import { isWhitespaceOnly } from '@common/utilities/data/string'
 
 import FolderIcon from '#/assets/folder.svg'
 import FolderArrowIcon from '#/assets/folder_arrow.svg'
diff --git a/app/gui/src/dashboard/components/dashboard/FileNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/FileNameColumn.tsx
index 58d1165b95e1..d4ae07e99c8d 100644
--- a/app/gui/src/dashboard/components/dashboard/FileNameColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/FileNameColumn.tsx
@@ -1,9 +1,9 @@
 /** @file The icon and name of a {@link FileAsset}. */
 import { useMutation } from '@tanstack/react-query'
 
-import { BackendType, isNewTitleValid, type FileAsset } from 'enso-common/src/services/Backend'
-import { merger } from 'enso-common/src/utilities/data/object'
-import { isWhitespaceOnly } from 'enso-common/src/utilities/data/string'
+import { BackendType, isNewTitleValid, type FileAsset } from '@common/services/Backend'
+import { merger } from '@common/utilities/data/object'
+import { isWhitespaceOnly } from '@common/utilities/data/string'
 
 import type { AssetColumnProps } from '#/components/dashboard/column'
 import EditableSpan from '#/components/EditableSpan'
diff --git a/app/gui/src/dashboard/components/dashboard/KeyboardShortcut.tsx b/app/gui/src/dashboard/components/dashboard/KeyboardShortcut.tsx
index 264bb1ef6a74..0e1d7fcb4a19 100644
--- a/app/gui/src/dashboard/components/dashboard/KeyboardShortcut.tsx
+++ b/app/gui/src/dashboard/components/dashboard/KeyboardShortcut.tsx
@@ -1,8 +1,8 @@
 /** @file A visual representation of a keyboard shortcut. */
 import * as React from 'react'
 
-import * as detect from 'enso-common/src/detect'
-import type * as text from 'enso-common/src/text'
+import type * as text from '@common/text'
+import * as detect from '@common/utilities/detect'
 
 import CommandKeyIcon from '#/assets/command_key.svg'
 import CtrlKeyIcon from '#/assets/ctrl_key.svg'
diff --git a/app/gui/src/dashboard/components/dashboard/Label.tsx b/app/gui/src/dashboard/components/dashboard/Label.tsx
index 7a67943fbbfb..a405ea178241 100644
--- a/app/gui/src/dashboard/components/dashboard/Label.tsx
+++ b/app/gui/src/dashboard/components/dashboard/Label.tsx
@@ -5,7 +5,7 @@ import {
   lChColorToCssColor,
   type Label as BackendLabel,
   type LChColor,
-} from 'enso-common/src/services/Backend'
+} from '@common/services/Backend'
 
 import type { PressEvent } from '#/components/aria'
 import { Text } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/components/dashboard/Permission.tsx b/app/gui/src/dashboard/components/dashboard/Permission.tsx
index 4b81f295398b..fd6c6f827762 100644
--- a/app/gui/src/dashboard/components/dashboard/Permission.tsx
+++ b/app/gui/src/dashboard/components/dashboard/Permission.tsx
@@ -11,9 +11,9 @@ import {
   type AssetPermission,
   type Backend,
   type UserPermissionIdentifier,
-} from 'enso-common/src/services/Backend'
-import type { TextId } from 'enso-common/src/text'
-import { merge } from 'enso-common/src/utilities/data/object'
+} from '@common/services/Backend'
+import type { TextId } from '@common/text'
+import { merge } from '@common/utilities/data/object'
 
 import { Text } from '#/components/AriaComponents'
 import PermissionSelector from '#/components/dashboard/PermissionSelector'
diff --git a/app/gui/src/dashboard/components/dashboard/PermissionSelector.tsx b/app/gui/src/dashboard/components/dashboard/PermissionSelector.tsx
index 4789eec4c874..bb429da6ec3f 100644
--- a/app/gui/src/dashboard/components/dashboard/PermissionSelector.tsx
+++ b/app/gui/src/dashboard/components/dashboard/PermissionSelector.tsx
@@ -1,7 +1,7 @@
 /** @file A selector for all possible permissions. */
 import { useRef, useState, type JSX } from 'react'
 
-import type { AssetType } from 'enso-common/src/services/Backend'
+import type { AssetType } from '@common/services/Backend'
 
 import { Button } from '#/components/AriaComponents'
 import PermissionTypeSelector from '#/components/dashboard/PermissionTypeSelector'
diff --git a/app/gui/src/dashboard/components/dashboard/PermissionTypeSelector.tsx b/app/gui/src/dashboard/components/dashboard/PermissionTypeSelector.tsx
index 9652d4166d3b..87f6143f9caf 100644
--- a/app/gui/src/dashboard/components/dashboard/PermissionTypeSelector.tsx
+++ b/app/gui/src/dashboard/components/dashboard/PermissionTypeSelector.tsx
@@ -1,7 +1,7 @@
 /** @file A selector for all possible permission types. */
 import type { CSSProperties } from 'react'
 
-import { AssetType } from 'enso-common/src/services/Backend'
+import { AssetType } from '@common/services/Backend'
 
 import { Label, Text } from '#/components/aria'
 import { Button } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/components/dashboard/ProjectIcon.tsx b/app/gui/src/dashboard/components/dashboard/ProjectIcon.tsx
index 5fa88512ae22..be2ae008873e 100644
--- a/app/gui/src/dashboard/components/dashboard/ProjectIcon.tsx
+++ b/app/gui/src/dashboard/components/dashboard/ProjectIcon.tsx
@@ -8,7 +8,7 @@ import {
   ProjectState,
   type Backend,
   type ProjectAsset,
-} from 'enso-common/src/services/Backend'
+} from '@common/services/Backend'
 
 import ArrowUpIcon from '#/assets/arrow_up.svg'
 import PlayIcon from '#/assets/play.svg'
diff --git a/app/gui/src/dashboard/components/dashboard/ProjectNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/ProjectNameColumn.tsx
index e19eca47ffc6..c0abd8b0a428 100644
--- a/app/gui/src/dashboard/components/dashboard/ProjectNameColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/ProjectNameColumn.tsx
@@ -1,15 +1,15 @@
 /** @file The icon and name of a {@link ProjectAsset}. */
 import { useMutation } from '@tanstack/react-query'
 
-import { isOnMacOS } from 'enso-common/src/detect'
 import {
   BackendType,
   IS_OPENING_OR_OPENED,
   isNewTitleValid,
   type ProjectAsset,
-} from 'enso-common/src/services/Backend'
-import { merger } from 'enso-common/src/utilities/data/object'
-import { isWhitespaceOnly } from 'enso-common/src/utilities/data/string'
+} from '@common/services/Backend'
+import { merger } from '@common/utilities/data/object'
+import { isWhitespaceOnly } from '@common/utilities/data/string'
+import { isOnMacOS } from '@common/utilities/detect'
 
 import type { AssetColumnProps } from '#/components/dashboard/column'
 import ProjectIcon, { CLOSED_PROJECT_STATE } from '#/components/dashboard/ProjectIcon'
diff --git a/app/gui/src/dashboard/components/dashboard/SecretNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/SecretNameColumn.tsx
index fb2e9921a07c..3b47c9b1b596 100644
--- a/app/gui/src/dashboard/components/dashboard/SecretNameColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/SecretNameColumn.tsx
@@ -1,8 +1,8 @@
 /** @file The icon and name of a {@link SecretAsset}. */
 import { useMutation } from '@tanstack/react-query'
 
-import type { SecretAsset } from 'enso-common/src/services/Backend'
-import { merger } from 'enso-common/src/utilities/data/object'
+import type { SecretAsset } from '@common/services/Backend'
+import { merger } from '@common/utilities/data/object'
 
 import KeyIcon from '#/assets/key.svg'
 import { Text } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/components/dashboard/column.ts b/app/gui/src/dashboard/components/dashboard/column.ts
index 40cb11d49af9..9e8c5740ab7b 100644
--- a/app/gui/src/dashboard/components/dashboard/column.ts
+++ b/app/gui/src/dashboard/components/dashboard/column.ts
@@ -1,7 +1,7 @@
 /** @file Column types and column display modes. */
 import { memo, type Dispatch, type JSX, type SetStateAction } from 'react'
 
-import type { AnyAsset, Asset, AssetId, BackendType } from 'enso-common/src/services/Backend'
+import type { AnyAsset, Asset, AssetId, BackendType } from '@common/services/Backend'
 
 import type { SortableColumn } from '#/components/dashboard/column/columnUtils'
 import { Column } from '#/components/dashboard/column/columnUtils'
diff --git a/app/gui/src/dashboard/components/dashboard/column/LabelsColumn.tsx b/app/gui/src/dashboard/components/dashboard/column/LabelsColumn.tsx
index fe4b51afd897..d7242da03b2c 100644
--- a/app/gui/src/dashboard/components/dashboard/column/LabelsColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/column/LabelsColumn.tsx
@@ -1,7 +1,7 @@
 /** @file A column listing the labels on this asset. */
 import { useMemo } from 'react'
 
-import { COLORS } from 'enso-common/src/services/Backend'
+import { COLORS } from '@common/services/Backend'
 
 import Plus2Icon from '#/assets/plus2.svg'
 import { Button, DialogTrigger } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/components/dashboard/column/ModifiedColumn.tsx b/app/gui/src/dashboard/components/dashboard/column/ModifiedColumn.tsx
index 8b15b80539ff..e2e2e386b056 100644
--- a/app/gui/src/dashboard/components/dashboard/column/ModifiedColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/column/ModifiedColumn.tsx
@@ -1,5 +1,5 @@
 /** @file A column displaying the time at which the asset was last modified. */
-import { formatDateTime } from 'enso-common/src/utilities/data/dateTime'
+import { formatDateTime } from '@common/utilities/data/dateTime'
 
 import { Text } from '#/components/AriaComponents'
 import type { AssetColumnProps } from '#/components/dashboard/column'
diff --git a/app/gui/src/dashboard/components/dashboard/column/NameColumn.tsx b/app/gui/src/dashboard/components/dashboard/column/NameColumn.tsx
index c638c5fb1080..c3cf28d878cc 100644
--- a/app/gui/src/dashboard/components/dashboard/column/NameColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/column/NameColumn.tsx
@@ -1,5 +1,5 @@
 /** @file The icon and name of an {@link Asset}. */
-import { AssetType, type Asset } from 'enso-common/src/services/Backend'
+import { AssetType, type Asset } from '@common/services/Backend'
 
 import type { AssetColumnProps } from '#/components/dashboard/column'
 import DatalinkNameColumn from '#/components/dashboard/DatalinkNameColumn'
diff --git a/app/gui/src/dashboard/components/dashboard/column/SharedWithColumn.tsx b/app/gui/src/dashboard/components/dashboard/column/SharedWithColumn.tsx
index 3e3cbe213cea..e87414899ad5 100644
--- a/app/gui/src/dashboard/components/dashboard/column/SharedWithColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/column/SharedWithColumn.tsx
@@ -1,7 +1,7 @@
 /** @file A column listing the users with which this asset is shared. */
 import { useRef } from 'react'
 
-import { getAssetPermissionId, getAssetPermissionName } from 'enso-common/src/services/Backend'
+import { getAssetPermissionId, getAssetPermissionName } from '@common/services/Backend'
 
 import Plus2Icon from '#/assets/plus2.svg'
 import { Button } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts b/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts
index d6d54add26ca..760f22978726 100644
--- a/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts
+++ b/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts
@@ -1,6 +1,6 @@
 /** @file Types and constants related to `Column`s. */
-import { BackendType, Plan, type User } from 'enso-common/src/services/Backend'
-import type { TextId } from 'enso-common/src/text'
+import { BackendType, Plan, type User } from '@common/services/Backend'
+import type { TextId } from '@common/text'
 
 import AccessedByProjectsIcon from '#/assets/accessed_by_projects.svg'
 import AccessedDataIcon from '#/assets/accessed_data.svg'
diff --git a/app/gui/src/dashboard/components/styled/FocusArea.tsx b/app/gui/src/dashboard/components/styled/FocusArea.tsx
index 7466fa67e361..fa79a850f8b0 100644
--- a/app/gui/src/dashboard/components/styled/FocusArea.tsx
+++ b/app/gui/src/dashboard/components/styled/FocusArea.tsx
@@ -1,7 +1,7 @@
 /** @file An area that contains focusable children. */
 import { type JSX, type RefCallback, useMemo, useRef, useState } from 'react'
 
-import { IS_DEV_MODE } from 'enso-common/src/detect'
+import { IS_DEV_MODE } from '@common/utilities/detect'
 
 import AreaFocusProvider from '#/providers/AreaFocusProvider'
 import FocusClassesProvider, { useFocusClasses } from '#/providers/FocusClassProvider'
diff --git a/app/gui/src/dashboard/components/styled/FocusRoot.tsx b/app/gui/src/dashboard/components/styled/FocusRoot.tsx
index 2dc9ab041da8..9cde2e77dbac 100644
--- a/app/gui/src/dashboard/components/styled/FocusRoot.tsx
+++ b/app/gui/src/dashboard/components/styled/FocusRoot.tsx
@@ -1,7 +1,7 @@
 /** @file An element that prevents navigation outside of itself. */
 import * as React from 'react'
 
-import * as detect from 'enso-common/src/detect'
+import * as detect from '@common/utilities/detect'
 
 import * as navigator2DProvider from '#/providers/Navigator2DProvider'
 
diff --git a/app/gui/src/dashboard/configurations/inputBindings.ts b/app/gui/src/dashboard/configurations/inputBindings.ts
index 6936f5d13c37..5e1b1ae9dfb8 100644
--- a/app/gui/src/dashboard/configurations/inputBindings.ts
+++ b/app/gui/src/dashboard/configurations/inputBindings.ts
@@ -1,5 +1,5 @@
 /** @file Shortcuts for the dashboard application. */
-import * as detect from 'enso-common/src/detect'
+import * as detect from '@common/utilities/detect'
 
 import AddDatalinkIcon from '#/assets/add_datalink.svg'
 import AddFolderIcon from '#/assets/add_folder.svg'
diff --git a/app/gui/src/dashboard/data/datalinkValidator.ts b/app/gui/src/dashboard/data/datalinkValidator.ts
index c12890c02846..7db13f4e2967 100644
--- a/app/gui/src/dashboard/data/datalinkValidator.ts
+++ b/app/gui/src/dashboard/data/datalinkValidator.ts
@@ -2,7 +2,7 @@
 import type * as ajv from 'ajv/dist/2020'
 import Ajv from 'ajv/dist/2020'
 
-import { assert } from 'enso-common/src/utilities/error'
+import { assert } from '@common/utilities/error'
 
 import SCHEMA from '#/data/datalinkSchema.json' with { type: 'json' }
 
diff --git a/app/gui/src/dashboard/events/assetEvent.ts b/app/gui/src/dashboard/events/assetEvent.ts
index d9fcd2f2b48d..fd77bcc4a809 100644
--- a/app/gui/src/dashboard/events/assetEvent.ts
+++ b/app/gui/src/dashboard/events/assetEvent.ts
@@ -1,7 +1,7 @@
 /** @file Events related to changes in asset state. */
 import type AssetEventType from '#/events/AssetEventType'
 
-import type { AssetId, DirectoryId, LabelName } from 'enso-common/src/services/Backend'
+import type { AssetId, DirectoryId, LabelName } from '@common/services/Backend'
 
 /** Properties common to all asset state change events. */
 interface AssetBaseEvent<Type extends AssetEventType> {
diff --git a/app/gui/src/dashboard/events/assetListEvent.ts b/app/gui/src/dashboard/events/assetListEvent.ts
index 01ea28f21185..0e60aa6cf6a4 100644
--- a/app/gui/src/dashboard/events/assetListEvent.ts
+++ b/app/gui/src/dashboard/events/assetListEvent.ts
@@ -5,7 +5,7 @@ import type {
   DirectoryId,
   ProjectAsset,
   S3ObjectVersionId,
-} from 'enso-common/src/services/Backend'
+} from '@common/services/Backend'
 
 import AssetListEventType from '#/events/AssetListEventType'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
diff --git a/app/gui/src/dashboard/hooks/backendHooks.tsx b/app/gui/src/dashboard/hooks/backendHooks.tsx
index 4e2577754e23..1cae7358d2fe 100644
--- a/app/gui/src/dashboard/hooks/backendHooks.tsx
+++ b/app/gui/src/dashboard/hooks/backendHooks.tsx
@@ -17,10 +17,6 @@ import {
 import { toast } from 'react-toastify'
 import invariant from 'tiny-invariant'
 
-import {
-  backendQueryOptions as backendQueryOptionsBase,
-  type BackendMethods,
-} from 'enso-common/src/backendQuery'
 import {
   assetIsDirectory,
   assetIsFile,
@@ -55,8 +51,12 @@ import {
   type UploadFileRequestParams,
   type User,
   type UserGroupInfo,
-} from 'enso-common/src/services/Backend'
-import { toRfc3339 } from 'enso-common/src/utilities/data/dateTime'
+} from '@common/services/Backend'
+import {
+  backendQueryOptions as backendQueryOptionsBase,
+  type BackendMethods,
+} from '@common/services/tanstackQuery/query'
+import { toRfc3339 } from '@common/utilities/data/dateTime'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useOpenProject } from '#/hooks/projectHooks'
diff --git a/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts b/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts
index 87cede9a5f28..109410ff1325 100644
--- a/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts
+++ b/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts
@@ -1,6 +1,6 @@
 /** @file Paywall configuration for different plans. */
-import { Plan } from 'enso-common/src/services/Backend'
-import type { TextId } from 'enso-common/src/text'
+import { Plan } from '@common/services/Backend'
+import type { TextId } from '@common/text'
 
 /** Registered paywall features. */
 export const PAYWALL_FEATURES = {
diff --git a/app/gui/src/dashboard/hooks/billing/paywallHooks.ts b/app/gui/src/dashboard/hooks/billing/paywallHooks.ts
index 6e1114f5585c..97a61a5c93e5 100644
--- a/app/gui/src/dashboard/hooks/billing/paywallHooks.ts
+++ b/app/gui/src/dashboard/hooks/billing/paywallHooks.ts
@@ -1,5 +1,5 @@
 /** @file Hooks for paywall-related functionality. */
-import type { Plan } from 'enso-common/src/services/Backend'
+import type { Plan } from '@common/services/Backend'
 
 import { usePaywallDevtools } from '#/components/Devtools'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
diff --git a/app/gui/src/dashboard/hooks/gtagHooks.ts b/app/gui/src/dashboard/hooks/gtagHooks.ts
index f295601253da..be1a27520ddc 100644
--- a/app/gui/src/dashboard/hooks/gtagHooks.ts
+++ b/app/gui/src/dashboard/hooks/gtagHooks.ts
@@ -1,7 +1,7 @@
 /** @file A hook that makes `gtag.event()` a no-op if the user is offline. */
 import * as React from 'react'
 
-import * as gtag from 'enso-common/src/gtag'
+import * as gtag from '@common/utilities/gtag'
 
 // ====================
 // === useGtagEvent ===
diff --git a/app/gui/src/dashboard/hooks/measureHooks.ts b/app/gui/src/dashboard/hooks/measureHooks.ts
index 23587a56be65..c9024881ff56 100644
--- a/app/gui/src/dashboard/hooks/measureHooks.ts
+++ b/app/gui/src/dashboard/hooks/measureHooks.ts
@@ -7,7 +7,7 @@ import { useEffect, useRef, useState } from 'react'
 
 import { frame, useMotionValue } from 'framer-motion'
 
-import { unsafeMutable } from 'enso-common/src/utilities/data/object'
+import { unsafeMutable } from '@common/utilities/data/object'
 
 import { useDebouncedCallback } from './debounceCallbackHooks'
 import { useEventCallback } from './eventCallbackHooks'
diff --git a/app/gui/src/dashboard/hooks/projectHooks.ts b/app/gui/src/dashboard/hooks/projectHooks.ts
index 1ebb24e70314..879930446a26 100644
--- a/app/gui/src/dashboard/hooks/projectHooks.ts
+++ b/app/gui/src/dashboard/hooks/projectHooks.ts
@@ -12,8 +12,8 @@ import {
   type Backend,
   type DirectoryId,
   type ProjectAsset,
-} from 'enso-common/src/services/Backend'
-import { merge } from 'enso-common/src/utilities/data/object'
+} from '@common/services/Backend'
+import { merge } from '@common/utilities/data/object'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 
diff --git a/app/gui/src/dashboard/hooks/setAssetHooks.ts b/app/gui/src/dashboard/hooks/setAssetHooks.ts
index 75f169eeff92..c941d1adc1c8 100644
--- a/app/gui/src/dashboard/hooks/setAssetHooks.ts
+++ b/app/gui/src/dashboard/hooks/setAssetHooks.ts
@@ -4,7 +4,7 @@
  */
 import { useCallback, type Dispatch, type SetStateAction } from 'react'
 
-import type { AnyAsset } from 'enso-common/src/services/Backend'
+import type { AnyAsset } from '@common/services/Backend'
 
 import AssetTreeNode, { type AnyAssetTreeNode } from '#/utilities/AssetTreeNode'
 
diff --git a/app/gui/src/dashboard/hooks/spotlightHooks.tsx b/app/gui/src/dashboard/hooks/spotlightHooks.tsx
index 38c269d2db9b..5d174c98a06a 100644
--- a/app/gui/src/dashboard/hooks/spotlightHooks.tsx
+++ b/app/gui/src/dashboard/hooks/spotlightHooks.tsx
@@ -1,7 +1,7 @@
 /** @file Hooks for showing an overlay with a cutout for a rectangular element. */
 import { startTransition, useEffect, useLayoutEffect, useState, type CSSProperties } from 'react'
 
-import { convertCSSUnitString } from 'enso-common/src/utilities/convertCSSUnits'
+import { convertCSSUnitString } from '@common/utilities/convertCSSUnits'
 
 import Portal from '#/components/Portal'
 import { useEventCallback } from './eventCallbackHooks'
diff --git a/app/gui/src/dashboard/hooks/storeHooks.ts b/app/gui/src/dashboard/hooks/storeHooks.ts
index c2e8b9845713..bbe51c581db1 100644
--- a/app/gui/src/dashboard/hooks/storeHooks.ts
+++ b/app/gui/src/dashboard/hooks/storeHooks.ts
@@ -14,7 +14,7 @@ import {
 import type { StoreApi } from 'zustand'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
 
-import { objectEquality, refEquality, shallowEquality } from 'enso-common/src/utilities/equalities'
+import { objectEquality, refEquality, shallowEquality } from '@common/utilities/equalities'
 
 /**
  * A type that allows to choose between different equality functions.
diff --git a/app/gui/src/dashboard/hooks/toastAndLogHooks.ts b/app/gui/src/dashboard/hooks/toastAndLogHooks.ts
index 322c87903476..5d702db66028 100644
--- a/app/gui/src/dashboard/hooks/toastAndLogHooks.ts
+++ b/app/gui/src/dashboard/hooks/toastAndLogHooks.ts
@@ -1,13 +1,13 @@
 /** @file */
 import { toast, type Id } from 'react-toastify'
 
-import type { Replacements, TextId } from 'enso-common/src/text'
+import type { Replacements, TextId } from '@common/text'
 
 import { useLogger } from '#/providers/LoggerProvider'
 import { useText } from '#/providers/TextProvider'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import { getMessageOrToString, type MustNotBeKnown } from 'enso-common/src/utilities/error'
+import { getMessageOrToString, type MustNotBeKnown } from '@common/utilities/error'
 
 /** The type of the `toastAndLog` function returned by {@link useToastAndLog}. */
 export type ToastAndLogCallback = ReturnType<typeof useToastAndLog>
diff --git a/app/gui/src/dashboard/index.tsx b/app/gui/src/dashboard/index.tsx
index 41e083c90cda..3a0c213a5513 100644
--- a/app/gui/src/dashboard/index.tsx
+++ b/app/gui/src/dashboard/index.tsx
@@ -11,7 +11,7 @@ import * as reactDOM from 'react-dom/client'
 import * as reactRouter from 'react-router-dom'
 import invariant from 'tiny-invariant'
 
-import * as detect from 'enso-common/src/detect'
+import * as detect from '@common/utilities/detect'
 
 import type * as app from '#/App'
 import App from '#/App'
diff --git a/app/gui/src/dashboard/layouts/AssetContextMenu.tsx b/app/gui/src/dashboard/layouts/AssetContextMenu.tsx
index 5d1410537723..0a3d9f2378e4 100644
--- a/app/gui/src/dashboard/layouts/AssetContextMenu.tsx
+++ b/app/gui/src/dashboard/layouts/AssetContextMenu.tsx
@@ -12,10 +12,10 @@ import {
   type Asset,
   type DirectoryId,
   type ProjectId,
-} from 'enso-common/src/services/Backend'
-import { normalizePath } from 'enso-common/src/utilities/data/fileInfo'
-import { mapNonNullish } from 'enso-common/src/utilities/data/nullable'
-import { merger } from 'enso-common/src/utilities/data/object'
+} from '@common/services/Backend'
+import { normalizePath } from '@common/utilities/data/fileInfo'
+import { mapNonNullish } from '@common/utilities/data/nullable'
+import { merger } from '@common/utilities/data/object'
 
 import ContextMenu from '#/components/ContextMenu'
 import ContextMenuEntry from '#/components/ContextMenuEntry'
diff --git a/app/gui/src/dashboard/layouts/AssetDiffView/AssetDiffView.tsx b/app/gui/src/dashboard/layouts/AssetDiffView/AssetDiffView.tsx
index 82fb1326f831..1d3517884ab6 100644
--- a/app/gui/src/dashboard/layouts/AssetDiffView/AssetDiffView.tsx
+++ b/app/gui/src/dashboard/layouts/AssetDiffView/AssetDiffView.tsx
@@ -2,7 +2,7 @@
 import { DiffEditor } from '@monaco-editor/react'
 import { useSuspenseQueries } from '@tanstack/react-query'
 
-import type { Backend, ProjectAsset, S3ObjectVersionId } from 'enso-common/src/services/Backend'
+import type { Backend, ProjectAsset, S3ObjectVersionId } from '@common/services/Backend'
 
 import { StatelessSpinner } from '#/components/StatelessSpinner'
 import { versionContentQueryOptions } from '#/layouts/AssetDiffView/useFetchVersionContent'
diff --git a/app/gui/src/dashboard/layouts/AssetDiffView/useFetchVersionContent.ts b/app/gui/src/dashboard/layouts/AssetDiffView/useFetchVersionContent.ts
index 1cd3637b789b..c07990f37cf6 100644
--- a/app/gui/src/dashboard/layouts/AssetDiffView/useFetchVersionContent.ts
+++ b/app/gui/src/dashboard/layouts/AssetDiffView/useFetchVersionContent.ts
@@ -3,7 +3,7 @@ import { queryOptions, useQuery } from '@tanstack/react-query'
 
 import { splitFileContents } from 'ydoc-shared/ensoFile'
 
-import type { Backend, ProjectId, S3ObjectVersionId } from 'enso-common/src/services/Backend'
+import type { Backend, ProjectId, S3ObjectVersionId } from '@common/services/Backend'
 
 const TWO_MINUTES_MS = 120_000
 
diff --git a/app/gui/src/dashboard/layouts/AssetDocs/AssetDocs.tsx b/app/gui/src/dashboard/layouts/AssetDocs/AssetDocs.tsx
index abb7812ff202..98dd1f8e619c 100644
--- a/app/gui/src/dashboard/layouts/AssetDocs/AssetDocs.tsx
+++ b/app/gui/src/dashboard/layouts/AssetDocs/AssetDocs.tsx
@@ -3,7 +3,7 @@ import { useCallback } from 'react'
 
 import { useSuspenseQuery } from '@tanstack/react-query'
 
-import { AssetType, type Asset, type Backend } from 'enso-common/src/services/Backend'
+import { AssetType, type Asset, type Backend } from '@common/services/Backend'
 
 import { MarkdownViewer } from '#/components/MarkdownViewer'
 import { Result } from '#/components/Result'
diff --git a/app/gui/src/dashboard/layouts/AssetPanel/AssetPanel.tsx b/app/gui/src/dashboard/layouts/AssetPanel/AssetPanel.tsx
index 408a3946ecf1..5c7737811fec 100644
--- a/app/gui/src/dashboard/layouts/AssetPanel/AssetPanel.tsx
+++ b/app/gui/src/dashboard/layouts/AssetPanel/AssetPanel.tsx
@@ -14,7 +14,7 @@ import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useBackend } from '#/providers/BackendProvider'
 import { useText } from '#/providers/TextProvider'
 import { useStore } from '#/utilities/zustand'
-import type { BackendType } from 'enso-common/src/services/Backend'
+import type { BackendType } from '@common/services/Backend'
 import { AnimatePresence, motion } from 'framer-motion'
 import { memo, startTransition } from 'react'
 import { AssetDocs } from '../AssetDocs'
diff --git a/app/gui/src/dashboard/layouts/AssetPanel/AssetPanelState.ts b/app/gui/src/dashboard/layouts/AssetPanel/AssetPanelState.ts
index 55d2c5c58a95..a776c299e367 100644
--- a/app/gui/src/dashboard/layouts/AssetPanel/AssetPanelState.ts
+++ b/app/gui/src/dashboard/layouts/AssetPanel/AssetPanelState.ts
@@ -7,7 +7,7 @@ import { startTransition } from 'react'
 
 import * as z from 'zod'
 
-import type { AnyAsset, Backend } from 'enso-common/src/services/Backend'
+import type { AnyAsset, Backend } from '@common/services/Backend'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import type { AssetPropertiesSpotlight } from '#/layouts/AssetProperties'
diff --git a/app/gui/src/dashboard/layouts/AssetProjectSession.tsx b/app/gui/src/dashboard/layouts/AssetProjectSession.tsx
index 31430b6c8d25..c0504c7a2469 100644
--- a/app/gui/src/dashboard/layouts/AssetProjectSession.tsx
+++ b/app/gui/src/dashboard/layouts/AssetProjectSession.tsx
@@ -1,6 +1,6 @@
 /** @file Displays information describing a specific version of an asset. */
-import type { Backend, ProjectAsset, ProjectSession } from 'enso-common/src/services/Backend'
-import { formatDateTime } from 'enso-common/src/utilities/data/dateTime'
+import type { Backend, ProjectAsset, ProjectSession } from '@common/services/Backend'
+import { formatDateTime } from '@common/utilities/data/dateTime'
 
 import LogsIcon from '#/assets/logs.svg'
 import { Button, DialogTrigger } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/layouts/AssetProjectSessions.tsx b/app/gui/src/dashboard/layouts/AssetProjectSessions.tsx
index 0c861ca99030..70615c2f148d 100644
--- a/app/gui/src/dashboard/layouts/AssetProjectSessions.tsx
+++ b/app/gui/src/dashboard/layouts/AssetProjectSessions.tsx
@@ -1,12 +1,7 @@
 /** @file A list of previous versions of an asset. */
 import { useSuspenseQuery } from '@tanstack/react-query'
 
-import {
-  AssetType,
-  BackendType,
-  type Backend,
-  type ProjectAsset,
-} from 'enso-common/src/services/Backend'
+import { AssetType, BackendType, type Backend, type ProjectAsset } from '@common/services/Backend'
 
 import { Result } from '#/components/Result'
 import AssetProjectSession from '#/layouts/AssetProjectSession'
diff --git a/app/gui/src/dashboard/layouts/AssetProperties.tsx b/app/gui/src/dashboard/layouts/AssetProperties.tsx
index 4a6e057f9279..178df8f1a479 100644
--- a/app/gui/src/dashboard/layouts/AssetProperties.tsx
+++ b/app/gui/src/dashboard/layouts/AssetProperties.tsx
@@ -10,9 +10,9 @@ import {
   type AnyAsset,
   type Backend,
   type DatalinkId,
-} from 'enso-common/src/services/Backend'
-import { normalizePath } from 'enso-common/src/utilities/data/fileInfo'
-import { mapNonNullish } from 'enso-common/src/utilities/data/nullable'
+} from '@common/services/Backend'
+import { normalizePath } from '@common/utilities/data/fileInfo'
+import { mapNonNullish } from '@common/utilities/data/nullable'
 
 import PenIcon from '#/assets/pen.svg'
 import { Heading } from '#/components/aria'
diff --git a/app/gui/src/dashboard/layouts/AssetSearchBar.tsx b/app/gui/src/dashboard/layouts/AssetSearchBar.tsx
index ce191285bf84..162de08069f3 100644
--- a/app/gui/src/dashboard/layouts/AssetSearchBar.tsx
+++ b/app/gui/src/dashboard/layouts/AssetSearchBar.tsx
@@ -19,10 +19,10 @@ import {
 
 import { AnimatePresence, motion } from 'framer-motion'
 
-import { isOnMacOS } from 'enso-common/src/detect'
-import type { Backend, Label as BackendLabel } from 'enso-common/src/services/Backend'
-import { shallowEqual } from 'enso-common/src/utilities/data/array'
-import { compareCaseInsensitive } from 'enso-common/src/utilities/data/string'
+import type { Backend, Label as BackendLabel } from '@common/services/Backend'
+import { shallowEqual } from '@common/utilities/data/array'
+import { compareCaseInsensitive } from '@common/utilities/data/string'
+import { isOnMacOS } from '@common/utilities/detect'
 
 import FindIcon from '#/assets/find.svg'
 import {
diff --git a/app/gui/src/dashboard/layouts/AssetVersions/AssetVersion.tsx b/app/gui/src/dashboard/layouts/AssetVersions/AssetVersion.tsx
index f5f8cbfe21cb..898f496cf15d 100644
--- a/app/gui/src/dashboard/layouts/AssetVersions/AssetVersion.tsx
+++ b/app/gui/src/dashboard/layouts/AssetVersions/AssetVersion.tsx
@@ -4,8 +4,8 @@ import {
   type AnyAsset,
   type Backend,
   type S3ObjectVersion,
-} from 'enso-common/src/services/Backend'
-import { formatDateTime } from 'enso-common/src/utilities/data/dateTime'
+} from '@common/services/Backend'
+import { formatDateTime } from '@common/utilities/data/dateTime'
 
 import CompareIcon from '#/assets/compare.svg'
 import DuplicateIcon from '#/assets/duplicate.svg'
diff --git a/app/gui/src/dashboard/layouts/AssetVersions/AssetVersions.tsx b/app/gui/src/dashboard/layouts/AssetVersions/AssetVersions.tsx
index f1c99d15bd9a..c198212882b3 100644
--- a/app/gui/src/dashboard/layouts/AssetVersions/AssetVersions.tsx
+++ b/app/gui/src/dashboard/layouts/AssetVersions/AssetVersions.tsx
@@ -10,10 +10,10 @@ import {
   type AnyAsset,
   type Backend,
   type S3ObjectVersion,
-} from 'enso-common/src/services/Backend'
-import { toRfc3339 } from 'enso-common/src/utilities/data/dateTime'
-import { noop } from 'enso-common/src/utilities/functions'
-import { uniqueString } from 'enso-common/src/utilities/uniqueString'
+} from '@common/services/Backend'
+import { toRfc3339 } from '@common/utilities/data/dateTime'
+import { noop } from '@common/utilities/functions'
+import { uniqueString } from '@common/utilities/uniqueString'
 
 import { Result } from '#/components/Result'
 import { useToastAndLog } from '#/hooks/toastAndLogHooks'
diff --git a/app/gui/src/dashboard/layouts/AssetVersions/useAssetVersions.ts b/app/gui/src/dashboard/layouts/AssetVersions/useAssetVersions.ts
index a4c2b85734a7..712df4ccfd61 100644
--- a/app/gui/src/dashboard/layouts/AssetVersions/useAssetVersions.ts
+++ b/app/gui/src/dashboard/layouts/AssetVersions/useAssetVersions.ts
@@ -1,7 +1,7 @@
 /** @file Fetches the versions of the selected project asset. */
 import { queryOptions, useQuery } from '@tanstack/react-query'
 
-import type { AssetId, Backend } from 'enso-common/src/services/Backend'
+import type { AssetId, Backend } from '@common/services/Backend'
 
 /** Options for {@link useAssetVersions}. */
 export interface AssetVersionsQueryOptions {
diff --git a/app/gui/src/dashboard/layouts/AssetsTable.tsx b/app/gui/src/dashboard/layouts/AssetsTable.tsx
index b5562b07422c..c0944f934ba5 100644
--- a/app/gui/src/dashboard/layouts/AssetsTable.tsx
+++ b/app/gui/src/dashboard/layouts/AssetsTable.tsx
@@ -36,12 +36,12 @@ import {
   type DirectoryId,
   type LabelName,
   type ProjectAsset,
-} from 'enso-common/src/services/Backend'
-import { toRfc3339 } from 'enso-common/src/utilities/data/dateTime'
-import { fileExtension } from 'enso-common/src/utilities/data/fileInfo'
-import { EMPTY_SET, setPresence, withPresence } from 'enso-common/src/utilities/data/set'
-import { noop } from 'enso-common/src/utilities/functions'
-import { uniqueString } from 'enso-common/src/utilities/uniqueString'
+} from '@common/services/Backend'
+import { toRfc3339 } from '@common/utilities/data/dateTime'
+import { fileExtension } from '@common/utilities/data/fileInfo'
+import { EMPTY_SET, setPresence, withPresence } from '@common/utilities/data/set'
+import { noop } from '@common/utilities/functions'
+import { uniqueString } from '@common/utilities/uniqueString'
 
 import DropFilesImage from '#/assets/drop_files.svg'
 import { FileTrigger, mergeProps } from '#/components/aria'
diff --git a/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx b/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx
index 13cedeaff0d8..ab1f4d7302ee 100644
--- a/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx
+++ b/app/gui/src/dashboard/layouts/AssetsTableContextMenu.tsx
@@ -12,8 +12,8 @@ import {
   type AssetId,
   type Backend,
   type DirectoryId,
-} from 'enso-common/src/services/Backend'
-import { EMPTY_SET } from 'enso-common/src/utilities/data/set'
+} from '@common/services/Backend'
+import { EMPTY_SET } from '@common/utilities/data/set'
 
 import ContextMenu from '#/components/ContextMenu'
 import ContextMenuEntry from '#/components/ContextMenuEntry'
diff --git a/app/gui/src/dashboard/layouts/CategorySwitcher.tsx b/app/gui/src/dashboard/layouts/CategorySwitcher.tsx
index a663824da7af..e818a0ed7cff 100644
--- a/app/gui/src/dashboard/layouts/CategorySwitcher.tsx
+++ b/app/gui/src/dashboard/layouts/CategorySwitcher.tsx
@@ -15,8 +15,8 @@ import {
   type AssetId,
   type User,
   type UserGroupInfo,
-} from 'enso-common/src/services/Backend'
-import { getFileName } from 'enso-common/src/utilities/data/fileInfo'
+} from '@common/services/Backend'
+import { getFileName } from '@common/utilities/data/fileInfo'
 
 import { SEARCH_PARAMS_PREFIX } from '#/appUtils'
 import CloudIcon from '#/assets/cloud.svg'
diff --git a/app/gui/src/dashboard/layouts/CategorySwitcher/Category.ts b/app/gui/src/dashboard/layouts/CategorySwitcher/Category.ts
index 4e59e6066c00..67f60b59c832 100644
--- a/app/gui/src/dashboard/layouts/CategorySwitcher/Category.ts
+++ b/app/gui/src/dashboard/layouts/CategorySwitcher/Category.ts
@@ -11,7 +11,7 @@ import {
   type Path,
   type User,
   type UserGroupInfo,
-} from 'enso-common/src/services/Backend'
+} from '@common/services/Backend'
 
 import AssetEventType from '#/events/AssetEventType'
 import { backendMutationOptions, useBackendQuery } from '#/hooks/backendHooks'
diff --git a/app/gui/src/dashboard/layouts/Chat.tsx b/app/gui/src/dashboard/layouts/Chat.tsx
index d1985d2a93ee..2d20bec8d973 100644
--- a/app/gui/src/dashboard/layouts/Chat.tsx
+++ b/app/gui/src/dashboard/layouts/Chat.tsx
@@ -11,9 +11,9 @@ import {
 
 import { createPortal } from 'react-dom'
 
-import { formatDateTimeChatFriendly } from 'enso-common/src/utilities/data/dateTime'
-import { newtypeConstructor } from 'enso-common/src/utilities/data/newtype'
-import { merge } from 'enso-common/src/utilities/data/object'
+import { formatDateTimeChatFriendly } from '@common/utilities/data/dateTime'
+import { newtypeConstructor } from '@common/utilities/data/newtype'
+import { merge } from '@common/utilities/data/object'
 
 import CloseLargeIcon from '#/assets/close_large.svg'
 import DefaultUserIcon from '#/assets/default_user.svg'
diff --git a/app/gui/src/dashboard/layouts/Drive.tsx b/app/gui/src/dashboard/layouts/Drive.tsx
index 4d778af00ce7..62ab46408361 100644
--- a/app/gui/src/dashboard/layouts/Drive.tsx
+++ b/app/gui/src/dashboard/layouts/Drive.tsx
@@ -3,9 +3,9 @@ import { memo, useDeferredValue, useEffect, useState, type Ref } from 'react'
 
 import { toast } from 'react-toastify'
 
-import { DirectoryDoesNotExistError, Plan } from 'enso-common/src/services/Backend'
-import { download } from 'enso-common/src/utilities/download'
-import { getDownloadUrl } from 'enso-common/src/utilities/github'
+import { DirectoryDoesNotExistError, Plan } from '@common/services/Backend'
+import { download } from '@common/utilities/download'
+import { getDownloadUrl } from '@common/utilities/github'
 
 import { SUBSCRIBE_PATH } from '#/appUtils'
 import { Button, ButtonGroup } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/layouts/Drive/assetTreeHooks.tsx b/app/gui/src/dashboard/layouts/Drive/assetTreeHooks.tsx
index 80730b1ff068..ea9e95df86fc 100644
--- a/app/gui/src/dashboard/layouts/Drive/assetTreeHooks.tsx
+++ b/app/gui/src/dashboard/layouts/Drive/assetTreeHooks.tsx
@@ -3,7 +3,7 @@ import { useMemo } from 'react'
 
 import { useIsFetching, useQueries, useQuery, useQueryClient } from '@tanstack/react-query'
 
-import type { DirectoryId } from 'enso-common/src/services/Backend'
+import type { DirectoryId } from '@common/services/Backend'
 import {
   assetIsDirectory,
   createRootDirectoryAsset,
@@ -12,7 +12,7 @@ import {
   createSpecialLoadingAsset,
   type AnyAsset,
   type DirectoryAsset,
-} from 'enso-common/src/services/Backend'
+} from '@common/services/Backend'
 
 import { listDirectoryQueryOptions } from '#/hooks/backendHooks'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
diff --git a/app/gui/src/dashboard/layouts/Drive/assetsTableItemsHooks.tsx b/app/gui/src/dashboard/layouts/Drive/assetsTableItemsHooks.tsx
index 3b11be79d87a..4ad88177f48c 100644
--- a/app/gui/src/dashboard/layouts/Drive/assetsTableItemsHooks.tsx
+++ b/app/gui/src/dashboard/layouts/Drive/assetsTableItemsHooks.tsx
@@ -1,11 +1,11 @@
 /** @file A hook to return the items in the assets table. */
 import { startTransition, useMemo } from 'react'
 
-import type { AnyAsset, AssetId } from 'enso-common/src/services/Backend'
-import { AssetType, getAssetPermissionName } from 'enso-common/src/services/Backend'
-import { fileExtension } from 'enso-common/src/utilities/data/fileInfo'
-import { regexEscape } from 'enso-common/src/utilities/data/string'
-import { PermissionAction } from 'enso-common/src/utilities/permissions'
+import type { AnyAsset, AssetId } from '@common/services/Backend'
+import { AssetType, getAssetPermissionName } from '@common/services/Backend'
+import { fileExtension } from '@common/utilities/data/fileInfo'
+import { regexEscape } from '@common/utilities/data/string'
+import { PermissionAction } from '@common/utilities/permissions'
 
 import type { SortableColumn } from '#/components/dashboard/column/columnUtils'
 import { Column } from '#/components/dashboard/column/columnUtils'
diff --git a/app/gui/src/dashboard/layouts/Drive/directoryIdsHooks.tsx b/app/gui/src/dashboard/layouts/Drive/directoryIdsHooks.tsx
index 7138d9ad8d92..441a6fd72b18 100644
--- a/app/gui/src/dashboard/layouts/Drive/directoryIdsHooks.tsx
+++ b/app/gui/src/dashboard/layouts/Drive/directoryIdsHooks.tsx
@@ -4,7 +4,7 @@ import { useMemo } from 'react'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import invariant from 'tiny-invariant'
 
-import { Path, createRootDirectoryAsset } from 'enso-common/src/services/Backend'
+import { Path, createRootDirectoryAsset } from '@common/services/Backend'
 
 import type { Category } from '#/layouts/CategorySwitcher/Category'
 import { useFullUserSession } from '#/providers/AuthProvider'
diff --git a/app/gui/src/dashboard/layouts/DriveBar.tsx b/app/gui/src/dashboard/layouts/DriveBar.tsx
index 2f6b9ef7f2bd..72316b9dd75b 100644
--- a/app/gui/src/dashboard/layouts/DriveBar.tsx
+++ b/app/gui/src/dashboard/layouts/DriveBar.tsx
@@ -6,8 +6,8 @@ import { useEffect, useRef, type Dispatch, type SetStateAction } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
-import type { Backend } from 'enso-common/src/services/Backend'
-import { inputFiles } from 'enso-common/src/utilities/input'
+import type { Backend } from '@common/services/Backend'
+import { inputFiles } from '@common/utilities/input'
 
 import AddDatalinkIcon from '#/assets/add_datalink.svg'
 import AddFolderIcon from '#/assets/add_folder.svg'
diff --git a/app/gui/src/dashboard/layouts/Editor.tsx b/app/gui/src/dashboard/layouts/Editor.tsx
index 57b2338a8ffb..8545ca718838 100644
--- a/app/gui/src/dashboard/layouts/Editor.tsx
+++ b/app/gui/src/dashboard/layouts/Editor.tsx
@@ -9,7 +9,7 @@ import {
   type Backend,
   type Project,
   type ProjectId,
-} from 'enso-common/src/services/Backend'
+} from '@common/services/Backend'
 
 import { SEARCH_PARAMS_PREFIX } from '#/appUtils'
 import { ErrorBoundary, ErrorDisplay } from '#/components/ErrorBoundary'
diff --git a/app/gui/src/dashboard/layouts/GlobalContextMenu.tsx b/app/gui/src/dashboard/layouts/GlobalContextMenu.tsx
index 0b2e06d40bee..645fec4ea04a 100644
--- a/app/gui/src/dashboard/layouts/GlobalContextMenu.tsx
+++ b/app/gui/src/dashboard/layouts/GlobalContextMenu.tsx
@@ -1,8 +1,8 @@
 /** @file A context menu available everywhere in the directory. */
 import { useStore } from 'zustand'
 
-import { BackendType, type Backend, type DirectoryId } from 'enso-common/src/services/Backend'
-import { inputFiles } from 'enso-common/src/utilities/input'
+import { BackendType, type Backend, type DirectoryId } from '@common/services/Backend'
+import { inputFiles } from '@common/utilities/input'
 
 import ContextMenu from '#/components/ContextMenu'
 import ContextMenuEntry from '#/components/ContextMenuEntry'
diff --git a/app/gui/src/dashboard/layouts/Labels.tsx b/app/gui/src/dashboard/layouts/Labels.tsx
index 44f8e856e68a..56710b471384 100644
--- a/app/gui/src/dashboard/layouts/Labels.tsx
+++ b/app/gui/src/dashboard/layouts/Labels.tsx
@@ -3,8 +3,8 @@ import type { Dispatch, SetStateAction } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
-import type { Backend } from 'enso-common/src/services/Backend'
-import { shallowEqual } from 'enso-common/src/utilities/data/array'
+import type { Backend } from '@common/services/Backend'
+import { shallowEqual } from '@common/utilities/data/array'
 
 import PlusIcon from '#/assets/plus.svg'
 import Trash2Icon from '#/assets/trash2.svg'
diff --git a/app/gui/src/dashboard/layouts/Settings/ActivityLogSettingsSection.tsx b/app/gui/src/dashboard/layouts/Settings/ActivityLogSettingsSection.tsx
index 4f1c7eff0325..0b4285ad3649 100644
--- a/app/gui/src/dashboard/layouts/Settings/ActivityLogSettingsSection.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/ActivityLogSettingsSection.tsx
@@ -17,8 +17,8 @@ import { useBackendQuery } from '#/hooks/backendHooks'
 import { useText } from '#/providers/TextProvider'
 import { nextSortDirection, SortDirection, type SortInfo } from '#/utilities/sorting'
 import { twMerge } from '#/utilities/tailwindMerge'
-import { EVENT_TYPES, EventType, type Backend, type Event } from 'enso-common/src/services/Backend'
-import { formatDateTime } from 'enso-common/src/utilities/data/dateTime'
+import { EVENT_TYPES, EventType, type Backend, type Event } from '@common/services/Backend'
+import { formatDateTime } from '@common/utilities/data/dateTime'
 
 const EVENT_TYPE_ICON: Record<EventType, string> = {
   [EventType.GetSecret]: KeyIcon,
diff --git a/app/gui/src/dashboard/layouts/Settings/KeyboardShortcutsSettingsSection.tsx b/app/gui/src/dashboard/layouts/Settings/KeyboardShortcutsSettingsSection.tsx
index e66a20c22943..319e9ccd5553 100644
--- a/app/gui/src/dashboard/layouts/Settings/KeyboardShortcutsSettingsSection.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/KeyboardShortcutsSettingsSection.tsx
@@ -1,7 +1,7 @@
 /** @file Settings tab for viewing and editing keyboard shortcuts. */
 import { useMemo, useRef } from 'react'
 
-import { unsafeEntries } from 'enso-common/src/utilities/data/object'
+import { unsafeEntries } from '@common/utilities/data/object'
 
 import BlankIcon from '#/assets/blank.svg'
 import CrossIcon from '#/assets/cross.svg'
diff --git a/app/gui/src/dashboard/layouts/Settings/MembersSettingsSection.tsx b/app/gui/src/dashboard/layouts/Settings/MembersSettingsSection.tsx
index fee1cd8dbd71..82adb3eca223 100644
--- a/app/gui/src/dashboard/layouts/Settings/MembersSettingsSection.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/MembersSettingsSection.tsx
@@ -1,7 +1,7 @@
 /** @file Settings tab for viewing and editing organization members. */
 import { useMutation, useSuspenseQueries } from '@tanstack/react-query'
 
-import type { EmailAddress, Invitation, UserId } from 'enso-common/src/services/Backend'
+import type { EmailAddress, Invitation, UserId } from '@common/services/Backend'
 
 import { Button, ButtonGroup, CopyButton, DialogTrigger, Text } from '#/components/AriaComponents'
 import { PaywallDialogButton } from '#/components/Paywall'
diff --git a/app/gui/src/dashboard/layouts/Settings/MembersTable.tsx b/app/gui/src/dashboard/layouts/Settings/MembersTable.tsx
index 43d71a6a4a40..55c59b519f7e 100644
--- a/app/gui/src/dashboard/layouts/Settings/MembersTable.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/MembersTable.tsx
@@ -1,7 +1,7 @@
 /** @file A list of members in the organization. */
 import { useEffect, useMemo, useRef, useState } from 'react'
 
-import { UserId, type Backend, type User } from 'enso-common/src/services/Backend'
+import { UserId, type Backend, type User } from '@common/services/Backend'
 
 import {
   Column,
diff --git a/app/gui/src/dashboard/layouts/Settings/OrganizationProfilePictureInput.tsx b/app/gui/src/dashboard/layouts/Settings/OrganizationProfilePictureInput.tsx
index 2d3a48f855b5..6a407a7c077d 100644
--- a/app/gui/src/dashboard/layouts/Settings/OrganizationProfilePictureInput.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/OrganizationProfilePictureInput.tsx
@@ -1,7 +1,7 @@
 /** @file The input for viewing and changing the organization's profile picture. */
 import type { ChangeEvent } from 'react'
 
-import type { Backend } from 'enso-common/src/services/Backend'
+import type { Backend } from '@common/services/Backend'
 
 import { useMutation } from '@tanstack/react-query'
 
diff --git a/app/gui/src/dashboard/layouts/Settings/ProfilePictureInput.tsx b/app/gui/src/dashboard/layouts/Settings/ProfilePictureInput.tsx
index ab2c09d6c1c8..4b2fb5e62266 100644
--- a/app/gui/src/dashboard/layouts/Settings/ProfilePictureInput.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/ProfilePictureInput.tsx
@@ -3,7 +3,7 @@ import type { ChangeEvent } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
-import type { Backend } from 'enso-common/src/services/Backend'
+import type { Backend } from '@common/services/Backend'
 
 import DefaultUserIcon from '#/assets/default_user.svg'
 import { Input, Label, Text } from '#/components/aria'
diff --git a/app/gui/src/dashboard/layouts/Settings/UserGroupRow.tsx b/app/gui/src/dashboard/layouts/Settings/UserGroupRow.tsx
index 9d33d4a4bab8..c702452842a2 100644
--- a/app/gui/src/dashboard/layouts/Settings/UserGroupRow.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/UserGroupRow.tsx
@@ -1,5 +1,5 @@
 /** @file A row representing a user group. */
-import type { UserGroupInfo } from 'enso-common/src/services/Backend'
+import type { UserGroupInfo } from '@common/services/Backend'
 
 import Cross2 from '#/assets/cross2.svg'
 import { Cell, Row } from '#/components/aria'
diff --git a/app/gui/src/dashboard/layouts/Settings/UserGroupUserRow.tsx b/app/gui/src/dashboard/layouts/Settings/UserGroupUserRow.tsx
index 189aca1a446c..759af105425d 100644
--- a/app/gui/src/dashboard/layouts/Settings/UserGroupUserRow.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/UserGroupUserRow.tsx
@@ -1,5 +1,5 @@
 /** @file A row of the user groups table representing a user. */
-import type { User, UserGroupInfo } from 'enso-common/src/services/Backend'
+import type { User, UserGroupInfo } from '@common/services/Backend'
 
 import Cross2 from '#/assets/cross2.svg'
 import { Cell, Row } from '#/components/aria'
diff --git a/app/gui/src/dashboard/layouts/Settings/UserGroupsSettingsSection.tsx b/app/gui/src/dashboard/layouts/Settings/UserGroupsSettingsSection.tsx
index ebb971c8b010..6ad8ed83232a 100644
--- a/app/gui/src/dashboard/layouts/Settings/UserGroupsSettingsSection.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/UserGroupsSettingsSection.tsx
@@ -9,7 +9,7 @@ import {
   type Backend,
   type User,
   type UserGroupInfo,
-} from 'enso-common/src/services/Backend'
+} from '@common/services/Backend'
 
 import { Cell, Column, Row, Table, TableBody, TableHeader, useDragAndDrop } from '#/components/aria'
 import { Button, ButtonGroup } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/layouts/Settings/UserRow.tsx b/app/gui/src/dashboard/layouts/Settings/UserRow.tsx
index 4c139bba67b0..32fada60a55c 100644
--- a/app/gui/src/dashboard/layouts/Settings/UserRow.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/UserRow.tsx
@@ -1,5 +1,5 @@
 /** @file A row representing a user in a table of users. */
-import type { User } from 'enso-common/src/services/Backend'
+import type { User } from '@common/services/Backend'
 
 import Cross2 from '#/assets/cross2.svg'
 import { Button as AriaButton, Cell, FocusRing, Row } from '#/components/aria'
diff --git a/app/gui/src/dashboard/layouts/Settings/data.tsx b/app/gui/src/dashboard/layouts/Settings/data.tsx
index bc40535ed622..276d33a705a8 100644
--- a/app/gui/src/dashboard/layouts/Settings/data.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/data.tsx
@@ -11,10 +11,10 @@ import {
   type Backend,
   type OrganizationInfo,
   type User,
-} from 'enso-common/src/services/Backend'
-import type { TextId } from 'enso-common/src/text'
-import { normalizePath } from 'enso-common/src/utilities/data/fileInfo'
-import { pick, unsafeEntries } from 'enso-common/src/utilities/data/object'
+} from '@common/services/Backend'
+import type { TextId } from '@common/text'
+import { normalizePath } from '@common/utilities/data/fileInfo'
+import { pick, unsafeEntries } from '@common/utilities/data/object'
 
 import ComputerIcon from '#/assets/computer.svg'
 import CreditCardIcon from '#/assets/credit_card.svg'
diff --git a/app/gui/src/dashboard/layouts/Settings/index.tsx b/app/gui/src/dashboard/layouts/Settings/index.tsx
index 6838afc152b3..43a758b0ae87 100644
--- a/app/gui/src/dashboard/layouts/Settings/index.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/index.tsx
@@ -3,9 +3,9 @@ import * as React from 'react'
 
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
-import type { Backend } from 'enso-common/src/services/Backend'
-import { includesPredicate } from 'enso-common/src/utilities/data/array'
-import { regexEscape } from 'enso-common/src/utilities/data/string'
+import type { Backend } from '@common/services/Backend'
+import { includesPredicate } from '@common/utilities/data/array'
+import { regexEscape } from '@common/utilities/data/string'
 
 import BurgerMenuIcon from '#/assets/burger_menu.svg'
 import { Heading, MenuTrigger } from '#/components/aria'
diff --git a/app/gui/src/dashboard/layouts/TabBar.tsx b/app/gui/src/dashboard/layouts/TabBar.tsx
index a28060068f16..3e0a06b413f1 100644
--- a/app/gui/src/dashboard/layouts/TabBar.tsx
+++ b/app/gui/src/dashboard/layouts/TabBar.tsx
@@ -4,8 +4,8 @@ import { useEffect, useMemo, useRef, type PropsWithChildren, type ReactNode } fr
 import { useQuery } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 
-import { ProjectState } from 'enso-common/src/services/Backend'
-import type { TextId } from 'enso-common/src/text'
+import { ProjectState } from '@common/services/Backend'
+import type { TextId } from '@common/text'
 
 import { AnimatedBackground } from '#/components/AnimatedBackground'
 import { Tab as AriaTab, TabList, type TabListProps } from '#/components/aria'
diff --git a/app/gui/src/dashboard/layouts/UserBar.tsx b/app/gui/src/dashboard/layouts/UserBar.tsx
index 81d20e852cb7..dbb2df28e36d 100644
--- a/app/gui/src/dashboard/layouts/UserBar.tsx
+++ b/app/gui/src/dashboard/layouts/UserBar.tsx
@@ -1,5 +1,5 @@
 /** @file A toolbar containing chat and the user menu. */
-import { Plan } from 'enso-common/src/services/Backend'
+import { Plan } from '@common/services/Backend'
 
 import { SUBSCRIBE_PATH } from '#/appUtils'
 import ChatIcon from '#/assets/chat.svg'
diff --git a/app/gui/src/dashboard/layouts/UserMenu.tsx b/app/gui/src/dashboard/layouts/UserMenu.tsx
index abd76a2cbf26..b41eaf5db970 100644
--- a/app/gui/src/dashboard/layouts/UserMenu.tsx
+++ b/app/gui/src/dashboard/layouts/UserMenu.tsx
@@ -1,7 +1,7 @@
 /** @file A dropdown menu of user actions and settings. */
-import { Plan } from 'enso-common/src/services/Backend'
-import { download } from 'enso-common/src/utilities/download'
-import { getDownloadUrl } from 'enso-common/src/utilities/github'
+import { Plan } from '@common/services/Backend'
+import { download } from '@common/utilities/download'
+import { getDownloadUrl } from '@common/utilities/github'
 
 import DefaultUserIcon from '#/assets/default_user.svg'
 import { Popover, Text } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/layouts/VersionChecker.tsx b/app/gui/src/dashboard/layouts/VersionChecker.tsx
index 84d820354406..75b64d6517dc 100644
--- a/app/gui/src/dashboard/layouts/VersionChecker.tsx
+++ b/app/gui/src/dashboard/layouts/VersionChecker.tsx
@@ -3,9 +3,9 @@ import { startTransition, useState } from 'react'
 
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
-import { IS_DEV_MODE } from 'enso-common/src/detect'
-import { download } from 'enso-common/src/utilities/download'
-import { getDownloadUrl, getLatestRelease } from 'enso-common/src/utilities/github'
+import { IS_DEV_MODE } from '@common/utilities/detect'
+import { download } from '@common/utilities/download'
+import { getDownloadUrl, getLatestRelease } from '@common/utilities/github'
 
 import DownloadIcon from '#/assets/download.svg'
 import NewTabIcon from '#/assets/new_tab.svg'
diff --git a/app/gui/src/dashboard/modals/AboutModal.tsx b/app/gui/src/dashboard/modals/AboutModal.tsx
index 4717cf1f0e7c..e4856e61a4c2 100644
--- a/app/gui/src/dashboard/modals/AboutModal.tsx
+++ b/app/gui/src/dashboard/modals/AboutModal.tsx
@@ -1,7 +1,7 @@
 /** @file Modal for confirming delete of any type of asset. */
 import * as React from 'react'
 
-import type * as text from 'enso-common/src/text'
+import type * as text from '@common/text'
 
 import LogoIcon from '#/assets/enso_logo.svg'
 
diff --git a/app/gui/src/dashboard/modals/CaptureKeyboardShortcutModal.tsx b/app/gui/src/dashboard/modals/CaptureKeyboardShortcutModal.tsx
index 99b13116ed35..07e174620f0f 100644
--- a/app/gui/src/dashboard/modals/CaptureKeyboardShortcutModal.tsx
+++ b/app/gui/src/dashboard/modals/CaptureKeyboardShortcutModal.tsx
@@ -1,7 +1,7 @@
 /** @file A modal for capturing an arbitrary keyboard shortcut. */
 import { useState, type KeyboardEvent as ReactKeyboardEvent } from 'react'
 
-import { isOnMacOS } from 'enso-common/src/detect'
+import { isOnMacOS } from '@common/utilities/detect'
 
 import { ButtonGroup, Dialog, DialogDismiss, Form, Text } from '#/components/AriaComponents'
 import KeyboardShortcut from '#/components/dashboard/KeyboardShortcut'
diff --git a/app/gui/src/dashboard/modals/DuplicateAssetsModal.tsx b/app/gui/src/dashboard/modals/DuplicateAssetsModal.tsx
index c4123e4024da..4b12cb397c15 100644
--- a/app/gui/src/dashboard/modals/DuplicateAssetsModal.tsx
+++ b/app/gui/src/dashboard/modals/DuplicateAssetsModal.tsx
@@ -11,9 +11,9 @@ import {
   type DirectoryId,
   type FileAsset,
   type ProjectAsset,
-} from 'enso-common/src/services/Backend'
-import { basenameAndExtension } from 'enso-common/src/utilities/data/fileInfo'
-import { unsafeMutable } from 'enso-common/src/utilities/data/object'
+} from '@common/services/Backend'
+import { basenameAndExtension } from '@common/utilities/data/fileInfo'
+import { unsafeMutable } from '@common/utilities/data/object'
 
 import { Heading, Text } from '#/components/aria'
 import { Button, ButtonGroup } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersForm.tsx b/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersForm.tsx
index f34a4b6701f2..b2d93756714a 100644
--- a/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersForm.tsx
+++ b/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersForm.tsx
@@ -4,8 +4,8 @@ import { useRef } from 'react'
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
 import isEmail from 'validator/es/lib/isEmail'
 
-import type { EmailAddress } from 'enso-common/src/services/Backend'
-import { parseUserEmails } from 'enso-common/src/utilities/data/email'
+import type { EmailAddress } from '@common/services/Backend'
+import { parseUserEmails } from '@common/utilities/data/email'
 
 import { Form, ResizableContentEditableInput } from '#/components/AriaComponents'
 import { PaywallAlert } from '#/components/Paywall'
diff --git a/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersModal.tsx b/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersModal.tsx
index 57a5251d4b8d..2b499a18af4f 100644
--- a/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersModal.tsx
+++ b/app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersModal.tsx
@@ -1,7 +1,7 @@
 /** @file A modal with inputs for user email and permission level. */
 import { useState } from 'react'
 
-import type { EmailAddress, OrganizationId } from 'enso-common/src/services/Backend'
+import type { EmailAddress, OrganizationId } from '@common/services/Backend'
 
 import { Dialog, Popover } from '#/components/AriaComponents'
 import { Stepper } from '#/components/Stepper'
diff --git a/app/gui/src/dashboard/modals/ManageLabelsModal.tsx b/app/gui/src/dashboard/modals/ManageLabelsModal.tsx
index e569381bb138..b535b93eb262 100644
--- a/app/gui/src/dashboard/modals/ManageLabelsModal.tsx
+++ b/app/gui/src/dashboard/modals/ManageLabelsModal.tsx
@@ -9,8 +9,8 @@ import {
   type AnyAsset,
   type Backend,
   type LChColor,
-} from 'enso-common/src/services/Backend'
-import { regexEscape } from 'enso-common/src/utilities/data/string'
+} from '@common/services/Backend'
+import { regexEscape } from '@common/utilities/data/string'
 
 import { ButtonGroup, Checkbox, Form, Input, Popover, Text } from '#/components/AriaComponents'
 import ColorPicker from '#/components/ColorPicker'
diff --git a/app/gui/src/dashboard/modals/ManagePermissionsModal.tsx b/app/gui/src/dashboard/modals/ManagePermissionsModal.tsx
index a98711e47ca1..f671d799820b 100644
--- a/app/gui/src/dashboard/modals/ManagePermissionsModal.tsx
+++ b/app/gui/src/dashboard/modals/ManagePermissionsModal.tsx
@@ -18,7 +18,7 @@ import {
   type UserGroupInfo,
   type UserInfo,
   type UserPermissionIdentifier,
-} from 'enso-common/src/services/Backend'
+} from '@common/services/Backend'
 
 import { Heading } from '#/components/aria'
 import { Button } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/modals/NewLabelModal.tsx b/app/gui/src/dashboard/modals/NewLabelModal.tsx
index 1e623eea8442..272068d6d2e4 100644
--- a/app/gui/src/dashboard/modals/NewLabelModal.tsx
+++ b/app/gui/src/dashboard/modals/NewLabelModal.tsx
@@ -4,8 +4,8 @@ import * as React from 'react'
 import { useMutation } from '@tanstack/react-query'
 import * as z from 'zod'
 
-import { findLeastUsedColor, type Backend } from 'enso-common/src/services/Backend'
-import { EMPTY_ARRAY } from 'enso-common/src/utilities/data/array'
+import { findLeastUsedColor, type Backend } from '@common/services/Backend'
+import { EMPTY_ARRAY } from '@common/utilities/data/array'
 
 import { ButtonGroup, DialogDismiss, Form, Input, Popover, Text } from '#/components/AriaComponents'
 import ColorPicker from '#/components/ColorPicker'
diff --git a/app/gui/src/dashboard/modals/NewUserGroupModal.tsx b/app/gui/src/dashboard/modals/NewUserGroupModal.tsx
index 20a2a5755348..214e054c53ba 100644
--- a/app/gui/src/dashboard/modals/NewUserGroupModal.tsx
+++ b/app/gui/src/dashboard/modals/NewUserGroupModal.tsx
@@ -3,8 +3,8 @@ import { useMemo, useState, type MouseEvent } from 'react'
 
 import { useMutation } from '@tanstack/react-query'
 
-import { type Backend } from 'enso-common/src/services/Backend'
-import { normalizeName } from 'enso-common/src/utilities/data/string'
+import { type Backend } from '@common/services/Backend'
+import { normalizeName } from '@common/utilities/data/string'
 
 import { FieldError, Heading, Input, Label, TextField } from '#/components/aria'
 import { Button, ButtonGroup } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/modals/ProjectLogsModal.tsx b/app/gui/src/dashboard/modals/ProjectLogsModal.tsx
index 0228c0b74307..e1c63fc96df8 100644
--- a/app/gui/src/dashboard/modals/ProjectLogsModal.tsx
+++ b/app/gui/src/dashboard/modals/ProjectLogsModal.tsx
@@ -1,7 +1,7 @@
 /** @file A modal for showing logs for a project. */
 import { useSuspenseQuery } from '@tanstack/react-query'
 
-import type { Backend, ProjectSessionId } from 'enso-common/src/services/Backend'
+import type { Backend, ProjectSessionId } from '@common/services/Backend'
 
 import ReloadIcon from '#/assets/reload.svg'
 import { Button, Dialog } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/modals/SetupOrganizationAfterSubscribe.tsx b/app/gui/src/dashboard/modals/SetupOrganizationAfterSubscribe.tsx
index 11a407d51df8..24ca9e3b233c 100644
--- a/app/gui/src/dashboard/modals/SetupOrganizationAfterSubscribe.tsx
+++ b/app/gui/src/dashboard/modals/SetupOrganizationAfterSubscribe.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react'
 import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
 import { Outlet } from 'react-router'
 
-import { Plan } from 'enso-common/src/services/Backend'
+import { Plan } from '@common/services/Backend'
 
 import { Button, Dialog, Form, Input } from '#/components/AriaComponents'
 import { Result } from '#/components/Result'
diff --git a/app/gui/src/dashboard/modals/UpsertSecretModal.tsx b/app/gui/src/dashboard/modals/UpsertSecretModal.tsx
index a110ab2a412f..6532bd99d871 100644
--- a/app/gui/src/dashboard/modals/UpsertSecretModal.tsx
+++ b/app/gui/src/dashboard/modals/UpsertSecretModal.tsx
@@ -1,5 +1,5 @@
 /** @file Modal for confirming delete of any type of asset. */
-import type { SecretId } from 'enso-common/src/services/Backend'
+import type { SecretId } from '@common/services/Backend'
 
 import { ButtonGroup, Dialog, DialogDismiss, Form, Input } from '#/components/AriaComponents'
 import { useText } from '#/providers/TextProvider'
diff --git a/app/gui/src/dashboard/modules/payments/api/useSubscriptionPrice.ts b/app/gui/src/dashboard/modules/payments/api/useSubscriptionPrice.ts
index fa11a1cfc24f..7d8ad41fb9a6 100644
--- a/app/gui/src/dashboard/modules/payments/api/useSubscriptionPrice.ts
+++ b/app/gui/src/dashboard/modules/payments/api/useSubscriptionPrice.ts
@@ -1,7 +1,7 @@
 /** @file A hook to fetch the subscription price based on the provided parameters. */
 import { queryOptions, useQuery } from '@tanstack/react-query'
 
-import type { Plan } from 'enso-common/src/services/Backend'
+import type { Plan } from '@common/services/Backend'
 
 import { DISCOUNT_MULTIPLIER_BY_DURATION, PRICE_BY_PLAN } from '../constants'
 
diff --git a/app/gui/src/dashboard/modules/payments/components/PlanSelector/PlanSelector.tsx b/app/gui/src/dashboard/modules/payments/components/PlanSelector/PlanSelector.tsx
index e13ca938625e..aca259b8ca89 100644
--- a/app/gui/src/dashboard/modules/payments/components/PlanSelector/PlanSelector.tsx
+++ b/app/gui/src/dashboard/modules/payments/components/PlanSelector/PlanSelector.tsx
@@ -1,7 +1,7 @@
 /** @file Plan selector component. */
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
-import { Plan, PLANS } from 'enso-common/src/services/Backend'
+import { Plan, PLANS } from '@common/services/Backend'
 
 import { DIALOG_BACKGROUND } from '#/components/AriaComponents'
 import { usePaywall } from '#/hooks/billing'
diff --git a/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/Card.tsx b/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/Card.tsx
index 2894df22166f..885c8f381129 100644
--- a/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/Card.tsx
+++ b/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/Card.tsx
@@ -5,7 +5,7 @@
  */
 import * as React from 'react'
 
-import type * as text from 'enso-common/src/text'
+import type * as text from '@common/text'
 
 import Check from '#/assets/check_mark.svg'
 
diff --git a/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx b/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx
index 67ead678337c..d19b670b236e 100644
--- a/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx
+++ b/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/PlanSelectorDialog.tsx
@@ -4,7 +4,7 @@ import { useMemo } from 'react'
 import type { PaymentMethod } from '@stripe/stripe-js'
 import { useQuery } from '@tanstack/react-query'
 
-import type { Plan } from 'enso-common/src/services/Backend'
+import type { Plan } from '@common/services/Backend'
 
 import {
   Button,
diff --git a/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx b/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
index 51824ceb0736..0c96e3104432 100644
--- a/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
+++ b/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
@@ -3,8 +3,8 @@ import type { ReactNode } from 'react'
 
 import invariant from 'tiny-invariant'
 
-import { Plan } from 'enso-common/src/services/Backend'
-import type { TextId } from 'enso-common/src/text'
+import { Plan } from '@common/services/Backend'
+import type { TextId } from '@common/text'
 
 import OpenInNewTabIcon from '#/assets/open.svg'
 import { Button } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/modules/payments/constants.ts b/app/gui/src/dashboard/modules/payments/constants.ts
index ae04181d48d9..5a4c28b2876f 100644
--- a/app/gui/src/dashboard/modules/payments/constants.ts
+++ b/app/gui/src/dashboard/modules/payments/constants.ts
@@ -1,6 +1,6 @@
 /** @file Constants for the subscribe page. */
-import { Plan } from 'enso-common/src/services/Backend'
-import type { TextId } from 'enso-common/src/text'
+import { Plan } from '@common/services/Backend'
+import type { TextId } from '@common/text'
 
 /* eslint-disable @typescript-eslint/no-magic-numbers, @typescript-eslint/naming-convention */
 
diff --git a/app/gui/src/dashboard/pages/authentication/ErrorScreen.tsx b/app/gui/src/dashboard/pages/authentication/ErrorScreen.tsx
index 79f1cfd360c1..c56bb505898a 100644
--- a/app/gui/src/dashboard/pages/authentication/ErrorScreen.tsx
+++ b/app/gui/src/dashboard/pages/authentication/ErrorScreen.tsx
@@ -1,5 +1,5 @@
 /** @file A screen displaying an error. */
-import { getMessageOrToString } from 'enso-common/src/utilities/error'
+import { getMessageOrToString } from '@common/utilities/error'
 
 import { Text } from '#/components/aria'
 import { useText } from '#/providers/TextProvider'
diff --git a/app/gui/src/dashboard/pages/authentication/Login.tsx b/app/gui/src/dashboard/pages/authentication/Login.tsx
index da4a6bb761e2..31c2001c9e01 100644
--- a/app/gui/src/dashboard/pages/authentication/Login.tsx
+++ b/app/gui/src/dashboard/pages/authentication/Login.tsx
@@ -1,8 +1,8 @@
 /** @file Login component responsible for rendering and interactions in sign in flow. */
 import * as router from 'react-router-dom'
 
+import { isOnElectron } from '@common/utilities/detect'
 import { CLOUD_DASHBOARD_DOMAIN } from 'enso-common'
-import { isOnElectron } from 'enso-common/src/detect'
 
 import { DASHBOARD_PATH, FORGOT_PASSWORD_PATH, REGISTRATION_PATH } from '#/appUtils'
 import ArrowRightIcon from '#/assets/arrow_right.svg'
diff --git a/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx b/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx
index 94e3dc9a1ec6..06ad6fd000ed 100644
--- a/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx
+++ b/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx
@@ -5,8 +5,8 @@ import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-q
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom'
 import invariant from 'tiny-invariant'
 
-import { Plan } from 'enso-common/src/services/Backend'
-import type { TextId } from 'enso-common/src/text'
+import { Plan } from '@common/services/Backend'
+import type { TextId } from '@common/text'
 
 import { DASHBOARD_PATH, LOGIN_PATH } from '#/appUtils'
 import ArrowRight from '#/assets/arrow_right.svg'
diff --git a/app/gui/src/dashboard/pages/dashboard/Dashboard.tsx b/app/gui/src/dashboard/pages/dashboard/Dashboard.tsx
index e6e2e2c7edb5..114fc7185d9c 100644
--- a/app/gui/src/dashboard/pages/dashboard/Dashboard.tsx
+++ b/app/gui/src/dashboard/pages/dashboard/Dashboard.tsx
@@ -6,9 +6,9 @@ import { useEffect, useRef, useState } from 'react'
 
 import { usePrefetchQuery } from '@tanstack/react-query'
 
-import { isOnElectron, platform, Platform } from 'enso-common/src/detect'
-import { BackendType, Path } from 'enso-common/src/services/Backend'
-import { baseName } from 'enso-common/src/utilities/data/fileInfo'
+import { BackendType, Path } from '@common/services/Backend'
+import { baseName } from '@common/utilities/data/fileInfo'
+import { isOnElectron, platform, Platform } from '@common/utilities/detect'
 
 import { Tabs } from '#/components/aria'
 import Page from '#/components/Page'
diff --git a/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx b/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx
index 54ea4b04acbc..1dcc6d534cac 100644
--- a/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx
+++ b/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx
@@ -1,6 +1,6 @@
 /** @file The tab bar for the dashboard page. */
-import type { ProjectId } from 'enso-common/src/services/Backend'
-import type { TextId } from 'enso-common/src/text'
+import type { ProjectId } from '@common/services/Backend'
+import type { TextId } from '@common/text'
 
 import DriveIcon from '#/assets/drive.svg'
 import NetworkIcon from '#/assets/network.svg'
diff --git a/app/gui/src/dashboard/pages/dashboard/DashboardTabPanels.tsx b/app/gui/src/dashboard/pages/dashboard/DashboardTabPanels.tsx
index 5951c142ed29..a076a0aea596 100644
--- a/app/gui/src/dashboard/pages/dashboard/DashboardTabPanels.tsx
+++ b/app/gui/src/dashboard/pages/dashboard/DashboardTabPanels.tsx
@@ -1,7 +1,7 @@
 /** @file The tab panels for the dashboard page. */
 import { Collection } from 'react-aria-components'
 
-import type { ProjectId } from 'enso-common/src/services/Backend'
+import type { ProjectId } from '@common/services/Backend'
 
 import * as aria from '#/components/aria'
 import { ErrorBoundary } from '#/components/ErrorBoundary'
diff --git a/app/gui/src/dashboard/pages/subscribe/Subscribe/Subscribe.tsx b/app/gui/src/dashboard/pages/subscribe/Subscribe/Subscribe.tsx
index dd5c9eb44960..883dcf24619c 100644
--- a/app/gui/src/dashboard/pages/subscribe/Subscribe/Subscribe.tsx
+++ b/app/gui/src/dashboard/pages/subscribe/Subscribe/Subscribe.tsx
@@ -1,7 +1,7 @@
 /** @file A page in which the currently active payment plan can be changed. */
 import { useNavigate, useSearchParams } from 'react-router-dom'
 
-import { isPlan } from 'enso-common/src/services/Backend'
+import { isPlan } from '@common/services/Backend'
 
 import { DASHBOARD_PATH, SUBSCRIBE_SUCCESS_PATH } from '#/appUtils'
 import Back from '#/assets/arrow_left.svg'
diff --git a/app/gui/src/dashboard/pages/subscribe/SubscribeSuccess.tsx b/app/gui/src/dashboard/pages/subscribe/SubscribeSuccess.tsx
index 1a9bcff0cf16..bf48a25f56c5 100644
--- a/app/gui/src/dashboard/pages/subscribe/SubscribeSuccess.tsx
+++ b/app/gui/src/dashboard/pages/subscribe/SubscribeSuccess.tsx
@@ -2,7 +2,7 @@
 import { Navigate } from 'react-router'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 
-import { Plan, isPlan } from 'enso-common/src/services/Backend'
+import { Plan, isPlan } from '@common/services/Backend'
 
 import { DASHBOARD_PATH } from '#/appUtils'
 
diff --git a/app/gui/src/dashboard/providers/AuthProvider.tsx b/app/gui/src/dashboard/providers/AuthProvider.tsx
index b1e634ce12e1..893cb80ae6d4 100644
--- a/app/gui/src/dashboard/providers/AuthProvider.tsx
+++ b/app/gui/src/dashboard/providers/AuthProvider.tsx
@@ -21,8 +21,6 @@ import { Navigate, Outlet, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import invariant from 'tiny-invariant'
 
-import { architecture, platform } from 'enso-common/src/detect'
-import { event, gtag } from 'enso-common/src/gtag'
 import {
   EmailAddress,
   NotAuthorizedError,
@@ -30,8 +28,10 @@ import {
   type CreateUserRequestBody,
   type UpdateUserRequestBody,
   type User,
-} from 'enso-common/src/services/Backend'
-import { UnreachableCaseError } from 'enso-common/src/utilities/error'
+} from '@common/services/Backend'
+import { architecture, platform } from '@common/utilities/detect'
+import { UnreachableCaseError } from '@common/utilities/error'
+import { event, gtag } from '@common/utilities/gtag'
 
 import { DASHBOARD_PATH, LOGIN_PATH, RESTORE_USER_PATH, SETUP_PATH } from '#/appUtils'
 
diff --git a/app/gui/src/dashboard/providers/BackendProvider.tsx b/app/gui/src/dashboard/providers/BackendProvider.tsx
index 6a4564309120..275385ada4b0 100644
--- a/app/gui/src/dashboard/providers/BackendProvider.tsx
+++ b/app/gui/src/dashboard/providers/BackendProvider.tsx
@@ -6,8 +6,8 @@ import * as React from 'react'
 
 import invariant from 'tiny-invariant'
 
+import { BackendType } from '@common/services/Backend'
 import * as common from 'enso-common'
-import { BackendType } from 'enso-common/src/services/Backend'
 
 import { type Category, isCloudCategory } from '#/layouts/CategorySwitcher/Category'
 
diff --git a/app/gui/src/dashboard/providers/DriveProvider.tsx b/app/gui/src/dashboard/providers/DriveProvider.tsx
index a3bdae1229a5..78efabb1ff30 100644
--- a/app/gui/src/dashboard/providers/DriveProvider.tsx
+++ b/app/gui/src/dashboard/providers/DriveProvider.tsx
@@ -3,14 +3,9 @@ import { createContext, startTransition, useContext, useState, type PropsWithChi
 
 import invariant from 'tiny-invariant'
 
-import type {
-  AssetId,
-  BackendType,
-  DirectoryAsset,
-  DirectoryId,
-} from 'enso-common/src/services/Backend'
-import { EMPTY_ARRAY } from 'enso-common/src/utilities/data/array'
-import { EMPTY_SET } from 'enso-common/src/utilities/data/set'
+import type { AssetId, BackendType, DirectoryAsset, DirectoryId } from '@common/services/Backend'
+import { EMPTY_ARRAY } from '@common/utilities/data/array'
+import { EMPTY_SET } from '@common/utilities/data/set'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import type { Category } from '#/layouts/CategorySwitcher/Category'
diff --git a/app/gui/src/dashboard/providers/ProjectsProvider.tsx b/app/gui/src/dashboard/providers/ProjectsProvider.tsx
index 5f7fb897297a..993342e3a620 100644
--- a/app/gui/src/dashboard/providers/ProjectsProvider.tsx
+++ b/app/gui/src/dashboard/providers/ProjectsProvider.tsx
@@ -4,8 +4,8 @@ import { createContext, useContext, useMemo, type PropsWithChildren } from 'reac
 import invariant from 'tiny-invariant'
 import * as z from 'zod'
 
-import { BackendType, type DirectoryId, type ProjectId } from 'enso-common/src/services/Backend'
-import { EMPTY_ARRAY, includes } from 'enso-common/src/utilities/data/array'
+import { BackendType, type DirectoryId, type ProjectId } from '@common/services/Backend'
+import { EMPTY_ARRAY, includes } from '@common/utilities/data/array'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useSearchParamsState } from '#/hooks/searchParamsStateHooks'
diff --git a/app/gui/src/dashboard/providers/SessionProvider.tsx b/app/gui/src/dashboard/providers/SessionProvider.tsx
index e7128007ac45..74026356a679 100644
--- a/app/gui/src/dashboard/providers/SessionProvider.tsx
+++ b/app/gui/src/dashboard/providers/SessionProvider.tsx
@@ -14,7 +14,7 @@ import {
 } from '@tanstack/react-query'
 import invariant from 'tiny-invariant'
 
-import { UnreachableCaseError } from 'enso-common/src/utilities/error'
+import { UnreachableCaseError } from '@common/utilities/error'
 
 import type { UserSession } from '#/authentication/cognito'
 import { AuthEvent, type ListenFunction } from '#/authentication/listen'
diff --git a/app/gui/src/dashboard/providers/TextProvider.tsx b/app/gui/src/dashboard/providers/TextProvider.tsx
index 160a505e2dbb..73c603ae5c49 100644
--- a/app/gui/src/dashboard/providers/TextProvider.tsx
+++ b/app/gui/src/dashboard/providers/TextProvider.tsx
@@ -11,14 +11,8 @@ import {
   type PropsWithChildren,
 } from 'react'
 
-import {
-  Language,
-  LANGUAGE_TO_LOCALE,
-  TEXTS,
-  type Replacements,
-  type TextId,
-} from 'enso-common/src/text'
-import { unsafeMutable } from 'enso-common/src/utilities/data/object'
+import { Language, LANGUAGE_TO_LOCALE, TEXTS, type Replacements, type TextId } from '@common/text'
+import { unsafeMutable } from '@common/utilities/data/object'
 
 /** State contained in a `TextContext`. */
 export interface TextContextType {
diff --git a/app/gui/src/dashboard/providers/__test__/DriveProvider.test.tsx b/app/gui/src/dashboard/providers/__test__/DriveProvider.test.tsx
index 4a74017ca2d5..490b4e2f95c3 100644
--- a/app/gui/src/dashboard/providers/__test__/DriveProvider.test.tsx
+++ b/app/gui/src/dashboard/providers/__test__/DriveProvider.test.tsx
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { useStore } from 'zustand'
 
-import { DirectoryId } from 'enso-common/src/services/Backend'
+import { DirectoryId } from '@common/services/Backend'
 
 import type { Category } from '#/layouts/CategorySwitcher/Category'
 import { act, renderHook, type RenderHookOptions, type RenderHookResult } from '#/test'
diff --git a/app/gui/src/dashboard/providers/__test__/SessionProvider.test.tsx b/app/gui/src/dashboard/providers/__test__/SessionProvider.test.tsx
index 5e98cdabe903..efdaba6ba815 100644
--- a/app/gui/src/dashboard/providers/__test__/SessionProvider.test.tsx
+++ b/app/gui/src/dashboard/providers/__test__/SessionProvider.test.tsx
@@ -2,7 +2,7 @@ import { Suspense } from 'react'
 
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { Rfc3339DateTime } from 'enso-common/src/utilities/data/dateTime'
+import { Rfc3339DateTime } from '@common/utilities/data/dateTime'
 
 import type { UserSession } from '#/authentication/cognito'
 import { render, screen, waitFor } from '#/test'
diff --git a/app/gui/src/dashboard/services/Chat.ts b/app/gui/src/dashboard/services/Chat.ts
index db5daad48f91..eb845c042b7e 100644
--- a/app/gui/src/dashboard/services/Chat.ts
+++ b/app/gui/src/dashboard/services/Chat.ts
@@ -3,7 +3,7 @@
  * Types copied from the enso-bot server implementation:
  * https://github.com/enso-org/enso-bot/blob/aa903b6e639a31930ee4fff55c5639e4471fa48d/chat.ts
  */
-import type { Newtype } from 'enso-common/src/utilities/data/newtype'
+import type { Newtype } from '@common/utilities/data/newtype'
 
 /** Identifier for a chat Thread. */
 export type ThreadId = Newtype<string, 'ThreadId'>
diff --git a/app/gui/src/dashboard/services/LocalBackend.ts b/app/gui/src/dashboard/services/LocalBackend.ts
index f354db2de44e..4b8e6a430b46 100644
--- a/app/gui/src/dashboard/services/LocalBackend.ts
+++ b/app/gui/src/dashboard/services/LocalBackend.ts
@@ -51,12 +51,12 @@ import {
   type UploadLargeFileMetadata,
   type UploadedLargeAsset,
   type User,
-} from 'enso-common/src/services/Backend'
-import { fileExtension, getFileName, getFolderPath } from 'enso-common/src/utilities/data/fileInfo'
-import { getDirectoryAndName, joinPath } from 'enso-common/src/utilities/data/path'
-import { download } from 'enso-common/src/utilities/download'
-import { tryGetMessage } from 'enso-common/src/utilities/error'
-import { uniqueString } from 'enso-common/src/utilities/uniqueString'
+} from '@common/services/Backend'
+import { fileExtension, getFileName, getFolderPath } from '@common/utilities/data/fileInfo'
+import { getDirectoryAndName, joinPath } from '@common/utilities/data/path'
+import { download } from '@common/utilities/download'
+import { tryGetMessage } from '@common/utilities/error'
+import { uniqueString } from '@common/utilities/uniqueString'
 
 import type ProjectManager from '#/services/ProjectManager'
 import {
diff --git a/app/gui/src/dashboard/services/ProjectManager.ts b/app/gui/src/dashboard/services/ProjectManager.ts
index 934cf15edd54..fa1f15f3522f 100644
--- a/app/gui/src/dashboard/services/ProjectManager.ts
+++ b/app/gui/src/dashboard/services/ProjectManager.ts
@@ -5,10 +5,10 @@
  */
 import invariant from 'tiny-invariant'
 
-import { ProjectState as BackendProjectState } from 'enso-common/src/services/Backend'
-import { toRfc3339, type Rfc3339DateTime } from 'enso-common/src/utilities/data/dateTime'
-import { newtypeConstructor, type Newtype } from 'enso-common/src/utilities/data/newtype'
-import { getDirectoryAndName, normalizeSlashes } from 'enso-common/src/utilities/data/path'
+import { ProjectState as BackendProjectState } from '@common/services/Backend'
+import { toRfc3339, type Rfc3339DateTime } from '@common/utilities/data/dateTime'
+import { newtypeConstructor, type Newtype } from '@common/utilities/data/newtype'
+import { getDirectoryAndName, normalizeSlashes } from '@common/utilities/data/path'
 
 import { APP_BASE_URL } from '#/utilities/appBaseUrl'
 
diff --git a/app/gui/src/dashboard/services/RemoteBackend.ts b/app/gui/src/dashboard/services/RemoteBackend.ts
index 7829b788bd40..1a177c727fd4 100644
--- a/app/gui/src/dashboard/services/RemoteBackend.ts
+++ b/app/gui/src/dashboard/services/RemoteBackend.ts
@@ -5,7 +5,6 @@
  * an API endpoint. The functions are asynchronous and return a {@link Promise} that resolves to
  * the response from the API.
  */
-import { IS_DEV_MODE } from 'enso-common/src/detect'
 import {
   Address,
   Backend,
@@ -87,10 +86,11 @@ import {
   type UserGroupId,
   type UserGroupInfo,
   type UserId,
-} from 'enso-common/src/services/Backend'
-import type { Replacements, TextId } from 'enso-common/src/text'
-import { merge, omit, type Mutable } from 'enso-common/src/utilities/data/object'
-import { download } from 'enso-common/src/utilities/download'
+} from '@common/services/Backend'
+import type { Replacements, TextId } from '@common/text'
+import { merge, omit, type Mutable } from '@common/utilities/data/object'
+import { IS_DEV_MODE } from '@common/utilities/detect'
+import { download } from '@common/utilities/download'
 
 import type { Logger } from '#/providers/LoggerProvider'
 import type { GetText } from '#/providers/TextProvider'
diff --git a/app/gui/src/dashboard/services/remoteBackendPaths.ts b/app/gui/src/dashboard/services/remoteBackendPaths.ts
index 817fe0f85f25..4954fe40b02a 100644
--- a/app/gui/src/dashboard/services/remoteBackendPaths.ts
+++ b/app/gui/src/dashboard/services/remoteBackendPaths.ts
@@ -11,8 +11,8 @@ import type {
   TagId,
   UserGroupId,
   UserId,
-} from 'enso-common/src/services/Backend'
-import { newtypeConstructor, type Newtype } from 'enso-common/src/utilities/data/newtype'
+} from '@common/services/Backend'
+import { newtypeConstructor, type Newtype } from '@common/utilities/data/newtype'
 
 /** Relative HTTP path to the "list users" endpoint of the Cloud backend API. */
 export const LIST_USERS_PATH = 'users'
diff --git a/app/gui/src/dashboard/test/testUtils.tsx b/app/gui/src/dashboard/test/testUtils.tsx
index f3e3e5e9c1d3..f47e9f149815 100644
--- a/app/gui/src/dashboard/test/testUtils.tsx
+++ b/app/gui/src/dashboard/test/testUtils.tsx
@@ -8,6 +8,7 @@
 
 import { Form, type FormInstance, type FormProps, type TSchema } from '#/components/AriaComponents'
 import UIProviders from '#/components/UIProviders'
+import { createQueryClient } from '@common/services/tanstackQuery/client'
 import { QueryClientProvider, type QueryClient } from '@tanstack/react-query'
 import {
   render,
@@ -17,7 +18,6 @@ import {
   type RenderOptions,
   type RenderResult,
 } from '@testing-library/react'
-import { createQueryClient } from 'enso-common/src/queryClient'
 import { useState, type PropsWithChildren, type ReactElement, type ReactNode } from 'react'
 
 /**
diff --git a/app/gui/src/dashboard/utilities/AssetQuery.ts b/app/gui/src/dashboard/utilities/AssetQuery.ts
index a271d572831f..9334fdfcd5ed 100644
--- a/app/gui/src/dashboard/utilities/AssetQuery.ts
+++ b/app/gui/src/dashboard/utilities/AssetQuery.ts
@@ -1,5 +1,5 @@
 /** @file Parsing and representation of the search query. */
-import * as array from 'enso-common/src/utilities/data/array'
+import * as array from '@common/utilities/data/array'
 
 // Control characters must be handled, in order to follow the JSON spec.
 // eslint-disable-next-line no-control-regex
diff --git a/app/gui/src/dashboard/utilities/AssetTreeNode.ts b/app/gui/src/dashboard/utilities/AssetTreeNode.ts
index 9c0f1e82ec5e..d8edf45e17fb 100644
--- a/app/gui/src/dashboard/utilities/AssetTreeNode.ts
+++ b/app/gui/src/dashboard/utilities/AssetTreeNode.ts
@@ -8,7 +8,7 @@ import {
   isPlaceholderId,
   type AnyAsset,
   type DirectoryId,
-} from 'enso-common/src/services/Backend'
+} from '@common/services/Backend'
 
 /** An {@link AssetTreeNode}, but excluding its methods. */
 export type AssetTreeNodeData = Pick<
diff --git a/app/gui/src/dashboard/utilities/LocalStorage.ts b/app/gui/src/dashboard/utilities/LocalStorage.ts
index a5b8fd388630..1c455e20b768 100644
--- a/app/gui/src/dashboard/utilities/LocalStorage.ts
+++ b/app/gui/src/dashboard/utilities/LocalStorage.ts
@@ -5,8 +5,8 @@ import invariant from 'tiny-invariant'
 
 import { PRODUCT_NAME } from 'enso-common'
 
-import { IS_DEV_MODE } from 'enso-common/src/detect'
-import { unsafeEntries } from 'enso-common/src/utilities/data/object'
+import { unsafeEntries } from '@common/utilities/data/object'
+import { IS_DEV_MODE } from '@common/utilities/detect'
 
 const KEY_DEFINITION_STACK_TRACES = new Map<string, string>()
 
diff --git a/app/gui/src/dashboard/utilities/Navigator2D.ts b/app/gui/src/dashboard/utilities/Navigator2D.ts
index 1635a7687401..2ca57f1a1395 100644
--- a/app/gui/src/dashboard/utilities/Navigator2D.ts
+++ b/app/gui/src/dashboard/utilities/Navigator2D.ts
@@ -1,8 +1,8 @@
 /** @file A class for handling navigation between elements on a 2D plane. */
 import type * as React from 'react'
 
-import * as detect from 'enso-common/src/detect'
-import * as object from 'enso-common/src/utilities/data/object'
+import * as object from '@common/utilities/data/object'
+import * as detect from '@common/utilities/detect'
 
 import * as eventModule from '#/utilities/event'
 
diff --git a/app/gui/src/dashboard/utilities/__tests__/shortcuts.test.ts b/app/gui/src/dashboard/utilities/__tests__/shortcuts.test.ts
index b6fe6f58cfc9..8a9af18f7f60 100644
--- a/app/gui/src/dashboard/utilities/__tests__/shortcuts.test.ts
+++ b/app/gui/src/dashboard/utilities/__tests__/shortcuts.test.ts
@@ -1,7 +1,7 @@
 /** @file Tests for `dateTime.ts`. */
 import * as v from 'vitest'
 
-import * as detect from 'enso-common/src/detect'
+import * as detect from '@common/utilities/detect'
 
 import * as shortcutsModule from '#/utilities/inputBindings'
 
diff --git a/app/gui/src/dashboard/utilities/drag.ts b/app/gui/src/dashboard/utilities/drag.ts
index 5365ff645bbe..78caac7ef8ec 100644
--- a/app/gui/src/dashboard/utilities/drag.ts
+++ b/app/gui/src/dashboard/utilities/drag.ts
@@ -1,8 +1,8 @@
 /** @file Various types of drag event payloads. */
 import type { DragEvent } from 'react'
 
-import type { AnyAsset, AssetId, LabelName } from 'enso-common/src/services/Backend'
-import { uniqueString } from 'enso-common/src/utilities/uniqueString'
+import type { AnyAsset, AssetId, LabelName } from '@common/services/Backend'
+import { uniqueString } from '@common/utilities/uniqueString'
 
 /** Set the drag image to blank, so a custom div can be used instead. */
 export function setDragImageToBlank(event: DragEvent) {
diff --git a/app/gui/src/dashboard/utilities/error.ts b/app/gui/src/dashboard/utilities/error.ts
index 57762ea8fcc8..627a35f69ce3 100644
--- a/app/gui/src/dashboard/utilities/error.ts
+++ b/app/gui/src/dashboard/utilities/error.ts
@@ -2,7 +2,7 @@
 import isNetworkErrorLib from 'is-network-error'
 import type * as toastify from 'react-toastify'
 
-import { getMessageOrToString } from 'enso-common/src/utilities/error'
+import { getMessageOrToString } from '@common/utilities/error'
 
 /** Return a toastify option object that renders an error message. */
 export function render(f: (message: string) => string): toastify.UpdateOptions {
diff --git a/app/gui/src/dashboard/utilities/event.ts b/app/gui/src/dashboard/utilities/event.ts
index efde1f9ac501..d877da78bdb4 100644
--- a/app/gui/src/dashboard/utilities/event.ts
+++ b/app/gui/src/dashboard/utilities/event.ts
@@ -1,7 +1,7 @@
 /** @file Utility functions related to event handling. */
 import type * as React from 'react'
 
-import { isOnMacOS } from 'enso-common/src/detect'
+import { isOnMacOS } from '@common/utilities/detect'
 
 /** Returns `true` if and only if the event is a single click event. */
 export function isSingleClick(event: React.MouseEvent) {
diff --git a/app/gui/src/dashboard/utilities/inputBindings.ts b/app/gui/src/dashboard/utilities/inputBindings.ts
index cae7904b013c..5b14d04f0404 100644
--- a/app/gui/src/dashboard/utilities/inputBindings.ts
+++ b/app/gui/src/dashboard/utilities/inputBindings.ts
@@ -2,10 +2,10 @@
  * @file Exports `defineKeybinds`, a function to define a namespace containing keyboard and mouse
  * shortcuts.
  */
-import { isOnMacOS } from 'enso-common/src/detect'
-import { newtypeConstructor, type Newtype } from 'enso-common/src/utilities/data/newtype'
-import { unsafeMutable } from 'enso-common/src/utilities/data/object'
-import { camelCaseToTitleCase } from 'enso-common/src/utilities/data/string'
+import { newtypeConstructor, type Newtype } from '@common/utilities/data/newtype'
+import { unsafeMutable } from '@common/utilities/data/object'
+import { camelCaseToTitleCase } from '@common/utilities/data/string'
+import { isOnMacOS } from '@common/utilities/detect'
 
 import { isElementTextInput, isTextInputEvent } from '#/utilities/event'
 
diff --git a/app/gui/src/dashboard/utilities/jsonSchema.ts b/app/gui/src/dashboard/utilities/jsonSchema.ts
index 96aef9948565..959bc98c8ab6 100644
--- a/app/gui/src/dashboard/utilities/jsonSchema.ts
+++ b/app/gui/src/dashboard/utilities/jsonSchema.ts
@@ -1,5 +1,5 @@
 /** @file Utilities for using JSON schemas. */
-import { asObject, singletonObjectOrNull } from 'enso-common/src/utilities/data/object'
+import { asObject, singletonObjectOrNull } from '@common/utilities/data/object'
 
 // =================
 // === lookupDef ===
diff --git a/app/gui/src/dashboard/utilities/permissions.ts b/app/gui/src/dashboard/utilities/permissions.ts
index a5d22fb7a9d5..7f5cafc2f55f 100644
--- a/app/gui/src/dashboard/utilities/permissions.ts
+++ b/app/gui/src/dashboard/utilities/permissions.ts
@@ -8,10 +8,10 @@ import {
   type UserGroupInfo,
   type UserGroupPermission,
   type UserPermission,
-} from 'enso-common/src/services/Backend'
-import { merge } from 'enso-common/src/utilities/data/object'
-import { Permission, PermissionAction } from 'enso-common/src/utilities/permissions'
-export * from 'enso-common/src/utilities/permissions'
+} from '@common/services/Backend'
+import { merge } from '@common/utilities/data/object'
+import { Permission, PermissionAction } from '@common/utilities/permissions'
+export * from '@common/utilities/permissions'
 
 import type { Category } from '#/layouts/CategorySwitcher/Category'
 
diff --git a/app/gui/src/dashboard/utilities/preventNavigation.tsx b/app/gui/src/dashboard/utilities/preventNavigation.tsx
index 49710655d685..72c33ebe428c 100644
--- a/app/gui/src/dashboard/utilities/preventNavigation.tsx
+++ b/app/gui/src/dashboard/utilities/preventNavigation.tsx
@@ -1,7 +1,7 @@
 /** @file A React hook to prevent navigation. */
 import { useEffect } from 'react'
 
-import { isOnElectron } from 'enso-common/src/detect'
+import { isOnElectron } from '@common/utilities/detect'
 
 import { Button, ButtonGroup, Dialog, Text } from '#/components/AriaComponents'
 import { useSyncRef } from '#/hooks/syncRefHooks'
diff --git a/app/gui/src/entrypoint.ts b/app/gui/src/entrypoint.ts
index 5d275f20b430..cf868084123b 100644
--- a/app/gui/src/entrypoint.ts
+++ b/app/gui/src/entrypoint.ts
@@ -4,9 +4,9 @@ import '#/tailwind.css'
 import { AsyncApp } from '@/asyncApp'
 import { baseConfig, configValue, mergeConfig } from '@/util/config'
 import { urlParams } from '@/util/urlParams'
+import * as commonQuery from '@common/services/tanstackQuery/client'
+import { isOnLinux } from '@common/utilities/detect'
 import * as vueQuery from '@tanstack/vue-query'
-import { isOnLinux } from 'enso-common/src/detect'
-import * as commonQuery from 'enso-common/src/queryClient'
 import * as idbKeyval from 'idb-keyval'
 import { lazyVueInReact } from 'veaury'
 import { type App } from 'vue'
diff --git a/app/gui/src/project-view/App.vue b/app/gui/src/project-view/App.vue
index 0127b8110599..774c6fa399da 100644
--- a/app/gui/src/project-view/App.vue
+++ b/app/gui/src/project-view/App.vue
@@ -13,8 +13,8 @@ import {
   type StringConfig,
 } from '@/util/config'
 import ProjectView from '@/views/ProjectView.vue'
+import type Backend from '@common/services/Backend'
 import { useEventListener } from '@vueuse/core'
-import type Backend from 'enso-common/src/services/Backend'
 import { computed, markRaw, toRaw, toRef, watch } from 'vue'
 import TooltipDisplayer from './components/TooltipDisplayer.vue'
 import { provideTooltipRegistry } from './providers/tooltipRegistry'
diff --git a/app/gui/src/project-view/components/CodeEditor/diagnostics.ts b/app/gui/src/project-view/components/CodeEditor/diagnostics.ts
index 829daebac30c..e1c3b479c676 100644
--- a/app/gui/src/project-view/components/CodeEditor/diagnostics.ts
+++ b/app/gui/src/project-view/components/CodeEditor/diagnostics.ts
@@ -3,7 +3,7 @@ import { type ProjectStore } from '@/stores/project'
 import { type Diagnostic, forceLinting, linter } from '@codemirror/lint'
 import { type Extension, StateEffect, StateField } from '@codemirror/state'
 import { type EditorView } from '@codemirror/view'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import { computed, watch } from 'vue'
 import { type Diagnostic as LSDiagnostic, type Position } from 'ydoc-shared/languageServerTypes'
 
diff --git a/app/gui/src/project-view/components/CodeEditor/ensoSyntax.ts b/app/gui/src/project-view/components/CodeEditor/ensoSyntax.ts
index 7f2dfb62668e..65510ad04707 100644
--- a/app/gui/src/project-view/components/CodeEditor/ensoSyntax.ts
+++ b/app/gui/src/project-view/components/CodeEditor/ensoSyntax.ts
@@ -7,6 +7,7 @@ import {
   languageDataProp,
   LanguageSupport,
 } from '@codemirror/language'
+import * as iter from '@common/utilities/data/iter'
 import {
   type Input,
   NodeProp,
@@ -17,7 +18,6 @@ import {
   Tree,
 } from '@lezer/common'
 import { styleTags, tags } from '@lezer/highlight'
-import * as iter from 'enso-common/src/utilities/data/iter'
 
 const nodeTypes: NodeType[] = [
   ...RawAst.Tree.typeNames.map((name, id) => NodeType.define({ id, name })),
diff --git a/app/gui/src/project-view/components/ColorPickerMenu.vue b/app/gui/src/project-view/components/ColorPickerMenu.vue
index 94c96c593551..ef76e4ad7487 100644
--- a/app/gui/src/project-view/components/ColorPickerMenu.vue
+++ b/app/gui/src/project-view/components/ColorPickerMenu.vue
@@ -3,7 +3,7 @@ import ColorRing from '@/components/ColorRing.vue'
 import { injectNodeColors } from '@/providers/graphNodeColors'
 import { injectGraphSelection } from '@/providers/graphSelection'
 import { useGraphStore, type NodeId } from '@/stores/graph'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import { ref } from 'vue'
 
 const emit = defineEmits<{
diff --git a/app/gui/src/project-view/components/ColorRing/gradient.ts b/app/gui/src/project-view/components/ColorRing/gradient.ts
index 50c556ee4c65..f1c2a01286b5 100644
--- a/app/gui/src/project-view/components/ColorRing/gradient.ts
+++ b/app/gui/src/project-view/components/ColorRing/gradient.ts
@@ -1,5 +1,5 @@
 import { ensoColor, formatCssColor, normalizeHue } from '@/util/colors'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 
 export interface FixedRange {
   start: number
diff --git a/app/gui/src/project-view/components/ComponentBrowser/__tests__/placement.test.ts b/app/gui/src/project-view/components/ComponentBrowser/__tests__/placement.test.ts
index 930061f07c5d..2d7de2f6222c 100644
--- a/app/gui/src/project-view/components/ComponentBrowser/__tests__/placement.test.ts
+++ b/app/gui/src/project-view/components/ComponentBrowser/__tests__/placement.test.ts
@@ -9,8 +9,8 @@ import {
 } from '@/components/ComponentBrowser/placement'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
+import * as iter from '@common/utilities/data/iter'
 import { fc, test as fcTest } from '@fast-check/vitest'
-import * as iter from 'enso-common/src/utilities/data/iter'
 import { describe, expect, test } from 'vitest'
 
 // Vue playground to visually inspect failing fuzz cases:
diff --git a/app/gui/src/project-view/components/DockPanel.vue b/app/gui/src/project-view/components/DockPanel.vue
index 68ee38c5256b..d8726d459011 100644
--- a/app/gui/src/project-view/components/DockPanel.vue
+++ b/app/gui/src/project-view/components/DockPanel.vue
@@ -7,7 +7,7 @@ import { useResizeObserver } from '@/composables/events'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import { TabButton } from '@/util/tabs'
-import { tabClipPath } from 'enso-common/src/utilities/style/tabBar'
+import { tabClipPath } from '@common/utilities/style/tabBar'
 import { computed, ref } from 'vue'
 
 const TAB_EDGE_MARGIN_PX = 4
diff --git a/app/gui/src/project-view/components/DocumentationPanel/ir.ts b/app/gui/src/project-view/components/DocumentationPanel/ir.ts
index cd331ed55241..8e923b0e1185 100644
--- a/app/gui/src/project-view/components/DocumentationPanel/ir.ts
+++ b/app/gui/src/project-view/components/DocumentationPanel/ir.ts
@@ -3,7 +3,7 @@ import type { SuggestionEntry, SuggestionId } from '@/stores/suggestionDatabase/
 import { SuggestionKind, entryQn } from '@/stores/suggestionDatabase/entry'
 import type { Doc } from '@/util/docParser'
 import type { QualifiedName } from '@/util/qualifiedName'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import type { SuggestionEntryArgument } from 'ydoc-shared/languageServerTypes/suggestions'
 
 // === Types ===
diff --git a/app/gui/src/project-view/components/GraphEditor.vue b/app/gui/src/project-view/components/GraphEditor.vue
index e6fc1a97d388..99e304cdca1b 100644
--- a/app/gui/src/project-view/components/GraphEditor.vue
+++ b/app/gui/src/project-view/components/GraphEditor.vue
@@ -59,7 +59,7 @@ import { partition } from '@/util/data/array'
 import { Rect } from '@/util/data/rect'
 import { Err, Ok, unwrapOr } from '@/util/data/result'
 import { Vec2 } from '@/util/data/vec2'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import { set } from 'lib0'
 import {
   computed,
diff --git a/app/gui/src/project-view/components/GraphEditor/__tests__/collapsing.test.ts b/app/gui/src/project-view/components/GraphEditor/__tests__/collapsing.test.ts
index 89fc1c3b66a3..7b4af56751c7 100644
--- a/app/gui/src/project-view/components/GraphEditor/__tests__/collapsing.test.ts
+++ b/app/gui/src/project-view/components/GraphEditor/__tests__/collapsing.test.ts
@@ -5,7 +5,7 @@ import { Ast } from '@/util/ast'
 import { findExpressions } from '@/util/ast/__tests__/testCase'
 import { unwrap } from '@/util/data/result'
 import { tryIdentifier } from '@/util/qualifiedName'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import { expect, test } from 'vitest'
 import { watchEffect } from 'vue'
 import { Identifier } from 'ydoc-shared/ast'
diff --git a/app/gui/src/project-view/components/GraphEditor/clipboard.ts b/app/gui/src/project-view/components/GraphEditor/clipboard.ts
index 14e9acff011a..554d17890cff 100644
--- a/app/gui/src/project-view/components/GraphEditor/clipboard.ts
+++ b/app/gui/src/project-view/components/GraphEditor/clipboard.ts
@@ -2,7 +2,7 @@ import type { NodeCreationOptions } from '@/composables/nodeCreation'
 import type { Node } from '@/stores/graph'
 import { nodeDocumentationText } from '@/util/ast/node'
 import { Vec2 } from '@/util/data/vec2'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import type { NodeMetadataFields } from 'ydoc-shared/ast'
 import { parseTsvData, tableToEnsoExpression } from './widgets/WidgetTableEditor/tableParsing'
 
diff --git a/app/gui/src/project-view/components/GraphEditor/dragging.ts b/app/gui/src/project-view/components/GraphEditor/dragging.ts
index decdef84de19..bc0befdf0967 100644
--- a/app/gui/src/project-view/components/GraphEditor/dragging.ts
+++ b/app/gui/src/project-view/components/GraphEditor/dragging.ts
@@ -6,7 +6,7 @@ import type { Opt } from '@/util/data/opt'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import theme from '@/util/theme.json'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import { computed, markRaw, ref, watchEffect, type ComputedRef, type WatchStopHandle } from 'vue'
 
 const DRAG_SNAP_THRESHOLD = 16
diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts
index 37f92833fc7f..a2e698b0555b 100644
--- a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts
+++ b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts
@@ -8,8 +8,8 @@ import { findIndexOpt } from '@/util/data/array'
 import { Err, Ok, type Result, transposeResult, unwrapOrWithLog } from '@/util/data/result'
 import { qnLastSegment, type QualifiedName } from '@/util/qualifiedName'
 import type { ToValue } from '@/util/reactivity'
+import * as iter from '@common/utilities/data/iter'
 import type { ColDef } from 'ag-grid-enterprise'
-import * as iter from 'enso-common/src/utilities/data/iter'
 import { computed, toValue } from 'vue'
 import type { ColumnSpecificHeaderParams } from './TableHeader.vue'
 
diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableParsing.ts b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableParsing.ts
index 160d86ee4e4a..f916e658dfe3 100644
--- a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableParsing.ts
+++ b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableParsing.ts
@@ -1,7 +1,7 @@
 import { Ast } from '@/util/ast'
 import { Pattern } from '@/util/ast/match'
-import { transpose } from 'enso-common/src/utilities/data/array'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import { transpose } from '@common/utilities/data/array'
+import * as iter from '@common/utilities/data/iter'
 import Papa from 'papaparse'
 import { computed } from 'vue'
 import { DEFAULT_COLUMN_PREFIX, NOTHING_NAME } from './tableInputArgument'
diff --git a/app/gui/src/project-view/components/VueComponentHost.vue b/app/gui/src/project-view/components/VueComponentHost.vue
index b785f728d2d0..28ac8c7c6191 100644
--- a/app/gui/src/project-view/components/VueComponentHost.vue
+++ b/app/gui/src/project-view/components/VueComponentHost.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useObjectId } from 'enso-common/src/utilities/data/object'
+import { useObjectId } from '@common/utilities/data/object'
 import { type Component, reactive } from 'vue'
 
 const teleportations = reactive(new Map<Component, HTMLElement>())
diff --git a/app/gui/src/project-view/components/shared/AgGridTableView.vue b/app/gui/src/project-view/components/shared/AgGridTableView.vue
index 284e6aa1d978..bb977005d0d0 100644
--- a/app/gui/src/project-view/components/shared/AgGridTableView.vue
+++ b/app/gui/src/project-view/components/shared/AgGridTableView.vue
@@ -67,6 +67,8 @@ export const commonContextMenuActions = {
  */
 import type { TextFormatOptions } from '@/components/visualizations/TableVisualization.vue'
 import { useAutoBlur } from '@/util/autoBlur'
+import * as iter from '@common/utilities/data/iter'
+import { LINE_BOUNDARIES } from '@common/utilities/data/string'
 import type {
   CellEditingStartedEvent,
   CellEditingStoppedEvent,
@@ -84,8 +86,6 @@ import type {
   RowHeightParams,
   SortChangedEvent,
 } from 'ag-grid-enterprise'
-import * as iter from 'enso-common/src/utilities/data/iter'
-import { LINE_BOUNDARIES } from 'enso-common/src/utilities/data/string'
 import { type ComponentInstance, reactive, shallowRef, watch } from 'vue'
 import { clipboardNodeData, writeClipboard } from '../GraphEditor/clipboard'
 import {
diff --git a/app/gui/src/project-view/components/widgets/FileBrowserWidget.vue b/app/gui/src/project-view/components/widgets/FileBrowserWidget.vue
index eb80d5c1a914..9a3ecac7321c 100644
--- a/app/gui/src/project-view/components/widgets/FileBrowserWidget.vue
+++ b/app/gui/src/project-view/components/widgets/FileBrowserWidget.vue
@@ -4,13 +4,8 @@ import SvgButton from '@/components/SvgButton.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import { useBackend } from '@/composables/backend'
 import type { ToValue } from '@/util/reactivity'
-import type {
-  DirectoryAsset,
-  DirectoryId,
-  FileAsset,
-  FileId,
-} from 'enso-common/src/services/Backend'
-import Backend, { assetIsDirectory, assetIsFile } from 'enso-common/src/services/Backend'
+import type { DirectoryAsset, DirectoryId, FileAsset, FileId } from '@common/services/Backend'
+import Backend, { assetIsDirectory, assetIsFile } from '@common/services/Backend'
 import { computed, ref, toValue, watch } from 'vue'
 
 const emit = defineEmits<{
diff --git a/app/gui/src/project-view/composables/backend.ts b/app/gui/src/project-view/composables/backend.ts
index 9f1025dd5e36..3a38689f26d2 100644
--- a/app/gui/src/project-view/composables/backend.ts
+++ b/app/gui/src/project-view/composables/backend.ts
@@ -1,10 +1,10 @@
 import { injectBackend } from '@/providers/backend'
 import type { ToValue } from '@/util/reactivity'
+import Backend from '@common/services/Backend'
+import type { BackendMethods } from '@common/services/tanstackQuery/query'
+import { backendBaseOptions, backendQueryKey } from '@common/services/tanstackQuery/query'
 import type { UseQueryOptions, UseQueryReturnType } from '@tanstack/vue-query'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import type { BackendMethods } from 'enso-common/src/backendQuery'
-import { backendBaseOptions, backendQueryKey } from 'enso-common/src/backendQuery'
-import Backend from 'enso-common/src/services/Backend'
 import { computed, toValue } from 'vue'
 
 type ExtraOptions = Omit<UseQueryOptions, 'queryKey' | 'queryFn' | 'enabled' | 'networkMode'>
diff --git a/app/gui/src/project-view/composables/nodeCreation.ts b/app/gui/src/project-view/composables/nodeCreation.ts
index 5307b86d4a96..984b32d5c9ed 100644
--- a/app/gui/src/project-view/composables/nodeCreation.ts
+++ b/app/gui/src/project-view/composables/nodeCreation.ts
@@ -16,8 +16,8 @@ import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import { qnLastSegment, tryQualifiedName } from '@/util/qualifiedName'
 import type { ToValue } from '@/util/reactivity'
+import * as iter from '@common/utilities/data/iter'
 import { identity } from '@vueuse/core'
-import * as iter from 'enso-common/src/utilities/data/iter'
 import { nextTick, toValue } from 'vue'
 import { assert, assertNever } from 'ydoc-shared/util/assert'
 import { mustExtend } from 'ydoc-shared/util/types'
diff --git a/app/gui/src/project-view/composables/selection.ts b/app/gui/src/project-view/composables/selection.ts
index 817e35d427ee..380715c1896c 100644
--- a/app/gui/src/project-view/composables/selection.ts
+++ b/app/gui/src/project-view/composables/selection.ts
@@ -7,8 +7,8 @@ import type { Rect } from '@/util/data/rect'
 import { intersectionSize } from '@/util/data/set'
 import { Vec2 } from '@/util/data/vec2'
 import { dataAttribute, selectorHierarchy } from '@/util/dom'
+import * as iter from '@common/utilities/data/iter'
 import { identity } from '@vueuse/core'
-import * as iter from 'enso-common/src/utilities/data/iter'
 import * as set from 'lib0/set'
 import { computed, ref, shallowReactive, shallowRef } from 'vue'
 import { Err, Ok, type Result } from 'ydoc-shared/util/data/result'
diff --git a/app/gui/src/project-view/providers/backend.ts b/app/gui/src/project-view/providers/backend.ts
index f1c49d8779db..7c5e9f8dc2f4 100644
--- a/app/gui/src/project-view/providers/backend.ts
+++ b/app/gui/src/project-view/providers/backend.ts
@@ -1,6 +1,6 @@
 import { createContextStore } from '@/providers'
 import type { ToValue } from '@/util/reactivity'
-import type Backend from 'enso-common/src/services/Backend'
+import type Backend from '@common/services/Backend'
 import { proxyRefs, toRef } from 'vue'
 
 export const [provideBackend, injectBackend] = createContextStore(
diff --git a/app/gui/src/project-view/providers/selectionButtons.ts b/app/gui/src/project-view/providers/selectionButtons.ts
index 2d5c72f5af7b..4c28b517638c 100644
--- a/app/gui/src/project-view/providers/selectionButtons.ts
+++ b/app/gui/src/project-view/providers/selectionButtons.ts
@@ -4,8 +4,8 @@ import { type ComponentButtons, injectComponentButtons } from '@/providers/compo
 import { type Node } from '@/stores/graph'
 import { type Button, reactiveButton } from '@/util/button'
 import { type ToValue } from '@/util/reactivity'
-import * as iter from 'enso-common/src/utilities/data/iter'
-import { type DisjointKeysUnion } from 'enso-common/src/utilities/data/object'
+import * as iter from '@common/utilities/data/iter'
+import { type DisjointKeysUnion } from '@common/utilities/data/object'
 import { computed, type ComputedRef, type Ref, ref, toValue } from 'vue'
 
 export type SelectionButtons = Record<
diff --git a/app/gui/src/project-view/providers/tooltipRegistry.ts b/app/gui/src/project-view/providers/tooltipRegistry.ts
index 960a5f5431bb..4136bc561901 100644
--- a/app/gui/src/project-view/providers/tooltipRegistry.ts
+++ b/app/gui/src/project-view/providers/tooltipRegistry.ts
@@ -1,5 +1,5 @@
 import { createContextStore } from '@/providers'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import {
   computed,
   onUnmounted,
diff --git a/app/gui/src/project-view/stores/graph/__tests__/graphDatabase.test.ts b/app/gui/src/project-view/stores/graph/__tests__/graphDatabase.test.ts
index 0d0792a8519c..0e77c30464ef 100644
--- a/app/gui/src/project-view/stores/graph/__tests__/graphDatabase.test.ts
+++ b/app/gui/src/project-view/stores/graph/__tests__/graphDatabase.test.ts
@@ -1,7 +1,7 @@
 import { asNodeId, GraphDb } from '@/stores/graph/graphDatabase'
 import { Ast } from '@/util/ast'
+import * as iter from '@common/utilities/data/iter'
 import assert from 'assert'
-import * as iter from 'enso-common/src/utilities/data/iter'
 import { expect, test } from 'vitest'
 import { watchEffect } from 'vue'
 import type { AstId } from 'ydoc-shared/ast'
diff --git a/app/gui/src/project-view/stores/graph/graphDatabase.ts b/app/gui/src/project-view/stores/graph/graphDatabase.ts
index e7f08f39b292..0b1845c638c8 100644
--- a/app/gui/src/project-view/stores/graph/graphDatabase.ts
+++ b/app/gui/src/project-view/stores/graph/graphDatabase.ts
@@ -25,7 +25,7 @@ import {
   resumeShallowReactivity,
   syncSetDiff,
 } from '@/util/reactivity'
-import * as objects from 'enso-common/src/utilities/data/object'
+import * as objects from '@common/utilities/data/object'
 import * as set from 'lib0/set'
 import { reactive, ref, shallowReactive, type Ref, type WatchStopHandle } from 'vue'
 import { type SourceDocument } from 'ydoc-shared/ast/sourceDocument'
diff --git a/app/gui/src/project-view/stores/graph/index.ts b/app/gui/src/project-view/stores/graph/index.ts
index 9836946d92df..0294d4705b7b 100644
--- a/app/gui/src/project-view/stores/graph/index.ts
+++ b/app/gui/src/project-view/stores/graph/index.ts
@@ -27,8 +27,8 @@ import { andThen, Err, mapOk, Ok, unwrap, type Result } from '@/util/data/result
 import { Vec2 } from '@/util/data/vec2'
 import { normalizeQualifiedName, tryQualifiedName } from '@/util/qualifiedName'
 import { useWatchContext } from '@/util/reactivity'
+import * as iter from '@common/utilities/data/iter'
 import { computedAsync } from '@vueuse/core'
-import * as iter from 'enso-common/src/utilities/data/iter'
 import { map, set } from 'lib0'
 import {
   computed,
diff --git a/app/gui/src/project-view/stores/graph/unconnectedEdges.ts b/app/gui/src/project-view/stores/graph/unconnectedEdges.ts
index 54b575e20d44..34f6430bd12b 100644
--- a/app/gui/src/project-view/stores/graph/unconnectedEdges.ts
+++ b/app/gui/src/project-view/stores/graph/unconnectedEdges.ts
@@ -1,7 +1,7 @@
 import type { PortId } from '@/providers/portInfo'
 import type { ConnectedEdge } from '@/stores/graph/index'
 import { Vec2 } from '@/util/data/vec2'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import { computed, ref, watch, type WatchSource } from 'vue'
 import type { AstId } from 'ydoc-shared/ast'
 
diff --git a/app/gui/src/project-view/util/ast/__tests__/raw.test.ts b/app/gui/src/project-view/util/ast/__tests__/raw.test.ts
index edff0155287c..754a3d7c03d6 100644
--- a/app/gui/src/project-view/util/ast/__tests__/raw.test.ts
+++ b/app/gui/src/project-view/util/ast/__tests__/raw.test.ts
@@ -1,5 +1,5 @@
 import { RawAst, rawParseModule, readAstOrTokenSpan, walkRecursive } from '@/util/ast/raw'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import { assert, expect, test } from 'vitest'
 import { Token, Tree } from 'ydoc-shared/ast/generated/ast'
 import type { LazyObject } from 'ydoc-shared/ast/parserSupport'
diff --git a/app/gui/src/project-view/util/ast/__tests__/reactive.test.ts b/app/gui/src/project-view/util/ast/__tests__/reactive.test.ts
index 9f86b7a3cfd8..fdc8e1d9b52b 100644
--- a/app/gui/src/project-view/util/ast/__tests__/reactive.test.ts
+++ b/app/gui/src/project-view/util/ast/__tests__/reactive.test.ts
@@ -1,7 +1,7 @@
 import { assert, assertDefined } from '@/util/assert'
 import { Ast } from '@/util/ast'
 import { reactiveModule } from '@/util/ast/reactive'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import { expect, test } from 'vitest'
 import { nextTick, watchEffect } from 'vue'
 import * as Y from 'yjs'
diff --git a/app/gui/src/project-view/util/ast/extended.ts b/app/gui/src/project-view/util/ast/extended.ts
index 623f8190f196..7d51e7a9316d 100644
--- a/app/gui/src/project-view/util/ast/extended.ts
+++ b/app/gui/src/project-view/util/ast/extended.ts
@@ -9,7 +9,7 @@ import {
   walkRecursive,
 } from '@/util/ast/raw'
 import type { Opt } from '@/util/data/opt'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import * as encoding from 'lib0/encoding'
 import * as sha256 from 'lib0/hash/sha256'
 import * as map from 'lib0/map'
diff --git a/app/gui/src/project-view/util/ast/match.ts b/app/gui/src/project-view/util/ast/match.ts
index 0bd126cadb8b..c5a26739ae5c 100644
--- a/app/gui/src/project-view/util/ast/match.ts
+++ b/app/gui/src/project-view/util/ast/match.ts
@@ -1,6 +1,6 @@
 import { assert, assertDefined } from '@/util/assert'
 import { Ast } from '@/util/ast'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 
 /**
  * A pattern is an AST object with "placeholder" expressions.
diff --git a/app/gui/src/project-view/util/codemirror/index.ts b/app/gui/src/project-view/util/codemirror/index.ts
index ea8f99b40ae7..5f042e5aeb0f 100644
--- a/app/gui/src/project-view/util/codemirror/index.ts
+++ b/app/gui/src/project-view/util/codemirror/index.ts
@@ -9,7 +9,7 @@ import { elementHierarchy } from '@/util/dom'
 import { ToValue } from '@/util/reactivity'
 import { Compartment, EditorState, Extension, Text } from '@codemirror/state'
 import { EditorView } from '@codemirror/view'
-import { LINE_BOUNDARIES } from 'enso-common/src/utilities/data/string'
+import { LINE_BOUNDARIES } from '@common/utilities/data/string'
 import {
   type ComponentInstance,
   computed,
diff --git a/app/gui/src/project-view/util/containers.ts b/app/gui/src/project-view/util/containers.ts
index 85f76305731c..ea60fa07023f 100644
--- a/app/gui/src/project-view/util/containers.ts
+++ b/app/gui/src/project-view/util/containers.ts
@@ -1,6 +1,6 @@
 import { assertDefined, assertEqual } from '@/util/assert'
 import type { NonEmptyArray } from '@/util/data/array'
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 
 /**
  * Map that supports Object-based keys.
diff --git a/app/gui/tsconfig.app.json b/app/gui/tsconfig.app.json
index f32953b1430b..eba5afcda2c2 100644
--- a/app/gui/tsconfig.app.json
+++ b/app/gui/tsconfig.app.json
@@ -16,7 +16,11 @@
     "noEmit": true,
     "allowImportingTsExtensions": true,
     "types": ["vitest/importMeta"],
-    "paths": { "@/*": ["./src/project-view/*"], "#/*": ["./src/dashboard/*"] }
+    "paths": {
+      "@common/*": ["./src/common/*"],
+      "@/*": ["./src/project-view/*"],
+      "#/*": ["./src/dashboard/*"]
+    }
   },
   "references": [{ "path": "../ydoc-shared" }]
 }
diff --git a/app/gui/vite.config.ts b/app/gui/vite.config.ts
index 63a2eb7df915..d5ddcf362db4 100644
--- a/app/gui/vite.config.ts
+++ b/app/gui/vite.config.ts
@@ -82,6 +82,7 @@ export default defineConfig({
       shared: fileURLToPath(new URL('./shared', import.meta.url)),
       '@': fileURLToPath(new URL('./src/project-view', import.meta.url)),
       '#': fileURLToPath(new URL('./src/dashboard', import.meta.url)),
+      '@common': fileURLToPath(new URL('./src/common', import.meta.url)),
     },
   },
   envPrefix: 'ENSO_IDE_',
diff --git a/app/ide-desktop/client/tests/electronTest.ts b/app/ide-desktop/client/tests/electronTest.ts
index b49e2d0f716c..7711ed0238e4 100644
--- a/app/ide-desktop/client/tests/electronTest.ts
+++ b/app/ide-desktop/client/tests/electronTest.ts
@@ -1,7 +1,7 @@
 /** @file Commonly used functions for electron tests */
 
+import { TEXTS } from '@common/text'
 import { _electron, ElectronApplication, expect, type Page, test } from '@playwright/test'
-import { TEXTS } from 'enso-common/src/text'
 import * as random from 'lib0/random'
 import os from 'node:os'
 import pathModule from 'node:path'
diff --git a/app/ydoc-shared/src/ast/__tests__/documentation.test.ts b/app/ydoc-shared/src/ast/__tests__/documentation.test.ts
index 7ffb0c5becdc..7106f3f22e40 100644
--- a/app/ydoc-shared/src/ast/__tests__/documentation.test.ts
+++ b/app/ydoc-shared/src/ast/__tests__/documentation.test.ts
@@ -1,4 +1,4 @@
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import { describe, expect, test } from 'vitest'
 import * as Y from 'yjs'
 import { assert, assertDefined } from '../../util/assert'
diff --git a/app/ydoc-shared/src/ast/documentation.ts b/app/ydoc-shared/src/ast/documentation.ts
index 0efdd0d7b937..87822de3f733 100644
--- a/app/ydoc-shared/src/ast/documentation.ts
+++ b/app/ydoc-shared/src/ast/documentation.ts
@@ -1,4 +1,4 @@
-import { LINE_BOUNDARIES } from 'enso-common/src/utilities/data/string'
+import { LINE_BOUNDARIES } from '@common/utilities/data/string'
 import { markdownParser } from './ensoMarkdown'
 import { xxHash128 } from './ffi'
 import type { ConcreteChild, RawConcreteChild } from './print'
diff --git a/app/ydoc-shared/src/ast/parse.ts b/app/ydoc-shared/src/ast/parse.ts
index 134aff9ba2cd..2de33de52272 100644
--- a/app/ydoc-shared/src/ast/parse.ts
+++ b/app/ydoc-shared/src/ast/parse.ts
@@ -1,4 +1,4 @@
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import * as map from 'lib0/map'
 import * as Y from 'yjs'
 import { assert } from '../util/assert'
diff --git a/app/ydoc-shared/src/ast/syncToCode.ts b/app/ydoc-shared/src/ast/syncToCode.ts
index 77c5feb376d2..6b7f996546a6 100644
--- a/app/ydoc-shared/src/ast/syncToCode.ts
+++ b/app/ydoc-shared/src/ast/syncToCode.ts
@@ -1,4 +1,4 @@
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import * as map from 'lib0/map'
 import { assert, assertDefined } from '../util/assert'
 import {
diff --git a/app/ydoc-shared/src/util/data/text.ts b/app/ydoc-shared/src/util/data/text.ts
index e38464c81d6c..931266374e8a 100644
--- a/app/ydoc-shared/src/util/data/text.ts
+++ b/app/ydoc-shared/src/util/data/text.ts
@@ -1,4 +1,4 @@
-import * as iter from 'enso-common/src/utilities/data/iter'
+import * as iter from '@common/utilities/data/iter'
 import diff from 'fast-diff'
 import { rangeEncloses, rangeLength, type SourceRange } from '../../yjsModel'
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bb04da00c086..f93cb42b6dda 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -194,6 +194,12 @@ importers:
       '@stripe/stripe-js':
         specifier: ^3.5.0
         version: 3.5.0
+      '@tanstack/query-core':
+        specifier: 5.54.1
+        version: 5.54.1
+      '@tanstack/query-persist-client-core':
+        specifier: ^5.54.0
+        version: 5.54.1
       '@tanstack/react-query':
         specifier: 5.55.0
         version: 5.55.0(react@18.3.1)
@@ -344,6 +350,9 @@ importers:
       veaury:
         specifier: ^2.3.18
         version: 2.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      vitest:
+        specifier: ^1.3.1
+        version: 1.6.0(@types/node@22.9.0)(jsdom@24.1.0)(lightningcss@1.25.1)
       vue:
         specifier: ^3.5.2
         version: 3.5.2(typescript@5.5.3)
@@ -585,9 +594,6 @@ importers:
       vite-plugin-wasm:
         specifier: ^3.3.0
         version: 3.3.0(vite@5.4.10(@types/node@22.9.0)(lightningcss@1.25.1))
-      vitest:
-        specifier: ^1.3.1
-        version: 1.6.0(@types/node@22.9.0)(jsdom@24.1.0)(lightningcss@1.25.1)
       vue-react-wrapper:
         specifier: ^0.3.1
         version: 0.3.1(vue@3.5.2(typescript@5.5.3))

From 3eae0e4667508e707b56687f6d7bd5c9a309fd8d Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Sat, 14 Dec 2024 04:10:27 +1000
Subject: [PATCH 08/15] Prettier

---
 app/gui/src/common/utilities/data/__tests__/array.test.ts | 2 +-
 app/gui/src/common/utilities/data/__tests__/set.test.ts   | 2 +-
 app/gui/src/common/utilities/data/email.ts                | 6 +++---
 app/gui/src/common/utilities/data/iter.ts                 | 2 +-
 app/gui/src/common/utilities/data/string.ts               | 4 ++--
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/gui/src/common/utilities/data/__tests__/array.test.ts b/app/gui/src/common/utilities/data/__tests__/array.test.ts
index 70108c13e513..0c068844a415 100644
--- a/app/gui/src/common/utilities/data/__tests__/array.test.ts
+++ b/app/gui/src/common/utilities/data/__tests__/array.test.ts
@@ -40,7 +40,7 @@ fc.test.prop({ theArray: fc.fc.array(fc.fc.anything()) })(
 )
 
 fc.test.prop({
-  theArray: fc.fc.array(fc.fc.anything(), { minLength: 1 }).chain(theArray =>
+  theArray: fc.fc.array(fc.fc.anything(), { minLength: 1 }).chain((theArray) =>
     fc.fc.record({
       theArray: fc.fc.constant(theArray),
       i: fc.fc.nat(theArray.length - 1),
diff --git a/app/gui/src/common/utilities/data/__tests__/set.test.ts b/app/gui/src/common/utilities/data/__tests__/set.test.ts
index 7d874a6dfbf7..dad76c0dee7a 100644
--- a/app/gui/src/common/utilities/data/__tests__/set.test.ts
+++ b/app/gui/src/common/utilities/data/__tests__/set.test.ts
@@ -5,7 +5,7 @@ import { expect } from 'vitest'
 import { setPresence, withPresence } from '../set'
 
 fc.test.prop({
-  set: fc.fc.array(fc.fc.anything(), { minLength: 1 }).map(array => new Set(array)),
+  set: fc.fc.array(fc.fc.anything(), { minLength: 1 }).map((array) => new Set(array)),
   item: fc.fc.anything(),
 })('Manipulating `Set` presence', ({ set, item }) => {
   expect(withPresence(set, item, true).has(item)).toBe(true)
diff --git a/app/gui/src/common/utilities/data/email.ts b/app/gui/src/common/utilities/data/email.ts
index ee2e9c112bfc..330e4c6d630f 100644
--- a/app/gui/src/common/utilities/data/email.ts
+++ b/app/gui/src/common/utilities/data/email.ts
@@ -21,8 +21,8 @@ export interface ParseUserEmailsEntry {
 export function parseUserEmails(emailsString: string): ParseUserEmailsResult {
   const entries = emailsString
     .split(/[,;\s\n]+/)
-    .map(entry => entry.trim())
-    .filter(entry => entry.length > 0)
-    .map(email => ({ email }))
+    .map((entry) => entry.trim())
+    .filter((entry) => entry.length > 0)
+    .map((email) => ({ email }))
   return { entries }
 }
diff --git a/app/gui/src/common/utilities/data/iter.ts b/app/gui/src/common/utilities/data/iter.ts
index 7329fe8b2e1d..edd2b76b5b45 100644
--- a/app/gui/src/common/utilities/data/iter.ts
+++ b/app/gui/src/common/utilities/data/iter.ts
@@ -23,7 +23,7 @@ export function reduce<T, A>(
  * it will be consumed.
  */
 export function count(it: Iterable<unknown>): number {
-  return reduce(it, a => a + 1, 0)
+  return reduce(it, (a) => a + 1, 0)
 }
 
 /** An iterable with zero elements. */
diff --git a/app/gui/src/common/utilities/data/string.ts b/app/gui/src/common/utilities/data/string.ts
index e59ebc15bd1c..7a0642c81598 100644
--- a/app/gui/src/common/utilities/data/string.ts
+++ b/app/gui/src/common/utilities/data/string.ts
@@ -5,7 +5,7 @@ export const LINE_BOUNDARIES = /\r\n|[\n\v\f\r\x85\u2028\u2029]/g
 
 /** Return the given string, but with the first letter uppercased. */
 export function capitalizeFirst(string: string) {
-  return string.replace(/^./, match => match.toUpperCase())
+  return string.replace(/^./, (match) => match.toUpperCase())
 }
 
 /** Sanitizes a string for use as a regex. */
@@ -23,7 +23,7 @@ export function isWhitespaceOnly(string: string) {
  * DOES NOT make particles lowercase.
  */
 export function camelCaseToTitleCase(string: string) {
-  return string.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/^./, c => c.toUpperCase())
+  return string.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/^./, (c) => c.toUpperCase())
 }
 
 /**

From e12c285cff91cbc13e727ac692db36bf4e56036d Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Sat, 14 Dec 2024 04:22:57 +1000
Subject: [PATCH 09/15] Fix type error

---
 app/gui/src/common/services/tanstackQuery/query.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/gui/src/common/services/tanstackQuery/query.ts b/app/gui/src/common/services/tanstackQuery/query.ts
index b59de5287334..e7421eaa16cf 100644
--- a/app/gui/src/common/services/tanstackQuery/query.ts
+++ b/app/gui/src/common/services/tanstackQuery/query.ts
@@ -3,8 +3,8 @@
 import type * as queryCore from '@tanstack/query-core'
 
 import * as object from '../../utilities/data/object'
-import type Backend from './services/Backend'
-import * as backendModule from './services/Backend'
+import type Backend from '../Backend'
+import * as backendModule from '../Backend'
 
 /** The properties of the Backend type that are methods. */
 export type BackendMethods = object.ExtractKeys<Backend, object.MethodOf<Backend>>

From 04c01e574ef80e91b495b50ab6a3fd99cb57c661 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Sat, 14 Dec 2024 04:30:41 +1000
Subject: [PATCH 10/15] Update pnpm lockfile

---
 pnpm-lock.yaml | 28 +---------------------------
 1 file changed, 1 insertion(+), 27 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f93cb42b6dda..e02984bd912e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -74,33 +74,7 @@ importers:
         specifier: ^1.3.1
         version: 1.6.0(@types/node@22.9.0)(jsdom@24.1.0)(lightningcss@1.25.1)
 
-  app/common:
-    dependencies:
-      '@tanstack/query-core':
-        specifier: 5.54.1
-        version: 5.54.1
-      '@tanstack/query-persist-client-core':
-        specifier: ^5.54.0
-        version: 5.54.1
-      '@tanstack/vue-query':
-        specifier: '>= 5.54.0 < 5.56.0'
-        version: 5.54.2(vue@3.5.2(typescript@5.5.3))
-      lib0:
-        specifier: ^0.2.85
-        version: 0.2.94
-      react:
-        specifier: ^18.3.1
-        version: 18.3.1
-      vitest:
-        specifier: ^1.3.1
-        version: 1.6.0(@types/node@22.9.0)(jsdom@24.1.0)(lightningcss@1.25.1)
-      vue:
-        specifier: ^3.5.2
-        version: 3.5.2(typescript@5.5.3)
-    devDependencies:
-      '@fast-check/vitest':
-        specifier: ^0.0.8
-        version: 0.0.8(vitest@1.6.0(@types/node@22.9.0)(jsdom@24.1.0)(lightningcss@1.25.1))
+  app/common: {}
 
   app/gui:
     dependencies:

From 7cafd54ca7cdc982bdecf01ddfb37244f8c55272 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Sat, 14 Dec 2024 04:41:32 +1000
Subject: [PATCH 11/15] Fix `index.html`

---
 app/gui/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/gui/index.html b/app/gui/index.html
index 2fd49ff74630..c5ab6155f34e 100644
--- a/app/gui/index.html
+++ b/app/gui/index.html
@@ -40,7 +40,7 @@
     <title>Enso %ENSO_IDE_VERSION%</title>
 
     <script type="module">
-      import { platform } from '../common/src/detect.ts'
+      import { platform } from '/src/common/utilities/detect'
 
       const currentPlatform = platform()
 

From 579120d72edfcb9f245a302052d79975a5af0f19 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 19 Dec 2024 21:15:52 +1000
Subject: [PATCH 12/15] Fix import errors

---
 app/common/package.json                       |   5 +
 app/common/src/iter.ts                        | 230 ++++++++++++++++++
 app/common/src/string.ts                      |   2 +
 app/common/tsconfig.json                      |   8 +-
 .../utilities/data/__tests__/iter.test.ts     |   2 +-
 app/gui/src/common/utilities/data/iter.ts     | 230 +-----------------
 app/gui/src/common/utilities/data/string.ts   |   4 +-
 .../components/CodeEditor/diagnostics.ts      |   2 +-
 .../components/CodeEditor/tooltips.ts         |   2 +-
 .../components/ColorPickerMenu.vue            |   2 +-
 .../components/ColorRing/gradient.ts          |   2 +-
 .../components/DocumentationPanel/ir.ts       |   2 +-
 .../project-view/components/GraphEditor.vue   |   2 +-
 .../components/GraphEditor/clipboard.ts       |   2 +-
 .../components/GraphEditor/dragging.ts        |   2 +-
 .../WidgetTableEditor/tableInputArgument.ts   |   2 +-
 .../widgets/WidgetTableEditor/tableParsing.ts |   2 +-
 .../components/shared/AgGridTableView.vue     |   2 +-
 .../project-view/composables/nodeCreation.ts  |   2 +-
 .../src/project-view/composables/selection.ts |   2 +-
 .../providers/selectionButtons.ts             |   2 +-
 .../project-view/providers/tooltipRegistry.ts |   2 +-
 .../src/project-view/stores/graph/index.ts    |   2 +-
 .../stores/graph/unconnectedEdges.ts          |   2 +-
 app/gui/src/project-view/util/ast/match.ts    |   2 +-
 app/gui/src/project-view/util/containers.ts   |   2 +-
 .../src/ast/__tests__/documentation.test.ts   |   2 +-
 app/ydoc-shared/src/ast/documentation.ts      |   2 +-
 app/ydoc-shared/src/ast/parse.ts              |   2 +-
 app/ydoc-shared/src/ast/syncToCode.ts         |   2 +-
 app/ydoc-shared/src/util/data/text.ts         |   2 +-
 pnpm-lock.yaml                                |   6 +-
 32 files changed, 270 insertions(+), 265 deletions(-)
 create mode 100644 app/common/src/iter.ts
 create mode 100644 app/common/src/string.ts

diff --git a/app/common/package.json b/app/common/package.json
index 88ad78606892..ec91091636f0 100644
--- a/app/common/package.json
+++ b/app/common/package.json
@@ -8,10 +8,15 @@
     "./src/config.json": "./src/config.json",
     "./src/accessToken": "./src/accessToken.ts",
     "./src/appConfig": "./src/appConfig.js",
+    "./src/iter": "./src/iter.ts",
     "./src/buildUtils": "./src/buildUtils.js",
+    "./src/string": "./src/string.ts",
     "./src/types": "./src/types.d.ts"
   },
   "scripts": {
     "lint": "eslint ./src --cache --max-warnings=0"
+  },
+  "dependencies": {
+    "lib0": "^0.2.85"
   }
 }
diff --git a/app/common/src/iter.ts b/app/common/src/iter.ts
new file mode 100644
index 000000000000..edd2b76b5b45
--- /dev/null
+++ b/app/common/src/iter.ts
@@ -0,0 +1,230 @@
+/** @file Utilities for manipulating {@link Iterator}s and {@link Iterable}s. */
+
+import { iteratorFilter, mapIterator } from 'lib0/iterator'
+
+/** Similar to {@link Array.prototype.reduce|}, but consumes elements from any iterable. */
+export function reduce<T, A>(
+  iterable: Iterable<T>,
+  f: (accumulator: A, element: T) => A,
+  initialAccumulator: A,
+): A {
+  const iterator = iterable[Symbol.iterator]()
+  let accumulator = initialAccumulator
+  let result = iterator.next()
+  while (!result.done) {
+    accumulator = f(accumulator, result.value)
+    result = iterator.next()
+  }
+  return accumulator
+}
+
+/**
+ * Iterates the provided iterable, returning the number of elements it yielded. Note that if the input is an iterator,
+ * it will be consumed.
+ */
+export function count(it: Iterable<unknown>): number {
+  return reduce(it, (a) => a + 1, 0)
+}
+
+/** An iterable with zero elements. */
+export function* empty(): Generator<never> {}
+
+/**
+ * An iterable `yield`ing numeric values with the given step between the start (inclusive)
+ * and the end (exclusive).
+ */
+export function* range(start: number, stop: number, step = start <= stop ? 1 : -1) {
+  if ((step > 0 && start > stop) || (step < 0 && start < stop)) {
+    throw new Error(
+      "The range's step is in the wrong direction - please use Infinity or -Infinity as the endpoint for an infinite range.",
+    )
+  }
+  if (start <= stop) {
+    while (start < stop) {
+      yield start
+      start += step
+    }
+  } else {
+    while (start > stop) {
+      yield start
+      start += step
+    }
+  }
+}
+
+/** @returns An iterator that yields the results of applying the given function to each value of the given iterable. */
+export function map<T, U>(it: Iterable<T>, f: (value: T) => U): IterableIterator<U> {
+  return mapIterator(it[Symbol.iterator](), f)
+}
+
+export function filter<T, S extends T>(
+  iter: Iterable<T>,
+  include: (value: T) => value is S,
+): IterableIterator<S>
+export function filter<T>(iter: Iterable<T>, include: (value: T) => boolean): IterableIterator<T>
+/**
+ * Return an {@link Iterable} that `yield`s only the values from the given source iterable
+ * that pass the given predicate.
+ */
+export function filter<T>(iter: Iterable<T>, include: (value: T) => boolean): IterableIterator<T> {
+  return iteratorFilter(iter[Symbol.iterator](), include)
+}
+
+/**
+ * Return an {@link Iterable} that `yield`s values from each iterable sequentially,
+ * yielding values from the second iterable only after exhausting the first iterable, and so on.
+ */
+export function* chain<T>(...iters: Iterable<T>[]) {
+  for (const iter of iters) {
+    yield* iter
+  }
+}
+
+/**
+ * Return an iterable that `yield`s the next value from both given source iterables at the same time.
+ * Stops `yield`ing when *either* iterable is exhausted.
+ */
+export function* zip<T, U>(left: Iterable<T>, right: Iterable<U>): Generator<[T, U]> {
+  const leftIterator = left[Symbol.iterator]()
+  const rightIterator = right[Symbol.iterator]()
+  while (true) {
+    const leftResult = leftIterator.next()
+    const rightResult = rightIterator.next()
+    if (leftResult.done || rightResult.done) break
+    yield [leftResult.value, rightResult.value]
+  }
+}
+
+/**
+ * Return an iterable that `yield`s the next value from both given source iterables at the same time.
+ * `yield`s `undefined` for the shorter iterator when it is exhausted.
+ */
+export function* zipLongest<T, U>(
+  left: Iterable<T>,
+  right: Iterable<U>,
+): Generator<[T | undefined, U | undefined]> {
+  const leftIterator = left[Symbol.iterator]()
+  const rightIterator = right[Symbol.iterator]()
+  while (true) {
+    const leftResult = leftIterator.next()
+    const rightResult = rightIterator.next()
+    if (leftResult.done && rightResult.done) break
+    yield [
+      leftResult.done ? undefined : leftResult.value,
+      rightResult.done ? undefined : rightResult.value,
+    ]
+  }
+}
+
+/**
+ * Return the value of the iterator if and only if it contains exactly one value.
+ * Otherwise, return `undefined`.
+ */
+export function tryGetSoleValue<T>(iter: Iterable<T>): T | undefined {
+  const iterator = iter[Symbol.iterator]()
+  const result = iterator.next()
+  if (result.done) return
+  const excessResult = iterator.next()
+  if (!excessResult.done) return
+  return result.value
+}
+
+/** Utility to simplify consuming an iterator one part at a time. */
+export class Resumable<T> {
+  private readonly iterator: Iterator<T>
+  private current: IteratorResult<T>
+  /** Create a {@link Resumable}. */
+  constructor(iterable: Iterable<T>) {
+    this.iterator = iterable[Symbol.iterator]()
+    this.current = this.iterator.next()
+  }
+
+  /** The current value of the iterator. */
+  peek() {
+    return this.current.done ? undefined : this.current.value
+  }
+
+  /** Advance the iterator, saving the new current value of the iterator. */
+  advance() {
+    this.current = this.iterator.next()
+  }
+
+  /**
+   * The given function peeks at the current value. If the function returns `true`, the current value will be advanced
+   * and the function called again; if it returns `false`, the peeked value remains current and `advanceWhile` returns.
+   */
+  advanceWhile(f: (value: T) => boolean) {
+    while (!this.current.done && f(this.current.value)) {
+      this.current = this.iterator.next()
+    }
+  }
+
+  /** Apply the given function to all values remaining in the iterator. */
+  forEach(f: (value: T) => void) {
+    while (!this.current.done) {
+      f(this.current.value)
+      this.current = this.iterator.next()
+    }
+  }
+}
+
+/** Returns an iterator that yields the values of the provided iterator that are not strictly-equal to `undefined`. */
+export function* filterDefined<T>(iterable: Iterable<T | undefined>): IterableIterator<T> {
+  for (const value of iterable) {
+    if (value !== undefined) yield value
+  }
+}
+
+/**
+ * Returns whether the predicate returned `true` for all values yielded by the provided iterator. Short-circuiting.
+ * Returns `true` if the iterator doesn't yield any values.
+ */
+export function every<T>(iter: Iterable<T>, f: (value: T) => boolean): boolean {
+  for (const value of iter) if (!f(value)) return false
+  return true
+}
+
+/**
+ * Returns whether the predicate returned `true` for any values yielded by the provided iterator. Short-circuiting.
+ * Returns `false` if the iterator doesn't yield any values.
+ */
+export function some<T>(iter: Iterable<T>, f: (value: T) => boolean): boolean {
+  for (const value of iter) if (f(value)) return true
+  return false
+}
+
+export function find<T, S extends T>(iter: Iterable<T>, f: (value: T) => value is S): S | undefined
+export function find<T>(iter: Iterable<T>, f: (value: T) => boolean): T | undefined
+/** Return the first element returned by the iterable which meets the condition. */
+export function find<T>(iter: Iterable<T>, f: (value: T) => boolean): T | undefined {
+  for (const value of iter) {
+    if (f(value)) return value
+  }
+  return undefined
+}
+
+/** Returns the first element yielded by the iterable. */
+export function first<T>(iterable: Iterable<T>): T | undefined {
+  const iterator = iterable[Symbol.iterator]()
+  const result = iterator.next()
+  return result.done ? undefined : result.value
+}
+
+/**
+ * Return last element returned by the iterable.
+ * NOTE: Linear complexity. This function always visits the whole iterable. Using this with an
+ * infinite generator will cause an infinite loop.
+ */
+export function last<T>(iter: Iterable<T>): T | undefined {
+  let last
+  for (const el of iter) last = el
+  return last
+}
+
+/** Yields items of the iterable with their index. */
+export function* enumerate<T>(items: Iterable<T>): Generator<[T, number]> {
+  let index = 0
+  for (const item of items) {
+    yield [item, index++]
+  }
+}
diff --git a/app/common/src/string.ts b/app/common/src/string.ts
new file mode 100644
index 000000000000..c2aeebbc7db6
--- /dev/null
+++ b/app/common/src/string.ts
@@ -0,0 +1,2 @@
+/** See http://www.unicode.org/reports/tr18/#Line_Boundaries */
+export const LINE_BOUNDARIES = /\r\n|[\n\v\f\r\x85\u2028\u2029]/g
diff --git a/app/common/tsconfig.json b/app/common/tsconfig.json
index f94fc2792ff5..182da76aa21b 100644
--- a/app/common/tsconfig.json
+++ b/app/common/tsconfig.json
@@ -6,11 +6,5 @@
     "checkJs": true,
     "skipLibCheck": false
   },
-  "include": [
-    "./src/",
-    "./src/text/english.json",
-    "../types/",
-    "../gui/src/common/services/tanstackQueryClient.ts",
-    "../gui/src/common/services/backendQuery.ts"
-  ]
+  "include": ["./src/", "../types/"]
 }
diff --git a/app/gui/src/common/utilities/data/__tests__/iter.test.ts b/app/gui/src/common/utilities/data/__tests__/iter.test.ts
index e831b21bf6de..0c008d97172d 100644
--- a/app/gui/src/common/utilities/data/__tests__/iter.test.ts
+++ b/app/gui/src/common/utilities/data/__tests__/iter.test.ts
@@ -1,6 +1,6 @@
 import { expect, test } from 'vitest'
 
-import * as iter from '../iter'
+import * as iter from 'enso-common/src/iter'
 
 interface IteratorCase<T> {
   iterable: Iterable<T>
diff --git a/app/gui/src/common/utilities/data/iter.ts b/app/gui/src/common/utilities/data/iter.ts
index edd2b76b5b45..533431361990 100644
--- a/app/gui/src/common/utilities/data/iter.ts
+++ b/app/gui/src/common/utilities/data/iter.ts
@@ -1,230 +1,2 @@
 /** @file Utilities for manipulating {@link Iterator}s and {@link Iterable}s. */
-
-import { iteratorFilter, mapIterator } from 'lib0/iterator'
-
-/** Similar to {@link Array.prototype.reduce|}, but consumes elements from any iterable. */
-export function reduce<T, A>(
-  iterable: Iterable<T>,
-  f: (accumulator: A, element: T) => A,
-  initialAccumulator: A,
-): A {
-  const iterator = iterable[Symbol.iterator]()
-  let accumulator = initialAccumulator
-  let result = iterator.next()
-  while (!result.done) {
-    accumulator = f(accumulator, result.value)
-    result = iterator.next()
-  }
-  return accumulator
-}
-
-/**
- * Iterates the provided iterable, returning the number of elements it yielded. Note that if the input is an iterator,
- * it will be consumed.
- */
-export function count(it: Iterable<unknown>): number {
-  return reduce(it, (a) => a + 1, 0)
-}
-
-/** An iterable with zero elements. */
-export function* empty(): Generator<never> {}
-
-/**
- * An iterable `yield`ing numeric values with the given step between the start (inclusive)
- * and the end (exclusive).
- */
-export function* range(start: number, stop: number, step = start <= stop ? 1 : -1) {
-  if ((step > 0 && start > stop) || (step < 0 && start < stop)) {
-    throw new Error(
-      "The range's step is in the wrong direction - please use Infinity or -Infinity as the endpoint for an infinite range.",
-    )
-  }
-  if (start <= stop) {
-    while (start < stop) {
-      yield start
-      start += step
-    }
-  } else {
-    while (start > stop) {
-      yield start
-      start += step
-    }
-  }
-}
-
-/** @returns An iterator that yields the results of applying the given function to each value of the given iterable. */
-export function map<T, U>(it: Iterable<T>, f: (value: T) => U): IterableIterator<U> {
-  return mapIterator(it[Symbol.iterator](), f)
-}
-
-export function filter<T, S extends T>(
-  iter: Iterable<T>,
-  include: (value: T) => value is S,
-): IterableIterator<S>
-export function filter<T>(iter: Iterable<T>, include: (value: T) => boolean): IterableIterator<T>
-/**
- * Return an {@link Iterable} that `yield`s only the values from the given source iterable
- * that pass the given predicate.
- */
-export function filter<T>(iter: Iterable<T>, include: (value: T) => boolean): IterableIterator<T> {
-  return iteratorFilter(iter[Symbol.iterator](), include)
-}
-
-/**
- * Return an {@link Iterable} that `yield`s values from each iterable sequentially,
- * yielding values from the second iterable only after exhausting the first iterable, and so on.
- */
-export function* chain<T>(...iters: Iterable<T>[]) {
-  for (const iter of iters) {
-    yield* iter
-  }
-}
-
-/**
- * Return an iterable that `yield`s the next value from both given source iterables at the same time.
- * Stops `yield`ing when *either* iterable is exhausted.
- */
-export function* zip<T, U>(left: Iterable<T>, right: Iterable<U>): Generator<[T, U]> {
-  const leftIterator = left[Symbol.iterator]()
-  const rightIterator = right[Symbol.iterator]()
-  while (true) {
-    const leftResult = leftIterator.next()
-    const rightResult = rightIterator.next()
-    if (leftResult.done || rightResult.done) break
-    yield [leftResult.value, rightResult.value]
-  }
-}
-
-/**
- * Return an iterable that `yield`s the next value from both given source iterables at the same time.
- * `yield`s `undefined` for the shorter iterator when it is exhausted.
- */
-export function* zipLongest<T, U>(
-  left: Iterable<T>,
-  right: Iterable<U>,
-): Generator<[T | undefined, U | undefined]> {
-  const leftIterator = left[Symbol.iterator]()
-  const rightIterator = right[Symbol.iterator]()
-  while (true) {
-    const leftResult = leftIterator.next()
-    const rightResult = rightIterator.next()
-    if (leftResult.done && rightResult.done) break
-    yield [
-      leftResult.done ? undefined : leftResult.value,
-      rightResult.done ? undefined : rightResult.value,
-    ]
-  }
-}
-
-/**
- * Return the value of the iterator if and only if it contains exactly one value.
- * Otherwise, return `undefined`.
- */
-export function tryGetSoleValue<T>(iter: Iterable<T>): T | undefined {
-  const iterator = iter[Symbol.iterator]()
-  const result = iterator.next()
-  if (result.done) return
-  const excessResult = iterator.next()
-  if (!excessResult.done) return
-  return result.value
-}
-
-/** Utility to simplify consuming an iterator one part at a time. */
-export class Resumable<T> {
-  private readonly iterator: Iterator<T>
-  private current: IteratorResult<T>
-  /** Create a {@link Resumable}. */
-  constructor(iterable: Iterable<T>) {
-    this.iterator = iterable[Symbol.iterator]()
-    this.current = this.iterator.next()
-  }
-
-  /** The current value of the iterator. */
-  peek() {
-    return this.current.done ? undefined : this.current.value
-  }
-
-  /** Advance the iterator, saving the new current value of the iterator. */
-  advance() {
-    this.current = this.iterator.next()
-  }
-
-  /**
-   * The given function peeks at the current value. If the function returns `true`, the current value will be advanced
-   * and the function called again; if it returns `false`, the peeked value remains current and `advanceWhile` returns.
-   */
-  advanceWhile(f: (value: T) => boolean) {
-    while (!this.current.done && f(this.current.value)) {
-      this.current = this.iterator.next()
-    }
-  }
-
-  /** Apply the given function to all values remaining in the iterator. */
-  forEach(f: (value: T) => void) {
-    while (!this.current.done) {
-      f(this.current.value)
-      this.current = this.iterator.next()
-    }
-  }
-}
-
-/** Returns an iterator that yields the values of the provided iterator that are not strictly-equal to `undefined`. */
-export function* filterDefined<T>(iterable: Iterable<T | undefined>): IterableIterator<T> {
-  for (const value of iterable) {
-    if (value !== undefined) yield value
-  }
-}
-
-/**
- * Returns whether the predicate returned `true` for all values yielded by the provided iterator. Short-circuiting.
- * Returns `true` if the iterator doesn't yield any values.
- */
-export function every<T>(iter: Iterable<T>, f: (value: T) => boolean): boolean {
-  for (const value of iter) if (!f(value)) return false
-  return true
-}
-
-/**
- * Returns whether the predicate returned `true` for any values yielded by the provided iterator. Short-circuiting.
- * Returns `false` if the iterator doesn't yield any values.
- */
-export function some<T>(iter: Iterable<T>, f: (value: T) => boolean): boolean {
-  for (const value of iter) if (f(value)) return true
-  return false
-}
-
-export function find<T, S extends T>(iter: Iterable<T>, f: (value: T) => value is S): S | undefined
-export function find<T>(iter: Iterable<T>, f: (value: T) => boolean): T | undefined
-/** Return the first element returned by the iterable which meets the condition. */
-export function find<T>(iter: Iterable<T>, f: (value: T) => boolean): T | undefined {
-  for (const value of iter) {
-    if (f(value)) return value
-  }
-  return undefined
-}
-
-/** Returns the first element yielded by the iterable. */
-export function first<T>(iterable: Iterable<T>): T | undefined {
-  const iterator = iterable[Symbol.iterator]()
-  const result = iterator.next()
-  return result.done ? undefined : result.value
-}
-
-/**
- * Return last element returned by the iterable.
- * NOTE: Linear complexity. This function always visits the whole iterable. Using this with an
- * infinite generator will cause an infinite loop.
- */
-export function last<T>(iter: Iterable<T>): T | undefined {
-  let last
-  for (const el of iter) last = el
-  return last
-}
-
-/** Yields items of the iterable with their index. */
-export function* enumerate<T>(items: Iterable<T>): Generator<[T, number]> {
-  let index = 0
-  for (const item of items) {
-    yield [item, index++]
-  }
-}
+export * from 'enso-common/src/iter'
diff --git a/app/gui/src/common/utilities/data/string.ts b/app/gui/src/common/utilities/data/string.ts
index 7a0642c81598..c43b5f6a7288 100644
--- a/app/gui/src/common/utilities/data/string.ts
+++ b/app/gui/src/common/utilities/data/string.ts
@@ -1,7 +1,5 @@
 /** @file Utilities for manipulating strings. */
-
-/** See http://www.unicode.org/reports/tr18/#Line_Boundaries */
-export const LINE_BOUNDARIES = /\r\n|[\n\v\f\r\x85\u2028\u2029]/g
+export * from 'enso-common/src/string'
 
 /** Return the given string, but with the first letter uppercased. */
 export function capitalizeFirst(string: string) {
diff --git a/app/gui/src/project-view/components/CodeEditor/diagnostics.ts b/app/gui/src/project-view/components/CodeEditor/diagnostics.ts
index 830d800661e3..c048e8ddfeb0 100644
--- a/app/gui/src/project-view/components/CodeEditor/diagnostics.ts
+++ b/app/gui/src/project-view/components/CodeEditor/diagnostics.ts
@@ -4,7 +4,7 @@ import { valueExt } from '@/util/codemirror/stateEffect'
 import { type Diagnostic, forceLinting, linter } from '@codemirror/lint'
 import { type Extension } from '@codemirror/state'
 import { type EditorView } from '@codemirror/view'
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 import { computed, watchEffect } from 'vue'
 import { type SourceRange } from 'ydoc-shared/util/data/text'
 import { type ExternalId } from 'ydoc-shared/yjsModel'
diff --git a/app/gui/src/project-view/components/CodeEditor/tooltips.ts b/app/gui/src/project-view/components/CodeEditor/tooltips.ts
index 1f69dfa026a1..0d4a4f1f0cc3 100644
--- a/app/gui/src/project-view/components/CodeEditor/tooltips.ts
+++ b/app/gui/src/project-view/components/CodeEditor/tooltips.ts
@@ -13,8 +13,8 @@ import {
   tooltips,
   type TooltipView,
 } from '@codemirror/view'
+import * as iter from '@common/utilities/data/iter'
 import { type SyntaxNode } from '@lezer/common'
-import * as iter from 'enso-common/src/utilities/data/iter'
 import { h, markRaw, toValue } from 'vue'
 import { syntaxNodeAncestors } from 'ydoc-shared/util/lezer'
 
diff --git a/app/gui/src/project-view/components/ColorPickerMenu.vue b/app/gui/src/project-view/components/ColorPickerMenu.vue
index ef76e4ad7487..726b72746c1e 100644
--- a/app/gui/src/project-view/components/ColorPickerMenu.vue
+++ b/app/gui/src/project-view/components/ColorPickerMenu.vue
@@ -3,7 +3,7 @@ import ColorRing from '@/components/ColorRing.vue'
 import { injectNodeColors } from '@/providers/graphNodeColors'
 import { injectGraphSelection } from '@/providers/graphSelection'
 import { useGraphStore, type NodeId } from '@/stores/graph'
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 import { ref } from 'vue'
 
 const emit = defineEmits<{
diff --git a/app/gui/src/project-view/components/ColorRing/gradient.ts b/app/gui/src/project-view/components/ColorRing/gradient.ts
index f1c2a01286b5..7e512c2efe6e 100644
--- a/app/gui/src/project-view/components/ColorRing/gradient.ts
+++ b/app/gui/src/project-view/components/ColorRing/gradient.ts
@@ -1,5 +1,5 @@
 import { ensoColor, formatCssColor, normalizeHue } from '@/util/colors'
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 
 export interface FixedRange {
   start: number
diff --git a/app/gui/src/project-view/components/DocumentationPanel/ir.ts b/app/gui/src/project-view/components/DocumentationPanel/ir.ts
index 8e923b0e1185..0ae1b2144fac 100644
--- a/app/gui/src/project-view/components/DocumentationPanel/ir.ts
+++ b/app/gui/src/project-view/components/DocumentationPanel/ir.ts
@@ -3,7 +3,7 @@ import type { SuggestionEntry, SuggestionId } from '@/stores/suggestionDatabase/
 import { SuggestionKind, entryQn } from '@/stores/suggestionDatabase/entry'
 import type { Doc } from '@/util/docParser'
 import type { QualifiedName } from '@/util/qualifiedName'
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 import type { SuggestionEntryArgument } from 'ydoc-shared/languageServerTypes/suggestions'
 
 // === Types ===
diff --git a/app/gui/src/project-view/components/GraphEditor.vue b/app/gui/src/project-view/components/GraphEditor.vue
index 2f3119cdddfb..3c489b272f32 100644
--- a/app/gui/src/project-view/components/GraphEditor.vue
+++ b/app/gui/src/project-view/components/GraphEditor.vue
@@ -60,7 +60,7 @@ import { partition } from '@/util/data/array'
 import { Rect } from '@/util/data/rect'
 import { Err, Ok, unwrapOr } from '@/util/data/result'
 import { Vec2 } from '@/util/data/vec2'
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 import { set } from 'lib0'
 import {
   computed,
diff --git a/app/gui/src/project-view/components/GraphEditor/clipboard.ts b/app/gui/src/project-view/components/GraphEditor/clipboard.ts
index 554d17890cff..8948714eccb9 100644
--- a/app/gui/src/project-view/components/GraphEditor/clipboard.ts
+++ b/app/gui/src/project-view/components/GraphEditor/clipboard.ts
@@ -2,7 +2,7 @@ import type { NodeCreationOptions } from '@/composables/nodeCreation'
 import type { Node } from '@/stores/graph'
 import { nodeDocumentationText } from '@/util/ast/node'
 import { Vec2 } from '@/util/data/vec2'
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 import type { NodeMetadataFields } from 'ydoc-shared/ast'
 import { parseTsvData, tableToEnsoExpression } from './widgets/WidgetTableEditor/tableParsing'
 
diff --git a/app/gui/src/project-view/components/GraphEditor/dragging.ts b/app/gui/src/project-view/components/GraphEditor/dragging.ts
index bc0befdf0967..cb5bb10bca05 100644
--- a/app/gui/src/project-view/components/GraphEditor/dragging.ts
+++ b/app/gui/src/project-view/components/GraphEditor/dragging.ts
@@ -6,7 +6,7 @@ import type { Opt } from '@/util/data/opt'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import theme from '@/util/theme.json'
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 import { computed, markRaw, ref, watchEffect, type ComputedRef, type WatchStopHandle } from 'vue'
 
 const DRAG_SNAP_THRESHOLD = 16
diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts
index a2e698b0555b..c606cd851580 100644
--- a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts
+++ b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts
@@ -8,8 +8,8 @@ import { findIndexOpt } from '@/util/data/array'
 import { Err, Ok, type Result, transposeResult, unwrapOrWithLog } from '@/util/data/result'
 import { qnLastSegment, type QualifiedName } from '@/util/qualifiedName'
 import type { ToValue } from '@/util/reactivity'
-import * as iter from '@common/utilities/data/iter'
 import type { ColDef } from 'ag-grid-enterprise'
+import * as iter from 'enso-common/src/iter'
 import { computed, toValue } from 'vue'
 import type { ColumnSpecificHeaderParams } from './TableHeader.vue'
 
diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableParsing.ts b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableParsing.ts
index f916e658dfe3..07a55f0e3070 100644
--- a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableParsing.ts
+++ b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableParsing.ts
@@ -1,7 +1,7 @@
 import { Ast } from '@/util/ast'
 import { Pattern } from '@/util/ast/match'
 import { transpose } from '@common/utilities/data/array'
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 import Papa from 'papaparse'
 import { computed } from 'vue'
 import { DEFAULT_COLUMN_PREFIX, NOTHING_NAME } from './tableInputArgument'
diff --git a/app/gui/src/project-view/components/shared/AgGridTableView.vue b/app/gui/src/project-view/components/shared/AgGridTableView.vue
index bb977005d0d0..b6f8dc22c746 100644
--- a/app/gui/src/project-view/components/shared/AgGridTableView.vue
+++ b/app/gui/src/project-view/components/shared/AgGridTableView.vue
@@ -67,7 +67,6 @@ export const commonContextMenuActions = {
  */
 import type { TextFormatOptions } from '@/components/visualizations/TableVisualization.vue'
 import { useAutoBlur } from '@/util/autoBlur'
-import * as iter from '@common/utilities/data/iter'
 import { LINE_BOUNDARIES } from '@common/utilities/data/string'
 import type {
   CellEditingStartedEvent,
@@ -86,6 +85,7 @@ import type {
   RowHeightParams,
   SortChangedEvent,
 } from 'ag-grid-enterprise'
+import * as iter from 'enso-common/src/iter'
 import { type ComponentInstance, reactive, shallowRef, watch } from 'vue'
 import { clipboardNodeData, writeClipboard } from '../GraphEditor/clipboard'
 import {
diff --git a/app/gui/src/project-view/composables/nodeCreation.ts b/app/gui/src/project-view/composables/nodeCreation.ts
index 984b32d5c9ed..c2d2d01c0067 100644
--- a/app/gui/src/project-view/composables/nodeCreation.ts
+++ b/app/gui/src/project-view/composables/nodeCreation.ts
@@ -16,8 +16,8 @@ import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import { qnLastSegment, tryQualifiedName } from '@/util/qualifiedName'
 import type { ToValue } from '@/util/reactivity'
-import * as iter from '@common/utilities/data/iter'
 import { identity } from '@vueuse/core'
+import * as iter from 'enso-common/src/iter'
 import { nextTick, toValue } from 'vue'
 import { assert, assertNever } from 'ydoc-shared/util/assert'
 import { mustExtend } from 'ydoc-shared/util/types'
diff --git a/app/gui/src/project-view/composables/selection.ts b/app/gui/src/project-view/composables/selection.ts
index 380715c1896c..0ee1b961e666 100644
--- a/app/gui/src/project-view/composables/selection.ts
+++ b/app/gui/src/project-view/composables/selection.ts
@@ -7,8 +7,8 @@ import type { Rect } from '@/util/data/rect'
 import { intersectionSize } from '@/util/data/set'
 import { Vec2 } from '@/util/data/vec2'
 import { dataAttribute, selectorHierarchy } from '@/util/dom'
-import * as iter from '@common/utilities/data/iter'
 import { identity } from '@vueuse/core'
+import * as iter from 'enso-common/src/iter'
 import * as set from 'lib0/set'
 import { computed, ref, shallowReactive, shallowRef } from 'vue'
 import { Err, Ok, type Result } from 'ydoc-shared/util/data/result'
diff --git a/app/gui/src/project-view/providers/selectionButtons.ts b/app/gui/src/project-view/providers/selectionButtons.ts
index 4c28b517638c..d664777779b1 100644
--- a/app/gui/src/project-view/providers/selectionButtons.ts
+++ b/app/gui/src/project-view/providers/selectionButtons.ts
@@ -4,8 +4,8 @@ import { type ComponentButtons, injectComponentButtons } from '@/providers/compo
 import { type Node } from '@/stores/graph'
 import { type Button, reactiveButton } from '@/util/button'
 import { type ToValue } from '@/util/reactivity'
-import * as iter from '@common/utilities/data/iter'
 import { type DisjointKeysUnion } from '@common/utilities/data/object'
+import * as iter from 'enso-common/src/iter'
 import { computed, type ComputedRef, type Ref, ref, toValue } from 'vue'
 
 export type SelectionButtons = Record<
diff --git a/app/gui/src/project-view/providers/tooltipRegistry.ts b/app/gui/src/project-view/providers/tooltipRegistry.ts
index 4136bc561901..5fadc8529eff 100644
--- a/app/gui/src/project-view/providers/tooltipRegistry.ts
+++ b/app/gui/src/project-view/providers/tooltipRegistry.ts
@@ -1,5 +1,5 @@
 import { createContextStore } from '@/providers'
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 import {
   computed,
   onUnmounted,
diff --git a/app/gui/src/project-view/stores/graph/index.ts b/app/gui/src/project-view/stores/graph/index.ts
index 2b466e08773c..b28727589415 100644
--- a/app/gui/src/project-view/stores/graph/index.ts
+++ b/app/gui/src/project-view/stores/graph/index.ts
@@ -27,8 +27,8 @@ import { andThen, Err, mapOk, Ok, unwrap, type Result } from '@/util/data/result
 import { Vec2 } from '@/util/data/vec2'
 import { normalizeQualifiedName, tryQualifiedName } from '@/util/qualifiedName'
 import { useWatchContext } from '@/util/reactivity'
-import * as iter from '@common/utilities/data/iter'
 import { computedAsync } from '@vueuse/core'
+import * as iter from 'enso-common/src/iter'
 import { map, set } from 'lib0'
 import {
   computed,
diff --git a/app/gui/src/project-view/stores/graph/unconnectedEdges.ts b/app/gui/src/project-view/stores/graph/unconnectedEdges.ts
index 34f6430bd12b..92110964674d 100644
--- a/app/gui/src/project-view/stores/graph/unconnectedEdges.ts
+++ b/app/gui/src/project-view/stores/graph/unconnectedEdges.ts
@@ -1,7 +1,7 @@
 import type { PortId } from '@/providers/portInfo'
 import type { ConnectedEdge } from '@/stores/graph/index'
 import { Vec2 } from '@/util/data/vec2'
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 import { computed, ref, watch, type WatchSource } from 'vue'
 import type { AstId } from 'ydoc-shared/ast'
 
diff --git a/app/gui/src/project-view/util/ast/match.ts b/app/gui/src/project-view/util/ast/match.ts
index c5a26739ae5c..bb80224c61a5 100644
--- a/app/gui/src/project-view/util/ast/match.ts
+++ b/app/gui/src/project-view/util/ast/match.ts
@@ -1,6 +1,6 @@
 import { assert, assertDefined } from '@/util/assert'
 import { Ast } from '@/util/ast'
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 
 /**
  * A pattern is an AST object with "placeholder" expressions.
diff --git a/app/gui/src/project-view/util/containers.ts b/app/gui/src/project-view/util/containers.ts
index ea60fa07023f..a4a20ef094ce 100644
--- a/app/gui/src/project-view/util/containers.ts
+++ b/app/gui/src/project-view/util/containers.ts
@@ -1,6 +1,6 @@
 import { assertDefined, assertEqual } from '@/util/assert'
 import type { NonEmptyArray } from '@/util/data/array'
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 
 /**
  * Map that supports Object-based keys.
diff --git a/app/ydoc-shared/src/ast/__tests__/documentation.test.ts b/app/ydoc-shared/src/ast/__tests__/documentation.test.ts
index 7106f3f22e40..47bb35df267e 100644
--- a/app/ydoc-shared/src/ast/__tests__/documentation.test.ts
+++ b/app/ydoc-shared/src/ast/__tests__/documentation.test.ts
@@ -1,4 +1,4 @@
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 import { describe, expect, test } from 'vitest'
 import * as Y from 'yjs'
 import { assert, assertDefined } from '../../util/assert'
diff --git a/app/ydoc-shared/src/ast/documentation.ts b/app/ydoc-shared/src/ast/documentation.ts
index 87822de3f733..8bd6a0c0fb97 100644
--- a/app/ydoc-shared/src/ast/documentation.ts
+++ b/app/ydoc-shared/src/ast/documentation.ts
@@ -1,4 +1,4 @@
-import { LINE_BOUNDARIES } from '@common/utilities/data/string'
+import { LINE_BOUNDARIES } from 'enso-common/src/string'
 import { markdownParser } from './ensoMarkdown'
 import { xxHash128 } from './ffi'
 import type { ConcreteChild, RawConcreteChild } from './print'
diff --git a/app/ydoc-shared/src/ast/parse.ts b/app/ydoc-shared/src/ast/parse.ts
index 2de33de52272..b36a91b75fc0 100644
--- a/app/ydoc-shared/src/ast/parse.ts
+++ b/app/ydoc-shared/src/ast/parse.ts
@@ -1,4 +1,4 @@
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 import * as map from 'lib0/map'
 import * as Y from 'yjs'
 import { assert } from '../util/assert'
diff --git a/app/ydoc-shared/src/ast/syncToCode.ts b/app/ydoc-shared/src/ast/syncToCode.ts
index a8390e51c39c..cce98128fd47 100644
--- a/app/ydoc-shared/src/ast/syncToCode.ts
+++ b/app/ydoc-shared/src/ast/syncToCode.ts
@@ -1,4 +1,4 @@
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 import * as map from 'lib0/map'
 import { assert, assertDefined } from '../util/assert'
 import {
diff --git a/app/ydoc-shared/src/util/data/text.ts b/app/ydoc-shared/src/util/data/text.ts
index 1ce095ea909c..da636029a672 100644
--- a/app/ydoc-shared/src/util/data/text.ts
+++ b/app/ydoc-shared/src/util/data/text.ts
@@ -1,4 +1,4 @@
-import * as iter from '@common/utilities/data/iter'
+import * as iter from 'enso-common/src/iter'
 import diff from 'fast-diff'
 import { type DeepReadonly } from '../../ast'
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f587fb73dfe7..ee015ad89849 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -74,7 +74,11 @@ importers:
         specifier: ^1.3.1
         version: 1.6.0(@types/node@22.9.0)(jsdom@24.1.0)(lightningcss@1.25.1)
 
-  app/common: {}
+  app/common:
+    dependencies:
+      lib0:
+        specifier: ^0.2.85
+        version: 0.2.94
 
   app/gui:
     dependencies:

From 45b2f164c3a802afde161c1d5d4d6d4a7e391aa2 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 19 Dec 2024 21:23:02 +1000
Subject: [PATCH 13/15] Prettier

---
 app/common/src/iter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/common/src/iter.ts b/app/common/src/iter.ts
index edd2b76b5b45..7329fe8b2e1d 100644
--- a/app/common/src/iter.ts
+++ b/app/common/src/iter.ts
@@ -23,7 +23,7 @@ export function reduce<T, A>(
  * it will be consumed.
  */
 export function count(it: Iterable<unknown>): number {
-  return reduce(it, (a) => a + 1, 0)
+  return reduce(it, a => a + 1, 0)
 }
 
 /** An iterable with zero elements. */

From d98c7b701b84c4b0bf51854edc437fa5c11e335e Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 19 Dec 2024 22:35:58 +1000
Subject: [PATCH 14/15] Fix errors

---
 app/common/package.json                                  | 1 +
 app/{gui/src/common => common/src}/text/english.json     | 0
 app/{gui/src/common => common/src}/text/index.ts         | 9 ---------
 app/gui/src/common/text.ts                               | 2 ++
 app/gui/src/dashboard/components/MenuEntry.tsx           | 2 +-
 .../Paywall/components/PaywallBulletPoints.tsx           | 2 +-
 .../dashboard/components/dashboard/KeyboardShortcut.tsx  | 2 +-
 .../src/dashboard/components/dashboard/Permission.tsx    | 2 +-
 .../dashboard/components/dashboard/column/columnUtils.ts | 2 +-
 .../src/dashboard/hooks/billing/FeaturesConfiguration.ts | 2 +-
 app/gui/src/dashboard/hooks/toastAndLogHooks.ts          | 2 +-
 app/gui/src/dashboard/layouts/Settings/data.tsx          | 2 +-
 app/gui/src/dashboard/layouts/TabBar.tsx                 | 2 +-
 app/gui/src/dashboard/modals/AboutModal.tsx              | 2 +-
 .../payments/components/PlanSelector/components/Card.tsx | 2 +-
 .../components/PlanSelector/getComponentForPlan.tsx      | 2 +-
 app/gui/src/dashboard/modules/payments/constants.ts      | 2 +-
 .../src/dashboard/pages/authentication/Setup/Setup.tsx   | 2 +-
 .../src/dashboard/pages/dashboard/DashboardTabBar.tsx    | 2 +-
 app/gui/src/dashboard/providers/TextProvider.tsx         | 8 +++++++-
 app/gui/src/dashboard/services/RemoteBackend.ts          | 2 +-
 app/ide-desktop/client/tests/electronTest.ts             | 2 +-
 22 files changed, 27 insertions(+), 27 deletions(-)
 rename app/{gui/src/common => common/src}/text/english.json (100%)
 rename app/{gui/src/common => common/src}/text/index.ts (98%)
 create mode 100644 app/gui/src/common/text.ts

diff --git a/app/common/package.json b/app/common/package.json
index ec91091636f0..8b5698b396d2 100644
--- a/app/common/package.json
+++ b/app/common/package.json
@@ -11,6 +11,7 @@
     "./src/iter": "./src/iter.ts",
     "./src/buildUtils": "./src/buildUtils.js",
     "./src/string": "./src/string.ts",
+    "./src/text": "./src/text/index.ts",
     "./src/types": "./src/types.d.ts"
   },
   "scripts": {
diff --git a/app/gui/src/common/text/english.json b/app/common/src/text/english.json
similarity index 100%
rename from app/gui/src/common/text/english.json
rename to app/common/src/text/english.json
diff --git a/app/gui/src/common/text/index.ts b/app/common/src/text/index.ts
similarity index 98%
rename from app/gui/src/common/text/index.ts
rename to app/common/src/text/index.ts
index 8c532137d50e..95b4414627ac 100644
--- a/app/gui/src/common/text/index.ts
+++ b/app/common/src/text/index.ts
@@ -1,11 +1,6 @@
 /** @file Functions related to displaying text. */
-
 import ENGLISH from './english.json' with { type: 'json' }
 
-// =============
-// === Types ===
-// =============
-
 /** Possible languages in which to display text. */
 export enum Language {
   english = 'english',
@@ -152,10 +147,6 @@ export interface Replacements
   extends PlaceholderOverrides,
     Record<Exclude<TextId, keyof PlaceholderOverrides>, []> {}
 
-// =================
-// === Constants ===
-// =================
-
 export const TEXTS: Readonly<Record<Language, Texts>> = {
   [Language.english]: ENGLISH,
 }
diff --git a/app/gui/src/common/text.ts b/app/gui/src/common/text.ts
new file mode 100644
index 000000000000..9de560d756ac
--- /dev/null
+++ b/app/gui/src/common/text.ts
@@ -0,0 +1,2 @@
+/** @file Functions related to displaying text. */
+export * from 'enso-common/src/text'
diff --git a/app/gui/src/dashboard/components/MenuEntry.tsx b/app/gui/src/dashboard/components/MenuEntry.tsx
index 9e3bcfa77ee3..0b07d67158ab 100644
--- a/app/gui/src/dashboard/components/MenuEntry.tsx
+++ b/app/gui/src/dashboard/components/MenuEntry.tsx
@@ -1,8 +1,8 @@
 /** @file An entry in a menu. */
 import * as React from 'react'
 
-import type * as text from '@common/text'
 import * as detect from '@common/utilities/detect'
+import type * as text from '../../../../common/src/text'
 
 import BlankIcon from '#/assets/blank.svg'
 
diff --git a/app/gui/src/dashboard/components/Paywall/components/PaywallBulletPoints.tsx b/app/gui/src/dashboard/components/Paywall/components/PaywallBulletPoints.tsx
index 8c0cc7b70c93..5c43fe220792 100644
--- a/app/gui/src/dashboard/components/Paywall/components/PaywallBulletPoints.tsx
+++ b/app/gui/src/dashboard/components/Paywall/components/PaywallBulletPoints.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
 
 import * as tw from 'tailwind-merge'
 
-import type * as text from '@common/text'
+import type * as text from '../../../../../../common/src/text'
 
 import Check from '#/assets/check_mark.svg'
 
diff --git a/app/gui/src/dashboard/components/dashboard/KeyboardShortcut.tsx b/app/gui/src/dashboard/components/dashboard/KeyboardShortcut.tsx
index 0e1d7fcb4a19..5c8f5c4a0020 100644
--- a/app/gui/src/dashboard/components/dashboard/KeyboardShortcut.tsx
+++ b/app/gui/src/dashboard/components/dashboard/KeyboardShortcut.tsx
@@ -1,8 +1,8 @@
 /** @file A visual representation of a keyboard shortcut. */
 import * as React from 'react'
 
-import type * as text from '@common/text'
 import * as detect from '@common/utilities/detect'
+import type * as text from '../../../../../common/src/text'
 
 import CommandKeyIcon from '#/assets/command_key.svg'
 import CtrlKeyIcon from '#/assets/ctrl_key.svg'
diff --git a/app/gui/src/dashboard/components/dashboard/Permission.tsx b/app/gui/src/dashboard/components/dashboard/Permission.tsx
index fd6c6f827762..42137d15f745 100644
--- a/app/gui/src/dashboard/components/dashboard/Permission.tsx
+++ b/app/gui/src/dashboard/components/dashboard/Permission.tsx
@@ -12,8 +12,8 @@ import {
   type Backend,
   type UserPermissionIdentifier,
 } from '@common/services/Backend'
-import type { TextId } from '@common/text'
 import { merge } from '@common/utilities/data/object'
+import type { TextId } from '../../../../../common/src/text'
 
 import { Text } from '#/components/AriaComponents'
 import PermissionSelector from '#/components/dashboard/PermissionSelector'
diff --git a/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts b/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts
index 760f22978726..cd85ba78a385 100644
--- a/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts
+++ b/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts
@@ -1,6 +1,6 @@
 /** @file Types and constants related to `Column`s. */
 import { BackendType, Plan, type User } from '@common/services/Backend'
-import type { TextId } from '@common/text'
+import type { TextId } from '../../../../../../common/src/text'
 
 import AccessedByProjectsIcon from '#/assets/accessed_by_projects.svg'
 import AccessedDataIcon from '#/assets/accessed_data.svg'
diff --git a/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts b/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts
index 109410ff1325..ffe912d7e34f 100644
--- a/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts
+++ b/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts
@@ -1,6 +1,6 @@
 /** @file Paywall configuration for different plans. */
 import { Plan } from '@common/services/Backend'
-import type { TextId } from '@common/text'
+import type { TextId } from '../../../../../common/src/text'
 
 /** Registered paywall features. */
 export const PAYWALL_FEATURES = {
diff --git a/app/gui/src/dashboard/hooks/toastAndLogHooks.ts b/app/gui/src/dashboard/hooks/toastAndLogHooks.ts
index 5d702db66028..284ab91752be 100644
--- a/app/gui/src/dashboard/hooks/toastAndLogHooks.ts
+++ b/app/gui/src/dashboard/hooks/toastAndLogHooks.ts
@@ -1,7 +1,7 @@
 /** @file */
 import { toast, type Id } from 'react-toastify'
 
-import type { Replacements, TextId } from '@common/text'
+import type { Replacements, TextId } from '../../../../common/src/text'
 
 import { useLogger } from '#/providers/LoggerProvider'
 import { useText } from '#/providers/TextProvider'
diff --git a/app/gui/src/dashboard/layouts/Settings/data.tsx b/app/gui/src/dashboard/layouts/Settings/data.tsx
index 276d33a705a8..021d762365bf 100644
--- a/app/gui/src/dashboard/layouts/Settings/data.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/data.tsx
@@ -12,9 +12,9 @@ import {
   type OrganizationInfo,
   type User,
 } from '@common/services/Backend'
-import type { TextId } from '@common/text'
 import { normalizePath } from '@common/utilities/data/fileInfo'
 import { pick, unsafeEntries } from '@common/utilities/data/object'
+import type { TextId } from '../../../../../common/src/text'
 
 import ComputerIcon from '#/assets/computer.svg'
 import CreditCardIcon from '#/assets/credit_card.svg'
diff --git a/app/gui/src/dashboard/layouts/TabBar.tsx b/app/gui/src/dashboard/layouts/TabBar.tsx
index 3e0a06b413f1..9db5c0b53a32 100644
--- a/app/gui/src/dashboard/layouts/TabBar.tsx
+++ b/app/gui/src/dashboard/layouts/TabBar.tsx
@@ -5,7 +5,7 @@ import { useQuery } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 
 import { ProjectState } from '@common/services/Backend'
-import type { TextId } from '@common/text'
+import type { TextId } from '../../../../common/src/text'
 
 import { AnimatedBackground } from '#/components/AnimatedBackground'
 import { Tab as AriaTab, TabList, type TabListProps } from '#/components/aria'
diff --git a/app/gui/src/dashboard/modals/AboutModal.tsx b/app/gui/src/dashboard/modals/AboutModal.tsx
index e4856e61a4c2..cf9b18818daa 100644
--- a/app/gui/src/dashboard/modals/AboutModal.tsx
+++ b/app/gui/src/dashboard/modals/AboutModal.tsx
@@ -1,7 +1,7 @@
 /** @file Modal for confirming delete of any type of asset. */
 import * as React from 'react'
 
-import type * as text from '@common/text'
+import type * as text from '../../../../common/src/text'
 
 import LogoIcon from '#/assets/enso_logo.svg'
 
diff --git a/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/Card.tsx b/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/Card.tsx
index 885c8f381129..f824d35a1ac7 100644
--- a/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/Card.tsx
+++ b/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/Card.tsx
@@ -5,7 +5,7 @@
  */
 import * as React from 'react'
 
-import type * as text from '@common/text'
+import type * as text from '../../../../../../../../common/src/text'
 
 import Check from '#/assets/check_mark.svg'
 
diff --git a/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx b/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
index 0c96e3104432..e43e4835fb44 100644
--- a/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
+++ b/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from 'react'
 import invariant from 'tiny-invariant'
 
 import { Plan } from '@common/services/Backend'
-import type { TextId } from '@common/text'
+import type { TextId } from '../../../../../../../common/src/text'
 
 import OpenInNewTabIcon from '#/assets/open.svg'
 import { Button } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/modules/payments/constants.ts b/app/gui/src/dashboard/modules/payments/constants.ts
index 5a4c28b2876f..978a5144fd6c 100644
--- a/app/gui/src/dashboard/modules/payments/constants.ts
+++ b/app/gui/src/dashboard/modules/payments/constants.ts
@@ -1,6 +1,6 @@
 /** @file Constants for the subscribe page. */
 import { Plan } from '@common/services/Backend'
-import type { TextId } from '@common/text'
+import type { TextId } from '../../../../../common/src/text'
 
 /* eslint-disable @typescript-eslint/no-magic-numbers, @typescript-eslint/naming-convention */
 
diff --git a/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx b/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx
index 06ad6fd000ed..13f4d35bdb7f 100644
--- a/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx
+++ b/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx
@@ -6,7 +6,7 @@ import { Navigate, useNavigate, useSearchParams } from 'react-router-dom'
 import invariant from 'tiny-invariant'
 
 import { Plan } from '@common/services/Backend'
-import type { TextId } from '@common/text'
+import type { TextId } from '../../../../../../common/src/text'
 
 import { DASHBOARD_PATH, LOGIN_PATH } from '#/appUtils'
 import ArrowRight from '#/assets/arrow_right.svg'
diff --git a/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx b/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx
index 1dcc6d534cac..7bc78e263d94 100644
--- a/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx
+++ b/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx
@@ -1,6 +1,6 @@
 /** @file The tab bar for the dashboard page. */
 import type { ProjectId } from '@common/services/Backend'
-import type { TextId } from '@common/text'
+import type { TextId } from '../../../../../common/src/text'
 
 import DriveIcon from '#/assets/drive.svg'
 import NetworkIcon from '#/assets/network.svg'
diff --git a/app/gui/src/dashboard/providers/TextProvider.tsx b/app/gui/src/dashboard/providers/TextProvider.tsx
index 73c603ae5c49..041896d3865a 100644
--- a/app/gui/src/dashboard/providers/TextProvider.tsx
+++ b/app/gui/src/dashboard/providers/TextProvider.tsx
@@ -11,8 +11,14 @@ import {
   type PropsWithChildren,
 } from 'react'
 
-import { Language, LANGUAGE_TO_LOCALE, TEXTS, type Replacements, type TextId } from '@common/text'
 import { unsafeMutable } from '@common/utilities/data/object'
+import {
+  Language,
+  LANGUAGE_TO_LOCALE,
+  TEXTS,
+  type Replacements,
+  type TextId,
+} from '../../../../common/src/text'
 
 /** State contained in a `TextContext`. */
 export interface TextContextType {
diff --git a/app/gui/src/dashboard/services/RemoteBackend.ts b/app/gui/src/dashboard/services/RemoteBackend.ts
index 1a177c727fd4..69e5a8f2eae4 100644
--- a/app/gui/src/dashboard/services/RemoteBackend.ts
+++ b/app/gui/src/dashboard/services/RemoteBackend.ts
@@ -87,10 +87,10 @@ import {
   type UserGroupInfo,
   type UserId,
 } from '@common/services/Backend'
-import type { Replacements, TextId } from '@common/text'
 import { merge, omit, type Mutable } from '@common/utilities/data/object'
 import { IS_DEV_MODE } from '@common/utilities/detect'
 import { download } from '@common/utilities/download'
+import type { Replacements, TextId } from '../../../../common/src/text'
 
 import type { Logger } from '#/providers/LoggerProvider'
 import type { GetText } from '#/providers/TextProvider'
diff --git a/app/ide-desktop/client/tests/electronTest.ts b/app/ide-desktop/client/tests/electronTest.ts
index 7711ed0238e4..b49e2d0f716c 100644
--- a/app/ide-desktop/client/tests/electronTest.ts
+++ b/app/ide-desktop/client/tests/electronTest.ts
@@ -1,7 +1,7 @@
 /** @file Commonly used functions for electron tests */
 
-import { TEXTS } from '@common/text'
 import { _electron, ElectronApplication, expect, type Page, test } from '@playwright/test'
+import { TEXTS } from 'enso-common/src/text'
 import * as random from 'lib0/random'
 import os from 'node:os'
 import pathModule from 'node:path'

From 2d1ee47fcb5560cadb5ba910c632e34c88e8e62c Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 19 Dec 2024 22:40:27 +1000
Subject: [PATCH 15/15] Fix errors

---
 app/common/package.json                              |  3 +++
 app/common/src/accessToken.ts                        |  4 ----
 app/common/src/appConfig.js                          |  8 --------
 app/common/src/buildUtils.js                         | 12 ------------
 app/common/src/index.d.ts                            |  4 ----
 app/common/src/index.js                              |  4 ----
 app/common/tsconfig.json                             |  2 +-
 app/gui/integration-test/dashboard/actions/index.ts  |  2 +-
 app/gui/src/dashboard/components/MenuEntry.tsx       |  2 +-
 .../Paywall/components/PaywallBulletPoints.tsx       |  2 +-
 .../components/dashboard/KeyboardShortcut.tsx        |  2 +-
 .../dashboard/components/dashboard/Permission.tsx    |  2 +-
 .../components/dashboard/column/columnUtils.ts       |  2 +-
 .../dashboard/hooks/billing/FeaturesConfiguration.ts |  2 +-
 app/gui/src/dashboard/hooks/toastAndLogHooks.ts      |  2 +-
 app/gui/src/dashboard/layouts/Settings/data.tsx      |  2 +-
 app/gui/src/dashboard/layouts/TabBar.tsx             |  2 +-
 app/gui/src/dashboard/modals/AboutModal.tsx          |  2 +-
 .../components/PlanSelector/components/Card.tsx      |  2 +-
 .../components/PlanSelector/getComponentForPlan.tsx  |  2 +-
 app/gui/src/dashboard/modules/payments/constants.ts  |  2 +-
 .../dashboard/pages/authentication/Setup/Setup.tsx   |  2 +-
 .../dashboard/pages/dashboard/DashboardTabBar.tsx    |  2 +-
 app/gui/src/dashboard/providers/TextProvider.tsx     |  8 +-------
 app/gui/src/dashboard/services/RemoteBackend.ts      |  2 +-
 app/gui/src/dashboard/test/setup.ts                  |  4 +---
 app/ide-desktop/client/tsconfig.json                 |  8 +-------
 pnpm-lock.yaml                                       |  4 ++++
 28 files changed, 28 insertions(+), 67 deletions(-)

diff --git a/app/common/package.json b/app/common/package.json
index 8b5698b396d2..8b53ad6822a2 100644
--- a/app/common/package.json
+++ b/app/common/package.json
@@ -19,5 +19,8 @@
   },
   "dependencies": {
     "lib0": "^0.2.85"
+  },
+  "devDependencies": {
+    "@types/node": "^22.9.0"
   }
 }
diff --git a/app/common/src/accessToken.ts b/app/common/src/accessToken.ts
index af670b372e54..0796e98e1b2e 100644
--- a/app/common/src/accessToken.ts
+++ b/app/common/src/accessToken.ts
@@ -1,9 +1,5 @@
 /** @file Types for IPC events sent between Electron's main process and its renderer process. */
 
-// ===================
-// === AccessToken ===
-// ===================
-
 /** Credentials to be saved to a credentials file. */
 export interface AccessToken {
   /** The user's JWT token. */
diff --git a/app/common/src/appConfig.js b/app/common/src/appConfig.js
index 1e414030d78b..99ce02f763e2 100644
--- a/app/common/src/appConfig.js
+++ b/app/common/src/appConfig.js
@@ -4,10 +4,6 @@ import * as path from 'node:path'
 import * as process from 'node:process'
 import * as url from 'node:url'
 
-// ===============================
-// === readEnvironmentFromFile ===
-// ===============================
-
 /** Read environment variables from a file based on the `ENSO_CLOUD_ENV_FILE_NAME`
  * environment variable. Reads from `.env` if the variable is `production`, blank or absent.
  * DOES NOT override existing environment variables if the variable is absent. */
@@ -74,10 +70,6 @@ function discardUndefinedEnv(name) {
   }
 }
 
-// ===============
-// === globals ===
-// ===============
-
 /** The value as JSON if it is not nullish, else `'undefined'`.
  * @param {unknown} value - the value to `JSON.stringify()`. */
 function stringify(value) {
diff --git a/app/common/src/buildUtils.js b/app/common/src/buildUtils.js
index 63c14522a257..80db98b9d516 100644
--- a/app/common/src/buildUtils.js
+++ b/app/common/src/buildUtils.js
@@ -3,17 +3,9 @@ import * as fs from 'node:fs'
 import * as path from 'node:path'
 import process from 'node:process'
 
-// =================
-// === Constants ===
-// =================
-
 /** Indent size for outputting JSON. */
 export const INDENT_SIZE = 4
 
-// ===================
-// === Environment ===
-// ===================
-
 /** Get the environment variable value.
  * @param {string} name - The name of the environment variable.
  * @returns {string} The value of the environment variable.
@@ -50,10 +42,6 @@ export function requireEnvPathExist(name) {
   }
 }
 
-// ======================
-// === String Helpers ===
-// ======================
-
 /** Get the common prefix of the two strings.
  * @param {string} a - the first string.
  * @param {string} b - the second string.
diff --git a/app/common/src/index.d.ts b/app/common/src/index.d.ts
index d6604aa3e4e8..80fce87e61d0 100644
--- a/app/common/src/index.d.ts
+++ b/app/common/src/index.d.ts
@@ -7,10 +7,6 @@
  * circular dependency in our packages.
  */
 
-// ========================
-// === Product metadata ===
-// ========================
-
 /**
  * URL protocol scheme for deep links to authentication flow pages, without the `:` suffix.
  *
diff --git a/app/common/src/index.js b/app/common/src/index.js
index 56afe00ca5f1..7ce12c0dd56b 100644
--- a/app/common/src/index.js
+++ b/app/common/src/index.js
@@ -5,10 +5,6 @@
  * here when it is not possible for a sibling package to own that code without introducing a
  * circular dependency in our packages. */
 
-// ========================
-// === Product metadata ===
-// ========================
-
 /** URL protocol scheme for deep links to authentication flow pages, without the `:` suffix.
  *
  * For example: the deep link URL
diff --git a/app/common/tsconfig.json b/app/common/tsconfig.json
index 182da76aa21b..48527760ac52 100644
--- a/app/common/tsconfig.json
+++ b/app/common/tsconfig.json
@@ -6,5 +6,5 @@
     "checkJs": true,
     "skipLibCheck": false
   },
-  "include": ["./src/", "../types/"]
+  "include": ["./src/"]
 }
diff --git a/app/gui/integration-test/dashboard/actions/index.ts b/app/gui/integration-test/dashboard/actions/index.ts
index bf528a06fec6..cda9f1a49627 100644
--- a/app/gui/integration-test/dashboard/actions/index.ts
+++ b/app/gui/integration-test/dashboard/actions/index.ts
@@ -3,7 +3,7 @@ import path from 'node:path'
 
 import { expect, test, type Page } from '@playwright/test'
 
-import { TEXTS } from '@common/text'
+import { TEXTS } from 'enso-common/src/text'
 
 import {
   INITIAL_CALLS_OBJECT,
diff --git a/app/gui/src/dashboard/components/MenuEntry.tsx b/app/gui/src/dashboard/components/MenuEntry.tsx
index 0b07d67158ab..9e3bcfa77ee3 100644
--- a/app/gui/src/dashboard/components/MenuEntry.tsx
+++ b/app/gui/src/dashboard/components/MenuEntry.tsx
@@ -1,8 +1,8 @@
 /** @file An entry in a menu. */
 import * as React from 'react'
 
+import type * as text from '@common/text'
 import * as detect from '@common/utilities/detect'
-import type * as text from '../../../../common/src/text'
 
 import BlankIcon from '#/assets/blank.svg'
 
diff --git a/app/gui/src/dashboard/components/Paywall/components/PaywallBulletPoints.tsx b/app/gui/src/dashboard/components/Paywall/components/PaywallBulletPoints.tsx
index 5c43fe220792..8c0cc7b70c93 100644
--- a/app/gui/src/dashboard/components/Paywall/components/PaywallBulletPoints.tsx
+++ b/app/gui/src/dashboard/components/Paywall/components/PaywallBulletPoints.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
 
 import * as tw from 'tailwind-merge'
 
-import type * as text from '../../../../../../common/src/text'
+import type * as text from '@common/text'
 
 import Check from '#/assets/check_mark.svg'
 
diff --git a/app/gui/src/dashboard/components/dashboard/KeyboardShortcut.tsx b/app/gui/src/dashboard/components/dashboard/KeyboardShortcut.tsx
index 5c8f5c4a0020..0e1d7fcb4a19 100644
--- a/app/gui/src/dashboard/components/dashboard/KeyboardShortcut.tsx
+++ b/app/gui/src/dashboard/components/dashboard/KeyboardShortcut.tsx
@@ -1,8 +1,8 @@
 /** @file A visual representation of a keyboard shortcut. */
 import * as React from 'react'
 
+import type * as text from '@common/text'
 import * as detect from '@common/utilities/detect'
-import type * as text from '../../../../../common/src/text'
 
 import CommandKeyIcon from '#/assets/command_key.svg'
 import CtrlKeyIcon from '#/assets/ctrl_key.svg'
diff --git a/app/gui/src/dashboard/components/dashboard/Permission.tsx b/app/gui/src/dashboard/components/dashboard/Permission.tsx
index 42137d15f745..fd6c6f827762 100644
--- a/app/gui/src/dashboard/components/dashboard/Permission.tsx
+++ b/app/gui/src/dashboard/components/dashboard/Permission.tsx
@@ -12,8 +12,8 @@ import {
   type Backend,
   type UserPermissionIdentifier,
 } from '@common/services/Backend'
+import type { TextId } from '@common/text'
 import { merge } from '@common/utilities/data/object'
-import type { TextId } from '../../../../../common/src/text'
 
 import { Text } from '#/components/AriaComponents'
 import PermissionSelector from '#/components/dashboard/PermissionSelector'
diff --git a/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts b/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts
index cd85ba78a385..760f22978726 100644
--- a/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts
+++ b/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts
@@ -1,6 +1,6 @@
 /** @file Types and constants related to `Column`s. */
 import { BackendType, Plan, type User } from '@common/services/Backend'
-import type { TextId } from '../../../../../../common/src/text'
+import type { TextId } from '@common/text'
 
 import AccessedByProjectsIcon from '#/assets/accessed_by_projects.svg'
 import AccessedDataIcon from '#/assets/accessed_data.svg'
diff --git a/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts b/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts
index ffe912d7e34f..109410ff1325 100644
--- a/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts
+++ b/app/gui/src/dashboard/hooks/billing/FeaturesConfiguration.ts
@@ -1,6 +1,6 @@
 /** @file Paywall configuration for different plans. */
 import { Plan } from '@common/services/Backend'
-import type { TextId } from '../../../../../common/src/text'
+import type { TextId } from '@common/text'
 
 /** Registered paywall features. */
 export const PAYWALL_FEATURES = {
diff --git a/app/gui/src/dashboard/hooks/toastAndLogHooks.ts b/app/gui/src/dashboard/hooks/toastAndLogHooks.ts
index 284ab91752be..5d702db66028 100644
--- a/app/gui/src/dashboard/hooks/toastAndLogHooks.ts
+++ b/app/gui/src/dashboard/hooks/toastAndLogHooks.ts
@@ -1,7 +1,7 @@
 /** @file */
 import { toast, type Id } from 'react-toastify'
 
-import type { Replacements, TextId } from '../../../../common/src/text'
+import type { Replacements, TextId } from '@common/text'
 
 import { useLogger } from '#/providers/LoggerProvider'
 import { useText } from '#/providers/TextProvider'
diff --git a/app/gui/src/dashboard/layouts/Settings/data.tsx b/app/gui/src/dashboard/layouts/Settings/data.tsx
index 021d762365bf..276d33a705a8 100644
--- a/app/gui/src/dashboard/layouts/Settings/data.tsx
+++ b/app/gui/src/dashboard/layouts/Settings/data.tsx
@@ -12,9 +12,9 @@ import {
   type OrganizationInfo,
   type User,
 } from '@common/services/Backend'
+import type { TextId } from '@common/text'
 import { normalizePath } from '@common/utilities/data/fileInfo'
 import { pick, unsafeEntries } from '@common/utilities/data/object'
-import type { TextId } from '../../../../../common/src/text'
 
 import ComputerIcon from '#/assets/computer.svg'
 import CreditCardIcon from '#/assets/credit_card.svg'
diff --git a/app/gui/src/dashboard/layouts/TabBar.tsx b/app/gui/src/dashboard/layouts/TabBar.tsx
index 9db5c0b53a32..3e0a06b413f1 100644
--- a/app/gui/src/dashboard/layouts/TabBar.tsx
+++ b/app/gui/src/dashboard/layouts/TabBar.tsx
@@ -5,7 +5,7 @@ import { useQuery } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
 
 import { ProjectState } from '@common/services/Backend'
-import type { TextId } from '../../../../common/src/text'
+import type { TextId } from '@common/text'
 
 import { AnimatedBackground } from '#/components/AnimatedBackground'
 import { Tab as AriaTab, TabList, type TabListProps } from '#/components/aria'
diff --git a/app/gui/src/dashboard/modals/AboutModal.tsx b/app/gui/src/dashboard/modals/AboutModal.tsx
index cf9b18818daa..e4856e61a4c2 100644
--- a/app/gui/src/dashboard/modals/AboutModal.tsx
+++ b/app/gui/src/dashboard/modals/AboutModal.tsx
@@ -1,7 +1,7 @@
 /** @file Modal for confirming delete of any type of asset. */
 import * as React from 'react'
 
-import type * as text from '../../../../common/src/text'
+import type * as text from '@common/text'
 
 import LogoIcon from '#/assets/enso_logo.svg'
 
diff --git a/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/Card.tsx b/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/Card.tsx
index f824d35a1ac7..885c8f381129 100644
--- a/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/Card.tsx
+++ b/app/gui/src/dashboard/modules/payments/components/PlanSelector/components/Card.tsx
@@ -5,7 +5,7 @@
  */
 import * as React from 'react'
 
-import type * as text from '../../../../../../../../common/src/text'
+import type * as text from '@common/text'
 
 import Check from '#/assets/check_mark.svg'
 
diff --git a/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx b/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
index e43e4835fb44..0c96e3104432 100644
--- a/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
+++ b/app/gui/src/dashboard/modules/payments/components/PlanSelector/getComponentForPlan.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from 'react'
 import invariant from 'tiny-invariant'
 
 import { Plan } from '@common/services/Backend'
-import type { TextId } from '../../../../../../../common/src/text'
+import type { TextId } from '@common/text'
 
 import OpenInNewTabIcon from '#/assets/open.svg'
 import { Button } from '#/components/AriaComponents'
diff --git a/app/gui/src/dashboard/modules/payments/constants.ts b/app/gui/src/dashboard/modules/payments/constants.ts
index 978a5144fd6c..5a4c28b2876f 100644
--- a/app/gui/src/dashboard/modules/payments/constants.ts
+++ b/app/gui/src/dashboard/modules/payments/constants.ts
@@ -1,6 +1,6 @@
 /** @file Constants for the subscribe page. */
 import { Plan } from '@common/services/Backend'
-import type { TextId } from '../../../../../common/src/text'
+import type { TextId } from '@common/text'
 
 /* eslint-disable @typescript-eslint/no-magic-numbers, @typescript-eslint/naming-convention */
 
diff --git a/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx b/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx
index 13f4d35bdb7f..06ad6fd000ed 100644
--- a/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx
+++ b/app/gui/src/dashboard/pages/authentication/Setup/Setup.tsx
@@ -6,7 +6,7 @@ import { Navigate, useNavigate, useSearchParams } from 'react-router-dom'
 import invariant from 'tiny-invariant'
 
 import { Plan } from '@common/services/Backend'
-import type { TextId } from '../../../../../../common/src/text'
+import type { TextId } from '@common/text'
 
 import { DASHBOARD_PATH, LOGIN_PATH } from '#/appUtils'
 import ArrowRight from '#/assets/arrow_right.svg'
diff --git a/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx b/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx
index 7bc78e263d94..1dcc6d534cac 100644
--- a/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx
+++ b/app/gui/src/dashboard/pages/dashboard/DashboardTabBar.tsx
@@ -1,6 +1,6 @@
 /** @file The tab bar for the dashboard page. */
 import type { ProjectId } from '@common/services/Backend'
-import type { TextId } from '../../../../../common/src/text'
+import type { TextId } from '@common/text'
 
 import DriveIcon from '#/assets/drive.svg'
 import NetworkIcon from '#/assets/network.svg'
diff --git a/app/gui/src/dashboard/providers/TextProvider.tsx b/app/gui/src/dashboard/providers/TextProvider.tsx
index 041896d3865a..73c603ae5c49 100644
--- a/app/gui/src/dashboard/providers/TextProvider.tsx
+++ b/app/gui/src/dashboard/providers/TextProvider.tsx
@@ -11,14 +11,8 @@ import {
   type PropsWithChildren,
 } from 'react'
 
+import { Language, LANGUAGE_TO_LOCALE, TEXTS, type Replacements, type TextId } from '@common/text'
 import { unsafeMutable } from '@common/utilities/data/object'
-import {
-  Language,
-  LANGUAGE_TO_LOCALE,
-  TEXTS,
-  type Replacements,
-  type TextId,
-} from '../../../../common/src/text'
 
 /** State contained in a `TextContext`. */
 export interface TextContextType {
diff --git a/app/gui/src/dashboard/services/RemoteBackend.ts b/app/gui/src/dashboard/services/RemoteBackend.ts
index 69e5a8f2eae4..1a177c727fd4 100644
--- a/app/gui/src/dashboard/services/RemoteBackend.ts
+++ b/app/gui/src/dashboard/services/RemoteBackend.ts
@@ -87,10 +87,10 @@ import {
   type UserGroupInfo,
   type UserId,
 } from '@common/services/Backend'
+import type { Replacements, TextId } from '@common/text'
 import { merge, omit, type Mutable } from '@common/utilities/data/object'
 import { IS_DEV_MODE } from '@common/utilities/detect'
 import { download } from '@common/utilities/download'
-import type { Replacements, TextId } from '../../../../common/src/text'
 
 import type { Logger } from '#/providers/LoggerProvider'
 import type { GetText } from '#/providers/TextProvider'
diff --git a/app/gui/src/dashboard/test/setup.ts b/app/gui/src/dashboard/test/setup.ts
index 9229c9c4a959..8930edc39d63 100644
--- a/app/gui/src/dashboard/test/setup.ts
+++ b/app/gui/src/dashboard/test/setup.ts
@@ -1,6 +1,4 @@
-/**
- * @file Global setup for dashboard tests.
- */
+/** @file Global setup for dashboard tests. */
 
 import * as matchers from '@testing-library/jest-dom/matchers'
 import { cleanup } from '@testing-library/react'
diff --git a/app/ide-desktop/client/tsconfig.json b/app/ide-desktop/client/tsconfig.json
index 167f68278135..b817c29b4f47 100644
--- a/app/ide-desktop/client/tsconfig.json
+++ b/app/ide-desktop/client/tsconfig.json
@@ -4,11 +4,5 @@
     "esModuleInterop": true,
     "paths": { "@/*": ["./src/*"] }
   },
-  "include": [
-    ".",
-    "../content",
-    "../types",
-    "../../build.json",
-    "src/config.json"
-  ]
+  "include": [".", "../../build.json", "src/config.json"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee015ad89849..43cb27fb91ad 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -79,6 +79,10 @@ importers:
       lib0:
         specifier: ^0.2.85
         version: 0.2.94
+    devDependencies:
+      '@types/node':
+        specifier: ^22.9.0
+        version: 22.9.0
 
   app/gui:
     dependencies: