{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 dea9bf4869..6668d50b48 100644
--- a/frontend/src/v2/__tests__/V2LayoutSelection.test.tsx
+++ b/frontend/src/v2/__tests__/V2LayoutSelection.test.tsx
@@ -38,7 +38,7 @@ jest.mock('../../context/AuthContext', () => ({
jest.mock('../components/V2NavRail', () => () => null);
jest.mock('../components/V2PodsSidebar', () => () => null);
-jest.mock('../components/V2PodChat', () => () => null);
+jest.mock('../components/V2Thread', () => () => null);
jest.mock('../components/V2Inspector', () => () => null);
jest.mock('../components/V2InviteModal', () => () => null);
jest.mock('../components/V2FirstRunHero', () => () => null);
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__/V2ThreadDecisionCard.test.tsx b/frontend/src/v2/__tests__/V2ThreadDecisionCard.test.tsx
new file mode 100644
index 0000000000..1d8894d25b
--- /dev/null
+++ b/frontend/src/v2/__tests__/V2ThreadDecisionCard.test.tsx
@@ -0,0 +1,96 @@
+// @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' } } } });
+ });
+
+ test('replaces the decision request prose at its durable message position with a live card', async () => {
+ 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(),
+ ));
+ expect(await screen.findByRole('status')).toHaveTextContent('Lily ruled: Ship the rebuilt workspace');
+ });
+});
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 5255502f78..73f7e090cd 100644
--- a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
+++ b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
@@ -83,9 +83,14 @@ 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 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 v2Layout = read('../components/V2Layout.tsx');
const podBoard = read('../components/V2PodBoard.tsx');
const activityPage = read('../components/V2ActivityPage.tsx');
@@ -231,14 +236,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
@@ -448,7 +464,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 +752,11 @@ 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(ruleBody(v2, '.v2-thread__header')).toContain('border-bottom: 1px solid var(--v2-border-soft)');
+ expect(ruleBody(v2, '.v2-thread__working')).toContain('font: 500 11px/16px var(--v2-font-mono)');
});
test('Activity cards have shrinkable desktop and mobile layout guards', () => {
@@ -949,6 +965,14 @@ describe('v2 layout invariants (CSS rule presence)', () => {
}
});
+ test('the pending human decision is the one cobalt action surface', () => {
+ const card = ruleBody(v2, '.v2-decision-card');
+ const recommended = selectorRuleBody(v2, '.v2-root button.v2-decision-card__choice--recommended');
+ expect(card).toContain('box-shadow: 0 0 0 2px var(--v2-accent)');
+ expect(recommended).toContain('background: var(--v2-accent)');
+ expect(recommended).not.toContain('var(--v2-ink)');
+ });
+
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 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 (
+
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 && (
+
+
+
+ )}
+
+