From 6f3c126fda32ea29c5445c8e918f97a1026e53e1 Mon Sep 17 00:00:00 2001
From: Phil LaFayette <plafaydev@gmail.com>
Date: Fri, 26 Jun 2026 15:37:11 -0500
Subject: [PATCH] Fix @mention styling inside bold/italic + 3 audit loose ends
 (#55 follow-up)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PRIMARY: @mentions inside inline emphasis lost their mention styling.
MessageBubble.parseBody emitted bold/italic/strike tokens whose inner
`value` was raw text never run through the mention/link splitter, so an
@mention in **bold** or *italic* rendered with emphasis styling but no
mention pill/color. Extract the mention+link classification into a shared
`splitTextToSegments` helper, run it over emphasis inner values, and
render the resulting children INSIDE the emphasis wrapper via a recursive
`renderSeg` snippet — mentions/links now inherit emphasis styling AND get
their own chip/link styling. Code spans stay literal (never linkified).
`hasSelfMention` now recurses into emphasis children for the border accent.

SECONDARY (audit follow-ups):
- ChannelModal isPrivate wired end-to-end: App -> store.createChannel(id,
  topic, isPrivate). The create API takes no visibility arg, so createChannel
  sets the local row + retained meta to private AND persists via the admin
  path (setVisibility -> comms_conversation_update), mirroring
  ChannelAdminPanel. #handleMeta now reads visibility from the broadcast.
- ArtifactDetailHeader Compare dropdown closes on outside mousedown via a
  <svelte:window> guard, mirroring ArtifactPanel's primary-dropdown pattern.
- safeStorage DRY: extracted the byte-identical copies from mqtt-store and
  resizable-panel into a shared web/src/lib/safe-storage.js.

Tests: +11 (bold/italic/strike/plain mention chips + code-not-linkified;
createChannel private/public/queued; compare-dropdown outside-click).
1314 -> 1325 tests, all green; build green.
---
 web/src/App.svelte                            |   2 +-
 .../components/ArtifactDetailHeader.svelte    |  21 ++
 web/src/components/MessageBubble.svelte       | 184 +++++++++++-------
 web/src/lib/mqtt-store.svelte.js              |  79 +++++---
 web/src/lib/resizable-panel.svelte.js         |  30 +--
 web/src/lib/safe-storage.js                   |  41 ++++
 ...act-compare-dropdown-outside-click.spec.js | 102 ++++++++++
 web/tests/channel-modal-wires.spec.js         |   7 +-
 .../message-bubble-mention-emphasis.spec.js   | 162 +++++++++++++++
 web/tests/mqtt-store-admin-actions.spec.js    |  59 ++++++
 10 files changed, 556 insertions(+), 131 deletions(-)
 create mode 100644 web/src/lib/safe-storage.js
 create mode 100644 web/tests/artifact-compare-dropdown-outside-click.spec.js
 create mode 100644 web/tests/message-bubble-mention-emphasis.spec.js

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 88f99ab..cb83b6d 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -1114,7 +1114,7 @@
 {#if showChannelModal}
   <ChannelModal
     onClose={() => showChannelModal = false}
-    onCreate={(id, topic) => { store.createChannel(id, topic); showChannelModal = false; }}
+    onCreate={(id, topic, isPrivate) => { store.createChannel(id, topic, isPrivate); showChannelModal = false; }}
   />
 {/if}
 
diff --git a/web/src/components/ArtifactDetailHeader.svelte b/web/src/components/ArtifactDetailHeader.svelte
index 4ae76ab..1b7515f 100644
--- a/web/src/components/ArtifactDetailHeader.svelte
+++ b/web/src/components/ArtifactDetailHeader.svelte
@@ -144,6 +144,25 @@
     showCompareDropdown = !showCompareDropdown;
   }
 
+  /**
+   * Close the Compare dropdown on an outside click. The Compare dropdown's
+   * open state (`showCompareDropdown`) is owned locally in this component
+   * (unlike the primary dropdown, whose state lives in ArtifactPanel and is
+   * closed by that file's window guard), so the outside-click listener
+   * belongs here too. Mirrors ArtifactPanel.handleVersionDropdownOutsideClick:
+   * the trigger + listbox both live inside
+   * `[data-testid="compare-version-selector"]`, so a mousedown anywhere
+   * outside that subtree closes the dropdown.
+   * @param {MouseEvent} e
+   */
+  function handleCompareDropdownOutsideClick(e) {
+    if (!showCompareDropdown) return;
+    const node = e.target;
+    const el = node instanceof Element ? node : (node?.parentElement ?? null);
+    if (el && el.closest('[data-testid="compare-version-selector"]')) return;
+    showCompareDropdown = false;
+  }
+
   // Diff mode is disabled when there is only a single version to compare.
   let diffDisabled = $derived(!hasMultipleVersions);
 
@@ -325,6 +344,8 @@
   );
 </script>
 
+<svelte:window onmousedown={handleCompareDropdownOutsideClick} />
+
 <div class="artifact-header">
   <div class="artifact-header-top">
     <button class="artifact-back-btn" onclick={onBack} title="Back to list" aria-label="Back to artifact list">
diff --git a/web/src/components/MessageBubble.svelte b/web/src/components/MessageBubble.svelte
index 90f633f..6cdceec 100644
--- a/web/src/components/MessageBubble.svelte
+++ b/web/src/components/MessageBubble.svelte
@@ -110,29 +110,36 @@
     // loud-notify yourself about your own message.
     const viewerIsSender = viewerKey !== null && senderKey !== null && viewerKey === senderKey;
 
-    const result = [];
-    for (const t of richTokens) {
-      if (t.type === 'inline-code') {
-        result.push({ type: 'inline-code', value: t.value });
-        continue;
-      }
-      if (t.type === 'block-code' || t.type === 'unclosed-block') {
-        // Existing CodeBlock component handles fenced rendering with shiki;
-        // keep that pipeline for parity with the markdown-rendered surface.
-        result.push({ type: 'codeblock', language: t.lang || '', code: t.value });
-        continue;
-      }
-      if (t.type === 'bold' || t.type === 'italic' || t.type === 'strike') {
-        // Emphasis tokens come from `parseRich` (read-side only). The inner
-        // value is plain text (flat-only v1 — no nesting), so mentions/links
-        // INSIDE *foo* / **bar** won't render as pills/links. That's a fair
-        // tradeoff for v1; we can revisit with a recursive parse if Phil
-        // hits a real case.
-        result.push({ type: t.type, value: t.value });
-        continue;
+    // Coalesce adjacent text segments that result from invalid-mention
+    // rewriting (e.g. "literal @mention here" becomes 3 text segments;
+    // joining them keeps the rendered output identical to a single text
+    // node and avoids stray inline boundaries the user could see as a
+    // layout artifact). Same-type, same-attribute segments only.
+    function coalesceText(segs) {
+      const out = [];
+      for (const seg of segs) {
+        const prev = out[out.length - 1];
+        if (prev && prev.type === 'text' && seg.type === 'text') {
+          prev.value += seg.value;
+        } else {
+          out.push(seg);
+        }
       }
-      // text token: run mention + URL splitting (preserves prior behavior).
-      const mentionSegments = parseMentions(t.value);
+      return out;
+    }
+
+    // Split a plain-text run into mention / mention-self / mention-other /
+    // link / text segments. Shared by top-level `text` tokens AND the inner
+    // value of emphasis tokens (bold / italic / strike), so an `@mention`
+    // inside `**bold**` / `*italic*` / `~~strike~~` still resolves to a
+    // mention chip (primary bugfix — emphasis no longer swallows mentions).
+    //
+    // Code spans (inline-code / block-code) never reach here — they're
+    // emitted as their own tokens and pushed literally — so an `@name`
+    // inside backtick `code` stays literal and is never linkified.
+    function splitTextToSegments(text) {
+      const segs = [];
+      const mentionSegments = parseMentions(text);
       for (const mseg of mentionSegments) {
         if (mseg.type === 'mention') {
           // Validate the @-prefixed value against the live participants set.
@@ -150,9 +157,9 @@
             const broadcastName = mseg.value.startsWith('@') ? mseg.value.slice(1) : mseg.value;
             const viewerTargeted = viewerKey !== null && mentionsSet.has(viewerKey);
             if (viewerTargeted && !viewerIsSender) {
-              result.push({ type: 'mention-self', name: broadcastName, key: '__broadcast__' });
+              segs.push({ type: 'mention-self', name: broadcastName, key: '__broadcast__' });
             } else {
-              result.push({ type: 'mention-other', name: broadcastName, key: '__broadcast__' });
+              segs.push({ type: 'mention-other', name: broadcastName, key: '__broadcast__' });
             }
             continue;
           }
@@ -160,7 +167,7 @@
           if (resolvedKey === undefined) {
             // Unknown participant — render as plain text (existing
             // behavior, prevents "@example" literal chips).
-            result.push({ type: 'text', value: mseg.value });
+            segs.push({ type: 'text', value: mseg.value });
             continue;
           }
           // Resolved to a real participant. Classify against the wire
@@ -176,30 +183,30 @@
                 // Sender-self special case (§6.3 step 4): viewer IS the
                 // sender. Downgrade to legacy `.mention` — not loud,
                 // and not "other" either. Don't loud-notify yourself.
-                result.push(mseg);
+                segs.push(mseg);
               } else {
                 // Self-mention. Loud styling. The bubble border accent
                 // is computed from `bodySegments` after parseBody
                 // returns.
-                result.push({ type: 'mention-self', name: displayName, key: resolvedKey });
+                segs.push({ type: 'mention-self', name: displayName, key: resolvedKey });
               }
             } else {
               // Other-mention. Quiet styling. Includes the case where
               // the sender is the viewer AND someone ELSE is also
               // mentioned — the loop only sees one segment per `@name`
               // token, and this branch handles the non-self ones.
-              result.push({ type: 'mention-other', name: displayName, key: resolvedKey });
+              segs.push({ type: 'mention-other', name: displayName, key: resolvedKey });
             }
           } else {
             // Legacy / unkeyed / whisper / mentions-inactive — keep the
             // existing chip styling. Backwards-compat slot, also covers
             // whisper-with-named-recipient per §6.3 R2-C1.
-            result.push(mseg);
+            segs.push(mseg);
           }
           continue;
         }
         if (mseg.type !== 'text') {
-          result.push(mseg);
+          segs.push(mseg);
           continue;
         }
         let lastIndex = 0;
@@ -207,32 +214,48 @@
         LINK_REGEX.lastIndex = 0;
         while ((match = LINK_REGEX.exec(mseg.value)) !== null) {
           if (match.index > lastIndex) {
-            result.push({ type: 'text', value: mseg.value.slice(lastIndex, match.index) });
+            segs.push({ type: 'text', value: mseg.value.slice(lastIndex, match.index) });
           }
-          result.push({ type: 'link', value: match[0] });
+          segs.push({ type: 'link', value: match[0] });
           lastIndex = match.index + match[0].length;
         }
         if (lastIndex < mseg.value.length) {
-          result.push({ type: 'text', value: mseg.value.slice(lastIndex) });
+          segs.push({ type: 'text', value: mseg.value.slice(lastIndex) });
         }
       }
+      return coalesceText(segs);
     }
 
-    // Coalesce adjacent text segments that result from invalid-mention
-    // rewriting (e.g. "literal @mention here" becomes 3 text segments;
-    // joining them keeps the rendered output identical to a single
-    // text node and avoids stray inline boundaries the user could see
-    // as a layout artifact). Same-type, same-attribute segments only.
-    const coalesced = [];
-    for (const seg of result) {
-      const prev = coalesced[coalesced.length - 1];
-      if (prev && prev.type === 'text' && seg.type === 'text') {
-        prev.value += seg.value;
-      } else {
-        coalesced.push(seg);
+    const result = [];
+    for (const t of richTokens) {
+      if (t.type === 'inline-code') {
+        result.push({ type: 'inline-code', value: t.value });
+        continue;
+      }
+      if (t.type === 'block-code' || t.type === 'unclosed-block') {
+        // Existing CodeBlock component handles fenced rendering with shiki;
+        // keep that pipeline for parity with the markdown-rendered surface.
+        result.push({ type: 'codeblock', language: t.lang || '', code: t.value });
+        continue;
+      }
+      if (t.type === 'bold' || t.type === 'italic' || t.type === 'strike') {
+        // Emphasis tokens from `parseRich` (read-side only) carry a plain-
+        // text inner `value` (flat-only v1 — no nested code). Run the same
+        // mention + link splitting over that value and stash the result as
+        // `children`; the template renders them INSIDE the emphasis wrapper
+        // so a mention/link inside *foo* / **bar** / ~~baz~~ gets BOTH the
+        // emphasis styling (inherited from the wrapper) AND its own chip /
+        // link styling. Fixes the "@mention in bold loses its color" bug.
+        result.push({ type: t.type, value: t.value, children: splitTextToSegments(t.value) });
+        continue;
+      }
+      // text token: run mention + URL splitting (preserves prior behavior).
+      for (const seg of splitTextToSegments(t.value)) {
+        result.push(seg);
       }
     }
-    return coalesced;
+
+    return coalesceText(result);
   }
 
   let { message, consecutive = false, currentUser, participants, onOpenThread, onContextMenu, onShowProfile, onReact, onMore, onRetry } = $props();
@@ -252,10 +275,17 @@
   let senderColor = $derived(getParticipantColor(message.sender.key));
   let bodySegments = $derived(parseBody(message.body, participants, message, currentUser));
   // True iff ANY rendered segment is `mention-self` — drives the bubble
-  // border accent (`.has-self-mention`). The sender-self downgrade is
-  // already applied in parseBody, so this naturally returns false for
-  // the sender's own bubble and won't paint the loud border on it.
-  let hasSelfMention = $derived(bodySegments.some(s => s.type === 'mention-self'));
+  // border accent (`.has-self-mention`). Recurses into emphasis `children`
+  // so a self-mention inside **bold** / *italic* still paints the accent.
+  // The sender-self downgrade is already applied in parseBody, so this
+  // naturally returns false for the sender's own bubble.
+  function segsHaveSelfMention(segs) {
+    return segs.some(s =>
+      s.type === 'mention-self' ||
+      (Array.isArray(s.children) && segsHaveSelfMention(s.children))
+    );
+  }
+  let hasSelfMention = $derived(segsHaveSelfMention(bodySegments));
   let hasCode = $derived(message.body.includes('```'));
 
   // Detect URLs in message body for link previews
@@ -324,6 +354,36 @@
   }
 </script>
 
+<!--
+  Recursive segment renderer. Top-level body segments and the `children`
+  of emphasis (bold/italic/strike) segments share one render path, so a
+  mention or link nested inside emphasis gets its own chip/link styling
+  while inheriting the emphasis styling from the wrapper element.
+-->
+{#snippet renderSeg(seg)}
+  {#if seg.type === 'mention'}
+    <span class="mention">{seg.value}</span>
+  {:else if seg.type === 'mention-self'}
+    <span class="mention-chip-self">@{seg.name}</span>
+  {:else if seg.type === 'mention-other'}
+    <span class="mention-chip-other">@{seg.name}</span>
+  {:else if seg.type === 'link'}
+    <a class="inline-link" href={seg.value} target="_blank" rel="noopener noreferrer">{seg.value}</a>
+  {:else if seg.type === 'codeblock'}
+    <CodeBlock language={seg.language} code={seg.code} />
+  {:else if seg.type === 'inline-code'}
+    <span class="code-chip">{seg.value}</span>
+  {:else if seg.type === 'bold'}
+    <strong class="md-bold">{#each seg.children as c, i (i)}{@render renderSeg(c)}{/each}</strong>
+  {:else if seg.type === 'italic'}
+    <em class="md-italic">{#each seg.children as c, i (i)}{@render renderSeg(c)}{/each}</em>
+  {:else if seg.type === 'strike'}
+    <span class="md-strike">{#each seg.children as c, i (i)}{@render renderSeg(c)}{/each}</span>
+  {:else}
+    {seg.value}
+  {/if}
+{/snippet}
+
 <div
   class="msg-row"
   class:claude={!isHuman}
@@ -371,29 +431,7 @@
     {/if}
 
     <div class="bubble" class:bubble-targeted={isTargeted} class:has-self-mention={hasSelfMention}>
-      {#each bodySegments as seg, i (i)}
-        {#if seg.type === 'mention'}
-          <span class="mention">{seg.value}</span>
-        {:else if seg.type === 'mention-self'}
-          <span class="mention-chip-self">@{seg.name}</span>
-        {:else if seg.type === 'mention-other'}
-          <span class="mention-chip-other">@{seg.name}</span>
-        {:else if seg.type === 'link'}
-          <a class="inline-link" href={seg.value} target="_blank" rel="noopener noreferrer">{seg.value}</a>
-        {:else if seg.type === 'codeblock'}
-          <CodeBlock language={seg.language} code={seg.code} />
-        {:else if seg.type === 'inline-code'}
-          <span class="code-chip">{seg.value}</span>
-        {:else if seg.type === 'bold'}
-          <strong class="md-bold">{seg.value}</strong>
-        {:else if seg.type === 'italic'}
-          <em class="md-italic">{seg.value}</em>
-        {:else if seg.type === 'strike'}
-          <span class="md-strike">{seg.value}</span>
-        {:else}
-          {seg.value}
-        {/if}
-      {/each}
+      {#each bodySegments as seg, i (i)}{@render renderSeg(seg)}{/each}
     </div>
 
     {#each detectedUrls as link (link.url)}
diff --git a/web/src/lib/mqtt-store.svelte.js b/web/src/lib/mqtt-store.svelte.js
index 66e1ed7..fe88629 100644
--- a/web/src/lib/mqtt-store.svelte.js
+++ b/web/src/lib/mqtt-store.svelte.js
@@ -1,6 +1,7 @@
 import mqtt from 'mqtt';
 import { generateUUID, generateKey } from './utils.js';
 import { API_BASE, apiGet, apiPost, mcpCall, getReactions } from './api.js';
+import { safeStorage } from './safe-storage.js';
 
 // Default broker port + path used when the daemon doesn't advertise its own.
 const DEFAULT_BROKER_WS_PORT = 9001;
@@ -210,26 +211,10 @@ const CONNECTION_TTL_MS = 120_000;
 /** How long an offline user entry is kept for display before removal (ms). */
 const OFFLINE_DISPLAY_MS = 5 * 60 * 1000;
 
-/**
- * Safe localStorage wrapper that falls back gracefully
- * when storage is unavailable (private browsing, quota exceeded, etc.).
- */
-const safeStorage = {
-  getItem(key) {
-    try {
-      return typeof localStorage !== 'undefined' ? localStorage.getItem(key) : null;
-    } catch {
-      return null;
-    }
-  },
-  setItem(key, value) {
-    try {
-      if (typeof localStorage !== 'undefined') localStorage.setItem(key, value);
-    } catch {
-      // localStorage unavailable (private browsing, quota exceeded) -- silently ignore
-    }
-  }
-};
+// `safeStorage` (localStorage wrapper tolerant of private browsing / quota /
+// no-DOM) now lives in the shared `./safe-storage.js` module — imported above.
+// Previously this file carried its own byte-identical copy (#55 follow-up:
+// folded the third copy alongside resizable-panel into one shared util).
 
 /**
  * MqttChatStore — Svelte 5 runes-based reactive MQTT chat store.
@@ -2513,15 +2498,27 @@ export class MqttChatStore {
    * No-op if a channel with the given ID already exists.
    * @param {string} id - Unique channel identifier (lowercase, dashes).
    * @param {string} topic - Short description shown in the channel header.
-   */
-  createChannel(id, topic = '') {
+   * @param {boolean} [isPrivate=false] - When true the channel is created
+   *   ``'private'`` (Unlisted): the local row, the retained meta broadcast,
+   *   and the backend visibility record all reflect private. The create API
+   *   (``comms_conversation_create``) takes no visibility argument, so —
+   *   mirroring how ChannelAdminPanel flips visibility — we set the local
+   *   visibility immediately AND persist it through the admin path
+   *   (``setVisibility`` → ``comms_conversation_update``) right after create.
+   */
+  createChannel(id, topic = '', isPrivate = false) {
     if (this.channelsById[id]) return;
 
+    // The ChannelModal "Private Channel" toggle maps to the backend
+    // visibility taxonomy: private → ``'private'`` (Unlisted), otherwise
+    // the ``'public'`` default (surfaces in the directory's Browse tab).
+    const visibility = isPrivate ? 'private' : 'public';
+
     // v0.4.0 Step 2.6 — populate the full ChannelRow shape on local
     // create. ``member`` defaults true because the creator implicitly
-    // joins. ``visibility`` defaults ``'public'`` so the new channel
-    // surfaces in the directory's Browse tab for other users (v0.4.2
-    // Step 3.6b pinned ``'public'`` over the legacy ``'listed'``).
+    // joins. ``visibility`` reflects the Private toggle so the new channel
+    // renders with the correct visibility immediately (v0.4.2 Step 3.6b
+    // pinned ``'public'``/``'private'`` as the canonical pair).
     this.channelsById[id] = this.#channelRowFromPayload({
       id,
       name: id,
@@ -2530,7 +2527,7 @@ export class MqttChatStore {
       memberCount: 1,
       lastActivity: new Date().toISOString(),
       mode: 'public',
-      visibility: 'public',
+      visibility,
       createdAt: new Date().toISOString(),
       createdBy: this.userProfile.key,
       myUnread: 0,
@@ -2538,14 +2535,17 @@ export class MqttChatStore {
       myMuted: false,
     });
 
-    // Publish meta
+    // Publish meta. Include ``visibility`` so other clients render the new
+    // channel with the creator's chosen visibility instead of defaulting to
+    // public (``#handleMeta`` reads it back).
     if (this.#client) {
       const metaTopic = TOPIC_PREFIX + '/conv/' + id + '/meta';
       this.#client.publish(metaTopic, JSON.stringify({
         conv_id: id,
         created_by: this.userProfile.key,
         created_at: new Date().toISOString(),
-        topic
+        topic,
+        visibility
       }), { qos: 1, retain: true });
     }
 
@@ -2563,6 +2563,16 @@ export class MqttChatStore {
     // ``state_unsafe_mutation`` on the first render after create.
     this.#prewarmNotificationPolicyForChannel(id);
 
+    // Persist the chosen visibility through the backend admin path. The
+    // create API has no visibility argument, so we mirror ChannelAdminPanel
+    // and flip it immediately after create. Only needed for ``private`` —
+    // ``public`` is already the server-side default. ``setVisibility`` is
+    // optimistic + queues while offline, so this is fire-and-forget; the
+    // local row above already reflects the choice for instant feedback.
+    if (isPrivate) {
+      void this.setVisibility(id, 'private');
+    }
+
     this.switchChannel(id);
   }
 
@@ -5389,7 +5399,10 @@ export class MqttChatStore {
         member: false,
         memberCount: 0,
         mode: 'public',
-        visibility: 'public',
+        // Honor the creator's chosen visibility from the meta broadcast
+        // (createChannel publishes it); fall back to public for legacy
+        // meta payloads that predate the visibility field.
+        visibility: typeof msg.visibility === 'string' ? msg.visibility : 'public',
         createdAt: msg.created_at || null,
         createdBy: msg.created_by || null,
         myUnread: 0,
@@ -5402,8 +5415,12 @@ export class MqttChatStore {
       this.channelRoles[channelId] = this.#inferChannelRole(channelId);
       // v0.4.4 hotfix (Bug 3): pre-warm notification-policy cache.
       this.#prewarmNotificationPolicyForChannel(channelId);
-    } else if (msg.topic) {
-      existing.topic = msg.topic;
+    } else {
+      if (msg.topic) existing.topic = msg.topic;
+      // A later meta broadcast can carry an updated visibility (e.g. the
+      // creator flipped Private after the row was first seen). Keep the
+      // local row in sync rather than freezing the first-seen value.
+      if (typeof msg.visibility === 'string') existing.visibility = msg.visibility;
     }
   }
 
diff --git a/web/src/lib/resizable-panel.svelte.js b/web/src/lib/resizable-panel.svelte.js
index 8469d76..77ae9d2 100644
--- a/web/src/lib/resizable-panel.svelte.js
+++ b/web/src/lib/resizable-panel.svelte.js
@@ -1,3 +1,5 @@
+import { safeStorage } from './safe-storage.js';
+
 /**
  * lib/resizable-panel.svelte.js — shared drag-to-resize controller for the
  * slide-out side panels (ArtifactPanel + ThreadPanel).
@@ -13,9 +15,9 @@
  * only in the MIN / MAX / DEFAULT constants and the localStorage key. Any
  * resize bug had to be fixed in two places. This consolidates them.
  *
- * NOTE: mqtt-store.svelte.js keeps its OWN `safeStorage` copy; unifying that
- * third copy is a separate follow-up (different file owner) and is left as a
- * known remaining duplication.
+ * NOTE: `safeStorage` now lives in the shared `./safe-storage.js` module and
+ * is imported by both this file and mqtt-store.svelte.js — the three formerly
+ * duplicated copies are unified (#55 follow-up).
  *
  * Behaviour is byte-for-byte equivalent to the previous in-component logic:
  *   - Width persisted per-panel in localStorage, clamped to [min, max] with a
@@ -53,26 +55,8 @@ export function createResizablePanel({
   minChatReserve = 200,
   keyStep = 16,
 }) {
-  /**
-   * Safe localStorage wrapper. Tolerates private browsing / quota errors by
-   * silently no-oping.
-   */
-  const safeStorage = {
-    getItem(key) {
-      try {
-        return typeof localStorage !== 'undefined' ? localStorage.getItem(key) : null;
-      } catch {
-        return null;
-      }
-    },
-    setItem(key, value) {
-      try {
-        if (typeof localStorage !== 'undefined') localStorage.setItem(key, value);
-      } catch {
-        // localStorage unavailable -- silently ignore
-      }
-    },
-  };
+  // `safeStorage` (localStorage wrapper) is imported from the shared
+  // `./safe-storage.js` module — see the file header NOTE.
 
   /**
    * Clamp a requested width to the allowed range, with the upper bound
diff --git a/web/src/lib/safe-storage.js b/web/src/lib/safe-storage.js
new file mode 100644
index 0000000..27b5d46
--- /dev/null
+++ b/web/src/lib/safe-storage.js
@@ -0,0 +1,41 @@
+// lib/safe-storage.js — shared localStorage wrapper.
+//
+// A plain ES module (no runes) so it can be imported by both rune modules
+// (`mqtt-store.svelte.js`, `resizable-panel.svelte.js`) and plain ones, and
+// unit-tested in isolation.
+//
+// `getItem` / `setItem` tolerate environments where `localStorage` is
+// unavailable or throws — private browsing, quota exceeded, SSR / Node test
+// runs without a DOM — by silently no-oping (return `null` on read, swallow
+// on write). This consolidates the byte-identical copies that previously
+// lived inside `mqtt-store.svelte.js` and `resizable-panel.svelte.js`
+// (#55 follow-up: the third-copy unification flagged in resizable-panel).
+
+/**
+ * Safe localStorage wrapper that falls back gracefully when storage is
+ * unavailable (private browsing, quota exceeded, etc.).
+ */
+export const safeStorage = {
+  /**
+   * @param {string} key
+   * @returns {string|null} The stored value, or null if missing/unavailable.
+   */
+  getItem(key) {
+    try {
+      return typeof localStorage !== 'undefined' ? localStorage.getItem(key) : null;
+    } catch {
+      return null;
+    }
+  },
+  /**
+   * @param {string} key
+   * @param {string} value
+   */
+  setItem(key, value) {
+    try {
+      if (typeof localStorage !== 'undefined') localStorage.setItem(key, value);
+    } catch {
+      // localStorage unavailable (private browsing, quota exceeded) -- silently ignore
+    }
+  },
+};
diff --git a/web/tests/artifact-compare-dropdown-outside-click.spec.js b/web/tests/artifact-compare-dropdown-outside-click.spec.js
new file mode 100644
index 0000000..1e90d4d
--- /dev/null
+++ b/web/tests/artifact-compare-dropdown-outside-click.spec.js
@@ -0,0 +1,102 @@
+// ArtifactDetailHeader — Compare dropdown outside-click close (#55 follow-up).
+//
+// The primary version dropdown's open state lives in ArtifactPanel, which
+// already closes it on an outside mousedown. The "Compare:" (diff "from")
+// dropdown's open state is local to ArtifactDetailHeader, so it needs its
+// own <svelte:window onmousedown> guard — mirroring the panel's pattern.
+// Before this fix the Compare dropdown could only be closed by re-clicking
+// the trigger or making a selection; a click anywhere else left it open.
+//
+// These tests pin:
+//   1. A mousedown OUTSIDE the compare selector subtree closes the dropdown.
+//   2. A mousedown INSIDE the compare selector subtree keeps it open.
+
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, cleanup, fireEvent } from '@testing-library/svelte';
+
+import ArtifactDetailHeader from '../src/components/ArtifactDetailHeader.svelte';
+
+const DETAIL_ARTIFACT = {
+  name: 'migration-plan',
+  type: 'plan',
+  title: 'Migration plan',
+  channel: 'general',
+  version: 2,
+  content: '# Migration plan\n',
+  versions: [
+    {
+      version: 2,
+      author: { key: 'phil-key', name: 'phil', type: 'human' },
+      timestamp: Date.now() / 1000 - 120,
+      summary: 'add restore step',
+    },
+    {
+      version: 1,
+      author: { key: 'claude-key', name: 'claude', type: 'agent' },
+      timestamp: Date.now() / 1000 - 360,
+      summary: 'initial draft',
+    },
+  ],
+};
+
+function renderHeader() {
+  return render(ArtifactDetailHeader, {
+    props: {
+      artifact: DETAIL_ARTIFACT,
+      selectedVersion: 2,
+      showVersionDropdown: false,
+      // Diff mode + multiple versions → the Compare selector renders.
+      viewMode: 'diff',
+      compareVersion: 1,
+      capabilities: { writable: true },
+      onBack: () => {},
+      onVersionSelect: () => {},
+      onToggleVersionDropdown: () => {},
+      onSetViewMode: () => {},
+      onSetCompareVersion: () => {},
+      onCopy: () => {},
+      onDownload: () => {},
+      onEdit: () => {},
+      onClose: () => {},
+    },
+  });
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('ArtifactDetailHeader — Compare dropdown outside-click', () => {
+  it('closes the Compare dropdown on a mousedown outside the selector', async () => {
+    const { container } = renderHeader();
+
+    const selector = container.querySelector('[data-testid="compare-version-selector"]');
+    expect(selector).not.toBeNull();
+
+    // Open the Compare dropdown via its trigger button.
+    const trigger = selector.querySelector('.artifact-version-btn');
+    await fireEvent.click(trigger);
+    expect(selector.querySelector('.artifact-version-dropdown')).not.toBeNull();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+
+    // Mousedown OUTSIDE the selector subtree (on the document body) closes it.
+    await fireEvent.mouseDown(document.body);
+    expect(selector.querySelector('.artifact-version-dropdown')).toBeNull();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('keeps the Compare dropdown open on a mousedown inside the selector', async () => {
+    const { container } = renderHeader();
+
+    const selector = container.querySelector('[data-testid="compare-version-selector"]');
+    const trigger = selector.querySelector('.artifact-version-btn');
+    await fireEvent.click(trigger);
+    const dropdown = selector.querySelector('.artifact-version-dropdown');
+    expect(dropdown).not.toBeNull();
+
+    // Mousedown INSIDE the selector subtree (the open listbox) must NOT close it.
+    await fireEvent.mouseDown(dropdown);
+    expect(selector.querySelector('.artifact-version-dropdown')).not.toBeNull();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+  });
+});
diff --git a/web/tests/channel-modal-wires.spec.js b/web/tests/channel-modal-wires.spec.js
index 25b8760..7b05963 100644
--- a/web/tests/channel-modal-wires.spec.js
+++ b/web/tests/channel-modal-wires.spec.js
@@ -226,9 +226,10 @@ describe('App.svelte — ChannelModal create + cancel wires (v0.4.3 hotfix)', ()
     await flushChatViewScrollRAF();
 
     expect(store.createChannel).toHaveBeenCalledTimes(1);
-    // The wire calls createChannel(sanitizedName, description). Empty
-    // description default carries through as ''.
-    expect(store.createChannel).toHaveBeenCalledWith('phoenix', '');
+    // The wire calls createChannel(sanitizedName, description, isPrivate).
+    // Empty description default carries through as ''; the Private toggle
+    // defaults off so isPrivate is false.
+    expect(store.createChannel).toHaveBeenCalledWith('phoenix', '', false);
     // After create, the modal is unmounted (showChannelModal flipped false).
     expect(document.querySelector('[data-testid="channel-modal-content"]')).toBeNull();
   });
diff --git a/web/tests/message-bubble-mention-emphasis.spec.js b/web/tests/message-bubble-mention-emphasis.spec.js
new file mode 100644
index 0000000..95dc183
--- /dev/null
+++ b/web/tests/message-bubble-mention-emphasis.spec.js
@@ -0,0 +1,162 @@
+// Component tests for MessageBubble.svelte — @mentions INSIDE inline
+// emphasis (bold / italic / strike).
+//
+// Primary bug (Phil, user-reported): an `@mention` in PLAIN text renders
+// as a gold mention pill, but an `@mention` wrapped in `**bold**` or
+// `*italic*` rendered with the emphasis styling but WITHOUT the mention
+// color/pill — the emphasis pass swallowed the mention. Mentions must
+// ALWAYS get their mention styling regardless of surrounding inline
+// markdown.
+//
+// Root cause: parseBody emitted bold/italic/strike tokens whose inner
+// `value` was raw text never run through the mention/link splitter. The
+// fix runs the same splitter over the emphasis inner value and renders
+// the resulting segments INSIDE the emphasis wrapper (so they inherit
+// bold/italic styling AND get their own chip/link styling).
+//
+// Guards:
+//   1. bold   `**@alice**`  → `.mention` chip nested in `<strong>`.
+//   2. italic `*@bob*`      → `.mention` chip nested in `<em>`.
+//   3. plain  `@carol`      → `.mention` chip (regression guard).
+//   4. code   `` `@dave` `` → NO `.mention` chip; literal code chip
+//      (code spans are literal; mentions inside must NOT be linkified).
+//
+// Name grammar is `[\w-]` server-side (mention.py NAME_PATTERN), matched
+// case-insensitively against live participants — these fixtures use
+// simple lowercase names.
+
+import { describe, test, expect, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/svelte';
+
+import MessageBubble from '../src/components/MessageBubble.svelte';
+
+const ALICE_KEY = 'a11ce000';
+const BOB_KEY = 'b0b00000';
+const CAROL_KEY = 'ca701000';
+const DAVE_KEY = 'da7e0000';
+
+const PARTICIPANTS = {
+  [ALICE_KEY]: { key: ALICE_KEY, name: 'alice', type: 'claude', connections: {} },
+  [BOB_KEY]: { key: BOB_KEY, name: 'bob', type: 'claude', connections: {} },
+  [CAROL_KEY]: { key: CAROL_KEY, name: 'carol', type: 'claude', connections: {} },
+  [DAVE_KEY]: { key: DAVE_KEY, name: 'dave', type: 'claude', connections: {} },
+};
+
+function makeMessage(overrides = {}) {
+  return {
+    id: 'msg-emph-1',
+    ts: '2026-06-25T12:00:00.000Z',
+    sender: { key: 'fffffff0', name: 'sender', type: 'human' },
+    body: 'hello',
+    reply_to: null,
+    mentions: null,
+    recipients: null,
+    conv: 'general',
+    reactions: [],
+    thread_count: 0,
+    read_by: 0,
+    ...overrides,
+  };
+}
+
+function renderBubble(body) {
+  const result = render(MessageBubble, {
+    props: {
+      message: makeMessage({ body }),
+      currentUser: { key: 'fffffff0', name: 'sender', type: 'human' },
+      participants: PARTICIPANTS,
+      consecutive: false,
+      onOpenThread: () => {},
+      onContextMenu: () => {},
+      onShowProfile: () => {},
+      onReact: () => {},
+      onMore: () => {},
+    },
+  });
+  return result;
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('MessageBubble — @mention inside inline emphasis', () => {
+  test('bold @alice renders a mention chip nested inside <strong>', () => {
+    const { container } = renderBubble('**@alice**');
+
+    const mention = container.querySelector('.mention');
+    expect(mention).not.toBeNull();
+    expect(mention.textContent).toBe('@alice');
+
+    // The mention chip lives INSIDE the bold wrapper, so it gets both the
+    // mention color and the bold styling.
+    const strong = container.querySelector('strong.md-bold');
+    expect(strong).not.toBeNull();
+    expect(strong.querySelector('.mention')).toBe(mention);
+  });
+
+  test('italic @bob renders a mention chip nested inside <em>', () => {
+    const { container } = renderBubble('*@bob*');
+
+    const mention = container.querySelector('.mention');
+    expect(mention).not.toBeNull();
+    expect(mention.textContent).toBe('@bob');
+
+    const em = container.querySelector('em.md-italic');
+    expect(em).not.toBeNull();
+    expect(em.querySelector('.mention')).toBe(mention);
+  });
+
+  test('strike @carol renders a mention chip nested inside the strike span', () => {
+    const { container } = renderBubble('~~@carol~~');
+
+    const mention = container.querySelector('.mention');
+    expect(mention).not.toBeNull();
+    expect(mention.textContent).toBe('@carol');
+
+    const strike = container.querySelector('.md-strike');
+    expect(strike).not.toBeNull();
+    expect(strike.querySelector('.mention')).toBe(mention);
+  });
+
+  test('plain @carol still renders a mention chip (regression guard)', () => {
+    const { container } = renderBubble('@carol');
+
+    const mention = container.querySelector('.mention');
+    expect(mention).not.toBeNull();
+    expect(mention.textContent).toBe('@carol');
+
+    // Not wrapped in any emphasis element.
+    expect(container.querySelector('strong.md-bold')).toBeNull();
+    expect(container.querySelector('em.md-italic')).toBeNull();
+  });
+
+  test('@dave inside inline `code` is NOT linkified as a mention', () => {
+    // Code spans are literal — even though `dave` is a real participant,
+    // the @name inside backticks must stay literal text in a code chip.
+    const { container } = renderBubble('`@dave`');
+
+    expect(container.querySelector('.mention')).toBeNull();
+    expect(container.querySelector('.mention-chip-self')).toBeNull();
+    expect(container.querySelector('.mention-chip-other')).toBeNull();
+
+    const codeChip = container.querySelector('.code-chip');
+    expect(codeChip).not.toBeNull();
+    expect(codeChip.textContent).toBe('@dave');
+  });
+
+  test('mixed: "**@alice** and @bob" renders both as mention chips', () => {
+    const { container } = renderBubble('**@alice** and @bob');
+
+    const mentions = container.querySelectorAll('.mention');
+    expect(mentions.length).toBe(2);
+    const texts = [...mentions].map((m) => m.textContent);
+    expect(texts).toContain('@alice');
+    expect(texts).toContain('@bob');
+
+    // @alice is the one inside bold.
+    const strong = container.querySelector('strong.md-bold');
+    expect(strong).not.toBeNull();
+    expect(strong.querySelector('.mention').textContent).toBe('@alice');
+  });
+});
diff --git a/web/tests/mqtt-store-admin-actions.spec.js b/web/tests/mqtt-store-admin-actions.spec.js
index 16973b7..009ff3b 100644
--- a/web/tests/mqtt-store-admin-actions.spec.js
+++ b/web/tests/mqtt-store-admin-actions.spec.js
@@ -412,3 +412,62 @@ describe('MqttChatStore Step 3.6 admin-action queue behavior', () => {
     expect(store.channelsById['ch-b'].mode).toBe('public');
   });
 });
+
+// ── createChannel — Private toggle end-to-end wiring (#55 follow-up) ──────
+//
+// ChannelModal's "Private Channel" toggle emits onCreate(name, desc,
+// isPrivate); App.svelte forwards it to store.createChannel(id, topic,
+// isPrivate). The create API (comms_conversation_create) takes no
+// visibility argument, so createChannel sets the local visibility
+// immediately AND persists it through the admin path (setVisibility →
+// comms_conversation_update), mirroring ChannelAdminPanel. These specs
+// pin that the toggle is no longer silently inert.
+describe('MqttChatStore createChannel — Private toggle wiring', () => {
+  it('isPrivate=true creates a private local row and persists via comms_conversation_update', () => {
+    const store = makeStore();
+    store.connected = true;
+
+    store.createChannel('secret-room', 'hush', true);
+
+    // Local row reflects private immediately (instant feedback).
+    expect(store.channelsById['secret-room']).toBeDefined();
+    expect(store.channelsById['secret-room'].visibility).toBe('private');
+
+    // Backend visibility path fired (mirrors ChannelAdminPanel.setVisibility).
+    expect(mcpCallMock).toHaveBeenCalledWith('comms_conversation_update', {
+      key: '0123abcd',
+      conversation: 'secret-room',
+      visibility: 'private',
+    });
+  });
+
+  it('isPrivate=false (default) creates a public row and never flips visibility', () => {
+    const store = makeStore();
+    store.connected = true;
+
+    store.createChannel('open-room', 'hi');
+
+    expect(store.channelsById['open-room'].visibility).toBe('public');
+    // No visibility admin-action fired for a public create.
+    const visibilityCalls = mcpCallMock.mock.calls.filter(
+      ([tool, args]) =>
+        tool === 'comms_conversation_update' &&
+        args &&
+        typeof args.visibility === 'string',
+    );
+    expect(visibilityCalls).toHaveLength(0);
+  });
+
+  it('private create while disconnected queues the visibility admin-action', () => {
+    const store = makeStore();
+    expect(store.connected).toBe(false);
+
+    store.createChannel('queued-private', '', true);
+
+    // Local row is private right away.
+    expect(store.channelsById['queued-private'].visibility).toBe('private');
+    // No MCP call yet — the visibility persist is queued for reconnect.
+    expect(mcpCallMock).not.toHaveBeenCalled();
+    expect(store._pendingAdminActionsLengthForTest()).toBe(1);
+  });
+});