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/__tests__/buffer.test.ts

@@ -0,0 +1,210 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { resolveBufferMinutes } from "../lib/buffer.js";
+
+// ─── Mock types matching schema ─────────────────────────────────────────────
+
+interface MockBufferTimeRule {
+  id: string;
+  serviceId: string;
+  sizeCategory: string | null;
+  coatType: string | null;
+  bufferMinutes: number;
+}
+
+interface MockService {
+  id: string;
+  name: string;
+  defaultBufferMinutes: number;
+}
+
+// ─── Mock db factory ─────────────────────────────────────────────────────────
+// Simulates Drizzle query builder: db.select().from(t).where(eq(...)) → await → array
+// For services we use db.select().from(t).where(eq(...)).limit(1) → await → first item
+
+function createMockDb(rules: MockBufferTimeRule[], services: MockService[]) {
+  let callCount = 0;
+
+  return {
+    select: vi.fn(() => {
+      callCount++;
+      const rulesQuery = {
+        from: () => ({
+          where: () => rules, // await resolves directly to rules array
+        }),
+      };
+      const serviceQuery = {
+        from: () => ({
+          where: () => ({
+            limit: () => services, // await resolves to services array
+          }),
+        }),
+      };
+      // First select call → rules, second → services
+      return callCount === 1 ? rulesQuery : serviceQuery;
+    }),
+  } as any;
+}
+
+// ─── Tests ───────────────────────────────────────────────────────────────────
+
+describe("resolveBufferMinutes", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("returns exact match when serviceId + sizeCategory + coatType all match", async () => {
+    const db = createMockDb(
+      [
+        { id: "rule-1", serviceId: "svc-1", sizeCategory: "medium", coatType: "short", bufferMinutes: 15 },
+        { id: "rule-2", serviceId: "svc-1", sizeCategory: "medium", coatType: null, bufferMinutes: 10 },
+        { id: "rule-3", serviceId: "svc-1", sizeCategory: null, coatType: null, bufferMinutes: 5 },
+      ],
+      []
+    );
+
+    const result = await resolveBufferMinutes({
+      serviceId: "svc-1",
+      sizeCategory: "medium",
+      coatType: "short",
+      db,
+    });
+
+    expect(result).toBe(15);
+  });
+
+  it("returns service + size match when no exact match", async () => {
+    const db = createMockDb(
+      [
+        { id: "rule-1", serviceId: "svc-1", sizeCategory: "medium", coatType: null, bufferMinutes: 10 },
+        { id: "rule-2", serviceId: "svc-1", sizeCategory: null, coatType: null, bufferMinutes: 5 },
+      ],
+      []
+    );
+
+    const result = await resolveBufferMinutes({
+      serviceId: "svc-1",
+      sizeCategory: "medium",
+      coatType: "long",
+      db,
+    });
+
+    expect(result).toBe(10);
+  });
+
+  it("returns service + coat match when no exact or size match", async () => {
+    const db = createMockDb(
+      [
+        { id: "rule-1", serviceId: "svc-1", sizeCategory: null, coatType: "wire", bufferMinutes: 12 },
+        { id: "rule-2", serviceId: "svc-1", sizeCategory: null, coatType: null, bufferMinutes: 5 },
+      ],
+      []
+    );
+
+    const result = await resolveBufferMinutes({
+      serviceId: "svc-1",
+      sizeCategory: "large",
+      coatType: "wire",
+      db,
+    });
+
+    expect(result).toBe(12);
+  });
+
+  it("returns service-only match when no partial matches", async () => {
+    const db = createMockDb(
+      [{ id: "rule-1", serviceId: "svc-1", sizeCategory: null, coatType: null, bufferMinutes: 7 }],
+      []
+    );
+
+    const result = await resolveBufferMinutes({
+      serviceId: "svc-1",
+      sizeCategory: "large",
+      coatType: "long",
+      db,
+    });
+
+    expect(result).toBe(7);
+  });
+
+  it("falls back to service.defaultBufferMinutes when no rules exist", async () => {
+    const db = createMockDb([], [{ id: "svc-1", name: "Bath", defaultBufferMinutes: 8 }]);
+
+    const result = await resolveBufferMinutes({
+      serviceId: "svc-1",
+      sizeCategory: "small",
+      coatType: "curly",
+      db,
+    });
+
+    expect(result).toBe(8);
+  });
+
+  it("falls back to 0 when no rules and no service default", async () => {
+    const db = createMockDb([], []);
+
+    const result = await resolveBufferMinutes({
+      serviceId: "svc-1",
+      sizeCategory: "small",
+      coatType: null,
+      db,
+    });
+
+    expect(result).toBe(0);
+  });
+
+  it("exact match beats partial matches (priority verification)", async () => {
+    const db = createMockDb(
+      [
+        { id: "rule-1", serviceId: "svc-1", sizeCategory: "medium", coatType: "short", bufferMinutes: 20 },
+        { id: "rule-2", serviceId: "svc-1", sizeCategory: "medium", coatType: null, bufferMinutes: 15 },
+        { id: "rule-3", serviceId: "svc-1", sizeCategory: null, coatType: null, bufferMinutes: 10 },
+      ],
+      [{ id: "svc-1", name: "Groom", defaultBufferMinutes: 5 }]
+    );
+
+    const result = await resolveBufferMinutes({
+      serviceId: "svc-1",
+      sizeCategory: "medium",
+      coatType: "short",
+      db,
+    });
+
+    // Exact match (20) should win over service+size (15) and service default (5)
+    expect(result).toBe(20);
+  });
+
+  it("handles null sizeCategory and null coatType at rule level", async () => {
+    const db = createMockDb(
+      [{ id: "rule-1", serviceId: "svc-1", sizeCategory: null, coatType: null, bufferMinutes: 6 }],
+      []
+    );
+
+    const result = await resolveBufferMinutes({
+      serviceId: "svc-1",
+      sizeCategory: null,
+      coatType: null,
+      db,
+    });
+
+    expect(result).toBe(6);
+  });
+
+  it("prefers service+size over service-only when both exist", async () => {
+    const db = createMockDb(
+      [
+        { id: "rule-1", serviceId: "svc-1", sizeCategory: "large", coatType: null, bufferMinutes: 14 },
+        { id: "rule-2", serviceId: "svc-1", sizeCategory: null, coatType: null, bufferMinutes: 3 },
+      ],
+      [{ id: "svc-1", name: "Groom", defaultBufferMinutes: 1 }]
+    );
+
+    const result = await resolveBufferMinutes({
+      serviceId: "svc-1",
+      sizeCategory: "large",
+      coatType: "smooth",
+      db,
+    });
+
+    expect(result).toBe(14);
+  });
+});

apps/api/src/__tests__/portal.test.ts

@@ -40,11 +40,17 @@ const APPOINTMENT = {
 let selectSessionRow: Record<string, unknown> | null = null;
 let selectAppointmentRow: Record<string, unknown> | null = null;
 let updatedValues: Record<string, unknown>[] = [];
+let selectBusinessSettingsRow: Record<string, unknown> | null = null;
+let selectConversationRow: Record<string, unknown> | null = null;
+let selectMessageRows: Record<string, unknown>[] = [];
 
 function resetMock() {
   selectSessionRow = null;
   selectAppointmentRow = null;
   updatedValues = [];
+  selectBusinessSettingsRow = null;
+  selectConversationRow = null;
+  selectMessageRows = [];
 }
 
 vi.mock("@groombook/db", () => {
@@ -72,6 +78,21 @@ vi.mock("@groombook/db", () => {
     { get: (t, p) => (p === "_name" ? "appointments" : { table: "appointments", column: p }) }
   );
 
+const businessSettings = new Proxy(
+    { _name: "businessSettings" },
+    { get: (t, p) => (p === "_name" ? "businessSettings" : { table: "businessSettings", column: p }) }
+  );
+
+  const conversations = new Proxy(
+    { _name: "conversations" },
+    { get: (t, p) => (p === "_name" ? "conversations" : { table: "conversations", column: p }) }
+  );
+
+  const messages = new Proxy(
+    { _name: "messages" },
+    { get: (t, p) => (p === "_name" ? "messages" : { table: "messages", column: p }) }
+  );
+
   const impersonationAuditLogs = new Proxy(
     { _name: "impersonationAuditLogs" },
     { get: (t, p) => (p === "_name" ? "impersonationAuditLogs" : { table: "impersonationAuditLogs", column: p }) }
@@ -87,6 +108,15 @@ vi.mock("@groombook/db", () => {
           if (table._name === "appointments") {
             return makeChainable(selectAppointmentRow ? [selectAppointmentRow] : []);
           }
+          if (table._name === "businessSettings") {
+            return makeChainable(selectBusinessSettingsRow ? [selectBusinessSettingsRow] : []);
+          }
+          if (table._name === "conversations") {
+            return makeChainable(selectConversationRow ? [selectConversationRow] : []);
+          }
+          if (table._name === "messages") {
+            return makeChainable(selectMessageRows);
+          }
           return makeChainable([]);
         },
       }),
@@ -113,8 +143,12 @@ vi.mock("@groombook/db", () => {
     impersonationSessions,
     appointments,
     impersonationAuditLogs,
+    businessSettings,
+    conversations,
+    messages,
     eq: vi.fn(),
     and: vi.fn(),
+    desc: vi.fn((col: unknown) => ({ _name: "desc", col })),
   };
 });
 
@@ -431,4 +465,117 @@ describe("POST /portal/appointments/:id/cancel", () => {
     );
     expect(res.status).toBe(404);
   });
+});
+
+// ─── Conversation routes ───────────────────────────────────────────────────────
+
+const BUSINESS_ID = "880e8400-e29b-41d4-a716-446655440008";
+const CONVERSATION_ID = "990e8400-e29b-41d4-a716-446655440009";
+
+const CONVERSATION = {
+  id: CONVERSATION_ID,
+  clientId: CLIENT_ID,
+  businessId: BUSINESS_ID,
+  channel: "sms",
+  status: "active",
+  lastMessageAt: new Date().toISOString(),
+  createdAt: new Date().toISOString(),
+};
+
+const MESSAGE_1 = {
+  id: "m1",
+  conversationId: CONVERSATION_ID,
+  direction: "inbound",
+  body: "Hello",
+  status: "delivered",
+  createdAt: new Date().toISOString(),
+  deliveredAt: new Date().toISOString(),
+};
+
+const MESSAGE_2 = {
+  id: "m2",
+  conversationId: CONVERSATION_ID,
+  direction: "outbound",
+  body: "Hi there!",
+  status: "delivered",
+  createdAt: new Date(Date.now() + 1000).toISOString(),
+  deliveredAt: new Date().toISOString(),
+};
+
+function jsonGet(path: string, headers?: Record<string, string>) {
+  return app.request(path, { method: "GET", headers });
+}
+
+describe("GET /portal/conversation", () => {
+  it("returns 204 when no conversation exists", async () => {
+    selectSessionRow = ACTIVE_SESSION;
+    selectBusinessSettingsRow = { id: BUSINESS_ID };
+    selectConversationRow = null;
+    const res = await jsonGet("/portal/conversation", { "X-Impersonation-Session-Id": SESSION_ID });
+    expect(res.status).toBe(204);
+  });
+
+  it("returns conversation for the authenticated client", async () => {
+    selectSessionRow = ACTIVE_SESSION;
+    selectBusinessSettingsRow = { id: BUSINESS_ID };
+    selectConversationRow = { ...CONVERSATION };
+    const res = await jsonGet("/portal/conversation", { "X-Impersonation-Session-Id": SESSION_ID });
+    expect(res.status).toBe(200);
+    const body = await res.json();
+    expect(body.id).toBe(CONVERSATION_ID);
+    expect(body.channel).toBe("sms");
+    expect(body.status).toBe("active");
+  });
+
+  it("returns 204 when client A's session has no conversation (cross-tenant isolation)", async () => {
+    // Cross-tenant isolation is enforced at the query level via portalClientId scoping.
+    // The mock cannot replicate eq() filtering — this test verifies the query is issued
+    // and no conversation is returned when the mock has no row for the session's clientId.
+    // Real DB: eq() on clientId ensures client A never sees client B's conversation.
+    selectSessionRow = { ...ACTIVE_SESSION, clientId: "client-a" };
+    selectBusinessSettingsRow = { id: BUSINESS_ID };
+    selectConversationRow = null; // client-a has no conversation
+    const res = await jsonGet("/portal/conversation", { "X-Impersonation-Session-Id": SESSION_ID });
+    expect(res.status).toBe(204);
+  });
+});
+
+describe("GET /portal/conversation/messages", () => {
+  it("returns 204 when no conversation exists", async () => {
+    selectSessionRow = ACTIVE_SESSION;
+    selectBusinessSettingsRow = { id: BUSINESS_ID };
+    selectConversationRow = null;
+    const res = await jsonGet("/portal/conversation/messages", { "X-Impersonation-Session-Id": SESSION_ID });
+    expect(res.status).toBe(204);
+  });
+
+  it("returns paginated messages", async () => {
+    selectSessionRow = ACTIVE_SESSION;
+    selectBusinessSettingsRow = { id: BUSINESS_ID };
+    selectConversationRow = { ...CONVERSATION };
+    selectMessageRows = [MESSAGE_2, MESSAGE_1];
+    const res = await jsonGet("/portal/conversation/messages", { "X-Impersonation-Session-Id": SESSION_ID });
+    expect(res.status).toBe(200);
+    const body = await res.json();
+    expect(body.messages).toHaveLength(2);
+    expect(body.messages[0].id).toBe("m2");
+    expect(body.messages[1].id).toBe("m1");
+    expect(body.nextCursor).toBeNull();
+  });
+
+  it("returns messages and nextCursor reflects if more exist", async () => {
+    // Note: the mock does not enforce limit(), so it returns all messages.
+    // nextCursor is null when all messages fit (mock behavior).
+    // Real DB enforces limit and sets nextCursor when messages.length === limit.
+    selectSessionRow = ACTIVE_SESSION;
+    selectBusinessSettingsRow = { id: BUSINESS_ID };
+    selectConversationRow = { ...CONVERSATION };
+    selectMessageRows = [MESSAGE_1, MESSAGE_2];
+    const res = await jsonGet("/portal/conversation/messages?limit=1", { "X-Impersonation-Session-Id": SESSION_ID });
+    expect(res.status).toBe(200);
+    const body = await res.json();
+    expect(body.messages.length).toBeGreaterThan(0);
+    // mock has no limit enforcement, so nextCursor may be null
+    expect(body).toHaveProperty("nextCursor");
+  });
 });

apps/api/src/lib/buffer.ts

@@ -0,0 +1,66 @@
+import { eq } from "@groombook/db";
+import { bufferTimeRules, services, type Db } from "@groombook/db";
+
+export async function resolveBufferMinutes({
+  serviceId,
+  sizeCategory,
+  coatType,
+  db,
+}: {
+  serviceId: string;
+  sizeCategory: string | null;
+  coatType: string | null;
+  db: Db;
+}): Promise<number> {
+  // Query all rules for this service in one DB call
+  const allRules = await db
+    .select()
+    .from(bufferTimeRules)
+    .where(eq(bufferTimeRules.serviceId, serviceId));
+
+  // Priority 1: exact match (serviceId + sizeCategory + coatType all match)
+  const exact = allRules.find(
+    (r) =>
+      r.sizeCategory === sizeCategory &&
+      r.coatType === coatType
+  );
+  if (exact) return exact.bufferMinutes;
+
+  // Priority 2: service + size, null coatType
+  const serviceSize = allRules.find(
+    (r) =>
+      r.sizeCategory === sizeCategory &&
+      r.coatType === null
+  );
+  if (serviceSize) return serviceSize.bufferMinutes;
+
+  // Priority 3: service + coat, null sizeCategory
+  const serviceCoat = allRules.find(
+    (r) =>
+      r.sizeCategory === null &&
+      r.coatType === coatType
+  );
+  if (serviceCoat) return serviceCoat.bufferMinutes;
+
+  // Priority 4: service only (null sizeCategory, null coatType)
+  const serviceOnly = allRules.find(
+    (r) =>
+      r.sizeCategory === null &&
+      r.coatType === null
+  );
+  if (serviceOnly) return serviceOnly.bufferMinutes;
+
+  // Priority 5: fallback to service.defaultBufferMinutes
+  const [service] = await db
+    .select({ defaultBufferMinutes: services.defaultBufferMinutes })
+    .from(services)
+    .where(eq(services.id, serviceId))
+    .limit(1);
+
+  if (service?.defaultBufferMinutes != null) {
+    return service.defaultBufferMinutes;
+  }
+
+  // Priority 6: final fallback to 0
+  return 0;
+}

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({