feat(messaging-ui): channels — browse, join, leave, create (contract + mock + UI)

Adds a third membership beyond dm/group: a discoverable, joinable room.

- contract: Membership += 'channel'; Conversation.topic; ChannelSummary +
  CreateChannelInput; optional adapter methods browseChannels/createChannel/
  joinChannel/leaveChannel (capability-degrading — absent hides the UI)
- MockAdapter implements them (seeds a joined public, a joinable public, and a
  private channel); listConversations now returns only threads I'm in
- useChannels hook (browse/create/join/leave + supported flag)
- UI: sidebar sections (Channels vs Direct messages), a ＋ that opens a
  ChannelBrowser (join + create), # / lock glyphs; themeable styles
- KernelClientAdapter passes channel membership + topic through
- 4 channel tests (mock browse/join/create + render browse→join); 52 total green

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

packages/iios-messaging-ui/src/components/messenger.tsx

@@ -1,31 +1,80 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useConversations } from '../hooks/use-conversations';
+import { useAdapter } from '../provider';
 import { ConversationList } from './conversation-list';
+import { ChannelBrowser } from './channel-browser';
 import { Thread } from './thread';
 
 /**
- * The drop-in messenger: conversation list + open thread. Owns only selection state;
- * all data flows through the injected adapter via the hooks. Auto-selects the first
- * conversation so the pane is never empty on load.
+ * The drop-in messenger: sectioned conversation list (Channels / Direct messages) + open thread,
+ * with a channel browser when the adapter supports channels. Owns only selection + browse state;
+ * all data flows through the injected adapter via the hooks.
  */
 export function Messenger() {
-  const { conversations, loading, error } = useConversations();
+  const { conversations, loading, error, refetch } = useConversations();
+  const adapter = useAdapter();
+  const channelsSupported = typeof adapter.browseChannels === 'function';
+
   const [selected, setSelected] = useState<string | null>(null);
+  const [browsing, setBrowsing] = useState(false);
 
   useEffect(() => {
+    if (browsing) return;
     if (selected && conversations.some((c) => c.threadId === selected)) return;
     setSelected(conversations[0]?.threadId ?? null);
-  }, [conversations, selected]);
+  }, [conversations, selected, browsing]);
+
+  const channels = useMemo(() => conversations.filter((c) => c.membership === 'channel'), [conversations]);
+  const dms = useMemo(() => conversations.filter((c) => c.membership !== 'channel'), [conversations]);
+
+  function pick(threadId: string): void {
+    setBrowsing(false);
+    setSelected(threadId);
+  }
 
   return (
     <div className="miu-messenger">
       <aside className="miu-sidebar">
         {loading && conversations.length === 0 ? <div className="miu-empty">Loading…</div> : null}
         {error ? <div className="miu-empty miu-error">{error}</div> : null}
-        <ConversationList conversations={conversations} selectedId={selected} onSelect={setSelected} />
+
+        {channelsSupported ? (
+          <div className="miu-section">
+            <div className="miu-section-head">
+              <span>Channels</span>
+              <button type="button" className="miu-section-add" title="Browse channels" onClick={() => setBrowsing(true)}>
+                ＋
+              </button>
+            </div>
+            {channels.length > 0 ? (
+              <ConversationList conversations={channels} selectedId={browsing ? null : selected} onSelect={pick} />
+            ) : (
+              <div className="miu-empty miu-empty-sm">Browse to join a channel.</div>
+            )}
+          </div>
+        ) : null}
+
+        <div className="miu-section">
+          {channelsSupported ? (
+            <div className="miu-section-head">
+              <span>Direct messages</span>
+            </div>
+          ) : null}
+          <ConversationList conversations={dms} selectedId={browsing ? null : selected} onSelect={pick} />
+        </div>
       </aside>
+
       <section className="miu-main">
-        <Thread threadId={selected} />
+        {browsing ? (
+          <ChannelBrowser
+            onJoined={(threadId) => {
+              refetch();
+              pick(threadId);
+            }}
+          />
+        ) : (
+          <Thread threadId={selected} />
+        )}
       </section>
     </div>
   );