@arbidocs/react 0.3.100 → 0.3.101

package/dist/index.cjs

@@ -1,14 +1,47 @@
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var browser = require('@arbidocs/sdk/browser');
 var jsxRuntime = require('react/jsx-runtime');
 var reactQuery = require('@tanstack/react-query');
+var reactDom = require('react-dom');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var AvatarPrimitive = require('@radix-ui/react-avatar');
+var classVarianceAuthority = require('class-variance-authority');
+var reactSlot = require('@radix-ui/react-slot');
+var HoverCardPrimitive = require('@radix-ui/react-hover-card');
+var lucideReact = require('lucide-react');
+var agGridReact = require('ag-grid-react');
+var agGridCommunity = require('ag-grid-community');
+var zustand = require('zustand');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
+var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
 
 // src/ArbiProvider.tsx
-var ArbiContext = react.createContext(null);
+var ArbiContext = React.createContext(null);
 function ArbiProvider({ children, ...options }) {
-  const arbi = react.useMemo(
+  const arbi = React.useMemo(
     () => new browser.Arbi(options),
     // Stable on url + deploymentDomain — re-creating the instance on every render would be wrong
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -340,7 +373,7 @@ function agentStatusStyle(theme) {
   };
 }
 function useArbi() {
-  const arbi = react.useContext(ArbiContext);
+  const arbi = React.useContext(ArbiContext);
   if (!arbi) {
     throw new Error("useArbi() must be used within an <ArbiProvider>");
   }
@@ -348,16 +381,16 @@ function useArbi() {
 }
 function AuthScreen({ theme, labels, onLogin }) {
   const arbi = useArbi();
-  const [mode, setMode] = react.useState("login");
-  const [step, setStep] = react.useState("email");
-  const [email, setEmail] = react.useState("");
-  const [password, setPassword] = react.useState("");
-  const [confirmPw, setConfirmPw] = react.useState("");
-  const [code, setCode] = react.useState("");
-  const [firstName, setFirstName] = react.useState("");
-  const [lastName, setLastName] = react.useState("");
-  const [loading, setLoading] = react.useState(false);
-  const [error, setError] = react.useState("");
+  const [mode, setMode] = React.useState("login");
+  const [step, setStep] = React.useState("email");
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [confirmPw, setConfirmPw] = React.useState("");
+  const [code, setCode] = React.useState("");
+  const [firstName, setFirstName] = React.useState("");
+  const [lastName, setLastName] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState("");
   const resetForm = () => {
     setPassword("");
     setConfirmPw("");
@@ -664,11 +697,11 @@ function useHealth(options) {
 function WorkspaceScreen({ theme, labels, onSelect }) {
   const arbi = useArbi();
   const { data: workspaces, isLoading } = useWorkspaces();
-  const [mode, setMode] = react.useState("select");
-  const [selected, setSelected] = react.useState("");
-  const [newName, setNewName] = react.useState("");
-  const [loading, setLoading] = react.useState(false);
-  const [error, setError] = react.useState("");
+  const [mode, setMode] = React.useState("select");
+  const [selected, setSelected] = React.useState("");
+  const [newName, setNewName] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState("");
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style: loadingContainerStyle(), children: "Loading workspaces..." });
   }
@@ -823,7 +856,7 @@ function renderWithCitations(text, theme, onCiteClick) {
   return nodes.length > 0 ? nodes : [text];
 }
 function MessageBubble({ message, theme }) {
-  const [expandedCite, setExpandedCite] = react.useState(null);
+  const [expandedCite, setExpandedCite] = React.useState(null);
   const hasCitations = message.role === "assistant" && message.metadata && CITE_RE.test(message.text);
   CITE_RE.lastIndex = 0;
   const resolved = hasCitations ? browser.resolveCitations(message.metadata) : [];
@@ -903,22 +936,22 @@ function ChatView({ workspaceId, theme, labels }) {
   const arbi = useArbi();
   const { data: docs, refetch: refetchDocs } = useDocuments(workspaceId);
   const mutation = useAssistantQuery();
-  const [messages, setMessages] = react.useState([]);
-  const [input, setInput] = react.useState("");
-  const [streaming, setStreaming] = react.useState("");
-  const [agentStatus, setAgentStatus] = react.useState("");
-  const [selectedDocs, setSelectedDocs] = react.useState([]);
-  const [docsExpanded, setDocsExpanded] = react.useState(false);
-  const [previousResponseId, setPreviousResponseId] = react.useState(null);
-  const [uploading, setUploading] = react.useState(false);
-  const messagesEndRef = react.useRef(null);
-  const fileInputRef = react.useRef(null);
-  react.useEffect(() => {
+  const [messages, setMessages] = React.useState([]);
+  const [input, setInput] = React.useState("");
+  const [streaming, setStreaming] = React.useState("");
+  const [agentStatus, setAgentStatus] = React.useState("");
+  const [selectedDocs, setSelectedDocs] = React.useState([]);
+  const [docsExpanded, setDocsExpanded] = React.useState(false);
+  const [previousResponseId, setPreviousResponseId] = React.useState(null);
+  const [uploading, setUploading] = React.useState(false);
+  const messagesEndRef = React.useRef(null);
+  const fileInputRef = React.useRef(null);
+  React.useEffect(() => {
     if (docs && docs.length > 0 && selectedDocs.length === 0) {
       setSelectedDocs(docs.map((d) => d.external_id));
     }
   }, [docs, selectedDocs.length]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, streaming, agentStatus]);
   const toggleDoc = (docId) => {
@@ -926,7 +959,7 @@ function ChatView({ workspaceId, theme, labels }) {
       (prev) => prev.includes(docId) ? prev.filter((id) => id !== docId) : [...prev, docId]
     );
   };
-  const handleUpload = react.useCallback(
+  const handleUpload = React.useCallback(
     async (e) => {
       const files = e.target.files;
       if (!files || files.length === 0) return;
@@ -947,7 +980,7 @@ function ChatView({ workspaceId, theme, labels }) {
     },
     [arbi, refetchDocs]
   );
-  const handleSubmit = react.useCallback(
+  const handleSubmit = React.useCallback(
     (e) => {
       e.preventDefault();
       const question = input.trim();
@@ -1078,25 +1111,30 @@ function ChatView({ workspaceId, theme, labels }) {
 }
 function ChatWidget({ theme, labels, initialWorkspaceId, width, height }) {
   const arbi = useArbi();
-  const [screen, setScreen] = react.useState("auth");
-  const [workspaceId, setWorkspaceId] = react.useState(initialWorkspaceId);
-  const handleLogin = react.useCallback(async () => {
+  const [screen, setScreen] = React.useState("auth");
+  const [workspaceId, setWorkspaceId] = React.useState(initialWorkspaceId);
+  const resolveWorkspace = React.useCallback(async () => {
     if (initialWorkspaceId) {
       try {
         await arbi.selectWorkspace(initialWorkspaceId);
         setScreen("chat");
+        return;
       } catch {
         setScreen("workspace");
+        return;
       }
-    } else {
-      setScreen("workspace");
     }
+    setScreen("workspace");
   }, [arbi, initialWorkspaceId]);
-  const handleWorkspaceSelect = react.useCallback((id) => {
+  const handleLogin = React.useCallback(() => resolveWorkspace(), [resolveWorkspace]);
+  React.useEffect(() => {
+    if (arbi.isLoggedIn) void resolveWorkspace();
+  }, [arbi, resolveWorkspace]);
+  const handleWorkspaceSelect = React.useCallback((id) => {
     setWorkspaceId(id);
     setScreen("chat");
   }, []);
-  const handleChangeWorkspace = react.useCallback(() => {
+  const handleChangeWorkspace = React.useCallback(() => {
     setScreen("workspace");
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle(theme, width, height), children: [
@@ -1125,6 +1163,26 @@ function ChatWidget({ theme, labels, initialWorkspaceId, width, height }) {
     ] })
   ] });
 }
+function ArbiChatPanel({
+  workspaceId,
+  theme: themeOverrides,
+  labels: labelOverrides,
+  width = "100%",
+  height = "100%"
+}) {
+  const theme = React.useMemo(() => getTheme(themeOverrides), [themeOverrides]);
+  const labels = React.useMemo(() => getLabels(labelOverrides), [labelOverrides]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChatWidget,
+    {
+      theme,
+      labels,
+      initialWorkspaceId: workspaceId,
+      width,
+      height
+    }
+  );
+}
 function ArbiChat({
   url,
   workspaceId,
@@ -1133,7 +1191,7 @@ function ArbiChat({
   width = "400px",
   height = "600px"
 }) {
-  const queryClient = react.useMemo(
+  const queryClient = React.useMemo(
     () => new reactQuery.QueryClient({
       defaultOptions: {
         queries: { retry: 1, refetchOnWindowFocus: false },
@@ -1142,19 +1200,1262 @@ function ArbiChat({
     }),
     []
   );
-  const theme = react.useMemo(() => getTheme(themeOverrides), [themeOverrides]);
-  const labels = react.useMemo(() => getLabels(labelOverrides), [labelOverrides]);
   return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntime.jsx(ArbiProvider, { url, children: /* @__PURE__ */ jsxRuntime.jsx(
-    ChatWidget,
+    ArbiChatPanel,
     {
-      theme,
-      labels,
-      initialWorkspaceId: workspaceId,
+      workspaceId,
+      theme: themeOverrides,
+      labels: labelOverrides,
       width,
       height
     }
   ) }) });
 }
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var TooltipContext = React__namespace.createContext(null);
+var TooltipProvider = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+function Tooltip({ children, delayDuration = 300 }) {
+  const [open, setOpen] = React__namespace.useState(false);
+  const triggerRef = React__namespace.useRef(null);
+  const timer = React__namespace.useRef(null);
+  const contentId = React__namespace.useId();
+  const clearTimer = () => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+  };
+  const show = React__namespace.useCallback(() => {
+    clearTimer();
+    timer.current = setTimeout(() => setOpen(true), delayDuration);
+  }, [delayDuration]);
+  const hide = React__namespace.useCallback(() => {
+    clearTimer();
+    setOpen(false);
+  }, []);
+  const setTrigger = React__namespace.useCallback((el) => {
+    triggerRef.current = el;
+  }, []);
+  React__namespace.useEffect(() => () => clearTimer(), []);
+  const value = React__namespace.useMemo(
+    () => ({ open, show, hide, setTrigger, triggerRef, contentId }),
+    [open, show, hide, setTrigger, contentId]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipContext.Provider, { value, children });
+}
+function TooltipTrigger({ asChild, children, ...props }) {
+  const ctx = React__namespace.useContext(TooltipContext);
+  if (!ctx) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  const triggerHandlers = {
+    onPointerEnter: (e) => {
+      props.onPointerEnter?.(e);
+      ctx.show();
+    },
+    onPointerLeave: (e) => {
+      props.onPointerLeave?.(e);
+      ctx.hide();
+    },
+    onFocus: (e) => {
+      props.onFocus?.(e);
+      ctx.show();
+    },
+    onBlur: (e) => {
+      props.onBlur?.(e);
+      ctx.hide();
+    },
+    "aria-describedby": ctx.open ? ctx.contentId : void 0,
+    "data-state": ctx.open ? "open" : "closed"
+  };
+  if (asChild && React__namespace.isValidElement(children)) {
+    const child = children;
+    return React__namespace.cloneElement(child, {
+      ...props,
+      ...triggerHandlers,
+      ref: ctx.setTrigger
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      ...props,
+      ...triggerHandlers,
+      ref: ctx.setTrigger,
+      children
+    }
+  );
+}
+var TRANSFORM_BY_SIDE = {
+  top: "translate(-50%, -100%)",
+  bottom: "translate(-50%, 0)",
+  left: "translate(-100%, -50%)",
+  right: "translate(0, -50%)"
+};
+var TooltipContent = React__namespace.forwardRef(
+  ({ className, side = "top", sideOffset = 4, style, ...props }, ref) => {
+    const ctx = React__namespace.useContext(TooltipContext);
+    const innerRef = React__namespace.useRef(null);
+    const [coords, setCoords] = React__namespace.useState(null);
+    React__namespace.useLayoutEffect(() => {
+      if (!ctx?.open || !ctx.triggerRef.current) {
+        setCoords(null);
+        return;
+      }
+      const r = ctx.triggerRef.current.getBoundingClientRect();
+      const c = innerRef.current?.getBoundingClientRect();
+      const ch = c?.height ?? 0;
+      const cw = c?.width ?? 0;
+      const vh = window.innerHeight;
+      const vw = window.innerWidth;
+      let s = side;
+      if (s === "top" && r.top - sideOffset - ch < 0) s = "bottom";
+      else if (s === "bottom" && r.bottom + sideOffset + ch > vh) s = "top";
+      else if (s === "left" && r.left - sideOffset - cw < 0) s = "right";
+      else if (s === "right" && r.right + sideOffset + cw > vw) s = "left";
+      setCoords({
+        top: s === "top" ? r.top - sideOffset : s === "bottom" ? r.bottom + sideOffset : r.top + r.height / 2,
+        left: s === "left" ? r.left - sideOffset : s === "right" ? r.right + sideOffset : r.left + r.width / 2,
+        transform: TRANSFORM_BY_SIDE[s]
+      });
+    }, [ctx?.open, side, sideOffset, ctx?.triggerRef]);
+    if (!ctx?.open) return null;
+    const setRefs = (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: setRefs,
+          id: ctx.contentId,
+          role: "tooltip",
+          className: cn("tooltip-content pointer-events-none", className),
+          style: {
+            position: "fixed",
+            top: coords?.top ?? -9999,
+            left: coords?.left ?? -9999,
+            transform: coords?.transform ?? TRANSFORM_BY_SIDE[side],
+            opacity: coords ? void 0 : 0,
+            zIndex: 9999,
+            ...style
+          },
+          ...props
+        }
+      ),
+      document.body
+    );
+  }
+);
+TooltipContent.displayName = "TooltipContent";
+var Avatar = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AvatarPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive__namespace.Root.displayName;
+var AvatarImage = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AvatarPrimitive__namespace.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive__namespace.Image.displayName;
+var AvatarFallback = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AvatarPrimitive__namespace.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive__namespace.Fallback.displayName;
+var badgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-sm font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+  }
+);
+Button.displayName = "Button";
+var HoverCard = HoverCardPrimitive__namespace.Root;
+var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
+var HoverCardContent = React__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(HoverCardPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  HoverCardPrimitive__namespace.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+) }));
+HoverCardContent.displayName = HoverCardPrimitive__namespace.Content.displayName;
+
+// src/icons/colors.ts
+var NEUTRAL_GRAY = "#64748b";
+var FILE_TYPE_COLORS = {
+  pdf: "#ef4444",
+  // red
+  img: "#8b5cf6",
+  // violet-500 (images)
+  vid: "#10b981",
+  // emerald-500 (video)
+  aud: "#f59e0b",
+  // amber-500 (audio)
+  eml: "#0d9488",
+  // teal-600 (email)
+  generic: NEUTRAL_GRAY,
+  // gray (unknown)
+  white: "#ffffff"
+  // for strokes/text on colored backgrounds
+};
+var PdfIcon = ({ size = 16, className = "" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z",
+            fill: FILE_TYPE_COLORS.pdf,
+            stroke: FILE_TYPE_COLORS.pdf,
+            strokeWidth: "1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14 2v6h6",
+            fill: "none",
+            stroke: FILE_TYPE_COLORS.white,
+            strokeWidth: "1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: "12",
+            y: "16",
+            fontSize: "6",
+            fill: "white",
+            textAnchor: "middle",
+            fontWeight: "bold",
+            fontFamily: "Arial, sans-serif",
+            children: "PDF"
+          }
+        )
+      ]
+    }
+  );
+};
+var AudIcon = ({ size = 16, className = "" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z",
+            fill: FILE_TYPE_COLORS.aud,
+            stroke: FILE_TYPE_COLORS.aud,
+            strokeWidth: "1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14 2v6h6",
+            fill: "none",
+            stroke: FILE_TYPE_COLORS.white,
+            strokeWidth: "1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: "12",
+            y: "16",
+            fontSize: "6",
+            fill: "white",
+            textAnchor: "middle",
+            fontWeight: "bold",
+            fontFamily: "Arial, sans-serif",
+            children: "AUD"
+          }
+        )
+      ]
+    }
+  );
+};
+var ImgIcon = ({ size = 16, className = "" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z",
+            fill: FILE_TYPE_COLORS.img,
+            stroke: FILE_TYPE_COLORS.img,
+            strokeWidth: "1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14 2v6h6",
+            fill: "none",
+            stroke: FILE_TYPE_COLORS.white,
+            strokeWidth: "1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: "12",
+            y: "16",
+            fontSize: "6",
+            fill: "white",
+            textAnchor: "middle",
+            fontWeight: "bold",
+            fontFamily: "Arial, sans-serif",
+            children: "IMG"
+          }
+        )
+      ]
+    }
+  );
+};
+var VidIcon = ({ size = 16, className = "" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z",
+            fill: FILE_TYPE_COLORS.vid,
+            stroke: FILE_TYPE_COLORS.vid,
+            strokeWidth: "1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14 2v6h6",
+            fill: "none",
+            stroke: FILE_TYPE_COLORS.white,
+            strokeWidth: "1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: "12",
+            y: "16",
+            fontSize: "6",
+            fill: "white",
+            textAnchor: "middle",
+            fontWeight: "bold",
+            fontFamily: "Arial, sans-serif",
+            children: "VID"
+          }
+        )
+      ]
+    }
+  );
+};
+var EmlIcon = ({ size = 16, className = "" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z",
+            fill: FILE_TYPE_COLORS.eml,
+            stroke: FILE_TYPE_COLORS.eml,
+            strokeWidth: "1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14 2v6h6",
+            fill: "none",
+            stroke: FILE_TYPE_COLORS.white,
+            strokeWidth: "1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: "7",
+            y: "12",
+            width: "10",
+            height: "7",
+            rx: "1",
+            fill: "none",
+            stroke: "white",
+            strokeWidth: "1.2"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 13l5 3 5-3", fill: "none", stroke: "white", strokeWidth: "1.2", strokeLinejoin: "round" })
+      ]
+    }
+  );
+};
+var FileIcon = ({ size = 16, className = "" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z",
+            fill: FILE_TYPE_COLORS.generic,
+            stroke: FILE_TYPE_COLORS.generic,
+            strokeWidth: "1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14 2v6h6",
+            fill: "none",
+            stroke: FILE_TYPE_COLORS.white,
+            strokeWidth: "1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: "12",
+            y: "17",
+            fontSize: "10",
+            fill: "white",
+            textAnchor: "middle",
+            fontWeight: "bold",
+            fontFamily: "Arial, sans-serif",
+            children: "?"
+          }
+        )
+      ]
+    }
+  );
+};
+var EntityPill = React.forwardRef(function EntityPill2({
+  icon,
+  label,
+  secondaryText,
+  size = "sm",
+  shape = "rounded",
+  className,
+  labelMaxWidth = "max-w-[320px]",
+  fullWidth = false,
+  highlight = false,
+  onClick,
+  onIconClick,
+  onMoreClick,
+  moreContent,
+  href,
+  disabled = false,
+  tooltipContent,
+  tooltipSide = "bottom",
+  "data-testid": testId
+}, ref) {
+  const shapeClass = shape === "pill" ? "rounded-full" : "rounded-md";
+  const sizeClasses = size === "base" ? "gap-1.5 px-1.5 py-0.5" : "gap-1 px-1";
+  const textSizeClass = size === "base" ? "text-base" : "text-sm";
+  const baseClasses = cn(
+    "group/pill items-center",
+    fullWidth ? "flex w-full" : "inline-flex",
+    sizeClasses,
+    shapeClass,
+    "bg-muted",
+    "border border-border",
+    "transition-all",
+    className
+  );
+  const interactiveClasses = "cursor-pointer hover:bg-muted/80";
+  const disabledClasses = "cursor-default opacity-60";
+  const highlightClasses = "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground";
+  const mainContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    onIconClick ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        role: "button",
+        tabIndex: 0,
+        className: "flex-shrink-0 cursor-pointer hover:opacity-70 transition-opacity",
+        onClick: (e) => {
+          e.stopPropagation();
+          onIconClick(e);
+        },
+        children: icon
+      }
+    ) : icon,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn(textSizeClass, "font-medium truncate leading-tight min-w-0", labelMaxWidth),
+        children: label
+      }
+    ),
+    secondaryText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground flex-shrink-0 leading-none", children: secondaryText })
+  ] });
+  const tooltipWrap = (content, tip, side = tooltipSide, triggerClassName, triggerProps) => /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TooltipTrigger,
+      {
+        onFocusCapture: (e) => e.stopPropagation(),
+        className: triggerClassName,
+        ...triggerProps,
+        children: content
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side, className: "p-2", children: tip })
+  ] });
+  const mainAreaClass = cn("inline-flex items-center gap-1", fullWidth && "min-w-0 flex-1");
+  if (onMoreClick || moreContent) {
+    let mainArea;
+    if (tooltipContent) {
+      mainArea = tooltipWrap(
+        mainContent,
+        tooltipContent,
+        tooltipSide,
+        cn(mainAreaClass, disabled && "opacity-60"),
+        {
+          type: "button",
+          onClick: href ? onClick : disabled ? void 0 : onClick,
+          disabled: disabled || void 0
+        }
+      );
+    } else if (href) {
+      mainArea = /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: mainAreaClass,
+          onClick,
+          children: mainContent
+        }
+      );
+    } else if (onClick) {
+      mainArea = /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: disabled ? void 0 : onClick,
+          disabled,
+          className: cn("inline-flex items-center gap-1", disabled && "opacity-60"),
+          children: mainContent
+        }
+      );
+    } else {
+      mainArea = /* @__PURE__ */ jsxRuntime.jsx("span", { className: mainAreaClass, children: mainContent });
+    }
+    const moreArea = moreContent ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 leading-none", children: moreContent }) : tooltipWrap(
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "w-3.5 h-3.5" }),
+      "Click for more",
+      tooltipSide,
+      "flex-shrink-0 leading-none text-muted-foreground hover:text-foreground",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onMoreClick?.(e);
+        }
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        className: cn(
+          baseClasses,
+          (onClick || href) && !disabled && interactiveClasses,
+          highlight && highlightClasses
+        ),
+        "data-testid": testId,
+        children: [
+          mainArea,
+          moreArea
+        ]
+      }
+    );
+  }
+  if (tooltipContent) {
+    if (href) {
+      return tooltipWrap(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: mainAreaClass,
+            onClick,
+            children: mainContent
+          }
+        ),
+        tooltipContent,
+        tooltipSide,
+        cn(baseClasses, interactiveClasses),
+        { "data-testid": testId }
+      );
+    }
+    return tooltipWrap(
+      mainContent,
+      tooltipContent,
+      tooltipSide,
+      cn(
+        baseClasses,
+        onClick && !disabled ? interactiveClasses : "",
+        disabled ? disabledClasses : "",
+        highlight && highlightClasses
+      ),
+      {
+        type: "button",
+        ref,
+        onClick: onClick && !disabled ? onClick : void 0,
+        disabled: disabled || void 0,
+        "data-testid": testId
+      }
+    );
+  }
+  if (href) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        ref,
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: cn(baseClasses, interactiveClasses),
+        "data-testid": testId,
+        onClick,
+        children: mainContent
+      }
+    );
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: disabled ? void 0 : onClick,
+        disabled,
+        className: cn(
+          baseClasses,
+          disabled ? disabledClasses : interactiveClasses,
+          highlight && highlightClasses
+        ),
+        "data-testid": testId,
+        children: mainContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      className: cn(baseClasses, highlight && highlightClasses),
+      "data-testid": testId,
+      children: mainContent
+    }
+  );
+});
+function getDocumentTitle(document2, defaultValue = "") {
+  if (!document2) return defaultValue;
+  return document2.doc_metadata?.title || document2.file_name || defaultValue;
+}
+var MAX_LABEL_CHARS = 30;
+function clampLabel(text) {
+  return text.length > MAX_LABEL_CHARS ? `${text.slice(0, MAX_LABEL_CHARS).trimEnd()}\u2026` : text;
+}
+var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set(["jpg", "jpeg", "png", "gif", "bmp", "tiff", "tif", "webp"]);
+var VIDEO_EXTENSIONS = /* @__PURE__ */ new Set(["mp4", "mpeg", "mpg", "webm", "mov", "avi", "mkv"]);
+var AUDIO_EXTENSIONS = /* @__PURE__ */ new Set(["mp3", "wav", "m4a", "aac", "ogg", "flac"]);
+var EMAIL_EXTENSIONS = /* @__PURE__ */ new Set(["eml", "msg"]);
+function getDocIcon(fileName, iconSize = 14) {
+  const ext = fileName?.split(".").pop()?.toLowerCase();
+  if (ext && VIDEO_EXTENSIONS.has(ext)) return /* @__PURE__ */ jsxRuntime.jsx(VidIcon, { size: iconSize, className: "flex-shrink-0" });
+  if (ext && AUDIO_EXTENSIONS.has(ext)) return /* @__PURE__ */ jsxRuntime.jsx(AudIcon, { size: iconSize, className: "flex-shrink-0" });
+  if (ext && IMAGE_EXTENSIONS.has(ext)) return /* @__PURE__ */ jsxRuntime.jsx(ImgIcon, { size: iconSize, className: "flex-shrink-0" });
+  if (ext && EMAIL_EXTENSIONS.has(ext)) return /* @__PURE__ */ jsxRuntime.jsx(EmlIcon, { size: iconSize, className: "flex-shrink-0" });
+  return /* @__PURE__ */ jsxRuntime.jsx(PdfIcon, { size: iconSize, className: "flex-shrink-0" });
+}
+function DocumentEntity({
+  doc,
+  icon,
+  size = "sm",
+  labelMaxWidth,
+  onClick,
+  onIconClick,
+  showHoverEye,
+  viewing,
+  iconBadge,
+  actions,
+  tooltipContent,
+  className,
+  fullWidth
+}) {
+  const title = getDocumentTitle(doc);
+  const ext = doc.file_name?.split(".").pop()?.toLowerCase();
+  const iconSize = size === "base" ? 16 : 14;
+  const eyeSizeClass = size === "base" ? "h-4 w-4" : "h-3.5 w-3.5";
+  const baseIcon = icon ?? getDocIcon(doc.file_name, iconSize);
+  const showEye = showHoverEye || viewing;
+  const displayIcon = showEye || iconBadge ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex flex-shrink-0 items-center justify-center", children: [
+    showEye ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn(
+            "transition-opacity",
+            viewing ? "opacity-0" : "group-hover/pill:opacity-0 group-has-[[data-state=open]]/pill:opacity-0"
+          ),
+          children: baseIcon
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.Eye,
+        {
+          className: cn(
+            "absolute inset-0 m-auto transition-opacity",
+            eyeSizeClass,
+            viewing ? "text-primary-foreground opacity-100" : "text-primary opacity-0 group-hover/pill:opacity-100 group-has-[[data-state=open]]/pill:opacity-100"
+          )
+        }
+      )
+    ] }) : baseIcon,
+    iconBadge
+  ] }) : baseIcon;
+  const defaultTooltip = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 text-xs max-w-[300px]", children: [
+    doc.folder && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderOpen, { className: "h-3 w-3 text-yellow-600 shrink-0" }),
+      doc.folder.split("/").map((part, i, arr) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 shrink-0", children: [
+        i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/50 mx-0.5", children: "/" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: i < arr.length - 1 ? "text-muted-foreground/70" : "", children: part })
+      ] }, i))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium break-words", children: [
+      title,
+      ext ? `.${ext}` : ""
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EntityPill,
+    {
+      icon: displayIcon,
+      size,
+      label: fullWidth ? title : clampLabel(title),
+      labelMaxWidth: labelMaxWidth ?? "max-w-[140px]",
+      fullWidth,
+      onClick,
+      onIconClick,
+      moreContent: actions,
+      className,
+      highlight: viewing,
+      tooltipContent: tooltipContent ?? defaultTooltip
+    }
+  );
+}
+var BASE_COLORS = {
+  "0": "#10b981",
+  "1": "#3b82f6",
+  "2": "#8b5cf6",
+  "3": "#f43f5e",
+  "4": "#f59e0b",
+  "5": "#84cc16",
+  "6": "#a855f7",
+  "7": "#06b6d4",
+  "8": "#f97316",
+  "9": "#14b8a6",
+  a: "#ef4444",
+  b: "#6366f1",
+  c: "#ec4899",
+  d: "#22c55e",
+  e: "#eab308",
+  f: "#0ea5e9"
+};
+function getEntityColor(entityId) {
+  return BASE_COLORS[entityId[4]] || BASE_COLORS["0"];
+}
+var TAG_TYPE_LABELS = {
+  checkbox: "Checkbox",
+  select: "Select",
+  number: "Number",
+  text: "Text",
+  folder: "Folder",
+  search: "Saved Search",
+  date: "Date",
+  assistant: "AI Assistant"
+};
+var TAG_TYPE_ICONS = {
+  checkbox: lucideReact.SquareCheckBig,
+  select: lucideReact.List,
+  number: lucideReact.Hash,
+  text: lucideReact.StickyNote,
+  folder: lucideReact.Folder,
+  search: lucideReact.Search,
+  date: lucideReact.Calendar,
+  assistant: lucideReact.Bot
+};
+function TagEntity({
+  tag,
+  size = "md",
+  className = "",
+  onClick,
+  showTooltip = true
+}) {
+  const tagType = tag.tag_type?.type ?? "text";
+  const iconSize = size === "sm" ? 12 : size === "md" ? 14 : 16;
+  const Icon = TAG_TYPE_ICONS[tagType] || lucideReact.StickyNote;
+  const sizeClasses = {
+    sm: "p-0.5",
+    md: "p-1",
+    lg: "p-1.5"
+  };
+  const tagColor = tag.color ?? getEntityColor(tag.external_id);
+  const iconElement = /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: `inline-flex items-center justify-center rounded-md text-white flex-shrink-0 ${sizeClasses[size]}`,
+      style: { backgroundColor: tagColor },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: iconSize, className: "flex-shrink-0" })
+    }
+  );
+  const pillSize = size === "lg" ? "base" : "sm";
+  const tooltipContent = showTooltip ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "inline-flex items-center justify-center rounded-md text-white p-1",
+          style: { backgroundColor: tagColor },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm", children: tag.name })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Type:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: TAG_TYPE_LABELS[tagType] || tagType })
+      ] }),
+      tag.doctag_count != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Documents:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "h-5 min-w-[20px] justify-center", children: tag.doctag_count ?? 0 })
+      ] }),
+      tag.shared != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: tag.shared ? "Shared" : "Private" }) })
+    ] })
+  ] }) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EntityPill,
+    {
+      icon: iconElement,
+      label: tag.name,
+      size: pillSize,
+      shape: "rounded",
+      labelMaxWidth: "max-w-[180px]",
+      tooltipContent,
+      onClick,
+      className,
+      "data-testid": `tag-entity-${tag.external_id}`
+    }
+  );
+}
+var VARIANT_STYLES = {
+  "mine-paid": {
+    pill: "bg-primary text-primary-foreground border-transparent",
+    icon: "text-primary-foreground"
+  },
+  other: {
+    pill: "bg-secondary text-secondary-foreground border-transparent",
+    icon: "text-secondary-foreground"
+  },
+  "mine-free": {
+    pill: "bg-muted-foreground text-background border-transparent",
+    icon: "text-background"
+  },
+  common: {
+    pill: "",
+    icon: "text-muted-foreground"
+  }
+};
+function resolveVariant(relation, paid, hasCollaborators) {
+  if (relation === "common") return "common";
+  if (relation === "other") return "other";
+  if (relation === "mine") return paid ? "mine-paid" : "mine-free";
+  if (paid) return hasCollaborators ? "other" : "mine-paid";
+  return "mine-free";
+}
+function ProjectEntity({
+  name,
+  label,
+  icon,
+  subscription = "none",
+  hasCollaborators = false,
+  size = "sm",
+  className,
+  onClick,
+  relation,
+  isPaid,
+  tooltipContent
+}) {
+  const paid = isPaid ?? (subscription === "active" || subscription === "past_due" || subscription === "dev");
+  const variant = resolveVariant(relation, paid, hasCollaborators);
+  const { pill, icon: iconClass } = VARIANT_STYLES[variant];
+  const iconSizeClass = size === "base" ? "h-4 w-4" : "h-3.5 w-3.5";
+  const iconNode = icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Package, { className: cn(iconSizeClass, iconClass) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EntityPill,
+    {
+      icon: iconNode,
+      label: label ?? name,
+      size,
+      shape: "pill",
+      className: cn(pill, className),
+      onClick,
+      tooltipContent
+    }
+  );
+}
+var useArbiUiStore = zustand.create((set) => ({
+  selectedDocIds: [],
+  setSelectedDocIds: (ids) => set({ selectedDocIds: ids }),
+  viewingDocId: null,
+  setViewingDocId: (id) => set({ viewingDocId: id })
+}));
+agGridCommunity.ModuleRegistry.registerModules([agGridCommunity.AllCommunityModule]);
+function formatBytes(bytes) {
+  if (bytes == null || Number.isNaN(bytes)) return "\u2014";
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB", "TB"];
+  let value = bytes / 1024;
+  let i = 0;
+  while (value >= 1024 && i < units.length - 1) {
+    value /= 1024;
+    i++;
+  }
+  return `${value.toFixed(value >= 10 || i === 0 ? 0 : 1)} ${units[i]}`;
+}
+var STATUS_VARIANTS = {
+  completed: "default",
+  empty: "secondary",
+  "low-content": "secondary",
+  processing: "outline",
+  queued: "outline",
+  failed: "destructive",
+  skipped: "destructive"
+};
+function DocumentTable({
+  workspaceId,
+  documents,
+  onOpenDocument,
+  selectedIds,
+  onSelectionChange,
+  height = 480,
+  className
+}) {
+  const query = useDocuments(workspaceId, { enabled: !documents });
+  const rows = documents ?? query.data ?? [];
+  const isLoading = !documents && query.isLoading;
+  const tagsQuery = useTags(workspaceId);
+  const tagNameById = React__namespace.default.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const t of tagsQuery.data ?? []) {
+      if (t.external_id) map.set(t.external_id, t.name ?? t.external_id.slice(0, 8));
+    }
+    return map;
+  }, [tagsQuery.data]);
+  const storeSelected = useArbiUiStore((s) => s.selectedDocIds);
+  const storeSetSelected = useArbiUiStore((s) => s.setSelectedDocIds);
+  const viewingDocId = useArbiUiStore((s) => s.viewingDocId);
+  const setViewingDocId = useArbiUiStore((s) => s.setViewingDocId);
+  const effectiveSelected = selectedIds ?? storeSelected;
+  const emitSelection = onSelectionChange ?? storeSetSelected;
+  const gridApiRef = React__namespace.default.useRef(null);
+  const openDocument = React__namespace.default.useCallback(
+    (id) => {
+      setViewingDocId(id);
+      onOpenDocument?.(id);
+    },
+    [onOpenDocument, setViewingDocId]
+  );
+  const applySelection = React__namespace.default.useCallback(() => {
+    const api = gridApiRef.current;
+    if (!api) return;
+    const wanted = new Set(effectiveSelected);
+    api.forEachNode((node) => {
+      const id = node.data?.external_id;
+      const shouldSelect = !!id && wanted.has(id);
+      if (node.isSelected() !== shouldSelect) node.setSelected(shouldSelect);
+    });
+  }, [effectiveSelected]);
+  React__namespace.default.useEffect(() => {
+    applySelection();
+  }, [applySelection]);
+  const columnDefs = React__namespace.default.useMemo(
+    () => [
+      {
+        colId: "select",
+        headerName: "",
+        width: 44,
+        pinned: "left",
+        checkboxSelection: true,
+        headerCheckboxSelection: true,
+        sortable: false,
+        filter: false,
+        resizable: false,
+        suppressMovable: true
+      },
+      {
+        colId: "title",
+        headerName: "Document Name",
+        flex: 3,
+        minWidth: 240,
+        sortable: true,
+        valueGetter: (p) => p.data?.doc_metadata?.title || p.data?.file_name || "",
+        cellRenderer: (p) => {
+          const doc = p.data;
+          if (!doc) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            DocumentEntity,
+            {
+              doc,
+              size: "base",
+              fullWidth: true,
+              showHoverEye: true,
+              viewing: viewingDocId === doc.external_id,
+              onClick: (e) => {
+                e.stopPropagation();
+                if (doc.external_id) openDocument(doc.external_id);
+              }
+            }
+          );
+        }
+      },
+      {
+        colId: "status",
+        headerName: "Status",
+        width: 140,
+        sortable: true,
+        field: "status",
+        cellRenderer: (p) => {
+          const status = p.data?.status;
+          if (!status) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: STATUS_VARIANTS[status.toLowerCase()] ?? "secondary", children: status });
+        }
+      },
+      {
+        colId: "all_tags",
+        headerName: "Labels",
+        flex: 1,
+        minWidth: 160,
+        sortable: false,
+        filter: false,
+        cellRenderer: (p) => {
+          const doctags = p.data?.doctags ?? [];
+          if (doctags.length === 0) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-1 py-1", children: doctags.map((dt) => /* @__PURE__ */ jsxRuntime.jsx(
+            TagEntity,
+            {
+              size: "sm",
+              tag: {
+                external_id: dt.tag_ext_id,
+                name: tagNameById.get(dt.tag_ext_id) ?? dt.tag_ext_id.slice(0, 8)
+              }
+            },
+            dt.tag_ext_id
+          )) });
+        }
+      },
+      {
+        colId: "file_size",
+        headerName: "Size",
+        width: 110,
+        sortable: true,
+        field: "file_size",
+        valueFormatter: (p) => formatBytes(p.value)
+      },
+      {
+        colId: "folder",
+        headerName: "Folder",
+        flex: 1,
+        minWidth: 140,
+        sortable: true,
+        field: "folder",
+        valueFormatter: (p) => p.value || "\u2014"
+      }
+    ],
+    [openDocument, viewingDocId, tagNameById]
+  );
+  const handleGridReady = (e) => {
+    gridApiRef.current = e.api;
+    applySelection();
+  };
+  const handleSelectionChanged = (e) => {
+    const ids = e.api.getSelectedRows().map((r) => r.external_id).filter((id) => !!id);
+    emitSelection(ids);
+  };
+  const handleRowClicked = (e) => {
+    const id = e.data?.external_id;
+    if (id) openDocument(id);
+  };
+  const getRowId = React__namespace.default.useCallback((params) => params.data.external_id, []);
+  const autoHeight = height === "auto";
+  const style = autoHeight ? {} : { height: typeof height === "number" ? `${height}px` : height, width: "100%" };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center p-8 text-sm text-muted-foreground", children: "Loading documents\u2026" }) });
+  }
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center p-8 text-sm text-muted-foreground", children: "No documents" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: /* @__PURE__ */ jsxRuntime.jsx(
+    agGridReact.AgGridReact,
+    {
+      columnDefs,
+      rowData: rows,
+      getRowId,
+      rowSelection: "multiple",
+      suppressRowClickSelection: true,
+      domLayout: autoHeight ? "autoHeight" : "normal",
+      rowHeight: 44,
+      onGridReady: handleGridReady,
+      onSelectionChanged: handleSelectionChanged,
+      onRowClicked: handleRowClicked
+    }
+  ) });
+}
 
 Object.defineProperty(exports, "Arbi", {
   enumerable: true,
@@ -1165,10 +2466,39 @@ Object.defineProperty(exports, "ArbiError", {
   get: function () { return browser.ArbiError; }
 });
 exports.ArbiChat = ArbiChat;
+exports.ArbiChatPanel = ArbiChatPanel;
 exports.ArbiProvider = ArbiProvider;
+exports.AudIcon = AudIcon;
+exports.Avatar = Avatar;
+exports.AvatarFallback = AvatarFallback;
+exports.AvatarImage = AvatarImage;
+exports.Badge = Badge;
+exports.Button = Button;
+exports.DocumentEntity = DocumentEntity;
+exports.DocumentTable = DocumentTable;
+exports.EmlIcon = EmlIcon;
+exports.EntityPill = EntityPill;
+exports.FILE_TYPE_COLORS = FILE_TYPE_COLORS;
+exports.FileIcon = FileIcon;
+exports.HoverCard = HoverCard;
+exports.HoverCardContent = HoverCardContent;
+exports.HoverCardTrigger = HoverCardTrigger;
+exports.ImgIcon = ImgIcon;
+exports.PdfIcon = PdfIcon;
+exports.ProjectEntity = ProjectEntity;
+exports.TagEntity = TagEntity;
+exports.Tooltip = Tooltip;
+exports.TooltipContent = TooltipContent;
+exports.TooltipProvider = TooltipProvider;
+exports.TooltipTrigger = TooltipTrigger;
+exports.VidIcon = VidIcon;
 exports.arbiQueryKeys = arbiQueryKeys;
+exports.badgeVariants = badgeVariants;
+exports.buttonVariants = buttonVariants;
+exports.cn = cn;
 exports.useAgents = useAgents;
 exports.useArbi = useArbi;
+exports.useArbiUiStore = useArbiUiStore;
 exports.useAssistantQuery = useAssistantQuery;
 exports.useConversations = useConversations;
 exports.useDeleteAgents = useDeleteAgents;