@tutti-os/workspace-file-reference 0.0.14 → 0.0.16

package/dist/ui/index.js

@@ -3,27 +3,25 @@ import {
   createReferenceSourcePickerController,
   normalizeDirectoryPath,
   useWorkspaceFileReferencePickerView
-} from "../chunk-CD3YNHYJ.js";
+} from "../chunk-LJZYN4MH.js";
 import {
+  REFERENCE_FILTER_CATEGORIES,
   WORKSPACE_ROOT_GROUP_NODE_ID,
   nodeRefKey,
   selectedReferenceToWorkspaceFileReference
-} from "../chunk-7C3RZYQE.js";
+} from "../chunk-JURSITRX.js";
 
 // src/ui/internal/reference/WorkspaceFileReferencePicker.tsx
-import { useId } from "react";
-import { createPortal } from "react-dom";
 import {
-  Button as Button3,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CloseIcon,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
   cn as cn2
 } from "@tutti-os/ui-system";
 
 // src/ui/internal/reference/WorkspaceFileReferencePickerSections.tsx
+import { useId, useState as useState2 } from "react";
 import {
   Badge,
   Button as Button2,
@@ -47,6 +45,9 @@ import {
   ScrollArea,
   SearchIcon,
   Spinner,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
   cn
 } from "@tutti-os/ui-system";
 import { AddIcon as AddLinedIcon } from "@tutti-os/ui-system/icons";
@@ -160,6 +161,12 @@ function WorkspaceFileReferencePickerTreeEntry({
     }, workspaceFileReferenceTreeCollapseDurationMs);
     return () => window.clearTimeout(timeoutId);
   }, [expanded]);
+  const handleRowSelect = () => {
+    onFocusPath(entry.path);
+    if (isFolder) {
+      onToggleFolder(entry);
+    }
+  };
   const shouldBuildChildContent = expanded || shouldRenderChildContent;
   const childContent = shouldBuildChildContent ? childState?.loading ? /* @__PURE__ */ jsxs(
     "div",
@@ -202,14 +209,24 @@ function WorkspaceFileReferencePickerTreeEntry({
     /* @__PURE__ */ jsxs(
       "div",
       {
+        "aria-current": focused ? "true" : void 0,
         className: cn(
-          "flex items-center gap-2 rounded-[6px] py-1.5 pr-1 transition-colors",
+          "flex cursor-pointer items-center gap-2 rounded-[6px] py-1.5 pr-1 transition-colors select-none",
           "nodrag [-webkit-app-region:no-drag]",
           focused || selected ? "bg-transparency-block" : "hover:bg-transparency-block"
         ),
+        role: "button",
+        tabIndex: 0,
         style: {
           paddingLeft: `${(childDepth - 1) * workspaceFileReferenceTreeIndent + 8}px`
         },
+        onClick: handleRowSelect,
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            handleRowSelect();
+          }
+        },
         children: [
           isFolder ? /* @__PURE__ */ jsx(
             "button",
@@ -232,24 +249,10 @@ function WorkspaceFileReferencePickerTreeEntry({
               )
             }
           ) : null,
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              className: "nodrag flex min-w-0 flex-1 items-center gap-2 text-left [-webkit-app-region:no-drag]",
-              type: "button",
-              onClick: (event) => {
-                event.stopPropagation();
-                onFocusPath(entry.path);
-                if (entry.kind === "folder") {
-                  onToggleFolder(entry);
-                }
-              },
-              children: [
-                isFolder ? /* @__PURE__ */ jsx(FolderFilledIcon, { className: "size-4 shrink-0 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx(FileIcon, { className: "size-4 shrink-0 text-[var(--text-tertiary)]" }),
-                /* @__PURE__ */ jsx("span", { className: "truncate text-[13px] text-[var(--text-primary)]", children: resolveWorkspaceFileReferenceLabel(entry) })
-              ]
-            }
-          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [
+            isFolder ? /* @__PURE__ */ jsx(FolderFilledIcon, { className: "size-4 shrink-0 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx(FileIcon, { className: "size-4 shrink-0 text-[var(--text-tertiary)]" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-[13px] text-[var(--text-primary)]", children: resolveWorkspaceFileReferenceLabel(entry) })
+          ] }),
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -305,30 +308,39 @@ function WorkspaceFileReferencePickerSearchEntry({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "aria-current": focused ? "true" : void 0,
       className: cn(
-        "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-[6px] border py-2.5 pr-1 pl-3 transition-colors",
+        "grid cursor-pointer grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-[6px] border py-2.5 pr-1 pl-3 transition-colors select-none",
         "nodrag [-webkit-app-region:no-drag]",
         focused || selected ? "border-border bg-transparency-block" : "border-transparent bg-transparent hover:border-border/70 hover:bg-transparency-block"
       ),
+      role: "button",
+      tabIndex: 0,
+      onClick: () => onFocusPath(entry.path),
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onFocusPath(entry.path);
+        }
+      },
       children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            className: "nodrag flex min-w-0 items-center gap-3 text-left [-webkit-app-region:no-drag]",
-            type: "button",
-            onClick: (event) => {
-              event.stopPropagation();
-              onFocusPath(entry.path);
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-[var(--transparency-block)] text-[var(--text-tertiary)]", children: isFolder ? /* @__PURE__ */ jsx(FolderFilledIcon, { className: "size-4 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx(FileIcon, { className: "size-4 text-[var(--text-tertiary)]" }) }),
-              /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] font-medium text-[var(--text-primary)]", children: resolveWorkspaceFileReferenceLabel(entry) }),
-                /* @__PURE__ */ jsx("span", { className: "block truncate text-[11px] text-[var(--text-secondary)]", children: entry.path })
-              ] })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs("div", { className: "nodrag flex min-w-0 items-center gap-3 text-left [-webkit-app-region:no-drag]", children: [
+          /* @__PURE__ */ jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-[var(--transparency-block)] text-[var(--text-tertiary)]", children: isFolder ? /* @__PURE__ */ jsx(FolderFilledIcon, { className: "size-4 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx(FileIcon, { className: "size-4 text-[var(--text-tertiary)]" }) }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] font-medium text-[var(--text-primary)]", children: resolveWorkspaceFileReferenceLabel(entry) }),
+            /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 300, children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "block truncate text-[11px] text-[var(--text-secondary)]", children: entry.path }) }),
+              /* @__PURE__ */ jsx(
+                TooltipContent,
+                {
+                  className: "max-w-[min(520px,calc(100vw-32px))] whitespace-normal text-left [overflow-wrap:anywhere]",
+                  side: "top",
+                  children: entry.path
+                }
+              )
+            ] })
+          ] })
+        ] }),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -394,6 +406,8 @@ function WorkspaceFileReferencePreviewSurface({
       directoryMessage: copy.t("referencePicker.previewFolder"),
       emptyMessage: copy.t("referencePicker.previewUnavailable"),
       frameClassName: "flex aspect-[3/2] w-full flex-col items-center justify-center overflow-hidden rounded-[8px] border border-[var(--line-2,var(--border-2))] bg-[var(--transparency-block)] p-0 text-center",
+      htmlFrameClassName: "items-stretch justify-stretch bg-white",
+      htmlTitle: resolveWorkspaceFileReferenceLabel,
       imageAlt: resolveWorkspaceFileReferenceLabel,
       imageFrameClassName: "p-3",
       loadingIndicator: /* @__PURE__ */ jsx2("span", { className: "mx-auto grid size-11 place-items-center rounded-[6px] bg-[var(--transparency-block)]", children: /* @__PURE__ */ jsx2(LoadingIcon, { className: "size-4 animate-spin" }) }),
@@ -427,7 +441,9 @@ function resolveWorkspaceFileReferenceSurfaceState(copy, focusedEntry, previewSt
   switch (previewState.status) {
     case "loading":
     case "image":
+    case "video":
     case "text":
+    case "html":
       return {
         ...previewState,
         entry: focusedEntry
@@ -488,6 +504,9 @@ function WorkspaceFileReferencePickerFooter({
   onConfirm,
   selectedRefs
 }) {
+  const selectedRefsTooltipId = useId();
+  const [selectedRefsTooltipOpen, setSelectedRefsTooltipOpen] = useState2(false);
+  const selectedRefsLabel = selectedRefs.map((ref) => resolveWorkspaceFileReferenceLabel(ref)).join("\n");
   return /* @__PURE__ */ jsxs2("div", { className: "nodrag flex flex-col gap-3 border-t border-[var(--line-1)] px-4 py-4 [-webkit-app-region:no-drag] sm:px-6 lg:flex-row lg:items-center lg:justify-between", children: [
     /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-wrap items-center gap-2 lg:flex-1", children: [
       /* @__PURE__ */ jsx2("span", { className: "text-[13px] text-[var(--text-secondary)]", children: copy.t("referencePicker.selectedCount", {
@@ -503,13 +522,48 @@ function WorkspaceFileReferencePickerFooter({
         ref.path
       )),
       selectedRefs.length > 2 ? /* @__PURE__ */ jsxs2(
-        Badge,
+        "span",
         {
-          className: workspaceFileReferencePickerSelectedBadgeClassName,
-          variant: "secondary",
+          className: "relative inline-flex",
+          onBlur: () => setSelectedRefsTooltipOpen(false),
+          onFocus: () => setSelectedRefsTooltipOpen(true),
+          onMouseEnter: () => setSelectedRefsTooltipOpen(true),
+          onMouseLeave: () => setSelectedRefsTooltipOpen(false),
           children: [
-            "+",
-            selectedRefs.length - 2
+            /* @__PURE__ */ jsx2(
+              Badge,
+              {
+                asChild: true,
+                className: `${workspaceFileReferencePickerSelectedBadgeClassName} cursor-default`,
+                variant: "secondary",
+                children: /* @__PURE__ */ jsxs2(
+                  "button",
+                  {
+                    "aria-describedby": selectedRefsTooltipId,
+                    "aria-label": selectedRefsLabel,
+                    type: "button",
+                    children: [
+                      "+",
+                      selectedRefs.length - 2
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                "aria-hidden": !selectedRefsTooltipOpen,
+                className: "pointer-events-none absolute bottom-[calc(100%+8px)] left-0 z-[var(--z-tooltip,100700)] max-h-[min(20rem,calc(100vh-96px))] w-max max-w-[min(28rem,calc(100vw-32px))] overflow-auto whitespace-pre-line rounded-md border border-[var(--border-1)] bg-[var(--background-fronted)] px-2 py-1 text-left text-[13px] leading-[1.3] text-[var(--text-primary)] shadow-soft transition-opacity duration-100 [overflow-wrap:anywhere]",
+                id: selectedRefsTooltipId,
+                role: "tooltip",
+                style: {
+                  opacity: selectedRefsTooltipOpen ? 1 : 0,
+                  visibility: selectedRefsTooltipOpen ? "visible" : "hidden"
+                },
+                children: selectedRefsLabel
+              }
+            )
           ]
         }
       ) : null
@@ -546,8 +600,6 @@ function WorkspaceFileReferencePickerFeedback2({
 
 // src/ui/internal/reference/WorkspaceFileReferencePicker.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var workspaceFileReferencePickerBackdropMotionClassName = "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:duration-[180ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:animate-none";
-var workspaceFileReferencePickerPanelMotionClassName = "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-[0.96] motion-safe:duration-[250ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:animate-none";
 function WorkspaceFileReferencePicker({
   copy,
   fileAdapter,
@@ -555,9 +607,9 @@ function WorkspaceFileReferencePicker({
   onClose,
   onConfirm,
   open,
+  scoped = false,
   workspaceId
 }) {
-  const titleId = useId();
   const {
     browseRootEntries,
     directoryStateByPath,
@@ -582,52 +634,27 @@ function WorkspaceFileReferencePicker({
     open,
     workspaceId
   });
-  if (!open) {
-    return null;
-  }
-  const dialog = /* @__PURE__ */ jsx3(
-    "div",
+  return /* @__PURE__ */ jsx3(
+    Dialog,
     {
-      className: cn2(
-        "nodrag fixed inset-0 grid place-items-center bg-[var(--backdrop)] px-3 py-4 backdrop-blur-md [-webkit-app-region:no-drag] sm:px-6 sm:py-8",
-        workspaceFileReferencePickerBackdropMotionClassName
-      ),
-      style: { zIndex: "var(--z-panel)" },
-      onClick: onClose,
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) {
+          onClose();
+        }
+      },
       children: /* @__PURE__ */ jsxs3(
-        Card,
+        DialogContent,
         {
-          "aria-labelledby": titleId,
-          "aria-modal": "true",
+          "aria-describedby": void 0,
           className: cn2(
-            "nodrag flex h-[min(88vh,44rem)] w-full max-w-5xl origin-center flex-col gap-0 overflow-hidden border-[var(--line-1)] bg-[var(--background-fronted)] py-0 text-[var(--text-primary)] shadow-panel [-webkit-app-region:no-drag] sm:h-[min(82vh,44rem)]",
-            workspaceFileReferencePickerPanelMotionClassName
+            "nodrag flex h-[min(88vh,44rem)] w-full max-w-5xl flex-col gap-0 overflow-hidden border-[var(--line-1)] bg-[var(--background-fronted)] p-0 text-[var(--text-primary)] shadow-panel [-webkit-app-region:no-drag] sm:h-[min(82vh,44rem)] sm:max-w-5xl"
           ),
-          role: "dialog",
-          onClick: (event) => event.stopPropagation(),
+          overlayClassName: cn2("nodrag", scoped && "!absolute"),
+          portaled: !scoped,
           children: [
-            /* @__PURE__ */ jsx3(
-              CardHeader,
-              {
-                className: "border-b px-4 py-4 sm:px-6 sm:py-5",
-                style: { borderBottomColor: "var(--line-1)" },
-                children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start justify-between gap-4", children: [
-                  /* @__PURE__ */ jsx3("div", { className: "min-w-0", children: /* @__PURE__ */ jsx3(CardTitle, { id: titleId, children: copy.t("referencePicker.title") }) }),
-                  /* @__PURE__ */ jsx3(
-                    Button3,
-                    {
-                      "aria-label": copy.t("actions.cancel"),
-                      size: "icon-sm",
-                      type: "button",
-                      variant: "ghost",
-                      onClick: onClose,
-                      children: /* @__PURE__ */ jsx3(CloseIcon, { size: 16 })
-                    }
-                  )
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxs3(CardContent, { className: "grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto] gap-0 overflow-hidden p-0 lg:grid-cols-[minmax(0,1.15fr)_minmax(20rem,0.85fr)] lg:grid-rows-1", children: [
+            /* @__PURE__ */ jsx3(DialogHeader, { className: "flex-none border-b border-[var(--line-1)] px-4 py-4 sm:px-6 sm:py-5", children: /* @__PURE__ */ jsx3(DialogTitle, { children: copy.t("referencePicker.title") }) }),
+            /* @__PURE__ */ jsxs3("div", { className: "grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto] gap-0 overflow-hidden p-0 lg:grid-cols-[minmax(0,1.15fr)_minmax(20rem,0.85fr)] lg:grid-rows-1", children: [
               /* @__PURE__ */ jsx3(
                 WorkspaceFileReferencePickerBrowserPane,
                 {
@@ -671,10 +698,6 @@ function WorkspaceFileReferencePicker({
       )
     }
   );
-  if (typeof document === "undefined") {
-    return dialog;
-  }
-  return createPortal(dialog, document.body);
 }
 
 // src/ui/internal/reference/ReferenceSourcePicker.tsx
@@ -682,45 +705,58 @@ import {
   useEffect as useEffect3,
   useId as useId2,
   useRef as useRef2,
-  useState as useState3
+  useState as useState4
 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
+import { createPortal } from "react-dom";
 import {
   ArrowRightIcon as ArrowRightIcon2,
   Badge as Badge2,
-  Button as Button4,
-  Card as Card2,
-  CardContent as CardContent2,
-  CardHeader as CardHeader2,
-  CardTitle as CardTitle2,
+  Button as Button3,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
   CheckIcon as CheckIcon2,
-  CloseIcon as CloseIcon2,
+  ChevronDownIcon,
+  CloseIcon,
   FileIcon as FileIcon3,
   FolderFilledIcon as FolderFilledIcon3,
   Input as Input2,
+  IssueIcon,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
   ScrollArea as ScrollArea2,
   SearchIcon as SearchIcon2,
   Spinner as Spinner2,
+  Tooltip as Tooltip2,
+  TooltipContent as TooltipContent2,
+  TooltipTrigger as TooltipTrigger2,
   cn as cn3
 } from "@tutti-os/ui-system";
-import { AddIcon } from "@tutti-os/ui-system/icons";
+import { AddLinedIcon as AddLinedIcon2 } from "@tutti-os/ui-system/icons";
+import {
+  WorkspaceFilePreviewSurface
+} from "@tutti-os/workspace-file-preview/react";
 
 // src/react/internal/reference/useReferenceSourcePickerView.ts
-import { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState3 } from "react";
 import { useSnapshot } from "valtio";
 import {
   sortWorkspaceFileEntriesForArrangeMode
 } from "@tutti-os/workspace-file-manager/services";
-var WORKSPACE_ROOT_GROUP_LABEL = "\u5DE5\u4F5C\u533A";
+import {
+  createWorkspaceFilePreviewLoadedState
+} from "@tutti-os/workspace-file-preview";
 function useReferenceSourcePickerView({
   aggregator,
   workspaceId,
   open,
+  workspaceRootGroupLabel,
+  initialTarget = null,
   onClose,
-  onConfirm
+  onConfirm,
+  onConfirmBundles
 }) {
   const readSnapshot = useSnapshot;
   const scope = useMemo(() => ({ workspaceId }), [workspaceId]);
@@ -729,11 +765,9 @@ function useReferenceSourcePickerView({
     [aggregator, scope]
   );
   const snapshot = readSnapshot(controller.store);
-  const [breadcrumbBySource, setBreadcrumbBySource] = useState2({});
-  const [focusedNode, setFocusedNode] = useState2(null);
-  const [arrangeMode, setArrangeMode] = useState2("none");
-  const [expandedSources, setExpandedSources] = useState2({});
-  const expandSeededRef = useRef(false);
+  const [breadcrumbBySource, setBreadcrumbBySource] = useState3({});
+  const [focusedNode, setFocusedNode] = useState3(null);
+  const [arrangeMode, setArrangeMode] = useState3("none");
   const sortNodes = useCallback(
     (nodes) => {
       if (arrangeMode === "none") {
@@ -757,6 +791,7 @@ function useReferenceSourcePickerView({
     [arrangeMode]
   );
   const autoEnteredSourcesRef = useRef(/* @__PURE__ */ new Set());
+  const appliedInitialTargetRef = useRef(null);
   useEffect2(() => {
     if (!open) {
       return;
@@ -765,13 +800,47 @@ function useReferenceSourcePickerView({
     controller.open();
     setBreadcrumbBySource({});
     setFocusedNode(null);
-    setExpandedSources({});
-    expandSeededRef.current = false;
     autoEnteredSourcesRef.current = /* @__PURE__ */ new Set();
+    appliedInitialTargetRef.current = null;
     return () => {
       controller.close();
     };
   }, [controller, open]);
+  useEffect2(() => {
+    const target = initialTarget;
+    if (!open || !target || appliedInitialTargetRef.current === target) {
+      return;
+    }
+    appliedInitialTargetRef.current = target;
+    autoEnteredSourcesRef.current.add(target.sourceId);
+    let canceled = false;
+    void controller.locatePath(target).then((path) => {
+      if (canceled) {
+        return;
+      }
+      const group = path[0];
+      if (!group) {
+        autoEnteredSourcesRef.current.delete(target.sourceId);
+        return;
+      }
+      controller.setActiveSource(target.sourceId);
+      setBreadcrumbBySource((current) => ({
+        ...current,
+        [group.ref.sourceId]: [group]
+      }));
+      controller.ensureChildren(group);
+      for (const node of path.slice(1)) {
+        controller.expandNode(node);
+      }
+      const deepest = path[path.length - 1];
+      setFocusedNode(path.length > 1 && deepest ? deepest : null);
+    }).catch(() => {
+      autoEnteredSourcesRef.current.delete(target.sourceId);
+    });
+    return () => {
+      canceled = true;
+    };
+  }, [open, initialTarget, controller]);
   const activeSourceId = snapshot.activeSourceId;
   const activeTab = useMemo(
     () => snapshot.tabs.find((tab) => tab.sourceId === activeSourceId) ?? null,
@@ -782,7 +851,8 @@ function useReferenceSourcePickerView({
   const currentNode = breadcrumb.at(-1) ?? null;
   const currentKey = currentNode ? nodeRefKey(currentNode.ref) : ROOT_CHILDREN_KEY;
   const activeTabState = activeSourceId ? snapshot.bySource[activeSourceId] : void 0;
-  const isSearch = activeTabState?.mode === "search" && activeTabState.searchQuery.trim() !== "";
+  const activeFilters = activeTabState?.searchFilters ?? [];
+  const isQuery = activeTabState?.mode === "search" && (activeTabState.searchQuery.trim() !== "" || activeFilters.length > 0);
   const currentChildren = activeTabState?.childrenByKey[currentKey];
   const currentEntries = useMemo(
     () => sortNodes(currentChildren?.entries ?? []),
@@ -811,18 +881,51 @@ function useReferenceSourcePickerView({
         const workspaceRoot = {
           ref: { sourceId, nodeId: WORKSPACE_ROOT_GROUP_NODE_ID },
           kind: "folder",
-          displayName: WORKSPACE_ROOT_GROUP_LABEL
+          displayName: workspaceRootGroupLabel
         };
         result[sourceId] = [workspaceRoot, ...folders];
       }
     }
     return result;
+  }, [
+    snapshot.tabs,
+    snapshot.bySource,
+    aggregator,
+    scope,
+    workspaceRootGroupLabel
+  ]);
+  const sidebarHasMoreBySource = useMemo(() => {
+    const result = {};
+    for (const tab of snapshot.tabs) {
+      const sourceId = tab.sourceId;
+      const provided = aggregator.getLoadedSource(sourceId)?.listSidebarGroups?.(scope);
+      if (provided && provided.length > 0) {
+        result[sourceId] = false;
+        continue;
+      }
+      const root = snapshot.bySource[sourceId]?.childrenByKey[ROOT_CHILDREN_KEY];
+      result[sourceId] = Boolean(root?.nextCursor);
+    }
+    return result;
   }, [snapshot.tabs, snapshot.bySource, aggregator, scope]);
+  const sidebarLoadingMoreBySource = useMemo(() => {
+    const result = {};
+    for (const tab of snapshot.tabs) {
+      const root = snapshot.bySource[tab.sourceId]?.childrenByKey[ROOT_CHILDREN_KEY];
+      result[tab.sourceId] = Boolean(root?.loaded && root.loading);
+    }
+    return result;
+  }, [snapshot.tabs, snapshot.bySource]);
   const sidebarGroups = activeSourceId ? sidebarGroupsBySource[activeSourceId] ?? [] : [];
-  const selectedGroupKey = currentNode != null ? nodeRefKey(currentNode.ref) : activeSourceId && !capabilities?.navigable ? nodeRefKey({
+  const rootGroupNode = breadcrumb[0] ?? null;
+  const searchScopeNodeId = rootGroupNode ? rootGroupNode.ref.nodeId : null;
+  const selectedGroupKey = rootGroupNode ? nodeRefKey(rootGroupNode.ref) : activeSourceId && !capabilities?.navigable ? nodeRefKey({
     sourceId: activeSourceId,
     nodeId: WORKSPACE_ROOT_GROUP_NODE_ID
   }) : null;
+  useEffect2(() => {
+    controller.setSearchScope(searchScopeNodeId);
+  }, [controller, searchScopeNodeId]);
   const setActiveSource = useCallback(
     (sourceId) => {
       controller.setActiveSource(sourceId);
@@ -850,7 +953,7 @@ function useReferenceSourcePickerView({
     [controller]
   );
   useEffect2(() => {
-    if (!open || !activeSourceId || !capabilities?.navigable) {
+    if (!open || !activeSourceId) {
       return;
     }
     if (autoEnteredSourcesRef.current.has(activeSourceId)) {
@@ -867,23 +970,15 @@ function useReferenceSourcePickerView({
     }
     autoEnteredSourcesRef.current.add(activeSourceId);
     enterFolder(firstGroup);
-  }, [
-    open,
-    activeSourceId,
-    capabilities?.navigable,
-    sidebarGroups,
-    breadcrumbBySource,
-    enterFolder
-  ]);
+  }, [open, activeSourceId, sidebarGroups, breadcrumbBySource, enterFolder]);
   useEffect2(() => {
-    if (!open || expandSeededRef.current || !activeSourceId) {
+    if (!open) {
       return;
     }
-    expandSeededRef.current = true;
-    setExpandedSources(
-      (current) => current[activeSourceId] != null ? current : { ...current, [activeSourceId]: true }
-    );
-  }, [open, activeSourceId]);
+    for (const tab of snapshot.tabs) {
+      controller.ensureSourceRoot(tab.sourceId);
+    }
+  }, [open, snapshot.tabs, controller]);
   const navigateToBreadcrumb = useCallback(
     (index) => {
       if (!activeSourceId) {
@@ -924,26 +1019,11 @@ function useReferenceSourcePickerView({
         navigateToRoot(sourceId);
         return;
       }
-      enterFolder(node);
-    },
-    [controller, snapshot.activeSourceId, enterFolder, navigateToRoot]
-  );
-  const isSourceExpanded = useCallback(
-    (sourceId) => expandedSources[sourceId] ?? false,
-    [expandedSources]
-  );
-  const toggleSourceExpanded = useCallback(
-    (sourceId) => {
-      const willExpand = !(expandedSources[sourceId] ?? false);
-      setExpandedSources((current) => ({
-        ...current,
-        [sourceId]: !(current[sourceId] ?? false)
-      }));
-      if (willExpand && !aggregator.getLoadedSource(sourceId)?.listSidebarGroups) {
-        controller.ensureSourceRoot(sourceId);
-      }
+      controller.ensureChildren(node);
+      setBreadcrumbBySource((current) => ({ ...current, [sourceId]: [node] }));
+      setFocusedNode(null);
     },
-    [aggregator, controller, expandedSources]
+    [controller, snapshot.activeSourceId, navigateToRoot]
   );
   const isSelected = useCallback(
     (node) => snapshot.selection.some(
@@ -951,23 +1031,144 @@ function useReferenceSourcePickerView({
     ),
     [snapshot.selection]
   );
-  const [isConfirming, setIsConfirming] = useState2(false);
+  const [isConfirming, setIsConfirming] = useState3(false);
   const confirm = useCallback(async () => {
     if (isConfirming) {
       return;
     }
     setIsConfirming(true);
     try {
-      const selected = await controller.confirm();
-      onConfirm(selected.map(selectedReferenceToWorkspaceFileReference));
+      if (onConfirmBundles) {
+        const grouped = await controller.confirmGrouped();
+        onConfirmBundles({
+          files: grouped.files.map(selectedReferenceToWorkspaceFileReference),
+          bundles: grouped.bundles.map((bundle) => ({
+            sourceId: bundle.root.ref.sourceId,
+            nodeId: bundle.root.ref.nodeId,
+            displayName: bundle.root.displayName,
+            iconUrl: bundle.root.iconUrl ?? null,
+            handle: bundle.handle,
+            // 展示用文件数:取节点 childCount(不再展开文件);缺省回退 0。
+            fileCount: bundle.root.childCount ?? 0
+          }))
+        });
+      } else {
+        const selected = await controller.confirm();
+        onConfirm(selected.map(selectedReferenceToWorkspaceFileReference));
+      }
       onClose();
     } finally {
       setIsConfirming(false);
     }
-  }, [controller, isConfirming, onClose, onConfirm]);
+  }, [controller, isConfirming, onClose, onConfirm, onConfirmBundles]);
+  const [previewState, setPreviewState] = useState3({
+    status: "empty"
+  });
+  const previewObjectUrlRef = useRef(null);
+  const revokePreviewObjectUrl = useCallback(() => {
+    if (previewObjectUrlRef.current) {
+      URL.revokeObjectURL(previewObjectUrlRef.current);
+      previewObjectUrlRef.current = null;
+    }
+  }, []);
+  useEffect2(() => {
+    const node = focusedNode;
+    if (!node) {
+      revokePreviewObjectUrl();
+      setPreviewState({ status: "empty" });
+      return;
+    }
+    if (node.kind === "folder") {
+      revokePreviewObjectUrl();
+      setPreviewState({ node, status: "directory" });
+      return;
+    }
+    const previewable = aggregator.getLoadedSource(node.ref.sourceId)?.capabilities.previewable ?? false;
+    if (!previewable) {
+      revokePreviewObjectUrl();
+      setPreviewState({ node, status: "unsupported" });
+      return;
+    }
+    let cancelled = false;
+    revokePreviewObjectUrl();
+    setPreviewState({ node, status: "loading" });
+    void (async () => {
+      try {
+        const preview = await aggregator.readPreview(scope, node);
+        if (cancelled) {
+          return;
+        }
+        if (!preview) {
+          setPreviewState({ node, status: "unsupported" });
+          return;
+        }
+        const loaded = createWorkspaceFilePreviewLoadedState({
+          bytes: preview.bytes,
+          contentType: preview.contentType,
+          entry: {
+            kind: node.kind,
+            name: node.displayName,
+            path: node.ref.nodeId,
+            mtimeMs: node.mtimeMs ?? null,
+            sizeBytes: node.sizeBytes ?? null
+          },
+          renderHtml: true,
+          target: {
+            fileKind: preview.kind,
+            name: node.displayName,
+            path: node.ref.nodeId,
+            mtimeMs: node.mtimeMs ?? null,
+            sizeBytes: node.sizeBytes ?? null
+          }
+        });
+        if (cancelled) {
+          return;
+        }
+        if (loaded.status === "image") {
+          const objectUrl = URL.createObjectURL(
+            new Blob([loaded.bytes], { type: loaded.contentType })
+          );
+          previewObjectUrlRef.current = objectUrl;
+          setPreviewState({ node, objectUrl, status: "image" });
+          return;
+        }
+        if (loaded.status === "video") {
+          const objectUrl = URL.createObjectURL(
+            new Blob([loaded.bytes], { type: loaded.contentType })
+          );
+          previewObjectUrlRef.current = objectUrl;
+          setPreviewState({ node, objectUrl, status: "video" });
+          return;
+        }
+        if (loaded.status === "text") {
+          setPreviewState({ content: loaded.content, node, status: "text" });
+          return;
+        }
+        if (loaded.status === "html") {
+          setPreviewState({ content: loaded.content, node, status: "html" });
+          return;
+        }
+        setPreviewState({
+          node,
+          reason: loaded.reason,
+          ...loaded.maxSizeBytes == null ? {} : { maxSizeBytes: loaded.maxSizeBytes },
+          status: "readonly"
+        });
+      } catch {
+        if (!cancelled) {
+          setPreviewState({ node, status: "error" });
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [aggregator, focusedNode, revokePreviewObjectUrl, scope]);
+  useEffect2(() => revokePreviewObjectUrl, [revokePreviewObjectUrl]);
   return {
     tabs: snapshot.tabs,
     activeSourceId,
+    previewState,
     activeTabLabel: activeTab?.label ?? "",
     capabilities,
     // 内容区递归就地树:当前选中二级节点的子条目(本地根时为源根子条目)。
@@ -983,15 +1184,25 @@ function useReferenceSourcePickerView({
     currentNode,
     sidebarGroups,
     sidebarGroupsBySource,
-    isSourceExpanded,
-    toggleSourceExpanded,
+    sidebarHasMoreBySource,
+    sidebarLoadingMoreBySource,
+    loadMoreSidebarGroups: (sourceId) => controller.loadMoreSourceRoot(sourceId),
     selectedGroupKey,
     arrangeMode,
     setArrangeMode,
-    isSearch,
+    // 查询态(关键词或筛选任一非空)→ 平铺结果;否则浏览树。
+    isQuery,
     searchQuery: activeTabState?.searchQuery ?? "",
-    isLoading: isSearch ? activeTabState?.isSearchLoading ?? false : currentChildren?.loading ?? false,
-    hasMore: !isSearch && Boolean(currentChildren?.nextCursor),
+    // 当前源支持的文件类型筛选分类(不支持则空数组,picker 据此决定是否展示筛选下拉)。
+    filterCategories: capabilities?.filterable ? REFERENCE_FILTER_CATEGORIES : [],
+    activeFilters,
+    // 搜索态:仅在「还没有任何结果」时显示 spinner;细化关键词(已有结果)时
+    // 保留旧结果直到新结果就绪,避免内容区在 spinner/结果间反复切换造成闪烁。
+    isLoading: isQuery ? (activeTabState?.isSearchLoading ?? false) && (activeTabState?.searchEntries.length ?? 0) === 0 : currentChildren?.loading ?? false,
+    // 查询态:增长式分页是否还有更多;浏览态:cursor 是否有下一页。
+    hasMore: isQuery ? activeTabState?.searchHasMore ?? false : Boolean(currentChildren?.nextCursor),
+    // 底部「加载更多」在途(查询态 = 增长重查;浏览态 = cursor append)。
+    isLoadingMore: isQuery ? activeTabState?.isSearchLoadingMore ?? false : currentChildren?.loading ?? false,
     focusedNode,
     selection: snapshot.selection,
     selectionCount: snapshot.selection.length,
@@ -1001,9 +1212,10 @@ function useReferenceSourcePickerView({
     navigateToBreadcrumb,
     navigateToRoot,
     setFocusedNode,
-    setSearchQuery: (query) => controller.setSearchQuery(query),
+    setSearchQuery: (query) => controller.setSearchQuery(query, searchScopeNodeId),
+    setFilters: (filters) => controller.setSearchFilters(filters, searchScopeNodeId),
     toggleSelection: (node) => controller.toggleSelection(node),
-    loadMore: () => controller.loadMore(currentNode),
+    loadMore: () => isQuery ? controller.loadMoreSearch() : controller.loadMore(currentNode),
     isSelected,
     confirm,
     isConfirming
@@ -1012,17 +1224,7 @@ function useReferenceSourcePickerView({
 
 // src/ui/internal/reference/ReferenceSourcePicker.tsx
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var L = {
-  sourceColumn: "\u5206\u7C7B",
-  selectGroupHint: "\u4ECE\u5DE6\u4FA7\u9009\u62E9\u4E00\u4E2A\u76EE\u5F55",
-  previewSource: "\u4EA7\u51FA\u6765\u6E90",
-  previewModified: "\u4EA7\u51FA\u65F6\u95F4",
-  previewSize: "\u6587\u4EF6\u5927\u5C0F",
-  previewHierarchy: "\u6240\u5C5E\u5C42\u7EA7",
-  reference: "\u5F15\u7528",
-  loadMore: "\u52A0\u8F7D\u66F4\u591A",
-  emptyPreview: "\u9009\u62E9\u4E00\u4E2A\u6587\u4EF6\u67E5\u770B\u8BE6\u60C5"
-};
+var SIDEBAR_GROUP_PAGE_SIZE = 5;
 function autoFitPanelWidth(groupEl, contentEl, panel, trailingPx) {
   if (!groupEl || !contentEl || !panel) {
     return;
@@ -1051,8 +1253,10 @@ function autoFitPanelWidth(groupEl, contentEl, panel, trailingPx) {
 function ReferenceSourcePicker({
   aggregator,
   copy,
+  initialTarget,
   onClose,
   onConfirm,
+  onConfirmBundles,
   open,
   workspaceId
 }) {
@@ -1061,9 +1265,23 @@ function ReferenceSourcePicker({
     aggregator,
     workspaceId,
     open,
+    workspaceRootGroupLabel: copy.t("referencePicker.workspaceRootGroup"),
+    initialTarget,
     onClose,
-    onConfirm
+    onConfirm,
+    onConfirmBundles
   });
+  const activeFilterSet = new Set(view.activeFilters);
+  const toggleFilter = (id) => {
+    const next = new Set(activeFilterSet);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    view.setFilters([...next]);
+  };
+  const clearFilters = () => view.setFilters([]);
   const layoutRef = useRef2(null);
   const sidebarContentRef = useRef2(null);
   const middleContentRef = useRef2(null);
@@ -1092,7 +1310,7 @@ function ReferenceSourcePicker({
       style: { zIndex: "var(--z-panel)" },
       onClick: onClose,
       children: /* @__PURE__ */ jsxs4(
-        Card2,
+        Card,
         {
           "aria-labelledby": titleId,
           "aria-modal": "true",
@@ -1100,38 +1318,45 @@ function ReferenceSourcePicker({
           role: "dialog",
           onClick: (event) => event.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx4(CardHeader2, { className: "gap-3 px-4 pt-4 pb-4 sm:px-6", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-start justify-between gap-4", children: [
-              /* @__PURE__ */ jsx4(CardTitle2, { id: titleId, children: copy.t("referencePicker.title") }),
+            /* @__PURE__ */ jsx4(CardHeader, { className: "gap-3 px-4 pt-4 pb-4 sm:px-6", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-start justify-between gap-4", children: [
+              /* @__PURE__ */ jsx4(CardTitle, { id: titleId, children: copy.t("referencePicker.title") }),
               /* @__PURE__ */ jsx4(
-                Button4,
+                Button3,
                 {
                   "aria-label": copy.t("actions.cancel"),
                   size: "icon-sm",
                   type: "button",
                   variant: "ghost",
                   onClick: onClose,
-                  children: /* @__PURE__ */ jsx4(CloseIcon2, { size: 16 })
+                  children: /* @__PURE__ */ jsx4(CloseIcon, { size: 16 })
                 }
               )
             ] }) }),
-            /* @__PURE__ */ jsx4(CardContent2, { className: "flex min-h-0 flex-1 overflow-hidden border-t border-[var(--line-1)] p-0", children: /* @__PURE__ */ jsx4("div", { ref: layoutRef, className: "flex min-h-0 flex-1", children: /* @__PURE__ */ jsxs4(
+            /* @__PURE__ */ jsx4(CardContent, { className: "flex min-h-0 flex-1 overflow-hidden border-t border-[var(--line-1)] p-0", children: /* @__PURE__ */ jsx4("div", { ref: layoutRef, className: "flex min-h-0 min-w-0 flex-1", children: /* @__PURE__ */ jsxs4(
               ResizablePanelGroup,
               {
-                className: "min-h-0 flex-1",
+                className: "min-h-0 min-w-0 flex-1",
                 orientation: "horizontal",
-                defaultLayout: { sidebar: 2, middle: 5, preview: 3 },
+                defaultLayout: { sidebar: 2.5, middle: 4.5, preview: 3 },
                 children: [
                   /* @__PURE__ */ jsx4(
                     ResizablePanel,
                     {
                       id: "sidebar",
-                      className: "min-h-0 border-r border-[var(--line-1)]",
-                      defaultSize: 20,
-                      minSize: "180px",
+                      className: "min-h-0 min-w-0",
+                      defaultSize: 15,
+                      minSize: "150px",
                       panelRef: (handle) => {
                         sidebarPanelRef.current = handle;
                       },
-                      children: /* @__PURE__ */ jsx4(SourceSidebar, { contentRef: sidebarContentRef, view })
+                      children: /* @__PURE__ */ jsx4(
+                        SourceSidebar,
+                        {
+                          contentRef: sidebarContentRef,
+                          copy,
+                          view
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ jsx4(
@@ -1139,6 +1364,7 @@ function ReferenceSourcePicker({
                     {
                       disableDoubleClick: true,
                       withHandle: true,
+                      className: "after:bg-[var(--line-1)]",
                       onDoubleClick: fitSidebar
                     }
                   ),
@@ -1146,73 +1372,105 @@ function ReferenceSourcePicker({
                     ResizablePanel,
                     {
                       id: "middle",
-                      className: "min-h-0",
+                      className: "min-h-0 min-w-0",
                       defaultSize: 50,
                       minSize: "260px",
                       panelRef: (handle) => {
                         middlePanelRef.current = handle;
                       },
                       children: /* @__PURE__ */ jsxs4("div", { className: "flex h-full min-h-0 flex-col", children: [
-                        /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-2 border-b border-[var(--line-1)] p-3", children: /* @__PURE__ */ jsxs4("div", { className: "relative flex-1", children: [
-                          /* @__PURE__ */ jsx4(SearchIcon2, { className: "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-[var(--text-tertiary)]" }),
-                          /* @__PURE__ */ jsx4(
-                            Input2,
+                        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 border-b border-[var(--line-1)] p-3", children: [
+                          /* @__PURE__ */ jsxs4("div", { className: "relative flex-1", children: [
+                            /* @__PURE__ */ jsx4(SearchIcon2, { className: "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-[var(--text-tertiary)]" }),
+                            /* @__PURE__ */ jsx4(
+                              Input2,
+                              {
+                                className: "pl-9",
+                                placeholder: copy.t(
+                                  "referencePicker.searchPlaceholder"
+                                ),
+                                value: view.searchQuery,
+                                onChange: (event) => view.setSearchQuery(event.target.value)
+                              }
+                            )
+                          ] }),
+                          view.capabilities?.filterable && view.filterCategories.length > 0 ? /* @__PURE__ */ jsx4(
+                            FilterCategoryFilter,
                             {
-                              className: "pl-9",
-                              placeholder: copy.t(
-                                "referencePicker.searchPlaceholder"
-                              ),
-                              value: view.searchQuery,
-                              onChange: (event) => view.setSearchQuery(event.target.value)
+                              categories: view.filterCategories,
+                              copy,
+                              selected: activeFilterSet,
+                              onClear: clearFilters,
+                              onToggle: toggleFilter
                             }
-                          )
-                        ] }) }),
-                        /* @__PURE__ */ jsx4(ScrollArea2, { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxs4(
-                          "div",
+                          ) : null
+                        ] }),
+                        /* @__PURE__ */ jsx4(
+                          ScrollArea2,
                           {
-                            ref: middleContentRef,
-                            className: "flex flex-col gap-[2px] p-3",
-                            children: [
-                              view.isLoading ? /* @__PURE__ */ jsx4(Feedback, { children: /* @__PURE__ */ jsx4(Spinner2, { size: 16 }) }) : view.isSearch ? (
-                                // 搜索:扁平结果
-                                view.searchResults.length === 0 ? /* @__PURE__ */ jsx4(Feedback, { children: copy.t("referencePicker.emptyDirectory") }) : view.searchResults.map((node) => /* @__PURE__ */ jsx4(
-                                  SearchResultRow,
-                                  {
-                                    focused: isFocused(view.focusedNode, node),
-                                    node,
-                                    selected: view.isSelected(node),
-                                    onFocus: view.setFocusedNode,
-                                    onToggle: view.toggleSelection
-                                  },
-                                  nodeRefKey(node.ref)
-                                ))
-                              ) : !hasSelectedGroup ? /* @__PURE__ */ jsx4(Feedback, { children: L.selectGroupHint }) : view.currentEntries.length === 0 ? /* @__PURE__ */ jsx4(Feedback, { children: copy.t("referencePicker.emptyDirectory") }) : (
-                                // 浏览:就地递归展开树(复刻 agent 引用面板文件树交互)
-                                view.currentEntries.map((node) => /* @__PURE__ */ jsx4(
-                                  TreeNodeRow,
-                                  {
-                                    copy,
-                                    depth: 0,
-                                    node,
-                                    view
-                                  },
-                                  nodeRefKey(node.ref)
-                                ))
-                              ),
-                              view.hasMore && hasSelectedGroup && !view.isSearch ? /* @__PURE__ */ jsx4(
-                                Button4,
-                                {
-                                  className: "mt-1 w-full",
-                                  size: "sm",
-                                  type: "button",
-                                  variant: "ghost",
-                                  onClick: view.loadMore,
-                                  children: L.loadMore
+                            className: "min-h-0 flex-1",
+                            viewportProps: {
+                              // 拉到底部(距底 <120px)自动加载更多 —— 查询态走增长式分页,
+                              // 浏览态走 cursor 续页。已在加载/无更多时由 loadMore 内部 no-op。
+                              onScroll: (event) => {
+                                const el = event.currentTarget;
+                                if (view.hasMore && !view.isLoading && !view.isLoadingMore && el.scrollHeight - el.scrollTop - el.clientHeight < 120) {
+                                  view.loadMore();
                                 }
-                              ) : null
-                            ]
+                              }
+                            },
+                            children: /* @__PURE__ */ jsxs4(
+                              "div",
+                              {
+                                ref: middleContentRef,
+                                className: "flex flex-col gap-[2px] p-3",
+                                children: [
+                                  view.isLoading ? /* @__PURE__ */ jsx4(Feedback, { children: /* @__PURE__ */ jsx4(Spinner2, { size: 16 }) }) : view.isQuery ? (
+                                    // 查询态(关键词或筛选):扁平结果
+                                    view.searchResults.length === 0 ? /* @__PURE__ */ jsx4(Feedback, { children: copy.t("referencePicker.emptySearch") }) : view.searchResults.map((node) => /* @__PURE__ */ jsx4(
+                                      SearchResultRow,
+                                      {
+                                        focused: isFocused(view.focusedNode, node),
+                                        node,
+                                        selected: view.isSelected(node),
+                                        onFocus: view.setFocusedNode,
+                                        onToggle: view.toggleSelection
+                                      },
+                                      nodeRefKey(node.ref)
+                                    ))
+                                  ) : !hasSelectedGroup ? /* @__PURE__ */ jsx4(Feedback, { children: copy.t("referencePicker.selectGroupHint") }) : view.currentEntries.length === 0 ? /* @__PURE__ */ jsx4(Feedback, { children: copy.t("referencePicker.emptyDirectory") }) : (
+                                    // 浏览:就地递归展开树(复刻 agent 引用面板文件树交互)
+                                    view.currentEntries.map((node) => /* @__PURE__ */ jsx4(
+                                      TreeNodeRow,
+                                      {
+                                        copy,
+                                        depth: 0,
+                                        node,
+                                        view
+                                      },
+                                      nodeRefKey(node.ref)
+                                    ))
+                                  ),
+                                  view.hasMore && (view.isQuery || hasSelectedGroup) ? /* @__PURE__ */ jsxs4(
+                                    Button3,
+                                    {
+                                      className: "mt-1 w-full",
+                                      disabled: view.isLoadingMore,
+                                      size: "sm",
+                                      type: "button",
+                                      variant: "ghost",
+                                      onClick: view.loadMore,
+                                      children: [
+                                        view.isLoadingMore ? /* @__PURE__ */ jsx4(Spinner2, { className: "text-current", size: 14 }) : null,
+                                        copy.t("referencePicker.loadMore")
+                                      ]
+                                    }
+                                  ) : null
+                                ]
+                              }
+                            )
                           }
-                        ) })
+                        )
                       ] })
                     }
                   ),
@@ -1221,6 +1479,7 @@ function ReferenceSourcePicker({
                     {
                       disableDoubleClick: true,
                       withHandle: true,
+                      className: "after:bg-[var(--line-1)]",
                       onDoubleClick: fitMiddle
                     }
                   ),
@@ -1228,17 +1487,16 @@ function ReferenceSourcePicker({
                     ResizablePanel,
                     {
                       id: "preview",
-                      className: "min-h-0 border-l border-[var(--line-1)]",
+                      className: "min-h-0 min-w-0",
                       defaultSize: 30,
                       minSize: "200px",
                       children: /* @__PURE__ */ jsx4(
                         PreviewInfoPane,
                         {
+                          copy,
                           node: view.focusedNode,
-                          sourceLabel: view.activeTabLabel,
-                          hierarchy: view.breadcrumb,
-                          onReference: view.toggleSelection,
-                          referenced: view.focusedNode ? view.isSelected(view.focusedNode) : false
+                          previewState: view.previewState,
+                          sourceLabel: view.activeTabLabel
                         }
                       )
                     }
@@ -1269,52 +1527,73 @@ function ReferenceSourcePicker({
   if (typeof document === "undefined") {
     return dialog;
   }
-  return createPortal2(dialog, document.body);
+  return createPortal(dialog, document.body);
+}
+function GroupFallbackIcon({
+  icon,
+  className
+}) {
+  if (icon === "issue") {
+    return /* @__PURE__ */ jsx4(IssueIcon, { className });
+  }
+  return /* @__PURE__ */ jsx4(FolderFilledIcon3, { className });
 }
 function SourceSidebar({
+  copy,
   view,
   contentRef
 }) {
+  const selectedGroupRef = useRef2(null);
+  useEffect3(() => {
+    selectedGroupRef.current?.scrollIntoView({ block: "nearest" });
+  }, [view.selectedGroupKey]);
+  const [shownBySource, setShownBySource] = useState4(
+    {}
+  );
+  const loadMoreGroups = (sourceId) => {
+    const groups = view.sidebarGroupsBySource[sourceId] ?? [];
+    const limit = shownBySource[sourceId] ?? SIDEBAR_GROUP_PAGE_SIZE;
+    const visibleCount = Math.max(groups.length, limit);
+    if (groups.length > limit) {
+      setShownBySource((prev) => ({ ...prev, [sourceId]: visibleCount }));
+      return;
+    }
+    if (view.sidebarHasMoreBySource[sourceId] ?? false) {
+      view.loadMoreSidebarGroups(sourceId);
+    }
+  };
   return /* @__PURE__ */ jsx4(ScrollArea2, { className: "h-full min-h-0 w-full", children: /* @__PURE__ */ jsxs4("div", { ref: contentRef, className: "flex flex-col gap-0.5 p-2", children: [
-    /* @__PURE__ */ jsx4("p", { className: "px-2 py-1 text-[11px] font-semibold text-[var(--text-tertiary)]", children: L.sourceColumn }),
+    /* @__PURE__ */ jsx4("p", { className: "px-2 py-1 text-[11px] font-semibold text-[var(--text-tertiary)]", children: copy.t("referencePicker.sourceColumn") }),
     view.tabs.map((tab) => {
-      const active = tab.sourceId === view.activeSourceId;
-      const expanded = view.isSourceExpanded(tab.sourceId);
       const groups = view.sidebarGroupsBySource[tab.sourceId] ?? [];
+      const limit = shownBySource[tab.sourceId] ?? SIDEBAR_GROUP_PAGE_SIZE;
+      const selectedIndex = groups.findIndex(
+        (group) => nodeRefKey(group.ref) === view.selectedGroupKey
+      );
+      const effectiveLimit = selectedIndex >= limit ? selectedIndex + 1 : limit;
+      const visibleGroups = groups.slice(0, effectiveLimit);
+      const loadingMore = view.sidebarLoadingMoreBySource[tab.sourceId] ?? false;
+      const hasMore = groups.length > effectiveLimit || (view.sidebarHasMoreBySource[tab.sourceId] ?? false);
       return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsxs4(
-          "button",
+        /* @__PURE__ */ jsx4(
+          "p",
           {
-            "aria-expanded": expanded,
-            className: cn3(
-              "flex items-center gap-1.5 rounded-[6px] px-2 py-1.5 text-left text-[13px] font-semibold transition-colors hover:bg-transparency-block",
-              active ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)]"
-            ),
-            type: "button",
-            onClick: () => view.toggleSourceExpanded(tab.sourceId),
-            children: [
-              /* @__PURE__ */ jsx4(
-                ArrowRightIcon2,
-                {
-                  className: cn3(
-                    "size-3 shrink-0 text-[var(--text-tertiary)] transition-transform",
-                    expanded && "rotate-90"
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx4("span", { className: "truncate", "data-autofit-label": true, children: tab.label })
-            ]
+            className: "px-2 pt-1.5 pb-0.5 text-[11px] font-semibold text-[var(--text-tertiary)]",
+            "data-autofit-label": true,
+            children: tab.label
           }
         ),
-        expanded ? /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-0.5", children: groups.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "px-2 py-1.5 pl-7 text-[12px] text-[var(--text-tertiary)]", children: view.isLoadingTabs ? "\u2026" : "" }) : groups.map((group) => {
+        groups.length === 0 ? view.isLoadingTabs ? /* @__PURE__ */ jsx4("p", { className: "px-2 py-1 text-[12px] text-[var(--text-tertiary)]", children: "\u2026" }) : null : visibleGroups.map((group) => {
           const key = nodeRefKey(group.ref);
           const selected = key === view.selectedGroupKey;
           return /* @__PURE__ */ jsxs4(
             "button",
             {
+              ref: selected ? selectedGroupRef : void 0,
+              "aria-current": selected ? "true" : void 0,
               className: cn3(
-                "flex items-center gap-2 rounded-[6px] py-1.5 pr-2 pl-7 text-left text-[13px] transition-colors hover:bg-transparency-block",
-                selected ? "bg-transparency-block text-[var(--text-primary)]" : "text-[var(--text-secondary)]"
+                "flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-left text-[13px] transition-colors",
+                selected ? "bg-primary/10 font-medium text-[var(--text-primary)] hover:bg-primary/15" : "text-[var(--text-secondary)] hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)]"
               ),
               type: "button",
               onClick: () => view.selectGroup(group),
@@ -1326,21 +1605,52 @@ function SourceSidebar({
                     className: "size-4 shrink-0 rounded-[3px] object-cover",
                     src: group.iconUrl
                   }
-                ) : /* @__PURE__ */ jsx4(FolderFilledIcon3, { className: "size-4 shrink-0 text-[var(--rich-text-folder)]" }),
-                /* @__PURE__ */ jsx4(
+                ) : /* @__PURE__ */ jsx4(
+                  GroupFallbackIcon,
+                  {
+                    className: "size-4 shrink-0 text-[var(--rich-text-folder)]",
+                    icon: tab.icon
+                  }
+                ),
+                /* @__PURE__ */ jsx4(FullTextTooltip, { content: group.displayName, children: /* @__PURE__ */ jsx4(
                   "span",
                   {
                     className: "min-w-0 flex-1 truncate",
                     "data-autofit-label": true,
                     children: group.displayName
                   }
-                ),
+                ) }),
                 group.childCount != null ? /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-[11px] text-[var(--text-tertiary)]", children: group.childCount }) : null
               ]
             },
             key
           );
-        }) }) : null
+        }),
+        hasMore ? /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            className: "flex items-center gap-1.5 rounded-[6px] px-2 py-1.5 text-left text-[12px] text-[var(--text-secondary)] transition-colors hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)] disabled:opacity-60",
+            disabled: loadingMore,
+            type: "button",
+            onClick: () => loadMoreGroups(tab.sourceId),
+            children: [
+              loadingMore ? /* @__PURE__ */ jsx4(
+                Spinner2,
+                {
+                  className: "text-[var(--text-secondary)]",
+                  size: 12
+                }
+              ) : /* @__PURE__ */ jsx4(
+                ChevronDownIcon,
+                {
+                  className: "shrink-0 text-[var(--text-secondary)]",
+                  size: 12
+                }
+              ),
+              /* @__PURE__ */ jsx4("span", { children: copy.t("referencePicker.loadMoreGroups") })
+            ]
+          }
+        ) : null
       ] }, tab.sourceId);
     })
   ] }) });
@@ -1353,77 +1663,215 @@ function SearchResultRow({
   onToggle
 }) {
   const isFolder = node.kind === "folder";
+  const contextLabel = node.contextLabel ?? node.ref.nodeId;
   return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cn3(
-        "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-[6px] border py-2.5 pr-1 pl-3 transition-colors",
+        "grid cursor-pointer grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-[6px] border py-2.5 pr-1 pl-3 transition-colors",
         focused || selected ? "border-border bg-transparency-block" : "border-transparent bg-transparent hover:border-border/70 hover:bg-transparency-block"
       ),
+      onClick: () => onFocus(node),
       children: [
-        /* @__PURE__ */ jsxs4(
-          "button",
-          {
-            className: "flex min-w-0 items-center gap-3 text-left",
-            type: "button",
-            onClick: () => onFocus(node),
-            children: [
-              /* @__PURE__ */ jsx4("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-[var(--transparency-block)] text-[var(--text-tertiary)]", children: isFolder ? /* @__PURE__ */ jsx4(FolderFilledIcon3, { className: "size-4 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx4(FileIcon3, { className: "size-4 text-[var(--text-tertiary)]" }) }),
-              /* @__PURE__ */ jsxs4("span", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx4("span", { className: "block truncate text-[13px] font-medium text-[var(--text-primary)]", children: node.displayName }),
-                /* @__PURE__ */ jsx4("span", { className: "block truncate text-[11px] text-[var(--text-secondary)]", children: node.ref.nodeId })
-              ] })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 items-center gap-3 text-left", children: [
+          /* @__PURE__ */ jsx4("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-[var(--transparency-block)] text-[var(--text-tertiary)]", children: isFolder ? /* @__PURE__ */ jsx4(FolderFilledIcon3, { className: "size-4 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx4(FileIcon3, { className: "size-4 text-[var(--text-tertiary)]" }) }),
+          /* @__PURE__ */ jsxs4("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx4(FullTextTooltip, { content: node.displayName, children: /* @__PURE__ */ jsx4("span", { className: "block truncate text-[13px] font-medium text-[var(--text-primary)]", children: node.displayName }) }),
+            /* @__PURE__ */ jsx4(FullTextTooltip, { content: contextLabel, children: /* @__PURE__ */ jsx4("span", { className: "block truncate text-[11px] text-[var(--text-secondary)]", children: contextLabel }) })
+          ] })
+        ] }),
         /* @__PURE__ */ jsx4(
-          Button4,
+          Button3,
           {
             "aria-label": node.displayName,
             "aria-pressed": selected,
             size: "icon-sm",
             type: "button",
             variant: "ghost",
-            onClick: () => {
+            onClick: (event) => {
+              event.stopPropagation();
               onFocus(node);
               onToggle(node);
             },
-            children: selected ? /* @__PURE__ */ jsx4(CheckIcon2, { size: 14 }) : /* @__PURE__ */ jsx4(AddIcon, { className: "text-[var(--text-secondary)]", size: 16 })
+            children: selected ? /* @__PURE__ */ jsx4(CheckIcon2, { size: 14 }) : /* @__PURE__ */ jsx4(AddLinedIcon2, { className: "text-[var(--text-secondary)]", size: 16 })
           }
         )
       ]
     }
   );
 }
+function toPreviewSurfaceState(node, previewState, copy) {
+  if (!("node" in previewState) || nodeRefKey(previewState.node.ref) !== nodeRefKey(node.ref)) {
+    return node.kind === "folder" ? { entry: node, status: "directory" } : { entry: node, status: "loading" };
+  }
+  switch (previewState.status) {
+    case "directory":
+      return { entry: node, status: "directory" };
+    case "loading":
+      return { entry: node, status: "loading" };
+    case "image":
+      return {
+        entry: node,
+        objectUrl: previewState.objectUrl,
+        status: "image"
+      };
+    case "video":
+      return {
+        entry: node,
+        objectUrl: previewState.objectUrl,
+        status: "video"
+      };
+    case "text":
+      return { content: previewState.content, entry: node, status: "text" };
+    case "html":
+      return { content: previewState.content, entry: node, status: "html" };
+    case "readonly":
+      return {
+        entry: node,
+        message: previewState.reason === "binary" ? copy.t("referencePicker.previewBinary") : previewState.reason === "file_too_large" || previewState.reason === "text_too_large" ? copy.t("referencePicker.previewTooLarge") : copy.t("referencePicker.previewUnsupported"),
+        status: "readonly"
+      };
+    case "error":
+      return {
+        entry: node,
+        message: copy.t("referencePicker.previewError"),
+        status: "error"
+      };
+    case "unsupported":
+      return {
+        entry: node,
+        message: copy.t("referencePicker.previewUnsupported"),
+        status: "unsupported"
+      };
+  }
+}
+function sourceBadgeClassName(sourceId) {
+  return SOURCE_BADGE_CLASSES[sourceId];
+}
+var SOURCE_BADGE_CLASSES = {
+  "workspace-file": "bg-[color-mix(in_srgb,var(--rich-text-mention-file)_12%,transparent)] text-[var(--rich-text-mention-file)]",
+  "app-artifact": "bg-[color-mix(in_srgb,var(--rich-text-mention-app)_12%,transparent)] text-[var(--rich-text-mention-app)]",
+  "issue-file": "bg-[color-mix(in_srgb,var(--rich-text-mention-issue)_12%,transparent)] text-[var(--rich-text-mention-issue)]"
+};
+function FullTextTooltip({
+  children,
+  content
+}) {
+  return /* @__PURE__ */ jsxs4(Tooltip2, { delayDuration: 300, children: [
+    /* @__PURE__ */ jsx4(TooltipTrigger2, { asChild: true, children }),
+    /* @__PURE__ */ jsx4(
+      TooltipContent2,
+      {
+        className: "max-w-[min(520px,calc(100vw-32px))] whitespace-normal text-left [overflow-wrap:anywhere]",
+        side: "top",
+        style: {
+          maxWidth: "min(520px, calc(100vw - 32px))",
+          overflowWrap: "anywhere",
+          whiteSpace: "normal",
+          backgroundColor: "var(--background-fronted)",
+          border: "1px solid var(--border-1)",
+          borderRadius: 6,
+          boxShadow: "var(--shadow-soft)",
+          color: "var(--text-primary)",
+          padding: "4px 8px"
+        },
+        children: content
+      }
+    )
+  ] });
+}
 function PreviewInfoPane({
+  copy,
   node,
-  sourceLabel,
-  hierarchy,
-  referenced,
-  onReference
+  previewState,
+  sourceLabel
 }) {
   return /* @__PURE__ */ jsx4("aside", { className: "flex h-full min-h-0 w-full flex-col bg-[var(--background-fronted)]", children: node ? /* @__PURE__ */ jsxs4("div", { className: "flex min-h-0 flex-1 flex-col gap-4 p-4", children: [
-    /* @__PURE__ */ jsx4("div", { className: "grid aspect-[3/2] w-full place-items-center rounded-[8px] border border-[var(--line-2,var(--border-2))] bg-[var(--transparency-block)]", children: /* @__PURE__ */ jsx4(FileIcon3, { className: "size-9 text-[var(--text-tertiary)]" }) }),
-    /* @__PURE__ */ jsx4("p", { className: "truncate text-[15px] font-semibold", children: node.displayName }),
-    /* @__PURE__ */ jsxs4("dl", { className: "space-y-2 text-[13px]", children: [
-      /* @__PURE__ */ jsx4(InfoRow, { label: L.previewSource, children: /* @__PURE__ */ jsx4(Badge2, { variant: "secondary", children: sourceLabel }) }),
-      node.mtimeMs != null ? /* @__PURE__ */ jsx4(InfoRow, { label: L.previewModified, children: formatDateTime(node.mtimeMs) }) : null,
-      node.sizeBytes != null ? /* @__PURE__ */ jsx4(InfoRow, { label: L.previewSize, children: formatBytes(node.sizeBytes) }) : null
+    /* @__PURE__ */ jsx4(
+      WorkspaceFilePreviewSurface,
+      {
+        directoryMessage: copy.t("referencePicker.previewFolder"),
+        emptyMessage: copy.t("referencePicker.emptyPreview"),
+        frameClassName: "flex aspect-[3/2] w-full flex-col items-center justify-center overflow-hidden rounded-[8px] border border-[var(--line-2,var(--border-2))] bg-[var(--transparency-block)] p-0 text-center",
+        imageAlt: (entry) => entry.displayName,
+        htmlFrameClassName: "items-stretch justify-stretch bg-white",
+        htmlTitle: (entry) => entry.displayName,
+        imageFrameClassName: "p-3",
+        loadingIndicator: /* @__PURE__ */ jsx4(Spinner2, { size: 16 }),
+        loadingMessage: copy.t("referencePicker.previewLoading"),
+        messageClassName: "mx-auto max-w-[24ch] text-[13px] leading-5 text-[var(--text-secondary)] [overflow-wrap:anywhere]",
+        renderIcon: (entry) => entry.kind === "folder" ? /* @__PURE__ */ jsx4(FolderFilledIcon3, { className: "size-9 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx4(FileIcon3, { className: "size-9 text-[var(--text-tertiary)]" }),
+        state: toPreviewSurfaceState(node, previewState, copy),
+        textClassName: "h-full w-full overflow-auto p-3 text-left text-[11px] leading-5 whitespace-pre-wrap break-words text-[var(--text-primary)]",
+        textFrameClassName: "items-stretch justify-stretch"
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx4("p", { className: "truncate text-[15px] font-semibold", children: node.displayName }),
+      /* @__PURE__ */ jsx4(ReferencePathText, { node })
     ] }),
-    hierarchy.length > 0 ? /* @__PURE__ */ jsxs4("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx4("p", { className: "text-[11px] font-semibold text-[var(--text-tertiary)]", children: L.previewHierarchy }),
-      /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1", children: hierarchy.map((crumb) => /* @__PURE__ */ jsx4(Badge2, { variant: "secondary", children: crumb.displayName }, nodeRefKey(crumb.ref))) })
-    ] }) : null,
-    /* @__PURE__ */ jsx4("div", { className: "mt-auto flex justify-end", children: /* @__PURE__ */ jsx4(
-      Button4,
+    /* @__PURE__ */ jsxs4("dl", { className: "space-y-2 text-[13px]", children: [
+      /* @__PURE__ */ jsx4(InfoRow, { label: copy.t("referencePicker.previewSource"), children: /* @__PURE__ */ jsx4(
+        Badge2,
+        {
+          variant: "secondary",
+          className: sourceBadgeClassName(node.ref.sourceId),
+          children: sourceLabel
+        }
+      ) }),
+      node.mtimeMs != null ? /* @__PURE__ */ jsx4(InfoRow, { label: copy.t("referencePicker.previewModified"), children: formatDateTime(node.mtimeMs) }) : null,
+      node.sizeBytes != null ? /* @__PURE__ */ jsx4(InfoRow, { label: copy.t("referencePicker.previewSize"), children: formatBytes(node.sizeBytes) }) : null
+    ] })
+  ] }) : /* @__PURE__ */ jsx4(Feedback, { children: copy.t("referencePicker.emptyPreview") }) });
+}
+function ReferencePathText({ node }) {
+  const pathText = getReferenceNodePathText(node);
+  const lastSlashIndex = pathText.lastIndexOf("/");
+  if (lastSlashIndex <= 0 || lastSlashIndex === pathText.length - 1) {
+    return /* @__PURE__ */ jsx4(
+      "p",
       {
-        type: "button",
-        variant: referenced ? "secondary" : void 0,
-        onClick: () => onReference(node),
-        children: L.reference
+        className: "truncate text-[12px] leading-5 text-[var(--text-tertiary)]",
+        title: pathText,
+        children: pathText
       }
-    ) })
-  ] }) : /* @__PURE__ */ jsx4(Feedback, { children: L.emptyPreview }) });
+    );
+  }
+  return /* @__PURE__ */ jsxs4(
+    "p",
+    {
+      className: "flex min-w-0 items-center text-[12px] leading-5 text-[var(--text-tertiary)]",
+      title: pathText,
+      children: [
+        /* @__PURE__ */ jsx4("span", { className: "min-w-0 truncate", children: pathText.slice(0, lastSlashIndex + 1) }),
+        /* @__PURE__ */ jsx4("span", { className: "max-w-[65%] shrink-0 truncate", children: pathText.slice(lastSlashIndex + 1) })
+      ]
+    }
+  );
+}
+function getReferenceNodePathText(node) {
+  const decodedPath = decodeReferenceListFileNodeId(node.ref.nodeId);
+  if (decodedPath) {
+    return decodedPath;
+  }
+  return node.contextLabel?.trim() || node.ref.nodeId;
+}
+function decodeReferenceListFileNodeId(nodeId) {
+  if (!nodeId.startsWith("f:")) {
+    return null;
+  }
+  try {
+    const normalized = nodeId.slice(2).replace(/-/g, "+").replace(/_/g, "/");
+    const padded = normalized.padEnd(
+      normalized.length + (4 - normalized.length % 4) % 4,
+      "="
+    );
+    const binary = atob(padded);
+    const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
+    return new TextDecoder().decode(bytes);
+  } catch {
+    return null;
+  }
 }
 function InfoRow({
   label,
@@ -1444,19 +1892,72 @@ function Footer({
   onClose,
   onConfirm
 }) {
+  const selectionTooltipId = useId2();
+  const [selectionTooltipOpen, setSelectionTooltipOpen] = useState4(false);
+  const selectionTooltipLabel = selection.map((node) => node.displayName).join("\n");
   return /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-3 border-t border-[var(--line-1)] px-4 py-3 sm:px-6", children: [
     /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 items-center gap-2", children: [
-      /* @__PURE__ */ jsx4("span", { className: "text-[13px] text-[var(--text-secondary)]", children: countLabel }),
-      selection.slice(0, 2).map((node) => /* @__PURE__ */ jsx4(Badge2, { variant: "secondary", children: /* @__PURE__ */ jsx4("span", { className: "truncate", children: node.displayName }) }, nodeRefKey(node.ref))),
-      selection.length > 2 ? /* @__PURE__ */ jsxs4(Badge2, { variant: "secondary", children: [
-        "+",
-        selection.length - 2
-      ] }) : null
+      /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-[13px] text-[var(--text-secondary)]", children: countLabel }),
+      selection.slice(0, 2).map((node) => /* @__PURE__ */ jsx4(
+        Badge2,
+        {
+          className: "min-w-0 max-w-[12rem]",
+          variant: "secondary",
+          children: /* @__PURE__ */ jsx4(FullTextTooltip, { content: node.displayName, children: /* @__PURE__ */ jsx4("span", { className: "truncate", children: node.displayName }) })
+        },
+        nodeRefKey(node.ref)
+      )),
+      selection.length > 2 ? /* @__PURE__ */ jsxs4(
+        "span",
+        {
+          className: "relative inline-flex shrink-0",
+          onBlur: () => setSelectionTooltipOpen(false),
+          onFocus: () => setSelectionTooltipOpen(true),
+          onMouseEnter: () => setSelectionTooltipOpen(true),
+          onMouseLeave: () => setSelectionTooltipOpen(false),
+          children: [
+            /* @__PURE__ */ jsx4(
+              Badge2,
+              {
+                asChild: true,
+                className: "shrink-0 cursor-default",
+                variant: "secondary",
+                children: /* @__PURE__ */ jsxs4(
+                  "button",
+                  {
+                    "aria-describedby": selectionTooltipId,
+                    "aria-label": selectionTooltipLabel,
+                    type: "button",
+                    children: [
+                      "+",
+                      selection.length - 2
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "span",
+              {
+                "aria-hidden": !selectionTooltipOpen,
+                className: "pointer-events-none absolute bottom-[calc(100%+8px)] left-0 z-[var(--z-tooltip,100700)] max-h-[min(20rem,calc(100vh-96px))] w-max max-w-[min(28rem,calc(100vw-32px))] overflow-auto whitespace-pre-line rounded-md border border-[var(--border-1)] bg-[var(--background-fronted)] px-2 py-1 text-left text-[13px] leading-[1.3] text-[var(--text-primary)] shadow-soft transition-opacity duration-100 [overflow-wrap:anywhere]",
+                id: selectionTooltipId,
+                role: "tooltip",
+                style: {
+                  opacity: selectionTooltipOpen ? 1 : 0,
+                  visibility: selectionTooltipOpen ? "visible" : "hidden"
+                },
+                children: selectionTooltipLabel
+              }
+            )
+          ]
+        }
+      ) : null
     ] }),
     /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx4(Button4, { type: "button", variant: "secondary", onClick: onClose, children: cancelLabel }),
+      /* @__PURE__ */ jsx4(Button3, { type: "button", variant: "secondary", onClick: onClose, children: cancelLabel }),
       /* @__PURE__ */ jsxs4(
-        Button4,
+        Button3,
         {
           disabled: disabled || loading,
           type: "button",
@@ -1473,6 +1974,112 @@ function Footer({
 function Feedback({ children }) {
   return /* @__PURE__ */ jsx4("div", { className: "grid min-h-0 flex-1 place-items-center px-4 py-8 text-center text-[13px] text-[var(--text-secondary)]", children });
 }
+function FilterCategoryFilter({
+  categories,
+  copy,
+  selected,
+  onClear,
+  onToggle
+}) {
+  const [open, setOpen] = useState4(false);
+  const containerRef = useRef2(null);
+  useEffect3(() => {
+    if (!open) {
+      return;
+    }
+    const onPointerDown = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  const selectedLabels = categories.filter((category) => selected.has(category.id)).map((category) => copy.t(category.labelKey));
+  const count = selectedLabels.length;
+  const labelText = count > 0 ? selectedLabels.join(copy.t("referencePicker.fileTypeSeparator")) : copy.t("referencePicker.fileTypeAll");
+  return (
+    // shrink-0:不被搜索框挤压;固定宽度让控件不随选中文案变宽。
+    /* @__PURE__ */ jsxs4("div", { ref: containerRef, className: "relative w-[124px] shrink-0", children: [
+      /* @__PURE__ */ jsxs4(
+        Button3,
+        {
+          "aria-expanded": open,
+          "aria-haspopup": "menu",
+          className: "h-8 w-full justify-between gap-1.5 border-0 px-2.5",
+          size: "default",
+          type: "button",
+          variant: "secondary",
+          onClick: () => setOpen((current) => !current),
+          children: [
+            /* @__PURE__ */ jsx4("span", { className: "min-w-0 flex-1 truncate text-left", title: labelText, children: labelText }),
+            count > 1 ? /* @__PURE__ */ jsx4(Badge2, { className: "shrink-0 px-1.5", variant: "secondary", children: count }) : null,
+            count > 0 ? (
+              // 有选中时,右侧箭头位让位给「清除」:role=button 的 span(避免 button 嵌
+              // button 的非法结构),stopPropagation 让点击只清空筛选、不触发触发器的开合。
+              /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  "aria-label": copy.t("referencePicker.clearFilter"),
+                  className: "grid size-4 shrink-0 cursor-pointer place-items-center rounded-full text-[var(--text-tertiary)] transition-colors hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)]",
+                  role: "button",
+                  tabIndex: 0,
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    onClear();
+                  },
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onClear();
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx4(CloseIcon, { size: 12 })
+                }
+              )
+            ) : /* @__PURE__ */ jsx4(ChevronDownIcon, { className: "size-3.5 shrink-0 text-[var(--text-tertiary)]" })
+          ]
+        }
+      ),
+      open ? /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: "absolute top-[calc(100%+4px)] right-0 min-w-40 overflow-hidden rounded-[8px] border border-[var(--line-1)] bg-[var(--background-fronted)] p-1 shadow-panel",
+          role: "menu",
+          style: { zIndex: "var(--z-panel-popover)" },
+          children: categories.map((category) => {
+            const checked = selected.has(category.id);
+            return /* @__PURE__ */ jsxs4(
+              "button",
+              {
+                "aria-checked": checked,
+                className: "flex w-full items-center gap-2 rounded-[6px] px-2 py-1.5 text-left text-[13px] text-[var(--text-primary)] transition-colors hover:bg-[var(--transparency-hover)]",
+                role: "menuitemcheckbox",
+                type: "button",
+                onClick: () => onToggle(category.id),
+                children: [
+                  /* @__PURE__ */ jsx4("span", { className: "grid size-4 shrink-0 place-items-center", children: checked ? /* @__PURE__ */ jsx4(CheckIcon2, { className: "size-3.5 text-[var(--tutti-purple)]" }) : null }),
+                  /* @__PURE__ */ jsx4("span", { className: "flex-1", children: copy.t(category.labelKey) })
+                ]
+              },
+              category.id
+            );
+          })
+        }
+      ) : null
+    ] })
+  );
+}
 var TREE_INDENT = 28;
 var TREE_COLLAPSE_DURATION_MS = 200;
 function isFocused(focused, node) {
@@ -1491,7 +2098,7 @@ function TreeNodeRow({
   const childEntries = view.sortNodes(childState?.entries ?? []);
   const selected = view.isSelected(node);
   const focused = isFocused(view.focusedNode, node);
-  const [shouldRenderChildContent, setShouldRenderChildContent] = useState3(expanded);
+  const [shouldRenderChildContent, setShouldRenderChildContent] = useState4(expanded);
   useEffect3(() => {
     if (expanded) {
       setShouldRenderChildContent(true);
@@ -1535,10 +2142,16 @@ function TreeNodeRow({
       "div",
       {
         className: cn3(
-          "flex items-center gap-2 rounded-[6px] py-1.5 pr-1 transition-colors",
+          "flex cursor-pointer items-center gap-2 rounded-[6px] py-1.5 pr-1 transition-colors",
           focused || selected ? "bg-transparency-block" : "hover:bg-transparency-block"
         ),
         style: { paddingLeft: `${depth * TREE_INDENT + 8}px` },
+        onClick: () => {
+          view.setFocusedNode(node);
+          if (isFolder) {
+            view.toggleNode(node);
+          }
+        },
         children: [
           isFolder ? /* @__PURE__ */ jsx4(
             "button",
@@ -1546,7 +2159,11 @@ function TreeNodeRow({
               "aria-label": node.displayName,
               className: "grid size-5 shrink-0 place-items-center rounded-sm text-[var(--text-secondary)] hover:bg-[var(--transparency-hover)]",
               type: "button",
-              onClick: () => view.toggleNode(node),
+              onClick: (event) => {
+                event.stopPropagation();
+                view.setFocusedNode(node);
+                view.toggleNode(node);
+              },
               children: /* @__PURE__ */ jsx4(
                 ArrowRightIcon2,
                 {
@@ -1558,32 +2175,17 @@ function TreeNodeRow({
               )
             }
           ) : null,
-          /* @__PURE__ */ jsxs4(
-            "button",
+          isFolder ? /* @__PURE__ */ jsx4(FolderFilledIcon3, { className: "size-4 shrink-0 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx4(FileIcon3, { className: "size-4 shrink-0 text-[var(--text-tertiary)]" }),
+          /* @__PURE__ */ jsx4(FullTextTooltip, { content: node.displayName, children: /* @__PURE__ */ jsx4(
+            "span",
             {
-              className: "flex min-w-0 flex-1 items-center gap-2 text-left",
-              type: "button",
-              onClick: () => {
-                view.setFocusedNode(node);
-                if (isFolder) {
-                  view.toggleNode(node);
-                }
-              },
-              children: [
-                isFolder ? /* @__PURE__ */ jsx4(FolderFilledIcon3, { className: "size-4 shrink-0 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx4(FileIcon3, { className: "size-4 shrink-0 text-[var(--text-tertiary)]" }),
-                /* @__PURE__ */ jsx4(
-                  "span",
-                  {
-                    className: "truncate text-[13px] text-[var(--text-primary)]",
-                    "data-autofit-label": true,
-                    children: node.displayName
-                  }
-                )
-              ]
+              className: "min-w-0 flex-1 truncate text-[13px] text-[var(--text-primary)]",
+              "data-autofit-label": true,
+              children: node.displayName
             }
-          ),
+          ) }),
           /* @__PURE__ */ jsx4(
-            Button4,
+            Button3,
             {
               "aria-label": node.displayName,
               "aria-pressed": selected,
@@ -1591,11 +2193,12 @@ function TreeNodeRow({
               size: "icon-sm",
               type: "button",
               variant: "ghost",
-              onClick: () => {
+              onClick: (event) => {
+                event.stopPropagation();
                 view.setFocusedNode(node);
                 view.toggleSelection(node);
               },
-              children: selected ? /* @__PURE__ */ jsx4(CheckIcon2, { size: 14 }) : /* @__PURE__ */ jsx4(AddIcon, { className: "text-[var(--text-secondary)]", size: 16 })
+              children: selected ? /* @__PURE__ */ jsx4(CheckIcon2, { size: 14 }) : /* @__PURE__ */ jsx4(AddLinedIcon2, { className: "text-[var(--text-secondary)]", size: 16 })
             }
           )
         ]