@arbidocs/react 0.4.2 → 0.4.4

package/dist/index.js

@@ -1,17 +1,17 @@
 import { formatRelativeTime } from './chunk-EJ2BMHYK.js';
 export { DEFAULT_NOTIFY_TONE, NotificationBell, Toaster, formatRelativeTime, notify, seedNotifications, selectUnread, toast, useNotify } from './chunk-EJ2BMHYK.js';
-import { MarkMenu, AiMarkdown, Card, Button, Badge, TagEntity, MarkdownRenderer, Input, FILE_TYPE_COLORS, getEntityIcon, UserEntity, getEntityColorStyles, AgentBadge, Textarea, Slider, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DocumentEntity, DocumentCard, useAudioRecorder, MicWaveformIndicator, IconToggle, classifyMediaError, formatElapsed, PassageCard } from './chunk-3CLGHHME.js';
-export { AgentBadge, AiMarkdown, ArbiBotHeadIcon, AudIcon, Avatar, AvatarFallback, AvatarImage, BASE_COLORS, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DictateProvider, DocumentCard, DocumentEntity, ENTITY_MAPPINGS, EmlIcon, EntityIcon, EntityPill, FILE_TYPE_COLORS, HoverCard, HoverCardContent, HoverCardTrigger, IconToggle, ImgIcon, InlineMicButton, Input, Label, MarkMenu, MarkdownRenderer, MarkdownStreamingContext, MicRecordingOverlay, MicWaveformIndicator, NEUTRAL_GRAY, PLACEHOLDER_COLOR, PassageCard, PdfIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PresenceLabel, Progress, ProjectEntity, RadioGroup, RadioGroupItem, RagDot, RelevanceDot, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Slider, StatusPill, Switch, TAG_TYPE_ICONS, TAG_TYPE_LABELS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagEntity, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserEntity, UserMenu, VISIBILITY_ICONS, VidIcon, VisibilityIcon, badgeVariants, buttonVariants, cardVariants, configureEntityRegistry, configureRagLabels, configureStatusRegistry, formatElapsed, getDocIcon, getEntityColor, getEntityColorStyles, getEntityIcon, getEntityLabel, getStatusVariant, getTagTypeIcon, getTagTypeLabel, getWorkspaceColor, markdownBaseComponents, splitMarkdownBlocks, toggleVariants, useAudioRecorder } from './chunk-3CLGHHME.js';
+import { normalizeCitationMarkup, MarkMenu, AiMarkdown, Card, Button, Badge, TagEntity, MarkdownRenderer, Input, FILE_TYPE_COLORS, getEntityIcon, UserEntity, getEntityColorStyles, AgentBadge, Textarea, Label, Slider, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DocumentEntity, DocumentCard, useAudioRecorder, MicWaveformIndicator, IconToggle, classifyMediaError, formatElapsed, PassageCard } from './chunk-MIJRORQL.js';
+export { AgentBadge, AiMarkdown, ArbiBotHeadIcon, AudIcon, Avatar, AvatarFallback, AvatarImage, BASE_COLORS, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DictateProvider, DocumentCard, DocumentEntity, ENTITY_MAPPINGS, EmlIcon, EntityIcon, EntityPill, FILE_TYPE_COLORS, HoverCard, HoverCardContent, HoverCardTrigger, IconToggle, ImgIcon, InlineMicButton, Input, Label, MarkMenu, MarkdownRenderer, MarkdownStreamingContext, MicRecordingOverlay, MicWaveformIndicator, NEUTRAL_GRAY, PLACEHOLDER_COLOR, PassageCard, PdfIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PresenceLabel, Progress, ProjectEntity, RadioGroup, RadioGroupItem, RagDot, RelevanceDot, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Slider, StatusPill, Switch, TAG_TYPE_ICONS, TAG_TYPE_LABELS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagEntity, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserEntity, UserMenu, VISIBILITY_ICONS, VidIcon, VisibilityIcon, badgeVariants, buttonVariants, cardVariants, configureEntityRegistry, configureRagLabels, configureStatusRegistry, formatElapsed, getDocIcon, getEntityColor, getEntityColorStyles, getEntityIcon, getEntityLabel, getStatusVariant, getTagTypeIcon, getTagTypeLabel, getWorkspaceColor, markdownBaseComponents, normalizeCitationMarkup, splitMarkdownBlocks, toggleVariants, useAudioRecorder } from './chunk-MIJRORQL.js';
 import { cn, ScrollArea, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from './chunk-6ALMBER7.js';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ScrollArea, ScrollBar, cn } from './chunk-6ALMBER7.js';
-import { useArbi, ArbiProvider, AudioViewer, ImageViewer, VideoViewer } from './chunk-JKO3NR5L.js';
+import { useArbi, AudioViewer, ImageViewer, VideoViewer } from './chunk-JKO3NR5L.js';
 export { ArbiProvider, useArbi } from './chunk-JKO3NR5L.js';
 import React, { memo, useState, createContext, useMemo, useCallback, useEffect, useRef, useLayoutEffect, useContext, useId, Fragment as Fragment$1 } from 'react';
-import { useQuery, useMutation, useQueries, QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useMutation, useQueries, useQueryClient } from '@tanstack/react-query';
+import { Link, Trash2, CheckCheck, Check, Loader2, AlertTriangle, ShieldCheck, Copy, Sparkles, FileText, GitCompareArrows, Download, Image as Image$1, Search, CornerDownLeft, X, ArrowLeft, Send, Tags, Crown, Info, Activity, Gauge, Gift, PartyPopper, UserCheck, MessageCircleMore, FileX2, FileCheck2, Pencil, FolderPlus, SquareArrowOutUpRight, MessagesSquare, ArrowRight, MoreHorizontal, SquarePen, Mic, Pause, Play, Square, RotateCcw, Camera, Circle } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { connectWithReconnect, resolveCitations, summarizeCitations } from '@arbidocs/sdk/browser';
+import { connectWithReconnect } from '@arbidocs/sdk/browser';
 export { Arbi, ArbiError } from '@arbidocs/sdk/browser';
-import { Link, Trash2, CheckCheck, Check, Loader2, AlertTriangle, ShieldCheck, Copy, Sparkles, FileText, GitCompareArrows, Download, Image as Image$1, Search, CornerDownLeft, X, ArrowLeft, Send, Tags, Crown, Info, Activity, Gauge, Gift, PartyPopper, UserCheck, MessageCircleMore, FileX2, FileCheck2, Pencil, FolderPlus, SquareArrowOutUpRight, MessagesSquare, ArrowRight, MoreHorizontal, SquarePen, Mic, Pause, Play, Square, RotateCcw, Camera, Circle } from 'lucide-react';
 import { isMessageType } from '@arbidocs/client';
 export { isMessageType } from '@arbidocs/client';
 import { create } from 'zustand';
@@ -23,566 +23,23 @@ import Cropper from 'react-easy-crop';
 import { AgGridReact } from 'ag-grid-react';
 import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
 
-// src/chat/styles.ts
-var DEFAULT_THEME = {
-  primaryColor: "#00adef",
-  backgroundColor: "#ffffff",
-  surfaceColor: "#f9fafb",
-  textColor: "#111827",
-  mutedColor: "#6b7280",
-  borderColor: "#e5e7eb",
-  userBubbleColor: "#f3f4f6",
-  userBubbleTextColor: "#111827",
-  assistantBubbleColor: "rgba(0, 173, 239, 0.08)",
-  assistantBubbleTextColor: "#111827",
-  borderRadius: "8px",
-  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
-};
-var DEFAULT_LABELS = {
-  title: "Chat",
-  email: "Email",
-  password: "Password",
-  loginButton: "Log in",
-  loginButtonLoading: "Logging in...",
-  registerButton: "Create account",
-  sendCodeButton: "Email me a code",
-  haveCodeButton: "I have an invitation code",
-  verificationCode: "Verification code",
-  confirmPassword: "Confirm password",
-  firstName: "First name",
-  lastName: "Last name",
-  switchToRegister: "Create account",
-  switchToLogin: "Back to login",
-  selectWorkspace: "Select a workspace",
-  workspacePlaceholder: "Choose...",
-  continueButton: "Continue",
-  createWorkspace: "Create new workspace",
-  workspaceName: "Workspace name",
-  createButton: "Create",
-  changeWorkspace: "Change workspace",
-  documents: "Documents",
-  sendButton: "Send",
-  placeholder: "Ask a question...",
-  uploadButton: "Upload",
-  uploading: "Uploading...",
-  emptyNoDocs: "No documents found in this workspace.",
-  emptyNoSelection: "Select at least one document to start chatting.",
-  emptyReady: "Ask a question about your documents."
-};
-function getTheme(partial) {
-  return { ...DEFAULT_THEME, ...partial };
-}
-function getLabels(partial) {
-  return { ...DEFAULT_LABELS, ...partial };
-}
-function containerStyle(theme, width, height) {
-  return {
-    width: typeof width === "number" ? `${width}px` : width,
-    height: typeof height === "number" ? `${height}px` : height,
-    display: "flex",
-    flexDirection: "column",
-    fontFamily: theme.fontFamily,
-    fontSize: "14px",
-    lineHeight: "1.5",
-    color: theme.textColor,
-    backgroundColor: theme.backgroundColor,
-    border: `1px solid ${theme.borderColor}`,
-    borderRadius: theme.borderRadius,
-    overflow: "hidden",
-    boxSizing: "border-box"
-  };
-}
-function headerStyle(theme) {
-  return {
-    display: "flex",
-    alignItems: "center",
-    padding: "12px 16px",
-    fontWeight: 600,
-    fontSize: "15px",
-    borderBottom: `1px solid ${theme.borderColor}`,
-    flexShrink: 0
-  };
-}
-function bodyStyle() {
-  return {
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden"
-  };
-}
-function formContainerStyle() {
-  return {
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    padding: "24px 16px",
-    gap: "12px"
-  };
-}
-function labelStyle(theme) {
-  return {
-    fontSize: "13px",
-    fontWeight: 500,
-    color: theme.textColor,
-    marginBottom: "4px"
-  };
-}
-function inputStyle(theme) {
-  return {
-    width: "100%",
-    padding: "8px 12px",
-    fontSize: "14px",
-    fontFamily: theme.fontFamily,
-    color: theme.textColor,
-    backgroundColor: theme.backgroundColor,
-    border: `1px solid ${theme.borderColor}`,
-    borderRadius: "8px",
-    outline: "none",
-    boxSizing: "border-box"
-  };
-}
-function selectStyle(theme) {
-  return {
-    ...inputStyle(theme),
-    cursor: "pointer",
-    appearance: "auto"
-  };
-}
-function buttonStyle(theme, disabled) {
-  return {
-    padding: "8px 16px",
-    fontSize: "14px",
-    fontWeight: 500,
-    fontFamily: theme.fontFamily,
-    color: "#ffffff",
-    backgroundColor: disabled ? theme.mutedColor : theme.primaryColor,
-    border: "none",
-    borderRadius: "8px",
-    cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.6 : 1,
-    transition: "opacity 150ms"
-  };
-}
-function errorStyle() {
-  return {
-    fontSize: "13px",
-    color: "#ef4444",
-    margin: "4px 0 0"
-  };
-}
-function messagesContainerStyle() {
-  return {
-    flex: 1,
-    overflowY: "auto",
-    padding: "12px 16px",
-    display: "flex",
-    flexDirection: "column",
-    gap: "8px"
-  };
-}
-function messageBubbleStyle(theme, role) {
-  const isUser = role === "user";
-  return {
-    maxWidth: "85%",
-    padding: "8px 12px",
-    borderRadius: "12px",
-    fontSize: "14px",
-    lineHeight: "1.5",
-    wordBreak: "break-word",
-    whiteSpace: "pre-wrap",
-    alignSelf: isUser ? "flex-end" : "flex-start",
-    backgroundColor: isUser ? theme.userBubbleColor : theme.assistantBubbleColor,
-    color: isUser ? theme.userBubbleTextColor : theme.assistantBubbleTextColor
-  };
-}
-function inputBarStyle(theme) {
-  return {
-    display: "flex",
-    gap: "8px",
-    padding: "12px 16px",
-    borderTop: `1px solid ${theme.borderColor}`,
-    flexShrink: 0
-  };
-}
-function chatInputStyle(theme) {
-  return {
-    ...inputStyle(theme),
-    flex: 1
-  };
-}
-function sendButtonStyle(theme, disabled) {
-  return {
-    ...buttonStyle(theme, disabled),
-    padding: "8px 14px",
-    flexShrink: 0
-  };
-}
-function docSelectorStyle(theme) {
-  return {
-    padding: "8px 16px",
-    borderBottom: `1px solid ${theme.borderColor}`,
-    flexShrink: 0
-  };
-}
-function docToggleStyle(theme) {
-  return {
-    display: "flex",
-    alignItems: "center",
-    gap: "6px",
-    fontSize: "13px",
-    fontWeight: 500,
-    color: theme.mutedColor,
-    cursor: "pointer",
-    background: "none",
-    border: "none",
-    padding: 0,
-    fontFamily: theme.fontFamily
-  };
+// src/credits.ts
+var DEFAULT_USD_PER_CREDIT = 0.01;
+function formatCredits(credits, options = {}) {
+  const { unit = true, locale = "en-US" } = options;
+  const whole = Math.round(Number.isFinite(credits) ? credits : 0);
+  const digits = whole.toLocaleString(locale);
+  return unit ? `${digits} ${whole === 1 ? "credit" : "credits"}` : digits;
 }
-function docListStyle() {
-  return {
-    marginTop: "6px",
-    display: "flex",
-    flexDirection: "column",
-    gap: "4px",
-    maxHeight: "120px",
-    overflowY: "auto"
-  };
+function creditsToUsd(credits, usdPerCredit = DEFAULT_USD_PER_CREDIT) {
+  return credits * usdPerCredit;
 }
-function docItemStyle(theme) {
-  return {
-    display: "flex",
-    alignItems: "center",
-    gap: "6px",
-    fontSize: "13px",
-    color: theme.textColor,
-    cursor: "pointer",
-    textAlign: "left"
-  };
-}
-function emptyStateStyle(theme) {
-  return {
-    flex: 1,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: theme.mutedColor,
-    fontSize: "13px",
-    padding: "24px",
-    textAlign: "center"
-  };
-}
-function loadingContainerStyle() {
-  return {
-    flex: 1,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "8px",
-    fontSize: "13px"
-  };
-}
-function brandingStyle(theme) {
-  return {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "4px",
-    padding: "6px 16px",
-    fontSize: "11px",
-    color: theme.mutedColor,
-    borderTop: `1px solid ${theme.borderColor}`,
-    flexShrink: 0,
-    userSelect: "none"
-  };
-}
-function brandingLinkStyle(theme) {
-  return {
-    color: theme.mutedColor,
-    fontWeight: 600,
-    textDecoration: "none"
-  };
-}
-function linkButtonStyle(theme) {
-  return {
-    background: "none",
-    border: "none",
-    padding: 0,
-    fontSize: "13px",
-    color: theme.primaryColor,
-    cursor: "pointer",
-    fontFamily: theme.fontFamily,
-    textDecoration: "underline"
-  };
-}
-function secondaryButtonStyle(theme, disabled) {
-  return {
-    padding: "4px 10px",
-    fontSize: "12px",
-    fontWeight: 500,
-    fontFamily: theme.fontFamily,
-    color: disabled ? theme.mutedColor : theme.primaryColor,
-    backgroundColor: "transparent",
-    border: `1px solid ${disabled ? theme.borderColor : theme.primaryColor}`,
-    borderRadius: "6px",
-    cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.6 : 1,
-    transition: "opacity 150ms",
-    whiteSpace: "nowrap"
-  };
-}
-function fileInputStyle() {
-  return { display: "none" };
-}
-function agentStatusStyle(theme) {
-  return {
-    fontSize: "12px",
-    color: theme.mutedColor,
-    fontStyle: "italic",
-    padding: "4px 0",
-    alignSelf: "flex-start"
-  };
-}
-function AuthScreen({ theme, labels, onLogin }) {
-  const arbi = useArbi();
-  const [mode, setMode] = useState("login");
-  const [step, setStep] = useState("email");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPw, setConfirmPw] = useState("");
-  const [code, setCode] = useState("");
-  const [firstName, setFirstName] = useState("");
-  const [lastName, setLastName] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const resetForm = () => {
-    setPassword("");
-    setConfirmPw("");
-    setCode("");
-    setFirstName("");
-    setLastName("");
-    setError("");
-    setStep("email");
-  };
-  const switchMode = (next) => {
-    resetForm();
-    setMode(next);
-  };
-  const handleLogin = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
-    try {
-      await arbi.login(email, password);
-      onLogin();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Login failed");
-    } finally {
-      setLoading(false);
-    }
-  };
-  const handleHaveCode = () => {
-    setError("");
-    setStep("verify");
-  };
-  const handleEmailCode = async () => {
-    if (!email) return;
-    setLoading(true);
-    setError("");
-    try {
-      await arbi.requestVerification(email);
-      setStep("verify");
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to send verification code");
-    } finally {
-      setLoading(false);
-    }
-  };
-  const handleRegister = async (e) => {
-    e.preventDefault();
-    if (password !== confirmPw) {
-      setError("Passwords do not match");
-      return;
-    }
-    setLoading(true);
-    setError("");
-    try {
-      await arbi.register({ email, password, verificationCode: code, firstName, lastName });
-      await arbi.login(email, password);
-      onLogin();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Registration failed");
-    } finally {
-      setLoading(false);
-    }
-  };
-  if (mode === "login") {
-    return /* @__PURE__ */ jsxs("form", { onSubmit: handleLogin, style: formContainerStyle(), children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.email }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "email",
-            value: email,
-            onChange: (e) => setEmail(e.target.value),
-            placeholder: "you@example.com",
-            autoComplete: "email",
-            required: true,
-            style: inputStyle(theme)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.password }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "password",
-            value: password,
-            onChange: (e) => setPassword(e.target.value),
-            autoComplete: "current-password",
-            required: true,
-            style: inputStyle(theme)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("button", { type: "submit", disabled: loading, style: buttonStyle(theme, loading), children: loading ? labels.loginButtonLoading : labels.loginButton }),
-      error && /* @__PURE__ */ jsx("div", { style: errorStyle(), children: error }),
-      /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => switchMode("register"),
-          style: linkButtonStyle(theme),
-          children: labels.switchToRegister
-        }
-      ) })
-    ] });
-  }
-  if (step === "email") {
-    const noEmail = !email.trim();
-    return /* @__PURE__ */ jsxs("div", { style: formContainerStyle(), children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.email }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "email",
-            value: email,
-            onChange: (e) => setEmail(e.target.value),
-            placeholder: "you@example.com",
-            autoComplete: "email",
-            style: inputStyle(theme)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleHaveCode,
-            disabled: noEmail,
-            style: { ...buttonStyle(theme, noEmail), flex: 1 },
-            children: labels.haveCodeButton
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleEmailCode,
-            disabled: noEmail || loading,
-            style: { ...buttonStyle(theme, noEmail || loading), flex: 1 },
-            children: loading ? "..." : labels.sendCodeButton
-          }
-        )
-      ] }),
-      error && /* @__PURE__ */ jsx("div", { style: errorStyle(), children: error }),
-      /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => switchMode("login"), style: linkButtonStyle(theme), children: labels.switchToLogin }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("form", { onSubmit: handleRegister, style: formContainerStyle(), children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-        /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.firstName }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            value: firstName,
-            onChange: (e) => setFirstName(e.target.value),
-            autoComplete: "given-name",
-            required: true,
-            style: inputStyle(theme)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-        /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.lastName }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            value: lastName,
-            onChange: (e) => setLastName(e.target.value),
-            autoComplete: "family-name",
-            required: true,
-            style: inputStyle(theme)
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.verificationCode }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          value: code,
-          onChange: (e) => setCode(e.target.value),
-          autoComplete: "one-time-code",
-          required: true,
-          style: inputStyle(theme)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.password }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "password",
-          value: password,
-          onChange: (e) => setPassword(e.target.value),
-          autoComplete: "new-password",
-          required: true,
-          style: inputStyle(theme)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.confirmPassword }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "password",
-          value: confirmPw,
-          onChange: (e) => setConfirmPw(e.target.value),
-          autoComplete: "new-password",
-          required: true,
-          style: inputStyle(theme)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("button", { type: "submit", disabled: loading, style: buttonStyle(theme, loading), children: loading ? "..." : labels.registerButton }),
-    error && /* @__PURE__ */ jsx("div", { style: errorStyle(), children: error }),
-    /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => switchMode("login"), style: linkButtonStyle(theme), children: labels.switchToLogin }) })
-  ] });
+function isUsageMetered(usage, subscription) {
+  const empty = usage.total_spend === 0 && usage.total_tokens === 0 && usage.total_requests === 0;
+  return !(empty && subscription === "dev");
 }
+
+// src/hooks.ts
 var arbiQueryKeys = {
   workspaces: () => ["arbi", "workspaces"],
   documents: (workspaceId) => ["arbi", "documents", workspaceId],
@@ -600,7 +57,14 @@ var arbiQueryKeys = {
   projects: () => ["arbi", "projects"],
   projectUsage: (projectExtId, monthsBack) => ["arbi", "projectUsage", projectExtId, monthsBack],
   projectInvoices: (projectExtId) => ["arbi", "projectInvoices", projectExtId],
-  userUsageToday: () => ["arbi", "userUsageToday"]
+  userUsageToday: () => ["arbi", "userUsageToday"],
+  contacts: () => ["arbi", "contacts"],
+  skills: () => ["arbi", "skills"],
+  taskRuns: (taskId) => ["arbi", "taskRuns", taskId],
+  /** An agent's pinned config; `undefined` = the library default config. */
+  agentConfig: (agentExtId) => ["arbi", "agentConfig", agentExtId ?? "default"],
+  agentWorkspaces: (agentExtId) => ["arbi", "agentWorkspaces", agentExtId],
+  models: () => ["arbi", "models"]
 };
 function useWorkspaces(options) {
   const arbi = useArbi();
@@ -729,15 +193,20 @@ function useProjects(options) {
 }
 function useProjectUsage(projectExtId, monthsBack = 0, options) {
   const arbi = useArbi();
-  return useQuery({
+  const usage = useQuery({
     queryKey: arbiQueryKeys.projectUsage(projectExtId ?? "", monthsBack),
     queryFn: () => arbi.projects.usage(projectExtId, monthsBack),
     enabled: (options?.enabled ?? true) && !!projectExtId && arbi.isLoggedIn
   });
+  const projects = useProjects({ enabled: !!projectExtId && (options?.enabled ?? true) });
+  const subscription = projects.data?.find((p) => p.external_id === projectExtId)?.subscription;
+  const metered = usage.data ? isUsageMetered(usage.data, subscription) : void 0;
+  return { ...usage, metered };
 }
 function useProjectsUsage(projectExtIds, monthsBack = 0, options) {
   const arbi = useArbi();
   const enabled = (options?.enabled ?? true) && arbi.isLoggedIn;
+  const projects = useProjects({ enabled: enabled && projectExtIds.length > 0 });
   const results = useQueries({
     queries: projectExtIds.map((id) => ({
       queryKey: arbiQueryKeys.projectUsage(id, monthsBack),
@@ -745,27 +214,34 @@ function useProjectsUsage(projectExtIds, monthsBack = 0, options) {
       enabled: enabled && !!id
     }))
   });
-  const signature = results.map((r) => `${r.status}:${r.dataUpdatedAt ?? 0}`).join("|");
+  const signature = results.map((r) => `${r.status}:${r.dataUpdatedAt ?? 0}`).join("|") + `#${projects.dataUpdatedAt}`;
   return useMemo(() => {
     const dailyMap = /* @__PURE__ */ new Map();
     const modelMap = /* @__PURE__ */ new Map();
-    let totalSpend = 0;
+    let totalCredits = 0;
+    let anyData = false;
+    let anyMetered = false;
     let totalTokens = 0;
     let totalRequests = 0;
-    for (const r of results) {
+    results.forEach((r, i) => {
       const d = r.data;
-      if (!d) continue;
-      totalSpend += d.total_spend ?? 0;
+      if (!d) return;
+      anyData = true;
+      const subscription = projects.data?.find(
+        (p) => p.external_id === projectExtIds[i]
+      )?.subscription;
+      if (isUsageMetered(d, subscription)) anyMetered = true;
+      totalCredits += d.total_spend ?? 0;
       totalTokens += d.total_tokens ?? 0;
       totalRequests += d.total_requests ?? 0;
       for (const day of d.daily ?? []) {
         const cur = dailyMap.get(day.date) ?? {
           date: day.date,
-          spend: 0,
+          credits: 0,
           totalTokens: 0,
           apiRequests: 0
         };
-        cur.spend += day.spend ?? 0;
+        cur.credits += day.spend ?? 0;
         cur.totalTokens += day.total_tokens ?? 0;
         cur.apiRequests += day.api_requests ?? 0;
         dailyMap.set(day.date, cur);
@@ -773,567 +249,264 @@ function useProjectsUsage(projectExtIds, monthsBack = 0, options) {
       for (const [model, mg] of Object.entries(d.model_groups ?? {})) {
         const cur = modelMap.get(model) ?? {
           model,
-          spend: 0,
+          credits: 0,
           totalTokens: 0,
           promptTokens: 0,
           completionTokens: 0,
           successfulRequests: 0
         };
-        cur.spend += mg.spend ?? 0;
+        cur.credits += mg.spend ?? 0;
         cur.totalTokens += mg.total_tokens ?? 0;
         cur.promptTokens += mg.prompt_tokens ?? 0;
         cur.completionTokens += mg.completion_tokens ?? 0;
         cur.successfulRequests += mg.successful_requests ?? 0;
         modelMap.set(model, cur);
       }
-    }
+    });
     return {
-      totalSpend,
+      totalCredits,
       totalTokens,
       totalRequests,
-      daily: [...dailyMap.values()].sort((a, b) => a.date.localeCompare(b.date)),
-      modelGroups: [...modelMap.values()].sort(
-        (a, b) => b.spend - a.spend || b.totalTokens - a.totalTokens
-      ),
-      isLoading: results.some((r) => r.isLoading),
-      isError: results.some((r) => r.isError)
-    };
-  }, [signature]);
-}
-function useProjectInvoices(projectExtId, options) {
-  const arbi = useArbi();
-  return useQuery({
-    queryKey: arbiQueryKeys.projectInvoices(projectExtId ?? ""),
-    queryFn: () => arbi.projects.invoices(projectExtId),
-    enabled: (options?.enabled ?? true) && !!projectExtId && arbi.isLoggedIn
-  });
-}
-function useUserUsageToday(options) {
-  const arbi = useArbi();
-  return useQuery({
-    queryKey: arbiQueryKeys.userUsageToday(),
-    queryFn: () => arbi.user.usageToday(),
-    enabled: options?.enabled ?? arbi.isLoggedIn
-  });
-}
-function WorkspaceScreen({ theme, labels, onSelect }) {
-  const arbi = useArbi();
-  const { data: workspaces, isLoading } = useWorkspaces();
-  const [mode, setMode] = useState("select");
-  const [selected, setSelected] = useState("");
-  const [newName, setNewName] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { style: loadingContainerStyle(), children: "Loading workspaces..." });
-  }
-  const handleConfirm = async () => {
-    if (!selected) return;
-    setLoading(true);
-    setError("");
-    try {
-      await arbi.selectWorkspace(selected);
-      onSelect(selected);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to select workspace");
-    } finally {
-      setLoading(false);
-    }
-  };
-  const handleCreate = async () => {
-    const name = newName.trim();
-    if (!name) return;
-    setLoading(true);
-    setError("");
-    try {
-      const projects = await arbi.projects.list();
-      const projectExtId = projects[0]?.external_id;
-      if (!projectExtId) {
-        throw new Error("No project available; create one before adding a workspace");
-      }
-      const ws = await arbi.workspaces.create(name, projectExtId);
-      await arbi.selectWorkspace(ws.external_id);
-      onSelect(ws.external_id);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to create workspace");
-    } finally {
-      setLoading(false);
-    }
-  };
-  if (mode === "create") {
-    return /* @__PURE__ */ jsxs("div", { style: formContainerStyle(), children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.workspaceName }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            value: newName,
-            onChange: (e) => setNewName(e.target.value),
-            disabled: loading,
-            style: inputStyle(theme)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleCreate,
-          disabled: !newName.trim() || loading,
-          style: buttonStyle(theme, !newName.trim() || loading),
-          children: loading ? "..." : labels.createButton
-        }
-      ),
-      error && /* @__PURE__ */ jsx("div", { style: errorStyle(), children: error }),
-      /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            setError("");
-            setMode("select");
-          },
-          style: linkButtonStyle(theme),
-          children: "or select existing"
-        }
-      ) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { style: formContainerStyle(), children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: labelStyle(theme), children: labels.selectWorkspace }),
-      /* @__PURE__ */ jsxs(
-        "select",
-        {
-          value: selected,
-          onChange: (e) => setSelected(e.target.value),
-          disabled: loading,
-          style: selectStyle(theme),
-          children: [
-            /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: labels.workspacePlaceholder }),
-            workspaces?.map((ws) => /* @__PURE__ */ jsx("option", { value: ws.external_id, children: ws.name }, ws.external_id))
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: handleConfirm,
-        disabled: !selected || loading,
-        style: buttonStyle(theme, !selected || loading),
-        children: loading ? "Connecting..." : labels.continueButton
-      }
-    ),
-    error && /* @__PURE__ */ jsx("div", { style: errorStyle(), children: error }),
-    /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          setError("");
-          setMode("create");
-        },
-        style: linkButtonStyle(theme),
-        children: labels.createWorkspace
-      }
-    ) })
-  ] });
-}
-var CITE_RE = /\[([^\]]+)\]\(#cite-(\d+)\)/g;
-function MessageBubble({ message, theme }) {
-  const [expandedCite, setExpandedCite] = useState(null);
-  const hasCitations = message.role === "assistant" && message.metadata && CITE_RE.test(message.text);
-  CITE_RE.lastIndex = 0;
-  const resolved = hasCitations ? resolveCitations(message.metadata) : [];
-  const summaries = hasCitations ? summarizeCitations(resolved) : [];
-  const summaryMap = new Map(summaries.map((s) => [s.citationNum, s]));
-  const activeSummary = expandedCite ? summaryMap.get(expandedCite) : null;
-  const activeResolved = expandedCite ? resolved.find((r) => r.citationNum === expandedCite) : null;
-  const markdownComponents = useMemo(
-    () => ({
-      a: ({ href, children, ...props }) => {
-        if (href?.startsWith("#cite-")) {
-          const num = href.slice("#cite-".length);
-          return /* @__PURE__ */ jsxs("span", { children: [
-            children,
-            /* @__PURE__ */ jsx(
-              "sup",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setExpandedCite((prev) => prev === num ? null : num);
-                },
-                style: citeSupStyle(theme),
-                title: `Citation ${num}`,
-                children: num
-              }
-            )
-          ] });
-        }
-        return /* @__PURE__ */ jsx(
-          "a",
-          {
-            href,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            style: { color: theme.primaryColor },
-            ...props,
-            children
-          }
-        );
-      }
-    }),
-    [theme]
-  );
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { style: messageBubbleStyle(theme, message.role), children: /* @__PURE__ */ jsx(MarkdownRenderer, { components: markdownComponents, children: message.text }) }),
-    activeSummary && activeResolved && /* @__PURE__ */ jsxs("div", { style: citePanelStyle(theme), children: [
-      /* @__PURE__ */ jsxs("div", { style: citePanelHeaderStyle(theme), children: [
-        /* @__PURE__ */ jsxs("strong", { children: [
-          "[",
-          activeSummary.citationNum,
-          "]"
-        ] }),
-        " ",
-        activeSummary.docTitle,
-        activeSummary.pageNumber != null && /* @__PURE__ */ jsxs("span", { style: { color: theme.mutedColor }, children: [
-          " p.",
-          activeSummary.pageNumber
-        ] })
-      ] }),
-      activeResolved.chunks.map((chunk, i) => /* @__PURE__ */ jsx("div", { style: citeChunkStyle(theme), children: chunk.content }, i))
-    ] })
-  ] });
-}
-function citeSupStyle(theme) {
-  return {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "10px",
-    fontWeight: 600,
-    color: theme.primaryColor,
-    cursor: "pointer",
-    marginLeft: "1px",
-    minWidth: "14px",
-    lineHeight: 1
-  };
-}
-function citePanelStyle(theme) {
-  return {
-    marginTop: "4px",
-    padding: "8px 10px",
-    fontSize: "12px",
-    lineHeight: "1.5",
-    backgroundColor: theme.surfaceColor,
-    border: `1px solid ${theme.borderColor}`,
-    borderRadius: "8px",
-    maxWidth: "85%"
-  };
-}
-function citePanelHeaderStyle(theme) {
-  return {
-    fontSize: "12px",
-    fontWeight: 500,
-    color: theme.textColor,
-    marginBottom: "4px"
-  };
-}
-function citeChunkStyle(theme) {
-  return {
-    fontSize: "11px",
-    color: theme.mutedColor,
-    borderLeft: `2px solid ${theme.borderColor}`,
-    paddingLeft: "8px",
-    marginTop: "4px",
-    whiteSpace: "pre-wrap",
-    wordBreak: "break-word"
-  };
-}
-function ChatView({ workspaceId, theme, labels }) {
-  const arbi = useArbi();
-  const { data: docs, refetch: refetchDocs } = useDocuments(workspaceId);
-  const mutation = useAssistantQuery();
-  const [messages, setMessages] = useState([]);
-  const [input, setInput] = useState("");
-  const [streaming, setStreaming] = useState("");
-  const [agentStatus, setAgentStatus] = useState("");
-  const [selectedDocs, setSelectedDocs] = useState([]);
-  const [docsExpanded, setDocsExpanded] = useState(false);
-  const [previousResponseId, setPreviousResponseId] = useState(null);
-  const [uploading, setUploading] = useState(false);
-  const messagesEndRef = useRef(null);
-  const fileInputRef = useRef(null);
-  useEffect(() => {
-    if (docs && docs.length > 0 && selectedDocs.length === 0) {
-      setSelectedDocs(docs.map((d) => d.external_id));
-    }
-  }, [docs, selectedDocs.length]);
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, streaming, agentStatus]);
-  const toggleDoc = (docId) => {
-    setSelectedDocs(
-      (prev) => prev.includes(docId) ? prev.filter((id) => id !== docId) : [...prev, docId]
-    );
-  };
-  const handleUpload = useCallback(
-    async (e) => {
-      const files = e.target.files;
-      if (!files || files.length === 0) return;
-      setUploading(true);
-      try {
-        const newIds = [];
-        for (const file of Array.from(files)) {
-          const result = await arbi.documents.uploadFile(file, file.name);
-          if (result.doc_ext_ids) newIds.push(...result.doc_ext_ids);
-        }
-        await refetchDocs();
-        setSelectedDocs((prev) => [...prev, ...newIds]);
-      } catch {
-      } finally {
-        setUploading(false);
-        if (fileInputRef.current) fileInputRef.current.value = "";
-      }
-    },
-    [arbi, refetchDocs]
-  );
-  const handleSubmit = useCallback(
-    (e) => {
-      e.preventDefault();
-      const question = input.trim();
-      if (!question || selectedDocs.length === 0 || mutation.isPending) return;
-      setMessages((prev) => [...prev, { role: "user", text: question }]);
-      setInput("");
-      setStreaming("");
-      setAgentStatus("");
-      mutation.mutate(
-        {
-          question,
-          docIds: selectedDocs,
-          previousResponseId,
-          onToken: (t) => setStreaming((prev) => prev + t),
-          onOutputItemDone: (ev) => {
-            const item = ev.item;
-            if (item.type === "function_call" || item.type === "reasoning") {
-              setAgentStatus(item.arbi?.focus || item.arbi?.label || "");
-            }
-          }
-        },
-        {
-          onSuccess: (result) => {
-            setStreaming("");
-            setAgentStatus("");
-            setMessages((prev) => [
-              ...prev,
-              { role: "assistant", text: result.text, metadata: result.metadata }
-            ]);
-            setPreviousResponseId(result.assistantMessageExtId);
-          },
-          onError: (err) => {
-            setStreaming("");
-            setAgentStatus("");
-            setMessages((prev) => [...prev, { role: "assistant", text: `Error: ${err.message}` }]);
-          }
-        }
-      );
-    },
-    [input, selectedDocs, previousResponseId, mutation]
-  );
-  const noDocs = !docs || docs.length === 0;
-  const noDocsSelected = selectedDocs.length === 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: fileInputRef,
-        type: "file",
-        multiple: true,
-        accept: ".pdf,.txt,.md,.html,.doc,.docx,.rtf,.ppt,.pptx,.xls,.xlsx",
-        onChange: handleUpload,
-        style: fileInputStyle()
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { style: docSelectorStyle(theme), children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => setDocsExpanded((prev) => !prev),
-            style: docToggleStyle(theme),
-            children: [
-              /* @__PURE__ */ jsx("span", { style: { fontSize: "10px" }, children: docsExpanded ? "\u25BC" : "\u25B6" }),
-              labels.documents,
-              " (",
-              selectedDocs.length,
-              "/",
-              docs?.length ?? 0,
-              " in chat)"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => fileInputRef.current?.click(),
-            disabled: uploading,
-            style: secondaryButtonStyle(theme, uploading),
-            children: uploading ? labels.uploading : labels.uploadButton
-          }
-        )
-      ] }),
-      docsExpanded && docs && docs.length > 0 && /* @__PURE__ */ jsx("div", { style: docListStyle(), children: docs.map((doc) => /* @__PURE__ */ jsxs("label", { style: docItemStyle(theme), children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: selectedDocs.includes(doc.external_id),
-            onChange: () => toggleDoc(doc.external_id)
-          }
-        ),
-        doc.file_name
-      ] }, doc.external_id)) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: messagesContainerStyle(), children: [
-      messages.length === 0 && !streaming && /* @__PURE__ */ jsx("div", { style: emptyStateStyle(theme), children: noDocs ? labels.emptyNoDocs : noDocsSelected ? labels.emptyNoSelection : labels.emptyReady }),
-      messages.map((msg, i) => /* @__PURE__ */ jsx(MessageBubble, { message: msg, theme }, i)),
-      agentStatus && !streaming && /* @__PURE__ */ jsxs("div", { style: agentStatusStyle(theme), children: [
-        agentStatus,
-        "..."
-      ] }),
-      streaming && /* @__PURE__ */ jsx(MessageBubble, { message: { role: "assistant", text: streaming }, theme }),
-      /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
-    ] }),
-    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: inputBarStyle(theme), children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          value: input,
-          onChange: (e) => setInput(e.target.value),
-          placeholder: noDocs || noDocsSelected ? "Select documents first..." : labels.placeholder,
-          disabled: noDocs || noDocsSelected || mutation.isPending,
-          style: chatInputStyle(theme)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "submit",
-          disabled: !input.trim() || noDocsSelected || mutation.isPending,
-          style: sendButtonStyle(theme, !input.trim() || noDocsSelected || mutation.isPending),
-          children: mutation.isPending ? "..." : labels.sendButton
-        }
-      )
-    ] })
-  ] });
+      daily: [...dailyMap.values()].sort((a, b) => a.date.localeCompare(b.date)),
+      modelGroups: [...modelMap.values()].sort(
+        (a, b) => b.credits - a.credits || b.totalTokens - a.totalTokens
+      ),
+      metered: !anyData || anyMetered,
+      isLoading: results.some((r) => r.isLoading),
+      isError: results.some((r) => r.isError)
+    };
+  }, [signature]);
 }
-function ChatWidget({ theme, labels, initialWorkspaceId, width, height }) {
+function useProjectInvoices(projectExtId, options) {
   const arbi = useArbi();
-  const [screen, setScreen] = useState("auth");
-  const [workspaceId, setWorkspaceId] = useState(initialWorkspaceId);
-  const resolveWorkspace = useCallback(async () => {
-    if (initialWorkspaceId) {
-      try {
-        await arbi.selectWorkspace(initialWorkspaceId);
-        setScreen("chat");
-        return;
-      } catch {
-        setScreen("workspace");
-        return;
-      }
-    }
-    setScreen("workspace");
-  }, [arbi, initialWorkspaceId]);
-  const handleLogin = useCallback(() => resolveWorkspace(), [resolveWorkspace]);
+  return useQuery({
+    queryKey: arbiQueryKeys.projectInvoices(projectExtId ?? ""),
+    queryFn: () => arbi.projects.invoices(projectExtId),
+    enabled: (options?.enabled ?? true) && !!projectExtId && arbi.isLoggedIn
+  });
+}
+function useUserUsageToday(options) {
+  const arbi = useArbi();
+  return useQuery({
+    queryKey: arbiQueryKeys.userUsageToday(),
+    queryFn: () => arbi.user.usageToday(),
+    enabled: options?.enabled ?? arbi.isLoggedIn
+  });
+}
+
+// src/chat/useArbiChat.ts
+var counter = 0;
+var nextId = (prefix) => `${prefix}-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+var emptyThread = () => ({
+  id: nextId("thread"),
+  title: "",
+  messages: [],
+  responseId: null
+});
+function titleFromQuestion(question, maxLength = 48) {
+  const flat = question.replace(/\s+/g, " ").trim();
+  if (flat.length <= maxLength) return flat;
+  const cut = flat.slice(0, maxLength);
+  const lastSpace = cut.lastIndexOf(" ");
+  const words = lastSpace > maxLength / 2 ? cut.slice(0, lastSpace) : cut;
+  return `${words.replace(/[\s,;:.\-–—]+$/, "")}\u2026`;
+}
+var messageOf = (e, fallback) => e instanceof Error ? e.message : fallback;
+function useArbiChat(options = {}) {
+  const { workspaceId, model, titleLength = 48 } = options;
+  const arbi = useArbi();
+  const { data: docs = [], isLoading: isLoadingDocuments, refetch } = useDocuments(workspaceId);
+  const query = useAssistantQuery();
+  const { mutateAsync } = query;
+  const [threads, setThreads] = useState(() => [emptyThread()]);
+  const [activeId, setActiveId] = useState(() => threads[0].id);
+  const [deselected, setDeselected] = useState(/* @__PURE__ */ new Set());
+  const [isRunning, setIsRunning] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadError, setUploadError] = useState(null);
+  const scopeRef = useRef(workspaceId);
   useEffect(() => {
-    if (arbi.isLoggedIn) void resolveWorkspace();
-  }, [arbi, resolveWorkspace]);
-  const handleWorkspaceSelect = useCallback((id) => {
-    setWorkspaceId(id);
-    setScreen("chat");
-  }, []);
-  const handleChangeWorkspace = useCallback(() => {
-    setScreen("workspace");
-  }, []);
-  return /* @__PURE__ */ jsxs("div", { style: containerStyle(theme, width, height), children: [
-    /* @__PURE__ */ jsxs("div", { style: { ...headerStyle(theme), justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsx("span", { children: labels.title }),
-      screen === "chat" && !initialWorkspaceId && /* @__PURE__ */ jsx("button", { type: "button", onClick: handleChangeWorkspace, style: linkButtonStyle(theme), children: labels.changeWorkspace })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: bodyStyle(), children: [
-      screen === "auth" && /* @__PURE__ */ jsx(AuthScreen, { theme, labels, onLogin: handleLogin }),
-      screen === "workspace" && /* @__PURE__ */ jsx(WorkspaceScreen, { theme, labels, onSelect: handleWorkspaceSelect }),
-      screen === "chat" && workspaceId && /* @__PURE__ */ jsx(ChatView, { workspaceId, theme, labels })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: brandingStyle(theme), children: [
-      "Powered by",
-      " ",
-      /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: "https://www.arbidocs.com",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          style: brandingLinkStyle(theme),
-          children: "ARBI"
+    if (scopeRef.current === workspaceId) return;
+    scopeRef.current = workspaceId;
+    const fresh = emptyThread();
+    setThreads([fresh]);
+    setActiveId(fresh.id);
+    setDeselected(/* @__PURE__ */ new Set());
+    setUploadError(null);
+  }, [workspaceId]);
+  const active = threads.find((t) => t.id === activeId) ?? threads[0];
+  const selectedIds = useMemo(
+    () => docs.map((d) => d.external_id).filter((id) => !!id && !deselected.has(id)),
+    [docs, deselected]
+  );
+  const documents = useMemo(
+    () => docs.filter((d) => !!d.external_id).map((d) => ({
+      id: d.external_id,
+      name: d.file_name ?? d.external_id,
+      isSelected: !deselected.has(d.external_id)
+    })),
+    [docs, deselected]
+  );
+  const patchThread = useCallback(
+    (id, patch) => setThreads((all) => all.map((t) => t.id === id ? patch(t) : t)),
+    []
+  );
+  const patchMessage = useCallback(
+    (threadId, messageId, patch) => patchThread(threadId, (t) => ({
+      ...t,
+      messages: t.messages.map((m) => m.id === messageId ? { ...m, ...patch } : m)
+    })),
+    [patchThread]
+  );
+  const ask = useCallback(
+    async (thread, text) => {
+      const userMessage = {
+        id: nextId("msg"),
+        role: "user",
+        content: text,
+        status: "complete"
+      };
+      const answer = {
+        id: nextId("msg"),
+        role: "assistant",
+        content: "",
+        status: "streaming"
+      };
+      patchThread(thread.id, (t) => ({
+        ...t,
+        title: t.title || titleFromQuestion(text, titleLength),
+        messages: [...t.messages, userMessage, answer]
+      }));
+      setIsRunning(true);
+      let buffer = "";
+      let steps = 0;
+      let streamError = null;
+      try {
+        const result = await mutateAsync({
+          question: text,
+          docIds: selectedIds,
+          previousResponseId: thread.responseId,
+          model,
+          onToken: (token) => {
+            buffer += token;
+            patchMessage(thread.id, answer.id, { content: buffer });
+          },
+          onOutputItemDone: (ev) => {
+            const type = ev.item.type;
+            if (type === "function_call" || type === "reasoning") {
+              steps += 1;
+              patchMessage(thread.id, answer.id, { stepCount: steps });
+            }
+          },
+          onError: (message) => {
+            streamError = message;
+          }
+        });
+        const finalText = result.text || buffer;
+        const failure = streamError || result.errors[0] || null;
+        if (failure && !finalText) {
+          patchMessage(thread.id, answer.id, { status: "error", error: failure });
+        } else {
+          patchMessage(thread.id, answer.id, {
+            status: "complete",
+            content: finalText,
+            stepCount: result.agentSteps.length || steps || void 0
+          });
+          patchThread(thread.id, (t) => ({
+            ...t,
+            responseId: result.assistantMessageExtId ?? t.responseId
+          }));
         }
-      )
-    ] })
-  ] });
-}
-function ArbiChatPanel({
-  workspaceId,
-  theme: themeOverrides,
-  labels: labelOverrides,
-  width = "100%",
-  height = "100%"
-}) {
-  const theme = useMemo(() => getTheme(themeOverrides), [themeOverrides]);
-  const labels = useMemo(() => getLabels(labelOverrides), [labelOverrides]);
-  return /* @__PURE__ */ jsx(
-    ChatWidget,
-    {
-      theme,
-      labels,
-      initialWorkspaceId: workspaceId,
-      width,
-      height
-    }
+      } catch (e) {
+        patchMessage(thread.id, answer.id, {
+          status: "error",
+          error: messageOf(e, "The assistant request failed.")
+        });
+      } finally {
+        setIsRunning(false);
+      }
+    },
+    [mutateAsync, patchMessage, patchThread, selectedIds, model, titleLength]
   );
-}
-function ArbiChat({
-  url,
-  workspaceId,
-  theme: themeOverrides,
-  labels: labelOverrides,
-  width = "400px",
-  height = "600px"
-}) {
-  const queryClient = useMemo(
-    () => new QueryClient({
-      defaultOptions: {
-        queries: { retry: 1, refetchOnWindowFocus: false },
-        mutations: { retry: false }
+  const send = useCallback(
+    async (text) => {
+      const trimmed = text.trim();
+      if (!trimmed || isRunning) return;
+      await ask(active, trimmed);
+    },
+    [active, ask, isRunning]
+  );
+  const lastMessage = active.messages[active.messages.length - 1];
+  const error = lastMessage?.status === "error" ? lastMessage.error ?? null : null;
+  const retry = useCallback(async () => {
+    if (isRunning) return;
+    const messages = active.messages;
+    const failed = messages[messages.length - 1];
+    const question = messages[messages.length - 2];
+    if (failed?.status !== "error" || question?.role !== "user") return;
+    const trimmed = { ...active, messages: messages.slice(0, -2) };
+    patchThread(active.id, () => trimmed);
+    await ask(trimmed, question.content);
+  }, [active, ask, isRunning, patchThread]);
+  const newThread = useCallback(() => {
+    if (active.messages.length === 0) return;
+    const fresh = emptyThread();
+    setThreads((all) => [fresh, ...all]);
+    setActiveId(fresh.id);
+  }, [active.messages.length]);
+  const deleteThread = useCallback(
+    (id) => {
+      const rest = threads.filter((t) => t.id !== id);
+      const next = rest.length > 0 ? rest : [emptyThread()];
+      setThreads(next);
+      if (id === activeId) setActiveId(next[0].id);
+    },
+    [threads, activeId]
+  );
+  const toggleDocument = useCallback((id) => {
+    setDeselected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const selectAllDocuments = useCallback(() => setDeselected(/* @__PURE__ */ new Set()), []);
+  const upload = useCallback(
+    async (files) => {
+      if (files.length === 0) return;
+      setIsUploading(true);
+      setUploadError(null);
+      try {
+        for (const file of files) await arbi.documents.uploadFile(file, file.name);
+        await refetch();
+      } catch (e) {
+        setUploadError(messageOf(e, "The upload failed."));
+      } finally {
+        setIsUploading(false);
       }
-    }),
-    []
+    },
+    [arbi, refetch]
   );
-  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(ArbiProvider, { url, children: /* @__PURE__ */ jsx(
-    ArbiChatPanel,
-    {
-      workspaceId,
-      theme: themeOverrides,
-      labels: labelOverrides,
-      width,
-      height
-    }
-  ) }) });
+  return {
+    threads: threads.map(({ id, title }) => ({ id, title })),
+    activeThreadId: active.id,
+    messages: active.messages,
+    isRunning,
+    error,
+    documents,
+    isLoadingDocuments,
+    isUploading,
+    uploadError,
+    send,
+    retry,
+    selectThread: setActiveId,
+    newThread,
+    deleteThread,
+    toggleDocument,
+    selectAllDocuments,
+    upload
+  };
 }
 var TypingIndicator = memo(function TypingIndicator2() {
   return /* @__PURE__ */ jsx("div", { className: "flex w-full justify-start mb-2", "data-testid": "dm-typing-indicator", children: /* @__PURE__ */ jsx("div", { className: "bg-card border border-primary rounded-2xl rounded-bl-md px-4 py-2.5", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1 items-center", children: [
@@ -1616,6 +789,324 @@ function useArbiDocumentSync(workspaceId) {
     }
   });
 }
+
+// src/workspaces/shell-workspaces.ts
+function getWorkspaceKind(workspace) {
+  if (workspace.is_public) return "common";
+  if ((workspace.users?.length ?? 0) > 1) return "shared";
+  return "private";
+}
+function memberName(user) {
+  const full = [user?.given_name, user?.family_name].filter(Boolean).join(" ").trim();
+  return full || user?.email || "";
+}
+function toShellWorkspace(workspace) {
+  const people = (workspace.users ?? []).filter((u) => !u.agent_ext_id);
+  return {
+    id: workspace.external_id,
+    name: workspace.name,
+    kind: getWorkspaceKind(workspace),
+    description: workspace.description,
+    projectName: workspace.project_name,
+    docCount: (workspace.shared_document_count ?? 0) + (workspace.private_document_count ?? 0),
+    memberCount: people.length,
+    members: people.map((u) => ({ name: memberName(u.user), picture: u.user?.picture })),
+    updatedAt: workspace.updated_at
+  };
+}
+function recency(workspace, lastOpened) {
+  const opened = lastOpened?.[workspace.id];
+  if (opened !== void 0) return opened;
+  const updated = Date.parse(workspace.updatedAt ?? "");
+  return Number.isNaN(updated) ? 0 : updated;
+}
+function resolveActiveWorkspace(items, selectedId, options = {}) {
+  const selected = selectedId ? items.find((w) => w.id === selectedId) : void 0;
+  if (selected) return selected;
+  if (options.isSeed && options.seedActiveId) {
+    const seeded = items.find((w) => w.id === options.seedActiveId);
+    if (seeded) return seeded;
+  }
+  return items[0];
+}
+function pickRecentWorkspaces(items, activeId, options = {}) {
+  const { limit = 4, lastOpened, formatLastSeen } = options;
+  return items.filter((w) => w.id !== activeId).map((w) => ({ w, at: recency(w, lastOpened) })).sort((a, b) => b.at - a.at).slice(0, limit).map(({ w, at }) => formatLastSeen ? { ...w, lastSeen: formatLastSeen(at) } : w);
+}
+
+// src/workspaces/useShellWorkspaces.ts
+function useShellWorkspaces(options) {
+  const {
+    workspaces,
+    isLoading = false,
+    loadError,
+    selectedId,
+    seed,
+    decorate,
+    recentLimit,
+    lastOpened,
+    formatLastSeen
+  } = options;
+  const live = useMemo(
+    () => (workspaces ?? []).map((source) => {
+      const item = toShellWorkspace(source);
+      return decorate ? { ...item, ...decorate(item, source) } : item;
+    }),
+    [workspaces, decorate]
+  );
+  const isLive = live.length > 0;
+  const isSeed = !isLive && !isLoading && !!seed;
+  const items = useMemo(
+    () => isLive ? live : isSeed ? [...seed.workspaces] : [],
+    [isLive, live, isSeed, seed]
+  );
+  const active = useMemo(
+    () => resolveActiveWorkspace(items, selectedId, { isSeed, seedActiveId: seed?.activeId }),
+    [items, selectedId, isSeed, seed?.activeId]
+  );
+  const recent = useMemo(
+    () => pickRecentWorkspaces(items, active?.id, { limit: recentLimit, lastOpened, formatLastSeen }),
+    [items, active?.id, recentLimit, lastOpened, formatLastSeen]
+  );
+  const [openingId, setOpeningId] = useState(null);
+  const [openError, setOpenError] = useState(void 0);
+  const callbacks = useRef({
+    select: options.select,
+    onOpened: options.onOpened,
+    onOpenError: options.onOpenError
+  });
+  callbacks.current = {
+    select: options.select,
+    onOpened: options.onOpened,
+    onOpenError: options.onOpenError
+  };
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const open = useCallback(async (target) => {
+    const id = typeof target === "string" ? target : target.id;
+    const workspace = itemsRef.current.find((w) => w.id === id);
+    if (!workspace) return false;
+    setOpenError(void 0);
+    setOpeningId(id);
+    try {
+      await callbacks.current.select(workspace);
+    } catch (err) {
+      setOpenError(err);
+      setOpeningId(null);
+      callbacks.current.onOpenError?.(err, workspace);
+      return false;
+    }
+    setOpeningId(null);
+    callbacks.current.onOpened?.(workspace);
+    return true;
+  }, []);
+  return {
+    items,
+    active,
+    recent,
+    isLive,
+    isLoading,
+    error: openError ?? loadError ?? null,
+    openingId,
+    open
+  };
+}
+function useArbiShellWorkspaces(options = {}) {
+  const arbi = useArbi();
+  const query = useWorkspaces();
+  const { select, ...rest } = options;
+  const defaultSelect = useCallback(
+    (workspace) => arbi.selectWorkspace(workspace.id),
+    [arbi]
+  );
+  return useShellWorkspaces({
+    ...rest,
+    workspaces: Array.isArray(query.data) ? query.data : void 0,
+    isLoading: query.isLoading,
+    loadError: query.error,
+    select: select ?? defaultSelect
+  });
+}
+function useCreateTask() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (body) => arbi.tasks.create(body),
+    onSuccess: () => qc.invalidateQueries({ queryKey: arbiQueryKeys.tasks() })
+  });
+}
+function useUpdateTask() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ taskId, patch }) => arbi.tasks.update(taskId, patch),
+    onSuccess: () => qc.invalidateQueries({ queryKey: arbiQueryKeys.tasks() })
+  });
+}
+function useRunTask() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (taskId) => arbi.tasks.runWithAuth(taskId),
+    onSuccess: (_task, taskId) => Promise.all([
+      qc.invalidateQueries({ queryKey: arbiQueryKeys.tasks() }),
+      qc.invalidateQueries({ queryKey: arbiQueryKeys.taskRuns(taskId) })
+    ])
+  });
+}
+function useDeleteTask() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (taskId) => arbi.tasks.delete(taskId),
+    onSuccess: () => qc.invalidateQueries({ queryKey: arbiQueryKeys.tasks() })
+  });
+}
+function useTaskRuns(taskId, options) {
+  const arbi = useArbi();
+  return useQuery({
+    queryKey: arbiQueryKeys.taskRuns(taskId ?? ""),
+    queryFn: () => arbi.tasks.listRuns(taskId),
+    enabled: (options?.enabled ?? true) && !!taskId && arbi.isLoggedIn,
+    refetchInterval: (q) => q.state.data?.some((r) => r.status === "running") ? 3e3 : false
+  });
+}
+function useCreateAgent() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (name) => arbi.agents.create(name),
+    onSuccess: () => qc.invalidateQueries({ queryKey: arbiQueryKeys.agents() })
+  });
+}
+function useAgentConfig(agentExtId, options) {
+  const arbi = useArbi();
+  return useQuery({
+    queryKey: arbiQueryKeys.agentConfig(agentExtId),
+    queryFn: async () => agentExtId ? await arbi.agents.getConfig(agentExtId) : await arbi.agentConfig.get("default"),
+    enabled: (options?.enabled ?? true) && arbi.isLoggedIn
+  });
+}
+function useAgentModels(options) {
+  const arbi = useArbi();
+  return useQuery({
+    queryKey: arbiQueryKeys.models(),
+    queryFn: async () => (await arbi.agentConfig.getModels()).models.map((m) => m.model_name),
+    enabled: (options?.enabled ?? true) && arbi.isLoggedIn
+  });
+}
+function useSaveAgentConfig() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ agentExtId, title, sections }) => {
+      const pinned = await arbi.agents.getConfig(agentExtId);
+      const base = pinned ?? await arbi.agentConfig.get("default");
+      const merged = structuredClone(base);
+      for (const [section, params] of Object.entries(sections)) {
+        merged[section] = { ...merged[section] ?? {}, ...params };
+      }
+      return arbi.agentConfig.save({
+        ...merged,
+        agent_ext_id: agentExtId,
+        title: title ?? `agent-${agentExtId}`
+      });
+    },
+    onSuccess: (_saved, { agentExtId }) => Promise.all([
+      qc.invalidateQueries({ queryKey: arbiQueryKeys.configs() }),
+      qc.invalidateQueries({ queryKey: arbiQueryKeys.agentConfig(agentExtId) })
+    ])
+  });
+}
+function useAgentWorkspaces(agentExtId, options) {
+  const arbi = useArbi();
+  return useQuery({
+    queryKey: arbiQueryKeys.agentWorkspaces(agentExtId ?? ""),
+    queryFn: () => arbi.agents.listWorkspaces(agentExtId),
+    enabled: (options?.enabled ?? true) && !!agentExtId && arbi.isLoggedIn
+  });
+}
+function useGrantAgentAccess() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      agentExtId,
+      workspaceId,
+      mode = { kind: "standing" }
+    }) => {
+      if (mode.kind === "temporary") {
+        return arbi.agents.grantTemporaryAccess(agentExtId, workspaceId, mode.ttlSeconds);
+      }
+      const agent = (await arbi.agents.list()).find((a) => a.external_id === agentExtId);
+      if (!agent?.email) throw new Error("The agent's address is unknown.");
+      return arbi.workspaces.grantAccess({ workspaceId, emails: [agent.email] });
+    },
+    onSuccess: (_res, { agentExtId }) => qc.invalidateQueries({ queryKey: arbiQueryKeys.agentWorkspaces(agentExtId) })
+  });
+}
+function useRevokeAgentAccess() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      agentExtId,
+      workspaceId
+    }) => {
+      const previous = arbi.hasWorkspace ? arbi.getWorkspaceId() : null;
+      await arbi.selectWorkspace(workspaceId);
+      try {
+        await arbi.workspaces.removeUsers([agentExtId]);
+      } finally {
+        if (previous && previous !== workspaceId) await arbi.selectWorkspace(previous);
+      }
+    },
+    onSuccess: (_res, { agentExtId }) => qc.invalidateQueries({ queryKey: arbiQueryKeys.agentWorkspaces(agentExtId) })
+  });
+}
+function useSkills(options) {
+  const arbi = useArbi();
+  return useQuery({
+    queryKey: [...arbiQueryKeys.skills(), options?.includeHidden ?? false],
+    queryFn: () => arbi.assistant.listSkills({ includeHidden: options?.includeHidden }),
+    enabled: (options?.enabled ?? true) && arbi.isLoggedIn,
+    staleTime: 3e4
+  });
+}
+function useContacts(options) {
+  const arbi = useArbi();
+  return useQuery({
+    queryKey: arbiQueryKeys.contacts(),
+    queryFn: () => arbi.contacts.list(),
+    enabled: (options?.enabled ?? true) && arbi.isLoggedIn
+  });
+}
+function usePendingContacts(options) {
+  const contacts = useContacts(options);
+  const pending = useMemo(
+    () => (contacts.data ?? []).filter(
+      (c) => c.status === "invitation_pending" || c.status === "invitation_expired"
+    ),
+    [contacts.data]
+  );
+  return { ...contacts, pending };
+}
+function useAddContacts() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (emails) => arbi.contacts.add(emails),
+    onSuccess: () => qc.invalidateQueries({ queryKey: arbiQueryKeys.contacts() })
+  });
+}
+function useRemoveContacts() {
+  const arbi = useArbi();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (contactIds) => arbi.contacts.remove(contactIds),
+    onSuccess: () => qc.invalidateQueries({ queryKey: arbiQueryKeys.contacts() })
+  });
+}
 function useWorkspaceDocs(workspaceId) {
   const { data: docs = [], isLoading, isError } = useDocuments(workspaceId);
   const docIds = useMemo(
@@ -2753,7 +2244,11 @@ var CitationRendererComponent = ({
     onDismissCitation,
     notify2
   ]);
-  return /* @__PURE__ */ jsx("div", { className: cn("citation-container", className), "data-testid": "citation-renderer", children: renderMarkdown({ components: markdownComponents, isStreaming, children: content }) });
+  return /* @__PURE__ */ jsx("div", { className: cn("citation-container", className), "data-testid": "citation-renderer", children: renderMarkdown({
+    components: markdownComponents,
+    isStreaming,
+    children: normalizeCitationMarkup(content)
+  }) });
 };
 var CitationPopover = ({
   citationNum,
@@ -3787,7 +3282,6 @@ function isAgentUser(user) {
   return user.external_id.startsWith("agt-");
 }
 var DM_QUERY_KEY = ["arbi", "directMessages"];
-var CONTACTS_QUERY_KEY = ["arbi", "contacts"];
 function mergeContacts(threads, contacts) {
   const byPeer = /* @__PURE__ */ new Map();
   for (const t of threads) byPeer.set(t.peer.external_id, t);
@@ -3853,7 +3347,7 @@ function useDirectMessages(options) {
     enabled
   });
   const contactsQuery = useQuery({
-    queryKey: CONTACTS_QUERY_KEY,
+    queryKey: arbiQueryKeys.contacts(),
     queryFn: () => arbi.contacts.list(),
     enabled
   });
@@ -3938,6 +3432,7 @@ function ConversationList({
   classNames,
   emptyState,
   header,
+  lead,
   className
 }) {
   return /* @__PURE__ */ jsxs(
@@ -3957,6 +3452,7 @@ function ConversationList({
             conversations.length === 1 ? "colleague" : "colleagues"
           ] })
         ] }) : header,
+        lead,
         /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: conversations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-xs text-muted-foreground", children: emptyState ?? "No conversations yet." }) : /* @__PURE__ */ jsx("ul", { className: "w-full", children: conversations.map((c, i) => {
           const { peer, lastMessage, unreadCount } = c;
           const newSection = c.sectionLabel && c.sectionLabel !== conversations[i - 1]?.sectionLabel;
@@ -4099,7 +3595,7 @@ function annotateThread(messages, accessors, runWindowMs = RUN_WINDOW_MS) {
 function DateSeparator({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "my-3 flex justify-center", "data-testid": "dm-date-separator", children: /* @__PURE__ */ jsx("span", { className: "rounded-full bg-background/80 px-2 py-0.5 text-xs text-muted-foreground", children }) });
 }
-function MessageBubble2({
+function MessageBubble({
   message,
   classNames,
   isLastOfRun = true,
@@ -4165,7 +3661,7 @@ function MessageThread({
       items.map(({ message: m, isLastOfRun, isFirstOfDay }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
         isFirstOfDay && formatDay && /* @__PURE__ */ jsx(DateSeparator, { children: formatDay(m.createdAt) }),
         /* @__PURE__ */ jsx(
-          MessageBubble2,
+          MessageBubble,
           {
             message: m,
             classNames,
@@ -4243,14 +3739,117 @@ function DmComposer({
     error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-destructive", "data-testid": "arbi-dm-error", children: error })
   ] });
 }
+var DEFAULT_START_BY_EMAIL_LABELS = {
+  email: "Email address",
+  emailPlaceholder: "name@example.com",
+  message: "Message",
+  messagePlaceholder: "Write the first message\u2026",
+  send: "Send",
+  sending: "Sending\u2026",
+  invalidEmail: "Enter a valid email address."
+};
+var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function StartByEmail({
+  onStart,
+  onStarted,
+  classNames,
+  labels,
+  className
+}) {
+  const l = { ...DEFAULT_START_BY_EMAIL_LABELS, ...labels };
+  const uid = useId();
+  const [email, setEmail] = useState("");
+  const [text, setText] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const address = email.trim().toLowerCase();
+  const valid = EMAIL.test(address);
+  const submit = async () => {
+    if (!valid || !text.trim() || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await onStart(address, text.trim());
+      setEmail("");
+      setText("");
+      onStarted?.(result);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      "data-testid": "arbi-dm-start",
+      className: cn("flex flex-col gap-2 border-b border-border px-4 py-3", className),
+      onSubmit: (e) => {
+        e.preventDefault();
+        void submit();
+      },
+      children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: `${uid}-email`, children: l.email }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: `${uid}-email`,
+            type: "email",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            placeholder: l.emailPlaceholder,
+            "aria-invalid": email !== "" && !valid,
+            "aria-describedby": email !== "" && !valid ? `${uid}-bad` : void 0,
+            disabled: busy,
+            "data-testid": "arbi-dm-start-email"
+          }
+        ),
+        email !== "" && !valid && /* @__PURE__ */ jsx("p", { id: `${uid}-bad`, className: "text-xs text-destructive", children: l.invalidEmail }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: `${uid}-text`, children: l.message }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: `${uid}-text`,
+            value: text,
+            onChange: (e) => setText(e.target.value),
+            placeholder: l.messagePlaceholder,
+            rows: 2,
+            disabled: busy,
+            "data-testid": "arbi-dm-start-message"
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-xs text-destructive", "data-testid": "arbi-dm-start-error", children: error }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "submit",
+            size: "sm",
+            disabled: !valid || !text.trim() || busy,
+            className: cn("self-end", classNames?.sendButton),
+            "data-testid": "arbi-dm-start-send",
+            children: [
+              busy ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx(Send, { className: "size-4", "aria-hidden": true }),
+              busy ? l.sending : l.send
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function DirectMessages({
   className,
   classNames,
-  emptyThread,
-  emptyList
+  emptyThread: emptyThread2,
+  emptyList,
+  listHeader,
+  listLead,
+  startByEmail,
+  hideOwnContact
 }) {
   const {
-    conversations,
+    conversations: allConversations,
+    myExtId,
     isLoading,
     isError,
     error,
@@ -4260,6 +3859,14 @@ function DirectMessages({
     markRead
   } = useDirectMessages();
   const [selectedPeerId, setSelectedPeerId] = useState(null);
+  const conversations = useMemo(
+    () => hideOwnContact && myExtId ? allConversations.filter((c) => c.peer.external_id !== myExtId) : allConversations,
+    [allConversations, hideOwnContact, myExtId]
+  );
+  const openStarted = (created) => {
+    const peer = Array.isArray(created) ? created[0]?.recipient?.external_id : void 0;
+    if (peer) setSelectedPeerId(peer);
+  };
   const loadError = isError ? error instanceof Error ? error.message : "Couldn\u2019t load messages." : null;
   const selected = useMemo(
     () => conversations.find((c) => c.peer.external_id === selectedPeerId) ?? null,
@@ -4303,11 +3910,24 @@ function DirectMessages({
             selectedPeerId: selected?.peer.external_id ?? null,
             onSelect: setSelectedPeerId,
             classNames,
-            emptyState: isLoading ? "Loading messages\u2026" : emptyList
+            emptyState: isLoading ? "Loading messages\u2026" : emptyList,
+            header: listHeader,
+            lead: /* @__PURE__ */ jsxs(Fragment, { children: [
+              listLead,
+              startByEmail && /* @__PURE__ */ jsx(
+                StartByEmail,
+                {
+                  onStart: sendMessageTo,
+                  onStarted: openStarted,
+                  classNames,
+                  labels: typeof startByEmail === "object" ? startByEmail.labels : void 0
+                }
+              )
+            ] })
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsx(MessageThread, { conversation: selected, classNames, emptyState: emptyThread }),
+          /* @__PURE__ */ jsx(MessageThread, { conversation: selected, classNames, emptyState: emptyThread2 }),
           selected ? /* @__PURE__ */ jsx(
             DmComposer,
             {
@@ -5712,6 +5332,6 @@ function hasVideoTrack(blob) {
   });
 }
 
-export { ActivityFeed, AiActionCard, AiAnswer, AppleIcon, ArbiBotIcon, ArbiChat, ArbiChatPanel, ArbiIcon, ArbiWebSocketProvider, ArtifactCanvas, ChatBubble, CitationRenderer, ClaudeIcon, CommandPalette, CommandPaletteProvider, ConversationList, DEFAULT_ASPECT_OPTIONS, DateSeparator, DirectMessages, DmAvatar, DmComposer, DocIcon, DocQaPanel, DocSearch, DocumentCardMenu, DocumentGallery, DocumentReview, DocumentTable, DraftTitleControls, FileIcon, FireworksIcon, GeminiIcon, GitHubIcon, GoogleIcon, HtmlIcon, ImageCropModal, ImageCropper, LinkedInIcon, MessageArtifactCard, MessageBubble2 as MessageBubble, MessageThread, OpenAIIcon, PhotoCapture, ProviderIcon, RUN_WINDOW_MS, SemanticSearch, TxtIcon, TypingIndicator, VideoCapture, VoiceNoteRecorder, XlsIcon, annotateThread, arbiQueryKeys, captureFrameAsBlob, cropImage, dayKey, describeActivity, getNotificationTypeMeta, getWorkspaceActionText, getWorkspaceSentPhrase, hasVideoTrack, isWorkspaceNotificationType, parseActivityContent, redlineStats, textToArtifact, toRedlineMarkdown, useActivity, useAgents, useAiTask, useArbiConnected, useArbiDocumentSync, useArbiUiStore, useArbiWebSocket, useArbiWsContext, useArbiWsMessage, useArbiWsStatus, useArbiWsStore, useArbiWsTask, useArbiWsTasks, useAssistantQuery, useCameraStream, useCommandPalette, useConfigs, useConversations, useDeleteAgents, useDirectMessages, useDocuments, useFacts, useHealth, useParsedDocument, useProjectInvoices, useProjectUsage, useProjects, useProjectsUsage, useSemanticSearch, useSessions, useTags, useTasks, useThumbnails, useUserUsageToday, useVideoRecorder, useWorkspaceDocs, useWorkspaces, userDisplayName, userInitials };
+export { ActivityFeed, AiActionCard, AiAnswer, AppleIcon, ArbiBotIcon, ArbiIcon, ArbiWebSocketProvider, ArtifactCanvas, ChatBubble, CitationRenderer, ClaudeIcon, CommandPalette, CommandPaletteProvider, ConversationList, DEFAULT_ASPECT_OPTIONS, DEFAULT_START_BY_EMAIL_LABELS, DEFAULT_USD_PER_CREDIT, DateSeparator, DirectMessages, DmAvatar, DmComposer, DocIcon, DocQaPanel, DocSearch, DocumentCardMenu, DocumentGallery, DocumentReview, DocumentTable, DraftTitleControls, FileIcon, FireworksIcon, GeminiIcon, GitHubIcon, GoogleIcon, HtmlIcon, ImageCropModal, ImageCropper, LinkedInIcon, MessageArtifactCard, MessageBubble, MessageThread, OpenAIIcon, PhotoCapture, ProviderIcon, RUN_WINDOW_MS, SemanticSearch, StartByEmail, TxtIcon, TypingIndicator, VideoCapture, VoiceNoteRecorder, XlsIcon, annotateThread, arbiQueryKeys, captureFrameAsBlob, creditsToUsd, cropImage, dayKey, describeActivity, formatCredits, getNotificationTypeMeta, getWorkspaceActionText, getWorkspaceKind, getWorkspaceSentPhrase, hasVideoTrack, isUsageMetered, isWorkspaceNotificationType, parseActivityContent, pickRecentWorkspaces, redlineStats, resolveActiveWorkspace, textToArtifact, titleFromQuestion, toRedlineMarkdown, toShellWorkspace, useActivity, useAddContacts, useAgentConfig, useAgentModels, useAgentWorkspaces, useAgents, useAiTask, useArbiChat, useArbiConnected, useArbiDocumentSync, useArbiShellWorkspaces, useArbiUiStore, useArbiWebSocket, useArbiWsContext, useArbiWsMessage, useArbiWsStatus, useArbiWsStore, useArbiWsTask, useArbiWsTasks, useAssistantQuery, useCameraStream, useCommandPalette, useConfigs, useContacts, useConversations, useCreateAgent, useCreateTask, useDeleteAgents, useDeleteTask, useDirectMessages, useDocuments, useFacts, useGrantAgentAccess, useHealth, useParsedDocument, usePendingContacts, useProjectInvoices, useProjectUsage, useProjects, useProjectsUsage, useRemoveContacts, useRevokeAgentAccess, useRunTask, useSaveAgentConfig, useSemanticSearch, useSessions, useShellWorkspaces, useSkills, useTags, useTaskRuns, useTasks, useThumbnails, useUpdateTask, useUserUsageToday, useVideoRecorder, useWorkspaceDocs, useWorkspaces, userDisplayName, userInitials };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map