合并主分支

解决简单冲突

apps/admin-web/src/api/adminApiTypes.ts

@@ -332,6 +332,14 @@ export interface AdminEditorAssetListQuery {
   limit?: number | null;
 }
 
+export interface AdminEditorImageSequenceFramePayload {
+  imageSrc: string;
+  objectKey?: string | null;
+  assetObjectId?: string | null;
+  width: number;
+  height: number;
+}
+
 export interface AdminEditorAssetPayload {
   assetId: string;
   ownerUserId: string;
@@ -362,6 +370,8 @@ export interface AdminEditorAssetPayload {
   taskGenerator: string;
   taskCostMudPoints: number;
   children: AdminEditorAssetPayload[];
+  imageSequenceFrames?: AdminEditorImageSequenceFramePayload[] | null;
+  imageSequenceDurationMs?: number | null;
 }
 
 export interface AdminEditorAssetListResponse {
@@ -413,6 +423,8 @@ export interface AdminEditorShowcaseAssetPayload {
   rejectedAt?: string | null;
   updatedAt: string;
   showcaseCategory?: string | null;
+  imageSequenceFrames?: AdminEditorImageSequenceFramePayload[] | null;
+  imageSequenceDurationMs?: number | null;
 }
 
 export interface AdminEditorShowcaseListResponse {

apps/admin-web/src/components/AdminEditorAssetMedia.test.tsx

@@ -0,0 +1,354 @@
+/* @vitest-environment jsdom */
+
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { afterEach, expect, test, vi } from 'vitest';
+
+import { getAdminAssetReadUrl } from '../api/adminApiClient';
+import { AdminEditorAssetPreviewDialog } from './AdminEditorAssetMedia';
+
+vi.mock('../api/adminApiClient', () => ({
+  getAdminAssetReadUrl: vi.fn(),
+  isAdminApiError: vi.fn(
+    (error: unknown) =>
+      typeof error === 'object' &&
+      error !== null &&
+      'status' in error &&
+      typeof error.status === 'number',
+  ),
+}));
+
+afterEach(() => {
+  vi.clearAllMocks();
+  vi.useRealTimers();
+});
+
+function createDeferred<T>() {
+  let resolve!: (value: T | PromiseLike<T>) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise;
+    reject = rejectPromise;
+  });
+  return { promise, resolve, reject };
+}
+
+test('角色动作预览跨窗口回播时复用父级换签缓存并等待目标帧就绪', async () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date('2026-07-04T10:50:00Z'));
+  const frameObjectKeys = [
+    'generated-animations/editor/task-cache/frame00.png',
+    'generated-animations/editor/task-cache/frame01.png',
+    'generated-animations/editor/task-cache/frame02.png',
+    'generated-animations/editor/task-cache/frame03.png',
+    'generated-animations/editor/task-cache/frame04.png',
+  ] as const;
+  const delayedFrame = createDeferred<{
+    read: {
+      objectKey: string;
+      signedUrl: string;
+      expiresAt: string;
+    };
+  }>();
+  vi.mocked(getAdminAssetReadUrl).mockImplementation((_token, request) => {
+    const objectKey = request.objectKey ?? '';
+    if (objectKey === frameObjectKeys[3]) {
+      return delayedFrame.promise;
+    }
+    return Promise.resolve({
+      read: {
+        objectKey,
+        signedUrl: `https://signed.example.com/${objectKey}`,
+        expiresAt: '2026-07-04T11:00:00Z',
+      },
+    });
+  });
+
+  render(
+    <AdminEditorAssetPreviewDialog
+      entry={{
+        assetId: 'asset-character-animation-cache',
+        label: '缓存回播动作',
+        imageSrc: `/${frameObjectKeys[0]}`,
+        objectKey: frameObjectKeys[0],
+        assetKind: 'character-animation',
+        imageSequenceFrames: frameObjectKeys.map((objectKey) => ({
+          imageSrc: `/${objectKey}`,
+          objectKey,
+          width: 192,
+          height: 256,
+        })),
+        imageSequenceDurationMs: 500,
+      }}
+      token="admin-token"
+      onClose={vi.fn()}
+    />,
+  );
+
+  const dialog = screen.getByRole('dialog', { name: '素材预览' });
+  fireEvent.click(within(dialog).getByRole('button', { name: '暂停角色动作' }));
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(120);
+  });
+  const initialFrames = Array.from(
+    dialog.querySelectorAll<HTMLImageElement>(
+      '.admin-asset-query-sequence-frame',
+    ),
+  );
+  expect(initialFrames).toHaveLength(3);
+  initialFrames.forEach((frame) => fireEvent.load(frame));
+
+  fireEvent.click(within(dialog).getByRole('button', { name: '播放角色动作' }));
+  for (const elapsedMs of [100, 40, 60, 40, 60]) {
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(elapsedMs);
+    });
+  }
+  expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', {
+    objectKey: frameObjectKeys[3],
+    expireSeconds: 300,
+  });
+  expect(resolveVisibleFrameSrc(dialog)).toBe(
+    `https://signed.example.com/${frameObjectKeys[2]}`,
+  );
+
+  await act(async () => {
+    delayedFrame.resolve({
+      read: {
+        objectKey: frameObjectKeys[3],
+        signedUrl: `https://signed.example.com/${frameObjectKeys[3]}`,
+        expiresAt: '2026-07-04T11:00:00Z',
+      },
+    });
+    await Promise.resolve();
+  });
+  const fourthFrame = resolveFrameByObjectKey(dialog, frameObjectKeys[3]);
+  expect(fourthFrame?.style.opacity).toBe('0');
+  expect(resolveVisibleFrameSrc(dialog)).toBe(
+    `https://signed.example.com/${frameObjectKeys[2]}`,
+  );
+  fireEvent.load(fourthFrame!);
+  fireEvent.load(resolveFrameByObjectKey(dialog, frameObjectKeys[4])!);
+
+  for (let index = 0; index < 3; index += 1) {
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(100);
+    });
+  }
+  expect(within(dialog).getByText('1/5')).toBeTruthy();
+  expect(resolveVisibleFrameSrc(dialog)).toBe(
+    `https://signed.example.com/${frameObjectKeys[0]}`,
+  );
+  expect(
+    vi
+      .mocked(getAdminAssetReadUrl)
+      .mock.calls.filter(
+        ([, request]) => request.objectKey === frameObjectKeys[0],
+      ),
+  ).toHaveLength(1);
+  expect(
+    dialog.querySelectorAll('.admin-asset-query-sequence-frame').length,
+  ).toBeLessThanOrEqual(3);
+});
+
+test('角色动作预览打开超过五分钟后回绕播放会在过期窗口内自动换签', async () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date('2099-01-01T00:00:00Z'));
+  const frameObjectKeys = Array.from(
+    { length: 5 },
+    (_, index) => `generated-animations/editor/task-expiry/frame0${index}.png`,
+  );
+  const requestCounts = new Map<string, number>();
+  vi.mocked(getAdminAssetReadUrl).mockImplementation((_token, request) => {
+    const objectKey = request.objectKey ?? '';
+    const requestCount = (requestCounts.get(objectKey) ?? 0) + 1;
+    requestCounts.set(objectKey, requestCount);
+    return Promise.resolve({
+      read: {
+        objectKey,
+        signedUrl: `https://signed.example.com/v${requestCount}/${objectKey}`,
+        expiresAt:
+          requestCount === 1 ? '2099-01-01T00:05:00Z' : '2099-01-01T00:10:00Z',
+      },
+    });
+  });
+
+  render(
+    <AdminEditorAssetPreviewDialog
+      entry={{
+        assetId: 'asset-character-animation-expiry',
+        label: '过期换签动作',
+        imageSrc: `/${frameObjectKeys[0]}`,
+        objectKey: frameObjectKeys[0],
+        assetKind: 'character-animation',
+        imageSequenceFrames: frameObjectKeys.map((objectKey) => ({
+          imageSrc: `/${objectKey}`,
+          objectKey,
+          width: 192,
+          height: 256,
+        })),
+        imageSequenceDurationMs: 5_000,
+      }}
+      token="admin-token"
+      onClose={vi.fn()}
+    />,
+  );
+
+  const dialog = screen.getByRole('dialog', { name: '素材预览' });
+  fireEvent.click(within(dialog).getByRole('button', { name: '暂停角色动作' }));
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(120);
+  });
+  loadMountedFrames(dialog);
+
+  for (let index = 0; index < frameObjectKeys.length; index += 1) {
+    fireEvent.click(
+      within(dialog).getByRole('button', { name: '播放角色动作' }),
+    );
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1_000);
+    });
+    fireEvent.click(
+      within(dialog).getByRole('button', { name: '暂停角色动作' }),
+    );
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(120);
+    });
+    loadMountedFrames(dialog);
+  }
+  expect(within(dialog).getByText('1/5')).toBeTruthy();
+  frameObjectKeys.forEach((objectKey) => {
+    expect(requestCounts.get(objectKey)).toBe(1);
+  });
+
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(300_001);
+  });
+  loadMountedFrames(dialog);
+  expect(resolveVisibleFrameSrc(dialog)).toContain('/v2/');
+
+  for (let index = 0; index < frameObjectKeys.length; index += 1) {
+    fireEvent.click(
+      within(dialog).getByRole('button', { name: '播放角色动作' }),
+    );
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1_000);
+    });
+    fireEvent.click(
+      within(dialog).getByRole('button', { name: '暂停角色动作' }),
+    );
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(120);
+    });
+    loadMountedFrames(dialog);
+  }
+
+  expect(within(dialog).getByText('1/5')).toBeTruthy();
+  expect(resolveVisibleFrameSrc(dialog)).toBe(
+    `https://signed.example.com/v2/${frameObjectKeys[0]}`,
+  );
+  frameObjectKeys.forEach((objectKey) => {
+    expect(requestCounts.get(objectKey)).toBe(2);
+  });
+  expect(within(dialog).queryByText(/帧加载失败/u)).toBeNull();
+});
+
+test('角色动作预览提前换签失败时保留已就绪帧并有限重试', async () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date('2099-01-01T00:00:00Z'));
+  const frameObjectKeys = [
+    'generated-animations/editor/task-refresh-failure/frame00.png',
+    'generated-animations/editor/task-refresh-failure/frame01.png',
+  ] as const;
+  const requestCounts = new Map<string, number>();
+  vi.mocked(getAdminAssetReadUrl).mockImplementation((_token, request) => {
+    const objectKey = request.objectKey ?? '';
+    const requestCount = (requestCounts.get(objectKey) ?? 0) + 1;
+    requestCounts.set(objectKey, requestCount);
+    if (objectKey === frameObjectKeys[0] && requestCount > 1) {
+      return Promise.reject(new Error('refresh unavailable'));
+    }
+    return Promise.resolve({
+      read: {
+        objectKey,
+        signedUrl: `https://signed.example.com/v${requestCount}/${objectKey}`,
+        expiresAt:
+          requestCount === 1 ? '2099-01-01T00:05:00Z' : '2099-01-01T00:10:00Z',
+      },
+    });
+  });
+
+  render(
+    <AdminEditorAssetPreviewDialog
+      entry={{
+        assetId: 'asset-character-animation-refresh-failure',
+        label: '换签失败动作',
+        imageSrc: `/${frameObjectKeys[0]}`,
+        objectKey: frameObjectKeys[0],
+        assetKind: 'character-animation',
+        imageSequenceFrames: frameObjectKeys.map((objectKey) => ({
+          imageSrc: `/${objectKey}`,
+          objectKey,
+          width: 192,
+          height: 256,
+        })),
+        imageSequenceDurationMs: 2_000,
+      }}
+      token="admin-token"
+      onClose={vi.fn()}
+    />,
+  );
+
+  const dialog = screen.getByRole('dialog', { name: '素材预览' });
+  fireEvent.click(within(dialog).getByRole('button', { name: '暂停角色动作' }));
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(120);
+  });
+  loadMountedFrames(dialog);
+  const readyFrameSrc = resolveVisibleFrameSrc(dialog);
+  expect(readyFrameSrc).toBe(
+    `https://signed.example.com/v1/${frameObjectKeys[0]}`,
+  );
+
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(270_100);
+  });
+  expect(resolveVisibleFrameSrc(dialog)).toBe(readyFrameSrc);
+  expect(within(dialog).queryByText(/帧加载失败/u)).toBeNull();
+
+  for (const retryWindowMs of [450, 1_250, 3_050]) {
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(retryWindowMs);
+    });
+    expect(resolveVisibleFrameSrc(dialog)).toBe(readyFrameSrc);
+  }
+  expect(requestCounts.get(frameObjectKeys[0])).toBe(5);
+  expect(within(dialog).queryByText(/帧加载失败/u)).toBeNull();
+
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(20_000);
+  });
+  expect(requestCounts.get(frameObjectKeys[0])).toBe(5);
+  expect(resolveVisibleFrameSrc(dialog)).toBe(readyFrameSrc);
+});
+
+function loadMountedFrames(dialog: HTMLElement) {
+  dialog
+    .querySelectorAll<HTMLImageElement>('.admin-asset-query-sequence-frame')
+    .forEach((frame) => fireEvent.load(frame));
+}
+
+function resolveFrameByObjectKey(dialog: HTMLElement, objectKey: string) {
+  return Array.from(
+    dialog.querySelectorAll<HTMLImageElement>(
+      '.admin-asset-query-sequence-frame',
+    ),
+  ).find((frame) => frame.src.endsWith(objectKey));
+}
+
+function resolveVisibleFrameSrc(dialog: HTMLElement) {
+  return Array.from(
+    dialog.querySelectorAll<HTMLImageElement>(
+      '.admin-asset-query-sequence-frame',
+    ),
+  ).find((frame) => frame.style.opacity === '1')?.src;
+}

apps/admin-web/src/pages/AdminEditorAssetQueryPage.test.tsx

@@ -1068,7 +1068,7 @@ test('后台素材查询点击图片缩略图可打开放大预览', async () =>
   });
 });
 
-test('后台素材查询将角色动画首帧 PNG 作为图片预览', async () => {
+test('后台素材查询在现有预览弹窗播放完整角色动作序列', async () => {
   const user = userEvent.setup();
   vi.mocked(listAdminEditorAssets).mockResolvedValueOnce({
     entries: [
@@ -1081,17 +1081,65 @@ test('后台素材查询将角色动画首帧 PNG 作为图片预览', async ()
         assetKind: 'character-animation',
         thumbnailSrc:
           '/generated-animations/editor/source-1/task-1/frame00.png',
+        imageSequenceFrames: [
+          {
+            imageSrc:
+              '/generated-animations/editor/source-1/task-1/frame00.png',
+            objectKey:
+              'generated-animations/editor/source-1/task-1/frame00.png',
+            width: 192,
+            height: 256,
+          },
+          {
+            imageSrc:
+              '/generated-animations/editor/source-1/task-1/frame01.png',
+            objectKey:
+              'generated-animations/editor/source-1/task-1/frame01.png',
+            width: 192,
+            height: 256,
+          },
+          {
+            imageSrc:
+              '/generated-animations/editor/source-1/task-1/frame02.png',
+            objectKey:
+              'generated-animations/editor/source-1/task-1/frame02.png',
+            width: 192,
+            height: 256,
+          },
+          {
+            imageSrc:
+              '/generated-animations/editor/source-1/task-1/frame03.png',
+            objectKey:
+              'generated-animations/editor/source-1/task-1/frame03.png',
+            width: 192,
+            height: 256,
+          },
+          {
+            imageSrc:
+              '/generated-animations/editor/source-1/task-1/frame04.png',
+            objectKey:
+              'generated-animations/editor/source-1/task-1/frame04.png',
+            width: 192,
+            height: 256,
+          },
+        ],
+        imageSequenceDurationMs: 250,
       },
     ],
     nextCursor: null,
   });
-  vi.mocked(getAdminAssetReadUrl).mockResolvedValue({
-    read: {
-      objectKey: 'generated-animations/editor/source-1/task-1/frame00.png',
-      signedUrl: 'https://signed.example.com/character-animation-frame00.png',
-      expiresAt: '2026-07-04T11:00:00Z',
+  vi.mocked(getAdminAssetReadUrl).mockImplementation(
+    async (_token, request) => {
+      const objectKey = request.objectKey ?? undefined;
+      return {
+        read: {
+          objectKey,
+          signedUrl: `https://signed.example.com/${objectKey ?? ''}`,
+          expiresAt: '2099-01-01T00:05:00Z',
+        },
+      };
     },
-  });
+  );
 
   render(
     <AdminEditorAssetQueryPage token="admin-token" onUnauthorized={vi.fn()} />,
@@ -1102,15 +1150,56 @@ test('后台素材查询将角色动画首帧 PNG 作为图片预览', async ()
   );
 
   const dialog = await screen.findByRole('dialog', { name: '素材预览' });
-  const image = await within(dialog).findByRole('img', {
-    name: '图片预览：角色动作首帧',
-  });
+  await user.click(
+    await within(dialog).findByRole('button', {
+      name: '暂停角色动作',
+    }),
+  );
   await waitFor(() => {
-    expect(image.getAttribute('src')).toBe(
-      'https://signed.example.com/character-animation-frame00.png',
+    expect(
+      dialog.querySelectorAll('.admin-asset-query-sequence-frame'),
+    ).toHaveLength(3);
+  });
+  expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', {
+    objectKey: 'generated-animations/editor/source-1/task-1/frame00.png',
+    expireSeconds: 300,
+  });
+  expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', {
+    objectKey: 'generated-animations/editor/source-1/task-1/frame01.png',
+    expireSeconds: 300,
+  });
+  expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', {
+    objectKey: 'generated-animations/editor/source-1/task-1/frame02.png',
+    expireSeconds: 300,
+  });
+  expect(getAdminAssetReadUrl).not.toHaveBeenCalledWith('admin-token', {
+    objectKey: 'generated-animations/editor/source-1/task-1/frame03.png',
+    expireSeconds: 300,
+  });
+
+  const failedFrame = dialog.querySelector(
+    '.admin-asset-query-sequence-frame',
+  ) as HTMLImageElement;
+  fireEvent.error(failedFrame);
+  expect(await within(dialog).findByText('1 帧加载失败')).toBeTruthy();
+  await waitFor(() => {
+    expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', {
+      objectKey: 'generated-animations/editor/source-1/task-1/frame03.png',
+      expireSeconds: 300,
+    });
+  });
+  const callsBeforeRetry = vi.mocked(getAdminAssetReadUrl).mock.calls.length;
+  await user.click(
+    within(dialog).getByRole('button', { name: '重试失败帧' }),
+  );
+  await waitFor(() => {
+    expect(vi.mocked(getAdminAssetReadUrl).mock.calls.length).toBeGreaterThan(
+      callsBeforeRetry,
     );
   });
-  expect(within(dialog).queryByLabelText('视频预览：角色动作首帧')).toBeNull();
+  expect(
+    within(dialog).getByRole('button', { name: '暂停角色动作' }),
+  ).toBeTruthy();
 });
 
 test('后台素材查询音频素材使用统一封面缩略图', async () => {

apps/admin-web/src/pages/AdminEditorShowcaseReviewPage.test.tsx

@@ -318,6 +318,101 @@ test('后台精选审核缩略图进入视口后换签并可打开图片预览',
   expect(screen.queryByRole('dialog', { name: '精选素材详情' })).toBeNull();
 });
 
+test('后台精选审核在共用预览弹窗播放完整角色动作', async () => {
+  vi.mocked(listAdminEditorShowcaseAssets).mockResolvedValueOnce({
+    entries: [
+      {
+        ...pendingShowcaseAsset,
+        label: '待机动作',
+        assetKind: 'character-animation',
+        imageSrc: '/generated/action/frame-01.png',
+        objectKey: 'generated/action/frame-01.png',
+        imageSequenceFrames: [
+          {
+            imageSrc: '/generated/action/frame-01.png',
+            objectKey: 'generated/action/frame-01.png',
+            width: 192,
+            height: 256,
+          },
+          {
+            imageSrc: '/generated/action/frame-02.png',
+            objectKey: 'generated/action/frame-02.png',
+            width: 192,
+            height: 256,
+          },
+        ],
+        imageSequenceDurationMs: 250,
+      },
+    ],
+    nextCursor: null,
+  });
+  vi.mocked(getAdminAssetReadUrl).mockImplementation(
+    async (_token, request) => {
+      const objectKey = request.objectKey ?? undefined;
+      return {
+        read: {
+          objectKey,
+          signedUrl: `https://signed.example.com/${objectKey ?? ''}`,
+          expiresAt: '2099-01-01T00:05:00Z',
+        },
+      };
+    },
+  );
+
+  render(
+    <AdminEditorShowcaseReviewPage
+      token="admin-token"
+      onUnauthorized={vi.fn()}
+    />,
+  );
+  fireEvent.click(await screen.findByTitle('预览素材'));
+
+  const dialog = await screen.findByRole('dialog', { name: '素材预览' });
+  expect(
+    await within(dialog).findByRole('button', { name: '暂停角色动作' }),
+  ).toBeTruthy();
+  await waitFor(() => {
+    expect(
+      dialog.querySelectorAll('.admin-asset-query-sequence-frame'),
+    ).toHaveLength(2);
+  });
+  expect(getAdminAssetReadUrl).toHaveBeenCalledWith('admin-token', {
+    objectKey: 'generated/action/frame-02.png',
+    expireSeconds: 300,
+  });
+});
+
+test('后台精选审核对损坏角色动作显示错误而不回退首帧', async () => {
+  vi.mocked(listAdminEditorShowcaseAssets).mockResolvedValueOnce({
+    entries: [
+      {
+        ...pendingShowcaseAsset,
+        label: '损坏动作',
+        assetKind: 'character-animation',
+        imageSequenceFrames: null,
+        imageSequenceDurationMs: null,
+      },
+    ],
+    nextCursor: null,
+  });
+
+  render(
+    <AdminEditorShowcaseReviewPage
+      token="admin-token"
+      onUnauthorized={vi.fn()}
+    />,
+  );
+  fireEvent.click(await screen.findByTitle('预览素材'));
+
+  const dialog = await screen.findByRole('dialog', { name: '素材预览' });
+  expect(
+    within(dialog).getByLabelText('角色动作序列损坏：损坏动作'),
+  ).toBeTruthy();
+  expect(
+    within(dialog).queryByRole('img', { name: '图片预览：损坏动作' }),
+  ).toBeNull();
+});
+
 test('后台精选审核将无 objectKey 的绝对 OSS 图片地址换签后预览', async () => {
   vi.mocked(listAdminEditorShowcaseAssets).mockResolvedValueOnce({
     entries: [

apps/admin-web/src/styles/admin.css

@@ -1703,6 +1703,58 @@ button:disabled {
   object-fit: contain;
 }
 
+.admin-asset-query-sequence-preview {
+  position: relative;
+  width: min(100%, 720px);
+  min-height: min(64dvh, 560px);
+  overflow: hidden;
+}
+
+.admin-asset-query-sequence-frame {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+}
+
+.admin-asset-query-sequence-controls {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  z-index: 2;
+  display: flex;
+  max-width: calc(100% - 24px);
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  border-radius: 999px;
+  background: rgba(43, 31, 22, 0.82);
+  color: #fff;
+  padding: 6px 10px;
+  font-size: 12px;
+}
+
+.admin-asset-query-sequence-controls button {
+  display: grid;
+  min-width: 44px;
+  min-height: 44px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  place-items: center;
+}
+
+.admin-asset-query-sequence-error {
+  display: grid;
+  color: #9d3127;
+  place-items: center;
+}
+
 .admin-asset-query-preview-audio {
   display: grid;
   justify-items: center;