Merge branch 'master' of http://192.168.0.200/knowledge-base-bj/deerflow-server into dhk-1

解决 artifact 预览组件冲突：mermaid 渲染(dhk-1) 与 markdown 锚点跳转(master) 取并集；package-lock.json 按 master 删除(项目用 pnpm)。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend-web/src/components/html-preview-frame.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+
+import { injectInPageAnchorHandler } from "@/core/utils/markdown";
+
+/**
+ * Sandboxed preview of a generated HTML document.
+ *
+ * Renders via a `blob:` URL rather than `srcDoc`. A srcDoc document's base URL
+ * is `about:srcdoc`, so clicking an in-page anchor (`<a href="#section">`)
+ * navigates the frame to `about:blank#section` and BLANKS it. A `blob:` URL is
+ * a real document URL, so fragment links scroll within the frame as expected —
+ * all without enabling scripts (the sandbox stays script-free for security; the
+ * server already sanitizes script vectors and this is defense-in-depth).
+ *
+ * The `charset=utf-8` on the blob type is required: a blob: URL whose
+ * Content-Type omits the charset is decoded with the OS default (GBK/Latin-1 on
+ * Chinese Windows), garbling CJK text when the HTML lacks a `<meta charset>`.
+ */
+export function HtmlPreviewFrame({
+  html,
+  className = "h-[70vh] w-full rounded-md border bg-white",
+}: {
+  html: string;
+  className?: string;
+}) {
+  const [url, setUrl] = useState<string>();
+
+  useEffect(() => {
+    const blob = new Blob([injectInPageAnchorHandler(html ?? "")], {
+      type: "text/html;charset=utf-8",
+    });
+    const objectUrl = URL.createObjectURL(blob);
+    setUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [html]);
+
+  return (
+    <iframe
+      title="HTML 预览"
+      sandbox="allow-scripts allow-forms"
+      src={url}
+      className={className}
+    />
+  );
+}

frontend-web/src/components/page-sidebar.tsx

@@ -8,6 +8,7 @@ import {
   Folder,
   FolderOpen,
   Settings,
+  Trophy,
   User,
   Wrench,
 } from "lucide-react";
@@ -260,6 +261,14 @@ export function PageSidebar({
                 <Wrench className="size-4" />
                 {t.settings.sections.tools}
               </DropdownMenuItem>
+              {isAdmin && (
+                <DropdownMenuItem
+                  onClick={() => navigate("/page/strategy/admin/user-leaderboard")}
+                >
+                  <Trophy className="size-4" />
+                  用户排行榜
+                </DropdownMenuItem>
+              )}
               <DropdownMenuItem onClick={() => openSettings("account")}>
                 <User className="size-4" />
                 个人信息

frontend-web/src/components/ui/pagination.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+/** Compute the page-number window to render, inserting -1 sentinels for gaps.
+ * Always shows first/last and a window around the current page. */
+function buildPageItems(current: number, totalPages: number): number[] {
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const items = new Set<number>([1, totalPages, current]);
+  for (const d of [1, 2]) {
+    if (current - d >= 1) items.add(current - d);
+    if (current + d <= totalPages) items.add(current + d);
+  }
+  const sorted = [...items].sort((a, b) => a - b);
+  const out: number[] = [];
+  let prev = 0;
+  for (const p of sorted) {
+    if (prev && p - prev > 1) out.push(-1); // gap sentinel
+    out.push(p);
+    prev = p;
+  }
+  return out;
+}
+
+export interface PaginationProps {
+  page: number;
+  pageSize: number;
+  total: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+}
+
+/** Controlled, compact pagination control. Renders nothing when a single page. */
+export function Pagination({
+  page,
+  pageSize,
+  total,
+  onPageChange,
+  className,
+}: PaginationProps) {
+  const totalPages = Math.max(1, Math.ceil(total / Math.max(pageSize, 1)));
+  if (totalPages <= 1) return null;
+
+  const items = buildPageItems(page, totalPages);
+
+  return (
+    <nav
+      className={cn("flex items-center justify-center gap-1", className)}
+      aria-label="分页"
+    >
+      <Button
+        variant="outline"
+        size="icon-sm"
+        disabled={page <= 1}
+        onClick={() => onPageChange(page - 1)}
+        aria-label="上一页"
+      >
+        <ChevronLeftIcon className="h-4 w-4" />
+      </Button>
+      {items.map((p, idx) =>
+        p === -1 ? (
+          <span
+            key={`gap-${idx}`}
+            className="text-muted-foreground px-1 text-sm select-none"
+          >
+            …
+          </span>
+        ) : (
+          <Button
+            key={p}
+            variant={p === page ? "default" : "outline"}
+            size="icon-sm"
+            onClick={() => onPageChange(p)}
+            aria-current={p === page ? "page" : undefined}
+          >
+            {p}
+          </Button>
+        ),
+      )}
+      <Button
+        variant="outline"
+        size="icon-sm"
+        disabled={page >= totalPages}
+        onClick={() => onPageChange(page + 1)}
+        aria-label="下一页"
+      >
+        <ChevronRightIcon className="h-4 w-4" />
+      </Button>
+    </nav>
+  );
+}

frontend-web/src/components/ui/resizable.tsx

@@ -22,10 +22,31 @@ function ResizablePanelGroup({
   );
 }
 
+// react-resizable-panels v4 changed size semantics: a bare *number* is now
+// interpreted as PIXELS, while a unit-less *string* is a percentage. Every call
+// site in this app passes sizes as percentages (the v2/v3 convention), so a
+// value like `maxSize={60}` would otherwise pin a panel to 60px and freeze the
+// layout/drag. Normalize numbers to "<n>%" to preserve the intended percentage.
+const asPercent = (v: number | string | undefined) =>
+  typeof v === "number" ? `${v}%` : v;
+
 function ResizablePanel({
+  defaultSize,
+  minSize,
+  maxSize,
+  collapsedSize,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+  return (
+    <ResizablePrimitive.Panel
+      data-slot="resizable-panel"
+      defaultSize={asPercent(defaultSize)}
+      minSize={asPercent(minSize)}
+      maxSize={asPercent(maxSize)}
+      collapsedSize={asPercent(collapsedSize)}
+      {...props}
+    />
+  );
 }
 
 function ResizableHandle({
@@ -39,14 +60,19 @@ function ResizableHandle({
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        // Thin visible divider, but a generous invisible hit area on both sides
+        // (after:w-4 → 16px) so the handle is easy to grab and drag. Hovering /
+        // dragging tints the divider so it's obvious it's interactive.
+        "bg-border hover:bg-primary/60 active:bg-primary relative flex w-px items-center justify-center transition-colors",
+        "after:absolute after:inset-y-0 after:left-1/2 after:w-4 after:-translate-x-1/2 after:cursor-col-resize",
+        "focus-visible:ring-ring focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden",
         className,
       )}
       {...props}
     >
       {withHandle && (
-        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
-          <GripVerticalIcon className="size-2.5" />
+        <div className="bg-border z-10 flex h-8 w-4 items-center justify-center rounded-sm border shadow-sm">
+          <GripVerticalIcon className="size-3.5" />
         </div>
       )}
     </ResizablePrimitive.Separator>

frontend-web/src/components/workspace/admin/admin-user-hub.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Loader2, MessageSquareIcon, SearchIcon, UserIcon } from "lucide-react";
+import { ArrowDownWideNarrow, Loader2, MessageSquareIcon, SearchIcon, UserIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 
 import { Badge } from "@/components/ui/badge";
@@ -83,6 +83,8 @@ function UserInfoPanel({ user }: { user: UserListItem }) {
             <Badge variant="secondary">普通用户</Badge>
           )}
         </dd>
+        <dt className="text-muted-foreground font-medium">问答次数</dt>
+        <dd className="tabular-nums">{user.qa_count}</dd>
         <dt className="text-muted-foreground font-medium">Skills</dt>
         <dd className="tabular-nums">{user.skill_count}</dd>
         <dt className="text-muted-foreground font-medium">Agents</dt>
@@ -300,21 +302,29 @@ export function AdminUserHub() {
   const { data: users, isLoading: usersLoading } = useAllUsers(true);
   const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
   const [userQuery, setUserQuery] = useState("");
-  const [activeTab, setActiveTab] = useState<"info" | "audit" | "memory">("info");
+  // 活动审计 放到前面 → 默认进入审计标签页。
+  const [activeTab, setActiveTab] = useState<"audit" | "info" | "memory">("audit");
+  // 是否按问答次数（降序）排序用户列表。
+  const [sortByQa, setSortByQa] = useState(false);
 
   const filteredUsers = useMemo(() => {
     const needle = userQuery.trim().toLowerCase();
-    const list = users ?? [];
-    return needle
-      ? list.filter((u) => u.email.toLowerCase().includes(needle))
-      : list;
-  }, [users, userQuery]);
+    let list = users ?? [];
+    if (needle) {
+      list = list.filter((u) => u.email.toLowerCase().includes(needle));
+    }
+    if (sortByQa) {
+      // Copy before sorting so we never mutate the query cache array.
+      list = [...list].sort((a, b) => (b.qa_count ?? 0) - (a.qa_count ?? 0));
+    }
+    return list;
+  }, [users, userQuery, sortByQa]);
 
   const selectedUser = users?.find((u) => u.id === selectedUserId) ?? null;
 
   function selectUser(id: string) {
     setSelectedUserId(id);
-    setActiveTab("info");
+    setActiveTab("audit");
   }
 
   return (
@@ -338,6 +348,20 @@ export function AdminUserHub() {
               className="pl-8"
             />
           </div>
+          <button
+            type="button"
+            onClick={() => setSortByQa((v) => !v)}
+            className={cn(
+              "mx-2 mb-1 flex items-center justify-center gap-1 rounded-md border px-2 py-1 text-xs",
+              sortByQa
+                ? "border-primary/40 bg-primary/5 text-primary"
+                : "text-muted-foreground hover:bg-muted",
+            )}
+            title="按问答次数从高到低排序"
+          >
+            <ArrowDownWideNarrow className="size-3.5" />
+            {sortByQa ? "按问答次数排序中" : "按问答次数排序"}
+          </button>
           <ScrollArea className="min-h-0 flex-1">
             {usersLoading && (
               <div className="text-muted-foreground flex items-center justify-center gap-2 py-8 text-sm">
@@ -369,6 +393,12 @@ export function AdminUserHub() {
                       管理员
                     </Badge>
                   )}
+                  <span
+                    className="text-muted-foreground shrink-0 tabular-nums text-xs"
+                    title="问答次数"
+                  >
+                    {u.qa_count ?? 0}
+                  </span>
                 </button>
               ))}
             </div>
@@ -388,8 +418,8 @@ export function AdminUserHub() {
           >
             <div className="border-b px-4 pt-3 shrink-0">
               <TabsList variant="line">
-                <TabsTrigger value="info">用户信息</TabsTrigger>
                 <TabsTrigger value="audit">活动审计</TabsTrigger>
+                <TabsTrigger value="info">用户信息</TabsTrigger>
                 <TabsTrigger value="memory">记忆管理</TabsTrigger>
               </TabsList>
             </div>

frontend-web/src/components/workspace/agents/agent-card.tsx

@@ -6,8 +6,9 @@ import {
   GlobeIcon,
   InfoIcon,
   LockIcon,
-  MessageSquareIcon,
-  ShieldIcon,
+  MessageSquareIcon,
+  PinIcon,
+  ShieldIcon,
   SparklesIcon,
   SquarePenIcon,
   StarIcon,
@@ -15,7 +16,14 @@ import {
   Trash2Icon,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { toast } from "sonner";
 
 import { Badge } from "@/components/ui/badge";
@@ -46,10 +54,11 @@ import {
   useAgent,
   useCreateAgent,
   useDeleteAgent,
-  useSetAgentFeatured,
-  useSetAgentPrivate,
-  useToggleAgentFavorite,
-  useUpdateAgent,
+  useSetAgentFeatured,
+  useSetAgentPrivate,
+  useToggleAgentFavorite,
+  useToggleAgentPin,
+  useUpdateAgent,
 } from "@/core/agents";
 import { getAgent } from "@/core/agents/api";
 import type { Agent } from "@/core/agents";
@@ -63,6 +72,115 @@ interface AgentCardProps {
   agent: Agent;
 }
 
+interface BadgeItem {
+  key: string;
+  node: ReactNode;
+}
+
+// Minimum number of skill/tool badges to always render before collapsing the
+// remainder into the "+N" chip.
+const MIN_VISIBLE_BADGES = 3;
+
+/** Render skill/tool-group badges clamped to at most two rows. Overflow is
+ * collapsed into a clickable "+N" chip that opens a dialog listing the full
+ * badge set (the visible rows stay as-is — only the chip is interactive).
+ *
+ * Badge widths are variable, so the cutoff is measured rather than assumed: an
+ * off-screen mirror of the full badge set is laid out at the real container
+ * width, and we keep only the badges that land within the first two rows
+ * (reserving one slot for the "+N" chip). A ResizeObserver recomputes when the
+ * responsive grid changes the card width.
+ */
+function ClampedBadgeRow({ items }: { items: BadgeItem[] }) {
+  const measureRef = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(items.length);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const sig = items.map((i) => i.key).join("|");
+
+  useLayoutEffect(() => {
+    const el = measureRef.current;
+    if (!el) return;
+    const compute = () => {
+      const kids = Array.from(el.children) as HTMLElement[];
+      if (kids.length === 0) {
+        setVisible(0);
+        return;
+      }
+      const top0 = kids[0].offsetTop;
+      const rowH = kids[0].offsetHeight;
+      // +2px fudge so the second row's badges (which may sit a hair lower due
+      // to line-box rounding) are not falsely treated as a third row.
+      const maxBottom = top0 + rowH * 2 + 2;
+      let count = 0;
+      for (const k of kids) {
+        if (k.offsetTop + k.offsetHeight <= maxBottom) count += 1;
+        else break;
+      }
+      // Reserve one slot for the "+N" chip when anything overflows so the chip
+      // itself never spills onto a third row.
+      if (count < kids.length && count > 0) count -= 1;
+      // Always surface a few badges before collapsing into "+N", even when the
+      // card is narrow enough that two rows barely fit anything (otherwise a
+      // skinny column could show just "+N" with no skills at all). Keeps at
+      // least one badge hidden so the chip still makes sense.
+      if (count < kids.length) {
+        count = Math.max(count, Math.min(MIN_VISIBLE_BADGES, kids.length - 1));
+      }
+      setVisible(count);
+    };
+    compute();
+    const ro = new ResizeObserver(compute);
+    ro.observe(el);
+    return () => ro.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sig]);
+
+  const hidden = items.length - visible;
+  const showChip = hidden > 0;
+  const shown = items.slice(0, visible);
+
+  return (
+    <div className="relative">
+      {/* Off-screen full-width mirror used only for measuring row breaks. */}
+      <div
+        ref={measureRef}
+        aria-hidden
+        className="pointer-events-none invisible absolute inset-x-0 top-0 flex flex-wrap gap-1"
+      >
+        {items.map((i) => i.node)}
+      </div>
+      <div className="flex flex-wrap gap-1">
+        {shown.map((i) => i.node)}
+        {showChip && (
+          <Badge
+            variant="secondary"
+            className="hover:bg-secondary/70 cursor-pointer text-xs"
+            title="查看全部"
+            onClick={(e) => {
+              e.stopPropagation();
+              setDialogOpen(true);
+            }}
+          >
+            +{hidden}
+          </Badge>
+        )}
+      </div>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>全部技能与工具</DialogTitle>
+            <DialogDescription>共 {items.length} 项</DialogDescription>
+          </DialogHeader>
+          <div className="flex max-h-[60vh] flex-wrap gap-1.5 overflow-y-auto py-1">
+            {items.map((i) => i.node)}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
 export function AgentCard({ agent }: AgentCardProps) {
   const { t } = useI18n();
   const router = useRouter();
@@ -70,8 +188,9 @@ export function AgentCard({ agent }: AgentCardProps) {
   const updateAgent = useUpdateAgent();
   const createAgent = useCreateAgent();
   const setFeatured = useSetAgentFeatured();
-  const setPrivate = useSetAgentPrivate();
-  const toggleFavorite = useToggleAgentFavorite();
+  const setPrivate = useSetAgentPrivate();
+  const toggleFavorite = useToggleAgentFavorite();
+  const togglePin = useToggleAgentPin();
   const { skills, isLoading: isSkillsLoading } = useSkills();
   const [deleteOpen, setDeleteOpen] = useState(false);
   const [editOpen, setEditOpen] = useState(false);
@@ -109,7 +228,8 @@ export function AgentCard({ agent }: AgentCardProps) {
   // Favoriting collects a square agent into "我的"; pointless for one you
   // already own, so only offer it on built-in / others' agents.
   const canFavorite = !isOwned;
-  const isFavorite = !!agent.is_favorite;
+  const isFavorite = !!agent.is_favorite;
+  const isPinned = !!agent.is_pinned;
 
   useEffect(() => {
     if (!editOpen) {
@@ -263,7 +383,7 @@ export function AgentCard({ agent }: AgentCardProps) {
     }
   }
 
-  async function handleToggleFavorite() {
+  async function handleToggleFavorite() {
     const next = !isFavorite;
     try {
       await toggleFavorite.mutateAsync({ id: agent.id, favorite: next });
@@ -271,7 +391,17 @@ export function AgentCard({ agent }: AgentCardProps) {
     } catch (err) {
       toast.error(err instanceof Error ? err.message : String(err));
     }
-  }
+  }
+
+  async function handleTogglePin() {
+    const next = !isPinned;
+    try {
+      await togglePin.mutateAsync({ id: agent.id, pinned: next });
+      toast.success(next ? "已置顶" : "已取消置顶");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  }
 
   async function handleToggleFeatured() {
     // One-click on/off — ordering is handled by the dedicated 管理 Agent 列表
@@ -397,39 +527,47 @@ export function AgentCard({ agent }: AgentCardProps) {
 
         {(agent.tool_groups?.length ?? agent.skills?.length ?? 0) > 0 && (
           <CardContent className="pt-0 pb-3">
-            <div className="flex flex-wrap gap-1">
-              {agent.tool_groups?.map((group) => (
-                <Badge
-                  key={`tg:${group}`}
-                  variant="outline"
-                  className="text-xs"
-                >
-                  {desensitize(group)}
-                </Badge>
-              ))}
-              {agent.skills?.map((skill) => (
-                <Badge
-                  key={`sk:${skill}`}
-                  variant="secondary"
-                  className="hover:bg-secondary/70 cursor-pointer text-xs"
-                  title={t.settings.skills.viewDetailAction}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setDetailSkillName(skill);
-                  }}
-                >
-                  {desensitize(skill)}
-                </Badge>
-              ))}
-            </div>
+            <ClampedBadgeRow
+              items={[
+                ...(agent.tool_groups ?? []).map((group) => ({
+                  key: `tg:${group}`,
+                  node: (
+                    <Badge
+                      key={`tg:${group}`}
+                      variant="outline"
+                      className="text-xs"
+                    >
+                      {desensitize(group)}
+                    </Badge>
+                  ),
+                })),
+                ...(agent.skills ?? []).map((skill) => ({
+                  key: `sk:${skill}`,
+                  node: (
+                    <Badge
+                      key={`sk:${skill}`}
+                      variant="secondary"
+                      className="hover:bg-secondary/70 cursor-pointer text-xs"
+                      title={t.settings.skills.viewDetailAction}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setDetailSkillName(skill);
+                      }}
+                    >
+                      {desensitize(skill)}
+                    </Badge>
+                  ),
+                })),
+              ]}
+            />
           </CardContent>
         )}
 
         <CardFooter className="mt-auto flex flex-col items-stretch gap-2 pt-3">
           {(canEdit || canDelete || isOwned || isAdmin || canFavorite) && (
             <div className="flex flex-wrap items-center justify-end gap-1">
-              {canFavorite && (
-                <Button
+              {canFavorite && (
+                <Button
                   size="icon"
                   variant="ghost"
                   className={cn(
@@ -443,9 +581,23 @@ export function AgentCard({ agent }: AgentCardProps) {
                   <StarIcon
                     className={cn("h-3.5 w-3.5", isFavorite && "fill-current")}
                   />
-                </Button>
-              )}
-              {isAdmin && (
+                </Button>
+              )}
+              <Button
+                size="icon"
+                variant="ghost"
+                className={cn(
+                  "h-8 w-8 shrink-0",
+                  isPinned && "text-emerald-600 hover:text-emerald-700",
+                  !canFavorite && "mr-auto",
+                )}
+                onClick={() => void handleTogglePin()}
+                disabled={togglePin.isPending}
+                title={isPinned ? "取消置顶" : "置顶"}
+              >
+                <PinIcon className={cn("h-3.5 w-3.5", isPinned && "fill-current")} />
+              </Button>
+              {isAdmin && (
                 <Button
                   size="icon"
                   variant="ghost"

frontend-web/src/components/workspace/agents/agent-gallery.tsx

@@ -1,23 +1,25 @@
 "use client";
 
-import { BotIcon, LockIcon, PlusIcon, ShieldIcon } from "lucide-react";
+import { ArrowDownUpIcon, BotIcon, LockIcon, PlusIcon, ShieldIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Pagination } from "@/components/ui/pagination";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { TagSearchBar } from "@/components/workspace/tags/tag-search-bar";
-import { useAgents, usePrivateAgents } from "@/core/agents";
-import type { Agent } from "@/core/agents";
-import { getStoredAuth } from "@/core/auth";
+import { useAgentsPaginated, usePrivateAgentsPaginated } from "@/core/agents";
+import type { Agent, AgentSort } from "@/core/agents";
 import { useI18n } from "@/core/i18n/hooks";
 import { usePrivateSquareStatus } from "@/core/system-settings/hooks";
-import { desensitize } from "@/lib/desensitize";
 
 import { AgentCard } from "./agent-card";
 
+const PAGE_SIZE = 12;
+
 // Within a single tab the verified password is kept in sessionStorage so a
 // refresh / route navigation does not re-prompt. Cleared on tab close, so the
 // password never persists beyond the browsing session.
@@ -31,19 +33,20 @@ export function AgentGallery() {
   );
   const [search, setSearch] = useState("");
   const [tagIds, setTagIds] = useState<string[]>([]);
-  // Tag filtering stays server-side; name search must run on the *desensitized*
-  // form because that's what the user sees on the card. If we sent the search
-  // string to the backend it would compare against the raw stored name and
-  // miss every desensitized hit (e.g. typing "TS分析" wouldn't match the
-  // stored "态势分析").
-  const { agents, isLoading } = useAgents({ tagIds });
+  const [sort, setSort] = useState<AgentSort>("time_desc");
+  // Per-tab 1-based page index, preserved while switching tabs.
+  const [pages, setPages] = useState<{ all: number; mine: number; private: number }>(
+    { all: 1, mine: 1, private: 1 },
+  );
 
-  const needle = search.trim().toLowerCase();
-  const matchesSearch = (a: Agent) =>
-    !needle || desensitize(a.name).toLowerCase().includes(needle);
-
-  const storedAuth = useMemo(() => getStoredAuth(), []);
-  const currentUserId = storedAuth?.user_id ?? null;
+  // Search + tag filtering are both server-side now. The backend mirrors the
+  // frontend's desensitize map, so typing the displayed abbreviation (e.g.
+  // "TS") still matches the stored raw name (e.g. "态势分析"). Whenever the
+  // filters change, every tab returns to its first page.
+  const tagKey = tagIds.join(",");
+  useEffect(() => {
+    setPages({ all: 1, mine: 1, private: 1 });
+  }, [search, tagKey, sort]);
 
   const { data: privateStatus } = usePrivateSquareStatus();
   const privateFeatureAvailable = !!privateStatus?.enabled;
@@ -56,11 +59,37 @@ export function AgentGallery() {
   });
   const [passwordInput, setPasswordInput] = useState("");
 
+  // Only the active tab fetches. "广场" maps to the server "square" scope
+  // (built-in/published, never private), "我的" to "mine" (owned + favorited).
+  const mainScope = activeTab === "mine" ? "mine" : "square";
+  const mainPage = activeTab === "mine" ? pages.mine : pages.all;
+  const {
+    agents: mainAgents,
+    total: mainTotal,
+    isLoading: mainLoading,
+  } = useAgentsPaginated({
+    scope: mainScope,
+    search,
+    tagIds,
+    sort,
+    page: mainPage,
+    pageSize: PAGE_SIZE,
+    enabled: activeTab !== "private",
+  });
+
   const {
     agents: privateAgents,
+    total: privateTotal,
     isLoading: isPrivateLoading,
     error: privateError,
-  } = usePrivateAgents(privatePassword);
+  } = usePrivateAgentsPaginated(privatePassword, {
+    search,
+    tagIds,
+    sort,
+    page: pages.private,
+    pageSize: PAGE_SIZE,
+    enabled: activeTab === "private",
+  });
 
   // If the server reports the stored password no longer works (likely the
   // admin rotated it), drop it from session storage and re-prompt.
@@ -72,49 +101,9 @@ export function AgentGallery() {
     }
   }, [privateError, privatePassword]);
 
-  // The "广场" tab must never surface private-square agents, even to their
-  // own owner — moving an agent into the private square is supposed to hide
-  // it from the public square entirely. (The backend listing endpoint
-  // already filters them out for non-owners; this extra clause covers the
-  // owner's own private agents, which still come back in the unified list
-  // because owners always see their own.)
-  const allAgents = useMemo(
-    () =>
-      agents.filter(
-        (a) => (a.builtin || a.published) && !a.is_private && matchesSearch(a),
-      ),
-    // matchesSearch closes over `needle`; depending on `search` is sufficient
-    // and avoids re-running on every render via the function reference.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [agents, search],
-  );
-
-  // "我的" shows the user's own agents plus any agent they've favorited (收藏)
-  // from the square — favorited public agents have a different user_id but a
-  // truthy is_favorite flag.
-  const myAgents = useMemo(
-    () =>
-      agents.filter(
-        (a) =>
-          ((a.user_id !== null && a.user_id === currentUserId) ||
-            a.is_favorite) &&
-          matchesSearch(a),
-      ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [agents, currentUserId, search],
-  );
-
-  const filteredPrivateAgents = useMemo(() => {
-    const wanted = new Set(tagIds);
-    return privateAgents.filter((a) => {
-      if (!matchesSearch(a)) return false;
-      if (wanted.size > 0) {
-        if (!(a.tags ?? []).some((tg) => wanted.has(tg.id))) return false;
-      }
-      return true;
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [privateAgents, search, tagIds]);
+  const activeTotal = activeTab === "private" ? privateTotal : mainTotal;
+  const setTabPage = (tab: "all" | "mine" | "private", page: number) =>
+    setPages((prev) => ({ ...prev, [tab]: page }));
 
   const handleNewAgent = () => {
     router.push("/page/workspace/agents/new");
@@ -136,7 +125,7 @@ export function AgentGallery() {
     setPrivatePassword(null);
   };
 
-  const renderGrid = (list: typeof agents) => (
+  const renderGrid = (list: Agent[]) => (
     <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
       {list.map((agent) => (
         <AgentCard key={agent.id} agent={agent} />
@@ -144,6 +133,42 @@ export function AgentGallery() {
     </div>
   );
 
+  /** Loading / empty / (grid + pagination) for one paginated tab. */
+  const renderListBody = (opts: {
+    list: Agent[];
+    total: number;
+    isLoading: boolean;
+    tab: "all" | "mine" | "private";
+    emptyDescription: string;
+    showNewButton?: boolean;
+  }) => {
+    const { list, total, isLoading, tab, emptyDescription, showNewButton } = opts;
+    // keepPreviousData keeps the old page visible while a new page loads, so
+    // only show the spinner on the very first load (no rows yet).
+    if (isLoading && list.length === 0) {
+      return (
+        <div className="text-muted-foreground flex h-40 items-center justify-center text-sm">
+          {t.common.loading}
+        </div>
+      );
+    }
+    if (list.length === 0) {
+      return renderEmpty(emptyDescription, showNewButton);
+    }
+    return (
+      <div className="flex flex-col gap-4">
+        {renderGrid(list)}
+        <Pagination
+          page={pages[tab]}
+          pageSize={PAGE_SIZE}
+          total={total}
+          onPageChange={(p) => setTabPage(tab, p)}
+          className="pt-2"
+        />
+      </div>
+    );
+  };
+
   const renderEmpty = (description: string, showNewButton = false) => (
     <div className="flex h-64 flex-col items-center justify-center gap-3 text-center">
       <div className="bg-muted flex h-14 w-14 items-center justify-center rounded-full dark:bg-[#022248]">
@@ -218,6 +243,15 @@ export function AgentGallery() {
               onKeyDown={(e) => {
                 if (e.key === "Enter") handleSubmitPassword();
               }}
+              // This is a one-off access code, not a login credential. Tell
+              // browsers / password managers not to save or autofill it (which
+              // would also stop them from spilling a saved account into the
+              // name search box on this page).
+              name="private-square-access-code"
+              autoComplete="off"
+              data-1p-ignore
+              data-lpignore="true"
+              data-form-type="other"
             />
             <Button onClick={handleSubmitPassword}>进入私密广场</Button>
           </div>
@@ -225,19 +259,13 @@ export function AgentGallery() {
       );
     }
 
-    if (isPrivateLoading) {
-      return (
-        <div className="text-muted-foreground flex h-40 items-center justify-center text-sm">
-          {t.common.loading}
-        </div>
-      );
-    }
-
-    if (filteredPrivateAgents.length === 0) {
-      return renderEmpty("私密广场暂时还没有智能体。");
-    }
-
-    return renderGrid(filteredPrivateAgents);
+    return renderListBody({
+      list: privateAgents,
+      total: privateTotal,
+      isLoading: isPrivateLoading,
+      tab: "private",
+      emptyDescription: "私密广场暂时还没有智能体。",
+    });
   };
 
   return (
@@ -276,48 +304,69 @@ export function AgentGallery() {
                 </TabsTrigger>
               )}
             </TabsList>
-            {activeTab === "private" && privatePassword && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleLockPrivate}
-                title="锁定私密广场，下次需要重新输入密码"
-              >
-                <LockIcon className="mr-1.5 h-3.5 w-3.5" />
-                锁定
-              </Button>
-            )}
+            <div className="flex items-center gap-3">
+              <span className="text-muted-foreground text-sm whitespace-nowrap">
+                共 {activeTotal} 个
+              </span>
+              {activeTab === "private" && privatePassword && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleLockPrivate}
+                  title="锁定私密广场，下次需要重新输入密码"
+                >
+                  <LockIcon className="mr-1.5 h-3.5 w-3.5" />
+                  锁定
+                </Button>
+              )}
+            </div>
           </div>
           <TagSearchBar
             targetType="agent"
             onSearchChange={setSearch}
             tagIds={tagIds}
             onTagIdsChange={setTagIds}
+            actions={
+              <Select value={sort} onValueChange={(v) => setSort(v as AgentSort)}>
+                <SelectTrigger
+                  className="h-9 w-full gap-2 px-3 text-xs sm:w-[148px]"
+                  title="排序"
+                >
+                  <ArrowDownUpIcon className="text-muted-foreground size-3.5" />
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent position="popper" side="bottom" sideOffset={4}>
+                  <SelectItem value="time_desc">最新创建</SelectItem>
+                  <SelectItem value="time_asc">最早创建</SelectItem>
+                  <SelectItem value="updated_desc">最近更新</SelectItem>
+                  <SelectItem value="updated_asc">最早更新</SelectItem>
+                  <SelectItem value="name_asc">名称 A-Z</SelectItem>
+                  <SelectItem value="name_desc">名称 Z-A</SelectItem>
+                </SelectContent>
+              </Select>
+            }
           />
         </div>
 
         <TabsContent value="all" className="flex-1 overflow-y-auto p-6 mt-0">
-          {isLoading ? (
-            <div className="text-muted-foreground flex h-40 items-center justify-center text-sm">
-              {t.common.loading}
-            </div>
-          ) : allAgents.length === 0 ? (
-            renderEmpty(t.agents.emptyDescription)
-          ) : (
-            renderGrid(allAgents)
-          )}
+          {renderListBody({
+            list: mainAgents,
+            total: mainTotal,
+            isLoading: mainLoading,
+            tab: "all",
+            emptyDescription: t.agents.emptyDescription,
+          })}
         </TabsContent>
 
         <TabsContent value="mine" className="flex-1 overflow-y-auto p-6 mt-0">
-          {isLoading ? (
-            <div className="text-muted-foreground flex h-40 items-center justify-center text-sm">
-              {t.common.loading}
-            </div>
-          ) : myAgents.length === 0 ? (
-            renderEmpty(t.agents.emptyDescription, true)
-          ) : (
-            renderGrid(myAgents)
-          )}
+          {renderListBody({
+            list: mainAgents,
+            total: mainTotal,
+            isLoading: mainLoading,
+            tab: "mine",
+            emptyDescription: t.agents.emptyDescription,
+            showNewButton: true,
+          })}
         </TabsContent>
 
         {privateFeatureAvailable && (

frontend-web/src/components/workspace/agents/agent-manage-dialog.tsx

@@ -136,21 +136,21 @@ export function AgentManageDialog({
                 {agents.map((agent, index) => (
                   <div
                     key={agent.id}
-                    className="flex items-center gap-2 px-3 py-2 hover:bg-accent/30"
+                    className="flex min-w-0 items-start gap-2 px-3 py-2 hover:bg-accent/30"
                   >
                     <span className="text-muted-foreground w-6 shrink-0 text-center text-xs tabular-nums">
                       {index + 1}
                     </span>
-                    <BotIcon className="text-muted-foreground size-4 shrink-0" />
+                    <BotIcon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
                     <div className="flex min-w-0 flex-1 flex-col">
                       <span className="truncate text-sm">{agent.name}</span>
                       {agent.description && (
-                        <span className="truncate text-[11px] text-muted-foreground">
+                        <span className="line-clamp-2 whitespace-normal break-words text-[11px] leading-snug text-muted-foreground">
                           {agent.description}
                         </span>
                       )}
                     </div>
-                    <div className="flex items-center gap-0.5">
+                    <div className="flex shrink-0 items-center gap-0.5">
                       <Tooltip content="上移">
                         <Button
                           size="icon"
@@ -222,12 +222,13 @@ export function AgentManageDialog({
                       key={agent.id}
                       value={`${agent.name} ${agent.description ?? ""}`}
                       onSelect={() => void add(agent)}
+                      className="flex w-full min-w-0 items-start overflow-hidden"
                     >
-                      <BotIcon className="text-muted-foreground mr-2 size-4 shrink-0" />
+                      <BotIcon className="text-muted-foreground mr-2 mt-0.5 size-4 shrink-0" />
                       <div className="flex min-w-0 flex-1 flex-col">
                         <span className="truncate text-sm">{agent.name}</span>
                         {agent.description && (
-                          <span className="truncate text-[10px] text-muted-foreground">
+                          <span className="line-clamp-2 whitespace-normal break-words text-[10px] leading-snug text-muted-foreground">
                             {agent.description}
                           </span>
                         )}

frontend-web/src/components/workspace/agents/agent-selector.tsx

@@ -120,15 +120,15 @@ export function AgentSelector({
                       value={`${agent.name} ${agent.description ?? ""}`}
                       onSelect={() => handleSelect(agent)}
                       className={cn(
-                        "flex items-center gap-2",
+                        "flex w-full min-w-0 items-start gap-2 overflow-hidden",
                         agent.id === selectedAgentId && "bg-accent",
                       )}
                     >
-                      <BotIcon className="text-muted-foreground size-4 shrink-0" />
+                      <BotIcon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
                       <div className="flex min-w-0 flex-1 flex-col">
                         <span className="truncate text-sm">{agent.name}</span>
                         {agent.description && (
-                          <span className="truncate text-[10px] text-muted-foreground">
+                          <span className="line-clamp-2 whitespace-normal break-words text-[10px] leading-snug text-muted-foreground">
                             {agent.description}
                           </span>
                         )}

frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx

@@ -14,6 +14,7 @@ import {
   XIcon,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
 import { toast } from "sonner";
 import { Streamdown } from "streamdown";
 
@@ -43,24 +44,29 @@ import {
   useArtifactContent,
   useUpdateArtifactContent,
 } from "@/core/artifacts/hooks";
-import { urlOfArtifact } from "@/core/artifacts/utils";
+import { resolveArtifactURL, urlOfArtifact } from "@/core/artifacts/utils";
 import { useI18n } from "@/core/i18n/hooks";
 import { downloadMarkdownAsDocx } from "@/core/scheduled-tasks/markdown-docx";
 import { installSkill } from "@/core/skills/api";
 import { streamdownPlugins } from "@/core/streamdown";
-import {
-  checkCodeFile,
-  getFileName,
-  isImageFile,
-} from "@/core/utils/files";
-import {
-  downloadMermaidSvgFile,
-  isMermaidFile,
-  openMermaidSvgInNewTab,
-  renderMermaidToSvg,
-} from "@/core/utils/mermaid";
+import {
+  checkCodeFile,
+  getFileName,
+  isImageFile,
+} from "@/core/utils/files";
+import {
+  downloadMermaidSvgFile,
+  isMermaidFile,
+  openMermaidSvgInNewTab,
+  renderMermaidToSvg,
+} from "@/core/utils/mermaid";
+import {
+  createMarkdownAnchorResolver,
+  injectInPageAnchorHandler,
+  isInPageAnchor,
+  scrollToInPageAnchor,
+} from "@/core/utils/markdown";
 import { getBackendBaseURL } from "@/core/config";
-import { resolveArtifactURL } from "@/core/artifacts/utils";
 import { env } from "@/env";
 import { desensitize } from "@/lib/desensitize";
 import { cn } from "@/lib/utils";
@@ -73,6 +79,12 @@ import { useArtifacts } from "./context";
 
 const SANDBOX_RESUME_EVENT = "workspace:sandbox-resume-autoscroll";
 
+function extractTextFromChildren(children: ReactNode): string {
+  if (typeof children === "string" || typeof children === "number") return String(children);
+  if (Array.isArray(children)) return children.map(extractTextFromChildren).join("");
+  return "";
+}
+
 function findScrollableArtifactElement(root: HTMLElement | null) {
   if (!root) {
     return null;
@@ -135,14 +147,14 @@ export function ArtifactFileDetail({
       return { isCodeFile: true, language: "markdown" };
     }
     return checkCodeFile(filepath);
-  }, [filepath, useWriteFileStreaming, isSkillFile]);
-  const isSupportPreview = useMemo(() => {
-    return (
-      language === "html" ||
-      language === "markdown" ||
-      language === "mermaid"
-    );
-  }, [language]);
+  }, [filepath, useWriteFileStreaming, isSkillFile]);
+  const isSupportPreview = useMemo(() => {
+    return (
+      language === "html" ||
+      language === "markdown" ||
+      language === "mermaid"
+    );
+  }, [language]);
   const { content, isApplyingEdit } = useArtifactContent({
     threadId,
     filepath: filepathFromProps,
@@ -160,12 +172,12 @@ export function ArtifactFileDetail({
   const displayContent = canEditArtifact ? draftContent : (content ?? "");
   const isHtmlStreaming = language === "html" && thread.isLoading;
   const hasMultipleArtifacts = (artifacts?.length ?? 0) > 1;
-  const fileTypeLabel = useMemo(() => {
-    if (isImageFile(filepath)) return "IMG";
-    if (isMermaidFile(filepath) || language === "mermaid") return "MMD";
-    if (language === "html") return "HTML";
-    if (language === "markdown") return "MD";
-    if (isSkillFile) return "SKILL";
+  const fileTypeLabel = useMemo(() => {
+    if (isImageFile(filepath)) return "IMG";
+    if (isMermaidFile(filepath) || language === "mermaid") return "MMD";
+    if (language === "html") return "HTML";
+    if (language === "markdown") return "MD";
+    if (isSkillFile) return "SKILL";
     if (language) return language.toUpperCase();
     return "FILE";
   }, [filepath, isSkillFile, language]);
@@ -434,16 +446,16 @@ export function ArtifactFileDetail({
       toast.error("文件内容为空，暂时无法打开");
       return;
     }
-    if (language === "mermaid") {
-      void openMermaidSvgInNewTab(source).catch((error) => {
-        console.error("Failed to open mermaid artifact:", error);
-        toast.error(error instanceof Error ? error.message : "Failed to open artifact");
-      });
-      return;
-    }
-    const blobType =
-      language === "html"
-        ? "text/html;charset=utf-8"
+    if (language === "mermaid") {
+      void openMermaidSvgInNewTab(source).catch((error) => {
+        console.error("Failed to open mermaid artifact:", error);
+        toast.error(error instanceof Error ? error.message : "Failed to open artifact");
+      });
+      return;
+    }
+    const blobType =
+      language === "html"
+        ? "text/html;charset=utf-8"
         : language === "markdown"
           ? "text/markdown;charset=utf-8"
           : "text/plain;charset=utf-8";
@@ -453,22 +465,22 @@ export function ArtifactFileDetail({
     window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
   }, [displayContent, language]);
 
-  const handleDownloadWriteFile = useCallback(() => {
-    const source = displayContent ?? "";
+  const handleDownloadWriteFile = useCallback(() => {
+    const source = displayContent ?? "";
     if (!source.trim()) {
       toast.error("文件内容为空，暂时无法下载");
       return;
     }
-    if (language === "mermaid") {
-      void downloadMermaidSvgFile(source, filepath).catch((error) => {
-        console.error("Failed to download mermaid artifact:", error);
-        toast.error(error instanceof Error ? error.message : "Download failed");
-      });
-      return;
-    }
-    const blobType =
-      language === "html"
-        ? "text/html;charset=utf-8"
+    if (language === "mermaid") {
+      void downloadMermaidSvgFile(source, filepath).catch((error) => {
+        console.error("Failed to download mermaid artifact:", error);
+        toast.error(error instanceof Error ? error.message : "Download failed");
+      });
+      return;
+    }
+    const blobType =
+      language === "html"
+        ? "text/html;charset=utf-8"
         : language === "markdown"
           ? "text/markdown;charset=utf-8"
           : "text/plain;charset=utf-8";
@@ -587,27 +599,27 @@ export function ArtifactFileDetail({
               icon={SquareArrowOutUpRightIcon}
               label={t.common.openInNewWindow}
               tooltip={t.common.openInNewWindow}
-              onClick={async () => {
-                if (useWriteFileStreaming) {
-                  handleOpenWriteFileInNewTab();
-                  return;
-                }
-                if (language === "mermaid") {
-                  try {
-                    await openMermaidSvgInNewTab(displayContent ?? "");
-                  } catch (error) {
-                    console.error(error);
-                    toast.error(
-                      error instanceof Error
-                        ? error.message
-                        : "Failed to open artifact",
-                    );
-                  }
-                  return;
-                }
-                try {
-                  await openArtifactInNewTab({
-                    filepath,
+              onClick={async () => {
+                if (useWriteFileStreaming) {
+                  handleOpenWriteFileInNewTab();
+                  return;
+                }
+                if (language === "mermaid") {
+                  try {
+                    await openMermaidSvgInNewTab(displayContent ?? "");
+                  } catch (error) {
+                    console.error(error);
+                    toast.error(
+                      error instanceof Error
+                        ? error.message
+                        : "Failed to open artifact",
+                    );
+                  }
+                  return;
+                }
+                try {
+                  await openArtifactInNewTab({
+                    filepath,
                     threadId,
                     isMock,
                     publicShareCode,
@@ -652,27 +664,27 @@ export function ArtifactFileDetail({
               icon={DownloadIcon}
               label={t.common.download}
               tooltip={t.common.download}
-              onClick={async () => {
-                if (useWriteFileStreaming) {
-                  handleDownloadWriteFile();
-                  return;
-                }
-                if (language === "mermaid") {
-                  try {
-                    await downloadMermaidSvgFile(displayContent ?? "", filepath);
-                  } catch (error) {
-                    console.error(error);
-                    toast.error(
-                      error instanceof Error
-                        ? error.message
-                        : "Download failed",
-                    );
-                  }
-                  return;
-                }
-                try {
-                  await downloadArtifactFile({
-                    filepath,
+              onClick={async () => {
+                if (useWriteFileStreaming) {
+                  handleDownloadWriteFile();
+                  return;
+                }
+                if (language === "mermaid") {
+                  try {
+                    await downloadMermaidSvgFile(displayContent ?? "", filepath);
+                  } catch (error) {
+                    console.error(error);
+                    toast.error(
+                      error instanceof Error
+                        ? error.message
+                        : "Download failed",
+                    );
+                  }
+                  return;
+                }
+                try {
+                  await downloadArtifactFile({
+                    filepath,
                     threadId,
                     isMock,
                     publicShareCode,
@@ -717,15 +729,15 @@ export function ArtifactFileDetail({
             <ArrowDownIcon className="size-4" />
             滑动到底部并继续自动下滑
           </button>
-        )}
-        {isSupportPreview &&
-          viewMode === "preview" &&
-          (language === "markdown" ||
-            language === "html" ||
-            language === "mermaid") && (
-              <ArtifactFilePreview
-                content={desensitize(displayContent ?? "")}
-                language={language ?? "text"}
+        )}
+        {isSupportPreview &&
+          viewMode === "preview" &&
+          (language === "markdown" ||
+            language === "html" ||
+            language === "mermaid") && (
+              <ArtifactFilePreview
+                content={desensitize(displayContent ?? "")}
+                language={language ?? "text"}
                 threadId={threadId}
                 publicShareCode={publicShareCode}
                 animated={showPreviewSwitchPulse}
@@ -821,64 +833,127 @@ export function ArtifactFilePreview({
   publicShareCode?: string;
   animated?: boolean;
   activeCursor?: boolean;
-}) {
-  const [htmlPreviewUrl, setHtmlPreviewUrl] = useState<string>();
-  const [mermaidSvg, setMermaidSvg] = useState<string | null>(null);
-  const [mermaidError, setMermaidError] = useState<string | null>(null);
+}) {
+  const [htmlPreviewUrl, setHtmlPreviewUrl] = useState<string>();
+  const [mermaidSvg, setMermaidSvg] = useState<string | null>(null);
+  const [mermaidError, setMermaidError] = useState<string | null>(null);
+  const markdownComponents = useMemo(() => {
+    const anchorResolver = createMarkdownAnchorResolver(content ?? "");
+    const heading = (level: 1 | 2 | 3 | 4 | 5 | 6) => {
+      const Tag = `h${level}` as const;
+      return ({ children, id, ...props }: HTMLAttributes<HTMLHeadingElement>) => (
+        <Tag id={id ?? anchorResolver.getHeadingId(level, extractTextFromChildren(children))} {...props}>
+          {children}
+        </Tag>
+      );
+    };
 
-  useEffect(() => {
-    if (language !== "html") {
-      setHtmlPreviewUrl(undefined);
-      return;
+    return {
+      h1: heading(1),
+      h2: heading(2),
+      h3: heading(3),
+      h4: heading(4),
+      h5: heading(5),
+      h6: heading(6),
+      a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {
+        if (typeof props.children === "string" && /^citation:(.+)$/.test(props.children)) {
+          return <ArtifactLink {...props} />;
+        }
+        const { className, ...rest } = props;
+        const resolvedHref = anchorResolver.resolveHref(
+          props.href,
+          extractTextFromChildren(props.children),
+        );
+        if (resolvedHref === null) {
+          return (
+            <span
+              className={cn(
+                "text-primary/80 decoration-dotted underline underline-offset-2 cursor-not-allowed",
+                className,
+              )}
+              title="未在当前 Markdown 中找到对应章节"
+            >
+              {props.children}
+            </span>
+          );
+        }
+        const finalHref = resolvedHref ?? props.href;
+        return (
+          <ArtifactLink
+            {...rest}
+            className={className}
+            href={finalHref}
+            onClick={(event) => {
+              if (isInPageAnchor(finalHref)) {
+                event.preventDefault();
+                scrollToInPageAnchor(event.currentTarget, finalHref);
+              }
+              rest.onClick?.(event);
+            }}
+          />
+        );
+      },
+    };
+  }, [content]);
+
+  useEffect(() => {
+    if (language !== "html") {
+      setHtmlPreviewUrl(undefined);
+      return;
     }
 
     // 必须带 charset=utf-8：blob: URL 的 Content-Type 不含 charset 时，iframe 会按
     // 系统默认编码(中文 Windows 常为 GBK/Latin-1)解码,模型生成的 HTML 若没写
     // <meta charset> 就会中文乱码。与下方下载/新窗口打开的 blobType 保持一致。
-    const blob = new Blob([content ?? ""], { type: "text/html;charset=utf-8" });
+    // Intercept in-page anchor clicks so they scroll within the iframe instead
+    // of navigating the sandboxed blob: document (which blanks the frame).
+    const blob = new Blob([injectInPageAnchorHandler(content ?? "")], {
+      type: "text/html;charset=utf-8",
+    });
     const url = URL.createObjectURL(blob);
     setHtmlPreviewUrl(url);
 
     return () => {
-      URL.revokeObjectURL(url);
-    };
-  }, [content, language]);
-
-  useEffect(() => {
-    if (language !== "mermaid") {
-      setMermaidSvg(null);
-      setMermaidError(null);
-      return;
-    }
-
-    let cancelled = false;
-    setMermaidSvg(null);
-    setMermaidError(null);
-
-    void renderMermaidToSvg(content ?? "")
-      .then((svg) => {
-        if (!cancelled) {
-          setMermaidSvg(svg);
-        }
-      })
-      .catch((error) => {
-        console.error("Failed to render mermaid preview:", error);
-        if (!cancelled) {
-          setMermaidError(
-            error instanceof Error ? error.message : "Mermaid 渲染失败",
-          );
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [content, language]);
+      URL.revokeObjectURL(url);
+    };
+  }, [content, language]);
+
+  useEffect(() => {
+    if (language !== "mermaid") {
+      setMermaidSvg(null);
+      setMermaidError(null);
+      return;
+    }
+
+    let cancelled = false;
+    setMermaidSvg(null);
+    setMermaidError(null);
+
+    void renderMermaidToSvg(content ?? "")
+      .then((svg) => {
+        if (!cancelled) {
+          setMermaidSvg(svg);
+        }
+      })
+      .catch((error) => {
+        console.error("Failed to render mermaid preview:", error);
+        if (!cancelled) {
+          setMermaidError(
+            error instanceof Error ? error.message : "Mermaid 渲染失败",
+          );
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [content, language]);
 
   if (language === "markdown") {
     return (
       <div
         data-artifact-preview-scroll
+        data-markdown-anchor-root
         className={cn(
           "size-full overflow-auto px-5 py-4",
           animated && "animate-[sandbox-preview-enter_320ms_ease-out]",
@@ -888,7 +963,7 @@ export function ArtifactFilePreview({
           className="size-full"
           {...streamdownPlugins}
           components={{
-            a: ArtifactLink,
+            ...markdownComponents,
             img: (props) => (
               <SandboxPreviewImage
                 {...props}
@@ -907,9 +982,9 @@ export function ArtifactFilePreview({
     );
   }
 
-  if (language === "html") {
-    return (
-      <iframe
+  if (language === "html") {
+    return (
+      <iframe
         className={cn(
           "size-full bg-white",
           animated && "animate-[sandbox-preview-enter_320ms_ease-out]",
@@ -918,41 +993,41 @@ export function ArtifactFilePreview({
         sandbox="allow-scripts allow-forms"
         src={htmlPreviewUrl}
       />
-    );
-  }
-
-  if (language === "mermaid") {
-    return (
-      <div
-        data-artifact-preview-scroll
-        className={cn(
-          "size-full overflow-auto bg-[#fcfdfc] px-5 py-4",
-          animated && "animate-[sandbox-preview-enter_320ms_ease-out]",
-        )}
-      >
-        {mermaidSvg ? (
-          <div
-            className="mx-auto flex min-h-full items-start justify-center rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"
-            dangerouslySetInnerHTML={{ __html: mermaidSvg }}
-          />
-        ) : mermaidError ? (
-          <div className="space-y-3">
-            <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
-              {mermaidError}
-            </div>
-            <pre className="whitespace-pre-wrap break-words rounded-xl bg-slate-100 p-4 text-xs text-slate-700">
-              {content ?? ""}
-            </pre>
-          </div>
-        ) : (
-          <div className="text-muted-foreground flex size-full items-center justify-center gap-2 text-sm">
-            <LoaderIcon className="size-5 animate-spin" />
-            正在生成图表预览
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return null;
-}
+    );
+  }
+
+  if (language === "mermaid") {
+    return (
+      <div
+        data-artifact-preview-scroll
+        className={cn(
+          "size-full overflow-auto bg-[#fcfdfc] px-5 py-4",
+          animated && "animate-[sandbox-preview-enter_320ms_ease-out]",
+        )}
+      >
+        {mermaidSvg ? (
+          <div
+            className="mx-auto flex min-h-full items-start justify-center rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"
+            dangerouslySetInnerHTML={{ __html: mermaidSvg }}
+          />
+        ) : mermaidError ? (
+          <div className="space-y-3">
+            <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+              {mermaidError}
+            </div>
+            <pre className="whitespace-pre-wrap break-words rounded-xl bg-slate-100 p-4 text-xs text-slate-700">
+              {content ?? ""}
+            </pre>
+          </div>
+        ) : (
+          <div className="text-muted-foreground flex size-full items-center justify-center gap-2 text-sm">
+            <LoaderIcon className="size-5 animate-spin" />
+            正在生成图表预览
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return null;
+}

frontend-web/src/components/workspace/custom-prompt-menu.tsx

@@ -19,32 +19,43 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import { useAgentSelector } from "@/core/agents/hooks";
 import {
   useCreateCustomPrompt,
   useCustomPrompts,
   useDeleteCustomPrompt,
   useUpdateCustomPrompt,
 } from "@/core/custom-prompts";
+import {
+  useUpdateUserPreferences,
+  useUserPreferences,
+} from "@/core/user-preferences";
+import { desensitize } from "@/lib/desensitize";
 import { cn } from "@/lib/utils";
 
-/**
- * Bar above the chat input showing the user's saved prompts as centered,
- * clickable chips. When there are too many to fit, they become a horizontal
- * carousel (arrows appear). A gear pinned to the far right opens the manage
- * dialog. Prompts are bound to the account (server-backed), and this coexists
- * with the admin-configured global prompt prefix.
- */
 export function CustomPromptBar({
   onInsert,
   className,
+  currentAgentId,
 }: {
   onInsert: (content: string) => void;
   className?: string;
+  currentAgentId?: string | null;
 }) {
-  const prompts = useCustomPrompts();
+  const allPrompts = useCustomPrompts();
+  const prompts = allPrompts.filter(
+    (prompt) => !prompt.agent_id || prompt.agent_id === currentAgentId,
+  );
   const [manageOpen, setManageOpen] = useState(false);
-
   const scrollRef = useRef<HTMLDivElement>(null);
   const [canLeft, setCanLeft] = useState(false);
   const [canRight, setCanRight] = useState(false);
@@ -60,7 +71,7 @@ export function CustomPromptBar({
     updateArrows();
     window.addEventListener("resize", updateArrows);
     return () => window.removeEventListener("resize", updateArrows);
-  }, [updateArrows, prompts]);
+  }, [prompts, updateArrows]);
 
   const scrollByDir = (dir: 1 | -1) => {
     scrollRef.current?.scrollBy({ left: dir * 220, behavior: "smooth" });
@@ -70,7 +81,7 @@ export function CustomPromptBar({
 
   return (
     <>
-      <div className={cn("flex items-center gap-1", className)}>
+      <div className={cn("flex min-w-0 items-center gap-1", className)}>
         {prompts.length > 0 && (
           <>
             {overflowing && (
@@ -89,7 +100,7 @@ export function CustomPromptBar({
             <div
               ref={scrollRef}
               onScroll={updateArrows}
-              className="flex-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+              className="min-w-0 flex-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
             >
               <div className="mx-auto flex w-max items-center gap-1.5 px-0.5 py-0.5">
                 {prompts.map((prompt) => (
@@ -123,7 +134,7 @@ export function CustomPromptBar({
             )}
           </>
         )}
-        {prompts.length === 0 && <div className="flex-1" />}
+        {prompts.length === 0 && <div className="min-w-0 flex-1" />}
         <Button
           type="button"
           variant="ghost"
@@ -153,16 +164,26 @@ function ManagePromptsDialog({
   const createPrompt = useCreateCustomPrompt();
   const updatePrompt = useUpdateCustomPrompt();
   const deletePrompt = useDeleteCustomPrompt();
+  const { agents } = useAgentSelector();
+  const preferences = useUserPreferences();
+  const updatePreferences = useUpdateUserPreferences();
   const [editingId, setEditingId] = useState<string | null>(null);
   const [title, setTitle] = useState("");
   const [content, setContent] = useState("");
+  const [agentId, setAgentId] = useState<string | undefined>(undefined);
 
   const saving = createPrompt.isPending || updatePrompt.isPending;
 
+  const selectableAgents = agents;
+
+  const agentNameById = (id?: string | null) =>
+    id ? agents.find((agent) => agent.id === id)?.name ?? null : null;
+
   const resetForm = () => {
     setEditingId(null);
     setTitle("");
     setContent("");
+    setAgentId(undefined);
   };
 
   const handleSubmit = async () => {
@@ -171,15 +192,24 @@ function ManagePromptsDialog({
       toast.error("提示词内容不能为空");
       return;
     }
+    if (!agentId) {
+      toast.error("请选择关联智能体");
+      return;
+    }
+
     try {
       if (editingId) {
         await updatePrompt.mutateAsync({
           id: editingId,
-          input: { title: trimmedTitle, content },
+          input: { title: trimmedTitle, content, agent_id: agentId },
         });
         toast.success("提示词已更新");
       } else {
-        await createPrompt.mutateAsync({ title: trimmedTitle, content });
+        await createPrompt.mutateAsync({
+          title: trimmedTitle,
+          content,
+          agent_id: agentId,
+        });
         toast.success("提示词已添加");
       }
       resetForm();
@@ -189,17 +219,31 @@ function ManagePromptsDialog({
   };
 
   const handleEdit = (id: string) => {
-    const target = prompts.find((p) => p.id === id);
+    const target = prompts.find((prompt) => prompt.id === id);
     if (!target) return;
     setEditingId(id);
     setTitle(target.title);
     setContent(target.content);
+    setAgentId(
+      target.agent_id && selectableAgents.some((agent) => agent.id === target.agent_id)
+        ? target.agent_id
+        : undefined,
+    );
+  };
+
+  const handleToggleHideAdmin = async (next: boolean) => {
+    try {
+      await updatePreferences.mutateAsync({ hide_admin_prompt_prefix: next });
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
   };
 
   const handleDelete = async (id: string) => {
     try {
       await deletePrompt.mutateAsync(id);
       if (editingId === id) resetForm();
+      toast.success("提示词已删除");
     } catch (err) {
       toast.error(err instanceof Error ? err.message : String(err));
     }
@@ -217,25 +261,73 @@ function ManagePromptsDialog({
         <DialogHeader>
           <DialogTitle>管理常用提示词</DialogTitle>
           <DialogDescription>
-            保存常用的提示词，保存后会以小标签形式显示在输入框上方，点击即可填入。提示词与你的账号绑定，可跨设备使用。
+            保存常用提示词后，会显示在输入框上方。提示词与账号绑定，可跨设备使用。
           </DialogDescription>
         </DialogHeader>
 
+        <div className="flex items-start justify-between gap-3 rounded-md border p-3">
+          <div className="min-w-0">
+            <p className="text-sm font-medium">只用我自己的提示词</p>
+            <p className="text-muted-foreground mt-0.5 text-xs">
+              开启后，输入框不再显示管理员配置的提示词前缀开关，本账号仅使用自己保存的提示词。
+            </p>
+          </div>
+          <Switch
+            checked={preferences.hide_admin_prompt_prefix}
+            disabled={updatePreferences.isPending}
+            onCheckedChange={(value) => void handleToggleHideAdmin(value)}
+          />
+        </div>
+
         <div className="space-y-3 rounded-md border p-3">
           <Input
             value={title}
-            onChange={(e) => setTitle(e.target.value)}
+            onChange={(event) => setTitle(event.target.value)}
             placeholder="名称（可选，例如：周报总结）"
           />
           <Textarea
             value={content}
-            onChange={(e) => setContent(e.target.value)}
+            onChange={(event) => setContent(event.target.value)}
             placeholder="提示词内容"
             className="min-h-28"
           />
+          <div className="flex min-w-0 flex-col gap-1">
+            <p className="text-muted-foreground text-xs">关联智能体</p>
+            <Select value={agentId} onValueChange={setAgentId}>
+              <SelectTrigger className="w-full min-w-0 max-w-full overflow-hidden [&>span]:min-w-0 [&>span]:flex-1 [&>span]:truncate [&>span]:text-left">
+                <SelectValue placeholder="请选择已配置的智能体" />
+              </SelectTrigger>
+              <SelectContent
+                position="popper"
+                className="max-h-[40vh] w-[var(--radix-select-trigger-width)] max-w-[var(--radix-select-trigger-width)] overflow-hidden"
+              >
+                {selectableAgents.map((agent) => (
+                  <SelectItem
+                    key={agent.id}
+                    value={agent.id}
+                    className="max-w-full pr-8"
+                  >
+                    <span className="block max-w-full truncate">
+                      {desensitize(agent.name)}
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground text-xs">
+              {selectableAgents.length === 0
+                ? "当前账号还没有已配置的智能体。"
+                : "关联后，仅在选中该智能体的对话里显示此提示词。"}
+            </p>
+          </div>
           <div className="flex justify-end gap-2">
             {editingId && (
-              <Button variant="outline" size="sm" onClick={resetForm} disabled={saving}>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={resetForm}
+                disabled={saving}
+              >
                 取消编辑
               </Button>
             )}
@@ -260,6 +352,11 @@ function ManagePromptsDialog({
                   <p className="truncate text-sm font-medium">
                     {prompt.title || "未命名提示词"}
                   </p>
+                  {prompt.agent_id && (
+                    <p className="mt-0.5 truncate text-[11px] text-sky-600 dark:text-sky-400">
+                      仅 {desensitize(agentNameById(prompt.agent_id) || "未知智能体")} 可见
+                    </p>
+                  )}
                   <p className="text-muted-foreground mt-0.5 line-clamp-2 text-xs whitespace-pre-wrap">
                     {prompt.content}
                   </p>

frontend-web/src/components/workspace/input-box.tsx

@@ -86,7 +86,8 @@ import {
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 
-import { useRecommendedQuestions } from "@/core/recommended-questions/hooks";
+import { useRecommendedQuestions } from "@/core/recommended-questions/hooks";
+import { useUserPreferences } from "@/core/user-preferences";
 import {
   isThreadRagModeLocked,
   lockThreadRagMode,
@@ -131,6 +132,7 @@ export function InputBox({
   onStop,
   promptPrefix,
   agentSelector,
+  assistantId,
   ...props
 }: Omit<ComponentProps<typeof PromptInput>, "onSubmit"> & {
   assistantId?: string | null;
@@ -203,7 +205,11 @@ export function InputBox({
     null,
   );
 
-  const { questions: recommendedQuestions } = useRecommendedQuestions();
+  const { questions: recommendedQuestions } = useRecommendedQuestions();
+  const userPreferences = useUserPreferences();
+  const showAdminRecommendedQuestions =
+    !userPreferences.hide_admin_prompt_prefix &&
+    recommendedQuestions.length > 0;
 
   useEffect(() => {
     if (models.length === 0) {
@@ -510,7 +516,7 @@ export function InputBox({
         </div>
       )}
 
-      {isNewThread && searchParams.get("mode") !== "skill" && recommendedQuestions.length > 0 && (
+      {isNewThread && searchParams.get("mode") !== "skill" && showAdminRecommendedQuestions && (
         <div className="flex flex-wrap justify-center gap-2.5 px-4 mb-[10px]">
           {recommendedQuestions.map((q) => (
             <button
@@ -564,6 +570,7 @@ export function InputBox({
       {isNewThread && (
         <CustomPromptBar
           className="px-1"
+          currentAgentId={agentSelector?.selectedAgentId ?? assistantId ?? null}
           onInsert={(content) => {
             const current = textInput.value?.trim() ?? "";
             textInput.setInput(current ? `${current}\n${content}` : content);

frontend-web/src/components/workspace/messages/delete-message-button.tsx

@@ -0,0 +1,99 @@
+import { Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useI18n } from "@/core/i18n/hooks";
+import { useDeleteMessage } from "@/core/threads/hooks";
+
+import { Tooltip } from "../tooltip";
+
+/**
+ * Hover affordance that deletes a conversation turn (a user question together
+ * with its answer) after a confirmation step. The actual removal is persisted
+ * server-side; `onDeleted` receives the ids the server removed so the parent
+ * can hide those bubbles immediately without waiting for the stream cache to
+ * refresh.
+ */
+export function DeleteMessageButton({
+  threadId,
+  messageId,
+  onDeleted,
+  className,
+}: {
+  threadId: string;
+  messageId: string;
+  onDeleted?: (deletedIds: string[]) => void;
+  className?: string;
+}) {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const deleteMessage = useDeleteMessage();
+
+  const handleConfirm = async () => {
+    try {
+      const deletedIds = await deleteMessage.mutateAsync({
+        threadId,
+        messageId,
+      });
+      onDeleted?.(deletedIds);
+      setOpen(false);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "删除消息失败。",
+      );
+    }
+  };
+
+  return (
+    <>
+      <Tooltip content={t.inputBox.deleteMessage}>
+        <Button
+          size="icon-sm"
+          type="button"
+          variant="ghost"
+          className={className}
+          onClick={() => setOpen(true)}
+        >
+          <Trash2Icon size={12} />
+        </Button>
+      </Tooltip>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>{t.inputBox.deleteMessageConfirmTitle}</DialogTitle>
+            <DialogDescription>
+              {t.inputBox.deleteMessageConfirmDescription}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => setOpen(false)}
+              disabled={deleteMessage.isPending}
+            >
+              {t.common.cancel}
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={() => void handleConfirm()}
+              disabled={deleteMessage.isPending}
+            >
+              {t.common.delete}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

frontend-web/src/components/workspace/messages/markdown-content.tsx

@@ -1,79 +1,136 @@
-"use client";
-
-import { useMemo } from "react";
-import type { AnchorHTMLAttributes } from "react";
-
-import {
-  MessageResponse,
-  type MessageResponseProps,
-} from "@/components/ai-elements/message";
-import { streamdownPlugins } from "@/core/streamdown";
-import { cn } from "@/lib/utils";
-
-import { CitationLink } from "../citations/citation-link";
-
-function isExternalUrl(href: string | undefined): boolean {
-  return !!href && /^https?:\/\//.test(href);
-}
-
-export type MarkdownContentProps = {
-  content: string;
-  isLoading: boolean;
-  rehypePlugins: MessageResponseProps["rehypePlugins"];
-  className?: string;
-  remarkPlugins?: MessageResponseProps["remarkPlugins"];
-  components?: MessageResponseProps["components"];
-};
-
-/** Renders markdown content. */
-export function MarkdownContent({
-  content,
-  rehypePlugins,
-  className,
-  remarkPlugins = streamdownPlugins.remarkPlugins,
-  components: componentsFromProps,
-}: MarkdownContentProps) {
-  const components = useMemo(() => {
-    return {
-      a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {
-        if (props.href?.startsWith("#reference-")) {
-          return <CitationLink {...props} />;
-        }
-        if (typeof props.children === "string") {
-          const match = /^citation:(.+)$/.exec(props.children);
-          if (match) {
-            const [, text] = match;
-            return <CitationLink {...props}>{text}</CitationLink>;
-          }
-        }
-        const { className, target, rel, ...rest } = props;
-        const external = isExternalUrl(props.href);
-        return (
-          <a
-            {...rest}
-            className={cn(
-              "text-primary decoration-primary/30 hover:decoration-primary/60 underline underline-offset-2 transition-colors",
-              className,
-            )}
-            target={target ?? (external ? "_blank" : undefined)}
-            rel={rel ?? (external ? "noopener noreferrer" : undefined)}
-          />
-        );
-      },
-      ...componentsFromProps,
-    };
-  }, [componentsFromProps]);
-
-  if (!content) return null;
-
-  return (
-    <MessageResponse
-      className={className}
-      remarkPlugins={remarkPlugins}
-      rehypePlugins={rehypePlugins}
-      components={components}
-    >
-      {content}
-    </MessageResponse>
-  );
-}
+"use client";
+
+import { useMemo } from "react";
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+
+import {
+  MessageResponse,
+  type MessageResponseProps,
+} from "@/components/ai-elements/message";
+import { streamdownPlugins } from "@/core/streamdown";
+import {
+  createMarkdownAnchorResolver,
+  isInPageAnchor,
+  scrollToInPageAnchor,
+} from "@/core/utils/markdown";
+import { cn } from "@/lib/utils";
+
+import { CitationLink } from "../citations/citation-link";
+
+function isExternalUrl(href: string | undefined): boolean {
+  return !!href && /^https?:\/\//.test(href);
+}
+
+function extractTextFromChildren(children: ReactNode): string {
+  if (typeof children === "string" || typeof children === "number") return String(children);
+  if (Array.isArray(children)) return children.map(extractTextFromChildren).join("");
+  return "";
+}
+
+export type MarkdownContentProps = {
+  content: string;
+  isLoading: boolean;
+  rehypePlugins: MessageResponseProps["rehypePlugins"];
+  className?: string;
+  remarkPlugins?: MessageResponseProps["remarkPlugins"];
+  components?: MessageResponseProps["components"];
+};
+
+/** Renders markdown content. */
+export function MarkdownContent({
+  content,
+  rehypePlugins,
+  className,
+  remarkPlugins = streamdownPlugins.remarkPlugins,
+  components: componentsFromProps,
+}: MarkdownContentProps) {
+  const anchorResolver = useMemo(() => createMarkdownAnchorResolver(content), [content]);
+  const components = useMemo(() => {
+    const heading = (level: 1 | 2 | 3 | 4 | 5 | 6) => {
+      const Tag = `h${level}` as const;
+      return ({ children, id, ...props }: HTMLAttributes<HTMLHeadingElement>) => (
+        <Tag id={id ?? anchorResolver.getHeadingId(level, extractTextFromChildren(children))} {...props}>
+          {children}
+        </Tag>
+      );
+    };
+
+    return {
+      h1: heading(1),
+      h2: heading(2),
+      h3: heading(3),
+      h4: heading(4),
+      h5: heading(5),
+      h6: heading(6),
+      a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {
+        if (props.href?.startsWith("#reference-")) {
+          return <CitationLink {...props} />;
+        }
+        if (typeof props.children === "string") {
+          const match = /^citation:(.+)$/.exec(props.children);
+          if (match) {
+            const [, text] = match;
+            return <CitationLink {...props}>{text}</CitationLink>;
+          }
+        }
+        const { className, target, rel, ...rest } = props;
+        const external = isExternalUrl(props.href);
+        const resolvedHref = anchorResolver.resolveHref(
+          props.href,
+          extractTextFromChildren(props.children),
+        );
+        if (resolvedHref === null) {
+          return (
+            <span
+              className={cn(
+                "text-primary/80 decoration-dotted underline underline-offset-2 cursor-not-allowed",
+                className,
+              )}
+              title="未在当前 Markdown 中找到对应章节"
+            >
+              {props.children}
+            </span>
+          );
+        }
+        const finalHref = resolvedHref ?? props.href;
+        return (
+          <a
+            {...rest}
+            href={finalHref}
+            className={cn(
+              "text-primary decoration-primary/30 hover:decoration-primary/60 underline underline-offset-2 transition-colors",
+              className,
+            )}
+            target={target ?? (external ? "_blank" : undefined)}
+            rel={rel ?? (external ? "noopener noreferrer" : undefined)}
+            onClick={(event) => {
+              // HashRouter would turn a `#section` click into a route change → 404.
+              // Scroll to the heading ourselves instead.
+              if (isInPageAnchor(finalHref)) {
+                event.preventDefault();
+                scrollToInPageAnchor(event.currentTarget, finalHref);
+              }
+              rest.onClick?.(event);
+            }}
+          />
+        );
+      },
+      ...componentsFromProps,
+    };
+  }, [anchorResolver, componentsFromProps]);
+
+  if (!content) return null;
+
+  return (
+    <div data-markdown-anchor-root className="contents">
+      <MessageResponse
+        className={className}
+        remarkPlugins={remarkPlugins}
+        rehypePlugins={rehypePlugins}
+        components={components}
+      >
+        {content}
+      </MessageResponse>
+    </div>
+  );
+}

frontend-web/src/components/workspace/messages/message-list-item.tsx

@@ -57,6 +57,7 @@ import { CopyButton } from '../copy-button';
 import { Tooltip } from '../tooltip';
 import { SkillDisplayBlock } from '../skill-display-block';
 import { ThreadContext } from './context';
+import { DeleteMessageButton } from './delete-message-button';
 import { DownloadWordButton } from './download-word-button';
 import { MarkdownContent, type MarkdownContentProps } from './markdown-content';
 import { MessageTokenUsage } from './message-token-usage';
@@ -135,6 +136,7 @@ export function MessageListItem({
   displaySources = [],
   extraRehypePlugins,
   onEditResubmit,
+  onMessageDeleted,
 }: {
   className?: string;
   fitRowToContent?: boolean;
@@ -145,6 +147,7 @@ export function MessageListItem({
   displaySources?: RuntimeDisplaySource[];
   extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
   onEditResubmit?: (text: string) => void;
+  onMessageDeleted?: (deletedIds: string[]) => void;
 }) {
   const isHuman = message.type === 'human';
   const messageMarkdown =
@@ -170,6 +173,7 @@ export function MessageListItem({
         displaySources={displaySources}
         extraRehypePlugins={extraRehypePlugins}
         onEditResubmit={onEditResubmit}
+        onMessageDeleted={onMessageDeleted}
       />
       {/*
         Human messages carry their own inline copy/edit toolbar inside
@@ -214,6 +218,7 @@ function HumanMessageBlock({
   messageTime,
   components,
   onEditResubmit,
+  deleteButton,
 }: {
   text: string;
   pageContext?: EmbeddedPageContext | null;
@@ -221,6 +226,7 @@ function HumanMessageBlock({
   messageTime: { label: string; full: string } | null;
   components: MarkdownContentProps["components"];
   onEditResubmit?: (text: string) => void;
+  deleteButton?: React.ReactNode;
 }) {
   const { t } = useI18n();
   const [editing, setEditing] = useState(false);
@@ -298,10 +304,10 @@ function HumanMessageBlock({
       )}
       <MessageTimeStamp time={messageTime} align="right" />
       {pageContext && <EmbeddedPageContextCard pageContext={pageContext} />}
-      {text && (
+      {(text || deleteButton) && (
         <div className="flex items-center gap-0.5 opacity-0 transition-opacity duration-200 group-hover/conversation-message:opacity-100">
-          <CopyButton clipboardData={text} className="size-6" />
-          {onEditResubmit && (
+          {text && <CopyButton clipboardData={text} className="size-6" />}
+          {text && onEditResubmit && (
             <Tooltip content={t.inputBox.editQuestion}>
               <Button
                 size="icon-sm"
@@ -314,6 +320,7 @@ function HumanMessageBlock({
               </Button>
             </Tooltip>
           )}
+          {deleteButton}
         </div>
       )}
     </div>
@@ -360,6 +367,7 @@ function MessageContent_({
   displaySources = [],
   extraRehypePlugins,
   onEditResubmit,
+  onMessageDeleted,
 }: {
   className?: string;
   message: Message;
@@ -369,6 +377,7 @@ function MessageContent_({
   displaySources?: RuntimeDisplaySource[];
   extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
   onEditResubmit?: (text: string) => void;
+  onMessageDeleted?: (deletedIds: string[]) => void;
 }) {
   const baseRehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
 
@@ -500,6 +509,11 @@ function MessageContent_({
   }
 
   if (isHuman) {
+    // Only the user's own question carries a delete affordance, and only once
+    // it exists server-side (real, non-optimistic id). Deleting it cascades to
+    // its answer on the backend.
+    const canDelete =
+      !!onMessageDeleted && !!message.id && !message.id.startsWith('opt-');
     return (
       <HumanMessageBlock
         text={parsedHumanContent.content}
@@ -508,6 +522,16 @@ function MessageContent_({
         messageTime={messageTime}
         components={components}
         onEditResubmit={onEditResubmit}
+        deleteButton={
+          canDelete ? (
+            <DeleteMessageButton
+              threadId={threadId}
+              messageId={message.id!}
+              onDeleted={(ids) => onMessageDeleted?.(ids)}
+              className="size-6"
+            />
+          ) : null
+        }
       />
     );
   }

frontend-web/src/components/workspace/messages/message-list.tsx

@@ -1,7 +1,7 @@
 import type { Message } from "@langchain/langgraph-sdk";
 import type { BaseStream } from "@langchain/langgraph-sdk/react";
 import { CheckIcon, SendIcon, XIcon } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 
 import {
   Conversation,
@@ -37,6 +37,7 @@ import { resolveAllowMultiple } from "@/roundtable-planning/lib/clarification";
 import { ArtifactFileList } from "../artifacts/artifact-file-list";
 import { StreamingIndicator } from "../streaming-indicator";
 
+import { ThreadContext } from "./context";
 import { MarkdownContent } from "./markdown-content";
 import { MessageGroup } from "./message-group";
 import { MessageListItem } from "./message-list-item";
@@ -88,7 +89,38 @@ export function MessageList({
   );
   const updateSubtask = useUpdateSubtask();
   const { t } = useI18n();
-  const messages = thread.messages;
+  const threadContext = useContext(ThreadContext);
+  // Read-only contexts (public share, mock previews) must not offer deletion.
+  const allowDelete = !threadContext?.publicShareCode && !threadContext?.isMock;
+
+  // Locally hide messages the user just deleted. The server-side checkpoint is
+  // trimmed immediately, but the live `useStream` cache still holds the message
+  // until the next refetch — filtering by id here makes the removal instant and
+  // keeps it hidden for the rest of the session (a reload reads the trimmed
+  // state). Reset whenever the active thread changes.
+  const [hiddenMessageIds, setHiddenMessageIds] = useState<Set<string>>(
+    () => new Set(),
+  );
+  useEffect(() => {
+    setHiddenMessageIds(new Set());
+  }, [threadId]);
+  const handleMessageDeleted = useCallback((deletedIds: string[]) => {
+    if (deletedIds.length === 0) return;
+    setHiddenMessageIds((prev) => {
+      const next = new Set(prev);
+      for (const id of deletedIds) next.add(id);
+      return next;
+    });
+  }, []);
+
+  const allMessages = thread.messages;
+  const messages = useMemo(
+    () =>
+      hiddenMessageIds.size === 0
+        ? allMessages
+        : allMessages.filter((m) => !m.id || !hiddenMessageIds.has(m.id)),
+    [allMessages, hiddenMessageIds],
+  );
 
   // Stamp a wall-clock time onto every question/answer the first time it is
   // seen, in a single batched commit. Questions sent this session already carry
@@ -259,6 +291,9 @@ export function MessageList({
                   displaySources={displaySources}
                   extraRehypePlugins={extraRehypePlugins}
                   onEditResubmit={onEditResubmit}
+                  onMessageDeleted={
+                    allowDelete ? handleMessageDeleted : undefined
+                  }
                 />
               );
             });

frontend-web/src/components/workspace/settings/skill-settings-page.tsx

@@ -3,6 +3,8 @@
 import {
   AlertCircle,
   ArchiveIcon,
+  ArrowDownUpIcon,
+  BookmarkIcon,
   CheckCircle2,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -14,7 +16,6 @@ import {
   Loader2,
   LockIcon,
   PinIcon,
-  PinOffIcon,
   RefreshCwIcon,
   SparklesIcon,
   TagsIcon,
@@ -28,13 +29,6 @@ import { toast } from "sonner";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -45,7 +39,6 @@ import {
 } from "@/components/ui/dialog";
 import {
   Empty,
-  EmptyContent,
   EmptyDescription,
   EmptyHeader,
   EmptyMedia,
@@ -60,6 +53,7 @@ import {
   ItemDescription,
 } from "@/components/ui/item";
 import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { SkillDetailDialog } from "@/components/workspace/skills/skill-detail-dialog";
 import { TagChipList } from "@/components/workspace/tags/tag-chip";
@@ -74,6 +68,7 @@ import {
   useDuplicateSkill,
   useInstallSkillUpload,
   useReconcileCustomSkills,
+  useSetSkillFeatured,
   useSetSkillPinned,
   useSetSkillPublished,
   useSkills,
@@ -100,6 +95,15 @@ export function SkillSettingsPage({ onClose }: { onClose?: () => void } = {}) {
 }
 
 const PAGE_SIZE = 10;
+type SkillSort =
+  | "time_desc"
+  | "time_asc"
+  | "activity_desc"
+  | "activity_asc"
+  | "usage_desc"
+  | "usage_asc"
+  | "name_asc"
+  | "name_desc";
 
 /** 重新扫描成功 toast：仅暗色模式使用，浅色走 Sonner 默认样式 */
 const rescanSuccessToastDarkOptions = {
@@ -144,10 +148,11 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
   const [archiveSheetOpen, setArchiveSheetOpen] = useState(false);
   const [search, setSearch] = useState("");
   const [tagIds, setTagIds] = useState<string[]>([]);
+  const [sort, setSort] = useState<SkillSort>("time_desc");
   const [page, setPage] = useState(1);
   const reconcileMutation = useReconcileCustomSkills();
   // Name + tag filtering is resolved server-side via the /api/skills query.
-  const { skills, isLoading, error } = useSkills({ search, tagIds });
+  const { skills, isLoading, error } = useSkills({ search, tagIds, sort });
 
   const storedAuth = useMemo(() => getStoredAuth(), []);
   const currentUserId = storedAuth?.user_id ?? null;
@@ -193,25 +198,36 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
   }, [skills, currentUserId]);
 
   const filteredSkills = filter === "mine" ? activeMine : activeAll;
+  const orderedSkills = useMemo(
+    () =>
+      filteredSkills
+        .map((skill, index) => ({ skill, index }))
+        .sort((a, b) => {
+          // 置顶(featured)决定排序;钉选(pinned)只管防归档,不影响顺序。
+          const featuredDelta =
+            Number(!!b.skill.featured) - Number(!!a.skill.featured);
+          return featuredDelta || a.index - b.index;
+        })
+        .map(({ skill }) => skill),
+    [filteredSkills],
+  );
   const staleCount = staleVisible.length;
   const archivedCount = archivedVisible.length;
 
-  const totalPages = Math.max(1, Math.ceil(filteredSkills.length / PAGE_SIZE));
+  const totalPages = Math.max(1, Math.ceil(orderedSkills.length / PAGE_SIZE));
   // Filter / search / tag changes may shrink the result set — pull the page
   // back into range without forcing a reset on every keystroke.
   useEffect(() => {
     if (page > totalPages) setPage(totalPages);
   }, [page, totalPages]);
+  useEffect(() => {
+    setPage(1);
+  }, [search, tagIds, sort]);
   const pagedSkills = useMemo(
-    () => filteredSkills.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
-    [filteredSkills, page],
+    () => orderedSkills.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE),
+    [orderedSkills, page],
   );
 
-  const handleCreateSkill = () => {
-    onClose?.();
-    router.push("/?mode=skill");
-  };
-
   const handleRescan = async () => {
     try {
       const result = await reconcileMutation.mutateAsync();
@@ -311,10 +327,6 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
             <Upload className="size-4" />
             {t.settings.skills.installSkill}
           </Button>
-          <Button size="sm" onClick={handleCreateSkill}>
-            <SparklesIcon className="size-4" />
-            {t.settings.skills.createSkill}
-          </Button>
         </div>
       </header>
       <TagSearchBar
@@ -322,36 +334,43 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
         onSearchChange={setSearch}
         tagIds={tagIds}
         onTagIdsChange={setTagIds}
+        actions={
+          <Select value={sort} onValueChange={(v) => setSort(v as SkillSort)}>
+            <SelectTrigger
+              className="h-9 w-full gap-2 px-3 text-xs sm:w-[148px]"
+              title="排序"
+            >
+              <ArrowDownUpIcon className="text-muted-foreground size-3.5" />
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent position="popper" side="bottom" sideOffset={4}>
+              <SelectItem value="time_desc">最新创建</SelectItem>
+              <SelectItem value="time_asc">最早创建</SelectItem>
+              <SelectItem value="activity_desc">最近使用</SelectItem>
+              <SelectItem value="activity_asc">最早使用</SelectItem>
+              <SelectItem value="usage_desc">使用最多</SelectItem>
+              <SelectItem value="usage_asc">使用最少</SelectItem>
+              <SelectItem value="name_asc">名称 A-Z</SelectItem>
+              <SelectItem value="name_desc">名称 Z-A</SelectItem>
+            </SelectContent>
+          </Select>
+        }
       />
       {isLoading && (
         <div className="text-muted-foreground text-sm">{t.common.loading}</div>
       )}
       {error && <div className="text-destructive text-sm">Error: {error.message}</div>}
       {!isLoading && !error && filteredSkills.length === 0 && (
-        <EmptySkill onCreateSkill={handleCreateSkill} />
+        <EmptySkill />
       )}
-      
-      {/* —— 原纵向列表布局（保留备查）——
-      {!isLoading && !error &&
-        filteredSkills.length > 0 &&
-        pagedSkills.map((skill) => (
-          <SkillRow
-            key={skill.name}
-            skill={skill}
-            currentUserId={currentUserId}
-            isAdmin={isAdmin}
-          />
-        ))} */}
-     {/* card */}
       {!isLoading && !error && filteredSkills.length > 0 && (
-        <div className="grid grid-cols-1 items-stretch gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        <div className="flex flex-col gap-3">
           {pagedSkills.map((skill) => (
             <SkillRow
               key={skill.name}
               skill={skill}
               currentUserId={currentUserId}
               isAdmin={isAdmin}
-              className="h-full"
             />
           ))}
         </div>
@@ -408,16 +427,15 @@ export function SkillRow({
   skill,
   currentUserId,
   isAdmin,
-  className,
 }: {
   skill: Skill;
   currentUserId: string | null;
   isAdmin: boolean;
-  className?: string;
 }) {
   const { t } = useI18n();
   const setPublished = useSetSkillPublished();
   const setPinned = useSetSkillPinned();
+  const setFeatured = useSetSkillFeatured();
   const deleteSkill = useDeleteCustomSkill();
   const duplicateSkillMutation = useDuplicateSkill();
   const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
@@ -497,10 +515,22 @@ export function SkillRow({
     }
   }
 
+  async function handleToggleFeatured() {
+    const next = !skill.featured;
+    try {
+      await setFeatured.mutateAsync({ skillName: skill.name, featured: next });
+      toast.success(
+        next
+          ? t.settings.skills.featureSuccess
+          : t.settings.skills.unfeatureSuccess,
+      );
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  }
+
   return (
     <>
-      
-      {/* —— 原 Item 列表行布局（保留备查）——
       <Item className="w-full dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white" variant="outline">
         <ItemContent
           className="cursor-pointer"
@@ -566,6 +596,15 @@ export function SkillRow({
                   {t.settings.skills.badgeSourceUpload}
                 </Badge>
               )}
+              {skill.featured && (
+                <Badge
+                  variant="outline"
+                  className="border-amber-500/30 text-amber-700 dark:text-amber-300 text-xs"
+                  title={t.settings.skills.badgeFeaturedTitle}
+                >
+                  {t.settings.skills.badgeFeatured}
+                </Badge>
+              )}
               {skill.pinned && (
                 <Badge
                   variant="outline"
@@ -610,7 +649,31 @@ export function SkillRow({
             <Button
               size="icon"
               variant="ghost"
-              className="h-8 w-8 shrink-0"
+              className={cn(
+                "h-8 w-8 shrink-0",
+                skill.featured && "text-amber-600 hover:text-amber-700",
+              )}
+              disabled={setFeatured.isPending}
+              onClick={() => void handleToggleFeatured()}
+              title={
+                skill.featured
+                  ? t.settings.skills.unfeatureAction
+                  : t.settings.skills.featureAction
+              }
+            >
+              <PinIcon
+                className={cn("size-3.5", skill.featured && "fill-current")}
+              />
+            </Button>
+          )}
+          {canManage && (
+            <Button
+              size="icon"
+              variant="ghost"
+              className={cn(
+                "h-8 w-8 shrink-0",
+                skill.pinned && "text-emerald-600 hover:text-emerald-700",
+              )}
               disabled={setPinned.isPending}
               onClick={() => void handleTogglePinned()}
               title={
@@ -619,11 +682,9 @@ export function SkillRow({
                   : t.settings.skills.pinAction
               }
             >
-              {skill.pinned ? (
-                <PinOffIcon className="size-3.5" />
-              ) : (
-                <PinIcon className="size-3.5" />
-              )}
+              <BookmarkIcon
+                className={cn("size-3.5", skill.pinned && "fill-current")}
+              />
             </Button>
           )}
           {canTogglePublish && (
@@ -668,205 +729,7 @@ export function SkillRow({
             </Button>
           )}
         </ItemActions>
-      </Item> */}
-
-      <Card
-        className={cn(
-          "group flex h-full min-w-0 cursor-pointer flex-col transition-shadow hover:shadow-md dark:!border-[#213D5E] dark:bg-[#02244C] dark:text-white",
-          className,
-        )}
-        onClick={() => setDetailOpen(true)}
-      >
-        <CardHeader className="min-w-0 flex flex-col gap-0">
-          <div className="flex min-w-0 items-center gap-2">
-            <div className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
-              <SparklesIcon className="h-5 w-5" />
-            </div>
-            <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2 overflow-hidden">
-              <CardTitle
-                className="min-w-0 flex-1 overflow-hidden text-base text-ellipsis whitespace-nowrap"
-                title={desensitize(skill.name)}
-              >
-                {desensitize(skill.name)}
-              </CardTitle>
-              <Badge variant="secondary" className="shrink-0 text-xs">
-                {isBuiltin
-                  ? t.settings.skills.badgeBuiltin
-                  : skill.category}
-              </Badge>
-            </div>
-          </div>
-
-          <div className="mt-4 mb-1.5 flex min-h-5 flex-wrap items-center gap-1">
-            {isOwned && (
-              <Badge
-                variant="default"
-                className="bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300 text-xs"
-              >
-                {t.settings.skills.badgeMine}
-              </Badge>
-            )}
-            {isFromOthers && (
-              <Badge
-                variant="outline"
-                className="border-blue-500/30 text-blue-700 dark:text-blue-300 text-xs"
-                title={
-                  skill.owner_user_id
-                    ? t.settings.skills.badgeFromOthersTitle.replace(
-                        "{user_id}",
-                        skill.owner_user_id,
-                      )
-                    : undefined
-                }
-              >
-                {t.settings.skills.badgeFromOthers}
-              </Badge>
-            )}
-            {isOwned && skill.published && (
-              <Badge
-                variant="outline"
-                className="border-sky-500/30 text-sky-700 dark:text-sky-300 text-xs"
-                title={t.settings.skills.badgePublishedTitle}
-              >
-                <GlobeIcon className="size-3" />
-                {t.settings.skills.badgePublished}
-              </Badge>
-            )}
-            {isCustom && !isBuiltin && skill.source === "agent" && (
-              <Badge
-                variant="outline"
-                className="border-cyan-500/30 text-cyan-700 dark:text-cyan-300 text-xs"
-                title={t.settings.skills.badgeSourceAgentTitle}
-              >
-                {t.settings.skills.badgeSourceAgent}
-              </Badge>
-            )}
-            {isCustom && !isBuiltin && skill.source === "upload" && (
-              <Badge
-                variant="outline"
-                className="border-zinc-400/40 text-zinc-600 dark:text-zinc-400 text-xs"
-                title={t.settings.skills.badgeSourceUploadTitle}
-              >
-                {t.settings.skills.badgeSourceUpload}
-              </Badge>
-            )}
-            {skill.pinned && (
-              <Badge
-                variant="outline"
-                className="border-purple-500/30 text-purple-700 dark:text-purple-300 text-xs"
-                title={t.settings.skills.badgePinnedTitle}
-              >
-                {t.settings.skills.badgePinned}
-              </Badge>
-            )}
-          </div>
-          <div className="mt-1.5 min-h-10 mb-3">
-            {skill.description ? (
-              <CardDescription className="line-clamp-2 text-sm">
-                {desensitize(skill.description)}
-              </CardDescription>
-            ) : null}
-          </div>
-          <div className="text-muted-foreground mt-0.5 min-h-4 text-xs leading-tight">
-            {skill.use_count !== undefined && skill.use_count > 0
-              ? t.settings.skills.useCountInline.replace(
-                  "{count}",
-                  String(skill.use_count),
-                )
-              : t.settings.skills.useCountInlineZero}
-          </div>
-          <div
-            className={cn(
-              "min-w-0 max-w-full overflow-hidden pb-0",
-              (skill.tags?.length ?? 0) > 0 ? "pt-2.5" : "min-h-4",
-            )}
-          >
-            {(skill.tags?.length ?? 0) > 0 && (
-              <TagChipList tags={skill.tags!} className="w-full" />
-            )}
-          </div>
-        </CardHeader>
-
-        <CardFooter
-            className="cursor-default py-0 pt-1.5"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex w-full flex-wrap items-center justify-end gap-1">
-              {isAdmin && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 shrink-0"
-                  onClick={() => setTagPickerOpen(true)}
-                  title={t.adminTags.manageTags}
-                >
-                  <TagsIcon className="h-3.5 w-3.5" />
-                </Button>
-              )}
-              {canManage && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 shrink-0"
-                  disabled={setPinned.isPending}
-                  onClick={() => void handleTogglePinned()}
-                  title={
-                    skill.pinned
-                      ? t.settings.skills.unpinAction
-                      : t.settings.skills.pinAction
-                  }
-                >
-                  {skill.pinned ? (
-                    <PinOffIcon className="h-3.5 w-3.5" />
-                  ) : (
-                    <PinIcon className="h-3.5 w-3.5" />
-                  )}
-                </Button>
-              )}
-              {canTogglePublish && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 shrink-0"
-                  disabled={setPublished.isPending}
-                  onClick={() => void handleTogglePublished(!skill.published)}
-                  title={
-                    skill.published
-                      ? t.settings.skills.unpublishAction
-                      : t.settings.skills.publishAction
-                  }
-                >
-                  {skill.published ? (
-                    <LockIcon className="h-3.5 w-3.5" />
-                  ) : (
-                    <GlobeIcon className="h-3.5 w-3.5" />
-                  )}
-                </Button>
-              )}
-              <Button
-                size="icon"
-                variant="ghost"
-                className="h-8 w-8 shrink-0"
-                disabled={duplicateSkillMutation.isPending}
-                onClick={handleOpenDuplicate}
-                title="复制为新技能"
-              >
-                <CopyIcon className="h-3.5 w-3.5" />
-              </Button>
-              {canManage && (
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
-                  onClick={() => setConfirmDeleteOpen(true)}
-                  title={t.settings.skills.deleteAction}
-                >
-                  <Trash2Icon className="h-3.5 w-3.5" />
-                </Button>
-              )}
-            </div>
-          </CardFooter>
-      </Card>
+      </Item>
       <Dialog open={duplicateOpen} onOpenChange={setDuplicateOpen}>
         <DialogContent>
           <DialogHeader>
@@ -950,7 +813,7 @@ export function SkillRow({
   );
 }
 
-function EmptySkill({ onCreateSkill }: { onCreateSkill: () => void }) {
+function EmptySkill() {
   const { t } = useI18n();
   return (
     <Empty>
@@ -963,9 +826,6 @@ function EmptySkill({ onCreateSkill }: { onCreateSkill: () => void }) {
           {t.settings.skills.emptyDescription}
         </EmptyDescription>
       </EmptyHeader>
-      <EmptyContent>
-        <Button onClick={onCreateSkill}>{t.settings.skills.emptyButton}</Button>
-      </EmptyContent>
     </Empty>
   );
 }

frontend-web/src/components/workspace/tags/tag-search-bar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, SearchIcon } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 
 import { Input } from "@/components/ui/input";
 import { useI18n } from "@/core/i18n/hooks";
@@ -31,12 +31,14 @@ export function TagSearchBar({
   tagIds,
   onTagIdsChange,
   className,
+  actions,
 }: {
   targetType: TagType;
   onSearchChange: (value: string) => void;
   tagIds: string[];
   onTagIdsChange: (value: string[]) => void;
   className?: string;
+  actions?: ReactNode;
 }) {
   const { t } = useI18n();
   const { data: tags } = useTags(targetType);
@@ -67,14 +69,31 @@ export function TagSearchBar({
 
   return (
     <div className={cn("flex flex-col gap-2.5", className)}>
-      <div className="relative">
-        <SearchIcon className="text-muted-foreground dark:text-[#60a5fa]/90 absolute left-2.5 top-1/2 size-4 -translate-y-1/2" />
-        <Input
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          placeholder={t.adminTags.searchPlaceholder}
-          className="pl-8"
-        />
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+        <div className="relative min-w-0 flex-1">
+          <SearchIcon className="text-muted-foreground dark:text-[#60a5fa]/90 absolute left-2.5 top-1/2 size-4 -translate-y-1/2" />
+          <Input
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder={t.adminTags.searchPlaceholder}
+            className="pl-8"
+            name="tag-search"
+            // A `type="password"` field elsewhere on the page (e.g. the private
+            // square access gate) makes browsers / password managers pick the
+            // nearest text input as the "username" and autofill the account into
+            // it. Mark this search box so it is never treated as a credential
+            // field.
+            autoComplete="off"
+            data-1p-ignore
+            data-lpignore="true"
+            data-form-type="other"
+          />
+        </div>
+        {actions && (
+          <div className="flex w-full shrink-0 justify-end sm:w-auto">
+            {actions}
+          </div>
+        )}
       </div>
 
       {allTags.length > 0 && (

frontend-web/src/components/workspace/workspace-nav-menu.tsx

@@ -10,13 +10,15 @@ import {
   HistoryIcon,
   MessageSquareCodeIcon,
   MessageSquarePlusIcon,
+  ScrollTextIcon,
   Settings2Icon,
   SettingsIcon,
   ShieldCheckIcon,
   SparklesIcon,
-  TagsIcon,
-  UsersIcon,
-} from "lucide-react";
+  TagsIcon,
+  TrophyIcon,
+  UsersIcon,
+} from "lucide-react";
 import { useEffect, useState } from "react";
 
 import {
@@ -36,6 +38,10 @@ import {
 import { getStoredAuth } from "@/core/auth";
 import { useI18n } from "@/core/i18n/hooks";
 import { useUnreadCount } from "@/core/notifications";
+import {
+  loadLogSystemSettings,
+  type LogSystemSettings,
+} from "@/core/system-settings/api";
 
 import { NotificationDialog } from "./notification-dialog";
 import { useNavigate } from "react-router-dom";
@@ -71,6 +77,7 @@ export function WorkspaceNavMenu() {
   >("appearance");
   const [notificationOpen, setNotificationOpen] = useState(false);
   const [mounted, setMounted] = useState(false);
+  const [logSystem, setLogSystem] = useState<LogSystemSettings | null>(null);
   const { open: isSidebarOpen } = useSidebar();
   const { t } = useI18n();
   const { data: unreadCount = 0 } = useUnreadCount();
@@ -79,6 +86,21 @@ export function WorkspaceNavMenu() {
     setMounted(true);
   }, []);
 
+  useEffect(() => {
+    if (!isAdmin) return;
+    let cancelled = false;
+    loadLogSystemSettings()
+      .then((settings) => {
+        if (!cancelled) setLogSystem(settings);
+      })
+      .catch(() => {
+        if (!cancelled) setLogSystem(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [isAdmin]);
+
   return (
     <>
       <SettingsDialog
@@ -166,10 +188,20 @@ export function WorkspaceNavMenu() {
                       大模型调用统计
                     </DropdownMenuItem>
                   )}
-                  {isAdmin && (
-                    <DropdownMenuItem
-                      onClick={() => navigate("/page/workspace/admin")}
-                    >
+                  {isAdmin && (
+                    <DropdownMenuItem
+                      onClick={() =>
+                        navigate("/page/strategy/admin/user-leaderboard")
+                      }
+                    >
+                      <TrophyIcon />
+                      用户排行榜
+                    </DropdownMenuItem>
+                  )}
+                  {isAdmin && (
+                    <DropdownMenuItem
+                      onClick={() => navigate("/page/workspace/admin")}
+                    >
                       <UsersIcon />
                       用户中心
                     </DropdownMenuItem>
@@ -208,6 +240,20 @@ export function WorkspaceNavMenu() {
                       {t.adminTags.title}
                     </DropdownMenuItem>
                   )}
+                  {isAdmin && logSystem?.enabled && logSystem.url && (
+                    <DropdownMenuItem
+                      onClick={() =>
+                        window.open(
+                          logSystem.url,
+                          "_blank",
+                          "noopener,noreferrer",
+                        )
+                      }
+                    >
+                      <ScrollTextIcon />
+                      {logSystem.label || "日志系统"}
+                    </DropdownMenuItem>
+                  )}
                 </DropdownMenuGroup>
                 <DropdownMenuSeparator />
               </DropdownMenuContent>