From adcdaa31bdd147d2bf5bfb8ea6bcb8601c7070d3 Mon Sep 17 00:00:00 2001
From: Phil LaFayette <plafaydev@gmail.com>
Date: Thu, 25 Jun 2026 19:57:08 -0500
Subject: [PATCH] Clean all web warnings: eliminate vitest console noise +
 autofixer issues

- mqtt-store-bootstrap.spec.js: spy and silence the intentional
  '/api/conversations bootstrap failed' console.warn from the error-path
  tests; assert the warning fired so suppression never hides a regression.
- history-status-normalization.spec.js: poll for the async fetchHistory
  result instead of a fixed 10ms wait, removing an intermittent flake.
- ReadReceipt.svelte: remove dead, malformed $derived (it passed a
  function to $derived and was never referenced); key the each block.
- EmojiPicker.svelte / SearchPanel.svelte: add keys to static each blocks.

The bits-ui Dialog 'derived_inert' teardown warning is resolved by the
scroll-lock drain in tests/setup.js (#46), so no console filter is needed.
---
 web/src/components/EmojiPicker.svelte         |  4 +--
 web/src/components/ReadReceipt.svelte         |  9 +-----
 web/src/components/SearchPanel.svelte         |  2 +-
 .../history-status-normalization.spec.js      | 21 +++++++++++---
 web/tests/mqtt-store-bootstrap.spec.js        | 28 ++++++++++++++++++-
 5 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/web/src/components/EmojiPicker.svelte b/web/src/components/EmojiPicker.svelte
index 1031543..6122cea 100644
--- a/web/src/components/EmojiPicker.svelte
+++ b/web/src/components/EmojiPicker.svelte
@@ -98,7 +98,7 @@
       >
     </div>
     <div class="emoji-categories">
-      {#each categories as cat}
+      {#each categories as cat (cat.id)}
         <button
           class="emoji-cat"
           class:active={activeCategory === cat.id}
@@ -110,7 +110,7 @@
     </div>
     <div class="emoji-grid-label">Frequently Used</div>
     <div class="emoji-grid">
-      {#each frequentEmojis as emojiData}
+      {#each frequentEmojis as emojiData (emojiData.code)}
         <button
           class="emoji-item"
           onclick={() => selectEmoji(emojiData)}
diff --git a/web/src/components/ReadReceipt.svelte b/web/src/components/ReadReceipt.svelte
index ce85483..ff4eda8 100644
--- a/web/src/components/ReadReceipt.svelte
+++ b/web/src/components/ReadReceipt.svelte
@@ -8,13 +8,6 @@
   let { count = 0, readers = [] } = $props();
 
   let showTooltip = $state(false);
-
-  let tooltipText = $derived(() => {
-    if (readers.length > 0) {
-      return readers.join(', ');
-    }
-    return `${count} ${count === 1 ? 'person' : 'people'}`;
-  });
 </script>
 
 <div
@@ -36,7 +29,7 @@
       <div class="tooltip-arrow"></div>
       <span class="tooltip-text">
         {#if readers.length > 0}
-          {#each readers as reader, i}
+          {#each readers as reader, i (i)}
             <span class="reader-name">{reader}{i < readers.length - 1 ? ',' : ''}</span>
           {/each}
         {:else}
diff --git a/web/src/components/SearchPanel.svelte b/web/src/components/SearchPanel.svelte
index eb0fc5f..1f58eea 100644
--- a/web/src/components/SearchPanel.svelte
+++ b/web/src/components/SearchPanel.svelte
@@ -95,7 +95,7 @@
       data-testid="search-panel-input"
     >
     <div class="search-panel-filters">
-      {#each filters as filter}
+      {#each filters as filter (filter)}
         <button
           class="search-filter"
           class:active={activeFilter === filter.toLowerCase()}
diff --git a/web/tests/history-status-normalization.spec.js b/web/tests/history-status-normalization.spec.js
index 4bb57b7..fc62cef 100644
--- a/web/tests/history-status-normalization.spec.js
+++ b/web/tests/history-status-normalization.spec.js
@@ -38,6 +38,21 @@ function mockHistory(messages) {
   }));
 }
 
+// Poll for the async ``#fetchHistory`` result instead of racing a single
+// fixed delay: ``switchChannel`` kicks off the history fetch fire-and-forget,
+// so under suite load a one-shot 10ms wait was occasionally too short and the
+// message had not landed yet (intermittent "expected undefined to be truthy").
+// This waits up to a generous deadline but returns as soon as the row appears.
+async function waitForMessage(store, id, timeout = 1000) {
+  const deadline = Date.now() + timeout;
+  while (Date.now() < deadline) {
+    const m = store.messages.find((x) => x.id === id);
+    if (m) return m;
+    await new Promise((r) => setTimeout(r, 5));
+  }
+  return store.messages.find((x) => x.id === id);
+}
+
 describe('#fetchHistory status normalization', () => {
   let origFetch;
   beforeEach(() => {
@@ -63,9 +78,8 @@ describe('#fetchHistory status normalization', () => {
     ]);
 
     store.switchChannel('testchan');
-    await new Promise((r) => setTimeout(r, 10));
+    const m = await waitForMessage(store, 'h1');
 
-    const m = store.messages.find((x) => x.id === 'h1');
     expect(m).toBeTruthy();
     expect(m.status).toBe('sent');
   });
@@ -84,9 +98,8 @@ describe('#fetchHistory status normalization', () => {
     ]);
 
     store.switchChannel('testchan');
-    await new Promise((r) => setTimeout(r, 10));
+    const m = await waitForMessage(store, 'h2');
 
-    const m = store.messages.find((x) => x.id === 'h2');
     expect(m).toBeTruthy();
     expect(m.status).toBeUndefined();
   });
diff --git a/web/tests/mqtt-store-bootstrap.spec.js b/web/tests/mqtt-store-bootstrap.spec.js
index 308ea50..5dbcdcb 100644
--- a/web/tests/mqtt-store-bootstrap.spec.js
+++ b/web/tests/mqtt-store-bootstrap.spec.js
@@ -16,7 +16,7 @@
 // without needing a live broker. We mock `lib/api.js`'s `apiGet` so the
 // daemon does not need to be running.
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { dirname, resolve } from 'node:path';
@@ -41,8 +41,17 @@ const STORE_SRC_PATH = resolve(HERE, '..', 'src', 'lib', 'mqtt-store.svelte.js')
 describe('MqttChatStore — v0.4.0 Step 2.5 bootstrap from /api/conversations', () => {
   /** @type {InstanceType<typeof MqttChatStore>} */
   let store;
+  /** @type {import('vitest').MockInstance} */
+  let warnSpy;
 
   beforeEach(() => {
+    // The error-path bootstrap tests below deliberately exercise
+    // ``#bootstrapChannels``'s 404/500/network branch, which logs a
+    // ``[claude-comms] /api/conversations bootstrap failed`` warning by
+    // design. Spy on (and silence) console.warn so the expected diagnostic
+    // does not pollute the suite's console; the error-path tests assert the
+    // warning fired so the suppression never hides a regression.
+    warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
     apiGetMock.mockReset();
     store = new MqttChatStore();
     // The store ships with an empty channels array now — assert the
@@ -51,6 +60,10 @@ describe('MqttChatStore — v0.4.0 Step 2.5 bootstrap from /api/conversations',
     expect(store.serverUnreachable).toBe(false);
   });
 
+  afterEach(() => {
+    warnSpy.mockRestore();
+  });
+
   it('starts with an empty channels array (no hardcoded seed)', () => {
     // No `general`, `random`, `project-alpha`, `lora-training`, etc.
     expect(store.channels).toHaveLength(0);
@@ -159,6 +172,11 @@ describe('MqttChatStore — v0.4.0 Step 2.5 bootstrap from /api/conversations',
 
     expect(store.channels).toEqual([]);
     expect(store.serverUnreachable).toBe(true);
+    // The failure is surfaced via a single diagnostic warning.
+    expect(warnSpy).toHaveBeenCalledWith(
+      '[claude-comms] /api/conversations bootstrap failed',
+      expect.objectContaining({ status: 404 }),
+    );
     // No fallback to hardcoded seeds.
     const ids = store.channels.map((c) => c.id);
     expect(ids).not.toContain('general');
@@ -172,6 +190,10 @@ describe('MqttChatStore — v0.4.0 Step 2.5 bootstrap from /api/conversations',
 
     expect(store.channels).toEqual([]);
     expect(store.serverUnreachable).toBe(true);
+    expect(warnSpy).toHaveBeenCalledWith(
+      '[claude-comms] /api/conversations bootstrap failed',
+      expect.objectContaining({ status: 500 }),
+    );
   });
 
   it('network error → serverUnreachable=true, channels stays empty', async () => {
@@ -181,6 +203,10 @@ describe('MqttChatStore — v0.4.0 Step 2.5 bootstrap from /api/conversations',
 
     expect(store.channels).toEqual([]);
     expect(store.serverUnreachable).toBe(true);
+    expect(warnSpy).toHaveBeenCalledWith(
+      '[claude-comms] /api/conversations bootstrap failed',
+      expect.objectContaining({ message: 'NetworkError: fetch failed' }),
+    );
   });
 
   it('successful bootstrap after a failure clears the serverUnreachable flag', async () => {