feat(glass-office): Directory / Front Desk as the fifth Basement room

The stable directory room now lands on Front Desk, the one rehomed
People & Routing authority, beside direct Agent Mail and the
temporarily retained File locks.

- First hostile MailPage component suite (24 tests, red-first): direct
  Mail and File-lock paths, exact 8/6 pagination boundaries with
  shrink/shrink/regrow, mobile list/detail, filters/clear, create/ack/
  download/compose/send/summarize, lease create/release, empty states,
  and honest failure retention.
- Replace React-state-only submit guards with ref-based synchronous
  locks (send, thread create, lease create/release) and clamp stored
  pagination pages at render so a shrink can never resurrect a stale
  later page.
- Extract People & Routing verbatim into one shared
  usePeopleRoutingController (mounted once in App) plus
  PeopleRoutingSection; Directory / Front Desk is its authoritative
  home with a ready-surface-only pin. Team's People & Routing tab
  becomes an exact stable-room handoff and its remove-agent cleanup
  delegates to the shared controller, so no second editable truth or
  fetch loop exists.
- Mail landing seam: entering directory selects Front Desk; internal
  choices persist across unrelated rerenders; Messages and File locks
  stay one tap away and are never labeled Directory data.
- Register the hidden directory office block with unit proofs for the
  tenth-shortcut full-canvas byte immutability (every earlier shortcut
  genuinely present, 24/24 cells) and the freed-canvas repeat.
- Browser proof (p5-directory-slice, @core): room identity, live
  routing save, both paginations with live shrink/regrow, config-only
  pinning with zero sensitive mutations recorded, office door
  disable/restore/reload with exact restored-door execution, DF
  mark/badge non-overlap, and inner geometry at desktop and 390px,
  over new stateful mock-gateway agent-mail fixtures.
- Fix two real presentation defects the proof exposed: the routing
  card's two-column field grid overflowed its surface at 390px, and
  thread rows painted underneath the sidebar pagination (the list is
  now a bounded scroll region).

Validation: typecheck, lint, unit 545/545, build, core e2e 41/41
(including updated p4-staff handoff and the p5-models/p5-breakers
anchors), ExecAss validator PASS, git diff --check clean.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: EmergentKnowledgeGroup

apps/mission-control/e2e/mockGateway.mjs

@@ -846,6 +846,84 @@ const runtimeConfig = {
 };
 const runtimeSecrets = {};
 
+let nextAgentMailCounter = 1;
+
+function createAgentMailThreadFixture({ kind, subject, unreadCount, ageMs }) {
+  const id = nextAgentMailCounter++;
+  const at = Date.now() - ageMs;
+  return {
+    thread_id: `mail-thread-${id}`,
+    kind,
+    subject,
+    created_by_principal: "agent-root",
+    participant_count: 2,
+    message_count: 1,
+    latest_message_at: at,
+    latest_message_preview: `Latest note for ${subject}`,
+    latest_sender_principal: "agent-root",
+    unread_count: unreadCount,
+    created_at: at - 60_000,
+    updated_at: at,
+  };
+}
+
+// Nine direct threads make the exact eight-item Mail pagination provable in a
+// real browser; the first thread carries unread mail so the Directory room's
+// nav badge is genuinely nonzero beside its DF mark.
+const agentMailThreads = Array.from({ length: 9 }, (_, index) =>
+  createAgentMailThreadFixture({
+    kind: "direct",
+    subject: `Front desk handoff ${index + 1}`,
+    unreadCount: index === 0 ? 3 : 0,
+    ageMs: (index + 1) * 120_000,
+  }),
+);
+
+const agentMailMessagesByThread = new Map(
+  agentMailThreads.map((thread) => [thread.thread_id, []]),
+);
+agentMailMessagesByThread.set(agentMailThreads[0].thread_id, [
+  {
+    message_id: `mail-msg-${nextAgentMailCounter++}`,
+    thread_id: agentMailThreads[0].thread_id,
+    sender_principal: "agent-root",
+    sender_kind: "agent",
+    body_text: "Front desk: the visitor log is ready for review.",
+    metadata_json: null,
+    created_at: Date.now() - 300_000,
+    recipients: [
+      {
+        recipient_principal: "default",
+        delivered_at: Date.now() - 300_000,
+        acked_at: null,
+      },
+      {
+        recipient_principal: "agent-root",
+        delivered_at: Date.now() - 300_000,
+        acked_at: Date.now() - 240_000,
+      },
+    ],
+    attachments: [],
+  },
+]);
+
+// Seven active leases make the exact six-item File-lock pagination provable,
+// and releasing one proves the live shrink path against the stored page.
+const agentMailLeases = Array.from({ length: 7 }, (_, index) => {
+  const id = nextAgentMailCounter++;
+  return {
+    lease_id: `mail-lease-${id}`,
+    holder_principal: "agent-root",
+    glob_pattern: `src/area-${index + 1}/**`,
+    exclusive: index % 2 === 0,
+    ttl_ms: 900_000,
+    note: null,
+    created_at: Date.now() - 60_000,
+    expires_at: Date.now() + 840_000,
+    released_at: null,
+  };
+});
+
 const authProfiles = [];
 const connectorCatalog = [
   {
@@ -947,6 +1025,14 @@ const seedState = {
   connectorAssignments: cloneSeed(connectorAssignments),
   connectorAuthBindings: cloneSeed(connectorAuthBindings),
   connectorInteractions: cloneSeed(connectorInteractions),
+  agentMailThreads: cloneSeed(agentMailThreads),
+  agentMailMessages: Object.fromEntries(
+    Array.from(agentMailMessagesByThread.entries(), ([threadId, messages]) => [
+      threadId,
+      cloneSeed(messages),
+    ]),
+  ),
+  agentMailLeases: cloneSeed(agentMailLeases),
 };
 
 
@@ -1340,6 +1426,13 @@ function resetMockState() {
   replaceArray(connectorAssignments, seedState.connectorAssignments);
   replaceArray(connectorAuthBindings, seedState.connectorAuthBindings);
   replaceArray(connectorInteractions, seedState.connectorInteractions);
+  replaceArray(agentMailThreads, seedState.agentMailThreads);
+  agentMailMessagesByThread.clear();
+  for (const [threadId, messages] of Object.entries(seedState.agentMailMessages)) {
+    agentMailMessagesByThread.set(threadId, cloneSeed(messages));
+  }
+  replaceArray(agentMailLeases, seedState.agentMailLeases);
+  nextAgentMailCounter = 1000;
   providerOrder.clear();
   nextAuthProfileCounter = 1;
   nextEventCounter = 1;
@@ -5245,19 +5338,223 @@ async function routeRequest(req, res) {
   }
 
   if (req.method === "GET" && requestUrl.pathname === "/api/v1/agent-mail/threads") {
+    const kind = requestUrl.searchParams.get("kind");
+    const search = (requestUrl.searchParams.get("search") ?? "").trim().toLowerCase();
+    const items = agentMailThreads
+      .filter((thread) => (kind ? thread.kind === kind : true))
+      .filter((thread) =>
+        search ? thread.subject.toLowerCase().includes(search) : true,
+      );
     sendJson(res, 200, {
-      items: [],
+      items,
     });
     return;
   }
 
+  if (req.method === "POST" && requestUrl.pathname === "/api/v1/agent-mail/threads") {
+    const payload = await readJson(req);
+    const thread = createAgentMailThreadFixture({
+      kind: typeof payload.kind === "string" ? payload.kind : "direct",
+      subject: typeof payload.subject === "string" ? payload.subject : "Untitled",
+      unreadCount: 0,
+      ageMs: 0,
+    });
+    agentMailThreads.unshift(thread);
+    agentMailMessagesByThread.set(thread.thread_id, []);
+    sendJson(res, 200, {
+      thread,
+    });
+    return;
+  }
+
+  {
+    const threadDetailMatch = requestUrl.pathname.match(
+      /^\/api\/v1\/agent-mail\/threads\/([^/]+)$/,
+    );
+    if (req.method === "GET" && threadDetailMatch) {
+      const thread = agentMailThreads.find(
+        (item) => item.thread_id === decodeURIComponent(threadDetailMatch[1]),
+      );
+      if (!thread) {
+        sendJson(res, 404, { error: "thread not found" });
+        return;
+      }
+      sendJson(res, 200, {
+        thread,
+        participants: [
+          {
+            principal_id: thread.created_by_principal,
+            role: "owner",
+            joined_at: thread.created_at,
+            last_read_at: null,
+            muted: false,
+          },
+        ],
+      });
+      return;
+    }
+  }
+
+  {
+    const threadMessagesMatch = requestUrl.pathname.match(
+      /^\/api\/v1\/agent-mail\/threads\/([^/]+)\/messages$/,
+    );
+    if (threadMessagesMatch) {
+      const threadId = decodeURIComponent(threadMessagesMatch[1]);
+      const thread = agentMailThreads.find((item) => item.thread_id === threadId);
+      if (!thread) {
+        sendJson(res, 404, { error: "thread not found" });
+        return;
+      }
+      const messages = agentMailMessagesByThread.get(threadId) ?? [];
+      if (req.method === "GET") {
+        sendJson(res, 200, {
+          items: messages,
+        });
+        return;
+      }
+      if (req.method === "POST") {
+        const payload = await readJson(req);
+        const bodyText =
+          typeof payload.body_text === "string" ? payload.body_text : "";
+        const message = {
+          message_id: `mail-msg-${nextAgentMailCounter++}`,
+          thread_id: threadId,
+          sender_principal:
+            typeof payload.sender_principal === "string" &&
+            payload.sender_principal.trim()
+              ? payload.sender_principal
+              : "agent-root",
+          sender_kind:
+            typeof payload.sender_kind === "string" ? payload.sender_kind : "agent",
+          body_text: bodyText,
+          metadata_json: null,
+          created_at: Date.now(),
+          recipients: (Array.isArray(payload.recipients) &&
+          payload.recipients.length > 0
+            ? payload.recipients
+            : ["default"]
+          ).map((principal) => ({
+            recipient_principal: String(principal),
+            delivered_at: Date.now(),
+            acked_at: null,
+          })),
+          attachments: [],
+        };
+        messages.push(message);
+        agentMailMessagesByThread.set(threadId, messages);
+        thread.message_count = messages.length;
+        thread.latest_message_at = message.created_at;
+        thread.latest_message_preview = bodyText.slice(0, 80);
+        thread.latest_sender_principal = message.sender_principal;
+        thread.updated_at = message.created_at;
+        sendJson(res, 200, {
+          message,
+        });
+        return;
+      }
+    }
+  }
+
+  {
+    const ackMatch = requestUrl.pathname.match(
+      /^\/api\/v1\/agent-mail\/messages\/([^/]+)\/ack$/,
+    );
+    if (req.method === "POST" && ackMatch) {
+      const messageId = decodeURIComponent(ackMatch[1]);
+      const payload = await readJson(req);
+      const wantedPrincipal =
+        typeof payload.recipient_principal === "string" &&
+        payload.recipient_principal.trim()
+          ? payload.recipient_principal.trim()
+          : null;
+      for (const messages of agentMailMessagesByThread.values()) {
+        const message = messages.find((item) => item.message_id === messageId);
+        if (!message) continue;
+        const recipient = wantedPrincipal
+          ? message.recipients.find(
+              (item) => item.recipient_principal === wantedPrincipal,
+            )
+          : message.recipients.find((item) => item.acked_at === null);
+        if (!recipient) {
+          sendJson(res, 404, { error: "recipient not found" });
+          return;
+        }
+        recipient.acked_at = Date.now();
+        const thread = agentMailThreads.find(
+          (item) => item.thread_id === message.thread_id,
+        );
+        if (thread && thread.unread_count > 0) {
+          thread.unread_count -= 1;
+        }
+        sendJson(res, 200, {
+          message_id: messageId,
+          recipient_principal: recipient.recipient_principal,
+          acked_at: recipient.acked_at,
+        });
+        return;
+      }
+      sendJson(res, 404, { error: "message not found" });
+      return;
+    }
+  }
+
   if (req.method === "GET" && requestUrl.pathname === "/api/v1/agent-mail/leases") {
+    const includeReleased =
+      requestUrl.searchParams.get("include_released") === "true";
     sendJson(res, 200, {
-      items: [],
+      items: agentMailLeases.filter((lease) =>
+        includeReleased ? true : lease.released_at === null,
+      ),
+    });
+    return;
+  }
+
+  if (req.method === "POST" && requestUrl.pathname === "/api/v1/agent-mail/leases") {
+    const payload = await readJson(req);
+    const ttlMs = Number.isFinite(payload.ttl_ms) ? Number(payload.ttl_ms) : 900000;
+    const lease = {
+      lease_id: `mail-lease-${nextAgentMailCounter++}`,
+      holder_principal:
+        typeof payload.holder_principal === "string" && payload.holder_principal.trim()
+          ? payload.holder_principal
+          : "agent-root",
+      glob_pattern:
+        typeof payload.glob_pattern === "string" ? payload.glob_pattern : "**/*",
+      exclusive: Boolean(payload.exclusive),
+      ttl_ms: ttlMs,
+      note: typeof payload.note === "string" ? payload.note : null,
+      created_at: Date.now(),
+      expires_at: Date.now() + ttlMs,
+      released_at: null,
+    };
+    agentMailLeases.push(lease);
+    sendJson(res, 200, {
+      lease,
     });
     return;
   }
 
+  {
+    const releaseMatch = requestUrl.pathname.match(
+      /^\/api\/v1\/agent-mail\/leases\/([^/]+)\/release$/,
+    );
+    if (req.method === "POST" && releaseMatch) {
+      const lease = agentMailLeases.find(
+        (item) => item.lease_id === decodeURIComponent(releaseMatch[1]),
+      );
+      if (!lease) {
+        sendJson(res, 404, { error: "lease not found" });
+        return;
+      }
+      lease.released_at = Date.now();
+      sendJson(res, 200, {
+        lease,
+      });
+      return;
+    }
+  }
+
   if (req.method === "POST" && requestUrl.pathname === "/api/v1/e2e/ws-event") {
     const payload = await readJson(req);
     const event = broadcastWsEvent({

apps/mission-control/e2e/p4-staff-slice.spec.ts

@@ -72,11 +72,24 @@ test("@core @p4-staff staff parity, pin-to-office, and the office shortcut hold
   await page.keyboard.press("Escape");
   await expect(roleCard).toHaveCount(0);
 
+  // People & Routing is now an exact stable-room handoff to Basement ·
+  // Directory / Front Desk. The affordance stays reachable; the authoritative
+  // editable surface lives in the Directory room and lights its lamp.
   await teamPage.getByRole("button", { name: "People & Routing" }).click();
-  await expect(teamPage).toContainText("People And Routing");
-  await expect(teamPage).toContainText("local-operator");
-  await teamPage.getByRole("button", { name: "Routing Setup" }).click();
-  await expect(teamPage).toContainText("Humans currently active in routing.");
+  await expect(activeRooms).toHaveCount(1);
+  await expect(activeRooms).toHaveAttribute(
+    "title",
+    "BF · Directory / Front Desk",
+  );
+  const mailPage = page.getByTestId("mail-page");
+  await expect(mailPage).toContainText("People And Routing");
+  await expect(mailPage).toContainText("local-operator");
+  await mailPage.getByRole("button", { name: "Routing Setup" }).click();
+  await expect(mailPage).toContainText("Humans currently active in routing.");
+
+  // Returning to the Staff room resumes the Team parity checks.
+  await page.locator('button[title="2F · Staff Directory"]').click();
+  await expect(activeRooms).toHaveAttribute("title", "2F · Staff Directory");
 
   await teamPage.getByRole("button", { name: "Presets", exact: true }).click();
   await expect(teamPage).toContainText("Bootstrap Presets");