@allbluecn/web-app 0.19.2 → 0.19.4

package/src/components/ai/ai-suggested-prompts.tsx

@@ -352,6 +352,26 @@ interface PromptListProps {
   setFocusedIndex: (index: number | null) => void;
 }
 
+/** 全局方向键导航不应抢走输入类控件与 tab 键盘操作的焦点 */
+function shouldIgnoreKeyEvent(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target instanceof HTMLTextAreaElement || target.isContentEditable) {
+    return true;
+  }
+  if (
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLButtonElement
+  ) {
+    if (target.type === "button" && target.closest('[role="tablist"]')) {
+      return true;
+    }
+    if (target.type === "search" || target.type === "text") {
+      return true;
+    }
+  }
+  return false;
+}
+
 function PromptList({
   prompts,
   focusedIndex,
@@ -368,6 +388,13 @@ function PromptList({
     []
   );
 
+  // prompts 过滤变化后截断残留引用，避免索引偏移时聚焦到失效节点
+  useEffect(() => {
+    if (itemRefs.current.length > prompts.length) {
+      itemRefs.current.length = prompts.length;
+    }
+  }, [prompts]);
+
   useEffect(() => {
     if (focusedIndex !== null && itemRefs.current[focusedIndex]) {
       itemRefs.current[focusedIndex]?.scrollIntoView({
@@ -379,21 +406,7 @@ function PromptList({
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      const target = e.target as HTMLElement;
-      if (target instanceof HTMLTextAreaElement || target.isContentEditable) {
-        return;
-      }
-      if (
-        target instanceof HTMLInputElement ||
-        target instanceof HTMLButtonElement
-      ) {
-        if (target.type === "button" && target.closest('[role="tablist"]')) {
-          return;
-        }
-        if (target.type === "search" || target.type === "text") {
-          return;
-        }
-      }
+      if (shouldIgnoreKeyEvent(e.target)) return;
 
       if (prompts.length === 0) return;
 

package/src/components/ai/global-harness-sidebar/index.tsx

@@ -107,8 +107,9 @@ export function GlobalHarnessSidebar({ hasAiKey }: { hasAiKey?: boolean | null }
   useAiDocked(isOpen && size === "full");
 
   const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [convosLoadFailed, setConvosLoadFailed] = useState(false);
   const [activeThreadId, setActiveThreadId] = useState<string | undefined>(undefined);
-  const [initialMessages, setInitialMessages] = useState<unknown[]>([]);
+  const [initialMessages, setInitialMessages] = useState<UIMessage[]>([]);
   const [loadingConvos, setLoadingConvos] = useState(false);
   const [draft, setDraft] = useState("");
   const [renamingId, setRenamingId] = useState<string | null>(null);
@@ -116,6 +117,7 @@ export function GlobalHarnessSidebar({ hasAiKey }: { hasAiKey?: boolean | null }
   const [deletingId, setDeletingId] = useState<string | null>(null);
   const [deletePending, setDeletePending] = useState(false);
   const [historyMenuOpen, setHistoryMenuOpen] = useState(false);
+  const historyMenuRef = useRef<HTMLDivElement>(null);
   const renameInputRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
   const [selectedModel] = useSelectedModel();
@@ -174,8 +176,9 @@ export function GlobalHarnessSidebar({ hasAiKey }: { hasAiKey?: boolean | null }
       ? (document.querySelector<HTMLElement>('main[data-slot="sidebar-inset"]') ?? floatHostRef.current)
       : (document.getElementById(FULL_PANEL_SLOT_ID) ?? floatHostRef.current);
     const target = size === "full" ? fullTarget : floatHostRef.current;
+    let rafId = 0;
     if (target && focusedRef.current) {
-      requestAnimationFrame(() => {
+      rafId = requestAnimationFrame(() => {
         const textarea = target.querySelector("textarea");
         if (textarea) {
           textarea.focus();
@@ -187,6 +190,7 @@ export function GlobalHarnessSidebar({ hasAiKey }: { hasAiKey?: boolean | null }
     mountNodeRef.current = target;
     const left = target;
     return () => {
+      cancelAnimationFrame(rafId);
       if (mountNodeRef.current === left) focusedRef.current = false;
     };
   }, [isOpen, size, aiOverlay]);
@@ -210,8 +214,10 @@ export function GlobalHarnessSidebar({ hasAiKey }: { hasAiKey?: boolean | null }
           isArchived: c.isArchived,
         })),
       );
+      setConvosLoadFailed(false);
     } catch {
-      // 静默失败
+      // 列表加载失败与空列表是两种状态：标记失败供菜单展示，不让用户误读为「0 个会话」
+      setConvosLoadFailed(true);
     } finally {
       setLoadingConvos(false);
     }
@@ -225,25 +231,35 @@ export function GlobalHarnessSidebar({ hasAiKey }: { hasAiKey?: boolean | null }
 
   const switchThread = useCallback(
     async (threadId: string) => {
-      const msgs = await listMessagesFn({ data: { threadId } });
-      setActiveThreadId(threadId);
-      setInitialMessages(msgs);
+      try {
+        const msgs = await listMessagesFn({ data: { threadId } });
+        // 线上格式 createdAt 为 string，UIMessage 为 Date——序列化边界双段断言
+        const loaded = msgs as unknown as UIMessage[]
+        setActiveThreadId(threadId);
+        setInitialMessages(loaded);
+      } catch {
+        toast.error(m.chat_globalChat_requestFailed());
+      }
     },
     [],
   );
 
   const handleNewConversation = useCallback(async () => {
-    const conv = await createConversationFn({ data: { agentId: "" } });
-    const newId = (conv as { id: string }).id;
-    setConversations((prev) => [{
-      id: newId,
-      title: null,
-      lastMessageAt: new Date(),
-      messageCount: 0,
-      isArchived: false,
-    }, ...prev]);
-    setActiveThreadId(newId);
-    setInitialMessages([]);
+    try {
+      const conv = await createConversationFn({ data: { agentId: "" } });
+      const newId = (conv as { id: string }).id;
+      setConversations((prev) => [{
+        id: newId,
+        title: null,
+        lastMessageAt: new Date(),
+        messageCount: 0,
+        isArchived: false,
+      }, ...prev]);
+      setActiveThreadId(newId);
+      setInitialMessages([]);
+    } catch {
+      toast.error(m.chat_globalChat_requestFailed());
+    }
   }, []);
 
   const handleRenameSubmit = useCallback(async () => {
@@ -290,7 +306,7 @@ export function GlobalHarnessSidebar({ hasAiKey }: { hasAiKey?: boolean | null }
 
   const chat = useHarnessChat({
     threadId: activeThreadId ?? fallbackThreadIdRef.current,
-    initialMessages: initialMessages as any[],
+    initialMessages,
     forwardedProps: {
       model: selectedModel,
       provider: adapterKind,
@@ -430,7 +446,7 @@ export function GlobalHarnessSidebar({ hasAiKey }: { hasAiKey?: boolean | null }
                   >
                     <History className="size-4" />
                   </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="max-h-72 w-64 overflow-y-auto">
+                  <DropdownMenuContent ref={historyMenuRef} align="end" className="max-h-72 w-64 overflow-y-auto">
                     <DropdownMenuItem
                       className={cn(renamingId && "pointer-events-none")}
                       onClick={() => void handleNewConversation()}
@@ -443,6 +459,10 @@ export function GlobalHarnessSidebar({ hasAiKey }: { hasAiKey?: boolean | null }
                       <div className="px-2 py-1.5 text-xs text-muted-foreground">
                         {m.chat_slashCommands_loading()}
                       </div>
+                    ) : convosLoadFailed ? (
+                      <div className="px-2 py-1.5 text-xs text-muted-foreground">
+                        {m.chat_globalChat_requestFailed()}
+                      </div>
                     ) : conversations.length === 0 ? (
                       <div className="px-2 py-1.5 text-xs text-muted-foreground">
                         {m.chat_history_conversationCount({ count: 0 })}
@@ -477,8 +497,7 @@ export function GlobalHarnessSidebar({ hasAiKey }: { hasAiKey?: boolean | null }
                                   onClick={(e) => e.stopPropagation()}
                                   onBlur={(e) => {
                                     if (renamingId && e.relatedTarget instanceof HTMLElement) {
-                                      const menu = document.querySelector('[role="menu"]');
-                                      if (menu?.contains(e.relatedTarget)) {
+                                      if (historyMenuRef.current?.contains(e.relatedTarget)) {
                                         requestAnimationFrame(() => renameInputRef.current?.focus());
                                       }
                                     }
@@ -624,7 +643,7 @@ export function GlobalHarnessSidebar({ hasAiKey }: { hasAiKey?: boolean | null }
 
             {/* 消息区：空会话态显示「问问 AI」建议（按当前板块），否则渲染消息流 */}
             <div className="min-h-0 flex-1 overflow-y-auto px-3 py-3">
-              {chat.error && chat.messages.length > 0 && (
+              {chat.error && (
                 <div className="mb-2 flex items-center gap-2 rounded-lg border border-destructive bg-destructive/10 p-3">
                   <span className="text-xs text-destructive">
                     {chat.error.message || m.chat_globalChat_requestFailed()}
@@ -657,7 +676,7 @@ export function GlobalHarnessSidebar({ hasAiKey }: { hasAiKey?: boolean | null }
               )}
               {chat.isLoading && (
                 <div className="flex items-center gap-2 py-2 text-muted-foreground">
-                  <span className="size-4 animate-spin">⟳</span>
+                  <Loader2 className="size-4 animate-spin" />
                   <span className="text-xs">{m.chat_globalChat_thinking()}</span>
                 </div>
               )}

package/src/components/ai/tool-cards/-shared.tsx

@@ -62,7 +62,11 @@ export function extractToolText(
   return null;
 }
 
-export function useToolState(part: { state: string }): {
+/**
+ * 由 part.state 推导加载/错误态。注意：内部不含任何 Hook，
+ * 命名刻意不带 use 前缀，避免被误判为 Hook（条件调用/依赖收集语义）。
+ */
+export function getToolState(part: { state: string }): {
   isLoading: boolean;
   isError: boolean;
 } {

package/src/components/ai/tool-cards/fallback-tool-card.tsx

@@ -23,9 +23,9 @@ import { cn } from "@/lib/utils";
 import { m } from "@/paraglide/messages.js";
 import {
   extractToolText,
+  getToolState,
   ToolCardShell,
   ToolStatus,
-  useToolState,
 } from "./-shared";
 
 const MAX_JSON_CHARS = 500;
@@ -65,7 +65,7 @@ export function FallbackToolCard({
 }: ToolProps<unknown, string>) {
   const [expanded, setExpanded] = useState(false);
   const [showInput, setShowInput] = useState(false);
-  const { isLoading, isError } = useToolState(part);
+  const { isLoading, isError } = getToolState(part);
 
   const inputJson =
     part.input === undefined

package/src/components/ai/tool-cards/knowledge-search-card.tsx

@@ -17,15 +17,11 @@
 
 
 import { useState } from "react";
-import { BookOpen, ChevronDown } from "lucide-react";
-import type { ToolResultPart } from "@tanstack/ai";
+import { BookOpen } from "lucide-react";
 import type { ToolProps } from "@tanstack/ai-react/ui";
 import { cn } from "@/lib/utils";
 import { m } from "@/paraglide/messages.js";
-
-interface KnowledgeSearchInput {
-  query?: string;
-}
+import { Collapsible, extractToolText, getToolState, pickToolQuery } from "./-shared";
 
 interface KnowledgeSearchHit {
   documentTitle?: string;
@@ -43,37 +39,6 @@ function isKnowledgeSearchOutput(v: unknown): v is KnowledgeSearchOutput {
   return typeof v === "object" && v !== null;
 }
 
-function pickQuery(part: ToolProps<unknown, string>["part"]): string {
-  const input = part.input as KnowledgeSearchInput | undefined;
-  if (typeof input?.query === "string" && input.query.trim()) {
-    return input.query
-  }
-  if (typeof part.arguments === "string" && part.arguments.trim()) {
-    try {
-      const parsed = JSON.parse(part.arguments) as KnowledgeSearchInput
-      if (typeof parsed.query === "string" && parsed.query.trim()) {
-        return parsed.query
-      }
-    } catch {
-      // input-streaming 阶段 JSON 可能不完整，忽略
-    }
-  }
-  return ""
-}
-
-function extractContent(result?: ToolResultPart): string {
-  if (!result) return ""
-  if (typeof result.content === "string") return result.content
-  return result.content
-    .map((p) =>
-      typeof p === "object" && p !== null && "type" in p && p.type === "text"
-        ? String((p as { content?: unknown }).content ?? "")
-        : ""
-    )
-    .filter(Boolean)
-    .join("")
-}
-
 function parseHits(
   partOutput: unknown,
   content: string
@@ -117,14 +82,10 @@ export function KnowledgeSearchCard({
   result,
 }: ToolProps<unknown, string>) {
   const [expanded, setExpanded] = useState(false)
-  const query = pickQuery(part)
-  const hits = parseHits(part.output, extractContent(result))
+  const query = pickToolQuery(part)
+  const hits = parseHits(part.output, extractToolText(part, result) ?? "")
 
-  const isLoading =
-    part.state === "awaiting-input" ||
-    part.state === "input-streaming" ||
-    part.state === "approval-requested"
-  const isError = part.state === "error"
+  const { isLoading, isError } = getToolState(part)
 
   return (
     <div
@@ -135,11 +96,7 @@ export function KnowledgeSearchCard({
           : "border-border bg-muted/40"
       )}
     >
-      <button
-        type="button"
-        onClick={() => setExpanded((v) => !v)}
-        className="flex w-full items-center gap-2 text-left"
-      >
+      <Collapsible expanded={expanded} onToggle={() => setExpanded((v) => !v)}>
         <BookOpen className="size-3.5 shrink-0 text-muted-foreground" />
         <span className="truncate font-medium">
           {m.harness_tool_knowledgeSearch({ query: query || "…" })}
@@ -149,10 +106,7 @@ export function KnowledgeSearchCard({
             {m.harness_tool_resultCount({ count: hits.length })}
           </span>
         )}
-        {expanded && hits && hits.length > 0 && (
-          <ChevronDown className="size-3 shrink-0 transition-transform" />
-        )}
-      </button>
+      </Collapsible>
       {isLoading && (
         <p className="text-muted-foreground">{m.chat_toolCall_pending()}</p>
       )}

package/src/components/ai/tool-cards/web-search-card.tsx

@@ -17,15 +17,12 @@
 
 
 import { useState } from "react";
-import { ChevronDown, Globe } from "lucide-react";
-import type { ToolResultPart } from "@tanstack/ai";
+import { Globe } from "lucide-react";
 import type { ToolProps } from "@tanstack/ai-react/ui";
 import { cn } from "@/lib/utils";
+import { toSafeHref } from "@/lib/safe-url";
 import { m } from "@/paraglide/messages.js";
-
-interface WebSearchInput {
-  query?: string;
-}
+import { Collapsible, extractToolText, getToolState, pickToolQuery } from "./-shared";
 
 interface WebSearchResult {
   title: string;
@@ -40,37 +37,6 @@ function isWebSearchOutput(v: unknown): v is WebSearchOutput {
   return typeof v === "object" && v !== null;
 }
 
-function pickQuery(part: ToolProps<unknown, string>["part"]): string {
-  const input = part.input as WebSearchInput | undefined;
-  if (typeof input?.query === "string" && input.query.trim()) {
-    return input.query
-  }
-  if (typeof part.arguments === "string" && part.arguments.trim()) {
-    try {
-      const parsed = JSON.parse(part.arguments) as WebSearchInput
-      if (typeof parsed.query === "string" && parsed.query.trim()) {
-        return parsed.query
-      }
-    } catch {
-      // input-streaming 阶段 JSON 可能不完整，忽略
-    }
-  }
-  return ""
-}
-
-function extractContent(result?: ToolResultPart): string {
-  if (!result) return ""
-  if (typeof result.content === "string") return result.content
-  return result.content
-    .map((p) =>
-      typeof p === "object" && p !== null && "type" in p && p.type === "text"
-        ? String((p as { content?: unknown }).content ?? "")
-        : ""
-    )
-    .filter(Boolean)
-    .join("")
-}
-
 function parseResults(
   partOutput: unknown,
   content: string
@@ -108,14 +74,10 @@ export function WebSearchCard({
   result,
 }: ToolProps<unknown, string>) {
   const [expanded, setExpanded] = useState(false)
-  const query = pickQuery(part)
-  const results = parseResults(part.output, extractContent(result))
+  const query = pickToolQuery(part)
+  const results = parseResults(part.output, extractToolText(part, result) ?? "")
 
-  const isLoading =
-    part.state === "awaiting-input" ||
-    part.state === "input-streaming" ||
-    part.state === "approval-requested"
-  const isError = part.state === "error"
+  const { isLoading, isError } = getToolState(part)
 
   return (
     <div
@@ -126,11 +88,7 @@ export function WebSearchCard({
           : "border-border bg-muted/40"
       )}
     >
-      <button
-        type="button"
-        onClick={() => setExpanded((v) => !v)}
-        className="flex w-full items-center gap-2 text-left"
-      >
+      <Collapsible expanded={expanded} onToggle={() => setExpanded((v) => !v)}>
         <Globe className="size-3.5 shrink-0 text-muted-foreground" />
         <span className="truncate font-medium">
           {m.harness_tool_webSearch({ query: query || "…" })}
@@ -140,13 +98,7 @@ export function WebSearchCard({
             {m.harness_tool_resultCount({ count: results.length })}
           </span>
         )}
-        <ChevronDown
-          className={cn(
-            "size-3 shrink-0 transition-transform",
-            expanded && "rotate-180"
-          )}
-        />
-      </button>
+      </Collapsible>
       {isLoading && (
         <p className="text-muted-foreground">{m.chat_toolCall_pending()}</p>
       )}
@@ -157,18 +109,27 @@ export function WebSearchCard({
       )}
       {expanded && results && results.length > 0 && (
         <ul className="ml-1 flex flex-col gap-1">
-          {results.map((res, i) => (
-            <li key={`${res.url}-${i}`}>
-              <a
-                className="truncate text-primary underline-offset-2 hover:underline"
-                href={res.url}
-                rel="noreferrer"
-                target="_blank"
-              >
-                {res.title}
-              </a>
-            </li>
-          ))}
+          {results.map((res, i) => {
+            // 结果 URL 来自第三方网页元数据（不可信内容源），scheme 白名单校验
+            // 不通过时降级为纯文本，防 javascript: 伪协议 XSS
+            const safeUrl = toSafeHref(res.url)
+            return (
+              <li key={`${res.url}-${i}`}>
+                {safeUrl ? (
+                  <a
+                    className="truncate text-primary underline-offset-2 hover:underline"
+                    href={safeUrl}
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    {res.title}
+                  </a>
+                ) : (
+                  <span className="truncate">{res.title}</span>
+                )}
+              </li>
+            )
+          })}
         </ul>
       )}
     </div>

package/src/components/anyhub/anyhub-app-card.tsx

@@ -22,6 +22,12 @@ import {
   Card,
   CardContent,
 } from "@/components/ui/card"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -45,6 +51,7 @@ export function AnyHubAppCard({ app }: AnyHubAppCardProps) {
   const togglePin = anyHubActions.togglePin
   const uninstallApp = anyHubActions.uninstallApp
   const [showPermissions, setShowPermissions] = useState(false)
+  const [iconBroken, setIconBroken] = useState(false)
 
   const statusColor =
     app.status === "ready"
@@ -53,13 +60,33 @@ export function AnyHubAppCard({ app }: AnyHubAppCardProps) {
         ? "bg-red-500"
         : "bg-yellow-500"
 
+  const openApp = () => {
+    void router.navigate({ to: "/apps/anyhub/$id", params: { id: app.id } })
+  }
+
   return (
     <>
-      <Card className="group cursor-pointer transition-shadow hover:shadow-md" onClick={async () => { await router.navigate({ to: `/apps/anyhub/${app.id}` }) }}>
+      <Card
+        className="group cursor-pointer transition-shadow hover:shadow-md"
+        role="button"
+        tabIndex={0}
+        onClick={openApp}
+        onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault()
+            openApp()
+          }
+        }}
+      >
         <CardContent className="flex items-start gap-3 p-4">
           <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted">
-            {app.iconUrl ? (
-              <img src={app.iconUrl} alt={app.displayName} className="size-6" />
+            {app.iconUrl && !iconBroken ? (
+              <img
+                src={app.iconUrl}
+                alt={app.displayName}
+                className="size-6"
+                onError={() => setIconBroken(true)}
+              />
             ) : (
               <div className="size-6 rounded bg-primary/10" />
             )}
@@ -110,9 +137,9 @@ export function AnyHubAppCard({ app }: AnyHubAppCardProps) {
                 {m.anyhub_permissions()}
               </DropdownMenuItem>
               <DropdownMenuItem
-                onClick={async (e: React.MouseEvent<HTMLDivElement>) => {
+                onClick={(e: React.MouseEvent<HTMLDivElement>) => {
                   e.stopPropagation()
-                  await router.navigate({ to: `/apps/anyhub/${app.id}` })
+                  openApp()
                 }}
               >
                 <RefreshCw className="mr-2 size-4" />
@@ -122,9 +149,15 @@ export function AnyHubAppCard({ app }: AnyHubAppCardProps) {
                 className="text-destructive"
                 onClick={(e: React.MouseEvent<HTMLDivElement>) => {
                   e.stopPropagation()
-                  uninstallApp(app.id).then((ok: boolean) => {
-                    if (ok) toast.success(m.anyhub_uninstalled())
-                  })
+                  void uninstallApp(app.id)
+                    .then((ok: boolean) => {
+                      if (ok) {
+                        toast.success(m.anyhub_uninstalled())
+                      } else {
+                        toast.error(m['anyhub_uninstall-failed']())
+                      }
+                    })
+                    .catch(() => toast.error(m['anyhub_uninstall-failed']()))
                 }}
               >
                 <Trash2 className="mr-2 size-4" />
@@ -134,17 +167,18 @@ export function AnyHubAppCard({ app }: AnyHubAppCardProps) {
           </DropdownMenu>
         </CardContent>
       </Card>
-      {showPermissions && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setShowPermissions(false)}>
-          <div className="w-96 rounded-lg border bg-background shadow-lg" onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}>
-            <AnyHubPermissionPanel
-              appId={app.id}
-              appName={app.displayName}
-              onClose={() => setShowPermissions(false)}
-            />
-          </div>
-        </div>
-      )}
+      <Dialog open={showPermissions} onOpenChange={setShowPermissions}>
+        <DialogContent className="max-w-96 p-0">
+          <DialogHeader className="sr-only">
+            <DialogTitle>{m.anyhub_permissions()}</DialogTitle>
+          </DialogHeader>
+          <AnyHubPermissionPanel
+            appId={app.id}
+            appName={app.displayName}
+            onClose={() => setShowPermissions(false)}
+          />
+        </DialogContent>
+      </Dialog>
     </>
   )
 }