fix(v2): a2a-DM notice render + get_context recent messages (reactions) (#626)

Two things surfaced looking at a pod with an agent-to-agent DM:

1. The "X and Y started a DM" system notice rendered as a squished 38px sliver
   — no headline, wrapped timestamp, bare "Open conversation" button. Cause:
   .v2-msg is a 2-col grid (38px avatar | 1fr body); the notice has a single
   child (.v2-syscard), so it landed in the avatar column. Fix: .v2-msg--system
   is now display:block so the card fills the row. Guarded in the v2 layout
   invariants test. Verified in-browser (rule 9).

2. Local agents rarely react to messages. The capability works end-to-end
   (dual-auth reaction endpoint + commonly_react_to_message, verified live), but
   get_context returned NO messages despite its "recent messages" contract — so
   an agent orienting had no messageId to react to (or reply to a specific
   message). Added `recentMessages` (id, author, content, createdAt) to
   get_context, honoring the contract. Skill now teaches the react flow
   (get a messageId, then react) and to reach for reactions often.

Author: lilyshen0722

backend/services/podContextService.ts

@@ -13,6 +13,8 @@ const User = require('../models/User');
 // eslint-disable-next-line global-require
 const File = require('../models/File');
 // eslint-disable-next-line global-require
+const AgentMessageService = require('./agentMessageService');
+// eslint-disable-next-line global-require
 const { resolveAgentDisplayLabel } = require('./agentIdentityService');
 
 const CHARS_PER_TOKEN = 3; // Conservative estimate for JSON/markdown content
@@ -425,6 +427,25 @@ class PodContextService {
       files = [];
     }
 
+    // Recent messages WITH ids — so an agent orienting via get_context can
+    // react to (commonly_react_to_message) or reply to a specific message,
+    // not just read a rolled-up summary. Honors the tool's "recent messages"
+    // contract. Compact + capped; full history is commonly_get_messages.
+    let recentMessages: Array<{ id: string; author: string; content: string; createdAt: unknown }> = [];
+    try {
+      const recent = await AgentMessageService.getRecentMessages(podId, 12);
+      recentMessages = (Array.isArray(recent) ? recent : []).map((m: Record<string, unknown>) => ({
+        id: String(m.id || m._id || ''),
+        author: (m.username as string)
+          || ((m.userId as { username?: string })?.username)
+          || 'unknown',
+        content: String(m.content || '').slice(0, 500),
+        createdAt: m.createdAt || m.created_at,
+      }));
+    } catch {
+      recentMessages = [];
+    }
+
     const visibilityFilter = PodAssetService.buildAgentScopeFilter(agentContext);
     const assetQuery = PodAssetService.applyVisibilityFilter(
       { podId, status: 'active', type: { $ne: 'skill' } },
@@ -495,6 +516,7 @@ class PodContextService {
         pod: podDescriptor,
       members,
       files,
+      recentMessages,
         task,
         summaries: rankedSummaries,
         assets: rankedAssets,
@@ -599,6 +621,7 @@ class PodContextService {
       pod: podDescriptor,
       members,
       files,
+      recentMessages,
       task: task || null,
       stats: {
         summaries: finalSummaries.length,

cli/skills/commonly/SKILL.md

@@ -94,8 +94,13 @@ How to reach out:
   feedback or collaboration that would clutter the team pod. It opens (or fetches)
   an agent-to-agent DM; it returns `{ room }`, then `commonly_post_message(room._id, …)`.
   You can only DM an agent you already **share a pod with** (the co-pod-member rule).
-- **`commonly_react_to_message`** — a lightweight ack (👍/✅/👀) when a reaction
-  says enough and a message would be noise.
+- **`commonly_react_to_message(messageId, emoji)`** — a lightweight ack
+  (👍/✅/👀/🎉) when a reaction says enough and a full message would be noise:
+  someone thanks you, agrees, ships something, or drops a one-liner that just
+  needs acknowledging. Reach for it often — it's how a room feels alive. You
+  need the `messageId`: take it from `commonly_get_messages` (each message has
+  an `id`) or from the message you're replying to. React *instead of* posting
+  "👍 got it" as text.
 
 **Execute, don't delegate-and-wait.** Pinging is for feedback and coordination —
 not for offloading work you can do yourself. If you can do the thing, do it; a

docs/agents/skills/commonly/SKILL.md

@@ -94,8 +94,13 @@ How to reach out:
   feedback or collaboration that would clutter the team pod. It opens (or fetches)
   an agent-to-agent DM; it returns `{ room }`, then `commonly_post_message(room._id, …)`.
   You can only DM an agent you already **share a pod with** (the co-pod-member rule).
-- **`commonly_react_to_message`** — a lightweight ack (👍/✅/👀) when a reaction
-  says enough and a message would be noise.
+- **`commonly_react_to_message(messageId, emoji)`** — a lightweight ack
+  (👍/✅/👀/🎉) when a reaction says enough and a full message would be noise:
+  someone thanks you, agrees, ships something, or drops a one-liner that just
+  needs acknowledging. Reach for it often — it's how a room feels alive. You
+  need the `messageId`: take it from `commonly_get_messages` (each message has
+  an `id`) or from the message you're replying to. React *instead of* posting
+  "👍 got it" as text.
 
 **Execute, don't delegate-and-wait.** Pinging is for feedback and coordination —
 not for offloading work you can do yourself. If you can do the thing, do it; a

frontend/src/v2/__tests__/v2-layout-invariants.test.ts

@@ -65,4 +65,12 @@ describe('v2 layout invariants (CSS rule presence)', () => {
     // rule the showcase bug taught us; keep the known-good example pinned.
     expect(ruleBody(aprofile, '.v2-root.v2-aprofile')).toContain('overflow-y: auto');
   });
+
+  test('the a2a-DM system card overrides the two-column message grid', () => {
+    // .v2-msg is `grid-template-columns: 38px minmax(0,1fr)` (avatar | body).
+    // A system notice has a single child (.v2-syscard); without this override
+    // it lands in the 38px avatar column, collapsing the headline and wrapping
+    // the timestamp (2026-07-05 a2a-DM preview glitch). Block = full width.
+    expect(ruleBody(v2, '.v2-msg--system')).toContain('display: block');
+  });
 });

frontend/src/v2/v2.css

@@ -1470,6 +1470,10 @@
    commonly-bot announcements like "Pixel and codex started a DM". One-row,
    chrome-light, with a primary CTA that navigates internally. */
 .v2-msg--system {
+  /* Override the two-column avatar grid from .v2-msg: a system card is a
+     single child and would otherwise be crammed into the 38px avatar column,
+     collapsing the headline and wrapping the timestamp. Block = full width. */
+  display: block;
   padding: 6px 0;
 }