Checkpoint current UI and ink integration state

public/js/options-ui-module.js

@@ -402,12 +402,20 @@ class OptionsUIModule extends BaseModule {
         if (!button) return;
         const enabled = this.getPreference(button.dataset.prefCategory, button.dataset.prefKey, true) !== false;
         button.classList.toggle('is-muted', !enabled);
-        button.innerHTML = enabled ? '🔊' : '🔇';
+        button.innerHTML = this.getVolumeToggleIcon(enabled);
         const titleKey = enabled ? button.dataset.muteTitleKey : button.dataset.unmuteTitleKey;
         const title = this.t(titleKey);
         button.title = title;
         button.setAttribute('aria-label', title);
     }
+
+    getVolumeToggleIcon(enabled) {
+        const common = `xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"`;
+        if (enabled) {
+            return `<svg ${common}><path d="M11 5 6 9H2v6h4l5 4z"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>`;
+        }
+        return `<svg ${common}><path d="M11 5 6 9H2v6h4l5 4z"/><path d="m22 9-6 6"/><path d="m16 9 6 6"/></svg>`;
+    }
     
     /**
      * Create API settings controls