fix(canvas): mobile chat render parity — Agent Comms feed + attachment previews (#231, #232)

Root cause (shared): MobileChat.tsx was authored as a deliberately
"slimmer surface" that forked its own reduced render path instead of
reusing the desktop ChatTab renderers. Two symptoms, one cause:

- #231: the Agent Comms sub-tab rendered a static placeholder string
  instead of mounting <AgentCommsPanel/> (which desktop ChatTab uses),
  so per-agent / A2A / delegation traffic was invisible on mobile.
- #232: the message loop rendered only m.content; m.attachments was
  never rendered — desktop ChatTab dispatches each attachment through
  <AttachmentPreview/>, mobile dropped it entirely.

Fix reuses the existing desktop components (no parallel mobile path):
- Mount the same AgentCommsPanel on the Agent Comms tab (it owns its
  own scroll/load/error/empty states; read-only, so composer+footer
  are gated to My Chat, matching desktop's agent-comms tabpanel).
- Render m.attachments via AttachmentPreview with the same
  authenticated downloadChatFile handler the desktop tab uses.

Tests: 3 added MobileChat parity tests; all 29 pass. No change to
socket/send/history hooks → no regression to sibling canvas-realtime
PRs (#1435 / #1437 / #1440); verified non-overlapping hunks.

Privacy (#231): surfaces the SAME inter-agent (A2A/delegation) data
the desktop ChatTab already shows via the identical AgentCommsPanel +
/activity?source=agent endpoint. Closes a mobile-only gap; does NOT
widen exposure beyond desktop. Flagged for CTO awareness.

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

canvas/src/components/mobile/MobileChat.tsx

@@ -2,8 +2,11 @@
 
 // 04 · Chat — message thread + composer + sub-tabs.
 // Wired to the same /workspaces/:id/a2a (method message/send) endpoint
-// that the desktop ChatTab uses, but with a slimmer surface: no
-// attachments, no A2A topology overlay, no conversation tracing.
+// that the desktop ChatTab uses. Render parity with desktop ChatTab is
+// achieved by reusing its renderers rather than forking a reduced
+// mobile path: the Agent Comms sub-tab mounts the same AgentCommsPanel,
+// and message attachments route through the same AttachmentPreview
+// dispatch the desktop My-Chat bubble uses (#231/#232).
 
 import { useEffect, useMemo, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
@@ -16,6 +19,9 @@ import {
   useChatSend,
   useChatSocket,
 } from "@/components/tabs/chat/hooks";
+import { AgentCommsPanel } from "@/components/tabs/chat/AgentCommsPanel";
+import { AttachmentPreview } from "@/components/tabs/chat/AttachmentPreview";
+import { downloadChatFile } from "@/components/tabs/chat/uploads";
 
 import { toMobileAgent } from "./components";
 import { MOBILE_FONT_MONO, MOBILE_FONT_SANS, usePalette } from "./palette";
@@ -304,6 +310,17 @@ export function MobileChat({
   const removePendingFile = (index: number) =>
     setPendingFiles((prev) => prev.filter((_, i) => i !== index));
 
+  // Route attachment downloads through the same authenticated helper
+  // the desktop ChatTab uses (downloadChatFile) so platform-scheme
+  // URIs get a real Blob with auth headers instead of about:blank.
+  const downloadAttachment = (att: ChatAttachment) => {
+    downloadChatFile(agentId, att).catch(() => {
+      // AttachmentPreview's own error affordance covers the in-bubble
+      // failure state; matches ChatTab's behaviour of not double-
+      // reporting a download failure.
+    });
+  };
+
   const send = async () => {
     const text = draft.trim();
     if ((!text && pendingFiles.length === 0) || sending || !reachable) return;
@@ -433,7 +450,19 @@ export function MobileChat({
         </div>
       </div>
 
+      {/* Agent Comms — reuse the desktop AgentCommsPanel verbatim so
+          mobile renders the identical peer/A2A + delegation feed
+          (history GET + live socket events) instead of a placeholder
+          (#231). The panel owns its own scroll/load/error/empty
+          states, matching ChatTab's agent-comms tabpanel. */}
+      {tab === "a2a" && (
+        <div style={{ flex: 1, minHeight: 0, overflow: "hidden" }}>
+          <AgentCommsPanel workspaceId={agentId} />
+        </div>
+      )}
+
       {/* Messages */}
+      {tab === "my" && (
       <div
         ref={scrollRef}
         style={{
@@ -445,18 +474,6 @@ export function MobileChat({
           gap: 8,
         }}
       >
-        {tab === "a2a" && (
-          <div
-            style={{
-              padding: "20px 4px",
-              textAlign: "center",
-              color: p.text3,
-              fontSize: 13,
-            }}
-          >
-            Agent Comms — peer-to-peer A2A traffic surfaces in the Comms tab.
-          </div>
-        )}
         {tab === "my" && historyLoading && (
           <div style={{ padding: "20px 4px", textAlign: "center", color: p.text3, fontSize: 13 }}>
             Loading chat history…
@@ -521,9 +538,31 @@ export function MobileChat({
                     overflowWrap: "anywhere",
                   }}
                 >
-                  <MarkdownBubble dark={dark} accent={p.accent}>
-                    {m.content}
-                  </MarkdownBubble>
+                  {m.content && (
+                    <MarkdownBubble dark={dark} accent={p.accent}>
+                      {m.content}
+                    </MarkdownBubble>
+                  )}
+                  {m.attachments && m.attachments.length > 0 && (
+                    <div
+                      style={{
+                        display: "flex",
+                        flexWrap: "wrap",
+                        gap: 4,
+                        marginTop: m.content ? 6 : 0,
+                      }}
+                    >
+                      {m.attachments.map((att, i) => (
+                        <AttachmentPreview
+                          key={`${m.id}-${i}`}
+                          workspaceId={agentId}
+                          attachment={att}
+                          onDownload={downloadAttachment}
+                          tone={mine ? "user" : "agent"}
+                        />
+                      ))}
+                    </div>
+                  )}
                   <div
                     style={{
                       fontSize: 10,
@@ -554,7 +593,13 @@ export function MobileChat({
           </div>
         )}
       </div>
+      )}
 
+      {/* Footer ID + composer belong to My Chat only. The Agent Comms
+          tab is a read-only peer/A2A feed (parity with desktop
+          ChatTab, where the agent-comms tabpanel has no composer). */}
+      {tab === "my" && (
+      <>
       {/* Footer ID */}
       <div
         style={{
@@ -746,6 +791,8 @@ export function MobileChat({
           </button>
         </div>
       </div>
+      </>
+      )}
     </div>
   );
 }

canvas/src/components/mobile/__tests__/MobileChat.test.tsx

@@ -21,6 +21,14 @@ import { MobileChat } from "../MobileChat";
 vi.mock("@/lib/api");
 import { api } from "@/lib/api";
 
+// AgentCommsPanel (mounted by the Agent Comms sub-tab, #231) subscribes
+// to the global socket via useSocketEvent. Stub it to a no-op so the
+// panel mounts without the real ReconnectingSocket — the parity tests
+// only assert the panel renders (vs the old static placeholder).
+vi.mock("@/hooks/useSocketEvent", () => ({
+  useSocketEvent: vi.fn(),
+}));
+
 // ─── Mock store ───────────────────────────────────────────────────────────────
 
 const mockAgentId = "ws-chat-test";
@@ -155,6 +163,12 @@ beforeEach(() => {
   mockOnBack.mockClear();
   mockStoreState.nodes = [];
   mockStoreState.agentMessages = {};
+  // jsdom doesn't implement scrollIntoView. The Agent Comms tab now
+  // mounts AgentCommsPanel (#231), which scrolls its feed to bottom on
+  // arrival; a no-op stub keeps the panel from throwing under jsdom
+  // (same stub AgentCommsPanel's own render test installs).
+  Element.prototype.scrollIntoView =
+    vi.fn() as unknown as Element["scrollIntoView"];
   // Set up spies on the real api methods. Tests override these per-call.
   const getSpy = vi.spyOn(api, "get");
   const postSpy = vi.spyOn(api, "post");
@@ -474,3 +488,146 @@ describe("MobileChat — chat history", () => {
     expect(getSpy).toHaveBeenCalledTimes(2);
   });
 });
+
+// ─── #232 · Attachment render parity with desktop ChatTab ────────────────────
+//
+// Regression for the CTO-reported mobile bug: MobileChat used to render
+// only m.content (no attachment surface), so files sent/received in a
+// conversation were invisible on mobile while desktop showed them. The
+// fix routes m.attachments through the same AttachmentPreview the
+// desktop ChatTab bubble uses.
+
+describe("MobileChat — attachment render parity (#232)", () => {
+  beforeEach(() => {
+    mockStoreState.nodes = [onlineNode];
+  });
+
+  it("renders an attachment from a history message via AttachmentPreview", async () => {
+    const getSpy = vi.spyOn(api, "get");
+    // useChatHistory reads { messages, reached_end }.
+    getSpy.mockResolvedValueOnce({
+      messages: [
+        {
+          id: "m-att-1",
+          role: "agent",
+          content: "Here is the report",
+          attachments: [
+            {
+              name: "report.csv",
+              uri: "workspace://out/report.csv",
+              mimeType: "text/csv",
+              size: 2048,
+            },
+          ],
+          timestamp: new Date().toISOString(),
+        },
+      ],
+      reached_end: true,
+    });
+
+    let rr: ReturnType<typeof renderChat>;
+    await act(async () => {
+      rr = renderChat(mockAgentId);
+    });
+    const { container } = rr!;
+
+    // A non-image attachment renders the AttachmentChip download button
+    // with title="Download <name>" — same component the desktop bubble
+    // dispatches through AttachmentPreview.
+    await waitFor(() => {
+      const chip = container.querySelector('[title="Download report.csv"]');
+      expect(chip).toBeTruthy();
+    });
+    expect(container.textContent ?? "").toContain("report.csv");
+  });
+});
+
+// ─── #231 · Agent Comms (A2A/peer) render parity with desktop ChatTab ────────
+//
+// Regression for the CTO-reported mobile bug: the Agent Comms sub-tab
+// rendered a static placeholder string ("peer-to-peer A2A traffic
+// surfaces in the Comms tab") instead of the real feed. The fix mounts
+// the same AgentCommsPanel the desktop ChatTab agent-comms tabpanel
+// uses, so peer/A2A + delegation activity is visible on mobile.
+
+describe("MobileChat — Agent Comms render parity (#231)", () => {
+  beforeEach(() => {
+    mockStoreState.nodes = [onlineNode];
+  });
+
+  it("mounts AgentCommsPanel on the Agent Comms tab (not the old placeholder)", async () => {
+    const getSpy = vi.spyOn(api, "get");
+    // 1st GET: useChatHistory (My Chat) on mount.
+    getSpy.mockResolvedValueOnce({ messages: [], reached_end: true });
+    // 2nd GET: AgentCommsPanel's activity load when the tab is shown.
+    // Empty list → panel renders its own empty state, which still
+    // proves AgentCommsPanel mounted (vs. the removed placeholder).
+    getSpy.mockResolvedValueOnce([]);
+
+    let rr: ReturnType<typeof renderChat>;
+    await act(async () => {
+      rr = renderChat(mockAgentId);
+    });
+    const { container } = rr!;
+
+    const commsTab = Array.from(container.querySelectorAll("button")).find(
+      (b) => b.textContent?.trim() === "Agent Comms",
+    );
+    expect(commsTab).toBeTruthy();
+    await act(async () => {
+      commsTab!.click();
+    });
+
+    await waitFor(() => {
+      const text = container.textContent ?? "";
+      // The panel's empty state — proves AgentCommsPanel mounted.
+      expect(text).toContain("No agent-to-agent communications yet.");
+    });
+    // The old hard-coded placeholder must be gone.
+    expect(container.textContent ?? "").not.toContain(
+      "peer-to-peer A2A traffic surfaces in the Comms tab",
+    );
+    // The panel hit its activity endpoint.
+    expect(getSpy).toHaveBeenCalledWith(
+      expect.stringContaining(`/workspaces/${mockAgentId}/activity`),
+    );
+  });
+
+  it("renders a peer message on the Agent Comms tab", async () => {
+    const getSpy = vi.spyOn(api, "get");
+    getSpy.mockResolvedValueOnce({ messages: [], reached_end: true });
+    // a2a_receive from a peer → AgentCommsPanel.toCommMessage maps it
+    // to an inbound bubble with the request text.
+    getSpy.mockResolvedValueOnce([
+      {
+        id: "act-1",
+        activity_type: "a2a_receive",
+        source_id: "peer-ws-uuid",
+        target_id: mockAgentId,
+        method: "message/send",
+        summary: "peer asked something",
+        request_body: { task: "Please review PR 42" },
+        response_body: null,
+        status: "ok",
+        created_at: new Date().toISOString(),
+      },
+    ]);
+
+    let rr: ReturnType<typeof renderChat>;
+    await act(async () => {
+      rr = renderChat(mockAgentId);
+    });
+    const { container } = rr!;
+
+    const commsTab = Array.from(container.querySelectorAll("button")).find(
+      (b) => b.textContent?.trim() === "Agent Comms",
+    );
+    await act(async () => {
+      commsTab!.click();
+    });
+
+    await waitFor(() => {
+      expect(container.textContent ?? "").toContain("Please review PR 42");
+    });
+  });
+});