fix(activity): make the page match the ruled canvas, not just its tokens

backend/__tests__/unit/services/attentionItemService.test.js

@@ -7,7 +7,8 @@ const mockUserFind = jest.fn();
 
 jest.mock('../../../models/AttentionItem', () => ({ updateOne: mockUpdateOne, updateMany: mockUpdateMany, find: mockFind }));
 jest.mock('../../../models/Pod', () => ({ findById: mockPodFindById, find: mockPodFind }));
-jest.mock('../../../models/User', () => ({ find: mockUserFind }));
+const mockUserFindById = jest.fn();
+jest.mock('../../../models/User', () => ({ find: mockUserFind, findById: mockUserFindById }));
 
 const chain = (value) => ({ select: () => ({ lean: async () => value }) });
 const AttentionItemService = require('../../../services/attentionItemService');
@@ -34,6 +35,18 @@ describe('attentionItemService', () => {
     expect(mockUpdateOne.mock.calls[0][1].$setOnInsert).toMatchObject({ kind: 'mention', title: 'Ada mentioned you', messageId: '42' });
   });
 
+  it('names the author from the User row when the message carries only user_id (PG rows)', async () => {
+    mockPodFindById.mockReturnValue(chain({ _id: 'pod-1', name: 'Ship room', createdBy: 'owner', members: [{ userId: 'sam' }] }));
+    mockUserFind.mockReturnValue(chain([
+      { _id: 'owner', username: 'owner', isBot: false },
+      { _id: 'sam', username: 'Sam', isBot: false },
+    ]));
+    mockUserFindById.mockReturnValue(chain({ _id: 'owner', username: 'ada', botMetadata: { displayName: 'Ada Lovelace' } }));
+    await AttentionItemService.recordMentionedUsers({ id: 43, pod_id: 'pod-1', user_id: 'owner', content: '@sam one more' });
+    expect(mockUserFindById).toHaveBeenCalledWith('owner');
+    expect(mockUpdateOne.mock.calls[0][1].$setOnInsert).toMatchObject({ title: 'Ada Lovelace mentioned you', actorName: 'Ada Lovelace' });
+  });
+
   it('does not read pod membership for a message with no mention marker', async () => {
     await AttentionItemService.recordMentionedUsers({
       id: 42, podId: 'pod-1', userId: 'owner', username: 'Ada', content: 'ordinary status update',

backend/models/AttentionItem.ts

@@ -11,6 +11,7 @@ export interface IAttentionItem extends Document {
   title: string;
   detail?: string;
   podName?: string;
+  actorName?: string;
   messageId?: string;
   threadRootId?: string;
   options?: Array<{ label: string; description?: string; recommended?: boolean }>;
@@ -37,6 +38,7 @@ const attentionItemSchema = new Schema<IAttentionItem>({
   title: { type: String, required: true },
   detail: { type: String },
   podName: { type: String },
+  actorName: { type: String },
   messageId: { type: String },
   threadRootId: { type: String },
   options: [optionSchema],

backend/services/attentionItemService.ts

@@ -50,6 +50,7 @@ const recordForRecipients = async (
         title: payload.title,
         detail: payload.detail,
         podName: payload.podName,
+        actorName: payload.actorName,
         messageId: payload.messageId,
         threadRootId: payload.threadRootId,
         options: payload.options,
@@ -60,6 +61,16 @@ const recordForRecipients = async (
   )));
 };
 
+const resolveAuthorName = async (authorId: unknown): Promise<string> => {
+  if (!authorId) return 'Someone';
+  try {
+    const author = await User.findById(authorId).select('username botMetadata').lean();
+    return author?.botMetadata?.displayName || author?.username || 'Someone';
+  } catch {
+    return 'Someone';
+  }
+};
+
 export const recordMentionedUsers = async (message: any, options: MentionOptions = {}): Promise<void> => {
   try {
     const podId = message?.podId || message?.pod_id;
@@ -80,10 +91,12 @@ export const recordMentionedUsers = async (message: any, options: MentionOptions
     });
     if (!recipients.length) return;
     const pod = await Pod.findById(podId).select('name').lean();
-    const authorName = message?.username || message?.userId?.username || 'Someone';
+    // PG rows arrive with user_id only, so 'Someone' was what every live
+    // mention showed. Resolve the author the way chat renders them.
+    const authorName = message?.username || message?.userId?.username || await resolveAuthorName(authorId);
     await recordForRecipients(recipients, {
       podId, kind: 'mention' as Kind, sourceType: 'message' as SourceType, sourceId: sourceKey('message', messageId),
-      title: `${authorName} mentioned you`, detail: compact(content), podName: pod?.name || 'Pod',
+      title: `${authorName} mentioned you`, actorName: authorName, detail: compact(content), podName: pod?.name || 'Pod',
       messageId: String(messageId), threadRootId: String(message?.threadRootId || message?.thread_root_id || messageId),
     });
   } catch (error) {
@@ -101,7 +114,7 @@ export const recordApproval = async (approval: any): Promise<void> => {
     const agentName = approval?.agentMetadata?.agentName;
     await recordForRecipients(recipients, {
       podId, kind: 'approval' as Kind, sourceType: 'approval' as SourceType, sourceId: sourceKey('approval', id),
-      title: agentName ? `${agentName} requests approval` : 'Approval requested', detail: compact(approval?.content, 180), podName: pod?.name || 'Pod',
+      title: agentName ? `${agentName} requests approval` : 'Approval requested', actorName: agentName || undefined, detail: compact(approval?.content, 180), podName: pod?.name || 'Pod',
     });
   } catch (error) {
     console.warn('[attention] approval materialization failed:', (error as Error).message);
@@ -213,7 +226,7 @@ export const getOpenQueue = async (recipientUserId: unknown): Promise<{ items: a
     if (row.kind === 'mention' && mentionCount >= 8) continue;
     if (row.kind === 'mention') mentionCount += 1;
     picked.push({
-      id: String(row.source.id), attentionItemId: String(row._id), kind: row.kind, title: row.title, detail: row.detail || '',
+      id: String(row.source.id), attentionItemId: String(row._id), kind: row.kind, title: row.title, actorName: row.actorName || undefined, detail: row.detail || '',
       podId: String(row.podId), podName: (allowed.get(String(row.podId)) as any)?.name || row.podName || 'Pod',
       messageId: row.messageId, threadRootId: row.threadRootId, options: row.options || [], createdAt: row.createdAt,
     });

frontend/src/i18n/locales/en.json

@@ -47,7 +47,9 @@
       "send": "Send",
       "sendAriaLabel": "Send message",
       "working": "Sending…",
-      "actionFailed": "Your message could not be sent. Try again."
+      "actionFailed": "Your message could not be sent. Try again.",
+      "label": "Tell your agents",
+      "hint": "Posts as you · ⌘↵ to send"
     },
     "reply": {
       "placeholder": "Reply in thread…",
@@ -69,7 +71,8 @@
         "approval": "Approval",
         "decision": "Decision needed",
         "press": "Ready for your press"
-      }
+      },
+      "countLabel": "{{count}} waiting on you"
     },
     "dayZero": {
       "kind": "Get started",

frontend/src/i18n/locales/zh-CN.json

@@ -47,7 +47,9 @@
       "send": "发送",
       "sendAriaLabel": "发送消息",
       "working": "发送中…",
-      "actionFailed": "无法发送消息，请重试。"
+      "actionFailed": "无法发送消息，请重试。",
+      "label": "告诉你的智能体",
+      "hint": "以你的身份发布 · ⌘↵ 发送"
     },
     "reply": {
       "placeholder": "在话题中回复…",
@@ -69,7 +71,8 @@
         "approval": "审批",
         "decision": "待你决策",
         "press": "待你合并"
-      }
+      },
+      "countLabel": "{{count}} 项等你处理"
     },
     "dayZero": {
       "kind": "开始使用",

frontend/src/v2/components/V2ActivityPage.tsx

@@ -28,6 +28,7 @@ interface AgentRecap {
 interface NeedsYouItem {
   id: string;
   attentionItemId?: string;
+  actorName?: string;
   kind: 'mention' | 'approval' | 'decision';
   title: string;
   detail: string;
@@ -334,28 +335,26 @@ const V2ActivityPage: React.FC = () => {
       {!loading && !error && recap && (
         <>
           <section className="v2-activity__compose" aria-labelledby="activity-compose-title">
-            <div className="v2-activity__compose-heading">
-              <div>
-                <div className="v2-activity__eyebrow">{t('activity.compose.eyebrow')}</div>
-                <h2 id="activity-compose-title">{t('activity.compose.title')}</h2>
-              </div>
+            <div className="v2-activity__compose-top">
+              <h2 id="activity-compose-title" className="v2-activity__compose-label">{t('activity.compose.label')}</h2>
               <label className="v2-activity__compose-pod">
                 <span>{t('activity.compose.podLabel')}</span>
                 <select value={composePodId} onChange={(event) => setComposePodId(event.target.value)}>
                   {(recap.pods || []).map((pod) => <option key={pod.id} value={pod.id}>{pod.name}</option>)}
                 </select>
               </label>
             </div>
-            <div className="v2-activity__compose-entry">
-              <textarea
-                aria-label={t('activity.compose.placeholder')}
-                rows={3}
-                placeholder={t('activity.compose.placeholder')}
-                value={composeDraft}
-                onChange={(event) => setComposeDraft(event.target.value)}
-                onKeyDown={(event) => { if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') sendCompose(); }}
-                disabled={composing || !composePodId}
-              />
+            <textarea
+              aria-label={t('activity.compose.placeholder')}
+              rows={2}
+              placeholder={t('activity.compose.placeholder')}
+              value={composeDraft}
+              onChange={(event) => setComposeDraft(event.target.value)}
+              onKeyDown={(event) => { if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') sendCompose(); }}
+              disabled={composing || !composePodId}
+            />
+            <div className="v2-activity__compose-foot">
+              <span className="v2-activity__compose-hint">{t('activity.compose.hint')}</span>
               <button type="button" aria-label={t('activity.compose.sendAriaLabel')} onClick={sendCompose} disabled={composing || !composePodId || !composeDraft.trim()}>
                 {composing ? t('activity.compose.working') : t('activity.compose.send')}
               </button>
@@ -366,10 +365,8 @@ const V2ActivityPage: React.FC = () => {
           <div className="v2-activity__sections">
           <section className="v2-activity__section" aria-labelledby="activity-needs-you">
             <div className="v2-activity__section-heading">
-              <div>
-                <div className="v2-activity__eyebrow">{t('activity.needsYou.eyebrow')}</div>
-                <h2 id="activity-needs-you">{t('activity.needsYou.title')}</h2>
-              </div>
+              <h2 id="activity-needs-you">{t('activity.needsYou.title')}</h2>
+              {!isDayZero && queue.length > 0 && <span className="v2-activity__count" aria-label={t('activity.needsYou.countLabel', { count: queue.length })}>{queue.length}</span>}
               <p>{t('activity.needsYou.description')}</p>
             </div>
             {isDayZero ? (
@@ -425,10 +422,12 @@ const V2ActivityPage: React.FC = () => {
                       {item.kind === 'mention' ? '@' : item.kind === 'approval' ? '!' : '?'}
                     </span>
                     <div className="v2-activity__queue-copy">
-                      <div className="v2-activity__queue-kind">{t(`activity.needsYou.kinds.${item.kind}`)}</div>
-                      <strong>{item.title}</strong>
+                      {item.kind !== 'mention' && <div className="v2-activity__queue-kind">{t(`activity.needsYou.kinds.${item.kind}`)}</div>}
+                      <div className="v2-activity__queue-topline">
+                        <strong>{item.kind === 'mention' && item.actorName ? item.actorName : item.title}</strong>
+                        <span>{item.podName}{item.timestamp ? ` · ${relativeTime(item.timestamp)}` : ''}</span>
+                      </div>
                       {item.detail && <p>{item.detail}</p>}
-                      <span>{item.podName}{item.timestamp ? ` · ${relativeTime(item.timestamp)}` : ''}</span>
                     </div>
                     <div className="v2-activity__queue-actions">
                       {item.kind === 'approval' && (
@@ -461,7 +460,7 @@ const V2ActivityPage: React.FC = () => {
                               {replyingId === item.id ? t('activity.reply.working') : repliedIds.has(item.id) ? t('activity.reply.sent') : t('activity.reply.send')}
                             </button>
                           </div>
-                          <button type="button" className="v2-activity__queue-action--secondary" onClick={() => acknowledgeMention(item)} disabled={acknowledgingMentionId === item.id}>
+                          <button type="button" className="v2-activity__queue-action--thread" onClick={() => acknowledgeMention(item)} disabled={acknowledgingMentionId === item.id}>
                             {acknowledgingMentionId === item.id ? t('activity.mention.working') : t('activity.mention.acknowledge')}
                           </button>
                         </>
@@ -535,10 +534,7 @@ const V2ActivityPage: React.FC = () => {
 
           <section className="v2-activity__section" aria-labelledby="activity-agents">
             <div className="v2-activity__section-heading">
-              <div>
-                <div className="v2-activity__eyebrow">{t('activity.agents.eyebrow')}</div>
-                <h2 id="activity-agents">{t('activity.agents.title')}</h2>
-              </div>
+              <h2 id="activity-agents">{t('activity.agents.title')}</h2>
               <p>{t('activity.agents.description')}</p>
             </div>
             {recap.agents.length === 0 ? (
@@ -576,10 +572,7 @@ const V2ActivityPage: React.FC = () => {
 
           <section className="v2-activity__section" aria-labelledby="activity-board">
             <div className="v2-activity__section-heading">
-              <div>
-                <div className="v2-activity__eyebrow">{t('activity.board.eyebrow')}</div>
-                <h2 id="activity-board">{t('activity.board.title')}</h2>
-              </div>
+              <h2 id="activity-board">{t('activity.board.title')}</h2>
               <p>{t('activity.board.description')}</p>
             </div>
             {recap.board.length === 0 ? (