canvas/src/components/mobile/MobileChat.tsx

@@ -36,6 +36,20 @@ interface A2AResponseShape {
   error?: { message?: string };
 }
 
+// Wire shape for GET /workspaces/:id/chat-history (chat_history.go → ChatHistoryResponse).
+interface ApiChatMessage {
+  id: string;
+  role: string; // "user" | "agent" | "system"
+  content: string;
+  timestamp: string;
+  attachments?: Array<{ name: string; uri: string; mimeType?: string; size?: number }>;
+}
+
+interface ChatHistoryResponse {
+  messages: ApiChatMessage[];
+  reached_end: boolean;
+}
+
 const formatTime = (date: Date) =>
   date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
 
@@ -61,18 +75,14 @@ export function MobileChat({
   // that creates a new [] reference on every store update when the key is
   // absent, causing infinite re-render (React error #185).
   const storedMessages = useCanvasStore((s) => s.agentMessages[agentId]);
-  const [messages, setMessages] = useState<ChatMessage[]>(() =>
-    (storedMessages ?? []).map((m) => ({
-      id: m.id,
-      role: "agent",
-      text: m.content,
-      ts: formatStoredTimestamp(m.timestamp),
-    })),
-  );
+  // Start empty — history is loaded via useEffect below.
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [draft, setDraft] = useState("");
   const [tab, setTab] = useState<SubTab>("my");
   const [sending, setSending] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true); // history is loading on mount
+  const [historyError, setHistoryError] = useState<string | null>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
   // Synchronous re-entry guard. `setSending(true)` schedules a state
   // update but doesn't flush before a second tap can fire send() — a ref
@@ -80,6 +90,9 @@ export function MobileChat({
   // double-send race a stale `sending` lets through.
   const sendInFlightRef = useRef(false);
   const composerRef = useRef<HTMLTextAreaElement>(null);
+  // Guard: don't treat the initial store population as a live push.
+  // Set to false after the first render completes.
+  const initDoneRef = useRef(false);
 
   // Auto-grow the textarea: reset height to 'auto' so the scrollHeight
   // shrinks when the user deletes text, then size to scrollHeight up to
@@ -92,6 +105,75 @@ export function MobileChat({
     el.style.height = `${next}px`;
   }, [draft]);
 
+  // Fetch chat history on mount; keep merging live agentMessages while the
+  // panel is open. InitDoneRef prevents the initial store snapshot from
+  // triggering the live-merge path (the store buffer is populated by
+  // ChatTab on desktop, not on mobile — this effect loads history as the
+  // mobile-native path).
+  useEffect(() => {
+    let cancelled = false;
+
+    const mapApiMessage = (m: ApiChatMessage): ChatMessage => ({
+      id: m.id,
+      role: m.role === "user" ? "user" : "agent",
+      text: m.content,
+      ts: formatStoredTimestamp(m.timestamp),
+    });
+
+    const syncLive = () => {
+      const live = useCanvasStore.getState().agentMessages[agentId] ?? [];
+      if (live.length > 0) {
+        setMessages((prev) => {
+          const existingIds = new Set(prev.map((m) => m.id));
+          const newOnes = live
+            .filter((m) => !existingIds.has(m.id))
+            .map((m) => ({
+              id: m.id,
+              role: "agent" as const,
+              text: m.content,
+              ts: formatStoredTimestamp(m.timestamp),
+            }));
+          return newOnes.length > 0 ? [...prev, ...newOnes] : prev;
+        });
+      }
+    };
+
+    const bootstrap = async (): Promise<(() => void) | undefined> => {
+      setLoading(true);
+      setHistoryError(null);
+      try {
+        const res = await api.get<ChatHistoryResponse>(
+          `/workspaces/${agentId}/chat-history?limit=50`,
+        );
+        if (cancelled) return;
+        const initial = (res.messages ?? []).map(mapApiMessage);
+        setMessages(initial);
+        // Mark init done BEFORE marking loading=false so any store push
+        // that arrives in the same tick is treated as live, not init.
+        initDoneRef.current = true;
+        setLoading(false);
+        // Subscribe to live pushes after init is complete.
+        syncLive();
+        const unsubscribe = useCanvasStore.subscribe(syncLive);
+        return unsubscribe; // returned for cleanup
+      } catch (e) {
+        if (cancelled) return;
+        setHistoryError(e instanceof Error ? e.message : "Failed to load chat history");
+        setLoading(false);
+        initDoneRef.current = true;
+        return undefined;
+      }
+    };
+
+    let maybeUnsubscribe: (() => void) | undefined;
+    bootstrap().then((fn) => { maybeUnsubscribe = fn; });
+
+    return () => {
+      cancelled = true;
+      if (maybeUnsubscribe) maybeUnsubscribe();
+    };
+  }, [agentId]);
+
   useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
@@ -311,7 +393,61 @@ export function MobileChat({
             Agent Comms — peer-to-peer A2A traffic surfaces in the Comms tab.
           </div>
         )}
-        {tab === "my" && messages.length === 0 && (
+        {tab === "my" && loading && (
+          <div style={{ padding: "20px 4px", textAlign: "center", color: p.text3, fontSize: 13 }}>
+            <div style={{ marginBottom: 6, opacity: 0.6, animation: "spin 1s linear infinite", display: "inline-block", fontSize: 16 }}>⟳</div>
+            <div>Loading chat history…</div>
+          </div>
+        )}
+        {tab === "my" && !loading && historyError && (
+          <div
+            role="alert"
+            style={{
+              padding: "14px 4px",
+              textAlign: "center",
+              color: p.failed,
+              fontSize: 13,
+            }}
+          >
+            <div style={{ marginBottom: 8 }}>Could not load chat history.</div>
+            <button
+              type="button"
+              onClick={() => {
+                setLoading(true);
+                setHistoryError(null);
+                api.get(`/workspaces/${agentId}/chat-history?limit=50`).then(
+                  (res: unknown) => {
+                    const r = res as ChatHistoryResponse;
+                    setMessages((r.messages ?? []).map((m) => ({
+                      id: m.id,
+                      role: m.role === "user" ? "user" : "agent",
+                      text: m.content,
+                      ts: formatStoredTimestamp(m.timestamp),
+                    })));
+                    setLoading(false);
+                    initDoneRef.current = true;
+                  },
+                ).catch((e: unknown) => {
+                  setHistoryError(e instanceof Error ? e.message : "Failed to load");
+                  setLoading(false);
+                  initDoneRef.current = true;
+                });
+              }}
+              style={{
+                padding: "6px 14px",
+                borderRadius: 14,
+                border: `0.5px solid ${p.failed}`,
+                background: "transparent",
+                color: p.failed,
+                fontSize: 12,
+                cursor: "pointer",
+              }}
+            >
+              Retry
+            </button>
+          </div>
+        )}
+        {tab === "my" && !loading && !historyError && messages.length === 0 && (
           <div style={{ padding: "20px 4px", textAlign: "center", color: p.text3, fontSize: 13 }}>
             Send a message to start chatting.
           </div>

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

@@ -8,11 +8,19 @@
  * NOTE: No @testing-library/jest-dom — use DOM APIs.
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { cleanup, render } from "@testing-library/react";
+import { act, cleanup, render, waitFor } from "@testing-library/react";
 import React from "react";
 
 import { MobileChat } from "../MobileChat";
 
+// ─── Mock API ─────────────────────────────────────────────────────────────────
+// vi.mock without a factory auto-mocks the module. In tests, we configure
+// api.get / api.post directly (they are vi.fn() from the auto-mock).
+// Tests that need specific behaviour use mockResolvedValueOnce on the
+// auto-mocked functions.
+vi.mock("@/lib/api");
+import { api } from "@/lib/api";
+
 // ─── Mock store ───────────────────────────────────────────────────────────────
 
 const mockAgentId = "ws-chat-test";
@@ -32,8 +40,14 @@ const mockStoreState = {
 
 vi.mock("@/store/canvas", () => ({
   useCanvasStore: Object.assign(
-    vi.fn((sel) => sel(mockStoreState)),
-    { getState: () => mockStoreState },
+    vi.fn((sel?: (state: typeof mockStoreState) => unknown) => {
+      if (sel) return sel(mockStoreState);
+      return mockStoreState;
+    }),
+    {
+      getState: () => mockStoreState,
+      subscribe: vi.fn(() => vi.fn()),
+    },
   ),
   summarizeWorkspaceCapabilities: vi.fn((data: Record<string, unknown>) => {
     const agentCard = data.agentCard as Record<string, unknown> | null;
@@ -54,16 +68,6 @@ vi.mock("@/store/canvas", () => ({
   }),
 }));
 
-// ─── Mock API ─────────────────────────────────────────────────────────────────
-
-const { mockApiPost } = vi.hoisted(() => ({
-  mockApiPost: vi.fn().mockResolvedValue({ result: { parts: [] } }),
-}));
-
-vi.mock("@/lib/api", () => ({
-  api: { post: mockApiPost },
-}));
-
 // ─── Fixtures ────────────────────────────────────────────────────────────────
 
 const onlineNode = {
@@ -150,7 +154,15 @@ beforeEach(() => {
   mockOnBack.mockClear();
   mockStoreState.nodes = [];
   mockStoreState.agentMessages = {};
-  mockApiPost.mockClear();
+  // 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");
+  getSpy.mockResolvedValue({ messages: [], reached_end: true });
+  postSpy.mockResolvedValue({ result: { parts: [] } });
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
 });
 
 afterEach(() => {
@@ -266,15 +278,26 @@ describe("MobileChat — empty state", () => {
     mockStoreState.nodes = [onlineNode];
   });
 
-  it('shows "Send a message to start chatting." when no messages', () => {
-    const { container } = renderChat(mockAgentId);
+  it('shows "Send a message to start chatting." when no messages', async () => {
+    // History fetch resolves immediately in tests (mockResolvedValue).
+    // act() flushes the microtask queue so the component reaches its
+    // post-load state before we assert.
+    let renderResult: ReturnType<typeof renderChat>;
+    await act(async () => {
+      renderResult = renderChat(mockAgentId);
+    });
+    const { container } = renderResult!;
     expect(container.textContent ?? "").toContain("Send a message to start chatting.");
   });
 
-  it("shows no messages when agentMessages[agentId] is absent (undefined)", () => {
+  it("shows no messages when agentMessages[agentId] is absent (undefined)", async () => {
     // Explicitly set to empty to simulate no stored messages
     mockStoreState.agentMessages = {};
-    const { container } = renderChat(mockAgentId);
+    let renderResult: ReturnType<typeof renderChat>;
+    await act(async () => {
+      renderResult = renderChat(mockAgentId);
+    });
+    const { container } = renderResult!;
     expect(container.textContent ?? "").toContain("Send a message to start chatting.");
   });
 });
@@ -321,3 +344,132 @@ describe("MobileChat — dark mode", () => {
     expect(container.querySelector('[aria-label="Back"]')).toBeTruthy();
   });
 });
+
+// ─── Chat history loading ────────────────────────────────────────────────────
+
+describe("MobileChat — chat history", () => {
+  beforeEach(() => {
+    mockStoreState.nodes = [onlineNode];
+  });
+
+  it("calls GET /workspaces/:id/chat-history on mount", async () => {
+    await act(async () => {
+      renderChat(mockAgentId);
+    });
+    expect(api.get).toHaveBeenCalledWith(
+      `/workspaces/${mockAgentId}/chat-history?limit=50`,
+    );
+  });
+
+  it("shows loading state while history is fetching", () => {
+    // Do NOT await — check the pre-resolve state.
+    const { container } = renderChat(mockAgentId);
+    expect(container.textContent ?? "").toContain("Loading chat history…");
+  });
+
+  it("shows empty state after history resolves with no messages", async () => {
+    // beforeEach already sets api.get to resolve with empty — no override needed.
+    let renderResult: ReturnType<typeof renderChat>;
+    await act(async () => {
+      renderResult = renderChat(mockAgentId);
+    });
+    const { container } = renderResult!;
+    expect(container.textContent ?? "").toContain("Send a message to start chatting.");
+  });
+
+  it("renders messages from history response", async () => {
+    vi.spyOn(api, "get").mockResolvedValueOnce({
+      messages: [
+        {
+          id: "msg-1",
+          role: "user",
+          content: "Hello agent",
+          timestamp: "2026-04-25T10:00:00Z",
+        },
+        {
+          id: "msg-2",
+          role: "agent",
+          content: "Hello back",
+          timestamp: "2026-04-25T10:00:01Z",
+        },
+      ],
+      reached_end: true,
+    });
+    let renderResult: ReturnType<typeof renderChat>;
+    await act(async () => {
+      renderResult = renderChat(mockAgentId);
+    });
+    const { container } = renderResult!;
+    expect(container.textContent ?? "").toContain("Hello agent");
+    expect(container.textContent ?? "").toContain("Hello back");
+  });
+
+  it("maps user role from API correctly", async () => {
+    vi.spyOn(api, "get").mockResolvedValueOnce({
+      messages: [
+        {
+          id: "msg-u",
+          role: "user",
+          content: "user message",
+          timestamp: "2026-04-25T10:00:00Z",
+        },
+      ],
+      reached_end: true,
+    });
+    let renderResult: ReturnType<typeof renderChat>;
+    await act(async () => {
+      renderResult = renderChat(mockAgentId);
+    });
+    // User messages render right-aligned. The text content check is sufficient
+    // to confirm the message appeared.
+    const { container } = renderResult!;
+    expect(container.textContent ?? "").toContain("user message");
+  });
+
+  it("shows error state when history fetch fails", async () => {
+    vi.spyOn(api, "get").mockRejectedValue(new Error("Network error"));
+    let renderResult: ReturnType<typeof renderChat>;
+    await act(async () => {
+      renderResult = renderChat(mockAgentId);
+    });
+    const { container } = renderResult!;
+    expect(container.textContent ?? "").toContain("Could not load chat history.");
+    expect(container.textContent ?? "").toContain("Retry");
+  });
+
+  it("Retry button re-fetches history after error", async () => {
+    // Make the initial mount call fail so the Retry button appears, then
+    // make the retry call succeed so we can verify the full flow.
+    const getSpy = vi.spyOn(api, "get");
+    getSpy
+      .mockRejectedValueOnce(new Error("Network error"))
+      .mockResolvedValueOnce({ messages: [], reached_end: true });
+
+    let renderResult: ReturnType<typeof renderChat>;
+    await act(async () => {
+      renderResult = renderChat(mockAgentId);
+    });
+    const { container } = renderResult!;
+
+    // Error state should be shown with Retry button.
+    expect(container.textContent ?? "").toContain("Could not load chat history.");
+    expect(container.textContent ?? "").toContain("Retry");
+
+    // Click Retry — the button's onClick fires api.get again.
+    // The second mockResolvedValueOnce makes it succeed.
+    const retryBtn = Array.from(container.querySelectorAll("button")).find(
+      (b) => b.textContent?.trim() === "Retry",
+    );
+    expect(retryBtn).toBeTruthy();
+    await act(async () => {
+      retryBtn?.click();
+    });
+
+    // waitFor polls until the retry resolves and component re-renders.
+    await waitFor(() => {
+      expect(container.textContent ?? "").toContain("Send a message to start chatting.");
+    });
+    // Initial call + retry = 2.
+    expect(getSpy).toHaveBeenCalledTimes(2);
+  });
+});