From f2008fbd363b3ee42ff267969a4b68f7d30e688b Mon Sep 17 00:00:00 2001
From: Phil LaFayette <plafaydev@gmail.com>
Date: Fri, 26 Jun 2026 05:00:40 -0500
Subject: [PATCH] Fix verified web audit batch: 409 banner, diff clamp,
 dropdown/submenu outside-click, ChannelModal isPrivate, sidebar lock, emoji
 filter; DRY resize helper

WEB-D:
- api.js apiPost now attaches the parsed JSON error body (err.body) on
  non-2xx so ArtifactPanel's 409 banner shows the real latest_author /
  latest_version instead of "Someone" / v0 (+ test for the 409 path).
- ArtifactPanel: derive the diff "compare" version as the nearest EXISTING
  older version (never data.version-1 -> v0), null when none; the Content/Diff
  toggle refuses diff when no older version exists.
- ArtifactPanel: add panel-level outside-click close for the primary version
  dropdown (the header comment claimed this but no listener existed). The
  compare dropdown's open-state lives in ArtifactDetailHeader (out of file
  set) and needs a one-line follow-up there.

WEB-E:
- ChannelModal emits the Private toggle as a 3rd onCreate arg (backward
  compatible; App.svelte -> store.createChannel wiring is a follow-up).
- ChannelContextMenu outside-click guard now treats the portaled Mute
  submenu as "inside" so a real mousedown->click reaches the action
  (+ test simulating mousedown then click).
- SidebarChannelRow lock glyph keyed off visibility==='private' ||
  mode==='invite' (was mode==='private', which never matched), consistent
  with ChannelAdminPanel; exposes data-glyph for testing.
- EmojiPicker category tabs + search now actually filter the grid
  (per-category datasets + cross-category search + empty state) (+ tests).

DRY:
- Extract the ~130-line drag-resize logic duplicated between ArtifactPanel
  and ThreadPanel into lib/resizable-panel.svelte.js (createResizablePanel);
  both panels consume it. mqtt-store's separate safeStorage copy is left as
  a noted follow-up (different owner).
---
 web/src/components/ArtifactPanel.svelte       | 260 ++++++------------
 web/src/components/ChannelContextMenu.svelte  |  10 +-
 web/src/components/ChannelModal.svelte        |   8 +-
 web/src/components/EmojiPicker.svelte         | 185 ++++++++++++-
 web/src/components/SidebarChannelRow.svelte   |  12 +-
 web/src/components/ThreadPanel.svelte         | 194 ++-----------
 web/src/lib/api.js                            |   8 +-
 web/src/lib/resizable-panel.svelte.js         | 232 ++++++++++++++++
 web/tests/api-post-409-body.spec.js           |  66 +++++
 ...nel-context-menu-submenu-mousedown.spec.js |  93 +++++++
 web/tests/channel-modal-bugfix.spec.js        |  31 ++-
 web/tests/emoji-picker-filter.spec.js         |  97 +++++++
 web/tests/sidebar-channel-row.spec.js         |  41 +++
 13 files changed, 875 insertions(+), 362 deletions(-)
 create mode 100644 web/src/lib/resizable-panel.svelte.js
 create mode 100644 web/tests/api-post-409-body.spec.js
 create mode 100644 web/tests/channel-context-menu-submenu-mousedown.spec.js
 create mode 100644 web/tests/emoji-picker-filter.spec.js

diff --git a/web/src/components/ArtifactPanel.svelte b/web/src/components/ArtifactPanel.svelte
index cbdc134..3c5053d 100644
--- a/web/src/components/ArtifactPanel.svelte
+++ b/web/src/components/ArtifactPanel.svelte
@@ -9,6 +9,7 @@
   import { X, Clock } from 'lucide-svelte';
   import { untrack } from 'svelte';
   import { API_BASE, apiGet, apiPost } from '../lib/api.js';
+  import { createResizablePanel } from '../lib/resizable-panel.svelte.js';
   import ArtifactList from './ArtifactList.svelte';
   import ArtifactDetailHeader from './ArtifactDetailHeader.svelte';
   import ArtifactDetailBody from './ArtifactDetailBody.svelte';
@@ -19,10 +20,11 @@
 
   // ── Resizable panel width (drag-to-resize on the left edge) ───────────────
   //
-  // Width is persisted per-user in localStorage. Constraints keep the panel
-  // usable on small screens while avoiding the chat getting crushed. The
-  // handle uses the Pointer Events API (covers mouse + touch + pen) and is
-  // keyboard-accessible as an ARIA separator.
+  // Width is persisted per-user in localStorage. The pointer/keyboard/
+  // persistence logic is shared with ThreadPanel via `createResizablePanel`
+  // (lib/resizable-panel.svelte.js) so a resize fix lands once for both
+  // panels. The handle uses the Pointer Events API (mouse + touch + pen) and
+  // is keyboard-accessible as an ARIA separator.
 
   /** Minimum drag-resize width in px. */
   const MIN_PANEL_WIDTH = 320;
@@ -30,166 +32,14 @@
   const MAX_PANEL_WIDTH = 900;
   /** Default width when no persisted value exists. */
   const DEFAULT_PANEL_WIDTH = 380;
-  /** Reserved width for the main chat area — panel can't crowd past this. */
-  const MIN_CHAT_RESERVE = 200;
-  /** Keyboard nudge step when the handle has focus (ArrowLeft/Right). */
-  const KEY_STEP = 16;
   /** localStorage key for persistence. */
   const STORAGE_KEY = 'claude-comms:artifact-panel-width';
 
-  /**
-   * Safe localStorage wrapper mirroring the one in mqtt-store.svelte.js.
-   * 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
-      }
-    },
-  };
-
-  /**
-   * Clamp a requested width to the allowed range, with the upper bound
-   * further constrained by the viewport so the panel never covers the
-   * whole screen on a laptop.
-   */
-  function clampWidth(w) {
-    const viewport = typeof window !== 'undefined' ? window.innerWidth : 1600;
-    const upper = Math.min(MAX_PANEL_WIDTH, Math.max(MIN_PANEL_WIDTH, viewport - MIN_CHAT_RESERVE));
-    if (!Number.isFinite(w)) return DEFAULT_PANEL_WIDTH;
-    return Math.max(MIN_PANEL_WIDTH, Math.min(upper, w));
-  }
-
-  /** Read the persisted width (if any), clamped to the current viewport. */
-  function initialPanelWidth() {
-    const raw = safeStorage.getItem(STORAGE_KEY);
-    const parsed = raw != null ? Number.parseInt(raw, 10) : NaN;
-    return clampWidth(Number.isFinite(parsed) ? parsed : DEFAULT_PANEL_WIDTH);
-  }
-
-  let panelWidth = $state(initialPanelWidth());
-  let isResizing = $state(false);
-
-  /** @type {HTMLDivElement | null} */
-  let resizeHandleEl = $state(null);
-  /**
-   * Offset between the cursor's clientX and the panel's left edge at the
-   * moment drag started. Without this, the first pointermove would snap the
-   * left edge onto the cursor, causing a visible jump equal to the handle
-   * width (or further if the user clicked near the edge of the handle).
-   */
-  let dragOffsetX = 0;
-
-  /**
-   * pointerdown on the handle: capture the pointer so move/up fire on the
-   * handle even if the cursor leaves the element. Flip into resizing mode
-   * to suppress transitions and apply the body-level cursor override.
-   * Record the cursor-to-left-edge offset so subsequent pointermove events
-   * can preserve the grip position under the cursor (no jump).
-   */
-  function handleResizePointerDown(e) {
-    // Ignore non-primary buttons to avoid right-click dragging.
-    if (e.button !== 0 && e.pointerType === 'mouse') return;
-    if (!resizeHandleEl) return;
-    e.preventDefault();
-    const viewport = typeof window !== 'undefined' ? window.innerWidth : 1600;
-    const panelLeftEdge = viewport - panelWidth;
-    dragOffsetX = e.clientX - panelLeftEdge;
-    isResizing = true;
-    try {
-      resizeHandleEl.setPointerCapture(e.pointerId);
-    } catch {
-      // setPointerCapture can throw on detached elements; non-fatal.
-    }
-  }
-
-  /**
-   * pointermove while dragging: maintain the original cursor-to-left-edge
-   * offset captured on pointerdown so the handle tracks smoothly under the
-   * cursor instead of snapping to it. Clamped to [MIN, MAX].
-   */
-  function handleResizePointerMove(e) {
-    if (!isResizing) return;
-    const viewport = typeof window !== 'undefined' ? window.innerWidth : 1600;
-    const desiredLeftEdge = e.clientX - dragOffsetX;
-    const next = clampWidth(viewport - desiredLeftEdge);
-    panelWidth = next;
-  }
-
-  /**
-   * pointerup / pointercancel: release capture, exit resizing mode, and
-   * persist the final width.
-   */
-  function handleResizePointerUp(e) {
-    if (!isResizing) return;
-    isResizing = false;
-    if (resizeHandleEl) {
-      try {
-        resizeHandleEl.releasePointerCapture(e.pointerId);
-      } catch {
-        // Non-fatal if already released.
-      }
-    }
-    safeStorage.setItem(STORAGE_KEY, String(Math.round(panelWidth)));
-  }
-
-  /**
-   * Keyboard nudges for the ARIA separator. ArrowLeft grows the panel
-   * (increases width), ArrowRight shrinks it, matching the visual metaphor
-   * of dragging the handle horizontally. Home/End jump to the extremes.
-   * Each committed change is persisted.
-   */
-  function handleResizeKeydown(e) {
-    let next = panelWidth;
-    switch (e.key) {
-      case 'ArrowLeft':
-        next = clampWidth(panelWidth + KEY_STEP);
-        break;
-      case 'ArrowRight':
-        next = clampWidth(panelWidth - KEY_STEP);
-        break;
-      case 'Home':
-        next = clampWidth(MAX_PANEL_WIDTH);
-        break;
-      case 'End':
-        next = clampWidth(MIN_PANEL_WIDTH);
-        break;
-      default:
-        return;
-    }
-    e.preventDefault();
-    if (next !== panelWidth) {
-      panelWidth = next;
-      safeStorage.setItem(STORAGE_KEY, String(Math.round(panelWidth)));
-    }
-  }
-
-  /**
-   * Re-clamp the stored width whenever the viewport shrinks enough that
-   * our current value would cover the chat area. Also cancels any in-flight
-   * drag on window resize so we don't end up with stale capture state.
-   */
-  $effect(() => {
-    if (typeof window === 'undefined') return;
-    const onResize = () => {
-      const clamped = clampWidth(panelWidth);
-      if (clamped !== panelWidth) {
-        panelWidth = clamped;
-        safeStorage.setItem(STORAGE_KEY, String(Math.round(panelWidth)));
-      }
-    };
-    window.addEventListener('resize', onResize);
-    return () => window.removeEventListener('resize', onResize);
+  const resizer = createResizablePanel({
+    minWidth: MIN_PANEL_WIDTH,
+    maxWidth: MAX_PANEL_WIDTH,
+    defaultWidth: DEFAULT_PANEL_WIDTH,
+    storageKey: STORAGE_KEY,
   });
 
   // Shared fetch state (list view)
@@ -296,6 +146,28 @@
     }
   }
 
+  /**
+   * Given the artifact's version list and the currently-selected ("to")
+   * version, return the greatest EXISTING version strictly less than it, or
+   * `null` when no older version exists (oldest selected, single version, or
+   * a malformed list). This is the valid "from" version for a diff and the
+   * clamp that prevents a v0 (or otherwise non-existent) diff request.
+   *
+   * @param {Array<{version:number}>} versions
+   * @param {number|null|undefined} selected
+   * @returns {number|null}
+   */
+  function nearestOlderVersion(versions, selected) {
+    if (selected == null || !Array.isArray(versions)) return null;
+    let best = null;
+    for (const entry of versions) {
+      const v = entry?.version;
+      if (typeof v !== 'number' || v >= selected) continue;
+      if (best === null || v > best) best = v;
+    }
+    return best;
+  }
+
   async function fetchArtifactDetail(name, version) {
     const channel = store.activeChannel;
     if (!channel || !name) return;
@@ -314,14 +186,15 @@
       if (!data.channel) data.channel = channel;
       selectedArtifact = data;
       selectedVersion = data.version;
-      // Initialise the compare slot to v(N-1) when multiple versions exist;
-      // otherwise leave null so the Diff toggle is disabled.
-      const versions = data.versions ?? [];
-      if (versions.length > 1 && data.version != null) {
-        compareVersion = data.version - 1;
-      } else {
-        compareVersion = null;
-      }
+      // Initialise the compare slot to the nearest EXISTING older version.
+      // Never blindly use `data.version - 1`: that requests a non-existent
+      // v0 when the selected version is the oldest (e.g. v1 → v0 → 404), and
+      // also breaks when version numbers aren't contiguous. We pick the
+      // greatest available version strictly less than the selected one; when
+      // none exists (oldest version selected, or only one version) we leave
+      // compareVersion null so the diff body short-circuits to empty instead
+      // of fetching a missing version.
+      compareVersion = nearestOlderVersion(data.versions ?? [], data.version);
     } catch (e) {
       detailError = e.message;
     } finally {
@@ -366,6 +239,29 @@
     showVersionDropdown = !showVersionDropdown;
   }
 
+  /**
+   * Close the primary version dropdown on an outside click. The dropdown's
+   * open state (`showVersionDropdown`) is owned here at the panel level (the
+   * header is a stateless child for this control), so the outside-click
+   * listener belongs here too — matching the pattern other menus use
+   * (ChannelContextMenu's window mousedown guard). The primary trigger +
+   * listbox both live inside `[data-testid="primary-version-selector"]`, so a
+   * mousedown anywhere outside that subtree closes the dropdown.
+   *
+   * NOTE: the "Compare:" dropdown's open state lives inside
+   * ArtifactDetailHeader (`showCompareDropdown`, local $state there) and so
+   * cannot be closed from this file — closing it on outside-click needs a
+   * one-line addition in ArtifactDetailHeader.svelte (out of this change's
+   * file set; flagged as a follow-up).
+   */
+  function handleVersionDropdownOutsideClick(e) {
+    if (!showVersionDropdown) return;
+    const node = e.target;
+    const el = node instanceof Element ? node : (node?.parentElement ?? null);
+    if (el && el.closest('[data-testid="primary-version-selector"]')) return;
+    showVersionDropdown = false;
+  }
+
   /**
    * Handle the `[Content | Diff]` segmented toggle. Accepts 'content' or
    * 'diff'; guards against meaningless diff requests (only one version).
@@ -373,7 +269,11 @@
   function handleSetViewMode(mode) {
     if (mode !== 'content' && mode !== 'diff') return;
     const versions = selectedArtifact?.versions ?? [];
-    if (mode === 'diff' && versions.length < 2) return;
+    // Diff is meaningful only when there are 2+ versions AND a valid older
+    // version exists to compare against (compareVersion non-null). The latter
+    // guards the oldest-version case so we never enter a diff that would
+    // request a non-existent version.
+    if (mode === 'diff' && (versions.length < 2 || compareVersion == null)) return;
     viewMode = mode;
   }
 
@@ -695,13 +595,15 @@
   }
 </script>
 
+<svelte:window onmousedown={handleVersionDropdownOutsideClick} />
+
 <div
   class="artifact-panel"
-  class:is-resizing={isResizing}
+  class:is-resizing={resizer.isResizing}
   data-testid="artifact-panel"
   role="complementary"
   aria-label="Artifacts"
-  style="width: {panelWidth}px"
+  style="width: {resizer.width}px"
 >
   <!--
     Drag-to-resize handle on the left edge. Uses the Pointer Events API so
@@ -717,21 +619,21 @@
   -->
   <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions (ARIA window-splitter pattern) -->
   <div
-    bind:this={resizeHandleEl}
+    {@attach resizer.attachHandle}
     class="resize-handle"
     data-testid="artifact-panel-resize-handle"
     role="separator"
     tabindex="0"
     aria-orientation="vertical"
     aria-label="Resize artifact panel"
-    aria-valuenow={Math.round(panelWidth)}
+    aria-valuenow={Math.round(resizer.width)}
     aria-valuemin={MIN_PANEL_WIDTH}
     aria-valuemax={MAX_PANEL_WIDTH}
-    onpointerdown={handleResizePointerDown}
-    onpointermove={handleResizePointerMove}
-    onpointerup={handleResizePointerUp}
-    onpointercancel={handleResizePointerUp}
-    onkeydown={handleResizeKeydown}
+    onpointerdown={resizer.onPointerDown}
+    onpointermove={resizer.onPointerMove}
+    onpointerup={resizer.onPointerUp}
+    onpointercancel={resizer.onPointerUp}
+    onkeydown={resizer.onKeydown}
   ></div>
   {#if selectedArtifact && !detailLoading}
     <!-- Detail View -->
diff --git a/web/src/components/ChannelContextMenu.svelte b/web/src/components/ChannelContextMenu.svelte
index 8a35c82..3cafffb 100644
--- a/web/src/components/ChannelContextMenu.svelte
+++ b/web/src/components/ChannelContextMenu.svelte
@@ -282,7 +282,15 @@
   function handleWindowMouseDown(event) {
     if (!menuEl) return;
     const target = event.target;
-    if (target instanceof Node && menuEl.contains(target)) return;
+    if (target instanceof Node) {
+      if (menuEl.contains(target)) return;
+      // The Mute submenu is portaled to <body> (see {@attach portal()} on
+      // the submenu root), so it is NOT inside `menuEl`. Without this check a
+      // real mouse click on a submenu item fires mousedown first → we'd close
+      // the menu before the click/action fired (mouse Mute was unreachable).
+      const submenuEl = document.querySelector('[data-testid="channel-ctx-submenu"]');
+      if (submenuEl && submenuEl.contains(target)) return;
+    }
     onClose?.();
   }
 
diff --git a/web/src/components/ChannelModal.svelte b/web/src/components/ChannelModal.svelte
index 6bce7fc..bd917b1 100644
--- a/web/src/components/ChannelModal.svelte
+++ b/web/src/components/ChannelModal.svelte
@@ -2,7 +2,7 @@
   @component ChannelModal
   @description Modal dialog for creating a new conversation channel. Validates and sanitizes the channel name (lowercase, no spaces, max 63 chars), accepts an optional description, and provides a private channel toggle.
   @prop {Function} onClose - Callback invoked when the modal is dismissed.
-  @prop {Function} onCreate - Callback invoked with (sanitizedName, description) when the user confirms creation.
+  @prop {Function} onCreate - Callback invoked with (sanitizedName, description, isPrivate) when the user confirms creation. The third argument is the Private Channel toggle value; legacy 2-arg callers keep working since the extra positional arg is ignored by arity-2 handlers.
 -->
 <script>
   import { Dialog } from "bits-ui";
@@ -45,7 +45,11 @@
   function handleCreate() {
     if (!nameIsValid || submitting) return;
     submitting = true;
-    onCreate(sanitizedName, description);
+    // Emit the Private Channel toggle as a third positional arg. Arity-2
+    // callers (the current App.svelte wire) ignore it harmlessly; the wiring
+    // to actually create a private channel (App.svelte → store.createChannel)
+    // is a follow-up outside this component's file set.
+    onCreate(sanitizedName, description, isPrivate);
   }
 
   function handlePrimaryPointerDown(e) {
diff --git a/web/src/components/EmojiPicker.svelte b/web/src/components/EmojiPicker.svelte
index 6122cea..7cb984f 100644
--- a/web/src/components/EmojiPicker.svelte
+++ b/web/src/components/EmojiPicker.svelte
@@ -44,6 +44,175 @@
     { emoji: '👌', name: 'OK Hand', code: ':ok_hand:' },
   ];
 
+  // Per-category datasets so the category tabs actually switch the grid.
+  // Codes are unique within each list (the `{#each}` key); the cross-category
+  // search dedups by code below.
+  const emojisByCategory = {
+    frequent: frequentEmojis,
+    smileys: [
+      { emoji: '😀', name: 'Grinning', code: ':grinning:' },
+      { emoji: '😃', name: 'Smiley', code: ':smiley:' },
+      { emoji: '😄', name: 'Smile', code: ':smile:' },
+      { emoji: '😁', name: 'Grin', code: ':grin:' },
+      { emoji: '😆', name: 'Laughing', code: ':laughing:' },
+      { emoji: '😅', name: 'Sweat Smile', code: ':sweat_smile:' },
+      { emoji: '🤣', name: 'Rolling On The Floor Laughing', code: ':rofl:' },
+      { emoji: '🙂', name: 'Slightly Smiling', code: ':slightly_smiling:' },
+      { emoji: '😉', name: 'Wink', code: ':wink:' },
+      { emoji: '😍', name: 'Heart Eyes', code: ':heart_eyes:' },
+      { emoji: '😘', name: 'Kissing Heart', code: ':kissing_heart:' },
+      { emoji: '😎', name: 'Sunglasses', code: ':sunglasses:' },
+      { emoji: '🤔', name: 'Thinking Face', code: ':thinking_face:' },
+      { emoji: '🤩', name: 'Star Struck', code: ':star_struck:' },
+      { emoji: '🥳', name: 'Partying Face', code: ':partying_face:' },
+      { emoji: '😴', name: 'Sleeping', code: ':sleeping:' },
+    ],
+    people: [
+      { emoji: '👋', name: 'Wave', code: ':wave:' },
+      { emoji: '🙌', name: 'Raised Hands', code: ':raised_hands2:' },
+      { emoji: '👏', name: 'Clap', code: ':clap:' },
+      { emoji: '🙏', name: 'Pray', code: ':pray2:' },
+      { emoji: '💪', name: 'Muscle', code: ':muscle:' },
+      { emoji: '🤝', name: 'Handshake', code: ':handshake:' },
+      { emoji: '👈', name: 'Point Left', code: ':point_left:' },
+      { emoji: '👉', name: 'Point Right', code: ':point_right:' },
+      { emoji: '👆', name: 'Point Up', code: ':point_up:' },
+      { emoji: '👇', name: 'Point Down', code: ':point_down:' },
+      { emoji: '✌️', name: 'Victory', code: ':v:' },
+      { emoji: '🤞', name: 'Crossed Fingers', code: ':crossed_fingers:' },
+      { emoji: '🤙', name: 'Call Me', code: ':call_me:' },
+      { emoji: '👌', name: 'OK Hand', code: ':ok_hand2:' },
+      { emoji: '🫶', name: 'Heart Hands', code: ':heart_hands:' },
+      { emoji: '🧑', name: 'Person', code: ':person:' },
+    ],
+    nature: [
+      { emoji: '🌱', name: 'Seedling', code: ':seedling:' },
+      { emoji: '🌳', name: 'Tree', code: ':tree:' },
+      { emoji: '🌲', name: 'Evergreen', code: ':evergreen:' },
+      { emoji: '🌸', name: 'Cherry Blossom', code: ':cherry_blossom:' },
+      { emoji: '🌻', name: 'Sunflower', code: ':sunflower:' },
+      { emoji: '🌹', name: 'Rose', code: ':rose:' },
+      { emoji: '🍀', name: 'Four Leaf Clover', code: ':four_leaf_clover:' },
+      { emoji: '🌿', name: 'Herb', code: ':herb:' },
+      { emoji: '🌍', name: 'Earth', code: ':earth:' },
+      { emoji: '🌙', name: 'Crescent Moon', code: ':crescent_moon:' },
+      { emoji: '⭐', name: 'Star', code: ':star2:' },
+      { emoji: '🌈', name: 'Rainbow', code: ':rainbow:' },
+      { emoji: '🔥', name: 'Fire', code: ':fire2:' },
+      { emoji: '💧', name: 'Droplet', code: ':droplet:' },
+      { emoji: '❄️', name: 'Snowflake', code: ':snowflake:' },
+      { emoji: '⚡', name: 'Zap', code: ':zap2:' },
+    ],
+    food: [
+      { emoji: '🍕', name: 'Pizza', code: ':pizza:' },
+      { emoji: '🍔', name: 'Hamburger', code: ':hamburger:' },
+      { emoji: '🍟', name: 'Fries', code: ':fries:' },
+      { emoji: '🌮', name: 'Taco', code: ':taco:' },
+      { emoji: '🍣', name: 'Sushi', code: ':sushi:' },
+      { emoji: '🍜', name: 'Ramen', code: ':ramen:' },
+      { emoji: '🍎', name: 'Apple', code: ':apple:' },
+      { emoji: '🍌', name: 'Banana', code: ':banana:' },
+      { emoji: '🍓', name: 'Strawberry', code: ':strawberry:' },
+      { emoji: '🍩', name: 'Doughnut', code: ':doughnut:' },
+      { emoji: '🍪', name: 'Cookie', code: ':cookie:' },
+      { emoji: '🍰', name: 'Cake', code: ':cake:' },
+      { emoji: '☕', name: 'Coffee', code: ':coffee:' },
+      { emoji: '🍺', name: 'Beer', code: ':beer:' },
+      { emoji: '🍷', name: 'Wine', code: ':wine:' },
+      { emoji: '🥑', name: 'Avocado', code: ':avocado:' },
+    ],
+    activities: [
+      { emoji: '⚽', name: 'Soccer', code: ':soccer:' },
+      { emoji: '🏀', name: 'Basketball', code: ':basketball:' },
+      { emoji: '🏈', name: 'Football', code: ':football:' },
+      { emoji: '⚾', name: 'Baseball', code: ':baseball:' },
+      { emoji: '🎾', name: 'Tennis', code: ':tennis:' },
+      { emoji: '🏐', name: 'Volleyball', code: ':volleyball:' },
+      { emoji: '🎱', name: '8 Ball', code: ':8ball:' },
+      { emoji: '🏓', name: 'Ping Pong', code: ':ping_pong:' },
+      { emoji: '🥇', name: 'First Place', code: ':first_place:' },
+      { emoji: '🏆', name: 'Trophy', code: ':trophy:' },
+      { emoji: '🎮', name: 'Video Game', code: ':video_game:' },
+      { emoji: '🎲', name: 'Game Die', code: ':game_die:' },
+      { emoji: '🎯', name: 'Dart', code: ':dart:' },
+      { emoji: '🎸', name: 'Guitar', code: ':guitar:' },
+      { emoji: '🎨', name: 'Art', code: ':art:' },
+      { emoji: '🚴', name: 'Cyclist', code: ':cyclist:' },
+    ],
+    objects: [
+      { emoji: '💡', name: 'Bulb', code: ':bulb:' },
+      { emoji: '💻', name: 'Computer', code: ':computer:' },
+      { emoji: '📱', name: 'Phone', code: ':phone:' },
+      { emoji: '⌨️', name: 'Keyboard', code: ':keyboard:' },
+      { emoji: '🖱️', name: 'Mouse', code: ':computer_mouse:' },
+      { emoji: '📷', name: 'Camera', code: ':camera:' },
+      { emoji: '🔋', name: 'Battery', code: ':battery:' },
+      { emoji: '🔌', name: 'Plug', code: ':plug:' },
+      { emoji: '💾', name: 'Floppy Disk', code: ':floppy:' },
+      { emoji: '📦', name: 'Package', code: ':package:' },
+      { emoji: '🔧', name: 'Wrench', code: ':wrench:' },
+      { emoji: '🔨', name: 'Hammer', code: ':hammer:' },
+      { emoji: '📌', name: 'Pushpin', code: ':pushpin:' },
+      { emoji: '📎', name: 'Paperclip', code: ':paperclip:' },
+      { emoji: '🔑', name: 'Key', code: ':key:' },
+      { emoji: '🔒', name: 'Lock', code: ':lock:' },
+    ],
+    symbols: [
+      { emoji: '❤️', name: 'Red Heart', code: ':heart2:' },
+      { emoji: '🧡', name: 'Orange Heart', code: ':orange_heart:' },
+      { emoji: '💛', name: 'Yellow Heart', code: ':yellow_heart:' },
+      { emoji: '💚', name: 'Green Heart', code: ':green_heart:' },
+      { emoji: '💙', name: 'Blue Heart', code: ':blue_heart:' },
+      { emoji: '💜', name: 'Purple Heart', code: ':purple_heart:' },
+      { emoji: '🖤', name: 'Black Heart', code: ':black_heart:' },
+      { emoji: '✅', name: 'Check', code: ':check2:' },
+      { emoji: '❌', name: 'Cross Mark', code: ':x:' },
+      { emoji: '⭕', name: 'Circle', code: ':o:' },
+      { emoji: '❗', name: 'Exclamation', code: ':exclamation:' },
+      { emoji: '❓', name: 'Question', code: ':question:' },
+      { emoji: '💯', name: 'Hundred', code: ':hundred2:' },
+      { emoji: '♻️', name: 'Recycle', code: ':recycle:' },
+      { emoji: '✨', name: 'Sparkles', code: ':sparkles:' },
+      { emoji: '⚠️', name: 'Warning', code: ':warning:' },
+    ],
+  };
+
+  // Flattened, code-deduped list for cross-category search.
+  const allEmojis = (() => {
+    const seen = new Set();
+    const out = [];
+    for (const list of Object.values(emojisByCategory)) {
+      for (const e of list) {
+        if (seen.has(e.code)) continue;
+        seen.add(e.code);
+        out.push(e);
+      }
+    }
+    return out;
+  })();
+
+  // The grid is driven by these derivations so BOTH the category tabs and the
+  // search box change what renders:
+  //   - non-empty query  → matches across ALL categories (name / code / glyph)
+  //   - empty query      → the active category's dataset
+  let filteredEmojis = $derived.by(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return emojisByCategory[activeCategory] ?? frequentEmojis;
+    const raw = searchQuery.trim();
+    return allEmojis.filter(
+      (e) =>
+        e.name.toLowerCase().includes(q) ||
+        e.code.toLowerCase().includes(q) ||
+        e.emoji.includes(raw),
+    );
+  });
+
+  let gridLabel = $derived(
+    searchQuery.trim()
+      ? 'Search results'
+      : (categories.find((c) => c.id === activeCategory)?.label ?? 'Frequently used'),
+  );
+
   function selectEmoji(emojiData) {
     onSelect(emojiData);
   }
@@ -108,9 +277,9 @@
         >{cat.icon}</button>
       {/each}
     </div>
-    <div class="emoji-grid-label">Frequently Used</div>
+    <div class="emoji-grid-label" data-testid="emoji-grid-label">{gridLabel}</div>
     <div class="emoji-grid">
-      {#each frequentEmojis as emojiData (emojiData.code)}
+      {#each filteredEmojis as emojiData (emojiData.code)}
         <button
           class="emoji-item"
           onclick={() => selectEmoji(emojiData)}
@@ -118,6 +287,10 @@
           data-testid="emoji-item"
           aria-label={emojiData.name}
         >{emojiData.emoji}</button>
+      {:else}
+        <div class="emoji-empty" data-testid="emoji-empty">
+          No matches — press Enter to react with "{searchQuery.trim()}"
+        </div>
       {/each}
     </div>
     <div class="emoji-picker-footer">
@@ -236,6 +409,14 @@
     transform: scale(1.2);
   }
 
+  .emoji-empty {
+    grid-column: 1 / -1;
+    padding: 18px 8px;
+    text-align: center;
+    font-size: 11.5px;
+    color: var(--text-faint);
+  }
+
   .emoji-picker-footer {
     padding: 8px 14px;
     border-top: 1px solid var(--border);
diff --git a/web/src/components/SidebarChannelRow.svelte b/web/src/components/SidebarChannelRow.svelte
index 262d1ad..23f781a 100644
--- a/web/src/components/SidebarChannelRow.svelte
+++ b/web/src/components/SidebarChannelRow.svelte
@@ -102,8 +102,14 @@
   // test fixture that omits a field doesn't crash the render (matches the
   // permissive shape the existing Sidebar.svelte / sidebar-fixes.spec.js
   // pattern uses).
-  let mode = $derived(channel?.mode || 'public');
-  let isPrivate = $derived(mode === 'private');
+  let mode = $derived(channel?.mode || 'open');
+  let visibility = $derived(channel?.visibility || 'public');
+  // Lock affordance: drive it off the SAME fields ChannelAdminPanel uses, not
+  // the old `mode === 'private'` check (the `mode` field holds `'open'`/
+  // `'invite'`, never `'private'`, so that check never matched after an admin
+  // changed the channel). A channel reads as "locked" when it is invite-only
+  // (`mode === 'invite'`) or non-discoverable (`visibility === 'private'`).
+  let isPrivate = $derived(mode === 'invite' || visibility === 'private');
   let memberCount = $derived(typeof channel?.memberCount === 'number' ? channel.memberCount : 0);
   let unread = $derived(typeof channel?.unread === 'number' ? channel.unread : 0);
   let unreadHasMention = $derived(channel?.unreadHasMention === true);
@@ -203,7 +209,7 @@
   data-section={sectionVariant}
   data-transition-flavor={transitionFlavor}
 >
-  <span class="row-glyph" aria-hidden="true">
+  <span class="row-glyph" aria-hidden="true" data-glyph={isPrivate ? 'lock' : 'hash'} data-testid="row-glyph-{channel?.id ?? ''}">
     {#if isPrivate}
       <Lock size={16} strokeWidth={2} />
     {:else}
diff --git a/web/src/components/ThreadPanel.svelte b/web/src/components/ThreadPanel.svelte
index dc9f34b..75e4083 100644
--- a/web/src/components/ThreadPanel.svelte
+++ b/web/src/components/ThreadPanel.svelte
@@ -50,6 +50,7 @@
   import MessageInput from './MessageInput.svelte';
   import { MessageSquare, Send, X } from 'lucide-svelte';
   import { formatTime, getParticipantColor } from '../lib/utils.js';
+  import { createResizablePanel } from '../lib/resizable-panel.svelte.js';
 
   let {
     parentMessage,
@@ -69,11 +70,15 @@
   // ── Resizable panel width (drag-to-resize on the left edge) ───────────────
   //
   // v0.4.3 new feature (Phil mid-Layer-B request): mirror ArtifactPanel's
-  // drag-resize pattern verbatim. Width is persisted per-user in
-  // localStorage. Constraints keep the panel usable on small screens while
-  // avoiding the chat getting crushed. The handle uses the Pointer Events
-  // API (covers mouse + touch + pen) and is keyboard-accessible as an ARIA
+  // drag-resize pattern. The pointer/keyboard/persistence logic is shared
+  // with ArtifactPanel via `createResizablePanel` (lib/resizable-panel.svelte.js)
+  // so a resize fix lands once for both panels. The handle uses the Pointer
+  // Events API (mouse + touch + pen) and is keyboard-accessible as an ARIA
   // separator (W3C WAI-ARIA APG "Window Splitter" pattern).
+  //
+  // These constants stay declared here (rather than inlined into the factory
+  // call) because they are the user-facing contract for THIS panel and are
+  // pinned at the source level by thread-panel.spec.js.
 
   /** Minimum drag-resize width in px. */
   const MIN_PANEL_WIDTH = 280;
@@ -81,167 +86,14 @@
   const MAX_PANEL_WIDTH = 720;
   /** Default width when no persisted value exists (matches pre-v0.4.3 fixed 360). */
   const DEFAULT_PANEL_WIDTH = 360;
-  /** Reserved width for the main chat area — panel can't crowd past this. */
-  const MIN_CHAT_RESERVE = 200;
-  /** Keyboard nudge step when the handle has focus (ArrowLeft/Right). */
-  const KEY_STEP = 16;
   /** localStorage key for persistence (mirrors ArtifactPanel naming). */
   const STORAGE_KEY = 'claude-comms:thread-panel-width';
 
-  /**
-   * Safe localStorage wrapper mirroring the one in mqtt-store.svelte.js and
-   * ArtifactPanel.svelte. 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
-      }
-    },
-  };
-
-  /**
-   * Clamp a requested width to the allowed range, with the upper bound
-   * further constrained by the viewport so the panel never covers the
-   * whole screen on a laptop.
-   */
-  function clampWidth(w) {
-    const viewport = typeof window !== 'undefined' ? window.innerWidth : 1600;
-    const upper = Math.min(MAX_PANEL_WIDTH, Math.max(MIN_PANEL_WIDTH, viewport - MIN_CHAT_RESERVE));
-    if (!Number.isFinite(w)) return DEFAULT_PANEL_WIDTH;
-    return Math.max(MIN_PANEL_WIDTH, Math.min(upper, w));
-  }
-
-  /** Read the persisted width (if any), clamped to the current viewport. */
-  function initialPanelWidth() {
-    const raw = safeStorage.getItem(STORAGE_KEY);
-    const parsed = raw != null ? Number.parseInt(raw, 10) : NaN;
-    return clampWidth(Number.isFinite(parsed) ? parsed : DEFAULT_PANEL_WIDTH);
-  }
-
-  let panelWidth = $state(initialPanelWidth());
-  let isResizing = $state(false);
-
-  /** @type {HTMLDivElement | null} */
-  let resizeHandleEl = $state(null);
-  /**
-   * Offset between the cursor's clientX and the panel's left edge at the
-   * moment drag started. Without this, the first pointermove would snap the
-   * left edge onto the cursor, causing a visible jump equal to the handle
-   * width (or further if the user clicked near the edge of the handle).
-   */
-  let dragOffsetX = 0;
-
-  /**
-   * pointerdown on the handle: capture the pointer so move/up fire on the
-   * handle even if the cursor leaves the element. Flip into resizing mode
-   * to suppress transitions and apply the body-level cursor override.
-   * Record the cursor-to-left-edge offset so subsequent pointermove events
-   * can preserve the grip position under the cursor (no jump).
-   */
-  function handleResizePointerDown(e) {
-    // Ignore non-primary buttons to avoid right-click dragging.
-    if (e.button !== 0 && e.pointerType === 'mouse') return;
-    if (!resizeHandleEl) return;
-    e.preventDefault();
-    const viewport = typeof window !== 'undefined' ? window.innerWidth : 1600;
-    const panelLeftEdge = viewport - panelWidth;
-    dragOffsetX = e.clientX - panelLeftEdge;
-    isResizing = true;
-    try {
-      resizeHandleEl.setPointerCapture(e.pointerId);
-    } catch {
-      // setPointerCapture can throw on detached elements; non-fatal.
-    }
-  }
-
-  /**
-   * pointermove while dragging: maintain the original cursor-to-left-edge
-   * offset captured on pointerdown so the handle tracks smoothly under the
-   * cursor instead of snapping to it. Clamped to [MIN, MAX].
-   */
-  function handleResizePointerMove(e) {
-    if (!isResizing) return;
-    const viewport = typeof window !== 'undefined' ? window.innerWidth : 1600;
-    const desiredLeftEdge = e.clientX - dragOffsetX;
-    const next = clampWidth(viewport - desiredLeftEdge);
-    panelWidth = next;
-  }
-
-  /**
-   * pointerup / pointercancel: release capture, exit resizing mode, and
-   * persist the final width.
-   */
-  function handleResizePointerUp(e) {
-    if (!isResizing) return;
-    isResizing = false;
-    if (resizeHandleEl) {
-      try {
-        resizeHandleEl.releasePointerCapture(e.pointerId);
-      } catch {
-        // Non-fatal if already released.
-      }
-    }
-    safeStorage.setItem(STORAGE_KEY, String(Math.round(panelWidth)));
-  }
-
-  /**
-   * Keyboard nudges for the ARIA separator. ArrowLeft grows the panel
-   * (increases width), ArrowRight shrinks it, matching the visual metaphor
-   * of dragging the handle horizontally. Home/End jump to the extremes.
-   * Each committed change is persisted.
-   */
-  function handleResizeKeydown(e) {
-    let next = panelWidth;
-    switch (e.key) {
-      case 'ArrowLeft':
-        next = clampWidth(panelWidth + KEY_STEP);
-        break;
-      case 'ArrowRight':
-        next = clampWidth(panelWidth - KEY_STEP);
-        break;
-      case 'Home':
-        next = clampWidth(MAX_PANEL_WIDTH);
-        break;
-      case 'End':
-        next = clampWidth(MIN_PANEL_WIDTH);
-        break;
-      default:
-        return;
-    }
-    e.preventDefault();
-    if (next !== panelWidth) {
-      panelWidth = next;
-      safeStorage.setItem(STORAGE_KEY, String(Math.round(panelWidth)));
-    }
-  }
-
-  /**
-   * Re-clamp the stored width whenever the viewport shrinks enough that
-   * our current value would cover the chat area. Also cancels any in-flight
-   * drag on window resize so we don't end up with stale capture state.
-   */
-  $effect(() => {
-    if (typeof window === 'undefined') return;
-    const onResize = () => {
-      const clamped = clampWidth(panelWidth);
-      if (clamped !== panelWidth) {
-        panelWidth = clamped;
-        safeStorage.setItem(STORAGE_KEY, String(Math.round(panelWidth)));
-      }
-    };
-    window.addEventListener('resize', onResize);
-    return () => window.removeEventListener('resize', onResize);
+  const resizer = createResizablePanel({
+    minWidth: MIN_PANEL_WIDTH,
+    maxWidth: MAX_PANEL_WIDTH,
+    defaultWidth: DEFAULT_PANEL_WIDTH,
+    storageKey: STORAGE_KEY,
   });
 
   // Whether to render the shared MessageInput composer (3.12) or the
@@ -315,11 +167,11 @@
 
 <div
   class="thread-panel"
-  class:is-resizing={isResizing}
+  class:is-resizing={resizer.isResizing}
   data-testid="thread-panel"
   role="complementary"
   aria-label="Thread replies"
-  style="width: {panelWidth}px"
+  style="width: {resizer.width}px"
 >
   <!--
     Drag-to-resize handle on the left edge. Uses the Pointer Events API so
@@ -336,21 +188,21 @@
   <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
   <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
   <div
-    bind:this={resizeHandleEl}
+    {@attach resizer.attachHandle}
     class="resize-handle"
     data-testid="thread-panel-resize-handle"
     role="separator"
     tabindex="0"
     aria-orientation="vertical"
     aria-label="Resize thread panel"
-    aria-valuenow={Math.round(panelWidth)}
+    aria-valuenow={Math.round(resizer.width)}
     aria-valuemin={MIN_PANEL_WIDTH}
     aria-valuemax={MAX_PANEL_WIDTH}
-    onpointerdown={handleResizePointerDown}
-    onpointermove={handleResizePointerMove}
-    onpointerup={handleResizePointerUp}
-    onpointercancel={handleResizePointerUp}
-    onkeydown={handleResizeKeydown}
+    onpointerdown={resizer.onPointerDown}
+    onpointermove={resizer.onPointerMove}
+    onpointerup={resizer.onPointerUp}
+    onpointercancel={resizer.onPointerUp}
+    onkeydown={resizer.onKeydown}
   ></div>
   <div class="thread-header">
     <div class="thread-title">
diff --git a/web/src/lib/api.js b/web/src/lib/api.js
index 9970e2a..52748aa 100644
--- a/web/src/lib/api.js
+++ b/web/src/lib/api.js
@@ -229,7 +229,13 @@ export async function apiPost(path, body) {
             { status: 401, fatal: true }
           );
         }
-        throw Object.assign(new Error(`HTTP ${res.status}`), { status: res.status });
+        // Attach the parsed JSON error body so callers can surface
+        // server-supplied conflict details (e.g. the 409 save-conflict
+        // banner reads `err.body.latest_author` / `latest_version`).
+        // `.catch(() => null)` keeps a non-JSON / empty error body from
+        // masking the real status with a parse error.
+        const body = await res.json().catch(() => null);
+        throw Object.assign(new Error(`HTTP ${res.status}`), { status: res.status, body });
       }
       return res.json();
     }
diff --git a/web/src/lib/resizable-panel.svelte.js b/web/src/lib/resizable-panel.svelte.js
new file mode 100644
index 0000000..8469d76
--- /dev/null
+++ b/web/src/lib/resizable-panel.svelte.js
@@ -0,0 +1,232 @@
+/**
+ * lib/resizable-panel.svelte.js — shared drag-to-resize controller for the
+ * slide-out side panels (ArtifactPanel + ThreadPanel).
+ *
+ * This is a `.svelte.js` rune module: it declares `$state` / `$effect`, so
+ * `createResizablePanel(...)` MUST be called synchronously during a
+ * component's initialization (top of `<script>`), the same contract as any
+ * other rune-based "create…" factory.
+ *
+ * Before this module, ArtifactPanel and ThreadPanel each carried a verbatim
+ * copy (~130 lines) of `safeStorage`, `clampWidth`, `initialPanelWidth`, the
+ * pointer/keyboard handlers, and the viewport re-clamp `$effect` — differing
+ * 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.
+ *
+ * Behaviour is byte-for-byte equivalent to the previous in-component logic:
+ *   - Width persisted per-panel in localStorage, clamped to [min, max] with a
+ *     viewport-aware upper bound that reserves `minChatReserve` px for chat.
+ *   - Pointer Events API (mouse + touch + pen) with cursor-to-edge offset so
+ *     the grip tracks under the cursor without a jump.
+ *   - ARIA window-splitter keyboard nudges (ArrowLeft grows, ArrowRight
+ *     shrinks, Home = max, End = min), each committed change persisted.
+ *
+ * @param {object} opts
+ * @param {number} opts.minWidth        - Minimum width in px.
+ * @param {number} opts.maxWidth        - Maximum width in px (further clamped by viewport).
+ * @param {number} opts.defaultWidth    - Width used when no persisted value exists.
+ * @param {string} opts.storageKey      - localStorage key for persistence.
+ * @param {number} [opts.minChatReserve=200] - px reserved for the main chat area.
+ * @param {number} [opts.keyStep=16]    - Keyboard nudge step in px.
+ * @returns {{
+ *   readonly width: number,
+ *   readonly isResizing: boolean,
+ *   minWidth: number,
+ *   maxWidth: number,
+ *   clampWidth: (w: number) => number,
+ *   attachHandle: (node: HTMLElement) => (() => void),
+ *   onPointerDown: (e: PointerEvent) => void,
+ *   onPointerMove: (e: PointerEvent) => void,
+ *   onPointerUp: (e: PointerEvent) => void,
+ *   onKeydown: (e: KeyboardEvent) => void,
+ * }}
+ */
+export function createResizablePanel({
+  minWidth,
+  maxWidth,
+  defaultWidth,
+  storageKey,
+  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
+      }
+    },
+  };
+
+  /**
+   * Clamp a requested width to the allowed range, with the upper bound
+   * further constrained by the viewport so the panel never covers the whole
+   * screen on a laptop.
+   */
+  function clampWidth(w) {
+    const viewport = typeof window !== 'undefined' ? window.innerWidth : 1600;
+    const upper = Math.min(maxWidth, Math.max(minWidth, viewport - minChatReserve));
+    if (!Number.isFinite(w)) return defaultWidth;
+    return Math.max(minWidth, Math.min(upper, w));
+  }
+
+  /** Read the persisted width (if any), clamped to the current viewport. */
+  function initialPanelWidth() {
+    const raw = safeStorage.getItem(storageKey);
+    const parsed = raw != null ? Number.parseInt(raw, 10) : NaN;
+    return clampWidth(Number.isFinite(parsed) ? parsed : defaultWidth);
+  }
+
+  let width = $state(initialPanelWidth());
+  let isResizing = $state(false);
+
+  /** @type {HTMLElement | null} */
+  let handleEl = null;
+  /**
+   * Offset between the cursor's clientX and the panel's left edge at the
+   * moment drag started. Without this, the first pointermove would snap the
+   * left edge onto the cursor, causing a visible jump equal to the handle
+   * width (or further if the user clicked near the edge of the handle).
+   */
+  let dragOffsetX = 0;
+
+  /** Attachment that captures the handle element for pointer-capture calls. */
+  function attachHandle(node) {
+    handleEl = node;
+    return () => {
+      if (handleEl === node) handleEl = null;
+    };
+  }
+
+  /**
+   * pointerdown on the handle: capture the pointer so move/up fire on the
+   * handle even if the cursor leaves the element. Flip into resizing mode to
+   * suppress transitions. Record the cursor-to-left-edge offset so subsequent
+   * pointermove events can preserve the grip position under the cursor.
+   */
+  function onPointerDown(e) {
+    // Ignore non-primary buttons to avoid right-click dragging.
+    if (e.button !== 0 && e.pointerType === 'mouse') return;
+    if (!handleEl) return;
+    e.preventDefault();
+    const viewport = typeof window !== 'undefined' ? window.innerWidth : 1600;
+    const panelLeftEdge = viewport - width;
+    dragOffsetX = e.clientX - panelLeftEdge;
+    isResizing = true;
+    try {
+      handleEl.setPointerCapture(e.pointerId);
+    } catch {
+      // setPointerCapture can throw on detached elements; non-fatal.
+    }
+  }
+
+  /**
+   * pointermove while dragging: maintain the original cursor-to-left-edge
+   * offset captured on pointerdown so the handle tracks smoothly under the
+   * cursor instead of snapping to it. Clamped to [min, max].
+   */
+  function onPointerMove(e) {
+    if (!isResizing) return;
+    const viewport = typeof window !== 'undefined' ? window.innerWidth : 1600;
+    const desiredLeftEdge = e.clientX - dragOffsetX;
+    width = clampWidth(viewport - desiredLeftEdge);
+  }
+
+  /**
+   * pointerup / pointercancel: release capture, exit resizing mode, and
+   * persist the final width.
+   */
+  function onPointerUp(e) {
+    if (!isResizing) return;
+    isResizing = false;
+    if (handleEl) {
+      try {
+        handleEl.releasePointerCapture(e.pointerId);
+      } catch {
+        // Non-fatal if already released.
+      }
+    }
+    safeStorage.setItem(storageKey, String(Math.round(width)));
+  }
+
+  /**
+   * Keyboard nudges for the ARIA separator. ArrowLeft grows the panel,
+   * ArrowRight shrinks it, matching the visual metaphor of dragging the
+   * handle horizontally. Home/End jump to the extremes. Each committed change
+   * is persisted.
+   */
+  function onKeydown(e) {
+    let next = width;
+    switch (e.key) {
+      case 'ArrowLeft':
+        next = clampWidth(width + keyStep);
+        break;
+      case 'ArrowRight':
+        next = clampWidth(width - keyStep);
+        break;
+      case 'Home':
+        next = clampWidth(maxWidth);
+        break;
+      case 'End':
+        next = clampWidth(minWidth);
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    if (next !== width) {
+      width = next;
+      safeStorage.setItem(storageKey, String(Math.round(width)));
+    }
+  }
+
+  /**
+   * Re-clamp the stored width whenever the viewport shrinks enough that our
+   * current value would cover the chat area.
+   */
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+    const onResize = () => {
+      const clamped = clampWidth(width);
+      if (clamped !== width) {
+        width = clamped;
+        safeStorage.setItem(storageKey, String(Math.round(width)));
+      }
+    };
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  });
+
+  return {
+    get width() {
+      return width;
+    },
+    get isResizing() {
+      return isResizing;
+    },
+    minWidth,
+    maxWidth,
+    clampWidth,
+    attachHandle,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onKeydown,
+  };
+}
diff --git a/web/tests/api-post-409-body.spec.js b/web/tests/api-post-409-body.spec.js
new file mode 100644
index 0000000..a4f382d
--- /dev/null
+++ b/web/tests/api-post-409-body.spec.js
@@ -0,0 +1,66 @@
+// apiPost — error-body attachment (WEB-D finding #1).
+//
+// Regression: apiPost previously threw `Object.assign(new Error(...),
+// { status })` and discarded the parsed JSON response body. The
+// ArtifactPanel 409 save-conflict banner reads `err.body.latest_author`
+// / `err.body.latest_version` to show WHO conflicted and at WHICH
+// version; with no `.body` it always fell back to "Someone" / "v0".
+//
+// These tests pin that apiPost attaches the parsed error body (and that
+// a non-JSON error body degrades to `body: null` rather than masking the
+// real status with a parse throw).
+
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { apiPost } from '../src/lib/api.js';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+/**
+ * Build a fetch stub: any /api/web-token request mints a token (apiPost
+ * awaits ensureToken first); every other request returns `postResponse`.
+ */
+function stubFetch(postResponse) {
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async (url) => {
+      if (String(url).includes('/api/web-token')) {
+        return { ok: true, status: 200, json: async () => ({ token: 'tok-1' }) };
+      }
+      return postResponse;
+    }),
+  );
+}
+
+describe('apiPost — 409 conflict body attachment', () => {
+  it('attaches the parsed JSON error body (latest_author / latest_version) on a 409', async () => {
+    stubFetch({
+      ok: false,
+      status: 409,
+      json: async () => ({ latest_author: 'Bob', latest_version: 7 }),
+    });
+
+    await expect(
+      apiPost('/api/artifacts/general/plan', { content: 'x', base_version: 6 }),
+    ).rejects.toMatchObject({
+      status: 409,
+      body: { latest_author: 'Bob', latest_version: 7 },
+    });
+  });
+
+  it('degrades to body: null when the error response is not JSON (status still attached)', async () => {
+    stubFetch({
+      ok: false,
+      status: 500,
+      json: async () => {
+        throw new SyntaxError('Unexpected token');
+      },
+    });
+
+    const err = await apiPost('/api/artifacts/general/plan', { content: 'x' }).catch((e) => e);
+    expect(err).toBeInstanceOf(Error);
+    expect(err.status).toBe(500);
+    expect(err.body).toBeNull();
+  });
+});
diff --git a/web/tests/channel-context-menu-submenu-mousedown.spec.js b/web/tests/channel-context-menu-submenu-mousedown.spec.js
new file mode 100644
index 0000000..709da3e
--- /dev/null
+++ b/web/tests/channel-context-menu-submenu-mousedown.spec.js
@@ -0,0 +1,93 @@
+// ChannelContextMenu — Mute submenu survives a REAL mouse interaction
+// (WEB-E finding #5).
+//
+// Regression: the outside-click guard was `<svelte:window onmousedown>`
+// closing the menu unless `menuEl.contains(target)`. The Mute submenu is
+// portaled to <body> (separate from menuEl), so a real mouse click on a
+// submenu item fired `mousedown` FIRST → the guard saw "outside" → onClose →
+// the menu unmounted before the `click`/action could fire. Mute was only
+// settable by keyboard. The previous test masked this by activating the item
+// with `fireEvent.click` alone (no preceding mousedown).
+//
+// This test reproduces the real browser sequence: mousedown THEN click.
+
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { render, cleanup, fireEvent } from '@testing-library/svelte';
+import { tick } from 'svelte';
+
+import ChannelContextMenu from '../src/components/ChannelContextMenu.svelte';
+
+function makeChannel(overrides = {}) {
+  return {
+    id: 'ch-1',
+    name: 'general',
+    member: true,
+    starred: false,
+    muted: false,
+    unread: 0,
+    createdBy: 'alice',
+    visibility: 'listed',
+    ...overrides,
+  };
+}
+
+function defaultProps(overrides = {}) {
+  return {
+    channel: makeChannel(),
+    anchorEvent: { clientX: 100, clientY: 100 },
+    isMember: true,
+    isCreator: false,
+    onAction: vi.fn(),
+    onClose: vi.fn(),
+    ...overrides,
+  };
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('ChannelContextMenu — portaled submenu + real mouse (mousedown→click)', () => {
+  it('mousedown on a Mute submenu item does NOT close the menu, and the click fires the action', async () => {
+    const onAction = vi.fn();
+    const onClose = vi.fn();
+    const { getByTestId } = render(ChannelContextMenu, defaultProps({ onAction, onClose }));
+
+    // Open the Mute submenu.
+    await fireEvent.click(getByTestId('channel-ctx-item-mute-submenu'));
+    await tick();
+    await tick();
+
+    const subItem = getByTestId('channel-ctx-item-mute:all');
+    expect(subItem).toBeTruthy();
+
+    // Real browsers send mousedown (bubbling to the window guard) BEFORE the
+    // click. With the bug, this mousedown closed the menu prematurely.
+    await fireEvent.mouseDown(subItem);
+    await tick();
+    expect(onClose).not.toHaveBeenCalled();
+
+    // The click then fires the mute action (and closes once, as designed).
+    await fireEvent.click(subItem);
+    expect(onAction).toHaveBeenCalledWith('mute:all');
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('mousedown truly outside the menu AND submenu still closes (guard not over-broad)', async () => {
+    const onClose = vi.fn();
+    const { getByTestId } = render(ChannelContextMenu, defaultProps({ onClose }));
+
+    // Open the submenu so both menu + submenu are mounted.
+    await fireEvent.click(getByTestId('channel-ctx-item-mute-submenu'));
+    await tick();
+    await tick();
+
+    // A mousedown on an element outside both the menu and the portaled
+    // submenu must still dismiss.
+    const outside = document.createElement('div');
+    document.body.appendChild(outside);
+    await fireEvent.mouseDown(outside);
+    expect(onClose).toHaveBeenCalledTimes(1);
+    outside.remove();
+  });
+});
diff --git a/web/tests/channel-modal-bugfix.spec.js b/web/tests/channel-modal-bugfix.spec.js
index cdd6f9a..7cec37b 100644
--- a/web/tests/channel-modal-bugfix.spec.js
+++ b/web/tests/channel-modal-bugfix.spec.js
@@ -107,7 +107,7 @@ describe('ChannelModal: BUG-PHASE2A-1 Create button activation (v0.4.3)', () =>
     await tick();
 
     expect(onCreate).toHaveBeenCalledTimes(1);
-    expect(onCreate).toHaveBeenCalledWith('phoenix', '');
+    expect(onCreate).toHaveBeenCalledWith('phoenix', '', false);
   });
 
   it('click (keyboard activation path) fires onCreate exactly once when pointerdown did not fire', async () => {
@@ -127,7 +127,7 @@ describe('ChannelModal: BUG-PHASE2A-1 Create button activation (v0.4.3)', () =>
     await tick();
 
     expect(onCreate).toHaveBeenCalledTimes(1);
-    expect(onCreate).toHaveBeenCalledWith('phoenix', '');
+    expect(onCreate).toHaveBeenCalledWith('phoenix', '', false);
   });
 
   it('pointerdown + click in the same gesture fires onCreate EXACTLY ONCE (submitting latch dedupes)', async () => {
@@ -148,7 +148,7 @@ describe('ChannelModal: BUG-PHASE2A-1 Create button activation (v0.4.3)', () =>
     // The submitting latch must dedupe these two paths. If it doesn't,
     // store.createChannel runs twice and the user gets two channels.
     expect(onCreate).toHaveBeenCalledTimes(1);
-    expect(onCreate).toHaveBeenCalledWith('phoenix', '');
+    expect(onCreate).toHaveBeenCalledWith('phoenix', '', false);
   });
 
   it('pointerdown with a non-primary button (right-click) does NOT fire onCreate', async () => {
@@ -168,6 +168,31 @@ describe('ChannelModal: BUG-PHASE2A-1 Create button activation (v0.4.3)', () =>
     expect(onCreate).not.toHaveBeenCalled();
   });
 
+  it('emits the Private Channel toggle as the third onCreate arg (WEB-E finding #4)', async () => {
+    const onCreate = vi.fn();
+    const props = makeProps({ onCreate });
+    render(ChannelModal, { props });
+    await tick();
+
+    await fillName('phoenix');
+
+    // Flip the Private Channel toggle ON before submitting.
+    const toggle = document.querySelector('[data-testid="channel-modal-private-toggle"]');
+    expect(toggle).not.toBeNull();
+    await fireEvent.click(toggle);
+    await tick();
+    expect(toggle.getAttribute('aria-checked')).toBe('true');
+
+    const btn = findCreateButton();
+    expect(btn.disabled).toBe(false);
+    await fireEvent.click(btn);
+    await tick();
+
+    // Previously the toggle was inert — isPrivate never reached onCreate.
+    expect(onCreate).toHaveBeenCalledTimes(1);
+    expect(onCreate).toHaveBeenCalledWith('phoenix', '', true);
+  });
+
   it('pointerdown is ignored when name is invalid (button disabled gate must hold)', async () => {
     const onCreate = vi.fn();
     const props = makeProps({ onCreate });
diff --git a/web/tests/emoji-picker-filter.spec.js b/web/tests/emoji-picker-filter.spec.js
new file mode 100644
index 0000000..f80bae4
--- /dev/null
+++ b/web/tests/emoji-picker-filter.spec.js
@@ -0,0 +1,97 @@
+// EmojiPicker — category tabs + search actually filter the grid
+// (WEB-E finding #7).
+//
+// Regression: the 8 category tabs set `activeCategory` and the search box
+// bound `searchQuery`, but the grid ALWAYS iterated `frequentEmojis` with a
+// hardcoded "Frequently Used" label. 7 of 8 tabs and the type-to-filter
+// affordance did nothing. These tests pin that BOTH controls now change what
+// renders.
+
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { render, cleanup, fireEvent } from '@testing-library/svelte';
+import { tick } from 'svelte';
+
+import EmojiPicker from '../src/components/EmojiPicker.svelte';
+
+afterEach(() => {
+  cleanup();
+});
+
+function renderPicker(overrides = {}) {
+  return render(EmojiPicker, {
+    props: {
+      onSelect: vi.fn(),
+      onClose: vi.fn(),
+      ...overrides,
+    },
+  });
+}
+
+function gridLabel() {
+  return document.querySelector('[data-testid="emoji-grid-label"]').textContent.trim();
+}
+
+function gridEmojis() {
+  return Array.from(document.querySelectorAll('[data-testid="emoji-item"]')).map((b) =>
+    b.textContent.trim(),
+  );
+}
+
+describe('EmojiPicker — filtering', () => {
+  it('defaults to the Frequently-used grid', () => {
+    renderPicker();
+    expect(gridLabel().toLowerCase()).toContain('frequently used');
+    const emojis = gridEmojis();
+    expect(emojis).toContain('👍');
+    expect(emojis.length).toBeGreaterThan(8);
+  });
+
+  it('typing a search query filters the grid across all categories', async () => {
+    renderPicker();
+    const search = document.querySelector('[data-testid="emoji-search"]');
+    await fireEvent.input(search, { target: { value: 'pizza' } });
+    await tick();
+
+    expect(gridLabel()).toBe('Search results');
+    const emojis = gridEmojis();
+    expect(emojis).toContain('🍕');
+    // The default frequent set is no longer shown wholesale.
+    expect(emojis).not.toContain('👍');
+    expect(emojis.length).toBe(1);
+  });
+
+  it('shows an empty state when nothing matches the query', async () => {
+    renderPicker();
+    const search = document.querySelector('[data-testid="emoji-search"]');
+    await fireEvent.input(search, { target: { value: 'zzzznotanemoji' } });
+    await tick();
+
+    expect(document.querySelector('[data-testid="emoji-empty"]')).not.toBeNull();
+    expect(gridEmojis().length).toBe(0);
+  });
+
+  it('clicking a category tab switches the grid dataset', async () => {
+    renderPicker();
+    const foodTab = document.querySelector('[data-testid="emoji-category-food"]');
+    expect(foodTab).not.toBeNull();
+    await fireEvent.click(foodTab);
+    await tick();
+
+    expect(gridLabel().toLowerCase()).toContain('food');
+    const emojis = gridEmojis();
+    expect(emojis).toContain('🍕');
+    // Frequent-only glyphs are gone now that the Food dataset renders.
+    expect(emojis).not.toContain('👍');
+  });
+
+  it('still submits free-text on Enter (existing behaviour preserved)', async () => {
+    const onSelect = vi.fn();
+    renderPicker({ onSelect });
+    const search = document.querySelector('[data-testid="emoji-search"]');
+    await fireEvent.input(search, { target: { value: 'shipit' } });
+    await tick();
+    await fireEvent.keyDown(search, { key: 'Enter' });
+
+    expect(onSelect).toHaveBeenCalledWith({ emoji: 'shipit', name: 'shipit', code: 'shipit' });
+  });
+});
diff --git a/web/tests/sidebar-channel-row.spec.js b/web/tests/sidebar-channel-row.spec.js
index 0e974da..d4cb0ea 100644
--- a/web/tests/sidebar-channel-row.spec.js
+++ b/web/tests/sidebar-channel-row.spec.js
@@ -168,6 +168,47 @@ describe('SidebarChannelRow — mode glyph', () => {
   });
 });
 
+// ── Lock affordance keyed off visibility / mode (WEB-E finding #6) ──────
+
+describe('SidebarChannelRow — lock affordance (visibility/mode, not mode===private)', () => {
+  // The bug: isPrivate was `mode === 'private'`, but the `mode` field holds
+  // 'open' | 'invite' (privacy lives in `visibility`). So admin-driven
+  // invite-only / private channels never showed the Lock. We key the glyph
+  // off the SAME fields ChannelAdminPanel uses.
+
+  it('shows the Hash glyph for a public, openly-joinable channel', () => {
+    const { getByTestId } = renderRow({
+      channel: makeChannel({ id: 'general', mode: 'open', visibility: 'public' }),
+    });
+    expect(getByTestId('row-glyph-general').getAttribute('data-glyph')).toBe('hash');
+  });
+
+  it('shows the Lock glyph when visibility === "private"', () => {
+    const { getByTestId } = renderRow({
+      channel: makeChannel({ id: 'secret', name: 'secret', visibility: 'private' }),
+    });
+    expect(getByTestId('row-glyph-secret').getAttribute('data-glyph')).toBe('lock');
+  });
+
+  it('shows the Lock glyph when mode === "invite" (invite-only)', () => {
+    const { getByTestId } = renderRow({
+      channel: makeChannel({ id: 'inviteonly', name: 'inviteonly', mode: 'invite' }),
+    });
+    expect(getByTestId('row-glyph-inviteonly').getAttribute('data-glyph')).toBe('lock');
+  });
+
+  it('does NOT treat the legacy mode==="private" sentinel as the only signal (regression)', () => {
+    // A channel whose mode is the old 'private' string but with public
+    // visibility + non-invite mode reads as NOT locked under the new rule —
+    // the point is that the lock no longer hangs off the wrong field. We
+    // assert the supported fields drive it: here neither fires → hash.
+    const { getByTestId } = renderRow({
+      channel: makeChannel({ id: 'legacy', name: 'legacy', mode: 'open', visibility: 'public' }),
+    });
+    expect(getByTestId('row-glyph-legacy').getAttribute('data-glyph')).toBe('hash');
+  });
+});
+
 // ── Unread badge variants + mention-dot color ──────────────────────────
 
 describe('SidebarChannelRow — unread badge variants', () => {