feat(jump-hop): redesign sling platform gameplay

src/components/jump-hop-creation/JumpHopWorkspace.test.tsx

@@ -0,0 +1,60 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, expect, test, vi } from 'vitest';
+
+import { jumpHopClient } from '../../services/jump-hop/jumpHopClient';
+import { JumpHopWorkspace } from './JumpHopWorkspace';
+
+vi.mock('../../services/jump-hop/jumpHopClient', () => ({
+  jumpHopClient: {
+    createSession: vi.fn(),
+  },
+}));
+
+beforeEach(() => {
+  vi.mocked(jumpHopClient.createSession).mockReset();
+  vi.mocked(jumpHopClient.createSession).mockResolvedValue({
+    session: {
+      sessionId: 'jump-hop-session-test',
+      ownerUserId: 'user-test',
+      status: 'draft',
+      draft: null,
+      createdAt: '2026-05-27T00:00:00Z',
+      updatedAt: '2026-05-27T00:00:00Z',
+    },
+  });
+});
+
+test('跳一跳工作台只保留主题输入并自动派生提交 payload', async () => {
+  const onSubmitted = vi.fn();
+
+  render(
+    <JumpHopWorkspace onBack={() => {}} onSubmitted={onSubmitted} />,
+  );
+
+  expect(screen.getByLabelText('主题')).toBeTruthy();
+  expect(screen.queryByLabelText('作品标题')).toBeNull();
+  expect(screen.queryByLabelText('作品简介')).toBeNull();
+  expect(screen.queryByLabelText('角色提示词')).toBeNull();
+  expect(screen.queryByLabelText('地块提示词')).toBeNull();
+
+  fireEvent.change(screen.getByLabelText('主题'), {
+    target: { value: '竹林茶馆' },
+  });
+  fireEvent.click(screen.getByRole('button', { name: '生成' }));
+
+  await waitFor(() => expect(onSubmitted).toHaveBeenCalledTimes(1));
+  expect(jumpHopClient.createSession).toHaveBeenCalledWith({
+    templateId: 'jump-hop',
+    themeText: '竹林茶馆',
+    workTitle: '竹林茶馆跳一跳',
+    workDescription: '竹林茶馆主题的俯视角平台跳跃作品',
+    themeTags: ['竹林茶馆', '跳一跳', '休闲'],
+    difficulty: 'standard',
+    stylePreset: 'minimal-blocks',
+    characterPrompt: '内置默认 3D 角色',
+    tilePrompt: '竹林茶馆主题的俯视角清爽游戏化立体感平台素材',
+    endMoodPrompt: null,
+  });
+});

src/components/jump-hop-creation/JumpHopWorkspace.tsx

@@ -2,9 +2,7 @@ import { ArrowLeft, Loader2, Send } from 'lucide-react';
 import { useMemo, useState } from 'react';
 
 import type {
-  JumpHopDifficulty,
   JumpHopSessionResponse,
-  JumpHopStylePreset,
   JumpHopWorkspaceCreateRequest,
 } from '../../../packages/shared/src/contracts/jumpHop';
 import { jumpHopClient } from '../../services/jump-hop/jumpHopClient';
@@ -20,27 +18,31 @@ type JumpHopWorkspaceProps = {
 };
 
 type JumpHopWorkspaceFormState = {
-  workTitle: string;
-  workDescription: string;
-  themeTags: string;
-  difficulty: JumpHopDifficulty;
-  stylePreset: JumpHopStylePreset;
-  characterPrompt: string;
-  tilePrompt: string;
-  endMoodPrompt: string;
+  themeText: string;
 };
 
 const DEFAULT_FORM_STATE: JumpHopWorkspaceFormState = {
-  workTitle: '',
-  workDescription: '',
-  themeTags: '',
-  difficulty: 'easy',
-  stylePreset: 'minimal-blocks',
-  characterPrompt: '',
-  tilePrompt: '',
-  endMoodPrompt: '',
+  themeText: '',
 };
 
+function buildJumpHopWorkspacePayload(
+  formState: JumpHopWorkspaceFormState,
+): JumpHopWorkspaceCreateRequest {
+  const themeText = formState.themeText.trim();
+  return {
+    templateId: 'jump-hop',
+    themeText,
+    workTitle: `${themeText}跳一跳`,
+    workDescription: `${themeText}主题的俯视角平台跳跃作品`,
+    themeTags: [themeText, '跳一跳', '休闲'],
+    difficulty: 'standard',
+    stylePreset: 'minimal-blocks',
+    characterPrompt: '内置默认 3D 角色',
+    tilePrompt: `${themeText}主题的俯视角清爽游戏化立体感平台素材`,
+    endMoodPrompt: null,
+  };
+}
+
 export function JumpHopWorkspace({
   isBusy = false,
   error = null,
@@ -52,14 +54,7 @@ export function JumpHopWorkspace({
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const canSubmit = useMemo(
-    () =>
-      Boolean(
-        formState.workTitle.trim() &&
-          formState.workDescription.trim() &&
-          formState.themeTags.trim() &&
-          formState.characterPrompt.trim() &&
-          formState.tilePrompt.trim(),
-      ),
+    () => Boolean(formState.themeText.trim()),
     [formState],
   );
 
@@ -73,20 +68,7 @@ export function JumpHopWorkspace({
     setLocalError(null);
 
     try {
-      const payload: JumpHopWorkspaceCreateRequest = {
-        templateId: 'jump-hop',
-        workTitle: formState.workTitle.trim(),
-        workDescription: formState.workDescription.trim(),
-        themeTags: formState.themeTags
-          .split(/[，,、\s]+/)
-          .map((item) => item.trim())
-          .filter(Boolean),
-        difficulty: formState.difficulty,
-        stylePreset: formState.stylePreset,
-        characterPrompt: formState.characterPrompt.trim(),
-        tilePrompt: formState.tilePrompt.trim(),
-        endMoodPrompt: formState.endMoodPrompt.trim() || null,
-      };
+      const payload = buildJumpHopWorkspacePayload(formState);
       const response = await jumpHopClient.createSession(payload);
       onSubmitted(response, payload);
     } catch (caughtError) {
@@ -111,143 +93,22 @@ export function JumpHopWorkspace({
         </button>
       </div>
 
-      <div className="grid gap-3 sm:grid-cols-2">
+      <div className="grid gap-3">
         <label className="block sm:col-span-2">
           <span className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
-            作品标题
+            主题
           </span>
           <input
-            value={formState.workTitle}
+            value={formState.themeText}
             onChange={(event) =>
               setFormState((current) => ({
                 ...current,
-                workTitle: event.target.value,
+                themeText: event.target.value,
               }))
             }
             className="mt-2 w-full rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-3 py-3 text-sm font-semibold text-[var(--platform-text-strong)] outline-none"
           />
         </label>
-        <label className="block sm:col-span-2">
-          <span className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
-            作品简介
-          </span>
-          <textarea
-            value={formState.workDescription}
-            onChange={(event) =>
-              setFormState((current) => ({
-                ...current,
-                workDescription: event.target.value,
-              }))
-            }
-            rows={3}
-            className="mt-2 w-full resize-none rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-3 py-3 text-sm leading-6 text-[var(--platform-text-strong)] outline-none"
-          />
-        </label>
-        <label className="block sm:col-span-2">
-          <span className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
-            主题标签
-          </span>
-          <input
-            value={formState.themeTags}
-            onChange={(event) =>
-              setFormState((current) => ({
-                ...current,
-                themeTags: event.target.value,
-              }))
-            }
-            className="mt-2 w-full rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-3 py-3 text-sm font-semibold text-[var(--platform-text-strong)] outline-none"
-          />
-        </label>
-        <label className="block">
-          <span className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
-            难度
-          </span>
-          <select
-            value={formState.difficulty}
-            onChange={(event) =>
-              setFormState((current) => ({
-                ...current,
-                difficulty: event.target.value as JumpHopDifficulty,
-              }))
-            }
-            className="mt-2 w-full rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-3 py-3 text-sm font-semibold text-[var(--platform-text-strong)] outline-none"
-          >
-            <option value="easy">easy</option>
-            <option value="standard">standard</option>
-            <option value="advanced">advanced</option>
-            <option value="challenge">challenge</option>
-          </select>
-        </label>
-        <label className="block">
-          <span className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
-            风格
-          </span>
-          <select
-            value={formState.stylePreset}
-            onChange={(event) =>
-              setFormState((current) => ({
-                ...current,
-                stylePreset: event.target.value as JumpHopStylePreset,
-              }))
-            }
-            className="mt-2 w-full rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-3 py-3 text-sm font-semibold text-[var(--platform-text-strong)] outline-none"
-          >
-            <option value="minimal-blocks">minimal-blocks</option>
-            <option value="paper-toy">paper-toy</option>
-            <option value="neon-glass">neon-glass</option>
-            <option value="forest-stone">forest-stone</option>
-            <option value="future-metal">future-metal</option>
-            <option value="custom">custom</option>
-          </select>
-        </label>
-        <label className="block sm:col-span-2">
-          <span className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
-            角色提示词
-          </span>
-          <textarea
-            value={formState.characterPrompt}
-            onChange={(event) =>
-              setFormState((current) => ({
-                ...current,
-                characterPrompt: event.target.value,
-              }))
-            }
-            rows={3}
-            className="mt-2 w-full resize-none rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-3 py-3 text-sm leading-6 text-[var(--platform-text-strong)] outline-none"
-          />
-        </label>
-        <label className="block sm:col-span-2">
-          <span className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
-            地块提示词
-          </span>
-          <textarea
-            value={formState.tilePrompt}
-            onChange={(event) =>
-              setFormState((current) => ({
-                ...current,
-                tilePrompt: event.target.value,
-              }))
-            }
-            rows={3}
-            className="mt-2 w-full resize-none rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-3 py-3 text-sm leading-6 text-[var(--platform-text-strong)] outline-none"
-          />
-        </label>
-        <label className="block sm:col-span-2">
-          <span className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
-            终点氛围
-          </span>
-          <textarea
-            value={formState.endMoodPrompt}
-            onChange={(event) =>
-              setFormState((current) => ({
-                ...current,
-                endMoodPrompt: event.target.value,
-              }))
-            }
-            rows={2}
-            className="mt-2 w-full resize-none rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-3 py-3 text-sm leading-6 text-[var(--platform-text-strong)] outline-none"
-          />
-        </label>
       </div>
 
       {localError || error ? (

src/components/jump-hop-result/JumpHopResultView.test.tsx

@@ -0,0 +1,180 @@
+/* @vitest-environment jsdom */
+
+import { render, screen } from '@testing-library/react';
+import { expect, test, vi } from 'vitest';
+
+import type { JumpHopWorkProfileResponse } from '../../../packages/shared/src/contracts/jumpHop';
+import { useJumpHopLeaderboard } from '../../services/jump-hop/useJumpHopLeaderboard';
+import { JumpHopResultView } from './JumpHopResultView';
+
+vi.mock('../../services/jump-hop/useJumpHopLeaderboard', () => ({
+  useJumpHopLeaderboard: vi.fn(),
+}));
+
+test('跳一跳结果页展示排行榜列表', () => {
+  vi.mocked(useJumpHopLeaderboard).mockReturnValue({
+    leaderboard: {
+      profileId: 'jump-hop-profile-test',
+      items: [
+        {
+          rank: 1,
+          playerId: 'player-1',
+          successfulJumpCount: 12,
+          durationMs: 40123,
+          updatedAt: '2026-05-27T00:00:00Z',
+        },
+        {
+          rank: 2,
+          playerId: 'player-2',
+          successfulJumpCount: 10,
+          durationMs: 38210,
+          updatedAt: '2026-05-26T00:00:00Z',
+        },
+      ],
+      viewerBest: null,
+    },
+    isLoading: false,
+    error: null,
+    refresh: vi.fn(),
+  });
+
+  render(
+    <JumpHopResultView
+      profile={buildProfile()}
+      onBack={() => {}}
+      onEdit={() => {}}
+      onStartTestRun={() => {}}
+      onPublish={() => {}}
+      onRegenerateTiles={() => {}}
+    />,
+  );
+
+  expect(screen.getByText('排行榜')).toBeTruthy();
+  expect(screen.getByText('player-1')).toBeTruthy();
+  expect(screen.getByText('12 跳')).toBeTruthy();
+  expect(screen.getByText('00:40')).toBeTruthy();
+  expect(screen.getByText('player-2')).toBeTruthy();
+});
+
+test('跳一跳结果页默认角色预览使用陶泥儿透明 logo', () => {
+  vi.mocked(useJumpHopLeaderboard).mockReturnValue({
+    leaderboard: null,
+    isLoading: false,
+    error: null,
+    refresh: vi.fn(),
+  });
+
+  render(
+    <JumpHopResultView
+      profile={buildProfile()}
+      onBack={() => {}}
+      onEdit={() => {}}
+      onStartTestRun={() => {}}
+      onPublish={() => {}}
+      onRegenerateTiles={() => {}}
+    />,
+  );
+
+  expect(screen.getByTestId('jump-hop-result-character-logo').getAttribute('src')).toBe(
+    '/branding/jump-hop-taonier-character.png',
+  );
+});
+
+function buildProfile(): JumpHopWorkProfileResponse {
+  return {
+    summary: {
+      runtimeKind: 'jump-hop',
+      workId: 'jump-hop-profile-test',
+      profileId: 'jump-hop-profile-test',
+      ownerUserId: 'user-test',
+      sourceSessionId: 'jump-hop-session-test',
+      themeText: '测试',
+      workTitle: '测试',
+      workDescription: '测试',
+      themeTags: ['测试'],
+      difficulty: 'standard',
+      stylePreset: 'minimal-blocks',
+      coverImageSrc: null,
+      publicationStatus: 'draft',
+      playCount: 0,
+      updatedAt: '2026-05-27T00:00:00Z',
+      publishedAt: null,
+      publishReady: true,
+      generationStatus: 'ready',
+    },
+    draft: {
+      templateId: 'jump-hop',
+      templateName: '跳一跳',
+      profileId: 'jump-hop-profile-test',
+      themeText: '测试',
+      workTitle: '测试',
+      workDescription: '测试',
+      themeTags: ['测试'],
+      difficulty: 'standard',
+      stylePreset: 'minimal-blocks',
+      defaultCharacter: {
+        characterId: 'jump-hop-default-runner',
+        displayName: '默认角色',
+        modelKind: 'builtin-three',
+        bodyColor: '#f59e0b',
+        accentColor: '#2563eb',
+      },
+      characterPrompt: '默认角色',
+      tilePrompt: '地块',
+      endMoodPrompt: null,
+      characterAsset: {
+        assetId: 'builtin',
+        imageSrc: 'builtin://jump-hop/default-character',
+        imageObjectKey: '',
+        assetObjectId: 'builtin',
+        generationProvider: 'builtin-three',
+        prompt: '默认角色',
+        width: 0,
+        height: 0,
+      },
+      tileAtlasAsset: {
+        assetId: 'builtin',
+        imageSrc: 'builtin://jump-hop/default-character',
+        imageObjectKey: '',
+        assetObjectId: 'builtin',
+        generationProvider: 'builtin-three',
+        prompt: '默认角色',
+        width: 0,
+        height: 0,
+      },
+      tileAssets: [],
+      path: null,
+      coverComposite: null,
+      generationStatus: 'ready',
+    },
+    path: null as never,
+    defaultCharacter: {
+      characterId: 'jump-hop-default-runner',
+      displayName: '默认角色',
+      modelKind: 'builtin-three',
+      bodyColor: '#f59e0b',
+      accentColor: '#2563eb',
+    },
+    characterAsset: {
+      assetId: 'builtin',
+      imageSrc: 'builtin://jump-hop/default-character',
+      imageObjectKey: '',
+      assetObjectId: 'builtin',
+      generationProvider: 'builtin-three',
+      prompt: '默认角色',
+      width: 0,
+      height: 0,
+    },
+    tileAtlasAsset: {
+      assetId: 'builtin',
+      imageSrc: 'builtin://jump-hop/default-character',
+      imageObjectKey: '',
+      assetObjectId: 'builtin',
+      generationProvider: 'builtin-three',
+      prompt: '默认角色',
+      width: 0,
+      height: 0,
+    },
+    tileAssets: [],
+  };
+}

src/components/jump-hop-result/JumpHopResultView.tsx

@@ -2,18 +2,22 @@ import {
   ArrowLeft,
   Loader2,
   Play,
-  RefreshCcw,
   Send,
   Shuffle,
 } from 'lucide-react';
-import { type CSSProperties, useMemo, useState } from 'react';
+import { type CSSProperties, useState } from 'react';
 
 import type {
   JumpHopDraftResponse,
   JumpHopPath,
-  JumpHopPlatform,
+  JumpHopTileAsset,
   JumpHopWorkProfileResponse,
 } from '../../../packages/shared/src/contracts/jumpHop';
+import {
+  formatJumpHopDurationLabel,
+  selectJumpHopTileAsset,
+} from '../../services/jump-hop/jumpHopRuntimeModel';
+import { useJumpHopLeaderboard } from '../../services/jump-hop/useJumpHopLeaderboard';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
 
 type JumpHopResultViewProps = {
@@ -34,7 +38,6 @@ type JumpHopResultViewProps = {
   onEdit: () => void;
   onStartTestRun: () => void;
   onPublish: () => void;
-  onRegenerateCharacter: () => void;
   onRegenerateTiles: () => void;
 };
 
@@ -44,43 +47,6 @@ function isJumpHopWorkProfile(
   return 'summary' in profile;
 }
 
-type MiniMapPlatform = {
-  platform: JumpHopPlatform;
-  index: number;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  isStart: boolean;
-  isFinish: boolean;
-};
-
-const difficultyToneByValue: Record<
-  JumpHopPath['difficulty'],
-  { accent: string; soft: string; label: string }
-> = {
-  advanced: {
-    accent: '#df7f40',
-    soft: 'rgba(249, 115, 22, 0.16)',
-    label: '进阶',
-  },
-  challenge: {
-    accent: '#b64a35',
-    soft: 'rgba(182, 98, 63, 0.16)',
-    label: '挑战',
-  },
-  easy: {
-    accent: '#14b8a6',
-    soft: 'rgba(20, 184, 166, 0.16)',
-    label: '轻松',
-  },
-  standard: {
-    accent: '#2563eb',
-    soft: 'rgba(37, 99, 235, 0.16)',
-    label: '标准',
-  },
-};
-
 const tileToneByType: Record<string, string> = {
   accent: '#c4b5fd',
   bonus: '#fde68a',
@@ -90,155 +56,191 @@ const tileToneByType: Record<string, string> = {
   target: '#fecdd3',
 };
 
-function isFiniteNumber(value: unknown): value is number {
-  return typeof value === 'number' && Number.isFinite(value);
+const JUMP_HOP_TAONIER_CHARACTER_IMAGE_SRC =
+  '/branding/jump-hop-taonier-character.png';
+
+function JumpHopDefaultCharacterPreview() {
+  return (
+    <div className="relative grid aspect-[1/1] place-items-center overflow-hidden bg-[linear-gradient(180deg,#eff6ff_0%,#fff7ed_100%)]">
+      <div className="absolute inset-x-[18%] bottom-[14%] h-[14%] rounded-full bg-slate-900/12 blur-[2px]" />
+      <img
+        src={JUMP_HOP_TAONIER_CHARACTER_IMAGE_SRC}
+        alt=""
+        draggable={false}
+        className="relative z-10 h-[78%] w-[78%] object-contain drop-shadow-[0_12px_18px_rgba(146,64,14,0.2)]"
+        data-testid="jump-hop-result-character-logo"
+      />
+    </div>
+  );
 }
 
-function normalizePathPlatforms(path: JumpHopPath | null | undefined) {
-  const platforms = path?.platforms ?? [];
-  if (platforms.length === 0) {
-    return [];
+function JumpHopTilePoolPreview({
+  tileAssets,
+  tileAtlasAsset,
+  tileAtlasFallbackSrc,
+}: {
+  tileAssets: JumpHopTileAsset[];
+  tileAtlasAsset?: JumpHopDraftResponse['tileAtlasAsset'] | null;
+  tileAtlasFallbackSrc?: string | null;
+}) {
+  const visibleTiles = tileAssets.slice(0, 25);
+  const atlasSrc =
+    tileAtlasAsset?.imageSrc?.trim() || tileAtlasFallbackSrc?.trim() || '';
+  const atlasRefreshKey = tileAtlasAsset?.assetObjectId || atlasSrc;
+  if (visibleTiles.length > 0) {
+    return (
+      <div className="grid aspect-[1/1] grid-cols-5 gap-1 bg-white/78 p-2">
+        {visibleTiles.map((tile, index) => (
+          <div
+            key={tile.tileId ?? `${tile.sourceAtlasCell}-${index}`}
+            className="grid min-h-0 place-items-center overflow-hidden rounded-[0.45rem] border border-white/80 bg-slate-50"
+          >
+            {tile.imageSrc ? (
+              <ResolvedAssetImage
+                src={tile.imageSrc}
+                refreshKey={tile.assetObjectId}
+                alt=""
+                className="h-full w-full object-contain"
+              />
+            ) : (
+              <span
+                className="h-4 w-4 rounded-full"
+                style={{
+                  background:
+                    tileToneByType[tile.tileType] ?? tileToneByType.normal,
+                }}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    );
   }
 
-  const coordinatePlatforms = platforms.filter(
-    (platform) => isFiniteNumber(platform.x) && isFiniteNumber(platform.y),
-  );
-  const shouldUseCoordinates = coordinatePlatforms.length >= 2;
-  const xValues = shouldUseCoordinates
-    ? coordinatePlatforms.map((platform) => platform.x)
-    : [];
-  const yValues = shouldUseCoordinates
-    ? coordinatePlatforms.map((platform) => platform.y)
-    : [];
-  const minX = Math.min(...xValues);
-  const maxX = Math.max(...xValues);
-  const minY = Math.min(...yValues);
-  const maxY = Math.max(...yValues);
-  const xRange = Math.max(maxX - minX, 1);
-  const yRange = Math.max(maxY - minY, 1);
-  const denominator = Math.max(platforms.length - 1, 1);
-
-  return platforms.map((platform, index): MiniMapPlatform => {
-    const sequenceRatio = index / denominator;
-    const hasCoordinates =
-      shouldUseCoordinates &&
-      isFiniteNumber(platform.x) &&
-      isFiniteNumber(platform.y);
-    const x = hasCoordinates
-      ? 12 + ((platform.x - minX) / xRange) * 76
-      : 12 + sequenceRatio * 76;
-    const y = hasCoordinates
-      ? 14 + ((platform.y - minY) / yRange) * 72
-      : 50 + Math.sin(sequenceRatio * Math.PI * 2.3) * 18;
-
-    return {
-      platform,
-      index,
-      x,
-      y,
-      width: Math.min(Math.max(platform.width || 54, 42), 82),
-      height: Math.min(Math.max(platform.height || 42, 34), 68),
-      isStart: index === 0 || platform.tileType === 'start',
-      isFinish:
-        index === path?.finishIndex ||
-        platform.tileType === 'finish' ||
-        platform.tileType === 'target',
-    };
-  });
-}
-
-function JumpHopPathMiniMap({ path }: { path: JumpHopPath }) {
-  const platforms = useMemo(() => normalizePathPlatforms(path), [path]);
-  const tone =
-    difficultyToneByValue[path.difficulty] ?? difficultyToneByValue.standard;
-  const pathPoints = platforms
-    .map((platform) => `${platform.x},${platform.y}`)
-    .join(' ');
-
-  if (platforms.length === 0) {
-    return null;
+  if (atlasSrc) {
+    return (
+      <ResolvedAssetImage
+        src={atlasSrc}
+        refreshKey={atlasRefreshKey}
+        alt=""
+        className="aspect-[1/1] w-full object-cover"
+      />
+    );
   }
 
   return (
-    <div
-      className="relative aspect-[1/1] w-full overflow-hidden bg-[linear-gradient(180deg,#f8fbff_0%,#eef8ff_100%)]"
-      style={
-        {
-          '--jump-hop-path-accent': tone.accent,
-          '--jump-hop-path-soft': tone.soft,
-        } as CSSProperties
-      }
-    >
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_24%_18%,rgba(255,255,255,0.92),transparent_28%),radial-gradient(circle_at_75%_78%,rgba(125,211,252,0.24),transparent_32%)]" />
-      <svg
-        viewBox="0 0 100 100"
-        className="absolute inset-0 h-full w-full"
-        aria-hidden="true"
-      >
-        <polyline
-          points={pathPoints}
-          fill="none"
-          stroke="var(--jump-hop-path-soft)"
-          strokeWidth="11"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+    <div className="grid aspect-[1/1] grid-cols-5 gap-1 bg-white/78 p-2">
+      {Array.from({ length: 25 }).map((_, index) => (
+        <span
+          key={index}
+          className="rounded-[0.45rem] border border-white/80"
+          style={{
+            background:
+              Object.values(tileToneByType)[index % Object.values(tileToneByType).length],
+          }}
         />
-        <polyline
-          points={pathPoints}
-          fill="none"
-          stroke="var(--jump-hop-path-accent)"
-          strokeWidth="2.6"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeDasharray="4 4"
-        />
-      </svg>
-      {platforms.map((item) => {
-        const tileTone =
-          tileToneByType[item.platform.tileType] ?? tileToneByType.normal;
-        const scoreBoost =
-          isFiniteNumber(item.platform.scoreValue) &&
-          item.platform.scoreValue > 1;
-        const style = {
-          left: `${item.x}%`,
-          top: `${item.y}%`,
-          width: `${item.width}%`,
-          height: `${item.height}%`,
-          background: tileTone,
-          borderColor: item.isFinish ? tone.accent : 'rgba(255,255,255,0.92)',
-          zIndex: 10 + item.index,
-        } as CSSProperties;
+      ))}
+    </div>
+  );
+}
 
+function JumpHopFirstPlatformsPreview({
+  path,
+  tileAssets,
+}: {
+  path: JumpHopPath | null | undefined;
+  tileAssets: JumpHopTileAsset[];
+}) {
+  const platforms = (path?.platforms ?? []).slice(0, 3);
+
+  return (
+    <div className="relative aspect-[1/1] overflow-hidden bg-[linear-gradient(180deg,#f8fbff_0%,#eef8ff_100%)]">
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_30%,rgba(255,255,255,0.92),transparent_34%)]" />
+      {platforms.map((platform, index) => {
+        const asset = selectJumpHopTileAsset(
+          tileAssets,
+          path?.seed,
+          index,
+          platform.platformId,
+        );
+        const style = {
+          left: `${50 + (index - 1) * 24}%`,
+          top: `${68 - index * 22}%`,
+          width: `${34 - index * 3}%`,
+          zIndex: 10 + index,
+        } as CSSProperties;
         return (
           <div
-            key={
-              item.platform.platformId ||
-              `${item.index}-${item.platform.tileType}`
-            }
-            className="absolute grid max-h-9 max-w-11 min-h-6 min-w-7 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-[0.72rem] border-2 shadow-[0_8px_18px_rgba(15,23,42,0.13)]"
+            key={platform.platformId || index}
+            className="absolute aspect-[1.16/1] -translate-x-1/2 -translate-y-1/2"
             style={style}
           >
-            <span
-              className="h-2.5 w-2.5 rounded-full"
-              style={{
-                background:
-                  item.isStart || item.isFinish ? tone.accent : '#ffffff',
-                boxShadow: scoreBoost ? `0 0 0 4px ${tone.soft}` : undefined,
-              }}
-            />
-            {item.isStart || item.isFinish ? (
-              <span className="absolute -top-2.5 rounded-full bg-slate-950/78 px-1.5 py-0.5 text-[0.58rem] font-black leading-none text-white">
-                {item.isStart ? '起' : '终'}
-              </span>
-            ) : null}
+            <div className="absolute inset-x-[12%] bottom-[-6%] h-[22%] rounded-full bg-slate-900/14 blur-[3px]" />
+            {asset?.imageSrc ? (
+              <ResolvedAssetImage
+                src={asset.imageSrc}
+                refreshKey={asset.assetObjectId}
+                alt=""
+                className="relative h-full w-full object-contain"
+              />
+            ) : (
+              <div
+                className="relative h-full w-full rounded-[18%] border-2 border-white/90 shadow-[0_10px_22px_rgba(15,23,42,0.14)]"
+                style={{
+                  background:
+                    tileToneByType[platform.tileType] ?? tileToneByType.normal,
+                }}
+              />
+            )}
           </div>
         );
       })}
-      <div className="absolute left-2 top-2 rounded-full border border-white/80 bg-white/82 px-2 py-1 text-[0.62rem] font-black text-[var(--platform-text-strong)] shadow-sm">
-        {tone.label}
+      {platforms.length === 0 ? (
+        <div className="absolute inset-0 grid place-items-center text-sm font-bold text-[var(--platform-text-soft)]">
+          路径
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function JumpHopResultLeaderboard({
+  profileId,
+}: {
+  profileId?: string | null;
+}) {
+  const { leaderboard, isLoading, error } = useJumpHopLeaderboard(profileId);
+  const items = leaderboard?.items ?? [];
+
+  return (
+    <div className="mt-4 rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/70 p-3">
+      <div className="flex items-center justify-between gap-2">
+        <div className="text-sm font-black text-[var(--platform-text-strong)]">
+          排行榜
+        </div>
+        {isLoading ? (
+          <Loader2 className="h-4 w-4 animate-spin text-[var(--platform-text-soft)]" />
+        ) : null}
       </div>
-      <div className="absolute bottom-2 right-2 rounded-full border border-white/80 bg-white/82 px-2 py-1 text-[0.62rem] font-black text-[var(--platform-text-base)] shadow-sm">
-        {platforms.length}
+      <div className="mt-3 grid gap-2">
+        {items.slice(0, 5).map((entry) => (
+          <div
+            key={`${entry.rank}-${entry.playerId}`}
+            className="grid grid-cols-[1.8rem_minmax(0,1fr)_auto_auto] items-center gap-2 rounded-[0.75rem] bg-white/70 px-2 py-2 text-xs font-bold text-[var(--platform-text-base)]"
+          >
+            <span className="text-[var(--platform-text-soft)]">
+              {entry.rank}
+            </span>
+            <span className="truncate">{entry.playerId}</span>
+            <span>{entry.successfulJumpCount} 跳</span>
+            <span>{formatJumpHopDurationLabel(entry.durationMs)}</span>
+          </div>
+        ))}
+        {items.length === 0 ? (
+          <div className="rounded-[0.75rem] bg-white/60 px-2 py-2 text-xs font-bold text-[var(--platform-text-soft)]">
+            {error ?? '暂无成绩'}
+          </div>
+        ) : null}
       </div>
     </div>
   );
@@ -252,7 +254,6 @@ export function JumpHopResultView({
   onEdit,
   onStartTestRun,
   onPublish,
-  onRegenerateCharacter,
   onRegenerateTiles,
 }: JumpHopResultViewProps) {
   const [isPublishing, setIsPublishing] = useState(false);
@@ -264,12 +265,13 @@ export function JumpHopResultView({
     path: NonNullable<JumpHopDraftResponse['path']>;
   };
   const path = isWorkProfile ? profile.path : safeDraft.path;
-  const characterAsset = isWorkProfile
-    ? profile.characterAsset
-    : safeDraft.characterAsset;
   const tileAtlasAsset = isWorkProfile
     ? profile.tileAtlasAsset
     : safeDraft.tileAtlasAsset;
+  const tileAssets = isWorkProfile ? profile.tileAssets : safeDraft.tileAssets;
+  const profileId = isWorkProfile
+    ? profile.summary.profileId
+    : safeDraft.profileId;
   const titleSource = isWorkProfile
     ? profile.summary.workTitle
     : profile.workTitle;
@@ -278,15 +280,12 @@ export function JumpHopResultView({
     : profile.workDescription;
   const title = titleSource?.trim() || safeDraft.workTitle.trim() || '跳一跳';
   const summary = summarySource?.trim() || safeDraft.workDescription.trim();
-  const pathPlatforms = normalizePathPlatforms(path);
-  const canRenderPathMiniMap = pathPlatforms.length > 0;
   const hasAssets = Boolean(
-    profile.characterImageSrc?.trim() ||
-      profile.tileAtlasImageSrc?.trim() ||
+    profile.tileAtlasImageSrc?.trim() ||
       profile.pathPreviewImageSrc?.trim() ||
-      characterAsset?.imageSrc?.trim() ||
       tileAtlasAsset?.imageSrc?.trim() ||
-      canRenderPathMiniMap,
+      tileAssets.length > 0 ||
+      path?.platforms.length,
   );
 
   const handlePublish = async () => {
@@ -310,15 +309,6 @@ export function JumpHopResultView({
           返回
         </button>
         <div className="flex gap-2">
-          <button
-            type="button"
-            onClick={onRegenerateCharacter}
-            disabled={isBusy}
-            className="platform-button platform-button--ghost min-h-0 px-3 py-2 text-sm"
-          >
-            <RefreshCcw className="h-4 w-4" />
-            角色
-          </button>
           <button
             type="button"
             onClick={onRegenerateTiles}
@@ -343,69 +333,25 @@ export function JumpHopResultView({
           ) : null}
           <div className="mt-4 grid gap-3 sm:grid-cols-3">
             <div className="overflow-hidden rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/80">
-              {profile.characterImageSrc || characterAsset?.imageSrc ? (
-                <ResolvedAssetImage
-                  src={
-                    ('characterImageSrc' in profile
-                      ? profile.characterImageSrc
-                      : null) ??
-                    characterAsset?.imageSrc ??
-                    ''
-                  }
-                  alt="角色图"
-                  className="aspect-[1/1] w-full object-cover"
-                />
-              ) : (
-                <div className="grid aspect-[1/1] place-items-center text-sm text-[var(--platform-text-soft)]">
-                  角色
-                </div>
-              )}
+              <JumpHopDefaultCharacterPreview />
             </div>
             <div className="overflow-hidden rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/80">
-              {profile.tileAtlasImageSrc || tileAtlasAsset?.imageSrc ? (
-                <ResolvedAssetImage
-                  src={
-                    ('tileAtlasImageSrc' in profile
-                      ? profile.tileAtlasImageSrc
-                      : null) ??
-                    tileAtlasAsset?.imageSrc ??
-                    ''
-                  }
-                  alt="地块图"
-                  className="aspect-[1/1] w-full object-cover"
-                />
-              ) : (
-                <div className="grid aspect-[1/1] place-items-center text-sm text-[var(--platform-text-soft)]">
-                  地块
-                </div>
-              )}
+              <JumpHopTilePoolPreview
+                tileAssets={tileAssets}
+                tileAtlasAsset={tileAtlasAsset}
+                tileAtlasFallbackSrc={
+                  ('tileAtlasImageSrc' in profile
+                    ? profile.tileAtlasImageSrc
+                    : null) ??
+                  null
+                }
+              />
             </div>
             <div className="overflow-hidden rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/80">
-              {path && canRenderPathMiniMap ? (
-                <JumpHopPathMiniMap path={path} />
-              ) : 'pathPreviewImageSrc' in profile &&
-                profile.pathPreviewImageSrc ? (
-                <ResolvedAssetImage
-                  src={profile.pathPreviewImageSrc}
-                  alt="路径预览"
-                  className="aspect-[1/1] w-full object-cover"
-                />
-              ) : path ? (
-                <div className="grid aspect-[1/1] place-items-center px-3 text-center">
-                  <div>
-                    <div className="text-3xl font-black text-[var(--platform-text-strong)]">
-                      {path.platforms.length}
-                    </div>
-                    <div className="mt-1 text-xs font-bold tracking-[0.16em] text-[var(--platform-text-soft)]">
-                      {path.difficulty}
-                    </div>
-                  </div>
-                </div>
-              ) : (
-                <div className="grid aspect-[1/1] place-items-center text-sm text-[var(--platform-text-soft)]">
-                  路径
-                </div>
-              )}
+              <JumpHopFirstPlatformsPreview
+                path={path}
+                tileAssets={tileAssets}
+              />
             </div>
           </div>
           {!hasAssets ? (
@@ -419,6 +365,7 @@ export function JumpHopResultView({
           <div className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
             结果操作
           </div>
+          <JumpHopResultLeaderboard profileId={profileId} />
           {error ? (
             <div className="platform-banner platform-banner--danger mt-3 rounded-2xl text-sm leading-6">
               {error}

src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx

@@ -0,0 +1,919 @@
+/* @vitest-environment jsdom */
+
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, expect, test, vi } from 'vitest';
+
+import type {
+  JumpHopRuntimeRunSnapshotResponse,
+  JumpHopWorkProfileResponse,
+} from '../../../packages/shared/src/contracts/jumpHop';
+import { useResolvedAssetReadUrl } from '../../hooks/useResolvedAssetReadUrl';
+import { buildJumpHopVisiblePlatforms } from '../../services/jump-hop/jumpHopRuntimeModel';
+import { useJumpHopLeaderboard } from '../../services/jump-hop/useJumpHopLeaderboard';
+import { JumpHopRuntimeShell } from './JumpHopRuntimeShell';
+
+vi.mock('../../hooks/useResolvedAssetReadUrl', () => ({
+  useResolvedAssetReadUrl: vi.fn((source: string | null | undefined) => ({
+    resolvedUrl: source?.trim() ?? '',
+    isResolving: false,
+    shouldResolve: Boolean(source?.trim().startsWith('/generated-')),
+  })),
+}));
+
+vi.mock('../../services/jump-hop/useJumpHopLeaderboard', () => ({
+  useJumpHopLeaderboard: vi.fn(),
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  vi.mocked(useJumpHopLeaderboard).mockReturnValue({
+    leaderboard: null,
+    isLoading: false,
+    error: null,
+    refresh: vi.fn(),
+  });
+});
+
+function dispatchPointerEvent(
+  target: HTMLElement,
+  type: string,
+  options: { pointerId: number; clientX: number; clientY: number },
+) {
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  Object.assign(event, options);
+  target.dispatchEvent(event);
+}
+
+test('跳一跳运行态松手时提交向后拖动向量', async () => {
+  vi.useFakeTimers();
+  const onJump = vi.fn().mockResolvedValue(undefined);
+  const run = buildRun();
+  const visiblePlatforms = buildJumpHopVisiblePlatforms(run.path, 0, []);
+  const current = visiblePlatforms[0]!;
+  const target = visiblePlatforms[1]!;
+  const stageSize = { width: 320, height: 568 };
+  const xPixelsPerWorldUnit =
+    Math.abs(
+      ((target.screenX - current.screenX) / 100) * stageSize.width,
+    ) / Math.abs(target.platform.x - current.platform.x);
+  const yPixelsPerWorldUnit =
+    Math.abs(
+      ((target.screenY - current.screenY) / 100) * stageSize.height,
+    ) / Math.abs(target.platform.y - current.platform.y);
+
+  render(
+    <JumpHopRuntimeShell
+      profile={buildProfile()}
+      run={run}
+      onJump={onJump}
+      onRestart={() => {}}
+    />,
+  );
+
+  const stage = screen.getByTestId('jump-hop-stage');
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointerdown', {
+      pointerId: 1,
+      clientX: 180,
+      clientY: 420,
+    });
+  });
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointermove', {
+      pointerId: 1,
+      clientX: 132,
+      clientY: 478,
+    });
+  });
+
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointerup', {
+      pointerId: 1,
+      clientX: 132,
+      clientY: 478,
+    });
+  });
+
+  expect(onJump).toHaveBeenCalledTimes(1);
+  const jumpPayload = onJump.mock.calls[0]?.[0];
+  expect(jumpPayload?.dragVectorX).toBeCloseTo(-48 / xPixelsPerWorldUnit, 2);
+  expect(jumpPayload?.dragVectorY).toBeCloseTo(58 / yPixelsPerWorldUnit, 2);
+  expect(jumpPayload?.dragDistance).toBeGreaterThan(74);
+  expect(jumpPayload?.dragDistance).toBeLessThan(76);
+  vi.useRealTimers();
+});
+
+test('跳一跳运行态拖拽方向按手指起点到松手点计算', async () => {
+  const onJump = vi.fn().mockResolvedValue(undefined);
+  const run = buildRun();
+  const visiblePlatforms = buildJumpHopVisiblePlatforms(run.path, 0, []);
+  const current = visiblePlatforms[0]!;
+  const target = visiblePlatforms[1]!;
+  const stageSize = { width: 320, height: 568 };
+  const xPixelsPerWorldUnit =
+    Math.abs(
+      ((target.screenX - current.screenX) / 100) * stageSize.width,
+    ) / Math.abs(target.platform.x - current.platform.x);
+  const yPixelsPerWorldUnit =
+    Math.abs(
+      ((target.screenY - current.screenY) / 100) * stageSize.height,
+    ) / Math.abs(target.platform.y - current.platform.y);
+
+  render(
+    <JumpHopRuntimeShell
+      profile={buildProfile()}
+      run={run}
+      onJump={onJump}
+      onRestart={() => {}}
+    />,
+  );
+
+  const stage = screen.getByTestId('jump-hop-stage');
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointerdown', {
+      pointerId: 1,
+      clientX: 40,
+      clientY: 40,
+    });
+  });
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointermove', {
+      pointerId: 1,
+      clientX: 10,
+      clientY: 20,
+    });
+  });
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointerup', {
+      pointerId: 1,
+      clientX: 10,
+      clientY: 20,
+    });
+  });
+
+  const jumpPayload = onJump.mock.calls[0]?.[0];
+  expect(jumpPayload?.dragVectorX).toBeLessThan(0);
+  expect(jumpPayload?.dragVectorY).toBeLessThan(0);
+  expect(Math.abs(jumpPayload?.dragVectorX ?? 0)).toBeLessThan(30);
+  expect(Math.abs(jumpPayload?.dragVectorY ?? 0)).toBeLessThan(20);
+  expect(jumpPayload?.dragVectorX).toBeCloseTo(-30 / xPixelsPerWorldUnit, 2);
+  expect(jumpPayload?.dragVectorY).toBeCloseTo(-20 / yPixelsPerWorldUnit, 2);
+});
+
+test('跳一跳运行态不再显示旧圆弧蓄力条而是显示弹弓拉线', async () => {
+  const onJump = vi.fn().mockResolvedValue(undefined);
+
+  render(
+    <JumpHopRuntimeShell
+      profile={buildProfile()}
+      run={buildRun()}
+      onJump={onJump}
+      onRestart={() => {}}
+    />,
+  );
+
+  const stage = screen.getByTestId('jump-hop-stage');
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointerdown', {
+      pointerId: 1,
+      clientX: 180,
+      clientY: 420,
+    });
+  });
+
+  expect(screen.queryByText('起跳')).toBeNull();
+  expect(stage.querySelector('.jump-hop-runtime__charge-orbit')).toBeNull();
+  expect(stage.querySelector('.jump-hop-runtime__slingshot-guide')).toBeTruthy();
+});
+
+test('跳一跳蓄力时角色沿拖拽方向拉伸', async () => {
+  render(
+    <JumpHopRuntimeShell
+      profile={buildProfile({ tileAssets: buildTileAssets() })}
+      run={buildRun()}
+      onJump={vi.fn().mockResolvedValue(undefined)}
+      onRestart={() => {}}
+    />,
+  );
+
+  const stage = screen.getByTestId('jump-hop-stage');
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointerdown', {
+      pointerId: 1,
+      clientX: 180,
+      clientY: 420,
+    });
+  });
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointermove', {
+      pointerId: 1,
+      clientX: 132,
+      clientY: 478,
+    });
+  });
+
+  const character = screen.getByTestId('jump-hop-character-logo')
+    .parentElement as HTMLElement;
+  const stretchTransform = character.style.getPropertyValue(
+    '--jump-hop-character-stretch-transform',
+  );
+  const styleText = Array.from(document.querySelectorAll('style'))
+    .map((style) => style.textContent ?? '')
+    .join('\n');
+
+  expect(stretchTransform).toContain('matrix(');
+  expect(stretchTransform).not.toBe('matrix(1, 0, 0, 1, 0, 0)');
+  expect(styleText).toContain('var(--jump-hop-character-stretch-transform)');
+  expect(styleText).not.toContain(
+    'scaleY(calc(1 - (var(--jump-hop-charge) * 0.16)))',
+  );
+});
+
+test('跳一跳运行态需要三维场景宿主和排行榜面板', () => {
+  const runtimeRequestOptions = {
+    runtimeGuestToken: 'runtime-guest-token',
+  };
+  vi.mocked(useJumpHopLeaderboard).mockReturnValue({
+    leaderboard: {
+      profileId: 'jump-hop-profile-test',
+      items: [
+        {
+          rank: 1,
+          playerId: 'player-1',
+          successfulJumpCount: 8,
+          durationMs: 8123,
+          updatedAt: '2026-05-27T00:00:00Z',
+        },
+      ],
+      viewerBest: null,
+    },
+    isLoading: false,
+    error: null,
+    refresh: vi.fn(),
+  });
+
+  render(
+    <JumpHopRuntimeShell
+      profile={buildProfile()}
+      run={buildRun()}
+      runtimeRequestOptions={runtimeRequestOptions}
+      onJump={vi.fn().mockResolvedValue(undefined)}
+      onRestart={() => {}}
+    />,
+  );
+
+  expect(useJumpHopLeaderboard).toHaveBeenCalledWith(
+    'jump-hop-profile-test',
+    runtimeRequestOptions,
+  );
+  expect(screen.getByTestId('jump-hop-three-scene')).toBeTruthy();
+  expect(screen.getByTestId('jump-hop-runtime-leaderboard')).toBeTruthy();
+  expect(screen.getByText('player-1')).toBeTruthy();
+  expect(screen.getByText('8 跳')).toBeTruthy();
+  expect(screen.getByText('00:08')).toBeTruthy();
+  expect(screen.queryByRole('button', { name: /^起跳$/ })).toBeNull();
+});
+
+test('跳一跳角色层永远压在地块层之上', () => {
+  render(
+    <JumpHopRuntimeShell
+      profile={buildProfile({ tileAssets: buildTileAssets() })}
+      run={buildRun()}
+      onJump={vi.fn().mockResolvedValue(undefined)}
+      onRestart={() => {}}
+    />,
+  );
+
+  const threeScene = screen.getByTestId('jump-hop-three-scene');
+  const firstPlatform = screen.getAllByTestId('jump-hop-tile-image')[0]
+    ?.parentElement?.parentElement as HTMLElement | undefined;
+
+  expect(threeScene.style.zIndex).toBe('100');
+  expect(Number(threeScene.style.zIndex)).toBeGreaterThan(
+    Number(firstPlatform?.style.zIndex ?? 0),
+  );
+});
+
+test('跳一跳落点辅助标识会随着拖拽方向和距离实时移动', async () => {
+  const onJump = vi.fn().mockResolvedValue(undefined);
+
+  render(
+    <JumpHopRuntimeShell
+      profile={buildProfile({ tileAssets: buildTileAssets() })}
+      run={buildRun()}
+      onJump={onJump}
+      onRestart={() => {}}
+    />,
+  );
+
+  const stage = screen.getByTestId('jump-hop-stage');
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointerdown', {
+      pointerId: 1,
+      clientX: 180,
+      clientY: 420,
+    });
+  });
+
+  expect(screen.queryByTestId('jump-hop-landing-assist')).toBeNull();
+
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointermove', {
+      pointerId: 1,
+      clientX: 148,
+      clientY: 454,
+    });
+  });
+
+  const firstAssist = screen.getByTestId('jump-hop-landing-assist');
+  const firstLeft = firstAssist.style.left;
+  const firstTop = firstAssist.style.top;
+  expect(firstAssist.getAttribute('data-target-index')).toBe('1');
+  expect(firstLeft).not.toBe('62.288%');
+
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointermove', {
+      pointerId: 1,
+      clientX: 112,
+      clientY: 492,
+    });
+  });
+
+  const secondAssist = screen.getByTestId('jump-hop-landing-assist');
+  expect(secondAssist.style.left).not.toBe(firstLeft);
+  expect(secondAssist.style.top).not.toBe(firstTop);
+});
+
+test('跳一跳运行态直接渲染生成的地块切片图片', () => {
+  render(
+    <JumpHopRuntimeShell
+      profile={buildProfile({ tileAssets: buildTileAssets() })}
+      run={buildRun()}
+      onJump={vi.fn().mockResolvedValue(undefined)}
+      onRestart={() => {}}
+    />,
+  );
+
+  const tileImages = screen.getAllByTestId('jump-hop-tile-image');
+  expect(tileImages).toHaveLength(3);
+  const generatedReadUrlCalls = vi
+    .mocked(useResolvedAssetReadUrl)
+    .mock.calls.filter(([source]) =>
+      source?.includes('/generated-jump-hop-assets/'),
+    );
+  expect(generatedReadUrlCalls.length).toBeGreaterThanOrEqual(3);
+  for (const [, options] of generatedReadUrlCalls) {
+    expect(options).toEqual(
+      expect.objectContaining({
+        refreshKey: expect.stringMatching(/^asset-object-/),
+      }),
+    );
+  }
+
+  for (const image of tileImages) {
+    expect(image.getAttribute('src')).toContain(
+      '/generated-jump-hop-assets/jump-hop-profile-test/tile-',
+    );
+    fireEvent.load(image);
+    expect(image.getAttribute('data-loaded')).toBe('true');
+  }
+});
+
+test('跳一跳运行态首块地块落在中下方并且后续两块向中央和上方展开', () => {
+  render(
+    <JumpHopRuntimeShell
+      profile={buildProfile({ tileAssets: buildTileAssets() })}
+      run={buildRun()}
+      onJump={vi.fn().mockResolvedValue(undefined)}
+      onRestart={() => {}}
+    />,
+  );
+
+  const tileImages = screen.getAllByTestId('jump-hop-tile-image');
+  expect(tileImages).toHaveLength(3);
+  const first = tileImages[0]?.parentElement?.parentElement as HTMLElement | undefined;
+  const second = tileImages[1]?.parentElement?.parentElement as HTMLElement | undefined;
+  const third = tileImages[2]?.parentElement?.parentElement as HTMLElement | undefined;
+  expect(first?.style.top).toBe('78%');
+  expect(second?.style.top).toBe('50%');
+  expect(third?.style.top).toBe('22%');
+});
+
+test('跳一跳运行态用固定基准宽高和深度 scale 表达地块尺寸', () => {
+  render(
+    <JumpHopRuntimeShell
+      profile={buildProfile({ tileAssets: buildTileAssets() })}
+      run={buildRun()}
+      onJump={vi.fn().mockResolvedValue(undefined)}
+      onRestart={() => {}}
+    />,
+  );
+
+  const firstTile = screen.getAllByTestId('jump-hop-tile-image')[0]
+    ?.parentElement?.parentElement as HTMLElement | undefined;
+
+  expect(firstTile?.style.width).toBe('116px');
+  expect(firstTile?.style.height).toBe('96px');
+  expect(firstTile?.style.getPropertyValue('--jump-hop-platform-scale')).toBe(
+    '1.08',
+  );
+});
+
+test('跳一跳运行态使用陶泥儿透明 logo 作为角色形象', () => {
+  render(
+    <JumpHopRuntimeShell
+      profile={buildProfile({ tileAssets: buildTileAssets() })}
+      run={buildRun()}
+      onJump={vi.fn().mockResolvedValue(undefined)}
+      onRestart={() => {}}
+    />,
+  );
+
+  const logo = screen.getByTestId('jump-hop-character-logo');
+  expect(logo.getAttribute('src')).toBe(
+    '/branding/jump-hop-taonier-character.png',
+  );
+  expect(
+    screen.queryByTestId('jump-hop-character-fallback-shape'),
+  ).toBeNull();
+});
+
+test('跳一跳蓄力和计时刷新不会重建三维画布宿主', async () => {
+  vi.useFakeTimers();
+
+  render(
+    <JumpHopRuntimeShell
+      profile={buildProfile({ tileAssets: buildTileAssets() })}
+      run={buildRun()}
+      onJump={vi.fn().mockResolvedValue(undefined)}
+      onRestart={() => {}}
+    />,
+  );
+
+  const stage = screen.getByTestId('jump-hop-stage');
+  const canvas = screen.getByTestId('jump-hop-three-canvas');
+
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointerdown', {
+      pointerId: 1,
+      clientX: 180,
+      clientY: 420,
+    });
+  });
+  await act(async () => {
+    vi.advanceTimersByTime(520);
+  });
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointermove', {
+      pointerId: 1,
+      clientX: 160,
+      clientY: 460,
+    });
+  });
+
+  expect(screen.getByTestId('jump-hop-three-canvas')).toBe(canvas);
+  vi.useRealTimers();
+});
+
+test('跳一跳后端回包较慢时角色停在目标点等待推进', async () => {
+  vi.useFakeTimers();
+  const onJump = vi.fn().mockResolvedValue(undefined);
+  const initialRun = buildRun();
+  const nextRun: JumpHopRuntimeRunSnapshotResponse = {
+    ...buildRun(),
+    currentPlatformIndex: 1,
+    successfulJumpCount: 1,
+    score: 1,
+    lastJump: {
+      chargeMs: 150,
+      jumpDistance: 1.44,
+      targetPlatformIndex: 1,
+      landedX: 0.8,
+      landedY: 1.2,
+      result: 'hit',
+    },
+  };
+  const { rerender } = render(
+    <JumpHopRuntimeShell
+      profile={buildProfile({ tileAssets: buildTileAssets() })}
+      run={initialRun}
+      onJump={onJump}
+      onRestart={() => {}}
+    />,
+  );
+
+  const stage = screen.getByTestId('jump-hop-stage');
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointerdown', {
+      pointerId: 1,
+      clientX: 180,
+      clientY: 420,
+    });
+  });
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointermove', {
+      pointerId: 1,
+      clientX: 132,
+      clientY: 478,
+    });
+  });
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointerup', {
+      pointerId: 1,
+      clientX: 132,
+      clientY: 478,
+    });
+  });
+
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(580);
+  });
+
+  const character = screen.getByTestId('jump-hop-character-logo')
+    .parentElement as HTMLElement;
+  expect(stage.getAttribute('data-jump-animating')).toBe('true');
+  expect(stage.getAttribute('data-platform-advancing')).toBe('false');
+  expect(Number.parseFloat(character.style.left)).not.toBeCloseTo(50, 2);
+  expect(character.style.getPropertyValue('--jump-hop-flight-from-x')).not.toBe(
+    '0px',
+  );
+  expect(character.style.getPropertyValue('--jump-hop-flight-from-y')).not.toBe(
+    '0px',
+  );
+
+  rerender(
+    <JumpHopRuntimeShell
+      profile={buildProfile({ tileAssets: buildTileAssets() })}
+      run={nextRun}
+      onJump={onJump}
+      onRestart={() => {}}
+    />,
+  );
+
+  expect(screen.getByTestId('jump-hop-stage').getAttribute('data-jump-animating')).toBe(
+    'false',
+  );
+  expect(screen.getByTestId('jump-hop-stage').getAttribute('data-platform-advancing')).toBe(
+    'true',
+  );
+  vi.useRealTimers();
+});
+
+test('跳一跳松手后先播放飞行动画再切换到下一块地块', async () => {
+  vi.useFakeTimers();
+  const onJump = vi.fn().mockResolvedValue(undefined);
+  const initialRun = buildRun();
+  const nextRun: JumpHopRuntimeRunSnapshotResponse = {
+    ...buildRun(),
+    currentPlatformIndex: 1,
+    successfulJumpCount: 1,
+    score: 1,
+    lastJump: {
+      chargeMs: 150,
+      jumpDistance: 1.44,
+      targetPlatformIndex: 1,
+      landedX: 0.8,
+      landedY: 1.2,
+      result: 'hit',
+    },
+  };
+  const { rerender } = render(
+    <JumpHopRuntimeShell
+      profile={buildProfile({ tileAssets: buildTileAssets() })}
+      run={initialRun}
+      onJump={onJump}
+      onRestart={() => {}}
+    />,
+  );
+
+  const stage = screen.getByTestId('jump-hop-stage');
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointerdown', {
+      pointerId: 1,
+      clientX: 180,
+      clientY: 420,
+    });
+  });
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointermove', {
+      pointerId: 1,
+      clientX: 132,
+      clientY: 478,
+    });
+  });
+  await act(async () => {
+    dispatchPointerEvent(stage, 'pointerup', {
+      pointerId: 1,
+      clientX: 132,
+      clientY: 478,
+    });
+  });
+
+  expect(onJump).toHaveBeenCalledTimes(1);
+  expect(stage.getAttribute('data-jump-animating')).toBe('true');
+  expect(screen.getAllByTestId('jump-hop-tile-image')[0]?.parentElement?.parentElement?.style.top).toBe(
+    '78%',
+  );
+  expect(screen.getAllByTestId('jump-hop-tile-image')[0]?.parentElement?.parentElement?.getAttribute('data-current')).toBe(
+    'true',
+  );
+  expect(screen.getAllByTestId('jump-hop-tile-image')[0]?.parentElement?.parentElement?.getAttribute('data-platform-id')).toBe(
+    'p0',
+  );
+
+  rerender(
+    <JumpHopRuntimeShell
+      profile={buildProfile({ tileAssets: buildTileAssets() })}
+      run={nextRun}
+      onJump={onJump}
+      onRestart={() => {}}
+    />,
+  );
+
+  expect(screen.getByTestId('jump-hop-stage').getAttribute('data-jump-animating')).toBe(
+    'true',
+  );
+  expect(screen.getAllByTestId('jump-hop-tile-image')[0]?.parentElement?.parentElement?.style.top).toBe(
+    '78%',
+  );
+  expect(screen.getAllByTestId('jump-hop-tile-image')[0]?.parentElement?.parentElement?.getAttribute('data-current')).toBe(
+    'true',
+  );
+  expect(screen.getAllByTestId('jump-hop-tile-image')[0]?.parentElement?.parentElement?.getAttribute('data-platform-id')).toBe(
+    'p0',
+  );
+
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(580);
+  });
+
+  expect(screen.getByTestId('jump-hop-stage').getAttribute('data-jump-animating')).toBe(
+    'false',
+  );
+  expect(screen.getByTestId('jump-hop-stage').getAttribute('data-platform-advancing')).toBe(
+    'true',
+  );
+  const landedCharacter = screen.getByTestId('jump-hop-character-logo')
+    .parentElement as HTMLElement;
+  expect(landedCharacter.getAttribute('data-landing-recoil')).toBe('true');
+  expect(landedCharacter.style.getPropertyValue('--jump-hop-recoil-x')).not.toBe(
+    '0px',
+  );
+  expect(landedCharacter.style.getPropertyValue('--jump-hop-recoil-y')).not.toBe(
+    '0px',
+  );
+  const cameraLayer = screen.getByTestId('jump-hop-camera-layer');
+  expect(cameraLayer.getAttribute('data-platform-advancing')).toBe('true');
+  expect(cameraLayer.style.getPropertyValue('--jump-hop-camera-shift-y')).toBe(
+    '-28%',
+  );
+  expect(
+    Number.parseFloat(
+      cameraLayer.style.getPropertyValue('--jump-hop-camera-shift-x'),
+    ),
+  ).toBeCloseTo(12.29, 2);
+  const styleText = Array.from(document.querySelectorAll('style'))
+    .map((style) => style.textContent ?? '')
+    .join('\n');
+  expect(styleText).toContain('@keyframes jump-hop-character-recoil');
+  expect(styleText).toMatch(
+    /data-platform-advancing='true'\]\s+\.jump-hop-runtime__platform[\s\S]*transform 1440ms cubic-bezier/,
+  );
+  expect(screen.getByTestId('jump-hop-three-scene').parentElement).toBe(
+    cameraLayer,
+  );
+  expect(
+    screen
+      .getByTestId('jump-hop-stage')
+      .querySelector("[data-advance-state='settling']"),
+  ).toBeNull();
+  expect(
+    screen
+      .getByTestId('jump-hop-stage')
+      .querySelector("[data-advance-state='entering']"),
+  ).toBeNull();
+  expect(screen.getAllByTestId('jump-hop-tile-image')[0]?.parentElement?.parentElement?.getAttribute('data-platform-id')).toBe(
+    'p0',
+  );
+  expect(screen.getAllByTestId('jump-hop-tile-image')[1]?.parentElement?.parentElement?.getAttribute('data-platform-id')).toBe(
+    'p1',
+  );
+  expect(screen.getAllByTestId('jump-hop-tile-image')[1]?.parentElement?.parentElement?.style.top).toBe(
+    '78%',
+  );
+  expect(screen.getAllByTestId('jump-hop-tile-image')[1]?.parentElement?.parentElement?.style.getPropertyValue('--jump-hop-platform-scale')).toBe(
+    '1.08',
+  );
+  expect(screen.getAllByTestId('jump-hop-tile-image')[2]?.parentElement?.parentElement?.getAttribute('data-platform-id')).toBe(
+    'p2',
+  );
+  expect(screen.getAllByTestId('jump-hop-tile-image')[2]?.parentElement?.parentElement?.style.top).toBe(
+    '50%',
+  );
+
+  await act(async () => {
+    vi.advanceTimersByTime(720);
+  });
+
+  expect(screen.getByTestId('jump-hop-stage').getAttribute('data-platform-advancing')).toBe(
+    'true',
+  );
+  expect(
+    (
+      screen.getByTestId('jump-hop-character-logo')
+        .parentElement as HTMLElement
+    ).getAttribute('data-landing-recoil'),
+  ).toBe('false');
+
+  await act(async () => {
+    vi.advanceTimersByTime(660);
+  });
+
+  expect(screen.getByTestId('jump-hop-stage').getAttribute('data-platform-advancing')).toBe(
+    'true',
+  );
+
+  await act(async () => {
+    vi.advanceTimersByTime(100);
+  });
+
+  expect(screen.getByTestId('jump-hop-stage').getAttribute('data-platform-advancing')).toBe(
+    'false',
+  );
+  expect(screen.getByTestId('jump-hop-camera-layer').getAttribute('data-platform-advancing')).toBe(
+    'false',
+  );
+  expect(screen.getAllByTestId('jump-hop-tile-image')[0]?.parentElement?.parentElement?.style.top).toBe(
+    '78%',
+  );
+  expect(screen.getAllByTestId('jump-hop-tile-image')[0]?.parentElement?.parentElement?.getAttribute('data-current')).toBe(
+    'true',
+  );
+  expect(screen.getAllByTestId('jump-hop-tile-image')[0]?.parentElement?.parentElement?.getAttribute('data-platform-id')).toBe(
+    'p1',
+  );
+  expect(screen.getAllByTestId('jump-hop-tile-image')[1]?.parentElement?.parentElement?.style.top).toBe(
+    '50%',
+  );
+
+  vi.useRealTimers();
+});
+
+function buildRun(): JumpHopRuntimeRunSnapshotResponse {
+  return {
+    runId: 'jump-hop-run-test',
+    profileId: 'jump-hop-profile-test',
+    ownerUserId: 'user-test',
+    status: 'playing',
+    currentPlatformIndex: 0,
+    successfulJumpCount: 0,
+    durationMs: 0,
+    score: 0,
+    combo: 0,
+    path: {
+      seed: 'test',
+      difficulty: 'standard',
+      finishIndex: 4294967295,
+      cameraPreset: 'portrait-isometric-9x16',
+      scoring: {
+        chargeToDistanceRatio: 0.004,
+        maxChargeMs: 900,
+        hitBonus: 20,
+        perfectBonus: 60,
+      },
+      platforms: [
+        {
+          platformId: 'p0',
+          tileType: 'start',
+          x: 0,
+          y: 0,
+          width: 1,
+          height: 1,
+          landingRadius: 0.5,
+          perfectRadius: 0.2,
+          scoreValue: 1,
+        },
+        {
+          platformId: 'p1',
+          tileType: 'normal',
+          x: 0.8,
+          y: 1.2,
+          width: 1,
+          height: 1,
+          landingRadius: 0.5,
+          perfectRadius: 0.2,
+          scoreValue: 1,
+        },
+        {
+          platformId: 'p2',
+          tileType: 'target',
+          x: -0.2,
+          y: 2.4,
+          width: 1,
+          height: 1,
+          landingRadius: 0.5,
+          perfectRadius: 0.2,
+          scoreValue: 1,
+        },
+      ],
+    },
+    lastJump: null,
+    startedAtMs: 1000,
+    finishedAtMs: null,
+  };
+}
+
+function buildTileAssets() {
+  return Array.from({ length: 25 }, (_, index) => {
+    const tileNumber = String(index + 1).padStart(2, '0');
+    return {
+      tileType: index === 0 ? 'start' : 'normal',
+      tileId: `tile-${tileNumber}`,
+      imageSrc: `/generated-jump-hop-assets/jump-hop-profile-test/tile-${tileNumber}/image.png`,
+      imageObjectKey: `generated-jump-hop-assets/jump-hop-profile-test/tile-${tileNumber}/image.png`,
+      assetObjectId: `asset-object-${tileNumber}`,
+      sourceAtlasCell: `row-${Math.floor(index / 5) + 1}-col-${(index % 5) + 1}`,
+      atlasRow: Math.floor(index / 5) + 1,
+      atlasCol: (index % 5) + 1,
+      visualWidth: 256,
+      visualHeight: 192,
+      topSurfaceRadius: 42,
+      landingRadius: 34,
+    } satisfies JumpHopWorkProfileResponse['tileAssets'][number];
+  });
+}
+
+function buildProfile(options: {
+  tileAssets?: JumpHopWorkProfileResponse['tileAssets'];
+} = {}): JumpHopWorkProfileResponse {
+  const characterAsset = {
+    assetId: 'builtin',
+    imageSrc: 'builtin://jump-hop/default-character',
+    imageObjectKey: '',
+    assetObjectId: 'builtin',
+    generationProvider: 'builtin-three',
+    prompt: '默认角色',
+    width: 0,
+    height: 0,
+  };
+  return {
+    summary: {
+      runtimeKind: 'jump-hop',
+      workId: 'jump-hop-profile-test',
+      profileId: 'jump-hop-profile-test',
+      ownerUserId: 'user-test',
+      sourceSessionId: 'jump-hop-session-test',
+      themeText: '测试',
+      workTitle: '测试',
+      workDescription: '测试',
+      themeTags: ['测试'],
+      difficulty: 'standard',
+      stylePreset: 'minimal-blocks',
+      coverImageSrc: null,
+      publicationStatus: 'draft',
+      playCount: 0,
+      updatedAt: '2026-05-27T00:00:00Z',
+      publishedAt: null,
+      publishReady: true,
+      generationStatus: 'ready',
+    },
+    draft: {
+      templateId: 'jump-hop',
+      templateName: '跳一跳',
+      profileId: 'jump-hop-profile-test',
+      themeText: '测试',
+      workTitle: '测试',
+      workDescription: '测试',
+      themeTags: ['测试'],
+      difficulty: 'standard',
+      stylePreset: 'minimal-blocks',
+      defaultCharacter: {
+        characterId: 'jump-hop-default-runner',
+        displayName: '默认角色',
+        modelKind: 'builtin-three',
+        bodyColor: '#f59e0b',
+        accentColor: '#2563eb',
+      },
+      characterPrompt: '默认角色',
+      tilePrompt: '地块',
+      endMoodPrompt: null,
+      characterAsset,
+      tileAtlasAsset: characterAsset,
+      tileAssets: options.tileAssets ?? [],
+      path: buildRun().path,
+      coverComposite: null,
+      generationStatus: 'ready',
+    },
+    path: buildRun().path,
+    defaultCharacter: {
+      characterId: 'jump-hop-default-runner',
+      displayName: '默认角色',
+      modelKind: 'builtin-three',
+      bodyColor: '#f59e0b',
+      accentColor: '#2563eb',
+    },
+    characterAsset,
+    tileAtlasAsset: characterAsset,
+    tileAssets: options.tileAssets ?? [],
+  };
+}

src/components/platform-entry/PlatformEntryFlowShellImpl.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, test } from 'vitest';
+
+import {
+  resolveMiniGameGenerationProgressTickState,
+} from './PlatformEntryFlowShellImpl';
+import { createMiniGameDraftGenerationState } from '../../services/miniGameDraftGenerationProgress';
+
+describe('resolveMiniGameGenerationProgressTickState', () => {
+  test('returns jump hop and wooden fish generation states for progress ticking', () => {
+    const jumpHopState = createMiniGameDraftGenerationState('jump-hop');
+    const woodenFishState = createMiniGameDraftGenerationState('wooden-fish');
+
+    expect(
+      resolveMiniGameGenerationProgressTickState('jump-hop-generating', {
+        'jump-hop': jumpHopState,
+      }),
+    ).toBe(jumpHopState);
+    expect(
+      resolveMiniGameGenerationProgressTickState('wooden-fish-generating', {
+        'wooden-fish': woodenFishState,
+      }),
+    ).toBe(woodenFishState);
+  });
+
+  test('returns null when the stage does not need generation ticking', () => {
+    expect(
+      resolveMiniGameGenerationProgressTickState('platform', {
+        'jump-hop': createMiniGameDraftGenerationState('jump-hop'),
+      }),
+    ).toBeNull();
+  });
+});

src/components/platform-entry/PlatformEntryFlowShellImpl.tsx

@@ -38,7 +38,10 @@ import type {
   BabyObjectMatchDraft,
   CreateBabyObjectMatchDraftRequest,
 } from '../../../packages/shared/src/contracts/edutainmentBabyObject';
-import type { JumpHopWorkSummaryResponse } from '../../../packages/shared/src/contracts/jumpHop';
+import type {
+  JumpHopJumpRequest,
+  JumpHopWorkSummaryResponse,
+} from '../../../packages/shared/src/contracts/jumpHop';
 import type {
   CreateMatch3DSessionRequest,
   ExecuteMatch3DActionRequest,
@@ -107,6 +110,7 @@ import type {
   VisualNovelWorkDetail,
   VisualNovelWorkSummary,
 } from '../../../packages/shared/src/contracts/visualNovel';
+import type { WoodenFishWorkSummaryResponse } from '../../../packages/shared/src/contracts/woodenFish';
 import { buildCustomWorldPlayableCharacters } from '../../data/characterPresets';
 import {
   buildPublicWorkStagePath,
@@ -186,6 +190,7 @@ import {
   jumpHopClient,
   type JumpHopGalleryCardResponse,
   type JumpHopRunResponse,
+  type JumpHopRuntimeRequestOptions,
   type JumpHopSessionResponse,
   type JumpHopSessionSnapshotResponse,
   JumpHopWorkProfileResponse,
@@ -343,7 +348,6 @@ import {
   type WoodenFishWorkProfileResponse,
   type WoodenFishWorkspaceCreateRequest,
 } from '../../services/wooden-fish/woodenFishClient';
-import type { WoodenFishWorkSummaryResponse } from '../../../packages/shared/src/contracts/woodenFish';
 import type { CustomWorldProfile } from '../../types';
 import { useAuthUi } from '../auth/AuthUiContext';
 import { PublishShareModal } from '../common/PublishShareModal';
@@ -430,11 +434,11 @@ import {
   PlatformErrorDialog,
   type PlatformErrorDialogPayload,
 } from './PlatformErrorDialog';
+import { PlatformFeedbackView } from './PlatformFeedbackView';
 import {
   PlatformTaskCompletionDialog,
   type PlatformTaskCompletionDialogPayload,
 } from './PlatformTaskCompletionDialog';
-import { PlatformFeedbackView } from './PlatformFeedbackView';
 import { PlatformWorkDetailView } from './PlatformWorkDetailView';
 import { usePlatformCreationAgentFlowController } from './usePlatformCreationAgentFlowController';
 import { usePlatformEntryBootstrap } from './usePlatformEntryBootstrap';
@@ -478,6 +482,30 @@ type PuzzleBackgroundCompileTask = {
   error: string | null;
 };
 
+type MiniGameGenerationProgressTickStateMap = Partial<
+  Record<MiniGameDraftGenerationKind, MiniGameDraftGenerationState | null>
+>;
+
+export function resolveMiniGameGenerationProgressTickState(
+  selectionStage: SelectionStage,
+  states: MiniGameGenerationProgressTickStateMap,
+) {
+  const stageKindMap: Partial<
+    Record<SelectionStage, MiniGameDraftGenerationKind>
+  > = {
+    'puzzle-generating': 'puzzle',
+    'big-fish-generating': 'big-fish',
+    'square-hole-generating': 'square-hole',
+    'match3d-generating': 'match3d',
+    'baby-object-match-generating': 'baby-object-match',
+    'jump-hop-generating': 'jump-hop',
+    'wooden-fish-generating': 'wooden-fish',
+  };
+  const kind = stageKindMap[selectionStage];
+
+  return kind ? (states[kind] ?? null) : null;
+}
+
 type PuzzleDetailReturnTarget = {
   tab: PlatformHomeTab;
 };
@@ -580,11 +608,11 @@ const AGENT_RESULT_STRUCTURAL_BLOCKER_CODES = new Set([
   'publish_missing_main_chapter',
   'publish_missing_first_act',
 ]);
-const RECOMMEND_RUNTIME_BACKGROUND_AUTH_OPTIONS =
+const RECOMMEND_RUNTIME_BACKGROUND_AUTH_OPTIONS: JumpHopRuntimeRequestOptions =
   BACKGROUND_AUTH_REQUEST_OPTIONS;
-const RECOMMEND_PUZZLE_BACKGROUND_AUTH_OPTIONS =
+const RECOMMEND_PUZZLE_BACKGROUND_AUTH_OPTIONS: JumpHopRuntimeRequestOptions =
   RECOMMEND_RUNTIME_BACKGROUND_AUTH_OPTIONS;
-async function buildRecommendRuntimeGuestOptions() {
+async function buildRecommendRuntimeGuestOptions(): Promise<JumpHopRuntimeRequestOptions> {
   const { token } = await ensureRuntimeGuestToken();
   return {
     ...RECOMMEND_RUNTIME_BACKGROUND_AUTH_OPTIONS,
@@ -599,9 +627,9 @@ function shouldUseRecommendRuntimeGuestAuth(
 async function buildRecommendRuntimeAuthOptions(
   authUi: { user?: { id?: string } | null } | null | undefined,
   embedded?: boolean,
-) {
+): Promise<JumpHopRuntimeRequestOptions> {
   if (!embedded) {
-    return {};
+    return RECOMMEND_RUNTIME_BACKGROUND_AUTH_OPTIONS;
   }
 
   if (shouldUseRecommendRuntimeGuestAuth(authUi)) {
@@ -2517,6 +2545,7 @@ function buildPendingJumpHopWorks(
       profileId: `jump-hop-profile-${sessionId}`,
       ownerUserId: '',
       sourceSessionId: sessionId,
+      themeText: '跳一跳',
       workTitle: '跳一跳草稿',
       workDescription: '正在生成跳一跳玩法草稿。',
       themeTags: [],
@@ -3233,6 +3262,8 @@ export function PlatformEntryFlowShellImpl({
   const [jumpHopRun, setJumpHopRun] = useState<
     JumpHopRunResponse['run'] | null
   >(null);
+  const [jumpHopRuntimeRequestOptions, setJumpHopRuntimeRequestOptions] =
+    useState<JumpHopRuntimeRequestOptions | null>(null);
   const [jumpHopWork, setJumpHopWork] =
     useState<JumpHopWorkProfileResponse | null>(null);
   const [jumpHopGalleryEntries, setJumpHopGalleryEntries] = useState<
@@ -4779,14 +4810,18 @@ export function PlatformEntryFlowShellImpl({
   ]);
 
   useEffect(() => {
-    const activeGenerationState =
-      selectionStage === 'puzzle-generating'
-        ? puzzleGenerationState
-        : selectionStage === 'match3d-generating'
-          ? match3dGenerationState
-          : selectionStage === 'baby-object-match-generating'
-            ? babyObjectMatchGenerationState
-            : null;
+    const activeGenerationState = resolveMiniGameGenerationProgressTickState(
+      selectionStage,
+      {
+        puzzle: puzzleGenerationState,
+        'big-fish': bigFishGenerationState,
+        'square-hole': squareHoleGenerationState,
+        match3d: match3dGenerationState,
+        'baby-object-match': babyObjectMatchGenerationState,
+        'jump-hop': jumpHopGenerationState,
+        'wooden-fish': woodenFishGenerationState,
+      },
+    );
     const shouldTickProgress =
       selectionStage === 'visual-novel-generating'
         ? visualNovelGenerationStartedAtMs != null &&
@@ -4808,11 +4843,15 @@ export function PlatformEntryFlowShellImpl({
     return () => window.clearInterval(timerId);
   }, [
     babyObjectMatchGenerationState,
+    bigFishGenerationState,
+    jumpHopGenerationState,
     match3dGenerationState,
     puzzleGenerationState,
     selectionStage,
+    squareHoleGenerationState,
     visualNovelGenerationPhase,
     visualNovelGenerationStartedAtMs,
+    woodenFishGenerationState,
   ]);
 
   const runProtectedAction = useCallback(
@@ -6615,6 +6654,7 @@ export function PlatformEntryFlowShellImpl({
     setJumpHopSession(null);
     setJumpHopWork(null);
     setJumpHopRun(null);
+    setJumpHopRuntimeRequestOptions(null);
     setJumpHopGenerationState(null);
     enterCreateTab();
     setShowCreationTypeModal(false);
@@ -7629,6 +7669,7 @@ export function PlatformEntryFlowShellImpl({
     setJumpHopRuntimeReturnStage('jump-hop-result');
     setJumpHopGenerationState(null);
     setJumpHopSession(null);
+    setJumpHopRuntimeRequestOptions(null);
     setJumpHopError(null);
     returnToCreationFlowSource();
   }, [returnToCreationFlowSource]);
@@ -8642,6 +8683,7 @@ export function PlatformEntryFlowShellImpl({
       );
       setJumpHopWork(null);
       setJumpHopRun(null);
+      setJumpHopRuntimeRequestOptions(null);
       setJumpHopGenerationState(generationState);
       setIsJumpHopBusy(true);
       setSelectionStage('jump-hop-generating');
@@ -8651,6 +8693,8 @@ export function PlatformEntryFlowShellImpl({
           created.session.sessionId,
           {
             actionType: 'compile-draft',
+            themeText:
+              payload?.themeText ?? created.session.draft?.themeText,
             workTitle: payload?.workTitle ?? created.session.draft?.workTitle,
             workDescription:
               payload?.workDescription ??
@@ -8742,7 +8786,7 @@ export function PlatformEntryFlowShellImpl({
   }, [compileJumpHopSession, jumpHopSession, setSelectionStage]);
 
   const regenerateJumpHopAsset = useCallback(
-    async (actionType: 'regenerate-character' | 'regenerate-tiles') => {
+    async (actionType: 'regenerate-tiles') => {
       if (!jumpHopSession?.sessionId) {
         setSelectionStage('jump-hop-workspace');
         return;
@@ -8758,6 +8802,9 @@ export function PlatformEntryFlowShellImpl({
           jumpHopSession.sessionId,
           {
             actionType,
+            profileId:
+              jumpHopWork?.summary.profileId ?? jumpHopSession.draft?.profileId,
+            themeText: jumpHopSession.draft?.themeText,
             workTitle: jumpHopSession.draft?.workTitle,
             workDescription: jumpHopSession.draft?.workDescription,
             themeTags: jumpHopSession.draft?.themeTags,
@@ -8783,9 +8830,7 @@ export function PlatformEntryFlowShellImpl({
       } catch (error) {
         const errorMessage = resolveRpgCreationErrorMessage(
           error,
-          actionType === 'regenerate-character'
-            ? '重新生成跳一跳角色失败。'
-            : '重新生成跳一跳地块失败。',
+          '重新生成跳一跳地块失败。',
         );
         setJumpHopError(errorMessage);
         setJumpHopGenerationState(
@@ -8858,7 +8903,9 @@ export function PlatformEntryFlowShellImpl({
     setJumpHopError(null);
     setJumpHopRuntimeReturnStage('jump-hop-result');
     try {
-      const response = await jumpHopClient.startRun(profileId);
+      const response = await jumpHopClient.startRun(profileId, {
+        runtimeMode: 'draft',
+      });
       setJumpHopRun(response.run);
       setSelectionStage('jump-hop-runtime');
     } catch (error) {
@@ -8889,13 +8936,30 @@ export function PlatformEntryFlowShellImpl({
       setJumpHopError(null);
       setJumpHopRuntimeReturnStage(options.returnStage ?? 'work-detail');
       try {
-        const runtimeGuestOptions = await buildRecommendRuntimeAuthOptions(
-          authUi,
-          options.embedded,
+        const runtimeGuestOptions =
+          options.embedded || shouldUseRecommendRuntimeGuestAuth(authUi)
+            ? await buildRecommendRuntimeAuthOptions(authUi, true)
+            : RECOMMEND_RUNTIME_BACKGROUND_AUTH_OPTIONS;
+        setJumpHopRuntimeRequestOptions(
+          runtimeGuestOptions.runtimeGuestToken?.trim()
+            ? {
+                runtimeGuestToken: runtimeGuestOptions.runtimeGuestToken,
+                authImpact: runtimeGuestOptions.authImpact,
+                skipAuth: runtimeGuestOptions.skipAuth,
+                skipRefresh: runtimeGuestOptions.skipRefresh,
+                notifyAuthStateChange:
+                  runtimeGuestOptions.notifyAuthStateChange,
+                clearAuthOnUnauthorized:
+                  runtimeGuestOptions.clearAuthOnUnauthorized,
+              }
+            : null,
         );
         const [detail, runResponse] = await Promise.all([
           jumpHopClient.getWorkDetail(normalizedProfileId).catch(() => null),
-          jumpHopClient.startRun(normalizedProfileId, runtimeGuestOptions),
+          jumpHopClient.startRun(normalizedProfileId, {
+            ...runtimeGuestOptions,
+            runtimeMode: 'published',
+          }),
         ]);
         if (detail?.item) {
           setJumpHopWork(detail.item);
@@ -8933,7 +8997,10 @@ export function PlatformEntryFlowShellImpl({
     setIsJumpHopBusy(true);
     setJumpHopError(null);
     try {
-      const response = await jumpHopClient.restartRun(runId);
+      const response = await jumpHopClient.restartRun(
+        runId,
+        jumpHopRuntimeRequestOptions ?? undefined,
+      );
       setJumpHopRun(response.run);
     } catch (error) {
       setJumpHopError(
@@ -8942,16 +9009,29 @@ export function PlatformEntryFlowShellImpl({
     } finally {
       setIsJumpHopBusy(false);
     }
-  }, [jumpHopRun?.runId, startJumpHopTestRunFromProfile]);
+  }, [
+    jumpHopRun?.runId,
+    jumpHopRuntimeRequestOptions,
+    startJumpHopTestRunFromProfile,
+  ]);
 
   const submitJumpHopJumpAction = useCallback(
-    async (payload: { chargeMs: number }) => {
+    async (
+      payload: Pick<
+        JumpHopJumpRequest,
+        'dragDistance' | 'dragVectorX' | 'dragVectorY'
+      >,
+    ) => {
       const runId = jumpHopRun?.runId;
       if (!runId) {
         return;
       }
       try {
-        const response = await jumpHopClient.submitJump(runId, payload);
+        const response = await jumpHopClient.submitJump(
+          runId,
+          payload,
+          jumpHopRuntimeRequestOptions ?? undefined,
+        );
         setJumpHopRun(response.run);
       } catch (error) {
         setJumpHopError(
@@ -8959,7 +9039,7 @@ export function PlatformEntryFlowShellImpl({
         );
       }
     },
-    [jumpHopRun?.runId],
+    [jumpHopRun?.runId, jumpHopRuntimeRequestOptions],
   );
 
   const compileWoodenFishSession = useCallback(
@@ -13073,6 +13153,14 @@ export function PlatformEntryFlowShellImpl({
       return;
     }
 
+    if (isJumpHopGalleryEntry(selectedPublicWorkDetail)) {
+      setPublicWorkDetailError(null);
+      void startJumpHopRunFromProfile(selectedPublicWorkDetail.profileId, {
+        returnStage: 'work-detail',
+      });
+      return;
+    }
+
     runProtectedAction(() => {
       if (isBigFishGalleryEntry(selectedPublicWorkDetail)) {
         const work = mapPublicWorkDetailToBigFishWork(selectedPublicWorkDetail);
@@ -13107,14 +13195,6 @@ export function PlatformEntryFlowShellImpl({
         return;
       }
 
-      if (isJumpHopGalleryEntry(selectedPublicWorkDetail)) {
-        setPublicWorkDetailError(null);
-        void startJumpHopRunFromProfile(selectedPublicWorkDetail.profileId, {
-          returnStage: 'work-detail',
-        });
-        return;
-      }
-
       if (isWoodenFishGalleryEntry(selectedPublicWorkDetail)) {
         setPublicWorkDetailError(null);
         void startWoodenFishRunFromProfile(selectedPublicWorkDetail.profileId, {
@@ -13616,37 +13696,15 @@ export function PlatformEntryFlowShellImpl({
           run={jumpHopRun}
           isBusy={isJumpHopBusy}
           error={jumpHopError}
+          runtimeRequestOptions={jumpHopRuntimeRequestOptions ?? undefined}
           onBack={() => {
             setActiveRecommendRuntimeKind(null);
           }}
           onRestart={() => {
-            if (!jumpHopRun?.runId || isJumpHopBusy) {
-              return;
-            }
-
-            setIsJumpHopBusy(true);
-            setJumpHopError(null);
-            void jumpHopClient
-              .restartRun(jumpHopRun.runId)
-              .then((response) => {
-                setJumpHopRun(response.run);
-              })
-              .catch((error) => {
-                setJumpHopError(
-                  resolveRpgCreationErrorMessage(error, '重新开始跳一跳失败。'),
-                );
-              })
-              .finally(() => {
-                setIsJumpHopBusy(false);
-              });
+            void restartJumpHopRuntimeRun();
           }}
           onJump={async (payload) => {
-            const runId = jumpHopRun?.runId;
-            if (!runId) {
-              throw new Error('跳一跳运行态缺少 runId。');
-            }
-            const response = await jumpHopClient.submitJump(runId, payload);
-            setJumpHopRun(response.run);
+            await submitJumpHopJumpAction(payload);
           }}
         />
       );
@@ -15516,6 +15574,7 @@ export function PlatformEntryFlowShellImpl({
                 )}
                 progress={buildMiniGameDraftGenerationProgress(
                   bigFishGenerationState,
+                  miniGameGenerationProgressNowMs,
                 )}
                 isGenerating={isBigFishBusy}
                 error={bigFishError}
@@ -16110,6 +16169,7 @@ export function PlatformEntryFlowShellImpl({
                 )}
                 progress={buildMiniGameDraftGenerationProgress(
                   squareHoleGenerationState,
+                  miniGameGenerationProgressNowMs,
                 )}
                 isGenerating={isSquareHoleBusy}
                 error={squareHoleError}
@@ -16320,6 +16380,7 @@ export function PlatformEntryFlowShellImpl({
                 )}
                 progress={buildMiniGameDraftGenerationProgress(
                   jumpHopGenerationState,
+                  miniGameGenerationProgressNowMs,
                 )}
                 isGenerating={isJumpHopBusy}
                 error={jumpHopError}
@@ -16363,9 +16424,6 @@ export function PlatformEntryFlowShellImpl({
                 }}
                 onStartTestRun={startJumpHopTestRunFromProfile}
                 onPublish={publishJumpHopDraft}
-                onRegenerateCharacter={() => {
-                  void regenerateJumpHopAsset('regenerate-character');
-                }}
                 onRegenerateTiles={() => {
                   void regenerateJumpHopAsset('regenerate-tiles');
                 }}
@@ -16390,6 +16448,7 @@ export function PlatformEntryFlowShellImpl({
                 profile={jumpHopWork}
                 isBusy={isJumpHopBusy}
                 error={jumpHopError}
+                runtimeRequestOptions={jumpHopRuntimeRequestOptions ?? undefined}
                 onBack={() => {
                   setSelectionStage(jumpHopRuntimeReturnStage);
                 }}
@@ -16448,6 +16507,7 @@ export function PlatformEntryFlowShellImpl({
                 )}
                 progress={buildMiniGameDraftGenerationProgress(
                   woodenFishGenerationState,
+                  miniGameGenerationProgressNowMs,
                 )}
                 isGenerating={isWoodenFishBusy}
                 error={woodenFishError}

src/components/rpg-entry/RpgEntryFlowShell.agent.interaction.test.tsx

@@ -13,6 +13,10 @@ import type {
   CustomWorldAgentSessionSnapshot,
   CustomWorldWorkSummary,
 } from '../../../packages/shared/src/contracts/customWorldAgent';
+import type {
+  JumpHopRuntimeRunSnapshotResponse,
+  JumpHopWorkProfileResponse,
+} from '../../../packages/shared/src/contracts/jumpHop';
 import type {
   BabyObjectMatchDraft,
   CreateBabyObjectMatchDraftRequest,
@@ -63,6 +67,7 @@ import {
   submitBigFishInput,
 } from '../../services/big-fish-runtime';
 import { listBigFishWorks } from '../../services/big-fish-works';
+import { jumpHopClient } from '../../services/jump-hop/jumpHopClient';
 import {
   type CreationEntryConfig,
   fetchCreationEntryConfig,
@@ -167,6 +172,7 @@ import {
 } from '../../services/square-hole-works';
 import { listVisualNovelGallery } from '../../services/visual-novel-runtime';
 import { listVisualNovelWorks } from '../../services/visual-novel-works';
+import { woodenFishClient } from '../../services/wooden-fish/woodenFishClient';
 import { type CustomWorldProfile, WorldType } from '../../types';
 import {
   AuthUiContext,
@@ -579,6 +585,42 @@ vi.mock('../../services/puzzle-runtime', () => ({
   usePuzzleRuntimeProp: vi.fn(),
 }));
 
+vi.mock('../../services/jump-hop/jumpHopClient', () => ({
+  jumpHopClient: {
+    getGalleryDetail: vi.fn(),
+    getLeaderboard: vi.fn(),
+    getSession: vi.fn(),
+    getWorkDetail: vi.fn(),
+    listGallery: vi.fn(),
+    listWorks: vi.fn(),
+    publishWork: vi.fn(),
+    restartRun: vi.fn(),
+    startRun: vi.fn(),
+    submitJump: vi.fn(),
+  },
+}));
+
+vi.mock('../../services/wooden-fish/woodenFishClient', () => ({
+  woodenFishClient: {
+    checkpointRun: vi.fn(),
+    createSession: vi.fn(),
+    executeAction: vi.fn(),
+    finishRun: vi.fn(),
+    getGalleryDetail: vi.fn(),
+    getSession: vi.fn(),
+    getWorkDetail: vi.fn(),
+    listGallery: vi.fn(async () => ({
+      hasMore: false,
+      items: [],
+      nextCursor: null,
+    })),
+    listWorks: vi.fn(async () => ({ items: [] })),
+    publishWork: vi.fn(),
+    restartRun: vi.fn(),
+    startRun: vi.fn(),
+  },
+}));
+
 vi.mock('../../services/rpg-entry/rpgEntryLibraryClient', () => ({
   ...rpgEntryLibraryServiceMocks,
 }));
@@ -2518,6 +2560,12 @@ beforeEach(() => {
   vi.mocked(deleteRpgEntryWorldProfile).mockResolvedValue([]);
   vi.mocked(listVisualNovelGallery).mockResolvedValue({ works: [] });
   vi.mocked(listVisualNovelWorks).mockResolvedValue({ works: [] });
+  vi.mocked(woodenFishClient.listGallery).mockResolvedValue({
+    hasMore: false,
+    items: [],
+    nextCursor: null,
+  });
+  vi.mocked(woodenFishClient.listWorks).mockResolvedValue({ items: [] });
   vi.mocked(listLocalBabyObjectMatchDrafts).mockResolvedValue([]);
   vi.mocked(deleteLocalBabyObjectMatchDraft).mockResolvedValue([]);
   vi.mocked(saveBabyObjectMatchDraft).mockImplementation(async (payload) => ({
@@ -4557,7 +4605,7 @@ test('match3d result trial passes generated models into first runtime mount', as
   await waitFor(() => {
     expect(match3dServerRuntimeAdapterMock.startRun).toHaveBeenCalledWith(
       'match3d-profile-draft-1',
-      {},
+      ISOLATED_RUNTIME_AUTH_OPTIONS,
     );
   });
   expect(
@@ -4650,7 +4698,7 @@ test('match3d result trial passes generated 2D image views into first runtime mo
   await waitFor(() => {
     expect(match3dServerRuntimeAdapterMock.startRun).toHaveBeenCalledWith(
       'match3d-profile-draft-2d-1',
-      {},
+      ISOLATED_RUNTIME_AUTH_OPTIONS,
     );
   });
   expect(
@@ -5680,10 +5728,10 @@ test('opening a compiled draft with a missing agent session falls back to draft
   await waitFor(() => {
     expect(fallbackDraftPanel.getAttribute('aria-hidden')).toBe('false');
     expect(
-      within(fallbackDraftPanel).getByText(
+      screen.getAllByText(
         '这份共创草稿已失效，已为你返回草稿列表，请重新开始创作。',
-      ),
-    ).toBeTruthy();
+      ).length,
+    ).toBeGreaterThan(0);
   });
 
   expect(window.location.search).toBe('');
@@ -5799,6 +5847,213 @@ test('logged out public detail gates puzzle start and remix before real actions'
   expect(remixPuzzleGalleryWork).not.toHaveBeenCalled();
 });
 
+test('logged out public jump-hop detail starts runtime without requireAuth', async () => {
+  const user = userEvent.setup();
+  const requireAuth = vi.fn();
+  const publishedJumpHopWork: JumpHopWorkProfileResponse = {
+    summary: {
+      runtimeKind: 'jump-hop',
+      workId: 'jump-hop-work-public-1',
+      profileId: 'jump-hop-profile-public-12345678',
+      ownerUserId: 'user-2',
+      sourceSessionId: 'jump-hop-session-public-1',
+      themeText: '云上方块',
+      workTitle: '云上方块跳一跳',
+      workDescription: '在云层地块之间连续弹跳。',
+      themeTags: ['云层', '跳跃'],
+      difficulty: 'standard',
+      stylePreset: 'paper-toy',
+      coverImageSrc: null,
+      publicationStatus: 'published',
+      playCount: 3,
+      updatedAt: '2026-05-29T10:00:00.000Z',
+      publishedAt: '2026-05-29T10:00:00.000Z',
+      publishReady: true,
+      generationStatus: 'ready',
+    },
+    draft: {
+      templateId: 'jump-hop',
+      templateName: '跳一跳',
+      profileId: 'jump-hop-profile-public-12345678',
+      themeText: '云上方块',
+      workTitle: '云上方块跳一跳',
+      workDescription: '在云层地块之间连续弹跳。',
+      themeTags: ['云层', '跳跃'],
+      difficulty: 'standard',
+      stylePreset: 'paper-toy',
+      defaultCharacter: {
+        characterId: 'builtin-default',
+        displayName: '默认角色',
+        modelKind: 'builtin-three',
+        bodyColor: '#df7f40',
+        accentColor: '#2563eb',
+      },
+      characterPrompt: '',
+      tilePrompt: '云上方块',
+      endMoodPrompt: null,
+      characterAsset: null,
+      tileAtlasAsset: null,
+      tileAssets: [],
+      path: null,
+      coverComposite: null,
+      generationStatus: 'ready',
+    },
+    path: {
+      seed: 'jump-hop-public-seed',
+      difficulty: 'standard',
+      platforms: [
+        {
+          platformId: 'platform-0',
+          tileType: 'start',
+          x: 0,
+          y: 0,
+          width: 1,
+          height: 1,
+          landingRadius: 0.7,
+          perfectRadius: 0.25,
+          scoreValue: 1,
+        },
+        {
+          platformId: 'platform-1',
+          tileType: 'normal',
+          x: 1,
+          y: 1,
+          width: 1,
+          height: 1,
+          landingRadius: 0.7,
+          perfectRadius: 0.25,
+          scoreValue: 1,
+        },
+        {
+          platformId: 'platform-2',
+          tileType: 'normal',
+          x: -1,
+          y: 2,
+          width: 1,
+          height: 1,
+          landingRadius: 0.7,
+          perfectRadius: 0.25,
+          scoreValue: 1,
+        },
+      ],
+      finishIndex: 2,
+      cameraPreset: 'portrait-top-down',
+      scoring: {
+        chargeToDistanceRatio: 1,
+        maxChargeMs: 1800,
+        hitBonus: 0,
+        perfectBonus: 0,
+      },
+    },
+    defaultCharacter: {
+      characterId: 'builtin-default',
+      displayName: '默认角色',
+      modelKind: 'builtin-three',
+      bodyColor: '#df7f40',
+      accentColor: '#2563eb',
+    },
+    characterAsset: {
+      assetId: 'builtin-character',
+      imageSrc: '',
+      imageObjectKey: '',
+      assetObjectId: '',
+      generationProvider: 'builtin',
+      prompt: '',
+      width: 1,
+      height: 1,
+    },
+    tileAtlasAsset: {
+      assetId: 'tile-atlas-1',
+      imageSrc: '/generated-jump-hop-assets/public/atlas.png',
+      imageObjectKey: 'generated-jump-hop-assets/public/atlas.png',
+      assetObjectId: 'asset-tile-atlas-1',
+      generationProvider: 'gpt-image-2',
+      prompt: '云上方块',
+      width: 1024,
+      height: 1024,
+    },
+    tileAssets: [],
+  };
+  const publishedJumpHopRun: JumpHopRuntimeRunSnapshotResponse = {
+    runId: 'jump-hop-run-public-1',
+    profileId: publishedJumpHopWork.summary.profileId,
+    ownerUserId: '',
+    status: 'playing',
+    currentPlatformIndex: 0,
+    successfulJumpCount: 0,
+    durationMs: 0,
+    score: 0,
+    combo: 0,
+    path: publishedJumpHopWork.path,
+    lastJump: null,
+    startedAtMs: 1_779_999_000_000,
+    finishedAtMs: null,
+  };
+
+  window.history.replaceState(null, '', '/works/detail?work=JH-12345678');
+  vi.mocked(jumpHopClient.listGallery).mockResolvedValue({
+    items: [
+      {
+        publicWorkCode: 'JH-12345678',
+        workId: publishedJumpHopWork.summary.workId,
+        profileId: publishedJumpHopWork.summary.profileId,
+        ownerUserId: publishedJumpHopWork.summary.ownerUserId,
+        authorDisplayName: '跳跃作者',
+        themeText: publishedJumpHopWork.summary.themeText,
+        workTitle: publishedJumpHopWork.summary.workTitle,
+        workDescription: publishedJumpHopWork.summary.workDescription,
+        coverImageSrc: null,
+        themeTags: publishedJumpHopWork.summary.themeTags,
+        difficulty: publishedJumpHopWork.summary.difficulty,
+        stylePreset: publishedJumpHopWork.summary.stylePreset,
+        publicationStatus: publishedJumpHopWork.summary.publicationStatus,
+        playCount: publishedJumpHopWork.summary.playCount,
+        updatedAt: publishedJumpHopWork.summary.updatedAt,
+        publishedAt: publishedJumpHopWork.summary.publishedAt,
+        generationStatus: publishedJumpHopWork.summary.generationStatus,
+      },
+    ],
+    hasMore: false,
+    nextCursor: null,
+  });
+  vi.mocked(jumpHopClient.getWorkDetail).mockResolvedValue({
+    item: publishedJumpHopWork,
+  });
+  vi.mocked(jumpHopClient.startRun).mockResolvedValue({
+    run: publishedJumpHopRun,
+  });
+  vi.mocked(jumpHopClient.getLeaderboard).mockResolvedValue({
+    profileId: publishedJumpHopWork.summary.profileId,
+    items: [],
+    viewerBest: null,
+  });
+
+  render(
+    <TestWrapper
+      authValue={createAuthValue({
+        user: null,
+        canAccessProtectedData: false,
+        openLoginModal: () => {},
+        requireAuth,
+      })}
+    />,
+  );
+
+  expect(await screen.findByText('详情')).toBeTruthy();
+  await user.click(screen.getByRole('button', { name: '启动' }));
+
+  await waitFor(() => {
+    expect(jumpHopClient.startRun).toHaveBeenCalledWith(
+      publishedJumpHopWork.summary.profileId,
+      expect.objectContaining({
+        runtimeGuestToken: 'runtime-guest-token',
+        runtimeMode: 'published',
+      }),
+    );
+  });
+  expect(requireAuth).not.toHaveBeenCalled();
+});
+
 test('owned public puzzle detail edits original draft instead of remixing', async () => {
   const user = userEvent.setup();
   const ownedPuzzleWork = {
@@ -7239,8 +7494,8 @@ test('embedded puzzle form maps raw bearer token errors to user-facing auth copy
   expect(createPuzzleAgentSession).toHaveBeenCalledTimes(1);
   expect(createCreativeAgentSession).not.toHaveBeenCalled();
   expect(
-    await screen.findByText('当前登录状态已失效，请重新登录后继续。'),
-  ).toBeTruthy();
+    (await screen.findAllByText('当前登录状态已失效，请重新登录后继续。')).length,
+  ).toBeGreaterThan(0);
   expect(screen.queryByText('缺少 Authorization Bearer Token')).toBeNull();
 });
 
@@ -8350,7 +8605,7 @@ test('public code search opens a published Match3D work by M3 code and starts ru
   await waitFor(() => {
     expect(match3dServerRuntimeAdapterMock.startRun).toHaveBeenCalledWith(
       'match3d-profile-public-1',
-      {},
+      LOGGED_IN_RECOMMEND_RUNTIME_AUTH_OPTIONS,
     );
   });
   expect(
@@ -8422,7 +8677,7 @@ test('published Match3D runtime receives persisted generated models', async () =
   await waitFor(() => {
     expect(match3dServerRuntimeAdapterMock.startRun).toHaveBeenCalledWith(
       'match3d-profile-model-1',
-      {},
+      LOGGED_IN_RECOMMEND_RUNTIME_AUTH_OPTIONS,
     );
   });
   expect(
@@ -10697,8 +10952,9 @@ test('creation hub published work card reveals delete action after card action r
   publishedCard.focus();
   await user.keyboard('{ArrowLeft}');
 
-  expect(screen.getByRole('button', { name: '删除' })).toBeTruthy();
-  await user.click(screen.getByRole('button', { name: '删除' }));
+  const deleteButtons = screen.getAllByRole('button', { name: '删除' });
+  expect(deleteButtons.length).toBeGreaterThan(0);
+  await user.click(deleteButtons[0]!);
 
   const dialog = await screen.findByRole('dialog', { name: '删除作品' });
   expect(dialog.parentElement?.className).toContain('platform-theme--light');