@allbluecn/web-app 0.22.4 → 0.23.1

package/src/components/harness/__tests__/message-actions.test.tsx

@@ -20,6 +20,7 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import type { ComponentType } from 'react'
 import { HotkeysProvider } from '@tanstack/react-hotkeys'
+import { appHotkeys } from '@/lib/hotkeys/registry'
 import type { UIMessage } from '@tanstack/ai-client'
 
 const { mockChat } = vi.hoisted(() => ({
@@ -58,7 +59,7 @@ function renderAssistant(overrides: Partial<typeof mockChat> = {}) {
   mockChat.isLoading = false
   Object.assign(mockChat, overrides)
   return render(
-    <HotkeysProvider>
+    <HotkeysProvider appHotkeys={appHotkeys}>
       <HarnessMessage
         message={makeMessage('a1', 'assistant', '你好，世界')}
         Parts={StubParts}
@@ -82,7 +83,7 @@ describe('MessageActions', () => {
     const onCopy = vi.fn()
 
     render(
-      <HotkeysProvider>
+      <HotkeysProvider appHotkeys={appHotkeys}>
         <MessageActions copied={false} onCopy={onCopy} />
       </HotkeysProvider>,
     )
@@ -97,7 +98,7 @@ describe('MessageActions', () => {
     const onRegenerate = vi.fn()
 
     render(
-      <HotkeysProvider>
+      <HotkeysProvider appHotkeys={appHotkeys}>
         <MessageActions
           copied={false}
           onCopy={vi.fn()}
@@ -114,7 +115,7 @@ describe('MessageActions', () => {
 
   it('未传 onRegenerate 时不渲染重新生成项', async () => {
     render(
-      <HotkeysProvider>
+      <HotkeysProvider appHotkeys={appHotkeys}>
         <MessageActions copied={false} onCopy={vi.fn()} />
       </HotkeysProvider>,
     )
@@ -126,7 +127,7 @@ describe('MessageActions', () => {
 
   it('copied 为真时复制项文案切换为「已复制」', async () => {
     render(
-      <HotkeysProvider>
+      <HotkeysProvider appHotkeys={appHotkeys}>
         <MessageActions copied onCopy={vi.fn()} />
       </HotkeysProvider>,
     )
@@ -186,7 +187,7 @@ describe('HarnessMessage 操作按钮挂载', () => {
     mockChat.messages = [makeMessage('u1', 'user', '提问')]
     mockChat.isLoading = false
     render(
-      <HotkeysProvider>
+      <HotkeysProvider appHotkeys={appHotkeys}>
         <HarnessMessage
           message={makeMessage('u1', 'user', '提问')}
           Parts={StubParts}

package/src/components/harness/__tests__/use-video-generation.test.tsx

@@ -0,0 +1,165 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// useVideoGeneration 封装层单测：官方 useGenerateVideo 以可控 fake 替换，断言
+// 端点接线（fetchServerSentEvents + /api/generate/media）、start 的 MediaPrompt
+// 构造（参考帧 start_frame 分片 / 分片形态源 prompt 拼接 / 缺 prompt 拒绝）、
+// 完成/失败双路径都刷新 generationRuns（失败即降级路径）、stop 同步刷新。
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { cleanup, render, screen, fireEvent } from "@testing-library/react"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import type { MediaPrompt } from "@tanstack/ai"
+import { MEDIA_GENERATE_ENDPOINT, useVideoGeneration } from "../gallery/use-video-generation"
+import type { GalleryItem } from "../gallery/gallery-types"
+
+const { useGenerateVideoMock, fetchServerSentEventsMock } = vi.hoisted(() => ({
+  useGenerateVideoMock: vi.fn(),
+  fetchServerSentEventsMock: vi.fn(() => ({ connect: vi.fn() })),
+}))
+
+vi.mock("@tanstack/ai-react", () => ({
+  useGenerateVideo: useGenerateVideoMock,
+  fetchServerSentEvents: fetchServerSentEventsMock,
+}))
+
+function videoItem(overrides: Partial<GalleryItem> = {}): GalleryItem {
+  return {
+    id: "run-1", kind: "video", threadId: "thread-1", status: "completed",
+    artifacts: null, result: {}, usage: null, startedAt: new Date("2026-10-31T00:00:00Z"),
+    input: { prompt: "源提示词" },
+    ...overrides,
+  }
+}
+
+const onComplete = vi.fn()
+const onFail = vi.fn()
+
+interface CapturedHookOptions {
+  threadId: string
+  onResult: () => void
+  onError: (e: Error) => void
+}
+let capturedOptions: CapturedHookOptions | null = null
+let invalidateSpy: ReturnType<typeof vi.fn>
+let generateMock: ReturnType<typeof vi.fn>
+let stopMock: ReturnType<typeof vi.fn>
+let client: QueryClient
+
+/** start 引用探针：把 hook 返回值暴露给测试 */
+let lastHook: ReturnType<typeof useVideoGeneration> | null = null
+function Probe({ items }: { items: GalleryItem[] }) {
+  lastHook = useVideoGeneration({ threadId: "thread-1", onComplete, onFail })
+  return <button onClick={() => { for (const item of items) lastHook?.start(item) }}>start</button>
+}
+
+function setup(snapshot: { isLoading?: boolean; videoStatus?: { progress?: number; status?: string } | null } = {}) {
+  client = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  invalidateSpy = vi.fn()
+  client.invalidateQueries = invalidateSpy as unknown as QueryClient["invalidateQueries"]
+  generateMock = vi.fn()
+  stopMock = vi.fn()
+  capturedOptions = null
+  lastHook = null
+  useGenerateVideoMock.mockImplementation((options: CapturedHookOptions) => {
+    capturedOptions = options
+    return {
+      generate: generateMock,
+      stop: stopMock,
+      isLoading: snapshot.isLoading ?? false,
+      videoStatus: snapshot.videoStatus ?? null,
+    }
+  })
+  const view = render(<QueryClientProvider client={client}><Probe items={[videoItem()]} /></QueryClientProvider>)
+  return view
+}
+
+beforeEach(() => {
+  onComplete.mockClear()
+  onFail.mockClear()
+})
+
+afterEach(cleanup)
+
+describe("useVideoGeneration", () => {
+  it("wires the official SSE transport to the /api/generate/media endpoint", () => {
+    setup()
+    expect(fetchServerSentEventsMock).toHaveBeenCalledWith(MEDIA_GENERATE_ENDPOINT)
+    expect(MEDIA_GENERATE_ENDPOINT).toBe("/api/generate/media")
+    expect(capturedOptions?.threadId).toBe("thread-1")
+  })
+
+  it("starts generation with the source prompt from the run input", () => {
+    setup()
+    fireEvent.click(screen.getByRole("button", { name: "start" }))
+    expect(generateMock).toHaveBeenCalledWith({ prompt: "源提示词" })
+  })
+
+  it("wraps the reference image as a start_frame media part", () => {
+    setup()
+    const referenceImage = "data:image/png;base64,QQ=="
+    lastHook!.start(videoItem(), referenceImage)
+    const call = generateMock.mock.calls[0]?.[0] as { prompt: MediaPrompt }
+    expect(Array.isArray(call.prompt)).toBe(true)
+    expect(call.prompt).toEqual([
+      { type: "text", content: "源提示词" },
+      { type: "image", source: { type: "url", value: referenceImage }, metadata: { role: "start_frame" } },
+    ])
+  })
+
+  it("accepts MediaPrompt part inputs from streaming runs by joining text parts", () => {
+    setup()
+    const item = videoItem({ input: { prompt: [
+      { type: "text", content: "第一段" },
+      { type: "image", source: { type: "url", value: "data:image/png;base64,QQ==" }, metadata: { role: "start_frame" } },
+      { type: "text", content: "第二段" },
+    ] } })
+    lastHook!.start(item)
+    expect(generateMock).toHaveBeenCalledWith({ prompt: "第一段 第二段" })
+  })
+
+  it("rejects start without a source prompt and without a thread", () => {
+    setup()
+    expect(lastHook!.start(videoItem({ input: {}, result: {} }))).toBe(false)
+    expect(lastHook!.start(videoItem({ threadId: "" }))).toBe(false)
+    expect(generateMock).not.toHaveBeenCalled()
+  })
+
+  it("invalidates generationRuns on result and on error (fallback refresh)", () => {
+    setup()
+    capturedOptions!.onResult()
+    expect(invalidateSpy).toHaveBeenCalledWith({ queryKey: ["generationRuns"] })
+    expect(onComplete).toHaveBeenCalledTimes(1)
+    capturedOptions!.onError(new Error("stream truncated"))
+    expect(invalidateSpy).toHaveBeenCalledTimes(2)
+    expect(onFail).toHaveBeenCalledTimes(1)
+  })
+
+  it("stop also refreshes generationRuns so the interrupted record shows up", () => {
+    setup()
+    lastHook!.stop()
+    expect(stopMock).toHaveBeenCalledTimes(1)
+    expect(invalidateSpy).toHaveBeenCalledWith({ queryKey: ["generationRuns"] })
+  })
+
+  it("exposes isLoading and provider progress from the official client snapshot", () => {
+    setup({ isLoading: true, videoStatus: { progress: 64, status: "processing" } })
+    expect(lastHook!.isActive).toBe(true)
+    expect(lastHook!.progress).toBe(64)
+    expect(lastHook!.status).toBe("processing")
+  })
+})

package/src/components/harness/ai-chat-history/index.tsx

@@ -17,7 +17,7 @@
 
 
 import { useCallback, useMemo, useRef, useState } from "react";
-import { useHotkeys } from "@tanstack/react-hotkeys";
+import { useAppHotkeys, useHotkeys } from "@tanstack/react-hotkeys";
 import { cn } from "@/lib/utils";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
@@ -118,9 +118,11 @@ export default function AIChatHistory({
     setEditValue("");
   }, []);
 
+  // 声明即绑定：chat-prev / chat-next 条目单一来源（lib/hotkeys/registry.ts）
+  const hk = useAppHotkeys();
   useHotkeys([
-    { hotkey: "ArrowUp", callback: (e) => focusItem(e) },
-    { hotkey: "ArrowDown", callback: (e) => focusItem(e) },
+    { hotkey: hk["chat-prev"], callback: (e) => focusItem(e) },
+    { hotkey: hk["chat-next"], callback: (e) => focusItem(e) },
   ]);
 
   function focusItem(e: KeyboardEvent) {

package/src/components/harness/gallery/gallery-card.tsx

@@ -1,5 +1,5 @@
 import { useRef } from "react"
-import { RefreshCw, Copy, Share2, Film } from "lucide-react"
+import { RefreshCw, Copy, Share2, Film, Loader2, Square } from "lucide-react"
 import { formatTimestamp } from "@/lib/datetime"
 import { KIND_ICONS, getKindLabel, getArtifactUrl, getPrompt } from "./gallery-types"
 export type { GalleryItem } from "./gallery-types"
@@ -7,6 +7,7 @@ import type { GalleryItem } from "./gallery-types"
 import { m } from "@/paraglide/messages.js"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
+import { Progress } from "@/components/ui/progress"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { toast } from "@/components/ui/toast"
 import {
@@ -25,13 +26,18 @@ interface GalleryCardProps {
   onVariant?: (id: string) => void
   onVariantWithRef?: (id: string, referenceImage: string) => void
   variantPending?: boolean
+  /** 流式视频生成进行中（该卡片自身任务的进度，缩略图上方叠加进度层） */
+  videoGenerating?: boolean
+  /** 0-100；provider 未上报时为 null，进度条走不确定态 */
+  videoProgress?: number | null
+  onStopVideo?: () => void
   onCopyPrompt?: (prompt: string) => void
   onAttach?: (target: "story" | "kb" | "design") => void
   attachDisabled?: boolean
   onRetranscribe?: (audioBlobRef: string) => void
 }
 
-export function GalleryCard({ item, onOpen, onVariant, onVariantWithRef, variantPending, onCopyPrompt, onAttach, attachDisabled, onRetranscribe }: GalleryCardProps) {
+export function GalleryCard({ item, onOpen, onVariant, onVariantWithRef, variantPending, videoGenerating, videoProgress, onStopVideo, onCopyPrompt, onAttach, attachDisabled, onRetranscribe }: GalleryCardProps) {
   const { kind, status, artifacts, startedAt, id, linkedTarget } = item
   const Icon = KIND_ICONS[kind] ?? KIND_ICONS.image
   const label = getKindLabel(kind)
@@ -39,46 +45,62 @@ export function GalleryCard({ item, onOpen, onVariant, onVariantWithRef, variant
   const prompt = getPrompt(item.result)
   const audioBlobRef = artifacts?.find((entry) => entry.audioBlobRef)?.audioBlobRef
   const refInputRef = useRef<HTMLInputElement>(null)
+  const busy = variantPending === true || videoGenerating === true
 
   return (
     <div className="flex min-w-0 flex-col gap-2 rounded-lg border bg-muted/50 p-2">
-      <Button variant="ghost" className="relative h-auto w-full overflow-hidden p-0" disabled={!url} onClick={onOpen} aria-label={m.gallery_previewItem({ name: artifacts?.[0]?.name || id })}>
-        <span className="flex aspect-square w-full items-center justify-center">
-          {url && kind === "video" ? <video src={url} preload="metadata" muted className="size-full object-cover" /> : url && kind === "image" ? <img src={url} alt={label} className="size-full object-cover" /> : <Icon className="size-8 text-muted-foreground" />}
-        </span>
-      </Button>
+      <div className="relative">
+        <Button variant="ghost" className="relative h-auto w-full overflow-hidden p-0" disabled={!url || busy} onClick={onOpen} aria-label={m.gallery_previewItem({ name: artifacts?.[0]?.name || id })}>
+          <span className="flex aspect-square w-full items-center justify-center">
+            {url && kind === "video" ? <video src={url} preload="metadata" muted className="size-full object-cover" /> : url && kind === "image" ? <img src={url} alt={label} className="size-full object-cover" /> : <Icon className="size-8 text-muted-foreground" />}
+          </span>
+        </Button>
+        {videoGenerating && (
+          <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-lg bg-background/80 p-3" role="status" aria-live="polite">
+            <Loader2 className="size-5 animate-spin text-muted-foreground" aria-hidden="true" />
+            <Progress value={videoProgress ?? null} className="w-full" />
+            <span className="text-xs text-muted-foreground">{videoProgress != null ? m.gallery_videoProgress({ progress: Math.round(videoProgress) }) : m.gallery_videoGenerating()}</span>
+          </div>
+        )}
+      </div>
       <div className="flex items-center justify-between gap-2 text-xs text-muted-foreground"><span>{label}</span>{status === "failed" && <span>{m.gallery_failed()}</span>}</div>
       <p className="text-xs text-muted-foreground">{formatTimestamp(startedAt, "yyyy-MM-dd HH:mm")}</p>
       <div className="flex flex-wrap gap-1">
-        {onVariant && <Button size="sm" variant="outline" disabled={variantPending} onClick={() => onVariant(id)}><RefreshCw />{m.gallery_createVariant()}</Button>}
-        {kind === "video" && onVariantWithRef && (
+        {videoGenerating && onStopVideo ? (
+          <Button size="sm" variant="outline" onClick={onStopVideo}><Square />{m.gallery_videoStop()}</Button>
+        ) : (
           <>
-            <input ref={refInputRef} type="file" accept="image/*" className="hidden" aria-hidden="true" tabIndex={-1} onChange={async (e) => {
-              const file = e.target.files?.[0]
-              if (!file) return
-              if (file.size > MAX_REF_FRAME_SIZE) {
-                toast.error(m.gallery_refFrameTooLarge({ size: "10MB" }))
-                e.target.value = ""
-                return
-              }
-              const reader = new FileReader()
-              reader.onload = () => {
-                const dataURL = typeof reader.result === "string" ? reader.result : ""
-                if (dataURL) onVariantWithRef(id, dataURL)
-              }
-              reader.onerror = () => {
-                // 读取失败必须可见，否则 input value 已重置，用户无从得知未生效
-                toast.error(m.gallery_refFrameReadFailed())
-              }
-              reader.readAsDataURL(file)
-              e.target.value = ""
-            }} />
-            <Tooltip>
-              <TooltipTrigger render={<Button size="sm" variant="outline" disabled={variantPending} onClick={() => refInputRef.current?.click()} aria-label={m.gallery_referenceFrame()} />}>
-                <Film />
-              </TooltipTrigger>
-              <TooltipContent>{m.gallery_referenceFrameTooltip()}</TooltipContent>
-            </Tooltip>
+            {onVariant && <Button size="sm" variant="outline" disabled={busy} onClick={() => onVariant(id)}><RefreshCw />{m.gallery_createVariant()}</Button>}
+            {kind === "video" && onVariantWithRef && (
+              <>
+                <input ref={refInputRef} type="file" accept="image/*" className="hidden" aria-hidden="true" tabIndex={-1} onChange={async (e) => {
+                  const file = e.target.files?.[0]
+                  if (!file) return
+                  if (file.size > MAX_REF_FRAME_SIZE) {
+                    toast.error(m.gallery_refFrameTooLarge({ size: "10MB" }))
+                    e.target.value = ""
+                    return
+                  }
+                  const reader = new FileReader()
+                  reader.onload = () => {
+                    const dataURL = typeof reader.result === "string" ? reader.result : ""
+                    if (dataURL) onVariantWithRef(id, dataURL)
+                  }
+                  reader.onerror = () => {
+                    // 读取失败必须可见，否则 input value 已重置，用户无从得知未生效
+                    toast.error(m.gallery_refFrameReadFailed())
+                  }
+                  reader.readAsDataURL(file)
+                  e.target.value = ""
+                }} />
+                <Tooltip>
+                  <TooltipTrigger render={<Button size="sm" variant="outline" disabled={busy} onClick={() => refInputRef.current?.click()} aria-label={m.gallery_referenceFrame()} />}>
+                    <Film />
+                  </TooltipTrigger>
+                  <TooltipContent>{m.gallery_referenceFrameTooltip()}</TooltipContent>
+                </Tooltip>
+              </>
+            )}
           </>
         )}
         {prompt && onCopyPrompt && <Button size="sm" variant="ghost" onClick={() => onCopyPrompt(prompt)}><Copy />{m.gallery_copyPrompt()}</Button>}

package/src/components/harness/gallery/gallery-grid.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react"
 import { useInfiniteQuery, useMutation, useQueryClient } from "@tanstack/react-query"
 import { GalleryCard } from "./gallery-card"
+import { GalleryVideoCard } from "./gallery-video-card"
 import { getArtifactUrl, getPrompt, type GalleryItem } from "./gallery-types"
 import { LightboxViewer, type LightboxData } from "./lightbox-viewer"
 import { listGenerationRunsFn, createVariantFn } from "@/server/serverFns/harness/gallery"
@@ -56,8 +57,10 @@ export function GalleryGrid({ kind, threadId, className, compact = false }: Gall
   })
   const items: GalleryItem[] = Array.from(new Map((query.data?.pages.flatMap((page) => page.runs) ?? []).map((run) => [run.id, run])).values())
   const variant = useMutation({
-    mutationFn: ({ id, threadId, referenceImage }: { id: string; threadId: string; referenceImage?: string }) =>
-      createVariantFn({ data: { sourceRunId: id, threadId, ...(referenceImage ? { referenceImage } : {}) } }),
+    // 视频再创作已改走流式端点（每卡 GalleryVideoCard），此处仅剩 image/speech：
+    // 服务端 CreateVariantSchema 也已无 referenceImage 字段
+    mutationFn: ({ id, threadId }: { id: string; threadId: string }) =>
+      createVariantFn({ data: { sourceRunId: id, threadId } }),
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ["generationRuns"] }),
   })
   const attach = useMutation({
@@ -74,6 +77,10 @@ export function GalleryGrid({ kind, threadId, className, compact = false }: Gall
     onError: () => toast.error(m.gallery_attachFailed()),
   })
 
+  const copyPrompt = async (prompt: string) => {
+    try { await navigator.clipboard.writeText(prompt); setCopyFailed(false) } catch { setCopyFailed(true) }
+  }
+
   const openAttachDialog = async (item: GalleryItem, attachKind: AttachKind) => {
     setAttachTarget({ id: item.id, kind: attachKind, item })
     setAttachPicked(null)
@@ -134,19 +141,29 @@ export function GalleryGrid({ kind, threadId, className, compact = false }: Gall
       ) : (
         <div className={cn("grid gap-4", columns)}>
           {items.map((item) => (
-            <GalleryCard
-              key={item.id}
-              item={item}
-              onOpen={() => setSelectedId(item.id)}
-              variantPending={variant.isPending}
-              onVariant={["image", "video", "speech"].includes(item.kind) && item.threadId && item.status === "completed" ? (id) => variant.mutate({ id, threadId: item.threadId }) : undefined}
-              onVariantWithRef={item.kind === "video" && item.threadId && item.status === "completed" ? (id, referenceImage) => variant.mutate({ id, threadId: item.threadId, referenceImage }) : undefined}
-              onCopyPrompt={async (prompt) => {
-                try { await navigator.clipboard.writeText(prompt); setCopyFailed(false) } catch { setCopyFailed(true) }
-              }}
-              onAttach={(target) => { void openAttachDialog(item, target) }}
-              attachDisabled={attach.isPending}
-            />
+            item.kind === "video" && item.threadId && item.status === "completed" ? (
+              <GalleryVideoCard
+                key={item.id}
+                item={item}
+                onOpen={() => setSelectedId(item.id)}
+                onCopyPrompt={copyPrompt}
+                onAttach={(target) => { void openAttachDialog(item, target) }}
+                attachDisabled={attach.isPending}
+                onMissingPrompt={() => toast.error(m.gallery_videoMissingPrompt())}
+                onFail={() => toast.error(m.gallery_videoFailed())}
+              />
+            ) : (
+              <GalleryCard
+                key={item.id}
+                item={item}
+                onOpen={() => setSelectedId(item.id)}
+                variantPending={variant.isPending}
+                onVariant={["image", "speech"].includes(item.kind) && item.threadId && item.status === "completed" ? (id) => variant.mutate({ id, threadId: item.threadId }) : undefined}
+                onCopyPrompt={copyPrompt}
+                onAttach={(target) => { void openAttachDialog(item, target) }}
+                attachDisabled={attach.isPending}
+              />
+            )
           ))}
         </div>
       )}

package/src/components/harness/gallery/gallery-types.ts

@@ -33,6 +33,25 @@ export function getPrompt(result: unknown): string | undefined {
   return result && typeof result === "object" && "prompt" in result && typeof result.prompt === "string" ? result.prompt : undefined
 }
 
+/** 流式再创作的源 prompt：优先入参快照 input.prompt（视频运行落库口径），
+ *  回落 result.prompt（图像运行）。与 createVariantFn 旧解析顺序一致。
+ *  MediaPrompt 分片形态（流式生成的运行）取 text 分片拼接。 */
+export function getSourcePrompt(item: GalleryItem): string | undefined {
+  const fromInput = item.input && typeof item.input === "object" && "prompt" in item.input ? normalizeMediaPromptText(item.input.prompt) : undefined
+  return fromInput ?? getPrompt(item.result)
+}
+
+function normalizeMediaPromptText(prompt: unknown): string | undefined {
+  if (typeof prompt === "string") return prompt
+  if (!Array.isArray(prompt)) return undefined
+  const text = prompt
+    .filter((part): part is { type: "text"; content: string } => Boolean(part) && typeof part === "object" && (part as { type?: unknown }).type === "text" && typeof (part as { content?: unknown }).content === "string")
+    .map((part) => part.content)
+    .join(" ")
+    .trim()
+  return text || undefined
+}
+
 export type GalleryItem = GenerationRun
 
 export function getThumbnailAspect(kind: string): string {

package/src/components/harness/gallery/gallery-video-card.tsx

@@ -0,0 +1,54 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 视频卡片的流式再创作包装：每卡一个 useVideoGeneration 实例——hook 的 threadId
+// 取自该记录自身的 threadId（也是 SSE 端点的归属校验键），随卡稳定不漂移。
+// 进度层/停止按钮由 GalleryCard 的 video* props 渲染；缺源 prompt 与失败提示
+// 由父级注入（i18n toast 在列表层统一出口）。
+
+import { GalleryCard, type GalleryItem } from "./gallery-card"
+import { useVideoGeneration } from "./use-video-generation"
+
+interface GalleryVideoCardProps {
+  item: GalleryItem
+  onOpen?: () => void
+  onCopyPrompt?: (prompt: string) => void
+  onAttach?: (target: "story" | "kb" | "design") => void
+  attachDisabled?: boolean
+  /** start() 因缺源 prompt 被拒时回调（列表层 toast） */
+  onMissingPrompt: () => void
+  /** 生成失败/断流回调（hook 已先做一次降级刷新） */
+  onFail: () => void
+}
+
+export function GalleryVideoCard({ item, onOpen, onCopyPrompt, onAttach, attachDisabled, onMissingPrompt, onFail }: GalleryVideoCardProps) {
+  const videoGen = useVideoGeneration({ threadId: item.threadId, onFail })
+  return (
+    <GalleryCard
+      item={item}
+      onOpen={onOpen}
+      onCopyPrompt={onCopyPrompt}
+      onAttach={onAttach}
+      attachDisabled={attachDisabled}
+      videoGenerating={videoGen.isActive}
+      videoProgress={videoGen.progress ?? null}
+      onStopVideo={videoGen.stop}
+      onVariant={() => { if (!videoGen.start(item)) onMissingPrompt() }}
+      onVariantWithRef={(_, referenceImage) => { if (!videoGen.start(item, referenceImage)) onMissingPrompt() }}
+    />
+  )
+}

package/src/components/harness/gallery/types.ts

@@ -46,6 +46,8 @@ export interface GenerationRun {
   model?: string
   artifacts: PersistedArtifactRef[] | null
   result: unknown
+  /** 提交时的入参快照（视频运行含 { prompt, referenceImage? }，流式再创作据此重发源 prompt） */
+  input?: unknown
   usage: unknown
   startedAt: Date
   threadId: string

package/src/components/harness/gallery/use-video-generation.ts

@@ -0,0 +1,95 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 画廊视频再创作的流式进度消费（任务 15）：useGenerateVideo + fetchServerSentEvents
+// 对接 /api/generate/media（server.handlers SSE 路由）。事件面由官方客户端解析：
+// video:job:created → video:status(progress) → generation:result → RUN_FINISHED。
+// 降级路径：失败/断流时回退一次手动刷新 generationRuns（服务端持久化中间件已把
+// 终态落库），用户看到的不是黑屏而是落库的失败/已完成记录。
+// 服务端官方 adapter 全链不动，只换客户端消费面（弃 startVideoFn/pollVideoFn 轮询）。
+
+import { useCallback, useMemo } from "react"
+import { useQueryClient } from "@tanstack/react-query"
+import { fetchServerSentEvents, useGenerateVideo } from "@tanstack/ai-react"
+import type { MediaPrompt } from "@tanstack/ai"
+import type { GalleryItem } from "./gallery-types"
+import { getSourcePrompt } from "./gallery-types"
+
+/** 流式进度端点（server.handlers SSE 路由，与 /api/chat 同模式） */
+export const MEDIA_GENERATE_ENDPOINT = "/api/generate/media"
+
+interface UseVideoGenerationOptions {
+  threadId: string
+  /** 生成完成后回调（已内部刷新 generationRuns，供 UI 层附加行为） */
+  onComplete?: () => void
+  /** 失败/断流回调（已内部执行一次降级刷新，供 UI 层报错提示） */
+  onFail?: () => void
+}
+
+export function useVideoGeneration({ threadId, onComplete, onFail }: UseVideoGenerationOptions) {
+  const queryClient = useQueryClient()
+  const invalidateRuns = useCallback(() => {
+    void queryClient.invalidateQueries({ queryKey: ["generationRuns"] })
+  }, [queryClient])
+
+  const video = useGenerateVideo({
+    connection: fetchServerSentEvents(MEDIA_GENERATE_ENDPOINT),
+    threadId,
+    onResult: () => {
+      invalidateRuns()
+      onComplete?.()
+    },
+    onError: () => {
+      // 降级路径：hook 失败/断流 → 手动刷新一次，落库的终态记录（含失败）可见
+      invalidateRuns()
+      onFail?.()
+    },
+  })
+
+  const start = useCallback((item: GalleryItem, referenceImage?: string) => {
+    const prompt = getSourcePrompt(item)
+    if (!prompt?.trim() || !item.threadId) return false
+    const mediaPrompt: MediaPrompt = referenceImage
+      ? [
+          { type: "text", content: prompt },
+          { type: "image", source: { type: "url", value: referenceImage }, metadata: { role: "start_frame" } },
+        ]
+      : prompt
+    void video.generate({ prompt: mediaPrompt })
+    return true
+  }, [video])
+
+  // stop() 只断本地流：服务端 run 由 request.signal abort 收敛为 interrupted 落库，
+  // 主动刷新一次让中断记录立即可见（与失败降级同一手动刷新口径）
+  const stop = useCallback(() => {
+    video.stop()
+    invalidateRuns()
+  }, [video, invalidateRuns])
+
+  const progress = video.videoStatus?.progress
+  const status = video.videoStatus?.status
+  return useMemo(() => ({
+    /** 是否有生成任务进行中（提交后到终态前） */
+    isActive: video.isLoading,
+    /** 0-100 进度；provider 未上报时为 undefined（UI 走不确定态） */
+    progress,
+    /** provider 侧任务状态：pending | processing | completed | failed */
+    status,
+    start,
+    stop,
+  }), [video.isLoading, progress, status, start, stop])
+}