@allbluecn/web-app 0.19.2 → 0.19.4

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

@@ -133,9 +133,21 @@ export function GalleryGrid({ kind, threadId, className, compact = false }: Gall
         <p className="p-8 text-center text-muted-foreground">{m.gallery_noItems()}</p>
       ) : (
         <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} />)}
+          {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}
+            />
+          ))}
         </div>
       )}
       {query.hasNextPage && <Button variant="outline" disabled={query.isFetching} onClick={() => { void query.fetchNextPage() }}>{query.isFetchingNextPage ? m.gallery_loading() : m.gallery_loadMore()}</Button>}

package/src/components/harness/gallery/retranscribe-dialog.tsx

@@ -68,16 +68,13 @@ type ProviderItem = {
 }
 
 export function RetranscribeDialog({ open, audioBlobRef, onRetranscribe, onOpenChange }: RetranscribeDialogProps) {
-  const { data: providers, isLoading, isError } = useQuery({
+  // serverFn 返回行 → UI 消费子集（ProviderItem）的断言收敛在 queryFn 边界一处
+  const { data: providers, isLoading, isError } = useQuery<ProviderItem[]>({
     queryKey: ["ai-providers", "transcription"],
-    queryFn: () => listAiProvidersFn({}),
+    queryFn: async () => (await listAiProvidersFn({})) as ProviderItem[],
     enabled: open,
     staleTime: 5 * 60 * 1000,
-  }) as {
-    data: ProviderItem[] | undefined
-    isLoading: boolean
-    isError: boolean
-  }
+  })
 
   const models = useMemo(() => {
     if (isError || !providers || providers.length === 0) return TRANSCRIPTION_MODELS
@@ -108,9 +105,13 @@ export function RetranscribeDialog({ open, audioBlobRef, onRetranscribe, onOpenC
   }, [open, models, model])
 
   const handleConfirm = () => {
+    // language 收敛为 ISO 639-1（可选 region 后缀）：自由文本直进转写参数
+    // 会被 provider 拒绝或静默忽略
+    const trimmed = language.trim()
+    const normalized = /^[a-z]{2,3}(-[A-Za-z]{2,4})?$/i.test(trimmed) ? trimmed : undefined
     onRetranscribe(audioBlobRef, {
       model,
-      language: language.trim() ? language.trim() : undefined,
+      language: normalized,
     })
     onOpenChange(false)
   }

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

@@ -201,7 +201,12 @@ export function clearHarnessSandboxEvents(): void {
   notifySandbox()
 }
 
-/** 读当前线程的沙箱事件；无事件时 changes 为空数组、runState 为 undefined。 */
+/**
+ * 读当前线程的沙箱事件；无事件时 changes 为空数组、runState 为 undefined。
+ *
+ * 只读约定：`changes` 是模块内部数组的引用（每次写入以不可变方式整体替换，
+ * 绝不原地修改），消费方不得对其 push/splice——需要改动时复制后再操作。
+ */
 export function useHarnessSandboxEvents(): {
   changes: SandboxFileChange[]
   runState: SandboxRunState
@@ -258,14 +263,45 @@ export function setLatestCitations(c: Citation[] | undefined): void {
   notifyCitations()
 }
 
+/** SSE citations 事件载荷结构守卫：畸形数据返回 undefined（fail-closed 不入 store） */
+export function parseCitationsPayload(data: unknown): Citation[] | undefined {
+  if (!Array.isArray(data) || data.length === 0) return undefined
+  const isCitation = (c: unknown): c is Citation => {
+    if (typeof c !== "object" || c === null) return false
+    const rec = c as Record<string, unknown>
+    return (
+      typeof rec.id === "string" &&
+      typeof rec.number === "number" &&
+      Array.isArray(rec.sources) &&
+      rec.sources.every(
+        (s) =>
+          typeof s === "object" &&
+          s !== null &&
+          typeof (s as Record<string, unknown>).url === "string" &&
+          typeof (s as Record<string, unknown>).title === "string",
+      )
+    )
+  }
+  return data.every(isCitation) ? (data as Citation[]) : undefined
+}
+
+/** byMessageId 上限：超出的最旧条目按写入顺序淘汰，防长会话无限增长 */
+const MAX_CITATIONS_MESSAGE_ENTRIES = 100
+
 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,
+  // setLatestCitations 已按引用去重，同一引用重复 attach 无需重写；
+  // 内容不同必是新引用（数组不可变更新），仅比 length 会漏掉等长替换
+  if (citationsStore.byMessageId[messageId] === latest) return
+  const next = { ...citationsStore.byMessageId, [messageId]: latest }
+  const keys = Object.keys(next)
+  if (keys.length > MAX_CITATIONS_MESSAGE_ENTRIES) {
+    for (const key of keys.slice(0, keys.length - MAX_CITATIONS_MESSAGE_ENTRIES)) {
+      delete next[key]
+    }
   }
+  citationsStore.byMessageId = next
   notifyCitations()
 }
 

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

@@ -166,6 +166,17 @@ export function HarnessLayout({
   const turnInfoMap = useMemo(() => {
     const map = new Map<string, TurnInfo>();
     turns.forEach((turn, i) => {
+      // 用户消息也入表：turn 导航（data-turn-index）以每轮首条用户消息为锚点
+      if (turn.userMessage) {
+        map.set(turn.userMessage.id, {
+          finished: turn.finished,
+          isLastInTurn: false,
+          turnIndex: i,
+          toolCount: turn.toolCount,
+          replyCount: turn.replyCount,
+          shouldFold: false,
+        });
+      }
       turn.assistantMessages.forEach((msg, j) => {
         map.set(msg.id, {
           finished: turn.finished,

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

@@ -55,19 +55,33 @@ export function HarnessMessage({
   const [copied, setCopied] = useState(false);
   const [copyError, setCopyError] = useState(false);
   const messageRef = useRef<HTMLDivElement>(null);
-  const contentRef = useRef("");
-  contentRef.current = extractTextContent(message);
+  const feedbackTimersRef = useRef<number[]>([]);
 
   const handleCopy = useCallback(async () => {
+    const text = extractTextContent(message);
     try {
-      await navigator.clipboard.writeText(contentRef.current);
+      await navigator.clipboard.writeText(text);
       setCopied(true);
       setCopyError(false);
-      setTimeout(() => setCopied(false), COPY_FEEDBACK_DURATION);
     } catch {
       setCopyError(true);
-      setTimeout(() => setCopyError(false), COPY_FEEDBACK_DURATION);
+      setCopied(false);
+    } finally {
+      const timer = window.setTimeout(() => {
+        setCopied(false);
+        setCopyError(false);
+      }, COPY_FEEDBACK_DURATION);
+      feedbackTimersRef.current.push(timer);
     }
+  }, [message]);
+
+  // 卸载时清理复制反馈定时器，避免卸载后仍触发 setState
+  useEffect(() => {
+    const timers = feedbackTimersRef;
+    return () => {
+      for (const t of timers.current) window.clearTimeout(t);
+      timers.current = [];
+    };
   }, []);
 
   useEffect(() => {
@@ -100,7 +114,11 @@ export function HarnessMessage({
 
   if (message.role === "user") {
     return (
-      <div className="flex justify-end rounded-lg" role="article">
+      <div
+        className="flex justify-end rounded-lg"
+        role="article"
+        {...(turnInfo ? { "data-turn-index": turnInfo.turnIndex } : {})}
+      >
         <div className="flex min-h-[44px] max-w-[80%] items-center rounded-lg rounded-tr-none bg-primary px-4 py-3 text-primary-foreground">
           <div className="wrap-break-word whitespace-pre-wrap text-sm leading-relaxed">
             <Parts />
@@ -132,6 +150,7 @@ export function HarnessMessage({
       className="group flex flex-col gap-3"
       ref={messageRef}
       role="article"
+      {...(turnInfo ? { "data-turn-index": turnInfo.turnIndex } : {})}
     >
       <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">

package/src/components/harness/harness-workbench-page.tsx

@@ -27,6 +27,7 @@ import {
   attachLatestCitationsToMessageId,
   clearHarnessCitations,
   clearHarnessChatSlots,
+  parseCitationsPayload,
   registerHarnessChatSlots,
   setLatestCitations,
 } from '@/components/harness/harness-chat-slots'
@@ -47,6 +48,7 @@ import {
 } from '@/lib/ai/chat-handoff'
 import { resolveMountEffectPath } from '@/components/harness/harness-workbench-mount'
 import { m } from '@/paraglide/messages.js'
+import { toastError } from '@/lib/toast-error'
 import type { UIMessage } from '@tanstack/ai-react'
 import { WorkbenchShell } from '@/components/harness/workbench/workbench-shell'
 import { HarnessComposer } from '@/components/harness/composer/harness-composer'
@@ -197,7 +199,9 @@ export default function HarnessWorkbenchPage({ initialThreadId, initialMessages
       byokProvider: () => adapterKind,
       onCustomEvent: (eventType, data) => {
         if (eventType === 'citations') {
-          setLatestCitations(data as any)
+          // 结构守卫：畸形载荷不入全局 store（fail-closed）
+          const citations = parseCitationsPayload(data)
+          if (citations) setLatestCitations(citations)
         }
       },
     })
@@ -299,9 +303,11 @@ export default function HarnessWorkbenchPage({ initialThreadId, initialMessages
     setActiveConversationId(null)
     activeIdRef.current = null
     chat.clear()
-    void createConversationFn({ data: { agentId: selectedAgentId } }).then((conv) => {
+    createConversationFn({ data: { agentId: selectedAgentId } }).then((conv) => {
       setConversations((prev) => [conv, ...prev])
       navigate({ to: '/harness/$threadId', params: { threadId: conv.id } })
+    }).catch((e) => {
+      toastError(e, m.common_operationFailed())
     })
   }, [chat, navigate, selectedAgentId])
 
@@ -330,7 +336,12 @@ export default function HarnessWorkbenchPage({ initialThreadId, initialMessages
   }, [navigate])
 
   const handleDelete = useCallback(async (id: string) => {
-    await deleteConversationFn({ data: { id } })
+    try {
+      await deleteConversationFn({ data: { id } })
+    } catch (e) {
+      toastError(e, m.common_operationFailed())
+      return
+    }
     setConversations(prev => prev.filter(c => c.id !== id))
     if (activeConversationId === id) {
       setActiveConversationId(null)
@@ -340,28 +351,49 @@ export default function HarnessWorkbenchPage({ initialThreadId, initialMessages
   }, [activeConversationId, chat])
 
   const handleArchive = useCallback(async (id: string) => {
-    await updateConversationFn({ data: { id, isArchived: true } })
+    try {
+      await updateConversationFn({ data: { id, isArchived: true } })
+    } catch (e) {
+      toastError(e, m.common_operationFailed())
+      return
+    }
     setConversations(prev => prev.map(c =>
       c.id === id ? { ...c, isArchived: true } : c
     ))
   }, [])
 
   const handleUnarchive = useCallback(async (id: string) => {
-    await updateConversationFn({ data: { id, isArchived: false } })
+    try {
+      await updateConversationFn({ data: { id, isArchived: false } })
+    } catch (e) {
+      toastError(e, m.common_operationFailed())
+      return
+    }
     setConversations(prev => prev.map(c =>
       c.id === id ? { ...c, isArchived: false } : c
     ))
   }, [])
 
   const handleRename = useCallback(async (id: string, title: string) => {
-    await updateConversationFn({ data: { id, title } })
+    try {
+      await updateConversationFn({ data: { id, title } })
+    } catch (e) {
+      toastError(e, m.common_operationFailed())
+      return
+    }
     setConversations(prev => prev.map(c =>
       c.id === id ? { ...c, title } : c
     ))
   }, [])
 
   const handleFork = useCallback(async (id: string) => {
-    const forked = await forkConversationFn({ data: { threadId: id } })
+    let forked: Conversation
+    try {
+      forked = await forkConversationFn({ data: { threadId: id } })
+    } catch (e) {
+      toastError(e, m.common_operationFailed())
+      return
+    }
     setConversations(prev => [forked, ...prev])
     navigate({ to: '/harness/$threadId', params: { threadId: forked.id } })
   }, [navigate])

package/src/components/harness/image-lightbox.tsx

@@ -17,7 +17,9 @@
 
 
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
 import { X } from "lucide-react"
+import { m } from "@/paraglide/messages.js"
 
 export interface ImageLightboxProps {
   open: boolean
@@ -30,19 +32,23 @@ export function ImageLightbox({ open, onOpenChange, src, alt }: ImageLightboxPro
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-3xl">
-        <DialogTitle className="sr-only">{alt ?? "图片预览"}</DialogTitle>
+        <DialogTitle className="sr-only">{alt ?? m.knowledge_imagePreview()}</DialogTitle>
         <div className="relative aspect-auto">
           <img
             src={src}
             alt={alt}
             className="max-h-[70vh] w-full rounded-lg object-contain"
           />
-          <button
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            aria-label={m.common_close()}
             onClick={() => onOpenChange(false)}
             className="absolute right-2 top-2 rounded-full bg-background/80 p-1 hover:bg-muted"
           >
             <X className="size-4" />
-          </button>
+          </Button>
         </div>
       </DialogContent>
     </Dialog>

package/src/components/harness/plugin-mention-menu.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect } from "react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Puzzle, Package } from "lucide-react";
 import { getLoadedPlugins } from "@/lib/plugin-runtime/plugin-client";
@@ -25,7 +25,8 @@ import { m } from "@/paraglide/messages.js";
 export interface PluginMentionMenuProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  trigger: React.ReactNode;
+  /** PopoverTrigger render 的宿主元素（通常是 textarea 容器） */
+  trigger: React.ReactElement;
   applyMention: (toolName: string) => void;
 }
 
@@ -42,7 +43,6 @@ export function PluginMentionMenu({
   applyMention,
 }: PluginMentionMenuProps) {
   const [plugins, setPlugins] = useState<PluginToolItem[]>([]);
-  const [query, setQuery] = useState("");
 
   useEffect(() => {
     if (!open) return;
@@ -58,23 +58,11 @@ export function PluginMentionMenu({
       }
     }
     setPlugins(tools);
-    setQuery("");
   }, [open]);
 
-  const filteredTools = useMemo(() => {
-    if (!query) return plugins;
-    const q = query.toLowerCase();
-    return plugins.filter(
-      (t) =>
-        t.toolName.toLowerCase().includes(q) ||
-        t.description.toLowerCase().includes(q) ||
-        t.pluginId.toLowerCase().includes(q)
-    );
-  }, [plugins, query]);
-
   return (
     <Popover open={open} onOpenChange={onOpenChange}>
-      <PopoverTrigger render={trigger as React.ReactElement} />
+      <PopoverTrigger render={trigger} />
       <PopoverContent className="w-[280px] p-0" align="start" side="top">
         <div className="flex items-center gap-2 border-b px-3 py-2">
           <Puzzle className="size-3.5 text-muted-foreground" />
@@ -87,13 +75,9 @@ export function PluginMentionMenu({
               {m.harness_plugin_mentionEmpty()}
             </p>
           </div>
-        ) : filteredTools.length === 0 ? (
-          <div className="p-3 text-center text-xs text-muted-foreground">
-            {m.harness_plugin_mentionNoMatch()}
-          </div>
         ) : (
           <div className="flex flex-col max-h-60 overflow-y-auto">
-            {filteredTools.map((tool) => (
+            {plugins.map((tool) => (
               <button
                 key={`${tool.pluginId}-${tool.toolName}`}
                 type="button"

package/src/components/harness/plugin-panel.tsx

@@ -26,28 +26,34 @@ import { listPluginsFn, setPluginStatusFn, deletePluginFn } from "@/server/serve
 import { stopPlugin } from "@/lib/plugin-runtime/plugin-client";
 import { m } from "@/paraglide/messages.js";
 
+// 状态徽标 label 用惰性函数：避免模块求值时固化语言，运行时切语言后仍能更新
 const STATUS_CONFIG = {
-  defined: { label: m.harness_plugin_status_defined(), color: "bg-muted text-muted-foreground" },
-  running: { label: m.harness_plugin_status_running(), color: "bg-green-500/20 text-green-500" },
-  stopped: { label: m.harness_plugin_status_stopped(), color: "bg-orange-500/20 text-orange-500" },
-  error: { label: m.harness_plugin_status_error(), color: "bg-red-500/20 text-red-500" },
+  defined: { label: () => m.harness_plugin_status_defined(), color: "bg-muted text-muted-foreground" },
+  running: { label: () => m.harness_plugin_status_running(), color: "bg-green-500/20 text-green-500" },
+  stopped: { label: () => m.harness_plugin_status_stopped(), color: "bg-orange-500/20 text-orange-500" },
+  error: { label: () => m.harness_plugin_status_error(), color: "bg-red-500/20 text-red-500" },
 } as const;
 
-interface Plugin {
-  id: string;
+interface PluginTool {
   name: string;
-  purpose: string;
-  codeHost: string | null;
-  codeClient: string | null;
-  tools: any[];
-  version: number;
-  status: string;
-  lastError: string | null;
-  createdAt: string;
-  updatedAt: string;
+  description?: string;
 }
 
-type PluginWithTools = Plugin & { tools: any[] };
+/** serverFn 返回行类型（tools 为 Json 载荷）派生，避免手写漂移 */
+type Plugin = Omit<Awaited<ReturnType<typeof listPluginsFn>>[number], "tools"> & {
+  tools: PluginTool[];
+};
+
+/** tools 落库为 Json：逐项收窄为 PluginTool，异常形状直接丢弃 */
+function toPluginTools(value: unknown): PluginTool[] {
+  if (!Array.isArray(value)) return [];
+  return value.filter(
+    (t): t is PluginTool =>
+      typeof t === "object" &&
+      t !== null &&
+      typeof (t as { name?: unknown }).name === "string",
+  );
+}
 
 export function PluginPanel({ onClose }: { onClose: () => void }) {
   const queryClient = useQueryClient();
@@ -58,9 +64,9 @@ export function PluginPanel({ onClose }: { onClose: () => void }) {
     queryKey: ["harness-plugins"],
     queryFn: async () => {
       const result = await listPluginsFn();
-      return result.map((p: any) => ({
+      return result.map((p) => ({
         ...p,
-        tools: Array.isArray(p.tools) ? p.tools : [],
+        tools: toPluginTools(p.tools),
       }));
     },
     refetchOnMount: true,
@@ -122,7 +128,7 @@ export function PluginPanel({ onClose }: { onClose: () => void }) {
       <div className="flex-1 overflow-y-auto p-2">
         {isLoading ? (
           <div className="flex items-center justify-center py-8 text-muted-foreground">
-            <p className="text-xs">{m.harness_plugin_empty()}</p>
+            <p className="text-xs">{m.common_loading()}</p>
           </div>
         ) : plugins && plugins.length > 0 ? (
           <div className="space-y-2">
@@ -139,7 +145,7 @@ export function PluginPanel({ onClose }: { onClose: () => void }) {
                         <div className="flex items-center gap-1.5">
                           <span className="font-medium text-sm">{plugin.name}</span>
                           <Badge variant="outline" className={`text-[10px] px-1.5 py-0 ${statusConfig.color}`}>
-                            {statusConfig.label}
+                            {statusConfig.label()}
                           </Badge>
                           <span className="text-[10px] text-muted-foreground">{m.harness_plugin_version({ version: plugin.version })}</span>
                         </div>
@@ -169,7 +175,7 @@ export function PluginPanel({ onClose }: { onClose: () => void }) {
                             <div>
                               <p className="text-[10px] font-medium text-muted-foreground uppercase">Tools</p>
                               <ul className="mt-1 space-y-0.5">
-                                {plugin.tools.map((tool: any, i: number) => (
+                                {plugin.tools.map((tool, i: number) => (
                                   <li key={i} className="flex items-center gap-1 text-xs">
                                     <span className="text-muted-foreground">{plugin.name}/</span>
                                     <span className="font-mono">{tool.name}</span>

package/src/components/harness/queue-bar.tsx

@@ -20,25 +20,7 @@ import { ArrowRightToLine, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { m } from "@/paraglide/messages.js";
 import { useHarnessChatContext } from "./chat-ui";
-
-function flattenContent(content: unknown): string {
-  if (typeof content === "string") return content;
-  if (Array.isArray(content)) {
-    return content
-      .map(
-        (part) =>
-          typeof part === "object" &&
-          part !== null &&
-          "type" in part &&
-          part.type === "text"
-            ? String((part as { content?: unknown }).content ?? "")
-            : "",
-      )
-      .filter(Boolean)
-      .join(" ");
-  }
-  return "";
-}
+import { flattenContent } from "./flatten-content";
 
 export function QueueBar() {
   const chat = useHarnessChatContext();

package/src/components/harness/queue-item.tsx

@@ -20,31 +20,7 @@ import type { QueueProps } from "@tanstack/ai-react/ui";
 import { X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { m } from "@/paraglide/messages.js";
-
-function flattenContent(content: unknown): string {
-  if (typeof content === "string") return content
-  if (Array.isArray(content)) {
-    return content
-      .map((part) =>
-        typeof part === "object" &&
-        part !== null &&
-        "type" in part &&
-        part.type === "text"
-          ? String((part as { content?: unknown }).content ?? "")
-          : ""
-      )
-      .filter(Boolean)
-      .join(" ")
-  }
-  if (typeof content === "object" && content !== null) {
-    try {
-      return JSON.stringify(content)
-    } catch {
-      return ""
-    }
-  }
-  return ""
-}
+import { flattenContent } from "./flatten-content";
 
 export function QueueItem({ item }: QueueProps<unknown>) {
   const text = flattenContent(item.content)

package/src/components/harness/transcript-width-handle.tsx

@@ -16,7 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 
-import { useCallback, useRef } from "react"
+import { m } from "@/paraglide/messages.js"
+import { useColumnResize } from "@/components/harness/use-column-resize"
 
 export interface TranscriptWidthHandleProps {
   width: number
@@ -36,28 +37,7 @@ export function TranscriptWidthHandle({
   max = DEFAULT_MAX,
   className,
 }: TranscriptWidthHandleProps) {
-  const dragBase = useRef<{ x: number; w: number } | null>(null)
-
-  const startDrag = useCallback(
-    (e: React.PointerEvent) => {
-      dragBase.current = { x: e.clientX, w: width }
-      const el = e.currentTarget as HTMLElement
-      el.setPointerCapture(e.pointerId)
-      const onMove = (ev: PointerEvent) => {
-        if (!dragBase.current) return
-        const next = dragBase.current.w + (ev.clientX - dragBase.current.x)
-        onChange(Math.min(max, Math.max(min, next)))
-      }
-      const onUp = () => {
-        dragBase.current = null
-        el.removeEventListener("pointermove", onMove)
-        el.removeEventListener("pointerup", onUp)
-      }
-      el.addEventListener("pointermove", onMove)
-      el.addEventListener("pointerup", onUp)
-    },
-    [width, onChange, min, max]
-  )
+  const startDrag = useColumnResize({ getWidth: () => width, onChange, min, max })
 
   return (
     <div
@@ -65,7 +45,7 @@ export function TranscriptWidthHandle({
       onPointerDown={startDrag}
       role="separator"
       aria-orientation="vertical"
-      aria-label="调整宽度"
+      aria-label={m.common_dragToResize()}
       style={{ minWidth: 4 }}
     />
   )

package/src/components/harness/turn-navigator.tsx

@@ -30,11 +30,14 @@ export function TurnNavigator({ turnCount, isLoading, containerRef }: TurnNaviga
 
   const scrollToTurn = (index: number) => {
     const container = containerRef.current
-    const track = trackRef.current
-    if (!container || !track) return
+    if (!container) return
 
-    const turnElements = track.querySelectorAll("[data-turn-index]")
-    const target = turnElements[index]
+    // 在消息容器内找该轮的锚点（用户消息/首条回复带 data-turn-index），
+    // 不能查 trackRef——导航点自身也带同名属性，会滚动到导航 rail 上
+    const turnElements = container.querySelectorAll<HTMLElement>("[data-turn-index]")
+    const target = Array.from(turnElements).find(
+      (el) => el.dataset.turnIndex === String(index),
+    )
     if (target) {
       target.scrollIntoView({ block: "start" })
     }