- = {}) {
socket: socketReducer,
chatRuntime: chatRuntimeReducer,
agentProfiles: agentProfileReducer,
+ theme: themeReducer,
}),
preloadedState: preload as never,
});
@@ -294,6 +296,7 @@ async function submitComposerText(textarea: HTMLElement, text: string) {
describe('Conversations — smoke render (#1123 welcome-lock removal)', () => {
beforeEach(() => {
vi.clearAllMocks();
+ window.localStorage.clear();
// Reset the mock to defaults for each test
mockGetThreads.mockResolvedValue({ threads: [], count: 0 });
mockGetThreadMessages.mockResolvedValue({ messages: [], count: 0 });
@@ -405,6 +408,142 @@ describe('Conversations — smoke render (#1123 welcome-lock removal)', () => {
});
});
+ it('renders assistant messages as unframed text when the appearance preference is enabled', async () => {
+ const thread = makeThread({ id: 'view-mode-thread', title: 'View Mode Thread' });
+ const messages: ThreadMessage[] = [
+ {
+ id: 'm-user',
+ sender: 'user',
+ type: 'text',
+ content: 'Can you summarize this?',
+ extraMetadata: {},
+ createdAt: '2026-01-01T00:00:00.000Z',
+ },
+ {
+ id: 'm-agent',
+ sender: 'agent',
+ type: 'text',
+ content: 'Long agent output\n\nwith enough structure to prefer a text view.',
+ extraMetadata: {},
+ createdAt: '2026-01-01T00:01:00.000Z',
+ },
+ ];
+ mockGetThreads.mockResolvedValue({ threads: [thread], count: 1 });
+ mockGetThreadMessages.mockResolvedValue({ messages, count: messages.length });
+
+ await act(async () => {
+ await renderConversations({
+ thread: {
+ ...selectedThreadState(thread),
+ messagesByThreadId: { [thread.id]: messages },
+ messages,
+ },
+ socket: socketState('connected'),
+ theme: {
+ mode: 'system',
+ tabBarLabels: 'hover',
+ fontSize: 'medium',
+ agentMessageViewMode: 'text',
+ },
+ });
+ });
+
+ expect(screen.getByTestId('agent-message-text')).toHaveTextContent(
+ 'Long agent output with enough structure to prefer a text view.'
+ );
+ expect(screen.getByText('Can you summarize this?')).toBeInTheDocument();
+ });
+
+ it('keeps bubble mode interactions for assistant citations, copy, and reactions', async () => {
+ const writeText = vi.fn().mockResolvedValue(undefined);
+ Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } });
+ const thread = makeThread({ id: 'bubble-mode-thread', title: 'Bubble Mode Thread' });
+ const agentContent =
+ 'First assistant paragraph with enough text to render.\n\nSecond assistant paragraph stays in bubbles.';
+ const messages: ThreadMessage[] = [
+ {
+ id: 'm-agent-bubble',
+ sender: 'agent',
+ type: 'text',
+ content: agentContent,
+ extraMetadata: {
+ citations: [
+ {
+ id: 'cite-1',
+ key: 'memory-key',
+ namespace: 'personal',
+ snippet: 'Remembered preference',
+ timestamp: '2026-01-01T00:00:00.000Z',
+ score: 0.91,
+ },
+ ],
+ myReactions: ['👍'],
+ },
+ createdAt: '2026-01-01T00:01:00.000Z',
+ },
+ ];
+ vi.mocked(threadApi.updateMessage).mockImplementation(
+ async (_threadId, _messageId, extraMetadata) =>
+ ({ ...messages[0], extraMetadata }) as ThreadMessage
+ );
+ mockGetThreads.mockResolvedValue({ threads: [thread], count: 1 });
+ mockGetThreadMessages.mockResolvedValue({ messages, count: messages.length });
+
+ await act(async () => {
+ await renderConversations({
+ thread: {
+ ...selectedThreadState(thread),
+ messagesByThreadId: { [thread.id]: messages },
+ messages,
+ },
+ socket: socketState('connected'),
+ theme: {
+ mode: 'system',
+ tabBarLabels: 'hover',
+ fontSize: 'medium',
+ agentMessageViewMode: 'bubbles',
+ },
+ });
+ });
+
+ expect(screen.queryByTestId('agent-message-text')).not.toBeInTheDocument();
+ expect(
+ screen.getByText('First assistant paragraph with enough text to render.')
+ ).toBeInTheDocument();
+ expect(screen.getByText('personal 91%')).toBeInTheDocument();
+ expect(screen.getByTitle(/Remembered preference/)).toBeInTheDocument();
+
+ await act(async () => {
+ fireEvent.click(screen.getByTitle('Copy response'));
+ });
+ expect(writeText).toHaveBeenCalledWith(agentContent);
+
+ await act(async () => {
+ fireEvent.click(screen.getByTitle('Remove 👍'));
+ });
+ await waitFor(() => {
+ expect(threadApi.updateMessage).toHaveBeenCalledWith(
+ thread.id,
+ 'm-agent-bubble',
+ expect.objectContaining({ myReactions: [] })
+ );
+ });
+
+ await act(async () => {
+ fireEvent.click(screen.getByTitle('Add reaction'));
+ });
+ await act(async () => {
+ fireEvent.click(screen.getByTitle('🎯'));
+ });
+ await waitFor(() => {
+ expect(threadApi.updateMessage).toHaveBeenCalledWith(
+ thread.id,
+ 'm-agent-bubble',
+ expect.objectContaining({ myReactions: expect.arrayContaining(['🎯']) })
+ );
+ });
+ });
+
// Covers lines 1455-1483: quota pill loading state
it('renders "Loading…" quota pill when isLoadingBudget=true', async () => {
mockUseUsageState.mockReturnValue({
diff --git a/app/src/pages/conversations/components/AgentMessageBubble.test.tsx b/app/src/pages/conversations/components/AgentMessageBubble.test.tsx
index 3496251be..c3f7031c3 100644
--- a/app/src/pages/conversations/components/AgentMessageBubble.test.tsx
+++ b/app/src/pages/conversations/components/AgentMessageBubble.test.tsx
@@ -2,7 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { beforeEach, describe, expect, test, vi } from 'vitest';
-import { BubbleMarkdown, TableCellMarkdown } from './AgentMessageBubble';
+import { AgentMessageText, BubbleMarkdown, TableCellMarkdown } from './AgentMessageBubble';
const mocks = vi.hoisted(() => ({ openUrl: vi.fn(), openWorkspacePath: vi.fn() }));
@@ -116,3 +116,25 @@ describe('BubbleMarkdown math rendering', () => {
expect(container.textContent).toContain('$20');
});
});
+
+describe('AgentMessageText', () => {
+ test('renders openhuman link pills without assistant bubble chrome', () => {
+ render(
+ Appearance'}
+ />
+ );
+
+ expect(screen.getByTestId('agent-message-text')).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: /Appearance/ })).toBeInTheDocument();
+ });
+
+ test('uses the dedicated table renderer in plain text mode', () => {
+ render(>;
/**
* Pill rendered below an agent bubble for each
@@ -122,6 +123,49 @@ export function TableCellMarkdown({ content }: { content: string }) {
);
}
+function AgentMarkdownTable({
+ table,
+ className,
+}: {
+ table: ParsedMarkdownTable;
+ className: string;
+}) {
+ return (
+ => s.kind === 'link'
+ );
+ const table = parseMarkdownTable(textContent);
+
+ return (
+ ) {
state.fontSize = action.payload;
},
+ setAgentMessageViewMode(state, action: PayloadAction) {
+ state.agentMessageViewMode = action.payload;
+ },
},
});
-export const { setThemeMode, setTabBarLabels, setFontSize } = themeSlice.actions;
+export const { setThemeMode, setTabBarLabels, setFontSize, setAgentMessageViewMode } =
+ themeSlice.actions;
export default themeSlice.reducer;
/**
diff --git a/app/test/playwright/specs/chat-harness-subagent.spec.ts b/app/test/playwright/specs/chat-harness-subagent.spec.ts
index e5bdba086..56232bc79 100644
--- a/app/test/playwright/specs/chat-harness-subagent.spec.ts
+++ b/app/test/playwright/specs/chat-harness-subagent.spec.ts
@@ -142,7 +142,7 @@ test.describe('Chat Harness - Subagent', () => {
const threadId = await createNewThread(page);
await sendMessage(page, PROMPT);
- await expect(page.getByText(CANARY_FINAL)).toBeVisible({ timeout: 45_000 });
+ await expect(page.getByText(CANARY_FINAL)).toBeVisible({ timeout: 75_000 });
const runtime = await page.evaluate(currentThreadId => {
const store = (
diff --git a/app/test/playwright/specs/harness-composio-tool-flow.spec.ts b/app/test/playwright/specs/harness-composio-tool-flow.spec.ts
index 42937da4c..f87d069e5 100644
--- a/app/test/playwright/specs/harness-composio-tool-flow.spec.ts
+++ b/app/test/playwright/specs/harness-composio-tool-flow.spec.ts
@@ -211,7 +211,7 @@ test.describe('Harness - Composio tool-call prompt flow', () => {
await sendMessage(page, 'list my GitHub repos');
await expect(page.getByText(CANARY).first()).toBeVisible({ timeout: 60_000 });
- await expect(page.getByText(/openhuman/i)).toBeVisible();
+ await expect(page.getByText(/openhuman/i).first()).toBeVisible();
const log = await requests();
const llmHits = log.filter(
diff --git a/app/test/playwright/specs/settings-leaf-workflows.spec.ts b/app/test/playwright/specs/settings-leaf-workflows.spec.ts
index 9bedc8049..06866ac4e 100644
--- a/app/test/playwright/specs/settings-leaf-workflows.spec.ts
+++ b/app/test/playwright/specs/settings-leaf-workflows.spec.ts
@@ -13,12 +13,16 @@ async function openSettings(page: Page, userId: string, hash: string): Promise {
+async function themeState(
+ page: Page
+): Promise<{ mode?: string; tabBarLabels?: string; agentMessageViewMode?: string }> {
return page.evaluate(() => {
const store = (
window as unknown as {
__OPENHUMAN_STORE__?: {
- getState?: () => { theme?: { mode?: string; tabBarLabels?: string } };
+ getState?: () => {
+ theme?: { mode?: string; tabBarLabels?: string; agentMessageViewMode?: string };
+ };
};
}
).__OPENHUMAN_STORE__;
@@ -26,7 +30,9 @@ async function themeState(page: Page): Promise<{ mode?: string; tabBarLabels?: s
});
}
-async function persistedThemeState(page: Page): Promise<{ mode?: string; tabBarLabels?: string }> {
+async function persistedThemeState(
+ page: Page
+): Promise<{ mode?: string; tabBarLabels?: string; agentMessageViewMode?: string }> {
return page.evaluate(() => {
const raw = localStorage.getItem('persist:theme');
if (!raw) return {};
@@ -35,6 +41,9 @@ async function persistedThemeState(page: Page): Promise<{ mode?: string; tabBarL
return {
mode: parsed.mode ? JSON.parse(parsed.mode) : undefined,
tabBarLabels: parsed.tabBarLabels ? JSON.parse(parsed.tabBarLabels) : undefined,
+ agentMessageViewMode: parsed.agentMessageViewMode
+ ? JSON.parse(parsed.agentMessageViewMode)
+ : undefined,
};
} catch {
return {};
@@ -50,7 +59,7 @@ function unwrap(value: T | { result: T }): T {
}
test.describe('Settings leaf workflows', () => {
- test('appearance theme mode and tab bar label preference persist in app state', async ({
+ test('appearance theme, tab bar, and chat rendering preferences persist in app state', async ({
page,
}) => {
await openSettings(page, 'pw-settings-appearance', '/settings/appearance');
@@ -61,19 +70,23 @@ test.describe('Settings leaf workflows', () => {
if ((await labelSwitch.getAttribute('aria-checked')) !== 'true') {
await labelSwitch.click();
}
+ const assistantTextSwitch = page.getByRole('switch', { name: /Plain assistant responses/ });
+ if ((await assistantTextSwitch.getAttribute('aria-checked')) !== 'true') {
+ await assistantTextSwitch.click();
+ }
await expect
.poll(() => themeState(page))
- .toMatchObject({ mode: 'dark', tabBarLabels: 'always' });
+ .toMatchObject({ mode: 'dark', tabBarLabels: 'always', agentMessageViewMode: 'text' });
await expect
.poll(() => persistedThemeState(page))
- .toMatchObject({ mode: 'dark', tabBarLabels: 'always' });
+ .toMatchObject({ mode: 'dark', tabBarLabels: 'always', agentMessageViewMode: 'text' });
await page.reload();
await waitForAppReady(page);
await expect
.poll(() => themeState(page))
- .toMatchObject({ mode: 'dark', tabBarLabels: 'always' });
+ .toMatchObject({ mode: 'dark', tabBarLabels: 'always', agentMessageViewMode: 'text' });
});
test('embeddings custom endpoint setup writes provider, model, and dimensions', async ({
- {msg.sender === 'agent' ? (
-
- ))}
+ );
+ })}
{isSending &&
// Suppress the legacy 3-dot placeholder once streaming
// output (visible text or thinking) has started — the
diff --git a/app/src/pages/__tests__/Conversations.render.test.tsx b/app/src/pages/__tests__/Conversations.render.test.tsx
index 52324cf84..cdba358cd 100644
--- a/app/src/pages/__tests__/Conversations.render.test.tsx
+++ b/app/src/pages/__tests__/Conversations.render.test.tsx
@@ -23,8 +23,9 @@ import chatRuntimeReducer, {
setToolTimelineForThread,
} from '../../store/chatRuntimeSlice';
import socketReducer from '../../store/socketSlice';
+import themeReducer from '../../store/themeSlice';
import threadReducer, { setSelectedThread } from '../../store/threadSlice';
-import type { Thread } from '../../types/thread';
+import type { Thread, ThreadMessage } from '../../types/thread';
// ── Hoisted mock state ─────────────────────────────────────────────────────
@@ -172,6 +173,7 @@ function buildStore(preload: Record
- {splitAgentMessageIntoBubbles(msg.content).map(
- (segment, index, parts) => {
- const position: AgentBubblePosition =
- parts.length === 1
- ? 'single'
- : index === 0
- ? 'first'
- : index === parts.length - 1
- ? 'last'
- : 'middle';
-
- return (
-
- ) : (
- - {formatRelativeTime(msg.createdAt)} -
- )} -
- {(() => {
- const dataUris = Array.isArray(msg.extraMetadata?.attachmentDataUris)
- ? (msg.extraMetadata.attachmentDataUris as string[])
- : parseMessageImages(msg.content ?? '').dataUris;
- const hasImages = dataUris.length > 0;
- const showTime = latestVisibleMessage?.id === msg.id;
- return (
- <>
- {hasImages && (
-
+ {visibleMessages.map(msg => {
+ const isAgentTextMode = msg.sender === 'agent' && agentMessageViewMode === 'text';
+ return (
+
- {dataUris.map((uri, i) => (
- 
- ))}
-
- )}
- {(msg.content || showTime) && (
-
- {msg.content && (
-
- )}
-
- );
- })()}
- - {formatRelativeTime(msg.createdAt)} -
- )} -
+ {shouldRenderTimelineBeforeLatestAgentMessage &&
+ latestVisibleAgentMessage?.id === msg.id && (
+ setOpenSubagentTaskId(sub.taskId)}
+ />
)}
-
- {(() => {
- if (latestVisibleMessage?.id !== msg.id) return null;
- const myReactions =
- (msg.extraMetadata?.myReactions as string[] | undefined) ?? [];
- const hasReactions = myReactions.length > 0;
- // Show reaction row only for the most recent visible message.
- if (!hasReactions && msg.sender !== 'agent') return null;
- return (
-
-
- {myReactions.map(emoji => (
-
+
+ );
+}
+
export function AgentMessageBubble({
content,
position = 'single',
@@ -144,39 +188,10 @@ export function AgentMessageBubble({
if (table) {
return (
-
+
+
+
+
+ | + {header} + | + ))} +
|---|
|
+ |
+ ))}
+
-
+
-
-
-
-
- | - {header} - | - ))} -
|---|
|
- |
- ))}
-
+ {table ? (
+
+ );
+}
diff --git a/app/src/store/index.ts b/app/src/store/index.ts
index 7df2d9d7b..8e480f392 100644
--- a/app/src/store/index.ts
+++ b/app/src/store/index.ts
@@ -95,7 +95,7 @@ const persistedLocaleReducer = persistReducer(localePersistConfig, localeReducer
const themePersistConfig = {
key: 'theme',
storage: localStorageAdapter,
- whitelist: ['mode', 'tabBarLabels', 'fontSize'],
+ whitelist: ['mode', 'tabBarLabels', 'fontSize', 'agentMessageViewMode'],
};
const persistedThemeReducer = persistReducer(themePersistConfig, themeReducer);
diff --git a/app/src/store/themeSlice.test.ts b/app/src/store/themeSlice.test.ts
index 1f2a3af6c..cf4e310a9 100644
--- a/app/src/store/themeSlice.test.ts
+++ b/app/src/store/themeSlice.test.ts
@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest';
import themeReducer, {
FONT_SIZE_PX,
type FontSize,
+ setAgentMessageViewMode,
setFontSize,
setTabBarLabels,
setThemeMode,
@@ -14,6 +15,11 @@ describe('themeSlice', () => {
expect(state.fontSize).toBe('medium');
});
+ it('defaults assistant message rendering to bubbles', () => {
+ const state = themeReducer(undefined, { type: '@@INIT' });
+ expect(state.agentMessageViewMode).toBe('bubbles');
+ });
+
it('updates fontSize via setFontSize', () => {
let state = themeReducer(undefined, { type: '@@INIT' });
state = themeReducer(state, setFontSize('large'));
@@ -27,7 +33,18 @@ describe('themeSlice', () => {
state = themeReducer(state, setThemeMode('dark'));
state = themeReducer(state, setTabBarLabels('always'));
state = themeReducer(state, setFontSize('xlarge'));
- expect(state).toEqual({ mode: 'dark', tabBarLabels: 'always', fontSize: 'xlarge' });
+ expect(state).toEqual({
+ mode: 'dark',
+ tabBarLabels: 'always',
+ fontSize: 'xlarge',
+ agentMessageViewMode: 'bubbles',
+ });
+ });
+
+ it('updates assistant message view mode', () => {
+ let state = themeReducer(undefined, { type: '@@INIT' });
+ state = themeReducer(state, setAgentMessageViewMode('text'));
+ expect(state.agentMessageViewMode).toBe('text');
});
it('maps every font size to a concrete px value', () => {
diff --git a/app/src/store/themeSlice.ts b/app/src/store/themeSlice.ts
index 2d843684f..3c40d07ca 100644
--- a/app/src/store/themeSlice.ts
+++ b/app/src/store/themeSlice.ts
@@ -2,6 +2,7 @@ import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
export type ThemeMode = 'light' | 'dark' | 'system';
export type TabBarLabels = 'hover' | 'always';
+export type AgentMessageViewMode = 'bubbles' | 'text';
/**
* Global app font size (issue #3120). Drives the root `` font-size, which
* scales every rem-based Tailwind text utility — including chat messages and the
@@ -26,9 +27,15 @@ interface ThemeState {
mode: ThemeMode;
tabBarLabels: TabBarLabels;
fontSize: FontSize;
+ agentMessageViewMode: AgentMessageViewMode;
}
-const initialState: ThemeState = { mode: 'system', tabBarLabels: 'hover', fontSize: 'medium' };
+const initialState: ThemeState = {
+ mode: 'system',
+ tabBarLabels: 'hover',
+ fontSize: 'medium',
+ agentMessageViewMode: 'bubbles',
+};
const themeSlice = createSlice({
name: 'theme',
@@ -43,10 +50,14 @@ const themeSlice = createSlice({
setFontSize(state, action: PayloadAction
+ {linkSegments.map((segment, idx) => (
+
+ )}
+