From 9000d1f9ba51364df1444bdf6117c4c5c6bf2bb9 Mon Sep 17 00:00:00 2001
From: Dennis <denniswei305@gmail.com>
Date: Mon, 17 Aug 2026 01:09:18 +1000
Subject: [PATCH 1/3] Show Nape Pro onboard layers on the Profiles tab.

---
 src/app/App.tsx                    |   6 +-
 src/app/KeychronLayers.tsx         | 151 +++++++++++++++++++++++++++++
 src/app/cards/availability.test.ts |  19 ++++
 src/app/cards/availability.ts      |   3 +
 src/control-profiles.css           |   4 +-
 src/control.css                    |   2 +-
 src/device/controller.ts           |  85 +++++++++++++++-
 src/device/types.ts                |   2 +
 src/preview-fixtures.ts            |   4 +-
 9 files changed, 270 insertions(+), 6 deletions(-)
 create mode 100644 src/app/KeychronLayers.tsx

diff --git a/src/app/App.tsx b/src/app/App.tsx
index b1a389e..b255932 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -6,6 +6,7 @@ import { CaptureDialog } from "./CaptureDialog";
 import { Diagnostics, LogitechDetails } from "./Diagnostics";
 import { InterfaceSettings } from "./InterfaceSettings";
 import { PendingBar } from "./PendingBar";
+import { KeychronLayers } from "./KeychronLayers";
 import { Profiles } from "./Profiles";
 import { Sidebar } from "./Sidebar";
 import { Superstrike } from "./Superstrike";
@@ -155,6 +156,7 @@ function Workspace({
   ].filter((node) => node !== null);
 
   const showProfiles = show(has.profiles, ["profiles"]);
+  const showKeychronLayers = show(has.keychronLayers, ["profiles"]);
   const showSuperstrike = show(has.superstrike, ["buttons"]);
   const showLogitechDetails = show(has.logitechDetails, ["advanced"]);
   const showMxMaster = on(tab, ["advanced"])
@@ -163,7 +165,8 @@ function Workspace({
   const showOverview = on(tab, ["overview"]);
 
   const anyPanel = performance.length > 0 || advanced.length > 0 || lighting.length > 0
-    || showProfiles || showSuperstrike || showLogitechDetails || showMxMaster || showDiagnostics || showOverview;
+    || showProfiles || showKeychronLayers || showSuperstrike || showLogitechDetails || showMxMaster
+    || showDiagnostics || showOverview;
 
   const slotsAvailable = snapshot.profile.slotsAvailable;
   const stagesAvailable = Boolean(status.ui?.dpiStageEditor)
@@ -188,6 +191,7 @@ function Workspace({
       ) : null}
 
       {showProfiles ? <Profiles snapshot={snapshot} /> : null}
+      {showKeychronLayers ? <KeychronLayers snapshot={snapshot} /> : null}
 
       {performance.length > 0 ? (
         <section
diff --git a/src/app/KeychronLayers.tsx b/src/app/KeychronLayers.tsx
new file mode 100644
index 0000000..dd38f9d
--- /dev/null
+++ b/src/app/KeychronLayers.tsx
@@ -0,0 +1,151 @@
+import { useEffect, useRef, type CSSProperties, type ReactNode } from "react";
+import * as control from "../device/controller";
+import type { ControlSnapshot } from "../device/types";
+import { IconActivate, IconRefresh, IconRunning } from "./icons";
+
+const ROW_STYLE = (open: boolean): CSSProperties => ({
+  display: "flex",
+  gap: ".55rem",
+  alignItems: "center",
+  padding: ".45rem .6rem",
+  border: `1px solid ${open ? "#4a4a52" : "#26262a"}`,
+  borderRadius: "7px",
+  background: open ? "#1b1b1f" : "#141416",
+});
+
+const OPEN_BUTTON_STYLE: CSSProperties = {
+  display: "flex",
+  gap: ".55rem",
+  alignItems: "center",
+  flex: 1,
+  minWidth: 0,
+  textAlign: "left",
+  background: "none",
+  border: 0,
+  padding: 0,
+  cursor: "pointer",
+};
+
+const ICON_BUTTON_STYLE = (disabled: boolean, active = false): CSSProperties => ({
+  display: "flex",
+  padding: ".3rem",
+  border: `1px solid ${active ? "#4a4a52" : "#3a3a3f"}`,
+  borderRadius: "5px",
+  background: "#19191c",
+  cursor: disabled ? "not-allowed" : "pointer",
+  opacity: disabled ? 0.4 : 1,
+});
+
+function layerLabel(layer: number): string {
+  return `Layer ${layer}`;
+}
+
+export function KeychronLayers({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const status = snapshot.status;
+  const count = status?.keychronLayerCount;
+  const inner = useRef<HTMLDivElement>(null);
+  const body = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!body.current || !inner.current) return;
+    body.current.style.maxHeight = snapshot.profilesExpanded ? `${inner.current.scrollHeight}px` : "0px";
+  });
+
+  if (status == null || count == null || count < 1) return null;
+
+  const activeLayer = status.keychronLayer ?? 1;
+  const editedLayer = snapshot.editedKeychronLayer ?? activeLayer;
+  const busy = snapshot.settingInProgress;
+  const tags = [
+    editedLayer === activeLayer ? "active" : null,
+    "editing",
+  ].filter(Boolean).join(" · ");
+
+  return (
+    <section
+      id="keychron-layers"
+      className={`profile-disclosure device-data${snapshot.profilesExpanded ? " is-open" : ""}`}
+      role="tabpanel"
+      aria-labelledby="workspace-tab-profiles"
+    >
+      <div className="profile-summary">
+        <button
+          id="keychron-layer-disclosure-toggle"
+          className="profile-summary-main"
+          type="button"
+          aria-expanded={snapshot.profilesExpanded}
+          aria-controls="keychron-layer-disclosure-body"
+          onClick={control.toggleProfilesExpanded}
+        >
+          <span className="profile-summary-text">
+            <span className="profile-summary-label">EDITING</span>
+            <strong>{layerLabel(editedLayer)}{tags ? ` · ${tags}` : ""}</strong>
+            <small>Onboard layers stored on the Nape Pro</small>
+          </span>
+          <i className="profile-summary-chevron" aria-hidden="true" />
+        </button>
+        <button
+          id="keychron-layer-refresh"
+          className="icon-button"
+          type="button"
+          aria-label="Reload layers"
+          title="Reload layers"
+          disabled={busy}
+          onClick={() => void control.reloadKeychronLayers()}
+        >
+          <IconRefresh />
+        </button>
+      </div>
+
+      <div id="keychron-layer-disclosure-body" className="profile-disclosure-body" ref={body}>
+        <div className="profile-disclosure-inner" ref={inner}>
+          <div id="keychron-layer-list">
+            <small style={{ display: "block", margin: "0 0 .2rem", color: "#5c5c62", fontSize: ".58rem" }}>
+              Click a layer to inspect it. Use the circle to switch the mouse to it.
+            </small>
+            {Array.from({ length: count }, (_, index) => {
+              const layer = index + 1;
+              const opened = editedLayer === layer;
+              const running = activeLayer === layer;
+              const rowTags = [running ? "active" : null, opened ? "editing" : null]
+                .filter(Boolean)
+                .join(" · ");
+              return (
+                <div key={layer} style={ROW_STYLE(opened)}>
+                  <button
+                    type="button"
+                    title="Open this layer"
+                    style={OPEN_BUTTON_STYLE}
+                    onClick={() => control.openKeychronLayer(layer)}
+                  >
+                    <span className={`device-dot${running ? "" : " is-idle"}`} />
+                    <span className="profile-row-text" style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
+                      <strong style={{ fontSize: ".72rem", color: "#e6e6ea" }}>
+                        {layerLabel(layer)}{rowTags ? ` · ${rowTags}` : ""}
+                      </strong>
+                      <small style={{ color: "#77777c", fontSize: ".62rem" }}>
+                        {running ? "Current layer on the mouse" : "Stored on the mouse"}
+                      </small>
+                    </span>
+                  </button>
+                  <button
+                    type="button"
+                    disabled={busy || running}
+                    title={running ? "The mouse is already on this layer" : `Switch the mouse to ${layerLabel(layer)}`}
+                    aria-label={`Switch to ${layerLabel(layer)}`}
+                    aria-pressed={running}
+                    style={ICON_BUTTON_STYLE(busy || running, running)}
+                    onClick={() => void control.switchKeychronLayer(layer)}
+                  >
+                    {running ? <IconRunning /> : <IconActivate />}
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+          <small id="onboard-status">{snapshot.onboardStatus}</small>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/cards/availability.test.ts b/src/app/cards/availability.test.ts
index 19b45ab..1e15f05 100644
--- a/src/app/cards/availability.test.ts
+++ b/src/app/cards/availability.test.ts
@@ -148,6 +148,25 @@ test("onboard profiles need a Logitech mouse reporting a known mode", () => {
   })).profiles, false);
 });
 
+test("Keychron Nape Pro layers appear on the profiles tab when VIA reports a count", () => {
+  const withoutLayers = cardAvailability(snapshot({
+    status: { brand: "Keychron", ui: { family: "keychron-nape", showAdvancedSection: true } },
+  }));
+  assert.equal(withoutLayers.keychronLayers, false);
+  assert.equal(withoutLayers.profiles, false);
+
+  const withLayers = cardAvailability(snapshot({
+    status: {
+      brand: "Keychron",
+      ui: { family: "keychron-nape", showAdvancedSection: true },
+      keychronLayer: 2,
+      keychronLayerCount: 8,
+    },
+  }));
+  assert.equal(withLayers.keychronLayers, true);
+  assert.equal(withLayers.profiles, false);
+});
+
 test("HITS tuning needs exactly the two primary buttons", () => {
   const tuning = { maxActuation: 10, maxRapidTrigger: 5, maxHaptics: 5 };
   assert.equal(cardAvailability(snapshot({
diff --git a/src/app/cards/availability.ts b/src/app/cards/availability.ts
index 024c42a..ebfd977 100644
--- a/src/app/cards/availability.ts
+++ b/src/app/cards/availability.ts
@@ -28,6 +28,7 @@ export interface CardAvailability {
   mxMasterButtons: boolean;
   pulsarPro: boolean;
   profiles: boolean;
+  keychronLayers: boolean;
   logitechDetails: boolean;
   advancedHost: boolean;
 }
@@ -58,6 +59,7 @@ const NOTHING: CardAvailability = {
   mxMasterButtons: false,
   pulsarPro: false,
   profiles: false,
+  keychronLayers: false,
   logitechDetails: false,
   advancedHost: false,
 };
@@ -101,6 +103,7 @@ export function cardAvailability(snapshot: ControlSnapshot): CardAvailability {
     lightingAdvanced: host && Boolean(status.lighting || status.lightingZones?.length),
     profiles: traits.logitech
       && status.deviceMode !== undefined && status.deviceMode !== "Unknown",
+    keychronLayers: status.keychronLayerCount != null && status.keychronLayerCount >= 1,
     logitechDetails: traits.logitech,
     advancedHost: host,
 
diff --git a/src/control-profiles.css b/src/control-profiles.css
index f6f4a67..7e985bd 100644
--- a/src/control-profiles.css
+++ b/src/control-profiles.css
@@ -170,8 +170,8 @@
 /* An auto column sizes to the widest row, which let rows run past the panel
    instead of shrinking into it. A capped 1fr track forces them to fit and lets
    the text ellipsis do its job. */
-#onboard-profile-list { display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;padding-bottom:.5rem }
-#onboard-profile-list > * { min-width:0;box-sizing:border-box }
+#onboard-profile-list, #keychron-layer-list { display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;padding-bottom:.5rem }
+#onboard-profile-list > *, #keychron-layer-list > * { min-width:0;box-sizing:border-box }
 #onboard-status { color:var(--ghost);font-size:.58rem;line-height:1.45 }
 .profile-row-text { overflow:hidden }
 .profile-row-text strong, .profile-row-text small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
diff --git a/src/control.css b/src/control.css
index 29f5720..603c407 100644
--- a/src/control.css
+++ b/src/control.css
@@ -1168,7 +1168,7 @@ body { height: 100vh; overflow: hidden; }
 
 #performance-settings { order: 3; }
 #lighting-settings { order: 4; }
-#logitech-onboard { order: 5; }
+#logitech-onboard, #keychron-layers { order: 5; }
 /* 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. */
diff --git a/src/device/controller.ts b/src/device/controller.ts
index d7e9447..712e3e1 100644
--- a/src/device/controller.ts
+++ b/src/device/controller.ts
@@ -372,6 +372,7 @@ function buildSnapshot(): ControlSnapshot {
               ? `consumer:${edit.binding.usage}`
               : "keyboard",
       })),
+    editedKeychronLayer,
     analogTuning,
     eggPollingDivider,
     pending: {
@@ -1248,6 +1249,7 @@ function applyStatusInner(deviceStatus: MouseStatus, statusKey?: string): void {
     if (onboardProfiles === null && !onboardProfilesLoading) void reloadOnboardProfiles();
     else syncProfileDerivedState();
   }
+  syncEditedKeychronLayer(deviceStatus);
 
   renderDeviceDiagnostics(deviceStatus);
   emit();
@@ -1335,7 +1337,10 @@ async function activateClientNow(client: SupportedClient): Promise<void> {
   clearPendingChanges();
   latestDeviceStatus = null;
   clearActiveClients();
-  if (activeDevice !== client.device) onboardProfiles = null;
+  if (activeDevice !== client.device) {
+    onboardProfiles = null;
+    editedKeychronLayer = null;
+  }
   buttons = null;
   activeDevice = client.device;
   recordDiagnosticCommand("Read device status");
@@ -1409,6 +1414,7 @@ function showDisconnectedState(): void {
   clearActiveClients();
   activeDevice = null;
   onboardProfiles = null;
+  editedKeychronLayer = null;
   lastRenderedStatusKey = null;
   capabilities = null;
   clearPendingChanges();
@@ -1884,6 +1890,7 @@ const stagedProfileButtonEdits = new Map<string, StagedProfileButtonEdit>();
 let dpiSlotPlan: DpiStagePlan | null = null;
 let dpiAxisLocks: boolean[] = [];
 let editedProfile: number | "host" | null = null;
+let editedKeychronLayer: number | null = null;
 
 async function writeStagedProfileSector(): Promise<void> {
   const client = logitechClient();
@@ -2189,6 +2196,82 @@ export async function selectOnboardProfile(sector: number): Promise<void> {
   }
 }
 
+function syncEditedKeychronLayer(status: MouseStatus): void {
+  const count = status.keychronLayerCount;
+  if (count == null || count < 1) {
+    editedKeychronLayer = null;
+    return;
+  }
+  if (editedKeychronLayer == null) profilesExpanded = true;
+  if (editedKeychronLayer == null || editedKeychronLayer < 1 || editedKeychronLayer > count) {
+    editedKeychronLayer = status.keychronLayer ?? 1;
+  }
+  const active = status.keychronLayer ?? 1;
+  onboardStatus = `Running from Layer ${active}. ${count} onboard layer${count === 1 ? "" : "s"} stored on the Nape Pro.`;
+}
+
+export function openKeychronLayer(layer: number): void {
+  const count = latestDeviceStatus?.keychronLayerCount;
+  if (count == null || layer < 1 || layer > count) return;
+  editedKeychronLayer = layer;
+  emit();
+}
+
+export async function reloadKeychronLayers(): Promise<void> {
+  if (isAnyPreview) {
+    emit();
+    return;
+  }
+  const client = keychronClient();
+  if (!client || refreshInProgress || settingInProgress) return;
+  settingInProgress = true;
+  onboardStatus = "Reading onboard layers…";
+  emit();
+  recordDiagnosticCommand("Read Keychron layers");
+  try {
+    applyStatus(await statusAfterWrite(client));
+    const count = latestDeviceStatus?.keychronLayerCount;
+    onboardStatus = count != null
+      ? `${count} onboard layer${count === 1 ? "" : "s"} stored on the Nape Pro.`
+      : "The mouse did not report onboard layers.";
+  } catch (error) {
+    recordDiagnosticError(error, "Unable to read onboard layers.");
+    onboardStatus = error instanceof Error ? error.message : "Unable to read onboard layers.";
+  } finally {
+    endDeviceWrite();
+  }
+}
+
+export async function switchKeychronLayer(layer: number): Promise<void> {
+  const count = latestDeviceStatus?.keychronLayerCount;
+  if (count == null || layer < 1 || layer > count) return;
+  if (isAnyPreview) {
+    const status = latestDeviceStatus;
+    if (!status) return;
+    editedKeychronLayer = layer;
+    applyStatus({ ...status, keychronLayer: layer });
+    setReadStatus(`Preview: switched to Layer ${layer}. Nothing is written.`);
+    return;
+  }
+  const client = keychronClient();
+  if (!client || refreshInProgress || settingInProgress) return;
+  settingInProgress = true;
+  readStatus = `Switching to Layer ${layer}…`;
+  emit();
+  recordDiagnosticCommand(`Select Keychron layer ${layer}`);
+  try {
+    await client.setLayer(layer);
+    editedKeychronLayer = layer;
+    applyStatus(await statusAfterWrite(client));
+    onboardStatus = `Running from Layer ${layer}.`;
+  } catch (error) {
+    recordDiagnosticError(error, "Unable to switch layer.");
+    readStatus = error instanceof Error ? error.message : "Unable to switch layer.";
+  } finally {
+    endDeviceWrite();
+  }
+}
+
 /**
  * Enabling or disabling a slot rewrites the directory sector, so it costs a
  * flash erase/write cycle and uses a write sequence not yet proven on hardware.
diff --git a/src/device/types.ts b/src/device/types.ts
index e73ce6b..961b752 100644
--- a/src/device/types.ts
+++ b/src/device/types.ts
@@ -162,6 +162,8 @@ export interface ControlSnapshot {
   /** Control id → staged remap target, for controls with an unflashed remap. */
   stagedButtonMappings: Record<number, number>;
   stagedProfileButtonAssignments: StagedProfileButtonAssignment[];
+  /** Nape Pro layer currently open in the Profiles tab, or null when unread. */
+  editedKeychronLayer: number | null;
   analogTuning: AnalogTuningState;
   eggPollingDivider: number | null;
 
diff --git a/src/preview-fixtures.ts b/src/preview-fixtures.ts
index 369b79d..53151dc 100644
--- a/src/preview-fixtures.ts
+++ b/src/preview-fixtures.ts
@@ -595,10 +595,12 @@ const KEYCHRON: MouseStatus = {
   supportedPollingRates: [500, 1000, 2000, 4000, 8000],
   activeProfile: null,
   connectionType: "Wired",
-  connectionDetail: "Wired USB · 90° orientation · DPI stage 2/5",
+  connectionDetail: "Wired USB · 90° orientation · DPI stage 2/5 · Layer 1",
   liftOffDistance: null,
   supportedLiftOffDistances: [],
   sleepTimeout: 600,
+  keychronLayer: 1,
+  keychronLayerCount: 8,
   firmware: ["v1.0.4"],
 };
 

From 5fecac8eb02590b8b531c585800bafd83f4932e5 Mon Sep 17 00:00:00 2001
From: Dennis <denniswei305@gmail.com>
Date: Mon, 17 Aug 2026 04:03:29 +1000
Subject: [PATCH 2/3] Stage Nape Pro button assignments on Profiles and rename
 Keychron APIs as Nape-only.

---
 src/app/App.tsx                    |   8 +-
 src/app/KeychronLayers.tsx         | 151 ---------------
 src/app/KeychronNapeLayers.tsx     | 296 +++++++++++++++++++++++++++++
 src/app/cards/availability.test.ts |   8 +-
 src/app/cards/availability.ts      |   6 +-
 src/control-profiles.css           |   4 +-
 src/control.css                    |   2 +-
 src/device/controller.ts           | 273 ++++++++++++++++++++++----
 src/device/types.ts                |  18 +-
 src/preview-fixtures.ts            |   8 +-
 src/preview-modes.ts               |   5 +-
 src/supported-live.ts              |   4 +-
 src/supported-mice.test.ts         |   4 +-
 src/supported-mice.ts              |   2 +-
 14 files changed, 578 insertions(+), 211 deletions(-)
 delete mode 100644 src/app/KeychronLayers.tsx
 create mode 100644 src/app/KeychronNapeLayers.tsx

diff --git a/src/app/App.tsx b/src/app/App.tsx
index b255932..550b6bd 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -6,7 +6,7 @@ import { CaptureDialog } from "./CaptureDialog";
 import { Diagnostics, LogitechDetails } from "./Diagnostics";
 import { InterfaceSettings } from "./InterfaceSettings";
 import { PendingBar } from "./PendingBar";
-import { KeychronLayers } from "./KeychronLayers";
+import { KeychronNapeLayers } from "./KeychronNapeLayers";
 import { Profiles } from "./Profiles";
 import { Sidebar } from "./Sidebar";
 import { Superstrike } from "./Superstrike";
@@ -156,7 +156,7 @@ function Workspace({
   ].filter((node) => node !== null);
 
   const showProfiles = show(has.profiles, ["profiles"]);
-  const showKeychronLayers = show(has.keychronLayers, ["profiles"]);
+  const showNapeLayers = show(has.keychronNapeLayers, ["profiles"]);
   const showSuperstrike = show(has.superstrike, ["buttons"]);
   const showLogitechDetails = show(has.logitechDetails, ["advanced"]);
   const showMxMaster = on(tab, ["advanced"])
@@ -165,7 +165,7 @@ function Workspace({
   const showOverview = on(tab, ["overview"]);
 
   const anyPanel = performance.length > 0 || advanced.length > 0 || lighting.length > 0
-    || showProfiles || showKeychronLayers || showSuperstrike || showLogitechDetails || showMxMaster
+    || showProfiles || showNapeLayers || showSuperstrike || showLogitechDetails || showMxMaster
     || showDiagnostics || showOverview;
 
   const slotsAvailable = snapshot.profile.slotsAvailable;
@@ -191,7 +191,7 @@ function Workspace({
       ) : null}
 
       {showProfiles ? <Profiles snapshot={snapshot} /> : null}
-      {showKeychronLayers ? <KeychronLayers snapshot={snapshot} /> : null}
+      {showNapeLayers ? <KeychronNapeLayers snapshot={snapshot} /> : null}
 
       {performance.length > 0 ? (
         <section
diff --git a/src/app/KeychronLayers.tsx b/src/app/KeychronLayers.tsx
deleted file mode 100644
index dd38f9d..0000000
--- a/src/app/KeychronLayers.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { useEffect, useRef, type CSSProperties, type ReactNode } from "react";
-import * as control from "../device/controller";
-import type { ControlSnapshot } from "../device/types";
-import { IconActivate, IconRefresh, IconRunning } from "./icons";
-
-const ROW_STYLE = (open: boolean): CSSProperties => ({
-  display: "flex",
-  gap: ".55rem",
-  alignItems: "center",
-  padding: ".45rem .6rem",
-  border: `1px solid ${open ? "#4a4a52" : "#26262a"}`,
-  borderRadius: "7px",
-  background: open ? "#1b1b1f" : "#141416",
-});
-
-const OPEN_BUTTON_STYLE: CSSProperties = {
-  display: "flex",
-  gap: ".55rem",
-  alignItems: "center",
-  flex: 1,
-  minWidth: 0,
-  textAlign: "left",
-  background: "none",
-  border: 0,
-  padding: 0,
-  cursor: "pointer",
-};
-
-const ICON_BUTTON_STYLE = (disabled: boolean, active = false): CSSProperties => ({
-  display: "flex",
-  padding: ".3rem",
-  border: `1px solid ${active ? "#4a4a52" : "#3a3a3f"}`,
-  borderRadius: "5px",
-  background: "#19191c",
-  cursor: disabled ? "not-allowed" : "pointer",
-  opacity: disabled ? 0.4 : 1,
-});
-
-function layerLabel(layer: number): string {
-  return `Layer ${layer}`;
-}
-
-export function KeychronLayers({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
-  const status = snapshot.status;
-  const count = status?.keychronLayerCount;
-  const inner = useRef<HTMLDivElement>(null);
-  const body = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!body.current || !inner.current) return;
-    body.current.style.maxHeight = snapshot.profilesExpanded ? `${inner.current.scrollHeight}px` : "0px";
-  });
-
-  if (status == null || count == null || count < 1) return null;
-
-  const activeLayer = status.keychronLayer ?? 1;
-  const editedLayer = snapshot.editedKeychronLayer ?? activeLayer;
-  const busy = snapshot.settingInProgress;
-  const tags = [
-    editedLayer === activeLayer ? "active" : null,
-    "editing",
-  ].filter(Boolean).join(" · ");
-
-  return (
-    <section
-      id="keychron-layers"
-      className={`profile-disclosure device-data${snapshot.profilesExpanded ? " is-open" : ""}`}
-      role="tabpanel"
-      aria-labelledby="workspace-tab-profiles"
-    >
-      <div className="profile-summary">
-        <button
-          id="keychron-layer-disclosure-toggle"
-          className="profile-summary-main"
-          type="button"
-          aria-expanded={snapshot.profilesExpanded}
-          aria-controls="keychron-layer-disclosure-body"
-          onClick={control.toggleProfilesExpanded}
-        >
-          <span className="profile-summary-text">
-            <span className="profile-summary-label">EDITING</span>
-            <strong>{layerLabel(editedLayer)}{tags ? ` · ${tags}` : ""}</strong>
-            <small>Onboard layers stored on the Nape Pro</small>
-          </span>
-          <i className="profile-summary-chevron" aria-hidden="true" />
-        </button>
-        <button
-          id="keychron-layer-refresh"
-          className="icon-button"
-          type="button"
-          aria-label="Reload layers"
-          title="Reload layers"
-          disabled={busy}
-          onClick={() => void control.reloadKeychronLayers()}
-        >
-          <IconRefresh />
-        </button>
-      </div>
-
-      <div id="keychron-layer-disclosure-body" className="profile-disclosure-body" ref={body}>
-        <div className="profile-disclosure-inner" ref={inner}>
-          <div id="keychron-layer-list">
-            <small style={{ display: "block", margin: "0 0 .2rem", color: "#5c5c62", fontSize: ".58rem" }}>
-              Click a layer to inspect it. Use the circle to switch the mouse to it.
-            </small>
-            {Array.from({ length: count }, (_, index) => {
-              const layer = index + 1;
-              const opened = editedLayer === layer;
-              const running = activeLayer === layer;
-              const rowTags = [running ? "active" : null, opened ? "editing" : null]
-                .filter(Boolean)
-                .join(" · ");
-              return (
-                <div key={layer} style={ROW_STYLE(opened)}>
-                  <button
-                    type="button"
-                    title="Open this layer"
-                    style={OPEN_BUTTON_STYLE}
-                    onClick={() => control.openKeychronLayer(layer)}
-                  >
-                    <span className={`device-dot${running ? "" : " is-idle"}`} />
-                    <span className="profile-row-text" style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
-                      <strong style={{ fontSize: ".72rem", color: "#e6e6ea" }}>
-                        {layerLabel(layer)}{rowTags ? ` · ${rowTags}` : ""}
-                      </strong>
-                      <small style={{ color: "#77777c", fontSize: ".62rem" }}>
-                        {running ? "Current layer on the mouse" : "Stored on the mouse"}
-                      </small>
-                    </span>
-                  </button>
-                  <button
-                    type="button"
-                    disabled={busy || running}
-                    title={running ? "The mouse is already on this layer" : `Switch the mouse to ${layerLabel(layer)}`}
-                    aria-label={`Switch to ${layerLabel(layer)}`}
-                    aria-pressed={running}
-                    style={ICON_BUTTON_STYLE(busy || running, running)}
-                    onClick={() => void control.switchKeychronLayer(layer)}
-                  >
-                    {running ? <IconRunning /> : <IconActivate />}
-                  </button>
-                </div>
-              );
-            })}
-          </div>
-          <small id="onboard-status">{snapshot.onboardStatus}</small>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/src/app/KeychronNapeLayers.tsx b/src/app/KeychronNapeLayers.tsx
new file mode 100644
index 0000000..c521501
--- /dev/null
+++ b/src/app/KeychronNapeLayers.tsx
@@ -0,0 +1,296 @@
+import { useEffect, useRef, type CSSProperties, type ReactNode } from "react";
+import {
+  KEYCHRON_NAPE_BUTTON_ACTIONS,
+  keychronLayerLabel,
+  type KeychronNapeButtonAction,
+} from "@openmouse/protocol/keychron";
+import * as control from "../device/controller";
+import type { ControlSnapshot, NapeAssignmentControl, StagedNapeAssignment } from "../device/types";
+import { IconActivate, IconRefresh, IconRunning } from "./icons";
+
+const ROW_STYLE = (open: boolean): CSSProperties => ({
+  display: "flex",
+  gap: ".55rem",
+  alignItems: "center",
+  padding: ".45rem .6rem",
+  border: `1px solid ${open ? "#4a4a52" : "#26262a"}`,
+  borderRadius: "7px",
+  background: open ? "#1b1b1f" : "#141416",
+});
+
+const OPEN_BUTTON_STYLE: CSSProperties = {
+  display: "flex",
+  gap: ".55rem",
+  alignItems: "center",
+  flex: 1,
+  minWidth: 0,
+  textAlign: "left",
+  background: "none",
+  border: 0,
+  padding: 0,
+  cursor: "pointer",
+};
+
+const ICON_BUTTON_STYLE = (disabled: boolean, active = false): CSSProperties => ({
+  display: "flex",
+  padding: ".3rem",
+  border: `1px solid ${active ? "#4a4a52" : "#3a3a3f"}`,
+  borderRadius: "5px",
+  background: "#19191c",
+  cursor: disabled ? "not-allowed" : "pointer",
+  opacity: disabled ? 0.4 : 1,
+});
+
+const KEY_ROWS = [
+  { col: 2, number: "1", name: "01" },
+  { col: 3, number: "2", name: "02" },
+  { col: 0, number: "3", name: "03" },
+  { col: 1, number: "4", name: "04" },
+  { col: 4, number: "5", name: "M1" },
+  { col: 5, number: "6", name: "M2" },
+] as const;
+
+function pendingKey(layer: number, target: NapeAssignmentControl): string {
+  return target.kind === "key"
+    ? `nape-${layer}-col-${target.col}`
+    : `nape-${layer}-wheel-${target.clockwise ? "cw" : "ccw"}`;
+}
+
+function stagedFor(
+  staged: readonly StagedNapeAssignment[],
+  layer: number,
+  target: NapeAssignmentControl,
+): StagedNapeAssignment | undefined {
+  return staged.find((entry) => {
+    if (entry.layer !== layer) return false;
+    if (entry.control.kind === "key" && target.kind === "key") return entry.control.col === target.col;
+    if (entry.control.kind === "wheel" && target.kind === "wheel") {
+      return entry.control.clockwise === target.clockwise;
+    }
+    return false;
+  });
+}
+
+function AssignmentSelect({
+  layer,
+  target,
+  action,
+  keycode,
+  staged,
+  disabled,
+}: {
+  layer: number;
+  target: NapeAssignmentControl;
+  action: string;
+  keycode: number;
+  staged: StagedNapeAssignment | undefined;
+  disabled: boolean;
+}): ReactNode {
+  const value = staged?.action ?? action;
+  return (
+    <span className="assignment-select-wrap">
+      <select
+        value={value}
+        disabled={disabled}
+        title={action === "Custom" ? `Unknown mapping: 0x${keycode.toString(16).padStart(4, "0")}` : undefined}
+        onChange={(event) => {
+          const next = event.currentTarget.value;
+          if (next === "Custom") return;
+          control.applyNapeAssignment(layer, target, next as KeychronNapeButtonAction);
+        }}
+      >
+        {value === "Custom" ? <option value="Custom">Custom mapping (preserved)</option> : null}
+        {KEYCHRON_NAPE_BUTTON_ACTIONS.map((option) => (
+          <option key={option} value={option}>{option}</option>
+        ))}
+      </select>
+      <i aria-hidden="true" />
+    </span>
+  );
+}
+
+function NapeAssignments({ snapshot, layer }: { snapshot: ControlSnapshot; layer: number }): ReactNode {
+  const map = snapshot.napeKeymap;
+  const busy = snapshot.settingInProgress;
+  const ready = map != null && map.layer === layer;
+  return (
+    <div className="profile-button-editor">
+      <div className="profile-button-heading">
+        <div>
+          <p>BUTTONS</p>
+          <h2>Onboard assignments</h2>
+          <small>Choose what each physical control does on this layer.</small>
+        </div>
+      </div>
+      {ready && map ? (
+        <div className="assignment-grid">
+          {KEY_ROWS.map((row) => {
+            const key = map.keys.find((entry) => entry.col === row.col);
+            if (!key) return null;
+            const target: NapeAssignmentControl = { kind: "key", col: row.col };
+            const staged = stagedFor(snapshot.stagedNapeAssignments, layer, target);
+            return (
+              <label
+                key={row.col}
+                className={`assignment-card${staged ? " is-staged" : ""}`}
+                data-pending-key={pendingKey(layer, target)}
+              >
+                <span className="assignment-button-number">{row.number}</span>
+                <span className="assignment-button-name">{row.name}</span>
+                <AssignmentSelect
+                  layer={layer}
+                  target={target}
+                  action={key.action}
+                  keycode={key.keycode}
+                  staged={staged}
+                  disabled={busy}
+                />
+              </label>
+            );
+          })}
+          {([
+            { clockwise: false, number: "7", name: "Scroll wheel Counter Clockwise", current: map.wheel.ccw },
+            { clockwise: true, number: "8", name: "Scroll wheel Clockwise", current: map.wheel.cw },
+          ] as const).map((row) => {
+            const target: NapeAssignmentControl = { kind: "wheel", clockwise: row.clockwise };
+            const staged = stagedFor(snapshot.stagedNapeAssignments, layer, target);
+            return (
+              <label
+                key={row.name}
+                className={`assignment-card${staged ? " is-staged" : ""}`}
+                data-pending-key={pendingKey(layer, target)}
+              >
+                <span className="assignment-button-number">{row.number}</span>
+                <span className="assignment-button-name">{row.name}</span>
+                <AssignmentSelect
+                  layer={layer}
+                  target={target}
+                  action={row.current.action}
+                  keycode={row.current.keycode}
+                  staged={staged}
+                  disabled={busy}
+                />
+              </label>
+            );
+          })}
+        </div>
+      ) : (
+        <small className="setting-note">Reading {keychronLayerLabel(layer)}…</small>
+      )}
+      <small className="setting-note">
+        Changes stay on this layer until you apply them. Clockwise and counter-clockwise scroll can be set independently.
+      </small>
+    </div>
+  );
+}
+
+export function KeychronNapeLayers({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const status = snapshot.status;
+  const count = status?.napeLayerCount;
+  const inner = useRef<HTMLDivElement>(null);
+  const body = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!body.current || !inner.current) return;
+    body.current.style.maxHeight = snapshot.profilesExpanded ? `${inner.current.scrollHeight}px` : "0px";
+  });
+
+  if (status == null || count == null || count < 1) return null;
+
+  const activeLayer = status.napeLayer ?? 1;
+  const editedLayer = snapshot.editedNapeLayer ?? activeLayer;
+  const busy = snapshot.settingInProgress;
+  const tags = [
+    editedLayer === activeLayer ? "active" : null,
+    "editing",
+  ].filter(Boolean).join(" · ");
+
+  return (
+    <section
+      id="nape-layers"
+      className={`profile-disclosure device-data${snapshot.profilesExpanded ? " is-open" : ""}`}
+      role="tabpanel"
+      aria-labelledby="workspace-tab-profiles"
+    >
+      <div className="profile-summary">
+        <button
+          id="nape-layer-disclosure-toggle"
+          className="profile-summary-main"
+          type="button"
+          aria-expanded={snapshot.profilesExpanded}
+          aria-controls="nape-layer-disclosure-body"
+          onClick={control.toggleProfilesExpanded}
+        >
+          <span className="profile-summary-text">
+            <span className="profile-summary-label">EDITING</span>
+            <strong>{keychronLayerLabel(editedLayer)}{tags ? ` · ${tags}` : ""}</strong>
+            <small>Onboard layers stored on the Nape Pro</small>
+          </span>
+          <i className="profile-summary-chevron" aria-hidden="true" />
+        </button>
+        <button
+          id="nape-layer-refresh"
+          className="icon-button"
+          type="button"
+          aria-label="Reload layers"
+          title="Reload layers"
+          disabled={busy}
+          onClick={() => void control.reloadNapeLayers()}
+        >
+          <IconRefresh />
+        </button>
+      </div>
+
+      <div id="nape-layer-disclosure-body" className="profile-disclosure-body" ref={body}>
+        <div className="profile-disclosure-inner" ref={inner}>
+          <div id="nape-layer-list">
+            <small style={{ display: "block", margin: "0 0 .2rem", color: "#5c5c62", fontSize: ".58rem" }}>
+              Click a layer to inspect it. Use the circle to switch the mouse to it.
+            </small>
+            {Array.from({ length: count }, (_, index) => {
+              const layer = index + 1;
+              const opened = editedLayer === layer;
+              const running = activeLayer === layer;
+              const rowTags = [running ? "active" : null, opened ? "editing" : null]
+                .filter(Boolean)
+                .join(" · ");
+              return (
+                <div key={layer} style={ROW_STYLE(opened)}>
+                  <button
+                    type="button"
+                    title="Open this layer"
+                    style={OPEN_BUTTON_STYLE}
+                    onClick={() => control.openNapeLayer(layer)}
+                  >
+                    <span className={`device-dot${running ? "" : " is-idle"}`} />
+                    <span className="profile-row-text" style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
+                      <strong style={{ fontSize: ".72rem", color: "#e6e6ea" }}>
+                        {keychronLayerLabel(layer)}{rowTags ? ` · ${rowTags}` : ""}
+                      </strong>
+                      <small style={{ color: "#77777c", fontSize: ".62rem" }}>
+                        {running ? "Current layer on the mouse" : "Stored on the mouse"}
+                      </small>
+                    </span>
+                  </button>
+                  <button
+                    type="button"
+                    disabled={busy || running}
+                    title={running ? "The mouse is already on this layer" : `Switch the mouse to ${keychronLayerLabel(layer)}`}
+                    aria-label={`Switch to ${keychronLayerLabel(layer)}`}
+                    aria-pressed={running}
+                    style={ICON_BUTTON_STYLE(busy || running, running)}
+                    onClick={() => void control.switchNapeLayer(layer)}
+                  >
+                    {running ? <IconRunning /> : <IconActivate />}
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+          <small id="onboard-status">{snapshot.onboardStatus}</small>
+          <NapeAssignments snapshot={snapshot} layer={editedLayer} />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/cards/availability.test.ts b/src/app/cards/availability.test.ts
index 1e15f05..137044e 100644
--- a/src/app/cards/availability.test.ts
+++ b/src/app/cards/availability.test.ts
@@ -152,18 +152,18 @@ test("Keychron Nape Pro layers appear on the profiles tab when VIA reports a cou
   const withoutLayers = cardAvailability(snapshot({
     status: { brand: "Keychron", ui: { family: "keychron-nape", showAdvancedSection: true } },
   }));
-  assert.equal(withoutLayers.keychronLayers, false);
+  assert.equal(withoutLayers.keychronNapeLayers, false);
   assert.equal(withoutLayers.profiles, false);
 
   const withLayers = cardAvailability(snapshot({
     status: {
       brand: "Keychron",
       ui: { family: "keychron-nape", showAdvancedSection: true },
-      keychronLayer: 2,
-      keychronLayerCount: 8,
+      napeLayer: 2,
+      napeLayerCount: 8,
     },
   }));
-  assert.equal(withLayers.keychronLayers, true);
+  assert.equal(withLayers.keychronNapeLayers, true);
   assert.equal(withLayers.profiles, false);
 });
 
diff --git a/src/app/cards/availability.ts b/src/app/cards/availability.ts
index ebfd977..1ad7d98 100644
--- a/src/app/cards/availability.ts
+++ b/src/app/cards/availability.ts
@@ -28,7 +28,7 @@ export interface CardAvailability {
   mxMasterButtons: boolean;
   pulsarPro: boolean;
   profiles: boolean;
-  keychronLayers: boolean;
+  keychronNapeLayers: boolean;
   logitechDetails: boolean;
   advancedHost: boolean;
 }
@@ -59,7 +59,7 @@ const NOTHING: CardAvailability = {
   mxMasterButtons: false,
   pulsarPro: false,
   profiles: false,
-  keychronLayers: false,
+  keychronNapeLayers: false,
   logitechDetails: false,
   advancedHost: false,
 };
@@ -103,7 +103,7 @@ export function cardAvailability(snapshot: ControlSnapshot): CardAvailability {
     lightingAdvanced: host && Boolean(status.lighting || status.lightingZones?.length),
     profiles: traits.logitech
       && status.deviceMode !== undefined && status.deviceMode !== "Unknown",
-    keychronLayers: status.keychronLayerCount != null && status.keychronLayerCount >= 1,
+    keychronNapeLayers: status.napeLayerCount != null && status.napeLayerCount >= 1,
     logitechDetails: traits.logitech,
     advancedHost: host,
 
diff --git a/src/control-profiles.css b/src/control-profiles.css
index 7e985bd..ca52b7d 100644
--- a/src/control-profiles.css
+++ b/src/control-profiles.css
@@ -170,8 +170,8 @@
 /* An auto column sizes to the widest row, which let rows run past the panel
    instead of shrinking into it. A capped 1fr track forces them to fit and lets
    the text ellipsis do its job. */
-#onboard-profile-list, #keychron-layer-list { display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;padding-bottom:.5rem }
-#onboard-profile-list > *, #keychron-layer-list > * { min-width:0;box-sizing:border-box }
+#onboard-profile-list, #nape-layer-list { display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;padding-bottom:.5rem }
+#onboard-profile-list > *, #nape-layer-list > * { min-width:0;box-sizing:border-box }
 #onboard-status { color:var(--ghost);font-size:.58rem;line-height:1.45 }
 .profile-row-text { overflow:hidden }
 .profile-row-text strong, .profile-row-text small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
diff --git a/src/control.css b/src/control.css
index 603c407..a13f761 100644
--- a/src/control.css
+++ b/src/control.css
@@ -1168,7 +1168,7 @@ body { height: 100vh; overflow: hidden; }
 
 #performance-settings { order: 3; }
 #lighting-settings { order: 4; }
-#logitech-onboard, #keychron-layers { order: 5; }
+#logitech-onboard, #nape-layers { order: 5; }
 /* 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. */
diff --git a/src/device/controller.ts b/src/device/controller.ts
index 712e3e1..8b3e401 100644
--- a/src/device/controller.ts
+++ b/src/device/controller.ts
@@ -108,7 +108,17 @@ import { ZaunkoenigHidClient } from "@openmouse/protocol/drivers/zaunkoenig/hid"
 import { TeevolutionHidClient } from "@openmouse/protocol/drivers/teevolution/hid";
 import { teevolutionProfileForCid } from "@openmouse/protocol/teevolution";
 import { VgnF2HidClient } from "@openmouse/protocol/drivers/vgn/hid";
-import { KeychronHidClient } from "@openmouse/protocol/drivers/keychron/hid";
+import { KeychronNapeHidClient } from "@openmouse/protocol/drivers/keychron/nape-hid";
+import {
+  KEYCHRON_NAPE_KEYCODE,
+  KEYCHRON_NAPE_KEY_CONTROLS,
+  keychronActionForKeycode,
+  keychronKeycodeForAction,
+  keychronLayerKeymapFromCodes,
+  keychronLayerLabel,
+  type KeychronNapeButtonAction,
+  type KeychronNapeLayerKeymap,
+} from "@openmouse/protocol/keychron";
 import { SUPPORTED_HID_FILTERS } from "@openmouse/protocol/drivers/vendors";
 import { WLMouseHidClient } from "@openmouse/protocol/drivers/wlmouse/hid";
 import { parsePreviewMode, previewsEnabled, type PreviewMode } from "../preview-modes";
@@ -121,9 +131,11 @@ import type {
   ProfileView,
   DeviceCapabilities,
   DiagnosticsView,
+  NapeAssignmentControl,
   LiftOffLevel,
   PulsarToggleSetting,
   SidebarDevice,
+  StagedNapeAssignment,
   TeevolutionProfile,
   Toast,
   ToastKind,
@@ -160,7 +172,7 @@ function activeAs<T>(...classes: ClientClass<T>[]): T | null {
 
 const DM_CLASSES = [WLMouseHidClient, LamzuHidClient, AtkHidClient, NinjutsoHidClient] as const;
 const RAZER_CLASSES = [RazerHidClient, RazerViperMiniHidClient, RazerViperHidClient, RazerCobraHidClient] as const;
-const NEEDS_OPEN = [TeevolutionHidClient, VgnF2HidClient, KeychronHidClient, ModdoHidClient, ZaunkoenigHidClient] as const;
+const NEEDS_OPEN = [TeevolutionHidClient, VgnF2HidClient, KeychronNapeHidClient, ModdoHidClient, ZaunkoenigHidClient] as const;
 const DEDICATED = [
   ...DM_CLASSES, ...RAZER_CLASSES, ...NEEDS_OPEN,
   EggOp1HidClient, LogitechHidppClient, OrbitalHidClient, RazerViperV4ProHidClient, FinalmouseHidClient,
@@ -180,7 +192,7 @@ const teevolutionClient = (): TeevolutionHidClient | null => activeAs(Teevolutio
 const finalmouseClient = (): FinalmouseHidClient | null => activeAs(FinalmouseHidClient);
 const orbitalClient = (): OrbitalHidClient | null => activeAs(OrbitalHidClient);
 const vgnClient = (): VgnF2HidClient | null => activeAs(VgnF2HidClient);
-const keychronClient = (): KeychronHidClient | null => activeAs(KeychronHidClient);
+const keychronNapeClient = (): KeychronNapeHidClient | null => activeAs(KeychronNapeHidClient);
 /** Pulsar is the fallback: any supported client no dedicated driver claims. */
 const pulsarClient = (): PulsarClient | null =>
   active !== null && !isEggWeClient(active) && !DEDICATED.some((cls) => active instanceof cls)
@@ -189,6 +201,10 @@ const pulsarClient = (): PulsarClient | null =>
 
 let onboardProfiles: OnboardProfile[] | null = null;
 let buttons: LogitechReprogrammableControl[] | null = null;
+let napeKeymap: KeychronNapeLayerKeymap | null = null;
+const napeKeymaps = new Map<number, KeychronNapeLayerKeymap>();
+const stagedNapeAssignments = new Map<string, StagedNapeAssignment>();
+let keymapReadToken = 0;
 let onboardProfilesLoading = false;
 let lastDeviceMode: MouseStatus["deviceMode"] = "Unknown";
 let lastProfileFormat: MouseStatus["onboardProfileFormat"] = null;
@@ -372,7 +388,9 @@ function buildSnapshot(): ControlSnapshot {
               ? `consumer:${edit.binding.usage}`
               : "keyboard",
       })),
-    editedKeychronLayer,
+    napeKeymap,
+    stagedNapeAssignments: [...stagedNapeAssignments.values()],
+    editedNapeLayer,
     analogTuning,
     eggPollingDivider,
     pending: {
@@ -480,7 +498,7 @@ function requireClientMethod<K extends string>(
 function readCapabilities(): DeviceCapabilities {
   const razer = activeAs<RazerHidClient>(RazerHidClient);
   const dm = dmClient();
-  const keychron = keychronClient();
+  const keychron = keychronNapeClient();
   return {
     canDisableSleep: dm?.canDisableSleep === true,
     sleepOptions: dm
@@ -1249,7 +1267,7 @@ function applyStatusInner(deviceStatus: MouseStatus, statusKey?: string): void {
     if (onboardProfiles === null && !onboardProfilesLoading) void reloadOnboardProfiles();
     else syncProfileDerivedState();
   }
-  syncEditedKeychronLayer(deviceStatus);
+  syncEditedNapeLayer(deviceStatus);
 
   renderDeviceDiagnostics(deviceStatus);
   emit();
@@ -1339,9 +1357,10 @@ async function activateClientNow(client: SupportedClient): Promise<void> {
   clearActiveClients();
   if (activeDevice !== client.device) {
     onboardProfiles = null;
-    editedKeychronLayer = null;
+    editedNapeLayer = null;
   }
   buttons = null;
+  clearNapeKeymaps();
   activeDevice = client.device;
   recordDiagnosticCommand("Read device status");
   lastRenderedStatusKey = null;
@@ -1356,7 +1375,7 @@ async function activateClientNow(client: SupportedClient): Promise<void> {
     const status = await client.readStatus();
     dpiOptions = await client.getDpiOptions();
     const dm = dmClient();
-    const keychron = keychronClient();
+    const keychron = keychronNapeClient();
     if (dm) lastSleepSeconds = status.sleepTimeout ?? dm.getSleepOptions()[0] ?? 60;
     else if (keychron) {
       lastSleepSeconds = status.sleepTimeout ?? keychron.getSleepOptions()[0] ?? 60;
@@ -1365,6 +1384,7 @@ async function activateClientNow(client: SupportedClient): Promise<void> {
     capabilities = readCapabilities();
     applyStatus(status);
     await readButtons();
+    await loadNapeKeymap(status.napeLayer ?? editedNapeLayer ?? 1);
     if (dm) {
       await dm.startNotifications(() => {
         void refreshStatus();
@@ -1414,11 +1434,13 @@ function showDisconnectedState(): void {
   clearActiveClients();
   activeDevice = null;
   onboardProfiles = null;
-  editedKeychronLayer = null;
+  editedNapeLayer = null;
   lastRenderedStatusKey = null;
   capabilities = null;
   clearPendingChanges();
   latestDeviceStatus = null;
+  buttons = null;
+  clearNapeKeymaps();
   setPageTitle();
   deviceStatusText = "No device connected";
   readStatus = "Add a supported device from the sidebar to read its current status.";
@@ -1890,7 +1912,7 @@ const stagedProfileButtonEdits = new Map<string, StagedProfileButtonEdit>();
 let dpiSlotPlan: DpiStagePlan | null = null;
 let dpiAxisLocks: boolean[] = [];
 let editedProfile: number | "host" | null = null;
-let editedKeychronLayer: number | null = null;
+let editedNapeLayer: number | null = null;
 
 async function writeStagedProfileSector(): Promise<void> {
   const client = logitechClient();
@@ -2196,33 +2218,205 @@ export async function selectOnboardProfile(sector: number): Promise<void> {
   }
 }
 
-function syncEditedKeychronLayer(status: MouseStatus): void {
-  const count = status.keychronLayerCount;
+const NAPE_REMAP_GROUP = "keychron-nape-remap";
+
+function napeAssignmentKey(layer: number, control: NapeAssignmentControl): string {
+  return control.kind === "key"
+    ? `nape-${layer}-col-${control.col}`
+    : `nape-${layer}-wheel-${control.clockwise ? "cw" : "ccw"}`;
+}
+
+function napeControlLabel(control: NapeAssignmentControl): string {
+  if (control.kind === "wheel") return control.clockwise ? "Scroll wheel CW" : "Scroll wheel CCW";
+  return KEYCHRON_NAPE_KEY_CONTROLS.find((entry) => entry.col === control.col)?.name ?? `0${control.col}`;
+}
+
+function previewNapeKeymap(layer: number): KeychronNapeLayerKeymap {
+  return keychronLayerKeymapFromCodes(
+    layer,
+    [
+      KEYCHRON_NAPE_KEYCODE.leftClick,
+      KEYCHRON_NAPE_KEYCODE.scrollMode,
+      KEYCHRON_NAPE_KEYCODE.rightClick,
+      KEYCHRON_NAPE_KEYCODE.dpiCycle,
+      KEYCHRON_NAPE_KEYCODE.forward,
+      KEYCHRON_NAPE_KEYCODE.backward,
+    ],
+    KEYCHRON_NAPE_KEYCODE.volumeDown,
+    KEYCHRON_NAPE_KEYCODE.volumeUp,
+  );
+}
+
+function clearNapeKeymaps(): void {
+  napeKeymaps.clear();
+  napeKeymap = null;
+  stagedNapeAssignments.clear();
+}
+
+function rememberNapeKeymap(map: KeychronNapeLayerKeymap): void {
+  napeKeymaps.set(map.layer, map);
+  if (editedNapeLayer == null || editedNapeLayer === map.layer) {
+    napeKeymap = map;
+  }
+}
+
+function installPreviewNapeKeymap(layer: number, force = false): void {
+  const existing = force ? undefined : napeKeymaps.get(layer);
+  rememberNapeKeymap(existing ?? previewNapeKeymap(layer));
+}
+
+function currentNapeKeycode(layer: number, control: NapeAssignmentControl): number | null {
+  const map = napeKeymaps.get(layer) ?? (napeKeymap?.layer === layer ? napeKeymap : null);
+  if (!map) return null;
+  if (control.kind === "key") return map.keys.find((entry) => entry.col === control.col)?.keycode ?? null;
+  return control.clockwise ? map.wheel.cw.keycode : map.wheel.ccw.keycode;
+}
+
+function patchNapeKeymap(layer: number, control: NapeAssignmentControl, keycode: number): void {
+  const map = napeKeymaps.get(layer);
+  if (!map) return;
+  const columns = KEYCHRON_NAPE_KEY_CONTROLS.map((entry) => {
+    if (control.kind === "key" && entry.col === control.col) return keycode;
+    return map.keys.find((key) => key.col === entry.col)?.keycode ?? 0;
+  });
+  const next = keychronLayerKeymapFromCodes(
+    layer,
+    columns,
+    control.kind === "wheel" && !control.clockwise ? keycode : map.wheel.ccw.keycode,
+    control.kind === "wheel" && control.clockwise ? keycode : map.wheel.cw.keycode,
+  );
+  napeKeymaps.set(layer, next);
+  if (napeKeymap?.layer === layer) napeKeymap = next;
+}
+
+async function loadNapeKeymap(layer: number, force = false): Promise<void> {
+  if (!Number.isInteger(layer) || layer < 1) return;
+  if (isAnyPreview) {
+    installPreviewNapeKeymap(layer, force);
+    emit();
+    return;
+  }
+  const client = keychronNapeClient();
+  if (!client) return;
+  if (!force) {
+    const cached = napeKeymaps.get(layer);
+    if (cached) {
+      napeKeymap = cached;
+      emit();
+      return;
+    }
+  }
+  const token = ++keymapReadToken;
+  try {
+    const map = await client.readLayerKeymap(layer);
+    if (token !== keymapReadToken) return;
+    rememberNapeKeymap(map);
+  } catch (error) {
+    if (token !== keymapReadToken) return;
+    if (napeKeymap?.layer !== layer) napeKeymap = null;
+    recordDiagnosticError(error, "Unable to read Keychron button assignments.");
+  }
+  emit();
+}
+
+function dropStaleNapeAssignments(): void {
+  for (const [key, staged] of stagedNapeAssignments) {
+    if (!isPendingChange(napeAssignmentKey(staged.layer, staged.control))) {
+      stagedNapeAssignments.delete(key);
+    }
+  }
+}
+
+export function applyNapeAssignment(
+  layer: number,
+  control: NapeAssignmentControl,
+  action: KeychronNapeButtonAction,
+): void {
+  if (!isAnyPreview && !keychronNapeClient()) return;
+  const keycode = keychronKeycodeForAction(action);
+  const current = currentNapeKeycode(layer, control);
+  const key = napeAssignmentKey(layer, control);
+  if (current === keycode) {
+    stagedNapeAssignments.delete(key);
+    dropPendingChange(key);
+    emit();
+    return;
+  }
+  stagedNapeAssignments.set(key, {
+    layer,
+    control,
+    action: keychronActionForKeycode(keycode),
+    keycode,
+  });
+  const name = napeControlLabel(control);
+  stageChange({
+    key,
+    group: NAPE_REMAP_GROUP,
+    label: `${keychronLayerLabel(layer)} · ${name} → ${action}`,
+    command: `Remap ${keychronLayerLabel(layer)} ${name} to ${action}`,
+    progress: `Remapping ${keychronLayerLabel(layer)} ${name} to ${action}…`,
+    apply: writeStagedNapeAssignments,
+  });
+}
+
+async function writeStagedNapeAssignments(): Promise<void> {
+  const edits = [...stagedNapeAssignments.values()];
+  try {
+    if (isAnyPreview) {
+      for (const edit of edits) patchNapeKeymap(edit.layer, edit.control, edit.keycode);
+      return;
+    }
+    const client = keychronNapeClient();
+    if (!client) return;
+    for (const edit of edits) {
+      if (edit.control.kind === "key") {
+        await client.setKeycode(edit.layer, edit.control.col, edit.keycode);
+      } else {
+        await client.setEncoder(edit.layer, edit.control.clockwise, edit.keycode);
+      }
+      patchNapeKeymap(edit.layer, edit.control, edit.keycode);
+    }
+    const layer = editedNapeLayer ?? napeKeymap?.layer;
+    if (layer != null) {
+      rememberNapeKeymap(await client.readLayerKeymap(layer));
+    }
+  } finally {
+    stagedNapeAssignments.clear();
+  }
+}
+
+function syncEditedNapeLayer(status: MouseStatus): void {
+  const count = status.napeLayerCount;
   if (count == null || count < 1) {
-    editedKeychronLayer = null;
+    editedNapeLayer = null;
     return;
   }
-  if (editedKeychronLayer == null) profilesExpanded = true;
-  if (editedKeychronLayer == null || editedKeychronLayer < 1 || editedKeychronLayer > count) {
-    editedKeychronLayer = status.keychronLayer ?? 1;
+  if (editedNapeLayer == null) profilesExpanded = true;
+  if (editedNapeLayer == null || editedNapeLayer < 1 || editedNapeLayer > count) {
+    editedNapeLayer = status.napeLayer ?? 1;
   }
-  const active = status.keychronLayer ?? 1;
-  onboardStatus = `Running from Layer ${active}. ${count} onboard layer${count === 1 ? "" : "s"} stored on the Nape Pro.`;
+  const active = status.napeLayer ?? 1;
+  onboardStatus = `Running from ${keychronLayerLabel(active)}. ${count} onboard layer${count === 1 ? "" : "s"} stored on the Nape Pro.`;
 }
 
-export function openKeychronLayer(layer: number): void {
-  const count = latestDeviceStatus?.keychronLayerCount;
+export function openNapeLayer(layer: number): void {
+  const count = latestDeviceStatus?.napeLayerCount;
   if (count == null || layer < 1 || layer > count) return;
-  editedKeychronLayer = layer;
+  editedNapeLayer = layer;
+  const cached = napeKeymaps.get(layer);
+  if (cached) napeKeymap = cached;
   emit();
+  void loadNapeKeymap(layer);
 }
 
-export async function reloadKeychronLayers(): Promise<void> {
+export async function reloadNapeLayers(): Promise<void> {
   if (isAnyPreview) {
+    const layer = editedNapeLayer ?? latestDeviceStatus?.napeLayer ?? 1;
+    installPreviewNapeKeymap(layer, true);
     emit();
     return;
   }
-  const client = keychronClient();
+  const client = keychronNapeClient();
   if (!client || refreshInProgress || settingInProgress) return;
   settingInProgress = true;
   onboardStatus = "Reading onboard layers…";
@@ -2230,10 +2424,13 @@ export async function reloadKeychronLayers(): Promise<void> {
   recordDiagnosticCommand("Read Keychron layers");
   try {
     applyStatus(await statusAfterWrite(client));
-    const count = latestDeviceStatus?.keychronLayerCount;
+    const count = latestDeviceStatus?.napeLayerCount;
     onboardStatus = count != null
       ? `${count} onboard layer${count === 1 ? "" : "s"} stored on the Nape Pro.`
       : "The mouse did not report onboard layers.";
+    napeKeymaps.clear();
+    const layer = editedNapeLayer ?? latestDeviceStatus?.napeLayer ?? 1;
+    await loadNapeKeymap(layer, true);
   } catch (error) {
     recordDiagnosticError(error, "Unable to read onboard layers.");
     onboardStatus = error instanceof Error ? error.message : "Unable to read onboard layers.";
@@ -2242,28 +2439,30 @@ export async function reloadKeychronLayers(): Promise<void> {
   }
 }
 
-export async function switchKeychronLayer(layer: number): Promise<void> {
-  const count = latestDeviceStatus?.keychronLayerCount;
+export async function switchNapeLayer(layer: number): Promise<void> {
+  const count = latestDeviceStatus?.napeLayerCount;
   if (count == null || layer < 1 || layer > count) return;
   if (isAnyPreview) {
     const status = latestDeviceStatus;
     if (!status) return;
-    editedKeychronLayer = layer;
-    applyStatus({ ...status, keychronLayer: layer });
-    setReadStatus(`Preview: switched to Layer ${layer}. Nothing is written.`);
+    editedNapeLayer = layer;
+    applyStatus({ ...status, napeLayer: layer });
+    installPreviewNapeKeymap(layer);
+    setReadStatus(`Preview: switched to ${keychronLayerLabel(layer)}. Nothing is written.`);
     return;
   }
-  const client = keychronClient();
+  const client = keychronNapeClient();
   if (!client || refreshInProgress || settingInProgress) return;
   settingInProgress = true;
-  readStatus = `Switching to Layer ${layer}…`;
+  readStatus = `Switching to ${keychronLayerLabel(layer)}…`;
   emit();
   recordDiagnosticCommand(`Select Keychron layer ${layer}`);
   try {
     await client.setLayer(layer);
-    editedKeychronLayer = layer;
+    editedNapeLayer = layer;
     applyStatus(await statusAfterWrite(client));
-    onboardStatus = `Running from Layer ${layer}.`;
+    onboardStatus = `Running from ${keychronLayerLabel(layer)}.`;
+    await loadNapeKeymap(layer);
   } catch (error) {
     recordDiagnosticError(error, "Unable to switch layer.");
     readStatus = error instanceof Error ? error.message : "Unable to switch layer.";
@@ -2685,7 +2884,7 @@ export function applyPulsarToggle(setting: PulsarToggleSetting, enabled: boolean
 
 export function applyPulsarValue(setting: "debounce" | "sleep", value: number): void {
   if (!(pulsarClient() ?? dmClient() ?? orbitalClient() ?? razerClient()
-    ?? viperClient() ?? teevolutionClient() ?? vgnClient() ?? keychronClient())) return;
+    ?? viperClient() ?? teevolutionClient() ?? vgnClient() ?? keychronNapeClient())) return;
   const asleep = value !== WLMOUSE_SLEEP_NEVER;
   stageChange({
     key: setting,
@@ -3284,6 +3483,11 @@ async function showFixturePreview(name: PreviewMode): Promise<void> {
   // Populate brand capabilities so preview cards that gate on capabilities still render.
   capabilities = readCapabilities();
   applyStatus(fixture.status);
+  if (name === "keychron-nape") {
+    const layer = fixture.status.napeLayer ?? 1;
+    editedNapeLayer = layer;
+    installPreviewNapeKeymap(layer, true);
+  }
   setConnectionButtons(true, "Preview mode");
   setReadStatus(`Preview: ${fixture.label}. Nothing is written.`);
 }
@@ -3300,6 +3504,7 @@ export function start(): void {
     for (const controlId of stagedButtonMappings.keys()) {
       if (!isPendingChange(`button-${controlId}`)) stagedButtonMappings.delete(controlId);
     }
+    dropStaleNapeAssignments();
     if (!isPendingChange(DPI_SLOTS_KEY)) {
       syncDpiSlotPlan();
     }
diff --git a/src/device/types.ts b/src/device/types.ts
index 961b752..3a73210 100644
--- a/src/device/types.ts
+++ b/src/device/types.ts
@@ -1,4 +1,5 @@
 import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
+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";
@@ -89,6 +90,17 @@ export interface StagedProfileButtonAssignment {
   value: string;
 }
 
+export type NapeAssignmentControl =
+  | { kind: "key"; col: number }
+  | { kind: "wheel"; clockwise: boolean };
+
+export interface StagedNapeAssignment {
+  layer: number;
+  control: NapeAssignmentControl;
+  action: string;
+  keycode: number;
+}
+
 export interface ProfileView {
   entry: OnboardProfile | null;
   summary: { name: string; detail: string };
@@ -162,8 +174,12 @@ export interface ControlSnapshot {
   /** Control id → staged remap target, for controls with an unflashed remap. */
   stagedButtonMappings: Record<number, number>;
   stagedProfileButtonAssignments: StagedProfileButtonAssignment[];
+  /** Nape Pro VIA keymap for the layer currently open in the Buttons tab. */
+  napeKeymap: KeychronNapeLayerKeymap | null;
+  /** Unflashed Nape Pro button and wheel remaps, including other layers. */
+  stagedNapeAssignments: StagedNapeAssignment[];
   /** Nape Pro layer currently open in the Profiles tab, or null when unread. */
-  editedKeychronLayer: number | null;
+  editedNapeLayer: number | null;
   analogTuning: AnalogTuningState;
   eggPollingDivider: number | null;
 
diff --git a/src/preview-fixtures.ts b/src/preview-fixtures.ts
index 53151dc..0d2f574 100644
--- a/src/preview-fixtures.ts
+++ b/src/preview-fixtures.ts
@@ -595,12 +595,12 @@ const KEYCHRON: MouseStatus = {
   supportedPollingRates: [500, 1000, 2000, 4000, 8000],
   activeProfile: null,
   connectionType: "Wired",
-  connectionDetail: "Wired USB · 90° orientation · DPI stage 2/5 · Layer 1",
+  connectionDetail: "Wired USB · 90° orientation · DPI stage 2/5 · Layer 0",
   liftOffDistance: null,
   supportedLiftOffDistances: [],
   sleepTimeout: 600,
-  keychronLayer: 1,
-  keychronLayerCount: 8,
+  napeLayer: 1,
+  napeLayerCount: 8,
   firmware: ["v1.0.4"],
 };
 
@@ -672,7 +672,7 @@ export const PREVIEW_FIXTURES: Record<FixturePreviewMode, PreviewFixture> = {
   vgn: { label: "VGN F2 Master Plus", status: VGN },
   finalmouse: { label: "Finalmouse UltralightX", status: FINALMOUSE },
   ninjutso: { label: "Ninjutso Sora V3", status: NINJUTSO },
-  keychron: { label: "Keychron Nape Pro", status: KEYCHRON },
+  "keychron-nape": { label: "Keychron Nape Pro", status: KEYCHRON },
   "mx-master-3s": { label: "Logitech MX Master 3S", status: LOGITECH_MX_MASTER_3S },
   "logitech-legacy": { label: "Logitech G402 (legacy DPI)", status: LOGITECH_LEGACY },
 };
diff --git a/src/preview-modes.ts b/src/preview-modes.ts
index e0231bc..a6898a9 100644
--- a/src/preview-modes.ts
+++ b/src/preview-modes.ts
@@ -29,7 +29,7 @@ export const PREVIEW_KEYS = [
   "vgn",
   "finalmouse",
   "ninjutso",
-  "keychron",
+  "keychron-nape",
   "mx-master-3s",
   "logitech-legacy",
 ] as const;
@@ -70,7 +70,8 @@ export function parsePreviewMode(value: string | null): PreviewMode | null {
     case "vgn": return "vgn";
     case "finalmouse": return "finalmouse";
     case "ninjutso": return "ninjutso";
-    case "keychron": return "keychron";
+    case "keychron":
+    case "keychron-nape": return "keychron-nape";
     case "mx-master-3s": return "mx-master-3s";
     case "logitech-legacy": return "logitech-legacy";
     default: return null;
diff --git a/src/supported-live.ts b/src/supported-live.ts
index 6ae0942..2a9b6bf 100644
--- a/src/supported-live.ts
+++ b/src/supported-live.ts
@@ -1,6 +1,6 @@
 import { WLMOUSE_PRODUCTS } from "@openmouse/protocol/drivers/vendors";
 import { LAMZU_PRODUCTS } from "@openmouse/protocol/lamzu";
-import { KEYCHRON_PRODUCTS } from "@openmouse/protocol/keychron";
+import { KEYCHRON_NAPE_PRODUCTS } from "@openmouse/protocol/keychron";
 import { ORBITAL_DEVICES } from "@openmouse/protocol/orbital";
 
 import type { Mouse } from "./supported-mice.ts";
@@ -51,7 +51,7 @@ export function registrySupportedModels(): Mouse[] {
       pids: [pid],
     });
   }
-  for (const [pid, info] of KEYCHRON_PRODUCTS) {
+  for (const [pid, info] of KEYCHRON_NAPE_PRODUCTS) {
     if (info.receiver) continue;
     rows.push({ brand: "Keychron", model: info.name, status: "supported", req: 0, note: "", pids: [pid] });
   }
diff --git a/src/supported-mice.test.ts b/src/supported-mice.test.ts
index 40c8a0d..d098a7c 100644
--- a/src/supported-mice.test.ts
+++ b/src/supported-mice.test.ts
@@ -4,7 +4,7 @@ import test from "node:test";
 import { DEVICE_DRIVERS } from "@openmouse/protocol/drivers/registry";
 import { WLMOUSE_PRODUCTS } from "@openmouse/protocol/drivers/vendors";
 import { EGG_DEVICE_PROFILES } from "@openmouse/protocol/endgame-gear-op1";
-import { KEYCHRON_PRODUCTS } from "@openmouse/protocol/keychron";
+import { KEYCHRON_NAPE_PRODUCTS } from "@openmouse/protocol/keychron";
 import { LAMZU_PRODUCTS } from "@openmouse/protocol/lamzu";
 import {
   LOGITECH_BOLT_PRODUCT_IDS,
@@ -88,7 +88,7 @@ const PID_UNIVERSE = new Set<number>([
   // RAZER_PRODUCTS registry (drivers/razer/devices.ts): Cobra, Viper Mini,
   // Viper V4 Pro.
   0x00a3, 0x008a, 0x00e5, 0x00e6,
-  ...KEYCHRON_PRODUCTS.keys(),
+  ...KEYCHRON_NAPE_PRODUCTS.keys(),
   ...TEEVOLUTION_PRODUCT_IDS,
   ...ZAUNKOENIG_PRODUCT_IDS,
   ...NINJUTSO_LEGACY_MOUSE_PRODUCT_IDS,
diff --git a/src/supported-mice.ts b/src/supported-mice.ts
index d53dfa6..5cbd73d 100644
--- a/src/supported-mice.ts
+++ b/src/supported-mice.ts
@@ -468,7 +468,7 @@ export const MICE: Mouse[] = [
     pids: [0x0440],
     note: "PID 0x0440 in Keychron driver" },
   { brand: "Keychron", model: "M6",                     status: "quickwin",  req: 1,
-    note: "Keychron vendor covered; M6 PID not yet in KEYCHRON_PRODUCT_IDS" },
+    note: "Nape VIA driver only; M6 uses a different Keychron mouse protocol" },
 
   // ASUS ROG ────────────────────────────────────────────────────────────
   { brand: "ASUS ROG", model: "Harpe Ace Aim Lab",      status: "driver",    req: 5,

From c8d394d806e0ff18c7d75ce4de607586c622f8e7 Mon Sep 17 00:00:00 2001
From: Dennis <denniswei305@gmail.com>
Date: Mon, 17 Aug 2026 04:32:45 +1000
Subject: [PATCH 3/3] Add a per-layer orientation control to Nape Pro onboard
 assignments.

---
 src/app/KeychronNapeLayers.tsx | 32 ++++++++++++++++++++++--
 src/control-profiles.css       |  1 +
 src/device/controller.ts       | 45 +++++++++++++++++++++++++++-------
 src/device/types.ts            |  3 ++-
 4 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/src/app/KeychronNapeLayers.tsx b/src/app/KeychronNapeLayers.tsx
index c521501..fef0399 100644
--- a/src/app/KeychronNapeLayers.tsx
+++ b/src/app/KeychronNapeLayers.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, type CSSProperties, type ReactNode } from "react";
 import {
   KEYCHRON_NAPE_BUTTON_ACTIONS,
+  KEYCHRON_NAPE_ORIENTATION_OPTIONS,
   keychronLayerLabel,
   type KeychronNapeButtonAction,
 } from "@openmouse/protocol/keychron";
@@ -51,6 +52,7 @@ const KEY_ROWS = [
 ] as const;
 
 function pendingKey(layer: number, target: NapeAssignmentControl): string {
+  if (target.kind === "orientation") return `nape-${layer}-orientation`;
   return target.kind === "key"
     ? `nape-${layer}-col-${target.col}`
     : `nape-${layer}-wheel-${target.clockwise ? "cw" : "ccw"}`;
@@ -63,6 +65,7 @@ function stagedFor(
 ): StagedNapeAssignment | undefined {
   return staged.find((entry) => {
     if (entry.layer !== layer) return false;
+    if (entry.control.kind === "orientation" && target.kind === "orientation") return true;
     if (entry.control.kind === "key" && target.kind === "key") return entry.control.col === target.col;
     if (entry.control.kind === "wheel" && target.kind === "wheel") {
       return entry.control.clockwise === target.clockwise;
@@ -113,17 +116,42 @@ function NapeAssignments({ snapshot, layer }: { snapshot: ControlSnapshot; layer
   const map = snapshot.napeKeymap;
   const busy = snapshot.settingInProgress;
   const ready = map != null && map.layer === layer;
+  const orientationTarget: NapeAssignmentControl = { kind: "orientation" };
+  const stagedOrientation = ready && map
+    ? stagedFor(snapshot.stagedNapeAssignments, layer, orientationTarget)
+    : undefined;
   return (
     <div className="profile-button-editor">
       <div className="profile-button-heading">
         <div>
           <p>BUTTONS</p>
           <h2>Onboard assignments</h2>
-          <small>Choose what each physical control does on this layer.</small>
+          <small>Choose this layer's sensor orientation and what each physical control does.</small>
         </div>
       </div>
       {ready && map ? (
         <div className="assignment-grid">
+          <label
+            className={`assignment-card is-wide${stagedOrientation ? " is-staged" : ""}`}
+            data-pending-key={pendingKey(layer, orientationTarget)}
+          >
+            <span className="assignment-button-number">0</span>
+            <span className="assignment-button-name">Orientation</span>
+            <span className="assignment-select-wrap">
+              <select
+                value={stagedOrientation?.keycode ?? map.orientationIndex}
+                disabled={busy}
+                onChange={(event) => {
+                  control.applyNapeOrientation(layer, Number(event.currentTarget.value));
+                }}
+              >
+                {KEYCHRON_NAPE_ORIENTATION_OPTIONS.map((option) => (
+                  <option key={option.index} value={option.index}>{option.label}</option>
+                ))}
+              </select>
+              <i aria-hidden="true" />
+            </span>
+          </label>
           {KEY_ROWS.map((row) => {
             const key = map.keys.find((entry) => entry.col === row.col);
             if (!key) return null;
@@ -178,7 +206,7 @@ function NapeAssignments({ snapshot, layer }: { snapshot: ControlSnapshot; layer
         <small className="setting-note">Reading {keychronLayerLabel(layer)}…</small>
       )}
       <small className="setting-note">
-        Changes stay on this layer until you apply them. Clockwise and counter-clockwise scroll can be set independently.
+        Changes stay on this layer until you apply them. Orientation is stored per layer in 45° steps. Clockwise and counter-clockwise scroll can be set independently.
       </small>
     </div>
   );
diff --git a/src/control-profiles.css b/src/control-profiles.css
index ca52b7d..e89d02f 100644
--- a/src/control-profiles.css
+++ b/src/control-profiles.css
@@ -104,6 +104,7 @@
 .assignment-layer-tabs button[aria-selected="true"] { background:var(--surface-raised);color:var(--ui-accent);box-shadow:0 1px 5px rgb(0 0 0 / 25%) }
 .assignment-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem }
 .assignment-card { display:grid;grid-template-columns:2rem minmax(5rem,.55fr) minmax(9rem,1fr);align-items:center;gap:.55rem;min-width:0;padding:.55rem .6rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised) }
+.assignment-card.is-wide { grid-column:1 / -1 }
 .assignment-button-number { display:grid;width:1.8rem;height:1.8rem;place-items:center;border:1px solid var(--border);border-radius:6px;background:var(--surface-control);color:var(--ui-accent);font-family:var(--font-mono);font-size:.55rem }
 .assignment-button-name { overflow:hidden;color:var(--text-hover);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap }
 .assignment-select-wrap { position:relative;min-width:0 }
diff --git a/src/device/controller.ts b/src/device/controller.ts
index 8b3e401..acd6913 100644
--- a/src/device/controller.ts
+++ b/src/device/controller.ts
@@ -116,6 +116,8 @@ import {
   keychronKeycodeForAction,
   keychronLayerKeymapFromCodes,
   keychronLayerLabel,
+  keychronOrientationIndex,
+  keychronOrientationLabel,
   type KeychronNapeButtonAction,
   type KeychronNapeLayerKeymap,
 } from "@openmouse/protocol/keychron";
@@ -2221,12 +2223,14 @@ export async function selectOnboardProfile(sector: number): Promise<void> {
 const NAPE_REMAP_GROUP = "keychron-nape-remap";
 
 function napeAssignmentKey(layer: number, control: NapeAssignmentControl): string {
+  if (control.kind === "orientation") return `nape-${layer}-orientation`;
   return control.kind === "key"
     ? `nape-${layer}-col-${control.col}`
     : `nape-${layer}-wheel-${control.clockwise ? "cw" : "ccw"}`;
 }
 
 function napeControlLabel(control: NapeAssignmentControl): string {
+  if (control.kind === "orientation") return "Orientation";
   if (control.kind === "wheel") return control.clockwise ? "Scroll wheel CW" : "Scroll wheel CCW";
   return KEYCHRON_NAPE_KEY_CONTROLS.find((entry) => entry.col === control.col)?.name ?? `0${control.col}`;
 }
@@ -2244,6 +2248,7 @@ function previewNapeKeymap(layer: number): KeychronNapeLayerKeymap {
     ],
     KEYCHRON_NAPE_KEYCODE.volumeDown,
     KEYCHRON_NAPE_KEYCODE.volumeUp,
+    2,
   );
 }
 
@@ -2268,6 +2273,7 @@ function installPreviewNapeKeymap(layer: number, force = false): void {
 function currentNapeKeycode(layer: number, control: NapeAssignmentControl): number | null {
   const map = napeKeymaps.get(layer) ?? (napeKeymap?.layer === layer ? napeKeymap : null);
   if (!map) return null;
+  if (control.kind === "orientation") return map.orientationIndex;
   if (control.kind === "key") return map.keys.find((entry) => entry.col === control.col)?.keycode ?? null;
   return control.clockwise ? map.wheel.cw.keycode : map.wheel.ccw.keycode;
 }
@@ -2275,6 +2281,12 @@ function currentNapeKeycode(layer: number, control: NapeAssignmentControl): numb
 function patchNapeKeymap(layer: number, control: NapeAssignmentControl, keycode: number): void {
   const map = napeKeymaps.get(layer);
   if (!map) return;
+  if (control.kind === "orientation") {
+    const next = { ...map, orientationIndex: keycode };
+    napeKeymaps.set(layer, next);
+    if (napeKeymap?.layer === layer) napeKeymap = next;
+    return;
+  }
   const columns = KEYCHRON_NAPE_KEY_CONTROLS.map((entry) => {
     if (control.kind === "key" && entry.col === control.col) return keycode;
     return map.keys.find((key) => key.col === entry.col)?.keycode ?? 0;
@@ -2284,6 +2296,7 @@ function patchNapeKeymap(layer: number, control: NapeAssignmentControl, keycode:
     columns,
     control.kind === "wheel" && !control.clockwise ? keycode : map.wheel.ccw.keycode,
     control.kind === "wheel" && control.clockwise ? keycode : map.wheel.cw.keycode,
+    map.orientationIndex,
   );
   napeKeymaps.set(layer, next);
   if (napeKeymap?.layer === layer) napeKeymap = next;
@@ -2334,6 +2347,21 @@ export function applyNapeAssignment(
 ): void {
   if (!isAnyPreview && !keychronNapeClient()) return;
   const keycode = keychronKeycodeForAction(action);
+  applyNapeAssignmentValue(layer, control, keychronActionForKeycode(keycode), keycode);
+}
+
+export function applyNapeOrientation(layer: number, index: number): void {
+  if (!isAnyPreview && !keychronNapeClient()) return;
+  const next = keychronOrientationIndex(index);
+  applyNapeAssignmentValue(layer, { kind: "orientation" }, keychronOrientationLabel(next), next);
+}
+
+function applyNapeAssignmentValue(
+  layer: number,
+  control: NapeAssignmentControl,
+  action: string,
+  keycode: number,
+): void {
   const current = currentNapeKeycode(layer, control);
   const key = napeAssignmentKey(layer, control);
   if (current === keycode) {
@@ -2342,19 +2370,16 @@ export function applyNapeAssignment(
     emit();
     return;
   }
-  stagedNapeAssignments.set(key, {
-    layer,
-    control,
-    action: keychronActionForKeycode(keycode),
-    keycode,
-  });
+  stagedNapeAssignments.set(key, { layer, control, action, keycode });
   const name = napeControlLabel(control);
+  const verb = control.kind === "orientation" ? "Set" : "Remap";
+  const gerund = control.kind === "orientation" ? "Setting" : "Remapping";
   stageChange({
     key,
     group: NAPE_REMAP_GROUP,
     label: `${keychronLayerLabel(layer)} · ${name} → ${action}`,
-    command: `Remap ${keychronLayerLabel(layer)} ${name} to ${action}`,
-    progress: `Remapping ${keychronLayerLabel(layer)} ${name} to ${action}…`,
+    command: `${verb} ${keychronLayerLabel(layer)} ${name} to ${action}`,
+    progress: `${gerund} ${keychronLayerLabel(layer)} ${name} to ${action}…`,
     apply: writeStagedNapeAssignments,
   });
 }
@@ -2369,7 +2394,9 @@ async function writeStagedNapeAssignments(): Promise<void> {
     const client = keychronNapeClient();
     if (!client) return;
     for (const edit of edits) {
-      if (edit.control.kind === "key") {
+      if (edit.control.kind === "orientation") {
+        await client.setLayerOrientation(edit.layer, edit.keycode);
+      } else if (edit.control.kind === "key") {
         await client.setKeycode(edit.layer, edit.control.col, edit.keycode);
       } else {
         await client.setEncoder(edit.layer, edit.control.clockwise, edit.keycode);
diff --git a/src/device/types.ts b/src/device/types.ts
index 3a73210..7854749 100644
--- a/src/device/types.ts
+++ b/src/device/types.ts
@@ -92,7 +92,8 @@ export interface StagedProfileButtonAssignment {
 
 export type NapeAssignmentControl =
   | { kind: "key"; col: number }
-  | { kind: "wheel"; clockwise: boolean };
+  | { kind: "wheel"; clockwise: boolean }
+  | { kind: "orientation" };
 
 export interface StagedNapeAssignment {
   layer: number;