{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 dea9bf486..52ca5fb54 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/V2Inspector', () => () => 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 0c2040a66..4135256fe 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 000000000..edf7841aa
--- /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__/V2PodsSidebar.community.test.tsx b/frontend/src/v2/__tests__/V2PodsSidebar.community.test.tsx
index 77357d5dd..18b5006b9 100644
--- a/frontend/src/v2/__tests__/V2PodsSidebar.community.test.tsx
+++ b/frontend/src/v2/__tests__/V2PodsSidebar.community.test.tsx
@@ -47,6 +47,7 @@ const renderSidebar = (pods, selectedPodId = 'sharpen') => render(
{
_id: 'telegram', type: 'telegram', status: 'connected', podId: { _id: 'sharpen', name: 'Sharpen' },
}]);
}
- if (url === '/api/activity/decision-queue') {
- return Promise.resolve({ items: [{ id: 'decision-1', podId: 'sharpen' }] });
- }
return Promise.resolve([]);
});
await act(async () => { await i18n.changeLanguage('en'); });
@@ -92,7 +90,7 @@ describe('V2PodsSidebar workspace groups', () => {
const pods = screen.getByRole('heading', { name: 'pods' }).closest('section');
const direct = screen.getByRole('heading', { name: 'direct' }).closest('section');
- expect(within(pods).getByRole('button', { name: 'Sharpen' })).toBeInTheDocument();
+ expect(within(pods).getByRole('button', { name: /^Sharpen/ })).toBeInTheDocument();
expect(within(pods).getByRole('button', { name: 'Agent Admin' })).toBeInTheDocument();
expect(within(pods).getByRole('button', { name: 'Study Group' })).toBeInTheDocument();
expect(within(pods).getByRole('button', { name: 'Project Chat' })).toBeInTheDocument();
diff --git a/frontend/src/v2/__tests__/V2ThreadDecisionCard.test.tsx b/frontend/src/v2/__tests__/V2ThreadDecisionCard.test.tsx
new file mode 100644
index 000000000..239e603b4
--- /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 a48e1b4a6..1965de339 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 5255502f7..908690ada 100644
--- a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
+++ b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
@@ -62,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.
@@ -83,10 +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');
@@ -123,6 +145,14 @@ describe('v2 layout invariants (CSS rule presence)', () => {
expect(lastRuleBody(v2, '.v2-shell')).toContain('padding: 14px');
});
+ 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');
@@ -180,10 +210,14 @@ describe('v2 layout invariants (CSS rule presence)', () => {
expect(podsSidebar).not.toContain('v2-pods__item-dot');
});
- test('the selected-room count is derived from the decision queue, not a second unread path', () => {
- expect(podsSidebar).toContain("'/api/activity/decision-queue'");
+ 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');
});
@@ -231,14 +265,25 @@ describe('v2 layout invariants (CSS rule presence)', () => {
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
@@ -355,6 +400,7 @@ describe('v2 layout invariants (CSS rule presence)', () => {
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');
@@ -370,6 +416,10 @@ describe('v2 layout invariants (CSS rule presence)', () => {
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');
@@ -448,7 +498,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
@@ -735,12 +786,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 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', () => {
@@ -776,8 +888,8 @@ describe('v2 layout invariants (CSS rule presence)', () => {
});
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');
@@ -949,6 +1061,61 @@ describe('v2 layout invariants (CSS rule presence)', () => {
}
});
+ 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',
diff --git a/frontend/src/v2/components/V2Composer.tsx b/frontend/src/v2/components/V2Composer.tsx
new file mode 100644
index 000000000..6995a4f5c
--- /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 (
+
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 && (
+
+
+
+ )}
+
+