feat(GRO-106): portal Communication tab — real backend

- Added GET /portal/conversation and GET /portal/conversation/messages endpoints
- Created Communication.api.ts with typed fetchers and React hooks
- Rewired Communication.tsx to use real API, removed mock data
- Added composer-disabled bar with "Reply from your phone" tooltip
- Added conversation route tests to portal.test.ts

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

apps/api/src/routes/portal.ts

@@ -1,8 +1,8 @@
 import { Hono } from "hono";
 import { zValidator } from "@hono/zod-validator";
 import { z } from "zod/v3";
-import { eq, inArray } from "@groombook/db";
-import { getDb, appointments, impersonationSessions, waitlistEntries, clients, pets, services, staff, invoices, invoiceLineItems } from "@groombook/db";
+import { and, eq, inArray, desc, lt } from "@groombook/db";
+import { getDb, appointments, impersonationSessions, waitlistEntries, clients, pets, services, staff, invoices, invoiceLineItems, businessSettings, conversations, messages } from "@groombook/db";
 import { validatePortalSession } from "../middleware/portalSession.js";
 import { portalAudit } from "../middleware/portalAudit.js";
 import type { PortalEnv } from "../middleware/portalSession.js";
@@ -175,6 +175,99 @@ portalRouter.get("/invoices", async (c) => {
   })));
 });
 
+// ─── Conversation routes ──────────────────────────────────────────────────────
+
+portalRouter.get("/conversation", async (c) => {
+  const db = getDb();
+  const clientId = c.get("portalClientId");
+
+  const [settings] = await db.select({ id: businessSettings.id }).from(businessSettings).limit(1);
+  if (!settings) return c.json({ error: "Business not configured" }, 500);
+  const businessId = settings.id;
+
+  const [conversation] = await db
+    .select({
+      id: conversations.id,
+      channel: conversations.channel,
+      lastMessageAt: conversations.lastMessageAt,
+      status: conversations.status,
+      createdAt: conversations.createdAt,
+    })
+    .from(conversations)
+    .where(and(eq(conversations.clientId, clientId), eq(conversations.businessId, businessId)))
+    .limit(1);
+
+  if (!conversation) {
+    return c.body(null, 204);
+  }
+
+  return c.json(conversation);
+});
+
+portalRouter.get("/conversation/messages", async (c) => {
+  const db = getDb();
+  const clientId = c.get("portalClientId");
+  const cursor = c.req.query("cursor") || undefined;
+  const limit = Math.min(Number(c.req.query("limit") || "50"), 100);
+
+  const [settings] = await db.select({ id: businessSettings.id }).from(businessSettings).limit(1);
+  if (!settings) return c.json({ error: "Business not configured" }, 500);
+  const businessId = settings.id;
+
+  const [conversation] = await db
+    .select({ id: conversations.id })
+    .from(conversations)
+    .where(and(eq(conversations.clientId, clientId), eq(conversations.businessId, businessId)))
+    .limit(1);
+
+  if (!conversation) {
+    return c.body(null, 204);
+  }
+
+  let query = db
+    .select({
+      id: messages.id,
+      direction: messages.direction,
+      body: messages.body,
+      status: messages.status,
+      createdAt: messages.createdAt,
+      deliveredAt: messages.deliveredAt,
+    })
+    .from(messages)
+    .where(eq(messages.conversationId, conversation.id))
+    .orderBy(desc(messages.createdAt))
+    .limit(limit);
+
+  if (cursor) {
+    const [cursorMsg] = await db
+      .select({ createdAt: messages.createdAt })
+      .from(messages)
+      .where(eq(messages.id, cursor))
+      .limit(1);
+    if (cursorMsg) {
+      query = db
+        .select({
+          id: messages.id,
+          direction: messages.direction,
+          body: messages.body,
+          status: messages.status,
+          createdAt: messages.createdAt,
+          deliveredAt: messages.deliveredAt,
+        })
+        .from(messages)
+        .where(eq(messages.conversationId, conversation.id))
+        .orderBy(desc(messages.createdAt))
+        .limit(limit);
+    }
+  }
+
+  const messagesResult = await query;
+
+  const nextCursor = messagesResult.length === limit ? messagesResult[messagesResult.length - 1]!.id : null;
+
+  return c.json({ messages: messagesResult, nextCursor });
+});
+
 // ─── Appointment action routes ────────────────────────────────────────────────
 
 const customerNotesSchema = z.object({