@allbluecn/web-app 0.19.2 → 0.19.4

package/src/components/harness/use-column-resize.ts

@@ -0,0 +1,64 @@
+// 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/>.
+
+import { useCallback, useRef } from "react"
+
+export interface ColumnResizeOptions {
+  /** pointerdown 时读取当前宽度（闭包内取最新值） */
+  getWidth: () => number
+  onChange: (width: number) => void
+  min: number
+  max: number
+  /** 1 = 宽度随鼠标右移增大（左栏），-1 = 随右移减小（右栏）。默认 1 */
+  direction?: 1 | -1
+}
+
+/**
+ * 列宽指针拖拽（setPointerCapture + onMove/onUp）。
+ * workbench-shell 的 sidebar/rail 分隔条与 transcript-width-handle 共用
+ * （审计 🔵：原三处内联同构实现）。
+ */
+export function useColumnResize({
+  getWidth,
+  onChange,
+  min,
+  max,
+  direction = 1,
+}: ColumnResizeOptions) {
+  const dragBase = useRef<{ x: number; w: number } | null>(null)
+
+  return useCallback(
+    (e: React.PointerEvent) => {
+      dragBase.current = { x: e.clientX, w: getWidth() }
+      const el = e.currentTarget as HTMLElement
+      el.setPointerCapture(e.pointerId)
+      const onMove = (ev: PointerEvent) => {
+        if (!dragBase.current) return
+        const next = dragBase.current.w + direction * (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)
+    },
+    [getWidth, onChange, min, max, direction],
+  )
+}

package/src/components/harness/workbench/use-track-columns.ts

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from "react"
 export const SIDEBAR_MIN = 264
 export const SIDEBAR_MAX = 420
 export const RAIL_MIN = 300
+export const RAIL_MAX = 560
 export const CENTER_MIN = 400
 export const SIDEBAR_AUTO_COLLAPSE = 1024
 const SIDEBAR_STORAGE = "allblue.harness.sidebarWidth"
@@ -17,7 +18,7 @@ const DEFAULT_PREFS: ColumnPrefs = { sidebar: 280, rail: 360 }
 
 export function clampColumns(viewport: number, prefs: ColumnPrefs): ColumnsState {
   const sidebar = Math.min(SIDEBAR_MAX, Math.max(SIDEBAR_MIN, prefs.sidebar))
-  const rail = Math.min(560, Math.max(RAIL_MIN, prefs.rail))
+  const rail = Math.min(RAIL_MAX, Math.max(RAIL_MIN, prefs.rail))
   const center = viewport - sidebar - rail
   if (center >= CENTER_MIN) return { sidebar, rail, railVisible: true }
   const centerShrunk = viewport - sidebar
@@ -50,11 +51,19 @@ export function useTrackColumns(railOpen: boolean) {
   const autoCollapse = viewport < SIDEBAR_AUTO_COLLAPSE
   const sidebarCollapsed = manualCollapse ?? autoCollapse
   const setSidebarWidth = useCallback((w: number) => {
-    localStorage.setItem(SIDEBAR_STORAGE, String(w))
+    try {
+      localStorage.setItem(SIDEBAR_STORAGE, String(w))
+    } catch {
+      // 隐私模式/配额异常：丢弃持久化，会话内宽度仍然生效
+    }
     setPrefs((p) => ({ ...p, sidebar: w }))
   }, [])
   const setRailWidth = useCallback((w: number) => {
-    localStorage.setItem(RAIL_STORAGE, String(w))
+    try {
+      localStorage.setItem(RAIL_STORAGE, String(w))
+    } catch {
+      // 同上
+    }
     setPrefs((p) => ({ ...p, rail: w }))
   }, [])
   return {

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

@@ -1,40 +1,34 @@
 
-import { useCallback, useRef, type ReactNode } from "react"
-import { useTrackColumns } from "./use-track-columns"
+import type { ReactNode } from "react"
+import { PanelLeftOpen } from "lucide-react"
+import { m } from "@/paraglide/messages.js"
+import { useColumnResize } from "@/components/harness/use-column-resize"
+import { RAIL_MAX, RAIL_MIN, SIDEBAR_MAX, SIDEBAR_MIN, useTrackColumns } from "./use-track-columns"
 
 export interface WorkbenchShellProps {
   sidebar: ReactNode
   center: ReactNode
   rail: ReactNode | null
-  onSidebarWidthChange?: (w: number) => void
 }
 
 export function WorkbenchShell({ sidebar, center, rail }: WorkbenchShellProps) {
   const railOpen = rail !== null
   const { columns, sidebarCollapsed, setManualCollapse, setSidebarWidth, setRailWidth } =
     useTrackColumns(railOpen)
-  const dragBase = useRef<{ x: number; w: number } | null>(null)
 
-  const startSidebarDrag = useCallback(
-    (e: React.PointerEvent) => {
-      dragBase.current = { x: e.clientX, w: columns.sidebar }
-      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)
-        setSidebarWidth(Math.min(420, Math.max(264, next)))
-      }
-      const onUp = () => {
-        dragBase.current = null
-        el.removeEventListener("pointermove", onMove)
-        el.removeEventListener("pointerup", onUp)
-      }
-      el.addEventListener("pointermove", onMove)
-      el.addEventListener("pointerup", onUp)
-    },
-    [columns.sidebar, setSidebarWidth],
-  )
+  const startSidebarDrag = useColumnResize({
+    getWidth: () => columns.sidebar,
+    onChange: setSidebarWidth,
+    min: SIDEBAR_MIN,
+    max: SIDEBAR_MAX,
+  })
+  const startRailDrag = useColumnResize({
+    getWidth: () => columns.rail,
+    onChange: setRailWidth,
+    min: RAIL_MIN,
+    max: RAIL_MAX,
+    direction: -1,
+  })
 
   return (
     <div className="flex h-full min-h-0 overflow-hidden">
@@ -51,6 +45,7 @@ export function WorkbenchShell({ sidebar, center, rail }: WorkbenchShellProps) {
           onPointerDown={startSidebarDrag}
           role="separator"
           aria-orientation="vertical"
+          aria-label={m.harness_workbench_resizeSidebar()}
         />
       )}
       <main className="flex min-w-0 flex-1 flex-col overflow-hidden">{center}</main>
@@ -58,25 +53,10 @@ export function WorkbenchShell({ sidebar, center, rail }: WorkbenchShellProps) {
         <>
           <div
             className="z-10 w-1 shrink-0 cursor-col-resize bg-transparent hover:bg-border"
-            onPointerDown={(e) => {
-              dragBase.current = { x: e.clientX, w: columns.rail }
-              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)
-                setRailWidth(Math.min(560, Math.max(300, next)))
-              }
-              const onUp = () => {
-                dragBase.current = null
-                el.removeEventListener("pointermove", onMove)
-                el.removeEventListener("pointerup", onUp)
-              }
-              el.addEventListener("pointermove", onMove)
-              el.addEventListener("pointerup", onUp)
-            }}
+            onPointerDown={startRailDrag}
             role="separator"
             aria-orientation="vertical"
+            aria-label={m.harness_workbench_resizeRail()}
           />
           <aside
             className="shrink-0 border-l"
@@ -89,11 +69,12 @@ export function WorkbenchShell({ sidebar, center, rail }: WorkbenchShellProps) {
       )}
       {sidebarCollapsed && (
         <button
-          aria-label="展开侧栏"
-          className="absolute bottom-4 left-14 z-20"
+          type="button"
+          aria-label={m.harness_workbench_expandSidebar()}
+          className="absolute bottom-4 left-14 z-20 rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
           onClick={() => setManualCollapse(false)}
         >
-          {/* 展开图标由任务后续接入 */}
+          <PanelLeftOpen className="size-4" />
         </button>
       )}
     </div>

package/src/components/hextaui/ai-citations.tsx

@@ -207,12 +207,26 @@ interface SourcePreviewProps {
   onSourceClick?: (source: CitationSource) => void;
 }
 
+// 仅放行 http(s) 链接：citation url 源自 AI 引用数据（LLM 产出/外部抓取），
+// 组件自身设防 javascript:/data: scheme 注入（不依赖运行环境的默认拦截）
+function safeHrefOf(url: string): string | null {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "http:" || parsed.protocol === "https:"
+      ? parsed.toString()
+      : null;
+  } catch {
+    return null;
+  }
+}
+
 function SourcePreview({
   source,
   citationNumber,
   onSourceClick,
 }: SourcePreviewProps) {
   const [isSnippetOpen, setIsSnippetOpen] = useState(false);
+  const safeHref = safeHrefOf(source.url);
   const handleClick = useCallback(() => {
     onSourceClick?.(source);
   }, [onSourceClick, source]);
@@ -273,22 +287,31 @@ function SourcePreview({
                 />
               </CollapsibleTrigger>
             )}
-            <a
-              aria-label={`Open ${source.title} in new tab`}
-              className={cn(
-                "flex shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
-                "min-h-[44px] min-w-[44px] sm:min-h-[24px] sm:min-w-[24px]",
-                "hover:bg-background hover:text-foreground",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-                "[-webkit-tap-highlight-color:transparent] active:bg-background/80"
-              )}
-              href={source.url}
-              onClick={(e) => e.stopPropagation()}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <ExternalLink aria-hidden="true" className="size-3.5" />
-            </a>
+            {safeHref ? (
+              <a
+                aria-label={`Open ${source.title} in new tab`}
+                className={cn(
+                  "flex shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
+                  "min-h-[44px] min-w-[44px] sm:min-h-[24px] sm:min-w-[24px]",
+                  "hover:bg-background hover:text-foreground",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                  "[-webkit-tap-highlight-color:transparent] active:bg-background/80"
+                )}
+                href={safeHref}
+                onClick={(e) => e.stopPropagation()}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <ExternalLink aria-hidden="true" className="size-3.5" />
+              </a>
+            ) : (
+              <span
+                aria-hidden="true"
+                className="flex size-6 shrink-0 items-center justify-center text-muted-foreground/40 sm:size-3.5"
+              >
+                <ExternalLink className="size-3.5" />
+              </span>
+            )}
           </div>
         </div>
         {source.snippet && (

package/src/components/hextaui/ai-file-upload.tsx

@@ -339,6 +339,10 @@ function FileUploadEmptyState({ maxFiles }: FileUploadEmptyStateProps) {
   );
 }
 
+// 错误按文件唯一标识关联（name+size+lastModified）：同名文件互相覆盖旧缺陷
+const fileErrorKey = (file: File): string =>
+  `${file.name}:${file.size}:${file.lastModified}`;
+
 export default function AIFileUpload({
   onFilesSelected,
   onFileRemove,
@@ -390,40 +394,47 @@ export default function AIFileUpload({
       fileArray.forEach((file) => {
         const error = validateFile(file);
         if (error) {
-          newErrors[file.name] = error;
+          newErrors[fileErrorKey(file)] = error;
         } else {
           validFiles.push(file);
         }
       });
 
-      if (Object.keys(newErrors).length > 0) {
-        setErrors(newErrors);
-        if (errorTimeoutRef.current) {
-          clearTimeout(errorTimeoutRef.current);
-        }
-        errorTimeoutRef.current = setTimeout(() => {
-          setErrors((prev) => {
-            const next = { ...prev };
-            delete next._general;
-            return next;
-          });
-        }, 5000);
-      }
-
       if (validFiles.length > 0) {
         const remainingSlots = maxFiles - uploadedFiles.length;
         const filesToAdd = validFiles.slice(0, remainingSlots);
 
         if (filesToAdd.length < validFiles.length) {
           const skipped = validFiles.length - filesToAdd.length;
-          newErrors["_general"] =
+          newErrors._general =
             `${skipped} file${skipped !== 1 ? "s" : ""} skipped. Maximum ${maxFiles} files allowed.`;
-          setErrors(newErrors);
         }
 
         onFilesSelected?.(filesToAdd);
       }
 
+      // 函数式合并：不覆盖其他来源的既有错误；本次添加成功的文件清掉旧错误
+      setErrors((prev) => {
+        const next = { ...prev };
+        for (const file of validFiles) delete next[fileErrorKey(file)];
+        return { ...next, ...newErrors };
+      });
+
+      // 定时器统一清理本次设置的 keys（此前文件级错误永不自动消失）
+      const errorKeys = Object.keys(newErrors);
+      if (errorKeys.length > 0) {
+        if (errorTimeoutRef.current) {
+          clearTimeout(errorTimeoutRef.current);
+        }
+        errorTimeoutRef.current = setTimeout(() => {
+          setErrors((prev) => {
+            const next = { ...prev };
+            for (const key of errorKeys) delete next[key];
+            return next;
+          });
+        }, 5000);
+      }
+
       if (fileInputRef.current) {
         fileInputRef.current.value = "";
       }
@@ -453,9 +464,21 @@ export default function AIFileUpload({
       setIsDragging(false);
 
       if (uploadedFiles.length >= maxFiles) {
-        setErrors({
+        // 函数式合并：不覆盖刚设置的文件级错误，且同样纳入 5s 自动清理
+        setErrors((prev) => ({
+          ...prev,
           _general: `Maximum ${maxFiles} files allowed`,
-        });
+        }));
+        if (errorTimeoutRef.current) {
+          clearTimeout(errorTimeoutRef.current);
+        }
+        errorTimeoutRef.current = setTimeout(() => {
+          setErrors((prev) => {
+            const next = { ...prev };
+            delete next._general;
+            return next;
+          });
+        }, 5000);
         return;
       }
 
@@ -552,7 +575,7 @@ export default function AIFileUpload({
               <div className="flex flex-col gap-2" role="list">
                 {uploadedFiles.map((uploadedFile) => (
                   <FileUploadItem
-                    error={errors[uploadedFile.file.name]}
+                    error={errors[fileErrorKey(uploadedFile.file)]}
                     key={uploadedFile.id}
                     onRemove={onFileRemove}
                     processingStatus={processingStatus}

package/src/components/hextaui/ai-message.tsx

@@ -289,6 +289,16 @@ function HighlightedCodeBlock({
     };
   }, [code, lang, theme, skipHighlighting]);
 
+  // DOMParser + domNodeToReact 在渲染期执行：highlightedCode 未变时缓存解析
+  // 与 React 树构建（此前每次渲染重复解析）。hooks 恒定调用，置于条件 return 前
+  const renderedCode = useMemo(() => {
+    if (!highlightedCode) return null;
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(highlightedCode, "text/html");
+    const pre = doc.body.querySelector("pre");
+    return pre ? domNodeToReact(pre) : null;
+  }, [highlightedCode]);
+
   if (skipHighlighting || error) {
     return <CodeBlockFallback code={code} filename={filename} />;
   }
@@ -297,22 +307,14 @@ function HighlightedCodeBlock({
     return <CodeBlockSkeleton filename={filename} />;
   }
 
-  if (!highlightedCode) {
-    return <CodeBlockFallback code={code} filename={filename} />;
-  }
-
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(highlightedCode, "text/html");
-  const pre = doc.body.querySelector("pre");
-
-  if (!pre) {
+  if (!renderedCode) {
     return <CodeBlockFallback code={code} filename={filename} />;
   }
 
   return (
     <div className="rounded-lg border border-border bg-background">
       <CodeBlockHeader filename={filename} />
-      <div className="overflow-x-auto">{domNodeToReact(pre)}</div>
+      <div className="overflow-x-auto">{renderedCode}</div>
     </div>
   );
 }
@@ -494,7 +496,7 @@ function MessageActions({
             <span>{copied ? "Copied!" : "Copy"}</span>
             <DropdownMenuShortcut>
               {typeof navigator !== "undefined" &&
-              navigator.platform.includes("Mac")
+              navigator.userAgent.includes("Mac")
                 ? "⌘"
                 : "Ctrl"}
               C
@@ -553,18 +555,35 @@ export default function AIMessage({
   const messageRef = useRef<HTMLDivElement>(null);
   const messageId = useId();
   const displayedContent = useStreamingText(content, isStreaming);
+  // 复制反馈定时器：卸载时清理（卸载后 setState 残留）
+  const copyFeedbackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (copyFeedbackTimerRef.current) {
+        clearTimeout(copyFeedbackTimerRef.current);
+      }
+    },
+    []
+  );
 
   const handleCopy = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(content);
       setCopied(true);
       setCopyError(false);
-      setTimeout(() => {
+      if (copyFeedbackTimerRef.current) {
+        clearTimeout(copyFeedbackTimerRef.current);
+      }
+      copyFeedbackTimerRef.current = setTimeout(() => {
         setCopied(false);
       }, COPY_FEEDBACK_DURATION);
     } catch {
       setCopyError(true);
-      setTimeout(() => {
+      if (copyFeedbackTimerRef.current) {
+        clearTimeout(copyFeedbackTimerRef.current);
+      }
+      copyFeedbackTimerRef.current = setTimeout(() => {
         setCopyError(false);
       }, COPY_FEEDBACK_DURATION);
     }

package/src/components/hextaui/ai-thinking.tsx

@@ -18,97 +18,6 @@ const DIMENSIONS = {
   FADE_HEIGHT: "80px",
 } as const;
 
-const SHIMMER_CONFIG = {
-  DURATION: "5s",
-  GRADIENT:
-    "linear-gradient(110deg, #404040 35%, #fff 50%, #404040 75%, #404040)",
-  BACKGROUND_SIZE: "200% 100%",
-} as const;
-
-const THINKING_CONTENT = `Okay, first I need to understand what HextaUI is. It seems to be a UI library or framework, likely for web development. I should check the web results for any mentions of HextaUI.
-
-Looking at the web results, I see that HextaUI is mentioned in several contexts. It's described as a collection of modern, responsive, and customizable UI components for Next.js. It seems to be designed to help developers build websites more efficiently.
-
-I should look for more specific details. The results mention that HextaUI provides components that can be copied, adapted, and personalized. It also mentions that it's open-source and has a community of contributors.
-
-I should also check if there are any specific features or benefits mentioned. The results talk about the components being responsive and customizable, which are important for modern web development. It also mentions that the components are designed to be production-ready.
-
-I should consider if there are any drawbacks or limitations mentioned. The results don't seem to mention any significant drawbacks, but I should keep in mind that any library or framework will have its own set of trade-offs.
-
-I should also consider the credibility of the sources. The results include mentions from GitHub, Product Hunt, and other development-related websites, which are generally reliable sources for information about software libraries.
-
-Based on the information from the web results, I can conclude that HextaUI is a UI component library for Next.js that provides modern, responsive, and customizable components for building websites. It's open-source and has a community of contributors.
-
-I should also consider if there are any related posts on X that might provide additional context or opinions. The posts on X mention HextaUI v2 being released, with features like a complete design system, primitive components, and ready-made blocks. This suggests that HextaUI is actively maintained and updated.
-
-I should consider if there are any specific use cases or examples mentioned. The web results mention that HextaUI components can be used to build stunning websites effortlessly, and that they are suitable for production applications.
-
-I should also consider if there are any comparisons to other similar libraries or frameworks. The results don't mention any direct comparisons, but I can infer that HextaUI is similar to other UI component libraries like Shadcn/UI, which is mentioned in one of the results.
-
-Based on the information from the web results and the posts on X, I can conclude that HextaUI is a UI component library for Next.js that provides modern, responsive, and customizable components for building websites. It's open-source, actively maintained, and has a community of contributors.
-
-I should consider if there are any specific instructions or guidelines for using HextaUI. The web results mention that components can be copied and pasted into projects, and that there is a CLI tool for installing components.
-
-I should also consider if there are any specific requirements or dependencies mentioned. The web results mention that HextaUI is designed for Next.js, so it likely requires a Next.js project to use.
-
-Based on the information from the web results and the posts on X, I can conclude that HextaUI is a UI component library for Next.js that provides modern, responsive, and customizable components for building websites. It's open-source, actively maintained, and has a community of contributors. Components can be copied and pasted into projects, and there is a CLI tool for installing components.
-
-I should consider if there are any specific examples or demos available. The web results mention that there is a website for HextaUI, which likely includes examples and documentation.
-
-I should also consider if there are any specific licensing or usage terms mentioned. The web results mention that HextaUI is open-source, but I should check the specific license to understand the terms of use.
-
-Based on the information from the web results and the posts on X, I can conclude that HextaUI is a UI component library for Next.js that provides modern, responsive, and customizable components for building websites. It's open-source, actively maintained, and has a community of contributors. Components can be copied and pasted into projects, and there is a CLI tool for installing components. The library is designed to be production-ready and supports features like dark mode.
-
-I should consider if there are any specific installation or setup instructions mentioned. The web results mention that there is a CLI tool for installing components, and that components can be copied and pasted into projects.
-
-I should also consider if there are any specific customization options mentioned. The web results mention that components are customizable through props and Tailwind CSS classes.
-
-Based on the information from the web results and the posts on X, I can conclude that HextaUI is a UI component library for Next.js that provides modern, responsive, and customizable components for building websites. It's open-source, actively maintained, and has a community of contributors. Components can be copied and pasted into projects, and there is a CLI tool for installing components. The library is designed to be production-ready and supports features like dark mode. Components are customizable through props and Tailwind CSS classes.
-
-I should consider if there are any specific community or support resources mentioned. The web results mention that there is a GitHub repository and a community for support and discussions.
-
-I should also consider if there are any specific contribution guidelines mentioned. The web results mention that contributions are welcome and that there are guidelines for contributing.
-
-Based on the information from the web results and the posts on X, I can conclude that HextaUI is a UI component library for Next.js that provides modern, responsive, and customizable components for building websites. It's open-source, actively maintained, and has a community of contributors. Components can be copied and pasted into projects, and there is a CLI tool for installing components. The library is designed to be production-ready and supports features like dark mode. Components are customizable through props and Tailwind CSS classes. There is a GitHub repository and a community for support and discussions, and contributions are welcome.
-
-I should consider if there are any specific version or release information mentioned. The posts on X mention that HextaUI v2 has been released, with features like a complete design system, primitive components, and ready-made blocks.
-
-I should also consider if there are any specific future plans or roadmap mentioned. The web results mention that there is a roadmap for upcoming features and improvements.
-
-Based on the information from the web results and the posts on X, I can conclude that HextaUI is a UI component library for Next.js that provides modern, responsive, and customizable components for building websites. It's open-source, actively maintained, and has a community of contributors. Components can be copied and pasted into projects, and there is a CLI tool for installing components. The library is designed to be production-ready and supports features like dark mode. Components are customizable through props and Tailwind CSS classes. There is a GitHub repository and a community for support and discussions, and contributions are welcome. The latest version, HextaUI v2, includes a complete design system, primitive components, and ready-made blocks, and there is a roadmap for future features and improvements.
-
-I think I have enough information to provide a comprehensive answer.
-
-HextaUI is a UI component library specifically designed for Next.js applications. It provides a collection of modern, responsive, and customizable UI components that developers can easily copy, adapt, and personalize to build professional and visually appealing web interfaces. The library is open-source, actively maintained, and supported by a community of contributors, making it a reliable choice for developers looking to streamline their development process.
-
-Key Features and Benefits:
-
-Component-Based: HextaUI offers a wide range of pre-built components, such as buttons, forms, and navigation elements, which can be directly copied and pasted into your Next.js project. This allows for rapid prototyping and development.
-
-Customization: Components are highly adaptable through props and Tailwind CSS classes, enabling developers to modify styles and behavior without altering the underlying code. This flexibility ensures that the components can fit the unique design requirements of any project.
-
-Responsive and Production-Ready: The components are designed to be fully responsive, ensuring compatibility across devices. They are also tested to be production-ready, making them suitable for real-world applications.
-
-CLI Tool: HextaUI includes a CLI tool that simplifies the installation of components. Developers can use commands like npx hexta-ui add button to quickly add components to their projects.
-
-Dark Mode Support: The library includes built-in support for dark mode, enhancing accessibility and user experience.
-
-Community and Support: HextaUI has an active community on GitHub, where developers can report bugs, request features, and contribute to the project. There are also contribution guidelines for those interested in improving the library.
-
-Recent Updates:
-
-HextaUI v2 was recently released, introducing several new features: A complete design system, Over 40 primitive components, Ready-made blocks for faster development.
-
-The library is actively maintained, with a roadmap for future features and improvements, ensuring it stays up-to-date with modern development practices.
-
-Usage and Installation:
-
-To use HextaUI, you need a Next.js project. Components can be installed via the CLI or by copying and pasting code from the HextaUI website, which includes examples and documentation. The library is free and open-source, making it accessible to developers of all levels.
-
-Conclusion:
-
-HextaUI is an excellent choice for developers seeking to build modern, responsive, and customizable web interfaces with minimal effort. Its component-based approach, combined with strong community support and regular updates, makes it a valuable tool for accelerating the development of Next.js applications.`;
-
 function useTimer() {
   const [timer, setTimer] = useState(0);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
@@ -254,28 +163,15 @@ function ContentCard({ contentRef, content }: ContentCardProps) {
   );
 }
 
-function ShimmerStyles() {
-  return (
-    <style>{`
-      @keyframes shimmer {
-        0% {
-          background-position: 200% 0;
-        }
-        100% {
-          background-position: -200% 0;
-        }
-      }
-
-      @media (prefers-reduced-motion: reduce) {
-        [style*="shimmer"] {
-          animation: none;
-        }
-      }
-    `}</style>
-  );
-}
-
-export default function AIThinking({ className }: { className?: string }) {
+export default function AIThinking({
+  className,
+  content = "",
+}: {
+  className?: string;
+  /** 真实思考流内容由调用方注入；不传展示空白卡片（registry 演示假文案已删，
+   *  直接接入生产不再向用户展示伪造的 AI 思考过程） */
+  content?: string;
+}) {
   const contentRef = useRef<HTMLDivElement>(null);
   const timer = useTimer();
   useAutoScroll(contentRef);
@@ -283,8 +179,7 @@ export default function AIThinking({ className }: { className?: string }) {
   return (
     <div className={cn("flex max-w-xl flex-col gap-4", className)}>
       <ThinkingHeader timer={timer} />
-      <ContentCard content={THINKING_CONTENT} contentRef={contentRef} />
-      <ShimmerStyles />
+      <ContentCard content={content} contentRef={contentRef} />
     </div>
   );
 }

package/src/components/hextaui/command-menu.tsx

@@ -125,12 +125,18 @@ const CommandMenuContent = React.forwardRef<
   ) => {
     const [value, setValue] = React.useState("");
     const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const contentRef = React.useRef<HTMLDivElement | null>(null);
 
     React.useEffect(() => {
       const handleKeyDown = (e: KeyboardEvent) => {
-        if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter") {
-          e.preventDefault();
+        if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Enter") {
+          return;
         }
+        // 仅拦截菜单自身导航：无条件 preventDefault 会吞掉整个文档的
+        // Enter/方向键默认行为（弹窗外表单提交、输入框光标移动失效）
+        const target = e.target as Node | null;
+        if (!target || !contentRef.current?.contains(target)) return;
+        e.preventDefault();
       };
       document.addEventListener("keydown", handleKeyDown);
       return () => document.removeEventListener("keydown", handleKeyDown);
@@ -148,6 +154,7 @@ const CommandMenuContent = React.forwardRef<
               "motion-safe:duration-200 motion-reduce:animate-none",
               className
             )}
+            ref={contentRef}
           >
             <CommandMenuProvider
               scrollHideDelay={scrollHideDelay}