;
+ if (applyPreviewResults(messages, thumbnails)) {
+ updatedAny = true;
+ }
+ } catch (err) {
+ console.warn('[loadMissingPreviews] Failed:', err);
+ return updatedAny;
+ }
+
+ if (!collectMissingPreviewRefs(messages).some((ref) => ref.mimeType.startsWith('image/'))) {
+ return updatedAny;
+ }
+ if (attempt >= IMAGE_PREVIEW_RETRY_DELAYS_MS.length) {
+ return markMissingImagePreviewsUnavailable(messages) || updatedAny;
+ }
+ attempt += 1;
}
}
diff --git a/src/stores/chat/types.ts b/src/stores/chat/types.ts
index 6bee019..52a145c 100644
--- a/src/stores/chat/types.ts
+++ b/src/stores/chat/types.ts
@@ -4,6 +4,7 @@ export interface AttachedFileMeta {
mimeType: string;
fileSize: number;
preview: string | null;
+ previewStatus?: 'unavailable';
filePath?: string;
source?: 'user-upload' | 'tool-result' | 'message-ref' | 'gateway-media';
/**
diff --git a/tests/e2e/chat-run-state-events.spec.ts b/tests/e2e/chat-run-state-events.spec.ts
index d45d763..ae5349d 100644
--- a/tests/e2e/chat-run-state-events.spec.ts
+++ b/tests/e2e/chat-run-state-events.spec.ts
@@ -97,4 +97,79 @@ test.describe('ClawX chat run state events', () => {
await closeElectronApp(app);
}
});
+
+ test('shows clear image preview states for generated media while hydration retries', async ({ launchElectronApp }) => {
+ const app = await launchElectronApp({ skipSetup: true });
+ const gatewayUrl = '/api/chat/media/outgoing/agent%3Amain%3Aimage-preview/image-1/full';
+ const history = [
+ {
+ role: 'assistant',
+ id: 'generated-image',
+ timestamp: Date.now() / 1000,
+ content: [{
+ type: 'image',
+ url: gatewayUrl,
+ mimeType: 'image/png',
+ alt: 'generated.png',
+ }],
+ },
+ ];
+
+ try {
+ await installIpcMocks(app, {
+ gatewayStatus: { state: 'running', port: 18789, pid: 12345, gatewayReady: true },
+ gatewayRpc: {
+ [stableStringify(['sessions.list', { includeDerivedTitles: true, includeLastMessage: true }])]: {
+ success: true,
+ result: {
+ sessions: [{ key: MAIN_SESSION_KEY, displayName: 'main' }],
+ },
+ },
+ [stableStringify(['chat.history', { sessionKey: MAIN_SESSION_KEY, limit: 200, maxChars: 500000 }])]: {
+ success: true,
+ result: { messages: history },
+ },
+ },
+ hostApi: {
+ [stableStringify(['/api/gateway/status', 'GET'])]: {
+ ok: true,
+ data: {
+ status: 200,
+ ok: true,
+ json: { state: 'running', port: 18789, pid: 12345, gatewayReady: true },
+ },
+ },
+ [stableStringify(['/api/agents', 'GET'])]: {
+ ok: true,
+ data: {
+ status: 200,
+ ok: true,
+ json: { success: true, agents: [{ id: 'main', name: 'Main' }] },
+ },
+ },
+ [stableStringify(['/api/files/thumbnails', 'POST'])]: {
+ ok: true,
+ data: {
+ status: 200,
+ ok: true,
+ json: { [gatewayUrl]: { preview: null, fileSize: 0 } },
+ },
+ },
+ },
+ });
+
+ const page = await getStableWindow(app);
+ try {
+ await page.reload();
+ } catch (error) {
+ if (!String(error).includes('ERR_FILE_NOT_FOUND')) {
+ throw error;
+ }
+ }
+
+ await expect(page.getByTestId('image-preview-unavailable')).toBeVisible({ timeout: 10_000 });
+ } finally {
+ await closeElectronApp(app);
+ }
+ });
});
diff --git a/tests/unit/chat-helpers-enrichment.test.ts b/tests/unit/chat-helpers-enrichment.test.ts
index 42767ee..9269831 100644
--- a/tests/unit/chat-helpers-enrichment.test.ts
+++ b/tests/unit/chat-helpers-enrichment.test.ts
@@ -3,7 +3,9 @@ import {
enrichWithToolResultFiles,
enrichWithToolCallAttachments,
enrichWithCachedImages,
+ loadMissingPreviews,
} from '@/stores/chat/helpers';
+import { invokeIpc } from '@/lib/api-client';
import type { RawMessage } from '@/stores/chat';
vi.mock('@/lib/api-client', () => ({
@@ -371,3 +373,77 @@ describe('enrichWithToolCallAttachments', () => {
expect(enriched[0]?._attachedFiles?.[0]?.mimeType).toBe('image/png');
});
});
+
+describe('loadMissingPreviews', () => {
+ it('retries image preview hydration when Gateway media records are not ready yet', async () => {
+ vi.useFakeTimers();
+ try {
+ const gatewayUrl = '/api/chat/media/outgoing/agent%3Amain%3As-1/generated/full';
+ const messages: RawMessage[] = [
+ {
+ role: 'assistant',
+ content: [],
+ _attachedFiles: [{
+ fileName: 'generated.png',
+ mimeType: 'image/png',
+ fileSize: 0,
+ preview: null,
+ gatewayUrl,
+ source: 'gateway-media',
+ }],
+ },
+ ];
+
+ vi.mocked(invokeIpc)
+ .mockResolvedValueOnce({ [gatewayUrl]: { preview: null, fileSize: 0 } })
+ .mockResolvedValueOnce({ [gatewayUrl]: { preview: 'data:image/png;base64,ok', fileSize: 42 } });
+
+ const result = loadMissingPreviews(messages);
+ expect(invokeIpc).toHaveBeenCalledTimes(1);
+
+ await vi.advanceTimersByTimeAsync(300);
+ await expect(result).resolves.toBe(true);
+
+ expect(invokeIpc).toHaveBeenCalledTimes(2);
+ expect(messages[0]?._attachedFiles?.[0]).toMatchObject({
+ preview: 'data:image/png;base64,ok',
+ fileSize: 42,
+ });
+ expect(messages[0]?._attachedFiles?.[0]?.previewStatus).toBeUndefined();
+ } finally {
+ vi.useRealTimers();
+ }
+ });
+
+ it('marks image previews unavailable after retry exhaustion', async () => {
+ vi.useFakeTimers();
+ try {
+ const gatewayUrl = '/api/chat/media/outgoing/agent%3Amain%3As-1/missing/full';
+ const messages: RawMessage[] = [
+ {
+ role: 'assistant',
+ content: [],
+ _attachedFiles: [{
+ fileName: 'missing.png',
+ mimeType: 'image/png',
+ fileSize: 0,
+ preview: null,
+ gatewayUrl,
+ source: 'gateway-media',
+ }],
+ },
+ ];
+
+ vi.mocked(invokeIpc).mockResolvedValue({ [gatewayUrl]: { preview: null, fileSize: 0 } });
+
+ const result = loadMissingPreviews(messages);
+ await vi.advanceTimersByTimeAsync(300 + 900 + 1800);
+ await expect(result).resolves.toBe(true);
+
+ expect(invokeIpc).toHaveBeenCalledTimes(4);
+ expect(messages[0]?._attachedFiles?.[0]?.previewStatus).toBe('unavailable');
+ } finally {
+ vi.useRealTimers();
+ }
+ });
+});
diff --git a/tests/unit/chat-message.test.tsx b/tests/unit/chat-message.test.tsx
index 15c0e01..0de35fa 100644
--- a/tests/unit/chat-message.test.tsx
+++ b/tests/unit/chat-message.test.tsx
@@ -77,6 +77,51 @@ describe('ChatMessage attachment dedupe', () => {
expect(screen.getByAltText('desktop_screenshot.png')).toBeInTheDocument();
});
+ it('shows an explicit loading state for image artifacts before preview hydration finishes', () => {
+ const message: RawMessage = {
+ role: 'assistant',
+ content: 'Image generated.',
+ _attachedFiles: [
+ {
+ fileName: 'generated.png',
+ mimeType: 'image/png',
+ fileSize: 0,
+ preview: null,
+ gatewayUrl: '/api/chat/media/outgoing/agent%3Amain%3As-1/generated/full',
+ source: 'gateway-media',
+ },
+ ],
+ };
+
+ render();
+
+ expect(screen.getByTestId('image-preview-loading')).toBeInTheDocument();
+ expect(screen.queryByTestId('image-preview-unavailable')).not.toBeInTheDocument();
+ });
+
+ it('shows an unavailable state after image preview hydration gives up', () => {
+ const message: RawMessage = {
+ role: 'assistant',
+ content: 'Image generated.',
+ _attachedFiles: [
+ {
+ fileName: 'generated.png',
+ mimeType: 'image/png',
+ fileSize: 0,
+ preview: null,
+ previewStatus: 'unavailable',
+ gatewayUrl: '/api/chat/media/outgoing/agent%3Amain%3As-1/generated/full',
+ source: 'gateway-media',
+ },
+ ],
+ };
+
+ render();
+
+ expect(screen.getByTestId('image-preview-unavailable')).toBeInTheDocument();
+ expect(screen.queryByTestId('image-preview-loading')).not.toBeInTheDocument();
+ });
+
it('keeps message-ref image artifacts visible alongside reply text when process attachments are suppressed', () => {
const message: RawMessage = {
role: 'assistant',
diff --git a/tests/unit/chat-page-execution-graph.test.tsx b/tests/unit/chat-page-execution-graph.test.tsx
index fae51f2..195d1da 100644
--- a/tests/unit/chat-page-execution-graph.test.tsx
+++ b/tests/unit/chat-page-execution-graph.test.tsx
@@ -21,6 +21,19 @@ vi.mock('@/stores/agents', () => ({
useAgentsStore: (selector: (state: typeof agentsState) => unknown) => selector(agentsState),
}));
+vi.mock('@/stores/artifact-panel', () => {
+ const state = {
+ open: false,
+ widthPct: 45,
+ openChanges: vi.fn(),
+ openPreview: vi.fn(),
+ close: vi.fn(),
+ };
+ return {
+ useArtifactPanel: (selector: (value: typeof state) => unknown) => selector(state),
+ };
+});
+
vi.mock('@/lib/host-api', () => ({
hostApiFetch: (...args: unknown[]) => hostApiFetchMock(...args),
}));
@@ -74,7 +87,17 @@ vi.mock('@/pages/Chat/ChatInput', () => ({
}));
vi.mock('@/pages/Chat/ChatMessage', () => ({
- ChatMessage: ({ message, textOverride }: { message: { content?: unknown }; textOverride?: string }) => {
+ ChatMessage: ({
+ message,
+ textOverride,
+ isStreaming,
+ suppressAssistantText,
+ }: {
+ message: { content?: unknown };
+ textOverride?: string;
+ isStreaming?: boolean;
+ suppressAssistantText?: boolean;
+ }) => {
const text = typeof textOverride === 'string'
? textOverride
: typeof message?.content === 'string'
@@ -86,7 +109,11 @@ vi.mock('@/pages/Chat/ChatMessage', () => ({
.map((block) => block.text)
.join(' ')
: '';
- return {text}
;
+ return (
+
+ {suppressAssistantText ? '' : text}
+
+ );
},
}));
@@ -352,6 +379,66 @@ describe('Chat execution graph lifecycle', () => {
expect(screen.getAllByText('404 Resource not found').length).toBeGreaterThan(0);
});
+ it('keeps history final reply folded while matching streamed text is still active', async () => {
+ const finalText = 'History final answer is already recorded.';
+ const { useChatStore } = await import('@/stores/chat');
+ useChatStore.setState({
+ messages: [
+ {
+ role: 'user',
+ content: 'Summarize the run',
+ },
+ {
+ role: 'assistant',
+ id: 'tool-turn',
+ content: [
+ { type: 'text', text: 'Reading the source data.' },
+ { type: 'tool_use', id: 'read-1', name: 'read_file', input: { path: '/tmp/source.txt' } },
+ ],
+ },
+ {
+ role: 'assistant',
+ id: 'final-turn',
+ content: [{ type: 'text', text: finalText }],
+ },
+ ],
+ loading: false,
+ error: null,
+ runError: null,
+ sending: true,
+ activeRunId: 'run-history-stream-race',
+ streamingText: '',
+ streamingMessage: {
+ role: 'assistant',
+ content: [{ type: 'text', text: finalText }],
+ },
+ streamingTools: [],
+ pendingFinal: false,
+ lastUserMessageAt: Date.now(),
+ pendingToolImages: [],
+ sessions: [{ key: 'agent:main:main' }],
+ currentSessionKey: 'agent:main:main',
+ currentAgentId: 'main',
+ sessionLabels: {},
+ sessionLastActivity: {},
+ thinkingLevel: null,
+ });
+
+ const { Chat } = await import('@/pages/Chat/index');
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByTestId('chat-execution-graph')).toHaveAttribute('data-collapsed', 'false');
+ });
+
+ expect(screen.getByTestId('mock-streaming-message')).toHaveTextContent(finalText);
+ expect(
+ screen.getAllByTestId('mock-chat-message')
+ .filter((element) => element.textContent === finalText),
+ ).toHaveLength(0);
+ });
+
it('stops trailing thinking when history already contains the final reply but sending is stuck', async () => {
const { useChatStore } = await import('@/stores/chat');
useChatStore.setState({
@@ -407,6 +494,95 @@ describe('Chat execution graph lifecycle', () => {
expect(screen.queryByTestId('chat-activity-indicator')).not.toBeInTheDocument();
});
+ it('stops trailing thinking when generated image media arrives but session wake is missed', async () => {
+ const { useChatStore } = await import('@/stores/chat');
+ useChatStore.setState({
+ messages: [
+ {
+ role: 'user',
+ content: '生成一个小麦',
+ },
+ {
+ role: 'assistant',
+ id: 'image-tool-turn',
+ content: [
+ {
+ type: 'toolCall',
+ id: 'image-1',
+ name: 'image_generate',
+ arguments: { prompt: 'golden wheat' },
+ },
+ ],
+ },
+ {
+ role: 'assistant',
+ id: 'message-tool-turn',
+ content: [
+ {
+ type: 'toolCall',
+ id: 'message-1',
+ name: 'message',
+ arguments: {
+ action: 'send',
+ attachments: [{ path: '/tmp/wheat.png' }],
+ },
+ },
+ ],
+ },
+ {
+ role: 'assistant',
+ id: 'generated-image',
+ content: [{
+ type: 'image',
+ url: '/api/chat/media/outgoing/agent%3Amain%3As-1/image-1/full',
+ mimeType: 'image/png',
+ alt: 'wheat.png',
+ }],
+ _attachedFiles: [{
+ fileName: 'wheat.png',
+ mimeType: 'image/png',
+ fileSize: 42,
+ preview: 'data:image/png;base64,ok',
+ gatewayUrl: '/api/chat/media/outgoing/agent%3Amain%3As-1/image-1/full',
+ source: 'gateway-media',
+ }],
+ },
+ ],
+ loading: false,
+ error: null,
+ runError: null,
+ sending: true,
+ activeRunId: 'run-stuck-image',
+ streamingText: '',
+ streamingMessage: {
+ role: 'assistant',
+ content: [{ type: 'thinking', thinking: '等待图片生成完成。' }],
+ },
+ streamingTools: [],
+ pendingFinal: false,
+ lastUserMessageAt: Date.now(),
+ pendingToolImages: [],
+ sessions: [{ key: 'agent:main:main' }],
+ currentSessionKey: 'agent:main:main',
+ currentAgentId: 'main',
+ sessionLabels: {},
+ sessionLastActivity: {},
+ thinkingLevel: null,
+ });
+
+ const { Chat } = await import('@/pages/Chat/index');
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByTestId('chat-execution-graph')).toBeInTheDocument();
+ });
+
+ expect(screen.queryByTestId('chat-execution-step-thinking-trailing')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('chat-typing-indicator')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('chat-activity-indicator')).not.toBeInTheDocument();
+ });
+
it('keeps the run active when narration landed in history before tools finished', async () => {
const { useChatStore } = await import('@/stores/chat');
useChatStore.setState({
diff --git a/tests/unit/task-visualization.test.ts b/tests/unit/task-visualization.test.ts
index 3680cc5..53c722b 100644
--- a/tests/unit/task-visualization.test.ts
+++ b/tests/unit/task-visualization.test.ts
@@ -1,5 +1,10 @@
import { describe, expect, it } from 'vitest';
-import { deriveTaskSteps, parseSubagentCompletionInfo } from '@/pages/Chat/task-visualization';
+import {
+ deriveTaskSteps,
+ findReplyMessageIndex,
+ parseSubagentCompletionInfo,
+ segmentHasFinalReply,
+} from '@/pages/Chat/task-visualization';
import { stripProcessMessagePrefix } from '@/pages/Chat/message-utils';
import type { RawMessage, ToolStatus } from '@/stores/chat';
@@ -366,3 +371,51 @@ status: completed successfully`,
});
});
});
+
+describe('run completion detection', () => {
+ it('treats delivered image attachments as a final reply after image generation tools', () => {
+ const messages: RawMessage[] = [
+ {
+ role: 'assistant',
+ content: [{
+ type: 'toolCall',
+ id: 'tool-image',
+ name: 'image_generate',
+ arguments: { prompt: 'wheat' },
+ }],
+ },
+ {
+ role: 'assistant',
+ content: [{
+ type: 'toolCall',
+ id: 'tool-message',
+ name: 'message',
+ arguments: {
+ action: 'send',
+ attachments: [{ path: '/tmp/wheat.png' }],
+ },
+ }],
+ },
+ {
+ role: 'assistant',
+ content: [{
+ type: 'image',
+ url: '/api/chat/media/outgoing/agent%3Amain%3As-1/image-1/full',
+ mimeType: 'image/png',
+ alt: 'wheat.png',
+ }],
+ _attachedFiles: [{
+ fileName: 'wheat.png',
+ mimeType: 'image/png',
+ fileSize: 42,
+ preview: 'data:image/png;base64,ok',
+ gatewayUrl: '/api/chat/media/outgoing/agent%3Amain%3As-1/image-1/full',
+ source: 'gateway-media',
+ }],
+ },
+ ];
+
+ expect(segmentHasFinalReply(messages)).toBe(true);
+ expect(findReplyMessageIndex(messages, false)).toBe(2);
+ });
+});