demo: per-view debug panes, lazy view creation, React key fix

Each split pane now includes its own inline DebugPane showing
view-scoped Ably messages and UIMessages. A new useViewAblyMessages
hook subscribes to the View's scoped 'ably-message' event.

The second View is now created lazily when split mode activates and
closed on deactivation or unmount, fixing a resource leak.

DebugPane refactored with an `inline` prop — inline mode renders
directly within the pane, non-inline mode keeps the collapsible
sidebar. React keys use Ably serial instead of array index.

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

Author: mschristensen

demo/vercel/react/use-client-transport/src/app/components/chat-pane.tsx

@@ -2,41 +2,55 @@
 
 import type { UIMessage, UIMessageChunk } from 'ai';
 import type { ViewHandle } from '@ably/ai-transport/react';
-import type { ClientTransport } from '@ably/ai-transport';
+import type { ClientTransport, View } from '@ably/ai-transport';
 import { MessageList } from './message-list';
 import { InputBar } from './input-bar';
 import { MessageQueue } from './message-queue';
+import { DebugPane } from './debug-pane';
 import { useMessageQueue } from '../hooks/use-message-queue';
+import { useViewAblyMessages } from '../hooks/use-view-ably-messages';
 import { userMessage } from '../helpers';
 
 interface ChatPaneProps {
   label: string;
   transport: ClientTransport<UIMessageChunk, UIMessage>;
+  /** The raw View — used for subscribing to scoped ably-message events. */
+  rawView: View<UIMessageChunk, UIMessage>;
+  /** The reactive ViewHandle from useView — used for rendering and write ops. */
   view: ViewHandle<UIMessageChunk, UIMessage>;
   activeTurns: Map<string, Set<string>>;
   clientId: string | undefined;
 }
 
-export function ChatPane({ label, transport, view, activeTurns, clientId }: ChatPaneProps) {
+export function ChatPane({ label, transport, rawView, view, activeTurns, clientId }: ChatPaneProps) {
   const queue = useMessageQueue(transport, view.send);
+  const ablyMessages = useViewAblyMessages(rawView);
 
   return (
-    <div className="flex flex-1 flex-col min-w-0">
-      <div className="flex items-center gap-2 border-b border-zinc-800 px-3 py-1.5">
-        <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">{label}</span>
+    <div className="flex flex-1 min-w-0 min-h-0">
+      <div className="flex flex-1 flex-col min-w-0">
+        <div className="flex items-center gap-2 border-b border-zinc-800 px-3 py-1.5">
+          <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">{label}</span>
+        </div>
+        <MessageList
+          view={view}
+          onRegenerate={(id) => view.regenerate(id)}
+          onEdit={(id, text) => view.edit(id, [userMessage(text)])}
+        />
+        <MessageQueue queue={queue} />
+        <InputBar
+          transport={transport}
+          send={view.send}
+          activeTurns={activeTurns}
+          clientId={clientId}
+          queue={queue}
+        />
       </div>
-      <MessageList
-        view={view}
-        onRegenerate={(id) => view.regenerate(id)}
-        onEdit={(id, text) => view.edit(id, [userMessage(text)])}
-      />
-      <MessageQueue queue={queue} />
-      <InputBar
-        transport={transport}
-        send={view.send}
+      <DebugPane
+        messages={view.nodes.map((n) => n.message)}
+        ablyMessages={ablyMessages}
         activeTurns={activeTurns}
-        clientId={clientId}
-        queue={queue}
+        inline
       />
     </div>
   );

demo/vercel/react/use-client-transport/src/app/components/chat.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useChannel } from 'ably/react';
 import { useClientTransport, useActiveTurns, useView, useAblyMessages } from '@ably/ai-transport/react';
+import type { View } from '@ably/ai-transport';
+import type { UIMessageChunk, UIMessage } from 'ai';
 import { UIMessageCodec } from '@ably/ai-transport/vercel';
 
 import { userMessage } from '../helpers';
@@ -20,6 +22,31 @@ interface ChatProps {
   historyLimit?: number;
 }
 
+/**
+ * Create a secondary View lazily when split mode is active, and close it
+ * when split mode is deactivated or the component unmounts.
+ */
+function useSecondView(transport: ReturnType<typeof useClientTransport>, split: boolean, historyLimit: number) {
+  const viewRef = useRef<View<UIMessageChunk, UIMessage> | null>(null);
+
+  // Create or close the raw view when split changes
+  useEffect(() => {
+    if (split && !viewRef.current) {
+      viewRef.current = transport.createView();
+    }
+    return () => {
+      if (viewRef.current) {
+        viewRef.current.close();
+        viewRef.current = null;
+      }
+    };
+  }, [split, transport]);
+
+  const rawView = split ? viewRef.current : null;
+  const handle = useView(rawView, rawView ? { limit: historyLimit } : null);
+  return { rawView, handle };
+}
+
 export function Chat({ chatId, clientId, historyLimit }: ChatProps) {
   const { channel } = useChannel({ channelName: chatId });
   const [split, setSplit] = useState(false);
@@ -31,9 +58,9 @@ export function Chat({ chatId, clientId, historyLimit }: ChatProps) {
     body: () => ({ id: chatId }),
   });
 
-  const view = useView(transport, { limit: historyLimit ?? 30 });
-  const secondView = useMemo(() => transport.createView(), [transport]);
-  const view2 = useView(secondView, { limit: historyLimit ?? 30 });
+  const limit = historyLimit ?? 30;
+  const view = useView(transport, { limit });
+  const { rawView: secondRawView, handle: view2 } = useSecondView(transport, split, limit);
 
   const activeTurns = useActiveTurns(transport);
   const ablyMessages = useAblyMessages(transport);
@@ -52,18 +79,22 @@ export function Chat({ chatId, clientId, historyLimit }: ChatProps) {
             <ChatPane
               label="View A"
               transport={transport}
+              rawView={transport.view}
               view={view}
               activeTurns={activeTurns}
               clientId={clientId}
             />
             <div className="w-px bg-zinc-800" />
-            <ChatPane
-              label="View B"
-              transport={transport}
-              view={view2}
-              activeTurns={activeTurns}
-              clientId={clientId}
-            />
+            {secondRawView && (
+              <ChatPane
+                label="View B"
+                transport={transport}
+                rawView={secondRawView}
+                view={view2}
+                activeTurns={activeTurns}
+                clientId={clientId}
+              />
+            )}
           </div>
         ) : (
           <>
@@ -83,11 +114,13 @@ export function Chat({ chatId, clientId, historyLimit }: ChatProps) {
           </>
         )}
       </div>
-      <DebugPane
-        messages={view.nodes.map((n) => n.message)}
-        ablyMessages={ablyMessages}
-        activeTurns={activeTurns}
-      />
+      {!split && (
+        <DebugPane
+          messages={view.nodes.map((n) => n.message)}
+          ablyMessages={ablyMessages}
+          activeTurns={activeTurns}
+        />
+      )}
     </div>
   );
 }

demo/vercel/react/use-client-transport/src/app/components/debug-pane.tsx

@@ -8,6 +8,8 @@ interface DebugPaneProps {
   messages: UIMessage[];
   ablyMessages: Ably.InboundMessage[];
   activeTurns: Map<string, Set<string>>;
+  /** When true, render inline (no fixed toggle button). Used in split-pane mode. */
+  inline?: boolean;
 }
 
 type Tab = 'ably' | 'uimessages';
@@ -36,9 +38,10 @@ function AblyMessagesTab({ entries }: { entries: Ably.InboundMessage[] }) {
       )}
       {entries.map((entry, idx) => {
         const headers = extractHeaders(entry);
+        const key = entry.serial ?? `idx-${String(idx)}`;
         return (
           <div
-            key={idx}
+            key={key}
             className="rounded border border-zinc-800 bg-zinc-900/50 p-2 text-[11px] font-mono"
           >
             <div className="flex items-center gap-2 text-zinc-500 mb-1">
@@ -114,10 +117,80 @@ function UIMessagesTab({ messages, activeTurns }: { messages: UIMessage[]; activ
   );
 }
 
-export function DebugPane({ messages, ablyMessages, activeTurns }: DebugPaneProps) {
-  const [isOpen, setIsOpen] = useState(false);
+function DebugContent({ messages, ablyMessages, activeTurns, onClose }: DebugPaneProps & { onClose?: () => void }) {
   const [tab, setTab] = useState<Tab>('ably');
 
+  return (
+    <div className="w-[420px] flex-shrink-0 border-l border-zinc-800 flex flex-col bg-zinc-950">
+      <div className="flex items-center justify-between border-b border-zinc-800 px-3 py-2">
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => setTab('ably')}
+            className={`text-[10px] px-2 py-1 rounded transition-colors ${
+              tab === 'ably' ? 'bg-zinc-800 text-zinc-300' : 'text-zinc-600 hover:text-zinc-400'
+            }`}
+          >
+            Ably Messages
+            <span className="ml-1 text-zinc-600">{ablyMessages.length}</span>
+          </button>
+          <button
+            onClick={() => setTab('uimessages')}
+            className={`text-[10px] px-2 py-1 rounded transition-colors ${
+              tab === 'uimessages' ? 'bg-zinc-800 text-zinc-300' : 'text-zinc-600 hover:text-zinc-400'
+            }`}
+          >
+            UIMessages
+            <span className="ml-1 text-zinc-600">{messages.length}</span>
+          </button>
+        </div>
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="text-xs text-zinc-600 hover:text-zinc-400 transition-colors"
+          >
+            close
+          </button>
+        )}
+      </div>
+      {tab === 'ably' ? (
+        <AblyMessagesTab entries={ablyMessages} />
+      ) : (
+        <UIMessagesTab
+          messages={messages}
+          activeTurns={activeTurns}
+        />
+      )}
+    </div>
+  );
+}
+
+export function DebugPane({ messages, ablyMessages, activeTurns, inline }: DebugPaneProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (inline) {
+    return (
+      <>
+        {!isOpen && (
+          <button
+            onClick={() => setIsOpen(true)}
+            className="border-l border-zinc-800 bg-zinc-950 px-1.5 text-xs text-zinc-600 hover:text-zinc-400 transition-colors"
+            title="Show debug pane"
+          >
+            &lsaquo;
+          </button>
+        )}
+        {isOpen && (
+          <DebugContent
+            messages={messages}
+            ablyMessages={ablyMessages}
+            activeTurns={activeTurns}
+            onClose={() => setIsOpen(false)}
+          />
+        )}
+      </>
+    );
+  }
+
   return (
     <>
       {!isOpen && (
@@ -131,44 +204,12 @@ export function DebugPane({ messages, ablyMessages, activeTurns }: DebugPaneProp
       )}
 
       {isOpen && (
-        <div className="w-[420px] flex-shrink-0 border-l border-zinc-800 flex flex-col bg-zinc-950">
-          <div className="flex items-center justify-between border-b border-zinc-800 px-3 py-2">
-            <div className="flex items-center gap-1">
-              <button
-                onClick={() => setTab('ably')}
-                className={`text-[10px] px-2 py-1 rounded transition-colors ${
-                  tab === 'ably' ? 'bg-zinc-800 text-zinc-300' : 'text-zinc-600 hover:text-zinc-400'
-                }`}
-              >
-                Ably Messages
-                <span className="ml-1 text-zinc-600">{ablyMessages.length}</span>
-              </button>
-              <button
-                onClick={() => setTab('uimessages')}
-                className={`text-[10px] px-2 py-1 rounded transition-colors ${
-                  tab === 'uimessages' ? 'bg-zinc-800 text-zinc-300' : 'text-zinc-600 hover:text-zinc-400'
-                }`}
-              >
-                UIMessages
-                <span className="ml-1 text-zinc-600">{messages.length}</span>
-              </button>
-            </div>
-            <button
-              onClick={() => setIsOpen(false)}
-              className="text-xs text-zinc-600 hover:text-zinc-400 transition-colors"
-            >
-              close
-            </button>
-          </div>
-          {tab === 'ably' ? (
-            <AblyMessagesTab entries={ablyMessages} />
-          ) : (
-            <UIMessagesTab
-              messages={messages}
-              activeTurns={activeTurns}
-            />
-          )}
-        </div>
+        <DebugContent
+          messages={messages}
+          ablyMessages={ablyMessages}
+          activeTurns={activeTurns}
+          onClose={() => setIsOpen(false)}
+        />
       )}
     </>
   );

demo/vercel/react/use-client-transport/src/app/hooks/use-view-ably-messages.ts

@@ -0,0 +1,34 @@
+'use client';
+
+/**
+ * useViewAblyMessages — accumulates raw Ably messages scoped to a View.
+ *
+ * Subscribes to the View's 'ably-message' event, which only fires for
+ * messages corresponding to visible nodes in that view's window.
+ */
+
+import type * as Ably from 'ably';
+import { useEffect, useRef, useState } from 'react';
+import type { View } from '@ably/ai-transport';
+
+export const useViewAblyMessages = <TEvent, TMessage>(
+  view: View<TEvent, TMessage> | null | undefined,
+): Ably.InboundMessage[] => {
+  const [messages, setMessages] = useState<Ably.InboundMessage[]>([]);
+  const messagesRef = useRef<Ably.InboundMessage[]>([]);
+
+  useEffect(() => {
+    if (!view) return;
+    messagesRef.current = [];
+    setMessages([]);
+
+    const unsub = view.on('ably-message', (msg: Ably.InboundMessage) => {
+      const next = [...messagesRef.current, msg];
+      messagesRef.current = next;
+      setMessages(next);
+    });
+    return unsub;
+  }, [view]);
+
+  return messages;
+};