diff --git a/build/check-bundle-size.ts b/build/check-bundle-size.ts
index ac293f7d..f8e9d004 100644
--- a/build/check-bundle-size.ts
+++ b/build/check-bundle-size.ts
@@ -165,7 +165,15 @@ const BUDGET_BYTES: Record<string, number> = {
   // WLmouse Beast X 4K driver wiring (#287, which also pulls its protocol codec
   // in through SUPPORTED_HID_FILTERS), and the Razer Bluetooth-mode notice
   // (#357). Measured aggregate is 1,850.7 kB, leaving ~29 kB of headroom.
-  ".js": 1_880_000,
+  // Raised to 2,085 kB for protocol 0.22.0 and the four device PRs that land
+  // with it: the Noir Gear M2-NEX integration (#402, local profile slots and
+  // the macro editor), the Keychron G3 Air / Launcher 8k-1k panel wiring
+  // (#408, #426), and the Rapoo VT9 Pro client (#422). Their protocol codecs
+  // (Keychron Launcher mouse catalog, Rapoo register codec, K-snake macro
+  // store) are pulled in through SUPPORTED_HID_FILTERS and the controllers,
+  // and the shared UI gained the macro-card and profile-overview CSS. Measured
+  // aggregate is 1,995.2 kB, leaving ~90 kB of headroom.
+  ".js": 2_085_000,
 };
 
 const ASSETS = join("dist", "assets");
diff --git a/package-lock.json b/package-lock.json
index b2255146..c0b419a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "2.0.0",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
-        "@openmouse/protocol": "0.19.0",
+        "@openmouse/protocol": "0.22.0",
         "lucide-react": "^1.43.0",
         "preact": "^10.29.8"
       },
@@ -481,9 +481,9 @@
       }
     },
     "node_modules/@openmouse/protocol": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/@openmouse/protocol/-/protocol-0.19.0.tgz",
-      "integrity": "sha512-Bxuk9gtWTOtoVufHcqGAxkVlHKyWIlhNZozhUfDv02RcUKxZCpocN0kqIquuWBgaGXj3/pnnbsPIGH7kKGHviQ==",
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/@openmouse/protocol/-/protocol-0.22.0.tgz",
+      "integrity": "sha512-b5gwx0Ot1QOfyfYD7RkMUBRVKtT51AJO3xdyTTOqn/tCIF6bf+byPxewziTlPb2LUVBgzLB4S0CVG7FdQAglfA==",
       "engines": {
         "node": ">=20"
       }
diff --git a/package.json b/package.json
index 32355be9..eb86bb09 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@openmouse/protocol": "0.19.0",
+    "@openmouse/protocol": "0.22.0",
     "lucide-react": "^1.43.0",
     "preact": "^10.29.8"
   },
diff --git a/public/devices/README.md b/public/devices/README.md
index 9bdf12d7..9901283e 100644
--- a/public/devices/README.md
+++ b/public/devices/README.md
@@ -160,6 +160,12 @@ trusted.
 4. Keep this note as provenance. Vendor product art — treat as a request
    pending licensing review.
 
+`noir-m2-nex.png` is reserved for the name-fallback mapping for Noir Gear's
+M2-NEX. A local render from the vendor configurator may be used for development
+previews, but it is deliberately not committed here. Before publishing the
+asset, Noir Gear must confirm redistribution rights or OpenMouse should use a
+maintainer-created silhouette instead.
+
 `delux-m800-mini.png` — the name-fallback mapping in `src/ui/device-images.ts`
 is in place (keyed on reported names like "Delux M800 Mini", "Delux M800 Pro",
 "Delux M800 Mini (Wireless)"). The render was supplied from Delux's official
diff --git a/src/app/OverviewPage.tsx b/src/app/OverviewPage.tsx
index 4eb74fbb..326df2f6 100644
--- a/src/app/OverviewPage.tsx
+++ b/src/app/OverviewPage.tsx
@@ -4,6 +4,7 @@ import {
   Clock,
   Gauge,
   ImageUp,
+  Keyboard,
   Layers,
   Lightbulb,
   MousePointerClick,
@@ -40,17 +41,19 @@ import {
   ProcessingCard,
   RazerButtonCard,
   ButtonMappingCard,
+  KsnakeMacroCard,
   PowerModeCard,
   OnboardProfileCard,
   PulsarProCard,
   SignalCard,
   DongleLedCard,
   SleepCard,
+  KsnakeScrollCard,
   DpiLightingCard,
 } from "./cards/AdvancedCards";
 import { cardAvailability } from "./cards/availability";
 import { TeevolutionProfileCard } from "./cards/teevolution/ProfileCard";
-import { deviceImage, isUnknownDevice, showcaseDeviceImageUrls } from "../ui/device-images";
+import { deviceImage, deviceImageFilename, isUnknownDevice, showcaseDeviceImageUrls } from "../ui/device-images";
 import { BatteryIcon } from "./ui";
 import { availableWorkspaceTab, availableWorkspaceTabs } from "./workspace-tabs";
 
@@ -63,6 +66,7 @@ const TAB_ICON: Record<WorkspaceTab, LucideIcon> = {
   performance: BarChart3,
   lighting: Lightbulb,
   buttons: MousePointerClick,
+  macro: Keyboard,
   profiles: Layers,
   advanced: Settings2,
 };
@@ -72,21 +76,27 @@ export function TabIcon({ tab }: { tab: WorkspaceTab }): ReactNode {
   return <Icon size={13} strokeWidth={1.8} aria-hidden="true" />;
 }
 
-interface DiagramAnnotation {
-  key: string;
-  side: "left" | "right";
-  label: string;
-  value: string;
-  anchorX: number; // fraction of the artwork width
-  anchorY: number; // fraction of the artwork height
-  chipY: number;   // vertical fraction where the label chip sits
+interface ButtonMarkerPosition {
+  x: number;
+  y: number;
 }
 
-// Leader-line geometry, in artwork fractions. The chip text is inset this far
-// from the box edge and the line's horizontal tick stops just short of it, so
-// no line ever crosses the label text.
-const DIAGRAM_RAIL = { left: 0.09, right: 0.91 };   // vertical trunk column
-const DIAGRAM_TICK = { left: 0, right: 100 };       // tick end at canvas edge
+// The M2-NEX artwork is a fixed top-down render, so these coordinates keep
+// the remap numbers attached to the physical controls instead of making a
+// generic layout guess for every other mouse shape.
+const M2_NEX_BUTTON_MARKER_POSITIONS: Readonly<Record<string, ButtonMarkerPosition>> = {
+  left: { x: 0.23, y: 0.27 },
+  right: { x: 0.77, y: 0.27 },
+  middle: { x: 0.5, y: 0.19 },
+  forward: { x: 0.045, y: 0.39 },
+  backward: { x: 0.045, y: 0.51 },
+  "scroll up": { x: 0.62, y: 0.14 },
+  "scroll down": { x: 0.62, y: 0.29 },
+};
+
+function m2NexButtonMarkerPosition(button: string): ButtonMarkerPosition | null {
+  return M2_NEX_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).
@@ -111,81 +121,18 @@ function DeviceShowcase({ snapshot }: {
   );
   const artworkIssueHref = `${ARTWORK_ISSUE_URL}${status.name ? `&title=${encodeURIComponent(`Artwork request: ${status.name}`)}` : ""}`;
 
-  const annotations: DiagramAnnotation[] = ([
-    {
-      key: "connection",
-      side: "left",
-      label: "Connection",
-      value: status.connectionType ? connectionText(locale, status.connectionType) : "",
-      anchorX: 0.38,
-      anchorY: 0.3,
-      chipY: 0.2,
-    },
-    {
-      key: "dpi",
-      side: "left",
-      label: "DPI",
-      value: status.dpi > 0 ? status.dpi.toLocaleString() : "",
-      anchorX: 0.42,
-      anchorY: 0.52,
-      chipY: 0.5,
-    },
-    {
-      key: "battery",
-      side: "left",
-      label: "Battery",
-      value: status.batteryPercent != null ? `${status.batteryPercent}%` : "",
-      anchorX: 0.36,
-      anchorY: 0.72,
-      chipY: 0.8,
-    },
-    {
-      key: "polling",
-      side: "right",
-      label: "Polling rate",
-      value: status.pollingRateHz ? `${status.pollingRateHz.toLocaleString()} Hz` : "",
-      anchorX: 0.64,
-      anchorY: 0.36,
-      chipY: 0.35,
-    },
-    {
-      key: "profile",
-      side: "right",
-      label: "Profile",
-      value: status.activeProfile != null ? `Profile ${status.activeProfile}` : "",
-      anchorX: 0.66,
-      anchorY: 0.68,
-      chipY: 0.65,
-    },
-  ] as DiagramAnnotation[]).filter((annotation) => annotation.value !== "");
-
-  const leftAnnotations = annotations.filter((annotation) => annotation.side === "left");
-  const rightAnnotations = annotations.filter((annotation) => annotation.side === "right");
-
   return (
     <div className="device-showcase">
       <h1 className="device-showcase-name">{status.name}</h1>
       <p className="device-showcase-brand">{status.brand}</p>
       <div className="device-diagram">
-        <div className="device-diagram-rail device-diagram-rail--left">
-          {leftAnnotations.map((annotation, index) => (
-            <div
-              key={annotation.key}
-              className="device-diagram-chip device-diagram-chip--left"
-              style={{ top: `${annotation.chipY * 100}%`, animationDelay: `${0.3 + index * 0.06}s` }}
-            >
-              <span className="device-diagram-chip-label">{annotation.label}</span>
-              <span className="device-diagram-chip-value">{annotation.value}</span>
-            </div>
-          ))}
-        </div>
         <div
           className="device-diagram-canvas"
           style={{
             aspectRatio: artSize ? `${artSize.w} / ${artSize.h}` : "1 / 1",
             width: artSize ? `min(100%, ${Math.round((artSize.w / artSize.h) * 56)}vh)` : "min(100%, 480px)",
           }}
-        >
+          >
           <div className="device-diagram-art">
             {image ? (
               <img
@@ -205,47 +152,55 @@ function DeviceShowcase({ snapshot }: {
               />
             ) : null}
           </div>
-          {annotations.length > 0 ? (
-            <svg className="device-diagram-lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
-              {annotations.map((annotation) => {
-                const x = annotation.anchorX * 100;
-                const y = annotation.anchorY * 100;
-                const cy = annotation.chipY * 100;
-                const railX = annotation.side === "left" ? DIAGRAM_RAIL.left * 100 : DIAGRAM_RAIL.right * 100;
-                const tickX = annotation.side === "left" ? DIAGRAM_TICK.left : DIAGRAM_TICK.right;
-                return (
-                  <g key={annotation.key}>
-                    <polyline
-                      points={`${x},${y} ${railX},${y} ${railX},${cy} ${tickX},${cy}`}
-                      vectorEffect="non-scaling-stroke"
-                    />
-                  </g>
-                );
-              })}
-            </svg>
-          ) : null}
-          {annotations.map((annotation) => (
-            <span
-              key={`${annotation.key}-dot`}
-              className="device-diagram-dot"
-              style={{ left: `${annotation.anchorX * 100}%`, top: `${annotation.anchorY * 100}%` }}
-              aria-hidden="true"
-            />
-          ))}
-        </div>
-        <div className="device-diagram-rail device-diagram-rail--right">
-          {rightAnnotations.map((annotation, index) => (
-            <div
-              key={annotation.key}
-              className="device-diagram-chip device-diagram-chip--right"
-              style={{ top: `${annotation.chipY * 100}%`, animationDelay: `${0.3 + index * 0.06}s` }}
-            >
-              <span className="device-diagram-chip-label">{annotation.label}</span>
-              <span className="device-diagram-chip-value">{annotation.value}</span>
-            </div>
-          ))}
         </div>
       </div>
+      <div className="device-showcase-status-pill" aria-label="Device status">
+        <span className="device-showcase-status-primary">
+          <span className="device-showcase-dot" aria-hidden="true" />
+          {t(locale, "side.connected")}
+        </span>
+        {status.connectionType ? (
+          <>
+            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
+            <span className="device-showcase-status-muted">{connectionText(locale, status.connectionType)}</span>
+          </>
+        ) : null}
+        {status.dpi > 0 ? (
+          <>
+            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
+            <span className="device-showcase-status-item">
+              <span className="device-showcase-status-label">DPI</span>
+              <span className="device-showcase-status-value">{status.dpi.toLocaleString()}</span>
+            </span>
+          </>
+        ) : null}
+        {status.batteryPercent !== null ? (
+          <>
+            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
+            <span className="device-showcase-status-item">
+              <BatteryIcon percent={status.batteryPercent} state={status.batteryState} />
+              <span className="device-showcase-status-value">{status.batteryPercent}%</span>
+            </span>
+          </>
+        ) : null}
+        {status.pollingRateHz > 0 ? (
+          <>
+            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
+            <span className="device-showcase-status-item">
+              <span className="device-showcase-status-value">{status.pollingRateHz.toLocaleString()} Hz</span>
+            </span>
+          </>
+        ) : null}
+        {status.activeProfile != null ? (
+          <>
+            <span className="device-showcase-status-separator" aria-hidden="true">·</span>
+            <span className="device-showcase-status-item">
+              <span className="device-showcase-status-label">Profile</span>
+              <span className="device-showcase-status-value">{status.activeProfile}</span>
+            </span>
+          </>
+        ) : null}
+      </div>
       {needsArtwork ? (
         <a
           className="artwork-upload-trigger"
@@ -261,16 +216,101 @@ 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;
+  const profile = snapshot.m2nexProfiles[snapshot.activeM2NexProfile];
+  if (!profile) return null;
+  const applyDisabled = snapshot.settingInProgress || snapshot.pending.count > 0;
+  return (
+    <section
+      id="m2nex-profile-overview"
+      className="m2nex-profile-overview"
+      aria-label={t(locale, "m2nex.controls")}
+    >
+      <div className="m2nex-profile-overview-title">
+        <span>{t(locale, "m2nex.overline")}</span>
+        <strong>{t(locale, "m2nex.label")}</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")}
+          value={snapshot.activeM2NexProfile}
+          disabled={snapshot.settingInProgress || snapshot.pending.busy}
+          onChange={(event) => control.selectM2NexProfile(Number(event.currentTarget.value))}
+        >
+          {snapshot.m2nexProfiles.map((entry, index) => (
+            <option key={entry.id} value={index}>{entry.name}</option>
+          ))}
+        </select>
+      </label>
+      <span className={`m2nex-profile-overview-state${snapshot.m2nexProfileDirty ? " is-dirty" : ""}`}>
+        {snapshot.m2nexProfileDirty ? t(locale, "m2nex.pending") : t(locale, "m2nex.saved")}
+      </span>
+      <div className="m2nex-profile-overview-actions">
+        <button
+          className="m2nex-profile-overview-apply"
+          type="button"
+          disabled={applyDisabled}
+          onClick={() => void control.applyM2NexProfile()}
+        >
+          {t(locale, "m2nex.apply")}
+        </button>
+        <button
+          type="button"
+          disabled={snapshot.settingInProgress}
+          onClick={control.saveCurrentM2NexProfile}
+        >
+          {t(locale, "m2nex.save")}
+        </button>
+      </div>
+    </section>
+  );
+}
+
 export function DeviceShowcaseSidebar({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const status = snapshot.status;
   if (!status) return null;
   const locale = snapshot.preferences.locale;
   const image = snapshot.deviceArtwork;
+  const showButtonMarkers = snapshot.workspaceTab === "buttons"
+    && status.brand === "Noir Gear"
+    && status.name === "M2-NEX"
+    && status.buttonMappings != null;
 
   return (
     <div className="showcase-sidebar">
       <div className="showcase-sidebar-visual">
-        {image ? (
+        {image ? showButtonMarkers ? (
+          <div className="button-map-showcase-art">
+            <img
+              className="showcase-sidebar-image button-map-showcase-image"
+              src={image}
+              alt={status.name}
+              onError={(event) => {
+                event.currentTarget.onerror = null;
+                event.currentTarget.src = deviceImage(null);
+              }}
+            />
+            <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>
+                );
+              })}
+            </div>
+          </div>
+        ) : (
           <img
             className="showcase-sidebar-image"
             src={image}
@@ -392,6 +432,7 @@ function OverviewContent({ snapshot }: {
   const powerOverview = status.ui?.powerOverview === true;
   return (
     <>
+      <M2NexProfileOverview snapshot={snapshot} />
       <DeviceShowcase snapshot={snapshot} />
       {powerOverview && (has.teevolutionDpiLighting || has.sleep) ? (
         <section id="power-overview-settings" className="settings-grid device-data" aria-label="Power settings">
@@ -454,6 +495,12 @@ export function Workspace({
     show(has.atkButtons, ["buttons"]) ? <AtkButtonCard key="atk-buttons" snapshot={snapshot} /> : null,
     show(has.buttonMapping && !snapshot.traits.teevolution, ["buttons"])
       ? <ButtonMappingCard key="button-mapping" snapshot={snapshot} /> : null,
+    show(has.ksnakeScroll, ["buttons"])
+      ? <KsnakeScrollCard key="ksnake-scroll" snapshot={snapshot} /> : null,
+  ].filter((node) => node !== null);
+
+  const macro = [
+    show(has.ksnakeMacros, ["macro"]) ? <KsnakeMacroCard key="ksnake-macros" snapshot={snapshot} /> : null,
   ].filter((node) => node !== null);
 
   const advanced = [
@@ -491,7 +538,7 @@ export function Workspace({
   const showDiagnostics = device && on(tab, ["advanced"]);
   const showOverview = on(tab, ["overview"]);
 
-  const anyPanel = performance.length > 0 || advanced.length > 0 || lighting.length > 0
+  const anyPanel = performance.length > 0 || macro.length > 0 || advanced.length > 0 || lighting.length > 0
     || showProfiles || showTeevolutionProfiles || showNapeLayers || showSuperstrike
     || showLogitechDetails || showMxMaster || showDiagnostics || showOverview;
 
@@ -542,6 +589,19 @@ export function Workspace({
         </section>
       ) : null}
 
+      {macro.length > 0 ? (
+        <section
+          id="macro-settings"
+          className="settings-grid device-data"
+          data-workspace-host
+          role="tabpanel"
+          aria-labelledby="workspace-tab-macro"
+          aria-label="Macro settings"
+        >
+          {macro}
+        </section>
+      ) : null}
+
       {lighting.length > 0 ? (
         <section
           id="lighting-settings"
@@ -613,6 +673,10 @@ function DeviceListView({ snapshot }: { snapshot: ControlSnapshot }): ReactNode
               const liveStatus = connected ? snapshot.deviceStatus : null;
               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"
+                ? " device-tile-image-is-portrait"
+                : "";
               return (
                 <li
                 className={`device-tile${connected ? " is-connected" : ""}${device.kind === "keyboard" ? " is-keyboard" : ""}`}
@@ -652,8 +716,8 @@ function DeviceListView({ snapshot }: { snapshot: ControlSnapshot }): ReactNode
                   </div>
                   <div className="device-tile-visual">
                     <img
-                      className="device-tile-image"
-                      src={deviceImage({ vendorId: device.vendorId, productId: device.productId } as HIDDevice, device.name)}
+                      className={`device-tile-image${imageClass}`}
+                      src={imageSrc}
                       alt={device.name}
                       loading="lazy"
                       draggable={false}
@@ -702,7 +766,9 @@ export function OverviewPage({
   const { preferences } = snapshot;
   const locale = preferences.locale;
 
-  const tabs = availableWorkspaceTabs(status !== null, cardAvailability(snapshot));
+  const tabs = availableWorkspaceTabs(status !== null, cardAvailability(snapshot), {
+    hideLighting: status?.brand === "Noir Gear" && status.name === "M2-NEX",
+  });
   const workspaceTab = availableWorkspaceTab(snapshot.workspaceTab, tabs);
   const workspaceSnapshot = workspaceTab === snapshot.workspaceTab
     ? snapshot
diff --git a/src/app/cards/AdvancedCards.tsx b/src/app/cards/AdvancedCards.tsx
index 52bfad59..8fe2ed24 100644
--- a/src/app/cards/AdvancedCards.tsx
+++ b/src/app/cards/AdvancedCards.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useState, type ReactNode } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Plus, Save, Trash2 } from "lucide-react";
 import {
   EGG_BUTTON_MAPPINGS,
   EGG_BUTTON_NAMES,
@@ -18,6 +19,7 @@ import {
   type RazerToggleControl,
 } from "@openmouse/protocol/razer";
 import { teevolutionSensorModeUi } from "@openmouse/protocol/teevolution";
+import type { KsnakeMacroProfile, KsnakeMacroStep } from "@openmouse/protocol/ksnake";
 import { isPulsarProProtocol } from "../../device/traits";
 import * as control from "../../device/controller";
 import { PULSAR_SLEEP_OPTIONS } from "../../device/controller";
@@ -286,6 +288,44 @@ export function SleepCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNod
   );
 }
 
+/** K-snake stores the wheel direction in its persistent config block. */
+export function KsnakeScrollCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const status = snapshot.status;
+  const locale = snapshot.preferences.locale;
+  if (status?.ui?.family !== "ksnake" || status.scrollDirection == null) return null;
+  const staged = snapshot.pending.keys.includes("ksnake-scroll-direction");
+  return (
+    <article id="ksnake-scroll-settings" className={`setting-card${staged ? " is-staged" : ""}`}>
+      <div className="setting-heading compact">
+        <div><p>{t(locale, "adv.scrollWheel")}</p><h2>{t(locale, "adv.scrollDirection")}</h2></div>
+      </div>
+      <div className="button-map-list">
+        <label className="button-map-row" htmlFor="ksnake-scroll-direction">
+          <span className="button-map-control">
+            <span className="button-map-index" aria-hidden="true">W</span>
+            <span className="button-map-name">{t(locale, "adv.scrollWheel")}</span>
+          </span>
+          <span className="button-map-connector" aria-hidden="true">to</span>
+          <span className="button-map-select-wrap">
+            <select
+              id="ksnake-scroll-direction"
+              value={status.scrollDirection}
+              disabled={snapshot.settingsPending}
+              onChange={(event) => control.applyKsnakeScrollDirection(
+                event.currentTarget.value as NonNullable<typeof status.scrollDirection>,
+              )}
+            >
+              <option value="Forward">{t(locale, "conn.forward")}</option>
+              <option value="Reverse">{t(locale, "conn.reverse")}</option>
+            </select>
+          </span>
+        </label>
+      </div>
+      <small className="setting-note">{t(locale, "adv.scrollStored")}</small>
+    </article>
+  );
+}
+
 export function LowPowerCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
   const status = snapshot.status;
   const locale = snapshot.preferences.locale;
@@ -1342,6 +1382,554 @@ export function OnboardProfileCard({ snapshot }: { snapshot: ControlSnapshot }):
   );
 }
 
+const KSNAKE_MACRO_TYPES: ReadonlyArray<readonly [KsnakeMacroStep["type"], string]> = [
+  [1, "Modifier"],
+  [2, "Keyboard"],
+  [3, "Mouse"],
+];
+
+const KSNAKE_MACRO_ACTIONS: ReadonlyArray<readonly [KsnakeMacroStep["action"], string]> = [
+  [1, "Press"],
+  [2, "Release"],
+];
+
+const KSNAKE_KEY_LABELS: Readonly<Record<number, string>> = {
+  0: "None",
+  4: "A", 5: "B", 6: "C", 7: "D", 8: "E", 9: "F", 10: "G", 11: "H", 12: "I", 13: "J",
+  14: "K", 15: "L", 16: "M", 17: "N", 18: "O", 19: "P", 20: "Q", 21: "R", 22: "S", 23: "T",
+  24: "U", 25: "V", 26: "W", 27: "X", 28: "Y", 29: "Z",
+  40: "Enter", 41: "Escape", 42: "Backspace", 43: "Tab", 44: "Space",
+  79: "Right", 80: "Left", 81: "Down", 82: "Up",
+  58: "F1", 59: "F2", 60: "F3", 61: "F4", 62: "F5", 63: "F6",
+  64: "F7", 65: "F8", 66: "F9", 67: "F10", 68: "F11", 69: "F12",
+};
+
+const KSNAKE_MOUSE_LABELS: Readonly<Record<number, string>> = {
+  0: "None",
+  1: "Left button",
+  2: "Right button",
+  4: "Middle button",
+  8: "Back button",
+  16: "Forward button",
+};
+
+const KSNAKE_MODIFIER_LABELS: Readonly<Record<number, string>> = {
+  1: "Left Ctrl", 2: "Left Shift", 4: "Left Alt", 8: "Left GUI",
+  16: "Right Ctrl", 32: "Right Shift", 64: "Right Alt", 128: "Right GUI",
+};
+
+const KSNAKE_MODIFIER_BY_EVENT_CODE: Readonly<Record<string, number>> = {
+  ControlLeft: 1,
+  ShiftLeft: 2,
+  AltLeft: 4,
+  MetaLeft: 8,
+  OSLeft: 8,
+  ControlRight: 16,
+  ShiftRight: 32,
+  AltRight: 64,
+  MetaRight: 128,
+  OSRight: 128,
+};
+
+const KSNAKE_KEY_CODE_BY_EVENT_CODE: Readonly<Record<string, number>> = {
+  ...Object.fromEntries("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").map((letter, index) => [`Key${letter}`, 4 + index])),
+  ...Object.fromEntries(["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"].map((digit, index) => [`Digit${digit}`, 30 + index])),
+  Enter: 40,
+  Escape: 41,
+  Backspace: 42,
+  Tab: 43,
+  Space: 44,
+  Minus: 45,
+  Equal: 46,
+  BracketLeft: 47,
+  BracketRight: 48,
+  Backslash: 49,
+  Semicolon: 51,
+  Quote: 52,
+  Backquote: 53,
+  Comma: 54,
+  Period: 55,
+  Slash: 56,
+  CapsLock: 57,
+  ...Object.fromEntries(Array.from({ length: 12 }, (_, index) => [`F${index + 1}`, 58 + index])),
+  PrintScreen: 70,
+  ScrollLock: 71,
+  Pause: 72,
+  Insert: 73,
+  Home: 74,
+  PageUp: 75,
+  Delete: 76,
+  End: 77,
+  PageDown: 78,
+  ArrowRight: 79,
+  ArrowLeft: 80,
+  ArrowDown: 81,
+  ArrowUp: 82,
+  NumLock: 83,
+  NumpadDivide: 84,
+  NumpadMultiply: 85,
+  NumpadSubtract: 86,
+  NumpadAdd: 87,
+  NumpadEnter: 88,
+  ...Object.fromEntries(Array.from({ length: 9 }, (_, index) => [`Numpad${index + 1}`, 89 + index])),
+  Numpad0: 98,
+  NumpadDecimal: 99,
+};
+
+const KSNAKE_MOUSE_CODE_BY_BUTTON: Readonly<Record<number, number>> = {
+  0: 1,
+  1: 4,
+  2: 2,
+  3: 8,
+  4: 16,
+};
+
+function ksnakeMacroCodeLabel(type: KsnakeMacroStep["type"], code: number): string {
+  if (type === 1) return KSNAKE_MODIFIER_LABELS[code] ?? `Modifier mask ${code}`;
+  if (type === 2) return KSNAKE_KEY_LABELS[code] ?? `Keyboard code ${code}`;
+  return KSNAKE_MOUSE_LABELS[code] ?? `Mouse code ${code}`;
+}
+
+function ksnakeMacroStepFromKeyboard(
+  event: KeyboardEvent,
+  action: KsnakeMacroStep["action"],
+): KsnakeMacroStep | null {
+  const modifier = KSNAKE_MODIFIER_BY_EVENT_CODE[event.code];
+  if (modifier !== undefined) return { type: 1, action, delayMs: 0, code: modifier };
+  const code = KSNAKE_KEY_CODE_BY_EVENT_CODE[event.code];
+  return code === undefined ? null : { type: 2, action, delayMs: 0, code };
+}
+
+function ksnakeMacroStepFromMouse(
+  button: number,
+  action: KsnakeMacroStep["action"],
+): KsnakeMacroStep | null {
+  const code = KSNAKE_MOUSE_CODE_BY_BUTTON[button];
+  return code === undefined ? null : { type: 3, action, delayMs: 0, code };
+}
+
+function ksnakeMacroStepLabel(step: KsnakeMacroStep): string {
+  return `${step.action === 1 ? "Press" : "Release"} · ${ksnakeMacroCodeLabel(step.type, step.code)}`;
+}
+
+type KsnakeMacroTimingMode = "no-delay" | "recorded" | "fixed";
+
+function applyKsnakeMacroTiming(
+  steps: readonly KsnakeMacroStep[],
+  timingMode: KsnakeMacroTimingMode,
+  fixedDelayMs: number,
+): KsnakeMacroStep[] {
+  return steps.map((step) => ({
+    ...step,
+    delayMs: timingMode === "no-delay"
+      ? 0
+      : timingMode === "fixed"
+        ? fixedDelayMs
+        : step.delayMs,
+  }));
+}
+
+function cloneKsnakeMacroProfile(profile: KsnakeMacroProfile | undefined): KsnakeMacroProfile {
+  return { steps: (profile?.steps ?? []).map((step) => ({ ...step })) };
+}
+
+/**
+ * Onboard macro editor for the shared K-snake/M2-NEX protocol. The physical
+ * button assignment remains in ButtonMappingCard; this card edits the macro
+ * slot that an assignment points at.
+ */
+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;
+  // 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.
+  const profiles = snapshot.ksnakeMacros ?? null;
+  const [slot, setSlot] = useState(0);
+  const [draft, setDraft] = useState<KsnakeMacroProfile | null>(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [timingMode, setTimingMode] = useState<KsnakeMacroTimingMode>("no-delay");
+  const [fixedDelayMs, setFixedDelayMs] = useState(10);
+  const [recordedSteps, setRecordedSteps] = useState<KsnakeMacroStep[]>([]);
+  const recordedStepsRef = useRef<KsnakeMacroStep[]>([]);
+  const recordingOriginalStepsRef = useRef<KsnakeMacroStep[] | null>(null);
+  const recordingClockRef = useRef<number | null>(null);
+  const staged = snapshot.pending.keys.includes("ksnake-macros");
+  const disabled = snapshot.settingInProgress || snapshot.pending.busy;
+  const controlsDisabled = disabled || isRecording;
+
+  useEffect(() => {
+    if (profiles) setDraft(cloneKsnakeMacroProfile(profiles[slot]));
+  }, [profiles, slot]);
+
+  useEffect(() => {
+    if (macroCapable
+      && profiles === null
+      && !snapshot.ksnakeMacrosLoading
+      && snapshot.ksnakeMacrosError === null) {
+      control.loadKsnakeMacros();
+    }
+  }, [macroCapable, profiles, snapshot.ksnakeMacrosLoading, snapshot.ksnakeMacrosError]);
+
+  const appendRecordedStep = (step: KsnakeMacroStep): void => {
+    const now = performance.now();
+    const previous = recordingClockRef.current;
+    recordingClockRef.current = now;
+    const delayMs = previous === null
+      ? 0
+      : Math.min(65535, Math.max(0, Math.round(now - previous)));
+    const next = [...recordedStepsRef.current];
+    // M2-NEX interprets the delay stored on an event as the pause after that
+    // event. The interval measured before the new event therefore belongs to
+    // the previously recorded step, not to the new step itself.
+    if (next.length > 0 && previous !== null) {
+      next[next.length - 1] = { ...next[next.length - 1], delayMs };
+    }
+    next.push({ ...step, delayMs: 0 });
+    recordedStepsRef.current = next;
+    setRecordedSteps(next);
+  };
+
+  const finishRecording = (): void => {
+    const next = applyKsnakeMacroTiming(recordedStepsRef.current, timingMode, fixedDelayMs);
+    setIsRecording(false);
+    setDraft({ steps: next });
+    setRecordedSteps([]);
+    recordedStepsRef.current = [];
+    recordingOriginalStepsRef.current = null;
+    recordingClockRef.current = null;
+  };
+
+  const cancelRecording = (): void => {
+    const original = recordingOriginalStepsRef.current ?? [];
+    setIsRecording(false);
+    setDraft({ steps: original.map((step) => ({ ...step })) });
+    setRecordedSteps([]);
+    recordedStepsRef.current = [];
+    recordingOriginalStepsRef.current = null;
+    recordingClockRef.current = null;
+  };
+
+  const changeTimingMode = (next: KsnakeMacroTimingMode): void => {
+    setTimingMode(next);
+    // Apply the selected preset to an existing draft as well, so switching to
+    // Fast or Fixed does not require recording the same macro again.
+    if (!isRecording && next !== "recorded" && draft) {
+      setDraft({ steps: applyKsnakeMacroTiming(draft.steps, next, fixedDelayMs) });
+    }
+  };
+
+  const changeFixedDelay = (value: string): void => {
+    const next = Math.min(65535, Math.max(0, Number(value) || 0));
+    setFixedDelayMs(next);
+    if (!isRecording && timingMode === "fixed" && draft) {
+      setDraft({ steps: applyKsnakeMacroTiming(draft.steps, "fixed", next) });
+    }
+  };
+
+  const startRecording = (): void => {
+    if (disabled || isRecording || !draft) return;
+    recordingOriginalStepsRef.current = draft.steps.map((step) => ({ ...step }));
+    recordedStepsRef.current = [];
+    setRecordedSteps([]);
+    recordingClockRef.current = performance.now();
+    setIsRecording(true);
+  };
+
+  useEffect(() => {
+    if (!isRecording) return undefined;
+
+    const isRecorderControl = (target: EventTarget | null): boolean => (
+      target instanceof Element && Boolean(target.closest("[data-macro-recorder-control]"))
+    );
+
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (isRecorderControl(event.target)) return;
+      if (event.code === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        finishRecording();
+        return;
+      }
+      if (event.repeat) return;
+      const step = ksnakeMacroStepFromKeyboard(event, 1);
+      if (!step) return;
+      event.preventDefault();
+      event.stopPropagation();
+      appendRecordedStep(step);
+    };
+
+    const onKeyUp = (event: KeyboardEvent): void => {
+      if (isRecorderControl(event.target)) return;
+      const step = ksnakeMacroStepFromKeyboard(event, 2);
+      if (!step) return;
+      event.preventDefault();
+      event.stopPropagation();
+      appendRecordedStep(step);
+    };
+
+    const onMouseDown = (event: MouseEvent): void => {
+      if (isRecorderControl(event.target)) return;
+      const step = ksnakeMacroStepFromMouse(event.button, 1);
+      if (!step) return;
+      event.preventDefault();
+      event.stopPropagation();
+      appendRecordedStep(step);
+    };
+
+    const onMouseUp = (event: MouseEvent): void => {
+      if (isRecorderControl(event.target)) return;
+      const step = ksnakeMacroStepFromMouse(event.button, 2);
+      if (!step) return;
+      event.preventDefault();
+      event.stopPropagation();
+      appendRecordedStep(step);
+    };
+
+    const onContextMenu = (event: MouseEvent): void => {
+      if (isRecorderControl(event.target)) return;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    window.addEventListener("keydown", onKeyDown, true);
+    window.addEventListener("keyup", onKeyUp, true);
+    window.addEventListener("mousedown", onMouseDown, true);
+    window.addEventListener("mouseup", onMouseUp, true);
+    window.addEventListener("contextmenu", onContextMenu, true);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown, true);
+      window.removeEventListener("keyup", onKeyUp, true);
+      window.removeEventListener("mousedown", onMouseDown, true);
+      window.removeEventListener("mouseup", onMouseUp, true);
+      window.removeEventListener("contextmenu", onContextMenu, true);
+    };
+  }, [isRecording]);
+
+  if (!status || !macroCapable) return null;
+
+  const updateStep = (index: number, change: Partial<KsnakeMacroStep>): void => {
+    setDraft((current) => current
+      ? { steps: current.steps.map((step, stepIndex) => stepIndex === index ? { ...step, ...change } : step) }
+      : current);
+  };
+  const addStep = (): void => {
+    setDraft((current) => current
+      ? { steps: [...current.steps, { type: 2, action: 1, delayMs: 0, code: 0 }] }
+      : current);
+  };
+  const removeStep = (index: number): void => {
+    setDraft((current) => current
+      ? { steps: current.steps.filter((_, stepIndex) => stepIndex !== index) }
+      : current);
+  };
+
+  if (snapshot.ksnakeMacrosLoading) {
+    return (
+      <article id="ksnake-macro-settings" className="setting-card">
+        <div className="setting-heading compact"><div><p>{t(locale, "macro.overline")}</p><h2>{t(locale, "macro.build")}</h2></div></div>
+        <p className="field-note">{t(locale, "macro.loading")}</p>
+      </article>
+    );
+  }
+
+  if (snapshot.ksnakeMacrosError !== null) {
+    return (
+      <article id="ksnake-macro-settings" className="setting-card">
+        <div className="setting-heading compact"><div><p>{t(locale, "macro.overline")}</p><h2>{t(locale, "macro.build")}</h2></div></div>
+        <p className="field-note">{snapshot.ksnakeMacrosError}</p>
+        <div className="setting-action"><button type="button" onClick={() => control.loadKsnakeMacros()}>{t(locale, "set.retry")}</button></div>
+      </article>
+    );
+  }
+
+  if (!profiles || !draft) return null;
+  return (
+    <article id="ksnake-macro-settings" className={`setting-card${staged ? " is-staged" : ""}`}>
+      <div className="setting-heading ksnake-macro-heading">
+        <div>
+          <p>{t(locale, "macro.overline")}</p>
+          <h2>{t(locale, "macro.build")}</h2>
+          <p className="ksnake-macro-lead">{t(locale, "macro.lead")}</p>
+        </div>
+      </div>
+      <p className="ksnake-macro-notice">
+        {isM2Nex ? t(locale, "macro.noticeM2nex") : t(locale, "macro.notice")}
+      </p>
+      <label className="ksnake-macro-slot-picker">
+        <span>{t(locale, "macro.slotLabel")}</span>
+        <select value={slot} disabled={controlsDisabled} onChange={(event) => setSlot(Number(event.currentTarget.value))}>
+          {profiles.map((profile, index) => {
+            const stepCount = index === slot
+              ? (isRecording ? recordedSteps.length : draft.steps.length)
+              : profile.steps.length;
+            return <option key={index} value={index}>{t(locale, "macro.option")} {index + 1}{stepCount ? ` · ${tp(locale, "macro.steps", { n: stepCount })}` : ` · ${t(locale, "macro.empty")}`}</option>;
+          })}
+        </select>
+      </label>
+      <section className={`ksnake-macro-recorder${isRecording ? " is-recording" : ""}`} aria-live="polite">
+        <div className="ksnake-macro-recorder-status">
+          <span className="ksnake-macro-recorder-dot" aria-hidden="true" />
+          <div>
+            <strong>{isRecording ? t(locale, "macro.recording") : t(locale, "macro.addActions")}</strong>
+            <span>{isRecording
+              ? tp(locale, "macro.eventsHint", { n: recordedSteps.length })
+              : t(locale, "macro.recorderHint")}</span>
+          </div>
+        </div>
+        <div className="ksnake-macro-recorder-tools">
+          <label className="ksnake-macro-timing-picker">
+            <span>{t(locale, "macro.timing")}</span>
+            <select
+              value={timingMode}
+              disabled={disabled || isRecording}
+              data-macro-recorder-control
+              onChange={(event) => changeTimingMode(event.currentTarget.value as KsnakeMacroTimingMode)}
+            >
+              <option value="no-delay">{t(locale, "macro.timingFast")}</option>
+              <option value="recorded">{t(locale, "macro.timingRecorded")}</option>
+              <option value="fixed">{t(locale, "macro.timingFixed")}</option>
+            </select>
+          </label>
+          {timingMode === "fixed" ? (
+            <label className="ksnake-macro-fixed-delay-picker">
+              <span>{t(locale, "macro.delay")}</span>
+              <span className="ksnake-macro-fixed-delay-control">
+                <input
+                  type="number"
+                  min={0}
+                  max={65535}
+                  step={1}
+                  aria-label={t(locale, "macro.delayAria")}
+                  value={fixedDelayMs}
+                  disabled={disabled || isRecording}
+                  data-macro-recorder-control
+                  onChange={(event) => changeFixedDelay(event.currentTarget.value)}
+                />
+                <small>ms</small>
+              </span>
+            </label>
+          ) : null}
+          {isRecording ? (
+            <div className="ksnake-macro-recorder-actions">
+              <button className="ksnake-macro-stop" type="button" data-macro-recorder-control onClick={finishRecording}>{t(locale, "macro.stopRecording")}</button>
+              <button className="ksnake-macro-cancel" type="button" data-macro-recorder-control onClick={cancelRecording}>{t(locale, "set.cancel")}</button>
+            </div>
+          ) : (
+            <div className="ksnake-macro-recorder-actions">
+              <button className="ksnake-macro-record" type="button" data-macro-recorder-control onClick={startRecording} disabled={disabled}>{t(locale, "macro.recordInput")}</button>
+              <button className="ksnake-macro-manual-add" type="button" data-macro-recorder-control onClick={addStep} disabled={controlsDisabled}>
+                <Plus size={15} strokeWidth={2.2} aria-hidden="true" />
+                {t(locale, "macro.addManually")}
+              </button>
+            </div>
+          )}
+        </div>
+      </section>
+      {isRecording ? (
+        <div className="ksnake-macro-recording-list">
+          <div className="ksnake-macro-recording-list-heading">
+            <span>{t(locale, "macro.liveEvents")}</span>
+            <span>{tp(locale, "macro.events", { n: recordedSteps.length })}</span>
+          </div>
+          {recordedSteps.length === 0 ? (
+            <p className="ksnake-macro-recording-empty">{t(locale, "macro.recordingEmpty")}</p>
+          ) : (
+            <ol>
+              {recordedSteps.map((step, index) => (
+                <li key={`${slot}-recording-${index}`}>
+                  <span className="ksnake-macro-recording-step-number">{String(index + 1).padStart(2, "0")}</span>
+                  <strong>{ksnakeMacroStepLabel(step)}</strong>
+                  <small>{timingMode === "no-delay"
+                    ? "Fast"
+                    : timingMode === "fixed"
+                      ? `${fixedDelayMs} ms`
+                      : step.delayMs > 0
+                        ? `After +${step.delayMs} ms`
+                        : index === recordedSteps.length - 1 ? "Waiting…" : "Next"}</small>
+                </li>
+              ))}
+            </ol>
+          )}
+        </div>
+      ) : (
+        <div className="ksnake-macro-steps">
+          {draft.steps.length === 0 ? (
+            <div className="ksnake-macro-empty">
+              <strong>{t(locale, "macro.noActions")}</strong>
+              <span>{t(locale, "macro.noActionsHint")}</span>
+            </div>
+          ) : null}
+          {draft.steps.map((step, index) => (
+            <div className="ksnake-macro-step" key={`${slot}-${index}`}>
+              <span className="ksnake-macro-step-number">{String(index + 1).padStart(2, "0")}</span>
+              <label className="ksnake-macro-step-field">
+                <span>{t(locale, "macro.colInput")}</span>
+                <select
+                  aria-label={`Macro ${slot + 1} step ${index + 1} type`}
+                  value={step.type}
+                  disabled={controlsDisabled}
+                  onChange={(event) => updateStep(index, { type: Number(event.currentTarget.value) as KsnakeMacroStep["type"] })}
+                >
+                  {KSNAKE_MACRO_TYPES.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
+                </select>
+              </label>
+              <label className="ksnake-macro-step-field">
+                <span>{t(locale, "macro.colAction")}</span>
+                <select
+                  aria-label={`Macro ${slot + 1} step ${index + 1} action`}
+                  value={step.action}
+                  disabled={controlsDisabled}
+                  onChange={(event) => updateStep(index, { action: Number(event.currentTarget.value) as KsnakeMacroStep["action"] })}
+                >
+                  {KSNAKE_MACRO_ACTIONS.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
+                </select>
+              </label>
+              <label className="ksnake-macro-number ksnake-macro-code-field">{t(locale, "macro.colCode")}
+                <input
+                  type="number"
+                  min={0}
+                  max={255}
+                  value={step.code}
+                  disabled={controlsDisabled}
+                  onChange={(event) => updateStep(index, { code: Math.min(255, Math.max(0, Number(event.currentTarget.value) || 0)) })}
+                />
+              </label>
+              <label className="ksnake-macro-number ksnake-macro-delay-field">{t(locale, "macro.colDelay")}
+                <input
+                  type="number"
+                  min={0}
+                  max={65535}
+                  value={step.delayMs}
+                  disabled={controlsDisabled}
+                  onChange={(event) => updateStep(index, { delayMs: Math.min(65535, Math.max(0, Number(event.currentTarget.value) || 0)) })}
+                />
+              </label>
+              <small className="ksnake-macro-preview" title={ksnakeMacroCodeLabel(step.type, step.code)}>{ksnakeMacroCodeLabel(step.type, step.code)}</small>
+              <button type="button" className="ksnake-macro-delete" disabled={controlsDisabled} onClick={() => removeStep(index)} aria-label={tp(locale, "macro.removeStep", { n: index + 1 })} title={t(locale, "macro.removeStepTitle")}>
+                <Trash2 size={16} strokeWidth={2} aria-hidden="true" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+      <div className="setting-action ksnake-macro-actions">
+        <button className="ksnake-macro-save" type="button" onClick={() => control.applyKsnakeMacro(slot, draft)} disabled={controlsDisabled}>
+          <Save size={16} strokeWidth={2.2} aria-hidden="true" />
+          {t(locale, "macro.save")}
+        </button>
+        <button className="ksnake-macro-clear" type="button" onClick={() => setDraft({ steps: [] })} disabled={controlsDisabled || draft.steps.length === 0}>{t(locale, "macro.clearSlot")}</button>
+      </div>
+      <details className="ksnake-macro-help">
+        <summary>{t(locale, "macro.helpToggle")}</summary>
+        <p>{t(locale, "macro.helpBody")}</p>
+      </details>
+    </article>
+  );
+}
+
 /**
  * Button remapping for drivers that publish a plain name -> action map. Stays
  * brand-agnostic: the driver supplies both the button list and the vocabulary,
@@ -1352,32 +1940,58 @@ 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 selectedM2NexProfile = isM2Nex
+    ? snapshot.m2nexProfiles?.[snapshot.activeM2NexProfile]
+    : null;
+  const mappings = selectedM2NexProfile?.buttonMappings ?? status.buttonMappings;
   // fixedButtons lands with mouse-protocol#68; read defensively so this
   // builds against the published protocol until then.
   const fixed = new Set((status as unknown as { fixedButtons?: readonly string[] }).fixedButtons ?? []);
   return (
     <article id="button-mapping-settings" className="setting-card">
       <div className="setting-heading compact"><div><p>BUTTONS</p><h2>{t(locale, "map.remap")}</h2></div></div>
-      {Object.entries(status.buttonMappings).map(([button, assigned]) => (
-        <div key={button} className="field-label spaced">
-          <span>{button}</span>
-          <OptionMenu
-            id={`button-${button.toLowerCase()}-select`}
-            ariaLabel={`${button} ${t(locale, "map.remap")}`}
-            options={[
-              // A macro or an assignment this build cannot name still shows.
-              ...(!options.includes(assigned) ? [{ value: "", label: assigned, disabled: true }] : []),
-              ...options.map((option) => ({ value: option, label: option })),
-            ]}
-            value={options.includes(assigned) ? assigned : ""}
-            disabled={fixed.has(button)}
-            onChange={(next) => control.applyDeviceButtonMapping(button, next)}
-          />
-        </div>
-      ))}
-      <p className="field-note">
-        {t(locale, "map.defaultNote")}
-      </p>
+      <div className="button-map-list">
+        {Object.entries(status.buttonMappings).map(([button, deviceAssigned], index) => {
+          const assigned = mappings[button] ?? deviceAssigned;
+          const selectId = `button-${button.toLowerCase()}-select`;
+          const isFixed = fixed.has(button) || (isM2Nex && button === "Left");
+          return (
+            <label key={button} className={`button-map-row${isFixed ? " is-fixed" : ""}`} htmlFor={selectId}>
+              <span className="button-map-control">
+                <span className="button-map-index" aria-hidden="true">{String(index + 1).padStart(2, "0")}</span>
+                <span className="button-map-name">{button}</span>
+              </span>
+              <span className="button-map-connector" aria-hidden="true">to</span>
+              <span className="button-map-select-wrap">
+                <select
+                  id={selectId}
+                  value={options.includes(assigned) ? assigned : ""}
+                  disabled={isFixed}
+                  onChange={(event) => {
+                    // M2-NEX edits its selected local profile slot; every other
+                    // driver writes straight through to the device.
+                    if (selectedM2NexProfile) {
+                      control.updateM2NexProfileButton(button, event.currentTarget.value);
+                      return;
+                    }
+                    control.applyDeviceButtonMapping(button, event.currentTarget.value);
+                  }}
+                >
+                  {/* A macro or an assignment this build cannot name still shows. */}
+                  {!options.includes(assigned) && <option value="">{assigned}</option>}
+                  {options.map((option) => <option key={option} value={option}>{option}</option>)}
+                </select>
+              </span>
+            </label>
+          );
+        })}
+      </div>
+      {!selectedM2NexProfile ? (
+        <p className="field-note">{t(locale, "map.defaultNote")}</p>
+      ) : null}
     </article>
   );
 }
diff --git a/src/app/cards/DpiCard.tsx b/src/app/cards/DpiCard.tsx
index 1044d2c9..b7c1f69c 100644
--- a/src/app/cards/DpiCard.tsx
+++ b/src/app/cards/DpiCard.tsx
@@ -48,6 +48,7 @@ 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 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.
@@ -268,7 +269,7 @@ function DpiStageEditor({
   const enabledCount = rows.filter((row) => row.enabled).length;
 
   return (
-    <div id="dpi-stage-editor" className={`dpi-editor mode-${mode}`}>
+    <div id="dpi-stage-editor" className={`dpi-editor mode-${mode}${showM2NexStageColors ? " has-m2nex-stage-colors" : ""}`}>
       <div className="dpi-editor-bar">
         <span className="dpi-editor-bar-label">
           {t(locale, mode === "logitech" ? "dpi.slotsInUse" : mode === "stage" ? "dpi.stagesInUse" : "dpi.presetsInUse")}
@@ -284,8 +285,12 @@ function DpiStageEditor({
             ? compactIndex(index) === snapshot.dpiSlotPlan.defaultIndex
             : false;
           const highlighted = mode === "generic" ? row.enabled : mode === "stage" ? isActive === true : isStarting;
+          const stageColorClass = showM2NexStageColors ? ` m2nex-stage-${index + 1}` : "";
           return (
-            <div key={index} className={`dpi-editor-row${row.enabled ? "" : " is-off"}${highlighted ? " is-active" : ""}`}>
+            <div
+              key={index}
+              className={`dpi-editor-row${row.enabled ? "" : " is-off"}${highlighted ? " is-active" : ""}${stageColorClass}`}
+            >
               <label className="dpi-editor-check">
                 <input
                   type="checkbox"
@@ -305,7 +310,8 @@ function DpiStageEditor({
                 aria-pressed={highlighted}
                 onClick={() => setActive(index)}
               >
-                {index + 1}
+                {showM2NexStageColors ? <span className="dpi-editor-stage-swatch" aria-hidden="true" /> : null}
+                <span>{index + 1}</span>
               </button>
               <input
                 type="number"
@@ -546,4 +552,4 @@ export function DpiCard({ snapshot }: { snapshot: ControlSnapshot }): ReactNode
       ) : null}
     </article>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/cards/availability.test.ts b/src/app/cards/availability.test.ts
index b732b5b0..2c36c32d 100644
--- a/src/app/cards/availability.test.ts
+++ b/src/app/cards/availability.test.ts
@@ -333,7 +333,63 @@ test("the generic button card follows the K-snake key-map read", () => {
   assert.equal(silent.buttonMapping, false);
 });
 
-test("the generic button card follows the driver's mappings, not the advanced section", () => {
+test("a K-snake sleep capability exposes the shared auto-sleep card", () => {
+  const has = cardAvailability(snapshot({
+    status: {
+      brand: "Noir Gear",
+      ui: { family: "ksnake", showAdvancedSection: true },
+      sleepTimeout: 300,
+    },
+    capabilities: { sleepOptions: [60, 180, 300] },
+  }));
+  assert.equal(has.sleep, true);
+});
+
+test("a K-snake config exposes its lighting and scroll controls", () => {
+  const has = cardAvailability(snapshot({
+    status: {
+      brand: "Noir Gear",
+      ui: { family: "ksnake", showAdvancedSection: true },
+      lighting: {
+        zone: "Mouse",
+        modes: ["Off", "Wave"],
+        mode: "Wave",
+        color: null,
+        color2: null,
+        colorModes: [],
+        dualColorModes: [],
+        reactiveModes: [],
+        speeds: [],
+        speed: null,
+      },
+      scrollDirection: "Forward",
+    },
+  }));
+  assert.equal(has.lighting, true);
+  assert.equal(has.ksnakeScroll, true);
+});
+
+test("M2-NEX exposes the macro capability even when its UI family is absent", () => {
+  const has = cardAvailability(snapshot({
+    status: { brand: "Noir Gear", name: "M2-NEX", ui: { showAdvancedSection: true } },
+  }));
+  assert.equal(has.ksnakeMacros, true);
+});
+
+test("M2-NEX keeps lighting out of Advanced", () => {
+  const has = cardAvailability(snapshot({
+    status: {
+      brand: "Noir Gear",
+      name: "M2-NEX",
+      ui: { family: "ksnake", showAdvancedSection: true },
+      lighting: {} as never,
+    },
+  }));
+  assert.equal(has.lighting, true);
+  assert.equal(has.lightingAdvanced, false);
+});
+
+test("the generic button card follows the driver\'s mappings, not the advanced section", () => {
   const has = cardAvailability(snapshot({
     status: {
       brand: "G-Wolves",
diff --git a/src/app/cards/availability.ts b/src/app/cards/availability.ts
index 237a6dd1..79426176 100644
--- a/src/app/cards/availability.ts
+++ b/src/app/cards/availability.ts
@@ -13,6 +13,7 @@ export interface CardAvailability {
   signal: boolean;
   debounce: boolean;
   sleep: boolean;
+  ksnakeScroll: boolean;
   lowPower: boolean;
   processing: boolean;
   ninjutsoSensor: boolean;
@@ -36,6 +37,7 @@ export interface CardAvailability {
   pulsarPro: boolean;
   onboardProfiles: boolean;
   buttonMapping: boolean;
+  ksnakeMacros: boolean;
   powerMode: boolean;
   profiles: boolean;
   keychronNapeLayers: boolean;
@@ -54,6 +56,7 @@ const NOTHING: CardAvailability = {
   signal: false,
   debounce: false,
   sleep: false,
+  ksnakeScroll: false,
   lowPower: false,
   processing: false,
   ninjutsoSensor: false,
@@ -77,6 +80,7 @@ const NOTHING: CardAvailability = {
   pulsarPro: false,
   onboardProfiles: false,
   buttonMapping: false,
+  ksnakeMacros: false,
   powerMode: false,
   profiles: false,
   keychronNapeLayers: false,
@@ -91,6 +95,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 sensor = !(!status.gamingSurfaceMode
     && Array.isArray(status.supportedLiftOffDistances)
@@ -132,12 +137,14 @@ 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 && Boolean(status.lighting || status.lightingZones?.length),
+    lightingAdvanced: host && !isM2Nex && Boolean(status.lighting || status.lightingZones?.length),
     onboardProfiles: (status.profileCount ?? 0) > 1 && status.activeProfile != null,
-    // Not gated on `host`: a driver publishes both fields only when it can
-    // write them, which is opt-in enough. VGN F2 and G-Wolves remap buttons
-    // but have no other advanced controls to open that section for.
     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"),
     powerMode: host && Boolean(status.powerModes?.length),
     profiles: traits.logitech
       && status.deviceMode !== undefined && status.deviceMode !== "Unknown",
@@ -148,7 +155,9 @@ export function cardAvailability(snapshot: ControlSnapshot): CardAvailability {
     signal: host && traits.signal,
     debounce: host && traits.debounce
       && status.debounceMs !== null && status.debounceMs !== undefined,
-    sleep: host && (traits.sleep || razerSleep) && ui?.hideSleepCard !== true,
+    sleep: host && (traits.sleep || capabilities?.sleepOptions != null || razerSleep)
+      && ui?.hideSleepCard !== true,
+    ksnakeScroll: ui?.family === "ksnake" && status.scrollDirection != null,
     lowPower: host && razerLowPower,
     processing: host && processing,
     ninjutsoSensor: host && traits.ninjutso
diff --git a/src/app/workspace-tabs.test.ts b/src/app/workspace-tabs.test.ts
index 6be426b1..38370074 100644
--- a/src/app/workspace-tabs.test.ts
+++ b/src/app/workspace-tabs.test.ts
@@ -28,5 +28,26 @@ test("an unavailable selected tab falls back to overview", () => {
 });
 
 test("the disconnected state keeps every navigation tab", () => {
-  assert.equal(availableWorkspaceTabs(false, availability({})).length, 6);
+  assert.deepEqual(availableWorkspaceTabs(false, availability({})), [
+    "overview", "performance", "buttons", "macro", "lighting", "profiles", "advanced",
+  ]);
+});
+
+test("the macro tab follows the onboard macro capability", () => {
+  const tabs = availableWorkspaceTabs(true, availability({ ksnakeMacros: true }));
+  assert.deepEqual(tabs, ["overview", "performance", "macro", "advanced"]);
+});
+
+test("M2-NEX can hide the lighting tab without changing other capabilities", () => {
+  const tabs = availableWorkspaceTabs(true, availability({
+    lighting: true,
+    buttonMapping: true,
+    ksnakeMacros: true,
+  }), { hideLighting: true });
+  assert.deepEqual(tabs, ["overview", "performance", "buttons", "macro", "advanced"]);
+});
+
+test("a K-snake scroll control is placed behind the Buttons tab", () => {
+  const tabs = availableWorkspaceTabs(true, availability({ ksnakeScroll: true }));
+  assert.deepEqual(tabs, ["overview", "performance", "buttons", "advanced"]);
 });
diff --git a/src/app/workspace-tabs.ts b/src/app/workspace-tabs.ts
index f67d818e..b9b44567 100644
--- a/src/app/workspace-tabs.ts
+++ b/src/app/workspace-tabs.ts
@@ -4,15 +4,18 @@ import type { CardAvailability } from "./cards/availability.ts";
 export function availableWorkspaceTabs(
   connected: boolean,
   has: CardAvailability,
+  options: { hideLighting?: boolean } = {},
 ): readonly WorkspaceTab[] {
   if (!connected) return WORKSPACE_TAB_ORDER;
   const hasButtons = has.eggButtons || has.razerButtons || has.mxMasterButtons || has.atkButtons
-    || has.buttonMapping || has.debounce || has.lightforce || has.eggSpdt || has.superstrike;
+    || has.buttonMapping || has.debounce || has.lightforce || has.eggSpdt || has.superstrike
+    || has.ksnakeScroll;
   const hasProfiles = has.profiles || has.keychronNapeLayers || has.atkProfile
     || has.onboardProfiles || has.pulsarPro;
   return WORKSPACE_TAB_ORDER.filter((tab) => {
-    if (tab === "lighting") return has.lighting || has.teevolutionDpiLighting;
+    if (tab === "lighting") return !options.hideLighting && (has.lighting || has.teevolutionDpiLighting);
     if (tab === "buttons") return hasButtons;
+    if (tab === "macro") return has.ksnakeMacros;
     if (tab === "profiles") return hasProfiles;
     return true;
   });
diff --git a/src/control-profiles.css b/src/control-profiles.css
index b89ad16e..eae49928 100644
--- a/src/control-profiles.css
+++ b/src/control-profiles.css
@@ -251,6 +251,24 @@
 .dpi-editor-row > input[type="number"].dpi-editor-value { width:100%;min-width:0;box-sizing:border-box;padding:.42rem .4rem;border:1px solid var(--border);border-radius:7px;background:var(--surface-input);color:var(--text-input);font:600 .74rem/1.3 var(--font-mono);font-variant-numeric:tabular-nums;text-align:center }
 .dpi-editor-row > input.dpi-editor-value:hover:not(:disabled) { border-color:var(--ghost) }
 .dpi-editor-row > input.dpi-editor-value:focus-visible { outline:2px solid var(--ui-accent);outline-offset:1px }
+.dpi-editor-row > input[type="range"].dpi-editor-slider { width:100%;min-width:0;height:1.2rem;margin:0;accent-color:var(--ui-accent);cursor:pointer }
+/* Per-stage colour ramp for the M2-NEX editor. Kept as theme tokens so the
+   cards stay legible in light and dark themes (the raw marker hues are too
+   bright against the light surface). */
+.dpi-editor.has-m2nex-stage-colors { --m2nex-stage-1:var(--stage-color-1);--m2nex-stage-2:var(--stage-color-2);--m2nex-stage-3:var(--stage-color-3);--m2nex-stage-4:var(--stage-color-4);--m2nex-stage-5:var(--stage-color-5);--m2nex-stage-6:var(--stage-color-6) }
+.dpi-editor.has-m2nex-stage-colors .m2nex-stage-1 { --dpi-stage-color:var(--m2nex-stage-1) }
+.dpi-editor.has-m2nex-stage-colors .m2nex-stage-2 { --dpi-stage-color:var(--m2nex-stage-2) }
+.dpi-editor.has-m2nex-stage-colors .m2nex-stage-3 { --dpi-stage-color:var(--m2nex-stage-3) }
+.dpi-editor.has-m2nex-stage-colors .m2nex-stage-4 { --dpi-stage-color:var(--m2nex-stage-4) }
+.dpi-editor.has-m2nex-stage-colors .m2nex-stage-5 { --dpi-stage-color:var(--m2nex-stage-5) }
+.dpi-editor.has-m2nex-stage-colors .m2nex-stage-6 { --dpi-stage-color:var(--m2nex-stage-6) }
+.dpi-editor.has-m2nex-stage-colors .dpi-editor-row { grid-template-columns:1.4rem 2.35rem 5.2rem minmax(0,1fr) }
+.dpi-editor.has-m2nex-stage-colors .dpi-editor-row > button.dpi-editor-index { display:inline-flex;align-items:center;justify-content:center;gap:.28rem;border-color:color-mix(in srgb, var(--dpi-stage-color) 58%, var(--border));box-shadow:inset 0 -2px 0 var(--dpi-stage-color) }
+.dpi-editor.has-m2nex-stage-colors .dpi-editor-row > button.dpi-editor-index:hover:not(:disabled) { border-color:var(--dpi-stage-color);color:var(--dpi-stage-color) }
+.dpi-editor.has-m2nex-stage-colors .dpi-editor-row.is-active > button.dpi-editor-index { border-color:var(--dpi-stage-color);background:color-mix(in srgb, var(--dpi-stage-color) 15%, var(--surface-raised));color:var(--dpi-stage-color);box-shadow:inset 0 -2px 0 var(--dpi-stage-color),0 0 0 1px color-mix(in srgb, var(--dpi-stage-color) 28%, transparent) }
+.dpi-editor.has-m2nex-stage-colors .dpi-editor-row > input[type="number"].dpi-editor-value { border-color:color-mix(in srgb, var(--dpi-stage-color) 42%, var(--border));color:var(--dpi-stage-color) }
+.dpi-editor.has-m2nex-stage-colors .dpi-editor-row > input[type="range"].dpi-editor-slider { accent-color:var(--dpi-stage-color) }
+.dpi-editor-stage-swatch { width:.42rem;height:.42rem;flex:0 0 auto;border-radius:999px;background:var(--dpi-stage-color);box-shadow:0 0 0 1px color-mix(in srgb, var(--dpi-stage-color) 65%, white) }
 .dpi-editor-row.is-off > input.dpi-editor-slider::-webkit-slider-runnable-track { background:linear-gradient(90deg,var(--ghost) var(--fill,50%),color-mix(in srgb,var(--ghost) 25%,var(--surface-strong)) var(--fill,50%)) }
 .dpi-editor-row.is-off > input.dpi-editor-slider::-webkit-slider-thumb { background:var(--ghost) }
 .dpi-editor-row.is-off > input.dpi-editor-slider::-moz-range-progress { background:var(--ghost) }
diff --git a/src/control.css b/src/control.css
index 6dd7f900..e1d76383 100644
--- a/src/control.css
+++ b/src/control.css
@@ -69,6 +69,13 @@
   background: var(--ink);
   font-family: var(--font-sans);
   font-synthesis: none;
+  /* Per-stage DPI ramp used by the M2-NEX editor (has-m2nex-stage-colors). */
+  --stage-color-1: #ff5a5a;
+  --stage-color-2: #4ade80;
+  --stage-color-3: #60a5fa;
+  --stage-color-4: #facc15;
+  --stage-color-5: #22d3ee;
+  --stage-color-6: #e879f9;
 }
 
 * { box-sizing: border-box; }
@@ -159,6 +166,12 @@ button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid
   --tone-mantle: #efefea;
   --tone-s0: #fbfbf8;
   --tone-s1: #f5f5f1;
+  --stage-color-1: #d92d20;
+  --stage-color-2: #1a9e4b;
+  --stage-color-3: #2270c9;
+  --stage-color-4: #b7791f;
+  --stage-color-5: #0e8f9e;
+  --stage-color-6: #b23bbf;
 }
 /* Light-theme battery icons: the base types hard-code near-white shades that
    would vanish on light surfaces. */
@@ -1436,6 +1449,39 @@ nav { display: grid; gap: .3rem; margin-top: 1.4rem; }
   object-fit: contain;
   filter: drop-shadow(0 0 20px color-mix(in srgb, var(--ui-accent) 18%, transparent));
 }
+.button-map-showcase-art {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  line-height: 0;
+}
+.button-map-showcase-art .button-map-showcase-image {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+}
+.button-map-markers {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.button-map-marker {
+  position: absolute;
+  z-index: 1;
+  display: grid;
+  width: 1.55rem;
+  height: 1.55rem;
+  place-items: center;
+  border: 1px solid var(--ui-accent);
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--ui-accent) 88%, var(--surface-strong));
+  box-shadow: 0 0 0 .16rem color-mix(in srgb, var(--ui-accent) 22%, transparent), 0 3px 10px rgb(0 0 0 / 35%);
+  color: var(--ui-accent-ink);
+  font: 700 .61rem var(--font-mono);
+  letter-spacing: .02em;
+  line-height: 1;
+  transform: translate(-50%, -50%);
+}
 .showcase-sidebar-info { width: 100%; min-width: 0; margin-top: 1rem; }
 .showcase-sidebar-name {
   margin: 0;
@@ -1684,18 +1730,19 @@ body { height: 100vh; overflow: hidden; }
 .workspace-tab-empty small { display: block; margin-top: .45rem; color: var(--text-soft); font-size: .68rem; }
 
 #performance-settings { order: 3; }
-#lighting-settings { order: 4; }
-#logitech-onboard, #nape-layers { order: 5; }
+#macro-settings { order: 4; }
+#lighting-settings { order: 5; }
+#logitech-onboard, #nape-layers { order: 6; }
 /* The MX Master feature cards are the primary Advanced-tab content; without an
    order they fall to 0 and render above the sticky tab nav (order 1), pushing
    it into the middle of the page. Place them just before Device details. */
-#logitech-mx-master-settings { order: 5; }
-#logitech-device-details { order: 6; }
-#logitech-analog-button-settings { order: 7; }
-#pulsar-advanced { order: 8; }
-.testing-note { order: 9; }
-#device-debug-details { order: 10; }
-#interface-settings-page { order: 11; }
+#logitech-mx-master-settings { order: 6; }
+#logitech-device-details { order: 7; }
+#logitech-analog-button-settings { order: 8; }
+#pulsar-advanced { order: 9; }
+.testing-note { order: 10; }
+#device-debug-details { order: 11; }
+#interface-settings-page { order: 12; }
 
 .control-shell .settings-grid {
   display: grid;
@@ -1752,6 +1799,549 @@ body { height: 100vh; overflow: hidden; }
 }
 .setting-note { margin-top: .65rem; }
 
+/* The generic remap component keeps the OpenMouse data contract, but gets a
+   more deliberate control surface than a stack of unstyled native labels. */
+#button-mapping-settings,
+#ksnake-macro-settings,
+#ksnake-scroll-settings {
+  width: 100%;
+  max-width: 960px;
+  min-width: 0;
+  margin-inline: auto;
+  box-sizing: border-box;
+}
+#button-mapping-settings .field-note,
+#ksnake-macro-settings .field-note {
+  max-width: 72ch;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+}
+#ksnake-macro-settings {
+  padding: clamp(1.1rem, 2.3vw, 1.8rem);
+}
+.m2nex-profile-overview {
+  display: flex;
+  align-items: center;
+  gap: .55rem;
+  width: min(100% - 2rem, 960px);
+  margin: .25rem auto .1rem;
+  padding: .45rem .65rem;
+  box-sizing: border-box;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface-panel);
+  box-shadow: 0 6px 18px -16px rgb(0 0 0 / 55%);
+}
+.m2nex-profile-overview-title {
+  display: inline-flex;
+  align-items: baseline;
+  flex: 0 0 auto;
+  gap: .4rem;
+  white-space: nowrap;
+}
+.m2nex-profile-overview-title span {
+  color: var(--text-soft);
+  font: .58rem var(--font-mono);
+  letter-spacing: .1em;
+}
+.m2nex-profile-overview-title strong {
+  color: var(--text-hover);
+  font-size: .74rem;
+  font-weight: 700;
+}
+.m2nex-profile-overview-state {
+  flex: 0 0 auto;
+  padding: .2rem .38rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--dim);
+  font: .56rem var(--font-mono);
+  white-space: nowrap;
+}
+.m2nex-profile-overview-state.is-dirty {
+  border-color: color-mix(in srgb, var(--ui-accent) 62%, var(--border));
+  color: var(--ui-accent);
+}
+.m2nex-profile-overview-picker {
+  display: flex;
+  align-items: center;
+  flex: 0 1 12rem;
+  min-width: 0;
+  gap: .4rem;
+  color: var(--text-soft);
+  font-size: .64rem;
+}
+.m2nex-profile-overview-picker-label {
+  flex: 0 0 auto;
+  color: var(--dim);
+  font: .58rem var(--font-mono);
+}
+.m2nex-profile-overview-picker select {
+  width: 100%;
+  min-width: 8rem;
+  min-height: 1.85rem;
+  padding: .32rem 1.65rem .32rem .55rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--input);
+  color: var(--text-input);
+  color-scheme: dark;
+  font: .69rem var(--font-sans);
+}
+.m2nex-profile-overview-picker select:hover:not(:disabled) { border-color: var(--border-hover); }
+.m2nex-profile-overview-actions {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  gap: .45rem;
+  flex-wrap: wrap;
+}
+.m2nex-profile-overview-actions button {
+  min-height: 1.85rem;
+  padding: .32rem .55rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface-control);
+  color: var(--text-soft);
+  font-size: .65rem;
+  font-weight: 650;
+}
+.m2nex-profile-overview-actions button:hover:not(:disabled) {
+  border-color: var(--border-hover);
+  color: var(--text-hover);
+}
+.m2nex-profile-overview-actions .m2nex-profile-overview-apply {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent);
+  color: var(--ui-accent-ink);
+}
+.m2nex-profile-overview-actions .m2nex-profile-overview-apply:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
+  background: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
+}
+@media (max-width: 760px) {
+  .m2nex-profile-overview {
+    width: calc(100% - 1rem);
+    flex-wrap: wrap;
+    gap: .4rem .5rem;
+    padding: .5rem .55rem;
+  }
+  .m2nex-profile-overview-title {
+    margin-inline-end: auto;
+  }
+  .m2nex-profile-overview-picker {
+    flex: 1 1 10rem;
+  }
+  .m2nex-profile-overview-actions {
+    margin-inline-start: 0;
+  }
+}
+.ksnake-macro-heading {
+  align-items: center;
+  gap: 1.5rem;
+  margin-bottom: 1rem;
+}
+.ksnake-macro-heading > div { min-width: 0; }
+.ksnake-macro-heading h2 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
+.ksnake-macro-lead {
+  max-width: 52ch;
+  margin: .45rem 0 0;
+  color: var(--text-soft);
+  font-size: .78rem;
+  line-height: 1.45;
+}
+.ksnake-macro-save {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .45rem;
+  min-height: 2.55rem;
+  padding: .62rem .95rem;
+  border: 1px solid var(--ui-accent);
+  border-radius: 8px;
+  background: var(--ui-accent);
+  color: var(--ui-accent-ink);
+  font-size: .78rem;
+  font-weight: 750;
+  white-space: nowrap;
+}
+.ksnake-macro-save:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
+  border-color: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
+  transform: translateY(-1px);
+}
+.ksnake-macro-save:active:not(:disabled) { transform: translateY(1px); }
+.ksnake-macro-save:focus-visible,
+.ksnake-macro-clear:focus-visible,
+.ksnake-macro-delete:focus-visible {
+  outline: 2px solid var(--ui-accent);
+  outline-offset: 2px;
+}
+.ksnake-macro-notice {
+  margin: 0 0 1rem;
+  padding: .65rem .8rem;
+  border-inline-start: 3px solid var(--ui-accent);
+  background: color-mix(in srgb, var(--ui-accent) 7%, var(--surface-raised));
+  color: var(--text-soft);
+  font-size: .72rem;
+  line-height: 1.45;
+}
+.ksnake-macro-slot-picker {
+  display: grid;
+  grid-template-columns: auto minmax(12rem, 20rem);
+  align-items: center;
+  gap: .8rem;
+  margin: 0;
+  color: var(--text-hover);
+  font-size: .76rem;
+  font-weight: 650;
+}
+.ksnake-macro-slot-picker span { color: var(--text-soft); }
+.ksnake-macro-slot-picker select {
+  width: 100%;
+  min-height: 2.55rem;
+  box-sizing: border-box;
+  padding: .58rem .7rem;
+  border: 1px solid var(--border-hover);
+  border-radius: 8px;
+  background: var(--input);
+  color: var(--text-input);
+  color-scheme: dark;
+  font-size: .78rem;
+  font-weight: 650;
+}
+.ksnake-macro-slot-picker select:hover:not(:disabled) { border-color: var(--ui-accent); }
+.ksnake-macro-recorder {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 1rem;
+  padding: .9rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--surface-control) 72%, transparent);
+}
+.ksnake-macro-recorder.is-recording {
+  border-color: color-mix(in srgb, var(--ui-accent) 58%, var(--border));
+  background: color-mix(in srgb, var(--ui-accent) 7%, var(--surface-control));
+}
+.ksnake-macro-recorder-status {
+  display: flex;
+  align-items: center;
+  gap: .7rem;
+  min-width: 0;
+}
+.ksnake-macro-recorder-status > div {
+  display: grid;
+  gap: .2rem;
+  min-width: 0;
+}
+.ksnake-macro-recorder-status strong {
+  color: var(--text-hover);
+  font-size: .78rem;
+  font-weight: 750;
+}
+.ksnake-macro-recorder-status span:not(.ksnake-macro-recorder-dot) {
+  color: var(--text-soft);
+  font-size: .7rem;
+  line-height: 1.4;
+}
+.ksnake-macro-recorder-dot {
+  flex: 0 0 .62rem;
+  width: .62rem;
+  height: .62rem;
+  border-radius: 50%;
+  background: var(--text-faint);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-faint) 12%, transparent);
+}
+.ksnake-macro-recorder.is-recording .ksnake-macro-recorder-dot {
+  background: var(--destructive);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 15%, transparent);
+  animation: ksnake-macro-recording-pulse 1.2s ease-in-out infinite;
+}
+.ksnake-macro-recorder-tools {
+  display: flex;
+  align-items: flex-end;
+  flex: 0 0 auto;
+  gap: .65rem;
+}
+.ksnake-macro-timing-picker {
+  display: grid;
+  gap: .2rem;
+  color: var(--text-soft);
+  font-size: .62rem;
+  font-weight: 650;
+}
+.ksnake-macro-timing-picker select {
+  min-height: 2.35rem;
+  padding: .5rem 1.8rem .5rem .65rem;
+  border: 1px solid var(--border-hover);
+  border-radius: 7px;
+  background: var(--input);
+  color: var(--text-input);
+  color-scheme: dark;
+  font-size: .7rem;
+  font-weight: 650;
+}
+.ksnake-macro-timing-picker select:hover:not(:disabled) { border-color: var(--ui-accent); }
+.ksnake-macro-fixed-delay-picker {
+  display: grid;
+  gap: .2rem;
+  color: var(--text-soft);
+  font-size: .62rem;
+  font-weight: 650;
+}
+.ksnake-macro-fixed-delay-control {
+  display: flex;
+  align-items: center;
+  gap: .3rem;
+}
+.ksnake-macro-fixed-delay-control input {
+  width: 4.4rem;
+  min-height: 2.35rem;
+  box-sizing: border-box;
+  padding: .5rem .55rem;
+  border: 1px solid var(--border-hover);
+  border-radius: 7px;
+  background: var(--input);
+  color: var(--text-input);
+  color-scheme: dark;
+  font: 650 .7rem var(--font-mono);
+}
+.ksnake-macro-fixed-delay-control input:hover:not(:disabled),
+.ksnake-macro-fixed-delay-control input:focus-visible { border-color: var(--ui-accent); }
+.ksnake-macro-fixed-delay-control input:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
+.ksnake-macro-fixed-delay-control small {
+  color: var(--text-soft);
+  font: .64rem var(--font-mono);
+}
+.ksnake-macro-recorder-actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: .45rem;
+}
+.ksnake-macro-record,
+.ksnake-macro-stop,
+.ksnake-macro-cancel,
+.ksnake-macro-manual-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .4rem;
+  min-height: 2.35rem;
+  padding: .55rem .8rem;
+  border: 1px solid var(--border-hover);
+  border-radius: 7px;
+  background: var(--surface-control);
+  color: var(--text-hover);
+  font-size: .72rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.ksnake-macro-record,
+.ksnake-macro-stop {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent);
+  color: var(--ui-accent-ink);
+}
+.ksnake-macro-record:hover:not(:disabled),
+.ksnake-macro-stop:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
+  background: color-mix(in srgb, var(--ui-accent) 82%, #ffffff);
+}
+.ksnake-macro-cancel:hover:not(:disabled) {
+  border-color: var(--border-hover);
+  background: var(--surface-hover-soft);
+}
+.ksnake-macro-manual-add:hover:not(:disabled) {
+  border-color: var(--ui-accent);
+  background: var(--surface-hover-soft);
+  color: var(--text-hover);
+  transform: translateY(-1px);
+}
+.ksnake-macro-record:focus-visible,
+.ksnake-macro-stop:focus-visible,
+.ksnake-macro-cancel:focus-visible,
+.ksnake-macro-manual-add:focus-visible {
+  outline: 2px solid var(--ui-accent);
+  outline-offset: 2px;
+}
+.ksnake-macro-recording-list {
+  margin-top: 1rem;
+  overflow: hidden;
+  border: 1px solid var(--line-soft);
+  border-radius: 10px;
+  background: var(--surface-input);
+}
+.ksnake-macro-recording-list-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: .8rem;
+  padding: .65rem .8rem;
+  border-bottom: 1px solid var(--line-soft);
+  color: var(--text-soft);
+  font: 650 .64rem var(--font-mono);
+  letter-spacing: .07em;
+  text-transform: uppercase;
+}
+.ksnake-macro-recording-list-heading span:last-child { color: var(--ui-accent); }
+.ksnake-macro-recording-empty {
+  margin: 0;
+  padding: 1rem .8rem;
+  color: var(--text-soft);
+  font-size: .74rem;
+}
+.ksnake-macro-recording-list ol {
+  display: grid;
+  max-height: 18rem;
+  margin: 0;
+  padding: .35rem;
+  overflow: auto;
+  list-style: none;
+}
+.ksnake-macro-recording-list li {
+  display: grid;
+  grid-template-columns: 2rem minmax(0, 1fr) auto;
+  align-items: center;
+  gap: .6rem;
+  min-width: 0;
+  padding: .55rem .45rem;
+  border-bottom: 1px solid var(--line-soft);
+}
+.ksnake-macro-recording-list li:last-child { border-bottom: 0; }
+.ksnake-macro-recording-step-number {
+  color: var(--text-soft);
+  font: 650 .66rem var(--font-mono);
+  text-align: center;
+}
+.ksnake-macro-recording-list li strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-hover);
+  font-size: .74rem;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ksnake-macro-recording-list li small {
+  color: var(--text-soft);
+  font: .64rem var(--font-mono);
+  white-space: nowrap;
+}
+@keyframes ksnake-macro-recording-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: .48; transform: scale(.8); }
+}
+.reduce-interface-motion .ksnake-macro-recorder-dot { animation: none; }
+.button-map-list {
+  display: grid;
+  gap: .45rem;
+  margin-top: .15rem;
+}
+.button-map-row {
+  display: grid;
+  grid-template-columns: minmax(9rem, .9fr) auto minmax(13rem, 1.1fr);
+  align-items: center;
+  gap: .75rem;
+  min-width: 0;
+  padding: .55rem .65rem;
+  border: 1px solid var(--line-soft);
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--surface-control) 74%, transparent);
+  color: var(--text-soft);
+  font-size: .72rem;
+  transition: border-color .15s ease, background .15s ease;
+}
+.button-map-row:hover {
+  border-color: var(--border-hover);
+  background: var(--surface-hover-soft);
+}
+.button-map-row:focus-within {
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 2px var(--ui-accent-soft);
+}
+.button-map-control {
+  display: flex;
+  align-items: center;
+  gap: .65rem;
+  min-width: 0;
+}
+.button-map-index {
+  display: grid;
+  flex: 0 0 1.7rem;
+  width: 1.7rem;
+  height: 1.7rem;
+  place-items: center;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  color: var(--dim);
+  font: .6rem var(--font-mono);
+  letter-spacing: .03em;
+}
+.button-map-name {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-hover);
+  font-weight: 550;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.button-map-connector {
+  color: var(--dim);
+  font: .58rem var(--font-mono);
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+.button-map-select-wrap {
+  position: relative;
+  min-width: 0;
+}
+.button-map-select-wrap::after {
+  position: absolute;
+  top: 50%;
+  right: .75rem;
+  width: .38rem;
+  height: .38rem;
+  border-right: 1px solid var(--text-soft);
+  border-bottom: 1px solid var(--text-soft);
+  content: "";
+  pointer-events: none;
+  transform: translateY(-65%) rotate(45deg);
+}
+.button-map-select-wrap select {
+  width: 100%;
+  min-width: 0;
+  padding: .55rem 2rem .55rem .7rem;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--input);
+  color: var(--text-input);
+  color-scheme: dark;
+  font-size: .72rem;
+  cursor: pointer;
+  appearance: none;
+}
+.button-map-select-wrap select:hover:not(:disabled) {
+  border-color: var(--border-hover);
+}
+.button-map-select-wrap select:disabled {
+  background: var(--surface-strong);
+  color: var(--text-soft);
+  cursor: not-allowed;
+  opacity: .72;
+}
+.button-map-select-wrap:has(select:disabled)::after { opacity: .45; }
+@media (max-width: 620px) {
+  .button-map-row {
+    grid-template-columns: minmax(0, 1fr);
+    gap: .4rem;
+  }
+  .button-map-connector { display: none; }
+}
+
 #pulsar-advanced {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: .72rem;
@@ -1897,6 +2487,51 @@ body { height: 100vh; overflow: hidden; }
 .button-remap-diverted { margin-top: .6rem; padding: .55rem .65rem; border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--surface-panel)); border-radius: 7px; background: color-mix(in srgb, var(--warning) 8%, var(--surface-panel)); }
 .button-remap-diverted p { margin: 0 0 .5rem; color: color-mix(in srgb, var(--warning) 66%, var(--text-soft)); font-size: .66rem; line-height: 1.45; }
 .button-remap-diverted button { padding: .32rem .6rem; border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--surface-panel)); border-radius: 6px; background: color-mix(in srgb, var(--warning) 16%, var(--surface-panel)); color: color-mix(in srgb, var(--warning) 78%, var(--text-hover)); font-size: .64rem; }
+.ksnake-macro-steps { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
+.ksnake-macro-step { display: grid; grid-template-columns: 2rem minmax(8rem, 1.05fr) minmax(7rem, .9fr) 5.5rem 6rem minmax(9rem, 1.2fr) 2.25rem; align-items: end; gap: .55rem; padding: .7rem; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-input); }
+.ksnake-macro-step-number { align-self: center; color: var(--text-soft); font: 650 .7rem var(--font-mono); text-align: center; }
+.ksnake-macro-step-field,
+.ksnake-macro-number { display: grid; gap: .28rem; min-width: 0; color: var(--muted); font-size: .62rem; }
+.ksnake-macro-step select, .ksnake-macro-number input { width: 100%; box-sizing: border-box; min-width: 0; min-height: 2.3rem; padding: .55rem .55rem; border: 1px solid var(--border); border-radius: 7px; background: var(--input); color: var(--text-input); font-size: .76rem; }
+.ksnake-macro-step select:hover:not(:disabled), .ksnake-macro-number input:hover:not(:disabled) { border-color: var(--border-hover); }
+.ksnake-macro-step small { align-self: end; min-width: 0; overflow: hidden; padding-bottom: .62rem; color: var(--text-soft); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
+.ksnake-macro-preview::before { content: "Preview · "; color: var(--dim); }
+.ksnake-macro-delete { display: grid; width: 2.25rem; height: 2.3rem; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-control); color: var(--muted); }
+.ksnake-macro-delete:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
+.ksnake-macro-empty { display: grid; justify-items: start; gap: .3rem; padding: 1.2rem 1.1rem; border: 1px dashed var(--border-hover); border-radius: 10px; background: color-mix(in srgb, var(--surface-raised) 74%, transparent); }
+.ksnake-macro-empty strong { color: var(--text-hover); font-size: .9rem; }
+.ksnake-macro-empty span { color: var(--text-soft); font-size: .76rem; }
+.ksnake-macro-empty-action { margin-top: .45rem; }
+.ksnake-macro-actions { display: flex; justify-content: flex-start; gap: .6rem; margin-top: 1rem; }
+.ksnake-macro-actions .ksnake-macro-save { min-width: 9.5rem; }
+.ksnake-macro-clear { min-height: 2.55rem; padding: .6rem .9rem; border: 1px solid var(--border-hover); border-radius: 8px; background: var(--surface-control); color: var(--text-soft); font-size: .76rem; font-weight: 650; }
+.ksnake-macro-clear:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--text-hover); }
+.ksnake-macro-help { margin-top: 1rem; border-top: 1px solid var(--line-soft); padding-top: .75rem; color: var(--text-soft); }
+.ksnake-macro-help summary { width: max-content; color: var(--text-soft); cursor: pointer; font-size: .7rem; font-weight: 650; }
+.ksnake-macro-help summary:hover { color: var(--text-hover); }
+.ksnake-macro-help p { max-width: 72ch; margin: .55rem 0 0; font-size: .68rem; line-height: 1.5; }
+@media (max-width: 760px) {
+  .ksnake-macro-heading { align-items: flex-start; flex-direction: column; gap: .8rem; }
+  .ksnake-macro-add { width: 100%; }
+  .ksnake-macro-slot-picker { grid-template-columns: 1fr; gap: .4rem; }
+  .ksnake-macro-recorder { align-items: stretch; flex-direction: column; }
+  .ksnake-macro-recorder-tools { align-items: stretch; flex-direction: column; }
+  .ksnake-macro-timing-picker select { width: 100%; }
+  .ksnake-macro-fixed-delay-control input { width: 100%; }
+  .ksnake-macro-record,
+  .ksnake-macro-stop,
+  .ksnake-macro-cancel,
+  .ksnake-macro-manual-add { flex: 1; }
+  .ksnake-macro-recorder-actions { width: 100%; }
+  .ksnake-macro-step { grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) 2.25rem; align-items: end; }
+  .ksnake-macro-step-field:nth-of-type(1) { grid-column: 2; }
+  .ksnake-macro-step-field:nth-of-type(2) { grid-column: 3; }
+  .ksnake-macro-step-number { grid-row: 1; }
+  .ksnake-macro-code-field { grid-column: 2; grid-row: 2; }
+  .ksnake-macro-delay-field { grid-column: 3; grid-row: 2; }
+  .ksnake-macro-step small { grid-column: 2 / 4; grid-row: 3; padding-bottom: 0; }
+  .ksnake-macro-delete { grid-column: 4; grid-row: 1; }
+}
 
 /* ═══════════════════════════════════════════════════════════════════════
    Desktop shell — ported from Desktop/src/App.css
@@ -2181,6 +2816,8 @@ body { height: 100vh; overflow: hidden; }
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
+  box-sizing: border-box;
   padding: 1rem 0 2rem;
   text-align: center;
 }
@@ -2198,23 +2835,12 @@ body { height: 100vh; overflow: hidden; }
 }
 .device-diagram {
   display: flex;
-  align-items: stretch;
+  align-items: center;
   justify-content: center;
   gap: 1rem;
   width: 100%;
   margin: 0 auto 1.25rem;
 }
-/* The artwork sits in the middle canvas (sized to the image's own aspect
-   ratio); the pills live in their own rails beside it so they never overlap
-   the artwork. Leader lines end at the canvas edge, right at the pill. */
-.device-diagram-rail {
-  position: relative;
-  flex: 0 0 auto;
-  width: 12.5rem;
-  min-width: 0;
-}
-.device-diagram-rail--left { text-align: start; }
-.device-diagram-rail--right { text-align: end; }
 .device-diagram-canvas {
   position: relative;
   flex: 0 0 auto;
@@ -2233,81 +2859,53 @@ body { height: 100vh; overflow: hidden; }
   object-fit: contain;
   filter: drop-shadow(0 22px 32px rgb(0 0 0 / 45%));
 }
-.device-diagram-lines {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  pointer-events: none;
-  overflow: visible;
-}
-.device-diagram-lines polyline {
-  fill: none;
-  stroke: var(--faint);
-  stroke-width: 1.5;
-  animation: device-diagram-draw 0.55s cubic-bezier(0.33, 1, 0.68, 1) 0.28s both;
-}
-.device-diagram-dot {
-  position: absolute;
-  z-index: 2;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--ui-accent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 22%, transparent);
-  transform: translate(-50%, -50%);
-}
-@keyframes device-diagram-draw {
-  from { stroke-dasharray: 600; stroke-dashoffset: 600; }
-  to   { stroke-dasharray: 600; stroke-dashoffset: 0; }
-}
-.device-diagram-chip {
-  position: absolute;
-  z-index: 3;
+.device-showcase-status-pill {
   display: inline-flex;
   align-items: center;
-  gap: 0.45rem;
-  transform: translateY(-50%);
-  padding: 0.38rem 0.9rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  width: max-content;
+  max-width: calc(100% - 1rem);
+  margin: -0.35rem auto 0;
+  padding: 0.34rem 0.62rem;
+  border: 1px solid var(--border-soft);
   border-radius: 999px;
   background: var(--surface-strong);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
-  font-size: 0.72rem;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 4%);
+  color: var(--faint);
+  font-size: 0.62rem;
   line-height: 1;
-  white-space: nowrap;
 }
-.device-diagram-chip--left {
-  inset-inline-start: auto;
-  inset-inline-end: 0.4rem;
-  animation: device-diagram-chip-in-l 0.32s ease both;
+.device-showcase-status-primary,
+.device-showcase-status-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  white-space: nowrap;
 }
-.device-diagram-chip--right {
-  inset-inline-start: 0.4rem;
-  inset-inline-end: auto;
-  animation: device-diagram-chip-in-r 0.32s ease both;
+.device-showcase-status-primary {
+  color: var(--success);
+  font-weight: 700;
 }
-.device-diagram-chip-label {
+.device-showcase-status-muted { color: var(--faint); }
+.device-showcase-status-separator { color: var(--text-faint); }
+.device-showcase-status-label {
   color: var(--text-soft);
-  font-size: 0.6rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
+  font-size: 0.53rem;
+  font-weight: 650;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
 }
-.device-diagram-chip-value {
+.device-showcase-status-value {
   color: var(--bright);
   font-family: var(--font-mono);
-  font-size: 0.78rem;
-  font-weight: 600;
-}
-@keyframes device-diagram-chip-in-l {
-  from { opacity: 0; transform: translateY(-50%) translateX(6px); }
-  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
-}
-@keyframes device-diagram-chip-in-r {
-  from { opacity: 0; transform: translateY(-50%) translateX(-6px); }
-  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
+  font-size: 0.66rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 650;
 }
+.device-showcase-status-pill .device-showcase-dot { width: 5px; height: 5px; }
+.device-showcase-status-pill .battery-icon { width: 0.95rem; }
 .device-showcase-status-detail {
   color: var(--faint);
   font-weight: 400;
@@ -2352,6 +2950,14 @@ body { height: 100vh; overflow: hidden; }
     device-display-into-left .7s cubic-bezier(.22, .61, .36, 1) both,
     device-glow-sidebar .7s ease both;
 }
+.control-shell .button-map-showcase-art {
+  animation:
+    device-display-into-left .7s cubic-bezier(.22, .61, .36, 1) both,
+    device-glow-sidebar .7s ease both;
+}
+.control-shell .button-map-showcase-art .button-map-showcase-image {
+  animation: none;
+}
 .control-shell .device-showcase-image {
   animation:
     device-display-back-home .7s cubic-bezier(.22, .61, .36, 1) both,
@@ -2882,6 +3488,11 @@ body { height: 100vh; overflow: hidden; }
   filter: none;
   transform: scale(1.1);
 }
+/* M2-NEX's supplied render is a tall portrait asset. Normalize its visual
+   weight against the square-ish renders in the adjacent device chooser tile. */
+.welcome-with-devices .device-grid .device-tile-image-is-portrait {
+  transform: scale(.75);
+}
 .detected-devices-head {
   display: flex;
   align-items: center;
diff --git a/src/device/controller.ts b/src/device/controller.ts
index 3c5ec76c..651d750e 100644
--- a/src/device/controller.ts
+++ b/src/device/controller.ts
@@ -102,6 +102,13 @@ import {
   decodeProfileKey, encodeProfileKey, profileKeyMatchesDevice, type ProfileKeyPayload,
 } from "./profile-key";
 import type { MouseLighting, MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
+import type { KsnakeMacroProfile } from "@openmouse/protocol/ksnake";
+import {
+  cloneM2NexProfile,
+  loadM2NexProfiles,
+  saveM2NexProfiles,
+  type M2NexProfile,
+} from "./m2nex-profiles";
 import {
   LOGITECH_HAPTIC_EFFECTS,
   LOGITECH_HAPTIC_PRESETS,
@@ -136,8 +143,10 @@ import { TeevolutionHidClient } from "@openmouse/protocol/drivers/teevolution/hi
 import { teevolutionProfileForCid } from "@openmouse/protocol/teevolution";
 import { VgnF2HidClient } from "@openmouse/protocol/drivers/vgn/hid";
 import { KeychronNapeHidClient } from "@openmouse/protocol/drivers/keychron/nape-hid";
-import { KeychronM6HidClient } from "@openmouse/protocol/drivers/keychron/m6-hid";
+import { Keychron8kHidClient } from "@openmouse/protocol/drivers/keychron/mouse-8k-hid";
+import { Keychron1kHidClient } from "@openmouse/protocol/drivers/keychron/mouse-1k-hid";
 import { Keychron4kHidClient } from "@openmouse/protocol/drivers/keychron/mouse-4k-hid";
+import { Keychron8kNordicHidClient } from "@openmouse/protocol/drivers/keychron/mouse-8k-nordic-hid";
 import type { GloriousLighting } from "@openmouse/protocol/glorious";
 import { GloriousHidClient } from "@openmouse/protocol/drivers/glorious/hid";
 import { GloriousClassicHidClient } from "@openmouse/protocol/drivers/glorious/classic-hid";
@@ -169,6 +178,7 @@ import { MicrosoftHidClient } from "@openmouse/protocol/drivers/microsoft/hid";
 import { DareuHidClient } from "@openmouse/protocol/drivers/dareu/hid";
 import { IncottHidClient } from "@openmouse/protocol/drivers/incott/hid";
 import { BytechHidClient } from "@openmouse/protocol/drivers/bytech/hid";
+import { RapooHidClient } from "@openmouse/protocol/drivers/rapoo/hid";
 import { parsePreviewMode, previewsEnabled, type PreviewMode } from "../preview-modes";
 import { sleepLabel } from "./options";
 import { traitsFor } from "./traits";
@@ -243,8 +253,7 @@ function activeAs<T>(...classes: ClientClass<T>[]): T | null {
 
 const DM_CLASSES = [WLMouseHidClient, LamzuHidClient, LamzuAtlantisHidClient, AtkHidClient, AtkBitmouseHidClient, NinjutsoHidClient] as const;
 const RAZER_CLASSES = [RazerHidClient, RazerViperMiniHidClient, RazerViperHidClient, RazerCobraHidClient] as const;
-const NEEDS_OPEN = [LamzuAtlantisHidClient, TeevolutionHidClient, VgnF2HidClient, KeychronNapeHidClient, KeychronM6HidClient, WLMouseBeastX4kHidClient, ModdoHidClient, ZaunkoenigHidClient, CorsairHidClient, FantechHidClient, WallhackMouseHidClient, WallhackKeyboardHidClient, GloriousHidClient, GloriousClassicHidClient, MchoseHidClient, MchoseDockHidClient, MchoseA5ProMaxHidClient, MchoseV3HidClient, MicrosoftHidClient, DareuHidClient, IncottHidClient, BytechHidClient] as const;
-const PULSAR_CLASSES = [PulsarHidClient, PulsarProHidClient, PulsarXs1HidClient] as const;
+const NEEDS_OPEN = [LamzuAtlantisHidClient, TeevolutionHidClient, VgnF2HidClient, KeychronNapeHidClient, Keychron8kNordicHidClient, WLMouseBeastX4kHidClient, ModdoHidClient, ZaunkoenigHidClient, CorsairHidClient, FantechHidClient, WallhackMouseHidClient, WallhackKeyboardHidClient, GloriousHidClient, GloriousClassicHidClient, MchoseHidClient, MchoseDockHidClient, MchoseA5ProMaxHidClient, MchoseV3HidClient, MicrosoftHidClient, DareuHidClient, IncottHidClient, BytechHidClient, RapooHidClient] as const;const PULSAR_CLASSES = [PulsarHidClient, PulsarProHidClient, PulsarXs1HidClient] as const;
 
 const logitechClient = (): LogitechHidppClient | null => activeAs(LogitechHidppClient);
 const eggClient = (): EggOp1HidClient | null => activeAs(EggOp1HidClient);
@@ -263,7 +272,8 @@ const finalmouseClient = (): FinalmouseHidClient | null => activeAs(FinalmouseHi
 const orbitalClient = (): OrbitalHidClient | null => activeAs(OrbitalHidClient);
 const vgnClient = (): VgnF2HidClient | null => activeAs(VgnF2HidClient);
 const keychronNapeClient = (): KeychronNapeHidClient | null => activeAs(KeychronNapeHidClient);
-const keychronM6Client = (): KeychronM6HidClient | null => activeAs(KeychronM6HidClient);
+const keychron8kClient = (): Keychron8kHidClient | null => activeAs(Keychron8kHidClient);
+const keychron1kClient = (): Keychron1kHidClient | null => activeAs(Keychron1kHidClient);
 const keychron4kClient = (): Keychron4kHidClient | null => activeAs(Keychron4kHidClient);
 const wlmouse4kClient = (): WLMouseBeastX4kHidClient | null => activeAs(WLMouseBeastX4kHidClient);
 const wallhackMouseClient = (): WallhackMouseHidClient | null => activeAs(WallhackMouseHidClient);
@@ -274,6 +284,14 @@ const pulsarClient = (): PulsarClient | null =>
 
 let onboardProfiles: OnboardProfile[] | null = null;
 let buttons: LogitechReprogrammableControl[] | null = null;
+const KSNAKE_MACROS_KEY = "ksnake-macros";
+let ksnakeMacros: KsnakeMacroProfile[] | null = null;
+let stagedKsnakeMacros: KsnakeMacroProfile[] | null = null;
+let ksnakeMacrosLoading = false;
+let ksnakeMacrosError: string | null = null;
+let m2nexProfiles: M2NexProfile[] | null = null;
+let activeM2NexProfile = 0;
+let m2nexProfileDirty = false;
 let napeKeymap: KeychronNapeLayerKeymap | null = null;
 const napeKeymaps = new Map<number, KeychronNapeLayerKeymap>();
 const stagedNapeAssignments = new Map<string, StagedNapeAssignment>();
@@ -474,6 +492,12 @@ function buildSnapshot(): ControlSnapshot {
     stagedProfileRates,
     stagedProfileName,
     stagedButtonMappings: Object.fromEntries(stagedButtonMappings),
+    ksnakeMacros: stagedKsnakeMacros ?? ksnakeMacros,
+    ksnakeMacrosLoading,
+    ksnakeMacrosError,
+    m2nexProfiles: m2nexProfiles?.map(cloneM2NexProfile) ?? null,
+    activeM2NexProfile,
+    m2nexProfileDirty,
     stagedProfileButtonAssignments: [...stagedProfileButtonEdits.entries()]
       .filter(([key]) => isPendingChange(key))
       .map(([, edit]) => ({
@@ -635,6 +659,267 @@ function clientHasMethod(method: string): boolean {
   return typeof client?.[method] === "function";
 }
 
+type KsnakeMacroClient = {
+  setMacros(profiles: readonly KsnakeMacroProfile[]): Promise<void>;
+};
+
+type M2NexProfileClient = KsnakeMacroClient & {
+  setButtonMapping(button: string, action: string): Promise<unknown>;
+  setDpiStageValue(stage: number, dpi: number): Promise<unknown>;
+  setActiveDpiStage(stage: number): Promise<unknown>;
+  setPollingRate(rate: number): Promise<unknown>;
+};
+
+function ksnakeMacroClient(): KsnakeMacroClient | null {
+  const client = active as unknown as Partial<KsnakeMacroClient> | null;
+  return typeof client?.setMacros === "function"
+    ? client as KsnakeMacroClient
+    : null;
+}
+
+function isM2NexStatus(status: MouseStatus | null | undefined = latestDeviceStatus): boolean {
+  return status?.brand === "Noir Gear" && status.name === "M2-NEX";
+}
+
+function persistM2NexProfiles(): void {
+  if (m2nexProfiles !== null) saveM2NexProfiles(localStorage, m2nexProfiles);
+}
+
+function profileMacroTable(): KsnakeMacroProfile[] | null {
+  return (stagedKsnakeMacros ?? ksnakeMacros)
+    ? cloneKsnakeMacros(stagedKsnakeMacros ?? ksnakeMacros ?? [])
+    : null;
+}
+
+function seedM2NexProfiles(status: MouseStatus): void {
+  if (!isM2NexStatus(status)) {
+    m2nexProfiles = null;
+    activeM2NexProfile = 0;
+    m2nexProfileDirty = false;
+    return;
+  }
+  m2nexProfiles = loadM2NexProfiles(localStorage, {
+    dpi: status.dpi,
+    dpiStages: status.dpiStages,
+    activeDpiStage: status.activeDpiStage,
+    pollingRateHz: status.pollingRateHz,
+    buttonMappings: status.buttonMappings,
+    macros: null,
+  });
+  activeM2NexProfile = Math.min(activeM2NexProfile, m2nexProfiles.length - 1);
+  m2nexProfileDirty = false;
+}
+
+function setEditorToM2NexProfile(): void {
+  const profile = m2nexProfiles?.[activeM2NexProfile];
+  if (!profile) return;
+  ksnakeMacros = cloneKsnakeMacros(profile.macros ?? []);
+  stagedKsnakeMacros = null;
+  ksnakeMacrosLoading = false;
+  ksnakeMacrosError = null;
+}
+
+function cloneKsnakeMacros(profiles: readonly KsnakeMacroProfile[]): KsnakeMacroProfile[] {
+  return Array.from({ length: 32 }, (_, slot) => ({
+    steps: (profiles[slot]?.steps ?? []).map((step) => ({ ...step })),
+  }));
+}
+
+/**
+ * Prepare the onboard macro editor when the macro card is opened.
+ *
+ * M2-NEX exposes the macro write/commit commands, but its live HID
+ * descriptor does not expose a reliable macro-read command. The vendor
+ * configurator therefore treats macro definitions as editor data and writes
+ * the complete table on save. OpenMouse starts with 32 empty local slots;
+ * this avoids a fake read timeout while keeping the actual write path live.
+ */
+export function loadKsnakeMacros(): void {
+  if (ksnakeMacrosLoading || ksnakeMacros !== null) return;
+  const client = ksnakeMacroClient();
+  if (!client) {
+    ksnakeMacrosError = st("m2nex.macrosUnavailable");
+    emit();
+    return;
+  }
+  ksnakeMacrosLoading = false;
+  ksnakeMacrosError = null;
+  if (isM2NexStatus() && m2nexProfiles?.[activeM2NexProfile]) setEditorToM2NexProfile();
+  else ksnakeMacros = cloneKsnakeMacros([]);
+  stagedKsnakeMacros = null;
+  emit();
+}
+
+/** 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 (hasPendingChanges()) {
+    setReadStatus(st("m2nex.switchBlocked"));
+    return;
+  }
+  activeM2NexProfile = index;
+  setEditorToM2NexProfile();
+  setReadStatus(st("m2nex.selected", { name: m2nexProfiles[index].name }));
+  emit();
+}
+
+/** Edit the selected profile without touching the mouse yet. */
+export function updateM2NexProfileButton(button: string, action: string): void {
+  if (!isM2NexStatus() || !m2nexProfiles?.[activeM2NexProfile]) return;
+  if (button === "Left") return;
+  const current = m2nexProfiles[activeM2NexProfile];
+  m2nexProfiles = m2nexProfiles.map((profile, index) => index === activeM2NexProfile
+    ? { ...profile, buttonMappings: { ...profile.buttonMappings, [button]: action } }
+    : profile);
+  m2nexProfileDirty = true;
+  persistM2NexProfiles();
+  setReadStatus(st("m2nex.updated", { name: current.name }));
+  emit();
+}
+
+/** Save the currently displayed device settings into the selected local slot. */
+export function saveCurrentM2NexProfile(): void {
+  if (!isM2NexStatus() || !latestDeviceStatus || !m2nexProfiles?.[activeM2NexProfile]) return;
+  const status = withPendingChanges(latestDeviceStatus);
+  const current = m2nexProfiles[activeM2NexProfile];
+  const macros = profileMacroTable();
+  m2nexProfiles = m2nexProfiles.map((profile, index) => index === activeM2NexProfile
+    ? {
+        ...profile,
+        dpiStages: status.dpiStages?.slice() ?? [status.dpi],
+        activeDpiStage: status.activeDpiStage ?? 0,
+        pollingRateHz: status.pollingRateHz,
+        buttonMappings: { ...(status.buttonMappings ?? {}) },
+        macros: macros ?? profile.macros,
+      }
+    : profile);
+  m2nexProfileDirty = false;
+  persistM2NexProfiles();
+  setReadStatus(st("m2nex.saveDone", { name: current.name }));
+  pushToast("success", st("m2nex.saved", { name: current.name }), st("m2nex.savedDetail"));
+  emit();
+}
+
+/** 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 (hasPendingChanges()) {
+    setReadStatus(st("m2nex.applyBlocked"));
+    return;
+  }
+  if (settingInProgress) {
+    setReadStatus(st("ctl.waitFlash"));
+    return;
+  }
+  const rawClient = active as unknown as Partial<M2NexProfileClient> | null;
+  if (!rawClient
+    || typeof rawClient.setButtonMapping !== "function"
+    || typeof rawClient.setDpiStageValue !== "function"
+    || typeof rawClient.setActiveDpiStage !== "function"
+    || typeof rawClient.setPollingRate !== "function") {
+    setReadStatus(st("m2nex.incomplete"));
+    return;
+  }
+  const profile = m2nexProfiles[index];
+  const before = latestDeviceStatus;
+  activeM2NexProfile = index;
+  settingInProgress = true;
+  pendingStatusText = st("m2nex.applyProgress", { name: profile.name });
+  readStatus = pendingStatusText;
+  emit();
+  try {
+    // Macro references are written first, so a button assigned to Macro N
+    // always points at the table just selected by this profile.
+    if (profile.macros !== null) {
+      if (typeof rawClient.setMacros !== "function") throw new Error("The M2-NEX macro interface is not available.");
+      await rawClient.setMacros(profile.macros);
+    }
+
+    const currentMappings = before.buttonMappings ?? {};
+    const options = before.buttonOptions ?? [];
+    for (const [button, action] of Object.entries(profile.buttonMappings)) {
+      if (button === "Left" || action.startsWith("Custom (") || action === "Unknown") continue;
+      if (!options.includes(action) || currentMappings[button] === action) continue;
+      pendingStatusText = `Applying ${profile.name}: ${button}…`;
+      readStatus = pendingStatusText;
+      emit();
+      await rawClient.setButtonMapping(button, action);
+    }
+
+    const currentStages = before.dpiStages ?? [];
+    for (const [stage, dpi] of profile.dpiStages.entries()) {
+      if (currentStages[stage] === dpi) continue;
+      pendingStatusText = `Applying ${profile.name}: DPI stage ${stage + 1}…`;
+      readStatus = pendingStatusText;
+      emit();
+      await rawClient.setDpiStageValue(stage, dpi);
+    }
+    if (before.activeDpiStage !== profile.activeDpiStage) {
+      pendingStatusText = `Applying ${profile.name}: active DPI stage…`;
+      readStatus = pendingStatusText;
+      emit();
+      await rawClient.setActiveDpiStage(profile.activeDpiStage);
+    }
+    if (before.pollingRateHz !== profile.pollingRateHz) {
+      pendingStatusText = st("m2nex.applyPolling", { name: profile.name });
+      readStatus = pendingStatusText;
+      emit();
+      await rawClient.setPollingRate(profile.pollingRateHz);
+    }
+
+    const status = await statusAfterWrite(active as SupportedClient);
+    applyStatus(status);
+    m2nexProfileDirty = false;
+    persistM2NexProfiles();
+    setReadStatus(st("m2nex.applyDone", { name: profile.name }));
+    pushToast("success", st("m2nex.applied", { name: profile.name }), st("m2nex.appliedDetail"));
+  } catch (error) {
+    const message = error instanceof Error ? error.message : st("m2nex.applyError");
+    setReadStatus(message);
+    pushToast("error", st("m2nex.applyFailed"), message);
+  } finally {
+    pendingStatusText = null;
+    settingInProgress = false;
+    emit();
+  }
+}
+
+/** Stage one edited slot while preserving other macro slots in the draft. */
+export function applyKsnakeMacro(slot: number, profile: KsnakeMacroProfile): void {
+  if (!Number.isInteger(slot) || slot < 0 || slot >= 32) return;
+  const current = stagedKsnakeMacros ?? ksnakeMacros;
+  if (!current) {
+    setReadStatus(st("macro.notReady"));
+    emit();
+    return;
+  }
+  const next = cloneKsnakeMacros(current);
+  next[slot] = { steps: profile.steps.map((step) => ({ ...step })) };
+  stagedKsnakeMacros = next;
+  stageChange({
+    key: KSNAKE_MACROS_KEY,
+    label: `Macro ${slot + 1}`,
+    command: `Save M2-NEX macro ${slot + 1}`,
+    progress: `Saving M2-NEX macro ${slot + 1}…`,
+    apply: async () => {
+      const client = ksnakeMacroClient();
+      if (!client) throw new Error("The M2-NEX macro interface is no longer connected.");
+      await client.setMacros(next);
+      if (active === client) {
+        ksnakeMacros = cloneKsnakeMacros(next);
+        stagedKsnakeMacros = null;
+        if (isM2NexStatus() && m2nexProfiles?.[activeM2NexProfile]) {
+          m2nexProfiles = m2nexProfiles.map((profile, index) => index === activeM2NexProfile
+            ? { ...profile, macros: cloneKsnakeMacros(next) }
+            : profile);
+          persistM2NexProfiles();
+        }
+        emit();
+      }
+    },
+  });
+}
+
 function readCapabilities(): DeviceCapabilities {
   const razer = activeAs<RazerHidClient>(RazerHidClient);
   const dm = dmClient();
@@ -2110,13 +2395,21 @@ async function activateClientNow(client: SupportedClient): Promise<void> {
   while (refreshInProgress) {
     await new Promise<void>((resolve) => window.setTimeout(resolve, 25));
   }
+  const switchingDevice = activeDevice !== client.device;
   if (active && active !== client) await active.close().catch(() => undefined);
   clearPendingChanges();
   latestDeviceStatus = null;
   clearActiveClients();
-  if (activeDevice !== client.device) {
+  if (switchingDevice) {
     onboardProfiles = null;
     editedNapeLayer = null;
+    ksnakeMacros = null;
+    stagedKsnakeMacros = null;
+    ksnakeMacrosLoading = false;
+    ksnakeMacrosError = null;
+    m2nexProfiles = null;
+    activeM2NexProfile = 0;
+    m2nexProfileDirty = false;
   }
   buttons = null;
   clearNapeKeymaps();
@@ -2146,6 +2439,12 @@ 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)) {
+      m2nexProfiles = null;
+      activeM2NexProfile = 0;
+      m2nexProfileDirty = false;
+    }
     await readButtons();
     await loadNapeKeymap(status.napeLayer ?? editedNapeLayer ?? 1);
     if (dm) {
@@ -2198,6 +2497,13 @@ function showDisconnectedState(): void {
   activeDevice = null;
   onboardProfiles = null;
   editedNapeLayer = null;
+  ksnakeMacros = null;
+  stagedKsnakeMacros = null;
+  ksnakeMacrosLoading = false;
+  ksnakeMacrosError = null;
+  m2nexProfiles = null;
+  activeM2NexProfile = 0;
+  m2nexProfileDirty = false;
   lastRenderedStatusKey = null;
   capabilities = null;
   clearPendingChanges();
@@ -3856,7 +4162,7 @@ export function applyPulsarValue(setting: "debounce" | "sleep", value: number):
     : (activeSettingsClient() && "setDebounceTime" in (activeSettingsClient() ?? {}))
       ? activeSettingsClient()
       : pulsarClient() ?? dmClient() ?? orbitalClient() ?? razerClient()
-        ?? viperClient() ?? teevolutionClient() ?? vgnClient() ?? keychronNapeClient() ?? keychronM6Client() ?? keychron4kClient() ?? wallhackMouseClient()
+        ?? viperClient() ?? teevolutionClient() ?? vgnClient() ?? keychronNapeClient() ?? keychron8kClient() ?? keychron1kClient() ?? keychron4kClient() ?? wallhackMouseClient()
         ?? incottClient() ?? wlmouse4kClient();
   if (!client || (setting === "sleep" && !("setSleepTimeout" in client)) || (setting === "debounce" && !("setDebounceTime" in client))) return;
   const asleep = value !== WLMOUSE_SLEEP_NEVER;
@@ -3882,6 +4188,21 @@ export function toggleSleep(enabled: boolean): void {
   applyPulsarValue("sleep", enabled ? lastSleepSeconds : WLMOUSE_SLEEP_NEVER);
 }
 
+export function applyKsnakeScrollDirection(
+  direction: NonNullable<MouseStatus["scrollDirection"]>,
+): void {
+  if (activeSettingsClient() === null || latestDeviceStatus?.scrollDirection == null) return;
+  if (direction !== "Forward" && direction !== "Reverse") return;
+  stageChange({
+    key: "ksnake-scroll-direction",
+    label: `Scroll direction ${direction.toLowerCase()}`,
+    command: `Set scroll direction to ${direction.toLowerCase()}`,
+    progress: `Setting scroll direction to ${direction.toLowerCase()}…`,
+    preview: (status) => { status.scrollDirection = direction; },
+    apply: () => callClientMethod("setScrollDirection", "scroll direction", direction),
+  });
+}
+
 export function applyLowPowerThreshold(percent: number): void {
   if (!razerClient()) return;
   stageChange({
@@ -4713,6 +5034,7 @@ export function start(): void {
     }
     if (!isPendingChange("gaming-surface")) stagedGamingSurface = null;
     if (!isPendingChange("lightforce-switch-mode")) stagedLightforce = null;
+    if (!isPendingChange(KSNAKE_MACROS_KEY)) stagedKsnakeMacros = null;
     if (!isPendingChange("haptic-strength")) stagedHapticIntensity = null;
     if (!isPendingChange("haptic-enabled")) stagedHapticEnabled = null;
     if (!isPendingChange("haptic-battery-saving")) stagedHapticBatterySaving = null;
diff --git a/src/device/m2nex-profiles.test.ts b/src/device/m2nex-profiles.test.ts
new file mode 100644
index 00000000..a056b3e5
--- /dev/null
+++ b/src/device/m2nex-profiles.test.ts
@@ -0,0 +1,72 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  M2NEX_PROFILE_STORAGE_KEY,
+  defaultM2NexProfiles,
+  loadM2NexProfiles,
+  saveM2NexProfiles,
+  type M2NexProfileSeed,
+} from "./m2nex-profiles.ts";
+
+function seed(): M2NexProfileSeed {
+  return {
+    dpi: 800,
+    dpiStages: [800, 1600, 3200],
+    activeDpiStage: 1,
+    pollingRateHz: 1000,
+    buttonMappings: { Left: "Left click", Right: "Right click" },
+    macros: [{ steps: [] }],
+  };
+}
+
+function storage(): Storage {
+  const values = new Map<string, string>();
+  return {
+    getItem: (key) => values.get(key) ?? null,
+    setItem: (key, value) => { values.set(key, value); },
+    removeItem: () => undefined,
+    clear: () => values.clear(),
+    key: (index) => [...values.keys()][index] ?? null,
+    get length() { return values.size; },
+  };
+}
+
+test("M2-NEX defaults mirror the vendor app's three profile slots", () => {
+  const profiles = defaultM2NexProfiles(seed());
+
+  assert.deepEqual(profiles.map((profile) => profile.name), ["Profile 1", "Profile 2", "Profile 3"]);
+  assert.deepEqual(profiles[1]?.dpiStages, [800, 1600, 3200]);
+  assert.equal(profiles[1]?.activeDpiStage, 1);
+  assert.deepEqual(profiles[1]?.buttonMappings, seed().buttonMappings);
+  assert.deepEqual(profiles[1]?.macros, seed().macros);
+});
+
+test("M2-NEX profiles round-trip through browser storage without sharing mutable data", () => {
+  const store = storage();
+  const profiles = defaultM2NexProfiles(seed());
+  profiles[0]!.name = "FPS";
+  profiles[0]!.buttonMappings.Right = "Macro 1";
+  profiles[0]!.macros = [{ steps: [{ type: 2, action: 1, code: 4, delayMs: 0 }] }];
+
+  saveM2NexProfiles(store, profiles);
+  const loaded = loadM2NexProfiles(store, seed());
+  assert.equal(loaded[0]?.name, "FPS");
+  assert.equal(loaded[0]?.buttonMappings.Right, "Macro 1");
+  assert.deepEqual(loaded[0]?.macros, profiles[0]?.macros);
+
+  loaded[0]!.dpiStages[0] = 400;
+  loaded[0]!.buttonMappings.Right = "Forward";
+  assert.equal(profiles[0]?.dpiStages[0], 800);
+  assert.equal(profiles[0]?.buttonMappings.Right, "Macro 1");
+  assert.ok(store.getItem(M2NEX_PROFILE_STORAGE_KEY));
+});
+
+test("invalid stored profiles fall back to current mouse settings", () => {
+  const store = storage();
+  store.setItem(M2NEX_PROFILE_STORAGE_KEY, JSON.stringify({ version: 1, profiles: [] }));
+
+  const loaded = loadM2NexProfiles(store, seed());
+  assert.deepEqual(loaded.map((profile) => profile.name), ["Profile 1", "Profile 2", "Profile 3"]);
+  assert.deepEqual(loaded[0]?.dpiStages, [800, 1600, 3200]);
+});
diff --git a/src/device/m2nex-profiles.ts b/src/device/m2nex-profiles.ts
new file mode 100644
index 00000000..ed2053e7
--- /dev/null
+++ b/src/device/m2nex-profiles.ts
@@ -0,0 +1,134 @@
+import type { KsnakeMacroProfile } from "@openmouse/protocol/ksnake";
+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";
+
+export interface M2NexProfile {
+  id: number;
+  name: string;
+  /** The complete DPI stage table, not only the currently active value. */
+  dpiStages: number[];
+  activeDpiStage: number;
+  pollingRateHz: number;
+  buttonMappings: Record<string, string>;
+  /** Null means this profile has no trustworthy macro table yet. */
+  macros: KsnakeMacroProfile[] | null;
+}
+
+interface StoredM2NexProfiles {
+  version: 1;
+  profiles: M2NexProfile[];
+}
+
+export type M2NexProfileSeed = Pick<
+  MouseStatus,
+  "dpi" | "dpiStages" | "activeDpiStage" | "pollingRateHz" | "buttonMappings"
+> & {
+  macros?: readonly KsnakeMacroProfile[] | null;
+};
+
+function cloneMacros(macros: readonly KsnakeMacroProfile[] | null | undefined): KsnakeMacroProfile[] | null {
+  if (macros === null || macros === undefined) return null;
+  return macros.map((profile) => ({
+    steps: profile.steps.map((step) => ({ ...step })),
+  }));
+}
+
+export function cloneM2NexProfile(profile: M2NexProfile): M2NexProfile {
+  return {
+    id: profile.id,
+    name: profile.name,
+    dpiStages: [...profile.dpiStages],
+    activeDpiStage: profile.activeDpiStage,
+    pollingRateHz: profile.pollingRateHz,
+    buttonMappings: { ...profile.buttonMappings },
+    macros: cloneMacros(profile.macros),
+  };
+}
+
+function seedProfile(id: number, seed: M2NexProfileSeed): M2NexProfile {
+  const stages = seed.dpiStages?.length ? [...seed.dpiStages] : [seed.dpi];
+  return {
+    id,
+    name: `Profile ${id + 1}`,
+    dpiStages: stages,
+    activeDpiStage: Math.min(Math.max(seed.activeDpiStage ?? 0, 0), stages.length - 1),
+    pollingRateHz: seed.pollingRateHz,
+    buttonMappings: { ...(seed.buttonMappings ?? {}) },
+    macros: cloneMacros(seed.macros),
+  };
+}
+
+export function defaultM2NexProfiles(seed: M2NexProfileSeed): M2NexProfile[] {
+  return Array.from({ length: M2NEX_PROFILE_COUNT }, (_, id) => seedProfile(id, seed));
+}
+
+function validProfile(value: unknown): value is M2NexProfile {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+  const profile = value as Partial<M2NexProfile>;
+  return Number.isInteger(profile.id)
+    && typeof profile.name === "string"
+    && Array.isArray(profile.dpiStages)
+    && profile.dpiStages.length > 0
+    && profile.dpiStages.every((dpi) => typeof dpi === "number" && Number.isFinite(dpi))
+    && Number.isInteger(profile.activeDpiStage)
+    && typeof profile.pollingRateHz === "number"
+    && Number.isFinite(profile.pollingRateHz)
+    && typeof profile.buttonMappings === "object"
+    && profile.buttonMappings !== null
+    && Object.values(profile.buttonMappings).every((action) => typeof action === "string")
+    && (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;
+  return raw.map((value, id) => {
+    const profile = value as M2NexProfile;
+    const stages = profile.dpiStages.slice();
+    return {
+      id,
+      name: profile.name.trim() || `Profile ${id + 1}`,
+      dpiStages: stages,
+      activeDpiStage: Math.min(Math.max(profile.activeDpiStage, 0), stages.length - 1),
+      pollingRateHz: profile.pollingRateHz,
+      buttonMappings: { ...profile.buttonMappings },
+      macros: cloneMacros(profile.macros),
+    };
+  });
+}
+
+/** Load the three profile slots for M2-NEX from browser-local storage. */
+export function loadM2NexProfiles(
+  storage: Pick<Storage, "getItem">,
+  seed: M2NexProfileSeed,
+): M2NexProfile[] {
+  const defaults = defaultM2NexProfiles(seed);
+  try {
+    const raw = storage.getItem(M2NEX_PROFILE_STORAGE_KEY);
+    if (!raw) return defaults;
+    const parsed = JSON.parse(raw) as Partial<StoredM2NexProfiles>;
+    return parsed.version === 1
+      ? normalizeProfiles(parsed.profiles) ?? defaults
+      : defaults;
+  } catch {
+    return defaults;
+  }
+}
+
+/** Persist all slots together, matching the vendor app's profile-table model. */
+export function saveM2NexProfiles(
+  storage: Pick<Storage, "setItem">,
+  profiles: readonly M2NexProfile[],
+): void {
+  const payload: StoredM2NexProfiles = {
+    version: 1,
+    profiles: profiles.map(cloneM2NexProfile),
+  };
+  try {
+    storage.setItem(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/traits.ts b/src/device/traits.ts
index 622b54f3..737f986c 100644
--- a/src/device/traits.ts
+++ b/src/device/traits.ts
@@ -53,6 +53,9 @@ const BY_FAMILY: Readonly<Record<string, Partial<DriverTraits>>> = {
   "keychron-m6": { advancedSection: true, sleep: true, debounce: true },
   // Launcher offers no sleep setting for the 4K family, so only debounce.
   "keychron-4k": { advancedSection: true, debounce: true },
+  // The 8K Nordic family (G3 Air) keeps debounce and sleep in its system block
+  // and publishes its own option lists for both.
+  "keychron-8k-nordic": { advancedSection: true, sleep: true, debounce: true },
   // The Beast X 4K skips the compx transport the rest of WLMouse uses and
   // publishes its own sleep and debounce lists, so it takes the plain flags.
   "wlmouse-4k": { advancedSection: true, sleep: true, debounce: true },
diff --git a/src/device/types.ts b/src/device/types.ts
index ae00aefb..809194e2 100644
--- a/src/device/types.ts
+++ b/src/device/types.ts
@@ -1,18 +1,21 @@
 import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
+import type { KsnakeMacroProfile } from "@openmouse/protocol/ksnake";
 import type { KeychronNapeLayerKeymap } from "@openmouse/protocol/keychron";
 import type { LogitechReprogrammableControl } from "@openmouse/protocol/logitech";
 import type { DpiStageCapabilities, DpiStagePlan, OnboardProfile } from "@openmouse/protocol/drivers/logitech/onboard-profiles";
 import type { InterfacePreferences } from "../interface-preferences";
 import type { PreviewMode } from "../preview-modes";
 import type { DriverTraits } from "./traits";
+import type { M2NexProfile } from "./m2nex-profiles";
 
-export type WorkspaceTab = "overview" | "performance" | "lighting" | "buttons" | "profiles" | "advanced";
+export type WorkspaceTab = "overview" | "performance" | "buttons" | "macro" | "lighting" | "profiles" | "advanced";
 
 export const WORKSPACE_TAB_ORDER: readonly WorkspaceTab[] = [
   "overview",
   "performance",
-  "lighting",
   "buttons",
+  "macro",
+  "lighting",
   "profiles",
   "advanced",
 ];
@@ -200,6 +203,15 @@ export interface ControlSnapshot {
   stagedProfileName: string | null;
   /** Control id → staged remap target, for controls with an unflashed remap. */
   stagedButtonMappings: Record<number, number>;
+  /** M2-NEX/K-snake onboard macro slots, prepared locally for a full-table write. */
+  ksnakeMacros: KsnakeMacroProfile[] | null;
+  ksnakeMacrosLoading: boolean;
+  ksnakeMacrosError: string | null;
+  /** Local profile slots matching the M2-NEX vendor configurator. */
+  m2nexProfiles: M2NexProfile[] | null;
+  activeM2NexProfile: number;
+  /** True when the selected local profile differs from the device. */
+  m2nexProfileDirty: boolean;
   stagedProfileButtonAssignments: StagedProfileButtonAssignment[];
   /** Nape Pro VIA keymap for the layer currently open in the Buttons tab. */
   napeKeymap: KeychronNapeLayerKeymap | null;
diff --git a/src/i18n-ar.ts b/src/i18n-ar.ts
index 56757b2e..445a5f22 100644
--- a/src/i18n-ar.ts
+++ b/src/i18n-ar.ts
@@ -140,6 +140,7 @@ export const ar: Record<I18nKey, string> = {
   "set.languageTitle": "اللغة",
   "set.languageBody": "اختر لغة الواجهة. تبقى رسائل الجهاز بالإنجليزية حاليًا.",
   "set.english": "English",
+  "set.arabic": "العربيّة",
   "set.portuguese": "Português",
   "set.spanish": "Español",
   "set.french": "Français",
@@ -149,7 +150,6 @@ export const ar: Record<I18nKey, string> = {
   "set.korean": "한국어",
   "set.russian": "Русский",
   "set.vietnamese": "Tiếng Việt",
-  "set.arabic": "العربية",
   "set.motion": "الحركة",
   "set.animations": "المؤثرات المتحركة",
   "set.animationsBody": "تفعيل التغيرات والانتقالات الحركية في الواجهة.",
@@ -1019,4 +1019,75 @@ export const ar: Record<I18nKey, string> = {
   "adm.peakConcurrent": "ذروة متزامنة {n}",
   "tab.unavailable": "عناصر تحكم {tab} غير متاحة لهذا الجهاز.",
   "tab.chooseAnother": "اختر تبويبًا آخر لمتابعة ضبط الجهاز.",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 };
diff --git a/src/i18n-de.ts b/src/i18n-de.ts
index e5c881a2..15a3ff0b 100644
--- a/src/i18n-de.ts
+++ b/src/i18n-de.ts
@@ -1021,4 +1021,75 @@ export const de: Record<I18nKey, string> = {
 
   "tab.unavailable": "Die Steuerelemente für {tab} sind für dieses Gerät nicht verfügbar.",
   "tab.chooseAnother": "Wähle einen anderen Tab, um mit der Konfiguration des Geräts fortzufahren.",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-es.ts b/src/i18n-es.ts
index 673e948d..96560c90 100644
--- a/src/i18n-es.ts
+++ b/src/i18n-es.ts
@@ -1021,4 +1021,75 @@ export const es: Record<I18nKey, string> = {
 
   "tab.unavailable": "Los controles de {tab} no están disponibles para este dispositivo.",
   "tab.chooseAnother": "Elige otra pestaña para seguir configurando el dispositivo.",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-fr.ts b/src/i18n-fr.ts
index 86dbc8ae..bddb2ec1 100644
--- a/src/i18n-fr.ts
+++ b/src/i18n-fr.ts
@@ -1021,4 +1021,75 @@ export const fr: Record<I18nKey, string> = {
 
   "tab.unavailable": "Les commandes de {tab} ne sont pas disponibles pour cet appareil.",
   "tab.chooseAnother": "Choisissez un autre onglet pour continuer à configurer l’appareil.",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-ja.ts b/src/i18n-ja.ts
index 71a75631..eef11f5a 100644
--- a/src/i18n-ja.ts
+++ b/src/i18n-ja.ts
@@ -1021,4 +1021,75 @@ export const ja: Record<I18nKey, string> = {
 
   "tab.unavailable": "このデバイスでは{tab}の設定を利用できません。",
   "tab.chooseAnother": "別のタブを選択してデバイスの設定を続けてください。",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-ko.ts b/src/i18n-ko.ts
index 8632c9a2..6314e926 100644
--- a/src/i18n-ko.ts
+++ b/src/i18n-ko.ts
@@ -1021,4 +1021,75 @@ export const ko: Record<I18nKey, string> = {
 
   "tab.unavailable": "이 장치에서는 {tab} 설정을 사용할 수 없습니다.",
   "tab.chooseAnother": "다른 탭을 선택해 장치 설정을 계속하세요.",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-pt.ts b/src/i18n-pt.ts
index d36e3526..b03bbd45 100644
--- a/src/i18n-pt.ts
+++ b/src/i18n-pt.ts
@@ -1021,4 +1021,75 @@ export const pt: Record<I18nKey, string> = {
 
   "tab.unavailable": "Os controles de {tab} não estão disponíveis para este dispositivo.",
   "tab.chooseAnother": "Escolha outra aba para continuar configurando o dispositivo.",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-ru.ts b/src/i18n-ru.ts
index 5a1161e4..a937ba89 100644
--- a/src/i18n-ru.ts
+++ b/src/i18n-ru.ts
@@ -1021,4 +1021,75 @@ export const ru: Record<I18nKey, string> = {
 
   "tab.unavailable": "Настройки «{tab}» недоступны для этого устройства.",
   "tab.chooseAnother": "Выберите другую вкладку, чтобы продолжить настройку устройства.",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-vi.ts b/src/i18n-vi.ts
index 3549ace5..33f33efd 100644
--- a/src/i18n-vi.ts
+++ b/src/i18n-vi.ts
@@ -1027,4 +1027,75 @@ export const vi: Record<I18nKey, string> = {
 
   "conn.addMouse": "Thêm chuột",
   "common.done": "Xong",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n-zh.ts b/src/i18n-zh.ts
index 4f79435b..a8d54b86 100644
--- a/src/i18n-zh.ts
+++ b/src/i18n-zh.ts
@@ -1021,4 +1021,75 @@ export const zh: Record<I18nKey, string> = {
 
   "tab.unavailable": "此设备不支持 {tab} 控制项。",
   "tab.chooseAnother": "请选择其他标签页以继续配置设备。",
+  "tab.macro": "Macro",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.events": "{n} events",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.addManually": "Add manually",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStepTitle": "Remove action",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.liveEvents": "Live event list",
+  "macro.noActions": "No actions in this slot",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
 }
diff --git a/src/i18n.ts b/src/i18n.ts
index 4fcccf01..0d1f3e84 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -55,6 +55,7 @@ const en = {
   "tab.overview": "Overview",
   "tab.performance": "Performance",
   "tab.buttons": "Buttons",
+  "tab.macro": "Macro",
   "tab.profiles": "Profiles",
   "tab.advanced": "Advanced",
   "tab.lighting": "Lighting",
@@ -1024,6 +1025,76 @@ const en = {
 
   "tab.unavailable": "{tab} controls are not available for this device.",
   "tab.chooseAnother": "Choose another tab to continue configuring the device.",
+  "adv.scrollDirection": "Scroll direction",
+  "adv.scrollWheel": "Wheel",
+  "adv.scrollStored": "Stored in the mouse and restored when OpenMouse reconnects.",
+  "conn.forward": "Forward",
+  "conn.reverse": "Reverse",
+  "set.retry": "Retry",
+  "set.cancel": "Cancel",
+  "macro.overline": "MACRO EDITOR",
+  "macro.build": "Build a macro",
+  "macro.lead": "Choose a slot, add actions, then Save. Press Apply to send it to the mouse; assign it in Buttons.",
+  "macro.loading": "Preparing the 32 macro slots…",
+  "macro.slotLabel": "Macro slot",
+  "macro.option": "Macro",
+  "macro.steps": "{n} steps",
+  "macro.empty": "empty",
+  "macro.notice": "Saving updates the onboard macro table on the mouse.",
+  "macro.noticeM2nex": "M2-NEX slots start blank in OpenMouse. Saving rewrites the onboard macro table.",
+  "macro.recording": "Recording input",
+  "macro.addActions": "Add actions",
+  "macro.recorderHint": "Record input or add an action manually.",
+  "macro.eventsHint": "{n} events · Press Esc to stop",
+  "macro.events": "{n} events",
+  "macro.timing": "Timing",
+  "macro.timingFast": "Fast · no delay",
+  "macro.timingRecorded": "Recorded timing",
+  "macro.timingFixed": "Fixed delay",
+  "macro.delay": "Delay",
+  "macro.delayAria": "Fixed delay in milliseconds",
+  "macro.stopRecording": "Stop recording",
+  "macro.recordInput": "Record input",
+  "macro.addManually": "Add manually",
+  "macro.liveEvents": "Live event list",
+  "macro.recordingEmpty": "Press a key or mouse button to add the first event.",
+  "macro.noActions": "No actions in this slot",
+  "macro.noActionsHint": "Choose Record input or Add manually above to get started.",
+  "macro.colInput": "Input",
+  "macro.colAction": "Action",
+  "macro.colCode": "Code",
+  "macro.colDelay": "Delay after",
+  "macro.removeStep": "Remove macro step {n}",
+  "macro.removeStepTitle": "Remove action",
+  "macro.save": "Save macro",
+  "macro.clearSlot": "Clear slot",
+  "macro.helpToggle": "Need help with codes?",
+  "macro.helpBody": "Delay after is the pause after that event. Keyboard codes use standard HID usage values. Modifier codes use masks 1/2/4/8/16/32/64/128; mouse codes are 1 left, 2 right, 4 middle, 8 back, 16 forward. A 0 ms delay uses the device minimum.",
+  "macro.notReady": "The macro editor is not ready yet. Reopen the Buttons tab and try again.",
+  "m2nex.controls": "M2-NEX profile controls",
+  "m2nex.overline": "PROFILE",
+  "m2nex.label": "M2-NEX",
+  "m2nex.select": "Select M2-NEX profile",
+  "m2nex.pending": "Pending",
+  "m2nex.saved": "Saved",
+  "m2nex.apply": "Apply profile",
+  "m2nex.save": "Save to slot",
+  "m2nex.slotName": "Profile {n}",
+  "m2nex.macrosUnavailable": "The connected M2-NEX driver does not expose onboard macro access yet.",
+  "m2nex.switchBlocked": "Apply or discard current changes before switching profiles.",
+  "m2nex.selected": "{name} selected. Apply it when you are ready.",
+  "m2nex.updated": "{name} updated. Apply the profile to send it to the mouse.",
+  "m2nex.saveDone": "{name} saved from the current mouse settings.",
+  "m2nex.savedDetail": "Buttons, DPI, polling rate, and available macros are stored locally.",
+  "m2nex.applyBlocked": "Apply or discard the current changes before applying a profile.",
+  "m2nex.incomplete": "The connected M2-NEX interface cannot apply a complete profile yet.",
+  "m2nex.applyProgress": "Applying {name}…",
+  "m2nex.applyPolling": "Applying {name}: polling rate…",
+  "m2nex.applyDone": "{name} applied to M2-NEX.",
+  "m2nex.applied": "{name} applied",
+  "m2nex.appliedDetail": "The mouse is now using this profile.",
+  "m2nex.applyFailed": "Profile apply failed",
+  "m2nex.applyError": "Unable to apply the M2-NEX profile.",
 } as const;
 
 export type I18nKey = keyof typeof en;
diff --git a/src/supported-devices-crosscheck.test.ts b/src/supported-devices-crosscheck.test.ts
index d26e488a..3d51cd11 100644
--- a/src/supported-devices-crosscheck.test.ts
+++ b/src/supported-devices-crosscheck.test.ts
@@ -63,6 +63,18 @@ test("pid matches prefer the row whose brand matches the device", () => {
   assert.equal(result.pageModel, "G23 V2 (SE / Pro)");
 });
 
+test("M2-NEX resolves to the Noir Gear supported row despite the shared OEM PID", () => {
+  const result = crosscheckSupportedDevices(
+    device({ brand: "Noir Gear", name: "M2-NEX", vendorId: 0xa8a4, productId: 0x2255 }),
+    "pass",
+  );
+  assert.equal(result.listed, true);
+  assert.equal(result.matchedBy, "pid");
+  assert.equal(result.status, "supported");
+  assert.equal(result.pageModel, "M2-NEX");
+  assert.match(result.detail, /already listed as Supported/);
+});
+
 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" }),
@@ -126,4 +138,4 @@ test("statuses other than supported and likely phrase the page row", () => {
 test("detail stays within a single embed field", () => {
   const result = crosscheckSupportedDevices(device({ brand: "ATK", name: "F1 Ultimate" }), "pass");
   assert.ok(result.detail.length <= 300);
-});
\ No newline at end of file
+});
diff --git a/src/supported-devices-data.ts b/src/supported-devices-data.ts
index 8ec17541..c862fd98 100644
--- a/src/supported-devices-data.ts
+++ b/src/supported-devices-data.ts
@@ -318,6 +318,7 @@ export const SUPPORTED_DEVICES: readonly SupportedDeviceEntry[] = [
   { brand: "Cooler Master", model: "MasterMouse MM720", status: "driver" },
   { brand: "Cooler Master", model: "MM711", status: "driver" },
   { brand: "K-snake", model: "X11", status: "supported", pids: [0x2255] },
+  { brand: "Noir Gear", model: "M2-NEX", status: "supported", pids: [0x2255] },
   { brand: "Hitscan", model: "Hyperlight", status: "unknown" },
   { brand: "RAWM", model: "Leviathan V4", status: "unknown" },
   { brand: "AJAZZ", model: "AJ159 Apex", status: "unknown" },
diff --git a/src/ui/device-images.test.ts b/src/ui/device-images.test.ts
index dadfd249..f65c6d3b 100644
--- a/src/ui/device-images.test.ts
+++ b/src/ui/device-images.test.ts
@@ -245,6 +245,16 @@ test("K-snake X11 resolves by name regardless of transport", () => {
   assert.equal(deviceImage(null, "K-snake X11"), CDN + "ksnake-x11.png");
 });
 
+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");
+});
+
+test("Attack Shark X11 does not inherit K-snake artwork", () => {
+  assert.equal(deviceImage(null, "Attack Shark X11"), CDN + "unknown-device.png");
+  assert.equal(deviceImage(null, "Attack Shark X11 SE"), CDN + "unknown-device.png");
+});
+
 test("Attack Shark X3 / X3 Pro resolve by name", () => {
   assert.equal(deviceImage(null, "Attack Shark X3"), CDN + "attackshark-x3.png");
   assert.equal(deviceImage(null, "Attack Shark X3 Pro"), CDN + "attackshark-x3.png");
diff --git a/src/ui/device-images.ts b/src/ui/device-images.ts
index 0252ea4f..2997c091 100644
--- a/src/ui/device-images.ts
+++ b/src/ui/device-images.ts
@@ -167,6 +167,10 @@ function resolveDeviceImageFilename(_device: HIDDevice | null | undefined, displ
   // Pulsar 4K Wireless Receiver ships with the X2 V2 4K dongle kit; the receiver
   // product id is not yet published, so match the name reported by WebHID.
   if (/pulsar/i.test(displayName)) return "pulsar-x2-v2.png";
+  // Noir Gear M2-NEX uses the shared K-snake transport, but has its own
+  // 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 (/fantech/i.test(displayName)) return "unknown-device.png";
   return "unknown-device.png";
 }