overplay 4.0.0 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 4.2.0 — 2026-10-17
+
+- Widget Settings has two tabs: **General** (panel, notifications and the shortcut) and **Appearance** (theme, pins and the comments button).
+- Opening the sidebar with the shortcut no longer shows a focus ring on the Settings button. Focus moves to the panel; Tab still reaches every button.
+- Website: new pages **How It Works** and **MCP Server** in the header. The MCP Server page lists all 20 MCP tools by permission. The New pill on the landing page opens it.
+- Website: Pricing, Docs, How It Works and MCP Server share one page header (label, title, text, buttons).
+- Dashboard: the usage bars on Plan & Billing use the full width. Team rows no longer push the arrow out of the card on hover, and Teams in the sidebar has a two-people icon.
+
+## 4.1.0 — 2026-10-17
+
+- New default shortcut to open and close comments: **Alt+C** (**Option+C** on Mac). It works on any keyboard layout. Alt+Shift+C still works, but on Windows Alt+Shift can switch the keyboard language. Settings shows Option on Mac. Set `keyboardShortcut` to keep another key.
+- The update notice in the sidebar footer now offers a prompt for your coding agent: Show Prompt and Copy Prompt. The prompt updates the package, reads the release notes, clears the bundler cache (Vite, Next.js, Nuxt and others) and restarts the dev server. A version bump alone often kept serving the old widget.
+- The update notice no longer shows for the script tag, which loads the server's copy and updates by itself.
+- Dashboard: on the Projects page each team is a panel with its name, project count and New Project button. Project tiles use the brand blue.
+- Website: the MCP section shows a short chat in which a coding agent reads yesterday's comments, fixes one and replies.
+- The public source moves to [github.com/artemsvit/Overplay-Community](https://github.com/artemsvit/Overplay-Community): the widget and the Community server. Links on the site and in the package point there.
+
 ## 4.0.0 — 2026-10-17
 
 The package and code now use the Overplay name everywhere. This release has breaking changes.

package/LICENSE

@@ -1,5 +1,8 @@
 MIT License
 
+This license covers the Overplay widget (the `overplay` npm package) and every file outside
+`service/`. The service in `service/` uses the Functional Source License: see service/LICENSE.md.
+
 Copyright (c) 2026 Overplay contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

package/README.md

@@ -10,7 +10,7 @@
 
 <p align="center">
   <a href="https://www.npmjs.com/package/overplay"><img src="https://img.shields.io/npm/v/overplay?color=575ce5" alt="npm version"></a>
-  <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-575ce5" alt="MIT license"></a>
+  <a href="./LICENSE"><img src="https://img.shields.io/badge/widget-MIT-575ce5" alt="Widget: MIT license"></a> <a href="./service/LICENSE.md"><img src="https://img.shields.io/badge/service-FSL--1.1--MIT-575ce5" alt="Service: FSL-1.1-MIT license"></a>
   <a href="https://overplay.app/"><img src="https://img.shields.io/badge/cloud-overplay.app-575ce5" alt="Cloud"></a>
 </p>
 
@@ -110,7 +110,7 @@ Read the [self-hosting guide](docs/SELF_HOSTING.md).
 
 | Key | Action |
 | --- | --- |
-| <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd> (<kbd>Option</kbd> on Mac) | Open or close the widget |
+| <kbd>Alt</kbd> + <kbd>C</kbd> (<kbd>Option</kbd> + <kbd>C</kbd> on Mac) | Open or close the widget |
 | <kbd>Esc</kbd> | Cancel |
 | <kbd>Enter</kbd> | Place a pin on the focused element |
 
@@ -132,7 +132,10 @@ The hosted service (Cloudflare Worker + D1) is in [`service/`](service/README.md
 
 ## License
 
-[MIT](./LICENSE)
+- **Widget** (the `overplay` npm package: `src/`, `dist/`): [MIT](./LICENSE). Use it on any site, free.
+- **Service** (Cloud and Community: everything in `service/`): [Functional Source License 1.1, MIT Future License](./service/LICENSE.md) (FSL-1.1-MIT). You may run Community for free, for your own company and your clients, and change it. You may not offer it as a competing paid or hosted product. Two years after each release, that release becomes MIT.
+
+Code published before this change keeps the MIT license it was published under.
 
 ## Connect a coding agent
 

package/dist/overplay.esm.js

@@ -421,6 +421,10 @@ function matchesShortcut(event, shortcut) {
   const code = /^[a-z]$/.test(shortcut.key) ? `Key${shortcut.key.toUpperCase()}` : /^\d$/.test(shortcut.key) ? `Digit${shortcut.key}` : "";
   return event.key.toLowerCase() === shortcut.key || !!code && event.code === code;
 }
+function shortcutLabel(value, mac) {
+  const names = mac ? { alt: "Option", option: "Option", meta: "Cmd", cmd: "Cmd", ctrl: "Control", control: "Control" } : { alt: "Alt", option: "Alt", meta: "Meta", cmd: "Meta", ctrl: "Ctrl", control: "Ctrl" };
+  return value.toLowerCase().split("+").map((part) => part.trim()).filter(Boolean).map((part) => names[part] ?? (part.length === 1 ? part.toUpperCase() : part[0].toUpperCase() + part.slice(1))).join(" + ");
+}
 function newId() {
   if (typeof crypto.randomUUID === "function") return crypto.randomUUID();
   const bytes = crypto.getRandomValues(new Uint8Array(16));
@@ -470,10 +474,26 @@ function newActivity(comments, seen, selfId) {
 function sameComments(a, b) {
   return a.length === b.length && JSON.stringify(a) === JSON.stringify(b);
 }
-const version = "4.0.0";
+const version = "4.2.0";
 const VERSION = version;
 const PACKAGE = "overplay";
-const UPDATE_COMMAND = `npm install ${PACKAGE}@latest`;
+function updatePrompt(current, latest) {
+  return `Update the Overplay widget in this project from version ${current} to ${latest}.
+
+Steps:
+1. Find the package manager (look for package-lock.json, pnpm-lock.yaml, yarn.lock or bun.lockb) and update the package "${PACKAGE}" to ${latest}:
+   npm install ${PACKAGE}@${latest}   (or: pnpm add ${PACKAGE}@${latest}, yarn add ${PACKAGE}@${latest}, bun add ${PACKAGE}@${latest})
+2. Read the release notes from ${current} to ${latest}: https://github.com/artemsvit/Overplay-Community/blob/main/CHANGELOG.md
+   If a release lists breaking changes, update our code to match. Keep serverUrl, projectId and the other options as they are.
+3. Stop the dev server and clear the bundler cache, so the old widget is not served again:
+   - Vite: delete node_modules/.vite
+   - Next.js: delete .next
+   - Nuxt: delete .nuxt and node_modules/.cache
+   - Other tools (webpack, Parcel, Astro, SvelteKit): delete node_modules/.cache, .parcel-cache, .astro or .svelte-kit if they exist.
+4. Start the dev server again and tell me to hard-reload the browser (Cmd+Shift+R or Ctrl+Shift+R).
+5. Run the project's type check and build, and fix any errors.
+6. When you finish, list the files you changed. The update is done when the widget no longer shows "Version ${latest} is available".`;
+}
 function isNewer(latest, current) {
   const parse = (v) => {
     var _a;
@@ -572,6 +592,8 @@ const paths = {
   arrow: "M12 19V5m-6 6 6-6 6 6",
   refresh: "M20.5 12a8.5 8.5 0 1 1-2.6-6.1L20.5 8.5M20.5 3.5v5h-5",
   open: "M7 17 17 7M9 7h8v8",
+  copy: "M9 9h11v11H9zM5 15H4V4h11v1",
+  sparkle: "M10 3.5c.6 3.9 2.6 5.9 6.5 6.5-3.9.6-5.9 2.6-6.5 6.5-.6-3.9-2.6-5.9-6.5-6.5 3.9-.6 5.9-2.6 6.5-6.5ZM18 14.5c.3 1.9 1.1 2.7 3 3-1.9.3-2.7 1.1-3 3-.3-1.9-1.1-2.7-3-3 1.9-.3 2.7-1.1 3-3Z",
   trash: "M3 6h18M9 6V4h6v2M5 6l1 14h12l1-14M10 10v6m4-6v6",
   pin: "M12 21s7-6 7-13A7 7 0 0 0 5 8c0 7 7 13 7 13ZM12 6v4M10 8h4",
   search: "m21 21-5-5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z",
@@ -671,6 +693,10 @@ const tokens = {
   warning: "#745320",
   "warning-soft": "#fff8e8",
   "warning-line": "#ebd59f",
+  // AI: a light violet that marks AI features, such as the AI Install prompt. Never for buttons.
+  ai: "#6d4fe0",
+  "ai-soft": "#f6f3ff",
+  "ai-line": "#e3dbff",
   // Shape. Buttons and chips are pills; cards and windows have soft corners; big page panels have 26px.
   "radius-sm": "6px",
   radius: "10px",
@@ -710,6 +736,9 @@ const darkTokens = {
   warning: "#efc56e",
   "warning-soft": "#2f2718",
   "warning-line": "#57472a",
+  ai: "#a994ff",
+  "ai-soft": "#1d1a2c",
+  "ai-line": "#3b3263",
   "shadow-sm": "0 0 0 1px #ffffff14,0 1px 2px #00000066",
   shadow: "0 1px 3px #00000066,0 16px 40px -12px #000000b3"
 };
@@ -752,7 +781,7 @@ const styles = `
 .menu-note{display:flex;align-items:center;gap:2px;margin:4px 0 0;padding:8px 10px 4px;border-top:1px solid var(--cw-line);font-size:12px;color:var(--cw-muted)}
 .footer{justify-content:space-between}
 .footer-note{font-size:13px;color:var(--cw-muted)}
-.settings-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 20px 12px}
+.panel:focus{outline:0}.settings-tabs{grid-template-columns:1fr 1fr;margin:0 0 12px}.settings-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 20px 12px}
 .setting-group{padding:14px 0 6px}
 .setting-group+.setting-group{border-top:1px solid var(--cw-line)}
 .setting-group h3{margin:0 0 6px;font-size:12px;font-weight:650;letter-spacing:1.1px;text-transform:uppercase;color:var(--cw-muted)}
@@ -801,7 +830,7 @@ const styles = `
 .anchor-status .quiet{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 11px 6px 9px;font-size:13px;font-weight:600}.anchor-status .quiet svg{width:15px;height:15px;flex-shrink:0}
 @media(max-width:600px){.panel,.panel.left{inset:0;width:auto;border:0}.panel.placing{visibility:hidden}.panel.behind{visibility:hidden}.launcher{right:16px;bottom:16px}.notice,.notice.beside-panel,.notice.beside-panel.left{left:50%;bottom:24px;width:calc(100vw - 32px);font-size:13px}.compose-hint{display:none}.compose-bar{justify-content:flex-end}.toasts,.toasts.left,.toasts.beside-panel,.toasts.beside-panel.left{left:16px;right:16px;width:auto;max-width:none;bottom:82px}.toasts.top,.toasts.beside-panel.top{top:82px;bottom:auto}.toasts.beside-panel{display:none}.head{padding-top:18px}}
 .popover.moving{visibility:hidden;pointer-events:none}
-.update-bar{display:grid;grid-template-columns:30px 1fr auto;align-items:start;gap:4px 12px;padding:14px 12px 16px 20px;background:var(--cw-accent-soft);border-top-color:var(--cw-accent-line)}.update-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--cw-surface);color:var(--cw-accent);box-shadow:var(--cw-shadow-sm)}.update-icon svg{width:16px;height:16px}.update-text{display:flex;flex-direction:column;gap:1px;min-width:0;color:var(--cw-muted);font-size:12.5px;line-height:1.45}.update-text strong{color:var(--cw-ink);font-size:13px;font-weight:650}.update-command{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:8px 8px 0 0;padding:4px 4px 4px 10px;border:1px solid var(--cw-line);border-radius:9px;background:var(--cw-surface)}.update-command code{flex:1;min-width:0;color:var(--cw-ink);font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.update-bar .quiet.update{padding:5px 12px;border-radius:var(--cw-radius-pill)}
+.update-bar{display:grid;grid-template-columns:30px 1fr auto;align-items:start;gap:4px 12px;padding:14px 12px 16px 20px;background:var(--cw-accent-soft);border-top-color:var(--cw-accent-line)}.update-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--cw-surface);color:var(--cw-accent);box-shadow:var(--cw-shadow-sm)}.update-icon svg{width:16px;height:16px}.update-text{display:flex;flex-direction:column;gap:1px;min-width:0;color:var(--cw-muted);font-size:12.5px;line-height:1.45}.update-text strong{color:var(--cw-ink);font-size:13px;font-weight:650}.update-actions{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:8px;margin:8px 8px 0 0}.update-actions .quiet{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:600;border-radius:var(--cw-radius-pill)}.update-actions svg{width:14px;height:14px}.update-toggle svg{color:var(--cw-ai)}.update-prompt{grid-column:1/-1;margin:10px 8px 0 0;max-height:220px;overflow:auto;padding:10px 12px;border:1px solid var(--cw-ai-line);border-radius:10px;background:linear-gradient(135deg,var(--cw-ai-soft),var(--cw-surface));color:var(--cw-ink);font:11.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}.update-prompt:focus-visible{outline:2px solid var(--cw-accent);outline-offset:2px}
 @media(max-width:600px){.search input{font-size:16px}.select{max-width:100%}}
 @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
 `;
@@ -1667,6 +1696,8 @@ class Overlay {
     __publicField(this, "settingsCache", null);
     /** A newer npm version, found when the sidebar first opens. See checkForUpdate(). */
     __publicField(this, "update", null);
+    __publicField(this, "updatePromptOpen", false);
+    __publicField(this, "settingsTab", "general");
     __publicField(this, "updateChecked", false);
     /** The page margin we replaced to make room for the sidebar, restored when it closes. */
     __publicField(this, "pushed", null);
@@ -1884,13 +1915,13 @@ class Overlay {
       });
     });
     var _a, _b, _c;
-    this.config = { primaryColor: "#0068f9", position: "bottom-right", keyboardShortcut: "alt+shift+c", enableKeyboardShortcuts: true, ...config };
+    this.config = { primaryColor: "#0068f9", position: "bottom-right", keyboardShortcut: "alt+c", enableKeyboardShortcuts: true, ...config };
     if (!/^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(this.config.primaryColor ?? "")) {
       throw new Error("primaryColor must be a 3- or 6-digit hex color.");
     }
     if (this.config.theme !== void 0 && !THEMES.includes(this.config.theme)) throw new Error('theme must be "light", "dark" or "system".');
     this.shortcut = parseShortcut(this.config.keyboardShortcut ?? "");
-    if (this.config.enableKeyboardShortcuts && !this.shortcut) throw new Error('keyboardShortcut must be a key such as "alt+shift+c".');
+    if (this.config.enableKeyboardShortcuts && !this.shortcut) throw new Error('keyboardShortcut must be a key such as "alt+c".');
     const project = config.projectId || location.hostname || "default";
     this.identityKey = `overplay:${project}:user`;
     this.launcherKey = `overplay:${project}:launcher`;
@@ -2229,7 +2260,11 @@ ${this.currentPage()}`;
     this.visible = true;
     this.render();
     this.trackLayoutMotion();
-    (_a = this.shadow.querySelector(".panel button, .launcher")) == null ? void 0 : _a.focus();
+    const panel = this.shadow.querySelector(".panel");
+    if (panel) {
+      panel.tabIndex = -1;
+      panel.focus({ preventScroll: true });
+    } else (_a = this.shadow.querySelector(".launcher")) == null ? void 0 : _a.focus();
     this.checkForUpdate();
   }
   hide() {
@@ -2727,7 +2762,9 @@ ${this.currentPage()}`;
    * Only development hosts check by default: that is where the person reading the notice can run npm.
    */
   checkForUpdate() {
-    if (this.updateChecked || !(this.config.updateNotice ?? developmentHost(location.hostname))) return;
+    var _a;
+    const scriptTag = typeof ((_a = globalThis.Overplay) == null ? void 0 : _a.init) === "function";
+    if (this.updateChecked || !(this.config.updateNotice ?? (developmentHost(location.hostname) && !scriptTag))) return;
     this.updateChecked = true;
     void latestVersion().then((latest) => {
       if (this.destroyed || !latest || !isNewer(latest, VERSION)) return;
@@ -2740,19 +2777,24 @@ ${this.currentPage()}`;
     });
   }
   async copyUpdate() {
+    const prompt = updatePrompt(VERSION, this.update ?? "latest");
     let copied = false;
     try {
-      await navigator.clipboard.writeText(UPDATE_COMMAND);
+      await navigator.clipboard.writeText(prompt);
       copied = true;
     } catch {
     }
+    if (!copied) {
+      this.updatePromptOpen = true;
+      this.render();
+    }
     this.toast({
       kind: "comment",
       commentId: "",
-      author: copied ? `Update command copied` : "Run this to update",
-      text: copied ? `Run it in your project, then reload: ${UPDATE_COMMAND}` : UPDATE_COMMAND
+      author: copied ? "Update prompt copied" : "Copy the prompt below",
+      text: copied ? "Paste it into your coding agent. It updates the package, clears the cache and restarts the dev server." : "Select the prompt text and copy it."
     }, true);
-    this.announce(copied ? "Update command copied." : `Run ${UPDATE_COMMAND} to update.`);
+    this.announce(copied ? "Update prompt copied." : "Select the prompt text to copy it.");
   }
   /** "Later" hides the notice until the next version comes out. */
   dismissUpdate() {
@@ -3468,6 +3510,10 @@ ${this.currentPage()}`;
     return empty;
   }
   /** A new npm version is the one thing left at the bottom. The account and settings live in the header. */
+  /**
+   * The update notice: an AI prompt that updates the package, clears the bundler cache and restarts the dev
+   * server. A version bump alone often keeps serving the old widget.
+   */
   footer() {
     if (!this.update) return null;
     const footer = element("div", "footer update-bar");
@@ -3475,16 +3521,24 @@ ${this.currentPage()}`;
     const mark = element("span", "update-icon");
     mark.append(icon("refresh"));
     const text = element("div", "update-text");
-    text.append(element("strong", "", `Version ${this.update} is available`), element("span", "", `You have ${VERSION}. Update the package, then reload.`));
-    const command = element("div", "update-command");
-    const code = element("code", "", UPDATE_COMMAND);
-    code.title = UPDATE_COMMAND;
-    const copy = button(`Copy the command to update to version ${this.update}`, "quiet update", () => {
+    text.append(element("strong", "", `Version ${this.update} is available`), element("span", "", `You have ${VERSION}. Give this prompt to your coding agent to update.`));
+    const actions = element("div", "update-actions");
+    const show = button(this.updatePromptOpen ? "Hide Prompt" : "Show Prompt", "quiet update-toggle", () => {
+      this.updatePromptOpen = !this.updatePromptOpen;
+      this.render();
+    }, "sparkle");
+    show.setAttribute("aria-expanded", String(this.updatePromptOpen));
+    const copy = button("Copy Prompt", "quiet update", () => {
       void this.copyUpdate();
-    });
-    copy.querySelector("span").textContent = "Copy";
-    command.append(code, copy);
-    footer.append(mark, text, button("Hide until the next version", "icon-button", () => this.dismissUpdate(), "close"), command);
+    }, "copy");
+    actions.append(show, copy);
+    footer.append(mark, text, button("Hide until the next version", "icon-button", () => this.dismissUpdate(), "close"), actions);
+    if (this.updatePromptOpen) {
+      const prompt = element("pre", "update-prompt", updatePrompt(VERSION, this.update));
+      prompt.tabIndex = 0;
+      prompt.setAttribute("aria-label", "Update prompt for your coding agent");
+      footer.append(prompt);
+    }
     return footer;
   }
   messageHeader(name, timestamp, url, via, words2 = []) {
@@ -3637,14 +3691,26 @@ ${this.currentPage()}`;
   }
   /** Display choices for this project. Each person has their own, saved in this browser. */
   settingsView() {
-    var _a;
     const view = this.view("Settings", "settings");
     view.append(this.detailHeading("Settings", "Your choices for this project. Other people keep their own."));
     const current = this.settings, body = element("div", "settings-body");
-    const section = (title) => {
+    const tabs = element("div", "tabs settings-tabs");
+    tabs.setAttribute("role", "group");
+    tabs.setAttribute("aria-label", "Settings section");
+    for (const [id, label2] of [["general", "General"], ["appearance", "Appearance"]]) {
+      const tab = button(label2, "tab", () => {
+        this.settingsTab = id;
+        this.render();
+      });
+      tab.setAttribute("aria-pressed", String(this.settingsTab === id));
+      tab.dataset.focus = `settings-tab-${id}`;
+      tabs.append(tab);
+    }
+    body.append(tabs);
+    const section = (title, tab) => {
       const group = element("section", "setting-group");
       group.append(element("h3", "", title));
-      body.append(group);
+      if (tab === this.settingsTab) body.append(group);
       return group;
     };
     const row = (group, label2, hint, control) => {
@@ -3680,9 +3746,9 @@ ${this.currentPage()}`;
       control.addEventListener("click", () => this.setSetting(name, !on));
       return control;
     };
-    const look = section("Appearance");
+    const look = section("Theme", "appearance");
     row(look, "Theme", current.theme === "system" ? "Follows your device" : "", choice("theme", "Theme", [["light", "Light"], ["dark", "Dark"], ["system", "System"]]));
-    const pins = section("Pins");
+    const pins = section("Pins", "appearance");
     const sample = element("div", `pin-sample${current.pinSize === "small" ? " small" : ""}${current.resolvedPins === "gray" ? " resolved-gray" : ""}`);
     sample.setAttribute("aria-hidden", "true");
     sample.style.setProperty("--cw-accent", this.pinColor());
@@ -3706,7 +3772,7 @@ ${this.currentPage()}`;
     row(pins, "Resolved pins", "", choice("resolvedPins", "Resolved pins", [["green", "Green"], ["gray", "Gray"]]));
     row(pins, "Size", "", choice("pinSize", "Pin size", [["regular", "Regular"], ["small", "Small"]]));
     row(pins, "Label", "", choice("pinLabel", "Pin label", [["number", "Number"], ["initials", "Initials"]]));
-    const floating = section("Comments button");
+    const floating = section("Comments button", "appearance");
     const buttonSample = element("div", "launcher-sample");
     buttonSample.setAttribute("aria-hidden", "true");
     const mini = element("span", "launcher-mini");
@@ -3728,7 +3794,7 @@ ${this.currentPage()}`;
     }
     const buttonHint = current.buttonColor === "default" ? "Dark. Takes the site color while open." : current.buttonColor === "site" ? "The color of this site" : PIN_COLORS[current.buttonColor].label;
     row(floating, "Color", buttonHint, buttonSwatches).classList.add("wide");
-    const panel = section("Panel");
+    const panel = section("Panel", "general");
     const open = element("div", "segmented");
     open.setAttribute("role", "group");
     open.setAttribute("aria-label", "Open comments");
@@ -3742,9 +3808,9 @@ ${this.currentPage()}`;
     }
     row(panel, "Open comments", "", open);
     row(panel, "Push the page aside", "The open panel does not cover the page.", toggle("pushContent", "Push the page aside"));
-    const alerts = section("Notifications and keys");
+    const alerts = section("Notifications and keys", "general");
     row(alerts, "New activity", "Show a short notice when others comment or reply.", toggle("notifications", "Show new activity"));
-    const keys = ((_a = this.config.keyboardShortcut) == null ? void 0 : _a.split("+").map((key2) => key2.length === 1 ? key2.toUpperCase() : key2[0].toUpperCase() + key2.slice(1)).join(" + ")) ?? "";
+    const keys = shortcutLabel(this.config.keyboardShortcut ?? "", /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent));
     row(alerts, "Keyboard shortcut", this.shortcut ? `${keys} opens and closes comments.` : "This site has no shortcut.", toggle("shortcut", "Keyboard shortcut", !this.shortcut));
     const foot = element("div", "settings-foot");
     foot.append(element("span", "", "Saved in this browser"), button("Reset to Defaults", "quiet", () => this.resetSettings()));