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

package/dist/ui/index.js

@@ -3,13 +3,13 @@ import {
   createReferenceSourcePickerController,
   normalizeDirectoryPath,
   useWorkspaceFileReferencePickerView
-} from "../chunk-KSK6PILG.js";
+} from "../chunk-LJZYN4MH.js";
 import {
   REFERENCE_FILTER_CATEGORIES,
   WORKSPACE_ROOT_GROUP_NODE_ID,
   nodeRefKey,
   selectedReferenceToWorkspaceFileReference
-} from "../chunk-HRC2MZ5H.js";
+} from "../chunk-JURSITRX.js";
 
 // src/ui/internal/reference/WorkspaceFileReferencePicker.tsx
 import {
@@ -21,6 +21,7 @@ import {
 } from "@tutti-os/ui-system";
 
 // src/ui/internal/reference/WorkspaceFileReferencePickerSections.tsx
+import { useId, useState as useState2 } from "react";
 import {
   Badge,
   Button as Button2,
@@ -44,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";
@@ -324,7 +328,17 @@ function WorkspaceFileReferencePickerSearchEntry({
           /* @__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(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(
@@ -392,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" }) }),
@@ -425,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
@@ -486,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", {
@@ -501,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
@@ -647,9 +703,9 @@ function WorkspaceFileReferencePicker({
 // src/ui/internal/reference/ReferenceSourcePicker.tsx
 import {
   useEffect as useEffect3,
-  useId,
+  useId as useId2,
   useRef as useRef2,
-  useState as useState3
+  useState as useState4
 } from "react";
 import { createPortal } from "react-dom";
 import {
@@ -673,15 +729,18 @@ import {
   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
@@ -706,9 +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 [breadcrumbBySource, setBreadcrumbBySource] = useState3({});
+  const [focusedNode, setFocusedNode] = useState3(null);
+  const [arrangeMode, setArrangeMode] = useState3("none");
   const sortNodes = useCallback(
     (nodes) => {
       if (arrangeMode === "none") {
@@ -770,6 +829,9 @@ function useReferenceSourcePickerView({
         [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(() => {
@@ -969,7 +1031,7 @@ function useReferenceSourcePickerView({
     ),
     [snapshot.selection]
   );
-  const [isConfirming, setIsConfirming] = useState2(false);
+  const [isConfirming, setIsConfirming] = useState3(false);
   const confirm = useCallback(async () => {
     if (isConfirming) {
       return;
@@ -985,7 +1047,9 @@ function useReferenceSourcePickerView({
             nodeId: bundle.root.ref.nodeId,
             displayName: bundle.root.displayName,
             iconUrl: bundle.root.iconUrl ?? null,
-            files: bundle.files.map(selectedReferenceToWorkspaceFileReference)
+            handle: bundle.handle,
+            // 展示用文件数:取节点 childCount(不再展开文件);缺省回退 0。
+            fileCount: bundle.root.childCount ?? 0
           }))
         });
       } else {
@@ -997,7 +1061,7 @@ function useReferenceSourcePickerView({
       setIsConfirming(false);
     }
   }, [controller, isConfirming, onClose, onConfirm, onConfirmBundles]);
-  const [previewState, setPreviewState] = useState2({
+  const [previewState, setPreviewState] = useState3({
     status: "empty"
   });
   const previewObjectUrlRef = useRef(null);
@@ -1048,6 +1112,7 @@ function useReferenceSourcePickerView({
             mtimeMs: node.mtimeMs ?? null,
             sizeBytes: node.sizeBytes ?? null
           },
+          renderHtml: true,
           target: {
             fileKind: preview.kind,
             name: node.displayName,
@@ -1067,10 +1132,22 @@ function useReferenceSourcePickerView({
           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,
@@ -1147,7 +1224,7 @@ function useReferenceSourcePickerView({
 
 // src/ui/internal/reference/ReferenceSourcePicker.tsx
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var SIDEBAR_GROUP_PAGE_SIZE = 20;
+var SIDEBAR_GROUP_PAGE_SIZE = 5;
 function autoFitPanelWidth(groupEl, contentEl, panel, trailingPx) {
   if (!groupEl || !contentEl || !panel) {
     return;
@@ -1183,7 +1260,7 @@ function ReferenceSourcePicker({
   open,
   workspaceId
 }) {
-  const titleId = useId();
+  const titleId = useId2();
   const view = useReferenceSourcePickerView({
     aggregator,
     workspaceId,
@@ -1419,8 +1496,7 @@ function ReferenceSourcePicker({
                           copy,
                           node: view.focusedNode,
                           previewState: view.previewState,
-                          sourceLabel: view.activeTabLabel,
-                          hierarchy: resolveHierarchyPath(view)
+                          sourceLabel: view.activeTabLabel
                         }
                       )
                     }
@@ -1471,105 +1547,113 @@ function SourceSidebar({
   useEffect3(() => {
     selectedGroupRef.current?.scrollIntoView({ block: "nearest" });
   }, [view.selectedGroupKey]);
-  const [shownBySource, setShownBySource] = useState3(
+  const [shownBySource, setShownBySource] = useState4(
     {}
   );
   const loadMoreGroups = (sourceId) => {
     const groups = view.sidebarGroupsBySource[sourceId] ?? [];
     const limit = shownBySource[sourceId] ?? SIDEBAR_GROUP_PAGE_SIZE;
-    const selectedIndex = groups.findIndex(
-      (group) => nodeRefKey(group.ref) === view.selectedGroupKey
-    );
-    const visibleCount = selectedIndex >= limit ? selectedIndex + 1 : limit;
-    const next = visibleCount + SIDEBAR_GROUP_PAGE_SIZE;
-    setShownBySource((prev) => ({ ...prev, [sourceId]: next }));
-    if (next > groups.length && (view.sidebarHasMoreBySource[sourceId] ?? false)) {
+    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__ */ jsx4("div", { ref: contentRef, className: "flex flex-col gap-1 p-2", children: view.tabs.map((tab) => {
-    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__ */ jsx4(
-        "p",
-        {
-          className: "px-2 pt-1.5 pb-0.5 text-[11px] font-semibold text-[var(--text-tertiary)]",
-          "data-autofit-label": true,
-          children: tab.label
-        }
-      ),
-      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(
+  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: copy.t("referencePicker.sourceColumn") }),
+    view.tabs.map((tab) => {
+      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__ */ jsx4(
+          "p",
+          {
+            className: "px-2 pt-1.5 pb-0.5 text-[11px] font-semibold text-[var(--text-tertiary)]",
+            "data-autofit-label": true,
+            children: tab.label
+          }
+        ),
+        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] 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),
+              children: [
+                group.iconUrl ? /* @__PURE__ */ jsx4(
+                  "img",
+                  {
+                    alt: "",
+                    className: "size-4 shrink-0 rounded-[3px] object-cover",
+                    src: group.iconUrl
+                  }
+                ) : /* @__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
+          );
+        }),
+        hasMore ? /* @__PURE__ */ jsxs4(
           "button",
           {
-            ref: selected ? selectedGroupRef : void 0,
-            "aria-current": selected ? "true" : void 0,
-            className: cn3(
-              "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)]"
-            ),
+            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: () => view.selectGroup(group),
+            onClick: () => loadMoreGroups(tab.sourceId),
             children: [
-              group.iconUrl ? /* @__PURE__ */ jsx4(
-                "img",
+              loadingMore ? /* @__PURE__ */ jsx4(
+                Spinner2,
                 {
-                  alt: "",
-                  className: "size-4 shrink-0 rounded-[3px] object-cover",
-                  src: group.iconUrl
+                  className: "text-[var(--text-secondary)]",
+                  size: 12
                 }
               ) : /* @__PURE__ */ jsx4(
-                GroupFallbackIcon,
-                {
-                  className: "size-4 shrink-0 text-[var(--rich-text-folder)]",
-                  icon: tab.icon
-                }
-              ),
-              /* @__PURE__ */ jsx4(
-                "span",
+                ChevronDownIcon,
                 {
-                  className: "min-w-0 flex-1 truncate",
-                  "data-autofit-label": true,
-                  children: group.displayName
+                  className: "shrink-0 text-[var(--text-secondary)]",
+                  size: 12
                 }
               ),
-              group.childCount != null ? /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-[11px] text-[var(--text-tertiary)]", children: group.childCount }) : null
+              /* @__PURE__ */ jsx4("span", { children: copy.t("referencePicker.loadMoreGroups") })
             ]
-          },
-          key
-        );
-      }),
-      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
-              }
-            ) : null,
-            /* @__PURE__ */ jsx4("span", { children: copy.t("referencePicker.loadMoreGroups") })
-          ]
-        }
-      ) : null
-    ] }, tab.sourceId);
-  }) }) });
+          }
+        ) : null
+      ] }, tab.sourceId);
+    })
+  ] }) });
 }
 function SearchResultRow({
   node,
@@ -1579,6 +1663,7 @@ function SearchResultRow({
   onToggle
 }) {
   const isFolder = node.kind === "folder";
+  const contextLabel = node.contextLabel ?? node.ref.nodeId;
   return /* @__PURE__ */ jsxs4(
     "div",
     {
@@ -1591,8 +1676,8 @@ function SearchResultRow({
         /* @__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("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.contextLabel ?? node.ref.nodeId })
+            /* @__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(
@@ -1608,7 +1693,7 @@ function SearchResultRow({
               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 })
           }
         )
       ]
@@ -1630,8 +1715,16 @@ function toPreviewSurfaceState(node, previewState, copy) {
         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,
@@ -1660,12 +1753,38 @@ var SOURCE_BADGE_CLASSES = {
   "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,
   previewState,
-  sourceLabel,
-  hierarchy
+  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(
@@ -1675,6 +1794,8 @@ function PreviewInfoPane({
         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"),
@@ -1685,7 +1806,10 @@ function PreviewInfoPane({
         textFrameClassName: "items-stretch justify-stretch"
       }
     ),
-    /* @__PURE__ */ jsx4("p", { className: "truncate text-[15px] font-semibold", children: node.displayName }),
+    /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx4("p", { className: "truncate text-[15px] font-semibold", children: node.displayName }),
+      /* @__PURE__ */ jsx4(ReferencePathText, { node })
+    ] }),
     /* @__PURE__ */ jsxs4("dl", { className: "space-y-2 text-[13px]", children: [
       /* @__PURE__ */ jsx4(InfoRow, { label: copy.t("referencePicker.previewSource"), children: /* @__PURE__ */ jsx4(
         Badge2,
@@ -1697,30 +1821,58 @@ function PreviewInfoPane({
       ) }),
       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
-    ] }),
-    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: copy.t("referencePicker.previewHierarchy") }),
-      /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap items-center gap-y-1 text-[12px] leading-5", children: hierarchy.map((crumb, index) => /* @__PURE__ */ jsxs4(
-        "span",
-        {
-          className: "flex min-w-0 items-center",
-          children: [
-            index > 0 ? /* @__PURE__ */ jsx4("span", { className: "mx-1 shrink-0 text-[var(--text-tertiary)]", children: "/" }) : null,
-            /* @__PURE__ */ jsx4(
-              "span",
-              {
-                className: "max-w-[14ch] truncate text-[var(--text-secondary)]",
-                title: crumb.displayName,
-                children: crumb.displayName
-              }
-            )
-          ]
-        },
-        nodeRefKey(crumb.ref)
-      )) })
-    ] }) : 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",
+      {
+        className: "truncate text-[12px] leading-5 text-[var(--text-tertiary)]",
+        title: pathText,
+        children: pathText
+      }
+    );
+  }
+  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,
   children
@@ -1740,6 +1892,9 @@ 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: "shrink-0 text-[13px] text-[var(--text-secondary)]", children: countLabel }),
@@ -1748,14 +1903,56 @@ function Footer({
         {
           className: "min-w-0 max-w-[12rem]",
           variant: "secondary",
-          children: /* @__PURE__ */ jsx4("span", { className: "truncate", children: node.displayName })
+          children: /* @__PURE__ */ jsx4(FullTextTooltip, { content: node.displayName, children: /* @__PURE__ */ jsx4("span", { className: "truncate", children: node.displayName }) })
         },
         nodeRefKey(node.ref)
       )),
-      selection.length > 2 ? /* @__PURE__ */ jsxs4(Badge2, { className: "shrink-0", variant: "secondary", children: [
-        "+",
-        selection.length - 2
-      ] }) : null
+      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(Button3, { type: "button", variant: "secondary", onClick: onClose, children: cancelLabel }),
@@ -1784,7 +1981,7 @@ function FilterCategoryFilter({
   onClear,
   onToggle
 }) {
-  const [open, setOpen] = useState3(false);
+  const [open, setOpen] = useState4(false);
   const containerRef = useRef2(null);
   useEffect3(() => {
     if (!open) {
@@ -1888,39 +2085,6 @@ var TREE_COLLAPSE_DURATION_MS = 200;
 function isFocused(focused, node) {
   return focused ? nodeRefKey(focused.ref) === nodeRefKey(node.ref) : false;
 }
-function resolveHierarchyPath(view) {
-  const focused = view.focusedNode;
-  if (!focused) {
-    return view.breadcrumb;
-  }
-  const trail = findFocusedTrail(
-    view.currentEntries,
-    view.childrenByKey,
-    nodeRefKey(focused.ref),
-    []
-  );
-  return trail ? [...view.breadcrumb, ...trail] : view.breadcrumb;
-}
-function findFocusedTrail(roots, childrenByKey, targetKey, trail) {
-  for (const node of roots) {
-    if (nodeRefKey(node.ref) === targetKey) {
-      return [...trail];
-    }
-    if (node.kind === "folder") {
-      const children = childrenByKey[nodeRefKey(node.ref)]?.entries ?? [];
-      if (children.length > 0) {
-        const found = findFocusedTrail(children, childrenByKey, targetKey, [
-          ...trail,
-          node
-        ]);
-        if (found) {
-          return found;
-        }
-      }
-    }
-  }
-  return null;
-}
 function TreeNodeRow({
   node,
   depth,
@@ -1934,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);
@@ -2012,14 +2176,14 @@ function TreeNodeRow({
             }
           ) : null,
           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(
+          /* @__PURE__ */ jsx4(FullTextTooltip, { content: node.displayName, children: /* @__PURE__ */ jsx4(
             "span",
             {
               className: "min-w-0 flex-1 truncate text-[13px] text-[var(--text-primary)]",
               "data-autofit-label": true,
               children: node.displayName
             }
-          ),
+          ) }),
           /* @__PURE__ */ jsx4(
             Button3,
             {
@@ -2034,7 +2198,7 @@ function TreeNodeRow({
                 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 })
             }
           )
         ]