Integrate role asset studio into custom world agent flow

src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx

@@ -0,0 +1,74 @@
+/* @vitest-environment jsdom */
+
+import { render, screen } from '@testing-library/react';
+import { expect, test } from 'vitest';
+
+import type { CustomWorldWorkSummary } from '../../../packages/shared/src/contracts/customWorldAgent';
+import { CustomWorldCreationHub } from './CustomWorldCreationHub';
+
+const baseDraftItem: CustomWorldWorkSummary = {
+  workId: 'draft:session-1',
+  sourceType: 'agent_session',
+  status: 'draft',
+  title: '潮雾列岛',
+  subtitle: '补齐关键锚点',
+  summary: '玩家是失职返乡的守灯人。',
+  coverImageSrc: null,
+  updatedAt: new Date('2026-04-14T10:00:00.000Z').toISOString(),
+  publishedAt: null,
+  stage: 'object_refining',
+  stageLabel: '精修对象',
+  playableNpcCount: 3,
+  landmarkCount: 4,
+  sessionId: 'session-1',
+  profileId: null,
+  canResume: true,
+  canEnterWorld: false,
+};
+
+test('creation hub reflects updated draft title summary and counts after rerender', () => {
+  const { rerender } = render(
+    <CustomWorldCreationHub
+      items={[baseDraftItem]}
+      loading={false}
+      error={null}
+      onBack={() => {}}
+      onRetry={() => {}}
+      onCreateNew={() => {}}
+      onResumeDraft={() => {}}
+      onEnterPublished={() => {}}
+    />,
+  );
+
+  expect(screen.getByText('潮雾列岛')).toBeTruthy();
+  expect(screen.getByText('玩家是失职返乡的守灯人。')).toBeTruthy();
+  expect(screen.getByText('角色 3')).toBeTruthy();
+  expect(screen.getByText('地点 4')).toBeTruthy();
+
+  rerender(
+    <CustomWorldCreationHub
+      items={[
+        {
+          ...baseDraftItem,
+          title: '潮雾列岛·回潮版',
+          summary: '世界总卡和角色网已经继续长出了新的支线。',
+          playableNpcCount: 5,
+          landmarkCount: 6,
+          updatedAt: new Date('2026-04-14T10:10:00.000Z').toISOString(),
+        },
+      ]}
+      loading={false}
+      error={null}
+      onBack={() => {}}
+      onRetry={() => {}}
+      onCreateNew={() => {}}
+      onResumeDraft={() => {}}
+      onEnterPublished={() => {}}
+    />,
+  );
+
+  expect(screen.getByText('潮雾列岛·回潮版')).toBeTruthy();
+  expect(screen.getByText('世界总卡和角色网已经继续长出了新的支线。')).toBeTruthy();
+  expect(screen.getByText('角色 5')).toBeTruthy();
+  expect(screen.getByText('地点 6')).toBeTruthy();
+});

src/components/custom-world-home/CustomWorldCreationHub.test.tsx

@@ -0,0 +1,44 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { expect, test } from 'vitest';
+
+import { CustomWorldCreationHub } from './CustomWorldCreationHub';
+
+test('creation hub draft card renders compiled work summary fields', () => {
+  const html = renderToStaticMarkup(
+    <CustomWorldCreationHub
+      items={[
+        {
+          workId: 'draft:session-1',
+          sourceType: 'agent_session',
+          status: 'draft',
+          title: '一个被潮雾切开的列岛世界',
+          subtitle: '补齐关键锚点',
+          summary:
+            '玩家是失职返乡的守灯人 · 核心冲突：守灯会与沉船商盟争夺航道解释权',
+          coverImageSrc: null,
+          updatedAt: new Date('2026-04-13T12:00:00.000Z').toISOString(),
+          publishedAt: null,
+          stage: 'clarifying',
+          stageLabel: '补齐关键锚点',
+          playableNpcCount: 0,
+          landmarkCount: 0,
+          sessionId: 'session-1',
+          profileId: null,
+          canResume: true,
+          canEnterWorld: false,
+        },
+      ]}
+      loading={false}
+      error={null}
+      onBack={() => {}}
+      onRetry={() => {}}
+      onCreateNew={() => {}}
+      onResumeDraft={() => {}}
+      onEnterPublished={() => {}}
+    />,
+  );
+
+  expect(html).toContain('一个被潮雾切开的列岛世界');
+  expect(html).toContain('玩家是失职返乡的守灯人');
+  expect(html).toContain('守灯会与沉船商盟争夺航道解释权');
+});

src/components/custom-world-home/CustomWorldCreationHub.tsx

@@ -0,0 +1,154 @@
+import { useMemo, useState } from 'react';
+
+import type { CustomWorldWorkSummary } from '../../../packages/shared/src/contracts/customWorldAgent';
+import { CustomWorldCreationStartCard } from './CustomWorldCreationStartCard';
+import { CustomWorldWorkCard } from './CustomWorldWorkCard';
+import {
+  type CustomWorldWorkFilter,
+  CustomWorldWorkTabs,
+} from './CustomWorldWorkTabs';
+
+type CustomWorldCreationHubProps = {
+  items: CustomWorldWorkSummary[];
+  loading: boolean;
+  error: string | null;
+  onBack: () => void;
+  onRetry: () => void;
+  onCreateNew: () => void;
+  onResumeDraft: (sessionId: string) => void;
+  onEnterPublished: (profileId: string) => void;
+};
+
+function EmptyState({ title }: { title: string }) {
+  return (
+    <div className="flex min-h-[16rem] flex-col items-center justify-center rounded-[1.8rem] border border-white/8 bg-white/5 px-6 py-8 text-center">
+      <div className="text-lg font-semibold text-white">{title}</div>
+    </div>
+  );
+}
+
+export function CustomWorldCreationHub({
+  items,
+  loading,
+  error,
+  onBack,
+  onRetry,
+  onCreateNew,
+  onResumeDraft,
+  onEnterPublished,
+}: CustomWorldCreationHubProps) {
+  const [activeFilter, setActiveFilter] =
+    useState<CustomWorldWorkFilter>('all');
+  const draftCount = items.filter((item) => item.status === 'draft').length;
+  const publishedCount = items.filter(
+    (item) => item.status === 'published',
+  ).length;
+  const filteredItems = useMemo(
+    () =>
+      items.filter((item) =>
+        activeFilter === 'all' ? true : item.status === activeFilter,
+      ),
+    [activeFilter, items],
+  );
+
+  return (
+    <div
+      className="flex h-full min-h-0 flex-col overflow-y-auto overscroll-y-contain pr-1 pb-[max(1rem,env(safe-area-inset-bottom))]"
+      style={{ WebkitOverflowScrolling: 'touch' }}
+    >
+      <div className="sticky top-0 z-20 -mx-3 bg-[linear-gradient(180deg,rgba(10,12,18,0.96),rgba(10,12,18,0.88),rgba(10,12,18,0))] px-3 pb-4 pt-1 sm:static sm:mx-0 sm:bg-none sm:px-0 sm:pb-5 sm:pt-0">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <button
+              type="button"
+              onClick={onBack}
+              className="rounded-full border border-white/10 bg-black/18 px-3 py-1.5 text-[11px] text-zinc-300 transition-colors hover:text-white"
+            >
+              返回
+            </button>
+            <div className="mt-4 text-[1.8rem] font-black leading-tight text-white sm:text-[2.3rem]">
+              创作中心
+            </div>
+          </div>
+          <div className="hidden shrink-0 gap-2 sm:flex">
+            <span className="rounded-full border border-amber-300/20 bg-amber-500/10 px-3 py-1 text-[11px] text-amber-100">
+              草稿 {draftCount}
+            </span>
+            <span className="rounded-full border border-emerald-300/20 bg-emerald-500/10 px-3 py-1 text-[11px] text-emerald-100">
+              已发布 {publishedCount}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <CustomWorldCreationStartCard onCreateNew={onCreateNew} />
+
+        <CustomWorldWorkTabs
+          activeFilter={activeFilter}
+          draftCount={draftCount}
+          publishedCount={publishedCount}
+          onChange={setActiveFilter}
+        />
+
+        {error ? (
+          <div className="rounded-3xl border border-rose-400/18 bg-rose-500/10 px-4 py-4 text-sm leading-7 text-rose-100">
+            <div>{error}</div>
+            <button
+              type="button"
+              onClick={onRetry}
+              className="mt-3 rounded-full border border-white/10 bg-black/20 px-4 py-2 text-sm text-zinc-200 transition hover:text-white"
+            >
+              重试
+            </button>
+          </div>
+        ) : null}
+
+        {loading ? (
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {Array.from({ length: 3 }).map((_, index) => (
+              <div
+                key={`skeleton-${index}`}
+                className="min-h-[12rem] rounded-[1.8rem] border border-white/8 bg-white/5 p-5"
+              >
+                <div className="h-4 w-20 rounded-full bg-white/10" />
+                <div className="mt-6 h-8 w-36 rounded-full bg-white/10" />
+                <div className="mt-4 h-4 w-full rounded-full bg-white/10" />
+                <div className="mt-2 h-4 w-4/5 rounded-full bg-white/10" />
+                <div className="mt-8 flex gap-2">
+                  <div className="h-7 w-20 rounded-full bg-white/10" />
+                  <div className="h-7 w-20 rounded-full bg-white/10" />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : filteredItems.length > 0 ? (
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {filteredItems.map((item) => (
+              <CustomWorldWorkCard
+                key={item.workId}
+                item={item}
+                onClick={() => {
+                  if (item.status === 'draft' && item.sessionId) {
+                    onResumeDraft(item.sessionId);
+                    return;
+                  }
+
+                  if (item.status === 'published' && item.profileId) {
+                    onEnterPublished(item.profileId);
+                  }
+                }}
+              />
+            ))}
+          </div>
+        ) : items.length === 0 ? (
+          <EmptyState title="还没有作品" />
+        ) : (
+          <EmptyState title="当前筛选下没有内容" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export type { CustomWorldWorkFilter };

src/components/custom-world-home/CustomWorldCreationLauncherModal.tsx

@@ -0,0 +1,146 @@
+import { X } from 'lucide-react';
+
+import type { CustomWorldQuestion } from '../../../packages/shared/src/contracts/runtime';
+
+type CustomWorldCreationLauncherModalProps = {
+  isOpen: boolean;
+  mode: 'create' | 'resume';
+  seedText: string;
+  seedTextLocked: boolean;
+  questions: CustomWorldQuestion[];
+  answers: Record<string, string>;
+  isBusy: boolean;
+  error: string | null;
+  lastError?: string | null;
+  primaryLabel: string;
+  onClose: () => void;
+  onSeedTextChange: (value: string) => void;
+  onAnswerChange: (questionId: string, value: string) => void;
+  onPrimaryAction: () => void;
+};
+
+export function CustomWorldCreationLauncherModal({
+  isOpen,
+  mode,
+  seedText,
+  seedTextLocked,
+  questions,
+  answers,
+  isBusy,
+  error,
+  lastError = null,
+  primaryLabel,
+  onClose,
+  onSeedTextChange,
+  onAnswerChange,
+  onPrimaryAction,
+}: CustomWorldCreationLauncherModalProps) {
+  if (!isOpen) {
+    return null;
+  }
+
+  const unansweredQuestions = questions.filter((question) => !question.answer?.trim());
+
+  return (
+    <div className="fixed inset-0 z-[90] flex items-center justify-center bg-black/72 p-4 backdrop-blur-sm">
+      <div className="flex max-h-[92vh] w-full max-w-2xl flex-col overflow-hidden rounded-[2rem] border border-white/10 bg-[#11161f] shadow-[0_30px_90px_rgba(0,0,0,0.6)]">
+        <div className="flex items-center justify-between border-b border-white/10 px-5 py-4">
+          <div>
+            <div className="text-base font-semibold text-white">
+              {mode === 'create' ? '新建作品' : '继续创作'}
+            </div>
+            <div className="mt-1 text-xs text-zinc-400">
+              输入一点灵感，开始共创一个新世界。
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={isBusy}
+            className="rounded-full border border-white/10 bg-white/5 p-2 text-zinc-300 transition hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto px-5 py-5">
+          <div className="space-y-4">
+            <label className="block">
+              <div className="mb-2 text-sm font-medium text-zinc-200">
+                世界灵感
+              </div>
+              <textarea
+                value={seedText}
+                onChange={(event) => onSeedTextChange(event.target.value)}
+                rows={seedTextLocked ? 4 : 6}
+                readOnly={seedTextLocked}
+                placeholder="例：一个被潮雾切碎的列岛世界，灯塔守望者、沉船秘术与旧盟约残片正在重新苏醒。"
+                className={`w-full rounded-3xl border border-white/10 bg-black/30 px-4 py-3 text-sm leading-7 text-white outline-none transition focus:border-sky-400/40 ${
+                  seedTextLocked ? 'cursor-not-allowed opacity-75' : ''
+                }`}
+              />
+            </label>
+
+            {unansweredQuestions.length > 0 ? (
+              <div className="space-y-3">
+                <div className="rounded-3xl border border-white/10 bg-black/20 px-4 py-3 text-sm leading-7 text-zinc-300">
+                  先补齐几条关键锚点，再开始生成。
+                </div>
+                {unansweredQuestions.map((question) => (
+                  <label key={question.id} className="block">
+                    <div className="mb-2 text-sm font-medium text-zinc-200">
+                      {question.label}
+                    </div>
+                    <div className="mb-2 text-xs leading-6 text-zinc-400">
+                      {question.question}
+                    </div>
+                    <textarea
+                      value={answers[question.id] ?? question.answer ?? ''}
+                      onChange={(event) =>
+                        onAnswerChange(question.id, event.target.value)
+                      }
+                      rows={3}
+                      placeholder="补充一句就可以。"
+                      className="w-full rounded-3xl border border-white/10 bg-black/30 px-4 py-3 text-sm leading-7 text-white outline-none transition focus:border-sky-400/40"
+                    />
+                  </label>
+                ))}
+              </div>
+            ) : null}
+
+            {lastError ? (
+              <div className="rounded-3xl border border-amber-400/25 bg-amber-500/10 px-4 py-3 text-sm leading-6 text-amber-100">
+                上次生成未完成：{lastError}
+              </div>
+            ) : null}
+
+            {error ? (
+              <div className="rounded-3xl border border-rose-400/25 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-100">
+                {error}
+              </div>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center justify-end gap-3 border-t border-white/10 px-5 py-4">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={isBusy}
+            className="rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-zinc-300 transition hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            onClick={onPrimaryAction}
+            disabled={isBusy}
+            className="rounded-2xl bg-sky-400 px-4 py-2 text-sm font-semibold text-slate-950 transition hover:bg-sky-300 disabled:cursor-not-allowed disabled:opacity-45"
+          >
+            {isBusy ? '处理中...' : primaryLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/custom-world-home/CustomWorldCreationStartCard.tsx

@@ -0,0 +1,43 @@
+import { getNineSliceStyle, UI_CHROME } from '../../uiAssets';
+
+type CustomWorldCreationStartCardProps = {
+  onCreateNew: () => void;
+};
+
+export function CustomWorldCreationStartCard({
+  onCreateNew,
+}: CustomWorldCreationStartCardProps) {
+  return (
+    <div
+      className="pixel-nine-slice pixel-panel overflow-hidden"
+      style={getNineSliceStyle(UI_CHROME.storyPanel, {
+        paddingX: 18,
+        paddingY: 16,
+      })}
+    >
+      <div className="relative overflow-hidden rounded-[1.75rem] border border-white/8 bg-[radial-gradient(circle_at_top_left,rgba(125,211,252,0.18),transparent_36%),linear-gradient(180deg,rgba(8,10,14,0.28),rgba(8,10,14,0.82))] px-5 py-5">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <div className="text-2xl font-black text-white sm:text-3xl">
+              新建作品
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onCreateNew}
+            className="pixel-nine-slice pixel-pressable w-full text-left sm:w-auto"
+            style={getNineSliceStyle(UI_CHROME.choiceButton, {
+              paddingX: 18,
+              paddingY: 11,
+            })}
+          >
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-sm font-semibold text-white">新建作品</span>
+              <span className="text-white/60">→</span>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/custom-world-home/CustomWorldWorkCard.tsx

@@ -0,0 +1,119 @@
+import type { CustomWorldWorkSummary } from '../../../packages/shared/src/contracts/customWorldAgent';
+import { getNineSliceStyle, UI_CHROME } from '../../uiAssets';
+
+function formatUpdatedAt(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '最近更新';
+  }
+
+  return new Intl.DateTimeFormat('zh-CN', {
+    month: 'numeric',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+}
+
+type CustomWorldWorkCardProps = {
+  item: CustomWorldWorkSummary;
+  onClick: () => void;
+};
+
+export function CustomWorldWorkCard({
+  item,
+  onClick,
+}: CustomWorldWorkCardProps) {
+  const isDraft = item.status === 'draft';
+  const hasFoundationDraft =
+    item.playableNpcCount > 0 || item.landmarkCount > 0;
+  const roleCountLabel = isDraft ? '角色' : '可扮演角色';
+
+  return (
+    <div
+      className="pixel-nine-slice pixel-panel relative overflow-hidden"
+      style={getNineSliceStyle(UI_CHROME.panel, {
+        paddingX: 16,
+        paddingY: 15,
+      })}
+    >
+      {item.coverImageSrc ? (
+        <img
+          src={item.coverImageSrc}
+          alt={item.title}
+          className="absolute inset-0 h-full w-full object-cover opacity-20"
+          style={{ imageRendering: 'pixelated' }}
+        />
+      ) : null}
+      <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(8,10,14,0.12),rgba(8,10,14,0.82))]" />
+      <div className="relative z-10 flex h-full min-h-[12rem] flex-col">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex flex-wrap gap-2">
+            <span
+              className={`rounded-full border px-3 py-1 text-[10px] tracking-[0.18em] ${
+                isDraft
+                  ? 'border-amber-300/20 bg-amber-500/10 text-amber-100'
+                  : 'border-emerald-300/20 bg-emerald-500/10 text-emerald-100'
+              }`}
+            >
+              {isDraft ? '草稿' : '已发布'}
+            </span>
+            {item.stageLabel ? (
+              <span className="rounded-full border border-white/10 bg-black/24 px-3 py-1 text-[10px] text-zinc-200">
+                {item.stageLabel}
+              </span>
+            ) : null}
+          </div>
+          <div className="text-[11px] text-zinc-400">
+            {formatUpdatedAt(item.updatedAt)}
+          </div>
+        </div>
+
+        <div className="mt-4">
+          <div className="text-2xl font-black text-white">
+            {item.title}
+          </div>
+          <div className="mt-1 text-xs tracking-[0.12em] text-zinc-400">
+            {item.subtitle}
+          </div>
+          <div className="mt-3 line-clamp-3 text-sm leading-7 text-zinc-200/90">
+            {item.summary}
+          </div>
+        </div>
+
+        <div className="mt-auto flex items-center justify-between gap-3 pt-4">
+          <div className="flex flex-wrap gap-2">
+            <span className="rounded-full border border-white/10 bg-black/24 px-3 py-1 text-[10px] text-zinc-100">
+              {roleCountLabel} {item.playableNpcCount}
+            </span>
+            <span className="rounded-full border border-white/10 bg-black/24 px-3 py-1 text-[10px] text-zinc-100">
+              地点 {item.landmarkCount}
+            </span>
+            {item.roleVisualReadyCount ? (
+              <span className="rounded-full border border-amber-300/20 bg-amber-500/10 px-3 py-1 text-[10px] text-amber-100">
+                主图 {item.roleVisualReadyCount}
+              </span>
+            ) : null}
+            {item.roleAnimationReadyCount ? (
+              <span className="rounded-full border border-emerald-300/20 bg-emerald-500/10 px-3 py-1 text-[10px] text-emerald-100">
+                动作 {item.roleAnimationReadyCount}
+              </span>
+            ) : null}
+            {item.roleAssetSummaryLabel ? (
+              <span className="rounded-full border border-white/10 bg-black/24 px-3 py-1 text-[10px] text-zinc-200">
+                {item.roleAssetSummaryLabel}
+              </span>
+            ) : null}
+          </div>
+          <button
+            type="button"
+            onClick={onClick}
+            className="rounded-full border border-sky-300/20 bg-sky-500/10 px-4 py-2 text-sm font-medium text-sky-100 transition hover:text-white"
+          >
+            {isDraft ? (hasFoundationDraft ? '继续精修' : '继续创作') : '进入世界'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/custom-world-home/CustomWorldWorkTabs.tsx

@@ -0,0 +1,52 @@
+export type CustomWorldWorkFilter = 'all' | 'draft' | 'published';
+
+const FILTER_OPTIONS: Array<{
+  id: CustomWorldWorkFilter;
+  label: string;
+}> = [
+  { id: 'all', label: '全部' },
+  { id: 'draft', label: '草稿' },
+  { id: 'published', label: '已发布' },
+];
+
+type CustomWorldWorkTabsProps = {
+  activeFilter: CustomWorldWorkFilter;
+  draftCount: number;
+  publishedCount: number;
+  onChange: (filter: CustomWorldWorkFilter) => void;
+};
+
+export function CustomWorldWorkTabs({
+  activeFilter,
+  draftCount,
+  publishedCount,
+  onChange,
+}: CustomWorldWorkTabsProps) {
+  return (
+    <div className="flex items-center gap-2 overflow-x-auto pb-1">
+      {FILTER_OPTIONS.map((option) => {
+        const count =
+          option.id === 'draft'
+            ? draftCount
+            : option.id === 'published'
+              ? publishedCount
+              : draftCount + publishedCount;
+
+        return (
+          <button
+            key={option.id}
+            type="button"
+            onClick={() => onChange(option.id)}
+            className={`shrink-0 rounded-full border px-4 py-2 text-sm transition ${
+              activeFilter === option.id
+                ? 'border-sky-300/20 bg-sky-500/10 text-sky-100'
+                : 'border-white/10 bg-black/18 text-zinc-300 hover:text-white'
+            }`}
+          >
+            {option.label} {count}
+          </button>
+        );
+      })}
+    </div>
+  );
+}