fix(ai): 保留拆解生成结果

2026-07-01 13:05:51 +08:00
parent 063545c865
commit 24e8635a94
5 changed files with 343 additions and 107 deletions
--- a/apps/web/components/version/AiDecomposeButton.tsx
+++ b/apps/web/components/version/AiDecomposeButton.tsx
@@ -1,7 +1,7 @@
 'use client';

 import { useEffect, useRef, useState } from 'react';
-import { Sparkles, Loader2, AlertCircle, RotateCw } from 'lucide-react';
+import { Sparkles, Loader2, AlertCircle, RotateCw, Eye } from 'lucide-react';
 import { appendPlanLog } from '@/lib/version-plan';
 import type { VersionPlan } from '@/lib/version-plan';
 import type { VersionWithContext } from '@/lib/derive';
@@ -14,6 +14,11 @@ import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
 import { api } from '@/lib/api';
 import { filterDuplicateDecomposeDrafts } from '@/lib/ai-decompose-dedupe';
 import { filterDecomposeResultByTarget } from '@/lib/ai-decompose-target';
+import {
+  aiDecomposeSessionStore,
+  getAiDecomposeButtonMode,
+  type AiDecomposeCompletedPayload,
+} from '@/lib/ai-decompose-session';
 import { DecomposeReportModal } from './DecomposeReportModal';
 import type {
  AgentDecomposeTarget,
@@ -27,14 +32,9 @@ interface Props {
  version: VersionWithContext;
 }

-interface DecomposeModalState {
-  result: AgentDecomposeResponse;
-  target: AgentDecomposeTarget;
-  dedupeSummary: { removedDevTaskCount: number; removedTestCaseCount: number };
-}
-
 /** in_progress 视为"卡死"的阈值（秒）— 超过这个时间，按钮允许重新点击 */
 const STUCK_THRESHOLD_SEC = 240;
+const DECOMPOSE_TARGETS: AgentDecomposeTarget[] = ['dev_tasks', 'test_cases'];

 function formatElapsed(sec: number): string {
  if (sec < 60) return `${sec}s`;
@@ -51,11 +51,10 @@ export function AiDecomposeButton({ plan, version }: Props) {
  const categories = useTaskCategoryStore((s) => s.categories);
  const user = useAuthStore((s) => s.user);

-  const [activeTarget, setActiveTarget] = useState<AgentDecomposeTarget | null>(null);
-  const [modalState, setModalState] = useState<DecomposeModalState | null>(null);
-  const [tick, setTick] = useState(0);
-  const startedAtRef = useRef<number | null>(null);
-  const loading = activeTarget !== null;
+  const [viewingTarget, setViewingTarget] = useState<AgentDecomposeTarget | null>(null);
+  const [tick, setTick] = useState(() => Date.now());
+  const [, bumpSessionVersion] = useState(0);
+  const mountedRef = useRef(false);

  // plan 上的状态（持久化在 localStorage）
  const persistStatus = plan.aiDecomposeStatus;
@@ -63,23 +62,34 @@ export function AiDecomposeButton({ plan, version }: Props) {
  const persistAt = plan.aiDecomposeAt;
  const persistTarget = plan.aiDecomposeTarget;

-  // 计算"已用时"
-  const elapsedSec = (() => {
-    if (loading && startedAtRef.current) {
-      return Math.floor((tick - startedAtRef.current) / 1000);
-    }
+  useEffect(() => {
+    mountedRef.current = true;
+    const unsubscribe = aiDecomposeSessionStore.subscribe(() => bumpSessionVersion((value) => value + 1));
+    return () => {
+      mountedRef.current = false;
+      unsubscribe();
+    };
+  }, []);
+
+  const getSession = (target: AgentDecomposeTarget) => aiDecomposeSessionStore.get(plan.id, target);
+  const hasSessionGenerating = DECOMPOSE_TARGETS.some((target) => getSession(target).status === 'generating');
+
+  const persistedElapsedSec = (() => {
    if (persistStatus === 'in_progress' && persistAt) {
      const start = new Date(persistAt).getTime();
-      return Math.max(0, Math.floor((Date.now() - start) / 1000));
+      return Math.max(0, Math.floor((tick - start) / 1000));
    }
    return 0;
  })();

-  const isStaleInProgress = persistStatus === 'in_progress' && elapsedSec > STUCK_THRESHOLD_SEC;
-  const isInProgress = (loading || persistStatus === 'in_progress') && !isStaleInProgress;
-  const isError = persistStatus === 'error' && !loading;
-  const wasCompleted = persistStatus === 'completed' && !loading;
-  const runningTarget = activeTarget ?? (isInProgress ? persistTarget ?? null : null);
+  const isStaleInProgress =
+    persistStatus === 'in_progress' && !hasSessionGenerating && persistedElapsedSec > STUCK_THRESHOLD_SEC;
+  const hasPersistedInProgress = persistStatus === 'in_progress' && !isStaleInProgress;
+  const isInProgress = hasSessionGenerating || hasPersistedInProgress;
+
+  const currentError = DECOMPOSE_TARGETS.map((target) => getSession(target))
+    .find((session) => session.status === 'error');
+  const visibleError = currentError?.status === 'error' ? currentError.error : persistStatus === 'error' ? persistError : undefined;

  // tick 每秒更新一次，让"已用时"实时跳
  useEffect(() => {
@@ -121,78 +131,85 @@ export function AiDecomposeButton({ plan, version }: Props) {
  };

  const handleClick = async (target: AgentDecomposeTarget) => {
-    if (loading) return;
+    const session = getSession(target);
+    if (session.status === 'completed') {
+      setViewingTarget(target);
+      return;
+    }
+
+    if (hasSessionGenerating) return;
    // 即便 persistStatus 是 in_progress，只要超过阈值就允许重新点
    if (persistStatus === 'in_progress' && !isStaleInProgress) return;

-    startedAtRef.current = Date.now();
    setTick(Date.now());
-    setActiveTarget(target);

-    updatePlan(plan.id, {
-      aiDecomposeStatus: 'in_progress',
-      aiDecomposeBy: user?.name,
-      aiDecomposeAt: new Date().toISOString(),
-      aiDecomposeTarget: target,
-      aiDecomposeError: undefined,
-      logs: appendAiLog(target, 'started'),
-    });
+    const run = async (): Promise<AiDecomposeCompletedPayload> => {
+      updatePlan(plan.id, {
+        aiDecomposeStatus: 'in_progress',
+        aiDecomposeBy: user?.name,
+        aiDecomposeAt: new Date().toISOString(),
+        aiDecomposeTarget: target,
+        aiDecomposeError: undefined,
+        logs: appendAiLog(target, 'started'),
+      });

-    const members = (version.members ?? []).map((m) => ({
-      name: m.name,
-      role: m.role,
-    }));
+      const members = (version.members ?? []).map((m) => ({
+        name: m.name,
+        role: m.role,
+      }));

-    const payload: AgentDecomposeRequest = {
-      prototypeUrl: plan.resultUrl || '',
-      requirements: linkedReqs,
-      members,
-      versionId: version.id,
-      planId: plan.id,
-      target,
-    };
+      const payload: AgentDecomposeRequest = {
+        prototypeUrl: plan.resultUrl || '',
+        requirements: linkedReqs,
+        members,
+        versionId: version.id,
+        planId: plan.id,
+        target,
+      };

-    try {
      const resp = await api.postRaw<AgentDecomposeResponse | AgentDecomposeError>(
        '/ai/decompose',
        payload,
        300000,
      );
+
      if (!resp.ok) {
-        updatePlan(plan.id, {
-          aiDecomposeStatus: 'error',
-          aiDecomposeTarget: target,
-          aiDecomposeError: resp.error,
-          logs: appendAiLog(target, 'error', resp.error),
-        });
-      } else {
-        const targetFilteredResult = filterDecomposeResultByTarget(resp.result, target);
-        const requirementIdSet = new Set(linkedReqs.map((req) => req.id));
-        const deduped = filterDuplicateDecomposeDrafts(targetFilteredResult, {
-          existingDevTasks: devTasks.filter((task) => requirementIdSet.has(task.requirementId)),
-          existingTestCases: testCases.filter((testCase) => testCase.versionId === version.id),
-          categories,
-          requirements: linkedReqs,
-        });
-        setModalState({
-          result: { ...resp, result: filterDecomposeResultByTarget(deduped.result, target) },
-          target,
-          dedupeSummary: {
-            removedDevTaskCount: deduped.removedDevTaskCount,
-            removedTestCaseCount: deduped.removedTestCaseCount,
-          },
-        });
-        updatePlan(plan.id, {
-          aiDecomposeStatus: 'completed',
-          aiDecomposeTarget: target,
-          aiDecomposeError: undefined,
-          logs: appendAiLog(
-            target,
-            'completed',
-            `生成开发任务 ${deduped.result.devTaskDrafts.length} 条，测试用例 ${deduped.result.testCaseDrafts.length} 条。已过滤重复开发任务 ${deduped.removedDevTaskCount} 条，重复测试用例 ${deduped.removedTestCaseCount} 条。`,
-          ),
-        });
+        throw new Error(resp.error);
      }
+
+      const targetFilteredResult = filterDecomposeResultByTarget(resp.result, target);
+      const requirementIdSet = new Set(linkedReqs.map((req) => req.id));
+      const deduped = filterDuplicateDecomposeDrafts(targetFilteredResult, {
+        existingDevTasks: devTasks.filter((task) => requirementIdSet.has(task.requirementId)),
+        existingTestCases: testCases.filter((testCase) => testCase.versionId === version.id),
+        categories,
+        requirements: linkedReqs,
+      });
+      const result = { ...resp, result: filterDecomposeResultByTarget(deduped.result, target) };
+
+      updatePlan(plan.id, {
+        aiDecomposeStatus: 'completed',
+        aiDecomposeTarget: target,
+        aiDecomposeError: undefined,
+        logs: appendAiLog(
+          target,
+          'completed',
+          `生成开发任务 ${deduped.result.devTaskDrafts.length} 条，测试用例 ${deduped.result.testCaseDrafts.length} 条。已过滤重复开发任务 ${deduped.removedDevTaskCount} 条，重复测试用例 ${deduped.removedTestCaseCount} 条。`,
+        ),
+      });
+
+      return {
+        result,
+        dedupeSummary: {
+          removedDevTaskCount: deduped.removedDevTaskCount,
+          removedTestCaseCount: deduped.removedTestCaseCount,
+        },
+      };
+    };
+
+    try {
+      await aiDecomposeSessionStore.start(plan.id, target, run);
+      if (mountedRef.current) setViewingTarget(target);
    } catch (e: any) {
      const msg = e?.message || '调用 AI 服务失败';
      updatePlan(plan.id, {
@@ -201,51 +218,76 @@ export function AiDecomposeButton({ plan, version }: Props) {
        aiDecomposeError: msg,
        logs: appendAiLog(target, 'error', msg),
      });
-    } finally {
-      setActiveTarget(null);
-      startedAtRef.current = null;
    }
  };

+  const handleResultReviewed = (target: AgentDecomposeTarget) => {
+    aiDecomposeSessionStore.markReviewed(plan.id, target);
+    setViewingTarget(null);
+  };
+
  if (plan.type !== 'product' || plan.status !== 'completed' || !plan.resultUrl) {
    return null;
  }

+  const viewingSession = viewingTarget ? getSession(viewingTarget) : null;
+
  return (
    <>
      <span className="inline-flex items-center gap-1.5">
-        {(['dev_tasks', 'test_cases'] as AgentDecomposeTarget[]).map((target) => {
-          const showSpinner = isInProgress && runningTarget === target;
-          const label = wasCompleted ? `重新拆解${targetText(target)}` : `AI 拆解${targetText(target)}`;
+        {DECOMPOSE_TARGETS.map((target) => {
+          const session = getSession(target);
+          const mode = getAiDecomposeButtonMode(session);
+          const showSpinner = mode === 'generating' || (hasPersistedInProgress && persistTarget === target);
+          const targetElapsedSec =
+            session.status === 'generating'
+              ? Math.max(0, Math.floor((tick - session.startedAt) / 1000))
+              : persistedElapsedSec;
+          const targetHasError =
+            mode === 'retry' || (persistStatus === 'error' && (persistTarget === target || !persistTarget));
+          const targetErrorMessage = session.status === 'error' ? session.error : persistError || '未知错误';
+          const label =
+            mode === 'view_result'
+              ? `查看${targetText(target)}结果`
+              : persistStatus === 'completed' && persistTarget === target
+                ? `重新拆解${targetText(target)}`
+                : `AI 拆解${targetText(target)}`;
          return (
            <button
              type="button"
              key={target}
              onClick={() => handleClick(target)}
-              disabled={isInProgress}
+              disabled={isInProgress && mode !== 'view_result'}
              className={`inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] font-medium disabled:cursor-not-allowed disabled:opacity-70 ${
-                isError
+                targetHasError
                  ? 'border-red-200 bg-red-50 text-red-700 hover:bg-red-100'
                  : 'border-purple-200 bg-purple-50 text-purple-700 hover:bg-purple-100'
              }`}
              title={
-                isError
-                  ? `上次失败：${persistError || '未知错误'}（点击重试${targetText(target)}）`
-                  : wasCompleted
-                    ? `此前已拆解过，再次点击会重新拆解${targetText(target)}`
+                targetHasError
+                  ? `上次失败：${targetErrorMessage}（点击重试${targetText(target)}）`
+                  : mode === 'view_result'
+                    ? `查看本次 AI 拆解${targetText(target)}结果`
+                    : persistStatus === 'completed' && persistTarget === target
+                      ? `此前已拆解过，再次点击会重新拆解${targetText(target)}`
                    : `使用 AI 把原型 + 关联需求拆解成${targetText(target)}`
              }
            >
              {showSpinner ? (
                <>
                  <Loader2 className="h-3 w-3 animate-spin" />
-                  拆解中 {formatElapsed(elapsedSec)}
+                  拆解中 {formatElapsed(targetElapsedSec)}
                </>
-              ) : isError ? (
+              ) : targetHasError ? (
                <>
                  <RotateCw className="h-3 w-3" />
                  重试{targetText(target)}
                </>
+              ) : mode === 'view_result' ? (
+                <>
+                  <Eye className="h-3 w-3" />
+                  {label}
+                </>
              ) : (
                <>
                  <Sparkles className="h-3 w-3" />
@@ -258,29 +300,31 @@ export function AiDecomposeButton({ plan, version }: Props) {
      </span>

      {/* 错误信息：在按钮旁悬浮显示 */}
-      {isError && persistError && (
-        <span className="ml-1 inline-flex items-center gap-1 text-[11px] text-red-600 max-w-[260px]" title={persistError}>
+      {visibleError && (
+        <span className="ml-1 inline-flex items-center gap-1 text-[11px] text-red-600 max-w-[260px]" title={visibleError}>
          <AlertCircle className="h-3 w-3 shrink-0" />
-          <span className="truncate">{persistError}</span>
+          <span className="truncate">{visibleError}</span>
        </span>
      )}

      {/* 卡死提示：persistStatus 是 in_progress 但已超时 */}
      {isStaleInProgress && (
        <span className="ml-1 text-[11px] text-amber-600" title="上次拆解记录残留，点击按钮重新拆解">
-          上次未完成（{formatElapsed(elapsedSec)}）
+          上次未完成（{formatElapsed(persistedElapsedSec)}）
        </span>
      )}

-      {modalState && (
+      {viewingTarget && viewingSession?.status === 'completed' && (
        <DecomposeReportModal
-          result={modalState.result}
+          result={viewingSession.payload.result}
          version={version}
          plan={plan}
          requirements={linkedReqs}
-          target={modalState.target}
-          dedupeSummary={modalState.dedupeSummary}
-          onClose={() => setModalState(null)}
+          target={viewingTarget}
+          dedupeSummary={viewingSession.payload.dedupeSummary}
+          onClose={() => setViewingTarget(null)}
+          onAdopted={() => handleResultReviewed(viewingTarget)}
+          onRejected={() => handleResultReviewed(viewingTarget)}
        />
      )}
    </>
--- a/apps/web/components/version/DecomposeReportModal.tsx
+++ b/apps/web/components/version/DecomposeReportModal.tsx
@@ -27,9 +27,21 @@ interface Props {
  target: AgentDecomposeTarget;
  dedupeSummary?: { removedDevTaskCount: number; removedTestCaseCount: number };
  onClose: () => void;
+  onAdopted?: () => void;
+  onRejected?: () => void;
 }

-export function DecomposeReportModal({ result, version, plan, requirements, target, dedupeSummary, onClose }: Props) {
+export function DecomposeReportModal({
+  result,
+  version,
+  plan,
+  requirements,
+  target,
+  dedupeSummary,
+  onClose,
+  onAdopted,
+  onRejected,
+}: Props) {
  const { createTask } = useDevTaskStore();
  const { createTestCase } = useTestCaseStore();
  const { categories } = useTaskCategoryStore();
@@ -163,7 +175,10 @@ export function DecomposeReportModal({ result, version, plan, requirements, targ
    setSubmitting(false);

    // 1.5 秒后自动关闭
-    setTimeout(() => onClose(), 1500);
+    setTimeout(() => {
+      onAdopted?.();
+      onClose();
+    }, 1500);
  };

  const visibleRecommendationCount = useMemo(() => {
@@ -438,10 +453,21 @@ export function DecomposeReportModal({ result, version, plan, requirements, targ
          </div>
          <div className="flex gap-2">
            <button
-              onClick={onClose}
+              onClick={() => {
+                onRejected?.();
+                onClose();
+              }}
+              disabled={submitting || submitted}
              className="h-8 px-3 rounded-lg text-[12px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]"
            >
-              取消
+              不采纳
+            </button>
+            <button
+              onClick={onClose}
+              disabled={submitting || submitted}
+              className="h-8 px-3 rounded-lg text-[12px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]"
+            >
+              稍后处理
            </button>
            <button
              onClick={handleAdopt}
--- a/apps/web/lib/ai-decompose-session.test.ts
+++ b/apps/web/lib/ai-decompose-session.test.ts
@@ -0,0 +1,72 @@
+import { strict as assert } from 'node:assert';
+import test from 'node:test';
+import type { AgentDecomposeResponse } from '@ftb/shared';
+import {
+  createAiDecomposeSessionStore,
+  getAiDecomposeButtonMode,
+  type AiDecomposeCompletedPayload,
+} from './ai-decompose-session';
+
+const response: AgentDecomposeResponse = {
+  ok: true,
+  result: {
+    report: { matched: [], reqOnly: [], noteOnly: [], ambiguous: [] },
+    devTaskDrafts: [],
+    testCaseDrafts: [],
+  },
+  meta: { model: 'test-model', inputTokens: 10, outputTokens: 5, durationMs: 1200 },
+};
+
+const payload: AiDecomposeCompletedPayload = {
+  result: response,
+  dedupeSummary: { removedDevTaskCount: 0, removedTestCaseCount: 0 },
+};
+
+test('keeps generated result after request finishes outside the button component', async () => {
+  const store = createAiDecomposeSessionStore();
+  let resolveRequest!: (value: AiDecomposeCompletedPayload) => void;
+  const request = new Promise<AiDecomposeCompletedPayload>((resolve) => {
+    resolveRequest = resolve;
+  });
+
+  const running = store.start('plan-1', 'dev_tasks', () => request);
+
+  assert.equal(store.get('plan-1', 'dev_tasks').status, 'generating');
+  assert.equal(getAiDecomposeButtonMode(store.get('plan-1', 'dev_tasks')), 'generating');
+
+  resolveRequest(payload);
+  await running;
+
+  const completed = store.get('plan-1', 'dev_tasks');
+  assert.equal(completed.status, 'completed');
+  assert.deepEqual(completed.payload, payload);
+  assert.equal(getAiDecomposeButtonMode(completed), 'view_result');
+});
+
+test('keeps completed result until user adopts or rejects it', async () => {
+  const store = createAiDecomposeSessionStore();
+
+  await store.start('plan-1', 'test_cases', async () => payload);
+  assert.equal(getAiDecomposeButtonMode(store.get('plan-1', 'test_cases')), 'view_result');
+
+  store.markReviewed('plan-1', 'test_cases');
+
+  assert.equal(store.get('plan-1', 'test_cases').status, 'idle');
+  assert.equal(getAiDecomposeButtonMode(store.get('plan-1', 'test_cases')), 'generate');
+});
+
+test('reuses in-flight request for the same plan and target', async () => {
+  const store = createAiDecomposeSessionStore();
+  let callCount = 0;
+  const run = async () => {
+    callCount += 1;
+    return payload;
+  };
+
+  const first = store.start('plan-1', 'dev_tasks', run);
+  const second = store.start('plan-1', 'dev_tasks', run);
+
+  assert.equal(first, second);
+  await Promise.all([first, second]);
+  assert.equal(callCount, 1);
+});
--- a/apps/web/lib/ai-decompose-session.ts
+++ b/apps/web/lib/ai-decompose-session.ts
@@ -0,0 +1,92 @@
+import type { AgentDecomposeResponse, AgentDecomposeTarget } from '@ftb/shared';
+
+export interface AiDecomposeCompletedPayload {
+  result: AgentDecomposeResponse;
+  dedupeSummary: { removedDevTaskCount: number; removedTestCaseCount: number };
+}
+
+export type AiDecomposeButtonMode = 'generate' | 'generating' | 'view_result' | 'retry';
+
+export type AiDecomposeSessionState =
+  | { status: 'idle' }
+  | { status: 'generating'; startedAt: number; promise: Promise<AiDecomposeCompletedPayload> }
+  | { status: 'completed'; completedAt: number; payload: AiDecomposeCompletedPayload }
+  | { status: 'error'; failedAt: number; error: string };
+
+type Listener = () => void;
+
+export interface AiDecomposeSessionStore {
+  get: (planId: string, target: AgentDecomposeTarget) => AiDecomposeSessionState;
+  start: (
+    planId: string,
+    target: AgentDecomposeTarget,
+    run: () => Promise<AiDecomposeCompletedPayload>,
+  ) => Promise<AiDecomposeCompletedPayload>;
+  markReviewed: (planId: string, target: AgentDecomposeTarget) => void;
+  subscribe: (listener: Listener) => () => void;
+}
+
+function getSessionKey(planId: string, target: AgentDecomposeTarget): string {
+  return `${planId}::${target}`;
+}
+
+function normalizeError(error: unknown): string {
+  return error instanceof Error ? error.message : String(error || 'AI 生成失败');
+}
+
+export function createAiDecomposeSessionStore(): AiDecomposeSessionStore {
+  const sessions = new Map<string, AiDecomposeSessionState>();
+  const listeners = new Set<Listener>();
+
+  const notify = () => {
+    for (const listener of listeners) listener();
+  };
+
+  return {
+    get(planId, target) {
+      return sessions.get(getSessionKey(planId, target)) ?? { status: 'idle' };
+    },
+
+    start(planId, target, run) {
+      const key = getSessionKey(planId, target);
+      const existing = sessions.get(key);
+      if (existing?.status === 'generating') return existing.promise;
+
+      const promise = run().then(
+        (payload) => {
+          sessions.set(key, { status: 'completed', completedAt: Date.now(), payload });
+          notify();
+          return payload;
+        },
+        (error) => {
+          sessions.set(key, { status: 'error', failedAt: Date.now(), error: normalizeError(error) });
+          notify();
+          throw error;
+        },
+      );
+
+      sessions.set(key, { status: 'generating', startedAt: Date.now(), promise });
+      notify();
+      return promise;
+    },
+
+    markReviewed(planId, target) {
+      sessions.delete(getSessionKey(planId, target));
+      notify();
+    },
+
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}
+
+export function getAiDecomposeButtonMode(session: AiDecomposeSessionState): AiDecomposeButtonMode {
+  if (session.status === 'generating') return 'generating';
+  if (session.status === 'completed') return 'view_result';
+  if (session.status === 'error') return 'retry';
+  return 'generate';
+}
+
+export const aiDecomposeSessionStore = createAiDecomposeSessionStore();