feat: 添加 UI 组件增强与测试覆盖

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: unraid

src/components/EffortIndicator.ts

@@ -3,6 +3,7 @@ import {
   EFFORT_LOW,
   EFFORT_MAX,
   EFFORT_MEDIUM,
+  EFFORT_XHIGH,
 } from '../constants/figures.js'
 import {
   type EffortLevel,
@@ -32,6 +33,8 @@ export function effortLevelToSymbol(level: EffortLevel): string {
       return EFFORT_MEDIUM
     case 'high':
       return EFFORT_HIGH
+    case 'xhigh':
+      return EFFORT_XHIGH
     case 'max':
       return EFFORT_MAX
     default:

src/components/FeedbackSurvey/__tests__/useFrustrationDetection.test.tsx

@@ -0,0 +1,116 @@
+import { afterEach, describe, expect, mock, test } from 'bun:test';
+import * as React from 'react';
+import { renderToString } from '../../../utils/staticRender.js';
+import type { Message } from '../../../types/message.js';
+
+let transcriptShareDismissed = false;
+let productFeedbackAllowed = true;
+const mockSubmitTranscriptShare = mock(async () => ({ success: true }));
+
+mock.module('../../../utils/config.js', () => ({
+  getGlobalConfig: () => ({ transcriptShareDismissed }),
+  saveGlobalConfig: (
+    updater: (current: { transcriptShareDismissed?: boolean }) => {
+      transcriptShareDismissed?: boolean;
+    },
+  ) => {
+    const next = updater({ transcriptShareDismissed });
+    transcriptShareDismissed = next.transcriptShareDismissed ?? false;
+  },
+}));
+mock.module('../../../services/policyLimits/index.js', () => ({
+  isPolicyAllowed: () => productFeedbackAllowed,
+}));
+mock.module('../submitTranscriptShare.js', () => ({
+  submitTranscriptShare: mockSubmitTranscriptShare,
+}));
+
+const { useFrustrationDetection } = await import('../useFrustrationDetection.js');
+
+type DetectionResult = ReturnType<typeof useFrustrationDetection>;
+
+function apiError(uuid: string): Message {
+  return {
+    type: 'assistant',
+    uuid: uuid as any,
+    isApiErrorMessage: true,
+    message: { role: 'assistant', content: [] },
+  };
+}
+
+async function renderDetection(props: {
+  messages: Message[];
+  isLoading?: boolean;
+  hasActivePrompt?: boolean;
+  otherSurveyOpen?: boolean;
+}): Promise<DetectionResult> {
+  let result: DetectionResult | null = null;
+  function Probe(): React.ReactNode {
+    result = useFrustrationDetection(
+      props.messages,
+      props.isLoading ?? false,
+      props.hasActivePrompt ?? false,
+      props.otherSurveyOpen ?? false,
+    );
+    return null;
+  }
+
+  await renderToString(<Probe />);
+  if (!result) {
+    throw new Error('useFrustrationDetection did not render');
+  }
+  return result;
+}
+
+afterEach(() => {
+  transcriptShareDismissed = false;
+  productFeedbackAllowed = true;
+  mockSubmitTranscriptShare.mockClear();
+});
+
+describe('useFrustrationDetection', () => {
+  test('stays closed without frustration signals', async () => {
+    const result = await renderDetection({ messages: [] });
+
+    expect(result.state).toBe('closed');
+    expect(typeof result.handleTranscriptSelect).toBe('function');
+  });
+
+  test('opens a transcript prompt for repeated API errors', async () => {
+    const result = await renderDetection({
+      messages: [apiError('a'), apiError('b')],
+    });
+
+    expect(result.state).toBe('transcript_prompt');
+  });
+
+  test('does not prompt while loading, prompting, blocked by another survey, dismissed, or policy-denied', async () => {
+    const messages = [apiError('a'), apiError('b')];
+
+    expect((await renderDetection({ messages, isLoading: true })).state).toBe('closed');
+    expect((await renderDetection({ messages, hasActivePrompt: true })).state).toBe('closed');
+    expect((await renderDetection({ messages, otherSurveyOpen: true })).state).toBe('closed');
+
+    transcriptShareDismissed = true;
+    expect((await renderDetection({ messages })).state).toBe('closed');
+
+    transcriptShareDismissed = false;
+    productFeedbackAllowed = false;
+    expect((await renderDetection({ messages })).state).toBe('closed');
+  });
+
+  test('submits transcript share when the user accepts', async () => {
+    const result = await renderDetection({
+      messages: [apiError('a'), apiError('b')],
+    });
+
+    result.handleTranscriptSelect('yes');
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    expect(mockSubmitTranscriptShare).toHaveBeenCalledWith(
+      [apiError('a'), apiError('b')],
+      'frustration',
+      expect.any(String),
+    );
+  });
+});

src/components/FeedbackSurvey/useFrustrationDetection.ts

@@ -1,9 +1,59 @@
-// Auto-generated stub — replace with real implementation
+import { useState } from 'react'
+import type { Message } from '../../types/message.js'
+import { getGlobalConfig, saveGlobalConfig } from '../../utils/config.js'
+import { isPolicyAllowed } from '../../services/policyLimits/index.js'
+import { submitTranscriptShare } from './submitTranscriptShare.js'
+
+type FrustrationState = 'closed' | 'transcript_prompt' | 'submitted'
+
+export type FrustrationDetectionResult = {
+  state: FrustrationState
+  handleTranscriptSelect: (choice: string) => void
+}
+
+function detectFrustration(messages: Message[]): boolean {
+  const apiErrors = messages.filter(m => (m as any).isApiErrorMessage)
+  return apiErrors.length >= 2
+}
+
 export function useFrustrationDetection(
-  _messages: unknown[],
-  _isLoading: boolean,
-  _hasActivePrompt: boolean,
-  _otherSurveyOpen: boolean,
-): { state: 'closed' | 'open'; handleTranscriptSelect: () => void } {
-  return { state: 'closed', handleTranscriptSelect: () => {} };
+  messages: Message[],
+  isLoading: boolean,
+  hasActivePrompt: boolean,
+  otherSurveyOpen: boolean,
+): FrustrationDetectionResult {
+  const [state, setState] = useState<FrustrationState>('closed')
+
+  const config = getGlobalConfig() as { transcriptShareDismissed?: boolean }
+  if (config.transcriptShareDismissed) {
+    return { state: 'closed', handleTranscriptSelect: () => {} }
+  }
+
+  if (!isPolicyAllowed('product_feedback' as any)) {
+    return { state: 'closed', handleTranscriptSelect: () => {} }
+  }
+
+  if (isLoading || hasActivePrompt || otherSurveyOpen) {
+    return { state: 'closed', handleTranscriptSelect: () => {} }
+  }
+
+  const frustrated = detectFrustration(messages)
+
+  const effectiveState =
+    frustrated && state === 'closed' ? 'transcript_prompt' : state
+
+  function handleTranscriptSelect(choice: string) {
+    if (choice === 'yes') {
+      void submitTranscriptShare(messages, 'frustration', crypto.randomUUID())
+      setState('submitted')
+    } else {
+      saveGlobalConfig((current: any) => ({
+        ...current,
+        transcriptShareDismissed: true,
+      }))
+      setState('closed')
+    }
+  }
+
+  return { state: effectiveState, handleTranscriptSelect }
 }

src/components/InvalidConfigDialog.tsx

@@ -83,6 +83,7 @@ export async function showInvalidConfigDialog({
     theme: SAFE_ERROR_THEME_NAME,
   }
 
+  // biome-ignore lint/suspicious/noAsyncPromiseExecutor: render must be awaited inside executor
   await new Promise<void>(async resolve => {
     const { unmount } = await render(
       <AppStateProvider>