feat(v2): Invite in the pod header for members (TASK-702)

frontend/src/i18n/locales/en.json

@@ -668,7 +668,8 @@
       "agents_one": "{{count}} agent",
       "agents_other": "{{count}} agents",
       "boardOpen": "board {{count}} open",
-      "backToPods": "Back to pods"
+      "backToPods": "Back to pods",
+      "invite": "Invite"
     },
     "team": {
       "view": "View pod team",

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

@@ -667,7 +667,8 @@
       "agents_one": "{{count}}个智能体",
       "agents_other": "{{count}}个智能体",
       "boardOpen": "看板{{count}}项待办",
-      "backToPods": "返回 Pod 列表"
+      "backToPods": "返回 Pod 列表",
+      "invite": "邀请"
     },
     "team": {
       "view": "查看 Pod 团队",

frontend/src/v2/__tests__/V2ThreadHeaderInvite.test.tsx

@@ -0,0 +1,90 @@
+// @ts-nocheck
+// TASK-702: the pod header carries an Invite for members, opening the same
+// invite modal the inspector does. Hidden for a non-member and on 1:1 pods.
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import V2Thread from '../components/V2Thread';
+import { AuthContext } from '../../context/AuthContext';
+
+jest.mock('../../context/SocketContext', () => ({
+  useSocket: () => ({ socket: null, connected: false }),
+}));
+
+jest.mock('axios', () => {
+  const mock = {
+    get: jest.fn(() => Promise.resolve({ data: {} })),
+    post: jest.fn(() => Promise.resolve({ data: {} })),
+    patch: jest.fn(),
+    delete: jest.fn(),
+    defaults: { baseURL: '', headers: { common: {} } },
+    interceptors: {
+      request: { use: jest.fn(), eject: jest.fn() },
+      response: { use: jest.fn(), eject: jest.fn() },
+    },
+  };
+  return { __esModule: true, default: mock, ...mock };
+});
+
+beforeAll(() => {
+  Element.prototype.scrollIntoView = jest.fn();
+});
+
+const authValue = {
+  currentUser: { _id: 'u1', username: 'alice' },
+  user: { _id: 'u1', username: 'alice' },
+  token: 't',
+  loading: false,
+  error: null,
+  isAuthenticated: true,
+  register: jest.fn(),
+  login: jest.fn(),
+  logout: jest.fn(),
+  updateProfile: jest.fn(),
+};
+
+const renderThread = ({ podType = 'chat', member = true, onOpenInvite = jest.fn() } = {}) => {
+  const detail = {
+    pod: { _id: 'pod-1', name: 'Launch Room', type: podType },
+    members: member
+      ? [{ _id: 'u1', username: 'alice', isBot: false }, { _id: 'u2', username: 'bob', isBot: false }]
+      : [{ _id: 'u2', username: 'bob', isBot: false }],
+    messages: [],
+    agents: [],
+    sendMessage: jest.fn(),
+    loading: false,
+    error: null,
+    refresh: jest.fn(),
+  };
+  render(
+    <AuthContext.Provider value={authValue}>
+      <MemoryRouter>
+        <V2Thread detail={detail} onOpenInvite={onOpenInvite} />
+      </MemoryRouter>
+    </AuthContext.Provider>,
+  );
+  return onOpenInvite;
+};
+
+describe('V2Thread header Invite', () => {
+  test('a member of a team pod sees Invite, and it opens the people tab', () => {
+    const onOpenInvite = renderThread();
+    fireEvent.click(screen.getByTestId('pod-header-invite'));
+    expect(onOpenInvite).toHaveBeenCalledWith('people');
+  });
+
+  test('a non-member does not see Invite', () => {
+    renderThread({ member: false });
+    expect(screen.queryByTestId('pod-header-invite')).not.toBeInTheDocument();
+  });
+
+  test.each(['agent-room', 'agent-dm'])('a %s pod does not show Invite', (podType) => {
+    renderThread({ podType });
+    expect(screen.queryByTestId('pod-header-invite')).not.toBeInTheDocument();
+  });
+
+  test('no invite handler, no Invite', () => {
+    renderThread({ onOpenInvite: null });
+    expect(screen.queryByTestId('pod-header-invite')).not.toBeInTheDocument();
+  });
+});

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

@@ -5262,4 +5262,12 @@ describe('pod board column scroll (TASK-698)', () => {
     expect(focus).toContain('max-height: min(35vh, 260px)');
     expect(focus).toContain('overflow-y: auto');
   });
+
+  // TASK-702: on a phone the header Invite is glyph-only, or its label takes
+  // the pod name's width and the title truncates to a few characters.
+  test('the header Invite hides its label on a phone, keeping it for screen readers', () => {
+    const block = mediaBlockContaining(read('../v2.css'), '.v2-pod-header__invite span');
+    expect(block).toMatch(/\.v2-pod-header__invite span\s*\{[^}]*clip-path:\s*inset\(50%\)/);
+    expect(block).toMatch(/\.v2-pod-header__invite\s*\{[^}]*width:\s*28px/);
+  });
 });

frontend/src/v2/components/V2Thread.tsx

@@ -1943,6 +1943,21 @@ const V2Thread: React.FC<V2ThreadProps> = ({ detail, firstRunVisible = false, in
                 </React.Fragment>
               ))}
             </span>
+            {/* TASK-702: the invite lived only in the inspector, where nobody
+                looked. Members see it here; onOpenInvite is already absent
+                on the 1:1 pod types. */}
+            {onOpenInvite && isPodMember && !isAgentDm && !isAgentRoom && (
+              <button
+                type="button"
+                className="v2-pod-header__invite"
+                onClick={() => onOpenInvite(PEOPLE_INVITE_TAB)}
+                title={t('podChat.header.invite')}
+                data-testid="pod-header-invite"
+              >
+                <ShellGlyph name="people" size={14} />
+                <span>{t('podChat.header.invite')}</span>
+              </button>
+            )}
             {onToggleInspector && (
               <button
                 type="button"

frontend/src/v2/v2.css

@@ -11794,6 +11794,52 @@ body.modern-ui.v2-canvas {
 .v2-root button.v2-thread__inspector-toggle:hover,
 .v2-root button.v2-thread__inspector-toggle--active { background: var(--v2-surface-hover); color: var(--v2-text-primary); }
 
+/* TASK-702: the header Invite. Same height and frame as the inspector
+   toggle beside it, with a label so it reads as an action, not decoration. */
+.v2-root button.v2-pod-header__invite {
+  display: inline-flex;
+  height: 28px;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  border: 1px solid var(--v2-border);
+  border-radius: 4px;
+  background: var(--v2-surface);
+  color: var(--v2-text-primary);
+  font: inherit;
+  font-size: 13px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.v2-root button.v2-pod-header__invite:hover { background: var(--v2-surface-hover); }
+
+/* On a phone the label would take the pod name's width, so the button keeps
+   only its glyph, square like the inspector toggle. The label stays in the
+   accessibility tree as the button's name. */
+@media (max-width: 760px) {
+  .v2-root button.v2-pod-header__invite {
+    width: 28px;
+    flex: 0 0 28px;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .v2-root button.v2-pod-header__invite span {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
 .v2-thread .v2-msg {
   grid-template-columns: 28px minmax(0, 1fr);
   gap: 8px;