@allbluecn/web-app 0.12.0 → 0.12.2

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

@@ -0,0 +1,51 @@
+// 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/>.
+
+/**
+ * 媒体生成记录类型
+ */
+export interface PersistedArtifactRef {
+  artifactId: string
+  runId: string
+  threadId: string
+  name: string
+  mimeType: string
+  size: number
+  createdAt: string
+  url?: string
+  sourceUrl?: string
+}
+
+export interface LinkedTarget {
+  kind: "story" | "kb" | "prd"
+  targetId: string
+  at: string
+}
+
+export interface GenerationRun {
+  id: string
+  kind: string
+  status: string
+  provider?: string
+  model?: string
+  artifacts: PersistedArtifactRef[] | null
+  result: unknown
+  usage: unknown
+  startedAt: Date
+  threadId: string
+  linkedTarget?: LinkedTarget | null
+}

package/src/components/{devtools/index.ts → harness/harness-chat-contexts.ts}

@@ -15,6 +15,8 @@
 // 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/>.
 
-export { AIChatPanel } from './ai-chat-panel'
-export { DevtoolsPanel } from './devtools-panel'
-export { SessionPanel } from './session-panel'
+"use client";
+
+import { createChatHookContexts } from "@tanstack/ai-react/ui";
+
+export const harnessChatContexts = createChatHookContexts();

package/src/components/harness/harness-chat-slots.ts

@@ -0,0 +1,256 @@
+// 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/>.
+
+"use client";
+
+import { useSyncExternalStore } from "react";
+import type { Citation } from "./ai-citations";
+
+/**
+ * Harness chat 的模块级插槽（P1 Harness 任务 5b）。
+ *
+ * 背景：`createChatHook` 的 `ChatInstanceOverrides` 只暴露
+ * `threadId / live / forwardedProps / body / initialMessages` 五个字段，
+ * 不含 `byokProvider` / `onCustomEvent`（两者属于 `ChatClientOptions`，
+ * `UseChatOptions` 经 `DistributedOmit` 继承）。直接扩展 overrides 需
+ * `as any`，违反本任务约束。改用 module-level 插槽，页面 mount 时
+ * `registerHarnessChatSlots` 注册，卸载时清空，与项目已有的
+ * `chat-handoff.ts` 跨实例状态共享模式一致。
+ *
+ * 单实例假设：同一时刻只有一个 harness chat 页面实例。`byokProvider`
+ * 闭包捕获 `adapterKind`，页面在 adapterKind 变化时重新注册覆盖旧引用；
+ * wrapper（`harnessByokProvider` / `harnessOnCustomEvent`）是稳定引用，
+ * 调用时总是读到最新 slot。插槽内容与 threadId 无关，切换线程无需
+ * 重新注册。SSR 阶段没有 effect 运行，插槽保持空值，wrapper 直接返回
+ * undefined / no-op。
+ */
+type HarnessChatSlots = {
+  /** 返回当前 chat 的 adapterKind，供 byok 附加 x-byok-<kind> header */
+  byokProvider?: () => string | undefined
+  /** 服务端 SSE 自定义事件回调（citations 链路） */
+  onCustomEvent?: (
+    eventType: string,
+    data: unknown,
+    context: { toolCallId?: string },
+  ) => void
+}
+
+const slots: HarnessChatSlots = {}
+
+export function registerHarnessChatSlots(next: HarnessChatSlots): void {
+  slots.byokProvider = next.byokProvider
+  slots.onCustomEvent = next.onCustomEvent
+}
+
+export function clearHarnessChatSlots(): void {
+  slots.byokProvider = undefined
+  slots.onCustomEvent = undefined
+}
+
+/** 供 chatOptions.byokProvider 调用的稳定 wrapper（避免闭包捕获旧引用） */
+export function harnessByokProvider(): string | undefined {
+  return slots.byokProvider?.()
+}
+
+/** 供 chatOptions.onCustomEvent 调用的稳定 wrapper */
+export function harnessOnCustomEvent(
+  eventType: string,
+  data: unknown,
+  context: { toolCallId?: string },
+): void {
+  // 沙箱事件在本层直接承接（两个 harness 页面共用 HarnessLayout 渲染），
+  // 无需各页面重复注册分支。事件名取自 @tanstack/ai 的 CUSTOM_EVENT 常量。
+  if (eventType === "file.changed") {
+    recordSandboxFileChange(data)
+  } else if (eventType === "sandbox.created") {
+    setSandboxRunState("created")
+  } else if (eventType === "sandbox.resumed") {
+    setSandboxRunState("resumed")
+  }
+  slots.onCustomEvent?.(eventType, data, context)
+}
+
+/** 沙箱文件变更事件（对应 CUSTOM_EVENT.FILE_CHANGED 的 FileChangedPayload）。 */
+export interface SandboxFileChange {
+  key: number
+  type: "create" | "change" | "delete"
+  path: string
+  diff: string
+  timestamp: number
+}
+
+export type SandboxRunState = "created" | "resumed" | undefined
+
+const MAX_SANDBOX_FILE_CHANGES = 50
+
+const sandboxStore = {
+  changes: [] as SandboxFileChange[],
+  runState: undefined as SandboxRunState,
+  version: 0,
+  seq: 0,
+}
+
+const sandboxListeners = new Set<() => void>()
+
+function notifySandbox(): void {
+  sandboxStore.version += 1
+  sandboxListeners.forEach((l) => l())
+}
+
+function subscribeSandbox(listener: () => void): () => void {
+  sandboxListeners.add(listener)
+  return () => sandboxListeners.delete(listener)
+}
+
+function getSandboxVersion(): number {
+  return sandboxStore.version
+}
+
+function parseChangeType(value: unknown): SandboxFileChange["type"] {
+  if (value === "create" || value === "change" || value === "delete") return value
+  return "change"
+}
+
+function recordSandboxFileChange(data: unknown): void {
+  const payload = data as {
+    type?: unknown
+    path?: unknown
+    diff?: unknown
+    timestamp?: unknown
+  } | null
+  if (!payload || typeof payload.path !== "string" || payload.path.length === 0) return
+
+  sandboxStore.seq += 1
+  sandboxStore.changes = [
+    ...sandboxStore.changes,
+    {
+      key: sandboxStore.seq,
+      type: parseChangeType(payload.type),
+      path: payload.path,
+      diff: typeof payload.diff === "string" ? payload.diff : "",
+      timestamp: typeof payload.timestamp === "number" ? payload.timestamp : 0,
+    },
+  ].slice(-MAX_SANDBOX_FILE_CHANGES)
+  notifySandbox()
+}
+
+function setSandboxRunState(state: Exclude<SandboxRunState, undefined>): void {
+  if (sandboxStore.runState === state) return
+  sandboxStore.runState = state
+  notifySandbox()
+}
+
+export function clearHarnessSandboxEvents(): void {
+  sandboxStore.changes = []
+  sandboxStore.runState = undefined
+  notifySandbox()
+}
+
+/** 读当前线程的沙箱事件；无事件时 changes 为空数组、runState 为 undefined。 */
+export function useHarnessSandboxEvents(): {
+  changes: SandboxFileChange[]
+  runState: SandboxRunState
+} {
+  const version = useSyncExternalStore(
+    subscribeSandbox,
+    getSandboxVersion,
+    getSandboxVersion,
+  )
+  void version
+  return {
+    changes: sandboxStore.changes,
+    runState: sandboxStore.runState,
+  }
+}
+
+/**
+ * Citations 状态（module singleton）。
+ *
+ * 服务端 `onCustomEvent('citations', data)` 触发时先写 `latestCitations`，
+ * 页面 `isLoading` 结束时把最新 citations 绑定到最后一条 assistant 消息的 id
+ * （`attachLatestCitationsToMessageId`）。历史消息从 `citationsByMessageId` 读；
+ * 当前流式消息（`isLatest === true`）从 `latestCitations` 读。
+ *
+ * 版本化 snapshot 用整数递增，避免 `useSyncExternalStore` 因引用相等误判
+ * 不触发重渲染。`getServerSnapshot` 与客户端快照同源（同一个 `version`），
+ * SSR 期间 `onCustomEvent` 只在浏览器触发，服务端始终读到空引用。
+ */
+const citationsStore = {
+  byMessageId: {} as Record<string, Citation[]>,
+  latest: undefined as Citation[] | undefined,
+  version: 0,
+}
+
+const citationsListeners = new Set<() => void>()
+
+function notifyCitations(): void {
+  citationsStore.version += 1
+  citationsListeners.forEach((l) => l())
+}
+
+function subscribeCitations(listener: () => void): () => void {
+  citationsListeners.add(listener)
+  return () => citationsListeners.delete(listener)
+}
+
+function getVersion(): number {
+  return citationsStore.version
+}
+
+export function setLatestCitations(c: Citation[] | undefined): void {
+  if (citationsStore.latest === c) return
+  citationsStore.latest = c
+  notifyCitations()
+}
+
+export function attachLatestCitationsToMessageId(messageId: string): void {
+  const latest = citationsStore.latest
+  if (!latest || latest.length === 0) return
+  if (citationsStore.byMessageId[messageId]?.length === latest.length) return
+  citationsStore.byMessageId = {
+    ...citationsStore.byMessageId,
+    [messageId]: latest,
+  }
+  notifyCitations()
+}
+
+export function clearHarnessCitations(): void {
+  citationsStore.byMessageId = {}
+  citationsStore.latest = undefined
+  notifyCitations()
+}
+
+export function readCitationsForMessage(
+  messageId: string,
+  isLatest: boolean,
+): Citation[] | undefined {
+  if (isLatest) {
+    const direct = citationsStore.byMessageId[messageId]
+    if (direct) return direct
+    return citationsStore.latest
+  }
+  return citationsStore.byMessageId[messageId]
+}
+
+export function useCitationsForMessage(
+  messageId: string,
+  isLatest: boolean,
+): Citation[] | undefined {
+  const version = useSyncExternalStore(subscribeCitations, getVersion, getVersion)
+  void version
+  return readCitationsForMessage(messageId, isLatest)
+}

package/src/components/harness/harness-layout.tsx

@@ -0,0 +1,258 @@
+// 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/>.
+
+"use client";
+
+import { AlertCircle, BotMessageSquare } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AnimatePresence, m as motion } from "motion/react";
+import type { LayoutProps } from "@tanstack/ai-react/ui";
+import AIThinking from "@/components/hextaui/ai-thinking";
+import { harnessChatContexts } from "./harness-chat-contexts";
+import {
+  clearHarnessSandboxEvents,
+  useHarnessSandboxEvents,
+} from "./harness-chat-slots";
+import { SandboxFileChangeCard } from "./sandbox-file-change-card";
+import { TurnContext, sliceTurns, type TurnInfo } from "./turn-group";
+import { TurnNavigator } from "./turn-navigator";
+import { QueueBar } from "./queue-bar";
+import { m } from "@/paraglide/messages.js";
+
+const SCROLL_THRESHOLD = 100;
+
+function useAutoScroll(
+  messages: { id: string }[],
+  isLoading: boolean,
+  containerRef: React.RefObject<HTMLDivElement | null>,
+) {
+  const isAtBottomRef = useRef(true);
+  const prevMessagesRef = useRef(messages);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const handleScroll = () => {
+      isAtBottomRef.current =
+        container.scrollHeight - container.scrollTop <=
+        container.clientHeight + SCROLL_THRESHOLD;
+    };
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [containerRef]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || messages.length === 0) return;
+    const prevMsgs = prevMessagesRef.current;
+    prevMessagesRef.current = messages;
+
+    const isNewConversation =
+      prevMsgs.length > 0 && prevMsgs[0]?.id !== messages[0]?.id;
+    const isInitialLoad = prevMsgs.length === 0;
+
+    if (isNewConversation || isInitialLoad) {
+      container.scrollTop = container.scrollHeight;
+      return;
+    }
+
+    if (isAtBottomRef.current || isLoading) {
+      container.scrollTop = container.scrollHeight;
+    }
+  }, [messages, containerRef, isLoading]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const target = container.firstElementChild;
+    if (!target) return;
+    const observer = new ResizeObserver(() => {
+      if (isAtBottomRef.current || isLoading) {
+        container.scrollTop = container.scrollHeight;
+      }
+    });
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [containerRef, isLoading]);
+}
+
+function renderWaitingIndicator() {
+  return (
+    <div className="flex items-start gap-3">
+      <div className="flex size-11 shrink-0 items-center justify-center rounded-lg rounded-tl-none bg-black dark:bg-primary">
+        <BotMessageSquare className="size-5 text-white dark:text-primary-foreground" />
+      </div>
+      <div className="flex min-w-0 flex-1 flex-col gap-3">
+        <AnimatePresence>
+          <motion.div
+            animate={{ opacity: 1, height: "auto" }}
+            aria-live="polite"
+            className="overflow-hidden"
+            exit={{ opacity: 0, height: 0 }}
+            initial={{ opacity: 0, height: 0 }}
+            role="status"
+            transition={{ duration: 0.3, ease: "easeInOut" }}
+          >
+            <AIThinking />
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}
+
+export function HarnessLayout({
+  Messages,
+  Interrupts,
+  Queue,
+}: LayoutProps<unknown>) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const chat = harnessChatContexts.useChatContext();
+  const { messages, isLoading, error } = chat;
+
+  useAutoScroll(messages, isLoading, containerRef);
+
+  const { changes: sandboxChanges, runState: sandboxRunState } =
+    useHarnessSandboxEvents();
+
+  // 沙箱事件归属当前线程：切到另一个（非空）线程或空会话时清空，
+  // 避免上一个线程的文件变更残留在新线程。首次消息到达不清空——那是本线程的 run。
+  const prevFirstMessageIdRef = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    const current = messages[0]?.id;
+    const prev = prevFirstMessageIdRef.current;
+    if (prev !== undefined && current !== prev) {
+      clearHarnessSandboxEvents();
+    }
+    prevFirstMessageIdRef.current = current;
+  }, [messages]);
+
+  const lastMessage = messages[messages.length - 1];
+  const lastMessageHasContent =
+    lastMessage?.role === "assistant" &&
+    lastMessage.parts.some(
+      (p) => p.type === "text" && p.content.trim().length > 0,
+    );
+  const isWaitingForFirstToken =
+    isLoading && (!lastMessage || !lastMessageHasContent);
+
+  const turns = useMemo(
+    () => sliceTurns(messages, isLoading),
+    [messages, isLoading],
+  );
+  const [expandedTurns, setExpandedTurns] = useState<Set<number>>(new Set());
+  const toggleTurn = useCallback((turnIndex: number) => {
+    setExpandedTurns((prev) => {
+      const next = new Set(prev);
+      if (next.has(turnIndex)) next.delete(turnIndex);
+      else next.add(turnIndex);
+      return next;
+    });
+  }, []);
+
+  const turnInfoMap = useMemo(() => {
+    const map = new Map<string, TurnInfo>();
+    turns.forEach((turn, i) => {
+      turn.assistantMessages.forEach((msg, j) => {
+        map.set(msg.id, {
+          finished: turn.finished,
+          isLastInTurn: j === turn.assistantMessages.length - 1,
+          turnIndex: i,
+          toolCount: turn.toolCount,
+          replyCount: turn.replyCount,
+          shouldFold:
+            turn.finished && (turn.toolCount > 0 || turn.replyCount > 1),
+        });
+      });
+    });
+    return map;
+  }, [turns]);
+
+  const turnContextValue = useMemo(
+    () => ({ turnInfoMap, expandedTurns, toggleTurn }),
+    [turnInfoMap, expandedTurns, toggleTurn],
+  );
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      <div className="min-h-0 flex-1 flex overflow-hidden">
+        <div
+          className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4"
+          ref={containerRef}
+        >
+          <div className="mx-auto flex w-full max-w-4xl flex-col gap-6 py-4 xl:max-w-3xl 2xl:max-w-2xl">
+            {messages.length === 0 && (
+              <div
+                aria-live="polite"
+                className="flex flex-col items-center justify-center gap-4 p-8"
+                role="status"
+              >
+                <div className="flex size-16 items-center justify-center rounded-full bg-muted">
+                  <BotMessageSquare
+                    aria-hidden="true"
+                    className="size-8 text-muted-foreground"
+                  />
+                </div>
+                <div className="flex flex-col items-center gap-2 text-center">
+                  <h2 className="text-foreground text-lg font-semibold">
+                    {m.chat_emptyState_title()}
+                  </h2>
+                  <p className="max-w-md text-muted-foreground text-sm">
+                    {m.chat_emptyState_description()}
+                  </p>
+                </div>
+              </div>
+            )}
+            <div className="flex flex-1 gap-4">
+              <div className="flex min-w-0 flex-1">
+                <TurnContext.Provider value={turnContextValue}>
+                  <Messages />
+                </TurnContext.Provider>
+              </div>
+              {turns.length > 1 && (
+                <TurnNavigator
+                  containerRef={containerRef}
+                  isLoading={isLoading}
+                  turnCount={turns.length}
+                />
+              )}
+            </div>
+            {isWaitingForFirstToken && renderWaitingIndicator()}
+            {error && messages.length > 0 && (
+              <div className="flex items-start gap-3" role="alert">
+                <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-destructive/10">
+                  <AlertCircle className="size-4 text-destructive" />
+                </div>
+                <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm">
+                  <p className="text-destructive">{error.message}</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="shrink-0 space-y-2 px-4 pb-2">
+        <SandboxFileChangeCard
+          changes={sandboxChanges}
+          runState={sandboxRunState}
+        />
+        <QueueBar />
+        <Interrupts />
+      </div>
+    </div>
+  );
+}