fix(ui): address PR #991 UI review comments

## Critical fixes
- CreateSplitKey 422: add ObjectType: SymmetricKey as first TTLV field
  (required non-Option field in server struct; was always 422 before)
- Share UID extraction: read UniqueIdentifier not PrivateKeyUniqueIdentifier
  (WASM deserialises CreateSplitKeyResponse.unique_identifier as
  { UniqueIdentifier: string[] }, not PrivateKeyUniqueIdentifier)
- Extract shared buildCreateSplitKeyRequest to splitKeyUtils.ts so both
  SplitKey.tsx and CryptoOfficerRole.tsx stay in sync
- Compensating Destroy: if CreateSplitKey (step 2) fails after AES key
  creation (step 1), destroy the orphaned key before re-throwing to
  prevent the permanent 'object already exists' retry trap

## Peer-revocation fix
- Show the revoke section to any CO candidate, not only active COs
  (server allows dormant candidates as break-glass peer-revocation path)
- Gate on ceremony_activated && users.length > 0 instead of is_crypto_officer
- Disable the button for dormant COs when no target is selected
- Add revokeHintDormant i18n key (en + zh-CN)
- Filter the logged-in user from the revoke Select (self-revoke via empty)

## UI / a11y fixes
- Remove @font-face CDN blocks (Inter URL was 404; Montserrat calls
  fonts.gstatic.com — blocked in air-gapped environments); system fonts
- Fix WCAG AA contrast in dark theme: colorInfo raised to #4fa8d8
  (>=4.5:1 on #161923), colorTextSecondary pinned to #9fa0b8
- Apply --cosmian-sidebar-bg to Sider and Menu to fix sidebar disparity
- Document dark colorPrimary change in CHANGELOG (purple -> orange)

## Tests
- Update split-key-logic.test.ts: import from shared util, rewrite
  extractShareUids tests for real WASM response shape
- Update CryptoOfficerRevoke.test.ts: add dormant CO peer-revoke tests

Author: Manuthor

CHANGELOG/feat_split_key.md

@@ -26,6 +26,11 @@ Replaces the former `privileged_users` flat list with two FIPS 140-3 aligned rol
 - **Self-revoke**: active CO calls `POST /access/crypto_officer/disable`.
 - **Peer revocation**: any CO candidate calls the same endpoint with `{ "target_user": "<uid>" }` to demote another active CO without server restart (NIST SP 800-152 FR:6.119).
 
+- **`CreateSplitKey` fix**: `ObjectType: SymmetricKey` added as first field in the TTLV request (the field is required/non-`Option` in the server struct); both `SplitKey.tsx` and `CryptoOfficerRole.tsx` previously omitted it, causing a 422 on every submission. Both callers now share a single `buildCreateSplitKeyRequest` helper from `utils/splitKeyUtils.ts`.
+- **Compensating delete**: if step 2 (`CreateSplitKey`) fails after step 1 (AES key creation) succeeds, the newly-created key is destroyed before the error is surfaced; this prevents permanent "object already exists" retry failure.
+- **Peer-revocation selector**: the logged-in user is now filtered out of the peer-revocation `Select`; self-revoke remains available via the empty selection.
+- **External CDN fonts removed**: `@font-face` declarations referencing `fonts.gstatic.com` (Inter URL was 404; Montserrat URL was live but violates air-gapped deployment requirements); falls back to system font stack.
+
 ## Security
 
 - Zeroized key material throughout (`Zeroizing<Vec<u8>>`, `Drop` on `CeremonyKeys`).
@@ -46,8 +51,8 @@ Replaces the former `privileged_users` flat list with two FIPS 140-3 aligned rol
 
 - **Crypto Officer page**: status dashboard (ceremony state, active CO list, custodian count); configurable base key ID with live share-UID preview (`<id>#1`, `<id>#2`…); peer-revocation dropdown (visible to active CO only); ceremony activation form.
 - **SplitKey / JoinSplitKey dialogs**: Shamir option removed; only XOR n-of-n supported. "Total Parts" renamed to "Number of Shares". Threshold and method selectors removed.
-- **Dark theme**: aligned to mdBook Eviden palette (`#161923` bg, `#bcbdd0` text, `#282d3f` sidebar, orange `#f14611`). All contrast ratios WCAG AA.
-- **Sidebar fixes**: sub-menus visible when sidebar is collapsed; collapse trigger button color corrected in light theme.
+- **Dark theme**: aligned to mdBook Eviden palette (`#161923` bg, `#bcbdd0` text, `#282d3f` sidebar, orange `#f14611`). `colorPrimary` changed from `#9e6eff` (purple) to `#f14611` (Cosmian brand orange) for brand consistency. Light `colorPrimary` changed from `#e34319` to `#c73f1b` (≥4.5:1 on white, WCAG AA). `colorInfo` (links) raised to `#4fa8d8` (≥4.5:1 on `#161923`). `colorTextSecondary` pinned to `#9fa0b8` to prevent the dark algorithm deriving a low-contrast value (~2.84:1) on the elevated card surface.
+- **Sidebar background**: both light and dark modes now use the `--cosmian-sidebar-bg` CSS variable, eliminating the disparity between themes.
 
 ## Testing
 

ui/src/App.tsx

@@ -508,7 +508,7 @@ function App() {
         token: {
             colorPrimary: "#c73f1b" /* Cosmian brand orange — eviden.css --cosmian-accent-dark (>= 4.5:1 on white) */,
             colorText: "#1a1a1a" /* Eviden brand ink — matches eviden.css --cosmian-dark */,
-            fontFamily: "'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
         },
         components: {
             Layout: {
@@ -540,16 +540,17 @@ function App() {
         algorithm: theme.darkAlgorithm,
         token: {
             colorPrimary: "#f14611" /* Cosmian primary orange — eviden.css --cosmian-accent (bright accent on dark) */,
-            colorInfo: "#2b79a2" /* mdBook dark-theme link blue */,
+            colorInfo: "#4fa8d8" /* mdBook dark-theme link blue — ≥ 4.5:1 on #161923 (WCAG AA) */,
             colorTextBase: "#bcbdd0" /* mdBook navy --fg */,
+            colorTextSecondary: "#9fa0b8" /* explicit — prevents algorithm deriving ~#666979 (only 2.84:1 on card bg) */,
             colorBgBase: "#161923" /* mdBook navy --bg hsl(226,23%,11%) — black background */,
             colorBgLayout: "#161923",
             colorBgContainer: "#1f2432" /* elevated card surface */,
             colorBgElevated: "#282d3f" /* mdBook navy --sidebar-bg */,
             colorBorder: "#5a6278",
             colorSplit: "#3a4155",
             colorError: "#ff6b6b" /* light red (>= 4.5:1 on #161923) */,
-            fontFamily: "'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
         },
         components: {
             Layout: {

ui/src/actions/Access/CryptoOfficerRole.tsx

@@ -5,6 +5,7 @@ import { useAuth } from "../../contexts/useAuth";
 import { getNoTTLVRequest, postNoTTLVRequest, sendKmipRequest } from "../../utils/utils";
 import LocateButton from "../../components/common/LocateButton";
 import * as wasm from "../../wasm/pkg";
+import { buildCreateSplitKeyRequest } from "../../utils/splitKeyUtils";
 
 const { Text } = Typography;
 
@@ -24,18 +25,7 @@ interface CeremonyActivateFormData {
 }
 
 type CreateSymKeyResponse = { UniqueIdentifier: string };
-type CreateSplitKeyResponse = { UniqueIdentifier: string; PrivateKeyUniqueIdentifier: string[] };
-
-const buildCreateSplitKeyRequest = (keyId: string, n: number) => ({
-    tag: "CreateSplitKey",
-    type: "Structure",
-    value: [
-        { tag: "UniqueIdentifier", type: "TextString", value: keyId },
-        { tag: "SplitKeyParts", type: "Integer", value: n },
-        { tag: "SplitKeyThreshold", type: "Integer", value: n },
-        { tag: "SplitKeyMethod", type: "Enumeration", value: "XOR" },
-    ],
-});
+type CreateSplitKeyResponse = { UniqueIdentifier: string | string[] };
 
 const CryptoOfficerRole: React.FC = () => {
     const { t } = useTranslation("actions");
@@ -50,7 +40,7 @@ const CryptoOfficerRole: React.FC = () => {
     const [splitKeyId, setSplitKeyId] = useState<string>("");
     /** Target user for peer revocation (empty = self-revoke) */
     const [revokeTarget, setRevokeTarget] = useState<string>("");
-    const { serverUrl } = useAuth();
+    const { serverUrl, userId } = useAuth();
     const responseRef = useRef<HTMLDivElement>(null);
     const [activateForm] = Form.useForm<CeremonyActivateFormData>();
 
@@ -119,14 +109,26 @@ const CryptoOfficerRole: React.FC = () => {
 
             // Split the key into n shares (n = custodians_count)
             const splitReq = buildCreateSplitKeyRequest(createdKeyId, n);
-            const splitRespStr = await sendKmipRequest(splitReq, serverUrl);
+            let splitRespStr: string | null;
+            try {
+                splitRespStr = await sendKmipRequest(splitReq, serverUrl);
+            } catch (splitErr) {
+                // Compensating delete: destroy the orphaned AES key before re-throwing
+                try {
+                    const destroyReq = wasm.destroy_ttlv_request(createdKeyId, false);
+                    await sendKmipRequest(destroyReq, serverUrl);
+                } catch {
+                    /* best-effort; ignore cleanup errors */
+                }
+                throw splitErr;
+            }
             if (!splitRespStr) throw new Error("Split key operation returned an empty response");
 
             const splitResp: CreateSplitKeyResponse = await wasm.parse_create_split_key_ttlv_response(splitRespStr);
-            const shareUids: string[] = Array.isArray(splitResp.PrivateKeyUniqueIdentifier)
-                ? splitResp.PrivateKeyUniqueIdentifier
-                : splitResp.PrivateKeyUniqueIdentifier
-                  ? [splitResp.PrivateKeyUniqueIdentifier]
+            const shareUids: string[] = Array.isArray(splitResp.UniqueIdentifier)
+                ? splitResp.UniqueIdentifier
+                : splitResp.UniqueIdentifier
+                  ? [splitResp.UniqueIdentifier]
                   : [];
 
             if (shareUids.length === 0) {
@@ -282,25 +284,34 @@ const CryptoOfficerRole: React.FC = () => {
                                 </div>
                             </div>
 
-                            {/* Only the active CO can revoke (self-revoke or peer-revoke via the target selector). */}
-                            {status.ceremony_activated && status.is_crypto_officer && (
+                            {/* Any CO candidate (active or dormant) can revoke an active CO.
+                                Active COs can also self-revoke by leaving the target empty.
+                                Dormant candidates (in users list but no active activation) can
+                                only peer-revoke — the button is disabled if no target is set. */}
+                            {status.ceremony_activated && status.users.length > 0 && (
                                 <div className="pt-2 border-t space-y-3">
                                     <p className="text-sm font-medium">{t("cryptoOfficer.revokeRole")}</p>
                                     <Space direction="vertical" style={{ display: "flex" }}>
-                                        {/* Only list users that are currently active COs */}
+                                        {/* List active COs only; current user is filtered out (self-revoke uses empty selection) */}
                                         <Select
                                             placeholder={t("cryptoOfficer.selectRevokePlaceholder")}
                                             value={revokeTarget || undefined}
                                             onChange={(val: string | undefined) => setRevokeTarget(val ?? "")}
                                             allowClear
                                             style={{ width: 380 }}
-                                            options={(status.active_co_users ?? status.users).map((u) => ({
-                                                value: u,
-                                                label: u,
-                                            }))}
+                                            options={(status.active_co_users ?? status.users)
+                                                .filter((u) => u !== userId)
+                                                .map((u) => ({
+                                                    value: u,
+                                                    label: u,
+                                                }))}
                                             data-testid="revoke-target-select"
                                         />
-                                        <p className="text-xs text-gray-500 dark:text-gray-400">{t("cryptoOfficer.revokeHint")}</p>
+                                        <p className="text-xs text-gray-500 dark:text-gray-400">
+                                            {status.is_crypto_officer
+                                                ? t("cryptoOfficer.revokeHint")
+                                                : t("cryptoOfficer.revokeHintDormant")}
+                                        </p>
                                         <Tooltip
                                             title={
                                                 !status.is_crypto_officer && !revokeTarget.trim()
@@ -310,7 +321,13 @@ const CryptoOfficerRole: React.FC = () => {
                                                       : t("cryptoOfficer.tooltipSelfRevoke")
                                             }
                                         >
-                                            <Button danger onClick={disableCeremony} loading={isDisabling} data-testid="disable-btn">
+                                            <Button
+                                                danger
+                                                onClick={disableCeremony}
+                                                loading={isDisabling}
+                                                disabled={!status.is_crypto_officer && !revokeTarget.trim()}
+                                                data-testid="disable-btn"
+                                            >
                                                 {revokeTarget.trim()
                                                     ? t("cryptoOfficer.revokeFor", { user: revokeTarget.trim() })
                                                     : t("cryptoOfficer.revokeMyCeremony")}

ui/src/actions/Keys/SplitKey.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { sendKmipRequest } from "../../utils/utils";
 import * as wasm from "../../wasm/pkg";
+import { buildCreateSplitKeyRequest } from "../../utils/splitKeyUtils";
 import { useActionState } from "../../hooks/useActionState";
 import { ActionResponse } from "../../components/common/ActionResponse";
 
@@ -11,26 +12,14 @@ interface SplitKeyFormData {
     shareCount: number;
 }
 
-/// Build a CreateSplitKey TTLV request. The caller supplies the resolved `n`.
-const buildCreateSplitKeyRequest = (keyId: string, n: number) => ({
-    tag: "CreateSplitKey",
-    type: "Structure",
-    value: [
-        { tag: "UniqueIdentifier", type: "TextString", value: keyId },
-        { tag: "SplitKeyParts", type: "Integer", value: n },
-        { tag: "SplitKeyThreshold", type: "Integer", value: n },
-        { tag: "SplitKeyMethod", type: "Enumeration", value: "XOR" },
-    ],
-});
-
 type CreateSymKeyResponse = {
     ObjectType: string;
     UniqueIdentifier: string;
 };
 
 type CreateSplitKeyResponse = {
-    UniqueIdentifier: string;
-    PrivateKeyUniqueIdentifier: string[];
+    // Vec<UniqueIdentifier> serialised by serde_wasm_bindgen as an array
+    UniqueIdentifier: string | string[];
 };
 
 const SplitKeyForm: React.FC = () => {
@@ -61,17 +50,28 @@ const SplitKeyForm: React.FC = () => {
 
             // ── Step 2: Split the newly created key ────────────────────────────
             const splitReq = buildCreateSplitKeyRequest(createdKeyId, n);
-            const splitRespStr = await sendKmipRequest(splitReq, serverUrl);
+            let splitRespStr: string | null;
+            try {
+                splitRespStr = await sendKmipRequest(splitReq, serverUrl);
+            } catch (splitErr) {
+                // Compensating delete: destroy the orphaned AES key before re-throwing
+                try {
+                    const destroyReq = wasm.destroy_ttlv_request(createdKeyId, false);
+                    await sendKmipRequest(destroyReq, serverUrl);
+                } catch {
+                    /* best-effort; ignore cleanup errors */
+                }
+                throw splitErr;
+            }
             if (!splitRespStr) {
                 throw new Error("Split key operation returned an empty response");
             }
 
-            // Use the WASM parser for type-safe CreateSplitKeyResponse parsing.
             const splitResp: CreateSplitKeyResponse = await wasm.parse_create_split_key_ttlv_response(splitRespStr);
-            const shareUids: string[] = Array.isArray(splitResp.PrivateKeyUniqueIdentifier)
-                ? splitResp.PrivateKeyUniqueIdentifier
-                : splitResp.PrivateKeyUniqueIdentifier
-                  ? [splitResp.PrivateKeyUniqueIdentifier]
+            const shareUids: string[] = Array.isArray(splitResp.UniqueIdentifier)
+                ? splitResp.UniqueIdentifier
+                : splitResp.UniqueIdentifier
+                  ? [splitResp.UniqueIdentifier]
                   : [];
 
             if (shareUids.length > 0) {

ui/src/components/layout/Sidebar.tsx

@@ -149,7 +149,7 @@ const Sidebar: React.FC<{ isFips?: boolean; isDarkMode?: boolean }> = ({ isFips
             collapsed={collapsed}
             onCollapse={setCollapsed}
             className="h-full"
-            style={{ position: "sticky", top: 0, overflow: "auto" }}
+            style={{ position: "sticky", top: 0, overflow: "auto", background: "var(--cosmian-sidebar-bg)" }}
         >
             <Menu
                 mode="inline"
@@ -161,7 +161,7 @@ const Sidebar: React.FC<{ isFips?: boolean; isDarkMode?: boolean }> = ({ isFips
                 items={modifiedMenuItems}
                 onClick={({ key }: { key: string }) => navigate(key)}
                 className="h-full border-r-0"
-                style={{ fontWeight: "500", overflow: "auto" }}
+                style={{ fontWeight: "500", overflow: "auto", background: "var(--cosmian-sidebar-bg)" }}
             />
         </Sider>
     );

ui/src/i18n/locales/en/actions.json

@@ -1828,6 +1828,7 @@
         "revokeRole": "Revoke Crypto Officer Role",
         "selectRevokePlaceholder": "Select active CO to revoke (or leave empty to self-revoke)",
         "revokeHint": "Any Crypto Officer candidate can revoke another active CO. Leave empty to self-revoke (you must be the active CO).",
+        "revokeHintDormant": "Select an active Crypto Officer to revoke their role. You cannot self-revoke because you have no active ceremony.",
         "tooltipNotActive": "You are not the active CO. Select a target user to peer-revoke.",
         "tooltipRevokeFor": "Revoke CO role for: {{user}}",
         "tooltipSelfRevoke": "Revokes your active ceremony. The role becomes dormant until a new ceremony completes.",

ui/src/i18n/locales/zh-CN/actions.json

@@ -1828,6 +1828,7 @@
         "revokeRole": "撤销加密官角色",
         "selectRevokePlaceholder": "选择要撤销的活动加密官（或留空以自我撤销）",
         "revokeHint": "任何加密官候选人都可以撤销另一位活动加密官。留空以自我撤销（您必须是活动加密官）。",
+        "revokeHintDormant": "选择一位活动加密官以撤销其角色。您无法自我撤销，因为您没有活动仪式。",
         "tooltipNotActive": "您不是活动加密官。请选择目标用户进行对等撤销。",
         "tooltipRevokeFor": "撤销用户 {{user}} 的加密官角色",
         "tooltipSelfRevoke": "撤销您的活动仪式。该角色将变为休眠状态，直到新的仪式完成。",

ui/src/styles.css

@@ -5,23 +5,6 @@
    theme switch (not the OS `prefers-color-scheme`). */
 @custom-variant dark (&:where(.dark, .dark *));
 
-/* ── Cosmian brand fonts (same stack as documentation/theme/fonts/fonts.css) ── */
-@font-face {
-    font-family: "Inter";
-    font-style: normal;
-    font-weight: 100 900;
-    font-display: swap;
-    src: url("https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: "Montserrat";
-    font-style: normal;
-    font-weight: 100 900;
-    font-display: swap;
-    src: url("https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2") format("woff2");
-}
-
 /* ── Cosmian design tokens — mirrors documentation/theme/css/eviden.css ─────── */
 :root {
     --cosmian-accent: #f14611; /* Cosmian primary orange */
@@ -59,14 +42,7 @@ body {
     height: 100%;
     margin: 0;
     padding: 0;
-    font-family:
-        "Inter",
-        "Montserrat",
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
 /* Black (mdBook navy) background behind/around the app, not just inside AntD. */

ui/src/utils/splitKeyUtils.ts

@@ -0,0 +1,20 @@
+/**
+ * Shared utility for building a KMIP `CreateSplitKey` TTLV request.
+ *
+ * Used by both the standalone Split Key page and the Crypto Officer ceremony
+ * workflow to ensure a single, consistent request shape. `ObjectType` is the
+ * first field and is required (non-`Option`) by the server.
+ */
+
+/** Build a `CreateSplitKey` TTLV request for an AES-256 symmetric key. */
+export const buildCreateSplitKeyRequest = (keyId: string, n: number) => ({
+    tag: "CreateSplitKey",
+    type: "Structure",
+    value: [
+        { tag: "ObjectType", type: "Enumeration", value: "SymmetricKey" },
+        { tag: "UniqueIdentifier", type: "TextString", value: keyId },
+        { tag: "SplitKeyParts", type: "Integer", value: n },
+        { tag: "SplitKeyThreshold", type: "Integer", value: n },
+        { tag: "SplitKeyMethod", type: "Enumeration", value: "XOR" },
+    ],
+});