test(design): expose video preparation and playback flow gaps

scripts/diagnostics/design-video-flow.test.tsx

@@ -0,0 +1,159 @@
+/** Offline connectivity diagnostic, intentionally red; not in the normal unit suite.
+ * Actual React controls + Zustand commands -> stdin bridge -> actual Python
+ * Specification kernel / production capability builder / compiler. Upload and
+ * transport are simulated. No live gateway, reasoner, paid task or provider.
+ */
+import { spawnSync } from 'node:child_process';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import { YouthCreationCard } from '@/pages/ImageCanvas/YouthCreationCard';
+import { DesignPlanHistory } from '@/pages/ImageCanvas/DesignPlanHistory';
+import { useImageWorkspaceStore } from '@/stores/image-workspace';
+import {
+  ImageWorkspaceApiError, submitImageWorkspaceCommand, uploadImageWorkspaceAsset,
+} from '@/lib/image-workspace';
+import {
+  designFormFixture, designQuoteFixture, designWorkspaceFixture,
+} from '../../tests/fixtures/design-workspace-v2';
+import type {
+  DesignAsset, DesignCompilationIssue, DesignSpecification, DesignUserFieldOperation,
+} from '../../shared/image-workspace';
+
+vi.mock('@/lib/image-workspace', async (original) => ({
+  ...await original<typeof import('@/lib/image-workspace')>(),
+  submitImageWorkspaceCommand: vi.fn(),
+  uploadImageWorkspaceAsset: vi.fn(),
+  resolveImageWorkspaceAssetUrl: vi.fn().mockResolvedValue('blob:offline-preview'),
+}));
+vi.mock('@/lib/host-api', async (original) => ({
+  ...await original<typeof import('@/lib/host-api')>(), setDesktopBackgroundLease: vi.fn(),
+}));
+vi.mock('@/stores/auth', () => ({
+  useAuthStore: { getState: () => ({ isAuthenticated: () => true }) },
+}));
+
+function serverStep(specification: DesignSpecification | null, operations: DesignUserFieldOperation[]) {
+  const result = spawnSync(process.env.DESIGN_DIAGNOSTIC_PYTHON!, [
+    '-X', 'utf8', '-m', 'scripts.diagnostics.design_media_blockers', '--json-step',
+  ], {
+    cwd: process.env.DESIGN_DIAGNOSTIC_SERVER,
+    input: JSON.stringify({ specification, operations }), encoding: 'utf8',
+  });
+  if (result.status !== 0) throw new Error(result.stderr || String(result.error));
+  return JSON.parse(result.stdout) as {
+    specification: DesignSpecification; ready: boolean; blockers: DesignCompilationIssue[];
+  };
+}
+
+const asset: DesignAsset = {
+  assetId: 'image-1', workspaceId: 'workspace-1', role: 'uploaded', mediaType: 'image',
+  mimeType: 'image/png', width: 720, height: 1280, durationMilliseconds: null,
+  generationTaskId: null, createdAt: '2026-09-16T00:00:00Z',
+  contentPath: '/api/design/assets/image-1/content',
+};
+
+function LiveCard() {
+  const workspace = useImageWorkspaceStore((state) => state.workspace)!;
+  const blockers = useImageWorkspaceStore((state) => state.quoteBlockers);
+  return <YouthCreationCard workspace={workspace} quoteBlockers={blockers} generationAvailable />;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  useImageWorkspaceStore.getState().reset();
+});
+afterEach(cleanup);
+
+it.each([
+  { label: 'current UI payload', complete: false },
+  { label: 'control with a complete semantic video draft supplied', complete: true },
+])('reaches video confirmation: $label', async ({ complete }) => {
+  const initial = serverStep(null, [
+    { kind: 'set', path: 'intent.media', value: 'image' },
+    { kind: 'set', path: 'content.concept', value: '沙漠里的小动物围圈玩游戏，天上的云在飘。' },
+    { kind: 'set', path: 'output.aspect_ratio', value: '9:16' },
+  ]);
+  let workspace = designWorkspaceFixture({ form: designFormFixture({
+    specification: initial.specification, activeQuotes: [],
+  }) });
+  const commands: string[] = [];
+  expect(initial.ready).toBe(true);
+  useImageWorkspaceStore.setState({
+    workspace, activeWorkspaceId: workspace.workspace.workspaceId, status: 'ready',
+  });
+  vi.mocked(uploadImageWorkspaceAsset).mockResolvedValue(asset);
+  vi.mocked(submitImageWorkspaceCommand).mockImplementation(async (command) => {
+    commands.push(command.kind === 'apply_input' ? command.input.kind : command.kind);
+    const operations = command.kind === 'apply_input' && command.input.kind === 'direct_edit'
+      ? command.input.operations : [];
+    const step = serverStep(workspace.form.specification, operations);
+    if (command.kind === 'request_quote' && !step.ready) {
+      useImageWorkspaceStore.setState({ quoteBlockers: step.blockers });
+      throw new ImageWorkspaceApiError(409, 'design_quote_blocked', 'offline blocked');
+    }
+    workspace = {
+      ...workspace, assets: operations.some((operation) => operation.path === 'references')
+        ? [asset] : workspace.assets,
+      workspace: { ...workspace.workspace, workspaceViewRevision: workspace.workspace.workspaceViewRevision + 1 },
+      form: { ...workspace.form, specification: step.specification,
+        specificationRevision: workspace.form.specificationRevision + 1,
+        directionRevision: workspace.form.directionRevision + 1 },
+    };
+    if (command.kind === 'request_quote') {
+      const quote = designQuoteFixture();
+      workspace.form.activeQuotes = [{ ...quote, medium: 'video',
+        specificationRevision: workspace.form.specificationRevision,
+        outputSummary: { ...quote.outputSummary, medium: 'video', aspectRatio: '9:16',
+          durationSeconds: 6, deliveryFormat: 'mp4' } }];
+    }
+    return { workspace, runId: 'offline-run', clientOperationId: command.clientOperationId };
+  });
+  render(<LiveCard />);
+  fireEvent.change(screen.getByRole('combobox', { name: '类型' }), { target: { value: 'video' } });
+  await waitFor(() => expect(useImageWorkspaceStore.getState().workspace?.form.specification.values.intent.media).toBe('video'));
+  fireEvent.change(screen.getByLabelText('选择参考图片'), {
+    target: { files: [new File(['offline-upload'], 'start.png', { type: 'image/png' })] },
+  });
+  await screen.findByText('已引用');
+  if (complete) {
+    // Control input, not a claim that today's Agent/UI performs this transition.
+    const reference = workspace.form.specification.values.references[0];
+    const step = serverStep(workspace.form.specification, [
+      { kind: 'set', path: 'references', value: [{ ...reference, role: 'first_frame' }] },
+      { kind: 'set', path: 'video.shots', value: [{ id: 'one', story_beat: '小动物围圈游戏，云缓慢飘过。' }] },
+    ]);
+    workspace = { ...workspace, form: { ...workspace.form, specification: step.specification } };
+    act(() => useImageWorkspaceStore.setState({ workspace }));
+  }
+  await waitFor(() => expect(screen.getByRole('button', { name: '准备制作方案' })).toBeEnabled());
+  fireEvent.click(screen.getByRole('button', { name: '准备制作方案' }));
+  await waitFor(() => expect(commands).toContain('request_quote'));
+  console.log('FLOW_COMMANDS', commands);
+  console.log('FLOW_BLOCKERS', useImageWorkspaceStore.getState().quoteBlockers.map((item) => item.code));
+  expect(useImageWorkspaceStore.getState().quoteBlockers).toEqual([]);
+  expect(screen.getByRole('button', { name: '确认并开始制作' })).toBeEnabled();
+  fireEvent.click(screen.getByRole('button', { name: '确认并开始制作' }));
+  await waitFor(() => expect(commands).toContain('confirm_generation'));
+});
+
+it('lets a user play a completed video directly in the active history rail', async () => {
+  const video: DesignAsset = { ...asset, assetId: 'video-1', role: 'generated',
+    mediaType: 'video', mimeType: 'video/mp4', durationMilliseconds: 6000,
+    generationTaskId: 'task-video', contentPath: '/api/design/assets/video-1/content' };
+  const workspace = designWorkspaceFixture();
+  workspace.assets = [video];
+  // Presentation fixture only; no claim that the provider generated these bytes.
+  workspace.tasks = [{
+    taskId: 'task-video', status: 'succeeded', medium: 'video', createdAt: video.createdAt,
+    maximumCustomerChargeAtoms: 500, resultAssetIds: ['video-1'], issues: [],
+    outputSummary: { medium: 'video', aspectRatio: '9:16', outputCount: 1, durationSeconds: 6 },
+    progress: { stage: 'completed', completedRequiredSteps: 2, totalRequiredSteps: 2 },
+  } as typeof workspace.tasks[number]];
+  const { container } = render(<DesignPlanHistory workspace={workspace} />);
+  await screen.findAllByLabelText('视频作品预览');
+  fireEvent.click(screen.getByText('制作记录'));
+  const players = [...container.querySelectorAll('video')];
+  expect(players.length).toBeGreaterThan(0);
+  expect(players.some((player) => player.controls)
+    || screen.queryByRole('button', { name: /播放|查看视频/ }) !== null).toBe(true);
+});

scripts/diagnostics/vitest.design-flow.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+import base from '../../vitest.config';
+
+export default defineConfig({
+  ...base,
+  test: {
+    ...base.test,
+    include: ['scripts/diagnostics/design-video-flow.test.tsx'],
+    testTimeout: 20000,
+  },
+});