Feat v0.5.3 chat polish + integration testing

Conversation search (db.query search_like, chat-core /search endpoint,
sidebar search UI), message pagination polish (scroll preservation,
loading spinner), workflow-chat integration package, and multi-user
E2E test infrastructure.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/chat/css/main.css

@@ -1,5 +1,5 @@
 /* ═══════════════════════════════════════════
-   Chat Surface — Styles (v0.1.0)
+   Chat Surface — Styles (v0.2.0)
    Uses variables.css theme tokens:
      --bg, --bg-surface, --bg-raised, --bg-hover, --bg-secondary
      --text, --text-2, --text-3
@@ -151,6 +151,78 @@
   flex-shrink: 0;
 }
 
+/* ── Sidebar Search ────────────────────── */
+
+.chat-sidebar__search {
+  position: relative;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.chat-sidebar__search-input {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 28px 6px 10px;
+  font-size: 13px;
+  font-family: inherit;
+  background: var(--input-bg);
+  color: var(--text);
+  box-sizing: border-box;
+}
+
+.chat-sidebar__search-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.chat-sidebar__search-clear {
+  position: absolute;
+  right: 22px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--text-3);
+  cursor: pointer;
+  font-size: 16px;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.chat-sidebar__search-clear:hover {
+  color: var(--text);
+}
+
+.chat-sidebar__search-results {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.chat-sidebar__search-section {
+  padding: 8px 16px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-3);
+}
+
+.chat-sidebar__search-loading {
+  display: flex;
+  justify-content: center;
+  padding: 16px;
+}
+
+.chat-sidebar__item--search-msg .chat-sidebar__item-preview {
+  font-size: 13px;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 /* ── Message Thread ─────────────────────── */
 
 .chat-thread {
@@ -181,6 +253,12 @@
   padding: 24px;
 }
 
+.chat-thread__loading-more {
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+}
+
 .chat-thread__load-more {
   align-self: center;
   background: none;

packages/chat/js/main.js

@@ -1,5 +1,5 @@
 /**
- * Chat — Surface Entry Point (v0.1.0)
+ * Chat — Surface Entry Point (v0.2.0)
  *
  * Messaging surface built on chat-core library:
  *   sw.api.ext('chat-core')  — conversation/message CRUD
@@ -85,36 +85,110 @@
   // ═══════════════════════════════════════════
 
   function ConversationList({ selected, onSelect, onNew, conversations, unread }) {
+    var [searchQuery, setSearchQuery] = useState('');
+    var [searchResults, setSearchResults] = useState(null);
+    var [searching, setSearching] = useState(false);
+
+    function handleSearchInput(e) {
+      var q = e.target.value;
+      setSearchQuery(q);
+      if (q.length < 2) {
+        setSearchResults(null);
+        setSearching(false);
+        return;
+      }
+      debounce('search', () => {
+        setSearching(true);
+        api.get('/search?q=' + encodeURIComponent(q)).then(res => {
+          setSearchResults(res || { conversations: [], messages: [] });
+          setSearching(false);
+        }).catch(() => { setSearching(false); });
+      }, 300);
+    }
+
+    function clearSearch() {
+      setSearchQuery('');
+      setSearchResults(null);
+      setSearching(false);
+    }
+
+    function selectFromSearch(cid) {
+      clearSearch();
+      onSelect(cid);
+    }
+
+    // Render search results
+    var showSearch = searchResults !== null;
+    var sConvs = showSearch ? (searchResults.conversations || []) : [];
+    var sMsgs  = showSearch ? (searchResults.messages || []) : [];
+
     return html`
       <div class="chat-sidebar">
         <div class="chat-sidebar__header">
           <span class="chat-sidebar__title">Conversations</span>
           <${Button} size="sm" onClick=${onNew}>New<//>
         </div>
-        <div class="chat-sidebar__list">
-          ${conversations.length === 0 && html`
-            <div class="chat-sidebar__empty">No conversations yet</div>`}
-          ${conversations.map(c => html`
-            <div key=${c.id}
-                 class=${'chat-sidebar__item' + (selected === c.id ? ' chat-sidebar__item--active' : '')}
-                 onClick=${() => onSelect(c.id)}>
-              <div class="chat-sidebar__item-top">
-                <span class="chat-sidebar__item-title">${c.title || 'Untitled'}</span>
-                <span class="chat-sidebar__item-time">${timeAgo(c.updated_at || c.created_at)}</span>
-              </div>
-              <div class="chat-sidebar__item-bottom">
-                <span class="chat-sidebar__item-preview">
-                  ${c.last_message
-                    ? truncate(c.last_message.content_type === 'system'
-                        ? '\u2022 ' + c.last_message.content
-                        : c.last_message.content, 60)
-                    : 'No messages yet'}
-                </span>
-                ${(unread[c.id] || 0) > 0 && html`
-                  <span class="chat-sidebar__badge">${unread[c.id]}</span>`}
-              </div>
-            </div>`)}
+        <div class="chat-sidebar__search">
+          <input class="chat-sidebar__search-input"
+                 type="text"
+                 value=${searchQuery}
+                 placeholder="Search\u2026"
+                 onInput=${handleSearchInput} />
+          ${searchQuery && html`
+            <button class="chat-sidebar__search-clear" onClick=${clearSearch}>\u00d7</button>`}
         </div>
+        ${showSearch ? html`
+          <div class="chat-sidebar__search-results">
+            ${searching && html`<div class="chat-sidebar__search-loading"><${Spinner} size="sm" /></div>`}
+            ${!searching && sConvs.length === 0 && sMsgs.length === 0 && html`
+              <div class="chat-sidebar__empty">No results</div>`}
+            ${sConvs.length > 0 && html`
+              <div class="chat-sidebar__search-section">Conversations</div>
+              ${sConvs.map(c => html`
+                <div key=${c.id} class="chat-sidebar__item" onClick=${() => selectFromSearch(c.id)}>
+                  <div class="chat-sidebar__item-top">
+                    <span class="chat-sidebar__item-title">${c.title || 'Untitled'}</span>
+                    <span class="chat-sidebar__item-time">${timeAgo(c.updated_at || c.created_at)}</span>
+                  </div>
+                </div>`)}`}
+            ${sMsgs.length > 0 && html`
+              <div class="chat-sidebar__search-section">Messages</div>
+              ${sMsgs.map(m => html`
+                <div key=${m.id} class="chat-sidebar__item chat-sidebar__item--search-msg" onClick=${() => selectFromSearch(m.conversation_id)}>
+                  <div class="chat-sidebar__item-top">
+                    <span class="chat-sidebar__item-preview">${truncate(m.content, 80)}</span>
+                  </div>
+                  <div class="chat-sidebar__item-bottom">
+                    <span class="chat-sidebar__item-time">${timeAgo(m.created_at)}</span>
+                  </div>
+                </div>`)}`}
+          </div>
+        ` : html`
+          <div class="chat-sidebar__list">
+            ${conversations.length === 0 && html`
+              <div class="chat-sidebar__empty">No conversations yet</div>`}
+            ${conversations.map(c => html`
+              <div key=${c.id}
+                   class=${'chat-sidebar__item' + (selected === c.id ? ' chat-sidebar__item--active' : '')}
+                   onClick=${() => onSelect(c.id)}>
+                <div class="chat-sidebar__item-top">
+                  <span class="chat-sidebar__item-title">${c.title || 'Untitled'}</span>
+                  <span class="chat-sidebar__item-time">${timeAgo(c.updated_at || c.created_at)}</span>
+                </div>
+                <div class="chat-sidebar__item-bottom">
+                  <span class="chat-sidebar__item-preview">
+                    ${c.last_message
+                      ? truncate(c.last_message.content_type === 'system'
+                          ? '\u2022 ' + c.last_message.content
+                          : c.last_message.content, 60)
+                      : 'No messages yet'}
+                  </span>
+                  ${(unread[c.id] || 0) > 0 && html`
+                    <span class="chat-sidebar__badge">${unread[c.id]}</span>`}
+                </div>
+              </div>`)}
+          </div>
+        `}
       </div>`;
   }
 
@@ -244,9 +318,11 @@
       }).catch(() => setLoading(false));
     }, [conversationId, partMap]);
 
-    // Load older messages
+    // Load older messages (preserves scroll position)
     function loadMore() {
       if (!hasMore || !nextCursor || loading) return;
+      var el = listRef.current;
+      var prevHeight = el ? el.scrollHeight : 0;
       setLoading(true);
       api.get('/messages/' + conversationId + '?limit=50&cursor=' + encodeURIComponent(nextCursor)).then(res => {
         var data = res || {};
@@ -255,6 +331,10 @@
         setHasMore(!!data.has_more);
         setNextCursor(data.next_cursor || '');
         setLoading(false);
+        // Restore scroll position after prepending older messages
+        requestAnimationFrame(() => {
+          if (el) el.scrollTop = el.scrollHeight - prevHeight;
+        });
       }).catch(() => setLoading(false));
     }
 
@@ -370,8 +450,9 @@
       <div class="chat-thread">
         <div class="chat-thread__messages" ref=${listRef}>
           ${loading && messages.length === 0 && html`<div class="chat-thread__loading"><${Spinner} /></div>`}
-          ${hasMore && html`
-            <button class="chat-thread__load-more" onClick=${loadMore} disabled=${loading}>
+          ${loading && messages.length > 0 && html`<div class="chat-thread__loading-more"><${Spinner} size="sm" /></div>`}
+          ${hasMore && !loading && html`
+            <button class="chat-thread__load-more" onClick=${loadMore}>
               Load older messages
             </button>`}
           ${messages.map(m => html`

packages/chat/manifest.json

@@ -6,7 +6,7 @@
   "route": "/s/chat",
   "auth": "authenticated",
   "layout": "single",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "icon": "\ud83d\udcac",
   "description": "Chat surface — conversations, messaging, typing indicators, read receipts.",
   "author": "switchboard",