{initialTab}
: null;
});
jest.mock('../components/V2FirstRunHero', () => () => null);
-jest.mock('../components/V2PodChat', () => function MockV2PodChat({ onOpenInvite }) {
+jest.mock('../components/V2Thread', () => function MockV2Thread({ onOpenInvite }) {
return (
{onOpenInvite && (
diff --git a/frontend/src/v2/__tests__/V2LayoutSelection.test.tsx b/frontend/src/v2/__tests__/V2LayoutSelection.test.tsx
index b4a3a9670b..52ca5fb54d 100644
--- a/frontend/src/v2/__tests__/V2LayoutSelection.test.tsx
+++ b/frontend/src/v2/__tests__/V2LayoutSelection.test.tsx
@@ -1,6 +1,6 @@
/* eslint-disable react/display-name */
import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import {
MemoryRouter, Route, Routes, useLocation,
} from 'react-router-dom';
@@ -38,8 +38,10 @@ jest.mock('../../context/AuthContext', () => ({
jest.mock('../components/V2NavRail', () => () => null);
jest.mock('../components/V2PodsSidebar', () => () => null);
-jest.mock('../components/V2PodChat', () => () => null);
-jest.mock('../components/V2PodInspector', () => () => null);
+jest.mock('../components/V2Thread', () => ({ onToggleInspector }: { onToggleInspector?: () => void }) => (
+
+));
+jest.mock('../components/V2Inspector', () => () => );
jest.mock('../components/V2InviteModal', () => () => null);
jest.mock('../components/V2FirstRunHero', () => () => null);
@@ -71,6 +73,8 @@ const newerWorkspacePod: V2Pod = {
createdAt: '2026-07-22T00:00:00.000Z',
};
+const originalMatchMedia = window.matchMedia;
+
const renderAutoLayout = () => render(
@@ -89,6 +93,38 @@ describe('V2Layout default pod selection', () => {
afterEach(() => {
localStorage.clear();
+ Object.defineProperty(window, 'matchMedia', {
+ configurable: true,
+ writable: true,
+ value: originalMatchMedia,
+ });
+ });
+
+ test('a phone starts with its inspector sheet closed even when desktop left it open', () => {
+ const phoneViewport = {
+ matches: true,
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ };
+ Object.defineProperty(window, 'matchMedia', {
+ configurable: true,
+ writable: true,
+ value: jest.fn(() => phoneViewport),
+ });
+ localStorage.setItem('v2.inspectorCollapsed', '0');
+
+ render(
+
+
+
+ ,
+ );
+
+ expect(screen.queryByTestId('workspace-inspector')).not.toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: 'toggle inspector' }));
+ expect(screen.getByTestId('workspace-inspector')).toBeInTheDocument();
+ expect(phoneViewport.addEventListener).toHaveBeenCalledWith('change', expect.any(Function));
});
test('lands a new user in their oldest own workspace instead of auto-joined HQ', async () => {
diff --git a/frontend/src/v2/__tests__/V2MessageBubble.test.tsx b/frontend/src/v2/__tests__/V2MessageRow.test.tsx
similarity index 94%
rename from frontend/src/v2/__tests__/V2MessageBubble.test.tsx
rename to frontend/src/v2/__tests__/V2MessageRow.test.tsx
index 0c2040a660..4135256fed 100644
--- a/frontend/src/v2/__tests__/V2MessageBubble.test.tsx
+++ b/frontend/src/v2/__tests__/V2MessageRow.test.tsx
@@ -1,13 +1,13 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
-import V2MessageBubble from '../components/V2MessageBubble';
+import V2MessageRow from '../components/V2MessageRow';
jest.mock('../../context/AuthContext', () => ({
useAuth: () => ({ currentUser: { username: 'viewer' } }),
}));
-describe('V2MessageBubble', () => {
+describe('V2MessageRow', () => {
const previousApiUrl = process.env.REACT_APP_API_URL;
afterEach(() => {
@@ -19,7 +19,7 @@ describe('V2MessageBubble', () => {
render(
- {
it('renders no reactions row when a message has no reactions — the trigger lives in the cluster', () => {
render(
- {
it('keeps the reactions row in flow when chips exist', () => {
render(
- {
it('marks a system card with its action state', () => {
render(
- () => );
+jest.mock('../components/V2Avatar', () => {
+ const MockAvatar = () => ;
+ MockAvatar.displayName = 'MockAvatar';
+ return MockAvatar;
+});
jest.mock('../../context/AuthContext', () => ({
useAuth: () => ({ currentUser: { _id: 'u1', username: 'me' }, token: 't' }),
}));
@@ -33,7 +37,7 @@ const msg = (replyToId, replyAuthor) => ({
});
const show = (props) => render(
-
- ,
);
expect(screen.getByText(/the quoted text/)).toBeInTheDocument();
@@ -64,7 +68,7 @@ describe('the quote is hidden only when the rail already supplies its context',
test('no quote at all is still no quote', () => {
render(
- ,
);
expect(screen.queryByText(/the quoted text/)).not.toBeInTheDocument();
@@ -75,7 +79,7 @@ describe('the quote is hidden only when the rail already supplies its context',
// the view. An === on mixed types would silently never suppress.
render(
- ,
);
expect(screen.queryByText(/the quoted text/)).not.toBeInTheDocument();
diff --git a/frontend/src/v2/__tests__/V2MobileTabs.test.tsx b/frontend/src/v2/__tests__/V2MobileTabs.test.tsx
new file mode 100644
index 0000000000..edf7841aa9
--- /dev/null
+++ b/frontend/src/v2/__tests__/V2MobileTabs.test.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+import V2MobileTabs from '../components/V2MobileTabs';
+
+const Location = () => ;
+
+describe('V2MobileTabs', () => {
+ test('keeps chat, board, needs-you and settings reachable from the phone shell', () => {
+ const openInspector = jest.fn();
+ render(
+
+ ,
+ );
+
+ expect(screen.getByText('2')).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: 'Board' }));
+ expect(screen.getByTestId('location')).toHaveTextContent('/v2/pods/pod-1/board');
+ fireEvent.click(screen.getByRole('button', { name: 'Needs you' }));
+ expect(openInspector).toHaveBeenCalledTimes(1);
+ fireEvent.click(screen.getByRole('button', { name: 'Settings' }));
+ expect(screen.getByTestId('location')).toHaveTextContent('/v2/settings');
+ });
+});
diff --git a/frontend/src/v2/__tests__/V2PodInspectorAgentRoom.test.tsx b/frontend/src/v2/__tests__/V2PodInspectorAgentRoom.test.tsx
deleted file mode 100644
index 31370e0e94..0000000000
--- a/frontend/src/v2/__tests__/V2PodInspectorAgentRoom.test.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/* eslint-disable react/display-name */
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import V2PodInspector from '../components/V2PodInspector';
-
-jest.mock('react-i18next', () => ({
- useTranslation: () => ({ t: (key: string) => key }),
-}));
-jest.mock('../hooks/useV2Api', () => ({
- useV2Api: () => ({ get: jest.fn().mockResolvedValue({}), post: jest.fn(), patch: jest.fn(), del: jest.fn() }),
-}));
-jest.mock('../../context/AuthContext', () => ({
- useAuth: () => ({ currentUser: { _id: 'human-1', username: 'sam' } }),
-}));
-jest.mock('../../context/SocketContext', () => ({
- useSocket: () => ({ socket: null, connected: false }),
-}));
-jest.mock('../components/V2Avatar', () => () => );
-
-const detail = {
- pod: { _id: 'room-1', name: 'Scout', type: 'agent-room', createdBy: { _id: 'human-1' } },
- members: [
- { _id: 'human-1', username: 'sam', isBot: false },
- { _id: 'agent-1', username: 'scout', isBot: true },
- ],
- agents: [], messages: [], loading: false, error: null, sendError: null,
- hasMore: false, loadingOlder: false, loadOlder: jest.fn(), refresh: jest.fn(), sendMessage: jest.fn(),
-};
-
-describe('V2PodInspector agent room', () => {
- it('shows both 1:1 participants without exposing pod membership controls', () => {
- render(
-
- ,
- );
-
- expect(screen.getByTestId('inspector-room-participants')).toHaveTextContent('sam');
- expect(screen.getByTestId('inspector-room-participants')).toHaveTextContent('scout');
- expect(screen.queryByRole('tab', { name: 'inspector.tabs.members' })).toBeNull();
- });
-});
diff --git a/frontend/src/v2/__tests__/V2PodInspectorMemberProfile.test.tsx b/frontend/src/v2/__tests__/V2PodInspectorMemberProfile.test.tsx
deleted file mode 100644
index 1e2e6becea..0000000000
--- a/frontend/src/v2/__tests__/V2PodInspectorMemberProfile.test.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-/* eslint-disable react/display-name */
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import V2PodInspector from '../components/V2PodInspector';
-
-const mockNavigate = jest.fn();
-
-jest.mock('react-router-dom', () => {
- const actual = jest.requireActual('react-router-dom');
- return { ...actual, useNavigate: () => mockNavigate };
-});
-
-jest.mock('react-i18next', () => ({
- useTranslation: () => ({ t: (key: string) => key }),
-}));
-
-jest.mock('../hooks/useV2Api', () => ({
- useV2Api: () => ({
- get: jest.fn().mockResolvedValue({}),
- post: jest.fn(), patch: jest.fn(), del: jest.fn(),
- }),
-}));
-
-jest.mock('../../context/AuthContext', () => ({
- useAuth: () => ({ currentUser: { _id: 'human-1', username: 'sam' } }),
-}));
-
-jest.mock('../../context/SocketContext', () => ({
- useSocket: () => ({ socket: null, connected: false }),
-}));
-
-jest.mock('../components/V2Avatar', () => () => );
-
-const detail = {
- pod: { _id: 'pod-1', name: 'Workspace', type: 'team' },
- members: [],
- agents: [{
- agentName: 'scout/ops',
- instanceId: 'blue sky',
- displayName: 'Scout',
- runtime: { runtimeType: 'webhook' },
- }],
- messages: [],
- loading: false,
- error: null,
- sendError: null,
- hasMore: false,
- loadingOlder: false,
- loadOlder: jest.fn(),
- refresh: jest.fn(),
- sendMessage: jest.fn(),
-};
-
-const detailWithoutAgentName = {
- ...detail,
- agents: [{ ...detail.agents[0], agentName: '' }],
-};
-
-describe('V2PodInspector member profile action', () => {
- beforeEach(() => jest.clearAllMocks());
-
- test('opens the selected agent profile instead of the fleet manager', () => {
- render(
-
- ,
- );
-
- expect(screen.getByText('yourTeam.card.profile')).toBeInTheDocument();
- fireEvent.click(screen.getByRole('button', { name: 'yourTeam.card.viewProfileAria' }));
-
- expect(mockNavigate).toHaveBeenCalledWith('/v2/agent/scout%2Fops/blue%20sky');
- });
-
- test('does not construct a route when a malformed registry row lacks an agent name', () => {
- render(
-
- ,
- );
-
- expect(screen.getByRole('button', { name: 'yourTeam.card.viewProfileAria' })).toBeDisabled();
- expect(mockNavigate).not.toHaveBeenCalled();
- });
-});
diff --git a/frontend/src/v2/__tests__/V2PodInspectorScopedManager.test.tsx b/frontend/src/v2/__tests__/V2PodInspectorScopedManager.test.tsx
deleted file mode 100644
index 6b32e035a3..0000000000
--- a/frontend/src/v2/__tests__/V2PodInspectorScopedManager.test.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/* eslint-disable react/display-name */
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import V2PodInspector from '../components/V2PodInspector';
-
-const mockNavigate = jest.fn();
-
-jest.mock('react-router-dom', () => {
- const actual = jest.requireActual('react-router-dom');
- return { ...actual, useNavigate: () => mockNavigate };
-});
-
-jest.mock('react-i18next', () => ({
- useTranslation: () => ({ t: (key: string) => key }),
-}));
-
-jest.mock('../hooks/useV2Api', () => ({
- useV2Api: () => ({
- get: jest.fn().mockResolvedValue({}),
- post: jest.fn(), patch: jest.fn(), del: jest.fn(),
- }),
-}));
-
-jest.mock('../../context/AuthContext', () => ({
- useAuth: () => ({ currentUser: { _id: 'human-1', username: 'sam' } }),
-}));
-
-jest.mock('../../context/SocketContext', () => ({
- useSocket: () => ({ socket: null, connected: false }),
-}));
-
-jest.mock('../components/V2Avatar', () => () => );
-
-const detail = {
- pod: { _id: 'pod-1', name: 'Workspace', type: 'team' },
- members: [],
- agents: [],
- messages: [],
- loading: false,
- error: null,
- sendError: null,
- hasMore: false,
- loadingOlder: false,
- loadOlder: jest.fn(),
- refresh: jest.fn(),
- sendMessage: jest.fn(),
-};
-
-describe('V2PodInspector scoped manager action', () => {
- beforeEach(() => jest.clearAllMocks());
-
- test('opens the agent manager with the current pod preselected', () => {
- render(
-
- ,
- );
-
- fireEvent.click(screen.getByRole('tab', { name: /inspector\.tabs\.members/ }));
- fireEvent.click(screen.getByTitle('inspector.members.manageTitle'));
-
- expect(mockNavigate).toHaveBeenCalledWith('/v2/agents/manage?podId=pod-1');
- });
-});
diff --git a/frontend/src/v2/__tests__/V2PodsSidebar.community.test.tsx b/frontend/src/v2/__tests__/V2PodsSidebar.community.test.tsx
index 6b776da248..def88fd136 100644
--- a/frontend/src/v2/__tests__/V2PodsSidebar.community.test.tsx
+++ b/frontend/src/v2/__tests__/V2PodsSidebar.community.test.tsx
@@ -1,285 +1,114 @@
// @ts-nocheck
import React from 'react';
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+ act, fireEvent, render, screen, within,
+} from '@testing-library/react';
import { MemoryRouter, useLocation } from 'react-router-dom';
import i18n, { i18nReady } from '../../i18n';
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,
- post: jest.fn(),
- patch: jest.fn(),
- del: jest.fn(),
-};
+const mockCreatePod = jest.fn();
jest.mock('../hooks/useV2Pods', () => ({
useV2Pods: () => ({
- pods: [],
- loading: false,
- error: null,
- refresh: mockRefresh,
- createPod: jest.fn(),
- deletePod: jest.fn(),
- patchLastMessage: jest.fn(),
- }),
-}));
-
-jest.mock('../hooks/useV2Pinned', () => ({
- useV2Pinned: () => ({
- pinned: new Set(),
- toggle: jest.fn(),
- isPinned: () => false,
+ pods: [], loading: false, error: null, createPod: mockCreatePod, patchLastMessage: jest.fn(),
}),
}));
jest.mock('../hooks/useV2Api', () => ({
- useV2Api: () => mockApi,
-}));
-
-jest.mock('../hooks/useV2Unread', () => ({
- useV2Unread: () => ({
- isUnread: () => false,
- bumpLatest: jest.fn(),
- seedFromExisting: mockSeedFromExisting,
- }),
-}));
-
-jest.mock('../../context/SocketContext', () => ({
- useSocket: () => ({ socket: null, connected: false, joinPod: mockJoinPod }),
+ useV2Api: () => ({ get: mockApiGet, post: jest.fn(), patch: jest.fn(), del: jest.fn() }),
}));
jest.mock('../../context/AuthContext', () => ({
- useAuth: () => ({ currentUser: { _id: 'human-1', username: 'new-human' } }),
+ useAuth: () => ({ currentUser: { _id: 'me', username: 'me' } }),
}));
const CurrentPath = () =>
- ,
- );
-};
-
-describe('V2PodsSidebar Community offer', () => {
- const originalCommunityPodId = process.env.REACT_APP_COMMUNITY_POD_ID;
-
- beforeAll(async () => {
- await i18nReady;
- });
+const human = (id) => ({ _id: id, username: id, isBot: false });
+const agent = (id) => ({ _id: id, username: id, isBot: true });
+
+const renderSidebar = (pods, selectedPodId = 'sharpen') => render(
+
+ ,
+);
+
+describe('V2PodsSidebar workspace groups', () => {
+ beforeAll(async () => { await i18nReady; });
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');
- });
- });
-
- afterAll(async () => {
- if (originalCommunityPodId === undefined) {
- delete process.env.REACT_APP_COMMUNITY_POD_ID;
- } else {
- process.env.REACT_APP_COMMUNITY_POD_ID = originalCommunityPodId;
- }
- await i18n.changeLanguage('en');
- });
-
- test('shows for a configured Community pod the human has not joined and navigates to the redirect', () => {
- renderSidebar([makePod('workspace', ['human-1'])]);
-
- expect(screen.getByText('Meet the builders and their agents.')).toBeInTheDocument();
- fireEvent.click(screen.getByRole('button', { name: 'Join HQ' }));
- expect(screen.getByTestId('current-path')).toHaveTextContent('/v2/community');
- });
-
- test('stays hidden once the Community pod is in memberPodIds', () => {
- renderSidebar([
- makePod('workspace', ['human-1']),
- makePod(COMMUNITY_POD_ID, ['human-1']),
- ]);
-
- expect(screen.queryByRole('button', { name: 'Join HQ' })).not.toBeInTheDocument();
- });
-
- test('stays hidden for self-hosted instances without Community config', () => {
- delete process.env.REACT_APP_COMMUNITY_POD_ID;
- renderSidebar([makePod('workspace', ['human-1'])]);
-
- expect(screen.queryByRole('button', { name: 'Join HQ' })).not.toBeInTheDocument();
- });
-
- 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,
- }),
- ]);
+ if (url === '/api/integrations/user/all') {
+ return Promise.resolve([{
+ _id: 'telegram', type: 'telegram', status: 'connected', podId: { _id: 'sharpen', name: 'Sharpen' },
+ }]);
}
return Promise.resolve([]);
});
- renderSidebar([
- makePod('workspace', ['human-1']),
- joinedPod,
- hqPod,
- ]);
-
- const communityFilter = screen.getByRole('button', { name: 'Community' });
- fireEvent.click(communityFilter);
- expect(communityFilter).toHaveClass('v2-pods__filter--active');
- expect(screen.getByRole('button', { name: 'All' }))
- .not.toHaveClass('v2-pods__filter--active');
- expect(screen.getByRole('button', { name: 'Joined' }))
- .toHaveClass('v2-pods__community-tab--active');
- 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');
-
- const discoverView = screen.getByRole('button', { name: 'Discover' });
- fireEvent.click(discoverView);
- expect(discoverView).toHaveClass('v2-pods__community-tab--active');
- expect(screen.getByRole('button', { name: 'Joined' }))
- .not.toHaveClass('v2-pods__community-tab--active');
- 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();
- await waitFor(() => {
- expect(mockApiGet).toHaveBeenCalledWith('/api/pods?scope=community');
- expect(mockApiGet).toHaveBeenCalledWith('/api/pods?scope=discover');
- });
+ await act(async () => { await i18n.changeLanguage('en'); });
});
- 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' }));
+ test('renders existing member pods as rooms, connectors as channels, and DMs as direct', async () => {
+ renderSidebar([
+ pod('sharpen', 'Sharpen', 'team', [human('me'), human('other')]),
+ pod('admin', 'Agent Admin', 'agent-admin', [human('me'), agent('ops')]),
+ pod('study', 'Study Group', 'study', [human('me'), human('other')]),
+ pod('agent-room', 'Build Agent', 'agent-room', [human('me'), agent('builder')]),
+ pod('human-dm', 'Design Partner', 'chat', [human('me'), human('designer')]),
+ pod('room-chat', 'Project Chat', 'chat', [human('me'), human('one'), human('two')]),
+ pod('future-type', 'Unreviewed Type', 'future-type', [human('me'), human('other')]),
+ ]);
- 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();
+ const rooms = screen.getByRole('heading', { name: 'rooms' }).closest('section');
+ const direct = screen.getByRole('heading', { name: 'direct' }).closest('section');
+ expect(within(rooms).getByRole('button', { name: /^Sharpen/ })).toBeInTheDocument();
+ expect(within(rooms).getByRole('button', { name: 'Agent Admin' })).toBeInTheDocument();
+ expect(within(rooms).getByRole('button', { name: 'Study Group' })).toBeInTheDocument();
+ expect(within(rooms).getByRole('button', { name: 'Project Chat' })).toBeInTheDocument();
+ expect(within(direct).getByRole('button', { name: 'Build Agent' })).toBeInTheDocument();
+ expect(within(direct).getByRole('button', { name: 'Design Partner' })).toBeInTheDocument();
+ expect(screen.queryByRole('button', { name: 'Unreviewed Type' })).not.toBeInTheDocument();
+
+ expect(await screen.findByRole('button', { name: 'Telegram · Sharpen' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: '+ Connect Slack' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'Telegram · Sharpen' }).querySelector('.v2-pods__channel-dot--live')).toBeTruthy();
});
- 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' }));
+ test('uses the decision queue count only on the selected room and retains no legacy controls', async () => {
+ renderSidebar([pod('sharpen', 'Sharpen', 'team', [human('me'), human('other')])]);
- expect(await screen.findByRole('alert')).toHaveTextContent(message);
- expect(screen.getByText('Feature Requests')).toBeInTheDocument();
- expect(screen.getByTestId('current-path')).toHaveTextContent('/v2/pods/workspace');
+ expect(await screen.findByLabelText('1 needs you')).toHaveTextContent('1');
+ expect(screen.queryByPlaceholderText('Search pods...')).not.toBeInTheDocument();
+ expect(screen.queryByRole('button', { name: 'All' })).not.toBeInTheDocument();
+ expect(screen.queryByRole('button', { name: 'Community' })).not.toBeInTheDocument();
+ expect(screen.queryByRole('button', { name: 'Join HQ' })).not.toBeInTheDocument();
});
- 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();
+ test('keeps the connector row navigable to its bound room', async () => {
+ renderSidebar([pod('sharpen', 'Sharpen', 'team', [human('me'), human('other')])]);
+ fireEvent.click(await screen.findByRole('button', { name: 'Telegram · Sharpen' }));
+ expect(screen.getByTestId('current-path')).toHaveTextContent('/v2/pods/sharpen');
});
});
diff --git a/frontend/src/v2/__tests__/V2PodsSidebarCreate.test.tsx b/frontend/src/v2/__tests__/V2PodsSidebarCreate.test.tsx
index cea47b61db..dfb12acc9b 100644
--- a/frontend/src/v2/__tests__/V2PodsSidebarCreate.test.tsx
+++ b/frontend/src/v2/__tests__/V2PodsSidebarCreate.test.tsx
@@ -92,7 +92,7 @@ describe('V2PodsSidebar create flow', () => {
,
);
- fireEvent.click(screen.getByRole('button', { name: 'New pod' }));
+ fireEvent.click(screen.getByRole('button', { name: '+ new' }));
// The audience choice is gone — it set one field, could not be honoured
// for non-admins, and asked a stranger to decide before they had content.
@@ -136,7 +136,7 @@ describe('V2PodsSidebar create flow', () => {
,
);
- fireEvent.click(screen.getByRole('button', { name: '新建 Pod' }));
+ fireEvent.click(screen.getByRole('button', { name: '+ 新建' }));
// Audience options are gone in every locale — a zh-only regression here
// would mean the removal was done in the component but not the catalog.
diff --git a/frontend/src/v2/__tests__/V2ThreadDecisionCard.test.tsx b/frontend/src/v2/__tests__/V2ThreadDecisionCard.test.tsx
new file mode 100644
index 0000000000..239e603b47
--- /dev/null
+++ b/frontend/src/v2/__tests__/V2ThreadDecisionCard.test.tsx
@@ -0,0 +1,104 @@
+// @ts-nocheck
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import V2Thread from '../components/V2Thread';
+import { AuthContext } from '../../context/AuthContext';
+
+const mockGet = jest.fn();
+const mockPost = jest.fn();
+
+jest.mock('axios', () => ({
+ __esModule: true,
+ default: {
+ get: (...args) => mockGet(...args),
+ post: (...args) => mockPost(...args),
+ patch: jest.fn(),
+ put: jest.fn(),
+ delete: jest.fn(),
+ defaults: { baseURL: '', headers: { common: {} } },
+ interceptors: {
+ request: { use: jest.fn(), eject: jest.fn() },
+ response: { use: jest.fn(), eject: jest.fn() },
+ },
+ },
+}));
+
+jest.mock('../../context/SocketContext', () => ({
+ useSocket: () => ({ socket: null, connected: false }),
+}));
+
+jest.mock('../components/V2Avatar', () => {
+ const MockAvatar = () => ;
+ MockAvatar.displayName = 'MockAvatar';
+ return MockAvatar;
+});
+
+beforeAll(() => { Element.prototype.scrollIntoView = jest.fn(); });
+
+const auth = {
+ currentUser: { _id: 'human-1', username: 'lily' },
+ user: { _id: 'human-1', username: 'lily' },
+ token: 'token', loading: false, error: null, isAuthenticated: true,
+ register: jest.fn(), login: jest.fn(), logout: jest.fn(), updateProfile: jest.fn(),
+};
+
+const detail = {
+ pod: { _id: 'pod-1', name: 'Sharpen', description: 'Make the next cut', type: 'chat' },
+ members: [{ _id: 'human-1', username: 'lily', isBot: false }],
+ agents: [],
+ messages: [{
+ id: '42', pod_id: 'pod-1', user_id: 'agent-1',
+ user: { username: 'sprint-impl', isBot: true },
+ content: 'Choose one of the following approaches in prose.',
+ message_type: 'text', created_at: '2026-09-05T12:00:00.000Z',
+ }],
+ sendMessage: jest.fn(), loading: false, error: null, sendError: null,
+ hasMore: false, loadingOlder: false, loadOlder: jest.fn(), refresh: jest.fn(),
+};
+
+describe('V2Thread decision cards', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ mockGet.mockImplementation((url) => {
+ if (url === '/api/activity/decision-queue') {
+ return Promise.resolve({ data: { items: [{
+ id: 'decision-42', kind: 'decision', podId: 'pod-1', messageId: '42',
+ actorName: 'Sprint impl', title: 'Choose the workspace cutover',
+ detail: 'Which implementation should ship?',
+ options: [{ label: 'Ship the rebuilt workspace', recommended: true }],
+ }] } });
+ }
+ return Promise.resolve({ data: {} });
+ });
+ mockPost.mockResolvedValue({ data: { decision: { ruling: {
+ value: 'Ship the rebuilt workspace', by: 'Lily', messageId: 'ruling-42', at: '2026-09-05T12:01:00.000Z',
+ } } } });
+ });
+
+ test('replaces the decision request prose at its durable message position with a live card', async () => {
+ const onDecisionSettled = jest.fn();
+ render(
+
+ ,
+ );
+
+ expect(await screen.findByTestId('decision-card')).toBeInTheDocument();
+ expect(screen.getByText('Choose the workspace cutover')).toBeInTheDocument();
+ expect(screen.queryByText('Choose one of the following approaches in prose.')).not.toBeInTheDocument();
+
+ fireEvent.click(screen.getByRole('button', { name: 'Ship the rebuilt workspace' }));
+ await waitFor(() => expect(mockPost).toHaveBeenCalledWith(
+ '/api/activity/decisions/decision-42/choose',
+ { value: 'Ship the rebuilt workspace' },
+ expect.anything(),
+ ));
+ const ruling = await screen.findByTestId('decision-ruling-row');
+ expect(ruling).toHaveTextContent('Lily');
+ expect(ruling).toHaveTextContent('ruled');
+ expect(ruling).toHaveTextContent('Ship the rebuilt workspace');
+ expect(screen.queryByTestId('decision-card')).not.toBeInTheDocument();
+ expect(onDecisionSettled).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/frontend/src/v2/__tests__/V2PodChatDeliveryHint.test.tsx b/frontend/src/v2/__tests__/V2ThreadDeliveryHint.test.tsx
similarity index 98%
rename from frontend/src/v2/__tests__/V2PodChatDeliveryHint.test.tsx
rename to frontend/src/v2/__tests__/V2ThreadDeliveryHint.test.tsx
index a48e1b4a65..1965de3399 100644
--- a/frontend/src/v2/__tests__/V2PodChatDeliveryHint.test.tsx
+++ b/frontend/src/v2/__tests__/V2ThreadDeliveryHint.test.tsx
@@ -2,7 +2,7 @@
import React, { useState } from 'react';
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
-import V2PodChat from '../components/V2PodChat';
+import V2Thread from '../components/V2Thread';
import { AuthContext } from '../../context/AuthContext';
let mockSocketValue = { socket: null, connected: false };
@@ -79,7 +79,7 @@ const DeliveryHarness = ({ response, sendSpy, agents = DEFAULT_AGENTS }) => {
error: null,
refresh: jest.fn(),
};
- return
-
,
);
@@ -90,7 +90,7 @@ const makeAgentRoom = (overrides = {}) => makeDetail({
...overrides,
});
-describe('V2PodChat teaching empty states', () => {
+describe('V2Thread teaching empty states', () => {
beforeEach(() => {
jest.clearAllMocks();
sessionStorage.clear();
@@ -130,7 +130,7 @@ describe('V2PodChat teaching empty states', () => {
});
});
-describe('V2PodChat starter prompts', () => {
+describe('V2Thread starter prompts', () => {
beforeEach(() => {
jest.clearAllMocks();
sessionStorage.clear();
@@ -179,7 +179,7 @@ describe('V2PodChat starter prompts', () => {
});
});
-describe('V2PodChat agent-room liveness', () => {
+describe('V2Thread agent-room liveness', () => {
beforeEach(() => {
jest.clearAllMocks();
axios.get.mockResolvedValue({ data: { agents: [] } });
@@ -239,7 +239,7 @@ describe('V2PodChat agent-room liveness', () => {
view.rerender(
-
,
);
@@ -280,7 +280,7 @@ describe('V2PodChat agent-room liveness', () => {
});
});
-describe('V2PodChat just-created Pod starter panel', () => {
+describe('V2Thread just-created Pod starter panel', () => {
beforeEach(() => {
jest.clearAllMocks();
sessionStorage.clear();
diff --git a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
index f4dc7fb7dc..094ac12710 100644
--- a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
+++ b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
@@ -36,6 +36,16 @@ const ruleBody = (css: string, selector: string): string => {
return end === -1 ? '' : css.slice(start, end);
};
+// TASK-129 supersedes a large sidebar block in place. The current artboard
+// rules intentionally live later in the same stylesheet until the chat pass
+// removes the retired selectors, so inspect the last exact rule for overrides.
+const lastRuleBody = (css: string, selector: string): string => {
+ const start = css.lastIndexOf(`\n${selector} {`);
+ if (start === -1) return '';
+ const end = css.indexOf('}', start);
+ return end === -1 ? '' : css.slice(start, end);
+};
+
// Some component rules deliberately share a declaration block with an
// element variant (for example, button + link CTAs). The guard still needs to
// inspect that one block without splitting the production selector just for a
@@ -52,6 +62,19 @@ const cssVariable = (css: string, name: string): string | undefined => (
new RegExp(`${name}\\s*:\\s*([^;]+);`).exec(css)?.[1].trim()
);
+const activeAccentBackgroundSelectors = (css: string, classNames: Set): string[] => (
+ [...new Set(Array.from(css.matchAll(/([^{}]+)\{([^{}]*)\}/g)).flatMap(([, rawSelector, body]) => {
+ if (!/background\s*:\s*var\(--v2-accent\)/.test(body)) return [];
+ return rawSelector
+ .replace(/\/\*[\s\S]*?\*\//g, '')
+ .split(',')
+ .map((selector) => selector.trim().replace(/:hover(?::[^\s.{]+)?/g, ''))
+ .filter((selector) => Array.from(classNames).some((className) => (
+ new RegExp(`\\.${className}(?![\\w-])`).test(selector)
+ )));
+ }))].sort()
+);
+
// App.css is shared by legacy V1 and v2. A leading element selector in V1
// styles crosses that boundary unless it is rooted beneath the legacy canvas.
// Keep html/body as the two deliberate document-level exceptions.
@@ -73,7 +96,19 @@ describe('v2 layout invariants (CSS rule presence)', () => {
const tokens = read('../../../design-system/tokens.css');
const aprofile = read('../agents/v2-agent-profile.css');
const landing = read('../landing/v2-landing.css');
- const podChat = read('../components/V2PodChat.tsx');
+ const podChat = read('../components/V2Thread.tsx');
+ const podsSidebar = read('../components/V2PodsSidebar.tsx');
+ const podAttention = read('../hooks/useV2PodAttention.ts');
+ const workspaceInspector = read('../components/V2Inspector.tsx');
+ const thread = read('../components/V2Thread.tsx');
+ const threadMessages = read('../components/V2ThreadMessages.tsx');
+ const messageRow = read('../components/V2MessageRow.tsx');
+ const composer = read('../components/V2Composer.tsx');
+ const decisionCard = read('../components/V2DecisionCard.tsx');
+ const navRail = read('../components/V2NavRail.tsx');
+ const threadCard = read('../components/V2ThreadCard.tsx');
+ const v2Layout = read('../components/V2Layout.tsx');
+ const mobileTabs = read('../components/V2MobileTabs.tsx');
const podBoard = read('../components/V2PodBoard.tsx');
const activityPage = read('../components/V2ActivityPage.tsx');
const v2App = read('../V2App.tsx');
@@ -83,6 +118,7 @@ describe('v2 layout invariants (CSS rule presence)', () => {
const avatar = read('../components/V2Avatar.tsx');
const billingPanel = read('../components/V2BillingPanel.tsx');
const appsManagement = read('../../components/AppsManagement.tsx');
+ const podModel = read('../../../../backend/models/Pod.ts');
test('Your Team card name owns its line so the category chip cannot crush it', () => {
const rule = ruleBody(v2, '.v2-team-card__name');
@@ -99,39 +135,143 @@ describe('v2 layout invariants (CSS rule presence)', () => {
expect(rule).not.toContain('white-space: nowrap');
});
- test('sidebar pod name WRAPS — it never loses to its own timestamp (craft audit finding 8)', () => {
- // "Sharpen — pod m…", "Team Orchestra…": the name shared its line with the
- // relative time and ellipsized at desktop width. Same primary-identifier
- // rule as the team-card name: wrap to two lines, and the timestamp lives
- // on the snippet row so it never competes with the name at all.
- const title = ruleBody(v2, '.v2-pods__item-title');
- expect(title).toContain('-webkit-line-clamp: 2');
- expect(title).not.toContain('white-space: nowrap');
- expect(v2).toContain('.v2-pods__item-snippet-row');
+ test('the workspace grid owns the measured 56 / 232 / fluid / 300 geometry', () => {
+ // The artboard at 1440 has 14px page padding and three 12px gaps. Those
+ // values leave the 788px chat track measured by UX; a 76px rail cannot.
+ expect(cssVariable(v2, '--v2-rail-w')).toBe('56px');
+ expect(cssVariable(v2, '--v2-pods-w')).toBe('232px');
+ expect(cssVariable(v2, '--v2-inspector-w')).toBe('300px');
+ expect(lastRuleBody(v2, '.v2-shell')).toContain('gap: 12px');
+ expect(lastRuleBody(v2, '.v2-shell')).toContain('padding: 14px');
});
- test('the unread dot stays clear of the rounded row corner (name-wrap side effect)', () => {
- // The title-row is align-items: flex-start (for the 2-line name wrap),
- // which parks the dot flush at the row's top-right — inside the row's
- // border-radius + overflow:hidden clip, where the rounding visibly
- // shaved it (reported live 2026-08-22). Both margins are load-bearing:
- // top centers it on the first text line, right clears the 10px curve.
- // jsdom cannot see corner clipping — presence pin per this file's rule.
- const dot = ruleBody(v2, '.v2-pods__item-dot');
- expect(dot).toContain('margin-top: 6px');
- expect(dot).toContain('margin-right: 4px');
+ test('the workspace keeps each artboard column width declared exactly once', () => {
+ // cssVariable() intentionally reads the first match, so it would miss a
+ // later media override. Only the chat track may contract before phone.
+ for (const name of ['--v2-rail-w', '--v2-pods-w', '--v2-inspector-w']) {
+ expect(v2.match(new RegExp(`${name}\\s*:`, 'g')) || []).toHaveLength(1);
+ }
+ });
+
+ test('the compact rail uses the artboard’s 32px square marks inside the 56px column', () => {
+ const rail = ruleBody(v2, '.v2-rail');
+ const brand = ruleBody(v2, '.v2-rail__brand-icon');
+ const item = ruleBody(v2, '.v2-root button.v2-rail__item');
+ const active = ruleBody(v2, '.v2-root button.v2-rail__item--active');
+ expect(rail).toContain('padding: 6px 10px');
+ expect(brand).toContain('width: 32px');
+ expect(brand).toContain('height: 32px');
+ expect(item).toContain('width: 32px');
+ expect(item).toContain('height: 32px');
+ expect(item).toContain('border-radius: var(--v2-radius)');
+ expect(active).toContain('background: var(--v2-ink)');
+ });
+
+ test('sidebar is the artboard’s three-list grammar, not the retired search/filter surface', () => {
+ const labels = lastRuleBody(v2, '.v2-pods__group-label');
+ const selected = selectorRuleBody(v2, '.v2-root button.v2-pods__row--selected');
+ const channelDot = ruleBody(v2, '.v2-pods__channel-dot');
+ const liveChannelDot = ruleBody(v2, '.v2-pods__channel-dot--live');
+ const directAvatar = ruleBody(v2, '.v2-pods__direct-avatar.v2-avatar');
+
+ expect(labels).toContain('font-family: var(--v2-font-mono)');
+ expect(labels).toContain('font-size: 11px');
+ expect(selected).toContain('background: var(--v2-accent)');
+ expect(selected).toContain('color: #fff');
+ expect(ruleBody(v2, '.v2-root button.v2-pods__row')).toContain('border-radius: 4px');
+ // The selection is the full 232px sidebar block; 12px is inside its row,
+ // not a list inset that would shrink the cobalt slab.
+ expect(lastRuleBody(v2, '.v2-pods')).toContain('padding: 6px 0');
+ expect(labels).toContain('padding: 0 12px');
+ expect(channelDot).toContain('width: 8px');
+ expect(liveChannelDot).toContain('background: var(--v2-accent)');
+ expect(directAvatar).toContain('width: 20px');
+ expect(directAvatar).toContain('height: 20px');
+ expect(podsSidebar).toContain("'podsSidebar.workspace.rooms'");
+ expect(podsSidebar).toContain("'podsSidebar.workspace.channels'");
+ expect(podsSidebar).toContain("'podsSidebar.workspace.direct'");
+ expect(podsSidebar).not.toContain('v2-pods__search');
+ expect(podsSidebar).not.toContain('v2-pods__filter');
+ expect(podsSidebar).not.toContain('v2-pods__community');
+ });
+
+ test('the selected room keeps the sidebar’s one cobalt block treatment', () => {
+ const selected = selectorRuleBody(v2, '.v2-root button.v2-pods__row--selected');
+ expect(selected).toContain('background: var(--v2-accent)');
+ expect(selected).toContain('font-weight: 600');
+ expect(podsSidebar).not.toContain('v2-pods__item--active');
+ expect(podsSidebar).not.toContain('v2-pods__pin');
+ expect(podsSidebar).not.toContain('v2-pods__item-dot');
+ });
+
+ test('the selected-room count, inspector rows, and phone badge derive from one attention collection', () => {
+ expect(podAttention).toContain("'/api/activity/decision-queue'");
+ expect(v2Layout).toContain('useV2PodAttention()');
+ expect(v2Layout).toContain('attentionItems={attention.items}');
+ expect(v2Layout).toContain('needsYouCount={selectedPodId ? (attention.countByPod[selectedPodId] || 0) : 0}');
+ expect(podsSidebar).toContain('attentionCountByPod');
+ expect(podsSidebar).toContain('selected && attentionCount > 0');
+ expect(workspaceInspector).toContain('attentionItems.filter');
+ expect(podsSidebar).not.toContain('useV2Unread');
+ });
+
+ test('room types are an explicit reviewed mapping, not a complement of direct types', () => {
+ expect(podsSidebar).toContain('const ROOM_POD_TYPES');
+ expect(podsSidebar).toContain('export const isRoomPod');
+ expect(podsSidebar).toContain('pods.filter(isRoomPod)');
+ expect(podsSidebar).not.toContain('pods.filter((pod) => !isDirectPod(pod))');
+ });
+
+ test('every stored pod type has exactly one reviewed sidebar group', () => {
+ const entriesFor = (source: string, setName: string): string[] => {
+ const match = source.match(new RegExp(`const ${setName} = new Set\\(\\[([\\s\\S]*?)\\]\\);`));
+ return Array.from(match?.[1].matchAll(/'([^']+)'/g) || [], ([, entry]) => entry);
+ };
+ const schemaTypes = Array.from(
+ podModel.match(/type:\s*\{[\s\S]*?enum:\s*\[([^\]]+)\],[\s\S]*?default:\s*'chat'/)?.[1].matchAll(/'([^']+)'/g) || [],
+ ([, entry]) => entry,
+ );
+ const sidebarTypes = [
+ ...entriesFor(podsSidebar, 'ROOM_POD_TYPES'),
+ ...entriesFor(podsSidebar, 'DM_POD_TYPES'),
+ ];
+
+ expect(new Set(sidebarTypes).size).toBe(sidebarTypes.length);
+ expect(sidebarTypes.sort()).toEqual(schemaTypes.sort());
+ });
+
+ test('channels read the existing connector binding endpoint and retain their room target', () => {
+ expect(podsSidebar).toContain("'/api/integrations/user/all'");
+ expect(podsSidebar).toContain('connector.podId');
+ expect(podsSidebar).toContain("navigate('/v2/connectors')");
+ });
+
+ test('the compact sidebar preserves the existing mobile drawer contract', () => {
+ expect(v2).toMatch(/@media \(max-width: 760px\)[\s\S]*?\.v2-pods-aside \{[\s\S]*?transform: translateX\(-100%\)/);
+ expect(v2).toMatch(/@media \(max-width: 760px\)[\s\S]*?\.v2-pods__mobile-close \{[\s\S]*?position: absolute/);
});
test('grouped messages keep the avatar column so text never shifts (craft audit rule 3)', () => {
// Consecutive same-author messages within the grouping window drop the
- // header row; the ghost cell must match the .v2-msg grid's 38px avatar
+ // header row; the ghost cell must match the artboard's 28px avatar
// column or grouped text mis-aligns with headed text by exactly the
// avatar width — a defect jsdom cannot see.
- expect(ruleBody(v2, '.v2-msg')).toContain('grid-template-columns: 38px');
- expect(ruleBody(v2, '.v2-msg__avatar-ghost')).toContain('width: 38px');
+ expect(ruleBody(v2, '.v2-thread .v2-msg')).toContain('grid-template-columns: 28px');
+ expect(ruleBody(v2, '.v2-thread .v2-msg__avatar-ghost')).toContain('width: 28px');
expect(v2).toContain('.v2-msg--grouped');
});
+ test('the workspace route uses the small replacement components, never the retired chat or bubble files', () => {
+ expect(fs.existsSync(path.join(__dirname, '../components/V2PodChat.tsx'))).toBe(false);
+ expect(fs.existsSync(path.join(__dirname, '../components/V2MessageBubble.tsx'))).toBe(false);
+ expect(thread).toContain("import V2ThreadMessages from './V2ThreadMessages'");
+ expect(threadMessages).toContain("import V2MessageRow from './V2MessageRow'");
+ expect(thread).toContain("import V2Composer");
+ expect(messageRow).toContain("import V2DecisionCard");
+ expect(composer).toContain('const V2Composer');
+ expect(decisionCard).toContain('const V2DecisionCard');
+ });
+
test('direct-agent liveness stays above the composer as a stable, readable row', () => {
// A successful DM POST is not proof of an active seat. This row keeps
// liveness and the bounded reply wait outside the scrollable transcript
@@ -239,6 +379,49 @@ describe('v2 layout invariants (CSS rule presence)', () => {
expect(v2).toContain(':not(.v2-pods-aside):not(.v2-pane--inspector)');
});
+ test('workspace inspector is the small three-card replacement, with a phone sheet rather than legacy tabs', () => {
+ // TASK-129 replaces the 86KB tabbed inspector in the same cutover as the
+ // artboard cards. Keeping the old component anywhere in the route would
+ // turn this back into a skin over two competing inspector models.
+ expect(fs.existsSync(path.join(__dirname, '../components/V2PodInspector.tsx'))).toBe(false);
+ expect(workspaceInspector).toContain('className="v2-workspace-inspector__card"');
+ expect(workspaceInspector).toContain("'inspector.workspace.agentsIn'");
+ expect(workspaceInspector).toContain("'inspector.workspace.needsYou'");
+ expect(workspaceInspector).toContain("'inspector.workspace.boardToday'");
+ expect(workspaceInspector).toContain('shortRoomName(pod.name).toLowerCase()');
+ expect(workspaceInspector).toContain('v2-workspace-inspector__state--${state.kind}');
+ expect(workspaceInspector).not.toContain('v2-inspector__tabs');
+ expect(workspaceInspector).not.toContain('v2-inspector__progress');
+
+ const card = ruleBody(v2, '.v2-workspace-inspector__card');
+ expect(card).toContain('border: 1px solid var(--v2-border)');
+ expect(card).toContain('border-radius: 6px');
+ expect(ruleBody(v2, '.v2-workspace-inspector__state--needs-you')).toContain('background: var(--v2-accent)');
+ expect(ruleBody(v2, '.v2-workspace-inspector__state--working')).toContain('animation: v2-pulse');
+ const stateDot = ruleBody(v2, '.v2-workspace-inspector__state');
+ expect(stateDot).toContain('width: 8px');
+ expect(stateDot).toContain('height: 8px');
+ const avatar = ruleBody(v2, '.v2-workspace-inspector__avatar.v2-avatar');
+ expect(avatar).toContain('border: 0');
+ expect(avatar).toContain('box-shadow: none');
+ const label = ruleBody(v2, '.v2-workspace-inspector__label');
+ expect(label).toContain('font: 500 11px/14px var(--v2-font-mono)');
+ expect(label).toContain('white-space: nowrap');
+ expect(label).toContain('text-overflow: clip');
+ const foot = selectorRuleBody(v2, '.v2-root .v2-workspace-inspector__foot button');
+ expect(foot).toContain('var(--v2-font-mono)');
+ const close = selectorRuleBody(v2, '.v2-root button.v2-workspace-inspector__close');
+ expect(close).toContain('display: none');
+ expect(v2).toContain('.v2-root button.v2-workspace-inspector__close { display: inline-grid; }');
+
+ const phoneSheetStart = v2.lastIndexOf('/* The inspector is a bottom sheet on phones');
+ const phoneSheet = v2.slice(phoneSheetStart, v2.indexOf('/* ---------- Workspace inspector', phoneSheetStart));
+ expect(phoneSheetStart).toBeGreaterThan(-1);
+ expect(phoneSheet).toContain('top: auto');
+ expect(phoneSheet).toContain('width: 100%');
+ expect(v2Layout).toContain('className="v2-inspector-backdrop"');
+ });
+
test('v2 claims the page canvas — the V1 dark body cannot show through', () => {
// App.tsx stamps `modern-ui` (V1 dark gradient) on unconditionally;
// .v2-root paints only its own box. Without this override the V1 dark
@@ -303,7 +486,8 @@ describe('v2 layout invariants (CSS rule presence)', () => {
// of rows and recreates the v1 island.
expect(ruleBody(v2, '.v2-chat__messages > *')).toContain('width: 100%');
expect(ruleBody(v2, '.v2-chat__messages > *')).toContain('margin-inline: 0');
- expect(ruleBody(v2, '.v2-chat__composer > *')).toContain('margin-inline: 0');
+ expect(ruleBody(v2, '.v2-composer')).toContain('border: 1px solid var(--v2-border)');
+ expect(ruleBody(v2, '.v2-composer__posts-as')).toContain('font: 500 11px/16px var(--v2-font-mono)');
// Nothing in the column may escape the shared edge (Sam, 2026-08-23:
// mentions and threads sat off-grid while messages aligned).
// Mentions: the wash bleed must equal the padding (the old -12px against
@@ -329,7 +513,7 @@ describe('v2 layout invariants (CSS rule presence)', () => {
expect(ruleBody(v2, '.v2-thread-block')).toContain('margin-bottom');
});
- test('motion timing is tokenized and all three existing V2 animations consume it', () => {
+ test('motion timing is tokenized and all three active V2 animations consume it', () => {
expect(tokens).toContain('--motion-stagger: 0.18s');
expect(tokens).toContain('--motion-breath: 1.2s');
expect(tokens).toContain('--motion-ease-breath: ease-in-out');
@@ -353,7 +537,7 @@ describe('v2 layout invariants (CSS rule presence)', () => {
}
expect(ruleBody(v2, '.v2-chat__typing-dots > span')).toContain('var(--motion-breath)');
- expect(ruleBody(v2, '.v2-inspector__now-pulse')).toContain('var(--motion-pulse)');
+ expect(ruleBody(v2, '.v2-workspace-inspector__state--working')).toContain('var(--motion-pulse)');
expect(ruleBody(v2, '.v2-spinner')).toContain('var(--motion-spin)');
});
@@ -529,41 +713,6 @@ describe('v2 layout invariants (CSS rule presence)', () => {
expect(ruleBody(v2, '.v2-settings .apps-management--settings .apps-management__integration')).toContain('border: 1px solid var(--v2-border)');
});
- test('the Community offer stays visible below the independently scrolling pod list', () => {
- // The list owns overflow-y; the offer is its flex sibling. Preventing the
- // card from shrinking is what keeps the Join HQ action reachable when the
- // sidebar contains many pods.
- expect(ruleBody(v2, '.v2-pods__community')).toContain('flex-shrink: 0');
- });
-
- test('the four pod filters stay on one row in the narrow sidebar', () => {
- // Third mechanism (Sam, 2026-08-23): content-sized chips. The equal-grid
- // versions allocated width backwards (wide boxes for short words, a
- // capped box for the longest) and scattered zh-CN's four 2-character
- // labels across phantom cells. Chips hug their labels with uniform
- // padding, so both locales read as one segmented control. The intent
- // Superseded 2026-08-23 (Sam): equal cells beat one row. Four equal
- // chips can't share the 239px rail (EN "Community" needs 84px alone),
- // so equal means the same 2×2 grid the community-tabs below use.
- const rule = ruleBody(v2, '.v2-pods__filters');
- expect(rule).toContain('display: grid');
- expect(rule).toContain('grid-template-columns: repeat(2, minmax(0, 1fr))');
- expect(rule).toContain('overflow: visible');
- // The `.v2-root button.` prefix is load-bearing: the global button reset
- // (0-1-1) zeroes padding on a bare-class rule (0-1-0), which shipped as
- // 25px chips hugging bare text — the third hit of this exact trap.
- const chip = ruleBody(v2, '.v2-root button.v2-pods__filter');
- expect(chip).toContain('white-space: nowrap');
- expect(chip).toContain('padding: 0 10px');
- // The active rule must FOLLOW the base chip rule: both weigh 0-2-1, so
- // source order decides the selected chip's color — the wrong order
- // shipped grey-on-blue (measured live 2026-08-23).
- const active = ruleBody(v2, '.v2-root button.v2-pods__filter--active');
- expect(active).toContain('color: var(--v2-surface)');
- expect(v2.indexOf('.v2-root button.v2-pods__filter--active'))
- .toBeGreaterThan(v2.indexOf('.v2-root button.v2-pods__filter {'));
- });
-
test('mention treatment is a neutral wash, never a message rail', () => {
// Accent rails made otherwise ordinary cards look like generic callouts.
// Message rows retain a neutral semantic wash, while quote edges stay
@@ -580,30 +729,10 @@ describe('v2 layout invariants (CSS rule presence)', () => {
expect(ruleBody(v2, '.v2-board__detail-updates li')).toContain('border-left: 3px solid var(--v2-border)');
});
- test('pod rows reserve one preview line and a locale-shaped time slot', () => {
- const row = ruleBody(v2, '.v2-pods__item');
- const snippet = ruleBody(v2, '.v2-pods__item-snippet');
- const time = ruleBody(v2, '.v2-pods__item-time');
-
- expect(row).toContain('height: 64px');
- expect(row).toContain('overflow: hidden');
- expect(snippet).toContain('height: 16px');
- expect(snippet).toContain('white-space: nowrap');
- expect(snippet).toContain('text-overflow: ellipsis');
- // Relative time comes from the viewer's browser locale, so a fixed English
- // pixel width will eventually clip a clock. Keep its intrinsic width and
- // let the already-ellipsized title absorb the remaining line.
- expect(time).toContain('flex-shrink: 0');
- expect(time).toContain('white-space: nowrap');
- expect(time).not.toContain('width:');
- expect(v2).toContain('.v2-pods__row--pinned .v2-pods__item-time');
- });
-
- test('the inspector activity pulse uses semantic tokens, not raw color literals', () => {
- const pulse = ruleBody(v2, '.v2-inspector__now-pulse');
- expect(pulse).toContain('var(--v2-success-ring-strong)');
- expect(v2.slice(v2.indexOf('@keyframes v2-now-pulse'), v2.indexOf('.v2-inspector__now-meta')))
- .toContain('var(--v2-success-ring)');
+ test('the workspace inspector working dot is cobalt and uses the semantic pulse timing', () => {
+ const pulse = ruleBody(v2, '.v2-workspace-inspector__state--working');
+ expect(pulse).toContain('background: var(--v2-accent)');
+ expect(pulse).toContain('animation: v2-pulse var(--motion-pulse) var(--motion-ease-state) infinite');
});
test('v2 focus treatment reuses the shared focus-ring token', () => {
@@ -645,24 +774,73 @@ describe('v2 layout invariants (CSS rule presence)', () => {
expect(podBoard).not.toContain('+ {t(\'board.newTask\')}');
});
- test('the chat heartbeat subtitle is guarded by an installed agent', () => {
- // A zero-agent pod has nobody expected to heartbeat; showing "No recent"
- // there was a false failure state. Pin both the predicate and its render
- // guard so a later copy-only edit cannot restore the dangling separator.
- expect(podChat).toContain('const liveState = agents.length > 0');
- expect(podChat).toContain('{liveState && · {liveState}}');
- });
-
- 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('the thread header is the artboard’s name, muted description, and working count', () => {
+ expect(podChat).toContain('className="v2-thread__header"');
+ expect(podChat).toContain('podChat.header.agentsWorking');
+ expect(podChat).toContain('v2-thread__inspector-toggle');
+ expect(ruleBody(v2, '.v2-thread__header')).toContain('border-bottom: 1px solid var(--v2-border-soft)');
+ expect(ruleBody(v2, '.v2-thread__title h1')).toContain('font: 700 22px/28px var(--v2-font-display)');
+ expect(ruleBody(v2, '.v2-thread__working')).toContain('font: 500 11px/16px var(--v2-font-mono)');
+ expect(ruleBody(v2, '.v2-thread__working::before')).toContain('color: var(--v2-text-muted)');
+ expect(ruleBody(v2, '.v2-thread__working--active::before')).toContain('color: var(--v2-accent)');
+ expect(thread).toContain("onlineAgentCount > 0 ? ' v2-thread__working--active' : ''");
+ });
+
+ test('the phone workspace is an edge-to-edge thread with reachable drawers and a real tab bar', () => {
+ expect(v2).toContain('.v2-pane--rail { display: none; }');
+ expect(v2).toContain('.v2-thread__working--mobile { display: block; color: var(--v2-accent-text); }');
+ expect(v2).toContain('.v2-mobile-tabs__badge');
+ expect(ruleBody(v2, '.v2-root button.v2-mobile-tabs__item')).toContain('width: 44px');
+ expect(ruleBody(v2, '.v2-root button.v2-mobile-tabs__item')).toContain('height: 32px');
+ expect(mobileTabs).toContain('onOpenInspector');
+ expect(mobileTabs).toContain("navigate('/v2/settings')");
+ expect(v2Layout).toContain(' {
+ const title = ruleBody(v2, '.v2-thread__title h1');
+ const avatarRule = ruleBody(v2, '.v2-thread .v2-avatar');
+ const author = selectorRuleBody(v2, '.v2-thread .v2-msg__author');
+ const time = ruleBody(v2, '.v2-thread .v2-msg__time');
+ const actions = ruleBody(v2, '.v2-thread .v2-msg__actions');
+ expect(title).toContain('var(--v2-font-display)');
+ expect(avatarRule).toContain('width: 28px');
+ expect(avatarRule).toContain('border-radius: 4px');
+ expect(avatarRule).toContain('border: 0');
+ expect(avatarRule).toContain('box-shadow: none');
+ expect(author).toContain('font-size: 14px');
+ expect(author).toContain('font-weight: 600');
+ expect(time).toContain('font: 500 12px/16px var(--v2-font-mono)');
+ expect(actions).toContain('border-radius: 4px');
+ expect(actions).toContain('box-shadow: none');
+ // These scoped rules only take effect when the chat mounts the thread
+ // surface class; without it the legacy 30px circular avatar rules win.
+ expect(thread).toContain('className="v2-chat v2-thread"');
+
+ const phoneStart = v2.lastIndexOf(
+ '@media (max-width: 760px)',
+ v2.lastIndexOf('/* The workspace is edge-to-edge on a phone'),
+ );
+ const phone = v2.slice(phoneStart);
+ expect(phone).toContain('.v2-decision-card__options { align-items: stretch; flex-direction: column; }');
+ expect(phone).toContain('.v2-root button.v2-decision-card__choice { width: 100%; min-height: 44px; font-size: 15px; }');
+ expect(phone).toContain('.v2-root button.v2-chat__mobile-nav-btn');
+ expect(phone).toContain('border: 1px solid var(--v2-border)');
+ });
+
+ test('phone drawer and inspector sheet are mutually exclusive overlays', () => {
+ // Both panels are fixed overlays at 390px. Leaving the sheet open while
+ // mounting the drawer puts the latter underneath an inert hit target.
+ const mobileNavOpener = v2Layout.slice(
+ v2Layout.indexOf('const openMobileNav = useCallback(() => {'),
+ v2Layout.indexOf('const closeMobileNav', v2Layout.indexOf('const openMobileNav = useCallback(() => {')),
+ );
+ const inspectorOpener = v2Layout.slice(
+ v2Layout.indexOf('const openInspector = useCallback(() => {'),
+ v2Layout.indexOf('// File pills', v2Layout.indexOf('const openInspector = useCallback(() => {')),
+ );
+ expect(mobileNavOpener).toContain('setInspectorCollapsed(true);');
+ expect(inspectorOpener).toContain('setMobileNavOpen(false);');
});
test('Activity cards have shrinkable desktop and mobile layout guards', () => {
@@ -697,19 +875,9 @@ describe('v2 layout invariants (CSS rule presence)', () => {
expect(v2).toMatch(/@media \(max-width: 640px\)[\s\S]*?\.v2-root \.v2-activity__queue-actions button \{ min-height: 44px; \}/);
});
- test('the shared filter segment uses an unmistakable token-backed selected state', () => {
- const active = ruleBody(v2, '.v2-root button.v2-filter-segment__item--active');
-
- expect(active).toContain('background: var(--v2-accent)');
- expect(active).toContain('border-color: var(--v2-accent)');
- expect(active).toContain('color: var(--v2-surface)');
- expect(active).toContain('font-weight: 700');
- expect(active).not.toContain('var(--v2-accent-soft)');
- });
-
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
+ // On the edge-to-edge phone thread, both the row and each chip need
+ // explicit shrink/wrap rules or the longest prompt creates horizontal
// overflow and pushes the composer action off-screen.
const row = ruleBody(v2, '.v2-chat__starter-prompts');
const chip = ruleBody(v2, '.v2-root button.v2-chat__starter-prompt');
@@ -870,12 +1038,10 @@ describe('v2 layout invariants (CSS rule presence)', () => {
'.v2-root button.v2-chat__mode-option--active',
'.v2-root button.v2-first-run__hello',
'.v2-syscard__cta',
- '.v2-inspector__action--primary',
- '.v2-root a.v2-inspector__btn--primary',
'.v2-root button.v2-approval__btn--approve',
];
- test('all eight filled controls use ink, never cobalt', () => {
+ test('all six ordinary filled controls use ink, never cobalt', () => {
for (const selector of filledControls) {
const rule = selectorRuleBody(v2, selector);
expect(rule).toContain('var(--v2-ink)');
@@ -883,11 +1049,66 @@ describe('v2 layout invariants (CSS rule presence)', () => {
}
});
- test('chat and inspector surfaces do not paint with accent-soft', () => {
+ test('the pending human decision is the sole cobalt-filled action exception: one primary choice, bordered alternatives, and a text-only Other action', () => {
+ const card = ruleBody(v2, '.v2-decision-card');
+ const primary = selectorRuleBody(v2, '.v2-root button.v2-decision-card__choice--primary');
+ const ordinaryChoice = selectorRuleBody(v2, '.v2-root button.v2-decision-card__choice,');
+ const other = ruleBody(v2, '.v2-root button.v2-decision-card__other');
+ expect(card).toContain('box-shadow: 0 0 0 2px var(--v2-accent)');
+ expect(primary).toContain('background: var(--v2-accent)');
+ expect(primary).not.toContain('var(--v2-ink)');
+ expect(ordinaryChoice).toContain('border: 1px solid var(--v2-border)');
+ expect(ordinaryChoice).not.toContain('background: var(--v2-accent)');
+ expect(other).toContain('color: var(--v2-accent-text)');
+ expect(other).toContain('border: 0');
+ expect(other).not.toContain('background: var(--v2-accent)');
+ });
+
+ test('workspace cobalt backgrounds are a reviewed role allowlist: two blocks and five marks', () => {
+ // A class used by the route that gains an accent background joins this
+ // set automatically, so a seventh/extra fill fails instead of hiding in
+ // stale stylesheet rules. Inspector state classes are generated from the
+ // state kind, hence the two explicit additions below.
+ const workspaceSource = [
+ navRail,
+ podsSidebar,
+ thread,
+ threadCard,
+ workspaceInspector,
+ decisionCard,
+ composer,
+ messageRow,
+ ].join('\n');
+ const activeClasses = new Set(Array.from(workspaceSource.matchAll(/\bv2-[\w-]+/g), ([className]) => className));
+ activeClasses.add('v2-workspace-inspector__state--needs-you');
+ activeClasses.add('v2-workspace-inspector__state--working');
+
+ const cobalt = activeAccentBackgroundSelectors(v2, activeClasses);
+ expect(cobalt).toEqual([
+ '.v2-pods__channel-dot--live',
+ '.v2-rail__brand-icon',
+ '.v2-root button.v2-decision-card__choice--primary',
+ '.v2-root button.v2-pods__row--selected',
+ '.v2-thread-card__dot',
+ '.v2-workspace-inspector__state--needs-you',
+ '.v2-workspace-inspector__state--working',
+ ]);
+ });
+
+ test('a ruled in-thread decision drops back to a muted transcript label, not a second card', () => {
+ expect(thread).toContain('settledDecisionByMessageId');
+ expect(threadMessages).toContain('isDecisionRuling={Boolean(settledRuling)}');
+ expect(messageRow).toContain("t('activity.decision.ruledShort')");
+ const ruled = ruleBody(v2, '.v2-msg__ruled');
+ expect(ruled).toContain('color: var(--v2-text-muted)');
+ expect(ruled).toContain('var(--v2-font-mono)');
+ });
+
+ test('chat and workspace-inspector surfaces do not paint with accent-soft', () => {
const prefixes = [
'.v2-chat',
'.v2-msg',
- '.v2-inspector',
+ '.v2-workspace-inspector',
'.v2-approval',
'.v2-syscard',
'.v2-thread-card',
@@ -902,11 +1123,11 @@ describe('v2 layout invariants (CSS rule presence)', () => {
expect(offenders).toEqual([]);
});
- test('hover under chat and inspector changes fill only, never accent color, border, or shadow', () => {
+ test('hover under chat and workspace inspector changes fill only, never accent color, border, or shadow', () => {
const prefixes = [
'.v2-chat',
'.v2-msg',
- '.v2-inspector',
+ '.v2-workspace-inspector',
'.v2-approval',
'.v2-syscard',
'.v2-thread-card',
@@ -931,7 +1152,7 @@ describe('v2 layout invariants (CSS rule presence)', () => {
'.v2-thread-card--addressed .v2-thread-card__count',
'.v2-msg__mention',
'.v2-msg__content a',
- '.v2-inspector__link',
+ '.v2-workspace-inspector__state--needs-you',
'.v2-root button.v2-approval__result-link',
'.v2-root button.v2-chat__new-pod-copy',
'.v2-root .v2-chat__new-pod-error button',
@@ -1062,10 +1283,11 @@ describe('v2 layout invariants (CSS rule presence)', () => {
expect(lhStart).toBeGreaterThan(-1);
const lhBlock = v2.slice(lhStart, v2.indexOf('}', lhStart));
expect(lhBlock).toContain('line-height: 1.6');
- for (const sel of ['.v2-msg__content', '.v2-chat__composer-hint', '.v2-inspector__pod-meta']) {
+ for (const sel of ['.v2-msg__content', '.v2-chat__composer-hint']) {
expect(lhBlock).toContain(`.v2-root:lang(zh) ${sel}`);
}
- const floorStart = v2.indexOf('.v2-root:lang(zh) .v2-chat__composer-hint,\n.v2-root:lang(zh) button.v2-inspector__tab');
+ expect(ruleBody(v2, '.v2-root:lang(zh) .v2-workspace-inspector__empty')).toContain('line-height: 1.6');
+ const floorStart = v2.indexOf('.v2-root:lang(zh) .v2-workspace-inspector__actor,\n.v2-root:lang(zh) .v2-workspace-inspector__task-meta');
expect(floorStart).toBeGreaterThan(-1);
expect(v2.slice(floorStart, v2.indexOf('}', floorStart))).toContain('font-size: 12px');
});
diff --git a/frontend/src/v2/components/V2Composer.tsx b/frontend/src/v2/components/V2Composer.tsx
new file mode 100644
index 0000000000..6995a4f5c9
--- /dev/null
+++ b/frontend/src/v2/components/V2Composer.tsx
@@ -0,0 +1,178 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import V2Avatar from './V2Avatar';
+import type { V2Message } from '../hooks/useV2PodDetail';
+
+export interface V2ComposerMention {
+ id: string;
+ label: string;
+ subtitle: string;
+ avatar?: string | null;
+ value: string;
+}
+
+export interface V2ComposerWarning {
+ agentName: string;
+ state: 'gone-dark' | 'never-connected';
+ fixCommand?: string;
+}
+
+interface V2ComposerProps {
+ podName: string;
+ authorName: string;
+ draft: string;
+ sending: boolean;
+ uploading: boolean;
+ sendError?: string | null;
+ composerError?: string | null;
+ replyTarget: V2Message | null;
+ threadTarget: { id: string; preview: string } | null;
+ mentionOpen: boolean;
+ mentionIndex: number;
+ mentions: V2ComposerMention[];
+ warnings: V2ComposerWarning[];
+ inputRef: React.RefObject;
+ fileInputRef: React.RefObject;
+ mentionDropdownRef: React.RefObject;
+ onDraftChange: (value: string, cursor: number | null) => void;
+ onDraftPointer: (value: string, cursor: number | null) => void;
+ onKeyDown: React.KeyboardEventHandler;
+ onMentionSelect: (item: V2ComposerMention) => void;
+ onSend: () => void;
+ onAttach: (file: File | null) => void;
+ onCancelReply: () => void;
+ onCancelThread: () => void;
+}
+
+/** The one bounded input surface for a workspace thread. */
+const V2Composer: React.FC = ({
+ podName,
+ authorName,
+ draft,
+ sending,
+ uploading,
+ sendError,
+ composerError,
+ replyTarget,
+ threadTarget,
+ mentionOpen,
+ mentionIndex,
+ mentions,
+ warnings,
+ inputRef,
+ fileInputRef,
+ mentionDropdownRef,
+ onDraftChange,
+ onDraftPointer,
+ onKeyDown,
+ onMentionSelect,
+ onSend,
+ onAttach,
+ onCancelReply,
+ onCancelThread,
+}) => {
+ const { t } = useTranslation();
+ return (
+
{useLocation().pathname}
;
-const makePod = (id: string, memberIds: string[], overrides = {}) => ({
+const pod = (id, name, type, members) => ({
_id: id,
- name: id === COMMUNITY_POD_ID ? 'Commonly HQ' : 'My Workspace',
- type: 'team',
- members: memberIds.map((_id) => ({ _id, username: _id, isBot: false })),
- createdAt: '2026-07-21T12:00:00.000Z',
- updatedAt: '2026-07-21T12:00:00.000Z',
- ...overrides,
+ name,
+ type,
+ members,
+ updatedAt: '2026-09-05T00:00:00.000Z',
});
-const renderSidebar = (pods) => {
- const podsState = {
- pods,
- loading: false,
- error: null,
- refresh: mockRefresh,
- createPod: jest.fn(),
- deletePod: jest.fn(),
- patchLastMessage: jest.fn(),
- };
- return render(
- Rendered message
;
- MockV2MessageBubble.displayName = 'MockV2MessageBubble';
- return MockV2MessageBubble;
+jest.mock('../components/V2MessageRow', () => {
+ const MockV2MessageRow = () => Rendered message
;
+ MockV2MessageRow.displayName = 'MockV2MessageRow';
+ return MockV2MessageRow;
});
// jsdom has no scrollIntoView; the component auto-scrolls on mount.
@@ -75,7 +75,7 @@ const makeDetail = (overrides = {}) => ({
const renderChat = (detail, props = {}) => render(
+ {threadTarget && (
+
+ {t('podChat.thread.replyingInThread')} {threadTarget.preview.replace(/\[\[upload:[^\]]*\]\]/g, '📎').slice(0, 40)}
+
+
+ )}
+ {replyTarget && (
+
+
+
+ )}
+
+