From 1158134f73707f4b4a356aefdd846bf7a50c3c5d Mon Sep 17 00:00:00 2001
From: Shelley Vohr <shelley.vohr@gmail.com>
Date: Mon, 16 Feb 2026 10:26:04 +0100
Subject: [PATCH 1/2] feat: rework local builds

---
 src/less/components/commands.less             |   4 +-
 src/less/components/settings-electron.less    |  42 ++++++
 .../components/dialog-add-version.tsx         |  78 ++++++-----
 src/renderer/components/settings-electron.tsx |  78 +++++++++--
 src/renderer/components/version-select.tsx    | 132 +++++++++++++++---
 src/renderer/runner.ts                        |   2 +
 src/renderer/state.ts                         |  15 +-
 src/renderer/utils/sort-versions.ts           |  14 +-
 8 files changed, 288 insertions(+), 77 deletions(-)

diff --git a/src/less/components/commands.less b/src/less/components/commands.less
index 9f2b576fa5..68f220a072 100644
--- a/src/less/components/commands.less
+++ b/src/less/components/commands.less
@@ -8,12 +8,12 @@ header {
   background-color: @background-3;
   -webkit-app-region: drag;
 
-  #version-chooser .bp3-button-text::before {
+  #version-chooser:not([data-local]) .bp3-button-text::before {
     content: 'Electron v';
   }
 
   @media (max-width: 980px) {
-    #version-chooser .bp3-button-text::before {
+    #version-chooser:not([data-local]) .bp3-button-text::before {
       content: 'v';
     }
   }
diff --git a/src/less/components/settings-electron.less b/src/less/components/settings-electron.less
index 46fcc6dcf4..d2c11d1798 100644
--- a/src/less/components/settings-electron.less
+++ b/src/less/components/settings-electron.less
@@ -11,6 +11,33 @@
     overflow: hidden;
     background-color: @background-1;
 
+    .electron-versions-section-header {
+      padding: 8px 15px;
+      font-size: 11px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: @text-color-2;
+      background-color: @background-2;
+      border-bottom: 1px solid @border-color-1;
+      border-top: 1px solid @border-color-1;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      &:first-child {
+        border-top: none;
+      }
+
+      &.local {
+        border-left: 3px solid @green4;
+      }
+
+      &.remote {
+        border-left: 3px solid @blue4;
+      }
+    }
+
     .electron-versions-header {
       display: flex;
       font-weight: 600;
@@ -62,6 +89,14 @@
           background-color: rgba(92, 112, 128, 0.15);
         }
 
+        &.local {
+          border-left: 3px solid @green4;
+        }
+
+        &.remote {
+          border-left: 3px solid @blue4;
+        }
+
         .version-col {
           flex: 1;
           padding: 0 15px;
@@ -103,6 +138,13 @@
         color: @foreground-1;
       }
 
+      .electron-versions-section-header {
+        background-color: rgba(255, 255, 255, 0.06);
+        border-bottom-color: @dark-gray4;
+        border-top-color: @dark-gray4;
+        color: rgba(255, 255, 255, 0.7);
+      }
+
       .electron-versions-header {
         background-color: @dark-gray5;
         border-bottom-color: @dark-gray4;
diff --git a/src/renderer/components/dialog-add-version.tsx b/src/renderer/components/dialog-add-version.tsx
index 120b9d7be1..e8ed8aad72 100644
--- a/src/renderer/components/dialog-add-version.tsx
+++ b/src/renderer/components/dialog-add-version.tsx
@@ -9,7 +9,6 @@ import {
   Intent,
 } from '@blueprintjs/core';
 import { observer } from 'mobx-react';
-import * as semver from 'semver';
 
 import { Version } from '../../interfaces';
 import { AppState } from '../state';
@@ -22,11 +21,20 @@ interface AddVersionDialogProps {
 
 interface AddVersionDialogState {
   isValidElectron: boolean;
-  isValidVersion: boolean;
+  isValidName: boolean;
   existingLocalVersion?: Version;
   folderPath?: string;
   localName?: string;
-  version: string;
+  name: string;
+}
+
+/**
+ * Generate a unique version key for a local build.
+ * Uses a format that is valid semver but can never conflict
+ * with a real Electron release.
+ */
+function generateLocalVersionKey(): string {
+  return `0.0.0-local.${Date.now()}`;
 }
 
 /**
@@ -41,14 +49,14 @@ export const AddVersionDialog = observer(
       super(props);
 
       this.state = {
-        isValidVersion: false,
+        isValidName: false,
         isValidElectron: false,
-        version: '',
+        name: '',
       };
 
       this.onSubmit = this.onSubmit.bind(this);
       this.onClose = this.onClose.bind(this);
-      this.onChangeVersion = this.onChangeVersion.bind(this);
+      this.onChangeName = this.onChangeName.bind(this);
     }
 
     /**
@@ -65,20 +73,23 @@ export const AddVersionDialog = observer(
           folderPath,
           isValidElectron,
           localName,
+          // Pre-fill name from detected binary name if available
+          name: localName || '',
+          isValidName: !!localName,
         });
       }
     }
 
     /**
-     * Handles a change of the file input
+     * Handles a change of the name input
      */
-    public onChangeVersion(event: React.ChangeEvent<HTMLInputElement>) {
-      const version = event.target.value || '';
-      const isValidVersion = !!semver.valid(version);
+    public onChangeName(event: React.ChangeEvent<HTMLInputElement>) {
+      const name = event.target.value || '';
+      const isValidName = name.trim().length > 0;
 
       this.setState({
-        version,
-        isValidVersion,
+        name,
+        isValidName,
       });
     }
 
@@ -86,27 +97,21 @@ export const AddVersionDialog = observer(
      * Handles the submission of the dialog
      */
     public async onSubmit(): Promise<void> {
-      const {
-        folderPath,
-        version,
-        isValidElectron,
-        existingLocalVersion,
-        localName,
-      } = this.state;
+      const { folderPath, name, isValidElectron, existingLocalVersion } =
+        this.state;
 
       if (!folderPath) return;
 
-      const toAdd: Version = {
-        localPath: folderPath,
-        version,
-        name: localName,
-      };
-
       // swap to old local electron version if the user adds a new one with the same path
       if (isValidElectron && existingLocalVersion?.localPath) {
         // set previous version as active version
         this.props.appState.setVersion(existingLocalVersion.version);
       } else {
+        const toAdd: Version = {
+          localPath: folderPath,
+          version: generateLocalVersionKey(),
+          name: name.trim(),
+        };
         this.props.appState.addLocalVersion(toAdd);
       }
       this.onClose();
@@ -121,9 +126,8 @@ export const AddVersionDialog = observer(
     }
 
     get buttons() {
-      const { isValidElectron, isValidVersion, existingLocalVersion } =
-        this.state;
-      const canAdd = isValidElectron && isValidVersion && !existingLocalVersion;
+      const { isValidElectron, isValidName, existingLocalVersion } = this.state;
+      const canAdd = isValidElectron && isValidName && !existingLocalVersion;
       const canSwitch = isValidElectron && existingLocalVersion;
 
       return [
@@ -209,20 +213,20 @@ export const AddVersionDialog = observer(
     }
 
     private renderVersionInput(): JSX.Element | null {
-      const { isValidElectron, isValidVersion, version } = this.state;
+      const { isValidElectron, isValidName, name } = this.state;
       if (!isValidElectron) return null;
 
       return (
         <>
           <p>
-            Please specify a version, used for typings and the name. Must be{' '}
-            <code>semver</code> compliant.
+            Give this local build a name so you can identify it in the version
+            list.
           </p>
           <InputGroup
-            intent={isValidVersion ? undefined : Intent.DANGER}
-            value={version}
-            onChange={this.onChangeVersion}
-            placeholder="4.0.0"
+            intent={isValidName ? undefined : Intent.DANGER}
+            value={name}
+            onChange={this.onChangeName}
+            placeholder="e.g. My Debug Build"
           />
         </>
       );
@@ -234,8 +238,8 @@ export const AddVersionDialog = observer(
     private reset(): void {
       this.setState({
         isValidElectron: false,
-        isValidVersion: false,
-        version: '',
+        isValidName: false,
+        name: '',
         folderPath: undefined,
         localName: undefined,
       });
diff --git a/src/renderer/components/settings-electron.tsx b/src/renderer/components/settings-electron.tsx
index 87fa84f1c6..782eb25f2c 100644
--- a/src/renderer/components/settings-electron.tsx
+++ b/src/renderer/components/settings-electron.tsx
@@ -119,7 +119,7 @@ const ElectronVersionRow = observer(({ index, style, data }: RowProps) => {
           />
         </Tooltip2>
       );
-    } else if (disableDownload(version)) {
+    } else if (!isLocal && disableDownload(version)) {
       return (
         <Tooltip2
           position="auto"
@@ -139,12 +139,16 @@ const ElectronVersionRow = observer(({ index, style, data }: RowProps) => {
     return <Button {...buttonProps} type={undefined} />;
   };
 
+  const isLocal = item.source === VersionSource.local;
+
   return (
     <div
-      className={`electron-version-row ${index % 2 === 0 ? 'even' : 'odd'}`}
+      className={`electron-version-row ${index % 2 === 0 ? 'even' : 'odd'} ${isLocal ? 'local' : 'remote'}`}
       style={style}
     >
-      <div className="version-col">{item.version}</div>
+      <div className="version-col">
+        {isLocal ? item.name || 'Local Build' : item.version}
+      </div>
       <div className="status-col">{renderHumanState(item)}</div>
       <div className="action-col">{renderAction(item)}</div>
     </div>
@@ -277,9 +281,18 @@ export const ElectronSettings = observer(
       if (!filterQuery) return versionsToShow;
 
       const query = filterQuery.toLowerCase();
-      return versionsToShow.filter((ver) =>
-        ver.version.toLowerCase().includes(query),
-      );
+      return versionsToShow.filter((ver) => {
+        // Search by version string
+        if (ver.version.toLowerCase().includes(query)) return true;
+        // Also search by name for local builds
+        if (
+          ver.source === VersionSource.local &&
+          ver.name &&
+          ver.name.toLowerCase().includes(query)
+        )
+          return true;
+        return false;
+      });
     }
 
     public render() {
@@ -449,31 +462,68 @@ export const ElectronSettings = observer(
     }
 
     /**
-     * Renders the table with Electron versions.
+     * Renders the table with Electron versions, separating local builds
+     * from remote releases.
      */
     private renderVersionsTable(): JSX.Element {
       const versions = this.filteredVersions;
-      const itemData = {
-        versions,
-        appState: this.props.appState,
-      };
+      const localVersions = versions.filter(
+        (v) => v.source === VersionSource.local,
+      );
+      const remoteVersions = versions.filter(
+        (v) => v.source !== VersionSource.local,
+      );
+      const { appState } = this.props;
 
       return (
         <div className="electron-versions-table">
+          {localVersions.length > 0 && (
+            <>
+              <div className="electron-versions-section-header local">
+                <Icon icon="desktop" iconSize={12} />
+                <span>Local Builds</span>
+              </div>
+              <div className="electron-versions-header">
+                <div className="version-col">Name</div>
+                <div className="status-col">Status</div>
+                <div className="action-col">Action</div>
+              </div>
+              <List
+                height={Math.min(localVersions.length * 40, 160)}
+                itemCount={localVersions.length}
+                itemSize={40}
+                width="100%"
+                itemData={{
+                  versions: localVersions,
+                  appState,
+                }}
+                className="electron-versions-list"
+              >
+                {ElectronVersionRow}
+              </List>
+            </>
+          )}
+          <div className="electron-versions-section-header remote">
+            <Icon icon="cloud" iconSize={12} />
+            <span>Releases</span>
+          </div>
           <div className="electron-versions-header">
             <div className="version-col">Version</div>
             <div className="status-col">Status</div>
             <div className="action-col">Action</div>
           </div>
-          {versions.length === 0 ? (
+          {remoteVersions.length === 0 ? (
             <div className="no-versions">No versions match your filter</div>
           ) : (
             <List
               height={400}
-              itemCount={versions.length}
+              itemCount={remoteVersions.length}
               itemSize={40}
               width="100%"
-              itemData={itemData}
+              itemData={{
+                versions: remoteVersions,
+                appState,
+              }}
               className="electron-versions-list"
             >
               {ElectronVersionRow}
diff --git a/src/renderer/components/version-select.tsx b/src/renderer/components/version-select.tsx
index 5ae03a3e62..4f65ec9c43 100644
--- a/src/renderer/components/version-select.tsx
+++ b/src/renderer/components/version-select.tsx
@@ -25,15 +25,89 @@ import { AppState } from '../state';
 import { disableDownload } from '../utils/disable-download';
 import { highlightText } from '../utils/highlight-text';
 
+/**
+ * Returns the display text for a version item.
+ * For local builds, shows the custom name; for remote, shows the version string.
+ */
+export function getItemDisplayText(item: RunnableVersion): string {
+  if (item.source === VersionSource.local) {
+    return item.name || 'Local Build';
+  }
+  return item.version;
+}
+
 const ElectronVersionSelect = Select.ofType<RunnableVersion>();
 
+/**
+ * Represents either a real version item or a section header in the list.
+ */
+type ListEntry =
+  | { type: 'header'; label: string }
+  | { type: 'item'; item: RunnableVersion; originalIndex: number };
+
+const HEADER_HEIGHT = 28;
+const ITEM_HEIGHT = 30;
+
 const FixedSizeListItem = ({ index, data, style }: ListChildComponentProps) => {
-  const { filteredItems, renderItem } = data;
-  const renderedItem = renderItem(filteredItems[index], index);
+  const { entries, renderItem } = data;
+  const entry: ListEntry = entries[index];
+
+  if (entry.type === 'header') {
+    return (
+      <div
+        style={{
+          ...style,
+          padding: '4px 8px',
+          fontSize: '11px',
+          fontWeight: 600,
+          textTransform: 'uppercase',
+          color: 'var(--text-muted, #999)',
+          letterSpacing: '0.5px',
+          borderBottom: '1px solid var(--divider, #333)',
+          display: 'flex',
+          alignItems: 'center',
+          pointerEvents: 'none',
+        }}
+      >
+        {entry.label}
+      </div>
+    );
+  }
 
+  const renderedItem = renderItem(entry.item, entry.originalIndex);
   return <div style={style}>{renderedItem}</div>;
 };
 
+/**
+ * Builds a list of entries with section headers separating local and remote versions.
+ */
+function buildListEntries(filteredItems: RunnableVersion[]): ListEntry[] {
+  const locals = filteredItems.filter((v) => v.source === VersionSource.local);
+  const remotes = filteredItems.filter((v) => v.source !== VersionSource.local);
+
+  const entries: ListEntry[] = [];
+
+  if (locals.length > 0) {
+    entries.push({ type: 'header', label: 'Local Builds' });
+    locals.forEach((item, i) =>
+      entries.push({ type: 'item', item, originalIndex: i }),
+    );
+  }
+
+  if (remotes.length > 0) {
+    entries.push({ type: 'header', label: 'Releases' });
+    remotes.forEach((item, i) =>
+      entries.push({
+        type: 'item',
+        item,
+        originalIndex: locals.length + i,
+      }),
+    );
+  }
+
+  return entries;
+}
+
 const itemListRenderer: ItemListRenderer<RunnableVersion> = ({
   filteredItems,
   renderItem,
@@ -44,14 +118,16 @@ const itemListRenderer: ItemListRenderer<RunnableVersion> = ({
   });
   InnerElement.displayName = 'Menu';
 
+  const entries = buildListEntries(filteredItems);
+
   return (
     <FixedSizeList
       innerElementType={InnerElement}
       height={300}
       width={400}
-      itemCount={filteredItems.length}
-      itemSize={30}
-      itemData={{ renderItem, filteredItems }}
+      itemCount={entries.length}
+      itemSize={ITEM_HEIGHT}
+      itemData={{ renderItem, entries }}
     >
       {FixedSizeListItem}
     </FixedSizeList>
@@ -62,10 +138,10 @@ const itemListRenderer: ItemListRenderer<RunnableVersion> = ({
  * Helper method: Returns the <Select /> label for an Electron
  * version.
  */
-export function getItemLabel({ source, state, name }: RunnableVersion): string {
-  // If a version is local, either it's there or it's not.
+export function getItemLabel({ source, state }: RunnableVersion): string {
+  // If a version is local, show its availability state.
   if (source === VersionSource.local) {
-    return state === InstallState.missing ? 'Unavailable' : name || 'Local';
+    return state === InstallState.missing ? 'Unavailable' : 'Local Build';
   }
 
   const installStateLabels: Record<InstallState, string> = {
@@ -120,14 +196,28 @@ export const filterItems: ItemListPredicate<RunnableVersion> = (
   return versions
     .map((version: RunnableVersion) => {
       const lowercase = version.version.toLowerCase();
+      // For local versions, also search by name
+      const nameMatch =
+        version.source === VersionSource.local && version.name
+          ? version.name.toLowerCase().indexOf(q)
+          : -1;
+      const versionIndex = lowercase.indexOf(q);
+      // Use best match (name or version string)
+      const index = nameMatch !== -1 ? nameMatch : versionIndex;
       return {
-        index: lowercase.indexOf(q),
+        index,
         coerced: semver.coerce(lowercase),
         version,
       };
     })
     .filter((item) => item.index !== -1)
     .sort((a, b) => {
+      // Local versions always sort first
+      const aLocal = a.version.source === VersionSource.local;
+      const bLocal = b.version.source === VersionSource.local;
+      if (aLocal && !bLocal) return -1;
+      if (!aLocal && bLocal) return 1;
+
       // If the user is searching for e.g. 'nightly' we
       // want to sort nightlies by descending major version.
       if (isNaN(+q)) {
@@ -176,7 +266,9 @@ export const renderItem: ItemRenderer<RunnableVersion> = (
     return null;
   }
 
-  if (disableDownload(item.version)) {
+  const displayText = getItemDisplayText(item);
+
+  if (disableDownload(item.version) && item.source !== VersionSource.local) {
     return (
       <Tooltip2
         className="disabled-menu-tooltip"
@@ -193,7 +285,7 @@ export const renderItem: ItemRenderer<RunnableVersion> = (
           active={modifiers.active}
           data-testid="disabled-menu-item"
           disabled={true}
-          text={highlightText(item.version, query)}
+          text={highlightText(displayText, query)}
           key={item.version}
           label={getItemLabel(item)}
           icon={getItemIcon(item)}
@@ -206,7 +298,7 @@ export const renderItem: ItemRenderer<RunnableVersion> = (
     <MenuItem
       active={modifiers.active}
       disabled={modifiers.disabled}
-      text={highlightText(item.version, query)}
+      text={highlightText(displayText, query)}
       key={item.version}
       onClick={handleClick}
       label={getItemLabel(item)}
@@ -243,6 +335,9 @@ export const VersionSelect = observer(
       const { currentVersion, itemDisabled } = this.props;
       const { version } = currentVersion;
 
+      const buttonText = getItemDisplayText(currentVersion);
+      const isLocal = currentVersion.source === VersionSource.local;
+
       return (
         <ElectronVersionSelect
           filterable={true}
@@ -257,11 +352,16 @@ export const VersionSelect = observer(
         >
           <Button
             id="version-chooser"
-            text={version}
+            text={buttonText}
             icon={getItemIcon(currentVersion)}
-            onContextMenu={(e: React.MouseEvent<HTMLButtonElement>) => {
-              renderVersionContextMenu(e, version);
-            }}
+            data-local={isLocal ? 'true' : undefined}
+            onContextMenu={
+              isLocal
+                ? undefined
+                : (e: React.MouseEvent<HTMLButtonElement>) => {
+                    renderVersionContextMenu(e, version);
+                  }
+            }
             disabled={!!this.props.disabled}
           />
         </ElectronVersionSelect>
diff --git a/src/renderer/runner.ts b/src/renderer/runner.ts
index 684e181be9..1060974ad4 100644
--- a/src/renderer/runner.ts
+++ b/src/renderer/runner.ts
@@ -12,6 +12,7 @@ import {
   PackageJsonOptions,
   RunResult,
   RunnableVersion,
+  VersionSource,
 } from '../interfaces';
 
 export enum ForgeCommands {
@@ -161,6 +162,7 @@ export class Runner {
     }
 
     if (
+      ver.source !== VersionSource.local &&
       semver.lt(ver.version, '28.0.0') &&
       !ver.version.startsWith('28.0.0-nightly')
     ) {
diff --git a/src/renderer/state.ts b/src/renderer/state.ts
index 48d192c1ab..cfba2d5843 100644
--- a/src/renderer/state.ts
+++ b/src/renderer/state.ts
@@ -592,7 +592,8 @@ export class AppState {
 
   /**
    * Returns an array of Electron versions to show given the
-   * current settings for states and channels to display
+   * current settings for states and channels to display.
+   * Local builds are always shown and listed before remote versions.
    */
   get versionsToShow(): Array<RunnableVersion> {
     const {
@@ -603,8 +604,14 @@ export class AppState {
     } = this;
     const oldest = window.ElectronFiddle.getOldestSupportedMajor();
 
-    const filter = (ver: RunnableVersion) =>
+    const allVersions = Object.values(versions);
+    const localVersions = allVersions.filter(
+      (ver) => ver && ver.source === VersionSource.local,
+    );
+
+    const remoteFilter = (ver: RunnableVersion) =>
       ver &&
+      ver.source !== VersionSource.local &&
       (showUndownloadedVersions ||
         ver.state === InstallState.installing ||
         ver.state === InstallState.installed ||
@@ -614,7 +621,9 @@ export class AppState {
         oldest <= Number.parseInt(ver.version)) &&
       channelsToShow.includes(getReleaseChannel(ver));
 
-    return sortVersions(Object.values(versions).filter(filter));
+    const remoteVersions = sortVersions(allVersions.filter(remoteFilter));
+
+    return [...localVersions, ...remoteVersions];
   }
 
   /**
diff --git a/src/renderer/utils/sort-versions.ts b/src/renderer/utils/sort-versions.ts
index dffb8dd697..15975e6b12 100644
--- a/src/renderer/utils/sort-versions.ts
+++ b/src/renderer/utils/sort-versions.ts
@@ -59,7 +59,9 @@ export function semverCompare(
 }
 
 /**
- * Inplace sorting of Versions
+ * Inplace sorting of Versions.
+ * Handles non-semver version strings (e.g. local builds) gracefully
+ * by sorting them to the end.
  */
 export function sortVersions(versions: RunnableVersion[]): RunnableVersion[] {
   type VerSemRun = [
@@ -70,10 +72,12 @@ export function sortVersions(versions: RunnableVersion[]): RunnableVersion[] {
 
   const sorted = versions
     .map((run): VerSemRun => [run.version, semver.parse(run.version), run])
-    .sort(
-      ([vera, sema], [verb, semb]) =>
-        -semverCompare(sema || vera, semb || verb),
-    );
+    .sort(([vera, sema], [verb, semb]) => {
+      if (sema && semb) return -semverCompare(sema, semb);
+      if (sema && !semb) return -1;
+      if (!sema && semb) return 1;
+      return vera.localeCompare(verb);
+    });
   sorted.forEach(([_1, _2, run], idx) => (versions[idx] = run));
   return versions;
 }

From e6a8132f264ef840113e35e82559fd4b2976396d Mon Sep 17 00:00:00 2001
From: Shelley Vohr <shelley.vohr@gmail.com>
Date: Mon, 16 Feb 2026 10:36:49 +0100
Subject: [PATCH 2/2] test: add and update tests

---
 rtl-spec/components/version-select.spec.tsx   | 84 +++++++++++++++-
 src/renderer/utils/sort-versions.ts           |  2 -
 .../dialog-add-version-spec.tsx.snap          | 18 +---
 .../settings-electron-spec.tsx.snap           | 99 +++++++++++++++++--
 .../components/dialog-add-version-spec.tsx    | 54 ++++++----
 .../components/settings-electron-spec.tsx     | 16 +--
 tests/renderer/state-spec.ts                  | 32 ++++++
 tests/renderer/utils/sort-versions-spec.ts    | 24 +++++
 8 files changed, 278 insertions(+), 51 deletions(-)

diff --git a/rtl-spec/components/version-select.spec.tsx b/rtl-spec/components/version-select.spec.tsx
index 85875e4b32..64755b9cd6 100644
--- a/rtl-spec/components/version-select.spec.tsx
+++ b/rtl-spec/components/version-select.spec.tsx
@@ -12,6 +12,7 @@ import {
 import {
   VersionSelect,
   filterItems,
+  getItemDisplayText,
   getItemIcon,
   getItemLabel,
   renderItem,
@@ -78,11 +79,54 @@ describe('VersionSelect component', () => {
 
       const { queryAllByTestId } = render(item);
 
+      expect(queryAllByTestId('disabled-menu-item')).toHaveLength(0);
+    });
+    it('does not disable local versions even when disableDownload returns true', () => {
+      vi.mocked(disableDownload).mockReturnValueOnce(true);
+
+      const localVersion: RunnableVersion = {
+        ...mockVersion1,
+        source: local,
+        state: installed,
+        name: 'My Build',
+      };
+
+      const item = renderItem(localVersion, {
+        handleClick: () => ({}),
+        index: 0,
+        modifiers: { active: true, disabled: false, matchesPredicate: true },
+        query: '',
+      })!;
+
+      const { queryAllByTestId } = render(item);
+
       expect(queryAllByTestId('disabled-menu-item')).toHaveLength(0);
     });
   });
 
-  describe('getItemLabel()', () => {
+  describe('getItemDisplayText()', () => {
+    it('returns name for local versions', () => {
+      const input: RunnableVersion = {
+        ...mockVersion1,
+        source: local,
+        state: installed,
+        name: 'My Debug Build',
+      };
+      expect(getItemDisplayText(input)).toBe('My Debug Build');
+    });
+
+    it('returns "Local Build" for local versions without a name', () => {
+      const input: RunnableVersion = {
+        ...mockVersion1,
+        source: local,
+        state: installed,
+      };
+      expect(getItemDisplayText(input)).toBe('Local Build');
+    });
+
+    it('returns version string for remote versions', () => {
+      expect(getItemDisplayText(mockVersion1)).toBe(mockVersion1.version);
+    });
     it('returns the correct label for an available local version', () => {
       const input: RunnableVersion = {
         ...mockVersion1,
@@ -90,8 +134,7 @@ describe('VersionSelect component', () => {
         source: local,
       };
 
-      expect(getItemLabel(input)).toBe('Local');
-      expect(getItemLabel({ ...input, name: 'Hi' })).toBe('Hi');
+      expect(getItemLabel(input)).toBe('Local Build');
     });
 
     it('returns the correct label for an unavailable local version', () => {
@@ -167,6 +210,41 @@ describe('VersionSelect component', () => {
       expect(filterItems('3', versions)).toEqual(expected);
     });
 
+    it('sorts local versions before remote versions', () => {
+      const localVer = {
+        version: '0.0.0-local.123',
+        source: local,
+        name: 'My Build',
+      } as RunnableVersion;
+
+      const versions = [
+        { version: '14.3.0' },
+        localVer,
+        { version: '3.0.0' },
+      ] as RunnableVersion[];
+
+      const result = filterItems('build', versions);
+      // Only the local version matches 'build' (via name)
+      expect(result).toEqual([localVer]);
+    });
+
+    it('matches local versions by name', () => {
+      const localVer = {
+        version: '0.0.0-local.123',
+        source: local,
+        name: 'My Debug Build',
+      } as RunnableVersion;
+
+      const versions = [
+        { version: '14.3.0' },
+        localVer,
+        { version: '3.0.0' },
+      ] as RunnableVersion[];
+
+      const result = filterItems('debug', versions);
+      expect(result).toEqual([localVer]);
+    });
+
     it('sorts in descending order when the query is non-numeric', () => {
       const versions = [
         { version: '3.0.0' },
diff --git a/src/renderer/utils/sort-versions.ts b/src/renderer/utils/sort-versions.ts
index 15975e6b12..ad980d9cec 100644
--- a/src/renderer/utils/sort-versions.ts
+++ b/src/renderer/utils/sort-versions.ts
@@ -45,13 +45,11 @@ export function semverCompare(
     a !== null && b !== null && a.compareMain(b) === 0;
 
   // Check that major.minor.patch are the same for a and b.
-  if (a === 'v3.0.0' || b === 'v2.0.0') throw new Error('hey');
   if (
     sameMain(pA, pB) &&
     pA?.prerelease.length !== 0 &&
     pB?.prerelease.length !== 0
   ) {
-    if (a === 'v3.0.0' || b === 'v3.0.0') throw new Error('hey');
     return preCompare(pA?.prerelease as string[], pB?.prerelease as string[]);
   }
 
diff --git a/tests/renderer/components/__snapshots__/dialog-add-version-spec.tsx.snap b/tests/renderer/components/__snapshots__/dialog-add-version-spec.tsx.snap
index 21624556a1..51f0047c2e 100644
--- a/tests/renderer/components/__snapshots__/dialog-add-version-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/dialog-add-version-spec.tsx.snap
@@ -75,16 +75,11 @@ exports[`AddVersionDialog component > renders 1`] = `
     <Blueprint3.Callout>
       We found an Electron.app in this folder.
       <p>
-        Please specify a version, used for typings and the name. Must be
-         
-        <code>
-          semver
-        </code>
-         compliant.
+        Give this local build a name so you can identify it in the version list.
       </p>
       <Blueprint3.InputGroup
         onChange={[Function]}
-        placeholder="4.0.0"
+        placeholder="e.g. My Debug Build"
         value=""
       />
     </Blueprint3.Callout>
@@ -138,17 +133,12 @@ exports[`AddVersionDialog component > renders 2`] = `
     <Blueprint3.Callout>
       We found an Electron.app in this folder.
       <p>
-        Please specify a version, used for typings and the name. Must be
-         
-        <code>
-          semver
-        </code>
-         compliant.
+        Give this local build a name so you can identify it in the version list.
       </p>
       <Blueprint3.InputGroup
         intent="danger"
         onChange={[Function]}
-        placeholder="4.0.0"
+        placeholder="e.g. My Debug Build"
         value=""
       />
     </Blueprint3.Callout>
diff --git a/tests/renderer/components/__snapshots__/settings-electron-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-electron-spec.tsx.snap
index 2280876421..3115d37a20 100644
--- a/tests/renderer/components/__snapshots__/settings-electron-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-electron-spec.tsx.snap
@@ -165,6 +165,94 @@ exports[`ElectronSettings component > renders 1`] = `
     <div
       className="electron-versions-table"
     >
+      <div
+        className="electron-versions-section-header local"
+      >
+        <Blueprint3.Icon
+          icon="desktop"
+          iconSize={12}
+        />
+        <span>
+          Local Builds
+        </span>
+      </div>
+      <div
+        className="electron-versions-header"
+      >
+        <div
+          className="version-col"
+        >
+          Name
+        </div>
+        <div
+          className="status-col"
+        >
+          Status
+        </div>
+        <div
+          className="action-col"
+        >
+          Action
+        </div>
+      </div>
+      <FixedSizeList
+        className="electron-versions-list"
+        height={40}
+        itemCount={1}
+        itemData={
+          {
+            "appState": {
+              "channelsToShow": [
+                "Stable",
+                "Beta",
+              ],
+              "currentElectronVersion": "2.0.1 remote installed",
+              "version": "2.0.1",
+              "versions": [
+                "2.0.3 remote installed",
+                "2.0.2 remote installed",
+                "2.0.1 remote installed",
+                "2.0.0 remote installed",
+                "1.8.7 remote installed",
+                "0.0.0-local.123 local installed",
+                "3.0.0-nightly.1 remote installed",
+              ],
+              "versionsToShow": [
+                "3.0.0-nightly.1 remote installed",
+                "0.0.0-local.123 local installed",
+                "2.0.3 remote installed",
+                "2.0.2 remote downloading",
+                "2.0.1 remote missing",
+                "2.0.0 remote installing",
+                "1.8.7 remote installed",
+              ],
+            },
+            "versions": [
+              {
+                "name": "My Local Build",
+                "source": "local",
+                "state": "installed",
+                "version": "0.0.0-local.123",
+              },
+            ],
+          }
+        }
+        itemSize={40}
+        width="100%"
+      >
+        <Component />
+      </FixedSizeList>
+      <div
+        className="electron-versions-section-header remote"
+      >
+        <Blueprint3.Icon
+          icon="cloud"
+          iconSize={12}
+        />
+        <span>
+          Releases
+        </span>
+      </div>
       <div
         className="electron-versions-header"
       >
@@ -187,7 +275,7 @@ exports[`ElectronSettings component > renders 1`] = `
       <FixedSizeList
         className="electron-versions-list"
         height={400}
-        itemCount={7}
+        itemCount={6}
         itemData={
           {
             "appState": {
@@ -203,12 +291,12 @@ exports[`ElectronSettings component > renders 1`] = `
                 "2.0.1 remote installed",
                 "2.0.0 remote installed",
                 "1.8.7 remote installed",
-                "3.0.0 local installed",
+                "0.0.0-local.123 local installed",
                 "3.0.0-nightly.1 remote installed",
               ],
               "versionsToShow": [
                 "3.0.0-nightly.1 remote installed",
-                "3.0.0 local installed",
+                "0.0.0-local.123 local installed",
                 "2.0.3 remote installed",
                 "2.0.2 remote downloading",
                 "2.0.1 remote missing",
@@ -222,11 +310,6 @@ exports[`ElectronSettings component > renders 1`] = `
                 "state": "installed",
                 "version": "3.0.0-nightly.1",
               },
-              {
-                "source": "local",
-                "state": "installed",
-                "version": "3.0.0",
-              },
               {
                 "source": "remote",
                 "state": "installed",
diff --git a/tests/renderer/components/dialog-add-version-spec.tsx b/tests/renderer/components/dialog-add-version-spec.tsx
index ced7f72d9b..b6f2686074 100644
--- a/tests/renderer/components/dialog-add-version-spec.tsx
+++ b/tests/renderer/components/dialog-add-version-spec.tsx
@@ -24,7 +24,7 @@ describe('AddVersionDialog component', () => {
     const wrapper = shallow(<AddVersionDialog appState={store} />);
 
     wrapper.setState({
-      isValidVersion: true,
+      isValidName: true,
       isValidElectron: true,
       folderPath: mockFile,
     });
@@ -32,7 +32,7 @@ describe('AddVersionDialog component', () => {
     expect(wrapper).toMatchSnapshot();
 
     wrapper.setState({
-      isValidVersion: false,
+      isValidName: false,
       isValidElectron: true,
       folderPath: mockFile,
     });
@@ -40,7 +40,7 @@ describe('AddVersionDialog component', () => {
     expect(wrapper).toMatchSnapshot();
 
     wrapper.setState({
-      isValidVersion: true,
+      isValidName: true,
       isValidElectron: true,
       existingLocalVersion: {
         version: '2.2.2',
@@ -76,30 +76,44 @@ describe('AddVersionDialog component', () => {
       expect(wrapper.state('isValidElectron')).toBe(true);
       expect(wrapper.state('folderPath')).toBe('/test/');
       expect(wrapper.state('localName')).toBe('Test');
+      expect(wrapper.state('name')).toBe('Test');
+      expect(wrapper.state('isValidName')).toBe(true);
     });
   });
 
-  describe('onChangeVersion()', () => {
+  describe('onChangeName()', () => {
     it('handles valid input', () => {
       const wrapper = shallow(<AddVersionDialog appState={store} />);
 
-      (wrapper.instance() as any).onChangeVersion({
-        target: { value: '3.3.3' },
+      (wrapper.instance() as any).onChangeName({
+        target: { value: 'My Build' },
       });
-      expect(wrapper.state('isValidVersion')).toBe(true);
-      expect(wrapper.state('version')).toBe('3.3.3');
+      expect(wrapper.state('isValidName')).toBe(true);
+      expect(wrapper.state('name')).toBe('My Build');
     });
 
-    it('handles invalid input', () => {
+    it('handles empty input', () => {
       const wrapper = shallow(<AddVersionDialog appState={store} />);
 
-      (wrapper.instance() as any).onChangeVersion({ target: { value: 'foo' } });
-      expect(wrapper.state('isValidVersion')).toBe(false);
-      expect(wrapper.state('version')).toBe('foo');
+      (wrapper.instance() as any).onChangeName({ target: { value: '' } });
+      expect(wrapper.state('isValidName')).toBe(false);
+      expect(wrapper.state('name')).toBe('');
+    });
+
+    it('handles whitespace-only input', () => {
+      const wrapper = shallow(<AddVersionDialog appState={store} />);
+
+      (wrapper.instance() as any).onChangeName({ target: { value: '   ' } });
+      expect(wrapper.state('isValidName')).toBe(false);
+      expect(wrapper.state('name')).toBe('   ');
+    });
+
+    it('handles missing value', () => {
+      const wrapper = shallow(<AddVersionDialog appState={store} />);
 
-      (wrapper.instance() as any).onChangeVersion({ target: {} });
-      expect(wrapper.state('isValidVersion')).toBe(false);
-      expect(wrapper.state('version')).toBe('');
+      (wrapper.instance() as any).onChangeName({ target: {} });
+      expect(wrapper.state('isValidName')).toBe(false);
+      expect(wrapper.state('name')).toBe('');
     });
   });
 
@@ -116,8 +130,10 @@ describe('AddVersionDialog component', () => {
       const wrapper = shallow(<AddVersionDialog appState={store} />);
 
       wrapper.setState({
-        version: '3.3.3',
+        name: 'My Custom Build',
         folderPath: '/test/path',
+        isValidElectron: true,
+        isValidName: true,
       });
 
       await (wrapper.instance() as any).onSubmit();
@@ -126,7 +142,8 @@ describe('AddVersionDialog component', () => {
       expect(store.addLocalVersion).toHaveBeenCalledWith(
         expect.objectContaining({
           localPath: '/test/path',
-          version: '3.3.3',
+          version: expect.stringMatching(/^0\.0\.0-local\.\d+$/),
+          name: 'My Custom Build',
         }),
       );
     });
@@ -137,7 +154,8 @@ describe('AddVersionDialog component', () => {
       wrapper.setState({
         isValidElectron: true,
         folderPath: '/test/path',
-        version: '3.3.3',
+        name: 'My Build',
+        isValidName: true,
         existingLocalVersion: {
           version: '2.2.2',
           localPath: '/test/path',
diff --git a/tests/renderer/components/settings-electron-spec.tsx b/tests/renderer/components/settings-electron-spec.tsx
index 8123e6edc0..a49d234eea 100644
--- a/tests/renderer/components/settings-electron-spec.tsx
+++ b/tests/renderer/components/settings-electron-spec.tsx
@@ -63,7 +63,8 @@ describe('ElectronSettings component', () => {
       {
         source: VersionSource.local,
         state: InstallState.installed,
-        version: '3.0.0',
+        version: '0.0.0-local.123',
+        name: 'My Local Build',
       },
       {
         source: VersionSource.remote,
@@ -86,16 +87,18 @@ describe('ElectronSettings component', () => {
   });
 
   it('handles removing a version', async () => {
-    store.versions['3.0.0-nightly.1'] = {
+    store.versions['0.0.0-local.1'] = {
       state: InstallState.installed,
-      version: '3.0.0-nightly.1',
+      version: '0.0.0-local.1',
       source: VersionSource.local,
+      name: 'Build One',
     };
 
-    store.versions['3.0.0'] = {
+    store.versions['0.0.0-local.2'] = {
       state: InstallState.installed,
-      version: '3.0.0',
+      version: '0.0.0-local.2',
       source: VersionSource.local,
+      name: 'Build Two',
     };
 
     const wrapper = mount(
@@ -133,11 +136,12 @@ describe('ElectronSettings component', () => {
   });
 
   it('handles missing local versions', () => {
-    const version = '99999.0.0';
+    const version = '0.0.0-local.999';
     const ver = {
       source: VersionSource.local,
       state: InstallState.missing,
       version,
+      name: 'Missing Build',
     };
     store.versions = { version: ver };
     store.versionsToShow = [ver];
diff --git a/tests/renderer/state-spec.ts b/tests/renderer/state-spec.ts
index d4bff37084..07bcd5f6eb 100644
--- a/tests/renderer/state-spec.ts
+++ b/tests/renderer/state-spec.ts
@@ -270,6 +270,38 @@ describe('AppState', () => {
       appState.showUndownloadedVersions = true;
       expect(appState.versionsToShow.length).toEqual(mockVersionsArray.length);
     });
+
+    it('always includes local versions regardless of filters', () => {
+      const localVersion: RunnableVersion = {
+        source: VersionSource.local,
+        state: InstallState.installed,
+        version: '0.0.0-local.123',
+        name: 'My Build',
+      };
+
+      appState.versions['0.0.0-local.123'] = localVersion;
+
+      // Local versions should appear even when channels exclude everything
+      appState.channelsToShow = ['Unsupported' as any];
+      const versions = appState.versionsToShow;
+      expect(versions).toContainEqual(localVersion);
+      expect(versions.length).toEqual(1);
+    });
+
+    it('lists local versions before remote versions', () => {
+      const localVersion: RunnableVersion = {
+        source: VersionSource.local,
+        state: InstallState.installed,
+        version: '0.0.0-local.123',
+        name: 'My Build',
+      };
+
+      appState.versions['0.0.0-local.123'] = localVersion;
+      appState.channelsToShow = [ElectronReleaseChannel.stable];
+
+      const versions = appState.versionsToShow;
+      expect(versions[0]).toEqual(localVersion);
+    });
   });
 
   describe('showChannels()', () => {
diff --git a/tests/renderer/utils/sort-versions-spec.ts b/tests/renderer/utils/sort-versions-spec.ts
index 30f6a9f3c2..1f53abb79e 100644
--- a/tests/renderer/utils/sort-versions-spec.ts
+++ b/tests/renderer/utils/sort-versions-spec.ts
@@ -63,4 +63,28 @@ describe('sort-versions', () => {
       makeVersion('v2.0.0-nightly.20200101'),
     ]);
   });
+
+  it('handles non-semver local version keys gracefully', () => {
+    const localVersion: RunnableVersion = {
+      source: VersionSource.local,
+      state: InstallState.installed,
+      version: '0.0.0-local.1234567890',
+      name: 'My Build',
+    };
+
+    const unsorted: RunnableVersion[] = [
+      makeVersion('v1.0.0'),
+      localVersion,
+      makeVersion('v3.0.0'),
+      makeVersion('v2.0.0'),
+    ];
+
+    const sorted = sortVersions([...unsorted]);
+
+    // Local version key (0.0.0-local.xxx) sorts after real semver
+    expect(sorted[0]).toStrictEqual(makeVersion('v3.0.0'));
+    expect(sorted[1]).toStrictEqual(makeVersion('v2.0.0'));
+    expect(sorted[2]).toStrictEqual(makeVersion('v1.0.0'));
+    expect(sorted[3]).toStrictEqual(localVersion);
+  });
 });