From 74abfb2ff5e3275d5562284ea55567df57bb14a1 Mon Sep 17 00:00:00 2001
From: user_1781515504933 <email_1781515504933>
Date: Fri, 2 Oct 2026 15:50:38 +0700
Subject: [PATCH] feat: add Noir Gear NOIR E1 support

---
 src/app/OverviewPage.tsx                 | 68 ++++++++++++++++--------
 src/app/cards/AdvancedCards.tsx          | 11 ++--
 src/app/cards/DpiCard.tsx                | 14 +++--
 src/app/cards/PerformanceCards.tsx       |  2 +
 src/app/cards/availability.test.ts       | 28 ++++++++++
 src/app/cards/availability.ts            | 10 ++--
 src/control.css                          | 47 ++++++++++++++++
 src/device/controller.ts                 | 51 +++++++++++++-----
 src/device/m2nex-profiles.test.ts        | 22 ++++++++
 src/device/m2nex-profiles.ts             | 38 +++++++++----
 src/device/noir.test.ts                  | 25 +++++++++
 src/device/noir.ts                       | 31 +++++++++++
 src/supported-devices-crosscheck.test.ts | 11 ++++
 src/supported-devices-crosscheck.ts      | 11 ++--
 src/supported-devices-data.ts            |  1 +
 src/ui/device-images.test.ts             |  1 +
 src/ui/device-images.ts                  |  1 +
 17 files changed, 309 insertions(+), 63 deletions(-)
 create mode 100644 src/device/noir.test.ts
 create mode 100644 src/device/noir.ts

diff --git a/src/app/OverviewPage.tsx b/src/app/OverviewPage.tsx
index 326df2f6..02214db9 100644
--- a/src/app/OverviewPage.tsx
+++ b/src/app/OverviewPage.tsx
@@ -15,6 +15,7 @@ import {
 } from "lucide-react";
 import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
 import * as control from "../device/controller";
+import { isNoirE1Status, isNoirKsnakeStatus, noirBrandLabel } from "../device/noir.ts";
 import type { ControlSnapshot, WorkspaceTab } from "../device/types";
 import { t, tp, connectionText, type I18nKey } from "../i18n";
 import { Diagnostics, LogitechDetails } from "./Diagnostics";
@@ -94,10 +95,22 @@ const M2_NEX_BUTTON_MARKER_POSITIONS: Readonly<Record<string, ButtonMarkerPositi
   "scroll down": { x: 0.62, y: 0.29 },
 };
 
+const NOIR_E1_BUTTON_MARKER_POSITIONS: Readonly<Record<string, ButtonMarkerPosition>> = {
+  left: { x: 0.28, y: 0.2 },
+  right: { x: 0.72, y: 0.2 },
+  middle: { x: 0.5, y: 0.18 },
+  forward: { x: 0.08, y: 0.32 },
+  backward: { x: 0.08, y: 0.5 },
+};
+
 function m2NexButtonMarkerPosition(button: string): ButtonMarkerPosition | null {
   return M2_NEX_BUTTON_MARKER_POSITIONS[button.trim().toLowerCase()] ?? null;
 }
 
+function noirE1ButtonMarkerPosition(button: string): ButtonMarkerPosition | null {
+  return NOIR_E1_BUTTON_MARKER_POSITIONS[button.trim().toLowerCase()] ?? null;
+}
+
 // Device artwork requests go straight to the documented GitHub issue form
 // (public/devices/README.md, .github/ISSUE_TEMPLATE/device-artwork.yml).
 const ARTWORK_ISSUE_URL = "https://github.com/OpenMouse-Project/openmouse/issues/new?template=device-artwork.yml";
@@ -219,7 +232,7 @@ function DeviceShowcase({ snapshot }: {
 function M2NexProfileOverview({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const status = snapshot.status;
   const locale = snapshot.preferences.locale;
-  if (status?.brand !== "Noir Gear" || status.name !== "M2-NEX" || snapshot.m2nexProfiles === null) return null;
+  if (!status || !isNoirKsnakeStatus(status) || snapshot.m2nexProfiles === null) return null;
   const profile = snapshot.m2nexProfiles[snapshot.activeM2NexProfile];
   if (!profile) return null;
   const applyDisabled = snapshot.settingInProgress || snapshot.pending.count > 0;
@@ -227,16 +240,16 @@ function M2NexProfileOverview({ snapshot }: { snapshot: ControlSnapshot }): Reac
     <section
       id="m2nex-profile-overview"
       className="m2nex-profile-overview"
-      aria-label={t(locale, "m2nex.controls")}
+      aria-label={`${status.name} ${t(locale, "m2nex.controls")}`}
     >
       <div className="m2nex-profile-overview-title">
         <span>{t(locale, "m2nex.overline")}</span>
-        <strong>{t(locale, "m2nex.label")}</strong>
+        <strong>{status.name}</strong>
       </div>
       <label className="m2nex-profile-overview-picker" htmlFor="m2nex-profile-overview-select">
         <select
           id="m2nex-profile-overview-select"
-          aria-label={t(locale, "m2nex.select")}
+          aria-label={`${status.name} profile`}
           value={snapshot.activeM2NexProfile}
           disabled={snapshot.settingInProgress || snapshot.pending.busy}
           onChange={(event) => control.selectM2NexProfile(Number(event.currentTarget.value))}
@@ -275,9 +288,9 @@ export function DeviceShowcaseSidebar({ snapshot }: { snapshot: ControlSnapshot
   if (!status) return null;
   const locale = snapshot.preferences.locale;
   const image = snapshot.deviceArtwork;
+  const isNoirE1 = isNoirE1Status(status);
   const showButtonMarkers = snapshot.workspaceTab === "buttons"
-    && status.brand === "Noir Gear"
-    && status.name === "M2-NEX"
+    && isNoirKsnakeStatus(status)
     && status.buttonMappings != null;
 
   return (
@@ -295,20 +308,30 @@ export function DeviceShowcaseSidebar({ snapshot }: { snapshot: ControlSnapshot
               }}
             />
             <div className="button-map-markers" aria-hidden="true">
-              {Object.keys(status.buttonMappings ?? {}).map((button, index) => {
-                const position = m2NexButtonMarkerPosition(button);
-                if (!position) return null;
-                return (
-                  <span
-                    key={button}
-                    className="button-map-marker"
-                    style={{ left: `${position.x * 100}%`, top: `${position.y * 100}%` }}
-                  >
-                    {String(index + 1).padStart(2, "0")}
-                  </span>
-                );
-              })}
+              {Object.keys(status.buttonMappings ?? {})
+                .filter((button) => !isNoirE1 || button.trim().toLowerCase() !== "dpi")
+                .map((button, index) => {
+                  const position = isNoirE1 ? noirE1ButtonMarkerPosition(button) : m2NexButtonMarkerPosition(button);
+                  if (!position) return null;
+                  return (
+                    <span
+                      key={button}
+                      className="button-map-marker"
+                      style={{ left: `${position.x * 100}%`, top: `${position.y * 100}%` }}
+                    >
+                      {String(index + 1).padStart(2, "0")}
+                    </span>
+                  );
+                })}
             </div>
+            {isNoirE1 ? (
+              <div className="button-map-underside-callout" aria-hidden="true">
+                <span className="button-map-underside-badge">
+                  <span className="button-map-underside-number">06</span>
+                  <span>DPI <small>UNDERSIDE</small></span>
+                </span>
+              </div>
+            ) : null}
           </div>
         ) : (
           <img
@@ -324,7 +347,7 @@ export function DeviceShowcaseSidebar({ snapshot }: { snapshot: ControlSnapshot
       </div>
       <div className="showcase-sidebar-info">
         <h2 className="showcase-sidebar-name">{status.name}</h2>
-        <p className="showcase-sidebar-brand">{status.brand}</p>
+        <p className="showcase-sidebar-brand">{noirBrandLabel(status)}</p>
       </div>
       <div className="showcase-sidebar-status">
         <span className="device-showcase-dot" aria-hidden="true" />
@@ -674,7 +697,8 @@ function DeviceListView({ snapshot }: { snapshot: ControlSnapshot }): ReactNode
               const pollText = liveStatus?.pollingRateHz ? `${liveStatus.pollingRateHz} Hz` : "–";
               const batteryText = liveStatus?.batteryPercent != null ? `${liveStatus.batteryPercent}%` : "–%";
               const imageSrc = deviceImage({ vendorId: device.vendorId, productId: device.productId } as HIDDevice, device.name);
-              const imageClass = deviceImageFilename(device.name) === "noir-m2-nex.png"
+              const imageFilename = deviceImageFilename(device.name);
+              const imageClass = imageFilename === "noir-m2-nex.png" || imageFilename === "noir-e1.png"
                 ? " device-tile-image-is-portrait"
                 : "";
               return (
@@ -767,7 +791,7 @@ export function OverviewPage({
   const locale = preferences.locale;
 
   const tabs = availableWorkspaceTabs(status !== null, cardAvailability(snapshot), {
-    hideLighting: status?.brand === "Noir Gear" && status.name === "M2-NEX",
+    hideLighting: isNoirKsnakeStatus(status),
   });
   const workspaceTab = availableWorkspaceTab(snapshot.workspaceTab, tabs);
   const workspaceSnapshot = workspaceTab === snapshot.workspaceTab
diff --git a/src/app/cards/AdvancedCards.tsx b/src/app/cards/AdvancedCards.tsx
index 8fe2ed24..1733721c 100644
--- a/src/app/cards/AdvancedCards.tsx
+++ b/src/app/cards/AdvancedCards.tsx
@@ -21,6 +21,7 @@ import {
 import { teevolutionSensorModeUi } from "@openmouse/protocol/teevolution";
 import type { KsnakeMacroProfile, KsnakeMacroStep } from "@openmouse/protocol/ksnake";
 import { isPulsarProProtocol } from "../../device/traits";
+import { isNoirKsnakeStatus } from "../../device/noir.ts";
 import * as control from "../../device/controller";
 import { PULSAR_SLEEP_OPTIONS } from "../../device/controller";
 import { selectableValues, sleepLabel, sleepParts, sleepTotalSeconds, valuesWithCurrent, KEYCHRON_SLEEP_MAX_HOURS, KEYCHRON_SLEEP_MAX_SECONDS, KEYCHRON_SLEEP_MIN_SECONDS } from "../../device/options";
@@ -1541,8 +1542,8 @@ function cloneKsnakeMacroProfile(profile: KsnakeMacroProfile | undefined): Ksnak
 export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const status = snapshot.status;
   const locale = snapshot.preferences.locale;
-  const isM2Nex = status?.brand === "Noir Gear" && status.name === "M2-NEX";
-  const macroCapable = status?.ui?.family === "ksnake" || isM2Nex;
+  const isNoirKsnake = isNoirKsnakeStatus(status);
+  const macroCapable = status?.ui?.family === "ksnake" || isNoirKsnake;
   // Keep the card usable while an older hot-reloaded controller snapshot is
   // still missing the newly added field. Treat that state as "not loaded" so
   // the local editor is prepared instead of silently hiding the card.
@@ -1756,7 +1757,7 @@ export function KsnakeMacroCard({ snapshot }: { snapshot: ControlSnapshot }): Re
         </div>
       </div>
       <p className="ksnake-macro-notice">
-        {isM2Nex ? t(locale, "macro.noticeM2nex") : t(locale, "macro.notice")}
+        {isNoirKsnake ? t(locale, "macro.noticeM2nex") : t(locale, "macro.notice")}
       </p>
       <label className="ksnake-macro-slot-picker">
         <span>{t(locale, "macro.slotLabel")}</span>
@@ -1940,9 +1941,7 @@ export function ButtonMappingCard({ snapshot }: { snapshot: ControlSnapshot }):
   if (!status?.buttonMappings || !status.buttonOptions?.length) return null;
   const locale = snapshot.preferences.locale;
   const options = status.buttonOptions;
-  const isM2Nex = status.brand === "Noir Gear"
-    && status.name === "M2-NEX"
-    && snapshot.m2nexProfiles !== null;
+  const isM2Nex = isNoirKsnakeStatus(status) && snapshot.m2nexProfiles !== null;
   const selectedM2NexProfile = isM2Nex
     ? snapshot.m2nexProfiles?.[snapshot.activeM2NexProfile]
     : null;
diff --git a/src/app/cards/DpiCard.tsx b/src/app/cards/DpiCard.tsx
index b7c1f69c..22d1c6df 100644
--- a/src/app/cards/DpiCard.tsx
+++ b/src/app/cards/DpiCard.tsx
@@ -6,6 +6,7 @@ import {
 } from "@openmouse/protocol/drivers/logitech/onboard-profiles";
 import * as control from "../../device/controller";
 import type { ControlSnapshot, LiftOffLevel } from "../../device/types";
+import { isNoirE1Status, isNoirKsnakeStatus, NOIR_DPI_STAGE_COLORS } from "../../device/noir.ts";
 import { closestDpiOption, dpiPresetValues } from "../../dpi-presets";
 import { t, tp } from "../../i18n";
 import { LiftOffDistance, hasLiftOff } from "./PerformanceCards";
@@ -48,7 +49,11 @@ function DpiStageEditor({
 
   const naturalMode: "logitech" | "stage" | "generic" = isLogitech ? "logitech" : isStage ? "stage" : "generic";
   const mode: "logitech" | "stage" | "generic" = editorView === "single" ? "generic" : naturalMode;
-  const showM2NexStageColors = mode === "stage" && status?.brand === "Noir Gear" && status.name === "M2-NEX";
+  const stageColors = mode === "stage"
+    ? status?.dpiStageColors ?? (isNoirKsnakeStatus(status) ? NOIR_DPI_STAGE_COLORS : null)
+    : null;
+  const showM2NexStageColors = mode === "stage"
+    && (stageColors?.length ?? 0) >= (status?.dpiStages?.length ?? 0);
   const limits = snapshot.profile.slotLimits;
   // The single-DPI (generic) view writes the live DPI, not the profile, so it
   // must not be gated behind the profile's slot-write lock.
@@ -286,10 +291,12 @@ function DpiStageEditor({
             : false;
           const highlighted = mode === "generic" ? row.enabled : mode === "stage" ? isActive === true : isStarting;
           const stageColorClass = showM2NexStageColors ? ` m2nex-stage-${index + 1}` : "";
+          const stageColor = showM2NexStageColors ? stageColors?.[index] : undefined;
           return (
             <div
               key={index}
               className={`dpi-editor-row${row.enabled ? "" : " is-off"}${highlighted ? " is-active" : ""}${stageColorClass}`}
+              style={stageColor ? { "--dpi-stage-color": stageColor } as CSSProperties : undefined}
             >
               <label className="dpi-editor-check">
                 <input
@@ -453,6 +460,7 @@ export function DpiCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode
     || (Boolean(status?.ui?.dpiStageEditor)
       && Array.isArray(status?.dpiStages)
       && (status?.dpiStages?.length ?? 0) > 0);
+  const singleDpiAvailable = !isNoirE1Status(status);
 
   const label = (source: typeof status): string => `${source.dpi.toLocaleString()} DPI`;
 
@@ -473,7 +481,7 @@ export function DpiCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode
                 ) : null}
               </h2>
             </div>
-            {stageCapable ? (
+            {stageCapable && singleDpiAvailable ? (
               <div
                 className="dpi-view-toggle"
                 role="group"
@@ -535,7 +543,7 @@ export function DpiCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode
 
         <DpiStageEditor
           snapshot={snapshot}
-          editorView={stageCapable ? editorView : undefined}
+          editorView={stageCapable && singleDpiAvailable ? editorView : stageCapable ? "stage" : undefined}
         />
 
         <div className="setting-action">
diff --git a/src/app/cards/PerformanceCards.tsx b/src/app/cards/PerformanceCards.tsx
index 08be77a6..b0795b9e 100644
--- a/src/app/cards/PerformanceCards.tsx
+++ b/src/app/cards/PerformanceCards.tsx
@@ -6,6 +6,7 @@ import {
   reportRatesFor,
 } from "@openmouse/protocol/drivers/logitech/onboard-profiles";
 import * as control from "../../device/controller";
+import { isNoirE1Status } from "../../device/noir.ts";
 import { isNativeAttackSharkX11, RATE_STEPS_HZ } from "../../device/controller";
 import type { ControlSnapshot, LiftOffLevel } from "../../device/types";
 import { t, tp } from "../../i18n";
@@ -204,6 +205,7 @@ export function SensorCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNo
 export function hasLiftOff(snapshot: ControlSnapshot): boolean {
   const status = snapshot.status;
   if (!status || snapshot.profile.slotsAvailable) return false;
+  if (isNoirE1Status(status)) return false;
   return Boolean(status.asymmetricLiftOff)
     || Boolean(status.liftOffScale)
     || status.liftOffDistance != null
diff --git a/src/app/cards/availability.test.ts b/src/app/cards/availability.test.ts
index 2c36c32d..bbeed967 100644
--- a/src/app/cards/availability.test.ts
+++ b/src/app/cards/availability.test.ts
@@ -403,6 +403,34 @@ test("the generic button card follows the driver\'s mappings, not the advanced s
   assert.equal(has.processing, false, "the rest of the advanced section stays closed");
 });
 
+test("NOIR E1 gets the same core configurator controls even without a family hint", () => {
+  const has = cardAvailability(snapshot({
+    status: {
+      brand: "K-snake",
+      name: "NOIR E1",
+      ui: { showAdvancedSection: true },
+      buttonMappings: {
+        Left: "Left click",
+        Right: "Right click",
+        Middle: "Middle click",
+        Forward: "Forward",
+        Backward: "Backward",
+        DPI: "DPI loop",
+      },
+      buttonOptions: ["Left click", "Right click", "Scroll up", "DPI loop"],
+      dpiStages: [800, 1200, 1600, 3200, 5000, 12000],
+      scrollDirection: "Forward",
+      lighting: {} as never,
+    },
+  }));
+  assert.equal(has.dpi, true);
+  assert.equal(has.polling, true);
+  assert.equal(has.buttonMapping, true);
+  assert.equal(has.ksnakeScroll, true);
+  assert.equal(has.ksnakeMacros, true);
+  assert.equal(has.lightingAdvanced, false);
+});
+
 test("the G-Wolves XVI generation opens sleep, debounce and processing, but not signal", () => {
   const cards = cardAvailability(snapshot({
     status: {
diff --git a/src/app/cards/availability.ts b/src/app/cards/availability.ts
index 79426176..0b4058e0 100644
--- a/src/app/cards/availability.ts
+++ b/src/app/cards/availability.ts
@@ -1,5 +1,6 @@
 import { selectableValues } from "../../device/options.ts";
 import { isPulsarProProtocol } from "../../device/traits.ts";
+import { isNoirKsnakeStatus } from "../../device/noir.ts";
 import type { ControlSnapshot } from "../../device/types";
 
 export interface CardAvailability {
@@ -95,7 +96,7 @@ export function cardAvailability(snapshot: ControlSnapshot): CardAvailability {
   const { traits, capabilities } = snapshot;
   const ready = !snapshot.settingsPending;
   const host = traits.advancedSection;
-  const isM2Nex = status.brand === "Noir Gear" && status.name === "M2-NEX";
+  const isNoirKsnake = isNoirKsnakeStatus(status);
 
   const sensor = !(!status.gamingSurfaceMode
     && Array.isArray(status.supportedLiftOffDistances)
@@ -137,14 +138,13 @@ export function cardAvailability(snapshot: ControlSnapshot): CardAvailability {
     lightforce: Boolean(status.lightforceSwitchMode),
     superstrike: traits.logitech && status.analogButtonTuning?.buttons.length === 2,
     lighting: Boolean(status.lighting || status.lightingZones?.length),
-    lightingAdvanced: host && !isM2Nex && Boolean(status.lighting || status.lightingZones?.length),
+    lightingAdvanced: host && !isNoirKsnake && Boolean(status.lighting || status.lightingZones?.length),
     onboardProfiles: (status.profileCount ?? 0) > 1 && status.activeProfile != null,
     buttonMapping: Boolean(status.buttonMappings) && Boolean(status.buttonOptions?.length),
     // K-snake/M2-NEX exposes the macro write/commit path. The editor starts
     // with local slots because this firmware does not expose a reliable macro
     // read through the browser.
-    ksnakeMacros: ui?.family === "ksnake"
-      || (status.brand === "Noir Gear" && status.name === "M2-NEX"),
+    ksnakeMacros: ui?.family === "ksnake" || isNoirKsnake,
     powerMode: host && Boolean(status.powerModes?.length),
     profiles: traits.logitech
       && status.deviceMode !== undefined && status.deviceMode !== "Unknown",
@@ -157,7 +157,7 @@ export function cardAvailability(snapshot: ControlSnapshot): CardAvailability {
       && status.debounceMs !== null && status.debounceMs !== undefined,
     sleep: host && (traits.sleep || capabilities?.sleepOptions != null || razerSleep)
       && ui?.hideSleepCard !== true,
-    ksnakeScroll: ui?.family === "ksnake" && status.scrollDirection != null,
+    ksnakeScroll: (ui?.family === "ksnake" || isNoirKsnake) && status.scrollDirection != null,
     lowPower: host && razerLowPower,
     processing: host && processing,
     ninjutsoSensor: host && traits.ninjutso
diff --git a/src/control.css b/src/control.css
index e1d76383..96675e29 100644
--- a/src/control.css
+++ b/src/control.css
@@ -1482,6 +1482,53 @@ nav { display: grid; gap: .3rem; margin-top: 1.4rem; }
   line-height: 1;
   transform: translate(-50%, -50%);
 }
+.button-map-underside-callout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: .18rem;
+  line-height: 1;
+}
+.button-map-underside-callout::before {
+  width: 1px;
+  height: .72rem;
+  border-radius: 2px;
+  background: #727985;
+  content: "";
+}
+.button-map-underside-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: .42rem;
+  padding: .2rem .58rem .2rem .22rem;
+  border: 1px solid #41464f;
+  border-radius: 999px;
+  background: #24272d;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 32%);
+  color: #e0e3e8;
+  font: 650 .59rem var(--font-mono);
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+.button-map-underside-badge small {
+  margin-left: .2rem;
+  color: #9ba2ac;
+  font: inherit;
+  font-size: .51rem;
+  letter-spacing: .06em;
+}
+.button-map-underside-number {
+  display: grid;
+  width: 1.42rem;
+  height: 1.42rem;
+  place-items: center;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  background: #f2f3f5;
+  color: #202329;
+  font: 700 .57rem var(--font-mono);
+  letter-spacing: .02em;
+}
 .showcase-sidebar-info { width: 100%; min-width: 0; margin-top: 1rem; }
 .showcase-sidebar-name {
   margin: 0;
diff --git a/src/device/controller.ts b/src/device/controller.ts
index 5f179bf3..58ec8f81 100644
--- a/src/device/controller.ts
+++ b/src/device/controller.ts
@@ -107,8 +107,11 @@ import {
   cloneM2NexProfile,
   loadM2NexProfiles,
   saveM2NexProfiles,
+  NOIR_E1_PROFILE_COUNT,
+  NOIR_E1_PROFILE_STORAGE_KEY,
   type M2NexProfile,
 } from "./m2nex-profiles";
+import { isNoirE1Status, isNoirKsnakeStatus } from "./noir.ts";
 import {
   LOGITECH_HAPTIC_EFFECTS,
   LOGITECH_HAPTIC_PRESETS,
@@ -668,6 +671,7 @@ type M2NexProfileClient = KsnakeMacroClient & {
   setDpiStageValue(stage: number, dpi: number): Promise<unknown>;
   setActiveDpiStage(stage: number): Promise<unknown>;
   setPollingRate(rate: number): Promise<unknown>;
+  setScrollDirection?(direction: NonNullable<MouseStatus["scrollDirection"]>): Promise<unknown>;
 };
 
 function ksnakeMacroClient(): KsnakeMacroClient | null {
@@ -677,12 +681,24 @@ function ksnakeMacroClient(): KsnakeMacroClient | null {
     : null;
 }
 
-function isM2NexStatus(status: MouseStatus | null | undefined = latestDeviceStatus): boolean {
-  return status?.brand === "Noir Gear" && status.name === "M2-NEX";
+function isNoirProfileDevice(status: MouseStatus | null | undefined = latestDeviceStatus): boolean {
+  return isNoirKsnakeStatus(status);
+}
+
+function noirProfileStoreOptions(status: MouseStatus | null | undefined = latestDeviceStatus): {
+  count?: number;
+  storageKey?: string;
+} | undefined {
+  if (isNoirE1Status(status)) {
+    return { count: NOIR_E1_PROFILE_COUNT, storageKey: NOIR_E1_PROFILE_STORAGE_KEY };
+  }
+  return undefined;
 }
 
 function persistM2NexProfiles(): void {
-  if (m2nexProfiles !== null) saveM2NexProfiles(localStorage, m2nexProfiles);
+  if (m2nexProfiles !== null) {
+    saveM2NexProfiles(localStorage, m2nexProfiles, noirProfileStoreOptions());
+  }
 }
 
 function profileMacroTable(): KsnakeMacroProfile[] | null {
@@ -692,7 +708,7 @@ function profileMacroTable(): KsnakeMacroProfile[] | null {
 }
 
 function seedM2NexProfiles(status: MouseStatus): void {
-  if (!isM2NexStatus(status)) {
+  if (!isNoirProfileDevice(status)) {
     m2nexProfiles = null;
     activeM2NexProfile = 0;
     m2nexProfileDirty = false;
@@ -704,8 +720,9 @@ function seedM2NexProfiles(status: MouseStatus): void {
     activeDpiStage: status.activeDpiStage,
     pollingRateHz: status.pollingRateHz,
     buttonMappings: status.buttonMappings,
+    scrollDirection: status.scrollDirection,
     macros: null,
-  });
+  }, noirProfileStoreOptions(status));
   activeM2NexProfile = Math.min(activeM2NexProfile, m2nexProfiles.length - 1);
   m2nexProfileDirty = false;
 }
@@ -744,7 +761,7 @@ export function loadKsnakeMacros(): void {
   }
   ksnakeMacrosLoading = false;
   ksnakeMacrosError = null;
-  if (isM2NexStatus() && m2nexProfiles?.[activeM2NexProfile]) setEditorToM2NexProfile();
+  if (isNoirProfileDevice() && m2nexProfiles?.[activeM2NexProfile]) setEditorToM2NexProfile();
   else ksnakeMacros = cloneKsnakeMacros([]);
   stagedKsnakeMacros = null;
   emit();
@@ -752,7 +769,7 @@ export function loadKsnakeMacros(): void {
 
 /** Select one of the local M2-NEX profile slots. The device is unchanged until Apply profile. */
 export function selectM2NexProfile(index: number): void {
-  if (!isM2NexStatus() || !m2nexProfiles?.[index]) return;
+  if (!isNoirProfileDevice() || !m2nexProfiles?.[index]) return;
   if (hasPendingChanges()) {
     setReadStatus(st("m2nex.switchBlocked"));
     return;
@@ -765,7 +782,7 @@ export function selectM2NexProfile(index: number): void {
 
 /** Edit the selected profile without touching the mouse yet. */
 export function updateM2NexProfileButton(button: string, action: string): void {
-  if (!isM2NexStatus() || !m2nexProfiles?.[activeM2NexProfile]) return;
+  if (!isNoirProfileDevice() || !m2nexProfiles?.[activeM2NexProfile]) return;
   if (button === "Left") return;
   const current = m2nexProfiles[activeM2NexProfile];
   m2nexProfiles = m2nexProfiles.map((profile, index) => index === activeM2NexProfile
@@ -779,7 +796,7 @@ export function updateM2NexProfileButton(button: string, action: string): void {
 
 /** Save the currently displayed device settings into the selected local slot. */
 export function saveCurrentM2NexProfile(): void {
-  if (!isM2NexStatus() || !latestDeviceStatus || !m2nexProfiles?.[activeM2NexProfile]) return;
+  if (!isNoirProfileDevice() || !latestDeviceStatus || !m2nexProfiles?.[activeM2NexProfile]) return;
   const status = withPendingChanges(latestDeviceStatus);
   const current = m2nexProfiles[activeM2NexProfile];
   const macros = profileMacroTable();
@@ -790,6 +807,7 @@ export function saveCurrentM2NexProfile(): void {
         activeDpiStage: status.activeDpiStage ?? 0,
         pollingRateHz: status.pollingRateHz,
         buttonMappings: { ...(status.buttonMappings ?? {}) },
+        ...(status.scrollDirection ? { scrollDirection: status.scrollDirection } : {}),
         macros: macros ?? profile.macros,
       }
     : profile);
@@ -802,7 +820,7 @@ export function saveCurrentM2NexProfile(): void {
 
 /** Apply a complete local M2-NEX profile through the same verified setters as the individual controls. */
 export async function applyM2NexProfile(index = activeM2NexProfile): Promise<void> {
-  if (!isM2NexStatus() || !latestDeviceStatus || !m2nexProfiles?.[index]) return;
+  if (!isNoirProfileDevice() || !latestDeviceStatus || !m2nexProfiles?.[index]) return;
   if (hasPendingChanges()) {
     setReadStatus(st("m2nex.applyBlocked"));
     return;
@@ -866,6 +884,13 @@ export async function applyM2NexProfile(index = activeM2NexProfile): Promise<voi
       emit();
       await rawClient.setPollingRate(profile.pollingRateHz);
     }
+    if (profile.scrollDirection && before.scrollDirection !== profile.scrollDirection
+      && typeof rawClient.setScrollDirection === "function") {
+      pendingStatusText = `Applying ${profile.name}: scroll direction…`;
+      readStatus = pendingStatusText;
+      emit();
+      await rawClient.setScrollDirection(profile.scrollDirection);
+    }
 
     const status = await statusAfterWrite(active as SupportedClient);
     applyStatus(status);
@@ -908,7 +933,7 @@ export function applyKsnakeMacro(slot: number, profile: KsnakeMacroProfile): voi
       if (active === client) {
         ksnakeMacros = cloneKsnakeMacros(next);
         stagedKsnakeMacros = null;
-        if (isM2NexStatus() && m2nexProfiles?.[activeM2NexProfile]) {
+        if (isNoirProfileDevice() && m2nexProfiles?.[activeM2NexProfile]) {
           m2nexProfiles = m2nexProfiles.map((profile, index) => index === activeM2NexProfile
             ? { ...profile, macros: cloneKsnakeMacros(next) }
             : profile);
@@ -2451,8 +2476,8 @@ async function activateClientNow(client: SupportedClient): Promise<void> {
     // tuning are editable on the first status snapshot.
     capabilities = readCapabilities();
     applyStatus(status);
-    if (isM2NexStatus(status) && m2nexProfiles === null) seedM2NexProfiles(status);
-    if (!isM2NexStatus(status)) {
+    if (isNoirProfileDevice(status) && m2nexProfiles === null) seedM2NexProfiles(status);
+    if (!isNoirProfileDevice(status)) {
       m2nexProfiles = null;
       activeM2NexProfile = 0;
       m2nexProfileDirty = false;
diff --git a/src/device/m2nex-profiles.test.ts b/src/device/m2nex-profiles.test.ts
index a056b3e5..9a4c96c5 100644
--- a/src/device/m2nex-profiles.test.ts
+++ b/src/device/m2nex-profiles.test.ts
@@ -2,6 +2,8 @@ import assert from "node:assert/strict";
 import test from "node:test";
 
 import {
+  NOIR_E1_PROFILE_COUNT,
+  NOIR_E1_PROFILE_STORAGE_KEY,
   M2NEX_PROFILE_STORAGE_KEY,
   defaultM2NexProfiles,
   loadM2NexProfiles,
@@ -70,3 +72,23 @@ test("invalid stored profiles fall back to current mouse settings", () => {
   assert.deepEqual(loaded.map((profile) => profile.name), ["Profile 1", "Profile 2", "Profile 3"]);
   assert.deepEqual(loaded[0]?.dpiStages, [800, 1600, 3200]);
 });
+
+test("E1 has six isolated local profile slots without changing M2-NEX storage", () => {
+  const store = storage();
+  const profiles = defaultM2NexProfiles(seed(), NOIR_E1_PROFILE_COUNT);
+  profiles[0]!.name = "E1 gaming";
+  saveM2NexProfiles(store, profiles, {
+    count: NOIR_E1_PROFILE_COUNT,
+    storageKey: NOIR_E1_PROFILE_STORAGE_KEY,
+  });
+
+  const loaded = loadM2NexProfiles(store, seed(), {
+    count: NOIR_E1_PROFILE_COUNT,
+    storageKey: NOIR_E1_PROFILE_STORAGE_KEY,
+  });
+  const m2nex = loadM2NexProfiles(store, seed());
+  assert.equal(loaded.length, 6);
+  assert.equal(loaded[0]?.name, "E1 gaming");
+  assert.equal(m2nex.length, 3);
+  assert.notEqual(NOIR_E1_PROFILE_STORAGE_KEY, M2NEX_PROFILE_STORAGE_KEY);
+});
diff --git a/src/device/m2nex-profiles.ts b/src/device/m2nex-profiles.ts
index ed2053e7..566edd62 100644
--- a/src/device/m2nex-profiles.ts
+++ b/src/device/m2nex-profiles.ts
@@ -4,6 +4,9 @@ import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
 /** The same three-slot mental model used by the M2-NEX vendor application. */
 export const M2NEX_PROFILE_COUNT = 3;
 export const M2NEX_PROFILE_STORAGE_KEY = "openmouse.m2-nex.profiles.v1";
+/** E1 keeps its six configurator slots separate from M2-NEX local data. */
+export const NOIR_E1_PROFILE_COUNT = 6;
+export const NOIR_E1_PROFILE_STORAGE_KEY = "openmouse.noir-e1.profiles.v1";
 
 export interface M2NexProfile {
   id: number;
@@ -13,6 +16,7 @@ export interface M2NexProfile {
   activeDpiStage: number;
   pollingRateHz: number;
   buttonMappings: Record<string, string>;
+  scrollDirection?: "Forward" | "Reverse";
   /** Null means this profile has no trustworthy macro table yet. */
   macros: KsnakeMacroProfile[] | null;
 }
@@ -22,9 +26,14 @@ interface StoredM2NexProfiles {
   profiles: M2NexProfile[];
 }
 
+export interface M2NexProfileStoreOptions {
+  count?: number;
+  storageKey?: string;
+}
+
 export type M2NexProfileSeed = Pick<
   MouseStatus,
-  "dpi" | "dpiStages" | "activeDpiStage" | "pollingRateHz" | "buttonMappings"
+  "dpi" | "dpiStages" | "activeDpiStage" | "pollingRateHz" | "buttonMappings" | "scrollDirection"
 > & {
   macros?: readonly KsnakeMacroProfile[] | null;
 };
@@ -44,6 +53,7 @@ export function cloneM2NexProfile(profile: M2NexProfile): M2NexProfile {
     activeDpiStage: profile.activeDpiStage,
     pollingRateHz: profile.pollingRateHz,
     buttonMappings: { ...profile.buttonMappings },
+    ...(profile.scrollDirection ? { scrollDirection: profile.scrollDirection } : {}),
     macros: cloneMacros(profile.macros),
   };
 }
@@ -57,12 +67,16 @@ function seedProfile(id: number, seed: M2NexProfileSeed): M2NexProfile {
     activeDpiStage: Math.min(Math.max(seed.activeDpiStage ?? 0, 0), stages.length - 1),
     pollingRateHz: seed.pollingRateHz,
     buttonMappings: { ...(seed.buttonMappings ?? {}) },
+    ...(seed.scrollDirection ? { scrollDirection: seed.scrollDirection } : {}),
     macros: cloneMacros(seed.macros),
   };
 }
 
-export function defaultM2NexProfiles(seed: M2NexProfileSeed): M2NexProfile[] {
-  return Array.from({ length: M2NEX_PROFILE_COUNT }, (_, id) => seedProfile(id, seed));
+export function defaultM2NexProfiles(
+  seed: M2NexProfileSeed,
+  count = M2NEX_PROFILE_COUNT,
+): M2NexProfile[] {
+  return Array.from({ length: count }, (_, id) => seedProfile(id, seed));
 }
 
 function validProfile(value: unknown): value is M2NexProfile {
@@ -79,11 +93,12 @@ function validProfile(value: unknown): value is M2NexProfile {
     && typeof profile.buttonMappings === "object"
     && profile.buttonMappings !== null
     && Object.values(profile.buttonMappings).every((action) => typeof action === "string")
+    && (profile.scrollDirection === undefined || profile.scrollDirection === "Forward" || profile.scrollDirection === "Reverse")
     && (profile.macros === null || profile.macros === undefined || Array.isArray(profile.macros));
 }
 
-function normalizeProfiles(raw: unknown): M2NexProfile[] | null {
-  if (!Array.isArray(raw) || raw.length !== M2NEX_PROFILE_COUNT || !raw.every(validProfile)) return null;
+function normalizeProfiles(raw: unknown, count: number): M2NexProfile[] | null {
+  if (!Array.isArray(raw) || raw.length !== count || !raw.every(validProfile)) return null;
   return raw.map((value, id) => {
     const profile = value as M2NexProfile;
     const stages = profile.dpiStages.slice();
@@ -94,6 +109,7 @@ function normalizeProfiles(raw: unknown): M2NexProfile[] | null {
       activeDpiStage: Math.min(Math.max(profile.activeDpiStage, 0), stages.length - 1),
       pollingRateHz: profile.pollingRateHz,
       buttonMappings: { ...profile.buttonMappings },
+      ...(profile.scrollDirection ? { scrollDirection: profile.scrollDirection } : {}),
       macros: cloneMacros(profile.macros),
     };
   });
@@ -103,14 +119,17 @@ function normalizeProfiles(raw: unknown): M2NexProfile[] | null {
 export function loadM2NexProfiles(
   storage: Pick<Storage, "getItem">,
   seed: M2NexProfileSeed,
+  options: M2NexProfileStoreOptions = {},
 ): M2NexProfile[] {
-  const defaults = defaultM2NexProfiles(seed);
+  const count = options.count ?? M2NEX_PROFILE_COUNT;
+  const storageKey = options.storageKey ?? M2NEX_PROFILE_STORAGE_KEY;
+  const defaults = defaultM2NexProfiles(seed, count);
   try {
-    const raw = storage.getItem(M2NEX_PROFILE_STORAGE_KEY);
+    const raw = storage.getItem(storageKey);
     if (!raw) return defaults;
     const parsed = JSON.parse(raw) as Partial<StoredM2NexProfiles>;
     return parsed.version === 1
-      ? normalizeProfiles(parsed.profiles) ?? defaults
+      ? normalizeProfiles(parsed.profiles, count) ?? defaults
       : defaults;
   } catch {
     return defaults;
@@ -121,13 +140,14 @@ export function loadM2NexProfiles(
 export function saveM2NexProfiles(
   storage: Pick<Storage, "setItem">,
   profiles: readonly M2NexProfile[],
+  options: M2NexProfileStoreOptions = {},
 ): void {
   const payload: StoredM2NexProfiles = {
     version: 1,
     profiles: profiles.map(cloneM2NexProfile),
   };
   try {
-    storage.setItem(M2NEX_PROFILE_STORAGE_KEY, JSON.stringify(payload));
+    storage.setItem(options.storageKey ?? M2NEX_PROFILE_STORAGE_KEY, JSON.stringify(payload));
   } catch {
     // The in-memory profile remains usable when browser storage is blocked or full.
   }
diff --git a/src/device/noir.test.ts b/src/device/noir.test.ts
new file mode 100644
index 00000000..0f613529
--- /dev/null
+++ b/src/device/noir.test.ts
@@ -0,0 +1,25 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  isNoirE1Status,
+  isNoirKsnakeStatus,
+  isNoirM2NexStatus,
+  NOIR_DPI_STAGE_COLORS,
+  noirBrandLabel,
+} from "./noir.ts";
+
+test("NOIR E1 is recognized under the vendor or chipset brand without matching M2-NEX", () => {
+  assert.equal(isNoirE1Status({ brand: "K-snake", name: "NOIR E1" }), true);
+  assert.equal(isNoirE1Status({ brand: "Noir Gear", name: "noir e1" }), true);
+  assert.equal(isNoirE1Status({ brand: "Other", name: "NOIR E1" }), false);
+  assert.equal(isNoirM2NexStatus({ brand: "Noir Gear", name: "NOIR E1" }), false);
+  assert.equal(isNoirKsnakeStatus({ brand: "K-snake", name: "NOIR E1" }), true);
+  assert.equal(noirBrandLabel({ brand: "K-snake", name: "NOIR E1" }), "Noir Gear");
+});
+
+test("NOIR DPI indicator palette matches the device stage order", () => {
+  assert.deepEqual(NOIR_DPI_STAGE_COLORS, [
+    "#ff5a5a", "#4ade80", "#60a5fa", "#facc15", "#22d3ee", "#e879f9",
+  ]);
+});
diff --git a/src/device/noir.ts b/src/device/noir.ts
new file mode 100644
index 00000000..ddac0275
--- /dev/null
+++ b/src/device/noir.ts
@@ -0,0 +1,31 @@
+import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
+
+type DeviceIdentity = Pick<MouseStatus, "brand" | "name">;
+
+export function isNoirM2NexStatus(status: DeviceIdentity | null | undefined): boolean {
+  return status?.brand === "Noir Gear" && status.name === "M2-NEX";
+}
+
+/** E1 is exposed by the shared K-snake transport under either brand. */
+export function isNoirE1Status(status: DeviceIdentity | null | undefined): boolean {
+  return status?.name.trim().toUpperCase() === "NOIR E1"
+    && (status.brand === "Noir Gear" || status.brand === "K-snake");
+}
+
+export function isNoirKsnakeStatus(status: DeviceIdentity | null | undefined): boolean {
+  return isNoirM2NexStatus(status) || isNoirE1Status(status);
+}
+
+export function noirBrandLabel(status: DeviceIdentity): string {
+  return isNoirE1Status(status) ? "Noir Gear" : status.brand;
+}
+
+/** Factory DPI indicator colours in the K-snake/Noir firmware order. */
+export const NOIR_DPI_STAGE_COLORS = [
+  "#ff5a5a",
+  "#4ade80",
+  "#60a5fa",
+  "#facc15",
+  "#22d3ee",
+  "#e879f9",
+] as const;
diff --git a/src/supported-devices-crosscheck.test.ts b/src/supported-devices-crosscheck.test.ts
index 3d51cd11..eff11922 100644
--- a/src/supported-devices-crosscheck.test.ts
+++ b/src/supported-devices-crosscheck.test.ts
@@ -75,6 +75,17 @@ test("M2-NEX resolves to the Noir Gear supported row despite the shared OEM PID"
   assert.match(result.detail, /already listed as Supported/);
 });
 
+test("NOIR E1 resolves to its own pending row despite sharing the M2-NEX PID", () => {
+  const result = crosscheckSupportedDevices(
+    device({ brand: "Noir Gear", name: "NOIR E1", vendorId: 0xa8a4, productId: 0x2255 }),
+    "pass",
+  );
+  assert.equal(result.listed, true);
+  assert.equal(result.matchedBy, "pid");
+  assert.equal(result.status, "pending");
+  assert.equal(result.pageModel, "NOIR E1");
+});
+
 test("brand+model name match on a likely row with a passing run qualifies for Supported", () => {
   const result = crosscheckSupportedDevices(
     device({ brand: "ATK", name: "F1 Ultimate" }),
diff --git a/src/supported-devices-crosscheck.ts b/src/supported-devices-crosscheck.ts
index d8b5a997..6f724f21 100644
--- a/src/supported-devices-crosscheck.ts
+++ b/src/supported-devices-crosscheck.ts
@@ -85,12 +85,13 @@ export function crosscheckSupportedDevices(
 
   if (byPid.length > 0) {
     matchedBy = "pid";
-    // Prefer rows whose brand matches the connected device; otherwise take the
-    // most upstream status among the PID rows (a PID shared across models, as
-    // with Incott, reports the best-known status).
+    // Prefer an exact model name before brand/status. Shared PIDs can map to
+    // multiple Noir Gear models, so name avoids inheriting a sibling's status.
     const ranked = byPid.sort(
       (left, right) =>
-        Number(brandMatches(right)) - Number(brandMatches(left))
+        Number(normalize(right.model) === normalize(device.name ?? ""))
+        - Number(normalize(left.model) === normalize(device.name ?? ""))
+        || Number(brandMatches(right)) - Number(brandMatches(left))
         || STATUS_ORDER[left.status] - STATUS_ORDER[right.status],
     );
     match = ranked[0] ?? null;
@@ -132,4 +133,4 @@ export function crosscheckSupportedDevices(
   }
 
   return { listed: true, status: match.status, label, matchedBy, pageModel: model, detail };
-}
\ No newline at end of file
+}
diff --git a/src/supported-devices-data.ts b/src/supported-devices-data.ts
index c862fd98..4bc77f7f 100644
--- a/src/supported-devices-data.ts
+++ b/src/supported-devices-data.ts
@@ -562,6 +562,7 @@ export const SUPPORTED_DEVICES: readonly SupportedDeviceEntry[] = [
   { brand: "MSI", model: "Clutch GM41 Lightweight Wireless (Stalker 2 Edition)", status: "pending" },
   { brand: "MSI", model: "GM340", status: "pending" },
   { brand: "MSI", model: "Versa 300", status: "pending" },
+  { brand: "Noir Gear", model: "NOIR E1", status: "pending", pids: [0x2255] },
   { brand: "Noir Gear", model: "S1 Series", status: "pending" },
   { brand: "NOS", model: "M750", status: "pending" },
   { brand: "NOS", model: "M800", status: "pending" },
diff --git a/src/ui/device-images.test.ts b/src/ui/device-images.test.ts
index f65c6d3b..bcc34654 100644
--- a/src/ui/device-images.test.ts
+++ b/src/ui/device-images.test.ts
@@ -248,6 +248,7 @@ test("K-snake X11 resolves by name regardless of transport", () => {
 test("Noir Gear M2-NEX resolves to its maintainer-hosted artwork", () => {
   assert.equal(deviceImage(null, "M2-NEX"), CDN + "noir-m2-nex.png");
   assert.equal(deviceImage(null, "Noir Gear M2-NEX"), CDN + "noir-m2-nex.png");
+  assert.equal(deviceImage(null, "NOIR E1"), CDN + "noir-e1.png");
 });
 
 test("Attack Shark X11 does not inherit K-snake artwork", () => {
diff --git a/src/ui/device-images.ts b/src/ui/device-images.ts
index 2997c091..8969bc8e 100644
--- a/src/ui/device-images.ts
+++ b/src/ui/device-images.ts
@@ -171,6 +171,7 @@ function resolveDeviceImageFilename(_device: HIDDevice | null | undefined, displ
   // retail shell. Keep its artwork match name-based so USB and 2.4 GHz
   // receiver connections resolve to the same product image.
   if (/m2\s*[-_]?\s*nex/i.test(displayName)) return "noir-m2-nex.png";
+  if (/\bnoir\s*e1\b/i.test(displayName)) return "noir-e1.png";
   if (/fantech/i.test(displayName)) return "unknown-device.png";
   return "unknown-device.png";
 }