feat(community): add Discover browse-and-join UI

frontend/src/i18n/locales/en.json

@@ -1261,6 +1261,11 @@
       "private": "Private",
       "community": "Community"
     },
+    "communityViews": {
+      "ariaLabel": "Community views",
+      "joined": "Joined",
+      "discover": "Discover"
+    },
     "groups": {
       "pinned": "Pinned",
       "directMessages": "Direct messages",
@@ -1289,6 +1294,16 @@
     "errors": {
       "createFailed": "Unable to create pod. Check that you are signed in and try again."
     },
+    "discover": {
+      "join": "Join",
+      "joining": "Joining…",
+      "empty": "No community Pods to discover right now.",
+      "joinedEmpty": "You haven't joined any community Pods yet.",
+      "loadFailed": "Couldn't load community Pods. Try again.",
+      "inviteRequired": "This Pod needs an invite link to join.",
+      "rateLimited": "Too many join attempts. Wait a moment and try again.",
+      "joinFailed": "Couldn't join this Pod. Try again."
+    },
     "community": {
       "title": "Join Commonly HQ",
       "copy": "Meet the builders and their agents.",

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

@@ -1257,6 +1257,11 @@
       "private": "私密",
       "community": "社区"
     },
+    "communityViews": {
+      "ariaLabel": "社区视图",
+      "joined": "已加入",
+      "discover": "发现"
+    },
     "groups": {
       "pinned": "已置顶",
       "directMessages": "私信",
@@ -1285,6 +1290,16 @@
     "errors": {
       "createFailed": "无法创建 Pod。请确认你已登录后重试。"
     },
+    "discover": {
+      "join": "加入",
+      "joining": "加入中…",
+      "empty": "暂时没有可加入的社区 Pod。",
+      "joinedEmpty": "你还没有加入社区 Pod。",
+      "loadFailed": "无法加载社区 Pod，请重试。",
+      "inviteRequired": "这个 Pod 需要邀请链接才能加入。",
+      "rateLimited": "加入尝试过于频繁，请稍后再试。",
+      "joinFailed": "无法加入这个 Pod，请重试。"
+    },
     "community": {
       "title": "加入 Commonly HQ",
       "copy": "结识开发者和他们的智能体。",

frontend/src/v2/__tests__/V2PodsSidebar.community.test.tsx

@@ -8,6 +8,7 @@ import V2PodsSidebar from '../components/V2PodsSidebar';
 const COMMUNITY_POD_ID = 'community-pod';
 const mockJoinPod = jest.fn();
 const mockSeedFromExisting = jest.fn();
+const mockRefresh = jest.fn();
 const mockApiGet = jest.fn();
 const mockApi = {
   get: mockApiGet,
@@ -21,7 +22,9 @@ jest.mock('../hooks/useV2Pods', () => ({
     pods: [],
     loading: false,
     error: null,
+    refresh: mockRefresh,
     createPod: jest.fn(),
+    deletePod: jest.fn(),
     patchLastMessage: jest.fn(),
   }),
 }));
@@ -71,7 +74,9 @@ const renderSidebar = (pods) => {
     pods,
     loading: false,
     error: null,
+    refresh: mockRefresh,
     createPod: jest.fn(),
+    deletePod: jest.fn(),
     patchLastMessage: jest.fn(),
   };
   return render(
@@ -91,7 +96,11 @@ describe('V2PodsSidebar Community offer', () => {
 
   beforeEach(async () => {
     jest.clearAllMocks();
+    mockApiGet.mockReset();
+    mockApi.post.mockReset();
     mockApiGet.mockResolvedValue([]);
+    mockApi.post.mockResolvedValue(null);
+    mockRefresh.mockResolvedValue(undefined);
     process.env.REACT_APP_COMMUNITY_POD_ID = COMMUNITY_POD_ID;
     await act(async () => {
       await i18n.changeLanguage('en');
@@ -131,37 +140,136 @@ describe('V2PodsSidebar Community offer', () => {
     expect(screen.queryByRole('button', { name: 'Join HQ' })).not.toBeInTheDocument();
   });
 
-  test('Community shows public discovery and HQ, excludes personal pods, and leaves All personal', async () => {
-    mockApiGet.mockResolvedValue([
-      makePod('public-space', [], { name: 'Open Builders', publicRead: true }),
-      makePod(COMMUNITY_POD_ID, [], { publicRead: true }),
-      makePod('forced-public-dm', [], {
-        name: 'Private agent room',
-        type: 'agent-room',
-        publicRead: true,
-      }),
+  test('splits joined Community pods from discoverable non-members without leaking them into All', async () => {
+    const joinedPod = makePod('joined-space', ['human-1'], {
+      name: 'Joined Builders',
+      publicRead: true,
+    });
+    const hqPod = makePod(COMMUNITY_POD_ID, ['human-1'], { publicRead: true });
+    mockApiGet.mockImplementation((url) => {
+      if (url === '/api/pods?scope=community') {
+        return Promise.resolve([joinedPod, hqPod]);
+      }
+      if (url === '/api/pods?scope=discover') {
+        return Promise.resolve([
+          makePod('public-space', [], {
+            name: 'Open Builders',
+            description: 'Build in public with the community.',
+            publicRead: true,
+          }),
+          makePod('forced-public-dm', [], {
+            name: 'Private agent room',
+            type: 'agent-room',
+            publicRead: true,
+          }),
+        ]);
+      }
+      return Promise.resolve([]);
+    });
+    renderSidebar([
+      makePod('workspace', ['human-1']),
+      joinedPod,
+      hqPod,
     ]);
-    renderSidebar([makePod('workspace', ['human-1'])]);
 
     fireEvent.click(screen.getByRole('button', { name: 'Community' }));
-    expect(await screen.findByText('Open Builders')).toBeInTheDocument();
+    expect(await screen.findByText('Joined Builders')).toBeInTheDocument();
     expect(screen.getByText('Commonly HQ')).toBeInTheDocument();
+    expect(screen.queryByText('Open Builders')).not.toBeInTheDocument();
+    expect(mockApiGet).not.toHaveBeenCalledWith('/api/pods?scope=discover');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Discover' }));
+    expect(await screen.findByText('Open Builders')).toBeInTheDocument();
+    expect(screen.getByText('Build in public with the community.')).toBeInTheDocument();
+    expect(screen.getByText('0 members')).toBeInTheDocument();
     expect(screen.queryByText('Private agent room')).not.toBeInTheDocument();
 
     fireEvent.click(screen.getByRole('button', { name: 'All' }));
     expect(screen.getByText('My Workspace')).toBeInTheDocument();
     expect(screen.queryByText('Open Builders')).not.toBeInTheDocument();
-    expect(screen.queryByText('Commonly HQ')).not.toBeInTheDocument();
-    await waitFor(() => expect(mockApiGet).toHaveBeenCalledWith('/api/pods?scope=community'));
+    await waitFor(() => {
+      expect(mockApiGet).toHaveBeenCalledWith('/api/pods?scope=community');
+      expect(mockApiGet).toHaveBeenCalledWith('/api/pods?scope=discover');
+    });
   });
 
-  test('renders the Community tab from both locale catalogs', async () => {
+  test('joins a discovered pod, moves it to Joined, refreshes memberships, and navigates in', async () => {
+    const discoveredPod = makePod('bug-reports', [], {
+      name: 'Bug Reports',
+      description: 'Help make Commonly better.',
+      publicRead: true,
+    });
+    const joinedPod = makePod('bug-reports', ['human-1'], {
+      name: 'Bug Reports',
+      description: 'Help make Commonly better.',
+      publicRead: true,
+    });
+    mockApiGet.mockImplementation((url) => (
+      url === '/api/pods?scope=discover'
+        ? Promise.resolve([discoveredPod])
+        : Promise.resolve([])
+    ));
+    mockApi.post.mockResolvedValue(joinedPod);
+    renderSidebar([makePod('workspace', ['human-1'])]);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Community' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Discover' }));
+    fireEvent.click(await screen.findByRole('button', { name: 'Join' }));
+
+    await waitFor(() => {
+      expect(mockApi.post).toHaveBeenCalledWith('/api/pods/bug-reports/join');
+      expect(mockRefresh).toHaveBeenCalledTimes(1);
+      expect(screen.getByTestId('current-path')).toHaveTextContent('/v2/pods/bug-reports');
+    });
+    expect(screen.getByRole('button', { name: 'Joined' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByText('Bug Reports')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Join' })).not.toBeInTheDocument();
+  });
+
+  test.each([
+    [403, 'This Pod needs an invite link to join.'],
+    [429, 'Too many join attempts. Wait a moment and try again.'],
+  ])('keeps a discovered pod visible and explains a %s join refusal', async (status, message) => {
+    const discoveredPod = makePod('feature-requests', [], {
+      name: 'Feature Requests',
+      publicRead: true,
+    });
+    mockApiGet.mockImplementation((url) => (
+      url === '/api/pods?scope=discover'
+        ? Promise.resolve([discoveredPod])
+        : Promise.resolve([])
+    ));
+    mockApi.post.mockRejectedValue({ response: { status } });
+    renderSidebar([makePod('workspace', ['human-1'])]);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Community' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Discover' }));
+    fireEvent.click(await screen.findByRole('button', { name: 'Join' }));
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(message);
+    expect(screen.getByText('Feature Requests')).toBeInTheDocument();
+    expect(screen.getByTestId('current-path')).toHaveTextContent('/v2/pods/workspace');
+  });
+
+  test('renders the Community discovery controls from both locale catalogs', async () => {
+    mockApiGet.mockImplementation((url) => (
+      url === '/api/pods?scope=discover'
+        ? Promise.resolve([makePod('public-space', [], { name: 'Open Builders' })])
+        : Promise.resolve([])
+    ));
     renderSidebar([makePod('workspace', ['human-1'])]);
     expect(screen.getByRole('button', { name: 'Community' })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Community' }));
+    expect(screen.getByRole('button', { name: 'Joined' })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Discover' }));
+    expect(await screen.findByRole('button', { name: 'Join' })).toBeInTheDocument();
 
     await act(async () => {
       await i18n.changeLanguage('zh-CN');
     });
     expect(screen.getByRole('button', { name: '社区' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '已加入' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '发现' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '加入' })).toBeInTheDocument();
   });
 });

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

@@ -134,6 +134,18 @@ describe('v2 layout invariants (CSS rule presence)', () => {
     expect(rule).toContain('overflow: visible');
   });
 
+  test('the Community sub-tabs and Discover rows shrink inside the narrow sidebar', () => {
+    // Joined/Discover adds a second segmented row beneath the four main
+    // filters. Equal minmax(0, 1fr) tracks keep both locale labels on one line,
+    // while the Discover card gives its copy column the only shrinkable track.
+    const tabs = ruleBody(v2, '.v2-pods__community-tabs');
+    const row = ruleBody(v2, '.v2-pods__discover-row');
+    expect(tabs).toContain('display: grid');
+    expect(tabs).toContain('repeat(2, minmax(0, 1fr))');
+    expect(tabs).toContain('overflow: hidden');
+    expect(row).toContain('34px minmax(0, 1fr) auto');
+  });
+
   test('starter prompts wrap within the mobile chat pane', () => {
     // At 390px the rail leaves a narrow main pane. Both the row and each chip
     // need explicit shrink/wrap rules or the longest prompt creates horizontal